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

[Souad]

Reboot du projet Tarot de Boulot / Appsmith

Parce que parfois, il faut tout reprendre à la racine pour mieux avancer.



Étape 1 – Clarifier l’intention profonde du projet

Pose-toi cette question simple :

À quoi sert mon application, au fond ?

Coche ce qui te correspond ou reformule :

• [ ] Une appli ludique pour se tirer les cartes soi-même ?
• [ ] Un outil d’aide à la décision pour le monde du travail ?
• [ ] Un support pédagogique pour des ateliers d’éducation populaire ?
• [ ] Un outil expérimental mêlant tarot, valeurs, symboles et choix ?
• [ ] Autre : (à préciser)

Réponse personnelle : (à écrire ici)



Étape 2 – Définir un périmètre fonctionnel minimal

Ne pas tout faire d’un coup. L’idée est de démarrer avec un prototype simple mais fonctionnel. Voici des fonctionnalités possibles :

• [ ] Tirer une carte au hasard (Tarot ou Boulot)
• [ ] Afficher le nom, mot-clé et interprétation de la carte
• [ ] Naviguer entre les cartes (← / →)
• [ ] Choisir un jeu (Tarot de Marseille / Tarot de Boulot)
• [ ] Associer des valeurs ou traits à la carte
• [ ] Sauvegarder un tirage
• [ ] Tirer plusieurs cartes (ex : passé / présent / futur)
• [ ] Lier une carte à une humeur, un contexte, un blocage...

Sélection minimale pour V1 : (cocher les plus urgentes)



Étape 3 – Choisir une esthétique

Pas besoin d’être figé, mais choisir une direction aide à avancer. Quelle ambiance veux-tu ?

• [ ] Sobre et professionnelle
• [ ] Ésotérique et symbolique
• [ ] Minimaliste et zen
• [ ] Colorée et joyeuse
• [ ] Rétro / 8-bit / Pixel art
• [ ] Tu ne sais pas encore

Préférence visuelle actuelle : (à écrire)



Étape 4 – Objectifs immédiats (semaine 1)

Une fois les réponses ci-dessus posées, on pourra :

1. Créer un nouveau projet Appsmith propre
2. Préparer les fichiers JSON (cartes tarot / boulot)
3. Ajouter un bouton “Tirer une carte”
4. Afficher le résultat dans un widget
5. Ajouter ← et → pour naviguer dans les cartes
6. Styliser un minimum pour que ce soit agréable

Objectif de cette première version : un prototype fonctionnel à tester seul ou avec un proche.



On continue ensemble ?

Si tu me réponds à ces 3 questions :

1. Quelle est l’intention principale ?
2. Quelles fonctions pour la version 1 ?
3. Quelle ambiance visuelle préfères-tu ?

Alors je te génère :
Un plan de travail clair
Les fichiers JSON prêts à l’emploi
Un fichier Appsmith tout neuf pour démarrer
Et un fil conducteur pour ne plus te perdre

On construit lentement, mais dans le bon ordre.

[Le Guide]

et " " (pour la petite histoire)

Lancement du prototype – Tarot ludique (solo ou groupe)

On construit une application simple et agréable pour tirer des cartes à soi ou entre amis, en ligne.


Objectif :

Créer une application ludique Appsmith qui permet de :

• Tirer une carte au hasard (Tarot de Marseille ou Tarot de Boulot)
• Voir son nom, son mot-clé et son interprétation
• Parcourir les cartes manuellement (boutons ← / →)

Cette version de base pourra ensuite évoluer selon les retours ou besoins du groupe.


Étapes immédiates

1. Créer un nouveau projet Appsmith propre
2. Importer les données des cartes dans deux requêtes : TarotCards et BoulotCards
3. Ajouter un bouton “Tirer une carte”
4. Afficher dynamiquement les données de la carte (nom, mot-clé, interprétation)
5. Ajouter les boutons ← / → pour changer de carte
6. Stocker les états dans appsmith.store (index + type de jeu)

Données minimales à afficher

Champ	Source
Nom	`{{ CarteActuelle?.nom }}`
Mot-clé	`{{ CarteActuelle?.mot_cle }}`
Interprétation	`{{ CarteActuelle?.interpretation }}`

On définira `CarteActuelle` comme une fonction dynamique selon le jeu actif et l’index.


Esthétique

Pas de choix de style pour le moment. On priorise la structure fonctionnelle.
On stylisera à la fin, une fois l’interface validée.


Prochaine étape

Tu me dis si on peut :

✔ Créer un projet Appsmith de zéro (ou je te fournis le fichier JSON complet)
✔ Importer les jeux de cartes (je t’envoie les données propres en .json ou .csv)
✔ Programmer les boutons et les widgets ensemble, étape par étape

On repart proprement, pas à pas. Le jeu commence

[Souad]

et " " (pour la petite histoire)

Pas les noms de famille on a dit

Programmer les boutons et les widgets ensemble, étape par étape

Étape 1 – Créer le cœur de l’application Tarot dans Appsmith

On commence simple : un bouton pour tirer une carte au hasard, et un affichage du nom, du mot-clé et de l’interprétation.



Objectif de cette première étape

Construire une page Appsmith qui permet de :

• Tirer une carte du tarot de Marseille au hasard
• Afficher son nom, son mot-clé, son interprétation

1.1 – Créer une nouvelle application

1. Connecte-toi sur https://app.appsmith.com
2. Clique sur Create New App
3. Donne-lui un nom, par exemple : TarotProto
4. Une page vierge s’ouvre, tu es prêt à ajouter tes données

1.2 – Ajouter les données des cartes

Dans la barre latérale gauche :

1. Clique sur l’icône Datasources
2. Clique sur + New JS Object
3. Nomme-le par exemple : CartesData
4. Colle le code suivant :

Code : Tout sélectionner

// Cartes de démonstration (à enrichir plus tard)
export default {
  TarotCards: [
    {
      nom: "Le Bateleur",
      mot_cle: "Commencement",
      interpretation: "Élan, potentiel, premier pas."
    },
    {
      nom: "La Papesse",
      mot_cle: "Intuition",
      interpretation: "Savoir intérieur, mystère, réflexion."
    }
  ],
  BoulotCards: [
    {
      nom: "Burn-out",
      mot_cle: "Épuisement",
      interpretation: "Trop c’est trop, tu dois lever le pied."
    },
    {
      nom: "Networking",
      mot_cle: "Connexion",
      interpretation: "Sort de ta grotte et va vers les autres."
    }
  ]
}

1.3 – Créer le bouton “Tirer une carte”

1. Clique sur l’onglet Widgets (icône blocs)
2. Glisse un Bouton au centre de la page
3. Renomme-le btnTirerCarte
4. Dans ses propriétés → onglet Actions → onClick, choisis Execute JS et ajoute ce code :

Code : Tout sélectionner

storeValue("carteIndex", _.random(0, CartesData.TarotCards.length - 1));
storeValue("jeuActif", "tarot");

Explication : cela tire une carte au hasard dans le jeu “tarot” et enregistre son index.



1.4 – Afficher la carte tirée

Ajoute maintenant 3 widgets Texte, un pour chaque champ :

• Nom de la carte :

  Code : Tout sélectionner

  {{ CartesData.TarotCards[appsmith.store.carteIndex]?.nom || "Tirez une carte" }}
  

• Mot-clé :

  Code : Tout sélectionner

  {{ CartesData.TarotCards[appsmith.store.carteIndex]?.mot_cle || "…" }}
  

• Interprétation :

  Code : Tout sélectionner

  {{ CartesData.TarotCards[appsmith.store.carteIndex]?.interpretation || "…" }}
  

Résultat

Lorsque tu cliques sur le bouton “Tirer une carte” :

• Une carte est choisie au hasard
• Ses informations s’affichent dynamiquement
• Tu as les bases d’un tirage solo !

On construit petit à petit. La suite : navigation entre les cartes, ou ajout du Tarot de Boulot.

[Souad]

Étape 2 – Ajouter des boutons “Carte suivante” et “Carte précédente”

On enrichit l’expérience utilisateur en permettant de parcourir les cartes manuellement, sans tirage aléatoire.



Objectif

Permettre à l’utilisateur de naviguer manuellement parmi les cartes disponibles grâce à deux boutons :

• ← Carte précédente
• → Carte suivante

2.1 – Initialiser l’index au chargement de la page

Pour que l’appli fonctionne proprement dès le début, on initialise l’index de carte à 0.

1. Clique sur l’icône Page1 dans la sidebar (ou le nom de ta page)
2. Dans l’onglet Page Load Actions, clique sur + Add Action
3. Choisis : JS → Run JS Code
4. Ajoute ce code :

Code : Tout sélectionner

storeValue("carteIndex", 0);
storeValue("jeuActif", "tarot");

2.2 – Créer le bouton “Carte suivante”

1. Ajoute un nouveau bouton, nomme-le : btnSuivante
2. Label du bouton : →
3. Action onClick → JS Code :

Code : Tout sélectionner

storeValue(
  "carteIndex",
  (appsmith.store.carteIndex + 1) % CartesData.TarotCards.length
);

Ce code passe à la carte suivante, et recommence depuis le début une fois arrivé à la fin.



2.3 – Créer le bouton “Carte précédente”

1. Duplique le bouton précédent ou crée-en un nouveau : btnPrécédente
2. Label : ←
3. Action onClick → JS Code :

Code : Tout sélectionner

storeValue(
  "carteIndex",
  (appsmith.store.carteIndex - 1 + CartesData.TarotCards.length) % CartesData.TarotCards.length
);

Cette formule permet de revenir à la dernière carte si on est sur la première.



2.4 – Mise à jour de l’affichage

Les widgets texte n’ont pas besoin d’être modifiés. Ils continueront à afficher la carte pointée par :

Code : Tout sélectionner

{{ CartesData.TarotCards[appsmith.store.carteIndex]?.nom || "Tirez une carte" }}

Résultat

L’utilisateur peut désormais :

• Tirer une carte aléatoire avec le bouton “Tirer une carte”
• Parcourir manuellement les cartes avec ← et →
• Visualiser en temps réel les contenus associés à chaque carte

Prochaine étape possible : changer de jeu entre “Tarot” et “Boulot”.

[Souad]

Étape 3 – Ajouter un sélecteur de jeu : “Tarot” ou “Boulot”

On permet à l’utilisateur de choisir entre deux jeux de cartes : le Tarot de Marseille ou le Tarot de Boulot.



Objectif

- Ajouter un sélecteur (dropdown) qui permet de choisir le jeu utilisé
- Faire en sorte que les boutons et l’affichage s’adaptent dynamiquement au jeu actif



3.1 – Créer le sélecteur de jeu

1. Dans l’onglet Widgets, ajoute un widget Dropdown
2. Nomme-le : selectJeu
3. Dans les Options, colle ce code :

Code : Tout sélectionner

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

• Dans Default selected value :

  Code : Tout sélectionner

  "tarot"
  

• Dans onOptionChange → JS Code, ajoute :

Code : Tout sélectionner

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

Cela réinitialise le jeu et revient à la première carte du jeu choisi.



3.2 – Adapter l’affichage de la carte selon le jeu actif

Dans les widgets texte, remplace les données en dur `CartesData.TarotCards[...]` par cette expression conditionnelle :

Nom :

Code : Tout sélectionner

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

Mot-clé :

Code : Tout sélectionner

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

Interprétation :

Code : Tout sélectionner

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

3.3 – Adapter les boutons ←, → et Tirer une carte

Remplace le contenu des boutons existants par des versions adaptatives :

Tirer une carte (onClick) :

Code : Tout sélectionner

storeValue(
  "carteIndex",
  _.random(
    0,
    (appsmith.store.jeuActif === "tarot"
      ? CartesData.TarotCards.length
      : CartesData.BoulotCards.length) - 1
  )
);

Carte suivante :

Code : Tout sélectionner

storeValue(
  "carteIndex",
  (appsmith.store.carteIndex + 1) %
    (appsmith.store.jeuActif === "tarot"
      ? CartesData.TarotCards.length
      : CartesData.BoulotCards.length)
);

Carte précédente :

Code : Tout sélectionner

storeValue(
  "carteIndex",
  (appsmith.store.carteIndex - 1 +
    (appsmith.store.jeuActif === "tarot"
      ? CartesData.TarotCards.length
      : CartesData.BoulotCards.length)) %
    (appsmith.store.jeuActif === "tarot"
      ? CartesData.TarotCards.length
      : CartesData.BoulotCards.length)
);

Résultat

L’utilisateur peut maintenant :

• Choisir son jeu (“Tarot de Marseille” ou “Tarot de Boulot”)
• Tirer une carte ou parcourir les cartes de ce jeu
• Voir les informations correspondantes

Prochaine étape possible : styliser l’interface ou enregistrer les tirages.

[Souad]

Constitution du jeu de données complet – Tarot de Marseille & Tarot de Boulot

Objectif : Disposer d’un jeu de cartes complet, structuré et enrichi pour une utilisation dans l’application Appsmith ou dans tout autre projet numérique.



1. Tarot de Marseille

Le jeu classique sera composé de :

• 22 Arcanes Majeurs (du Bateleur au Monde)
• 56 Arcanes Mineurs répartis en 4 familles :
  • Bâtons
  • Coupes
  • Épées
  • Deniers

Champs prévus pour chaque carte :

Clé	Exemple
nom	Le Bateleur
numero	1
famille	Arcanes Majeurs
mot_cle	Potentiel
interpretation	Démarrage, énergie neuve...
element	Air
polarité	Active
planète	Mercure
sphère	Action / Création

2. Tarot de Boulot

Un jeu maison, ancré dans la réalité professionnelle et l’éducation populaire :

• Entre 40 et 50 cartes originales
• Inspirées de situations, traits, rôles, enjeux, blocages liés au monde du travail

Champs prévus pour chaque carte :

Clé	Exemple
nom	Burn-out
mot_cle	Épuisement
champ	Santé mentale
valeur_associée	Équilibre
excès	Surinvestissement
ressource	Repos, soutien collectif
citation	“Quand tout brûle, il est temps de…”

Formats disponibles

Les cartes seront générées dans deux formats :

• .json → Pour intégration directe dans Appsmith ou toute app frontend
• .csv → Pour tableurs ou conversion vers base de données

L’enrichissement progressif des données permet aussi des usages avancés : filtres, recherches, croisements astrologiques, tirages combinés, etc.

Prochaine étape

Tu peux choisir par où commencer :

1. Générer les 22 Arcanes Majeurs enrichis
2. Ajouter les 56 Arcanes Mineurs ensuite
3. Reprendre et enrichir le Tarot de Boulot existant
4. Fournir l’ensemble au format JSON + CSV

Tu choisis par quoi on commence, et je te fournis les fichiers ou les tableaux directement ici, carte par carte ou en bloc.

[Souad]

Tutoriel Appsmith – Intégrer les jeux de données & finaliser l’appli

Étape à étape, nous allons :

1. Importer les deux CSV (Tarot & Boulot) dans Appsmith
2. Créer les variables d’état nécessaires
3. Construire l’UI complète (Dropdown Jeu + Tirage aléatoire + Navigation ← / →)

1. Importer les CSV comme source de données

1. Dans la barre de gauche, clique sur Datasources ⮕ + New Datasource.
2. Choisis ‘Import File / CSV’ (ou “Mock Database” si tu préfères).
3. Télécharge ton fichier IFTTT - tarot.csv
   → nomme la requête : TarotCards
4. Télécharge ton fichier IFTTT - boulot.csv
   → nomme la requête : BoulotCards
5. Dans les deux requêtes, clique sur Run pour t’assurer que les données apparaissent (colonnes, lignes).
   - Tu peux filtrer/renommer les champs si besoin, mais on garde la structure d’origine pour l’instant.

2. Initialiser les variables d’état

1. Clique sur l’icône Page (dans la sidebar) → onglet Page Load Actions.
2. Ajoute une action JS avec ce code :

Code : Tout sélectionner

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

3. Sélecteur de jeu (Dropdown)

1. Dans Widgets, glisse un Dropdown → nomme-le : selectJeu
2. Options :

Code : Tout sélectionner

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

• Valeur par défaut : `"tarot"`
• onOptionChange (JS) :

Code : Tout sélectionner

storeValue("jeuActif", selectJeu.selectedOptionValue);
storeValue("carteIndex", 0);     // on revient à la 1ʳᵉ carte du jeu choisi

4. Bouton “Tirer une carte”

1. Glisse un Bouton → nomme-le : btnTirerCarte
2. onClick (JS) :

Code : Tout sélectionner

const jeu = appsmith.store.jeuActif === "tarot"
  ? TarotCards.data
  : BoulotCards.data;

storeValue("carteIndex", _.random(0, jeu.length - 1));

5. Boutons “Carte suivante / précédente”

→ Carte suivante (btnSuivante)

Code : Tout sélectionner

const jeu = appsmith.store.jeuActif === "tarot"
  ? TarotCards.data
  : BoulotCards.data;

storeValue(
  "carteIndex",
  (appsmith.store.carteIndex + 1) % jeu.length
);

← Carte précédente (btnPrecedente)

Code : Tout sélectionner

const jeu = appsmith.store.jeuActif === "tarot"
  ? TarotCards.data
  : BoulotCards.data;

storeValue(
  "carteIndex",
  (appsmith.store.carteIndex - 1 + jeu.length) % jeu.length
);

6. Widgets d’affichage

On part sur trois Widgets Texte (nom, mot-clé, interprétation).
Pour éviter les `undefined`, on prévoit un texte par défaut.

Code : Tout sélectionner

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

[b]Mot-clé[/b] :
{{ 
  (appsmith.store.jeuActif === "tarot" ? TarotCards.data : BoulotCards.data)
    [appsmith.store.carteIndex]?.mot_cle_principal 
  || "…" 
}}

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

*Remplace `interpretation_positive` par la colonne que tu souhaites afficher (positive, negative, etc.).*



7. Test complet

• Sélectionne “Tarot de Marseille” ⮕ clique sur “Tirer une carte”
  → le nom, le mot-clé et l’interprétation s’affichent.
• Clique sur “→” et “←” pour parcourir les cartes du même jeu.
• Passe sur “Tarot de Boulot” via le dropdown ⮕ tout doit s’adapter automatiquement.

Ton prototype est maintenant entièrement fonctionnel !

Prochaines pistes

• Ajouter des images ou icônes pour chaque carte
• Enregistrer un tirage et l’afficher dans une liste
• Travailler le design (couleurs, polices, disposition)
• Filtrer les cartes par catégorie ou élément

[Le Guide]

Annexe – Utiliser Google Sheets comme source de données Appsmith

Quand le CSV n’est pas pratique, relions l’app à une feuille Google Sheets en lecture directe.


1. Préparer la Google Sheet

1. Ouvre ta feuille Google Sheets.
2. Clique sur Partager → “Toute personne disposant du lien” → rôle Lecteur.
   (Pas besoin d’autoriser la modification.)
3. Copie le lien de partage (URL se terminant par `/edit?usp=sharing`).

2. Créer une datasource Google Sheets dans Appsmith

1. Dans la barre de gauche, clique sur Datasources.
2. New Datasource → choisis Google Sheets.
3. Clique sur Authorize, connecte-toi avec le compte qui possède la feuille ou qui y a accès.
4. Nomme la connexion : par ex. `GS_TarotBoulot`.

3. Configurer la requête “TarotCards”

1. Sous ta datasource `GS_TarotBoulot`, clique sur New Query.
2. Nomme-la TarotCards.
3. Paramètres principaux :

   Code : Tout sélectionner

   Spreadsheet URL   = (l’URL partagée)
   Sheet Name        = tarot          ; (onglet contenant le tarot)
   Table Heading Row = 1
   

4. Clique sur Run → tu dois voir les lignes et colonnes apparaître.

4. Configurer la requête “BoulotCards”

1. New Query (toujours sous la même datasource).
2. Nomme-la BoulotCards.
3. Paramètres :

   Code : Tout sélectionner

   Spreadsheet URL   = (même URL)
   Sheet Name        = boulot         ; (onglet contenant le tarot de boulot)
   Table Heading Row = 1
   

4. Clique sur Run pour tester.

5. Utilisation dans l’app

Les requêtes TarotCards.data et BoulotCards.data sont maintenant disponibles exactement comme si tu avais importé un CSV.
Aucune autre modification n’est nécessaire dans les widgets ou boutons déjà créés.

Les données se mettront à jour en temps réel dès que tu modifieras la Google Sheet !

6. Notes de sécurité

• Le mode “Toute personne disposant du lien” donne un accès lecture public.
  → Pour plus de confidentialité, partage la feuille uniquement avec le compte Google utilisé par Appsmith.
• Si tu changes le nom de l’onglet (tab) ou la structure des colonnes, n’oublie pas de mettre à jour le champ Sheet Name ou les bindings.

Tu es prêt !

Tu peux désormais :

• Mettre à jour tes cartes directement dans Google Sheets
• Voir l’appli Appsmith refléter ces changements instantanément
• Collaborer avec d’autres rédacteurs sans re-upload de CSV

Profite de la flexibilité de Google Sheets et garde ton appli toujours à jour.

[Déco]

Avec les fichiers c'est mieux ?

[Souad]

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