Table des matières:

Liste de tâches en temps réel à l'aide de Google Firebase : 12 étapes
Liste de tâches en temps réel à l'aide de Google Firebase : 12 étapes

Vidéo: Liste de tâches en temps réel à l'aide de Google Firebase : 12 étapes

Vidéo: Liste de tâches en temps réel à l'aide de Google Firebase : 12 étapes
Vidéo: Flutter & Firebase : Pour Créer des Applications en Temps Réel 2024, Novembre
Anonim
Liste de tâches en temps réel à l'aide de Google Firebase
Liste de tâches en temps réel à l'aide de Google Firebase

Salut!

Nous utilisons tous des listes de tâches au jour le jour, que ce soit en ligne ou hors ligne. Alors que les listes hors ligne sont susceptibles de se perdre, et les listes virtuelles peuvent être égarées, supprimées accidentellement ou même oubliées. Nous avons donc décidé d'en faire un sur Google Firebase, une base de données en temps réel. Pourquoi? Parce que:

1. C'est cool

2. C'est en temps réel, donc les modifications sont apportées instantanément.

3. Facile à utiliser et centralisé; toutes les données sont sur le cloud et accessibles via n'importe quelle plateforme.

4. Une API merveilleuse qui est très favorable.

5. Les mises à jour sont faciles à faire.

Nous nous concentrerons sur l'ajout manuel de données à Firebase dans ce projet !

Étape 1: Démarrer avec Google Firebase

Visitez le site Web de Google Firebase et cliquez sur le bouton « Connexion » dans le coin supérieur gauche et connectez-vous via votre compte Google.

Après vous être connecté, cliquez sur « Aller à la console » pour accéder à la console de votre base de données Firebase. Ne vous inquiétez pas, ce n'est rien d'avancé.

Étape 2: faire un « projet »

Faire un 'Projet'
Faire un 'Projet'

Sur votre nouvel écran, cliquez sur l'énorme icône Plus (Ajouter un projet) pour créer un nouveau projet. Chaque projet ne peut avoir qu'une seule base de données, vous devrez donc répéter ce projet plusieurs fois au cas où vous voudriez plusieurs bases de données en temps réel.

Maintenant, tapez le nom de votre projet et sélectionnez le pays d'utilisation. Cliquez sur Créer un projet pour commencer !

Étape 3: Bienvenue dans la console Firebase

Bienvenue dans la console Firebase !
Bienvenue dans la console Firebase !

Après le chargement, cliquez sur continuer. Cela vous amènera à un nouvel écran.

Bienvenue dans votre console Google Firebase !

Étape 4: Création de la base de données

Création de la base de données
Création de la base de données

Dans le menu de gauche, cliquez sur 'Base de données'. Cela vous mène à un nouvel écran où vous pouvez choisir entre Cloud Firestore ou Realtime Database. Nous utiliserons Realtime Database pour ce projet. Cliquez sur Commencer !

Étape 5: Définir des règles de sécurité pour votre Firebase

Définir des règles de sécurité pour votre Firebase
Définir des règles de sécurité pour votre Firebase

Firebase offre de puissantes fonctionnalités d'authentification afin qu'il n'y ait aucun accès non autorisé à votre base de données. Cependant, pour rester simple, nous utiliserons une base de données « publique », qui peut être modifiée par toute personne ayant accès aux « identifiants » de votre base de données. Plus d'informations sur les informations d'identification plus tard.

Sélectionnez le « Mode de test » pour ce projet et cliquez sur Activer.

Étape 6: Bienvenue dans votre Firebase

Bienvenue dans votre Firebase !
Bienvenue dans votre Firebase !

Voici à quoi ressemblerait votre écran. Sauf le nom du projet.

Étape 7: Création de votre première liste de tâches

Nous allons créer des listes de tâches, appelées « seaux ». Chaque compartiment est une liste imbriquée de données. Bien que vous soyez libre de choisir les formes d'imbrication que vous souhaitez, pour ce projet, chaque compartiment représentera une tâche.

Pour ajouter le premier compartiment, cliquez sur l'icône « + » devant null comme indiqué.

Étape 8: Nom de la liste des tâches

Nom de la liste des tâches
Nom de la liste des tâches

2 Les attributs s'affichent. Nom et valeur.

La balise 'Nom' est utilisée pour faire référence au nom de votre tâche. Par exemple, vous voudriez créer une liste d'instructables que vous voulez voir plus tard. Nous utilisons donc le nom comme Instructables, parce que, pourquoi pas.

Notez que les champs sont courts, donc la visibilité des noms plus longs peut être un problème. Cependant, soyez assuré que le nom est exactement ce que vous avez tapé.

Bien que nous puissions mettre n'importe quelle valeur pour la balise Value, nous aimerions plutôt ajouter une liste d'éléments sous le titre. Donc, pour créer ce nid, nous cliquons sur l'icône 'Plus' devant la balise Value.

Étape 9: Ajout de détails à la liste

Ajout de détails à la liste
Ajout de détails à la liste

Vous pouvez voir qu'un autre "niveau" de la liste est apparu.

Nous allons maintenant attribuer un attribut appelé « Quand » pour indiquer le jour où vous souhaitez le faire. Tapez « Quand » dans la balise de nom et « Dimanche », par exemple, dans la balise de valeur.

Maintenant, vous voudriez ajouter les types d'instructables que vous voudriez voir. Nous les regrouperons sous le nom « Quoi ».

Étape 10: Ajout de sous-tâches à la liste

Ajout de sous-tâches à la liste
Ajout de sous-tâches à la liste

Cliquez sur l'icône plus devant le nom de votre « Seau » ou « Tâche » ou « Liste ». Dans le nouveau champ, tapez « Quoi » dans le nom et cliquez sur l'icône plus pour créer une liste sous cet en-tête. Cliquez sur l'icône plus devant quoi ajouter un autre champ.

Vous pouvez voir qu'un autre niveau est apparu. Saisissez vos tâches dans la balise « Nom » et une description dans la balise « Valeur ». N'hésitez pas à expérimenter ici avec plus d'imbrication.

Cliquez sur ajouter pour finaliser cela. Ou cliquez sur Annuler au cas où vous auriez des doutes sur l'ajout des données.

Étape 11: Tada

Tada !
Tada !

Vous verrez la liste s'allumer en vert, puis elle se matérialisera fermement en fonction des données que vous avez définies. Vous remarquerez que Firebase trie automatiquement les « noms » des listes et des sous-listes par ordre alphabétique.

Si une tâche semble incomplète, cliquez dessus et faites défiler vers la droite pour la voir entièrement.

Étape 12: Terminez l'ajout de vos tâches

Terminez l'ajout de vos tâches
Terminez l'ajout de vos tâches

Répétez ceci pour faire votre liste !

Un petit récapitulatif:

Nouveaux buckets en insérant dans la liste la plus à gauche le nom du projet.

Nouveaux attributs en insérant sur la tâche.

Nouvelles sous-listes en insérant des tâches à l'intérieur d'une liste !

Vous pouvez consulter cette liste à tout moment et n'importe où ! Il est parfaitement synchronisé. Prendre plaisir!

Conseillé: