Share
Vuoi imparare come scrivere un'applicazione mobile completa con PhoneGap, ma non sai come iniziare? Segui questa serie di tutorial in due parti e ti mostrerò come creare un'app mobile che traccia, registri e mappi il percorso degli esercizi utilizzando le funzioni GPS del telefono!
Questa sezione è una panoramica generale di ExerciseTracker, l'applicazione che costruiremo.
La pagina iniziale controlla che il telefono abbia una connessione di rete attiva (è necessario caricarlo
Google Maps per tracciare la via degli esercizi). Ha anche due pulsanti che sono utili per testare l'app, ma possono essere rimossi facilmente in seguito, se lo desideri.
La pagina Track Workout ha un singolo campo di immissione del testo che consente all'utente di inserire un nome o un ID per il proprio allenamento. Quando fanno clic su "Avvia tracciamento", il telefono inizierà a registrare la posizione GPS. Quando fanno clic su "Stop Tracking", i dati GPS vengono salvati sul telefono.
La pagina Cronologia elenca tutti gli allenamenti tracciati che l'utente ha completato.
La pagina Info traccia contiene informazioni specifiche sull'allenamento. Visualizza la distanza totale percorsa in chilometri e il tempo totale impiegato per l'allenamento, quindi traccia il percorso percorsa dall'utente su una mappa di Google.
La nostra applicazione, ExerciseTracker, verrà eseguita sulla piattaforma mobile PhoneGap. PhoneGap ci consente di creare facilmente applicazioni mobili utilizzando tecnologie web familiari come HTML 5, CSS e JavaScript, per poi distribuirle senza problemi come app native su piattaforme come iOS, Android e Windows Phone.
L'app tracker che realizzeremo utilizza le seguenti tecnologie:
In questa serie di esercitazioni in due parti, imparerai come utilizzare quanto sopra per creare un'applicazione PhoneGap completa.
La prima cosa che dobbiamo fare è impostare l'ambiente di sviluppo PhoneGap. PhoneGap offre un'ottima pagina iniziale che ti guida nella configurazione dell'ambiente di sviluppo PhoneGap per ciascuna delle diverse piattaforme mobili. Scegli la piattaforma che desideri sviluppare e segui le istruzioni per configurare l'applicazione PhoneGap di base. In questo tutorial, svilupperò su una configurazione Android (Android 4.0.3 API v15), tuttavia il codice in questo tutorial dovrebbe funzionare su tutte le piattaforme.
Ora dovresti avere un minimo index.html file che è possibile visualizzare sull'emulatore del dispositivo.
Iniziamo lo sviluppo della nostra app scaricando e includendo tutti i file JavaScript e CSS richiesti.
Scarica e copia ciascuno di questi file nella stessa directory di index.html e Cordova-1.7.0.js File.
In questa fase, la struttura delle directory della mia app per Android è simile alla seguente:
La tua struttura di directory dovrebbe assomigliare a questa.
Affinché la nostra applicazione utilizzi Google Maps, è necessario disporre di una chiave API. Le chiavi API sono gratuite per ottenere e supportare fino a 25.000 query al giorno. Segui la guida fornita da Google per registrare la tua chiave API. Annotarlo, poiché ne avremo bisogno nel prossimo passaggio!
Scriviamo la prima versione di index.html. Ciò includerà tutte le dipendenze di JavaScript e CSS che ExerciseTracker avrà.
ExerciseTracker Ciao mondo
Assicurati di sostituire YOUR_API_KEY_HERE con la tua attuale chiave API di Google Maps.
Dovresti essere in grado di avviarlo nel tuo emulatore e non ricevere errori.
Ora creiamo la Home page. jQueryMobile ci consente di definire la nostra interfaccia utente utilizzando tag HTML standard. Le pagine nella nostra app sono Benvenuto a ExerciseTracker app. Cliccando Monitora l'allenamento puoi registrare i tuoi allenamenti utilizzando la funzione GPS sul tuo telefono. Scopri come costruire questa app leggendo mobile.tutsplus.com. jQueryMobile analizza e interpreta i significati dei vari Ora dobbiamo verificare se l'utente ha accesso a Internet. In caso contrario, la mappa di Google non verrà caricata e l'app verrà crittografata. Iniziamo ascoltando il Traccia la pagina di allenamento Una volta terminata la pagina iniziale, ora possiamo iniziare a creare la pagina Track Workout. Il codice HTML / CSS per entrambe le pagine è simile, tuttavia nel Possiamo monitorare la posizione dell'utente utilizzando l'API PhoneGap Geolocation. Fornisce due funzioni principali: Il Ogni volta che viene chiamata la funzione "successo", viene passato un oggetto Posizione. Questo contiene informazioni sulla posizione GPS dell'utente, come la latitudine, la longitudine e l'altitudine. Ogni volta che la funzione "successo" viene chiamata in ExerciseTracker, aggiungiamo l'ultimo oggetto Posizione all'array In questo tutorial, abbiamo esaminato una panoramica dell'applicazione ExerciseTracker, abbiamo creato la pagina iniziale e iniziato a lavorare sulla pagina Track Workout. Nel prossimo tutorial, completeremo la pagina Track Workout e completeremo l'app ExerciseTracker consentendo all'utente di visualizzare gli allenamenti salvati tracciati su una mappa di Google. o elementi e liste sono costituiti da elementi. Descriviamo le informazioni semantiche su ciascuno di questi elementi definendo gli attributi dei dati. Ad esempio, il Dati-ruolo attributo dice a jQueryMobile il ruolo dell'elemento HTML e il Dati-icon attributo specifica quale icona verrà mostrata all'interno dell'elemento. Puoi vedere sotto come la home page è composta da elementi HTML con Dati-ruolo attributi.
Casa
Dati-ruolo, Dati di transizione, e Dati-icon attributi e applica automaticamente la formattazione CSS appropriata ad essi.
Controllo per l'accesso alla rete
deviceready evento che viene attivato quando PhoneGap ha terminato il caricamento. Quindi usiamo l'API PhoneGap Connection per interrogare se abbiamo accesso a Internet. Se non disponiamo dell'accesso a Internet, è necessario aggiornare il pulsante nella pagina iniziale. Aggiorniamo il testo, impostiamo una nuova icona e chiamiamo il Pulsante ( 'Aggiorna') metodo, che forza jQuery Mobile a ridisegnare il pulsante. document.addEventListener ("deviceready", function () if (navigator.network.connection.type == Connection.NONE) $ ("# home_network_button"). text ('No Internet Access') .attr ("data- icon "," delete ") .button ('refresh'););
Costruire la pagina di allenamento della traccia
data-role = "content" sezione della pagina Track Workout, definiamo un campo di testo (per l'utente per inserire un nome per il loro allenamento) e due pulsanti che iniziano e fermano l'allenamento.
Monitora l'allenamento
Tracciamento dei movimenti dell'utente
getCurrentPosition () e watchPosition (). Il getCurrentPosition () la funzione verrebbe utilizzata quando si desidera ottenere una correzione una tantum nella posizione dell'utente (ad esempio il salvataggio della posizione dell'utente quando scatta una foto). La nostra app userà watchPosition () per fare questo, che regolarmente sondaggi la funzionalità GPS del telefono e riceve aggiornamenti costanti sulla posizione dell'utente.watchPosition () accetta tre argomenti. La prima è una funzione che viene chiamata ogni volta che il telefono restituisce correttamente una posizione GPS, la seconda è una funzione chiamata quando c'è un errore GPS e la terza è un oggetto di impostazioni.tracking_data. var track_id = "; // Nome / ID dell'esercizio var watch_id = null; // ID della geolocalizzazione var tracking_data = []; // Array contenente oggetti posizione GPS $ (" # startTracking_start "). live ('clic' , function () // Inizia a tracciare l'utente watch_id = navigator.geolocation.watchPosition (// funzione Success (posizione) tracking_data.push (posizione);, // Funzione errore (errore) console.log (errore) ;, // Settings frequency: 3000, enableHighAccuracy: true); // Tidy up UI track_id = $ ("# track_id"). Val (); $ ("# track_id"). Hide (); $ ("#startTracking_status"). html ("Monitoraggio dell'allenamento: "+ track_id +""););
Conclusione
Accentsconagua