© DrHitch/Shutterstock.com
Shortcuts
Cross-Plattform

3 Touch it: Native Application Packaging mit Apache Cordova

Apps sind mittlerweile überall zu finden, vor allem natürlich auf mobilen Geräten. Mit dem richtigen Tooling lassen sich auch HTML5-Anwendungen als native Mobile-Applikationen installieren. Das Beste daran ist, dass bestehende Webanwendungen genutzt und um sinnvolle plattformspezifische APIs erweitert werden. Damit stehen sie echten nativen Anwendungen in nichts mehr nach.

Shortcut Autorenteam


Im ersten Kapitel dieses shortcuts haben wir uns mit den Grundlagen von Angular vertraut gemacht, erste APIs angesprochen und deren Ergebnis auf unserem User Interface dargestellt. Im zweiten Kapitel haben wir uns angeschaut, welche Module Bundler existieren, welche Vor- und Nachteile sie bieten und wie man mit einfachen Mitteln das Angular-CLI-Build-System nutzen kann. Dabei haben wir uns Begriffe wie Ahead-of-Time Compilation oder Tree Shaking näher angesehen und untersucht, welche Auswirkungen sie auf unsere Anwendung haben. Wie die ersten beiden Kapitel wird auch dieses durch eine Beispielanwendung begleitet, die auf GitHub [1] zu finden ist. In diesem Kapitel wollen wir uns näher mit nativen (mobilen) Applikationen beschäftigen. Dazu schauen wir uns an, welches Tooling wir benötigen und welche Einstellungen vorgenommen werden müssen. Außerdem treffen wir die Entscheidung, wo innerhalb unserer Anwendung wir plattformabhängigen Code integrieren.Mit Apache Cordova in die native Welt abtauchenBisher läuft unsere Anwendung im Browser sowohl auf einem Desktop- als auch auf einem mobilen Browser. Für kleine Apps ohne speziellere Anforderungen ist das meistens ausreichend. Wenn unsere App allerdings beispielsweise offline verfügbar sein, größere Datenmengen speichern oder gerätespezifische APIs verwenden soll, benötigen wir eine echte native Applikation. Zusätzlich kann diese dann auch über die jeweiligen App Stores, also Apple App Store, Google Play Store oder auch den Microsoft Store, verteilt werden.Um all die genannten Dinge unter einen Hut zu bekommen, benötigen wir Apache Cordova [2]. Cordova stellt einen nativen Container zur Verfügung, in dem ein Webbrowser angezeigt wird. In diesen Browser wird unsere Webanwendung geladen. Zusätzlich stellt uns Cordova verschiedene Plug-ins mit einem JavaScript-basierten API zur Verfügung, um auf native Gerätefunktionen, z. B. Kamera, Kontakte, Lagesensor usw. zugreifen zu können.Der native Container ist dank Cordova für verschiedene Betriebssysteme erhältlich: Android, iOS, Windows 8 und 10 UWP, Windows Phone 8, 8.1 und 10 oder BlackBerry 10. Auf iOS-basierten Geräten steht uns als Browser entweder die etwas ältere Version UIWebView oder die neue Version WKWebView zur Verfügung. Auf Android-basierten Geräten wird der vom Smartphonehersteller mitgelieferte Browser genutzt. Gerade bei Android kann der Smartphonehersteller sehr stark bestimmen, welche Browserversion mit welchen Features ausgeliefert werden soll. Alt...

Shortcuts
Cross-Plattform

3 Touch it: Native Application Packaging mit Apache Cordova

Apps sind mittlerweile überall zu finden, vor allem natürlich auf mobilen Geräten. Mit dem richtigen Tooling lassen sich auch HTML5-Anwendungen als native Mobile-Applikationen installieren. Das Beste daran ist, dass bestehende Webanwendungen genutzt und um sinnvolle plattformspezifische APIs erweitert werden. Damit stehen sie echten nativen Anwendungen in nichts mehr nach.

Shortcut Autorenteam


Im ersten Kapitel dieses shortcuts haben wir uns mit den Grundlagen von Angular vertraut gemacht, erste APIs angesprochen und deren Ergebnis auf unserem User Interface dargestellt. Im zweiten Kapitel haben wir uns angeschaut, welche Module Bundler existieren, welche Vor- und Nachteile sie bieten und wie man mit einfachen Mitteln das Angular-CLI-Build-System nutzen kann. Dabei haben wir uns Begriffe wie Ahead-of-Time Compilation oder Tree Shaking näher angesehen und untersucht, welche Auswirkungen sie auf unsere Anwendung haben. Wie die ersten beiden Kapitel wird auch dieses durch eine Beispielanwendung begleitet, die auf GitHub [1] zu finden ist. In diesem Kapitel wollen wir uns näher mit nativen (mobilen) Applikationen beschäftigen. Dazu schauen wir uns an, welches Tooling wir benötigen und welche Einstellungen vorgenommen werden müssen. Außerdem treffen wir die Entscheidung, wo innerhalb unserer Anwendung wir plattformabhängigen Code integrieren.Mit Apache Cordova in die native Welt abtauchenBisher läuft unsere Anwendung im Browser sowohl auf einem Desktop- als auch auf einem mobilen Browser. Für kleine Apps ohne speziellere Anforderungen ist das meistens ausreichend. Wenn unsere App allerdings beispielsweise offline verfügbar sein, größere Datenmengen speichern oder gerätespezifische APIs verwenden soll, benötigen wir eine echte native Applikation. Zusätzlich kann diese dann auch über die jeweiligen App Stores, also Apple App Store, Google Play Store oder auch den Microsoft Store, verteilt werden.Um all die genannten Dinge unter einen Hut zu bekommen, benötigen wir Apache Cordova [2]. Cordova stellt einen nativen Container zur Verfügung, in dem ein Webbrowser angezeigt wird. In diesen Browser wird unsere Webanwendung geladen. Zusätzlich stellt uns Cordova verschiedene Plug-ins mit einem JavaScript-basierten API zur Verfügung, um auf native Gerätefunktionen, z. B. Kamera, Kontakte, Lagesensor usw. zugreifen zu können.Der native Container ist dank Cordova für verschiedene Betriebssysteme erhältlich: Android, iOS, Windows 8 und 10 UWP, Windows Phone 8, 8.1 und 10 oder BlackBerry 10. Auf iOS-basierten Geräten steht uns als Browser entweder die etwas ältere Version UIWebView oder die neue Version WKWebView zur Verfügung. Auf Android-basierten Geräten wird der vom Smartphonehersteller mitgelieferte Browser genutzt. Gerade bei Android kann der Smartphonehersteller sehr stark bestimmen, welche Browserversion mit welchen Features ausgeliefert werden soll. Alt...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang