ajout du md

2026-04-01 22:17:05 +02:00
parent 20bdddd729
commit 21205fd2cc
4 changed files with 471 additions and 0 deletions
@@ -88,5 +88,54 @@ L'application utilise un système de routage manuel natif basé sur l'API `windo
 * Affichage conditionnel des composants via les directives natives `if={ state.view === ... }`.

 ***
+## Cycle de vie de l'application

+### Initialisation de la carte dans map-view.riot
+```javascript
+onMounted() {
+  this.map = L.map(element).setView([46.8, 2.5], 6)  // crée la carte Leaflet
+  L.tileLayer('https://...').addTo(this.map)           // ajoute les tuiles OpenStreetMap
+}
+```
+
+**Étape 9 — L'application est prête, elle attend l'utilisateur**
+
+À ce stade le navigateur affiche la page avec la barre de recherche, la carte vide centrée sur la France, et aucun résultat. Tout est en mémoire, prêt à réagir.
+
+**Étape 10 — L'utilisateur interagit**
+```
+L'utilisateur tape "BUT informatique" et clique Rechercher
+    → le navigateur déclenche l'événement onclick sur le bouton
+        → Riot appelle submitSearch() dans search-bar.riot
+            → qui appelle props.onsearch(requete, filtres)
+                → qui appelle lancerRecherche() dans app.riot
+                    → qui appelle chargerPage(1)
+                        → qui appelle fetch() vers l'API
+                            → l'API retourne le JSON
+                                → app.riot fait this.update({ resultats: formations })
+                                    → Riot détecte que le state a changé
+                                        → Riot re-rend le HTML automatiquement
+                                            → les cards de résultats apparaissent
+                                            → map-view reçoit les nouvelles props
+                                                → refreshMarkers() place les marqueurs
+```
+
+**Résumé de l'ordre d'exécution :**
+```
+1. index.html chargé
+2. CSS téléchargés (style.css, leaflet.css, charts.css)
+3. JS externes téléchargés (riot, leaflet)
+4. Fichiers .riot téléchargés (pas exécutés)
+5. Modules JS importés (api.js, formation.js, firebase.js, estimation.js, selection.js)
+6. Firebase se connecte
+7. Tout exposé sur window
+8. riot.compile() → compile les .riot en JS
+9. riot.mount('app') → monte le composant principal
+10. onMounted() → charge localStorage, écoute Firebase, écoute hashchange
+11. gererRoute() → lit le hash → affiche la vue recherche
+12. Composants enfants montés (search-bar, map-view, result-list)
+13. Application prête → attend les interactions utilisateur
+```
+
+***
 *Réalisé par Aylane Sehl, Jenson Val et Séri-Khane Yolou à l'IUT Sénart-Fontainebleau (UPEC).*