Répliquer MAT, pas à pas
Un écran par étape, dans l’ordre. Chaque étape dit ce qu’il faut faire et ce qu’il faut noter ; le détail technique reste dans le guide de déploiement de MAT, qui fait foi.
Voir toutes les étapes
Étape 0 sur 11
Choisir votre chemin
Deux façons d’avoir une application municipale. Choisissez celle qui vous ressemble.
Reprendre MAT telle qu’elle est
Toutes les fonctions de l’application de Mézières, à adapter à votre commune. Une à deux heures pour la mise en ligne minimale, puis du temps pour personnaliser.
Créer un site neuf avec l’IA
Un questionnaire prépare une demande pour une intelligence artificielle, qui fabrique un site plus simple avec les seules fonctions choisies, et estime son coût mensuel.
Étape 1 sur 11
Avant de commencer
Le but : Réunir ce qu’il faut pour ne pas s’arrêter en route.
Plusieurs sites à utiliser sont en anglais. Ce guide vous dit quoi chercher sur chaque écran.
À faire
- Prévoyez un ordinateur (pas un téléphone) et une à deux heures au calme pour la mise en ligne minimale.
- Choisissez une adresse électronique de la mairie, et non celle d’un élu : tous les comptes seront créés avec elle, pour qu’ils survivent à un changement de mandat.
- Imprimez le carnet de route, plus bas sur cette page, et gardez un stylo à portée de main.
- Décidez du niveau visé : minimum (portail, administration, notifications), recommandé (plus l’assistante MEL et la vigilance météo) ou complet. Vous pourrez enrichir plus tard.
Le détail technique : Les trois niveaux (guide de déploiement, section 2)
Étape 2 sur 11
Créer le compte GitHub
Le but : GitHub gardera le code de votre application et la publiera sur internet.
À faire
- Ouvrez github.com/signup.
- Saisissez l’adresse électronique de la mairie, un mot de passe et un nom d’utilisateur, par exemple mairie-saint-exemple.
- Recopiez le code de vérification reçu par courriel.
- Rangez le mot de passe dans le coffre de la mairie (gestionnaire de mots de passe, enveloppe au secrétariat…).
À noter dans le carnet : GitHub : adresse utilisée, date, nom d’utilisateur, où est rangé le mot de passe.
Le détail technique : Préparer le code (guide de déploiement, section 5.A)
Étape 3 sur 11
Copier les deux dépôts de MAT
Le but : Avoir votre propre copie de MAT — l’application et son serveur — que vous pourrez adapter sans toucher à celle de Mézières.
À faire
- Connecté à GitHub, ouvrez le dépôt app-mezieres (l’application).
- Cliquez sur le bouton Fork (« copier »), en haut à droite, puis confirmez avec Create fork.
- Faites de même pour le dépôt chatbot-mairie-mezieres (le serveur).
À noter dans le carnet : Les deux adresses de vos copies (github.com/votre-nom/…).
Le détail technique : Préparer le code (guide de déploiement, section 5.A)
Étape 4 sur 11
Créer la base de données (Upstash)
Le but : Upstash gardera les données de l’application : actualités, abonnements aux notifications, statistiques.
Nous faisons cette étape avant le serveur : Render vous demandera ces deux informations au moment de le créer.
À faire
- Créez un compte sur console.upstash.com, avec l’adresse de la mairie.
- Créez une base Redis et choisissez une région de l’Union européenne (Francfort, par exemple).
- Dans l’onglet REST API de la base, repérez deux informations : l’adresse (
UPSTASH_REDIS_REST_URL) et le jeton (UPSTASH_REDIS_REST_TOKEN). Laissez l’onglet ouvert : vous les recopierez à l’étape 6.
À noter dans le carnet : Upstash : adresse utilisée, date, où est rangé le mot de passe. Cocher les deux noms dans le tableau des clés une fois recopiés.
Le détail technique : Base Redis (guide de déploiement, section 5.D)
Étape 5 sur 11
Fabriquer les clés de notification
Le but : Deux clés, une publique et une privée, permettent d’envoyer des notifications sur le téléphone des habitants.
La clé privée ne doit être montrée à personne, jamais publiée dans l’entraide ni envoyée par courriel. Si elle l’a été, recommencez cette étape.
À faire
- C’est la seule étape qui demande de taper une commande sur un ordinateur où Node.js est installé :
npx web-push generate-vapid-keys. - La commande affiche une Public Key (
VAPID_PUBLIC_KEY) et une Private Key (VAPID_PRIVATE_KEY). Gardez-les sous la main pour les étapes 6 et 8. - Si vous n’avez jamais tapé de commande, demandez à votre prestataire informatique, à un habitant à l’aise, ou dans l’entraide. Personne n’a besoin d’accéder à vos comptes pour cela.
À noter dans le carnet : Cocher VAPID_PUBLIC_KEY et VAPID_PRIVATE_KEY dans le tableau des clés.
Le détail technique : Clés de notification (guide de déploiement, section 5.C)
Étape 6 sur 11
Mettre en route le serveur (Render)
Le but : Render fera tourner le serveur de l’application : notifications, assistante MEL, météo, administration.
L’offre gratuite de Render met le serveur en veille après un moment sans visite : le premier affichage peut alors prendre une minute. Voir les coûts.
À faire
- Créez un compte sur dashboard.render.com et reliez-le à votre compte GitHub.
- Choisissez New + puis Blueprint, et sélectionnez votre copie du dépôt chatbot-mairie-mezieres.
- Render affiche une liste de cases à remplir. Remplissez au minimum :
ADMIN_PASSWORD(un mot de passe que vous choisissez pour l’administration), les deux informations d’Upstash (étape 4) et les deux clés de notification (étape 5). Laissez vides les autres. - Validez. Une fois le service démarré, notez son adresse, qui se termine par .onrender.com.
À noter dans le carnet : Render : adresse utilisée, date. L’adresse du serveur (.onrender.com). Cocher ADMIN_PASSWORD.
Le détail technique : Serveur sur Render (guide de déploiement, section 5.B)
Étape 7 sur 11
Publier l’application (GitHub Pages)
Le but : Rendre l’application visible sur internet, à une adresse que les habitants pourront ouvrir.
À faire
- Dans votre copie du dépôt app-mezieres sur GitHub, ouvrez Settings, puis Pages.
- Dans Build and deployment, choisissez la source Deploy from a branch, la branche main et le dossier / (root), puis enregistrez.
- Après quelques minutes, GitHub affiche l’adresse de votre application.
À noter dans le carnet : L’adresse de l’application.
Le détail technique : Publication sur GitHub Pages (guide de déploiement, section 5.E)
Étape 8 sur 11
Relier l’application à votre serveur
Le but : Dire à votre application de parler à VOTRE serveur, et non à celui de Mézières.
Ne modifiez que ce que le guide de déploiement indique : une virgule ou un guillemet effacé par erreur suffit à bloquer l’application. En cas de doute, demandez dans l’entraide avant de valider.
À faire
- C’est le seul moment où l’on modifie des fichiers. Le guide de déploiement liste chaque fichier à modifier et ce qu’il faut y mettre.
- Sur GitHub, ouvrez le fichier indiqué, cliquez sur l’icône en forme de crayon (Edit this file), remplacez la valeur, puis cliquez sur Commit changes.
- Recommencez pour chaque fichier de la liste. GitHub republie l’application tout seul après chaque modification.
À noter dans le carnet : Cocher, pour chaque fichier modifié, la ligne correspondante du tableau des clés.
Le détail technique : Relier l’application au serveur (guide de déploiement, section 5.F)
Étape 9 sur 11
Vérifier que tout fonctionne
Le but : S’assurer que le serveur répond et que l’application s’y connecte.
À faire
- Ouvrez l’adresse de votre serveur suivie de
/health: la page doit afficher"status":"ok". Sinon, patientez une minute (réveil du serveur) et réessayez. - Ouvrez l’adresse de votre application, puis son administration avec le mot de passe choisi à l’étape 6.
- Dans l’administration, l’onglet Diagnostic des services teste chaque service et signale les clés manquantes.
Le détail technique : Vérification et dépannage (guide de déploiement, section 8)
Étape 10 sur 11
Adapter l’application à votre commune
Le but : Remplacer ce qui parle de Mézières-lez-Cléry par ce qui parle de chez vous.
À faire
- Votre copie affiche encore les contenus de Mézières : élus, coordonnées de la mairie, informations locales, assistante MEL.
- Le guide de déploiement liste ce qu’il faut adapter et où cela se trouve. Avancez une rubrique à la fois.
- Avant de publier, faites relire par une deuxième personne : une information fausse sur une démarche coûte plus cher qu’une information absente.
Le détail technique : Personnaliser pour votre commune (guide de déploiement, section 9)
Étape 11 sur 11
Et après ?
Le but : Faire vivre l’application, et ne pas rester seul.
À faire
- Ajoutez les services optionnels quand vous êtes prêts : publication Facebook, photos, signalements, agenda, courriels.
- Présentez votre commune dans l’entraide : votre expérience aidera la suivante.
- Faites-vous connaître par le formulaire Nous rejoindre, et venez au webinaire mensuel.
Le détail technique : Services optionnels (guide de déploiement, section 7)
Carnet de route
À imprimer et remplir au stylo, puis à ranger au secrétariat de mairie. Il dit qui a créé quoi, et où sont rangés les mots de passe.
N’écrivez jamais ici un mot de passe ni la valeur d’une clé : seulement l’endroit où ils sont rangés.
Les comptes
| Service | Adresse électronique utilisée | Créé le | Par | Où est rangé le mot de passe |
|---|---|---|---|---|
| GitHub (étape 2) | ||||
| Upstash (étape 4) | ||||
| Render (étape 6) | ||||
| Autre : | ||||
| Autre : |
Les clés (noms seulement)
| Nom | D’où elle vient | Où la recopier | Fait |
|---|---|---|---|
UPSTASH_REDIS_REST_URL | Upstash, onglet REST API (étape 4) | Render (étape 6) | ☐ |
UPSTASH_REDIS_REST_TOKEN | Upstash, onglet REST API (étape 4) | Render (étape 6) | ☐ |
VAPID_PUBLIC_KEY | Commande de l’étape 5 | Render (étape 6) et application (étape 8) | ☐ |
VAPID_PRIVATE_KEY | Commande de l’étape 5 | Render seulement (étape 6) | ☐ |
ADMIN_PASSWORD | Vous le choisissez | Render (étape 6) | ☐ |
| Adresse du serveur (…onrender.com) | Render (étape 6) | Application (étape 8) | ☐ |
La liste complète des clés, services optionnels compris, est tenue à jour dans le fichier .env.example du serveur.