devweb

TP programmation async côté client : l’API GitHub

Ce TP est à rendre via GitHub.

Introduction

On souhaite réaliser une application qui vérifie si une liste de projet GitHub sont toujours actifs ou pas. La page HTML contient un bouton, une barre de progression, un span pour un compteur et une zone d’affichage. La mise en forme utilise la librairie CSS https://bulma.io/ pour un rendu moderne.

On donne une capture ci-après, dans laquelle on a vérifié les projets listés dans le fichier TheBody983-starred.json et où on voit que trois sont toujours OK, mais qu’un est KO (le projet n’est plus disponible sur GitHub). La barre de progression s’est remplie progressivement au fur et à mesure que l’on connaît l’état des projets. On peut le voir sur la démonstration sur YouTube (avec une version légèrement plus ancienne de l’interface).

Screenshot appli

Critères d’évaluation

Fonctionnement de la barre de progression

La fonction fournie updateProgress(current, total, text) permet de mettre à jour la la barre de progression à la valeur current sur un total de total, le paramètre text est optionnel (il produit un affichage sur la page) Exécuter le script suivant ligne par ligne pour comprendre le fonctionnement :

updateProgress(0, 10, "départ");
updateProgress(1, 10);
updateProgress(2, 10);
updateProgress(3, 10);
updateProgress(4, 10);
updateProgress(5, 10, "moitié");
updateProgress(10, 10, "fini !");

Exercice avec setInterval écrire une fonction doProgressTimer qui incremente la barre de $1/n$ à chaque seconde pendant $n$ secondes.

Vérification de projets GitHub

Dans le dossier data, vous disposez de trois fichiers, chacun étant des listes de projets GitHub favoris :

Il s’agit d’accéder aux informations de ces projets côté client en intérrogeant l’API publique https://api.github.com/repos/{owner}/{repo}, voir la documentation.

Tout d’abord, il faut télécharger le fichier JSON choisi par le <select id="file-selector">.

Ensuite, il faut transformer les liens du fichier JSON de la forme https://github.com/{onwer}/{repo} en https://api.github.com/repos/{owner}/{repo} et lancer la vérification asynchrone et parallèle de l’état du site avec des requêtes HTTP HEAD ou GET sur l’API GitHub. Par exemple, comme Webcretaire-starred.json contient 40 projets, il faut générer 40 requêtes exécutée en parallèle.

Au fur et à mesure que les projets répondent, il faut incrémenter la barre de progression de la page. Ainsi, vous devrez créer un tableau de promesse (une par URL) avec pour chacune un callback dans le .then qui met à jour la barre avec updateProgress. L’ensemble sera exécuté par Promise.all() qui transforme le tableau de promesses en une promesse de tableau des résultats.

Exercice réalisez cette fonctionnalité. Vous pouvez la découper en 4 fonctions :

Améliorer l’affichage des liens pour y faire figurer l’évolution en nombre d’étoiles (stargazers_count dans l’API, stars dans le fichier) entre le moment où les JSON on été générés et aujourd’hui.

Gestion du rate-limiter

Par défaut, sans authentification, l’API GitHub n’autorise que 60 requêtes par heure et vous recevrez des réponses HTTP 403 si la limite est atteinte :

Si vous êtes authentifié, la limite est beaucoup plus confortable. Pour se faire, il faut :

Vous aurez alors 5.000 requêtes par heure et vous pourrez accéder aux status de vos projets privés et si vous donnez les droits à votre jetons, faire des modifications à vos projets via l’API.

Questions quels sont les deux projets de la liste romulusFR-starred.json qui n’existent plus ?