Share
Vil du lære å bruke PhoneGap, men vet ikke hvor du skal komme i gang? Bli med oss når vi setter sammen "Sculder", ikke bare en hyllest til en utmerket science fiction-tv-serie, men en fullverdig, mobil applikasjon for den troende i deg!
I denne serien skal vi bygge en mobil applikasjon ved hjelp av noen av funksjonene i PhoneGap. Vi går fra installasjon av SDK til distribusjon i app-butikkene på de to store plattformene: iOS og Android. Konsepter som omfattes av denne serien, inkluderer tilgang til enhetskameraet, lokal lagring og geolokalisering.
I denne første delen tar vi en rask titt på hva PhoneGap egentlig er og hva du kan bruke den til, og deretter ser du på installasjonen av PhoneGap-rammen og SDK-er som vi trenger for testing på OS X, Windows og Linux. miljøer. Vi vil da bygge og kjøre den veldig enkle "Hello World" PhoneGap-applikasjonen for å sikre at vi har alt som kjører riktig.
Nå har du sannsynligvis en god ide om hva PhoneGap er, og du har sikkert brukt det, men hvis ikke, her er en kort oversikt.
PhoneGap ble født ut av iPhoneDevCamp i 2008, der den ble opprettet bare fordi det ikke var mange Objective-C-utviklere i forhold til webutviklere. Utfordringen var å sette sammen et rammeverk som gjør at webutviklere kan bruke HTML, CSS og JavaScript til å kode programmer som kan dra nytte av den opprinnelige funksjonaliteten til mobilenheten, for eksempel funksjonene Kamera, Storage og GeoLocation. Opprinnelig bygget for å jobbe med iPhone, i løpet av et år vokste PhoneGap og begynte å støtte Android også. Nå, nesten 4 år gammel, er PhoneGap en av de mest omtalte toolkits for utvikling av mobile applikasjoner og støtter et mye bredere utvalg av mobile enheter, inkludert iOS, Android, Blackberry, Symbian, webOS, WP7 og Bada..
Ved publiseringstidspunktet (for eksempel januar 2012) støtter rammene for øyeblikket akselerator-, kamera-, kompass-, kontakt-, fil-, geolokal-, media-, nettverks-, varslings-, varslings-, lyd- og vibrations- og lagringsenhets-APIer. Det er full støtte for alle disse funksjonene i nyere iOS-enheter (3GS +) og Android. For mer informasjon om støtte for Blackberry, WP7, Sybian, webOS og Bada-enheter, sjekk den offisielle kompatibilitetstabellen.
Til tross for tvil, er PhoneGap ikke en skrive en gang, distribuere overalt løsning (selv om det kommer nær). Det er absolutt en plattformsramme som kan kjøre på mange støttede enheter, men for å kunne distribuere vellykket må du sannsynligvis teste og justere koden på hver av målenhetene.
Hvis du vil utvikle for iOS, trenger du en Intel-basert datamaskin som kjører Mac OS X versjon 10.6 eller nyere. Du vil også trenge den nyeste versjonen av Xcode (versjon 4 på skrivingstidspunktet) og iOS SDK for testing. For å laste ned Xcode må du registrere deg som medlem av Apple Developer Program.
Gå over til www.phonegap.com og i øverste venstre hjørne vil du se en knapp for å laste ned den nyeste versjonen av PhoneGap. Hvis du klikker på dette, vil du laste ned en ZIP-fil som inneholder alt du trenger for å komme i gang.
Unzipping filen vil gi deg en rekke mapper, hver merket med det målrettede operativsystemet. Når vi installerer for iOS, åpner du iOS-mappen og monterer dmg fil. De dmg inneholder a pkg fil. Klikk dette og gå gjennom installasjonsprosessen. Etter at du har fullført installasjonen, kan du gå videre og starte opp Xcode, og når du kommer til å lage et nytt prosjekt, bør du kunne velge PhoneGap som en mal.
Vi kan nå angi alternativene for vårt prosjekt og plasseringen av våre filer. Når vi har gjort det, er prosjektet vårt bygd i katalogen som er spesifisert, og Xcode presenterer oss med vår sammendragsside. Her kan vi enkelt legge til appikoner og endre et par innstillinger når applikasjonen vår er klar til å bli pakket og sendt til appbutikken. For nå vil vi bare fortsette og trykke RUN i øverste venstre hjørne. Dette vil kompilere appen og brann opp iOS-simulatoren.
Hvis du prøver dette nå, bør du få en feil under strykeskjermen om at index.html filen kunne ikke bli funnet. Du trenger ikke å bekymre deg, dette er faktisk hva som skal skje. Vi må gå til arbeidskatalogen for prosjektet (Høyreklikk på prosjektet i Xcode og klikk på show i finder) og der vil vi se en www katalog i prosjektroten.
Vi trenger nå å dra den katalogen INTO Xcode og legge den til prosjektet.
I alternativene for disse filene må vi sørge for at vi velger "Opprett mappereferanse for eventuelle ekstra mapper", og klikk deretter på slutt. Våre www katalogen er nå lagt til i prosjektet. Vi kan nå klikke på kjør igjen og du får den grunnleggende "Hello World" for PhoneGap.
De www katalogen vil nå være vår rotkatalog for appen. Dette er hvor vi vil beholde noen HTML, CSS eller JavaScript som skal brukes av vår app, akkurat som du ville forvente for andre webapplikasjoner. De phonegap.js filen er JavaScript-filen som vil fungere som vår API, noe som gir oss tilgang til de innfødte APIene vi kanskje vil bruke i vår søknad senere.
I motsetning til utvikling for iOS, er du i stand til å utvikle for Android på hvilken som helst plattform. Selv om det anbefales at du bruker Eclipse IDE med et par plugins, er det en annen måte å bruke PhoneGap (via Command Line), men det er bra hvis du begynner med å gjøre det lengre veien først med en IDE og deretter prøve ut kommandolinjen og se hvilken du foretrekker. I denne opplæringen bruker vi IDE-metoden.
Først må du gå til Eclipse-nettstedet og laste ned IDE-en for din valgte plattform. Den klassiske versjonen er bra for det vi trenger. Når du er lastet ned, start Eclipse, og vi må installere ADT-pluginet. Du må gå til Hjelp => Installer ny programvare og klikk legg til i høyre hjørne.
Du kan da legge inn ADT-plugin for pluginnavnet og skrive inn følgende for depot-nettadressen.
https://dl-ssl.google.com/android/eclipse/
Pluggen lastes ned og installeres og Eclipse vil be deg om å starte på nytt. Når det er startet på nytt, kan du opprette et nytt Android-prosjekt.
Du vil da gå gjennom prosjektguiden der du vil gi din app et navn og sette opp arbeidsområdet. Du vil også velge ditt SDK for byggemålet - du kan velge den siste for nå (4.0.3 på skrivingstidspunktet). Gå gjennom resten av veiviseren og sett opp den gjenværende informasjonen for appen.
Du vil bli spurt om du vil laste ned og installere de nødvendige Android SDKene på dette tidspunktet. Hvis du allerede har dem på maskinen, går du videre og blar til mappen. Hvis ikke, kan du la Eclipse laste dem ned for deg.
I rotkatalogen av programmet må vi opprette en katalog som heter lokkene og i aktivitetsmappen, opprett en annen katalog som heter www. Nå, tilbake til den opprinnelige PhoneGap-filen som ble lastet ned, og i Android-mappen må du kopiere phonegap.jar fil til libs katalog vi opprettet og kopierer deretter phonegap.js til www katalog.
Din struktur bør se ut som følgende:
Innenfor vår www katalog, opprett en index.html fil og slipp i koden under:
mobiletuts phonegap Velkommen til PhoneGap
Rediger eiendeler / www / index.html
Nå må vi gjøre noen endringer i hoved Java-filen som finnes i src mappe. Først må vi endre klassen ' forlenge fra Aktivitet til DroidGap.. Vi må da bytte ut setContentView (R.layout.main); med super.loadUrl ( "file: ///android_asset/www/index.html"); og deretter legge til importer com.phonegap. *; etter de to første importene. Din Java-fil ved ferdigstillelse bør se slik ut:
pakke com.shaundunneTest; importer android.app.Activity; importere android.os.Bundle; importer com.phonegap. *; offentlig klasse TestActivity utvider DroidGap / ** Kalt når aktiviteten er først opprettet. * / @Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); super.loadUrl ( "file: ///android_asset/www/index.html");
Eclipse vil trolig være å kaste noen feil nå, bare høyreklikk på libs-mappen og gå til Bygg sti => Konfigurer byggesti og deretter i biblioteket kategorien, klikk legg til JAR og gå videre og ta med phonegap.jar fil. Dette bør fjerne feilene. Nå må vi legge til noen tillatelser til manifestfilen for å sikre at PhoneGap kjøres riktig.
Åpne opp AndroidManifest.xml fil og legg til følgende før applikasjon inngang:
På aktivitetsmerket legger du til følgende attributt:
android: configChanges = "orientering | keyboardHidden"
Dette sikrer at appen ikke laster på nytt index.html når som helst disse hendelsene skjer.
Den siste tingen å gjøre er å kopiere xml mappe fra PhoneGap nedlasting til res katalog i prosjektet. Du er nå klar til å kjøre dette i emulatoren.
Du kan høyreklikke prosjektet nå og løp så et Android-program. Hvis du ikke har konfigurert en enhet ennå, blir du bedt om å gjøre det, hvis du trenger hjelp med å gjøre dette, sjekk dokumentasjonen her
Og det er alt du trenger for å komme i gang på Android!
Så langt har vi bare dekket to av de mobile plattformene for vår søknad, men det er sannsynlig at vi ønsker å distribuere på tvers av alle plattformene som PhoneGap støtter, ikke sant? Vel, i stedet for å gå gjennom å installere noen flere SDKer, en annen IDE med noen flere plugins, og sette opp en Virtual Machine for testing, vil denne serien bruke PhoneGap: Build-tjenesten når det kommer tid til å distribuere appen.
PhoneGap: Build, som det står på nettsiden, er en skybasert tjeneste som vil ta en HTML-CSS / JS-applikasjon med lynlås og sende deg programmet tilbake, kompilert og klar til distribusjon (en advarsel: for Android, iOS , og BB vil du trenge de nødvendige sertifikatene for distribusjon). PhoneGap: Bygg er i BETA for øyeblikket, og mens det er betalte alternativer (som er verdt å ha hvis du skal bruke det regelmessig), er det et gratis alternativ som tillater en privat søknad. Det er alt vi trenger for vårt prosjekt et øyeblikk, så fortsett og registrer deg nå, da vi skal bruke Build-tjenesten i slutten av serien.
Vi har nå vårt miljø klar for utvikling med PhoneGap. I neste del av denne serien begynner vi å se på APIene som PhoneGap tillater oss å få tilgang til og hvordan du bruker dem i appen vår.
Accentsconagua