Appentwicklung mit Webtechniken – Appcelerator Titanium

Apps sind zur Zeit in aller Munde. Bekanntlich gibt es mit Android und iOS mal mindestens 2 ernst zu nehmende Plattformen, auf denen man in der Regel vertreten sein möchte. Heißt: Zwei mal dasselbe programmieren, einmal in Java und einmal in Objective C. Das muss nicht sein. Mit dem Cross Platform Framework Appcelerator Titanium wird die Entwicklung in Javascript vorgenommen – nebst Zugriff auf die Gerät-APIs wie Kamera, Beschleunigungsmesser, GPS und allem Klimbim. Nur am Rande: Titanium ist kein kleines Nebenprojekt eines gelangweilten Studenten. Ein paar Millionen Apps sind damit schon erstellt worden, u.a. auch das fies gehypte Wunderlist.

Das, was am Ende dabei rauskommt ist eine vollwertige, native App welche selbst in Apples App-Store Bestand hat. Soweit, wie ich das verstanden haben, wird der von euch geschriebene Javascript-Code im Beispielfalle Android von Titanium in natives Java verwandelt. Ergebnis ist eine verhältnismäßig performante App, gegen die ein Browser ohne UI wie beispielsweise Phonegap abstinkt.

Da die Installation von Titanium allerdings recht komplex ist und man viel falsch machen kann, möchte ich das hier mal Step-by-Step durchziehen. Nicht zuletzt, um es für mich in Stein zu meißeln.

Schritt 1: Java deinstallieren

Titanium ist pingelig. Nach Kompatibilitäts-Matrix muss sich das JDK 1.6 auf dem Rechner befinden. Das Java Runtime Environment (JRE), was die meisten durch Netbeans / Eclipse sowieso schon auf der Kiste haben werden, reicht nicht. Auch neuere Versionen als 1.6 verschmäht Titanium. Wenn ihr nun nicht grade das JDK 1.6 inklusive JRE auf dem Rechner haben solltet: Runter damit.

Schritt 2: JDK 1.6 installieren

Downloadlink zum JDK bei Oracle. Die Java DB könnt ihr euch schenken, der Rest muss drauf. Verzeichnis ist dabei egal.

Direkt danach wird das JRE noch draufgemacht.

Schritt 3: Java zum PATH hinzufügen

So gehts. Pfad zu eurem \bin – Folder des JDK mit ; an den PATH anfügen.

Schritt 4: Java prüfen

Konsole aufmachen.

java -version && javac -version

Sowohl java, wie auch javac (Java Compiler) müssen in der gleichen Version 1.6X vorliegen.

Schritt 5: Android SDK installieren

Download hier. Es könnte nun passieren, dass euch das Android SDK beim installieren trotz korrekt eingerichtetem Java folgendes erzählen möchte:

Ich hab verdutzt 3mal Java neu draufgemacht, eh mich stackoverflow erleuchtete:

Press Back when you get the notification and then Next. This time it will find the JDK.

(I don’t know why, but it works on Windows 7 x64.)

Also zurück, wieder vor und siehe da:

Wichtig: Das Android SDK unbedingt an einen Ort installieren, der keine Leerzeichen im Pfad hat. Am Besten C:\Android. Das Titanium Manual sagt dazu:

Be aware that there is a bug in Revision 12 of the Android SDK Tools package for Windows that prevents applications from being launched if spaces exist in the filesystem path to the Android SDK (ie C:\Program Files (x86)\Android

Allerdings scheint sich das Problem nach meinen Erkenntnissen nicht nur auf die API Version 12 zu beziehen, sondern Titanium generell so sehr zu verwirren, dass das Android SDK nicht mehr gefunden werden kann. Also einfach auf C:\ gekloppt. Wenn ihrs doch schon wo anders hin installiert habt, kann mans auch einfach umkopieren. Scheint portabel zu sein.

Schritt 6: Die richtige API Auswahl

Nun werdet ihr mit allen API-Versionen konfrontiert, die es so im Android Ökosystem gibt. Sieh hierzu: Verbreitung der Android Versionen (Stand: 5.9.2011). Hier lieber zu viel als zu wenig auswählen. Ich habe mich für folgende Konfiguration entschieden:

Wichtig: Unbedingt die API Version 7 (Android 2.1) auswählen, sonst mag Titanium das SDK später nicht finden. Die Samples können getrost ignoriert werden, wir wollen ja nicht mit Java sondern mit Titanium entwickeln. Ob ihr Android 3.X mit dabei haben wollt (aktuell noch kaum verbreitet, eher für Tablets geschaffen) bleibt euch überlassen. Nachinstallieren ist übrigens jederzeit möglich.

Die Google API-Versionen scheinen die normalen API’s mit ein paar Erweiterungen für die Google Dienste – aka maps und Konsorten – zu sein. Kann also nicht schaden, die auch noch mit zu installieren.

Der Spaß kann jetzt eine ganze Weile dauern.

Schritt 7: Umgebungsvariablen fürs Android SDK

Zum Path hinzuzufügen:

C:\Android\android-sdk\platform-tools;C:\Android\android-sdk\tools

Sowie unter der neu zu erstellenden Variablen ANDROID_SDK:

C:\Android\android-sdk\

Schritt 8: Ausprobieren

Jetzt testen wir, ob adb (android debug bridge) das Handy findet. Dazu muss euer Android Handy erstmal entsprechend konfiguriert werden. Dazu klaue ich frei von hier:

1. Set up your device to allow installation of non-Market applications. On the device, go to Settings > Applications and enable Unknown sources.
2. Turn on „USB Debugging“ on your device. On the device, go to Settings > Applications > Development and enable USB debugging.

Nun testen wir das. Konsole auf, und adb devices eingeben. ADB wird von Titanium genutzt und sollte direkt gefunden werden, da es sich unter C:\Android\android-sdk\platform-tools und damit ja im PATH befindet.

Ohne angeschlossenes Handy:

Mit angeschlossenem Handy:

Sollte ADB euer Gerät nicht fressen wollen, liegt es an Treiberproblemen. Wenn Windows euer Handy als Massenspeichergerät erkennt und mit seinen Default-Treibern zu Werke geht, findet ADB das Gerät nicht mehr. In diesem Fall: Alles aus dem Gerätemanager kicken, was nach Handy aussieht und dann mit eurem Hersteller USB-Treiber neu versuchen. Ihr seid nicht allein.

Übrigens: Der im Android SDK auswählbare USB Treiber wird euch nicht helfen, er ist nur für die Google Nexus Geräte.

Schritt 9: Titanium selbst installieren

Vorarbeit geschafft! Titanium Account erstellen (kostenlos, wie das Programm selbst) und dann Titanium herunterladen. Aktuell (18.9.2011) ist die Version 1.72. Das Titanium Studio basiert übrigens auf Aptana und damit auf Eclipse.

Auch hier solltet ihr ein Verzeichnis wählen, welches bestenfalls keine Leerzeichen im Pfad hat. Dies gilt auch für den Workspace:

Jetzt verlangt Titanium noch GIT, bietet euch aber – sofern es nicht installiert und von Titanium gefunden wurde – die Option, Portable Git zu installieren und verwenden.

Schlussendlich muss noch das Android SDK in Titanium verlinkt werden. Dazu unter Window -> Preferences den Pfad zum SDK auswählen und eure gewünschte API Version als Default setzen:

Schritt 10: Ready to go.

Nun ist alles eingerichtet. Wir klicken beschwingt auf „create project“:

Den „new project wizard“ stellen wir so zufrieden:

Und ab dafür. Auf den grünen Startpfeil geklickt und dann erstmal nen Kaffee machen. Android läuft nämlich in einem Emulator, der beim ersten Kaltstart gern mal 3 Minuten braucht.

Nach dem vollständigen Start und dem Entriegeln des Emulators sollte eure Hello World – App automatisch starten.

Links oben im Screenshot markiert ist der Start-Button für den Emulator. Alternativ kann auch der gewohnte, grüne Pfeil oben genommen werden. Rechts unten ist der Button zum Umschalten zur anderen Konsole markiert. Fehler beim Build gibt Titanium in Rot aus, in der Regel wird man aber nach kurzer google Suche schnell fündig – es gibt noch einige Kinderkrankheiten.

Eventuell kommt beim Start des Emulators eine Dosbox hoch, in der „Error loading Preferences“ steht. Das soll euch aber keine Gedanken bereiten, scheint beim Android Emulator zum guten Ton zu gehören.

Schritt 11: Fastdev!

Einmal gestartet, den Emulator bloß nicht wieder schließen! Titanium Studio verfügt standardmäßig über die Eigenschaft fastdev, welche es euch ermöglicht, ohne erneuten Emulatorstart Änderungen an der App vorzunehmen. Dazu einfach im Codefenster die app.js manipulieren (Tabtitel umbenennen bspw.) und erneut bei laufendem Emulator auf den Startknopf drücken. Sollte nun viel flotter gehen. Alternativ kann die App auch manuell geschlossen werden (nur die App, nicht den Emulator). Beim Neustart der App sind eure Änderungen dann auch bereits berücksichtigt.

Schritt 12: Einstieg in die Entwicklung

Titanium bietet das wunderbare Spielplatzprojekt Kitchen Sink an, in dem so gut wie alle Features von Titanium mal vorgestellt werden. Durch einfaches Copy und Paste kommt man so recht schnell zu brauchbaren Ergebnissen. Kitchensink findet sich als Musterprojekt bei Github. Ich muss dazusagen, dass Kitchen Sink ein Spielplatz ist und nicht immer funktionieren muss. Da scheint so ziemlich jeder dran herumbasteln zu dürfen, weswegen nicht unbedingt garantiert ist, dass die App immer funktioniert. Bei mir kam bspw. gern der Fehler Could not find shared library. Achja, Kitchen Sink sollte mit den Google API’s ausprobiert werden, da u.a. von google maps Gebrauch gemacht wird.

Schritt 13: Deployen aufs Gerät

Das oben erwähnte USB-Debugging auf dem Handy anschalten und auch „nicht vertrauenswürdigen Quellen“ vertrauen, Handy anstöpseln und mit adb devices bestätigen lassen, dass das Handy gefunden wurde. Dann nur noch in Titanium auf „Android Device“ – der Rest geht wie von Geisterhand.

Und was ist mit iOS?

Wie uns die Kompatibilitätsmatrix verrät, wird für die App-Entwicklung unter iOS zwingend ein Mac benötigt, deswegen kann ich dazu aktuell noch nichts sagen.

Weitere Ressourcen

• Alle Guides direkt bei Titanium
• Überdetaillierter, allerdings veralteter, Installationsguide für Windows 7
• Titanium API Dokumentation für die Gerätfunktionen
• Nettes Tutorial zur App-Entwicklung mit Titanium

Weitere Posts:

• Java und SQLite
• Eine Ode an das Qualitätsbewusstsein!
• Java Hibernate Tutorial
• Java Applet Tutorial: Applet erstellen, einbinden und mit Javascript ansprechen
• Best-of-the-Web 13