Native Android App mit PhoneGap (unter Mac)

Native Android App mit PhoneGap (unter Mac)

Wer eine App benötigt und keine der für die gängigen Mobilgeräte Programmiersprachen kann, wird das Näschen wohl zunächst mal eine Weile in Bücher versenken müssen.
Wer aber seine App-Idee auch mit HTML 5, CSS und JavaScript umsetzen möchte, kann sich die Lernerei sparen. PhoneGap kann nämlich aus einer Webseite eine native App machen. Für Android, iOS, Windows 8 und noch mehr…

Was ist PhoneGap?

Der Markt der Mobilgeräte ist eigentlich nur unter drei Playern aufgeteilt: Google mit Android, Apple mit iOS und Microsoft mit Windows Phone 8. Entwickler, die Ihre App für alle drei Systeme veröffentlichen möchten, müssen quasi auch drei verschiedene Apps programmieren.

Installation von PhoneGap

In der Vorbereitung werden folgende Apps, Hilfsprogramme usw. benötigt, um eine native Android App mit PhoneGap zu erstellen.

  1. Man benötigt Node.js (https://nodejs.org). Dies ist eine Art Server, der Netzwerkanwendungen ermöglicht. Die Installationsdateien kommen als PKG Datei.
  2. Da native Android Apps mit der Sprache Java programmiert werden, ist die Installation des Java SDK notwendig. Java ist eine Programmiersprache mit der auch Android Apps programmiert werden. PhoneGap benötigt das SDK zum Kompilieren der Web-Apps in native Anwendungen. Einfach das richtige Paket aussuchen, runterladen und installieren.
  3. Nun wird Android Studio installiert. Dabei wird ebenfalls der SDK-Manager mitinstalliert. Hiermit kann nun die Android SDK installiert werden.
  4. Apache ANT installieren. Die Zip-Datei herunterladen, extrahieren, in das Verzeichnis /usr/local/ verschieben und in ant umbenennen.
    Anschließend chown (account name):(account name) ant
  5. Nun werden Umgebungsvariablen angelegt. Dazu folgenden Befehl in das Terminal eingeben:
    nano /Users/<Benutzer>/.bash_profile
  6. und folgendes einfügen:
    export ANDROID_HOME=/Users/<Benutzer>/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/platform-tools
    export PATH=$PATH:$ANDROID_HOME/tools
    export ANT_HOME=/usr/local/ant
    export PATH=$PATH:$ANT_HOME/bin

PhoneGap installiert man nun im Terminal mit dem Befehl

sudo npm install -g phonegap

PhoneGap Projekt anlegen

Android Entwicklermodus aktivieren

Bevor das erste Projekt angelegt wird, sollte das eigene Android-Phone per USB an den Rechner angeschlossen und der Entwicklermodus bzw. USB-Debugging aktiviert werden. Damit kann die fertige App direkt auf dem Smartphone getestet werden und nicht über einen Emulator am Bildschirm.
Bis Android 4.1 konnte der Entwicklermodus ganz einfach über die Einstellungen aktiviert werden. Ab Android 4.2 hat Google die Option versteckt. In Einstellungen -> Über das Telefon findet sich als letzter Eintrag die Build-Nummer. Auf diese muss nun sieben mal “getatscht” werden. Eine entsprechende Meldung zeigt an, dass der Entwicklermodus aktiviert wurde.
Zurück in den Einstellungen sind nun die Entwickleroptionen verfügbar, dort kann das USB-Debugging aktiviert werden.

 

Erstes Projekt in PhoneGap anlegen

Um mit dem ersten Projekt zu beginnen, muss PhoneGap zunächst die Bedingungen dafür schaffen werden, sprich: Die Struktur der App einrichten.
Dazu begibt man sich mit dem Terminal in das PhoneGap-Verzeichnis. Mit dem nachfolgenden Befehl wird ein neues Projekt erstellt:

phonegap create Appname –id "org.myapp-sample" –name "appSample"

Ein Ordner mit dem Appnamen wird erstellt.

 

PhoneGap hat in diesem Unterordner nun das nötige Gerüst für eine App erstellt. Zunächst ist für uns der Unterordner \www am interressantesten.
Wie wenig verwunderlich sein dürfte, müssen in diesem Ordner alle Dateien abgelegt werden, die zu unserer Web-App gehören. Sind im Projekt die CSS und JavaScript-Dateien in entsprechenden Ordnern abgelegt, so müssen auch diese in den \www Ordner kopiert werden.

Befinden sich die Projektdateien im Ordner \www, kann die App eigentlich schon erstellt werden. Dazu einfach wieder in die Eingabeaufforderung wechseln und folgenden Befehl eingeben:

cd Appname
phonegap run android

Mit diesem Befehl startet PhoneGap mit der Erstellung der nativen App. Ist das Handy im Entwickler- und Debugging-Modus am Rechner angeschlossen, wird die App automatisch auf dem Smartphone installiert und gestartet. Befindet sich kein Handy am Rechner, versucht PhoneGap automatisch den Emulator zu starten.

Eines von Beiden sollte auf jeden Fall gelingen und somit die WebApp ohne Browser am Smartphone nutzbar sein.

 

Hässliche Icons von PhoneGap

Native Android App mit PhoneGap (unter Mac)Die App ist also auf dem Handy installiert, doch was ist das für ein hässliches Icon? PhoneGap versieht die App standardmäßig mit dem eigenen Symbol. Klar, hier muss noch ein eigenes Symbol eingefügt werden.
Nun könnte man, aufgrund der Ordnerstruktur, auf die Idee kommen, die Icons liegen im Ordner

\www\res\icons

Doch weit gefehlt: Die Icons die wirklich für die App verwendet werden sind im Ordner

\platforms\android\res

In diesem Ordner befinden sich weitere Ordner. Durch die vielen möglich Auflösungen von Android Smartphones, werden  vom Icon verschiedene Versionen benötigt. Klaro, denn ein 42 x 42 Pixel großes Icon wirkt auf einem Full-HD-Display ziemlich futzelig.

Aber welche Icongröße muss denn jetzt in welchen Ordner? Hierfür gibt es ein kleines Tool namens makeappicon.com. Der Name ist auch gleichzeitig Programm. Eine empfehlenswerte Größe zur Erstellung des Icons sind 512 x 512 Pixel. Diese Größe ist ausreichend um diese vernünftig herunterskalieren zu können. Wer ganz sicher gehen will, nimmt 1024 x 1024 Pixel.
Ist das Icon erstellt, muss die Datei nur noch in die Ablegefläche bei makeappicon.com gezogen werden. Der Dienst erstellt dann aus der Datei die passenden Icons für jede Auflösung.
Anhand der Benennung ist auch ersichtlich, welches Icon in welchen Ordner kopiert werden muss.

Bei der nächsten Installation auf dem Handy sollte nun auch das Icon sichtbar sein.

 

Android App bereitstellen

Ist die mit PhoneGap erstellte App auf dem eigenen Smartphone oder im Emulator funktionstüchtig, soll diese natürlich auch im Google Play Store verfügbar gemacht werden. Dazu sind weitere Schritte nötig.

Um die Software PhoneGap zu updaten müssen wir in das Verzeichnis von PhoneGap wechseln.

cd phonegap

Um die Updateprozedur zu starten, genügt der Befehl:

sudo npm update –g phonegap

Jetzt lädt das Update automatisch herunter und wird installiert.

 

Android Entwicklerkonto anlegen

Um Apps im Google Play Store veröffentlichen zu können, benötigt man natürlich einen Entwickler-Account. Dieser kann hier angelegt werden, das funktioniert natürlich auch mit dem eigenen Google-Konto.
Der Account ist allerdings kostenpflichtig. Anders wie bei Apple, bei denen die Entwicklerlizenz halsabschneiderische 99 US-Dollar im Jahr kostet, verlangt Google nur einen einmaligen Obulus von 25 US-Dollar. Seine Kreditkarte sollte man also bereit halten, wenn diese nicht schon bei Google Play als Zahlungsmittel eingetragen ist.

Nach dem üblichen Registrierungsprozedere steht dem frischgebackenen Android-Entwickler die Developer Console zur Verfügung. Das Anlegen der eigenen App in der Developer Console ist recht einfach. Bezüglich des ASO (App-Store-Optimierung) sei gesagt: Die App sollte umfassend beschrieben und nicht an informativen Screenshots gespart werden. Dazu kann aber an anderer Stelle noch mal etwas geschrieben werden. Informativ ist auch dieser Podcast bei Radio4SEO.

 

Android App signieren

Um eine Android-App im Play Store zu veröffentlichen, benötigt diese eine Signatur. Um diese zu erstellen, wechselt man in den Ordner <phonegap-project>/platforms/android und gibt in die Eingabeaufforderung ein:

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Das Programm keytool fragt nun einige Werte ab. Dazu gehört ein mindestens 6 Zeichen langes Kennwort, Name, Organisation usw. Wer den Vorgang, wegen Tippfehlern oder so, abbrechen möchte, drückt einfach STRG+C. Dann beendet sich keytool, man landet wieder am DOS-Prompt und kann erneut loslegen.

Sind alle Daten korrekt eingegeben, muss die Schlussfrage durch die Eingabe von Ja beantwortet werden und im aktuellen Ordner liegt nun die Datei testapp.keystore.
Diese Datei sollte gut aufgehoben werden. Denn nur mit Ihr kann die App später im Play Store aktualisiert werden. Wird eine neue angelegt, wird auch die App im Play Store als neue App behandelt. Also auf jeden Fall das Kennwort gut merken.

Native Android App mit PhoneGap (unter Mac)

 

Nun kann die App für den Play Store bereitgemacht werden. Einfach im gleichen Ordner bleiben (phonegap/platforms/android) und eingeben:

phonegap build android

Sollte dieser Befehl nicht funktionieren, so erscheint dies:

Native Android App mit PhoneGap (unter Mac)

 

Dann probiert man diesen Befehl:

cordova build android --release

Native Android App mit PhoneGap (unter Mac)Mit diesem Befehl legt Android los und beginnt die App als APK-Datei zu erstellen. Ist der Vorgang durchgelaufen, liegen nun im Unterordner /build/outputs/apk allerhand Dateien.

Damit die App auf den Release vorbereitet wird, gibt man einen weiteren Befehl ein.

ant release

Der Vorgang fragt nach dem Passwort aus der eben erstellten Keystore-Datei und nach dem Alias Namen der App.

 

Ant funktioniert nicht

Kann der Befehl ant nicht gefunden werden oder Fehler mit Java entstehen bzw. ausgegeben werden, so müssen folgende Schritte durchgeführt werden.

 

Native Android App mit PhoneGap (unter Mac)

Man installiert Homebrew mit diesem Befehl:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Anschließend wird Apache Ant via Homebrew installiert.

brew install ant

Sollte nun ein Fehler aufkommen mit der build.xml, so den Befehl ausführen:

android update project -p "project full path"

 

Android App signieren (Fortsetzung)

Als nächstes kopiert man die Datei appname.keystore in das Verzeichnis der APK.

cp testapp.keystore build/outputs/apk

Nun wechselt man in das Verzeichnis der APK /build/outputs/apk.

Um nun endlich die Signierung zu starten, einfach folgenden Befehl in die Eingabeaufforderung klimpern:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore testapp.keystore TestApp-release-unsigned.apk app_name

testapp.keystore, TestApp-release-unsigned und app_name müssen natürlich mit den eigenen, korrekten (Datei-)Namen ersetzt werden.
Auch der Signierungsvorgang fragt wieder nach dem vorhin vergebenen Passwort.

Fertig? Nope, immer noch nicht. Aber fast. Denn jetzt ist zwar die TestApp_release_unsigned.apk signiert, benötigt aber noch einen letzten Schritt folgendem Befehl:

zipalign -v 4 TestApp-release-unsigned.apk TestApp.apk

Dieser nimmt die letzten Formatierungen an der Datei vor. TestApp.apk muss durch den vergebenen Alias-Namen ersetzt werden.

 

Zipalign funktioniert nicht

Sollte das Kommando zipalign nicht funktionieren, so muss folgendes getan werden.

Man kopiert /Users/<Benutzer>/Library/Android/sdk/build-tools/<android-version>/zipalign nach $ANDROID_HOME/tools/zipalign.

cd /Users/<Benutzer>/Library/Android/sdk/build-tools/<android-version>/
cp zipalign $ANDROID_HOME/tools/

Anschließend sollte der Befehl von oben mit zipalign funktionieren.

Fertig!

Jetzt kann die App in den Google Play Store geladen werden.

Schreibe einen Kommentar

Menü schließen

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen