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.
Section à faire/compléter
Le site Luftdaten rassemble des données de pollution atmoshpérique au particule PM2.5 et PM10. Exemples d’appels :
Pour un capteur dont on connait l’ID : https://data.sensor.community/airrohr/v1/sensor/23510/
Pour faire des requêtes avec filtre: http://api.luftdaten.info/v1/filter/{query} : all measurements of the last 5 minutes filtered by query
Par exemple pour lister des capteurs prêts de moins de 5km d’une position GPS :lat 48.63, long -2.06 https://data.sensor.community/airrohr/v1/filter/area=48.63,-2.06,5
Les capteurs de type SDS011 https://data.sensor.community/airrohr/v1/filter/type=SDS011&country=FR
Les capteurs en France https://api.luftdaten.info/v1/filter/country=FR
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
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 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 :
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 …).
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
Les chaînes Reddit sont accessibles en json en rajoutant json à la suite du sujet.
https://www.reddit.com/r/webdev → https://www.reddit.com/r/webdev.json
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 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.
OpenStreeMap / Leaflet.js ou GoogleMaps
Il existe des API pour récupérer des poèmes :
https://www.poemist.com/api/v1/randompoems
À faire.
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
}
}
}
}
ex_1_appel_API.html
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.
L’évaluation portera sur les points suivants :