Accentsconagua
Share
Hva du skal skapeI denne siste tråden i Komme i gang med ioniske serien lærer du hvordan du bruker Cordova til å legge til maskinvareegenskaper for enheten til appen din. Vi vil se på hvordan du bruker funksjoner som geolocation, og jeg viser deg hvordan integrere med ngCordova-biblioteket for å fullføre vår app. Du vil være sikker på at du har satt opp maskinen din til ionisk før vi begynner, og sørg for at du også har opprettet ditt plattformspesifikke verktøy.
Opplæringsprosjektfilene er tilgjengelige på GitHub. Den generelle premissen til appen er at den viser litt informasjon om fasiliteter i nærheten av deg. I denne opplæringen legger vi til muligheten til å slå opp den nåværende plasseringen og vise resultater nær deg. Du kan se arbeidet eksempel her.
Hvis du kloner prosjektet, kan du også kode sammen ved å bruke Git og løping git checkout -b start. Denne koden for denne leksjonen starter der det siste innlegget, Komme i gang med ionisk: Navigering slått av. Du kan også forhåndsvise startpunktet live.
Før vi skriver noen kode, må vi sette opp vårt prosjekt. Ionic vil allerede sette opp et grunnleggende Cordova-prosjekt, men vi må initialisere noen ekstra ting selv.
Først må vi installere ngCordova-biblioteket. Dette er en vinkelmodul som gjør det enklere å bruke noen av de mest populære Cordova plugins. (Selv om ikke alle plugins støttes av ngCordova.) Bower er vant til å installere denne avhengigheten.
For det andre må vi legge til en plattform for prosjektet vårt. Dette vil bli ios eller android (eller begge!), avhengig av plattformen du velger å støtte. Jeg har brukt ios i eksemplene mine, men du kan erstatte det med android for å oppnå det samme for den plattformen.
For det tredje skal vi installere Geolocation-plugin for Cordova. Dette forbedrer appen din med muligheten til å få en brukeres nåværende posisjon (som krever tillatelse). Du kan se en liste over alle plugins på https://cordova.apache.org/plugins/ med informasjon om hvordan du konfigurerer hver enkelt.
Følgende kommandoer skal kjøres fra prosjektets rot for å gjøre disse tre oppsettstrinnene.
node_modules / .bin / bower install ngCordova ionisk plattform legg til ios # eller android ionic plugin legg til cordova-plugin-geolocation
Når det er ferdig, må vi legge til ngCordova i søknaden, slik at den er gjenkjent av Ionic. Åpne opp www / index.html fil og legg til følgende linje etter ionic.bundle.js fil.
Da må vi oppdatere www / js / app.js fil for å inkludere ngCordova-modulen. Den første linjen skal oppdateres for å vises som følger.
angular.module ('App', ['ionic', 'ngCordova'])Nå som vi har fått våre avhengigheter oppdatert, er prosjektet klart for bruk av plugin for geolokasjon. Det neste trinnet er å sette opp en ny visning for å begynne å bruke den!
Vi lager en ny landingsskjerm for appen. Denne skjermen viser en melding om bruk av brukerens nåværende sted for å finne steder i nærheten. De klikker på en knapp for å bekrefte at de ønsker at appen skal få tilgang til deres plassering, og deretter se listen over steder som gjenspeiler deres nåværende posisjon.
Brukerplasseringsdata er et personvernproblem som apper skal være forsiktige når de samles, slik at mobile enheter ikke tillater at apper automatisk får tilgang til geolokasjonsdata. Apper må be om tillatelse (som kan avvises eller tilbakekalles når som helst), slik at du må huske det når du bruker visse plugins som krever tillatelser. (Bruk disse dataene forsiktig og unngå å bryte personvernet til brukerne dine!)
Først vil vi opprette malen for visningsvisningen vår. Opprett en ny fil på www / utsikt / plassering / location.html og inkludere følgende. (Dette skal alle være kjent fra tidligere opplæringsprogrammer, men det skaper i hovedsak en ny visning med en knapp som vil kalle en metode i vår kontroller, som vi definerer neste.)
Angi din nåværende posisjon, den er bare tilgjengelig ved å trykke på knappen nedenfor.
Vi skal nå opprette kontrolleren skallet, og deretter legge til en metode for å håndtere å få brukerens plassering. Lag en ny fil på www / visninger / plassering / location.js og ta med følgende kode. Pass på at du også kobler til denne filen i www / index.html fil.
angular.module ('App') .config (funksjon ($ stateProvider) $ stateProvider.state ('location', url: '/ location', kontroller: 'LocationController as vm', templateUrl: 'visninger / sted / sted .html ');) .controller (' LocationController ', funksjon ($ ionicLoading, $ http, $ state, Geolocation, $ cordovaGeolocation, $ ionicPopup) var vm = this;);På dette tidspunktet har vi en ny plassvisning, men knappen fungerer ikke ennå. Du kan forhåndsvise appen i nettleseren din med ionisk servering. Du bør kunne se visningen hvis du går til http: // localhost: 8100 / # / location.
$ cordovaGeolocation i kontrolleren konstruktøren, som skal gi oss tilgang til brukerplasseringsdata. Resten av tjenestene som injiseres er nødvendig bare for å håndtere forretningslogikken om hva de skal gjøre med posisjonsdataene.Det er faktisk to trinn involvert i å få brukerens plassering i denne appen, først får du geolokaliseringsdataene fra Cordova-pluginet (som bare returnerer en lengdegrad og lengdegrad), og deretter gjør en omvendt oppslag i Google Geocode API for å finne nåværende stedsted (som fungerer bra med våre andre API-samtaler).
Legg til følgende metode for kontrolleren, og vi vil gjennomgå det i detalj nedenfor.
vm.useGeolocation = funksjon () $ ionicLoading.show (); $ cordovaGeolocation.getCurrentPosition (timeout: 10000, enableHighAccuracy: false), deretter (funksjon (posisjon) 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 (funksjon (svar) $ ionicLoading.hide (); if (response.data .resultater.length) Geolocation.data = response.data.results [0]; $ state.go ('places'); else $ ionicPopup.alert (tittel: 'Ukjent sted', mal: 'Vennligst prøv igjen, eller flytt til et annet sted. ');) .catch (funksjon (feil) $ ionicLoading.hide (); $ ionicPopup.alert (tittel:' Kan ikke få plassering ', mal:' Prøv igjen eller flytte til et annet sted. '););); ;Første ting er å bruke $ ionicLoading tjeneste for å vise en laster mens den nåværende plasseringen er oppdaget.
Så bruker vi $ cordovaGeoposition service, som har en metode som kalles getPosition for å få den nåværende posisjonen. Vi angir alternativene, som er rimelige standardverdier. Du kan lese om andre getPosition-alternativer i dokumentasjonen.
De getPosition Metoden gir et løfte, så vi bruker deretter å håndtere svaret. Forutsatt at brukeren godtar å dele sin plassering, gir den oss et objekt som inneholder koordinatene for breddegrad og lengdegrad. Vi vil da bruke disse verdiene til å ringe API for å gjøre en omvendt geokode for å lete etter det nærmeste stedet. Hvis det mislykkes, vil fangsthåndtereren bruke $ ionicPopup for å vise et varsel om at det mislyktes.
De $ http tjenesten brukes til å slå opp omvendt geokode, og hvis det lykkes, må vi sjekke om noen resultater ble returnert. Hvis en ble funnet, ble geolocation serviceverdien er oppdatert og brukeren blir omdirigert til stedlisten ved hjelp av $ state.go. Ellers bruker den $ ionicPopup for å vise et varsel som sier at ingen steder ble funnet.
Det var alt vi måtte gjøre for å aktivere geolocation-funksjonen til enheten i appen vår. Imidlertid må vi fortsatt gjøre et par mindre tweaks til stedene og til app.js fil.
Først åpne opp www / js / app.js fil og oppdatere geolocation service til følgende. Dette er nødvendig for å slette standardverdien til geolokasjonstjenesten som vi tidligere hadde hardt kodet til Chicago, og aktivere fordøyelsessyklusen til å synkronisere ordentlig.
.fabrikk ('Geolocation', funksjon () return data: ;)Deretter endrer du standardvisningen for app-appen ved å oppdatere den siste konfigurasjonslinjen til følgende. Dette vil gjøre appen på stedet i stedet.
.config (funksjon ($ urlRouterProvider) $ urlRouterProvider.otherwise ('/ location');)Til slutt vil vi finjustere stedvisningen til ikke lenger cache (slik at den oppdaterte plasseringen alltid reflekteres), og å omdirigere til visningsvisningen hvis ingen plassering er funnet. Åpne opp www / visninger / steder / places.html og oppdater førstlinjen som følger.
Åpne deretter www / visninger / steder / places.js og oppdater starten av kontrolleren for å matche følgende.
.controller ('PlacesController', funksjon ($ http, $ scope, $ ionicLoading, $ ionicHistory, $ state, Geolocation, Types) var vm = dette; hvis (! Geolocation.data.geometry ||! Geolocation.data.geometry. plassering) $ state.go ('location'); return; var base = 'https://civinfo-apis.herokuapp.com/civic/places?location=' + Geolocation.data.geometry.location.lat + ',' + Geolocation.data.geometry.location.lng;Vi gjør en rask sjekk før kontrolleren brenner for å oppdage om geolokasjonen er funnet, om ikke vi viderekobler til stedet for å nullstille den.
Dette vil også fungere i nettleseren din, da nettleseren har støtte for geolokeringsfunksjoner. I neste avsnitt snakker vi kort om hvordan du forhåndsviser appen i en emulator.
Den joniske CLI har en kommando som lar deg enkelt etterligne appen i en programvareversjon av en enhet. Ikke alle maskinvarefunksjoner er tilgjengelige, men mange er emulert, inkludert geolokalisering.
Ved hjelp av ionisk emulere ios, Ionic starter emulatoren og laster appen (på samme måte for Android). Hvis du har feil, er det sannsynlig at maskinen din ikke har blitt fullstendig installert for plattformen du prøver å etterligne.
Denne kommandoen vil starte en ekte versjon av plattformen OS, og simulere en veldig realistisk enhet. For noen som ikke har en faktisk enhet som skal testes med, er dette en fin måte å raskt verifisere forskjellige enheter som arbeider med appen din.
Du må kanskje nullstille emulatoren noen ganger for å sikre at endringer du gjør ikke vedvarer. Hvis du for eksempel nekter app-tillatelsen for geolokering, må du sannsynligvis finne innstillingene for å tillate det senere, eller du kan tilbakestille emulatoren for å fjerne eventuelle innstillinger.
I denne opplæringen så vi på hvordan du bruker Cordova til å lage en app som utnytter maskinvareegenskaper og sensorer. Ved hjelp av ngCordova er det veldig enkelt å få tilgang til denne informasjonen i dine joniske apper. Du har nå tilgang til enhetsfunksjoner som kamera, geolokalisering, fingeravtrykkslesere og kalenderen. Når det er mulig, bør du utnytte ngCordova-biblioteket for å gjøre det enklere å integrere, men det finnes andre Cordova-plugins som ikke er eksponert av ngCordova.
Dette avsluttes også Komme i gang med ioniske serien. Du bør nå få tak i det grunnleggende og kunne fortsette med ionisk. Hvis du er interessert i mer, sjekk ut noen av våre andre kurs og opplæringsprogrammer på det ioniske rammeverket.
