Angular zu Android APK in 10 Schritten

19. Februar 2019, von Christof
Angular to Android

Wir lieben Angular. Angular ist ein Frontend-Framework für die Entwicklung komplexer Webapplikationen. Und in diesem Artikel lernt ihr, wie ihr aus eurer bereits fertig umgesetzten Angular Webapplikation, die nur im Webbrowser läuft, einfach und schnell eine mobile App entwickelt, die ihr auf euren Smartphones installieren könnt oder im App Store zum Download zur Verfügung stellen könnt. Um diesen Artikel richtig verstehen zu können, ist ein Basiswissen aus dem Bereich der Webentwicklung sehr empfehlenswert.

Einzige Voraussetzung für das Tutorial ist ein laufendes Angular Projekt mindestens mit Version 6. * **

* Keine Sorge: Das ganze ist auch möglich mit Angular Projekten ab Version 2. Dazu sind aber ein paar Anpassungen notwendig, die in diesem Artikel nicht weiter beschrieben werden. Aber für Auskünfte stehen wir gerne zur Verfügung.

** Falls ihr gerade kein laufendes Angular Projekt zur Verfügung habt, auch kein Problem. Einfach die aktuellste Angular CLI installieren und mit „ng new hello-app-world“ eine Test-Applikation erstellen.

Dieses Tutorial ist eine Schritt-für-Schritt Anleitung, wie ihr eure Angular Projekte, die bisher nur im Browser liefen, nun auch wirklich als App für Android deployen könnt. Bitte behaltet im Hinterkopf, dass solche Dinge wie Schritt-für-Schritt Anleitungen in der Webentwicklung immer etwas sehr relatives sind. Es gibt an mehreren Stellen viel zu viele Unterschiede (zb. neue/alte Versionen, verschiedene Projektsetups oder Projektstrukturen, unterschiedliche Betriebssysteme, etc.) um eine einheitliche One-Fits-All-Anleitung schreiben zu können. Also zeigt Selbstcourage und arbeitet auch zwischen den Schritten mit. Nevertheless, let’s get started!

 

  1. Installiert Android Studio
  2. Installiert Cordova

    npm install -g cordova

     

  3. Erstellt ein neues Cordova Projekt

    cordova create hello-app-world-cordova com.example.hello OurFirstApp

     

  4. Im neu erstellten Cordova Projekt die Ziel-Plattform eurer mobilen App hinzufügen. In diesem Tutorial wollen wir eine Android APK entwickeln.

    cordova platform add android

     

  5. Jetzt wird das neue erstellte Cordova Projekt mit dem Angular Projekt fusioniert. Dazu alle Files im Verzeichnis des Cordova Projektes in das Angular Projekt kopieren. Achtung: package.json, package-lock.json und den node_modules Ordner nicht kopieren!
    Die Ordnerstruktur eures Angular Projektes sollte nun in etwa so aussehen:
    Angular Projekt Ordnerstruktur
  6. Nun das package.json des Cordova Projektes in das package.json des Angular Projektes mergen. Überschreibt den name des Angular package.json mit dem name des Cordova package.json. Das script Objekt des Cordova package.json müsst ihr nicht in das Angular package.json kopieren.
    Das gemergte package.json sollte nun in etwa so aufgebaut sein:
    packagejson Aufbau
  7. Öffnet die index.html des Angular Projektes und ändert den base href von <base href=”/”> auf:

    <base href=”./”>

     

  8. Nun müssen wir den Ziel-Pfad unseres gebauten Angular Projektes ändern. Geht dazu in das angular.json und ändert den outputPath auf “www
  9. Genug vom Setup. Nun müssen wir das Projekt builden. Beide Befehle im Verzeichnis des Angular Projektes ausführen:

    ng build --prod --aot
    cordova build android

     

  10. Jetzt ist eure APK zum Testen fertig erstellt. Zum Testen brauchen wir allerdings ein laufendes virtuelles Android Device. Öffnet dazu Android Studio. Öffnet nun den Android Virtual Device Manager. Erstellt euch ein neues virtuelles Device (Hardware und Android Version nach eurem Belieben) und startet das Gerät. Sobald das virtuelle Gerät gebootet hat, könnt ihr im Angular Verzeichnis die Test-APK starten

    cordova emulate android

     

That’s it. Nun sollte euer Angular Projekt am virtuellen Gerät als App starten.

Entwicklungsumgebung mit virtuellem Android Gerät
So einfach gehts. Mit diesen wenigen Schritten könnt ihr euer Angular Projekt als Hybrid App in eine Android App für Smartphones umwandeln. Das ganze geht auch ganz einfach mit anderen Plattform wie zum Beispiel Apple IOS. Bei Fragen stehen wir auch gerne wieder zur Verfügung.

App unterzeichnen

Ein kleiner Schritt steht noch aus: Unsere Test-APK funktioniert zurzeit nur auf virtuellen Android Geräten. Damit wir die APK auch auf echten Hardware Android Geräte installieren können bzw. im Play Store verfügbar machen können, müssen wir die App releasen und unterzeichnen lassen. Eine nicht-unterzeichnete APK lässt sich unter Android nicht installieren. Aber wir können unsere APK ganz einfach selbst unterzeichnen.

Folgenden Befehl ausführen:

cordova build --release android

 
Dieser Befehl erstellt die für den Release fertige APK unter platforms/android/app/build/outputs/apk/release. Aber diese APK ist noch nicht unterzeichnet. Dafür müssen wir einen Keystore generieren:

keytool -genkey -v -keystore helloappworld.keystore -alias helloappworldmobileapps -keyalg RSA -keysize 2048 -validity 10000

 
Alle für den Keystore gefragten Informationen gewissenhaft ausfüllen. Nun muss der eben generierte Keystore auf unsere APK angewendet werden:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore helloappworld.keystore app-release-unsigned.apk helloappworldmobileapps

 
Nun müssen wir noch die wirkliche unterzeichnete APK extrahieren:

zipalign -v 4 app-release-unsigned.apk app-release-signed.apk

Falls ihr den zipalign Befehl nicht ausführen könnt, habt ihr vermutlich die $ANDROID_HOME Variable falsch konfiguriert. Mit find ~/Library/Android/sdk/build-tools -name „zipalign” könnt ihr ganz einfach den Pfad von zipalign finden, und diesen kopieren und beim vorherigen Befehl einsetzen.
That’s it. Nun habt ihr eure release-fertige und unterzeichnete APK, die ihr auf eurem Android Smartphone installieren könnt.

Jetzt könnt ihr natürlich eure Android App weiterentwickeln und optimieren. Schaut euch dafür die Cordova Docs durch. Ihr könnt noch viele coole Plugins aktivieren und Features wie Push-Notifications, Vibrations-Feedback und Splashscreens nutzen oder auch einfache Dinge wie Farbe der Status-Bar einstellen.

Ihr könnt euch auch den Source Code zu einem Demo Projekt hier ansehen. In der Read-Me ist der Setup-Prozess sowie der Build-Prozess sehr detailliert beschrieben.
Gerne könnt ihr eine technisch-tiefergreifende Version hier lesen.

Ich hoffe, ich konnte euch eine gute Anleitung geben. Falls ihr Optimierungsvorschläge oder andere Einwände habt, freue ich mich sehr über euer Feedback. Und bei Problemen oder offenen Fragen, scheut euch nicht nachzufragen.

Christof

Meine Rolle bei Liechtenecker: Quoten-Kärntner Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Vermesser Mein Herz schlägt für: Kaffee, Fußball, Dart, Google, Family & Friends und Essen
Keine Kommentare vorhanden.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Natalia und Marion reden über Usertests
UX/UI Design – Blogbeitrag

9 Fragen zum User Test – was Sie als Auftraggeber wissen sollten

18. September 2019, von Natalia

Euch steht ein User Test bevor? Die Agentur schreibt irgendwas von einem Usability Testing ins Angebot? Und ihr fragt euch jetzt, was das alles bedeutet? Dann lest hier die häufigsten Fragen und Antworten zum Thema User Testing.

Jetzt lesen
Alexandra Wittmann und Susanne Liechtenecker
Arbeitskultur – Podcasts

Folge #53 mit Alexandra Wittmann

8. November 2019

In Folge 53 der Leseliste freuen wir uns auf Alexandra Wittmann, Division CFO bei Hoerbiger. Sie hat schon einige Wandel-Projekte begleitet und blickt mit Susanne auf spannende Aspekte von Unternehmensführung, Erfolg, Digitalisierung und was das für die einzelnen Menschen bedeuten kann.

Jetzt anhören
Close