Initialisierung eines Ionic Projekts

Nachdem man den Entwicklungsrechner soweit vorbereitet hat, dass Visual Studio und alle nützlichen Tools vorhanden und installiert sind, beginnen wir nun endlich mit einem Projekt.

Dieser Artikel ist Teil der Serie: Ionic_Start - Teil 6

Schnecke

PowerShell

Wir verwenden dazu in diesem Artikel ausschließlich die command line. Ich verwende die PowerShell um etwas Übung damit zu bekommen, man kann aber auch die Eingabeaufforderung verwenden. Ich verwende auch in der PowerShell vor allem die alten DOS Commands, wie cd statt Set-Locations.

ionic start

Eine App anlegen geht mit ionic start:

> ionic start vocabulary sidemenu

Das dauert nun eine Weile, bis das Projekt mit dem template sidemenu und dem Namen vocabulary angelegt wird. Der Wizard fragt noch folgendes nach:

Create an ionic.io account to send Push Notifications and use the Ionic View app? (Y/n):

Mit n für nein, beantworten.

Am Ende listet Ionic die weiteren Schritte vorbildlich auf.

Man kann nun die weiteren Tasks einzeln aus der angezeigten Auflistung kopieren und ausführen.

Quick Edit mode

Falls man Befehle kopieren will, dann funktioniert das in der PowerShell bzw. in der Eingabeaufforderung oft nicht so, wie man das vielleicht von Editoren gewohnt ist. Ich finde es am einfachsten, wenn der Quick Edit Modus aktiviert ist. Dann kann man einen Bereich, mit der Maus markieren und ein Klick auf die rechte Maustaste kopiert den Bereich. Ein weiterer Klick mit der rechten Maustaste in das Fenster fügt diesen Inhalt in die aktuelle Ausführungszeile ein. Den Quick Edit Modus aktiviert man, indem man das in den Eigenschaften der PowerShell einstellt. - Mit der rechten Maustaste auf die Titelleiste klicken - Eigenschaften - QuickEdit-Modus anhaken. Wenn man schon mal in dem Eigenschaftsfenster ist, sollte man auch die Backgroundfarbe auf schwarz stellen (Reiter: Farben). Die farbigen Ausgaben der Commandline Tools, wie Ionic, sind manchmal Blau, das ist für einen blauen Hintergrund z.B. kaum lesbar. Die PowerShell muss man nun neu starten, damit die Farbenänderung sich korrekt auswirkt. Bemerkung: Unter Windows 10 kann man endlich auch mit Ctrl+c und Ctrl+v arbeiten.

Generierte Struktur erkunden

Nun aber zurück zur weiteren Vorgangsweise:

Wir gehen in das generierte Verzeichnis unseres neuen Projektes.

> cd vocabulary

Wir sehen uns die erzeugte Struktur/Files kurz an.

Teile davon sind für Cordova: hooks und plugins. - Das Verzeichnis platforms fehlt noch, die kommen dazu, wenn wir eine Zielplattform dazufügen.

Zum Ansehen der Files verwende ich Visual Studio Code. Am einfachsten gleich aus der PowerShell aus aufrufen:

code .

.bowerrc: legt fest, wo die Bibliotheken landen, die per bower installiert werden.
bower.json: listet die benötigten Bibliotheken.
.editorconfig: Einstellungen für den Editor(falls dieser diese Einstellungen unterstützt).
.gitignore: Falls git als Sourcecodeverwaltung eingesetzt wird.
config.xml: das cordova config file Hier werden so allgemeine Einstellungen vorgenommen, wo die index.html zu finden ist, ob die App im Querformat verwendet werden darf, wo die Resourcefile für die Icons und Splashscreen liegen. Diese Settings können auch plattformspezifisch sein. Wir können gleich den Namen und die id setzen. Dies hätte man übrigens auch schon Ionic start überlassen können, hätten wir mit folgenden zusätzlichen Parametern aufgerufen:
```
  --appname "Vocabulary" --id com.mydomain.vocabulary
```
gulpfile: Der Taskrunner gulp wird zur Erstellung verwendet und kann durch die Implementierung zusätzlicher Tasks in diesem File beeinflusst werden.
ionic.project: Auch ionic hat ein eigenes Konfigurationsfile.
package.json: Welche Tools und cordova Plugins werden benötigt, diese Teile werden mit npm installiert und in den node_modules folder abgelegt.
Der www Ordner enthält die html/Javascript implementierung, samt JavaScript libraries und css Dateien.

Sass

Wie geht es nun weiter. Als erstes wollen wir, dass Sass ( Syntactically Awesome Style Sheets) verwendet wird und wir Sass statt css verwenden können.

> ionic setup sass

Dadurch ändert sich nicht nur ein Eintrag im index.html, sondern auch im ionic.project. Man sieht, dass start tasks dazugefügt werden: gulpStartupTasks und watchPattern.

Der Aufruf von ionic info liefert einen Überblick über die aktuell verwendeten Versionen von Cordova, gulp, Ionic und Node:

> ionic info

Your system information:
Cordova CLI: 5.4.1
Gulp version:  CLI version 1.1.0
Gulp local:
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS:
Node Version: v4.2.4

platform

Wir wählen: windows. Damit meint Ionic/Cordova ‘windows universal app’ und wir können das einfach als Windows Store App - früher Metro App genannt, starten. Wir können es aber auch auf ein Windows Phone deployen.

Man kann sich die unterstützten Plattformen auflisten:

> ionic platform list

Installed platforms:
Available platforms: amazon-fireos, android, blackberry10, browser, firefoxos, webos, windows, windows8, wp8

Es ist praktisch zu wissen, welche Verzeichnisse, wodurch entstehen. Daher ist es gut, sich die Struktur immer wieder mal im Explorer anzusehen. Dadurch hat man später die Möglichkeit, an einen bestimmten Punkt zurückzukehren, die zu erzeugenden Verzeichnisse zu löschen und von dort nochmals zu starten.

ionic serve

Das Template sidemenu legt ein kleines Projekt mit einem Menü an und man kann sich das schon mal im Browser anzeigen lassen, dazu:

> ionic serve

Diesen Server werden wir während der Entwicklung oft verwenden, meist sogar einfach laufen lassen und in einer anderen PowerShell oder in Visual Studio Befehle zum Builden, usw. absetzen.

Ionic serve wartet in der Command line auf Befehle:

q - Beenden
r - Restart
g / - Adresse ändern

ionic help serve listet alle Befehle auf.

> ionic serve --nobrowser

Ist sehr praktisch, dass nicht immer ein neuer Browser Tab aufgeht.

Wir wollen nun aber eine Plattform dazufügen.

> ionic platform add windows

Nun gibt es den platform Ordner, indem im Unterordner windows dann beim Builden des Projektes alles reinkopiert wird (Icons, www-Ordner, Plugins, Configfiles, …). Bemerkung: Beim Hinzufügen eines Cordova Plugins, muss man darauf achten, ob die Plugins wirklich auch in die einzelnen Platform Ordner reinkopiert wurden.

Die Unterstützung von ionic für windows ist noch nicht ganz ausgereift. Wir fügen folgendes in der config.xml dazu:

<platform name="windows">
    <preference name="windows-target-version" value="10.0" />
</platform>

#####Das Projekt builden

> ionic build windows

Your package has been successfully created.
 BUILD OUTPUT: C:\ionictest\vocabulary\platforms\windows\AppPackages\CordovaApp.Windows_0.0.1.0_anycpu_debug_Test\CordovaApp.Windows_0.0.1.0_anycpu_debug.appx

Das für Windows typische appx Package wurde erstellt. Und kann nun ausprobiert werden. Indem man das neben liegende Powershell Script aufruft, oder einfacher indem man Ionic die Arbeit machen lässt:

> ionic run windows

… startet die Windows App, allerdings beendet sie sich gleich wieder, weil ein kleiner Fehler enthalten ist:

Am einfachsten man kommentiert folgende Zeilen aus in www/js/app.js:

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
cordova.plugins.Keyboard.disableScroll(true);

Je nach Windows Version ist es auch nötig, dass man ein kleines Script einfügt, damit es erlaubt ist, dass Content dynamisch dazugeladen werden darf. Dazu in die bower.json in den dependencies dazufügen

"winstore-jscompat": "https://github.com/MSOpenTech/winstore-jscompat.git"

Und im index.html <script src="lib/winstore-jscompat/winstore-jscompat.js"></script>

Und zwar als erstes zu ladende JavaScript file, also bei uns nun direkt vor ionic.bundle.js

Nun nochmals starten mit

> ionic run windows

Emulator

> ionic emulate windows

Damit könnte man das Projekt emulieren, aber in diesem Fall, wenn man eine Windows Store App baut, ist das nicht sinnvoll. Im Falle von Android und iOS aber sehr wohl. Im Windows Phone Fall wird man eher über Visual Studio das Projekt emulieren (vermutlich auch im Android Fall).

Nochmals zusammengefasst, die Aufrufe:

ionic start vocabulary sidemenu
ionic setup sass
ionic info
ionic serve

ionic platform add android
ionic build android
ionic emulate android
ionic run android

Diemal habe ich android statt windows gewählt, dazu muss die SDK Version und der Path richtig gesetzt sein. Zum Builden einer iOS Version, benötigt man einen Mac.

Wie man nun auf Visual Studio wechselt und weitere Tipps und Tricks, damit man nicht in alle Fallen stolpert, folgen demnächst.