Share
Vuoi imparare come usare PhoneGap, ma non sai da dove iniziare? Unisciti a noi mentre mettiamo insieme "Sculder", non solo un tributo ad una serie televisiva di fantascienza eccellente, ma un'applicazione mobile nativa a tutti gli effetti per il credente in te!
Nell'ultima parte di questa serie, abbiamo attivato la nostra app Web con alcune strutture e transizioni di base tra le pagine. In questa parte, continueremo a lavorare sulla compilazione delle parti dell'app che possono funzionare senza PhoneGap e configurare il nostro progetto PhoneGap, pronto per l'integrazione.
Prima di iniziare, volevo rispondere a una domanda che mi viene sempre fatta. Questa è una domanda che ho chiesto una volta, e senza dubbio anche tu potresti averlo chiesto. Vale a dire: come eseguire il debug di un'app Web su un dispositivo mobile?
Esistono diversi modi per eseguire il debug in un dispositivo. Potresti andare a scuola vecchia e usarla alert (qualcosa);, ma avere avvisi in tutto il posto è inefficiente e potrebbe finire nel codice di produzione (così fastidioso!). È possibile utilizzare la console di debug in Safari su un dispositivo iOS, disponibile in Impostazioni -> Safari -> Sviluppatore, ma non tutti i dispositivi utilizzano Safari o dispongono di una console di debug. Inoltre, questa console emette informazioni minime.
Se ho solo bisogno di utilizzare una console JavaScript per catturare un console.log (), o magari eseguire alcuni JS sul dispositivo per controllare qualcosa, mi piace usare jsconsole.com. È uno dei metodi più semplici per usare una console sul tuo dispositivo e c'è persino un'app per iOS disponibile. Per iniziare una sessione su jsconsole.com, basta digitare :ascolta e otterrai un output di tag script da includere nella tua pagina. Avvia l'app e vedrai che la connessione avviene nella console. Ora puoi eseguire JS nella console e vederlo riflesso sul dispositivo o accedere alla console nel tuo codice e vederlo qui. Guarda il video qui sotto per una dimostrazione di questo:
Per ulteriori informazioni su jsconsole, vedere qui.
Un'altra alternativa è WeInRe (Web Inspector Remote). Inizialmente avviato come progetto indipendente, WeInRe fa ora parte della famiglia PhoneGap e può essere trovato su debug.phonegap.com. Il set-up è molto simile a jsconsole, ma quello che ottieni è un ispettore WebKit, molto simile a Chrome o Safari. Guarda il video qui sotto per un esempio:
Un'altra alternativa è Socketbug, che è grandiosa, ma richiede l'installazione e la configurazione di Node e socket.io, che sfortunatamente è al di fuori dell'ambito di questo tutorial. Se, tuttavia, ti senti avventuroso e vuoi provare Socketbug, ne vale la pena.
Quelli sono gli strumenti di debug che utilizzo. Ora possiamo iniziare ad aggiungere alcune funzionalità!
Una delle funzionalità che siamo in grado di implementare senza un'API PhoneGap è il feed Twitter. Questa funzione elenca semplicemente un feed di tweet che corrispondono a un particolare termine di ricerca. Fortunatamente, Twitter può restituire i dati in formato JSON quando eseguiamo una query su search.twitter.com. Se si utilizza il seguente URL http://search.twitter.com/search.json?q=ufo+spotted&rpp=4, otterrai una risposta JSON piena di dati sufficienti per riempire un elenco.
Al fine di ottenere i nostri dati sulla pagina e visualizzarli in un modo carino, useremo il template. Ci sono un sacco di modelli di motori là fuori e tutti valgono la pena di guardare, i baffi sono molto popolari e molto potenti. jQuery ne ha anche uno che ritengo sia perfetto per ciò che vogliamo raggiungere.
Nella pagina dei tweet, avrò un vuoto ul e a div contenitore che è nascosto nella pagina. All'interno del contenitore sarà il codice che voglio usare come modello. In questo caso, è un semplice Li elemento con un markup di base che terrà le informazioni twitter che vogliamo visualizzare. Sarà in a copione blocco che ha un ID univoco e un tipo di type = "text / x-jquery-tmpl", questo è così il browser non lo esegue come JavaScript. Il motore dei modelli di Twitter utilizza $ come segnaposto per i dati che otterremo dai nostri JSON dati. La pagina dei tweet ora assomiglia a qualcosa del genere:
Ora dobbiamo scrivere la nostra funzione che verrà chiamata ogni volta che caricheremo questa pagina. Questa funzione uscirà su Twitter e riceverà il nostro feed:
Accentsconagua
function getTweets () var q = "ufo + spotted" rpp = 5, twurl = "http://search.twitter.com/search.json?q="; $ .getJSON (twurl + q + "& rpp =" + rpp + "& callback =?", funzione (dati) $ ("# tmpl-tweets"). tmpl (data.results) .appendTo ("# tweets") ;); Per prima cosa caricherò questa pagina, quindi ho impostato la classe della pagina su corrente. Ora, abbiamo solo bisogno di aggiungere un po 'di stile ai tweet, quindi sono mostrati un po' più belli.
/ ** Tweets Styling ** / #tweets list-style: none; padding: 10px; #tweets li font-size: 12px; overflow: nascosto; margin-bottom: 20px; #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%;
La prossima volta che avvieremo l'app dovremmo ottenere quanto segue.
L'altra caratteristica che possiamo implementare prima di fare l'integrazione di PhoneGap è la funzionalità della mappa. Utilizzeremo l'API di Google Maps per generare una mappa semplice e quindi utilizzare alcuni dati della mappa per rilasciare indicatori. Ogni indicatore indicherà avvistamenti UFO.
Per questo useremo l'API JavaScript, attualmente alla versione 3. Un'introduzione completa all'API delle mappe non rientra nell'ambito di questo tutorial, ma puoi trovare qui tutta la documentazione, oltre a esempi di implementazione. Se segui il tutorial trovato qui, vedrai come implementare una mappa di base. Possiamo utilizzare lo stesso codice per implementare una mappa di base e terminare con quanto segue:
Ora possiamo andare alla documentazione che copre i marcatori, qui trovata. Ora possiamo caricare alcuni indicatori di base sulla nostra mappa al caricamento. I marker rappresenterebbero le posizioni degli avvistamenti con i dati delle fotografie che sono state scattate e caricate dagli utenti dell'applicazione. Avremmo un servizio in esecuzione su un server che può restituire i dati tramite Ajax, probabilmente nel formato JSON. Ancora una volta, la creazione di questo servizio è di per sé un intero tutorial, ma per ogni voce creeremo un marker per la mappa usando il codice fornito nella demo.
var marker = new Google.maps.Marker (position: newLatlng, map: map, title: "New Sighting");
Dopo il caricamento della mappa, verranno aggiunti i marcatori. Se leggi la documentazione dell'API di Google, troverai altre opzioni per i marcatori, ad esempio la visualizzazione di immagini e note. Vale la pena esplorare le altre opzioni e proporre diverse implementazioni.
Questo è quanto possiamo fare prima di arrivare a PhoneGap. La nostra ultima funzione richiede l'uso della fotocamera, quindi andiamo avanti e iniziamo a configurare il nostro progetto PhoneGap. Dai un'occhiata all'introduzione a PhoneGap qui se non l'hai già fatto.
Le icone sono una parte molto importante dell'applicazione. È l'immagine che rappresenta la tua applicazione in tutto il mondo, e ci sono alcune linee guida che vorrai seguire per assicurarti che siano visibili ovunque. C'è un ottimo post sul blog in merito alle dimensioni delle icone e le linee guida da seguire quando si crea un'icona. Di solito prendo un'icona 512x512 e la ridimensiono da lì a tutte le dimensioni necessarie.
Dovrai anche creare una schermata di avvio immagine / splash per la tua app.
Una volta che avremo l'applicazione PhoneGap predefinita in esecuzione sul nostro simulatore e / o dispositivo di test. Possiamo passare attraverso la pagina di riepilogo principale sul modello Xcode per PhoneGap. La prima cosa che voglio accertarmi è che il menu dei dispositivi sia impostato su iPhone. Potremmo anche implementarlo su iPad, se lo volessimo, ma potrebbero esserci alcune modifiche CSS che vorremmo fare prima. Per ora mi sto attenendo solo all'iPhone. Controlla tutti gli orientamenti del dispositivo come jQuery Mobile ordina il nostro layout in base all'orientamento. È possibile trascinare e rilasciare i file di immagine negli slot assegnati nella pagina di riepilogo.
Ora, quando avvii la tua applicazione, sarai accolto con la nuova icona dell'app e la pagina di avvio. Ora copia i file dai quali hai lavorato www cartella. Avvia l'app e controlla che tutto funzioni correttamente.
Dopo aver impostato il tuo progetto in Eclipse (nello stesso modo in cui abbiamo realizzato il nostro progetto di test nella prima parte qui) devi avere tre dimensioni di icone preparate per la tua applicazione. Alta densità (72x72), densità media (48x48) e bassa densità (36x36). Queste icone sostituiscono le icone predefinite che si possono trovare in res cartella. Gli acronimi appropriati sono hdpi, mdpi e ldpi che stanno rispettivamente in alto, medio e basso. Le immagini che si desidera utilizzare come schermata iniziale dovrebbero essere incluse anche in queste cartelle.
Per far funzionare lo splash screen per Android, dobbiamo aggiungere e modificare i nostri DroidGap classe per includere l'immagine splash sul caricamento. Inserisci:
super.setIntergerProperty ("splashscreen", R.drawable.splash) Quindi, il loadURL ha bisogno di un timeout aggiunto ad esso.
super.loadUrl ("file: ///android_asset/www/index.html", 5000); Il tuo file dovrebbe apparire come il seguente:
Esegui l'applicazione e assicurati che tutto funzioni correttamente.
Ora siamo al punto in cui siamo pronti ad implementare le nostre ultime due funzionalità: la fotocamera del dispositivo e le opzioni di archiviazione locale. Farlo sarà trattato nelle future esercitazioni di questa serie. Questa serie passerà anche attraverso l'invio della nostra app ai vari negozi di app, quindi assicurati di seguire!
