Share
In questa serie, svilupperemo un client Twitter utilizzando i framework jQuery Mobile e PhoneGap. Questo progetto verrà implementato in ambienti Android e iOS come applicazione nativa. L'interfaccia utente dell'applicazione, chiamata semplicemente "Tweets", verrà creata utilizzando jQuery Mobile e PhoneGap verrà utilizzato per creare l'applicazione nativa. Useremo anche l'API di PhoneGap Storage per accedere alle funzionalità del database nativo. Tutte le codifiche verranno eseguite con HTML e JavaScript utilizzando jQuery, jQuery Mobile e le librerie PhoneGap.
Le caratteristiche principali dell'applicazione Tweets discussa in questa serie sono le seguenti:
Accentsconagua
user_timeline e ricerca. Il codice dell'applicazione si basa sulla funzione jQuery ajax () per accedere a tali metodi API.Questo tutorial è stato organizzato in 4 parti. Nella prossima sezione della Parte I, denominata "jQuery Mobile e PhoneGap", presentiamo brevemente jQuery Mobile e PhoneGap e discutiamo lo sviluppo di applicazioni native multipiattaforma utilizzando tali framework. Nella seguente sezione, "Screen Flow", presentiamo l'applicazione Tweets e ne descriviamo il flusso. La sezione "jQuery Mobile Page Structure" è un'introduzione a diversi concetti di alto livello nel framework jQuery Mobile, in particolare, le pagine del contenitore e del contenuto.
Nella parte II, inizieremo la revisione dell'applicazione Tweets. In "Review Of index.html", il nostro obiettivo principale è la struttura statica del codice HTML e jQuery Mobile che costituisce le schermate dell'applicazione. La sezione denominata "API Twitter" offre una panoramica dei metodi dell'API di Twitter user_timeline e ricerca. La prossima sezione, "Code Review", fornisce una revisione del codice JavaScript che implementa la funzionalità dell'applicazione. La Parte II discuterà "Caricamento iniziale della pagina", "Funzioni di utilità" e "Funzioni di accesso al database" e avvierà la discussione su "Funzioni di core business core".
Nella parte III, continueremo a ispezionare le "Core Business Logic Functions", riprendendo da dove abbiamo lasciato nella parte II e terminando la revisione del codice dell'applicazione Tweets guardando "Event Handlers" e "Page Display Functions".
La parte finale del nostro tutorial, Parte IV, inizia con la sezione "File nell'archivio download", dove descriviamo il contenuto del file di archivio che accompagna questa serie. In "Argomenti specifici per l'ambiente", spieghiamo come importare l'applicazione in Eclipse per la piattaforma Android e Xcode per la piattaforma iOS. In quella sezione, forniamo anche le immagini dello schermo dell'applicazione in un telefono Android, un iPod touch e un iPad 2. Infine, facciamo delle osservazioni conclusive in "Conclusioni".
Tutte le icone e le immagini splash nell'archivio download sono state create sulla base di un set di icone fornito da Smashing Magazine. Come affermato sul sito Web collegato, "Puoi utilizzare il set per tutti i tuoi progetti gratuitamente e senza restrizioni, ma è vietato venderli."
Il jQuery Mobile Project è un sistema di interfaccia utente per dispositivi mobili che funziona in modo uniforme su diverse piattaforme, come Android e iOS. Mentre jQuery Mobile si concentra principalmente sull'uniformità dell'interfaccia utente in un paradigma dell'applicazione Web, il framework PhoneGap consente lo sviluppo di applicazioni native basate su HTML5 e JavaScript che possono essere implementate su più piattaforme mobili, tra cui Android e iOS. Tali framework possono essere utilizzati insieme per sviluppare applicazioni native in cui l'interfaccia utente viene creata tramite jQuery Mobile e le funzioni dei dispositivi nativi vengono create utilizzando PhoneGap.
Il diagramma seguente offre una vista semplificata di un'applicazione nativa distribuita su Android e iOS, sviluppata utilizzando HTML5, CSS e JavaScript.
Si noti che sia jQuery Mobile che PhoneGap supportano piattaforme mobili aggiuntive come BlackBerry OS, Symbian e altri. Tuttavia, in questa serie ci concentreremo solo su Android e iOS.
Di seguito sono elencati i vantaggi dello sviluppo di applicazioni native con jQuery Mobile e PhoneGap.
D'altra parte, ci sono degli svantaggi nello sviluppo di un'applicazione nativa usando jQuery Mobile e PhoneGap. Alcuni di quelli sono menzionati di seguito.
Inoltre, come in qualsiasi progetto di sviluppo, devi ancora utilizzare strumenti di sviluppo e test specifici della piattaforma per testare e distribuire l'applicazione su dispositivi Android e iOS.
Per l'applicazione di esempio discussa in questa serie, abbiamo utilizzato jQuery Mobile versione 1.0 RC1 e PhoneGap versione 1.1.0. Quelle erano le ultime versioni al momento di creare questa serie.
Esistono due modelli distinti di flusso dello schermo, uno per i dispositivi a schermo panoramico in cui la larghezza dello schermo è superiore a 500 pixel e uno per i dispositivi a schermo stretto in cui la larghezza dello schermo è inferiore a 500 pixel. Con questa definizione, un dispositivo iPad sarà considerato wide-screen mentre un iPod touch o un telefono Motorola Droid sarà considerato a schermo stretto. La soglia, 500, è una costante definita nel codice dell'applicazione.
Vediamo innanzitutto il flusso dello schermo per i dispositivi widescreen. La schermata iniziale ha due pulsanti con le etichette "Aggiungi nome schermata" e "Aggiungi termine di ricerca". C'è un campo di testo sotto i pulsanti. Nella parte in basso a sinistra dello schermo c'è una lista composta dal nome della schermata e dai termini di ricerca inseriti dall'utente. I nomi delle schermate sono grigi e i termini di ricerca hanno uno sfondo giallo.
Per inserire un nome per lo schermo di Twitter, l'utente digita il nome nel campo di testo sotto i pulsanti e preme il pulsante "Aggiungi nome schermata". Allo stesso modo, per inserire un termine di ricerca di Twitter, l'utente digita il termine nel campo di testo sotto i pulsanti e pigia sul pulsante "Aggiungi termine di ricerca".
Se l'utente fa clic sul pulsante Elimina nella parte all'estrema destra di un elemento dell'elenco (rappresentato come 'x' all'interno di un cerchio), quell'elemento viene rimosso dall'elenco.
Se l'utente fa clic su una voce di elenco per il nome di uno schermo Twitter, viene visualizzata una ruota che gira indicando che la timeline dell'utente (tweet) per quel nome di schermo viene recuperata da Twitter.
Dopo aver ricevuto la sequenza temporale associata al nome della schermata, l'applicazione le visualizza sul lato destro della pagina accanto all'elenco. Quelli sono gli ultimi 11 elementi della timeline associati al nome dello schermo. La soglia, 11, è una costante definita nel codice dell'applicazione.
Nota che, secondo l'API di Twitter, è possibile recuperare la timeline di un utente senza autenticazione solo se la sua timeline non è protetta / privata. La nostra applicazione non prevede l'autenticazione, quindi il motivo sono solo le scadenze pubbliche a nostra disposizione.
Allo stesso modo, se l'utente fa clic su un elenco di elementi per un termine di ricerca di Twitter, viene visualizzata una ruota che gira come un indicatore che i risultati della ricerca vengono recuperati da Twitter, in modo simile al display nella Figura 4. Dopo aver ricevuto i risultati della ricerca, l'applicazione li visualizza sul lato destro della pagina accanto all'elenco, simile alla Figura 5. Questi sono gli ultimi 11 risultati associati al termine di ricerca. La soglia, 11, è una costante definita nel codice dell'applicazione.
La cronologia oi risultati di ricerca potrebbero includere collegamenti URL. Se l'utente preme uno di questi collegamenti, verrà avviato un browser Web per visualizzare la pagina Web associata al collegamento. Quando ciò accade, l'applicazione Tweets non è più attiva.
Lo schema seguente riepiloga il flusso dello schermo discusso sopra.
Per i dispositivi a schermo stretto, il flusso dello schermo è simile, tuttavia, a causa della mancanza di spazio, gli input (voci di elenco), la pagina di avanzamento e i risultati vengono visualizzati in schermate diverse.
La schermata iniziale, la pagina 'Input', ha i pulsanti, il campo di testo e l'elenco dei nomi delle schermate e dei termini di ricerca impilati.
Se l'utente fa clic su una voce dell'elenco, la pagina "Avanzamento" viene visualizzata come una schermata separata.
Quando i risultati vengono ricevuti, la pagina di avanzamento viene sostituita dal 'Risultati'.
Se l'utente preme uno dei collegamenti URL nella pagina Risultati, un'applicazione browser inizierà a visualizzare la pagina Web nel collegamento. Quando ciò accade, l'applicazione Tweets non è più attiva. Nei dispositivi Android, l'utente può tornare all'applicazione Tweets premendo il pulsante Indietro del dispositivo. Per i dispositivi iOS, l'utente deve chiudere il browser e avviare l'applicazione Tweets dalla schermata iniziale premendo l'icona dell'applicazione.
Lo schema seguente riepiloga il flusso dello schermo per i dispositivi a schermo stretto.
Ora discuteremo come gli schermi nella nostra applicazione saranno rappresentati usando gli elementi della pagina jQuery Mobile (qui, prendiamo in prestito del materiale dal mio precedente tutorial Build a Contacts Application. Inoltre, per una discussione dettagliata su come le pagine sono costruite con jQuery Mobile framework, vedere la sezione Anatomia di una pagina nella documentazione di riferimento di jQuery Mobile).
Un singolo file HTML nel framework jQuery Mobile è costituito da una pagina del contenitore con una o più pagine di contenuto all'interno del contenitore. La pagina del contenitore ha un data-role = "pagina" attributo, mentre le pagine di contenuto hanno a data-role = "content" attributo. Una pagina di contenuto può facoltativamente avere sia un'intestazione sia un piè di pagina. Nell'esempio seguente, ci sono due pagine di contenuto con un'intestazione e un piè di pagina e una pagina di contenuto senza un'intestazione o un piè di pagina.
.....................
All'interno di una pagina del contenitore, è prevista la visualizzazione di una sola pagina di contenuto alla volta. L'idea è di raggruppare gli schermi logicamente correlati all'interno di una singola pagina del contenitore e definire ciascuno di essi come una pagina di contenuto. Ad esempio, tali pagine di contenuto potrebbero condividere codice JavaScript comune.
Nell'applicazione Tweets, c'è una pagina del contenitore che è memorizzata nella pagina fisica index.html. Quella pagina del contenitore memorizza tutte le pagine di contenuto necessarie all'applicazione. Per i dispositivi a schermo stretto, le schermate Inputs (Figura 7), Progress (Figura 8) e Risultati (Figura 9) sono rappresentate come pagine di contenuto separate. Per i dispositivi a schermo panoramico, esiste una sola pagina di contenuto, denominata "Wide", che fornisce tutte le funzionalità richieste. La seguente figura riassume questa discussione.
Nella parte iniziale di questo tutorial, abbiamo brevemente presentato jQuery Mobile e PhoneGap e abbiamo discusso lo sviluppo di applicazioni native multipiattaforma utilizzando tali framework. Quindi, abbiamo presentato l'applicazione Tweets e descritto il suo flusso di schermo. Successivamente, abbiamo presentato un'introduzione a diversi concetti di alto livello nel framework jQuery Mobile. In particolare, sono state discusse le pagine del contenitore e del contenuto.
Nella parte II, inizieremo la revisione dell'applicazione Tweets. In "Review Of index.html", il nostro focus principale sarà sulla struttura statica dell'HTML e sul codice jQuery Mobile che costituisce le schermate dell'applicazione. La sezione denominata "API Twitter" offrirà una panoramica dei metodi dell'API di Twitter user_timeline e ricerca. La prossima sezione, 'Code Review', fornirà una revisione del codice JavaScript che implementa la funzionalità dell'applicazione. La Parte II discuterà il "Caricamento iniziale della pagina", "Funzioni di utilità", "Funzioni di accesso al database" e quindi inizierà la discussione su "Funzioni di core business core".
