Share
Vuoi imparare come usare PhoneGap, ma non sai da dove iniziare? Unisciti a noi mentre mettiamo insieme "Sculder", non solo un tributo ad una serie televisiva di fantascienza eccellente, ma un'applicazione mobile nativa a tutti gli effetti per il credente in te!
Nella nostra prima parte abbiamo esaminato la creazione del nostro ambiente di sviluppo e l'integrazione di PhoneGap sugli SDK iOS e Android. In questa seconda parte della nostra serie PhoneGap, esamineremo alcune delle API del dispositivo a cui PhoneGap ci consente di accedere e discutere su come utilizzarle.
Per questa parte della serie vedremo solo alcune delle funzionalità di PhoneGap, quindi per ora installeremo un test.
Vai avanti e imposta il tuo progetto in qualsiasi ambiente tu abbia scelto: Xcode per iOS o Eclipse per Android. Indicherò le differenze tra i due mentre procediamo se diventa necessario.
Iniziamo con alcuni HTML di base e includiamo il file Phongap.js. Se hai creato il tuo progetto con Xcode, questo è praticamente l'HTML di base che viene creato.
Accelerazione
In questa parte della serie vorremmo essere in grado di testare su almeno un dispositivo reale in quanto il simulatore ha dei limiti quando si tratta di sensori del dispositivo come l'accelerometro e la fotocamera. Per ottenere un dispositivo iOS attivo e funzionante come dispositivo di test è necessario disporre di un account sviluppatore a pagamento, quindi quando si connette il dispositivo al computer ed è in esecuzione Xcode, si ha la possibilità di rendere questo telefono un telefono di sviluppo. Passare attraverso la configurazione e ora quando si sceglie di costruire ed eseguire la tua app, è possibile selezionare il dispositivo dal menu a discesa.
Per Android, è praticamente lo stesso eccetto che lo fai in Eclipse. Collega il tuo telefono e assicurati di averlo in modalità debug VIA USB (nelle impostazioni del telefono) e poi quando vuoi eseguire la tua app, seleziona Esegui come app Android.
Diamo un'occhiata ad alcune delle nozioni di base sui sensori del dispositivo.
L'accelerometro fornisce feedback per il movimento dei dispositivi su tutti e tre gli assi. Abbiamo un paio di metodi per l'accelerometro all'interno di PhoneGap che sono getCurrentAcceleration, watchAcceleration e clearWatch
Ci sono anche alcuni argomenti da passare attraverso il metodo Accelerometro. accelerometerSuccess, accelerometerError e accelerometerOptions.
Usiamo il nostro primo metodo, accelerometer.getCurrentAcceleration, come segue.
navigator.accelerometer.getCurrentAcceleration (accelerometerSuccess, accelerometerError);
L'accelerazione corrente viene restituita usando la funzione accelerometro Successo e tutti i dati di cui abbiamo bisogno sono nel accelerazione obiettare che torniamo nella nostra funzione di successo. Consente di ottenere un esempio attivo e funzionante. Prendi il nostro layout di base che abbiamo impostato all'inizio di questa parte e aggiungiamoci.
Accelerazione
Quando lo esegui in un simulatore o dispositivo, verrai accolto con un singolo avviso al caricamento. Quello che dobbiamo fare è guardare l'accelerazione a intervalli e quindi emettere i dati. Possiamo farlo con il watchAcceleration metodo. Lo usiamo con il seguente:
var watchID = navigator.accelerometer.watchAcceleration (Success, Error, [Options]);
Il watchID è un riferimento al quale possiamo allegare le nostre opzioni e un modo che possiamo usare quando utilizziamo il clearWatch metodo.
Andiamo avanti e sostituiamo il nostro vecchio JavaScript con il seguente:
Accentsconagua
// attendi che PhoneGap carichi document.addEventListener ("deviceready", caricato, false); // PhoneGap è pronto function loaded () startWatch (); // Inizia a guardare la funzione di accelerazione startWatch () // Accelera l'aggiornamento ogni 3 secondi var options = frequency: 3000; watchID = navigator.accelerometer.watchAcceleration (onSuccess, onError, options); // Interrompe la visualizzazione della funzione di accelerazione stopWatch () if (watchID) navigator.accelerometer.clearWatch (watchID); watchID = null; // Success function onSuccess (acceleration) var element = document.getElementById ('accelerometro'); element.innerHTML = 'Accelerazione X:' + acceleration.x + '
'+' Accelerazione Y: '+ acceleration.y +'
'+' Accelerazione Z: '+ acceleration.z +'
'+' Timestamp: '+ acceleration.timestamp +'
'; // Funzione errore onError () alert ('onError!'); Come puoi vedere, passiamo a frequenza opzione nel metodo dell'orologio. Questo è in millisecondi, quindi ogni 3 secondi quel metodo verrà sparato di nuovo, e in caso di successo aggiorneremo l'HTML di un elemento con l'ID del accelerometro. Abbiamo solo bisogno di includere quell'elemento nel nostro HTML corrente.
Aspettando l'accelerometro ...
Ora, se vai avanti e carica l'app, vedrai il cambiamento dei dati dell'accelerometro.
Se si utilizzano i simulatori anziché i dispositivi reali, non si vedranno cambiamenti nell'uscita dell'accelerometro.
Quindi, è per l'accesso all'API del dispositivo accelerometro. Ora diamo un'occhiata a come usarlo per rilevare una scossa in PhoneGap.
Per rilevare una scossa usando PhoneGap, ci libereremo del nostro onSuccess funzione e riscrivi il nostro startWatch funzione. Per sapere se il dispositivo è stato scosso, dovremo sapere quale era l'orientamento precedente per poterlo confrontare con l'orientamento corrente. Lo facciamo impostando una variabile all'inizio del startWatch funzione.
var previousReading = x: null, y: null, z: null
Successivamente, iniziamo la funzione di accelerazione dell'orologio.
navigator.accelerometer.watchAcceleration ();
Al successo di ottenere l'accelerazione, imposteremo un paio di variabili che ci aiuteranno a rilevare una scossa.
var changes = , bound = 0.2;
Ora possiamo confrontare l'accelerazione precedente con l'accelerazione attuale e se va oltre ciò che abbiamo impostato limite anche variabile, quindi possiamo licenziare la nostra funzione scossa.
if (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); if (changes.x> bound && changes.y> bound && changes.z> bound) shaken ();
Possiamo quindi impostare la lettura precedente alla lettura corrente per la prossima volta.
previousReading = x: acceleration.x, y: acceleration.y, z: acceleration.z
Infine, non dimentichiamoci di scrivere una funzione "shaken" per gestire effettivamente lo shake. Per ora attenderà semplicemente un messaggio.
function shaken () alert ("Shaken"); Dovrai ricordarti di aggiungere il gestore degli errori e la frequenza fino alla fine sul watchAcceleration metodo.
Il tuo codice finale dovrebbe ora assomigliare a questo:
Accelerazione
Ho scoperto che il limite di 0,2 era abbastanza buono, ma potresti provare a aumentarlo dopo il test. Ora abbiamo coperto cosa è possibile ottenere con i dati dell'accelerometro e come acquisirlo, quindi diamo un'occhiata alla fotocamera.
La fotocamera è probabilmente una delle funzionalità più utilizzate oggi sugli smartphone, in particolare con la risoluzione della fotocamera sulla maggior parte dei telefoni che si avvicina rapidamente a più versioni point-and-shoot standard. Fortunatamente, PhoneGap ci offre un modo abbastanza semplice per acquisire immagini dalla fotocamera del dispositivo e incorporarle rapidamente nella nostra applicazione.
Il metodo che stiamo per utilizzare è camera.getPicture () e proprio come l'accelerometro è chiamato più o meno allo stesso modo e prende tre parametri. Le firme del metodo assomigliano a questo: navigator.camera.getPicture (cameraSuccess, cameraError, [cameraOptions]). Come vedrai, ci sono molte più opzioni da considerare quando si ha a che fare con la fotocamera del dispositivo rispetto a quando si ha a che fare con l'accelerometro.
I parametri facoltativi che puoi passare sono i seguenti:
qualitàdestinationTypesourceTypeAllowEditencodingTypetargetWidthtargetHeightCome avrai intuito, qualità è la qualità in cui viene salvata l'immagine, questo prende un numero compreso tra 0 e 100. Il destinationType variabile è il formato dell'immagine restituita. DATA_URL è una stringa codificata in base64 e FILE_URI è un URI immagine reale (jpeg / png). Il sourceType parametro è dove vuoi ottenere l'immagine sorgente, che può essere dal Photolibrary, TELECAMERA o SAVEDPHOTOALBUM. Il AllowEdit l'opzione consente di modificare l'immagine prima di essere salvata. EncodingType definisce la codifica dell'immagine restituita durante l'uso FILE_URI, da cui è possibile utilizzare entrambi JPEG o PNG. targetWidth e targetHeight è ciò che l'immagine verrà ridimensionata con le proporzioni mantenute. Finalmente, c'è Tipo di supporto che funziona solo quando si seleziona SAVEDPHOTOALBUM e dove potresti voler definire ciò che l'utente può selezionare IMMAGINE, VIDEO o Allmedia.
Quindi, facciamo partire la nostra videocamera. Per prima cosa avremo un pulsante che, una volta fatto clic, avvierà la nostra videocamera. Quindi, quando viene scattata la foto, restituiremo l'immagine base64 codificata come miniatura. Il codice sorgente assomiglia a questo:
Cattura foto
![]()
Come prima, aspettiamo che PhoneGap sia caricato. Al termine del caricamento, possiamo impostare le opzioni per destinationType e il sourceType, per impostazione predefinita, questi sono impostati su TELECAMERA e DATA_URL. Quando si fa clic sul pulsante, si attiva il capturePhoto funzione. Al successo, capturePhoto inizia il nostro getPhoto funzione. La nostra funzione riceve i dati dell'immagine nel formato che abbiamo specificato e possiamo fare quello che vogliamo. Tutto quello che stiamo facendo è ottenere un elemento HTML specificato e inserire i nostri dati nel src di quell'elemento.
Esegui e verifica il tuo codice sul tuo dispositivo e dopo aver scattato una foto e provato dovresti avere qualcosa che assomiglia di seguito:
È anche possibile modificare la foto dopo l'acquisizione, tutto ciò che dobbiamo fare è passare attraverso il allowEdit: true parametro nelle opzioni, dopo che la foto è stata scattata. Si sposterà nella schermata di modifica, dove è possibile ingrandire e ritagliare la foto. Possiamo usare il seguente codice quando acquisiamo l'immagine:
navigator.camera.getPicture (getPhoto, onFail, allowEdit: true);
Ci sono alcuni capricci al AllowEdit opzione degna di nota. Attualmente, questo funziona solo su iOS e viene ignorato in Blackberry, Android, Palm e Windows 7.
Se volessimo ottenere una foto dall'album fotografico o altra memoria (come lo store locale) useremmo pictureSource.PHOTOLIBRARY.
Queste sono praticamente le basi di cui abbiamo bisogno per iniziare a lavorare con la fotocamera in PhoneGap. Giocaci e prova alcune cose con qualità, tipi e dimensioni differenti.
È possibile che potremmo voler memorizzare la foto scattata in un luogo diverso dall'album fotografico sul dispositivo. In effetti, è molto probabile che sia così. Probabilmente vorremmo anche archiviare altre informazioni. Ci sono alcuni modi per utilizzare questo spazio per l'archiviazione del dispositivo, uno di questi è l'uso di WebSQL, l'altro l'utilizzo di WebStorage - entrambi come definito dal W3C. È anche possibile inviare i dati a un server remoto se si desidera servirlo in un'app cloud (Instagr.am), oppure si potrebbe fare un ulteriore passo avanti e utilizzare Lawnchair o PersistenceJS
.
Personalmente preferisco il metodo WebStorage e per questo progetto è perfetto.
Possiamo utilizzare WebStorage con la seguente sintassi:
// Salva i dati window.localStorage.setItem ("chiave", "valore"); // recupera i dati var value = window.localStorage.getItem ("chiave"); // il valore ora è uguale a "valore" // rimuove il valore window.localStorage.removeItem ("chiave"); Con questa sintassi di base, abbiamo la possibilità di memorizzare l'immagine codificata Base64 nella memoria locale e recuperarla quando è necessario.
La geolocalizzazione fornisce informazioni sulla posizione del dispositivo. Molti dispositivi possono già utilizzare la capacità del browser di utilizzare l'API di geolocalizzazione e, se si utilizza l'implementazione di PhoneGap, lo utilizza se disponibile.
La geolocalizzazione di PhoneGap ha 3 metodi, getCurrentPosition, watchPosition e clearWatch. Il getCurrentPosition metodo restituisce la posizione corrente del dispositivo con un oggetto posizione che contiene le proprietà per:
L'utilizzo di base della funzionalità di geolocalizzazione dovrebbe sembrare abbastanza familiare ora:
navigator.geolocation.getCurrentPosition (successo, errore);
E quindi possiamo fare qualcosa di simile al seguente:
function onSuccess (position) var el = document.getElementById ('location'); el.innerHTML = 'Latitude:' + position.coords.latitude + '
'+' Longitudine: '+ position.coords.longitude +'
'+' Altitudine: '+ position.coords.altitude +'
'+' Precisione: '+ position.coords.accuracy +'
'+' Precisione altitudine: '+ position.coords.altitudeAccuracy +'
'+' Intestazione: '+ position.coords.heading +'
'+' Velocità: '+ position.coords.speed +'
'+' Timestamp: '+ new Date (position.timestamp) +'
'; Il tuo codice completo dovrebbe apparire come il seguente:
geolocalizzazione Trovare la geolocalizzazione ...
Questo ti darà le informazioni sulla posizione nel momento in cui il successo la funzione è sparata. Se vogliamo guardare costantemente la geolocalizzazione del dispositivo, usiamo il navigator.geolocation.watchPosition metodo al posto di navigator.geolocation.getCurrentPosition, passandogli la frequenza su cui vorremmo aggiornare. Il nostro codice dovrebbe ora assomigliare a questo:
geolocalizzazione Trovare la geolocalizzazione ...
Se esegui la tua app ora, dovresti ritrovarti con un'app simile a questa:
Come l'accelerometro, anche la geolocalizzazione ha un clearWatch metodo per smettere di guardare per le modifiche, che è possibile utilizzare con il seguente codice:
navigator.geolocation.clearWatch (watchID);
Con questo, ora abbiamo le conoscenze per utilizzare l'API di geolocalizzazione in PhoneGap per la nostra applicazione. Potremmo semplicemente registrare la nostra posizione in qualsiasi momento e memorizzarla localmente o in remoto, potremmo anche voler registrare il nostro movimento nel tempo e memorizzarlo. Qualunque cosa vogliamo fare con esso, ora sappiamo come ottenere quell'informazione.
Oltre alle funzionalità offerte da PhoneGap, c'è una riserva di plug-in disponibile per PhoneGap per cose come il selezionatore di date, l'uploader di file e Paypal. Poiché non utilizzeremo alcun plugin in questa app, l'uso e l'installazione dei plug-in vanno oltre lo scopo di questa serie, ma dovresti sapere quali opzioni hai quando lavori con PhoneGap, quindi assicurati di controllare GitHub progetto per i plugin e il wiki per informazioni su come arrivare e correre con loro. Se desideri vedere un tutorial separato sull'uso dei plugin PhoneGap e persino scrivere il tuo, assicurati di farcelo sapere nei commenti!
Sebbene non abbiamo iniziato lo sviluppo di un'applicazione, ora siamo operativi e funzionanti con PhoneGap, in grado di testare su un dispositivo e un simulatore, avere una buona conoscenza di come funzionano le API di PhoneGap e di utilizzare l'API in un'app. Nella parte successiva, inizieremo a costruire Sculder, la nostra applicazione di esempio!
