Opprette et Android-program Hello World med PhoneGap

PhoneGap er en åpen kildekodeplattform som lar deg lage mobile plattformplattformer med HTML, JavaScript og CSS. For å kunne kommunisere med enhetshardware, gir PhoneGap en JavaScript API som grensesnitt med funksjoner som ombordkamera, GPS og akselerometer. 

Selv om PhoneGap er flott for å utvikle applikasjoner på tvers av plattformer, vil koden for å utvikle applikasjoner mens du målretter mot en plattform eller annen, variere. En av de største forskjellene å overvinne er de nødvendige programkravene. 

Denne opplæringen vil gi en grundig gjennomgang av hvordan du konfigurerer utviklingsmiljøet ditt for Android, og vil bygge en enkel "Hello World" -app.

Hvis du vil gå videre med PhoneGap, sjekk utvalget av PhoneGap-skript og appmaler på Envato Market.

PhoneGap Krav til Android Development

Java JDK

Du må installere Java Development Kit (JDK). Følg de offisielle instruksjonene for å sette opp dette.

Android SDK

Du trenger også Android Software Development Kit. Når du installerer SDK, må du sette android-sdk-/ verktøy for brukerens PATH-variabel.

Formørkelse

Du må laste ned og installere Eclipse hvis du ikke allerede har den på maskinen din.

Eclipse ADT Plugin

Du må også installere ADT-plugin for Eclipse. ADT (Android Development Tools) er et plugin of eclipse som gir en komplett IDE for å utvikle Android-applikasjon. ADT lar deg lage nye Android-prosjekter, og lar deg lage Android-prosjekter fra eksisterende kilde (dette er måten vi åpner vår PhoneGap-app for android på formørkelse). Ved hjelp av ADT kan du også feilsøke en android-applikasjon. Da ADT er godt integrert med android SDK kjører appen fra IDE, starter den Android-emulatoren.

For å installere ADT klikker du på "installer ny programvare" i hjelpsvinduet til Eclipse og skriver inn følgende nettsted for å jobbe med: http://dl-ssl.google.com/android/eclipse/. Følg deretter veiviseren som presenteres for å installere ADT.

Android-plattformer og komponenter

Når du har installert ADT, må du installere Android-plattformen og andre komponenter. For å gjøre det, gå til menyvalg vinduet-> Android DK og AVD manager og velg plattform og API nivå. Android api 2.2 er senest ved skriving av denne artikkelen.

Apache Ant

Hvis du ikke har apache ant installert, kan du laste den ned fra http://ant.apache.org/bindownload.cgi. For å installere det vil du bare pakke ut den nedlastede Zip-filen og sette bin-mappen i mappen mappen i PATH-variabelen.

Rubin

Hvis du ikke har Ruby installert, kan du laste den ned fra dette gratis installasjonsprogrammet. Når du har installert, legger du Ruby / bin-banen i kontoens PATH-variabler.

PhoneGap Framework

Selvfølgelig vil du også trenge PhoneGap Framework selv.

Opprette ditt utviklings arbeidsområde

Miljøvariabler Sjekk:

Følgende stier bør angis i kontoens PATH-variabel:

• your_system_path / jdk / bin
• your_system_path / android-SDK / verktøy
• your_system_path / rubin / bin
• your_system_path / Apache-ant / bin

Bortsett fra disse, må du også sette følgende variabler:

• JAVA_HOME - banen til JDK-katalogen din
• ANT_HOME - Sti til deg apache-ant katalog
• ANDROID_HOME - sti til android SDK-katalogen din.

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

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

• android_sdk_path: Hvor du installerte SDK
• Navn: Navnet for å 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.
• sti: Søknads arbeidsområdet for prosjektet ditt.

Når du kjører kommandoen, og hvis alt går riktig, vil meldinger som vist nedenfor bli sett:

Ovennevnte bør skape et komplett arbeidsområde for din PhoneGap Android-app.

Sett opp prosjektet ditt i Eclipse

Når dette er gjort, kan dette arbeidsområdet åpnes i formørkelse. I formørkelse velg nytt prosjekt og velg deretter Android Project.

Velg deretter "Opprett prosjekt fra eksisterende kilde" og gi prosjektet et navn som vist nedenfor.

Hvis du prøver å bygge og kjøre prosjektet i Eclipse, får du en byggfeil. Dette skyldes at du ikke har lagt til det eksterne biblioteket (phonegap.jar) som er opprettet i libs-mappen på arbeidsområdet ditt.

For å legge til det eksterne biblioteket, høyreklikk på prosjektet og velg Build Path-> Legg til eksternt arkiv og velg deretter phonegap.jar i mappen libs.

Hvis alt går bra, bør dette fjerne alle byggefeilene i prosjektet. Prøv nå å kjøre prosjektet ditt i emulatoren. Du bør se skjermen nedenfor. Dette skyldes at du ikke har lagt til noen PhoneGap HTML- eller JavaScript-filer i prosjektet.

I aktiviteten / www-mappen til arbeidsområdet vil det allerede være en fil som heter phonegap.js. I den mappen opprettes en fil som heter index.html med følgende kode:

I koden linjen:

inneholder phonegap.js-filen som lar deg ringe innfødte API-er for android. På kroppens belastning registrerer init-funksjonen funksjonshjelpMessageBox på PhoneGap-hendelsen deviceready som utløses når phonegap har gjort behandlingen for å initialisere alt for programmet ditt slik at det kan ringe PhoneGap APIs. ShowMessageBox-funksjonen kaller PhoneGap API navigator.notification.alert som viser meldingsboksen på skjermen. Kjører appen etter at du har lagt til index.html og fornyet prosjektet i Eclipse, vil du se følgende skjermbilde:

La oss nå legge til noe mer funksjonalitet til vår app. Følgende kode oppretter en tekstboks for å angi navnet på personen og en knapp når du klikker, vises en meldingsboks:

          
  
 
 Si hei 
 

 Si hei

#bdy bakgrunn: # F0F0F0;  #btn en border: 1px solid # 555; -webkit-grense-radius: 5px; border-radius: 5px; tekst-Justering: center; display: block; float: venstre; bakgrunn: # 6600CC; bredde: 308px; farge: #fff; font-size: 1.1em; text-decoration: none; polstring: 1.2em 0; margin: 3px 0px 3px 5px;  #txt border: 1px solid # 555; -webkit-grense-radius: 5px; border-radius: 5px; tekst-Justering: center; display: block; float: venstre; bakgrunn: # 00FFCC; bredde: 308px; color: # 9AB; font-size: 1.1em; text-decoration: none; polstring: 1.2em 0; margin: 3px 0px 3px 5px;