Sebbene non specificamente creati per funzionare insieme, jQuery Mobile e Cordova (anche noti come PhoneGap) sono una coppia molto potente per creare app mobili e ibride. Questa serie ti insegnerà come sviluppare un lettore di feed utilizzando tecnologie web e questi due framework. Nel corso di questa serie, acquisirai familiarità con i plug-in Cordova Connection e Storage Core e con l'API di Google Feed.

---

Panoramica dell'applicazione

L'app che costruiremo in questo tutorial, chiamato "Audero Feed Reader", è molto piccola e facile da capire. È un lettore di feed di base che ti aiuterà a mantenere tutte le notizie e gli articoli che ti interessano in un unico posto. Dopotutto, Google ha spento Google Reader, quindi dobbiamo sostituirlo, no??

Nella schermata Home dell'app, posizioneremo due pulsanti per evidenziare le due funzioni principali: un pulsante Aggiungi un nuovo feed e un elenco di feed salvati. Il layout della schermata Home è mostrato con il seguente screenshot:

Per mantenere il progetto il più semplice possibile, salveremo solo il nome del feed e il suo URL. Quindi, una volta che l'utente fa clic sul pulsante "Aggiungi feed", verrà visualizzato un modulo con solo due caselle di input, come mostrato dall'immagine seguente:

Ora che l'utente è in grado di salvare tutti i feed desiderati, è ora di consentirgli di visualizzare l'elenco di quei feed salvati. Inoltre, per aiutare l'utente a trovare facilmente un feed, l'elenco è ordinato alfabeticamente in base al nome e ha anche una casella di ricerca, nel caso in cui i feed siano troppo numerosi. Puoi vedere un esempio della pagina descritta guardando lo screenshot qui sotto:

Una volta che l'utente sceglie un feed, l'app recupera l'URL e mostra le voci disponibili. Per analizzare facilmente i diversi tipi di feed (Atom, RSS o Media RSS), utilizzeremo l'API di Google Feed e in particolare l'interfaccia JSON di Google Feed. Quest'ultimo analizzerà per noi l'URL richiesto e restituirà un oggetto JSON unificato e facile da analizzare. Scopriremo di più su questa API nella prossima parte di questa serie. Di default, per risparmiare sulla larghezza di banda, Audero Feed Reader richiederà solo 10 voci. Per consentire all'utente di recuperare più dati, aggiungeremo un pulsante "Mostra altro". Naturalmente, i dati verranno effettivamente recuperati solo se il feed fornito espone più di 10 voci. Ad esempio, Mobiletuts + fornisce solo 10 voci, quindi se l'utente fa clic sul pulsante "Mostra altro", verrà visualizzato il messaggio "Nessun'inserimento di voci da caricare".

Per risparmiare spazio, le voci sono organizzate con una fisarmonica e, per impostazione predefinita, solo il titolo è visibile. Tuttavia, l'utente può vedere più dettagli se necessario. L'app visualizza anche il riepilogo della voce, l'autore e un pulsante che legge "Vai all'articolo" per leggere l'intero articolo sul relativo sito web. Nota che per migliorare l'usabilità, mostreremo anche il titolo, ma questa volta può essere cliccato per accedere all'articolo completo.

L'aspetto finale di questa pagina è mostrato di seguito:

---

Componenti del progetto

A questo punto lo sappiamo che cosa da fare, quindi è tempo di vedere Come lo faremo. Le tecnologie coinvolte nello sviluppo di Audero Feed Reader siamo:

• HTML 5: Per creare e contrassegnare le pagine.
• CSS 3: Per modellare le pagine. Nota che non avremo un foglio di stile CSS personalizzato e utilizzeremo solo quello fornito e richiesto da jQuery Mobile.
• JavaScript: Questa è la lingua che useremo per programmare la logica dell'applicazione. È l'unica lingua supportata da PhoneGap.
• jQuery: jQuery verrà utilizzato per selezionare elementi, associare gestori di eventi ed eseguire richieste AJAX. È anche una dipendenza di jQuery Mobile.
• jQuery Mobile: Questo è il nostro quadro di scelta per creare l'interfaccia utente delle nostre pagine. Ci consente di ottimizzare facilmente un sito Web per dispositivi mobili e di creare rapidamente interfacce mobili. Al momento della scrittura, la versione più recente disponibile e utilizzata è la 1.3.1.
• PhoneGap: Avvolge tutti i nostri file in modo che possiamo compilarli come se stessimo costruendo un'app nativa. Morever, PhoneGap offre alcune API interessanti e utili per comunicare con l'hardware del dispositivo, come Storage e Connection. La versione utilizzata è 3.0, un miglioramento recente e significativo rispetto a 2.x.

Oltre a quanto sopra, useremo anche questi specifici plugin Cordova Core:

• InAppBrowser: Questo è un browser Web che viene visualizzato nell'app durante la chiamata window.open. Dalla versione 2.3.0 sono stati aggiunti due metodi importanti: executeScript () e insertCSS (). Il primo consente di inserire codice JavaScript, mentre il secondo aggiunge codice CSS nel InAppBrowser finestra. Non useremo questi metodi nella nostra app ma volevo menzionarli. Per saperne di più, visita il documento ufficiale di InAppBrowser.
• Plugin di archiviazione: Fornisce l'accesso alle opzioni di archiviazione del dispositivo. Si noti che, come afferma la documentazione, alcuni dispositivi forniscono già un'implementazione di queste specifiche, nel qual caso si applica il supporto integrato. L'implementazione di Cordova offre supporto compatibile per quelli che non lo fanno. Per saperne di più, dai un'occhiata al documento di archiviazione locale.
• Plugin di notifica: Consente di creare notifiche visive, udibili e tattili del dispositivo. Tra i vari metodi disponibili, useremo solo mettere in guardia() per mostrare alcuni messaggi all'utente. Ad esempio, questo plugin verrà utilizzato quando un utente aggiunge o elimina con successo un feed. Per ulteriori informazioni, consultare i documenti di notifica.
• Plugin di connessione: È costituito da una sola proprietà che fornisce informazioni sullo stato della connessione del dispositivo (ad esempio WI-FI, 3G, nessuno, ecc.). Si noti che dalla versione 2.3.0 è necessario accedere a Connessione oggetto usando il nuovo navigator.connection proprietà. Questa proprietà corrisponde alle specifiche W3C, anziché alla precedente navigator.network.connection proprietà. Maggiori informazioni su questo qui.

Se hai usato versioni precedenti di PhoneGap, riconoscerai che questi plugin non sono altro che ciò che hai usato come API. La modifica del nome è dovuta alla nuova architettura PhoneGap. Non preoccuparti però, a parte il nome, quasi tutto è uguale. Se vuoi conoscere tutti i miglioramenti più recenti e più grandi con 3.0, puoi leggere l'articolo introduttivo e la guida introduttiva.

---

1. Installa PhoneGap

A partire dalla versione 3.0.0, il team di sviluppo ha introdotto una nuova procedura per installare PhoneGap che richiede Node.js e npm. Inoltre, al momento non sono forniti link di download semplici come soluzione di riserva. Pertanto, il resto del tutorial presuppone che entrambi questi pacchetti software siano installati e funzionanti. Una volta fatto, il primo passo è digitare il seguente comando per installare PhoneGap:

npm install -g phonegap

Se stai usando Linux, ricorda di anteporre sudo alla riga precedente.

---

2. Inizializza il progetto

Prima di creare la cartella del progetto, vale la pena notare che il team di sviluppo ha anche introdotto una riga di comando in questa nuova versione per aiutare gli sviluppatori a eseguire attività comuni come la creazione e l'esecuzione dell'app o l'installazione di plug-in. La CLI consente inoltre di inizializzare un progetto. Non solo creerà una cartella con la libreria PhoneGap all'interno, ma genererà anche lo scheletro di un'applicazione. Per inizializzare il progetto, devi semplicemente digitare il seguente comando:

phonegap crea audero-feed-reader com.audero.free.utility.auderofeedreader "Audero Feed Reader"

Il primo argomento specifica il nome della directory da creare. Gli altri due argomenti sono facoltativi e specificano rispettivamente l'ID e il nome dell'app. Una volta eseguito il comando sopra, vedrai la seguente struttura all'interno della cartella principale del progetto:

• .Cordova: Utilizzato per la compatibilità con gli utensili Cordova.
• unioni: In questa cartella, puoi aggiungere qualsiasi personalizzazione specifica della piattaforma in modo da non dover modificare i file sorgente ogni volta che lavori con un progetto.
• piattaforme: Il luogo in cui verranno posizionati gli installer compilati, nel caso in cui si compili il progetto localmente.
• plugins: La cartella in cui troverai i plugin del tuo progetto.
• www: La cartella contenente i file di origine e la configurazione dell'applicazione. Contiene la cartella "css", "js" e "img" in cui è possibile inserire i rispettivi file. Inoltre, ha anche una cartella "res" in cui si posizionano icone e splashscreens.

---

3. Installa i plugin PhoneGap

Come abbiamo visto nell'introduzione, il nostro progetto trarrà vantaggio da alcuni dei plug-in core di PhoneGap. Per installarli, devi usare la CLI digitando il comando qui sotto:

 Il plug-in locale di phonegap aggiunge PLUGIN_REPOSITORY_URL

In quanto sopra, PLUGIN_REPOSITORY_URL è l'URL del repository del plugin che si desidera utilizzare. Dal momento che il nostro progetto utilizzerà sia i plug-in principali di Notification che quelli di Connection, devi digitare il seguente comando:

 plugin locale per phonegap aggiungi https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git plugin locale per phonegap aggiungi https://git-wip-us.apache.org/repos/asf /cordova-plugin-network-information.git

Come il più attendente di voi potrebbe aver notato, non ho aggiunto il plugin di archiviazione. Il motivo è che a partire dalla versione 3.0, l'accesso è incorporato in Cordova.

---

4. Aggiungi PhoneGap Frameworks

Ora che abbiamo PhoneGap ei suoi plug-in, dobbiamo aggiungere le altre due librerie necessarie: jQuery (userò la versione 2.0.3) e jQuery Mobile (versione 1.3.1).

Prima di procedere, è importante capire perché ho scelto il ramo 2.x di jQuery. jQuery ha due rami principali attualmente in sviluppo: 1.xe 2.x. La versione che dovresti usare dipende da dove stai usando il framework e dai browser che intendi supportare. Mentre jQuery 1.x supporta tutte le versioni di Google Chrome, Firefox, Safari, Opera e Internet Explorer a partire dalla versione 6, la versione 2.x ha abbandonato il supporto per Internet Explorer 6, 7 e 8 in cambio di una dimensione più piccola e prestazioni migliori. Poiché stiamo sviluppando un'applicazione mobile con Cordova, non dobbiamo preoccuparci di Internet Explorer 6-8. Infatti, i sistemi operativi Microsoft supportati da Cordova sono Windows Phone 7 e Windows Phone 8 che funzionano rispettivamente su Internet Explorer 9 e 10. Pertanto, possiamo tranquillamente usare jQuery 2.x!

Con il punto di comprensione di cui sopra, possiamo continuare con i nostri passaggi di base per la configurazione Audero Feed Reader. Una volta scaricate le librerie, spostare il file jQuery e il file JavaScript (versione ridotta) di jQuery Mobile all'interno di "js" cartella. Quindi, dobbiamo inserire il foglio di stile di jQuery Mobile (jquery.mobile-1.3.1.min.css) dentro il "Css" cartella. Infine, inseriamo le immagini in bundle di jQuery Mobile nel "Img" cartella. Dal momento che abbiamo leggermente modificato la struttura nativa di jQuery Mobile, abbiamo bisogno di regolare i percorsi che puntano alle immagini all'interno del suo file CSS. Abbiamo specificamente bisogno di sostituire la parte "images /" con questa stringa "... / img /". Tieni presente che la stringa deve essere sostituita 5 volte.

---

5. Creare la struttura del file di progetto

Ora che abbiamo il framework del progetto, dobbiamo creare la cartella "www", i file HTML richiesti, impostare l'icona dell'applicazione predefinita, modificare il file di configurazione build di Adobe PhoneGap e cambiare la schermata iniziale predefinita. È molto, quindi continuiamo a muoverci!

Nel corso di questa serie, creeremo i seguenti file:

• index.html: Il punto di ingresso dell'applicazione, dove metteremo i link alle librerie utilizzate.
• add-feed.html: Questa è la pagina contenente il modulo utilizzato per salvare un nuovo feed.
• list-feeds.html: Visualizza l'elenco dei feed memorizzati.
• show-feed.html: Mostra le voci del feed specificato. Inoltre, dispone di una barra di navigazione con un pulsante per eliminare il feed e un'altra per recuperare altre voci dal feed.
• aurelio.html: La pagina dei crediti contenente informazioni sull'autore.
• feed.js: Questo file contiene una classe, chiamata Alimentazione, utilizzato per creare, eliminare e recuperare i feed memorizzati. È basato sul plug-in Cordova Storage.
• application.js: Questo file contiene un'altra classe, chiamata Applicazione, che ha i metodi per inizializzare le pagine dell'applicazione e collegare i gestori ad alcuni elementi della pagina (ad esempio i pulsanti della barra di navigazione precedentemente citati).
• config.xml: Questo file XML contiene i metadati del nostro progetto e memorizza le impostazioni come il nome e la descrizione dell'app.

---

6. Creare la Home Page

Come spiegato nella sezione precedente, poiché jQuery Mobile carica le pagine usando Ajax, dobbiamo caricare i file CSS e JavaScript nel punto di ingresso della nostra applicazione, ovvero index.html file. Questa pagina mostra il titolo e la descrizione dell'applicazione e ha tutti i pulsanti per accedere al resto dell'app.

Di seguito è riportata la fonte completa della home page:

                
 
 
Audero Feed Reader
  
 
 Audero Feed Reader è un aggregatore di feed molto semplice per tenere in un unico posto tutte le notizie e gli articoli che ti interessano. 
 Aggiungi feed elenco feed 
  
  

Come puoi leggere dal codice sopra, i pulsanti all'interno di e il