Guide d'installation complet

Sommaire

Prérequis
Créer votre base de données Supabase
Déployer sur la Forge de l'Éducation nationale
Première ouverture et configuration
Partager avec l'équipe
Résolution de problèmes

✓

Prérequis

Ce dont vous avez besoin avant de commencer

☐Un compte académique (identifiants de l'Éducation nationale) pour accéder à la Forge
☐Une adresse email quelconque pour créer le compte Supabase (peut être votre adresse académique)
☐Un navigateur récent — Chrome ou Firefox recommandé
☐Environ 20 minutes sans interruption

💡

Ouvrez ce guide dans un onglet et travaillez dans les autres onglets — vous aurez besoin de copier-coller des informations entre les pages.

Créer votre base de données Supabase

Là où seront stockées toutes les données de votre école

A — Créer un compte Supabase

Ouvrir Supabase

Dans un nouvel onglet, allez sur :

https://supabase.com

Cliquer sur "Start your project"

Bouton vert en haut à droite de la page d'accueil.

Choisir votre méthode de connexion

Deux options :
— Continue with GitHub si vous avez un compte GitHub
— Continue with email pour créer un compte avec votre adresse email

Avec email : saisissez votre adresse → cliquez Send Magic Link → ouvrez l'email reçu → cliquez le lien dans l'email pour valider.

B — Créer un projet

Cliquer sur "New project"

Bouton vert visible sur le tableau de bord après connexion.

Remplir le formulaire

Nouveau projet Supabase

Organization : votre organisation (laisser par défaut)

Project name : agenda-ecole

Database password : cliquer "Generate a password" puis copier et noter le mot de passe

Region : West EU (Paris) eu-west-3 ← important !

⚠️

Choisissez absolument Paris pour que les données restent en France. Ne choisissez pas Ireland ou Frankfurt.

Cliquer "Create new project"

Attendez 1 à 2 minutes que le projet soit créé. Une barre de progression s'affiche. Ne fermez pas la fenêtre.

C — Créer les tables (structure de la base)

Ouvrir le SQL Editor

Dans le menu gauche de Supabase, cliquez sur l'icône SQL Editor (ressemble à </>).

Créer une nouvelle requête

Cliquez sur "New query" ou "+" en haut du panneau gauche.

Copier le script SQL

Ouvrez ce lien dans un nouvel onglet et cliquez sur le fichier supabase-init.sql :

forge.apps.education.fr/aline.juarez/agenda-ecole

Cliquez sur le fichier supabase-init.sql → cliquez le bouton Copier (icône en haut à droite du contenu).

Coller et exécuter

Revenez dans Supabase SQL Editor → cliquez dans la zone de texte blanche → Ctrl+A pour tout sélectionner → Ctrl+V pour coller → cliquez le bouton "Run" (bouton vert en bas à droite).

Supabase — SQL Editor

Une fenêtre peut apparaître :

⚠️ "Potential issue detected" — This query creates tables without enabling Row Level Security...

→ Cliquez Run without RLS (bouton beige/orange)

✅

Si tout s'est bien passé, vous voyez en bas : "Success. No rows returned" ou une liste de tables créées.

D — Récupérer les clés API

⚠️

Ces clés sont votre "mot de passe" pour la base de données. Notez-les soigneusement — vous en aurez besoin à l'étape 3.

Aller dans Settings → API

Dans le menu gauche, tout en bas : icône engrenage Settings → puis API dans le sous-menu.

Récupérer l'URL du projet

Cliquez sur Settings → General.
Copiez le champ "Reference ID" (ex: abcdefghijklmnop).
Votre URL est : https://VOTRE-REF-ID.supabase.co

Notez cette URL complète.

Récupérer la clé anon

Revenez dans Settings → API → onglet "Legacy anon, service_role API keys".
Cliquez Copy à côté de anon public.

La clé ressemble à :
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiO...

Notez cette clé.

🎉

Supabase est prêt ! Vous avez votre URL et votre clé anon. Gardez-les sous la main pour l'étape 3.

Déployer sur la Forge

Héberger l'application sur la Forge de l'Éducation nationale

A — Se connecter à la Forge

Ouvrir la Forge

https://forge.apps.education.fr

Se connecter

Cliquez "Sign in" → choisissez "Sign in with your institution" ou utilisez vos identifiants académiques habituels (même login que pour les services de votre académie).

B — Forker (copier) le projet

Ouvrir le projet source

Une fois connecté à la Forge, ouvrez ce lien :

forge.apps.education.fr/aline.juarez/agenda-ecole

Cliquer "Créer une bifurcation"

En haut à droite de la page, vous voyez un bouton ⑂ Créer une bifurcation 0. Cliquez dessus.

Configurer le fork

Un formulaire s'affiche :
— Namespace : votre identifiant (laissez par défaut)
— Project name : agenda-ecole (laissez par défaut)
— Description : optionnel
— Cochez "main branch only"

Cliquez "Bifurquer le projet".

Attendre la copie

Quelques secondes et vous arrivez sur votre copie du projet. L'URL ressemble à :
forge.apps.education.fr/VOTRE-LOGIN/agenda-ecole

C — Rendre Pages public

Aller dans Paramètres → Général

Dans le menu gauche de votre projet, tout en bas : Paramètres (icône engrenage) → Général.

Modifier la visibilité de Pages

Faites défiler jusqu'à la section "Visibilité, fonctionnalités du projet, autorisations" → cliquez pour la déplier → trouvez Pages → dans le menu déroulant, sélectionnez "Toute personne ayant accès".

Enregistrer

Faites défiler jusqu'en bas → cliquez "Enregistrer les modifications".

D — Créer le fichier de déploiement

💡

Ce fichier dit à la Forge comment déployer votre application automatiquement. Il doit être créé exactement comme indiqué.

Aller dans Code → Dépôt

Dans le menu gauche : Code → Dépôt (ou "Repository"). Vous voyez la liste des fichiers.

Créer un nouveau fichier

Cliquez sur le bouton "+" → "Nouveau fichier".

Nommer le fichier

Dans le champ nom en haut, tapez exactement (avec le point au début) :

.gitlab-ci.yml

⚠️

Le nom doit commencer par un point et se terminer par .yml. Une erreur ici empêchera le déploiement.

Coller le contenu

Dans la zone de texte (éditeur), copiez-collez exactement ce texte :

pages: stage: deploy script: - mkdir public - cp agenda-ecole-generique.html public/index.html - cp tutoriel-agenda-ecole.html public/tutoriel.html - cp fiche-diffusion-agenda.html public/fiche.html artifacts: paths: - public only: - main

⚠️

Les espaces (indentation) sont importants dans ce fichier. Copiez-collez sans modifier les espaces.

Valider

Faites défiler → cliquez "Valider les modifications" (ou "Commit changes").
Laissez le message par défaut et confirmez.

Vérifier que le pipeline tourne

Dans le menu gauche : Compilation → Pipelines.
Vous devez voir un pipeline en cours (icône tournante bleue) puis qui passe au vert ✅ en 2-3 minutes.

Compilation → Pipelines

✓ Réussi

#123456 — Ajouter un fichier

Il y a 2 minutes

❌

Si le pipeline est rouge, vérifiez le contenu du fichier .gitlab-ci.yml — probablement un problème d'indentation ou de nom de fichier.

E — Récupérer l'URL de votre application

Aller dans Déploiement → Pages

Dans le menu gauche : Déploiement → Pages.

💡

Si "Pages" n'apparaît pas dans le menu, c'est que le pipeline n'a pas encore terminé. Attendez qu'il soit vert et rechargez la page.

Copier votre URL

L'URL de votre application s'affiche. Elle ressemble à :

https://VOTRE-LOGIN.gitlab-pages.apps.education.fr/agenda-ecole

Notez cette URL — c'est celle que vous partagerez avec vos collègues.

🎉

L'application est en ligne ! Passez à l'étape 3 pour la configurer.

Première ouverture et configuration

Connecter l'application à votre base de données

Ouvrir votre URL

Ouvrez l'URL de votre application (celle récupérée à l'étape 2E) dans votre navigateur.

L'écran de configuration s'affiche

🏫

Agenda École

Configuration initiale — à faire une seule fois

Nom de votre école * → ex: École Victor Hugo — Montpellier

URL du projet Supabase * → https://xxxxxxxxxx.supabase.co

Clé anon publique * → eyJhbGci...

Accéder à l'application →

Remplir les trois champs

— Nom de l'école : le nom complet de votre école (s'affichera dans la barre en haut)
— URL Supabase : celle notée à l'étape 1D (https://xxxx.supabase.co)
— Clé anon : la longue clé copiée à l'étape 1D (eyJhbGci...)

Cliquer "Accéder à l'application"

L'application s'ouvre avec le nom de votre école dans la barre en haut. Les données de démo se chargent automatiquement.

💡

Ces informations sont mémorisées dans votre navigateur. Vous n'aurez plus à les saisir à la prochaine ouverture sur ce navigateur.

Supprimer les données de démo

L'application s'ouvre avec des exemples de créneaux. Pour les supprimer :
— Cliquez sur chaque créneau → Modifier → Supprimer
— Ou gardez-les comme référence et modifiez-les selon vos besoins

Partager avec l'équipe

Donner accès à vos collègues

Envoyer l'URL et les clés

Envoyez par mail à vos collègues :
— L'URL de l'application
— L'URL Supabase (https://xxxx.supabase.co)
— La clé anon

⚠️

La clé anon est publique par conception — elle peut être partagée avec votre équipe sans risque. Ne partagez jamais la clé service_role (celle cachée dans Supabase).

Chaque collègue configure une seule fois

À la première ouverture, chaque collègue voit l'écran de configuration et saisit :
— Le nom de l'école (identique pour tous)
— L'URL Supabase
— La clé anon

Ensuite l'appli s'ouvre directement à chaque visite.

Temps réel

Dès que tout le monde est configuré, les modifications sont visibles en temps réel par tous — un créneau créé par un collègue apparaît dans la seconde chez les autres.

Résolution de problèmes

Les erreurs les plus fréquentes et leurs solutions

Problème	Cause probable	Solution
L'appli affiche une erreur "connexion"	URL ou clé Supabase incorrecte	Vérifiez l'URL (doit commencer par https://) et la clé anon dans Supabase Settings → API
Le pipeline est rouge	Erreur dans .gitlab-ci.yml	Vérifiez l'indentation (espaces) et les noms de fichiers dans le .gitlab-ci.yml
"Pages" n'apparaît pas dans le menu	Pipeline pas encore terminé	Attendez que le pipeline soit vert, puis rechargez
L'URL demande un login	Pages pas encore rendu public	Paramètres → Général → Pages → "Toute personne ayant accès"
Les données ne se sauvegardent pas	Tables Supabase pas créées	Ré-exécutez le script supabase-init.sql dans SQL Editor
Un collègue voit ses données mais pas les vôtres	Il a saisi une URL Supabase différente	Vérifiez que tout le monde a la même URL et la même clé anon