Nachdem ich größtenteils schon wieder vergessen hatte, wie man für Android Apps nativ entwickelt und mal wieder Lust hatte, neue Apps zu programmieren und in den Play Store zu bringen, habe ich mir angeschaut, wie man so etwas ohne native Android-Entwicklung bewerkstelligen kann.

Es gibt mehrere populäre Frameworks, um Apps möglichst auf unterschiedlichen Plattformen (Android, iOS, Windows 10) zu publizieren, aber nur einmal, üblicherweise mit gängigen Web-Tech
nologien (HMTL5 / Javascript / CSS + sehr viele tolle neue Frameworks) entwickeln zu müssen. Klassisch, write once, debug everywhere halt;-)
Ionic und React Native sind wohl zwei der populärsten Frameworks dieser Art. Hier soll der Anwender möglichst denken, die App wäre nativ für das jeweiligen Betriebssystem geschrieben worden. Ich hatte mich für mein Projekt initial für Ionic entschieden, aber dann gemerkt, dass für meine Zwecke der Overhead dieses Frameworks gar nicht nötig war.
Ionic verwendet nämlich zur Integration in die Zielplattform (i.e. Android) Apache Cordova, welches auch ohne diese zusätzliche Schicht das bietet was mich interessiert hat: Single Page Applications (SPA), also clientseitig laufende, mit Javascript geschriebene Anwendungen nach Android kompilieren zu können. Heutzutage benutzt man dazu ein SPA Framework, und da hat man eine gewaltige Auswahl. Wenn man anfängt sich zu Javascript Frameworks und anderer Web-Technologien zu informieren, kann einem schon etwas schwindelig werden – irgendwann muss man einfach aufhören Alternativen zu vergleichen und einfach anfangen. Ich habe mich für AngularJS entschieden, verwende ehrlich gesagt aber nur eine kleine Teilmenge der Features und Komplexität.

Angular JS

Was wirklich nett ist, ist das Angular die Verknüpfung zwischen Datenmodell und Darstellung im DOM (Document Object Model, die Repräsentation des HTML Dokuments zur Laufzeit) automatisch und in Echtzeit übernimmt. Wenn man also im Datenmodell beispielsweise einen Counter hochzählt, sieht man das sofort im Browser – und wenn der Anwender den Wert in einem Eingabefeld ändert, passt sich das Modell sofort an.
Darüber hinaus bin ich bei meiner Verwendung von Angular JS bisher kaum über Hello-World Niveau hinausgegangen, aber ich denke ich werde mich da eher „on demand“ weiterbilden statt erstmal ein dickes Buch durchzuarbeiten. Im Internet gibt es aufgrund der Popularität des Frameworks jedenfalls etliche Ressourcen dazu.

Elephant Brain

Ich habe die Entwicklung erstmal mit einer etwas ambitionierteren App zum Vokabeln/Sprache lernen begonnen, aber nachdem ich dafür ein kleines Memory-Spiel entwickelt hatte, möchte ich dieses erstmal sozusagen als „Spin Off“ veröffentlichen, um Erfahrung mit dem gesamten Prozess zu sammeln. Dabei habe ich einige Sachen gelernt.

Javascript

Objektorientierte Programmierung mit Javascript ist für einen geübten Java-Entwickler ziemlich ungewohnt. Es gibt keine „Klassen“, aber dafür sind Funktionen Objekte und können ein bisschen so ähnlich verwendet werden. Funktionen können sowohl Daten/Felder wie weitere Funktionen enthalten. Das was in Javascript wiederum Objekte genannt wird ist eigentlich auch nicht mehr als eine Map, die beliebige Daten, etwa auch andere Maps und Funktionen enthalten kann. Einige Male bin ich bei der Entwicklung mit meiner Java-Brille in Sackgassen gelaufen, aber da mein Programm ja nicht groß ist, war das Refactoring nie besonders aufwändig. Langsam komme ich mit der Sprache besser zurecht, und es macht schon Spaß, eine neue Programmiersprache zu lernen, beziehungsweise in diesem Fall etwas besser und detaillierter zu lernen. Ich habe auf die Verwendung der allerneuesten Sprachfeatures (ECMAScript 6/2016) verzichtet, damit es in den meisten Browsern läuft.

Persistenz

Persistenz ist im Browser supereinfach zu haben:
 // Speichern
 localStorage.setItem("meinName", "Paul");
 // Laden
 var name = localStorage.getItem("meinName");

Die Werte in localStorage können aber erstmal nur Strings sein, deswegen braucht man gibt es diverse Frameworks, die sich als Wrapper um LocalStorage legen, um den Umgang damit komfortabler zu machen. Ich verwende dazu Lockr, und es tut was es soll. Objekte werden beim Speichern nach JSON serialisiert und beim Laden entsprechend deserialisiert. Einzige Limitation: Funktionen (Anweisungen) gehen dabei verloren, deswegen habe ich in meinem Code einen einfachen Datencontainer g verwendet, der selbst keine Funktionen hat.

Persistenz gibt es zumindest in der aktuellen Version nur auf dem Client. Es gibt also keine globale Bestenliste, und wenn der Browser-Cache geleert wird sind auch die Punktestände wieder weg. Bei einem ambitionierterem Projekt müsste ich mir also auch über serverseitige Persistenz gedanken machen.

Icons und Bilder

Ich habe Spaß am Programmieren, aber eher weniger dabei, mich mit CSS herumzuschlagen, damit das Ganze gut aussieht, und auch das Erstellen schöner Grafiken ist nicht gerade meine Kernkompetenz. Eine Super-Ressource, die mir hier sehr geholfen hat, war FlatIcons.

APK Generieren mit Cordova

Cordova wird dazu verwendet, aus einer bereits existenten SPA mit wenigen Befehlen eine vollständige APK (Android Package)-Datei zu generieren. Oder auch Output für andere Systeme, aber damit habe ich mich erstmal nicht so intensiv beschäftigt. Eine neue Plattform hinzuzufügen ist in jedem Fall mit etwas Aufwand verbunden, im Fall von iOS braucht an wohl sogar einen Mac dazu. In Fall von Android muss jedenfalls schonmal ein SDK vorliegen. Das hat auf Anhieb nicht geklappt, da sich das installierte SDK, Java und Cordova nicht vertragen haben. Es kam etwa die folgende Fehlermeldung:

Error: Requirements check failed for JDK 1.8 or greater

Mit der Kombination Cordova 5.4.0, Android SDK 6.0 (API 23) und Java 8 JDK hat es dann letztendlich funktioniert, und ich habe erstmal nicht vor, da weiter upzugraden.
Hat man das Projekt erstellt (cordova create <project> ) und Android als target eingerichtet (`cordova platform add android`), wird eine neue Version einfach so gebaut: cordova build –release. Um Apps im Play Store vertreiben zu können, müssen sie signiert werden. Dazu muss eine Keystore-Datei erstellt und eine Datei platforms/android/release-signing.properties erstellt werden, und schon wird die APK Datei automatisch signiert.
storeFile=XYZ.keystore
storeType=jks
keyAlias=
keyPassword=
storePassword=
Wichtig: Viele Dateien in platform/android werden von Cordova generiert, es hat also keinen Sinn sie manuell zu ändern – auf das Änderungsdatum achten. Mit jeder neuen Version die über die Developer Konsole von Android hochgeladen wird, muss die Versionsnummer erhöht werden.

Rechtschreibung

Eine weitere Lektion: Prüfe die Rechtschreibung von deinem App-Namen, bevor Du sie veröffentlichst;) Erst zu spät ist mir aufgefallen, dass das englische Wort für „Elefant“ elephant und nicht elefant ist. Da war der Identifikator für den Play Store bereits vergeben (de.panschk.elefantbrain), deswegen muss das jetzt so bleiben.

Links

Auch dieses Projekt habe ich in meinem Github Profil hochgeladen. Im Play Store von Android ist die App zur Zeit noch im Betatest-Modus, ich werde sie wohl in den nächsten Wochen offiziell veröffentlichen.
Die App ist im Android Store zu laden, funktioniert aber auch im Browser: Zu Elephant Brain im Browser