Aller au contenu
BackpostmanhtmlCSSJavaScriptpokédex

Papa, je veux un Pokédex - Partie 1

Qu'est ce qu'on ne ferait pas pour nos chères petites têtes blondes, surtout quand ils ont compris ce que l'on pouvait faire en codant. Suivez les pérégrinations d'un papa codeur qui cherche à faire plaisir à son fils en lui codant un Pokédex.

Photo by Bahnijit Barman / Unsplash

Ah, nos chères petites têtes blondes ! Dès que le petit a compris que papa n'était pas créateur de bugs, mais bel et bien un créateur d'applications magiques, il a tout de suite cherché comment cela pouvait servir ses intérêts (malin, la guêpe).

Et comme la majorité des enfants de son âge, il a pour centre d'intérêt les petites (et les grandes) créatures d'une firme nippone : les Pokémon.

Et s'il y'a bien un objet de cette franchise autre que la poké ball qui fait rêver les enfants, c'est bien le pokédex, cette encyclopédie qui contient toutes les informations sur ces monstres et qui tient dans la poche.

Vous voyez où je veux en venir ? Il ne lui a pas fallut 30 secondes pour qu'il me regarde comme ceci,

Pikachu Cute GIF - Pikachu Cute Pokemon - Discover & Share GIFs

Et me dise avec tout son sérieux : Papa, je veux un pokédex!

Première solution : Postman

Bien qu'il existe une alternative à Postman : Bruno, je reste attaché à celui-ci et décide donc de trouver une API me permettant d'aller à la pèche aux infos sur ces petite bête.
Google étant le meilleur ami des développeurs, je n'ai pas eu à chercher longtemps avant de trouver mon bonheur.
Le contrat d'API est simple, je passe en paramètre le numéro et hop j'ai ma réponse.
Plus qu'a créer un template HTML dans les scripts de test Postman pour avoir une mise en forme.

Résultat :

Et la première réflexion de mon fils, "c'est moche !"

piqué dans mon orgueil

OK, je l'avoue c'est loin d'être beau (voir très loin).

Deuxième solution : Postman Flows

Comme expliqué dans cet article, Postman Flows permet d'organiser ses requêtes en workflow et de visualiser et manipuler le contenu de vos réponses afin de pouvoir consolider la sortie de vos flux.

Donc c'est parti pour un tour :

  • requête
  • résultat
  • consolidation dans un template markdown.

Là encore rien de bien joli, j'ai même droit à une remarque acide.

Papa ! C'est encore plus moche !
il commence à me chercher le petit

Troisième solution : HTML + Javascript

Sans doute la solution la plus simple, surtout qu'avec un peu de recherche google on peut trouver des codepen assez sympa pour avoir un rendu fidèle à celui du dessin animé :

Mais comme je suis curieux, je préfère continuer à chercher voir si je ne trouve pas quelque chose de moins front, quelque chose qui me permettrait de faire tout ça sans le faire directement.

Découvrez la suite de la création d'un Pokédex dans le prochain article !

Dernier