API REST à la recherche d’un front dynamique en JS

starwars

Le but de ce projet est de montrer comment consommer une API REST dans une page web.

Pour taper dans (l’oeil de) l’api (qui est composée d’url), vous pouvez utiliser différentes techniques :

AJAX via jquery.
XMLHttpRequest voir les exemples
FETCH (méthode plus récente de JavaScript) Fetch

Au chargement de la page, il faudra récupérer la liste complète des personnages de starwars en utilisant le endpoint : https://swapi.dev/api/people.

On utilisera cette liste pour remplir le dropdown (liste déroulante).

On veut aussi que la sélection d’un personnage dans cette liste déroulante donne du détail dans un élément card.

Voici un exemple du résultat attendu (en très moche !):

Squelette html

Récupérez le fichier index.html. (à améliorer)
Ajoutez le script selon que vous utilisez JQUERY, XMLHttpRequest ou Fetch()
Ajoutez le css et les scripts de bootstrap : https://getbootstrap.com/docs/4.4/getting-started/introduction/ ou les votres

Remarque : Si vous choisissez Jquery, prenez une seule version de jquery (car bootstrap propose aussi d’en utiliser une), et la version slim ne convient pas, il faut la minified. Pour les autres choix, ras.

Version JQuery (old technique, voire obsolète mais ça fonctionne toujours !))

Il faudra dans ce cas charger JQuery.

Créez un fichier main.js qui contient les lignes suivantes :

// contient la liste de tous les people reçue par l'api starwars
var liste = [];

/**
 * Action à réaliser lorsque le dom est chargé
 */
$(document).ready(function () {
    // on utilise jquery pour faire appel à l'api de starwars
    $.ajax({
        url: "https://swapi.co/api/people"
    }).then(function (data) {
        liste = data['results'];
        chargerMenu();
    });
});

/**
 * remplit le dropdown menu avec les noms de tous les people de la liste
 */
function chargerMenu() {
  liste.forEach(function (item) {
    // affichage dans la console pour vérifier uniquement
    // à compléter
    console.log(item);
  });
}

Ajoutez un lien vers le main.js dans index.html à la fin du body :

<body>
...
<script src="main.js"></script>
</body>

A Faire

Pour cette partie, travaillez en pair programming avec quelqu’un qui a un peu d’expérience en js :

Après avoir vérifié que chacun des personnages de starwars s’affiche bien dans la console, il va falloir les ajouter à la liste déroulante, par exemple :

let newMenuItem = document.createElement('button');
newMenuItem.className = "dropdown-item";
newMenuItem.type = "button";
...
document.getElementById("dropdown-list").appendChild(newMenuItem);

Faites en sortes que la sélection d’un nom dans la liste déroulante affiche le détail dans la card. Il faudra pour cela ajouter un eventListener (addEventListener) à l’objet newMenuItem, afin de réagir à l’événement ‘click’.
bonus : ajoutez un radio button afin de pouvoir afficher soit la liste des personnages, soit la liste des planètes, soit la liste des vaisseaux.

Déploiement/hébergement par netlify/github ou autre.

Pour déployer le projet (rendre accéssible sur le web), une solution simple est de créer un projet sous github (hébergement) et de le connecter à un compte netlify.

Version améliorée

Conseil : Utiliser uniquement la méthode fetch() de Javascript.

Ajouter une page avec un menu (ou des boutons) qui propose les choix suivants :
Films
Personnages
Planetes
Véhicules

Fonctionnalités

Films permet d’afficher les affiches des films de star wars
Personnages permet d’afficher la liste (dans des card) avec leur nom, taille, poids, monde…
Planètes pour afficher la liste des planètes avec les informations au choix
Véhicules idem (au choix concernant les informations)

Un titre différent pour chaque page serait bien.

Il faut bien lire la documentation de l’api SWAPI

Idéal : Travail à réaliser par deux

Bon courage !