PhoneGap Creați un cititor de feed - Configurație

Aceasta este a treia și ultima parte a seriei despre Audero Feed Reader. În acest articol, veți învăța cum să creați fișierul de configurare și să finalizați proiectul pe care l-am început într-o lecție anterioară.


1. Finalizarea aplicației

Un aspect mai bun

În prima parte a acestei serii am scris despre importanța data-iconpos atribut pentru legăturile din antet și subsol. În această secțiune, veți afla despre motivul pentru care le folosim. Îl folosesc, cu un pic de JavaScript, pentru a crea un efect mai receptiv. Îl folosesc pentru a ascunde textul legăturilor în care este aplicat. Scopul acestui lucru este de a economisi spațiu, care este important, în special pentru ecranele mai mici. Dar dacă ecranul este suficient de mare, să zicem mai mult de 480 de pixeli, pentru a afișa textul? Pentru aceasta, vom asculta pentru pagebeforecreate eveniment, și atașați un manipulator, updateIcons () metodă a cerere să reacționeze odată ce este concediat. După cum indică numele, evenimentul este declanșat înainte ca pagina și widget-urile ei să fie inițializate. Handlerul nostru va încerca mai întâi dacă pagina este mai mare de 480 de pixeli și, dacă da, va elimina data-iconpos atribut, astfel încât textul link-ului va fi afișat.

Codul care implementează această metodă este următorul:

 updateIcons: funcția () var $ buttons = $ ('a [date-icon], butonul [data-icon]'); var esteMobileWidth = ($ (fereastră) .width () <= 480); isMobileWidth ? $buttons.attr('data-iconpos', 'notext') : $buttons.removeAttr('data-iconpos'); 

2. Construiți configurația

Serviciul Adobe PhoneGap Build vă permite să specificați metadatele proiectului dvs. cu un fișier de configurare numit config.xml. Urmează specificația widget-ului W3C și trebuie să rămână în interiorul rădăcină a aplicației, la același nivel de index.html. Prima linie este declarația XML, iar rădăcina documentului este a tag care are mai multe atribute disponibile. Cele mai importante sunt id, identificatorul unic al aplicației și versiune, care specifică versiunea aplicației. În interiorul tag, puteți scrie metadatele.

Dacă ați urmat tutorialul până acum, veți reține că atunci când am inițializat aplicația folosind PhoneGap CLI, a creat un fișier de configurare implicit. Configurația generată specifică prea multe setări pentru fiecare platformă în comparație cu nevoile noastre. De fapt, vom folosi mai multe setări, dar din moment ce acesta este un tutorial, ne vom concentra pe câteva platforme. Cu toate acestea, sunteți absolut liber să vă extindeți pentru a vă satisface nevoile individuale.

În fișierul de configurare, avem:

  • Nume (obligatoriu): Acesta este numele aplicației. Nu trebuie să fie unic.
  • Descriere (obligatoriu): Text specificând ce este pentru dvs. aplicația. Acest lucru este foarte important deoarece va apărea ca descriere a aplicației dvs. pe piețe.
  • Autor (opțional): autorul aplicației. Are două proprietăți opționale: href, o adresă URL dezvoltatorului sau a paginii de pornire a companiei și e-mail, adresa de e-mail a dezvoltatorului sau a companiei. Din păcate, puteți specifica un singur autor, deci nu puteți avea detalii pentru mai mulți autori aici.
  • icoană (opțional): aceasta va fi pictograma care se va afișa pe dispozitivele care instalează aplicația. Dacă nu este specificat atunci se va folosi logo-ul Cordova.
  • Stropi (opțional): Setează ecranul de pornire al aplicației, aceasta este imaginea afișată în timpul încărcării.
  • Preferinţă (opțional): un set de preferințe pe care doriți să îl aplicați aplicației. Este o etichetă închisă și puteți avea zero sau mai multe în interiorul fișierului. Are două atribute și ambele sunt necesare: Nume și valoare. Există mai multe preferințe pe care le puteți defini, dar cea mai importantă pe care o utilizați în opinia mea este versiunea Cordova.
  • Acces (opțional): Oferă aplicației dvs. acces la resurse din alte domenii - în special, permite aplicației dvs. să încarce pagini din domenii externe care pot prelua întreaga vizualizare web. Rețineți ce am explicat mai devreme în secțiunea intitulată "Pluginul InAppBrowser" - că pentru a deschide linkurile externe din Cordova WebView, trebuie să le adăugați în lista albă a aplicației. Pentru consistență, vom permite orice resursă externă utilizând * caracter special.
  • Gap: plugin (opțional): Specifică caracteristicile pe care doriți să le utilizați. De exemplu, Android înainte de a instala orice aplicație, arată utilizatorului permisiunile pe care le solicită și dacă utilizatorul este de acord, continuă.

Dacă ați citit cu atenție lista de mai sus și ați folosit PhoneGap în trecut, ați observat probabil introducerea, în versiunea 3.0.0, a unei noi setări numite decalaj: plugin. Acesta din urmă a înlocuit caracteristică dar, pe lângă nume, conceptul este exact același.

Acum, că am remarcat punctele cheie ale formatului, puteți înțelege sursa fișierului de configurare a proiectului nostru. Cu toate acestea, dacă doriți să citiți mai multe despre acest subiect, aruncați o privire la pagina documentației oficiale. Fișierul complet este de mai jos.

   Audero Feed Reader  Audero Feed Reader este un agregator de bază pentru a păstra într-un singur loc toate știrile și articolele care vă interesează.   Aurelio De Rosa                               

3. Activarea aplicației pentru a rula

În acest moment am ajuns la sfârșitul acestei serii. Scopul său a fost să demonstreze cum putem porni aplicația în siguranță cu toate fișierele pe care le-am construit până acum. Operatorii și metodele noastre pot fi executate în siguranță după ce Cordova este complet încărcată, asigurându-vă că puteți apela API-urile Cordova. Dar așteptați ... Când este gata Cordova? Mă bucur că ai întrebat! Cadrul oferă un eveniment numit deviceready pe care le puteți asculta. Având în vedere că, în index.html fișierul (punctul de intrare al aplicației), vom asculta evenimentul și îl vom atașa ca un handler initApplication () metodă a cerere clasă. Aceasta va fi executată odată ce evenimentul este declanșat.

Codul care implementează acest lucru este prezentat mai jos.

 

4. Construirea și testarea aplicației

Aplicația noastră este acum completă. Tot ce trebuie să faceți este să-l construiți și să îl testați pe un emulator sau pe un dispozitiv real. Pentru a construi aplicația, aveți două posibilități: computerul sau serviciul cloud Adobe numit Adobe PhoneGap Build. Rețineți că, dacă doriți să utilizați computerul, trebuie să instalați setul SDK pentru fiecare platformă pe care doriți să o vizați. PhoneGap CLI are o comandă pentru a construi aplicația (construi), pentru a le testa (instalare) și pentru a îndeplini ambele sarcini (alerga). Deci, să spunem că doriți să construiți și să testați Audero Feed Reader pe Android, trebuie să tastați următoarea comandă:

phonegap rula android

Rețineți că, dacă aveți un dispozitiv Android conectat și configurat corespunzător la computer, aplicația va funcționa în mod implicit pe acesta. Altfel se va executa pe emulatorul SDK.

În cazul în care doriți să utilizați Adobe PhoneGap Build pentru a genera fișierele instalabile, puteți utiliza și CLI, doar utilizând la distanta comandă după cum se arată mai jos:

phonegap de la distanță de a construi android

Rețineți că, deoarece mediul de construcție de la distanță nu are un emulator, instalare și alerga comenzi genera pur și simplu un cod QR în Crearea telefonului interfață. În plus, pentru a utiliza serviciul trebuie să aveți un cont Adobe. Asta înseamnă că (din păcate) nu poti utilizați acreditările GitHub.


Concluzie

După cum ați văzut în această serie, crearea unui cititor de feeduri poate fi foarte ușoară datorită cadrelor precum jQuery Mobile și Cordova și anumitor API-uri, cum ar fi API-ul Google Feed. Sper că vă bucurați de acest tutorial și dacă doriți să îmbunătățiți proiectul în continuare, luați în considerare adăugarea unor caracteristici pe care le considerați că le-am pierdut și le folosesc pe propriile dvs. dispozitive mobile.

Cod