Accentsconagua
Share
Vad du ska skapaI den här sista delen i Komma igång med joniska serier lär du dig hur du utnyttjar Cordova för att lägga till maskinvarukapacitet i din app. Vi ska titta på hur du använder funktioner som geolocation och jag visar hur du integrerar med ngCordova-biblioteket för att slutföra vår app. Du vill vara säker på att du har ställt in din maskin för joniska innan vi börjar, och se till att du också har ditt plattformsspecifika verktyg inrättat.
Projektfilerna finns på GitHub. Den allmänna förutsättningen för appen är att den visar lite information om faciliteter nära dig. I den här handledningen lägger vi till möjligheten att leta upp den aktuella platsen och visa resultat nära dig. Du kan se arbetsexemplet här.
Om du klonar projektet kan du också koda längs med Git och körning git checkout -b start. Detta kodar för den här lektionen börjar där det sista inlägget, Komma igång med jonisk: Navigering avstängd. Du kan också förhandsgranska startpunkten live.
Innan vi skriver någon kod måste vi ställa in vårt projekt. Ionic kommer redan att skapa ett grundläggande Cordova-projekt, men vi måste initiera några ytterligare saker själva.
Först måste vi installera ngCordova-biblioteket. Detta är en vinkelmodul som gör det enklare att använda några av de mest populära Cordova-pluginsna. (Även om inte alla plugins stöds av ngCordova.) Bower används för att installera detta beroende.
För det andra måste vi lägga till en plattform för vårt projekt. Detta kommer att vara ios eller android (eller båda!), beroende på vilken plattform du väljer att stödja. Jag har använt ios i mina exempel, men du kan ersätta det med android för att uppnå samma för den plattformen.
För det tredje installerar vi plugin för geolokalisering för Cordova. Detta förbättrar din app med möjligheten att få en användares nuvarande plats (vilket kräver tillstånd). Du kan se en lista över alla plugins på https://cordova.apache.org/plugins/ med information om hur du konfigurerar var och en.
Följande kommandon ska köras från projektets rot för att göra dessa tre installationssteg.
node_modules / .bin / bower installera ngCordova jonplattform lägg till ios # eller android ionic plugin lägg till cordova-plugin-geolocation
När det är klart, måste vi lägga till ngCordova i applikationen så att den är känd av Jonisk. Öppna upp www / index.html fil och lägg till följande rad efter ionic.bundle.js fil.
Då behöver vi uppdatera www / js / app.js fil för att inkludera ngCordova-modulen. Den första raden ska uppdateras så att den visas som följer.
angular.module ('App', ['ionic', 'ngCordova'])Nu när vi har uppdaterat våra beroenden är vårt projekt redo att använda plugin för geolokalisering. Nästa steg är att skapa en ny vy för att börja använda den!
Vi skapar en ny landningsskärm för appen. Den här skärmen visar ett meddelande om hur du använder användarens aktuella plats för att hitta närliggande platser. De kommer att trycka på en knapp för att bekräfta att de önskar att appen ska komma åt deras plats och sedan se listan över platser som speglar deras aktuella plats.
Användarplatsdata är en integritetshändelse som appar bör vara försiktiga när du samlar, så mobila enheter tillåter inte att appar automatiskt ska ha tillgång till geolokaliseringsdata. Appar måste begära tillstånd (vilket kan avkallas eller återkallas när som helst) så du måste komma ihåg det när du använder vissa plugins som kräver behörigheter. (Använd den informationen noggrant och undvik att bryta användarnas privatliv!)
Först ska vi skapa mallen för vår platsvy. Skapa en ny fil på www / visningar / plats / location.html och inkludera följande. (Det här borde alla vara bekant från tidigare tutorials, men det skapar i grunden en ny vy med en knapp som kommer att ringa en metod i vår controller, som vi definierar nästa.)
Ställ in din nuvarande plats, den är endast tillgänglig genom att trycka på knappen nedan.
Vi ska nu skapa kontrollschalen och sedan lägga till en metod för att hantera att få en användares plats. Skapa en ny fil på www / visningar / plats / location.js och inkludera följande kod. Se till att även länka till den här filen i www / index.html fil.
angular.module ('App') .config (funktion ($ stateProvider) $ stateProvider.state ('location', url: '/ location', controller: 'LocationController as vm', templateUrl: 'visningar / plats / plats .html ');) .controller (' LocationController ', funktion ($ ionicLoading, $ http, $ state, Geolocation, $ cordovaGeolocation, $ ionicPopup) var vm = this;);Vid denna tidpunkt har vi en ny platsvy, men knappen fungerar inte just ännu. Du kan förhandsgranska appen i din webbläsare med jonisk tjäna. Du ska kunna se vyn om du går till http: // localhost: 8100 / # / location.
$ cordovaGeolocation i regulatorkonstruktorn, som kommer att ge oss tillgång till användaradressdata. Resten av de insprutade tjänsterna behövs bara för att hantera affärslogiken om vad man ska göra med platsdata.Det finns faktiskt två steg som är involverade i att få användarens plats i den här appen, först får du geolokaliseringsdata från Cordova-plugin (som bara returnerar ett latitud- och longitudvärde) och sedan gör en omvänd uppslag i Google Geocode API för att hitta aktuell platsplats (som fungerar bra med våra andra API-samtal).
Lägg till följande metod för regulatorn, och vi går igenom det i detalj nedan.
vm.useGeolocation = function () $ ionicLoading.show (); $ cordovaGeolocation.getCurrentPosition (timeout: 10000, enableHighAccuracy: false), sedan (funktion (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 (funktion (svar) $ ionicLoading.hide (); om (response.data . results.length) Geolocation.data = response.data.results [0]; $ state.go ('places'); else $ ionicPopup.alert (title: 'Okänd plats', mall: 'Var god försök igen, eller flytta till en annan plats. ');) .catch (funktion (fel) $ ionicLoading.hide (); $ ionicPopup.alert (title:' Kan inte få plats ', mall:' Vänligen försök igen eller flytta till en annan plats. '););); ;Första är att använda $ ionicLoading service för att visa en lastare medan den aktuella platsen detekteras.
Då använder vi $ cordovaGeoposition service, som har en metod som heter getPosition för att få den nuvarande positionen. Vi anger vilka alternativ som är rimliga standardvärden. Du kan läsa om andra getPosition-alternativ i dokumentationen.
De getPosition Metoden returnerar ett löfte, så vi använder sedan att hantera svaret. Om vi antar att användaren samtycker till att dela sin plats, ger den oss ett objekt som innehåller koordinaterna för latitud och longitud. Vi använder då dessa värden för att ringa API för att göra en omvänd geokod för att leta upp närmaste plats. Om det misslyckas kommer fångaren att använda $ ionicPopup för att visa en varning om att den misslyckades.
De $ http tjänsten används för att leta upp omvänd geokod, och om det är framgångsrikt måste vi kontrollera om några resultat returnerades. Om man hittades, Geolocation servicevärde uppdateras och användaren omdirigeras till platslistan med $ state.go. Annars använder den $ ionicPopup för att visa en varning som säger att inga platser hittades.
Det var allt vi behövde för att aktivera geolocation-funktionen hos enheten i vår app. Men vi måste fortfarande göra ett par mindre tweaks till platserna och till app.js fil.
Öppna först upp www / js / app.js fil och uppdatera Geolocation service till följande. Detta är nödvändigt för att rensa standardvärdet för geolocation-tjänsten som vi tidigare hade hårdkodad till Chicago och göra det möjligt för digercykeln att synkronisera ändringar på rätt sätt.
.fabriks ("Geolocation", funktion () return data: ;)Ändra sedan standardvyn för appappen genom att uppdatera den senaste konfigurationslinjen till följande. Detta gör att appen startar på platsvyn istället.
.config (funktion ($ urlRouterProvider) $ urlRouterProvider.otherwise ('/ location');)Slutligen vill vi finjustera platsvisningen så att den inte längre cachar (så den uppdaterade platsen återspeglas alltid) och omdirigeras till platsvyn om ingen plats hittas. Öppna upp www / vyer / platser / places.html och uppdatera första raden enligt följande.
Öppna sedan www / views / platser / places.js och uppdatera kontrollens start så att den matchar följande.
.controller ('PlacesController', funktion ($ http, $ scope, $ ionicLoading, $ ionicHistory, $ state, Geolocation, Types) var vm = detta; om (! Geolocation.data.geometry ||! Geolocation.data.geometry. plats) $ 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 gör en snabb kontroll innan styrenheten brinner för att upptäcka om geolocation har hittats, om inte vi vidarebefordrar till platsen för att återställa den.
Detta kommer faktiskt också att fungera i din webbläsare, eftersom webbläsaren har stöd för geolokeringsfunktioner. I nästa avsnitt ska vi kortfattat prata om hur du förhandsgranskar appen i en emulator.
Den joniska CLI har ett kommando som låter dig enkelt efterlikna appen i en programversion av en enhet. Det finns inte alla maskinvarufunktioner, men många är emulerade, inklusive geolokalisering.
Använder sig av jonisk emulera ios, Ionic kommer att starta emulatorn och ladda appen (på samma sätt för Android). Om du har fel är det troligt att din maskin inte har installerats helt för plattformen du försöker efterlikna.
Kommandot startar en verklig version av plattformen OS, och simulerar en mycket realistisk enhet. För någon som inte har en verklig enhet att testa med är det här ett bra sätt att snabbt verifiera olika enheter som arbetar med din app.
Du kan behöva återställa emulatorn ibland för att se till att förändringar du gör inte kvarstår. Om du till exempel nekar apptillståndet för geolokalisering måste du troligen hitta inställningarna för att tillåta det senare, eller du kan återställa emulatorn för att ta bort eventuella inställningar.
I denna handledning tittade vi på hur man använder Cordova för att skapa en app som utnyttjar maskinvarukapaciteten och sensorerna. Med hjälp av ngCordova är det väldigt lätt att komma åt den här informationen i dina joniska appar. Du har nu tillgång till enhetsfunktioner som kameran, geolokalisering, fingeravtrycksläsare och kalendern. När det är möjligt bör du utnyttja ngCordova-biblioteket så att det blir enklare att integrera, men det finns andra Cordova-plugins som inte exponeras av ngCordova.
Detta avslutar också Komma igång med joniska serien. Du borde nu få förståelse för grunderna och kunna fortsätta med joniska. Om du är intresserad av mer, kolla in några av våra andra kurser och handledning på joniska ramar.
