Apprendre à gérer l'API Rest dans Flutter - Android et IOS

1. INTRODUCTION DU COURS: La gestion des requêtes réseau et l'intégration API sont l'un des problèmes rencontrés par les débutants en flutter. Dans ce cours, nous allons créer une application d'achat normale qui affiche une liste de produits qui sont récupérés sur Internet dans notre application plate qui intégrera fixe ou APA. À cette fin, il s'agit d'une API REST en ligne gratuite que nous pouvons utiliser chaque fois que nous en avons besoin pour notre application de commerce électronique sans avoir notre propre serveur principal. De plus, lorsque nous traitons avec des API, nous pouvons obtenir un grand nombre de données pouvant comporter de nombreux champs. Il est donc préférable de convertir chaque Jason en objets Dart. Ce concept est appelé parsing json, dont nous parlerons plus tard. Donc, sans perdre plus de temps, commençons. 2. Qu'est-ce que la demande de Http: Bonjour, bienvenue dans la nouvelle vidéo. Dans ce module, nous verrons comment implémenter des appels d'API REST en Floride. Si vous envisagez de développer des applications qui récupèrent des données sur Internet, vous devrez savoir comment effectuer requêtes réseau et comment gérer correctement les réponses. Donc, lorsque vous créez une application réelle, il y a de nombreux scénarios où vous devez récupérer des données à partir d'un devez récupérer des données à serveur ou vous devez utiliser certaines API dans votre demande. Qu'il s'agisse d'une API utilisée ou d'une API Google ou autre. Dans ces scénarios, vous devez savoir comment gérer les API de manière efficace. La question qui se pose maintenant est qu'est-ce qu'une requête réseau ? En termes simples, lorsque vous ouvrez une application comme WhatsApp, Instagram ou Twitter sur votre smartphone. App, essaie de récupérer les dernières données à partir d'un emplacement distant, appelle généralement ce serveur. Le serveur est un endroit centralisé qui stocke la plupart des données utilisateur. L'application que vous utilisez est appelée client. Il existe donc deux termes appelés serveur et client. Client est l'application, quelle que soit l'application ou l' application Android ou iOS que vous utilisez. Et le serveur est la base de données qui est stockée à distance. C'est donc un concept très basique. Qu'est-ce qu'une API RESTful ? Le reste correspond à Representational State Transfer. C'est une interface de programme d'application qui est une API, c' est-à-dire cette requête HTTP pour obtenir ou envoyer des données entre ordinateurs. N'oubliez pas que la communication entre un client et un serveur se fait principalement via des API RESTful. C'est ça. forme la plus simple de manière réaliste est une URL que le client utilise pour envoyer une requête au serveur. Donc, si vous voyez des API ou un repas, vous obtiendrez une URL, laquelle vous avez dû envoyer la demande. C'est-à-dire que vous devez accéder à cette URL particulière. Et à la réception d'une demande réussie, le serveur vérifie le point final de l'URL, effectue un certain traitement et renvoie les données demandées au client. C'est donc une façon très simple d'expliquer, certainement dans ce point technique de base, c'est peut-être un peu complexe également, mais vous devez juste vous rappeler que nous allons envoyer une requête au serveur le serveur va nous fournir quelques données. C'est ça. Il existe maintenant différentes méthodes que vous utilisez dans une API REST. Il y en a donc beaucoup alors, mais les plus couramment utilisés sont 4. Le premier est la requête GET. Cela signifie simplement que vous souhaitez obtenir certaines données à partir d'une requête de base de données distante à l'aide de la commande get only retrieve data, ce qui signifie qu'elles n'ont aucun autre effet sur ces données particulières. Cela signifie que vous allez simplement lire les données. Vous ne pouvez rien modifier à l'aide de la requête GET. Ne pas poster de demande. Les requêtes Post soumettent des données à cette ressource spécifique. Vous utilisez cette méthode pour envoyer des données au serveur, telles que des informations client ou des chargements de fichiers. Donc, indirectement, rappelez-vous simplement que si vous devez envoyer quelque chose du client au serveur et l'enregistrer sur le serveur. Dans ce scénario, vous utilisez la demande de publication. Le troisième est retardé. Donc, s'il fait ce qu'il dit, il supprime la ressource spécifique du serveur. Et le quatrième est mis, c'est-à-dire remplace, ou vous pouvez dire, met à jour toutes les représentations actuelles des ressources cibles. Cela signifie que vous avez déjà envoyé certaines données au serveur, mais que vous souhaitez par la suite mettre à jour cet audit de terrain, en particulier des données telles que l'âge ou le numéro de téléphone. Dans ce cas, vous devez utiliser la requête PUT. s'agit donc certainement d'une demande de correctif et de quelques autres. Si vous voulez connaître toutes les demandes, vous pouvez simplement le rechercher sur Google. Mais la plupart du temps lorsque vous créez une application, vous travaillez avec celle-ci sur demande. Maintenant, dans le flutter, si vous voulez faire quelque chose, nous devons avoir cette dépendance. Donc, pour la requête HTTP, il existe également une dépendance appelée le package HTTP qui consiste simplement à ajouter votre navigateur, à aller dans dev et à taper http. Et puis n' oubliez pas de sélectionner celui-ci. Ça vient de l'équipe Dart elle-même. Oui, faites défiler vers le bas et copiez cette dépendance. Et dans votre application, vous pouvez le coller. N'oubliez pas, si vous voulez créer un nouveau projet, vous pouvez également le faire maintenant J'utilise notre projet précédent, mais je vais supprimer ces codes précédents. Donc, si vous le souhaitez, vous pouvez simplement mettre la vidéo en pause et simplement écrire Florida, créer un nouveau projet et recommencer depuis le début. C'est à toi de décider. Notre pub aux lettres est en cours d'exécution. Il obtiendra la dépendance et oui, c'est fait. Notre dépendance HTTP est maintenant installée. La prochaine chose que je vais faire est supprimer les fichiers précédents. Et maintenant, dans le dossier mid lib, je vais créer de nouveaux dossiers comme le premier est vert, et le second est le dossier services. Et à l'intérieur de l'écran, je vais créer des services point point et insights. Je me souviens que je vais créer des API service point point point. Donc ce que j'ai fait, c'est que j'ai organisé nos codes de manière propre. C'est comme si tous les écrans se trouveraient dans le dossier des écrans. Tous les services d'API dont le code côté serveur est plus ancien ou tout autre interagissant avec l'API figureront dans le point point du service API. De cette façon, vous avez une séparation du code et vous aurez ce modèle MVC, c' est-à-dire le modèle Model View Controller également. C'est une bonne pratique. , vous ne voulez pas écrire tous vos codes de manière aléatoire et dans un seul fichier. Il vous sera très difficile d'organiser ou déboguer à long terme. C'est ça. Nous avons compris ce qu'est STDP, quelles sont ses méthodes différentes et comment installer le package HTTP dans notre projet. Au cours de la prochaine session, nous utiliserons de vraies API et les appellerons à l'aide de cette requête GET. Merci. Rendez-vous dans la prochaine vidéo. 3. Implémenter la demande GET à un serveur: Salut. Dans cette session, nous utiliserons une véritable API REST nommée fixed ou APA. Sur Internet, vous obtiendrez de nombreuses API, mais nous utiliserons une API fictive pour que son utilisation soit gratuite. Et nous pouvons faire ce que nous voulons. Avec cette API. Nous pouvons obtenir de fausses données sur le commerce électronique. Ce qui signifie simplement que si vous souhaitez obtenir des produits, des catégories, utilisateurs ou autre, vous pouvez les obtenir auprès de cet APM. Apportez votre éditeur de texte au fur et à mesure que vous apportez votre navigateur, et tapez simplement fixed ou APA. Et le premier qui apparaît, vous devez cliquer dessus. L'URL est le faux magasin Api.com. Alors oui, c'est ça. Vous n'avez pas besoin de créer compte ou quoi que ce soit pour l'utiliser. Ce sont les ressources qu'il nous fournit des produits. Il nous donne l'armée capturée, il nous donne des utilisateurs et des jetons de connexion. Et ces autres routes. C'est-à-dire que je parlais de Nike. Il existe des URL et des pods. Vous pouvez dire « points finaux ». Vous devez envoyer une demande. Ce sont donc les points de terminaison. Donc, simplement si je clique dessus, voir en haut de la page, vous pouvez voir faux magasins, des produits slash API.com. Il s'agit de l'URL, et lorsque vous cliquez sur cette URL, c'est la réponse que vous obtiendrez. C'est donc dans ce format JSON. Il a le titre de l'identifiant, puis la description, l'image, le prix. Ce sont donc les données qu'il nous fournira et nous les utiliserons, ces données dans notre interface utilisateur. Alors rappelez-vous qu'après avoir terminé cette fausse API de magasin, vous pouvez avoir l'API News, vous pouvez avoir l'API de blog. Il existe de nombreuses autres API. Si vous le souhaitez, vous pouvez l' essayer vous-même. Mais commençons par l'APA de cette semaine. La première chose que nous devons faire est de créer une fonction qui gérera cette requête GET. Cela signifie simplement que cette fonction interagira avec l'API. À partir de maintenant, nous allons écrire les services d'API, c'est-à-dire tous les services liés aux API. Dans ce fichier séparé. Nous ne voulons pas tout écrire dans l'interface utilisateur. Importons simplement le package HTTP dans un premier temps. C'est comme ça qu'il faut procéder. Ensuite, je vais simplement créer la classe de service APIs. Cette classe peut être utilisée n'importe où dans notre application en créant un objet puis en appelant directement ces fonctions. La première fonction que nous allons créer est GET ou post. Ce sera donc une synchronisation. Maintenant, nous devons d'abord écrire l'URL. L'URL est la suivante. Vous pouvez simplement obtenir l' URL en haut de la page. Il vous suffit de le copier et de le coller ici. Maintenant, pour envoyer une requête get à l'aide de ce package HTTP, vous ne pouvez pas envoyer directement la chaîne. Vous devez le convertir en barres d'URI. Et à l'intérieur. Tu dois mentionner «  yard and point ». C'est la méthode ou c' est la façon de le faire. Tu te souviens juste de ça. Absolument. Tu vas t'y habituer. Maintenant. Nous avons maintenant l'URL à utiliser pour envoyer la requête. Maintenant c'est l'heure. Nous obtenons le résultat qui utilise le package HTTP. C'est le point P. Et puis vous pouvez voir qu'il y a beaucoup de demandes après le patch. Mais nous voulons cette requête GET. Et à l'intérieur, il vous suffit d' écrire l'URL du produit. Ok ? Tu dois le rendre. Maintenant. Vous pouvez imprimer le code d'état du point de résultat. Si c'est 200, nous avons obtenu cette réponse. Si c'est 404, alors cette page n'existe pas. Et aussi, si vous le souhaitez, vous pouvez simplement nommer. C'est. Répond comme vous pouvez le faire par son nom, vous pouvez comprendre que cette variable a la réponse de la requête GET. Enfin, vous devez renvoyer ce corps de réponse au format JSON. Donc vous allez juste, d'accord Jason, vous devez importer cette conversion de données et nous allons simplement écrire json point, decode et response.body ici. Notre fonction ou notre méthode est donc terminée. C'est ainsi que nous envoyons une requête GET. Donc, vous pouvez simplement voir, première chose à faire était d'écrire une URL. La deuxième consistait à obtenir la réponse en utilisant cette réponse http.get. Et après cette obtention STDP, nous pouvons renvoyer le corps de la réponse à l'interface utilisateur appelant cette fonction. Ok ? La partie suivante consiste à afficher ces données sur notre page d'accueil. Simplement dans le point d'accueil, créez un point. Accueil de l'interface utilisateur de base Alors return est faux. Dan, app. Dans la barre de l'application. Je suis mort. Ensuite, je vais le faire centré. Le titre est égal à vrai, altitude est égale à 0. Et je vais donner la couleur d' arrière-plan comme les couleurs de fond accent rouge. Dans le corps. Nous utiliserons le futur Builder puisque cette fonction est une future. Et à l'avenir, je vais simplement écrire point de réponse de l' API, obtenir tous les messages. Voyez ici que nous avons créé cet objet de cette classe et appelons simplement cette future fonction. C'est donc la première fois que vous utiliserez une vraie fonction future. Dans les vidéos précédentes, nous faisions juste peur à cette fonction. Mais maintenant, il s'agit d'une véritable fonction serveur qui prendra un certain temps à s'exécuter. Dans le générateur, nous aurons un texte et un instantané. Donc, comme d'habitude, au tout début, nous allons vérifier si l' instantané contient des données ou bien retourner l'indicateur de progression circulaire central. Et s'il contient des données pour le moment, nous envoyons simplement un texto de réussite. Parce que je veux voir la sortie au début, cette sortie dans la console de débogage au début. Nous allons donc recommencer. Déposer notre candidature. voyez, nous avons ce succès ici, mais dans la console de débogage, vous pouvez voir que le code response.status est 200 et le corps de la réponse est comme ceci. C'est-à-dire qu'il s'agit d'une liste de cartes. Donc dans les premières données. Il s'agit des premières données. Vous avez donc un titre d'identification, une description. Il s'agit du format JSON. Pour afficher ces données dans l'interface utilisateur ici, nous utiliserons simplement un widget de création de points de vue liste. Widget Générateur de points de vue liste, identique au widget ListView. Ici. Ces données peuvent être illimitées. C'est-à-dire que nous ne connaissons pas le nombre d'éléments de cette liste. Nous allons donc simplement écrire la longueur de cette liste ici. générateur de points de vue liste possède deux paramètres. Le premier est le nombre d'objets et le second est le générateur d'objets. Item Builder est une fonction qui a des contextes et qui index, index est la position de cet élément dans la liste qui commence à 0. L'index commence donc de 0123 au nombre d'éléments de cette liste moins un. Parce que s'il y a cinq éléments dans la liste, l'index sera compris entre 0 et 4. Donc, simplement, le nombre d'éléments sera constitué de données de point d'instantané, longueur de point, car l' instantané de ces données est celui-ci. Et nous utiliserons sa longueur. N'oubliez donc pas que si nous rendons quelque chose dans le futur, ce futur le fera. données sont stockées dans cette variable d'instantané. OK, nous avons maintenant un générateur de points de vue liste. Et dans le générateur d'objets, nous devons renvoyer quel devrait être le rigide dans cette interface utilisateur ? C'est-à-dire que devons-nous revenir à l'écran de l'interface utilisateur ? Et je vais retourner la tuile de liste. Maintenant, simplement dans ce titre, je vais écrire des données ponctuelles instantanées. Ensuite, l'index c'est parce que c'est une liste, nous devons utiliser cet index qui commencera à 0. Cela imagine que 0 pollution est celle-ci. Ok ? Nous voici donc ici moment même dans ces données que cela. Il en sera un à partir d'ici. Ça en sera un, je suppose qu'il est toujours là. Oui. Oui, toujours là, c' est le second indice. Donc ici, je vais simplement afficher le titre ici. Ça, c'est la caisse. Si je fais cela, avons-nous une erreur ou recevons-nous les données ? Nous avons eu cette erreur, ok, ok, désolé, désolé. Il suffit de le couper et de le coller ici. Et s'il ne contient pas de données, nous retournerons simplement l'indicateur de progression. C'était une erreur très stupide. Mais ces choses-là se produisent. OK. Maintenant, vérifions-le encore une fois. Voyez qu'il est en cours de chargement , puis nous avons ces données. Et comme il s'agit d'une vue de liste de données, je peux faire défiler. Nous avons un sac à dos, chemise slim, une veste en coton, plein de choses. Nous avons donc toutes les données. J'espère que tu as compris comment j' ai utilisé ce truc avec Jason. Les données ponctuelles instantanées sont simplement cette liste, cet index de liste détaillé. Je suis passé à la position crépuscule 0, qui est ceci. Et à partir de la position 0, j'ai sorti cette clé de titre parce que je sais qu'elle est dans la carte au format JSON, donc je dois juste utiliser cette valeur de clé. Maintenant que le titre est en tête, je vais utiliser la propriété image. Réseau de points d'image. Ensuite, il suffit ici d'écrire l'index de données de point d' instantané plutôt que Et je vais simplement écrire la hauteur comme 5030. Maintenant, sauvegardons et voyons. Vérifiez à nouveau s'il fonctionne correctement. Oui. Nous avons les images du serveur. C'est donc la première fois que vos données sont réelles, qu'elles proviennent du serveur et votre application est plutôt bonne. La prochaine chose que je ferais est d'utiliser ce sous-titre. Et dans ce texte, j'utiliserai l' index des données de points instantanés, puis j'utiliserai ce truc de prix. Et comme c'est un entier, je vais le convertir en une chaîne, C 1091. Mais je veux aussi ajouter le signe dollar. Et pour écrire des dollars. Et vous ne pouvez pas simplement écrire ce symbole parce que la Floride a une signification différente pour cela. Vous devez donc utiliser une barre oblique inversée comme ceci. Et je vais simplement augmenter le prix est égal à la barre oblique inverse du dollar puis plus. Et quand vous vérifiez la sortie, elle est très bonne. Ça a l'air plutôt bon. J'espère que tu as compris. Jusqu'à présent. Nous utilisions cette requête get. C'est le premier où nous obtenons tous les produits. Cette deuxième méthode HTTP ou route est constituée de produits, puis d'un produit particulier, ce qui signifie simplement comment obtenir les détails de ce produit unique. C'est donc également très important. Si vous cliquez dessus, vous pouvez voir le résultat. Ce n'est que le détail d' un seul produit. Donc, si vous avez utilisé une application de commerce électronique lorsque vous cliquez sur ce produit, une autre page apparaît où vous avez les détails détaillés du produit, l'image du produit, la catégorie et puis le bouton Ajouter au panier. Pour l'utiliser, encore une fois, vous devez créer une nouvelle fonction. Alors, qui sera simplement un seul détail du produit. Pour obtenir le détail du produit, comment cela se fait. Essayons de le faire. D'abord. Après ce post de guitare, je vais simplement le copier , le coller, et je vais le nommer, obtenir un seul produit. Et le nom de la variable sera single product, URL. Et aussi cette API URL est ID ici. Et c'est vraiment unique parce que nous ne savons pas sur quel utilisateur cliquera. Nous devons donc lui envoyer Id pendant que nous appelons cette fonction en tant qu'argument. s'agit donc simplement du Maktab. Pour obtenir le détail d' un produit en particulier. Tout sera pareil. Seule l'URL est différente maintenant, et nous envoyons également l'ID. Maintenant, dans le dossier screen, créez un autre nom de fichier, écran Product Detail. Ainsi, lorsque l'utilisateur clique sur ce produit en particulier, il doit être envoyé à l'écran Détails du produit en portant l' ID du produit. Il suffit donc d'entrer du matériel. Ensuite, utilisez un widget dynamique appelé détail du produit. Et maintenant, rappelez-vous simplement qu'il accepte et qu'il est identifié , et nous l'enverrons au constructeur. Maintenant, dans cette fonction de facture, il suffit d'écrire scaffold. Encore une fois, même chose, AB bar. Puis à l'intérieur d'une couleur de fond colore l'accent rouge. Et dans leur corps. Nous devons à nouveau utiliser ce futur constructeur pour appeler notre fonction d'enquêtes sur les API. Dot obtient un seul produit et cet identifiant, et cet identifiant passe par le constructeur. Dans le contexte. Instantané. Vérifiez ensuite l'instantané contenant des données, sinon renvoyez un indicateur de progression circulaire. C'est ça. Encore une fois, je vais simplement revenir ici sur le prochain succès, juste pour vous montrer comment cela se passe. Cela fonctionne-t-il ou non ? Sur l'écran d'accueil ? Dans la vue de liste, vous devez utiliser cette propriété sur le robinet. Vous enverrez cela en envoyant l'utilisateur à l'écran Détails du produit. Adl collez ce code. Vous devez simplement vous rappeler comment pousser le code et tous les détails de base du produit. Et dans l'ID, vous devez simplement être cet index , puis simplement écrire ID. Maintenant, si je l'enregistre et que je clique sur le premier élément, C, il s'affiche. Ensuite, dans la console de débogage, vous pouvez voir la sortie. C'est le titre de l'identifiant, encore une fois, c'est pareil. Il vous suffit donc de le mettre en valeur. Utilisez ce détail pour les afficher dans l'interface utilisateur, comme nous l'avons fait sur la page d'accueil. Donc, dans l'écran du produit, il suffit de supprimer ce texte et de retourner un conteneur. Et le conteneur donne juste une marge au tout début. Ensuite, l'enfant sera colonne car il y a beaucoup de données. Maintenant, tout simplement au tout début, je vais avoir ce réseau de points d'image qui semble données par points. Et son index ne sera plus là, car il s'agit d'une carte statique, pas d'une liste. Bon ? Image d'une hauteur de 200 et d'un poids de double point infini, c'est-à-dire le poids total de l'écran. Et puis utilise VJ centré et un enfant a montré un prix plus élevé. Encore une fois, je vais utiliser la même chose que données de points instantanés et essaierai de ficeler et de donner un peu de style. Maintenant, le style sera une taille de police de 25 et une épaisseur de police. Poids de police, gras. Sauvons-le. Cabane. Voir. Ça a l'air tellement beau. Maintenant, ce que je vais faire, c'est que je vais juste donner un peu d'espacement en haut en utilisant cette boîte de taille et donner le type D. Donc, l'image sera mortelle vers le bas et entre l'image et le prix, je vais également donner une hauteur de dix afin que nous ayons cet espacement ici. Et dans la colonne, j' utiliserai l' alignement principal qui commence. Vous saurez pourquoi je l'ai fait dans les prochains widgets que nous utiliserons. Mais pour le moment, nous avons une très belle interface utilisateur, qui contient tous les produits dans le premier écran. Et quand je clique sur ce produit, c'est une veste en coton. Voyez avec l'image, c'est l'image du produit et le prix est affiché. C'est donc ça. J'espère que vous avez apprécié la création de cette vidéo. Ici. Nous avons utilisé cette requête HTTP GET. N'oubliez pas qu'il s'agit du seul code requis. Tout d'abord, cette URL est http.get. Enfin, vous devez renvoyer la réponse et la décoder dans un format adjacent. C'est ça. Dans la vidéo suivante, nous allons compléter cette page entière affichant tous les détails tels que la description, la catégorie et le bouton Ajouter au panier. D'ici là, essayez simplement de bien comprendre le code. Si vous n'avez pas compris, il suffit de regarder cette vidéo à nouveau. Mais ne sautez aucun concept, s'il vous plaît. Merci. 4. Récupération de données Json à partir de l'API: Lors de la dernière session, nous avons pu récupérer les détails d'un produit en particulier. Et nous avons pu le rendre dans l'interface utilisateur. Jusqu'à présent, seule l'image du prix est affichée. Mais aujourd'hui, dans cette session, nous allons continuer à montrer tous les détails tels que la description, la catégorie. Et si j'ai également un bouton Ajouter au panier. Commençons par la page détaillée du produit. Nous avons cette image. Puis au centre. Nous avons ce prix. Ensuite, nous allons avoir une boîte dimensionnée pour donner peu d'espacement et avoir une hauteur de dix. Ensuite, ayez un widget où nous afficherons ce titre. Various a montré ce titre et donnons-lui un peu de style. Nous voulons juste que la taille de police soit 25. Voyons voir. Ok, on l'a. Maintenant. La zone de texte. Nous allons avoir un widget de puce. Si vous n'êtes pas bon marché, vous saurez simplement, si vous le voyez, que c'est une sorte de tags. Si vous avez vu un tag électronique, un tag de catégorie ou des hashtags. Ce type de rigide est utilisé. Donc, ici, nous allons montrer que vous obtenez un diplôme. Et nous allons avoir des decks. Passons au lendemain. La police, la taille 15 et les couleurs plus froides sont des points blancs. Et dans cette forme. Nous allons avoir une couleur de fond. Les couleurs, le bleu, le gris. Allons voir ça. Tu vois, je parlais de ce widget. Également. Si vous le souhaitez, vous pouvez faire en sorte que l'alignement de l'axe transversal soit sombre afin que tout arrive ici. De ce côté, comme ça. C'est à toi de décider, ce que tu veux. Ce sont des trucs de style très basiques. Ce n'est pas un gros problème. Encore une fois, ayez une boîte de taille. Enfin, nous montrerons cette description. Toutes les clés sont là. À l'intérieur de la réponse. Vous pouvez voir l'image de description. Et maintenant je vais enregistrer et voir que c'est la description. Donc, si vous le souhaitez, vous pouvez appliquer un style ou une taille de police. Je vais juste laisser ça comme ça. Maintenant. Disposons ici d'un bouton Ajouter au panier. Je vais le donner comme bouton flottant, bouton d'action flottant. Disons qu'il s'agit d'un bouton d'action flottant. Alors mon enfant. Chez l'enfant. Laissons l'icône. Ajoutez un panier, carte d' achat soulignée dans la poitrine. Nous ne faisons rien. Tu vois, on a ça ici. Je vais juste lui donner la couleur de fond, colorée en vert. Et je vais également changer l'emplacement du bouton d'action flottant. Je vais lui donner l'emplacement du bouton d'action flottant, le flotteur central. Alors tu vois, ça a l'air décent. Notre page détaillée du produit est également terminée. Si vous allez sur un autre produit, voir tous les détails sont ici. Le titre de la catégorie, le prix, tout est parfait. Maintenant, lorsque nous allons à l'API du faux magasin, nous pouvons voir que nous avons fait ce point de terminaison qui consiste à obtenir des produits plus anciens, obtenir un produit particulier. Il est temps de trouver les catégories. Voyez si on clique dessus, il y a 12344 catégories. Nous allons donc afficher ces catégories dans notre interface utilisateur. Tout d'abord, nous allons créer une fonction qui interagira. Je vais juste copier-coller et à droite, obtenir le grain de sable. Il n'accepte rien. Cela va recevoir une URL. Ici. C'est le point final. Donc maintenant cette fonction va sur le serveur et va chercher sur la catégorie présente Indus EPI. Pas définitivement. Pour cela, encore une fois, nous devons créer un nouvel écran. Je vais tout nommer catégorie point, point. J'espère que vous comprenez que, maintenant, il est très facile de mettre en œuvre la requête GET. Tout est fondamentalement pareil. Nous sommes en train de terminer notre interface utilisateur pour qu'elle soit très belle. Dans l'ancienne catégorie point point était simplement important. Créez ensuite un widget sans état appelé get a goodie. Maintenant, ayez une barre d'échafaudage. Mort de. Suivant. Obtenez les goodies avec une couleur de fond rouge et envoyez-les dans le corps. Nous aurons cet avenir. Est-ce que ça va encore ? Puisqu'il interagira avec notre fonction. Maintenant, utilisez l'objet de notre classe pour appeler la fonction get all category. Dans le constructeur. Nous aurons un contexte et un instantané de l'évier. Nous devons simplement vérifier si le point d'instantané contient des données. Si ce n'est pas le cas, nous retournerons un ensemble d'indicateurs de progression plus froids. Si l'instantané qui a le diable, cela pour le moment est renvoyé, renvoie un succès. Maintenant, ce que vous pouvez faire, c'est que nous devons naviguer jusqu'à l'écran. Et pour cela, sur la page d'accueil, je vais créer des boutons. Ça le sera, je peux, mais il y aura une icône. Je peux commencer à voir la liste. Nous allons maintenant accéder à l'écran des catégories. page de ma TDL. Nous allons avoir un contexte. Et ça. Voyons donc comment cela fonctionne, quelle est la sortie dans la console de débogage. Tu peux. Voyez ici c'est le bouton d' icône que nous avons, qui correspond à toutes les catégories sur lesquelles si je clique dessus, nous avons ce succès et voyons, c'est la réponse de sortie du serveur. Donc maintenant simplement dans l' ancienne page de catégorie, je vais retourner un générateur de vue liste. Puisque c'est une liste. Nombre d'éléments, données ponctuelles d'instantanés, longueur des points. Et dans le générateur d'objets, j'aurai simplement des contextes et un index. Maintenant, nous avons cet index et nous allons maintenant retourner un widget de carte. Il s'agit d'un autre widget. Je suppose que c'est un widget vraiment basique qui a un allégement, va juste donner une certaine marge et lui donner ensuite une forme de bordure rectangulaire arrondie , rayon de la bordure , cercle 15. Et puis dans cet enfant, tu auras un contenant. C'est juste une chose de base où je vais afficher ces appareils électroniques. Joy reste la collection de tout. Maintenant, dans ce texte, je vais afficher les données de points d'instantané, puis directement indexer. Et je vais le mettre en majuscules. Juste pour regarder une bonne journée. Je vais donner une taille de police de 25. Voyons voir. Voyons le résultat. Maintenant, quand je clique dessus. Voir électronique, bijoux, vêtements pour hommes, femmes. C'est donc très beau. Ça a l'air décent. Vous pouvez dire au moins cette marge et ce remplissage où j'avais l'habitude de donner l'espacement à l'intérieur et à l'extérieur de ces cartes. Et certainement lorsque nous cliquerons sur cette carte, nous devrions aller un écran où tous les produits liés à cette catégorie seront affichés. Pour cela dans la carte, nous allons simplement l'envelopper avec un widget encrier et nous n'avons pas de fonction « tap », que nous utiliserons plus tard pour récupérer les produits par catégories. C'est donc tout pour cette vidéo. Dans la vidéo suivante, nous allons chercher les produits par catégories. ONG. 5. Application d'achat de base: Bonjour, bon retour. Au cours de cette session, nous allons compléter cette demande GET. Et jusqu'à présent, nous pouvions récupérer les catégories et les afficher dans notre application. Mais il est maintenant temps de chercher produits basés sur ces catégories. Cela signifie que si je clique sur électronique, un nouvel écran devrait apparaître contenant tous les produits électroniques. Et pour ce point de terminaison, il y a celui-ci, c'est-à-dire la catégorie de produits. Ensuite, nous devons envoyer le nom de cette catégorie. Comme toujours, commençons par l'API. Donc pour cela, je vais simplement copier ceci et le coller ici. Je vais le nommer, obtenir le produit. En obtenant. Maintenant, il acceptera un chat de chaîne nommé ce nom de catégorie. Et le nom de la variable. Je vais changer cela pour récupérer le produit. Prends le sérieux que tu es. Tu peux nommer ce que tu veux. Et ici, le point final est comme cette catégorie , puis le nom du chat. Alors tu vois, c'est comme ça que ça se fait et si on clique dessus, ça nous donnera une réponse. Avec les produits Alda. Maintenant, nous avons la fonction prête, mais nous devons également créer un nouvel écran, que nous appellerons cette fonction. Je vais nommer la catégorie d'âge, le point point du produit. Et je vais maintenant importer ma TDL. Qu'un état moins rigide d'un écran. Il accepte un nom de catégorie dans le constructeur. Nous devons l'affecter à cette variable. Maintenant, nous allons échafauder. Puis AB bar. Dans ce titre. Je vais donner le nom de cette catégorie en majuscules. Il doit s'agir des couleurs de titre et d'arrière-plan. Kettler commence à lire. Et puis le tag central a été traité. Maintenant, ce que nous voulons, c'est que lorsque nous cliquons dessus, ce pitch devrait s'ouvrir. Passons donc à la catégorie pétrole. Et dans l'encrier, nous devons utiliser Navigator, dot bush. Puis mon TDL Page Layout, View Reveal, puis le nom products grain. Ensuite, nous devons envoyer ce nom en particulier. Nous obtiendrons le nom à partir des données de l'instantané, puis nous l'indexerons. Essayons-le. Voyons ce qui se passe. Maintenant, quand je vais dans Catégories et que je clique sur bijoux. Ces joies sont là dans le bar de l'AB. Si je clique sur l'électronique, l' électronique est là. Nous allons donc maintenant simplement utiliser un futur constructeur à l'intérieur de la page produit de la catégorie. Et je viens juste de le nommer correctement. Ok, donc dans le corps, nous allons avoir un futur constructeur. Nan. Ensuite, le futur sera App Service, obtiendra le produit par catégorie, puis enverra la variable de nom graveleux. Et dans le constructeur, nous aurons un contexte. Comme toujours, je suppose que tu vas juste l'apprendre. Maintenant. La même chose que nous faisons encore et encore. Peut-être jamais de contextes. Et puis un seul instantané. Nous allons vérifier. Si l'instantané contient des données et renvoie circulaire indicateur de progression circulaire. Nous l'avons fait plus que, j'ai même oublié combien de fois nous avons fait ces choses. Maintenant, s'il contient les données, nous allons utiliser un générateur de vues de liste. Maintenant, cette interface utilisateur souhaite la même chose que l'interface utilisateur d'accueil. Ce générateur ListView. Cette catégorie. Nous allons simplement activer ce générateur ListView. Et tout d'abord, je vais juste vérifier si tout est correct ici. Données ponctuelles instantanées, point, del, prix de l'indice que cet écran de produit que je vais importer. Ok, voyons ça. S'il y a une erreur. Quand je clique sur l'électronique, rien ne s'est passé. Voyons voir, a-t-il une erreur ou une erreur ? Produit par catégorie ? Bon, produit par catégorie. Ensuite, nous avons cette fonction. Redémarrons maintenant et vérifions s'il y a encore une erreur persistante. Je suppose que je n'ai tout simplement pas enregistré le fichier. C'est très bien ça. Mais voyez-le maintenant, si je vais et que seuls les bijoux seront vraiment là et si je clique dessus, cette page détaillée du produit apparaîtra. Cela fonctionne donc très bien. Et je suppose que notre portion est terminée. Maintenant, quand nous pensons à une application de commerce électronique, vous pouvez dire qu'il existe certainement un panier d'achat que nous n'avons pas utilisé ici. Allons voir ce document de ressources. Et ici, vous pouvez voir que nous pouvons également obtenir un panier, qui nous donnera certains produits si nous envoyons un identifiant utilisateur. Je vous prie donc de prendre le temps de lire ces documents. Tu apprendras beaucoup de choses. Il y a beaucoup de points finaux. Pareil. J'en utilise quelques-unes juste pour vous montrer comment faire. Nous allons maintenant implémenter la page du panier. Tout d'abord, nous allons implémenter une fonction qui va obtenir cette carte. Donc je vais juste le nommer, obtenir une carte. Il accepte un nom d'utilisateur. Et je vais l'appeler «  Fetch Card Products ». Et puis le point final est. Cette carte, puis l'ID utilisateur. Il s'agit du point final de l'API du panier. Comme il s'agit d'une API factice, nous devons utiliser informations utilisateur déjà existantes dans leurs produits automobiles. Nous ne pouvons pas insérer nos propres données pour de vrai. Nous allons prendre un identifiant d'utilisateur pour récupérer qu'il se trouve dans simplement rappelez-vous ce que nous faisons n' est que de fausses données. Je voudrais juste que vous compreniez le concept de HTTP et comment récupérer et afficher les données dans l'interface utilisateur. C'est ça, rien de plus. Maintenant, créons une page d'écran de garde. Le point vert de Dieu. Importez ensuite du matériel. Faisons un écran de cartes moins rigide. Alors comme vous le ferez, nous aurons son échafaud. Ensuite, dans ce titre. Bon ? Tu l'es. Bon sang, ça aura l'air professionnel. Ensuite, certains Ted sont les mêmes qu'avant nous l'avons fait tellement de fois, je suppose que maintenant vous aviez un expert dans ces domaines. Maintenant, dans le corps, nous aurons quelques présidents d'un constructeur qui acceptera si l'avenir obtenir une carte. Et je vais envoyer un ID utilisateur, dont je sais déjà qu'il est là dans le fixe ou l'API. Il suffit d'utiliser la documentation de cette API. Encore une fois, si vous n'avez pas compris instantané qui a un centre de données, c'est un indicateur de progression circulaire. Ici. Pour le moment, je suis en train de lire un texte de réussite afin que nous puissions obtenir ce résultat dans la console de débogage. Maintenant, évidemment, nous devons également naviguer vers l'écran. Alors à la maison, allez dans la barre de l'application et je vais copier ce bouton d'icône et le coller. Et maintenant, ce sera le panier d'achat. Et cette page sera l'écran des gardes. Allons voir ça. Tu vois, nous avons cette carte. Je peux entendre. Maintenant, si je clique sur l'icône du panier, cette réponse est la suivante. Cela nous donne une réponse de 200. C'est-à-dire que c'était un succès. Nous avons l'ID utilisateur un. Alors. Notre principale préoccupation est la clé des produits les plus simples. La clé du produit a donc la valeur d'un tableau, qui comprend l' identifiant du produit et la quantité. obtenons donc ici uniquement cet identifiant de produit. Nous devons donc utiliser les futurs constructeurs afin de récupérer les détails de la carte dans un premier temps, puis de récupérer le produit. C'est pourquoi nous voulons le nom du produit et l'image du produit à partir de cet identifiant de produit. Commençons donc pour cela. Simplement, nous écrirons si l' instantané contient des données, puis nous aurons une liste de produits, qui est, qui est cette clé, est-à-dire la clé des produits. Maintenant, nous allons utiliser un générateur de vue de liste. Affichez tous ces produits. Et dans le nombre d'articles, j'utiliserai des produits point land. Et dans le générateur d'objets, j'utiliserai le contexte et l'index. Maintenant, le plaisir commence parce que, encore une fois, nous devons utiliser un futur. Parce que maintenant nous devons obtenir les détails du produit à partir de l'identifiant du produit, ce que nous avons déjà fait auparavant. Nous devons donc simplement écrire des API, des enquêtes, point obtient un produit unique. Et puis je vais simplement utiliser ces produits, puis indexer puis cet identifiant de produit. Comme ça. Maintenant, encore une fois, je vais avoir des contextes Rick , puis voir un instantané. Cette fois, je vais nommer l'instantané de l'arc. Et puis encore une fois, nous devons vérifier si un seul point d' instantané contient des données. Cette fois, je vais retourner un indicateur de progression linéaire pour la première fois. Et maintenant je vais avoir un style de liste contenant tous les détails. Simplement dans le style liste. Je vais d'abord avoir ce titre et vous montrer qu'il fonctionne. Chantez les données ponctuelles d'instantané, puis le titre. Voyons si cela fonctionne ou non. Sortez votre candidature. Et puis simplement si je clique sur ce panier, C, C, nous avons les trois articles qui se trouvent dans le panier. Cette logique est un peu délicate, mais vous devez mettre la vidéo en pause et la comprendre correctement. Dans le premier futur constructeur, nous recevons le chariot. Dans le second futur constructeur, nous obtenons le nom de l'image du produit et un prix à partir de cet identifiant de produit. En tête, j'utiliserai le réseau de points d'image, puis simplement les données de points d'image. Et puis image. Je vais juste lui donner une hauteur de 40. Alors dans le sous-titre, j'écrirai ce prix ou pas le prix. Je veux dire cette quantité. Combien je l'ai commandé. Ce n'est pas moi, ça, ces données d'API factices. Et c'est une quantité, nous devons donc la changer en chaîne. Et puis dans cette fin, j'aurai un bouton d'icône et l'icône sera supprimée. C'est un produit retardé. Je construis tout cela pour en faire plus, charger beaucoup plus d'applications du monde réel et pas seulement une application factice. Espérons que tout fonctionne bien. Apportez votre émulateur et votre code dans le panier. Et tu vois, ça a l'air parfait. Nous avons ce titre, nous avons l'image et nous avons également la quantité. Cela ressemble maintenant à une page de panier du monde réel. Nous n'avons besoin que d'un bouton de commande de base maintenant ici. Nous pouvons le donner dans la propriété de navigation inférieure de l'échafaudage. Scaffold, au lieu d'utiliser le bouton d'action flottant, je vais utiliser, mais la barre de navigation. Et ici, j' aurai un conteneur. Ensuite, je vais juste lui donner une hauteur de 60. Poids de l'infini à deux points, c'est-à-dire la largeur totale. Couleurs vertes. Et dans cet enfant aura une région centrale de texte, qui sera, que nous avons dans le bon ordre maintenant. Ensuite, donnez-lui un peu de style de texte. Couleur, couleurs, blanc, taille de police. Taille de police. Je vais lui en donner 30. Sauvegardez-le. Et voir cette page est plus belle que toute autre application qui se trouve ici, cette application de base je dirai, parce que nous avons nos catégories, lorsque nous cliquons dessus, nous avons les produits. Vous voyez, nous avons ces produits. Si nous cliquons sur un produit, le produit Dale est présent et cette erreur est simplement due au fait que la page n'était pas défilante. Pour résoudre ce problème, nous pouvons simplement accéder à l'écran Détails du produit. Et ici, dans le contenant, je vais simplement l'emballer avec eux. Vue de défilement enfant unique. C'est ça. Tu vois, l'erreur a disparu. Ce sont les éléments de base que vous devez garder à l'esprit lors de la création d'une application que nous pouvons oublier. Et il y aura peu d'argent dedans, mais cela peut être résolu très facilement. Avec cela, cette partie des requêtes GET est finalement terminée. Nous avons beaucoup appris. Lors de la prochaine session. Nous allons parler de la façon de gérer la demande de publication. Alors continue juste à t'entraîner. 6. Traitement des demandes de POST: Bonjour, bienvenue à cette nouvelle session. Jusqu'à présent, nous ne faisions que discuter de cette requête GET. Mais il est temps que nous étudiions également les autres demandes. Parce que, de toute évidence, nous avons maintenant les données. Mais nous allons également augmenter les données pendant une grande partie du temps. C'est-à-dire que nous enverrons également des données jusqu'à présent nous devrons utiliser la demande de publication. Alors maintenant, comment gérer la demande de publication ? Nous savons déjà que l'envoi de données à un serveur est réduit. Nous l'utilisons dans des scénarios tels que le téléchargement d'un fichier ou envoi de données de formulaire. Dans une demande de publication. Des paramètres supplémentaires tels que les en-têtes et les corps sont également envoyés avec la demande contenant nos données. Maintenant, dans notre API, nous avons cet utilisateur de connexion, c' est-à-dire le login utilisateur et le point également, qui est une requête post. Et nous devons envoyer un nom d'utilisateur et un mot de passe. Et comme il s'agit d'une API factice, nous ne devons envoyer que ce nom d'utilisateur et ce mot de passe. Ensuite, il réussira et enverra un jeton malade. Ce qui signifie simplement, oui, que les informations d'identification de l'utilisateur sont réelles, sont valides. Passons maintenant aux enquêtes APA, et nous allons créer ici une demande de publication. Il s'agira simplement de la future connexion de l'utilisateur. Ensuite, il acceptera un nom d'utilisateur et un mot de passe chaîne. C'est donc une façon d'écrire très professionnelle que vous utiliserez également dans des applications réelles. Si je le voulais, j' aurais pu écrire ou coder directement le mot de passe du nom d'utilisateur ici. Mais je veux qu'il soit beaucoup plus dynamique. Nous aurons une URL de connexion, des barres d'URI. Et cela sera certainement présent dans le point de terminaison de l'URL. Et après cela, nous aurons l'art et ensuite nous connecterons. Ok ? Il est maintenant temps de passer à la nouveauté, à savoir la réponse. La réponse sera x au message p point pour la première fois, et il aura notre URL de connexion. Maintenant. Nous devons envoyer un nom d'utilisateur et un mot de passe à cette partie. Je vais donc simplement dire ici, nom d'utilisateur, nom d'utilisateur, puis mot de passe, mot de passe. C'est ainsi que nous l' envoyons. C'est ça. Ce n'était pas très grave, je suppose, parce que c'est aussi une demande dans laquelle nous ne faisons tout simplement rien. Nous avons notre réponse et nous accepterons une URL, n'importe quel corps. Maintenant, ici, j' écrirais simplement la robe, les liens, les points, le code d'état, et tout devrait être là. Désolée, j'ai oublié d'utiliser wait. C'était une erreur très stupide. N'oubliez donc pas que lorsque nous faisons ce genre de demande, attendre est très important. Nous allons maintenant utiliser le point de terminaison de connexion utilisateur de l'APA. Il renverra un jeton s' il est exécuté avec succès. Maintenant que nous avons la fonction, il est temps de créer l'écran, qui est l'écran de connexion. C'est tellement bon que notre candidature est plus professionnelle et de plus en plus complète. Maintenant, créons un écran de connexion. Ensuite, scannez le téléphone, la barre d'applications. Alors appelons-le boutique en Floride. Tu peux nommer ce que tu veux. J'utilise juste un nom aléatoire. Et puis la couleur de fond sera colorée à partir de X. Et maintenant dans le corps, je vais avoir un conteneur. Il aura quelques marges de Duan De, débarrassé du point de requête multimédia des contextes de taille de point, de largeur de point et de hauteur comme lorsque la hauteur totale doit être prise. Ok ? Maintenant, dans cet enfant, nous allons avoir une colonne dans cette matrice insuline hommes comme centré et croix x est un élément ainsi que l'envoyer parce que je veux que ces champs soient au centre de l'écran. Nous aurons donc deux champs de texte, nom d'utilisateur, mot de passe. Mais tout d'abord, je peux faire la page d'accueil. Ce sera la page d'accueil de notre application. Maintenant, si je rafraîchis, nous pouvons voir que c'est le test de la fleur nette. Et maintenant, l'écran de connexion. Nous aurons, je suis aussi au contrôleur d'édition de texte. Quand nommerions-nous contrôleur avec édition de texte et pour apprendre. Et le deuxième contrôleur, quand on parle de contrôleur. Maintenant, comme je l'ai dit plus tôt, nous devons utiliser le nom d'utilisateur et le mot de passe qui sont donnés ici. Je vais donc simplement le copier. Et ici, dans ce texte, je vais le coller. Et encore une fois, je vais copier ce mot de passe ici. Et là, je suis également allé coller le mot de passe, car il devrait être prédéfini. Maintenant, dans les enfants, passons aux champs de texte. Nous savons déjà comment utiliser ce TextField, comment le décorer. Ce n'est pas une nouveauté. Nous l'avons fait lors des sessions précédentes. Dispose d'une décoration d'entrée, étiquetée, d'un usage et d'un nom. Ensuite, j' aurai aussi une bordure. Après cela, j'aurai une boîte de taille. Je tape D. Et là encore, j' aurai ce champ de texte, qui sera un mot de passe. Maintenant, après le champ de texte, nous aurons un bouton simplement dans le conteneur. Je vais lui donner une hauteur de 50. Et débarrassez-vous de la hauteur du point de la requête multimédia, c'est-à-dire toute la largeur de l'écran. Discorde en place cet enfant, j'aurai un bouton surélevé. Et dans cet enfant, je vais simplement écrire login. Et je vais lui donner un peu de style. L'un dit 25, poids de police avec la balle. OK. Vous voyez, nous avons notre écran de connexion et il est plutôt beau. Si vous le souhaitez, vous pouvez avoir une image de logo ici, c'est à vous de décider. Donc simplement dans le bouton surélevé, je vais écrire, je vais appeler cela notre fonction de connexion ici. Attendre la connexion de l'utilisateur au service API Le nom d'utilisateur Je vais écrire le texte du point du contrôleur de nom, et le mot de passe Je vais écrire texte du point du contrôleur de mot Disons « nulla ». Vérifions-nous s'il fonctionne correctement ou non. Si je clique sur le bouton Connexion, voyons que la console est 200 et que nous avons notre jeton avec nous. Puisque notre jeton fonctionne, ce que nous voulons, c'est que si l' utilisateur se connecte avec succès, il devrait être envoyé sur l'écran d'accueil, comme n'importe quelle autre application du monde réel. Donc ce jeton, nous allons l'enregistrer ici dans cette variable. Ensuite, nous vérifierons si jeton, c'est-à-dire obtenir un jeton. Et la valeur du jeton n' est pas égale à Null. Parce que s'il est appelé « aucun », c'est-à-dire que nous envoyons des données. Donc nous allons simplement écrire, si ce n'est pas égal à null, est-à-dire que c'est correct. Vous utiliserez un snack-bar pour afficher un feedback à l'utilisateur qu'il a saisi. Informations d'identification correctes. Il suffit d'écrire le texte. Succès. Et Yard Token ID est. Et je vais simplement imprimer, imprimer le jeton à l' utilisateur comme ceci. Et je vais vous donner quelques informations générales qui ont conduit à cela. Remarquez le vert, c'est-à-dire pour tamponner la collation, mais je donne cette couleur de fond. Après cela, ce que je veux, c'est le snack-bar soit affiché pendant deux secondes, puis nous naviguerons pour cela. Pendant cette durée de deux secondes, je dois utiliser ce futur, la fonction delete pour qu'elle lise do second, puis nous navigue. Naviguez ensuite vers l'écran d'accueil. en page Darian. Puis l'écran d'accueil. Et la page d'accueil. Comme ça. Nous allons sur la page d'accueil. Et si ce jeton n'est pas là, c'est-à-dire qu'il y a une erreur. Ensuite, nous montrerons le snack-bar. Mais ici, tout d'abord, vous allez écrire un nom d'utilisateur ou un mot de passe incorrect. Nom d'utilisateur, mot de passe correct. Et la couleur doit être rouge. Dans ce cas. Vérifions-le s'il fonctionne correctement ou non. Premier fichier, je vais écrire un mauvais nom d'utilisateur aujourd'hui, je vais le supprimer pour puis cliquer sur Connexion. Voir nom d'utilisateur ou mot de passe incorrect. Dans notre console de débogage également, nous avons un message comme celui-ci. Mais que se passera-t-il si je fais les choses correctement ? Puis cliquez sur Login. Nous avons ce message de réussite 2. Ensuite, nous sommes renvoyés à l'écran d'accueil. Waouh, ça a l'air sacrément beau. Et nous avons enfin compris comment utiliser cette demande de publication également. Puisque nous envoyions des données dans le corps de la requête, il s'agissait d'une requête post. Vous devez donc vous rappeler quand utiliser les requêtes GET, quand utiliser post request. Mais au moins, nous avons cette application qui fonctionne. Quand on se rafraîchit. Évidemment, cela viendra sur l'écran d'accueil, mais maintenant vous avez une application de base pour montrer à vos amis que vous avez construit quelque chose à partir de zéro. Maintenant, vous n'êtes pas un débutant, vous êtes un intermédiaire en programmation en Floride. J'espère que vous avez apprécié jusqu'à présent. Au cours de la prochaine session, nous parlerons des deux dernières demandes, à savoir la requête PUT et la demande de suppression. Nous allons donc certainement aimer travailler sur ces fonctionnalités également. Ensuite, essayez simplement de comprendre le code en profondeur. Si vous avez encore des doutes, s'il vous plaît. Vous pouvez également le rechercher sur Google. Nous le demandons sous forme libre et tout. Mais c'est un concept très important. Et pendant que vous facturez des API avec NodeJS MongoDB, vous devez utiliser ces HttpRequest de nombreuses fois. Merci. 7. Demande de PUT et de SUPPRESSION: Bonjour, bon retour. Dans les vidéos précédentes, nous avons appris à utiliser les requêtes GET et Post. Dans cette vidéo, nous allons en savoir plus sur la requête PUT. Request est essentiellement utilisé pour obtenir les données et le serveur. Donc, dans cette fausse API de boutique, nous mettrons à jour notre carte lorsque nous cliquerons sur le bouton Ajouter au panier. C'est-à-dire que lorsque nous cliquons sur ce bouton, du code devrait s'exécuter. Mais n'oubliez pas qu'il s'agit d'une fausse API, donc rien ne sera mis à jour pour vous. Nous pouvons simplement voir la réponse qui console pour se conformer. Il suffit d'aller dans l'API du freak store, puis de vous renseigner sur les chiens. Vous trouverez ici toutes les API qu'il prend en charge. Je vais venir et cliquer dessus , mettre à jour la carte. Et maintenant, vous pouvez voir la méthode est mise et nous devons envoyer des salutations, l'ID utilisateur, la date et les produits. Et le produit est de savoir s' il s'agit d'une collection, c' est-à-dire d'une liste de cartes contenant l'identifiant du produit. C'est ça. Donc oui, tu peux utiliser ou patcher ce que tu veux. Je vais utiliser pour que cela s'exécute. Nous allons simplement accéder au fichier point point de nos services API. Et ici, je vais créer une requête PUT. Ensuite, créons une carte de rendez-vous pour le déjeuner. Ce sera une fonction sinc. Et maintenant, il accepte un identifiant utilisateur et un identifiant de produit. Ok ? Après cela, nous aurons cette URL. Comme toujours. Je vais le nommer simplement mettre à jour l'URL. Et l'URL sera constituée de barres obliques et d'un identifiant d'utilisateur. Donc, comme ça et ID utilisateur. Ok, je vais juste faire ce d petit d. Après cela, je dois créer les fonctions qui sont une réponse et ensuite attendre. Et maintenant, nous allons utiliser STDP dot put. L'URL sera l'URL de mise à jour. Ensuite, le corps sera une carte. Et maintenant, nous devons envoyer les clés, ces ID utilisateur. Ce sera une chaîne. N'oubliez pas que chaque clé aura une valeur de chaîne. Ce que je veux dire par là, c'est que je vais juste te montrer la date. Nous allons simplement écrire date, heure, point, datetime, point, point sur chaîne. Nous devons donc convertir ces éléments en chaîne de caractères. Et puis les produits. Et ce sera une liste, d'accord ? Liste des cartes. Et ici, je vais simplement écrire ici l'identifiant du produit, l'identifiant du produit et la quantité d t. Je vais juste coder en dur comme un seul. Ensuite, créez cette chaîne de liste afin de fonctionner. Maintenant, comme toujours, il suffit d'imprimer le code d'état de réponse. Et puis imprimez oui lie le corps. Et après cela, je retournerai JSON decode response.body, mais nous ne ferons rien. Je crée simplement la fonction pour que vous compreniez comment le faire lorsque vous avez une API en temps réel. Nous avons maintenant la fonction activée. Passons au détail du produit. Ici. Dans le bouton d'action flottant. Ici, je vais simplement en faire un évier avec un poids. Je vais devenir un truc. Service APA, carte de mise à jour point, puis ID utilisateur. Je saurai que j'en enverrai un puisqu'il est codé en dur. Ensuite, cet identifiant de produit est cet identifiant. J'envoie également cette pièce d'identité. Après ça, on peut juste faire peur, tomber, tomber, le messager des contextes, le point show, le snack-bar. Et puis un snack-bar. Vous pouvez simplement écrire le produit ajouté au panier. ne sont donc que de faux commentaires. Mais le code de la requête HTTP est réel. Sortons-le. Maintenant, lorsque vous accédez à l'écran de cette veste, lorsque je clique sur ce bouton Ajouter au panier, voir le produit ajouté au panier. Dans la sortie, vous pouvez voir l'ID, l'ID utilisateur, date et un produit qui est ID, identifiant du produit est trois. Nous en envoyons trois. C'est pourquoi cela signifie au final que notre requête PUT fonctionne parfaitement. Imaginez simplement qu'il s'agisse de données réelles et que nous ne faisons que mettre à jour ces données sur le serveur. Données. La dernière demande dont nous allons discuter est la demande de suppression. La requête de suppression est donc utilisée pour supprimer ces données sur le serveur. Nous allons donc supprimer notre carte. Nous ferons semblant de supprimer notre panier lorsque nous cliquerons sur le bouton Supprimer dans l'écran du panier, c' est-à-dire ce bouton. Ce bouton. Lorsque nous cliquons dessus, nous devrions simplement obtenir les commentaires. Et comme toujours, il s'agit d'une fausse API. Nous allons juste voir la réponse dans la console. Créez donc une demande comme demande retardée plutôt qu' une simple fonction de carte retardée. Ensuite, saisissez l'ID utilisateur. Nous allons donc simplement obtenir le nom d' utilisateur et supprimer sa carte. J'essaie juste de te faire comprendre. Je sais que cela n'a aucun sens de simplement travailler avec de fausses API. Mais croyez-moi, cela vous aidera beaucoup. Maintenant. Nous avons juste besoin de cette même URL. La seule différence sera que les requêtes HTTP ici, nous allons simplement écrire la réponse est égale à attendre http point retardé, URL de carte retardée. C'est donc ce que nous devons faire. Et après cela, nous écrivons simplement une réponse, un code d'état. Affiche la réponse dans le corps et renvoie le code json point d response.body. Maintenant, dans l'API de commande fixe, vous pouvez voir qu'il s'agit d'une page de panier retardé. Et ici l'URL est comme ce panier et l'identifiant utilisateur, et nous n'avons qu'à leur envoyer mon tiers de retard. Et puis dans la sortie, nous obtiendrons les produits de date d'identification utilisateur. C'est ça. Essayons-le. Passons à la page de l'écran de la carte. Et puis, dans cette traînée, nous avons ceci sur les éloges. Et ici, nous allons simplement écrire un service d'API de poids Dot, Delete Cut. Ensuite, nous vous enverrons simplement l'identifiant d'un utilisateur. Comme il s'agissait d' une véritable application, vous pouvez obtenir leur ID utilisateur auprès de Firebase ou de n'importe où vous le souhaitez. Et après cela, nous aurons juste un messager d'échafaudage et montrerons simplement un snack-bar. Il suffit de montrer un snack-bar. du contenu en tant qu'élément Suppression réussie du contenu en tant qu'élément. C'est ça. Essayons-le. Cela fonctionne-t-il ou non ? Allez maintenant à l'écran de la carte. Et maintenant, je vais vider la console. Et maintenant, lorsque je clique sur ce bouton de suppression, vois l'élément supprimé avec succès. Et nous avons cet identifiant d' article, ce nom d'utilisateur , cette date et ces autres produits, voir 61. Nous ajoutons donc en tête la bonne carte. Je voulais juste implémenter une fonction de suppression et vous faire comprendre comment elle fonctionne. Je sais que tout le panier est en train d'être supprimé, mais nous devrions supprimer un produit dans ce cas. J'espère que tu as compris. Vous devez mettre à jour cette carte. d'autres termes, si je le supprime dans le serveur, il suffit de supprimer ce produit de cet élément de liste. C'est à toi de décider. Mais au moins, vous devez connaître le concept et comment l'écrire correctement. Tellement haut, j'espère que vous avez apprécié cette vidéo. Nous avons parlé de toutes ces demandes, qu' il s'agisse de GET, de post, de PUT, de delete. Dans la vidéo suivante, nous parlerons enfin de la requête authentifiée. Ce sera la dernière vidéo de notre module HTTP. Et Q. 8. Faire des demandes authentifiées: Bonjour, bon retour. Au cours de cette session, nous verrons comment effectuer des demandes authentifiées. Jusqu'à présent, nous utilisions une API à laquelle nous pouvions accéder directement et ne nécessitait aucune clé d'authentification. Mais ce n'est pas le cas la plupart du temps lorsque nous créons des applications. Pour récupérer des données à partir de nombreux services Web, vous devez fournir une clé d'autorisation ou d'authentification. Il existe de nombreuses façons de procéder, dont nous allons discuter maintenant. Maintenant, la première méthode est cette méthode artistique de base, l'authentification de base signifie que l'application cliente envoie le nom d'utilisateur et le mot de passe au serveur dans les requêtes HTTP. Donc, lorsque nous avons un nom d'utilisateur et un mot de passe, nous utiliserons un art de base. Et le disque peut également être fait de deux manières. Soit nous devons envoyer ces détails dans le paramètre body, soit l'autre méthode consiste à encoder ces informations d'identification avec UTF-8, puis à les transmettre dans le paramètre headers. La première chose à faire est que lorsque nous envoyons ces détails dans le paramètre body, il suffit de sortir votre fichier de services API. Et créons une fonction appelée authentification de l'utilisateur. Et maintenant, nous avons un nom d'utilisateur et un mot de passe chaîne. Nous n'avons actuellement aucune URL. Je suis en train de vous montrer le code du cours de canard qui explique comment procéder. Parce que vous avez certainement une API telle qu' un autre serveur AWS ou un serveur NodeJS ou autre. J'utilise juste un truc factice. C'est un point api quelque part, I0, peu importe. Cela n'a aucun sens. Le fait est que l'important est ici, c'est la réponse. Maintenant, quand nous écrivons, la réponse est égale à wait http point. Lorsque nous envoyons ces données dans le corps, nous ne pouvons pas avoir de demande GET. Nous devons toujours utiliser la demande de publication. Ensuite, nous pouvons envoyer le paramètre party. Maintenant dans le corps, je vais simplement utiliser ce nom d'utilisateur, ce nom d' utilisateur et ce mot de passe, comme ce mot de passe. Ensuite, comme toujours, vous pouvez imprimer la réponse. Je répète simplement que nous n'utilisons aucune API. Je veux juste vous montrer le code comment authentifier STDP également, car tout sera comme nous l'avons fait auparavant. seule différence est que nous utilisons ce paramètre party. Imaginez donc qu'il s'agit de votre serveur NodeJS et nous envoyons le mot de passe du nom d'utilisateur pour l'authentification. C'est l'un des arts de base. La seconde consiste à envoyer les détails à l'aide l' en-tête d'autorisation que nous pouvons faire. Tout simplement comme ça. Ok, je voudrais juste créer une autre fonction pour que vous vous souvenez de l'utilisateur ou du troisième IgG et que je vais simplement écrire la session. Maintenant, je vais enlever ce truc de corps. Et comme nous n'utilisons pas body, nous pouvons également envoyer une requête GET parce que c'est le cas, nous envoyons ce détail via des en-têtes. Nous avons maintenant le premier encodage, ces détails comme cet art de base. Ensuite, la première chose sera ce mot-clé de base. Après cela, nous aurons un encodage en base 64. Et à l'intérieur, je vais juste écrire UDF à huit code UDF à huit points. Et ici, vous allez écrire votre nom d'utilisateur et votre mot de passe. Simplement. Nom d'utilisateur et mot de passe Ce code, vous devez vous rappeler que ce préfixe de base est le préfixe que nous allons utiliser. Il existe un autre préfixe que nous utiliserons dans quelques secondes. Mais c'est ainsi que nous avons la clé d'autorisation qui code. Ensuite, dans cette requête GET, il suffit d'écrire des en-têtes. Utilisez ensuite la carte. La première clé que vous utilisez est le type de contenu. Ce sera l'application Jason. Le second est l'autorisation. C'est de cela que nous parlons. Et il aura ces informations d'identification de base. C'est ça. C'est comme ça que ça se passe. C'est donc la façon d' envoyer le nom d'utilisateur et mot de passe et pas seulement le nom d'utilisateur et le mot de passe Certains sites Web ou APS vous ont peut-être demandé d'envoyer le code API ici. est-à-dire qu'il n'est pas toujours nécessaire d'utiliser ce type de nom d'utilisateur et de mot de passe. Cela dépend également de l' API avec laquelle vous travaillez. Maintenant. premier était l'art de base. Le deuxième, c'est la bière. L'authentification de la bière signifie simplement que nous devons nous authentifier en utilisant un jeton au lieu d'un nom d'utilisateur et d'un mot de passe. Maintenant, si vous avez un jeton, cette API spécifie que vous devez utiliser ce préfixe beer. C'est comme ça que ça se passe. Rien de trop. Sur Lee. Dans l'autorisation. Vous avez cette bière pour le mot clé et cette valeur symbolique. C'est ça. C'est l'accès pour conserver la pose. Et imaginez simplement que nous avons ce jeton d'accès. Une certaine valeur à transmettre. Vous pouvez dire une certaine valeur symbolique, c'est tout. C'est ainsi que vous utilisez ce meilleur art. Je ne fais que le répéter. Si vous avez une API qui possède sa propre clé d'API, remplacez la clé d'autorisation par cette clé spécifique. Parfois, certaines API indiquent que dans l'en-tête, la clé doit être comme ceci, puis la valeur du jeton. Vous devez donc lire la documentation de cette API très attentivement afin de ne pas commettre d'erreur. Mais n'oubliez pas le code ici. Cela se fait la plupart du temps lorsque nous effectuons n'importe quel type d'authentification. Je sais que vous vous posez peut-être la question, mais il n'y avait pas de véritable API. Je ne fais que vous montrer quelques exemples. Un, vous pouvez aller essayer cette news api dot ORG. Il vous donnera toutes les dernières nouvelles et toutes. Vous pouvez obtenir la clé API ici et lire la documentation sur l' utilisation de cette API pour vous authentifier. La deuxième clé API que vous pouvez obtenir est cette OMB DAPI. Il vous suffit de cliquer sur cette clé API, d'écrire votre e-mail ici et de le soumettre. De cette façon, vous obtiendrez votre clé API et vous pourrez simplement commencer à accéder à toute la base de données de films à partir d'ici. Les autres API ou si une paire ici vous pouvez également obtenir l'EPI pour vous-même. Et puis ce sont les API qui fournissent une API météo actuelle de Cali PA. Vois comme ça. Il suffit donc de lire la documentation correctement et de l'essayer par vous-même. En cette pandémie, si vous le souhaitez, vous pouvez également obtenir cette API de suivi COVID où vous obtiendrez toutes les données liées à la COVID-19 dans le monde entier. Avec cela également, vous pouvez créer votre propre application. J'espère donc que vous avez apprécié cette session. Si vous le souhaitez, vous pouvez simplement appuyer ici et essayer vous-même. Essayez de faire autant d'erreurs que possible devenir un meilleur développeur. Merci. 9. Pourquoi nous avons besoin de modèles: Bonjour, bon retour. Dans ce module, nous parlerons nos modèles et des raisons pour lesquelles nous en avons exactement besoin. Model est simplement la classe utilisée pour représenter certaines données. Toute application fonctionnera avec différents types de données, évidemment, l'aide de modèles, il est plus facile appeler les données et de les transmettre dans l'application. Donc, si vous vous souvenez des exemples précédents, nous avions l'habitude de transmettre des données d'un écran à un autre directement. Il s'agit de la carte elle-même ou la jambe de valeur de carte que nous lui transmettions. Mais dans une application réelle, les données provenant du serveur auront une structure complexe. Et nous ne serions pas en mesure de souvenir de cette clé de toutes les données. C'est pourquoi nous utilisons des modèles. En écoutant cet exemple, vous pouvez voir comment nous créons nos modèles. Supposons que nous ayons les données d'un utilisateur. Nous créons donc un utilisateur de classe et Dan dove, les valeurs qu'il existe, est-à-dire toutes les données qui se trouvent à l'intérieur de l'habituel. Vous devez être écrit comme ceci sous la forme de variables d' instance, comme final int, id, final string name. Ensuite, un constructeur doit être présent afin que nous puissions passer la valeur et elle lui sera affectée. Et cette fonction d'usine n'est rien d'autre qu'un moyen de transformer ces données, des données cartographiques provenant de l'extérieur. Puis renvoyez un objet de cette classe. En termes simples, à partir de Firebase ou de l'API, nous obtenons des données cartographiées qui peuvent mapper des données. Nous l'enverrons ici, c' est l'utilisateur de Jason. Ensuite, il retournera un objet. C'est ça. Ce sont donc les termes que nous utilisons généralement lorsque nous travaillons avec des modèles. C'est la sérialisation et la désérialisation. La sérialisation consiste à convertir en objet intelligent Jason. Et la désérialisation consiste à convertir un objet de données JSON. décélération est ce que nous ferons la plupart du temps. C'est-à-dire que les données provenant de ce format JSON ou de la carte seront converties en un objet sombre. Je sais que c'est possible, vous vous sentez peut-être dépassé par ce concept, mais c'est très facile à faire une fois que vous l'avez compris. Nous devons donc créer une classe pour gérer la décélération. C'est ce qu'on appelle la classe modale. Vous pensez peut-être, d'accord, mais sans modèles également, nous avons pu accomplir notre tâche. C'est-à-dire que cette application fonctionnait parfaitement. Alors pourquoi avons-nous besoin de modèles exactement pour notre application ? Regardez donc cet exemple. Nous avons ici ces données dans le nom du format de la carte, l'ID utilisateur, l'e-mail. Les représentations ci-dessus représentent des données utilisateur très basiques. Nous pouvons voir que la chaîne JSON utilise cette bibliothèque de conversion de fléchettes comme nous le faisions précédemment. Ensuite, cela en fait une valeur de chaîne et renvoie la valeur de la carte. La valeur est ensuite accessible de la manière suivante. C'est-à-dire qu'une fois que nous avons décodé la chaîne JSON, après cela, nous pouvons simplement imprimer hi, puis utilisateur et nom d'utilisateur, c' est-à-dire que le nom est la clé de ceci. carte plutôt que l'e-mail est une autre clé et des identifiants utilisateur et une autre clé. C'est ce que nous faisions tout à l'heure. Voyons maintenant quel est le problème de cette approche. Malheureusement, le décodage JSON renvoie une carte, ce qui signifie que vous ne connaissez pas ce type de valeurs de données avant l'exécution. Donc ici, email ou cet identifiant utilisateur est un entier que nous ne connaissons pas tant que nous ne l'avons pas imprimé ici. Et s'il montre une erreur ou quoi que ce soit d'autre. Avec cette approche, vous perdez la plupart des fonctionnalités de langage typées statiquement. Il s'agit de la sécurité de type, de l'auto-complétion et, surtout, des exceptions lors de la compilation. Donc, Runtime, OK, on a compris. Mais le temps de compilation pendant que nous écrivons le code. Ensuite, il ne s'affichera pas non plus et ne nous donnera aucune erreur. Mais lorsque nous utilisons des modèles, nous indiqueront qu' il s'agit d'un entier. N'utilisez pas de chaîne ou quelle que soit l'exception, is. Ce n'est pas une bonne pratique. Par exemple, chaque fois que vous accédez aux champs du nom ou de l'e-mail, vous pouvez également introduire rapidement une faute de frappe. Puisque supposons que son nom déteste le courrier électronique. Ça peut être E, Dash Mail ou autre. Ici c'est l'identifiant de l'utilisateur, c'est capital. On pourrait l'écrire en petit format. Ce genre d'erreurs est très fréquent lors de la programmation. Pour lutter contre ces problèmes, des modèles entrent en jeu et nous définissons strictement le type de valeurs comme ceci. avons strictement défini ici. C'est un entier, c'est une chaîne. C'est ainsi que nous sommes plus sûrs lors de la création d'une application. Et cela finit par rendre le code moins sujet aux erreurs, car la plupart des zones sont traitées pendant le temps de compilation. J'espère que vous avez compris pourquoi nous avons besoin de modèles et que vous n'avez peut-être pas compris comment les créer, mais ce n'est pas un problème. Lors de la prochaine session, nous créerons notre premier modèle. Merci. 10. Créer notre premier cours de modèle: Salut. Au cours de cette session, nous allons créer notre première classe modèle. Alors avant cela, sortez votre code VS. Et j'ai imité. Si j'appuie sur n'importe quel produit que dans la console de débogage, vous pouvez voir toutes les propriétés sont des données qu'il possède. Et pour cela, nous devons créer notre classe de modèle dans le dossier feuille. Nous allons créer un nouveau dossier appelé modèles. Et à l'intérieur, créons un fichier point de produit. Pour créer un modèle de verre. Tout d'abord, créez une classe appelée product. Et maintenant, entrez Alda, toutes ces données en tant que variables d' instance. C'est-à-dire que je vais dire encre finale, ID, puis chaîne finale, titre, puis montée. C'est un peu compliqué ici, donc c'est double. Et je n' utilise aucun type de données. Après cela, nous pouvons avoir la description finale de la chaîne, puis l'écran final, la chaîne, désolé, la catégorie, puis l'image de la chaîne finale. Donc oui, ce sont les données d'un produit. Ensuite, créez un constructeur. Pour la même chose. Maintenant, je dois écrire obligatoire. Ensuite, ce point est obligatoire Titre du point de départ obligatoire. Ces rayons, cette description, ce point, ce degré, cette image. Nous avons maintenant notre classe de modèle de produit. Il contient toutes les données. Nous devons maintenant créer une fonction qui acceptera Jason en entrée, puis qui retournera cet objet produit. Pour le créer, il suffit d'écrire le produit de Jason. Ensuite, il acceptera une chaîne de valeurs dynamiques appelée Jason. Je vais simplement écrire JSON. Ensuite, il vous suffira de retourner un produit. Maintenant, dans le produit, nous aurons bientôt l'identifiant du produit puis ils indiqueront de Jason BJ description de Jason BJ, n'est-ce pas cette corruption ? Alors décroche un diplôme, un diplôme Jason. Et puis, finalement, nous avons une image. Alors voyez, ce sont toutes les clés qui sont déjà mentionnées dans cette image de description de catégorie de prix. Maintenant, lorsque nous appellerons cette fonction, nous enverrons ces données ici et cela nous donnera un objet produit. C'est ça. Nous avons créé avec succès notre premier modèle. Maintenant. Pour l'utiliser. Nous devons accéder à notre fichier point des services API. Et il est temps apporter les modifications nécessaires à la fonction. Sachez qu'il y a beaucoup de fonctions et nous allons commencer par cela, obtenez toutes les fonctions post ici. Tout d'abord, je vais simplement lui donner un type de retour. De la liste des produits. C'est ça. C'est donc le type de retour. Maintenant, simplement, je vais créer une liste vide au début des produits, nommer tous les produits, et elle sera vide. Maintenant, je vais demander ce Jason Dodd de décoder le corps dans une variable ici. Et je vais passer en revue ce truc de Jason qui est tous les produits. Je vais passer en boucle et obtenir un produit en particulier ici. Et simplement, dans tous les produits, j'ajouterai le produit de Jason et j'enverrai ici le JSON. C'est ça. Et à la fin, je vais retourner tous les produits, c' est-à-dire la liste des produits. Donc, ce que j'ai fait ici, c'est tout d'abord que j'ai créé un tableau vide, que nous passerons à la fin. Et il contiendra l'objet produit est la liste de l'objet produit. Maintenant, ces Jason response.body seront au format JSON, dans la liste du format JSON. Nous allons donc simplement le parcourir en boucle et ajouter tout le produit après l'avoir converti via ce bouton. C'est le produit qui provient de JSON dans cette liste de produits et qui a renvoyé tous les produits. Après cela, nous devons apporter les modifications à l'écran d'accueil où il est affiché. est ici que nous obtenons les produits. Donc cet instantané asynchrone va maintenant nous donner un objet, pas un objet, il s' agira d'une liste de produits. Tout d'abord, je vais simplement créer une variable qui contiendra les données d'index. Il s'agit d'un seul produit ici. Comme il est en train de parcourir tous les instantanés, cela nous donnera un produit unique ici. Et après, nous devons simplement écrire le titre du point du produit comme ceci. C'est donc tellement simple. Produit, image, produit, le prix point toString. Et puis à la fin, je vais simplement écrire le produit, identifiant du produit. Comme ça. Voyons si cela fonctionne ou non. J'ai redémarré l' application, mais avant cela, vous pouvez simplement voir à quel point il est facile de générer la valeur. Nous n'avons pas besoin d'écrire la clé encore et encore, nous pouvons simplement utiliser directement cet opérateur point et nous obtiendrons les données. Il se compose. Maintenant, lorsque je clique sur ce bouton de connexion, vous trouverez toutes les données qui étaient déjà présentes auparavant, mais maintenant nous utilisons des modèles ici. Il s'agit donc d'une explication minimale des modèles et des raisons pour lesquelles nous les utilisons. Et croyez-moi, lorsque vous avez beaucoup de données, les modèles vous seront très utiles. Dans la vidéo suivante, nous utiliserons des modèles pour les détails du produit et d'autres pages également. Merci. 11. Changements requis dans le frontend: Salut. Dans la dernière vidéo, nous apportons ces modifications à l'écran d'accueil afin que nous puissions obtenir ces données de l'API et modifier celles adjacentes à notre classe de modèle, c' est-à-dire moins les modèles de produits. Au cours de cette session, nous allons également apporter les modifications nécessaires à la fonction de produit unique. Pour renvoyer le modèle. Sortez votre éditeur VSCode et accédez aux enquêtes APA point point neuf. Cela obtient une fonction de produit unique. Nous allons simplement, nous ne retournerons pas de JSON. Au lieu de cela, je conserverai ces données dans chaque magasin, ces données dans une variable appelée pot. Ensuite, je vais simplement transformer point produit de Jason et y passer le corps. Il retournera donc un seul objet produit. Et c'est ce dont nous avons besoin. Ok ? Maintenant, si nous avons effectué le changement de produit unique, nous devons également aller à l'écran Détails du produit. Effectuez les modifications nécessaires pour utiliser un modèle. Au lieu de ce truc avec Jason. Nous avons notre futur constructeur ici. Nous obtenons le modèle qui est le modèle du produit. Dans cet instantané. Ici, je vais simplement écrire ce type de données est product, puis les stocker dans Snapshot dot data. Ok ? Maintenant, nous avons ce produit ici et je vais simplement tout supprimer ici. Et j'ai parlé de l'image point, puis du prix du produit plutôt que de la catégorie de produit point. Et enfin, la description du point du produit. Vous pouvez donc constater par vous-même que c'est tellement pratique et facile lorsque nous utilisons des modèles. Parce que certainement en écrivant la carte, c'est Jason, nous pouvons faire une erreur dans cette clé que ces fautes d' orthographe ou quoi que ce soit d'autre. Il est donc préférable d'utiliser des modèles. Mettons-le à l'essai. Cela fonctionne-t-il correctement ou non ? Lorsque je clique sur Connexion, nous allons à l'écran d'accueil. Et si je clique sur ce produit C, il n'y a pas d'erreur. J'ai fait ces changements, mais cela fonctionne parfaitement. Vous pensez peut-être que notre travail est terminé. Mais si je clique sur ce bouton de carte, vous verrez cette erreur car nous avons également oublié l'écran de la fiche. Nous devons faire cela car il utilise également cette fonction. Cela permet d'obtenir un seul produit ici. De même, nous devons faire la même chose ici. J'utiliserai ce type de données de produit. Ensuite, synchronisez les données de point d'instantané. Ok ? Et puis écrivez simplement ici, point produit, image point produit. Alors voici cette quantité, c'est bon parce que nous obtenons cette quantité d'ici. Nous n'avons donc pas à changer cela. Mais bon, j'ai un noeud de vérification, il n'y a rien d'autre à changer. Revoyons notre application. Si ça marche bien ou pas. Je clique sur le login. Ok. Nous sommes sur l'écran d'accueil. Maintenant, quand je clique sur la carte, vois qu'il n'y a pas d'erreur. Parce que là encore, nous utilisons des modèles plutôt que des données cartographiques ou brutes de Jason. C'est ça. C'est ainsi que nous devons utiliser et mettre en œuvre des modèles. Dans la vidéo suivante, nous parlerons d' autres outils qui nous aideront à réaliser des modèles facilement. Merci. 12. Outil pour générer des modèles facilement: Salut. Donc, jusqu'à présent, v, nous créons nos modèles nous-mêmes. Donc ici, supposons que dans ce produit, c'était facile car il n'y avait que quatre variables ou données. C'est pourquoi nous avons fait tout cela seuls. Mais la plupart du temps, lorsque nous utilisons des API, certaines données sont très complexes. Dans ce scénario, nous pouvons avoir besoin d'outils qui nous aideront à créer facilement nos modèles. Sur le marché, il existe peu d'outils disponibles uniquement pour faciliter cette tâche. Il existe deux approches. L'une consiste à utiliser un outil en ligne et l'autre à utiliser des dépendances. Vous pouvez donc voir ici que nous avons une dépendance appelée sérialisable JSON. Vous pouvez l'utiliser si vous le souhaitez. Beaucoup de personnes l'utilisent. Je vais juste vous montrer Jason sérialisable. D'accord, et ensuite j' écouterai ce que je prépare. Tu vois, c'est le package dont je parle. C'est ce qu'on appelle Jason sérialisable. Si vous le souhaitez, vous pouvez certainement l'utiliser, vous trouverez de nombreuses ressources sur la façon de l'utiliser. Mais dans cette session, j'utiliserai cet outil en ligne appelé cette application quick type.io. Est-ce que c'est également parfait. C'est les deux qui sont très utilisés. Alors voyez si je viens d'écrire simplement flotté notre fléchette Jason à modéliser. Ensuite, vous les aurez tous les deux. Ok, je suppose. Oui, c'est instantanément parse json dans n'importe quelle langue. Ok ? Nous avons ça ici. Et pour le faire en pratique, j'utiliserai un autre APA. Plus tôt, nous utilisions cette fausse API de magasin. Mais maintenant, je ne veux pas utiliser cette API car nous savons déjà que les données qu'elle fournit. Je vais donc utiliser ce vice.com fruité. Il s'agit d'un service Web qui fournit des données pour toutes sortes de fruits. Il s'agit d'une API gratuite. C'est pourquoi je l'utilise. Et ici, vous pouvez voir tous les points finaux. Cela permet. Nous pouvons donc obtenir les données d'un fruit particulier comme celui-ci. Et nous pouvons également obtenir tous les fruits de ce point de terminaison, c'est-à-dire APS slash fruits slash on. Ce point final nous donne une liste de ces données cartographiques contenant tous les fruits. Donc, sans perdre plus de temps, j'aimerais vous montrer comment utiliser cette application quick.io pour créer des modèles. Donc ici, je vais simplement écrire apple et taper enter. Cela nous donnera la structure des données comme celle-ci. Ici, vous pouvez dire que ce n'est pas si complexe, mais cette chaîne KEY, la valeur est chaîne, chaîne, c'est un entier, mais ces nutritions sont encore une valeur de carte qui contient clés de chaîne et double en tant que valeurs. Je vais donc simplement copier cette structure et aller dans ce type rapide de point d'application et la coller ici. Mais avant de coller et de vous souvenir de votre langue, vous devez utiliser Dart. Et puis je vais simplement supprimer tout ce qui se trouve ici, coller dans le nom. Tu dois écrire le nom de ce fruit. Toi et pas toi, tu peux ajouter ce que je veux. Mais comme il s'agit de données d' un fruit en particulier, je suis en train de lire. Ok ? Maintenant, dans la sortie que vous voyez, nous avons ce modèle ici. Cela, beaucoup de choses ont été faites automatiquement ou autrement, nous avons dû tout écrire nous-mêmes et ce n'est pas faisable tout le temps. Donc, ce que je vais faire maintenant, c'est tout copier, copier toutes ces données et aller dans notre code VS. Et dans le dossier des modèles, je vais simplement créer un modèle appelé Fruit point point puis coller le tout ici. Vous pouvez donc dire qu'à cette époque, c'est simplement parce que les données ici ne sont pas nulles, comme ceci. Et comme c'est obligatoire, nous devons simplement écrire le mot clé requis pour que cette erreur disparaisse. C'est ça. Ensuite, la nutrition aussi, nous devons la coller et Alda ajoutée est maintenant corrigée. Donc, si vous regardez dans le cours d'aujourd'hui, la seule chose requise est celle-ci. Il s'agit des données ou des variables. Ensuite, grâce à ce constructeur, nous acceptons cela de la part de Jason. Nous l'avons déjà fait dans le produit. Pourquoi ? Lorsque nous utilisions fixed ou API, elle était créée automatiquement. Ce truc Json est juste en train de créer une donnée adjacente au format JSON et c'est de Jason qui crée les données dans ce format de modèle. Et maintenant, vous vous demandez peut-être pourquoi il existe deux classes différentes, classe de nutrition également. Tout simplement parce que ces valeurs nutritives sont à nouveau une carte. Donc tout ce que nous avons dans map sera à nouveau converti en classe. Donc, cette nutrition contient des glucides, des protéines , des graisses, des calories, Hoover, ces valeurs. Encore une fois, c'est une classe et croyez-moi, cela nous aidera beaucoup parce qu'à l'heure actuelle, toutes ces données ont leur type de données intact. Nous ne ferons donc aucune erreur avec la dose. Et si vous voulez voir quelle réponse nous obtiendrons comme ça, vous pouvez simplement aller diapers.com comme ceci et simplement écrire, c'est la réponse que nous allons traiter. Vous êtes peut-être submergé en ce moment, mais croyez-moi , ces données ne sont qu'une donnée. Et après cela, cela se répète avec des fruits différents, très différents. C'est ça. Nous avons donc appris à créer notre modèle JSON. Sans cœur, sans tout taper tout seul. J'utilise généralement ce type d'outils en ligne parce qu'ils font le travail très rapidement et que nous n'avons pas à inquiéter des types de données et si c'est quelque chose, s'il y a quelque chose qui ne va pas. Donc, dans la vidéo suivante, nous allons créer nos fonctions dans le fichier saw dart des services API afin de récupérer toutes les données de fruits et de les afficher sur notre application. Merci. 13. Consommez un nouvel api de repos: Bon retour. Nous avons donc maintenant notre modèle prêt. C'est l'heure. Nous créons une fonction dans le fichier point point de nos services API. Comme précédemment, nous pouvons récupérer les fruits, toutes les données sur les fruits. Il suffit donc de descendre et de donner un commentaire sur obtenir des fruits. Ensuite, simplement, nous aurons une future fonction appelée get on fruits et elle gagnera certainement en tant que fonction sinc. Ensuite, nous aurons une variable d'URL de fruit. Et ici, nous allons analyser notre URI, c'est-à-dire URL, qui se trouve ici. Désolé, oui. Ce sera cette barre oblique API, les fruits slash celle-ci. Il suffit de le coller. J'utilise ce soda API gratuit. Je n'ai pas besoin de créer les clés API de compte pour ces données nulles. Mais vous, je vous ai déjà appris à faire une demande authentifiée également. Donc, si vous le souhaitez, vous pouvez également essayer avec d'autres API. Nous avons donc cette réponse ici. Simplement que c'est le point p get. Ensuite, sur l'URL du fruit. Comme ça. Ensuite, je vais simplement créer une variable de parti. Et Jen, ici je vais écrire du code json point d afin qu' il puisse être converti en une chaîne de ce corps de réponse en une carte. C'est ça. C'est juste le travail de ce décodage par points json. Il convertit une chaîne au format JSON. C'est ça. Maintenant, ici. l'heure, nous avons créé une liste de variables de produit , puis nous l'affectons à un tableau vide. Ensuite, nous utilisons simplement ceci pour la boucle et ajoutons chaque donnée. Il s'agit de ces données uniques. Mais maintenant je vais vous montrer une autre façon de faire la même chose. C'est juste, ça fait juste le travail en une seule ligne, cette étude de front. Je vais obtenir cette liste de fruits. Je vais tous les nommer fruits. Ensuite, je vais simplement écrire la carte des points du parti. Je vais acheter un fruit en particulier ici. Et puis, et je l' enverrai pendant les deux jours à partir de la fonction JSON. Ok ? Et tout simplement je vais enfin créer, je vais tout faire sur une liste. Ce qu'il fait, c'est cartographier à travers le corps, c'est cette réponse. Ensuite, convertissez chaque fois qu'ils sont adjacents à l'objet fruit, puis le renvoyez. Cela signifie qu'il est en train de le retourner. Enfin, tout ce qui suit est fait, ce mappage est fait. Tout sera converti en liste. C'est ça. Et je vais simplement rendre tous les fruits ici. Et cette fonction, je vais lui donner cette liste de types de données génériques de fruits afin que nous sachions ce qu'elle retourne. Ok ? Cette portion est donc terminée. Notre fonction est prête. Il est maintenant temps de créer un nouvel écran afin que nous puissions afficher ces valeurs à l' applet dans l'application. Je vais simplement le nommer tous les fruits point, point. Maintenant, comme d'habitude, importez du matériel. Ensuite, chaque classe de liste d'état de je la nommerai écran de fruits. Maintenant, il va renvoyer un échafaudage dans l'application. Donnons-lui une élévation de 0. Couleur de fond des couleurs point arrangent x. Et cette fois, je vais lui donner tous les fruits. Puis le centre que j'ai dessiné dans ce corps. Faisons appel à un futur constructeur. J'espère que vous êtes maintenant très à l' aise avec ce type de code, car nous le faisons depuis très longtemps. J'utilise les services d'API, puis j'obtiens tous les fruits. est aussi simple que ça. Ce générateur aura un contexte et un instantané. Ce sera dans un seul instantané. Alors je vais vérifier. Si l'instantané DOD a la colombe. Si ce n'est pas le cas, je vais renvoyer un indicateur de progression circulaire. Et s'il contient des données, je reviendrai dans le générateur de points de vue liste. Maintenant, le nombre d'éléments sera le point, le point, la longueur de l' instantané. Et le générateur d'objets aura disparu, textes et index. Maintenant, je vais créer une variable, un type float, et stocker cette valeur d'instantané dans une donnée de point d'instantané, puis l'index. Ce sera donc ce produit singulier. C'est ça. Et puis je vais le rendre, vais retourner une carte. Et à l'intérieur, j' aurai une propriété enfant et ensuite le budget de style liste. Donc dans ce titre, j'aurai un centre et ensuite l'enfant, qui nous montrera lequel nous montrera le nom du fruit, c' est-à-dire le nom du point alimentaire. est aussi simple que ça. Grâce aux objets, nous sommes maintenant en mesure de générer ou d'utiliser nos variables si facilement. Et puis dans le sous-titre, j'aimerais montrer toutes les valeurs nutritionnelles, c' est-à-dire les protéines, les glucides et les graisses. C'est tout simplement, j' aurai un widget de texte. Il écrira des taux élevés en carton. Et maintenant je vais concaténer cette valeur de fruit. Et puis un point, puis des nutritions, puis un point et voir. Maintenant, je peux simplement utiliser des carbures à partir ici simplement parce qu'il est enregistré dans un autre objet. Ou bien j'ai dû utiliser ces glucides clés et je vais certainement faire l'erreur ici. Je vais simplement le copier et le coller deux fois. Le deuxième sera la protéine. Ce sera simplement une protéine. Et le troisième sera les graisses. Et ce sera tout simplement gras. C'est ça. Maintenant, dans la ligne, je vais donner un alignement de l'axe principal de l' espace de points d'alignement principal existant uniformément, juste pour le rendre beau. Maintenant, pour le tester, nous devons aller dans notre fichier point principal. Et au lieu de ce fichier de connexion, nous devons écrire cet écran de fruits. C'est ça. Allons voir ça. J'ai redémarré mon application. Ok, l'écran est beau et toutes les données sont là. Pomme, abricots, bananes, et cette graisse protéique glucidique. Si vous le souhaitez, vous pouvez sortir cette commande de famille Janus, quel que soit le nombre de calories. Si vous le souhaitez, vous pouvez également les afficher. Je n'utilise pas la propriété de début et de fin du style de liste. Je veux juste te montrer comment c'est fait. Comment créer des modèles si facilement à l'aide d'outils en ligne. Et aussi, nous avons réussi consommer une nouvelle API qui est aussi fruitée. Et si vous le souhaitez, vous pouvez également créer un écran différent afin afficher un seul détail de fruit si vous le souhaitez, c'est à vous de décider. Mais j'espère que vous avez apprécié nos vidéos jusqu'ici. Ce modèle était très important car dans une application réelle, vous allez créer des modèles pour tout ce qui est des utilisateurs, des contextes ou toutes les données ou informations que vous avez dans votre vous allez créer des modèles pour cela. C'est donc tout pour cette session. Rendez-vous dans le prochain module. Merci.