From d01bd4619c3b7e657dafb52603bfdec8589f4760 Mon Sep 17 00:00:00 2001 From: Azmog <80716388+AzmogEx@users.noreply.github.com> Date: Thu, 18 Jun 2026 22:54:03 +0200 Subject: [PATCH] =?UTF-8?q?docs:=20met=20=C3=A0=20jour=20le=20plan=20d'ora?= =?UTF-8?q?l=20(d=C3=A9mo=20int=C3=A9gr=C3=A9e)=20+=20guide=20de=20lanceme?= =?UTF-8?q?nt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Plan_Oral_CESIZen.md : déroulé 20 min avec créneau démo live (8:30-12:30), timing recalé, chiffrement honnête, +25 tests, Q15/Q16 (démo, tests) - Guide_Lancement_CESIZen.md : lancer web/API (Docker), mobile (Expo), comptes de démo, parcours, arrêt/relance, dépannage Co-Authored-By: Claude Opus 4.8 (1M context) --- Guide_Lancement_CESIZen.md | 144 +++++++++++++++++++++++++++++++++++++ Plan_Oral_CESIZen.md | 30 +++++--- 2 files changed, 163 insertions(+), 11 deletions(-) create mode 100644 Guide_Lancement_CESIZen.md diff --git a/Guide_Lancement_CESIZen.md b/Guide_Lancement_CESIZen.md new file mode 100644 index 0000000..d3e6e22 --- /dev/null +++ b/Guide_Lancement_CESIZen.md @@ -0,0 +1,144 @@ +# 🚀 Guide de lancement CESIZen — web, API, mobile & démo + +> Tout se lance en **une commande** pour la partie web/API (Docker). Le mobile se lance à part (Expo). + +--- + +## 0. Prérequis (à vérifier une fois) +- **Docker Desktop** installé et **lancé** (l'icône baleine doit être active dans la barre de menu). +- Pour le mobile uniquement : **Node.js** (déjà installé : v22) et l'app **Expo Go** sur ton téléphone (App Store / Play Store). +- Se placer dans le dossier du projet : + ```bash + cd ~/Desktop/CESI/Cesizen + ``` + +--- + +## 1. 🌐 Lancer le site web + l'API + la base (Docker) + +Une seule commande construit et démarre **tout** (PostgreSQL + Redis + API Laravel + front Next.js), applique les migrations et le seed (dont le compte de démo) : + +```bash +docker compose up -d +``` + +- `-d` = en arrière-plan (tu récupères ton terminal). +- Le **premier** lancement build les images (quelques minutes). Les suivants démarrent en ~20 s. + +**Vérifier que c'est prêt :** +```bash +docker compose ps # les 4 services doivent être "Up" / "healthy" +``` + +**Adresses une fois lancé :** +| Service | URL | +|---|---| +| 🖥️ Site web | **http://localhost:3000** | +| 🔌 API (REST JSON) | http://localhost:8000/api/v1 | +| 🗄️ PostgreSQL | localhost:5432 (db `cesizen` / user `cesizen`) | + +➡️ Ouvre **http://localhost:3000** dans ton navigateur. + +--- + +## 2. 🔑 Comptes de démonstration (déjà créés par le seed) + +| Rôle | Email | Mot de passe | Pour montrer… | +|---|---|---|---| +| **Membre** (démo) | `demo@cesizen.fr` | `Demo123!` | Le **Tracker** : journal déjà rempli (18 saisies) + rapports parlants | +| **Admin** | `admin@cesizen.fr` | `Admin123!` | Le **back-office** : gestion users / contenus / émotions | + +> 💡 Pour la démo de soutenance, connecte-toi avec **`demo@cesizen.fr`** : son journal et ses rapports sont déjà fournis (camembert + courbe), pas besoin de saisir en direct. + +--- + +## 3. 🎬 Le parcours de démo (≈ 4 min, sur le web) + +Connecté en `demo@cesizen.fr`, déroule dans cet ordre : +1. **Informations** (accessible même sans compte) → *« voici le module Informations »* +2. **Journal de bord** → l'historique des saisies (déjà rempli) +3. **Nouvelle saisie** → wizard **3 étapes** : émotion → sous-émotion + intensité (slider) → date + note → **Valider** (elle apparaît dans le journal) +4. **Rapports** → changer la période (Semaine / Mois / …) → **camembert** de répartition + **courbe** d'évolution +5. *(option)* Connecté en **admin**, montrer la **configuration des émotions** + +🛟 **Si la démo plante** : bascule sur les **maquettes des slides** (slide 9), sans t'excuser. + +--- + +## 4. 📱 Lancer l'application mobile (Expo) + +> La partie Docker (API) doit **déjà tourner** (étape 1), car l'app mobile interroge l'API. + +```bash +cd ~/Desktop/CESI/Cesizen/mobile +npm install # la première fois seulement +npx expo start # démarre le serveur Expo + affiche un QR code +``` + +Ensuite, **3 façons** de voir l'app : + +### a) Sur ton téléphone (le plus simple pour une démo) +1. Téléphone et Mac sur le **même WiFi**. +2. L'app doit pointer vers l'API via l'**IP locale du Mac** (pas `localhost`, qui désigne le téléphone). Lance plutôt : + ```bash + EXPO_PUBLIC_API_URL=http://192.168.1.127:8000/api/v1 npx expo start + ``` + *(192.168.1.127 = IP actuelle de ton Mac. Si elle change, retrouve-la avec `ipconfig getifaddr en0`.)* +3. Ouvre **Expo Go** sur le téléphone → scanne le **QR code** affiché dans le terminal. + +### b) Sur simulateur iOS (Mac avec Xcode) +- Dans le terminal Expo, appuie sur **`i`** → l'app s'ouvre dans le simulateur. (Ici `localhost` fonctionne tel quel.) + +### c) Sur émulateur Android (Android Studio) +- Appuie sur **`a`**. (L'app utilise automatiquement `10.0.2.2` pour joindre l'API du Mac.) + +> Pour la soutenance, le plus fiable est de **montrer le web** (projeté) et d'**évoquer le mobile** avec 1-2 écrans (téléphone ou simulateur). Une double démo live = double risque. + +--- + +## 5. ⏹️ Arrêter / relancer + +```bash +docker compose down # arrête tout (les données de démo sont CONSERVÉES) +docker compose up -d # relance (le compte démo + les 18 saisies reviennent) +``` + +- ⚠️ **Ne jamais** faire `docker compose down -v` : le `-v` **efface** la base (tu perdrais les données de démo). Sans `-v`, tout est conservé dans le volume. +- Mobile : `Ctrl + C` dans le terminal Expo pour l'arrêter. + +--- + +## 6. 🧪 Lancer les tests (si on te le demande) + +```bash +# API (Laravel) — 15 tests +docker compose exec backend php artisan test +# ou en local : cd backend && php artisan test + +# Web (Next.js) — 6 tests +cd frontend && npm test + +# Mobile (Expo) — 4 tests +cd mobile && npm test +``` + +--- + +## 7. 🆘 Dépannage rapide + +| Problème | Solution | +|---|---| +| `Cannot connect to the Docker daemon` | Docker Desktop n'est pas lancé → ouvre-le, attends que la baleine soit active. | +| Port `3000`/`8000` déjà utilisé | Une appli occupe le port. Ferme-la, ou : `lsof -nP -iTCP:3000 -sTCP:LISTEN` pour l'identifier. | +| Le site charge mais « erreur réseau » | L'API n'est pas prête → `docker compose ps` (backend doit être Up) ; relance `docker compose up -d`. | +| Le mobile n'atteint pas l'API | Mauvaise URL → utilise `EXPO_PUBLIC_API_URL=http://:8000/api/v1` (étape 4a). | +| Repartir d'une base propre | `docker compose down -v && docker compose up -d` (⚠️ efface puis recrée tout, démo comprise). | + +--- + +### ✅ Checklist « 5 min avant l'oral » +- [ ] Docker Desktop lancé +- [ ] `docker compose up -d` exécuté · `docker compose ps` = tout **Up** +- [ ] Navigateur ouvert sur **http://localhost:3000**, **déjà connecté** en `demo@cesizen.fr` +- [ ] Page **Journal de bord** affichée, zoom à **125 %**, notifications coupées +- [ ] Slides ouvertes en second (`.pptx` + un export **PDF** de secours) diff --git a/Plan_Oral_CESIZen.md b/Plan_Oral_CESIZen.md index 6f14f2f..1db3699 100644 --- a/Plan_Oral_CESIZen.md +++ b/Plan_Oral_CESIZen.md @@ -2,7 +2,8 @@ **Apprenant :** Adam Marzuk · **Bloc :** INFCDAAL1 — Concevoir les solutions logicielles **Format :** 20 min de présentation + ~10 min de questions/réponses -**Support :** `CESIZen_Soutenance.pptx` (16 slides : 14 + 2 annexes) +**Support :** `CESIZen_Soutenance.pptx` (16 slides : 14 + 2 annexes) + **démo live de l'app** (compte `demo@cesizen.fr` / `Demo123!`) +**Antisèche à garder en main :** `Plan2_Oral_CESIZen.md` · **Lancement :** voir `Guide_Lancement_CESIZen.md` > Objectif : montrer la **démarche** (recueil → analyse → modélisation) autant que le résultat. > Le jury note aussi la **prise de parole** : posture, voix, regard, gestion du temps. @@ -13,16 +14,17 @@ | Temps | Slide(s) | Sujet | Messages clés à dire | |---|---|---|---| -| **0:00 – 2:00** (2′) | 1 — 2 | **Introduction** | Se présenter. Annoncer le commanditaire (Ministère) et l'objet : une plateforme grand public de santé mentale. Donner le fil rouge : « je vais dérouler le recueil du besoin, la priorisation, la réponse fonctionnelle, puis la modélisation technique et la conformité RGPD. » Présenter le sommaire (slide 2). | -| **2:00 – 5:00** (3′) | 3 — 4 | **Contexte, enjeux, parties prenantes** | Rappeler l'enjeu sociétal (22 % des Français, SPF 2023) et la stigmatisation. Énoncer les 4 objectifs stratégiques. Présenter les parties prenantes et les 3 acteurs (Visiteur, Utilisateur, Administrateur). Insister : « le besoin a été **reformulé**, pas recopié. » | -| **5:00 – 7:00** (2′) | 5 — 6 | **Besoins & priorisation** | Périmètre : 2 modules obligatoires + Tracker au choix ; modules écartés assumés. Présenter la grille pondérée /15 (5 critères). Conclusion argumentée : « le Tracker cumule 4 fonctionnalités à 9-10/15, c'est le module au choix le plus rentable. » | -| **7:00 – 12:00** (5′) | 7 — 8 — 9 | **Réponse fonctionnelle** | Module Comptes : JWT, RGPD, admin (slide 7 + maquette). Module Informations : feeds, modération, slug auto (slide 8). Module Tracker : wizard 3 étapes, journal, rapports 4 périodes, 6+36 émotions (slide 9 + maquettes). Montrer que chaque écran répond à un besoin précis. | -| **12:00 – 16:00** (4′) | 10 — 11 — 12 | **Modélisation** | Cas d'usage UML (slide 10) : couverture par acteur. MCD Merise (slide 11) : 8 entités, cardinalités, hiérarchie d'émotions auto-référencée. Architecture MVC découplée (slide 12) : 1 API REST Laravel → 2 clients ; justifier le pattern (testabilité, évolutivité, non-duplication). | -| **16:00 – 17:30** (1′30) | 13 | **RGPD & données sensibles** | Données de santé = sensibles (art. 9). Consentement, droits CNIL (export/anonymisation), soft delete. Sécurité : chiffrement AES-256/TLS, JWT, HDS, table audits. | -| **17:30 – 19:00** (1′30) | 14 | **Prototype & perspectives** | Prototype fonctionnel (Laravel + Next.js + Expo + Docker). Ouverture : activer les modules écartés sans réécrire le modèle, Open Data, Mon Espace Santé (FHIR), i18n. | +| **0:00 – 2:00** (2′) | 1 — 2 | **Introduction** | Se présenter. Annoncer le commanditaire (Ministère) et l'objet : une plateforme grand public de santé mentale. Donner le fil rouge : « je vais dérouler le recueil du besoin, la priorisation, la réponse fonctionnelle **avec une démonstration de l'application**, puis la modélisation technique et la conformité RGPD. » Présenter le sommaire (slide 2). | +| **2:00 – 4:30** (2′30) | 3 — 4 | **Contexte, enjeux, parties prenantes** | Rappeler l'enjeu sociétal (22 % des Français, SPF 2023) et la stigmatisation. Énoncer les 4 objectifs stratégiques. Présenter les parties prenantes et les 3 acteurs (Visiteur, Utilisateur, Administrateur). Insister : « le besoin a été **reformulé**, pas recopié. » | +| **4:30 – 6:00** (1′30) | 5 — 6 | **Besoins & priorisation** | Périmètre : 2 modules obligatoires + Tracker au choix ; modules écartés assumés. Grille pondérée /15 (5 critères). Conclusion : « le Tracker cumule 4 fonctionnalités à 9-10/15, c'est le module au choix le plus rentable. » | +| **6:00 – 8:30** (2′30) | 7 — 8 | **Réponse fonctionnelle (Comptes + Informations)** | Module Comptes : JWT, RGPD, admin (slide 7 + maquette). Module Informations : feeds, modération, slug auto (slide 8 + maquette). Enchaîner : « pour le Tracker, je vais vous le montrer en direct. » | +| **8:30 – 12:30** (4′) | démo live | **🎬 Démo de l'application — Tracker** | Sur l'app web (compte `demo@cesizen.fr` **déjà connecté**) : page Informations → journal de bord → **nouvelle saisie** (wizard 3 étapes : émotion → sous-émotion + intensité → date + note) → **Rapports** (changer la période : camembert + courbe d'évolution). 🛟 Si ça plante : basculer sur les maquettes (slide 9) sans s'excuser. | +| **12:30 – 16:00** (3′30) | 10 — 11 — 12 | **Modélisation** | Cas d'usage UML (slide 10) : couverture par acteur. MCD Merise (slide 11) : 8 entités, cardinalités, hiérarchie d'émotions auto-référencée. Architecture MVC découplée (slide 12) : 1 API REST Laravel → 2 clients ; justifier le pattern (testabilité, évolutivité, non-duplication). | +| **16:00 – 17:30** (1′30) | 13 | **RGPD & données sensibles** | Données de santé = sensibles (art. 9). Consentement, droits CNIL (export/anonymisation), soft delete. Sécurité : bcrypt (mots de passe), JWT, HDS, table audits ; chiffrement AES-256 au repos prévu en production. | +| **17:30 – 19:00** (1′30) | 14 | **Prototype & perspectives** | Prototype fonctionnel (Laravel + Next.js + Expo + Docker), **25 tests automatisés** (15 back + 6 front + 4 mobile). Ouverture : activer les modules écartés sans réécrire le modèle, Open Data, Mon Espace Santé (FHIR). | | **19:00 – 20:00** (1′) | 14 | **Conclusion** | Synthèse : besoin reformulé → périmètre priorisé → réponse fonctionnelle → architecture pérenne → conformité. Remercier, ouvrir les questions. | -**Repères de rythme :** ~1 slide / 1 min 20. Si retard à 12:00, raccourcir la modélisation (garder MCD + MVC, survoler les cas d'usage). +**Repères de rythme :** checkpoint mental à **12:30** (fin de la démo). Si retard, raccourcir la modélisation (garder MCD + MVC, survoler les cas d'usage) et garder 1 min pour conclure. ⚠️ **Lance la stack et connecte-toi AVANT d'entrer** dans la salle (sois déjà sur le journal de bord). --- @@ -53,7 +55,7 @@ ### Données & sécurité (RGPD) **Q8. Les données émotionnelles sont sensibles — comment êtes-vous conforme ?** -> Consentement explicite à l'inscription (case non pré-cochée), finalités documentées, droits CNIL implémentés (accès, rectification, effacement, portabilité via export JSON, anonymisation). Hébergement HDS, chiffrement AES-256 au repos et TLS en transit, table `audits` pour la traçabilité. +> Consentement explicite à l'inscription (case non pré-cochée), finalités documentées, droits CNIL implémentés (accès, rectification, effacement, portabilité via export JSON, anonymisation). Hébergement HDS, TLS en transit, **bcrypt** sur les mots de passe (chiffrement AES-256 au repos prévu pour la mise en production), table `audits` pour la traçabilité. **Q9. Différence entre soft delete et anonymisation ?** > Soft delete (`deleted_at`) = suppression réversible 30 j puis purge — pour le droit à l'effacement avec fenêtre de rétractation. Anonymisation = on dissocie les données de l'identité (note vidée, contacts supprimés) tout en gardant des statistiques agrégées non identifiantes. @@ -70,11 +72,17 @@ ### Questions « piège » fréquentes **Q13. Qu'est-ce qui est réellement développé vs spécifié ?** -> Un prototype fonctionnel des 3 modules (API + web + mobile) accompagne le dossier ; les spécifications détaillées couvrent les 2 modules obligatoires + le Tracker, conformément à la consigne. +> Un prototype fonctionnel des 3 modules (API + web + mobile) accompagne le dossier, avec **25 tests automatisés** (15 PHPUnit back, 6 Vitest web, 4 Jest mobile) ; les spécifications détaillées couvrent les 2 modules obligatoires + le Tracker, conformément à la consigne. **Q14. Si c'était à refaire, que changeriez-vous ?** > J'ajouterais des tests automatisés d'accessibilité RGAA dès le début, et je formaliserais un diagramme de classes en complément du MCD pour la couche métier. +**Q15. Ce que vous avez montré en démo est-il réel ?** +> Oui, c'est le prototype qui tourne en local (Docker) : API Laravel + front Next.js + PostgreSQL. Les saisies et les rapports affichés sont calculés en direct par l'API (service `RapportService`), pas des écrans figés. + +**Q16. Comment testez-vous la qualité du code ?** +> Tests automatisés sur les 3 briques, lançables en une commande : `php artisan test` (15 tests : auth, tracker, admin, RGPD), `npm test` côté web (Vitest : composants + store) et mobile (Jest : appels API). Plus le type-checking strict (TypeScript) et le linting (ESLint, Pint). + --- ## Conseils de prise de parole (la santé mentale… commence par la vôtre)