Appel d'API web

Présentation

HTML et CSS permettent la mise en page de contenu web ainsi que des animations de transition.
Le langage Javascript va vous permettre de rendre vos pages dynamiques en modifiant le contenu d’une page lors d’évènements choisis. Une fois les principes d’appel d’un script Javascript assimilés, il est possible d’appeler des fonctionnalités très complexes via une multitude de librairies (jquery.js, D3.js, Parsleyjs, Three.js, …)

Vous allez également pouvoir récupérer des données extérieures depuis d’autres sites via l’appel d'API. Il existe des API dans de nombreux domaines, comme le montre le moteur de recherche du site ProgrammableWeb.

Les technologies d’API

Section à faire/compléter

  • Les API de type REST (Representationnal State Transfert) sont les plus courantes pour le Web. L’utilisateur effectue une requête http pour obtenir l’info qu’il souhaite. Souvent une requête par type de données. Elles sont conçues avec des cas d’usages en tête. Utilisées depuis près de 20 ans, très répandues, elles répondent au besoins de performances et scalabilité des sites.
  • Les API de type GraphQL offrent un cadre plus souple d’accès au données, l’utilisateur choisit les données qu’il veut récupérer, c’est lui qui adapte ses requêtes à ses cas d’usage. Elles sont pour l’instant moins utilisées que les API REST mais leur souplesse d’accès atirent un bon nombre de développeurs (notamment Front End).
  • Les API SOAP (Simple Object Acces Protocol)

Ressources

Infos sur des API

luftdaten

Le site Luftdaten rassemble des données de pollution atmoshpérique au particule PM2.5 et PM10. Exemples d’appels :

OpenWeatherMap

Cette API donne le temps des 5 derniers jours. Nécessite une clef d’enregistrement. 60 appel par minutes.

Voir la liste des villes city.list.json (ouvrir le fichier avec Notepad et faire une recherche pour savoir les villes existantes). Trouver l’identifiant de votre ville (par exemple 3021351 pour Dinard).
https://api.openweathermap.org/data/2.5/weather?id=3021351&appid=identifiant_clef_open_weathermap

Random User

L’API random user permet de générer des infos pour simuler aléatoirement des coordonnées d’utilisateurs : nom, image, adresse, … (non existants). Les infos sont renvoyées au format JSON. Un exemple d’appel de cette API est https://randomuser.me/api/?results=10.

Formspree : envoi de formulaire

Formspree permet d’envoyer gratuitement des données de formulaires sur son site et de vous notifier par mail de l’envoi d’infos. La version payante vous permet d’accéder par programmation (API) aux données de vos formulaires.

il faut créer un compte utilisateur sur le site et cette API est ensuite très simple d’utilisation :

  • Enregistrer un nouveau formulaire sur Formspree et copier le lien
  • Vous pouvez au choix :
    • créer votre formulaire dans votre page et utiliser le lien comme action “submit”, méthode “post” de votre formulaire
    • Utiliser le FormButton, un bouton ouvrant le formulaire en popup. Cette solution semble mieux au niveau UX en évitant de créer une page contact. Pour cette solution il faut recopier dans votre page l’extrait de code fourni (snippet) sur le site de formspree. Les champs du formulaire et le style sont définis en json dans le snippet.

Disqus : envoi de commentaires

Disqus fournit un service de commentaires. La méthode est similaire à Formspree. Il faut s’enregister créer un nouveau réglage pour un site spécifique (via son url). Un snippet de code est ensuite fourni suivant le type de site où inclure Disqus (Wordpress, drupal, mais aussi manuellement …).

Auth0 : l’authentification

Cette API permet de gérer l’authentifications de manière sécurisée à votre site. Des exemples sont donnés pour utiliser l’API avec des applications JS qui nécessitent cependant du JS côté serveur

Reddit

Les chaînes Reddit sont accessibles en json en rajoutant json à la suite du sujet.

https://www.reddit.com/r/webdevhttps://www.reddit.com/r/webdev.json

https://pix.reddit.com

Pays du monde

L’API REST Countries fournit des informations sur les pays du monde, capitales, monnaie,… Voir la documentation

Exemple :

https://restcountries.eu/rest/v2/all?fields=name;capital;currencies

ColorTag API documentarion

ColorTag est une API qui permet de détecter les couleurs dans une image. Cette API est gratuite et permet d’utiliser les méthodes GET et POST, soit pour analyser une image d’après son url soit d’envoyer une image pour analyse. Voir la documentation.

API de géolocalisation

OpenStreeMap / Leaflet.js ou GoogleMaps

Des poèmes

Il existe des API pour récupérer des poèmes :

  • PoetryDB
  • Poemist api : récupération de poèmes aléatoires via l’URL https://www.poemist.com/api/v1/randompoems

Youtube API

À faire.

Les API GraphQL

REST est la technologie actuelle la plus utilisées pour les API. La tecnhologie GraphQL est émergeante et permet plus de flexibilité dans la recherche d’information en fournissant un langage de requête pour disposer des données d’une base sous forme d’API. Dans les API REST les requêtes sont préparées par les développeurs de l’API et figées.

Le principe est donc d’envoyer une requête au format JSON à l’API plutôt qu’une simple url en fonction de l’API. Il arrive aussi qu’un wrapper GraphQL soit créé autour d’une API REST pour rendre l’accès aux données plus souple.

Vous trouverez une liste d’API graphQL que pouvez tester en ligne.

Par exemple, l'API StarWars que vous pouvez tester ici. Les clefs d’accès aux données sont spécifiées dans un fichier schema.graphql

 {
  allPeople {
    edges {
      node {
        name
        species {
          id
        }
        gender
        mass
      }
    }
  }
}

Exercices

  1. Auto-formez vous à l’exécution de scripts Javascript. Quelques ressources sont par exemple :
  2. Découvrir le format JSON, et son utilisation en Javascript, par exemple sur :
  3. Tester l’appel d’une API simple, comme par exemple l’API chuck Norris. Une exemple du code Javascript pour faire l’appel est donné en ressource, fichier ex_1_appel_API.html
  4. Implémenter une page appelant des API pour la météo et la pollution de l’air et réaliser une mise en page sympa des infos récupérées (météo & pollution actuelle, prévision à 5 jours).
  5. Ajouter un formulaire (champs texte + bouton) pour spécifier une ville ou un emplacement GPS (suivant ce que propose l’API météo utilisée) et mettre à jour les données de la page.

L’ensemble des tests réalisés doit être mis dans un projet Gitlab contenant à la racine un Readme.md d’explication des fichiers et tests réalisés.

Critères d’évaluation

L’évaluation portera sur les points suivants :

  • Présentation des tests réalisés en Javascript.
  • Utilisation du format JSON.
  • Revue de la documentation et du code sur Gitlab.

Compétences développées

  • Bases d’appel du Javascript (appel d’un script, personnalisation)
  • Initiation aux pages web dynamiques
  • Découverte et utilisation du format JSON
  • Appel d’API Web et formatage de données externes

Ressources

  • Cours en ligne Javascript
  • Page d’exemple d’appel d’API
  • Une exemple similaire d’application complète, mais plus complexe est donné sur le site de Google Developper, First PWA. Intéressant à regarder pour l’appel d’API et le formatage des cartes météo

exemple-1st-pwa-google.png