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 vår första del såg vi på att skapa vår utvecklingsmiljö och få PhoneGap igång på IOS och Android SDK. I den här andra delen av vår PhoneGap-serie kommer vi att titta på några av de API-enheter som PhoneGap ger oss tillgång till och diskutera hur vi kan använda dem.
För den här delen av serien kommer vi bara att titta på några av funktionaliteten i PhoneGap, så vi ska bara sätta upp ett test för nu.
Fortsätt och ställ dig in i vilken miljö du har valt: Xcode för iOS eller Eclipse for Android. Jag kommer att påpeka några skillnader mellan de två som vi följer om det blir nödvändigt.
Vi börjar med några grundläggande HTML och inkluderar Phongap.js-filen. Om du har skapat ditt projekt med Xcode, är det ganska mycket den grundläggande HTML som skapas.
Acceleration
Under hela denna del av serien kommer vi att vilja kunna testa på minst en verklig enhet, eftersom simulatorn har begränsningar när det gäller enhetssensorer som accelerometern och kameran. För att få en iOS-enhet som en testenhet måste du ha ett betalt utvecklarkonto, då när du ansluter enheten till datorn och kör Xcode, kan du göra den telefonen till en utvecklingstelefon. Gå igenom installationen och nu när du väljer att bygga och köra din app kan du välja din enhet i rullgardinsmenyn.
För Android är det ganska mycket detsamma, förutom att du gör det i Eclipse. Anslut din telefon och se till att du har den i felsökningsläge VIA USB (i telefoninställningarna) och sedan när du vill köra din app, välj Kör som Android App.
Låt oss ta en titt på några av grunden för enhetssensorn.
Accelerometern ger feedback för enhetens rörelse över alla tre axlarna. Vi har ett par metoder för Accelerometer inom PhoneGap som är getCurrentAcceleration, watchAcceleration och clearWatch
Det finns också några argument att passera genom Accelerometer-metoden. accelerometerSuccess, accelerometerError och accelerometerOptions.
Vi använder vår första metod, accelerometer.getCurrentAcceleration, som följer.
navigator.accelerometer.getCurrentAcceleration (accelerometerSuccess, accelerometerError);
Den aktuella accelerationen returneras med accelerometerSuccess-funktionen och all data vi behöver finns i acceleration objekt att vi går tillbaka till vår framgångsfunktion. Låt oss få ett exempel igång. Ta vår grundläggande layout som vi satt upp i början av den här delen och låt oss lägga till den.
Acceleration
När du kör detta i en simulator eller enhet, kommer du att hälsas med en enda varning på belastning. Vad vi behöver göra är att titta på accelerationen med mellanrum och sedan mata ut data. Vi kan göra detta med watchAcceleration metod. Vi använder det med följande:
var watchID = navigator.accelerometer.watchAcceleration (framgång, fel, [alternativ]);
De watchID är en referens som vi kan bifoga våra alternativ till och också ett sätt som vi kan använda när du använder clearWatch metod.
Låt oss fortsätta och ersätta vårt äldre JavaScript med följande:
Accentsconagua
// vänta på PhoneGap för att ladda dokument.addEventListener ("deviceready", laddat, felaktigt); // PhoneGap är klar funktion laddad () startWatch (); // Börja titta på accelerationsfunktionen startWatch () // Uppdatera acceleration var tredje sekund var options = frekvens: 3000; watchID = navigator.accelerometer.watchAcceleration (onSuccess, onError, alternativ); // Stoppa titta på accelerationsfunktionen stopWatch () if (watchID) navigator.accelerometer.clearWatch (watchID); watchID = null; // Succesfunktion onSuccess (acceleration) var element = document.getElementById ('accelerometer'); element.innerHTML = 'Acceleration X:' + acceleration.x + '
'+' Acceleration Y: '+ acceleration.y +'
'+' Acceleration Z: '+ acceleration.z +'
'+' Timestamp: '+ acceleration.timestamp +'
'; // Felfunktion onError () alert ('onError!'); Som du kan se passerar vi i en frekvens alternativet till klockmetoden. Detta är i millisekunder, så varje 3 sekunder kommer den här metoden att sparkas igen, och med framgång kommer vi att uppdatera HTML för ett element med ID för accelerometer. Vi behöver bara inkludera det elementet i vår nuvarande HTML.
Väntar på accelerometer ...
Nu, om du går vidare och laddar upp appen, kommer du att se accelerometerdataändringen.
Om du använder simulatorerna istället för aktuella enheter ser du ingen förändring i accelerometerns utgång.
Så det är det för att komma åt accelerometerns API. Låt oss nu ta en titt på hur man använder den för att upptäcka en skaka i PhoneGap.
För att upptäcka en skaka med hjälp av PhoneGap kommer vi att bli av med vår onSuccess Funktion och omskrivning av vår startWatch fungera. För att veta om enheten har skakats, måste vi veta vad den tidigare orienteringen var för att jämföra den med den nuvarande orienteringen. Vi gör detta genom att ställa in en variabel i början av startWatch fungera.
var previousReading = x: null, y: null, z: null
Därefter startar vi watchAcceleration-funktionen.
navigator.accelerometer.watchAcceleration ();
På framgång för att få accelerationen kommer vi att ange ett par variabler som hjälper oss att upptäcka en skaka.
varförändringar = , bunden = 0,2;
Nu kan vi jämföra den tidigare accelerationen till nuvarande acceleration och om den går längre än vad vi har satt oss bunden variabel också, då kan vi avfyra vår skakfunktion.
om (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); om (changes.x> bound && changes.y> bound && changes.z> bound) shaken ();
Vi kan sedan ställa in den tidigare läsningen till den nuvarande behandlingen för nästa gång runt.
previousReading = x: acceleration.x, y: acceleration.y, z: acceleration.z
Slutligen, låt oss inte glömma att skriva en "skakad" funktion för att faktiskt hantera skakningen. För tillfället kommer det bara att varna ett meddelande.
funktion skakad () alert ("Shaken"); Du måste komma ihåg att lägga till felhanteraren och frekvensen till slutet på watchAcceleration metod.
Din sista kod ska nu se ut så här:
Acceleration
Jag fann att gränsen på 0,2 var ganska bra, men du kanske vill försöka öka den efter testning. Vi har nu täckt vad som kan uppnås med accelerometerdata och hur man tar det, så låt oss ta en titt på kameran.
Kameraet är förmodligen en av de mest använda funktionerna på smarta telefoner idag, särskilt med kamerans upplösning på de flesta telefoner, som snabbt hämtar upp till fler standard-punkt-och-shoot-versioner. Tack och lov, PhoneGap ger oss ett ganska enkelt sätt att fånga bilder från enhetens kamera och snabbt införliva dessa bilder i vår applikation.
Metoden vi ska använda är camera.getPicture () och precis som accelerometern kallas det ganska mycket på samma sätt och tar tre parametrar. Metodsignaturerna ser något ut så här ut: navigator.camera.getPicture (cameraSuccess, cameraError, [cameraOptions]). Som du kommer att se finns det många fler alternativ som ska beaktas vid hantering av enhetskameran än vid hantering av accelerometern.
De valfria parametrarna du kan passera är följande:
kvalitetdestinationTypeKälltypallowEditencodingTypetargetWidthtargetHeightSom du kanske har gissat, kvalitet är den kvalitet som bilden sparas på, detta tar ett tal från 0 till 100. Den destinationType variabel är formatet på den returnerade bilden. DATA_URL är en bas64 kodad sträng och FILE_URI är en faktisk bild URI (jpeg / png). De Källtyp parameter är där du vill få källbilden, som kan vara från photo~~POS=TRUNC library~~POS=HEADCOMP, KAMERA eller SAVEDPHOTOALBUM. De allowEdit alternativet tillåter att bilden redigeras innan den sparas. EncodingType definierar kodningen av den returnerade bilden när den används FILE_URI, från vilken du kan använda antingen JPEG eller PNG. targetWidth och targetHeight är vad bilden ska skalas till med bildförhållande som upprätthålls. Slutligen finns det Mediatyp som endast fungerar vid val SAVEDPHOTOALBUM och där du kanske vill definiera vad användaren kan välja ut av BILD, VIDEO eller AllMedia.
Så, låt oss börja vår kamera. Först kommer vi att ha en knapp som när du klickar börjar vår kamera. Då när bilden tas är vi tillbaka bildbasen64 kodad som en miniatyrbild. Källkoden ser ut så här:
Capture Photo
![]()
Som tidigare väntar vi på att PhoneGap laddas. När lastningen är klar kan vi ställa in alternativen för destinationType och den Källtyp, som standard är dessa inställda på KAMERA och DATA_URL. När knappen klickar, brann vi capturePhoto fungera. Efter framgång, capturePhoto startar vår getPhoto fungera. Vår funktion tar emot bilddata i det format vi angivit, och vi kan göra med det vi vill ha. Allt vi verkligen gör är att få ett HTML-element som anges och sätta vår data i src av det elementet.
Kör och testa din kod på din enhet och efter att du har tagit en bild och testat bör du ha något som ser ut som nedan:
Det är också möjligt att redigera bilden efter fångsten, allt vi behöver göra är att passera genom allowEdit: true parametern i alternativen, efter att fotot har tagits. Den flyttas till redigeringsskärmen, där du kan zooma och skära bilden. Vi kan använda följande kod när vi tar bilden:
navigator.camera.getPicture (getPhoto, onFail, allowEdit: true);
Det finns några krångor till allowEdit alternativ värt att notera. För närvarande fungerar det bara i iOS och ignoreras i Blackberry, Android, Palm och Windows 7.
Om vi ville få ett foto från fotoalbumet eller annat lagringsutrymme (t.ex. lokalstorage) skulle vi använda pictureSource.PHOTOLIBRARY.
Det är ganska mycket de grunder vi behöver för att komma igång med kameran i PhoneGap. Ta en lek med det och prova några saker med olika bildegenskaper, typer och storlekar.
Det är möjligt att vi kanske vill lagra fotot taget någon annanstans än fotoalbumet på enheten. Faktum är att detta är högst sannolikt att vara fallet. Vi kommer förmodligen också vilja lagra annan information. Det finns några sätt att göra om detta för att använda enhetslagring, en av dem är att använda WebSQL, den andra använder WebStorage - båda som definieras av W3C. Du kan också skicka data till en fjärrserver om du vill tjäna den i ett molnapp (Instagr.am), eller du kan gå ett steg längre och använda Lawnchair eller PersistenceJS
.
Jag föredrar personligen WebStorage-metoden och för det här projektet är det perfekt.
Vi kan använda WebStorage med följande syntax:
// Spara data window.localStorage.setItem ("key", "value"); // hämta data varvärdet = window.localStorage.getItem ("key"); // värdet är nu lika med "värde" // ta bort värdet window.localStorage.removeItem ("key"); Med den här grundläggande syntaxen har vi möjlighet att lagra den kodade basen bas64 i lokal lagring och hämta det när vi behöver.
Geolocation tillhandahåller platsinformation för enheten. Många enheter kan redan använda webbläsarens förmåga att använda Geolocation API och om du använder PhoneGaps implementering, använder den här om det är tillgängligt.
PhoneGaps Geolocation har 3 metoder, getCurrentPosition, watchPosition och clearWatch. De getCurrentPosition Metoden returnerar enhetens aktuella position med ett positionsobjekt som innehåller egenskaperna för:
Den grundläggande användningen av Geolocation-funktionaliteten ska se ganska bekant ut nu:
navigator.geolocation.getCurrentPosition (framgång, fel);
Och då kan vi göra något som följande:
funktion onSuccess (position) var el = document.getElementById ('location'); el.innerHTML = 'Latitude:' + position.coords.latitude + '
'+' Längd: '+ position.coords.longitude +'
'+' Höjd: '+ position.coords.altitude +'
'+' Noggrannhet: '+ position.coords.accuracy +'
'+' Höjdnoggrannhet: '+ position.coords.altitudeAccuracy +'
'+' Rubrik: '+ position.coords.heading +'
'+' Hastighet: '+ position.coords.speed +'
'+' Timestamp: '+ new Date (position.timestamp) +'
'; Din fullständiga kod ska se ut som följande:
Geolocation Hitta geolocation ...
Detta kommer att ge dig information om positionen det ögonblick som Framgång funktionen avfyras. Om vi vill ständigt titta på geolokaliteten hos enheten använder vi navigator.geolocation.watchPosition metod i stället för navigator.geolocation.getCurrentPosition, passerar den frekvensen som vi skulle vilja uppdatera på. Vår kod ska nu se ut så här:
Geolocation Hitta geolocation ...
Om du kör din app nu borde du sluta med en app som ser ut så här:
Liksom accelerometern har geolokation också en clearWatch metod för att sluta titta på förändringar, som du kan använda med följande kod:
navigator.geolocation.clearWatch (watchID);
Med det har vi nu kunskapen att använda geolocation API i PhoneGap för vår applikation. Vi kanske bara vill spela in vår plats när som helst och lagra den lokalt eller på distans, vi kanske också vill spela in vår rörelse över tiden och lagra den. Vad vi än vill göra med det vet vi nu hur man får den informationen.
Utöver funktionaliteten som PhoneGap erbjuder ut ur rutan finns det ett hämnd av plugins tillgängliga för PhoneGap för saker som en datumväljare, filuppladdare och Paypal. Eftersom vi inte använder några plugins i den här appen, går över användningen och installationen av pluginsna utanför ramen för denna serie, men du borde veta vilka alternativ du har när du arbetar med PhoneGap så var noga med att kolla in GitHub Projekt för plugins och wiki för information om hur man går igång med dem. Om du vill se en separat handledning om att använda PhoneGap-plugins och till och med skriva egna, var god och låt oss veta i kommentarerna!
Medan vi inte har börjat utvecklas på en applikation, är vi nu igång med PhoneGap, som kan testa på en enhet och simulator, ha en bra förståelse för hur PhoneGaps API fungerar, och hur vi kan använda API: n i en app. I nästa del kommer vi att börja bygga Sculder, vårt provprogram!
