ouaisfi.eu

Publié : **ven. juin 20, 2025 3:13 pm**

Publié : **ven. juin 20, 2025 3:36 pm**

Tutoriel Appsmith : Créer des boutons de tirage de carte

Ce guide t’explique pas à pas comment afficher une carte tirée au hasard dans ton application Appsmith à partir d’une base de données.

1. Préparer ta base de données de cartes

Tu dois avoir une source de données (par exemple : une requête nommée TarotCards) qui renvoie une liste de cartes.

Code : Tout sélectionner

// Exemples de données JSON
[
  {
    "nom": "Le Bateleur",
    "numero": 1,
    "mot_cle_principal": "Commencement"
  },
  {
    "nom": "La Papesse",
    "numero": 2,
    "mot_cle_principal": "Savoir caché"
  },
  ...
]

2. Ajouter un widget texte pour afficher la carte tirée

Ajoute un Widget Texte et mets ce code :

Code : Tout sélectionner

{{ appsmith.store.carteTirée?.nom || "Tirez une carte" }}

Tu peux aussi créer d'autres widgets pour afficher les autres champs :

Code : Tout sélectionner

Mot-clé : {{ appsmith.store.carteTirée?.mot_cle_principal || "—" }}

3. Créer un bouton « Tirer une carte »

Ajoute un Widget Bouton et mets comme label : Tirer une carte

Dans l’onglet Actions → onClick, sélectionne Exécuter JavaScript, et ajoute ce code :

Code : Tout sélectionner

{{ 
  storeValue("carteTirée", 
    _.sample(TarotCards.data) 
  ) 
}}

Astuce : la fonction _.sample() choisit un élément au hasard dans une liste.

4. Résultat

À chaque clic sur le bouton, une carte aléatoire est tirée et affichée dans le widget texte.

Exemple : tu cliques → "La Papesse" s’affiche avec son mot-clé.

5. Aller plus loin

Tu peux maintenant :

Ajouter un deuxième bouton pour tirer une carte de boulot
Ajouter une image correspondant à la carte
Ajouter un historique des tirages (avec une liste)
Personnaliser les couleurs et l’esthétique

Besoin de refaire tout ça dans une nouvelle version de ton app ? Je peux te générer le fichier tout prêt !

Publié : **ven. juin 20, 2025 3:37 pm**

Tutoriel Appsmith : Ajouter des boutons « Carte suivante / précédente »

Ce guide t’apprend à parcourir une liste de cartes avec des boutons “←” et “→”.

1. Préparer ta base de données de cartes

Tu dois avoir une requête (par exemple : TarotCards) qui renvoie toutes les cartes dans une liste :

Code : Tout sélectionner

TarotCards.data = [
  { "nom": "Le Bateleur" },
  { "nom": "La Papesse" },
  { "nom": "L’Impératrice" },
  ...
]

2. Initialiser un index au chargement de la page

Dans les Actions au chargement de la page, ajoute ce code :

Code : Tout sélectionner

storeValue("carteIndex", 0);

Cela permet de démarrer sur la première carte de la liste.

3. Afficher la carte en fonction de l’index

Dans ton Widget Texte, remplace l’ancien code par :

Code : Tout sélectionner

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

Tu peux aussi afficher les autres champs :

Code : Tout sélectionner

Mot-clé : {{ TarotCards.data[appsmith.store.carteIndex]?.mot_cle_principal || "—" }}

4. Ajouter le bouton « Carte suivante »

Ajoute un bouton avec l’icône ou le texte `→`

Dans onClick → Exécuter JS, mets ceci :

Code : Tout sélectionner

{{ 
  storeValue("carteIndex", 
    (appsmith.store.carteIndex + 1) % TarotCards.data.length
  ) 
}}

Cela incrémente l’index en boucle infinie.

5. Ajouter le bouton « Carte précédente »

Ajoute un bouton avec l’icône ou le texte `←`

Dans onClick → Exécuter JS, mets ceci :

Code : Tout sélectionner

{{ 
  storeValue("carteIndex", 
    (appsmith.store.carteIndex - 1 + TarotCards.data.length) % TarotCards.data.length
  ) 
}}

Cette formule gère aussi la boucle vers la fin quand tu vas “en arrière” depuis la première carte.

6. Résultat

Tu peux maintenant cliquer sur :

← pour voir la carte précédente
→ pour voir la carte suivante

Et tout reste synchronisé grâce à l’index `carteIndex` stocké dans `appsmith.store`.

Astuce : tu peux aussi afficher l’index actuel avec :
→ Carte numéro : {{ appsmith.store.carteIndex + 1 }}

Besoin que je t’envoie un fichier Appsmith avec tout ça déjà prêt ? Dis-le-moi !

Publié : **ven. juin 20, 2025 3:39 pm**

Tutoriel Appsmith : Ajouter un bouton « Tirer une carte au hasard »

Ce bouton fonctionne en parallèle des boutons “← / →” et permet de choisir une carte aléatoirement dans la liste.

1. Ajouter le bouton « Tirer au hasard »

Ajoute un nouveau Widget Bouton avec le label :

Code : Tout sélectionner

Tirer une carte

Dans l’action onClick → Exécuter du JavaScript, colle ce code :

Code : Tout sélectionner

{{ 
  storeValue("carteIndex", 
    _.random(0, TarotCards.data.length - 1)
  ) 
}}

Ce code choisit un index aléatoire, puis met automatiquement à jour la carte affichée si tu l’affiches via :

Code : Tout sélectionner

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

2. Bonus : afficher une transition ou un effet

Tu peux utiliser un Widget Texte animé ou modifier dynamiquement la couleur d’arrière-plan du container pour créer un effet visuel pendant le tirage.

Exemple : changer l’opacité d’un fond, afficher une roue de “chargement” ou faire clignoter la carte pendant 0.5 sec.

3. Résultat final

Tu as maintenant 3 types de navigation dans ta liste de cartes :

← Carte précédente : navigue vers l’arrière dans la liste
→ Carte suivante : navigue vers l’avant dans la liste
Tirer une carte : affiche une carte aléatoire

Tu peux ajouter un champ “type de tirage” dans appsmith.store pour mémoriser si c’est un tirage manuel ou aléatoire !

Besoin d’un export complet avec tout cela intégré dans ton fichier JSON ? Je te le prépare.

ouaisfi.eu

bêta test appli

bêta test appli

Re: bêta test appli

Re: bêta test appli

Re: bêta test appli