Share
Wilt u leren hoe u PhoneGap kunt gebruiken, maar weet u niet waar u moet beginnen? Doe met ons mee als we "Sculder" samenstellen, niet alleen een eerbetoon aan een uitstekende science fiction tv-serie, maar een volwaardige native mobiele applicatie voor de gelovige in jou!
In ons eerste deel hebben we gekeken naar het opzetten van onze ontwikkelomgeving en het in gebruik nemen van PhoneGap op de iOS- en Android-SDK's. In dit tweede deel van onze PhoneGap-serie gaan we kijken naar enkele apparaat-API's die PhoneGap ons toegang geeft tot en bespreken hoe we deze kunnen gebruiken.
Voor dit deel van de serie gaan we gewoon kijken naar een deel van de functionaliteit van PhoneGap, dus we zullen gewoon een test opzetten voor nu.
Ga je gang en stel je in voor projecten die je hebt gekozen: Xcode voor iOS of Eclipse voor Android. Ik zal wijzen op eventuele verschillen tussen de twee als we meegaan als het nodig is.
We beginnen met wat eenvoudige HTML en bevatten het Phongap.js-bestand. Als u uw project met Xcode hebt gemaakt, is dit vrijwel de eenvoudige HTML die wordt gemaakt.
Versnelling
In dit deel van de serie willen we kunnen testen op ten minste één daadwerkelijk apparaat, aangezien de simulator beperkingen heeft als het gaat om apparaatsensoren zoals de versnellingsmeter en de camera. Om een iOS-apparaat aan de praat te krijgen als een testapparaat, moet je een betaald ontwikkelaarsaccount hebben. Wanneer je je apparaat aansluit op je computer en Xcode uitvoert, heb je de mogelijkheid om van die telefoon een ontwikkelingstelefoon te maken. Ga door de installatie en wanneer u nu kiest om uw app te bouwen en uit te voeren, kunt u uw apparaat selecteren in het vervolgkeuzemenu.
Voor Android is het vrijwel hetzelfde, behalve dat je dit in Eclipse doet. Verbind je telefoon en zorg ervoor dat je deze hebt in de foutopsporingsmodus VIA USB (in de telefooninstellingen) en selecteer vervolgens Run as Android App wanneer je je app wilt uitvoeren.
Laten we een paar basisprincipes van de apparaatsensor bekijken.
De versnellingsmeter geeft feedback voor de beweging van de apparaten over alle drie de assen. We hebben een aantal methoden voor de Accelerometer binnen PhoneGap getCurrentAcceleration, watchAcceleration en clearWatch
Er zijn ook enkele argumenten om door te gaan op de Accelerometer-methode. accelerometerSuccess, accelerometerError en accelerometerOptions.
We gebruiken onze eerste methode, accelerometer.getCurrentAcceleration, als volgt.
navigator.accelerometer.getCurrentAcceleration (accelerometerSuccess, accelerometerError);
De huidige versnelling wordt geretourneerd met behulp van de accelerometerSuccess-functie en alle gegevens die we nodig hebben bevinden zich in de versnelling object dat we doorgeven aan onze succesfunctie. Laten we een voorbeeld krijgen dat up and running is. Neem onze basislay-out die we aan het begin van dit gedeelte hebben opgesteld en laten we toevoegen.
Versnelling
Wanneer u dit in een simulator of apparaat uitvoert, wordt u begroet met een enkele waarschuwing bij laden. Wat we moeten doen is de versnelling met tussenpozen bekijken en vervolgens de gegevens uitvoeren. We kunnen dit doen met de watchAcceleration methode. We gebruiken het met het volgende:
var watchID = navigator.accelerometer.watchAcceleration (Success, Error, [Options]);
De watchID is een referentie waar we onze opties aan kunnen koppelen en ook een manier die we kunnen gebruiken bij het gebruik van de clearWatch methode.
Laten we doorgaan en onze oudere JavaScript vervangen door het volgende:
Accentsconagua
// wacht tot PhoneGap document.addEventListener ("deviceready", loaded, false) laadt; // PhoneGap is gereed functie geladen () startWatch (); // Begin met het bekijken van de versnellingsfunctie startWatch () // Update acceleratie elke 3 seconden var options = frequency: 3000; watchID = navigator.accelerometer.watchAcceleration (onSuccess, onError, opties); // Stop met het bekijken van de versnellingsfunctie stopWatch () if (watchID) navigator.accelerometer.clearWatch (watchID); watchID = null; // Succesfunctie onSuccess (versnelling) var element = document.getElementById ('accelerometer'); element.innerHTML = 'Versnelling X:' + acceleratie.x + '
'+' Versnelling Y: '+ versnelling.y +'
'+' Versnelling Z: '+ acceleratie.z +'
'+' Tijdstempel: '+ acceleratie.timestamp +'
'; // Foutfunctie onError () alert ('onError!'); Zoals je kunt zien, geven we a frequentie optie in de kijkmethode. Dit is in milliseconden, dus elke 3 seconden wordt die methode opnieuw geactiveerd en bij succes zullen we de HTML van een element bijwerken met de ID van de accelerometer. We hoeven alleen dat element op te nemen in onze huidige HTML.
Wachten op versnellingsmeter ...
Als u nu doorgaat en de app laadt, ziet u de gegevens van de versnellingsmeter veranderen.
Als u de simulators gebruikt in plaats van de daadwerkelijke apparaten, ziet u geen verandering in de output van de accelerometer.
Dus dat is het voor toegang tot de API van het accelerometerapparaat. Laten we nu eens kijken hoe we het kunnen gebruiken om een trilling in PhoneGap te detecteren.
Om een shake te detecteren met behulp van PhoneGap gaan we van ons af onSuccess functioneer en herschrijf onze startWatch functie. Om te weten of het apparaat is geschud, zullen we moeten weten wat de vorige oriëntatie was om dat te vergelijken met de huidige oriëntatie. We doen dit door een variabele in te stellen aan het begin van de startWatch functie.
var previousReading = x: null, y: null, z: null
Vervolgens starten we de watchAcceleration-functie.
navigator.accelerometer.watchAcceleration ();
Over het succes van het verkrijgen van de versnelling zullen we een aantal variabelen instellen die ons zullen helpen een trilling te detecteren.
var changes = , bound = 0.2;
Nu kunnen we de vorige versnelling vergelijken met de huidige versnelling en als deze verder gaat dan wat we hebben ingesteld gebonden variabel ook, dan kunnen we onze geschudde functie afvuren.
if (previousReading.x! == null) changes.x = Math.abs (previousReading.x, acceleratie.x); changes.y = Math.abs (previousReading.y, acceleratie.y); changes.z = Math.abs (previousReading.z, acceleratie.z); if (changes.x> bound && changes.y> bound && changes.z> bound) shaken ();
We kunnen dan de vorige keer de huidige waarde voor de volgende keer instellen.
previousReading = x: acceleratie.x, y: acceleratie.y, z: acceleratie.z
Laten we ten slotte niet vergeten een "geschudde" functie te schrijven om de shake daadwerkelijk aan te kunnen. Voor nu zal het alleen een bericht waarschuwen.
functie geschud () alert ("Shaken"); Je moet onthouden om je fout handler en frequentie toe te voegen aan het eind op de watchAcceleration methode.
Uw definitieve code zou er nu ongeveer zo uit moeten zien:
Versnelling
Ik vond dat de grenswaarde van 0,2 behoorlijk goed was, maar je kunt proberen deze na het testen te verhogen. We hebben nu besproken wat we kunnen bereiken met de gegevens van de versnellingsmeter en hoe we deze kunnen vastleggen, dus laten we de camera eens bekijken.
De camera is waarschijnlijk een van de meest gebruikte functies op smartphones vandaag, vooral omdat de cameraresolutie op de meeste telefoons al snel meer standaard-point-en-shoot-versies haalt. Gelukkig geeft PhoneGap ons een vrij gemakkelijke manier om foto's te maken van de camera van het apparaat en deze afbeeldingen snel in onze applicatie op te nemen.
De methode die we gaan gebruiken is camera.getPicture () en net als de accelerometer wordt hij op ongeveer dezelfde manier opgeroepen en neemt hij drie parameters. De methodehandtekeningen ziet er ongeveer zo uit: navigator.camera.getPicture (cameraSuccess, cameraError, [cameraOpties]). Zoals u zult zien, zijn er veel meer opties waarmee u rekening moet houden bij de camera van het apparaat dan bij het omgaan met de accelerometer.
De optionele parameters die u kunt passeren zijn als volgt:
kwaliteitdestinationTypeBron TypeAllowEditencodingTypetargetWidthtargetHeightZoals je misschien al geraden had, kwaliteit is de kwaliteit waar de afbeelding op wordt opgeslagen, dit neemt een getal van 0 - 100 aan destinationType variabele is het formaat van de geretourneerde afbeelding. DATA_URL is een base64-gecodeerde reeks en FILE_URI is een werkelijke afbeelding URI (jpeg / png). De Bron Type parameter is waar u de bronafbeelding wilt ophalen, die kan zijn van de FOTOBIBLIOTHEEK, CAMERA of SAVEDPHOTOALBUM. De AllowEdit optie zorgt ervoor dat de afbeelding kan worden bewerkt voordat deze wordt opgeslagen. EncodingType definieert de codering van de geretourneerde afbeelding tijdens het gebruik FILE_URI, van welke u een van beide kunt gebruiken JPEG of PNG. targetWidth en targetHeight is wat de afbeelding zal worden geschaald met behoud van de beeldverhouding. Eindelijk is er dat Mediatype welke alleen functioneert bij het selecteren SAVEDPHOTOALBUM en waar je misschien wilt definiëren waaruit de gebruiker kan kiezen BEELD, VIDEO of AllMedia.
Laten we onze camera dus starten. Eerst zullen we een knop hebben die, wanneer erop wordt geklikt, onze camera zal opstarten. Wanneer de foto wordt gemaakt, retourneren we de afbeelding base64 die is gecodeerd als een miniatuur. De broncode ziet er als volgt uit:
Foto vastleggen
![]()
Net als eerder wachten we tot PhoneGap is geladen. Wanneer het laden is voltooid, kunnen we de opties voor de destinationType en de Bron Type, standaard zijn deze ingesteld op CAMERA en DATA_URL. Wanneer op de knop wordt geklikt, worden de capturePhoto functie. Bij succes, capturePhoto start onze getPhoto functie. Onze functie ontvangt de afbeeldingsgegevens in het formaat dat we hebben opgegeven, en we kunnen doen wat we willen. Het enige wat we echt doen, is een HTML-element opgeven en onze gegevens in de src van dat element.
Voer uw code uit en test deze op uw apparaat en nadat u een foto hebt gemaakt en getest, moet u iets hebben dat er als volgt uitziet:
Het is ook mogelijk om de foto na opname te bewerken, alles wat we moeten doen is door de allowEdit: waar parameter in de opties, nadat de foto is gemaakt. Het wordt verplaatst naar het bewerkingsscherm, waar u kunt zoomen en de foto bijsnijden. We kunnen de volgende code gebruiken wanneer we de afbeelding vastleggen:
navigator.camera.getPicture (getPhoto, onFail, allowEdit: true);
Er zijn wat eigenaardigheden aan de AllowEdit optie vermeldenswaard. Momenteel werkt dit alleen in iOS en wordt genegeerd in Blackberry, Android, Palm en Windows 7.
Als we een foto van het fotoalbum of andere opslag (zoals localstorage) wilden hebben, zouden we die gebruiken pictureSource.PHOTOLIBRARY.
Dat zijn vrijwel de basis die we nodig hebben om met de Camera in PhoneGap aan de slag te gaan. Speel er wat mee en probeer dingen uit met verschillende beeldkwaliteiten, soorten en maten.
Het is mogelijk dat we de foto ergens anders dan het fotoalbum op het apparaat willen bewaren. In feite is dit zeer waarschijnlijk het geval. We zullen waarschijnlijk ook andere informatie willen opslaan. Er zijn een paar manieren om dit te doen om de apparaatopslag te gebruiken, een daarvan is om WebSQL te gebruiken, de andere gebruikt WebStorage - beide zoals gedefinieerd door de W3C. U kunt de gegevens ook naar een externe server verzenden als u deze in een cloud-app wilt gebruiken (Instagr.am), of u kunt een stapje verder gaan en Lawnchair of PersistenceJS gebruiken
.
Ik geef persoonlijk de voorkeur aan de WebStorage-methode en voor dit project is het perfect.
We kunnen gebruik maken van WebStorage met de volgende syntaxis:
// Bewaar het data-window.localStorage.setItem ("key", "value"); / / haal de data var waarde = window.localStorage.getItem ("sleutel"); // waarde is nu gelijk aan "waarde" // verwijder de waarde window.localStorage.removeItem ("key"); Met deze basissyntaxis hebben we de mogelijkheid om de base64-gecodeerde afbeelding op te slaan in lokale opslag en deze op te halen wanneer we dit nodig hebben.
Geolocatie biedt locatie-informatie van het apparaat. Veel apparaten kunnen de mogelijkheid van de browser om de Geolocation API te gebruiken al gebruiken en als u de implementatie van de PhoneGap gebruikt, wordt deze gebruikt indien beschikbaar.
De Geolocation van PhoneGap heeft 3 methoden, getCurrentPosition, watchPosition en clearWatch. De getCurrentPosition methode retourneert de huidige locatie van het apparaat met een positieobject dat de eigenschappen bevat voor:
Het basisgebruik van de Geolocation-functionaliteit ziet er nu vrij bekend uit:
navigator.geolocation.getCurrentPosition (succes, fout);
En dan kunnen we iets als het volgende doen:
function onSuccess (positie) var el = document.getElementById ('location'); el.innerHTML = 'Breedtegraad:' + position.coords.latitude + '
'+' Lengtegraad: '+ position.coords.longitude +'
'+' Hoogte: '+ position.coords.altitude +'
'+' Nauwkeurigheid: '+ position.coords.accuracy +'
'+' Hoognauwkeurigheid: '+ position.coords.altitudeAccuracy +'
'+' Koers: '+ position.coords.heading +'
'+' Snelheid: '+ position.coords.speed +'
'+' Tijdstempel: '+ nieuwe datum (position.timestamp) +'
'; Uw volledige code moet er ongeveer als volgt uitzien:
Geolocation Geolocatie zoeken ...
Dit geeft je de positie-informatie op het moment dat de succes functie is geactiveerd. Als we constant de geolocatie van het apparaat willen bekijken, gebruiken we de navigator.geolocation.watchPosition methode in plaats van navigator.geolocation.getCurrentPosition, het doorgeven van de frequentie waarop we willen updaten. Onze code zou er nu ongeveer zo uit moeten zien:
Geolocation Geolocatie zoeken ...
Als u uw app nu uitvoert, zou u een app moeten krijgen die er als volgt uitziet:
Net als de versnellingsmeter heeft geolocatie ook een clearWatch methode om te stoppen met kijken naar wijzigingen, die u kunt gebruiken met de volgende code:
navigator.geolocation.clearWatch (watchID);
Daarmee hebben we nu de kennis om de geolocatie-API in PhoneGap te gebruiken voor onze applicatie. We willen misschien onze locatie op elk gewenst moment registreren en lokaal of op afstand opslaan, we willen misschien ook onze beweging in de loop van de tijd registreren en opslaan. Wat we er ook mee willen doen, we weten nu hoe we die informatie moeten krijgen.
Bovenop de functionaliteit die PhoneGap out of the box biedt, is er een schat aan plug-ins beschikbaar voor PhoneGap voor zaken als een datumkiezer, een uploader voor bestanden en Paypal. Omdat we geen plug-ins in deze app zullen gebruiken, valt het gebruik en de installatie van de plug-ins buiten het bereik van deze serie, maar je moet weten welke opties je hebt als je werkt met PhoneGap, dus zorg ervoor dat je de GitHub raadpleegt project voor plug-ins en de wiki voor informatie over hoe je ermee kunt werken. Als je een aparte tutorial over het gebruik van PhoneGap-plug-ins wilt zien en zelfs zelf wilt schrijven, laat het ons dan weten in de comments!
Hoewel we nog niet zijn begonnen met de ontwikkeling van een toepassing, zijn we nu met PhoneGap aan de slag en kunnen we testen op een apparaat en simulator, goed begrijpen hoe de API's van PhoneGap werken en hoe we de API in een app kunnen gebruiken. In het volgende deel zullen we beginnen met het bouwen van Sculder, onze voorbeeldtoepassing!
