Teil 6: Im Zusammenhang von Anfang an

Web-App Tutorial: Ionic – ein Framework für das User Interface mobiler Apps
Keine Kommentare

Die Beliebtheit von JavaScript äußert sich darin, dass es eine unzählige Menge von Frameworks und Bibliotheken gibt. Sie dienen dazu, Standardaufgaben einfacher zu lösen und erprobte Vorgehensweisen für viele Anwendungsszenarien vorzuschlagen. In der letzten Ausgabe des Entwickler Magazins haben wir Angular vorgestellt. In diesem Teil soll es um Ionic, ein Framework für das User Interface, gehen.

Wir hatten bereits ausgeführt, dass man mit HTML5, CSS3 und JavaScript alle Technologien zusammen hat, um Webapplikationen zu erstellen. Eine Gerätegruppe, für die solche Anwendungen zunehmend attraktiv wird, sind mobile Geräte. Eine Webapplikation kann als Web-App (speziell angepasste Webapplikation) oder als hybride App (eine Web-App im Sandkasten) auf dem Smartphone oder Tablett ausgeführt werden (Kasten: „Apps: Native, Web, Hybrid“). Beide Varianten bleiben im Kern Webapplikationen, die man an die speziellen Belange des Mobile Computing anpasst. Eine besondere Herausforderung ist dabei stets die Gestaltung des User Interface. Die typischen Elemente und die meist auf Touch-Interaktion basierende Bedienung unterscheiden sich erheblich von den Möglichkeiten einer klassischen Webanwendung, die etwa in einem Browser auf einem PC bzw. Notebook ausgeführt wird. Hilfe gibt es wieder durch den Einsatz eines Frameworks. Und wir wären nicht im JavaScript-Universum, wenn es dazu nicht eine umfassende Auswahl solcher geben würde. Recht bekannt und häufig verwendet ist Ionic.

Artikelserie

  • Teil 1: Motivation – Vom Fat-Client zur modernen Web-App, Architektur, HTML5
  • Teil 2: Seiten gestalten – CSS3/Sass
  • Teil 3: Funktionalität realisieren mit JavaScript
  • Teil 4: TypeScript – die typsichere Variante von JavaScript
  • Teil 5: Durchstarten – Eine App mit dem JavaScript Framework Angular
  • Teil 6: Ionic – ein Framework für das User Interface mobiler Apps
  • Teil 7: Mobile mit Cordova, Desktop mit Electron

Hybride Apps als Ausgangspunkt

Beginnen wir damit, uns anzuschauen, welche Möglichkeiten der UI-Gestaltung es im Bereich von hybriden Apps gibt. Die nativen Varianten sind auf das System fokussiert, das heißt konkret:

  • Android: deklarativ mittels XML-Dateien und UI Builder in Android Studio
  • iOS: Storyboards mittels UI Builder in Xcode
  • Windows 10 (UWP): deklarativ mittels XAML und UI Builder in Visual Studio.

Apps: Nativ, Web, Hybrid

Bei Apps für die mobilen Geräte unterscheidet man zwischen nativen Apps, Web-Apps und den hybriden Apps, letztere als Mix aus den beiden anderen App-Typen. Jede Art weist ihre spezifischen Vor- und Nachteile auf. Der Vorteil von nativen Apps liegt darin, dass diese für das jeweilige Betriebssystem optimiert sind. Die Benutzeroberfläche und das Bedienkonzept sind vollständig mit dem System kompatibel. Nutzer müssen sich also nicht erst lange orientieren, d. h. sie sind mit den üblichen Vorgängen, wie der Auswahl oder dem Löschen von Elementen und dem Wechseln zwischen den Screens einer Anwendung sofort vertraut. Native Apps haben zudem keine Beschränkungen beim Zugriff auf spezifische Gerätehardware, d. h. man kann mit allen Sensoren direkt über die APIs des Systems interagieren. Das Deployment erfolgt über die App Stores. Dadurch, dass die App auf dem System installiert wird, ist grundsätzlich auch eine Offlinenutzung möglich, sofern das sinnvoll ist. Eine Datensynchronisation kann beim Herstellen der nächsten Onlineverbindung automatisch stattfinden.

Dem gegenüber stehen Web-Apps. Dies sind spezielle Webapplikationen, die für die Nutzung auf mobilen Geräten besonders angepasst werden, u. a. in Sachen Nutzerführung und Gestaltung der Benutzeroberfläche. Der Zugriff auf die Systemhardware ist dabei eingeschränkt, einige Funktionen, wie bspw. die Ortung, sind jedoch nutzbar. Die Darstellung erfolgt im Browser und kann damit die Besonderheiten der einzelnen Plattform nur bedingt berücksichtigen. Web-Apps können nicht über den App Store bereitgestellt werden, denn sie laufen auf dem Server und benötigen daher eine stete Internetverbindung, damit man mit ihnen sinnvoll arbeiten kann. Web-Apps können dann eine Alternative sein, wenn man dem Nutzer eine Installation nicht zumuten kann, etwa wenn die App sehr selten oder nur einmalig verwendet wird.

Hybride Apps sind technologisch zwischen Web-Apps und nativen Apps angeordnet. Sie laufen in einem Web-View-Container. Damit wirken sie für das Betriebssystem wie eine native App; im Hintergrund handelt es sich jedoch tatsächlich um eine Webanwendung. Mittels moderner Frameworks kommt man auch bei der Gestaltung des User Interfaces den nativen Vorbildern recht nahe. Ein Vorteil von hybriden Apps ist, dass man diese ebenso über die App Stores verteilen kann.

Einige Einschränkungen bei Web-Apps, insbesondere die fehlende Offlinefähigkeit, können durch neuere technologische Ansätze teilweise aufgehoben werden. Ein solcher Ansatz wird derzeit unter dem Stichwort Progressive Web App (PWA) diskutiert. Eine PWA ist gewissermaßen eine Symbiose aus einer Webseite und einer App. PWAs werden mit HTML5 sowie CSS3 für die Gestaltung der Oberfläche und JavaScript für die Umsetzung der Geschäftslogik realisiert. Zusätzlich dienen sogenannte Service Worker dazu, durch ein Caching Offlinefunktionalität zu erreichen. Diese Service Worker sind gewissermaßen zwischen dem Webserver und der App auf dem mobilen Gerät geschaltet. Konkret kann man die Umsetzung mit Hilfe des Frameworks Angular angehen. In diesem Fall kommen die Angular Service Worker zum Einsatz.

Zur Unterstützung hat man gut funktionierende Werkzeuge, d. h. das Tooling in Form von UI Builders ist komfortabel. Erstellen wir nun eine App mittels HTML5 und CSS3 steht man (zunächst) allein auf weiter Flur. Es gibt keinen grafischen Editor, um sich die Oberfläche der App zusammen zu klicken. Grundsätzlich steht dem App-Entwickler die gesamte Bandbreite der Webentwicklung, insbesondere der Einsatz der üblichen Frameworks, zur Verfügung. Für das Erstellen von Apps für die mobilen Geräte hat sich die Verwendung von spezialisierten Frameworks, wie zum Beispiel jQuery Mobile oder Ionic etabliert. Neben einer Vereinfachung der Entwicklung und dem Bereitstellen von immer wiederkehrenden Funktionen, etwa für die Navigation, werden oft auch Widgets für das User Interface angeboten, die eine bessere Annährung der hybriden App an das Look and Feel der jeweiligen Plattform ermöglichen. Möchten Sie in diesen Teilbereich der Webentwicklung weiter einsteigen, dann könnten die folgenden Frameworks für Sie von Interesse sein:

  • Ionic: Es gehört zu den führenden Frameworks und ist Open Source. Die Basis bildet das Framework Angular. Sie können es direkt mit Cordova als Basis für hybride Apps verwenden. Wir gehen gleich intensiver darauf ein.
  • Onsen UI: Dabei handelt es sich ebenfalls um ein Open-Source-Framework. Es nutzt ebenfalls Angular und arbeitet mit Cordova zusammen.
  • Kendo UI: Dies ist ein kommerzielles Framework, das eine Vielzahl von vorgefertigten jQuery Widgets bietet. Die Frameworks Angular, React usw. werden direkt unterstützt.
  • Mobile Angular UI: Dies ist ein spezialisiertes Framework auf der Basis von Angular zum Erstellen von Apps für mobile Geräte.

Diese Auswahl ist nicht annähernd vollständig und stellt auch keine Wertung dar. Thoriq Firdaus hat in einem Artikel eine Reihe von JavaScript-basierten Frameworks zum Erstellen von Apps für Smartphones und Tablets zusammengestellt. Für den Einsteiger in die hybride App-Entwicklung ist das eine nicht zu überschauende Anzahl von Möglichkeiten. Die Wahl wird zur Qual. Noch komplexer wird es, da man viele Frameworks und Bibliotheken miteinander kombinieren kann. Wie soll man nun anfangen? Für welche Bibliothek bzw. welches Framework soll man sich entscheiden? Das ist fast egal. Entscheiden Sie sich für ein Framework und probieren Sie ein Beispiel für den Einstieg. Danach setzen sie darauf aufbauend erste Anforderungen eines Projekts um. Sie werden schnell sehen, ob Ihnen die Arbeitsweise liegt. Fragen, um die Auswahl und den Einstieg zu erleichtern, sind:

  • Steht das Framework auch bei kommerzieller Nutzung kostenfrei zur Verfügung?
  • Kann man es mit reinem JavaScript verwenden oder benötigt man weitere Abhängigkeiten?
  • Wird das Framework durch die Editoren mit Hilfe von Plug-ins unterstützt (Tooling)?
  • Ist die Dokumentation gut und umfassend?
  • Gibt es ein nachvollziehbares Einstiegsbeispiel („Hello World“ – Getting Started)?
  • Gibt es Beispiel-Apps, die mit dem Framework erfolgreich umgesetzt wurden?
  • Wird das Framework fortlaufend weiterentwickelt? Es hilft ein Blick in die Versionshistorie.

Unsere Wahl fiel auf Ionic, da hier alle vorgenannten Fragen zu unserer Zufriedenheit beantwortet sind.

Was ist Ionic?

Ionic ist ein Web-Framework auf Open-Source-Basis zur Entwicklung mobiler Apps. Es kann flexibel verwendet werden, zum Beispiel in hybriden Apps oder Progressive Web Apps. Ionic versteht sich als Frontend-Framework. Es stellt u. a. Komponenten für Layout, Buttons, Statusleisten, Listen usw. bereit. Technologisch entsteht dabei zunächst eine Webanwendung, die man mit Hilfe von Cordova zu einer App für die mobilen Systeme verpacken kann. Dabei entsteht die in Abbildung 1 gezeigte Architektur.

Abb. 1: Ionic ist bei einer hybriden App für das UI zuständig (eigene Darstellung nach Czichon [7])

Abb. 1: Ionic ist bei einer hybriden App für das UI zuständig (eigene Darstellung nach Czichon)

Ionic ist im Kern also ein ausgereiftes JavaScript Framework, das man bei der Entwicklung von Apps einsetzt. Darüber hinaus bietet Ionic einige Tools, die den Entwicklungsvorgang unterstützen. Dazu gehören:

  • Ionic CLI: Dabei handelt es sich um das obligatorische Command Line Interface (CLI) im JavaScript-Umfeld, das ein Generieren, Erstellen und Ausführen der Webapplikationen von der Kommandozeile aus erlaubt. Damit ist man bezüglich der Wahl des Werkzeuges grundsätzlich frei. Das Ionic CLI kann mit dem Paketmanager npm verwendet werden.
  • Ionic Creator: Hierbei handelt es sich um ein grafisches Tool, um Entwürfe des User Interface (Prototypen), mit Hilfe von Ionic-Komponenten zu erstellen. Diese Entwürfe kann man auch für eine weitere Abstimmung bzw. Bearbeitung im Team, zum Beispiel über die Cloud, teilen. Das Tool gibt es kostenfrei zum Ausprobieren mit einigen Kernfeatures. Für erweiterte Funktionen und die Freigabe für den Export des generierten Codes für das endgültige Ionic-Projekt muss man sich für die kostenpflichtige Version des Ionic Creators entscheiden. Die Preise liegen je nach Version und Zahlungsperiode zwischen 7 und 29 USD. In Abbildung 2 sehen Sie den Online-Ionic-Creator. Mittels Drag and Drop entwirft man die Oberfläche. Als Vorschau hat man zum Beispiel die Auswahl zwischen Android und iOS und ebenso zwischen den Geräteklassen Smartphone und Tablet.
  • Ionic Market: Hier können Entwickler Plug-ins, Starter (fertige Apps zur Weiterentwicklung oder direkten Verwendung), Themes, Templates und weitere Elemente für andere Entwickler zur Verfügung stellen. Es dient dem Austausch innerhalb der Community und damit explizit einer Weiterentwicklung des Ionic Frameworks. Die Angebote können kostenfrei oder kostenpflichtig sein. Durch den Einsatz von Plug-ins oder fertigen Apps zur Weiterentwicklung kann man viel Zeit und Aufwand bei der Umsetzung der eigenen App-Idee sparen.
Abb. 2: Ionic bietet einen eigenen Creator für das Erstellen der Oberfläche

Abb. 2: Ionic bietet einen eigenen Creator für das Erstellen der Oberfläche

Kernkonzepte

Ionic basiert auf den folgenden Kernkonzepten: Komponenten für das User Interface (darauf kommen wir gleich umfassend zurück), plattformübergreifende Lauffähigkeit, Navigation, native Zugriffsmöglichkeiten auf Hardware und Designgestaltung über Themes. Sehen wir uns diese Konzepte noch etwas genauer an. Ionic bietet eine Reihe von UI-Komponenten. Diese sind das zentrale Element des Frameworks. Ionic Components werden durch HTML, CSS und JavaScript generiert. Die Komponenten sind zwar grundsätzlich sofort einsatzfähig, dennoch kann man diese flexibel an die individuellen Bedürfnisse anpassen. Das Aussehen lässt sie sich durch die Festlegung von Themes ändern.

Die plattformübergreifende Lauffähigkeit wird dadurch erreicht, dass lediglich Webstandards, also HTML, CSS und JavaScript eingesetzt werden. Ein Kritikpunkt von Web-Apps ist häufig ihre nur unzureichende Anpassung an die Zielplattform, denn Android und iOS unterscheiden sich stark durch verschiedene Designansätze. Verwendet man Ionic für das Erstellen des User Interfaces, dann sorgt das Framework dafür, dass sich die Komponenten an das Zieldesign der Plattform automatisch anpassen. Dadurch kann den Nutzern ein weitgehend vertrautes Erlebnis bei der Verwendung der App geboten werden. Für die Apps, die als Progressive Web Apps (PWA) im Browser ausgeführt werden, setzt Ionic standardmäßig das Material Design Theme ein. Alle Einstellungen sind auch in diesem Punkt konfigurierbar.

JavaScript Days 2019

JavaScript Testing in der Praxis (Teil 1 + 2)

mit Dominik Ehrenberg (Crosscan) und Sebastian Springer (MaibornWolff)

Fortgeschrittene schwarze Magie in TypeScript

mit Peter Kröner (‚Webtechnologie-Erklärbär‘)

Webanwendungen bieten zunächst eine lineare Navigation (vor und zurück), die sich am Navigationsverhalten eines Browsers orientiert. In Apps wird jedoch üblicherweise auch nichtlinear zwischen den Seiten (Pages) gewechselt, zum Beispiel via Tabnavigation. Ionic bietet eine Unterstützung für die sogenannte parallele Navigation. Sollten Sie Angular als Rahmen für die App einsetzen, dann wird empfohlen, den Angular Router für die Navigation zu verwenden.

Über Projekte wie Cordova kann einer Web-App, deren Frontend auf Ionic basiert, der Zugriff auf native Bibliotheken des Betriebssystems ermöglicht werden. Auf diese Weise kann man eine App mit Hilfe von Webtechnologien erstellen und dennoch sicherstellen, dass der Zugriff auf Hardware, wie Kamera, Beschleunigungssensor usw. möglich ist. Auf das Projekt Cordova, um eine Webapplikation für den Einsatz auf mobilen Geräten zu verwenden, gehen wir im kommenden Teil genauer ein.

Über Themes (Theming) sind alle Elemente der Benutzeroberfläche, die auf Ionic basieren, flexibel anpassbar. Die Themes in Ionic basieren auf den Möglichkeiten von CSS: Lokale Anpassungen in einer App ermöglichen es den Entwicklern das Aussehen der App an individuelle Vorgaben, zum Beispiel an das Corporate Design eines Unternehmens, anzupassen.

User Interface Components im Fokus

Die Dokumentation enthält die umfassende Darstellung der einzelnen Komponenten. Es folgen einige Beispiele:

  • Alert (Dialog): Dabei handelt es sich um einen Dialog, der den Nutzern Informationen anzeigt bzw. Eingaben entgegennimmt. Der Dialog erscheint zusätzlich zum Inhalt der App und muss vom Nutzer manuell abgewiesen werden, bevor man die Interaktion mit der App wieder aufnehmen kann. Es kann auch optional einen Header, Subheader und eine Message angegeben werden.
  • Avatar: In einer kreisförmigen Komponente wird ein Bild oder Symbol dargestellt, zum Beispiel ein Symbol für den Nutzer der App.
  • Button: Es gibt vielfältige Varianten, um einen Button in der App darzustellen.
  • DateTime: Das ist das typische Picker-Element für die Auswahl der Zeit und des Datums.
  • ProgressBar: Damit können Fortschrittsbalken abgebildet werden.
  • Grid: Hierbei handelt es sich um einen flexiblen Layout-Container zur Anordnung von untergeordneten Controls.
  • Suchfeld: Ein Suchfeld wird durch ein Textfeld abgebildet, mit dem man eine Auflistung (Collection) durchsuchen kann. Das Suchfeld sollte anstelle eines allgemeinen Eingabefelds verwendet werden, um die Liste zu durchsuchen. Wenn man auf das Suchfeld klickt, wird dieses gelöscht und die Eingabe bleibt fokussiert.
  • Tabs: Dies ermöglicht die einfache Umsetzung einer Tabnavigation auf oberster Ebene.
  • App-Icons: Es existiert eine umfassende Iconsammlung für allen wichtigen Benutzerszenarien in den Designsprachen Material Style für Android und iOS-Style für Apple-Geräte.
  • Slides: Hier handelt es sich um einen Container für die Umsetzung von Schwenk- und Zieh-Interaktionen.
  • Toolbar: Toolbars (Werkzeugleisten) werden verwendet, um am oberen oder unteren Rand feste Inhalte, zum Beispiel zur Navigation, zu platzieren.
  • Cards: Sie dienen der Darstellung von detaillierten Informationen zu einem Begriff oder Thema. Eine Card besteht aus einem Kopfbereich, einem Titel, einen Subtitel und dem eigentlichen Inhalt.

Ionic bietet damit für viele und vor allen für häufig vorkommende Szenarien der Gestaltung moderner Benutzeroberflächen für Apps der mobilen Systeme wichtige Komponenten. Setzt man bei der Gestaltung einer App konsequent auf die angebotenen Komponenten, ergibt sich ein harmonisches und durchgehendes Design, d. h. der Style eines Buttons passt auch zum Style eines Dialogfelds. Einen kleinen Eindruck von der Vielfältigkeit der Komponenten vermittelt Ihnen Abbildung 3. Die umfassende API-Dokumentation gibt direkt darüber Auskunft, wie die Komponenten im Code einzubinden sind. Die relevanten Quellcodeausschnitte werden in Angular, React, Vue und reinem JavaScript gezeigt. Damit ist Ionic im Einsatz weitgehend offen.

Sie haben jetzt Ionic kennengelernt, nun wollen wir ein erstes Experiment wagen. Im kommenden Abschnitt werden wir die Einrichtung von Ionic zeigen und eine erste Web-App mit diesem Framework erstellen.

Fragen des Layouts

Für die gesamte App und für jede einzelne Seite stellt sich die Frage des Layouts, d. h. zur grundsätzlichen Anordnung der einzelnen Komponenten. Ionic bietet eine Auswahl unterschiedlicher Varianten. Im Fokus steht stets die relative Anordnung, um eine responsive Darstellung, d. h. eine automatische Ausrichtung an die physischen Gegebenheiten des Zielsystems, zu erreichen. Folgende Optionen sind üblich:

  • Kopfzeile und Content: Nach der Kopfzeile folgt der Inhaltsbereich.
  • Content und Fußzeile: Man kann alternativ auch mit dem Inhaltsbereich beginnen und am unteren Ende eine Fußzeile einblenden.
  • Kopfzeile, Content, Fußzeile: Der Inhaltsbereich wird oben und unten durch Kopf- und Fußzeile begrenzt.
  • Registerkarten (Tabs): Horizontal angeordnete Tabs strukturieren die Hauptfunktionen der App.
  • Menü: Die App (Seite) erhält ein seitliches Menü, das sich durch Klicken auf einen Button oder durch ein Wischen von der Seite öffnet. Seitliche Menüs dienen ausschließlich der Navigation und enthalten keinen Content.
  • Split-Ansicht: Damit können geteilte Ansichten umgesetzt werden. Die geteilte Ansicht splittet die Seite horizontal in zwei Bereiche auf, wenn die zur Verfügung stehende Breite ausreichend ist. Standardmäßig liegt diese Breite bei 768 px. Diese Angabe kann man jedoch beeinflussen. Ist die Bildschirmbreite geringer, wird die Split-Ansicht deaktiviert.

Für die Layoutelemente, also Header (Kopfzeile), Footer (Fußzeile), Inhalt (Content), Registerkarten (Tabs), Menü und Split-Ansicht stehen die entsprechenden Tags als Erweiterungen im HTML-Code zur Verfügung. Damit wird ein Layout einer einzelnen Seite bzw. der gesamten App-Struktur einfach und nachvollziehbar. Konkrete Beispiele findet man ebenso in der Ionic-Dokumentation unter. Ein Beispiel für das Header-Content-Footer-Layout zeigt Listing 1.

<ion-app>
  <ion-tabs>
    <ion-tab tab="home">
      <h1>Home Content</h1>
    </ion-tab>
    <ion-tab tab="settings">
      <h1>Settings Content</h1>
    </ion-tab>

    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="home">
        <ion-label>Home</ion-label>
        <ion-icon name="home"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="settings">
        <ion-label>Settings</ion-label>
        <ion-icon name="settings"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-app>

Eine App mit Ionic

In wenigen Minuten haben wir die erste Webapplikation mit Hilfe von Ionic erstellt, dafür nutzen wir das Kommandozeilentool (CLI). Voraussetzungen sind die aktuellen Versionen von Node.js und npm. Deren Aktualität lässt sich mit den folgenden Befehlen überprüfen:

node --version
npm --version

Natürlich sollten Sie für einen professionellen Einstieg auch gleich die Versionsverwaltung Git auf der Entwicklermaschine haben. Mit git –version bekommen Sie auch diesbezüglich Auskunft. Sofern Sie den Kurs hier seit Anfang an verfolgen, sind diese Tools bereits an Board, ggf. sind sie auf aktuelle Versionen zu aktualisieren. Auf der Kommandozeile können Sie direkt Ionic installieren, npm install -g ionic lautet der entsprechende Befehl. Der Parameter -g sorgt für eine globale Installation. Unter Windows öffnen Sie die Kommandozeile mit Administratorrechten, sofern Sie nur eingeschränkte Rechte haben. Unter Linux bzw. macOS erteilen Sie sich kurzfristig die notwendigen Rechte mittels des sudo-Kommandos. Im nächsten Schritt geht es schon darum, die App anzulegen. Das geht mit dem Befehl ionic start myApp blank. Damit wird eine App mit einer leeren Seite und ohne Navigation generiert. Wir haben folgende Optionen:

  • tabs: Layout mit Tabnavigation
  • sidemenu: Layout auf der Basis eines Side-Menüs
  • blank: leeres Projekt mit nur einer einzelnen Seite

Das Erstellen der App durch das Ionic-CLI dauert einige Augenblicke. Wechseln Sie in den Ordner und sehen Sie sich die generierte App-Struktur an (Abbildung 4).

Abb. 4: Das CLI von Ionic generiert die komplette Ordnerstruktur, Basis ist ein Angular-Projekt

Abb. 4: Das CLI von Ionic generiert die komplette Ordnerstruktur, Basis ist ein Angular-Projekt

Sie vermuten völlig richtig, dass die App-Struktur nahezu mit der Projektstruktur einer Webanwendung auf der Basis des Angular Frameworks identisch ist (siehe letzter Teil der Artikelserie). Ionic kann zwar auch mit anderen Frameworks eingesetzt werden und mit Version 4 ist durch den Einsatz von so genannten Web Components eine Entkopplung von Angular erfolgt, dennoch basiert das hier generierte App-Projekt auf der Struktur einer Angular-Webapplikation. Als Entwicklungsumgebung können Sie auf den Editor oder die integrierte Entwicklungsumgebung Ihrer Wahl setzen, es bietet sich die Verwendung von Visual Studio Code an. Nachdem mit Hilfe des CLI von Ionic der Applikationsrahmen der App generiert wurde, ist es an der Zeit, sich mit dessen Struktur etwas genauer vertraut zu machen. Der Hauptteil der Anwendung, d. h. der Quellcode zur eigentlichen App, liegt unterhalb des Ordners src/app. Im Ordner src liegt u. a. die Datei index.html, die den Einstiegspunkt bildet. Der Ordner assets für die Ablage der Bilddateien befindet sich ebenfalls dort. Unter von src/app werden die Komponenten zur App gespeichert.

Bereits jetzt können Sie die Ionic-Webanwendung starten, was auch ganz einfach von der Kommandozeile aus durchführbar ist. Dazu müssen Sie in das Verzeichnis Ihres Projekts (zum Beispiel myApp) wechseln (also cd myApp) und dann via ionic serve die App starten. Der Quellcode kompiliert, der Standardbrowser wird gestartet und eine Verbindung zum lokalen Sever von Node.js wird hergestellt. Wenige Augenblicke später erscheint gewissermaßen die Hello-World-Variante der eben erstellten Ionic-Webanwendung. Diese initialen Schritte findet man auch in der Online-Dokumentation von Ionic wieder.

Neue Funktionalität für die App fügt man in den einzelnen Komponenten hinzu. Das können wir gleich ausprobieren, indem wir beispielsweise die HTML-Datei der Komponente anpassen. Testweise fügen wir zwei Eingabefelder des Typs <ion-input/> und einen Button des Typs <ion-button/> hinzu (Listing 2). Nach dem Speichern des Quelltextes und einem Refresh des Browsers wird das Frontend aktualisiert.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-input value="Vorname"></ion-input>
  <ion-input value="Nachname"></ion-input>
  <ion-button>Senden</ion-button>
</ion-content>

Für die Entwicklung in der Praxis hat es sich bewährt, Codeeditor und Browser nebeneinander zu legen. Das hat den Vorteil, dass man die Auswirkungen von Änderungen am Quellcode nach dem Speichern im Browser nachvollziehen kann. Idealerweise nutzt man dabei die Option, dass sich der Browserinhalt bei einer Änderung und Neukompilierung des Quelltextes automatisch aktualisiert.

Running und Deployment

Mit Ionic adressiert man meist Apps für Android und iOS. Oft basieren beide Plattformen sogar auf einer einzigen Quellcodebasis. Mit Hilfe des Frameworks Cordova wird die Webanwendung in einen Sandkasten für das jeweilige System verpackt. Hierzu ist es notwendig, den Entwicklungsrechner entsprechend einzurichten. Für iOS (Simulator oder Device) wird Xcode und macOS, also ein Apple-Gerät, benötigt. Apps für Android kann man unter allen Betriebssystemen (Linux, Windows, macOS) erstellen. In der Dokumentation des Ionic Frameworks finden sich Hinweise zur Einrichtung des Entwicklungssystems für den Build von Android– bzw. iOS-Apps. Ebenso stellt Ionic eine eigene App (DevApp) zur Verfügung, die in den Stores beider Systeme verfügbar ist, und ein schnelles Ausführen und Testen der App ermöglicht.

Fazit und Ausblick

In diesem Teil unseres Kurses mit dem Ziel, die modernen Ansätze der Webprogrammierung kennenzulernen, haben wir einen Ausflug in die Welt der UI Frameworks gemacht. Mit Ionic steht ein etabliertes JavaScript Framework zur Verfügung, um angepasste und moderne Views für Mobile-Apps zu erstellen. Wir haben damit den Rahmen des Browsers gesprengt, d. h. Webapplikationen laufen nicht mehr nur im Browser auf dem PC, sondern sind nun auch auf dem Smartphone und Tablet präsent. Genau in diese Richtung geht auch der letzte Teil unserer Artikelserie: Wir zeigen, wie HTML5, CSS3 und JavaScript die Basis für moderne Applikationen auf allen Geräten darstellen. Verpackt man eine solche Webapplikation mit dem richtigen Werkzeug, kann daraus sogar eine native Desktopanwendung entstehen, die von Anfang an plattformübergreifend eingesetzt werden kann.

Entwickler Magazin

Entwickler Magazin abonnierenDieser Artikel ist im Entwickler Magazin erschienen.

Natürlich können Sie das Entwickler Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -