{"id":593,"date":"2011-09-18T22:18:34","date_gmt":"2011-09-18T20:18:34","guid":{"rendered":"https:\/\/d-mueller.de\/blog\/?p=593"},"modified":"2011-09-19T10:16:36","modified_gmt":"2011-09-19T08:16:36","slug":"appentwicklung-webtechniken-mit-appcelerator-titanium","status":"publish","type":"post","link":"https:\/\/d-mueller.de\/blog\/appentwicklung-webtechniken-mit-appcelerator-titanium\/","title":{"rendered":"Appentwicklung mit Webtechniken – Appcelerator Titanium"},"content":{"rendered":"

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\u00f6chte. Hei\u00dft: Zwei mal dasselbe programmieren, einmal in Java und einmal in Objective C. Das muss nicht sein. Mit dem Cross Platform Framework Appcelerator Titanium<\/a> wird die Entwicklung in Javascript vorgenommen – nebst Zugriff auf die Ger\u00e4t-APIs wie Kamera, Beschleunigungsmesser, GPS und allem Klimbim. Nur am Rande: Titanium ist k<\/b>ein kleines Nebenprojekt eines gelangweilten Studenten. Ein paar Millionen Apps sind damit schon erstellt worden, u.a. auch das fies gehypte Wunderlist.<\/p>\n

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\u00e4ltnism\u00e4\u00dfig performante App, gegen die ein Browser ohne UI<\/a> wie beispielsweise Phonegap abstinkt.<\/p>\n

Da die Installation von Titanium allerdings recht komplex ist und man viel falsch machen kann, m\u00f6chte ich das hier mal Step-by-Step durchziehen. Nicht zuletzt, um es f\u00fcr mich in Stein zu mei\u00dfeln.<\/p>\n

Schritt 1: Java deinstallieren<\/h2>\n

Titanium ist pingelig. Nach Kompatibilit\u00e4ts-Matrix<\/a> 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\u00e4ht Titanium. Wenn ihr nun nicht grade das JDK 1.6 inklusive JRE auf dem Rechner haben solltet: Runter damit.<\/p>\n

\"Java<\/a>

Java weghauen<\/p><\/div>\n

Schritt 2: JDK 1.6 installieren<\/h2>\n

Downloadlink zum JDK bei Oracle<\/a>. Die Java DB k\u00f6nnt ihr euch schenken, der Rest muss drauf. Verzeichnis ist dabei egal.<\/p>\n

\"JDK<\/a>

JDK installieren<\/p><\/div>\n

Direkt danach wird das JRE noch draufgemacht.<\/p>\n

\"JRE<\/a>

JRE draufmachen<\/p><\/div>\n

Schritt 3: Java zum PATH hinzuf\u00fcgen<\/h2>\n

So gehts<\/a>. Pfad zu eurem \\bin<\/i> – Folder des JDK mit ; an den PATH anf\u00fcgen.<\/p>\n

\"Java<\/a>

Java PATH<\/p><\/div>\n

Schritt 4: Java pr\u00fcfen<\/h2>\n

Konsole aufmachen.<\/p>\n

java -version && javac -version<\/pre>\n
\"Java<\/a>
Java Version Check<\/p><\/div>\n
Sowohl java, wie auch javac (Java Compiler) m\u00fcssen in der gleichen Version 1.6X vorliegen.<\/p>\n
Schritt 5: Android SDK installieren<\/h2>\n
Download hier<\/a>. Es k\u00f6nnte nun passieren, dass euch das Android SDK beim installieren trotz korrekt eingerichtetem Java folgendes erz\u00e4hlen m\u00f6chte:<\/p>\n
\"Android<\/a>
Android SDK: Java not found<\/p><\/div>\n
Ich hab verdutzt 3mal Java neu draufgemacht, eh mich stackoverflow erleuchtete<\/a>: <\/p>\n
\nPress Back when you get the notification and then Next. This time it will find the JDK.<\/p>\n
(I don’t know why, but it works on Windows 7 x64.)\n<\/p><\/blockquote>\n
Also zur\u00fcck, wieder vor und siehe da:<\/p>\n
\"Android<\/a>
Android SDK: Also doch...<\/p><\/div>\n
Wichtig:<\/b> Das Android SDK unbedingt an einen Ort installieren, der keine Leerzeichen im Pfad hat. Am Besten C:\\Android. Das Titanium Manual sagt dazu:<\/p>\n
\nBe 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\n<\/p><\/blockquote>\n
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:\\<\/i> gekloppt. Wenn ihrs doch schon wo anders hin installiert habt, kann mans auch einfach umkopieren. Scheint portabel zu sein.<\/p>\n
Schritt 6: Die richtige API Auswahl<\/h2>\n
Nun werdet ihr mit allen API-Versionen konfrontiert, die es so im Android \u00d6kosystem gibt. Sieh hierzu: Verbreitung der Android Versionen (Stand: 5.9.2011)<\/a>. Hier lieber zu viel als zu wenig ausw\u00e4hlen. Ich habe mich f\u00fcr folgende Konfiguration entschieden:<\/p>\n
\"API<\/a>
API Auswahl<\/p><\/div>\n
Wichtig:<\/b> Unbedingt die API Version 7 (Android 2.1) ausw\u00e4hlen, sonst mag Titanium das SDK sp\u00e4ter nicht finden. Die Samples k\u00f6nnen 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\u00fcr Tablets geschaffen) bleibt euch \u00fcberlassen. Nachinstallieren ist \u00fcbrigens jederzeit m\u00f6glich.<\/p>\n
Die Google API-Versionen scheinen die normalen API’s mit ein paar Erweiterungen f\u00fcr die Google Dienste – aka maps und Konsorten – zu sein. Kann also nicht schaden, die auch noch mit zu installieren.<\/p>\n
Der Spa\u00df kann jetzt eine ganze Weile dauern.
\n
\"Geschafft!\"<\/a>
Geschafft!<\/p><\/div>\n<\/p>\n
Schritt 7: Umgebungsvariablen f\u00fcrs Android SDK<\/h2>\n
Zum Path hinzuzuf\u00fcgen:<\/p>\n
\r\nC:\\Android\\android-sdk\\platform-tools;C:\\Android\\android-sdk\\tools\r\n<\/pre>\n
Sowie unter der neu zu erstellenden Variablen ANDROID_SDK<\/b>:<\/p>\n
C:\\Android\\android-sdk\\<\/pre>\n
\"Android<\/a>
Android SDK Umgebungsvariable<\/p><\/div>\n
Schritt 8: Ausprobieren<\/h2>\n
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<\/a>:<\/p>\n
\n
    \n
  1. Set up your device to allow installation of non-Market applications. On the device, go to Settings > Applications and enable Unknown sources.<\/li>\n
  2. Turn on „USB Debugging“ on your device. On the device, go to Settings > Applications > Development and enable USB debugging.<\/li>\n<\/blockquote>\n
    Nun testen wir das. Konsole auf, und adb devices<\/i> eingeben. ADB wird von Titanium genutzt und sollte direkt gefunden werden, da es sich unter C:\\Android\\android-sdk\\platform-tools<\/i> und damit ja im PATH befindet.<\/p>\n
    Ohne angeschlossenes Handy:<\/b><\/p>\n
    \"ADB<\/a>
    ADB Devices ohne Handy<\/p><\/div>\n
    Mit angeschlossenem Handy:<\/b><\/p>\n
    \"ADB<\/a>
    ADB Devices mit Handy<\/p><\/div>\n
    Sollte ADB euer Ger\u00e4t nicht fressen wollen, liegt es an Treiberproblemen. Wenn Windows euer Handy als Massenspeicherger\u00e4t erkennt und mit seinen Default-Treibern zu Werke geht, findet ADB das Ger\u00e4t nicht mehr. In diesem Fall: Alles aus dem Ger\u00e4temanager kicken, was nach Handy aussieht und dann mit eurem Hersteller USB-Treiber<\/a> neu versuchen. Ihr seid nicht allein<\/a>.<\/p>\n
    \u00dcbrigens: Der im Android SDK ausw\u00e4hlbare USB Treiber wird euch nicht helfen, er ist nur f\u00fcr die Google Nexus Ger\u00e4te.<\/p>\n
    Schritt 9: Titanium selbst installieren<\/h2>\n
    Vorarbeit geschafft! Titanium Account erstellen (kostenlos, wie das Programm selbst)<\/a> und dann Titanium herunterladen. Aktuell (18.9.2011) ist die Version 1.72. Das Titanium Studio basiert \u00fcbrigens auf Aptana und damit auf Eclipse.<\/p>\n
    \"Titanium<\/a>
    Titanium Installation<\/p><\/div>\n
    Auch hier solltet ihr ein Verzeichnis w\u00e4hlen, welches bestenfalls keine Leerzeichen im Pfad hat. Dies gilt auch f\u00fcr den Workspace:<\/p>\n
    \"Titanium<\/a>
    Titanium Workspace<\/p><\/div>\n
    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.<\/p>\n
    \"Portable<\/a>
    Portable Git<\/p><\/div>\n
    Schlussendlich muss noch das Android SDK in Titanium verlinkt werden. Dazu unter Window -> Preferences<\/i> den Pfad zum SDK ausw\u00e4hlen und eure gew\u00fcnschte API Version als Default setzen:<\/p>\n
    \"SDK<\/a>
    SDK in Titanium<\/p><\/div>\n
    Schritt 10: Ready to go.<\/h2>\n
    Nun ist alles eingerichtet. Wir klicken beschwingt auf „create project“:<\/p>\n
    \"Neues<\/a>
    Neues Projekt<\/p><\/div>\n
    Den „new project wizard“ stellen wir so zufrieden:<\/p>\n
    \"Projekt-Wizard\"<\/a>
    Projekt-Wizard<\/p><\/div>\n
    Und ab daf\u00fcr. Auf den gr\u00fcnen Startpfeil geklickt und dann erstmal nen Kaffee machen. Android l\u00e4uft n\u00e4mlich in einem Emulator, der beim ersten Kaltstart gern mal 3 Minuten braucht. <\/p>\n
    \"Emulator<\/a>
    Emulator startet<\/p><\/div>\n
    Nach dem vollst\u00e4ndigen Start und dem Entriegeln des Emulators sollte eure Hello World<\/i> – App automatisch starten. <\/p>\n
    Links oben im Screenshot markiert ist der Start-Button f\u00fcr den Emulator. Alternativ kann auch der gewohnte, gr\u00fcne 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\u00fcndig – es gibt noch einige Kinderkrankheiten.<\/p>\n
    \"Hello,<\/a>
    Hello, World<\/p><\/div>\n
    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\u00f6ren.<\/p>\n
    Schritt 11: Fastdev!<\/h2>\n
    Einmal gestartet, den Emulator blo\u00df nicht wieder schlie\u00dfen! Titanium Studio verf\u00fcgt standardm\u00e4\u00dfig \u00fcber die Eigenschaft fastdev<\/a>, welche es euch erm\u00f6glicht, ohne erneuten Emulatorstart \u00c4nderungen an der App vorzunehmen. Dazu einfach im Codefenster die app.js<\/i> manipulieren (Tabtitel umbenennen bspw.) und erneut bei laufendem Emulator auf den Startknopf dr\u00fccken. 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 \u00c4nderungen dann auch bereits ber\u00fccksichtigt.<\/p>\n
    Schritt 12: Einstieg in die Entwicklung<\/h2>\n
    Titanium bietet das wunderbare Spielplatzprojekt Kitchen Sink<\/i> 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<\/a>. Ich muss dazusagen, dass Kitchen Sink ein Spielplatz ist und nicht immer funktionieren muss. Da scheint so ziemlich jeder dran herumbasteln zu d\u00fcrfen, weswegen nicht unbedingt garantiert ist, dass die App immer funktioniert. Bei mir kam bspw. gern der Fehler Could not find shared library<\/i>. Achja, Kitchen Sink sollte mit den Google API’s ausprobiert werden, da u.a. von google maps Gebrauch gemacht wird.<\/p>\n
    Schritt 13: Deployen aufs Ger\u00e4t<\/h2>\n
    Das oben erw\u00e4hnte USB-Debugging auf dem Handy anschalten und auch „nicht vertrauensw\u00fcrdigen Quellen“ vertrauen, Handy anst\u00f6pseln und mit adb devices<\/i> best\u00e4tigen lassen, dass das Handy gefunden wurde. Dann nur noch in Titanium auf „Android Device“ – der Rest geht wie von Geisterhand.<\/p>\n
    \"Run<\/a>
    Run on Device<\/p><\/div>\n
    Und was ist mit iOS?<\/h2>\n
    Wie uns die Kompatibilit\u00e4tsmatrix<\/a> verr\u00e4t, wird f\u00fcr die App-Entwicklung unter iOS zwingend ein Mac ben\u00f6tigt, deswegen kann ich dazu aktuell noch nichts sagen.<\/p>\n
    Weitere Ressourcen<\/h2>\n