Transcription
1. Introduction: Si vous connaissez les bases Alda de Flutter et Firebase, si vous déjeunez seul. Donc, après cela, la prochaine étape sera de postuler pour votre premier entretien d'embauche. Et vous avez votre CV prêt là qu' un recruteur vous demandera de leur montrer quelques projets pratiques en rouge,
parce que sur la base de la dette seulement ils jugeront votre ensemble de compétences. Donc, dans ce cours, vous apprendrez à construire une application de chat de base avec Flutter et Firebase comme back-end. Ce cours est destiné aux débutants qui sont nouveaux dans les projets d'application du monde réel. Les gens qui savent que base un flottement, mais veulent construire quelque chose à partir de zéro pour pratiquer tout ce qu'ils ont appris jusqu'à présent. J' espère que vous allez profiter de ce cours et obtenir votre travail de rêve dans votre entreprise de rêve.
2. Créer un nouveau projet: Salut, bienvenue à ce cours où nous allons construire une application de chat de base en utilisant Flutter et Firebase. Certains avant d'aller de l'avant, je suppose que vous avez obtenu des concepts de base précédemment effacés, tels que sombre, plus plat et comment
implémenter l'authentification Firebase et utiliser la base de données Firestore également. Parce que dans ce module, nous ne parlerons que de ces concepts intermédiaires parce que nous allons construire une application de chat complète. Et pour cela, vous devez avoir vos bases de lecture. Certains sans perdre plus de temps. Je voudrais commencer par créer un nouveau projet. Alors allons au dossier. Et ici, j'utiliserais la ligne de commande et vient de mourir Flutter. Créez une application de chat comme celle-ci. Donc, cela va créer notre nouveau projet plus plat. Donc oui, c'est notre application de chat. Maintenant, il suffit d'afficher votre code VS et d'ajouter votre projet ici. Ok, c'est fait. Il suffit donc de supprimer ce fichier de test. Maintenant, je n'aurai pas seulement appris dans mon émulateur en ce moment, je vais d'abord créer mon projet Firebase. Alors allez sur firebase dot google.com et cliquez sur aller à la console. Ensuite, il suffit de cliquer sur Ajouter un projet et lui a donné un nom. Je vais nommer l'application de chat inondé. D'accord. Et puis continuez. Je n'activerai pas Google Analytics pour l'instant. Puis cliquez sur le bouton Créer un nouveau projet. Et puis cela ne prendra que quelques secondes. Voir mon nouveau projet est prêt. Cliquez ensuite sur Continuer. Alors. Ici, nous sommes navigués vers ce tableau de bord Firebase. Ici vous pouvez voir les autres options comme ce stockage de base de données d'indication hébergeant un hibou. Et très milieu, vous pouvez voir commencer en ajoutant Firebase à votre application. Nous devons donc configurer Firebase avec notre application de flutter. Et je vais configurer une version Android. Donc, il suffit de cliquer sur l'Android. Ici. Vous verrez les autres options qui sont les compétences technologiques. Le premier est le nom du paquet Android que vous pouvez trouver. En accédant au dossier Android, puis à l'application, puis à la source. Ou vous pouvez également aller à l'intérieur de l'ID Android est ce bâtiment. Et ici, vous pouvez aller voir cette configuration par défaut et votre ID d'application. Cette diapositive, ceci ici. Vous pouvez le nommer n'importe quoi. Je le nommerais app chat. Ensuite, puisque nous allons utiliser l'authentification de connexion Google. Nous devons donc utiliser notre certificat de signature de débogage pour cela. Pour obtenir votre certificat de signature de débogage, vous devez obtenir la clé SHA-1 de votre appareil. Pour cela, ajoutez simplement un nouveau répertoire, c'est le répertoire système. Allez dans le dossier C. Très étrange. Et écrire des identités de fichiers que nous avons fait à l'intérieur des fichiers de programme, vous devez aller à Android, puis Android Studio et JRE, Dann bin. Et ici. Vous devez sortir leur ligne de commande. Maintenant. Vous avez juste à coller cette ligne de code ici. Si vous le souhaitez, vous pouvez simplement mettre la vidéo en pause et obtenir la clé SHA-1. Une fois que vous l'avez tapé et appuyez sur Entrée. Vous obtiendrez votre clé SHA-1 à partir d'ici. Il suffit de le copier. Et puis, puis collez-le dans cette section de certificat de signature de débogage. Et puis cliquez sur S'inscrire. Encore une fois. Cette clé est utilisée pour aller bien, indication des phonons de connexion à ce genre de fins. Maintenant, vous devrez télécharger ce fichier de configuration. Ceci est important car il contient les clés APA et les informations critiques à utiliser par Firebase. Il suffit de le télécharger et ensuite aller à ce dossier poids en cours de téléchargement. Coupez-le de là. Maintenant, dans votre dossier Android de projet de flutter CO2, puis à l'intérieur du dossier de l'application, et ici coller votre cocu services.js et le dépôt. Ensuite, cliquez simplement sur Suivant. Maintenant, nous devons faire quelques configurations Firebase dans notre projet Florida. Copiez cette ligne de code de la partie de classe. Et dans votre dossier Android, nous avons un fichier Gradle build-up à l'intérieur que juste ceci ici. Ensuite, à l'intérieur du dossier Android, puis à l'intérieur du dossier de l'application, nous avons un autre fichier où nous devons payer cette ligne de code. Allons ici. Vous pouvez voir ici, collez-le ici, puis copiez ceci, appliquez le plugin et collez-le à la toute fin. En outre, une chose que vous devez faire est ici, multi ydx dy, dx activé pour ce code est nécessaire lorsque nous traitons avec Firebase. Donc, vous devez vous en souvenir, toujours. Ensuite, cliquez simplement sur Suivant, puis nous cliquons sur Continuer à la console. Nous sommes navigués jusqu'à la console Firebase. Et ici, notre application Android est prête à travailler. Maintenant, avant d'exécuter notre application dans l'émulateur, nous devons faire quelques configurations ici. Donc il suffit de mettre deux points principaux, le fichier
point et ici faire la fonction principale comme un évier. Et puis à droite, dendrite cette ligne de code. Tout d'abord, liaison de données rigide et courte initialisée. Vous devez donc écrire cette ligne de code. Cela prend un certain temps pour leur liaison qui assure initialisation de ceci et ensuite simplement itérer le point firebase. Nous devons d'abord importer Firebase aussi. Mais comme vous pouvez le voir, avant d'importer Firebase, nous devons écrire ce fichier de spécification de dépendances point YAML. Donc, pour cela, le coût d'accès à n'importe quel paquet externe, notre fonctionnalité, nous devons utiliser des dépendances. Donc, d'abord, il a été appelé, deuxième était Firebase. Et puis puisque nous utilisons vraiment la connexion Google via, nous allons utiliser cette jambe en Israël. Et la dernière chose est le nuage Firestore. Ce sont donc les paquets requis. Copiez simplement ce paquet, allez dans le fichier et collez-le ici. Ensuite, copiez, collez, puis connectez-vous à Google, copiez et collez. Et enfin, notre Cloud Firestore. Ces dépendances sont requises. Et tous ces plugins de fibres sont collectivement appelés Flutter. Vous pouvez simplement rechercher ce terme et vous trouverez toutes ces dépendances. Maintenant, allez au fichier point principal. Et écrivons, nous allons initialiser notre Firebase. Et ici, nous avons le commerce attendent. Firebase dot initialise qu' il sur que les configurations sont faites correctement. Maintenant, si vous voulez, nous pouvons juste, nous pouvons juste exécuter l'application dans l'émulateur et également assurez-vous d'indiquer que vous activez la connexion Google. Configurez donc la connexion Google. Et ici, dans ce troisième, vous avez ce désactivé, il suffit de l'activer. Et je sauverais. connexion Google
est maintenant activée. De même, vous devez l'activer via Google, Firestore aussi. Donc ici, il suffit de cliquer sur Créer une base de données, puis
choisissez, choisissez un emplacement et vous le faites dans ce témoignage et alphabet, vous serez envoyé à ce nuage Firestore console Israël. Donc c'est tout pour cette vidéo. Assurez-vous que vous commencez à déboguer parce que comme cela prendra un certain temps, je voudrais arrêter la vidéo ici afin qu'elle ne perde pas notre temps et que nous puissions continuer dans la vidéo suivante. Merci.
3. Créer l'écran de Auth: Salut. Dans cette session, nous allons construire un écran d'authentification. Parce que avant d'aller à l'intérieur des maisons propres sont l'écran de chat certainement l'utilisateur doit créer un compte. Jusqu' à présent, nous allons créer un dossier à l'intérieur de notre plume et nommez-le écrans. Et à l'intérieur, créez le fichier appelé ARP, point de
rate, comme ceci. Donc, comme d'habitude bord Matériel. Et puis créons un état pour connexion et noms de l'échafaudage. Depuis Vardy, j'aurais pillage. Et puis, dans cet enfant, prenons une colonne. Donc, ce que je prévois simplement de faire est de créer que ce premier doigt sera un logo. Cela alors, après il y aura le nom de l'application, puis un bouton appelé signature avec Google. Cela dit, c'est pourquoi je les utilise. Utilisation de cette colonne dans la coelom. Prenons un conteneur. Les moustiquaires ont une décoration de boîte de décoration. A l'intérieur. Je voudrais voir l'image de collision d'image. Et maintenant dans ce, l'image de collision lorsqu'il est donné widget d'image réseau. Ainsi, vous pouvez simplement ouvrir votre navigateur. Vous pouvez discuter, le logo de chat, supposons l'icône de chat, comme ceci. Vous pouvez juste, et puis il y aura beaucoup d'options. Vous pouvez choisir ce que vous voulez. Ce que je vais faire, c'est juste attendre, laissez-moi vérifier si j'ai ce que je veux. Donc, je vais juste utiliser le mien, que j'ai déjà utilisé auparavant. Vous pouvez simplement cliquer avec le bouton droit de la souris et cliquer sur Copier la robe immédiate, puis la coller ici. Rendre cela simple comme ça. C' est donc l'écran d'art. Allons au principal. Jack. Nous passons à ce code précédent. Dans la maison. Faire l'écran impair est l'écran initial comme ceci. Et puis voyons. Est-ce qu'il montre des images montrant ou une erreur ? Il y a ? C' est vérifier. Je suppose. Ce que je peux faire est de supposer que si je donne élargi, alors voyons ce qui se passe. vois, parce que évidemment tu devrais donner une certaine hauteur à ce conteneur. J' ai donc donné des moyens étendus, prenez tout l'espace disponible dans cette colonne. C' est donc le sens lambda. Après ce widget développé. Et nous allons avoir un texto et inonder le hangar. Et donnons un peu de style. Taille étrangère, 36, poids de la police, poids de la police, gras. Sauvegardons ça et voyons. Depuis que j'ai utilisé élargi, il a
donc juste poussé vers le bas et enquêter sur l'espace ici. Après cela, nous devons créer une signature avec le bouton Google. Faisons-le. Ne nous sommes pas soulagés. Mais alors sur viscéralement par défaut maintenant activé juste pour l'interface utilisateur. Et au sein de cet enfant, créons un rôle afin qu'ils puissent être imagés ainsi que du texte. Faisons en sorte que le principal existe. Je veux dire ce centre et ces enfants. La première chose dont j'ai besoin est imagée pas réseau, puis obtenir un logo Google. Je voudrais juste copier mon propre image, mais vous pouvez simplement aller à Chrome comme habituellement chercher l'image et copier son adresse et le coller ici comme ceci. Et à cette image, Donnons-lui une hauteur. Hauteur de 36. Troisièmement, cette image dans cette rangée, nous aurons une taille de 10 afin qu'il y ait un certain espacement entre leur logo. C' est l'image et le texte est le texte. Et x signera avec du glucose. Donnons un peu de style, style
de base comme toujours. Alors. Nous aurons une taille de police de faire D. Et cela dit, sauvegardons et vérifions. Quelle est la sortie. Vous voyez, nous avons ce logo et nous avons ce bouton. Tout d'abord, je nous donnerais un peu de rembourrage à ce bouton. Allons et puis l'envelopper avec Berlin et donner l'ajout non symétrique. Et puis horizontalement. Alors quel autocollant, vif deux en d. Voyons voir. Joliment, au moins décent. Alors ce que je vais faire est à ce bouton. Ici, je vais donner un peu de style à ce bouton. Style. Mais ensuite style. Désolé, ça devrait être juste Merton vicié comme ça. Et puis à l'intérieur jamais donné la couleur de fond, mon état a mis le point, puis le moins noir et puis un peu de rembourrage. Donc plus de literie peut dire. Vérifions parce que le rembourrage nécessaire pour s'assurer que ce bouton ne l'est pas. Mais ne sommes pas si étroit, alors donnons-lui un peu de rembourrage aussi. Atteint la propriété d'état ADA sur les encarts de bord, pas symétrique. Et puis seulement la verticale. Donnons 12. Vérifions C. Maintenant, cet écran d'accueil, désolé, l'écran étrange est parfaitement bien. Et juste à nouveau je suis élargi à cause de cette expansion, il a pris moins d'espace jusqu'ici. Et puis les autres widgets, cela signifie
que le texte et le bouton sont poussés vers le bas. Donc oui, c'est tout pour cet écran d'authentification. Dans la vidéo suivante, nous allons implémenter la fonctionnalité de connexion Google.
4. Appliquer Google Sign: Maintenant, la partie de l'interface utilisateur est terminée. Il est temps de travailler sur la fonctionnalité de signature Taco Bell. Jusqu' à présent que dans le fichier des arts verts, je vais simplement aller au sommet. Et d'abord, je créerais une instance de signature Google. Donc, il sera cocu signature est égal à se connecter comme ça. Et puis après, je créerais une affaire d'instance Firebase par un magasin qui est d'abord à la base de données aussi. Parce que je stockerais aussi les données de l'utilisateur dans Firestore. Il s'agit de toutes les données d'authentification. Donc, après cela, créons notre futur nom de fonction est la fonction de signature. Ce sera un sinc. Et c'est la procédure qui est, ce code est fixé pour la calcination. Attendez. Allez calciner les points de connexion. Donc, cela va apparaître menu. Vous pouvez choisir votre compte. Vous pouvez cliquer sur le bouton Précédent, et ce courant sera nul. Dans ce cas, j'ai fait cette vérification de sorte que si l'utilisateur clique sur se connecter avec Google mais ne choisit aucun compte et retourne directement en arrière, alors le code ci-dessous ne sera pas exécuté. Après ça. Allons un 10 pourri. Google est égal à attendre, utilisera dot-dot-dot pourri comme ceci. Alors laissez-moi avoir le jeton d'accès dont j'ai besoin pour le contrôler. Et puis c'est comme ça que notre justificatif. Et je vais fournisseur. Crédits d'identification. Ici. Il accepte le jeton d'accès et il liera Google Art. Juste te faire sourire. Va aller jeton d'accès
, puis le jeton d'ID dans le jeton d'ID de cookie. Alors ce qu'on doit faire. Maintenant, nous devons également utiliser l'instance d'art Firebase. Donc, je vais simplement écrire les informations d'identification de l'utilisateur. L' utilisateur peut alors partager est égal à attendre. Instance point de Firebase. J' ai créé l'instance ici uniquement, mais je signe avec des informations d'identification. Et vous devez passer les informations d'identification. Mots simples, ce code était nécessaire pour obtenir l'authentification ou les informations d'identification de Google. Et après cela, nous utiliserons cette ligne de code afin que notre propre authentification Firebase puisse accéder à ce compte et stocker les informations. Maintenant, nous avons réussi à nous connecter. Mais ce que je veux faire, c'est que je veux créer ou enregistrer ces données, la base de données Firestore aussi. Ainsi, vous pouvez simplement écrire une collection de magasin de feu de
poids. Je créerais une collection appelée Users dot DOCX. L' ID du document peut être des informations d'identification de l'utilisateur point UID. Et il montre cela parce qu'il ne peut pas être laissé Nelson en utilisant cette exclamation et en assurant qu'elle ne sera pas nulle. Et puis cette méthode d'ensemble. Faisons-le. La première chose que je stockerais est que l'e-mail, simplement les informations d'identification de l'utilisateur tardif, e-mail de l'utilisateur Et comme toujours, vous devez l'utiliser. Ensuite, j'écrirais le nom, les informations
d'identification de l'utilisateur. L'utilisateur. Nom d'affichage des points. Alors je sauverais cette image. Et les Canadiens immédiats utilisateur point d'identification utilisateur. Pour une URL. Ensuite, ce sera UID. Uid sera l'UID utilisateur d'informations d'identification utilisateur. Et la dernière date à laquelle ce compte a été créé ? La date, l'heure. Mais maintenant, nous avons notre fonction prête. Essayons ça. Mais d'abord, assurez-vous que nous appelons cette fonction dans notre bouton sur pression. Donc, écrivez simplement sur cet évier et attendez la fonction de signature comme ceci. Donc, cette fonction a été appelée. Maintenant, vérifions si cela fonctionne ou non. Notre Firebase est prête. Maintenant, si je clique dessus, il pourrait me demander si il peut il sera directement oui, Il m'a demandé. Je vais donc cliquer sur Mon compte. Et évidemment, en ce moment, on ne navigue nulle part. Mais vérifions s'il a été enregistré ou non. Tu vois, ça a été sauvé. Et dans ma base de données Firestore. Ici aussi, les données ont été enregistrées correctement. Le nom de l'image e-mail UID, et maintenant tout fonctionne bien. Juste une chose, une chose que je dois m'assurer que supposons que l'utilisateur se déconnecte et puis il, s'il clique sur la signature avec Google à nouveau, alors ces données seront vers mis à jour à nouveau dans ce qui se déclenche à la base de données, qui signifie simplement, supposons lors de l'utilisation de l'application de chat, l'utilisateur modifie l'image. Dans ce, dans notre application inondation, qui est l'image. Mais si elle sort et cliquez sur se connecter à nouveau avec Google, puis à nouveau, cette image sera changée à l'image par défaut de quel compte Google être parce que nous n'avons pas fait de vérification. Donc, la première chose que je ferais vérifier que instantané des
documents sera un type de données et l'utilisateur d'écriture existe, qui implémente si l'utilisateur existe dans la base de données. J' aurais eu des utilisateurs de collection. Mais l'ID de document et de document sera l'identifiant de l'utilisateur point point utilisateur, point
UID point obtenir comme ceci. Et cet UID devrait être sûr qu'il n'est pas nul. Maintenant, cela va aller à ce fichier stocké ici, vérifier si l'utilisateur a déjà enregistré ou pas précédemment. Donc après cela, nous pouvons simplement faire un if, vérifier. Si l'utilisateur existe, point existe. Si l'utilisateur existe, alors nous pouvons simplement imprimer pour notre débogage que l'utilisateur existe déjà dans la base. Mais si ce n'est pas ça la première fois pour cet utilisateur, alors nous pouvons créer une nouvelle entrée dans notre Firestore. Donc cette chose était très importante. Maintenant, supposons que si je clique sur la connexion avec Google, encore une fois, voir l'utilisateur existe déjà dans la base de données. Donc, au moins, les données précédentes ne sont pas en cours de mise à jour. Notre poussé avec force à la même ID de document. Maintenant, notre connexion Google fonctionne parfaitement. Mais une fois que l'utilisateur se connecte, nous devons nous assurer que nous naviguons vers l'écran d'accueil et
ne pouvons pas non plus manger puis revenir à notre écran jusqu'à ce que nous nous déconnections manuellement. Nous devons donc vérifier l'état étrange de Firebase. Mais avant. Créons un fichier à l'intérieur du répertoire des écrans et nommez-le écran d'accueil. Dot, point. Comme ça. Oui, importons notre paquet de matériel. Allons obtenir cet état de connexion gratuit. Nommez-le écran d'accueil. Et nous allons supprimer le constructeur par défaut. Ensuite, nous avons cet automne. Maintenant, dans ce bar de l'AB. Faisons simplement cela du texte. Puis centre ça à travers. Ensuite, background-color devrait choisir les couleurs commencer. D' accord ? Et ici, j'aurais un bouton qui est pour le bouton de déconnexion. Et donnez-lui juste assez. Et après la barre AB,
je donnerais un bouton d'action flottant. Et après la barre AB, Dans notre écran d'accueil. Bouton d'action flottant. Ensuite, dans cet enfant, j'écrirais, je peux, je peux commencer la recherche. Alors pourquoi j'ai fait ça, je vais vous expliquer. Laissez-nous simplement créer le CUI d'abord. Maintenant, nous avons cette interface utilisateur. Allons au point principal. Et juste pour les tests, voyons à quoi ressemble cette interface utilisateur. Maintenant, je redémarre. Et vérifions. Voir, Ceci est l'écran d'accueil de notre application de message. J' ai donc cet arbre de recherche, bouton de
recherche afin que l'utilisateur puisse rechercher ses amis dans cette application et les envoyer directement à partir de là. C' est le seul but, Le but de ce bouton. Et dans le corps, nous aurons sur ce chat que l'utilisateur a parlé. Mais il est, il sera sur la vidéo plus tard parce que maintenant, au moins il doit d'abord commencer une conversation avec quelqu'un. Alors c'est tout. Je ferais à nouveau l'écran bizarre. Maintenant, imaginez juste que j'ai enregistré l'application, mais vraiment je me suis déjà connecté, mais nous ne naviguons pas à l'écran d'accueil parce que nous ne vérifions pas l'état d'authentification de la Firebase. Donc, dans la prochaine vidéo, nous allons le faire exactement. C' est tout pour cette session. Merci.
5. Vérifiez l'état de l'authenticité: Salut. Maintenant, pour vérifier les authentifications, State v doit utiliser cette méthode utilisateur actuelle fournie par Firebase. Et en conséquence, nous montrerons cet écran si l'utilisateur s'est connecté ou non. Et passons au fichier main.js ici. abord, je créerais la fonction future, ce qui nous donnera une vierge. J' utiliserais connecté. Pourtant, je vais vérifier que l'utilisateur s'est déjà connecté. Ce que nous pouvons faire est en appelant firebase dot instance currentUser, simple que cela. Ensuite, je vérifierais si l'utilisateur n'est pas égal à null. Puis retourner l'écran d'accueil. S' il est nul, c'est-à-dire qu' EA n'est pas connecté en ce moment. Puis fait l'écran d'art, disons. C' est donc la fonction requise. Maintenant, nous allons implémenter dans la propriété de la maison de notre widget. Il suffit d'utiliser le futur Winder. Et ici, le futur sera connecté par l'utilisateur. Et ce constructeur nous donnera généralement le contexte. Et voir un instantané. A cela, il nous retournera un widget, comme vous le savez de la fonction. Maintenant, nous allons simplement vérifier si l'instantané a des données. Retourne les données de snapshot Cela signifie simplement qu'ils ont tendance à avoir visité. Et nous devons nous assurer de donner ces exclamations afin qu'il ne soit pas nul. Et nous menons noté que celui que nous avons fait sera au moins qu'ils sont soit à la maison ou à l'écran de doute. Donc, il ne peut pas être nul. Et si ce n'est pas le cas, alors je vais juste montrer un indicateur de progression circulaire. Et puis HF et Janice exécutent. Maintenant, sauvegardons cela et vérifions si je suis directement navigué vers l'écran d'accueil. Voir, maintenant, si je redémarre mon application, je serai navigué sur l'écran d'accueil jusqu'à ce que et à moins
que je clique dessus , cela signifie bouton lave, qui ne fonctionne pas en ce moment, mais nous devrions cliquer dessus et ensuite seulement nous devrions revenir à l'écran de connexion. Maintenant, comme nous avons ces données utilisateur provenant des incendies, c'est ces données, évidemment nous allons utiliser et partager ces données à travers l'application. Et ce sera au format JSON. C'est à 10 heures. Nous créons notre propre classe de modèle pour ces données. Donc, créons un nouveau dossier à l'intérieur de lib et
nommez-le point de modèle utilisateur, point. Ensuite, étudiez. Il devrait être nommé modèles. Et à l'intérieur, nous devrions obtenir un fichier appelé point de modèle utilisateur. Commençons à créer notre classe de modèle. Je le nommerais, utiliserais un modèle. Maintenant. Il aura maintenant des valeurs de cette classe, c'est-à-dire ces données. Alors commençons par la chaîne. Nom de chaîne, chaîne, image, horodatage, qui provient de Firebase. On peut sortir avec nous. Ensuite, chaîne UUID. Créons un constructeur qui est requis. Cela nécessitait this.name requis, cette image nécessitait cela. Et puis de même ce point UID. Donc, nous avons notre modèle prêt, mais comme vous le savez aussi que nous obtenons nos fonctions pour sérialiser et désérialiser nos données JSON. Et généralement ce point d'appel de JSON. Et tout ce concept est le concept de base de plus tard sur les modèles. J' espère donc que vous savez que ce concept de Berlin
dira juste point UserModel de JSON que je nomme. Il acceptera les documents instantané. Instantané. Alors, quel est ce document de livraison instantanée. Ces données appellent un instantané de document. Maintenant, je voudrais simplement tourner un modèle utilisateur. Maintenant, commençons par la moyenne sera image instantanée. Alors copions-le. Set peut vraiment être un nom. Et puis le nom. Évidemment, vous pouvez. Je n'ai pas donné d'ordre. J' aime juste avoir cette commande. De la même façon. Ça a l'air bien. La date, puis UID sera ID. Donc ce ne sont rien d'autre que ces clés sur l'image et toutes ces clés. Maintenant, nous allons nous assurer que nous envoyons cette classe UserModel tout en naviguant à l'écran d'accueil afin que ces données puissent être utilisées vers l'application. Mais d'abord, convertissons l'utilisateur Firebase à notre modèle utilisateur, point principal
Hutu. Ensuite, nous avons ici cette connexion utilisateur et ce type de données utilisateur qui vient de la Firebase. Donc, dans cette déclaration if, je vais simplement écrire des documents instantanés. Utilisation de données. Pour Firebase, utilisateurs de la collection de points d'instance de point
Firestore. Ensuite, simplement avec cet ID de document de uci.edu AD, je vais obtenir ces données des incendies, c'est-à-dire ces données. Auparavant, nous avions ces données, qui sont les données de l'utilisateur. À partir de là, je récupère le Firestone et je le convertis simplement en verre modèle. Et utilisez des modèles en utilisant model.fit certains JSON et envoyez ces données utilisateur, qui est un instantané de document. Et dans cet écran d'accueil, je voudrais l'envoyer lors de la navigation. Donc, à l'intérieur de l'écran d'accueil, nous devrions nous assurer que nous acceptons comme un module utilisateur. Ensuite, l'utilisateur, et nous le nommons simplement l'utilisateur. Et puis à travers ce constructeur, je l'accepte. Donc, l'erreur sera faite. Maintenant, lorsque nous nous connectons avec Google, nous avons été naviguer vers l'écran d'accueil. Et pour cela, j'utiliserais ma moyenne et c'est que je ne l'enverrai pas directement à l'écran d'accueil. Je voudrais simplement l'envoyer à mon application afin qu'il
vérifie à nouveau et récupère les données du magasin de fichiers, puis crée un modèle ou bien nous devons le faire. Encore une fois. Ce que je veux dire par là, c'est aller à point d'écran bizarre, point. Et nous n'avons pas eu de financement d'inscription pour les nourrissons. Et à la toute fin, je voudrais juste écrire Navigator, le push and remove jusque-là ici. Dans cette nouvelle route. Si j'écris la route de la page matérielle Bender
et les contacts, et si j'écris si j'écris homeschooling, voir si j'ajoute homeschooling, alors je dois envoyer l'utilisateur, qui est le modèle utilisateur. Tellement de choses que je dois faire. Mais si j'écris simplement myapp, comme ceci, si j'écris simplement mon application. Donc, il va normalement revenir à cet écran. Ensuite, il affichera un indicateur utilisateur et il obtiendra les données du magasin de fichiers et converti et finalement l'envoyer à l'écran d'accueil. C' est donc une bien meilleure approche. Nous n'avons pas besoin d'écrire le code encore et encore. Alors vérifions si je redémarre. Voyons voir. Évidemment, je ne peux pas vérifier la connexion parce que nous sommes déjà connectés. Donc, nous allons au moins créer et faire usage de ce bouton de déconnexion. Pour cela, il suffit d'aller à l'écran d'accueil. Et ici, je voudrais nous faire penser, désolé, pas cette recherche sur ce bouton icône. attente asynchrone est la déconnexion de point d'instance ahd dot. Et puis je ferais un navigateur. Mais poussez et retirez. Jusqu' à présent, je peux simplement écrire mon application sur notre écran you art parce que comme nous le savons qu'elle n'est pas authentifiée et qu'il doit aller se connecter à nouveau. Et l'aspirine ne demande rien comme paramètre. Donc ça l'est, ça ne fait aucune différence. Voyons voir. Maintenant, si je clique dessus, voir que j'ai signé, été navigué à l'écran d'art. Et maintenant, si je clique sur me connecter avec Google, voyons ce qui se passe. Et puis l'indicateur de chargement s'affichera et le médicalement j'ai été envoyé à l'écran d'accueil. C' est ainsi que fonctionne l'état. Cela signifie comment j'utilise l'état impair et assurez-vous que l'
utilisateur se connecte automatiquement, puis se déconnecte également. Donc c'est tout pour cette vidéo. Dans la prochaine session, nous travaillerions sur ce bouton de recherche afin que l'utilisateur ait la possibilité de rechercher ses amis dans cette application de chat. Merci.
6. Recherche de UI de l'utilisateur: Bienvenue. Dans cette session, nous allons simplement créer un écran de recherche pour ce bouton de sorte que chaque fois qu'un utilisateur clique dessus,
il devrait naviguer vers un écran où il devrait être en mesure de rechercher ses amis. Laissons simplement jouer un nouvel écran. Et je veux dire que nous recherchons point à l'écran. Importons notre paquet de matériel. Faites-en une région d'état. Et je recherche l'écran. Et comme je l'ai fait avec l'écran d'accueil, en naviguant vers cet écran aussi, nous aurions besoin de cette classe de modèle
que cet utilisateur UserModel. Et nous allons l'avoir dans ce constructeur. Et puis retournez un échafaudage. Ce n'est pas AB titre de la recherche de votre ami. Et puis dans le corps, ce que je prévois c'est que la première région sera juste un texte. Nous allons n'importe quel bouton de recherche, quel que soit l'utilisateur clique dessus. Et après avoir cliqué sur le bouton de recherche, alors seule la fonction devrait s'exécuter, ce que nous allons faire dans cette petite vidéo. Mais en ce moment, seule la position américaine, j'aurais besoin d'une colonne. Puis les enfants, et comme je l'ai dit, je vais utiliser le champ de texte. Donc, nous déclarons le texte en les éditant plus grand parce que contrôleur de
recherche et il ne les contrôlait pas comme ça. Et dans ce, Commençons par la ligne,
le premier élément que je veux la ligne parce que je veux les widgets Botha, widgets de la même manière horizontale. Alors, nous allons avoir ces enfants. Ensuite, un champ de texte que contrôleur serait recherché contrôleur et décoration. Donnons-lui la décoration d'entrée. Texte avec le nom d'utilisateur. Et la bordure serait décrite dans la bordure bordé de démarrage. Et à l'intérieur, donnons-lui un rayon de frontière. Rayon de bordure, pas circulaire. Donnez-lui 10. Alors vérifions ça. Mais avant cela, nous devons nous assurer de naviguer sur le bouton qui utilise le dysfonctionnement et aller à l'écran d'accueil. Et ici, sur site, il
suffit d'écrire le point-push du navigateur. Ensuite, ma mise en page, le contexte, l'écran précédent. Et nous devons envoyer l'utilisateur et qui est rigide, c'est ici. Et sauvegardons ça. Si je clique dessus. Ce que j'ai c'est que j'ai fait quelque chose de mal depuis que c'était la deuxième rangée, colonne de saignement. Donc, la première chose, je lui donnerais envelopper cette chose avec un widget de rembourrage et donner la literie ou 15, puis l'envelopper en ajoutant widget. Nous nous sommes ensuite étendus. Ça veut dire prendre tout l'espace. Rapide. Dans collé pas envelopper. Je vais juste écrire élargi votre couteau. J' économise parce qu'il échoue leurs DevOps comme quelle devrait être la taille de ceci ? Et ils ont fait quelque chose de mal dans cette colonne, ne devraient pas être là. Et supprimez ce widget. Ça veut dire qu'on a un problème à l'intérieur. On a une rangée à l'intérieur. Maintenant, nous avons cela élargi et tout. Vérifions ça. Je suppose qu'à cause de cet éditeur de Columbia était là. Maintenant, si je clique dessus, voir que nous avons notre cadre de texte avec cela en ajoutant un autre non développé donc ils sont moins d'espace ici. Maintenant, après ce widget développé dans la ligne, je vais donner un bouton d'icône. Et donnons l'icône à être icônes re.search. Alors c'est tout. Vérifions ça. Tu vois, il regarde l'évier. Au moins, nous savons que nous devons taper ici et puis cliquer dessus. Et après cela, les résultats seront montrés ici et que nous ferons dans la prochaine vidéo. Alors c'est tout. Nous avons construit avec succès.
7. Appliquer la fonctionnalité de recherche: Donc, dans cette session, nous allons travailler sur cette fonctionnalité de recherche. Donc, nous avons ce champ de texte et un bouton vraiment fou quand nous tapons un nom d'utilisateur, alors les données devraient être affichées dans ce corps, c'est-à-dire à partir du Firestone. Donc, avant d'aller de l'avant, allons à l'écran d'accueil. Je veux juste écrire une ligne de code. Quand nous envoyons. Nous devrions écrire ceci aussi. C'est Google. Connectez-vous à Google, connectez-vous, déconnectez-vous. Nous devons donc utiliser ces deux lignes de code afin de nous déconnecter. Parce que si nous n'utilisons pas la connexion Google, la déconnexion, nous ne pourrons pas nous connecter car un compte différent tout le temps, un
seul compte que nous pourrons utiliser. Mais c'est pourquoi nous devons nous assurer d'écrire cette ligne de code. Excellent. Allons à nouveau à l'écran de recherche et commençons à travailler dessus. Je créerais quelques variables, qui seront une liste contenant des cartes. Et je le nommerais résultat de recherche. Il sera vide au tout début. Et une valeur booléenne de chargement. Juste pour être sûr quand nous récupérons des données. Nous pouvons montrer l'indicateur de chargement dans l'interface utilisateur. Et cette carte de trucs de liste n'est rien d'autre que lorsque nous recherchons des utilisateurs et que les données arrivent, c'est-à-dire que ces données proviennent du feu. Il sera au format JSON, c'est-à-dire au format de carte. Et je garderai Alda, toutes ces cartes dans cette liste. C' est supposé que Directory utilise, alors il y aura trois mappage. Et comme il s'agit d'une liste, j'utiliserai un générateur de vue de liste pour produire tous les utilisateurs dans le corps. Ensuite, nous allons travailler sur la fonction de recherche. On doit écrire sur la recherche comme ça. Je le nommerais lors de la recherche. Ensuite, commencez avec notre Firestore que cette Firebase déclenche l'instance de plugin magasin cette collection. Et ici, j'irais aux utilisateurs et utiliserais une clause where afin que je puisse filtrer et obtenir le nom exact qui est quel que soit le nom d'utilisateur que nous voulons rechercher. On peut faire tomber ce jour-là. Lee sera stocké dans le contrôleur de recherche et puis je vais juste écrire point get. Alors maintenant, après cela, je vais l'utiliser alors clause. Donc, dès que nous aurons les documents qui sont ici, liste des documents. Nous vérifierons s'il est vide ou non. Autrement dit, peu importe ce que l'utilisateur a recherché. Est-ce qu'il existe ? Donc, je peux le faire juste en utilisant la longueur. Et si elle est inférieure à 0, nous pouvons montrer un échafaudage, pas un échafaudage pour que nous puissions, donc comme snack-bar montre snack-bar et puis un sniper. Et nous pouvons écrire le contenu comme aucun utilisateur trouvé. Cela dit. Et aussi comme je l'ai dit, j'utilise cet indicateur de chargement. Donc ici, dès que nous cliquons sur l'écran de recherche qui est sur la recherche, j'écrirais l'indicateur de chargement du milieu comme vrai. Et si c'est nul, c'est-à-dire qu' n'
y a pas de données, alors je le ferai à nouveau faux. Et puis revenez d'ici. Autrement dit, nous n'avons pas besoin d'exécuter des guillemets doubles s'il n'y a pas d'utilisateur disponible. Mais si nous avons une liste d'utilisateurs, alors nous allons utiliser cette variable de valeur. Ensuite, tous les documents. Et puis je le traverserai. Et il nous donnera les détails d'un utilisateur particulier. Et simplement, simplement, j'écrirais le résultat de recherche, c'est cette variable. Ajouter des points et des données utilisateur comme ceci. Aussi. Je ne veux pas que l'utilisateur puisse se rechercher lui-même. Supposons qu'il ait un nom de John. Et si on écrit John, je ne veux pas ça dans le résultat de la recherche. Il pouvait le voir parce qu'alors il ne ferait que des messages. Donc, pour s'assurer qu'il n'est pas là que l'utilisateur qui recherche ne vient pas. Nous pouvons simplement écrire des données n'
est pas égal à point rigide user.email, qui est l'utilisateur actuel. Si elles ne sont pas égales, alors nous pouvons utiliser et si elles sont égales, alors cela ne serait pas stocké dans cette variable de liste. Et après cela, je vais à nouveau utiliser cet état défini est appelé le faux. Aussi ce qu'ils veulent est quand nous cliquons sur ainsi sur la fonction de recherche, alors il s'assure que la variable de résultat de recherche est vide. Parce que nous pourrions chercher plusieurs fois. Supposons qu'une fois qui utilise telle que vous, tous les détails seront stockés dans cette variable. Mais s'il tape un autre nom, alors les résultats de la recherche devraient être vides. Comme ça. La fonction est prête. Travaillons sur la partie du corps qui est à l'intérieur de ces enfants. On a cette rangée. Et après la ligne, j'utiliserai une clause if. Autrement dit, si la longueur du point de résultat de recherche est supérieure à 0, c'est-à-dire, si certaines données sont là dedans. Et sinon, je vais écrire comme si le chargement est égal à vrai. Afficher ensuite un centre de largeur rigide, indicateur de progression
circulaire. Et nous allons travailler maintenant. Si la recherche n'est pas la longueur des points est supérieure à 0. Commençons par une région élargie. Puisque nous utilisons un constructeur ListView. Nous devons donc utiliser étendu afin qu'il prenne tout l'espace et puisqu'il sera défilant aussi. Donc, dans le nombre d'éléments va simplement écrire résultat de recherche. Mais la terre, écrivons psy, saisissez-y. Donc, ils prennent la base de données est nécessaire. Ensuite, en bas, nous avons le contexte et l'index. Et puis je vais simplement retourner un style de liste. J' aurais fait une tuile de liste avec leader, comme je l'ai dit. Et l'enfant sera image.Tout index de recherche
réseau. Et puis cette propriété image comme celle-ci. De même dans le titre, j'écrirais le nom, c'
est-à-dire le résultat de la recherche, l'index, puis le nom. Dans ce sous-titre, j'écrirais comme la pâte à
pain, email, index, email. Et puis dans cette fin, je lui donnerais un bouton d'icône. Ce sera vide pour l'instant. Et je serai Icône icônes. Message. Je peux, je peux commencer le message. Jambe ça. Sauvegardons ça. Mais comme nous n'avons qu'un seul utilisateur, cela ne fonctionnera pas. Déconnectons-nous et signons avec un autre compte. Nous avons donc plusieurs, au moins deux utilisateurs dans notre application. Maintenant, si je vais à l'écran de recherche et voyons, est-ce que ça vient ? Ok, désolé, j'ai oublié d'assigner cette fonction. C' est cette fonction sur le bouton d'icône. Rechercher, comme ceci, alors seulement cela fonctionnera. Évidemment. Essayons à nouveau. Avec ce nouveau compte. Je recherche pourrait être VS compte. Et cliquez sur rechercher et voir. Il fonctionne si parfaitement. Et si j'ai quelque chose comme John qui n'est pas là, et si je clique dessus, alors imaginez juste, si je clique dessus, alors aucune police d'utilisateur et les données précédentes seront supprimées puisque je me suis assuré que le résultat de la recherche obtient vide. A cause de ça en direct. Donc c'est tout pour cette vidéo. Dans la vidéo suivante, nous allons travailler sur cette icône de chat qui est de sorte que lorsque nous recherchons un utilisateur et qu'ils l'utilisent apparaît, alors nous pouvons lui envoyer un message avec cette icône et il y aura un écran de chat. Alors on se voit dans la prochaine vidéo.
8. Créer un écran de chat de chat: Commençons à travailler sur l'écran de chat. Donc, créez un nouveau fichier à l'intérieur de l'arbre statique de l'écran et nommez-le. Écran d'ombre, point-point, comme ça. Et ici, nous allons importer du matériel et ensuite rendre IT estate moins rigide écran Chat. Je vais supprimer ce constructeur par défaut. Parce que maintenant il suffit d'imaginer quand nous avons un écran de chat, au moins nous devrions savoir qui est l'expéditeur et le destinataire. C' est qui est en fait l'utilisateur actuel et la personne à qui il parle. Jusqu' à présent que nous avons à lire nécessite certains paramètres sont des données dans cet écran de chat. Le premier sera le modèle utilisateur. C' est l'utilisateur actuel qui est la messagerie. La première chose, c'est ça. Ensuite, le second est l'ID d'ami, c'est-à-dire à qui parle, nous avons besoin d'ID d'utilisateur, c'est-à-dire d'ID unique. Alors on a besoin d'un nom d'ami. Et puis nous avons besoin de la dernière chaîne. Image de l'ami. Certains pourquoi j'ai besoin de ce nom d'ami et de l'image juste pour montrer ces données. Mais c'est trop élevé si vous avez utilisé leur WhatsApp et vous savez de quoi je parle ? Il est tout en haut et l'image sera là et le nom de cette personne sera fait. Maintenant, créons un constructeur. Et sauf que c'est la lecture de toutes les données, obtenu point de l'utilisateur final, point, nom, cette image d'ami, comme ceci. Et puis dans cette fonction de facture, disons que nous avons fait un échafaudage dans la barre de l'application. Donnons que la couleur d'arrière-plan est le champ de début de couleur. Et puis ce titre, j'utiliserai une ligne afin que nous puissions sortir plusieurs widgets ensemble. Tout d'abord, widget sera l'image et je le rendrais circulaire en utilisant clip rect. Bordure rigide. Dds est égal au rayon point circulaire comme ceci. Et puis dans cette image d'ami image.net enfant, c'est la chaîne et lui donner une hauteur de 35. Ensuite, il utilise la boîte de taille avec cinq juste pour donner un peu d'espacement, puis du texte. personne à qui il parle à ce jour, l'utilisateur
actuel parle et a donné une taille différente. Donc, ne pas naviguer vers cette page. On doit aller à l'écran de recherche. Et puis dans ce style, nous avons ce bouton icône. Et ici, nous naviguerions, c'est-à-dire le navigateur, point push, le
matériel, l'itinéraire de la page, le contexte. Et nous envoyons à l'écran de chat, ce
qui nécessite toutes ces données. Écrivons ça un par un. L' utilisateur actuel sera rigide. Dot utilisateur, que nous acceptons déjà à cet écran. ID ami ne sera rien, mais cet index que l'index de recherche et ici vous AD. De même le nom sera le nom et l'image sera cette variable d'image. Et aussi en naviguant, je veux juste définir l'état et rendre le contrôleur de recherche vide. Juste que je voulais juste quand il revient, c'est quand il clique sur le bouton de retour, puis il peut chercher un autre utilisateur s'il le veut. C' est ça. Alors testons ça. Maintenant, si je clique sur le bouton Rechercher, encore une fois, recherchez un utilisateur. Ensuite, si je clique sur ce chat, je peux maintenant voir que c'est la mise en page est similaire à ce que sept vous pouvez juste dire. Mais nous avons l'image et nous l'avons fait. Et rappelez-vous juste, j'envoie l'image et nommé via le constructeur qui donc il semble si rapide. Si j'avais utilisé, encore une fois, leur avenir apprendra là-bas et ensuite tout chercher. Il, une expérience ne serait pas si grande. Maintenant, dans cet écran de chat, nous allons créer un champ de texte ici et un bouton Envoyer afin que l'utilisateur puisse au moins allouer leur envoyer des messages. Alors, à l'intérieur de l'écran de chat, après le bar, allons voir le corps. Et la première chose que j'utiliserais un widget développé. Donc champ de texte de données prendrait de l'espace Alda, puis un conteneur. Et ici, je construis comme ça. Vous comprendrez simplement parce que cela élargi est différent, désolé. Je vais vous expliquer une réunion. Écrivez-le d'abord et insérons-le. Alors. Puis la décoration, la décoration de la boîte, la couleur, blanc, la bordure ADS, rayon de la bordure. Seulement. Gauche. Donnons le rayon circulaire 25. Et à droite, Nous allons à nouveau donné rayon circulaire 25. Et pour le moment,
cet enfant à l'intérieur, laissons-le comme un conteneur vide et on y travaillera après un certain temps. Et je veux juste te montrer ça ici. Ce widget développé prendra tout l'espace ici. C' est notre chat principal sera montré ici plus tard. Et à la toute fin, nous aurons notre champ de texte. Et je voudrais séparer ce code puisque TextField
aura beaucoup de code à l'intérieur, y compris les services Firestore. Donc c'est par des terroristes, créez un fichier séparé pour ça. Donc, le code sera propre et gérable. Je voudrais à l'intérieur de la scission qui suppose que nous avons des modèles, nous avons des écrans. Créons un autre dossier appelé widgets. Sur les widgets que les widgets séparés seront retournés ici. Et je le nommerais champ de texte de message point, point. Comme il sera utilisé pour envoyer un message, ce sera un widget avec état. Je le nommerais cadre de texte de message. Maintenant, comme d'habitude, je vais supprimer le constructeur. Et dans cet écran, ce que nous aurions besoin juste que aujourd'hui vers
le bas l'ID utilisateur actuel et une chaîne conviviale. ID actuel. Et puisque cet ID actuel est par défaut. Travail de l'orme de feu. C' est pourquoi nous devons utiliser cela. Et puis un constructeur, ce point point point NTID, ce sympathique. Maintenant, allons simplement sur l'écran de chat. Et après le champ de texte du message développé, ID
actuel serait l'UID point utilisateur. Et vraiment sympathique. Voyons une chose. Cet UID est uniquement une chaîne, alors allons-y et rendons-le disponible. Faites-en une chaîne comme celle-ci. Et nous pouvons le rendre définitif aussi parce que ça ne changera pas. Maintenant, à l'intérieur de la fonction. Nous lancerions un conteneur et lui donnions une couleur. La première chose que je ferais est de lui donner beaucoup de colons blancs commencent large. Et puis un peu de rembourrage. En sets. Allons avoir une ligne, parce que je vais montrer une chaîne de texte, n'importe quel bouton d'icône ensemble. Donc, cette extension que nous avons fait est très utile. Il sera utilisé beaucoup de temps. Parce que ici, je veux que ce champ de texte sélectionne tout l'espace disponible. Dans cette déclaration. Donnons-lui une décoration d'entrée et une étiquette. Le texte doit être étiqueté, doit être tapé un message. Couleur de remplissage. Donnons-lui un coup de feu. Et puis simplement esquisser dans l'ordre. Donnons-lui un rembourrage 0. Puis EDS, EDS point circulaire, donnez-lui 25 ADS. Et comme il s'agit d'un champ de texte, nous aurions besoin d'un contrôleur d'édition de texte. Ce contrôleur, voyons ce qu'il y a. Tu vois, ça a l'air si beau. Message et null. Après ça, je voulais juste un bouton ici. Donc, dans ce F qui est élargi, filets ont une boîte de taille de la largeur dy. Et puis je favoriserais fichier, donnez-lui GestureDetector sur humide ne sera rien pour l'instant. Mais chez cet enfant, nous allons avoir un bord de conteneur encarts et lui donner une boîte. La forme sera en forme de boîte de couleur de point avec le bleu. Et à l'intérieur, cet enfant signifiera icône simplement. Je peux commencer à envoyer de la couleur. Sauvons ça. Et voir ceci est que le bouton Envoyer, bouton Envoyer. Nous taperons le message et nous l'enverrons au magasin de pompiers. Donc c'est tout pour cette vidéo. Dans la prochaine session, nous allons implémenter cette fonctionnalité de magasin de feux en elle.
9. Storing des messages dans Firebase: Maintenant, cela est fait section la plus importante où nous pourrions enregistrer le message envoyé dans Firestore. Donc ce concept sera, je vais créer une nouvelle collection appelée messages à l'intérieur de la collection de l'utilisateur, qui est à l'intérieur de ceci et à l'intérieur d'un utilisateur, je vais créer un nouveau message d'élection. Supposons comme ça. Et puis, puis il aura l'ID de l'utilisateur à qui cet utilisateur parle, son ami clouant. Ce sera comme ça. Supposons des messages. Alors ce sera l'identité de la personne à qui il parle. Et puis dans cette collection, encore une fois, à l'intérieur, j'aurai une collection appelée chats. Et à l'intérieur de ce chat, nous allons stocker tous les messages, comme supposons message Salut, amis, supposons qu'alors un autre champ sera date. Supposons qu'un autre champ puisse être tapé. Ce sera un message texte. Et ce sera incrémenté automatiquement. Ce n'est pas parce qu'ici, il peut y avoir beaucoup de chats. Quelqu' un seul message dans cette vidéo peut être beaucoup de messages. Et voici deux de plus. Les données ou T seront le L1 est centré ID et l'un est qu'ils disent, Eh bien, je n'ai pas aimé ça. Je créerais cette collection de messages dans les deux utilisateurs qui parlent les
uns aux autres afin que les deux aient des messages récents affichés dans leur profil. Et ici, je vais aussi avoir quelque chose appelé supposons ici, c'est un ID d'utilisateur. A l'intérieur de ceci, j'aurai un dernier film de message. Juste, vous comprendrez pourquoi j'utilise ce dernier champ de message. Mais pour l'instant, vous devez juste essayer de comprendre correctement ce que je vais écrire. Quoi que je t'ai montré, j'écrirai tout dans ce code. Donc code pour message, chaîne de texte. Et ici, dans le GestureDetector. La première chose que j'écrirais une variable appelée message de chaîne est égale au texte de point du contrôleur. J' aurai le message à l'intérieur. Et puis je viderais le contrôleur. C' est ce qu'ils veulent avoir. Le type sera supprimé. Mais nous avons seulement déformé, donc pas un problème. Ensuite, j'utiliserais l'instance de Firestore. Pourtant, dans cette collection, les utilisateurs, je voudrais obtenir ce document de cet utilisateur avec qui est le CurrentUser. À l'intérieur, je créerais une collection appelée messages comme je vous l'ai montré. Puis à l'intérieur, je vais créer un document pour cette personne. Cet utilisateur actuel parle à son ami. Et puis je créerais une autre collection appelée chats. Et puis ajoutez comme ça. Je sais que ça peut être un peu accablant, mais c'est ainsi que nous pouvons le faire. Évidemment l'ADA et d'autres moyens aussi bien. Mais j'ai trouvé cette solution. Maintenant, ce que nous devons sauvegarder est l'identifiant de l'expéditeur à jeun. Le second est l'ID du récepteur. Vous pourriez penser pourquoi nous sauvegardons le récepteur si vous avez déjà stocké ces données. Mais j'explique juste pourquoi j'utilise ceci de sorte que si c'est un expéditeur, le message sera affiché sur le côté droit. Si c'est un récepteur, supposons que le message sera affiché sur le côté gauche comme ceci, juste pour différencier le message lui-même. Comme ça. Puis nos masses quand on tape des Beck. Mais si vous le souhaitez, vous pouvez implémenter plus tard pour ce sont des fichiers aussi. C' est à vous de voir. Et la date est très importante. Donc, ce sera la date, l'heure maintenant afin que nous puissions filtrer et amener leurs messages récents dans un ordre décroissant. Maintenant, ce que je veux, c'est après que cela soit stocké, j'aurais à nouveau un Firestore, cette collection. Encore une requête, puis Vg, utilisateur actuel. Mais les messages de collecte. Et ici, je mettrais quelque chose dans ce document qui atteint amical, mais en définir un seul. C' est le dernier message, comme ça. Et ici, il sera montré comme
ceci, ce dernier message, si vous avez, si vous utilisez ce qui séparé maintenant et si vous avez vu la page d'accueil, vous pouvez voir dans le sous-titre le dernier message que vous avez envoyé ou que vous avez reçu. Et puis vous pouvez cliquer sur le chat et lire tout le chat. Donc, ce n'est pas le cas. Essayons de tester ce code au début car il ne sera stocké que dans la collection d'un utilisateur. Comme je l'ai dit, le même code devrait être pour un récepteur aussi. Mais testons si cela fonctionne correctement ou non. Vous voyez, il est maintenant supprimé. Et nous espérons qu'il sera stocké au cours de l'année en cours. C' est la collection de cet utilisateur. Si je clique dessus, voir ces messages, alors cet ID et l'ID de cet utilisateur sont les mêmes que je l'expliquais. Puis il parle à cet utilisateur. Et si je vais à cet utilisateur, ce dernier message a été transmis. Et le chat était juste un contrôle que ce, ce message seulement. Maintenant, la même chose que nous avons à faire pour l'utilisateur qui reçoit aussi, afin qu'il soit mis à jour dans son profil car c'est le message. Et en ce moment, je suis juste en train de supprimer cela parce que nous avons besoin du même message à l'utilisateur. Maintenant enregistré le même message dans cette collection de l'utilisateur avec l'utilisateur actuel parle à cette fin. Ça se termine ici. Après cela, il correspond, avoir le même code. Fichier, ce magasin de fichiers, utilisateurs de collection de points. Mais doc. Maintenant, ce sera un ami. Rappelez-vous juste que l'utilisateur actuel, nous allons à l'intérieur de l'utilisateur ami et obtenir une collection appelée messages. Ensuite, ils utilisent cet ami est de parler est cet utilisateur, qui est virginia dot ID courant. Et nous allons créer une collection et ajouter,
disons, les réseaux ont le même ID de réseau que le courant de point rigide. Je l'ai fait, ce message a été envoyé Vida. Cet utilisateur. Puis l'ID du récepteur. Id. Ensuite, le message sera de type, sera texte D. Il rencontrera les mourants. Maintenant. Et après que c'est fait. Et encore une fois, enregistré le dernier message. Il est juste pour cette instance, et non pour les utilisateurs de collection. Dot, dot, dot, dot collection messages, dot doc. Mais l'ID actuel. C' est juste droit. dernier message est un message. Donc, je sais que ce n'est pas pour digérer, mais je vais vous suggérer de simplement mettre
la vidéo en pause et essayer de comprendre ce code ligne par ligne. Parce que ce concept n'est pas si compliqué. Mais il y a beaucoup de code impliqué de cette façon. Maintenant, testons. Si je vais continuer et à nouveau rechercher, obtenez l'utilisateur. Et maintenant, si je tape comment vous et envoyer ce message sera stocké sur, devrait être stocké dans ces utilisateurs. Voir le premier et le second. Et ici, il parle à cette personne. Le dernier message était comment allez-vous ? Et puis qui envoie la date du message ? Alors c'est tout. Pour cette vidéo. Vous devez bien comprendre ce concept et la cour. Dans la vidéo suivante, nous allons travailler sur la récupération, envoyer des messages SMS et le montrer dans ce corps. Merci.
Rahul Agarwal, Flutter Developer & Trainer
