Accentsconagua
Share
Cosa starai creandoIn questa puntata finale della serie Getting Started with Ionic, imparerai come sfruttare Cordova per aggiungere funzionalità hardware del dispositivo alla tua app. Vedremo come utilizzare funzionalità come la geolocalizzazione e ti mostrerò come integrarlo con la libreria ngCordova per completare la nostra app. Prima di iniziare, assicurati di aver configurato la tua macchina per Ionic e assicurati di aver impostato anche gli strumenti specifici per la piattaforma.
I file del progetto tutorial sono disponibili su GitHub. La premessa generale dell'app è che mostra alcune informazioni sulle strutture vicine a te. In questo tutorial, aggiungiamo la possibilità di cercare la posizione corrente e mostrare i risultati vicino a te. Puoi vedere l'esempio di lavoro qui.
Se cloni il progetto, puoi anche programmare il codice usando Git ed eseguendo git checkout -b start. Questa codifica per questa lezione inizia dove è stato lasciato l'ultimo post, Guida introduttiva di Ionic: Navigazione. Puoi anche vedere in anteprima il punto di partenza dal vivo.
Prima di scrivere qualsiasi codice, dobbiamo impostare il nostro progetto. Ionic creerà già un progetto Cordova di base, ma abbiamo bisogno di inizializzare alcune cose aggiuntive.
Per prima cosa, dobbiamo installare la libreria ngCordova. Questo è un modulo angolare che rende molto più semplice l'uso di alcuni dei plug-in Cordova più popolari. (Anche se non tutti i plugin sono supportati da ngCordova.) Bower viene utilizzato per installare questa dipendenza.
In secondo luogo, dobbiamo aggiungere una piattaforma al nostro progetto. Questo sarà ios o androide (o entrambi!), a seconda della piattaforma che scegli di supportare. Ho usato ios nei miei esempi, ma puoi sostituirlo con androide per ottenere lo stesso per quella piattaforma.
Terzo, installeremo il plug-in di geolocalizzazione per Cordova. Ciò migliora la tua app con la possibilità di ottenere la posizione corrente di un utente (che richiede l'autorizzazione). Puoi vedere un elenco di tutti i plugin su https://cordova.apache.org/plugins/ con i dettagli su come configurarli.
I seguenti comandi devono essere eseguiti dalla radice del progetto per eseguire questi tre passaggi di configurazione.
node_modules / .bin / bower installa la piattaforma ionica ngCordova aggiungi ios # o il plugin android ionic aggiungi cordova-plugin-geolocation
Una volta completato, è necessario aggiungere ngCordova all'applicazione in modo che venga riconosciuto da Ionic. Apri il www / index.html file e aggiungere la seguente riga dopo il ionic.bundle.js file.
Quindi dobbiamo aggiornare il www / js / app.js file per includere il modulo ngCordova. La prima riga dovrebbe essere aggiornata per apparire come segue.
angular.module ('App', ['ionic', 'ngCordova']))Ora che abbiamo aggiornato le nostre dipendenze, il nostro progetto è pronto per utilizzare il plug-in di geolocalizzazione. Il prossimo passo è impostare una nuova vista per iniziare a usarla!
Creeremo una nuova schermata di destinazione per l'app. Questa schermata mostra un messaggio sull'utilizzo della posizione corrente dell'utente per trovare luoghi nelle vicinanze. Tocceranno un pulsante per confermare che desiderano che l'app acceda alla loro posizione, quindi visualizzeranno l'elenco dei luoghi che riflettono la loro posizione corrente.
I dati sulla posizione degli utenti sono un problema di privacy che le app devono prestare attenzione durante la raccolta, pertanto i dispositivi mobili non consentono alle app di accedere automaticamente ai dati di geolocalizzazione. Le app devono richiedere l'autorizzazione (che può essere rifiutata o revocata in qualsiasi momento), quindi è necessario tenerle a mente quando si utilizzano determinati plug-in che richiedono autorizzazioni. (Usa i dati con attenzione ed evita di violare la privacy dei tuoi utenti!)
Innanzitutto, creeremo il modello per la nostra vista posizione. Crea un nuovo file su www / vista / posizione / location.html e includere quanto segue (Questo dovrebbe essere familiare dalle precedenti esercitazioni, ma essenzialmente crea una nuova vista con un pulsante che chiamerà un metodo nel nostro controller, che definiremo in seguito.)
Imposta la tua posizione attuale, è accessibile solo premendo il pulsante qui sotto.
Creeremo ora la shell del controller e quindi aggiungeremo un metodo per gestire la ricerca della posizione dell'utente. Crea un altro nuovo file in www / views / posizione / location.js e includi il seguente codice. Assicurati di collegare anche a questo file nel www / index.html file.
angular.module ('App') .config (function ($ stateProvider) $ stateProvider.state ('location', url: '/ location', controller: 'LocationController as vm', templateUrl: 'views / location / location .html ');) .controller (' LocationController ', funzione ($ ionicLoading, $ http, $ stato, geolocalizzazione, $ cordovaGeolocation, $ ionicPopup) var vm = this;);A questo punto abbiamo una nuova vista sulla posizione, ma il pulsante non funzionerà ancora. Puoi visualizzare un'anteprima dell'app nel tuo browser con servire ionico. Dovresti essere in grado di vedere la vista se vai a http: // localhost: 8100 / # / location.
$ cordovaGeolocation nel costruttore del controller, che ci fornirà l'accesso ai dati sulla posizione dell'utente. Il resto dei servizi iniettati sono necessari solo per gestire la logica aziendale di cosa fare con i dati sulla posizione.Ci sono in realtà due passaggi necessari per ottenere la posizione dell'utente in questa app, in primo luogo è ottenere i dati di geolocalizzazione dal plugin Cordova (che restituisce solo un valore di latitudine e longitudine), e quindi fare una ricerca inversa nell'API Geocode di Google per trovare il posizione attuale (che funziona bene con le nostre altre chiamate API).
Aggiungi il seguente metodo al controller e lo analizzeremo in dettaglio di seguito.
vm.useGeolocation = function () $ ionicLoading.show (); $ cordovaGeolocation.getCurrentPosition (timeout: 10000, enableHighAccuracy: false). then (function (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 (funzione (risposta) $ ionicLoading.hide (); if (response.data .results.length) Geolocation.data = response.data.results [0]; $ state.go ('places'); else $ ionicPopup.alert (title: 'Unknown location', template: 'Per favore prova di nuovo o spostati in un'altra posizione. ');) .catch (funzione (errore) $ ionicLoading.hide (); $ ionicPopup.alert (title:' Impossibile ottenere la posizione ', modello:' Per favore riprova o spostarsi in un'altra posizione. '););); ;La prima cosa è usare il $ ionicLoading servizio per visualizzare un caricatore mentre viene rilevata la posizione corrente.
Quindi usiamo il $ cordovaGeoposition servizio, che ha un metodo chiamato getPosition per ottenere la posizione corrente. Specifichiamo le opzioni, che sono valori predefiniti ragionevoli. Puoi leggere altre opzioni getPosition nella documentazione.
Il getPosition il metodo restituisce una promessa, quindi usiamo poi per gestire la risposta. Supponendo che l'utente accetti di condividere la loro posizione, ci fornisce un oggetto che contiene le coordinate per latitudine e longitudine. Utilizzeremo quindi tali valori per chiamare l'API per eseguire un geocoding inverso per cercare il punto più vicino. Se fallisce, verrà utilizzato il gestore catch $ ionicPopup per mostrare un avviso che non è riuscito.
Il $ http il servizio viene utilizzato per cercare il geocodice inverso e, se ha esito positivo, è necessario verificare se sono stati restituiti risultati. Se ne è stato trovato uno, il geolocalizzazione il valore del servizio viene aggiornato e l'utente viene reindirizzato alla lista dei luoghi usando $ state.go. Altrimenti, usa $ ionicPopup per mostrare un avviso che dice che non sono stati trovati posti.
Questo è tutto ciò che dovevamo fare per abilitare la funzione di geolocalizzazione del dispositivo nella nostra app. Tuttavia, dobbiamo ancora apportare alcuni piccoli ritocchi alla vista dei luoghi e al app.js file.
Per prima cosa apri il www / js / app.js file e aggiornare il geolocalizzazione servizio al seguente Questo è necessario per cancellare il valore predefinito del servizio di geolocalizzazione che avevamo precedentemente codificato a Chicago e abilitare il ciclo di digest per sincronizzare correttamente le modifiche.
.factory ('Geolocation', function () return data: ;)Quindi modifica la visualizzazione predefinita per l'app dell'app aggiornando l'ultima riga di configurazione alla seguente. Questo farà sì che l'app si avvii sulla vista posizione.
.config (function ($ urlRouterProvider) $ urlRouterProvider.otherwise ('/ location');)Infine, vogliamo modificare la vista dei luoghi per non memorizzare più la cache (quindi la posizione aggiornata viene sempre riflessa) e reindirizzare alla vista posizione se non viene trovata alcuna posizione. Apri il www / views / luoghi / places.html e aggiorna la prima riga come segue.
Quindi apri il www / views / luoghi / places.js e aggiorna l'inizio del controller in modo che corrisponda al seguente.
.controller ('PlacesController', function ($ http, $ scope, $ ionicLoading, $ ionicHistory, $ state, Geolocation, Types) var vm = this; if (! Geolocation.data.geometry ||! Geolocation.data.geometry. posizione) $ state.go ('posizione'); return; var base = 'https://civinfo-apis.herokuapp.com/civic/places?location=' + Geolocation.data.geometry.location.lat + ',' + Geolocation.data.geometry.location.lng;Facciamo un rapido controllo prima che il controller funzioni per rilevare se è stata trovata la geolocalizzazione, altrimenti reindirizziamo alla posizione per ripristinarla.
Questo funzionerà anche nel tuo browser, in quanto il browser supporta le funzionalità di geolocalizzazione. Nella prossima sezione parleremo brevemente di come visualizzare l'anteprima dell'app in un emulatore.
La CLI Ionic ha un comando che consente di emulare facilmente l'app in una versione software di un dispositivo. Non tutte le funzionalità hardware sono disponibili, ma molte sono emulate, inclusa la geolocalizzazione.
utilizzando emulare ionico ios, Ionic avvierà l'emulatore e caricherà l'app (analogamente per Android). Se si verificano errori, è probabile che la propria macchina non sia stata completamente configurata per la piattaforma che si sta tentando di emulare.
Questo comando avvierà una versione reale del SO della piattaforma e simulerà un dispositivo molto realistico. Per qualcuno che non ha un dispositivo reale con cui testare, questo è un ottimo modo per verificare rapidamente che diversi dispositivi funzionano con la tua app.
Potrebbe essere necessario reimpostare l'emulatore a volte per garantire che le modifiche apportate non persistano. Ad esempio, se neghi l'autorizzazione dell'app per la geolocalizzazione, dovrai probabilmente trovare le impostazioni per consentirne il successivo utilizzo oppure puoi reimpostare l'emulatore per rimuovere eventuali impostazioni.
In questo tutorial abbiamo visto come utilizzare Cordova per creare un'app che sfrutti le capacità e i sensori dell'hardware. Usando ngCordova, è molto facile accedere a queste informazioni nelle tue app Ionic. Ora puoi accedere alle funzioni del dispositivo come fotocamera, geolocalizzazione, lettori di impronte digitali e calendario. Quando possibile, dovresti sfruttare la libreria ngCordova per facilitare l'integrazione, ma ci sono altri plugin Cordova non esposti da ngCordova.
Questo conclude anche la serie Getting Started with Ionic. Ora dovresti avere una conoscenza delle basi e essere in grado di andare avanti con Ionic. Se ti interessa di più, dai uno sguardo ad alcuni dei nostri altri corsi e tutorial sulla struttura ionica.
