Node. js Backend pour les débutants de Flutter

1. Introduction du cours: Êtes-vous un développeur de flutter qui cherche à faire passer ses compétences au niveau supérieur introduisant un backend sans GAS pour les débutants en matière de flutter ? The Ultimate Guide Debt vous fera découvrir le monde de la création de backends personnalisés. Dans ce cours, vous apprendrez à créer de puissants systèmes dorsaux à l'aide des nouvelles bases de données GS et Mongo, libérant ainsi des limites liées à la base de données et en évitant de vous enfermer dans une relation coûteuse avec un fournisseur De l'écriture du code serveur à la maîtrise des opérations de cred, passant par son déploiement à l' aide de l'application ferroviaire, vous acquerrez une expérience pratique dans la création d'une architecture dorsale personnalisée en développant une application intégrée de base à la fin du cours De plus, pour assurer une gestion fluide des états, nous utiliserons le package fournisseur populaire. Ce cours vous aidera certainement à devancer la plupart des développeurs qui ne savent pas comment créer leur propre backend et qui se contentent de fireways Donc, sans perdre plus de temps. Commençons. 2. Mettre en place un projet js de Node: Bonjour. Bienvenue dans la toute première vidéo du cours, où nous allons apprendre à créer un back personnalisé en utilisant No JS et Mongo DV pour notre application plus plate Donc, la première chose à faire est n' installer aucun GS dans votre système. Accédez donc à votre navigateur et tapez nos.org. Et à partir de là, vous pouvez simplement le télécharger et l'installer. J'utilise un système Max, mais si vous êtes sous Windows, vous pouvez simplement le modifier via les téléchargements et le programme d'installation de Windows. Donc, comme vous pouvez le voir, je vais juste écrire V, et j'ai la version. Donc, après l'installation, si vous pouvez voir cette version dans votre ligne de commande, cela signifie que vous avez correctement installé no es. Et NPM sera automatiquement installé sans Jaz, avons donc pas à y penser Si j'écris la version NPM. J'ai donc aussi NPM. Après avoir installé node js, nous devons créer un projet node JS. Accédez donc au répertoire de votre choix et créez un nouveau dossier. Je l'appellerai application Nodes. Dans l'application Nodes, créez un autre dossier, nommez-le backend. Dans ce dossier, tout le code côté serveur sera présent. Et plus tard, nous créerons un autre dossier appelé front end, qui contiendra tout le code flutter Nous allons donc maintenant avoir besoin d'un point d'entrée pour notre serveur. Tout comme dans Flutter, il s'agit du fichier point point principal Donc, dans le dossier principal, créez un nouveau fichier JS, et ce sera un fichier dont je vais simplement ouvrir le code VS. Ouvrez le dossier. Ici, j'ouvre ce backend et je vais créer un nouveau serveur de fichiers. Comme ça. Si vous le souhaitez, vous pouvez également l'appeler index do chase, mais je l'appelle simplement server do chase. Maintenant, ouvrez un nouveau terminal dans ce dossier principal et initialisez NPM en tapant NPM dans Y. Voici comment initialiser un package MT NPM ici Vous pouvez voir que le fichier d'entrée principal est le point du serveur S. Mais si vous n'aviez pas créé le fichier JS du point du serveur, il aurait pris le S comme fichier principal. Et tous les packages ou dépendances externes seront affichés dans ce fichier. Maintenant, lorsque nous parlons de colis, le premier colis dont nous avons besoin est le colis express. Express JS est un framework qui fonctionne sur les fonctionnalités du serveur Web Net JS pour simplifier ses API et ajouter de nouvelles fonctionnalités utiles. Cela facilite l'organisation des fonctionnalités de nos applications grâce aux intergiciels et au routage Donc, ici, dans le pool principal du terminal, simp NPM install express comme ceci Vous pouvez également vous rendre sur npmjsen.com, où vous pouvez également rechercher le package express si vous souhaitez en le package express si vous souhaitez en savoir plus à ce sujet Comme vous pouvez le voir dans les dépendances, j'ai le package express. Créons maintenant un serveur express. Tout d'abord, nous devons indiquer à notre projet que nous utiliserons Express. Importons ou, disons, exigeons le colis express en haut de la page. Écrivez simplement const Express is to re express, puis nous devons créer une instance ou un objet de l'express Je donne le nom d'app. Il s'agit d'un processus standard, puis j'écrirai le code pour démarrer le serveur. C'est-à-dire que je vais l'écouter dans le pot trois fois et une fois qu'il sera réussi, je me connecterai à la console. Connectez-vous à la console ici. Je vais juste écrire un serveur fonctionnant sur le port 3 000. OK, sauvegardez-le. Ensuite, essayez d' exécuter le serveur en tapant le nœud terminal et le serveur de noms final et en le présentant. Voir le serveur en cours d'exécution, c' est notre serveur en cours d'exécution. Si vous accédez à votre navigateur et tapez local host 3,000. Donc, ici, vous pouvez voir que vous ne pouvez pas obtenir de barre oblique. C'est la route du retour. Mais au moins, il n' affiche aucune autre erreur, c' est-à-dire que la page n'est pas une réponse ou que le serveur n'est pas disponible comme ça. Cela signifie que le serveur fonctionne correctement. Dans la vidéo suivante, nous allons créer quelques routes pour notre serveur. Merci 3. Créer des itinéraires: Bonjour. Bon retour. Maintenant, produisons des données sur la route de l'hôte local 3,000. Pour cela, nous devons configurer la requête GT pour la route oblique Passons à notre code ci-dessus de l'application Listen. Je vais écrire l'application GT. Et puis quel itinéraire voulons-nous ? Nous voulons suivre la voie des barres obliques. Et chaque fois que slash route est appelée, nous voulons que cette fonction soit exécutée. Demande de réponse. Il nous donne une demande et une réponse. Ce sont donc les bases d'Express Framework. Vous devez donc le savoir. Sinon, vous pouvez simplement créer l'application, et vous finirez par comprendre les concepts. Donc, ici, vous pouvez simplement comprendre. La demande est ce que nous avons envoyé du front-end au serveur. Supposons donc qu'une personne envoie des données de mot de passe par e-mail. Nous allons donc récupérer ces informations via cette variable de requête Peu importe ce que nous envoyons depuis le front-end, nous pouvons accéder à la demande. De même, la réponse est ce que nous envoyons du serveur au front-end. Donc, évidemment, c'est le cas lorsque le front demande des données Nous l'enverrons avec cette variable de réponse. Nous allons donc écrire ici la réponse point send. Et voici la page d'accueil. Ce ne sont que des données fictives pour le moment. Bien entendu, nous n'enverrons pas données directement sous forme de chaîne. Juste pour te faire comprendre. Maintenant, nous devons arrêter le serveur, il suffit de contrôler C, puis de le redémarrer pour que ce code soit mis à jour. Maintenant, si je vais rafraîchir C, c'est la page d'accueil. Cela signifie notre barre oblique. Chaque fois que nous nous adressons à notre Hos Fit Hus slash local, nous recevons cette réponse Mais si nous allons vers un autre nœud similaire, ne pouvons évidemment pas obtenir de nœuds. Créons maintenant l'itinéraire des notes. Comme notre application sera une application de nœud, nous devons créer une route pour les nœuds. Blow d est l'itinéraire d'origine, puis cliquez ici sur slash notes Encore une fois, une fonction sera appelée request response request response et je vais envoyer une réponse. Voici la page des notes. Sauvegardez-le. Encore une fois, allez arrêter le serveur. Je l'ai enregistré et je le recommence. Alors maintenant, si je passe à la route des notes slash, vous voyez, c'est la page des notes Et si je passe simplement à une barre oblique, alors c'est la page d'accueil C'est ainsi que vous créez des itinéraires. Et assurez-vous que je comprends que c'est pour les itinéraires GT. Il existe un autre type de demande, c' est-à-dire un g post comme celui-ci, vous l'aurez compris, mais c' est la demande de base, c'est la demande GT. Dans la vidéo suivante, nous travaillerons sur la configuration de la base de données Mongo DB. 4. Setup MongoDB Atlas: Bonjour, bon retour. Configurons maintenant notre base de données Mongo DB. Nous utiliserons le service Atlas Cloud pour cela. Il vous suffit donc d'ouvrir votre navigateur et d'accéder à Mongo DB Atlas. Ici, cliquez ensuite sur le premier lien. Connectez-vous ensuite ou inscrivez-vous avec votre compte Google. J'ai déjà un compte, je vais simplement me connecter. Si vous êtes un nouvel utilisateur, vous pouvez donner n'importe quel nom à votre organisation et sélectionner les options Mongo DB Atlas Comme je viens de me connecter, je ne vais pas voir ces informations, mais dans votre cas, il suffira de donner le nom de votre organisation. Et puis sélectionnez l'option Mongo Atlas. Maintenant, après m'être connecté, voyez, j'ai cette organisation qui s'appelle Rahul Et si vous êtes sur cette page, la première chose à faire est de créer un nouveau projet. J'ai donc déjà ce projet, mais dans votre tableau de bord, vous ne verrez évidemment pas le nom de ce projet. Il suffit donc de cliquer sur Créer un nouveau projet. Et ici, donnez-lui un nom de projet. Je vais écrire une application de notes. Cliquez ensuite sur Suivant. Ici, le propriétaire du projet crée le projet. Et une fois le projet créé, nous devons créer une base de données. Il suffit de cliquer dessus. Sélectionnez ensuite le pneu libre qui est nul. Évidemment, plus tard, vous pourrez opter pour des serveurs et ce genre de choses. Le fournisseur est alors AWS et la région se rapproche de vous. Il vous suffit donc de choisir où vous vivez. Et vous pouvez donner le nom de votre cluster. Je vais juste le laisser par défaut. C'est le cluster zéro. Et cliquez sur Créer. Le It's Caps et tout. Motocyclette. Ensuite, nous apportons la touche finale. Ensuite, vous devez créer un nom d'utilisateur et un mot de passe. Souvenez-vous simplement de ces détails. Je vais utiliser un mot de passe très simple pour le moment. Je m'en souviendrai. Cliquez sur Create er. ensuite l'endroit où vous souhaitez vous Choisissez ensuite l'endroit où vous souhaitez vous connecter depuis l' environnement Cloud. Et puis j' ai déjà mon adresse IP. J'ajoute simplement mon adresse IP actuelle. J'ai donc mon adresse IP ici. Ensuite, il suffit de terminer, de fermer et d'accéder à Tababase. M. D'accord. Maintenant, l'étape suivante consiste à autoriser l'accès depuis n'importe où. Comme vous pouvez le voir, nous donnons notre adresse IP, qui signifie que seul ce système sera accessible à ce serveur. Mais nous voulons que d'autres utilisent également notre application dans la vie réelle. Accédez à l'accès au réseau ici, cliquez sur Ajouter une adresse IP, puis sur Autoriser l' accès n'importe où. S puis confirmez. Il dépend du statut. Cela prend du temps. Nous déployons vos modifications action en cours de configuration de Mongo Comme vous pouvez le dire, cela prend du temps. C'est bon. Disons-le quelques minutes plus tard , avant d'ouvrir un code VS. Et évidemment, nous devons connecter ce nœud à Mongo dV. Pour cela, nous utiliserons un autre package appelé Mo. Dans ce terminal, je vais simplement l'arrêter et écrire NPM install Mo et appuyer sur Entrée Dans le package de service que Jason a déposé, vous pouvez voir que celui de Mongo s'y trouve Et je crois que notre base de données est également configurée. Dans la vidéo suivante, nous allons donc établir la connexion entre le NA et cette base de données. Merci. 5. Relier l'application Node à MongoDB: I. Dans la prochaine étape, nous aurons besoin d'une chaîne de connexion pour connecter notre application à la base de données Mongo DV Pour cela, rendez-vous sur ce dernier tableau de bord, puis cliquez sur le bouton Connecter au cluster. Alors ici, il suffit de cliquer sur Connect. Ensuite, il y a beaucoup d'options. Je choisirai Mongo DB pour le code VS. Ensuite, copiez simplement cette chaîne de connexion. Nous remplacerons le mot de passe par notre propre mot de passe. Ouvrez le code VS, et sur le serveur, établissons une connexion. Tout d'abord, il suffit d'importer le package Mongoose Egal to require Mongoose Egal to require Écrivez ensuite mongoose connect. Ici, nous devons donner la ficelle. Il s'agit de la chaîne de connexion. Et il suffit de remplacer le mot de passe et de le supprimer au lieu de simplement écrire le mot de passe. Je lui ai donné 12345. Et à la fin, j'écrirai également le nom de la base de données. C'est Nodes DV. Il s'agissait simplement d'un cluster, et voici le nom de la base de données. Nœuds DV. Et lorsque la connexion est réussie, je déclencherai cette fonction. je déclencherai cette fonction. Qui aura tous les itinéraires. Cela signifie que je m' assurerai que les itinéraires ne sont accessibles que si la connexion est réussie. Je coupe et colle simplement tous les itinéraires de la connexion Mongoose Et cet appleion sera à l'extérieur. Ensuite, nous avons besoin d'un outil pour tester les API. Pour effectuer des opérations CRUD sur un serveur ou une base de données, nous avons besoin d'un client ou d'une interface. Pour le moment, nous n'avons pas l'application Flutter. Donc, pour simuler ou envoyer de fausses demandes, nous allons utiliser Postman pour tester l'API Il suffit donc d'aller dans un navigateur et d'écrire postier, puis voilà, j'ai déjà cette configuration, mais assurez-vous de créer un compte et de télécharger le logiciel J'ai déjà installé ce facteur ici. Beaucoup d'itinéraires précédents. Ici, tout d'abord, redémarrez votre serveur. Le serveur est en cours d'exécution. Cela signifie que je suppose qu'il n'y a aucune erreur avec le Mongo. Envoyons une demande G. Il s'agit de la requête Get, et je vais écrire sur HTTP puis sur l'hôte local 3 000 notes obliques Et si j'envoie une demande GT ici, tu vois, c'est la page des notes. Cela signifie que notre réponse est là et que le serveur fonctionne parfaitement. Et ce facteur est très nécessaire. J'espère que vous l'avez également installé. Avant de faire quoi que ce soit d'autre, jusqu'à présent, chaque fois que nous apportons des modifications au code, nous devons arrêter le serveur et le redémarrer à nouveau. Ce n'est pas une bonne expérience de développement. Pour résoudre ce problème, nous utiliserons un package appelé Nudmon. Cela permettra de rafraîchir le serveur en direct. C'est lorsque nous apportons des modifications et que nous les enregistrons, cela redémarrera le serveur lui-même et reflétera les modifications. Encore une fois, arrêtez le serveur et écrivez le nœud global d' installation NPM M. Alors attachez ce code Nous installerons ce package globalement dans le système afin que dans les projets futurs, vous n'ayez pas à l' installer encore et encore. Il suffit donc d'appuyer sur Entrée. J'ai déjà installé Node Ml dans le monde entier. Cela l'installera donc dans votre système. Ensuite, dans le fichier Packet JS, créez un nouveau script. En dessous de start, il suffit d'écrire D et d'écrire le script nodemon server do chase C'est uniquement en phase de développement. Sur le serveur live, le serveur de nœuds se lancera automatiquement à la poursuite. Sauvegardez-le. À partir de maintenant, nous allons écrire NPM run Dv, et voir le serveur Nod Mon démarrer Cela signifie donc qu'à partir de maintenant, l'expérience de développement sera un peu meilleure. C'est tout pour cette vidéo. Dans la prochaine vidéo, nous allons commencer à travailler sur la création de modèles pour notre. Merci. 6. Créer un modèle de note: Bonjour. Bon retour. Avant d'aller de l'avant, j'aimerais donc structurer notre projet en fichiers et dossiers de manière organisée. Donc, tout d'abord, je vais arrêter le serveur. Ensuite, dans le dossier principal, je vais créer un nouveau dossier appelé SRC Et déplacez le fichier point JS du serveur dans le dossier ***. Maintenant, je dois également apporter quelques modifications au fichier packet do SN. Ici. Lorsque je ferai le script de démarrage, j'écrirai le serveur source sla do JS et aussi dans le nodemon Il s'agit également d'un script D car le fichier ne se trouve pas dans le répertoire racine. Alors c'est tout. Créons maintenant quelques modèles. Pour les données de nos nœuds. Les modèles sont la structure de toutes les données de notre application. Nous allons enregistrer cette structure de données dans notre base de données Mongo DB Mongoose aidera à sauvegarder les données et à créer des modèles Nous pouvons également utiliser ce modèle pour effectuer des opérations de foule dans la base de données. Ils sont donc tous connectés au package Mongoose. Vous devez donc en connaître les bases. Dans un dossier, créez un nouveau dossier et nommez-le modèles. Dans le modèle, créez un nouveau fichier JS. Notez que c'est comme ça. D'accord. Maintenant, la création d'un modèle comporte certaines étapes. La première étape consiste à exiger le package mongoose. Tout d'abord, exigeons le package mongoose. Ensuite, nous devons définir le schéma. Ce sont les détails des données. Dans les données de notre nœud, le titre de l'identifiant comportera ce type de contenu. Quels sont les remplissages enregistrés dans ces données ? Créons un schéma const égal au schéma Mongo Ici, nous avons la parenthèse. Le premier remplissage sera ID, et traite maintenant des propriétés. Tapez, sera une chaîne, unique sera vrai, c' est-à-dire que tout l'identifiant doit être unique et obligatoire. C'est-à-dire que ce champ est obligatoire ne peut pas être laissé vide dans la base de données. Ensuite, le suivant sera l'ID utilisateur, type sera st et re est vrai. Parce que, de toute évidence, l'utilisateur peut avoir plusieurs nœuds, l'ID utilisateur ne peut pas être unique. Ensuite, le titre est le titre de la chaîne de type de nœud , puis il aura une chaîne de type de contenu . C'est ce qui n'est pas obligatoire. Enfin, nous avons ajouté. Son type sera. C'est comme ça que ce sera enseigné par défaut maintenant. Si aucune donnée n'est fournie, la valeur par défaut sera présente. Nous avons donc importé les Mongo. Nous avons défini un schéma. Nous devons maintenant créer un modèle. Pour cela, nous devons donner un nom de modèle et un schéma. Alors, écrivez simplement le modèle à points de Mongo. Le nom du modèle sera Node, et le schéma est note schema. La dernière étape consiste à exporter le modèle. Simplement au début de ce modèle, exportations du module d' écriture sont égales au modèle Mongoose Comme vous pouvez le voir, il s'agit du modèle Code Four Hour Node. J'espère donc que vous avez compris aussi bien que vous connaissez les concepts. Parce que c'est évidemment le concept du package Mongo et de Mongo DB également Alors c'est tout. Dans les prochaines vidéos, nous créerons également de nouveaux itinéraires. Merci 7. Route pour l'ajout d'une note: Bonjour, utilisons le modèle de note pour récupérer toutes les notes de la base de données et les envoyer sous forme de réponse JCN Donc, dans le fichier JS du serveur, je vais remplacer cette barre oblique par sns do list Et ici j' écrirai R. Tout d' abord, tout en haut, je dois avoir besoin du modèle. Just write node est égal à re models node. Ensuite, j'écrirai que les nœuds sont égaux à un nœud fin. Cela signifie récupérer tous les nœuds de la base de données, et c'est une fonction synchrone, nous devons donc en faire une synchronisation Et puis dans la réponse, j'enverrai simplement des res JS et des notes. Je ne mets pas ces notes entre parenthèses car elles seront automatiquement au format JCN Je vais le sauvegarder, lancer le serveur. Et si j'en viens à ce point final, c'est la liste des notes. Alors voyez, je reçois un tableau vide. Cela signifie qu' aucune note n'est insérée, évidemment, mais qu'il n'y a aucune erreur. Créons maintenant un itinéraire pour ajouter une note. En dessous de cette liste d'itinéraires, créez un itinéraire GT pour l' instant app.gs notes ad. Ce sera une fonction de synchronisation. Demande de réponse. Nous devons maintenant créer une instance du modèle de nœud. Donc, pour ce nouveau nœud, c'est égal à une nouvelle instance de nœud. Comme vous savez quelles données sont testées, il faudra un identifiant. Je vais coder les données pour le moment. Plus tard, nous modifierons cet itinéraire pour publier et lire les messages de l'utilisateur. Je vais juste écrire 0001, puis le nom d'utilisateur sera rahle atmail.com, puis le titre sera d'abord la note moi et le contenu sera, c'est Lorsque nous avons cette instance de nœud avec les données, nous devons enregistrer les données du modèle dans la base de données. Et c'est très simple. Utilisez simplement cette nouvelle variable de note et tapez save. C'est ça. Ce code enregistrera ces données dans la base de données. Comme vous pouvez le constater, Mongo vous facilite la tâche. Créez ensuite une variable de réponse au format CN, et j'enverrai un message au nouveau nœud créé. Au final, j'écrirai simplement Response No Jason et j'enverrai cette variable de réponse comme ceci. C'est ça. Sauvegardez-le. Maintenant, testons cette API. Le point final de l'APA est un nœud après l'autre. Lash et message C, nouvelle note est créée, et je vais, si je pars et maintenant écrire liste. Voyons voir je suppose, parce que je sais quelle est l'erreur. Ouais. Je dois changer ces choses. Maintenant, si je fais une liste, alors voyez, j'ai ceci, dans lequel j'ai inséré l'identifiant, le titre de l'identifiant utilisateur. Parce que ce n'était pas unique, cela donnait lieu à une erreur. Quoi qu'il en soit, nous ne serons pas des valeurs codées en dur comme celles-ci. Mais comme vous pouvez le constater, les données sont insérées. Si je l'ajoute également, puis avec le troisième identifiant, j'utiliserai un nom d'utilisateur différent, John, et ce sera sa première note factice comme celle-ci, et s'il écrit ajouter également, dans ce cas, si je vais écrire une liste, alors les trois notes seront là C'est-à-dire Johns et je crois que Johns en a trois ou quatre. Évidemment, le dernier a également été inséré Comme je l'ai dit, cette barre oblique contient quelque chose que j'ai peut-être saisi deux fois. C'est le truc. Mais c'est bon. L'API fonctionne parfaitement. Donc, dans la vidéo suivante, nous travaillerons sur l'itinéraire pour obtenir des notes uniquement par identifiant utilisateur. Évidemment, nous ne voulons pas que cette liste indique que toutes les notes de tous les utilisateurs seront récupérées Je ne veux pas que les autres utilisateurs voient les publications des autres. De plus, je peux voir que j'ai ce type d'acarien, c'est bon. Il suffit de le sauvegarder. Et c'est tout pour cette vidéo. Merci. 8. Obtenir des notes par ID d'utilisateur: Bonjour. Bon retour. Comme vous pouvez le voir, nous pouvons récupérer toutes les notes de la route de la liste des nœuds obliques Mais évidemment, nous voulons uniquement que l'utilisateur puisse voir ses propres données dans l'application. Pour cela, nous allons passer l'ID utilisateur en paramètre lors de l' appel de la route. Changeons donc cette route qui se trouve après cette liste, j'accepterai une variable d'ID utilisateur. Cela signifie que lorsqu'elle appelle cette route, la personne doit envoyer ces données. Ensuite, j'utiliserai ces données pour filtrer la recherche. C'est là, je vais juste filtrer où l'ID utilisateur est égal à demander aux PM de faire un ID utilisateur C'est-à-dire qu'il s'agit d'un paramètre, c'est-à-dire de PMs. Ainsi, seuls les nœuds de cet utilisateur seront affichés. Alors testons-le. Oui, je vais juste utiliser Postman pour ça. Maintenant, je vais juste écrire rah sur gmail.com. Il s'agit d'un nom d'utilisateur. J' ai cette demande GAT. Si je l'envoie, alors je ne vois que les deux données, qui sont les miennes et qui s'affichent maintenant. Cela signifie donc que cela fonctionne parfaitement. La prochaine chose que nous devons faire est d'installer un package, car lorsque nous envoyons des données via une requête post, notre serveur de nœuds ne sera pas en mesure de les comprendre par défaut. autres termes, supposons que En d'autres termes, supposons que nous envoyions les données du nœud dans le corps du message , car évidemment, nous ne faisons que coder en dur les données du nœud, mais plus tard, nous demanderons ces informations à l'utilisateur. Dans ce cas, nous devons nous assurer que notre serveur est capable de comprendre ces données. Pour cela, nous utiliserons le package Body Passer. Je vais donc simplement utiliser Control C pour arrêter mon serveur et écrire NPM install body passer comme ceci Il convertira les données JC, que nous enverrons depuis le front-end et les rendra lisibles par notre serveur C'est ça. Et pour que ça marche. Nous devons l'utiliser comme intergiciel. Ici, en haut. Tout d'abord, je vais l' importer analyseur de corps égal à require, puis un analyseur de corps Après cela, je dois écrire l'URL du colis body de l'application codée, extended is equal to false, puis je dois utiliser app point use body parser, Jason Ici, étendu est faux. Puisque nous n'enverrons aucune donnée imbriquée dans le corps. La clé n'aura aucune donnée JCN sous forme de valeurs. C'est-à-dire que, comme vous pouvez le voir ici, toutes les données, toutes les valeurs ne sont que de simples chaînes. Mais supposons que nous ayons une sorte de balises, et que ce soit un tableau de chaînes. Dans ce cas, vous devez le rendre vrai, étendu. Donc, comme vous pouvez le voir, cette ligne convertira simplement les données JN pour qu'elles soient lisibles. C'est maintenant, travaillons sur notre itinéraire d' ajout de notes. Plus tôt, nous avions créé un itinéraire pour ajouter une note, mais il s'agissait simplement de stocker des données fictives comme celles-ci Maintenant, travaillons dessus pour pouvoir récupérer les données du corps de la requête, c' est-à-dire celle-ci, et les stocker dans la base de données. Tout d'abord, nous devons en faire une demande de publication, au lieu de Et n'oubliez pas que cette demande de publication ne peut pas être testée dans le navigateur. Nous utiliserons donc Postman à partir de maintenant jusqu'à ce que nous construisions une interface. Maintenant, ici, au lieu de coder en dur, je vais demander l'identifiant du point body point. C'est-à-dire que les données seront au format JCN et que l'identifiant sera sa clé Je vais l'utiliser pour simplement imprimer la valeur. De même, l'ID utilisateur sera le corps du point demandé. Fais-le grand. Demandez un nom d'utilisateur. Je vais demander le titre du point body point. Et le contenu sera le contenu du corps de la demande. OK. À part ça, je ne pense pas. C'est le s. Et je vais simplement écrire le message avec l'interpolation des chaînes Nouveau nœud créé avec un identifiant, puis j'écrirai simplement l'identifiant du troisième point du corps de la demande. C'est juste la réponse. Je veux Sy. Redémarrons ensuite notre serveur. Et maintenant testez-le. Ici, tout d'abord, l'itinéraire est ajouté. N'oubliez pas qu'il s'agira d'un itinéraire postal. Maintenant, pour envoyer des données corporelles, cliquez d' abord sur ce corps, puis Raw et assurez-vous qu'à la place du texte, vous écrivez JS car nous enverrons Jsta Ici, Let's Write ID sera 005. Parce qu'il y a quatre notes en ce moment. Je le sais. Le nom d'utilisateur sera le titre du courrier sera Hard the M note. Et le contenu sera Ceci est le contenu. Maintenant, essayons. Nous allons simplement le publier et voir un nouveau nœud créé avec l'ID 005. Et c'est 005, j'ai oublié. Que ce soit à zéro, mais ça va. Si j'y vais, si j'écris une liste, puis que j'écris le sur gmail.com, nous recevrons Ensuite, vous pouvez voir le dernier en date ici. Et si je vais également dans la base de données et que je l'actualise , vous pouvez voir. 001-00-2003, toutes les données sont là. Voyons si je peux simplement le modifier 210 de plus et le mettre à jour. C'est ça 005. Et si je recommence , tu verras. Je peux juste énumérer uniquement les notes de R pour en donner une idée. Alors c'est tout. Pour cette vidéo, rendez-vous dans la vidéo suivante. Merci. 9. Itinéraire pour la mise à jour et la suppression: Bonjour, bon retour. Il est maintenant temps de créer également un itinéraire pour mettre à jour une note. Vous trouverez donc ci-dessous l'ajout d'un itinéraire. Application Rite Tot. Et comme il s'agit d'une question de mise à jour, nous utiliserons put Il s'agit d'une demande de mise à jour au STP, et je vais donner le nom de l' itinéraire dans les notes Ce sera une fonction de synchronisation, qui donnera une réponse à la demande. OK. Maintenant, la façon dont nous procédons est d'écrire R : la note de mise à jour est égale à un poids, puis le point du modèle de note. Cette fois, nous écrirons « not find », nous en écrirons bien un et nous verrons, nous avons remplacé remove delete, et nous utiliserons une mise à jour comme celle-ci. Et maintenant, la façon dont nous procédons est d'abord écrire la condition entre parenthèses ou entre accolades. La condition est que l' identifiant doit être égal à l'identifiant du point du corps du point demandé. Nous allons donc envoyer l' identifiant via le corps. Alors, que voulons-nous mettre à jour ? Nous voulons mettre à jour le champ de titre le titre point par point de titre de la demande de valeur et le champ de contenu le contenu du corps du point de la demande de valeur. Voici donc la condition Voici les champs que nous voulons mettre à jour et les données pour lesquelles. Pour la dernière, nous écrirons que neu est égal à vrai. Cela signifie que cette requête renvoie les données. Si nous n'écrivons pas que neu est égal à vrai, cela renverra les données précédentes, et non les données mises à jour. C'est pourquoi il renvoie simplement les données mises à jour, qui seront stockées dans cette variable de mise à jour. Alors n'oubliez pas ceci, trouvez-en un et mettez-le à jour. C'est ainsi qu'il faut procéder, et il renvoie les données mises à jour. Ensuite, nous allons créer une variable de réponse. Ici, nous allons écrire un message indiquant que la note a été mise à jour avec un identifiant. Et l'identifiant sera request point body ID. Ensuite, nous enverrons également les données de cette note qui sont mises à jour comme celle-ci. Cela signifie que nous renvoyons également les données. Pour le voir dans la console. C'est ça. Rien d'autre Restaurez Json qui est point de réponse Jason et nous enverrons la variable de réponse, comme ceci. Nous allons le tester comme vous pouvez le voir ici. Dans le numéro 5. Je vais mettre à jour les données. Ici. Ce sera Le nom de l'itinéraire est List notes date. Il faut le mettre. N'oubliez pas. L'ID est le titre 005. C'est mon contenu comme ça. Je ne veux rien changer d'autre. Je vais juste voir ce qui s'est passé. Il y a eu une erreur, je crois, mais pourquoi ? Non Je n'ai pas changé. Je m'ai laissé vérifier à nouveau. Remarques, mise à jour. Ensuite, je dois en trouver un et mettre à jour l'identifiant corporel demandé. Et une pièce d'identité ici. OK, l'identification était erronée, évidemment. Je le change. Maintenant, si j'écris put C, c'est mon contenu mis à jour. Et si je vais dans la base de données, et si je l'actualise, vous pouvez dire que c'est mon contenu mis à jour. Les autres détails resteront les mêmes. OK. L'itinéraire de mise à jour fonctionne donc également. Maintenant, le prochain itinéraire que nous voulons est l'itinéraire quotidien. Pour la mise à jour, nous utilisons la requête Put route put. Ici, nous allons utiliser cette suppression. Il s'agit d'une suppression de points. Ici, vous pouvez voir que Abdo reçoit le message Put et supprime. L'itinéraire sera composé de notes, suppressions, puis d'un punch de synchronisation. Demande de réponse. La requête sera « Supprimer la note est égale à un poids ». Notez qu'il faut en supprimer un. Ici, je vais utiliser delete one car évidemment, je ne fais qu'en supprimer un, et la condition sera que ID sho soit égal à request point by ID. Ensuite, je créerai une réponse J'écrirai un message égal à « La note a été supprimée avec un identifiant ». Ensuite, vous demanderez un identifiant body point. Et n'oubliez pas qu'il ne fournira pas les données. Il va juste écrire, une fois suppression terminée, quelque chose comme ça. Vous le verrez dans la réponse, mais cela ne renvoie pas les données supprimées de cette manière. Ensuite, j'écrirai simplement le point de réponse C a. J'écrirai des pons ici. Enregistrer. Maintenant, testons également cette route. Et maintenant, je vais supprimer l'itinéraire mis à jour. Celui-ci. Je vais utiliser delete, tout d' abord ici, puis changer le nom de l'itinéraire en delete. Et ici, je n'ai pas besoin d' envoyer toutes ces choses. Seulement si j'envoie juste une pièce d'identité, alors c'est bon. Si j'envoie toutes ces données, c'est bon aussi. Je vais donc simplement écrire le n et voir que la note a été supprimée, que T a supprimé le compte 1. C'était donc la réponse du serveur. Et si j'y vais et que j'y suis, ce sera là. Cela ne devrait pas figurer dans la base de données. Rafraîchissons-le. Voyons voir si 005 existe ou non. S. Le dernier est 00004. C'est le dernier. Tous nos itinéraires ont donc été rédigés et fonctionnent parfaitement. Dans la vidéo suivante, nous allons simplement organiser nos itinéraires d'une certaine manière. 10. Organiser nos itinéraires: Bonjour. Nous avons écrit toutes nos routes dans le fichier JS du serveur. Si vous le souhaitez, vous pouvez le faire, mais j'aime le rendre plus organisé. effet, dans les applications plus volumineuses, vous aurez beaucoup plus de routes à gérer. Comme vous pouvez le constater, nous disposons de quatre itinéraires pour gérer les nœuds. Ce sont ces quatre là. Séparons-les donc dans un fichier différent. Je ne parle pas de cet itinéraire. Je parle de ces quatre itinéraires. Donc, arrêtons d'abord le serveur. le dossier asserts, créez un nouveau dossier routes et créez un nouveau fichier à l'intérieur de celui-ci créez un nouveau fichier Jouets de nœuds. C'est-à-dire que ce sera le nœud de route. Ici, tout d'abord, inp express est équivalent à require Express, puis ici, nous utiliserons le routeur de la bibliothèque Express routeur Express est-il comme celui-ci et nous assurerons d'exporter ce routeur afin que nous puissions l'importer ultérieurement dans le fichier JS du serveur Ensuite, accédez à Servers Here, fichier JS du serveur. Et coupez les quatre itinéraires sauf le trajet d'origine. Ici, à partir du point de l'application, ce post gay est mis et supprimé, coupez-le, accédez à ces itinéraires ici et collez-le simplement comme ça. Maintenant, au lieu de ce fichier app.gg, nous allons utiliser Router Et n'oubliez pas d' importer le modèle de nœud. Donc, ce nœud const droit est égal à require . Ce sera modèle extérieur, notez comme ça, et ici, écrivez simplement routeur Ici aussi. Puisque vous pouvez dire qu'il s'agit de notre propre fichier de routeur. C'est-à-dire que nous utilisons ce routeur express. Et vous pouvez supprimer les barres obliques du nom du routeur. Parce que cela est courant dans les quatre itinéraires. Nous allons utiliser le fichier JS sur le serveur pour le connecter à nos propres routes. Vous l'aurez compris, tout d' abord, il suffit de supprimer les itinéraires les barres obliques ici également Et là aussi, sauvegardez-le. Maintenant, enfin, dites au serveur le fichier JS d'utiliser les routes écrites dans le fichier séparé. Ici, tout d'abord, le fichier de route mp. Ici, nous allons l'importer ici. C Notez que le routeur exiger la désolé, cela devrait être une note oblique pour les routes Ensuite, je vais simplement l'utiliser comme une application intergicielle, exemple une requête contenant des barres obliques, par exemple le nœud routeur comme celui-ci. le nœud routeur Donc, si vous comprenez cela, les itinéraires seront automatiquement ajoutés Il s'agit de la mise à jour des slash notes slash ad ou slash notes slash Donc, toutes les demandes qui en découlent ont des barres obliques Il détectera, puis nous irons voir, ajouter un appel, mettre à jour cet appel ou supprimer cet appel comme ça. C'est une méthode plus propre. Également. Ce n'est pas important, mais comme toutes les données arrivent dans JCN, j'entendrai également la réponse de Sen au message de JCN, je vais juste écrire l' je vais juste écrire L'API fonctionne comme ça. Et évidemment, maintenant je n'utilise plus ces commentaires. Je sais ce que sont les demandes. Je sais ce qu'est une réponse. Donc, si je dois juste le tester, j'écrirai simplement terminal et P. Es list s mail.com Ce sera une demande Get. Voyons voir, et voyons. Les itinéraires fonctionnent également maintenant. J'ai deux itinéraires ici. J'ai deux notes. S. Et si j'écris John , alors j'ai toutes les notes de John, soit trois et quatre. Notre serveur est donc terminé. Dans la vidéo suivante, nous allons déployer ce serveur sur une application ferroviaire afin qu'elle soit en ligne. 11. Push Code à Github: Bonjour. Notre backend est terminé. Il est maintenant temps de le déployer de la maison locale vers un serveur distant afin que tout le monde puisse y accéder. Nous utiliserons une plate-forme ferroviaire pour le déploiement à la place de Heroku, car aucune carte de crédit n'est requise pour démarrer Avant cela, apportons une petite modification à notre code. Nous devons changer le pot. Puisque le pot est donné, nous devons utiliser le pot donné par chemin de fer dans la variable d'environnement au lieu d'un pot statique. Ici, il suffit d'écrire une constante, de mettre deux processus Env pot et si ce n'est pas le cas, utilisez simplement 3 000 Et voilà, c'est comme ça. C'est donc le seul code requis et ici je peux l'utiliser, je peux simplement utiliser ce put comme ça. OK, la configuration est terminée, je peux juste arrêter le serveur pour le moment. Pour déployer du code, je suppose que nous utilisons Railway, Render ou n'importe quelle plate-forme. Nous devons d'abord envoyer notre code sur Github. Accédez donc à votre compte Github connectez-vous à votre compte Getab, et vous devez créer un nouveau dépôt Écrivez simplement nouveau, puis je le nommerai Notes App API, puis je le rendrai public. Vous pouvez supprimer le fichier Lisez-moi et cliquez simplement sur Créer un dépôt 3 Ensuite, nous devons initialiser Git dans notre projet. Ici, il suffit d'écrire Git dedans, puis d'écrire Git add point puis d'écrire get commit com J'écris juste first commit presenter. Ensuite, prenez la succursale principale. J'espère que tu connais le code G. C'est-à-dire que ce ne sont que des lignes de saisie, et vous pouvez également voir toutes ces lignes ici. Ensuite, ils le copient et le collent et obtiennent enfin Origin Main. Comme ça. S. Allons vérifier si notre code est envoyé ou non. Je vais juste le rafraîchir. Et tu verras. Nous avons le code principal ici, donc, les modèles, oui. Tout y est. De plus, j'ai également poussé ces modules de nœuds, mais ce n'est pas nécessaire, c' est-à-dire que vous pouvez ignorer ces modules de nœuds ainsi que n'importe quel fichier NV à points C'est donc tout pour la première étape de la vidéo suivante, nous allons nous connecter à Railway et y déployer notre serveur. 12. Déployer votre référentiel: Bonjour. Passons maintenant à l'application Railway Point. C'est une bonne application ferroviaire comme celle-ci, présentateur. Vous pouvez voir, apportez votre code. Nous nous occuperons du reste, de toutes ces choses. Voici donc le quai ferroviaire. Je l'aime bien. Vous pouvez également créer une base de données. En plus de télécharger n'importe quel code de service. Cliquez simplement sur Se connecter. Connectez-vous avec Github. Et voyez. Et comme je l'ai déjà fait je me suis déjà connecté avec mon compte guitub Je suppose donc que c'est pour cela qu'il a été envoyé directement ici sans demander à s'authentifier. Mais vous devrez certainement vous authentifier via votre compte guitab Ensuite, après vous être connecté à Here, créez simplement un nouveau projet. Ensuite, vous pouvez voir qu'il existe de nombreuses options : déployer depuis Gitab po, déployer un modèle statique Vous pouvez également créer une base de données ici , car vous pouvez utiliser Mongo DB ici Vous pouvez ensuite utiliser ce lien sur votre serveur si vous n'utilisez pas Atlas. C'est donc à vous de décider. Je vais juste déployer depuis Github po. Alors je me suis déjà authentifié avec mon Github. Mais vous ne verrez peut-être pas toutes ces choses. Vous devez configurer l'application Github et ainsi de suite. Il vous suffit donc de cliquer dessus et de saisir simplement un mot de passe. Ensuite, ici, je vais utiliser cette API de notes. Et aussi, je me souviens que vous avez la possibilité d' autoriser l'accès à tous les référentiels ou à certains d'entre eux. J'ai donc fourni tous les référentiels parce que c'est à vous de décider. Cliquez sur Notes, API. Ensuite, si vous avez des variables d' environnement, vous pouvez également les ajouter ici ou ultérieurement. Mais je vais simplement cliquer sur Déployer maintenant. Ce sera donc fait en quelques secondes. Mais comme vous pouvez le constater, il est très facile de déployer notre serveur. Vous n'avez pas besoin de faire autant de configuration et vous pouvez maintenant voir que c'est un succès. La dernière chose à faire est de créer un domaine. C'est le point final de notre API, qui peut être utilisé depuis le client pour accéder à ce serveur. De toute évidence, nous avons besoin d'une sorte d'URL. Accédez aux paramètres ici. Cliquez simplement sur Générer le domaine. Il génère l'URL de l'API de notre serveur et C. Nous pouvons voir notre API. Et si je clique simplement dessus, alors maintenant notre itinéraire d'origine affiche le résultat. C'est l'API qui fonctionne. Comme vous vous en souvenez, c'était la route du retour. Maintenant, testons également cet APA dans Postman. Je vais juste le copier. Fais sortir le facteur Ici. Au lieu de cet hôte local, j'utiliserai le I will use Notes. Au début, je dois écrire HTTPS, puis colonne. Maintenant, il suffit de tout trouver pour Ravel, envoyer et de voir, nous avons les itinéraires ici Maintenant, si j'essaie d'ajouter un itinéraire et de le publier, je pense que celui-ci a été supprimé et que c'est le contenu. Je pense que 005 n'y est pas. Publions-le. S, nouveau nœud créé. Et maintenant ilist@gmail.com et obtenez-le , donnez-lui une demande Get. Ensuite, je peux voir les dernières données de mon nœud ici. Cela signifie donc que notre API a été déployée avec succès et qu'elle fonctionne parfaitement. Tout le code côté serveur est donc terminé. Dans la prochaine vidéo, nous allons commencer à travailler sur notre application Flutter Merci. 13. Créer un projet de flutter: Bonjour, bienvenue sur une nouvelle vidéo. Il est maintenant temps de travailler sur notre front-end. La première chose à faire est de créer un nouveau projet Flutter. Je suppose que vous avez déjà installé le système Flutter S DCNO Maintenant, comme vous pouvez le voir, nous avons déjà ce backend. Maintenant, c'est dans l'application Notes, ouvrez un terminal. Ouvrez un terminal. Et assurez-vous d'avoir installé Flutter. S. Quand j'écris la version Flutter, je peux voir la version Flutter 3.10 Maintenant, j'ai ouvert le terminal ici car nous avons déjà créé le développement du back-end dans ce dossier. Ici, je vais juste écrire une lettre, créer un front-end comme celui-ci. Créons-le. Vous pouvez utiliser n'importe quel nom de projet ou n'importe quel emplacement. Je préfère juste qu'il en soit ainsi. Et après cela, vous pouvez voir le front-end ici, je vais supprimer le dossier Windows, puis le Web, puis Linux, puis macOS, puis tester. Puisque je ne construirai pas pour ces plateformes. Ouvrez maintenant ce projet dans le code. Comme ce front end. Ne lancez pas l'application maintenant. Je vais simplement changer le nom de l'application dans ce fichier manifeste Android principal. J'espère que vous savez qu'ici, je vais simplement écrire une application de notes. Ainsi, chaque fois que vous créez cette application sur votre mobile, le nom de l'application sera Application Notes au lieu de Frontend. Et vous pouvez aussi en faire du capital, vous pouvez également lui donner de l' espace. C'est à vous de décider. C'était juste le nom. Maintenant. Créons une page d'accueil car je sais évidemment que je n' utiliserai pas ce code factice Dans ib, créez un dossier appelé pages, et à l'intérieur de celui-ci, créez un point point de la page d' accueil. Nous allons maintenant créer un budget complet de l'État pour écran d' accueil avec une barre d'applications et un bouton d'action flottant pour le moment. Tout d'abord, importez le package de matériel, puis créez un widget complet d'état, nommez-le page d'accueil. Ensuite, ici, je vais retourner un échafaudage puis l'application. Ce sont tous des widgets de Flutter. Je suppose que vous avez les connaissances de base du flutter. L'application de notes de texte Ensuite, le titre centré est égal à true. Après la barre, il suffit d' écrire le bouton d'action flottant, puis le bouton d'action flottant sur le bouton d'action flottant, laisser vide pour le moment et d'ajouter des icônes dans l'icône child const Comme ça, sauvegarde-le. Ensuite, dans le fichier d principal, supprimez cette fausse page d'accueil Il s'agit de la valeur par défaut. Ensuite, je supprimerai également ces commentaires. Je suis juste en train de lui écrire des notes flottantes. Et ici, dans la maison. Je vais écrire la page d'accueil. OK, sauvegardez-le. Maintenant, je vais démarrer l'émulateur Pixel Five. Vous pouvez utiliser un émulateur, ou vous pouvez également connecter votre propre appareil réel, car je sais ce studio Android est un gros logiciel et peut également être à la traîne avec votre système Après cela, lancez simplement le débogage en cours d'exécution. Ça va prendre du temps, attends. Mais nous savons déjà que notre serveur, c'est-à-dire le back-end, fonctionne parfaitement. simple fait de le connecter au front-end est relativement facile car la majeure partie de la logique principale se trouvait du côté serveur. Il y sera. Ensuite, si je vois cette application ferroviaire, assurez-vous d'en savoir plus sur cette plate-forme ferroviaire, car elle est certainement très utile. Vous avez tellement de choses en matière de production et développement que vous pouvez également créer des environnements. Parce qu'avec de la pratique, vous comprendrez et assurerez que ce plan de démarrage a une limite. Mais évidemment, lorsque vous êtes débutant, vous ne pourrez pas dépasser cette limite car c'est juste à cette limite car des fins de test. Vous pouvez le déployer et présenter vos projets aux employeurs. C'est à vous de décider. OK. Donc, ici, je crois que le serveur fonctionne et vous voyez, nous avons l'application Notes. Je vais simplement supprimer cette bannière Debug. L'affichage des bannières de débogage tombe. OK. Voilà pour cette vidéo. S dans les prochaines vidéos. Merci. 14. Créer un modèle de note: Dans notre application, nous traiterons des données des nœuds. Il est très important d' avoir un modèle pour cela. Nous utilisons des modèles pour donner une structure prédéfinie à nos données au lieu de simplement les utiliser partout sous forme de paires clé-valeur de station. Donc, dans Lib, créez un dossier nommé models, et à l'intérieur de celui-ci, créez un nouveau fichier point Note point dart Nous allons maintenant créer une classe de modèle pour node. Et cela aura toutes les propriétés, que nous avons déjà définies dans le schéma Mongo DV Node, c' est-à-dire ce fichier JS Ici, commencez simplement par l'ID de chaîne. Chaîne d'identifiant utilisateur, titre de chaîne désolé, je chaîne de titre. Contenu de chaîne La date d' ajout crée un constructeur Remarque : C'est exact. Cet identifiant de point, ce nom d'utilisateur, ce titre, ce contenu et ce point ajouté. Vous pouvez accéder au schéma du nœud et voir que nous y avons également ces propriétés. Travaillons maintenant sur la sérialisation JCN. Créons un punchon pour convertir données JCN provenant de la base de données vers cet objet nœud, ainsi que de cet objet vers le format JS, qui est compris par le serveur Voici donc tout simplement ce qu'il faut. Usine. Notez qu' à partir d'une carte comme celle-ci, nous enverrons une donnée cartographique, qui sera une carte dynamique sous forme de chaîne puis nous renverrons un objet de note. Ici, nous devons transmettre des valeurs ID map ID. Assurez-vous donc que ces touches sont les mêmes que dans DV. Autrement dit, si vous voulez savoir, je parle de ces clés ici. Nom d'utilisateur de ces clés. Ceci est également mentionné dans notre schéma. Je ne veux juste pas que tu fasses une erreur stupide ici. ID utilisateur : ID utilisateur de la carte. Titre de la carte, ce sera le titre. Carte du contenu. Contenu. Date d'ajout. N'oubliez pas que si nous écrivons la date ajoutée de cette manière, cela ne fonctionnera pas car elle sera au format chaîne ou séquence adjacente, mais nous voulons un format date/heure Nous allons le rédiger, c'est-à-dire le coller. Nous analyserons cette date au format datetime et essaierons de la passer pour qu'elle renvoie null en cas d'exception plutôt qu'en cas d'erreur Autrement dit, si par erreur, la date n'y figure pas, elle renverra simplement null. Cela ne lancera aucune exception ou vous pouvez dire d'arrêter notre application. Et comme vous pouvez le dire, il s'agit d'une étiquette nulle. Au moins, nous serons en sécurité de cette façon. Au moins, l'application ne plantera pas. De cette façon, les données sont converties de JCN en cet objet, et une autre fonction est alors Cela renverra une carte de chaîne, carte dynamique à deux cartes, et cela renverra une carte. Il aura un ID en tant qu'ID utilisateur en tant qu'ID utilisateur, un titre en tant que titre , puis une date d'ajout. Maintenant, la date ajoutée, que nous allons envoyer, sera au format date/heure, mais nous devons maintenant la reconvertir au format de chaîne, qui est compris par la base de données. Il suffit donc d'écrire added et de le convertir en chaîne 2i86 01. N'oubliez donc pas que nous sommes à nouveau en train de convertir en chaîne à partir de la date et de l'heure. Il s'agit d'un concept simple. Voici donc nos données de notes. Il suffit de tout enregistrer. Et avant de poursuivre, j'aimerais d' abord arrêter l'application. Et je vais installer quelques dépendances. Nous utiliserons le fournisseur comme gestion de l'état dans notre application. L'autre package sera un UUID pour créer des identifiants uniques pour notre utilisateur Ensuite, nous avons besoin du package SDTP pour appeler l'API. Donc, soit vous pouvez aller sur le site pub point, les rechercher et les coller dans la section des dépendances du fichier PUPS DOMl, soit vous pouvez simplement écrire une lettre dans la commande Pub add UUI, vous pouvez simplement commencer avec le fournisseur UUID et HTTP et Cela installera donc tout. Voyons voir s'il y a une erreur ou non. Dans le fichier Pups point Yamal, vous pouvez voir que les fournisseurs UUID et HTTP sont Voilà pour cette vidéo. 15. UI de page d'accueil: Bonjour. Exécutons à nouveau notre application. Dans cette vidéo, nous allons travailler sur l'interface utilisateur de la page d'accueil. Sur cette page, nous allons afficher toutes les notes de cet utilisateur. Créons d'abord une interface utilisateur de base. Ici, nous avons une barre, nous avons le bouton d'action flottant. Dans le corps, commençons par une zone sûre vigilante. Ainsi, s'il y a une encoche ou quoi que ce soit lié à l'appareil, ce sera dans la zone de sécurité. Ensuite, nous utiliserons le générateur de points Grid View. Donc, si vous le souhaitez, vous pouvez utiliser le mode liste. Mais ici, comme c'est noté, la vue en grille sera plus belle. Donc, ici, dans le délégué à la grille, vous devez écrire const sliver grid delegate avec un nombre d'axes transversaux fixe comme celui-ci Je sais que c'est très confus, mais ici, écrivez simplement aussi. Et ce code le signifie simplement à l'écran. Nous n'aurons que deux éléments à l'horizontale. Vous verrez donc quand cette URL sera prête. Ensuite, comme vous le savez, dans la liste, nous avons également le nombre d'articles. Pour le moment, je vais juste utiliser un décompte fictif. Il y en a donc cinq dans le générateur d'objets. Rédigez le contexte et l'index. Ici, je vais retourner que la couleur du conteneur sera couleur bleu à points pour le moment et la marge sera inférieure dans les ensembles des cinq. Et un point-virgule ici. Redémarrez ou sauvegardez-le. Et tu verras. s'agit de la vue en grille, et il n'y a que deux éléments à l'horizontale ou dans une rangée. Donc, si vous en donnez trois, ce sera suffisant, mais il est évident que cela n'aura pas l'air beau parce que c'est un appareil mobile. Il a un petit Alors c'est juste l'interface utilisateur. Maintenant, évidemment, nous aurons besoin d' une page où l'utilisateur peut ajouter des notes. À l'intérieur des pages, créez un nouveau fichier, ajoutez une nouvelle note à Dart Mappez le matériel, puis créez un widget d' état pour ajouter une nouvelle note. D'accord. Ici, donnez simplement un échafaudage. Un bar. Laisse-le pour le moment. Dans le corps, il y a une zone de sécurité, et dans la zone de sécurité, il y a une colonne. Et les enfants le laissent vide pour le moment. D'accord. Accédez à cette ajout de nouvelles notes depuis la page d'accueil. Nous avons ce bouton d'action flottant sur la page d'accueil ici. Il suffit d'écrire la navigation dans le contexte, pousser le contenu de la page. Ensuite, dans le générateur, insérez le contexte ici et ajoutez une nouvelle note. D'accord. Et je vais simplement lui donner une nouvelle propriété. Il y a un dialogue en plein écran pour deux. Il s'agit donc simplement d'une propriété de l'itinéraire de la page matérielle. Si vous ne le souhaitez pas, vous pouvez également le supprimer. Donc, si je clique sur plus, il a cette croix au lieu d'une flèche arrière. C'est donc comme une boîte de dialogue en plein écran au lieu d'une page. C'est la seule chose que fait ce code. Nous avons également l'écran d'ajout de nouvelles notes. Nous travaillerons sur l'interface utilisateur dans la prochaine vidéo. 16. Ajouter une interface utilisateur de Note: Travaillons sur la page d' ajout d'une nouvelle note. Ici, nous aurons besoin de champs de texte pour que l'utilisateur saisir le titre et le contenu de la note et d'un bouton pour l'enregistrer. Donc, tout d'abord, je vais commencer par avoir un contrôleur d' édition de texte. Je sais qu'il y aura un contrôleur de titre. Le contrôleur est égal à Tex Thing Controller. Un autre sera le contrôleur de nœuds. C'est-à-dire que ce sera le nœud réel. J'ai alors les manettes dans le corps. Créons un champ de texte. À l'intérieur de la colonne, le contrôleur sera le contrôleur de titre. La décoration sera une décoration d'entrée constante dans le texte sous forme de bordure de titre , aucune bordure de saisie. Puis après la décoration d'entrée. Faisons preuve de style. Le style sera un textile constant. Faisons en sorte que la taille de police soit la même. Ce ne sera pas un pool de polices. OK. Et puis je veux une mise au point automatique. au point automatique sur Pro. Sauvegardons-le. Si j'y vais et si je clique sur l'annonce, je peux voir que l'autofocus est là et que le champ de titre est là. Je vais également donner un peu de rembourrage à la colonne. Enveloppez-le avec un rembourrage et ici, il sera symétrique (horizontal, 20, vertical Je vais juste le sauvegarder et voir. Ça a l'air décent. Il s'agit d'un titre, le champ de saisie suivant sera le champ texte de remplissage de texte ici. Le contrôleur sera le contrôleur des notes. Nombre maximum de lignes. Je vais le donner nul pour que l'utilisateur puisse appuyer sur Entrée et descendre , c'est-à-dire qu'il peut avoir plusieurs lignes, puis le style sera constant, le textile sur la taille est 20, puis la décoration avec décoration de saisie dans note de texte, bordure de saisie. Sauvegardez-le. Maintenant, si je clique dessus, nous avons le titre, nous avons la note. Mais si je clique sur la note ici, c'est le seul point sur lequel je me concentre. Si je clique n'importe où dans cette zone restante, le focus n'est pas visible. Pour le faire de cette façon, nous pouvons simplement ajouter la deuxième note en mode expansé. Élargi comme ça. Et maintenant, si je reviens en arrière, si je reviens à l'écran et que je clique n'importe où sur l'écran, nous avons maintenant la note ici parce qu' elle occupe tout l'espace ici. Parce qu'évidemment, je veux que le titre soit plus petit que le billet lui-même. Et si je clique sur Entrée, nous avons plusieurs lignes. La seule chose qui reste est un bouton sécurisé, que je vais donner dans la barre d'applications. Ici, faites des actions, puis une icône sur laquelle vous appuyez sera vide pour le moment. Et puis l'icône sera une icône const. Remarque sur les icônes : ajouter des couleurs, des points verts, taille 30. Sauvegardez-le. Cette icône sera donc en haut de la page C. Nous avons l'icône de sauvegarde. Il peut soit simplement le sauvegarder, soit revenir en arrière. Et assurez-vous de disposer également de ces contrôleurs de montage. Contrôleur d'édition de texte Dot Dispose. Notez que le contrôleur ne dispose pas comme ça. Que lorsque nous reviendrons et reviendrons sur la page, il y aura une nouvelle instance des contrôleurs. Voilà pour cette interface utilisateur. Dans la prochaine vidéo, nous travaillerons à la création d'un fournisseur. Merci. 17. Créer un fournisseur de notes: Bonjour, bon retour. Il est maintenant temps de gérer les données. Pour cela, nous devons créer un fournisseur pour les nouvelles données. Donc, dans le dossier Lip, créez un nouveau fournisseur de dossiers et créez un nouveau fichier à l'intérieur de celui-ci . Fournisseur de notes point point. Alors allons-y. Tout d'abord, importez matériel afin de pouvoir utiliser ce fournisseur de notification de changement, puis importez des modèles et ne commencez pas OK. OK. Créons maintenant une classe note provider extends change notify provider. Ensuite, nous aurons une variable, qui consistera en une liste de tous les nœuds. Les nœuds seront égaux à une liste vide pour le moment. Cette année, nous récupérerons les notes de l'APA plus tard. Pour le moment, nous allons simplement le faire localement. Créez ensuite une fonction pour ajouter une note. Il acceptera une note et nous ajouterons simplement cette note dans la variable. Et puis appelez Notify Listeners comme ceci. C'est un fournisseur très simple. Alors j'espère que vous savez que nous devons enregistrer notre fournisseur dans le fichier principal. Ici, enveloppez l'application Material avec igd et écrivez le fournisseur Ensuite, il faut mentionner les fournisseurs. J'ai utilisé plusieurs fournisseurs parce que supposons qu'à l'avenir vous souhaitiez ajouter d'autres fournisseurs et tout, alors vous pouvez le faire. Nous utiliserons le fournisseur de notification de modification, puis les contacts, et le nom de notre fournisseur est notes. Un fournisseur comme celui-ci. Ensuite, il suffit de le sauvegarder. Et on commence. Créons ensuite une fonction à l'intérieur, ajoutons une nouvelle note, dans laquelle nous créerons un modèle de note et l'enverrons au fournisseur de fonction. Ici, il suffit d'écrire ajouter une nouvelle note. Maintenant, tout d'abord, nous allons vérifier que le titre est là. Si le contrôleur de titre, le texte Tm est vide, alors nous allons afficher un snack p careful messenger of context, qui affiche le widget snag p, snag pow dans le contenu, c'est simplement que le titre ne peut pas être Ainsi, rendez-le constant et revenez simplement à partir de là. Je ne veux pas que le code Billow s'exécute. Si le titre est vide. Ensuite, s'il n'est pas vide, alors je créerai une instance de note qui est une nouvelle note, c'est à noter. Et ici, je vais transmettre l'identifiant des données. J'utiliserai le package UUID pour créer des identifiants uniques afin de simplement créer un identifiant UU comme Cela créera donc des identifiants uniques comme celui-ci. Ensuite, nom d'utilisateur, pour l'instant, je donne des données statiques. Supposons donc Ajo Lag Val pour le moment. Ce n'est qu'un mannequin. Plus tard, nous utiliserons les préférences partagées. Mais pour l'instant, il suffit de le tester. Le titre sera le texte du contrôleur de titre, et le contenu sera le texte du contrôleur de notes et un point D sera ajouté comme celui-ci. Il s'agit de notre modèle de nœud. Ensuite, nous utiliserons simplement le fournisseur fourni hors contexte. Voici de quel fournisseur nous avons besoin. Nous avons besoin d'un fournisseur de nœuds. Et comme cela ne fait pas partie de la fonction de facturation, nous écrirons Listen, is the falls parce que je ne veux pas qu'il tienne compte des modifications. Parce que s'il était à l'intérieur du bâtiment, il peut se rebeller. Mais évidemment, cela se trouve dans une fonction, et je vais appeler la note d'ajout et envoyer la nouvelle valeur de note comme ceci. Ensuite, je montrerai à nouveau Messenger of Context Show Snag Bar Snag Bar Snag Bar. Et le contenu sera ajouté avec succès. Ensuite, je vais laisser le navigateur apparaître comme ça. Et puis appelez cette fonction à l'intérieur du bouton icône ici. Celui-ci. Appelez simplement une nouvelle note. Voilà pour cette vidéo. Dans la prochaine vidéo, nous allons travailler. Nous travaillerons sur cette page d'accueil sur TY. 18. Afficher les notes en page d'accueil: Bonjour. Nous pouvons donc maintenant ajouter de nouvelles données. Travaillons donc sur l'interface utilisateur des notes, qui se trouve sur la page d'accueil où nous allons afficher toutes les notes. Avant cela, je vais juste puisque le nom du fichier est fournisseur de notes, je vais en faire un fournisseur de notes et non une note. Et puis ici, il y aura des notes, et puis ici, ce seront des notes. C'est ça. Ce n'est pas quelque chose de très important, mais c'est comme si le nom du fichier avait été fourni avec des notes. Passons à la page d'accueil ici. Ensuite, je vais d'abord écrire à mon fournisseur. Ici, le fournisseur de notes note le fournisseur égal au fournisseur de contexte, et c'est le fournisseur de notes. Et je dois l'écrire dans le projet de loi. Comme ça. Ensuite, dans la zone enfant de sécurité ici, je vais d'abord publier un texte de manière conditionnelle s'il n'y a aucune note disponible Ici, je vais juste écrire que le point du fournisseur de notes est vide. Affichez ensuite const center. Enfant centré. Et dans le texte, je n'écrirai pas encore de notes. Comme ça, c'est tout. Ainsi, l'utilisateur remarque qu'aucune note n' est disponible et qu'il puisse l'ajouter. Ensuite, dans le générateur de points de la vue en grille. Le nombre d'articles sera indiqué par notes du fournisseur de notes. Ensuite, dans le générateur d'articles. Tout d'abord, je vais avoir le modèle de note, puis écrire la note actuelle est égal aux notes du fournisseur de notes et à l'index. Donc, évidemment, c'est une vue en grille, les nœuds individuels seront là. C'est évidemment du zéro à l'indice jusqu'à zéro, un, deux comme celui-ci. Ensuite, dans le récipient, retirez la couleur bleue ici car il ne s'agissait que d'un mannequin Ensuite, la marge et en dessous marge droite donnent quelques inconvénients de rembourrage tous les dix, puis donnez une boîte bordure décorative à la boîte de décoration Ensuite, la couleur de la bordure sera les couleurs 3 points gris, W 2 puis à l'intérieur de la boîte, rayon de bordure de la décoration circulaire, donnez-lui dix. OK. Puis l'enfant du conteneur. Nous devons sortir de la décoration de la bordure, puis ici, l'enfant sera une colonne. L'alignement de l'axe transversal sera l'alignement de l'axe transversal au début. Dans les enfants, montrons tout en haut le titre du nœud. Titre actuel de la note , qui n'est pas nul. Style textile constant. Poids de la police, poids de la police, point gras, taille de police 20. Ensuite, les lignes Max lui en donnent une, c' est la propriété de ce texte, puis le dépassement de texte, c'est-à-dire le débordement , doit être une éclipse de point de débordement Cela signifie simplement le poids, je vais vous montrer Tout d'abord, voyez tout le code ici. Donc, Max ligne 1, c'est-à-dire que je veux juste que le titre soit sur une seule ligne. Supposons que le titre soit très grand, donc je ne veux pas qu'il soit en deux ou trois lignes. Faites-en une ligne, et le texte restant sera composé d'ellipses en forme d' éclipse, désolé Cela signifie point point point point comme celui-ci. Ça n'aura donc pas l'air très mal. Ensuite, après ce texte, donnez quelques œuvres en taille et en hauteur sept. Ensuite, je dois écrire la description. La description est à nouveau une grille de texte contenant le contenu de la note actuelle. Ce n'est pas nul, alors encore une fois le textile, taille, donnez-lui 18, les couleurs font du gris, faites 700. Ce ne sont que des styles. Évidemment, vous pouvez donner vos propres styles pour lui donner une belle apparence. Ensuite, après le style à l'intérieur du texte, écrivez à nouveau Max lignes 24 ici cette fois, puis débordez pour déborder eps Maintenant testons-le H. Je viens de tout enregistrer. Et maintenant, tu vois, il n' y a pas encore de notes. Et j'écris une nouvelle note, ma première note et j'écris. Il s'agit d'un contenu factice. Agrandissons-le pour que débordement de texte fonctionne et faisons-le en ellipses J'espère que cela fonctionne. Et si j'appuie sur Enregistrer, puis que je vois le nœud correctement, alors c' est un contenu factice et il y a des points de suspension Et si j'y arrive, Max fait la queue jusqu'à cinq. Voyons ce qui va se passer ? OK. Il y a le trop-plein. À quatre heures. OK. Donc ça a l'air bien. Nous avons le titre ici en gras, nous avons le texte. Et n'oubliez pas que pour le moment, cela n'est pas enregistré dans la base de données. C'est juste au local. Donc, si je l' actualise, ces données disparaîtront. Et pour le moment, je me concentre uniquement sur le fournisseur. Plus tard, nous connecterons le service API à ce fournisseur. Maintenant, évidemment, nous pouvons ajouter des données. Mais nous devons également créer une fonction pour mettre à jour et supprimer la note. Accédez aux notes fournies ici et ci-dessous, ajoutez une note, j'écrirai une note nulle. Cela demandera les données du nœud. C'est le nœud à mettre à jour. Maintenant, je dois mettre à jour cette valeur. Tout d'abord, dans cette liste de notes, car elle sera affichée à l'utilisateur. Je dois connaître l'index de cette note dans cette liste. J'écrirai dans index of note is equal to notes index of then element notes où chaque fois que vous trouvez l'identifiant de l'élément égal au nœud envoyé, obtiendrez l'index. Donc, ce que je veux dire par là, c'est qu'il parcourra cette note en boucle et vérifiera l' identifiant de toutes les notes par rapport à cet identifiant. Et s'il l'obtient, nous obtiendrons ici l'indice censé être en deuxième position. Ensuite, j' écrirai simplement des notes, c' est-à-dire l'index des notes de cette liste et je les remplacerai par notre nouvelle note mise à jour, puis j'écrirai des notifications aux auditeurs Ce n'est qu'une logique de base. Nous allons alors obtenir l'index et remplacer cette valeur d'indice dans ce tableau par cette nouvelle variable de nœud. De même, nous allons faire quelque chose pour la fonction du nœud différé. Je vais obtenir l'index de cette note, puis j'écrirai simplement cette liste de notes ou A, puis je supprimerai l'annonce, et je supprimerai cet index, puis j'en informerai la liste. Cela mettra donc à jour l'interface utilisateur. Et j'espère que vous avez compris que cette mise à jour et cette suppression sont temporaires puisque nous ne le faisons qu'au niveau de l'application. Alors c'est tout. Dans la prochaine vidéo, nous travaillerons également à créer un écran pour éditer une note. 19. Travailler sur la page Edit Note: Bonjour. Bon retour. Dans cette vidéo, nous allons travailler sur l'édition d'une note. Donc, ce que je veux, c'est que lorsque l' utilisateur tape sur une note, il sera envoyé sur la page d' édition où il pourra mettre à jour ou supprimer la note de mort Donc, pour cela, dans les pages intérieures, créez un nouveau fichier . Copiez et collez tout le code d'une nouvelle note. Ensuite, nous apporterons quelques modifications. Copiez-le et collez-le ici, changez le nom du widget qui est modifié comme ceci Ensuite, comme cela modifiera une note, nous devons accepter les données de la note dans le constructeur Ici, je vais écrire une note finale. Notez que ce sera un paramètre obligatoire. Donc cette note. Ensuite, j'attribuerai les valeurs de note à ce contrôleur d'édition de texte. Ici, dans son état, j'écrirai que le texte du contrôleur de titre est égal au titre du widget et je sais que ce n'est pas nul et que t similaire est égal à la note du widget et non au contenu. J'espère donc que vous l'avez compris. Supposons qu'il y ait ce titre, mon premier nœud, ma première note. Ensuite, chaque fois que nous irons sur la page d'édition, elle sera déjà remplie dans le champ de texte. Et ensuite, nous pourrons le modifier. Maintenant, nous n'avons pas besoin de cette fonction d' ajout de note. Nous allons créer ici une fonction pour mettre à jour une note. Vide Ensuite, si le texte du contrôleur de titre , le découpage est vide, comme avant. Nous ne l'autoriserons pas, nous allons donc envoyer un message contextuel à un problème. Et le texte sera intitulé : le titre ne peut pas être vide, et nous reviendrons à partir d'ici. Ce sera constant si tout va bien, nous ne ferons que le texte mis à jour dont nous disposons. Nous allons attribuer au nœud, que nous avons dans le constructeur afin de ne pas mettre à jour les autres Les autres remplissages signifient «   ID », « ID utilisateur », « date ». Ces choses sont déjà dans cette variable, n'est-ce pas ? De cette façon, nous n' avons pas besoin de le mettre à jour. Maintenant, essayez simplement de comprendre ce que je vais faire, c'est le titre du point du widget. Je vais le remplacer par du texte à points du contrôleur de titre, et je n'en ai pas besoin, alors le contenu de Wig Dot Note Do est égal au texte à points du contrôleur de notes. Ensuite, j'appellerai le fournisseur de contexte, puis le fournisseur de notes listen sera faux, et j'appellerai la fonction de mise à jour et enverrai la note qui se trouve dans le constructeur, mais nous l'avons déjà mise à jour Et supposons que l'utilisateur ne modifie pas le contenu. Alors nous n' avons pas non plus à nous inquiéter. Puisque dans le constructeur, nous avons déjà inséré le texte qui se trouvait déjà dans cette variable Le même sera à nouveau mis à jour. C'est ça. Ensuite, j'utiliserai ces messages et j'écrirai simplement le titre mis à jour avec succès. Ensuite, j' écrirai simplement le point de navigation POP cela créera également un nouveau bouton dans la barre d' application pour le supprimer Tout d'abord, ces notes indiquent que nous pouvons y arriver. Je vais changer l'icône, ils cochent simplement le cercle et lui attribuent la note de mise à jour de la fonction comme ça, d'accord ? Au-dessus de ce bouton. Je vais créer un autre bouton qui est un bouton icône. L'icône sera icône en forme d'icône, dodo delay color colors red. Dans la presse, ce que je veux, c'est simplement appeler la fonction fournisseur des notes contextuelles fournies par la note de retard, et j'enverrai une note à points du widget comme celle-ci. De plus, je ne veux pas écouter les modifications car je veux juste appeler cette fonction. Alors j'ai besoin de ce caful et de ce navigateur. Je vais juste écrire. Et ça ne devrait pas être un titre. Ils doivent être notés et supprimés avec succès. C'est ça. C'est tout. Nous devons maintenant accéder à cette page depuis l'écran d'accueil. Accédez donc à l'écran d'accueil. Dans le générateur d'objets. Ici, enveloppez ce contenant avec un puits d'encre et écrivez sur le navigateur tactile le contexte, le ph puis l'itinéraire de la page de matériau Je vais envoyer à la page d' édition de la note avec la valeur de la note et la valeur de la note est la note actuelle ici. Comme précédemment, je vais écrire des dialogues en plein écran. C'est ça. Alors, sauvegardez tout. Pourquoi c'est dans ce grain ? Nous ne voulons pas l'UUID. Nous allons le tester. J'aimerais avoir ma première note. J'écrirai que c' est mon ancien contenu. Notez que si je clique dessus, vous voyez, et c' était le snack-bar avant le snack-bar. Si je clique dessus, nous avons une suppression et une mise à jour. Je vais donc simplement le mettre à jour en. Ceci est mon nouveau contenu, appuyez sur Enregistrer et dites «  c'est mon nouveau contenu ». Si je clique à nouveau dessus et que je le supprime ensuite, ne le supprime pas avec succès, et maintenant il ne prend aucune note. Cela signifie donc que toutes les fonctionnalités fonctionnent correctement avec le fournisseur au niveau de l'application. Dans la vidéo suivante, nous allons enfin intégrer Mongo Db afin que les données qui entrent dans l'application proviennent une vraie base de données. 20. Fonction d'ajout d'une note: Bonjour. Bon retour. Donc, jusqu'à présent, toutes les fonctionnalités ne fonctionnaient qu'au niveau de l'application. Nous ne stockions aucune donnée dans Mongo DV. Il est donc temps d'intégrer également l'API Mongo DB. Ici, dans le dossier lift, créez un nouveau dossier services et à l'intérieur de celui-ci, créez un point de service d'API de fichiers comme celui-ci. Tout d'abord, j'ai besoin du package HTTP. Je vais le donner sous forme de HTTP, alors j'ai besoin de modèles Note model. Créez maintenant un service d'API de classe. Ici, la première chose que nous voulons, c'est une variable statique. Il s'agit d'une URL de base de chaîne constante statique . Qu'est-ce que cette URL de base ? C'est le domaine de Railway App. Allons-y et ici, dans l'application ferroviaire, nous avons le domaine, ce copiez-collez-le ici. Mais assurez-vous d'ajouter la colonne HTTPS ici, puis la base de données, désolé, la base de données, la route. C'est la route des nœuds. Puisque nous n'avons que cette route, cela est mentionné dans le BaseRL Mais évidemment, si vous avez plusieurs routes, vous ne le ferez pas. Maintenant, créez une fonction pour ajouter un nœud. Je le rends donc statique afin que nous puissions appeler cette fonction sans créer d'objet. Ce sera donc le cas à l'échelle du futur. Nommez-le ajouter une note. Ce sera une fonction de chant, et nous allons passer le modèle de note ici. Maintenant, la première chose dont nous avons besoin est l'URI, nous écrivons l'URI de requête, URI. J'espère que vous savez comment utiliser le package STP L'URI sera l'URL de base. Utilisez l'URL de base et ajoutez-la. C'était notre itinéraire. Si vous vous en souvenez côté serveur, alors j'écrirai R La réponse est d' attendre HTTP pour l'ajout, nous devons utiliser la requête post. Ensuite, nous devons envoyer l' URL, c'est-à-dire l'URI. Et maintenant, nous allons envoyer le corps sur la carte, et nous allons simplement noter les deux fonctions cartographiques. Si vous vous souvenez, dans la note, nous avons ces deux cartes, qui les convertiront automatiquement en carte. C'est ainsi que les choses se passent. J'espère que vous comprenez cette conversion d'objet en carte. Ensuite, nous aurons le corps de la réponse, nous écrirons que le code est égal à JC, puis nous réinitialiserons le puis nous réinitialiserons Corps rouge. Je vais simplement imprimer le corps qu'il dit pour debo, sinon nous n'aurons pas à le faire en production Appelons maintenant cette fonction dans le fournisseur de notes. Après cela, informez les auditeurs, appelez le Mongo D V, c' est-à-dire le service API, la note d'ajout C'est ça. Maintenant, vous vous demandez peut-être pourquoi j'ai finalement écrit cette ligne. Parce que cela mettra à jour l'interface utilisateur en quelques secondes ou instantanément. Et en arrière-plan, les mêmes données seront envoyées à la base de données. Donc, évidemment, ce sera également une bonne expérience pour l'utilisateur, car il n'aura pas à attendre car il pourra voir cette note instantanément sur la page d'accueil. Et s'il revient plus tard, cela ne prendra évidemment que 5 secondes, mais supposons qu' il ouvre à nouveau l'application 10 minutes plus tard cela ne prendra évidemment que 5 secondes, mais supposons qu' , les notes de la page d'accueil seront extraites de la base de données, et toutes les notes seront identiques N'oubliez pas, évidemment, que vous pouvez également le faire en haut, mais cela n'a aucun sens. Maintenant allons-y. Essayons d'ajouter une note. J'écrirai Learn No chair. Moutarde. Il y avait de l'air pour le clavier, je crois. Voyons ce qui va se passer. C'est pourquoi je préfère la plupart du temps les appareils physiques. Choisissez le nœud. Nous pouvons enregistrer et voir dans le terminal le nouveau nœud créé avec ID this. Cela vient donc du serveur. J'espère que vous vous souvenez que c'était notre réponse. Cela signifie donc que cela est stocké dans la base de données. Voilà pour cette vidéo. S dans le chapitre suivant. 21. Fonctionnalité à mettre à jour et à supprimer: Bonjour. Bon retour. De même, comme ajouter une note. Créons également une fonctionnalité d'API pour mettre à jour la note. Accédez au service API et ajoutez une note ci-dessous. Écrivez simplement une tactique. Futur. Cela permettra également d'éviter. Note de date, fais-en une synchronisation. Cela acceptera une note. Et maintenant, encore une fois, créez l' URI de demande d'URI. L'URI est égal à URI point p, l' URI de base puis la mise à jour. La réponse R est alors d'attendre TTP. Cette fois, nous devons utiliser le put B le serveur, nous avons également donné le put. Ici, nous devons remplacer l'URI et corps de la note sur la carte. De même, demandez à cet envoi décodé faire le corps et d'envoyer une chaîne Pour supprimer, je vais simplement copier cette fonction, coller. Ce sera un nœud de suppression. Ils sont juste là. Il sera supprimé. Votre demande TP sera retardée. Et c'est tout. Et n'oubliez pas que si vous le souhaitez, vous pouvez envoyer un objet de note comme celui-ci ou uniquement l'identifiant. C'est à vous de décider car à partir de cette carte, le serveur extraira l'identifiant lui-même, ou si vous n'envoyez qu'un identifiant, c'est bon. C'est à vous de décider. Appelons cette fonction, accédons au fournisseur de notes et, de même, à la fin, écrivons une note de date du service API et écrivons une note de service API, et non note de retard comme celle-ci, et enregistrez-la. C'est ce qui se passera si je vais ici écris Dummy Updated et que je clique dessus Voir. La note a été mise à jour avec ID et Dummyd Cela signifie qu'il a été mis à jour sur le serveur. N'oubliez pas que si vous l'actualisez, ces données seront supprimées car nous ne récupérons pas de notes pour le moment C'est juste au niveau de l'application. Mais au moins, vous pouvez voir que cela fonctionne. Notre mise à jour et notre suppression de l' APA fonctionnent donc également. Dans la vidéo suivante, nous allons écrire la fonctionnalité permettant de récupérer toutes les notes et de créer une fonction qui doit tout afficher ici. 22. Fonction pour récupérer des notes: Bonjour. Bon retour. Il est temps de récupérer tous les nœuds de l' écran d'accueil afin que, si nous redémarrons l' application, les données soient également visibles Créez une nouvelle fonction dans le fichier de service APS do ici. Écrivons un futur statique. Et cela ne sera pas annulé. Cela renverra la liste des nœuds. Nous récupérons des nœuds. Et nous vous enverrons le nom d'utilisateur ici. Ensuite, nous voulons l'URI, donc c'est la liste d' URI de base e2ip de la requête URI de base e2ip de la N'oubliez pas qu'il s'agit d'un nom d'utilisateur. Nous devons l'envoyer dans l'URL uniquement car il s'agira d'une requête GT. La réponse We R est égale à un TPG puis à une URI de demande, comme ceci Nous n'avons rien d'autre à envoyer. Ensuite, la liste d'écriture décodée consiste à décoder la réponse Json à ce corps Nous savons que ce sera une liste. Et puis renvoyez simplement la carte à points décodée. Je vais convertir tous les nœuds en objet nœud. Note tirée de la carte, nous devons envoyer la note et c'est à moi. Vous devez connaître la sérialisation JC pour ces choses. J'espère donc que ce sont les concepts du flutter. Mais comprenez simplement que nous convertissons la carte en objet de note et que nous la renvoyons. Ensuite, nous devons également créer une nouvelle fonction dans la classe provider pour appeler cette fonction fetch notes Accédez au fournisseur de notes ici. Et tout d'abord, je vais avoir une variable booléenne pour que l'écran d'accueil affiche un indicateur de chargement S'il s'agit d'une commutation, j' éviterai de synchroniser les nœuds de patch. Ce sera une liste de notes coincées dans les notes que le service d'API d'attente récupérera Pour l'instant, je vais donner le nom d'utilisateur. Ensuite, ces données seront classées par ordre croissant puisque je n'ai rien mentionné sur le site du serveur Donc, ce que je vais faire, c'est écrire que nodes is equal to fetch nodes dot reversed point two list J'ai donc simplement inversé tout ce qu'il contenait, puis je l'ai reconverti en liste et je l'ai attribué à nos nœuds viables. Pour qu'il soit visible à l'avant. N'oubliez pas que si vous n' écrivez pas cette ligne, cela fonctionnera également, mais ce sera dans l'ordre croissant Les dernières notes ne figureront donc pas en haut de la page. Tu peux essayer. Ensuite, j' ajouterai que la facilité de chargement est égale à false et j' avertirai les auditeurs Et j'appellerai ce patch fun nodes dans le constructeur de ce fournisseur de nœuds Ainsi, lorsque son instance est appelée, elle appellera cette fonction de nœuds, et notre écran d'accueil sera rempli avec les dernières données des nœuds. Enfin, passez à l'écran d'accueil, ici, dans le corps Je vais simplement écrire les notes fournies s'il est en cours de chargement, puis const center child circular progress indicator C'est ça. Maintenant, voyons voir. L' indicateur de progression circulaire est là. Ouais Vous voyez, nous avons cette note, qui provient de la base de données. Donc, si je l'actualise à nouveau, cette note est également là. Cela signifie donc que notre API fonctionne également parfaitement. Notre front end et notre back-end sont désormais connectés. Donc, la dernière chose que nous ferons est que dans la prochaine vidéo, nous utiliserons les préférences partagées pour stocker l'identifiant utilisateur. Donc, en ce moment, dans l'enquête In the API. Désolé, dans le fournisseur de notes. Je code en dur le nom d'utilisateur, ce qui n'est pas une bonne chose car, de toute évidence, différentes personnes ont un identifiant utilisateur différent. Dans la vidéo suivante, nous allons donc créer un identifiant utilisateur unique, le stocker sur l' appareil de l'utilisateur et l' utiliser pour les opérations CRD. 23. Fonction pour stocker l'identifiant: Bonjour. Bon retour. Donc, jusqu'à présent, nous utilisions des identifiants d'utilisateur factices. Utilisons un stockage de données hors ligne tel que les préférences partagées pour enregistrer l'ID utilisateur créé par l'UUID Et n'oubliez pas que nous ne pouvons stocker que des valeurs int, string, double et booléen sous forme de valeurs clés Dans les préférences partagées. Je pense qu'il est impossible de stocker des modèles de données complexes. P, tu dois utiliser. Bonjour, je peux le stocker, je sais, mais j'ai partagé les préférences, je ne suis pas sûr. Maintenant, arrêtez votre demande de lettre et dans le terminal, écrivez simplement la lettre P partagée avant. Il est en cours d'installation. Donc, si je vais ici au pub, je peux voir les préférences partagées, d'accord ? Créons maintenant une nouvelle fonction qui renverra un identifiant unique pour l'ID utilisateur. Donc, dans les notes fournies, créons ici une nouvelle fonction, créons ici une nouvelle fonction, qui renverra une chaîne, obtiendra l'ID utilisateur. Une synchronisation. OK. Tout d'abord, nous allons créer une instance de références à des flaps, une instance de préférences partagées permettra d' obtenir une instance comme celle-ci Ensuite, je vais créer une chaîne de niveau, qui écrira que l'ID utilisateur est égal à peut-être get string. Donc, tout d'abord, je vais essayer d'obtenir le nom d'utilisateur de l'appareil. C'est-à-dire si l' utilisateur n'est peut-être pas un nouvel utilisateur, c' est-à-dire qu'il utilise peut-être une application, l'ID utilisateur sera donc stocké. Maintenant, je vais vérifier si l' ID utilisateur est égal à null, est-à-dire s'il s'agit d'un nouvel utilisateur, puis je vais créer cette clé définie comme chaîne, puis écrire l'ID utilisateur clé, et la valeur ici sera l'UUID V quatre Cela créera un identifiant unique pour nous, et j'attribuerai cet identifiant à la clé. Désolé, attendez. Je vais t'expliquer. Je sais que tu es peut-être un peu confuse. Et enfin, je vais renvoyer le nom d'utilisateur. Et ce qui n'est pas nul, je le sais parce que nous stockons ici s'il est nul, et s'il n'est pas nul, nous renvoyons simplement directement l'ID utilisateur. Encore une fois, j'explique que nous allons d'abord créer une instance de préférence partagée. Ensuite, nous vérifierons s' il existe déjà une clé d'identifiant utilisateur. Si ce n'est pas le cas, s'il est nul, nous allons créer une clé pour cet ID utilisateur dans la préférence partagée et y enregistrer un nouvel identifiant unique. Ensuite, j'attribuerai cette valeur à cette variable et je la retournerai à la fin. Cela signifie donc que cette fonction renverra de toute façon un identifiant utilisateur. Ensuite, j'appellerai cette fonction ici, c'est-à-dire une chaîne, l'ID utilisateur est égal à wait get user ID comme ceci, et j'enverrai cet ID utilisateur à cette fonction. OK. Tout le reste est bon. Ensuite, nous devons enregistrer l'identifiant utilisateur dans le champ Maintenant, nous avons l'identifiant utilisateur stocké dans les préférences partagées. Nous devons également nous assurer d'envoyer ce nom d'utilisateur lors de l'ajout d'une nouvelle note. Accédez à cette page ici. Nous envoyons un HD. Je vais juste écrire à nouveau que final s est égal à un poids de références partagées qui obtiennent une instance. Et comme nous utilisons un poids, nous devons en faire une synchronisation. Ensuite, j'écrirai simplement une chaîne d'ID utilisateur pour peut-être obtenir une chaîne, et le premier nom est l'ID utilisateur. Le nom de clé est l'ID utilisateur. Ici, nous allons obtenir ce nom d'utilisateur, et je vais l'envoyer ici. R. C'est ça. C'est le seul changement requis. Il est donc évident que nous n'utilisons aucun type d'authentification ici. Je vais y créer d'autres noyaux. heure actuelle, ce cours est uniquement dédié aux opérations sur le crud et à l'utilisation de No GS Back. Il est destiné aux débutants Il y a beaucoup de choses que vous pouvez faire alors qu'au moins maintenant vous êtes à l' aise avec les bases. J'espère donc que vous avez apprécié. Dans la vidéo suivante, je testerai l'application complète puisque tout le reste est terminé. 24. Tester l'application complète: Bonjour. Bienvenue sur la vidéo finale de ce cours. Dans ce cours, nous allons simplement tester le fonctionnement complet de l'application. Donc, avant de continuer, supprimons tous les enregistrements précédents de la base de données car ils contenaient des identifiants utilisateur factices Je vais donc simplement supprimer toutes ces choses. OK. Donc je suppose que j'ai tout supprimé. Lancez notre application. OK. De toute évidence, nous n'avons aucune note pour le moment. Je vais donc créer. Et ici, je vais apprendre le développement de plateformes et le sauvegarder. Voir la note ajoutée avec succès. Je vais ajouter une autre note. Pas backend, je vais simplement écrire master red operation en utilisant Mongo J'en ai deux autres, et enfin, je vais écrire l'exercice Daily eight : entraînement et code. OK. J'ai trois notes. Et si j'ai commencé, alors pour le moment, j' ai donc trois nœuds. Et puis si j'essaie de mettre à jour celui-ci. Et apprenez uniquement à Nod JS. Utilisation de Mongo DB et de Flutter. Si je le mets simplement à jour, tu verras. Nous avons les hochements de tête et ici nous avons le flutter. Et si je le redémarre, voyons voir. Nous avons les mêmes données. C'est pourquoi j' appelle finalement cette fonction de base de données après avoir notifié les auditeurs, car évidemment, l'expérience utilisateur est très bonne ici L'utilisateur n'a pas à attendre le stockage des données. Il peut simplement le voir dans son interface utilisateur. Et maintenant, si je supprime également celui-ci, voir Non, je le supprime avec succès. Nous n'avons plus que deux notes, et si je recommence, seules deux notes seront récupérées Je suis donc content que l'application fonctionne parfaitement. Et nous avons beaucoup appris dans ce cours. De toute évidence, tout était pour le niveau débutant. Mais si vous connaissez les bases, il est évident qu'à l'avenir, vous pourrez également travailler sur des projets complexes. J'espère donc que vous avez apprécié. Consultez également mes autres cours. Merci Passez une bonne journée et continuez à vous entraîner.