[Tutorial] - Erster Start mit PhoneGap

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [Tutorial] - Erster Start mit PhoneGap

    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 ) 8)
    • 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.
    :Android: Grüße aus dem Ruhrpott

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von ThunderFrog ()

  • ThunderFrog schrieb:

    Desweiteren bin ich nun weg von PhoneGap (Cordova) und entwickel Nativ.

    Magst Du eventuell (in einem eigenen Thread) Deine Erfahrungen diesbezüglich mitteilen und Deine Entscheidung begründen?
    Ich finde es ziemlich spannend. :)
    Je mehr Käse, desto mehr Löcher.
    Je mehr Löcher, desto weniger Käse.
    Daraus folgt: je mehr Käse, desto weniger Käse.

    »Dies ist ein Forum. Schreibt Eure Fragen in das Forum, nicht per PN!«
  • Jetzt mal echt schande über mein Haupt.
    Ich versuche die Bilder so gut wie es geht nochmal nach zu stellen.
    Das Problem ist momentan das ich nicht mehr mit Ecplise arbeite sondern auf NetBeans umgestellt habe.

    Da habe ich die Android Entwicklung noch nicht getestet.

    Bin Beruflich momentan voll mit arbeit.
    Versuche aber wie gesagt die Bilder zu ersetzten.

    Gruß
    :Android: Grüße aus dem Ruhrpott