Ressources Magic Makers

EXPERIMENTER

J'apprends en me trompant.

EXPERIMENTER

J'apprends en me trompant.

PARTAGER

J'ai des idées et je les partage avec les autres.
partager

PARTAGER

J'ai des idées et je les partage avec les autres.

RAISONNER

Je suis fier de ce que je fais.

RAISONNER

Je suis fier de ce que je fais.

INVENTER

Je suis la pour créer.

INVENTER

Je suis la pour créer.

S'AMUSER

Je viens parce que j'en ai envie.

S'AMUSER

Je viens parce que j'en ai envie.
Menu
UP

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Thunkable et Firebase

Sur cette page, tu trouveras plusieurs informations autour de la création d’app avec Thunkable et Firebase: 

    • Utiliser le composant Sign In de Firebase pour créer un système de compte
    • Utiliser le composant RealTime DB de Firebase pour stocker des informations en ligne

Voici un projet exemple type clicker pour te donner une idée des possibilités avec Firebase ! Le principe de l’app : tu as 10 secondes pour cliquer sur une image, tu peux ensuite voir ton meilleur score et les 3 meilleurs scores parmi tous les joueurs.

Voici un projet exemple qui utilise le sign in de Firebase et des GoogleSheets 

SIGN IN avec Firebase

Tu peux suivre ce tuto suivant pour découvrir comment créer ton compte sur Firebase et commencer à créer ton système de compte en ligne !

Doc Thunkable sur le composant Sign In

1/ Créer ton compte sur FireBase

Tu vas commencer par te connecter à FireBase avec ton adresse gmail. (1)

Tu peux ensuite accéder à la console pour créer un nouveau projet sur FireBase. (2) 

Tu peux alors créer et paramétrer ton nouveau projet :

Pour finir cette étape, tu vas définir les paramètres de connexion pour tes utilisateurs !

2/ Ajouter le composant Sign In​

Sur ton écran, tu peux maintenant ajouter le composant Sign In qui fait appel à Firebase.

Il faut ensuite que tu relies ton compte FireBase au composant. Pour ce faire, on va utiliser une clé API. C’est notre clé qui va permettre à Thunkable de savoir qui on est et quel compte chercher dans FireBase.

Pour trouver ta clé API, on va retourner dans FireBase :

3/ Programmer le composant Sign In​

Il ne te reste plus qu’à programmer ton composant ! Commence par ajouter  :

    • des champs de saisi pour permettre à l’utilisateur de noter son adresse mail et son mot de passe
    • avec un bouton pour valider l’inscription et un la connexion à son compte : 

Dans la partie Blocks, tu as ensuite accès à des nouveaux blocs pour le composant Sign In ! Voici un exemple de code pour l’inscription : 

Si tu retournes dans Firebase, tu pourras alors voir toutes tes nouvelles inscriptions 😉

Finaliser son système de compte et authentification

Maintenant que tu as compris comment fonctionne le composant, tu vas pouvoir affiner ton code et ajouter en plus un système pour stocker des noms d’utilisateurs par exemple ! Pour ce faire, commence par créer des variables dans l’app pour stocker les infos qui t’intéressent et regarde ensuite la partie Realtime DB pour découvrir comment les stocker sur Firebase !

À toi de voir comment organiser ton code et tes écrans maintenant ! Est-ce que tu as un écran accueil qui redirige vers un écran spécifique pour créer un compte ou un autre spécifique pour se connecter ? Est-ce qu’on peut rester connecté ? 

REALTIME DB avec Firebase

Doc Thunkable sur le composant RealtimeDB

Définition base de donnée (DB = DataBase)

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

Connecter la base de données Firebase à Thunkable

De la même manière que tu as connecté le composant « Sign In de Firebase » à ton compte, il faut maintenant connecter le composant « Realtime db de Firebase » à ton compte. Et ça se passe au même endroit sur Thunkable !

Mais pour commencer sur Firebase :

    • on crée la base de données du projet
    • on copie le lien vers cette base de données

Sur Thunkable :

    • on ajoute le composant
    • on donne le lien vers notre base de données dans les paramètres

Ajouter une info à la base de données

Avec le bloc « Save » on va pouvoir sauvegarder des données dans notre base de données. Voici un petit code pour comprendre le fonctionnement :

On peut ensuite tester et voir que ça se met à jour dans Firebase : 

Mettre à jour une info de la base de données

Avec ce même bloc « Save » on peut mettre à jour les données en ligne en reprenant la « key » que l’on veut modifier. Par exemple, en modifiant simplement le code précédent :

On obtient :

Récupérer une info de la base de données

Avec le bloc « Get » tu peux récupérer une valeur. En reprenant notre exemple précédent : 

Si on teste l’app, on obtient :

Concrètement dans un projet

Suivant les projets et ce que tu veux stocker, tu devras parfois utiliser des astuces.

Par exemple, si tu veux créer un jeu et sauvegarder le score de tous les joueurs pour afficher ensuite les trois meilleurs joueurs. Dans ce cas-là, une démarche possible sera de sauvegarder un long texte que l’on peut afficher en liste dans Thunkable mais que en texte dans Firebase. Il existe ensuite un bloc dans Thunkable qui nous permet de faire la conversation entre un texte et une liste pour sauvegarder ainsi facilement nos données et un autre bloc pour trier la liste et encore un autre bloc pour récupérer ensuite que les trois premiers éléments !

Pour mieux comprendre le fonctionnement, tu peux regarder le projet suivant : DEMO CLICKER FIREBASE.

Note : Commence par tester le projet en te créant un compte avec une fausse adresse mail pour aller ensuite regarder et bien comprendre le code !

Aller plus loin : les objets

Pour stocker des données, tu peux aussi utiliser des objets. Il s’agit de ces blocs dans Thunkable : 

Avec ces blocs, tu vas pouvoir manipuler des éléments qui ont des paramètres comme tu as pu voir dans Firebase avec une « key » (ici « property ») et une « valeur ».

Doc Thunkable sur les objets