Share
Mobile nettsteder har kommet langt, men hvis du vil dra full nytte av en maskinens maskinvare, eller bli oppført i iTunes App Store, må du kompilere koden din. I denne veiledningen viser vi deg hvordan du lager en mobil webapp med et iPhone-utseende ved å bruke jQTouch, og deretter slå det til en innfødt iPhone-app ved hjelp av Phonegap. Ingen mål-C nødvendig.
For å fullføre denne opplæringen trenger du følgende:
PhoneGap er en åpen kildekode ramme som kan slå enhver web app til en innfødt app for iPhone, BlackBerry og Android. Den trekker av
dette trikset ved å kjøre webkoden din i en UIWebView, en innebygd forekomst av Safari uten
verktøylinjer og knapper av den frittstående Safari-appen. PhoneGap utvider da denne grunnleggende funksjonaliteten ved å kartlegge funksjoner av
iPhone SDK til JavaScript-objekter du kan ringe i webkoden din, slik at du enkelt kan legge til funksjoner som GPS, kamera, kontakter, vibrasjon,
SQLLite og akselerometer støtte. Og når du er klar til å distribuere appen din, er PhoneGap 0.80 Apple-godkjent!
Inkludert i PhoneGap-distribusjonen er alt du trenger for å bygge og kjøre en iPhone-app. Det medfølgende XCode-prosjektet er buntet
med en prøvekode som viser hvordan du bruker mange av de innfødte funksjonene, og alle støttefiler som er nødvendige for å kompilere appen og
Kjør det i iPhone Simulator eller på telefonen.
For å teste om du har Mac-maskinen din klar til å kjøre koden, la oss prøve prøveprosjektet som følger med PhoneGap.
Åpne først iPhone-mappen, og dobbeltklikk på PhoneGap.xcodeproj:
Dette bør åpne XCode med prosjektet lastet. Selv om det skjer mye her, trenger vi som webutviklere bare
å bekymre oss for www mappe. Dette inneholder webkoden som blir grensesnittet og logikken til
vår app.
Nå som vi har fått vårt prosjekt lastet, er det på tide å ta det for et snurr. Bundet med iPhone SDK er en iPhone Simulator som
kroker rett inn i XCode. Alt vi trenger å gjøre er å klikke på "Build and Run."
For denne tutorials skyld har jeg satt sammen en enkel, innfødt følelse-app som viser min Tumblr-feed med et lysbilde "Om"
skjerm. Denne appen er basert på det ypperlige jQTouch-rammeverket, et jQuery-basert bibliotek av brukergrensesnitt
elementer, animasjoner og utvidelser som lar deg raskt utvikle mobile webapper med innfødt utseende. La oss ta en rask titt
ved å sette sammen en webapp ved hjelp av jQTouch før vi importerer denne appen til vårt Phonegap-prosjekt.
Først legger vi inn jQuery, jQTouch og noen medfølgende temafiler i
stikkord; Disse vil style våre elementer for å se utDa bygger vi ut skjelettet til appen vår:
jQTouch tar noen direkte etterkommere av
tag og konverterer den til en fullskjerm "visning". Dette betyr hver
Accentsconagua
id: Handle om
JQTouch inneholder en rekke kule måter å overføre mellom disse skjermene, og de og kan aktiveres ved å legge til CSS-klasser.
Hvis du for eksempel vil slå den linken til Om siden til en overgang, vil vi legge til følgende:
Handle om
Deretter legger vi til en knapp for å lukke panelet ved å skyve det tilbake på selve siden.
Lukk
På standardskjermen legger vi til en verktøylinje med den ovennevnte "Om" -knappen, og et sted å legge inn en Tumblr-feed:
Hjem
Handle omDirektestrømming
Til slutt, noen få CSS-klasser som vil stile produksjonen av Tumblr-strømmen for å matche vårt "Apple" -tema:
ol farge: svart; bakgrunn: #fff; grense: 1px solid # B4B4B4; font: fet 17px helvetica; polstring: 0; margin: 15px 10px 17px 10px; -webkit-grense-radius: 8px; ol> li color: # 666; border-top: 1px solid # B4B4B4; liste-stil-type: none; polstring: 10px 25px 10px 25px;
Det er det! Etter at du har lagt til noe innhold på vår Om side, erstatter vi filene i vårt Phonegap-prosjekt www mappe
med vår nye web-app, og kjør den igjen:
Vår nettapp er nå kompilert, og herfra kan pakkes opp for distribusjon i iTunes Store. Det er en enkel start, men
på svært liten tid har vi en innfødt app som ser ut som Apples egen, kjører på hvilken som helst iPhone, og kan utvides til en rekke bruksområder.
Jeg skal dekke hvordan du kan utvide appen din med støtte for kameraer og geo-plassering i fremtidige opplæringsprogrammer. I mellomtiden kan du
Les mer om Phonegap på Phonegap Wiki. Dokumentasjonen er ikke fullt utflettet,
så du kan finne deg selv graving gjennom git repositories etter en lang jakt.
For å sende inn appen din til iTunes App Store, registrer deg for iPhone-utviklerprogrammet.
Når du er registrert, får du verktøyene for å signere og sende inn appen din til iTunes Store.
Visste du at du kan tjene opp til $ 600 for å skrive en PLUS-opplæring og / eller screencast for oss? Vi leter etter dybde og velskrevne opplæringsprogrammer om HTML, CSS, PHP og JavaScript. Hvis du er i stand til å kontakte Jeffrey på [email protected].
Vær oppmerksom på at faktisk kompensasjon vil være avhengig av kvaliteten på den endelige opplæringen og screencast.
