Share
Vill du lära dig hur du använder PhoneGap, men vet inte vart du ska komma igång? Följ med oss när vi sätter samman "Sculder", inte bara en hyllning till en utmärkt science fiction-tv-serie, utan en fulländad inbyggd mobilapplikation för den troende i dig!
I denna serie bygger vi en mobilapplikation med hjälp av några av funktionerna i PhoneGap. Vi kommer att gå från installationen av SDK till utplacering i appbutikerna på de två stora plattformarna: iOS och Android. Begrepp som omfattas av denna serie kommer att omfatta åtkomst till enhetskameran, lokal lagring och geolokalisering.
I den här första delen tar vi en snabb titt på vad PhoneGap faktiskt är och vad du kan använda det för, och sedan tittar på installationen av PhoneGap-ramen och SDK-erna som vi behöver för att testa på OS X, Windows och Linux miljöer. Vi kommer då att bygga och köra den mycket enkla "Hello World" PhoneGap-applikationen för att se till att vi har allt som körs korrekt.
Nu har du förmodligen en bra bild av vad PhoneGap är och du har nog även använt det, men om inte, här är en kort översikt.
PhoneGap föddes från iPhoneDevCamp 2008, där den skapades helt enkelt för att det inte fanns många Objective-C-utvecklare jämfört med webbutvecklare. Utmaningen var att sammanställa en ram som skulle tillåta webbutvecklare att använda HTML, CSS och JavaScript för att koda program som kan utnyttja den mobila enhetens inbyggda funktionalitet, till exempel funktionerna Kamera, Storage och GeoLocation. Initialt byggt för att fungera med iPhone, inom ett år växte PhoneGap och började stödja Android också. Nu, nästan 4 år gammal, är PhoneGap en av de mest talade om verktygsverktyg för utveckling av mobila applikationer och stöder ett mycket större utbud av mobila enheter, inklusive iOS, Android, Blackberry, Symbian, webOS, WP7 och Bada..
Vid tidpunkten för publiceringen (t.ex. januari 2012) stödjer ramverket för närvarande Accelerometer, kamera, kompass, kontakter, fil, Geolocation, Media, Network, Notifications (Alert, Sound och Vibrate) och Storage Device APIs. Det finns fullt stöd för alla dessa funktioner i de nyare iOS-enheterna (3GS +) och Android. För mer information om support för Blackberry, WP7, Sybian, webOS och Bada-enheter, kontrollera den officiella kompatibilitetstabellen.
Trots tvärtom är PhoneGap inte en skriv en gång, använd lösningen överallt (även om den kommer nära). Det är verkligen en plattformsramverkram som kan köras på många enheter som stöds, men för att kunna distribueras ska du troligtvis behöva testa och anpassa din kod på var och en av målenheterna.
Om du vill utveckla för iOS behöver du en Intel-baserad dator som kör MAC OS X version 10.6 eller senare. Du behöver också den senaste versionen av Xcode (version 4 vid skrivningstillfället) och iOS SDK för testning. För att ladda ner Xcode måste du registrera dig som medlem av Apple Developer Program.
Gå till www.phonegap.com och i det övre vänstra hörnet kommer du att se en knapp för att ladda ner den senaste versionen av PhoneGap. Om du klickar på det här kommer du att hämta nedladdningen av en ZIP-fil som innehåller allt du behöver för att komma igång.
Unzipping filen kommer att ge dig flera mappar, vardera märkta med det riktade operativsystemet. När vi installerar för iOS öppnar du iOS-mappen och monterar dmg fil. De dmg innehåller a pkg fil. Klicka här och gå igenom installationsprocessen. När du har slutfört installationen kan du fortsätta och starta upp Xcode och när du kommer att skapa ett nytt projekt borde du kunna välja PhoneGap som en mall.
Vi kan nu ställa in alternativen för vårt projekt och platsen för våra filer. När vi har gjort det, är vårt projekt byggt i den angivna katalogen och Xcode presenterar oss med vår sammanfattande sida. Här kan vi enkelt lägga till appikoner och ändra ett par inställningar när vår applikation är klar att packas och skickas till appbutiken - för nu kommer vi bara fortsätta och slå RUN i det övre vänstra hörnet. Detta kommer att kompilera appen och skjuta upp iOS-simulatorn.
Om du försöker detta nu, efter stänkskärmen bör du få ett fel som anger att index.html filen kunde inte hittas. Ingen anledning att oroa sig, det är faktiskt vad som ska hända. Vi måste gå till arbetskatalogen för projektet (Högerklicka på projektet i Xcode och klicka på visa i Finder) och där ser vi en www katalog i projektrotten.
Vi behöver nu dra den katalogen INTO Xcode och lägga till den i projektet.
I alternativen för dessa filer måste vi se till att vi väljer "Skapa mappreferens för eventuella extra mappar" och klicka sedan på Slutför. Vår www katalog läggs nu till projektet. Vi kan nu klicka springa igen och du kommer att få den grundläggande "Hello World" för PhoneGap.
De www katalogen kommer nu att vara vår rotkatalog för appen. Det är här vi kommer att behålla någon HTML, CSS eller JavaScript som kommer att användas av vår app, precis som du skulle förvänta dig för någon annan webbapplikation. De phonegap.js filen är JavaScript-filen som kommer att fungera som vårt API, vilket ger oss tillgång till de inbyggda API-er som vi kanske vill använda i vår ansökan senare.
Till skillnad från att utveckla för iOS, kan du utveckla för Android på vilken plattform som helst. Även om det rekommenderas att du använder Eclipse IDE med ett par plugins, finns det ett alternativt sätt att använda PhoneGap (via Command Line), men det är bra om du börjar med att göra det längre med en IDE och sedan prova Kommandoraden långt och se vilken du föredrar. I den här handledningen använder vi IDE-metoden.
Först måste du gå till Eclipse-webbplatsen och ladda ner IDE för din valfria plattform. Den klassiska versionen är bra för vad vi behöver. När du har laddat ner, starta Eclipse och vi måste installera ADT-plugin. Du måste gå till Hjälp => Installera ny programvara och klicka på Lägg till i högra hörnet.
Därefter kan du ange ADT-plugin för plugin-namnet och ange följande för repository-URL.
https://dl-ssl.google.com/android/eclipse/
Pluggen kommer att hämtas och installeras och Eclipse uppmanar dig att starta om. När det omstartas kan du skapa ett nytt Android-projekt.
Du kommer då att gå igenom projektguiden där du kommer att ge din app ett namn och ställa in arbetsytan. Du kommer även att välja din SDK för byggmålet - du kan välja den senaste för tillfället (4.0.3 vid skrivetid). Gå igenom resten av guiden och ställ in den återstående informationen för appen.
Du kommer att bli ombedd om du vill ladda ner och installera de nödvändiga Android-SDK: n på den här tiden. Om du redan har dem på din maskin, fortsätt och bläddra till mappen. Om inte, kan du låta Eclipse ladda ner dem för dig.
Inom programmets rotkatalog måste vi skapa en katalog som heter lock och i katalogen för tillgångar skapa en annan katalog som heter www. Nu, tillbaka till den ursprungliga PhoneGap-filen som hämtades och i Android-mappen måste du kopiera phonegap.jar fil till libs katalog som vi skapade och sedan kopiera phonegap.js till www katalog.
Din struktur ska se ut som följer:
Inom vårt www katalog, skapa en index.html fil och släpp i koden nedan:
mobiletuts phonegap Välkommen till PhoneGap
Redigera tillgångar / www / index.html
Nu behöver vi göra några ändringar i den huvudsakliga Java-filen som finns i src mapp. Först måste vi byta klassen " förlänga från Aktivitet till DroidGap.. Vi behöver då byta ut setContentView (R.layout.main); med super.loadUrl ( "file: ///android_asset/www/index.html"); och lägg sedan till importera com.phonegap. *; efter de två första importen. Din Java-fil vid slutförandet borde se något så här:
paketet com.shaundunneTest; importera android.app.Activity; importera android.os.Bundle; importera com.phonegap. *; offentlig klass TestActivity utökar DroidGap / ** Kallas när aktiviteten skapas först. * / @Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); super.loadUrl ( "file: ///android_asset/www/index.html");
Eclipse kommer sannolikt att kasta några fel nu, bara högerklicka på libs-mappen och gå till Bygga sökväg => Konfigurera byggväg och sedan på fliken Bibliotek, klicka på lägg till JAR och fortsätt och inkludera phonegap.jar fil. Detta borde rensa felet. Nu måste vi lägga till några behörigheter till manifestfilen för att säkerställa att PhoneGap körs korrekt.
Öppna upp AndroidManifest.xml fil och lägg till följande före Ansökan inträde:
På aktivitetsetiketten lägger du till följande attribut:
android: configChanges = "orientering | keyboardHidden"
Detta säkerställer att appen inte laddar om index.html när som helst händelserna händer.
Den sista sak att göra är att kopiera xml mapp från PhoneGap-hämtningen till res katalog i projektet. Du är nu redo att köra detta i emulatorn.
Du kan högerklicka på ditt projekt nu och Spring som en Android-applikation. Om du inte har konfigurerat en enhet ändå blir du ombedd att göra det, om du behöver hjälp med att göra det här, kolla dokumentationen här
Och det är allt du behöver för att komma igång på Android!
Hittills har vi bara täckt två av de mobila plattformarna för vår applikation, men det är troligt att vi skulle vilja distribuera över alla plattformar som PhoneGap stöder, eller hur? Tja, hellre än att gå igenom att installera några fler SDK-filer, en annan IDE med några fler plugins och installera en virtuell maskin för testning, kommer denna serie att använda PhoneGap: Build-tjänsten när det är dags att distribuera appen.
PhoneGap: Build, som det står på webbplatsen, är en molnbaserad tjänst som kommer att ta en zippad HTML / CSS / JS-applikation och skicka tillbaka programmet, kompilerat och redo att distribueras (en försiktighet: för Android, iOS , och BB du behöver nödvändiga certifikat för distribution). PhoneGap: Byggnaden är i BETA för tillfället, och medan det finns betalade alternativ (som är värda att ha om du kommer att använda det regelbundet), finns det ett gratis alternativ som tillåter en privat applikation. Det är allt vi behöver för vårt projekt ett ögonblick, så fortsätt och registrera dig nu eftersom vi kommer att använda Build-tjänsten i slutet av serien.
Vi har nu vår miljö redo för utveckling med PhoneGap. I nästa del av denna serie börjar vi titta på API: erna som PhoneGap tillåter oss att få åtkomst till och hur du använder dem i vår app.
Accentsconagua