🔗 https://mypizzasapi.onrender.com/
An educational project demonstrating modern JavaScript ES6 modules and asynchronous programming by interacting with a Pizza API.
🍕 https://dupontdenis.github.io/useAPIPizzas/
TD API
Django REST Framework
Solution
https://github.com/dupontdenis/simplePizzaAPIDRF.git
Le client
https://github.com/dupontdenis/clientSimplePizzaAPIDRF.git
filtre par ingredients :
solution
API
Je viens d'ajouter des aides aux cours API Django
🙅🏽Faire le point API Django : APIView aux vues génériques
💓Faire le point Django REST Framework
Entrainement au DS_JS
👩🏽🎓Entrainement partie JS
Ennoncé :
Voici votre DS dans une version 🛟🛟https://drive.google.com/file/d/1af8GnYTejs-3E49vR6FZsJYXjA7Y_f1z/view?usp=sharing
En direct
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.
Site de réservation avecDjango !
Site de réservation de vols.
✈️Document 1 — Mise en place et modèle simple
Créer le projet airline, l'application flights, un modèle Flight avec trois champs, puis découvrir les migrations, le shell Django et les premières requêtes ORM.
🚀Objectif : comprendre le lien entre modèle, table et objets.
🛬Document 2 — Première relation avec ForeignKey
Créer un nouveau projet, introduire Airport, relier Flight à deux aéroports et étudier les relations dans les deux sens, avec departures, arrivals et les filtres ORM.
🚀Objectif : comprendre les clés étrangères et la navigation entre modèles.
🧑🏼✈️Document 3 — Relations ManyToManyField
Créer un nouveau projet pour introduire les passagers et les vols, puis représenter le fait qu'un passager peut prendre plusieurs vols et qu'un vol peut accueillir plusieurs passagers.
🚀Objectif : comprendre les relations plusieurs-à-plusieurs et leurs requêtes ORM.
Pour finir un projet avec création des objets avec bootstrap 5.
Django !
1- Formulaire HTML manuel
On construit un formulaire HTML à la main et on traite les données soi-même dans la vue.
👩🏼🎓Django → vers generic : etape 1
🪛Travail : CRUD
2 - Form (forms.Form)
On remplace le formulaire HTML manuel par une classe Form qui gère la validation et la récupération des données.
Django → vers generic : etape 2 (Form)
3 -ModelForm (forms.ModelForm)
On utilise un ModelForm pour générer automatiquement le formulaire à partir du modèle et créer l’objet en base via form.save().
Django → vers generic : etape 3 (ModelForm)
🪛 Travail : CRUD
4 - Generic Views (ListView / CreateView)
On remplace les vues manuelles par des vues génériques qui automatisent entièrement le CRUD (liste, création, modification, suppression).
Django → vers generic : etape 4 (generic View)
https://github.com/dupontdenis/Generic-CRUD.git
JS : suite
API :
Créer ce site sur les studios Ghibli
Liste des projets sur une structure "étudiants" !
Choix d'un projet :
Les bases de JS
Suite les bases de JS
https://docs.google.com/document/d/1gRA9N2u6O6eozarmP1yzYjEKvsAaMEztooWzCKKkPSI/edit?usp=sharin
👩🏼🎓 Ce qu'il faut comprendre en priorité
Générer une liste HTML à partir d’un tableau JavaScript
Le tableau :
const fruits = ["Pomme", "Poire", "Banane"];
Le résultat HTML :
<ul>
<li>Pomme</li>
<li>Poire</li>
<li>Banane</li>
</ul>
👩🏼🎓L’idée essentielle :
🪛On écrit les balises HTML que l’on connaît et on utilise ${...} pour générer dynamiquement les éléments <li> à partir d’un tableau JavaScript.
Explications :
La structure HTML fixe : les balises <ul> et </ul> sont écrites directement, car nous savons que nous voulons créer une liste.
L’insertion dynamique : ${...} permet d’insérer le résultat d’une expression JavaScript dans la chaîne HTML.
La génération des éléments : fruits.map(fruit => ...) parcourt le tableau et génère un élément <li> pour chaque fruit.
La réunion des éléments : .join("") rassemble les différentes chaînes HTML en une seule, sans séparateur.
👩🏼🎓À retenir : - les backticks ` ` délimitent le template literal,
- le HTML fixe en définit la structure et
${...} permet de calculer le contenu à insérer.
🚀 Ainsi, si le tableau contient davantage de fruits, la liste s’adapte automatiquement.
👩🏼🎓L’idée essentielle :
🪛On écrit les balises HTML que l’on connaît et on utilise ${...} pour générer dynamiquement les éléments <li> à partir d’un tableau JavaScript.
Explications :
La structure HTML fixe : les balises
<ul>et</ul>sont écrites directement, car nous savons que nous voulons créer une liste.L’insertion dynamique :
${...}permet d’insérer le résultat d’une expression JavaScript dans la chaîne HTML.La génération des éléments :
fruits.map(fruit => ...)parcourt le tableau et génère un élément<li>pour chaque fruit.La réunion des éléments :
.join("")rassemble les différentes chaînes HTML en une seule, sans séparateur.
👩🏼🎓À retenir :
- les backticks ` ` délimitent le template literal,
- le HTML fixe en définit la structure et
${...}permet de calculer le contenu à insérer.
🚀 Ainsi, si le tableau contient davantage de fruits, la liste s’adapte automatiquement.
🥷🏼Le problème des structures hétérogènes
🪛Comment afficher dans un même tableau HTML des objets dont la structure est inconnue et les attributs différents ? Faut-il prévoir manuellement une colonne pour chaque attribut possible ?
🛟La solution : parcourir dynamiquement les attributs des objets pour construire automatiquement les colonnes du tableau et afficher les données disponibles.
Inscription à :
Articles (Atom)