PhoneGap er et open source rammeverk for å bygge mobile plattformplattformer med HTML, CSS og JavaScript. Dette er en ideell løsning for webutviklere som er interessert i mobilutvikling, slik at de kan utnytte eksisterende ferdigheter i stedet for å starte skjemaet med et enhetsspesifikt kompilert språk. Dette er også en ideell løsning for de som er interessert i å lage et program som kan kjøre på flere enheter med samme kodebase. I denne opplæringen lærer du hvordan du konfigurerer PhoneGap utviklingsmiljøet og lærer noen av de grunnleggende utviklingshensynene til plattformen.

Introduserer PhoneGap

Programmer bygget med PhoneGap er ikke akkurat som vanlige mobilnettsteder. PhoneGap-applikasjoner kan kommunisere med maskinvare for mobilenheter, for eksempel Accelerometer eller GPS, på måter som ikke er tilgjengelige for vanlige webapplikasjoner. PhoneGap-applikasjoner er også bygget og pakket som innfødte applikasjoner, noe som betyr at de kan distribueres gjennom Apple App Store eller Android Market.

PhoneGap støtter en rekke forskjellige mobile plattformer, inkludert:

• Android
• iPhone
• bjørnebær
• Symbian
• Palm

PhoneGap SDK gir en API som er et abstraksjonslag som gir utvikleren tilgang til maskinvare- og plattformspesifikke funksjoner. Som PhoneGap abstraherer den innfødte mobilplattformen, kan den samme koden brukes på flere mobile plattformer med liten eller ingen endring, slik at søknaden din blir tilgjengelig for et bredere publikum.

Maskinvare-spesifikke funksjoner støttet av PhoneGap API inkluderer:

• geolocation
• vibrasjon
• akselerometer
• Lyd

Krav:

For å kunne lage programmer med PhoneGap må du først installere standard SDK for mobilplattformene du vil målrette mot appen din. Dette skyldes at PhoneGap faktisk vil bruke disse SDK-ene når du kompilerer appen din for den plattformen.

Så, hvis du utvikler for Android, trenger du:

• Android NDK
• Android SDK

Det er også noen ekstra PhoenGap-spesifikke krav til Android-utvikling, inkludert:

• Eclipse IDE
• ADT-plugin for Eclipse
• Apache Ant
• Rubin
• Git Bash (kun Windows)

TelefonGap Android-dokumentasjonen gir en komplett liste over krav med installeringsinstruksjoner for hver.

Hvis du utvikler for iPhone, trenger du:

• En intel-basert Apple Computer
• iPhone SDK
• Xcode
• Mac OS X Snow Leopard

Les vår introduksjon til iPhone Development-veiledningen for mer informasjon om hvordan du konfigurerer et iPhone-utviklingsmiljø.

Når du har lastet ned og unzipped phonegap, vil du se at den inneholder en egen mappe for hver plattform som støttes av PhoneGap:

PhoneGap leveres med et standardprogram som kan brukes til å vise frem den kraftige funksjonaliteten til SDK. Resten av denne opplæringen vil være dedikert til å vise deg hvordan du konfigurerer denne standardappen for både Android og iPhone.

Bygg standard PhoneGap-appen for Android

For å opprette et arbeidsområde for PhoneGap-appen din på android, gå til "phonegap-android" -mappen på ledeteksten eller terminalen.

Kjør følgende kommando:

  ruby. /droidgap "[android_sdk_path]" [navn] [pakkenavn] "[www]" "[sti]"

• android_sdk_path - Sti hvor du installerte Android SDK.
• Navn - Navnet til å gi den nye søknaden.
• pakke - Navnet du vil gi til søknaden din.
• www - Mappen der du vil kopiere filene til PhoneGap-appen din. La dette være tomt for nå.
• sti - Søknads arbeidsområdet for prosjektet ditt.

Når denne kommandoen kjører, blir applikasjons arbeidsområdet generert i banen du har gitt. Deretter kan du åpne Eclipse og først velge "New Android Project" og deretter velge "Create From Existing Source" og velg applikasjons arbeidsplass som ble opprettet med den forrige kommandoen.

Når det er gjort, kopier du følgende filer fra phonegap / phonegap-android / example-mappen til www-mappen i arbeidsområdet ditt:

• index.html
• Master.css

Klikk deretter på Run for å se phonegap eksempel-appen i Android-simulatoren.

Bygg standard PhoneGap App for iPhone

For å opprette en PhoneGap-app for iPhone, gå til phonegap-iphone-mappen der du pakket ut PhoneGap-filene.

Når du er i den mappen i terminalen skriver du "Make" for å bygge PhoneGapLibInstaller.pkg.

Da må du kjøre PhoneGapLibInstaller.pkg som vil installere PhoneGapLib og PhoneGap-malen i Xcode.

Deretter kan du starte Xcode og opprette et nytt prosjekt. Velg deretter PhoneGap-basert applikasjonsmal.

Deretter kopierer du følgende filer til www-mappen på arbeidsområdet ditt:

• index.html
• Master.css

Kjør programmet for å starte demo PhoneGap-appen i iPhone Simulator.

Bak scenene (i kode)

Så nå har du demo PhoneGap app som kjører på simulatoren din. Du kan leke med appen og se hvordan den utfører. Denne grunnleggende appen viser generell bruk av de forskjellige API-ene
ved PhoneGap SDK.

Gå videre og åpne index.htm. Øverst på siden vil du se følgende kode:

Det første er en lenke til master.css som gir all stil til knappen du så på skjermen.

Den andre linjen inkluderer phonegap.js som genereres når vi har opprettet et arbeidsområde for applikasjonen vår. Denne filen gjør alt det magiske ved å ringe de innfødte APIene via JavaScript.

Nå, hvis du ruller til slutten av index.html, ser du følgende kode:

  
Velkommen til PhoneGap!
 
denne filen er plassert på eiendeler / index.html
 
 
Plattform:  
 
Versjon:  
 
UUID:  
 
 
 
X:
 
 
Y:
 
 
Z:
 
 
 Watch Accelerometer Få plassering Ring 411 Pip Vibrate Få et bilde Få telefonens kontakter 
  
 

Denne HTML oppretter koblingene som vises som knapper på mobilenhetsskjermen. Det er onclick-håndtere knyttet til disse koblingene som kaller JavaScript-funksjoner som er definert i samme fil som er ansvarlige for å ringe PhoneGap API for å samhandle med enhetens innfødte maskinvare.

Den første funksjonen som skal kalles i JavaScript er init (). Dette vil registrere vår JavaScript-funksjon enhetsinformasjon til PhoneGap-hendelsen.

Deviceready Event

De deviceready Hendelsen avfyres av PhoneGap når alle SDK-komponentene er plassert riktig. Det er fornuftig da at JavaScript APIs av PhoneGap skal brukes etter at denne hendelsen brenner.

Du kan lese mer om deviceready i API-dokumentasjonen.

Enhetsobjekt

Enhetsobjektet inneholder grunnleggende informasjon om enheten enheten kjører på, som plattformen, versjonen etc. Disse verdiene kan brukes til å utføre enhetsspesifikke kontroller i koden din..

Du kan lese mer om enhetens objekt i den offisielle API-dokumentasjonen.

akselerometer

Den første lenken i kroppen kaller watchAccel-funksjonen:

 Watch Accelerometer

Denne delen av API-en overvåker og sender meldinger om enhetsakselerasjon med jevne mellomrom. Den returnerer nåværende akselerasjon av enheten ved å sende x-, y- og z-koordinatene til callBackonSuccess funksjon registrert. X, y, z verdiene kan da brukes i applikasjonen for å svare på bevegelse.

Les mer om akselerometeret her.

GPS og posisjonering

Den andre lenken i kroppen er ansvarlig for å samle den nåværende enhetens plassering:

 Få plassering

De callBackonSuccessfunksjonen er bestått et objekt som inneholder GPS koordinatene som kan brukes i søknaden din for å utføre lokasjonsbasert behandling.

Du kan lese mer om Geolocation API.

Ringe opp

Den tredje linjen i kroppen vil starte enheten dialer med nummeret "411":

 Ring 411

Enhetsvarsler

De neste to linjene i kroppen brukes til å pipe eller vibrere en enhet:

 Bip vibrerer

Les mer om pip og vibrere i de offisielle dokumentene.

Bruke kameraet

Neste linje i kroppen kaller funksjonen show_pic å ta et bilde:

 Få et bilde

Denne api lanserer kameraets kameraapplikasjon og venter
for brukeren å fange et bilde.

Les mer om å ta bilder i den offisielle API-dokumentasjonen.

Konklusjon

PhoneGap er et meget kraftig rammeverk for utvikling av tversplattform. Hvis du allerede har en sterk webutviklingsbakgrunn og er interessert i å bygge programmer for en eller flere enheter, er PhoneGap sikkert en sterk konkurrent å vurdere!