Deși nu sunt create în mod specific pentru a lucra împreună, jQuery Mobile și Cordova (cunoscute și ca PhoneGap) sunt un duo foarte puternic pentru a crea aplicații mobile hibride. Această serie vă va învăța cum să dezvoltați un cititor de fluxuri utilizând tehnologiile web și aceste două cadre. De-a lungul acestei serii, vă veți familiariza, de asemenea, cu Plugin-urile de conectare și stocare Cordova și API-ul Google Feed.

---

Prezentare generală a aplicațiilor

Aplicația pe care o vom construi în acest tutorial, numită "Audero Feed Reader", este foarte mică și ușor de înțeles. Este un cititor de feed-uri de bază care vă va ajuta să păstrați toate știrile și articolele care vă interesează într-un singur loc. La urma urmei, Google a oprit Google Reader, așa că trebuie să îl înlocuim, nu-i așa?

În ecranul de pornire al aplicației, vom plasa două butoane pentru a evidenția cele două caracteristici principale: o adăugați un nou buton de alimentare și o listă cu feedurile salvate. Structura ecranului de pornire este afișată cu următorul ecran:

Pentru a păstra proiectul cât mai simplu, vom salva numele feed-ului și adresa URL a acestuia. Deci, odată ce utilizatorul face clic pe butonul "Adaugă feed", vom afișa un formular cu doar două casete de intrare, după cum arată imaginea de mai jos:

Acum că utilizatorul poate salva cât mai multe feed-uri pe care le-a dorit, este timpul să-i permitem să vizualizeze lista acestor feed-uri salvate. În plus, pentru a ajuta utilizatorul să găsească cu ușurință un feed, lista este ordonată în ordine alfabetică după nume și are și o casetă de căutare, în cazul în care fluxurile sunt prea numeroase. Puteți vedea un exemplu al paginii descrise care se uită la captura de ecran de mai jos:

Odată ce utilizatorul alege un feed, aplicația preia adresa URL și afișează intrările disponibile. Pentru a analiza cu ușurință diferitele tipuri de fluxuri (Atom, RSS sau Media RSS), vom profita de API-ul Google Feed și în special de interfața Google Feed JSON. Acesta din urmă va analiza adresa URL solicitată pentru noi și va returna un obiect JSON unificat și ușor de analizat. Vom descoperi mai multe despre acest API în următoarea parte a acestei serii. Implicit, pentru a salva pe lățime de bandă, Audero Feed Reader va necesita doar 10 intrări. Pentru a permite utilizatorului să recupereze mai multe date, vom adăuga un buton "Afișați mai multe". Desigur, datele vor fi efectiv preluate numai dacă Feed-ul furnizat expune mai mult de 10 intrări. De exemplu, Mobiletuts + oferă doar 10 intrări, astfel că dacă utilizatorul dă clic pe butonul "Afișați mai multe", va fi solicitat mesajul "Fără alte intrări de încărcat".

Pentru a economisi spațiu, intrările sunt organizate cu un acordeon și, în mod implicit, numai titlul este vizibil. Cu toate acestea, utilizatorul poate vedea mai multe detalii dacă este necesar. Aplicația afișează, de asemenea, rezumatul intrării, autorul și un buton care citește "Du-te la articol" pentru a citi articolul integral pe site-ul web relativ. Rețineți că, pentru a spori gradul de utilizare, vom afișa, de asemenea, din nou titlul, dar de această dată se poate face clic pentru a accesa articolul complet.

Aspectul final al acestei pagini este prezentat mai jos:

---

Componentele proiectului

În acest moment știm ce să facă, deci e timpul să vedem Cum o vom face. Tehnologiile implicate în dezvoltarea tehnologiei Audero Feed Reader sunteți:

• HTML 5: Pentru a crea și marca paginile.
• CSS 3: Pentru a modela paginile. Rețineți că nu vom avea o foaie de stil CSS personalizată și vom folosi doar cea oferită și cerută de jQuery Mobile.
• JavaScript: Aceasta este limba pe care o vom folosi pentru a programa logica aplicației. Este singurul limbaj acceptat de PhoneGap.
• jQuery: jQuery va fi folosit pentru a selecta elemente, pentru a atașa manageri de evenimente și pentru a rula cererile AJAX. Este, de asemenea, o dependență a jQuery Mobile.
• jQuery Mobile: Acesta este cadrul nostru de alegere pentru a crea interfața utilizator a paginilor noastre. Aceasta ne permite să optimizăm cu ușurință un site web pentru dispozitive mobile și să creăm rapid interfețe mobile. La momentul redactării, cea mai recentă versiune disponibilă și utilizată este 1.3.1.
• PhoneGap: Împachetează toate fișierele noastre, astfel încât să le putem compila ca și cum am construi o aplicație nativă. Mai mult, PhoneGap oferă câteva interfețe API interesante și utile pentru a comunica cu hardware-ul dispozitivului, cum ar fi Storage and Connection. Versiunea utilizată este 3.0, o îmbunătățire recentă și semnificativă față de 2.x.

În plus față de cele de mai sus, vom folosi și aceste module Cordova Core Plugins:

• InAppBrowser: Aceasta este un browser web care se afișează în aplicație la apel window.open. Din versiunea 2.3.0, au fost adăugate două metode importante: executeScript () și insertCSS (). Prima vă permite să introduceți codul JavaScript, în timp ce al doilea adaugă codul CSS în InAppBrowser fereastră. Nu vom folosi aceste metode în aplicația noastră, dar am vrut să le menționez. Pentru a afla mai multe, vizitați docul oficial al InAppBrowser.
• Dispozitiv de stocare: Oferă acces la opțiunile de stocare ale dispozitivului. Rețineți că, după cum afirmă documentația, unele dispozitive oferă deja o implementare a acestor specificații, caz în care se aplică suportul încorporat. Implementarea lui Cordova oferă suport compatibil pentru cei care nu. Pentru a citi mai mult, aruncați o privire la docul Local Storage.
• Notificare plugin: Vă permite să creați notificări vizuale, sonore și tactile. Dintre cele câteva metode disponibile, vom folosi doar alerta() pentru a afișa anumite mesaje utilizatorului. De exemplu, acest plugin va fi utilizat atunci când un utilizator adaugă sau șterge cu succes un feed. Pentru mai multe informații, consultați Documentele de notificare.
• Plugin de conectare: Este alcătuită dintr-o singură proprietate care oferă informații despre starea conexiunii dispozitivului (de exemplu, WI-FI, 3G, nici una etc.). Rețineți că din versiunea 2.3.0, trebuie să accesați Conexiune obiect folosind noul navigator.connection proprietate. Această proprietate se potrivește cu specificația W3C, în loc de cea anterioară navigator.network.connection proprietate. Mai multe despre asta aici.

Dacă ați folosit versiuni anterioare ale PhoneGap, veți recunoaște că aceste pluginuri nu sunt altceva decât ceea ce ați folosit ca API-uri. Schimbarea numelui se datorează noii arhitecturi PhoneGap. Nu vă faceți griji însă, în afară de nume, aproape totul este același. Dacă doriți să aflați despre toate cele mai recente și cele mai bune îmbunătățiri cu versiunea 3.0, puteți citi articolul introductiv și Ghidul de inițiere.

---

1. Instalați PhoneGap

Începând cu versiunea 3.0.0, echipa de dezvoltare a introdus o nouă procedură pentru a instala PhoneGap care necesită Node.js și npm. În plus, nu există link-uri de descărcare simple ca rezervă în acest moment. Prin urmare, restul tutorialului presupune că aveți ambele pachete software instalate și care funcționează. După ce ați terminat, primul pas este să tastați următoarea comandă pentru a instala PhoneGap:

npm instalează -g phonegap

Dacă utilizați Linux, amintiți-vă să premedicați sudo la linia anterioară.

---

2. Inițiați Proiectul

Înainte de a crea dosarul de proiect, merită menționat că echipa de dezvoltare a introdus, de asemenea, o linie de comandă în această nouă versiune pentru a ajuta dezvoltatorii să îndeplinească sarcini comune cum ar fi construirea și rularea aplicației sau instalarea pluginurilor. CLI vă permite, de asemenea, inițializarea unui proiect. Nu numai că va crea un dosar cu biblioteca PhoneGap din interior, dar va genera și scheletul unei aplicații. Pentru a inițializa proiectul, introduceți pur și simplu următoarea comandă:

phonegap creare audio-feed-cititor com.audero.free.utility.auderofeedreader "Audero Feed Reader"

Primul argument specifică numele directorului de creat. Celelalte două argumente sunt opționale și specifică ID-ul și respectiv numele aplicației. Odată ce executați comanda de mai sus, veți vedea următoarea structură în interiorul folderului rădăcină al proiectului:

• .Cordova: Folosit pentru compatibilitatea de fundal cu uneltele Cordova.
• îmbinarea celor două tendințe: În acest dosar, puteți adăuga orice personalizare specifică platformei, astfel încât să nu fie necesară modificarea fișierelor sursă de fiecare dată când lucrați cu un proiect.
• platforme: Locul unde vor fi plasate instalatorii de compilare, în cazul în care compilați proiectul local.
• Plugin-uri: Dosarul în care veți găsi pluginurile proiectului.
• www: Dosarul care conține fișierele sursă și configurația aplicației. Acesta conține dosarele "css", "js" și "img" unde puteți pune fișierele respective. În plus, acesta are, de asemenea, un dosar "res" în care plasați icoane și ecranele de tip splash.

---

3. Instalați pluginurile PhoneGap

Așa cum am văzut în introducere, proiectul nostru vom profita de unele dintre pluginurile de bază ale PhoneGap. Pentru a le instala, trebuie să utilizați CLI tastând comanda de mai jos:

 phonegap plugin local adăugați PLUGIN_REPOSITORY_URL

În cele de mai sus, PLUGIN_REPOSITORY_URL este adresa URL a depozitului pluginului pe care doriți să îl utilizați. Deoarece proiectul nostru va utiliza atât plugin-urile de notificare cât și conexiunea, trebuie să tastați următoarea comandă:

 phonegap plugin local adăugați https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git pluginul local phonegap adăugați https://git-wip-us.apache.org/repos/asf /cordova-plugin-network-information.git

Așa cum ați observat cel mai obsedat dintre voi, nu am adăugat pluginul Storage. Motivul este că începând cu versiunea 3.0, accesul este integrat în Cordova.

---

4. Adăugați cadre pentru telefon

Acum, când avem PhoneGap și plugin-urile sale, trebuie să adăugăm celelalte două biblioteci necesare: jQuery (Voi folosi versiunea 2.0.3) și jQuery Mobile (versiunea 1.3.1).

Înainte de a continua, este important să înțelegeți de ce am ales ramura 2.x a jQuery. jQuery are două ramuri majore în curs de dezvoltare: 1.x și 2.x. Versiunea pe care ar trebui să o utilizați într-adevăr depinde de locul în care utilizați cadrul și de browserele pe care intenționați să le susțineți. În timp ce jQuery 1.x acceptă toate versiunile de Google Chrome, Firefox, Safari, Opera și Internet Explorer, pornind de la versiunea 6, versiunea 2.x a scos suportul pentru Internet Explorer 6, 7 și 8 în schimbul unei dimensiuni mai mici și performanțe mai bune. Deoarece dezvoltăm o aplicație mobilă cu Cordova, nu trebuie să ne facem griji cu privire la Internet Explorer 6-8. De fapt, sistemele de operare Microsoft susținute de Cordova sunt Windows Phone 7 și Windows Phone 8 care rulează respectiv pe Internet Explorer 9 și 10. Prin urmare, putem folosi în siguranță jQuery 2.x!

Cu locul de înțelegere de mai sus, putem continua pașii noștri de bază pentru înființare Audero Feed Reader. După ce descărcați bibliotecile, mutați fișierul jQuery și fișierul JavaScript (versiunea minimizată) a jQuery Mobile în interiorul "js" pliant. Apoi, trebuie să punem foaia de stil a jQuery Mobile (jquery.mobile-1.3.1.min.css) în interiorul "Css" pliant. În cele din urmă, plasăm imaginile incluse în jQuery Mobile în "Img" pliant. Deoarece am schimbat ușor structura nativă a aplicației jQuery Mobile, trebuie să ajustăm căile care să indice imaginile din interiorul fișierului CSS. Trebuie să înlocuiți în mod special partea "imagini /" cu acest șir "... / img /". Rețineți că șirul trebuie înlocuit de 5 ori.

---

5. Crearea structurii fișierului de proiect

Acum, că avem cadrul de proiect în vigoare, trebuie să creăm dosarul "www", fișierele HTML necesare, să setăm pictograma aplicației implicite, să optimizăm fișierul de configurare Adobe PhoneGap și să schimbăm ecranul de pornire implicit. Asta e mult, deci hai să ne mișcăm!

În cursul acestei serii, vom crea următoarele fișiere:

• index.html: Punctul de intrare al aplicației, unde vom pune link-urile către bibliotecile folosite.
• add-feed.html: Aceasta este pagina care conține formularul utilizat pentru a salva un feed nou.
• Lista-feeds.html: Afișează lista fluxurilor stocate.
• spectacol-feed.html: Aceasta indică intrările feedului dat. În plus, are o navbar care are un buton pentru a șterge feedul și un altul pentru a prelua mai multe intrări din feed.
• aurelio.html: Pagina de credite care conține informații despre autor.
• feed.js: Acest fișier conține o clasă, numită A hrani, folosit pentru a crea, a șterge și a prelua feedurile stocate. Se bazează pe pluginul Cordova Storage.
• application.js: Acest fișier conține o altă clasă, numită cerere, care are metodele de a inițializa paginile aplicației și de a atașa manipulanții la elementele unei anumite pagini (de exemplu butoanele navbar citate anterior).
• config.xml: Acest fișier XML conține metadatele proiectului nostru și stochează setări precum numele și descrierea aplicației.

---

6. Creați pagina principală

După cum sa explicat în secțiunea anterioară, deoarece jQuery Mobile încarcă pagini folosind Ajax, trebuie să încărcăm fișierele CSS și JavaScript în punctul de intrare al aplicației noastre, adică index.html fişier. Această pagină afișează titlul și descrierea aplicației și are toate butoanele pentru a accesa restul aplicației.

Sursa completă a paginii de pornire este prezentată 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ă. 
 Adăugați Feed Feed Feed 
  
  

După cum puteți citi din codul de mai sus, butoanele din interiorul si