API REST au choix pour afficher ce que vous voulez

Voici un lien vers des API publiques pour tout et n’importe quoi :

https://data.culture.gouv.fr/explore/?disjunctive.theme&disjunctive.keyword&sort=explore.popularity_score

Exemple pour accéder à l’API des festivals en france :

https://data.culture.gouv.fr/explore/dataset/panorama-des-festivals/api/

Il y a aussi des APIs pour les coktails !

https://www.thecocktaildb.com/api.php

Vous pouvez effectuer des recherches par catégorie, ingrédient, alcool, nom, etc… pour ce projet, vous pouvez mettre en place plusieurs pages avec un menu pour votre site.

Voici le lien pour vous aider : https://rapidapi.com/thecocktaildb/api/the-cocktail-db

Et d’autres encore :

• The Dog Api
• Pokemon
• Api de la NASA
• https://fr.openfoodfacts.org/data
• https://docs.trefle.io/
• https://www.themoviedb.org/documentation/api
• http://www.zippopotam.us/
• Liste de nombreuses API sur GitHub

Sinon, vous avez l’appli météo… beaucoup plus simple ;)

Idem que pour Star Wars, une autre API publique (Suisse) : https://www.prevision-meteo.ch/services/json/colmar

Pour cela, on utilise le site Suisse qui propose une API facile à utiliser.

Vous pouvez utiliser différentes techniques :

• XMLHttpRequest voir les exemples
• FETCH (méthode plus récente de JavaScript) Fetch

Petit bout de code pour vous aider avec fetch

let choixVille = "Colmar"
const url = "https://www.prevision-meteo.ch/services/json/";
...

fetch(url + choixVille)
    .then( response => { 
        // on précise que l'on souhaite une réponse de type JSON
        return response.json(); 
    })
    .then( reponseJson => {
        // block de traitement si tout va bien
        // ici on appelle notre résultat (la réponse obtenue) "reponseJson"
        // vous pouvez la nommer comme vous voulez : donnees ou data ou reponses ou json...
        // on fait quoi des données récupérées ?
        // ici pour l'exemple, on récupère 2 données et on met à jour la partie HTML, balise déjà créées :
        ville.innerText = reponseJson.city_info.name;
        leverSoleil.innerText = `Heure du Lever : ${reponseJson.city_info.sunrise}`;

    } )

Pour le moment on ne traite pas les réponses s’il y a une erreur (error), voire même ajouter un block (finally) qui s’exécutera toujours quelque soit la réponse. Nous verrons cela plus tard… sinon pour les plus pressé.e.s :

.catch(error = > {
    // je fais quoi si il y a une erreur de réponse
    // j'affiche un message dans ma page html, dans ma console pendant les tests
})
.finally( () => {

    // je fais quoi quelque soit le retour de ma requête
    // généralement, remise à zéro de certaines données,
    // on peut cacher des balises html ou autre... 

})

Fonctionnalités

• Lire la météo pour une ville saisie dans une zone Recherche (formulaire HTML)
• Afficher une liste de villes de votre région par défaut afin de pourvoir les sélectionner pour faire la même chose que la zone de recherche (optionnel)
• Afficher la météo du jour et celle pour les 7 jours suivants.
• Informations à afficher :
  • Nom de la Ville
  • heure de lever et coucher du soleil
  • météo du jour et icone correspondant
  • température
  • puis températures et icones pour les 7 jours suivants en dessous.

Si vous avez des idées, vous pouvez ajouter d’autres informations ou réaliser un affichage différent, voire même utiliser une autre API…

Dépôt sur votre gitHub/GitLab ou projet Zippé via Teams

Tout simplement pour pouvoir tester votre code et votre appli JS…

Date pour rendre le projet

Projet à rendre mardi 7 juin avant minuit ;) pour valider la partie dynamique en JS.

Prévoir groupes de 2 et un groupe de 3… à définir.