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.

Java weghauen

Java weghauen

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.

JDK installieren

JDK installieren

Direkt danach wird das JRE noch draufgemacht.

JRE draufmachen

JRE draufmachen

Schritt 3: Java zum PATH hinzufügen

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

Java PATH

Java PATH

Schritt 4: Java prüfen

Konsole aufmachen.

1
java -version && javac -version
Java Version Check

Java Version Check

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:

Android SDK: Java not found

Android SDK: Java not found

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:

Android SDK: Also doch...

Android SDK: Also doch...

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:

API Auswahl

API Auswahl

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.

Geschafft!

Geschafft!

Schritt 7: Umgebungsvariablen fürs Android SDK

Zum Path hinzuzufügen:

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

Sowie unter der neu zu erstellenden Variablen ANDROID_SDK:

1
C:\Android\android-sdk\
Android SDK Umgebungsvariable

Android SDK Umgebungsvariable

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:

ADB Devides ohne Handy

ADB Devices ohne Handy

Mit angeschlossenem Handy:

ADB Devices mit Handy

ADB Devices mit 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.

Titanium Installation

Titanium Installation

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

Titanium Workspace

Titanium 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.

Portable Git

Portable Git

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:

SDK in Titanium

SDK in Titanium

Schritt 10: Ready to go.

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

Neues Projekt

Neues Projekt

Den “new project wizard” stellen wir so zufrieden:

Projekt-Wizard

Projekt-Wizard

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.

Emulator startet

Emulator startet

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.

Hello, World

Hello, World

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.

Run on Device

Run on Device

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

Weitere Posts:

Dieser Beitrag wurde unter Javascript, webdev veröffentlicht. Setze ein Lesezeichen auf den Permalink.

4 Antworten auf Appentwicklung mit Webtechniken – Appcelerator Titanium

  1. Michael sagt:

    Hi David,

    hast du noch weiter mit Titanium gearbeitet und weitere Erfahrungen gesammelt? Werde die Tage auch wieder ein kleines App basteln und wollte Titanium mal ausprobieren.
    Danke auf jeden Fall für deine super Anleitung, direkt als Bookmark abgelegt, werd ich bestimmt brauchen bei der Installation.

    Michael

  2. David sagt:

    Hi Michael,

    Bei uns in der Firma sind schon einige Apps damit realisiert worden, die auch im Market / App-Store gelandet sind und sich im Dauertest bewährt haben. Sind allerdings einige Fallstricke mit dabei, die schlecht oder garnicht dokumentiert sind. Aber wenn man sich an alle Kinderkrankheiten gewöhnt hat, ists auszuhalten.

  3. Michael sagt:

    Na jetzt hast du mich neugierig gemacht, da ich ein Android-Device hab: Sag mal die Namen der Apps, möchte mal gucken!

    Habe gestern mal das KitchenSink geladen in Titanium, im Emulator laufen lassen und auch auf das Handy gespielt, funktioniert. Danach ein kleines Beispiel-App gebaut, das stürzt auf dem Handy aber direkt beim Start ab, ohne Fehlermeldung, im Emulator lief es wunderbar. Mal schauen woran das liegt, aber generell ist es ein cooles System, bin gespannt wo man an die Grenzen stößt…

    Etwas fehlt der grafische Editor zum Zusammenklicken der UI-Elemente wie man das “früher” machen konnte (mit Eclipse ADT Plugin). Ist etwas ungewohnt mit “top” und “left” zu arbeiten und dann immer im Emulator zu schauen wie es aussieht.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>