Der Plan
Ich möchte mal wieder ein neues Projekt umsetzen. Da dachte ich mir, ich nutze die Gelegenheit und fange noch einmal ganz frisch an. So schreibe ich wirklich jeden Schritt mit und du solltest am Ende definitiv auf dem gleichen Stand sein wie ich. Alles natürlich mit Screenshots unterlegt.
Es wird eine App; zunächst kümmere ich mich um Android, ggf. folgt später noch die Auslieferung auf iOS Smartphones und vielleicht sogar Windows Phones. Eine Ausweitung auf Tablets als Endgeräte wäre auch denkbar. Dank der hybriden Entwicklung der App dürfte vor allem die Auslieferung auf iOS keine großen Extra-Aufwände in der Entwicklung bedeuten.
Die ersten Überlegungen: Welches Framework?
Für die Entwicklung von hybriden Apps mit Webtechnologie greift man am Besten auf eines der vielen Frameworks zurück. Initial stellte sich mir also die Frage ob ich PhoneGap, Cordova, Intel XDK, Titanium oder eine der vielen anderen Möglichkeiten nehmen soll. Ich habe mich sehr schnell auf PhoneGap oder Cordova eingeschränkt, weil ich diese als (Industrie-)Standard erachte. Die Entscheidung zwischen diesen beiden Kandidaten war zunächst darauf beschränkt, die Unterschiede heraus zu finden.
Cordova ist zu PhoneGap was WebKit (mittlerweile Blink) zu Chrome ist. Cordova ist die Basis von PhoneGap. Im Gegensatz zu WebKit ist Cordova aber auch sehr gut und praktikabel als Einzelprodukt einsetzbar. Adobe bietet bei PhoneGap einfach noch ein paar Zusatzfunktionen, welche in der Regel nicht kostenfrei sein werden. So zum Beispiel PhoneGap Build.
So fällt meine Entscheidung auf Cordova. Zur Zeit bietet mir PhoneGap keine Zusatzfunktion, die ich benötigen würde und so schätze ich die Unabhängigkeit von Adobe. (Auch wenn Adobe einen sehr guten Job im Bereich Web macht.)
Die Voraussetzung für eine gute hybride App: WebView
Während meiner Suche nach einem passenden Framework für die Erstellung von hybriden Mobile-Apps mit Webtechnologien bin ich auf Crosswalk gestoßen.
Ein Problem welches mich gleichzeitig nervt und freut ist die Vielfältigkeit in der Webentwicklung. Klar, der Internet Explorer hat entscheidend zur Entwicklung des Webs beigetragen, heute nervt er nur noch. Aber auch die Unterschiede zwischen Firefox und Chrome können stören, aber beide Browser tragen erheblich zur Weiterentwicklung der Webtechnologie bei.
Das gleiche Problem herrscht auch auf mobilen Endgeräten. Wenn man die Apps mit Webtechnologie entwickeln möchte, stößt man auf viele verschiedene Engines. Vor allem in der Entwicklung für Android trifft man auf das Problem unterschiedlicher Versionen der WebView. Die WebView ist quasi ein Browser ohne Adresszeile und Tabs, einfach nur der Renderscreen (inkl. dahinter stehender Engines). In dieser WebView wird die WebApp aufgerufen, wobei die WebView wiederum (idR. der einzige) Bestandteil einer mobilen App ist und beim Start der Anwendung aufgerufen wird. So installiert sich und startet sich eine hybride App wie eine native App.
Aber auf Android Geräten weiss man nie, welche WebView gerade im Einsatz ist. Es gibt sehr viele verschiedene Android Versionen mit ihrer jeweils spezifischen WebView im Einsatz. Unter iOS gibt es da wesentlich weniger Vielfältigkeit. In Android war die WebView bis vor kurzem nicht einmal auf dem gleichen Stand wie der Chrome Browser auf dem Gerät selbst. Mit Android 5 lässt sich die WebView sogar unabhängig vom Betriebssystem selbst updaten.
Abhilfe kann hier Crosswalk schaffen. Es ermöglicht die Einbindung einer alternativen WebView auf Chrome Basis. So kann ich in meiner hybriden App immer von der gleichen WebView ausgehen und habe nicht je Gerät eine andere WebView. Das ermöglicht natürlich die Auslieferung einer wesentlich besser getesteten Anwendung und sollte somit für eine sehr robuste Erfahrung beim Endanwender sorgen. Crosswalk setzt allerdings mindestens Android 4.0 voraus – damit kann ich leben.
IDE, Texteditor oder was?
Für die Entwicklung der App mit Webtechnologie würde auch ein einfacher Texteditor wie Sublime Text, Notepad++ oder dergleichen reichen. Neuste Texteditoren wie Brackets und Atom sind sogar speziell auf die Webentwicklung ausgelegt. Aufgrund meiner Vergangenheit mit Java bin ich es gewohnt in einer IDE zu arbeiten. Außerdem bin ich Fan der IntelliJ IDEA von JetBrains. Von JetBrains gibt es auch das sehr gute Produkt WebStorm, diese IDE ist für die Webentwicklung (auf Basis IntelliJ IDEA CE) und enthält (vorinstalliert) auch das PhoneGap/Cordova Plugin, bietet aber keine Android / Java Entwicklungs-Unterstützung. Beide IDEs sind Bezahlprodukte und natürlich ist WebStorm günstiger. WebStorm ist in IntelliJ enthalten, sodass du mit IntelliJ alle Features von WebStorm hast, aber mit WebStorm nicht alle Features von IntelliJ. Nur IntelliJ bietet dir Android Support, welchen du später mit Crosswalk gebrauchen kannst oder wenn du doch einmal kleine native Teile bauen musst / möchtest. Die offizielle Android Entwicklungsumgebung basiert auf IntelliJ IDEA, aber auf der Community Edition (CE) und bietet keine Unterstützung für JavaScript, CSS und Co. Das PhoneGap/Cordova Plugin ist in allen Varianten verfügbar.
Meine Wahl fällt auf IntelliJ IDEA, hier habe ich
- alle Features zur WebEntwicklung (JavaScript Support (Autocompletion, Syntax-Highlighting, …), CSS Support, etc.) wie in WebStorm
- alle Features zur Entwicklung von Android Apps wie im Android Studio
- PhoneGap/Cordova Support
- plus all das, was eine IDE bieten sollte.
Bitte lade dir zumindest die 30 Tage Trial von IntelliJ und entscheide dann, welche Entwicklungsumgebung dir gefällt.
Mac, Linux oder Windows?
Ich besitze einen Mac, vor allem auch für die Entwicklung von iOS Apps ist dieser Grundvoraussetzung; iOS Apps können nur auf einem Mac erstellt werden. Außer man möchte / kann seine App fremdkompilieren lassen, z.B. über PhoneGap Build. Aber auch davon abgesehen bin ich mit einem Mac produktiver als mit einer Windows Maschine. Linux könnte ich mir noch als Alternative vorstellen, aber niemals wieder einen Windows PC. Mit diesen muss ich mich in der Firma abkämpfen und bin jedes Mal wieder froh auf dem Mac zurückgreifen zu können.
Viele Tools, die in der Entwicklung nützlich sind, sind schneller für den Mac verfügbar und sind dort idR. auch unkomplizierter in der Installation.
Die Installation
Android SDK
Java
Für die Entwicklung von Android Apps (ob nativ oder hybrid) benötigst du die Android SDK und das Java SE Development Kit (JDK). Lade dir zunächst mindestens das JDK 7 oder am besten das JDK 8 von: http://www.oracle.com/technetwork/java/javase/downloads/index.html
javac 1.8.0_25
Das JDK in Version 7 ist die Voraussetzung für die Entwicklung von Apps für Android 5.0. Du kannst überprüfen, ob und welche Version installiert ist, indem du im Terminal
java -version
eingibst. Ebenfalls dient dieser Befehl nach der Installation zur Überprüfung des Erfolgs. Als ich diesen Artikel geschrieben habe, war es die JDK Version 8 Update 25 (1.8.0_25).
Apache Ant
Außerdem benötigst du Apache Ant. Apache Ant könnte man wohl einem reinen Webentwickler am Besten mit Grunt oder Gulp vergleichen und wird vom Android SDK und Cordova benötigt. Apache Ant kannst du entweder hier herunterladen und nach folgender Anleitung vom StackOverflow User Michael Aaron Safyan (http://stackoverflow.com/a/3222993) installieren:
cd ~/Downloads # Let's get into your downloads folder. tar -xvzf apache-ant-1.8.1-bin.tar.gz # Extract the folder sudo mkdir -p /usr/local # Ensure that /usr/local exists sudo cp -rf apache-ant-1.8.1-bin /usr/local/apache-ant # Copy it into /usr/local # Add the new version of Ant to current terminal session export PATH=/usr/local/apache-ant/bin:"$PATH" # Add the new version of Ant to future terminal sessions echo 'export PATH=/usr/local/apache-ant/bin:"$PATH"' >> ~/.profile # Verify new version of ant ant -version
oder du benutzt Homebrew: (Was ich jedem Mac-Nutzer dringend ans Herz lege)
brew install ant
Hier gerne auch wieder mit einem
ant -version
die erfolgreiche Installation von Ant überprüfen. Welches hoffnungsvollerweise folgende oder ähnliche Ausgabe hat:
Apache Ant(TM) version 1.9.4 compiled on April 29 2014
Android SDK
Tools einrichten
Hier kann Homebrew wieder nützlich sein. Mit
brew install android-sdk
installiert es die aktuelle Version des Android SDK. Die SDK wird unter
/usr/local/opt/android-sdk
abgelegt.
Alternativ kann man natürlich die “Android SDK Tools only” auch manuell installieren. Hierfür einfach die passende Zip-Datei für Windows, Mac oder Linux laden und entpacken. Den Inhalt der Zip an einen beliebigen Ort kopieren (zB. ~/dev/SDK). Anschließend die Tools dem PATH
export ANDROID_HOME=<location zB. ~/dev/SDK>/android-sdk-macosx
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
hinzufügen (~/.bash_profile oder .bashrc).
Tools installieren
Nun durch ausführen von “android” im Terminal den Android SDK Manager aufrufen und hier die neusten Android SDK Tools, Platform-tools, Build-tools und Android APIs installieren. Ich habe im ersten Schritt zumindest die Android API 5.0.1 und 4.4.2 installiert. (Im Screenshot ist fälschlicherweise 4.4W.2 angehakt, hier handelt es sich um die API für die Entwicklung für eine Android SmartWatch)
Android SDK Manager
Das die Platform-tools vernünftig installiert wurden und das die PATH-Angabe korrekt ist, überprüfst du nach der Installation mit einem einfachen
adb version
welches dir die aktuelle Version der “Android Debug Bridge” ausgibt. Die ADB ist ein Bestandteil der Platform-tools. Wenn du die Android SDK mit Homebrew installiert haben solltest, müsste eigentlich alles automatisch gehen. Wenn nicht, musst du auch noch einmal manuell deinen Android SDK PATH einrichten. Mit Homebrew installiertes Android SDK kann dem PATH mit folgendem Grundpfad bekannt gemacht werden:
# symlink auf die aktive / aktuelle Version des von Homebrew installierten SDK /usr/local/opt/android-sdk
Also so:
export ANDROID_HOME=/usr/local/opt/android-sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
Du solltest zumindest ANDROID_HOME setzen, wie oben beschrieben, weil dies als Fallback vom Ant-Build während des Cordova run/build benutzt wird.
Apache Cordova + Crosswalk
Ihr benötigt zunächst ein installiertes node.js.
Cordova (Optional)
Cordova wird mit einem einfachen
sudo npm install -g cordova
installiert. Mit folgendem Befehl könnt ihr anschließend den Erfolg der Installation überprüfen:
cordova -v
welches euch die installierte Version von Cordova ausgeben sollte. Zum Zeitpunkt des Schreibens ist es “4.1.2”.
Crosswalk
Anschließend installieren wir Crosswalk. Mit Crosswalk wird eine spezielle Cordova Version geliefert, weshalb die seperate Installation von Cordova zunächst optional ist. Cordova zu installieren ist aber schnell gemacht und kann uns später für iOS oder Windows noch nützlich sein, Crosswalk ist nur für Android und Tizen verfügbar.
Für die Installation von Crosswalk gehst du auf die Download-Seite von Crosswalk und ladest die letzte Stable für x86 und ARM von “Cordova Android” herunter. Ich habe den Inhalt der Zip in meinem Home-Verzeichnis in “~/dev/SDK” kopiert. Ein neues Crosswalk-Projekt legst du später durch den Befehl
<dein Pfad zur entpackten Zip>crosswalk-cordova-9.38.208.10-x86/bin/create <project_directory> \
<package_name> <project_name> [<template_path>] [--shared]
an. In meinem Fall müsste ich also
~/dev/SDK/crosswalk-cordova-9.38.208.10-x86/bin/create <project_directory> \
<package_name> <project_name> [<template_path>] [--shared]
ausführen.
Die Entwicklungsumgebung
Ladet dir die neuste Version von IntelliJ IDEA als 30 Tage Trial von https://www.jetbrains.com/idea/download/. Diese IDE bietet eine Unterstützung für JavaScript, CSS, HTML, node.js, SASS, less und oben drauf noch Android, Java, etc. und ist damit die perfekte IDE für die Entwicklung einer hybriden App.
Installation: JetBrains’ IntelliJ IDEA auf dem Mac
Was fehlt?
Wir haben alles vorbereitet um eine hybride Android App zu entwickeln, aber noch nicht alles (zB. xcode) für die Entwicklung von hybriden iOS oder gar Windows Apps vorbereitet.
Desweiteren muss die IDE noch eingerichtet werden, dies erledige ich später, erst einmal legen wir die App an und führen einen ersten Testlauf durch. Außerdem ist eine Versionskontrolle (Git) noch ratsam.
