Accentsconagua
Share
NativeScript este un cadru pentru construirea de aplicații mobile native de tip cross-platform utilizând XML, CSS și JavaScript. În această serie, vom încerca câteva lucruri interesante pe care le puteți face cu o aplicație NativeScript: geolocația și integrarea Google Maps, baza de date SQLite, integrarea Firebase și notificările push. Pe parcurs, vom construi o aplicație de fitness cu capabilități în timp real care vor utiliza fiecare dintre aceste caracteristici.
În acest tutorial, veți învăța cum să lucrați cu geolocația și Google Maps în aplicații NativeScript.
Presupun că deja știți cum să creați aplicații în NativeScript. Dacă sunteți nou la NativeScript, vă recomand să verificați mai întâi una dintre cele mai vechi tutoriale din NativeScript înainte de a încerca să urmați acest tutorial.
Veți crea un tracker de mers pe jos folosind geolocația și Google Maps. Acesta va arăta utilizatorului cât de mult distanță au acoperit și numărul de pași pe care i-au luat pentru a acoperi acea distanță. De asemenea, va fi o hartă care va afișa locația curentă a utilizatorului.
Pentru a vă oferi o idee, iată cum arata rezultatul final:
Începeți prin a crea o nouă aplicație NativeScript:
tns a crea fitApp --appid "com.yourname.fitApp"
Pentru a facilita configurarea interfeței UI a aplicației, am creat un replică GitHub care include atât versiunea inițială cât și versiunea finală a proiectului. Puteți continua și copiați conținutul aplicaţia dosarul proiectului aplicaţia pliant. Vom lucra numai cu două fișiere: Principalul-page.xml și Principalul-page.js fişier. Restul este doar boilerplate din proiectul demo NativeScript.
Vom folosi emulatorul Android oferit de Android Studio pentru a testa aplicația. Acest lucru ne va permite să folosim emulatorul GPS Android pentru a simula schimbarea locațiilor din confortul casei noastre. Nu-mi place foarte mult să merg pe jos în afară pentru a testa geolocația fie! Dar dacă asta e treaba ta, nu te voi opri.
Dacă executați tns rula Android, acesta va apela automat emulatorul Android dacă este deja instalat. Dacă nu este încă instalat, îl puteți instala lansând aplicația Android Studio, făcând clic pe configurați, și selectarea Manager SDK. Aceasta va deschide Platformele SDK în mod implicit. Faceți clic pe Instrumentele SDK și asigurați-vă că ați selectat Android Emulator, și faceți clic pe aplica pentru ao instala.
Pentru a utiliza emulatorul GPS, descărcați-l de la GitHub și executați executabilul război fişier:
java -jar android-gps-emulator-0.2.war
Odată ce ați terminat, ar trebui să aveți acces http: // localhost: 8080 / gpsemulator / din browserul dvs. și conectați-vă la gazdă locală. Asigurați-vă că emulatorul Android se execută deja atunci când faceți acest lucru. Odată ce sunteți conectat (ă), pur și simplu măriți harta și faceți clic pe orice loc doriți să îl utilizați ca locație. Aplicația va detecta acest lucru și îl va utiliza ca locație curentă.
Geolocation-ul în NativeScript este similar cu API-ul Geolocation în JavaScript. Singura diferență de funcționalitate este adăugarea unui a distanţă() funcție care este utilizată pentru calcularea distanței dintre două locații.
Pentru a lucra cu geolocația, trebuie mai întâi să instalați pluginul geolocation:
pluginul tns adaugă nativescript-geolocație
Odată ce ați terminat, puteți să o includeți acum din fișierele de script:
var geolocation = necesită ("nativescript-geolocation");Pluginul Geolocation NativeScript include trei funcții pe care le puteți utiliza pentru a lucra cu locația curentă a utilizatorului. Vom folosi fiecare dintre acestea în această aplicație:
getCurrentLocationwatchLocationdistanţăDeschide Vedere la Main-model.js fișier și adăugați următorul cod în interiorul createViewModel () funcţie. Aici inițializăm variabilele pe care le vom folosi ulterior pentru stocarea diferitelor valori necesare pentru a urmări locația utilizatorului.
Am adăugat câteva comentarii în cod pentru a ști ce se întâmplă. Există, de asemenea, câteva linii de cod care sunt comentate; acestea sunt pentru integrarea Google Maps. I-am comentat pentru ca acum să păstreze lucrurile simple. Odată ce ajungem la integrarea Google Maps, va trebui să eliminați aceste comentarii.
funcția createViewModel () var viewModel = new Observable (); var watchd; // stochează ID-ul observatorului locației astfel încât să îl putem opri mai târziu var start_location; // stochează locația utilizatorului când au început să urmărească var current_location; // stochează locația curentă a utilizatorului viewModel.is_tracking = false; // dacă locația utilizatorului este în prezent urmărită sau nu //viewModel.latitude = 15.447819409392789; //viewModel.longitude = 120.93888133764267; //viewModel.zoom = 20; var total_distance = 0; var total_steps = 0; var locații = []; // array care va stoca locațiile // var mapView; // var marker = hărți noiModule.Marker (); dacă (! geolocation.isEnabled ()) // verificați dacă geolocarea nu este activată geolocation.enableLocationRequest (); // cereți-i utilizatorului să-l activa // next: adăugați codul pentru obținerea locației curente a utilizatorului
Apoi, adăugați codul pentru obținerea locației curente a utilizatorului. Acest cod este executat atunci când utilizatorul face clic pe butonul pentru pornirea și oprirea urmăririi locației. geolocation.getCurrentLocation () metoda este folosită pentru a obține locația curentă.
Aici am specificat trei opțiuni: desiredAccuracy, updateDistance, și pauză. desiredAccuracy vă permite să specificați precizia în metri. Are două valori posibile: Accuracy.high, care este de aproximativ 3 metri, și Accuracy.any, care este de aproximativ 300 de metri. updateDistance specifică câtă diferență (în metri) trebuie să existe între locația anterioară și locația curentă înainte ca aceasta să se actualizeze. în cele din urmă, pauză specifică câte milisecunde să aștepte o locație.
Odată ce o locație este primită, o setăm ca fiind START_LOCATION și împingeți-l pe locații matrice. Mai târziu, această locație va fi utilizată împreună cu prima locație care va fi extrasă din vizionarea locației curente a utilizatorului pentru a determina distanța parcursă.
viewModel.toggleTracking = funcția () if (geolocation.isEnabled ()) this.set ('is_tracking',! viewModel.is_tracking); // rotiți butonul pentru urmărire dacă (viewModel.is_tracking) geolocation.getCurrentLocation (requestAccuracy: Accuracy.high, // actualizare acuratețe 3 metriDispoziție: 5, // 5 metri timeout: 2000 // 2 secunde). apoi (funcția (loc) if (loc) start_location = loc; locations.push (start_location); //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude', loc. longitudine);, funcția (e) dialogs.alert (e.message);); // next: adăugați codul pentru a viziona locația curentă a utilizatorului altfel // următorul: adăugați codul pentru a nu mai viziona locația curentă a utilizatorului altceva dialogs.alert ("Activați Geolocația"); Pentru a obține locația curentă, folosim geolocation.watchLocation () funcţie. Această funcție este similară cu funcția setInterval () funcția în JavaScript, deoarece execută, de asemenea, funcția de apel în mod repetat până când o opriți cu geolocation.clearWatch () funcţie. Funcția de apel invers este apelată automat în funcție de updateDistance și minimumUpdateTime.
În codul de mai jos, locația va fi actualizată dacă este de cel puțin 5 metri diferită de locația anterioară care a fost preluată. Dar această actualizare se va întâmpla doar la fiecare 5 secunde. Acest lucru înseamnă că, dacă utilizatorul nu a trecut de 5 metri sau mai mult în 5 secunde, locația nu va fi actualizată.
watchId = geolocation.watchLocation (funcția (loc) if (loc) current_location = loc; // next: adăugați codul pentru obținerea distanței între două locații, funcția (e) dialogs.alert (e.message); , requestedAccuracy: Accuracy.high, updateDistance: 5, // 5 metri minimumUpdateTime: 5000 // actualizare la fiecare 5 secunde);
Odată ce utilizatorul indică faptul că dorește să oprească urmărirea, trebuie să apelați geolocation.clearWatch () funcţie. De asemenea, trebuie să resetați restul valorilor care se actualizează de fiecare dată când se modifică locația.
geolocation.clearWatch (watchId); // nu mai urmăriți locația utilizatorului total_distance = 0; total_steps = 0; locații = []; viewModel.set ("distanța", "distanța parcursă:" + total_distance + "meters"); viewModel.set ('pași', 'pași:' + total_steps);Acum suntem gata să obținem distanța. Acest lucru se poate face apelând geolocation.distance () funcţie. Această funcție acceptă două Locație obiecte ca argumente, așa că vom folosi ultimele două locații care au fost împinse la locații pentru a determina distanța (în metri) parcursă de utilizator de la o locație înregistrată anterior până la cea curentă. De acolo, putem folosi o conversie aproximativă de la metri la numărul de pași - spun aproximativ, pentru că nu toți oamenii vor călători la aceeași distanță într-un singur pas.
După aceea, putem adăuga rezultatul distanţă și pași la distanta totala și TOTAL_STEPS astfel încât să putem urmări distanța totală și pașii pe care i-au luat de când au început să urmărească locația lor.
locations.push (loc); //viewModel.set('latitude ', loc.latitudine); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); location_count = locations.length; dacă location_count> = 2) var distance = Math.round (geolocation.distance (locații [location_count - 2], locații [location_count - 1])); // obține distanța dintre ultimele două locații var pași = Math.round (distanța * 1.3123); // determina numărul aproximativ de pași // adăugați distanța curentă la distanța totală parcursă total_distance = total_distance + distanță; total_steps = total_steps + pași; // actualizați vizualizarea UIModel.set ("distanța", "distanța parcursă:" + total_distance + "meters"); viewModel.set ('pași', 'pași:' + total_steps); În acest moment, puteți începe testarea aplicației utilizând emulatorul GPS pe care l-am menționat mai devreme. Rețineți că trebuie să loviți Salvați pe Vedere la Main-model.js fișier pentru a declanșa încărcarea unei aplicații.
Apoi, alegeți o locație în emulatorul GPS, astfel încât o aplicație nouă să fie încărcată de o aplicație imediat după încărcare. Dacă nu faceți acest lucru, acesta va fi implicit la locația Googleplex din Mountain View, California. Aceasta înseamnă că data viitoare când alegeți o locație pe emulator, aceasta va sari de la această locație la locația pe care ați ales-o. Dacă este departe, atunci veți obține un număr foarte mare pentru distanță și pași.
Alternativ, puteți testa pe un dispozitiv real cu internet și GPS activat. Doar GPS-ul este necesar în acest moment, dar odată ce adăugăm Hărți Google, aplicația va avea nevoie de o conexiune la internet.
Vom utiliza Google Maps pentru a adăuga o hartă care să afișeze locația curentă a utilizatorului.
pluginul tns adaugă nativescript-google-maps-sdk
Odată instalat, trebuie să copiați fișierele șir de șir de șabloane pentru Android:
cp -r node_modules / nativescript-google-maps-sdk / platforme / android / res / values app / App_Resources / Android /
Apoi, deschideți app / App_Resources / Android / valori / nativescript_google_maps_api.xml fișier și adăugați-vă propria cheie API Google Maps (cheie server):
APLICAȚI APICIILE TELEFONULUI GOOGLE MAI APĂ aici
Asigurați-vă că ați activat Google Maps Android API din Consola Google înainte de a încerca să-l utilizați.
Pentru hartă, deschideți Principalul-page.xml fișier și ar trebui să vedeți următoarele:
Aici am specificat trei opțiuni (longitudine, latitudine, și zoom) și o funcție de executat odată ce harta este gata. longitudine și latitudine specificați locația pe care doriți să o afișați pe hartă. zoom specifică nivelul de zoom al hărții. mapReady este locul în care specificăm funcția de adăugare a marcatorului pe hartă. Acest marcator reprezintă locația curentă a utilizatorului, astfel încât acesta va fi redat în centrul hărții.
În mod implicit, acest lucru nu va funcționa, deoarece încă nu ați adăugat definiția schemei pentru hărți. Deci în tine Pagină element, adăugați definiția pentru hărţi element:
După ce sa terminat, o instanță a hărții Google ar trebui să fie redată chiar sub butonul pentru urmărirea locației. Nu va mai avea hărți încă de la latitudine și longitudine nu au fost încă specificate. Pentru a face asta, du-te înapoi la Vedere la Main-model.js fișier și eliminați comentariile pentru liniile de cod pentru a lucra cu Google Maps:
// coordonate implicite viewModel.latitude = 15.447819409392789; viewModel.longitude = 120.93888133764267; viewModel.zoom = 20; // implicit hartă zoom nivel var mapView; // variabila pentru stocarea instanței actuale a hărții var marker = hărți noiModule.Marker (); // variabila pentru stocarea instanței markerului
Deoarece am afirmat deja coordonatele implicite pentru marcator, putem competa un marcator odata ce harta este gata:
viewModel.onMapReady = funcția (args) mapView = args.object; // obține harta de vizualizare marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); // setați poziția marcatorului pe harta mapView.addMarker (marker); // adăugați marcatorul pe hartă
Apoi, trebuie să actualizăm poziția marcatorului după ce utilizatorul începe să urmărească locația. Puteți face acest lucru în interiorul funcției de recuperare a succesului pentru getCurrentLocation () funcţie:
locations.push (start_location); // eliminați comentariile pentru următoarele: //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); De asemenea, trebuie să îl actualizăm atunci când se actualizează locația utilizatorului (în interiorul funcției de apel de succes pentru watchLocation):
current_location = loc; locations.push (loc); // eliminați comentariile pentru următoarele: //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); După ce sa terminat, ar trebui să apară în aplicație o hartă care face locația implicită.
În acest tutorial, ați creat o aplicație NativeScript care permite utilizatorului să urmărească distanța pe care au acoperit-o și numărul aproximativ de pași pe care l-au luat pentru a acoperi acea distanță. De asemenea, ați folosit Google Maps pentru a permite utilizatorului să vizualizeze locația curentă. Procedând astfel, ați învățat cum să utilizați pluginurile Google pentru geolocație și Google Maps pentru NativeScript.
Acesta este doar începutul! În următoarele postări ale acestei serii, vom adăuga o bază de date locală, notificări push și alte caracteristici interesante pentru aplicația noastră.
Între timp, verificați unele dintre celelalte postări ale noastre privind codarea mobilă NativeScript și mobile pe mai multe platforme.
Pentru o introducere cuprinzătoare la NativeScript, încercați cursul nostru video Cod un App Mobile Cu NativeScript. În acest curs, Keyvan Kasaei vă va arăta pas cu pas cum să construiți o aplicație simplă. Pe parcurs, veți învăța cum să implementați un flux de lucru simplu cu cereri de rețea, o arhivă MVVM și unele dintre cele mai importante componente UI de pe NativeScript. Până la urmă, veți înțelege de ce ar trebui să luați în considerare sistemul NativeScript pentru următorul proiect de aplicație mobilă.
