ionic1

Hybride Apps mit Ionic – Übersicht und Installation

Nachdem ich letzte Woche etwas Angular.js gelernt habe, kann es nun mit dem Ionic Framework losgehen. Das baut auf Angular und Cordova auf und erlaubt es mir Apps für Android und Iphone mit meinen Lieblings-Webtools zu schreiben, anstatt mit Java oder Swift. In diesem Post will ich dazu erst einmal die Eckdaten von Ionic zusammenfassen und das Ganze installieren.

pfeildings

Wie funktioniert Ionic?

Wer schon mal eine Webapp programmiert hat, weiß dass es im Gegensatz zu nativen Apps einige Einschränkungen gibt. Eine Einschränkung, die mir oft in die Quere kommt ist der Zugriff auf die Hardwarekomponenten, wie der Kamera, eines Smartphones. Diese lassen sich mit im Web haus-üblichen Mitteln fast nicht umsetzen. Doch durch das Cordova Framework ist das möglich! Es verpackt die üblichen Html/Css/Js Komponenten und bietet Schnittstellen zum jeweiligen Gerät. So kommt am Ende von Cordova eine hybride App zum Vorschein. Ein weiterer Vorteil ist, dass sich eine App ganz einfach für mehrere Plattformen generieren lässt.

Ionic setzt dem Ganzen prinzipiell nur noch eins drauf und bietet sehr viele Bibliotheken und Services um den Look&Feel einer nativen App hinzubekommen. Allerdings bietet Ionic darüber hinaus noch einiges mehr rund um die hybrid App Entwicklung.

Was bietet Ionic?

Neben dem Ionic Framework zum Entwickeln hübscher, hybrider Apps tummelt sich ein kleines Ökosystem, das aus den folgenden Dingen besteht:

  • Ionic Cloud – Ein Backend Dienst für hybride Apps direkt von Ionic. Bietet einige Services, wie Push Notifications und Authentication.

ionic cloud

  • Ionic Creator – Mit diesem Tool lässt sich im Browser eine neue App mittels Drag & Drop aus Komponenten zusammenbasteln. Eignet sich sehr gut für einen ersten Prototypen, welchen man dann im Code weiter verfeinert.

ionic creator

 

  • Ionic Lab – Eine Chromium Variante, also ein spezieller Browser zum Testen von Ionic Apps. Es lassen sich direkt Android und iOs Versionen vergleichen und viele Gimmicks wie ein Live Reload sind verbaut.

ionic lab

 

  • Ionic View – Mit dieser App lassen sich hybride entwickelte Apps schnell betrachten. Spezielle Codes können hier eingegeben werden um einen Kunden schnell Zugriff zum Entwicklungsstand zu geben.

ionic view

 

  • Ionic Market – Ein Marktplatz, auf dem Entwickler Plugins und Themes anbieten können.

ionic market

  • Anderes von Ionic – Eine Übersicht über alle genannten Tools und weitere Ionic spezifische Dinge, wie Foren, gibt es hier.

pfeildings

Wie installiert man Ionic?

Am besten geht das wohl über den Node Package Manager (npm) also den herunterladen.

Dann die Konsole öffnen, denn npm ist ein Konsolentool. Da folgendes eingeben:

Dann ewig warten und danach eine neue App so anlegen:

Das tabs erstellt eine App mit einer Tabbar unten. Andere Möglichkeiten sind sidemenu, maps, salesforce und blank.

Fertig! Jetzt nur noch die App mit diesem Befehl aufrufen und im Browser oder im Ionic Lab öffnen:

Hier kann man noch – – lab anhängen um eine iOs und Android Version nebeneinander angezeigt zu bekommen.

Ergebnis

ionic fertig

Links der Lab Browser, rechts im normalen browser aufgerufen. Unten rechts der serve Befehl.

pfeildings

Wie weitermachen?

Jetzt ist alles installiert und du kannst mal ein bisschen rumspielen und dir hier die Ionic Komponenten ansehen. Ich werde bestimmt in einem zukünftigen Post eine kleine Beispiel-App programmieren. Ein weiteres gutes Tutorial mit einer Beispiel-App findest du hier auf Angularjs.de. Und los!

pfeildings

Bis jetzt bin ich total begeistert von all den Ionic Tools und wie ausgereift diese sind. Vor einigen Jahren waren hybride Apps noch nicht so cool, aber vielleicht ändert sich das nun 🙂 Mehr habe ich nicht zu sagen, bis zum nächsten Mal!

*macht Kakao Nummer 3*