Accentsconagua
Share
Ce veți creaÎn această ultimă tranșă din seria Ionic de început, veți învăța cum să utilizați Cordova pentru a adăuga capabilități hardware pentru dispozitiv în aplicația dvs. Vom analiza modul de utilizare a funcțiilor precum geolocația și vă voi arăta cum să vă integrați în biblioteca ngCordova pentru a finaliza aplicația noastră. Veți dori să vă asigurați că ați instalat aparatul dvs. pentru ioni înainte de a începe și asigurați-vă că aveți și instrumentele dvs. specifice platformei.
Fișierele de proiect tutorial sunt disponibile pe GitHub. Premisa generală a aplicației este că aceasta arată câteva informații despre facilitățile din apropierea dvs. În acest tutorial, adăugăm abilitatea de a căuta locația curentă și de a afișa rezultate aproape de dvs. Puteți vedea exemplul de lucru aici.
Dacă clonați proiectul, puteți, de asemenea, să codificați folosind Git și să rulați git checkout -b start. Această codare pentru această lecție începe în cazul în care ultimul post, Noțiuni de bază cu ionic: Navigare lăsat off. De asemenea, puteți previzualiza punctul de pornire live.
Înainte de a scrie orice cod, trebuie să ne stabilim proiectul. Ionic va stabili deja un proiect de bază Cordova, dar noi trebuie să inițializăm câteva lucruri suplimentare pe noi înșine.
În primul rând, trebuie să instalăm biblioteca ngCordova. Acesta este un modul Angular care face mult mai ușor utilizarea unor dintre cele mai populare pluginuri Cordova. (Deși nu toate pluginurile sunt suportate de ngCordova.) Bower este folosit pentru a instala această dependență.
În al doilea rând, trebuie să adăugăm o platformă proiectului nostru. Aceasta va fi ios sau Android (sau ambele!), în funcție de platforma pe care o alegeți să o sprijiniți. Am folosit-o ios în exemplele mele, dar le poți înlocui Android pentru a realiza același lucru pentru platforma respectivă.
În al treilea rând, vom instala pluginul de geolocation pentru Cordova. Acest lucru îmbunătățește aplicația dvs. cu posibilitatea de a obține locația curentă a utilizatorului (care necesită permisiune). Puteți vedea o listă a tuturor pluginurilor la https://cordova.apache.org/plugins/, cu detalii despre configurarea fiecăruia.
Următoarele comenzi trebuie executate din rădăcina proiectului pentru a face acești trei pași de configurare.
node_modules / .bin / bower instalare ngCordova platformă ionică adăugați ios # sau android plugin pentru ioni adăugați cordova-plugin-geolocation
Odată ce aceasta a fost finalizată, trebuie să adăugăm ngCordova la aplicație, astfel încât este recunoscută de Ionic. Deschideți www / index.html fișier și adăugați următoarea linie după ionic.bundle.js fişier.
Apoi trebuie să actualizăm www / js / app.js fișier pentru a include modulul ngCordova. Prima linie trebuie actualizată să apară după cum urmează.
angular.module ("App", ["ionic", "ngCordova")]Acum, când ne-am actualizat dependențele, proiectul nostru este gata să utilizeze pluginul de geolocație. Următorul pas este să configurați o nouă vizualizare pentru a începe să o utilizați!
Vom crea un nou ecran de destinație pentru aplicație. Acest ecran afișează un mesaj despre utilizarea locației curente a utilizatorului pentru a găsi locații din apropiere. Ei vor apăsa un buton pentru a confirma că doresc ca aplicația să acceseze locația lor și apoi să afișeze lista de locații care reflectă locația lor curentă.
Datele despre locația utilizatorului reprezintă o preocupare privind confidențialitatea pe care aplicațiile ar trebui să o aibă cu atenție la colectare, astfel încât dispozitivele mobile să nu permită aplicațiilor să aibă automat acces la datele de localizare. Aplicațiile trebuie să solicite permisiunea (care poate fi refuzată sau revocată în orice moment), deci trebuie să țineți cont de acest lucru atunci când utilizați anumite pluginuri care necesită permisiuni. (Utilizați cu atenție aceste date și evitați încălcarea confidențialității utilizatorilor dvs.!)
În primul rând, vom crea șablonul pentru vizualizarea locației noastre. Creați un fișier nou la www / vizualizari / locație / location.html și include următoarele. (Toate acestea ar trebui să fie familiare din tutoriile anterioare, dar în esență creează o nouă vizualizare cu un buton care va apela o metodă în controlorul nostru, pe care o vom defini în continuare.)
Setați locația dvs. curentă, este accesată numai prin apăsarea butonului de mai jos.
Acum vom crea shell-ul controlerului și apoi vom adăuga o metodă pentru a gestiona locația unui utilizator. Creați un alt fișier nou la www / views / locație / location.js și includeți următorul cod. Asigurați-vă, de asemenea, legătura cu acest fișier în www / index.html fişier.
$ stateProvider.state ('location', url: '/ location', controler: 'LocationController as vm', templateUrl: 'views / location / location .controller (funcția "LocationController", funcția ($ ionicLoading, $ http, $ state, Geolocation, $ cordovaGeolocation, $ ionicPopup) var vm = this;);În acest moment avem o nouă locație, dar butonul nu va funcționa încă. Puteți previzualiza aplicația în browserul dvs. cu ionice. Ar trebui să puteți vedea vizualizarea dacă mergeți la http: // localhost: 8100 / # / location.
$ cordovaGeolocation în constructorul de controler, care ne va oferi accesul la datele despre locația utilizatorului. Restul serviciilor injectate sunt necesare doar pentru a face față logicii de afaceri a ceea ce trebuie să faceți cu datele despre locație.Există de fapt doi pași implicați în obținerea locației utilizatorului în această aplicație, mai întâi obținerea datelor de geolocație din pluginul Cordova (care returnează o valoare latitudine și longitudine) și apoi efectuarea unei căutări inverse în API-ul Google Geocode pentru a găsi locația curentă (care funcționează bine cu celelalte apeluri API).
Adăugați următoarea metodă la controler și vom trece mai departe în detaliu mai jos.
vm.useGeolocație = funcție () $ ionicLoading.show (); $ cordovaGeolocation.getCurrentPosition (timeout: 10000, enableHighAccuracy: false) și apoi (funcția (position) var lat = position.coords.latitude; var lng = position.coords.longitude; var url = 'https: // civinfo -apis.herokuapp.com/civic/geolocation?latlng= '+ lat +', '+ lng; $ http.get (url) .then (funcția (răspunsul) $ ionicLoading.hide (); (title: 'Locație necunoscută', șablon: 'Încercați să încercați (title: 'Imposibil de obținut locația', șablon: 'Încercați din nou.');) .catch (funcția (eroare) $ ionicLoading.hide sau mutați în altă locație.););); ;
Primul lucru este să folosiți $ ionicLoading serviciu pentru a afișa un încărcător în timp ce locația curentă este detectată.
Apoi vom folosi $ cordovaGeoposition serviciu, care are o metodă numită getPosition pentru a obține poziția actuală. Specificăm opțiunile, care sunt valori implicite rezonabile. Puteți citi despre alte opțiuni getPosition din documentație.
getPosition metoda returneaza o promisiune, deci folosim atunci pentru a face față răspunsului. Presupunând că utilizatorul este de acord să împărtășească locația lor, acesta ne oferă un obiect care conține coordonatele pentru latitudine și longitudine. Apoi vom folosi aceste valori pentru a apela API-ul pentru a face un geocod invers pentru a căuta cel mai apropiat loc. Dacă nu reușește, dispozitivul de preluare a capturilor va folosi $ ionicPopup pentru a afișa o alertă că nu a reușit.
$ http serviciul este folosit pentru a căuta geocodul invers, iar dacă acesta are succes, trebuie să verificăm dacă s-au returnat rezultatele. Dacă s-a găsit unul, Localizarea geografică valoarea serviciului este actualizată și utilizatorul este redirecționat către lista de locații utilizând $ state.go. Altfel, folosește $ ionicPopup pentru a afișa o avertizare care spune că nu au fost găsite locuri.
Asta e tot ce trebuia să facem pentru a activa funcția de geolocație a dispozitivului în aplicația noastră. Cu toate acestea, trebuie să efectuăm încă câteva modificări minore la vizualizarea locurilor și la app.js fişier.
Mai întâi deschideți www / js / app.js fișier și actualizați Localizarea geografică service la următoarele. Este necesar să ștergeți valoarea prestabilită a serviciului de geolocație pe care am codificat-o anterior în Chicago și să activați ciclul de digerare pentru sincronizarea corectă a modificărilor.
.fabrică ("Geolocation", funcția () return data: ;)Apoi modificați vizualizarea implicită pentru aplicația de aplicație actualizând ultima linie de configurare la următoarele. Acest lucru va face ca aplicația să înceapă în locația de vizualizare a locației.
.config (functie ($ urlRouterProvider) $ urlRouterProvider.otherwise ('/ location');)În cele din urmă, dorim să optimizăm afișarea locațiilor pentru a nu mai fi stocată cache-ul (astfel încât locația actualizată să fie întotdeauna reflectată) și să redirecționați către vizualizarea locației dacă nu se găsește nicio locație. Deschideți www / opinii / locuri / places.html și actualizați prima linie după cum urmează.
Apoi deschideți www / views / Locuri / places.js și actualizați începutul controlerului pentru a se potrivi cu următoarele.
.controlerul ('PlacesController', funcția ($ http, $ scope, $ ionicLoading, $ ionicHistory, $ state, Geolocation, Types) var vm = this; locația); $ var state = 'https://civinfo-apis.herokuapp.com/civic/places?location=' + Geolocation.data.geometry.location.lat + ',' + Geolocation.data.geometry.location.lng;Facem o verificare rapidă înainte ca incendiul să se poată detecta dacă localizarea a fost găsită, dacă nu ne redirecționăm către locație pentru ao reseta.
De asemenea, acest lucru va funcționa și în browserul dvs., deoarece browserul are suport pentru funcțiile de localizare. În următoarea secțiune vom vorbi pe scurt despre modul de previzualizare a aplicației într-un emulator.
CLI-ul Ionic are o comandă care vă permite să emulați cu ușurință aplicația într-o versiune software a unui dispozitiv. Nu toate caracteristicile hardware sunt disponibile, dar multe sunt emulate, inclusiv localizarea geografică.
Utilizarea ionice emulate ios, Ionic va porni emulatorul și va încărca aplicația (similar pentru Android). Dacă aveți erori, este posibil ca aparatul dvs. să nu fi fost complet setat pentru platforma pe care încercați să o emulați.
Această comandă va lansa o versiune reală a platformei OS și va simula un dispozitiv foarte realist. Pentru cineva care nu are un dispozitiv real cu care să testeze, aceasta este o modalitate foarte bună de a verifica rapid funcționarea diferitelor dispozitive cu aplicația.
Poate fi necesar să resetați uneori emulatorul pentru a vă asigura că modificările pe care le faceți nu persistă. De exemplu, dacă refuzați acordul pentru o locație geolocație, probabil că va trebui să găsiți setările pentru ao permite ulterior sau puteți reseta emulatorul pentru a elimina orice setări.
În acest tutorial am analizat cum să folosim Cordova pentru a crea o aplicație care utilizează capabilitățile hardware și senzorii. Utilizând ngCordova, este foarte ușor să accesați aceste informații în aplicațiile dvs. Ionic. Acum aveți acces la funcții ale dispozitivului, cum ar fi camera, geolocația, cititoarele de amprente și calendarul. Când este posibil, ar trebui să folosiți biblioteca ngCordova pentru a facilita integrarea, dar există și alte pluginuri Cordova expuse de ngCordova.
De asemenea, acest lucru se încheie cu seria Ionic Started with Ionic. Acum ar trebui să înțelegeți elementele de bază și să puteți continua cu ionic. Dacă sunteți interesat de mai multe, verificați câteva dintre celelalte cursuri și tutoriale ale noastre privind cadrul ionic.
