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 vår første del så vi på å sette opp utviklingsmiljøet og få PhoneGap opp og kjører på iOS og Android SDKs. I denne andre delen av vår PhoneGap-serie skal vi se på noen av enhetens APIer som PhoneGap gir oss tilgang til og diskutere hvordan vi kan bruke dem.
For denne delen av serien ser vi bare på noen av funksjonene til PhoneGap, så vi skal bare sette opp en test for nå.
Gå videre og sett deg opp i hvilket miljø du har valgt: Xcode for iOS eller Eclipse for Android. Jeg vil påpeke eventuelle forskjeller mellom de to som vi går sammen om det blir nødvendig.
Vi starter med noen grunnleggende HTML og inkluderer Phongap.js-filen. Hvis du har opprettet prosjektet ditt med Xcode, er dette ganske mye den grunnleggende HTML som er opprettet.
Akselerasjon
Gjennom hele denne delen av serien vil vi være i stand til å teste på minst en faktisk enhet, da simulatoren har begrensninger når det gjelder enhetssensorer som akselerometer og kamera. For å få en iOS-enhet oppe som en testenhet må du ha en betalt utviklerkonto, så når du kobler enheten til datamaskinen og kjører Xcode, har du muligheten til å gjøre telefonen til en utviklings telefon. Gå gjennom oppsettet, og nå når du velger å bygge og kjøre appen din, kan du velge enheten fra rullegardinmenyen.
For Android er det ganske mye det samme bortsett fra at du gjør dette i Eclipse. Koble telefonen og sørg for at du har den i feilsøkingsmodus VIA USB (i telefoninnstillingene) og deretter når du vil kjøre appen din, velg Kjør som Android App.
La oss ta en titt på noen av sensorens grunnleggende detaljer.
Accelerometeret gir tilbakemelding for enhetens bevegelse over alle tre aksene. Vi har et par metoder for Accelerometer innen PhoneGap som er getCurrentAcceleration, watchAcceleration og clearWatch
Det er også noen argumenter for å passere gjennom Accelerometer-metoden. accelerometerSuccess, accelerometerError og accelerometerOptions.
Vi bruker vår første metode, accelerometer.getCurrentAcceleration, som følger.
navigator.accelerometer.getCurrentAcceleration (accelerometerSuccess, accelerometerError);
Den nåværende akselerasjonen returneres ved hjelp av accelerometerSuccess-funksjonen og alle dataene vi trenger er i akselerasjon protesterer på at vi går tilbake til vår suksessfunksjon. Lar oss få et eksempel oppe og kjører. Ta vår grunnleggende layout vi satt opp i begynnelsen av denne delen, og la oss legge til det.
Akselerasjon
Når du kjører dette i en simulator eller enhet, vil du bli møtt med et enkelt varsel på belastning. Det vi trenger å gjøre er å se akselerasjonen med intervaller og deretter utdataene. Vi kan gjøre dette med watchAcceleration metode. Vi bruker det med følgende:
var watchID = navigator.accelerometer.watchAcceleration (Suksess, Feil, [Alternativer]);
De watchID er en referanse som vi kan feste våre alternativer til, og også en måte vi kan bruke når du bruker clearWatch metode.
La oss gå videre og erstatte vår eldre JavaScript med følgende:
Accentsconagua
// vent på PhoneGap for å laste document.addEventListener ("deviceready", lastet, falskt); // PhoneGap er klar funksjon lastet () startWatch (); // Start å se akselerasjonsfunksjonen startWatch () // Oppdater akselerasjon hvert 3. sekund var alternativer = frekvens: 3000; watchID = navigator.accelerometer.watchAcceleration (onSuccess, onError, alternativer); // Stopp å se akselerasjonsfunksjonen stopWatch () if (watchID) navigator.accelerometer.clearWatch (watchID); watchID = null; // Suksessfunksjon onSuccess (akselerasjon) var element = document.getElementById ('accelerometer'); element.innerHTML = 'Acceleration X:' + acceleration.x + '
'+' Akselerasjon Y: '+ akselerasjon.y +'
'+' Akselerasjon Z: '+ akselerasjon.z +'
'+' Timestamp: '+ acceleration.timestamp +'
'; // Feilfunksjon onError () alert ('onError!'); Som du kan se, passerer vi i en Frekvens alternativet i urmetoden. Dette er i millisekunder, slik at hver tredje sekund vil denne metoden bli sparket igjen, og etter suksess vil vi oppdatere HTML-et for et element med IDen til akselerometer. Vi trenger bare å inkludere det elementet i vår nåværende HTML.
Venter på akselerometer ...
Nå, hvis du går videre og laster opp appen, vil du se akselerometerdataendringen.
Hvis du bruker simulatorene i stedet for de faktiske enhetene, ser du ingen endring i akselerometerutgangen.
Så det er det for å få tilgang til akselerometer-enhetens API. La oss nå se på hvordan du bruker den til å oppdage en risting i PhoneGap.
For å oppdage en riste ved hjelp av PhoneGap skal vi bli kvitt vår onSuccess funksjon og omskrive vår startWatch funksjon. For å vite om enheten har blitt rystet, må vi vite hva forrige orientering var for å sammenligne det med den nåværende orienteringen. Vi gjør dette ved å sette en variabel i begynnelsen av startWatch funksjon.
var previousReading = x: null, y: null, z: null
Deretter starter vi watchAcceleration-funksjonen.
navigator.accelerometer.watchAcceleration ();
På suksess for å få akselerasjonen, vil vi sette et par variabler som vil hjelpe oss å oppdage en riste.
var endringer = , bundet = 0,2;
Nå kan vi sammenligne den forrige akselerasjonen til dagens akselerasjon og hvis den går utover det vi har satt vår bundet variabel også, så kan vi brenne vår rystede funksjon.
hvis (previousReading.x! == null) changes.x = Math.abs (previousReading.x, acceleration.x); changes.y = Math.abs (previousReading.y, acceleration.y); changes.z = Math.abs (previousReading.z, acceleration.z); hvis (changes.x> bound && changes.y> bound && changes.z> bound) shaken ();
Vi kan da stille den forrige lesningen til den nåværende lesingen for neste gang rundt.
previousReading = x: acceleration.x, y: acceleration.y, z: acceleration.z
Til slutt, la oss ikke glemme å skrive en "rystet" funksjon for å håndtere risten. For nå vil det bare varsle en melding.
funksjon rystet () alert ("Shaken"); Du må huske å legge til feilhåndterer og frekvens til slutten på watchAcceleration metode.
Din siste kode skal nå se slik ut:
Akselerasjon
Jeg fant at bundet av 0,2 var ganske bra, men du vil kanskje prøve å øke den etter testing. Vi har nå dekket hva som kan oppnås med akselerometerdataene og hvordan å fange det, så la oss ta en titt på kameraet.
Kameraet er trolig en av de mest brukte funksjonene på smarttelefoner i dag, spesielt med kameraoppløsningen på de fleste telefoner, som raskt tar opp flere standard pek-og-skyveversjoner. Heldigvis gir PhoneGap oss en ganske enkel måte å fange bilder fra enhetens kamera og raskt innlemme disse bildene i vår søknad.
Metoden vi skal bruke er camera.getPicture () og akkurat som akselerometeret heter det ganske mye på samme måte og tar tre parametere. Metodens signaturer ser noe ut som dette: navigator.camera.getPicture (cameraSuccess, cameraError, [cameraOptions]). Som du vil se, er det mange flere muligheter som skal tas i betraktning når du arbeider med enhetskameraet enn når du arbeider med akselerometeret.
De valgfrie parametrene du kan passere gjennom, er som følger:
kvalitetdestinationTypeKildetypeallowEditencodingTypetargetWidthtargetHeightSom du kanskje har gjettet, kvalitet er kvaliteten som bildet er lagret på, dette tar et tall fra 0 - 100. Den destinationType variabel er formatet på det returnerte bildet. DATA_URL er en base64 kodet streng og FILE_URI er et faktisk bilde URI (jpeg / png). De Kildetype parameteren er hvor du vil få kildebildet, som kan være fra PHOTOLIBRARY, KAMERA eller SAVEDPHOTOALBUM. De allowEdit alternativet gjør at bildet kan redigeres før det blir lagret. EncodingType definerer kodingen av det returnerte bildet når det brukes FILE_URI, som du også kan bruke JPEG eller PNG. targetWidth og targetHeight er hva bildet skal skaleres til med forholdet opprettholdt. Til slutt er det Media type som bare fungerer når du velger SAVEDPHOTOALBUM og hvor du kanskje vil definere hva brukeren kan velge ut av BILDE, VIDEO eller AllMedia.
Så, la oss få kameraet vårt startet. Først skal vi få en knapp som når du klikker, starter kameraet vårt. Så når bildet er tatt, returnerer vi bildet base64 som er kodet som et miniatyrbilde. Kildekoden ser slik ut:
Capture Photo
![]()
Som tidligere venter vi på at PhoneGap skal lastes inn. Når lastingen er fullført, kan vi angi alternativene for destinationType og Kildetype, som standard er disse satt til KAMERA og DATA_URL. Når knappen er klikket, brann vi capturePhoto funksjon. Etter suksess, capturePhoto starter vår getPhoto funksjon. Vår funksjon mottar bildedataene i formatet vi oppgav, og vi kan gjøre med det vi ønsker. Alt vi egentlig gjør er å få et HTML-element spesifisert og sette dataene våre i src av det elementet.
Kjør og test koden på enheten din, og etter at du har tatt et bilde og testet, bør du ha noe som ser ut som nedenfor:
Det er også mulig å redigere bildet etter fangst, alt vi trenger å gjøre er å passere gjennom allowEdit: true parameter i alternativene, etter at bildet er tatt. Den beveger seg inn på redigeringsskjermen, hvor du kan zoome og beskjære bildet. Vi kan bruke følgende kode når vi tar bildet:
navigator.camera.getPicture (getPhoto, onFail, allowEdit: true);
Det er noen kjennskaper til allowEdit alternativ verdt å merke seg. For tiden fungerer dette bare i iOS og ignoreres i Blackberry, Android, Palm og Windows 7.
Hvis vi ønsket å få et bilde fra fotoalbumet eller annen lagring (for eksempel lokalstorage) vi ville bruke pictureSource.PHOTOLIBRARY.
Det er ganske mye det grunnleggende vi trenger for å komme seg opp med kameraet i PhoneGap. Ha en lek med det og prøv ut noen ting med forskjellige bildekvaliteter, typer og størrelser.
Det er mulig at vi kanskje vil lagre bildet tatt et annet sted enn fotoalbumet på enheten. Faktisk er dette svært sannsynlig å være tilfelle. Vi vil sannsynligvis også ønske å lagre annen informasjon. Det er noen måter å gå om dette for å bruke enhetens lagring, en av dem er å bruke WebSQL, den andre bruker WebStorage - begge som definert av W3C. Du kan også sende dataene til en ekstern server hvis du vil servere den i en sky app (Instagr.am), eller du kan gå et skritt videre og bruke Lawnchair eller PersistenceJS
.
Jeg personlig foretrekker WebStorage-metoden, og for dette prosjektet er det perfekt.
Vi kan benytte WebStorage med følgende syntaks:
// Lagre data window.localStorage.setItem ("key", "value"); // hente data var verdi = window.localStorage.getItem ("key"); // verdien er nå lik «verdi» // fjerne verdien window.localStorage.removeItem ("key"); Med denne grunnleggende syntaksen har vi muligheten til å lagre base64-kodet bilde i lokal lagring og hente det når vi trenger å.
Geolocation gir plasseringsinformasjon for enheten. Mange enheter kan allerede bruke nettleserens evne til å bruke Geolocation API, og hvis du bruker PhoneGaps implementering, bruker den dette hvis det er tilgjengelig.
PhoneGaps Geolocation har 3 metoder, getCurrentPosition, watchPosition og clearWatch. De getCurrentPosition Metoden returnerer enhetens nåværende posisjon med en posisjonsobjekt som inneholder egenskapene for:
Den grunnleggende bruken av Geolocation-funksjonaliteten skal se ganske kjent ut nå:
navigator.geolocation.getCurrentPosition (suksess, feil);
Og så kan vi gjøre noe som følger:
funksjon onSuccess (posisjon) var el = document.getElementById ('location'); el.innerHTML = 'Breddegrad:' + posisjon.coords.latitude + '
'+' Lengdegrad: '+ posisjon.coords.longitude +'
'+' Høyde: '+ posisjon.coords.altitude +'
'+' Nøyaktighet: '+ posisjon.coords.accuracy +'
'+' Høyde Nøyaktighet: '+ posisjon.coords.altitudeAccuracy +'
'+' Overskrift: '+ posisjon.coords.heading +'
'+' Hastighet: '+ posisjon.coords.speed +'
'+' Timestamp: '+ new Date (position.timestamp) +'
'; Din fulle kode skal se ut som følgende:
geolocation Finne geolokasjon ...
Dette vil gi deg stillingsinformasjonen øyeblikket som suksess funksjonen er sparken. Hvis vi vil konstant se geolokasjonen av enheten bruker vi navigator.geolocation.watchPosition metode i stedet for navigator.geolocation.getCurrentPosition, sender den frekvensen vi ønsker å oppdatere på. Vår kode skal nå se slik ut:
geolocation Finne geolokasjon ...
Hvis du kjører appen din nå, bør du ende opp med en app som ser slik ut:
Som akselerometeret har geolokasjon også a clearWatch metode for å slutte å se etter endringer, som du kan bruke med følgende kode:
navigator.geolocation.clearWatch (watchID);
Med det har vi nå kunnskapen om å bruke geolocation API i PhoneGap for vår applikasjon. Vi vil kanskje bare registrere vår plassering til enhver tid og lagre den lokalt eller eksternt, vi vil kanskje også registrere vår bevegelse over tid og lagre det. Uansett hva vi vil gjøre med det, vet vi nå hvordan du får den informasjonen.
På toppen av funksjonaliteten som PhoneGap tilbyr ut av boksen, er det en sjanse med Plugins tilgjengelig for PhoneGap for ting som en date picker, filopplasting, og Paypal. Da vi ikke bruker noen plugins i denne appen, går over bruk og installasjon av pluginene utenfor rekkevidden av denne serien, men du bør vite hvilke alternativer du har når du jobber med PhoneGap, så vær sikker på å sjekke ut GitHub prosjekt for plugins og wiki for informasjon om hvordan du kommer opp og kjører med dem. Hvis du ønsker å se en egen opplæring om bruk av PhoneGap-plugin og til og med skrive din egen, vennligst gi oss beskjed i kommentarene!
Selv om vi ikke har startet utviklingen på et program, er vi nå oppe med PhoneGap, som kan teste på en enhet og en simulator, ha en god forståelse av hvordan PhoneGaps APIer fungerer, og hvordan vi kan bruke API-en i en app. I neste del vil vi begynne å bygge Sculder, vår prøveapplikasjon!
