[
{
"term": "Netlify",
"cat": "hosting",
"badge": "Hébergement",
"definition": "Plateforme d'hébergement web qui publie tes applications sur internet. Tu déploies soit en glissant ton dossier directement (Netlify Drop), soit en connectant un dépôt GitHub pour un déploiement automatique à chaque modification. Toutes tes apps Etik Pharma y sont hébergées.",
"example_label": "Chez toi",
"example_text": "MicroConseil, SkinByEtikPharma, BilanbyEtikPharma, RelaisbyEtikPharma",
"tags": [
"hosting",
"HTTPS",
"CDN"
],
"keywords": "netlify hébergement déploiement hosting"
},
{
"term": "Netlify Drop",
"cat": "hosting",
"badge": "Hébergement",
"definition": "Mode de déploiement simplifié : tu glisses-déposes ton dossier de projet directement sur l'interface Netlify, sans passer par GitHub. Idéal pour les projets sans pipeline CI/CD. Inconvénient : chaque mise à jour nécessite de re-uploader tout le dossier.",
"example_label": "Ton workflow actuel pour",
"example_text": "MicroConseil (pas sur GitHub) → re-upload du dossier complet à chaque modif",
"tags": [
"Netlify",
"deploy",
"drag-and-drop",
"hosting"
],
"keywords": "netlify drop déploiement manuel upload glisser"
},
{
"term": "Déploiement (Deploy)",
"cat": "hosting",
"badge": "Hébergement",
"definition": "Action de mettre en ligne une nouvelle version de l'application. Chez Netlify, chaque déploiement crée un snapshot versionné — tu peux revenir à n'importe quelle version précédente en un clic (rollback). La branche \"main\" de GitHub correspond à la production.",
"example_label": "Procédure rollback",
"example_text": "Netlify > Deploys > clic sur un ancien deploy > \"Publish deploy\"",
"tags": [
"production",
"rollback",
"versioning"
],
"keywords": "déploiement deploy production prod branche main"
},
{
"term": "Preview Deploy",
"cat": "hosting",
"badge": "Hébergement",
"definition": "Déploiement de test sur une URL temporaire, distinct de la production. Quand tu pousses sur une branche GitHub autre que \"main\", Netlify crée automatiquement un aperçu accessible par lien unique. Permet de valider une modification avant de l'exposer aux utilisateurs réels.",
"example_label": "Principe",
"example_text": "branche \"feature/fix-bug\" → URL de preview → validation → merge sur main",
"tags": [
"staging",
"test"
],
"keywords": "preview deploy branche test staging"
},
{
"term": "Variable d'environnement (Env Var)",
"cat": "hosting",
"badge": "Hébergement",
"definition": "Valeur de configuration secrète stockée côté serveur, jamais dans le code. C'est ainsi que ta clé API Anthropic reste protégée : elle est déclarée dans Netlify sous la forme ANTHROPIC_API_KEY, et seul ton serveur y a accès — elle n'apparaît jamais dans le code public. À distinguer de **`.env`** (la fiche dédiée) qui est le fichier texte caché côté machine locale, où ces variables sont stockées en développement avant d'être déclarées dans le coffre Netlify pour la production.",
"example_label": "Tes variables critiques",
"example_text": "ANTHROPIC_API_KEY (MicroConseil) · ANTHROPIC_KEY (RelaisbyEtikPharma, SkinByEtikPharma)",
"tags": [
"sécurité",
"clé API",
"secret"
],
"keywords": "variable environnement env var clé secrète configuration .env dotenv fichier"
},
{
"term": "netlify.toml",
"cat": "hosting",
"badge": "Hébergement",
"definition": "Fichier de configuration Netlify placé à la racine du projet. Il indique à Netlify où se trouvent les fichiers à publier, où sont les fonctions serverless, et quels en-têtes HTTP appliquer. Sans ce fichier, les Netlify Functions ne sont pas reconnues.",
"example_label": "Contenu typique",
"example_text": "[build] publish=\".\" functions=\"netlify/functions\"",
"tags": [
"config",
"TOML"
],
"keywords": "netlify.toml configuration build fonctions"
},
{
"term": "CDN",
"cat": "hosting",
"badge": "Hébergement",
"definition": "Content Delivery Network — réseau de serveurs répartis dans le monde entier qui livrent les fichiers de ton application depuis le serveur le plus proche de l'utilisateur. Netlify utilise un CDN global, ce qui rend tes apps rapides partout dans le monde sans configuration supplémentaire.",
"example_label": "Pourquoi ton site est rapide à Tokyo",
"example_text": "# Sans CDN : chaque visiteur tape le serveur d'origine (Paris)\nTokyo → Paris : ~250 ms de latence par requête\n\n# Avec CDN (Netlify/Cloudflare) : copie au plus près\nTokyo → nœud CDN Tokyo : ~10 ms\n# Le HTML/JS/CSS/images sont servis par ~300 nœuds mondiaux,\n# l'origine n'est touchée qu'à l'invalidation du cache",
"tags": [
"performance",
"réseau"
],
"keywords": "CDN content delivery network réseau distribution contenu"
},
{
"term": "GitHub Pages",
"cat": "hosting",
"badge": "Hébergement",
"definition": "Service d'hébergement gratuit intégré à GitHub, qui publie automatiquement le contenu d'un repo sur une URL github.io. Limites importantes : uniquement pour les sites statiques (pas de Netlify Functions, donc pas de proxy API Anthropic), et disponible uniquement sur les repos publics avec le plan GitHub gratuit. C'est pourquoi RetrobyEtikPharma a migré de GitHub Pages vers Netlify : le repo est passé en private, rendant GitHub Pages indisponible.",
"example_label": "Ancienne URL",
"example_text": "mehdifqwqfq.github.io/RetrobyEtikPharma → migrée vers retrobyetikpharma.netlify.app",
"tags": [
"statique",
"gratuit",
"repo public requis"
],
"keywords": "GitHub Pages hébergement statique gratuit domaine github.io"
},
{
"term": "HDS — Hébergement Données de Santé",
"cat": "hosting",
"badge": "Réglementaire",
"definition": "Certification française obligatoire pour tout hébergement de données de santé à caractère personnel (dossiers patients, prescriptions nominatives). Délivrée par l'ANS (Agence du Numérique en Santé). Netlify et Firebase ne sont pas certifiés HDS — ils sont acceptables pour des outils internes sans données patient nominatives (planning, rétrocessions, transmissions). Dès qu'une app stocke des informations de santé identifiables, un hébergeur certifié HDS est obligatoire (OVHcloud HDS, Microsoft Azure Santé France…). Coût significativement plus élevé.",
"example_label": "Règle pratique",
"example_text": "Nom + pathologie + ordonnance = HDS obligatoire · Planning équipe + transmissions internes = Netlify/Firebase OK",
"tags": [
"réglementation",
"ANS",
"données santé",
"certification"
],
"keywords": "HDS hébergement données santé certifié RGPD médical agrément ANS"
},
{
"term": "White-label (marque blanche)",
"cat": "hosting",
"badge": "Stratégie",
"definition": "Modèle de distribution où une app est revendue sous la marque d'un autre acteur, sans que l'auteur original soit visible. Dans le contexte Etik Pharma : une app développée pour Pharmacie des Théâtres peut être re-déployée pour un groupement (Pharmavance, Cencora) sous leur identité visuelle, avec un Firebase projet dédié par client. Chaque instance est indépendante, les données ne se mélangent pas. C'est l'un des modèles économiques discutés avec Pogodalla.",
"example_label": "Pattern technique",
"example_text": "Un Firebase projet par pharmacie déployée → données isolées · Même codebase · Couleurs/logo adaptés",
"tags": [
"marque blanche",
"multi-déploiement",
"Cencora"
],
"keywords": "white-label marque blanche déploiement multi-clients personnalisation réseau"
},
{
"term": "Firebase",
"cat": "firebase",
"badge": "Firebase",
"definition": "Plateforme Google qui fournit une suite de services backend (base de données, stockage de fichiers, authentification) sans que tu aies à gérer un serveur. Tes apps multi-utilisateurs (RelaisbyEtikPharma, RétroPharm, PrepbyEtikPharma) s'appuient dessus pour synchroniser les données en temps réel entre tous les appareils.",
"example_label": "Apps concernées",
"example_text": "RelaisbyEtikPharma · RétroPharm · PrepbyEtikPharma",
"tags": [
"BaaS",
"Google",
"temps réel"
],
"keywords": "firebase google backend base données cloud"
},
{
"term": "Firestore",
"cat": "firebase",
"badge": "Firebase",
"definition": "La base de données principale de Firebase. Elle fonctionne en NoSQL : les données sont organisées en \"collections\" (comme des dossiers) contenant des \"documents\" (comme des fiches). Toute modification est synchronisée en temps réel sur tous les appareils connectés. Chaque pharmacie Etik a sa propre collection.",
"example_label": "Structure RelaisbyEtikPharma",
"example_text": "collection \"pharmacie_fontaine\" > documents (une entrée = une transmission)",
"tags": [
"NoSQL",
"temps réel",
"collection"
],
"keywords": "firestore base données nosql collection document"
},
{
"term": "Firebase Storage",
"cat": "firebase",
"badge": "Firebase",
"definition": "Service Firebase dédié au stockage de fichiers : photos, PDF, images. Quand un collaborateur prend une photo d'ordonnance dans PrepbyEtikPharma ou joint une image dans RelaisbyEtikPharma, le fichier est envoyé sur Firebase Storage et seule son URL est sauvegardée en Firestore.",
"example_label": "Usage",
"example_text": "Photos d'ordonnances, bons de traçabilité, pièces jointes transmissions",
"tags": [
"fichiers",
"images",
"upload"
],
"keywords": "firebase storage stockage fichiers images pièces jointes"
},
{
"term": "Firebase Auth",
"cat": "firebase",
"badge": "Firebase",
"definition": "Module d'authentification de Firebase. Il gère les connexions utilisateurs et émet des \"tokens\" (jetons d'identification) qui prouvent que l'utilisateur est bien qui il prétend être. La méthode onAuthStateChanged permet de détecter si un utilisateur est connecté ou non à tout moment dans l'application.",
"example_label": "Comportement",
"example_text": "Token expiré → page blanche silencieuse si onAuthStateChanged n'est pas géré",
"tags": [
"login",
"token",
"session"
],
"keywords": "firebase auth authentification connexion login session token"
},
{
"term": "Règles de sécurité Firestore",
"cat": "firebase",
"badge": "Firebase",
"definition": "Règles définissant qui peut lire ou écrire dans la base de données. Trop restrictives → l'app ne peut plus enregistrer de données (erreur 403, souvent silencieuse). Trop permissives → n'importe qui pourrait lire ou modifier tes données. À auditer en cas de bug de sauvegarde inexpliqué.",
"example_label": "Symptôme typique",
"example_text": "Données qui \"disparaissent\" → règles Firestore trop strictes, écriture bloquée sans message d'erreur",
"tags": [
"sécurité",
"403",
"permissions"
],
"keywords": "règles firestore sécurité permissions accès read write"
},
{
"term": "Transaction Firestore",
"cat": "firebase",
"badge": "Firebase",
"definition": "Opération d'écriture \"tout ou rien\" : soit toutes les modifications s'appliquent ensemble, soit aucune. Protège contre les données à moitié écrites (ex : réseau coupé en cours de sauvegarde) et les conflits quand deux utilisateurs modifient le même document simultanément.",
"example_label": "Usage recommandé",
"example_text": "Validation d'une demande de rétrocession, confirmation d'une transmission critique",
"tags": [
"cohérence",
"atomique",
"concurrent"
],
"keywords": "transaction firestore atomique écriture simultanée cohérence"
},
{
"term": "Plan Spark / Blaze (Firebase)",
"cat": "firebase",
"badge": "Firebase",
"definition": "Spark est le plan gratuit de Firebase avec des limites de lectures/écritures quotidiennes. Blaze est le plan pay-as-you-go (tu paies uniquement ce que tu consommes au-delà du quota gratuit). Pour PrepbyEtikPharma avec conservation 3 ans, le plan Blaze est recommandé dès le départ.",
"example_label": "Le piège du passage Spark → Blaze",
"example_text": "# Spark (gratuit) : Firestore/Auth/Hosting plafonnés, PAS de Cloud Functions\n# Blaze (pay-as-you-go) : tout débloqué, facturation à l'usage\n\n# RÈGLE VÉCUE (memory firebase_blaze_avant_firestore) :\n# activer Blaze AVANT de créer Firestore dans un nouveau projet,\n# sinon erreur \"billing required\" en plein milieu du setup",
"tags": [
"gratuit",
"quota",
"facturation"
],
"keywords": "spark blaze plan gratuit payant quota firebase"
},
{
"term": "Index Firestore",
"cat": "firebase",
"badge": "Firebase",
"definition": "Structure d'optimisation nécessaire pour les requêtes complexes (filtres sur plusieurs champs simultanément). Sans index, Firestore retourne simplement rien — sans message d'erreur explicite. Firebase Console indique automatiquement quels index créer quand une requête échoue.",
"example_label": "Quand Firestore réclame son index",
"example_text": "// Cette requête composée échoue en console :\ndb.collection('ventes')\n .where('pharmacie', '==', 'theatres')\n .orderBy('date', 'desc') // ← FAILED_PRECONDITION: index required\n\n// Firestore log un LIEN direct \"create index\" → 1 clic,\n// ~2 min de build, puis la requête passe. Les index simples\n// (1 champ) sont automatiques, les composés sont à déclarer.",
"tags": [
"performance",
"requête",
"debug"
],
"keywords": "index firestore requête composite performance"
},
{
"term": "onSnapshot",
"cat": "firebase",
"badge": "Firebase",
"definition": "Méthode Firebase Firestore qui abonne l'application aux changements d'un document ou d'une collection en temps réel. Dès qu'une donnée change sur le serveur, la fonction callback est appelée automatiquement — sans que l'utilisateur ait besoin de rafraîchir. C'est le mécanisme qui fait que AchatsbyEtikPharma affiche instantanément les RDV créés par Alexandre sur le téléphone de Mehdi.",
"example_label": "Vs lecture simple",
"example_text": "get() = lecture ponctuelle · onSnapshot() = écoute permanente qui réagit à chaque modification",
"tags": [
"temps réel",
"listener",
"callback"
],
"keywords": "onSnapshot listener temps réel Firestore abonnement changement données"
},
{
"term": "Cloud Function Firebase (natif)",
"cat": "firebase",
"badge": "Firebase",
"definition": "Fonctions serverless hébergées nativement sur Google Cloud et déclenchées automatiquement par des événements Firebase — écriture Firestore, upload Storage, authentification, requête HTTPS. Contrairement aux Netlify Functions (déclenchées uniquement par requête HTTP), les Cloud Functions Firebase peuvent réagir directement à des événements internes : \"quand une nouvelle transmission est créée dans Firestore, envoyer automatiquement un email\". Plus puissantes et mieux intégrées à l'écosystème Firebase, mais nécessitent le plan Blaze (payant) et une configuration Google Cloud plus complexe. Avec tes crédits Google Cloud actifs (~339€), c'est une alternative crédible aux Netlify Functions pour les workflows événementiels.",
"example_label": "Cas d'usage",
"example_text": "Nouvelle entrée Firestore PrepbyEtikPharma → Cloud Function → envoi email automatique → sans requête HTTP depuis le client",
"tags": [
"trigger",
"événement",
"Blaze",
"Google Cloud",
"automatisation"
],
"keywords": "Cloud Function Firebase natif serverless déclencheur événement Firestore trigger backend Google Cloud"
},
{
"term": "Custom Claims",
"cat": "firebase",
"badge": "Firebase Auth",
"definition": "Métadonnées personnalisées attachées à un token JWT Firebase via l'Admin SDK côté serveur. Permettent d'encoder des informations métier directement dans le token d'authentification : pharmacyId, role (admin/collaborateur), modules[] (liste des modules accessibles). Ces claims sont vérifiables côté client sans requête Firestore supplémentaire — le token les transporte. Clé de voûte de l'architecture multi-tenant EtikPharma : chaque pharmacie a ses propres claims qui définissent exactement ce à quoi elle a accès.",
"example_label": "Structure",
"example_text": "{ pharmacyId: \"fontaine\", role: \"admin\", modules: [\"relais\",\"bilan\",\"prep\"] } → encodé dans le JWT à chaque connexion",
"tags": [
"JWT",
"Admin SDK",
"droits",
"token",
"multi-tenant"
],
"keywords": "custom claims JWT token métadonnées admin SDK pharmacyId role modules droits"
},
{
"term": "pharmacyId",
"cat": "firebase",
"badge": "Firebase",
"definition": "Identifiant unique d'une pharmacie dans l'architecture EtikPharma — distinct de l'uid Firebase Auth (qui identifie l'utilisateur). Le pharmacyId est une clé métier (ex: \"fontaine\", \"rochechouart\") utilisée pour isoler les données de chaque pharmacie dans Firestore (collection pharmacies/{pharmacyId}/...) et pour filtrer les droits via les Custom Claims. Présent dans chaque document Firestore et dans chaque token JWT pour garantir qu'un utilisateur ne peut accéder qu'aux données de sa pharmacie.",
"example_label": "Isolation",
"example_text": "uid Firebase = \"qui tu es\" · pharmacyId = \"à quelle pharmacie tu appartiens\" · Les deux sont nécessaires",
"tags": [
"multi-tenant",
"isolation",
"clé métier",
"Firestore"
],
"keywords": "pharmacyId identifiant pharmacie unique EtikPharma tenant uid Firebase distinct"
},
{
"term": "Force-refresh token",
"cat": "firebase",
"badge": "Firebase Auth",
"definition": "Appel user.getIdToken(true) qui force Firebase à recharger le JWT depuis le serveur en invalidant le cache local. Indispensable après une mise à jour des Custom Claims côté Admin SDK : Firebase met les tokens en cache (jusqu'à 1h par défaut), donc les nouveaux claims (nouveau module accordé, changement de rôle) ne seront pas visibles immédiatement sans ce force-refresh. Le paramètre true est le signal du \"ignore le cache, redemande un token frais\". À appeler après toute modification de droits en production.",
"example_label": "Pattern",
"example_text": "Admin ajoute module \"prep\" dans claims → appel force-refresh → nouveau token JWT → Auth Guard voit le nouveau module → accès accordé",
"tags": [
"cache",
"getIdToken(true)",
"claims mis à jour",
"droits"
],
"keywords": "force refresh token getIdToken true recharger JWT custom claims mise à jour synchronisation"
},
{
"term": "initializeApp()",
"cat": "firebase",
"badge": "Firebase",
"definition": "Fonction d'entrée unique du SDK Firebase — la première ligne à exécuter dans toute app qui utilise Firebase. Elle reçoit l'objet firebaseConfig (contenant les identifiants de ton projet : apiKey, projectId, storageBucket…) et initialise la connexion à Firebase. À partir de cette instance, tous les autres services se branchent : getAuth(app), getFirestore(app), getStorage(app). À appeler une seule fois au démarrage — un double appel génère une erreur \"Firebase App named '[DEFAULT]' already exists\". Bonne pratique : isoler initializeApp() dans un fichier firebase-config.js dédié, exporté et importé partout où nécessaire.",
"example_label": "Pattern standard Etik Pharma",
"example_text": "firebase-config.js → initializeApp(config) → export const db, auth, storage → import dans chaque module",
"tags": [
"SDK",
"configuration",
"démarrage",
"point d'entrée",
"une seule fois"
],
"keywords": "initializeApp firebase config initialisation démarrage point entrée SDK app projet connexion"
},
{
"term": "Proxy serverless",
"cat": "api",
"badge": "API",
"definition": "Intermédiaire serveur placé entre ton application (navigateur) et l'API Anthropic. Le navigateur ne parle jamais directement à Anthropic — il passe par ta Netlify Function (chat.js) qui détient la clé API. Résultat : la clé n'est jamais visible dans le code public.",
"example_label": "Architecture",
"example_text": "Navigateur → /.netlify/functions/chat.js → api.anthropic.com/v1/messages",
"tags": [
"sécurité",
"clé cachée",
"intermédiaire"
],
"keywords": "proxy serverless netlify function intermédiaire clé API sécurité"
},
{
"term": "CORS",
"cat": "api",
"badge": "API",
"definition": "Cross-Origin Resource Sharing — mécanisme de sécurité du navigateur qui bloque les appels vers un serveur d'un autre domaine, sauf autorisation explicite. Si tu vois une erreur CORS dans la console, c'est que les en-têtes de ta Netlify Function ne déclarent pas correctement l'origine autorisée.",
"example_label": "Solution",
"example_text": "Ajouter dans netlify.toml : Access-Control-Allow-Origin: \"*\"",
"tags": [
"sécurité navigateur",
"headers",
"erreur fréquente"
],
"keywords": "CORS erreur origin cross-origin headers"
},
{
"term": "fetch() / async-await",
"cat": "api",
"badge": "API",
"definition": "fetch() est la fonction JavaScript qui envoie une requête HTTP à un serveur et attend sa réponse. \"async/await\" est la syntaxe qui permet d'attendre le résultat sans bloquer le reste de l'application. Tous les appels à Claude et à Firebase dans tes apps utilisent ce mécanisme.",
"example_label": "Schéma type",
"example_text": "const res = await fetch('/api/...'); const data = await res.json();",
"tags": [
"JavaScript",
"asynchrone",
"promesse"
],
"keywords": "fetch requête HTTP GET POST asynchrone async await"
},
{
"term": "Erreur 429 — Too Many Requests",
"cat": "api",
"badge": "Erreur HTTP",
"definition": "Le serveur refuse la requête parce que tu as dépassé la limite d'utilisation autorisée (quota de l'API). Pour Anthropic : quota mensuel dépassé ou trop de requêtes par minute (RPM). Pour Bon App! / Gemini : plan gratuit qui ne supporte pas la génération d'images.",
"example_label": "Chez toi",
"example_text": "RelaisbyEtikPharma en panne (crédits Anthropic épuisés) · Bon App! (quota gratuit Gemini image)",
"tags": [
"quota",
"rate limit",
"Anthropic"
],
"keywords": "429 erreur quota rate limit trop de requêtes"
},
{
"term": "Codes erreur HTTP",
"cat": "api",
"badge": "API",
"definition": "Codes numériques indiquant le résultat d'une requête. 401 = clé API invalide ou expirée. 403 = accès refusé (règles Firestore trop strictes). 500 = erreur interne dans ta Netlify Function (bug dans le code serveur). 502/504 = timeout, la fonction a mis trop longtemps à répondre.",
"example_label": "Référence rapide",
"example_text": "401 clé invalide · 403 accès refusé · 429 quota · 500 bug serveur · 504 timeout",
"tags": [
"debug",
"HTTP"
],
"keywords": "401 403 500 erreur HTTP serveur authentification"
},
{
"term": "JSON",
"cat": "api",
"badge": "API",
"definition": "JavaScript Object Notation — format universel d'échange de données entre applications. Toutes tes apps envoient et reçoivent des données en JSON : requêtes à Claude, réponses Firestore, configuration. C'est comme un formulaire structuré lisible à la fois par les humains et les machines.",
"example_label": "Exemple",
"example_text": "{\"role\":\"user\",\"content\":\"Donne-moi un conseil sur la fatigue\"}",
"tags": [
"format",
"données",
"universel"
],
"keywords": "JSON format données échange structure clé valeur"
},
{
"term": "EmailJS",
"cat": "api",
"badge": "API",
"definition": "Service permettant d'envoyer des emails directement depuis le navigateur, sans serveur email dédié. Utilisé dans BilanbyEtikPharma et PrepbyEtikPharma pour envoyer les rapports à[email protected]. Ton compte Infomaniak est configuré avec Host=mail.infomaniak.com, Port=465, SSL=oui.",
"example_label": "Config validée",
"example_text": "SMTP Infomaniak ·[email protected]· Host mail.infomaniak.com Port 465",
"tags": [
"email",
"SMTP",
"Infomaniak"
],
"keywords": "EmailJS email envoi mail SMTP formulaire sans serveur"
},
{
"term": "User-Agent",
"cat": "api",
"badge": "API",
"definition": "En-tête HTTP qui identifie le navigateur ou le client faisant la requête. Chaque navigateur envoie un User-Agent différent (ex:Mozilla/5.0 Chrome/120…). Les serveurs l'utilisent pour adapter les réponses ou détecter les bots. En scraping, on le falsifie souvent pour imiter un vrai navigateur et éviter le blocage.",
"example_label": "Scraping Alliance Healthcare",
"example_text": "Sans User-Agent valide dans les headers, les requêtes cURL vers l'API Alliance sont rejetées par Cloudflare avant même d'atteindre le serveur.",
"tags": [
"header",
"identité",
"anti-bot",
"scraping"
],
"keywords": "user-agent navigateur identité client header HTTP scraping bot détection fingerprint"
},
{
"term": "Payload",
"cat": "api",
"badge": "API",
"definition": "Le corps de données envoyé dans une requête HTTP POST ou PUT. Contrairement à la query string (visible dans l'URL), le payload est dans le « paquet » de la requête. Il contient les données de formulaire, les identifiants de connexion, les filtres de recherche, ou un objet JSON complet. C'est la partie utile de la requête — ce que le serveur va traiter.",
"example_label": "Login HubPharma",
"example_text": "Le payload du POST de connexion contient {username, password, grant_type} en JSON — c'est ce que le script console envoie pour s'authentifier via Keycloak.",
"tags": [
"POST",
"body",
"JSON",
"formulaire"
],
"keywords": "payload corps requête POST données envoyées body login formulaire JSON"
},
{
"term": "Query String",
"cat": "api",
"badge": "API",
"definition": "Les paramètres visibles dans l'URL après le caractère?, séparés par&. Ex :?page=2&date=2026-04&status=paid. Utilisés dans les requêtes GET pour filtrer, paginer ou transmettre des critères sans modifier le corps de la requête. En scraping, les analyser permet de comprendre comment un site filtre ses données.",
"example_label": "Factures DigiPharmacie",
"example_text": "L'URL de la page factures contient ?startDate=2026-01-01&endDate=2026-04-15 — modifier ces paramètres dans le script permet de récupérer n'importe quelle période.",
"tags": [
"URL",
"GET",
"filtre",
"pagination"
],
"keywords": "query string paramètres URL GET interrogation filtre page date recherche"
},
{
"term": "Cookie / Session HTTP",
"cat": "api",
"badge": "API",
"definition": "Un cookie est un petit fichier texte stocké par le navigateur, envoyé automatiquement avec chaque requête vers le même domaine. Le cookie de session contient un identifiant unique qui prouve au serveur que tu es déjà authentifié — tu n'as pas besoin de retaper ton mot de passe à chaque page. En scraping, capturer et réutiliser ce cookie permet de maintenir la session ouverte dans les requêtes automatisées.",
"example_label": "Session Alliance Healthcare",
"example_text": "Après le login, le cookie JSESSIONID est posé — le script doit le récupérer et l'inclure dans tous les headers des requêtes suivantes pour accéder aux factures.",
"tags": [
"authentification",
"session",
"header",
"scraping"
],
"keywords": "cookie session HTTP authentification jeton token stockage navigateur persistance connexion"
},
{
"term": "XHR / AJAX",
"cat": "api",
"badge": "API",
"definition": "Requêtes réseau effectuées en arrière-plan sans recharger la page (XMLHttpRequest ou fetch). C'est ce qui permet à un tableau de se mettre à jour dynamiquement quand tu changes un filtre. Dans l'onglet Network de DevTools, filtrer par XHR révèle les appels API cachés — c'est là que se trouvent la majorité des données intéressantes à scraper, souvent en JSON pur.",
"example_label": "Reverse engineering portails",
"example_text": "En filtrant Network > XHR sur HubPharma, on découvre les endpoints API REST cachés derrière l'interface — beaucoup plus simples à scraper que le HTML.",
"tags": [
"asynchrone",
"fetch",
"Network",
"DevTools"
],
"keywords": "XHR AJAX requête asynchrone fetch XMLHttpRequest réseau dynamique SPA chargement"
},
{
"term": "Manifest.json (Web App Manifest)",
"cat": "pwa",
"badge": "PWA",
"definition": "Fichier de description de l'application : son nom, ses icônes, ses couleurs, son comportement à l'installation (plein écran, orientation). C'est lui qui rend l'app installable. Dans tes apps, il est souvent généré en JavaScript (Blob URL) directement dans le HTML pour éviter un fichier séparé.",
"example_label": "Technique Blob URL",
"example_text": "Le manifest est injecté via JS en base64 dans la balisepour single-file deploy",
"tags": [
"installation",
"icône",
"config"
],
"keywords": "manifest.json manifeste nom icône couleur configuration app"
},
{
"term": "Service Worker",
"cat": "pwa",
"badge": "PWA",
"definition": "Script JavaScript qui tourne en arrière-plan, indépendamment de la page. Il intercepte les requêtes réseau et peut servir des fichiers depuis un cache local, permettant à l'app de fonctionner sans connexion. Nécessite HTTPS pour fonctionner — garanti par Netlify.",
"example_label": "Le SW en 3 événements",
"example_text": "// sw.js — proxy programmable entre l'app et le réseau\nself.addEventListener('install', e => {\n e.waitUntil(caches.open('v2').then(c => c.addAll(['/']))); });\nself.addEventListener('activate', e => {\n e.waitUntil(cleanOldCaches()); });\nself.addEventListener('fetch', e => {\n e.respondWith(caches.match(e.request)\n .then(hit => hit ?? fetch(e.request))); }); // cache-first",
"tags": [
"cache",
"offline",
"background"
],
"keywords": "service worker cache offline arrière-plan push notification"
},
{
"term": "Base64 (encodage d'image)",
"cat": "pwa",
"badge": "PWA",
"definition": "Méthode pour transformer un fichier image en chaîne de texte et l'incorporer directement dans le HTML, sans fichier externe. Utilisé pour les icônes PWA dans tes apps single-file : l'icône Etik Pharma est encodée en base64 et écrite directement dans index.html, évitant tout fichier PNG séparé.",
"example_label": "Exemple",
"example_text": "<img src=\"data:image/png;base64,iVBOR...\"> → pas de fichier icon.png nécessaire",
"tags": [
"icône",
"inline",
"single-file"
],
"keywords": "base64 image encodée inline sans fichier externe icône"
},
{
"term": "localStorage",
"cat": "pwa",
"badge": "PWA",
"definition": "Stockage de données local au navigateur, persistant même après fermeture. Les données restent sur l'appareil (pas sur un serveur). Utilisé dans Planning PWA pour sauvegarder le planning, et dans Poppy Playtime pour le classement. Limité à un seul appareil — contrairement à Firebase qui synchronise partout.",
"example_label": "Usage Planning PWA",
"example_text": "localStorage.setItem('planning', JSON.stringify(data)) → données conservées après fermeture",
"tags": [
"persistance",
"local",
"pas de serveur"
],
"keywords": "localStorage sessionStorage stockage navigateur persistance données"
},
{
"term": "Visibilité d'un repo (Public / Private)",
"cat": "git",
"badge": "Git",
"definition": "Paramètre GitHub qui contrôle qui peut voir le code. Public : accessible à tout internet — lisible, clonable, indexable par Google. Private : visible uniquement par toi et les collaborateurs invités. Pour des apps médicales et professionnelles, Private est la norme. Le changement se fait dans Settings > Danger Zone > Change visibility et n'a aucun impact sur le déploiement Netlify.",
"example_label": "Tes repos",
"example_text": "RelaisbyEtikPharma → Private ✅ · RétroPharm → Public template ⚠ → à passer Private · Planning PWA → Public ⚠ → à passer Private",
"tags": [
"sécurité",
"accès",
"Danger Zone"
],
"keywords": "repository public privé private visibilité accès clone fork code source"
},
{
"term": "Public Template (GitHub)",
"cat": "git",
"badge": "Git",
"definition": "Statut GitHub qui propose un repo comme point de départ pour créer un nouveau projet (\"Use this template\"). C'est une fonctionnalité de réutilisation, pas un niveau de protection — un repo \"Public template\" est aussi visible que n'importe quel repo Public. Aucun avantage sécuritaire. Le template permet de créer une copie propre du code (sans l'historique des commits) dans un nouveau repo.",
"example_label": "Piège",
"example_text": "\"Template\" ne veut pas dire \"protégé\" — c'est simplement un repo public avec un bouton \"Use this template\" en plus",
"tags": [
"réutilisation",
"pas de protection",
"boilerplate"
],
"keywords": "template repo public template réutilisation point départ boilerplate github"
},
{
"term": "Clone / Fork",
"cat": "git",
"badge": "Git",
"definition": "Clone : copie locale d'un repo GitHub sur ton ordinateur pour travailler dessus. Fork : copie d'un repo public dans ton propre compte GitHub — tu en deviens propriétaire et tu peux le modifier librement. Point critique : si quelqu'un a forké un repo avant que tu le passes en Private, sa copie reste publique. Passer un repo en Private ne retire pas les forks existants.",
"example_label": "Conséquence",
"example_text": "RétroPharm était public → si quelqu'un l'a forké avant le passage en Private, sa copie reste accessible",
"tags": [
"copie",
"local",
"fork irréversible"
],
"keywords": "clone fork copie repo télécharger dupliquer code source"
},
{
"term": "Danger Zone (GitHub Settings)",
"cat": "git",
"badge": "Git",
"definition": "Section en bas des paramètres d'un repo GitHub regroupant les actions irréversibles ou à fort impact : changer la visibilité (Public ↔ Private), transférer le repo à un autre compte, archiver ou supprimer le repo. Chaque action demande une confirmation explicite (saisir le nom du repo) pour éviter les erreurs accidentelles.",
"example_label": "Accès",
"example_text": "github.com/Mehdifqwqfq/[repo] > Settings > scroll bas > Danger Zone > Change visibility",
"tags": [
"paramètres",
"irréversible",
"confirmation"
],
"keywords": "danger zone github paramètres sensibles suppression visibilité"
},
{
"term": "Repository (Repo)",
"cat": "git",
"badge": "Git",
"definition": "Dépôt de code — le dossier versionné qui contient tous les fichiers d'un projet ainsi que l'intégralité de leur historique de modifications. Hébergé sur GitHub, il est la source de vérité du projet : chaque collaborateur travaille sur une copie locale (clone), puis synchronise ses changements. Chacune de tes apps a son propre repo sur github.com/Mehdifqwqfq/.",
"example_label": "Tes repos",
"example_text": "RetrobyEtikPharma · RelaisbyEtikPharma · Planning PWA — chacun = un repo indépendant",
"tags": [
"dépôt",
"source de vérité",
"historique"
],
"keywords": "repository repo dépôt projet dossier code versionné GitHub"
},
{
"term": "Dependabot",
"cat": "git",
"badge": "Git",
"definition": "Robot automatique de GitHub qui surveille les dépendances d'un projet (bibliothèques tierces déclarées dans package.json) et alerte si l'une d'elles contient une faille de sécurité connue. Uniquement pertinent pour les projets avec des dépendances npm gérées via package.json. Pour tes apps single-file HTML sans package.json dans le repo, Dependabot ne fait rien — son désactivation lors du passage en Private est sans conséquence.",
"example_label": "Ton cas",
"example_text": "Apps HTML single-file sans package.json → Dependabot inactif → sa désactivation = zéro impact",
"tags": [
"sécurité",
"dépendances",
"npm",
"automatique"
],
"keywords": "Dependabot dépendances sécurité vulnérabilité alerte robot automatique"
},
{
"term": "Stars (GitHub)",
"cat": "git",
"badge": "Git",
"definition": "Système d'appréciation GitHub : un utilisateur \"étoile\" un repo pour l'enregistrer dans ses favoris ou signaler qu'il le trouve utile. Indicateur de popularité dans la communauté open source. Sans valeur fonctionnelle pour tes apps Etik Pharma — elles ne sont pas destinées à être découvertes par la communauté GitHub. Effacées lors du passage en Private, ce qui est sans conséquence pour des outils internes.",
"example_label": "RetrobyEtikPharma",
"example_text": "0 stars au moment du passage en Private → aucune perte réelle",
"tags": [
"popularité",
"open source",
"favoris"
],
"keywords": "stars étoiles popularité notation appréciation repo GitHub"
},
{
"term": "Watchers (GitHub)",
"cat": "git",
"badge": "Git",
"definition": "Utilisateurs abonnés aux notifications d'activité d'un repo : ils reçoivent une alerte à chaque commit, issue ou pull request. Différent des Stars (favoris) — un watcher suit activement l'évolution du projet. 0 watchers sur RetrobyEtikPharma signifie que personne n'était abonné aux notifications : le passage en Private est totalement transparent pour l'extérieur.",
"example_label": "Distinction",
"example_text": "Star = \"j'aime ce projet\" · Watcher = \"surveille toute l'activité de ce projet et notifie-moi\"",
"tags": [
"notifications",
"abonnement",
"suivi"
],
"keywords": "watchers observateurs notifications abonnés suivi activité repo"
},
{
"term": "GitHub Advanced Security",
"cat": "git",
"badge": "Git",
"definition": "Suite d'outils de sécurité avancée de GitHub (fonctionnalité payante) incluant : le secret scanning (détection de clés API ou mots de passe accidentellement commités dans le code), le code scanning (analyse statique à la recherche de vulnérabilités), et la revue de dépendances. Non activée sur tes repos → sa désactivation lors du passage en Private est sans effet. À noter : le secret scanning est la fonction la plus utile pour toi — mais la bonne pratique reste de ne jamais commiter de clé API.",
"example_label": "Bonne pratique",
"example_text": "Ne jamais écrire une clé API dans le code → toujours dans les env vars Netlify → Advanced Security devient superflu",
"tags": [
"secret scanning",
"code scanning",
"payant"
],
"keywords": "GitHub Advanced Security analyse code secrets vulnérabilités scanning payant"
},
{
"term": "VAPID (protocole Push)",
"cat": "pwa",
"badge": "PWA",
"definition": "Voluntary Application Server Identification — protocole d'authentification qui permet à un serveur d'envoyer des notifications push à un navigateur via un Service Worker, en prouvant son identité. Basé sur une paire de clés cryptographiques asymétriques. Nécessite trois variables : la clé publique VAPID (partagée avec le navigateur au moment de l'abonnement), la clé privée VAPID (gardée secrète côté serveur, jamais exposée), et le subject (une URL ou adresse mailto: qui identifie le propriétaire du service — ex: mailto:[email protected]). La clé publique est intégrée dans le code front, les deux autres restent en env vars serveur.",
"example_label": "3 variables",
"example_text": "VAPID_PUBLIC_KEY → front (visible) · VAPID_PRIVATE_KEY → env var serveur (secret) · subject → mailto:[email protected]",
"tags": [
"push notification",
"clé publique",
"clé privée",
"subject"
],
"keywords": "VAPID push notification service worker clé publique privée subject protocole"
},
{
"term": "Bloc manifest (Web App Manifest)",
"cat": "pwa",
"badge": "PWA",
"definition": "Bloc de configuration JSON décrivant une PWA pour le navigateur et le système d'exploitation. Déclenche l'installabilité de l'app. Les champs clés : name (nom complet), short_name (nom sur l'écran d'accueil), icons (tableau d'icônes par taille : 192px, 512px), start_url (page de démarrage), display (standalone = sans barre de navigateur, fullscreen, minimal-ui), background_color et theme_color (couleurs de l'écran de chargement). Dans tes apps single-file, ce bloc est généré dynamiquement via JavaScript (Blob URL) et injecté dans — évitant le fichier manifest.json séparé.",
"example_label": "Structure minimale",
"example_text": "{\"name\":\"RelaisbyEtikPharma\",\"short_name\":\"Relais\",\"display\":\"standalone\",\"icons\":[{\"src\":\"...base64...\",\"sizes\":\"192x192\"}]}",
"tags": [
"JSON",
"installabilité",
"standalone",
"icônes",
"Blob URL"
],
"keywords": "bloc manifest web app manifest JSON structure icône nom couleur display orientation standalone"
},
{
"term": "React / JSX",
"cat": "frontend",
"badge": "Frontend",
"definition": "React est une bibliothèque JavaScript pour construire des interfaces. JSX est sa syntaxe qui mélange HTML et JavaScript dans le même fichier. Utilisé pour les apps complexes comme le quiz David Bowie ou EtikRDV. Les fichiers .jsx sont convertis en JavaScript standard par un compilateur (Babel). Pour les détails par concept : voir **JSX** (la syntaxe HTML-dans-JS), **Composant fonctionnel (React)** (la forme moderne d'un composant), et **useState/useEffect** (les hooks fondamentaux).",
"example_label": "Tes apps React",
"example_text": "Quiz David Bowie (.jsx) · EtikRDV (.html avec Babel inline)",
"tags": [
"JavaScript",
"composant",
"Babel"
],
"keywords": "react jsx composant framework javascript composant fonctionnel jsx usestate useeffect rerender"
},
{
"term": "CSS Variables (:root)",
"cat": "frontend",
"badge": "Frontend",
"definition": "Valeurs réutilisables définies une seule fois en CSS et utilisées partout dans le style. Déclarées dans :root (le sommet de la page), elles permettent de changer la couleur d'accentuation de toute l'app en modifiant une seule ligne. Systématiquement utilisées dans toutes tes apps pour la charte Etik Pharma.",
"example_label": "Exemple",
"example_text": ":root { --accent: #461E96; } → utilisable partout via var(--accent)",
"tags": [
"thème",
"couleurs",
"maintenance"
],
"keywords": "CSS variable thème couleur personnalisation :root"
},
{
"term": "Responsive Design",
"cat": "frontend",
"badge": "Frontend",
"definition": "Conception d'interface qui s'adapte automatiquement à toutes les tailles d'écran : mobile, tablette, desktop. Réalisé avec les CSS media queries (@media). Toutes tes apps Etik Pharma ont un skill dédié (responsive-webapp-etikpharma) qui standardise la navigation bottom bar sur mobile.",
"example_label": "Pattern Etik",
"example_text": "Navigation bottom bar sur mobile · split panel sur desktop · modales plein écran mobile",
"tags": [
"mobile-first",
"media query",
"UX"
],
"keywords": "responsive mobile desktop tablette media query adaptif"
},
{
"term": "Animation CSS / Keyframes",
"cat": "frontend",
"badge": "Frontend",
"definition": "Animations définies en CSS via @keyframes (transitions complexes) ou transition (changement d'état simple). Utilisées dans presque toutes tes apps pour les entrées de cartes, les retours au clic, les écrans de chargement. Préférées aux animations JavaScript pour la performance.",
"example_label": "Usage fréquent",
"example_text": "Loader animé pendant appel API · fadeIn sur affichage résultat · bounce sur actions",
"tags": [
"animation",
"UX",
"performance"
],
"keywords": "animation CSS transition keyframes hover micro-interaction"
},
{
"term": "Canvas HTML5",
"cat": "frontend",
"badge": "Frontend",
"definition": "Zone de dessin programmable en HTML. Permet de tracer formes, images, animations pixel par pixel via JavaScript. Utilisé dans Poppy Playtime pour les animations de fond (couloir en perspective, silhouettes flottantes) et dans Bon App! pour l'overlay de la caméra.",
"example_label": "Poppy Playtime",
"example_text": "canvas.getContext('2d') → lignes de perspective animées + particules flottantes",
"tags": [
"graphisme",
"jeu",
"2D"
],
"keywords": "canvas HTML5 dessin graphisme 2D jeu animation"
},
{
"term": "Web Audio API",
"cat": "frontend",
"badge": "Frontend",
"definition": "API du navigateur pour créer et manipuler du son directement en JavaScript, sans fichier audio externe. Utilisée dans Poppy Playtime pour générer les effets sonores du quiz (bonne réponse, mauvaise réponse, fanfare). Synthétise les sons à la volée via oscillateurs et filtres.",
"example_label": "Usage",
"example_text": "AudioContext + OscillatorNode → son de bonne réponse généré sans fichier .mp3",
"tags": [
"audio",
"jeu",
"synthèse"
],
"keywords": "Web Audio API son audio synthèse son javascript"
},
{
"term": "Fisher-Yates Shuffle",
"cat": "frontend",
"badge": "Frontend",
"definition": "Algorithme de mélange aléatoire parfaitement équitable pour un tableau. Parcouru de la fin vers le début, chaque élément est échangé avec un élément au hasard parmi ceux non encore parcourus. Utilisé dans tous tes quiz (Bowie, Poppy) pour éviter que la bonne réponse soit toujours à la même position.",
"example_label": "Problème résolu",
"example_text": "Quiz Poppy : toutes les bonnes réponses étaient en position A (c:0) → corrigé via Fisher-Yates",
"tags": [
"algorithme",
"aléatoire",
"quiz"
],
"keywords": "Fisher-Yates shuffle algorithme mélange aléatoire tableau"
},
{
"term": "Babel / Transpilation",
"cat": "frontend",
"badge": "Frontend",
"definition": "Babel est un compilateur JavaScript qui traduit (transpile) du code moderne (JSX, ES6+) en JavaScript compréhensible par tous les navigateurs. Sans Babel, un fichier .jsx ne peut pas s'exécuter. Dans tes apps (EtikRDV, quiz Bowie), Babel est chargé directement depuis un CDN via \n\n