Ressources Magic Makers

Crée un projet jukebox sur Thunkable !!

C'est quoi une base de données ? locale et cloud ? À quoi ça sert ?

Un base de données est une collection d’informations organisées. On utilise par exemple des bases de données pour stocker les noms d’utilisateur et mot de passe associés pour un site ou encore des bases de données pour gérer des réservations.

Ça peut te servir à stocker tous types d’informations (une collection d’images, de texte, de nombres, etc).

Local veut dire que les données sont stockés sur le téléphone de l’utilisateur. Les données se conservent si tu fermes et ouvres de nouveau ton app. Tu peux ainsi conserver les paramètres de l’utilisateur !

Si l’utilisateur crée une collection de GIF par exemple, on a envie qu’elle ne se supprime pas à chaque fois. On va donc utiliser une base de données pour stocker ses GIF et elle sera locale pour qu’elle reste d’une session à l’autre.

Cloud veut dire que les données ne sont pas stockés sur le téléphone de l’utilisateur mais sur un service tiers en ligne. Les données de tous les utilisateurs se conservent si tu fermes et ouvres de nouveau ton app. Tu peux ainsi conserver les paramètres de tous les utilisateurs en même temps et les afficher en live !

Si tu veux créer une app pour créer un album photo commun par exemple, tu as besoin que chaque utilisateur puisse ajouter des photos et puisse voir les photos ajoutées par les autres. Une variable cloud va permettre de stocker les informations de tout le monde et se mettre à jour dès qu’un utilisateur a ajouté une photo !

Tuto pas-à-pas

Pour commencer, tu peux suivre ce tuto pour créer la base de ton projet comprenant une base de données locale de textes !

Regarde ensuite la version avancée pour permettre à l’utilisateur d’ajouter des éléments dans la base de données. Puis la dernière version avec un variable cloud pour transformer ton projet en app partagée.

Créer un projet qui affiche un élément aléatoirement

Tu peux regarder la vidéo ou suivre le tuto ci-dessous 🙂

1/ Créer un tableau pour stocker nos information

On va commencer par créer l’élément principal du projet : la base de données de textes !

Pour ce tuto, on va reprendre l’exemple du projet qui affiche des citations. À toi de choisir ce que tu veux stocker comme texte !!

On commence par créer un nouveau tableau dans DataSource :

Tu peux alors noter les valeurs que tu souhaites dans ton tableau. On verra dans la deuxième version du projet comment permettre à l’utilisateur d’en ajouter.

On a maintenant des nouveaux blocs “Data Sources” dans la partie Blocks pour manipuler nos données.

2/ Afficher aléatoirement un élément de notre base de données

On peut ensuite afficher les valeurs de notre tableau !

Chaque colonne de notre tableau est en fait une liste que l’on peut manipuler avec les blocs de la partie ‘Data Sources’ mais aussi de la partie ‘Lists’. Ici, on va récupérer le bloc pour choisir une valeur aléatoire dans une liste et l’utiliser pour notre base de données.

On utilise en plus un composant ‘label’ pour afficher le texte selectionné.

Voici par exemple le code pour choisir au hasard une citation parmi la base de données quand on arrive sur l’écran et quand on appuie sur un bouton pour recommencer :

Note : Il existe deux blocs pour choisir un élément au hasard dans une liste. Le résultat sera le même !

Créer un projet où l'utilisateur peut ajouter des éléments à la base de données

1/ Afficher tous les élements de notre base de données

On va commencer par créer un nouvel écran pour afficher la base de données et un bouton sur l’écran d’accueil pour y accéder.

On va ensuite ajouter le composant “List_viewer” pour afficher les éléments de notre base de données.

Il nous suffit de préciser dans le code quelle liste le composant doit afficher. Ici, on va afficher la liste de notre tableau !

Et si tu as des liens vers des images, tu peux utiliser le composant Data Viewer Grid pour afficher toutes les images en mosaïque !

2/ Créer un nouvel écran

On va commencer par créer un nouvel écran pour le nouveau mécanisme du projet.

Pense à le renommer correctement pour t’y retrouver plus facilement !

Ajoute ensuite un bouton sur ton écran d’accueil pour y accéder.

3/ Récupérer un texte tapé par l'utilisateur

Pour permettre à l’utilisateur de taper quelque chose, une citation par exemple, on va utiliser le composant “text_input” et un bouton pour valider la saisie de l’utilisateur.

On a maintenant un champ à remplir et un bouton dans la partie Design ainsi que des nouveaux blocs dans la partie Blocks pour récupérer un texte de l’utilisateur !

4/ Ajouter le texte saisi par l'utilisateur à notre base de données

Dans le code, on peut alors : 

    • quand le bouton est cliqué :
      • vérifier que le champ à remplir n’est pas vide
      • ajouter une ligne dans notre tableau avec l’entrée de l’utilisateur

Tips : Si tu as plusieurs info à récupérer – lien de l’image et son nom par exemple – tu auras besoin de plusieurs champs à remplir !

Créer une version partagée du projet

Tu peux regarder la vidéo ou suivre les explications ci-dessous 🙂

1/ Créer une variable cloud

Pour permettre à TOUS les utilisateurs d’ajouter des éléments et voir les éléments des autres, on a besoin d’une variable cloud.

Il faut :

    • la créer
    • l’initialiser (lui dire que c’est une liste au tout début)
    • l’afficher quand on le souhaite
    • la modifier quand un utilisateur veut ajouter du contenu

2/ Utiliser la variable cloud

On peut maintenant modifier notre code pour utiliser notre variable. On va remplacer tous les blocs ‘Data Source’ par les blocs de notre variable. 

Note : Comme notre varaible est une liste, on va pouvoir utiliser les blocs ‘Lists’ avec les blocs ‘Variable’ pour la manipuler !

Tu peux ensuite personnaliser ton projet comme tu le souhaites ! Regarde les projets exemples pour trouver des idées 🙂

Projets exemples

Tu peux regarder ici les projets exemples pour t’inspirer !

Un projet qui affiche des citations aléatoirement ICI

Un projet collection de GIF ICI

Un projet qui te recommande des films à regarder dans une catégorie que tu choisis ICI

Un projet qui te recommande des films à regarder ICI

Un projet qui te donne une réponse à une question que tu lui poses (un peu comme les boules magiques) ICI

Un projet qui te recommande des choses sur 3 thématiques prédéfinies ICI

Un projet qui te dit ta couleur du jour ICI

Un projet qui te donne une nouvelle langue ou un nouveau langage de programmation à découvrir ICI

Un projet qui te dit quel film d’Harry Potter regarder aujourd’hui ICI

Un projet qui t’ouvre une musique sur Youtube ICI

Et la version partagée du projet avec une variable cloud ICI

Un projet pour stocker tes recherches ICI

Un projet qui te dit quel personnage de FullMetal Alchemist tu es ICI

Un projet de voyante ICI

Un projet pour savoir quoi faire dans le Gard ICI

Une app pour te challenger ICI

Un projet bibliothèque ICI

Un projet citation de théâtre ICI

Un projet d’horoscope ICI

Un projet pour trouver une nouvelle recette ICI

Un projet pour savoir quel Homer tu es ICI

Un projet qui te donne des noms de jeux ICI

Un projet de jeu de rôles ICI

Un projet de To-Do liste ICI