Share
Ce que vous allez créerNotre petite application a exactement la même apparence que nous, mais elle ne fait encore rien. Alors, travaillons sur l'ajout de JavaScript pour rendre l'application interactive.
Cette partie de la série nécessitera une certaine concentration de votre part, mais même si vous n'êtes pas un développeur JavaScript expérimenté, je vous promets que vous vous échapperez après avoir acquis de précieuses compétences..
Tout d'abord, nous allons créer notre fichier javascript assets / js / main.js et à l'intérieur de cela, nous allons créer un objet appelé Gimmie (nommé d'après notre application). C’est là que nous allons stocker les variables et les fonctions dont nous avons besoin pour qu’elles ne soient pas sur le disque. la fenêtre objet. Nous le mettrons juste à côté de l'appel «document prêt» de jQuery que nous utiliserons également.
"javascript var Gimmie = $ content: $ ('. content'), $ form: $ ('form'),;
$ (document) .ready (function () // Au chargement de la page, exécutez ceci…); "
Notez que nous avons ajouté quelques variables dans notre Gimmie objet: $ contenu, $ forme. Ce sont des objets jQuery, donc nous les nommons avec un $ en face pour nous le rappeler. Etant donné que ce sont des noeuds DOM spécifiques que nous référencerons plus d’une fois, nous les enregistrerons dans des variables pour une utilisation future plus rapide..
La première chose que nous devons gérer est lorsque l’utilisateur entre quelque chose dans notre formulaire et le soumet. Ainsi, dans notre «document prêt», nous attacherons un événement d'auditeur à notre formulaire. Nous pourrions faire $ ('forme'). sur () mais parce que nous avons déjà stocké l'élément de formulaire dans une variable, nous référons simplement cela à la place, en faisant Gimmie. $ Form.on (). Ensuite, nous empêcherons l'action de formulaire par défaut (pour que la page ne soit pas actualisée):
javascript $ (document) .ready (function () Gimmie. $ form.on ('submit', function (e) e.preventDefault (); // Faites plus de choses ici…););
Nous voulons maintenant afficher l'état de «chargement» lorsqu'un utilisateur soumet le formulaire. De cette façon, ils savent que quelque chose se passe. Si vous vous en souvenez, nous avons conçu cela dans Sketch:
Pour ce faire, nous allons créer une fonction dans notre Gimmie objet appelé toggleLoading et nous pouvons l'exécuter lorsque l'utilisateur soumet un formulaire en appelant Gimmie.toggleLoading () dans notre auditeur de soumission de formulaire. Nous l'avons nommé toggleLoading parce que nous allons basculer l'état de chargement actuel dans l'interface utilisateur, c'est-à-dire que nous l'exécuterons une fois lors de l'envoi, puis nous exécuterons un tas de code, et lorsque nous aurons terminé, nous l'exécuterons à nouveau pour supprimer l'état de chargement.
"javascript var Gimmie = / * notre autre code ici * /
Accentsconagua
toggleLoading: function () // Indicateur de chargement activé. $ content.toggleClass ('content - loading'); // Basculer le bouton d'envoi pour éviter les doubles soumissions // http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery this. $ Form.find ('button') .prop ('disabled', fonction (i, v) return! v;); , $ (document) .ready (function () Gimmie. $ form.on ('submit', fonction (e) e.preventDefault (); Gimmie.toggleLoading (); // appelle la fonction de chargement) ;); " Notez que nous basculons d’une classe sur le .contenu élément appelé contenu - chargement. Nous devons créer des styles CSS autour de cela. Donc, dans notre fichier CSS, ajoutons:
"css .content-loading: before content:"; position: absolue; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%; background: #fff; opacité: 0,9; z-index: 10;
.chargement de contenu: after content: url ('… /img/loading.gif'); position: absolue; à gauche: 50%; en haut: 3em; marge gauche: -16px; marge supérieure: -16px; z-index: 11; "
Ici, nous utilisons des pseudo-éléments pour créer un état de chargement dans notre zone de contenu. Notre avant element est utilisé pour créer une superposition blanche légèrement opaque sur la zone de contenu. Ensuite, nous utilisons le après élément pour afficher un gif de chargement animé dans notre boîte. Lorsque cette classe est ajoutée à notre section de contenu, il apparaîtra que quelque chose se charge.
À ce stade, si vous saisissez quelque chose dans le champ de saisie et soumettez le formulaire, un état de chargement s'affichera et vous resterez bloqué..
Avant de soumettre une demande à l'API iTunes, vérifions que les données saisies par l'utilisateur sont correctes..
Alors, qu'est-ce qui constitue exactement des données correctes? Eh bien, si nous regardons la documentation de l'API iTunes, il existe différentes manières d'obtenir du contenu. Une solution consiste à effectuer une recherche en fonction de termes clés. Mais ce que nous allons faire à la place s'appelle une «recherche». De la docs:
Vous pouvez également créer une demande de recherche pour rechercher du contenu dans les magasins en fonction de l'identifiant iTunes.
Il donne ensuite quelques exemples, tels que la recherche de l'application Yelp Software à l'aide de son identifiant iTunes: https://itunes.apple.com/lookup?id=284910350. Notez que le numéro d'identification de l'application correspond à ce qui est partagé entre ces URL. C'est ce dont nous aurons besoin de l'utilisateur.
Du point de vue de l'expérience utilisateur, demander un identifiant pour une application dans l'App Store pourrait s'avérer un peu difficile (surtout pour les novices). Ainsi, au lieu d'indiquer aux gens comment obtenir l'identifiant d'une application, nous demanderons le lien de magasin de l'application. Tout le monde sait comment copier et coller des liens! Les liens d'applications sont facilement accessibles à quiconque en les copiant simplement à partir de la page de chaque application dans l'App Store (dans iTunes, sur le Web ou dans le Mac App Store)..
Donc, une fois que l'utilisateur a entré un lien, nous devons le valider:
http: // itunes Pour ce faire, nous allons créer une fonction de validation dans notre Gimmie variable et l'exécuter sur notre écouteur d'événement de soumission de formulaire.
"javascript var Gimmie = / * notre code précédent ici * / userInput:", userInputIsValid: false, appId: ", validate: function (input) // la validation a lieu ici,
Gimmie. $ Form.on ('submit', fonction (e) / * notre code précédent ici / Gimmie.userInput = $ (this) .find ('input'). Val (); Gimmie.validate (); if (Gimmie.userInputIsValid) / faire une demande d'API / autre / renvoie une erreur * /); "
Notez ce que nous faisons dans le code ci-dessus:
Gimmie userInput est une chaîne et est définie comme entrée de l'utilisateuruserInputIsValid est un booléen qui sera vrai ou faux selon que l'entrée de l'utilisateur est valide (nous écrirons ces tests dans un moment)appId est une chaîne de chiffres qui sera extraite de userInput si c'est validevalider est une fonction où nous allons valider la saisie de l'utilisateur lorsqu'il est appeléGimmie.userInput à la valeur du champ de saisie du formulaireGimmie.validate () Gimmie.valider déterminera) puis nous procéderons et ferons une demande d’API iTunes. Si ce n'est pas valide, nous afficherons une erreur informant l'utilisateur que les données saisies sont incorrectes.Maintenant écrivons le code qui valide si l’entrée utilisateur est correcte ou non. Notez que dans notre code HTML, nous définissons notre type d'entrée sur url . Cela signifie que certains navigateurs effectueront de manière native un type de validation sur cette entrée, mais celle-ci ne sera pas cohérente ou uniforme d'un navigateur à l'autre. Dans certains navigateurs, cela ne fonctionnera même pas. Donc, si l'utilisateur tape «bla», le navigateur l'acceptera et le formulaire le soumettra. Dans les autres navigateurs, ils devront au moins taper quelque chose qui commence par «http: //» avant que le navigateur ne leur permette de soumettre le formulaire. Mais ce que nous voulons, c'est une URL commençant par «http: // itunes», nous allons donc gérer cela en JavaScript..
javascript var Gimmie = / * notre code précédent * / validate: function () // Utilisez regex pour tester si l'entrée est valide. Il est valide si: // 1. Il commence par 'http: // itunes' // 2. Il contient '/ id' suivi de chiffres quelque part dans la chaîne 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 = ";
Ici, nous utilisons des expressions régulières pour tester si l’entrée répond à nos conditions. Voyons cela plus en détail:
javascript var regUrl = / ^ (http | https): \ / \ / itunes / i; var regId = / \ / id (\ d +) / i;
Ce sont les deux littéraux d'expression régulière que nous définissons (pour en savoir plus sur les expressions régulières). Voici un bref résumé de ce que font ces expressions régulières:
regUrl est le littéral de l'expression rationnelle permettant de déterminer si l'entrée utilisateur est une URL commençant par «http: // itunes». / ^ dit "lance la regex et commence à regarder au début de la chaîne"(http | https): dit “cherche soit“ http ”ou“ https ”suivi d'un point-virgule ':'”\ / \ / dit «cherche« // »» (car une barre oblique est un caractère spécial dans les expressions régulières, comme celle que nous utilisons au début de la regex, nous devons utiliser la barre oblique inverse avant la barre oblique pour indiquer à la regex de ne pas interpréter la barre oblique comme un caractère spécial, mais plutôt comme une barre oblique)iTunes / i dit “cherche 'itunes' puis termine la regex” tandis que le je à la fin indique que la correspondance doit être faite sans tenir compte de la casse (puisque quelqu'un pourrait coller "HTTP: // ITUNES" qui est toujours valide)
regId est le littéral d'expression régulière permettant de déterminer si l'entrée utilisateur a ou non un ID de chiffres correspondant au modèle d'URL du lien iTunes Store. Tous les liens iTunes Store valides auront / id en elle, suivie d'une séquence de nombres. / \ / id dit «lance la regex et cherche n'importe où dans la chaîne pour '/ id'» (voir l'exemple précédent pour une description d'échappement avec une barre oblique)(\ d +) dit "cherchez une séquence de chiffres (0 à 9) une ou plusieurs fois et capturez-les". Les parenthèses indiquent que nous voulons nous souvenir de la correspondance définie, c’est-à-dire que dans notre cas, nous nous souvenons de la séquence de chiffres représentant l’ID de l’application. le /ré est un caractère spécial dans regex indiquant que nous voulons les chiffres [0-9] et le + dit correspondre à ceux 1 à plusieurs fois./je dit “fin de la regex” et le je indique une correspondance insensible à la casse (puisqu'un URL avec / ID938491 est toujours valide)Le bit suivant de notre code ressemble à ceci:
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 = ";
le .tester() method sur un littéral d'expression régulière cherche une correspondance dans une chaîne spécifiée et renvoie true ou false, selon que la correspondance spécifiée est trouvée ou non. Donc, dans notre cas, nous testons l'entrée de l'utilisateur à la fois regUrl et regID pour s'assurer que l'entrée commence par “http: // itunes” et que “/ id” est suivi d'un nombre de chiffres.
Si les deux tests retournent vrai, nous définissons la userInputIsValid drapeau à true, puis nous extrayons l'ID de l'URL et le définissons comme appId. Pour ce faire, nous courons le .exec () méthode sur l'entrée. Cela retournera un tableau de deux éléments: un correspondant à l'expression régulière entière et un correspondant uniquement à la chaîne de nombres après / id (c’est parce que nous avons utilisé la parenthèse dans la regex (/ d +) dire «souviens-toi de ce qui est capturé ici»). Ainsi, à titre d'exemple, le .exec () la méthode retournerait quelque chose comme ["/ id12345", "12345"] et nous voulons juste le deuxième élément du tableau, nous avons donc défini appId pour que.
Si les deux tests retournent faux, nous définissons userInputIsValid à faux et le appId à une chaîne vide.
Maintenant, tout ce dont nous avons besoin pour déterminer si la saisie de l'utilisateur est valide est en place. Donc, nous pouvons continuer avec le reste de notre script.
À l'heure actuelle, nous en sommes à un stade de notre script où nous pouvons déterminer si les commentaires de l'utilisateur sont ce dont nous avons besoin. Nous avons donc quitté avec ceci:
javascript si (Gimmie.userInputIsValid) / * demande d'API * / else / * renvoie une erreur * /
Pour le moment, nous allons nous occuper de la partie "Lancer une erreur". Comme il y aura d'autres endroits dans l'exécution de notre script où des erreurs peuvent survenir, nous allons créer une fonction d'erreur générique qui affichera une erreur pour l'utilisateur, en fonction de ce qui a mal tourné. Si vous vous en souvenez, nous avons conçu ce à quoi cela ressemblerait dans Sketch:
Notez que notre état d'erreur comporte essentiellement deux éléments: un "en-tête" en gras, et un "corps" en texte standard. Nous allons donc créer une fonction d'erreur générique qui les accepte. L '"en-tête" indiquera généralement l'erreur et le "corps" décrira comment corriger l'erreur. Donc, dans ce cas particulier, si l'entrée de l'utilisateur est invalide, nous devons lui indiquer le type d'entrée approprié. Créons donc une fonction générique pouvant afficher des erreurs en fonction du texte que nous passons:
javascript if (Gimmie.userInputIsValid) / * demande d'API * / else Gimmie.throwError ('Invalid Link', 'Lien invalide', 'Vous devez soumettre un lien standard du magasin iTunes avec un ID, par exemple..
https://itunes.apple.com/us/app/twitter/id333903271?mt = 8 ');
Ici, on appelle la fonction Gimmie.throwError () et transmettez-lui deux paramètres: le texte "en-tête" et le texte "corps". Comme nous ne faisons qu'afficher HTML, nous pouvons passer des éléments HTML à l'intérieur des paramètres si nous le souhaitons. Dans ce cas, dans le "corps" nous passons dans un exemple de lien iTunes Store et nous soulignons la id / se séparer de la balise emphase () pour aider à indiquer à l'utilisateur, "hé, nous avons besoin d'un lien iTunes Store, et assurez-vous qu'il a un identifiant".
Nous pouvons définir notre CSS pour mettre en évidence tout ce qui est enveloppé dans balises, en plus de donner une couleur à notre état d'erreur:
css. contenu - erreur color: # 196E76; .content em font-style: normal; couleur de fond: jaune clair;
Maintenant, nous allons créer le throwError fonctionner dans le Gimmie objet:
"javascript var Gimmie = / * code précédent ici * / throwError: fonction (en-tête, texte) this. $ content .html ('
'+ header +' '+ texte +'
') .addClass (' content-error ');this.toggleLoading (); "
Notez que nous sommes en train de saisir ceci. $ contenu. C'est pareil que faire $ ('. content') mais nous avons enregistré cette sélection en tant que variable dans le Gimmie objet, puisque nous allons l'utiliser plus d'une fois. Donc on en parle en faisant ceci. $ contenu. Maintenant, nous définissons le contenu HTML de la $ contenu élément du texte que nous avons transmis, l’en-tête étant en gras. Ensuite, nous ajoutons une classe de contenu - erreur Pour notre élément de contenu de cette façon, nous pouvons styler les erreurs comme nous le souhaitons. Enfin, nous courons le toggleLoading () fonction de Gimmie supprimer la classe de chargement et ne plus afficher le gif de chargement.
À ce stade, si vous tapez une URL incorrecte, telle que http://google.com, ou si vous tapez un iTunes URl approprié qui n'a pas d'identifiant comme https://itunes.apple.com/us/app/twitter/ vous devriez voir un message d'erreur affiché:
Pour améliorer un peu notre formulaire, ajoutons une jolie petite animation “pop” qui s'exécute lorsqu'une erreur survient (dans les navigateurs pris en charge). Pour ce faire, nous allons ajouter / supprimer une classe CSS contenant une animation. Donc, dans notre fichier CSS, faisons:
"css. contenu-erreur-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); "
Cela fera en sorte que la taille de la zone de contenu augmente et diminue, la rendant ainsi «apparente» en cas d'erreur. Il ne reste plus qu’à ajouter / supprimer cette classe avec JavaScript. Donc, retour dans notre throwError une fonction:
"javascript throwError: function (en-tête, texte) // Supprime la classe d'animation this. $ content.removeClass ('content-error-pop');
// Déclenchement du déclencheur // https://css-tricks.com/restart-css-animation/ this. $ Content [0] .offsetWidth = this. $ Content [0] .offsetWidth; // Ajouter des classes et du contenu this. $ Content .html (''+ header +' '+ texte +'
') .addClass (' content - error contenu - error-pop '); this.toggleLoading (); , " Ici, nous supprimons d’abord la classe, puis nous déclenchons un «refoulement» pour nous assurer que l’animation reprend lors de l’ajout de la classe à l’étape suivante (avec le contenu - erreur classe). Nous avons maintenant une belle animation pop sur notre état d'erreur:
Nous sommes sur le point de terminer maintenant. Nous avons vérifié que les données saisies par l'utilisateur étaient correctes et nous avons fourni un moyen d'afficher les erreurs. Nous devons donc maintenant effectuer notre demande d'API..
Nous ferons cela à l'intérieur de notre si() déclaration qui valide la saisie de l'utilisateur.
javascript si (Gimmie.userInputIsValid) $ .ajax (url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId, type de données: 'JSONP') .done (fonction (réponse) // une fois terminé) .fail (function (data) // lorsque la requête échoue); else / * notre autre code ici * /
Comme vous pouvez le constater à partir du code ci-dessus, nous avons configuré une requête AJAX auprès de l'API iTunes. Comme vous vous en souvenez peut-être, l'API iTunes a une URL de «recherche» à laquelle nous pouvons accéder pour récupérer les données. Il suit ce format: https://itunes.apple.com/lookup?id= suivi de l'ID de la chose que vous voulez trouver. L'API donne un exemple de recherche d'application logicielle à l'aide de l'application Yelp: https://itunes.apple.com/lookup?id=284910350. Si vous accédez à cette URL dans votre navigateur, vous verrez un désordre de JSON:
Si vous utilisez cela avec un linter, comme JSON lint, les résultats seront formatés et commenceront à avoir beaucoup plus de sens:
Si vous consultez la documentation de l'API, vous remarquerez que l'API fournit des résultats pour tous les types de contenu de l'iTunes Store, de la musique aux films en passant par les applications. C'est avantageux pour nous, car cela signifie que nous pouvons récupérer des illustrations d'icônes non seulement pour les applications iOS, mais également pour les applications Mac! Les applications Mac utilisent le même type de structure d'URL que les applications iOS. Par exemple, Final Cut Pro possède un lien https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12. Notez que l'URL commence par https: // itunes et a / id424389933, c'est ce dont nous avons besoin!
En utilisant notre fonction d'erreur précédente, générons une erreur si / lorsque notre demande d'API échoue:
javascript si (Gimmie.userInputIsValid) $ .ajax (url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId, type de données: 'JSONP') .done (fonction (réponse) // une fois terminé) .fail (function (data) Gimmie.throwError ('Erreur API iTunes', 'Une erreur s'est produite lors de l'extraction de l'information. Vérifiez l'URL d'iTunes ou réessayez plus tard.');); else / * notre autre code ici * /
Comme nous avons résumé notre méthode d'affichage des erreurs dans une seule fonction, l'affichage d'une autre erreur est facile!
Maintenant, regardons ce qui se passe lorsque la demande se termine avec succès:
javascript $ .ajax (/ * autre code ici * /) .done (function (response) // Récupère la première réponse et la connecte var réponse = response.results [0]; console.log (réponse); ) .fail (fonction (données) / * autre code ici * /);
Notez ici que nous obtenons la réponse et enregistrons le premier résultat sur la console. Si vous regardez un exemple de requête d'API, vous verrez qu'au plus haut niveau de l'objet JSON, vous obtenez resultCount qui vous indique le nombre de résultats (dans une recherche, il ne devrait y en avoir qu’un), puis résultats qui est un tableau (avec un seul objet dans ce cas) qui représente le résultat.
Nous définissons donc la réponse au premier élément des résultats, puis enregistrez-la sur la console. Si vous ouvrez notre petite application dans le navigateur et entrez une URL (par exemple, l'URL Yelp https://itunes.apple.com/lookup?id=284910350), vous verrez que l’interface utilisateur reste bloquée dans l’état de chargement, mais si vous examinez les outils de développement et accédez à la console, vous verrez notre réponse d’API consignée. Nous pouvons maintenant accéder à l'une de ces propriétés en JavaScript!
Comme vous pouvez le constater, l'API renvoie de nombreuses informations sur l'application: son nom, son développeur, sa description, son genre, son prix et bien plus encore! Nous n’avons vraiment besoin que de quelques-unes de ces choses, comme l’icône de l’application. Nous allons donc vérifier que notre demande contient les informations dont nous avons besoin..
"javascript $ .ajax (/ * autre code ici * /) .done (function (response) // Récupère la première réponse et la connecte var réponse = response.results [0]; console.log (réponse);
// Vérifie si la requête est valide et contient les informations souhaitées // Si c'est le cas, rendez-les. Sinon, génère une erreur if (response && response.artworkUrl512! = Null) Gimmie.render (response); else Gimmie.throwError ('Réponse invalide', 'La requête que vous avez faite semble ne pas avoir d'icône associée.
Essayez une autre URL. ) ) .fail (function (data) / * autre code ici * /); " Ici nous vérifions pour nous assurer que réponse existe et nous vérifions pour nous assurer que response.artworkUrl512 fait partie de cette réponse. oeuvreUrl512 est la clé que l’API fournit pour un lien vers l’icône de l’application en taille réelle. Si ces éléments sont présents, nous allons afficher l'icône de l'application sur la page. Pour cela, nous avons une autre fonction appelée rendre que nous écrirons dans un instant. Si, pour une raison quelconque, les éléments dont nous avons besoin font défaut, nous commettons une autre erreur avec notre fonction intéressante que nous avons déjà créée..
Maintenant que l’API renvoie les données souhaitées, rendons les résultats sur la page. Une fois que nous savons que nous avons tout ce dont nous avons besoin de l’API, nous appelons Gimmie.render (réponse) et passez la réponse de l'API à celle-ci, qui est juste un objet de paires clé / valeur. Donc, retour dans notre Gimmie objet, créons le rendre une fonction:
'+ response.trackName +'javascript var Gimmie = / * notre autre code ici * / render: function (réponse) var icon = new Image (); icon.src = response.artworkUrl512; icon.onload = function () Gimmie. $ content .html (this) .append ('
Voici ce que nous faisons dans ce code:
icône et utiliser le Image() constructeur qui crée fondamentalement un HTMLImageElement. Pensez-y comme créer un ![]()
src attribut de notre image en utilisant le icon.src méthode disponible à utiliser parce que nous avons utilisé le Image() constructeur. Nous définissons la source de l'image sur le oeuvreUrl512 de notre réponse. Le navigateur commencera à récupérer l'image à l'URL spécifiée..icon.onload pour indiquer au navigateur «quand vous avez fini de récupérer l'image, faites ceci…». C'est un moyen de demander au navigateur d'extraire une ressource image et de ne pas la placer dans le DOM tant qu'elle n'a pas été téléchargée..icon.onload nous définissons le code HTML de $ contenu à l'image que nous venons de récupérer. Ensuite, nous pouvons ajouter plus d'informations à cette zone de contenu si nous le souhaitons. Dans cet exemple, je prends le trackName à partir de notre réponse API pour afficher le nom de l'application avec son icône.toggleLoading fonction parce que nous avons fini de tout charger!Essayez de lancer ceci dans votre navigateur maintenant et vous devriez voir une belle icône apparaître! Par exemple, essayez l'URL Yelp https://itunes.apple.com/us/app/yelp/id284910350?mt=8
Essayez-le avec une URL d'application Mac, telle que Final Cut Pro. https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12
Notez que l'icône iOS n'est pas arrondie. Comme indiqué précédemment, la plupart des icônes iOS ne sont pas conçues avec des coins arrondis. Ceux-ci sont appliqués au niveau du système d'exploitation. Pour les icônes iOS, nous devrons appliquer le masque créé dans Sketch. Donc, si vous allez dans Sketch et exportez le masque que nous avons créé en tant qu'actif d'image, nous le chargerons dans le navigateur lorsque nous chargerons l'icône:
"javascript var Gimmie = render: function (réponse) var icon = nouvelle Image (); icon.src = response.artworkUrl512; icon.onload = function () Gimmie. $ content .html (this) .append ('
'+ response.trackName +' Dimensions réelles de l'icône: '+ this.naturalWidth +' × '+ this.naturalHeight +'
') .removeClass (' content-error '); Gimmie.toggleLoading ();// S'il s'agit d'une icône iOS, chargez également le masque if (response.kind! = 'Mac-software') var mask = new Image (); mask.src = 'assets / img / icon-mask.png'; mask.onload = function () Gimmie. $ content.prepend (this); "
Voici ce que nous faisons:
Image() comme précédemment, définissez le src de l'image à l'endroit où nous avons enregistré notre masque, puis l'ajoute à notre zone de contenu une fois la en charge événement déclenche pour l'image.Il ne reste plus qu’à ajouter quelques styles pour positionner le masque sur l’icône:
css .content img [src * = "icon-mask.png"] position: absolute; gauche: 0; en haut: 0;
C'est tout! Si vous entrez à nouveau l'URL Yelp, cette fois-ci, les coins seront arrondis.!
Ce fut tout un voyage et j'espère que vous avez beaucoup appris de ce tutoriel! Nous avons couvert la création de wireframes et de simulacres pour notre application et ses différents états. Nous avons également abordé l'écriture de HTML, CSS et Javascript pour un
