Apprendre les API : créer une application de recherche avec JavaScript, TypeScript, React et Next. js en mode lumière et obscurité

1. Intro: Vous avez peut-être entendu parler des API, mais savez-vous comment les utiliser ? Aujourd'hui, nous allons passer en revue tout ce que vous devez savoir pour créer votre propre application Web à l'aide d'API gratuites. Bonjour, je m'appelle Zoé. Je suis un ingénieur logiciel et un ancien professeur qui adore enseigner aux autres comment démarrer avec le codage J'ai créé des tonnes de sites Web et applications Web en utilisant React CSS, HTML. Next S et plus encore. Aujourd'hui, nous utiliserons l'API gratuite de Rest Country pour créer cette application Web de recherche par pays. Ce projet nous permettra d' apprendre à utiliser next S et React, à interagir avec les API et à les intégrer dans nos projets. Et comment utiliser Javascript ou Typescript pour filtrer et renvoyer succinctement les données demandées en fonction de la requête d'un utilisateur Nous allons commencer par un aperçu de base de ce que sont les API et des raisons pour lesquelles nous les utilisons ensuite. Oui Ensuite, nous allons nous plonger directement dans notre tutoriel. Le didacticiel sera divisé en trois parties distinctes. Tout d'abord, nous allons styliser l'application Web, puis nous l' associerons à l'API. Enfin, nous allons affiner la logique des requêtes pour nous assurer que les utilisateurs obtiennent exactement ce qu'ils recherchent. Ce cours s'adresse à tous ceux qui souhaitent apprendre à utiliser une API dans une application Web. À la fin de ce cours, vous serez capable de tout faire vous-même. Commençons. 2. Projet de classe: Projet de classe. Le projet de cette classe consiste à créer une application Web de recherche par pays entièrement fonctionnelle à l' aide d'une API gratuite. Pour cela, vous devez avoir accès à un ordinateur et à un éditeur de code tel que Visual Studio Code. Vous devez également avoir une certaine compréhension du Javascript ou script de type ainsi que du HTML et du CSS. Pour lancer notre application, nous allons utiliser un framework appelé Next S, qui utilise React. Nous utiliserons également le matériau I pour certains éléments de style de base. Je vais laisser des liens vers tous les actifs et ressources vous aurez besoin dans l'onglet Projet et ressources juste en dessous. 3. API et bases de données: Apis et bases de données. Une API ou une interface de programmation d'applications est un ensemble de règles qui permettent aux développeurs frontaux de créer, lire, mettre à jour et supprimer des données sur le back-end Ces API sont créées par développeurs backend à l'aide de langages tels que Python, Ruby, Java Script, etc. Les bases de données, quant à elles, sont l'endroit où résident les données et sont accessibles via ces API. Selon le type de demande d'API envoyée depuis le front-end (création, lecture, mise à jour ou suppression), un ensemble de données différent sera renvoyé. Par exemple, si un nouvel utilisateur crée un compte en saisissant son adresse e-mail et son mot de passe. Une fois qu'ils auront cliqué sur Soumettre, ces informations seront envoyées à la base de données et un nouvel utilisateur sera créé. 4. Next.js: Next S. Au cours des années qui se sont écoulées depuis l'introduction de Reacts , de nombreux frameworks ont été construits et développés à partir de celui-ci. est un framework très populaire aujourd'hui . Next S fournit de nombreuses optimisations prêtes à l'emploi, telles que routage du rendu côté serveur et un référencement amélioré. En tant que tel, c'est l'un des favoris des développeurs front-end. Nous allons l'utiliser dans notre projet, alors allons-y et commençons. 5. Setup de projet: Commençons à travailler sur ce projet. L'application que nous cherchons à créer ressemble à ceci. Il s'agit d'une application de recherche de pays qui, lorsque vous tapez le nom d'un pays, vous pouvez réellement obtenir le résultat correspondant. Vous devriez également pouvoir simplement continuer et filtrer par région. Donc, quelque part en Afrique , dans les Amériques ou en Europe, etc. Et aussi, je dois dire que vous pouvez également le faire passer en mode sombre. Vous pouvez activer le mode sombre ou le mode clair. Et donc, oui, nous allons développer cette application en utilisant cette API gratuite de Country's Rest fournie ici. Comme vous pouvez le constater, nous avons une API Country Rest qui nous permet d' accéder à ce point de terminaison et de recevoir ensuite un tas de détails différents. Nous pouvons donc obtenir le nom, les drapeaux. Il existe de nombreuses informations différentes. Je vais donc laisser un lien vers ce site Web dans l'onglet Projets et ressources ci-dessous, afin que vous puissiez le suivre et l'utiliser dans votre projet. De plus, l'inspiration pour ce projet et sa conception proviennent de ce site Web appelé Front End Mentor. C'est là que je travaille sur beaucoup de mes projets et que je peux créer des projets, si vous voulez y jeter un coup d'œil, ou s'il s'agit d'un projet totalement gratuit, mais vous pouvez récupérer le design ici et nous allons travailler à partir de cette image pour développer notre projet. Oui, allons-y et commençons. Je vais commencer, comme je l'ai mentionné, nous allons utiliser l' interface utilisateur et le script de saisie du prochain matériel JS . J'ai en fait créé un modèle que nous allons utiliser pour travailler réellement sur notre projet. Ici, je vais commencer à créer un référentiel en utilisant ce modèle. Génial. Le dépôt est maintenant créé. En fait, nous pouvons l' utiliser localement pour développer notre application de recherche par pays. Et je vais également laisser un lien vers le modèle et le référentiel que j' utilise pour cela, que vous pouvez utiliser comme point de départ. Et vous pouvez également vérifier votre travail au fur et à mesure si vous voulez voir à quoi ressemblera le projet final . Très bien, je vais donc continuer et cloner ça. Génial. Ensuite, je vais juste aller de l'avant et l'ouvrir. Parfait. Donc, la prochaine chose que nous devons faire, comme chaque fois que nous clonons un projet, c'est de l'installer. Faisons donc une installation rapide de NPM. C'est bon, cool. Il est donc installé maintenant. Nous devrions simplement être capables de faire MPM run dev. Génial. Et ça commence chez 3 000 hôtes locaux et super, notre application est opérationnelle, nous sommes donc prêts à partir. Allons-y et commençons. 6. Mettre en forme l'application: Dans cette section, nous allons nous concentrer principalement sur le style. Donc, si la logique vous intéresse davantage, vous pouvez passer à la leçon suivante. Bien, la première chose que je veux faire comme d'habitude est de créer un nouveau dossier pour mes composants. Ensuite, je voudrais continuer et effacer cette prochaine page GS. Je vais donc simplement tout effacer dans la section principale , sauf cela. Je vais également supprimer les styles sur le di ici, cette recherche par pays. Cela devrait être une bonne chose pour le moment lorsque nous examinons cet exemple de projet. Hein ? Nous avons plusieurs sections différentes lesquelles nous travaillons, n'est-ce pas ? Il y a comme cette section d' en-tête, cette section de saisie, il y a un filtre de région ici, une sélection, je vois cela comme quelques sections distinctes. Il y a l'en-tête , puis il y a cette pièce plus grande, qui représente le pays lui-même. Ensuite, il y a l'affichage de toutes ces différentes cartes. Décomposons-le en morceaux. Ce que nous allons faire ici, c'est d'abord créer un conteneur pour le tout. Je vais l'appeler le conteneur de recherche par pays. Cela va juste héberger tout ce sur quoi nous travaillons. Cool. Et nous allons utiliser Emmett, puis nous allons simplement importer ici. D'accord ? Parfait. Si nous regardons cela au recto, nous voyons que notre conteneur de recherche par pays s'y trouve. Parfait. Cela va contenir deux choses différentes. Créons un autre composant appelé header. Créons un autre composant appelé, euh, nous l'appellerons Country Search. OK, et nous allons les importer tous les deux dans le conteneur Country Search. Je vais juste remplacer ça une boîte parce que c'est comme le par une boîte parce que c'est comme le matériau que vous faites. Et cela nous permettrait simplement d'utiliser différents accessoires en utilisant X, X, si vous n'en avez jamais entendu parler auparavant L'accessoire SX vous permet essentiellement d'accéder aux mêmes accessoires que vous pourriez ajouter comme un accessoire de style sur un Mais cela vous permet également de faire des choses spéciales, comme requêtes multimédia et des choses de ce genre , que vous ne pouvez pas faire avec l'accessoire de style Je préfère utiliser les éléments de mes composants dans la possible lorsqu' ils sont accessibles à tous Vous voyez, nous avons notre recherche de chefs de pays. Très bien, en regardant le dessin ici, vous remarquerez qu' il y a un peu de marge ou de rembourrage de chaque côté, puis c'est égal sur ces deux composants, puis nous avons la plus grande pièce ici Très bien, je veux aborder cette question en plusieurs étapes. La première chose que je veux faire, comme je l'ai mentionné, c'est de styliser le projet lui-même. Travaillons donc sur le style, puis partons de là pour avoir envie de styliser de manière à ce qu' ils puissent tous deux avoir un peu de rembourrage à gauche et à droite Passons d'abord à l'en-tête. La tête se transforme également en boîte. L'en-tête comporte deux éléments principaux. Il contient la guerre dans le monde , puis le bouton du mode sombre. Nous allons donc commencer par utiliser un élément de typographie, disons, que nous allons utiliser, nous allons dire dans le texte que nous sommes dans le monde, il sera de la variante H un, parce que chaque page doit avoir un H Et puis ce ne sera probablement pas le bon format, mais nous pouvons y faire face avec x, non ? Oui, c'est un peu trop grand. Passons donc à SX , puis nous le réglerons pour qu'il soit peut-être une taille de police d'un Ram, peut-être deux Ram 1.5 Ensuite, faisons attendre 700. C'est bon, cool. C'est le premier élément. Et puis le second est ce bouton. Et le bouton indique le mode sombre sous forme de. Oui, il y a aussi un bouton. Désolée. Il existe également une icône qui ressemble à une demi-lune ou croissant de lune. Cherchons des lunes. Et celui-ci semble assez proche, donc nous allons l' utiliser dans notre bouton, donc je vais utiliser. Cool. Et nous avons notre petite lune juste là. C'est bon. Génial. La prochaine chose que nous allons vouloir faire ici, c'est de le mettre dans une rangée. Je vais donc utiliser les accessoires SS et je vais simplement changer l'affichage pour qu'il soit flexible et enregistrer cela Je vais justifier l'espace de contenu entre les deux, je vais aligner les éléments au centre. Génial. Ouais. Très bien, donc pour l'en-tête, je sais aussi que je veux des rembourrages. Je vais faire le rembourrage du haut et du bas, il y aura un M et deux béliers à gauche et à droite Ça devrait être une bonne chose pour le moment. Que devons-nous faire d'autre ? Nous voulons nous assurer que, oh oui, la couleur est en fait légèrement différente, si vous le remarquez. Je veux définir la couleur d' arrière-plan globale de l' application comme ça, gris clair, et ensuite ce sera notre blanc. Je vais prendre ça, je vais juste utiliser ce sélecteur de couleur Je vais juste prendre cette couleur ici et génial, ce sera la couleur de l'arrière-plan réel de l'ensemble de l'application. Ce que je veux faire ici, c'est penser que nous allons opter pour un index. Nous allons en fait définir la couleur d'arrière-plan de tout cela comme étant cette couleur. Nous allons donc passer à la couleur d' arrière-plan, la régler pour qu'elle soit géniale. Et vous pouvez voir que cela a légèrement changé ici. C'est un peu difficile à voir simplement parce que ce n'est qu'une petite section, mais cela deviendra un peu plus évident au fur et à mesure que nous travaillerons un peu plus sur la pomme. L'autre chose que je veux faire ici est définir la taille de cet élément, car il s'agit d'une sorte de document d'une page. Je veux que la hauteur minimale de l'élément soit de 100 nouvelles hauteurs. Cela représentera 100 % de la hauteur de la vue que nous allons prendre. Et puis je veux juste que la hauteur normale ou la hauteur maximale soit probablement adaptée au contenu. Et cela sera plus pertinent une fois que nous aurons commencé à obtenir tout un tas de résultats différents. Très bien, je vais supprimer ces styles supplémentaires ici. C'est bon, cool. Donc, la prochaine chose que nous allons vouloir faire maintenant est de changer la couleur d'arrière-plan de l'en-tête. Donc, l'en-tête, maintenant nous allons revenir ici et définir la couleur de fond comme étant juste blanche, cool et vous pouvez à peine voir, mais il y a une légère différence ici. Je vais faire encore une chose pour le distinguer. Vous voyez comment il y a cette petite ombre en forme de boîte ici. Nous allons juste ajouter une ombre au bas de cette pièce, juste ici. Je vais donc le copier puis l'ajouter à notre tête. Et nous allons le modifier un peu. Très bien, nous allons juste le décaler, peut-être deux pixels dans chaque direction. Nous allons en faire un gris clair. Sauvegardez ça. Comme vous pouvez le constater, nous avons juste une distinction très basique entre les deux. C'est suffisant pour le moment. Vous savez, je pense que nous pouvons également faire des choses comme changer la couleur du bouton , etc. Ce n'est pas forcément la chose la plus importante à faire. Je pense que la prochaine chose la plus importante à faire serait de réduire les ventes pour le reste. Très bien, la prochaine chose que nous allons faire ici est travailler sur notre conteneur de recherche par pays. Donc, notre recherche de pays, désolée. Donc, dans la recherche par pays, il va y avoir tout un tas d' éléments différents, enfin trois. Nous allons donc passer à une boîte. Nous allons d'abord avoir une entrée, nous allons avoir la sélection. Ensuite, nous allons exposer toutes les cartes, le matériel, je crois. Il possède un composant de champ de saisie de texte. Et je pense que nous allons vouloir utiliser comme plan pour cela. Je vais donc simplement récupérer cette ligne de code ici, la recopier dans notre projet et l'ajouter comme premier élément. Nous allons donc avoir un champ de texte que nous importons à partir du matériau I. Et puis ils auront également un composant Select Select. Et nous allons juste prendre tout cela ici et nous en servir. Parfait. Et il suffit d' ajouter toutes ces importations manquantes pour éviter toute erreur. Je l'utilise juste comme modèle pour le moment. Nous allons aller de l'avant et le modifier en fonction de nos objectifs. C'est bon, cool. Nous avons donc notre saisie de texte et nous avons notre H ou notre sélection déroulante. Je vais faire une dernière chose, et je vais les emballer dans une boîte parce que nos cartes seront également affichées sur cette page. Nous allons donc enregistrer cela. Ensuite, je vais changer l'affichage pour qu'il soit Flex. Sauvegardez ça. Génial. Cool. Maintenant, ils sont sur une seule ligne, mais l' espacement n'est pas correct C'est vraiment correct. À l'heure actuelle, le contrôle du formulaire indique toute la largeur. Ce n'est pas ce que nous voulons vraiment. Nous voulons que ce soit avec cinq fois, dix Ram, parce que ce seront des mots, mais nous n'avons pas vraiment besoin que ce soit aussi large Ensuite, nous allons également vouloir qu'il y ait de l'espace entre eux y ait de l'espace entre eux. Nous allons donc faire la même chose. Prêt à partir ? Justifiez le contenu. Nous allons le régler à un intervalle de six fois. Cool. Génial. Comme vous le remarquerez, il nous manque toujours ce rembourrage à l'extérieur Nous allons donc simplement ajouter un autre S x pro à la boîte extérieure et y ajouter du rembourrage Nous allons donc juste faire du rembourrage et nous allons juste utiliser deux Ram tout autour et dire ça, génial, cool C'est un peu plus conforme. Maintenant, la dernière chose que je veux faire avec la saisie de texte est de l'allonger un peu, car vous pouvez voir qu'elle est en fait un peu plus longue. Et je vais juste le faire, nous allons régler la largeur à quoi, 20 RAM ? Disons en fait qu' il s'agit d'une largeur de vue de 20 dont le poids change en fonction de la taille réelle de la largeur d'affichage à l'écran, par opposition à M. Cela représentera toujours environ 30 % de la largeur de la vue. C'est un peu plus réactif. Je vais faire la même chose avec le select ici. Il faudrait peut-être changer cela pour 2015. Ou 20. Peut-être 15. Oui, ça a l'air correct. C'est bon, cool. Et puis celui-ci peut être un peu plus long, peut-être 40. Cool. Ça devrait être une bonne chose. Ensuite, une autre chose que j'ai remarquée, c'est que la couleur de fond est également blanche pendant la baignade, je l'ai réglée sur blanc. Dis ça. D'accord, génial, cool. Nous avons donc une saisie de texte vraiment basique, nous avons notre sélection. Ensuite, nous allons créer notre carte déroulante juste pour le personnaliser un peu plus Ici, nous remarquerons que le texte initial est « search for country point point point ». Nous voulons donc changer cela. Au lieu que ce soit un profane, nous allons dire « recherchez un pays » et dites qu'ici , il est question d'âge. Nous voulons vraiment que cela soit filtré par région. Nous allons modifier cela pour filtrer par région. C'est ce que nous allons dire. Allons-y un peu plus, faisons en sorte que ces 20 soient parfaits. Hum, et je suppose que le fond devrait également être blanc Dis ça. Génial. La prochaine étape que nous voulons faire est de modifier les différentes options réelles ici, les éléments de menu. Ce que je vais faire, c'est clore tout ça et je vais commencer par un. C'est l'Afrique, l'Amérique. Allons-y et tapons-les. Passons donc à l'Afrique. Afrique, Afrique. Ensuite, je vais juste le copier-coller quelques fois en Amérique. En fait, je vais en faire une au-dessus et ce sera tout pour nous. Je vais en ajouter une autre. Vous verrez pourquoi je l' ajouterai plus tard, mais je vais juste en créer un. C'est tout C'est bon, America. Une chose intéressante à propos de cette API, c'est qu'il ne s'agit pas en fait de l'Amérique. Il cherche, ce sont les Amériques, comme l' Amérique du Nord, l' Amérique du Sud, les Amériques. Vous souhaitez modifier la valeur de cet élément de menu en Amériques, même si l' écran indique Amérique. En fait, nous pouvons passer aux Amériques juste pour être sémantiquement corrects. Très bien, en bas de la liste, nous allons changer celui-ci en Asie et le changer pour vous. Et ce que je fais ici, juste au cas où vous ne le sauriez pas, vous ne connaissez pas ce genre d'astuce au clavier, j'appuie sur la commande D pour sélectionner le mot sur lequel je travaille. Et puis la version suivante de ce mot, le double suivant de ce mot. Je veux donc appuyer sur la commande D jusqu'à ce que je sélectionne le nombre de versions de ce mot qui se trouvent devant moi. Nous allons donc faire l'Europe, puis nous allons faire Oceana C'est bon. Génial. Nous avons donc notre filtre par région. Cool. La prochaine chose que nous allons vouloir faire, créer nos cartes pour notre pays. Ce seront donc des cartes qui auront quelques propriétés, quelques aspects différents. Nous allons prendre l'image, nous allons obtenir le nom, la population, la région et la capitale. OK, cool. Je vais donc créer un autre composant pour cette carte call it. Dites-le maintenant, je veux juste voir à quoi cela ressemble avec des données fictives. Je vais donc retourner à ma recherche par pays et créer quelque chose appelé, ou simplement un tableau de chaînes pour des données fictives. Ne faisons donc aucune donnée. En fait, faisons simplement un tableau d'objets. Passons simplement à un éventail de pays. Passons donc à l'Allemagne. Faisons United. États d'Amérique, et nous allons faire le Brésil comme dans l'exemple. C'est bon, cool. Nous allons enregistrer cela alors. Maintenant, ce que je veux faire, comme vous pouvez le voir, nous avons notre boîte avec notre contrôle de formulaire, notre saisie et notre composant de sélection. Nous voulons sortir de cette boîte, puis nous voulons simplement parcourir cette boucle. Nous allons le faire ici, nous allons utiliser des données fictives. Ensuite, je voudrais cartographier ces données fictives pour chaque pays. Je souhaite retourner le matériel d'une carte carte. Sauvegardez ça. Ah oui. Chaque fois que vous utilisez une carte, vous avez besoin d'une clé. Je vais donc simplement définir la clé comme étant le nom du pays pour le moment. Nous allons enregistrer cela. C'est bon, cool. Donc, si je passe à notre carte, nous devrions simplement, oui, avoir trois pays dans nos données fictives. C'est essentiellement la boucle du nombre de fois que nous avons le pays. Nous avons donc trois cartes. Génial. Allons-y et embellissons un peu cette carte Il possède en fait un composant appelé les différentes cartes, mais nous voulons en utiliser un qui contient une image. Hum, peut-être la carte multimédia. Je pense que c'est peut-être la meilleure solution pour nous. Je vais donc continuer et copier ces informations ici. Et nous allons simplement créer la carte, enregistrer et ajouter toutes ces importations manquantes. Ah oui, je l'ai appelée carte. Très bien, alors importons parce que je nomme le composant lui-même, carte. Il y a un conflit parce que nous importons des cartes pour le matériau Y. J'ai créé ce que l'on appelle des cartes Je vais donc donner un nom à leur carte de carte juste qu'elle soit différente et qu'il n' y ait pas de conflit. Très bien, je vais retirer quelques-unes de ces pièces. Tout comme les cartes, nous n'en avons pas besoin. Nous cherchons simplement à afficher des informations. Et puis, oui, ça devrait être plutôt décent. Hauteur de l'image et largeur maximale. Je veux que la largeur maximale soit peut-être de 20 largeur de vue, peut-être que nous allons simplement la définir comme la largeur définitive, car nous sommes censés pouvoir en adapter quatre sur 20 de largeur. Ensuite, je vais vraiment retourner ici et je devrais l'emballer dans une boîte. Oui, laisse-moi l'emballer dans une boîte. Ensuite, je vais en faire une boîte flexible. Je dois dire que c'est génial, cool. Maintenant, ils commencent à s'étendre. Ajoutons un autre pays. Allons en Jamaïque. Juste pour avoir les quatre en travers, je peux me faire une idée de ce à quoi cela ressemble. Ensuite, je veux justifier le contenu. Je crois que je veux espacer uniformément . Il n'y a pas d'espace autour. Espace. Espace entre. Je veux à nouveau un espace entre les deux. Très bien, cool et génial. Donc oui, nous avons nos quatre cartes juste là. Ils parlent tous de lézard en ce moment parce que c'est ce que disent les données fictives. Mais nous allons travailler là-dessus. Très bien, je veux juste retoucher ce petit morceau ici. Il n'y a pas assez d'espace entre la carte et l'entrée réelle Je vais donc ajouter de la marge dans cette case supérieure, donc je vais aller au bas de la marge. Parfait. Ensuite, je vais juste retoucher un peu la carte. Je vais donc régler la hauteur de la carte comme étant, disons, dix hauteurs de vue trop petites. Peut-être 15, peut-être dix, c'est bien. Ensuite, nous allons finir par transmettre certaines propriétés de l'API elle-même une fois que nous les aurons obtenues. Je pense donc que nous sommes plutôt corrects en ce qui concerne le style général. Il y a encore une chose que je veux faire, juste pour nous permettre de faire et de travailler avec le mode sombre. 7. Mode sombre et Zustand: La dernière chose que nous allons vouloir faire pour le style est travailler sur notre mode sombre. En fait, j'ai cette fonctionnalité vraiment géniale qui vous fournit un thème par défaut en mode clair Donc, ce que je vais faire, c'est essayer de cibler ce thème du mode clair et faire passer du mode clair mode sombre en fonction du mode dans lequel nous voulons être. Nous allons donc faire de la lumière, nous allons en tirer parti pour que notre application puisse y accéder. Il vit dans plusieurs endroits différents. Si nous examinons notre application App Score, vous verrez qu' il y a quelque chose ici qui fournit le thème, un fournisseur de thèmes, et qui fournit ce l'on appelle le thème léger. Donc, le thème de la lumière, le thème de la lumière a été créé à l'aide de la fonction de création de thème ici. Et nous allons simplement vérifier que cela trouve dans les styles du dossier du thème, dans un fichier appelé light theme options. Donc, si nous le regardons ici, nous pouvons voir qu'il s'agit d'un fichier assez basique et qu'il devrait être assez facile d'en créer une version en mode sombre. Donc, ce que je vais faire, c'est simplement copier tout cela et créer un nouveau fichier, l'appeler Dark Theme Options et le coller. Mais au lieu de l'endroit où il est écrit clair, je vais simplement le changer en noir. Et je suis presque sûr que ça va marcher. Nous allons juste alterner entre le noir et le clair. Génial C'est donc ce que nous avons prévu. La prochaine chose que je vais vouloir faire maintenant, c'est que je dois essentiellement l'insérer au bon moment. Donc, si je passe à l'application, en gros, ce que je veux faire ici et ce ne sera pas seulement ici dans cette partie de l'application, tout sera terminé. Donc, ce que je pense, c'est que je veux installer Zustand afin de gérer ce simple état global Nous pourrions en quelque sorte soutenir Joe pendant tout le trajet, mais je pense que ça va être un peu plus propre Donc, si vous ne connaissez pas Zustan, Zustand est comme une alternative à Redux mais beaucoup Il y a beaucoup moins de passe-partout pour commencer. Nous cherchons donc Zustand, c'est essentiellement un moyen de gérer l'État Oui, c'est le document, je vais juste l'installer très rapidement. Ensuite, je vais créer une boutique. Je vais créer un nouveau dossier appelé store. Je vais y créer un fichier appelé index TS. Ce que je veux faire, c'est littéralement créer une boutique à partir de Zand. Je vais copier leur mise en forme ici. Hum, Oh, et ça se plaint du type. Nous allons régler ce problème. Oui, je veux essentiellement créer ce hook appelé store, qui va créer un magasin dans lequel nous pourrons simplement vivre dans notre État mondial. Donc j'ai vraiment besoin de deux accessoires le mode sombre et ça va être faux au départ Ensuite, je veux passer en mode sombre. Ce que cela va faire, c'est supprimer ça. C'est le mode sombre, il va prendre cet état et ensuite il va juste le régler à l'opposé de ce qu'il est. Disons que là bas, ce sera l'état inverse, c'est le mode sombre. Lorsque j'activerai le mode sombre, quel que soit le mode sombre, ce sera le contraire Une dernière chose que nous allons faire ici est ajouter les types que nous allons créer. C'est le magasin qui passe en mode sombre, ça va être un lingot Ensuite, nous allons passer en mode sombre. Ce sera juste une fonction simple qui renvoie la valeur void. Ensuite, nous allons définir le magasin, le magasin, l'état. Nous allons juste l'appeler boutique. Dites ça et cool, maintenant nous avons corrigé notre erreur de type. Nous pouvons désormais accéder à cette boutique depuis n'importe où dans notre projet. Donc, si je reviens aux applications X, je peux maintenant m'y connecter et accéder à la valeur de Stark Boat. Donc, la façon dont nous allons procéder est de copier cette fonctionnalité ici. Nous allons entrer dans notre composant ici, l'agrandir un peu. Et je vais passer en mode constant en mode sombre, tu vas aller au magasin. Nous allons l'importer . Oh, tu sais quoi, j'ai oublié de l'exporter. Assurez-vous d'exporter le magasin , sinon vous importerez le mauvais magasin. Nous allons donc exporter le magasin et l'importer depuis le magasin. Et ils vont passer en mode sombre. C'est tout ce que vous avez à faire pour configurer l'État. C'est super direct, super simple. Si vous n'avez pas vu mon autre vidéo sur la façon de déclarer, nous faisons exactement la même chose. C'est dans le cadre du projet « to do at ». C'est vraiment très simple, très simple à utiliser. Mais je recommande vivement de l'utiliser parce que, je veux dire, regardez avec quelle rapidité nous venons de configurer l'état. Donc, selon qu'il s'agit ou non du mode sombre, je souhaite afficher le thème clair ou le thème sombre. Je vais donc faire une petite vérification ici. Donc, s'il s'agit du mode sombre, je souhaite utiliser le thème sombre. Et permettez-moi de l'importer et de créer le thème sombre. Et si vous l'importez, nous allons passer au thème sombre. Et si ce n'est pas le cas, nous allons vouloir créer thème léger et dire que c'est génial. Très bien, donc la prochaine chose que nous allons faire est de l'activer. Parce que pour le moment, il ne fait rien. Hein ? Rien ne déclenche cette bascule. Donc, si je reviens à l'en-tête, je veux aller sur le bouton ici. Et nous voulons faire de même. Nous voulons, nous voulons accéder à la bascule, qui était dans ce format ici Et nous allons passer au mode sombre. Et il va faire la même chose. Nous allons importer la boutique depuis la boutique et passer en mode sombre. Nous allons enregistrer cela. Génial C'est reconnaître que c'est une fonction. Et puis en cliquant ici, nous voulons littéralement passer en mode sombre. Si nous le connectons correctement, lorsque j'appuie sur le bouton du mode sombre, certains éléments devraient simplement devenir sombres et d'autres devraient rester si nous cliquons dessus, génial. Ce n'est donc pas parfait car nous avons fait beaucoup de personnalisations nous-mêmes, comme pour les arrière-plans ici Mais c'est une très bonne première étape, nous savons donc que cela fonctionne. Il ne nous reste plus qu'à raccorder les autres pièces. Vous verrez donc que cet arrière-plan ne change pas. Cet arrière-plan ne change pas, cet arrière-plan ne change pas et cet arrière-plan ne change pas. Nous avons donc quelques antécédents à régler. Donc, si vous revenez à, ou si nous pouvons vraiment commencer ici, donc si nous prenons le mode sombre le même magasin qui est en mode sombre et que nous l'enregistrons. Alors si je fais juste une autre vérification dans cette ligne. Donc, si je passe en mode sombre, et si c'est le cas, je veux que ce soit le cas. Revenons à notre design. Je veux que ce soit de cette couleur. Alors laisse-moi m'en occuper très vite. C'est pour l'en-tête. En fait, c'est cette couleur que je veux. Je vais m'en emparer. S'il s'agit du mode sombre, je veux que la couleur de fond soit la même. Si ce n'est pas le cas, je veux que ce soit ça. Et enregistrez-le si nous l'activons. Génial Fonctionne vraiment bien. Cool. La prochaine chose que je veux faire, c'est changer cela pour le pays. Effectuez une recherche dans l'ensemble de l'application. Cela figurera donc ici dans notre index. Nous allons faire la même chose ici. Nous pouvons littéralement copier le mode sombre ici. Collez ça dedans. Et puis importez le magasin, enregistrez-le. Ensuite, nous allons le changer pour cette couleur ici. Prends ça là, ça. Ensuite, nous allons passer en mode sombre et poser la question. Et nous allons le faire. Ce sera le cas, si ce n'est pas le cas, nous allons enregistrer cela alors. Génial Donc, si nous l'avons bien fait, génial. Cela change. Très bien, la dernière chose que nous devons changer , ce sont ces Toggle, je pense qu'elles sont les mêmes que cette couleur ici Cela fera partie de notre recherche de pays. Nous pouvons donc effectuer la même vérification dans Country Search. Sauvegardez ça. Importez ça. Ah oui. l'endroit où il s'agit de FFF Nags, remplacez-les par cette couleur Voici le mode sombre et pareil ici, le mode sombre. Et il existe certainement une façon plus succincte de le faire. C'est en quelque sorte le faire rapidement, sauf ça. Très bien, génial. Donc, si je change le mode sombre maintenant, cela fonctionne très bien. Très bien, nous avons en quelque sorte géré et trié le mode sombre afin de pouvoir passer outre nos styles, comme les petites choses, les petites modifications à faire, les petites retouches à faire en cours de route, surtout une fois que nous avons importé nos images et autres choses de ce genre Mais c'est vraiment un bon début pour le moment. 8. Utiliser une API: Très bien, donc si nous examinons les informations de notre API ici, notre point de terminaison, OK. pouvons essentiellement récupérer tous les pays à partir de ce seul lien. Maintenant, nous allons probablement finir par le filtrer, mais c' est un bon point de départ. Nous allons vouloir le récupérer. Maintenant, nous devons réfléchir à la hiérarchie ici, non ? Nous avons notre contribution, nous avons notre filtre et nous avons notre voiture. Tout est dans le même composant pour le moment. Et cela a été fait intentionnellement pour nous faciliter un peu les choses. Ce que nous allons faire ici se trouve en fait dans le même composant que celui où nous allons effectuer notre extraction. Maintenant, dans une configuration plus propre, nous pouvons commencer à séparer ces éléments, mais en tant que MVP, nous pouvons simplement commencer par les assembler et obtenir une sorte de version fonctionnelle de base faire, nous allons en fait faire appel à un effet d'utilisation. Nous allons faire une extraction à partir de cette API et cela devrait être entre guillemets. Qu'est-ce que Fetch nous permet de faire ? Si nous consultons la documentation ici, fetch nous permet essentiellement de recevoir une réponse En gros, nous envoyons une demande. C'est une méthode que nous utilisons pour récupérer une ressource quel que soit ce point de terminaison, puis nous pouvons transformer ces données en quelque chose d'utilisable. Ce que nous allons faire ici, c' est le récupérer, puis nous allons y enchaîner un point Nous allons donc dire « Fetch ». Ensuite, nous allons récupérer la réponse car nous voulons nous assurer ne pas toujours savoir si notre réponse est au format Json ou si elle est lisible. Nous allons le changer en Json. Nous allons faire une réponse pour prendre cette réponse et nous allons la transformer en Jon. Très bien, nous avons maintenant une réponse de Jason. Génial La dernière chose que nous allons vouloir faire, c'est de créer quelque chose pour l'enregistrer. Nous allons créer un objet de données ou une variable de données et définir les données. Lorsque cela sera fait, nous utiliserons l'état. Les données ne seront qu'un objet vide. Nous devons maintenant importer l'état, pour que cela fonctionne. Oui, c'est ce que nous avons fait. Alors ils vont en faire une autre, en enfilant, en prenant des données, puis nous allons définir les données comme des données. Nous allons le sauvegarder. Nous devrions être prêts à partir. Une chose que je veux faire maintenant, c'est voir si cela fonctionne réellement. Je veux me consoler et voir si nous obtenons nos résultats. La console est là. Génial Vous verrez que nous avons 250 résultats ici, soit le nombre de pays. Et je veux juste, pour que nous ne créions pas infiloopl. laissez-moi actualiser la page qui Très bien, et nous allons juste passer un tableau vide ici pour arrêter la boucle infinie. Donc, si nous actualisons simplement. Génial Nous avons donc obtenu des données parfaites. Donc, si nous examinons une donnée individuelle ici, si nous examinons un pays en particulier, je vais décrire la première des Nous verrons donc que nous avons beaucoup d'informations ici. Très bien, voici Turks et Kakos. Vous verrez qu'il y a une tonne, une tonne d'informations. Maintenant, nous ne voulons pas trop récupérer les données car les requêtes aller-retour seront très coûteuses Donc, comme le dit l'API ici, nous pouvons simplement récupérer les champs dont nous avons besoin Nous pouvons donc faire tous les champs de point d' interrogation et ensuite égaler le champ dont nous avons besoin, n'est-ce pas ? Nous savons donc que nous avons probablement besoin du drapeau, la population, de la région, de la capitale. Et nous avons besoin du nom suivant le format de cette structure de données ici. Nous pouvons effectivement modifier notre requête, notre fetch à la ligne 25 ici Nous allons donc tout faire, puis nous allons mettre les champs sur un pied d'égalité, donc nous allons simplement nous assurer de faire le bon choix. Oui, les champs sont égaux, puis nous les séparerons simplement par des virgules C'est bon, cool. Nous allons donc faire en sorte que les champs soient égaux au nom. Nous avons besoin de drapeaux, de capitaux , de population et régions. Et nous allons enregistrer cela. Et je pense que c'est tout ce dont nous avons besoin. Donc, si nous actualisons, nous devrions tout de même obtenir 250 résultats. Trouvez tous les pays, mais si vous voyez, les données le sont déjà beaucoup moins. Nous obtenons le capital, les drapeaux et les formulaires PNG et SVG Nous obtenons le nom, la population et la région. Génial Nous recevons donc déjà beaucoup moins de données, ce qui va grandement faciliter nos requêtes . Parfait Donc, la prochaine chose que nous allons vouloir faire maintenant , c'est d'y jeter un œil de plus. Vous remarquerez en fait que les données sont dans une forme très intéressante. Le capital se trouve en fait dans un tableau. Nous voulons donc essentiellement transmettre ces données à nos cartes, n'est-ce pas ? Nous voulons simplement que cela soit inscrit directement dans nos cartes. Nous allons vouloir prendre en compte toutes ces informations. Oui, faisons-le comme ça. Nous allons passer, puis nous allons passer le drapeau. Et ce sera un drapeau, oups, un pays. Drapeau. Ensuite, nous allons passer à la population, et il ne s'agira que de la population du pays. Ensuite, nous allons passer dans la région. Et ce sera la région du pays, puis ce sera le site country name.com D'accord, alors que fais-je ici ? C'est vrai, je suis en train de créer toutes ces erreurs. Donc, ces données, qui sont en fait, nous allons utiliser nos données réelles dans une seconde, seront cartographiées pour chaque pays. Donc, pour chaque pays que nous voulons saisir, et je vais le changer en fait, le nom que nous voulons saisir du pays. Ensuite, nous voulons entrer dans le nom qui nous est fourni. Et nous voulons prendre le nom commun parce que c'est le nom commun que nous allons choisir. Vous pouvez également utiliser le nom officiel, mais il arrive parfois que le nom officiel ne soit pas celui que votre utilisateur recherche. J'ai donc trouvé qu'il était un peu préférable d'utiliser le nom commun basé sur l'API. Alors nous voulons récupérer le drapeau, non ? Le drapeau est l'image réelle, l'emplacement de l'image qu' ils ont téléchargée sur un CDN. Je vais juste opter pour le PNG pour le moment. Nous pourrions modifier le SVG si nous le voulions. C'est à vous de décider, mais nous allons passer au drapeau et ce sera notre drapeau Nous voulons également attirer la population n'est en fait pas imbriquée. C'est comme si c'était juste là, sous forme de chiffre. Nous pouvons donc simplement indiquer la population du pays et la saisir. Nous allons nous emparer de la région. C'est la même chose qu'une simple ficelle. Nous allons donc nous emparer de cette région. Et puis la clé sera simplement le nom de la clé qui sera le nom du pays. Country.Name.com car chaque pays doit avoir un Awesome.com. Génial Donc, ce que nous allons faire maintenant c'est aller de l'avant et nous allons les transmettre à notre carte et les configurer de manière à ce qu'elle puisse prendre en compte toutes ces données. Nous allons donc créer une interface ici. C'est juste pour que nous puissions définir notre accessoire, nous avons le nom qui va être une chaîne Nous avons la région, qui va également être une chaîne. Nous avons la population, qui va également être difficile. Nous avons le drapeau, qui sera une ficelle. Oh, tu sais quoi, en fait, nous avons oublié la capitale. Nous avons également besoin du Capitole. Et celle-ci est intéressante. Ce sera donc en fait le support zéro du Country Capitol. Ce sera la première chaîne de ce tableau. Le premier objet de ce tableau, qui est une chaîne, sera le Capitole. Ce sera aussi une chaîne. Enregistrez le drapeau de population de cette région. Je pense que j'ai tout. C'est bon. Ensuite, je vais le transmettre ici, alors nommez la région, la population, le drapeau, la capitale. Et je vais passer des accessoires. Je vais taper les accessoires et les enregistrer. C'est bon, cool. Cela fonctionne donc. Ensuite, je vais probablement simplement vouloir l'échanger pour utiliser des données, car cela me donne beaucoup d'erreurs. Données. Oh, et tu sais quoi, ça me donne une erreur parce que ce n'est pas du type tableau. Il doit donc s' agir d'un ensemble d'objets. Donc, pour être un tableau d'objets, cela m'a probablement aussi donné des erreurs parce que je les ai définis, j'en ai essentiellement initialisé un type Je pourrais simplement créer un point commun, comme un type de pays. Je n'ai pas besoin de le passer entre les deux. Si je crée un autre dossier, je crée des types, je passe à l'indexeur de fichiers Ensuite, chaque pays aura un nom sous forme de chaîne. Le nom va être, le nom est une propriété commune qui va être la chaîne. Ensuite, nous allons avoir un drapeau qui aura une chaîne de propriétés PNG. Ensuite, nous aurons une population qui sera un chiffre. Et ils auront une région qui sera une chaîne. Et nous allons avoir un majuscule, qui sera un tableau de chaînes. Bien, si je peux importer, si j'exporte le type de pays, voyons si cela fonctionne et je l'importe. À importer ? Non, non, il veut toujours une sorte de type basique. Très bien, alors oh, peut-être que ça marche vraiment. OK, cool. Nous allons donc simplement créer l'objet ici et les initialiser Notre nom va être une chaîne de caractères. Le nom va être commun, avoir une propriété commune qui sera de type chaîne. En gros, ce que cela recherche est comme une valeur initiale avant que l'API ne soit récupérée. Ce que nous allons faire, c'est le lui donner. Il veut savoir que okay flags PNG n'a encore rien renvoyé. Que voulons-nous que ce soit jusqu'à ce que nous obtenions une réponse ? Nous allons donc taper des drapeaux et, comme nous le savons grâce à notre API, nous pouvons même simplement regarder notre réponse initiale. En fait, je ne pense pas l'avoir compris, mais nous savons que Flags possède une propriété PNG et nous allons simplement l'initialiser comme une chaîne vide pour le moment Ensuite, nous allons simplement suivre la ligne et faire la même chose. Nous allons donc passer au capital. Le capital va être un ensemble. Et ce sera un tableau vide. Ou un tableau avec une chaîne pour le moment peut lire des majuscules. En fait, peut-être un pays. Permettez-moi de supprimer ce type. OK, allons-y. Faire mieux. Oh, parce que je l'ai mal orthographié. Capital, dis-le. Et la population, le dénombrement de la population. Oh, je dois juste l'ajouter. Nous allons donc ajouter la population à zéro et nous allons faire en sorte que la région soit une chaîne vide. Très bien, génial. Je pense donc que nous nous sommes débarrassés de toutes nos erreurs de type. Cool. Nous obtenons donc tellement de résultats nous ne pouvons même pas tous les afficher. Nous avons besoin du flex wrap ou quelque chose comme ça pour ne pas obtenir autant de résultats. Très bien, nous pouvons donc nous débarrasser de nos données fictives ici parce que nous n'en avons plus besoin. Sauvegardez ça. Quelle autre erreur pouvons-nous corriger ici ? Le numéro de type de population n'est pas assignable au type de flux. Oh, est-ce un type de chaîne ? Ici, le type est une bande, il s'agit donc en fait d'un numéro d'intervalle. Cool. C'est une bonne chose à propos du script typographique. Je veux dire qu'il détectera ces petites erreurs et veillera à ce que vous ne les commettiez pas tout au long de votre projet, mais très bien, alors laissez-moi créer un emballage sur cette boîte. Génial, allons-y. Nous avons donc tous nos pays, il devrait y avoir 250 boîtes. Ce que je vais faire maintenant, c'est utiliser ces données dans les cartes elles-mêmes. Nous espérons que notre composant de carte donnera juste une petite marge sur le bas, juste pour qu'elle soit un peu plus belle. Là où il est écrit lézard, nous allons changer ce nom. Voyons voir, en fait, il semble vraiment petit. Nous allons faire en sorte la taille de police soit comme une RAM. Et nous allons modifier le poids de la police pour qu'il soit d' environ 700, car elle semble vraiment en gras. Nous allons dire que nous avons nos noms. Ensuite, nous avons besoin de la population, de la région et du Capitole. C'est bon. En utilisant notre corps à deux. Nous allons y aller, je vais utiliser le tag, donc ce ne sont que les étiquettes ordinaires en forme de bol que je vais vous dire à la population, puis je vais juste les copier-coller. La suivante était, je crois, la région. Région et capitale, il suffit de taper majuscule, c'est génial. Enfin, nous voulons accéder à l'image Nous allons donc simplement taper le drapeau ici car ce sera notre source PNG. Génial En gros, avec quelques accessoires simples que nous avons transmis de notre pays grâce à l'API Nous les avons littéralement transmis au composant de notre carte, puis nous y avons simplement accès comme nous le ferions pour passer des accessoires ou n'importe où ailleurs, et nous les avons affichés dans notre application Notre application est terminée à 50 %, peut-être plus. Nous avons fait comme notre premier type de test avec l'API et la logique qui s'y trouve. Donc ça se passe plutôt bien. Maintenant, la prochaine chose que nous allons vouloir faire, c'est que nous le sommes. Bien, nous avons donc notre application formatée et stylisée, mais la prochaine chose que nous allons vouloir faire est d' ajouter de la logique, Parce qu'à l'heure actuelle, si nous saisissons quelque chose que nous saisissons en France, absolument rien ne se passe. Nous voulons donc ajouter cette logique, et nous le ferons dans la section suivante. 9. Ajouter une logique de recherche: Bien, la prochaine chose que nous devons faire maintenant est cette logique pour nous assurer que lorsque quelqu'un tape dans un pays, dans la barre de recherche ci-dessus, il renvoie réellement une réponse. Pour le moment, nous ne faisons absolument rien. Aucun filtrage n'est effectué sur aucun de ces résultats. Allons-y donc et mettons-le en œuvre dès maintenant. Très bien, nous allons donc commencer par qui s'offrent à filtrer tous les pays qui s'offrent à nous comme options, à partir de nos données, de notre appel d'API. Je suis sûr que l' une des façons dont nous pourrions le faire est par le biais de requêtes d'API. Mais nous pouvons simplement filtrer cela côté client, exemple en fonction des données que nous avons déjà reçues, car c'est un appel très, assez peu coûteux par rapport à, vous savez, une application plus volumineuse qui récupère tonnes et des tonnes de données Ce que je veux faire ici, c'est passer à la recherche par pays et nous allons le faire dans le cadre de ce composant. Ce que je veux faire ici, créer une variable qui appelle les pays filtrés et je veux les définir. Je veux initialiser cela comme étant une donnée. Quelles que soient les données, ce seront les pays filtrés. C'est ce que nous allons suivre en boucle. Si je change les données pour qu'elles soient filtrées par pays, nous allons laisser cela pour le moment, d'accord ? accord, donc oui, nous allons parcourir les pays filtrés , mais nous devons le configurer, donc nous devons l'initialiser Lorsque nous tapons ici, nous voulons que quelque chose se passe, nous voulons qu'une sorte de F apparaisse. Nous pouvons y accéder en utilisant l' accessoire on change dans le champ de texte Nous voulons essentiellement filtrer les pays. Filtrer les pays, Filtrer les pays. Je sais que je vais vouloir réussir l'événement parce que je vais devoir cibler cette valeur là-dedans. Créons ce filtre les pays, les pays filtre Synovus Constant Et en passant cet événement, nous allons dire que nous voulons définir les pays filtrés sur B. Nous voulons les pays et nous voulons les filtrer. Nous voulons filtrer chaque pays nom de pays, pays. Et nous allons le faire en minuscules pour nous assurer que nous obtenons réellement la même valeur. Nous allons les transformer tous les deux. Nous voulons voir si le nom commun du pays en minuscules inclut quelque chose entre une valeur cible et une minuscule, il s' agit de la même majuscule. Il n'y aura aucun décalage et cela devrait fonctionner. Cette erreur s'affiche parce que nous devons lui attribuer un type « pays cool » et « pays filtrés ». Très bien, donc en fait, j' appelle la fonction, d'accord. Très bien, maintenant nous avons le réglage. Il filtre donc les pays filtrés pour voir si c'est la valeur. Très bien, et puis ce que nous voulons faire maintenant, nous voulons, nous voulons renvoyer cela, nous voulons montrer cela, nous voulons montrer les pays filtrés plutôt que les données et le dire. Et je pense que oui, nous avons une erreur ici. Nous obtenons simplement la valeur par défaut parce que nous devons attendre ces données. Ce que nous voulons faire, c'est définir des pays filtrés ici. Nous voulons donc définir des données, puis définir des pays filtrés. Nous pourrions donc être en mesure de nous débarrasser des données. C'est vrai. OK. Et puis c'est ce qu'il fait automatiquement. C'est bon, parfait. Nous avons donc filtré les pays. Alors maintenant, si je tape en France, c'est génial. Il cherche donc la France. Passons donc en revue ce que nous avons fait ici. Nous avons donc créé cette fonction appelée « filtrer les pays ». Il définit les pays filtrés tels qu'ils sont. Les données sont donc initialisées, puis nous voulons filtrer chaque pays et rechercher le pays, le nom du pays, le nom commun Nous transformons ce nom courant en minuscules, et nous vérifions si cette valeur de chaîne inclut ce que nous tapons dans notre barre de recherche ici. Donc, si je tape, vous savez quoi , je pense que nous devons également corriger quelques erreurs. Mais si je rafraîchis, ça marche bien. Vous remarquerez donc qu'il y a déjà quelques erreurs à corriger. Mais le concept initial fonctionne, nous allons donc dans la bonne direction. Bien, donc une erreur que nous venons remarquer est que s' il n'y a rien dedans, cela ne le réinitialise pas. Voyons donc si nous pouvons faire un FL pour lui donner la bonne valeur. Nous pourrions donc dire que si la valeur cible est égale à celle-ci, si elle est égale à une chaîne vide, nous voulons définir les pays filtrés comme des sauts de données, sinon les données, nous voulons définir les pays filtrés comme nous l'avons fait Très bien, saisissez-le et ensuite, oui. OK, cool. Donc, si je recule dans l'espace maintenant, ça marche. Génial C'est une erreur que nous avons corrigée. La prochaine chose que nous allons vouloir faire, pouvoir filtrer par pays, mais pour le moment, nous ne pouvons pas filtrer par région. Nous voulons donc également ajouter la possibilité de filtrer par région. Nous pouvons donc réellement commencer à utiliser ce type de changement de descripteur intégré qui a été inclus dans notre élément de formulaire. Nous pouvons simplement changer la valeur en région et nous allons, nous allons la changer en région, donc nous allons simplement tirer parti de la région définie initialement. C'est bon, cool. Oui, nous pouvons essentiellement utiliser cet événement de changement de pseudo pour définir notre région. Maintenant, lorsque nous choisissons une autre région, elle devrait simplement la définir automatiquement. Le problème ici est que nous allons maintenant devoir filtrer par région et par pays. Nous devons donc réfléchir à la manière dont nous allons procéder de manière logique. D'accord ? Je pense que ce que je veux faire ici c'est comme une combinaison de choses. Je souhaite créer un autre gestionnaire. Je vais donc créer un handle typing et cela va prendre un événement. Je vais créer une autre variable, une valeur de recherche constante. Ce sera ce qu'ils saisiront dans cette entrée. Je vais créer une variable pour contenir cela. Je vais passer à l'état, en commençant par un descripteur de chaîne vide en tapant que la valeur de recherche sera définie sur la valeur cible Et puis je vais appeler ça, ils tapent quand quelqu'un tape dans l'application. C'est donc ce qu'il va faire. Génial Et nous allons simplement aller plus loin. Paratypes. Génial Cool. Maintenant que cette valeur de recherche est stockée afin que vous puissiez y accéder à plusieurs endroits, ce filtre de pays pourrait finir par se transformer. La prochaine chose que je veux faire, c'est comme un mémo d'utilisation d'un effecteur d'utilisation Je veux vérifier à la fois pour la région, je veux vérifier pour la région et peut-être aussi vérifier le filtre. Permettez-moi donc de commencer par une note d'utilisation. Et ce que je vais faire, c'est créer un tableau vide appelé countries. Et je vais ensuite vérifier si la région n' est pas égale à une chaîne, n'est-ce pas ? Nous savons donc que la région commence comme une vanne à chaîne vide. Si ce n'est pas une chaîne, nous voulons faire quelque chose, non ? Si la région n'est pas égale à une chaîne, nous voulons définir les pays comme des données. Ou s'agit-il de données filtrées ? Données. Filtrez ensuite par pays. Si ce pays, région égale région égale région, cool. Oui, nous voulons vérifier, nous voulons essentiellement définir ce tableau de pays en fonction des données dont nous disposons. Oui, les pays vont l'être. En prenant les données, toutes les données que nous recevons de l'APA, nous allons les filtrer par pays. Si ce pays possède une région qui correspond à la région dans laquelle nous l'avons défini, elle sera inscrite dans la variable de ce pays. Cool. Ensuite, nous voulons définir les données filtrées, mais nous voulons également prendre en compte dont nous définissons les données filtrées, comme la façon dont le texte, le bit de saisie entrent en jeu. Laisse-moi y réfléchir une seconde. Très bien, nous voulons donc suivre une logique similaire. Donc, si c'est le cas de la région, nous voulons vérifier la valeur de recherche. La valeur de recherche n'est pas égale à une chaîne vide, alors nous voulons faire cette vérification, nous voulons définir les pays filtrés comme suit, n'est-ce pas ? C'est ce que nous voulons faire, mais ici, nous allons donc prendre des pays, sauf cela. Ensuite, au lieu de la valeur du point cible, ce sera la valeur de recherche. Je vais le garder. pas sûr de fonctionner car nous avons simplement pris Ce n'est pas sûr de fonctionner car nous avons simplement pris la valeur du point cible et l'avons enregistrée comme valeur de recherche. OK, cool. Nous en avons donc deux, si nous avons probablement besoin que la valeur de recherche d'une autre soit définie, la région n'est pas nulle, n'est-ce pas ? Nous voulons que les pays filtrent en conséquence. Si la valeur de recherche n'est pas nulle, nous voulons ensuite filtrer par pays. Mais si la valeur de recherche est nulle, nous voulons simplement définir les pays filtrés comme des pays , pas de filtrage supplémentaire. La région fait de même. Rien de tel que s' il n'y a pas de région, alors nous voulons faire une vérification similaire ici, n'est-ce pas ? Nous voulons essentiellement le refaire , puis le définir sur data. Je pense que oui, définissez-le sur les données, mais nous voulons plutôt définir les pays filtrés et nous allons le faire sur les données. Je crois que c' est le pays filtré par les données. Nous le ferons sur dossier. Si la valeur de recherche n'est pas nulle, nous allons prendre les pays filtrés puis les filtrer, sinon nous allons simplement définir les pays filtrés comme des données, la région. Si aucune région n'est définie, mais si la valeur de recherche n'est pas nulle, nous voulons tout de même filtrer par pays de recherche. C'est quelque chose que nous risquons de perdre fonction de ce pays de filtrage car elle n'est pas vraiment aussi utile. Mais si la région l'est, la valeur de recherche est également une chaîne vide, nous voulons définir les pays du filtre sur les données. Cela devrait fonctionner. Il suffit d'ajouter notre dépendance. Il doit donc s'agir d'une région de données région de données et d'une valeur de recherche. Sauvegardez ça. Je pense que cela devrait fonctionner. Je pense que cela devrait fonctionner. Essayons. Allons en France. Mais allons-y et essayons de filtrer par portée. L'Europe, d'accord ? L'Amérique va bien. Afrique. Oui C'est bon. Cela fonctionne donc très bien. Cool. Cool, cool, génial. C'est bon. Cool. Cela fonctionne donc très bien. Donc, la prochaine étape, oui. Donc, la prochaine chose que nous allons vouloir faire, je pense que ce que je vais faire maintenant, c'est de le configurer. Je voulais que tout le monde travaille. En gros, je veux que vous puissiez réinitialiser la région, car pour le moment , sans tout cela, vous ne pouvez que la définir. Vous ne pouvez pas le désactiver, n'est-ce pas ? Vous ne pouvez pas le réinitialiser s'il est réglé sur tout, car il renvoie également l' ensemble de la région. Si je fais région égale région égale égale, tout fonctionne, non, ça ne marche pas. Ce que je vais faire ici, c'est simplement changer la valeur de all pour qu'elle soit une chaîne vide de sorte que lorsque je vais en Afrique, Amérique, en Asie, puis que je reviens à all, elle revienne simplement à partir d'une chaîne vide. Très simple, propre, réparateur, cool. Voyons voir ce qu'il y a d'autre. Y a-t-il autre chose que je puisse faire ici ? Je pense que la seule chose qui reste à faire ici est probablement de le nettoyer un peu. Il dit qu'il veut des pays filtrés comme dépendance, mais je ne sais pas si cela fonctionnera si je le fais. Permettez-moi de le dire et ensuite d'essayer. Oh, attends, désolée. Je ne le suis pas. Oui, non, ça casse si je fais ça. Oui, donc je ne veux pas faire ça. Je vais juste laisser ça de côté. Je vais juste désactiver les dépendances exhaustives pour cette ligne. Cool. Je pense, utilisons-nous réellement des filtres par pays ? si je le commente et que je le supprime d'ici, les applications fonctionneront-elles ? Oh, c'est un bug. Ce n'est pas le cas. Très bien, donc je ne pense pas que nous ayons vraiment besoin d'un pays filtré. Je vais donc m'en débarrasser et je vais me débarrasser de la colonne qui s'y trouve ici. Il va simplement être remplacé par la saisie de handle, qui prend essentiellement cette valeur cible et lui donne simplement une variable qui résout ce problème. Euh, quoi d'autre ? Que pouvons-nous faire d'autre ici ? Oh, nous pouvons supprimer cette loi sur les consoles. Nous n'en avons plus besoin. Donc, en termes de données, oui, c'est peut-être la solution. OK, c'était la solution. J'ai donc reçu cette erreur : si je tapais quelques lettres et que je me rendais dans une région, si je revenais à toutes les lettres, le système ne triait pas C'est donc parce que je me suis trompée, j'ai commis une erreur. J'aurais dû dire données sur la ligne 60 ou j'aurais dû dire pays filtrés, c'est en fonction de cela que nous filtrons sur la ligne 60 pour qu'il s'agisse en fait de données. Donc, nous allons simplement utiliser des données, nous n'allons pas utiliser de pays filtrés. Nous allons utiliser des pays filtrés , mais pas à ce stade. Génial Je pense que nous avons tout ce dont nous avons besoin ici. Je pense que nous sommes plutôt prêts à nous calmer. Je suppose qu'une autre chose que vous pourriez faire avec ce projet est de le rendre adapté aux mobiles Donc, pour le faire, vous savez, transformez-le en une sorte de vue déroulante qu' ils ont ici en option Vous savez, n'importe quel filtre par région, c'est juste un pays après l' autre et créez une version mobile. Ce serait un autre projet sympa à réaliser. Vous pourriez retoucher le mode sombre, vous savez, obtenir une meilleure icône un peu plus conforme au design. Un tas de choses que vous pourriez encore faire si vous le vouliez sur ce projet. C'est à vous de décider si vous voulez continuer comme ça. Ensuite, vous pouvez également ajouter ici une sorte de page individuelle pour les différents pays qui n' y affiche que leurs informations. reste donc beaucoup à faire avec ce projet, mais oui, j'espère que cela vous a été utile et que vous avez vraiment pu apprendre à utiliser une API pour vraiment pu apprendre à la recherche par pays et que vous serez en mesure de travailler avec des API à l'avenir et les intégrer dans vos futurs projets. 10. Conclusion: Dans cette vidéo, nous avons beaucoup parlé des origines de React à la création votre propre application Web de recherche par pays entièrement fonctionnelle. l'avenir, vous devriez être en mesure de vous attaquer à tous les projets d'API qui se présenteront à vous. N'oubliez pas de rechercher quelque chose en cas de doute et de passer au peigne fin Stack Overflow si nécessaire J'adorerais savoir comment vous avez décidé de mettre en œuvre votre application Web. Veuillez donc laisser un lien vers votre code ou le site hébergé dans l'onglet Projets et ressources afin que je puisse voir tout le travail que vous avez accompli. Je lis chaque commentaire, chaque critique et je regarde chaque proposition de projet. Donc, si vous avez des questions, hésitez pas à laisser un commentaire dans la section d'évaluation ci-dessous ou à me contacter directement. Consultez ma page de profil pour plus d'informations à ce sujet. Si vous souhaitez en savoir plus sur le codage, regardez les autres vidéos que j'ai sur ma page de profil. J'ai également des vidéos sur HTML et CSS disponibles sur le site Web de ma chaîne Youtube. Je les lierai ci-dessous et sur mon profil si vous souhaitez apprendre ces langues également apprendre ces langues. Et je verrai dans le prochain.