Accentsconagua
Share
NativeScript er et rammeverk for å bygge opp mobile mobilprogrammer på tvers av plattformer ved hjelp av XML, CSS og JavaScript. I denne serien vil vi prøve ut noen av de kule tingene du kan gjøre med en NativeScript-app: geolocation og integrasjon av Google Maps, SQLite-database, Firebase-integrasjon og push-varsler. Underveis bygger vi et treningsprogram med sanntidsfunksjoner som bruker hver av disse funksjonene.
I denne opplæringen lærer du hvordan du arbeider med geolokasjon og Google Maps i NativeScript-apper.
Jeg antar at du allerede vet hvordan du lager apper i NativeScript. Hvis du er ny på NativeScript, anbefaler jeg at du først sjekker ut en av de tidligere opplæringene i NativeScript før du prøver å følge denne opplæringen.
Du lager en sporingsturer ved hjelp av geolocation og Google Maps. Det vil vise brukeren hvor mye avstand de har dekket og antall trinn de har tatt for å dekke den avstanden. Det vil også være et kart som viser brukerens nåværende sted.
Å gi deg en ide, her er hva den endelige produksjonen vil se ut som:
Begynn med å opprette en ny NativeScript-app:
tns lage fitApp --appid "com.yourname.fitApp"
For å gjøre det enklere å konfigurere brukergrensesnittet til appen, har jeg opprettet en GitHub-repo som inkluderer både startbilde og endelig versjon av prosjektet. Du kan gå videre og kopiere innholdet i app mappe til prosjektet ditt app mappe. Vi vil bare jobbe med to filer: hoved page.xml og hoved page.js fil. Resten er bare boilerplate fra NativeScript demo prosjektet.
Vi bruker Android-emulatoren fra Android Studio for å teste appen. Dette vil tillate oss å bruke Android GPS-emulatoren til å simulere endring av steder fra komforten av våre egne hjem. Jeg liker egentlig ikke å lede rundt utenom å teste geolokasjon heller! Men hvis det er din ting så vil jeg ikke stoppe deg.
Hvis du kjører tns kjøre android, det vil automatisk ringe Android-emulatoren hvis den allerede er installert. Hvis den ikke er installert, kan du installere den ved å starte Android Studio, klikke konfigurere, og velg SDK Manager. Dette åpner SDK-plattformer som standard. Klikk på SDK verktøy fanen og sørg for å velge Android Emulator, og klikk på Søke om å installere den.
For å bruke GPS-emulatoren, last den ned fra GitHub og kjør kjørbar krig fil:
java -jar android-gps-emulator-0.2.war
Når det er gjort, bør du kunne få tilgang http: // localhost: 8080 / gpsemulator / fra nettleseren din og koble til lokal vert. Pass på at Android-emulatoren allerede kjører når du gjør dette. Når du er koblet til, zoomer du bare inn på kartet og klikker på et hvilket som helst sted du vil bruke som sted. Appen vil oppdage dette og bruke den som den nåværende plasseringen.
Geolocation i NativeScript ligner på Geolocation API i JavaScript. Den eneste forskjellen i funksjonalitet er tillegg av a avstand() funksjon som brukes til å beregne avstanden mellom to steder.
For å kunne jobbe med geolocation må du først installere geolocation-plugin:
tns plugin legg til nativcript-geolocation
Når det er gjort, kan du nå inkludere det fra skriptfiler:
var geolocation = krever ("nativescript-geolocation");NativeScript Geolocation plugin inneholder tre funksjoner som du kan bruke til å jobbe med brukerens nåværende sted. Vi bruker hver av disse i denne appen:
getCurrentLocationwatchLocationavstandÅpne Hoved-view-model.js fil og legg til følgende kode inne i createViewModel () funksjon. Her initialiserer vi variablene som vi skal bruke senere for å lagre de forskjellige verdiene som trengs for å holde oversikt over brukerens plassering.
Jeg har lagt til noen kommentarer i koden slik at du vet hva som skjer. Det er også noen kodelinjer som kommenteres; Disse er for Google Maps-integrasjonen. Jeg har kommentert dem for nå for å holde ting enkelt. Når vi kommer til Google Maps-integrasjonen, må du fjerne disse kommentarene.
funksjon createViewModel () var viewModel = new Observable (); var watchId; // lagrer IDen til stedvaktaren, slik at vi kan stoppe den senere var start_location; // lagrer brukerens plassering når de begynte å spore var current_location; // lagrer gjeldende plassering av brukervisningenModel.is_tracking = false; // om brukerens plassering for tiden blir sporet eller ikke //viewModel.latitude = 15.447819409392789; //viewModel.longitude = 120.93888133764267; //viewModel.zoom = 20; var total_distance = 0; var total_steps = 0; var steder = []; // array som vil lagre stedene // var mapView; // var markør = nye mapsModule.Marker (); hvis (! geolocation.isEnabled ()) // sjekk om geolocation ikke er aktivert geolocation.enableLocationRequest (); // forespørsel om at brukeren skal aktivere den // neste: legg til kode for å få brukerens nåværende posisjon
Deretter legger du til koden for å få brukerens nåværende posisjon. Denne koden utføres når brukeren tapper på knappen for å starte og stoppe plasseringssporingen. De geolocation.getCurrentLocation () Metoden brukes til å få den nåværende plasseringen.
Her har vi angitt tre alternativer: desiredAccuracy, updateDistance, og pause. desiredAccuracy lar deg spesifisere nøyaktigheten i meter. Den har to mulige verdier: Accuracy.high, som er ca 3 meter, og Accuracy.any, som er ca 300 meter. updateDistance angir hvor stor forskjell (i meter) det må være mellom forrige plassering og nåværende sted før den skal oppdateres. Til slutt, pause angir hvor mange millisekunder som skal vente på en plassering.
Når en plassering er mottatt, setter vi den som START_LOCATION og skyv den på steder array. Senere vil denne plasseringen brukes sammen med den første plasseringen som skal hentes fra å se brukerens nåværende sted for å bestemme avstanden som er reist.
viewModel.toggleTracking = function () if (geolocation.isEnabled ()) this.set ('is_tracking',! viewModel.is_tracking); // vend vekselen for å spore hvis (viewModel.is_tracking) geolocation.getCurrentLocation (desiredAccuracy: Nøyaktighet. høy, // 3 meter nøyaktighet oppdateringsdistanse: 5, // 5 meter timeout: 2000 // 2 sekunder). da (funksjon (loc) if (loc) start_location = loc; locations.push (start_location); //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude', loc. lengdegrad);, funksjon (e) dialogs.alert (e.message);); // neste: legg til kode for å se brukerens nåværende sted annet // neste: legg til kode for å slutte å se brukerens nåværende posisjon annet dialogs.alert ("Vennligst aktiver Geolocation"); For å få den nåværende plasseringen, bruker vi geolocation.watchLocation () funksjon. Denne funksjonen ligner på setInterval () Fungerer i JavaScript, fordi det også utfører tilbakeringingsfunksjonen gjentatte ganger til du stopper den med geolocation.clearWatch () funksjon. Tilbakeringingsfunksjonen kalles automatisk basert på updateDistance og minimumUpdateTime.
I koden under blir plasseringen oppdatert dersom den er minst 5 meter forskjellig fra forrige plassering som ble hentet. Men denne oppdateringen vil bare skje hvert 5. sekund. Dette betyr at hvis brukeren ikke har gått 5 meter eller mer innen 5 sekunder, vil stedet ikke oppdateres.
watchId = geolocation.watchLocation (funksjon (loc) if (loc) current_location = loc; // next: legg til kode for å få avstanden mellom to steder, funksjon (e) dialogs.alert (e.message); , desiredAccuracy: Nøyaktighet. høyt, oppdateringsdistanse: 5, // 5 meter minimumUpdateTime: 5000 // oppdatering hvert 5. sekund);
Når brukeren angir at de vil slutte å spore, må du ringe geolocation.clearWatch () funksjon. Du må også tilbakestille resten av verdiene som oppdateres hver gang plasseringen blir endret.
geolocation.clearWatch (watchId); // stoppe å se brukerens beliggenhet total_distance = 0; total_steps = 0; steder = []; viewModel.set ('avstand', 'avstand reist: "+ total_distance +" meter "); viewModel.set ("trinn", "trinn:" + total_steg);Nå er vi klare til å få avstanden. Dette kan gjøres ved å ringe geolocation.distance () funksjon. Denne funksjonen aksepterer to plassering objekter som sine argumenter, så vi bruker de to siste stedene som ble presset til steder array for å bestemme avstanden (i meter) reist av brukeren fra en tidligere registrert plassering til den nåværende. Derfra kan vi bruke en omtrentlig konvertering fra meter til antall trinn-jeg sier omtrentlig fordi ikke alle mennesker vil reise samme avstand i et enkelt trinn.
Etter det kan vi bare legge til den resulterende avstand og trinn til Total distanse og TOTAL_STEPS slik at vi kan holde styr på den totale avstanden og trinnene de har tatt siden de begynte å spore plasseringen.
locations.push (loe); //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); location_count = locations.length; hvis (location_count> = 2) var distance = Math.round (geolocation.distance (steder [location_count - 2], steder [location_count - 1])); // få avstanden mellom de to siste stedene var trinn = Math.round (avstand * 1.3123); // bestem omtrentlig antall trinn // legg til gjeldende avstand til den totale avstanden som tilbakestilles total_distance = total_distanse + avstand; total_steps = total_steps + trinn; // oppdater UI viewModel.set ('avstand', 'avstand reist: "+ total_distance +" meter "); viewModel.set ("trinn", "trinn:" + total_steg); På dette tidspunktet kan du nå begynne å teste appen ved hjelp av GPS-emulatoren som jeg nevnte tidligere. Legg merke til at du må treffe lagre på Hoved-view-model.js fil for å utløse en appopplasting.
Deretter velger du et sted i GPS-emulatoren, slik at en ny plassering hentes av appen når den laster. Hvis du ikke gjør dette, vil det bli standard på Googleplex-stedet i Mountain View, California. Dette betyr at neste gang du velger et sted på emulatoren, hopper det fra dette stedet til stedet du valgte. Hvis det er langt unna, får du et veldig stort antall for avstanden og trinnene.
Alternativt kan du teste på en ekte enhet med internett og GPS aktivert. Bare GPS er nødvendig på dette tidspunktet, men når vi legger til Google Maps, trenger appen en Internett-tilkobling.
Vi bruker nå Google Maps til å legge til et kart som viser brukerens nåværende posisjon.
tns plugin legg til nativcript-google-maps-sdk
Når du har installert, må du kopiere filene for malstrengressursene til Android:
cp -r node_modules / nativescript-google-maps-sdk / plattformer / android / res / verdier app / App_Resources / Android /
Deretter åpner du app / App_Resources / Android / verdier / nativescript_google_maps_api.xml fil og legg til din egen Google Maps API-nøkkel (servernøkkel):
DITT GOOGLE MAPS API KEY HERE
Kontroller at du har aktivert Google Maps Android API fra Google Console før du prøver å bruke den.
For kartet, åpne hoved page.xml fil og du bør se følgende:
Her har vi angitt tre alternativer (lengdegrad, breddegrad, og zoom) og en funksjon som skal utføres når kartet er klart. lengdegrad og breddegrad spesifiser plasseringen du vil gjengi i kartet. De zoom angir zoomnivået på kartet. mapReady er der vi spesifiserer funksjonen for å legge til markøren på kartet. Denne markøren representerer brukerens nåværende posisjon, slik at den blir gjengitt midt på kartet.
Som standard vil dette ikke fungere som du ikke har lagt til skjemadefinisjonen for kartene ennå. Så i din Side element, legg til definisjonen for kartene element:
Når det er gjort, må en Google-kart-forekomst gis rett under knappen for sporing av plassering. Det vil ikke ha noen kart ennå siden breddegrad og lengdegrad har ikke blitt angitt enda. For å gjøre det, gå tilbake til Hoved-view-model.js fil og fjern kommentarene for kodelinjene for å jobbe med Google Maps:
// standardkoordinater viewModel.latitude = 15.447819409392789; viewModel.longitude = 120.93888133764267; viewModel.zoom = 20; // standard kart zoom nivå var mapView; // variabel for lagring av gjeldende kartinstans var markør = nye mapsModule.Marker (); // variabel for lagring av markørinstansen
Siden vi allerede har erklært standardkoordinater for markøren, kan vi faktisk plotte en markør når kartet er klart:
viewModel.onMapReady = funksjon (args) mapView = args.object; // få kartvisningen marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); // angi markørens posisjon på kartet mapView.addMarker (markør); // legg til markøren på kartet
Deretter må vi oppdatere markørposisjonen når brukeren begynner å spore plasseringen. Du kan gjøre det innenfor suksess tilbakeringingsfunksjonen for getCurrentLocation () funksjon:
locations.push (START_LOCATION); // fjern kommentarene for disse: //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); Vi trenger også å oppdatere den når brukerens plassering er oppdatert (innenfor suksess tilbakeringingsfunksjonen for watchLocation):
current_location = loc; locations.push (loe); // fjern kommentarene for disse: //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); Når det er gjort, må et kart som gjør standardplasseringen, vises i appen.
I denne opplæringen har du opprettet en NativeScript-app som lar brukeren spore hvor mye avstand de har dekket, og omtrentlig antall trinn de har tatt for å dekke den avstanden. Du har også brukt Google Maps til å la brukeren vise sin nåværende posisjon. Ved å gjøre det har du lært hvordan du bruker geolokasjon og Google Maps-plugins for NativeScript.
Dette er bare starten! I de neste innleggene i denne serien legger vi til en lokal database, presser varsler og andre kule funksjoner til vår app.
I mellomtiden kan du sjekke ut noen av våre andre innlegg på NativeScript og mobil plattform på tvers av plattformer.
For en omfattende introduksjon til NativeScript, prøv vårt videokurs Kode en mobilapp med NativeScript. I dette kurset vil Keyvan Kasaei vise deg trinnvis hvordan du bygger en enkel applikasjon. Underveis lærer du hvordan du implementerer en enkel app-arbeidsflyt med nettverksforespørsler, en MVVM-arkitektur og noen av de viktigste NativeScript-UI-komponentene. På slutten forstår du hvorfor du bør vurdere NativeScript for ditt neste mobilapprojekt.
