ouaisfi.eu

Reboot du projet Tarot de Boulot / Appsmith

À quoi sert mon application, au fond ?

• [ ] 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)

• [ ] 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...

• [ ] 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

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

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

On construit lentement, mais dans le bon ordre.

Walt Zeffeuk a écrit :

Lancement du prototype – Tarot ludique (solo ou groupe)

Objectif :

• 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 ← / →)

É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

Esthétique

Prochaine étape

On repart proprement, pas à pas. Le jeu commence

Le Guide a écrit : ven. juin 20, 2025 4:03 pm

Walt Zeffeuk a écrit :

et " " (pour la petite histoire)

Sous-chef a écrit :Programmer les boutons et les widgets ensemble, étape par étape

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

Objectif de cette première étape

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

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. Clique sur l’icône Datasources
2. Clique sur + New JS Object
3. Nomme-le par exemple : CartesData
4. Colle le code suivant :

// 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. 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 :

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

• 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

• 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.

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

Objectif

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

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 :

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

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

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

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

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

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

Résultat

• 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”.

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

Objectif

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

[
  { "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 :

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

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

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

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

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

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

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

• 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.

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

1. Tarot de Marseille

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

2. Tarot de Boulot

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

Formats disponibles

• .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

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.

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

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. 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

[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 
  || "…" 
}}

• 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 !

• 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

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

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`).

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`.

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.

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.

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

• 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 !

• 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.