Wenn ich schon für das Entwicklercamp einen Vortrag zum Thema “Multi Platform Apps” vorbereite kann ich ja auch gleich den praktischen Teil des Themas für etwas Inhalt hier verwerten.
Ich werde hier nach und nach ein kleines Tutorial schreiben in dem beschrieben wird wie man mit dem Framework ionic eine App erstellen kann.

Ionic basiert auf Apache Cordova und vereint dies mit AngularJS und weiteren für mobile Apps optimierten html, css und JS Komponenten um möglichst schnell und einfach eine App erstellen zu können.

Installation

Die Installation ist denkbar einfach. Mit npm werden die benötigen Pakete cordova und ionic installiert.

1
$ sudo npm install -g cordova ionic

Nachdem die Command-Line Tools installiert lässt sich mit dem Befehl ionic start AppName <template> ein neues Projekt initialisieren.
Für das Template gibt es die Optionen blank, tabs und sidemenu.

1
$  ionic start demoApp tabs

Hierbei wird der Ordner demoApp erstellt und neben dem gewünschten Template alle für das Projekt benötigten Bibliotheken installiert und mit einem freundlichen Hinweis beendet was für Optionen man nun hat.

1
2
3
4
5
6
7
8
our Ionic project is ready to go! Some quick tips:

 * cd into your project: $ cd demoApp

 * Setup this project to use Sass: ionic setup sass

 * Develop in the browser with live reload: ionic serve
...

Im Ordner demoApp finden sich folgende Dateien und Ordner.

1
2
3
4
5
6
7
8
9
10
11
12
bower.json
.bowerrc
config.xml
.editorconfig
.gitignore
gulpfile.js
hooks
ionic.project
package.json
plugins
scss
www

Für den Anfang interessant sind die Datei config.xml und der Ordner www. In der config.xml stehen alle wichtigen Informationen zu der App.
Dazu gehören unter anderem:

  • Der Name und der Packagename unter dem die App eventuell später im App-Store verfügbar sein soll.
  • Die Version der App
  • Informationen zum Autor der App
  • Eine Beschreibung der App

Darüber hinaus lassen sich über die Datei auch Plattform spezifische Einstellungen definieren oder auch die Verwendung von Plugins steuern.

Im Ordner www findet sich der eigentliche Quellcode der App. Durch die dort hinterlegten html und css Dateien werden die einzelnen Ansichten der App definiert. In den JavaScript Dateien wird die Logik der App erstellt.

Starten wir ionic serve eine live Preview der App öffnet sich im Idealfall ein Browserfenster in dem der derzeitge Stand der App sichtbar ist. Mit der im Chrome integrierten Funktion die Darstellung im Mobiltelefon zu simulieren ergibt sich dann folgende Ansicht:

Im nächsten Teil werden ich dann ein wenig mehr zu den einzelnen html Dateien schreiben, und wie diese ineinander greifen.