Questa è la terza e ultima parte della serie Audero Feed Reader. In questo articolo, imparerai come creare il file di configurazione e completare il progetto che abbiamo iniziato in una lezione precedente.
1. Completare l'app
Un migliore layout responsive
Nella prima parte di questa serie ho scritto sull'importanza del data-iconpos attributo per i collegamenti nell'intestazione e nel piè di pagina. In questa sezione, scoprirai perché li usiamo. Lo sto usando, con un po 'di JavaScript, per creare un effetto di risposta migliore. Lo uso per nascondere il testo dei link in cui è applicato. Lo scopo di questo è di risparmiare spazio, che è importante, specialmente per gli schermi più piccoli. Ma cosa succede se lo schermo è abbastanza grande, diciamo più grande di 480 pixel, per visualizzare il testo? Per questo, ascolteremo il pagebeforecreate evento e associare un gestore, il updateIcons () metodo del Applicazione classe, per reagire una volta che è stato licenziato. Come indicano i nomi, l'evento viene attivato prima che la pagina e i suoi widget siano inizializzati. Il nostro gestore testerà prima se la pagina è più grande di 480 px e, in tal caso, rimuoverà il file data-iconpos attributo, quindi verrà mostrato il testo del collegamento.
Il codice che implementa questo metodo è il seguente:
updateIcons: function () var $ buttons = $ ('a [data-icon], button [data-icon]'); var isMobileWidth = ($ (finestra) .width () <= 480); isMobileWidth ? $buttons.attr('data-iconpos', 'notext') : $buttons.removeAttr('data-iconpos');
2. Crea configurazione
Il servizio Adobe PhoneGap Build consente di specificare i metadati del progetto con un file di configurazione chiamato config.xml. Segue le specifiche del widget W3C e deve rimanere all'interno della radice dell'app, allo stesso livello di index.html. La prima riga è la dichiarazione XML e la radice del documento è a tag che ha diversi attributi disponibili. I più importanti sono id, l'identificatore univoco dell'applicazione, e versione, che specifica la versione dell'applicazione. Dentro il tag, puoi scrivere i metadati.
Se hai seguito il tutorial fino ad ora, ti ricorderai che quando inizializzammo l'applicazione usando il PhoneGap CLI, ha creato un file di configurazione predefinito. La configurazione generata specifica troppe impostazioni per ciascuna piattaforma rispetto alle nostre esigenze. In effetti, utilizzeremo diverse impostazioni, ma poiché questo è un tutorial, ci concentreremo su alcune piattaforme. Tuttavia, sei assolutamente libero di espandersi per soddisfare le tue esigenze individuali.
Nel file di configurazione, abbiamo:
Nome (obbligatorio): questo è il nome dell'app. Non deve essere unico.
Descrizione (obbligatorio): testo che specifica a cosa serve la tua app. Questo è molto importante perché apparirà come la descrizione della tua app nei marketplace.
Autore (facoltativo): l'autore dell'app. Ha due proprietà opzionali: href, un URL per la homepage dello sviluppatore o dell'azienda, e-mail, l'indirizzo email dello sviluppatore o dell'azienda. Sfortunatamente, puoi specificare solo un autore, quindi non puoi avere dettagli per più autori qui.
Icona (facoltativo): questa sarà l'icona che verrà visualizzata sui dispositivi che installano la tua app. Se non è specificato, verrà utilizzato il logo Cordova.
spruzzo (opzionale): Imposta la schermata iniziale dell'applicazione, questa è l'immagine che viene mostrata durante il caricamento.
Preferenza (facoltativo): una serie di preferenze che desideri applicare alla tua app. È un tag chiuso e puoi avere zero o più tag all'interno del file. Ha due attributi ed entrambi sono richiesti: nome e valore. Ci sono diverse preferenze che puoi definire, ma la più importante da usare secondo me è la versione Cordova.
Accesso (facoltativo): fornisce all'app l'accesso alle risorse su altri domini, in particolare consente alla tua app di caricare pagine da domini esterni che possono occupare l'intera webview. Tieni presente ciò che ho spiegato in precedenza nella sezione intitolata "Il plug-in InBrowser": per aprire i collegamenti esterni in Cordova WebView, devi aggiungerli alla whitelist dell'app. Per brevità, consentiremo qualsiasi risorsa esterna utilizzando il * carattere speciale.
Gap: plug-in (facoltativo): specifica le funzionalità che si desidera utilizzare. Ad esempio, Android prima di installare qualsiasi app, mostra all'utente le autorizzazioni necessarie e, se l'utente è d'accordo, continua.
Se hai letto attentamente l'elenco precedente e hai utilizzato PhoneGap in passato, probabilmente hai notato l'introduzione, nella versione 3.0.0, di una nuova impostazione chiamata gap: plug-in. Quest'ultimo ha sostituito il caratteristica impostazione ma, a parte il nome, il concetto è esattamente lo stesso.
Ora che ho notato i punti chiave del formato, puoi capire la fonte del file di configurazione del nostro progetto. Tuttavia, se vuoi saperne di più su questo argomento, dai un'occhiata alla pagina della documentazione ufficiale. Il file completo è sotto.
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. Aurelio De Rosa
3. Abilitazione dell'applicazione per l'esecuzione
A questo punto abbiamo raggiunto la fine di questa serie. Il suo scopo è stato quello di dimostrare come possiamo avviare l'app in modo sicuro con tutti i file che abbiamo costruito finora. I nostri gestori e metodi possono essere eseguiti in modo sicuro una volta che Cordova è completamente caricato, assicurandosi di poter chiamare le API Cordova. Ma aspetta ... Quando Cordova è pronto? Sono contento che tu abbia chiesto! Il framework fornisce un evento chiamato deviceready che puoi ascoltare. Dato che, nel index.html file (il punto di ingresso dell'applicazione), ascolteremo l'evento e assegneremo come gestore il nostro InitApplication () metodo del Applicazione classe. Sarà eseguito una volta che l'evento è stato attivato.
Il codice che implementa questo è mostrato di seguito.
4. Costruzione e test dell'applicazione
La nostra app è ora completa. Tutto ciò che resta da fare è crearlo e testarlo su un emulatore o su un dispositivo reale. Per creare l'app hai due possibilità: il tuo computer o il servizio cloud Adobe, chiamato Adobe PhoneGap Build. Ricorda che se si desidera utilizzare il computer, è necessario installare l'SDK per ogni piattaforma che si desidera targetizzare. Il PhoneGap CLI ha un comando per costruire l'app (costruire), per testarlo (installare) e per eseguire entrambi i compiti (correre). Quindi, diciamo che vuoi costruire e testare Audero Feed Reader su Android, devi digitare il seguente comando:
PhoneGap esegue Android
Si noti che se si dispone di un dispositivo Android connesso e configurato correttamente sul computer, l'applicazione verrà eseguita su di essa per impostazione predefinita. Altrimenti verrà eseguito sull'emulatore SDK.
Nel caso in cui si desideri utilizzare Adobe PhoneGap Build per generare i file installabili, è possibile utilizzare anche la CLI, semplicemente utilizzando il a distanza comando come mostrato di seguito:
Android per costruire da remoto PhoneGap
Tenere presente che poiché l'ambiente di compilazione remoto non ha un emulatore, il installare e correre i comandi generano semplicemente un codice QR nel file Build PhoneGap interfaccia. Inoltre, per utilizzare il servizio è necessario disporre di un account Adobe. Questo significa che (purtroppo) tu non può usa le credenziali di GitHub.
Conclusione
Come hai visto in questa serie, creare un Feed Reader può essere molto semplice grazie a framework come jQuery Mobile e Cordova e ad alcune API come l'API di Google Feed. Spero che questo tutorial ti sia piaciuto e se desideri migliorare ulteriormente il progetto, considera l'aggiunta di alcune funzionalità che ritieni di aver perso e utilizzarle sui tuoi dispositivi mobili.
Share
Accentsconagua
