Client API Pizza
🚀 Clonez : https://github.com/dupontdenis/clientAPIPizzaRender.git
Cette application affiche et filtre les pizzas en interrogeant une API distante depuis le navigateur. L'URL de l'API est définie dans app.mjs : https://pizzaapi-2.onrender.com/api/pizzas/.
Lancer le client avec Live Server
- Ouvrez le dossier du projet dans Visual Studio Code.
- Installez l'extension Live Server si elle n'est pas déjà présente.
- Ouvrez
index.html, puis cliquez sur Go Live dans la barre d'état (ou faites un clic droit sur le fichier et choisissez Open with Live Server). - La page s'ouvre dans le navigateur. La liste des pizzas est chargée depuis l'API distante ; cliquez sur une pizza pour afficher son détail ou utilisez le formulaire pour filtrer.
Live Server sert uniquement les fichiers du client en local. Il ne lance pas l'API : une connexion Internet est nécessaire pour accéder à l'API distante.
Tester l'API sans client
Il est aussi possible d'appeler directement l'API, sans lancer l'application ni installer de client. Ouvrez simplement une URL dans un navigateur : la réponse est renvoyée au format JSON.
- Recherche avec 🐷 ou 🍅 : https://pizzaapi-2.onrender.com/api/pizzas/?ingredients=🐷,🍅&mode=or
- Recherche avec 🐷 et 🍅 : https://pizzaapi-2.onrender.com/api/pizzas/?ingredients=🐷,🍅&mode=and
Le paramètre ingredients accepte plusieurs noms séparés par des virgules. En mode or, une pizza est retenue si elle contient au moins l'un des ingrédients demandés. En mode and, elle doit contenir tous les ingrédients demandés. Sans paramètre mode, l'API utilise or par défaut. Les emojis peuvent être saisis directement dans l'URL ; le navigateur les encode lors de l'envoi.
La même requête peut être faite dans un terminal avec curl :
curl.exe -i -G "https://pizzaapi-2.onrender.com/api/pizzas/" --data-urlencode "ingredients=🐷,🍅" --data-urlencode "mode=or"
Dépannage
Si les données ne s'affichent pas, vérifiez la connexion Internet et consultez la console du navigateur. Si le navigateur signale une erreur CORS, l'API distante doit autoriser les requêtes provenant de l'adresse locale utilisée par Live Server ; ce réglage se fait côté API, pas dans Live Server.
