Nach dem großen Erfolg unseres mobilen Adventskranzes für das iPhone/iPad und diversen Anregungen der User bezüglich einer Weiterentwicklung, haben wir in diesem Jahr den Adventsbegleiter neu aufgelegt – mit Adobe Flex 4.5. Dies ermöglicht uns, mobile Apps intern zu erstellen und bietet darüber hinaus eine gute Gelegenheit, die Vor- und Nachteile direkt in der Praxis zu testen.
Schon vor Beginn lagen ein paar Vor- und Nachteile auf der Hand:
Vorteile:
- Plattformübergreifende Entwicklung (iOS, Android & Blackberry Tablet) aus einem Quellcode.
- Vorhandene Flashkenntnisse und mögliche Wiederverwendung von bestehendem Code / Material
- Mehrfachnutzung z.B.für die Webseite
Nachteile:
- Beschränkter Zugriff auf Funktionen (Kamera, In-App-Purchase, etc.)
- Möglicherweise Performanceprobleme durch Flash auf mobilen Geräten
Die Adventskranz-App
Seit 2009 haben wir eine einfache aber hübsche Adventskranz-App im iTunes AppStore. Die erste Version war nativ für iOS erstellt und beschränkte sich darauf je nach Datum fünf verschiedene Bilder mit der entsprechenden Anzahl an brennenden Kerzen anzuzeigen. 2010 gab es dann die Möglichkeit mit Flash Professional CS5 Apps zu erstellen, worauf wir mit wenig Aufwand animierte Kerzen mit flackernder Flamme einbauen konnten. Bereits diese ersten Versionen kamen hervorragend an und wir freuten uns über zusammen etwa 25.000 Downloads.
Für 2011 haben wir uns etwas mehr vorgenommen und wollten ein paar der lang gewünschten Funktionen einbauen. Dazu gehörte vor allem mehr Individualität für den Kranz selbst, die Kerzen manuell an- und auszumachen, dass sie tatsächlich herunterbrennen und kleinere Features wie das Ausblasen der Kerzen. Und durch Adobe Flex wurde es uns auch möglich, ohne Mehraufwand in der Entwicklung eine Version für Android anzubieten.
Die Fotografie
Nachdem das Konzept schnell fest stand und grundsätzliche Gestaltungsfragen geklärt waren, konnten wir mit der Umsetzung beginnen. Dazu musste Ende September erstmal ein Adventskranz besorgt werden, was nicht ganz so einfach ist, wie vielleicht gedacht. Dank unseres eigenen Fotostudios konnten wir ihn genau so fotografieren, wie wir ihn benötigten, und zeitgleich die ersten Testaufnahmen in das Test-Composing einfügen.
Die einfarbigen Kerzen haben wir aus verschiedenen Richtungen, jeweils brennend und nicht brennend fotografiert. Und um die verschiedenen Höhen hat sich dann unsere Retuscheabteilung gekümmert. Eine unerwartete Herausforderung stellte das Einfärben dar: Was auf den kalibrierten Monitoren wie ein adventliches Rot aussah, wurde auf iPad und iPhone eher zu einem trüben Etwas. Und auch die anderen Farben entsprachen so gar nicht dem, was erreicht werden sollte. Ein Umstand der uns wieder deutlich machte, dass die aktuellen Geräte nicht farbecht sind und Bilddaten unbedingt frühzeitig auf den tatsächlichen Geräten getestet werden sollten.
(Achtung jetzt kommt Technik. Für nicht Technikinteressierte geht es hier weiter.)
Die Umsetzung mit Flex Mobile
Direkt am Anfang entschieden wir, die Hauptfunktionalität (Kranz, Kerzen, Logik, etc.) in eine Bibliothek auszulagern, damit der Kranz auch im Web oder anderen Flex-Projekten verwendet werden kann. Flex bietet hierfür hervorragende Möglichkeiten und durch die frühzeitge Entscheidung,entstanden keine Mehraufwände.
Nach dem Fotografieren wurden die Bilddaten der verschiedenen Kränze, Hintergründe und Kerzen in unserer Retuscheabteilung vorbereitet, Eine erste Herausforderung in der Umsetzung ist, hier die Daten so vorzuhalten, dass wir die App in Zukunft problemlos updaten und erweitern können, da die Nutzer dieses Mal eigene Konfigurationen erstellen können und diese auch im nächsten Jahr noch funktionieren sollten. Hierzu haben wir die Bilddaten in die App eingebettet und eine XML-Datei erstellt, die die eindeutigen Bezeichnungen der dahinterliegenden Assets enthält.
Durch Erfahrung in der Webentwicklung ist man schnell geneigt, auch die Einstellungen der User in einer XML-Datei zu speichern. In mobilen Apps ist es üblich, dass die aktuellen Einstellungen sofort gespeichert werden und die App so seine “Persistenz” auch nach spontanen Telefonanrufen oder Abstürzen beibehält. Dauernd die XML-Datei zu überspeichern, ist möglich, allerdings bietet Adobe hierfür eine bessere Methode an – den PersistenceManager. Hier können Key-Value-Parameter on the fly gespeichert werden und das in einer plattformübergreifend gleichen Methodik. Gerade hierbei war zu beachten, dass die gewählten Einstellungen auch noch in späteren Versionen erhalten bleiben. Daher wird die aktuelle App-Version mitgespeichert und bei Abweichungen ein Migrationsprozess aufgerufen.
Die grundlegende Logik für den Kranz war auf Grund den Erfahrungen aus den Vorjahren schnell erstellt. Allerdings werden diesmal die Adventstage dynamisch berechnet. (Ein Umstand der uns später noch mal einholen sollte.) Das Resultat war eine Adventskranz-Kompenente für Flex, die mit einem Konfigurations-Objekt gefüttert werden konnte. Durch die Layout-Möglichkeiten in Flex kann diese Komponente beliebige Seitenverhältnisse und Größen annehmen, so dass wir sie flexibel in unterschiedlichen Anwendungsfällen nutzen können.
Abgesehen von der Persistenz mussten wir bisher kaum auf mobile Einschränkungen eingehen und konnten die App wie gewohnt entwickeln und lediglich darauf achten, für mobile Endgeräte geeignete Framework-Komponenten zu nutzen. Gerade die Speichernutzung ist kritisch und wir haben daher versucht, so wenig verschiedene Objekte wie möglich zu benutzen. Da es das erste mobile Projekt war, gibt’s hier bestimmt noch weiteres Potenzial, die Performance zu optimieren.
“Integration in die App”
Die funktionierende Adventskranz-Komponente musste nur noch in eine passende App verpackt und ein Interface für die Konfiguration des Kranzes erstellt werden. Hier stellt sich zuerst die Frage, wie zwischen Telefonen und Tablets unterschieden wird. Die Kranzkomponente hat hier schon bestens funktioniert, da sie auf keine bestimmte Größe festgelegt ist. Nicht so einfach war das Konfigurationsmenü: Der erste Ansatz war, für Tablets die aus iOS gewohnten PopOvers zu nutzen und in Telefonen den Kranz komplett zu überlagern/ersetzen. Das war der erste Moment, wo uns Flex ein bisschen im Stich gelassen hat: In Flex gibt es keine PopOvers und wir hätten die Funktionalität selbst nachbauen müssen. Erhältliche Bibliotheken wie e-skimo bieten zwar alles und mehr als wir benötigen, aber sind auch mit Lizenzen verbunden, die uns davon abgehalten haben. Die pragmatischere Lösung bestand darin, das Menü einfach von der Seite her einzublenden.
Für das Konfigurationsmenü bietet Flex eine optimale Lösung – den ViewNavigator. Damit lässt sich in einfachster Weise die auf mobilen Geräten gewohnte Navigation realisieren. Das ins Framework integrierte Speichermanagement kümmert sich dabei um die Entsorgung der inaktiven Views und die Übergabe von Parametern erfolgt problemlos. In nur wenigen Stunden hatten wir so eine funktionierende Lösung für alle Konfigurationsmöglichkeiten.
Ein schon aus der letzten Version bekanntes Problem konnten wir leider auch diesmal nicht umgehen – die Ausrichtung. Als iPhone-Nutzer ist man zu Recht gewohnt, das sich die App automatisch der Orientierung anpasst, wenn das Gerät nach links oder rechts gedreht wird. Während es mit nativen Mitteln relativ einfach funktioniert, nur die beiden Querformat-Ausrichtungen zuzulassen, macht uns Adobe Air / Flash da Probleme: So können nur alle vier Ausrichtungen zugelassen werden oder nur eine. Versuche, das Hochformat zu unterbinden, hat nie zu zuverlässigen Ergebnissen geführt. Unser zähneknirschender Kompromiss, nur eine Ausrichtung zuzulassen, hat dafür zuverlässig funktioniert.
Erweiterte Funktionen
Die Ausrichtung funktionierte, der Kranz war konfigurierbar, mit der Zeit runterbrennende Kerzen waren integriert und eine App, die sowohl auf iPhones, iPads und Android-Geräten läuft, war programmiert: Und das alles aus einem identischen Quellcode. Aber es war noch genug Zeit, um ein paar weitere Features einzubauen: Wir wollten den Nutzern die Möglichkeit geben, ein eigenes Foto in den Hintergrund zu stellen. Damit wird der Kranz wirklich persönlich . Da uns Adobe Air den Zugriff auf die Kamera gibt, sprach auch nichts dagegen. Damit das Foto aber auch nach einem Neustart noch erhalten bleibt, muss es abgespeichert werden, wobei an die unterschiedlichen Bedingungen bei iOS und Android gedacht werden muss: Während bei letzterem das Foto automatisch im Filesystem abgelegt und ein Pfad zurückgegeben wird, werden bei iOS nur die rohen Bilddaten zurückgegeben. Um das Abspeichern muss man sich selbst kümmern. Als problematisch hat sich dabei die JPEG-Konvertierung dargestellt: Die Bilddaten werden vom System unkomprimiert übergeben und müssen dann mit Actionscript-Mitteln umgewandelt werden. Das ist leider alles andere als perfomant und die Nutzer müssen einige Sekunden warten, bis das Gerät wieder auf Eingaben reagiert. Hoffentlich ergibt sich hier mit Flex 4.6 durch die nativen Erweiterungen eine Möglichkeit, die Konvertierung nativ durchzuführen. Abgesehen davon war die Kameraanbindung einfach umzusetzen. Adobe Air stellt Funktionen bereit, mit denen vorher abgefragt wird, ob das aktuelle Gerät eine Kamera hat und ein Zugriff auf die Filmrolle zugelassen wird. Das funktioniert geräte- und plattformübergreifend und löst einige Kopfschmerzen, die sich hier sonst ergeben könnten.
Das zweite Feature sollte eine einfache Facebookintegration werden. Der persönliche Adventskranz kann als Foto auf die eigene Pinnwand gepostet und damit etwas weihnachtliche Stimmung verbreitet werden. Hierfür stellen Adobe und Facebook eine Bibliothek bereit, die sich um alle Aspekte kümmert. Was mit einem kleinen Machbarkeitstest begann, war wenige Stunden später bereits in die App integriert. Allerdings kommt auch hier wieder die Schwäche mit der Bildberechnung zum Tragen: Während es mit Flash mehr als einfach ist, die Bilddaten des aktuellen Kranzes als BitmapData abzufragen, müssen diese vor dem Hochladen erst komprimiert werden. Das dauert einige Sekunden und in dieser Zeit reagiert die App auf keinerlei Eingaben. Multithreading wird leider nicht unterstützt.
Performance
Schon während der Entwicklung, wurde die App immer wieder auf den vorhandenen Geräten getestet (iPhone 3GS und iPad 1). Und schnell wurde klar, dass sich ein Adobe-Air-App nicht 100%ig nativ anfühlt. Es braucht durch die Flash-Runtime relativ lang zum Laden und reagiert leicht träge auf Benutzereingaben. Manchmal hängen die Menüs ein bisschen, bevor das Nächste angezeigt wird und die Wisch-Bewegung hakt etwas. Das lässt sich vermutlich noch durch besseres Datenhandling optimieren. Für den Adventskranz fehlte uns dafür leider die Zeit, da der Hauptfokus auf dem Kranz und den Kerzen lag, die zufriedenstellend funktionieren.
Distribution
Als Distributionsziele haben wir in diesem Jahr neben dem iTunes AppStore auch den Android Market ausgewählt. In ersterem haben wir seit zwei Jahren die Adventskranz-App, welche geupdatet werden sollte. Das Erstellen der App für den AppStore klappt direkt mit Adobe Flash Builder und bedarf lediglich der üblichen Provisioning-Profile und Distributionszertifikate. Auf ein unerwartetes Problem sind wir erst beim eigentlichen Hochladen gestoßen: Apps mit Adobe Air / Flex benötigen gewisse UIDeviceRequirements, d.h. sie laufen nicht auf älteren Geräten (<= iPhone 3G). Ein Umstand, mit dem wir leben können, aber wie sich herausstellte, erlaubt Apple nicht, dass App-Updates neue Einschränkungen beinhalten. Eine App muss ab Version 1.0 die Einschränkungen für alle späteren Versionen enthalten. Für Benutzer sicher eine gute Sache, wir hatten allerdings plötzlich das Problem, unsere App nicht hochladen zu können. Die einzige Möglichkeit bestand darin, sie als eigene App hochzuladen. Um die User der alten App auf die neue Version hinzuweisen, haben wir diese zusätzlich aktualisiert und mit einem kleinen Hinweis-Popup versehen.
Bei zwei Apps mit ähnlicher Funktion greift bei Apple die Spam-Erkennung und beide Apps wurden auf Grund dessen zunächst abgelehnt. Um das Problem zu lösen bietet Apple ein “Resolution Center” an, mit dem wir unser Problem erklären konnten, und mit ein paar Tagen Verzögerung wurden sie dann doch noch freigegeben.
Im Android Market hatten wir derartige Probleme nicht zu fürchten. Das Erstellen der App klappte ohne weitere Anpassungen am Quellcode. Einfach “Android OS” als Zielplattform angeben, die Entwicklerprofile bereitstellen und schon hat man eine fertige Android-App. Allerdings müssen die User zum jetzigen Zeitpunkt mit Flex 4.5 Adobe Air noch selbst installieren, was für weniger technikversierte Nutzer eine kleine Hürde darstellen könnte.
Der Bug
Bis zum ersten Advent konnten wir schon einige tausend Downloads verzeichnen. Und natürlich wollte jeder am 1. Advent auch die erste Kerze anzünden. Aber dann passierte es: Die Kerze ging wieder aus. Die App schien nicht zu wissen, dass der 1. Advent ist. Wie konnte das passieren? Unzählige Male haben wir auf unseren iPhones und iPads das Datum auf die verschiedenen Adventtage gestellt und immer hat es problemlos funktioniert. Wie kann das sein? Während die ersten negativen Bewertungen im AppStore ankamen, macht sich ein verzweifelter Entwickler am ersten Adventssonntag auf den Weg in die Arbeit, um das Problem zu beheben. Bis Apple das Update freigibt, werden wieder einige Tage vergehen (und etwa auch der 2. Advent?).
Zuerst galt es allerdings, den Fehler zu finden. 10:52 Uhr: Die Verzweiflung ist noch groß. Das erste Indiz war, dass es problemlos funktionierte, wenn das Datum auf Montag gestellt wird. Diesen Hinweis in der App-Beschreibung hinterlassend, kombiniert mit einem „Sorry“ an alle, die zum Frühstücken einen Adventskranz wollten, ging es dann auf die weitere Fehlersuche.
11:14 Uhr: Der Fehler ist gefunden! Da der Kranz nicht erst ab Montag, sondern schon ab 12 Uhr funktioniert, war klar was passiert war: Die dynamische Datumsberechnung funktioniert ohne Probleme, allerdings hat sich eine “12″ in die Funktion eingeschlichen, die nicht für Dezember stand, sondern für 12 Uhr mittags. Nachdem die Entwicklung und alle Tests immer erst nachmittags stattgefunden hatten, ist dieser banale Fehler nie aufgefallen. Tagelang wurde genau diese Funktion nie vor Mittag getestet. Banal, aber für eine App, die nur an vier Wochenenden im Jahr genutzt wird, fatal!
11:50 Uhr: Der Fehler ist behoben und die App neu in den AppStore eingereicht. Leider mussten wir dazu ein bestehendes Update zurückziehen. Apple bietet allerdings die Möglichkeit, eine schnellere Bearbeitung zu beantragen, die in Ausnahmefällen mit ausreichender Begründung genehmigt wird. Diese wurde zwar später in der Woche abgelehnt, aber das Update kam dennoch rechtzeitig vor dem 2. Advent online.
Fazit
Die grundsätzlich bekannten Probleme und auch Vorteile haben sich letztendlich bewahrheitet. Adobe Flex ist vermutlich eine der besten Entwicklungsumgebungen, um möglichst schnell iOS und Android zu bedienen. Logik lässt sich in Bibliotheken ausgliedern und auch für Desktopprojekte verwenden. Bestehende verfügbare Bibliotheken helfen Anforderungen wie eine Facebook-Anbindung in wenigen Stunden umzusetzen. Und vorhandene Kenntnisse in Flash, Actionscript und Flex lassen sich optimal nutzen, so dass Ideen in kürzester Zeit umgesetzt werden können.
Die Kehrseite der Medaille sind allerdings Einbußen in der Performance. Nach unseren Erfahrungen mit der recht einfachen Adventskranz-App wird sich eine Flex-App aktuell immer etwas träge anfühlen. Die Nachteile der Flash Runtime machen sich auch bei der Nutzung innerhalb von Air bemerkbar: Um diese auszugleichen, muss mindestens mit mehr Aufwand in der Performance-Optimierung gerechnet und neues Know-how spezifisch dafür angeeignet werden. Im Zuge der Adventskranz-App haben wir da schon einiges gelernt, aber damit die App am 1. Advent online sein konnte, fehlte die Zeit, alle Performaceprobleme zu lösen.
Hinzu kommt, dass einige Nutzer berichten, dass die App beim Starten ihr iPad zum Absturz bringt. Dabei stürzt nicht nur die App ab, sondern das iPad startet sich komplett neu. Angezeigt wird nur der Splash-Screen, weswegen wir vermuten müssen, dass es mit Flex/Air selbst zusammenhängt, da noch kein Code von uns ausgeführt wird. Die Reproduktion des Fehlers ist uns selbst leider noch nicht zuverlässig gelungen. Da aber ein Neustart des iPads in manchen Fällen hilft, vermuten wir ein Speicherproblem..
Wofür eignet sich dieser Erfahrung nach Adobe Mobile Flex?
Apps, die die Animations- und visuellen Stärken von Flash/Flex nutzen können und nicht allzu perfomanceintensiv sind, können schnell und kostensparend umgesetzt werden. Auch für Apps, die nicht primär schnell auf Benutzereingaben reagieren müssen, ist Flex geeignet sowie für Apps, wie der Adventskranz, die einmal konfiguriert werden und dann ohne Userinteraktion laufen.
Müssen die Nutzer aber andauernd mit der App interagieren, wird die schnelle Reaktion wichtig. Aktuell gibt es mit Flex 4.5 noch Nachteile, die andere Wege wie PhoneGap oder Titanium unter Umständen besser lösen können.
Der Adventskranz 2012 wird vermutlich auf der gleichen Basis mit Flex entstehen. Mehr Erfahrung unsererseits und verbesserte Air Versionen von Adobe werden dafür sorgen, dass sich die Perfomance bis dahin verbessert. Hoffentlich!