Site-urile web mobile au parcurs un drum lung, dar dacă doriți să profitați din plin de hardware-ul smartphone-ului sau să fiți listat în iTunes App Store, trebuie să vă compilați codul. În acest tutorial, vă vom arăta cum să creați o aplicație web mobilă cu aspect iPhone și să folosiți jQTouch, apoi să o transformați într-o aplicație iPhone nativă utilizând Phonegap. Nu este nevoie de obiectivul C.

Detalii tutoriale

• Program: Telefon
• Versiune: 0,80
• Dificultate: Intermediar
• Durata estimată de finalizare: 1 oră

cerinţe

Pentru a finaliza acest tutorial, veți avea nevoie de următoarele:

• Mac OS X
• XCode (inclus cu Mac OS X, dar instalat separat)
• iPhone SDK (este necesară înregistrarea)
• PhoneGap 0.80

Introducere în PhoneGap

PhoneGap este un cadru open-source care poate transforma orice aplicație web într-o aplicație nativă pentru iPhone, BlackBerry și Android. Se îndepărtează
acest truc prin rularea codului dvs. web într-o UIWebView, o instanță încorporată de Safari fără
barele de instrumente și butoanele aplicației Safari independente. PhoneGap extinde această funcție de bază prin maparea caracteristicilor
iPhone SDK pentru obiectele JavaScript pe care le puteți apela în codul dvs. web, astfel încât să puteți adăuga cu ușurință funcții cum ar fi GPS, cameră, contacte, vibrații,
SQLLite și suport pentru accelerometru. Și când sunteți gata să distribuiți aplicația, PhoneGap 0.80 este aprobată de Apple!

Inclus în distribuția PhoneGap este tot ce aveți nevoie pentru a construi și a rula o aplicație iPhone. Proiectul inclus XCode este cuplat
cu un exemplu de cod care arată modul în care se utilizează multe dintre caracteristicile native și toate fișierele de suport necesare pentru a compila aplicația și
rulați-o în Simulatorul iPhone sau pe telefon.

Construirea și rularea unei aplicații pentru iPhone

Pentru a testa dacă ați pregătit Macul să ruleze codul dvs., să încercăm exemplul proiect inclus în PhoneGap.

Mai întâi, deschideți folderul iPhone și faceți dublu clic pe PhoneGap.xcodeproj:

Acest lucru ar trebui să deschidă XCode cu proiectul încărcat. Deși se întâmplă multe lucruri aici, noi, ca dezvoltatori de web, avem nevoie doar de noi
să ne preocupe cu www pliant. Acesta conține codul web care va deveni interfața și logica lui
aplicația noastră.

Acum că avem proiectul încărcat, este timpul să-l luăm pentru o rotire. Bundled cu iPhone SDK este un simulator de iPhone care
cârligele direct în XCode. Tot ce trebuie să faceți este să faceți clic pe "Construiți și executați".

Construirea aplicației Web

De dragul acestui tutorial, am pus împreună o aplicație simplă, indigenă, care afișează feedul meu Tumblr cu un slide-up "Despre"
ecran. Această aplicație se bazează pe cadrul excelent jQTouch, o bibliotecă bazată pe jQuery de interfață utilizator
elemente, animații și extensii care vă permit să dezvoltați rapid aplicații web mobile cu aspect natural. Să aruncăm o privire rapidă
la crearea unei aplicații web utilizând jQTouch înainte de a importa această aplicație în proiectul nostru Phonegap.

În primul rând, încărcăm jQuery, jQTouch și câteva fișiere tematice incluse în etichetă; acestea vor forma elementele noastre pentru a arata
nativ widget-uri iPhone UI:

Apoi construim scheletul aplicației noastre:

jQTouch ia orice descendent direct al tag-ul și îl convertește într-o "vizualizare" pe ecran complet. Asta înseamnă fiecare

în codul de mai sus va prelua întregul ecran, iar schimbarea ecranelor înseamnă schimbarea între

prin conectare
la ei de către ei id:

 Despre

JQTouch include o varietate de moduri reci de tranziție între aceste ecrane și ele și pot fi activate doar prin adăugarea de clase CSS.
De exemplu, pentru a transforma acel link spre pagina Despre într-o tranziție de tip slide-up, adăugăm următoarele:

 Despre

Apoi, în pagina Despre, adăugăm un buton pentru a "închide" panoul prin glisarea înapoi:

 Închide

În ecranul implicit, vom adăuga o bară de instrumente cu butonul "Despre" menționat mai sus și un loc pentru a încorpora un feed Tumblr:

 
 
Acasă
 Despre 
 
Transmitere live
 
  

În cele din urmă, câteva clase CSS care vor modela ieșirea fluxului Tumblr pentru a se potrivi cu tema "Apple":

 ol culoare: negru; fundal: #fff; frontieră: 1px solid # B4B4B4; font: bold 17px Helvetica; umplutura: 0; margine: 15px 10px 17px 10px; -webkit-border-radius: 8px;  ol> li culoare: # 666; frontieră: 1px solid # B4B4B4; listă-tip: none; umplutura: 10px 25px 10px 25px; 

Asta e! După adăugarea conținutului în pagina Despre, înlocuiți fișierele din proiectul nostru Phonegap www pliant
cu noua noastră aplicație web și rulați-o din nou:

Concluzie

Aplicația noastră Web este acum compilată și de aici poate fi ambalată pentru distribuție în magazinul iTunes. E un început simplu, dar
în foarte puțin timp avem o aplicație nativă care arată ca Apple, rulează pe orice iPhone și poate fi extinsă la o varietate de utilizări.

Voi descrie cum să vă extindeți aplicația cu suport pentru camere și geo-locație în viitoarele tutoriale. Între timp, poți
citiți mai multe despre Phonegap de pe Wiki-ul Phonegap. Documentația nu este complet dezvoltată,
astfel încât s-ar putea să vă aflați în săpături prin arhivele Git după terminarea unei vânătoare lungi.

Pentru a trimite aplicația la iTunes App Store, înregistrați-vă pentru Programul de dezvoltatori iPhone.
Odată ce v-ați înregistrat, vi se vor oferi instrumentele necesare pentru semnarea digitală și trimiterea aplicației dvs. la magazinul iTunes.

Scrie un tutorial Plus

Știați că puteți câștiga până la 600 USD pentru a scrie un tutorial PLUS și / sau pentru noi? Căutăm tutoriale detaliate și bine scrise despre HTML, CSS, PHP și JavaScript. Dacă sunteți în măsură, contactați Jeffrey la [email protected].

Rețineți că o compensație reală va depinde de calitatea tutorialului final și a scenariului.

• Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.

Cod