Share
Wat je gaat creërenWe zien onze kleine app precies zoals we willen, maar hij doet nog niets. Laten we dus werken aan het toevoegen van JavaScript om de app interactief te maken.
Dit gedeelte van de serie vereist wat concentratie van je, maar zelfs als je geen doorgewinterde JavaScript-ontwikkelaar bent, beloof ik dat je weggaat nadat je een aantal waardevolle vaardigheden hebt geleerd.
Eerst maken we ons javascript-bestand assets / js / main.js en daarbinnen zullen we een genoemd object creëren Gimmie (vernoemd naar onze app). Hier zullen we de variabelen en functies opslaan die we nodig hebben, zodat ze niet op de venster voorwerp. We plaatsen het naast de "document ready" -oproep van jQuery die we ook zullen gebruiken.
"javascript var Gimmie = $ content: $ ('. content'), $ form: $ ('form'),;
$ (document) .ready (function () // Voer bij het laden van de pagina dit ...); "
Merk op dat we een paar variabelen hebben toegevoegd in onze Gimmie voorwerp: $ inhoud, $ form. Dit zijn jQuery-objecten, dus we noemen ze met een $ aan de voorkant om ons daaraan te herinneren. Omdat het specifieke DOM-knooppunten zijn die we vaker zullen raadplegen, slaan we ze op in variabelen voor sneller, toekomstig gebruik.
Het eerste dat we moeten behandelen, is wanneer de gebruiker iets in ons formulier invoert en verzendt. Dus, binnen ons "document gereed" zullen we een luistergebeurtenis aan ons formulier koppelen. We zouden kunnen doen $ ( 'Vorm'). Op () maar omdat we het formulierelement al in een variabele hebben opgeslagen, zullen we daarnaar verwijzen door te doen Gimmie. $ Form.on (). Dan zullen we de standaard formulieractie voorkomen (dus de pagina wordt niet vernieuwd):
javascript $ (document) .ready (function () Gimmie. $ form.on ('submit', function (e) e.preventDefault (); // Doe hier meer dingen ...););
Nu willen we een "laad" -status weergeven wanneer een gebruiker het formulier verzendt. Op die manier weten ze dat er iets aan de hand is. Als je dit onthoudt, hebben we dit in Sketch ontworpen:
Om dit te bereiken, zullen we een functie creëren binnen onze Gimmie object genoemd toggleLoading en we kunnen het uitvoeren wanneer de gebruiker een formulier verzendt door te bellen Gimmie.toggleLoading () in onze luistervoorvormer. We hebben het genoemd toggleLoading omdat we de huidige laadstatus in de gebruikersinterface zullen wijzigen, d.w.z. we voeren het eenmaal uit bij submit, dan zullen we een aantal code uitvoeren, en als we klaar zijn zullen we het opnieuw uitvoeren om de laadstatus weg te nemen.
"javascript var Gimmie = / * onze andere code hier * /
Accentsconagua
toggleLoading: function () // Schakelaar laadindicator omschakelen this. $ content.toggleClass ('content - laden'); // Schakel de submit-knop in zodat we geen dubbele submissies krijgen // http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery this. $ Form.find ('knop') .prop ('uitgeschakeld', functie (i, v) return! v;); , $ (document) .ready (function () Gimmie. $ form.on ('submit', functie (e) e.preventDefault (); Gimmie.toggleLoading (); // bel de laadfunctie) ;); " Merk op dat we een klasse op de .inhoud element genoemd inhoud - loading. We moeten daar wat CSS-stijlen voor maken. Laten we in ons CSS-bestand het volgende toevoegen:
"css .content-loading: before content:"; positie: absoluut; boven: 0; links: 0; breedte: 100%; hoogte: 100%; achtergrond: #fff; dekking: .9; z-index: 10;
.inhoud laden: na content: url ('... /img/loading.gif'); positie: absoluut; links: 50%; top: 3em; marge links: -16px; margin-top: -16px; z-index: 11; "
Hier gebruiken we pseudo-elementen om een laadstatus in ons inhoudsgebied te creëren. Onze voor element wordt gebruikt om een enigszins ondoorzichtige witte overlay in het inhoudsgebied te maken. Dan gebruiken we de na element om een geanimeerd laadgif in onze doos weer te geven. Wanneer deze klasse wordt toegevoegd aan onze inhoudssectie, zal het lijken alsof iets wordt geladen.
Als u op dit moment iets invoert in het invoerveld en het formulier verzendt, wordt er een laadstatus weergegeven en blijft u vastzitten.
Voordat we een verzoek indienen bij de iTunes API, zorgen we ervoor dat de gegevens die door de gebruiker worden ingevoerd correct zijn.
Dus wat is precies de juiste data? Nou, als we kijken naar de iTunes API-documentatie zijn er een paar verschillende manieren om inhoud te krijgen. Eén manier is om een zoekopdracht uit te voeren op basis van sleutelbegrippen. Maar wat we in de plaats gaan doen, wordt een "lookup" genoemd. Van de documenten:
U kunt ook een opzoekverzoek maken om te zoeken naar inhoud in de winkels op basis van iTunes ID
Vervolgens worden enkele voorbeelden gegeven, zoals het opzoeken van de Yelp-softwareapplicatie op basis van de iTunes ID: https://itunes.apple.com/lookup?id=284910350. Merk op dat het ID-nummer van de toepassing is wat wordt gedeeld tussen deze URL's. Dat is wat we van de gebruiker nodig hebben.
Vanuit een UX-perspectief kan het een beetje moeilijk zijn om een identifier voor een app in de app store te vragen (vooral voor beginners). Dus in plaats van mensen te instrueren hoe ze een app-ID moeten krijgen, vragen we naar de winkellink van de app. Iedereen weet hoe je links moet kopiëren en plakken! App-links zijn eenvoudig beschikbaar voor iedereen door ze eenvoudigweg te kopiëren van de pagina van de individuele app in de app store (in iTunes, op internet of in de Mac App Store).
Dus zodra de gebruiker een link invoert, moeten we deze valideren:
http: // itunes Om dit te doen, maken we een validatiefunctie in onze Gimmie variabele en voer het uit op onze form submitlistener.
"javascript var Gimmie = / * onze oude code hier * / userInput:", userInputIsValid: false, appId: ", validate: function (input) // validation happens here,
Gimmie. $ Form.on ('submit', function (e) / * onze vorige code hier / Gimmie.userInput = $ (this) .find ('input'). Val (); Gimmie.validate (); if (Gimmie.userInputIsValid) / maak API-aanvraag / else / gooi een fout * /); "
Let op wat we doen in de bovenstaande code:
Gimmie gebruikers invoer is een tekenreeks en wordt ingesteld als de invoer van de gebruikeruserInputIsValid is een booleaanse waarde die waar of onwaar is, afhankelijk van het feit of de invoer van de gebruiker geldig is (we schrijven die tests in een oogwenk)appId is een reeks cijfers waaruit zal worden geëxtraheerd gebruikers invoer als het geldig isbevestigen is een functie waarbij we de invoer van de gebruiker valideren wanneer hij wordt gebeldGimmie.userInput naar de waarde van het invoerveld van het formulierGimmie.validate () Gimmie.validate zal bepalen) dan zullen we doorgaan en een iTunes API-verzoek doen. Als het niet geldig is, zullen we een fout weergeven waarin de gebruiker wordt geïnformeerd dat de gegevens die ze hebben ingevoerd niet correct zijn.Laten we nu de code schrijven die valideert of de gebruikersinvoer juist is of niet. Merk op dat we in onze HTML ons invoertype instellen op url . Dit betekent dat sommige browsers van nature een soort van validatie uitvoeren op die invoer, maar het zal niet consistent of uniform zijn in browsers. In sommige browsers werkt het niet eens. Dus als de gebruiker 'blah' typt, accepteert de browser dit en verzendt het formulier. In andere browsers moeten ze op zijn minst iets typen dat begint met "http: //" voordat de browser hen het formulier laat verzenden. Maar wat we willen is een URL die begint met "http: // itunes", dus we zullen dat in JavaScript doen.
javascript var Gimmie = / * onze vorige code * / validate: function () // Gebruik regex om te testen of de invoer geldig is. Het is geldig als: // 1. Het begint met 'http: // itunes' // 2. Het heeft '/ id' gevolgd door cijfers in de string ergens 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 = ";
Hier gebruiken we reguliere expressies om te testen of de invoer voldoet aan onze voorwaarden. Laten we dit wat gedetailleerder bekijken:
javascript var regUrl = / ^ (http | https): \ / \ / iTunes / i; var regId = / \ / id (\ d +) / i;
Dit zijn de twee reguliere expressie-literals die we definiëren (lees meer over reguliere expressies). Hier volgt een korte samenvatting van wat deze reguliere expressies aan het doen zijn:
regUrl is de regex letterlijk om te bepalen of de gebruikersinvoer een URL is die begint met "http: // itunes" / ^ zegt: "start de regex en begin met kijken naar het begin van de string"(Http | https): zegt "zoek naar 'http' of 'https' gevolgd door een puntkomma ':'"\ / \ / zegt "zoek naar '//'" (omdat een voorwaartse schuine streep een speciaal teken is in reguliere expressies, zoals de manier waarop we het gebruiken aan het begin van de regex, moeten we de backslash vóór de schuine streep gebruiken om de regex te vertellen niet de schuine streep als een speciaal teken interpreteren, maar eerder als een schuine streep naar voren)itunes / i zegt "zoek naar 'itunes' en eindig de regex" terwijl de ik aan het einde geeft aan dat de aanpassing moet worden gedaan hoofdletter ongevoelig (omdat iemand 'HTTP: // ITUNES' kan plakken dat nog steeds geldig is)
regid is de regex letterlijk om te bepalen of de invoer van de gebruiker een ID heeft met cijfers die overeenkomen met het URL-patroon van de iTunes Store-link. Alle geldige iTunes Store-links hebben /ID kaart erin, gevolgd door een reeks getallen. /\/ID kaart zegt: "start de regex en kijk waar dan ook in de tekenreeks voor '/ id'" (zie vorig voorbeeld voor beschrijving van slash-escrow)(\ D +) zegt: "zoek een reeks cijfers (0 tot en met 9) 1 of meerdere keren op en leg ze vast". De haakjes geven aan dat we willen onthouden welke overeenkomst er ook in is gedefinieerd, d.w.z. in ons geval onthouden we de reeks cijfers die de ID van de app vertegenwoordigt. De / d is een speciaal teken in regex dat aangeeft dat we cijfers [0-9] en de. willen + zegt dat 1 of meerdere keren overeenkomt met die [0-9]./ik zegt "einde de regex" en de ik geeft niet-hoofdlettergevoelige overeenkomsten aan (sinds een URL met / ID938491 is nog geldig)Het volgende stukje van onze code ziet er zo uit:
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 = ";
De .test() methode op een reguliere letterlijke expressie zoekt naar een overeenkomst uit een opgegeven tekenreeks en retourneert waar of onwaar, afhankelijk van of de opgegeven overeenkomst is gevonden. Dus in ons geval testen we de invoer van de gebruiker tegen beide regUrl en regid om ervoor te zorgen dat de invoer begint met "http: // itunes" en "/ id" heeft, gevolgd door een aantal cijfers.
Als beide tests true retourneren, stellen we de userInputIsValid markeer naar true en vervolgens extraheren we de ID uit de URL en stellen deze in als appId. Om dit te doen, voeren we het .exec () methode op de invoer. Hiermee wordt een array van twee items geretourneerd: een die overeenkomt met de volledige regex en een die overeenkomt met alleen de reeks getallen erna /ID kaart (dit komt omdat we de haakjes in de regex hebben gebruikt (/ + D) om te zeggen "onthoud wat hier wordt vastgelegd"). Dus, als een voorbeeld, de .exec () methode zou iets als teruggeven ["/ id12345", "12345"] en we willen alleen het tweede item in de array, dus we stellen in appId op dat.
Als beide tests false retourneren, stellen we in userInputIsValid naar false en de appId naar een lege string.
Nu is alles wat we nodig hebben om te bepalen of de invoer van de gebruiker geldig is, aanwezig. Dus we kunnen doorgaan met de rest van ons script.
Op dit moment bevinden we ons op een punt in ons script waarin we kunnen bepalen of de input van de gebruiker is wat we nodig hebben. Dus we zijn hiermee gestopt:
javascript if (Gimmie.userInputIsValid) / * make API request * / else / * gooi een fout * /
Voor nu gaan we het gedeelte "Een fout aangooien" afhandelen. Omdat er bij de uitvoering van ons script andere plekken zullen zijn waar fouten kunnen optreden, gaan we een generieke foutfunctie maken die een fout voor de gebruiker weergeeft, afhankelijk van wat er mis ging. Als je je dat herinnert, hebben we in Sketch ontworpen hoe dit eruit zou zien:
Merk op hoe onze foutstatus in essentie twee items heeft: een "header" die vetgedrukte tekst is, en een "body" die een reguliere tekst is. Dus we zullen een generieke foutfunctie creëren die deze accepteert. De "header" geeft over het algemeen de fout aan en de "body" zal beschrijven hoe de fout is opgelost. Dus, in dit specifieke geval, als de invoer van de gebruiker ongeldig is, moeten we hen informeren wat een geschikt invoertype is. Laten we dus een generieke functie maken die fouten kan weergeven op basis van de tekst die we doorgeven:
javascript if (Gimmie.userInputIsValid) / * make API request * / else Gimmie.throwError ('Invalid Link', 'U moet een standaard iTunes Store-link indienen met een ID, d.w.z..
https://itunes.apple.com/us/app/twitter/id333903271?mt = 8 ');
Hier noemen we de functie Gimmie.throwError () en geef het twee parameters door: de "header" -tekst en de "body" -tekst. Omdat we alleen HTML weergeven, kunnen we HTML-elementen binnen de parameters doorgeven als we dat willen. In dit geval geven we in het "hoofdgedeelte" een voorbeeld van een iTunes-winkellink door en markeren we de ID kaart/ deel met de nadruk tag () om de gebruiker aan te duiden: "hey, we hebben een iTunes Store-link nodig en zorgen ervoor dat deze een ID bevat".
We kunnen onze CSS instellen om te markeren wat er ingepakt zit tags, evenals onze foutstatus een kleur geven:
css .content - error color: # 196E76; .content em font-style: normaal; achtergrondkleur: lichtgeel;
Nu gaan we het maken throwError functie in de Gimmie voorwerp:
"javascript var Gimmie = / * vorige code hier * / throwError: functie (kop, tekst) this. $ content .html ('
'+ koptekst +' '+ tekst +'
') .addClass (' inhoudfout ');this.toggleLoading (); "
Merk op dat we pakken dit. $ inhoud. Dit is hetzelfde als doen $ ( 'Content') maar we hebben die selectie opgeslagen als een variabele in de Gimmie object, aangezien we het meer dan eens zullen gebruiken. Dus we verwijzen ernaar door te doen dit. $ inhoud. Nu stellen we de HTML-inhoud van de $ inhoud element in de tekst die we hebben doorgegeven, waarbij de "header" -tekst vetgedrukt is. Dan voegen we een klasse toe van inhoud - error aan ons inhoudselement op die manier kunnen we de fouten opmaken zoals we willen. Ten slotte hebben we de toggleLoading () functie van Gimmie om de laadklasse te verwijderen en het weergeven van de laadgif te stoppen.
Als u op dit moment een onjuiste URL invoert, zoals http://google.com, of als je een juiste iTunes URl typt die geen ID-achtig heeft https://itunes.apple.com/us/app/twitter/ er zou een foutmelding moeten verschijnen:
Om onze vorm een beetje te verbeteren, voegen we een leuke kleine "pop" -animatie toe die wordt uitgevoerd wanneer er een fout optreedt (in ondersteunde browsers). Om dit te doen, zullen we een CSS-klasse toevoegen / verwijderen die een animatie bevat. Laten we in ons CSS-bestand het volgende doen:
"css .content-error-pop -webkit-animation: pop .333s; -moz-animation: pop .333s; -o-animation: pop .333s; animation: pop .333s;
@ -webkit-keyframes knallen 0% -webkit-transform: scale (1); 50% -webkit-transform: scale (1.075); 100% -webkit-transform: scale (1);
@ -moz-keyframes knallen 0% -webkit-transform: scale (1); 50% -webkit-transform: scale (1.075); 100% -webkit-transform: scale (1);
@ -o-keyframes knallen 0% -webkit-transform: scale (1); 50% -webkit-transform: scale (1.075); 100% -webkit-transform: scale (1);
@keyframes knallen 0% -webkit-transform: scale (1); 50% -webkit-transform: scale (1.075); 100% -webkit-transform: scale (1); "
Dat zorgt ervoor dat het inhoudsgebied op en neer gaat in grootte, waardoor het "knalt" wanneer er een fout optreedt. Nu moeten we die klasse gewoon toevoegen / verwijderen met JavaScript. Dus terug in onze throwError functie:
"javascript throwError: function (header, text) // Verwijder animatieklasse this. $ content.removeClass ('content-error-pop');
// Trigger reflow // https://css-tricks.com/restart-css-animation/ this. $ Content [0] .offsetWidth = this. $ Content [0] .offsetWidth; // Voeg lessen toe en geef deze inhoud. $ Content .html (''+ koptekst +' '+ tekst +'
') .addClass (' inhoud - foutinhoud - fout-pop '); this.toggleLoading (); ," Hier verwijderen we eerst de klasse, waarna we een "reflow" activeren om ervoor te zorgen dat de animatie opnieuw begint wanneer we de klasse toevoegen in de volgende stap (samen met de normale inhoud - error klasse). Nu hebben we ook een leuke pop-animatie op onze foutstatus:
We zijn nu bijna klaar met de afwerking. We hebben gecontroleerd of de invoer van de gebruiker correct is en we hebben een manier geboden om fouten weer te geven, dus nu moeten we gewoon onze API-aanvraag indienen.
We doen dit in onze als() verklaring die de invoer van de gebruiker valideert.
javascript if (Gimmie.userInputIsValid) $ .ajax (url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId, dataType: 'JSONP') .done (functie (respons) // when finished) .fail (functie (data) // wanneer aanvraag mislukt); else / * onze andere code hier * /
Zoals u kunt zien in de bovenstaande code, hebben we een AJAX-aanvraag ingesteld voor de iTunes API. Zoals u zich misschien van vroeger herinnert, heeft de iTunes API een 'opzoek'-URL die we kunnen raken om gegevens terug te krijgen. Het volgt dit formaat: https://itunes.apple.com/lookup?id= gevolgd door de ID van het ding dat je wilt vinden. De API geeft een voorbeeld van het opzoeken van een softwaretoepassing met de Yelp-app: https://itunes.apple.com/lookup?id=284910350. Als u naar die URL in uw browser gaat, ziet u een puinhoop van JSON:
Als u dit door een linter uitvoert, zoals JSON lint, worden de resultaten opgemaakt en beginnen ze veel logischer te worden:
Als u naar de API-documentatie kijkt, ziet u dat de API resultaten biedt voor alle soorten inhoud in de iTunes Store, van muziek tot films en apps. Dat is voordelig voor ons omdat het betekent dat we niet alleen voor iOS-apps, maar ook voor Mac-apps pictogramafbeeldingen kunnen pakken! Mac-apps gebruiken hetzelfde type URL-structuur als iOS-apps. Final Cut Pro heeft bijvoorbeeld een koppeling van https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12. Merk op dat de URL begint met https: // itunes en heeft / id424389933, dat is precies wat we nodig hebben!
Met behulp van onze foutfunctie van vroeger, laten we een fout genereren voor als / wanneer ons API-verzoek mislukt:
javascript if (Gimmie.userInputIsValid) $ .ajax (url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId, dataType: 'JSONP') .done (functie (respons) // when finished) .fail (functie (gegevens) Gimmie.throwError ('iTunes API Error', 'Er is een fout opgetreden bij het ophalen van de informatie. Controleer de iTunes-URL of probeer het later opnieuw.');); else / * onze andere code hier * /
Omdat we onze methode voor het weergeven van fouten tot één functie hebben geabstraheerd, is het eenvoudig om een andere fout weer te geven!
Laten we ons nu zorgen maken over wat er gebeurt als het verzoek met succes wordt voltooid:
javascript $ .ajax (/ * andere code hier * /) .done (functie (antwoord) // Ontvang de eerste reactie en log in var response = response.results [0]; console.log (response); ) .fail (functie (gegevens) / * andere code hier * /);
Merk op dat we hier antwoord krijgen en het eerste resultaat bij de console registreren. Als u naar een voorbeeld-API-aanvraag kijkt, ziet u dat zich op het hoogste niveau van het JSON-object bevindt RESULTCOUNT welke je vertelt hoeveel resultaten er zijn (in een opzoeking zou er maar één moeten zijn) en dan uitslagen Dit is een array (met in dit geval één object) die het resultaat vertegenwoordigt.
Dus we hebben het antwoord op het eerste item in de resultaten gezet en het vervolgens bij de console aangemeld. Als u onze kleine app in de browser opent en een URL invoert (bijvoorbeeld de Yelp-URL https://itunes.apple.com/lookup?id=284910350) ziet u dat de gebruikersinterface in de laadstatus vastzit, maar als u de ontwikkeltools bekijkt en naar de console gaat, ziet u ons API-antwoord gelogd. We hebben nu toegang tot al deze eigenschappen in JavaScript!
Zoals u ziet, retourneert de API een heleboel informatie over de app: de naam, ontwikkelaar, beschrijving, genre, prijs en nog veel meer! We hebben eigenlijk maar een paar van die dingen nodig, zoals het pictogram van de app. We zullen dus controleren of ons verzoek de informatie bevat die we nodig hebben.
"javascript $ .ajax (/ * andere code hier * /) .done (functie (antwoord) // Ontvang de eerste reactie en log in var response = response.results [0]; console.log (respons);
// Controleer of het verzoek geldig is en bevat de gewenste informatie // Als dat het geval is, render het dan. Anders gooi een fout als (response && response.artworkUrl512! = Null) Gimmie.render (respons); else Gimmie.throwError ('Ongeldige reactie', 'De aanvraag die je hebt gedaan lijkt geen bijbehorend pictogram te hebben.
Probeer een andere URL. ' ); ) .fail (functie (gegevens) / * andere code hier * /); " Hier controleren we om het zeker te weten antwoord bestaat en we controleren om er zeker van te zijn response.artworkUrl512 maakt deel uit van dat antwoord. artworkUrl512 is de sleutel die de API biedt voor een koppeling naar het volledige app-pictogram. Als die dingen aanwezig zijn, gaan we het app-pictogram op de pagina weergeven. Daarvoor hebben we een andere functie genaamd geven die we in een moment zullen schrijven. Als om wat voor reden dan ook de dingen die we nodig hebben, ontbreken, gooien we nog een fout met onze mooie functie die we al hebben gemaakt.
Nu we de API hebben die de gewenste gegevens retourneert, kunnen we de resultaten op de pagina weergeven. Zodra we weten dat we alles hebben wat we nodig hebben van de API, bellen we Gimmie.render (respons) en geef de API-reactie door, die slechts een object is van sleutel / waarde-paren. Dus, terug in onze Gimmie object, laten we het maken geven functie:
'+ response.trackName +'javascript var Gimmie = / * onze andere code hier * / render: function (antwoord) var icon = new Image (); icon.src = response.artworkUrl512; icon.onload = function () Gimmie. $ content .html (this) .append ('
Dit is wat we in deze code doen:
icoon en gebruik de Beeld() constructor die in principe een HTMLImageElement maakt. Zie het als het creëren van een ![]()
src attribuut van onze afbeelding met behulp van de icon.src methode beschikbaar om te gebruiken omdat we de Beeld() constructeur. We hebben de bron van de afbeelding ingesteld op de artworkUrl512 van onze reactie. Hierdoor wordt de browser gestart met het ophalen van de afbeelding op die opgegeven URL.icon.onload om de browser te laten weten "als je klaar bent met het ophalen van de afbeelding, doe dit ...". Dit is een manier om de browser een afbeeldingsresource te laten ophalen en deze vervolgens niet daadwerkelijk in de DOM te plaatsen totdat deze is gedownload.icon.onload we hebben de HTML van ingesteld $ inhoud naar de afbeelding die we net hebben opgehaald. Dan kunnen we meer informatie toevoegen aan dat inhoudsgebied als we dat willen. In dit voorbeeld pak ik de trackname van ons API-antwoord om de naam van de app samen met het pictogram te laten zien.toggleLoading functie omdat we klaar zijn met het laden van alles!Probeer dit nu in uw browser uit te voeren en u zou een leuk pictogram moeten zien verschijnen! Probeer bijvoorbeeld de Yelp-URL https://itunes.apple.com/us/app/yelp/id284910350?mt=8
Probeer het met een Mac-app-URL, zoals Final Cut Pro https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12
Merk op dat het iOS-pictogram niet is afgerond. Zoals eerder opgemerkt, zijn de meeste iOS-pictogrammen niet ontworpen met afgeronde hoeken. Die worden toegepast op OS-niveau. Voor iOS-pictogrammen moeten we het masker toepassen dat we in Sketch hebben gemaakt. Dus als u naar Sketch gaat en dat masker exporteert dat we hebben gemaakt als een afbeelding, laden we dat in de browser wanneer we het pictogram laden:
"javascript var Gimmie = render: function (response) var icon = new Afbeelding (); icon.src = response.artworkUrl512; icon.onload = function () Gimmie. $ content .html (this) .append ('
'+ response.trackName +' Werkelijke pictogramdimensies: '+ this.naturalWidth +' × '+ this.naturalHeight +'
') .removeClass (' content-error '); Gimmie.toggleLoading ();// Als het een iOS-pictogram is, laadt u het masker ook als (response.kind! = 'Mac-software') var mask = new Image (); mask.src = 'assets / img / icon-mask.png'; mask.onload = function () Gimmie. $ content.prepend (this); "
Dit is wat we aan het doen zijn:
Beeld() constructor zoals eerder, stel de src van de afbeelding naar de plaats waar we ons masker hebben opgeslagen, en voeg het dan toe aan ons inhoudsgebied zodra het onload evenement vuurt voor de afbeelding.Nu moeten we gewoon enkele stijlen toevoegen om het masker boven het pictogram te plaatsen:
css .content img [src * = "icon-mask.png"] position: absolute; links: 0; boven: 0;
Dat is het! Als u de Yelp-URL opnieuw invoert, wordt deze keer weergegeven met afgeronde hoeken!
Het is een hele reis geweest en ik hoop dat je veel hebt geleerd van deze tutorial! We hebben betrekking op het maken van wireframes en moppen voor onze app en de verschillende staten. We behandelden ook het schrijven van HTML, CSS en Javascript voor een webapp die communiceert met een externe API.
Hopelijk heb je een paar basisbeginselen van interfacing met een API begrepen. U hebt geleerd hoe u inhoud en items dynamisch uit een API kunt halen en deze allemaal kunt omzetten in een webpagina. Met die basiskennis kunt u nu doorgaan met het maken van meer gepersonaliseerde web-apps die zijn afgestemd op uw interesses.
Hier is een lijst met een paar API's die er zijn:
