Introduktion till PhoneGap Development

PhoneGap är en öppen källkod för att bygga mobila applikationer på plattformen med HTML, CSS och JavaScript. Det här är en idealisk lösning för webbutvecklare som är intresserade av mobilutveckling, eftersom det gör det möjligt för dem att utnyttja befintliga färdigheter istället för att börja skrapa med ett enhetsspecifikt kompilerat språk. Det här är också en idealisk lösning för dem som är intresserade av att skapa en applikation som kan köras på flera enheter med samma kodbas. I den här handledningen lär du dig hur du installerar PhoneGap-utvecklingsmiljön och lär dig några av de grundläggande utvecklingshänsynen på plattformen.

Presentation av PhoneGap

Program som är byggda med PhoneGap är inte bara som vanliga mobila webbplatser. PhoneGap-applikationer kan interagera med maskinvaran för mobila enheter, till exempel Accelerometer eller GPS, på sätt som inte är tillgängliga för vanliga webbapplikationer. PhoneGap-applikationer är också byggda och förpackade som inhemska applikationer, vilket innebär att de kan distribueras via Apples App Store eller Android Market.

PhoneGap stöder ett antal olika mobila plattformar, inklusive:

  • Android
  • iPhone
  • Björnbär
  • Symbian
  • handflatan

PhoneGap SDK tillhandahåller ett API som är ett abstraktionslager som ger utvecklaren tillgång till maskinvaru- och plattformsspecifika funktioner. Eftersom PhoneGap sammanfattar den inbyggda mobilplattformen kan samma kod användas på flera mobila plattformar med liten eller ingen förändring, vilket gör din ansökan tillgänglig för en bredare publik.

Maskinvarespecifika funktioner som stöds av PhoneGap API inkluderar:

  • Geolocation
  • Vibration
  • Accelerometer
  • Ljud

Krav:

För att skapa applikationer med PhoneGap måste du först installera standard SDK för de mobila plattformarna du vill rikta in för din app. Det beror på att PhoneGap faktiskt kommer att använda dessa SDK-enheter när du sammanställer din app för den plattformen.

Så, om du utvecklar för Android, behöver du:

  • Android NDK
  • Android SDK

Det finns också några ytterligare PhoenGap-specifika krav för Android-utveckling, inklusive:

  • Eclipse IDE
  • ADT-plugin för Eclipse
  • Apache Ant
  • Rubin
  • Git Bash (endast Windows)

TelefonGap Android-dokumentationen ger en komplett lista över krav med installationsinstruktioner för varje.

Om du utvecklar för iPhone behöver du:

  • En intel-baserad Apple-dator
  • iPhone SDK
  • Xcode
  • Mac OS X Snow Leopard

Läs vår Introduktion till iPhone Development-handledningen för mer information om hur du installerar en iPhone-utvecklingsmiljö.

När du har laddat ner och lossat phonegap ser du det innehåller en separat mapp för varje plattform som stöds av PhoneGap:

PhoneGap levereras med en standard applikation som kan användas för att visa upp SDK: s kraftfulla funktionalitet. Resten av denna handledning kommer att vara avsedd för att visa dig hur du konfigurerar den här standardappen för både Android och iPhone.

Bygga Default PhoneGap App för Android

För att skapa en arbetsyta för din PhoneGap-app på Android, gå till mappen "phonegap-android" på kommandotolken eller terminalen.

Kör följande kommando:

  ruby. /droidgap "[android_sdk_path]" [namn] [paketnamn] "[www]" "[sökväg]"
  • android_sdk_path - Vägen där du installerade Android SDK.
  • namn - Namnet för att ge den nya ansökan.
  • Paketnamn - Namnet du vill ge till din ansökan.
  • www - Mappen där du vill kopiera filerna i din PhoneGap-app. Lämna det här tomt för nu.
  • väg - Ansöknings arbetsytan för ditt projekt.

När det här kommandot körs kommer applikationsverktyget att genereras i den sökväg du har gett. Då kan du öppna Eclipse och först välja "New Android Project" och välj sedan "Skapa från befintlig källa" och välj det arbetsutrymme för program som skapades med föregående kommando.

När det är klart, kopiera följande filer från phonegap / phonegap-android / example-mappen till www-mappen i din arbetsyta:

  • index.html
  • Master.css

Klicka sedan på kör för att se phonegap example app i android simulatorn.

Bygga Default PhoneGap App för iPhone

För att skapa en PhoneGap-app för iPhone, gå till phonegap-iphone-mappen där du släppte upp PhoneGap-filerna.

När du är i den mappen i din terminal skriver du "Make" för att bygga PhoneGapLibInstaller.pkg.

Då måste du köra PhoneGapLibInstaller.pkg som installerar PhoneGapLib och PhoneGap-mallen i Xcode.

Då kan du starta Xcode och skapa ett "nytt projekt". Välj sedan PhoneGap-baserad applikationsmall.

Kopiera sedan följande filer till www-mappen i ditt arbetsområde:

  • index.html
  • Master.css

Kör programmet för att starta demo PhoneGap-appen i iPhone Simulator.

Bakom kulisserna (i kod)

Så nu har du demo PhoneGap app som körs på din simulator. Du kan leka med appen och se hur den fungerar. Den här grundläggande appen visar allmänt användandet av de olika API: erna som exponeras
av PhoneGap SDK.

Fortsätt och öppna index.htm. Överst på sidan ser du följande kod:

 PhoneGap  

Det första är en länk till master.css som ger all stil till knappen du såg på skärmen.

Den andra raden innehåller phonegap.js som genereras när vi har skapat en arbetsyta för vår applikation. Den här filen gör allt för att kalla de inbyggda API-erna via JavaScript.

Nu om du bläddrar till slutet av index.html ser du följande kod:

  

Välkommen till PhoneGap!

den här filen finns på tillgångar / index.html

Plattform:  

Version:  

UUID:  

X:
 
Y:
 
Z:
 
Watch Accelerometer Hämta platssamtal 411 Pipa Vibrate Få en bild Få telefonens kontakter

Denna HTML skapar länkarna som visas som knappar på skärmen på mobilenheten. Det finns onclick handlers kopplade till dessa länkar som kallar JavaScript-funktioner som definieras i samma fil som ansvarar för att ringa PhoneGap API för att interagera med den inbyggda maskinvaran.

Den första funktionen som ska kallas i JavaScript är init (). Det här registrerar vår JavaScript-funktion enhetsinformation till PhoneGap-händelsen.

Deviceready Event

De deviceready Eventen avfyras av PhoneGap när alla SDK-komponenter är inlagda korrekt. Det är därför vettigt att JavaScript APIs i PhoneGap ska användas efter det att händelsen brinner.

Du kan läsa mer om deviceready i API-dokumentationen.

Enhetsobjekt

Enhetsobjektet innehåller grundläggande information om enheten som appen körs på, som plattformen, versionen etc. Dessa värden kan användas för att utföra enhetsspecifika kontroller i din kod.

Du kan läsa mer om enhetens objekt i den officiella API-dokumentationen.

Accelerometer

Den första länken i kroppen kallar funktionen watchAccel:

 Watch Accelerometer

Denna del av API: n kollar och skickar meddelanden om enhetsacceleration med jämna mellanrum. Den returnerar nuvarande acceleration av enheten genom att passera x-, y- och z-koordinaterna till callBackonSuccess funktion registrerad. Värdena x, y, z kan sedan användas i applikationen för att svara på rörelse.

Läs mer om accelerometern här.

GPS och positionering

Den andra länken i kroppen är ansvarig för att samla den aktuella enhetens plats:

 Få plats

De callBackonSuccessfunktionen skickas ett objekt som innehåller GPS-koordinaterna som kan användas i din applikation för att utföra platsbaserad bearbetning.

Du kan läsa mer om Geolocation API.

Ringa

Den tredje raden i kroppen kommer att starta enheten dialer med numret "411":

 Ring 411

Enhetsmeddelanden

De två följande raderna i kroppen brukar pipa eller vibrera en enhet:

 Beep Vibrate

Läs mer om pip och vibrera i de officiella dokumenten.

Använda kameran

Nästa rad i kroppen kallar funktionen show_pic att ta ett foto:

 Få en bild

Denna api lanserar kamerans kameraapplikation och väntar
för användaren att fånga en bild.

Läs mer om att ta bilder i den officiella API-dokumentationen.

Slutsats

PhoneGap är ett mycket kraftfullt ramverk för plattformsutveckling. Om du redan har en stark webbutvecklingsbakgrund och är intresserad av att skapa appar för en eller flera enheter, är PhoneGap säkert en stark konkurrent att överväga!