Share
Ce veți creaInterfața cu un API este o mare parte a dezvoltării și designului web în aceste zile. API-urile vă oferă o experiență bogată și dinamică în browser. Mai degrabă decât marcarea statică și imaginile, puteți să împingeți și să trageți dinamic datele de pe un server și să le redați în browser bazându-vă pe experiența pe care doriți să o oferiți utilizatorului.
În acest tutorial, vom construi un exemplu de bază pentru o aplicație bazată pe API. Folosind API-ul iTunes, vom lua adresa URL a oricărei aplicații iOS sau Mac și vom afișa pictograma de rezoluție completă chiar în browser. Este posibil ca această aplicație specifică să nu fie imediat utilă pentru dvs., dar ceea ce învățați de-a lungul drumului poate fi aplicat tuturor scenariilor.
Cele mai bine concepute aplicații iOS și OSX oferă soluții de înaltă rezoluție pentru opera lor de artă icoană. Sigur, acele pictograme pot avea o dimensiune de numai 150 × 150 pixeli pe rampa de lansare iPhone sau pe docul dvs. OSX, dar pentru a ține cont de ecranele retinei și de cerințele de dimensionare diferite în sistemul de operare, Apple solicită producătorilor de aplicații să furnizeze pictograma de înaltă rezoluție active, la fel de mare ca 1024 × 1024 pixeli! De exemplu, în stânga veți vedea pictograma Tweetbot pentru Mac, deoarece va apărea aproximativ în stația de andocare OSX. În timp ce pe dreapta este imaginea de rezoluție completă:
Apple face aceste materiale accesibile prin API-ul iTunes. Deci, dacă vreți să obțineți lucrări de artă de înaltă rezoluție de înaltă rezoluție, puteți! Tot ce ai nevoie este identificatorul aplicației, apoi, făcând o cerere către API, vi se va oferi o grămadă de informații despre aplicație, inclusiv o legătură către cea mai înaltă rezoluție a lucrării pe care o are magazinul.
Acest tutorial nu se referă atât la învățarea API-ului iTunes, ci și la învățarea unor concepte de bază în spatele construirii unei aplicații web dinamice care face ca conținutul să fie returnat de la un API. Odată ce ați învățat elementele de bază ale interfeței cu un API, puteți continua să vă creați propriile site-uri web personalizate utilizând API-uri terțe, cum ar fi Dribbble sau Twitter.
Ca o prezentare rapidă, aici sunt conceptele pe care le vom acoperi în acest tutorial pentru a obține produsul final:
Pentru a înțelege ce vom construi, să începem prin a detalia experiența de bază a aplicației noastre mici. Odată ce acest lucru este complet, putem deveni puțin mai specifici prin listarea părților sale componente.
Pentru a începe lansarea în raster a componentelor componente ale aplicației, avem nevoie de o listă a funcționalității și experienței de bază ale aplicației:
Acum, că avem o înțelegere de bază a ceea ce dorim ca aplicația să realizeze, putem începe să frământăm diferitele sale părți. Rețineți că vom dori ca aceasta să fie o aplicație web receptivă, așa că ne vom asigura că vom proiecta piesele noastre într-un mod care să le permită să măsoare sensibil în sus și în jos.
Antet: În partea de sus a paginii, vom avea un text stilizat care reprezintă numele aplicației, împreună cu o scurtă descriere a ceea ce face. "Gimmie Dat iCon" este numele stupid pe care l-am găsit pentru aplicația noastră.
Intrare: Trebuie să oferim o modalitate pentru utilizatorul de a introduce un link către aplicația a cărei grafică de artă icoană doresc. Pentru aceasta vom adăuga un simplu câmp de intrare și trimiteți un buton chiar sub antet.
producție: Odată ce un link valid este preluat de la utilizator, vom avea nevoie de un spațiu pentru a afișa operele de artă preluate din iTunes. Așa că vom crea un loc pentru acest drept sub câmpul de intrare.
E vorba de asta. Acum avem toate componentele de bază de care avem nevoie pentru a prelua o legătură de la utilizator și a afișa informații care vin din nou de la iTunes API.
Există și un alt factor important pe care trebuie să-l luăm în considerare în stadiul nostru de wireframe: diferitele stări ale componentelor noastre. Aplicația noastră mică va fi în state diferite în momente diferite. De exemplu, știm că trebuie să afișăm operele de artă care au fost returnate de API-ul iTunes, am luat deja în considerare acest lucru. Dar dacă API-ul întoarce o eroare, atunci ce facem? Sau dacă utilizatorul introduce un link rău? Trebuie să explicăm diferitele state în care poate fi aplicația noastră, în funcție de starea sa de execuție. Întrucât aplicația noastră este destul de simplă, avem doar câteva cazuri de utilizare pe care trebuie să le acoperim:
Stare zero: Ce se întâmplă când utilizatorul intră pe pagina noastră web? Nu există nicio ilustrație care să fie afișată deoarece nu a introdus încă un URL. Așadar, vom avea nevoie de un tip de "stat zero" prietenos, care să spună "hei, nu ați mai introdus încă un link. Continuați și introduceți unul, atunci vom afișa pictograma aici. "
Erori: Este foarte posibil ca în timpul executării aplicației noastre să apară câteva erori. De exemplu, utilizatorul poate introduce o adresă URL nevalidă. De asemenea, API-ul iTunes poate returna date nepotrivite sau niciun fel de date. Ar trebui să luăm în considerare aceste cazuri în designul aplicației noastre, astfel încât utilizatorul să nu se lase întrebat ce a mers prost. Deci, vom proiecta o modalitate de a afișa un mesaj de eroare (al cărui text se va schimba, în funcție de eroare).
se incarca: Pentru că lucrăm cu un API, nu totul se va întâmpla instantaneu. Calculatorul utilizatorului trebuie să trimită o cerere unui server terță parte, care trebuie să calculeze cererea și să trimită din nou informațiile. Acest lucru poate dura până la câteva secunde. Așadar, vom asigura că designul aplicației noastre oferă o modalitate de comunicare a conținutului care se încarcă. În acest fel, utilizatorul nu este frustrat și confuz de un ecran static în care nu se întâmplă nimic (chiar dacă conținutul se încarcă în fundal).
Asta e! Am acoperit toate componentele noastre diferite și diferitele lor stări. În tutorialul următor vom trece mai departe la proiectarea vizuală a aplicației cu mai multe cadre wireframes detaliate.
Accentsconagua