Tuto Thunkable - Intégrer Gemini API

Dans la première partie de ce tutoriel, nous avons connecté notre prototype mobile à une base de données Firebase. C’est une excellente pratique, particulièrement pertinente si vous envisagez de basculer plus tard sur du développement avec des frameworks comme React Native. Cependant, cette approche nous rend dépendants d’une base de données pré-remplie.

Aujourd’hui, on passe à la vitesse supérieure. Après 20 ans dans l’industrie des TI, je suis toujours fasciné par la façon dont on peut désormais intégrer de l’intelligence artificielle dans une application en quelques clics. Nous allons remplacer notre base statique par l’API de Google Gemini pour générer des citations 100% sur mesure, à la volée !

Avant-propos: Cet article, augmenté d’améliorations générées avec des IA (Google Gemini), est mis à disposition au travers de la license CC BY-ND 4.0

Étape 1 : Obtenir les clés du cerveau (Google AI Studio)

Pour parler à Gemini depuis notre application, il nous faut un laissez-passer : une clé d’API.

Rendez-vous sur Google AI Studio.
Connectez-vous avec votre compte Google.
Dans le menu de gauche, cliquez sur Get API key puis sur le bouton Create API key.

Générer une clé API sur Google AI Studio

Une fois la clé d’API créée, cliquez dessus pour l’afficher.
Copiez cette longue suite de caractères et gardez-la précieusement (ne la partagez jamais publiquement).

Étape 2 : Adapter le Design de MotivApp

Reprenons notre projet Thunkable là où nous l’avons laissé. Nous allons ajouter un peu d’interactivité.

Sur le Screen1 (Accueil) : Ajoutez un composant Text Input juste au-dessus du bouton “Inspire-moi !”. Modifiez son paramètre Hint (indice) pour afficher : “Entrez un thème (ex: Le sport, Le code…)”. Renommez ce composant Input_Theme.

Étape 3 : Le Prompt Engineering avec RISEN

C’est le cœur du réacteur. Pour éviter que l’IA ne divague, nous allons structurer notre requête (prompt) avec le framework professionnel RISEN. Voici comment nous allons contraindre le modèle gemini-2.5-flash :

R (Role) : Agis comme un coach de vie expert en motivation.
I (Instruction) : Écris une citation motivante inédite basée sur le thème suivant : [Thème tapé par l’utilisateur].
S (Steps) : 1. Analyse le thème. 2. Trouve un angle inspirant. 3. Formule la citation. 4. Attribue-la à un auteur fictif ou réel.
E (End Goal) : Le lecteur doit ressentir une envie immédiate de passer à l’action.
N (Narrowing) : La réponse DOIT suivre ce format strict : ‘Citation - Auteur’. Ne dépasse pas 20 mots. N’inclus aucune salutation.

Voici exactement le texte final que notre application va assembler, en remplaçant la app variable de fin par le thème choisi par l’utilisateur :

Agis comme un coach de vie expert en motivation. 
Écris une citation motivante inédite basée sur le thème suivant : [THÈME DE L'UTILISATEUR]. 
1. Analyse le thème. 2. Trouve un angle inspirant. 3. Formule la citation. 4. Attribue-la à un auteur fictif ou réel. 
Le lecteur doit ressentir une envie immédiate de passer à l'action. 
La réponse DOIT suivre ce format strict : 'Citation - Auteur'. Ne dépasse pas 20 mots. N'inclus aucune salutation.

Étape 4 : La Logique et les Blocs

Sur le Screen1

Aperçu des blocs

Aperçu des blocs du Screen1

Séquence des blocs

Initialisation

À l’ouverture du Screen1, videz le champ Input_Theme.
Lors du clic sur Btn_Inspire, nous devons vérifier que le texte Text du composant Input_Theme n’est pas vide avant d’exécuter les étapes suivantes.

Construire la requête API :

Créez un composant Web API : dans la liste de gauche, déroulez “Advanced”, puis cliquez sur le [+] à droite de “Web APIs”. C’est lui qui remplacera Firebase pour dialoguer avec les serveurs de Google.
- Renommez-le en Gemini.
- Configurez l’URL de l’API : définissez le champ “URL” à https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent.
- Configurez votre clé d’API :
  - Définissez le champ “Property” à key.
  - Collez votre clé d’API dans le champ “Value”.
  - Cliquez sur [Add].
- Configurez l’en-tête (header) :
  - Définissez le champ “Property” à Content-Type.
  - Tapez application/json dans le champ “Value”.
  - Cliquez sur [Add].
- Cliquez sur [Done].

Configuration de la WebAPI

L’API de Gemini est très stricte sur le format des données qu’elle reçoit. Elle attend un objet JSON contenant une liste contents, qui contient elle-même une liste parts, qui contient enfin l’attribut text avec notre prompt. Dans Thunkable, la façon la plus simple de construire ce corps de requête (le Body) est d’utiliser un bloc de texte.

D’abord, créez une app variable full_prompt et utilisez un bloc join pour y coller le gros bloc de texte RISEN (vu à l’étape 3) avec le texte Text du composant Input_Theme.
Prenez un autre bloc de texte avancé join (qui permet de coller plusieurs morceaux de texte ensemble).
Dans la première case, collez exactement ce début de code JSON : {"contents": [{"parts": [{"text": "
Dans la deuxième case, glissez votre app variable full_prompt.
Dans la troisième case, fermez le code JSON avec : "}]}]}
Assignez le tout au bloc set Web_API's Body to.

Construction du prompt

Extraire la réponse JSON :

Lancez l’appel avec le bloc call Gemini's Post.
L’API nous répond avec un gros bloc de données textuelles complexes (response).
Dans la section then do, nous allons isoler le texte qui nous intéresse en imbriquant plusieurs blocs, un peu comme des poupées russes. Nous allons assigner tout ce cheminement à une nouvelle app variable citation.
Pour bien comprendre ce grand bloc rouge et bleu, lisez-le de droite à gauche (de l’intérieur vers l’extérieur) :
1. On transforme le texte brut en objet manipulable : get object from JSON [response].
2. On extrait la propriété candidates.
3. C’est une liste, on prend le premier élément : in list [...] get # 1.
4. On extrait la propriété content.
5. On extrait la propriété parts.
6. C’est aussi une liste, on prend le premier élément : in list [...] get # 1.
7. On extrait enfin la propriété text.
Séparer la citation de l’auteur : 1. Créez une app variable liste_reponse.
1. Assignez-lui le bloc make list from text (dans Lists), en utilisant notre app variable citation, et tapez " - " dans la case delimiter.
2. Maintenant que nos données sont propres et découpées, terminez en glissant le bloc Navigate to Screen2.

Appel Web API et parsing JSON

Sur le Screen2

Mettez à jour le Label_Quote en allant chercher le premier élément de cette liste (bloc in list get # 1).
Mettez à jour le Label_Author en allant chercher le deuxième élément (bloc in list get # 2).

Affichage de la citation

Étape 5 : Essayez !

Le moment de vérité est arrivé.

Lancez l’application via Thunkable Live sur votre téléphone (ou via l’aperçu Web de la plateforme).
Sur le premier écran, tapez un thème qui vous inspire dans le champ de texte (par exemple : “La gestion du stress”, “Le dépassement de soi” ou “L’apprentissage de la guitare”).
Appuyez sur Inspire-moi !.
Après une brève seconde (le temps que le modèle de Google génère sa réponse), vous basculez automatiquement sur le deuxième écran.
Et voilà ! Une citation unique, parfaitement formatée et taillée sur mesure pour votre thème s’affiche sous vos yeux. Vous n’avez plus qu’à cliquer sur “Retour” pour tester avec une nouvelle idée !

Conclusion

Félicitations ! Vous venez de créer une application mobile capable de générer du contenu à l’infini grâce à l’intelligence artificielle. Les limites du no-code sont repoussées tous les jours, et c’est le moment idéal pour expérimenter.

N’hésitez pas à modifier le prompt RISEN pour créer un générateur de recettes de cuisine, un créateur de poèmes ou même un quiz interactif. À vous de jouer !