Share
Ce veți creaAplicația noastră mică este în căutarea exact așa cum vrem, dar nu face nimic încă. Deci, hai să lucrăm la adăugarea unor JavaScript pentru a face aplicația interactivă.
Această parte a seriei va necesita o anumită concentrare de la dvs., dar chiar dacă nu sunteți un dezvoltator JavaScript experimentat, vă promit că veți pleca după ce ați învățat niște abilități valoroase.
În primul rând, vom crea fișierul javascript Active / js / main.js și în interiorul căruia vom crea un obiect numit gimmie (numit după aplicația noastră). Aici vom stoca variabilele și funcțiile de care avem nevoie pentru ca acestea să nu fie pe fereastră obiect. O vom pune imediat lângă apelul "pregătit pentru documente" al jQuery pe care îl vom folosi de asemenea.
"javascript var Gimmie = $ conținut: $ ('. conținut'), $ form: $ ('form'),;
$ (document) .ready (function () // La incarcarea paginii, executati aceasta ...); "
Observați că am adăugat câteva variabile în cadrul nostru gimmie obiect: conținut $, forma $. Acestea sunt obiecte jQuery, așa că le numim cu a $ în fața noastră, pentru a ne reaminti. Deoarece sunt noduri DOM specifice pe care le vom referi mai mult decât o dată, le vom stoca în variabile pentru o utilizare mai rapidă și viitoare.
Primul lucru pe care trebuie să-l rezolvăm este atunci când utilizatorul intră în forma noastră și o transmite. Deci, în documentul "pregătit" vom atașa un eveniment ascultător în forma noastră. Am putea face $ ( 'Formă'). Pe () dar pentru că am stocat deja elementul de formular într-o variabilă, vom face referire doar în schimb Gimmie. $ Form.on (). Apoi vom împiedica acțiunea formularului implicit (astfel încât pagina să nu se actualizeze):
javascript $ (document) .ready (function () Gimmie. $ form.on ('trimite', funcția (e) e.preventDefault ();
Acum, dorim să afișăm o stare de încărcare atunci când un utilizator trimite formularul. Astfel știu că se întâmplă ceva. Dacă vă amintiți, am proiectat acest lucru în Sketch:
Pentru a realiza acest lucru, vom crea o funcție în interiorul nostru gimmie obiect numit toggleLoading și îl putem executa atunci când utilizatorul trimite un formular prin apelare Gimmie.toggleLoading () în cadrul ascultătorului de prezentare a formularului. Am numit-o toggleLoading deoarece vom comuta starea curentă de încărcare în UI, adică o vom executa o singură dată la trimitere, atunci vom rula un buchet de cod și când vom termina, vom rula din nou pentru a scoate starea de încărcare.
"javascript var Gimmie = / * celălalt cod aici * /
Accentsconagua
toggleLoading: function () // Comutați indicatorul de încărcare. $ content.toggleClass ('content-loading'); // Comutați butonul de trimitere astfel încât să nu primim trimiteri duble // http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery acest lucru. $ Form.find ('button') .prop ('dezactivat', funcția (i, v) return! v;); , $ (document) .ready (functie () Gimmie. $ form.on ('trimite', functie (e) e.preventDefault (); ;); " Observați că schimbăm o clasă pe .conţinut element numit conținut - încărcare. Trebuie să creăm în jurul nostru câteva stiluri CSS. Deci, în fișierul nostru CSS, să adăugăm:
"css. content-loading: înainte de content:"; poziția: absolută; top: 0; stânga: 0; lățime: 100%; înălțime: 100%; fundal: #fff; opacitate: 0,9; z-index: 10;
.încărcarea conținutului: după content: url ('... /img/loading.gif'); poziția: absolută; stânga: 50%; top: 3em; margin-stânga: -16px; marginea superioară: -16px; z-index: 11; “
Aici folosim pseudo elemente pentru a crea o stare de încărcare în zona noastră de conținut. Al nostru inainte de elementul este utilizat pentru a crea o suprapunere albă ușor opacă în zona de conținut. Apoi vom folosi după element pentru a afișa un gif de încărcare animat în caseta noastră. Când această clasă este adăugată la secțiunea noastră de conținut, va apărea ca și cum se va încărca ceva.
În acest moment, dacă introduceți ceva în câmpul de introducere și trimiteți formularul, se va afișa o stare de încărcare și veți fi blocați.
Înainte de a trimite o solicitare API-ului iTunes, asigurați-vă că datele introduse de utilizator sunt corecte.
Deci ce anume constituie date corecte? Ei bine, dacă ne uităm la documentația API-ului iTunes, există câteva moduri diferite de a obține conținut. O modalitate este de a face o căutare bazată pe termeni-cheie. Dar ceea ce vom face în schimb se numește "căutare". Din docs:
De asemenea, puteți crea o solicitare de căutare pentru a căuta conținut în magazine pe baza ID-ului iTunes
Acesta oferă câteva exemple, cum ar fi căutarea aplicației Yelp Software de către ID-ul iTunes: https://itunes.apple.com/lookup?id=284910350. Observați că numărul de identificare al aplicației este ceea ce este distribuit între aceste adrese URL. De asta vom avea nevoie de la utilizator.
Din perspectiva UX, solicitarea unui identificator pentru o aplicație din magazinul de aplicații s-ar putea dovedi a fi puțin dificilă (mai ales pentru începători). Deci, în loc să îi instruim pe oameni cum să obțină ID-ul unei aplicații, vom cere linkul magazinului din aplicație. Toată lumea știe cum să copieze și să lipsească legături! Linkurile pentru aplicații sunt disponibile oricui prin simpla copiere a acestora de pe pagina aplicației individuale din magazinul de aplicații (în iTunes, pe web sau în magazinul de aplicații Mac).
Deci, odată ce utilizatorul introduce o legătură, trebuie să îl validăm:
http: // itunes Pentru a face acest lucru, vom crea o funcție validată în interiorul nostru gimmie variabilă și executați-o pe formularul de prezentare a ascultătorilor evenimentului.
"javascript var Gimmie = / * codul nostru anterior aici * / userInput:", userInputIsValid: false, appId: ", validate: function (input) // valida se intampla aici
Gimmie. $ Form.on ('trimite', funcția (e) / * codul nostru anterior aici / Gimmie.userInput = $ (acest) .find ("intrare"). Val (); Gimmie.validate (); dacă (Gimmie.userInputIsValid) / face cerere API / altceva / arunca o eroare * /); "
Rețineți ce facem în codul de mai sus:
gimmie userInput este un șir și este setat ca intrare de la utilizatoruserInputIsValid este un boolean care va fi adevărat sau fals în funcție de faptul dacă intrarea de la utilizator este validă (vom scrie acele teste într-un moment)APPID este un șir de cifre care vor fi extrase din userInput dacă este validvalida este o funcție în care vom valida intrarea utilizatorului când suntem invitațiGimmie.userInput la valoarea câmpului de intrare al formularuluiGimmie.validate () Gimmie.validate va determina), atunci vom proceda și vom face o cerere API iTunes. Dacă nu este validă, vom afișa o eroare informând utilizatorul că datele pe care le-au introdus nu sunt corecte.Acum, să scriem codul care validează dacă intrarea utilizatorului este corectă sau nu. Rețineți că în HTML vom seta tipul de intrare în url . Aceasta înseamnă că unele browsere vor efectua în mod nativ un anumit tip de validare pe acea intrare, cu toate acestea nu vor fi consecvente sau uniforme între browsere. În unele browsere, nu va funcționa nici măcar. Deci, dacă utilizatorul tip "blah", browser-ul va accepta și formularul va trimite. În alte browsere, acestea vor trebui cel puțin să introducă ceva care începe cu "http: //" înainte ca browserul să le permită să trimită formularul. Dar ceea ce dorim este un URL care începe cu "http: // itunes", așa că vom rezolva problema în JavaScript.
javascript var Gimmie = / * codul nostru anterior * / validate: function () // Utilizați regex pentru a testa dacă intrarea este validă. Este valabil dacă: // 1. Se începe cu 'http: // itunes' // 2. Are '/ id' urmat de cifre în șir undeva var regUrl = / ^ (http | https): \ / \ itunes /; var regId = / \ / id (\ d +) / i; dacă (regUrl.test (this.userInput) && regId.test (this.userInput)) this.userInputIsValid = true; var id = regId.exec (acest.userInput); this.appId = id [1]; altfel this.userInputIsValid = false; this.appId = ";
Aici folosim expresii regulate pentru a testa dacă intrarea corespunde condițiilor noastre. Hai să trecem prin asta cu puțin mai multe detalii:
javascript var regUrl = / ^ (http | https): \ / \ / itunes / i; var regId = / \ / id (\ d +) / i;
Acestea sunt cele două literali de expresie obișnuită pe care le definim (citiți mai multe despre expresiile regulate). Iată un scurt rezumat al acestor expresii regulate:
regUrl este literalul regex pentru a determina dacă intrarea utilizatorului este sau nu o adresă URL care începe cu "http: // itunes" / ^ spune "porniți regexul și începeți să priviți la începutul șirului"(Http | https): spune "căutați fie" http ", fie" https "urmat de un punct și virgulă": ""\ / \ / spune că "căutați" // "" (pentru că un slash înainte este un caracter special în expresii regulate, cum ar fi modul în care îl folosim la începutul regexului, trebuie să folosim reversul înainte de slash-ul înainte pentru a spune regexul nu pentru a interpreta slash-ul înainte ca un caracter special, ci mai degrabă doar ca o lunetă în față)itunes / i spune "căutați" itunes "apoi se încheie regex" în timp ce eu la sfârșit indică faptul că potrivirea ar trebui făcută cu insensibilitate la caz (deoarece cineva ar putea lipi 'HTTP: // ITUNES' care este încă valabil)
regId este literalul regex pentru a determina dacă intrarea utilizatorului are sau nu un ID de cifre care se potrivesc cu modelul de URL al liniei de link-uri pentru magazinul iTunes. Toate link-urile legale de magazin iTunes vor avea / id în ea, urmată de o serie de numere. / \ / Id spune "porniți regexul și arătați oriunde în șir pentru '/ id'" (a se vedea exemplul precedent pentru descrierea scurgerii din spate)(\ D +) spune "căutați o secvență de cifre (de la 0 la 9) de 1 sau mai multe ori și să le captați". Parantezele indică faptul că dorim să ne amintim ce potrivire este definită în interiorul, adică în cazul nostru ne amintim succesiunea de cifre care reprezintă ID-ul aplicației. / d este un caracter special în regex indicând că ne dorim cifre [0-9] și + spune meciul cu [0-9] de 1 sau de mai multe ori./ i spune "termina regex" și eu indică potrivirea insensibilă la litere mici (de la o adresă URL cu / ID938491 este încă valabilă)Următorul fragment al codului nostru arată astfel:
javascript dacă (regUrl.test (this.userInput) && regId.test (this.userInput)) this.userInputIsValid = true; var id = regId.exec (acest.userInput); this.appId = id [1]; altfel this.userInputIsValid = false; this.appId = ";
.Test() metoda pe o literă regex caută o potrivire dintr-un șir specificat și returnează adevărat sau fals, în funcție de tipul de potrivire specificat. Deci, în cazul nostru, vom testa intrarea utilizatorului față de ambele regUrl și regID pentru a vă asigura că intrarea începe cu "http: // itunes" și are "/ id" urmată de un număr de cifre.
Dacă ambele teste revin la adevărat, setăm userInputIsValid flag to true și apoi extragem ID-ul din URL și îl setăm ca APPID. Pentru a face acest lucru, conducem .exec () pe intrare. Aceasta va întoarce o serie de două elemente: una potrivită întregului regex și unul care se potrivește doar cu șirul de numere după / id (pentru că am folosit paranteza în regex (/ D +) pentru a spune "amintiți-vă ce se captează aici"). Deci, ca un exemplu, .exec () metoda ar întoarce ceva de genul ["/ id12345", "12345"] și vrem doar al doilea element din matrice, așa că am stabilit APPID la asta.
Dacă ambele teste întorc false, am setat userInputIsValid la fals și la APPID la un șir gol.
Acum avem tot ce avem nevoie pentru a determina dacă intrarea utilizatorului este validă. Așa că putem continua cu restul scenariului nostru.
Acum suntem într-un moment în scenariul nostru unde putem determina dacă intrarea utilizatorului este sau nu ceea ce avem nevoie. Așa că am rămas cu acest lucru:
javascript dacă (Gimmie.userInputIsValid) / * face cererea API * / altceva / * aruncă o eroare * /
Pentru moment, vom aborda partea "aruncă o eroare". Deoarece vor exista alte locuri în execuția scriptului nostru în cazul în care pot apărea erori, vom face o funcție de eroare generică care va afișa o eroare utilizatorului, în funcție de ce a mers prost. Dacă vă aduceți aminte, am creat ceea ce ar arăta în Sketch:
Observați cum starea noastră de eroare are în mod esențial două elemente: un "antet" care este text îngroșat și un "corp" care este textul setat regulat. Așadar vom crea o funcție de eroare generică care acceptă acestea. "Antetul" va indica în general eroarea, iar "corpul" va descrie modul de remediere a erorii. Deci, în acest caz special, dacă intrarea de la utilizator este nevalidă, trebuie să îi informăm cu privire la tipul de intrare corespunzător. Deci, să creăm o funcție generică care poate afișa erori pe baza textului pe care îl transmitem:
javascript dacă (Gimmie.userInputIsValid) / * face cerere API * / altceva Gimmie.throwError ("Link nevalid", "Trebuie să trimiteți un link standard al magazinului iTunes cu un ID, adică.
https://itunes.apple.com/us/app/twitter/id333903271?mt = 8 ');
Aici, numim funcția Gimmie.throwError () și transmiteți-i doi parametri: textul "antet" și textul "corp". Pentru că afișăm doar cod HTML, putem trece elemente HTML în interiorul parametrilor, dacă dorim. În acest caz, în "corp" vom trece într-un exemplu iTunes magazin link-ul și vom evidenția id / parte cu eticheta de accent () pentru a indica utilizatorului, "hei, avem nevoie de un link la magazinul iTunes și asigurați-vă că are un ID în el".
Putem seta CSS pentru a evidenția ceea ce este înfășurat tag-uri, precum și oferind o stare de eroare o culoare:
css .content - eroare culoare: # 196E76; .content em font-style: normal; fundal-culoare: lightyellow;
Acum, vom crea throwError funcția în gimmie obiect:
"javascript var Gimmie = / * codul anterior aici * / throwError: funcție (antet, text) this. $ content .html ('
"+ header +" '+ text +'
') .addClass ("conținut-eroare");this.toggleLoading (); "
Observați că ne apucăm acest lucru. conținut $. Acest lucru este același lucru cu a face $ ( 'Conținut'.) dar am salvat acea selecție ca variabilă în gimmie obiect, deoarece vom folosi mai mult decât o dată. Așa că o facem referitor la asta acest lucru. conținut $. Acum setăm conținutul HTML al conținut $ element în textul în care am trecut, textul "antet" fiind boldat. Apoi adăugăm o clasă de conținut - eroare la elementul nostru de conținut, astfel încât să putem modela greșelile cum ne dorim. În cele din urmă, conducem toggleLoading () funcția de gimmie pentru a elimina clasa de încărcare și a opri afișarea gifului de încărcare.
În acest moment, dacă tastați o adresă URL incorectă, cum ar fi http://google.com, sau dacă introduceți un iTunes URl adecvat, care nu are un ID asemănător https://itunes.apple.com/us/app/twitter/ ar trebui să vedeți un mesaj de eroare afișat:
Pentru a îmbunătăți formatul nostru puțin, să adăugăm o animație frumoasă "pop" care rulează atunci când apare o eroare (în browserele acceptate). Pentru a face acest lucru, vom adăuga / elimina o clasă CSS care conține o animație. Deci, în fișierul nostru CSS, hai să facem:
"css.content-error-pop -webkit-animație: pop .333s; -moz-animație: pop .333s; -o-animație: pop .333s; animație: pop .333s;
@ -webkit-transformă: scară (1.075); 100% -webkit-transform: scară (1);
@ -moz-frame-uri cheie 0% -webkit-transform: scale (1); 50% -webkit-transform: scale (1.075);
@ -webkit-transform: scale (1.075); 100% -webkit-transform: scară (1);
@ 100% -webkit-transform: scară (1); "100% -webkit-transform:
Acest lucru va face ca zona de conținut să scadă în sus și în jos în dimensiune, făcând-o "pop" atunci când apare o eroare. Acum trebuie doar să adăugăm / eliminăm această clasă cu JavaScript. Deci înapoi în nostru throwError funcţie:
"javascript throwError: funcție (antet, text) // Eliminați clasa de animație. $ content.removeClass ('content-error-pop');
// Trigger reflow // https://css-tricks.com/restart-css-animation/ acest conținut $ [0] .offsetWidth = acest. $ Content [0] .offsetWidth; // Adăugați clase și conținut. $ Content .html ('"+ header +" '+ text +'
') .addClass ("conținut - conținut de eroare - eroare-pop"); this.toggleLoading (); “ Aici eliminăm mai întâi clasa, apoi declanșăm un "reflow" pentru a ne asigura că animația începe din nou când adăugăm clasa în pasul următor (împreună cu regulat conținut - eroare clasă). Acum avem o animatie pop frumoasa si pe starea noastra de eroare:
Ne apropiem de terminarea acum. Am verificat dacă intrarea de la utilizator este corectă și am oferit o modalitate de a afișa erori, deci acum trebuie doar să facem cererea noastră API.
Vom face asta în interiorul nostru dacă() instrucțiune care validează intrarea utilizatorului.
javascript dacă (Gimmie.userInputIsValid) $ .ajax (url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId, dataType: 'JSONP') // la terminare) .fail (funcția (date) // atunci când cererea nu reușește)); altceva / * celălalt cod aici * /
După cum puteți vedea din codul de mai sus, am setat o solicitare AJAX la iTunes API. Așa cum vă amintiți mai devreme, API-ul iTunes are o adresă URL "de căutare" pe care o putem lovi pentru a obține date înapoi. Urmează acest format: https://itunes.apple.com/lookup?id= urmată de identificarea chestiei pe care doriți să o găsiți. API oferă un exemplu de căutare a aplicațiilor software utilizând aplicația Yelp: https://itunes.apple.com/lookup?id=284910350. Dacă accesați respectiva adresă URL în browserul dvs., veți vedea o problemă de JSON:
Dacă rulați că printr-un linter, cum ar fi scame JSON, rezultatele vor fi formatate și vor începe să facă mult mai mult sens:
Dacă vă uitați la documentația API, veți observa că API oferă rezultate pentru tot felul de conținut din magazinul iTunes, totul de la muzică la filme la aplicații. Acest lucru este avantajos pentru noi, deoarece înseamnă că putem să luăm opere de artă nu numai pentru aplicațiile iOS, ci și pentru aplicațiile Mac! Aplicațiile Mac utilizează același tip de structură de adrese URL ca aplicațiile iOS. De exemplu, Final Cut Pro are un link de https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12. Rețineți că adresa URL începe cu https: // itunes și are / id424389933, care este exact ceea ce avem nevoie!
Folosind funcția de eroare de mai devreme, să aruncăm o eroare dacă / când cererea noastră API eșuează:
javascript dacă (Gimmie.userInputIsValid) $ .ajax (url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId, dataType: 'JSONP') // finalizat) .fail (funcția (date) Gimmie.throwError ('iTunes API Error', 'A apărut o eroare la preluarea informațiilor. Verificați URL-ul iTunes sau încercați din nou mai târziu. altceva / * celălalt cod aici * /
Pe măsură ce am abstracționat metoda noastră de afișare a erorilor într-o singură funcție, afișarea unei alte erori este ușoară!
Acum, să ne îngrijorăm ce se întâmplă când cererea se încheie cu succes:
javascript $ .ajax (/ * alt cod aici * /) .done (functie (raspuns)) // Primeste primul raspuns si log it var = response.results [0]; console.log (response); ) .fail (funcția (date) / * alt cod aici * /);
Rețineți că primim răspunsul și logăm primul rezultat la consola. Dacă vă uitați la o cerere API de exemplu, veți vedea că la cel mai înalt nivel al obiectului JSON, veți obține RESULTCOUNT care vă spune câte rezultate există (într-o căutare ar trebui să existe doar una) și apoi rezultate care este o matrice (cu un singur obiect în acest caz) care reprezintă rezultatul.
Așadar, am setat răspunsul la primul element în rezultate și apoi l-am înregistrat în consola. Dacă deschideți aplicația noastră mică în browser și introduceți o adresă URL (de exemplu, adresa URL Yelp https://itunes.apple.com/lookup?id=284910350) veți vedea că UI este blocat în starea de încărcare, dar dacă vă uitați la instrumentele de dezvoltare și mergeți la consola, veți vedea răspunsul API înregistrat. Acum putem accesa oricare dintre aceste proprietăți în JavaScript!
După cum puteți vedea, API-ul returnează o grămadă de informații despre aplicație: numele, dezvoltatorul, descrierea, genul, prețul și multe altele! Chiar avem nevoie doar de câteva lucruri, cum ar fi icoana aplicației. Deci, vom verifica doar să ne asigurăm că cererea noastră conține informațiile de care avem nevoie.
"javascript $ .ajax (/ * alt cod aici * /) .done (functie (răspuns)) // Primeste primul raspuns si log it var response = response.results [0]; console.log (reply);
// Verificați dacă cererea este validă și conține informațiile pe care le dorim // Dacă este cazul, redați-o. În caz contrar, aruncați o eroare dacă (răspuns && response.artworkUrl512! = Null) Gimmie.render (răspuns); altceva Gimmie.throwError ("Răspuns nevalid", "Solicitarea pe care ați făcut-o pare să nu aibă o pictogramă asociată.
Încearcă o altă adresă URL. ); ) .fail (funcția (date) / * alt cod aici * /); " Aici verificăm să vă asigurați raspuns există și verificăm să ne asigurăm response.artworkUrl512 face parte din acest răspuns. artworkUrl512 este cheia pe care API o oferă un link către pictograma aplicației de dimensiune completă. Dacă aceste lucruri sunt prezente, vom afișa pictograma aplicației pe pagină. Pentru aceasta, avem o altă funcție numită face pe care o vom scrie într-un moment. Dacă dintr-un anumit motiv lipsesc lucrurile de care avem nevoie, aruncăm o altă eroare cu funcția noastră plăcută pe care am făcut-o deja.
Acum că avem API returnând datele pe care le dorim, să afișăm rezultatele pe pagină. Odată ce știm că avem tot ce avem nevoie de API, sunăm Gimmie.render (răspuns) și transmite răspunsul API la acesta, care este doar un obiect al perechilor cheie / valoare. Deci, înapoi în nostru gimmie obiect, să creați face funcţie:
'+ response.trackName +'javascript var Gimmie = / * celălalt cod aici * / render: funcție (răspuns) var icon = new Image (); icon.src = answer.artworkUrl512; icon.onload = funcția () Gimmie. $ content .html (this) .append ('
Iată ce facem în acest cod:
icoană și utilizați Imagine() constructor care creează în principiu un HTMLImageElement. Gândește-te cum ar fi crearea unui ![]()
src atributul imaginii noastre folosind icon.src metoda disponibila pentru utilizarea pentru ca am folosit Imagine() constructor. Am setat sursa imaginii la artworkUrl512 a răspunsului nostru. Acest lucru va face ca browserul să înceapă preluarea imaginii la acea adresă URL specificată.icon.onload pentru a le spune browserului "când ați terminat de preluat imaginea, faceți acest lucru ...". Aceasta este o modalitate prin care browserul să preia o resursă de imagine și apoi să nu o pună în DOM înainte de a fi descărcată.icon.onload am setat codul HTML al Cuprins $ la imaginea pe care tocmai am recuperat-o. Apoi, putem adăuga mai multe informații la acea zonă de conținut dacă vrem. În acest exemplu, apuc trackName din răspunsul nostru API pentru a afișa numele aplicației împreună cu pictograma sa.toggleLoading pentru că am terminat încărcarea tuturor!Încercați să rulați acest lucru în browserul dvs. acum și ar trebui să vedeți o frumoasă pictogramă care apare! De exemplu, încercați URL-ul Yelp https://itunes.apple.com/us/app/yelp/id284910350?mt=8
Încercați-l cu un URL de aplicație Mac, cum ar fi Final Cut Pro https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12
Observați că pictograma iOS nu este rotunjită. După cum am menționat mai devreme, majoritatea icoanelor iOS nu sunt proiectate cu colțuri rotunjite. Acestea sunt aplicate la nivelul sistemului de operare. Pentru pictogramele iOS, va trebui să aplicăm masca creată în Sketch. Deci, dacă intri în Sketch și exportim masca pe care am creat-o ca o imagine, vom încărca asta în browser când încărcăm pictograma:
"javascript var Gimmie = render: funcția (răspuns) var icon = nou Imagine (); icon.src = answer.artworkUrl512; icon.onload = function () Gimmie.
'+ response.trackName +' Dimensiunile actuale ale pictogramelor: '+ this.naturalWidth +' × '+ this.naturalHeight +'
') .removeClass ("conținut-eroare"); Gimmie.toggleLoading ();// Dacă este o pictogramă iOS, încărcați și masca dacă (answer.kind! = 'Mac-software') var mask = new Image (); mask.src = 'activ / img / icon-mask.png'; mask.onload = funcția () Gimmie. $ content.prepend (aceasta); "
Iată ce facem:
Imagine() constructor ca înainte, setați src a imaginii în care ne-am salvat masca și apoi o prefixăm la zona noastră de conținut odată onload incendii eveniment pentru imagine.Acum trebuie doar să adăugăm câteva stiluri pentru poziționarea măștii pe pictogramă:
css .content img [src * = "icon-mask.png"] poziția: absolută; stânga: 0; top: 0;
Asta e! Dacă introduceți din nou adresa URL Yelp, de această dată va apărea cu colțuri rotunjite!
A fost o călătorie destul de mare și sper că ați învățat multe din acest tutorial! Am acoperit crearea de fire și cadre pentru aplicația noastră și pentru diferitele sale state. De asemenea, am scris scrisori HTML, CSS și Javascript pentru o aplicație web care interfețează cu un API terță parte.
Sperăm că ați înțeles câteva aspecte de bază ale interfeței cu un API. Ați învățat cum să trageți dinamic conținutul și materialele dintr-un API și să le transformați într-o pagină web. Cu aceste cunoștințe de bază puteți trece acum la crearea de aplicații web mai personalizate, adaptate intereselor dvs..
Iată o listă cu câteva API-uri:
