Creați un App Tracking Exercise Geolocation & Tracking

Doriți să aflați cum să scrieți o aplicație mobilă completă utilizând PhoneGap, dar nu știți cum să începeți? Urmați această serie de instrucțiuni din două părți și vă vom arăta cum să creați o aplicație mobilă care să urmărească, să înregistreze și să vă găsească ruta exercițiilor utilizând funcțiile GPS de pe telefonul dvs.!

rezumatul proiectului

Această secțiune este o prezentare generală a aplicației ExerciseTracker, aplicația pe care o vom construi.

Pagina de pornire verifică dacă telefonul are o conexiune activă la rețea (avem nevoie de aceasta pentru încărcare
Hărți Google pentru a compila traseul de exerciții). De asemenea, are două butoane care sunt utile pentru testarea aplicației, dar pot fi eliminate cu ușurință mai târziu, dacă se dorește.

Pagina de antrenament pe pistă conține un singur câmp de introducere a textului pentru ca utilizatorul să introducă un nume sau un ID pentru antrenament. Când fac clic pe "Porniți urmărirea", telefonul va începe să înregistreze locația GPS. Când fac clic pe "Stop Tracking", datele GPS sunt salvate pe telefon.

Pagina History (istoric) enumeră toate antrenamentele urmărite pe care le-a finalizat utilizatorul.

Pagina cu informații despre cursă prezintă informații specifice antrenamentului. Afișează distanța totală parcursă în kilometri și timpul total necesar pentru antrenament și apoi trasează ruta pe care utilizatorul a călătorit-o pe o hartă Google.

Tehnologii implementate

Aplicația noastră, ExerciseTracker, va fi rulată pe platforma mobilă PhoneGap. PhoneGap ne permite să creăm cu ușurință aplicații mobile folosind tehnologii web cunoscute, cum ar fi HTML 5, CSS și JavaScript, și apoi să le implementăm fără probleme ca aplicații native pe platforme precum iOS, Android și Windows Phone.

Aplicația de urmărire a exercițiilor pe care o vom construi utilizează următoarele tehnologii:

Aplicația API pentru localizarea telefonului
jQueryMobile
Aplicația JavaScript API pentru Google Maps
HTML5 și stocare locală

În această serie de tutoriale în două părți, veți învăța cum să utilizați cele de mai sus pentru a construi o aplicație telefonică completă.

Început de dezvoltare

Configurarea PhoneGap

Primul lucru pe care trebuie să-l facem este să configurați mediul de dezvoltare PhoneGap. PhoneGap oferă o pagină de pornire excelentă, care vă ajută să configurați mediul de dezvoltare PhoneGap pentru fiecare platformă mobilă. Alegeți platforma pe care doriți să o dezvoltați și urmați instrucțiunile pentru a configura aplicația de bază PhoneGap. În acest tutorial, voi fi în curs de dezvoltare pe o configurație Android (Android 4.0.3 API v15), dar codul din acest tutorial ar trebui să funcționeze pe toate platformele.

Ar trebui să aveți acum un minim index.html fișier pe care îl puteți vizualiza pe emulatorul dispozitivului.

Dependențe și scripturi

Să începem dezvoltarea aplicației noastre prin descărcarea și includerea tuturor fișierelor JavaScript și CSS necesare.

jQuery-1.7.2.min.js
jquery.mobile-1.1.0.zip
- jquery.mobile.1.1.0.min.css
- jquery.mobile-1.1.0.min.js
- images /
json2.js
exercisetracker.js (creați acest lucru, JS nostru va merge aici)

Descărcați și copiați fiecare dintre aceste fișiere în același director ca și index.html și Cordova-1.7.0.js fișiere.

În această etapă, structura de directoare a aplicației mele Android arată astfel:

Structura directorului ar trebui să arate așa.

Cheia API-ului Google Maps

Pentru ca aplicația noastră să utilizeze Google Maps, trebuie să avem o cheie API. Cheile API sunt gratuite pentru a primi și susține până la 25.000 de interogări pe zi. Urmați ghidul pe care Google îl oferă pentru a vă înregistra cheia API. Rețineți acest lucru, deoarece vom avea nevoie de el în etapa următoare!

Schelet index.html

Să scriem prima versiune a index.html. Aceasta va include toate dependențele JavaScript și CSS pe care le va avea ExerciseTracker.

    ExerciseTracker          Salut Lume

Asigurați-vă că ați înlocuit-o YOUR_API_KEY_HERE cu cheia API Google Maps reală.

Ar trebui să puteți lansa acest lucru în emulator și să nu primiți erori.

Crearea paginii principale

Acum permiteți crearea paginii principale. jQueryMobile ne permite să definim interfața noastră de utilizator folosind etichete HTML standard. Paginile din aplicația noastră sunt

elemente, butoane sunt

jQueryMobile analizează și interpretează semnificațiile diferitelor date-rol, date de tranziție, și date-icon atribute și aplică automat formatul CSS corespunzător acestora.

Verificarea accesului la rețea

Acum trebuie să verificăm dacă utilizatorul are acces la internet. Dacă nu, atunci Google Map nu se va încărca și aplicația va fi criptoasă.

Începem prin a asculta pentru deviceready eveniment care este declanșat când PhoneGap sa terminat de încărcat. Apoi folosim API-ul de conectare PhoneGap pentru a interoga dacă avem acces la Internet. Dacă nu avem acces la Internet, atunci trebuie să actualizăm butonul din pagina principală. Actualizăm textul, setăm o nouă pictogramă și sunăm Butonul ( „reîmprospătare“) , care forțează jQuery Mobile să redescopere butonul.

 document.addEventListener ("deviceready", funcția () if (navigator.network.connection.type == Connection.NONE) $ ("# home_network_button" icon "," șterge ") .button ('refresh'););

Construirea paginii de antrenament pe pistă

Urmăriți pagina de antrenament

Cu pagina de start terminată, putem începe acum să realizăm pagina de antrenament. Codul HTML / CSS pentru ambele pagini este similar, cu toate acestea în date-rol = „conținut“ secțiunea din pagina Traseu de urmărire, definim un câmp de text (pentru ca utilizatorul să introducă un nume pentru antrenament), precum și două butoane care pornesc și opresc antrenamentul.

   Urmăriți antrenamentul
   Acasă
 Urmăriți antrenamentul
 Istorie
 
 
 
    ID-ul / numele piesei:

Urmărirea mișcărilor utilizatorului

Putem monitoriza locația utilizatorului folosind API Geolocation PhoneGap. Acesta oferă două funcții principale: getCurrentPosition () și watchPosition (). getCurrentPosition () funcția ar fi utilizată atunci când doriți să obțineți o reparație unică în locația utilizatorului (cum ar fi salvarea locației utilizatorului atunci când fac o fotografie). Aplicația noastră va fi utilizată watchPosition () pentru a face acest lucru, care aude în mod regulat caracteristica GPS a telefonului și primește actualizări constante asupra locației utilizatorului.

watchPosition () acceptă trei argumente. Prima este o funcție care se numește de fiecare dată când telefonul returnează cu succes o locație GPS, a doua este o funcție care se numește atunci când există o eroare GPS, iar a treia este un obiect de setări.

De fiecare dată când se numește funcția "succes", se trece un obiect Poziție. Aceasta conține informații despre poziția GPS a utilizatorului, cum ar fi latitudinea, longitudinea și altitudinea. Ori de câte ori funcția de "succes" este chemată în ExerciseTracker, adăugăm cel mai recent obiect Position la matrice tracking_data.

 var track_id = "; // Nume / ID al exercițiului var watch_id = null; // ID al locației geolocationului var tracking_data = []; // Array care conține obiecte de poziție GPS $ (" # startTracking_start " , funcția () // Începeți urmărirea utilizatorului watch_id = navigator.geolocation.watchPosition (// Funcția de succes (poziție) tracking_data.push (poziție);, // Funcția de eroare (eroare) console.log ;, // Setări frecvență: 3000, enableHighAccuracy: true); // Tidy up UI track_id = $ ("# track_id"). ("#startTracking_status"). html ("Antrenament de urmărire: "+ track_id +""););

Concluzie

În acest tutorial, am analizat o privire de ansamblu a aplicației ExerciseTracker, am construit pagina principală și am început să lucrez la pagina Workout. În următorul tutorial, vom completa pagina de antrenament tracker și vom termina aplicația ExerciseTracker, permițând utilizatorului să vizualizeze antrenamente salvate întocmite pe o hartă Google.

Cod