Maîtriser Firebase avec Flutter - Android et IOS

1. Introduction à FlutterFire: Si vous aviez déjà déchargé la gauche et celui pour devenir un développeur d'application pleine pile, alors vous devez savoir comment gérer la base de données et d'autres services backend. Il y a beaucoup d'options disponibles, et parmi eux, Firebase est le meilleur choix quand il s'agit de construire et de déployer des applications sur le marché dans un court laps de temps, par lequel nous fournit tout ce dont nous avons besoin comme l'authentification, base de données, publication et analyse, apprentissage automatique, notification push, et bien plus encore. Flutter Fire est un ensemble de plug-ins qu'une impulsion Florida applications à utiliser Firebase Services, Board Flutter et Firebase appartiennent à Google et c'est pourquoi ils fonctionnent ensemble de manière transparente. Dans ce cours, nous allons couvrir tous les sujets importants tels que l'authentification utilisateur accepté, e-mail et mot de passe. Implémenter les opérations de connexion Google avec la base de données Firestore, gestion des exceptions, le téléchargement de fichiers vers le stockage, la gestion des exceptions, le téléchargement de fichiers vers le stockage,la compression d' images, etc. Ces concepts sont suffisants pour vous donner confiance tant que développeur afin que vous puissiez postuler pour votre emploi de rêve. 2. Configurer la réalité dans un projet: Au cours de cette session, nous allons mettre en place notre projet Firebase. Donc, d'abord, créons une nouvelle inondation un projet. Faites ressortir votre répertoire, puis la ligne de commande ness CMD, tapez simplement, Fluter, créer, puis le nom de votre projet. Je vais le nommer. Troisième, troisième, cinq victoires, puis appuyez sur Entrée. Ensuite, j'utiliserai VS Code. Ensuite, ajoutez simplement votre projet dans ce code, comme ceci. Maintenant k, v avoir notre projet. Maintenant. D' accord. Maintenant, allez simplement dans votre navigateur et tapez Firebase. Et ici, vous obtiendrez la page officielle de firebase dot google.com. Ici vous pouvez voir des produits et des solutions. Alors quelles sont les extensions ? Aussi ? Quelles sont les grandes entreprises et les jeux qui comptent sur Firebase. Donc duolingo est célèbre, et Lima par extrémiste et vos chars est célèbre. Lift est également une application très célèbre. Venmo est prêt célèbre. Donc ici, vous pouvez voir Firebase, est-il utilisé par beaucoup d'applications ? Maintenant, il vous suffit de vous connecter avec votre compte Google ici, puis cliquez sur aller à la console. Oui, voir vous pouvez voir mon compte Google et puis il suffit de cliquer sur aller à la console. Et ici, j'ai des projets différents, différents , multiples, mais je suppose que vous n'en aurez pas. Il suffit de cliquer sur ce projet et de lui donner un nom. Je vais le nommer Firebase. Et si vous le souhaitez, vous pouvez activer et analyser. Je ne veux pas me déembellir maintenant. Ensuite, vous pouvez simplement cliquer sur Créer un projet. Après le projet, cela a été créé avec succès. Ici, cela ne prendra que quelques secondes. Firebase nous fera savoir que notre nouveau projet est prêt. Et il nous dirigera vers le tableau de bord du projet. Ici, comme ça. Maintenant, nous avons notre tableau de bord et ici vous pouvez voir les produits Alda qu'il nous fournit qui est l'authentification, le stockage de base de données. Et donc notre première tâche sera de configurer notre application flirtée pour utiliser cette Firebase. Et je vais déverrouiller configuré l'Android, mais certainement si vous voulez, vous pouvez configurer iOS et web ainsi. C'est à vous de voir. Pour le configurer. Il suffit de cliquer sur ce bouton Android. Et maintenant, dans cet écran, il nous demandera le nom du paquet Android. Et ce nom de paquet. Nous pouvons l'obtenir auprès de notre directeur de projet Flotter EPA, c'est l'Android. Ensuite, dans cette application, vous avez juste à aller à construire du crédit. Ici. Ceci, c'est l'ID d'application de notre flotteur. Il suffit d'aller et de le coller ici. Je vais juste nommer dans inondation là Firebase. Et cette clé SHA-1 effrontée acide est très importante, mais nous l'utiliserons dans les vidéos ultérieures. Ensuite, après qu'ils simplement cliquez sur Enregistrer l'application. L' étape suivante consiste à télécharger ce dépôt de conflit. C' est très important. Il contient les clés d'API et les informations critiques à utiliser par Firebase. Il suffit de cliquer sur ce téléchargement. Google services.js IN. Et une fois qu'il a été téléchargé avec succès, vous suffit d'aller couper ce fichier du dossier de téléchargement et d'aller à votre projet plus plat. Ensuite, allez sur Android, puis allez à l'application et collez-le simplement ici. C'est ça. C' est comme ça que c'est fait. Après cela, vous cliquez sur ce suivant dans la Firebase. La troisième étape consiste à ajouter le SDK Firebase. Maintenant, nous devrons mettre à jour notre configuration de crédit pour inclure le plugin de services Google. Les premiers changements seront là dans ce lit de niveau projet. Net est nous avons cet Android encore. Ensuite, la facture au niveau du projet est celle-ci. Ici. Nous devons simplement copier cette partie de classe et la coller ici. D' accord ? Et puis la dette de construction au niveau de l'application est ici. Nous avons ce dossier d'application. Et dans cette compilation Gradle, nous devons tout d'abord copier cette implémentation et la coller ici. Et ensuite, vous avez simplement à copier cela, appliquer plugin com, Google GMS, services Google, et collé en bas. C' est ça. Ce code est déjà là. Il a déjà été prédéfini dans les projets en Floride. Maintenant, l'étape suivante consiste à ajouter des plugins Firebase dans notre projet. Parce que l'affinité, il y aura des dépendances pour Firebase. Et ici, vous avez juste à cliquer sur Suivant, puis aller continuer à sombre et ainsi de suite. D' accord. Pour les dépendances, nous devons simplement aller à dev et tiré avec est accessible via un certain nombre de responsabilités différentes et différentes. Un pour chaque produit Firebase, c'est-à-dire qu' il s'agisse de base de données, d'authentification, d'analyse, de stockage. Firebase fournit un ensemble de plugins différents. On doit juste écrire Firebase Core. Le premier plugin dont nous avons besoin. Il suffit de cliquer sur l'installation et ici, copiez ceci, collez-le dans votre dépendance. D' accord. Ensuite, la prochaine dépendance dont nous avons besoin est l'art Firebase. Parce que nous allons apprendre à s'authentifier en utilisant Firebase profondeur n' est pas copié et collé dans notre fichier de spécification Pub YAML. D' accord. Maintenant, nous avons ajouté avec succès les dépendances. Ensuite, le prochain changement que nous devons faire est dans le niveau de l'application build-up Gradle ici dans cette configuration par défaut, nous avons juste à écrire une ligne de code qui est plusieurs décennies. Un mal, vrai. Donc, c'est une ligne de code qui est nécessaire. Quand on a affaire à Firebase. Cette chose dont tu dois te souvenir. C' est une partie de configuration. Maintenant, d'accord. Tout va bien. Vous pouvez également voir dans notre diapositive, notre première étape de configuration du projet Firebase est terminée. Ensuite, notre configuration de notre application est faite. Le fichier de configuration est en cours d'enregistrement dans ce projet. Ensuite, nous avons ajouté les SDK Firebase, puis, les plug-ins sourds aussi. Maintenant, la dernière étape est d'écrire cette ligne de code en eux, Main.jack, sorte que notre application dans initialise Firebase au début lorsque notre application est papa, lorsque notre application est démarrée. Donc, il devrait savoir qu'il doit initialiser les configurations Firebase pour parler sont de communiquer avec le serveur. Donc, dans le fichier principal, vous devez simplement aller la fonction principale et en faire un évier. Ensuite, vous devez écrire widget, flirter leurs liaisons commencent, assurez-vous d'initialiser. Cela signifie que quel que soit le code qui est maintenant en dessous, il sera initialisé. Et puis la ligne suivante est éveillée, Firebase, Firebase. Et puis initialiser l'application qui a dit, c'est le code dont vous devez vous souvenir. Croyez-moi, chaque fois que vous utilisez Firebase, c'est la première chose que vous devez écrire. Ensuite, seulement notre application et intégrer Firebase en elle. Aucun, c'est ça. La dernière étape consiste à exécuter l'application. Vous pouvez connecter votre émulateur ou votre appareil Android physique pour tester l'application. Et il suffit de cliquer sur cette Exécuter, puis commencer le débogage. Votre application sera prête à fonctionner. Et dans la prochaine session, nous allons créer les interfaces utilisateur requises pour l'application d'authentification. Merci. 3. Enregistrez et connectez-vous: Bienvenue. Dans cette session, nous allons créer notre écran de connexion et d'enregistrement. Parce que évidemment, lorsque nous aurons besoin d'une sorte d'interface utilisateur pour interagir avec la base de données Firebase, notre application fonctionne maintenant avec succès. Sachez que c'est là qui signifie que Firebase a été configuré correctement. Commençons par créer quelques dossiers à l'intérieur de lib parce que je préfère une sorte de structures pliées au lieu de simplement sortir des fichiers au hasard. Le premier dossier que je vais créer des modèles, puis des écrans, puis des services où Alda API sont, les services de base de données, sera écrit sur l'écran intérieur. Créons un nouveau fichier sombre appelé écran de registre. Créons notre premier écran sans état. Importez notre paquet matériel, puis créez une région apatride et nommez qu'il enregistre écran. Il retournera un échafaudage car c'est un écran. Puis v, Donnons la barre AB, puis donnez-lui un titre. Registre de texte. Centrer ce Titan et lui donner cette couleur de fond aussi. Donnez-lui des couleurs qui sont excellentes. Et dans le corps, je voudrais lui donner cette colonne. Et cette colonne, nous aurons des enfants, mais avant ça, j'aimerais aller à notre dossier principal. Et on déplace ce code factice PVS. Et à la maison, je voudrais écrire écran de registre. Et en ce que je lui donne là Firebase. Redémarrez notre application. Tu vois, c'est notre écran de registre. Maintenant, notre index et cela est aussi beau. Maintenant, il est temps que les enfants, nous créons des champs de texte pour la collecte des données utilisateur. Créons notre premier texte quand on nous donne la décoration. Donnez-lui une déclaration d'entrée d'étiquette, de texte, e-mail, puis en leur donnant bordure, ligne, bordure d'entrée. Et aussi pour chaque champ de texte, nous devons créer un contrôleur d'édition de texte. Donc, nous allons d'abord créer les contrôleurs de fin de texte. Créons le premier contrôleur de messagerie. Ensuite, il y aura alors un contrôleur de mot de passe comme lorsque le contrôleur de mot de bus, comme ceci. Ensuite, la finale sera confirmée contrôleur de mot de passe. Parce que lors de l'inscription, nous aimerions que l'utilisateur confirme son mot de passe. La grotte. Contrôleur d'édition de texte est alors neuf ce texte pour dans Donnons à ce contrôleur de messagerie. D' accord. Après cela, nous a donné la taille boîte juste pour donner une certaine hauteur d'espacement de la Turquie. Puis à nouveau créé TextField. Donnez-lui un contrôleur de contrôleur de mot de passe, puis donnez-lui la décoration d'entrée, l'étiquette, le texte. Devrait être mot de passe, puis lui donner une bordure de plan, mettre la bordure et l'index dans ce texte donnera texte obscurci est vrai de sorte que tout ce que le type d'utilisateur est caché. Puis encore une fois, donnez-lui une boîte de taille. Ça dit des travaux. Puis enfin, notre TextField off confirmation mot de passe masqué l'excès à travers. Puis contrôleur comme contrôleur de mot de passe de confirmation. Ensuite, dans cette déclaration, donnez-lui une décoration d'entrée, mot de passe texte. Et puis en décrivant. Alors boîte de bonne taille. Encore une fois. Sauvegardons et vérifions. Voyez tout ce que les champs de texte sont là. Maintenant, il est temps v donne un peu de rembourrage à elle parce qu'ils sont à la dette aux extrémités de l'écran. Et aussi un bouton de soumission. De sorte que chaque fois que l'utilisateur clique sur le bouton Soumettre, il est pris. Il sera pris à l'écran d'accueil ou quelle que soit la couleur que nous voulons exécuter. Donc ici dans le corps, méchant rapide, et lui donner un rembourrage de faire D. Puis dans cette colonne, étant donné l'alignement principal existe de moi prochaine cellule et centre Mendota. Donc tout est centré. Maintenant. Tout d'abord, donnons à un récipient une hauteur de 50. Et en largeur de la taille de l'écran. L' écran. Alors donnons-lui la forme d'une marge de manœuvre. Mais dans le site, on n'aura rien. Dans cet enfant. J' écrirais un texte, soumettrais et donnerais un style, comme la taille de police de 25. Et puis attendez, attendez. Sauvegardons et vérifions. Tu vois, ça a l'air si beau en ce moment. Après ce bouton de soumission, je voudrais avoir un nouveau bouton, qui dira simplement se connecter ici afin que l'utilisateur puisse se connecter s'il s'est déjà inscrit. Plus doux ce conteneur, j'aurai une boîte de taille. Taille boîte de hauteur deux en effet. Et cela prend, mais puis le bouton suivant, qui aura déjà une connexion de compte ici. Et maintenant, sauvez-le. Voir, nous avons ce bouton de sorte que lorsque nous cliquons dessus, l'utilisateur est envoyé à l'écran de connexion. Il est donc temps de créer un écran de lobbying aussi. Donc, dans le dossier des écrans, créez un nouveau fichier appelé écran non-parent dot-dot. Encore une fois, juste dans les deux matériaux. État créé moins rigide de l'écran de noggin. Ensuite, retournez une application d'échafaudage et l'application, mais je vais donner ce titre. Connectez-vous. Et centrer le titre. Et je vais donner la couleur de fond des couleurs de bigramme point d. C'est une couleur verdâtre, couleur d'ombre. Maintenant, dans ce corps, je vais encore faire deux champs de texte. Mais avant tout, je vais vous donner la lecture parce que je sais que la literie sera nécessaire. Et incruste point D. Puis dans cet éclat, je donnerai une colonne. Ensuite, le principal existe l'alignement, les sorties principales lm.fit centre. Ensuite, dans ce que les enfants, je vais simplement copier à partir de l'écran de registre ces deux champs de texte, c'est-à-dire l'e-mail et le mot de passe, et le coller ici. Et aussi je vais copier ces contrôleurs d'édition de texte. D' accord. Maintenant, nous aurons après cette taille, encore une fois, ce bouton qui est ce conteneur, qui dit Soumettre. D' accord. Nous avons mis en place nos écrans de connexion. Maintenant, c'est l'heure. Chaque fois que vous utilisez quelqu'un clique sur cette connexion ici. Mais alors il devrait être navigué. Pour ça. Nous avons juste aujourd'hui Navigator Dot push. Ensuite, dans la route, nous devons simplement ajouter mon itinéraire de page quotidien. Ensuite, laissez contextes et puis envoyez-le à l'écran de connexion. Comme ça. Sauvegardons ça. Et maintenant, vérifiez-le. Vérifiez notre demande. Nous avons cet écran de registre ici. Maintenant, quand je clique sur cette connexion ici, voir notre écran de connexion apparaît. C' est le champ e-mail et mot de passe avec le bouton Envoyer. Et quand je clique sur ce bouton de retour, encore une fois, notre écran d'enregistrement est là. Donc c'est tout pour cette vidéo. Nous avons l'interface utilisateur. Dans. Ensuite, la prochaine session, nous allons implémenter l'authentification Firebase en utilisant e-mail et mot de passe. 4. S'authentifier à l'aide de mot de passe e-mail: Bienvenue. Donc, dans cette session, nous allons implémenter l'authentification Firebase, e-mail et mot de passe. Donc, pour que cela soit implémenté en premier, nous devons aller dans le tableau de bord Firebase et cliquer sur ce bouton d'authentification. Ensuite, sous la signature qui est ici, si nous devons tout d'abord, cliquez sur Commencer et l'après-midi. Et puis cette signature, nous devons ajouter un e-mail de soudeur et mot de passe en cliquant simplement sur cette agile et puis enregistrer. Mais voir ici, vous pouvez voir les fournisseurs d'adultes plus âgés que ce téléphone, Google, Facebook, Twitter, Microsoft. Cela nous donne beaucoup d'options différentes. Mais d'accord, nous avons maintenant tout d'abord, quand cet email et mot de passe, c'est ce qui est nécessaire. Après cela, nous devons implémenter le service d'authentification. Et pour cela, nous devons aller dans notre dossier de services et créer un nouveau fichier appelé Art service dot dot. D'accord ? Et ici, nous allons implémenter la logique d'authentification Alda Firebase requise. Maintenant, créez un nouveau compte d'utilisateur. Dans Firebase. Nous devons appeler la fonction qui est de créer l'utilisateur avec e-mail et mot de passe. Le paquet d'art Firebase nous donne beaucoup d'options différentes dont nous allons discuter. Mais d'abord, créons le service d'art de nom de classe. Et puis la première chose que nous devons faire est de créer une instance de l'art Firebase. Nous devons donc ajouter de l'art Firebase. Puis Firebase art. Et bien, j'étais l'instance R-dot. Donc maintenant, nous avons l'exemple. Donc ici, vous pouvez voir qu'il nous donne étude. Il nous donne les différentes options que nous verrons. Mais d'abord, créons une fonction pour enregistrer l'utilisateur. La fonction sera un futur nom de fonction enregistré. Et cette fonction acceptera d'abord lorsque nous envoyons un e-mail. Et le second sera le mot de passe. D' accord ? Maintenant, vous pouvez voir ça. L' art des fibres nous donne beaucoup d'options différentes. Cela signifie vérifier les numéros de téléphone, signer avec les numéros de téléphone, se connecter avec e-mail et mot de passe. Donc, c'est ce que nous avions besoin e-mail et mot de passe. Et maintenant, cet e-mail est celui-ci. Ce mot de passe est mot de passe car cette connexion avec e-mail et mot de passe a également deux paramètres : email et mot de passe. Et ce résultat, nous allons le stocker dans une variable appelée informations d'identification de l'utilisateur. Et puis les informations d'identification de l'utilisateur. Parce que si vous passez la souris sur la signature avec lui et mot de passe, vous pouvez voir qu'il nous donne un avenir d'informations d'identification utilisateur n'est pas mort. Maintenant, je vais simplement retourner les informations d'identification utilisateur point utilisateur. Et cet utilisateur est un type de données de cet utilisateur, qui est une fonction qui peut être retournée null aussi. Donc, je voudrais juste taper statiquement type ou types. Ceci est fortement recommandé afin qu'il n'y ait pas de confusion plus tard. Nous avons donc créé avec succès notre première fonction, ce qui nous aidera à enregistrer notre utilisateur. Et vous pouvez voir avec les cordes très facile. C' était juste une ligne de code. C' est aussi facile que ça. Maintenant, à partir de l'interface utilisateur, c'est cet écran de registre, nous devons exécuter cette fonction aussi. Alors maintenant, allons à ce conteneur et sur le bouton. Tout d'abord, je voudrais donner quelques vérifications IF. Autrement dit, je ne veux pas que l'email et le mot de passe soient vides. Donc, je vais juste écrire si le texte controller.js est égal à Mt, notre contrôleur de mot de passe dot dx est égal à vide. Si c'est vide, alors je vais montrer une barre de collation en utilisant messager d' échafaudage que hors contextes point montrer barre de collation. Et dans le contenu, je vais sembler dramaturge, un texte de nageoires sont nécessaires et lui donner une couleur de fond de couleurs rouge plus foncé. La prochaine vérification, si la vérification que je voudrais faire est si texte de point du contrôleur de mot n' est pas égal à confirmer le mot de passe dans le contrôleur, c' est-à-dire que j'ai gagné les deux valeurs à voir. Si ce n'est pas le même, alors encore une fois, je vais montrer un snack-bar avec le retour de valeur. Les mots de passe ne correspondent pas. C'est ça. Maintenant, dans la déclaration finale, j'ai appelé notre classe de service artistique. Comme ça. J'ai créé cet objet et cet objet. Nous allons utiliser cette fonction de registre qui accepte deux paramètres. Le premier est l'e-mail et le second est le mot de passe. Donc, pour l'e-mail, je vais juste écrire le Milken à lambda x. dans pour le mot de passe, je vais laisser le contrôleur de mot de passe texte point. Et maintenant cela nous renvoie un utilisateur n'a pas tapé. Et on va le faire ici. Et je vais juste vérifier si le résultat n'est pas égal à null. Autrement dit, il a envoyé des données avec succès, alors je vais juste écrire le succès d'impression. Et imprimez l'email de point de résultat. Cela dit, ok, notre code ici est fait. Maintenant, sauvez-le et sortez notre émulateur. Donc, fichier FASTA, je ne vais pas taper quoi que ce soit et il suffit de cliquer sur Soumettre. Tu vois, j'ai ce cou mais Phil a dit nécessaire. Alors je vais juste écrire adresse, pas faux. C'est bon. Je n'utilise pas mon propre mot de passe à chaque lecture. Données 1, 2, 3, et puis ici, je vais juste écrire fui leur 12. Autrement dit, si confirmer le mot de passe et le mot de passe ne sont pas identiques et cliquez sur Soumettre puis le site, mais ne correspond pas. Et si je clique sur un, si j'écris le mot de passe de confirmation correctement, puis cliquez sur le bouton Soumettre. Je crois que j'ai fait une petite erreur. Vérifions ça. Dans le service AAD, je pense que je viens d'écrire la connexion avec e-mail et mot de passe, qui devrait être créer l'utilisateur avec e-mail et mot de passe. C' était donc une erreur très stupide de ma part. Mais maintenant, vous pouvez voir que comment vous pouvez vous connecter aussi. Ce code définit lui-même ce qu'il fait, est qu'il crée un nouvel utilisateur. Donc encore une fois, je vais juste écrire e-mail et mot de passe. Et maintenant, quand je clique sur le bouton soumettre, voir dans la console de débogage il montre du succès. Maintenant, accédez à votre écran d'authentification Firebase et cliquez sur Actualiser dans la table des utilisateurs. Vous pouvez maintenant voir cet utilisateur tout ce que nous avons enregistré. Nous avons donc créé et enregistré avec succès un mot, premier utilisateur. Donc, le fournisseur distinct, il montre que cela vient de la signature e-mail et mot de passe sur ceci et ceci, c'est, c'est UUID unique. Maintenant, nous devons également créer une fonction pour cette connexion. Donc de même dans l'écran d'art, oh désolé nos services point point. Nous allons avoir une fonction de connexion, qui est aussi si futur. Un utilisateur n'a pas tapé comme ça. Et il accepte le mot de passe de chaîne et de chaîne. Et maintenant, tout comme ci-dessus, nous avons cet utilisateur DevOps peut pouces. Et ça vous attendra. Cinq, c'est un point bizarre. Maintenant, il sera connecté avec e-mail et mot de passe comme ceci. Donc, le ci-dessus est de créer un utilisateur avec e-mail et mot de passe. Et maintenant celui-ci se connecte avec email et mot de passe. Et après cela, nous allons simplement retourner les informations d'identification de l'utilisateur point valeur de l'utilisateur. D' accord ? Donc, nous avons cette fonction de connexion gourmande. Encore une fois. Comme avant. Nous devons aller à notre écran de connexion. Et ici, nous devrions avoir nos déclarations if else. Je vais juste aller à l'écran de registre et copier ce code. Et puis les identifiants. Capture d'écran sombre, juste collé à l'intérieur de la presse sur. Donc, ici, nous ne voulons pas ce second else-if et juste importer les bibliothèques requises. Ok, alors le prochain changement que vous devez faire est à la place de ce plugin. Et c'est tout. Vous venez simplement de ce type d'application. Vérifiez si tout va bien. Et maintenant testé. Maintenant, quand je vais à ce login et tapez mon email, que je viens d'enregistrer. Et maintenant, si je clique sur le bouton Envoyer à partir de l'écran de connexion, voyons ce qui se passe. Voir montre du succès. Cela signifie que nous sommes maintenant que j'ai construit pour me connecter avec succès aussi. Alors c'est tout. C' est très facile. Je pense que vous pourriez aussi penser que l'utilisation de Firebase est assez simple. Le code est très minime et il fait ce travail en un rien de temps. Donc c'est tout pour cette vidéo. Rendez-vous à la prochaine session. 5. Gestion des ception: Dans cette session, nous allons parler de la gestion des erreurs. Donc, jusqu'à maintenant, nous n'avons pas géré les scénarios où l'utilisateur pourrait finir par entrer e-mail ou un mot de passe invalide pendant que l'un ou l'autre enregistrement tentent de se connecter. Donc, dans la dernière vidéo, vous avez peut-être vu ce genre d'ordre quand j'ai accidentellement écrit me connecter et connecter avec e-mail et mot de passe au lieu de créer un compte ou créer avec nom d'utilisateur et mot de passe, Firebase art. Donc, à ce moment-là, nous avons aussi ce genre d'exception. Et cela a été montré comme ça parce que nous ne l'avons pas géré seuls. Donc, il peut y avoir différents, différents types d'exemples que nous entrons un format d'e-mail non valide lors de l'enregistrement de notre entrée mauvais mot de passe lors de la connexion, nous obtiendrons une exception comme ci-dessous. L' idée comme ça. Et soit comme ça et notre application sera coincée. Ce sera une très mauvaise expérience pour les utilisateurs finaux. Et c'est pourquoi nous devons le gérer correctement. Donc, nous pouvons le faire simplement en utilisant try catch block. Donc, essayez le bloc catch que j'utilise pour exercer comment gérer ce type d'exceptions. Donc, tout d'abord, faisons-le avec notre troisième fonction. Oui, c'est exact. Essaie. Et puis puisque ceux-ci seront virés avec des exceptions, et je voudrais juste vous montrer au début quel genre d'exceptions. Alors inscrivez-vous écran. Essayons de l'utiliser deux fois. Juste depuis que ce n'est pas le cas. Maintenant, confirmons le flux 1, 2, 3. Maintenant, si je clique sur le Soumettre, voir l'exception s'est produite et c'est si firebase sont l'exception, il dit que l'e-mail est déjà utilisé. Donc ce genre de scénarios dont je parlais. Et dans la console de débogage ici, encore une fois, vous pouvez voir l'exposition. Et puisque c'était une exception étrange Firebase. Donc, nous devons simplement écrire cela dans notre bloc try-catch. Donc ici, je vais écrire essayer. Ensuite, sur l'exception d'art Firebase, comme ceci, je vais attraper l'erreur. Et à la fin, encore une fois, je vais attraper si quelque chose d'autre erreurs sont là. Non. Coupez ce code et collez-le dans le bloc try. Maintenant ? Ok, on a ce bloc d'essai. Et si une exception se produit, nous devons montrer un commentaire à l'utilisateur. Et pour montrer un snack-bar, nous avons besoin d'un contexte de facture. Nous demanderons donc aussi les contextes du projet de loi. Et il résiste aux contextes de pilule rouge. Et maintenant, il montre cette erreur dans l'habillage de registre parce que nous devons également envoyer le contexte. Maintenant, lisez ce projet de loi contextes anarchie simplement montrer un messager d'échafaudage. point contextuel montre la barre de collation. Au bar. Disons le contenu, le texte, le message point deux chaîne. Et nous allons avoir une couleur de fond de couleurs commencer à lire. Ok, et voici ce scatter, on l'imprime pour l'instant toi, si tu veux, tu peux encore montrer l'échafaudage. Et je répète cela que nous utilisons bizarre parce que nous savons que cette exception sera de Firebase. Et si quelque chose de nouveau arrive, il sera géré par ce bloc catch. Ok, essayons encore la même chose et voyons si notre application est bloquée ou non. Le mot de passe. Ok. Maintenant, quand je clique sur le Soumettre, voir l'immédiat, cela est déjà utilisé par un autre électron. Donc, c'est si agréable Alors avant notre application n'est pas coincé en ce moment. Maintenant, faisons la même chose à notre fonction de connexion est exécutée. Essayons. Ensuite, sur Firebase, exception impaire. Allons attraper. Ensuite, la dernière réponse, nous aurons un bloc catch. Tout simplement, j'ai obtenu ça d'ici. Ils l'affirment. Ici encore, nous allons montrer un accroc, mais comme avant. Et pour cela, tout d'abord, nous devons accepter ce contexte de projet de loi. Et en cela, je vais juste dire imprimer. Maintenant, allez à l'habillage de connexion dot-dot-dot. Et ici, où nous appelons la fonction de connexion, nous devons envoyer ce contexte. D' accord ? Notre ici, cette partie est faite. Vérifions avec notre login et donnons quelque chose qui n'est pas enregistré. Cet e-mail n'est pas enregistré. Voyons donc si je clique sur le Soumettre. Juste pour engager un nouvel enregistrement utilisateur correspondant à cet identifiant, l'utilisateur peut être supprimé. Donc, au moins, ils savent que l'utilisateur n'est pas valide. Ils devraient d'abord les enregistrer, puis essayer de se connecter. Nous avons donc appris à gérer correctement les exceptions comme celle-ci. Donc c'est tout pour cette vidéo. J' espère que vous avez apprécié aujourd'hui en apprenant quelque chose de nouveau. Et Q 6. Indicateur de chargement lors de l'authentification: Salut. Donc, sans aucun doute, vous avez réussi à gérer les exceptions, mais ne l'avez pas fait. Maintenant, nous ne donnons aucun commentaire à l'utilisateur quand il clique sur le bouton Envoyer tout en essayant d'enregistrer notre login. Ce n'est pas une bonne pratique car l'utilisateur final ne sait même pas que la demande est envoyée depuis le réseau cellulaire. Et il ne devrait pas cliquer sur d'autres boutons, la base. Lorsqu' un utilisateur clique sur le bouton de soumission, il ne devrait pas pouvoir cliquer sur le bouton de soumission à nouveau jusqu'à ce qu' il donne, il obtient une sorte de feedback du serveur. Ou bien il y aura des erreurs car il y aura plusieurs demandes avec les mêmes données. Donc, la meilleure façon est de montrer un indicateur de chargement afin qu'ils utilisent aussi savoir qu'il doit attendre. Et pour afficher un indicateur de chargement. La première étape importante est de convertir notre widget apatride faire succession pleine rigide. Donc, dans leurs registres propres, Il est tout simplement aller. Et maintenant convertir cela à un état complet, rigide état complet car ainsi l'état de l'interface utilisateur changera une fois qu'il affichera un indicateur de chargement. Et c'est la prochaine fois, il affichera le bouton Soumettre. Et pour gérer ce genre de valeurs vraies et fausses, nous devons créer une variable booléenne appelée chargement et lui donner une valeur par défaut de false. Lorsqu' un utilisateur arrive à cet espace, c'est-à-dire qu' n' y a pas d'indicateur de chargement lors du rendu de cette page. Maintenant, nous devons utiliser des instructions conditionnelles. C' est, si c'est le cas. Pour sortir un indicateur de chargement sont un bouton d'envoi. Et puisque c'est juste une ligne de code, j'utiliserai un opérateur ternaire. Donc, je vais juste vider ici, chargement. Si c'est vrai, affichez un indicateur de progression circulaire. Si non, puis montré ce conteneur, qui est le bouton, bouton Soumettre. Sauvegardons ça. Mais jusqu'à présent, nous venons de l'entendre, puis cet opérateur ternaire. Mais nous devrions définir cette date lorsque ce bouton de soumission est pressé. Donc, ici, nous avons deux ensembles. Le chargement de l'état est égal à true. Ensuite, ce morceau de ligne sera exécuté. Et puis après l'exécution réussie, nous devons remettre la scène sur false de sorte que si certains sont des succès, alors après cela, notre indicateur de progression de chargement est supprimé. Essayons ça. Abaissons l'écran. Dans cet e-mail. Écrivons par Airbase. Au rythme. Gmail.com vous donne la valeur de 123123. Et maintenant cliquez sur ainsi quelqu'un, mais voyez, c'est l'indicateur de chargement. Et maintenant, après qu'il a réussi que l'indicateur de chargement est retiré du ressort. Vous pouvez accéder à la console Firebase et actualiser afin de pouvoir vérifier. Voir cette adresse e-mail est également en cours d'enregistrement. Ce troisième dans le serveur. Faisons la même chose pour l'écran de connexion. Autrement dit, nous devrions également montrer un indicateur de chargement ici. Tout d'abord, convertissons cela en un widget avec état. Ensuite, créez un booléen de chargement, lui a donné une valeur fausse, valeur par défaut. Puis ici, opérateur ternaire. Écrivons si c'est vrai, puis affichez une progression circulaire dans le, Si ce n'est pas seulement le conteneur. Et quand cela sur la presse est pressé, alors l'indicateur de chargement sera vrai. Et à la fin, l'indicateur de chargement l'a réglé sur false afin que nous sachions que le serveur est 10. Sauvegardons ça. Allons à notre écran de connexion. Et c'est vrai. Où base et T min.com et mot de passe. D'accord. Cliquez sur le bouton Soumettre et voyez l'indicateur de chargement. Et nous avons ce succès. C' est donc tout ce que nous avons montré avec succès un indicateur de chargement alors qu'il y a une demande au serveur. Parce que ce sont de très petits changements, mais cela affectera les performances. Ou vous pouvez dire que l'opportunité de l'utilisateur sont pour votre application. Merci. 7. Vérifier l'état de vérification: Salut, bienvenue. Dans cette session, nous vérifierons si l'utilisateur est déjà connecté ou non. Si agréable, supposons que l'utilisateur se soit connecté avec succès. Mais que se passe-t-il s'il ferme notre demande et recommence ? Dans le cas où nous ne voulons pas que l'utilisateur entre à nouveau ses informations d'identification, encore une fois. Mais au lieu de cela, nous devrions vérifier si cet utilisateur s'est déjà connecté avant. Et cela peut être implémenté très facilement en utilisant Firebase. Mais avant cela, nous devrions créer cela. Nous devrions créer un nouveau fichier d'écran d'accueil à l'intérieur du répertoire de l'écran. Allons sur les écrans, puis créons un nouvel écran d'accueil, point-point. Oui, importons notre matériel comme toujours. Créons un écran d'accueil de région apatride. Ensuite, ce café. Alors donnons le titre. Texte. Puis centré directement à travers les couleurs de fond, rose. Cette fois. Et les actions, je voudrais donner un bouton de déconnexion. Donc, juste une icône de point de bouton texte sur la presse sera MD. Je peux, je vais donner, je peux commencer Love Out. Et dans l'étiquette, je vais simplement lui donner le texte de déconnexion. D' accord. Et ce signe. Étudiez ce bouton. Je voudrais aussi donner un style à ce bouton, pas étiqueter le bouton lui-même. Et je vais juste dire du texte, mais puis ce style de et dans cette primaire. Et nous commençons comme si nous avions notre écran d'accueil prêt. Mais nous devons également nous assurer que lorsqu'un nouvel utilisateur a enregistré notre login avec succès, alors il devrait être navigué vers cet écran d'accueil. Plus tôt, nous étions juste en train d'obtenir une réponse dans la console de débogage. Pour cela, il suffit d'aller à l'écran d'enregistrement et d' entendre si le résultat n'est pas égal à null. Je vais simplement écrire point du navigateur, pousser et supprimer. Jusqu' à. Et puis une nouvelle route. Je vais donner ma mise en page. Et je vais simplement écrire l'écran d'accueil. C' est ça. est aussi facile que ça. Et même chose, je vais juste copier et coller dans, puis l'écran de connexion ici et importer notre écran d'accueil. Donc VI en utilisant aidé à pousser et enlever jusqu'à ce que. Vous pourriez penser, pourquoi ne pas utiliser le remplacement par poussée ? Parce que le seul problème ici est dans cet écran de connexion. Ce n'est pas l'échelle finale, c'est en utilisant le Push qui est un autre haut d'un autre écran. C' est, c'est une pile et c'est un type de résistance. Donc, à partir d'ici, si j'appuie sur un remplacement, alors il ira à l'écran d'accueil, mais avec le bouton Retour. Donc, la solution de contournement est père adoptif doivent utiliser le point de navigateur. Et puis je peux utiliser le point du navigateur. Poussez le placement dans cet écran de connexion. Mais je l'aime simplement et je l'utilise simplement. Retirez tout et appuyez simplement sur l'écran. C' est ça. Alors essayons-le. Si ça marche ou pas. Attendez juste un moment. J' espère que votre système est assez puissant parce que parfois pendant que vous utilisez Android Studio ou cet émulateur, la gestion de la RAM n'est pas bonne dans la plupart des pièces. Alors essayons-le. Voyons voir. Donnez le mot de passe correct. D' accord. Cliquez sur le bouton Soumettre. Vous voyez, cela fonctionne si bien que nous ajoutons directement envoyé à notre écran de connexion ici. Mais que faire si je redémarre cette application ? Donc, si je redémarre cette application, l'écran des registres est là et v ne sont pas directement envoyés à l'écran d'accueil. Donc, cela peut être mis en œuvre si cela devrait être changé. Firebase art et nous permet de nous abonner au flux OTT à l'échelle de l'état. C' est ce qu'on appelle le flux fournit un événement immédiat de l'état d'authentification actuel de l'utilisateur. Et après cela, il fournit ensuite des événements chaque fois que l'état d'authentification change. En termes simples, Firebase nous donne la possibilité d' écouter ces changements dans l'authentification Firebase. Allons à leur fichier main.js. Ici. Dans l'école à domicile. Vous devez simplement écrire le flux quand ils le sont. Alors. Ainsi ruisseau. Nous allons utiliser notre point de service firebase points changements d'état. Donc, ici, si vous survolez la mer, il nous donne un flux avec les utilisations Value notifie les changements à l'état de connexion de l'utilisateur, tels que iodate déconnectant notre déconnexion. Et puisque c'est une chaîne qu'ils prennent et les flux en continu, constructeur, nous avons comme utilisant le contexte et cet instantané ici, je vais simplement écrire si des données de point instantané, alors nous reviendrions écran d'accueil. Mais si ce n'est pas le cas, alors nous retournerons l'écran de registre. Ce morceau de code signifie que si l'instantané n'est pas nul, alors obtenir doit certainement être une valeur utilisateur qui désolé, nous devrions retourner l'écran d'accueil. Et si c'est nul, alors nous devrions retourner débit est test. Maintenant que notre application, vous verrez que nous allons directement envoyer à l'écran d'accueil. Voir ici, puisque notre application sait déjà que l'utilisateur a déjà été connecté auparavant. C' est un concept très important parce que la plupart de l'application, vous ne voulez pas que l'utilisateur ait une mauvaise expérience de aimé automatiquement. C'est ça. Pour aujourd'hui. Dans la prochaine session, nous allons mettre en œuvre comment signer quand nous cuisinons aussi, parce que l'email et le mot de passe vont bien. Mais maintenant, la plupart de l'application moderne permet aux utilisateurs d'utiliser leurs identifiants sociaux également. Rendez-vous à la prochaine session. Merci. 8. Projet de configuration pour Google Sign: Salut. Au cours de cette session, nous allons apprendre comment mettre en œuvre la connexion au cobalt. Ainsi, dans les dernières vidéos, nous allons apprendre à authentifier l'utilisateur à l'aide de son e-mail et de son mot de passe. Mais de nos jours, dans chaque application moderne, l'aide est une option pour authentifier l'utilisateur en utilisant de bonnes connexions sociales. C' est, j'ai fait Google, Facebook, LinkedIn, peu importe. Donc, aujourd'hui, nous allons apprendre à implémenter la connexion Google en utilisant Flutter et Firebase. Donc, la première étape est de générer et SHA clé. Et vous pourriez vous demander à quoi sert SHA ? Elle clé est nécessaire pour implémenter Google, notre authentification de connexion téléphonique dans Firebase, c'est une clé unique générée pour votre PC qui peut être utilisée pour la signature. Donc debug KeyStore est un unique pour chaque système et il est automatiquement maintenu par le SDK Android. Donc, vous avez juste à vous rappeler que la clé de débogage est nécessaire lorsque nous testons. Et il y a un malchanceux appelé une clé de libération est nécessaire lorsque nous soumettons à placer aussi. Alors maintenant la question se pose, comment obtenons-nous cette clé SHA-1 ? Donc, d'abord, vous devez trouver un emplacement après le débogage du fichier KeyStore, qui se trouve dans le dossier Android SDK dans mon PC Windows 10, cet emplacement est Program Files, Android, android Studio. Allons voir ça. Allons dans l'Explorateur de fichiers. Alors. Donc, les fichiers au sol, android, studio android , GRE, puis été nous allons vérifier GRE puis quand. Ensuite, à cet endroit, sortez votre ligne de commande. Et simplement après cela, vous devez taper cette commande et pouvez mettre la vidéo en pause et l'écrire comme ceci. Et puis vous devez simplement appuyer sur Entrée. C' est ça. Vous obtiendrez ce type de valeur de sortie, trouverez MD5, SHA-1 et SHA-2 256. Très bien. Donc, puisque c'est une information très confidentielle, donc vous ne devriez pas partager cela avec d'autres personnes. Maintenant, il suffit de copier la clé SHA-1. Faites ressortir votre tableau de bord Firebase. Accédez au paramètre du projet. Et puis ici, vous devez simplement l'ajouter comme ça et puis enregistrer, télécharger les derniers services Google Jason. Alors coupez-le. Ensuite, l'application Android, supprimez ce fichier JSON précédent et basez celui-ci. Tu me nommes ? Rappelez-vous juste que vous ne devriez pas y avoir ce genre de 1 sur à nouveau, simples services Google, Jason, c'est tout. Donc c'est comme ça que tu le fais. Après leur mort, arrêtez simplement votre session de débogage et recommencez. L' étape suivante consiste à activer l'authentification de connexion Google. Accédez à votre écran d'authentification, c'est-à-dire Tableau de bord. Ensuite, allez à la méthode de connexion. Et attendez, je vais juste l'arrêter parce que nous devons également installer des dépendances. Ici, vous devez simplement aller à Google, puis l'activer. Ici, sélectionnez une adresse e-mail et simplement. Cliquez sur Enregistrer. Ok, Maintenant, vous avez activé la connexion Google avec succès. La dernière étape consiste à aller à dev et obtenir les dépendances requises telles que la signature de Google le centre. Et le premier que vous obtenez, vous devez installer dans votre YAML. Et après cela, une autre dépendance requise est le Web de connexion Google et l'installer également. Donc oui, vous avez réussi et Google se connecter. Ensuite, l'étape suivante consiste à créer un bouton dans notre écran d'accueil pour morts. Mais encore une fois, j'utilise un paquet parce que je ne veux pas créer un bouton sur mon propre fichier stuff que le bogue et le délai qu'il est en cours d'exécution. Je voudrais aller à dev et obtenir le bouton de connexion. Oui, celui-là. Comme vous pouvez le voir, vous obtenez différents types de boutons de connexion sociale. Donc, il est beaucoup plus facile pour vous d'obtenir cette image et le look désiré avec ce plugin. Et il suffit de copier. Et notre apprentissage et notre débogage. Prenez un peu de temps. L' authentification est un processus. Peut obtenir de la documentation, sont Via Media, plus Stack Overflow. Oui, beaucoup d'options. Juste ignoré ce genre d'erreurs. Cette fois, votre Gradle est en cours d'exécution et ne s'est pas arrêté. Jusque-là, nous sommes prêts à y aller. Ok, donc je suppose que notre application est maintenant réussie. Et une bonne étude est un lourd, plus doux. Donc, je suppose juste que votre système est assez fort pour gérer la gestion de la RAM. Donc, puisque nous avons fait ça, vérifiez ce tableau, c'est pourquoi nous recevons l'écran d'accueil en ce moment, nous n'avons pas implémenté ce signe, pas de cette façon. Je vais directement aller à la principale. Et ici au lieu de H4, loin sur les live, je vais retourner l'écran de registre afin que nous puissions travailler dessus. Ok, maintenant va à l'écran des registres. Et maintenant en dessous des ponts, mais ensuite donner une boîte de taille. Hauteur. Duan De. Ensuite, donnez un diviseur. Rigide. Puis à nouveau est taille boîte de faire tel ou tel espacement est là. Maintenant, je vais utiliser le bouton de connexion. Donc je vais juste dire signer. Je pense que je ne l' ai pas, je n'ai pas installé nos dépendances. Je vais juste copier. Et maintenant, attendez quelques secondes de plus. Ok, alors je vais encourager le fonds dans les deux signataires, mais c'est fait. D' accord. Maintenant, je vais écrire sain d'esprit. Mais alors, puis la première chauve-souris que j'ai fini, je vais juste dire, mais puis démarrez Google. Ensuite, le deuxième paramètre, je vais donner du texte et je vais continuer avec Google. Et sur la presse pour l'instant. Je ne ferai rien parce que dans la prochaine vidéo, nous allons implémenter la fonctionnalité dès maintenant à moins que nous ne travaillions sur la partie de l'interface utilisateur. Vérifions ça. Voyez, ici nous obtenons ce bouton, continuez avec Google. Donc ça a l'air décent. Je dirai au moins que cela nous donne le sentiment que nous avons également d'autres options. J' espère donc que vous avez compris comment configurer la connexion Google. Et cette clé SHA-1, vous pouvez, si vous trouvez cela difficile, vous pouvez aller et cocu a des solutions si vous ne l'obtenez pas dans votre système. Mais cela est très nécessaire si vous utilisez la connexion téléphonique, connexion Google, ou tout type de ce genre de fonctionnalités différentes que l'auto, C'est tout pour cette vidéo. Rendez-vous à la prochaine session. 9. Implement Google et SE Se connecter: Pour l'instant, c'est du style lorsque vous apprenez à implémenter la fonctionnalité de connexion Google. Loin que simplement faire ressortir votre code VS. Allez au service de l'art. Et maintenant, dans la partie inférieure, nous allons écrire le code. Donnez-lui juste un commentaire de Google. Connectez-vous. Ok, maintenant jouons à l'avenir sûr, qui reviendra en tant qu'utilisateur, je vais limiter la connexion avec Google. Maintenant, la première étape consiste à déclencher une boîte de dialogue de 10 dictées. Autrement dit, les options sont la boîte de dialogue pour choisir votre compte Google. Pour que simuler. compte de signature des cuisinières peut être nul. Nommez-le utilisateur Google, et attendez simplement l'utilisateur de connexion glucose. Connectez-vous à Google. Signe. D' accord. Donc, ce code fait ressortir ce menu contextuel pour choisir votre compte Google. Donc, il ne reste peut-être plus que l'utilisateur clique sur le bouton, s'il n'a pas choisi de compte. Nous devons donc vérifier si un utilisateur n'est pas égal à null. Et vérifiez si ce n'est pas égal à null, alors nous obtiendrons des détails de la demande. Autrement dit, le code sera définitif. L' authentification de signature est égale à point utilisateur assisté à un ticket de 10. D' accord. Après cela, nous allons créer un nouveau justificatif. Créer un nouveau. Super. Puis tibia. Shin est égal à nos informations d'identification DOT de données. Et puis jeton d'accès, nous allons écrire jeton d'accès. Et je l'ai fait si peut être un jeton d'ID Google. Une fois connecté. Nous utiliserons les données de la tempête de feu. Il est venu que le feu commence 35 base. Maintenant, c'est l'utilisateur, l'utilisateur d'informations d'identification et en chinois fera un poids. Maintenant, nous allons nous connecter via Firebase. Auparavant, il était juste le code requis pour cette partie Google. Maintenant, nous allons enfin signer avec des justificatifs d'identité, ce justificatif et envoyer notre cadentiel, c'est le justificatif. Ceci est retourné par Google. Nous devons donc envoyer cela à notre Firebase pour assurer que nous sommes légalement autorisés à y accéder. Et il suffit de noter. Enfin, l'utilisateur point d'informations d'identification utilisateur. Aussi, faisons que cette chose soit dans un bloc try catch. Parce qu'on ne sait jamais si quelque chose ne va pas comme ça. Et simplement le timing du feu. Imprimez l'ajouté dans cette console de débogage. Donc le truc, c'est que ce code, ce n'est pas comme si vous deviez l'apprendre par cœur. Tu dois juste le savoir. Et chaque fois que nécessaire, vous obtiendrez ce code. C' est un code très basique. devient très difficile de se souvenir, apprendre, il vient par la pratique. Alors maintenant, nous avons la fonction prête. Il est temps d'attribuer la fonction de connexion Google à ce bouton. Ce bouton, qui se trouve dans cet écran de registre. Donc ici en rouge est la zone. Continuez avec Google. Oui, ici. Je préférerai des trucs. C' est vrai ? Faites-le ensuite une fonction sinc. Et à droite de lui. Les services se connectent avec Google. Mais je me demande aussi chargement individuellement pour montrer. Donc, je vais juste écrire si le chargement est vrai, puis montre une progression plus fraîche. Je vais montrer ce bouton comme nous l'avons fait avant. Et je vais définir l'état comme étant vrai. Et puis dit, fait état que le chargement est égal à faux. Ok, essayons-le. Cliquez sur le bouton Continuer avec COVID. Voyez, maintenant cela sera montré. Choisissez un compte. Je vais sélectionner mon compte. Et puis oui, Alden. Vous voyez, en ce moment, nous ne sommes pas navigués juste à cause de cette raison. Nous avons fait ce changement dans le point principal tout simplement faire à nouveau l'écran d'accueil. Maintenant, vous pouvez voir via directement envoyé à l'écran d'accueil parce que nous sommes déjà authentifiés. J' espère donc que vous avez compris comment utiliser la connexion Google. Ce morceau de code est juste ce qui est nécessaire. Et puis vous devez accrocher ce morceau de métal avec notre interface utilisateur comme ça. Et ce chargement est juste pour que l'utilisateur ait un feedback. Maintenant, enfin, nous devons nous assurer que notre bouton de déconnexion fonctionne. Parce que sans elle, nous ne pouvons pas voir, nous ne pouvons pas pratiquer ou nous ne pouvons pas tester notre application. Et je vais à l'écran d'accueil. Pourtant, les Bhoutanais dans les actions, il suffit de faire un évier. Et bien, ce que nous devrions faire, nous devrions créer une fonction distincte dans ce service. Ici. Nous devons simplement écrire l'avenir, s' inscrire comme ça. Et il suffit d'écrire attendre la signature de Google point psi néant parce qu'il est nécessaire lorsque nous utilisons le paquet Google, nous devons nous assurer que nous déconnectons afin que nous puissions choisir un autre compte si nous le voulons. Et aussi nous devons nous déconnecter de notre art Firebase ainsi que ceci. Donc, nous avons notre fonction aller à o signifie écran d'accueil. Ici, il suffit d'écrire les services OT, Dots, déconnectez-vous. Fais-le. D'accord. Maintenant, nous allons le tester. Si ça marche, j'espère que ça le fera. Maintenant, ce qui devrait arriver est si nous cliquons sur cette déconnexion, nous devrions automatiquement être amenés à l'écran de registre des connexions à cause de ce code. Voyons voir. Voir. Nous n'avons pas statué et dans le code de navigation dans notre inscription. Mais c'est, il est, il nous a déjà emmenés à cet écran juste parce que nous avons notre générateur de flux et il vérifie les changements d'état de l'art en continu. Donc, si quelque chose arrive, nous reviendrons à l'écran d'accueil. Maintenant, enfin, si je clique à nouveau sur continuer avec Google, choisissez mon compte. Et maintenant, voyons s'il est dirigé vers l'écran d'accueil. Vous voyez, nous sommes directement navigués vers l'écran d'accueil. Notre partie d'authentification est donc terminée et fonctionne de manière transparente. J' espère que vous avez beaucoup appris aujourd'hui. Dans le prochain module, nous allons parler de cette base de données parce qu'il est maintenant temps de réintégrer des données réelles. Et nous allons également créer une ou une application très basique ainsi dans la prochaine session. Alors c'est tout. Continuez à vous entraîner. 10. Démarrez avec Firestore: Salut, bienvenue dans cette nouvelle section. Nous parlerons de la base de données Firestore flutter. Donc, notre couche, nous avons implémenté avec succès l'authentification. Mais évidemment, nous devons avoir une sorte de stockage de base de données. C' est une base de données où nous stockerons tous les utilisateurs ou les données sur les émissions. Ces données ne peuvent pas être simplement stockées sur l'appareil de l'utilisateur car dans ce cas, elles sont élaguées être synchronisées dans d'autres périphériques. Donc Firebase nous donne des options de deux bases de données. Lorsque vous accédez au tableau de bord Firebase, vous verrez qu'il y a une base de données en temps réel et que les données sont un nuage Firestore. Cloud Firestore est que les dernières données avec et que nous allons utiliser. Mais au moins vous devriez savoir cette petite différence entre les deux. J' ai acheté cloud Firestore et base de données en temps réel. Les données Nosql avec cela est qu'il n'y a pas de jointures, pas de colonnes ou de tables dedans. La principale différence entre les deux est que le cloud Firestore contient des collections et à l'intérieur de ces collections, vous avez des documents. Et de cette façon contient des sous-collections sont fioritures. Mais dans la base de données en temps réel, il se compose d'un grand Jason qui contiendra toutes ces données. Donc la dette n'est rien comme document de collections. Ce n'est pas, il n'est pas structuré correctement. Il est jeté comme un grand Jason dans la base de données en temps réel. Firestore est.. firebase, date la plus récente qui était pour le développement d'applications mobiles. Il s'appuie sur les succès de la base de données en temps réel avec un nouveau modèle de données plus intuitif. Cloud Firestore offre également des caries plus riches et plus rapides et des échelles plus longues que la base de données Realtime. Donc, en termes simples, nous allons choisir Cloud Firestore parmi le bleu. Maintenant, notre première étape sera de configurer Firestore dans notre application. Donc déjà, nous avons mis en place avec succès Firebase dans notre Android ainsi que télécharger le fichier Google JSON et l'initialiser. Maintenant, il est temps que nous activions ce cloud Firestore. Accédez à votre tableau de bord Firebase ici. Cliquez sur Firestore base de données. Après cela, vous verrez quelque chose comme ce vert, c'est Cloud Firestore. Et puis créez la base de données. Il suffit de cliquer sur Créer une base de données. Après cela, vous devez choisir le mode de test de démarrage, car nous allons configurer les règles de sécurité plus tard. Et après cela, il vous suffit de sélectionner l' emplacement par défaut et de cliquer sur Concreter la base de données. Et puis vous verrez quelque chose comme ça. Cet écran est l'endroit où toutes vos données seront stockées. Après avoir activé avec succès Cloud Firestore, nous devons installer cette dépendance aussi, est tout simplement bon d'avoir. Ensuite, recherchez le nuage. Firestore. Cliquez sur le premier et copiez simplement cette dépendance. Et basé à New York, c'est ici. Donc d'accord, notre dépendance a été installée correctement. Maintenant, l'étape suivante consiste à comprendre ce modèle de données Firestore cloud. C' est ainsi que les données sont structurées à l'intérieur de ce fichier stockent la base de données. Avant de définir notre code, mes tests. Contrairement à la base de données SQL, les données, les tables sont des règles dans Firebase. Donc, si vous venez de MySQL ou PostgreSQL, le concept de règles d'autres tables en elle. Mais ici utiliser des données dans les données US TO dans des documents qui sont organisés en collections. Donc ici, vous pouvez voir les utilisateurs, c'est une collection. En termes simples, essayez simplement de le comprendre comme une table. Autrement dit, quel est le nom de la collection que les utilisateurs publient. Dans les produits. Ce genre d'essai appelé collections et collecte d'insectes, les données individuelles sont appelées documents. Donc ici, vous pouvez voir il y a ces utilisateurs et un ID de document de cet ID aléatoire. Et ce document a ces valeurs. C' est l'adresse, l'âge, le nom immunitaire. Adresse est à nouveau une carte, et ceci est un entier et ceci est une chaîne. Donc, voici comment une donnée de base, comment ils attachent essentiellement stocké dans le magasin de feu. Les documents doivent être stockés dans des collections. Les documents peuvent contenir des sous-collections. Voir ici, c'est. Démarrer la collection qui est à l'intérieur. Encore une fois, vous avez est, vous pouvez marcher à droite ? Aime nos commentaires de poste ici encore, vous pouvez écrire une nouvelle collection. Et tous ces documents peuvent contenir des sensations primitives comme des chaînes. Sont des objets complexes, comme la liste, la carte. Cela peut être typeof valeurs que nous pouvons stocker dans. Alors c'est tout. Nous avons installé Firebase avec succès et nous avons également compris le modèle de données. Au cours de la prochaine session, nous discuterons de la façon d'y faire des opérations brutes. Merci. 11. Comprendre les opérations CRUD: Salut. Dans cette session, nous allons comprendre comment effectuer des opérations brutes. C' est-à-dire comment créer, lire, mettre à jour et supprimer des données dans Firebase. Juste pour cet exemple, nous ne créerions pas de services distincts classés car nous discutons simplement des concepts de base et l'implémentons d'une manière simple. Donc, nous devons d'abord créer une nouvelle instance de Firestore. Donc, comme nous l'avons fait dans l'authentification, nous devons créer des fichiers Firebase instance impaire. De la même manière. Ici, si nous devons créer une instance de Firestore. Alors faisons-le. Faites ressortir votre éditeur de texte. Aller à l'écran d'accueil. Ici. Au sommet. Je vais simplement créer une instance Firebase, Firestore. Firestore est égal à cinq façons. Firestone instance de point comme celle-ci. Notre instance est terminée. Suivant est appelé une référence de connexion. La référence de la collection signifie quel devrait être le nom de la collection qui est ici, les utilisateurs ou tout ce que vous voulez. Donc, la référence de la collection est également chose très importante. Pour laisser commencer avec la fonction create que cela crée des données dans cette base de données. Pour ajouter une nouvelle collection de documents, nous utilisons la méthode add, référence de collection Annette. Faisons-le. Essayons de le faire. Après la barre AB. C' est un corps, ce corps. Prenons un conteneur. Conteneurs, ce qui signifie requête média, contextes point off, taille des points, largeur des points. Alors allons avoir un enfant, donnez-lui la colonne. X moyen est l'alignement. Je veux dire existe le centre du point d'alignement, puis l'alignement de l'axe transversal, le centre extracellulaire de l'herbe. Alors, allons avoir des enfants. Que les enfants, créons un limité mais donnons-lui un enfant de texte et de données à stocker. Et dans la presse sur le bras, tirons le timing. Gardez-le vide afin que je puisse vous montrer dans l'interface utilisateur, l'interface utilisateur. Voir ici, nous avons que d'ajouter des données à Firestore. La première étape a été de créer une instance, ce que nous avons déjà fait. Ici. La deuxième étape consistait à créer une référence de collection. Donc, ici, créons une référence de collection. Utilisateurs est égal à Firestore, c'est-à-dire notre instance, collection point et nommez les utilisateurs. Maintenant, c'est juste une référence supplémentaire où nous voulons insérer les données. Donc, pour l'insertion, mais ils ont des données particulières. Ici, nous utilisons l'ajouter mon 10. Donc, ajouter méthode crée des données avec un ID unique pour effectuer une annonce si elle est un avenir. Donc, nous allons utiliser le concept d'attente asynchrone. Et nous écrivons simplement les utilisateurs d'attente point ajouter C ici. Maintenant, voici comment nous ajoutons des données à duff Firestore. Maintenant, ajouter accepte les données dans une carte qui est des accolades en profondeur. Ensuite, nous devons envoyer des données dans la paire clé-valeur 7, ce nom, je vais utiliser la clé comme nom et valeur comme. Comme ça. Ce sera notre premier utilisateur. Alors essayons-le. Si je clique sur ce Ajouter des données, le firestorm. Je suppose que cela pourrait montrer quelque chose juste pour la raison que nous n'avons pas redémarré notre application. Ainsi, chaque fois que vous installez une nouvelle dépendance, assurez-vous de redémarrer l'application. Redémarrez signifie que vous devez arrêter, puis recommencer à déboguer. Voyons voir, ça marchera maintenant ? Ils nous prêtent attendre. Pour eux de jouer. Dans Firestore sont très simples. Voir ici, c'est seulement avec l'ajout. Nous pouvons ajouter des données avec un ID de document unique. Et quand je dirai la pièce d'identité, je vous montrerai ce que je voulais dire par là. Nous devons attendre quelques secondes de plus. La plupart dépend de votre système. Maintenant, c'est la compilation, la dépendance, ce genre de dépendances. Mais nous ne l'utilisons pas sur l'authentification, c'est fait. Et dans les règles ici, comme nous l'avons fait dans le mode test, c'est pourquoi les règles sont publiques. Mais quand on utilise pour la production, ça ne devrait pas être comme ça. Ok, nous avons notre application en cours d'exécution. Maintenant, quand je clique sur cela à Firebase et ensuite aller à nos données, j'espère que c'est de voir les utilisateurs. Ensuite, documentez et puis cette valeur qui s'appelle Nahal. Nous avons donc entré avec succès nos premières données. Et c'est ce que j'expliquais qu'il s'agit d'un ID de document unique lorsque nous utilisons la fonction add ici comme ceci. Donc vous pourriez penser, ok, alors quelle est la deuxième fonction d'ajout ? Donc, en dehors de AD, il existe une autre méthode appelée dot set. Donc, si vous souhaitez spécifier votre propre ID de document, nous devrions utiliser la méthode set sur cette référence de collection. Comme ça. Je louerai ce qui précède. Et puis je vais simplement écrire les utilisateurs, c'est-à-dire éveillés, les utilisateurs dot doc, puis lui donner l'ID du document. Je le nommerai flotté de 1, 2, 3. Alors réglé comme ça. Puis encore une fois, à l'intérieur de l'ensemble, nous devons envoyer une carte. Je donnerai le nom de la valeur. Et donc la clé est le nom comme valeur que Google. D' accord ? Maintenant, enregistrez-le et vérifiez-le. Donc, je m'explique à nouveau, lorsque nous utilisons la méthode add, il ajoute un nouvel ID généré automatiquement, c' est-à-dire l'ID du document. Mais lorsque nous utilisons définir mon stylo, nous pouvons spécifier notre propre ID de document. Maintenant, nous allons cliquer sur l'ajout de données à la banque de fichiers. Allez à nos données et voyez que nous avons ce Flutter 1, 2, 3. Donc, ce dont je parlais, ce n'est pas une pièce d'identité unique. Nous l'avons spécifié par nous-mêmes. Et puis nous envoyons une valeur qui est le nom de Google flutter. Nous avons donc créé avec succès les données. Maintenant, il est temps de lire les données des fichiers Firestone Cloud pour vous donner la possibilité de lire la valeur d'une collection sur un document. Et cela peut être cent, cent dix grades sont fournis par des mises à jour en temps réel en mots simples. Et nous pouvons lire une chose qui est, nous allons à la base de données, nous avons demandé w, puis nous revenons. Si quelque chose change dans la base de données ce temps-là, notre interface utilisateur ne s'en soucie pas, c'est parce qu'elle est passée devant une seule fois. Faisons-le. Créons aussi nos fonctions de lecture. Donc en dessous de cette élévation, mais alors je vais créer un nouveau bouton, nouveau bouton élevé. Nommez-le dans les données lues de Firestore. Ensuite, dans le site, ce sera une fonction sinc. Encore une fois, nous aurons une collection d'amis. Utilisateurs est égal à la collection Firestore. Et rappelez-vous, vous pouvez faire tout cela en une seule ligne de code. Vous n'avez pas besoin de spécifier la référence de collection comme celle-ci. Et juste le faire pour expliquer le concept. Ensuite, maintenant nous avons, nous créons une variable. Il est des résultats et ensuite attendre les utilisateurs. Obtenez. Donc, il lira une collection qu'il obtiendra les données de recouvrement de la dette, toutes les données qui sont quelle que soit la valeur qu'ils ont. Donc, comme ils auront plusieurs valeurs, nous allons écrire nos résultats dot docs, point pour chacun. Cette plage pour chacun de ce document. Donc, il aura le résultat de l'instantané du document. Et puis vous allez simplement imprimer les données de points de résultat comme ceci. Voyons ce que j'ai fait. Alors je vous expliquerai à nouveau. Nous avons notre interface utilisateur qui est cette lecture des données à partir de fichiers. Donc, quand je clique dessus, voir que vous avez à la fois ces données qui sont dans ce téléphone de carte pourriez-vous avoir renvoyé la sortie ? Donc, quand nous recevons une demande sur une collection qui est ici, cette collection, elle nous donnera tous les documents. Donc, c'est pourquoi il avait nos résultats dot docs parce qu'il est fluide et vous pouvez voir, mais vous comprendrez que tous les documents et ensuite pour chaque V sont en boucle à travers les documents. Puisque nous obtenons une liste de tous les documents. C' est aussi simple que ça. Maintenant, vous pourriez penser, d'accord, si je ne veux pas lire toute la collection, mais je veux lire un document en particulier. Autrement dit, je veux juste lire cette disvalue Flutter, comment obtenir cette valeur particulière. Donc, pour ça, encore une fois, Essayons-le. Je vais commenter la requête ci-dessus. Et je vais écrire des documents instantanés, des documents distincts instantanés. L' instantané. Donc, les documents instantané résultat est égal à attendre les utilisateurs dot doc et quel document nous voulons, nous connaissons déjà l'ID. Troisièmement, 123. Et puis bourgeon devient comme ça. Et après cela, je vais simplement imprimer les données de résultat. Vérifions si ça marche ou non. Maintenant, quand je clique sur les données lues, il va juste nous montrer ce jour particulier puis pas tous les documents dans cette collection. C' est ainsi que vous récupérez un document particulier. Nous avons fait l'ID du document utilisateur, désolé, nous avons fait l'ID du document. J' ai donc dit que Firestore nous donne deux options pour lire les données. J' ai appris que c'est une fois, est-ce que nous allons juste lire les données et écouter les changements en temps réel. Firestore nous donne une option de continuer à écouter tout changement de données qui se passe aux données, puis refléter notre mise à jour de notre application en temps réel, c'est-à-dire sans rafraîchir notre page. Cela peut être fait en utilisant ce concept appelé flux. Ainsi, huit fournissent un support pour traiter les changements en temps réel soit à la collecte, soit au document particulier. Donc, vous vous souvenez juste que vous vous souvenez juste d'ici, embarquez cette référence de collection et documentez vos amis, fournissez une fonction d'instantané qui renvoie une chaîne. Vous pouvez utiliser StringBuilder Ali, écouter ma technologie pour vous abonner à ce flux et écouter les changements. Alors faisons-le avec cette fois encore. Alors maintenant ce que je vais avoir un commentaire de connexion que les deux étain et puis je vais simplement écrire les utilisateurs dot-dot-dot. J' écoute un document particulier et quand il y a une troisième inondation, 123 instantanés. Donc c'est comme ça que nous obtenons un flux. Et plus tôt quand nous écrivons dot get, cela nous donnera un avenir. C'est une chose. Et puis je me connecterai, Écoutez, c'est tout ce que le flux traverse, nous allons écouter ces changements et écrire simplement le résultat d'impression point-point. Maintenant, vous allez comprendre la différence est une fois et ce qui est en temps réel change. Maintenant, quand je clique à nouveau, lire les données de Firestore, voir, vous pouvez voir le nom Google flutter. Mais que faire si je vais changer la valeur qui est différente de Google ? Et mettez-le à jour. Maintenant, si je vais voir ma console de débogage, voir que vous avez cette sortie sur juridique. Autrement dit, je n'ai même pas touché mon code VS, mais il montre tous les changements en temps réel. Et maintenant, si je vais à nouveau, à droite, Google flutter et mettre à jour, alors il montrera à nouveau la nouvelle valeur. Donc, c'est la différence très basique entre la chaîne sont si vous vérifiez. Donc, jusqu'à maintenant, vous pourriez penser que ces termes que cet instantané de document de requête arrosent ces choses. Lors de l'exécution de la banque de fichiers de qualité renvoie soit un instantané de requête sont les instantanés de documents. Alors, qu'est-ce qu'un instantané de requête ? L' instantané est retourné à partir d'une requête de collection et nous permet d'inspecter la collection, exemple combien de documents existent, donnant exister à travers les documents dans la collection. Afficher les modifications apportées depuis la dernière requête et le minimum. Pour accéder aux documents dans un instantané de requête, appelez la propriété qui renvoie une liste contenant des instantanés de documents. Donc, vous avez juste à vous souvenir de tous ces concepts. Qu' est-ce qu'un instantané de document ? Un instantané de document est renvoyé à partir d'une requête sont en accédant directement au document. Même si aucun document n'existe dans la base de données, un instantané varie toujours. Tournez pour déterminer si ce document instantané existe, utilisez la propriété qui existe de celui-ci. Si ce document existe, c'est une couche dans notre cas, nous pouvons lire les données en appelant la méthode de données, qui renvoie une carte. C' est donc le concept que nous écrivons, parfois document par écriture, parfois capture instantanée de requête. Vous devez donc comprendre ces concepts de base par cœur. Aussi, quand nous lisons des données. Firestore, nos premières capacités avancées pour interroger des collections tout à fait anneaux. Un travail médiocre avec les deux choses lues s'abonnent aux changements via le flux. Donc, d'abord, ce qui est important dans ce filtrage, pour filtrer les documents dans une collection où ma technologie peut nous changer, passer à une référence de collection. filtrage prend en charge les contrôles d'égalité et d'autres requêtes utiles. Par exemple, filtrer les utilisateurs dont l'âge est supérieur à 20 ans. Donc ici, vous pouvez voir feu avec feu, stocker la collection de points d'instance de point, point où l'âge est supérieur à type D, deux en D, puis point obtenir à ceux-ci, il va juste vérifier et obtenir sans plomb ces données. Et le second est l'un est un autre exemple où vous pouvez vérifier si un tableau contient une valeur comme celle-ci. La seconde pour les autres capacités sont limitantes. Ceci est de limiter le nombre de documents renvoyés à partir de la requête. Nous pouvons utiliser la méthode limit sur une référence de collection. Donc, nous devons simplement écrire Firestore Firebase, les fichiers firebase stockés dot instance collection, les utilisateurs dot limite à point point point point est non lié aux documents seront retournés. Et ce lié est de commander ces deux documents pour la valeur spécifique de biais utiliser l'ordre BY c'est soit il peut être décroissant, ordre croissant. Donc, ici, vous pouvez voir l'instance point de stockage de fichiers Firebase, les utilisateurs de collection de points. Mais y a-t-il par âge, devrait être ordre décroissant. C' est ainsi que nous sommes. Nous pouvons lire des données et filtrer à travers elle. Donc, jusqu'à maintenant, nous avons réussi à ajouter des données via des données lues avec succès. Il est temps de mettre à jour les données. Alors allons créer un nouveau bouton. Et puis textez. Mettre à jour les données. À Firestone. Ensuite, dans les aisselles, ce devrait être un évier. Nous avons notre collection, ils sont amis, mais cette fois, je vais simplement écrire directement attendre les utilisateurs de la collection de points Firestore dot doc. C' est atteint document que je suis allé mettre à jour, flotter 1, 2, 3, puis point mise à jour. Donc je suis parti, c'était un ensemble d'annonces, mais cette fois c'est une mise à jour. Et mettre à jour à nouveau accepte la valeur de clé. Donc, je veux changer le nom et le changer pour fléchir leur Firebase. Et là, je ne veux pas qu'il écoute. Je veux juste obtenir la valeur de ce document. Sauvegardons et vérifions. Si je clique sur lire les données. Voir que vous avez nommé Google ici, mais si je clique sur les données de mise à jour, il devrait être maintenant. Maintenant, encore une fois, si je clique sur des données concrètes, voir maintenant c'est le nom du fichier Flutter avec. Notre valeur a donc été mise à jour avec succès dans cette base de données. Mais c'est ainsi que nous pouvons mettre à jour le document plutôt que de remplacer toutes ces données simplement en utilisant cette fonction de mise à jour. Donc, dans ce créer des opérations brutes, nous avons déjà fait créer, raid et mise à jour. La dernière chose est de supprimer le document d'un nuage. Firestore. Encore une fois, créez un nouveau, mais après ce bouton dans cet enfant, nous allons lui envoyer du texte et écrire des données. Firestore. Ensuite, dans le site, nous avons une fonction asynchrone. Et là encore, nous devons simplement attendre les utilisateurs de la collection de points Firestore. Puis Doc qui est le document que nous avons supprimer avec le réflecteur 1, 2, 3, puis il suffit d'écrire del dot, del dot mise à jour. Il ne s'agit pas seulement de commencer à supprimer. Et c'est tout ce code requis pour la suppression aussi. Vérifions notre demande. Lorsque je clique sur les données de lecture, qui montrera le nom plus plat Firebase. Maintenant, si je clique sur supprimer les données, il devrait être maintenant supprimé. Maintenant, si je clique sur les données lues, disons qu'il est nul, je dois ajouter des données. Si je veux, puis cliquez sur Big Data. Ça ira avec ça. C' est ainsi que fonctionnent les opérations cred dans Firestore. Et maintenant, nous sommes prêts à travailler correctement avec Firestore. Ceci, je construis cette interface utilisateur sur lifo, sur feuille ou montrant comment effectuer l'opération. Dans la prochaine vidéo, nous allons créer une application du monde réel et utiliser notre base de données Firestore dedans. Merci. 12. Créer des notes UI: Donc maintenant, nous allons construire dans l'application Node pour démontrer et utiliser la base de données Firestore. Dans ce module précédent d'authentification, nous avons déjà construit le registre de connexion et l'écran d'accueil. C' est lié à ses 10 ans. Pour continuer d'où nous sommes partis, nous allons créer une application de prise de notes pour mieux comprendre leurs opérations actuelles. Et aussi, pour commencer, nous allons tout enlever de la section du corps de l'écran d'accueil. Donc, je pars, nous avons coulé ce conteneur et maintenant il suffit de tout enlever. Et après papa Emily, j'ai enlevé le corps aussi. Et vous pouvez voir ici et ensuite aller à notre point principal. La première chose que nous allons faire est que nous allons supprimer cet indicateur de débogage bientôt eux matériellement laboratoire, il va simplement aller écrire le débogage, devrait vérifier Banner et donner une valeur par défaut. Ensuite, que les données de l'équipe, je vais simplement écrire la luminosité est égale à la luminosité dot.org. Maintenant, si vous voyez notre application, voyez que nous avons cette sombre Kim et j'aime vraiment ça. Dans l'écran d'accueil. Après la barre AB, nous allons créer un bouton d'action flottant. Et ajoutons le bouton d'action flottant. Arrière-couleur des couleurs, point orange. Excellent. Enfant. Enfant sera un nom d'icône que je peux ajouter. Et nous avons la fonction onPause. Sauvegardons et vérifions. Voyez ça. Mais alors nous avons l'habitude de naviguer pour ajouter un écran de note. Certainement avant d'ajouter des nœuds, v doit avoir une ferme avec l'aide de laquelle nous pouvons ajouter des données à ces données via torsadé. Il suffit donc de créer un nouveau fichier à l'intérieur des écrans et de le nommer, ajouter noeud, point, point. Créez ensuite une région avec état. Je nomme qu'il n'y a rien d'écran. Et au-dessus. Emballage matériel important. Ensuite, le retour est l'échafaudage. En elle. Prenons un bar AB. Ab bar. Donnons à cette couleur Graham des couleurs transparentes et élévation comme 0. Puis dans le corps. J' aurai une seule vue de défilement enfant afin que nous n'ayons aucun problème de défilement. Ensuite, dans l'enfant aura une région de remplissage avec des encarts de bord point. Et puis dans cet enfant, j'aurai ce widget. Ensuite, donnez-lui juste l'alignement de l'excès croisé cette classe existe et admin point start. Et puis nous aurons nos enfants. Donc, la première chose que nous pouvons faire est d'aller à notre écran d'accueil. Dans le bouton d'action flottante, nous pouvons naviguer dans le contexte de point de navigateur qui poussent constructeur et l'écran. Ok, vérifions notre écran Ajouter un nœud ici. Tu vois, on a ça propre. Maintenant, commençons par les widgets de colonne Linda qui se trouve à l'intérieur de la colonne. Je commencerai par le texte et le titre. Donnez-lui un peu de style de textile. Taille de la police. Et le poids de la police peut être le poids de la police, le gras. Sauvez-le. Voir nous avons ce titre. Après mort. Dépêchons-nous la taille de la boîte. Ensuite, donnez-lui un champ de texte. Texte, décoration, décoration Donner la bordure, décrivant la bordure d'entrée. Ok, sauvegardons et voyons. Vous voyez, nous avons notre champ de texte. Maintenant, après le champ de texte, Donnons-lui une hauteur de boîte de taille de 13. Puis encore une fois, nous allons lui envoyer un texte. Même chose qu'un titre. Et disons que j'ai copié dans une livraison de jour comme description. Et la troisième description ici, vous pouvez voir, encore une fois, j'aurai un champ de texte. Maintenant, ces textes auront un minimum de cinq lignes et une longueur maximale de 10. Dans cette déclaration. Comme d'habitude, bordure, contour, bordure d'entrée. Vérifions, voyons que cette longueur maxlength est égale à 30 ligne max qu'elle devrait être. D' accord. Maintenant, vérifiez à nouveau. Voir nous avons notre description dans le champ de texte n'est pas si étroite. X3, prenons notre boîte de taille. Taille de la boîte de haute technologie D. Puis un conteneur atteignant pour lui donner le bouton. Donnons-lui une hauteur de 50. Ensuite, attendez, requête multimédia, ce contexte. Ensuite, dans cet enfant, nous allons avoir un bouton surélevé. Et puis nous aimerons ce texte. Annonce. Note. Je vais juste changer légèrement avec ce mode d'ajout. Tout d'abord, je vais donner du style au texte. Ce style de texte. La première chose sera la taille amusante de 25 et le poids de la police. gras. Ensuite, je vais donner un style à l'élevé, alors c'est un liquide. Mais puis le style de point de et puis simplement les couleurs primaires tardives, orange. Tu vois, ça a l'air décent maintenant. Création, ajout d'un écran de notes. Je vais également créer un nouvel écran appelé note. Le bloc-notes d'édition que nous avons pour créer un fichier. Après cela, il sera similaire à ajouter des notes. Je vais juste copier tout dans le nœud Ajouter, puis le coller dans la note d'édition. Tout d'abord, je vais changer le nom. Je vais écrire l'écran d'édition. Ensuite, nous avons notre couleur de fond comme allégement transparent. Ensuite, je vais juste le donner dans les actions dans le bouton de l'application, bouton Supprimer. Autrement dit, il devrait être bouton icône. Et dans les icônes, je vais simplement écrire. Je peux, je peux commencer à supprimer. L' alerte est égale au point d'alertes. Maintenant, nous avons une vue de défilement enfant unique. Rembourrage Sur seule différence sera dans le conteneur. Autrement dit, il mettra à jour le noeud, ajoutera le noeud. Et à part cela, tout sera pareil. Nous avons donc notre noeud d'ajout, nous avons aussi notre note d'édition. C' est l'heure. Nous souhaitons. Katie, écran d'accueil de la Floride qui est ici. Alden notes seront récupérées à partir de la base de données. Donc, nous devons construire quelque chose pour ça. Allons à l'écran d'accueil. Après le corps de Barr. Il suffit de créer d'abord une vue de liste. Puis les enfants. Ensuite, commencez avec la carte. Tout d'abord, commençons par le widget de carte. Je vais donner le début des couleurs de la carte. Puis allègement. Je vais le donner à cinq. Puis marge. Je vais lui donner l'ajout de 10. Puis à l'intérieur, j'aurai une liste d'achat. D' accord ? Maintenant, je vais lui donner du contenu en ajoutant des encarts de bord symétriques. Comment ce n'est pas moins que ce S. alors. Donnons-lui juste une donnée factice. Créez une nouvelle application. Donnons un peu de coloration du poids. Taille de la police 18. Poids de la police, poids de la police, gras. Ensuite, nous allons avoir un sous-titre est quand ce Laissons lire le texte. Apprenez à apprendre à cloner de l'application clubhouse de votre part. Laisse-moi supposer. Alors. Ensuite, vous avez juste à lui donner le débordement, pas de texte encart. Oui, encart de texte. Nous devons écrire la propriété de débordement et écrire simplement débordement. Notre point de grippe ellipse et donner la ligne Max dit deux lentilles aussi. Vérifions, sauve-le. Et voir que nous avons l'interface utilisateur prête. C' est une note simple. Il est un mannequin, mais en ce moment, mais dans la prochaine session, nous allons chercher vraiment meurt quand maintenant ce que je veux, Quand quelqu'un BAPS sur ce style de liste, il devrait être dirigé vers l'écran d'édition. Donc, je vais juste lire le matériel de poussée de point, le générateur de mise en page. Écran de note. Ok, sauve-le. Maintenant, quand je clique sur cela, voir que j'ai cet écran de mode d'édition aussi bien. Donc, avec cette interface utilisateur est terminée. Nous avons notre nœud d'ajout, nous avons notre nouveau TUI, et si nous cliquons dessus, nous pouvons lire la mise à jour ainsi que supprimer de cette UIS non liée. Ensuite, la prochaine session nous allons créer les fonctionnalités pour que les incendies à qui est que nous allons créer ce fichier de services séparé et ensuite joindre ce fichier avec notre cette interface utilisateur. 13. Créer des données et un modèle: Salut. Donc, jusqu'à maintenant, nous avons construit avec succès notre application de nœud. Donc, dans cette session, nous allons créer la fonctionnalité pour ajouter ces données à Firebase. Firebase, Créons un nouveau fichier dans le dossier des services et nommez-le. Magasin de feux, service sombre. De même, tout comme un service OT, nous allons créer une classe appelée service de magasin incendie. Et maintenant, la première chose que nous devons faire est de créer une instance de stockage de fichiers Firebase est l'instance point Firebase Firestore. D' accord ? Donc, cette chose que nous savons déjà que nous devons créer une instance. Après ça. Créons notre fonction, future fonction pour insérer le noeud. D' accord ? Maintenant, pensez simplement quelles données sont nécessaires lors de l'insertion d'un nœud. C' est la première chose qui sera nécessaire, c'est ce titre. La deuxième chose sera la description. Et la troisième chose sera l'ID utilisateur. Ainsi, lorsque nous stockons les données dans la base de données, nous savons au moins quel nœud appartient à quel utilisateur. Et alors seulement nous serons en mesure de récupérer certains nœuds particuliers qui ne sont que de l'utilisateur de Deck. Nous ne voulons pas que l'utilisateur accède aux données d'une autre personne. Alors faites tout d'abord cela, essayez le bloc catch. Maintenant, nous avons une collection de points Firestore nœuds. Maintenant, et je vais utiliser la fonction add. Donnons le JSON. Le titre des données sera intitulé. Ce sera une date de description. Je devrais également mentionner cette date à la guerre quand il a apporté inséré. Donc, je vais juste écrire dot datetime maintenant. Et la dernière chose sera l'ID d'utilisateur. C' est l'ID utilisateur 0, k. Donc notre fonction est terminée. Alors l'étape suivante consiste à nous assurer que nous passons notre modèle d'utilisateur tout en naviguant vers l'écran d'accueil. Parce que lorsque nous allons ajouter, lorsque nous allons à l'écran Ajouter un nœud, l'ID utilisateur est requis. Alors allons à l'écran d'accueil. Ici. Je vais m'assurer que le modèle utilisateur est accepté dans le constructeur. D' accord ? C' est fait. Maintenant dans l'écran des registres. Il est montré parce que ici nous naviguons à l'écran d'accueil ici dans cette ligne. Donc, définitivement, nous devons passer le modèle utilisateur, c'est celui-ci. On doit juste aller le passer comme ça. De même, dans l'écran de connexion, nous devons faire la même chose. Nous devons copier et coller ce résultat, qui est un type de données utilisateur, puis simplement l'envoyer. Maintenant, quand on va à notre principal. Jack. Ici aussi, il montre edit. Parce que ici, nous retournons écran d'accueil. Donc, nous devons juste, puisque le générateur de flux nous donne des données d'un utilisateur particulier, c'est-à-dire l'utilisateur, ils ont lié cela étant envoyé, voir, oui, vous pouvez diffuser de l'utilisateur. Donc ici, vous avez juste à écrire des données de point instantané, cela dit. Alors maintenant, notre travail est terminé jusqu'ici. La prochaine chose est d'appeler cette fonction de nœud d'insertion qui est, qui est le fichier de services. Nous devons l'appeler à partir de maintenant, ajouter des notes écran. Donc, tout d'abord, ce que nous devons faire est d'accepter les données des utilisateurs. Dans cette note d'annonce, le but principal masculin de transmettre à l'utilisateur la baignoire nous pour cet écran. Ainsi, lorsque nous ajoutons un nœud, nous pouvons également envoyer cet ID utilisateur. Encore une fois dans l'écran d'accueil montre édition parce que ici dans la nature lors de l'abrogation, nous devons envoyer l'utilisateur. D' accord ? Comme ça. Maintenant encore, allez à l'écran Ajouter des notes. Maintenant, puisque nous utilisons maintenant le champ de texte ici, nous devons créer un contrôleur d'édition de texte afin que nous puissions récupérer la valeur ce qui est écrit. Donc, je vais juste prénom est le nom Titre. Contrôleur est égal au contrôleur d'édition de texte. Le deuxième contrôleur sera le contrôleur Description . Et on va juste écrire le bureau. Il s'agit d'un texte qui les édite pour nous alerter quand. Et comme d'habitude, nous devons montrer une icône de chargement booléenne de sorte que chaque fois que certaines demandes réseau sont envoyées est circulaire, indicateur de progression devrait être affiché. Et nous allons copier ce contrôleur et l'assigner ici, c'est notre titre et ceci est le champ de texte du titre. Je vais juste taper le contrôleur et le contrôleur. Alors voici notre description ci-dessous. C' est notre champ de texte pour la description que je vais, je vais juste lui assigner un contrôleur de description. D' accord ? Dix, maintenant ça va faire du code. Maintenant, ce que je veux, c'est quand l'utilisateur tape et clique sur ce bouton Ajouter un nœud, alors la fonction devrait être appelée. Alors allons au bouton surélevé, faites-en un évier. Alors ici, la première chose que je vais faire est de faire un chèque. C' est le contrôleur de titre point txt. Si ce n'est pas nul, notre description controller.js, si elle n'est pas non plus nulle, c'est-à-dire, si elle est nulle, alors ce que nous devrions faire, ou simplement si elle est nulle, nous devrions montrer un messager d'échafaudage qui est une barre de collation. D' accord ? Et dans ce contenu, je vais simplement écrire. Des remplissages sont nécessaires. Requis. D' accord. Si c'est faux, c'est alors le cas d'autre. Tout d'abord, je vais faire l'état défini et les rendre indicateur de chargement à true. Et puisque je fais un indicateur de chargement vrai, je devrais montrer l'indicateur de chargement dans l'éternité opéré. Si le chargement est vrai, nous aurons l'indicateur de progression circulaire d'un enfant central. Si ce n'est pas le cas, nous allons montrer un conteneur qui est le bouton. Maintenant, comment avons-nous fait l'état défini 2, alors nous devons attendre les services Firestore. Créez l'objet. Ensuite, il suffit de monter point insérer le noeud neuf, le titre que je vais écrire le texte de point de contrôleur inactif et la description que je vais écrire le contrôleur de description point txt. Maintenant, pour l'ID utilisateur, je dois écrire widget. Comme il s'agit d'un état, widget avec état, nous devons écrire l'utilisateur de point de widget pour accéder à cette variable d'instance et l'ID utilisateur de point dendrite qui est UID, comme ceci. Et quand cela est fait, nous allons à nouveau définir l'état et faire l'allusion à faux. Et après cela, je vais simplement naviguer dehors, c'est navigator dot pop de cet écran. Après que c'est fait. Alors sauvegardons ça. Et maintenant, essayez si cela fonctionne ou non. Nous avons également notre console de fichiers Firebase stockée. Maintenant, cliquez sur Ajouter un nœud. Pourtant, je vais écrire ici une description du maître de l' application de la ferme de plomb brillant . Ils vont acheter. Ça veut dire. Cela dit, je voudrais simplement cliquer sur Ajouter le nœud C. Le chargement est là. Ok, il est sorti. Voyons notre base de données Firestore. Si certaines données sont insérées ou non. Supposons que vous pouvez voir ces nœuds, puis environ 10 description ID utilisateur et cette date. Donc, jusqu'ici, nous avons créé et implémenté avec succès l'insertion de données. Donc, évidemment, dans la prochaine session, nous allons récupérer ces données, toutes ces données de Firebase. Mais avant cela, puisque ces données sont dans ce format JSON, nous aimerions les convertir en objets. Autrement dit, pour cela, nous devons créer nos modèles, modèles pour la note aussi, je vais juste l'écrire, je vais juste l'écrire, créer un nouveau point point de noeud de fichier à l'intérieur des modèles. Ensuite, ici, je vais créer un modèle de nœud de classe. Et ici, écrivez simplement les données qui sont nécessaires. C' est l'ID de chaîne, le titre de chaîne, la description de chaîne, horodatage du nuage Firestore. Puis l'ID utilisateur de chaîne. Ensuite, je vais créer le constructeur et simplement regarder, Right, requis cet ID de point. Et cela nécessitait this.title cette description. Et il a acquis ce pointillé requis cet ID .UserId. Et la dernière chose que nous devons créer une méthode d'usine afin qu'il prenne l'instantané du document du magasin de feu et converti en ce modèle. Il suffit de lire l'usine à partir de JSON. Il acceptera un instantané de documents, instantané, puis le modèle de retour. Maintenant, nous devons écrire ces données. C' est la valeur de données IID sera l'ID de point d'instantané. Ensuite, le titre sera instantané. Titre. La description sera la description de l'instantané, puis la date. De même, date d'instantané et ID utilisateur. Donc je vais juste vous expliquer une chose. Que cet ID utilisateur est l'ID unique de leur utilisateur, mais cet ID est l'ID du document qui est celui-ci. Pour que nous puissions identifier le document et l'utiliser pour manipuler qui est, mettre à jour ou supprimer à l'avenir. Donc, nous avons toujours besoin de cet identifiant de document. C' est très utile. Donc c'est tout pour cette session. Ici. Aujourd'hui, nous avons appris à télécharger cette tâche et également créé avec succès une classe de modèle. Cela dit 10 Q 14. Retrier et mettre à jour des données de note: Donc maintenant, nous avons inséré avec succès nos données, et ce sont les données que nous allons maintenant chercher et montrer dans notre écran d'accueil. Apportez votre code VS et accédez à l'écran d'accueil. Nous allons utiliser stream parce que nous allons récupérer tous les nœuds des incendies à l'utilisation d'un flux afin que tout changement soit reflété en temps réel. Et cette requête de flux, j'écrirai dans les maisons propres et ne créerai pas un 10 mai séparé dans les services. Allons à l'écran d'accueil. Ici. C'est notre fête. Je vais juste copier cette carte qui est coupé cette voiture d'ici. Nous en aurons besoin. Assurez-vous donc juste que vous l'avez dans votre système qui est juste copier. En bas. Je vais utiliser un constructeur de chaînes. Vous pouvez utiliser l'accumulation future, mais je veux juste que compte tenu de toutes les modifications de données ou quoi que ce soit que nous faisons, nous n'avons pas à actualiser notre état défini. C' est-à-dire, je vais juste dire espace feu, Firestore cette instance. Modes de collecte. Ensuite, nous allons utiliser la clause where afin que nous puissions récupérer si l'ID utilisateur particulier. En le filtrant. Nous disons aux utilisateurs l'ID utilisateur est égal à User.email UID, c'est-à-dire l'utilisateur, cet utilisateur est celui-ci. Et puis des instantanés. Ok, nous avons notre co-édition. Maintenant, dans ce constructeur. Et nous aurons le contexte et la vue instantanée, instantané. Et puis je vais juste écrire si l'instantané a des données, sinon, suffit de tourner un ensemble d'indicateur de progression coloré. Si l'instantané contient des données. Après cela, en ce moment, je vais faire une autre vérification pour voir si les données de point instantané, longueur de point docs est supérieure à 0. Autrement dit, nous avons quelques documents. Si nous n'avons pas de document, je vais simplement dans l'autre je vais retourner centre. Et ici, je vais sembler texte de pas de notes. Je suis disponible. C' est ça. Mais si la longueur du document est supérieure à 0, je retournerai une liste views.py. Ceci si d'autre est très important parce que cela aurait pu être que l'utilisateur n'a rien téléchargé. Donc ici, nous devons vérifier avec ça. Maintenant, le nombre d'éléments sera des données de points instantanés, des documents de points, de la longueur de points. Et puis ci-dessous, nous avons le contexte. Et cet index 0 ne permettait pas. Tout se passe très bien. Donc, ces données, que nous allons obtenir dans cet instantané, signifieront que le format JSON. Donc, ici, nous allons convertir avoir le modèle de gréement. Donc comme ça, je vais juste écrire le module Node, lui donner un nœud de nom. Ensuite, je vais laisser model.fit. Je suis Jason. Et il exerce un instantané. Donc, nous avons juste un bon instantané, point de données, point, docs et index. Donc ici entre les barres et convertir le JSON en un objet. Maintenant, dans la déclaration de retour, je vais juste coller, coller la carte que nous avons déjà copiée plus tôt. Donc, ici, dans le texte qui est dans ce titre, je vais écrire rien titre de point cette note. Et dans la description aussi, je voudrais simplement la scription Node.js. Ok, Sauvegardons et nous commençons et vérifions dans l'écran d'accueil ce qui est montré. Voir la Floride apprise. Donc, ces données proviennent de la base de données sto finale. Enfin, la désintox a récupéré les données avec succès. Vous vous demandez peut-être pourquoi j'utilise StringBuilder. Disons que je vais à ce titre et comment je n'écris aucun. Base de feu. Et puis les opérations dans le magasin de pompiers Firebase. Je vais juste dire apprendre le magasin de fichiers Firebase. Ok, maintenant quand je clique sur Ajouter un nœud, voir qu'il est déjà en train d'être récupéré. Je n'ai pas besoin de redémarrer notre état défini ou quoi que ce soit. Comme il s'agit d'un StringBuilder, il est affiché directement dans l'écran d'accueil. D'accord ? L' étape suivante consiste à avoir cette fonctionnalité de note ajoutée. Donc, pour cette première chose que nous devons faire est de passer les données de noeud à partir de l'écran d'accueil et acceptées dans l'écran d'édition. Alors, allons-y. Je vais sembler bon, je sais noeud. Et ici, je vais utiliser le constructeur et simplement écrire ce point néant. Maintenant, dans l'écran d'accueil montre entrer parce que ici, nous avons deux patron Daniel. Et puis remarquez déjà ici, nous avons déjà affecté à une variable. Mais c'est fait. Maintenant. Je ne connaissais pas l'écran point-point. Nous devons créer deux decks et être fait à nouveau, quand un contrôleur, contrôleur, puis le nom du contrôleur, description, contrôleur, decks, tout contrôleur. D'accord. Et nous allons leur charger des variables booléennes. Donc tout sera tout à fait voir. Donc maintenant ce que je veux, c'est quand l'utilisateur clique dessus, ses données devraient être affichées ici, c'est-à-dire, quand nous éditons. Donc, dans ce cas, évidemment, la description de resserrement devrait être affichée dans ce champ de texte. Loin, papa, avoir à pré-assigner et donné la valeur initiale, que x et penser et d'apprendre. Et nous pouvons le faire dans cet état d'initialisation. Ici, je vais juste écrire del controller dot txt est égal à widget point naught point. De même, contrôleur de description dot dx est égal à rejeter la description de point H néant. Et nous devons nous assurer que nous assignons ces jetons TI pour conduire au champ de texte. Donc ici comme ça. Et là encore, nous avons lu des descriptions et d'apprendre. Sauvegardez-le et voyons si cela fonctionne ou non. Maintenant, si je clique sur le flutter Apprendre Firebase, oui, cela fonctionne. Nous pouvons voir que je dis dans la description. Alors maintenant, il est temps de travailler sur ce bouton de mise à jour. Comme vous le ferez, nous jeûnons, nous devons créer une fonction créative. Donc ci-dessous dans certaines fonctionnalités quotidiennes, mise à jour, il demandera à nouveau trois choses. Corde. abord, nous allons lire l'ID du document car au moins nous nous soucions que nous saurons quel document à utiliser, puis le titre de chaîne, puis la chaîne S pour le faire couler. Maintenant, prenons notre bloc de capture. Je peux simplement imprimer puis les deux héros, sorte que vous pouvez imprimer des données. Dans ce try-catch, ce n'est pas un bloc try. Nous devons simplement lire un taux. Collection Firestore, notes, document, doc, id doc, mise à jour. J' ai vraiment adoré. Description, description du plaisir chinois fait. Allons à l'écran d'édition de la note. Et ci-dessous, nous avons notre bouton. Faisons en un évier. Plus 10. On vérifiera s'il n'a pas écrit. Il est del controller.js pas égal à NP et description. Et x n'est pas non plus vide. Donc ici, nous allons écrire si elle est vide. Donc, nous allons juste montrer un snack-bar est nécessaire. Et si ce n'est pas dans cet état imprimer. Réglons l'état. chargement consiste à utiliser l'opérateur unaire et à vérifier si le chargement est à afficher centré, puis un indicateur de progression circulaire. Si ce n'est pas le cas, alors ce bouton. Ouais, je vais utiliser await et Firestore services point mise à jour, ID doc, qui est document ET sera simplement widget. Id. Le titre sera le texte de point du contrôleur L. La description sera Description controller.js. Suivant. Après cela, nous allons à nouveau définir l'état, en chargeant sur false. Et je ne sortirai jamais. C' est un point de point de navigation. Sauvegardez-le et testez-le par nous-mêmes. Sortez le rédacteur en chef. Sodium vous plus tard. Si je vais apprendre Firebase inondé et un fini, il suffit d'apprendre Firestore et mis à jour. C. Elle travaille en Espagne. Nous pouvons voir que les changements qui sont appris. Depuis encore une fois, c'est un constructeur de cordes. C' est pourquoi ces changements se reflètent en temps réel. Donc c'est tout pour cette vidéo. Dans la vidéo suivante, je vais travailler sur ce bouton de suppression. Merci. 15. Ajouter des règles de sécurité: Bienvenue de retour. Donc, enfin, la seule fonction ou la gauche est de supprimer une note particulière. Autre que cela, nous avons créé et mis à jour avec succès. Donc, nous allons travailler sur la fonctionnalité pour le supprimer aussi. Accédez au fichier point des services Firestore. Sous le nœud de mise à jour Je vais créer la future fonction appelée delete node. Faites-le couler. Donc, pour supprimer un noeud v ID de document requis. Donc, je l'accepte comme paramètre. Maintenant, utilisez ce bloc try catch. Dans le bloc try, il n'y a qu'une seule ligne de code qui est attend, stocker les nœuds de collection de points, puis, puis dot doc ID et simplement 10 points delete. Cela dit, c'est la seule chose requise. Nous avons notre fonction prête. Travaillons sur ce retardé je peux éditer l'écran de mode, c'est celui-ci. Et aussi montrer qu'il boîte de dialogue de confirmation pour s'assurer que l'utilisateur n'a pas accidentellement supprimé noeud en appuyant simplement sur ce bouton supérieur. Parce que des scénarios peuvent arriver qu'il est moins roi son écran et par erreur, il clique sur ce bouton. Accédez au mode d'édition. Dans les actions de la barre d'application, nous avons ce quaternion. Alors sur place, moi Kid, un évier. Et la première chose que nous allons montrer est un spectacle. Dialogue. Dans ce contexte est le constructeur de contexte. Nous devons écrire une fonction et il accepte le contexte. Cela dit. Maintenant, il suffit de retourner et d'alerter la boîte de dialogue. C' est une boîte de dialogue d'alerte à l'intérieur. Dans ce titre. Donnons-lui un texto. Veuillez confirmer que dans ce contenu. Donnez-lui simplement un texte appelé, Etes-vous sûr ? Vous supprimez le nœud ? C' est ça. Et après, nous aurons quelques boutons. D' abord, oui. Mais puis textez. Mais alors et dans cet enfant, il suffit d'écrire e, s oui. Et le bouton Données sera un bouton texte, mais ce sera juste pour dire non. Et quand l'utilisateur clique sur cette nouvelle mer lisse devrait simplement naviguer. Donc, je vais écrire navigator dot pop dans ce pas de bouton. Mais dans le bouton Oui, je vais écrire sur Prezi je vais faire sur un évier et émuler, attendre Firebase. Étudiez tous les services de magasin qui suppriment le nœud et l'ID est rigide. Mais l'ID du nœud, c'est tout. Et après, la première chose que je vais faire est de fermer ce dialogue avec le navigateur point Bob. Et après ça, je fermerai le vert. Aussi parce que maintenant nous ne devrions pas être en mesure de l'éditer. Je l'ai fait comme c'est déjà fait Daley. D'accord. Essayons ça. Je l'ai sauvé. Être sorti de notre émulateur. Si je clique sur Apprendre Firestore et maintenant cliquez sur le bouton Supprimer. Voir j'ai cet écran de confirmation. Si je clique sur Non, il reviendra directement en arrière. Mais si je clique sur oui, voir il fait sortir nous amène à l'écran d' accueil et notre note de dette a été supprimée avec succès. Donc, enfin, les fonctionnalités fonctionnent et nous avons un travail correctement terminé qui est terminé application en mode. Donc, la dernière chose que nous devons faire, un dernier sujet est d'ajouter des règles de sécurité à Cloud Firestore. Donc, lorsque nous utilisons Firestore pour la production, nous devons changer les racines de la sécurité. Comme en décimal, n'importe qui peut y accéder avec son URL. Et évidemment, à cause de quelles données seront à risque et peuvent également nous donner une grosse épingle d'utilisation si quelqu'un l'utilise abusivement. Donc, parce qu'il y a finement, nous ne voulons pas de ce genre de situations. Nous devrions changer cette condition et quelle condition j'utiliserai est appelée l'authentification requise. L' une des racines de sécurité les plus courantes par terme est de contrôler l'accès en fonction de l'état d'authentification de l'utilisateur. Par exemple, votre application peut vouloir autoriser, sauf si vous vous connectez aux utilisateurs pour écrire des données. Pour ça. Sortez la console Firebase. Accédez à la base de données Firestore et cliquez sur ces règles. Ici. Le C européen, cela permet à tout le monde d'accéder à la base de données, mais nous ne le voulons pas, nous n'en voulons pas. Nous allons l'enlever. Ici Densa. Si, si le point de requête ne sont pas égaux à null, C'est tout. Et cliquez sur Publier. A partir de maintenant. Sur. L'utilisateur a été authentifié, cet utilisateur de connexion, e-mail, g-mail, quoi que ce soit, alors seul lui serait autorisé à accéder à cette base de données. Ici. Cette partie particulière signifie que chacun, il peut correspondre à n'importe quel document dans la base de données entière. Nous pouvons également modifier ce genre de règles, mais je ne pense pas que ce soit si important pour le moment. Un autre modèle commun est de s'assurer que les utilisateurs peuvent lire sur Lee, lire et écrire leurs propres données sur Lee. Il y en a peu d'autres que vous pouvez essayer par vous-même en lisant les fichiers officiels à la documentation. Mais le plus couramment utilisé est cette authentification requise. Alors c'est tout. Pour ce module. Nous avons beaucoup appris. Et c'est comment créer un compte Firebase, comment faire ces opérations cred. Et enfin, construisez notre application Node complète. Et à la fin, nous apprendrons comment changer les règles de sécurité. Donc, dans le module à venir, nous allons apprendre sur le stockage Firebase et comment y télécharger des fichiers. Jusque-là, continuez à pratiquer. 16. Configurer le stockage de Firebase: Salut, bienvenue dans ce nouveau module où nous allons discuter ce qu'est Firebase Cloud Storage et comment l'implémenter en utilisant flutter. Donc, jusqu'à maintenant, nous avons appris comment authentifier l'utilisateur, comment stocker les données utilisateur dans l'histoire de feu qui était, mais maintenant il est temps d'apprendre à télécharger des fichiers dans Firebase aussi. Maintenant, la question est, qu'est-ce que Firebase Cloud Storage ? Cloud Storage est conçu pour nous aider à stocker et à servir rapidement et facilement des contenus générés par les utilisateurs tels que 42 vidéos et tout autre fichier. Donc, dans n'importe quelle application du monde réel de nos jours, mort facile et la nécessité d'utiliser le stockage. Si vous voyez Instagram, il s'agit d'images. Et certainement nous devons utiliser une installation de stockage. En dehors de cela, si vous voyez WhatsApp, lorsque nous envoyons uniquement du texte, alors nous utilisons simplement la base de données. Mais supposons que nous modifions notre image de profil envoyant des images ou des vidéos à d'autres utilisateurs. Dans ce cas, nous devons utiliser une sorte de stockage. Donc, évidemment, la première étape a été de configurer notre projet Firebase, ce que nous avons déjà fait. L' étape suivante consiste à ajouter la dépendance de stockage Firebase. Allons sur notre navigateur Chrome, non ? Spécification du pub, alors, désolé, Pub Dot-Dot-Dot. Et ici, écrivez simplement le stockage Firebase. Le premier est que vous devez le copier et le coller dans le fichier YAML. Ici qui dit Télécharger, dépendance et l'installer dans notre projet. Maintenant, l'étape suivante consiste à activer le stockage dans le projet Firebase. C' est la console Firebase. Comme Va a créé un feu avec, données de magasin de feu avec, de la même manière, vous avez juste à sélectionner le stockage dans ce menu de gauche. Et dès que vous cliquez dessus, vous verrez cette partie du compartiment, c'est celle-ci. Ceci est notre partie unique seau et a jeté cela sur Levy sera télécharger des amendes. Et Van nous utilisions les règles de base de données Firestore. De même dans le stockage il y a aussi des règles. Mais puisque nous utilisons l'authentification Firebase, c'est pourquoi nous n'avons pas à changer de règle ici. Mais si vous devez modifier la règle pour que le stockage Firebase devienne public pour les tests. Cela aussi, vous pouvez le faire, mais certainement pas à cette étape de production. Donc, nous avons notre stockage prêt, nous avons notre dépendance prêt. Et on va vérifier une chose ici. Donc, cela aussi, nous pouvons simplement le copier car il émet une erreur ici. Je vais juste aller à la spécification du pub et collé. D' accord. Maintenant, c'est l'heure. Nous construisons également un nouvel écran. Donc, créez un nouveau fichier à l'intérieur du dossier rate et nommez-le, téléchargez l'image point, point. Et maintenant, créez un widget avec état. Mais avant cela, je vais importer le paquet, puis créer un état complet rigide et nommant. Télécharger l'écran de l'image. Comme d'habitude. Un échafaudage. Ce titre. Je vais écrire les decks télécharger pour trouver des moyens. Et je vais juste le faire au centre. Le corps. Tout d'abord, je vais créer deux boutons pour sélectionner une image. Supprimons cette colonne. Ensuite, les enfants dans le corps, je vais donner une sorte de flexion est quand vous venez de le donner à indépendant. Dans ces enfants. Je veux une chute plus rapide. Deux boutons pour ça. Et il va créer la ligne à l'intérieur de la colonne. Donnez-lui moyen x est un élément, moyen existe vendre lorsque les points espacent uniformément. Et que les enfants que je vais avoir élevé, mais 10 élément qui est élevé bouton icône point. Je vais simplement écrire un appareil photo. Et le travail devrait être caméra. De même et les élever. Mais alors nous pouvons et allons donner je peux que je peux ajouter le texte de rassemblement. Donc, ce que j'ai créé pour que cela montre, vous devez aller dans le fichier main.js et commenter l'écran d'accueil ici. Et au lieu de cela, je vais tourner notre écran d'image de téléchargement. Maintenant, sauvez-le. Voyons si ça marche. Notre écran d'image de téléchargement est très agréable. Cet écran que j'ai créé au début, juste pour montrer comment faire les opérations dans le stockage. Après que nous l'avons fait avec succès. Encore une fois, implémentez cette histoire dans notre application de nœud également. Mais avant cela, les bases, nous devrions connaître les bases. Maintenant. Vous pensez peut-être, ok, je vois que nous allons télécharger des images, des images et tout. Mais comment pour accéder à cette catégorie d'appareil, notre caméra et à l'image pk que nous faisons, nous devons faire quelques utilisations de paquets tiers. Sont nombreux sur le marché, mais nous allons utiliser le sélecteur d'image. Allons à pop là et sélecteur d'image. Donc, cette dépendance que nous allons utiliser pour accéder à l'appareil de l'utilisateur, qui est Galerie sont la caméra, puis récupérer l'image et juste la copier. Allez à la spécification point YAML et collez-le ici et enregistrez-le simplement. Donc, nos dépendances sont toutes définies. Dans cette vidéo. Nous avons configuré Firestore avec succès et créé l'interface utilisateur. Dans la prochaine vidéo, nous allons apprendre comment utiliser le stockage en nuage et quelles sont ses terminologies. Merci. 17. Comprendre le stockage du Cloud: Dans cette session, nous allons juste comprendre ce que ce nuage Firestore et certaines de ses terminologies. Parce qu'avant d'écrire du code, nous devrions au moins connaître certaines fonctionnalités ou fonctionnalités qu'il permet. Donc directement pour utiliser Cloud Storage. Tout d'abord, nous avons fait un paquet stand-up, ce que nous avons déjà fait. Ensuite, l'étape suivante consiste à créer une instance de stockage appelée getter d'instance sur le stockage Firebase comme ceci, le stockage des déchets est appelé instance point de stockage Firebase. Ce que nous avons fait dans cinq meilleurs art ainsi que dans le feu avec le magasin de feu. Ensuite, il y a un autre terme appelé références. Références. Une référence est un pointeur vers un fichier dans le compartiment de stockage spécifié. Il peut s'agir d'un fichier qui existe déjà ou qui n'existe pas. Pour créer une référence, utilisez le RDF, c'est-à-dire href mon dix sur l'instance Firebase. Et c'est l'exemple. En termes simples, c'est l'emplacement de votre stockage de fichiers. Autrement dit, si nous avions mentionné directement ici, barre oblique et ensuite le nom final. Ensuite, si nous allons à notre stockage qui est ici, ce fichier sera stocké directement dans le répertoire racine. Mais leurs amis peuvent également être imbriqués fichier ou répertoire. Fournissez la partie complète. Rus cet enfant ma tête sur la différence de retour, il va créer des dossiers à l'intérieur du diélectrique. Cela signifie que si vous voulez créer un dossier qui est des images, puis à l'intérieur, nous téléchargeons l'image, juste par exemple ici. Le premier dossier peut être l'image de profil de l'utilisateur. Le deuxième dossier peut être envoyé des éléments comme celui-ci. Pour cela, il suffit de créer une référence. Ensuite, j'ai mentionné le répertoire à l'intérieur de la méthode RDF, comme ceci, images slash et puis le fichier image sont, nous pouvons le faire d'une manière qui est dot ref, puis dot child, c'est-à-dire, c'est le nom du dossier, puis dot child que est directement le fichier image. C' est donc ce concept de référence. Maintenant, qu'est-ce que la liste des fichiers et des répertoires ? Firebase permet de répertorier les fichiers et répertoires dans le répertoire. Il existe deux méthodes disponibles qui fournissent cette capacité, liste et liste à bord fonction ma déclaration de revenus, tout résultat qui contient des fichiers, répertoires, et jeton de pagination de la demande. Supposons donc que nous ayons téléchargé l'image avec succès. Maintenant, quand il est temps de récupérer ces images du stockage. Dans ce cas, nous utiliserons ce matériel. Donc, ce que nous devons faire, c'est dans le cas B que nous avons la Convention. La profondeur de référence est l'endroit où ce fichier a été stocké, puis la liste. Il nous donnera sur les fichiers stockés dans notre stockage. Et comme il viendra dans une liste d'éléments. Donc, nous devons simplement faire une boucle à travers. Dans l'exemple, vous pouvez voir que c'est la façon dont nous le faisons. Cette propriété items représente le fichier dans ce compartiment et la propriété prefix représente ses répertoires imbriqués. Dans le cas où nous avons un grand volume de fichiers et de répertoires appelés LinkedList. Il peut prendre beaucoup de temps pour retourner nos résultats. Dans ce cas, la liste d'appels et limitation de leur résultat peuvent entraîner une meilleure expérience utilisateur. Donc, dans l'exemple que vous pouvez voir ici, nous demandons les données, mais juste pour les 10 premières données, C'est tout. C' est donc le concept de listage des fichiers et des répertoires. Ensuite, il vient télécharger des fichiers. Donc, ce code factice, c'est la syntaxe requise pour télécharger un fichier. Fasta, nous devons avoir un dossier. Et puis dans ce cas, Get Data View principale chaîne de données amis où nous voulons qu'il soit téléchargé, puis simplement lire le fichier de sortie point. Et dans ce fichier de mise, nous envoyons notre dossier dans lequel il se trouve. C' est très simple et c'est juste ce code ou ce vol. Nous mettrons en œuvre ce code lors de la prochaine session. Je voulais juste vous donner une vue d'ensemble comment fonctionne le stockage et quelles sont les différentes fonctionnalités qu'il offre. La dernière chose qui est vraiment importante est les URL téléchargées. Dans la plupart des cas d'utilisation, nous pouvons souhaiter afficher des images stockées sur un compartiment stocké dans notre application. Et pour cela, nous avons demandé de télécharger l'URL à partir de ce stockage. Il nous donnera un lien. Et ce lien que vous devez montrer dans notre vision. Pour télécharger l'aryl, il suffit de mentionner la référence de l' image, puis de les utiliser mon URL de téléchargement de 10 points. Ceci, nous l'utiliserons également dans les futures vidéos. Maintenant, si vous voulez en savoir plus sur Cloud Storage, vous pouvez simplement aller à la documentation officielle qui est ici et vous lisez tout, quelles références, télécharger des URL, télécharger des fichiers, comment télécharger des données brutes, comment ajouter métadonnées, voir ce que notre couleur de tâche, différents types de tâches. Beaucoup de choses. Si vous le souhaitez, vous pouvez passer en revue tout car c'est une bonne pratique de lire la documentation de ce plug-in. C' est donc loin que nous le faisons. Lors de la prochaine session, nous allons télécharger notre première image. Et Q. 18. Mise en œuvre d'images: Salut. Nous avons donc maintenant compris les concepts et la théorie du stockage Firebase. Il est temps de créer notre propre fonction. C' est ma grande image, puis téléchargez sur le serveur. Nous avons déjà mentionné que les dépendances, c'est-à-dire le stockage Firebase et le sélecteur d'images. Maintenant, accédez simplement à l'écran Télécharger l'image. Et ici, la première chose que nous devons faire est de créer une instance. Simplement notre Firebase. Le stockage Firebase est égal à l'instance de stockage des déchets. Alors certainement quoi que je fasse, cela prendra un certain temps et nous devons montrer un indicateur de chargement dans l'interface utilisateur. C' est pourquoi je mentionne une variable. Après cela, créons notre fonction appelée fonction, qui retournera vide et je me laisserai seul. Image. Donc, ici, vous pouvez voir une personne peut télécharger une image à partir d'une caméra ou d'une galerie. Donc, quand nous appelons cette fonction, nous devons envoyer la source d'entrée. Autrement dit, si l'utilisateur a choisi la caméra sont la galerie. Maintenant, il est temps que nous utilisions aussi notre image. Donc, je vais obtenir une variable appelée sélecteur, puis assigner est le sélecteur d'image. Maintenant, je dois simplement écrire le sélecteur d'attente, choisir l'image. Et ici, la force sera un opérateur ternaire qui vérifiera si la source d'entrée est la caméra. Ce sera la caméra source de l'image. Ou bien il émettra la source. Mais Kelvin. D' accord ? Donc, quand nous avons notre image en D parler, nous pouvons voir qu'elle renvoie un cinquième avenir de type de données de fichier exe. Donc, je vais juste le dessiner ici et nous allons simplement écrire le fichier exe final qui est dans la sécurité de la santé et le nommer grande image. Alors maintenant ce qu'ils ont été imagés, les données de l'utilisateur seront stockées ici. Maintenant, la première chose que je dois vérifier si un utilisateur a une grosse somme toute image ou non. Je vais juste vérifier si l'image de pic est un deux. Maintenant, je vais simplement retourner null et arrêter l'exécution. Et sinon, si l'image n'est pas nulle, première chose que je vais faire est d'obtenir un nom de fichier dans ce grand nom d'image. La deuxième chose que je dois faire est de créer le fichier car ce format est un fichier EXE. Donc, j'aime vraiment le fichier image et puis il suffit de tourner le widget, qui est de ce point IO. Voir nous avons important le point IO. Et ici, nous devons envoyer une partie qui viendra. Point de l'image. Donc maintenant, nous l'avons tous converti avec succès en un fichier. Il est temps de faire notre bloc catch et d'effectuer la fonction de stockage Firebase. Dans cette cravate. La première chose que je vais faire est d'obtenir l'indicateur de chargement à vrai. Ensuite, j'attendrai point de stockage Firebase pour référencer leurs amis lorsque nous sommes en train de déposer. Et le fichier de sortie. Et le fichier d'entrée, je vais écrire un fichier image comme ceci. Et après cela, ils ont réussi, je vais à nouveau mettre à faux. Et comme toujours, j'aime montrer un snack-bar. Échafaudage OFF, puis afficher le contenu de la barre de collation, du snack-bar et de l'onglet de guide en tant que sexe téléchargé. D' accord. Je vais juste faire sur l'exception Firebase, catch et E. Et si quelque chose d'autre, alors ici, je veux dire encore imprimer. Oh, ok, alors maintenant notre Chen amusant est prêt. Nous devons simplement d'abord mentionner l'indicateur de chargement ici dans notre widget de ligne. Si le chargement est vrai, centrez l'indicateur de progression circulaire. Si ce n'est pas le cas, alors je dois montrer cette rangée. Nous vidons les boutons. Voyons voir, essayons-le. Ce collage dans le bien-aimé 10. Mais d'abord, laisse-moi aller à mon entrepôt et le dépresser. Vérifions s'il y a une image ou pas leur âge industriel. Vous pouvez voir qu'il n'y a pas de fichiers ici. Il suffit de sortir votre émulateur. Je vais cliquer sur Galilée, mais avant cela, évidemment, je dois mentionner notre fonction pour dub boutons. Donc, je vais appuyer, je vais appeler cette image de téléchargement avec une valeur de caméra. Et dans ce cas, je vais simplement écrire la galerie. D' accord ? Puisque c'est une amulette que je n'utiliserais pas la caméra par défaut, je vais choisir. Ensuite, dans ce téléchargements, vous pouvez voir des images déjà existantes. Je vais choisir ce Elon Musk et voir notre syndicat est là et ensuite téléchargé avec succès. Vérifions notre stockage et voyons nos images ici. C' est donc le nom du fichier sur la référence dont je parlais. Donc, ici, ce stockage basé sur un fichier ou nom de fichier est celui-ci qui est directement qu'il a téléchargé dans le répertoire racine. C' est ainsi que nous téléchargeons l'image vers le stockage. Mais définitivement. Ensuite, nous avons téléchargé l'image. Il est nécessaire que Nous le récupérions aussi. Donc, pour récupérer les images, la première chose que nous devons faire est de créer une méthode pour cela. Il suffit d'aller à notre écran seulement je le ferai, je voudrais écrire mon tour. Dans ce fichier uniquement. Si vous le souhaitez, vous pouvez utiliser des fichiers séparés. Je vais simplement écrire l'avenir. Il nous donnera une liste de fichiers. Donc je vais faire je charge des images et ensuite en faire un évier. Après cela, je vais simplement créer une variable mappée de liste qui stockera toutes les données provenant du stockage. Maintenant, la première chose, comme je l'ai dit, qu'il faut écouter pour obtenir tous les fichiers. Donc, je vais écrire le résultat de la liste finie. Le résultat est égal à attendre la liste de référence de stockage basée sur un fichier. Après cela, je vais tout simplement aller droit. Une liste de fichiers va aux éléments de résultat. Comme je l'ai mentionné dans mes diapositives, comme lorsque nous avons nos fichiers de liste. Et grâce à ce résultat, nous pouvons obtenir les articles. Et les propriétés d'élément représentent les fichiers dans le bloc. Donc maintenant, nous avons le phi et je vais simplement le parcourir avec Future dot. Pour chacun, pour chaque élément seront nos fichiers. Et cela nous donnera une référence. Un seul dossier. Si on est en train de boucler. Alors pourquoi faire des bouclages ? Je vais juste obtenir l'URL de téléchargement. Je relie l'URL du fichier de formation financière est égale à attendre le fichier point obtenir l'URL de téléchargement. Et puisque si c'est une attente, je dois en faire un évier. Et la variable du fichier ci-dessus. Je vais ajouter de la valeur dans une carte qui est URL, sera une URL fine et sera un point de fichier partie entière. Et enfin, je voudrais imprimer des fichiers ainsi que retourner des fichiers. C' est-à-dire, cette liste de cartes. Une carte contiendra les données de l'image. Url est utilisé pour montrer qu'il alors cette partie sera utilisée pour la supprimer plus tard. Donc c'est tout pour cette vidéo. Nous avons fait beaucoup. Dans la vidéo suivante, nous allons montrer implémenter cette fonction dans l'interface utilisateur. Merci. 19. Retrier et supprimer des images: Salut. Donc, dans la dernière vidéo, nous avons réussi les fonctions nécessaires pour récupérer des images. C' est celui-ci qui charge des images. Maintenant, c'est l'heure. Nous montrons sur le décrochage immédiat dans ce stockage dans notre interface utilisateur. Ici. Faisons-le. Dans notre corps. Nous avons colonne et dans la colonne nous avons ce tirage au sort. Et en dessous de cette ligne, je voudrais montrer les images. Tout d'abord amusant, je vais donner un peu d'espacement. Nous poussières taille Fox, étant donné une hauteur de 50. Ensuite, je vais utiliser une région élargie de sorte qu'il prendra morceau de restes. Ensuite, ici, chaque utilisateur futur constructeur. Dans le futur, lorsque l'avenir des oiseaux, nous allons charger des images et maintenant écrire notre fonction, un instantané. D' accord. Vérifions si état de connexion instantanée est égal à l'état de connexion. Attendre. Il est, il n'est pas terminé. Ensuite, je vais tourner l'indicateur de progression de la couleur. Et si ce n'est pas le cas, je retournerai une vue de liste. Maintenant, au sein de ce Biller, I compte DM sera des données de point instantané, point de terre. Et je vais vérifier si c'est nul et nous le ferons 0. Et je me rends. J' aurai un contexte et cet index. Maintenant que les données arrivent dans une carte, je vais les stocker ici. L' image cartographique est un index de données de points instantanés. Et je vais simplement revenir est rho. Rho que les enfants. La première chose que j'utilise, c'est une région élargie. À l'intérieur. J'utiliserai une carte. Et cette carte, j'utiliserai un conteneur. Je vais lui donner une hauteur de 200. Et enfant pour montrer notre image, cette image.net. Et à travers cette vidéo d'image, je voudrais simplement écrire URL. Et après cette région de carte, je, qui montre un bouton, c'est le bouton Icône. Et dont je peux être Huygens point supprimer les couleurs et voir si cela fonctionne ou non. Nous avons une image dans notre stockage. Cette diapositive montrant un certain Azure. Ça ne devrait pas l'être. D' accord. Il ne montre pas que le taux était lent. Mais voyez que nous avons notre image. Vous pouvez le voir dans la console de débogage. Puisque nous présentons également leurs résultats, nous avons notre image ici. C' est ainsi que nous récupérons l'image du stockage. Et montrez-le dans notre interface utilisateur. Cela élargi ici, j'utilise de sorte qu'il prend moins d'espace. Et puis les boutons sont apparus. Et la hauteur est ce 200. Et s'il n'y a pas de données, alors le nombre d'éléments sera 0 et rien ne sera affiché. Alors maintenant, il est temps de faire la dernière chose qui est l'image de supprimer de leurs fichiers stockés. Créons une fonction pour cela. Ce sera l'avenir. Attendez. Puis supprimez et supprimez. Tout ce que nous avons besoin de stockage. Référence. Attendez simplement. Stockage Firebase, référence, ref dot delete. Et après le succès de la suppression, Réglons l'état de sorte que ce futur projet de loi qui est appelé à nouveau. Et nous vérifierons ce stockage et obtiendrons les données. Nous avons la fonction supprimer, prêt, il est temps, nous assignons cela au bouton icône. Faisons en un évier. Et à droite. Supprimer la fonction et le rendre comme ceci. Et après qu'il est supprimé, je vais montrer un snack-bar. Contenu. Image suivante. Vérifions ça. Des trucs. Ce que je ferais est d'essayer de sélectionner une autre nouvelle image. Je choisirais. Mark Zuckerberg est téléchargé avec succès et voir. Nous obtenons notre deuxième image. Maintenant, si je veux supprimer cette première image, je vais simplement cliquer sur ce bouton de suppression et voir immédiatement cela avec succès. C' était donc l'image que j'ai supprimée. Maintenant, si je rafraîchis la console Firebase, vous ne verrez qu'une seule image et qui est notre marque Zuckerberg. Elon Musk était moche eux. Mais c'est ainsi que nous supprimons l'image de la poussière trop tard. Vous pouvez vérifier le code. Ici. C' est, tout est lié à la référence. Je dirai que je voudrais mentionner que cette application est destinée à être aussi simple que possible. Soda ou cordon est plus court et Tina, il n'a qu'un seul écran et utilise un widget d'état pour la gestion de l'état. Je sais qu'il manque de nombreuses fonctionnalités de production telles que l'image avant le téléchargement. Mais d'abord l'automne, notre intention est de bien comprendre comment télécharger et récupérer des fichiers à partir du stockage. Donc c'est tout pour cette vidéo. J' espère que vous avez beaucoup appris. Merci. 20. Compression et Caching Image: Donc, jusqu'à maintenant, nous avons compris comment télécharger, récupérer et supprimer notre fichier dans le stockage Firestore. Mais maintenant, il est temps de comprendre comment compresser l'image lors du téléchargement. Si grandes, grandes images prennent plus de temps à télécharger et ont rendu insultant l'opportunité de l'utilisateur horrible. Utilise toujours les temps de chargement négligeables préférés et ne veut pas voir l'indicateur de chargement pour eux pour réduire taille de l'image peut également déduire les factures mensuelles des services de stockage d'images et d'hébergement que vous utilisez. La fonctionnalité de compression d'images est inévitable si votre application dispose d'une fonctionnalité dans laquelle l'utilisateur télécharge des images. Donc, en termes simples, nous devrions utiliser l'achèvement de l'image. Et loin que rassemblé est un paquet appelé image native volantée. Vérifions ça. Si je vais écrire une image native. Et puis voyons le premier, qui est oui, qui est cette image provisoire d'inondation. Ainsi, vous pouvez voir ces deux est nécessaire pour redimensionner l'image et réduire leur qualité par compression. Alors passons à l'installation. Ensuite, copiez-le. Allez dans notre fichier YAML spec dot Pub, et collez-le. Et puis enregistrez le fichier afin que notre flotteur fasse le travail d'installation de la dépendance. Ça prendra un certain temps. Pas de problème. Oh, caverne. Donc maintenant, comme il s'agit d'une nouvelle dépendance, nous devons arrêter notre application inondée, le débogage de bureau. Et puis vous avez redémarré pour que notre inondation sache qu'un nouveau paquet a été installé. Je sais que c'est un processus très fastidieux. Cela prend beaucoup de temps, mais c'est ainsi que cela se fait. Donc, jusqu'à ce que mon application soit en cours d'exécution, je voudrais revenir à notre image de téléchargement et essayer de réviser ce que nous avons fait jusqu'à maintenant. Donc, nous avons notre fonction Upload Image où nous envoyons si c'est un appareil photo. Article 3. Après cela, nous utilisons simplement ceci comme un brouillon qui trouverait du code pour envoyer notre fichier au stockage. Et une fois que c'est fait, marshaling ESNet. Mais la fonction suivante que nous avons créée était de charger des images. La première chose que j'ai fait était de créer un tableau vide. Ensuite, obtenez toutes les références de fichiers. C'est vrai. Cette commande point list-style. Il nous donne une liste de résultats. Et à travers ces risques résultent, je reçois toutes les références de l'image téléchargée, puis boucle à travers elle, regarder à travers, et obtenir cette URL de téléchargement. Donc, et après avoir obtenu une vue dominante, et je sauve ceux dans cette variable, puis je ne l'affiche que dans l'interface utilisateur. Ui est également très simple. Vous pouvez voir que j'avais utilisé ce futur quand il n'y en a pas. Et si quelque chose, quelques détails, Vincent, alors je vais vérifier la liste. Vous le ferez si la longueur du delta n'est pas, maintenant, si elle est nulle qui n'est même pas une image est morte. Je vais écrire 0 par moi-même. Nous pouvons voir que notre compilateur est fait. Donc, enfin, notre demande, nous serons finis. Je sais que Android Studio peut parfois prendre beaucoup de temps. Oui, c'est fait. Maintenant, créons. Requis pour compresser une image. Ce sera une fonction future qui retournera sous forme de fichier. Donc, chaque limite compresse image. Et nous devons envoyer un fichier de données tout en appelant la définition, car au moins à travers ce fichier, nous saurons quelle image compresser. Maintenant, je dois écrire la fonction d'image native. Pour ça. Il suffit d'aller dans le fichier SPEC dot YAML et de le copier. Coller tout en haut. Si elle montre toujours l'adder. Ce que nous pouvons faire est que nous pouvons aller à notre fichier de spécification Pub YAML et puis juste enregistrer comme ceci afin qu'il le fasse, il a encore essayé d'obtenir les paquets requis. Et maintenant C est parti. Donc, dans ce fichier compressé, Let's write wait, besoin image div.com. Et ici, je dois envoyer la partie du fichier. Et puis cette qualité, c'est le pourcentage que je veux réduire cette dette est de 50 % que je voudrais. Et si vous avez l'image compressée, vous pouvez voir qu'il nous donne un futur fichier. Donc, je vais simplement écrire phi. Fichier compressé est égal à attendre comme ceci. Et après cela, j'imprimerai la taille du fichier d'origine. C' est la taille d'origine. Ce dossier dot nan lavabo. Et je vais Sabrina avoir la taille de la poitrine comme ça. Compresser file.com, trouver des terrains. Et enfin retourner notre fichier compressé. Donc, ce sera un futur type de données de fichier. Ok, ce travail est fait. Maintenant, nous devons faire quelques changements dans notre image de téléchargement. Ici. Après ce dossier. Après fichier, compressé. Le fichier compressé est égal à attendre. Et appelez une fonction différente à partir d'ici. Je veux dire simplement une image compressée et envoyer ce fichier. Et après Laissez faire notre référence Firebase ici, je vais mettre ce fichier, pas l'autre fichier. Maintenant, sauvegardons ça. Maintenant, testons si cela fonctionne ou non. Si je clique sur la galerie et supposons choisir ce fichier qui est typiquement quatre Ko. Voyons maintenant s'il est compressé ou non. Ici vous pouvez voir les tailles de fichier d'origine 34 et compresser était nous juste 10. Il y a donc une grande différence. Si nous utilisons cette compression. Si une actualisation de notre console de débogage, nous pouvons vérifier si elle est, si elle a fonctionné ou non. Tu vois que c'était 30, 40 KP, mais maintenant c'est juste 10. Et ça a l'air sympa. Mais c'est ainsi que la compression est faite. Maintenant, la prochaine chose, le prochain sujet que nous allons discuter est ce qui est l'image de réseau de trésorerie qui est la mise en cache ? Donc, tout le monde sait que les images sont une partie essentielle des applications modernes. Puisque la bande passante est coûteuse, la marchandise, la mise en cache des images peut empêcher le téléchargement de l'image à partir du serveur chaque fois que l'utilisateur l'affiche à l'écran. mise en cache sans ainsi améliorer l'expérience utilisateur lorsque notre flanc, car il sera en utilisant la copie de cache locale sans essayer de télécharger à nouveau à partir d'Internet. Pourtant, dans ce tutoriel, nous allons utiliser le paquet d'images réseau mis en cache pour encaisser et discipliner les images d'entrée. La chose est sur le premier lancement, l'application affiche une taille de détenteur de place aussi proche que possible l'image finale pour convenir et la transition lorsque les images réelles sont chargées. Et après, immédiatement, il est pris à cet appareil localement. Ensuite, la prochaine fois que l'image est nécessaire, ce paquet la récupérera à partir du local plutôt que de le télécharger à partir d'Internet. Donc c'est le paquet R. C'est cette dépendance que j'utiliserai. Allons l'installer. Vous devez simplement écrire une image de cache. Donc je suppose que je devrais encaisser l'image du réseau, toute l'équipe. Et le premier est ce dont nous avons besoin. Il suffit de le copier, de le coller dans le spectre au Yémen. Maintenant, il est temps que nous implémentons également la mise en cache d'image. Puisque nous devons montrer un détenteur de place pendant que nous récupérons des images lors de l'utilisation de réseau CAS, quel plug-in. Ce titulaire de place peut être de n'importe quel widget tel que texte, circulaire, indicateur de progression, etc. Mais je préfère l'image AMI comme espace réservé. Donc simplement, je vais aller dans le navigateur, puis les images et écrire l'image de l'espace réservé. Et après cela, je vais juste télécharger une des images. Supposons que j'aime celle-là. Je vais le dire parce que je ne veux pas d'arrière-plan transparent. Donc celui-ci, je vais juste le sauver et nommer ceci, trouver un détenteur de place. D'accord ? Il a été téléchargé maintenant puisqu'il s'agit d'un acide. Nous devons donc le mentionner dans notre YAML. Avant ça. Allez dans ce répertoire. Et dans le répertoire racine, créez simplement un dossier appelé images. Nous allons copier et coller l'image téléchargée. Celui-ci va juste aller aux images et télécharger collé. Et pour s'assurer que c'est l'être. Mis à jour dans notre application inondée, vous devez aller à Pub spec dot fichier YAML. Ci-dessous, nous avons ces actifs qui sont commentés. Il suffit de le décommenter et de s'assurer que vous n'appuyez que deux fois sur Retour arrière car ce fichier est prêt, sensible à la casse. Et je vais simplement écrire que nous dans le dossier racine nous avons ces images. C' est ça. Maintenant, cette connexion image mise en cache accepte les amateurs de voyage. L' un est l'URL de l'image que cette URL de l'image qui doit être mise en cache. Le deuxième est le détenteur de place. C' est ce widget et l'engage l'espace avant le chargement de l'image. Et cette cible est n'importe quel éditeur d'adder que nous avons fait sera affiché s'il y avait une modification téléchargeant cette image. Alors allons-y et mis en œuvre. Première chose, je vais juste importer des réseaux de trésorerie, qui à tout le haut. Voyons voir. Ils ne devraient montrer aucun éditeur. D'accord. Maintenant, à l'avenir, nous allons apprendre à l'intérieur de cet enfant. Au lieu d'écrire une image réseau amazed.net. L' URL de l'image sera la suivante. Mais les autres propriétés, comme je l'ai mentionné, il y a un détenteur de place, qui est une fonction ayant le contexte et l'URL. Et je relie l'image, les images de points. Placez le support point JPEG. Vérifions si ce sont les images de fichier que l'espace réservé point JPEG. Et dans le widget de l'éditeur, je vais simplement montrer. Je vais simplement montrer. Je peux, je peux commencer Adder. C' est ça. Rien de bien pour ici. C' est ainsi que nous implémentons l'image de réseau de cache. Maintenant, je voudrais partager, vous montrer la sortie quoi et pourquoi nous utilisons cela. Alors maintenant que le moment où il sera chargé, attendez juste quelques secondes et voyez qu'il se charge. Et évidemment, nous obtenons cette erreur juste pour cette raison que nous n'avons pas commencé notre application. Faisons-le. Il suffit de cliquer, puis de recommencer le débogage. Nous avons donc notre application en cours d'exécution. Voyons maintenant si l'image réseau gash fonctionne ou non. Vérifions ça et voyons, c'est de ça que je parlais. Et, et la transition était si lisse. Donc, c'est juste un détenteur de place ou vous pouvez dire une sorte d'effet que l'utilisateur reçoit des commentaires et il attend que les données soient déclenchées. Donc, c'est une utilisation de l'image de réseau de trésorerie. Et maintenant, pour la deuxième fois, quand nous actualisons ces données ne seront pas récupérées à partir d'Internet. Il sera utilisé à partir du cache, qui est déjà là. Et c'est pourquoi c'est si rapide. Au premier atome. Il semble a posteriori seconde maintenant juste pris 1 seconde. J' espère donc que vous avez beaucoup appris dans cette session parce que la compression et cache sont deux sujets importants lors de l'utilisation de n'importe quel type de téléchargement de fichiers. Donc c'est tout pour cette vidéo. Merci. 21. Vidéo 83 Télécharger plusieurs images: Bonjour. Jusqu'à présent, nous ne faisions que télécharger une seule image. Mais aujourd'hui, nous allons apprendre à télécharger plusieurs images. Parce qu'il peut y avoir des scénarios selon lesquels l'utilisateur souhaite ajouter plusieurs images et ne pas perdre son temps. Il suffit de sélectionner une image , puis de charger, puis d'attendre. Il s'agit d'un processus très long et long. Donc, v devrait toujours être pour plusieurs images dans de tels scénarios. Donc, tout d'abord, je vais simplement supprimer ces images précédentes. Ensuite, je vais vous montrer à nouveau comment les sélectionner ensemble, puis les télécharger. Maintenant, créons un troisième bouton ici, qui dira qu'il s'agit de plusieurs images, sorte que nous avons trois options. Juste à titre de référence, nous faisons ainsi. Allons sur notre écran de téléchargement d'image. Ensuite, nous avons la colonne ici. Ensuite, la première chose est la rangée. Et en dessous de la rangée, j'aurai une boîte de taille. Il doit être dimensionné boîte et ensuite une hauteur de 30. Ensuite, j'ai ici une icône de bouton surélevée que je peux, nous pouvons choisir. Je peux pointer l'image et étiqueter plusieurs images comme celle-ci. D'accord ? Après cela, je vais juste réduire un peu cette hauteur. Et puis sauvegardez-le. Jetons un coup d'œil. Vous voyez, nous avons également ce bouton d' images multiples. Maintenant, procédons aux modifications ou créons une nouvelle fonction qui aura plusieurs images. Marquez en dessous de cette image sélectionnée qui télécharge l'image, je vais simplement créer une nouvelle fonction. Il renverra un vide et le nommera. Téléchargez plusieurs images. Disons. Encore une fois, créez un sélecteur d'images de sélecteur. Plus tôt, nous avions ce fichier exe. Mais pour l'instant, nous aurons une liste de x phi. Parce que nous obtiendrons plusieurs images qui apparaîtront dans une liste. Comme les grandes images sont équivalentes à attendre. Cueilleur. Choisissez plusieurs images. Ici, vous pouvez voir que notre sélecteur d'images nous offre plusieurs options. Nous pouvons choisir une image, nous pouvons choisir plusieurs images ainsi que nous pouvons également choisir des vidéos. Mais pour l'instant, notre objectif est de choisir plusieurs images. Après cela, nous allons simplement vérifier s'il n'est pas nul. Cela signifie que l'utilisateur n'est pas revenu en arrière. Si c'est nul, je reviendrai juste null. Si ce n'est pas le cas, je mettrai l'état à chargement est égal à vrai. Ensuite, je passe en boucle toutes les images choisies. Je vais donc écrire le point Future pour chacun. Dans ce cas, l'avenir sera comme ça. C'est-à-dire que nous devons passer en boucle tout cela. Et à partir de là, nous obtiendrons X-Files. Et je vais juste le nommer image. Alors, faisons en sorte que c'est une fonction sinc. Ici. Ici, nous devons le faire, nous devons télécharger ce fichier image. De même, comme nous l'avons fait dans l'image Upload, comme le nom du fichier et le fichier image. Je ferai la même chose ici. Je vais simplement écrire. Le nom de chaîne est égal au nom du point de l'image. Et puis chaque niveau de phi image phi est égal à l'image de fichier. Mais pour le moment, je ne compresse pas l'image car nous savons déjà comment le faire. instant, mon objectif est de m' assurer que notre menton et notre menton fonctionnent. Prenons un bloc de capture d'essai. Quand ils disent imprimer. Et dans cet essai, je vais simplement faire notre référence de stockage Firebase, nom, notre fichier point et maintenant notre fichier image, comme ceci. Et après tout, chaque boucle est terminée. Après cela seulement, je remettrai cet état, en chargeant sur false. Et puis je montrerai un foulard qui fait partie de l'image. Cette image est téléchargée. Le sexe n'est que comme ça. D'accord ? Notre fonction est prête. Maintenant. Allons-y et en appuyant sur notre bouton, exécutons-le. C'est-à-dire que nos fesses sont là. Je vais juste l'exécuter comme ça. Épargons et essayons. Si ça marche. Génial, j'ai lu que c'est là ? Je vais cliquer dessus. Il y en a. Je vais sélectionner ces deux images, puis cliquer sur Ouvrir. Chargement argenté. Il y en a. Toutes les images téléchargées avec succès ? Et nous avons eu notre image. Certainement, il fonctionne également dans Firebase. Ils sont téléchargés. Nous pouvons voir d' ici seulement que c'est qu' il est récupéré avec succès. C'est ainsi que vous implémentez plusieurs images dans le stockage Firebase. C'est ça. Nous avons tout appris concernant le téléchargement d'images et la mise en cache des données, comment les compresser, beaucoup de choses. Dans la vidéo suivante, nous allons également implémenter cette même fonctionnalité dans notre application Node. Merci. 22. Téléchargement d'une image de 84 dans l'application Note: Bienvenue de retour. Nous avons maintenant appris comment utiliser le stockage Firebase. Il est temps d'implémenter cette même fonctionnalité dans notre application noeud. Cette application avec une construction très bizarre jusqu'à présent dans l'authentification ainsi que dans une section Firestore. Tout d'abord, faisons de l'écran d'accueil l'écran initial dans main.out. Alors endettés, nous pouvons voir notre application. Créons maintenant une fonction pour sélectionner Image, puis la prévisualiser avant de télécharger le fichier. Dans les sections précédentes, nous avons appris que nous ne faisions que télécharger l'image en cliquant sur un bouton. Mais maintenant, nous allons apprendre à sélectionner une image. Ensuite, l'utilisateur peut voir l' aperçu de ce qu'il a sélectionné. Et si nous cliquons sur le bouton Soumettre , seule cette image sera téléchargée dans le stockage. Accédez à l'écran Ajouter un nœud. Ici. Créons quelques variables. Le premier sera déposé. Il s'agit d'un fichier image. Au début, il sera nul. Et le second sera la chaîne, qui sera le nom du fichier. Et au début, ce ne sera pas non plus. Nous savons déjà que ces deux-là sont nécessaires lorsque nous téléchargeons une image. Créons maintenant la fonction. Fonction vide. Nommez-le. Chargez une image. Il s'agira d'une synchronisation. Ensuite, nous devons d'abord créer une instance de plugin de sélecteur d'images. Ensuite, nous avons notre x phi big image est égale à attendre. Cueilleur. Choisissez une image. La source sera émise au point source. Comme lorsque nous choisissons images, il est évident que nous parcourons la galerie. Ensuite, nous aurons une déclaration if dans laquelle nous vérifierons si elle est nulle ou non. S'il n'est pas simplement renvoyé d'ici, il est connu pour exécuter cet autre code. Si ce n'est pas le cas, nous allons simplement dire que fichier d' état nom du fichier d' état par variable de nom est égal au nom du point d'image, et image phi est égal à File et Image.all part. Nous allons donc attribuer ces valeurs à cette variable. Et vous pensez peut-être pourquoi j'ai écrit cette variable ici et non dans la fonction. Moi, parce que je veux utiliser cette variable sur tout l'écran. C'est-à-dire que je souhaite créer un bouton Charger une image. Nous prenons l'opérateur ternaire pour afficher une image au lieu du bouton lorsqu'elle n'est pas nulle. Et s'il est nul, c'est-à-dire si l'utilisateur n'a sélectionné aucune image. Dans ce scénario, affichez le bouton Télécharger, et non l'image. Allons-y et voyons de quoi je parle. Ici. Chez cet enfant, nous avons une colonne dans laquelle les enfants se trouvent tout en haut. Prenons un conteneur. La hauteur du conteneur doit être de 150. Ensuite, dans cette timide, j'aurai deux choses. La première chose est que si le fichier image est égal à null, alors je vais afficher un centre. Et à l'intérieur de la cellule, il y aura une icône. Ce sera, je peux commencer, une image. La taille sera de 100. Et si ce n'est pas le cas, il y a néanmoins une certaine valeur. Je vais juste, je montrerai ensuite une image qui est une image.Tout. Et maintenant, je vais montrer le fichier car il est stocké dans ce fichier. Ici, je vais juste dire un fichier image comme celui-ci. Et cela montre que cela peut être nul. Je vais donc juste entrer ce chèque nul. Autrement dit, Shores veille à ce que ce n'est pas nul. Et sous le conteneur, nous avons une boîte de taille. Boîte de taille de hauteur. Essayons maintenant si cela fonctionne ou non. À voir. Puisqu'elle est nulle, notre icône s'affiche et elle est très belle. Maintenant, si je clique dessus, désolé si j'ai cliqué dessus, je dois faire envelopper ce conteneur avec un widget appelé Inkwell. Et ici, dans la fonction d'onglet, je vais écrire l'image de téléchargement. Il s'agit évidemment d'une étape très importante. Encore une fois, allons vérifier quand je clique dessus. Voyez-vous, c'est là. Maintenant, si je clique sur cette icône, voyez qu'elle est en cours de prévisualisation. instant, il n'est pas téléchargé sur Firestore, c'est juste un aperçu. Maintenant, cette partie est terminée. Maintenant, apportons les modifications afin que nous puissions ajouter lorsque Ajouter une note est lue, puis la première image est téléchargée, puis ces données sont indiquées dans Firestore. Donc, ici, dans le local, nous avons ceci. Sinon, dans la première condition, je vais simplement ajouter un fichier image. S'il est nul, n'écrivez que l'alpha. C'est suffisant. Mais parce que je veux que l'image soit remplie. Maintenant, dans l'autre. Essayons de le faire. Tout d'abord, créons notre instance de stockage Firebase que dans la référence. Et la référence sera le nom du fichier. Ensuite, mettez le fichier. Et nous avons notre fichier image. Ici. Encore une fois, nous devons faire null car cela affichera une erreur indiquant que le fichier peut être null. Mais nous allons simplement écrire cette exclamation pour nous assurer que le fichier ne suffit pas. Et de toute évidence, nous avons également fait la vérification nulle ici. Donc, une fois ce fichier exécuté, ce que je veux, c'est que je n'ajouterai que ce point. Ensuite. Ici, je vais récupérer le résultat. Dans ce résultat, je retournerai simplement URL de téléchargement de points, de ref, de points, car nous avons besoin de cette URL pour qu'elle soit stockée dans notre base de données Firestore avec toutes ces informations. Quand nous le retournerons, je l'attraperai ici. Je vais juste écrire une image. C'est déjà une ficelle. L'URL de l'image est conforme à cela. Et après cela, ce que je veux, c'est que lorsque nous insérons un nœud, nous voulons également que cette URL d'image soit envoyée. Donc ici, je vais tout d' abord imprimer l' URL de l'image et l'enregistrer car je vais vérifier si elle fonctionne ou non. Jusqu'ici. J'irai ici, je vais sélectionner, je sélectionnerai cette image ici. Je vais juste les écrire ou le flotter. Je le supprimerai plus tard. Et une description comme celle-ci, et il suffit d'ajouter des notes. Et voyez dans l'impression que quelque chose est stocké dans le stockage Firebase. Cela signifie qu'il fonctionne bien. Maintenant, ce que je veux, c'est que lorsque nous insérons un nœud, je veux également que cette valeur soit envoyée. C'est une URL d'image comme celle-ci. Et évidemment, dans notre nœud d'insertion, il n'était pas mentionné dans ce paramètre. Je vais donc juste le mentionner ici, comme une image de chaîne. Et puis j' ajouterai une nouvelle valeur d' image, une image comme celle-ci. D'accord ? Maintenant que nous modifions les données de nos nœuds, mais nous devons absolument aller à notre classe de modèles et les modifier ici également. Donc, ici aussi, il suffit d' écrire une image de chaîne. Ensuite, nous avions besoin de cette image de point. Et puis dans le modèle ici, à droite, cliché ici, image. Parce que c'est une chose très importante à faire. Maintenant, montrons l'image du nœud, c'est-à-dire un nœud avec toutes les images ici également. Tout d'abord, je supprimerai toutes les données qui sont déjà présentes car elles afficheront un ajout. Sinon. Allons supprimer tout ce qui se trouve dans le stockage basé sur le feu. Oui. Supprimez les deux. Et aussi dans le stockage. Je voudrais tout supprimer et commencer par tout ce qui est nouveau. Allons-y et je vais le montrer. Mais avant cela, apportons ces modifications à notre style de liste dans l'écran d'accueil. Lorsque nous y allons, nous avons ce style de liste ici. En tête de file. Dites simplement l'image du réseau invité. Dans l'URL de l'image, il suffit d'écrire une image de point de nœud, comme ceci. Et cela a ajouté de la rigidité. C'est-à-dire que nous avons l'image de notre réseau de trésorerie. Ici. J'ai l'URL de l'image comme celle-ci. espace réservé sera alors contextuel. Vous êtes là. Et il suffit de tirer le jeu de points d'image et images slash point d' espace réservé JPG. Et dans ce widget ajouté, encore une fois, je vais simplement écrire le contexte dans lequel vous vous trouvez. Et puis j'écrirai une icône ici à la place. Et ici, une autre pandémie s' y ajoutera. D'accord ? Et après la flèche, tout comme la largeur de 70 à cette image et l' ajustement du couvercle des pieds de boîte. Bon, nous avons tout ce code DD. Maintenant, testez notre application. Marquons. Au départ, nous n' avons aucune note. Allons insérer notre premier. Et on va juste écrire Steve Jobs biographie de Steve Jobs sur sa formidable réussite. Voyons voir, ici. Nous avons également l'image. C'est ce dont je parlais. Si nous allons en ajouter un autre qui est Firebase, et que je vais simplement écrire, apprendre , Firebase, services backend maîtrisés. Et puis sauvegardez-le. Et voyez ici également les images du risque d'incendie. C'est pourquoi j'ai mentionné cette largeur parce que je veux que tout soit correctement aligné. C'est tout pour ce module également. Merci de vous être joint. Nous avons beaucoup appris sur Firebase et sur les produits. Merci.