Share
I siti web per dispositivi mobili hanno fatto molta strada, ma se vuoi sfruttare appieno l'hardware di uno smartphone o essere inserito nell'elenco di iTunes App Store, devi compilare il tuo codice. In questo tutorial, ti mostreremo come creare un'app Web mobile con un aspetto grafico di iPhone utilizzando jQTouch, quindi trasformala in un'app nativa per iPhone utilizzando Phonegap. Nessun obiettivo-C necessario.
Per completare questo tutorial, avrai bisogno di quanto segue:
PhoneGap è un framework open source che può trasformare qualsiasi app Web in un'app nativa per iPhone, BlackBerry e Android. Si stacca
questo trucco eseguendo il tuo codice web in a UIWebView, un'istanza incorporata di Safari senza il
barre degli strumenti e pulsanti dell'applicazione Safari standalone. PhoneGap estende quindi questa funzionalità di base mappando le funzionalità di
iPhone SDK agli oggetti JavaScript puoi chiamare il tuo codice web, così puoi facilmente aggiungere funzionalità come GPS, fotocamera, contatti, vibrazione,
SQLLite e supporto per accelerometro. E quando sei pronto per distribuire la tua app, PhoneGap 0.80 è approvato da Apple!
Incluso nella distribuzione PhoneGap è tutto ciò che è necessario per creare ed eseguire un'app per iPhone. Il progetto XCode incluso è in bundle
con un codice di esempio che mostra come utilizzare molte delle funzionalità native e tutti i file di supporto necessari per compilare l'app e
eseguilo su iPhone Simulator o sul tuo telefono.
Per verificare se hai il tuo Mac pronto per eseguire il tuo codice, proviamo il progetto di esempio incluso in PhoneGap.
Innanzitutto, apri la cartella dell'iPhone e fai doppio clic su PhoneGap.xcodeproj:
Questo dovrebbe aprire XCode con il tuo progetto caricato. Sebbene ci sia molto da fare qui, noi come gli sviluppatori web ne abbiamo bisogno
occuparci del www cartella. Questo contiene il codice web che diventerà l'interfaccia e la logica di
la nostra app.
Ora che abbiamo caricato il nostro progetto, è il momento di fare un giro. In bundle con l'iPhone SDK è un simulatore iPhone che
aggancia direttamente a XCode. Tutto ciò che dobbiamo fare è fare clic su "Crea ed esegui".
Per questo tutorial, ho creato un'app semplice e intuitiva che visualizza il mio feed di Tumblr con un slide-up "Informazioni"
schermo. Questa app si basa sull'eccellente framework jQTouch, una libreria di UI basata su jQuery
elementi, animazioni ed estensioni che ti consentono di sviluppare rapidamente app Web mobili con aspetto e aspetto nativi. Diamo una rapida occhiata
a mettere insieme un'app Web utilizzando jQTouch prima di importare questa app nel nostro progetto Phonegap.
Per prima cosa, carichiamo jQuery, jQTouch e alcuni file di temi raggruppati in
etichetta; questi disegneranno i nostri elementi per assomigliareQuindi costruiamo lo scheletro della nostra app:
jQTouch prende qualsiasi discendente diretto del
taggalo e lo converte in una "vista" a schermo intero. Questo significa ogni
Accentsconagua
id: Di
JQTouch include una varietà di modi interessanti per la transizione tra questi schermi e questi e possono essere abilitati semplicemente aggiungendo classi CSS.
Ad esempio, per trasformare quel link nella pagina About in una transizione slide-up, aggiungiamo quanto segue:
Di
Quindi, nella stessa pagina About, aggiungiamo un pulsante per "chiudere" il pannello facendolo scorrere indietro:
Vicino
Nella schermata predefinita, aggiungeremo una barra degli strumenti con il suddetto pulsante "Informazioni" e uno spazio per incorporare un feed di Tumblr:
Casa
DiTrasmissione in diretta
Infine, alcune classi CSS che definiranno l'output del feed di Tumblr in modo che corrisponda al tema "Apple":
ol color: black; sfondo: #fff; border: 1px solid # B4B4B4; font: bold 17px Helvetica; padding: 0; margine: 15px 10px 17px 10px; -webkit-border-radius: 8px; ol> li color: # 666; border-top: 1px solid # B4B4B4; list-style-type: none; imbottitura: 10px 25px 10px 25px;
Questo è tutto! Dopo aver aggiunto del contenuto alla nostra pagina Informazioni, sostituiamo i file nel nostro progetto Phonegap www cartella
con la nostra nuova app Web ed eseguitela di nuovo:
La nostra app Web è ora compilata e da qui può essere impacchettata per la distribuzione su iTunes Store. È un inizio semplice, ma
in pochissimo tempo abbiamo un'app nativa che assomiglia a quella di Apple, funziona su qualsiasi iPhone e può essere estesa a una varietà di usi.
Tratterò su come estendere la tua app con il supporto per le fotocamere e la geo-localizzazione in future esercitazioni. Nel frattempo, puoi
leggi di più su PhoneGap su Phonegap Wiki. La documentazione non è completamente sviluppata,
quindi potresti ritrovarti a scavare attraverso repository git dopo la fine di una lunga caccia.
Per inviare la tua app all'App Store di iTunes, registrati al Programma per gli sviluppatori di iPhone.
Una volta registrato, ti verranno forniti gli strumenti per firmare e inviare digitalmente la tua app su iTunes Store.
Sapevi che puoi guadagnare fino a $ 600 per scrivere un tutorial PLUS e / o screencast per noi? Stiamo cercando tutorial dettagliati e ben scritti su HTML, CSS, PHP e JavaScript. Se sei dell'abilità, contatta Jeffrey a [email protected].
Si prega di notare che il risarcimento effettivo dipenderà dalla qualità del tutorial finale e screencast.
