Share
Wilt u leren hoe u PhoneGap kunt gebruiken, maar weet u niet waar u moet beginnen? Doe met ons mee als we "Sculder" samenstellen, niet alleen een eerbetoon aan een uitstekende science fiction tv-serie, maar een volwaardige native mobiele applicatie voor de gelovige in jou!
In het laatste deel van deze serie hebben we onze webapp in gebruik genomen met een basisstructuur en overgangen tussen pagina's. In dit deel gaan we door met het invullen van de onderdelen van de app die zonder PhoneGap kunnen worden uitgevoerd en ons PhoneGap-project kunnen opzetten, klaar voor de integratie.
Voordat we begonnen, wilde ik een vraag behandelen die me altijd wordt gesteld. Dit is een vraag die ik ooit heb gesteld, en die je ongetwijfeld ook hebt gevraagd. Namelijk: Hoe debug ik een web-app op een mobiel apparaat?
Er zijn een aantal manieren om fouten op te sporen in een apparaat. Je zou old-school kunnen gaan en gebruiken alert (iets);, maar overal meldingen hebben is zowel inefficiënt en zou in de productiecode kunnen eindigen (zo irritant!). U kunt de foutopsporingsconsole in Safari gebruiken op een iOS-apparaat in Instellingen -> Safari -> Ontwikkelaar, maar niet alle apparaten gebruiken Safari of hebben een foutopsporingsconsole. Bovendien voert deze console minimale informatie uit.
Als ik gewoon een JavaScript-console moet gebruiken om een te vangen console.log (), of misschien wat JS op het apparaat uitvoeren om iets te controleren, ik gebruik graag jsconsole.com. Het is een van de eenvoudigste methoden om een console op uw apparaat te gebruiken en er is zelfs een iOS-app beschikbaar. Als u een sessie op jsconsole.com wilt starten, typt u gewoon :luister en je krijgt dan een scripttag-uitvoer die je op je pagina kunt opnemen. Start je app en je zult zien dat de verbinding in de console plaatsvindt. U kunt nu JS uitvoeren in de console en het weerspiegeld zien op het apparaat of inloggen op de console in uw code en het hier bekijken. Zie de video hieronder voor een demonstratie hiervan:
Zie hier voor meer hulp over jsconsole.
Een ander alternatief is WeInRe (Web Inspector Remote). Eerst begon het als een onafhankelijk project, WeInRe maakt nu deel uit van de PhoneGap-familie en is te vinden op debug.phonegap.com. De set-up lijkt erg op jsconsole, maar wat je daadwerkelijk krijgt, is een een WebKit-inspecteur, net als Chrome of Safari. Zie de video hieronder voor een voorbeeld:
Een ander alternatief is Socketbug, wat geweldig is, maar vereist dat Node en socket.io worden geïnstalleerd en ingesteld, wat helaas buiten het bereik van deze tutorial valt. Als je echter avontuurlijk bent en Socketbug eens wilt proberen, is het het waard.
Dat zijn de hulpprogramma's voor foutopsporing die ik gebruik. Nu kunnen we beginnen met het toevoegen van enkele functies!
Een van de functies die we kunnen implementeren zonder een PhoneGap API is de Twitter-feed. Met deze functie wordt eenvoudig een feed met tweets weergegeven die overeenkomen met een bepaalde zoekterm. Gelukkig kunnen Twitter gegevens in JSON-formaat retourneren wanneer we een zoekopdracht uitvoeren op search.twitter.com. Als u de volgende URL gebruikt http://search.twitter.com/search.json?q=ufo+spotted&rpp=4, u krijgt een JSON-antwoord dat is gevuld met voldoende gegevens om een lijst te vullen.
Om onze gegevens op de pagina te krijgen en op een leuke manier weer te geven, gaan we template gebruiken. Er zijn een hoop sjabloon-engines en die zijn het allemaal waard om naar te kijken, Moustache is erg populair en erg krachtig. jQuery heeft er ook een waarvan ik denk dat het perfect is voor wat we willen bereiken.
Op de tweet-pagina heb ik een lege pagina ul en een div container die op de pagina is verborgen. In de container wordt de code weergegeven die ik als sjabloon wil gebruiken. In dit geval is het een eenvoudig li element met een aantal basismarkeringen die de twitterinformatie bevatten die we willen weergeven. Het zal in een zijn script blok met een unieke ID en een type type = "text / x-jquery-tmpl", dit is zo dat de browser het niet als JavaScript uitvoert. De Twitter-templatemachine gebruikt $ als een tijdelijke aanduiding voor de gegevens die we van ons krijgen JSON gegevens. De tweets-pagina ziet er nu ongeveer zo uit:
Nu moeten we onze functie schrijven die wordt gebeld wanneer we deze pagina laden. Deze functie gaat naar Twitter en krijgt onze feed:
Accentsconagua
function getTweets () var q = "ufo + spotted" rpp = 5, twurl = "http://search.twitter.com/search.json?q="; $ .getJSON (twurl + q + "& rpp =" + rpp + "& callback =?", functie (gegevens) $ ("# tmpl-tweets"). tmpl (data.results) .appendTo ("# tweets") ;); Ik ga deze pagina eerst laden, dus ik heb de klasse van de pagina ingesteld op Huidig. Nu moeten we gewoon wat stijl aan de tweets toevoegen, zodat ze een beetje mooier worden weergegeven.
/ ** Tweets Styling ** / #tweets list-style: none; padding: 10px; #tweets li font-size: 12px; overloop verborgen; margin-bottom: 20px; #tweets li h2 font-size: 14px; margin: 0; .avatar margin-right: 10px; #tweets li a, #tweets li span float: left; #tweets li span width: 70%;
De volgende keer dat we de app opstarten, moeten we het volgende krijgen.
De andere functie die we kunnen implementeren voordat we de phonegap-integratie uitvoeren, is de kaartfunctie. We gaan de Google Maps API gebruiken om een eenvoudige kaart te genereren en vervolgens enkele kaartgegevens gebruiken om markeringen neer te zetten. Elke markering geeft UFO-waarnemingen aan.
Hiervoor gaan we de JavaScript-API gebruiken, momenteel op versie 3. Een volledige inleiding tot de Maps API is buiten het bereik van deze zelfstudie, maar je kunt hier alle documentatie vinden, evenals implementatiesamples. Als u de zelfstudie hier vindt, ziet u hoe u een basiskaart implementeert. We kunnen dezelfde code gebruiken om een basiskaart te implementeren en eindigen met het volgende:
Nu kunnen we naar de documentatie gaan die de markeringen dekt, die hier te vinden zijn. Nu kunnen we bij het laden enkele basismarkeringen op onze kaart laten vallen. De markeringen zouden locaties van waarnemingen weergeven met de gegevens van de foto's die zijn gemaakt en geüpload door gebruikers van de toepassing. We zouden een dienst draaien op een server die gegevens kan retourneren via Ajax, waarschijnlijk in het JSON-formaat. Nogmaals, het instellen van deze service is een volledige zelfstudie, maar voor elk item zouden we een markering voor de kaart maken met behulp van de code in de demo.
var marker = new Google.maps.Marker (position: newLatlng, map: map, titel: "New Sighting");
Nadat de kaart is geladen, worden de markeringen toegevoegd. Als u de documentatie van de Google API doorleest, vindt u andere opties voor de markeringen - zoals ze weergeven met afbeeldingen en notities. Het is de moeite waard om de andere opties te verkennen en verschillende implementaties te bedenken.
Dat is ongeveer net zoveel als we kunnen doen voordat we bij PhoneGap zijn. Onze laatste functie vereist het gebruik van de camera, dus laten we doorgaan en beginnen met het opzetten van ons PhoneGap-project. Bekijk hier de inleiding tot PhoneGap als je dat nog niet hebt gedaan.
Pictogrammen vormen een zeer belangrijk onderdeel van de toepassing. Het is de afbeelding die overal je applicatie vertegenwoordigt, en er zijn bepaalde richtlijnen die je wilt volgen om ervoor te zorgen dat deze er overal goed uitziet. Er is hier een geweldige blogpost over de pictogramgroottes en de richtlijnen die moeten worden gevolgd bij het maken van een pictogram. Ik neem meestal een 512x512-pictogram en schaal het van daar naar alle benodigde formaten.
U moet ook een startafbeelding / splash-scherm maken voor uw app.
Zodra we de standaard PhoneGap-applicatie hebben die op onze simulator en / of testapparaat draait. We kunnen de hoofdoverzichtspagina op de Xcode-sjabloon doornemen voor PhoneGap. Het eerste dat ik zeker wil weten is dat het apparatenmenu is ingesteld op iPhone. We zouden ook kunnen inzetten op de iPad, als we dat ook wilden, maar er kunnen een paar CSS-wijzigingen zijn die we eerst willen aanbrengen. Voorlopig blijf ik alleen bij de iPhone. Controleer alle apparaatoriëntaties aangezien jQuery Mobile onze lay-out sorteert afhankelijk van de oriëntatie. U kunt de afbeeldingsbestanden slepen en neerzetten in de daarvoor bestemde slots op de overzichtspagina.
Wanneer u nu uw applicatie start, wordt u begroet met uw nieuwe app-pictogram en startpagina. Kopieer nu de bestanden waar je vanaf gewerkt hebt in de www map. Start de app en controleer of alles goed werkt.
Nadat u uw project hebt opgezet in Eclipse (op dezelfde manier waarop we ons testproject in het eerste deel hier hebben uitgevoerd), moet u drie pictogramgroottes hebben voorbereid voor uw toepassing. Hoge densiteit (72x72), gemiddelde dichtheid (48x48) en lage densiteit (36x36). Deze pictogrammen vervangen de standaardpictogrammen die kunnen worden gevonden in de res map. De juiste acroniemen zijn hdpi, mdpi en ldpi die respectievelijk voor High, Medium en Low staan. De afbeeldingen die u als uw startscherm wilt gebruiken, moeten ook in deze mappen worden weergegeven.
Om het startscherm voor Android te laten werken, moeten we onze startpagina toevoegen en wijzigen DroidGap klasse om het splash-beeld bij laden op te nemen. Toevoegen:
super.setIntergerProperty ("splashscreen", R.drawable.splash) Vervolgens de loadUrl er moet een time-out aan worden toegevoegd.
super.loadUrl ("file: ///android_asset/www/index.html", 5000); Uw bestand zou er nu als volgt uit moeten zien:
Start de applicatie en zorg ervoor dat alles goed werkt.
We staan nu op het punt waarop we klaar zijn om onze laatste twee functies te implementeren: de camera van het apparaat en lokale opslagopties. Dit wordt behandeld in toekomstige zelfstudies in deze serie. Deze serie gaat ook door het indienen van onze app bij de verschillende app-winkels, dus zorg ervoor dat je doorgaat!
