Share
Cosa starai creandoAbbiamo la nostra piccola app che sembra proprio come vogliamo, ma in realtà non fa ancora nulla. Quindi, lavoriamo sull'aggiunta di alcuni JavaScript per rendere l'app interattiva.
Questa parte della serie richiederà una certa concentrazione da parte tua, ma anche se non sei uno sviluppatore JavaScript esperto, ti prometto che andrai via dopo aver appreso alcune preziose abilità.
In primo luogo, creeremo il nostro file javascript attività / js / main.js e al suo interno creeremo un oggetto chiamato Gimmie (dal nome della nostra app). Qui è dove memorizzeremo le variabili e le funzioni di cui abbiamo bisogno in modo che non siano sul finestra oggetto. Lo inseriremo proprio accanto alla chiamata "document ready" di jQuery che useremo anche.
"javascript var Gimmie = $ content: $ ('. content'), $ form: $ ('form'),;
$ (document) .ready (function () // Al caricamento della pagina, esegui questo ...); "
Si noti che abbiamo aggiunto alcune variabili nel nostro Gimmie oggetto: $ content, modulo $. Questi sono oggetti jQuery, quindi li chiamiamo con a $ di fronte per ricordarcelo. Poiché sono nodi DOM specifici a cui faremo riferimento più di una volta, li memorizzeremo in variabili per un utilizzo più rapido e futuro.
La prima cosa che dobbiamo gestire è quando l'utente inserisce qualcosa nel nostro modulo e lo invia. Quindi, all'interno del nostro "documento pronto", allegheremo un evento listener al nostro modulo. Potremmo fare $ ( 'Forma'). On () ma poiché abbiamo già memorizzato l'elemento del modulo in una variabile, faremo semplicemente riferimento a ciò, facendo invece Gimmie. $ Form.on (). Quindi eviteremo l'azione modulo di default (quindi la pagina non si aggiorna):
javascript $ (document) .ready (function () Gimmie. $ form.on ('submit', function (e) e.preventDefault (); // Fai più cose qui ...););
Ora, vogliamo mostrare uno stato di "caricamento" quando un utente invia il modulo. In questo modo sanno che sta succedendo qualcosa. Se ricordi, abbiamo progettato questo in Sketch:
Per realizzare ciò, creeremo una funzione all'interno della nostra Gimmie oggetto chiamato toggleLoading e possiamo eseguirlo quando l'utente invia un modulo chiamando Gimmie.toggleLoading () all'interno del nostro listener di submission di form. L'abbiamo chiamato toggleLoading perché cambieremo lo stato di caricamento corrente nell'interfaccia utente, cioè lo eseguiamo una volta su invio, quindi eseguiremo un po 'di codice, e quando avremo finito lo eseguiremo di nuovo per rimuovere lo stato di caricamento.
"javascript var Gimmie = / * il nostro altro codice qui * /
Accentsconagua
toggleLoading: function () // Attiva / disattiva l'indicatore di caricamento. $ content.toggleClass ('content - loading'); // Attiva / disattiva il pulsante di invio in modo da non ottenere due invii // http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery this. $ Form.find ('button') .prop ('disabled', function (i, v) return! v;); , $ (document) .ready (function () Gimmie. $ form.on ('submit', function (e) e.preventDefault (); Gimmie.toggleLoading (); // chiama la funzione di caricamento) ;); " Si noti che stiamo attivando una classe su .soddisfare elemento chiamato contenuti - carico. Abbiamo bisogno di creare alcuni stili CSS intorno a questo. Quindi, nel nostro file CSS, aggiungiamo:
"css .content-loading: before content:"; posizione: assoluta; inizio: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; sfondo: #fff; opacità: .9; z-index: 10;
.caricamento del contenuto: dopo content: url ('... /img/loading.gif'); posizione: assoluta; a sinistra: 50%; inizio: 3em; margin-left: -16px; margin-top: -16px; z-index: 11; "
Qui usiamo pseudo elementi per creare uno stato di caricamento nella nostra area di contenuto. Nostro prima elemento viene utilizzato per creare una sovrapposizione bianca leggermente opaca nell'area del contenuto. Quindi usiamo il dopo elemento per visualizzare una gif di caricamento animata all'interno della nostra scatola. Quando questa classe viene aggiunta alla nostra sezione dei contenuti, apparirà come se qualcosa fosse in fase di caricamento.
A questo punto, se inserisci qualcosa nel campo di inserimento e invii il modulo, verrà visualizzato uno stato di caricamento e rimarrai bloccato.
Prima di inviare una richiesta all'API di iTunes, assicurati che i dati inseriti dall'utente siano corretti.
Quindi, cosa costituisce esattamente i dati corretti? Bene, se consideriamo la documentazione dell'API di iTunes ci sono diversi modi per ottenere contenuti. Un modo è fare una ricerca basata su termini chiave. Ma quello che faremo è chiamato "ricerca". Dai documenti:
Puoi anche creare una richiesta di ricerca per cercare contenuti nei negozi basati su iTunes ID
Fornisce quindi alcuni esempi, come la ricerca dell'applicazione Software di Yelp tramite il suo ID iTunes: https://itunes.apple.com/lookup?id=284910350. Si noti che il numero ID dell'applicazione è ciò che è condiviso tra questi URL. Questo è ciò di cui abbiamo bisogno dall'utente.
Da una prospettiva UX, chiedere un identificativo a un'app nell'app store potrebbe rivelarsi un po 'difficile (soprattutto per i principianti). Quindi, invece di istruire le persone su come ottenere l'ID di un'app, ti chiederemo il link all'archivio dell'app. Tutti sanno come copiare e incollare i collegamenti! I collegamenti delle app sono prontamente disponibili a chiunque semplicemente copiandoli dalla pagina della singola app nell'app store (in iTunes, sul Web o nel Mac App Store).
Quindi, una volta che l'utente inserisce un link, è necessario convalidarlo:
http: // itunes Per fare ciò, creeremo una funzione di convalida all'interno del nostro Gimmie variabile ed eseguirlo sul nostro modulo invia listener di eventi.
"javascript var Gimmie = / * il nostro codice precedente qui * / userInput:", userInputIsValid: false, appId: ", validate: function (input) // convalida avviene qui,
Gimmie. $ Form.on ('submit', function (e) / * il nostro codice precedente qui / Gimmie.userInput = $ (this) .find ('input'). Val (); Gimmie.validate (); if (Gimmie.userInputIsValid) / fai una richiesta API / altro / genera un errore * /); "
Nota cosa stiamo facendo nel codice qui sopra:
Gimmie userInput è una stringa ed è impostata come input dall'utenteuserInputIsValid è un valore booleano che sarà vero o falso a seconda che l'input dell'utente sia valido (scriveremo quei test in un momento)appId è una stringa di cifre da cui verrà estratto userInput se è validoconvalidare è una funzione in cui verrà convalidato l'input dell'utente quando chiamatoGimmie.userInput al valore del campo di input del moduloGimmie.validate () Gimmie.validate determinerà) quindi procederemo e faremo una richiesta di iTunes API. Se non è valido, verrà visualizzato un errore che informa l'utente che i dati inseriti non sono corretti.Ora scriviamo il codice che convalida se l'input dell'utente è corretto o meno. Nota che nel nostro HTML impostiamo il nostro tipo di input in url . Ciò significa che alcuni browser eseguiranno nativamente qualche tipo di convalida su quell'input, tuttavia non sarà coerente o uniforme tra i browser. In alcuni browser, non funzionerà nemmeno. Quindi se l'utente digita "blah", il browser lo accetterà e il modulo verrà inviato. In altri browser, dovranno almeno digitare qualcosa che inizi con "http: //" prima che il browser possa consentire loro di inviare il modulo. Ma quello che vogliamo è un URL che inizia con "http: // itunes", quindi lo gestiremo in JavaScript.
javascript var Gimmie = / * il nostro codice precedente * / validate: function () // Usa regex per verificare se l'input è valido. È valido se: // 1. Inizia con 'http: // itunes' // 2. Ha '/ id' seguito da cifre nella stringa da qualche parte var regUrl = / ^ (http | https): \ / \ / itunes /; var regId = / \ / id (\ d +) / i; if (regUrl.test (this.userInput) && regId.test (this.userInput)) this.userInputIsValid = true; var id = regId.exec (this.userInput); this.appId = id [1]; else this.userInputIsValid = false; this.appId = ";
Qui stiamo usando le espressioni regolari per verificare se l'input soddisfa le nostre condizioni. Esaminiamo questo aspetto in modo più dettagliato:
javascript var regUrl = / ^ (http | https): \ / \ / itunes / i; var regId = / \ / id (\ d +) / i;
Questi sono i due valori letterali di espressioni regolari che definiamo (leggi di più sulle espressioni regolari). Ecco un breve riepilogo di ciò che stanno facendo quelle espressioni regolari:
regurl è la regex letterale per determinare se l'input dell'utente è un URL che inizia con "http: // itunes" / ^ dice "inizia la regex e inizia a guardare l'inizio della stringa"(Http | https): dice "cerca" http "o" https "seguito da un punto e virgola": ""\ / \ / dice "cerca per" // "" (perché una barra in avanti è un carattere speciale nelle espressioni regolari, come il modo in cui la usiamo all'inizio della regex, dobbiamo usare la barra rovesciata prima della barra in avanti per dire alla regex non interpretare la barra in avanti come un carattere speciale, ma piuttosto come una barra in avanti)itunes / i dice "cerca" itunes ", quindi termina la regex" mentre il io alla fine indica che la corrispondenza deve essere eseguita senza distinzione tra maiuscole e minuscole (poiché qualcuno potrebbe incollare "HTTP: // ITUNES" che è ancora valido)
RegID è la regex letterale per determinare se l'input dell'utente ha o meno un ID di cifre corrispondenti al modello di URL del link di iTunes Store. Tutti i link validi per l'iTunes Store avranno / id in esso, seguito da una sequenza di numeri. / \ / Id dice "avvia la regex e guarda ovunque nella stringa per '/ id'" (vedi esempio precedente per la descrizione di escape della barra in avanti)(\ D +) dice "cerca una sequenza di cifre (da 0 a 9) 1 o più volte e catturale". Le parentesi indicano che vogliamo ricordare qualsiasi corrispondenza è definita all'interno, vale a dire nel nostro caso ricordiamo la sequenza di cifre che rappresenta l'ID dell'app. Il / d è un carattere speciale nella regex che indica che vogliamo le cifre [0-9] e il + dice abbinare quelli [0-9] 1 o più volte./io dice "termina la regex" e il io indica la corrispondenza senza distinzione tra maiuscole e minuscole (dal momento che un URL con / ID938491 è ancora valido)Il prossimo bit del nostro codice assomiglia a questo:
javascript if (regUrl.test (this.userInput) && regId.test (this.userInput)) this.userInputIsValid = true; var id = regId.exec (this.userInput); this.appId = id [1]; else this.userInputIsValid = false; this.appId = ";
Il .test() il metodo su un regex letterale cerca una corrispondenza da una stringa specificata e restituisce true o false, a seconda che venga trovata la corrispondenza specificata. Quindi, nel nostro caso, testiamo l'input dell'utente contro entrambi regurl e RegID per garantire che l'input inizi entrambi con "http: // itunes" e abbia "/ id" seguito da un numero di cifre.
Se entrambi i test restituiscono true, impostiamo il userInputIsValid flag su true e quindi estraiamo l'ID dall'URL e lo impostiamo come appId. Per fare questo, eseguiamo il .exec () metodo sull'input. Ciò restituirà un array di due elementi: uno corrispondente all'intera espressione regolare e uno corrispondente alla stringa di numeri successiva / id (questo perché abbiamo usato la parentesi nella regex (/ D +) per dire "ricorda cosa cattura qui"). Quindi, ad esempio, il .exec () il metodo restituirebbe qualcosa di simile ["/ id12345", "12345"] e vogliamo solo il secondo elemento dell'array, quindi abbiamo impostato appId a tale.
Se entrambi i test restituiscono false, impostiamo userInputIsValid al falso e al appId a una stringa vuota.
Ora tutto ciò di cui abbiamo bisogno per determinare se l'input dell'utente è valido è a posto. Quindi possiamo continuare con il resto del nostro script.
In questo momento siamo ora in un punto nel nostro script in cui possiamo determinare se l'input dell'utente è ciò di cui abbiamo bisogno. Quindi abbiamo lasciato questo:
javascript if (Gimmie.userInputIsValid) / * effettua richiesta API * / else / * genera un errore * /
Per ora, gestiremo la parte "lancio di un errore". Poiché ci saranno altri punti nell'esecuzione del nostro script in cui possono verificarsi errori, creeremo una funzione di errore generica che visualizzerà un errore per l'utente, a seconda di cosa è andato storto. Se ricordi, abbiamo progettato come apparirebbe in Sketch:
Si noti come il nostro stato di errore abbia essenzialmente due elementi: una "intestazione" che è in grassetto e un "corpo" che è un normale set di testo. Quindi creeremo una funzione di errore generica che li accetta. L '"intestazione" indicherà generalmente l'errore e il "corpo" descriverà come correggere l'errore. Quindi, in questo caso particolare, se l'input dell'utente non è valido, dobbiamo informarli sul tipo di input corretto. Quindi, creiamo una funzione generica in grado di mostrare gli errori in base al testo che abbiamo passato:
javascript if (Gimmie.userInputIsValid) / * effettua richiesta API * / else Gimmie.throwError ('Link non valido', 'Devi inviare un link standard di iTunes store con un ID, ad es..
https://itunes.apple.com/us/app/twitter/id333903271?mt = 8 ');
Qui, chiamiamo la funzione Gimmie.throwError () e passane due parametri: il testo "header" e il testo "body". Poiché stiamo solo visualizzando HTML, possiamo passare elementi HTML all'interno dei parametri, se lo desideriamo. In questo caso, nel "corpo" passiamo in un esempio di collegamento a un negozio iTunes e evidenziamo il id / parte con il tag emphasis () per aiutare a indicare all'utente, "hey, abbiamo bisogno di un link di iTunes store, e assicurarsi che abbia un ID in esso".
Possiamo impostare il nostro CSS per evidenziare tutto ciò che è racchiuso tag, oltre a dare il nostro stato di errore a un colore:
css .content - error color: # 196E76; .content em stile font: normale; colore di sfondo: lightyellow;
Ora creeremo il throwError funzione nel Gimmie oggetto:
"javascript var Gimmie = / * codice precedente qui * / throwError: function (header, text) this. $ content .html ('
'+ header +' '+ testo +'
') .addClass (' content-error ');this.toggleLoading (); "
Si noti che stiamo afferrando questo. $ content. Questo è lo stesso di fare $ ( 'Contenuti') ma abbiamo salvato quella selezione come variabile nel Gimmie oggetto, dal momento che lo useremo più di una volta. Quindi facciamo riferimento a ciò facendo questo. $ content. Ora impostiamo i contenuti HTML di $ content elemento al testo che abbiamo passato, con il testo "header" in grassetto. Quindi aggiungiamo una classe di contenuti - Errore al nostro elemento di contenuto in questo modo possiamo definire gli errori come desideriamo. Infine, eseguiamo il toggleLoading () funzione di Gimmie per rimuovere la classe di caricamento e interrompere la visualizzazione della gif di caricamento.
A questo punto, se si digita un URL errato come http://google.com, o se si digita un URL URl corretto che non ha un ID simile https://itunes.apple.com/us/app/twitter/ dovresti vedere un messaggio di errore visualizzato:
Per migliorare un po 'la nostra forma, aggiungiamo una piccola animazione "pop" che viene eseguita quando si verifica un errore (nei browser supportati). Per fare ciò, aggiungere / rimuovere una classe CSS che contiene un'animazione. Quindi, nel nostro file CSS, facciamo:
"css .content-error-pop -webkit-animation: pop .333s; -moz-animation: pop .333s; -o-animation: pop .333s; animation: pop .333s;
@ -webkit-keyframes pop 0% -webkit-transform: scale (1); 50% -webkit-transform: scale (1.075); 100% -webkit-transform: scale (1);
@ -moz-keyframes pop 0% -webkit-transform: scale (1); 50% -webkit-transform: scale (1.075); 100% -webkit-transform: scale (1);
@ -o-keyframes pop 0% -webkit-transform: scale (1); 50% -webkit-transform: scale (1.075); 100% -webkit-transform: scale (1);
@keyframes pop 0% -webkit-transform: scale (1); 50% -webkit-transform: scale (1.075); 100% -webkit-transform: scale (1); "
Ciò farà sì che l'area del contenuto si ingrandisca e riduca di dimensioni, rendendola "pop" quando si verifica un errore. Ora dobbiamo solo aggiungere / rimuovere quella classe con JavaScript. Quindi torna nel nostro throwError funzione:
"javascript throwError: function (header, text) // Rimuovi questa classe di animazione. $ content.removeClass ('content-error-pop');
// Trigger reflow // https://css-tricks.com/restart-css-animation/ this. $ Content [0] .offsetWidth = this. $ Content [0] .offsetWidth; // Aggiungi classi e contenuto this. $ Content .html (''+ header +' '+ testo +'
') .addClass (' content - error content - error-pop '); this.toggleLoading (); ," Qui rimuoviamo prima la classe, quindi attiviamo un "reflow" per garantire che l'animazione ricominci quando aggiungiamo la classe nel passaggio successivo (insieme al normale contenuti - Errore classe). Ora abbiamo anche una bella animazione pop sul nostro stato di errore:
Ci stiamo avvicinando alla fine ora. Abbiamo verificato che l'input dell'utente sia corretto e abbiamo fornito un modo per visualizzare gli errori, quindi ora dobbiamo solo fare la nostra richiesta API.
Lo faremo all'interno del nostro Se() affermazione che convalida l'input dell'utente.
javascript if (Gimmie.userInputIsValid) $ .ajax (url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId, dataType: 'JSONP') .done (funzione (risposta) // quando finito) .fail (funzione (dati) // quando la richiesta non riesce); else / * il nostro altro codice qui * /
Come puoi vedere dal codice sopra, abbiamo impostato una richiesta AJAX per l'API di iTunes. Come forse ricorderai prima, l'API di iTunes ha un URL di "ricerca" che possiamo colpire per recuperare i dati. Segue questo formato: https://itunes.apple.com/lookup?id= seguito dall'ID della cosa che vuoi trovare. L'API fornisce un esempio di una ricerca di applicazioni software utilizzando l'app di Yelp: https://itunes.apple.com/lookup?id=284910350. Se vai a quell'URL nel tuo browser, vedrai un pasticcio di JSON:
Se lo esegui attraverso un linter, come JSON Lint, i risultati verranno formattati e inizieranno ad avere molto più senso:
Se osservi la documentazione dell'API, noterai che l'API fornisce risultati per tutti i tipi di contenuti nello store iTunes, dalla musica ai film alle app. Questo è vantaggioso per noi perché significa che possiamo acquisire grafica iconica non solo per le app iOS, ma anche per le app Mac! Le app Mac utilizzano lo stesso tipo di struttura URL delle app iOS. Ad esempio, Final Cut Pro ha un link di https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12. Si noti che l'URL inizia con https: // itunes e ha / id424389933, che è proprio quello di cui abbiamo bisogno!
Usando la nostra funzione di errore di prima, gettiamo un errore per se / quando la nostra richiesta API fallisce:
javascript if (Gimmie.userInputIsValid) $ .ajax (url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId, dataType: 'JSONP') .done (funzione (risposta) // when finished) .fail (function (data) Gimmie.throwError ('Errore dell'API di iTunes', 'Si è verificato un errore nel recupero delle informazioni. Controlla l'URL di iTunes o riprova più tardi.');); else / * il nostro altro codice qui * /
Come abbiamo astratto il nostro metodo per la visualizzazione degli errori in una singola funzione, la visualizzazione di un altro errore è facile!
Ora preoccupiamoci di cosa succede quando la richiesta viene completata correttamente:
javascript $ .ajax (/ * altro codice qui * /) .done (function (response) // Ottieni la prima risposta e loggala var response = response.results [0]; console.log (response); ) .fail (funzione (dati) / * altro codice qui * /);
Si noti qui che stiamo ottenendo la risposta e registrando il primo risultato sulla console. Se osservi una richiesta API di esempio, vedrai che si trova al livello più alto dell'oggetto JSON resultCount che ti dice quanti risultati ci sono (in una ricerca ci dovrebbe essere solo uno) e poi risultati che è un array (con un singolo oggetto in questo caso) che rappresenta il risultato.
Quindi, impostiamo la risposta al primo elemento nei risultati e quindi lo registriamo alla console. Se apri la nostra piccola app nel browser e inserisci un URL (ad esempio, l'URL di Yelp https://itunes.apple.com/lookup?id=284910350) vedrai l'interfaccia utente bloccata nello stato di caricamento, ma se guardi gli strumenti di sviluppo e vai alla console, vedrai la nostra risposta API registrata. Ora possiamo accedere a qualsiasi di queste proprietà in JavaScript!
Come puoi vedere, l'API restituisce una serie di informazioni sull'app: nome, sviluppatore, descrizione, genere, prezzo e molto altro! Abbiamo davvero bisogno solo di alcune di queste cose, come l'icona dell'app. Quindi, controlleremo per assicurarci che la nostra richiesta contenga le informazioni di cui abbiamo bisogno.
"javascript $ .ajax (/ * altro codice qui * /) .done (function (response) // Ottieni la prima risposta e loggala var response = response.results [0]; console.log (response);
// Controlla se la richiesta è valida e contiene le informazioni che vogliamo // Se lo fa, esegui il rendering. In caso contrario, genera un errore se (response && response.artworkUrl512! = Null) Gimmie.render (response); else Gimmie.throwError ('Risposta non valida', 'La richiesta che hai fatto sembra non avere un'icona associata.
Prova un URL diverso. " ); ) .fail (function (data) / * altro codice qui * /); " Qui controlliamo per accertarci risposta esiste e controlliamo per assicurarci response.artworkUrl512 è parte di quella risposta. artworkUrl512 è la chiave che l'API fornisce per il collegamento all'icona dell'app a dimensione intera. Se queste cose sono presenti, mostreremo l'icona dell'app sulla pagina. Per questo, abbiamo un'altra funzione chiamata rendere che scriveremo tra un momento. Se per qualche motivo mancano le cose di cui abbiamo bisogno, gettiamo un altro errore con la nostra bella funzione che abbiamo già realizzato.
Ora che abbiamo l'API che restituisce i dati desiderati, rendiamo i risultati sulla pagina. Una volta che sappiamo di avere tutto ciò che ci serve dall'API, chiamiamo Gimmie.render (risposta) e passare la risposta API ad esso, che è solo un oggetto di coppie chiave / valore. Quindi, di nuovo nella nostra Gimmie oggetto, creiamo il rendere funzione:
'+ response.trackName +'javascript var Gimmie = / * il nostro altro codice qui * / render: function (response) var icon = new Image (); icon.src = response.artworkUrl512; icon.onload = function () Gimmie. $ content .html (this) .append ('
Ecco cosa stiamo facendo in questo codice:
icona e usa il Immagine() costruttore che fondamentalmente crea un HTMLImageElement. Pensa a come creare un ![]()
src attributo della nostra immagine usando il icon.src metodo disponibile da usare perché abbiamo usato il Immagine() costruttore. Impostiamo la sorgente dell'immagine su artworkUrl512 della nostra risposta Questo farà sì che il browser inizi a recuperare l'immagine con quell'URL specificato.icon.onload per dire al browser "quando hai finito di recuperare l'immagine, fai questo ...". Questo è un modo per fare in modo che il browser recuperi una risorsa immagine e poi non la metta effettivamente nel DOM finché non viene scaricata.icon.onload impostiamo l'HTML di contenuti $ all'immagine che abbiamo appena recuperato. Quindi possiamo aggiungere ulteriori informazioni a quell'area di contenuto, se vogliamo. In questo esempio, prendo il trackname dalla nostra risposta API per mostrare il nome dell'app insieme alla sua icona.toggleLoading funzione perché abbiamo finito di caricare tutto!Prova a farlo ora nel tuo browser e dovresti vedere una bella icona mostrarsi! Ad esempio, prova l'URL di Yelp https://itunes.apple.com/us/app/yelp/id284910350?mt=8
Provalo con un URL dell'app Mac, come Final Cut Pro https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12
Si noti che l'icona di iOS non è arrotondata. Come notato in precedenza, la maggior parte delle icone iOS non sono progettate con angoli arrotondati. Quelli sono applicati a livello di sistema operativo. Per le icone iOS, dovremo applicare la maschera che abbiamo creato in Sketch. Quindi, se vai in Sketch ed esporti quella maschera che abbiamo creato come risorsa immagine, la caricheremo nel browser quando caricheremo l'icona:
"javascript var Gimmie = rendering: function (response) var icon = new Image (); icon.src = response.artworkUrl512; icon.onload = function () Gimmie. $ content .html (this) .append ('
'+ response.trackName +' Dimensioni effettive dell'icona: '+ this.naturalWidth +' × '+ this.naturalHeight +'
') .removeClass (' content-error '); Gimmie.toggleLoading ();// Se è un'icona iOS, carica anche la maschera if (response.kind! = 'Mac-software') var mask = new Image (); mask.src = 'assets / img / icon-mask.png'; mask.onload = function () Gimmie. $ content.prepend (this); "
Ecco cosa stiamo facendo:
Immagine() costruttore come prima, impostare il src dell'immagine in cui abbiamo salvato la nostra maschera, e poi la anteponiamo alla nostra area di contenuto una volta onload l'evento spara per l'immagine.Ora dobbiamo solo aggiungere alcuni stili per posizionare la maschera sopra l'icona:
css .content img [src * = "icon-mask.png"] position: absolute; a sinistra: 0; inizio: 0;
Questo è tutto! Se inserisci di nuovo l'URL di Yelp, questa volta verrà visualizzato con gli angoli arrotondati!
È stato un bel viaggio, e spero che tu abbia imparato molto da questo tutorial! Abbiamo coperto la creazione di wireframes e mock per la nostra app e i suoi stati differenti. Abbiamo anche trattato di scrivere HTML, CSS e Javascript per un'applicazione web che si interfaccia con un'API di terze parti.
Spero che tu abbia colto alcune nozioni di base sull'interfaccia con un'API. Hai imparato come estrarre dinamicamente contenuti e risorse da un'API e renderli tutti in una pagina web. Con questa conoscenza di base puoi passare alla creazione di app web personalizzate più adatte ai tuoi interessi.
Ecco una lista di poche API là fuori:
