În prezent, creăm aplicații web de mâine
Cel mai important lucru pe care trebuie să-l aveți pentru a rula exemplele din acest articol este mai multe browsere pentru testare. Vă recomandăm să utilizați cele mai recente versiuni de Mozilla Firefox, Apple Safari și Google Chrome pentru teste. În timp ce lucram la acest articol am folosit Mozilla Firefox 3.6, Apple Safari 4.04 și Google Chrome 5.0.322. Poate doriți să testați aplicația în browserele mobile. Am testat aplicația mea pe browsere care rulează pe emulatori de dispozitive mobile, utilizând cele mai recente versiuni ale SDK-urilor Android și iPhone.
Puteți descărca codul sursă pentru exemplele pentru acest articol.
Definiți funcționalitatea acceptată
Există o glumă veche despre faptul că dezvoltatorii web își petrec 20% din timp scriind codul, iar restul de 80% doresc să funcționeze în mod egal în toate browserele. A spune că dezvoltatorii s-au obișnuit cu faptul că diferite browsere funcționează diferit nu înseamnă să spui nimic. În legătură cu noul val de inovare în browsere, acest punct de vedere pesimist este pe deplin justificat. Funcționalitatea, susținută de cele mai recente versiuni de browsere, se schimbă în mod constant.
Cu toate acestea, este pozitiv faptul că noile oportunități apar pe baza standardelor Web, ceea ce ne permite să le folosim astăzi. Puteți utiliza metoda de îmbunătățire progresivă - pentru a furniza funcționalități de bază, pentru a verifica suportul pentru funcții suplimentare și, dacă acestea sunt acceptate, pentru a vă extinde aplicația cu noi funcționalități. Mai întâi, să vedem cum să determinăm dacă browserul acceptă oricare dintre noile caracteristici. Lista 1 prezintă un scenariu simplu de detectare.
Listarea 1. Scenariul de detectare
În cadrul HTML 5 a apărut un număr mare de noi caracteristici și standarde. Noi, în acest articol, ne vom concentra pe câteva caracteristici destul de utile. Scenariul prezentat în listare 1 definește suportul browserului pentru patru opțiuni:
Listing 2. Structura DOM pentru afișarea rezultatelor scriptului de detectare
Lista 2 prezintă o structură HTML simplă utilizată pentru afișarea informațiilor de diagnostic colectate de script. În continuare, în Lista 1, verificăm suportul pentru localizare. Din nou, se folosește o tehnică dublă de negare, dar aici este verificat obiectul de geolocalizare. care trebuie să fie o proprietate a obiectului navigator. Dacă există obiectul geolocație, vom folosi metoda getCurrentPosition pentru a obține locația curentă. Obținerea unei locații poate fi o acțiune lentă, deoarece implică de obicei scanarea rețelelor Wi-Fi. Pe dispozitivele mobile, această procedură poate include, de asemenea, scanarea turnurilor celulare și sateliții GPS. Deoarece acest lucru poate dura mult timp, getCurrentPosition este o metodă asincronă care are ca parametru o funcție de apel invers. În acest caz, ca funcție de apel invers, folosim o închidere care afișează pur și simplu câmpurile de informații despre locație (prin intermediul stilului CSS corespunzător) și apoi scrie valorile coordonatelor la structura DOM.
Următorul pas este să verificați suportul bazei de date. Verificăm disponibilitatea funcției openDatabase globale. care este folosit pentru a crea și a accesa bazele de date ale clienților.
Listing 3. Caracteristicile diferitelor browsere
Toate browserele de desktop populare oferă destul de multe funcționalități noi.
Suportul de localizare geografică este slab distribuit pe browserele desktop, însă geolocarea este menținută foarte bine în browserele de dispozitive mobile. Lista 4 prezintă rezultatele agregate pentru browserele mobile.
Listarea 4. Browsere pentru dispozitive mobile
Rețineți că iPhone acceptă totul, cu excepția fluxurilor de lucru. Listarea 3 indică faptul că versiunea desktop a browserului Safari acceptă fluxuri de lucru, deci este logic să vă așteptați ca această funcționalitate să apară în curând pe iPhone.
Deci, putem determina ce funcționalitate acceptă browserul utilizatorului. Acum, să aruncăm o privire asupra unui exemplu de aplicație care combină această funcție în funcție de faptul dacă browserul o acceptă. Vom crea o aplicație care utilizează API Foursquare pentru a găsi locuri populare în apropierea locației curente a utilizatorului.
Creați aplicația de mâine
În acest exemplu, ne vom concentra pe utilizarea locației geolocate pe dispozitive mobile, dar să nu uităm că Firefox 3.5+ acceptă, de asemenea, localizarea geografică. Aplicația își începe activitatea cu o căutare a locurilor (în termeni de locații Foursquare) situate lângă locația curentă a utilizatorului. Poate exista ceva, dar de obicei sunt restaurante, baruri, magazine etc. Deoarece exemplul nostru este o aplicație Web, este supus unei politici de restricționare a domeniului. Browserul nu poate accesa direct API-ul furnizat de Foursquare. Prin urmare, vom crea un servlet Java care va proxy apelurile browserului. Nu este necesar să utilizați Java pentru aceasta; un proxy similar poate fi scris cu ușurință în PHP, Python, Ruby sau într-o altă limbă. Lista 5 arată servletul proxy utilizat în acest exemplu.
Lista 5. Un servlet proxy care funcționează cu Foursquare
Utilizarea locației geolocate
În primul rând, aplicația face un apel pentru a găsi locuri. Lista 5 arată că trebuie să trecem doi parametri: geoLat și geoLong. indicând latitudinea și longitudinea.
Listare 6. Efectuați un apel pentru a găsi locații în apropierea acestei locații
Codul de mai sus verifică suportul de localizare în browser. Dacă este acceptată localizarea geolocală, aplicația primește informații despre locație și apelează funcția de căutare. oferindu-i latitudine și longitudine. Această funcție utilizează Ajax (un obiect XMLHttpRequest pentru a apela servletul afișat în listare 5). Ca funcție de retur, codul folosește o închidere în care sunt analizate datele JSON primite de la Foursquare și se numește funcția buildVenuesTable prezentată mai jos.
Afișarea 7. Afișarea informațiilor despre locații
Structurarea stocurilor de date structurate
Listarea 7 demonstrează strategia clasică de îmbunătățire progresivă. În acest exemplu, verificăm dacă browserul acceptă baza de date. Dacă baza de date este acceptată, în aplicație apare un nou element de interfață de utilizator, adăugând noi funcționalități aplicației pentru care este utilizată baza de date. În acest caz, acesta este butonul obișnuit. Când faceți clic pe buton, funcția saveAll este apelată. prezentată în Lista 8.
Listarea 8. Salvarea informațiilor în baza de date
Pentru a salva informații despre locații în baza de date, mai întâi creați un tabel în care aceste informații vor fi stocate. Aceasta este o sintaxă destul de standard SQL pentru crearea unui tabel. (Toate browserele care suportă bazele de date utilizează SQLite.) Vezi documentația SQLite pentru informații despre tipurile de date acceptate, constrângerile etc.) Codul SQL se execută în mod asincron. Funcția de tranzacție este invocată, la care este trecută funcția de apel invers. Funcția de retur are ca parametru un obiect de tranzacție, cu care puteți executa interogări SQL. Funcția executeSQL acceptă ca parametru un șir de cod SQL, o listă opțională de parametri și manipulatori pentru executarea cu succes a interogării și pentru apariția unei erori. Dacă nu există nici o funcție de manipulare pentru cazul de eroare, eroarea este "înghițită". Pentru a crea declarația de tabelă, acesta este exact ceea ce trebuie să faceți. Tabelul va fi creat cu succes atunci când scriptul este executat pentru prima dată. La apelurile ulterioare, scriptul ar trebui să genereze o eroare, deoarece pagina există deja. Prin urmare, în acest cod, pur și simplu, garantăm că există tabelul în care vom adăuga rânduri.
După crearea mesei, numim funcția saveVenue în bucla forEach pentru fiecare locație primită de la Foursquare. În această funcție, mai întâi verificați dacă acest obiect există deja în baza de date locală. Aici vedem manipulatorul pentru executarea cu succes a cererii în acțiune. Rezultatul interogării este transmis acestui handler. Dacă nu există rezultate sau dacă site-ul nu a fost încă stocat local, se va apela funcția insertVenue. în care instrucțiunea insert este executată pentru a adăuga acest loc în tabel.
După salvarea tuturor obiectelor din funcția saveAll, este apelată funcția countVenues. Solicită numărul de locuri care au fost adăugate la masă. Sintaxa rând ["COUNT (*)"] este utilizată aici. cu care se determină numărul de rânduri returnate ca rezultat al executării interogării.
Am învățat cum să folosim baza de date încorporată în browser, dacă este disponibilă. În secțiunea următoare, vom examina utilizarea fluxurilor de lucru.
Prelucrarea de fundal utilizând fluxurile de lucru (lucrătorii web)
Să ne întoarcem la lista 6 și să facem o mică schimbare. Adăugați o verificare a browserului pentru firele lucrătorilor, după cum se arată în lista 9. Mai jos, dacă este disponibil suportul, vom folosi fluxurile de lucru pentru a extrage informații suplimentare despre fiecare locație primită de la Foursquare.
Listarea 9. Căutarea locației modificate
Listing 10. Un script executat de firul worker, details.js
În acest scenariu, traversați toate locurile. Pentru fiecare site, scriptul face un apel către proxy-ul Foursquare pentru a obține informații detaliate despre locație. Ca de obicei, pentru acest lucru se utilizează un obiect XMLHttpRequest. Cu toate acestea, rețineți că în apelul la funcția deschisă a acestui obiect care deschide conexiunea, trecem cel de-al treilea parametru (adevărat). Acest lucru face ca apelul să fie sincron (și nu asincron, ca de obicei). Puteți face acest lucru, deoarece această acțiune va executa firul lucrătorului, nu firul principal al interfeței de utilizator și, prin urmare, aplicația nu va rămâne pe aceste apeluri. Efectuând apeluri sincron, garantăm că, la începutul fiecărui apel următor, apelul anterior a fost deja încheiat. Operatorul procedează la extragerea tuturor sugestiilor asociate locului dat și le colectează pentru a fi transmise la firul principal al interfeței utilizator. Pentru a returna datele, utilizați funcția postMessage. care apelează funcția de apel inversat în fluxul de lucru. după cum se arată în Lista 9.
În mod implicit, căutarea returnează zece locuri. Imaginați-vă cât timp este nevoie pentru a finaliza zece apeluri suplimentare pentru informații detaliate. Este logic să efectuați activități similare în fundal utilizând fluxurile de lucru.
concluzie
În acest articol, am analizat unele dintre noile caracteristici ale HTML 5, susținute de browserele moderne. Am învățat cum să testați suportul pentru aceste funcții și să extindeți treptat funcționalitatea aplicației. Cele mai multe dintre aceste caracteristici sunt deja acceptate pe scară largă de browserele populare, în special pe dispozitivele mobile. Acum puteți crea aplicații Web inovatoare, utilizând avantajele tehnologiilor precum geolocația și fluxurile de lucru.
Trimiteți-le prietenilor: