🔮 Petit Imprécis de Pseudo Science : Le Tarot de Boulot 🎭

[Déco]

Tutoriel pas à pas – Créer l’app “Tarot & Boulot” avec Google Sheets

Version intégrale récapitulative : tout construire de zéro en reliant directement deux feuilles Google Sheets.


Étape 0 – Préparer les feuilles Google Sheets

1. Crée (ou ouvre) un Google Sheet pour le Tarot de Marseille et un onglet séparé pour le Tarot de Boulot.
   – Chaque onglet doit avoir ligne 1 = en-têtes de colonnes (nom, mot_cle_principal, interpretation_positive, …).
2. Clique sur Partager → « Toute personne disposant du lien » → rôle Lecteur.
   (Ou partage au compte Google utilisé par Appsmith.)
3. Copie l’URL du document (la même pour tous les onglets).

Étape 1 – Créer l’application Appsmith

1. Connecte‐toi sur app.appsmith.com.
2. Create New App → nomme-la TarotBoulotGS.

Étape 2 – Connecter la datasource Google Sheets

1. Sidebar → Datasources → + New Datasource → Google Sheets.
2. Clique sur Authorize → connecte-toi avec ton compte Google (celui qui voit la feuille).
   → Donne un nom clair : GS_TarotBoulot

Étape 3 – Créer les requêtes de données

3.1 Tarot de Marseille

1. Sous la datasource GS_TarotBoulot → + New Query.
   Nom : TarotCards
2. Renseigne :

   Code : Tout sélectionner

   Spreadsheet URL  =  (URL du document)
   Sheet Name       =  tarot        ; (nom exact de l’onglet)
   Table Heading Row=  1
   

3. Clique Run → vérifie que les lignes s’affichent.

3.2 Tarot de Boulot

1. New Query → nom : BoulotCards
2. Paramètres :

   Code : Tout sélectionner

   Spreadsheet URL  =  (même URL)
   Sheet Name       =  boulot       ; (nom de l’onglet « boulot »)
   Table Heading Row=  1
   

3. Run → vérifie.

Étape 4 – Variables d’état globales

1. Sidebar → clique sur la page (Page1).
2. Onglet Page Load Actions → + Add Action → Run JS Code :

Code : Tout sélectionner

storeValue("jeuActif", "tarot");   // tarot par défaut
storeValue("carteIndex", 0);       // premier index

Étape 5 – UI : Sélecteur de jeu + Boutons

5.1 Dropdown “Choisir le jeu”

1. Widgets → glisse un Dropdown → nom : selectJeu
2. Options :

   Code : Tout sélectionner

   [
     { "label": "Tarot de Marseille", "value": "tarot" },
     { "label": "Tarot de Boulot",    "value": "boulot" }
   ]
   

3. Default Value : `"tarot"`
4. onOptionChange (JS) :

Code : Tout sélectionner

storeValue("jeuActif", selectJeu.selectedOptionValue);
storeValue("carteIndex", 0);

5.2 Bouton “Tirer une carte”

Code : Tout sélectionner

// onClick (JS)
const jeu = appsmith.store.jeuActif === "tarot"
  ? TarotCards.data
  : BoulotCards.data;
storeValue("carteIndex", _.random(0, jeu.length - 1));

5.3 Bouton “→” (suivante)

Code : Tout sélectionner

// onClick (JS)
const jeu = appsmith.store.jeuActif === "tarot"
  ? TarotCards.data
  : BoulotCards.data;
storeValue("carteIndex", (appsmith.store.carteIndex + 1) % jeu.length);

5.4 Bouton “←” (précédente)

Code : Tout sélectionner

// onClick (JS)
const jeu = appsmith.store.jeuActif === "tarot"
  ? TarotCards.data
  : BoulotCards.data;
storeValue("carteIndex",
  (appsmith.store.carteIndex - 1 + jeu.length) % jeu.length);

Étape 6 – Widgets d’affichage

Nom de la carte

Code : Tout sélectionner

{{ 
  (appsmith.store.jeuActif === "tarot" ? TarotCards.data : BoulotCards.data)
    [appsmith.store.carteIndex]?.nom
  || "Choisis un jeu puis tire une carte"
}}

Mot-clé principal

Code : Tout sélectionner

{{ 
  (appsmith.store.jeuActif === "tarot" ? TarotCards.data : BoulotCards.data)
    [appsmith.store.carteIndex]?.mot_cle_principal
  || "…" 
}}

Interprétation (positive)

Code : Tout sélectionner

{{ 
  (appsmith.store.jeuActif === "tarot" ? TarotCards.data : BoulotCards.data)
    [appsmith.store.carteIndex]?.interpretation_positive
  || "…" 
}}

*Tu peux ajouter d’autres champs en reprenant les noms de colonnes de ta feuille.*


Étape 7 – Tests & validation

• Sélectionne “Tarot de Marseille” ⮕ clique sur “Tirer une carte”.
• Parcours avec ← / → pour vérifier la navigation.
• Passe au “Tarot de Boulot” via le dropdown : tout doit se mettre à jour.
• Modifie une carte dans Google Sheets → rafraîchis la page Appsmith : la mise à jour est visible.

Ton application est opérationnelle, connectée en temps réel aux Google Sheets !

Prochaines évolutions possibles

• Ajouter des images stockées sur Google Drive ou un CDN
• Enregistrer chaque tirage dans un onglet “Historique” (Sheets ou DB)
• Appliquer un thème esthétique (palette de couleurs, typographies)
• Filtrer / rechercher les cartes par élément, famille, champ professionnel

[Walt]

J'ai déployé votre projet de tarot en suspend.

tarotBoulotProto

Et j'ai trouvé un nom pas (trop) corporate, hein ?

!	Message de : adonf
	Ça marche pas sur Microsoft Edge !!!!!!!!!

Toujours pas ?

[Walt]

OUI ! Bravo, et avec le lien vers l'appli c'est parfait

On t'attend

[Souad]

Pas moi, j'ai envie d'avancer perso (perso)



Tutoriel : Créer un formulaire d'inscription pour membres adhérents avec Appsmith + Supabase

Ce tutoriel vous guide pas à pas pour créer un formulaire d’inscription à un projet citoyen ou associatif, ici "ouaisfi.eu", à l’aide de l’outil no-code Appsmith et d’une base de données Supabase (PostgreSQL). Ce modèle est facilement adaptable à d'autres projets ou structures.



Objectif pédagogique

• Apprendre à connecter Appsmith à Supabase
• Créer un formulaire avec des champs personnalisés
• Insérer les données dans une base PostgreSQL via requête SQL
• Structurer une app simple et fonctionnelle

Étape 1 : Préparer la base de données dans Supabase

1. Créer un compte gratuit sur https://supabase.com/
2. Créer un nouveau projet (ex: ouaisfi_membres)
3. Dans le menu gauche, aller dans Table Editor > New Table

Nom de la table : `membres`
Champs recommandés :

Code : Tout sélectionner

id         | uuid     | primary key (default)
nom        | text
prenom     | text
email      | text (unique)
date_naiss | date
ville      | text
adhesion   | timestamp (default = now())

4. Cliquer sur Save et insérer quelques lignes manuellement pour tester.



Étape 2 : Connecter Supabase à Appsmith

1. Aller dans Appsmith > Datasources > + New Datasource
2. Choisir PostgreSQL
3. Remplir les champs avec les infos Supabase (trouvées dans Settings > Database) :

Code : Tout sélectionner

Host : db.xxxxxx.supabase.co
Port : 5432
Database name : postgres
Username : postgres
Password : [votre mot de passe]
SSL : Require

4. Cliquer sur Test puis Save



Étape 3 : Créer le formulaire dans Appsmith

1. Dans votre app, créer une nouvelle page
2. Glisser-déposer un widget Form
3. Ajouter les champs suivants :

• InputText - nom
• InputText - prénom
• InputText - email
• DatePicker - date de naissance
• InputText - ville
• Button - "S'inscrire"

4. Renommer chaque champ avec un identifiant clair : `InputNom`, `InputPrenom`, etc.



Étape 4 : Ajouter une requête d'insertion

1. Aller dans + New Query > Sélectionner votre datasource Supabase
2. Nommer la requête `InsertMembre`
3. Utiliser la requête SQL suivante :

Code : Tout sélectionner

INSERT INTO membres (nom, prenom, email, date_naiss, ville)
VALUES ('{{InputNom.text}}', '{{InputPrenom.text}}', '{{InputEmail.text}}', '{{DateNaiss.selectedDate}}', '{{InputVille.text}}');

4. Cliquer sur Run pour tester (vous pouvez ajouter un Toast pour la confirmation)



Étape 5 : Connecter le bouton à la requête

1. Sélectionner le bouton "S'inscrire"
2. Dans ses actions > onClick > choisir Execute a Query
3. Sélectionner `InsertMembre`
4. Ajouter en option :

Code : Tout sélectionner

Show alert on success : "Merci pour votre inscription !"
Show alert on failure : "Erreur lors de l'inscription, veuillez vérifier les champs."

Remarques pédagogiques

• Cette méthode peut s’appliquer à tout type de formulaire : bénévoles, abonnés, utilisateurs…
• Vous pouvez étendre la table avec d'autres champs (téléphone, newsletter, genre…)
• Supabase permet aussi d’ajouter une API REST automatique pour les mêmes données
• Le widget Table d’Appsmith peut être utilisé pour visualiser les membres inscrits

Pour aller plus loin

• Ajouter une vérification d’unicité de l’email
• Afficher un résumé après inscription
• Activer l’envoi d’un mail automatique (via webhook ou service externe)
• Créer un back-office pour consulter les inscriptions

N’hésitez pas à cloner ce tutoriel et à le partager pour d'autres projets associatifs ou citoyens.

[Souad]

Tuto complémentaire : Afficher la liste des membres inscrits dans Appsmith

Ce tutoriel complète celui sur le formulaire d’inscription. Ici, nous apprenons à créer une requête pour récupérer la liste des membres depuis Supabase et l’afficher dans un widget Table dans Appsmith. C’est utile pour avoir un aperçu rapide des inscriptions en cours ou gérer les données.



Objectif

• Créer une requête SQL de lecture (SELECT)
• Afficher les résultats dans un tableau dynamique
• Personnaliser l’affichage si nécessaire

Étape 1 : Créer une requête de lecture

1. Aller dans + New Query
2. Sélectionner la source de données Supabase
3. Nommer la requête : `GetMembres`
4. Écrire la requête SQL suivante :

Code : Tout sélectionner

SELECT nom, prenom, email, date_naiss, ville, adhesion
FROM membres
ORDER BY adhesion DESC;

5. Cliquer sur Run pour tester



Étape 2 : Afficher les données dans un widget Table

1. Aller sur la page de ton application
2. Glisser-déposer un widget Table depuis la barre latérale
3. Dans les propriétés de la table, placer :

Code : Tout sélectionner

{{ GetMembres.data }}

4. Tu peux renommer les colonnes (ou masquer certaines) selon ton besoin :
- `nom`, `prenom` → Nom complet
- `email` → adresse mail
- `adhesion` → date d’inscription



Étape 3 : Personnalisation facultative

Tri, filtrage, pagination : Les options sont activables dans les propriétés du widget Table.

Fusion nom/prénom :
Dans la colonne personnalisée, tu peux faire :

Code : Tout sélectionner

{{ currentRow.prenom + " " + currentRow.nom }}

Date lisible :
Pour afficher la date en format local lisible :

Code : Tout sélectionner

{{ moment(currentRow.adhesion).format("DD/MM/YYYY") }}

Astuce bonus : Export CSV

1. Ajouter un bouton `Exporter`
2. Dans l’action `onClick`, ajouter un JavaScript simple :

Code : Tout sélectionner

exportCSVFile(GetMembres.data, "inscriptions_ouaisfi.csv")

( Nécessite d’activer l’export JS dans les settings avancés d’Appsmith)



Résultat attendu

Vous obtenez un tableau interactif avec tous les membres inscrits, à jour automatiquement. Utile pour les admins du projet ou pour générer des listes ponctuelles.

Cette méthode est adaptable pour tout type de formulaire de collecte (événements, formations, bénévolat, etc.).



Prochaine étape possible

• Ajouter une recherche (via Input + Filter)
• Créer un bouton de suppression ou modification
• Ajouter un système de pagination serveur (limit/offset)
• Filtrer par ville ou par date

[Souad]

Recommandation pour toi :
Commence avec MySQL sur ton hébergement mutualisé.
Tu apprends les bases, tu testes Appsmith, tu restes maître de tes données.

Ensuite, expérimente progressivement Supabase (facile) ou MongoDB Atlas (plus libre mais un peu technique).

Cela te permettra de :

• Mieux comprendre les logiques SQL vs NoSQL,
• Choisir l’outil qui correspond à ta manière de penser,
• Rester autonome sans dépendre trop tôt de solutions propriétaires.

2. Comparatif des solutions

Critère	Base sur hébergement mutualisé (ex: MySQL)	MongoDB / Firebase / Supabase (cloud)
Mise en place	Facile (si tu connais un peu PHPMyAdmin)	Variable (Mongo = moyen, Firebase = rapide)
Documentation & tutos	Immense (MySQL/PostgreSQL très répandu)	Très bon aussi, selon solution choisie
Connexion avec Appsmith	Possible via REST API ou SQL connector	Plus simple parfois avec Supabase / Firebase
Coût	Inclus dans ton hébergement	Gratuit jusqu’à un certain quota
Apprentissage	Classique (SQL, logique relationnelle)	Plus moderne (NoSQL, temps réel, etc.)
Évolutivité	Limitée (performances mutualisées)	Très scalable
Sécurité et contrôle	Tu contrôles tout	Tiers en cloud, dépendance extérieure

• Supabase = PostgreSQL moderne (compatible Appsmith nativement)
• Tu peux aussi utiliser l’API REST (auto-générée par Supabase)
• Tu peux stocker fichiers, gérer l’auth, faire des policies (RLS)
• Tu restes dans un univers open source et auto-hébergeable plus tard