Installation der Programmierumgebung
Um PhoneGap Applikationen für Android Geräte entwickeln zu können müssen (in dieser Reihenfolge) Eclipse Classic (Java Entwicklungsumgebung in aktueller Version 3.7.2), das Android SDK, das ADT (Android Development Tool) Plug-in (als Erweiterung der Eclipse Entwicklungsumgebung) und die aktuelle Phone Gap Version installiert werden. Die Installation von Eclipse und Android-SDK erfolgt unproblematisch über die jeweiligen Installer. Zur Installation des ADT Plug-ins verwendet man den Update Manager der Eclipse Installation. 'Help' - 'Install' - 'New Software' auswählen, 'Add' anklicken, und im Dialog 'ADT plugin' und die URL 'https://dl-ssl.google.com/android/eclipse/' eingeben. Im Listenfeld erscheint nun 'Developer Tools'. Anschließend das Kontrollkästchen anklicken und 'Next' drücken. Nach Download und Installation der erforderlichen Komponenten ist ein Neustart von Eclipse notwendig. Ist Android-SDK noch nicht für die Zusammenarbeit mit Eclipse konfiguriert, erscheint ein neuer Dialog um die fehlenden Komponenten für das Android-SDK herunterzuladen. Es muß mindestens ein API (Schnittstellen) level vollständig installiert sein.Die erste App
Die folgenden Schritte folgen im Wesentlichen der Anleitung auf der Android Developer homepage.Im Eclipse Menü muß 'New Project', und im Assistenten muß 'Android Project' gewählt werden. Anschließend einen Projekt Namen eingeben und 'Create new project in workspace' anklicken. Im nächsten Dialog muß ein package Name inklusive Namespace eingeben werden (z.B. com.phonegap.test). Im Package Explorer erscheinen daraufhin die erzeugten Projektdateien. Als nächstes kommt das PhoneGap Packet ins Spiel. Unter lib/android finden sich eine *.jar, und eine *.js Datei. Die *.jar Datei muß in das Verzeichnis '/libs' im root Verzeichnis des Projekts, die *.js Datei ins Verzeichnis '/assets/www' kopiert werden. Beide Verzeichnisse müssen manuell angelegt werden. Der xml folder des PhoneGap packetes muß in den '/res' Ordner kopiert werden. Nach einem refresh (F5) der Eclipse Ansicht erscheinen die Dateien im Project Explorer. Nun müssen einige Anpassungen in der 'com.phonegap.test' Hauptdatei im '/src' folder vorgenommen werden. Die Klassenerweiterung muß von 'activity' in 'DroidGap' umbenannt werden. Die 'setContentView()' Zeile muß in 'super.loadUrl("file:///android_asset/www/index.html");' umbenannt werden, und unter import muß 'import org.apache.cordova.*;' hinzugefügt werden. Die Zeile 'import android.app.Activity;' muß entfernt werden. Anschließend müssen die Grundeinstellungen in 'AndroidManifest.xml' verändert werden, damit PhoneGap korrekt ausgeführt wird. Die folgenden Zeilen müssen vor dem Abschnitt <application> eingefügt werden.
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECEIVE_SMS"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.READ_CONTACTS"/>
<uses-permission android:name="android.permission.WRITE_CONTACTS"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/><uses-permission android:name="android.permission.GET_ACCOUNTS"/>
<uses-permission android:name="android.permission.BROADCAST_STICKY"/> Die Zeile
android:configChanges="orientation|keyboardHidden" muß in den bestehenden activity tag eingefügt werden, und zusätzlich muß ein zweiter activity tag der Form
<activity android:name="org.apache.cordova.DroidGap"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter>
</intent-filter>
</activity>eingefügt werden.
Nun kann die zentrale index.html Datei im '/assets/www' Verzeichnis angelegt werden. Hier ein Beispiel:
<!DOCTYPE HTML>
<html>
<head>
<title>Erstes Beispiel für die Verwendung von PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
</head>
<body>
<h1>Hallo Welt, das ist meine erste App!</h1>
</body>
</html>
Simulation
Unter dem Menuebefehl 'Windows' - 'AVD Manager' kann ein sogenanntes Android Virtual Device (AVD) angelegt werden. Nach einen Klick auf 'New' muß der Name des virtuellen Gerätes, Zielplattform, SD-Karten Größe und Skin festgelegt werden. Für Android 4.0.3 (API 15) muß via Android SDK Manager 'ARM EABI v7a System Image' nachgeladen werden. Leider fährt das virtuelle Device (nach ca. 20 min Wartezeit!) regelmäßig nur bis zur Android Animation hoch, hängt sich dann aber auf. Die unten gezeigte Fehlermeldung bleibt auch nach herumspielen mit heap size, Auflösung, etc.. bestehen.
[2012-03-29 11:26:17 - test] Waiting for HOME ('android.process.acore') to be launched...
[2012-03-29 11:39:58 - test] HOME is up on device 'emulator-5554'
[2012-03-29 11:39:58 - test] Uploading test.apk onto device 'emulator-5554'
[2012-03-29 11:40:01 - test] Installing test.apk...
[2012-03-29 11:43:11 - test] Failed to install test.apk on device 'emulator-5554!
[2012-03-29 11:43:11 - test] (null)
[2012-03-29 11:43:14 - test] Launch canceled!Viel schneller kann direkt auf dem mobilen Gerät entwickelt werden.
Laden der App auf ein mobiles Gerät
Sofern es sich bei dem mobilen Gerät nicht um ein sogenanntes Android Developer Phone (ADP) handelt, (ein Nexus One, oder ein Nexus S, etc...) muß laut Android Developers Page der USB-Treiber eines OEMs installiert werden, damit das Gerät nicht nur als simple Festplatte erkannt wird. Für z.B. das HTC Desire S bietet HTC einen solchen USB-Treiber jedoch nicht explizit an. Stattdessen muß HTC Sync (eine Software zum synchronisieren von Outlook-Kontakten & -Kalendereinträgen, Web-Browser-Lesezeichen zwischen PC und Handy, Android-Apps, Fotos, Videos, Dokumente, Songs, Playlisten, usw.) installiert werden. Desweiteren sollte das neuste 'Google USB Driver Package' innerhalb Eclipse geladen werden (unter 'Window' - 'Android SDK' - 'Available Packages' - 'Extras'), um ein sicheres Erkennen des mobilen Gerätes zu gewährleisten. Das mobile Gerät selbst muß (unter 'Einstellungen' - 'Anwendungen' - 'Entwicklung') in den USB Debug Mode versetzt werden, und es müssen (unter 'Einstellungen' - 'Anwendungen') fremde (non Android market) Applikationen zugelassen werden. Desweiteren gilt es zu beachten, daß in 'AndroidManifest.xml' der tag <uses-sdk android:minSdkVersion="10"/> auf die Softwareversion des mobilen Gerätes angepaßt ist (für z.B. Android Version 2.3.5 die minimale API Version 10).Nachdem in Eclipse (unter 'Run' - 'Run Configrations') das 'target' auf 'manual' gestellt wurde, erkennt Eclipse beim Drücken auf den 'run' Knopf nun das mobile Gerät. In der Konsole erscheinen die Ausführungsbestätigungen.
[2012-03-29 22:20:22 - test] ------------------------------
[2012-03-29 22:20:22 - test] Android Launch!
[2012-03-29 22:20:22 - test] adb is running normally.
[2012-03-29 22:20:22 - test] Performing com.phonegap.test.TestActivity activity launch
[2012-03-29 22:20:31 - test] Uploading test.apk onto device 'HT159TJ02322'
[2012-03-29 22:20:31 - test] Installing test.apk...
[2012-03-29 22:20:33 - test] Success!
[2012-03-29 22:20:33 - test] Starting activity com.phonegap.test.TestActivity on device HT159TJ02322
Und zum Abschluß, noch ein bischen Java Script um dem ganzen Leben einzuhauchen
<!DOCTYPE HTML>
<html>
<head>
<title>Erstes Beispiel für die Verwendung von PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
alert("Achtung, Achtung...")
}, false);
function alertAusgabe() {
alert("Ja, Java Script ist was Feines!");
}
document.addEventListener("DOMContentLoaded", function () {
alert("hier kommt meine erste App!");
document.getElementById("magMich").
addEventListener("click", alertAusgabe, false);
}, false);
</script>
<style>
body {background: #ffc;}
div#main {
background: #ccf;
height: 150px;
width: 200px;
padding: 20px;
-webkit-border-radius: 10px;
}
</style>
</head>
<body>
<div id="main">
Hallo Welt,<br>
ich bin neu hier, also... <br>
<button id="magMich">drück mich bitte</button>
</div>
</body>
</html>
Viel Spaß bei Erstellen der eigenen Apps!
Keine Kommentare:
Kommentar veröffentlichen