Share
Vil du lære å bruke PhoneGap, men vet ikke hvor du skal komme i gang? Bli med oss når vi setter sammen "Sculder", ikke bare en hyllest til en utmerket science fiction-tv-serie, men en fullverdig, mobil applikasjon for den troende i deg!
I den siste delen av denne serien fikk vi vår web-app oppe med noen grunnleggende struktur og overganger mellom sider. I denne delen skal vi fortsette å jobbe med å fylle ut delene av appen som kan kjøre uten PhoneGap og sette opp vårt PhoneGap-prosjekt, klar for integrasjonen.
Før vi begynte, ønsket jeg å dekke et spørsmål som jeg alltid blir spurt om. Dette er et spørsmål jeg en gang spurte, og uten tvil har du kanskje bedt om det. Nemlig: Hvordan feiler jeg en webapp på en mobilenhet?
Det finnes en rekke måter å feilsøke på en enhet. Du kan gå på skolen og bruke alert (noe);, men å ha varsler over alt er begge ineffektive og kan ende opp i produksjonskoden (så irriterende!). Du kan bruke feilsøkingskonsollen i Safari på en iOS-enhet, som ligger i Innstillinger -> Safari -> Utvikler, men ikke alle enheter bruker Safari eller har en feilsøkingskonsoll. Denne konsollen gir også minimal informasjon.
Hvis jeg bare trenger å bruke en JavaScript-konsoll for å fange en console.log (), eller kanskje utføre noen JS på enheten for å sjekke noe, jeg liker å bruke jsconsole.com. Det er en av de enkleste metodene for å bruke en konsoll på enheten din, og det er enda en iOS-app tilgjengelig. For å starte en økt på jsconsole.com, skriv bare :lytte og du vil da få en script tag output å inkludere på din side. Start opp appen din, og du vil se at forbindelsen skjer i konsollen. Du kan nå kjøre JS i konsollen og se det reflektert på enheten eller logge på konsollen i koden din og se den her. Se videoen nedenfor for en demonstrasjon av dette:
For mer hjelp på jsconsole, se her.
Et annet alternativ er WeInRe (Web Inspector Remote). Først startet som et selvstendig prosjekt, er WeInRe nå en del av PhoneGap-familien og kan bli funnet på debug.phonegap.com. Oppsettet ligner veldig jsconsole, men det du faktisk får, er en WebKit inspector, som Chrome eller Safari. Se videoen nedenfor for et eksempel:
Et annet alternativ er Socketbug, som er flott, men krever at Node and socket.io skal installeres og settes opp, som dessverre er utenfor omfanget av denne opplæringen. Hvis du føler deg eventyrlystne og vil gi Socketbug et forsøk - det er verdt det.
Det er de feilsøkingsverktøyene jeg bruker. Nå kan vi begynne å legge til noen funksjoner!
Et av funksjonene som vi kan implementere uten en PhoneGap API, er Twitter-feeden. Denne funksjonen vil bare liste en feed av tweets som samsvarer med et bestemt søkeord. Heldigvis kan Twitter returnere data i JSON-format når vi kjører et søk på search.twitter.com. Hvis du bruker følgende nettadresse http://search.twitter.com/search.json?q=ufo+spotted&rpp=4, Du får et JSON-svar fylt med nok data til å fylle en liste.
For å få våre data på siden og vise den på en fin måte, skal vi bruke templering. Det er en haug med malmotorer der ute, og de er alle verdt å se på, Moustache er en veldig populær og veldig kraftig. jQuery har også en som jeg tror er perfekt for det vi ønsker å oppnå.
På tweet-siden kommer jeg til å være tom ul og a div beholder som er skjult på siden. Innenfor beholderen vil være koden jeg vil bruke som en mal. I dette tilfellet er det enkelt li element med noen grunnleggende oppslag som vil holde kvitteringsinformasjonen vi vil vise. Det vil være i en manus blokkere som har en unik ID og en type type = "text / x-jquery-tmpl", Dette er slik at nettleseren ikke utfører den som JavaScript. Twitter-templerende motoren bruker $ som plassholder for de dataene vi får fra vår JSON data. Tweets siden ser nå noe ut som dette:
Nå må vi skrive vår funksjon som vil bli kalt når som helst vi laster inn denne siden. Denne funksjonen vil gå ut på Twitter og få vår feed:
Accentsconagua
funksjon getTweets () var q = "ufo + flekket" rpp = 5, twurl = "http://search.twitter.com/search.json?q="; $ .getJSON (twurl + q + "& rpp =" + rpp + "& callback =?", funksjon (data) $ ("# tmpl-tweets"). tmpl (data.results) .appendTo ("# tweets") ;); Jeg kommer til å laste denne siden først, så jeg har satt sidenes klasse til nåværende. Nå må vi bare legge til noen stil på tweets, så de vises litt bedre.
/ ** Tweets Styling ** / #tweets listestil: none; padding: 10px; #tweets li font-size: 12px; overløp: skjult; margin-bottom: 20 piksler; #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%;
Neste gang vi starter opp appen, bør vi få følgende.
Den andre funksjonen som vi kan implementere før vi gjør phonegap integrasjonen er kartfunksjonen. Vi skal bruke Google Maps API for å generere et enkelt kart og deretter bruke noen kartdata til å slippe markører. Hver markør vil indikere UFO-observasjoner.
For dette skal vi bruke JavaScript API, for øyeblikket på versjon 3. En full introduksjon til kart-API-en er ikke tilgjengelig for denne opplæringen, men du finner all dokumentasjonen som finnes her, samt implementeringsprøver. Hvis du følger veiledningen funnet her, vil du se hvordan du implementerer et grunnleggende kart. Vi kan bruke samme kode for å implementere et grunnleggende kart og ende opp med følgende:
Nå kan vi gå til dokumentasjonen som dekker markørene, funnet her. Nå kan vi slippe noen grunnleggende markører på kartet vårt ved belastning. Markørene representerer observasjonssteder med dataene fra fotografiene som er tatt og lastet opp av brukere av søknaden. Vi ville ha en tjeneste som kjører på en server som kan returnere data via Ajax, sannsynligvis i JSON-formatet. Igjen, å sette opp denne tjenesten er en hel opplæring i seg selv, men for hver oppføring vil vi opprette en markør for kartet ved hjelp av koden som er gitt i demoen.
var markør = ny Google.maps.Marker (posisjon: newLatlng, map: map, tittel: "New Sighting");
Etter at kartet lastet, ble markørene lagt til. Hvis du leser gjennom Google API-dokumentasjonen, finner du andre alternativer for markørene - for eksempel å vise dem med bilder og notater. Det er verdt å utforske de andre alternativene og komme opp med ulike implementeringer.
Det handler om så mye som vi kan gjøre før vi kommer til PhoneGap. Vår siste funksjon krever bruk av kameraet, så la oss gå videre og begynne å sette opp vårt PhoneGap-prosjekt. Ta en titt på introduksjonen til PhoneGap her hvis du ikke allerede har det.
Ikoner er en svært viktig del av søknaden. Det er bildet som representerer din søknad overalt, og det er visse retningslinjer du vil følge for å sikre at det ser bra ut overalt, det vil bli sett. Det er et flott blogginnlegg her om ikonstørrelser og retningslinjene som skal følges når du lager et ikon. Jeg bruker vanligvis et 512x512 ikon og skaler det ned derfra til alle størrelser som trengs.
Du må også opprette en startbilde / splash-skjerm for appen din.
Når vi har standard PhoneGap-programmet som kjører på simulatoren og / eller testenheten. Vi kan gå gjennom hovedoppsummeringssiden på Xcode-malen for PhoneGap. Det første jeg vil forsikre meg om er at enhetens meny er satt til iPhone. Vi kunne distribuere til iPad også, hvis vi ønsket det, men det kan være noen CSS-endringer som vi ønsker å gjøre først. For nå stikker jeg bare til iPhone. Kontroller alle enhetens retninger da jQuery Mobile sorterer ut vårt layout, avhengig av orientering. Du kan dra og slippe bildefiler i de tildelte sporene på oppsummeringssiden.
Nå, når du starter opp søknaden din, blir du møtt med ditt nye appikon og startside. Kopier nå filene du har jobbet fra i www mappe. Start opp appen og kontroller at alt fungerer OK.
Etter at du har satt opp prosjektet ditt i Eclipse (på samme måte som vi gjorde vårt testprosjekt i første del her), må du ha tre ikonstørrelser utarbeidet for din søknad. Høy tetthet (72x72), Middels tetthet (48x48), og lav tetthet (36x36). Disse ikonene erstatter standardikonene som kan finnes i res mappe. De passende akronymer er hdpi, mdpi og ldpi som står for henholdsvis høy, middels og lav. Bildene du vil bruke som din skjermbilde, bør også gå i disse mappene.
For å få splash-skjermen til å fungere for Android, må vi legge til og endre vår DroidGap klasse for å inkludere splash bildet på lasten. Legg til:
super.setIntergerProperty ("splashscreen", R.drawable.splash) Deretter loadUrl trenger en timeout lagt til den.
super.loadUrl ("fil: ///android_asset/www/index.html", 5000); Filen din skal nå se ut som følgende:
Kjør programmet og sørg for at alt fungerer OK.
Vi er nå på det punktet hvor vi er klare til å implementere våre to siste funksjoner: enhetskameraet og lokale lagringsalternativer. Å gjøre det vil bli dekket i fremtidige opplæringsprogrammer i denne serien. Denne serien vil også gå gjennom å sende inn appen vår til de forskjellige appbutikkene, så vær sikker på å følge med!
