Les tutoriels Modulo sont de retour !

Salut à tous ! Je suis de retour avec les tutoriels Modulo après une pause estivale. J'ai encore beaucoup de tutoriels en préparation, alors restez à l'écoute. Cela dit, si vous avez des idées particulières pour mon prochain sujet, n'hésitez pas à me le faire savoir dans les commentaires !

Mon dernier tutoriel était un tutoriel super rapide et amusant "HTML uniquement, sans JS" sur le composant Pokémon Dance Party piloté par API en moins de 30 lignes de code de composant Web HTML. Certains de mes tutoriels précédents étaient un peu plus sérieux, comme ce tutoriel plus avancé sur la gestion de l'état privé et public. Si cela vous semble un peu sec, alors vous avez de la chance, car le didacticiel d'aujourd'hui est un autre tutoriel amusant et concerne encore un autre jeu vidéo bien-aimé... Zelda : Breath of the Wild !

Bien sûr, comme toujours, les techniques apprises dans ce didacticiel sont applicables à n'importe quelle API, alors continuez à lire pour en savoir plus sur une galerie pilotée par API !

Comment utiliser l'API Hyrule Compendium

Ce tutoriel est 100% grâce à l'API Hyrule Compendium gratuite, sous licence MIT et généreusement hébergée du merveilleux Aarav Borthakur, qui est une base de données et une API amusantes et entretenues par les fans pour la récupération des informations sur la franchise Zelda: Breath of the Wild et médias. Nous utiliserons le point de terminaison "Monsters", disponible ici : https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters

Capture d'écran

Essayez-le maintenant, en moins de 30 secondes : ??? Voulez-vous avancer ? Faites défiler jusqu'à la fin et copiez les 39 lignes de code HTML dans n'importe quel fichier HTML local, puis ouvrez-le dans votre navigateur. Modulo n'a aucune dépendance et s'exécute même intégré dans des fichiers HTML locaux, donc c'est vraiment aussi simple que cela !

Commencez par les données

Commençons avec seulement 6 lignes de code, avec un StaticData et un Template pour l'afficher :

Dans cet extrait, nous avons un

Essayez d'exécuter cet extrait. Vous voyez les données obtenues ? Nous devrons parcourir cela avec une boucle for.

Création d'une galerie d'images

Maintenant que nous pouvons voir qu'un attribut .data contient un Tableau de Objets, parcourons-le et générons une galerie :

Cela générera de nombreuses balises img, chacune avec un src= attribué aux propriétés "image" des Objets dans le Array JSON d'origine, et le {% pour %} template-tag est la syntaxe permettant de dupliquer un peu de HTML pour chaque élément du tableau (sans parler de chaque index, par exemple un nombre commençant à 0). Pour une pratique plus approfondie, la boucle for contient de nombreux exemples interactifs dans la partie 4 du didacticiel Modulo.js.

Création d'un état et d'un script

La prochaine chose la plus importante à faire est de créer une nouvelle balise Script, que nous pouvons utiliser pour écrire une fonction JavaScript simple sur une ligne :

Il s'agit d'une technique de base pour la création de scripts lors de l'utilisation de Modulo : créez des fonctions qui vous permettent de modifier l'état à l'aide de JavaScript. Dans ce cas, il effectue une opération très simple : « Sauvegarder ce monstre pour plus tard ». Plus précisément, il attribue la variable d'état « sélectionnée » à la charge utile donnée. De cette façon, la variable d'état « sélectionné » devient une sorte de « réserve » pour le monstre qui vient d'être sélectionné dans l'API.

Attacher l'événement de clic

Maintenant, ajoutons une autre pièce du puzzle : attacher l'événement de clic. Voir ci-dessous:

Cela a été fait avec la syntaxe de pièce jointe d'événement (@click:=, dans ceci
cas), et un attribut de charge utile, qui nous permet de transmettre le monstre que nous choisissons en cliquant sur cette image. Les événements et les balises de script peuvent être un sujet déroutant si vous êtes nouveau dans JavaScript (et même si ce n'est pas le cas !), alors parcourez les exemples sur cette page pour plus d'exemples d'utilisation de composants de script et d'attachement d'événements.

Attacher l'événement de clic

Enfin, rendons conditionnellement les informations sur le monstre lorsqu'un monstre est sélectionné :

{% if state.selected %}
    
{{ state.selected.name|capfirst }}
    

    
{{ state.selected.description }}
{% else %}
    
Welcome to Hyrule Monster Guide!
    
← Select a monster to learn more
{% endif %}

Cela affichera initialement le message "Bienvenue" (puisque state.selected commence par null). Ensuite, dès que quelqu'un clique sur une image de monstre, la variable state.selected ne sera plus nulle, et
à la place, le contenu sera affiché formaté avec les balises h1 et p, avec quelques ajustements appliqués (|capfirst met la première lettre en majuscule).

– Extrait intégrable

En combinant tout cela, nous enveloppons ensuite le tout dans une grille display: pour créer la disposition côte à côte, et un débordement: auto vers la gauche de la barre de défilement. Enfin, nous pouvons ajouter quelques ajustements CSS finaux au deuxième div (remplissage, marge et dégradé linéaire), et nous obtenons les résultats suivants qui peuvent être intégrés n'importe où :

J'espère que vous avez apprécié ce tutoriel, si c'est le cas, suivez-le pour en savoir plus !