Mobila webbplatser har kommit långt, men om du vill dra full nytta av en smartphones hårdvara eller bli listad i iTunes App Store måste du sammanställa din kod. I den här handledningen visar vi hur du skapar en mobilwebben med ett iPhone-utseende med jQTouch och gör det sedan till en inbyggd iPhone-app med Phonegap. Ingen mål-C nödvändig.

Handledning detaljer

• Program: Phonegap
• Version: 0,80
• Svårighet: Mellanliggande
• Beräknad slutförd tid: 1 timme

Krav

För att slutföra denna handledning behöver du följande:

• Mac OS X
• XCode (ingår i Mac OS X, men installeras separat)
• iPhone SDK (registrering krävs)
• PhoneGap 0.80

Introduktion till PhoneGap

PhoneGap är en öppen källkod som kan göra alla webbapps till en inbyggd app för iPhone, BlackBerry och Android. Det drar av sig
detta trick genom att köra din webbkod i en UIWebView, en inbäddad förekomst av Safari utan
verktygsfält och knappar i fristående Safari-appen. PhoneGap utökar sedan denna grundläggande funktionalitet genom att mappningsfunktionerna hos
iPhone SDK till JavaScript-objekt som du kan ringa i din webbkod, så att du enkelt kan lägga till funktioner som GPS, kamera, kontakter, vibrationer,
SQLLite och accelerometer stöd. Och när du är redo att distribuera din app, är PhoneGap 0.80 Apple-godkänd!

Inkluderat i PhoneGap-distributionen är allt du behöver för att bygga och driva en iPhone-app. Det medföljande XCode-projektet är buntat
med en provkod som visar hur du använder många av de inbyggda funktionerna och alla stödfiler som behövs för att kompilera appen och
kör det i iPhone Simulator eller på din telefon.

Bygg och kör en iPhone App

För att testa om du har din Mac redo att köra din kod, låt oss prova det provprojekt som ingår i PhoneGap.

Öppna först iPhone-mappen och dubbelklicka på PhoneGap.xcodeproj:

Detta borde öppna XCode med ditt projekt laddade. Även om det händer mycket här, behöver vi som webbutvecklare bara
att oroa oss för www mapp. Detta innehåller webbkoden som blir gränssnittet och logiken till
vår app.

Nu när vi har laddat vårt projekt, är det dags att ta det för en tur. Bifogad med iPhone SDK är en iPhone Simulator som
krokar direkt in i XCode. Allt vi behöver göra är att klicka på "Build and Run."

Bygga din webbapp

För denna tutorials skull har jag lagt ihop en enkel, inbyggd känsla som visar min Tumblr-matning med en bild om "Om"
skärm. Den här appen är baserad på det utmärkta jQTouch-ramverket, ett jQuery-baserat bibliotek av användargränssnitt
element, animeringar och tillägg som gör att du snabbt kan utveckla mobila webbappar med inbyggd utseende. Låt oss ta en snabb titt
genom att sätta ihop en webbapp med jQTouch innan vi importerar den här appen till vårt Phonegap-projekt.

Först laddar vi jQuery, jQTouch och några buntade temafiler i märka; Dessa kommer att utforma våra element för att se ut
inbyggda iPhone UI-widgets:

Då bygger vi ut skelettet på vår app:

jQTouch tar någon direkt efterföljare av tagga och konvertera den till en helskärms "vy". Det betyder varje

i koden ovan kommer överta hela skärmen, och byta skärmar innebär byte mellan

s genom att länka
till dem av deras id:

 Handla om

JQTouch innehåller en mängd olika sätt att övergå mellan dessa skärmar, och de kan enkelt aktiveras genom att lägga till CSS-klasser.
Om du till exempel vill aktivera den här länken till Om-sidan till en övergångsövergång, lägger vi till följande:

 Handla om

Sedan lägger vi till en knapp på sidan Om själv, för att "stänga" panelen genom att skjuta tillbaka den:

 Stänga

På standardskärmen lägger vi till en verktygsfält med den ovan nämnda "Om" -knappen och en plats för att bädda in ett Tumblr-flöde:

 
 
Hem
 Handla om 
 
Direktsändning
 
  

Slutligen, några CSS-klasser som kommer att stile utmatningen från Tumblr-flödet för att matcha vårt "Apple" -tema:

 ol färg: svart; bakgrund: #fff; gräns: 1px fast # B4B4B4; typsnitt: fet 17px Helvetica; vaddering: 0; marginal: 15px 10px 17px 10px; -webkit-gräns-radie: 8px;  ol> li färg: # 666; border-top: 1px solid # B4B4B4; lista-stil-typ: none; vaddering: 10px 25px 10px 25px; 

Det är allt! Efter att ha lagt till något innehåll på vår Omsida ersätter vi filerna i vårt Phonegap-projekt www mapp
med vår nya webbapp och kör den igen:

Slutsats

Vår webbapp är nu sammanställd, och härifrån kan den paketeras upp för distribution i iTunes Store. Det är en enkel start, men
på väldigt lite tid har vi en inbyggd app som ser ut som Apples egna, körs på någon iPhone och kan utökas till en mängd olika användningsområden.

Jag kommer att täcka hur du förlänger din app med stöd för kameror och geo-location i framtida handledning. Under tiden kan du
Läs mer om Phonegap på Phonegap Wiki. Dokumentationen är inte fullständigt flaskad ut,
så du kan hitta dig själv att gräva genom git repositories efter slutet av en lång jakt.

För att skicka in din app till iTunes App Store, registrera dig för iPhone Developer Program.
När du är registrerad får du verktygen för att signera digitalt och skicka din app till iTunes Store.

Skriv en Plus-handledning

Visste du att du kan tjäna upp till $ 600 för att skriva en PLUS-handledning och / eller screencast för oss? Vi letar efter djupgående och välskrivna handledning på HTML, CSS, PHP och JavaScript. Om du har förmåga, kontakta Jeffrey på [email protected].

Observera att den faktiska ersättningen kommer att vara beroende av kvaliteten på den slutliga handledningen och screencast.

• Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för de bästa webbutvecklingsstudierna på webben.

Koda