Share
Doriți să aflați cum să utilizați PhoneGap, dar nu știți de unde să începeți? Alăturați-vă nouă pe măsură ce am pus împreună "Sculder", nu numai un tribut adus unei serii excelente de televiziune science fiction, ci o aplicație mobilă nativă pentru credinciosul în tine!
În prima noastră parte, ne-am uitat la crearea mediului nostru de dezvoltare și la preluarea PhoneGap pe serverele iOS și Android SDK. În această a doua parte a seriei PhoneGap, ne vom uita la unele dintre API-urile dispozitivului pe care PhoneGap le oferă accesului și vom discuta cum le putem folosi.
Pentru această parte a seriei vom studia doar o parte din funcționalitatea PhoneGap, așa că vom face un test pentru moment.
Mergeți și vă setați proiectul în orice mediu ați ales: Xcode pentru iOS sau Eclipse pentru Android. Voi sublinia toate diferențele dintre cele două, pe măsură ce vom merge, dacă va fi necesar.
Vom începe cu câteva coduri de bază și vom include fișierul Phongap.js. Dacă ați creat proiectul cu Xcode, acesta este destul de mult HTML-ul de bază care este creat.
Accelerare
De-a lungul acestei părți a seriei vom dori să putem testa pe cel puțin un dispozitiv real, deoarece simulatorul are limitări atunci când vine vorba de senzori de dispozitiv cum ar fi accelerometrul și camera. Pentru a face ca un dispozitiv iOS să funcționeze ca un dispozitiv de testare, trebuie să aveți un cont de dezvoltator plătit, atunci când conectați dispozitivul la computer și rulați Xcode, aveți opțiunea de a face acest telefon un telefon de dezvoltare. Treceți prin configurare și acum când alegeți să creați și să difuzați aplicația, puteți să vă selectați dispozitivul din meniul derulant.
Pentru Android, este cam la fel, cu excepția faptului că faceți asta în Eclipse. Conectați-vă telefonul și asigurați-vă că îl aveți în modul de depanare VIA USB (în setările telefonului) și apoi când doriți să rulați aplicația, selectați Executare ca aplicație Android.
Să aruncăm o privire la unele dintre elementele de bază ale senzorilor de dispozitiv.
Accelerometrul oferă feedback pentru mișcarea dispozitivelor pe toate cele trei axe. Avem câteva metode pentru Accelerometrul din PhoneGap care sunt getCurrentAcceleration, watchAcceleration și clearWatch
Există, de asemenea, câteva argumente care trec prin metoda Accelerometru. accelerometerSuccess, accelerometerError și accelerometerOptions.
Folosim prima noastră metodă, accelerometer.getCurrentAcceleration, după cum urmează.
navigator.accelerometer.getCurrentAcceleration (accelerometerSuccess, accelerometerError);
Accelerația curentă este returnată utilizând funcția de accelerometruSuccess și toate datele de care avem nevoie sunt în accelerare obiect că ne-am transferat înapoi în funcția noastră de succes. Să facem un exemplu și să fugim. Luați planul nostru de bază pe care l-am creat la începutul acestei părți și să adăugăm la acesta.
Accelerare
Când rulați acest lucru într-un simulator sau dispozitiv, veți fi întâmpinat cu o singură alertă privind încărcarea. Ceea ce trebuie să facem este să urmăriți accelerarea la intervale și apoi să transmiteți datele. Putem face acest lucru cu watchAcceleration metodă. Îl folosim cu următoarele:
var watchID = navigator.accelerometer.watchAcelerare (Succes, Eroare, [Opțiuni]);
watchID este o referință pe care o putem atașa opțiunile noastre și, de asemenea, o modalitate pe care o putem folosi atunci când folosim clearWatch metodă.
Să mergem mai departe și să înlocuim JavaScript mai vechi cu următoarele:
Accentsconagua
// așteptați ca PhoneGap să încarce document.addEventListener ("deviceready", încărcat, fals); // PhoneGap este gata de încărcare funcția încărcată () startWatch (); // Începeți să urmăriți funcția de accelerare startWatch () // Actualizați accelerația la fiecare 3 secunde var opțiuni = frecvență: 3000; watchID = navigator.accelerometer.watchAccelerare (onSuccess, onError, opțiuni); // Opriți vizionarea funcției de accelerare stopWatch () if (watchID) navigator.accelerometer.clearWatch (watchID); watchID = null; // Funcția de succes onSuccess (accelerare) var element = document.getElementById ('accelerometer'); element.innerHTML = 'Accelerare X:' + acceleration.x + '
'+' Accelerația Y: '+ acceleration.y +'
'+' Accelerație Z: '+ acceleration.z +'
'+' Timestamp: '+ acceleration.timestamp +'
„; // funcția de eroare onError () alert ('onError!'); După cum puteți vedea, trecem într-un frecvență opțiune în metoda ceasului. Aceasta este în milisecunde, deci la fiecare 3 secunde această metodă va fi trasă din nou, iar pe succes vom actualiza HTML-ul unui element cu ID-ul accelerometru. Trebuie doar să includem acel element în HTML actual.
Așteaptă accelerometrul ...
Acum, dacă continuați și încărcați aplicația, veți vedea schimbarea datelor privind accelerometrul.
Dacă utilizați simulatoarele mai degrabă decât dispozitivele reale, nu veți vedea nicio modificare a ieșirii accelerometrului.
Deci, asta este pentru accesarea API-ului dispozitivului de accelerometru. Acum, să aruncăm o privire asupra modului de utilizare a acesteia pentru a detecta o agitare în PhoneGap.
Pentru a detecta un shake folosind PhoneGap vom scăpa de noi onSuccess funcționează și ne rescrie startWatch funcţie. Pentru a afla dacă dispozitivul a fost zdruncinat, trebuie să știm ce orientare anterioară a fost pentru a compara această orientare actuală. Facem acest lucru prin setarea unei variabile la începutul startWatch funcţie.
var precedentReading = x: null, y: null, z: null
Apoi, pornim funcția WatchAcceleration.
navigator.accelerometer.watchAcceleration ();
Cu privire la succesul obținerii accelerației, vom stabili câteva variabile care ne vor ajuta să detectăm un șoc.
var modificări = , legat = 0,2;
Acum putem compara accelerația anterioară cu accelerația curentă și dacă depășește ceea ce ne-am stabilit legat variabilă, atunci putem să ne stingem funcția șocată.
dacă (anteriorReading.x! == null) changes.x = Math.abs (anteriorReading.x, acceleration.x); changes.y = Math.abs (anteriorReading.y, acceleration.y); changes.z = Math.abs (anteriorReading.z, acceleration.z); dacă (changes.x> bound && changes.y> obligat && changes.z> legat) shaken ();
Apoi putem seta citirea anterioară la citirea curentă pentru următoarea rundă de timp.
previousReading = x: acceleration.x, y: acceleration.y, z: acceleration.z
În cele din urmă, să nu uităm să scriem o funcție "scuturată" pentru a trata efectiv șocul. Pentru moment, va alerta doar un mesaj.
funcția shaken () alert ("Shaken"); Va trebui să vă amintiți să vă adăugați un handler de eroare și o frecvență la sfârșitul paginii watchAcceleration metodă.
Codul dvs. final trebuie să arate astfel:
Accelerare
Am constatat că limita de 0,2 a fost destul de bună, dar ați putea încerca să încercați să o creșteți după testare. Acum am acoperit ceea ce se poate obține cu datele accelerometrului și cum să-l capturăm, așa că să aruncăm o privire asupra camerei.
Aparatul foto este probabil una dintre cele mai utilizate funcționalități de pe telefoanele inteligente de astăzi, în special cu rezoluția camerei de pe majoritatea telefoanelor, care ajung rapid la versiuni mai standarde de tip point-and-shoot. Din fericire, PhoneGap ne oferă o modalitate destul de ușoară de a captura imagini din camera aparatului și de a le încorpora rapid în aplicația noastră.
Metoda pe care o vom folosi este camera.getPicture () și la fel ca și accelerometrul pe care îl cheamă în același mod și ia trei parametri. Semnătura metodei arată cam așa: navigator.camera.getPicture (cameraSuccess, cameraError, [cameraOptions]). După cum veți vedea, există mai multe opțiuni care trebuie luate în considerare atunci când se ocupă de aparatul foto decât atunci când se ocupă cu accelerometrul.
Parametrii opționali pe care îi puteți trece sunt după cum urmează:
calitatedestinationTypesourceTypeallowEditencodingTypetargetWidthtargetHeightAșa cum ați fi ghicit, calitate este calitatea căreia imaginea este salvată, aceasta durează un număr de la 0 la 100 destinationType variabila este formatul imaginii returnate. DATA_URL este un șir codificat de bază64 și FILE_URI este un URI imagine real (jpeg / png). sourceType parametru este locul în care doriți să obțineți imaginea sursă, care poate fi de la PHOTOLIBRARY, APARAT FOTO sau SAVEDPHOTOALBUM. allowEdit permite editarea imaginii înainte de a fi salvată. EncodingType definește codificarea imaginii returnate atunci când este utilizată FILE_URI, din care puteți utiliza fie JPEG sau PNG. targetWidth și targetHeight este ceea ce imaginea va fi redimensionată la raportul de aspect menținut. În cele din urmă, există MediaType care funcționează numai atunci când se selectează SAVEDPHOTOALBUM și unde ați putea dori să definiți ce poate selecta utilizatorul IMAGINE, VIDEO sau AllMedia.
Deci, hai să începem camera. Mai întâi vom avea un buton care atunci când se face clic va porni camera noastră. Atunci când fotografia este preluată, vom returna baza de imagine 64 codată ca miniatură. Codul sursă arată astfel:
Captură fotografie
![]()
Ca și înainte, așteptăm să fie încărcat PhoneGap. Când încărcarea este completă, putem seta opțiunile pentru destinationType si sourceType, în mod prestabilit, acestea sunt setate la APARAT FOTO și DATA_URL. Când faceți clic pe buton, aprindeți capturePhoto funcţie. După succes, capturePhoto începe cu noi getPhoto funcţie. Funcția noastră primește datele imaginii în formatul pe care l-am specificat și putem să facem ceea ce dorim. Tot ceea ce facem cu adevărat este obținerea unui element HTML specificat și punerea datelor noastre în src a acelui element.
Rulați și testați codul pe dispozitiv și după ce ați făcut o fotografie și ați testat, ar trebui să aveți ceva care arată mai jos:
De asemenea, este posibil să editați fotografia după captare, tot ceea ce trebuie să faceți este să treceți prin allowEdit: true parametru din opțiuni, după fotografiere. Se va muta în ecranul de editare, unde puteți mări și decupa fotografia. Putem folosi următorul cod când capturăm imaginea:
navigator.camera.getPicture (getPhoto, onFail, allowEdit: true);
Există unele ciudățenii la allowEdit opțiune de remarcat. În prezent, aceasta funcționează numai în iOS și este ignorată în BlackBerry, Android, Palm și Windows 7.
Dacă vrem să obținem o fotografie din albumul foto sau din alt spațiu de stocare (cum ar fi localstorage) pe care l-am folosi pictureSource.PHOTOLIBRARY.
Acestea sunt destul de multe lucruri de bază de care avem nevoie pentru a obține și a alerga cu camera în PhoneGap. Faceți-vă o pauză în jurul dvs. și încercați câteva lucruri cu calități diferite de imagine, tipuri și dimensiuni.
Este posibil ca am putea dori să stocăm fotografia făcută altundeva decât albumul foto de pe dispozitiv. De fapt, acest lucru este foarte probabil să fie cazul. Probabil că vom dori, de asemenea, să stocăm alte informații. Există câteva moduri de a utiliza acest lucru pentru a utiliza spațiul de stocare al dispozitivului, unul dintre ele să utilizeze WebSQL, celălalt utilizează WebStorage - ambele definite de W3C. Puteți, de asemenea, să trimiteți datele către un server la distanță dacă doriți să le difuzați într-o aplicație cloud (Instagr.am), sau puteți merge mai departe și utilizați Lawnchair sau PersistenceJS
.
Personal prefer metoda WebStorage și pentru acest proiect este perfect.
Putem folosi WebStorage cu următoarea sintaxă:
// Stocați fereastra de date.localStorage.setItem ("cheie", "valoare"); // extrageți datele var value = window.localStorage.getItem ("key"); // valoarea este acum egală cu "value" // elimină valoarea window.localStorage.removeItem ("key"); Cu această sintaxă de bază, avem capacitatea de a stoca imaginea codată base64 în spațiul de stocare local și să o recuperăm atunci când trebuie să.
Geolocația oferă informații despre locație ale dispozitivului. Multe dispozitive pot utiliza deja abilitatea browserelor de a utiliza API-ul Geolocation și dacă utilizați implementarea PhoneGap, acesta utilizează acest lucru dacă este disponibil.
Telefonul Geolocation al PhoneGap are 3 metode, getCurrentPosition, watchPosition și clearWatch. getCurrentPosition metoda returnează locația curentă a dispozitivului cu un obiect de poziție care conține proprietățile pentru:
Utilizarea de bază a funcției Geolocation ar trebui să pară destul de familiară până acum:
navigator.geolocation.getCurrentPosition (succes, eroare);
Și apoi putem face ceva de genul:
funcția onSuccess (poziție) var el = document.getElementById ('locație'); el.innerHTML = 'Latitudine:' + position.coords.latitude + '
'+' Longitudine: '+ position.coords.longitude +'
'+' Altitudine: '+ position.coords.altitude +'
'+' Acuratețe: '+ position.coords.accuracy +'
'+' Precizia altitudinii: '+ position.coords.altitudeAccuracy +'
'+' Rubrică: '+ position.coords.heading +'
'+' Viteza: '+ position.coords.speed +'
'+' Timestamp: '+ Data nouă (position.timestamp) +'
„; Codul dvs. complet ar trebui să arate după cum urmează:
Localizarea geografică Găsirea localizării ...
Acest lucru vă va oferi informații despre poziție în momentul în care succes funcția este declanșată. Dacă vrem să urmărim în mod constant geolocarea dispozitivului pe care îl folosim navigator.geolocation.watchPosition în locul metodei navigator.geolocation.getCurrentPosition, trecând frecvența pe care am dori să o actualizăm. Codul nostru ar trebui să pară așa:
Localizarea geografică Găsirea localizării ...
Dacă rulați acum aplicația dvs., ar trebui să încheiați cu o aplicație care arată astfel:
La fel ca accelerometrul, geolocația are, de asemenea, clearWatch metoda de a opri vizionarea pentru modificări, pe care o puteți utiliza cu următorul cod:
navigator.geolocation.clearWatch (watchID);
Cu aceasta, acum avem cunoștințele necesare pentru a utiliza API-ul geolocation în PhoneGap pentru aplicația noastră. Am putea dori doar să înregistrăm locația noastră la un moment dat și să o stocăm la nivel local sau de la distanță, am putea dori, de asemenea, să înregistrăm mișcarea noastră în timp și să stocăm asta. Indiferent ce vrem să facem cu ea, acum știm cum să obținem acele informații.
În plus față de funcționalitatea oferită de PhoneGap din cutie, există o teză de plugin-uri disponibile pentru PhoneGap pentru lucruri cum ar fi un selector de date, încărcător de fișiere și Paypal. Deoarece nu vom folosi niciun plugin în această aplicație, trecerea peste utilizarea și instalarea pluginurilor este dincolo de sfera acestei serii, dar ar trebui să știți ce opțiuni aveți atunci când lucrați cu PhoneGap, astfel că asigurați-vă că verificați GitHub proiect pentru plugin-uri și wiki pentru informații despre cum să te ridici și să fugi cu ei. Dacă doriți să vedeți un tutorial separat cu privire la utilizarea pluginurilor PhoneGap și chiar să vă scrieți propria dvs., asigurați-vă că ne spuneți în comentarii!
În timp ce nu am început să dezvoltăm o aplicație, acum lucrăm cu PhoneGap, putem testa pe un dispozitiv și un simulator, putem înțelege cum funcționează API-urile PhoneGap și cum putem folosi API-ul într-o aplicație. În următoarea parte, vom începe să construim Sculder, exemplul nostru de aplicare!
