Kategorie: Softwareentwicklung

IONIC Framework Tutorial – Einleitung 1/2

Wie kommt man schnell dazu mit dem IONIC Frmework die erste App zu erstellen? Hier gibt es ein paar Tipps, um sich zurecht zu finden. Denn wie auch jedes andere Framework Projekt hat auch IONIC seine Macken und Probleme.

Was ist IONIC?

Als Entwickler wird man oft mit neuen, spannenden Tech-Themen bombardiert und eines Tages flog mir das Wort „Ionic“ um die Ohren. Dieser Opensource Framework ist bereits in Version 3 (Stand Juni 2018) erhältlich und hat seit seiner Gründung viele Verbesserungen erfahren. Aber wie auch jedes andere Projekt hat auch er eine Macken und Probleme, bei denen man stundenlang nach dem Details sucht, welches die eigene Applikation crashen lässt.

Ionic besteht aus mehreren Ebenen und anderen Softwareprojekten. Wie man die Umgebung lokal installiert findet ihr hier. „Lokal“ muss man an dieser Stelle aber nicht wörtlich nehmen, da einige Funktionen und Befehle ständig Daten aus dem Internet benötigen.

In IONIC wird mittels JavaScript oder Typescript Code auf Angular Basis erstellt, dieser Code wird compiliert (zu Javascript) und läuft dann in einer Browserinstanz auf dem Rechner oder Smartphone. Damit man die Smartphone Funktionen nicht alle von Hand und Hardwarenahe ansteuern muss, gibt es eine Anbindung an den CORDOVA Framework. Cordova stellt die Bibliothek zu Verfügung, um Smartphone Funktionen anzusteuern.

Außerdem bietet Ionic viele Basisdesigns und Komponeten (z.B. Buttons, Textboxen, Listenelemente, Icons) mit denen ihr eure App schnell mit einem schönen GUI ausstatten könnt.

Das erste Projekt installieren

Aber nun die Frage, wie ist der Workflow bei IONIC? Nach der Installation kann man sich sein erstes Projekt starten.

Dazu legt ihr irgendwo im Dateisystem einen Ordner an, in welchen wir nun das erste Projekt hineinladen. Geht in cmd in euer erstellten Ordner (z.B. c:\temp) und führt folgenden Befehl aus. Die auftretenden Fragen könnt ihr jeweils mit „no“ also n beantworten:

ionic start myApp tabs

Mit ionic start wir die neue Basisapp in den Ordner myApp (z.B. c:\temp\myApp\) installiert. Dazu werden nun einige Module aus dem Web gezogen und lokal bei euch abgelegt. Mit dem Befehl tabs wird die Basisapp mit einer simplen Menu-Struktur garniert. Ergo könnt ihr gleich eure Inhalte gleich in diesen Rohling füllen.

Sobald der Befehl erfolgreich ausgeführt wurde wird durch Ionic noch ein Git angelegt und initialisiert. Im Ordner myApp befinden sich nun viele neue Dateien und Ordner. Da ihr mehr über den Inhalt dieser Ordner wissen möchtet, dann müsst ihr unbedingt diesen Artikel von mir lesen.

Zu diesen neuen Ordnern und Dateien möchte ich an dieser Stelle nur folgendes sagen:

src: Hier findet ihr eure Quellcodes und Pages

www: hier werden Ressourcen abgelegt, auf die ihr später in eure App zugreifen könnt. (z.B. imgs und sounds)

Das erste Projekt starten

Eure Basisapp ist nun also installiert und ihr könnt sie sofort im Browser starten. Dazu gebt ihr folgendes ein:
cd myApp

ionic serve

Die App wird nun im Debugmode compiliert und in eurem Standardbrowser unter localhost:8100

geöffnet. Euer neuer Standard sollte nun der Chrome-Browser werden. Denn hier findet ihr einige Debug Optionen, welche ihr dringend benötigt um euch das Leben einfach zu machen! Ich beziehe mich ab jetzt auf den Chrome-Browser.

Öffnet mit F12 die Debug-Console im Browser und seht euch hier gleich mal um. Wie auch in der Webentwicklung können HTML und CSS Elemente inspiziert werden.

Unter Console werden euch console.log Ausgaben aus dem Quellcode angezeigt. Dies hilft später beim debuggen.

Unter Sources findet ihr im Filesystem unter src/pages/home.ts eure Seite, welche ihr soeben seht. Mit einem Klick links neben die Zeile könnt ihr Breakpoints setzen.

Unter Netzwerk findet ihr die Ressourcen, welche über das Netz in den Browser geladen werden. Egal ob sie lokal oder vom Web her geliefert werden.

Unter Application wird euch der Browser Speicher angezeigt. Links findet ihr Storage und LocalStorage. Hier werden später Datenpakete aus eurer Applikation abgelegt. Derzeit müsste noch alles leer sein.

Übrigens, wenn ihr euren ionic Server starten wollt, gibt es auch einen Befehl, welcher nicht den Browser öffnet. Dies erspart euch immer wieder ein paar Klicks, falls Chrome nicht euer Standardbrowser ist:

ionic serve -–no-open

Hurra, die erste App wurde nun von euch erstellt und compiliert. Aber bleibt dran, denn um Frust zu vermeiden solltet ihr Unbedingt den nächsten Teil Lesen. Stellt mir eure Fragen und gebt mir noch Tipps, um die nächsten Anleitungen zu erstellen. Ich will, dass ihr so gut wie möglich die Strukturen kennen lernt und aus meinen Fehlern lernt.

Ein IONIC Framework Starterguide Teil 2