Heute möchte ich euch zeigen wie man mit PhoneGap und Eclipse eine "native" App programmiert.
Da ich mich selber mit diesem Thema sehr beschäftige, hoffe ich das ich mit diesem Tutorial euch diese art der App Programmierung näher bringen kann.
Vorraussetzung:
- PhoneGap - Download
- Eclipse
- Erste Eclipse Android Erfahrungen ( Hello World reicht vollkommen )
- HTML Grunderfahrungen
Schritt 1:
Erstellen eines Android Projekt unter Eclipse.
Was ihr da eingeben müsst sollte selbst erklärend sein.
[Blockierte Grafik: http://thunderfrog.de/phonegap/phonegap_1.png]
Schritt 2:
Wir entpacken PhoneGap in Verzeichnis eurer Wahl.
Folgende Dateien brauchen wir:
- cordova-2.6.0.jar
- cordova-2.6.0.js
- XML Ordner
Das alles entnehmen wir aus dem Ordner: lib -> android
Nun sag ich euch wo die Dateien bzw. der Ordner hin kommen.
- den XML Ordner -> res Verzeichnis unserer Android App
- cordova-2.6.0.jr -> kommt im libs Ordner und wird zum Build Path hinzugefügt
- cordova-2.6.0.js -> Diese Scriptdatei verschieben wir in einen neuen Ordner den wir jetzt erstellen
[Blockierte Grafik: http://thunderfrog.de/phonegap/phonegap_3.png]
[Blockierte Grafik: http://thunderfrog.de/phonegap/phonegap_3_1_1.png]
[Blockierte Grafik: http://thunderfrog.de/phonegap/phonegap_3_1.png]
Um für PhoneGap eine App zu programmieren müssen wir noch einen Ordner im Ordner assets erstellen.
Dieser Order muss www heißen. Dort packen wir die cordova-2.6.0.js Datei rein.
Da ich Ordnung und Struktur mag sieht bei mir der www Ordner so aus:
- css <- Dort lagere ich spätere CSS Styles
- images <- Wie der Name schon sagt, kommen hier die Bilder,Icons und andere Grafiken rein
- js / lib <- je nach Aufwendigkeit der App heißt der Ordner in dem die JS Scripte kommen js bzw. lib
Schritt 3:
Nun erstellen wir quasi das Interface der App. Dazu erstellen wir eine HTML Datei und nennen diese index.html. Gepeichert wird diese wie im Bild oben im www Root Ordner.
In dieser HTML Datei können wir alles an HTML befehlen nutzten die es gibt.
ACHTUNG: PHP WIRD NICHT UNTERSTÜTZT -> DAZU FOLGT NOCH EIN TUTORIAL
[Blockierte Grafik: http://thunderfrog.de/phonegap/phonegap_5.png]
Im HEAD Bereich setzten wir die Links zu den Styles und zu den JS Dateien.
Schritt 4:
Jetzt geht es darum unserer App auch zu sagen das wir PhoneGab benutzten.
Dazu bearbeiten wir die MainActivity.java
[Blockierte Grafik: http://thunderfrog.de/phonegap/phonegap_6.png]
Dort müssen wir einen Import auf cordova setzten und die ActivityClass anpassen.
In der onCreate funktion sagen wir noch das wir beim Laden die index.html laden wollen.
Die AndroidManifest.xml muss auch noch kurz angepasst werden.
[Blockierte Grafik: http://thunderfrog.de/phonegap/PhoneGap_7.png] Man achte auf die uses-permission!
Schritt 5:
Nun müssen wir nur noch unsere App testen. Ganz einfach unter Run Testen.
Es sollte nun alles klappen und ein fröhliches: Herzlich Willkommen bei PhoneGap erscheinen.
[Blockierte Grafik: http://thunderfrog.de/phonegap/HalloPhoneGap.png]
Ich hoffe ich konnte euch PhoneGap ein bisschen näher bringen.
Und bitte nehmt Rücksicht, es ist mein erstes Tutorial =)
Würde gerne noch mehr veröffentlichen die dann in Richtung mit PHP arbeiten, Datenbanktechnik mySQL und Design mit JqueryMobile gehen.
Weiter so, die nächsten Tutorials würd ich mir ebenfalls angucken.