// ══════════════════════════════════════════════════════════════ // Soutenance — BLOC 3 (INFCDAAL3) // « Déployer et sécuriser les applications informatiques » // Style strictement calqué sur presentation.js (thème CESIZen). // Génération : node presentation_bloc3.js // ══════════════════════════════════════════════════════════════ const pptxgen = require("pptxgenjs"); const pres = new pptxgen(); pres.layout = "LAYOUT_16x9"; pres.author = "Sam DEPARDIEU"; pres.title = "CESIZen — Soutenance BLOC 3 (Déploiement & Sécurité)"; const C = { darkBg: "0D1B2A", lightBg: "F7F7F2", teal: "00BF63", yellow: "FFDE59", dark: "2D2D2D", navy: "1B2838", white: "FFFFFF", gray: "6B7280", border: "E5E7EB", }; // ─── Helpers (identiques à presentation.js) ───────────────── const topBar = (s) => s.addShape(pres.shapes.RECTANGLE, { x: 0, y: 0, w: 10, h: 0.09, fill: { color: C.teal }, line: { color: C.teal } }); const vLine = (s, x, y, h, color) => s.addShape(pres.shapes.RECTANGLE, { x, y, w: 0.07, h, fill: { color: color || C.teal }, line: { color: color || C.teal } }); const hLine = (s, x, y, w, color) => s.addShape(pres.shapes.RECTANGLE, { x, y, w, h: 0.02, fill: { color: color || C.border }, line: { color: color || C.border } }); function header(s, num, section, title) { topBar(s); s.addText(String(num).padStart(2, "0"), { x: 9.0, y: 0.11, w: 0.82, h: 0.38, fontSize: 14, color: C.teal, fontFace: "Calibri", bold: true, align: "right", margin: 0 }); s.addText(section.toUpperCase(), { x: 0.65, y: 0.13, w: 7, h: 0.26, fontSize: 9, color: C.gray, fontFace: "Calibri", charSpacing: 2, margin: 0 }); s.addShape(pres.shapes.RECTANGLE, { x: 0.65, y: 0.44, w: 0.55, h: 0.07, fill: { color: C.yellow }, line: { color: C.yellow } }); s.addText(title, { x: 0.65, y: 0.52, w: 8.7, h: 0.7, fontSize: 26, color: C.darkBg, fontFace: "Calibri", bold: false, margin: 0 }); hLine(s, 0.65, 1.25, 8.8); } // Carte (bloc encadré avec titre + lignes) function card(s, x, y, w, h, accent, title, lines) { s.addShape(pres.shapes.RECTANGLE, { x, y, w, h, fill: { color: C.white }, line: { color: C.border, width: 1 } }); vLine(s, x, y, h, accent); s.addText(title, { x: x + 0.2, y: y + 0.14, w: w - 0.35, h: 0.35, fontSize: 13.5, bold: true, color: C.darkBg, fontFace: "Calibri", margin: 0 }); s.addText(lines.map((t) => ({ text: t, options: { bullet: { code: "2022", indent: 12 }, color: C.dark, fontSize: 11, paraSpaceAfter: 4 } })), { x: x + 0.22, y: y + 0.52, w: w - 0.4, h: h - 0.62, fontFace: "Calibri", valign: "top", margin: 0 }); } // ─── SLIDE 01 — Couverture ────────────────────────────────── { const s = pres.addSlide(); s.background = { color: C.darkBg }; topBar(s); s.addShape(pres.shapes.RECTANGLE, { x: 0.7, y: 0.72, w: 0.55, h: 0.09, fill: { color: C.yellow }, line: { color: C.yellow } }); s.addText("CESIZEN", { x: 0.7, y: 0.83, w: 8.5, h: 1.25, fontSize: 54, color: C.white, fontFace: "Calibri", margin: 0 }); s.addText("Déploiement & Sécurisation de l'application", { x: 0.7, y: 2.05, w: 8.5, h: 0.5, fontSize: 18, color: C.teal, fontFace: "Calibri", margin: 0 }); hLine(s, 0.7, 2.78, 5.9, "374151"); s.addText("Soutenance CDA CESI — BLOC 3 · Déployer et sécuriser les applications", { x: 0.7, y: 2.9, w: 5.9, h: 0.38, fontSize: 12, color: "D1D5DB", fontFace: "Calibri", margin: 0 }); s.addText("Réf. : INFCDAAL3", { x: 0.7, y: 3.28, w: 5, h: 0.34, fontSize: 11, color: C.gray, fontFace: "Calibri", margin: 0 }); s.addText("Sam DEPARDIEU", { x: 0.7, y: 3.72, w: 5, h: 0.38, fontSize: 13, color: C.yellow, fontFace: "Calibri", margin: 0 }); s.addText("Juillet 2026", { x: 0.7, y: 4.12, w: 4, h: 0.35, fontSize: 12, color: C.gray, fontFace: "Calibri", margin: 0 }); // Panel droit teal s.addShape(pres.shapes.RECTANGLE, { x: 6.95, y: 0.09, w: 3.05, h: 5.535, fill: { color: C.teal }, line: { color: C.teal } }); s.addText("Au programme", { x: 7.1, y: 0.28, w: 2.75, h: 0.44, fontSize: 13, bold: true, color: C.white, fontFace: "Calibri", margin: 0 }); hLine(s, 7.1, 0.74, 2.7, "00995A"); ["Gestion de version", "Évolutions & maintenance", "Plan de déploiement", "CI/CD automatisée", "🔒 Sécurité & RGPD"].forEach((label, i) => { const hl = label.startsWith("🔒"); vLine(s, 7.1, 0.95 + i * 0.82, 0.6, hl ? C.yellow : C.white); s.addText(label, { x: 7.28, y: 1.03 + i * 0.82, w: 2.55, h: 0.44, fontSize: 12, color: hl ? C.yellow : C.white, fontFace: "Calibri", margin: 0 }); }); } // ─── SLIDE 02 — Sommaire ──────────────────────────────────── { const s = pres.addSlide(); s.background = { color: C.lightBg }; topBar(s); s.addShape(pres.shapes.RECTANGLE, { x: 0.65, y: 0.37, w: 0.55, h: 0.09, fill: { color: C.yellow }, line: { color: C.yellow } }); s.addText("SOMMAIRE", { x: 0.65, y: 0.47, w: 8, h: 0.88, fontSize: 34, color: C.darkBg, fontFace: "Calibri", margin: 0 }); hLine(s, 0.65, 1.38, 8.8); ["Contexte & objectifs du bloc", "Gestion des versions (Gitea)", "Gestion des évolutions & maintenance", "Plan de déploiement & environnements", "Intégration & déploiement continus (CI/CD)", "Plan de sécurisation & RGPD", "Bilan & livrables"].forEach((item, i) => { s.addText(String(i + 1).padStart(2, "0"), { x: 0.65, y: 1.6 + i * 0.5, w: 0.65, h: 0.38, fontSize: 16, color: C.teal, fontFace: "Calibri", margin: 0 }); s.addText(item, { x: 1.38, y: 1.63 + i * 0.5, w: 5.2, h: 0.36, fontSize: 13.5, color: C.dark, fontFace: "Calibri", margin: 0 }); }); // panel droit s.addShape(pres.shapes.RECTANGLE, { x: 6.95, y: 0.09, w: 3.05, h: 5.535, fill: { color: C.teal }, line: { color: C.teal } }); s.addText("Objectif", { x: 7.1, y: 0.35, w: 2.75, h: 0.4, fontSize: 13, bold: true, color: C.white, fontFace: "Calibri", margin: 0 }); hLine(s, 7.1, 0.78, 2.7, "00995A"); s.addText("Déployer et sécuriser une application déjà développée, dans un cadre professionnel et conforme au RGPD.", { x: 7.1, y: 0.95, w: 2.75, h: 1.4, fontSize: 12.5, color: C.white, fontFace: "Calibri", valign: "top", margin: 0 }); } // ─── SLIDE 03 — Contexte & objectifs ──────────────────────── { const s = pres.addSlide(); s.background = { color: C.lightBg }; header(s, 3, "Introduction", "Contexte & objectifs du bloc"); s.addText("L'application CESIZen (Web, Mobile, Wear OS) a été conçue et développée au BLOC 2. L'enjeu de ce bloc est de la mettre en service de façon fiable, automatisée et sécurisée.", { x: 0.65, y: 1.4, w: 8.8, h: 0.7, fontSize: 13, color: C.dark, fontFace: "Calibri", valign: "top", margin: 0 }); card(s, 0.65, 2.25, 4.35, 2.9, C.teal, "4 livrables attendus", [ "Outil de gestion de version", "Outil de gestion des évolutions", "Plan de déploiement (CI/CD)", "Plan de sécurisation (RGPD, chiffrement)"]); card(s, 5.15, 2.25, 4.3, 2.9, C.yellow, "Contexte du projet", [ "Projet (RE)Sources Relationnelles", "Données personnelles sensibles", "Exigences ministérielles & RGPD", "Architecture MVC (Laravel 12)"]); } // ─── SLIDE 04 — Gestion de version ────────────────────────── { const s = pres.addSlide(); s.background = { color: C.lightBg }; header(s, 4, "Maintenance", "Gestion des versions : Git + Gitea"); card(s, 0.65, 1.45, 4.35, 3.7, C.teal, "Gitea auto-hébergé", [ "gitea.sam-coffre.duckdns.org", "Souveraineté totale des données", "Très léger (~200 Mo RAM)", "CI/CD native intégrée", "Open source & gratuit"]); card(s, 5.15, 1.45, 4.3, 3.7, C.yellow, "Organisation Git", [ "Monorepo : WEB / mobile / Wear", "main : production", "develop : intégration", "feature/* : via Pull Request", "Conventional Commits + CHANGELOG"]); s.addText("Pourquoi Gitea plutôt que GitHub/GitLab ? → maîtrise de l'hébergement des données, indispensable pour un projet ministériel.", { x: 0.65, y: 5.05, w: 8.8, h: 0.4, fontSize: 11, italic: true, color: C.gray, fontFace: "Calibri", margin: 0 }); } // ─── SLIDE 05 — Évolutions & maintenance ──────────────────── { const s = pres.addSlide(); s.background = { color: C.lightBg }; header(s, 5, "Maintenance", "Gestion des évolutions & incidents"); card(s, 0.65, 1.45, 4.35, 2.5, C.teal, "Gitea Issues + formulaire in-app", [ "🐞 Rapport d'incident (correctif)", "✨ Demande d'évolution (évolutif)", "Formulaire du site → ticket Gitea (API)", "Champs structurés & priorité"]); card(s, 5.15, 1.45, 4.3, 2.5, C.yellow, "Pilotage", [ "Labels + tableau Kanban", "Jalons = versions (SemVer)", "Pull Request obligatoire"]); // Flux s.addText("Cycle de vie d'une demande", { x: 0.65, y: 4.15, w: 8.8, h: 0.3, fontSize: 12, bold: true, color: C.darkBg, fontFace: "Calibri", margin: 0 }); const steps = ["Nouveau", "Priorisé", "En cours", "En revue", "Déployé"]; steps.forEach((st, i) => { const x = 0.65 + i * 1.78; s.addShape(pres.shapes.RECTANGLE, { x, y: 4.5, w: 1.55, h: 0.55, fill: { color: i === 4 ? C.teal : C.navy }, line: { color: C.navy } }); s.addText(st, { x, y: 4.5, w: 1.55, h: 0.55, fontSize: 11, color: C.white, align: "center", valign: "middle", fontFace: "Calibri", margin: 0 }); if (i < 4) s.addText("→", { x: x + 1.5, y: 4.5, w: 0.32, h: 0.55, fontSize: 16, color: C.teal, align: "center", valign: "middle", margin: 0 }); }); } // ─── SLIDE 06 — Plan de déploiement (diagramme) ───────────── { const s = pres.addSlide(); s.background = { color: C.lightBg }; header(s, 6, "Déploiement", "Environnements & hébergement"); s.addText([ { text: "4 environnements : ", options: { bold: true } }, { text: "Développement → Test/CI → Préproduction → Production", options: {} }, ], { x: 0.65, y: 1.4, w: 8.8, h: 0.4, fontSize: 12.5, color: C.dark, fontFace: "Calibri", margin: 0 }); s.addImage({ path: "docs/img/diag_archi.png", x: 0.65, y: 1.95, w: 8.8, h: 2.68 }); s.addText("Production : cesizen.sam-coffre.duckdns.org — conteneurisée & orchestrée via Portainer, TLS géré par Nginx Proxy Manager.", { x: 0.65, y: 4.8, w: 8.8, h: 0.4, fontSize: 11, italic: true, color: C.gray, fontFace: "Calibri", margin: 0 }); } // ─── SLIDE 07 — CI/CD (diagramme) ─────────────────────────── { const s = pres.addSlide(); s.background = { color: C.lightBg }; header(s, 7, "Déploiement", "CI/CD automatisée — Gitea Actions"); s.addImage({ path: "docs/img/diag_cicd.png", x: 0.65, y: 1.4, w: 8.8, h: 3.5 }); s.addText("Un push lance style, analyse statique, tests & couverture ; une fusion sur main déclenche le déploiement SSH (mise à jour, conteneurs, migrations).", { x: 0.65, y: 4.95, w: 8.8, h: 0.4, fontSize: 11, italic: true, color: C.gray, fontFace: "Calibri", margin: 0 }); } // ─── SLIDE 08 — Sécurité (fond sombre) ────────────────────── { const s = pres.addSlide(); s.background = { color: C.darkBg }; topBar(s); s.addText("08", { x: 9.0, y: 0.11, w: 0.82, h: 0.38, fontSize: 14, color: C.teal, fontFace: "Calibri", bold: true, align: "right", margin: 0 }); s.addText("SÉCURITÉ", { x: 0.65, y: 0.13, w: 7, h: 0.26, fontSize: 9, color: "9CA3AF", fontFace: "Calibri", charSpacing: 2, margin: 0 }); s.addShape(pres.shapes.RECTANGLE, { x: 0.65, y: 0.44, w: 0.55, h: 0.07, fill: { color: C.yellow }, line: { color: C.yellow } }); s.addText("Plan de sécurisation & RGPD", { x: 0.65, y: 0.52, w: 8.7, h: 0.7, fontSize: 26, color: C.white, fontFace: "Calibri", margin: 0 }); hLine(s, 0.65, 1.25, 8.8, "374151"); const sec = [ ["Applicatif", ["Auth Sanctum + rôles (RBAC)", "CSRF, validation, en-têtes HTTP", "CSP / HSTS / X-Frame-Options"]], ["Chiffrement", ["HTTPS/TLS (Let's Encrypt)", "Mots de passe : bcrypt", "Sessions chiffrées"]], ["RGPD", ["Minimisation & consentement", "Droit à l'effacement", "Anonymisation des stats"]], ["Qualité", ["Pint + tests PHPUnit", "Audit des dépendances (CI)", "Revues via Pull Request"]], ]; sec.forEach(([title, lines], i) => { const x = 0.65 + (i % 2) * 4.5; const y = 1.5 + Math.floor(i / 2) * 1.95; s.addShape(pres.shapes.RECTANGLE, { x, y, w: 4.2, h: 1.75, fill: { color: C.navy }, line: { color: "374151", width: 1 } }); vLine(s, x, y, 1.75, C.teal); s.addText(title, { x: x + 0.2, y: y + 0.12, w: 3.8, h: 0.35, fontSize: 14, bold: true, color: C.yellow, fontFace: "Calibri", margin: 0 }); s.addText(lines.map((t) => ({ text: t, options: { bullet: { code: "2022", indent: 12 }, color: "E5E7EB", fontSize: 11, paraSpaceAfter: 3 } })), { x: x + 0.22, y: y + 0.5, w: 3.8, h: 1.15, fontFace: "Calibri", valign: "top", margin: 0 }); }); } // ─── SLIDE 09 — Analyse des risques (OWASP) ───────────────── { const s = pres.addSlide(); s.background = { color: C.lightBg }; header(s, 9, "Sécurité", "Analyse des risques & traitement"); const rows = [ ["Injection SQL", "ORM Eloquent / requêtes préparées"], ["XSS", "Échappement Blade + CSP"], ["CSRF", "Jeton CSRF Laravel"], ["Vol de session", "HTTPS forcé, cookies Secure, HSTS"], ["Dépendances vulnérables", "composer audit / npm audit (CI)"], ["Force brute", "Rate limiting"], ]; // en-tête tableau s.addShape(pres.shapes.RECTANGLE, { x: 0.65, y: 1.45, w: 4.3, h: 0.5, fill: { color: C.navy }, line: { color: C.navy } }); s.addShape(pres.shapes.RECTANGLE, { x: 4.95, y: 1.45, w: 4.5, h: 0.5, fill: { color: C.navy }, line: { color: C.navy } }); s.addText("Risque", { x: 0.8, y: 1.45, w: 4.1, h: 0.5, fontSize: 12, bold: true, color: C.white, valign: "middle", fontFace: "Calibri", margin: 0 }); s.addText("Mesure de prévention", { x: 5.1, y: 1.45, w: 4.3, h: 0.5, fontSize: 12, bold: true, color: C.white, valign: "middle", fontFace: "Calibri", margin: 0 }); rows.forEach((r, i) => { const y = 1.95 + i * 0.5; const bg = i % 2 ? "FFFFFF" : "EFF5F1"; s.addShape(pres.shapes.RECTANGLE, { x: 0.65, y, w: 4.3, h: 0.5, fill: { color: bg }, line: { color: C.border } }); s.addShape(pres.shapes.RECTANGLE, { x: 4.95, y, w: 4.5, h: 0.5, fill: { color: bg }, line: { color: C.border } }); s.addText(r[0], { x: 0.8, y, w: 4.1, h: 0.5, fontSize: 11, color: C.dark, valign: "middle", fontFace: "Calibri", margin: 0 }); s.addText(r[1], { x: 5.1, y, w: 4.3, h: 0.5, fontSize: 11, color: C.dark, valign: "middle", fontFace: "Calibri", margin: 0 }); }); } // ─── SLIDE 10 — Bilan & livrables ─────────────────────────── { const s = pres.addSlide(); s.background = { color: C.darkBg }; topBar(s); s.addShape(pres.shapes.RECTANGLE, { x: 0.7, y: 0.6, w: 0.55, h: 0.09, fill: { color: C.yellow }, line: { color: C.yellow } }); s.addText("Bilan & livrables", { x: 0.7, y: 0.72, w: 8.6, h: 0.9, fontSize: 34, color: C.white, fontFace: "Calibri", margin: 0 }); hLine(s, 0.7, 1.7, 8.6, "374151"); const items = [ ["Gestion de version", "Gitea auto-hébergé + stratégie de branches"], ["Évolutions & maintenance", "Gitea Issues, Kanban, SemVer, CHANGELOG"], ["Déploiement automatisé", "CI/CD Gitea Actions → Registry → Portainer"], ["Sécurité", "Chiffrement, en-têtes, RGPD, audits, tests"], ]; items.forEach((it, i) => { const y = 2.0 + i * 0.78; vLine(s, 0.7, y, 0.6, C.teal); s.addText(it[0], { x: 0.9, y: y - 0.02, w: 3.6, h: 0.4, fontSize: 14, bold: true, color: C.yellow, fontFace: "Calibri", margin: 0 }); s.addText(it[1], { x: 4.4, y: y - 0.02, w: 5.2, h: 0.4, fontSize: 12.5, color: "E5E7EB", fontFace: "Calibri", margin: 0 }); }); s.addText("Une base industrialisée, reproductible et sécurisée. Merci de votre attention — place aux questions.", { x: 0.7, y: 5.25, w: 8.8, h: 0.4, fontSize: 12, italic: true, color: C.teal, fontFace: "Calibri", margin: 0 }); } pres.writeFile({ fileName: "CESIZen_Presentation_Bloc3.pptx" }).then((f) => console.log("Généré :", f));