Share
În această serie, vom dezvolta un client Twitter utilizând cadrele jQuery Mobile și PhoneGap. Acest proiect va fi implementat în medii Android și iOS ca aplicație nativă. Interfața de utilizator a aplicației, numită pur și simplu "Tweets", va fi construită folosind jQuery Mobile și PhoneGap vor fi folosite pentru a crea aplicația nativă. De asemenea, vom utiliza API-ul PhoneGap Storage pentru a accesa funcționalitatea bazei de date native. Toate codarea se va face cu ajutorul codurilor HTML și JavaScript, utilizând jQuery, jQuery Mobile și bibliotecile PhoneGap.
Principalele caracteristici ale aplicației Tweets discutate în această serie sunt următoarele:
Accentsconagua
user_timeline și căutare. Codul aplicației se bazează pe funcția jQuery ajax () pentru a accesa aceste metode API.Acest tutorial a fost organizat în 4 părți. În secțiunea următoare din partea I, numită "jQuery Mobile și PhoneGap", introducem pe scurt jQuery Mobile și PhoneGap și discutăm despre dezvoltarea de aplicații native inter-platformă utilizând acele cadre. În secțiunea următoare, "Screen Flow", prezentăm aplicația Tweets și descriem fluxul ecranului. Secțiunea numită "jQuery Mobile Page Structure" este o introducere la mai multe concepte de nivel înalt în cadrul jQuery Mobile, în special paginile de containere și de conținut.
În partea a II-a, vom începe examinarea aplicației Tweets. În "Revizuirea index.html", accentul nostru principal este pus pe structura statică a codurilor HTML și jQuery Mobile care alcătuiesc ecranele de aplicații. Secțiunea numită "Twitter API" oferă o prezentare generală a metodelor API-ului Twitter user_timeline și căutare. Următoarea secțiune, "Revizuirea codului", oferă o revizuire a codului JavaScript care implementează funcționalitatea aplicației. Partea a II-a va discuta despre "Încărcarea paginii inițiale", "Funcțiile utilitare" și "Funcțiile de acces la baze de date" și va începe discuția despre "Funcțiile core logice de afaceri".
În Partea a III-a, vom continua să inspectăm funcțiile "Core Business Logic Functions", preluând de unde ne-am oprit în Partea a II-a și finalizând revizuirea codului aplicației Tweets, analizând "Handlers Event" și "Funcții Display Page".
Partea finală a tutorialului nostru, Partea a IV-a, începe cu secțiunea intitulată "Fișiere în arhiva de descărcare", în care descriem conținutul fișierului de arhivă care însoțește această serie. În "Subiecte specifice mediului", explicăm cum să importim aplicația în Eclipse pentru platforma Android și Xcode pentru platforma iOS. În această secțiune, oferim, de asemenea, imagini pe ecran ale aplicației într-un telefon Android, un iPod touch și un iPad 2. În cele din urmă, oferim concluzii în "Concluzii".
Toate pictogramele și imaginile splash din arhiva de descărcare au fost create pe baza unui set de pictograme furnizat de Smashing Magazine. Așa cum se afirmă pe site-ul web legat: "Puteți utiliza setul pentru toate proiectele dvs. gratuit și fără restricții, însă este interzis să le vindeți".
Proiectul jQuery Mobile este un sistem de interfață utilizator pentru dispozitive mobile care funcționează uniform pe diferite platforme, cum ar fi Android și iOS. În timp ce jQuery Mobile se axează în principal pe uniformitatea interfeței utilizator într-o paradigmă a aplicației web, cadrul PhoneGap permite dezvoltarea aplicațiilor native bazate pe HTML5 și JavaScript care pot fi implementate pe mai multe platforme mobile, inclusiv Android și iOS. Aceste cadre pot fi utilizate împreună pentru a dezvolta aplicații native în care interfața cu utilizatorul este construită prin jQuery Mobile și funcțiile native ale dispozitivelor sunt construite folosind PhoneGap.
Următoarea diagramă oferă o vizualizare simplificată a unei aplicații native implementate în Android și iOS, dezvoltată utilizând HTML5, CSS și JavaScript.
Rețineți că atât jQuery Mobile cât și PhoneGap suportă platforme mobile suplimentare cum ar fi BlackBerry OS, Symbian și altele. Cu toate acestea, în această serie ne vom concentra pe Android și iOS.
Diferitele avantaje ale dezvoltării aplicațiilor native utilizând jQuery Mobile și PhoneGap sunt enumerate mai jos.
Pe de altă parte, există dezavantaje în dezvoltarea unei aplicații native utilizând jQuery Mobile și PhoneGap. Unele dintre acestea sunt menționate mai jos.
În plus, ca în orice proiect de dezvoltare, tot trebuie să utilizați instrumente de dezvoltare și testare specifice platformelor pentru a testa și a implementa aplicația dvs. pe dispozitive Android și iOS.
Pentru aplicația de probă discutată în această serie, am folosit jQuery Mobile versiunea 1.0 RC1 și PhoneGap versiunea 1.1.0. Acestea au fost cele mai recente versiuni la momentul creării acestei serii.
Există două modele distincte ale fluxului de ecran, unul pentru dispozitivele cu ecran lat, unde lățimea afișajului este mai mare de 500 de pixeli și una pentru dispozitivele cu ecran îngust, unde lățimea afișajului este mai mică de 500 de pixeli. Cu această definiție, un dispozitiv iPad va fi considerat ecran lat, în timp ce un telefon iPod touch sau Motorola Droid va fi considerat ecran îngust. Pragul, 500, este o constantă care este definită în codul aplicației.
Să ne uităm mai întâi la fluxul ecranului pentru dispozitivele cu ecran lat. Ecranul inițial are două butoane cu etichetele "Adăugare nume ecran" și "Adăugați termen de căutare". Există un câmp de text sub butoane. În partea din stânga jos a ecranului există o listă care conține numele ecranului și termenii de căutare introdus de utilizator. Numele de ecran sunt gri și termenii de căutare au un fond galben.
Pentru a introduce un nume de ecran pe Twitter, utilizatorul introduce numele în câmpul de text de sub butoane și apasă butonul "Adăugare nume ecran". În mod similar, pentru a introduce un termen de căutare pe Twitter, utilizatorul introduce termenul în câmpul de text de sub butoane și apasă butonul "Adăugați termenul de căutare".
Dacă utilizatorul dă clic pe butonul de ștergere din secțiunea din extrema dreaptă a unui element din listă (reprezentat ca "x" în interiorul unui cerc), acel element este eliminat din listă.
Dacă utilizatorul dă clic pe un element de listă pentru un nume de ecran pe Twitter, este afișată o roată de rotire ca o indicație a faptului că cronologia utilizatorului (tweet-uri) pentru numele de ecran este preluată de pe Twitter.
După ce ați primit cronologia asociată cu numele ecranului, aplicația le afișează în partea dreaptă a paginii din dreptul listei. Acestea sunt cele mai recente 11 elemente temporale asociate cu numele ecranului. Pragul, 11, este o constantă definită în codul aplicației.
Rețineți că, în funcție de API-ul Twitter, este posibilă recuperarea cronologiei unui utilizator fără autentificare numai dacă linia temporală a acestuia nu este protejată / privată. Cererea noastră nu implică autentificarea, de aceea motivul pentru care sunt disponibile doar calendarele publice.
În mod similar, în cazul în care utilizatorul dă clic pe o listă de articole pentru un termen de căutare Twitter, este afișată o roată de rotire ca indicator care indică faptul că rezultatele căutării sunt preluate de pe Twitter, similar cu afișajul din Figura 4. După primirea rezultatelor căutării, le afișează în partea dreaptă a paginii de lângă listă, similar cu figura 5. Acestea sunt cele mai recente 11 rezultate asociate cu termenul de căutare. Pragul, 11, este o constantă definită în codul aplicației.
Cronologia sau rezultatele căutării pot include legături URL. Dacă utilizatorul apasă oricare dintre aceste linkuri, va fi lansat un browser web pentru a afișa pagina web asociată linkului. Când se întâmplă acest lucru, aplicația Tweets nu mai este activă.
Următoarea diagramă rezumă fluxul de ecran discutat mai sus.
Pentru dispozitivele cu ecran îngust, debitul ecranului este similar, totuși, datorită lipsei de spațiu, intrările (articolele din listă), pagina de progres și rezultatele sunt afișate în diferite ecrane.
Ecranul inițial, pagina "Intrări", are butoanele, câmpul de text și lista cu numele s, i termenii de căutare stivuite.
Dacă utilizatorul face clic pe un element de listă, pagina "Progres" este afișată ca un ecran separat.
Când rezultatele sunt primite, pagina Progres este înlocuită cu "Rezultate".
Dacă utilizatorul apasă oricare dintre legăturile URL din pagina Rezultate, o aplicație de browser va începe să afișeze pagina web din link. Când se întâmplă acest lucru, aplicația Tweets nu mai este activă. În dispozitivele Android, utilizatorul poate reveni la aplicația Tweets apăsând butonul din spate al dispozitivului. Pentru dispozitivele iOS, utilizatorul trebuie să închidă browserul și să lanseze aplicația Tweets din ecranul de start apăsând pictograma aplicației.
Diagrama de mai jos rezumă fluxul ecranului pentru dispozitive cu ecran îngust.
Vom discuta despre modul în care vor fi reprezentate ecranele din aplicația noastră folosind elementele de pagină ale jQuery Mobile (aici împrumutăm câteva materiale din tutorialul meu anterior Crearea unei aplicații de contact. De asemenea, pentru o discuție detaliată despre cum sunt construite paginile cu jQuery Mobile cadru, consultați secțiunea Anatomia unei pagini din documentația de referință jQuery Mobile).
Un singur fișier HTML din cadrul jQuery Mobile constă dintr-o pagină de container cu una sau mai multe pagini de conținut din interiorul containerului. Pagina cu containere are a date-rol = „pagina“ , în timp ce paginile de conținut au o date-rol = „conținut“ atribut. O pagină de conținut poate avea opțional un antet și un subsol. În exemplul de mai jos, există două pagini de conținut care conțin atât un antet, cât și un subsol și o pagină de conținut fără antet sau subsol.
.....................
În cadrul unei pagini de container, se intenționează să se afișeze o singură pagină de conținut la un moment dat. Ideea este de a grupa ecrane logice în mod obișnuit într-o singură pagină de container și de a defini fiecare dintre acestea ca pagină de conținut. De exemplu, acele pagini de conținut pot partaja codul JavaScript obișnuit.
În aplicația Tweets, există o pagină de container care este stocată în pagina fizică index.html. Această pagină a containerului stochează toate paginile de conținut necesare aplicației. Pentru dispozitivele cu ecran îngust, ecranele Inputs (Figura 7), Progress (Figura 8) și Rezultate (Figura 9) sunt reprezentate ca pagini de conținut separate. Pentru dispozitivele cu ecran lat, există o singură pagină de conținut, denumită "Wide", care oferă toate funcționalitățile necesare. Următoarea figură rezumă această discuție.
În partea inițială a acestui tutorial, am introdus pe scurt jQuery Mobile și PhoneGap și am discutat despre dezvoltarea de aplicații native cross-platform folosind acele cadre. Apoi, am prezentat aplicația Tweets și am descris fluxul ecranului. Apoi, am dat o introducere la câteva concepte de nivel înalt în cadrul jQuery Mobile. În special, au fost discutate paginile despre containere și conținut.
În partea a II-a, vom începe examinarea aplicației Tweets. În "Revizuirea index.html", accentul nostru principal se va pune pe structura statică a codului HTML și a codului jQuery Mobile care alcătuiesc ecranele de aplicații. Secțiunea numită "Twitter API" va oferi o imagine de ansamblu asupra metodelor API Twitter user_timeline și căutare. Următoarea secțiune, "Revizuirea codului", va face o revizuire a codului JavaScript care implementează funcționalitatea aplicației. Partea a II-a va discuta despre "Încărcarea paginii inițiale", "Funcțiile utilitare", "Funcțiile de acces la baze de date" și apoi începeți discuția despre "Funcțiile core logice de afaceri".
