Share
Wil je leren hoe je een complete mobiele applicatie schrijft met behulp van PhoneGap, maar weet je niet hoe je moet beginnen? Volg deze tweedelige zelfstudiereeks en ik zal je laten zien hoe je een mobiele app kunt bouwen die je oefeningsroute volgt, registreert en in kaart brengt met behulp van de GPS-functies op je telefoon!
Dit gedeelte is een breed overzicht van ExerciseTracker, de applicatie die we gaan bouwen.
De startpagina controleert of de telefoon een actieve netwerkverbinding heeft (we hebben dit nodig om te laden
Google Maps om de route uit te zetten). Het heeft ook twee knoppen die handig zijn om de app te testen, maar die later eenvoudig kunnen worden verwijderd, indien gewenst.
De pagina Tracktraining heeft een enkel tekstinvoerveld waarmee de gebruiker een naam of ID voor zijn training kan invoeren. Wanneer ze op "Beginnen met volgen" klikken, begint de telefoon hun GPS-locatie te registreren. Wanneer ze klikken op "Tracking stoppen", worden de GPS-gegevens opgeslagen op de telefoon.
Op de pagina Geschiedenis worden alle bijgehouden trainingen weergegeven die de gebruiker heeft voltooid.
De Track Info-pagina geeft trainingspecifieke informatie. Het toont de totale afgelegde afstand in kilometers en de totale tijd die nodig is voor de training, en geeft vervolgens de route weer die de gebruiker op een Google Map heeft afgelegd.
Onze applicatie, ExerciseTracker, zal draaien op het mobiele platform van PhoneGap. Met PhoneGap kunnen we eenvoudig mobiele applicaties maken met behulp van vertrouwde webtechnologieën zoals HTML 5, CSS en JavaScript, en deze vervolgens naadloos implementeren als native apps op platforms zoals iOS, Android en Windows Phone.
De trainings-tracker-app die we gaan bouwen, maakt gebruik van de volgende technologieën:
In deze tweedelige serie zelfstudies leer je hoe je het bovenstaande kunt gebruiken om een complete PhoneGap-toepassing te maken.
Het eerste dat we moeten doen, is het opzetten van de ontwikkelomgeving van PhoneGap. PhoneGap biedt een geweldige startpagina die u helpt bij het instellen van de ontwikkelomgeving van PhoneGap voor elk van de verschillende mobiele platforms. Kies het platform dat u wilt ontwikkelen en volg de instructies om de standaard PhoneGap-toepassing in te stellen. In deze zelfstudie ontwikkel ik een Android-installatie (Android 4.0.3 API v15), maar de code in deze handleiding moet op alle platforms werken.
Je zou nu een minimum moeten hebben index.html bestand dat u kunt bekijken op uw apparaatemulator.
Laten we beginnen met de ontwikkeling van onze app door alle benodigde JavaScript- en CSS-bestanden te downloaden en te integreren.
Download en kopieer elk van deze bestanden naar dezelfde map als de index.html en cordova-1.7.0.js bestanden.
In dit stadium ziet de directorystructuur van mijn Android-app er als volgt uit:
Uw mappenstructuur zou er als volgt uit moeten zien.
Om ervoor te zorgen dat onze applicatie Google Maps gebruikt, moeten we over een API-sleutel beschikken. API-sleutels zijn gratis om maximaal 25.000 vragen per dag te ontvangen en te ondersteunen. Volg de gids die Google geeft om uw API-sleutel te registreren. Noteer het, we zullen het in de volgende stap nodig hebben!
Laten we de eerste versie van schrijven index.html. Dit omvat alle JavaScript- en CSS-afhankelijkheden die ExerciseTracker zal hebben.
ExerciseTracker Hallo Wereld
Zorg ervoor dat je het vervangt YOUR_API_KEY_HERE met uw daadwerkelijke Google Maps API Key.
U zou dit in uw emulator moeten kunnen lanceren en geen fouten ontvangen.
Laten we nu de startpagina maken. Met jQueryMobile kunnen we onze gebruikersinterface definiëren met behulp van standaard HTML-tags. Pagina's in onze app zijn Welkom bij de ExerciseTracker app. Door te klikken Trainingen volgen u kunt uw workouts opnemen met behulp van de GPS-functie op uw telefoon. Leer hoe je deze app kunt bouwen door te lezen mobile.tutsplus.com. jQueryMobile parseert en interpreteert de betekenissen van de verschillende We moeten nu controleren of de gebruiker toegang heeft tot internet. Als dat niet het geval is, wordt de Google Map niet geladen en is de app cripppled. We beginnen met te luisteren naar de Trainingspagina bijhouden Nadat de startpagina is voltooid, kunnen we nu beginnen met het maken van de Track Workout-pagina. De HTML / CSS-code voor beide pagina's is vergelijkbaar, echter in de We kunnen de locatie van de gebruiker controleren met behulp van de PhoneGap Geolocation-API. Het biedt twee hoofdfuncties: De Telkens wanneer de functie "succes" wordt aangeroepen, wordt een Positie-object doorgegeven. Dit bevat informatie over de GPS-positie van de gebruiker, zoals de breedtegraad, lengtegraad en hoogte. Wanneer de "succes" -functie wordt aangeroepen in ExerciseTracker, voegen we het laatste Positie-object bij de array In deze zelfstudie hebben we gekeken naar een overzicht van de ExerciseTracker-app, de startpagina gemaakt en begonnen aan de pagina Trackworkout. In de volgende zelfstudie voltooien we de pagina Trackworkout en voltooien we de ExerciseTracker-app door de gebruiker toe te staan opgeslagen workouts te bekijken die zijn geplot op een Google Map. of elementen en lijsten zijn samengesteld uit elementen. We beschrijven semantische informatie over elk van deze elementen door gegevensattributen te definiëren. Bijvoorbeeld de data-rol attribuut vertelt jQueryMobile de rol van het HTML-element en de data-icon kenmerk geeft aan welk pictogram binnen het element wordt weergegeven. Hieronder ziet u hoe de startpagina bestaat uit HTML-elementen met data-rol attributen.
Huis
data-rol, data-overgang, en data-icon attributen en past automatisch de juiste CSS-opmaak op hen toe.
Controleren op netwerktoegang
deviceready gebeurtenis die wordt afgevuurd wanneer PhoneGap klaar is met laden. Vervolgens gebruiken we de PhoneGap Connection API om te vragen of we toegang hebben tot internet. Als we geen toegang tot internet hebben, moeten we de knop op de startpagina bijwerken. We werken de tekst bij, stellen een nieuw pictogram in en bellen het knop ( 'refresh') methode, waardoor jQuery Mobile wordt gedwongen de knop opnieuw te tekenen. document.addEventListener ("deviceready", function () if (navigator.network.connection.type == Connection.NONE) $ ("# home_network_button"). text ('Geen internettoegang') .attr ("gegevens- icon "," delete ") .button ('refresh'););
De tracktrainingpagina bouwen
data-role = "content" sectie van de Track Workout-pagina, definiëren we een tekstveld (voor de gebruiker om een naam in te voeren voor hun training) en twee knoppen die de training starten en stoppen.
Trainingen volgen
De bewegingen van de gebruiker volgen
getCurrentPosition () en watchPosition (). De getCurrentPosition () functie zou worden gebruikt wanneer u een eenmalige oplossing op de locatie van de gebruiker wilt krijgen (zoals het opslaan van de locatie van de gebruiker wanneer deze een foto maakt). Onze app zal gebruiken watchPosition () om dit te doen, die regelmatig de GPS-functie van de telefoon peilt en constante updates ontvangt op de locatie van de gebruiker.watchPosition () accepteert drie argumenten. De eerste is een functie die wordt aangeroepen telkens wanneer de telefoon met succes een GPS-locatie retourneert, de tweede is een functie die wordt aangeroepen wanneer er een GPS-fout is en de derde een object van instellingen.tracking_data. var track_id = "; // Naam / ID van de oefening var watch_id = null; // ID van de geolocatie var tracking_data = []; // Serie met GPS-positieobjecten $ (" # startTracking_start "). live ('klik') , function () // Begin met het volgen van de gebruiker watch_id = navigator.geolocation.watchPosition (// Succesfunctie (positie) tracking_data.push (positie);, // Foutfunctie (fout) console.log (fout) ;, // Instellingen frequentie: 3000, enableHighAccuracy: true); // Ruim de gebruikersinterface op track_id = $ ("# track_id"). Val (); $ ("# track_id"). Hide (); $ ("#startTracking_status"). html ("Tracking-training: "+ track_id +""););
Conclusie
Accentsconagua