In der heutigen Zeit ist es oft wichtig auf allen relevanten Plattformen präsent zu sein, um alle möglichen Nutzergruppen abdecken zu können. Dies bedeutet oftmals einen großen Mehraufwand, um bestehende Software für andere Betriebssysteme wie iOS oder Android umzumünzen.
Aus diesem Grund versuchen moderne Technologien wie Apache Cordova Projekte, geschrieben in HTML, CSS und JavaScript auch für mobile Plattformen mithilfe deren SDKs zu bauen.

Dadurch entstehen einige entscheidende Vorteile für Entwickler:
– Eine einzelne Code-Basis
– Geringerer Zeit- und Kostenaufwand
– Konsistenz in Design

Überdies ist es außerdem noch möglich die Projektstrukturen, die Cordova automatisch mithilfe des Web-Projektes erzeugt, mit professionellen Tools wie Android Studio oder xCode zu öffnen und weiterzubearbeiten.

Warum Angular?

Angular ist ein Open-Source JavaScript Framework entwickelt von Google, welches für die Erstellungvon progressiven Web-Applikation verwendet werden kann. Im Zusammenspiel mit dem Design-Standard ‘Material Design’, der auch für Android verwendet wird, kann man dem User ein mobile-like feeling auch im Web vermitteln.
Weiters bietet die Angular-CLI viele Features, die Entwicklern beim Erstellen, Arbeiten, Testen und Bereitstellen von Angular-Projekten helfen und somit den gesamten Workflow vereinfachen können.

Das bedeutet, dass man mit Angular und Material Design die Möglichkeit dazu hat moderne Web-Applikationen in zeitgemäßem Design zu erstellen und diese nach dem erfolgreichen Bauen mit Cordova ebenfalls für Plattformen wie iOS, Android und Windows konvertieren kann. Somit hat man nun die zuvor beschriebene Situation ‘Applikation auf mehreren Plattformen mit Single-Codebase’.

Vorbereitungen

Benötigte Installationen

– nodejs & npm (https://nodejs.org/en/)
– angular CLI (npm install -g @angular/cli )
– cordova CLI (npm install -g cordova)

– android build: Android Studio oder SDK
– iOS build: xCode

Angular Projekt anlegen

Entweder ein bestehendes Projekt wählen, oder ein neues anlegen:

– ng new my-app

Cordova einbinden

Sobald ein Angular Projekt gewählt wurde kann der Cordova Projektordner erstellt werden, indem man mit der Console im Angular-Projektverzeichnis folgenden Befehl verwendet:

– cordova create mobile

Nun wird ein neuer Ordner ‘mobile’ als Unterordner im Angular-Projekt angelegt, der jegliche Konfiguration für Cordova beinhaltet.

Der ‘www’ Ordner ist der Bereich in dem später unsere Web-Applikation hinkopiert werden muss, damit Cordova davon die nativen mobile Apps bauen kann.

Somit haben wir alle Voraussetzungen abgeschlossen, um eine Web-Applikation, erstellt mit Angular, auch für Plattformen zu releasen, für welche die SKDs installiert sind.

Android Build

Als Testprojekt wurde die Turniererstellungs-Applikation CAT – Create A Tournament verwendet, da diese sowohl funktional, als auch einen ausreichenden Umfang für diesen Test bietet.

Angular-Projekt vorbereiten

1) Dem Projekt wurde zuerst wie zuvor beschrieben der ‘mobile’ Folder durch den Befehl ‘cordova create mobile’ hinzugefügt.*

2) Danach muss das Angular-Projekt mit dem Befehl ‘ng build –prod’ gebaut werden. Üblicherweise wird nun ein ‘dist’ Ordner im Root-Verzeichnis angelegt, der den releasfähigen Build beinhaltet.

3) Der komplette Inhalt aus dem ‘dist’ Verzeichnis muss nun in das ‘www’ Verzeichnis des Cordova Projektes kopiert werden.

Android Build

Abermals mit der Console kann man nun im ‘mobile’ Verzeichnis die verschiedenen Plattformen, für welche gebaut werden soll, hinzufügen. Da ich auf einer Windows-Machine arbeite und nur Android Studio installiert habe, werde ich nur Android hinzufügen:

– cordova platform add android

Bei diesem Befehl wird zuerst überprüft ob alle benötigten SDKs verfügbar sind und folglich ein ‘android’ Ordner in ‘platforms’ angelegt.
Sollte es hierbei keinerlei Fehlermeldungen geben und alle Ordner erfolgreich angelegt sein kann damit begonnen werden die mobile app zu bauen:

– cordova run android

Sollte ein Android-Gerät angeschlossen sein, besteht außerdem die Möglichkeit die App direkt auf dem eigenen Smartphone oder Tablet zu launchen und zu testen.

Ergebnisse

Die App läuft problemlos auf meinem mobilen Gerät und mithilfe zusätzlicher Tools ist es außerdem möglich den Build zu signieren und zu zippen und somit auch auf den Play Store / App Store zu publishen.

CAT – Play Store

The post Erstellung von Nativen Mobile-Apps mit Angular und Cordova appeared first on Mobile USTP MKL.

Installation

Bevor die Animationen implementiert werden können, muss das Angular- Projekt aufgesetzt werden. Um die gesamte Ordnerstruktur automatisiert zu erstellen, wird die Angular-CLI (Command Line Interface) verwendet, welche mit folgendem Befehl installiert wird:

npm install -g @angular/cli

Nachdem die Angular-CLI erfolgreich installiert ist, kann mit dem folgendem Befehl das Projekt in einem gewünschten Verzeichnis erstellt werden:

ng new animationTest

Um das angelegte Projekt nun zu auf localhost bereitzustellen, wird in dem erstellten Verzeichnis folgender Befehl verwendet:

ng serve

Nun ist die erstellte Web-Applikation auf „localhost:4200“ abrufbar.

Komponente erstellen

Die Web-Applikation ist nun fertig erstellt, gebaut und bereitgestellt. Folglich wird die zu animierende Komponente mit folgendem Befehl erstellt:

ng generate component components/animation

Die Angular-CLI erstellt nun die Komponente “animation” in dem angegebenen Pfad und legt alle benötigten Files direkt an. Für dieses Projekt sind nur das Template (.html) und der Controller (.ts) relevant.

Jetzt sind alle Files vorhanden, welche benötigt werden. Schließlich muss die erstellte Komponente nurnoch in der “app.component.html” eingetragen werden. Dafür wird der gesamte erzeugte Code von der CLI in der “app.component.html” entfernt und mit folgendem Code ersetzt:

<app-animation></app-animation>

Nach dem Speichern wird die View automatisch neu geladen und sieht wie folgt aus:

Animationen

Imports

Bevor die von Angular bereitgestellten Animationsfunktionen verwendet werden können, müssen 2 Imports getätigt werden:

1. In der “app.module.ts”:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2. In der “animation.component.ts”:

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

Implementation

Mithilfe der Imports ist es nun möglich auf alle Funktionen zuzugreifen, welche das Animationspaket von Angular bereitstellt. Das gesamte Styling der Animationskomponente wird in diesem Projekt mithilfe der Animationen gesetzt, deshalb bleiben alle von der CLI erstellten css-Files unverändert.

Zunächst wird ein neues Property “animations” in dem “@Component” Decorator in “animation.component.ts” erstellt. Diese Property braucht zunächst einen Auslöser (trigger), welcher auf Zuständsänderungen (state changes) achtet und dementsprechend reagiert. Hierfür wird der trigger “changeState” definiert, welcher zwei verschiedene states “state1” und “state2” beinhaltet. Jeder dieser beiden states hat ein individuelles Styling, welches bei einem state change gewechselt wird. Zusätzlich müssen noch die Übergänge (transitions) zwischen einem state change definiert werden. Diese legen fest wie lange bespielsweise der Übergang von state1 zu state2 dauern soll.

Das HTML-Element soll wie ein Expansionpanel anfänglich schmal sein und nach einem state change “aufgeklappt” werden. Desweiteren wird sowohl die Farbe, als auch die Deckkraft verändert, um den Übergang besser zu visualisieren.

Weiters wird noch eine Variable, sowie eine Methode gebraucht, um die Zustände dynamisch zu ändern. Hierfür wird eine boolesche Variable “state”, sowie eine Methode “toogle()” angelegt, um diese zu ändern.

Zum Schluss wird noch das HTML-Element benötigt welches animiert werden soll, sowie einen Button, um die “toggle()” Methode auszuführen.

Ergebnis

Das Ergebnis kann nun wie bisher nach abspeichern und einem automatischen page reload betrachtet werden.

Angular Animationen erlauben es in kürzester Zeit mächtige Übergänge zwischen mehrereb Zuständen zu realisieren. Diese können moderne Web-Applikationen nicht nur visuell ansprechender gestalten, sondern Nutzern auch die Möglichkeit geben, Aktionen besser zu verstehen.

The post Animationen mit Angular 7 appeared first on Mobile USTP MKL.

Vorwort

Digitale Medien werden heutzutage oftmals bevorzugt, da sie mit mobilen Geräten schnell und überall abrufbar sind. Jedoch wird dabei oft der größte Vorteil von analogen Printmedien vergessen; die Langlebigkeit. Links zu einzelnen Websites oder digitalen Medien ändern sich häufig im Zuge von Umstrukturierungen der bestehenden Infrastruktur und sind oftmals nicht mehr auffindbar.

Ziel des Projektes CAT (Create A Tournament) war es, eine Web-Applikation zum Erstellen von Single-Elimination Turnieren zu entwickeln, welche jederzeit über einen QR-Code erreicht werden kann.

Dabei wurden folgende Requirements aufgestellt:

• Modernes UI
• Einfache Bedienbarkeit
• Möglichkeit zum Speichern einer Teamliste
• Bearbeitung eines laufenden Turnieres
• Responsive Layout
• Funktional bei jeder Turniergröße

Konzeption

Der erste Schritt in diesem Projekt war die Konzeptionierung des Layouts, des Interfaces und der benötigten Aktionen.Hierfür wurden simple Entwürfe in MS Paint erstellt.

Die Startseite sollte relativ einfach gestaltet sein. Lediglich ein Eingabefeld für die Bezeichnung des aktuellen Turniers (z.B.: Tennisturnier St.Pölten 2018), sowie ein Textfeld, um alle Teams/Spieler einzutragen (1 Team pro Zeile).

Die nachfolgende View nach erflogreichem Erstellen eines Turnieres ist die Übersicht des Turnierbaumes. Dieser sollte übersichtlich dargestellt werden, sowie Gewinner/Verlierer von jedem Match klar ersichtlich visualisieren. Desweiteren soll es auch die Möglichkeit geben, einen laufenden Timer für jedes individuelle Match zu starten, sowie alle bisherigen Ergebnisse mit Timestamps in einem zuständigen Logpanel einzublicken.

Die dritte View, welche für das Bearbeiten des laufenden Turnieres zuständig ist, sollte aus Konsistenzgründen wie die Turniererstellungs-View aussehen, daher wurde dafür kein zusätzlicher Entwurf angefertigt.

Umsetzung

Für die Umsetzung von CAT wurde das Framework Angular verwendet, sowie Material Design für die benötigten UI-Komponenten wie z.B.: Buttons, Inputs, Menus usw. Desweiteren wurde Visual Code als Entwicklungsumgebung und GitHub für die Version-Control herangezogen.

Das beiden größte Problem bei der Umsetzung von CAT waren die Darstellung des generierten Turnierbaumes, sowie die Entwicklung des Algorithmus, welcher den Turnierbaum anhand einer übergebenen Anzahl an Spielern dynamisch erzeugt.

Die fertiggestellte Applikation wird mithilfe von Firebase gehostet. Dazu wurde die Domain “www.create-a-tournament.com” gekauft und mit Firebase verlinkt.

Ergebnis

Nach ungefähr 30 Stunden Arbeitszeit wurde die Applikation fertiggestellt und deployed.

Auf der Startseite wurden gegenüber dem ursprünglich erstellten Entwurf einige Änderungen vorgenommen. So trägt man Teams/Spieler nicht gemeinsam in einem Textfeld pro Zeile ein, sondern kann für jedes Team ein individuelles Eingabefeld erstellen und dieses auch wieder individuell löschen. Außerdem wurde sich dazu entschieden weitere Funktionen wie zum Beispiel den Timer anfänglich zu starten (activate timer initially), sowie die Anzeige des Logpanels (show log panel) in einem aufklappbaren Menü als optionale Einstellung einzutragen.

Die Turnieransicht ist relativ nahe am Entwurf geblieben, lediglich der Timer wurde fixed in die untere Ecke platziert und auf Linien zu den nachfolgenden Matches wurde verzichtet

Überdies wurden noch zusätzliche, nicht im Requirement definierte Funktionen, wie z.B.: Änderung des Themes (Hell/Dunkel), sowie ein Help-Dialog implementiert.

Zukunft

Das Projekt war umfangreicher, als initial angenommen. Überdies gibt es noch viele Möglichkeiten, um CAT mit zusätzlichen Funktionen auszustatten.

• Abspeichern des gesamten Turnierstandes
• Linien, um das nachfolgende Match zu kennzeichen
• Offline-Nutzung als lokale Applikation für Android und iOS

The post CAT – Create A Tournament appeared first on Mobile USTP MKL.