Sie sind Webentwickler mit Schwerpunkt auf AngularJS? Sie würden gern Ihren Webservice als App auf den Markt bringen? Sie beherrschen lediglich HTML, CSS und JavaScript meisterhaft? Dann ist das Ionic-Framework genau das richtige für Sie! Denn mit Ionic können Sie Ihre bereits erstellte, responsive Seite in eine App für Mobiltelefone verwandeln! Sie sind kein Webentwickler, haben aber eine Idee für eine App? Dann treten Sie gern an uns heran, wir helfen gerne, denn „We love to make you Appy!“

Über das Ionic-Framework

Das Ionic-Framework an sich ist ein reines Frontend-Framework auf Basis von AngularJS und Apache Cordova welches geschaffen wurde, um Hybride Apps zu erstellen und auf den Markt zu bringen. Hybride Apps sind Anwendungen, die weder native Apps sind, da Sie mittels Webtechnologien erstellt wurden und in einem nativen App Wrapper laufen, noch Webanwendungen, da Sie über den Shop als App verteilt werden. Um diese Apps zu realisieren stellt Ionic eine Palette an Komponenten zur Verfügung, mit denen Anwendungen aufgebaut werden können, ähnlich wie auch mit Bootstrap. Ionic wurde für mobile Endgeräte optimiert, sodass Anwendungen schnell und übersichtlich laufen, jedoch nicht für die Entwicklung von Webseiten für den Standard Webbrowser.

Vom Web zur App

Vorbereitung

Nun da wir unsere vorhandene AngularJS Seite als Ionic-App gestalten wollen, sollten wir vorher noch einen neuen Branch anlegen um unsere bisherige Arbeit nicht zu verlieren. Nachdem dies geschehen ist und wir uns im neuen Branch befinden, müssen wir Ionics Scripte und CSS noch in unsere Seite einbinden. Um dies zu erledigen gibt es drei Möglichkeiten:

• Installation von Ionic mittels Browser
• Einbindung von Ionic durch einen CDN von code.ionicframework.com
• Ionic Release von GitHub herunterladen

Ist dies erledigt, kann man auch schon fast beginnen seine Seite mittels Ionic für mobile Endgeräte umzubauen. Zu beachten ist dabei noch, dass das Routing mittels Angulars uiRoute durchgeführt wird. Sollte also die zu ändernde Seite noch über Angulars Standard ngRoute navigiert werden, muss dies geändert werden.

App Aufbau

Eine Ionic App besteht aus drei Hauptkomponenten, dem Header, dem scrollbaren Content und dem Footer, wobei Header und Footer optional sind. Der Header kann genutzt werden um den Titel, Buttons oder Icons anzuzeigen, welche genutzt werden können um die angezeigte Seite zu wechseln, Funktionen des Mobiltelefons anzusprechen oder um ein Seitenmenü zu öffnen. Der Content wird für die Darstellung des Inhaltes der Seite genutzt. Der Footer kann, wie der Header auch, Buttons und Icons sowie Informationstexte enthalten.

Codeübertragung von mobilen Webseiten zur Ionic App

Nun da wir uns einen ungefähren Plan gemacht haben, wie unsere fertige App aussehen soll, kann damit begonnen werden den Code für Ionic zu ändern. So bietet es sich an eine ‘Eltern’-Seite einzurichten, welche den Seitenaufbau abstrakt beschreibt. Diese ermöglicht es in jedem Zustand der Seite Änderungen am Header vorzunehmen oder auch ein Seitenmenü einzufügen. Wurde diese Variante gewählt wird der Seiteninhalt dann später im ‘ion-nav-view’ dargestellt. Dieser funktioniert analog zum ‘ng-view’ von AngularJS. Um den Inhalt einer HTML Datei darzustellen muss dieser in die Tags ‘ion-view’ gefolgt von ‘ion-content’ eingepflegt werden. Um Listen, welche durch ng-repeat erstellt wurden, darzustellen muss dank Ionic kein Listenelement mehr erstellt werden, sondern man fügt einfach die Klasse ‘item’ in das div, in dem der repeat stattfindet, ein und man erhält so eine ordentliche, voneinander getrennte Darstellung aller Objekte. Um die App performant zu halten bietet es sich an ‘ng-repeat’ durch ‘collection-repeat’ zu ersetzen, mit dessen Hilfe nur die Listenelemente geladen werden, die zur Zeit sichtbar sind. Um auf einer Seite einen Footer einzublenden muss lediglich unter den ‘ion-content’ noch ‘ion-footer-bar’ eingefügt werden. War das alles zuviel für Sie? Dann vergessen Sie nicht, wir als Web- und Appentwickler sind gern bereit ihre Ideen, für Web und App, für Sie umzusetzen! Melden Sie sich einfach bei uns.

Das Release

Nun da unsere App zu unserer vollen Zufriedenheit fertig gestellt ist fehlt nur noch eines, und zwar dass wir unser Werk unter die Leute bringen. Um dies zu ermöglichen hat das Ionic Team auch einen Guide zur Verfügung gestellt, welcher sowohl die nötigen Schritte für Android als auch für iOS enthält.

Abschluss

Alles in allem kann man auf diese Weise mit einigen Änderungen am HTML Code seine gut geführte AngularJS Seite zu einer App für mobile Endgeräte machen. Dabei muss man sich jedoch nicht nur auf das Design seiner Seite beziehen, sondern kann auch neue Komponenten oder Icons, welche Ionic bereitstellt, in die App integrieren. Man kann also sagen, wer AngularJS mag und seine Kreation schon immer auf einem Mobiltelefon sehen wollte, der wird Ionic lieben.