Ionic Tipps

Die Zielplatform auswählen, Plugins dazu fügen, das Projekt builden, damit man es deployen kann, das macht in der mobilen App Entwicklung auch mit Ionic Schwierigkeiten.

Dieser Artikel ist Teil der Serie: Ionic_Start - Teil 8

Versionen der Tools

Zunächst ist es ist gut einen Überblick über die aktuell verwendeten Versionen der Tools zu erhalten:

npm --version
node --version
bower --version
gulp --version
tsc --version
tsd --version
cordova --version
ionic --version

ionic info

ionic info liefert eine Vielzahl an infos kombiniert.

Global installierte tools und packages:

npm list -g --depth=0

Näheres dazu findet man in folgendem Artikel: Pakete installieren mit npm

Pfad überprüfen.

Powershell: Get-ChildItem env: oder Get-ChildItem env:Path Cmd / Eingabeaufforderung: Set

In Visual Studio sollte man dann noch unter external web tools kontrollieren, ob auch hier dieselben Tools verwendet werden.

ngcordova

Um sicher zu sein, dass die Plugins geladen wurden, verwendet man sie nur mit folgendem Konstrukt:

$ionicPlatform.ready(function() {
  $cordovaPlugin.someFunction().then(success, error);
});

Aus ngcordova.com/docs/install

builden

Ein typischer Ablauf:

ionic platform add android
ionic build android
ionic emulate android

ionic run

Verwendete Aufrufe:

ionic run android
ionic run android --device
ionic run android -c -l
ionic run android -cls

ionic help run

Ionic serve

ionic serve
ionic serve --browser chrome --lab
ionic serve --nobrowser
ionic help serve

Plugins

Plugins sind ein wichtiges Konzept in der Cordova Welt, um hardwarenahe Komponenten anzusprechen. Leider sind die Plugins manchmal für spezielle Platformen nicht in ausreichender Qualität vorhanden. Ein Blick in die Doku, falls vorhanden oder in die Issues Liste für das einzelne Plugin, hilft allerdings schon frühzeitig zu erkennen, dass es z.B. unter iOS oder windows zu Schwierigkeiten kommt oder nicht unterstützt wird.

Typischer Aufruf:

ionic plugin add cordova-plugin-datepicker

Oder vorher deinstallieren:

ionic plugin remove cordova-plugin-statusbar
ionic plugin add cordova-plugin-statusbar

Die Packages werden im plugin Verzeichnis installiert und im package.json File vermerkt. Man muss hier nicht den Schalter —save dazufügen, der Eintrag ins json File erfolgt automatisch.

ionic plugin list

… listet alle installierten plugins auf

ionic state restore

… Dadurch werden alle plugins, aufgelistet im package.json File, installiert. Auch die Platformen werden restored.

Platform:

ionic platform list

… listet die verfügbaren Platformen auf und zeigt auch, welche schon installiert sind in diesem Projekt (sieht man auch im platforms folder)

Achtung: Für Windows Phone 8.1, verwendet man die Universal Windows Platform, also nicht wp8, sondern windows!

Hat man grundlegende Änderungen im config.xml gemacht, z.B. die AppId (= widget id in der config.xml) oder die Version geändert, dann wird das häufig nicht in allen generierten Files richtig weiterverbreitet. Deshalb empfiehlt es sich hier die platformen und plugins neu anzulegen.

del .\platforms\
del .\plugins\

ionic platform add windows
ionic platform add ios
ionic platform add android

ionic state restore

Nun kann man mit ionic build weitermachen.

Die Angst bei diesem radikalen Schritt ist zu Beginn groß. Man befürchtet, dass man etwas verliert, aber der Schritt ist oft die Lösung für sehr eigenartige Probleme:

• Das Package lässt sich nicht installieren;

• Die Versionsnummer im Pfad des erstellten Packages, stimmt nicht mit der in der config.xml überein; …

—save

Der erwähnte —save Schalter findet sich in folgenden tools:

tsd install ionic cordova --save

bower install angular-moment moment --save

npm install bower --save-dev

Npm besitzt auch einen save Schalter.

Der Schalter --save-dev bewirkt, dass das Package unter devDependencies und nicht unter dependencies eingereiht wird. Auch für bower gibt es diese beiden Arten.

Soweit zu einigen Tipps, die bei der Entwicklung einer App auf Basis Ionic/Cordova hoffentlich weiterhelfen.

Dieser Artikel ist Teil der Serie Ionic_Start.
Links und Glossar