Share
Vil du lære å skrive en komplett mobilapplikasjon ved hjelp av PhoneGap, men vet ikke hvordan du kommer i gang? Følg denne todelte opplæringsserien, og jeg vil vise deg hvordan du bygger en mobilapp som sporer, poster og kartlegger treningsruten din ved hjelp av GPS-funksjonene på telefonen din!
Denne delen er en bred oversikt over ExerciseTracker, programmet vi skal bygge.
Hjemmesiden sjekker at telefonen har en aktiv nettverksforbindelse (vi trenger dette for å laste
Google Maps for å plotte treningsruten). Den har også to knapper som er nyttige for testing av appen, men de kan fjernes lett senere hvis ønskelig.
Sporøvelsessiden har et enkelt tekstoppføringsfelt for brukeren å skrive inn et navn eller en ID for treningen. Når de klikker på "Start sporing", starter telefonen opptak av GPS-posisjonen. Når de klikker "Stopp sporing", lagres GPS-dataene på telefonen.
Historiesiden viser alle de spore treningene brukeren har fullført.
Sporinfo-siden viser treningsspesifikk informasjon. Den viser den totale avstanden som er tilbakestilt i kilometer og den totale tiden som er tatt for treningen, og den plottet ruten brukeren reiste på en Google Map.
Vår applikasjon, ExerciseTracker, kommer til å kjøre på PhoneGap mobil plattform. PhoneGap tillater oss å enkelt lage mobile applikasjoner ved hjelp av kjente webteknologier som HTML 5, CSS og JavaScript, og setter dem sømløst ut som innfødte apps på plattformer som iOS, Android og Windows Phone.
Treningsapplikasjonen vi skal bygge, bruker følgende teknologier:
I denne todelte serien av opplæringsprogrammer lærer du hvordan du bruker ovenstående til å bygge et komplett PhoneGap-program.
Det første vi må gjøre er å konfigurere PhoneGap utviklingsmiljøet. PhoneGap gir en flott startside som går deg gjennom å sette opp PhoneGap utviklingsmiljø for hver av de forskjellige mobile plattformene. Velg plattformen du vil utvikle for, og følg instruksjonene for å konfigurere den grunnleggende PhoneGap-applikasjonen. I denne opplæringen vil jeg utvikle meg på et Android-oppsett (Android 4.0.3 API v15), men koden i denne opplæringen skal fungere på alle plattformer.
Du bør nå ha en minimal index.html fil som du kan vise på enhetsemulatoren.
La oss starte utviklingen av vår app ved å laste ned og inkludere alle nødvendige JavaScript- og CSS-filer.
Last ned og kopier hver av disse filene til samme katalog som index.html og Cordova-1.7.0.js filer.
På dette stadiet ser katalogstrukturen til min Android-app ut slik:
Katalogstrukturen din skal se slik ut.
For at applikasjonen vår skal kunne bruke Google Maps, må vi ha en API-nøkkel. API-nøkler er gratis for å få og støtte opptil 25 000 spørringer per dag. Følg veiledningen som Google tilbyr for å registrere API-nøkkelen din. Merk det ned, da vi trenger det i neste trinn!
La oss skrive den første versjonen av index.html. Dette vil inkludere alle JavaScript og CSS avhengighetene ExerciseTracker vil ha.
ExerciseTracker Hei Verden
Pass på å erstatte YOUR_API_KEY_HERE med din faktiske Google Maps API-nøkkel.
Du bør kunne starte dette i din emulator og motta ingen feil.
Nå kan vi lage hjemmesiden. jQueryMobile lar oss definere vårt brukergrensesnitt ved hjelp av standard HTML-koder. Sider i appen vår er Velkommen til ExerciseTracker app. Ved å klikke Spor treningsøkt Du kan registrere treningsøktene dine ved hjelp av GPS-funksjonen på telefonen. Lær hvordan du bygger denne appen ved å lese mobile.tutsplus.com. jQueryMobile analyserer og tolker betydningen av de ulike Vi må nå sjekke for å se om brukeren har tilgang til internett. Hvis de ikke gjør det, vil Google Map ikke lastes, og appen blir slettet. Vi begynner med å lytte til Spor treningsside Med hjemmesiden ferdig, kan vi nå begynne å lage Track Workout-siden. HTML / CSS-koden for begge sider er lik, men i Vi kan overvåke brukerens plassering ved hjelp av PhoneGap Geolocation API. Den har to hovedfunksjoner: De Hver gang "suksess" -funksjonen kalles, er den bestått en posisjonobjekt. Dette inneholder informasjon om brukerens GPS-posisjon, for eksempel breddegrad, lengdegrad og høyde. Når "suksess" -funksjonen kalles i ExerciseTracker, legger vi til det siste posisjonobjektet i arrayet I denne opplæringen så vi på en oversikt over ExerciseTracker-appen, konstruerte hjemmesiden og begynte å jobbe på Track Workout-siden. I den neste opplæringen, fullfører vi opplæringssiden og avslutter ExerciseTracker-appen ved å la brukeren se vistte treningsøkter som er plottet på et Google Map. eller elementer og lister består av elementer. Vi beskriver semantisk informasjon om hvert av elementene ved å definere dataattributter. For eksempel, data-rolle Attributt forteller jQueryMobile rollen til HTML-elementet og data-icon Attributt angir hvilket ikon som skal vises inne i elementet. Du kan se nedenfor hvordan hjemmesiden er sammensatt av HTML-elementer med data-rolle egenskaper.
Hjem
data-rolle, data-overgang, og data-icon attributter og bruker automatisk riktig CSS-formatering til dem.
Kontrollerer nettverkstilgang
deviceready Event som avfyres når PhoneGap er ferdig med å laste. Vi bruker deretter PhoneGap Connection API for å spørre om vi har tilgang til Internett. Hvis vi ikke har internettilgang, må vi oppdatere knappen på hjemmesiden. Vi oppdaterer teksten, angir et nytt ikon og ringer til knappen ( 'refresh') metode, som tvinger jQuery Mobile til å redraw knappen. document.addEventListener ("deviceready", funksjon () if (navigator.network.connection.type == Connection.NONE) $ ("# home_network_button"). tekst ('Ingen Internettilgang') .attr ikon "," slett "). knapp ('oppdater'););
Bygg opp spor-treningssiden
data-role = "innhold" delen av spor-treningssiden, definerer vi et tekstfelt (for brukeren å skrive inn et navn for trening) samt to knapper som starter og stopper treningen.
Spor treningsøkt
Sporing av brukerens bevegelser
getCurrentPosition () og watchPosition (). De getCurrentPosition () funksjonen vil bli brukt når du vil få en engangsreparasjon på brukerens plassering (for eksempel lagring av brukerens plassering når de tar et bilde). Vår app vil bruke watchPosition () for å gjøre dette, som regelmessig avspør GPS-funksjonen til telefonen og mottar konstante oppdateringer på brukerens plassering.watchPosition () aksepterer tre argumenter. Den første er en funksjon som kalles hver gang telefonen returnerer en GPS-posisjon, den andre er en funksjon som kalles når det er en GPS-feil, og den tredje er et objekt med innstillinger.tracking_data. var track_id = "; // Navn / ID for øvelsen var watch_id = null; // ID for geolocation var tracking_data = []; // Array inneholdende GPS-posisjonobjekter $ (" # startTracking_start "). live ('klikk' , funksjon () // Start sporing av brukeren watch_id = navigator.geolocation.watchPosition (// Suksessfunksjon (posisjon) tracking_data.push (posisjon);, // Feilfunksjon (feil) console.log ;, // Innstillinger frekvens: 3000, enableHighAccuracy: true); / Ryd opp brukergrensesnittet track_id = $ ("# track_id") .val (); $ ("# track_id"). ("#startTracking_status"). html ("Sporingstrening: "+ track_id +""););
Konklusjon
Accentsconagua