MEAN Stack : apprendre en créant une application de commerce électronique avec Angular 12, PrimeNG et NodeJS [2024]

1. Que allons-nous faire: Vous allez construire une grande application qui est une plateforme e-commerce. Et avec cette plateforme e-commerce, vous pourrez faire quelques animations. Vous aurez une bannière, vous pouvez les contrôler. Vous aurez une catégorie pour vos produits et vous aurez une bannière de produits en vedette et aussi, lorsque vous allez à une catégorie spécifique comme celle-ci, vous verrez seulement les produits qui sont dans cette catégorie. Et aussi, vous serez en mesure de voir le produit en vedette ici, que vous pouvez contrôler dans le panneau d'administration comme je vais vous le montrer et aussi, quand vous allez au détail du produit, vous verrez tous les détails sur leur produit qui, comme vous le voyez un nom ou un titre et la cote du produit, cette quantité. Et vous pouvez l'ajouter à votre panier et vous verrez la description complète, que nous pouvons être à droite dans le panneau d'administration. Et aussi vous aurez une galerie du produit. Ainsi, vous serez en mesure de construire cette galerie à la main. Nous ne ferons pas cette galerie en utilisant une bibliothèque. Non, nous allons le faire à la main. Vous apprendrez à utiliser la réalité des composants dans Angular. Et aussi, nous allons voir comment aller à leur panier et ajouter des articles à leur panier. Et vous verrez aussi les notifications et les notifications Toast. Et vous serez en mesure d'aller au panier. Vous pouvez gérer votre panier, vous pouvez supprimer des articles de la carte. Vous pouvez aussi changer la quantité et tout sera calculé immédiatement après la mise à jour de la quantité. Tout est observé. Nous allons donc utiliser notre x js pour observer notre panier et il est mis à jour immédiatement chaque fois que l'utilisateur met à jour ou ajoute un produit au panier. En outre, nous aurons une page de paiement où l'utilisateur pourra entrer ses données et passer une commande. Et il peut aussi obtenir la commande et obtenir une page de remerciement. Et aussi, nous allons travailler avec le panneau d'administration. Le panneau d'administration contiendra tout le tableau de bord dont vous avez besoin. Combien de commandes, combien de produits proviennent de la base de données, de données de rayonne, rien n'est codé en dur. De plus, vous apprendrez à créer le panneau des produits afin que vous puissiez gérer le produit, les supprimer, les modifier, ou même ajouter un nouveau produit. En ajoutant de nouveaux produits, vous serez également en mesure d'utiliser un excellent composant, tel que ces grades bouton de commutation déroulant. Vous utiliserez aussi un grand éditeur. Donc, il reflétera pour vous toutes les informations dans le front end. Donc, vous n'aurez pas de mal de tête pour styler le composant ou la description du produit, mais vous verrez comment vous pouvez laisser l'utilisateur stylet avec un éditeur convivial comme vous le voyez ici. De plus, vous apprendrez à télécharger des images sur votre serveur. Ensuite, vous pourrez utiliser toutes ces images , puis créer une galerie pour votre application et votre produit. Quelque chose de différent avec les catégories, nous allons utiliser les icônes. Nous utiliserons également un filtre sur la table ou le tri. Et aussi, vous utiliserez aussi un sélecteur de couleurs, comme vous le voyez ici. Nous pouvons également utiliser ce grand composant pour ramasser les couleurs et mettre à jour aussi les catégories. Tout le travail est avec des données réelles, rien n'est faux, rien n'est codé en dur. Nous allons apprendre vraiment comme un pratique. Et sur cela, vous apprendrez une grande structure avec Angular. Comment vous pouvez structurer vos fichiers, comment vous pouvez construire un style partagé, et comment vous pouvez construire un modules et des composants réutilisables, qui peuvent être construits comme n'importe quelle grande entreprise. En outre, il y a un ordre. Vous serez en mesure de gérer les commandes, puis vous pouvez changer l'état des commandes et cela sera également reflété dans le panneau d'administration. Et vous verrez aussi le détail de la commande. Nous allons récupérer la structure de données compliquée de la base de données en utilisant notre API avec NodeJS et aussi le client M4 et en connectant les informations client avec la commande. Et aussi, nous ferons une gestion pour l'utilisateur. Nous serons en mesure de voir toute la gestion de nos utilisateurs. Et nous serons en mesure d'attribuer le rôle des utilisateurs s'il est administrateur ou non. Donc, il sera en mesure de regarder dans notre page ou à la page d'administration ou non. Et aussi, nous allons fournir comme un grand regard dans, nous allons utiliser la connexion, l'authentification, les jetons Web pour authentifier l'utilisateur et spécifier si l'utilisateur est administrateur ou non. Tout ça. Vous l'apprendrez à travers Angular, à travers un repo X Mono. Et vous apprendrez aussi comment construire une grande application comme cette application, vous apprendrez beaucoup de choses. Vous apprendrez le style. Vous apprendrez à structurer le projet. Vous verrez comment les grandes entreprises codent, comme comment elles créent des modules partagés. Et ils seront en mesure de développer plus rapidement, plus en plus d'applications. À la fin de ce cours, vous apprendrez beaucoup de choses, NodeJS, MongoDB, et aussi angulaire, puis un repo X Mono et RX et aussi les observables RX JS. Vous les comprendrez dans la pratique. Alors, êtes-vous prêt ? Commençons pour ça. 2. Qu': Ok, dans cette conférence, nous saurons ce qui est une pile méchante. Mais d'abord, permettez-moi de vous présenter ce qu'est une pile technologique en général ? Une pile technologique est une liste de toutes les technologies et services qui sont revenus qu'ils sont utilisés pour la construction et l'exécution d'une seule application. Par exemple, le côté social, Facebook, est composé d'une combinaison de frameworks de codage et de langages, y compris JavaScript, HTML, PHP et React js. Et c'est la pile de la technologie Facebook. Par exemple, j'ai répertorié ici une statistique moyenne, qui est MongoDB Express Angular Node.js, comme nous l'expliquerons plus tard, lampe utilise les technologies système d'exploitation Linux, serveur Apache, base de données MySQL, et comme Will PHP langage de programmation aussi. Marié est MongoDB, Express, React ou React Native et NodeJS. Donc, ce qui est moyen stat signifie que la pile utilise pour les technologies. Donc, pour la base de données où je vais stocker mes données, j'utilise MongoDB. Mongodb est une base de données très clairsemée, qui me fournit de nombreuses fonctions que je peux récupérer et filtrer mes données facilement. Express est utilisé pour créer des API Web où je reçois et crée ou supprime des données de ma base de données. Et NodeJS est le célèbre framework pour construction d'une application back-end et l'exécution de serveurs Web. Et enfin, Angular. Angular est un objectif principal de notre cours. Nous allons apprendre beaucoup sur Angular. Angular est un framework frontal fourni par Google pour construire principalement des applications Web et aussi des applications multi-plateformes pour construire votre application sur le web ou sur des appareils mobiles. Vous fournir une excellente structure pour l'architecture votre application et le rendre facile à combiner à l'aide d'excellents outils et également fournir des performances très rapides et des constructions de production sécurisées. Apprendre. Toutes ces technologies à elles seules ne rempliront pas votre expérience pour apprendre comment ces technologies peuvent fonctionner ensemble. Parce que si vous ne faites aucun travail pratique ou un projet réel, vous ne les apprendrez pas en réalité. Vous verrez juste des cours dont ils ne lisent que la documentation de chaque technologie. Mais ici, dans ce cours, nous avons eu l'idée d'apporter un site Web e-commerce fonctionnel complet. Et avec ce site, vous utiliserez le MongoDB et connecté avec Express. Et express sera connecté avec Angular et tous interagissant en utilisant Node.JS. Chaque technologie a la responsabilité. Et nous allons voir en détail comment mettre en œuvre cette responsabilité dans une application fonctionnelle du monde réel. Sinon, je suis sûr que vous ne l'apprendrez pas. Vous avez besoin d'un cours d'application réel pour l'apprendre. 3. Qui peut suivre ce cours: Ok, dans cette conférence, je veux expliquer qui peut suivre ce cours. Quelles sont les exigences du cours ? Donc, pour moi, je dirais que si j'avais déjà un petit appel angulaire de base comme une connaissance de base de Angular, alors ce cours me convient. Comme si vous avez besoin d'un Angular très, très basique. Comme vous avez besoin de savoir ce qui est composant, qu'est-ce que le service, qu'est-ce que le module ? Même moi, je les explique aussi rapidement. Mais quand vous faites quelque chose de pratique, vous les comprendrez. Je l'ai fait d'une certaine façon, comme au début. Je les explique en détail. Et puis avec le temps, parce que nous allons créer plusieurs composants, plusieurs services et plusieurs modules, vous vous habituerez à eux. Vous devez aussi connaître une connaissance de base avec TypeScript. Donc, dans ce cas, connaissances de base avec TypeScript et JavaScript sont vraiment suffisantes pour s'inscrire et aller à ce cours. Aussi. Nous avons besoin d'un style et d'un modèle. La connaissance HTML et CSS est également requise. Donc, vous comprendrez le code CSS que je tape, même je l'explique point par point et je vous montre comment si je mets le haut de rembourrage, que va-t-il se passer ? Comment si je change la couleur de la police, comment je fais une box-shadow, comment je fais la bordure pour le bouton, et cetera. Donc, toutes ces trois informations que vous devez connaître avant de vous inscrire au cours. Si ce n'est pas le cas, je préférerais que vous suiviez cette voie très lentement, car même cela, j'ai expliqué tous les points qui sont mentionnés ici. Mais je préfère les étudiants qui ont une connaissance très basique sur l'angulaire. Et aussi je voudrais mentionner que ce cours est fait de manière débutante. Je n'ai pas rendu ça très compliqué. Par exemple, je n'utilise pas la structure de lunettes très compliquée et j' aime aussi comment je peux rendre les relations entre les classes beaucoup d'extension et d'héritage. Non, je n'ai pas fait ça. Je l'ai fait avec une connaissance de base. Alors, qui est fraîchement fini cours angulaire, théoriquement ou pratique ? Il peut également voir comment les choses peuvent être implémentées et cela élargira vos connaissances sur Angular pour construire de plus en plus d'applications et vous savez comment les structurer également. Ce discours est appliqué sur la partie back-end à propos de NodeJS. Et NodeJS, nous allons commencer à partir de zéro et vous verrez ce que je veux dire avec chaque mot que je fais là-bas. Alors c'est tout. Si vous avez des connaissances, aussi, ce cours est bon pour vous. Mais moi, comme je vous l'ai dit, vous devez le suivre très lentement. Vous devez répéter plusieurs portées. Vous devez répéter encore et encore quelques vidéos. Ensuite, vous obtiendrez l'information et vous comprendrez qu'il vient Ailey plus facile pour vous après cela. 4. Installation de Nodejs: Pour commencer le développement, nous avons toujours besoin de la gestion des paquets. La gestion des paquets est fournie avec l'application NodeJS. Donc, pour l'installer joue juste dans Google NodeJS et aller à Télécharger. Et vous verrez le téléchargement pour tous les systèmes d'exploitation. Par exemple, j'ai ici pour Windows et aussi pour Mac OS. Il existe deux types comme LTS, qui est recommandé pour la plupart des utilisateurs, et le courant, qui est les dernières fonctionnalités. Mieux vaut obtenir toujours une version stable, ce qui est recommandé pour la plupart des utilisateurs. Ici, vous pouvez choisir votre installation en fonction de votre système d'exploitation. Et ce sera simplement une application, comme toute application que vous pouvez installer. Donc, après cela, vous pouvez télécharger cette application et l'exécuter. Et ce sera comme n'importe quelle installation d'application normale. Donc, pour être sûr, après cela, vous terminez toutes ces étapes. Vous devez exécuter des commentaires MPM. Donc, pour exécuter des commandes mpm, nous pouvons utiliser Visual Studio Code. Après avoir ouvert le code Visual Studio, vous verrez ici les derniers projets que vous avez. Mais par exemple, nous devons ouvrir le terminal du code Visual Studio. J' irai dire Control et J. et ensuite j'ouvrirai le terminal. Et dans le terminal, nous pouvons, par exemple, placer un commentaire NodeJS. Donc, nous pouvons dire, par exemple, la version NPM. Et nous obtiendrions le détail complet vierge sur le Node.js installé. Après cela, nous serons en mesure d'utiliser la gestion des paquets NodeJS, où il existe de nombreuses bibliothèques que nous pouvons utiliser dans notre application et nos développements. 5. Configure MongoDB Atlas: Pour notre e-shop, nous avons besoin d'une base de données. Et la base de données, nous n'avons pas besoin d'installer de logiciel. Nous allons utiliser MongoDB, Atlas. Mongodb offre maintenant un stockage de base de données en ligne, ce qui signifie que la base de données est déjà dans le Cloud. Ce que nous devons faire juste pour aller à l'URL que j'ai jointe à cette conférence et créer un compte ici et inscrivez-vous et ensuite regarder votre compte. Après la connexion, vous verrez cet écran que vous avez besoin pour créer un projet. Donc, tout d'abord, vous devez créer un projet pour notre e-shop. Alors vous allez ici et dites, je veux un projet qui est, par exemple, chaque hub. Et je clique sur Suivant. Et puis créer le projet. Après cela, le projet nécessite un cluster. Nous devons donc construire un cluster où nous offrons notre base de données. Donc ici, il y a des clusters partagés, ce qui est gratuit. Vous pouvez l'utiliser et choisir le serveur le plus proche de votre pays. Par exemple, je vais utiliser celui-ci, celui par défaut. Ensuite, après avoir créé le cluster, nous sommes prêts à créer notre base de données. La base de données dans MongoDB appelée collection. Vous devez donc aller dans les collections et en créer une nouvelle en fonction de vos besoins. Nous en avons déjà un que nous avons créé pour le cours dans le projet 0. Ici, il y a des collections à j'ai créé plusieurs bases de données. Donc, votre part est juste de créer un compte et de créer un cluster et de créer votre propre collection, que nous allons utiliser dans le cours. Nous verrons plus tard comment faire la connexion entre notre code back-end et le MongoDB dans le Cloud. 6. Installer PostMan pour tester nos API: Lorsque nous créons des API, nous devons les tester. Vous pouvez tester vos API avec une application frontale comme React ou Angular ou Vue js. Mais nous allons dans ce cours pour commencer par le backend en premier. Donc, la meilleure façon de le faire et de tester les API est d'installer un outil appelé Postman. Allons à Google. Vous allez au téléchargement Postman. Et ici, vous trouverez en fonction de votre système d'exploitation. Donc, ici, vous allez choisir télécharger l'application. Et une fois qu'il est téléchargé, ce sera une configuration normale comme n'importe quelle application. Après avoir ouvert le fichier téléchargé, vous recevrez une notification si vous utilisez Mac OS. Et il vous demandera de déplacer cette application vers le dossier de l'application. Et après cela, vous verrez que cette application se trouve dans votre dossier d'application. La même chose pour Windows. Il est normal d'installer comme n'importe quelle petite application. Après avoir ouvert l'application, vous serez en mesure de tester les API. Essayons un. Lorsque vous allez à Google et tapez l'espace réservé JSON, vous verrez que le premier lien est de fausses API. Ainsi, vous pouvez tester une requête GET ou des demandes de poste. Alors essayons celui-là. C' est écrit ici. En tant que requête GET, je vais au Postman, puis j'ouvre un nouvel onglet avec la requête GET et place le lien que j'ai copié à partir de l'espace réservé JSON et appuyez sur Envoyer, j'obtiendrai une réponse. Cette réponse vient sous la forme d'un JSON. Et de la même manière, nous allons construire nos API. 7. Commencer avec le backend: Bienvenue dans la troisième section de ce cours. Nous allons avoir une introduction sur la façon de commencer par le back-end. Qu' est-ce qu'un backend ? Dans l'ingénierie logicielle, les termes front-end et back-end font référence à une séparation des préoccupations entre la couche de présentation et la couche d'accès aux données. Ainsi, toute application web et application mobile est considérée comme un front end. backend est la partie où je détiens des données. Encore une fois, une base de données ou un serveur de fichiers. Et le serveur lui-même peut être considéré comme un back-end. Alors faisons-le comme ça. L' interface affiche les données et le backend détient ces données dans un endroit sécurisé appelé serveur. Nous devons en quelque sorte gérer ces données qui sont stockées dans le serveur et les servir au client. Et en utilisant certains langages de programmation comme Java, SQL, et aussi pas GS, ce que nous allons faire dans ce cours, pour envoyer ces données au client d'une belle manière, pour les rendre en HTML, CSS, et Bibliothèques JavaScript. Donc, dans la prochaine conférence, nous verrons comment le front end peut communiquer avec le backend pour saisir ces données, qui est appelé API RESTful. 8. Aperçu de notre API RESTful: Jetons un coup d'oeil à notre API RESTful pour voir comment échanger des données entre le client et le serveur. Quelle est l'architecture de l'API RESTful ? Nous avons le client et nous avons un serveur, et ils échangent des données via le protocole HTTP. C' est le concept de base de l'API RESTful. Il existe également des opérations pour créer des données, lire des données, mettre à jour des données et les supprimer. Ses opérations peuvent être effectuées via le protocole HTTP. Il existe des méthodes spécifiques de protocole HTTP qui font ces opérations, nous appelons des opérations au début, quelle est la différence entre l'API RESTful et la route frontale ? L' API RESTful apporte des données. La sécheresse frontale affiche les données ou le rendu d'une page spécifique. Lorsque vous ouvrez votre navigateur et mettez le lien API RESTful, si vous avez accès à ces données, alors vous obtiendrez une chaîne qui se compose de fichier JSON ou XML. protocole Http est capable de rendre une page avec HTML CSS et d'apporter vos données. Donc, les méthodes HTTP en général, ils sont GET, post, PUT et delete, qui sont les opérations brutes. Mais dans les méthodes HTTP, ils sont appelés comme ceci. J' envoie donc une demande à la base de données ou au back-end en général pour passer par l'API de repos certaines données. Par exemple, obtenir une liste de produits via l'API, cela me donnera tableau de liste de produits. Obtenir un seul produit, en contournant l'ID de ce produit, il me donnera le fichier JSON avec tous les détails du produit. Lorsque je veux mettre à jour un produit, j'envoie une requête PUT avec l'idée pour le produit et je joins également les nouvelles données. Et la réponse sera le même produit, mais avec des données différentes. Et la suppression d'un produit passe simplement l'ID du produit avec la demande de suppression. Création d'un produit, besoin de publier un nouveau produit. Donc, j'utilise la route principale de l'API des produits et ensuite je transmets toutes les nouvelles données, les données qui, par exemple, nom de votre produit et l'image, et c'est des étangs, seront un nouvel identifiant avec le nouveau nom du produit et bien sûr, l'image. Ce sont nos demandes d'API pour obtenir les données ou publier, supprimer ou mettre à jour des données sur le serveur. Et j'utilise api slash v1, ce qui signifie la version un. Ainsi, lorsque vous souhaitez mettre à jour votre API à l'avenir, vous ajoutez une nouvelle version. Ainsi, les utilisateurs sont toujours en mesure d'utiliser les anciennes versions de votre API. La même chose pour les commandes et les utilisateurs. Donc, dans ce cas, vous avez tous la même séquence, mais vous avez juste besoin de planifier vos données, non ? Créer un serveur web avec NodeJS est très simple. Voyons ça dans la prochaine conférence. 9. Créer le serveur de backend avec Express: Commençons à créer notre serveur principal, ou disons notre serveur Web, où nous appellerons nos API au client. Après avoir ouvert notre code Visual Studio dans le dossier backend du dossier, comme nous l'avons structuré auparavant, nous exécutons une commande npm init dans MPM, il nous demandera un nom de paquet. J' ai mis un e-shop, une vierge. J' appuie sur Entrée description, disons quelques backend pour l'e-shop par exemple. Et puis le point d'entrée comme où l'application va commencer, je mets app.js et puis certains, un autre commentaire. Nous continuons à appuyer sur Entrée et puis il nous demandera que tout va bien. Nous appuyons sur Entrée. Ensuite, nous verrons un paquet Jason est créé. Donc, créons maintenant notre fichier jusqu'à js, où nous allons commencer notre point d'entrée de notre application. Donc, je vais mettre ici, par exemple, console.log, Bonjour monde. Et puis il imprimera Hello World quand je suis en cours d'exécution de cette application. Mais comment nous allons exécuter cette application, je conseille d'utiliser une bibliothèque appelée NADH Monde, qui est un utilitaire qui surveillera tous les changements de notre code source lorsque nous appuyons sur Control S ou enregistrer cette application JS, il redémarrez l'application automatiquement. Donc, après avoir installé cette bibliothèque, nous voyons qu'elle est en indépendance dans un paquet JSON en tant que script personnalisé, nous pouvons l'ajouter ici, comme c'est un commentaire pour démarrer l'application en utilisant le moniteur de nœud. Donc, je peux dire démarrer le moniteur de noeud ou le noeud gémit. App point JS. Dans ce cas, je vais faire démarrer l'application avec le fichier de point d'entrée app.js. Essayons maintenant. Sauvegardons ab.js, puis écrivons npm start. Et après avoir commencé l'application, je verrai Hello World. Et l'application est toujours en cours d'exécution. Donc, il détecte tout changement que je fais dans l'application. Alors je dis Helloworld avec le changement était point d'exclamation, et je vois qu'il a changé. Changeons le monde e-Sharp. Nous verrons bonjour e-shop. C' est génial. Donc, jusqu'à maintenant, nous n'avons qu'une application en cours d'exécution, mais nous n'avons pas encore de serveur. Donc, pour créer un serveur Web, installons Express, qui est une bibliothèque célèbre de Node.JS pour héberger un serveur. Donc, après avoir fait cette installation, je le verrai aussi dans les dépendances. Mais supprimons ce journal de console et il crée une constante, appelez-le express et appelez la bibliothèque express en utilisant le mot-clé require express. Il l'appellera automatiquement à partir des modules de noeud. Et créons une constante qui s'appelle application. Et cette application avec appel d'une fonction appelée Express, que nous avons mentionné ou défini précédemment. Ce serveur Web nécessite l'écoute d'un port spécifique. Alors je dis que l'écoute. Et je spécifie, par exemple, 3 mille comme un port. Et il y a un rappel. Rallback nous donnera, nous serons tous exécutés quand il y aura la création réussie du serveur. Donc, dans le rappel, je peux imprimer n'importe quel message dans la console. Par exemple, je dirai que le serveur est démarré maintenant ou que le serveur est en cours d'exécution maintenant sur l'hôte local de liaison avec le port 3000. Alors maintenant, exécutons à nouveau l'application. Je dirai npm commencer. Et nous aurons une erreur parce que je suis déjà en cours d'exécution du serveur. Alors commençons et je le relance. Je vais voir l'hôte local ou le serveur est en cours d'exécution sur localhost 3000. Lorsque j'ouvre le navigateur et visite cette URL, localhost 3000, voyons ce que nous aurons. Je l'ai mis ici et je vois que venir, obtenir, ne peut pas obtenir parce que je n'ai pas spécifié de route initiale pour l'application. Nous créons. Maintenant, la route initiale ou la racine, nous pouvons dire point d'application obtenir. Nous verrons qu'Express nous fournit toutes les requêtes HTTP. Par exemple, PUT, supprimer, et aussi publier. Alors oublie. Il acceptera deux paramètres. Le premier est la route elle-même. Par exemple, je dirai la route initiale ou la racine. Donc, dans ce cas, je vais demander un rappel. Le rappel aura la réponse que j' enverrai au client quand il appellera cette route. Donc, je dis dans la réponse de rappel, sable de point, par exemple, disons un message, nous pouvons l'appeler bonjour ou API, pas Hello World. Donc maintenant, nous avons cette API. Sauvegardons, et maintenant nous pouvons exécuter l'application à nouveau sur le navigateur. L' application appellera une getMethod et nous obtiendrons en réponse, cette API hello. Donc, comme un résumé, nous avons vu comment nous avons créé notre propre serveur ou serveur web avec express. Et nous regardions nos changements avec le moniteur de noeud et comment nous appelons cette application arriver à initialiser une route. Et nous exécutons le serveur sous un port spécifique que nous avons vu auparavant. Nous devons avoir une API et une version dans l'URL de cette sortie. Voyons donc comment nous pouvons créer cela avec des variables d'environnement dans la prochaine conférence. 10. Lire des variables d'environnement: Ok, donc commençons par les variables d'environnement. variables d'environnement sont normalement utilisées comme variable publique, qui sont utilisées dans l'application. Donc, par exemple, je veux une variable publique pour l'URL de l'API. Donc, cette URL API, qui sera préfixée pour chaque route que j'utilise pour mon application ou pour mon API. Donc, comme nous l'avons vu avant que chaque API que nous avions, il est préfixé avec quelque chose comme slash, api slash version un. Et cela signifie que chaque API de mon application aura cette URL. Et puis la version d'API 1. Et puis je dis, par exemple, les produits. Et puis je peux poster, supprimer ou créer des données dans cette API. Alors maintenant, voyons comment nous pouvons lire ce préfixe. Donc, je ne veux pas répéter dans mon API est toujours la chaîne. Donc, je peux le réparer dans une constante qui est lisible de partout. Et puis je peux le passer au micro, à mes routes de cordes, et ensuite il serait lisible dans cette route. Donc, pour ce faire, d'abord, normalement, dans pas le Node.JS, nous avons normalement une variable d'environnement appelée dot n ou fichier d'environnement. Et quel exemple je passe un nom de variable que je le veux, n' importe quel nom que vous pouvez, par exemple, URL d'API. Et puis je peux dire la chaîne que je veux passer, qui est api slash v1. Et dans ce cas, j'aurai cette URL API est définie partout dans l'application. Mais d'abord, comment nous pouvons lire cette variable de ce fichier dans notre application, il y a une bibliothèque, nous pouvons l'installer à partir de paquets MPM. Et ça s'appelle « point EMF ». Donc, nous ne pouvons pas dire npm install dot EMF. Et cette bibliothèque est normalement disponible toujours. Et nous pouvons l'utiliser dans l'application JS dans la route à la racine, Pas de problème. Donc, nous pouvons dire définir ou nous pouvons dire exiger cette bibliothèque. EMF ne slash pas les conflits. Et normalement cela devrait être dans une chaîne. Donc, quand je dis exiger cette bibliothèque, alors je serai en mesure d'utiliser une constante spécifique pour obtenir ces valeurs du fichier M. Donc, je vais aller ici et définir une constante. Appelons-le par exemple, API. Et puis nous pouvons dire point de processus, point, puis le nom de la variable que j'ai créée ici. Donc, je peux dire API sur l'URL de partition. Alors sauvegardons tout. Et maintenant, essayons d'imprimer cette variable pour voir si elle lit vraiment à partir de ce fichier ou non. Alors faisons-le au début quand nous avons démarré le serveur. Donc, je vais dire console.log, l'API pour constante. Alors je vais démarrer mon serveur, mpm start. Et voici, nous avons déjà défini. Donc, dans chaque route que j'ai, je peux définir ou passer cette variable API plus la route que je veux, par exemple, des produits. Donc, dans ce cas, j'aurai la version de l'API préfixée un plus des produits. Nous verrons cela plus en détail dans les prochaines conférences pour voir comment créer l'itinéraire et comment le construire et comment l'appeler. chose la plus importante que vous devez savoir maintenant que nous pouvons créer les variables publiques dans ce fichier et les lire n'importe où dans l'application. Donc, dans ce cas, je veux stocker, par exemple, la chaîne de base de données ou la chaîne de connexion. Je peux le stocker ici dans ce fichier et aussi, par exemple, un secret pour l'authentification, je peux également le stocker ici. Et quand je veux déployer l'application sur le serveur de production, je vais changer ces variables. Donc, nous aurons aussi un autre fichier, par exemple point EMF, mais pour le serveur de production, nous verrons cela bien sûr dans la conférence où nous allons déployer l'application Node.JS. Maintenant passons à la prochaine conférence où nous allons créer la véritable API et comment nous allons envoyer des données JSON à travers elle parce que nous avons besoin de données JSON pour notre e-shop pour échanger avec le front end les informations sur les produits et la commande et cetera. 11. Créer un premier appel API et parcourer des données de Json: Maintenant, nous allons voir comment échanger des données entre front-end et back-end. Nous avons vu précédemment comment échanger des données avec le front end avec la requête GET. Donc, nous envoyons Bonjour API. Mais ce que nous avons fait est seulement d'échanger une chaîne, ce qui est l'API Bonjour. Nous devons donc échanger des données JSON. Par exemple, le produit est un objet, se compose de l'ID, le nom, l'image et le prix. Alors maintenant, nous allons simuler l'API des produits. Donc, au début, nous allons avoir le joli préfixe comme avant. Donc, je vais utiliser les ticks arrière, qui sont très utiles pour combiner entre les constantes et les chaînes sans utiliser ce plus. Alors maintenant, supprimons cette partie et créons un backticks. Et avec un signe dollar et des crochets incurvés. Je vais faire de l'API. Et puis disons les produits. Retirons cette partie d'ici. Et aussi celle-là. Et je vais créer une constante. Disons produit. Et ce produit est objet, contient ID, disons un, et le nom, disons cheveux, commode. Et l'image avec, par exemple, une URL. Vous avez donc la possibilité ici de sélectionner des devis doubles ou un devis unique. Mais avec JavaScript, Il est préférable d'utiliser toujours des guillemets simples dans cette réponse. Envoyez-nous ce produit à l'avant. Et nous allons exécuter l'application. Maintenant, nous avons l'application en cours d'exécution. Allons voir Facteur. Postman est une application comme nous l'avons déjà parlé et nous avons vu comment l'installer. Donc, je ne peux pas appeler les API comme avec les méthodes GET, post, PUT, etc. Donc, avons ici notre API 3000, puis api slash version un produit slash. Et je clique sur Envoyer. Alors c'est pons est l'objet que j'ai déjà créé. Donc, nous supposons que nous construisons cet objet en obtenant les données du produit dans la base de données ou à partir de la base de données, puis les envoyons à l'extrémité frontale avec une getMethod. Alors que faire si l'utilisateur ou l'administrateur de l'application du problème vers le haut, nous allons envoyer, ou, par exemple, créer un nouveau produit. Donc, le nouveau produit a besoin d'une donnée qui sera envoyée à partir de l'extrémité frontale. Alors maintenant, changeons cette méthode musculaire de se rendre à la poste. Quel exemple je vais le copier et dire post. Les demandes de poste ont également besoin de données. Ces données proviendront de l'extrémité frontale. Donc, comment j'obtiens ces données à partir de l'extrémité frontale, c'est très simple en utilisant le corps de point de requête. Donc, après avoir posté les données du corps, je vais les renvoyer au front. Alors créons une constante, disons un nouveau produit. Et ce nouveau produit sera le corps de point de demande. Alors faisons-le comme ça. Console. Consigner le nouveau produit. Alors on va chez Facteur. Facteur nous changeons cette méthode de get to post. Et le corps de la requête sera, par exemple, à la ligne JSON, qui est JSON. Et puis je peux passer, par exemple, cet objet. Et quand je clique sur Envoyer, nous voyons que nous en retournons un. Et dans le journal de la console, j'ai été indéfini. Donc, le problème est que le corps n'est pas bien analysé. Donc nous avons besoin de quelque chose appelé un middleware. Le middleware est une fonction qui a le contrôle de la requête et la réponse de n'importe quelle API. Donc, lorsque le front se termine et l'objet JSON, nous avons besoin du back-end pour comprendre que c'est adjacent. Alors s'il vous plaît l'analyser et l'utiliser dans le back-end. Donc, pour ce faire, nous avons juste besoin d'utiliser une chose d'express JS. Donc, nous devons utiliser ce JSON. Donc, l'Express acceptera les données JSON. Et la chose est très simple. Comme je vous l'ai déjà dit, nous avons besoin d'un middleware. Et ce middleware peut être fait en utilisant l'utilisation de l'application. Et puis nous disons point Express JSON. Et cette méthode, nous allons rendre nos données compréhensibles par Express, qui sont envoyés par le front end. Et nous pouvons taper ici comme middleware. Et à l'avenir, nous verrons que nous mettrons tous les middleware. Dans cette section. Auparavant, il était utilisé quelque chose appelé BodyParser, et cet analyseur de corps a été dupliqué. Donc maintenant, nous utilisons Express JSON. Donc, si vous voyez dans les prochaines conférences que nous utilisons BodyParser, remplacez-le simplement par exprimé ou JSON. Ainsi, vous garantissez que votre application fonctionnera de la bonne manière. Donc maintenant, nous sommes en mesure de faire un get et aussi post des données. Je vais, par exemple, changer ici coiffeur et l'envoyer. Et je vais récupérer le coiffeur deux. Donc maintenant notre API est prête. Nous commençons maintenant à construire cette structure API pour les commandes de produits et 40 utilisateurs, comme nous l'avons déjà dit dans la section précédente. Dans la prochaine conférence, nous verrons comment enregistrer ces événements API. Par exemple, lorsque quelqu'un publie des données ou de bonnes données, nous les verrouillerons dans la console de notre application. 12. Logger des demandes de API: Il est très utile faute que le développeur de savoir ce qui se passe sur son serveur. Ainsi, nous pouvons connaître et enregistrer les requêtes HTTP qui viennent de l'extrémité frontale, comme les messages, obtenir ou mettre ou supprimer. Pour ce faire, il existe une très bonne bibliothèque appelée Morgan, donc nous pouvons l'utiliser pour enregistrer nos requêtes HTTP qui viennent de l'extrémité frontale. Alors installons cette bibliothèque. J' arrête le serveur, disons m, Pm installer Morgan. Et après l'installation de cette bibliothèque, nous pouvons l'appeler aussi avec require. Donc, ça coûte Morgan. Exiger. Morgan. Nous avons dit que cette bibliothèque est une bibliothèque middleware, donc nous devons la mettre dans app dot utiliser Morgan. Et il y a quelques options par défaut, qui s'appelle Tiny. Ceci est bon dans le cas où afficher les demandes de journal dans un format spécifique. Par exemple, exécutons à nouveau le serveur. Mpm commence. Donc, nous avons ici qu'un serveur est en cours d'exécution avec Postman. Faisons quelques demandes. Par exemple, je vais envoyer à nouveau le message. Ok, retour à l'application ou au code. Nous verrons que nous avons reçu une demande de poste sur l'API et avec leur numéro de statut spécifique. Faisons un GET. Aussi. Voici un get, Envoyer et revenir à l'application. Et je vois que je me suis connecté aussi, ils GET requêtes. Il existe de nombreuses options pour cette bibliothèque, sorte que vous pouvez formater vos journaux comme vous le souhaitez. Mais nous ne le ferons pas. Nous allons utiliser seulement minuscule. Et bien sûr, vous pouvez dire avec ces journaux sur certains fichiers, tout cela est, est affiché ici dans la documentation de cette bibliothèque. Maintenant, nous utilisions seulement une fausse donnée du produit. Commençons à lier ces données à la base de données. Donc, dans la prochaine conférence pour faire la connexion à la MongoDB en utilisant Atlas. 13. Installation de Mongoose et de connecter à la base de données MondoDB: Auparavant, nous avons vu comment simuler une donnée du produit pour les stocker et les afficher dans notre application. Maintenant, ce dont nous avons besoin est de stocker les données dans la base de données. Et dans ce cours, nous utilisons MongoDB. Et comme nous l'avons vu auparavant, nous n'avons pas besoin d'installer un logiciel spécial pour MongoDB. Nous avons juste besoin de nous connecter dans le nuage de MongoDB. Ensuite, nous créons notre base de données et connectons notre application à cette base de données dans le Cloud. Donc, tout d'abord, comment nous pouvons connecter notre application à la base de données sur le cloud. Donc, nous devons d'abord installer une bibliothèque appelée Mongoose. Mongoose est responsable de tout le fonctionnement de la base de données MongoDB dans l'application ou une application Node.js. Alors installons cette bibliothèque qui s'appelle Mongoose. Je vais taper ici npm installer mongoose. Et comme chaque bibliothèque, nous avons besoin de créer une constante. Appelons ça la mangouste. Et ce Mongo, on peut dire qu'il faut Mongols. Nous pouvons supposer que cette chose ici est comme l'importation. Donc, nous importons chaque bibliothèque et la stockons dans une constante. Normalement, nous ajoutons la connexion à la base de données avant de démarrer le serveur. Donc ici, je vais dire Mongoose, point connecter et déconnecter. Il demande des URI. Uris/chaîne de connexion. Je peux l'obtenir de MongoDB Cloud. Nous avons vu précédemment comment se connecter au cloud de MongoDB et créer notre application et les clusters et notre projet. Et nous avons vu que nous avons plusieurs collections, ou nous pouvons dire des bases de données. Et ces bases de données, nous y aurons accès via notre application. Voyons donc comment nous pouvons nous connecter à ces bases de données dans des clusters. Si je retourne aux clusters, je vois ici un bouton qui indique Connect. Quand je dis se connecter, je peux utiliser plusieurs options de MongoDB. Par exemple, ce dont nous avons besoin est de connecter votre application. Nous devons donc utiliser une chaîne de connexion pour l'obtenir d' ici et la coller dans notre méthode de connexion avec de Mongoose. Donc, en cliquant sur cette option, nous allons obtenir une chaîne de connexion. Copions-le et mettons-le dans notre application. Donc, j'apporte des citations ici et copie cette chaîne de connexion. Mais nous ne pouvons pas voir qu'il dit que cette chaîne de connexion devrait contenir un nom d'utilisateur, un mot de passe et un nom de base de données. Mais d'où je ne peux pas obtenir cette information est simplement dans MongoDB Cloud. Nous pouvons utiliser un utilisateur spécifique pour se connecter à ces bases de données. Nous avons juste besoin d'aller à l'accès à la base de données et de créer un nouvel utilisateur. Et cet utilisateur, nous pouvons nous connecter à la base de données dans le Cloud. Donc, nous allons cliquer ici, ajouter un nouvel utilisateur de base de données. Et donnons-lui un nom d'utilisateur, E utilisateur pointu et le mot de passe, vous avez la liberté de sélectionner n'importe quel mot de passe. Par exemple, je mets de un à sept. Il a dit que le mot de passe est fourni est très faible. Alors ajoutons quelques lettres à cela. Et puis il a ajouté avec succès l'utilisateur. Pour revenir à notre chaîne de connexion, nous devons remplacer ces données ici. Donc, d'abord, je vais mettre ici le nom d'utilisateur, l'utilisateur e-Sharp, et le mot de passe que j'avais avant, et le nom de la base de données. Ok, on n'a pas encore cette base. Alors ajoutons un. On retourne aux grappes. Et puis nous pouvons voir ici nos collections. Et dans cette liste de collections que j'ai précédemment, je peux créer une nouvelle base de données. Donc, je vais lui donner un nom E-Sharp, que la base et le même nom pour la collection. Retour a pris cette chaîne de connexion. Nous pouvons maintenant ajouter un nom de base de données. Donc maintenant, nous avons la chaîne de connexion complète. Nous avons déjà parlé des variables d'environnement. Donc, stockons cette chaîne dans les variables d'environnement, donc je la copie. Et puis je crée, par exemple, une variable, appelle chaîne de connexion. Et puis je lui donne cette valeur, qui est la chaîne que j'ai obtenue du nuage de base de données. Et ici, je dis juste variable d' environnement point de processus , point, connexion, chaîne. Alors maintenant comment nous pouvons vérifier que nous sommes connectés à la base de données ou non. Si nous vérifions cette méthode Connect, nous remarquerons qu'elle renvoie une promesse. La promesse est normalement exécutée et elle renvoie deux méthodes. L' un est alors quand ses succès et l'autre avec l'erreur quand il échoue. Donc ici, je vais mettre alors. Et puis si je fonction flèche et que je consigne un message par console, cette connexion à la base de données est prête. Et quand il échoue sur capture. Et c'est aussi la méthode de la flèche. Nous pouvons dire que la console consigne l'erreur. Essayons de démarrer notre serveur. Alors maintenant npm commence. Et nous voyons qu'il y a des notifications disant que l'avertissement de dépréciation. Il dit que l'analyseur de chaîne d'URL actuel est obsolète. Nous devons donc utiliser une variable spécifique. Nous devons donc utiliser une option spécifique comme un vrai pour faire disparaître cette dépréciation. Mais comment nous pouvons l'utiliser, nous voyons que cette méthode de connexion a un autre paramètre appelé options. Donc, avec ces options est un objet où je peux passer les options que je veux. Alors copions celui-ci. Ajouté en option. Nous avons également un autre avertissement de dépréciation qui est l'utilisation de la topologie unifiée. Ceci est également utilisé pour la recherche des serveurs. Alors ajoutons ça ici. Et sauvegardons. Nous recevons toujours des erreurs. En fait, l'erreur que nous devons passer aussi le nom de la base de données dans les options. Donc, je peux dire que c'est un mot réservé, il s'appelle nom DB. Et avec ce nom TB, je peux passer le nom de la base de données. Nous avons nommé notre base de données dans le Cloud comme e-shop que la base. Et après avoir enregistré et essayé de se reconnecter, nous voyons à nouveau que l'authentification a échoué. Dans MongoDB Atlas, vous devez donner un axe réseau. Donc, cet accès réseau, vous devez avoir une liste blanche d'adresses IP qui peuvent accéder à votre base de données. J' ai déjà deux IP. Je peux ajouter une autre adresse IP en allant, par exemple, à Google et en tapant simplement ce qui est mon IP. Et dans le premier résultat de recherche, je vais obtenir mon adresse IP directement. Donc, je vais ici, copier cette adresse IP, puis je dis ajouter la nouvelle adresse IP. Donc, cette adresse IP est ajoutée, je peux dire mon bureau à domicile. Et puis je clique sur Confirmer. Revenons à l'application. Nous pouvons voir si nous sommes en mesure de nous connecter ou non. Donc on peut appuyer à nouveau sur Enregistrer. Et nous voyons ici que le serveur est en cours d'exécution, mais nous n'avons pas encore reçu de réponse du serveur de base de données. Et nous voyons que la connexion à la base de données est prête. Ainsi, nous connectons le problème de l'application back-end à la base de données dans le Cloud. La partie suivante, nous allons voir comment écrire des données cette base de données en utilisant nos API que nous avons créées auparavant. 14. Utiliser MongoDB Atlas: Bien sûr, il existe aussi un outil local pour naviguer dans la base de données de MongoDB. Vous n'avez pas à utiliser notre cours en ligne. Vous pouvez également télécharger un outil qui a plus, plus de fonctionnalités comme nous le verrons plus tard, comme l'exportation et l'importation de données. Parce que je veux vous donner les fichiers et les données et la base de données que j' ai créée pour ne pas être pris la peine de remplir vos données ou base de données par les vôtres. Vous aurez les fichiers prêts. Vous pouvez donc utiliser cet outil pour importer comme les bases de données et les tables et les documents dans votre base de données. Avec cette conférence, il y a un lien attaché pour et quelque chose appelé MongoDB Compass. Et c'est un très excellent outil pour parcourir la base de données MongoDB. Et il est disponible pour toutes les versions de systèmes d'exploitation. Aussi, comme pour Windows, pour un Ponto, et aussi pour Mac OS. Donc, après avoir téléchargé ce lien, il vous donnera une application que vous pouvez utiliser. Et cette application, vous pouvez l'installer sur vos applications, puis vous pouvez l'ouvrir. Ok, ouvrons l'application installée. Comme je le montre ici, je l'ai ici dans ma liste d'applications, dans mon système Mac. Et il va ajouter pour moi la boussole MongoDB. Comme vous le voyez ici, nous l'initialisons. Donc c'est l'initialisation. Et laissez-moi zoomer un peu comme Donne qu'il soit plus grand. Donc maintenant, il me demande d'ajouter une chaîne de connexion, que nous avons créée dans la conférence précédente afin que je puisse aller copier ma chaîne de connexion, puis collé ici, puis cliquez sur Connecter. J' ai déjà expliqué comment obtenir le nom d'utilisateur, le mot de passe, et aussi le nom de la base de données. Donc, je l'ai déjà fait. Donc c'est récent. J' ai ici l'utilisateur e-shop et aussi MongoDB et toutes ces informations entre elle. Donc maintenant, nous devons cliquer sur Connect. Et puis il va se connecter à ma base de données. Comme vous le voyez, j'ai répertorié tout mon cluster, qui sont que j'ai dans l'atlas. Nous avons donc toutes les bases de données que j'ai créées précédemment. Et aussi la base de données avec laquelle nous allons travailler. Vous avez donc deux options. Peut-être que vous pouvez utiliser MongoDB Atlas ou MongoDB Compass, composés MongoDB. Vous n'avez pas besoin de regarder dans le navigateur et regarder dans le site Web de MongoDB Atlas. Mais vous pouvez entendre utiliser localement. Il suffit d'ouvrir une application, ajouter votre chaîne de connexion, et elle sera toujours enregistrée ici. Dans ce cours, je vais utiliser MongoDB Atlas. Et quand nous allons pour le déploiement, je vais utiliser MongoDB Compass parce que nous devons importer et exporter des données. Et aussi. Dans la prochaine conférence plus tard, je vais vous montrer comment importer et semer votre base de données. Vous n'avez pas à remplir toutes ces informations manuellement, comme la base de données. Ainsi, vous aurez déjà la base de données que vous pouvez importer dans votre collection et ensuite vous pouvez l'utiliser. J' aime suivre leur cours. 15. Lisez des données d'écriture sur la base de données de API: Parfait, Donc je suis tellement heureux maintenant que nous avons une connexion réussie à la base de données, essayons maintenant de poster quelques données dans la base de données afin que nous puissions les voir dans le Cloud MongoDB. Dans la base de données relationnelle. Auparavant, nous avons vu que la relation entre les tables, mais ici en MongoDB, il est acquérir différent. Nous pouvons considérer que la table de nommage est une collection. Donc, comme nous le voyons ici, nous avons déjà une base de données. A l'intérieur de cette base de données, il y a une collection. Donc, nous pouvons dire que la collection est une table dans la base de données relationnelle. J' ai supprimé la base de données que nous avons créée auparavant. Je vais en créer un nouveau avec la table, appelons-le un produit. Donc, par exemple, nous avons dit que notre nom de base de données est e-shop. Base de données. Produits est le nom de la collection. J' ai donc la base de données. Chaque base de données et à l'intérieur il y a une table ou une collection. On peut appeler ça un produit. Ok, super. Donc maintenant, nous avons, disons cette collection, posons des données dans cette collection. Donc, dans Postman, comme nous l'avons vu avant, nous avons ici à cet objet, poussons dans cette base de données. Mais d'abord, ce que nous devons faire dans l'application Node.JS, nous devons créer un modèle avec Mongoose. modèle est la même chose qu'une collection. Donc, nous pouvons dire dans MongoDB, il s'appelle collection et dans Node.JS, c'est appelé modèle. Nous devons donc créer un modèle de produit. Ce modèle contiendra les colonnes dont nous avions besoin pour le produit. Par exemple, le nom ou l'image, ou par exemple, la quantité du produit dans le stockage en Mongoose. C' est ce qu'on appelle schéma. Et si nous allons là-bas à la documentation, nous voyons que Mongoose a beaucoup de flexibilité ici. Nous pouvons donc créer des schémas. Par exemple, le schéma de bloc comme nous le voyons ici. Et nous pouvons mettre le titre du champ, l'auteur, le corps, et il y a le type de celui-ci, et chaque champ a quelques options. Ainsi, vous pouvez spécifier, par exemple, point de date. Maintenant, par exemple, nous sommes dans cet enregistrement ou ce document est créé, alors nous verrons qu'il prend automatiquement la date de l'heure actuelle. Alors commençons simple. Donc, nous allons d'abord créer le modèle de produit. Je vais à l'application et après, disons utiliser et avant les API. Je crée, par exemple, à constante, appelle schéma de produit. Et ce schéma de produit utilisera la bibliothèque et le schéma Mongoose. Et le schéma acceptant un objet et cet objet prendra les champs comme nous l'avons vu ici dans la documentation. Donc, nous avons un nouveau schéma et ici nous pouvons lister nos champs. Alors ajoutons nos champs que nous avions auparavant. Alors je dis que j'ai besoin du nom. Nous tapons est chaîne. Et par exemple, j'ai aussi besoin d'image. Quel type également chaîne. Il contiendrait l'URL de l'image. Et ajoutons aussi quelque chose comme compter en stock. Compter en stock. Et ce compte en stock sera un nombre. Il y a beaucoup de types. Vous pouvez vérifier la documentation de la mangouste et nous verrons dans le cours les différents types que nous utiliserons pour notre application de boutique en ligne. Après avoir ce schéma, nous devons créer le modèle. Donc, je dis produit constant. Normalement, les modèles commencent par lettre majuscule. Donc, nous pouvons dire produit, qui est le modèle de dot mongoose. Et le modèle appelé, ou la collection est appelée produit. Et en utilisant le schéma de produit que nous avions avant ici. Donc, je dis schéma de produit, et j'appuie sur Enregistrer. Maintenant, nous avons le schéma de produit et le modèle de produit déjà défini. Donc maintenant, nous devons, par exemple, avec des demandes de publication, nous devons recevoir ces données de poste de l'extrémité frontale, qui est que nous pouvons dire facteur ou toute autre application comme Angular ou React. Ensuite, nous devons recevoir ces données par le back-end, les analyser et les pousser dans la base de données. Pour ce faire, nous devons d'abord créer un nouveau produit, par exemple, de ce modèle. Alors faisons ça. On peut dire const product. Et ce produit est nouveau produit que nous avions auparavant. Mais quels sont les domaines de ce produit ? Donc le produit est ce modèle que nous avions avant. Et nous allons ajouter les champs de ce produit, comme le nom. Et l'image et le compte en stock. J' irai donc ici et je recevrai cette demande, que j'ai reçue. Avec cette demande, j'ai le corps. Et avec le corps dans le corps, j'envoie ici id, nom, image, et je peux envoyer aussi compter en stock. Ce sera exactement le même nom ici, qui vient de l'extrémité frontale. Ainsi, le frontal et le backend doivent s'entendre sur le même nom pour les champs et l'objet qui sont envoyés au backend. Donc ici, je dis que le nom est le corps du point de requête, le nom du point. L' image est le corps du point de requête, l'image du point. nombre en stock provient également du nombre de points du corps de la demande en stock. Maintenant, nous avons le modèle prêt, donc nous avons juste besoin de l'enregistrer dans la base de données. Donc, pour ce faire, nous pouvons dire point de produit. Et il a une méthode appelée Enregistrer. Sauver. Cela signifie que l'enregistrer dans la base de données. Si nous vérifions cette méthode de sauvegarde, elle renvoie une promesse, promesse avec le document. Donc on peut dire, alors ça revient une promesse. Donc, nous pouvons dire produit créé. Donc, c'est le produit après qu'il a été créé dans la base de données. Donc c'est notre propre méthode. Donc, nous pouvons dire ici, l'état du point de réponse, que c'est la connexion réussie ou la création réussie de la base de données du document. Donc, je peux dire ici point JSON. Donc, je veux retourner le produit créé pour le voir dans l'extrémité frontale. Et en cas d'erreur ou quoi que ce soit peut arriver, nous pouvons dire attraper l'erreur. Et cette erreur, nous pouvons dire l'état du point de réponse. Par exemple, 500. C' est le code de réponse pour les erreurs dans le HTTP dot JSON. Je crée, par exemple, mon propre objet. Je dis que l'erreur est l'erreur que j'ai eue. Et par exemple, je dis que si son succès ou non, peut-être que je peux utiliser cette variable dans le front end. Par exemple, pour mettre fin à un chargement ou revenir à la page d'accueil. S' il y a un échec. Nous envoyons déjà ce produit. Supprimons cette partie ici et commençons notre MPM backend, commencez. Nous l'avons maintenant prêt et la connexion est prête. Postons quelques données ici. Joli. C' est vanté, on a une pièce d'identité, un nom, une image. Donc, si nous allons à notre collection dans MongoDB, Appuyons sur Refresh ici. On a les mêmes données ici. Essayons à nouveau en ajoutant le nombre en stock. Dites par exemple, 500 pièces dans mon stock. Je l'envoie. J' ai créé un nouveau produit avec le même nom, et il renvoie l'ID du produit créé. Pour revenir à MongoDB, actualisez à nouveau. Joli. J' ai également deux produits déjà postés via mon API dans le back-end. Et nous remarquons ici que c'est verrouillé et réussi. Faisons une erreur. Par exemple, pour faire une erreur, faisons ce champ comme nécessaire. Donc, la base de données reconnaîtra que ce nombre dans Stoke est obligatoire champ. Donc, il répondra avec erreur que vous n'avez pas envoyé, par exemple, le nombre en stock. Pour ce faire, nous revenons au schéma et nous le changeons en un objet. Le type de cet objet est le nombre et obligatoire est vrai. Alors sauvegardons et exécutons notre, encore une fois notre API, mais sans compter en stock. Et si nous validons le JSON et envoyons à nouveau, nous verrons que nous avons reçu une erreur, erreur et réussi, faux ou échoué. Donc, dans ce cas, je dirais que l'erreur est validation ou le nombre de chemin d'erreur en stock est requis. Donc, la base de données m'a répondu que ce champ est obligatoire. Quand je le fais à nouveau, son succès. Donc maintenant, nous avons posté une donnée sur le back-end. Créons une requête get. Donc, je veux obtenir ces données, afficher leurs informations de produit dans le front end, par exemple. Donc, pour ce faire, nous devons créer une demande get. Donc, la création d'une requête GET simplement nous changeons ceci pour obtenir. Et nous devons spécifier la liste des produits. Donc, par exemple, nous allons obtenir l'ancienne liste de produits. Et si j'envoie la demande, je reçois l'ancienne API que nous avions auparavant. Donc, changeons-le pour l'avoir à partir de la base de données. Pour ce faire, nous allons à la demande get, puis nous remplacons cette constante et l'appelons, par exemple, cette liste. Et j'appelle juste le modèle lui-même que nous avons créé avant et trouver. C' est ça. Donc, je dis const liste de produits et la réponse obtiendra notre, envoyez-moi la liste des produits. Essayons ça. Nous montons. Nous remarquons que nous avons une erreur ici. L' erreur est due au fait que cette méthode find renvoie une promesse. Et ici, quand j'envoie la réponse, peut-être que cette liste de produits n'est pas encore prête et je ne l'ai pas encore reçue. Je dois donc attendre que cette liste de produits soit prête, puis je peux l'envoyer avec la réponse. Il y a une autre façon que de faire, par exemple, point puis et ne pas attraper. C' est quelque chose que nous pouvons faire avec le mot-clé wait. Et dans le mot-clé wait, il nécessite toujours la méthode asynchrone. Donc j'ai mis cette méthode ici et c'est asynchrone, et j'ai un poids ici. Donc, dans ce cas, quand j'appelle la liste des produits, alors il va attendre, il sera rempli, puis j'envoie la réponse à l'extrémité frontale. Alors refaisons-le. Maintenant. J' enregistre et puis envoie cette demande, nous voyons que nous avons les données ici. On n'a plus eu l'erreur. Donc c'est à cause de cela que nous rendons une promesse. Nous devrions attendre que la base de données nous envoie leur réponse, puis nous attendrons en première ligne. Alors peut-être que vous me demanderez comment je peux détecter le problème ou les problèmes. C' est très simple. Je peux dire si une liste de produits ou pas de liste de produits, s'il n'y a pas de liste de produits, alors je peux dire l'état de point de réponse 500. Et par exemple, avec JSON, je peux dire erreur ou succès false. Donc, s'il y a une erreur qui s'est produite, par exemple, une connexion ou quoi que ce soit, je peux simplement renvoyer une erreur avec un succès si cette liste est vide. Nous avons donc deux façons différentes d'exprimer et d'attraper les erreurs de la base de données. Donc, je peux dire ici, trouver, je peux mettre un poids et asynchrone, ou je peux le faire avec des promesses normales. Comme par exemple, je dis Enregistrer, point puis et attraper. Bien sûr, c'est plus d'économie de code. Nous l'avons fait seulement en deux lignes, et c'est très bien. Donc, à partir de maintenant, nous allons utiliser toujours async et attendre. C' est tout pour l'instant, c'est la mangouste. Faisons un peu de refactoring. C' est très agréable d'avoir les routes dans certains fichiers et les modèles dans un autre fichier. Ainsi, nous pouvons avoir plus d'organisation de notre code, du backend. 16. Analyser la base de données de boutique E: Bienvenue de retour. J' ai changé d'avis ici, donc nous ne ferons pas de refactoring. Analysons d'abord la base de données de e-shop. Donc, de cette façon, nous pouvons savoir quelles routes et quels schémas nous pouvons construire et créer les fichiers dans le back-end. Donc, ici, nous avons le moins des tableaux documents ou des collections dont nous avons besoin dans notre base de données. Chaque boutique a des produits, des commandes, des catégories, des utilisateurs et des articles de commande. C' est la boutique en ligne la plus simple. Donc, lorsque vous voulez grandir plus, vous devez avoir plus de tables comme un avis ou par exemple, certaines nouvelles catégories sont des catégories plus grandes. Donc, nous commençons simple et nous allons construire notre e-shop pour être plus grand lentement. Tout d'abord, les produits, par exemple, il a ID, qui est l'ID du produit. Et cet ID est généré lorsque nous publions un ID dans la base de données automatiquement par MongoDB. Le nom du produit, ainsi que la description. Et la description atteint la scription est utilisée pour, par exemple, je veux stocker du code HTML. Parfois, les gens utilisent comme une description des produits avec des images et des titres et quelques textes compliqués de portée. Donc, nous allons voir comment nous aurons éditeur dans le front end. Pour HTML. Nous avons également besoin de l'image principale du produit. Et c'est une chaîne, chaîne, qui stockera l'URL de cette image. Aussi, nous avons besoin d'une galerie de, une galerie aura quelques images et tableau de chaînes, d'URL où nous avons une galerie du produit, plus de détails sur le produit. Et puis nous aurons une marque et aussi le prix, prix de la catégorie de produits. Ce sera la catégorie de type. Dans MongoDB. Ici, nous aurons quelque chose appelé références. Ce n'est pas comme les bases de données relationnelles, mais ici nous pouvons définir le type de la table directement. Donc, comme nous le verrons à l'avenir, nous verrons que cette catégorie est un type de catégorie ou a une référence à la table des catégories. Et compter en stock combien d'articles de ce produit sont dans le stockage. Note également basée sur les commentaires et si ce produit est en vedette ou non. Donc, pour le voir dans la page d'accueil immédiatement comme un produit vedette. Et puis nous verrons que ce qu'ils, ce produit est créé quatre catégories. On a juste besoin d'un nom, peut-être des données supplémentaires. Par exemple, ce dont j'ai besoin dans le front end, parfois la couleur, afin que je puisse colorer chaque catégorie en fonction d'une couleur spécifique et aussi icône ou image. Pour les commandes, nous avons besoin d'articles de commande, qui est un tableau d'article de commande. Et l'article de commande est une table où il contient le produit et la quantité. Ainsi, chaque commande aura un produit et la quantité. Alors peut-être que j'aurai 10 produits. Je les ai commandés dans un ordre. Et puis chaque produit aura une certaine quantité. L' adresse d'expédition un et l'adresse deux. Et la ville, le code postal, le pays, numéro de téléphone de l'état de l'utilisateur pour voir si cet ordre de naissance est, par exemple, plié, expédié ou livré. Et aussi le prix total. Nous verrons comment calculer le prix total en fonction des articles de la commande et de l'utilisateur qui a commandé cette commande. Parce que nous aurons la recherche de tous les utilisateurs qui veulent commander quelque chose. Et puis la date de l'ordre. Pour les utilisateurs. Nous avons besoin d'un nom d'ID, e-mail, où l'utilisateur se connectera avec son e-mail et le hachage du mot de passe. Le mot de passe doit être stocké haché dans la base de données. Je ne peux pas le stocker en texte brut. Rue, appartement, ville et code postal. Et aussi pays avec un numéro de téléphone. Et aussi pour savoir si cet utilisateur est admin. Ainsi, il peut se connecter au, par exemple, panneau d'administration ou non. Peut-être que quelqu'un demandera pourquoi j'ai séparé ici l'adresse de l'utilisateur. Comme par exemple, je peux avoir une table supplémentaire comme adresse ici. Alors je peux mettre ce champ dans cette table. Et je peux relier l'utilisateur et les ordres à cette table d'adresses. En fait, la plupart d'Aesop a un problème que parfois l'utilisateur, après avoir commandé quelque chose, il a changé d'adresse. Mais la commande est déjà expédiée. Nous avons donc besoin de stocker la commande comme un avion avec une adresse d'expédition, comment l'utilisateur l'a placé, pas liée à l'adresse de l'utilisateur. Nous utiliserons cette adresse juste pour remplir automatiquement adresse de la commande lorsque l'utilisateur commande quelque chose après avoir verrouillé. De cette façon, nous avons pris un aperçu de notre base de données dans MongoDB. Maintenant, nous allons aller au backend et créer les fichiers et refactoriser notre code un peu pour être basé sur cette structure de base de données. 17. Créer des chemins de API de backend et des schèmes de planification de backend: Bienvenue de retour. J'imagine maintenant que si nous plaçons tous les schémas ici dans ce fichier App.js, ce serait très grand. Et je pense que nous aurons des milliers de lignes ici. Donc normalement dans Node.JS, les gens ou les codeurs en général, ils mettent ces routes, par exemple, les routes API, et aussi les schémas dans des fichiers séparés. Pour, faisons cela maintenant et nous allons voir comment organiser le projet de meilleure façon. Ainsi, les schémas. Créons un dossier ici. On appelle ça des modèles. Et à l'intérieur modal, nous allons créer un fichier pour chaque modèle que nous avons, par exemple, des produits ou des produits dot js. Dans les produits AS je vais placer ce schéma. Copions cette partie et placez-la ici. Mongoose n'est pas défini dans ce fichier, donc nous devons également copier cette partie où const mongoose nécessite mongoose parce que ce fichier ne peut pas voir le Mongoose importé dans le app.js. Donc, nous avons ici const mongoose et mongoose schéma. Et au fait, prenons aussi le bosse. Bien qu'on le coupe et on le place ici. Maintenant, comment ArcJS utilisera ce modèle dans Node.JS. Si nous voulons exporter une constante ou par exemple, une classe ou un objet, nous disons simplement que nous devons le faire de cette façon. Exporte le produit point, puis le modèle. Donc ici, dans ce cas, le produit sera vu dans n'importe quel autre fichier. Et je peux l'importer avec la méthode require. Donc, aller au fichier ab.js et je dis produit const, qui vient de l'exiger de ce fichier où nous avons le modèle, par exemple, les modèles slash produit. Dans ce cas, nous avons obtenu le produit et nous pouvons l'utiliser comme modèle pour notre API. Faisons plus de refactoring. Nous voyons que nous avons toutes les API, obtenir post, GET post. Donc si nous faisons ça pour tous les schémas, ce serait très gros fichier. Il y a un moyen dans Node.JS que vous pouvez également stocker les routes ou les API dans un fichier séparé. Je vais vous montrer comment le faire. Alors commençons par créer un dossier Word, des routeurs de sécheresse. Et à l'intérieur du routeur, je crée aussi des produits, le js. Donc, pour chaque modèle, il y a peut-être des routeurs. En Express. Il y a quelque chose appelé routeur, et ce routeur est uniquement responsable de la création d'API, du blocage des API et de les importer et de les exporter entre les fichiers. Alors, comment faire ça ? abord, nous devons importer l'Express. Exiger Express. Et le routeur fera partie d'Express. Donc, nous pouvons dire routeur point Express. Donc, ce routeur, quand je l'importe dans ArcJS, je peux l'utiliser ici. Et ce routeur, il peut être utilisé comme un middleware, donc je peux l'utiliser avec l'utilisation de l'application. Alors d'abord, passons, voyons comment déplacer ces routeurs. Donc, d'abord, copions toutes les API que nous avions et placez-les ici. Au lieu de l'application. Je dis juste routeur. C' est très simple. Et aussi je les supprime d'ici. Et comme nous l'avons dit jusqu'à la 2s est, il peut utiliser aussi que l'extérieur. Ainsi, nous pouvons prendre la route principale de l'API des produits et placer ici, par exemple, le routeur de produit. Mais d'où ces produits routeur viendra, il viendra d'ici. Donc, je ne peux pas dire que je veux exporter aussi le routeur. Donc, je peux aller ici et dire que les exportations de points de module sont routeurs. Donc, nous avons ici une façon différente d'exporter. Ici, nous exportons le produit lui-même, et ici nous exportons un module. Donc, de cette façon, je peux dire que le routeur de produits est une constante. Donc on peut dire ici, constant. Routeur de produits provenant, nécessitent, de routeurs. Et puis les produits. Donc, nous allons voir ici que cette application utilise ces routes à partir de routes qui viennent de routeur produits. Donc ici, nous devons faire quelque chose. Nous ne pouvons pas utiliser l'API comme ceci, car sinon ce sera, nous pouvons considérer cela comme les enfants. Donc, par exemple, ici, je dois placer seulement la barre oblique afin que je puisse le considérer quand je dis localhost 3000 produits slash, alors je peux atteindre celui-ci, obtenir. Et la même chose pour le poste. Si je veux quelque chose à l'avenir comme count, je le mets comme ceci, alors l'API sera http 3000 produits slash nombre. C' est donc la meilleure façon de gérer ces sorties dans un fichier séparé. Mais d'abord, nous avons ici le produit modèle. Nous devons donc également importer ce modèle. Donc, je dis const, produit est nécessaire à partir des modèles du produit. Maintenant, nous avons les routes terminées. Donc, nous avons tout obtenir post et nous verrons comment ajouter la suppression et la mise à jour. Sauvegardons ce fichier et enregistrez-le ici. Faites un peu plus d'organisation du code ici pour que nous n'en ayons plus besoin. Pour qu'on puisse entendre, disons les routeurs. Et ici, le routeur de produit, nous pouvons l'importer ici. Voyons maintenant si tout fonctionne bien, nous pouvons dire MPM, commencer. Tout est connecté et tout fonctionne comme de la fumée. La même chose. Nous allons aussi pour les autres collections de bases de données. Par exemple, je vais avoir ici commandes GS et aussi utilisateur et aussi la catégorie. Aussi la même chose pour les auteurs. J' aurai les mêmes fichiers. Donc, je suis sûr que vous n'êtes pas intéressé de voir tout le processus parce que c'est exactement la même chose. Je vais les ajouter. Et puis nous verrons après cela comment ils ressemblent à la fin, notre application ressemble à ça. Dans app.js. Nous avons les middlewares, les routes, ainsi que la connexion de base de données et le vendeur. Dans les routes. J' ai créé des itinéraires pour chaque type ou, ou pour chaque collection que nous avions dans notre application. Alors je vais ici et j'ai créé ça exactement comme les produits. Nous avons, les commandes des utilisateurs, les catégories. Et la même chose pour les schémas. Chaque schéma a son propre maintenant. Donc, dans ce cas, nous avons maintenant tout prêt pour créer nos API. Actuellement, je n'utilise que get dans tous les types. Je veux juste mentionner une chose. Lorsque nous exportons le modèle à partir des exportations point-produit de cette façon, pas de cette façon. Lorsque nous l'importons, nous devons l'importer en tant qu'objet. Donc ici, quand je vais aux produits, je l'importe comme ça. Dans ES6, nous avons cette destruction d'objet. Donc, ce modèle renvoie un objet. J' ai donc besoin de créer un nouvel objet et d'affecter tous les champs de cet objet à celui-ci. Donc, dans ce cas, je peux l'utiliser partout pour sûr qu'il n'y a aucun problème si vous utilisez de cette façon. La façon d'exporter le module directement. Essayons notre LPI. Maintenant. Je vais ici et je dis obtenir, J'ai la liste des produits. C' est tout pour l'instant. Pour les prochaines conférences, nous verrons comment remplir ces schémas et comment le connecter aux structures de notre base de données. Et nous verrons comment continuer à construire notre e-shop d'une meilleure manière. 18. Permettre de créer un CORS et pourquoi nous avons besoin: Si vous faites un front end et le développement back-end dans leur même temps. Je suis sûr que vous avez vu cette erreur. Cette erreur appelée Cross-Origin Resource Sharing, ce qui signifie dans un langage humain que application Node.JS ne peut faire confiance à aucune autre application. Donc, quand j'envoie des demandes de mon front end au backend, alors le back-end quand Lot me répond la même que je veux parce que c'est interdit. Il utilise un port différent, ce qui est totalement un domaine différent. Donc, dans mon application frontale, lorsque je crée un service pour appeler les API, alors j'obtiens cette erreur. Et dans Mozilla org, ils expliquent toutes les données ou tous les détails de ce cours. Donc, d'une manière ou d'une autre dans l'application NodeJS, nous devons activer ces cours. Comment nous pouvons permettre à n'importe quelle application de demander l'API à partir de mon serveur. Il y a une bibliothèque appelée cours. Nous pouvons l'utiliser pour permettre le cours pour n'importe quelle application. Donc, j'arrête le serveur et je dis npm installer cours. Après l'avoir installé, nous devons l'exiger et l'importer. Donc, ici, nous importons tout dans ArcJS. Donc, je dis cours const, exiger cours. Et pour activer le cours, c'est très simple avant tout, avant que l'application ne commence, avant d'utiliser n'importe quel service dans l'application, nous devons faire, n'utilisez pas de cœurs. Et les options de point d'application. Avec Star, comme tout. En utilisant le cours. Options de point de cette application. Cela signifie que c'est un type de requêtes HTTP, comme GET et post and put and delete. Mais qu'est-ce que c'est ? Lorsque nous Google options http, nous voyons que l'option HTTP est une méthode demande options de communication autorisées pour une URL donnée au serveur. Donc, quand je dis, je veux une étoile, donc je vais tout permettre avec l'utilisation de ce cours. Donc, dans ce cas, j'autorise toutes les autres requêtes HTTP à passer à partir de n'importe quelle autre origine. Il est donc très important d'utiliser ce cours et de leur permettre d'éviter cette erreur. Enfin, après avoir terminé ce module ou cette section, je dirais que ce projet est le démarrage pour nous pour créer le problème de back-end. Donc, je vais le mettre comme un fichier zip afin que vous puissiez le télécharger et commencer à partir d'ici. Vous pouvez voir ce projet dans les ressources avec cette conférence. Dans les modules suivants, nous verrons comment construire tous les schémas et les API pour chaque partie de l'application. 19. Backend : Produits et catégories: Bienvenue dans la troisième section de ce cours. Nous allons avoir une introduction sur la façon de commencer par le back-end. Qu' est-ce qu'un backend ? Dans l'ingénierie logicielle, les termes front-end et back-end font référence à une séparation des préoccupations entre la couche de présentation et la couche d'accès aux données. Ainsi, toute application web et application mobile est considérée comme un front end. backend est la partie où je détiens des données. Encore une fois, une base de données ou un serveur de fichiers. Et le serveur lui-même peut être considéré comme un back-end. Alors faisons-le comme ça. L' interface affiche les données et le backend détient ces données dans un endroit sécurisé appelé serveur. Nous devons en quelque sorte gérer ces données qui sont stockées dans le serveur et les servir au client. Et en utilisant certains langages de programmation comme Java, SQL, et aussi pas GS, ce que nous allons faire dans ce cours, pour envoyer ces données au client d'une belle manière, pour les rendre en HTML, CSS, et Bibliothèques JavaScript. Donc, dans la prochaine conférence, nous verrons comment le frontal peut communiquer avec le backend pour saisir ces données, qui est appelé API RESTful. 20. Schema de modèles de produits: Bienvenue de retour. Dans cette conférence, nous allons voir comment construire le modèle de produit ou le schéma de produit. Tout dans Mongoose commence par le schéma. Chaque schéma est mappé à une collection MongoDB et définit la forme du document dans cette collection. Donc, en fonction du modèle que vous voyez à droite de l'écran, nous allons construire le même schéma que nous le construisons auparavant dans ce modèle. Donc, les champs du produit peuvent être comme commencer ici, je dis que le type de ce champ est une chaîne. Et il y a des options de schéma ou des options de type de schéma. Cette option de type de schéma, vous pouvez les voir sur la documentation Mongoose. Alors je vais ici à la documentation de Mongoose. Je vais aux types de schéma. Et dans les types de schéma, nous pouvons voir qu'il existe de nombreux types. Par exemple, chaîne, nombre, date, et il y a quelque chose appelé options, comme nous le voyons ici dans cet exemple. Donc, je vais, par exemple, au type de schéma, et je vois qu'il y a un chemin et des options dans la documentation Options de type de schéma, je peux voir toutes les options dont j'ai besoin pour construire mon schéma. Ce dont nous avons besoin en fait pour notre cours, je pense que nous avons besoin de ce champ requis et aussi quelque chose appelé href pour faire référence à une autre table et par défaut, qui est une valeur par défaut lorsque l'objet est créé du produit. Le nom du produit est donc toujours requis. Je l'ai mis à vrai. Le champ suivant est la description, qui sera une brève description du produit. Et ce sera aussi une chaîne. Est-il nécessaire ? Je dirais que la brève description sera nécessaire dans notre cas. Et puis passons à la riche description. Dans la description riche est également a une chaîne de type. Mais je dirais que ce n'est pas nécessaire. Et nous pouvons mettre une valeur par défaut pour cela quand il est créé. Par exemple, je dis chaîne vide. La même chose vaut pour l'image. Donc, je mets dire ici aussi, l'image est une chaîne et il a une valeur par défaut comme vide. Maintenant, nous allons aux images. Images. Ils sont toujours un tableau de chaînes. Donc, nous pouvons le mettre simplement comme ce tableau. Et le type de chaque élément de ce tableau est une chaîne. Nous avons aussi la marque, qui est sera la même chose. Chaîne et prix. Donc, le prix sera dans la façon dont le type est le nombre. Et la valeur par défaut. On peut dire qu'il est 0. L' étape suivante maintenant, nous devons ajouter la catégorie. Donc c'est simple. Nous disons que la catégorie est le type d'ID de la catégorie. Donc, ici dans le produit, quand je veux ajouter un produit, j'utilise l'ID de catégorie, pas toute la catégorie. Donc, je dis que le lien entre la table et du produit et la table de catégorie est l'ID de la catégorie. Donc, le type de ce champ sera le schéma de points Mongoose, types de points, l'ID d'objet point. Donc, dans ce cas, je dois toujours passer l'identifiant et comment je dirais que cet ID est connecté à une table de catégories ou à un schéma de catégories. C' est juste que je fais ça. Je dis qu'une référence est le schéma de catégorie. Donc, dans ce cas, cet ID sera connecté au schéma de catégorie. Donc, lorsque j'ajoute un produit, c'est la recherche dans les catégories et je ramasse un identifiant spécifique. Et puis je dis que ce produit a une catégorie, par exemple, la beauté et la santé. Est-ce que c'est nécessaire ? Oui, ajoutons-le au besoin. Le prochain champ que nous faisons Nous avons déjà est compté en stock. Compter en stock, Il est normalement un nombre et nécessaire. Vous devez donc spécifier la quantité de ce produit que vous avez dans votre stockage. Il y a aussi une autre propriété que nous pouvons mettre max et Min. Par exemple, je dis que minimum a 0 et maximum. Il en a 255, par exemple. Donc, je dis ici que quand je poste un produit avec moins de nombre de nombre en stock, alors je vais obtenir une erreur parce que mongoose, quand il s'est tourné vers moi et me dire que, non, c'est faux. Vous devez mettre le nombre entre 0 et 255. La même chose va, par exemple, pour la notation et aussi un certain nombre de commentaires. Ce sont des chiffres. Donc je les ai ajoutés ici. Et le champ est en vedette est de type booléen. Donc, la valeur par défaut de celui-ci est false. Il s'agit donc de montrer le produit sur la page d'accueil en tant que produit en vedette. En outre, j'ai la date du champ créée. Donc, les données créées sont une date de type et la valeur par défaut est date point maintenant, donc c'est très simple. Donc, quand le produit ou cette demande arrive, alors cela prendra l'heure actuelle. Maintenant, nous avons tout le schéma sont prêts pour leur produit et nous verrons plus tard comment ajouter le produit dans les demandes de poste et comment l'obtenir. 21. Modèle et schéma de catégories: Auparavant, nous avons créé le schéma de catégorie. Et comme vous le voyez ici dans le modèle à droite de l'écran, nous devons créer ces champs. Alors commençons par le nom. C' est exactement la même chose que nous avons fait pour le produit. Donc, je dis type de chaîne nécessaire à travers. Donc, pour ne pas prendre autant de temps à taper, je vais ajouter les autres champs car ils ont aussi le type de chaîne. Donc, ici, nous avons l'icône et la couleur. L' icône sera le nom de l'icône par exemple, nous utilisons des icônes de police ou des icônes de matériel Google. Donc, je ne peux dire que le nom de l'icône. Et aussi je dis ici la couleur, cette couleur sera un hachage, une chaîne de hachage, comme quelque chose comme je peux dire 000 000 000, qui est noir. Donc, de cette façon, je peux stocker la couleur de la catégorie que j'ai besoin d'afficher à l'avant. Commençons donc maintenant avec la création de l'API de la catégorie. Dans la prochaine conférence, nous allons voir comment ajouter la catégorie et supprimé. 22. Ajouter et supprimer des catégories: Super. Alors, revenons au monde réel. Maintenant, nous allons avoir l'API de catégorie. Donc, dans cette conférence, nous saurons comment ajouter une catégorie et supprimer une catégorie. J' ai commencé simple ici parce que l'API de catégorie est la plus simple que nous verrons à l'avenir. Comment créer des API plus compliquées, comme les produits et les commandes. Donc, comme vous vous en souvenez avant de créer les itinéraires et les itinéraires, nous ajoutons nos API. Nous avons ici un GET, nous allons l'éditer pour faire mieux ou nous pouvons le garder pour obtenir la liste des produits. Maintenant, ajoutons une catégorie. Donc, en créant un point de routeur. Donc, je vais ajouter une catégorie, donc par barre oblique, puis asynchrone, requête et réponse. Ensuite, je vais faire ici l'ajout à la base de données en utilisant Mongoose et en ajoutant une nouvelle catégorie. Nous avons vu avant que la demande toujours obtenir les informations à partir du front, comment l'utilisateur envoie les informations. Et puis nous allons les lire et les poster dans la base de données. Créons, par exemple, une constante, nous pouvons l'appeler ou laisser la catégorie. Et ce sera un nouveau modèle de catégorie. Donc, cette catégorie, nous l'avons déjà importé ici. Et nous aurons l'objet de cette catégorie sera nom et aussi l'icône et la couleur, exactement comme le schéma. Alors comment j'obtiendrais ces données ? Donc, demandez le point, le corps, le nom du point. Donc le front end doit m'envoyer exactement ce nom. Donc aussi la même chose vaut pour la demande point, icône, point ou désolé, point, corps, icône point. Aussi pour la couleur. Nous ajoutons ici. La couleur. Si vous vous souvenez, lorsque nous avons posté un produit ici, nous avions quelque chose comme sauver. Donc, je dis le modèle dot save, et puis cette sauvegarde me rendra une promesse. Et puis je reviens avec le statut qui a créé les produits. Et nous avons parlé auparavant aussi d'attente et asynchrone. Alors faisons-le maintenant avec un poids et asynchrone. Donc, en utilisant un poids et un évier, je dis catégorie, que je l'ai créé avant. Je peux dire que notre poids de la catégorie, que j'ai créé dot save. Donc, dans ce cas, j'attends que cela soit sauvé. Et cette sauvegarde me reviendra une promesse avec le document ou la catégorie elle-même qui est créée. Et puis je vérifie s'il n'y a pas de catégorie, comme aucune catégorie créée. Ensuite, je dis erreur de retour. Donc, l'état du point de réponse dira 400 quatre. Par exemple, les points se terminent. Que la réponse, par exemple, ou la catégorie ne peut pas être créée. Par exemple. Et puis s'il y a une catégorie, alors je dis que les points de réponse terminent la catégorie. C' est très simple. En résumé, je crée un nouveau modèle de catégorie, puis je l'ai rempli avec des données. Je l'ai sauvegardé en utilisant Mongos et puis j'attendais ici jusqu'à ce que cette catégorie soit prête. Et puis je vérifie s'il y a une catégorie, il y a des données à l'intérieur de cette catégorie, puis je l'envoie. Mais si ce n'est pas le cas, je retourne une erreur. Commençons notre serveur maintenant. Mpm démarre connecté à la base de données. Tout va bien. Et j'utilise Facteur. Facteur par exemple, j'ai créé cette catégorie. J' ai dit que le nom est la santé et l'icône est la santé de l'icône et une certaine couleur. Je l'envoie et je vois qu'il est posté avec succès. Et j'ai un nouvel identifiant de cette catégorie pour vérifier si ça marche vraiment. Nous allons à nouveau à Atlas et vérifions dans la base de données. Je vais ici et je l'ai déjà trouvé. Alors créons une autre catégorie. Par exemple, comme les ordinateurs. Et cet ordinateur a icône ordinateur et une couleur spécifique à l'extrémité frontale, vous pouvez créer un ramassage de couleur. Ramassage de couleur. Nous vous attribuerons le code de la couleur. Par exemple, je dis 444, et je l'envoie et j'en ai créé un nouveau. Je vais à Atlas. Et dites « rafraichir ». Et nous verrons que cette catégorie est également ajoutée ici. Donc, nous avons des ordinateurs et la santé. Supprimons maintenant une catégorie. La suppression d'une catégorie est la même. Donc, nous ne pouvons pas dire point de routeur, supprimer, pas poster. Et je dis cela que je veux assigner pour supprimer une catégorie. Et puis je dis demande et réponse comme un rappel. Et j'utiliserais cette demande et cette réponse. Faisons-le ici avec le moyen de promesse. Nous l'avons fait avant avec un poids et asynchrone. Faisons-le ici avec un moyen prometteur. Donc d'abord, j'appelle le modèle, je dis point de catégorie. Il existe une méthode appelée find by ID and remove. Donc, nous trouvons un ID par et le supprimerons la même chose avec trouver par ID et supprimer. Donc ici, j'ai besoin de trouver la catégorie que je veux supprimer. Donc par carte d'identité. Donc, d'où je vais obtenir l'ID, je vais obtenir l'ID de l'utilisateur ou du client. Donc, le client m'enverra l'ID d' une manière ou d'une autre, puis je le trouverai dans la base de données et supprimé. Alors, comment puis-je obtenir l'ID du client ? Il y a un moyen, c'est très bon moyen. C' est à travers l'URL. Donc je ne peux pas dire ici par deux points et ensuite je peux dire par carte d'identité. Donc, cet ID, vous pouvez le mettre comme vous voulez, comme n'importe quel nom que vous voulez. Ensuite, l'URL ressemblera à api slash v1 slash l'ID, que je veux supprimer de la catégorie. Alors ici, comment je vais obtenir cet ID à partir de l'URL. C' est très simple. Je dis la requête dot params dot id. Donc ici ce nom est le même nom que, comme je l'ai assigné ici. Donc, par exemple, je dis catégorie id. I, alors je dois mettre ici l'ID de catégorie. Donc, avant de voir que nous avons demandé le corps. Le corps est quand nous envoyons la demande à l'intérieur du corps. Donc, ici, nous avons corps et nous envoyons dans le corps de la demande, les données. Mais maintenant, nous allons les envoyer ou nous allons envoyer l'ID par l'URL. Donc, comme nous le voyons ici, que cette méthode nous reviendra une promesse. Donc, je dirai alors et puis la promesse va retourner pour moi un document et le document qui est la catégorie supprimée. Donc, je dis ici, s'il y a une catégorie, comme si vous la trouvez, alors retournez un point de réponse, point d' état ou désolé, 200 et point JSON. Et je peux créer mon propre objet. Je peux dire que le succès est vrai et un message à l'utilisateur. Donc je ne peux pas lui dire que la catégorie est supprimée. Et puis s'il n'y a pas de catégorie, quand je ne trouve pas cette catégorie d'autre, je dis retour, état du point de réponse. Le code introuvable est 404. Et le JSON, je dis succès, faux. Donc, je n'ai pas trouvé cette catégorie et rien n'est supprimé. Donc, je peux dire dans la catégorie de message introuvable. Mais que faire s'il y a une erreur qui s'est produite dans le serveur ? Par exemple, pas à propos de ne pas trouver cette catégorie, mais une erreur, comme une erreur de connexion ou si j'achète les données erronées, un mauvais ID. Donc, je ne peux pas dire ça avec l'erreur de capture. Je dis que s'il vous plaît trouver pour moi ou envoyez-moi un message qu'il y a une erreur qui s'est produite dans le serveur. En général, il ne s'agit pas de catégorie trouvée ou de catégorie introuvable. Donc ici, je dis réponse retour, état point. L' erreur en général est 400. Donc JSON. Et puis je dis que le succès est faux. Et puis je peux envoyer l'erreur au frontal à l'utilisateur. Alors maintenant testons cette API, la suppression de la catégorie. Créons un et supprimé en démarrant à nouveau le serveur. Mpm commence. Nous sommes connectés à cette base de données. Ensuite, nous allons créer, par exemple, nouvel ordinateur de catégorie par exemple. Ouais, ce nom, on le garde le même. Et je copie cette catégorie. Et puis je change cette méthode pour supprimer. Donc ici, je dis après les catégories, je dis l'ID de la catégorie que je veux supprimer. Et puis j'appuie sur Envoyer. La catégorie Nice est supprimée. Si nous obtenons à nouveau la liste des catégories, si vous voulez, vous pouvez voir ici l'historique de ce que vous avez fait auparavant. Donc, nous allons obtenir une liste de catégories. Nous avons encore l'ancienne catégorie qui mauvaise santé qui a supprimé aussi. Donc, je peux aller ici et dire supprimer cet ID. Et puis si je retourne chercher, j'aurais un tableau vide. Donc nous n'avons pas de catégorie. Maintenant, essayons de supprimer introuvable ID. Par exemple, je peux dire 444 ici. Donc, quand je l'envoie, je reçois succès fausse catégorie introuvable. C' est bien. C'est exactement le message que nous voulions. Et aussi, faisons une erreur. Normalement, si vous voulez faire une erreur en supprimant l'ID de catégorie similaire ou d'objet ID a ce format dans MongoDB. Changeons ces formats. Par exemple, je le fais court comme ça. Donc quand j'envoie, je reçois ici l'erreur. Donc, l'erreur est 400, puis je dis que le succès tombe et l'erreur s'est produite. Il s'agit de l'ID d'objet car il est mal formaté. Vous avez ici ce choix à faire entre les méthodes asynchrones et wait ou avec alors. Donc, les promesses, ils peuvent être dans les deux sens. Tu n'as aucune différence. Mais ici aussi est plus guidé et voici un code plus court. Dans la prochaine conférence, nous allons voir comment obtenir la liste des catégories et aussi une seule catégorie. 23. Obtenez des catégories et des détails de catégorie: Dans cette conférence, nous allons obtenir la liste des catégories et catégories détaillées. Donc, d'abord, nous allons faire la liste des catégories. Nous l'avons déjà fait dans les conférences précédentes. Donc ici, j'utilise getMethod et ensuite j'utilise find. Avec l'utilisation de cette méthode, je vais obtenir la liste des catégories. Et s'il y a une liste de catégories, alors je vais obtenir, je l'enverrai par réponse. Et s'il n'y a rien, alors j'enverrai une erreur. Éditons, éditons ici. Et nous pouvons dire état 2s 200 que nous avons trouvé la liste des catégories. Maintenant, obtenons une catégorie par ID. Donc je vais dire ici ou modifier. Aussi c'est la requête GET. Donc, ce get acceptera la même API mais avec paramètre comme nous l'avons vu auparavant. Donc, j'utiliserais ici la méthode asynchrone, requête, réponse, fonction de rôle. Et puis je vais faire une catégorie constante. Et ici, j'utiliserais la méthode wait. Donc, je vais faire ici appelé la catégorie. Et il y a la méthode appelée find par ID. Donc, en utilisant cette méthode, je vais demander l'id de l'ID de point params de la requête. Et je vais vérifier s'il n'y a pas de catégorie, puis envoyer la réponse incorrecte ou erreur. S' il y a une catégorie, Alors je l'enverrai avec cette réponse. Donc ici, je l'ai fait rapidement. S' il n'y a pas de catégorie , envoyez la réponse 500. Message à l'utilisateur indiquant que la catégorie avec l'ID donné n'a pas été trouvée. Et s'il y a une catégorie, alors je l'enverrai avec cette réponse. Testez ça avec Facteur. Donc, la liste des catégories est la version API une des catégories barre oblique et une demande get que j'envoie, mais je n'ai aucune catégorie. Ajoutons un. J' ai la demande de poste ici, et j'ai déjà le corps à celui-ci. Et ajoutons un autre comme la santé. Santé. C' est la fin. Nous devons donc maintenant revenir à la requête GET. Appelez-le à nouveau, j'ai deux demandes ou deux catégories. Obtenons cette catégorie uniquement par ID. Donc, je vais passer juste l'ID après l'URL. Je vais cliquer sur Envoyer. Et j'ai eu la catégorie détaillée ici dans ma demande d'API. 24. Catégorie de mise à jour: Bienvenue de retour. Maintenant, mettons-nous à jour la catégorie. Mise à jour de la catégorie signifie que nous allons mettre à jour soit le nom, la couleur ou l'icône. Les requêtes HTTP pour ce faire sont appelées Realtor dot put. Donc nous avons mis, je peux mettre à jour les données dans la base de données. Mais ici, c'est mélange entre obtenir les params et obtenir le corps, les params. Nous l'utiliserons pour obtenir l'ID du produit ou la catégorie que nous voulons mettre à jour. Et puis dans cette réponse ou le corps de la demande, Nous le ferons. Nous obtiendrons les données qui sont mises à jour. Donc, de la même façon ici, requête asynchrone et la réponse seront une méthode ROM. Et puis je vais constante la catégorie dans une variable. Et puis je dirai attendre pour la catégorie et trouver par ID et mise à jour. Donc, je peux trouver le produit, puis notre catégorie, puis je le mets à jour. Donc, le premier paramètre de cette méthode est le point de requête powerapps dot ID. Donc, je dois passer l'ID, que j'ai obtenu de l'utilisateur. Et le deuxième paramètre est l'objet où contient les données mises à jour. Donc, la catégorie a un nom et une icône et une couleur. Donc, les obtenir à partir du corps de point de requête, nom de point. La même chose, exactement comme nous avons posté une nouvelle catégorie. Donc je vais le faire ici. Donc, si je reçois la catégorie, alors tout va bien et tout a été mis à jour. Si ce n'est pas le cas, il y a une erreur. Je vais donc mettre en œuvre cette logique. C' est exactement la même façon que nous l'avons dans le post. Donc, je vais copier la même chose et le mettre ici. Donc j'ai enregistré connecté à la base de données, et c'est l'état avec Postman. Nous avons donc ici la liste des catégories que nous avons créées auparavant. Maintenant, prenons cet ID et changeons cette méthode à un put. Et puis je passe la carte d'identité que j'ai. Et le corps sera différent. Par exemple, ici, nous avons l'ordinateur éléphant ordinateurs 11. Changeons-le, par exemple, pour élire par phonique. Et l'icône sera la même électronique, et la couleur est 55 quand j'envoie. Donc, ce que j'ai ici, c'est les anciennes données dans Node.JS. Il y a une option si vous voulez récupérer les anciennes données que vous envoyez, ou par exemple, qui était l'original de la catégorie ou les données actuelles que vous mettez à jour. Parce que si nous allons ici et appuyez sur get, nous verrons dans notre liste les données mises à jour. On aura ici, l'électronique. Mais ici, dans la requête PUT, nous avons renvoyé les anciennes données. Donc, dans ce cas, dans Node.JS, vous devez passer un paramètre à la recherche par ID et mise à jour, qui est appelé est l'objet bien sûr, et vous pouvez dire un nouveau passage. Donc ici, cela signifie que je veux retourner les nouvelles données mises à jour. Sauvegardons-le et essayons-le à nouveau. Alors on va au port. Par exemple, changeons-le à une autre chose, par exemple, la beauté. Et là, j'ai dit Beauty. Et je clique, puis j'ai obtenu les données mises à jour. Si je dis encore ici avec la liste, j'ai toutes les données mises à jour. 25. Publiez un nouveau API REST de produits: Donc, dans cette conférence, nous allons voir comment poster un nouveau produit. Comme travailler avec des catégories. Nous allons également publier un nouveau produit. Nous avons donc juste besoin de collecter les champs, les mêmes champs qui sont envoyés par le front end. Puis ajoutez-les en tant que modèle de produit, puis enregistrez-les dans la base de données. Auparavant, nous avons fait cette partie. Alors refactorisons-le et réalisons-le avec notre modèle et avec notre base de données. Alors créons notre copie les champs que nous avions dans le modèle. Donc ici, je sens déjà les champs de ne pas prendre autant de temps à les remplir. Ils sont tous pareils. Ils viennent tous du corps. Réduisons aussi ici le code afin que nous puissions utiliser async et attendre. Donc ici, je vais ajouter async. Et puis nous allons vers le bas. Et nous disons, nous avons, par exemple, produit est égal à attendre et le produit que nous avons créé le modèle de produit dot save. Donc, nous avons ici maintenant le nouveau produit est créé après l'avoir sauvegardé. Supprimons donc cette partie. Et nous disons ici, s'il n'y a pas de produit, puis retourné en réponse, lecode d' état est 400 ou 500, que c'est comme une code d' état est 400 ou 500, erreur de serveur interne. Puis envoyez un message indiquant que le produit ne peut pas être créé. Et si tout se passe bien, retournez le produit. Qu' est-ce qui est spécial ici ? La chose spéciale ici que vous pouvez poster le produit facilement, mais que faire si l'utilisateur ou l'avant et le centre sur la mauvaise catégorie ? Donc, par exemple, si j'ai un ID de catégorie et que l'utilisateur a créé l'ID de lui-même, et que cet identifiant de la catégorie n'existe nulle part dans la base de données. Donc, nous allons d'abord valider s'il y a une catégorie existe ou savoir. Pour faire ça. Nous pouvons la même chose, nous pouvons faire, catégorie const. Et dans cette catégorie, nous disons attendre un nouveau modèle de catégorie. Et trouver par ID. On l'a vu avant. Donc, je dis requête corps point, catégorie point. Donc, le frontal de la catégorie enverra l'ID de la catégorie que je veux ajouter au produit. Donc, ici, s'il n'y a pas de catégorie, puis retourner l'état du point de réponse, par exemple , 400, que l'utilisateur a fait une erreur et qu'il envoie une catégorie non valide. Donc, en général, nous avons tous les champs et l'utilisateur doit envoyer la catégorie. Si tout est valide, il va continuer et ajouter leur produit normalement. Essayons ça avec Facteur. Donc, je vais à Postman et je crée une nouvelle API. Et le lien sera le même. Http et les catégories, pas les catégories. Nous avons besoin de produits. Donc stylo je pense que maintenant on peut ajouter le corps ici. Et ce pote sera la ligne de type. Et cette ligne n'est pas du texte, est JSON. Ainsi, l'extrémité frontale enverra le bloc adjacent au back-end. Donc, je l'ai déjà préparé à ne pas perdre de temps à taper ceci. J' ai donc le nom, la description et lire la description, l'image, la marque, le prix, la catégorie et la catégorie. J' ai obtenu la chaîne de la liste des catégories. Donc, si vous vous souvenez, nous avons deux catégories. J' en ai copié un et je l'ai ajouté ici. Et le stock de comptage est de 10. L' évaluation est pour pas tant de bon produit. Et des critiques. Le nombre de commentaires est 22. Et est-ce que c'est en vedette ? Oui, c'est vrai. Donc maintenant, lorsque j'envoie le produit, je recevrai la réponse du produit et avec un nouvel identifiant du produit. Vérifions la base de données Atlas. Voici Atlas et nous avons ici MongoDB, je recrée un rafraîchissement. Donc, nous voyons ici que le produit est déjà posté. Et nous remarquons que la catégorie a l'ID d'objet. Essayons maintenant d'envoyer une catégorie non valide. Donc, supprimons, par exemple ceci et faisons-le 80. Par exemple. Envoyez que j'ai une catégorie non valide. Et c'est os, c'est 400 mauvaise demande. Donc, la chose spéciale dans la publication d'un produit est seulement la façon dont nous l'avons lié à la catégorie. Vous devez donc valider chaque catégorie qui existe déjà dans la base de données, puis l'envoyer à la publication avec la publication du produit. De cette façon, vous aurez un produit valide qui est vraiment lié à une catégorie. 26. Obtenez un produit et la liste de produits REST API: Lorsque nous préparions notre API, nous avons fait une demande get pour une liste de produits. Donc, comme nous le voyons ici, la liste des produits est sauvegardée avec find. Et puis nous le retournons à l'avant que. Alors essayons ça avec nos changements. Avec Facteur. Je vois ici le produit, je change le poste pour obtenir. Et nous voyons que nous avons un tableau et une liste de produits. C' est très simple. Nous allons créer une requête GET uniquement pour un produit. Ce sera exactement le même que obtenir la liste des produits, comme nous l'avons vu auparavant. Nous avons juste besoin ici d'ajouter le paramètre ID. Et changeons ce nom en produit. Et maintenant, s'il y a un produit, alors s'il n'y a pas de produit, désolé. Donc, vous renvoyez une erreur. S' il existe un produit, envoyez-le à nouveau à l'interface frontale ou à l'API. Mais ce que nous devons changer ici n'est pas très bien, mais trouver par ID. Et l'ID, comme nous l'avons vu précédemment, vient de la requête regardé par les paramètres ou, désolé point parce que nous avons les paramètres dans l'ID de point URL. Sauvegardons et essayons. Maintenant. Je copie, par exemple, un des ID que j'ai ici pour les produits, et je l'ai mis ici après le produit. J' ai donc la carte d'identité ici. Et je dis, je comprends, puis j'ai obtenu les détails du produit exactement comme ici. Je voudrais mentionner ici que, par exemple, dans la liste des produits, parfois si j'ai une grande liste de produits, je n'ai pas à envoyer toutes les données. Par exemple, si je veux que le frontal affiche uniquement le nom et l'image du produit. Donc, je crée une API spécifique qui ne renvoie que la liste des noms et des images des produits. Essayons ça maintenant. Donc toujours, après que nous avons trouvé ici, trouver la méthode, si je clique sur point, alors je trouverai une méthode appelée select. Donc, c'est exactement comme sélectionner une requête. Donc, je peux passer ici quels champs je veux afficher. Donc, je dis par exemple, je n'ai besoin que du nom. Donc, disons ici le nom là-dedans, remuant et le sauver. Donc, ici, nous allons supprimer le produit unique et nous obtenons une liste. Et nous voyons ici, nous avons la liste des produits et seulement les noms si nous voulons, par exemple, le nom et l'image. Donc, je vais à cette chaîne et j'ajoute seulement de l'espace. Et puis le champ que je veux afficher, par exemple, je dis image, puis j'enregistre. Allons chez Facteur et nous aurions l'image et le nom. Nous remarquons ici qu'il y a ID, donc nous pouvons également exclure cet ID. Comment nous pouvons faire ça. Nous allons aussi à la même chaîne, et nous avons l'ID dans ce cas. Donc je peux dire moins la carte d'identité. Donc, quand j'appuie sur Enregistrer, je vais voir Postman, envoyer cette demande. J' ai maintenant une sélection propre. Ainsi, vous pouvez créer vos API avec plus de performances et plus efficaces. Donc, vous n'avez pas d'obstacles dans les mémoires pour charger le client. Vous avez besoin d'une liste de produits. Envoyez ce dont vous avez besoin. Vous pouvez donc créer une API spéciale pour cela. Vous pouvez donc envoyer ce que vous voulez via cette API. 27. Afficher les détails de catégorie dans le produit Populate: Donc, comme nous l'avons vu précédemment, que nous obtenons un seul produit de cette façon. Donc, mais le champ de catégorie est seulement l'ID. Si je veux, par exemple, afficher le produit avec le nom de la catégorie. J' ai donc, par exemple, le détail du produit, mais je veux aussi montrer leur nom. Donc, ce n'est pas agréable d'aller et d'obtenir une autre demande pour la catégorie, puis de fusionner ces deux demandes ensemble et de montrer au front ce dont j'ai besoin. Il y a une très belle façon de le faire dans MongoDB et Mongoose. Donc, après avoir trouvé par la méthode ID, quand j'appuie sur point, je les vois MSO il y a remplissage. Remplir signifie que tout ID ou champ connecté à une autre table sera affiché sous forme de détail dans ce champ. Donc quel champ est a, par exemple, ID, qui est lié à une autre table, comme nous l'avons vu précédemment dans le schéma que nous avons ici, nous avons créé la catégorie est l'ID d'objet et la catégorie de référence. Donc, cette catégorie est en fait ID comme nous l'avons vu auparavant. Donc, je dis un remuant peupler. Catégorie. Je vais à Postman, puis je clique sur Envoyer. Je vois que j'ai eu les détails de la catégorie. Donc, ici de cette façon, lorsque je crée une requête GET pour un seul produit, je suppose que je suis dans une page de produit. J' envoie une demande pour obtenir le détail du produit, puis j'obtiens également le détail de la catégorie afin de pouvoir les afficher également dans la page du produit. Il fonctionne également avec la requête GET. Donc, ils obtiennent en général. Donc, si je veux ici avoir toutes les listes remplies, donc je dis juste remplir la catégorie de toutes les listes de produits. J' appuie sur Sauvegarder, allez au Facteur. Je reçois la liste des produits et les IC déjà remplis. Certains d'entre eux, ils ne sont pas connectés à une catégorie. Ils sont auparavant nous les avons créés. Donc, ici, par exemple, ce produit, il a une catégorie et il est connecté à une catégorie dans la base de données. Donc, en résumé, si quelqu'un vous demande comment je peux connecter des tables MongoDB ensemble comme une base de données relationnelle, je crée juste un champ dans la table d'origine. Et puis je dis dans ce champ que je veux un ID d'objet et il est référencé au schéma que j'ai créé pour l'autre table. Et puis quand je crée une requête GET, je dis remplir ce champ. Donc, ce champ doit être un ID, puis il remplira ce qui est lié à cette table. 28. Mise à jour d'une API de REST de produit: Maintenant, mettons-nous à jour notre produit. mise à jour d'un produit est exactement de la même façon que nous avons mis à jour une catégorie. Mais comme nous l'avons vu dans le post, nous avons seulement besoin de valider la catégorie. Bien que nous allions aux catégories, copions toute la requête PUT serait exactement la même. Et puis je vais au produit, j'ajoute la nouvelle route. Et ici, nous avons produit ou mis ID. Et puis nous ferons la même chose, ce que nous avons fait pour la catégorie. Alors changeons ceci en produit. Voici le produit, modèle de produit. Rechercher par ID et mettre à jour. Nous avons le périmètre demandé params ID et je vais obtenir les champs d'ici. Copiez-les de la même manière et collez-les ici. Donc, nous avons tous les champs du produit, nouveau. Oui, nous voulons retourner le nouveau produit. S' il n'y a pas de produit, envoyez une demande incorrecte ou une erreur de serveur interne, puis dites que le produit ne peut pas être optimiste. Et aussi, si tout va bien , renvoyez le nouveau produit. Nous manquons seulement maintenant la partie où nous aurions besoin de valider la catégorie. Donc encore ici, nous avons la même chose ici. Et puis je dis coller la catégorie de coût, et puis je demande la catégorie. Et si ce n'est pas une catégorie, envoyez une catégorie non valide à l'utilisateur. Essayons maintenant avec le Facteur. Je vais chez Facteur, copions ou nous avons déjà les champs ici. Pour que nous puissions changer ça, mettre. Et ici, je passe l'idée que je veux changer. Donc, je dis ici, par exemple, cet ID. Et puis changeons le produit en un nouveau. Et ici aussi description vous et Ford exemple. Mettons à jour le prix 32. Et c'est tout. Nous envoyons la demande de poste et nous avons eu une erreur ici que c'est une catégorie invalide. Alors faisons la bonne catégorie. Donc, nous allons ici à l'API catégories et ramasser la bonne et mise à jour ici. Et ils envoient, nous avons encore eu le nouveau produit. Donc, nous voyons ou entendons le produit nouveau et la description est en U et avec le nouveau prix. Donc la seule chose que nous avons fait ici que nous aussi, nous avons validé la catégorie. Donc, à l'avant, comme nous le verrons plus tard, que nous aurons Forum du produit. Donc, quand je clique sur Modifier, alors je vois les champs déjà remplis. Donc, je viens de mettre à jour les champs dont j'ai besoin, puis j'envoie cette demande à nouveau. Vérifions aussi la base de données si tout est mis à jour. Et puis je reçois la liste des produits. Et je vois ici le produit a une nouvelle description et un nouveau nom. Et bien sûr aussi alors votre prix. 29. Supprimer un API REST de produit: La suppression d'un produit est également la même façon que nous avons supprimé une catégorie. Mais ici, je veux mentionner un point qui est très important pour valider notre API. Copions d'abord aussi que supprimer les demandes des catégories. Je vais prendre celui-ci et ensuite le coller ici dans l'API de produit ou les itinéraires de produit. Nous remplaçons tout au produit. Tout est remplacé. Donc, nous avons maintenant tous les États. Et essayons-le maintenant. Prenons une liste de produits. Will obtenir nous avons tous ces produits. Retirons les anciens parce qu'ils sont vides. Ainsi, nous pouvons sélectionner l'un des ID, changer ceci pour supprimer, et envoyer cette demande. Maintenant passe à travers et le produit est supprimé. Ce que je veux mentionner ici est une chose très importante. Et si j'envoie une mauvaise carte d'identité comme celle-ci ? Je vais voir que je vais obtenir une erreur que l'ID de l'objet n'est pas valide. Nous devons donc également valider l'ID d'objet dans toutes les demandes. Donc, dans ce cas, nous avons attrapé une erreur. Mais ici, dans la requête PUT, cette requête, il n'y a aucune capture de l'erreur. Nous vérifions simplement si nous recevons un produit ou non. Mais ici, il vérifie l'identité, donc il va pendre d'une manière ou d'une autre. Donc, changeons cela à la requête PUT et faisons un problème dans le, dans l'ID. Par exemple, je supprime celui-ci, puis j' envoie une demande et je vois que le backend est suspendu. C' est pour ça que je préfère plus de cette façon, la façon de la promesse. Donc je peux toujours dire ce que je peux voir, ce que je peux obtenir et ce que je peux attraper. Mais si vous voulez garder cette façon, sorte que nous ne pouvons pas non plus valider seulement la catégorie. Nous pouvons valider l'ID. Comment peut-on faire ça ? L' ID doit être le type d'ID d'objet qui est stocké dans Mongoose. Donc ici, je vais commencer d'abord à faire une constante. Exiger la mangouste. Cette Mongoose constante. Il a une méthode où je peux l'utiliser dans la requête PUT. Donc, je ne peux pas dire que le point Mongoose est un ID d'objet valide, donc je peux passer alors l'ID de point de point params de requête. Donc, si cela est valide, alors je continue. Si ce n'est pas le cas, je retourne une réponse à propos de l'erreur. Donc, comme nous le voyons ici, cela revient un booléen. Alors mettons-le à l'intérieur d'un if. Donc je dis ici si Mongoose. Donc, je vais envoyer aussi une mauvaise demande de cette façon et je dis ID de produit non valide. Et dans ce cas, le produit ou l'API retournera pour moi une erreur lorsque je transmets ID. Essayons maintenant. Nous avons une mauvaise carte d'identité. Je vois que je n'ai renvoyé aucune erreur. C' est parce que j'ai dit si est valide puis retour erreur, donc je n'aurais pas dû être valide, donc j'ajoute pas. Alors revenons à nouveau et envoyons la demande à nouveau. Et je reçois l'erreur ID de produit non valide. 30. Obtenez des produits pour des objectifs de statistiques: Bienvenue de retour. Parfois, dans le panneau d'administration, je veux montrer à l'administrateur combien de produits j'ai dans la base de données. Donc, dans ce cas, je veux voir une API qui me donne tous les produits ou combien de produits j'ai dans la base de données. Donc, il ne retournera qu'un nombre. Mongoose a beaucoup de méthodes. Donc, en fonction de ces méthodes, vous pouvez renvoyer n'importe quelle requête que vous voulez avec une API. Par exemple, dans Mongoose, vous pouvez avoir à partir du produit modèle n'importe quelle méthode que vous souhaitez retourner. Ainsi, vous pouvez créer votre propre API en fonction de ce que Mongoose vous fournit. Je ne compterai pas les produits. Je veux le prix total de mes produits. Je veux, par exemple, total ou le prix des commandes, le total des ventes, toutes les statistiques que je veux avoir dans mon front end, par exemple, je veux avoir le panneau d'administration. Dans le futur. Je vais vous le montrer avec quelques statistiques. Donc, pour cela, vous devez créer une API, qui est obtenir normalement ce que vous voulez de la base de données. Alors ajoutons un nouveau ici, comme le point de routeur get. Ce serait GetMethod bien sûr. Et puis dites, par exemple, obtenir le nombre de slash. Donc, l'API sera après que les produits soient comptés. Donc, le deuxième paramètre, il sera le même que getMethod. Alors copions celui-ci de la même façon et changez la route là-bas. Donc, je dis get count, j'ai une réponse asynchrone et ici je dois changer en fonction de ce que Mongoose me donne. Donc, nous créons une constante, appelez ça le nombre de produits. Et ici, je supprimerais jusqu'à la fin et dire par exemple, il y a un ensemble de méthodes documents de comptage. Donc, je veux voir combien de documents dans ce modèle ou dans ce tableau. Donc, comptez les documents et puis il retournera le nombre ou comme un rappel. Et puis je dis juste de retourner le compte. Donc, je reçois le compte et je le rends. Et puis les documents de comptage ont été retournés pour moi, le nombre de produits. Donc, ici, je dis, s'il n'y a pas de nombre de produits et puis retourner une erreur à l'utilisateur, sinon, envoyer le nombre de produits. C' est ça. Normalement, nous retournons un JSON. Donc, par exemple, je dis ici, nombre de produits est un nombre de produits, ou par exemple, je dis que seul le nombre est le nombre de produits. Vous avez la liberté de choisir n'importe quel nom. Je préfère celui-là. Essayons que nous supposons homme, je vais à Postman et puis je dis produits GET méthode, obtenir compter. Et nous exécutons ça. Et nous voyons que le nombre de produits est de trois, donc c'est vraiment trois. Vérifions ça. Oui, j'ai 1, 2, 1, 3 1. C' est cool. Donc, nous pouvons maintenant montrer à l'administrateur quels produits ou combien de produits il a dans son discours. 31. Obtenez des produits de plats REST API: Une autre demande de statistiques peut être, par exemple, je veux les produits en vedette, comme comment nous voyons ici dans la page d'accueil de ce site. Nous voyons des produits en vedette qui sont toujours affichés sur la page d'accueil. Donc, précédemment dans le modèle de produits, nous avions quelque chose ou un domaine appelé est en vedette. Est présenté a une valeur booléenne comme true ou false. Cela signifie que ce produit doit être affiché sur la page d'accueil ou non. Maintenant, faisons une API pour obtenir uniquement les produits en vedette. Et pour le rendre plus complexe, nous pouvons avoir des comptes. Ainsi, par exemple, je peux obtenir trois produits en vedette ou trois derniers produits en vedette ou six derniers produits en vedette. Faisons-le maintenant. Donc, toute requête GET est comme commencer par router.get. Copions donc celui-ci et construisons notre API en vedette. Ou au lieu de compter, nous dirons obtenir des produits en vedette, par exemple. Donc, à Mongoose, nous devons trouver les produits en vedette. Seulement, pas tous les produits, seulement celui présenté. Donc, je dis ici, produits dot trouver. Et comme vous vous en souvenez, nous avons eu un peu de filtration. Nous venons d'en parler, mais nous verrons comment construire un filtre avec le produit. Donc de toute façon, donc maintenant je trouve qu'il accepte comme un objet et ensuite vous pouvez définir quels champs sont requis pour être la valeur. Donc, par exemple, je dis est présenté doit être un vrai. Donc, tous les produits qui a présenté à travers, alors je vais les obtenir. Donc ici tout reste le même est acte que l'objet. Donc ISA ici vient de revenir pour moi les produits. Donc, je dis ici produits, produits, produits. Maintenant vérifions ça avec Facteur. Je vais ici, je dis Get fonctionnalité. Donc, nous envoyons et nous avons obtenu un seul produit en vedette parce que nous n'avons qu'un seul produit en vedette dans notre API, donc dans notre base de données. Donc si nous vérifions ici, donc le premier a, est faux. Le second est également faux, mais le dernier est présenté. Ok, donc maintenant je ne veux pas sentir ma page d'accueil qui a présenté le produit par exemple, j'ai comme cette page par exemple, j'ai 200 produits de fonctionnalités. Donc, je ne vais pas seulement, par exemple, cinq produits. Pour ce faire, nous pouvons également mériter une certaine limitation de notre API en fonction de ce que l'utilisateur envoie. Par exemple, je peux ajouter ici, comme nous l'avons vu avant, nous pouvons ajouter n'importe quel paramètre comme avant, nous ajoutons un ID. Mais ici, nous pouvons ajouter le nombre par exemple. Et là, j'aurai ce compte. Count est égal à demander les paramètres car son paramètre et son nombre. Donc, s'il y a un nombre de points de requête ou demander un nombre de points de params de couple, si l'utilisateur passe quelque chose, alors obtenez-le. Si ce n'est pas le cas, retournez 0. Donc c'est comme si ici. Donc, s'il y a compte passé avec l'API, alors obtenez-le. Si ce n'est pas le cas, retournez 0. Donc ce nombre peut être cette valeur ou cette valeur. C' est exactement comme l'instruction IF. Alors comment nous allons utiliser ce compte ? C' est très simple. Après avoir trouvé ce que je veux, seul le produit en vedette, je dis nombre de limites. Essayons ça avec Facteur. Nous disons d'être en vedette. Et puis le compte que je veux par exemple trois, alors je vais envoyer cette demande. Nous ne le ferons pas, c'est qu'il est suspendu. Il y a donc une erreur. Vérifions quelle est l'erreur. L' erreur est de dire ici que le champ incapable d'analyser les produits de recherche est présenté par la limite de rejet trois, Return key false. Alors pourquoi ça se passe ? Champ limite doit être numérique, mais nous l'avons numérique ici. Parce que, parce que ici, ce nombre de points powerapps point de requête renvoie, comme vous le voyez ici, une chaîne. Et ce sera aussi une chaîne. Donc, nous avons ici une valeur de chaîne, pas un nombre, parce que limite demande un nombre. Donc, pour le changer facilement en un numéro, il suffit de placer un plus derrière cette boisson. Donc maintenant, après avoir sauvegardé et redémarré, le serveur, demande notre API. Nous obtiendrons le produit en vedette. 32. Filtrer et obtenir des produits par catégorie: Continuant avec le filtrage, Nous allons également filtrer par catégories. Ainsi, lorsque l'utilisateur sélectionne certaines catégories spécifiques, il obtiendra les produits qui sont dans cette catégorie. Et c'est un filtrage normal dans chaque atelier. Donc, nous devons en quelque sorte ajuster la requête GET ou obtenir demande de liste de produits pour avoir un filtrage par catégorie. Mais d'abord, je dois parler de quelque chose que nous avons vécu auparavant. Deux types de paramètres que nous pouvons envoyer au backend. Le premier est le paramètre URL. Ainsi, l'utilisateur peut envoyer n'importe quel ID après qu'ils, vous êtes malade ou dans le paramètre body. Donc on a un corps. Et à l'intérieur de ce corps il y a quelques paramètres, et aussi avec l'URL. Nous avons donc un autre type de transfert de valeurs au backend, qui est appelé paramètres de requête. Les paramètres de requête sont toujours utilisés. Dans ce cas, par exemple, j'ai URL API, URL localhost, puis je passe le paramètre de requête. Le paramètre API est passé comme ceci, donc je peux passer ici le numéro, mais le paramètre de requête va toujours après un point d'interrogation. Donc, je ne peux pas toujours dire que j'ai besoin ici d'une catégorie. Donc, comme nous l'avons vu auparavant, nous pouvons également filtrer dans la méthode find. Donc, après avoir passé le modèle et ensuite trouver, nous pouvons passer l'objet comme nous l'avons fait auparavant. Comme est présenté comme l'un des champs doit avoir cette valeur. Mais maintenant, faisons-le comme catégorie. Donc cette recherche, nous devons avoir la catégorie et avec un ID spécifique qui est passé par l'utilisateur. Mais comment nous pouvons en faire plusieurs valeurs, parce que ici je ne peux avoir qu'une seule valeur. C' est très simple. Vous pouvez simplement passer un tableau et automatiquement mongoose réalisera que toutes ces valeurs doivent être dans cette catégorie. Et puis cela retournera les bons produits qui ont ces meilleures catégories. Donc, je ne peux pas dire ici quelque chose comme ça, première catégorie et deuxième catégorie ID. Alors faisons-le ici comme quelque chose de différent. Donc, pour être plus différent. Donc maintenant, nous devons prendre en quelque sorte ce param de requête et le diviser en un tableau, puis le passer à cette recherche. Donc c'est très simple. Je dis s'il y a des catégories de points de requête, jquery, qui est celle-ci, alors stockons dans une certaine constante. Const, par exemple, filtre. Et ce filtre, nous aurons les catégories de requête point de requête de valeur. Et nous diviserons cette valeur. Donc nous le divisons par virgule. Donc, nous disons diviser, diviser la chaîne en fonction de la virgule, puis il reviendra pour moi aux éléments du tableau, qui est une chaîne et l'autre. Donc simplement, nous pouvons placer cette variable ici parce que nous l'avons divisée en tableau. Mais à cause de la portée en JavaScript, nous ne pouvons pas attribuer cette valeur ou utiliser la valeur hors de cela si, parce que d'autres champs ne peuvent pas la voir. Il est donc préférable de créer la variable ici et de la donner comme tableau vide. Et cette variable, je lui assigne la scission, et puis je l'utilise ici. Essayons ça avec Facteur. Alors je vais ici et j'ai essayé d'obtenir le produit. Je ne reçois rien parce que je forçais l'API à avoir une catégorie. Donc, quand il n'y a rien, alors il doit avoir une catégorie. Donc, nous allons avoir comme une façon plus dynamique. Je fais ça comme un objet vide. Et cet objet vide sera affecté et a la valeur quand il y a des paramètres et ou des paramètres de requête. Alors dis que je dis que la catégorie est ceci. Et puis ce filtre, je supprime tout cet objet et puis il sera passé à l'amende. Donc, quand il est vide, il n'y a rien. Donc, je vais obtenir toute la liste du produit. Et quand il y a des paramètres de requête, il serait rempli de catégorie, ce qui est notre condition, et il aura cette valeur de l'utilisateur. Essayons encore ça. Maintenant. J' envoie cette demande, gentil. J' ai eu tous les produits précédemment. J' ai créé certains produits, par exemple, le produit 1 et le produit 2 et le produit 3. Et ils ont de différentes catégories, par exemple, cette catégorie et cette catégorie. Donc je dis ici, catégories de points d'interrogation. Et la valeur de ces catégories. Prenons la première catégorie. Par exemple, celui-ci. Et j'envoie, et puis j'ai eu deux catégories ou deux produits. Donc, ces deux produits, ils appartiennent à cette catégorie. Ajoutons un autre. Par exemple, le second, en les fractionnant par une virgule. Alors je dis ici. Donc on en a 123. Le premier produit est de la deuxième catégorie, et les deux autres produits, ils appartiennent à la première catégorie. Et quand je ne passe rien, alors cela fonctionnera normalement pour obtenir toute la liste des produits. Donc, ici, l'utilisateur a la possibilité de passer les paramètres de requête ou non. Donc maintenant sur ma page d'accueil, je peux avoir, par exemple, quelques bannières qui affichent des produits spécifiques de catégories et aussi l'utilisateur quand il va sur la page produit, vous pouvez également filtrer ces produits par catégorie. Par exemple, ce sera quelque chose comme des cases à cocher ou par exemple, des pilules. Il peut donc cliquer dessus et sélectionner les catégories pour lesquelles vous souhaitez afficher les produits. 33. Modifier la touche « _id » par la touche de « id » - plus de fronts conviviaux: Lorsque je reçois un produit ou une liste de produits, Mongoose ou MongoDB envoie le champ avec le droit comment je les ai fait. Mais l'ID, il a un petit problème. Il a ce trait de soulignement. Je veux que l'ID soit seulement ID en tant que clé, donc je peux l'utiliser partout dans mes applications, pas seulement, par exemple, pour l'application que nous faisons dans ce cours. Donc, je peux utiliser ce backend avec d'autres applications qui acceptent généralement l'ID uniquement comme une clé. En quelque sorte. Mongoose, nous pouvons également copier cet ID et créer un champ appelé ID uniquement sans trait de soulignement. Alors, comment faire ça ? C' est ce qu'on appelle les virtuels. Donc, avec ce schéma de produit, que nous avons créé auparavant, nous pouvons toujours créer un identifiant virtuel. Et cet identifiant virtuel aura un get. Et ce get sera à partir de l'ID qui est passé dans le schéma du produit. Donc, c'est un moyen de le faire et de chaîne hexadécimale parce que nous avons des chaînes hexa pour l'ID, qui est appelé ID d'objet. Et puis nous devons activer une option pour le schéma de produit. Et dites que lorsque je veux envoyer une certaine valeur au frontal ou à l'API, nous activons les virtuels car il s'agit d'un champ virtuel. Donc, dans chaque schéma, nous pouvons ajouter ces deux ou quatre lignes ou deux méthodes. Et puis nous aurons la carte d'identité. Donc si nous essayons maintenant avec le Facteur, je peux envoyer. Et je dirai que j'aurai la pièce d'identité originale et la pièce d'identité que je veux. Donc centre commercial front end convivial, je peux utiliser cet ID directement sans ce trait de soulignement gênant. 34. Utilisateurs et authentication: Bienvenue dans un nouveau module. Dans ce module, nous allons apprendre comment faire l'authentification et créer l'API des utilisateurs. Nous allons obtenir rapidement des informations sur la façon de créer tout ce processus et comment sécuriser notre backend. Le concept qui est suivi dans chaque serveur ou serveur d'authentification est le suivant. abord, l'utilisateur se connecte en utilisant son ID ou son e-mail et son mot de passe. Et puis le serveur d'authentification lui répondra avec authentifié. S' il a les bonnes informations d'identification. Et gt, qui s'appelle JSON Web Token. Et ce jeton sera retourné à l'utilisateur. Ainsi, l'utilisateur peut l'utiliser pour obtenir les autres API comme les produits et les commandes. Et bien sûr, l'utilisateur n'a pas tous les droits pour faire ce qu'il veut avec le back-end. Nous pouvons donc faire la différence entre les administrateurs et les utilisateurs, mais ils sont dans la même table. Ainsi, certains utilisateurs auront la possibilité spéciale de créer des produits, créer des commandes, de supprimer ou de modifier l'état du produit, etc. Ainsi, lorsque l'utilisateur a ce jeton, il peut le transmettre avec n'importe quel appel d'API, par exemple, créant un produit au serveur et à l'API que nous avons créée précédemment. Et puis le serveur dira, Oui, vous êtes vérifié et vous pouvez faire l'appel API. Donc, ils utilisent ici ou le serveur ici, nous répondons soit avec authentifié, vous êtes. D' accord. Vous obtenez la réponse, vous obtenez ce que vous avez fait. Et aussi, s'il n'y a pas d'authentification, le serveur répond comme si vous n'étiez pas un utilisateur authentifié pour faire cet appel d'API. Donc, dans les prochaines conférences, nous allons voir les principales étapes comme suit. Donc, d'abord, nous allons jeter un oeil au modèle utilisateur et au schéma. Nous pouvons donc créer exactement le schéma dont nous avons besoin pour les utilisateurs. Exactement comment nous l'avons fait avant avec les produits. Et puis nous allons poster tous enregistrer un nouvel utilisateur avec une API de repos. Donc, quand nous avons un utilisateur dans notre e-Sharp, donc nous allons l'enregistrer et puis il peut faire ses commandes. Hachage du mot de passe de l'utilisateur. Bien sûr, nous ne allons pas enregistrer le mot de passe dans la base de données exactement à n'est-ce pas ? Donc, nous devons faire le mot de passe en quelque sorte est haché. Donc, s'il y a une attaque et que quelqu'un a dit une base de données, alors ils n'utiliseront pas à nouveau le mot de passe de l'utilisateur dans notre boutique en ligne. Ensuite, nous allons voir comment obtenir l'utilisateur et la liste pour obtenir la liste des utilisateurs, mais nous excluons le mot de passe. Nous allons donc apprendre à exclure des parties de nos API, puis à mettre à jour les données utilisateur avec et sans mot de passe. Donc, parfois, un utilisateur veut mettre à jour son profil. Donc je veux juste changer de nom, non ? Je veux changer d'adresse. Donc, je dis juste que je veux mettre à jour ces données, mais je ne veux pas mettre à jour mon mot de passe. Mais aussi quand j'ai oublié mon mot de passe, je peux le réinitialiser. Et puis dans ce cas, nous allons mettre à jour les données de l'utilisateur avec le mot de passe. Ensuite, nous allons passer à la partie importante où nous allons protéger les API. Ainsi, par exemple, aucun utilisateur n'est capable de créer un produit. Seulement l'administrateur. En outre, aucun utilisateur n'est capable de changer l'état de l'ordre, seulement les éléments. Nous allons donc voir comment protéger ces API. Ainsi, l'utilisateur ne peut envoyer de requête que s'il l'est, il est authentifié. Et puis voir comment regarder dans l'utilisateur après que nous avons créé cet utilisateur. Ainsi, la personne peut se connecter à la boutique et obtenir un jeton afin qu'il puisse l'utiliser pour obtenir un produit ou passer une commande. En outre, comme nous l'avons déjà dit, peut-être que le serveur peut répondre avec une erreur d'authentification. Donc, lorsque vous demandez une API et que vous n'êtes pas authentifié, vous obtiendrez une erreur. Nous verrons comment gérer cela. En outre, nous sommes seulement facture pour ajouter plus d'informations secrètes à l'utilisateur, donc à travers le jeton. Ainsi, nous pouvons également spécifier ou différencier entre les utilisateurs et les administrateurs. Donc, nous pouvons dire quelque chose comme est admin, mais où je peux cacher cette information. Parce que si je le mets en avion, alors tout le monde peut changer les données et dire, je suis administrateur et il ne peut pas y avoir accès. Mais ici, nous allons cacher le jeton de est admin à l'intérieur du jeton. Aussi à la fin pour les statistiques, comme nous le faisons toujours, nous obtenons le nombre d'utilisateurs ou le nombre de clients que nous avons dans notre boutique en ligne. C' est tout pour l'instant. Donc, allons et commençons avec le schéma de l'utilisateur. 35. Modèle de utilisateurs: Comme nous l'avions dans notre modèle d'utilisateur avant, nous voyons que nous avons besoin d'un nom, d'un e-mail et d'un mot de passe, etc. Donc, nous allons construire notre schéma d'utilisateurs exactement comment nous l'avons dans ce modèle. Sur la droite. Je les ai déjà écrites pour qu'on puisse les examiner rapidement. Et puis vous pouvez implémenter à partir du code que je vais télécharger dans les ressources. abord, le nom de l'utilisateur est une chaîne et il est obligatoire. Deuxièmement, l'e-mail est une chaîne et également vrai requis. Et aussi le hachage du mot de passe. Nous avons dit que nous allons enregistrer le mot de passe haché dans la base de données. Ce sera une chaîne et c'est nécessaire. Le numéro de téléphone de l'utilisateur sera également une chaîne ou un nombre. Et avec le vrai et c'est nécessaire. Ici, nous allons identifier l'utilisateur s'il est administrateur sur la boutique ou non. Donc, ce sera un booléen et la valeur par défaut est false. L' adresse qui sera utilisée pour l'expédition de la commande de l'utilisateur. Donc, nous pouvons utiliser une rue comme une chaîne, et la valeur par défaut est vide. L' appartement est également String. Le code postal est une chaîne, une ville et un pays. Et à la fin, nous avons un schéma utilisateur, comme nous l'avons fait précédemment avec les produits, nous avons créé un identifiant virtuel. Donc nous aurions une pièce d'identité de cette façon, pas de cette façon. Il est donc plus convivial pour l'utilisateur ou le front end. Ainsi, nous pouvons l'utiliser dans le front end comme un ID normal pour récupérer les données utilisateur ou identifier un utilisateur. Et ici, nous activons les virtuels pour le schéma. Et voici l'exportation normale du module et du schéma. Donc, tout est sur le schéma utilisateur. Nous allons maintenant créer un utilisateur ou un utilisateur enregistré dans notre boutique en ligne. 36. Enregistrer une nouvelle API REST d'utilisateur: Dans cette conférence, nous allons voir comment enregistrer ou poster un nouvel utilisateur comme n'importe quelle demande de poste. Nous pouvons également publier les données de l'utilisateur dans le corps de la demande, puis les soumettre à la base de données. Donc, pour le rendre rapide, Copions une de la demande de poste que nous avons avant, par exemple, la catégorie. Copions donc celui-ci, puis collez-le dans notre module de routes utilisateur et commençons à ajouter les demandes de corps basées sur le modèle que nous avions auparavant pour l'utilisateur. Donc nous allons sentir tous ces champs comme nous les avons obtenus de l'extrémité frontale comme d'habitude et les coller ici dans notre demande. Donc, tout d'abord, je vais ajuster ceci pour être utilisateur. Et ici, nous utiliserions le modèle utilisateur. Et puis j'attendrai pour enregistrer l'utilisateur. Et puis s'il n'y a pas d'utilisateur, puis répond avec l'erreur que l'utilisateur ne peut pas être créé ou enregistré. Alors ajoutons les champs dont nous avons besoin maintenant. Donc, je vais séparer ces deux écrans et ensuite j'ajouterai mes champs ici. Alors le nom, le même nom. Et l'e-mail sera un e-mail. Et voici l'e-mail du corps. Faisons vite pour le reste. Maintenant, notre nouveau modèle utilisateur ressemblera à ceci. Donc j'ai mis toutes les clés ou tous les champs, que je les ai obtenus du schéma. Et là, j'ai supposé que je recevais ça du corps de la demande. Donc, ce copain et la demande proviendront du facteur ou de l'avant. Comment nous verrons ensuite. Essayons ça avec un facteur maintenant. Donc, nous allons créer un objet, par exemple, et j'affecterai un utilisateur et un hachage de mot de passe et toutes ces informations dans cet objet. Alors, quelle sera l'itinéraire complet pour ça ? Ce sera la route de l'API, puis les utilisateurs. Pourquoi ? Parce que dans le app.js, nous avions avant, toutes les routes API sont définies ici. Je dis donc AP produits US, puis j'attribue les itinéraires de produits. Et puis ici, nous aurons des utilisateurs. Donc, dans notre API, nous allons utiliser les utilisateurs. Donc, en allant à l'extrémité frontale, Copions une des API que nous avions avant et collez-le ici. Et ici. Au lieu de produits, nous dirons les utilisateurs. C'est parfait. Alors ajoutons un post. Et puis dans le corps, nous allons ajouter une rangée. Et le type de cette ligne est JSON, car l'utilisateur enverra les données dans un format JSON. Et puis créons notre objet ici. Donc je dirais le nom, et j'attribue n'importe quel nom, par exemple, James, et la même chose pour le reste. Alors sentons-les. Donc, nous avons ici le hachage de mot de passe, le numéro de téléphone , l'administrateur, Oui ou non, appartement, code postal, ville et pays. Donc, dans ce cas, nous aurons un utilisateur qui a ces propriétés. Nous ne devrions pas mettre le mot de passe comme ça. Nous devons donc le hacher, comme nous le verrons dans la prochaine conférence. Donc je pose les données maintenant et j'ai toutes ces informations. Nous avons donc ici nom que nom d'utilisateur, et les données et toutes les informations que nous avons entrées. Et aussi l'API a répondu avec ID et ID de soulignement. Ainsi, l'utilisateur a créé dans la base de données. Vérifions notre base de données sur Atlas. Donc, quand nous allons à notre cluster et ensuite les collections, j'accède à notre base de données, qui est les utilisateurs ou la base de données e-shop et les utilisateurs de la table. Et nous verrons que l'utilisateur est créé ici. Je pense que j'ai manqué un champ qui n'est pas envoyé avec l'API, donc nous devons l'ajouter. Alors ajoutons ça ici, qui est la rue. Donc on en a mis trois aussi, et c'est 3s. Par exemple, 100. Je vais ajouter différents utilisateurs avec des noms différents pour sentir notre base de données. Donc, je dirai James, par exemple, je dirais Tom et Tom ici. Et le même mot de passe, Supposons qu'il a 777 ici et la même adresse par exemple. Et nous allons envoyer, envoyer. Nous aurons aussi la même chose que aussi un autre utilisateur comme Mike. Nous aurons ici, Mike petit m. et aussi la même information comme disons ici 88. Et le numéro de rue, par exemple, cinq, l'appartement est 4. Donc, dans ce cas, dans notre base de données, nous avions trois utilisateurs. Comme nous le verrons ici. Je rafraîchis la page. Et nous verrons ici que nous avons trois utilisateurs. 37. Hashing du mot de passe utilisateur: Enregistrer le mot de passe, dans ce cas comme un texte brut n'est pas sécurisé parce que si quelqu'un a obtenu notre base de données, il verra la liste de tous les mots de passe de tous les utilisateurs dans notre base de données. Donc, il vaut mieux en quelque sorte le hacher ou encodé en quelque sorte afin que tout le monde ne puisse pas comprendre ce qui est, le vrai mot de passe derrière ce hachage ou il est codage. Pour ce faire, il y a une bibliothèque, elle est fournie par NodeJS. Ça s'appelle décrypter les js. Nous pouvons l'installer ici dans une nouvelle fenêtre. Donc MPM installer être saisi JS. Et je vais installer cette bibliothèque, puis l'importer dans mon application. Donc, je dirais causé, être saisi et exiger déchiffrer JS. Alors comment nous allons utiliser cette bibliothèque ? Donc, je ne demanderai pas à l'utilisateur ou au frontal un hachage de mot de passe. Je vais demander un mot de passe normal, mais en interne dans mon backend, je vais crypter ce mot de passe. Donc ici, je vais dire être point crypte, synchronisation de hachage. Et puis Hash Sync demandera une chaîne et aussi quelque chose appelé sel. Le sel est, par exemple, comme des informations supplémentaires, extra secrètes afin que toute personne ne puisse pas déchiffrer ce hachage. Donc, par exemple, je vais ajouter ici mon secret. Vous pouvez ajouter n'importe quel secret. Par exemple, vous pouvez dire ma cigarette. Vous pouvez ajouter n'importe quoi. Je vais ajouter ici, par exemple, le nombre, c'est 10. Et je ne demanderai pas à l'utilisateur un hachage de mot de passe, mais je lui demanderai simplement un mot de passe. Essayons cela maintenant et voyons ce que le serveur ou le backend nous répondra après avoir crypté le mot de passe. Donc, ici, créons un autre mot de passe utilisateur, pas un hachage de mot de passe. Donc, ce sera de un à six aussi. Et il a des informations comme nous l'avions auparavant. Ne le faisons pas administrateur par exemple. Et je vais envoyer, et nous verrons ici le hachage de mot de passe comme ceci. Donc, ce n'est pas exactement ce que l'utilisateur a envoyé. Donc, nous allons utiliser en quelque sorte quand nous nous connectons, nous allons comparer ce hachage avec le mot de passe que l'utilisateur a utilisé lorsqu'il s'est verrouillé. Ceci est également fait par la bibliothèque de décryptage. Donc, maintenant, nous avons un back-end sécurisé ou un objet sécurisé de l'utilisateur afin que personne ne puisse résoudre ou déchiffrer ces informations. 38. Obtenez l'utilisateur et la liste des utilisateurs de mots de passe: Comme nous l'avons vu précédemment, que nous avons créé la requête GET pour obtenir la liste des utilisateurs. Et aussi, nous pouvons créer la même chose pour obtenir un seul utilisateur. Donc, en le copiant à partir de catégories aussi. Et je vais changer cette catégorie d'utilisateur. Donc, de cette façon, nous avons une liste d'utilisateurs et obtenir un seul utilisateur. Essayons ça avec un Facteur. Je vais ici et je n'aurai pas un utilisateur qui a son ID. Il y a comme ça et je ne vais pas liste d'utilisateurs. Alors je les ai comme ça. Nous avons un problème de sécurité ici. Je ne veux pas envoyer la liste des utilisateurs avec leur hachage de mot de passe. Il est donc préférable d'envoyer l'API ou les champs API sans hachage de mot de passe. Comment peut-on faire ça ? Auparavant, nous avons vu que nous pouvons exclure certaines parties de notre API ou certains champs. Comment nous faisons cela après avoir appelé la méthode find, nous mettons Select, puis j'appuie sur Minus, puis avec moins, je peux spécifier quel champ il devrait être exclu. Par exemple, ici dans ce cas, je dirai hachage de mot de passe. Et puis quand j'appelle l'API, je verrai que j'ai des champs sans hachage de mot de passe. Faisons cela aussi pour l'utilisateur unique. Je vais mettre ici sélectionner, ou nous pouvons copier ceci directement. Il fonctionne également avec find par ID, comme avec find et width, find par ID. Sauvez-le. Essayez-le. Et obtenons, par exemple, cet utilisateur avec cet ID que j'ai posté ici. Et nous voyons que nous avons eu cet utilisateur sans hachage de mot de passe. Nous pouvons également, lors de l'obtention de la liste des utilisateurs, par exemple, dans le panneau d'administration de mon application, je veux juste afficher le nom de l'utilisateur et par exemple, numéro de téléphone et l'e-mail. Donc, dans ce cas, vous pouvez créer une API qui n'a que ces champs. Donc, vous pouvez sélectionner pas avec moins, mais vous pouvez dire nom, téléphone, e-mail. Donc, vous n'obtiendrez que ces champs avec cette requête de cette API. Alors, allons les chercher. Nous avons le nom, l'e-mail et le téléphone seulement. Ceci est très utile lorsque vous voulez, par exemple, lorsque vous avez une liste de becs et ensuite cette grande liste, vous voulez la réduire. Donc, vous voulez seulement sélectionner un champ spécifique que vous voulez utiliser dans le front end. Remettons-le au hachage du mot de passe. Donc, je veux seulement exclure le hachage de mot de passe et obtenir la liste des utilisateurs avec tous leurs détails. 39. Connecter une API REST d'utilisateur et créer un jeton: Dans cette conférence, nous allons voir comment l'utilisateur peut se connecter et utiliser les API. Donc, il est nécessaire d'avoir son e-mail ou ID et mot de passe, puis de les envoyer d'une manière ou d'une autre avec API au serveur d'authentification. Et le serveur d'authentification répondra avec GW t, qui est JSON Web Token, et dire que l'utilisateur est authentifié et est capable d'utiliser les API qui sont sécurisées. Commençons à faire la première partie. Nous devons donc créer une demande de poste où personne peut envoyer son nom d'utilisateur et mot de passe au serveur. Donc, nous allons d'abord créer une demande de publication dans notre API utilisateurs. Donc, je dirai point de routeur post, et puis le chemin sera la connexion. Et puis nous allons enregistrer une méthode asynchrone, la requête et la réponse. Et nous aurons le rappel ici. Faisons la connexion par email. Donc, nous nous attendrons dans leur réponse par l'e-mail et mot de passe. Donc, d'abord, nous devons savoir si cet utilisateur existe. J' ai vraiment un utilisateur avec cet e-mail. Donc, d'abord, je vais créer constante, donner à l'utilisateur. Et cet utilisateur aura une méthode de poids, exactement comment nous l'avons fait avant l'utilisateur et en trouver un. Je veux trouver l'utilisateur par e-mail. Donc, je vais dire ici, trouver un, et puis ce sera objet. Je peux attribuer quel champ je veux rechercher l'utilisateur. Par exemple, je souhaite effectuer une recherche par e-mail. Donc ici, je vais dire e-mail. Et cet e-mail viendra de l'email de point de corps de la requête. Donc ici, j'ai déjà l'utilisateur qui sont envoyés pour verrouiller par l'e-mail. Donc, si je reçois un utilisateur ou si je n'obtiens pas d'utilisateur, j'enverrai une erreur. Donc, nous allons faire ce retour l'utilisateur ou de l'état du point de réponse pour la fin de 100 points. Et puis nous dirons que l'utilisateur n'a pas trouvé. Sinon, j'enverrai la réponse que l'utilisateur est trouvé. Et il sera dans l'objet de sable comme utilisateur. Essayons cela pour être sûrs que cela fonctionne. Donc ici, j'ai besoin d'une demande de poste, je supprime cela, et ici nous aurons un login. Et on n'a pas besoin de tout ça. Nous avons juste besoin de l'e-mail, comme nous l'avons dit, et le mot de passe de l'utilisateur. Donc ici, j'aurai un mot de passe. Par exemple, disons 1, 2, 3, 4, envoyez-le. Et puis nous obtiendrons cet utilisateur vraiment exister avec cet e-mail. Faisons erreur dans l'e-mail. Vous en faites deux, par exemple, je vais obtenir l'utilisateur introuvable. Nous sommes donc sur la bonne voie maintenant. Nous avons donc trouvé l'utilisateur que nous voulons nous connecter. Pour se connecter à un utilisateur, nous devons comparer le mot de passe qu'il a entré et avec le mot de passe qui existe déjà dans la base de données. Mais nous avons déjà un mot de passe haché. Donc, nous devons en quelque sorte malheureux ou décoder ce mot de passe, puis le comparer avec le mot de passe que vous avez envoyé par l'utilisateur. Et puis je dis, d'accord, vous avez raison, vous êtes authentifié. Donc, après avoir été sûr d'avoir un utilisateur dans ma base de données avec cet e-mail, je veux vérifier que s'il y a un utilisateur que nous avons avant et déchiffrer Avec compare sing, je ne peux pas comparer deux mots de passe avec le hachage. Donc, je vais dire que le mot de passe de point de corps de point de requête, qui est envoyé par l'utilisateur, puis le comparer avec le hachage de mot de passe de point utilisateur, comme l'utilisateur, que j'ai trouvé avec son hachage de mot de passe. Donc, si ce succès de compression, je dirai, par exemple, envoyé au backend ou à l'extrémité frontale. Nous dirons, par exemple, état du point de réponse, par exemple, à un utilisateur d'envoi de 100 points. Sinon. Nous supprimons cette partie. Et nous disons, par exemple, avec 400 et dire mot de passe est faux. Essayons ça. Et ici, par exemple, j'ai ce mot de passe, nom d'utilisateur. Je dirais que le mot de passe est faux, mais rappelez-vous que nous avons le mot de passe de cette façon de un à six et l'utilisateur a été authentifié. Donc, quand le mot de passe est faux, nous obtenons mot de passe est faux. Alors maintenant, nous en venons à la partie importante. Donc, nous avons vu avant que le serveur répondra avec le jeton web JSON. Donc, d'où je vais obtenir le jeton web JSON dans le back-end. Dans Node.JS, il existe une bibliothèque appelée JSON Web Token. Nous devons donc installer cette bibliothèque. Donc, je vais à l'autre fenêtre que j'avais quatre pour l'installation, je dirais npm I. Et puis JSON Web Token. L' installation de cette bibliothèque me donnera la possibilité d'utiliser des jetons Web JSON. Donc, nous allons l'avoir dans nos constantes ou importations, nous pouvons dire, d'accord, université AVT nécessite un jeton web JSON. Donc, je peux utiliser cette variable maintenant ou constante pour générer le jeton Web JSON. Comment faire ça ? Donc, quand l'utilisateur est authentifié et tout va bien. Donc, je vais dire const jeton. Et puis j'utiliserais cette bibliothèque JSON Web Token, ce signe il y a une méthode là. Et cette méthode acceptant l'objet, l'objet avec une charge utile et un secret, qui est une clé secrète ou privée. On parlera du secret. Donc, ce JVP, ces signes comme nous l'avons vu avant, il demande un objet. Et cet objet aura, par exemple, vous ne pouvez rien passer. Je peux dire, par exemple, l'ID utilisateur. Et l'ID utilisateur aura, par exemple, l'ID point utilisateur, l'utilisateur que j'ai obtenu ici, et avec son ID. Donc, ici, vous pouvez passer les données que vous voulez avec le jeton. Nous verrons comment résoudre le jeton à l'avant. Et aussi comment nous pouvons comparer le jeton dans l'API d'authentification. Et ici, dans le second paramètre, nous devons passer un secret. Secret est quelque chose comme, par exemple, un mot de passe qui est utilisé pour créer vos jetons. Donc, il peut être n'importe quelle chaîne. Par exemple, je dirai, par exemple, la cigarette. Et après cela, il y a des options. Et dans ces options, nous pouvons ajouter quelques options au jeton, comme la date d'expiration, que nous verrons plus tard. Et dans leur demande d'envoi de succès, nous enverrons l'utilisateur avec son jeton. Donc, je dirai envoyer l'utilisateur et l'utilisateur, par exemple, e-mail qui n'envoie que l'e-mail et le jeton. Donc, de cette façon, l'utilisateur obtiendra le jeton dans le front end et peut l'utiliser pour accéder à l'API. Essayons ça. Alors je vais voir Facteur. Je vais utiliser la connexion. Encore une fois, nous avons un mot de passe incorrect. Mettons le bon mot de passe. Et puis j'ai reçu l'e-mail et un jeton. Donc ce jeton est créé par le secret que nous avons ici. Pour que tu puisses faire ce que tu veux. Et ce secret, personne ne le sait. Donc, il ne peut personne créer un jeton comme avec les mêmes jetons qui sont utilisés dans votre boutique en ligne. Donc, dans ce cas, aucun utilisateur n'envoie avec l'API, par exemple, n'importe quel jeton, et alors il aura la réponse, bonne réponse car il n'a pas le Secret. Nous verrons comment résoudre le jeton avec le secret que nous avons créé afin que l'utilisateur puisse obtenir la bonne réponse. Donc, si vous vous souvenez, nous avons ici les variables d'environnement. Donc ici, nous pouvons mettre notre secret. Par exemple, je peux dire ici secret. Mon chien est gentil. Alors je dis ici secret. Et nous l'utiliserons ici. Nous dirons constante. Et puis disons que le secret est le processus, le lot, les variables d'environnement, le point secret, que j'ai créé ici. Donc passons ce secret au lieu de la chaîne codée en dur. Revenons à nouveau pour être sûr que tout fonctionne bien. Donc on a un nouveau doc. Donc, parfois, vous voyez que lorsque vous êtes verrouillé sur un site Web le lendemain, vous êtes automatiquement déconnecté. Cela se produit parce que ce jeton a expiré. Donc, le serveur a un certain délai d'expiration. Donc, lorsque vous essayez d'utiliser ce jeton, encore une fois, le serveur vous répondra, désolé, ce jeton est expiré. Comment définir l'heure d'expiration ? Le troisième paramètre de ce sinusoïde, il a des options. Et ces options peuvent être l'une d'entre elles. Par exemple, expirer dans, expirer dans, vous pouvez spécifier un jour, une semaine, un mois. Je veux un jour. Je dis un d. Si je veux une semaine, je dis 1 w. Donc normalement, regardons, par exemple, pour notre atelier, nous avons le jeton pour une journée. Quand je reviendrai après un jour pour utiliser une API et que je charge le jeton expiré, alors le serveur dira, désolé, vous ne pouvez pas utiliser cette API car elle a expiré. Sauvegardons ça. Et nous verrons dans la prochaine conférence comment protéger nos API. Donc, ils ne peuvent pas utiliser d'IBI seulement s'il a un jeton. 40. Protéger l'API et l'authenticité JWT Middleware: Nous avons vu avant comment l'utilisateur a maintenant le jeton. Maintenant, il peut l'utiliser pour accéder aux données ou à nos API, mais comment nous pouvons protéger notre serveur. Donc, personne ne peut utiliser l'API sans jeton. Comme nous l'avons vu auparavant dans notre app.js, nous avions un middleware. Et le middleware vérifie tout, va au serveur avant qu'il ne soit exécuté. Donc ici, dans ce point, je veux vérifier si l'utilisateur est authentifié ou non. La séquence. Pour ce faire, normalement, je crée dans mon, par exemple, je veux créer un dossier d'aide. Et dans le dossier des aides, je vais créer un nouveau fichier, l' appeler par exemple, GBT dot js. Et il y a et il y a une bibliothèque appelée Express JWT, qui est normalement utilisée pour sécuriser les API dans notre serveur. Alors installons cette bibliothèque, MPM express JWT. Et demandons-le. Donc, je vais dire constante JWT express. Et puis il faudra JWT express. Et la fonction de protection sera la suivante. Donc, je vais créer une fonction, l' appeler Authentification ou notre JWT. Et cette méthode retournera DWT exprimé en tant que fonction. Et cette fonction, il a des options. On a déjà parlé du secret. Le secret est basé sur une chaîne où nous pouvons créer notre jeton. Donc, quand quelqu'un passe un jeton à notre, par exemple, backend, nous devons le comparer avec la cigarette. Donc, si le jeton est généré sur la base de ce secret, alors il aura accès à l'API. Mais quand son jeton basé sur un secret différent, alors l'API ne fonctionnera pas. Et comme vous vous en souvenez, nous avons importé ce secret ou l'avons mis dans les variables d'environnement. Donc ici, je vais dire const secret à nouveau et ensuite traiter le point secret de l'environnement. Une autre option que nous devons passer est que l'algorithme génère ce jeton. Si nous allons sur le site de JWT io, nous verrons que le jeton peut être généré sur la base de nombreux algorithmes. Voici les plus utilisés. Pour l'exemple, j'utilise HS 256, qui utilise également la bibliothèque JSON Web Token. Donc, nous pouvons avoir, par exemple, les algorithmes est tableau HS 256. Maintenant, nous avons exploré cette méthode avec le module, donc nous disons que les exportations de points de module sont notre JWT. Donc, de cette façon, nous serons en mesure de l'utiliser dans notre app.js. Donc ici, je vais dire, ne pas utiliser notre JWT provenant de constante de DWT, ce qui est nécessaire. Les aides JWT. Donc, le middleware est utilisé maintenant. Maintenant, notre serveur est sécurisé sur la base du jeton. Donc, toute demande que nous viendrons, on nous demandera l'authentification JWT. Et puis nous allons ici ou exprimons JWT où il s'est tourné pour nous. S' il est possible que l'utilisateur puisse utiliser cette API ou non en fonction de son jeton. Alors vérifions maintenant si notre API est protégée ou non. Donc, je vais demander un get de la liste des produits. Je vais ici, j'envoie cette demande et puis je vois cette erreur non autorisée. Donc aucun jeton d'autorisation n'a été trouvé. Express JWT a retourné pour moi cette erreur. J' ai donc besoin d'une manière ou d'une autre de gérer cette erreur et envoyé à l'utilisateur qui avait besoin de données. Mais d'abord, comment nous pouvons ajouter un jeton à la demande. Normalement, l'ajout d'un jeton avec une demande vient avec l'autorisation dans Postman. Et aussi à l'avant, vous devez utiliser, par exemple, un jeton de porteur. Et le jeton au porteur. Nous devrons passer le jeton que vous avez obtenu après la connexion avec l'utilisateur. Il existe différents types d'authentification que nous utiliserons ici, le plus grand. Donc, avant que nous avions aussi ici le jeton après que nous nous sommes enfermés avec un utilisateur Thomas. Et ici, nous allons passer ce jeton. Donc, l'autorisation ici à venir pour cette API chargée avec ce jeton. Donc, après avoir envoyé la demande, je vais y obtenir des données i. Si je supprime ce jeton, je ne le ferai pas. Je n'ai aucune autorisation en face et nous verrons comment charger le jeton sur la requête dans les en-têtes. Donc maintenant, nous sommes sûrs que notre jeton fonctionne. Alors faisons un changement ici. Faire une erreur. Nous verrons que sur erreur autorisée, jeton non valide. Donc, nous avons différentes erreurs ici. Nous devons donc gérer cette erreur d'une manière ou d'une autre. Nous verrons cela dans la prochaine conférence. 41. Gestion de l'erreur d'authentique: Nous avons vu précédemment que nous avons eu quelques erreurs dans notre API. Nous devons donc gérer ces erreurs pour être affichées manière plus belle pour l'utilisateur ou le front end. erreur de gestion dans RGS peut être fait simplement de cette manière. Nous allons au middleware et nous disons AP US. Et nous créons une fonction qui contiendrait une erreur comme une réponse de requête de rappel. Et ensuite, dans ce cas, cette méthode sera exécutée chaque fois qu'il y a une erreur dans notre API. Donc, ici, vous pouvez vérifier s'il y a une erreur. Ensuite, vous pouvez monter, par exemple, response.status. Comme par exemple, disons 500 et le JSON. Et dans ce JSON USA par exemple, un message et ce message disant erreur dans le serveur. Ainsi, toute erreur peut se produire dans le backend sera appelée avec ce message. Essayons cela avec l'erreur que nous avons eue avec l'autorisation. Donc, je vais faire une erreur ici dans ce jeton. Donc, nous verrons ici que nous avons eu une erreur dans le serveur parce que nous avons un problème dans le jeton, mais nous ne savons pas quelle est l'erreur exactement. Nous pouvons donc classer ces erreurs en fonction du type. Parce que si nous imprimons cette erreur en quelque sorte, disons au lieu du message, le sprint, cette erreur, une erreur ici et puis essayer, nous verrons que l'erreur a un nom. Basé sur le nom. Peut-être que je peux classer les erreurs ou nous pouvons les garder comme ça. C' est à vous de décider, mais nous pouvons le rendre plus beau de la façon actuelle. Mais d'abord, pour avoir un app.js propre, Déplaçons cette méthode à nos aides. Donc, créons un fichier ici, appelons-le gestionnaire d'erreur à JS. Et nous créons une fonction, appelons-le gestionnaire d'erreur. Et il aura les mêmes paramètres, erreur, requête, réponse, et suivant. Et puis nous pourrons gérer ce que nous avons ici. Donc on peut prendre ça si on le colle ici. Et de cette façon, nous pouvons garder J aussi propre que possible. Donc, ici, nous devons dire gestionnaire d'erreurs. Et le gestionnaire d'erreurs est constant. Erreur et apprentissage est requis auprès des assistants et du gestionnaire d'erreurs. Donc, en fonction du type ou du nom de l'erreur, nous pouvons classer nos erreurs. Par exemple, disons si le nom du point d'erreur, nous avons vu précédemment que nous avons un nom, une erreur autorisée. Donc, je vais retourner ici l'état 401, et l'erreur sera comme un message. Nous pouvons dire que le message est, par exemple, l'utilisateur ne l'est pas. Comme nous le verrons également à l'avenir, nous aurons le type des erreurs qui est appelé erreur de validation. Nous verrons cela plus tard lorsque nous allons télécharger des photos. Ou nous disons que le nom du point d'erreur sera, par exemple, une erreur de validation. Ensuite, la réponse sera la même que celle-ci. Mais par exemple, soyons assez. Maintenant, avec l'erreur seulement, nous allons changer ce message lorsque nous allons faire le téléchargement des images et des fichiers. Et pour les erreurs générales, il est préférable de gérer cela aussi. Donc, nous avons ici retourné l'état du point de réponse. Et quand il y a quelque chose de général, on peut dire que c'est une erreur de serveur, donc c'est 500. Et puis dans le JSON, j'envoie le message comme erreur. Ou vous pouvez envoyer l'erreur directement sans message. Ici, nous reviendrons et reviendrons ici aussi. Nous avons donc maintenant un gestionnaire d'erreurs pour notre autorisation et validation. Donc maintenant dans le front end, quand je fais une synchronisation non autorisée. Donc, quand je demande une API sans jeton, alors j'obtiens cette erreur. Et si je le fais, Par exemple, Je télécharge un PDF et je ne suis pas autorisé à télécharger un PDF sur notre Thurber, donc je vais obtenir l'erreur de validation. Et aussi s'il n'y a pas d'erreur classée ici, alors nous obtiendrons l'erreur en général comme un message dans le JSON. C' est agréable d'avoir des commentaires toujours dans le code. Ainsi, vous pouvez lire quelques commentaires pour expliquer quel type d'erreur est ceci. 42. Exclusions des routes de l'API REST de l'authenticité: Bienvenue de retour. Maintenant, nous avons une API totalement sécurisée, donc personne ne peut l'utiliser sans authentification. Donc, dans ce cas, l'utilisateur, quand il voulait regarder dedans, il doit être autorisé. Ce n'est donc pas logique pour nous. Ainsi, l'utilisateur peut être en mesure d'utiliser un login pour obtenir un jeton. Donc, dans ce cas, nous devons exclure d'une manière ou d'une autre cette API d'être authentifiée. Donc ici, dans Express JWT, je ne peux pas dire à moins que. Et à moins que j'aie un objet où je peux localiser empathie est l'ensemble des API que je veux exclure. Par exemple, excluons la connexion. Fais ça. J' ai besoin de spécifier toutes les API que je veux qu'elles soient exclues. Donc, je peux dire ici, slash api, v1 slash utilisateurs et connexion. Donc je veux que celui-ci soit exécuté. Essayons que maintenant c'est Facteur. Et nous ne sommes toujours pas autorisés. C' est parce que j'ai besoin d'ajouter une autre barre oblique ici. Alors on va à nouveau chez Facteur. Nous essayons et nous avons à nouveau le jeton. Donc vous devez faire attention à avoir la barre oblique ici. Nous pouvons donc également ajouter le registre. J' ai déjà ajouté que c'est juste l'API, qui est exactement comme le post. Donc, ici, dans les utilisateurs, j'ai le registre de poste, qui est exactement le même que post. Ainsi, l'utilisateur peut également enregistrer un compte dans la boutique en ligne. Et ici est utilisé pour l'administrateur qui veulent supprimer ou ajouter des utilisateurs. Et les produits ? Produits Aussi, j'ai besoin d'une manière ou d'une autre pour obtenir le produit gratuitement sans authentification. Donc, je n'ai pas besoin que l'utilisateur soit authentifié pour obtenir le produit, car je ne veux pas que les gens se connectent. Ensuite, ils pourront voir ma boutique en ligne. J' ai besoin d'eux pour obtenir la liste des produits sans aucune authentification. Alors, comment nous pouvons faire cela, nous devons spécifier la méthode, la méthode HTTP. Donc, je peux dire imprimez-moi seulement que les requêtes GET, mais n'autorisez pas la publication. Sinon, les gens pourront poster des produits sur ma boutique en ligne. Donc, pour ce faire, cette méthode de chemin acceptant Un objet et cet objet a un premier champ en tant qu'URL. Et le deuxième champ est les méthodes. Et URL, je peux spécifier l'URL telle que nous l'avons ici. Mais au lieu de cela, j'utiliserai des produits. Et les méthodes seront obtenir, par exemple, et les options. Et ce sera un tableau. Donc, nous voyons ici nous avons spécifié l'URL de l'API, puis nous spécifions les méthodes. Essayons ça. Je vais aller ici pour obtenir la liste des produits. Sans authentification. Ça fonctionne parfaitement. Et quand je supprimerai cela, ça ne marchera pas. Il est donc préférable de l'avoir comme ceci afin que l'utilisateur puisse obtenir la liste des produits dans le front end. J' ai refactorisé ici le code, donc il semble plus beau. Donc, ici, nous avons la variable API, qui est que nous l'obtenons à partir de la variable d'environnement. Et ici, j'utilise des ticks pour injecter la variable à l'intérieur de la force. Mais maintenant, nous avons un problème. Tu te souviens ? Nous avions auparavant dans les API pour les produits, nous avons créé des méthodes comme par exemple, obtenir en vedette et obtenir en vedette. Nous devions également être publics parce que je veux montrer le produit de fonctionnalités dans mon frontal sans authentification de l'utilisateur. Donc ici, si je veux l'essayer, je vais à Postman posté ici et je dis trois produits en vedette. Je ne serai pas autorisé. Dans ce cas, nous devons également spécifier cette URL ici. Mais alors nous aurons une très longue liste d'API, surtout au moment où nous avons une très grande boutique en ligne. Parce que nous avons besoin de beaucoup d'API. Non seulement dire, par exemple, me donner le produit de fonctionnalité ou me donner le nombre de produits. Donc, la bonne chose ici que je peux utiliser une chaîne STD comme ça, je peux utiliser des expressions régulières. Les expressions régulières me donnent la possibilité de tout spécifier après les produits, par exemple. Donc ici avec cette chaîne, je peux être capable d'utiliser celle-ci. Donc parce que nous avons ici, j'ai cette étoile. Donc n'importe quoi après que les produits fonctionnent. Donc maintenant, après avoir construit mes rejets, donc ici je dis barre oblique API, produits slash v1. Voici une barre oblique d'échappement. Il ne va donc pas entrer en conflit avec la barre oblique que nous devons définir. Ce sujet concerne les expressions régulières. Vous devez donc en savoir plus sur ces expressions régulières. J' utilise toujours le testeur rejette, qui est toujours situé en ligne. C' est un beau site appelé regex 101. Et ici, vous pouvez tester vos expressions régulières. Donc ici, je vais prendre celui-ci et l'essayer sur ce site. Donc, je dis ici, quelque chose comme ça sera autorisé, Mais si j'ai fait une erreur ici, alors il ne sera pas autorisé. Donc c'est exactement cette formule. Donc, ici, il est préférable d'utiliser toujours des expressions régulières pour spécifier plus d'API et avoir moins de code. Essayons maintenant. Et nous avons nos produits en vedette. Faisons aussi la même chose, quatre catégories. Donc, nous avons ici 1 et catégories. Pour qu'on puisse les avoir. Et par exemple, nous ne pouvons pas les manger ou les poster. Donc, à l'avenir, lorsque j'ajouterai plus d'API, nous devons ajouter quelques exclusions ici, toujours dans ce tableau de chemins. 43. Ajoutez d'autres informations Secrètes à jetons: Nous avons vu avant quand nous avions une connexion que nous ne pouvons pas spécifier certaines données à l'intérieur de cette réponse ou à l'intérieur du jeton. Dans ce cas, je peux également passer quelques données secrètes, que je veux être vient seulement avec le jeton. Donc, si l'utilisateur n'a pas cette information dans le jeton, je ne lui permettrai pas de faire quelque chose. L' une des informations secrètes que je peux transmettre ici est l'administrateur. Ainsi est admin, je peux dire que cet utilisateur est administrateur sur la boutique en ligne ou non. Donc, dans ce cas, je peux lui permettre de regarder dans le panneau d'administration de la boutique en ligne ou non. Donc, l'utilisateur normal ne peut pas se connecter, mais l'administrateur, qui a admin, vrai, il a continué à chercher. Et bien sûr, dans ce cas, il est préférable de séparer les tables. Je peux donc avoir des utilisateurs et des clients, par exemple, ou des utilisateurs et des administrateurs. Donc, cela nous verrons dans la prochaine conférence plus en détail. Maintenant, nous avons l'utilisateur et puis je vais vérifier l'utilisateur est admin. Donc, dans ce champ, dans ce jeton, je peux envoyer l'utilisateur s'il est administrateur ou non. Peut-être que vous me direz pourquoi vous ne pouvez pas faire cela dans le front end, comme vérifier si l'utilisateur est administrateur ou non. Dans ce cas, l'utilisateur sera en mesure, par exemple, un hacker qui a de l'expérience dans la programmation, il sera en mesure de l'avant de se connecter au panneau d'administration. Même il n'a pas cette capacité. Il peut juste créer une fausse donnée qu'il est administrateur. Et puis il peut mettre comme dans le JSON est admin est vrai. Et puis il pourra regarder dedans. Et ce cas, ce n'est pas bon dans notre boutique en ligne, donc il vaut mieux l'avoir sécurisé ici. Donc, si l'utilisateur n'a pas ce jeton, qui a est admin, alors il ne sera pas en mesure de regarder dans le panneau d'administration. Essayons ça et voyons notre jeton s'il est validé, je vais aller à Postman et appuyer sur Envoyer. C' est bien. Nous avons maintenant le jeton. Donc, nous vérifions ce jeton dans DWT dot io. Vas-y, essaye-le. Je dirai aussi cet admin et le délai d'expiration. Donc, dans ce cas, personne ne peut pas construire un jeton comme ça parce que non, il n'a pas le secret. Et si vous vous souvenez, toujours l'API vérifie ce jeton. Si elle a été construite avec cette cigarette, que nous avons spécifiée dans notre backend. 44. Utilisateurs et administrateurs: Comme nous l'avons vu précédemment, que nous avons exclu certaines requêtes API pour ne pas être authentifiées. Par exemple, ici les produits comme Git et les options ne doivent pas être authentifiés car ils seront sur le public. Ainsi, tout utilisateur public peut parcourir les produits dans mon e-shop. Ainsi, l'utilisateur de connexion qui s'est enfermé dans la boutique en ligne, il peut poster des produits ou mettre à jour des produits, des produits d'élite. Mais dans notre cas maintenant les utilisateurs, nos clients. Donc, si je suis client et que je me suis connecté au problème, alors dans ce cas, je serai en mesure de supprimer des produits. Et les premières secondes que je publie ce site web en ligne, il sera détruit. Si vous vous souvenez, nous avons créé dans le modèle un champ qui dit est admin. Donc, ici, nous spécifions l'utilisateur s'il est administrateur ou non. Dans notre e-Sharp, nous aurons également le panneau d'administration. Et ce panneau d'administration n'est pas autorisé pour les utilisateurs normaux à entrer uniquement les administrateurs. Donc, nous avons ici sur la table des utilisateurs, certains rôles d'utilisateur. Nous avons un client et nous avons admin, et ils sont tous les deux dans la table des utilisateurs. Vous avez ici la liberté de faire, par exemple, des tables séparées dans ce cas. Mais ici, je voulais mentionner les rôles des utilisateurs. Ainsi, vous pouvez également les faire dans la même table mais avec des rôles différents. Il y a plusieurs façons de faire des rôles d'utilisateur dans Node.JS, mais je vais avec la façon la plus simple dont nous avons besoin pour notre e-shop. Si vous vous souvenez, une fois que l'utilisateur s'est connecté à l'application, il a reçu un jeton. Et ce jeton est surchargé avec l'ID utilisateur et est admin. Et ici, nous savons à l'intérieur du jeton si l'utilisateur est administrateur ou non. Et lorsque l'utilisateur envoie une requête, la bibliothèque JWT démonte ce jeton avec le code secret qui est fourni dans notre API ou dans notre serveur. Et il verra que s'il est vraiment généré à partir de ce serveur ou non. Ainsi, nous pouvons identifier l'utilisateur s'il a jeton de notre e-shop ou non. Jusqu' à maintenant, tout est bien. Supposons que j'ai un bon jeton. Et je veux aussi regarder dans mon travail d'administrateur. Laisser de cette façon, il nous gardera pas sûr parce que l'utilisateur, dans ce cas est en mesure de supprimer ou d'ajouter des produits. Donc, le JWT express a une excellente méthode qu'il examine, par exemple, ou révoque le jeton dans certaines conditions spécifiques. Pour ce faire, il y a un champ est révoqué, et ceci est révoqué est une fonction. Donc, nous pouvons aussi, dans le rappel, nous pouvons spécifier si l'utilisateur est admin ou non. Donc, je crée ici, par exemple, une autre méthode est révoquée. Et cela est révoqué sera une fonction, fonction asynchrone. Et il aura une demande, une charge utile. Et Don. Quels sont ces paramètres ? La requête est quand je veux utiliser les paramètres de la requête ou le corps de la requête, je veux savoir quelque chose ce qui envoie l'utilisateur. La charge utile contient les données qui se trouvent à l'intérieur du jeton. Par exemple, je veux obtenir est admin à partir du jeton qui est signé à l'utilisateur. Et cet utilisateur me l'envoie avec les en-têtes de requête. Donc ici dans ce cas, je peux dire si ce n'est pas le point de charge utile est admin. Parce que maintenant j'ai accès à cela, est admin à la charge utile de ce jeton. Ensuite, je reviendrai que fait est nul et vrai. Donc, dans ce cas, nous disons que rejeter le jeton. Donc, si une API autorisée appelée et que notre utilisateur n'est pas admin, alors elle sera rejetée. Et sinon, s'il est administrateur, nous pouvons dire fait sans aucun paramètre. Comme nous l'avons déjà dit, nous n'avons que deux types d'utilisateurs dans notre numéro. Donc, nous avons admin et utilisateurs. Si vous avez plus de rôles, vous pouvez les entendre, les classer. Et ici, vous définissez ce qui est évoqué ou ce qui est autorisé. Essayons ça avec le facteur. Si vous vous souvenez, nous avons un utilisateur ici, Thomas Jackson, qu'il n'est pas administrateur de la boutique. Et ce sont ses données. Donc, nous voyons ici que l'administrateur est faux. Et quand j'ai essayé de poster un produit dans notre API et nouveau produit, je vais obtenir l'utilisateur n'est pas autorisé. Changeons le jeton pour être avec admin via. Eh bien, allons à la base de données manuellement et changez cet utilisateur pour être un administrateur. Donc, je vais dire ici admin à travers et puis je clique sur mise à jour. Si j'essaie maintenant d'utiliser envoyer, je vais également obtenir non autorisé. Pourquoi ? Parce que j'utilise le jeton qui est chargé avec est admin false. Nous devons donc regarder à nouveau pour obtenir un nouveau jeton. Donc, je vais à l'API de connexion, j'ai l'utilisateur et le mot de passe. J' envoie cette demande, j'ai un nouveau jeton. Et nous allons l'utiliser dans nos demandes de poste. Sur autorisation. Je joue, le remplacer ici et essayer à nouveau. Et il est posté avec succès le produit grâce à express JWT qu'il a cette méthode. Donc, il a été capable et nous a permis de faire, par exemple, ce rôle d'utilisateur. Maintenant, notre application est entièrement sécurisée et personne ne peut l' utiliser ou y accéder sans aucune autorisation ni aucun rôle d'administrateur. 45. Obtenez l'API REMISE de utilisateurs: Parfois, l'administrateur de l'atelier veut savoir combien d'utilisateurs ou de clients il a dans son atelier. Donc, dans ce cas, il a besoin d'une API pour obtenir le nombre d'utilisateurs. Nous l'avons déjà fait avec les produits. Nous avions une API, en particulier pour obtenir le nombre de produits que nous avons dans notre numéro. Nous allons donc le copier et aller à l'API de l'utilisateur. Après la connexion et l'enregistrement, nous pouvons l'utiliser ici. Et nous disons le même getCount, mais l'utilisateur. Et ici, nous disons le nombre d'utilisateurs. Si aucun compte d'utilisateur, retournez 500, puis votre retour pour moi compte d'utilisateur. Alors sauvegardons essayé à son Facteur. Nous allons par exemple, ici, je dis utilisateurs et obtenir compter. Essayez-le. Nous avons une erreur parce que je fais un post. On doit faire un GET. Nous essayons encore. Nous avons le nombre d'utilisateurs pour, nous avons vraiment quatre utilisateurs. Nous n'avons pas également fait de demande de suppression. Donc, nous allons aussi le copier à partir, par exemple, des catégories ou des produits. On peut le faire d'ici et l'obtenir. Et puis nous mettons une demande de suppression et je remplace l'utilisateur, l'utilisateur. Et tout le reste est utilisateur. Donc, comme vous le voyez ici, c'est exactement la même façon que nous l'avons fait avec les produits. Nous le gardons, et maintenant nous en avons complètement fini avec les utilisateurs. Je suis si heureux que vous finissiez ce module et vous verrez le code où nous sommes arrivés dans le dossier ressources. Donc, vous pouvez le télécharger et ensuite essayer des choses, changer des choses, essayer par vous-même et essayer de comparer votre code avec le code que j'ai téléchargé. 46. Backend : ordres: Bienvenue dans une nouvelle section. Dans cette section est entièrement liée aux commandes. Nous avons donc créé leurs produits et aussi les utilisateurs. Et maintenant, nous allons construire les ordres. Comme chaque e-shop, l'utilisateur va avoir une carte remplie et puis il va vérifier pour soumettre une commande. Cette commande viendra avec l'adresse de la personne et aussi les options d'expédition et comment il paiera cette commande. Et nous verrons aussi après que l'utilisateur se soit connecté, comment nous obtiendrions également les données de l'utilisateur et remplissons automatiquement les données de la commande. Donc, sans laisser l'utilisateur sentir à nouveau l'adresse de facturation. Nous allons donc laisser les données proviennent de l'information utilisateur que nous avons créée auparavant. Et aussi dans cette section, nous allons voir comment lier le produit à la commande. Nous verrons donc que la commande contient de nombreux produits. Donc, parfois, j'ajoute, par exemple, un t-shirt et un pantalon. Nous allons donc voir comment lier la commande avec les produits. Et dans le back-end ou dans le back-office où l'administrateur peut se connecter et contrôler les commandes. Nous verrons comment nous serons en mesure de changer l'état de l'ordre. Donc, il sera de livré ou par exemple, expédié, ou même il est en attente ou annulé. Donc, ici tout sera lié totalement au backend. Nous ne travaillerons pas sur le front. Donc, nous allons travailler avec Facteur. L' étudiant peut comprendre comment ce backend fonctionne isolé de l'extrémité frontale. J' espère que vous apprécierez cette section. Cette section, comme je vous l'ai dit, ne reprend pas les sections précédentes. Il n'y a pas de nouvelles choses. Comment nous allons lier les produits comme tableau d'articles de commande et aussi le lier à la commande est prêt. Et commençons. 47. Modèle de commande et de schéma de commande: Bienvenue de retour. Maintenant, nous allons implémenter le schéma de commande et le schéma d'éléments de commande. Auparavant, nous avons mis en place la base de données ou nous avons planifié la base de données en fonction de ce dont nous avons besoin pour l'e-shop. Comme vous le voyez à droite de l'écran, nous avons déjà la table des commandes et des articles de commande. Comme dans la base de données relationnelle, nous voyons la connexion entre la commande et les éléments de commande. Commençons d'abord par les commandes, comme nous l'avons vu auparavant, avec les produits et la relation avec les catégories. Nous avions également implémenté que la catégorie a un type d'ID d'objet et la référence est à la table de catégorie. Donc, faisons la même chose entre la commande et l'article de commande. Donc je vais copier cette partie. Je vais passer à la commande et je vais mettre ici les articles de commande. Et ici, nous aurons l'ID de l'objet et la table de l'article de commande et nécessaire oui, à travers. Mais la différence ici que nous avons peut-être plusieurs articles de commande, pas seulement un. Donc, en Mongoose, nous pouvons implémenter cela en alignant cela à l'intérieur d'un tableau. Donc, dans ce cas, nous devons passer ou avoir le tableau des éléments de commande des ID des éléments de commande qui existent dans la base de données. Donc, dans ce cas, nous devons créer une table d'articles de commande. Alors, avons un dossier ici. Appelez-le point de commande js. Et il aura le même schéma, Mongoose toutes ces informations. La chose ici, nous aurons l'article et voici les éléments que nous n'avons pas cela. Nous aurons la quantité, qui est le numéro de type. Et c'est nécessaire. Oui, c'est vrai. Et comme nous le voyons aussi que nous avons un produit. Nous devons donc lier cet article de commande au produit. Donc, je vais dire ici que j'aurai l'ID ou le type d'ID d'objet. types de schéma Mongoose que l'ID d'objet. Et c'est la référence de cet article de commande sera produit. Et nous allons exporter comme article de commande et l'avoir comme article de commande. Et ici, nous avons commandé un schéma d'article. Donc, notre article de commande est prêt, que nous avons importé ici. Et nous avons référencé avec l'ID d'objet dans la table des ordres. Donc la chose ici que nous avons beaucoup de relations. Donc, la commande est liée à tout autre article et l' article de commande est lié ou se réfère au produit. Donc, dans ma demande, lorsque je demande une commande, je vais obtenir tous les autres articles, y compris leurs produits et remplir ces produits. Par exemple, j'ai besoin du nom et de la catégorie aussi. Ici, j'ai ajouté rapidement les autres champs dont nous avons besoin, l'adresse de livraison, 12 , ville, code postal, pays, état de téléphone, que nous dirons qu'une valeur par défaut en ajoutant. Ainsi, lorsque la personne soumet une commande , la valeur par défaut ou le premier état de la commande sera en attente. Et ici, nous avons aussi le prix total. Comment nous verrons que nous le calculerions en interne lorsque nous créons la commande. Et ici, une autre référence avec l'ID d'objet à la table utilisateur. Nous savons quel utilisateur ou son trouble et la date ordonnée ici, que l'utilisateur n'a pas à l'envoyer au back-end. Il sera automatiquement créé avec le point maintenant. Donc, il va créer l'heure où la demande de poste est envoyée. Et comme vous vous en souvenez avant, nous avions ici quelques identifiants virtuels. Donc, pour ne pas avoir cet ID de soulignement, nous pouvons aussi avoir un ID normal. Copions-le aussi et nous l'avons de la même manière. Donc ici, j'ai dit schéma de commande, créez pour moi un champ d'ID virtuel au lieu d'ID de soulignement. Maintenant, nous sommes prêts à travailler avec ces tables. Par exemple, ici, nous avons commande et commande article, sorte que la relation est obtenue entre ces deux tables. Et maintenant, nous sommes prêts à créer notre API avec des commandes. 48. Tableau de Réfs de l'ordre de documents pour ordonner des produits: Ainsi, l'ordre est lié aux éléments de commande par tableau. Voyons donc et lisons l'exemple comment le frontal enverra ces données au back-end que j'ai créé ici et objet, par exemple, comment l'utilisateur enverra les données au back-end. Donc, tout d'abord, imaginons que l'utilisateur a un panier et il a sélectionné deux produits, produit 1 et le produit 2. Et ils ont des identifiants différents. Donc, les articles de commande seront tableau de deux produits, et chaque produit aura une quantité. Donc, de cette façon, j'ai tableau d'article de commande ou leur article a une quantité et le produit. Et le reste sera le même. Sauf ici, nous verrons que l'utilisateur enverra le nom d'utilisateur, mais nous envoyons l'ID utilisateur créant la commande. La même chose ici. Nous n'avons pas envoyé le nom de leur produit, mais nous l'avons envoyé. Voici donc comment l'ID de produit est lié à l'article de commande et comment les articles de commande sont liés à la commande. 49. Nouveau cours et créer des objets de commande sur la publication de nouveaux objets: Passer une commande dans notre base de données nécessite des données de l'utilisateur. Comme nous l'avons vu précédemment, nous avons ces données JSON où ils utilisent après avoir effectué la commande, il placera la commande dans notre base de données. Donc, ce que nous avons besoin d'abord pour créer une demande de poste dans l'API commandes, nous avons déjà une demande GET. Nous devons créer maintenant une demande de post pour ne pas répéter le même processus que nous l'avons fait auparavant. Copions la demande de poste la plus simple que nous avons créée dans les catégories. Et nous allons ici deux catégories, poster la demande et le copier, et le coller dans nos commandes. Donc, ce qui est exigé de nous, nous avons besoin de créer un modèle d'ordre et les champs de l'ordre que nous étions, nous avions avant et créé le schéma. Supposons donc le cas le plus simple car l'utilisateur enverra ces données. Donc, ici, nous obtenons les données. Je les colle rapidement pour ne pas répéter le même processus. Donc, nous avons de l'utilisateur les éléments de commande tous viennent avec le corps de la demande, qui est celui-ci ici. Donc, nous avons tous les autres éléments et toutes les données qui sont envoyés par l'utilisateur à partir du front end. Allons réparer ce truc ici. J' enseigne de cette façon comment l'appeler rapidement, donc nous n'avons pas à écrire à nouveau tout concernant la commande parce que, vous savez, nous avons toujours poster la demande, nous avons toujours supprimer la demande. Il est donc préférable de le copier à partir de la demande de base et de changer, par exemple, les choses de nom à tenir sur notre nouvelle API. Donc, ici, nous avons commandé tout maintenant commande et renvoyé l'ordre créé. Mais si vous vous en souvenez, nous avons créé la table des articles de commande. Donc, l'utilisateur ne sait pas dans le front end que les éléments de commande qui sont stockés dans la base de données. Donc ici, vous allez simplement envoyer ces données. Il veut trois fois de ce produit et deux fois de ce produit. Mais pour récupérer ces données et les stocker pour l'administrateur, ce sera comme par exemple, nous pouvons dire un obstacle, un petit obstacle pour les récupérer à nouveau à partir de la base de données. Mais nous allons résoudre cela avec Mongoose au cours de cette relation entre les articles de commande et de commande. Donc, lorsque l'utilisateur ou la demande de poste est envoyé ou créé, nous devons d'abord créer les éléments de commande dans leur base de données , puis les joindre ou les lier à la demande de commande que nous avons ici. Et comme nous l'avons vu précédemment, que les éléments de commande, c'est tableau d'ID de la table d'élément de commande. Donc, dans ce cas, nous avons besoin d'un tableau d'ID, ID qui sont dans la base de données de ces articles de commande. Donc, d'abord, nous devons créer ces identifiants ou comment Mongoose les créera pour moi. Et puis je les stockerai avec la commande ou les relierai à cette commande. Donc ici, nous ne recevrons pas directement de l'utilisateur l'article de commande qui contient le produit et la quantité sait, nous avons seulement besoin d'un tableau d'ID. Donc, nous pouvons dire des ID d'articles de commande. Et ces ID d'article de commande proviendront de nos articles de commande créés dans la base de données, ce que nous allons faire ici. Nous avons donc cette constante const ID d'article de commande, dont nous les obtiendrons après la création de l'élément de commande dans la base de données. Donc, nous avons besoin en quelque sorte deux premières boucles à l'intérieur des éléments de commande qui sont envoyés par l'utilisateur. Donc, je vais dire le corps de point de requête, points d'ordre à boucle toujours nous utilisons la carte parce que nous savons que l'utilisateur va envoyer tableau, tableau d'éléments de commande. Et ici, nous aurons ou leur article, un article de commande. Et puis à l'intérieur de cet article de commande, nous créons un nouvel article de commande, nouveau modèle d'article de commande. Modèle d'article donc commandé. Nous avons besoin de l'avoir à partir de nos modèles ou de leur article. C' est exactement comme si nous créons une nouvelle catégorie ou un nouveau produit, ou c'est comme une demande de publication. Donc, je dis ici, ou l'article, quels sont les champs de l'article de commande ? Nous avons une quantité et un produit. Alors je vais ici, je dis quantité. Donc, nous avons déjà un élément de commande de la liste des éléments de commande qu'ils utilisateurs. Et donc je dis ici, commander la quantité point d'article et aussi le produit, qui contiendra l'ID du produit. Donc, à partir de l'article de commande point produit, alors nous devons enregistrer cet article dans la base de données. Donc, je dis laisser ou le nouvel article de commande, la même variable que nous pouvons l'utiliser. Attendez un nouvel article de commande que nous avons créé précédemment ou le modèle, et pas sûr. Donc, ici, nous enregistrons l'élément de commande dans la base de données. Donc, quand nous bouclons dans les articles de commande, donc pour chaque article de commande, je l'enregistrerai dans la base de données. Mais je veux que cette carte rende pour moi seulement les identifiants. Donc ici, je dis ne retourne pas le nouvel article de commande, mais le nouvel ID point de l'article de commande. Donc, dans ce cas, nous obtiendrons seulement les ID dans un tableau. Nous avons donc créé les ID de commande et nous les attachons à la commande, et nous allons sauvegarder la commande. enregistrons pas maintenant dans la base de données, nous allons simplement envoyer l'ordre est créé ou le modèle de commande au frontal à l'utilisateur après avoir posté la demande. Essayons ça avec Facteur. Je vais chez le facteur et je remplace cela par des commandes basées sur notre API, comment nous l'avons créée. Et puis je mettrai ici les données. Examinons d'abord le jeton d'authentification, puis le corps, ce que nous avons ce JSON par exemple, je reçois déjà ces ID de notre base de données. Donc, nous devons déjà avoir ces ID dans la base de données. Envoyez-nous la demande de poste. Nous voyons que nous avons eu une erreur. L' erreur vient, Voyons voir dans la console de notre serveur de test ou de notre serveur, nous verrons que nous avons ici un poids. C' est parce que nous avons ici un poids, mais cela nécessite une fonction asynchrone. Je veux dire ici. Donc, ici, nous avons un poids et cela nécessite une fonction asynchrone. Donc, dans ce cas, nous ne pouvons pas attendre à l'intérieur d'une fonction normale. Nous avons besoin de placer une fonction asynchrone fondamentalement est celui-ci. Donc, je dirais ici async et enregistrer et essayer à nouveau. Et nous verrons que la demande est créée ou que l'ordre est refroidi recréé, mais les éléments de commande sont vides. Effectuons le suivi de ces articles de commande pour voir pourquoi ils ne sont pas créés. Pour les suivre. Nous pouvons faire le journal de la console de l'ordre, des articles, des ID. Et voyons dans la console ce qu'il reviendra pour nous. Donc ici, j'ai sauvé. Et puis essayons à nouveau. Vérifions la console. Nous verrons que nous sommes revenus aux promesses. Donc, nous ne retournons pas réellement l'ID, nous retournons une promesse. Cela parce que nous avons ici la fonction asynchrone et attendons, et nous revenons avec attente une promesse. Donc, d'une certaine manière, nous devons résoudre ces promesses. Parce que l'utilisateur envoie un tableau d'éléments de commande, pas seulement un. Nous devons donc combiner ces promesses ensemble. Donc, ici, nous avons un tableau de promesses pour les combiner, j'utilise le point de promesse tout. Donc ici, dans ce cas, j'aurai une promesse de retour ou une promesse, qui sera résolue après cela ici, avant de créer l'ordre. Alors essayons de consolider. Encore une fois. Nous voyons que nous avons eu une promesse, pas des promesses comme avant. Nous devons donc résoudre cette promesse. Comment nous pouvons le résoudre, nous pouvons créer une nouvelle constante. Appelez le numéro de commande est seulement ou des articles de commande. Les identifiants, par exemple, ont été résolus. Parce que c'est une promesse. Donc je peux dire ici, euh, attendez que ça soit résolu et imprimez-les pour moi. Ensuite, je remplace cet ID d'articles de commande par les ID d'articles de commande résolus. Essayons encore. C' est génial. On les a retrouvés. Et dans le journal de la console, nous avons les deux identifiants qui sont créés pour nos articles de commande. Vérifions cela dans la base de données. Après la connexion, je vois ici la table des éléments de commande est créée. Je n'ai pas créé qu'ils livre atlas est très intelligent. Donc, basé sur le modèle que j'ai créé dans ma base de données ou dans mon code, il crée la table pour moi. Donc ici, si je vais à commander des articles, je vais voir à commander des articles qui sont créés sur la base du facteur et ils ont le même ID qui sont dans la base de données. Alors maintenant, nous sommes prêts à créer notre commande. Donc ici, nous n'avons rien, donc nous n'avons pas de table de commande. C' est parce que nous avons commenté cette sauvegarde. Donc, ici, après que la commande est créée ou enregistrée, alors je vais la renvoyer. Supprimons ce journal de console pour ne pas avoir notre journal plein de données inutiles. Alors, je vais maintenant voir le facteur. Passez une commande. Super. Nous avons maintenant créé une commande, et nous avons ici, le nouvel ID est créé de la commande. Donc, si je vais à nouveau à Atlas, je vais me rafraîchir. Et nous verrons que la table des commandes est créée automatiquement parce que nous avons le modèle de commande. Alors ce que j'ai demandé à Mongoose de créer pour moi ce modèle de commande, puis il a créé la table. Donc, ici, nous avons d'autres éléments, l'ID d'objet des nouveaux éléments de commande qui sont créés à nouveau ici. Donc, chaque fois que je passe la commande, je crée un nouvel article de commande. Dans la prochaine conférence, nous allons voir comment obtenir des articles de commande ou la commande elle-même de manière plus détaillée. Donc, nous n'obtiendrons pas seulement des ID, nous obtiendrons plus détaillés. Nous verrons l'article de la commande, ce qu'il contient, et aussi tout. Par exemple, quel utilisateur l'a créé, pas seulement les ID. 50. Obtenez des détails de la commande et Populate produits de produits de commande et de données d'utilisateurs: Ok, maintenant nous allons obtenir une liste de commandes car nous avons maintenant un ordre dans la base de données. Nous avons déjà créé une demande GET pour une liste de commandes. Essayons maintenant avec un Facteur. J' irai ici, créer la même chose que la demande de poste, mais ce sera un GET et l'autorisation parce que toujours quand je crée une nouvelle API, je dois l'avoir authentifiée. Ou nous excluons cette API de l'authentification comme nous l'avons vu précédemment. Donc maintenant, je vais utiliser ce jeton obtenir des souris de liste, nous avons une liste d'ordres. Donc, nous n'avons maintenant qu'un seul ordre dans la base de données. Et nous l'obtenons avec la requête GET car c'est un tableau. Remplissons l'utilisateur afin que nous puissions voir les détails de l'utilisateur à l'intérieur de cette requête. Parce que par exemple, je veux voir dans le panneau d'administration, dans le tableau des commandes, je veux voir les utilisateurs qui les ont commandés. Donc, nous allons dans le code et nous disons juste dot populate. Que remplir l'utilisateur. Sauvegardez. Essayez-le encore avec Postman. Nous obtenons maintenant le détail de l'utilisateur, tous ses détails. Mais pour moi en tant qu'utilisateur ou administrateur, je n'ai pas besoin de toutes les informations de l'utilisateur. Donc je veux juste, par exemple, son nom. Pour faire ça. Nous venons de mettre après la population de l'utilisateur, nous mettons les champs que nous voulons remplir. Donc tout ce que j'ai, par exemple, le nom et dans Postman, quand j'envoie cette demande, je reçois seulement le nom. Postons une autre commande avec des données différentes. Par exemple, je dirai ici au lieu de pays, République tchèque, Je vais mettre USA. Donc ici, je vais y aller et dire, je n'utilise pas un numéro différent. Exemple : 1, 2, 3, 4, 5, 7. Donc ici, je vais poster une autre demande ou une autre commande. Donc, dans ce cas, je vais y entrer au moins deux ordres. Nous pouvons donc également trier les commandes par date. Donc parce que nous avons déjà ce champ de date commandé, donc nous avons la date ici par le point. Maintenant, nous pouvons aussi trier cela par date. Pour ce faire, c'est très simple. Je vais juste ici et après la population de l'utilisateur, je dis trier en fonction de la date de la colonne ordonnée. Donc, ici nous avons, vous vous souvenez d'une date ordonnée. Et sur la base de cette colonne, je veux trier ma sortie. Alors on y va, Facteur, essaie de récupérer la liste, et on voit qu'on les ordonne par date. Comme vous le voyez, la commande ici est de la plus ancienne à la plus récente. Donc, nous avons déjà celui-ci le 23 décembre à ce moment. Et nous avons maintenant celle-là. Ainsi, nous pouvons commander du plus récent au plus ancien. Et je pense que ce qui intéresse l'utilisateur de le faire. Nous alignons simplement cela dans un objet , puis disons que cet objet égal à moins un. Donc, quand je dis dans la méthode de tri, ce cas, alors cela signifie que les commander du plus récent au plus ancien. Donc, si je me rafraîchis et aller chez Facteur tout de suite, et nous verrons que nous avons le plus récent 1 d'abord, puis le plus ancien. Vous pouvez consulter la documentation de la méthode de tri. Il a beaucoup de fonctionnalités. Vous pouvez donc les utiliser pour trier vos sorties en fonction d' un champ spécifique ou d'un ordre spécifique. Nous allons maintenant obtenir un détail de demande ou un détail de commande. Donc, la même chose est ici. Je poste ou je reçois cette demande collée ici. Et puis au lieu d'avoir le tri et la population, nous avons trouvé par ID. Et ici, nous spécifions l'ID. Et l'ID sera la requête point params. Parce que ses paramètres ont pris ID. Et nous avons été renommés ceci pour commander seulement au lieu de la liste ordonnée. Ici, nous avons l'ordre, l'ordre, l'ordre. Je vais maintenant à l'avant et je reçois, par exemple, celui-ci. Après cela, j'ai mis cet ID de la commande et j'envoie cette demande. Et je n'obtiendrai que cet ordre avec la population de l'utilisateur. Nous en venons maintenant au point important. Nous avons ici, les articles de commande uniquement comme ID. Nous voulons voir les produits sont à l'intérieur de ces articles et la quantité qui, nettoyons un peu notre code. Donc nous avons ici peupler. Et nous aurons également enseigné peupler d'un autre domaine qui est des articles de commande. Nous essayons ça maintenant. Nous verrons que nous avons obtenu le produit et la quantité. Mais que faire si je veux aussi remplir ce produit d'une manière que nous voyons le détail du produit à l'intérieur ou les articles. Donc, comme nous l'avons vu ici, l'utilisateur, nous avons tous ses détails. La différence ici que nous avons un tableau d'entre eux. Nous devons donc savoir comment remplir le produit à l'intérieur de ce tableau d'articles de commande. Pour ce faire, nous avons ici une façon différente de peupler. Donc, au lieu de faire cela, la méthode populate sera un objet qui acceptera un chemin. Et ici, je mets l'article de commande ou des articles de commande. Et à l'intérieur de cet objet, je dis aussi remplir pour moi le champ, qui est appelé produit. Donc, je vais le mettre ici et essayer à nouveau. Nous verrons comme une magie. Nous avons toutes les informations sur les articles de commande. Et dans notre base de données, l'ordre ressemble à ceci. Donc, si nous actualisons, nous avons notre commande uniquement avec des ID et les articles de commande ne sont que des ID. Donc, de cette façon, nous gardons une petite taille les documents de la base de données, et nous faisons les relations en utilisant la flexibilité Mongoose. Si nous voyons aussi ici que le produit a la catégorie et la catégorie est également id. Si je veux remplir aussi la catégorie, nous ne pouvons pas le faire. Pas de problème. Nous pouvons dire aussi que c'est peuplé. C' est un chemin qui est appelé produit et ensuite remplir la catégorie qui se trouve à l'intérieur de ce produit. Donc, si nous allons à nouveau, envoyer cette demande, nous verrons la catégorie est également remplie pour toute la commande. Donc, pour le rendre plus propre, nous ne pouvons pas avoir ici ce chemin, donc nous pouvons comprendre comment il a été construit. Donc ici, j'ai dit ici, celui-là. Maintenant, j'ai le code propre. Donc, c'est la façon de faire la population de la relation entre les tables dans la base de données. Nous voyons dans le futur. Maintenant, comment nous supprimons ces commandes et comment nous mettons à jour l'état de cet ordre, qui sera dans la prochaine conférence. 51. Mise à jour de l'état de la commande APIE de REST: Après avoir fait la demande GET et poster la demande de commande, Faisons la demande de mise à jour que les exigences de mon problème vers le haut. L' administrateur du A-Sharp veut seulement modifier le statut de la commande. Ainsi, lorsque certains clients passent une commande à l'e-shop, le propriétaire de la boutique veut traiter cette plus ancienne. Ainsi, de cette façon, la commande sera transférée de la flexion, puis à traitée, puis par exemple, à déplacer puis à l'état livré. Nous avons donc juste besoin de mettre à jour l'état de la commande. Nous avons vu précédemment comment nous mettons à jour, par exemple, le produit. Nous mettions à jour tous les champs de sorte que l'utilisateur ou le frontal doit m'envoyer à nouveau tous les champs. Mais ici, dans les ordres, nous avons juste besoin de mettre à jour un champ, qui est le statut, qui est celui-ci. Pour ce faire, faisons-le aussi vite. Nous copions l'une des demandes, par exemple, à partir de catégories. On a celui-là. Nous le copions dans les ordres. Cette pièce d'identité extérieure. On a besoin de la carte d'identité. Et puis je dirai ici que j'ai l'ordre. Ici. Je demande le modèle de commande. Et ici, nous ne passons rien, seulement le statut. Ainsi, le statut viendra de l'exigence ou de la requête point body, point status. De cette façon, s'il n'y a pas de commande affectée avec cet ID, alors j'envoie une erreur. Sinon, je renvoie la commande mise à jour. Bien sûr, vous pouvez ajouter tous les champs que vous souhaitez mettre à jour. Mais les exigences pour cette e-boutique, je n'ai besoin que de mettre à jour le statut. Sauvegardons ça et essayons ça avec le facteur. Donc, nous avons déjà cette commande, Nous allons mettre à jour. Donc, j'aurai une ligne et le type de cela ou est JSON. Donc ici, je vais dire que le statut sera, par exemple, expédié. Donc j'ai mis ici expédié. Et nous devons également changer cette demande pour mettre. Et nous l'envoyons. Et nous avons eu le même ordre qu'un quart de travail. Alors revenons à l'ordre. On a une arrivée ici, vérifie-le. Nous voyons déjà le détail de la commande et nous avons le statut de la commande sera expédiée. La suppression de la commande sera la même. Copions aussi l'ordre Supprimer de la catégorie. Et ici, nous allons ajouter l'ordre, trouver par ID, et puis il retournera pour moi commande. S' il y en a ou là, alors retournez le vrai succès. Sinon envoyer une erreur ou pas trouvé notre erreur dans le serveur. Alors essayons ça avec Postman aussi. Je vais changer cela de get à delete. Nous avons supprimé et nous obtenons le succès. Cette catégorie est supprimée. Nous devons réparer ça parce que ce n'est pas une catégorie. Nous devons le faire comme ordre. Et ici aussi commander. Donc maintenant, si je veux obtenir une liste des commandes, encore une fois, nous n'aurons qu'un seul ordre, qui est celui qui a appelé USA. Et nous n'en avions qu'un. Peut-être que quelqu'un va demander Qu'en est-il des articles de commande ? Sont-ils supprimés ou non. Vérifions cela dans la base de données. Dans notre base de données, nous avions des articles de commande et nous devrions avoir deux commandes seulement pour commander des articles, mais nous voyons que les articles de commande sont toujours là. Donc, nous avons un problème ici. Nous devons également supprimer les articles de commande de la commande qui est supprimée. Donc, je vais laisser cela comme un exercice pour vous. Donc, l'exercice sera juste de supprimer les articles commandés aussi après la suppression de la commande. Et puis je vous verrai dans la vidéo suivante pour voir la solution, comment nous avons mis en œuvre la suppression des articles de commande après que nous avons supprimé la commande. 52. Calculer le prix total d'un cours d'un cours d'un ordre avec Mongoose: Envoyer le prix total à partir de l'interface n'est pas une bonne pratique. Par exemple, si un hacker a pu envoyer une commande avec un prix total faux en quelque sorte, alors il sera stocké dans ma base de données avec un prix total faux. Donc peut-être que quelqu'un a l'ordre était cent, dix cents dollars, mais il l'a simulé et il l'a fait avec 2$. Quand j'ai une boutique en ligne très occupée, je ne le détecterai pas. C' est donc mieux après que l'utilisateur envoie les éléments de commande, les ID ou les éléments de commande en général au backend. Nous calculons cela en interne dans le backend en fonction de ce que nous avons dans la base de données. Donc la source de la vérité est une base de données. Donc, ce que je dois faire est de faire une boucle sur les éléments de commande que j'ai reçus de l'utilisateur ou du front end. Et puis je résolve les articles de commande. Je reçois le produit lié au produit. Et avec la quantité, je multiplie cela et calcule le prix total. Donc tout vient de la base de données. Alors essayons de le faire. Ici. Nous avons obtenu des ID d'article de commande résolus. Donc, d'une manière ou d'une autre, nous devons remplacer cela par une variable que nous calculons en interne. Alors appelons ça un prix total. Et ce prix total viendra d'une constante où nous allons résoudre ces articles de commande. Donc, de la même façon, nous cliquons sur Créer une constante, appeler un prix total. Parce que nous allons faire une boucle sur les articles de commande exactement de la même manière ici. Donc, nous allons le faire comme promis point tout. Donc ici, je vais obtenir les éléments de commande résolus ID et mapper sur eux. Et je vais obtenir l'ID de l'article commandé. Je vais récupérer l'élément de commande de la base de données car il est déjà stocké ici dans la base de données. Donc exactement comme ici, disons asynchrone pour notre article de commande. Et nous obtenons l'article de la commande à travers l'attente. Et nous obtenons aussi le modèle de l'article de commande. Et trouver par ID, l'ID que j'ai obtenu ici sur la carte. Et puis à l'intérieur de cet article de commande, nous n'obtiendrons que l'identifiant du produit et la quantité. Nous devons donc également remplir le produit. Et pour le rendre plus rapide, nous ne pouvons demander que le prix. Donc ici, je vais obtenir l'article de la commande retourné avec le champ de produit à l'intérieur, seulement le prix. Et puis je vais aller à Create Constant prix total, un seul. Et je dirai l'article de commande que j'ai obtenu de la base de données, point produit, prix point, parce que nous avons le prix rempli déjà multiplié par la quantité point de l'article de commande. Dans ce cas, je vais obtenir aussi la quantité multipliée par le prix. Je vais obtenir le prix total d'un article. Donc, cartographier sur tout ce tableau, je voudrais après cela, retour, seulement le prix total. Donc ici, je vais avoir un tableau de prix totaux pour chaque article de commande. Essayons donc de consigner ce tableau de prix totaux pour être sûr que tout va bien fonctionner. Et je vais poster une nouvelle demande ou une nouvelle commande. J' ai une erreur ici parce que je suis console journal une promesse. Donc, ici, comme nous l'avons fait auparavant, que nous avons ici seulement une promesse, retourné, promis du tout, toutes promesses combinées, nous avons mis un poids. Donc c'est tout simplement que nous pouvons aussi mettre un poids ici, comme le poids et résoudre cette promesse après tout est fait à l'intérieur. Essayons encore. Redémarrez notre serveur. Essayez de poster. Nous verrons ici que nous avons eu un tableau de deux articles ou des articles de commande avec leur prix total. Nous devons donc faire fusionner ou résumer ces deux prix à un. Pour ce faire, nous ne pouvons pas simplement faire un prix total constant. Et ce tableau de prix total, je vais le réduire. Et c'est une méthode réduite. C' est un moyen célèbre d'obtenir la somme de tous les nombres à l'intérieur du tableau. Donc j'ai a et b, retournez pour moi un plus B. Et ici nous ajoutons un 0. Donc, la valeur initiale est 0, puis combinez a et B, ou combinez chaque élément de ce tableau. Donc, ici, après avoir obtenu le prix total, nous pouvons le placer ici, redémarrer notre serveur, placer une demande, et nous verrons que nous avons créé une demande de poste avec la commande. Et le prix total est 146, qui est combiné de deux articles de commande. Prenons aussi ce détail de commande. Nous allons ici, nous le mettons dans la demande GET pour obtenir les détails. Donc, nous allons voir le premier produit, nous avons un 32 et la quantité est trois. Et aussi le deuxième produit est la quantité 2, et le prix est de 25. Le prix total sera de 146. De cette façon, nous garantissons que le prix total provient uniquement de notre base de données, pas de l'avant. Donc, tout d'abord, nous avons créé les articles de commande comme nous l'avons vu auparavant. Ensuite, nous avons obtenu le prix, prix total de chaque article de commande, puis nous les combinons ou les résumons en un seul numéro. Et puis nous avons créé la commande avec le prix total, qui vient totalement de la base de données. 53. Obtenez Total Ventes de ventes de magasins en passant par la somme: Comme toujours. Et à la fin de chaque module, nous faisons toujours un message ou une demande GET de certaines données statistiques. Ce qui m'est venu à l'esprit ici que par exemple, je veux montrer dans le tableau de bord du panneau d'administration de l'application combien de totaux collines j'ai dans mon e-shop entière. Donc, le propriétaire de la boutique, quand il a enfermé dans le panneau d'administration, il voit le total des ventes et il sera heureux. Donc, comme toujours, créons une requête get. Et la route sera obtenir et le total des ventes. Et ici, nous allons, après avoir passé cette API, après les commandes, nous obtiendrons le total des ventes. Donc, ici, nous avons async, demande et réponse. Et ce sera une méthode ROM. Et nous définissons une variable, nous l'appelons le chiffre d'affaires total. Et nous obtiendrons le total des ventes directement de MongoDB. Donc, en utilisant Mongoose, ici, j'ai attendu, le modèle de commande. Ensuite, j'utilise une méthode appelée agrégat. Et l'agrégat, je peux regrouper comme jointure, nous pouvons dire dans la base de données relationnelle, toutes les tables ou tous les documents à l'intérieur de cette table à un. Et puis j'obtiens un de ces champs dans cette table et j'utilise l'une des méthodes Mongoose, comme par exemple, certains sur ce champ. Donc, il retournera pour moi la somme de tous les champs, quel nom, Prix total. Si vous vous souvenez, nous avons un prix total calculé déjà, comment nous avons vu dans la conférence précédente dans chaque ordre. Nous devons donc résumer tous ces prix totaux en un en utilisant certains. Donc, pour ce faire, nous avons ici un objet. Nous sommes en train de regrouper la table. Et ici, à la méthode, nous disons que l'ID est nul. C' est comme ça. Et nous nommons le champ que nous voulons retourner dans notre API. Donc, je dis que le total des ventes est la somme. C' est un mot réservé en Mongoose du prix total. Le prix total est un champ dans la commande, et nous l'avons calculé ici pendant que nous créons la commande. Alors je vais obtenir le total des ventes en résumant tous les prix totaux. Ensuite, nous vérifions s'il n'y a pas de ventes totales, puis retourné pour moi, erreur response.status. Et puis par exemple, nous disons 400. Pas d'envoi, la commande, ventes ne peuvent pas être générées. Sinon, nous disons réponse point envoyer. Le total des ventes est le total des ventes. Essayons ça maintenant avec Postman, je vais ici, je dis obtenir le total des ventes. Nous avons envoyé une demande. Nous voyons que nous avons tableau avec ID null et les ventes totales. Nous avons donc vu que nous avons obtenu exactement ce que nous avons construit dans le groupe. Donc, si je supprime cet ID null, j'aurai une erreur car Mongoose ne peut pas renvoyer d'objet sans ID ou ID d'objet 2, comme nous le voyons ici dans cette erreur, il dit qu'une spécification de groupe doit inclure un ID. Il vaut mieux le remettre. Ou vous pouvez également donner de l'ID en utilisant les spécifications Mongoose, Il est préférable de le mettre comme null. Donc nous avons vu ici que nous avons un tableau. Nous pouvons également directement BOP cette baie et prendre seulement le total des ventes. Donc, nous pouvons dire ici, retourné pour moi les ventes totales point pop parce que c'est un tableau. Et puis le total des ventes. Donc, dans ce cas, j'ai obtenu le premier élément de ce tableau, ou l'élément léger car il ne retourne qu'un tableau avec un élément. Donc, je dis, donnez-moi cet article et le total des ventes que j'ai spécifié ici. Nous essayons encore une fois. Nous envoyons cette demande, nous obtiendrons le total des ventes est 290 à cela parce que nous avons ici, si nous obtenons la demande, nous avons des commandes. Donc, le premier ordre a 146 et le deuxième ordre a aussi 146. Nous pouvons également obtenir combien de commandes sont créées ou passées dans ma boutique avant comment nous faisons un compte total des produits. Donc, nous pouvons ici copier ceci à partir de l'API du produit et le placer dans les commandes. Et nous disons ici ou là, compter notre sous-dénombrement ou le compte du titulaire du compte et ici l'ordre. Et avec les documents de comptage, nous obtiendrons le décompte et retournerons dans notre compte de commande, puis nous l'obtiendrons. Essayons encore ça dans notre Facteur. Donc ici, je dis GetCount. Et nous verrons que nous avons trois ordres. Donc maintenant notre API pour les commandes est terminée. Nous sommes maintenant prêts à utiliser toutes les API liées aux commandes dans le front end. Et dans la section suivante, nous allons revenir au produit pour télécharger les images. Vous vous souvenez, nous avons ici des images et des images. L' image sera l'image principale de leur produit, et les images contiendront les images de la galerie de leur produit. J' espère que vous avez apprécié cette section et vous voir dans la prochaine. 54. Obtenez des commandes des utilisateurs: Au premier plan, lorsque l'utilisateur est connecté, il a besoin de savoir quelles commandes il a commandé dans l'historique. Nous avons donc besoin d'avoir au moins un historique des commandes. Donc, de cette façon, cette API sera exactement comme obtenir le moins de commandes, quelque chose comme ça, mais elle sera spécifiée uniquement pour un utilisateur spécifique. Prenons donc ces requêtes GET et copions-les vers la dernière. Et nous dirons ici que je veux obtenir, par exemple, les utilisateurs plus âgés ou les commandes des utilisateurs. Et nous devons spécifier en tant que, par exemple, en tant que paramètre, l'ID utilisateur. Donc, ici, nous disons l'ID utilisateur. Donc, quand j'envoie une demande du frontal ou de notre API, nous devons spécifier l'ID utilisateur pour lequel je veux obtenir les commandes. Et comme une condition pour la recherche, nous disons objet, champ utilisateur doit être la requête point params point. Le même paradigme que j'ai ici, l'ID d'utilisateur. Et peut-être que nous n'avons pas besoin de remplir l'utilisateur lui-même. Nous devons remplir les produits à l'intérieur de cette commande. C' est donc exactement comme nous l'avons fait ici dans le détail de la commande, comment nous avons rempli les articles de commande, les produits et la catégorie. Nous copions le même et nous le passons ici. Donc, dans ce cas, nous verrons que les articles de commande sont remplis avec les produits et ils ont commandé du plus récent au plus ancien pour ne pas avoir de noms déroutants. Renommons ça. Par exemple, nous pouvons dire utilisateur ou leur liste. Et ici la liste des commandes utilisateur ici aussi l'utilisateur ordonné. Exécutons le serveur. Ph commence. Le serveur exécute la connexion à la base de données prête ? Nous essayons ça dans Facteur. J' ai donc ici des ordres, obtenir des ordres d'utilisateur, et je passe l'ID de l'utilisateur, que je veux avoir ses ordres. Donc je passe celui-là et j'ai d'autres objets. Ils ressemblent à ça. Et une autre commande, il a également des articles de commande. Nous avons donc les trois commandes pour cet utilisateur. Nous verrons ici le même nom d'utilisateur sont le même ID d'utilisateur. C' est toujours n égal à 4, 4. Et voici un autre. Donc, à la fin de cette section, vous verrez que vous êtes en mesure de créer toutes les requêtes ou toute API dont vous avez besoin en fonction de ce que les besoins dans le front end. Ainsi, par exemple, nous avons obtenu ici les commandes de l'utilisateur et aussi nous avons obtenu, par exemple, combien de commandes j'ai dans mon problème. C' est tout au sujet des API. Dans la section suivante, nous allons apprendre à télécharger des fichiers sur notre serveur, comme des images ou des pièces jointes en général. Dans cette conférence, il y a pièce jointe du code de ressource où nous sommes arrivés dans ces ordres. Et vous pouvez le télécharger et essayer par vous-même de faire des choses différentes avec les API en fonction de vos besoins. 55. Support de produits : images de produit et galerie de galerie de télécharger: Maintenant, nous arrivons au dernier module, qui concernait le dos et le développement. Nous devons maintenant télécharger les images avec notre produit, comme nous l'avons vu auparavant, le produit contient deux champs. L' un d'eux est une image principale et le second champ est les images. Alors, où sera plus de description sur le produit comme une galerie d'images ? Donc, dans ce module, vous verrez l'étape principale est l'installation de la bibliothèque Walter. Library est une bibliothèque célèbre utilisée pour télécharger des fichiers sur le serveur à l'aide de Node.JS. Et dans la deuxième étape, nous trouverons la meilleure configuration pour notre e-Sharp car nous devons configurer cette bibliothèque pour utiliser et télécharger les fichiers sur notre serveur. Le troisième, nous allons voir comment utiliser la destination et téléchargé les noms de fichiers. Toujours lorsque l'administrateur télécharge un fichier ou une image, il doit spécifier le nom du fichier. Mais non, nous ne pouvons pas le faire pour l'administrateur ou pour l'utilisateur. Nous n'avons pas à le laisser nommer le dossier. Vous pouvez télécharger n'importe quel fichier et il sera codé dans notre serveur. Utiliser Postman est également très important pour notre cas ici pour tester le téléchargement d'image, nous allons voir comment tester le téléchargement d'image avec un facteur en utilisant le téléchargement d'un fichier ou plusieurs fichiers. Et nous ne permettons pas à l'utilisateur de télécharger quoi que ce soit. Nous avons besoin qu'il télécharge uniquement des types spécifiques d'images, comme avec l'extension PNG pour J Beck. Et bien sûr, tout cela fait pour un seul fichier. Maintenant, nous devons étendre la bibliothèque pour permettre de télécharger plusieurs fichiers. Et plusieurs fichiers sont nécessaires pour que nous puissions télécharger de nombreuses images pour la galerie de produits. Et enfin, nous allons voir comment récupérer ce produit avec les images et les images de la galerie pour les voir en avant. Bien sûr, nous allons chercher seulement l'URL de l'image. J' espère que vous apprécierez ce module et vous verrez dans la prochaine conférence où nous allons commencer à installer la bibliothèque de mortier. 56. Configurer le côté: Ok, donc nous devons d'abord configurer le back-end pour accepter le téléchargement des fichiers. Pour ce faire, nous devons installer une bibliothèque appelée Walter. Comme n'importe quelle bibliothèque, npm installe Walter. Et avec cela, nous allons installer la bibliothèque et l'utiliser pour télécharger des fichiers sur notre serveur. Et comme toujours, nous faisons constante, Walter et mortier requis. Voyons la documentation de cette bibliothèque. Si vous allez à Google et tapez moteur, vous verrez les paquets MPM, le site npm, où nous avons toute l'utilisation de cette bibliothèque. Pour voir une utilisation plus détaillée ou une utilisation à jour, vous pouvez accéder à la page d'accueil de la bibliothèque. Donc ici, je clique dessus et il me conduirait à la page d'accueil de la bibliothèque de mortier. Donc, l'utilisation la plus simple de cette bibliothèque sera comme suit, comment il est dans la documentation. Donc, tout d'abord, nous avons besoin d'un formulaire et ce formulaire sera fourni par le facteur, comment nous verrons plus tard. Et la première utilisation ici que nous pouvons appeler la bibliothèque molto , puis la configurer avec une destination sur notre serveur du dossier. Ainsi, lorsque l'utilisateur télécharge un fichier via le formulaire, il sera stocké dans le dossier uploads, qui sera à la racine de l'application back-end. Et après cela, dans chaque demande de poste, par exemple, nous avons un article de produit que nous devons passer non seulement l'URL et la fonction de demande et de réponse, nous devons également passer le téléchargement, je veux dire le téléchargement de Walter. Donc ici, nous pouvons passer le téléchargement et nous disons un seul, nous passons le nom du champ, qui est vu de l'extrémité frontale. Donc, comme vous le voyez ici, le nom du champ s'appelle Avatar, et ici il est passé dans la requête. Mais ici, le fichier téléchargé sera exactement le même nom où l'utilisateur l'a téléchargé. Donc, nous aurons un problème quand un client, ou désolé, l'administrateur va télécharger le fichier. Il aura, par exemple, un autre fichier portant le même nom. Donc, ce fichier remplacera l'ancien fichier. Et dans ce cas, nous avons un problème entre les produits peut être que je vais perdre des noms de produits ou des images de produits. Donc, la meilleure façon nous avons besoin d'avoir plus de contrôle sur le nom des fichiers et le nom de la destination. Ainsi, par exemple, nous avons besoin, chaque fois que le fichier téléchargé est téléchargé, nous devons le renommer en quelque sorte, un nom unique, puis le stocker dans notre serveur. Pour ce faire dans plusieurs bibliothèques, il existe une autre option d'avoir un contrôle complet sur le nom des fichiers, qui est appelé stockage sur disque. Et avec cet exemple, nous allons construire notre API de téléchargement. Donc, nous allons utiliser cette partie. Prenons exactement la même chose et copiez-le dans notre application. Et nous dirons que le stockage est le stockage sur disque Walter, qui a deux champs, le contrôle de la destination et le contrôle du nom de fichier. La destination sera une fonction où il a la requête elle-même et le fichier et le rappel. Le rappel sera retourné s'il y a une erreur dans le téléchargement et nous y assignons la destination. Donc, ici, mettons notre destination de téléchargement. On peut l'appeler public et les uploads. Donc, nous avons ici, nous aurons un dossier appelé téléchargements publics. Nous pouvons créer ce dossier. Donc, nous pouvons dire ici dans le back-end, nous pouvons dire uploads. Et à l'intérieur, ou désolé, on pourrait avoir public d'abord. Public. Et il est public sera au niveau de la racine. Donc, il aura, par exemple ici. Et le public, le dossier des téléchargements sera à l'intérieur. Donc, ici maintenant, nous avons des téléchargements publics. Donc, à l'avenir, lorsque nous téléchargerons le fichier, nous le verrons ici situé directement dans les téléchargements publics. Dans le nom du fichier. Ce sera la même chose. Il contiendra la requête rock et le fichier. Et nous devons en quelque sorte renommer le fichier pour qu'il corresponde nos besoins et comment il sera localisé dans les téléchargements. Il y a donc une autre façon comme il crée ici. Par exemple, le, certaines mathématiques aléatoires pour avoir un nom aléatoire de l'application ou sur le fichier. Et puis il a mis le nom de fichier original avec tiret et le suffixe unique qu'il a créé auparavant. Faisons une autre façon. Donc, je créerais une constante. Appelons ça un bon nom. Et ce nom de fichier sera le fichier lui-même que nous avons obtenu ce nom d'origine. C' est déjà défini. Et puis nous disons, en quelque sorte pour remplacer les espaces, ce n'est pas agréable d'avoir des espaces dans le nommage des fichiers sur le serveur. Parce que lorsque vous avez l'URL, vous aurez l'URL laide où elle remplacera comme par esperluette t2 pour les espaces. Mais ici, nous pouvons avoir exactement notre remplacé les espaces avec split. Donc, je fractionne le nom de fichier en fonction de l'espace et le remplacement ou la jointure. Encore une fois cet espace avec un tiret. Vous pouvez également utiliser une autre méthode, qui est par exemple , remplacer chaque espace par un tiret. Les deux voies vont bien. Donc, nous pouvons également ajouter un préfixe ou un suffixe à ce nom. Donc, ici, nous pouvons dire le nom du fichier. Et par exemple, nous pouvons dire beaucoup de date maintenant. Donc, ici DataNode maintenant méthode, si nous le voyons, il retournera le numéro du jour. Donc, nous pouvons l'essayer avec la console du Google Chrome. Tu peux dire rencard maintenant. Et vous verrez que vous avez le numéro de la date et de l'heure maintenant. C' est donc un grand numéro unique pour créer nos fichiers. Donc, après cela, nous avons créé une constante. Faisons-le comme une constante, pas comme un VAR. Et cette constante est appelée upload. Encore une fois, appelez-le, par exemple, les options de téléchargement. Et ces options de téléchargement, nous devons le transmettre à notre demande de poste où nous créons le produit exactement de la même façon qu'il est décrit dans la bibliothèque de Malte. Donc, si nous voyons ici que nous avons aussi le simple de téléchargement et Avatar et le nom du champ. Nom du champ, nous devons l'envoyer de l'avant. Donc, ici, nous disons les options de téléchargement, point , unique, et le nom du champ où je veux envoyer à partir de l'extrémité frontale. Donc, je dis, par exemple, l'image. Mais ici, lorsque nous créons le produit, nous analysons l'image de point de corps de requête point. C'est faux. Nous devons éditer ce champ pour avoir le chemin complet de l'image. Donc je suis Walter nous a déjà envoyé avec cette demande, le dossier. Donc, nous ne pouvons pas dire par exemple, fichier constant est le fichier point de requête, le nom de fichier point. Et ce nom de fichier venant d'ici où nous avons configuré le nom de fichier du fichier téléchargé. Donc, nous aurons le nom exactement comme nous l'avons de cette façon. Comme le nom d'origine du fichier, remplacé par des tirets, puis tiret, ils ne savent pas. Faisons-le de cette façon. Nous avons un nom de fichier et ensuite nous mettons le nom de fichier ici. Mais quand je veux récupérer ces données dans le front end, et je veux voir le, OU par exemple, afficher l'image dans le front end. Je vais avoir une question à ce sujet. Je n'obtiendrai que le nom du fichier. Par exemple, j'obtiendrais l'image 300, 300 points J Beck. Et c'est un problème pour nous parce que dans le front end ne connaît pas le chemin d'origine du fichier. Nous devons en quelque sorte avoir le chemin complet avec l'URL aussi du backend. Donc, je vais dire http, localhost 3000 et le dossier de téléchargement. Et puis l'image avec le nom et l'extension. Nous nous sentons également ici pour ajouter l'extension. Donc, nous avons le nom de fichier seulement comme ça. Nous devons également éditer les options de nom de fichier ici. avoir aussi avec l'extension. Nous verrons cela lorsque nous validons le dossier dans les prochaines conférences. Mais maintenant nous allons nous concentrer sur cette partie que nous avons besoin de l'URL complète, pas seulement le nom du fichier. Pour cela, nous devons construire en quelque sorte cette chaîne. Donc on peut dire constant. Nous pouvons dire chemin de base, comme le chemin de base de leur application. Et nous pouvons le faire avec des ticks en quelque sorte, comme le point de requête. Il a un champ appelé protocole. Et ce protocole retournera pour moi le HTTP. Et puis nous verrons que nous avons une barre oblique deux-points et nous devons passer l'hôte. Nous pouvons donc le faire de la même manière. Nous pouvons dire demander point get, obtenir un champ spécifique appelé hôte. C' est un moyen d'obtenir l'hôte à partir de la requête. Alors maintenant, nous construisons notre chemin de base. Ajoutons quatre. C'est aussi la partie où nous disons le dossier où il est téléchargé. Nous devons donc ajouter aussi cette partie. Donc on peut le dire comme ça. Et puis nous ajoutons seulement le nom de fichier. Donc, nous pouvons dire ici, après cela, nous avons des backticks, chemin de base, et le nom du fichier. De cette façon, nous construisons notre URL API ou URL de fichier téléchargé. De cette façon, nous avons le chemin de base est cette partie et le nom du fichier, qui est cette partie. Essayons ça maintenant avec le facteur. Et essayez si tout fonctionne bien. 57. Test de la téléchargement d'images avec Postman: Maintenant, testons nos changements avec Postman. Vous vous souvenez, nous avons créé ici le champ d'image, qui aura le chemin et le nom de fichier qui est téléchargé. Je vais chez Facteur. Nous devons créer une demande de publication sur l'API du produit et nous ajoutons l'autorisation avec le jeton de barrière que nous avons obtenu auparavant. Et nous avons le jeton ici pour vous rappeler que nous avons obtenu ce jeton après avoir obtenu un utilisateur connecté. Alors je vais y aller. Et puis je regarde dans un utilisateur avec son e-mail et son mot de passe, puis je vais obtenir le jeton. Ceci. Si vous ne savez pas comment obtenir ce jeton, ce que nous avons expliqué dans le chapitre de l'utilisateur. Ok, mais maintenant comment on peut tester Postman pour télécharger des fichiers. Vous vous souvenez que nous envoyions le corps de la demande en tant que JSON, et que nous créions le JSON ici et nous mettions le nom du produit ou la description du produit ou la description et le prix. Mais ici, ce sera un peu différent. À l'avant, ce sera quelque chose comme une forme. Formulaire était des champs comme vous le voyez à droite de l'écran. Donc, ici, nous avons un champs où nous allons le remplir et les envoyer au backend. Et le champ de fichier où l'utilisateur peut télécharger un fichier. Cela sera rempli avec des données de fichier, et les données de fichier seront envoyées au backend via une donnée de formulaire. Donc, nous devons créer quelque chose comme une donnée de formulaire et un homme gaufré. Si vous souhaitez simuler un formulaire, vous pouvez créer des données de formulaire et chaque champ sera nommé ici avec sa valeur. Par exemple, j'aurai ici le nom du produit. Et par exemple, le produit que je veux poster sera le produit six. Et je veux aussi, par exemple, une description du produit. Et ici sera produit cherche description. Nous devons donc mettre en quelque sorte tous les domaines que nous voulions comme nous l'avons vu précédemment, le modèle de produits que nous avons ici. La description lit, description, images et tout ici. Donc nous avons besoin du champ d'image, laissez-moi sentir les champs ici dans le facteur. Et puis nous parlerons des images. Donc, ici, nous avons rempli tous les champs de formulaire que nous devions envoyer au backend et avec leur valeur. Donc, pour l'image ici, il sera evalue, ne sera pas, par exemple, des textes comme ici, ou une valeur, ou un nombre ou un booléen. Ce sera un fichier. Alors comment on peut faire ça en tant que fichier ? C' est très simple. Nous avons facteur, Il y a un truc que quand vous mettez la souris, le champ, où voulez-vous changer ? Vous pouvez sélectionner que le type de ce champ peut être un fichier. Lorsque vous mettez le fichier, vous aurez la possibilité de sélectionner un fichier à partir de votre PC. Exactement comme la façon dont vous téléchargez un fichier dans le formulaire Web. Alors sélectionnons une image. J' ai ici, beaucoup d'images, par exemple, celle-ci. Et nous allons le télécharger et envoyer la demande de poste. Nous verrons que la demande de poste est créée exactement comment nous l'avons fait dans le backend. Et nous avons l'image comme une URL complète. Et le fichier image avec la même extension ici. Mais si vous voyez ici que nous avons une extension et ensuite le nom, donc nous avons un problème ici. Donc, nous devons en quelque sorte exclure cette extension et mettre ce point de date maintenant après, puis nous mettons l'extinction à la fin. Faisons ça vite. Nous allons changer leur configuration ici du nom de fichier dans Walter pour obtenir le nom de fichier dérivé avec l'extension. Donc, changeons cette partie avec les backticks sera plus agréable dans le code. Donc on peut avoir le nom de fichier tiret, ce doc de date maintenant. Et nous avons besoin ici pour ajouter en quelque sorte l'extension afin que nous puissions dire point et ici ce sera l'extension d'où je vais obtenir l'extension. Dans la prochaine conférence, nous verrons comment valider ces fichiers qui arrivent au back-end. Nous avons donc besoin que l'utilisateur ne télécharge que le type spécifique d'images. Nous avons besoin de lui pour télécharger seulement JPEG et PNG. Nous ne pouvons donc pas le laisser applaudir, par exemple, un fichier PDF ou, par exemple, un fichier XML. Nous avons donc besoin d'une manière ou d'une autre du back-end pour refuser une requête quand il n'y a pas d'image. C' est ce que nous allons faire dans la prochaine conférence. 58. Valde les types de fichiers téléchargés: Ok, maintenant nous devons créer notre extension. Mais d'abord, nous avons dit que nous devons valider les fichiers téléchargés de l'utilisateur. Pour ce faire, nous devons créer une liste de fichiers qui sont autorisés à accepter ce backend complet. Donc, nous pouvons définir une constante. Nous disons la carte de type de fichier. Et cette carte de type de fichier contiendra une liste d' extensions qui sont autorisées à être téléchargées sur mon back-end. Le premier champ sera l'image PNG. Et puis PNG. Pourquoi je l'ai fait de cette façon. Donc ici, nous avons la clé comme un point d'image PNG et la valeur est un PNG. Cela nous en avons besoin à cause du type mime. Type de mime. Si vous le Google, c'est le type immédiat et connu sous extensions de messagerie Internet multifonction ou de type mime. Et c'est une norme qui indique la nature et le format d'un fichier de document. Chaque requête est envoyée au backend. Et le fichier qui contient le fichier de données ou les données de fichier, a également un type mime. Un type mime a un format comme celui-ci. Donc, je reçois et PNG document dxdy. Donc, de cette façon, je peux définir quel est le type du fichier qui arrive au backend. Les trois types les plus importants dont nous avons besoin dans notre back-end sont PNG, JPEG et JPEG. Donc, ici, nous aurons ces types. Et dans Walter, quand je veux configurer le nom du fichier, je peux trouver ici quelque chose appelé type mime. Donc, le type mime inclura les informations ou les informations de fichier avec la station d'encre du type mime ici. Donc, pour avoir la bonne extinction, nous le ferons de cette façon. Const extension égale au labo de type de fichier et obtenez la valeur de Type mime de lot de fichiers. Donc, ici, il ira à ce tableau et prendra le type mime, qui vient l'un d'entre eux, puis assigner l'extension comme une valeur. Et ici, je vais obtenir la valeur ou l'extension de mon nom de fichier. Ok, on a parlé de validation du dossier. Donc, nous devons en quelque sorte valider le fichier s'il est autorisé à être téléchargé ou non. Dans le rappel de la destination, vous pouvez définir une erreur. Donc, quand il y a une erreur, le rappel va le lancer ici. Donc, d'abord, nous pouvons faire une constante est un fichier valide par exemple. Et nous allons utiliser le même concept ici. Donc, il obtiendra le type mime et vérifiera s'il est trouvé dans la carte que j'ai assignée dans mon back-end. Et dans Node.JS, nous pouvons définir une erreur. Donc, je peux dire ici, laissez l'erreur de téléchargement est égale à nouvelle erreur. Et nous pouvons dire que l'erreur est un type d'image non valide. Et puis nous pouvons vérifier s'il y a, est valide. Ensuite, faites cette erreur de téléchargement en tant que nonne. Et puis utilise l'erreur de téléchargement dans le rappel. Donc, si le fichier est valide, il n'y a pas d'erreur et le rappel sera exécuté. Donc vous vous souvenez, nous avons téléchargé avec Postman un fichier et il a ce nom. Donc maintenant, nous n'aurons pas ce JPEG ici. Nous l'aurons à la fin. Peut-être qu'il restera ici, mais nous aurons au moins une extension à la fin. Testez ça avec un facteur. Maintenant, avec notre formulaire, j'ai les mêmes données, même image que j'ai téléchargée. Envoyez cette demande, j'ai eu l'image téléchargée. Et vérifions l'extension. Nous verrons qu'il a l'extension à la fin et le nom du fichier. Et voici l'image qui fonctionne bien. Essayons maintenant de télécharger un fichier, mais pas l'image. On peut dire, par exemple, un PDF. Donc, j'ai ici un test PDF. Je vais le télécharger. Et on a eu l'erreur. Donc, nous avons eu une erreur, ce type d'image non valide, que nous avons créé ici. Donc, ici, en première ligne, nous avons vu que lorsque nous avons téléchargé le PDF, nous avons eu le problème. Mais quoi, par exemple, J peg, envoyer cette requête. Nous n'avons aucun problème. Nous avons le chemin complet et nous avons aussi l'extension. Et chaque fois que je fais une demande de téléchargement, je reçois une nouvelle donnée et une nouvelle date et le fichier, c'est le même, mais il est téléchargé à nouveau avec un nom différent. En allant dans notre base de données sur Atlas, nous pouvons vérifier le fichier ou le produit qui est créé. Nous verrons que le produit a l'image et il a une URL complète. Cela sera donc accessible à partir de n'importe où dans notre application. Mais nous devons avoir quelque chose comme exclu de l'authentification. Parce que si vous vous en souvenez, toutes les API sont authentifiées. Donc, nous ne pouvons rien faire sans être authentifiés. Mais nous avons besoin que cela soit public, ce que nous verrons dans les prochaines conférences. Dans la prochaine conférence, nous verrons si le fichier existe vraiment. Donc, s'il n'y a pas de fichier ou d'image pour le produit, nous devons rejeter la demande. 59. Téléchargez des images avec la demande de produit post-demande de produit: Que se passe-t-il si le front end m'envoie leur demande sans dossier ? Ensuite, ce champ d'image requis serait refusé pour gérer cela. Vérifions d'abord si nous avons un dossier dans notre demande. Donc, je vais ici et créer une constante, appelez-le fichier et donnez à cette constante la valeur du fichier point de requête. Et exactement avec la catégorie, nous pouvons faire la même chose avec le fichier. Donc, je dis s'il n'y a pas de fichier, alors renvoyez une erreur à l'utilisateur qu'il n'y a pas de fichier. De cette façon, nous serons sûrs que notre demande ne passera pas sans un fichier. Lorsque nous allons à Postman et envoyer la demande sans fichier, nous obtiendrons qu'il n'y a pas d'image dedans les demandes. Dans la prochaine conférence, nous allons voir comment utiliser des images pour télécharger plusieurs images, qui seront, par exemple, une galerie sur le produit. Ainsi, dans une requête, l'utilisateur enverra plusieurs fichiers, pas un seul fichier. Et cela se produira dans le champ des images. 60. Téléchargez l'image avec la demande de produits PUT: Lorsque nous allons mettre à jour un produit, aussi, nous devons nous soucier de l'image. Que se passe-t-il si l'utilisateur veut télécharger une nouvelle image sur son produit, comme s'il voulait mettre à jour l'image elle-même. Pour cela, nous ferons les mêmes étapes que celles que nous avons faites pour le poste. Nous devons donc ajouter les options de téléchargement à la requête PUT. Donc, nous l'avons ajouté ici et nous allons faire quelques changements ici. Donc, d'abord, si l'utilisateur ne télécharge aucune image, alors je veux garder l'ancienne image qui est dans la base de données. Mais s'il télécharge une image, alors j'ai besoin d'envoyer et de télécharger à nouveau l'image dans les fichiers, puis ajouter la nouvelle URL à la base de données. Faisons écho à ce chien. Donc, tout d'abord, je veux trouver le produit. Donc, j'ajoute ici une constante appelée un produit et le produit trouver par ID, demander dot powerapps dot ID, et puis je vérifie s'il n'y a pas de produit, puis retourné pour moi l'état 400, qu'il est un produit non valide, OK, maintenant tout va bien. Ensuite, nous garantissons que l'utilisateur est vraiment entré dans un produit spécifique et arrivé. Une autre chose, alors nous obtiendrons le fichier lui-même. Donc, je dirais que le fichier const et ce fichier, nous sommes venus avec leur fichier point de requête comme nous l'avons fait exactement avec une demande de poste. Et puis je vais définir un chemin qui est appelé chemin d'image. Et ce chemin d'image est vide. Je vais l'utiliser pour remplir le chemin de l'image. Soit ce sera l'ancien qui est déjà dans la base de données, soit alors vous chemin d'accès au fichier si l'utilisateur a téléchargé une nouvelle image dans la requête PUT. Donc, comme une logique, je vais dire si le fichier, alors exactement comment nous faisons avec la demande de poste. Je vais définir un nom de fichier, puis du chemin de base. Et je dirai que le nom de fichier ou le chemin d'image sera exactement le même que nous l'avons ici. Donc, nous aurons le chemin de base et aussi le nom de fichier ensemble comme bouton Image. Et sinon, s'il n'y a pas de bain d'image ou s'il y a Fichier, alors je dirais que le chemin d'image est le même que l'ancien chemin d'image qui a été défini précédemment lorsque le produit a été créé. Donc je dirais produit, cette image, l'ancienne parce que j'ai eu l'année productive et je vous garantis que le produit existe vraiment. Donc, je ne lance pas d'erreur à l'utilisateur. Donc, à coup sûr, le produit a une valeur ici. Et puis je dirai que si c'est cinq, alors téléchargez le fichier et donnez-moi le passé. Sinon, donner le chemin d'image sera l'image du produit, qui était précédent. Et puis ici, je dirai que l'image sera le chemin d'image avec les données mises à jour. Mais ici, nous allons renommer ce produit. Donc, nous pouvons dire un produit ici pour obtenir le produit. Et nous pouvons dire ici, produit mis à jour et le produit mis à jour, je le trouve, puis le vérifier et puis renvoyer cette demande avec les données mises à jour. Ce sont donc les modifications requises pour la requête PUT. Dans ce cas, vous n'obtiendrez aucune erreur et vous aurez des problèmes lorsque vous téléchargez à nouveau l'image ou lorsque vous ne téléchargez pas l'image. Donc, l'utilisateur ici a option, il peut télécharger l'image ou non dans la piscine, demande. 61. Téléchargez plusieurs images multiples de produits de multiples images: Ok, ici nous avions un seul fichier, donc nous avons téléchargé un seul fichier sur l'API. Mais ici, nous avons besoin de plusieurs fichiers pour la galerie de produits. De la même manière, nous pouvons changer cette demande de poste pour accepter également plusieurs fichiers. Mais rendons cela un peu plus compliqué d'avoir un véritable exemple pratique. Normalement, lorsque vous mettez à jour un produit ou ajoutez un produit, la deuxième chose que vous faites est de télécharger la galerie d'images. Et cela arrive normalement dans les boutiques en ligne. Après avoir créé un produit, tout va bien. Ensuite, vous allez modifier à nouveau le produit pour supprimer la galerie d'images. Nous allons donc créer une API spécifique uniquement pour télécharger la galerie de leur produit. Cette API sera une demande de mise à jour, pas une demande de publication. Nous avons donc besoin de la demande de poste. Donc, je copie cette demande de poste. Allons à la fin et ajoutez-le ici. Et plus loin, nous pouvons garder l'identifiant du produit et aussi nous pouvons ajouter leur doute où nous allons mettre à jour uniquement les images de la galerie. Donc, ici, nous pouvons ajouter des images de galerie. Et puis l'ID du produit. Comme nous l'avons vu précédemment dans la demande de poste du produit, nous avons ajouté aussi l'option Upload image unique. Nous pouvons également l'ajouter à la requête PUT. Donc, nous pouvons ajouter ici des options de téléchargement, mais pas unique. Nous dirons tableau. Donc, nous allons attendre du front de notre tableau de fichiers, appelons-le émet. Et si vous remarquez ici que la méthode du tableau me donne aussi un nombre maximal. Ainsi, vous pouvez autoriser la taille maximale de téléchargement de fichier. Donc, par exemple, je dirais maximum, j'ai besoin de 10 fichiers ou de 20 fichiers en une seule requête. Alors mettons-le comme 10. Faisons plus notre code. Alors faisons ça dans une nouvelle ligne. Donc on ne peut pas dire que celui-là est là. Et ici, la méthode asynchrone. Et ici, nous avons le port et nous avons ici le contenu de notre demande PUT. Donc, la demande de mise à jour de leur produit sera mis à jour exactement ces données, mais nous aurons seulement les images, pas toutes les données. Donc nous pouvons faire la même chose que nous l'avons fait ici. Il est copier cette partie pour voir si l'utilisateur transmet l'identifiant exact ou correct. Nous n'avons pas besoin de vérifier leur catégorie car nous ne sommes pas mis à jour. Alors, prenons celui-ci aussi. Mais comme nous l'avons dit, nous avions toutes les données. Nous devons mettre à jour uniquement l'image. Donc champ d'image sera tableau d'images. Donc, comme nous l'avons vu ici, tableau de chaînes d'image ou chemin de l'image. Nous avons donc besoin ici d'une manière ou d'une autre pour construire un tableau de chaînes. Donc nous pouvons entendre, disons, les tampons d'image. Et ces projecteurs d'image seraient un tableau précieux comme des chaînes. Alors, comment allons nous construire ce tableau d'abord dans cette requête, comme nous l'avons vu précédemment, que nous pouvons avoir un fichier point de requête. Ou si vous voyez que nous avons un fichier aussi non seulement. Donc, nous pouvons dire que les fichiers seront des fichiers constants. Et exactement comme avant, on peut vérifier s'il y a des fichiers. Ensuite, je vais faire une boucle à l'intérieur de ces fichiers et construire le tableau des images dérange. Donc ici, je vais déplacer cela et dire les fichiers point map. Et cela aura un dossier. Et à l'intérieur de cette méthode de fichier, nous pouvons dire que le chemin d'image est point push, le nom de fichier point fin. Mais nous n'avons pas à pousser le nom du fichier seulement. Nous devons pousser aussi l'URL de base et aussi avec l'extension. Donc, si vous vous souvenez, nous avons créé ici l'URL de base, que nous construisons pour les demandes de poste. Donc, nous pouvons copier cette partie aussi et aller à la méthode put et dire ici l'URL de base ou le chemin de base. Et nous poussons le chemin de base avec le nom du fichier. Et ici, nous pouvons retourner le produit. Donc exactement comme la demande PUT, nous pouvons vérifier s'il y a produit, alors c'est que les étangs soient les données du produit. Sinon, ce sera une erreur. Donc nous copions cette partie et la plaçons ici. Testez ça avec Postman sur ce qu'on a à faire avec le facteur, qu'on place plusieurs fichiers ici. Donc, créons un champ, appelons-le, par exemple, image. Et cette image sera un fichier. Et nous sélectionnons deux ou l'image par exemple. Et nous n'oublions pas cela pour changer l'API. Donc, voici l'image de la Galerie et la demande est mise. Et nous avons également besoin de l'identifiant du produit. Exactement celle-là. Nous allons obtenir notre produit, ou le produit est le produit six, que nous avons créé auparavant. Et maintenant, nous allons ajouter l'ID ici. Et nous enverrons cette demande. Nous avons notre erreur, j'ai oublié ici d'ajouter des produits. Nous aurons donc le bon chemin. Maintenant, nous essayons. Et puis nous verrons le produit a été mis à jour. Et nous avons deux images dans la galerie et l'image principale, Il est toujours là. Vérifions notre dossier de téléchargements. Nous verrons que nous avons deux images, celle-ci et celle-ci. Donc, dans le front end, toujours nous allons mettre à jour notre galerie ou mettre à jour un produit et y ajouter les images de la galerie. C' est tout au sujet de cette section. Dans la section suivante, nous allons voir comment récupérer l'URL de l'image, afin que nous puissions la voir dans le navigateur et dans le front, car maintenant il est verrouillé et nous n'avons pas accès à elle parce qu'il est protégé par notre API authentification. 62. Excluding le dossier de téléchargement de l'authenticité: Maintenant, essayons d'obtenir cette URL et de la mettre dans le navigateur, l'URL de l'image. Donc, nous le mettons dans le navigateur et nous verrons que l'utilisateur n'est pas autorisé. Cela parce que si vous vous souvenez, dans notre JWT, nous étions en train de définir le bain est qui sont autorisés pour le public. Nous devons donc ajouter le chemin du dossier de téléchargement pour être autorisé afin que tout le monde puisse voir ces images. Sinon, nous aurons un problème. Ainsi, l'e-shop ne montrera pas les images du produit. Alors copions celui-ci. Ce sera exactement le même Git et les mêmes options. Nous devons également remplacer celui-ci par le chemin du dossier uploads. L' expression régulière pour ceci est celle-ci. J' ai une barre oblique, des téléchargements de slash publics à tout vient après. Sauvegardons ça. Et allons sur notre navigateur. Rafraîchir. Nous verrons une erreur que nous ne pouvons pas obtenir l'image de téléchargement public. Pourquoi cela parce que c'est un dossier statique. Nous devons définir ces téléchargements publics comme un dossier statique dans le middleware de notre application. Donc, pour ce faire, nous devons aller à notre app.js. Donc nous allons ici et nous disons l'utilisation. Et puis nous définissons le chemin dont nous avons besoin pour le rendre statique. Donc les téléchargements de barre oblique publique. Et puis dans Express, il y a une méthode pour dire qu'il s'agit d'un dossier statique et d'un mot-clé réservé, qui est le retour de nom désastreux pour moi le chemin racine ou le chemin racine de l'application. Et plus le chemin que je voulais faire comme un statique. Donc maintenant ce chemin, n'importe quel fichier peut être téléchargé vers elle. Ce ne sera pas comme une API. Ce sera comme un chemin statique qui sert les fichiers. Donc, revenez au navigateur et nous faisons un rafraîchissement. Nous obtenons toujours l'erreur. Cela parce que j'ai besoin d'ajouter une barre oblique derrière le public. Agissez avec notre navigateur et actualisez. Nous verrons l'image que nous avions déjà dans le front end sans aucune authentification directement par l'URL. Maintenant, notre backend est prêt. Nous avons créé les itinéraires, quatre catégories, commandes, produits et utilisateurs, dont nous avons besoin exactement pour notre e-shop. Nous allons maintenant passer à la partie frontale et vous verrez plus que de nouvelles choses et comment nous nous reconnectons à ce backend et créer notre interface webshop. 63. Structure de page d'applications E Commerce NgShop: Ok, dans cette conférence, nous allons voir quel est le design ou la structure de la page de notre e-shop. Le client m'a donné un fichier XD. Xd peut être ouvert avec Adobe XD, et cette application peut utiliser pour créer un filaire. Et comme vous le voyez ici, le concepteur m'a donné ce design et je peux déplacer des composants, prendre des mises en page, des coloriages. Donc, je peux l'utiliser aussi pour mon style et pour mon CSS. Mais la structure de la page en général, comme vous le voyez ici, que nous avons comme un en-tête. Nous avons, par exemple, une bannière. Et nous avons aussi une liste de catégories et quelques produits en vedette. Et lorsque vous cliquez sur l'un des produits, vous aurez les détails du produit. Et vous aurez également ajouter au panier ou aller à leur panier. Nous aurons plusieurs pages. Nous aurons donc la page d'accueil et une page de contact et la liste des produits. Donc, nous allons voir comment nous allons structurer l'application en Angular et comment nous allons le faire avec NX. Donc, si nous changeons, par exemple, à une vue de programmation ou à un développement de vue, nous pouvons diviser notre application en composants. J' appelle cette application comme boutique NG, comme côtelette angulaire. Donc, si nous passons à la diapositive suivante, nous verrons la structure de page dont nous aurons besoin pour cette application ou cette boutique e-commerce, nous avons besoin de deux applications. abord, nous aurons besoin d'un e-shop, qui affichera le front end ou comment nous verrons le produit quitte la page du panier, et cetera. Et aussi le panneau d'administration, le panneau d'administration, qui contrôlera tous ces frontaux. Donc, nous aurons quelques outils et tableaux, éditer, supprimer. Donc, nous pouvons avoir toutes les fonctionnalités qui refléteront l'extrémité frontale. Donc, l'administrateur de la question, il peut jeter un oeil à ses ordres. Il peut jeter un oeil à un produit. Loin de NX, nous verrons que chaque demande d'emploi a besoin d'une page d'accueil. Nous avons besoin d'une page de liste de produits, nous avons besoin d'une page détaillée du produit, de la caisse du panier. Et aussi nous avons besoin d'une page de connexion afin que l'utilisateur puisse se connecter et enregistrer ses données et ses commandes aussi. 64. Créer un dossier de projet et installer Angulaire: Ok, maintenant faisons un peu de travail pratique. Tout d'abord, j'ouvre Visual Studio Code et je vais installer Angular CLI. CLI angulaire, cela signifie interface de ligne de commande. Ainsi, nous pouvons exécuter des commentaires d'Angular, comme l'exécution d'une application ou d'une application de service ou de la tester, ou la génération de composants et de modules, comme nous le verrons plus tard. Donc, si nous allons à Google et tapez Angular CLI, nous verrons sur le premier lien l'interface de ligne de commande angulaire. Donc, l'installation de l'interface de ligne de commande angulaire, nous allons faire avec l'installation de paquet de noeud dans le monde entier. Donc, dash moins g ou dash g installe globalement de l'interface de ligne de commande angulaire. Essayons cela dans notre code Visual Studio. Alors je vais d'abord et j'ouvre le terminal. Comment on peut ouvrir le terminal ? C'est très simple. Vous ne pouvez pas dire Control Shift et J, ou Command Shift J. et il ouvrira pour vous le terminal. Et dans certains cas, il ne peut s'agir que de Control J. Donc ici vous aurez le terminal ouvert. Nous pouvons installer l'interface de ligne de commande angulaire. Donc, je vais copier cette commande, qui est npm install moins globalement à l'interface de ligne de commande oblique angulaire. Et ici, il commence à installer globalement le paquet. Donc, je serai en mesure d'exécuter des commandes angulaires partout dans mon PC. Si vous utilisez Mac, peut-être que vous arriverez à l'erreur. Vous verrez donc que vous n'avez pas les autorisations d'installer certaines bibliothèques globales. Alors que faites-vous normalement, vous pouvez dire pseudo avant le commentaire de bois. Donc, je vais dire mot de passe sudo et puis il recommence l'installation. Et vous verrez que l'interface de ligne de commande angulaire a été installée avec succès. Si vous utilisez Windows, vous n'aurez pas cette erreur. Et si vous l'avez, vous pouvez ouvrir Visual Studio Code en tant qu'administrateur. Essayons donc quelques commandes angulaires. On peut dire mg d'aide. Et vous verrez ici que vous obtiendrez de l'aide de commentaires Angular. Par exemple, il y a des analyses publicitaires, la documentation et du linting et du service. Et comme vous le voyez ici dans la documentation de la CLI, vous pouvez vérifier tous les commentaires. Donc, vous devez ajouter et vous construisez NG config et vous déployez, et cetera. Mais nous ne sommes pas intéressés par ce cours sur la commande angulaire. On a besoin d'une commande X. Comme nous le verrons plus tard, ce NX est également une bibliothèque globale, qui est située sur les commentaires angulaires. Donc, en fait, quand nous exécutons et la commande X, nous exécutons des commandes angulaires en interne. Le plus important maintenant que nous avons angulaire installé globalement et nous pouvons créer un dossier, par exemple, mon bureau. Je dirais CD ce haut. Et je vais faire un répertoire désastreux. Je vais donc l'appeler, par exemple, avec le nom de mon entreprise. Je dirai, par exemple, ma société, d'accord ? Et on peut accéder à mon entreprise. Et ici, nous aurons notre application tout ce que nous aurons notre dépôt d'espace de travail, qui contiendra toutes les applications et bibliothèques dans Angular et dans NX. 65. Composants, modules et services de Angulaire: Parce que c'est un cours pratique et que nous faisons l'exemple du monde réel. Si vous êtes débutant dans Angular, peut-être que vous avez besoin de savoir ce que nos composants, modules, services. Et comme vous le voyez ici, que vous pouvez imaginer avec moi que vous allez construire une application dans Angular. Je ne veux pas aller dire qu'est-ce que le module, qu'est-ce que le composant avec le service ? Partie très théorique. Non, nous le ferons dans la pratique. Je veux juste que vous imaginiez avec moi que le module est un conteneur de composants et de services. Ainsi, le composant dans Angular a quelques parties où vous pouvez définir le modèle HTML et le style de celui-ci, comme CSS. Et pour coder le script qui communiquera avec le service et le service lui-même. Il va se connecter au backend de votre application. Et puis le back-end, nous allons récupérer des données de la base de données. Donc, vous obtenez les données à travers le backend à l'extrémité frontale. Donc, nous avons beaucoup de modules aussi dans Angular, sorte qu'ils peuvent se connecter les uns aux autres. Vous pouvez donc utiliser certains composants de ce module dans ce module. Et aussi peut-être que les composants seront, peuvent contenir ou appeler d'autres composants, comme nous le verrons plus tard. Donc, cette imagination, cela vous aidera beaucoup dans ce cours. Donc vous n'avez pas besoin de savoir quel est chaque détail de ces pièces. Donc, vous avez juste besoin de savoir que le module est conteneur de composants et de services. Et les composants communiquent avec les services. Et peut-être qu'un autre module peut se connecter à ce module. Voyons un exemple pratique. J' ai le module produit dans mon e-shop. Et j'ai deux composants, qui sont nous pouvons dire composant de liste de produits où je mets en vente tous les produits. Et un autre composant où je vois le détail du produit lorsque je clique sur l'un des éléments ici, à l'intérieur de ce composant, je vais aller à la page où je vais voir le détail du produit. Et quand je veux voir quelles sont les données de ceci, par exemple, la liste des produits, j'ai besoin d'avoir un service dans le front end et d'appeler du backend à la base de données. Les données que je veux montrer. La même chose se passe ici. Lorsque j'accède à cette page, je demanderai au service de m'apporter des données à travers le backend de la base de données pour montrer le détail du produit, comme le prix, l'image, ou le nom ou la description. Donc, dans ce cas, vous pouvez créer des applications angulaires. Donc, les applications angulaires en fait, ce sont des modules. Et les modules peuvent communiquer entre eux pour construire l'ensemble de l'application. Dans les prochaines conférences, nous verrons comment construire ces modules et les rendre communicatifs ensemble pour construire l'ensemble des applications. Et à la fin, vous verrez que l'application est construite de cette manière. Donc, nous avons des commandes de modules utilisateurs, module, module produit, et tous, ils ont leurs propres services et leurs propres composants communiquant avec le même backend et la même base de données. 66. Qu': Bienvenue à la première conférence de cette section. Nous allons savoir ce qui est n-x et ce qui est mono REPL. Commençons par la pomme Monod. La signification de Manet rapport comme prix est divisée en deux mots. Tout d'abord, modèle, qui signifie seul ou seul rapport, qui est référentiel. Comme un dépôt GitHub où nous stockons notre code. Et Mano ondulation est une stratégie de développement de logiciels où le code pour de nombreux projets est stocké dans le même référentiel. Donc, comme vous le voyez ici, nous avons ici App 12 et jusqu'à trois. Et ces applications sont toutes dans le même référentiel, qui est sous le nom de la société. En outre, nous voyons que ces applications partagent certaines bibliothèques. Donc Mano ondulation est un référentiel, plusieurs projets et bibliothèques partagées. Et bien sûr, chaque application a ses propres composants ou ses propres modules. Telle est la définition générale du rapport mauna. Ok, qui utilise le rapport Mono en général ? Les entreprises les plus célèbres comme Google, Microsoft, Facebook, Uber et Airbnb, et Twitter utilisent aujourd'hui mono rapport, par exemple, Google mauna rapport est considéré comme le plus grand dans le monde. Et il est également appelé système à très grande échelle et doit être géré par dizaines de milliers de contributions chaque jour dans le dépôt avec une taille de plus de 80 téraoctets. Ok, pourquoi une ou une époque ? Pourquoi est-ce si important ? Quels sont les avantages de l'ondulation mono ? Tout d'abord, la facilité de réutilisation du code. Comme nous le verrons plus loin dans notre exemple réel, nous verrons comment nous utilisons à nouveau des modules dans plusieurs applications. Une autre fonctionnalité est la gestion simplifiée des dépendances, qui se trouve dans un environnement de référentiel multiple où plusieurs projets dépendent de la dépendance de tiers. Cette dépendance peut être téléchargée ou construite plusieurs fois. J' ai donc besoin de télécharger la bibliothèque pour chaque projet. Mais à Amman, Alep construit peut être facilement optimisé. Ainsi, nous pouvons voir que la référence ou les bibliothèques externes peuvent être téléchargées une fois pour plusieurs projets, comme nous le verrons dans les points suivants. La troisième caractéristique de Manana hippo est les commits atomiques. Commission atomique, ce qui signifie synchronisation entre les dépendances. Donc, quand il y a une mise à jour vient pour l'une de la bibliothèque, tous les projets seront notifiés et ils recevront cette mise à jour. Et aussi des collaborations entre les équipes. Nous parlons donc ici de plusieurs projets. Nous avons plusieurs équipes. Et l'étalonnage entre plusieurs équipes sera plus amélioré lorsqu'elles vont tous de la même manière en utilisant les mêmes bibliothèques ou leurs mêmes bibliothèques partagées. Et la partie la plus importante, la politique JSON de paquet unique. Ainsi, par exemple, lorsque vous utilisez le système de gestion d'empaquetage npm ou nœud, vous aurez un seul paquet, JSON. Donc, vous n'avez pas pour chaque projet en tant que dossier de modules de noeud séparés. Et de cette façon, vous économisez beaucoup d'espace, ok, après avoir vu les avantages, passons aux inconvénients. Donc, bien sûr, chaque technologie ou chaque méthode de développement logiciel a quelques inconvénients. La première consiste à maintenir les configurations. Donc, toujours quand nous avons plusieurs projets avec une configuration différente, nous aurons un problème lorsque certaines colonnes Update. Nous devons donc maintenir toutes les configurations après chaque mise à jour de bibliothèque partagée entre les projets. Deuxièmement, la coordination d'un processus de publication. De même, ce processus de publication peut devenir compliqué car la connaissance des composants qui doivent être libérés dépend de l'équipe de développement. Le troisième inconvénient est la mise en place de l'ensemble du projet. La configuration du projet localement peut prendre beaucoup de temps à chaque composant a sa propre lecture et il a plusieurs variations. Donc, quand nous avons un nouveau projet mis en place, nous devons à nouveau lier toutes les dépendances à ce projet. Nous aurons donc l'impression de prendre plus de temps pour mettre en place l'ensemble du projet. Ok, après ça, voyons ce qu'est un X ? Et X est une pomme menorah et est un DevTools. Et nous ne pouvons pas dire que c'est un outil mono ou EPA basé sur TypeScript, qui est construit sur Angular, enfant sourd, CLI et schémas. En outre, il fonctionne aussi avec d'autres technologies, comme nous le verrons plus tard. Il fournit également un espace de travail, une interface et une mise en cache de calcul basée sur le cloud, ainsi qu'une excellente prise en charge de l'IDE de niveau linguistique. Et x a été créé par l'équipe Angular de Google. Et puis les membres principaux ont décidé de lancer une nouvelle entreprise appelée roman, fournissant une chaîne d'outils x. Donc, lorsque vous consultez le site Web de NX, vous verrez qu'il est fourni par Norval. Encore une fois, voyons Y et X est bon. Ou pourquoi nous avons besoin d'outils n-x et x pour vous donner les avantages d'une ondulation mono. Sans cela, les sacs de rangées de symbole appelé co-location. Donc, je n'ai pas besoin de mettre en place la menorah ou manuellement. Il y a des outils ou des commentaires qui m'ont aidé dans NX à créer tous les projets mis en place sans faire de fichier de création à la main. Aussi n oeufs Fournir une exécution de commentaire plus rapide, comme je vous l'ai dit. Et x est une structure de fichier. Donc, je n'ai pas besoin de créer les fichiers manuellement. Je ne veux pas créer de composant sur dans Angular manuellement. Donc, par un commentaire, je fais une exécution de commentaire plus rapide pour générer le composant et son fichier de dettes et les styles. Et aussi c'est contrôlé appelé président. Donc, lorsque je crée une bibliothèque, elle est partagée et contrôlée par tous ceux qui sont membres des projets à l'intérieur des applications NX fournissant un diagramme d'architecture précis. Et ce diagramme vous montrant cette dépendance entre les bibliothèques et les applications et dépendance circulaire si vous les avez et fixant toutes les boucles qui conduisent à circulaire. Et il a aussi beaucoup i, nous le verrons dans les prochaines conférences. Et la fonctionnalité la plus importante que lorsque vous construisez un projet ou le tester, cela ne vous prendra pas autant de temps car il ne testera que ce qui est changé. Donc, il ne testera que les fichiers effacés que vous avez modifiés. C' est donc aussi bon pour le développement. Vous n'aurez pas besoin d'avoir Hall construit à nouveau ou d'un test complet. Encore une fois. Vous aurez accès au dépôt Git par NX et cela ne fera pour vous que les fichiers affectés ou modifiés. Enfin, voyons ce qui soutient l'annexe. Les technologies suivantes comme Angular, React et NodeJS sont les frameworks où un Xprend en charge. Ainsi, vous pouvez utiliser et x avec Angular, React et NodeJS, vous pouvez également avoir un projet ou un référentiel que tous ces frameworks partagent une bibliothèque ou plusieurs bibliothèques. Dans la prochaine conférence, nous verrons un exemple réel sur NX. 67. Aperçu sur l'exemple NX Real World de NX World Exemple de NX: Eh bien, passons maintenant à un exemple du monde réel. En fait, je ne comprends pas les idées seulement quand je vois un exemple réel. C' est pourquoi le but de ce cours n'est pas de lire une documentation, mais nous allons avoir un exemple réel de mon travail. En fait, je travaille dans une entreprise et je veux vous montrer comment nous travaillons, comment nous partageons les ressources et les bibliothèques en utilisant NX. Alors passons à autre chose. Je suppose ici que j'ai dans mon entreprise, qui est le dépôt de projet sur le dessus. Donc, dans un dépôt, je place trois applications. Le premier est l'application e-shop, et le second est l'application de blog interne. Et parlons du panneau d'administration plus tard. Cette application e-shop a ses propres composants. Par conséquent, ces composants ne sont pas partagés avec les autres applications. Donc, comme nous le voyons ici, nous avons E-Sharp composant maison, qui est la page d'accueil et également vedette bannière produits. Donc, où je vais montrer les produits en vedette et aussi les catégories, comment je vais lister les catégories de mon e-shop et de la liste des produits composant, où je vais lister tous les produits et utiliser un filtre afin que l'utilisateur ou le client puisse entrer dans le problème, filtrez par catégorie, par exemple, et consultez la liste des produits. En outre, nous aurons un composant de détail du produit qui affichera le détail du produit et également le composant où l'utilisateur peut se connecter et voir l'historique de ses commandes. Et enfin, vérifier et les composants de la carte. Le paiement où la personne saisit ses données ou adresse de livraison afin qu'il puisse passer sa commande. Le panier ouvre la page du panier pour voir ce qui se trouve à l'intérieur du panier. Ce que nous magasinons là-bas. Ok, cette application e-shop ne partage pas ces composants avec d' autres applications parce que les autres obligations ne sont pas intéressées par ces composants. Par exemple, l'application de blog interne n'est pas intéressée à afficher le composant de liste de produits car il s'agit d'un blog. Ainsi, l'application de blog aura son propre, sorte qu'il aura la page d'accueil et aussi la liste des messages et aussi un service de poste. Ce service de poste est quelque chose où je peux récupérer des données de la base de données. Je peux récupérer mes messages de la base de données. Ok, ces deux applications partagent du stock. Commençons d'abord par leur login. Donc, quand je veux créer une application comme e-shop, j'ai besoin d'une page de connexion et aussi de la même chose pour l'application de blog. J' ai aussi besoin d'un login. Normalement, si vous travaillez Angular normal avec une application autonome, vous allez créer la connexion ici à nouveau. Et la même chose que vous ferez pour l'e-shop. Et quand une mise à jour arrive, vous devez mettre à jour la connexion ici et vous connecter ici. C' est l'application du travail, l'application du travail d'équipe. Donc, en cela est positif 3, nous pouvons créer une bibliothèque, comme nous le verrons dans le NX. Et comme nous l'avons déjà dit, que nous aurons une bibliothèque. Et cette bibliothèque contiendra un composant de connexion, page et le composant de registre, et les services utilisateur où je peux saisir les utilisateurs et voir aussi comment ajouter l'utilisateur, l'utilisateur inscrit, etc. Et aussi les services d'authentification afin que l'utilisateur peut regarder ou se déconnecter ou d'autres services comme protéger les API. Et lorsque l'utilisateur s'est connecté, nous avons besoin lorsque nous actualisons l'application ou lorsque l'utilisateur visite l'application. Encore une fois, par exemple, nous avons besoin qu'il reste connecté, par exemple, pour une journée. Donc, pour cela, nous allons utiliser User State Store et aussi pour les sessions. Ces deux applications partagent donc toutes ces fonctionnalités. Nous devons donc avoir une bibliothèque qui est partagée pour les deux. La même chose. Voici, par exemple, pour certains composants de l'interface utilisateur, comme par exemple, j'ai besoin d'une bannière. Banner aura quelques services pour récupérer des données de la base de données. Et nous verrons que e-shop a une bannière dans sa propre page. Et la même chose pour le bloc interne, également curseur et Carrousel. Ok, continuons maintenant au panneau d'administration. Ces deux applications ont besoin d'un panneau d'administration. Alors d'abord, commençons par cette bibliothèque. Pourquoi le panneau d'administration partageant cette bibliothèque la partage à cause des services ? J' ai besoin de ces services. J' ai donc besoin d'attraper des bannières de la base de données et, par exemple, poster des bannières ce contenu dans la base de données. Et comme vous le voyez ici, nous avons éditer le contenu des bannières et des curseurs. Donc, l'administrateur va regarder, changer cette bannière, puis il sera affiché dans l'application de e-shop. En outre, l'application admin besoin journal n, Nous devons donc sécuriser le panneau d'administration ainsi. Nous avons donc besoin d'un composant de connexion. Mais par exemple, je n'ai pas besoin de composant de registre. Mais parce que le composant de registre est partagé entre ces deux applications, alors je dois le placer ici. Et la bonne chose, quand je n'utilise pas le composant de registre dans l'application de panneau d'administration sur la construction de production, je ne verrai pas ce composant de registre. Même si j'utilise cette bibliothèque. Donc, NX me fournit automatiquement chaud exactement ce que j'ai utilisé dans les bibliothèques et qui reflétera la taille de l'application ou la taille du bundle. Ok, et les produits ? Les produits que nous saisissons ici de la base de données et les affichent comme le produit le moins détail du produit. On a besoin des services. Ainsi, ces services peuvent être situés dans un magasin. Mais maintenant parce que le panneau d'administration a également ajouté formulaire de catégorie de produit et aussi la liste d'une table de produits. Nous avons donc besoin d'avoir un partage de services entre l'application du panneau d'administration et l'application e-shop. Vous voyez bien comment nous partageons les ressources. C' est la même chose pour les ordres. Nous verrons que les commandes, je n'ai besoin que des services et je partage entre l'application Admin et l'application e-shop. Mais le blog interne n'a pas d'ordres. Donc, dans le panneau d'administration, j'ai besoin de modifier le formulaire de commande et de lister la table de commande. Et la même chose ici. J' ai besoin de passer commande comme ajouter l'ordre comme des utilisateurs quand ils font la caisse. Et aussi j'ai besoin de voir l'historique des commandes des utilisateurs. J' ai donc besoin d'un service pour récupérer des informations pour moi dans la base de données. Dans le même temps, nous avons besoin d'un magasin d'état pour le panier. Donc, où je peux placer le magasin d'état, je peux le placer dans la bibliothèque, ou je peux le placer ici. Pas de problème. Mais je préfère l'avoir ici, même il n'est utilisé que par la question de l'application. Et bien sûr, vous avez la possibilité de placer le magasin d'état ici. Non, n'importe quel problème. Ok, pour comprendre l'idée plus, je voudrais faire une autre application ou une quatrième application, qui est aussi un coup de feu. Donc, je suis dans une entreprise, nous construisons trois applications et maintenant un nouveau client vient. Il veut un design différent et une mise en page différente pour son numéro. Je ne vais pas vous montrer l'image différente, mais je vais vous montrer comment je vais catégoriser les composants. Allons passer à autre chose. Donc juste un conseil pour vous, comment je construis ce diagramme, comment je le dessine, j'utilise un outil appelé le point de dessin io. C' est un très bon outil, sorte que vous pouvez construire vos propres diagrammes. Il vous a fourni beaucoup de formes, ce qui vous aidera à construire des diagrammes d'explication. Alors passons à autre chose et créons notre propre application, ou une autre application de l'e-Sharp. Donc, je vais bouger ici et agrandir un peu, et nous aurons un espace pour une autre application. Imaginons donc que nous codons vraiment en Angular. Donc, je vais avoir ici une et une autre application. Je vais le créer ici. Appelons, c'est e-shop up un ou client 1. Et c'est le client de l'application e-shop à, donc nous pouvons copier ce client à. Ok, aussi, il aura sa propre page e-Sharp. Peut être vedette bannière peut être, par exemple, bannière de liste des catégories. Copions donc tous ces éléments et placez-les ici. Gardons-le comme ça par exemple maintenant. Donc, comme vous le voyez ici, nous avons beaucoup de composants partagés. Nous devons placer ces composants dans des endroits où ils peuvent être partagés. Je n'ai pas de composants dupliqués seulement si je crée un nouveau composant qui n'existe pas dans un autre problème. Par exemple, la page d'accueil sera différente entre ces deux objets pointus. Donc, je voudrais garder ce composant ici, e-shop page d'accueil, qui est différent de celui-ci et vedette bannière produit. Je peux le placer dans la bibliothèque partagée. Et aussi les catégories liste bannière. Je peux aussi le placer dans la bibliothèque partagée. liste de produits, composant de détail du et historique des commandes utilisateur. Donc je vois que tout peut être partagé. Donc, nous les plaçons tous ici et nous supprimons tous ces composants d'ici. Donc, la seule différence entre ces magasins E à chaque OBS est juste ce composant, qui est la page d'accueil. Et ils partagent tous ces composants. Il vaut mieux les mettre ici. Peut-être que quelqu'un va vous demander, si ces composants ont des styles différents entre deux Aesop ? Je vais vous montrer dans l'exemple pratique comment nous pouvons créer un CSS spécial pour chaque e-Sharp dans le dépôt NX et utiliser le bon que vous voulez. Par exemple, je dirais créer un thème, thème de CSS. La mise en page sera la même, mais le CSS sera différent et le style. J' espère que vous comprenez comment nous structurons notre projet dans le monde réel. Donc, nous verrons dans les prochaines conférences comment nous allons construire cette structure avec Angular. Nous allons utiliser toute une commande X pour construire tout ce dépôt. 68. Installation de NX: Pour créer notre structure, dont nous avons parlé auparavant, nous avons besoin d'un x CLI. C' est exactement quelque chose comme Angular CLI. Donc, je vais aller à Google et taper ECS CLI. Et dans le premier résultat, j'irai à ce lien. Et je verrai que dans Excel, je suis un outil d'interface de ligne de commande qui vous aide à développer, construire et maintenir des applications. Donc, nous allons voir comment générer des applications. Nous verrons aussi comment exécuter un serveur Web. Et aussi, nous pouvons générer graphique de dépendance, comme nous le verrons plus tard, et cetera. Alors installons d'abord NX, et il sera installé globalement. Donc, d'abord, nous allons à nouveau à notre code Visual Studio, et nous taperons la même commande lorsque nous avons installé l'angulaire. Donc bien, je dirai ici sudo npm installer pas Angular CLI, mais NX. Encore une fois, il me demandera un mot de passe, puis il commencera à installer la ligne de commande NX pour moi. Cela me donnera une erreur parce que j'ai que NX déjà installé. Donc juste en exécutant cette commande, cela vous aidera à installer NX pour être sûr que tout est installé, vous venez de plonger dans x. et quand vous obtenez cela, alors cela signifie que vous avez un X. cela vous aidera à installer NX pour être sûr que tout est installé, vous venez de plonger dans x. et quand vous obtenez cela, alors cela signifie que vous avez un X. assez. Nous avons juste besoin d'être sûrs que nous avons installé NX pour passer aux prochaines conférences pour voir comment nous pouvons travailler avec elle. 69. Installer des extensions de codage rapide de la codage rapide: Dans cette conférence, je vais vous montrer quelques extensions qui vous aideront pour le codage rapide. La première extension est appelée service de langue angulaire. Donc, cette extension vous aidera à remplir automatiquement certaines commandes dans Angular. Donc, comme vous le voyez ici dans ce Give, cela vous aidera à remplir automatiquement ce qui est à l'intérieur du script. Donc, nous avons un modèle, comme nous l'avons vu précédemment, que nous avons modèle HTML. Et dans le modèle HTML parfois, nous avons besoin d'accéder à certaines variables qu'ils sont dans le script. Donc, cette bibliothèque vous aidera à accéder à ces variables ou méthodes qui sont dans le fichier de script. Une autre extension dont nous avons besoin est aussi une plus jolie. Nous avons déjà parlé de plus joli et comment l'installer. J' ai créé une vidéo spéciale pour plus beau parce qu'il a besoin d'une certaine configuration. Donc, si vous ne saviez pas à propos de plus joli, il sera dans les extensions Visual Studio Code. Vous pouvez donc l'appeler ici et le configurer. Une autre extension étonnante que j'utilise toujours est appelée polariseur de poire de support. Donc on peut dire support poire polarisant. Donc, cette extension vous aidera également à colorier les parenthèses par groupe. Donc, de cette façon, vous saurez quel est le début et la fin de vos parenthèses, surtout si vous avez un très gros objets imbriqués, honnêtes et fermetures. Donc, ici, vous voyez comment c'est la coloration basée sur le début et la fin. Il fonctionne pour les supports incurvés et les supports normaux. Une autre grande extension que j'utilise est appelée navigation CSS. Et cette extension vous aidera à accéder à n'importe quelle classe directement en allant à la définition. Donc, comme vous le voyez ici dans ce donner, lorsque vous cliquez sur une classe dans le CSS, vous allez à cette classe, ou lorsque vous appuyez sur Contrôle et cliquez sur la classe. Donc, comme vous le voyez ici, nous étions dans le fichier HTML. Nous avons sauté au fichier CSS de l'application, où se trouve le verre. Ok, si vous ne voulez pas installer ces extensions manuellement, j'ai joint à cette conférence un fichier JSON que vous pouvez trouver comme suit. Vous allez donc dans votre dossier de projet. J' ai ouvert ici My Folder Project. Donc on dit que c'était sur le bureau, ma compagnie. Et ici, j'ouvre le projet et je crée un dossier, appelez-le point VS Code. Et à l'intérieur de ce code VS, je vais localiser un fichier appelé extensions. Donc ici, je crée un fichier, je l'appelle étendre les shells que JSON. Et ici à l'intérieur de l'extension de JSON, je vais vous donner le fichier que vous devez copier. Donc, il sera listé sur les recommandations. Et vous verrez ici toutes les extensions dont vous avez besoin pour ce cours. Et après avoir enregistré ce fichier et vous allez à nouveau aux extensions et tapez recommandé. Donc, lorsque vous mettez à recommandé, vous obtiendrez le moins des extensions recommandées, qui sont répertoriés ici dans ce fichier. Donc, vous avez juste besoin d'installer tous et ensuite vous êtes prêt pour le codage. 70. Créer de l'espace de travail Nx pour votre équipe ou pour votre société: Ok, Maintenant, nous allons commencer un vrai codage et travailler avec un exemple réel avec le projet du monde réel, comme nous l'avons dit précédemment, que nous avons ce dépôt que nous allons mettre en œuvre dans ce cours. Nous devons donc d'abord créer un espace de travail ou un référentiel de travail. Et dans ce dépôt de travail, nous allons lui donner un nom. Normalement, le nom dans les entreprises, prendre le nom de la société. Ainsi, la société crée ses propres bibliothèques et ses propres applications, et toutes sont partagées ensemble ou l'entreprise est très grande, vous pouvez diviser les référentiels en fonction des équipes. Par exemple, je dirais l'équipe e-shop, par exemple. Et par exemple, l'équipe d'apprentissage automatique et par exemple, un autre thème pour le développement mobile. Donc, dans ce cas, je peux diviser par le nom de l'équipe. Donc, je vais supposer dans ce cours que nous allons créer un référentiel pour notre entreprise. Nous revenons à Visual Studio Code, fermons tout. Et nous fermons également ce dossier, puis ajoutons à nouveau le terminal. Et ici, nous allons taper créer un nouvel espace de travail en utilisant NX. Donc, si nous allons à un dev x-dot, vous verrez sur la page d'accueil et px créer un espace de travail ECS. Ainsi, lorsque nous allons commencer, nous verrons la première commande pour créer un espace de travail. Copions cette commande et revenons à notre code Visual Studio dans le terminal. Colle-le ici. Et nous avons un préréglage, angulaire parce que le support NX et d'autres frameworks comme React et aussi pas de JS. Donc MPI x, qui est un commentaire fourni avec MPM, est travaillé pour créer un espace de travail ou des applications. Donc, lorsque nous appuyons sur Entrée, il nous donnera une notification. Quel est le nom de l'espace de travail ? C' est ce que j'ai déjà dit. Ce sera le nom de la société ou le nom du thème. Donc pour moi, j'aime le nom Blue Bits. Et quel est le premier nom de l'application ? Comme nous l'avons vu précédemment, nous avons plusieurs applications afin que nous puissions créer ou taper le nom de la première application dans ce dépôt ou dans cet espace de travail. Donc, ce sera NG shop. Et quel est un style est utilisé à l'intérieur de ce N G Sharp ou dans cette application ? Je préfère SAS. Et qu'en est-il de l'ES LND ou de l'Estlund ? L' outil de linting moderne est maintenant la couche ES, qui corrige pour vous toutes les erreurs qui peuvent se produire lors du codage. Et cela vous donnera des erreurs. Donc, il va trouver et résoudre tous les problèmes dans votre code JavaScript comme nous le verrons plus tard. Donc, je vais sélectionner ES peluches parce que TS atterrit, comme vous le voyez ici dans la notification qui est utilisée par Angular CLI. Et il est devenu obsolète et utilise NX Cloud. C' est comme quelque chose pour construire le projet et exécuter quelques détails et l'intégration GitHub. Donc nous disons non. Et nous verrons qu'il est en train de créer l'espace de travail. Nous allons commencer à installer certains paquets en utilisant MPM install, tout est fait automatiquement. Et comme vous le voyez ici, le paquet s'est installé avec succès. Ajouter, installer plus de paquets requis pour ce projet continue à créer des applications. Et vous magasinez comme vous le voyez ici et tous les fichiers requis. Et cette boutique ND est un projet Angular. Nous sommes donc prêts et nous avons tous les fichiers requis pour notre projet. Alors ouvrons ce projet. Nous allons au fichier ou nous pouvons cliquer sur ce dossier ou cette icône, et nous cliquez sur Ouvrir le dossier. Et j'irai là où j'ai installé mon entreprise comme vous vous en souvenez. Alors ici et je verrai leur nom, Blue Bits. Je vais aller à l'intérieur de ce dossier et cliquez sur Ouvrir. Donc, il va m'ouvrir tout le projet. Et nous allons parler maintenant de ces dossiers. Mais d'abord, nous verrons qu'il recommande également d'autres extinctions nécessaires pour le développement. Cliquez sur installer. Par exemple, c'est l'extension appelée jest runner, qui est un outil pour les tests unitaires. Donc, nous retournons à notre application et vérifions ces fichiers. Donc, comme vous le voyez ici, nous avons un dossier applications. Donc, dans cette application, il sera situé mes applications comme magasin de bonbons et aussi le panneau d'administration. Donc, ici, nous aurons deux applications. Et qu'est-ce que c'est ? N G pointu, E à E. Il s'agit de tests de bout en bout. Donc, vous devez également avoir une application pour cela, pour les tests de bout en bout. Et dans le dossier lèvres, nous verrons que nous localisons ici nos bibliothèques. Actuellement, il est vide, mais nous verrons plus tard comment créer ces bibliothèques. Par exemple, la bibliothèque d'interface utilisateur comme nous l'avons déjà parlé, et aussi la bibliothèque de produits ou fait bibliothèque, et cetera. Ensuite, je pense ici toutes les applications utilisent le même dossier de module de nœud. Donc, pour chaque application que vous installez ici ou créez ici, vous n'avez pas besoin de créer un autre dossier de module de nœud. La même chose que vous avez ici, un paquet JSON. Ainsi, vous aurez les mêmes bibliothèques qui sont toutes utilisées parmi ces applications. Et le paquet Jason est automatiquement créé par NX pour répondre à toutes les informations requises qui sont nécessaires pour créer ou construire des applications et les servir. Nous verrons toutes ces commandes plus tard et ces bibliothèques aussi. Et dans ce fichier JSON annexe, vous verrez les projets listés et les bibliothèques que nous allons créer. Nous ne parlerons pas aussi de ces balises plus tard. Donc ici, toutes les informations sur cet espace de travail. Ce qui est important pour nous, c'est cette partie, comme vous le verrez dans les prochaines conférences. Et JSON angulaire, comme vous le savez, les applications angulaires viennent toujours avec certaines configurations. Par exemple, vous devez inclure certains styles spécifiques qui se trouvent à l'intérieur de l'application. Donc, comme vous le voyez ici que nous avons ici toutes les applications énumérées sous projets. Donc, nous avons ici n'importe quel magasin. Et lorsque nous créons une autre application, nous aurons, par exemple, l'application du panneau d'administration. Donc, dans ce cas, vous verrez toute la configuration liée à cette application angulaire. C' est comme si vous travaillez sur une application autonome, mais sous un espace de travail de pointe. Donc, quand je veux créer un style spécifique à un style, par exemple, j'ai ici le style CSS, qui est le style par défaut, qui vient avec Angular. Donc, si nous allons ici, abs et G-sharp, SARC, et nous allons voir ici styles, CSS, dossier d' actifs où vous localisez les images ou certaines formes. Donc, vous pouvez trouver dans le dossier assets et vous devez déclarer que pour l'application principale ts est le point d'entrée notre application où nous amorçons toutes les bibliothèques et tout le code TS que nous écrivons à un index HTML, ce sera le point d'entrée de notre modèle. Donc, comme vous le voyez ici, nous avons ici la tête et le corps, et à l'intérieur il y a des racines de betteraves bleues. Donc, dans cette voie, nous appellerons ce composant, qui est le point d'entrée de notre application. Donc, il a déjà un modèle par défaut. Je pense que nous allons l'éclaircir. Mais d'abord, nous allons exécuter cette application pour voir comment nous pouvons l'exécuter. Et puis nous supprimerons tout ce contenu pour commencer notre numéro. Si vous vous souvenez, je vous ai déjà dit que chaque application contient des composants, des modules et des services. Voici donc un module qui contient actuellement un composant, qui est appelé composant d'application. Vous pouvez créer autant que vous le souhaitez des composants. Nous verrons que plus tard, comment communiquer et travailler avec ces composants. Et la belle chose ici et huit serpents qu'il vient aussi avec une configuration plus jolie. Ainsi, vous pouvez configurer votre plus jolie comme vous le souhaitez. Ajoutons donc notre configuration pour plus jolie que nous avons configurée avant, afin que nous puissions les prendre, les copier. Je les ai copiés. Je les ai remises ici. Donc, nous avons la largeur supérieure quatre et imprimer des tweets 160. Et une autre configuration que vous avez portée dans la citation de jolie ES Linde est également la configuration pour le peluchage, comme nous le verrons aussi plus tard. Et la belle fonctionnalité ici que lorsque vous voyez un fichier de configuration, par exemple, ES Lint RC, vous verrez un global et un spécifique pour l'application. Et lorsque vous voulez faire quelque chose comme un spécifique pour cette application, ou en particulier LinkedIn pour cette application, vous pouvez ajouter votre configuration ici. Mais pour avertir que vous voulez une configuration globale, vous pouvez l'ajouter. Dossier global là. Même chose pour le café TypeScript. Vous verrez ici que vous avez une configuration générale pour le TypeScript. Et à l'intérieur de T est une application de toux. Au niveau de l'application, vous verrez une spécialité est conflit pour chaque application, nous n'irons pas tellement dans les détails, notre objectif de construire notre application. Et nous verrons chaque fois que nous avons besoin d'utiliser ces fichiers et nous devons le configurer. Essayons donc maintenant d'exécuter cette application. Ce sera une application angulaire, qui s'appelle ND shop, et nous allons l'exécuter. Alors j'ouvre à nouveau mon terminal. Et c'est très simple. Je tape juste x, faim, puis le nom de l'application. Donc je vais dire magasin NG. Donc, ici, il va commencer à servir cette application. Donc, je peux le voir dans mon navigateur. Donc maintenant, l'application est compilée avec succès. Ouvrons-le dans notre navigateur. Donc, je vais aller ici à mon navigateur et taper localhost 4200, et nous verrons que l'application est en cours d'exécution. Donc, quand je vais à nouveau à l'application, à la page d'accueil de cette application, supprimez tout. Et je vais mettre H1 et je dirai E sharp ou NG e-shop. Et enregistrez-le et ouvrez à nouveau le navigateur que nous verrons et G-sharp. Donc, de cette façon, nous signifions la demande. Nous mettons NX servir et le nom de l'application. 71. Créer les applications (application Admin Panel App): Ok, Dans cette conférence, je vais vous montrer comment ajouter plus d'application pour votre espace de travail. Donc, si vous vous souvenez, nous devons créer deux applications. Tout d'abord, la boutique en ligne elle-même, où les clients vont entrer et naviguer sur nos produits. Et la deuxième application sera le panneau d'administration pour cette e-boutique. Et dans le panneau d'administration, je vais voir comment je peux modifier mes produits, modifier les utilisateurs et modifier les commandes. Alors créons maintenant l'application Admin. Donc, ici, dans le panel, je vais utiliser ceci pour continuer à signifier l'application de la LDN. Vous pouvez ouvrir plusieurs fenêtres de terminal en cliquant sur ce plus. Et ici, vous aurez une autre fenêtre de terminal. Vous pouvez donc maintenant créer une nouvelle application. Nous devons donc exécuter un NX. Et cette commande NX sera une génération. Et au roman est le nom de la société qui a créé n'importe quel X Mono repo. Et puis quel type de l'application que j'ai est angulaire. Et puis je dirai application, créer pour moi application. Et puis j'ai nommé l'application que je veux. Donc, je vais dire ici admin. Donc Admin app, ou admin, ou admin E sharp, n'importe quel nom que vous êtes libre de sélectionner. Donc, je vais créer un administrateur et puis nous verrons comment il crée l'application. Il me demandera d'abord quel est un système de coiffage dont j'ai besoin pour cette application ? J' utilise toujours SAS. Vous avez la liberté de choisir celui que vous voulez. Je vais utiliser SAS. Et puis il me posera une autre question sur si je vais utiliser le routage dans cette application. En fait, il va générer un nouveau module pour moi pour le routage. Nous verrons ça plus tard. Alors ne vous inquiétez pas pour ça. Fais oui, et on en parlera plus tard. Donc, dans ce cas, la création de l'application. Et nous allons voir maintenant dans notre explorateur de fichiers, nous allons voir que nous avons admin et N G Sharp, et chaque application a un test de bout en bout. Alors maintenant, essayons de servir avec cette application. Nous pouvons donc exécuter cette application dans une autre fenêtre. Nous avons un terminal ici que nous exécutons déjà notre application, qui est NGA e-shop. Mais nous pouvons maintenant aussi courir à l'application ensemble. Alors faisons-en un clair. Et puis nous verrons NX servir comme nous l'avons vu précédemment, que nous servons. Et puis le nom de l'application. Donc, ce sera admin. Et comme vous le voyez ici, c'est très intelligent. Cela me dit que ce port est déjà utilisé parce que j'utilise ce port pour l'application précédente, qui est N G Sharp. Donc là, ça me demande, tu veux utiliser un autre port ? Je dirai oui. Ensuite, il sélectionnera un port aléatoire pour moi. Et puis je peux l'ouvrir dans le navigateur avec ce port. Si vous souhaitez sélectionner un rapport personnalisé, vous ne laissez pas un autre générer pour vous le port. Vous pouvez simplement mettre moins le port Minos, puis le numéro du port que vous voulez. Donc, je choisis 4,100 et exécute cette commande. Et puis nous aurons que notre application est en cours d'exécution sur ce port. Donc, si nous allons à nouveau et dans le navigateur et naviguer à l'hôte local, nous avons 4.200 est utilisé pour magasin d'énergie. Ouvrons un autre onglet. Et nous allons essayer de dire hôte local 4,100. Et nous allons obtenir ici l'administrateur, qui est l'application d'administration. Donc, en revenant à la route de l'application ou à la route de l'application, comme nous l'avons vu précédemment, nous avons déjà ce code personnalisé. Enlevenons-le et essayons de faire chacun. Et nous dirons, par exemple, panneau d'administration. Nous allons l'enregistrer, retourner à notre navigateur, et nous verrons qu'il a été mis à jour dans le panneau d'administration. Donc, dans ce cas, nous courons maintenant vers des applications ensemble. 72. Créer des composants de niveau application: Auparavant, nous avons vu comment créer la structure pour l'application. Et d'une manière théorique, nous avons dit que certaines applications ont leurs propres composants. Par exemple, comme vous le voyez ici, que l'application e-shop a un composant de page d'accueil e-Sharp ainsi que bannière et bannière de catégorie et composant de liste de produits. Parce que ces composants ne sont pas utilisés dans d'autres applications. Nous les mettons donc au niveau de l'application. C' est donc la signification des composants au niveau de l'application, mais les composants au niveau de la bibliothèque, sont les composants qui sont situés dans les bibliothèques ou dans leurs bibliothèques partagées, comme le composant de connexion et le composant de registre. Et dans cette conférence, nous verrons quels sont les commentaires qui créent pour moi les composants dans le niveau de l'application. Donc, nous allons d'abord créer un composant de page d'accueil. Et à l'intérieur de ce composant de page d'accueil, nous aurons l'en-tête et le pied de page. Faisons ça pratique et sautez loin de la théorie. Ok, donc on est là maintenant. Nous allons créer des composants, en particulier pour l'application NG shop. Donc, nous ne ferons pas pour l'administrateur. Nous verrons cela dans la prochaine étape. Donc, tout d'abord, nous allons utiliser aussi la ligne de commande pour créer des composants. Ainsi, comme vous l'avez vu précédemment, nous avons déjà un composant par défaut, qui est appelé composant d'application. Ce composant d'application est le point d'entrée de notre application, et c'est exactement ce que nous voyons dans le navigateur ou le point d'entrée de l'application en général. Donc, comme nous l'avons vu précédemment, que ce composant peut appeler aussi d'autres composants. Donc, nous pouvons créer un autre composant, et appelons-le ici dans le composant de l'application. Donc, tout d'abord, nous ouvrons un nouveau terminal et créer un composant avec n x sera de la même manière. Comment créons-nous une application, mais elle est principalement similaire à Angular. Donc, nous allons avoir un composant x generate. Si vous êtes habitué à Angular, vous pouvez dire que mg génère composant. Mais ici, nous disons un x, g, qui est un raccourci pour Générer puis composant. Ensuite, vous pouvez spécifier le nom de votre composant. Par exemple, je veux dire page d'accueil, par exemple. Et puis, parce que vous utilisez un espace de travail X, vous devez spécifier le projet. Nous devons donc spécifier l'application. Donc, l'application que nous avons ici est N G pointu. Donc, je vais mettre moins projet égal à NG boutique. Donc ici, dans ce cas, je vais avoir le composant créé dans le choc NG pour être sûr que votre composant est créé de la bonne manière, vous pouvez exécuter votre commande à sec afin que vous n'exécutiez rien. Vous verrez juste ce que leur commun a fait. Donc, vous ne verrez aucun changement de la structure ici. Vous verrez juste ici dans la ligne commune ce qu'il a fait réellement. Donc nous pouvons dire moins, moins une course sèche. Alors exécutez cette commande dans la télécommande, ne faites rien. Appuyez sur Entrée. Nous verrons que nous avons eu erreur, je pense parce que j'ai de l'espace ici entre le projet et N G sharp. Essayons donc de supprimer cet espace. Et puis réessayez. Nous verrons que ça marche vraiment. Donc, lorsque vous obtenez cette erreur, vous qui devez faire attention à la commande pour ne pas avoir d'espaces entre la commande et la valeur. Et si vous demandez comment je reviens aux commentaires précédents, j'utilise des flèches haut et bas sur le clavier. Alors vous pouvez aller dans l'histoire de vos commentaires. Donc, comme vous le voyez ici, je l'utilise comme le dernier. Nous verrons que le composant est créé dans les applications. Vous magasinez, source, application, page d'accueil et composant de page d'accueil. Et comme vous le voyez ici, il devrait être situé ici. Donc, les applications et vous magasinez composant source, puis ici. Mais normalement, nous localisons les pages à l'intérieur de certains dossiers. Nous localisons les composants dans certains dossiers qui expriment leur fonctionnalité comme nous le verrons plus tard. Donc, parce que c'est une page, je créerais un dossier, l'appellerais pages. Et à l'intérieur de ces pages, je vais mettre la page d'accueil. Alors, comment peut-on faire ça ? Nous pouvons le faire très simplement. Nous disons juste des pages barre oblique et ensuite vous pouvez passer le nom de votre composant. Donc, lorsque nous appuyons sur Entrée avec une exécution à sec, nous verrons que le composant est créé dans dossier Pages d' application, la page d'accueil, le composant de page d'accueil. Donc, comme vous le voyez ici que nous avons créé un dossier à l'intérieur de l'application. Essayons donc d'exécuter cette commande sans course à sec pour voir ce qu'elle fait exactement. Donc, quand je clique sur Entrée sans course à sec, je verrai que j'ai créé un composant ou un dossier avec mon composant. Donc, de la même manière, Créons un autre composant pour la page des listes de produits. Donc on peut dire la même chose. Je dis pages. Liste des produits, puis nom du projet et G-Sharp. Donc, je vais appuyer sur Entrée, et puis je verrai que j'ai créé un autre composant à l'intérieur des pages. Donc, j'ai maintenant deux composants. Et chaque composant ou chaque dossier de composant contiendra le modèle HTML où j'écrirai mon HTML et le fichier de style, ainsi que le fichier de test, et aussi le fichier TypeScript où je vais récupérer des données à l'extrémité frontale. Vous pouvez également le structurer de manière différente. Vous pouvez dire des pages et ensuite dire, par exemple, de base. Et puis en base, vous mettez la page d'accueil Contactez-nous, par exemple, à propos de nous, et cetera. Et un autre dossier à l'intérieur des pages, vous pouvez dire, je veux créer un dossier de produit. Et à l'intérieur de ce dossier de produit, vous mettez la liste de produits, les détails du produit, les commandes de produits, etc. Et si vous voyez dans la ligne commune, vous verrez que ces fichiers sont créés et certains fichiers sont mis à jour. Quel fichier est mis à jour ? C' est le module de l'application à l'intérieur de cette application. Comme vous vous en souvenez, nous avons précédemment défini que le module contient plusieurs composants, donc son conteneur de composants de mon application. Donc, ici, je dis que ce module contiendra plusieurs composants, qui est le composant AB, le composant de base, puis le composant de page d'accueil et le composant de liste de produits. Et puis nous pouvons essayer de vérifier comment ces composants fonctionnent. Donc, nous avons ici, par exemple, le composant de page d'accueil. Il a un paragraphe PIE et la page d'accueil fonctionne. Donc, nous allons nous référer à ce composant, référez-vous à notre application pour utiliser ce composant. Donc, au niveau du composant de l'application, j'écrirai la balise de ce composant. Alors, comment nous savons que la balise de ce composant, vous pouvez aller à leur composant ts et vous verrez quelque chose appelé sélecteur. Et dans ce sélecteur, vous verrez qu'il est créé par le nom de notre société et le nom du composant. Ainsi, nous pouvons copier celui-ci, le nom de la société Auparavant, nous avons défini quand nous définissons l'espace de travail. Et bien sûr, vous pouvez le changer comme vous le souhaitez. Donc, par exemple, je vais dire ici, e-shop page d'accueil. Donc, nous devons le faire. Donc je peux faire ici. Et puis je copie celui-ci et le colle ici en tant qu'élément ou en tant que sélecteur. Et j'appuie sur Sauvegarder, et j'appuie sur un pour celui-ci. Et nous avons déjà que nos projets sont en cours d'exécution. Donc, il est compilé avec succès. Et en revenant au navigateur, nous verrons que cette application est déjà en cours d'exécution et nous avons un composant en cours d'exécution là-bas. Ajoutons aussi l'autre composant en dessous. Nous revenons donc à notre application et nous utiliserons également le sélecteur du composant. Donc, je vais appuyer ici a grandi bits. Nous pouvons le garder et bien sûr vous pouvez changer le nom comme vous le souhaitez, mais il y a des règles. Nous verrons ces règles plus tard. Donc, ici, nous avons créé ce deuxième composant. Je sauve, il est compilé avec succès. Je retourne au navigateur, je vois que ces deux composants fonctionnent. C' est donc un moyen de créer des composants avec la ligne de commande NX. Et nous verrons plus tard comment structurer mieux et mieux. 73. Routage aux composants de niveau application: Bienvenue de retour. Dans cette conférence, nous allons parler de routage, de routage des composants. Donc, je veux avoir quelques URL pour se référer exactement à mon composant. Donc, je veux, par exemple, la page d'une liste de produits. Donc, je vais avoir un lien où il dira localhost 4000 à un 100 produits barre oblique. Et puis cela me conduira au produit le moins composant. Et je voudrais aussi avoir le composant de page d'accueil sans suffixe ou sans route, comme ce sera la route par défaut. Donc, je vais avoir ici un composant de page d'accueil pour l'itinéraire par défaut et pour la liste des produits, j'aurai localhost produits slash. Alors faisons ça et voyons comment nous pouvons générer les routes. Les routes sont essentiellement liées au niveau de l'application. Vous devez donc spécifier que les sorties dans l'application. En outre, vous pouvez avoir des itinéraires spécifiés dans la bibliothèque, comme nous le verrons plus loin. Mais maintenant faisons le routage au niveau de l'application. Donc, je vais aller au module d'application ici. Et dans l'importation, je vais ici et je dis module routeur. Appelez-moi le module routeur. Vous voyez cette extension, comme c'est très génial. C' est l'importation automatique des composants que je veux, tous les modules que je veux. Donc, je n'ai pas besoin de taper le module de routeur d'importation à partir d'Angular externe. Je viens de plonger la classe et ensuite il a vraiment importé automatiquement quand il est disponible. Donc, pour ajouter une route spécifique, vous devez avoir un point de module de routeur pour root. Et ici, vous allez spécifier vos itinéraires. Donc, ici, nous avons le premier paramètre, est-ce que c'est sorti ? Donc, tout d'abord, nous avons besoin d'un itinéraire pour la page d'accueil et d'un itinéraire pour la page de liste des produits. Et cette route est normalement un tableau de routes. Donc, nous avons besoin, tout d'abord tableau et à l'intérieur de ce tableau, nous avons les objets de cela dehors. Chaque objet de cette sortie, vous devez spécifier le chemin que vous voulez définir. Par exemple, je veux définir le chemin par défaut et le composant que ce bain se développe à se référer. Donc, je dirai que ce composant sera le composant de la page d'accueil. Et aussi, j'aurai un autre chemin, qui est, par exemple, le chemin de la liste des produits. Donc, je vais dire ici produits de bain. Et à l'intérieur de ce chemin, je dirai que le composant est un composant de liste de produits. Et puis quand nous allons au navigateur, nous verrons que lorsque je vais à localhost que j'ai encore le travail de la page d'accueil, produit moins de travail. Pourquoi ? Parce que j'ai besoin de spécifier leur sortie externe, qui est basée dans le composant de l'application ou dans le composant racine. Donc, pour ce faire, nous allons au composant de l'application et ensuite nous devons supprimer ceux et dire sortie du routeur. Nous devons spécifier cette balise ou ce sélecteur pour spécifier la prise du routeur. Donc, cette prise de routeur me guidera vers le bon composant basé sur le lien que je fournit. Donc, quand je sauvegarde et retourne au navigateur, il est compilé avec succès. Et puis je ne verrai que dans la route que le composant de page d'accueil. Et puis quand je veux ajouter une liste de produits, je dirai les produits comme je l'ai spécifié dans ces sorties, je verrai que la liste de produits fonctionne. C' est ainsi que nous définissons les routes internes qui font référence à d'autres composants. Mais d'abord, je voudrais avoir un code propre. Alors faisons un peu de refactoring. Nous pouvons mettre ce tableau dans une variable afin que nous puissions avoir un propre pour écrit. Donc, je définit ici une constante, appelez-le routes. Et ces routes a un type de routes et qui est également importé automatiquement. Et c'est égal à mon tableau. Donc, faisons comme un meilleur formatage ici. Nous avons donc ici le chemin, premier chemin et aussi le composant. Et puis je passe ces routes constantes 2, 4 racine, et l'enregistrer. Ensuite, nous aurons nos routes ici. Dans un niveau plus avancé, certaines personnes créent un module spécial pour leurs itinéraires. Mais vous pouvez aussi le faire de cette façon. Mais pas de problème, on ne peut pas le garder de cette façon. Et nous verrons plus tard, lorsque nous refactorisons notre application, comment nous créerions un module spécial pour le routage. Pour l'instant, c'est exactement ce dont nous avons besoin. Nous avons maintenant des routes internes. Nous avons le chemin qui est le chemin par défaut, va au composant de page d'accueil et aussi le produit qui va au composant de liste de produits. 74. Maîtrisez la page de la tête et pied: Ok, dans cette conférence, nous allons faire un en-tête et un pied de page pour notre application dans le G-Sharp. Et bien sûr, nous allons savoir comment créer une page maître. Donc, chaque page de notre application aura l'en-tête et le pied de page. Donc, si vous vous souvenez de la création de composants dans Angular ou dans NX était dans ce commentaire comme nous avons créé avant la liste de produits, nous spécifions le nom du projet. Donc ici, je vais remplacer ces types. Donc, j'aurai ici, par exemple, un dossier partagé, qui est comme un composant partagé. Et je vais appeler le premier est en-tête et à l'intérieur et vous magasinez. Et bien sûr, je veux aussi en avoir un autre qui s'appelle pied de page. Et maintenant, comme vous le voyez ici, nous avons un dossier partagé avec pied de page et en-tête. Alors appelons ces composants dans notre page d'accueil. Donc nous pouvons dire ici, appelez-moi le premier composant. Allons dans le fichier ts pour trouver le sélecteur. Je vais mettre celui-là. Et aussi la même chose pour le pied de page. Ajouter lorsque nous enregistrons et aller à notre navigateur. Nous sommes maintenant dans la page de la liste des produits. Alors allons à la page d'accueil. Je vais voir que j'ai l'en-tête, accueil elle-même et le pied de page. Que faire si vous voyez avant que le produit n'a pas d'en-tête et de pied de page. Nous devons donc les ajouter aussi là. Donc, la meilleure façon de le faire, nous devons faire l'en-tête et le pied de page comme quelque chose comme partagé. Pour qu'on puisse revenir ici et annuler cet appel. Nous allons à l'application composant. Et à l'intérieur de ce composant d'application, nous allons placer le composant d'en-tête et le composant de pied de page et la sortie où nous rendons les composants, il sera au milieu. Donc, si je retourne à nouveau maintenant à mon navigateur après avoir supprimé cela de la page d'accueil. Donc on n'en a plus besoin. Nous les avons maintenant dans le composant d'application. Je vais dans le navigateur que la liste des produits a également en-tête et pied de page. Alors je vais à nouveau sur la page d'accueil. Je vais voir que la page d'accueil a également l'en-tête et le pied de page. De cette façon, je garantis que j'ai une page maître qui contient toujours en-tête et le pied de page et le contenu change en fonction de l'itinéraire que je spécifie. Et fausse structure de fichier. Encore une fois, nous pouvons dire que nous avons un partage des composants et des pages. Et des pages. Nous avons une page d'accueil basée sur le produit ainsi que le pied de page et l'en-tête des composants partagés. Et aussi le module d'application a été mis à jour avec le nouveau composant que nous avons déjà ajouté. Nous avons donc ici le composant d'en-tête et le composant de pied de page. Nous verrons plus tard comment faire les styles et structuré les en-têtes et aussi tous les composants et le composant de page d'accueil, exactement comment nous l'avons obtenu comme un design. 75. Règles de sélection de composants de noms avec ESLint: Je voudrais parler ici de la convention de dénomination de nos composants. Comme vous le voyez ici, cela commence toujours par le nom de l'entreprise ou le nom de l'espace de travail que nous sommes créés. Il est donc préférable d'avoir un nom spécial basé sur l'application lorsque vous utilisez des composants uniquement liés à cette application. Donc, je dirais peut-être que nous pouvons renommer cela par exemple, pour finir vous magasinez par exemple, en-tête. Et ce sera de cette façon, nous l'avons comme un composant spécifique pour la prise d'énergie. Donc, la même chose que je vais faire pour le pied de page, et ensuite nous devons spécifier le nom aussi dans les composants eux-mêmes. Nous devons donc changer les sélecteurs. Donc, nous remplacons ceci par le magasin NG. Et aussi pour l'en-tête, nous allons changer ce nom pour magasiner. Donc, après avoir sauvegardé ces fichiers, nous avons aussi besoin d'un endroit pour le changer dans la voie ES. La terre des oreilles est un outil où il spécifie le linting pour mon application. Donc, cela corrigera mes erreurs lorsque je vais construire mon application ou quand je vais déployer l'application. Donc ici, quand je lance la peluche ES, alors il me dira, non, vous avez un problème dans votre nom de sélecteur. Alors s'il vous plaît le changer en fonction de la règle qui est dans la peluche ES. Donc, quand je vais au fichier Eastland RC où nous avons la configuration, nous verrons dans une des lignes de cette configuration sur Eastland. Voyez que nous avons ce qu'est le sélecteur de directive et quels sont les composants du vecteur. Donc, le préfixe est toujours des bits bleus parce que nous avons nommé notre espace de noms ou l'espace de travail basé sur cette société. Donc, nous devons simplement le changer pour mettre fin à votre magasin, alors nous n'aurons pas de problèmes d'allongement des oreilles. Et aussi, vous pouvez spécifier quel est le style de la convention de dénomination. Donc vous pouvez dire, j'ai une affaire K-Pop, ce qui sera comme si nous l'avons ici. Et vous magasinez moins pied de page, ou vous pouvez spécifier un cas de chameau. Une affaire de chameau vient comme ça, donc on n'a pas de moins, on a une capitalisation. Normalement dans Angular, nous avons la directive avec CamelCase et leurs composants électeurs viennent comme un cas K-Pop. Et rappelez-vous, nous éditons le fichier ES peluches, qui se trouve à l'intérieur de l'application. Nous n'éditons pas le fichier principal est lié parce que, comme vous vous en souvenez, nous avons le fichier ES peluches, général, et ensuite nous avons un fichier ES peluches spécifique à l'application. Donc, ici, nous devons mettre notre migration, qui sont liés exactement à cette application. 76. Permettre de codde coder de cristaux Live: Dans la conférence précédente, nous avons vu que nous avons besoin de quelque chose appelé linting et nous avons vu que nous modifions le fichier ES peluches. Et nous avons dit que la peluche ES nous aide à résoudre les problèmes dans notre code. Mais comment je peux voir cette puissante peluche ES qui m'aide à réparer mon code en direct. Comme quand je tape du code, je veux voir quelles erreurs je fais de cette façon après l'installation des extensions, des extensions recommandées que nous avons avant, et aussi les extensions recommandées qui viennent avec le NX. Nous voyons que le terrain ES n'est pas encore activé. Donc, vous avez besoin dans le code VS, vous devez cliquer ici sur ES peluches pour activer le prêt en direct de votre code. Lorsque vous cliquez dessus, il vous demandera que l'extension ES peluches utilisera le module Node Eastland pour la validation, qui est installé localement. Alors, veux-tu activer ça ? Tu veux l'autoriser ? Alors tu dirais juste un bas partout. Lorsque vous autorisez cela, alors ils ES peluches vient actif. Et puis vous commencerez à obtenir des erreurs et des erreurs de votre code. Comme vous le voyez ici, je suis arrivé ici et erreur rouge. Pourquoi ? Parce que cela dit, par exemple, que je ne peux pas avoir un constructeur vide. Ou par exemple, je viens avoir une fonction vide. C' est des règles de peluchage. Et bien sûr, vous pouvez modifier ces règles de prêt comme vous le souhaitez dans votre fichier EMS Lane. Un autre exemple ici que j'ai eu une erreur sur le nom du sélecteur de ce composant. Parce que nous avons déjà dit que nous avons mis une règle que chaque composant doit être préfixé avec N D forte, E forte. Donc ici, ça fonctionne bien. Nous n'avons aucune erreur et aucun problème parce que nous avons spécifié que dans le fichier ES peluches, nous avons dit que tout ou chaque composant doit être préfixé avec NG shop. Donc, quand je retourne à nouveau à ce composant qui m' a causé et un problème et j'ai mis NG boutique. Je vais voir directement que j'ai obtenu que tout va bien. Parfois, ces erreurs sont gênantes, vous pouvez donc les exclure également. Nous avons donc besoin d'une règle pour l'ajouter à ce fichier de peluches ES. Donc, nous ne pouvons pas dire que non vérifier pour moi sur les fonctions de noyau vide. Vous avez donc beaucoup de règles que vous pouvez modifier. Ensuite, vous pouvez construire votre environnement comme vous le souhaitez de la manière de vous aider à coder de la meilleure façon que vous voulez. Donc, parfois, il est ennuyeux de voir ces erreurs, même vous ne faites pas de grosses erreurs. Ainsi, vous pouvez désactiver certaines de ces erreurs qui vous dérangent. Donc, lorsque vous mettez la souris sur l'erreur, il vous demandera un constructeur vide inattendu. Donc, vous devez réparer ça. Alors, comment réparer ça ? Vous connaîtrez la règle à partir de ce lien. Donc, lorsque vous cliquez sur ce lien, il vous demandera de l'ouvrir dans le navigateur. Et quand nous allons à huit, nous verrons que ce rôle, sorte que vous pouvez ajouter à votre fichier ES lint ces règles afin que vous puissiez le désactiver. Donc, si vous voulez le faire, nous copions simplement ceci et revenons à notre code. Et dans le fichier ES peluches où je place mes règles ES peluches où nous avons écrit cette boutique NG. Nous pouvons ajouter une nouvelle règle en faisant une virgule, et nous copions ces deux règles. Donc aucune fonction vide n'est désactivée. Et aussi je veux désactiver la fonction vide pour TypeScript ES longueur. Donc, nous pouvons juste aussi supprimer cette partie. On ne dit pas me donner erreur. On dit qu'il suffit d'éteindre. Donc, quand j'éteindrai cette règle, je verrai que cette erreur a disparu. Et aussi nous avons ici une autre erreur. Nous verrons que sa méthode de cycle de vie sur, en elle ne devrait pas être vide. Il est également angulaire ES peluches large. Donc aussi faire cette règle, tourner de cette règle, cela vous aidera également à désactiver cette erreur. Mais pour moi, j'aimerais le garder. Il y a beaucoup de rôles que vous pouvez configurer dans votre terrain EMS. Ainsi, vous pouvez également les configurer en fonction de la documentation de la bibliothèque ES charpie. Si vous allez sur le site, si vous allez à Google, vous trouverez cette bibliothèque. Ça s'appelle Eastland. Eastland a beaucoup de rôles. Donc, vous avez, par exemple, des règles, test unitaire, mais vous êtes intéressé par les règles. Vous pouvez consulter la documentation, toutes les règles qui vous intéressent. Je pense que ce que nous avons maintenant est suffisant. Encore une fois, un rappel, vous n'avez pas besoin de configurer cette règle uniquement au niveau de l'application. Parce que si vous vous en souvenez, nous avons ES fichier lié au niveau de l'application et aussi un fichier global. Vous pouvez le configurer dans le global. Donc, de cette façon, vous n'obtiendrez aucune erreur parmi toutes les applications et bibliothèques que vous allez créer. Alors j'ai ajouté ici, sauvez-le, et nous le gardons ici. Nous le supprimons d'une règle d'application spécifique. 77. Extension NX VSCode: Dans les conférences précédentes, nous avons vu comment nous créons des composants via la ligne de commande à l'aide d'une interface de ligne de commande EQ. Mais NX a rendu la vie plus facile en créant et en extensions, ce qui accélérera le codage et la génération de composants, de modules, de services, etc. Lorsque vous configurez un espace de travail, le projet vient toujours avec la recommandation d'extensions, comme nous l'avons vu précédemment, nouvelle console angulaire. Et cette extension est déjà disponible dans les extensions en recherchant NX ou dans la console ECS. Vous pouvez donc commencer cette extension en cliquant ici. Et vous êtes toujours en mesure d'utiliser la ligne commune de NX, mais dans une interface utilisateur graphique graphique. Donc, par exemple, je voudrais générer un composant. Donc, je vais ici à NX et cliquez sur Générer. Et puis je vais obtenir une liste des éléments de générateur de volonté dans Angular. Nous avons vu précédemment cette ligne de commande comment nous créons l'application. Nous avons également vu comment nous créons un composant, comme nous le voyons ici. Nous pouvons également générer des directives. Dans les gardes armés, beaucoup de types d'éléments qui sont fournis par angulaire. Ils peuvent être créés ici. Par exemple, créons un composant. Encore une fois, comme nous l'avons vu précédemment. Je vais obtenir des informations que je dois mettre le nom du composant, le nom du projet, et aussi le module. Si je veux un module spécifique et le style qui est utilisé pour ce composant, vous pouvez, par exemple, CSS ou SCSS dépend de votre choix et de nombreuses autres options comme vous le voyez ici. Donc, si vous vous souvenez que nous avons deux projets ici. Donc, nous avons admin et ND shop, et nous allons travailler sur ce cours sur les deux d'entre eux. Donc, générons, par exemple, une page pour le tableau de bord d'administration. Donc, nous pouvons dire que je veux composant, appelez ça un tableau de bord. Et le nom du projet est admin. Et comme vous le voyez ici, chaque fois que je tape quelque chose, il exécute ici, la commande, mais avec le drapeau de course sèche. Donc, comme vous le voyez, je crée un tableau de bord dans le projet admin, puis je l'ai obtenu. Projet d'administration du tableau de bord Mais je voulais dans un dossier spécifique. Donc, je vais dire pages barre oblique tableau de bord. Et il va à nouveau courir comme une course à sec et nous allons l'obtenir ici. Donc, comme vous voyez que nous avons tous la même capacité qu'une ligne de commande. Alors je vais remplir ce champ. Donc, nous avons ici pages barre oblique tableau de bord. Le projet est admin. Si je veux un module spécifique, ni je veux le garder dans le module de l'application comme vous le voyez ici. Et aussi ils utilisent un style est SCSS, je préfère cela, et aussi la stratégie de détection des changements. Et nous pouvons le garder comme défaut pour l'instant. Et il y en a une autre, et il y a d'autres options qui, par exemple, ne sont pas si importantes pour nous maintenant, mais nous en aurons besoin plus tard comme nous le voyons. Mais ici aussi, nous avons besoin d'un sélecteur. Vous pouvez spécifier un sélecteur personnalisé, comme nous l'avons vu précédemment pour les composants. Donc, je peux dire tableau de bord admin. Donc, ici, nous avons le tableau de bord d'administration et ensuite nous pouvons avoir sauté le test. Par exemple, je ne veux pas générer la spécification TS, qui est celle-ci, qui est toujours utilisée pour les tests unitaires. Donc, vous pouvez aussi sauter ça. Donc, tout cela peut être possible dans cette interface utilisateur. Donc, lorsque je clique sur Exécuter, la commande sera exécutée. Essayons ça maintenant. Je clique sur exécuter et je vois que le commentaire est exécuté, bien sûr, sans la course à sec, donc il est vraiment en cours d'exécution. Donc, je vois ici le composant de tableau de bord est créé ici et le module d'application est mis à jour. Donc vous avez deux choix ici. Vous pouvez toujours utiliser un x pour générer, également exécuter des projets, et aussi faire un test et les construire, ce qui est comme une interface graphique pour vous faciliter tout de ne pas taper dans la ligne de commande. Donc, par exemple, je veux exécuter l'administrateur du projet. Alors je vais ici courir. Ensuite, je sélectionne servir ou construire. Donc, je vais sélectionner le Centre d'administration, puis je vais cliquer sur Exécuter. Et puis il fera aussi la cellule pour moi. Donc, un outil sélectionnez un port et je peux l'exécuter sur le navigateur. Donc, comme vous le voyez ici, il dit que le projet est en cours d'exécution sur le navigateur, sur le port 400, 4200. Donc, si nous allons ici, allez à nouveau au projet, exécutez-le, et ensuite nous aurons le panneau d'administration. Donc, comme vous le voyez, tout est possible via l'interface graphique, mais c'est à vous de décider si vous voulez utiliser la ligne commune ou cette interface graphique. 78. Créer des bibliothèques partagés par la ligne de commande: Ok, maintenant nous allons à une nouvelle étape. Nous allons construire une bibliothèque partagée. Comme nous l'avons dit précédemment, nous avons vu que ces applications partagent certaines bibliothèques pour un objectif spécifique. L' un d'eux, par exemple, bibliothèques u i et aussi vous là et la bibliothèque d'authentification. Une autre bibliothèque est la bibliothèque de produits et de catégories. Et nous avons déjà parlé de la raison pour laquelle nous devons faire ça. Et pour rappel rapide, je dirais que la raison est que nous allons partager les mêmes composants entre ces applications. J' ai donc besoin d'avoir un composant de connexion pour le panneau d'administration et la question de l' application en même temps que nous avons vu précédemment comment nous avons créé des composants pour une application spécifique. Maintenant, nous allons voir comment créer des bibliothèques et créer des composants à l'intérieur de ces bibliothèques. Je vais maintenant le faire avec la ligne commune. Et dans la prochaine conférence, nous le ferons avec un x2. J' ai jeté l'extension dans le code VS. Nous revenons donc à notre projet et je vais ouvrir un nouveau terminal. Donc en cliquant sur ce plus ici. Et puis je vais exécuter la commande pour créer une bibliothèque. Cette commande qui est utilisée pour créer une bibliothèque est NP x et x generate. Et puis roman, qui est le nom de la société qui a créé en x. et puis je dirai espace de travail. Et le type de l'espace de travail sera lib, ce qui signifie que c'est bibliothèque. Et puis vous pouvez passer le nom de la bibliothèque que vous voulez. Par exemple, je commencerais par la première bibliothèque, qui s'appelle l'interface utilisateur. Et essayons aussi de le faire en mode sec. Donc, avec dry run, je m'assure que la bibliothèque de droit ne sera pas créée, mais juste je vais voir ce que fait la commande. Alors appuyez sur Entrée. Et comme vous le voyez ici, que la bibliothèque est créée spécifiquement dans ce chemin lèvres interface utilisateur et avec ses propres sources et code de configuration ts. Et bien sûr, d'autres fichiers pourraient le mettre à jour comme la configuration ts. Nous verrons pourquoi et aussi Angular JSON, paquet NX JSON, et cetera. Donc, ce que nous verrons plus tard que cette bibliothèque est créée dans les lèvres parce que nous avons le code source de l'interface utilisateur lèvres. Et comme vous le voyez ici, nous avons des bibliothèques d'applications qui sont partagées entre ces applications. Essayons donc d'exécuter cette commande sans l'exécution à sec. Comme vous le voyez ici, la bibliothèque a été créée. Et nous voyons ici dans l'Explorateur de fichiers, nous voyons qu'il a sa propre bibliothèque ou ses propres modules. Donc, vous voyez ici que l'interface utilisateur a une source et saut et cette jambe ici. Et vous pouvez avoir un fichier d'index pour les exportations, comme nous le verrons plus tard pour appeler ces bibliothèques. Dit que je pense ici aussi que vous pouvez spécifier un me lire pour cette bibliothèque. Par exemple, vous pouvez dire l'interface utilisateur, et vous pouvez donner, par exemple, description pour cette bibliothèque. Je dirais que cette bibliothèque contient les composants de l'interface utilisateur qui sont utilisés dans la société, par exemple. Et quels composants, par exemple, nous avons un composant de bannière, nous avons curseur. Nous avons, par exemple, une autre chose comme pas à pas, etc. Donc, comme vous le voyez ici, nous avons tout décrit pour cette bibliothèque et il a son propre fichier README. Ok, creusons plus dans les dossiers. Donc, nous voyons que la bibliothèque est créée ici. Donc, dans ce niveau, pas après la source et dans la lèvre, je vais créer mes composants. Nous verrons donc comment créer des composants plus tard. Et maintenant, nous avons cette interface utilisateur, vous soit TS, qui à l'exemple de fichier, juste pour vous montrer comment exporter des fonctions, des méthodes d'exportation, des modules d'exportation, comme nous le verrons plus tard. Et aussi, nous avons index.js. Cet index ts est utilisé pour exporter tout de cette bibliothèque. Par exemple, je vais exporter le module. Je vais exporter, par exemple, le service de composants. Nous devons donc énumérer ici toutes les exportations que nous devons exporter. Et puis nous pouvons les utiliser dans d'autres endroits, comme dans des applications ou dans d'autres bibliothèques, comme nous le verrons plus tard, nous n'avons pas à creuser maintenant dans ce fichier d'index, nous verrons comment nous pouvons l'utiliser. Et encore une fois, nous avons également besoin en particulier de la configuration Estlund pour cette bibliothèque. Si vous voulez spécifier quelque chose de non général et spécifique pour cette bibliothèque, vous pouvez ajouter les règles ici. Donc, dans ce cas, seule cette bibliothèque sera sensible pour le linting ES basé sur ces règles de configuration est juste utilisé pour les tests et les tests unitaires. Nous verrons également comment utiliser ou comment faire un test unitaire à l'intérieur des bibliothèques dans d'autres sections si vous voulez aussi une configuration spéciale TypeScript plutôt que qui sont dans la configuration générale. Parce que comme vous le voyez ici, nous avons ts config dot pace, qui est le principal ts config qui est créé ici. Et il y a aussi une configuration ts ou TypeScript spécifique. Encore une fois, pour cette bibliothèque, ce qui a fait la différence entre ces fichiers est juste sur la façon de créer une référence. Ce n'est qu'un ranger les fichiers. Donc tu n'as pas besoin de t'en soucier tant de ça. Donc, si vous voulez apporter des modifications, comme nous le verrons plus tard, vous pouvez les spécifier dans la bibliothèque de points ts config, qui étend la configuration principale ts, qui est située dans le même dossier. Ok, ce que les fichiers sont mis à jour comme nous le voyons ici, ts config Bayes, JSON est mis à jour. Alors pourquoi il a été mis à jour ? Il a été mis à jour car il a ajouté un nouveau chemin pour cette bibliothèque. Nous verrons comment utiliser ce chemin lorsque nous allons appeler cette bibliothèque ou quand nous allons utiliser le composant dans cette bibliothèque. Donc, ici, nous allons sauver ce chemin d'une manière ou d'une autre. Et nous verrons plus tard qui vous n'allez pas utiliser ce chemin pour importer des composants ou importer des modules ou des services. Mais pour utiliser ce raccourci ou cette courte partie, angulaire JSON aussi mis à jour, nous pouvons voir pourquoi, parce que nous pouvons voir pourquoi, vous savez que dans Angular, vous devez spécifier et définir chaque projet qui est créé dans votre ou dans votre ancien projet. Donc, comme nous le voyons ici, nous avons des applications, et ensuite nous avons notre bibliothèque. Et nous voyons la racine de cette bibliothèque. Nous voyons la route source et toute la configuration qui sont nécessaires pour configurer Angular pour que cette bibliothèque fonctionne de manière satisfaisante. Et x JSON sont également mis à jour parce que nous avons ajouté une nouvelle bibliothèque. Donc, il a aussi l'interface utilisateur et les balises. Nous verrons l'utilisation de ces balises plus tard. Ok, cool. Qu' est-ce qui est important pour nous maintenant que nous avons créé une bibliothèque ? Nous verrons plus tard comment créer à nouveau la bibliothèque, mais avec, pas avec la ligne commune, mais avec cette extension. Donc, nous utiliserions cette extension generate ou NX pour générer une bibliothèque que nous allons implémenter et utiliser ces bibliothèques dans notre application. 79. Créer des bibliothèques partagées par l'extension NX: Ok, Auparavant, nous avons créé les bibliothèques en utilisant la ligne commune. Maintenant, nous allons utiliser l'extension, l'extension que je vous ai montré précédemment dans les conférences précédentes, nous avons téléchargé en code Visual Studio. Donc, dans cette conférence, nous allons créer toutes les bibliothèques de repos dont nous avons besoin pour construire notre projet. Auparavant, nous avons créé la bibliothèque d'interface utilisateur. Maintenant, nous allons construire les utilisateurs et la bibliothèque d'authentification, produits et la bibliothèque de catégories et toutes ces bibliothèques. Donc, revenons à Visual Studio Code, nous cliquons sur l'extension NX, puis nous allons à Générer. Et pour générer, nous allons sélectionner une bibliothèque. Donc, ici, nous devons mettre le nom de la bibliothèque, donc nous allons appeler les produits informatiques. Donc, parce que nous avons précédemment l'interface utilisateur et maintenant nous avons les produits et nous créons plus tard les utilisateurs et le répertoire. Si vous voulez spécifier un répertoire spécifique dont nous n'avons pas besoin, nous voulons le placer dans les lèvres, comme vous le voyez ici. Nous avons des lèvres ici et nous voulons la placer ici. Donc tout va bien. Et nous allons cliquer sur Exécuter. Et après avoir exécuté cette commande, nous verrons ce labo que j'ai à peine été créé ici. Et nous verrons que maintenant nous avons l'interface utilisateur et les produits. Passons maintenant à la deuxième bibliothèque, qui est les utilisateurs et l'authentification. Nous l'appelons utilisateurs est suffisant. Et puis il va créer aussi une course à sec. Et fouillons plus sur les commentaires ou les paramètres de cette bibliothèque. premier paramètre est le style ou le système de style qui est utilisé à l'intérieur des composants de cette bibliothèque. J' utiliserais toujours scss. Bien sûr, vous avez la liberté de choisir le système que vous aimez. En outre, si vous voulez avoir un répertoire spécifique pour créer cette bibliothèque, vous pouvez définir non seulement l'ellipse, mais vous pouvez également définir un autre répertoire. Donc, vous pouvez spécifier le répertoire ici, mais quand vous le laissez vide, il sera créé à l'intérieur du dossier lips et ajouter la spécification du module, qui est un module qui est créé ici. Et ce module a un fichier de test. Donc, lorsque vous activez ce fichier de test ou lorsque vous activez cette option, vous aurez un fichier de test unitaire testfile, Quelque chose comme ça. Donc, si vous ne mentionnez pas cela, alors vous n'allez pas avoir ce fichier de spécification, mais c'est facile et vous pouvez le créer manuellement plus tard. Buildable est de générer une bibliothèque constructible. Bien sûr, nous devons toujours construire toutes les bibliothèques dont nous avons besoin pour notre production. Mais par défaut, cette bibliothèque générable peut être exécutée lorsque vous allez exécuter la commande build pour cette bibliothèque, comme nous le verrons plus tard, activer IVY est pour activer une bibliothèque, alors il, vous utiliseriez ces méthode de compilation en Angular. Angular a de nombreuses façons de compiler. L' un d'eux est Ivy. Ivy est une réécriture complète du moteur de rendu angulaire. Si vous en savez plus à ce sujet, vous avez un o t et c'est aussi IVY. Ivy promet d'énormes améliorations pour votre application. Avec IVY, vous pouvez également compiler des composants plus indépendamment les uns des autres. Donc, vous pouvez activer cela pour cette bibliothèque et pas de problème. J' ai donc une erreur ici qui activer IVY ne doit être utilisé qu'avec constructible. Nous devons donc activer celui-ci pour cette passe d'importation de bibliothèque. Nous avons vu précédemment que dans la configuration ts que nous avons un chemin spécifique qui est généré. Ainsi, vous pouvez entendre également spécifier vos partenaires en fonction de ce dont vous avez besoin. Par exemple, les produits ont été générés avec le nom de la société Linda, avec AD, puis le nom de la bibliothèque. Et la même chose. Si vous voulez un nom spécifique, pas comme ça, alors vous pouvez le spécifier là. Mais je veux avoir les mêmes modules de chargement paresseux est également utilisé pour ne pas charger le module directement. Lorsque vous exécutez l'application, vous n'utilisez ces modules ou bibliothèques que lorsque vous en avez besoin. Comme nous le verrons plus tard, nous utiliserons les deux types. Nous utiliserons les modules de chargement paresseux et la molécule immédiate. Puis à son tour, comme nous l'avons vu précédemment, ce qui est un hiver est utilisé pour cette bibliothèque. Je préfère toujours utiliser ES peluches. Lorsque vous spécifiez le module de chargement paresseux, vous devez spécifier le module pilote. Quel module nous appellerons ce module. Normalement, ce sera le module d'application, comme nous le verrons aussi plus tard. Si vous voulez un préfixe spécifique pour les composants ou les directives de la bibliothèque, comme nous l'avons vu précédemment, vous pouvez le spécifier ici, sorte que vous n'avez pas besoin d'aller modifier le fichier ASM. Par exemple, j'utiliserais aussi ici, les utilisateurs publiables. Je pense que non, nous n'avons pas besoin de cette bibliothèque publiable. routage de la même manière que nous avons vu les routes au niveau de l'application. En outre, nous pouvons avoir le routage pour le niveau de la bibliothèque, donc nous pouvons configurer cela aussi. Et il y a aussi d'autres options comme les fichiers de formatage ignorés pour, par exemple, pour plus joli et aussi sauter le paquet JSON pour ne pas ajouter dépendance au backend JSON aussi pour sauter ts config, ce qui est de ne pas mettre à jour ts config pour le développement expérience. Non, on a besoin de toutes ces choses et de toutes ces étiquettes. Nous en parlerons plus tard lorsque nous appellerons ces bibliothèques dans nos applications. coureur de test unitaire est également pour les tests unitaires que nous allons utiliser comme nous le verrons aussi à l'avenir. Alors exécutons et exécutons cette commande. Et nous verrons que toute la commande a été écrite ici avec tous les paramètres dont j'ai besoin. Donc nous n'avons pas à diriger la ligne de commande. Nous avons donc juste besoin de faire quelques clics juste pour générer ces commentaires. Et comme nous voyons que nous avons maintenant la bibliothèque de l'utilisateur a créé la différence ici que nous avons sélectionné le plus juste, que nous le configurons avec un routeur. Nous avons donc déjà le module de routeur, mais par exemple, la bibliothèque de produits n'a pas de module de routeur. Et nous avons également parlé d'un préfixe spécifique pour la directive et les composants. Nous verrons que nous l'avons ici aussi. Nous avons donc des utilisateurs, pas le nom de la société. Donc, nous avons CamelCase pour les directives et K-Pop cas pour les composants, et le préfixe est toujours doit être utilisateurs. Maintenant, créons la dernière bibliothèque dont nous avons besoin, qui s'appelle les ordres. Donc, nous produits déjà utilisateurs de l'interface utilisateur. Créons aussi la bibliothèque des commandes. Je vais donc remplacer ça par des ordres. Tout est pareil. Nous avons ici, pas de répertoire, tout est déjà défini. Et nous remplacons le préfixe et toutes les autres informations qui sont déjà définies. Donc, nous cliquons sur Exécuter et nous générons cette bibliothèque, et elle sera située près des autres bibliothèques. Si nous allons à nouveau maintenant à la base de configuration ts que ces bibliothèques ont toutes créées ici. 80. Créer des composants dans les bibliothèques et les utiliser dans les applications.: Ok, dans cette conférence, nous allons savoir comment créer un composant à l'intérieur de la bibliothèque. Par exemple, le composant de bannière, qui se trouve à l'intérieur de la bibliothèque d'interface utilisateur. Et nous verrons aussi comment nous pouvons utiliser ce composant au niveau de l'application. Par exemple, dans l'application nette N G également ici, nous pouvons utiliser la ligne de commande pour créer le composant ou l'extension NX. Je vais le faire dans les deux sens. Nous avons donc déjà créé ces bibliothèques, produits d' interface utilisateur, utilisateurs et commandes. Donc, nous allons d'abord créer le composant en utilisant l'extension NX. Je vais aller à l'extension de l'annexe, cliquez dessus, puis générer. Et j'utiliserais le Générer des schémas à partir d'Angular car un x n'a pas cette génération pour les composants. Donc, nous utiliserions celui-ci, composant angulaire schématique, qui crée un composant angulaire. Cliquons dessus. Et puis nous pouvons vous donner leur nom pour leur composant que je veux créer. Par exemple, je le donnerais, comme nous l'avons vu auparavant que nous avons bannière et le projet. Le projet est le nom de la bibliothèque où je veux créer ce composant. Comme nous l'avons vu précédemment, nous avons beaucoup de bibliothèques. L' un d'eux est la bibliothèque d'interface utilisateur. Et puis je vais utiliser les autres options. Allons vite sur eux. Donc, nous allons d'abord que nous allons voir ce module. Qu' est-ce qu'un module pour lequel vous voulez définir ce composant ? Comme je vous l'ai dit précédemment, nous avons le module contenant plusieurs composants et chaque composant doit être lié à notre module. Nous pouvons garder ce module vide, puis il utilisera le module par défaut de cette bibliothèque. Parce que comme nous le voyons ici, que les produits, par exemple, ont un module par défaut appelé module Produits, alors le composant sera placé ici ou la déclaration du composant sera placée ici. Alors je retourne à notre générateur. Je vais sélectionner le système de style. Qu' est-ce que le système de style que je veux utiliser est SCSS, comme nous l'avons convenu dès le début de ce projet. En outre, nous devons connaître la stratégie de détection des changements. Cette stratégie définit la façon dont le composant est mis à jour. Donc, par exemple, j'ai un composant qui contient le texte, par exemple, la bannière elle-même. Donc, je veux mettre à jour le texte de ce composant, de cette bannière de l'extérieur, à partir d'un autre composant. Donc ici, je peux choisir la stratégie, comment elle sera mise à jour. Par défaut est toujours le composant, est à l'écoute des changements sur push signifie que chaque fois que je dis S'il vous plaît mettre à jour vous-même, alors il sera mis à jour. Mais si je pousse un nouveau texte sur le composant sans informer le composant qu'il y a une mise à jour à venir, alors rien ne se passera. Donc, toujours vous pouvez choisir les stratégies. Je vais vous expliquer cela lors de l'explication réelle de notre projet. Pour l'instant, gardons-le par défaut. Certaines personnes préfèrent avoir un bloc d'affichage au niveau de l'hôte, comme le composant lui-même aura un bloc d'affichage. Pour moi. Je le garde vide parce que je n'en ai pas besoin. Composant d'entrée, il s'agit d'une méthode obsolète. On n'en a plus besoin. Exporter, vous devez toujours, parfois pour exporter le composant si vous voulez l'utiliser dans d'autres modules. Donc, si je veux que ce composant de bannière soit utilisé dans d'autres modules, je dois l'exporter. Donc, pour l'instant, gardons comme ceci ou vous pouvez définir ceci comme un composant exporté. Flat signifie que nous voulons créer ces fichiers de ce composant au niveau racine de ce projet. Par exemple, lorsque je crée ce composant, il sera créé ici et il avec son propre fichier, pas dans un dossier. Donc, pour moi, je le garderais dans un dossier et l'utiliserais dans cette bibliothèque. Il est donc préférable de ne pas vérifier cet appartement dans le style de vie si je veux inclure des styles en ligne à l'intérieur de ce composant, comme vous le savez dans le modèle en ligne Angular que je ne veux pas avoir de fichier séparé pour le modèle. Donc, ce composant contiendra à l'intérieur le code HTML ou vous pouvez le mettre dans un fichier séparé. Lorsque vous cochez cela, le composant sera créé avec son propre modèle, sans aucun fichier HTML. Parce que chaque composant dans Angular doit contenir un fichier JavaScript, fichier HTML et le fichier de style, qui peut être CSS ou SCSS. Mais pour moi, je les garderais des fichiers séparés. Correction de peluches, c'est obsolète. Il n'est plus utilisé. Le chemin, si vous voulez que des faits spécifiques dans votre composant soient définis, vous pouvez le définir ici. Vous pouvez indiquer le dossier dans lequel vous souhaitez créer ce composant. Mais pour moi, je le garde vide, puis il sera créé à l'intérieur de la bibliothèque, que je cible. Préfixe, comme nous l'avons vu précédemment, que nous avons chaque composant a sélecteur. Nous devons donc définir ce que le préfixe de ce sélecteur. Donc, pour moi, je dirais toujours, chaque composant dans la bibliothèque d'interface utilisateur aura l'interface utilisateur de préfixe. Et aussi ici le sélecteur, il vous demandera quel est le sélecteur ? Le sélecteur doit être créé ici. Donc, je dirais bannière, sauter l'importation. Cela signifie que ne placez pas un composant à l'intérieur du module, comme nous l'avons vu précédemment, que le module contient plusieurs composants. Donc je n'ai pas besoin de le mettre ici. Ignorer Selector spécifie si le composant doit avoir un sélecteur ou non. Maintenant, nous avons besoin d'un sélecteur. Passer les tests, alors il ne générera pas les fichiers de test dont nous avons besoin pour les tests unitaires, qui se termine par SPECT de Ts. Et à la fin, nous devons savoir quel est le type de ce composant ou le type de cet article. Il peut s'agir d'une directive ou d'un composant. Nous le gardons comme composant qui est situé dans la loi de dénomination. Donc, nous aurons comme banner.com dot ts encapsulation de vue est la stratégie d'encapsulation de vue à utiliser dans ce composant. Donc tu peux garder ça vide pour l'instant. Donc, quand j'exécute cette commande, je verrai que je reçois toujours une erreur. Impossible de trouver le module NG utilise l'option garder l'importation pour ignorer l'importation d'un module. Non, nous en avons besoin dans le module parce que nous allons l'utiliser dans un autre composant ou au niveau de l'application comme nous l'avons vu auparavant. Donc, pour cela, nous avons besoin d'un module. Pourquoi nous obtenons cette erreur ? Cette erreur vient parce que vous, soit la bibliothèque n'a pas de module et parce que nous l'avons créé à travers la ligne de commentaire en utilisant MPI x comme nous l'avons vu précédemment. Mais les autres composants ou les autres bibliothèques que nous avons là, que nous avons créé avec l'extension NX. Ils ont un module, mais la bibliothèque d'interface utilisateur n'a aucun module. Donc, créons aussi ça. Vous pouvez créer ce module manuellement comme les autres, ou si vous le souhaitez, vous pouvez également utiliser le générateur NX. Avec un générateur x, vous pouvez également créer des modules, comme vous le voyez par exemple, ici nous avons des schémas, un module angulaire, puis vous spécifiez la bibliothèque et vous spécifiez le chemin. Et c'est tout. Exactement comme nous faisons avec leurs composants. Pour l'instant. Gardez-le, par exemple, faites un travail professionnel pour le faire manuellement. Donc, tout d'abord, je vais créer un nouveau fichier. Je vais l'appeler point de point d'interface utilisateur. Et chaque module dans Angular doit commencer par le module d'ONG d'annotation. Donc, comme nous le voyons ici dans le module produits qui est généré précédemment, nous avons ce module NG et les importations, puis le nom comme une classe de ce module. Copions celui-ci et utilisez-le dans notre module d'interface utilisateur. Juste nous avons besoin de renommer les produits en interface utilisateur. Et dans ce cas, j'aurai mon générateur ou mon module prêt à être utilisé par le générateur. Alors essayons à nouveau et nous allons l'exécuter. Et nous verrons que le commentaire est créé ou généré. Nous voyons que n schématique dégénérer le style de bannière de nom de composant angulaire du projet est CSS ou SCSS, puis exporter. Et si je vais au module lui-même, je verrai qu'il y a déclaration et exportations du module ou du composant que j'ai créé. Et voici le composant. Nous avons le modèle HTML, nous avons le CSS, nous avons aussi le fichier de bureau et le fichier TypeScript. Donc, générons un autre composant en utilisant la ligne commune. Comme nous l'avons vu précédemment, nous pouvons exécuter avec une extension ou avec la ligne commune. Certaines personnes n'aiment pas l'extension, donc elles aiment faire des lignes communes. La ligne commune que nous avons ici est Andy génère des schémas, composant angulaire, puis vous spécifiez certaines propriétés que nous voulons. Donc je vais copier celui-ci et ouvrir un nouveau terminal. Et puis je vais le coller, puis je vais renommer la bannière pour être, par exemple, curseur. Donc, nous aurons curseur et ici aussi ainsi que curseur. Donc, à travers la ligne commune, nous faisons ces commentaires. Donc, ce que j'ai besoin de changer n'est pas mg, ce sera un x parce que nous exécutons un commentaire NX. Donc ici, je vais dire que NX génère un composant angulaire schématique, puis je spécifie les propriétés. Et puis si nous l'exécutons, nous verrons qu'il est généré avec exactement les mêmes valeurs que je voulais. Et il sera près de son frère, qui est appelé bannière. Ok, voyons maintenant comment nous pouvons utiliser ces composants dans mon application. Parce que nous sommes maintenant dans une bibliothèque, nous ne sommes pas au niveau de l'application. Donc, comme nous le voyons, nous avons des applications et des bibliothèques. Et dans l'application, je veux utiliser ces composants. Donc, par exemple, obtenons cette bannière 1. Nous pouvons créer, par exemple, n'importe quoi à l'intérieur, comme nous pouvons dire qu'une bannière de paragraphe fonctionne. Et nous utiliserions ce composant dans cette bibliothèque. Alors, comment nous utilisons un composant en général, je vais juste choisir le sélecteur. Je dirai, par exemple, ce devrait être comme cette bannière d'interface utilisateur. Et ce sélecteur. Je vais le prendre et le placer dans ma demande. Donc, je vais dire ici composant AB. Et je dirai, par exemple, que nous pouvons le mettre ici. Et je veux dire celui-ci, interface utilisateur est bannière d'interface utilisateur. Mais nous avons un problème ici que u i bannière n'est pas connu élément y parce qu'il n'est pas connu comme un module à l'intérieur de cette bibliothèque ou à l'intérieur de cette application. J' ai donc besoin de prendre le module de l'interface utilisateur et importé ici. Ensuite, l'application saura qu'il existe un composant appelé bannière d'interface utilisateur. Je peux l'utiliser à partir de la bibliothèque, qui est appelée UI. Comment nous pouvons importer le module d'interface utilisateur ou la bibliothèque d'interface utilisateur. C' est très simple. Je vais au module de l'application. Ensuite, j'écris ici l'interface utilisateur, comme nous l'avons vu précédemment, module. Et puis ce module d'interface utilisateur, il sera importé à partir du chemin d'accès. Donc, je dirai importer le module d'interface utilisateur à partir de, puis je spécifierai le chemin cependant. Nous avons le nom de l'organisation, puis l'interface utilisateur. Donc, avec cela, j'aurai accès au module d'interface utilisateur à l'intérieur de la bibliothèque d'interface utilisateur. Donc, comme nous l'avons vu précédemment lorsque nous avons créé la bibliothèque, la configuration ts est modifiée pour définir pour nous certains partenaires que j'avais besoin d'utiliser à partir d'autres bibliothèques. Mais je reçois toujours une erreur ici. Pourquoi ? Parce que le module de l'interface utilisateur ne se trouve pas dans ce chemin d'accès. Donc elipse source de l'interface utilisateur index.js. Allons jusqu'à celui-ci. Je vais aller le vérifier, et je vais voir que je n'ai pas d'exportation du module. Donc, ce que nous devons faire est juste d'exporter star à partir de là je dirai lib et ensuite le module lui-même. Et quand je sauve et aller au module d'application, et puis nous verrons que tout va bien et est défini. Et si je vais au composant de l'application, encore une fois, je vais voir que je n'aurai pas d'adulte ici Parce que vous, Je bannière est connu par l'application parce que j'ai importé le module du module de l'interface utilisateur. Alors, exécutons maintenant l'application et essayons cela. Donc, d'abord, sauvegardons tout et vous pouvez exécuter votre application en utilisant la ligne de commande comme nous l'avons vu précédemment. Ou vous pouvez également utiliser l'extension NX. Donc, vous dites juste NX servir, puis vous spécifiez quelle application vous voulez. Donc, notre application est en cours d'exécution maintenant, et comme nous le voyons ici, qu'elle fonctionne sous l'hôte local 4200, le port. Donc, je vais au navigateur et puis je verrai que nous avons celui-ci. Et puis je rafraîchis la page, et puis je vois que la bannière est à l'intérieur de ce niveau d'application. Donc, nous utilisons réellement le composant qui est créé à l'intérieur de l'interface utilisateur de la bibliothèque, à l'intérieur du niveau de l'application. 81. Comment consulter les chemins de la bibliothèque: Ok, maintenant tout va bien. Nous avons spécifié notre composant, nous l'avons importé de la bibliothèque et nous l'utilisons dans l'application. Donc, retirez-le d'ici maintenant parce que nous allons l'utiliser dans d'autres endroits, pas ici comme nous le verrons plus tard. Maintenant, je vais répéter la même idée juste pour la confirmer et la réparer pour vous. Donc, quand je veux importer un module, je peux toujours utiliser le chemin. Le chemin d'accès est défini dans le fichier de configuration ts. Et à l'intérieur du fichier de configuration, nous pouvons toujours modifier ce chemin est comme nous le voulons. Donc, nous voyons que ce chemin fait référence à ce fichier et toujours en Angular ou en TypeScript en général, lorsque vous voulez exporter certains modules ou classes ou par exemple, des modèles, vous pouvez toujours utiliser ce concept. J' ai donc un fichier d'index où je liste toujours tous mes composants que je veux exporter ou modules ou services. Ainsi, par exemple, j'ai dans l'interface utilisateur le service pour saisir des données de la base de données. Alors je dois le placer ici dans ce dossier. Donc, je dirai, par exemple, exporter, puis tout du fichier, par exemple, qui est appelé Bibliothèque. Et à l'intérieur de ce fichier, par exemple, il y a ce service. Donc, tout ce que vous voulez utiliser en dehors de cette bibliothèque, vous devez l'exporter. Et puis vous utiliserez ce bain, qui est spécifié dans la base ou dans les ts config Bayes pour l'utiliser dans n'importe quelle application ou même dans toute autre bibliothèque. Par exemple, dans le produit, je veux utiliser aussi l'interface utilisateur. Donc, je vais ici, puis je dis que je veux utiliser le module d'interface utilisateur à l'intérieur de ces modules produits. Donc de la même façon toujours. Donc, nous économisons ce temps ou trouver le chemin où nous voulons localiser le module, ou nous voulons localiser ce que nous voulons importer. Donc, dans ce cas, nous avons un chemin unifié et il est défini partout, toute l'application et tout leur espace de travail, voir. Alors. Je n'aurai aucun problème avec la définition du chemin de la bonne façon. 82. Quoi en question des fichiers de style style partagé: Ok, comme nous l'avons vu précédemment que nous avons créé un composant, et ces composants sont livrés avec un fichier de style. Et dans ce petit fichier, vous pouvez spécifier les styles spécifiquement pour ce composant. Vous ne pouvez donc pas utiliser ces styles en dehors de ce composant. Donc, je dirais par exemple, je vais donner à cela un exemple de classe. Je vais le donner comme la couleur rouge. Et à l'intérieur du style ou du fichier CSS, je dirai couleur. Je vais donner un cours, l'appeler couleur rouge. Et la couleur sera, par exemple, rouge. Et quand je vais au navigateur et le vérifier, et puis je verrai que le composant ne s' affiche pas ici parce que nous supprimons l'appel pour cela. Alors rappelons-le encore. Et nous allons à nouveau au composant de l'application. Je vous dis, je bannière. Nous allons l'enlever à nouveau. C' est juste pour les tests. Je vois que cette couleur fonctionne ici. Donc, quand j'utilise cette classe dans un autre composant, alors nous verrons que cette classe ne donne aucun effet parce que nous utilisons en dehors de ce composant. Donc, revenons à nouveau au composant de page d'accueil, et essayons d'utiliser cette classe. Donc, ici, nous avons cette couleur de classe rouge. Nous sommes dans le composant Banner. Je vais maintenant au composant de page d'accueil que nous avons créé auparavant. Donc je vais aller ici et dire la couleur rouge. Retournez à ma page. Et je vais voir qu'il n'y a pas de coloration parce que c'est le style est spécifique pour ce composant. Vous ne pouvez pas l'utiliser en dehors de ce composant. Donc, c'est la vue par exemple, pour moi, n'est pas tellement bon parce que je voudrais que tout soit partagé parce que j'utilise une bibliothèque partagée. J' utilise donc un espace de travail partagé. Donc, je voudrais avoir aussi les styles sont partagés entre toutes les applications. C' est l'une des raisons. Donc, mon idée d'éviter cela, que nous pouvons créer un dossier près de ces dossiers afin que nous puissions faire à l'intérieur les styles et tout le monde à l'intérieur de ces applications et bibliothèques peut utiliser ces styles. Alors essayons cela avec cette classe et nous verrons les résultats. Donc, tout d'abord, j'ouvrirai un nouveau terminal. Et puis je suis dans mon, par exemple, organisation, l'espace de travail. Je vais créer un répertoire, je l'appelle styles. Et puis nous verrons que ce style est créé ici. Créons un fichier à l'intérieur des styles. Appelez-le, par exemple, style.css. Ok, et maintenant on peut utiliser ce SCSS à l'intérieur de n'importe quelle application. Donc, par exemple, je vais l'utiliser à l'intérieur et vous magasinez. Dans n'importe quel magasin, nous avons déjà un fichier de styles. Et à l'intérieur de ce fichier de styles, vous pouvez importer ce que vous voulez à l'extérieur de cette bibliothèque. Donc, je peux importer le fichier que j'ai créé à l'extérieur, à l'intérieur de ce fichier. Donc, le fichier d'entrée pour le style de cette application est ce fichier car il est spécifié dans la configuration Angular. Si je vais ici au fichier de configuration angulaire. Donc, je vais voir dans les actifs ou les styles qu'il utilise ce fichier. Donc, les applications et vous magasinez les styles source, SCSS. Donc, je saurai que mon projet utilise uniquement ces fichiers de styles comme style d'entrée. Revenons donc à ce fichier et importons le fichier externe que j'ai créé précédemment. Donc, je vais ouvrir ici citation, et je vais aller étape par étape en dehors de ce dossier, en dehors du niveau de l'application. Donc, plus encore. Et aussi là, je suis là. Je peux voir, par exemple, des applications, des lèvres. Ensuite, je ne peux pas voir peut-être les styles ici, les styles de dossier, puis utiliser le style CSS. Donc ici, lorsque j'importe ce fichier, alors tous les composants à l'intérieur de cette application utiliseront ce style. Donc, quand je retourne au composant et je dirai, par exemple, dans leurs lèvres, je vais ici au composant, couper, le style. Allons le couper. On n'en a plus besoin ici. Nous devons donc le placer dans le style public ou dans le fichier de style chemise. Donc, je le place ici et nous nous souvenons que nous appelons cette classe ici à l'intérieur de ce composant. Et aussi dans le composant de page d'accueil où je voulais colorier aussi la page d'accueil fonctionne. Donc, nous verrons à la fin que ces deux composants ont partagé un type de classe ou le mettre en pause d'un seul interne classé. Donc, comme vous le voyez ici, nous avons des travaux de page d'accueil et des œuvres de bannières, et ils sont colorés en rouge. Donc, ces deux classes ou ces composants ont partagé une classe. Donc, nous pouvons utiliser tous ces, par exemple, des classes partagées dans toutes les applications et toutes les bibliothèques que nous voulons. Il est donc préférable de toujours créer un dossier séparé pour vos styles et de partager toutes les classes à l'intérieur de ces tuiles. Vous pouvez également importer des bibliothèques, comme nous le verrons plus loin. Vous pouvez également, par exemple, définir un matériau. Vous pouvez définir certaines variables. Les autres avantages également à propos de l'extraction des styles en dehors de l'application ou des composants spécifiques est que nous pouvons utiliser les variables partagées. Ainsi, par exemple, si je définit une variable dans mon composant de somme, je ne peux pas l'utiliser également dans un autre composant. Donc, vous savez que dans SAS, vous pouvez définir une variable. Donc, par exemple, je dirais primaire, par exemple, la couleur pour mon entreprise. Par exemple, la couleur et la couleur principale de mon entreprise est le vert. Donc, je veux utiliser ce précieux partout dans mon application. Mais si je le définit à l'intérieur du composant, je ne peux pas utiliser ces précieux. Donc, dans ce cas, je peux utiliser ce précieux partout où je peux créer les fichiers de styles à l'intérieur de ce dossier ou le dossier partagé. Donc peut-être que je dirais que nous pouvons nous débarrasser de tous ces composants internes parce que nous n'avons pas non plus un bon avantage ici que nous ne pouvons pas voir les variables qui sont disponibles dans ce dossier partagé. Parce que chaque fois que je veux utiliser la couleur primaire, précieux, alors non, j'ai besoin d'importer à nouveau les styles. Donc, j'ai toujours besoin de dire que l'importation à l'intérieur ce composant tous les styles ou le style que je voulais créer ici. Donc, quand je fais ça, alors je peux voir la couleur primaire verte à nouveau. Donc, sinon, ce sera un mal de tête pour moi parce que chaque fois que j'importe ce fichier dans ce composant, alors il sera beaucoup d'importation et nous finirons avec une structure très compliquée. Donc, pour moi, je dirais essayer d'éviter les styles de composants afin que nous puissions supprimer ce fichier Dans les composants et aussi chaque style de composant, nous pouvons supprimer totalement, nous pouvons créer une belle structure dans le style ou le style public. Donc, nous pouvons spécifier que c'est pour la bannière, c'est pour la page d'accueil du panneau d'administration ou par exemple, c'est la page d'accueil de l'e-shop. Donc, dans ce cas, vous serez en mesure d'avoir plus de contrôle sur toutes vos variables et aussi sur tous vos styles. Alors rappelez-vous, après avoir supprimé les styles, vous devez également supprimer du fichier ts. Donc, vous verrez que vous obtenez une erreur ici parce que vous avez supprimé le style des composants à partir d'ici. Nous devons donc être prudents à ce sujet. Donc, après, nous verrons comment nous pouvons structurer lentement ces fichiers ou ce dossier ou le dossier de styles externes en fonction de notre besoin, basé sur l'application ou basé sur la bibliothèque, le plus important pour vous maintenant que nous avons créé un , ce dossier public contient un style public. Et ce style public, vous pouvez l'utiliser dans le fichier d'entrée pour le style dans l'application. Donc ici, nous pouvons le définir ici. Et puis nous pouvons utiliser les classes qui sont disponibles dans ce dossier ou à l'intérieur de ces cadrans. 83. Réaliser des fichiers de style pour les applications de NgShop + Admin): Très bien, maintenant nous allons structurer les fichiers basés sur la pratique de construire l'Ayesha, comme vous le voyez ici, que si vous imaginez avec moi que la structure, vous le voyez en face de vous, vous, nous avons, par exemple, un en-tête. Nous avons le pied de page, et nous avons aussi quelques composants entre. Nous pouvons donc déjà définir notre structure en fonction de cela. Par exemple, j'aurais un style de fichier, en particulier pour la bannière, pour où est écrit les meilleurs produits. Donc ici cette bannière aura ses propres catégories de fichiers de style ainsi que vous le voyez, nous pouvons également définir leurs propres styles et leur propre composant. Et aussi ces composants qui sont définis pour les produits de fonctionnalité, ils peuvent également être utilisés comme un fichier de style séparé. Mais comme vous le savez aussi, nous avons un panneau d'administration. Et le panneau d'administration utilise également certaines fonctionnalités du produit. Ou par exemple, nous aurons un autre e-shop mais avec un style différent. De cette façon, nous devons définir notre structure de style en fonction de ce besoin. Il existe de nombreuses façons de structurer les fichiers de style, mais vous pouvez choisir ce qui est exactement nécessaire pour vous. Ça ne veut pas dire que ce que je fais ici est là. Je pense que c'est juste la chose que j'aime, la structure que j'aime. Ainsi, vous pouvez également faire votre propre structure. Je vais vous montrer comment j'ai fait la structure pour e-shop, qui combine le panneau d'administration et la boutique elle-même, et peut-être pour un autre magasin futur. Donc, en revenant à notre projet, nous voyons ici que nous avons structuré certains fichiers. Fermons les lèvres des applications et va au style. Dans, dans les Styles, nous allons définir la structure suivante. Tout d'abord, je vais avoir un fichier spécifique pour chaque application. Donc, par exemple, je vais renommer ce style CSS en admin CSS. Et je vais créer un autre fichier, je l'appellerai, et vous magasinez point SCSS. Donc, dans ce cas, j'aurai un style spécifique pour chaque application, ok, tout d'abord, avant tout, chaque application a besoin d'une configuration. Configuration du style. Par exemple, vous devez définir quelles sont les couleurs, ce qu'est une police et comment elle ressemble, ou quelles bibliothèques vous allez utiliser comme externes pour votre application, par exemple. Comme par exemple, matériau angulaire, exemple horrible Bootstrap ou end u-prime, comme nous allons le faire dans ce cours. Donc, à mon point de vue, d'abord, je vais créer un dossier, l' appeler à l'intérieur des styles, l' appeler une base. Et à l'intérieur de cette base, je vais combiner tous les fichiers qui sont toujours nécessaires pour chaque application et chaque bibliothèque. Je vais vous donner un exemple. Donc, d'abord, nous pouvons créer un fichier, l'appeler couleurs. Mais SCSS à l'intérieur de ces couleurs, nous allons définir les couleurs qui vont être utilisées à l'intérieur des applications. Par exemple, la couleur principale de mon application sera l'orange ou la couleur de la marque. Donc ici, je vais définir deux variables appelées une, couleur primaire. Et cette couleur primaire sera, par exemple, FF trois un 000, qui est par exemple l'orange. Et puis peut-être que j'aurai besoin d'une autre couleur, couleur primaire, mais de manière sombre. Par exemple, lorsque je passe la souris sur un bouton, je veux le montrer comme un plus sombre. Donc ici, on peut appeler ça sombre. Et puis nous pouvons définir notre propre couleur, par exemple, 29 000. C' est donc une orange plus foncée, un peu plus foncée. Donc, ces deux variables que je vais utiliser dans toutes les applications. D' accord ? Un autre fichier est nécessaire. Par exemple, j'ai besoin d'une configuration ou d'un conflit. Donc, dans cette configuration, je vais définir ce qu'est un corps, quoi il ressemblait, et aussi, par exemple, les liens et par exemple, les polices. Alors commençons, par exemple, configurez le corps. Donc, dans le corps, je veux utiliser une famille de polices. Disons Open Sans. Aussi, par exemple, toujours le navigateur par défaut m'envoie les liens avec sous-jacent. Je veux supprimer ce souligné par défaut. Donc, je dirai la décoration de texte de l'a ou le lien lui-même. Ce sera, par exemple, aucun. Normalement, il vient souligné, mais nous devons le faire comme un non. Donc ici, je mets la configuration de base dont j'ai besoin pour mon application ou pour toutes mes applications. Ok, peut-être aussi, je vais devoir définir les polices que je vais utiliser dans l'application comme vous le savez, font-face. Donc, par exemple, je vais créer un autre fichier. Appelez ça les polices. Vous avez la liberté. Vous pouvez placer tous ces fichiers dans un seul fichier. Par exemple, vous pouvez mettre les couleurs et les polices, tout dans le fichier de configuration. Mais je suis en train de définir ou de diviser cela en fonction des fichiers ou en fonction des fonctionnalités dont j'ai besoin. Donc, dans Google, il y a quelques polices qui peuvent être utilisées directement. On peut les appeler facettes de police. Donc, si vous voulez utiliser l'un d'eux, vous avez juste besoin d'aller dans le navigateur et de rechercher Google Fonts et Google Fonts. Dans le premier lien, vous trouverez beaucoup de polices que vous souhaitez utiliser. Par exemple, nous devons utiliser des sons ouverts, comme nous l'avons vu précédemment. Donc, basé sur notre conception, le concepteur m'a dit que je devais utiliser cette police. Donc je vais l'avoir. Donc, tout d'abord, vous pouvez sélectionner le style que vous voulez utiliser. Quel exemple je vais utiliser celui-ci. Et je veux aussi avoir le style. J' ai donc besoin de prendre le CSS, ce qui est nécessaire pour cela. Donc, vous avez ici deux options. Lien en général, vous pouvez le lier exactement dans votre fichier HTML ou importer. Pour moi, je vais utiliser cette importation. Donc, nous pouvons utiliser celui-ci et aller à l'application et le coller ici. Donc ici, nous aurons importer ce fichier ou ce fichier CSS. Certaines personnes le font de cette façon. Ainsi, par exemple, ils copient ce fichier ou ce lien, ils vont dans le navigateur. Et puis, par exemple, ils l'ont basé dans l'URL. Et puis ils auront cette liste. Certaines personnes utilisent ou copient cette liste et l'utilisent dans l'application. Parce que dans les polices Google, vous pouvez définir le type de police dont vous avez besoin. Par exemple, vous pouvez avoir la lumière 300, italique régulière. Vous pouvez les combiner tous dans un style. Ainsi, vous pouvez les importer tous dans un seul lien. Donc, pour moi, je préfère utiliser de cette façon. Donc, tout d'abord, je vais supprimer ces, par exemple, ces formes italiques. Donc on peut avoir trois poids. Donc, de cette façon, nous pouvons avoir cette importation, nous pouvons le prendre, le copier sans ces balises de style parce que les balises de style seront utilisées dans le HTML. Mais ici, nous utilisons l'importation à l'intérieur d'un fichier CSS. Nous pouvons donc copier cette importation, revenir à notre application, puis le coller ici. Donc, ici, vous verrez que nous avons importé toute cette police dans notre application. Ok, alors maintenant essayons de tester ça. C' est la structure. Par exemple, je veux voir que j'utilise vraiment cette police dans mon application. Tout d'abord, vous voyez ici que nous avons une erreur, et cette erreur dit que nous utilisons une feuille de style incorrecte parce que si vous vous souvenez, nous avions le fichier ici est appelé style SESS. Donc, ce que nous devons faire, nous devons aller aux styles de cette application, par exemple. Et nous dirigeons le magasin de moteurs comme vous vous en souvenez. Donc, je vais ici au fichier de styles de cette application au niveau de l'application. Alors je vais y aller. Et puis Styles et renommez ceci à leur fichier, que je créais dans les styles ou les styles publics. Donc, si vous voyez ici que nous avons admin et NG boutique, alors je vais appeler ND shop. Ok, donc maintenant nous n'avons aucune erreur. Essayons de voir comment nous pouvons utiliser ce fichier. Parce que si je vais maintenant à l'avant, je ne verrai rien. Je ne verrai pas cette police que je voulais utiliser parce que nous n'importons pas les fichiers nécessaires à l'application. Donc, la première étape que nous devons faire, nous devons aller à ce style spécifique de cette application. Par exemple, cette extrémité vous magasinez. Et nous devons importer ces fichiers, cette couleur, la configuration et la police. Alors commençons d'abord par, par exemple, les couleurs. Je vais aller ici baies en couleurs. Je vais importer ce fichier. Et aussi je peux importer un autre fichier, qui est la configuration. Et puis je peux importer aussi les polices. Donc, comme vous le voyez ici, j'ai importé tous ces fichiers et ensuite ce fichier est utilisé ici. Donc, quand je sauve, l'application est recompilée, je tromperais le navigateur. Je vais toujours voir peut-être qu'il n'est plus utilisé, cette police. Pourquoi ? Parce que si vous ouvrez l'outil d'inspection, vous pouvez utiliser l'élément d'inspection à l'aide de Chrome ou Safari. Ça n'a pas d'importance. Nous allons utiliser Chrome dans ce cours, mais pour ce niveau, Je vais vous montrer est Safari. Donc, ici, nous avons ceci, nous avons inspecté cet élément. Et si nous y allons, nous voyons que nous n'utilisons pas cette police parce qu'il y a quelque chose qui surpasse deux sans serif. Alors comment cela se passe, cela est arrivé parce que si nous allons à l' application, niveau de l'application, nous voyons que nous avons les styles, ok, tout va bien, mais Nous avons ici composant d'application a certains styles spécifiques qui viennent avec l'index par défaut. Supprimons donc totalement ce fichier CSS. On n'en a pas besoin. Donc, je vais d'abord au composant et supprimer cela. Ce fichier n'a pas de style parce que nous allons utiliser le style public. Et puis j'utilise ou supprime ce fichier, puis j'enregistre le composant. Et nous revenons à l'application. Encore une fois. Nous verrons tout vraiment que nous avons en utilisant la police ou la bonne police et nous avons des ensembles ouverts. Je voudrais mentionner ici quelque chose que l'ordre de cette importation est très important. Par exemple, si vous mettez la couleur après la configuration, le fichier de configuration ne verra pas ce qui se trouve à l'intérieur des couleurs. L' ordre de ce fichier est donc très important. Donc, je dirais peut-être que j'ai besoin d'importer d'abord les polices. Cela fonctionne parce que c'est, par exemple, un style, un style que le corps utilise cette police. Donc, quand il est chargé, alors il sera utilisé. Mais c'est très important de garder l'ordre comme ça. Nous avons donc, par exemple, couleur, les polices et la configuration. Et de cette façon, nous pouvons structurer ce dossier. Copions la même chose pour être dans le fichier admin. Donc, nous avons une application également appelée admin, qui sera le panneau d'administration. Donc, de la même manière, nous allons l'utiliser pour le style. Donc, dans les styles, je n'utiliserai pas le fichier de style de boutique, mais j'utiliserai le fichier de base. Donc, je vais dire ici que revenir en arrière d'un niveau et un autre niveau, puis Styles, puis utiliser le CSS admin. Donc, ici, cette application admin utilisera le CSS admin, qui est situé dans les styles de fichiers publics, et la même chose. Supprimons aussi le composant d'ici. Nous pouvons donc supprimer le style de ce composant, qui est composant d'application ou cet ancien composant. D' accord, pour revenir à notre structure de résultats, vous pouvez aussi inclure d'autres choses ici. Par exemple, vous pouvez inclure quelque chose que j' aime aussi les garder dans un fichier séparé qui est appelé mixins. Et si vous connaissez SPSS ou SAS, vous utilisez des mixins. mixins sont des fonctions qui sont utilisées pour être partout dans l'application. Donc, vous n'avez pas besoin de créer un tas de code. Vous pouvez utiliser ce tas de styles à l'intérieur avec une ligne. Je veux créer un Mixin. Appelons-le, par exemple, réinitialiser la liste. Et cette liste de réinitialisation. Par exemple, il aura une marge 0. Et par exemple, bourgeonnement est 0, et aussi par exemple, style de liste sera nul. Donc, je parle du composant UL que u l ici. Alors, comment je peux l'utiliser, Utilisons-le, par exemple, utilisez ce mixin dans le fichier de configuration. Donc, tout d'abord, je vais l'importer et dire ici baies et ensuite avoir du sens. Donc ici, je l'ai déjà importé et je vais l'utiliser dans la configuration. Mais attention ici, nous aurons un problème, que la configuration ne verra pas les mixins. Vous devez d'abord placer cette configuration sous ces mixins. Donc, de cette façon, la configuration, nous verrons ces mélanges. Donc, je vais aller ici à la configuration et puis je dirai UL, inclure la liste de réinitialisation. Et quand j'économise, je verrai que je reçois toujours une erreur parce que je pense parce que je n'ai pas enregistré ce fichier. Donc, quand je l'enregistre et l'enregistre, encore une fois, la configuration, tout pourrait aller. Bon, alors voyons comment si je retourne cet ordre. Donc, quand je les retourne, je mets la configuration avant les mixins et j'enregistre ce fichier. Vous verrez que j'ai eu l'erreur. Il dit parce que je ne vois pas, par exemple, il y a au moins mixin. Donc, de cette façon, il est très important de savoir que la commande est très importante pour votre manteau. Nous devons donc le remettre, enregistrer et nous verrons que l'application fonctionne avec succès. Ok, continuer la structure de ce dont nous avons besoin pour nos styles publics. Jetons un coup d'oeil à nos applications. Par exemple, passons à la fin que vous magasinez. Nous verrons que nous avons la page d'accueil et nous avons par exemple, en-tête de pied de page et aussi une liste de produits. Et tous, ils ont encore leurs propres styles. Nous devons supprimer cela. Nous devons les mettre dans le style public pour que nous puissions tout voir là-bas. Donc, tout sera, par exemple, partagé et nous pouvons l'utiliser partout dans un autre numéro ou dans une autre application supplémentaire. Donc mon idée, c'est mon, mon idée. Vous pouvez créer votre propre structure que vous voulez. Peut-être que vous n'aimerez pas cette structure, mais je vous donne l'idée. Et puis vous pouvez décider en fonction de la structure de votre projet. Donc, je vais dire ici que j'ai les styles que je créerais, par exemple, le dossier apps. Et à l'intérieur de ce dossier d'application, je vais créer un dossier pour chaque application que j'ai dans mon espace de travail. Donc, je vais dire ici magasin en général. Et puis je vais créer un autre dossier pour le panneau d'administration. Donc, je vais utiliser ces dossiers pour avoir les styles d'applications spécifiques, les composants, les composants qui sont vraiment liés à cette application. Il n'est pas lié à la bibliothèque ou à une configuration publique. Donc, je recrée ici un autre dossier, appelez-le admin. Et par exemple, à l'intérieur de cette boutique, nous avions, par exemple, l'en-tête et le pied de page à l'intérieur du partagé, vous pouvez suivre la même structure ici pour ne pas être perdu. Ou vous pouvez également, vous créez votre propre structure en fonction de votre besoin ne pas dupliquer un code ou dupliquer certains styles. Donc ici, je créerais un dossier, je l'appellerai pages. Et un autre dossier, je l'appellerai partagé. Exactement comme nous avons dans les applications. Et à l'intérieur du partagé, je vais créer un fichier tour point SCSS et un autre fichier qui sera point d'en-tête SCSS. Et si vous avez vraiment besoin d'un style pour ces pages, vous pouvez créer un fichier, fichier de style pour cette page. Donc, dans mon cas, je vais utiliser une bibliothèque. Je vais utiliser, par exemple, le Bootstrap. Ensuite, je n'aurai pas besoin d'avoir une structure ou un fichier de style pour la page car j'utiliserai cette bibliothèque pour organiser la grille et les composants dont j'ai besoin. Ainsi, par exemple, comme vous le voyez dans ce fichier XD, je vais tout avoir en tant que composant. J' aurai un composant de navigation. Je n'aurai, par exemple, pas la navigation. On peut avoir un en-tête et un pied de page. Et par exemple, ce seront des composants seulement ce dont j'ai besoin pour cette page ou la page d'accueil est la grille. Et la grille viendra de la bibliothèque, que je vais utiliser. Mais de toute façon, créons maintenant le fichier. Et si nous n'en avons pas besoin à l'avenir, nous pouvons le supprimer. Donc, disons sur la page point SCSS, puis les produits moins page point SCSS. Et ici, j'ai maintenant deux dossiers et ou quatre dossiers. Et puis ces fichiers, je dois les importer dans NDI shop, mais ces fichiers ne vont pas être utilisés. Donc, je n'ai pas besoin de les importer là-bas. Alors faisons ça. Ce que je copierais celui-ci, ou appelons des applications d'importation, pages nettes, puis la page d'accueil. Et un autre pour la liste des produits. Donc, je vais dire ici que la liste des produits, donc nous avons, nous pouvons appeler ceci est la base. Nous pouvons appeler ceci comme un exemple de pages et nous verrons d'autres sections comme nous le verrons plus tard. Et nous aurons également partagé. Et ceux partagés seront, par exemple, l'importation de l'en-tête et du pied de page. Donc, nous avons ici l' en-tête partagé de la boutique et un autre pour le pied de page. Donc tout ce que j'écris à l'intérieur de ces fichiers reflètera quoi ? Cela reflétera la fin que vous achetez parce que je les importe ici. Et ce fichier est utilisé dans le niveau d'application de N D sharp. Donc, dans ce cas, je n'ai pas besoin de cette numérotation pour ces composants. Alors supprimez-les. Donc d'abord, je vais ici, supprimez ce fichier. Je fais un ménage ici. Et aussi nous supprimons celui-ci. Donc, nous supprimons aussi le style et l'en-tête, le même pied de page, le même. Donc, nous n'avons pas besoin de garder quoi que ce soit lié aux styles dans ces composants. Est-il idéalement, celui-ci, je l'ai fait, le style du composant d'en-tête, et aussi celui-ci. Donc maintenant tout fonctionne bien. Ok, revenons à notre structure de fichiers, comme nous le voyons ici, que nous avons créé la structure en fonction de nos besoins. Donc, nous avons maintenant un fichier d'application spécifique et aussi la base. Et les bibliothèques ? Nous pouvons également suivre de la même manière. Par exemple, je veux créer quelque chose pour l'interface utilisateur. Je veux créer un style pour la bannière. Alors allons-y. Créez un nouveau dossier. On peut appeler ça des lèvres. Et à l'intérieur de ces bibliothèques ou bibliothèques, nous pouvons créer exactement la même structure ici. Donc, nous pouvons avoir un composant d'interface utilisateur. Et à l'intérieur de ce dossier d'interface utilisateur, nous pouvons créer un point de bannière SCSS, exactement comme le composant que j'utilise à l'intérieur de l'interface utilisateur. Je peux créer ainsi que curseur. Donc, à l'intérieur de cette interface utilisateur, je vais créer SCSS point curseur. En outre, je peux inclure d'autres bibliothèques, par exemple, des produits. Et à l'intérieur de ces produits, il devrait être à l'intérieur des bibliothèques. Je vais avoir, par exemple, nous pouvons appeler un autre composant que nous n'avons pas encore créé. C' est juste par exemple, est produit article SCSS. C' est exactement l'article montrera un produit. Donc, si je vais utiliser ces composants ou que cette tuile est aussi dans l'extrémité frontale, je dois les importer. Alors je vais ici, je dis lèvres, voici l'ellipse Section 4. Je vais également importer ces composants de sauts. Donc nous avons ici U, i, nous avons une bannière, nous avons un curseur ici. Je dois mettre un point-virgule ici aussi. Et puis nous avons ces dossiers ici. Mais imaginez que si nous importons tous les styles de bibliothèques ici, nous aurons ici un fichier très énorme. Donc, ce que je préfère que je crée un fichier dans chaque bibliothèque. Par exemple, j'appelle ce point d'interface utilisateur SCSS, qui inclura les styles pour les deux. Pour que je puisse copier celui-là. Je peux dire pas vous, mais exactement directement sur le dossier. Donc, nous avons ici le curseur CSS et la bannière CSS. Et dans ma boutique ND, au lieu d'utiliser le composant lui-même, je peux utiliser directement la bibliothèque de l'interface utilisateur. Donc, je vais dire ici, pas les applications, mais nous disons lèvres UI et utiliser l'interface utilisateur SCSS de cette façon, si je vais en cliquant sur le contrôle de ce fichier, je vais voir que aussi ces fichiers sont importés. Dans ce cas, j'utilise la bannière et le curseur. Mais si vous voulez utiliser uniquement le curseur, bien sûr, vous pouvez l'importer ici. Vous n'avez pas besoin d'importer tout pour vous à partir de l'interface utilisateur pour réduire la taille du fichier CSS de construction parce que vous savez que SCSS sera converti en CSS pour être adapté au navigateur, alors ce fichier ne contiendra pas, par exemple, le curseur parce que vous ne l'avez pas utilisé dans la boutique. Donc, dans ce cas, vous pouvez importer uniquement de la manière. Vous n'avez pas à tout importer. Mais pour moi dans ce cas, je veux tout importer. Donc, je mets UIS, CSS, et cette UI UX css est déjà ici. Nous allons donc créer des dossiers pour les autres bibliothèques. Donc, nous avons des utilisateurs qui utilisent contiendra, par exemple, le composant de connexion et le composant d'enregistrement, également des commandes. Et tous auront leur propre composant, tous les styles, comme nous verrons comment nous allons construire cette application. D' accord, donc nous avons vu que le magasin d'énergie a ses propres styles sur les importations, et aussi l'administrateur a ses propres importations. Donc, dans l'application que j'ai ici, l'administrateur, j'ai ici la boutique elle-même, les composants spécifiques pour les composants spécifiques pour l'administrateur. Et ici, j'importe les styles pour eux. Donc, dans les prochaines conférences, nous allons construire toute cette structure. Nous allons le construire lentement. Et vous verrez comment je vais utiliser chaque fichier dans une application spécifique et comment je vais décider que dans quel emplacement ce style de composant sera. Par exemple, je veux créer un composant d'article produit. Je l'ai mis ici. Si je veux créer, par exemple, une page de paiement, je vais le mettre par exemple, dans la page d'application spécifique à la boutique. Comme je vous l'ai dit, je le répète, vous avez une grande liberté de construire votre structure à votre manière comme vous le souhaitez. Mais ici, la structure est très importante pour moi et très conviviale ou conviviale pour les développeurs. Parce qu'en tant que développeur Angular, je vais utiliser SCSS et utiliser ces fichiers fonction de ce dont j'ai besoin pour construire différentes applications en utilisant un X. Dans la prochaine conférence, nous allons voir comment utiliser des bibliothèques externes comme Bootstrap, terminez u-prime, et importez les fichiers ici. Et nous verrons les grandes caractéristiques de l'utilisation d'un style public. L' importance de placer ces fichiers dans un dossier public à la racine de notre espace de travail. 84. PrimeNG Installer les bibliothèques de tiers et inclure des styles de votre style: Ok, dans cette conférence, nous allons apprendre à inclure des bibliothèques externes, telles que Bootstrap ou prime end D, que nous allons utiliser dans ce cours dans notre projet. Donc, d'abord, parfois vous avez besoin d'avoir composants externes déjà de style que vous pouvez utiliser dans votre projet. Donc, je vais dans d'autres bibliothèques externes telles que Bootstrap, puis je l'installe, puis je construis mon projet basé sur cela. Et dans cette conférence, je veux vous montrer comment inclure des bibliothèques externes dans nos fichiers de style. Donc, tout d'abord, installons une bibliothèque. Allons, par exemple, à Bootstrap. Bootstrap est seulement une bibliothèque de style. Il ne contient pas, par exemple, les composants angulaires comme premier end g. Nous allons donc, par exemple, à bootstrap. Je vous le rappelle, nous ne l'utiliserons pas dans ce cours. Donc, ce n'est qu'un exemple. Donc, j'allais sélectionner un bootstrap, aller sur le site Web Bootstrap, puis je vais commencer. Et ici, vous verrez plusieurs options pour installer la bibliothèque. La première façon d'utiliser ou d'inclure une bibliothèque est d'utiliser le CDN direct, qui est une URL que vous pouvez fournir dans votre projet, puis vous utilisez ce style. Par exemple, le moyen le plus simple pour cela, je peux copier ce lien, qui est fourni par Bootstrap. Et puis je vais au projet. Donc, je vais à un endroit de mon fichier CSS où j'inclut les fichiers CSS principaux comme nous l'avons vu précédemment. Et tapez l'URL d'importation. Et ici, nous incluons l'URL que vous avez copiée. Donc nous le collons ici. Et puis nous chargeons le projet. Tout va bien. Le projet est déjà en cours d'exécution. Et essayons l'un de ces modules qui sont inclus avec Bootstrap. Par exemple, je sélectionne un bouton. Copions cette partie. Un des boutons que je cours maintenant, le magasin de moteurs de projet. Donc, je vais à la fin, vous magasinez, par exemple, accueil et l'application basée sur ce bouton ici. Donc, nous l'essayons, nous l'exécutons, et je vois que nous avons ici le bouton est stylé, donc nous avons importé directement en ligne la bibliothèque Bootstrap à notre projet. Mais dans ce cas, vous devez avoir une connexion Internet. Ainsi, lorsque vous déconnectez Internet, vous ne pouvez pas travailler hors ligne et vous ne pouvez pas voir les styles. Vous n'êtes pas en mesure de charger les styles à partir du Cloud. Il y a une autre façon que nous pouvons garantir que nous travaillons hors ligne, ce qui, comme nous le voyons ici, que pour commencer, nous avons un téléchargement. Vous pouvez télécharger les fichiers eux-mêmes et les inclure dans le projet, ou vous pouvez utiliser la gestion des paquets npm. Donc, lorsque vous exécutez cette commande dans notre projet, donc j'ouvre un nouvel onglet ici pour exécuter la commande, collez-le ici, et exécutez le npm install Bootstrap. Donc, il va installer pour moi la bibliothèque localement afin que je puisse travailler hors ligne parce que comme nous l'avons vu ici que nous avons ici le lien distant. Alors, comment nous pouvons inclure ce que nous avons installé dans Law Library. Donc c'est très simple. Donc normalement, la bibliothèque est livrée avec un nom. C' est donc le nom où la bibliothèque a un dossier dans le module MPM. Donc tu as le choix. Ainsi, vous pouvez inclure la bibliothèque en naviguant vers les modules MPM. Donc, je vais ici et je vais d'un niveau, je vais aux modules de noeud, recherche Bootstrap, puis ceci, et puis le CSS. Et ici vous avez les fichiers CSS. Ou une autre façon de le faire est très simple que vous avez juste à utiliser ce signe. Et puis vous appelez le dossier de bibliothèque que vous voulez. Donc, je dis sangle de démarrage et puis vous voulez savoir à quel fichier CSS vous voulez inclure. Donc normalement, c'est écrit dans la documentation de la bibliothèque. Donc, il vous dit que je vais dans ce dossier pour avoir le paquet et l'installer ou inclus dans mon projet. Mais si vous ne le trouvez pas, comme la façon dont nous avons ici dans Bootstrap, vous ne pouvez pas naviguer seul dans le dossier du module Node. Et puis vous pouvez naviguer vers le CSS que vous voulez. Je vous montre cette façon d'avoir plus de connaissances sur la façon de jouer à l'intérieur des modules de nœud. Donc, je vais aux modules de noeud et puis je trouve le Bootstrap, et ensuite nous verrons normalement chaque bibliothèque est livré avec une construction de destination. Donc, quand vous voyez ces supports, cela signifie qu'il s'agit d'une version de construction. Donc, ce que vous voulez utiliser normalement, ou vous avez un SAS Virgin a vous voir ici dans Bootstrap. Donc, le Bootstrap a le fichier Sass et aussi il a le fichier CSS. Et c'est le fichier CSS aussi minifié. Donc, le chemin pour nous est le moins CSS, puis Bootstrap CSS min, ou nous avons un autre chemin qui est SCSS. Et puis vous accédez au fichier SCSS de bootstrap, où il inclut tous les fichiers dont nous avons besoin ici. Vous pouvez également inclure certains fichiers spécifiques uniquement. Vous n'avez pas besoin d'inclure tout comme vous voulez utiliser une grille et vous ne voulez pas utiliser toutes les autres choses. Ainsi, vous pouvez inclure ce que vous voulez à l'intérieur. Donc, pour moi, j'inclurai ce fichier bootstrap. Donc, je vais aller ici après ce signe bootstrap, I-type SCSS comme un dossier m'a montré. Et puis j'ai mis Bootstrap SCSS. C' est exactement le même chemin dans les anciens modules. Donc, dans les modules Node, nous avons un dossier bootstrap, qui est celui-ci, puis SCSS. Et puis je vais directement à Bootstrap SCSS pour l'inclure. De cette façon, j'ai inclus tout de Bootstrap. Sauvegardons et essayons à nouveau dans notre navigateur. Ensuite, nous verrons que le bouton fonctionne même si vous êtes déconnecté à Internet parce que la bibliothèque est déjà installée sur votre machine. Donc, revenez au navigateur, vous verrez que le bouton est ici et commencer. Il existe une autre façon d'inclure des styles dans votre projet. Normalement en Angular. Utilisation de JSON angulaire. Angular JSON est un fichier dans lequel vous pouvez configurer votre projet avec un fichier qui peut être inclus par défaut avec le projet lorsque vous construisez ou combinez le projet. Donc, quand je vais à Angular JSON, je vois que chaque projet a une configuration spécifique. Donc, l'une de ces configurations est un Styles. Styles est un tableau où pouvez-vous inclure tout ce que vous voulez pour votre style du projet ? Donc, si je veux inclure le bootstrap, j'utiliserais la même chaîne et ajouterais une entrée pour ce tableau, mais le chemin sera un module de nœud. Dans ces modules, nous avons Bootstrap et puis comme nous l'avons vu précédemment que nous avons un css, puis bootstrap un autre SCSS. Nous avons donc inclus le CSS dans notre projet. N' oubliez pas que vous devez redémarrer votre projet après cette modification, car cette modification est une modification de configuration, vous devez redémarrer le projet. Supprimons donc du fichier SCSS, puis redémarrez le projet. Donc, pour arrêter le compilateur, contrôlez C sur le compilateur. Et puis je l'ai refait. Il a réussi à compiler et à revenir à l'actualisation du projet. Vous voyez que cela a vraiment déplacé la bibliothèque du fichier SCSS, mais nous l'avons incluse dans le fichier JSON Angular où je peux inclure les styles. Ce que je préfère, de quelle façon je préfère la façon dont nous incluons les fichiers ici. Parce que de cette façon, lorsque vous incluez en particulier le fichier SCSS, vous pouvez avoir accès à certaines variables de cette bibliothèque. Comme vous le savez, dans SPSS, vous pouvez définir une variable. Et ces variables peuvent vous aider à ajuster cette bibliothèque pour qu'elle s'adapte exactement à votre projet. Par exemple, si nous allons à nouveau à bootstrap et nous allons au système de grille. Et dans le système de grille, comme vous le savez, nous avons des variables ou des valeurs prédéfinies pour les tailles qui peuvent être utilisées pour mobile, ordinateur ou tablette. Mais comme je vous l'ai déjà dit, l'avantage d'inclure le fichier SAS est que nous pouvons utiliser certaines fonctionnalités de cette bibliothèque, de cette grille. On peut l'ajuster. Donc, nous avons, par exemple ici les fichiers SAS ou les variables SAS comme les colonnes de grille ou la largeur de gouttière convenue. Donc, chaque fois que je vais ici et que je change cette variable en fonction de ce dont j'ai besoin dans mon projet, alors tout le Bootstrap se comportera en fonction de ce changement de la variable. La même chose. Par exemple, il y a quelques mixins. Je peux aussi les utiliser. Nous verrons cela profondément plus tard après la construction du projet, comment nous allons utiliser ces variables, comment nous allons utiliser ces mixins de cette bibliothèque ou n'importe quelle bibliothèque pour construire notre e-shop de la bonne façon. 85. Installation de PrimeNG: Ok, Comme nous l'avons décidé précédemment, je vais vous montrer comment installer première bibliothèque N D dans votre projet pour exécuter et marcher avec elle. Tout d'abord, nous devons aller sur leur site Web de premier NGA, qui est prime faces.org. Et puis vous cliquez sur prime NG, puis démo. Et ici, vous serez spécialisé pour le composant angulaire sous Prime NG. Donc, si vous allez à la démo, vous verrez tous les composants dont nous avons besoin pour notre bibliothèque. Nous verrons tous les composants plus tard lorsque nous travaillerons avec le projet. Mais maintenant, installons la bibliothèque à notre projet. Et dans la prochaine conférence, je vais vous montrer comment travailler avec ces composants de cette bibliothèque. Donc, tout d'abord, vous devez aller pour commencer. Et commencez, vous verrez deux choses que vous devez installer. Tout d'abord, premier NG, puis icônes principales. Parce que m première bibliothèque NG et les composants, il y a des icônes et ces icônes doivent être installées séparément. Alors faisons-le dans notre projet. Tout d'abord, installons le premier NG, puis les icônes prime. Pour revenir à notre code, nous ouvrons un nouveau terminal pour l'installation. Et nous tapons npm install, puis prime end et save flag pour l'enregistrer dans les dépendances de profondeur entrer et nous allons l'avoir installé dans notre machine. Une autre bibliothèque que nous devons installer, elle s'appelle icônes prime. Alors installons-le aussi. Nous allons à npm installer icônes prime, puis Enregistrer, ok, Maintenant, nous avons tout installé et installé avec succès. Donc, précédemment, nous avons fait une mise à jour sur Angular JSON que nous avons ajouté la bibliothèque bootstrap. Supprimons le pour ne pas avoir de conflit avec la bibliothèque Prime NG. Vous devez donc être sûr que vous n'installez pas plusieurs bibliothèques pour ne pas rassembler les conflits, surtout si elles utilisent parfois le même nom des classes de CSS. Donc, nous sauvegardons le JSON angulaire et puis nous redémarrons le projet comme ici, nous l'avons en cours d'exécution, alors nous devons l'arrêter. Et puis exécutez-le à nouveau. Et après cela, je vais aller à la fin vous magasinez et importer la bibliothèque premier N G. Je vais utiliser la façon où je vais importer les fichiers de fin prime dans mes ateliers principaux de moteurs, SESS. Donc, ici, nous pouvons créer une section appelée bibliothèques. Et ici, nous devons importer. Et puis nous avons mis le signe que nous avions convenu avant. Et on a mis le premier N G. mais je ne sais pas quel dossier. Vous avez deux façons de savoir quel fichier. Vous pouvez aller aux modules de noeud comme nous l'avons vu précédemment. Ou vous pouvez aller ici dans la documentation pour voir quel fichier vous devez inclure. Donc, il est dit ici que vous devez inclure ces fichiers. allons donc inclure celui-ci que nous sommes contenus par des icônes, dont nous avons besoin, comme nous l'avons vu précédemment. Et le second est le thème. Nous devons installer un thème. La bonne chose avec Prime energy, il est livré avec plusieurs thèmes. Pour être en mesure de sélectionner le thème approprié pour votre projet. Par exemple, sélectionnons celui-ci. Il y a un violet, il changera immédiatement sur cette vue. Donc, vous avez un thème sombre, vous avez plusieurs thèmes que vous pouvez utiliser. Pour ce cours, je vais utiliser le bleu saga. Donc juste comme ça, vous devez copier cette partie. Ou vous pouvez copier l'un de ces thèmes ici. Donc je vais utiliser le bleu saga comme nous l'avons convenu. Donc ici, je vais avoir une autre importation et signer, et puis ici je vais inclure la chose. La dernière chose que nous devons inclure est la bibliothèque elle-même. Donc nous copions celui-ci. Et puis nous faisons une autre importation. Encore une fois. Nous mettons le fichier CSS de cette bibliothèque. Donc, ici, nous avons inclus tout ce qui concerne cette bibliothèque. Nous économisons que nous voyons tout compilé avec succès. Nous n'avons aucun problème parce que nous sommes sur la bonne voie. On n'avait pas de flèche ici. Dans la prochaine conférence, je vais vous montrer comment utiliser l'un de ces composants dans cette bibliothèque. Donc, c'est très facile. Nous n'avons pas à faire beaucoup de travail. C' est exactement comme comment il est implémenté ici. L' énergie première est très bien documentée, comme nous le verrons dans la prochaine conférence. 86. Utiliser des composants PrimeNG dans notre projet: Ok, maintenant comme promis, je vais vous montrer comment utiliser l'un de ces composants de cette bibliothèque. Donc, tout d'abord, nous allons à cette bibliothèque. Parcouvrons quelques composants. Par exemple, nous avons l'accordéon prime NG est livré avec une très belle documentation pour chaque composant et il vous montre comment utiliser chaque composant. Donc, tout d'abord, nous pouvons aller à la documentation de ce composant. Nous devons importer le module accordéon dans notre module d'application. Copions cette ligne et nous allons à notre projet. Et nous verrons que nous avons deux applications. Et chaque application a un module d'application. Bien sûr, peut-être que nous aurons plusieurs modules comme nous le verrons plus tard, mais maintenant nous n'avons qu'un seul module d'application. Alors, allons travailler ici. Donc, je vais d'abord importer ce module accordéon. Et nous allons aux importations ici pour l'inclure dans notre module NG de module d'application. Et puis voyons cette documentation. Ce qui nous dit un de ces exemples est de nous montrer que nous devons copier ce code HTML. Donc ce HTML sera collé sur la page où nous allons utiliser ce composant. Par exemple, allons à la page d'accueil. Donc, si nous allons ici dans notre application, nous avons des pages. L' une de ces pages est la page d'accueil. Nous pouvons supprimer ce bouton que nous avons créé précédemment. Et puis nous collons ce code ici. Ok, on dirige le projet, il a sauvé. On y va encore. Et puis nous avons deux hôtes locaux, 4200, le port. Et nous verrons que nous avons l'accordéon, mais nous manquons encore quelque chose. Il y a un problème parce que nous n'utilisons pas les animations. Si nous allons recommencer dans cette bibliothèque, vous, nous devons installer les animations. Tout ce dont nous avons besoin pour importer le module d'animation. Nous devons donc importer ce module, qui est déjà installé avec Angular. Nous allons de nouveau à notre module de code. Et puis nous le mettons normalement après leur module de navigateur. Et nous avons importé ici. Donc, nous avons importé l'animation parce que cette bibliothèque utilise ce module. Donc, si nous revenons au navigateur, revenons à notre projet, nous verrons que l'accordéon fonctionne principalement de la même façon que vous le faites pour tous les composants. C' est très bien documenté. Tu peux faire ce que tu veux. Nous utiliserons la plupart des composants qui se trouvent dans cette bibliothèque lorsque nous allons construire notre projet. 87. Overrride les polices de PrimeNG: Je voudrais également mentionner qu' après avoir installé les composants premiers nk, nous remarquons qu'il remplace les polices. La police, qui est nous, par exemple, nous avions l'intention d'utiliser Open Sans, que nous avons installé précédemment, mais je voudrais, par exemple, l'installer ou l'utiliser dans le moteur principal. Le problème est que pour le premier NG il y a un cas spécifique. Ce n'est pas le seul dicton que nous voulons du corps et ensuite nous utilisons Open Sans. Mais vous devez aussi dire après avoir importé, bien sûr l'énergie première, vous devez dire le composant B, comme cette classe, le composant de tiret P. Et puis vous pouvez continuer à travailler. Donc, dans ce cas, composant p est le point d'entrée pour les polices de l'énergie première. Donc, le corps ne suffit pas, mais aussi les composants p. Dans ce cas, vous laisserez votre application et les composants de prime NG utiliser la police que vous avez spécifiée ici. Donc, pour cela, le niveau de l'application, quand je vais ici, par exemple, à NG shop, je mets la configuration pas ici au début, mais après avoir utilisé le NG premier et importé toutes les bibliothèques de prime NG. Donc, après avoir tout obtenu de l'énergie Prime, je vais mettre à jour la configuration du composant de crête et le corps pour utiliser cette police. Juste pour mentionner ce point pour vous au cas où vous ne voyez pas votre police est applicable dans vos applications. 88. Installation du système de grille: Ok, je sais que vous êtes très motivé pour commencer le codage et pour démarrer le projet réel. Mais la dernière chose, s'il vous plaît pardonnez-moi que je veux vous montrer comment installer une grille. Dans chaque application, nous avons besoin d'un système de grille. Un système de grille qui montre la structure de l'application. Tu veux savoir ce que je veux dire. Si vous allez dans une bibliothèque, vous verrez quelque chose appelé « prime flex ». Et ce flex prime est un système qui vous montre la grille pour disposer vos composants en fonction de cette grille. Et il a une très belle fonctionnalité et c'est très dynamique. Ainsi, vous pouvez l'utiliser et adapter votre application sur toutes les plateformes, comme un mobile, une tablette ou un ordinateur de bureau. Si vous ne connaissez pas le système de grille, nous verrons plus tard en détail comment construire notre application basée sur le système de grille. Mais d'abord, si nous allons à ce système de grille, il a sa propre configuration. Donc, tout d'abord, nous devons passer par la configuration. Nous devons à nouveau installer une bibliothèque, Wine Library. Ça s'appelle Prime Flex. Exactement quelque chose comme les icônes premières ou premier NG lui-même. Donc, tout d'abord, nous devons aller à notre projet et installer prime flex. Nous ouvrons donc un nouveau terminal. Et puis nous allons ici, nous disons npm installer prime flex, puis dire, OK, maintenant ce flex prime est installé. Voyons comment on peut l'utiliser. Prenons un exemple de la bibliothèque elle-même. Donc, nous voyons ici que le flux principal a un système de grille multiple. L' un d'eux est le système de grille et flexbox. Nous allons donc utiliser ce système de grille dans ce cours. Ce système de grille est très dynamique, qui s'adaptera à notre application sur les tablettes mobiles ou les ordinateurs de bureau. Donc, comme vous le voyez ici, il y a plusieurs exemples. Prenons un de ces exemples. Donc, nous avons ici d'abord ce soit grille. Mais avant de voir que nous avons ici un cours. Mais cette classe vient de l'endroit où nous devons l'utiliser. Donc, tout d'abord, nous devons inclure ce fichier dans notre bibliothèque, exactement de la même manière que nous l'avons fait auparavant avec d'autres bibliothèques. Donc nous copions ce chemin. Nous allons au projet. Encore une fois dans le magasin d'énergie point SCSS. Nous importons cette bibliothèque en utilisant ce signe et nous l'avons maintenant en CSS. Donc, lorsque nous économisons, nous voyons que le projet est en cours d'exécution avec succès. Maintenant, nous sommes en mesure de prendre un exemple. Revenir au système de grille de bibliothèque, c'est prendre un de ces exemples. Comme par exemple, nous pouvons dire celui-ci. Retournez à notre code, nous allons à la page d'accueil et puis nous collons ce code ici. Nous allons au navigateur. Pour notre projet, nous verrons que ce système de grille fonctionne. Parce que si je désactive cette bibliothèque, Commentons cette bibliothèque. Retournez à notre projet. Nous verrons qu'ils sont alignés les uns sous les autres parce que par défaut que div balise tout l'espace. Donc, avec un système de grille que nous avons installé, nous aurons le système adapté notre application et nous en avons besoin pour mobile, ordinateur de bureau et tablette. Comme je vous l'ai dit plus tard, nous utiliserons toutes les fonctionnalités de ce système de grille. Maintenant, nous sommes prêts. Nous avons construit la structure des styles. Nous avons la structure des fichiers et des dossiers. Maintenant, nous sommes prêts à commencer à coder et à construire l'application. Je vais d'abord commencer par le panneau d'administration. Le panneau d'administration où nous ajoutons des produits, des utilisateurs, commandes, ainsi que des catégories et faisons toutes les opérations brutes sur eux. 89. Introduction : Aperçu du panneau d'administrateur: Bienvenue dans une nouvelle section. Ici, nous allons construire l'application du panneau d'administration. Le panneau d'administration où nous allons contrôler les commandes. Nous allons contrôler les produits, les catégories et toutes les opérations sur eux, comme ajouter, modifier et supprimer. Donc, comme un aperçu, je vais avoir un écran de connexion. Je vais me connecter à mon utilisation de mon compte ici. Donc, je vais utiliser, par exemple, ce compte. Je suis administrateur, bien sûr, les utilisateurs normaux ne peuvent pas aussi regarder dans. Donc, nous ne pouvons que les administrateurs à la recherche, nous aurons un tableau de bord comme vous le voyez ici. Combien de commandes j'ai passées, combien de produits, combien d'utilisateurs dans ma boutique et combien de ventes totales j'ai réalisées pour ma boutique. Aussi, nous aurons un aperçu des produits. Ainsi, vous pouvez aussi bien les produits aidés. Vous pouvez les supprimer. Vous verrez comment vous pouvez aussi faire comme la conformation. Ce sont des journaux et vous pouvez éditer et des produits. Par exemple, je vais mettre à jour celui-ci. Vous pouvez cliquer sur la mise à jour et vous obtiendrez toutes ces notifications. Et aussi, nous pouvons travailler avec des catégories. Nous verrons comment nous utiliserions aussi bien le sélecteur de couleurs. Nous aimerions ajouter des formulaires de base comme vous le voyez ici. Et nous allons utiliser les icônes et bien sûr, les commandes où nous aurons le statut des commandes qu'il est plié ou traité. Et l'utilisateur ou l'administrateur peut changer l'état de l'expédition ou de la commande. Donc il peut avoir comme expédié ou livré. Et sur la base de cela, les données seront mises à jour ici aussi. Nous allons avoir un certain contrôle sur les utilisateurs ou leurs clients. Nous verrons qui est administrateur, qui ne l'est pas. Nous aurons comme liste de pays, comment nous pouvons savoir à partir de quel pays il est. Et nous allons ajouter les informations, utiliser un mot de passe, puis nous envoyons ces données au back-end la bonne façon pour la fonctionnalité du panneau d'administration sans rien manquer, nous verrons aussi comment nous pouvons télécharger des images et nous doivent utiliser les éditeurs de portée. Nous verrons toutes les informations dont nous avons vraiment besoin pour construire une application du monde réel et récupérer des données de la base de données aussi. Vous utiliserez le bouton de déconnexion afin que l'utilisateur puisse se déconnecter et revenir à la page de connexion. Nous allons voir comment protéger notre chemin est de sorte que l'utilisateur ne peut pas aller à une page jusqu'à ce qu'il soit autorisé. Nous verrons comment nous allons ajouter un jeton, comment nous allons saisir ce jeton à notre stockage local et l'utiliser. Comment nous pouvons l'obtenir à partir de la base de données ou du backend et utiliser dans le front end pour savoir si l'utilisateur est administrateur ou non. Tout cela sera dans les sections suivantes. Et nous allons construire cette étape par étape en utilisant Prime NG et aussi d'autres technologies dont nous avons besoin pour cela. 90. Créer la coque: Ok, maintenant nous allons construire la coquille. Ce que je veux dire par la coquille, comme vous le voyez sur cette photo, que nous avons une barre latérale et que nous avons un contenu sur la droite. Donc, cette zone blanche sera pleine du contenu vers lequel je vais naviguer. Donc, quand je clique sur les produits, je verrai la table des produits, ou par exemple, je verrai le tableau des catégories. Je vais voir l'éditeur pour le produit. Donc dans ce cas, j'ai besoin de la coquille. Je l'appelle un shell car il contenait comme un côté fixe où sa barre latérale est fixe. Je n'ai pas besoin de mettre à jour la barre latérale chaque fois que je navigue vers une nouvelle page, mais j'ai seulement besoin de mettre à jour le contenu. Donc, comme vous le voyez ici, nous avons besoin de deux composants. Un composant est le shell lui-même, comme la page où je vais localiser le tableau de bord et les éléments et aussi la barre latérale. La barre latérale, c'est aussi son propre composant, contiendra le logo et ses propres liens. Alors faisons cela dans le code et nous verrons ce dont nous aurons besoin pour cela. Ok, maintenant, comme première chose que nous devons faire, nous devons configurer la bonne application. Comme vous vous en souvenez, nous avons créé deux applications. Donc, le premier est l'obligation d'administrateur et le second est ND shop. Donc, pour cela, nous allons travailler sur l'application d'administration parce que nous construisons maintenant le panneau d'administration. Alors, configurons-le. Eh bien, donc tout d'abord, nous devons importer les styles, ce qui est dans les styles publics, et nous l'avons fait auparavant. Deuxièmement, je veux configurer Eastland. Eastland comme nous nous souvenons, il corrige notre code quand nous faisons quelques erreurs, bizarre quand nous importons des bibliothèques inutiles, etc. Donc, pour cela, nous devons d'abord corriger le préfixe pour les directives et le composants dans Angular. Comme vous vous en souvenez, nous avons créé un composant que ce composant a un sélecteur et que le sélectionné doit suivre une règle, comme un préfixe. Nous avons donc besoin d'un préfixe admin pour chaque composant. Bien sûr, vous n'avez pas à suivre cette règle. Vous pouvez nommer vos composants comme vous le souhaitez. Mais pour les trucs d'organisation, il vaut mieux l'avoir comme ça. Donc j'irais à ES Lint. Et ici, dans cette partie, l'attribut de cette directive d'électrode sera préfixé comme admin et aussi le composant serait préfixé comme admin. Donc, dans ce cas, chaque composant doit être préfixé avec admin. En outre, le composant App doit être préfixé avec admin. Mais comme vous vous souvenez, dans Angular, nous avons le composant N3, qui est le composant d'application, qui est appelé un fichier HTML d'index du projet. Je suis donc au niveau du projet. Et ici, j'ai l'index. Et cet index, nous appelons le HTML de base qui est nécessaire pour le projet. Donc, pour cela, nous avons ici aussi admin. Et ici aussi, administrateur pour une balise de fermeture. Maintenant, nous sommes prêts et notre application suivant les règles de ES peluches. Bien sûr, vous pouvez ajouter plus de règles en fonction de vos besoins. Je ne les aurai pas toutes. Je veux juste vous montrer qu'il y a un fichier appelé Eastland que vous suivez certaines règles que vous devez faire pour votre code. Donc, comme nous l'avons dit précédemment, nous devons créer un shell. Shell contiendra une barre latérale et le contenu. Donc, pour cela, nous devons générer deux composants. L' un est shell et l'autre est une barre latérale. On peut le faire à travers une console X. Nous cliquons sur Générer et nous recherchons un composant. Nous cliquons dessus et nous lui donnons un nom, par exemple, shell. Et le projet est admin. Nous avons déjà parlé de toutes les autres options. Donc, je vais donner ceci à un CSS, puis je vais cliquer sur Exécuter. Mais d'abord, j'ai besoin d'avoir une structure pour les fichiers et les composants. Donc, ce serait mieux si nous le mettions dans un dossier. Par exemple, nous avons ici quelque chose pour les pages et nous pouvons créer un autre dossier. Nous l'appelons partagé car le shell est partagé entre toutes les applications. Pour que nous puissions vérifier le chemin. Nous voyons que, ok, jusqu'à shell partagé, puis le composant est créé. Laissons-le. Et nous aurons le fichier ou le composant est créé ici. Joli. Alors faisons un peu de nettoyage. Comme par exemple, nous devons faire le préfixe admin et aussi nous devons supprimer le CSS parce que nous aurons le CSS dans l'état public. Supprimons donc ce fichier. Et l'objectif de ce fichier, nous le ferons pour chaque composant que nous créons. Un autre composant que j'ai besoin d'avoir est la barre latérale elle-même. Donc, nous allons à nouveau pour générer le composant. Nous sélectionnons celui-ci et nous disons partagé, puis barre latérale et dans l'administrateur du projet et tout de même. Donc nous exécutons cette commande. Nous aurons dans notre structure de fichiers, encore une fois une barre latérale. Nous le nettoyons et nous faisons ce préfixe en tant qu'administrateur de barre latérale et vraiment déplacer le fichier SCSS. Nous économisons et nous verrons que les composants sont déjà importés dans le module. Revenons à notre compilateur. Nous exécutons déjà cette application et D-Sharp, nous devons exécuter l'application Admin afin que nous puissions aller à nouveau et x servir. Mais nous disons que le nom de l'application est admin. Donc, nous l'exécutons maintenant pour vérifier si tout fonctionne bien. Nous obtenons quelques flèches ici parce que nous n'avons pas mis à jour le fichier des styles de cette application Admin. Donc, si vous vous souvenez, nous travaillons uniquement sur ND shop, pas sur l'administrateur. Copions donc les mêmes choses que nous avions dans G sharp et les coller dans l'admin, sauf la partie qui est vraiment, vraiment spécifique pour l'application. Donc, nous avons ici Apps shop. Non, on n'a pas besoin de ça à l'administrateur. Nous avons seulement besoin de quelque chose de spécifique pour l'administrateur de l'application. Nous pouvons donc supprimer cette partie et relancer le projet et vérifier si tout fonctionne bien. Nous revenons au style CSS, où nous appelons l'administrateur. Dans le niveau de l'application de style, nous appuyons à nouveau sur Enregistrer, et nous verrons que tout compilé avec succès. Maintenant, en tant que structure de composant, nous sommes prêts à passer à l'étape suivante où nous allons appeler ces composants comme le shell et la barre latérale pour les montrer dans l'application. Pour cela, nous devons configurer des itinéraires. Et ce que nous verrons dans la prochaine conférence. 91. Créer les chemins: On a déjà parlé des routes. Maintenant, nous allons importer ou construire des routes pour le panneau d'administration. Tout d'abord, nous devons avoir à remplir ce tableau. Donc, nous avons besoin, comme nous l'avons dit précédemment, définir un chemin est, et ces passes se réfèrent aux composants. Mais comment nous allons le faire dans la manière, comment nous construisons l'application. Donc, si nécessaire, j'ai créé le tableau de la route. Le tableau de cette route, qui aura des composants ou des objets, et chaque objet aura le chemin et le composant auquel ce passage fait référence. Ainsi, par exemple, la valeur par défaut fera référence au composant shell. Lorsque nous enregistrons cela et nous essayons notre application, nous verrons que nous avons toujours panneau d'administration parce que nous avons le composant de l'application, ont toujours ce titre. Nous devons donc dire à ce composant d'application, à la foire et à l'utilisateur comment nous pouvons le faire. Nous disons juste la sortie du routeur et nous fermons comme une prise de routeur d'étiquette. Donc, lorsque nous exécutons ceci, nous verrons qu'il se réfère exactement au shell parce que le chemin par défaut fait référence au composant shell. Ok, comme nous l'avons déjà dit, nous devons diviser la coquille en deux parties, une barre latérale et un contenu. Fais ça. Donc, je vais aller au composant shell, supprimer cette partie, je vais créer un div, appeler wrapper admin. C' est à vous de décider. Vous pouvez construire le code HTML en fonction de la façon dont vous le souhaitez. Et à l'intérieur de ce caoutchouc, je veux appeler la barre latérale d'administration, que nous avons créée précédemment. Et près de la barre latérale, nous devons créer le contenu. Donc, je dis admin en direct, par exemple, le contenu. Et ce qui sera à l'intérieur ici sera à l'intérieur, le contenu. Alors, comment peut-on faire référence à ça ? Tout d'abord, voyons si tout fonctionne encore. Nous allons à nouveau dans le navigateur, ok, la barre latérale fonctionne. Nous avons besoin ici de sentir le contenu. Par exemple, nous avons besoin du tableau de bord, comme nous l'avons vu précédemment, que la voie latérale contient de nombreux liens comme les produits, le tableau de bord et les commandes. Donc, le contenu sera toujours différent. Donc, dans ce cas, nous devons créer du contenu dynamique. Nous pouvons le faire aussi à travers leurs itinéraires. Donc, je dirai que ce chemin a la composante de cisaillement et ces chemins ont un enfant et les enfants seront aussi des routes. Donc, les enfants seront aussi tableau et il contiendra des objets et chaque objet, nous aurons un chemin. Nous pouvons l'appeler, par exemple, tableau de bord et aussi composant. Nous devons donc nous référer au composant de tableau de bord, que nous avons également créé précédemment. Donc, quand je sauve et puis je vais au navigateur, je vois toujours tout vide. Lorsque je navigue directement vers le tableau de bord, nous verrons que rien ne s'est passé parce que le tableau de bord, ok, nous sommes sur la bonne voie, mais nous ne pouvons rien voir dans le contenu. Alors comment on peut arranger ça ? Nous allons aller au composant shell et dire que cet enfant ou ce composant a également une sortie de routeur. Donc, lorsque vous voulez afficher les enfants de ce composant ou leurs chemins enfants de ce composant, vous devez également placer une prise de routeur. Nous sauvegardons cela dans le navigateur. Nous verrons que nous avons des travaux de barre latérale et des travaux de tableau de bord. Et lorsque vous créez un autre chemin ici, par exemple, nous l'appelons pour les produits. Ensuite, vous ferez référence au composant produits, et il sera appelé et rendu à l'intérieur du shell. Donc, dans ce cas, je ne mets pas à jour à chaque fois que la barre latérale, je ne mets à jour que cette partie. Et c'est ainsi que nous gérons le chemin est dans notre application et nous verrons à l'avenir le bénéfice de cela, que nous pouvons garder toutes ces routes, comme protéger tous ces passé afin que personne ne puisse avoir accès à ses enfants aussi. Dans la prochaine conférence, nous allons styler le wrapper admin et le contenu admin pour avoir le design cible que je vous ai montré précédemment. 92. Administrer Sidebar de navigation pour panneau de navigation: D' accord, commençons par la première chose. Tout d'abord, je veux créer cette barre latérale. Comme vous le voyez ici, que nous avons le logo et nous avons quelques boutons de navigation. A l'intérieur de ces boutons de navigation, nous avons des icônes. Alors créons ça. Ok, comme nous l'avons vu précédemment, que nous créons un wrapper admin. Ensuite, nous avons la barre latérale. Nous allons au modèle de barre latérale. Nous allons faire la div. Div est la barre latérale ou la barre latérale d'administration. Et puis je veux définir à l'intérieur de la barre latérale d'abord, comme nous le voyons précédemment, que nous avons un logo sur le dessus. Et aussi je veux définir les liens, les liens qui viennent sous le logo. Donc ici, je dois aussi importer une image. L' image est déjà, je l'ai dans mon dossier assets. Et si vous allez dans le dossier Assets, je le prends à partir de la conception, puis je l'ai mis à cet emplacement du dossier. Donc, les actifs sont le niveau de l'application. Alors revenons en arrière et créons les liens. Que les liens comme d'habitude, nous avons besoin de créer une liste non triée. Et cette liste non triée aura une liste à l'intérieur d'un élément de liste et chaque élément de liste aura un lien. Et à l'intérieur de ce lien, je définit mes chaînes dont j'avais besoin. Par exemple, j'ai besoin d'un tableau de bord. J' ai aussi besoin, par exemple, des produits et des commandes, et cetera. Comme vous vous en souvenez, nous avions une icône avant le texte. Donc, après le texte, nous avons une icône. Allons à l'extrémité principale de la bibliothèque, parce que nous installons déjà cette bibliothèque, nous copions ces deux lignes de code ou cette seule ligne de code pour importer l'icône. Donc, tout d'abord, je vais à nouveau au tableau de bord ou à ma barre latérale, et j'ai collé ici. Donc, pour tous les autres liens, nous pouvons créer une autre liste. Et puis nous pouvons renommer ces éléments comme des produits. Et nous avons renommé, par exemple, les catégories. Et aussi nous avons besoin d'ordres. Et aussi à la fin, j'ai besoin d'utilisateurs. Et bien sûr, nous avons besoin d'un lien qui est appelé déconnexion, où l'utilisateur se déconnectera du panneau d'administration. Mais nous allons d'abord mettre les bonnes icônes parce que nous avons ici pi check, sorte que vous pouvez trouver les icônes que j'ai aussi dans la bibliothèque d'icônes. Donc, nous avons ici toutes les icônes. Donc, vous prenez juste le nom et collez-le. Donc, par exemple, pour le tableau de bord, j'ai besoin de la maison, pour les produits, j'ai besoin d'une mallette, quatre catégories. J' ai besoin d'une liste et pour les commandes, j'ai besoin, par exemple, du panier. Et par exemple, pour les utilisateurs, j'ai besoin d'icône d'utilisateurs. Donc, chaque icône a besoin du nom qui peut ramasser dans la bibliothèque. Et pour la déconnexion, j'ai quelque chose appelé déconnecter. Sauvegardons et allons à l'application et voyons si tout fonctionne bien. Ok, nous avons tout va bien, mais sans aucun style. Nous allons donc styliser la barre latérale dans notre dossier de styles publics. Donc, tout d'abord, je vais aller aux styles publics. Et ici, j'ai déjà défini le dossier admin. Donc, à l'intérieur de ce dossier d'administration, nous avons besoin de quelque chose appelé shell, shell dot SCSS, puis nous avons importé dans l'admin. Donc ici, j'ai un partage Et je dis importation de, par exemple, il y a des applications, puis Admin, puis Shell. Donc j'ai besoin d'importer celui-là. Donc, après ici, nous devons écrire nos styles ici. Donc, tout d'abord, je dois avoir, par exemple, leur wrapper, le wrapper et le principal, sorte que notre supérieur aura toutes sortes de barres latérales à l'intérieur. Alors prenons leur supérieur en premier. Donc, à l'intérieur du shell, je crée une classe admin. Et cette classe d'administrateur aura un rappeur. Et à l'intérieur de cet emballage, par exemple, j'ai une hauteur 100%. Et par exemple, j'ai un batting 0 juste pour l'initialiser. Et puis une marge aura un 0. Je suis juste en train d'initialiser le compte-gouttes entier. Et puis nous devons créer la classe de barre latérale et la classe de barre latérale, comme nous l'avons vu précédemment, qu'elle est à l'intérieur et qu'elle est préfixée avec admin. C' est pourquoi j'utilise cette esperluette moins barre latérale. La position de la barre latérale sera corrigée car je ne veux pas faire défiler la barre latérale comme je vous montrerai plus tard. Et la largeur sera 175. C' est ainsi que je l'ai obtenu de la conception et de la couleur de fond. Par exemple, j'ai un noir et aussi nous avons une hauteur. Nous pouvons lui donner 100%, donc il peut être pieds sur toute la page. Alors qu'en est-il du contenu principal ? Le contenu principal qui viendra près de la barre latérale. Donc ici, j'ai besoin d'avoir aussi esperluette principale. Et à l'intérieur de ce principal, j'aurai une largeur. Quelle est la largeur sera un calcul de 100% moins 175 pixels parce que la barre latérale a 175 pixels. Donc ici, j'ai aussi une marge. J' ai besoin de pousser ce contenu principal principalement vers la droite. Donc, je dirai marge à gauche, ce sera 175 pixels. Donc, si nous allons ici, nous verrons que nous avons la barre latérale et aussi nous avons le contenu ici. Et comme vous vous en souvenez, nous avions la route du tableau de bord. Donc, la route du tableau de bord, nous voyons qu'il est vraiment et dans leur contenu. Et nous pouvons être sûrs de cela mon ouverture les outils ont et ensuite nous vérifions l'administrateur principal ou le wrapper admin lui-même pour voir que tout va bien. Alors faisons plus de style. Tout d'abord, j'ai besoin d'avoir le logo de manière plus agréable. Donc, j'aurai un logo, et ce logo aura un rembourrage comme 20 pixel, puis il aura une largeur d'environ 100%. Ainsi, il peut tenir exactement sur la barre latérale, à l'intérieur du contenu principal de la barre latérale. A l'intérieur du logo, nous remarquons que nous avons une image et à l'intérieur de cette image, je vais lui donner une largeur maximale 100% pour ne pas sortir de leur contenu. Donc, tout va bien dans la barre latérale et l'image. Attachons maintenant ce sont des liens, que les liens aussi ils ont leur propre classe qui est appelée liens. Et puis j'ai besoin de styliser chaque élément des liens. Donc, j'aurai les liens de classe sur un côté, cette classe j'ai l'URL, et l'URL sera initialisée avec la marge 0 et le remplissage 0, car parfois il vient avec des valeurs, donc nous devons les initialiser. Et leur moins, nous aurons un bloc d'affichage pour l'afficher comme un div. Et le moindre style sera non tutti, plus de ces points près de l'élément de la liste, et aussi la largeur serait 100% de leur contact. Et comme vous vous en souvenez, à l'intérieur de cet élément de liste, nous avons un lien et ce lien nous allons maintenant le styliser. Donc, tout d'abord, nous donnons une classe, et cette classe a une couleur, et cette couleur peut être un blanc. Et nous pouvons donner ces liens frappeurs. Il peut donc y avoir plus d'espaces entre ces liens. Mais d'abord à propos de la couleur, je veux vous montrer un truc. Comme vous vous souvenez, j'ai parlé certaines variables définies de couleurs qui sont définies dans leur bibliothèque de premier NG. Et ces variables, vous ne pouvez pas les voir dans les outils de développement. Ainsi, comme vous le voyez dans cette liste, il y a déjà CS défini comme variables pour leurs couleurs. Ainsi, vous pouvez choisir la couleur que vous aimez et sont principalement utilisables parce que vous pouvez les utiliser n'importe où dans votre style, qui vient avec ce thème. Donc, pour utiliser cette couleur, vous devez dire var et vous mettez le nom de la variable, puis il aura la couleur. Et si on le vérifie, on voit qu'il a vraiment cette couleur. Ok, donc maintenant tout est prêt. Nous avons besoin d'un bloc d'affichage pour le lien afin qu'ils puissent avoir une largeur effective et aussi des rembourrages efficaces. Et comme nous le voyons ici, que tout fonctionne bien. Mais d'abord, nous devons donner une couleur de vol stationnaire, comme quand je mets la souris sur un lien, j'aurai une couleur. Donc, tout d'abord, j'ai, par exemple, un arrière-plan. Reprenons un peu de couleur dans notre liste ici. Donc je vais brancher le bleu 500 ou 600 et 700 n'importe quand quoi. Ainsi, vous pouvez mettre, par exemple, var et ceci via bleu 700. Et puis quel angle ? Mais nous avons un navigateur. Je navigue et IC que le titulaire fonctionne bien. Donc, stylisons ces icônes plus pour que nous puissions donner comme plus d'espaces. Donc, si vous vous souvenez que nous avons I élément à l'intérieur du lien, comme vous le voyez ici. Donc nous avons le I, nous devons le coiffer. Et cela, je vais avoir, par exemple, une marge, non ? Comme si je voulais l'éloigner du texte. Je lui donne le huitième pixel. Et aussi si vous voulez, vous pouvez donner comme un peu de marge haut. Nous pouvons lui donner comme un 0 pour l'initialiser s'il a une marge avant. Et aussi nous pouvons donner un flotteur à gauche, sorte qu'il peut être poussé vers la gauche la plupart du temps. Donc, nous économisons et nous voyons que tout fonctionne bien. Donnons maintenant un quartier de style spécial leur logo bouton Alt. Donc, je vais dire ici classe qu'il a une classe spécifique qui est appelée déconnexion. Et cette classe, je vais le définir ici à l'intérieur de l'a. Et le bouton de déconnexion aura une couleur, ce qui est, par exemple, nous pouvons lui donner une couleur plus claire, comme un bleu. On peut dire 500. Et dans ce cas, nous verrons qu'il a une couleur vraiment différente. Comme vous le voyez ici, il y a des espaces blancs comme la barre latérale ne correspond pas directement aux bordures de page. Cela parce que le composant HTML ou l'élément HTML n'est pas le monde initialisé. Pour initialiser les éléments, je conseillerais d'utiliser une bibliothèque appelée normalize dot css. Et cette bibliothèque va initialiser votre page Web ou votre code HTML depuis le début, puis vous pouvez travailler avec lui de la bonne manière. Donc, il fait quelques initialisations pour l'application ou le HTML avant de commencer à coder. C' est pourquoi je vais le mettre en haut de mon fichier CSS. Donc ici, je vais l'appeler, et ce serait de la même façon que nous appelons chaque bibliothèque MPM. Parce que si vous allez à l'intérieur de cette bibliothèque, lorsque vous appuyez sur le contrôle et à cette bibliothèque que vous verrez que nous avons des initialisations de tout, comme la barre latérale HTML progresse tout. Donc, ici, nous avons l'initialisation et nous verrons que cela fonctionne vraiment bien. Mais nous avons encore cet espace sur le dessus. Cela parce que je veux initialiser aussi la barre latérale pour être en haut. Comme vous vous en souvenez, j'ai mis ce cadran fixe. Donc, quand je le mets fixe, je dois faire le haut pour être 0. Donc, nous revenons à notre code et nous disons top 0. C' est pourquoi je ne veux pas avoir un défilement dans le contenu car il aura un fixe. Donc, lorsque je fais défiler le contenu, la barre latérale restera fixe sur la droite et il ne sera pas défilé. Je veux aussi donner un peu de couleur au lieu de noir à la barre latérale pour être plus agréable et en forme avec le design. Donc, comme vous le voyez ici, que tout fonctionne bien. Donc maintenant, j'ai besoin de naviguer parmi ces icônes ou ces liens. Donc, quand je clique sur eux, je navigue vers la page. Donc, si vous vous souvenez dans Angular, nous avons quelque chose appelé lien de routeur et vous pouvez l'ajouter à l'élément HTML, comme un lien ou un. Et puis vous pouvez naviguer à un endroit spécifique. Donc, je vais ajouter chaque lien basé sur l'itinéraire qui est défini dans le module comme nous l'avons vu dans la conférence précédente. Donc, je vais avoir ici, par exemple, un tableau de bord et des produits et d'autres choses comme les catégories. Et comme vous vous en souvenez, nous avons tout défini dans le module. Pour l'instant, nous avons seulement le tableau de bord, mais je vais ajouter pour le reste. Donc, je vais sauter cette vidéo pour le faire rapidement. Maintenant, nous avons tout ce qui change à l'intérieur, mais soyez prudent. Je l'ai déplacé de l'a ou de l'œil à l'a parce que si vous, si vous le mettez à l'intérieur de l'œil, alors la navigation ne fonctionnera que lorsque vous cliquez sur l'icône. Essayons ça. Et nous verrons que nous naviguons, n'est-ce pas ? Mais quand je clique sur les produits, je reçois une erreur. En effet, la navigation du produit n'existe pas dans le module de l'application. Nous devons donc y ajouter ici, comme nous le verrons plus tard. 93. Désactivez l'authenticité de l'API pour la fronts: Ok, retour au backend. Comme vous vous souvenez, que nous avons créé l'authentification pour nos API. Et ces API sont protégées maintenant. Nous ne pouvons donc rien faire sans vous connecter pour créer l'application du panneau de configuration. Je veux désactiver cette authentification parce que l'authentification viendra après que nous avons préparé tout comme les goodies, produits, les aulnes, et aussi les utilisateurs. Donc, quand le sujet d'authentification viendra pour le front end, alors nous pouvons les activer à nouveau. Donc, pour désactiver l'authentification, nous allons à JWT, fichier JS dans notre backend. Ensuite, je vais commenter tous ces à moins, et puis à moins que je ne vais tout permettre. Donc, j'ajouterai une ligne ici, je l'appellerai URL, puis il acceptera une regex. Et ce rejet sera exactement le même qu'ici, mais sauf ce préfixe. Donc, de cette façon, je vais autoriser toutes les URL à être appelées au back-end sans aucune authentification ou autorisation. C' est temporairement. Il suffit donc de commenter cette partie et d'ajouter cette partie parce que nous allons la supprimer après avoir activé vraiment le back-end. Mais pour l'instant, je veux utiliser ces API sans authentification. Et dans une vidéo plus tard, après avoir fini dans le backend totalement et le front end, alors je vais vous dire comment les activer et nous testons nos applications avec authentification. 94. Service de catégories Obtenez des données de Backend: Ok, maintenant remplissons notre table avec les données réelles, les données, qui proviennent du back-end. Pour cela, nous devons créer un service appelé service de catégorie. Et comme nous le voyons dans ce graphique, nous avons le service de catégorie situé dans la bibliothèque de produits. Donc, de cette façon, nous devons le créer là-bas et le lier au panneau d'administration vers le haut. Alors faisons-le pratiquement et on verra comment on peut saisir ça à la table. Donc, nous avons notre table prête et nous avons besoin, par exemple, remplir ce tableau à partir de données non codées en dur, mais à partir du back-end. Alors commençons à faire ça. Tout d'abord, comme nous l'avons dit précédemment, que nous avons le service situé dans la bibliothèque des produits. Donc, nous n'allons pas avoir le service au niveau de l'application parce que le service est partagé également avec l'autre application. Nous devons donc le mettre quelque part où il peut être partagé pour toutes les applications ici. Donc, quand nous allons à la bibliothèque de produits, qui est le dossier ellipse, alors fermons tout comme des applications. Nous avons de l'ellipse et à l'intérieur des boucles, nous allons avoir In products, notre surface. Ainsi, nous pouvons créer un service en utilisant une console ECS. Donc, nous pouvons utiliser aller là-bas et générer et rechercher le service. Et ici, nous avons la première option. Et nous avons juste besoin de mettre le nom du service. Donc, je veux l'avoir dans un dossier, des services, puis des catégories. Ceci, nous avons toujours le nom et observons toujours ce qui se passe ici avec une course à sec parce qu'il vous montre où le fichier est généré. Le projet sera des produits, qui est la bibliothèque de produits. Et je veux sauter ces tests. Donc, quand générez-vous et cliquez sur Exécuter ? Voyez que cette bibliothèque est générée. Vous ne pouvez pas contrôler et cliquer sur ce lien. Vous verrez que nous avons sauté directement à ce service. Donc, ici, nous avons le service de contiguïté. Nous allons saisir des données ici, d'accord, comme vous vous en souvenez dans un facteur que nous avons à partir du service backend ou localhost 3000 API Version 1 catégories. Donc, quand j'envoie une demande, je reçois les données du backend. Donc je veux voir ces données dans le front end à l'intérieur de notre table, que nous voyons ici. Donc, tout d' abord, avons la requête HTTP car nous pouvons demander les données via le protocole HTTP. Donc, tout d'abord, nous devons importer le client HTTP, qui est déjà situé dans la bibliothèque Angular. Donc d'abord, j'ai besoin d'appeler Import. Et puis le client HTTP de sera à angulaire, puis barre oblique, barre oblique HTTP. Donc, à partir de cette bibliothèque, je peux récupérer tous les clients HTTP, donc je peux faire des appels HTTP. Alors, comment nous pouvons utiliser cette bibliothèque ou ce service, parce que c'est aussi un service. Donc, ici, je vais au constructeur du service de catégorie de service. Et je dis privé, je définit une variable qui est le type de celui-ci est client HTTP. Et de cette façon, je peux créer un HTTP, GET, supprimer, poster des requêtes PUT. Alors faisons maintenant notre premier objectif. Donc, nous avons une méthode que nous pouvons appeler Get catégories. Et cette méthode à l'intérieur retournera pour moi les données qui proviennent de ce service HTTP. Donc, je vais dire ce point http point get, je veux obtenir des données. Et ces données viendront par l'URL, que j'ai assignée ici. Donc, je vais copier cette URL, puis revenir à mon code. Et je dirai, donnez-moi ces données de cette URL. Donc, après cela, nous aurons toutes ces données. Mais dans TypeScript, je veux que vous ayez la dactylographie. Je veux donc spécifier des types pour chaque type de données que j'obtiens. Donc, pour cela, nous devons créer des types. Tout d'abord, ce que cela revient pour moi, il revient pour moi au moins des catégories. Et cette catégorie peut être un modèle. Donc, ce modèle peut être créé ici. Et je dis que je veux un tableau de catégories. Alors créons un fichier ici. Vous pouvez également utiliser dans la console ECS ou vous pouvez aussi utiliser le manuel normal comme. Donc, je crée un dossier ici, je l'appelle modèles, car à l'avenir, nous allons également localiser le modèle de produits. Donc, nous devons d'abord avoir un modèle de catégorie, exactement comme nous l'avons fait dans le back-end. Donc modèle de contiguïté sera également de type Ts et nous disons exportation. Nous créons un type. Vous avez l'option, vous pouvez le créer en tant qu'interface ou vous pouvez le créer en tant que classe. Donc, pour moi, je vais le créer comme une classe. Et cette classe appelée catégorie. Et cette catégorie aura une pièce d'identité. Exactement les mêmes données que nous avions auparavant. Et cet ID a une chaîne de type. Et aussi, nous avons un nom qui a un type aussi chaîne. Je mets ce point d'interrogation pour les rendre optionnels. Donc, chaque fois que je crée une catégorie ou par exemple, une catégorie, alors il ne me le dira pas ou vous manquez l'ID. Donc si je manque l'iode ou le tâtonnement, je veux juste que mon front soit stable. Donc ici, nous ne créons pas d'objet, nous créons des variables, nom et icône, comme nous l'avons vu front-end. Donc, ici, nous avons maintenant le modèle. Et je veux que ce getCategories retourne pour moi un tableau de catégories. Donc, je vais dire ici que je peux retourner, ou cette méthode nous avons retourné pour moi tableau de catégorie. Mais nous avons un problème ici parce que la requête GET ou GetMethod du service HTTP ne retourne pas les données exactement comme nous le voulons. Ça les rend sous quelque chose qu'on appelle observable. Et cet observable est quelque chose comme vous pouvez imaginer avec moi que ce service attend que le back-end réponde et puis il observe les données jusqu'à ce qu'ils viennent et ils disent, Ok, maintenant j'ai les données, vous pouvez les attraper. Ce sujet est pour notre x js, je vais aller plus loin quand nous allons utiliser NG RX, vous comprendrez plus l'observable pour l'instant. Et le front end attend les données et l'attente qui passe par les observables. Donc, il ne retournera pas pour moi tableau de catégorie, il reviendra pour moi observable. Et à l'intérieur de cet observable est un tableau de catégories. Donc, tout d'abord, nous devons avoir ici 0 servable. Et quand vous ne savez pas comment l'importer, il suffit de contrôler et d'espace sur Windows ou de contrôler le point sur Mac. Donc, il vous dira importer Observable automatiquement. Donc vous le voyez ici, et nous voyons que c'est important ici. Donc, et puis je veux spécifier un type. Donc, je dis que le type de ce qui vient à l'intérieur de cet observable est la catégorie. Et nous avons également besoin d'importer cette catégorie que nous avons créée précédemment à partir du modèle de catégorie. Mais aussi de cette façon, nous devons dire, pour obtenir qu'il retournera tableau de catégorie. Ça ne peut pas être comme ça. Donc, nous devons dire que GET, faites attention que nous allons retourner une donnée qui sont un tableau de catégorie. Donc, nous pouvons dire aussi à la getMethod. Donc, nous n'aurons pas cette erreur car ici, il est préférable de spécifier le type de données qui provient de l'intestin. Donc, cette requête GET saura qu'elle retournera tableau de catégories. Et j'ai le lien à la fin et tout va bien maintenant. Donc, nous économisons. Et puis nous allons utiliser ce service dans notre agrégation. Donc, nous allons voir comment nous allons importer ce service de catégorie et l' utiliser dans l'application des catégories ou admin. Et ici, nous allons voir comment nous l'utiliserions dans ces catégories liste pour remplacer ces données codées en dur par des données back-end. 95. Service de catégories de catégories dans l'élément de liste de catégories: Ok, donc pour l'instant, nous allons utiliser les catégories ou la méthode getCategories dans le service de catégorie à l'intérieur de la liste des catégories. Donc, comme je vous l'ai déjà dit, nous avons importé un client HTTP Service de la même façon que nous allons le faire dans le composant de liste des catégories. Donc, je veux importer le service dans le constructeur. Donc, je définit une variable. Nous pouvons définir une instance de ce service. Donc je dis le service de la catégorie privée. Et à l'intérieur de ces catégories ou le type de ce service de catégorie sera catégories service. Mais d'où je vais prendre ce service de catégorie de la bibliothèque de produits. Donc, si je vais ici et ISA, comme nous l'avons vu précédemment, importer le bien ou le service de. Et puis je dirai à Blue Bits et au nom de la société et des produits, je remarquerai qu'il n'a aucun type. J' ai toujours le module d'erreur. Le produit n'a pas exporté membre, nous devons donc l'exporter d'une manière ou d'une autre. Donc, en revenant à la bibliothèque, encore une fois, nous verrons que nous avons ici index.js. J' ai donc besoin d'exporter des services qui sont situés à l'intérieur de la bibliothèque. Donc, je vais aller ici service et ensuite je dirai catégorie service. Et nous devons aussi exporter le modèle que nous avons créé. Donc parce que nous allons l'utiliser là-bas. Donc, je dis aussi vivre et puis les modèles, puis la catégorie. Donc maintenant tout est exporté. Nous verrons que nous n'avons plus cette erreur. Donc ici, je vais voir que le service de catégorie, je peux l'utiliser maintenant. Donc, je n'ai plus besoin de ces données codées en dur parce que nous allons remplir ce tableau à partir du back-end. Mais nous pouvons dire que ces catégories ont une catégorie de type qui vient également de ces bibliothèques de produits. On l'a importé. Donc, et ici ce sera tableau, et puis ce sera un tableau vide au début. Et après que ce composant a été initialisé, nous allons sentir ce tableau. Alors, comment peut-on faire ça ? Je dis que ce point obtient un bon service, utilisez la méthode getCategories. Et puis si vous vous souvenez que nous avons un observable et je vous ai dit que le front est en attente de toute action vient de ce observable, donc de tout mouvement de tout changement de données. Donc, d'abord, je dois dire que je veux m'abonner et observer ces données. Donc, quand ils sont un changement, alors attrapez-le et utilisons des données. Donc, je veux utiliser ou m'abonner à cet observable qui est retourné de getCategories. Parce que vous vous souvenez qu'il revient pour moi observable quelle catégorie de type. Donc, ici, nous avons à l'abonnement et ensuite nous spécifions dans le rappel et dans leur rappel, nous obtiendrons la réponse des données. Donc, pour moi, je vais les appeler chats, par exemple, catégories. Et puis le rappel sera une méthode. Et dans cette méthode, je dis cette catégorie de points, la variable que j'ai définie ici sera chats. Et puis je sauve. Nous voyons ici que dans le compilateur nous n'avons aucun problème. Mais ici, je pense que nous avons un problème. Ouvrons la console et vérifions-la. Nous voyons que nous avons une erreur détectée dépendance circulaire et la flèche d'injecteur null. Cela vient parce que le module d'application n'a pas importé le module HTTP. Donc, chaque fois que je veux utiliser une bibliothèque, comme nous l'avons vu précédemment, que nous devons importer ce module. Nous avons utilisé dans le service de catégorie, le client HTTP. Nous devons donc également attacher le module. Vous avez la possibilité d'utiliser ce module dans le module produit, ou vous l'utilisez dans le module d'application lui-même. Je préfère l'utiliser dans le module d'application car nous allons importer plusieurs bibliothèques. Ensuite, si nous importons dans chaque bibliothèque, alors il sera dupliqué. Nous aurons comme module HDTP importé plusieurs fois. Donc, pour ce faire, nous allons au module de l'application. Ensuite, ici, nous disons dans les importations de modules, nous disons que me donner module client HTTP. Et cela sera importé automatiquement parce que vous utilisez le plugin et nous l'avons ici. J' aime aussi organiser un peu le code. J' ai donc les importations, les importations de base ici, puis les composants, puis les composants UX ou les modules lyse, tout fonctionne bien. Je vais à nouveau catégories protégées et je vais voir les têtes mydata jeux avec succès. Parfois, peut-être que vous obtiendrez une erreur qu'il n'y a pas de fournisseur. Quatre catégories de service. Donc, c'est mieux aussi dans le module d'application, disons que je veux fournir ce service à utiliser dans cette application. Donc, parce que nous utilisons ce service à l'intérieur du composant qui est situé à l'intérieur de l'application. Je dois donc l'importer aussi. Nous pouvons donc importer ce service. Nous pouvons dire directement que les fournisseurs fournissent pour moi catégories de service. Et ce service de catégorie serait fourni ici. Et nous économisons et nous assurons que tout va bien fonctionner. Donc, comme vous le voyez ici, nous avons les données qui proviennent du backend, exactement comment nous l'avons dans le facteur. Comme un résumé rapide, comme vous vous en souvenez, nous avons importé le service, nous avons importé le modèle, puis nous avons utilisé ces catégories. Nous enlevons le codé en dur, puis nous les utilisons dans ce tableau. Et cette table rend les données en fonction de ce qu'elles proviennent du backend. Et comme vous le voyez ici, nous avons dans les données ou dans les requêtes réseau HTTP, nous avons notre demande, qui vient avec les catégories qui sont situées ici. Nous voyons exactement les mêmes données qui proviennent du backend. 96. Ajoutez des catégories de formulaires PrimeNG de base: Ok, maintenant nous avons notre table prête ou des données provenant du back-end. Ajoutons des catégories. Comme vous vous en souvenez, nous avons précédemment désactivé l'authentification pour le back-end. Donc, maintenant, nous pouvons ajouter des catégories sans avoir été authentifiés. Nous l'activerons à nouveau lorsque nous aurons le login et les utilisateurs. Pour l'instant, je vais ajouter une nouvelle catégorie, comment nous allons le faire. Donc normalement, le comportement de l'utilisateur ira à un nouveau, puis je vais ajouter un autre composant. Et je vais voir un autre composant ici pour ajouter le nom de la catégorie et l'icône. Et puis j'appuie sur Enregistrer. J' affiche une notification à l'utilisateur que l'intestin de catégorie a été ajouté avec succès. Et nous devons revenir à nouveau à la table et voir notre catégorie ajoutée à la base de données et faire cette table. J' ai donc dit que nous allons à une nouvelle page lorsque je clique sur Nouveau, donc j'ai besoin d'un nouveau composant. Donc, générons ce composant. J' ai besoin de générer un nouveau composant qui sera dans l'application admin sous catégories. Donc, nous allons d'abord au composant de génération NX, puis ce composant sera sous Getty et le nom du composant sera la forme de la catégorie. Et puis le projet sera administrateur. Et encore une fois, nous faisons les autres choses que nous avons faites précédemment, coiffer et sauter les tests. Et puis nous sommes sûrs que tout va bien, donc il est ajouté à ce chemin. Ok, parfait. Nous cliquons sur Exécuter et puis nous voyons que le formulaire de catégories a été créé. Donc ici, le composant est prêt, nous avons juste besoin d'ajouter aussi la navigation à 84 catégories moins vous vous souvenez que nous avons créé le lien de routeur et ce lien de routeur, je vais lui donner, par exemple, la forme. Et puis dans le module, nous devons ajouter un nouveau chemin. Et ce chemin aura la même structure et nous lui donnons des antiquités slash forme. Et ici, nous allons appeler le composant de formulaire catégories que nous sauvegardons. Retournons ici. Nous cliquons sur vous. Nous voyons que nous naviguons vers le module de formulaire ou le composant de formulaire. Alors maintenant, nous allons avoir la structure ici. Nous allons avoir le formulaire ici. Donc, je voudrais avoir la même que sa structure comme nous avons cette carte et aussi le sous-titre de titre, puis le contenu avec les contrôles vient ici. Copions donc la même chose que nous avons fait dans la liste des catégories. Donc, nous copions tout et nous le collons ici. Nous supprimons cette table que nous avions déjà, donc nous n'en avons plus besoin dans ce composant et nous sommes prêts pour cela. Donc ici, nous n'avons pas besoin de plus et de nouveau, nous devons aussi le faire comme AD. Donc, par exemple, créer. Donc, nous économisons, nous allons à New, nous voyons que nous avons une création. Alors modifions le texte ici. Par exemple, nous pouvons dire Ajouter une catégorie. Et ici aussi, nous pouvons dire ici. Nous avons donc maintenant le titre et le sous-titre ont été créés. Et aussi nous avons besoin, par exemple, l'utilisateur est utilisé pour avoir les contrôles ici. Par exemple, créer et un conseil. Alors créons un autre bouton près de lui. Et aussi nous pouvons changer cela pour voir Khan laitière et aussi ces deux primaires. Et ici, nous avons créé et cela nous l'appelons pas créer, mais annuler. Et après cela, nous avons tout créé. Mais comme nous voyons ici que nous avons comme l'art de coller les uns sur les autres, ces boutons, ceci parce que nous avons besoin de fournir une certaine marge, non ? Mais alors je pense que dans prime NG, vous n'avez pas besoin de créer une clause Michelle de classe et aller au style, puis ajouter cette marge et n'est pas premier NG vous fournissant à l'intérieur de la grille quelque chose comme des classes prêtes, qui sont appelés espacements. Et ces espacements, comme vous le voyez ici dans cet exemple, vous pouvez espacer entre le composant entre les feuilles, entre les colonnes. Donc, vous pouvez l'utiliser de la manière que vous voulez. Alors, comment peut-on utiliser ça ? Il a dit ici que nous devons avoir un B premier b moins et la propriété comme la marge, par exemple, ou le rembourrage. Et puis vous pouvez dire position en haut, à droite, à gauche par exemple. Et puis la valeur, et la valeur peut être de 0 à six, et cela dépend de l'espace. Ainsi, nous pouvons utiliser, par exemple, pour ce bouton. Nous pouvons dire que pour moi, ce bouton, B moins marge, droit sera quatre, par exemple. Donc si j'y vais et je verrai ces espaces ici. Alors rendons le plus petit. On peut en faire deux, et on a cette base ici. Donc je dois mettre ces boutons sur la droite, donc on ne peut pas faire ça comme on l'a vu précédemment. On a juste besoin de changer ça à droite. Mais nous ne voyons aucun changement parce que cela, vous avez également besoin pour le composant de barre d'outils, vous devez spécifier aussi la gauche. Donc même il est vide, alors faites-le comme ça et vous l'aurez sur la droite. Alors changeons aussi l'icône pour que nous n'en ayons plus besoin. On a besoin d'une icône comme revenir en arrière ou sortir. J' ai donc l'icône déjà prête. Donc ça s'appelle flèche. Vas-y. Gauche. Ici, nous sauvegardons et nous avons, l'icône est déjà là. Maintenant, revenons à notre formulaire. Donc ce que je dois faire, c'est juste faire un peu de nettoyage. Nous devons supprimer ce lien de routeur car nous ne cliquons pas sur Créer. Donc ici, lorsque nous cliquons sur Créer, nous avons besoin de cela pour enregistrer sous forme de formulaire dans la base de données. Donc, nous devons d'abord créer le formulaire. Jetons un coup d'oeil. Deux extrémités principales. Gee, comment il utilise le formulaire pour moi, j'ai besoin de la zone de texte 14 pour le nom de la catégorie et un pour l'icône de la catégorie. Donc, tout d'abord, nous allons à prime NG et nous vérifions comment nous utilisons l'entrée. Par exemple, vous voyez ici un grand nombre de types d'entrée qui sont en entrée, le masque de saisie du groupe, commutateur d'entrée, ainsi que le texte d'entrée. Et comme vous le voyez ici, nous avons ce texte d'entrée. Mais si je veux utiliser celui-ci, je dois suivre la documentation. J' ai donc besoin d'importer aussi le module de texte et puis je peux l'utiliser. Alors faisons ça. J' importe le module de texte dans mes modules. Si vous vous souvenez, nous avons le module U xs ici. Donc, je l'importe ici. Encore une fois, mettez-le ici. Donc, nous avons le module de texte d'entrée prêt, donc je peux utiliser leur composant. Alors commençons basique. Je veux utiliser celui-là. J' ai ici. Et je vais au formulaire, ou par exemple, ici je crée un formulaire. Et ce formulaire, par exemple, sera vide. Et à l'intérieur de ce formulaire, je vais utiliser à nouveau une grille. Donc, je vais donner à nouveau une grille div dot py parce que je veux les mettre près l'un de l'autre. Donc, j'ai ici div appelé, par exemple, pour et aussi de ne pas manquer ici la p. Et aussi un autre pour un autre texte. Donc ici, 12, nous le sauvegardons, revenons à l'application, nous voyons qu'ils sont proches l'un de l'autre. Nous allons donc ajouter une marge ici dans l'espace entre la barre d'outils et le formulaire lui-même. Donc, comme vous vous souvenez, nous avons ici la propriété em, marge ou par exemple, être marge inférieure. Je dois spécifier, par exemple, cinq. Donc, nous verrons ici que cela nous donne un peu d'espace, mais ici nous avons besoin d'une étiquette. Donc, ajoutons aussi quelques étiquettes, ou exemple C dans Prime NG. Donc, nous avons ici plusieurs étiquettes. Mais tout le monde souffre comment aligner ces texte d'entrée et par exemple, une case à cocher ou comment nous alignons ces icône avec les manuels scolaires ou près du bouton, est toujours un souffrir avec un formulaire. Mais premier N G résoudre ce problème en créant convenu, surtout pour la forme. C' est très génial. Donc, si vous allez au système de grille OU flex prime, il y a quelque chose appelé mise en page de formulaire. Et dans la mise en page du formulaire, vous pouvez sélectionner la disposition que vous voulez réforme de la folie. Donc, comme vous le voyez ici, ce que nous avons besoin exactement vertical et une grille. Donc nous pouvons aller ici et voir ceci, le code de ce formulaire. Donc, nous allons ici à nouveau jusqu'à la verticale et degrés. Nous voyons qu'il utilise une classe appelée Floyd. Et aussi il utilise la grille de formulaire et la grille. Copions donc cette partie et collez-la dans notre application. Donc, à l'intérieur du formulaire, j'ai une grille, je supprime ici tout et collé aller à l'application. Encore une fois. Je vais voir que très agréable et guidé pour. Alors, renommons les choses pour que nous puissions en faire un nom. Et aussi ici le nom, l'étiquette est nommé comme nom de la catégorie et tout va bien. Et puis icône. Et j'ai besoin ici aussi icône. Et ici, je clique sur Enregistrer. Nous avons maintenant tout fonctionne parfaitement. Dans la prochaine conférence, nous allons voir, quand nous cliquerons sur Créer, nous allons lire les données du formulaire et créer la catégorie dans la base de données. 97. Ajouter des catégories Données de formulaire de liaison de données de formulaires: Ok, Dans cette conférence, je vais vous montrer comment lier les données du nom, une icône de la catégorie lorsque nous cliquons sur Créer. Donc, tout d'abord, nous n'allons rien ajouter à la base de données. Nous avons juste besoin de lier les données. J' ai donc besoin, par exemple, lorsque je clique sur Créer, vous verrez ici dans la console les données que je mets ici. Donc, pour cela, nous devons utiliser la forme réactive et aussi nous devons utiliser pour le module. Donc, pour ce faire, Commençons étape par étape. Tout d'abord, je vais aller au formulaire Catégories. J' ai tout ici. J' ai donc besoin de créer un formulaire, formulaire interactif, qui peut interagir avec Angular. Je peux lire les données lorsque je soumets le formulaire ou lorsque je clique sur n'importe quel bouton. Jusqu' à présent, dans Angular, nous avons quelque chose appelé former un groupe. Donc, chaque formulaire a une forme un groupe. Et ce groupe de formulaires contient tous les contrôles comme ce nom et cette icône. Donc, pour cela, nous devons définir que notre formulaire est un groupe de formulaires. Donc, nous ne pouvons pas avoir spécifié cette entrée ou cette propriété. Et nous disons que nous allons utiliser cette forme précieuse dans mon bâtiment, cette forme. Donc, nous voyons que nous avons une erreur ne peut pas lier groupe de formulaires car il n'est pas connu propriété de la forme. Pourquoi ? Parce que nous avons besoin d'importer pour le module. Nous devons donc importer deux choses. Tout d'abord, le module du forum, qui vient d'Angular. Et il y a aussi quelque chose appelé module de formulaires réactifs. Donc, ici, nous avons deux composants ou deux modules que nous devons importer dans notre module d'application. Nous verrons alors que cette directive fonctionnera principalement. Donc, nous sauvegardons le module d'application et nous devons savoir comment construire ce formulaire. Donc, dans ce fichier TypeScript ou le fichier de code de ce composant, je vais ici et j'ai besoin de définir une forme précieuse. Donc, comme vous le savez, dans Angular, tout ce qui est défini ici, après avoir défini une propriété ou une directive ou l'entrée, j'ai besoin d'avoir une variable. Cette variable est disponible ou doit être disponible dans le fichier TypeScript. Donc, nous pouvons le faire et dire que le formulaire pour moi est un type de groupe de formulaires. Et ce groupe de formulaires, comme vous le voyez, il est important automatiquement à partir de formulaires angulaires de construire une forme réactive dans Angular, nous devons utiliser un service, ce service appelé Form Builder. Et pour appeler ce service ou tout service, nous utilisons le constructeur de formulaire privé. Nous donnons un nom et j'importe celui-ci, générateur de formulaires et vient également de la bibliothèque Angular à partir de formulaires. Donc, comme vous le voyez ici, nous avons maintenant le générateur de formulaires. Et lors de l'initialisation de ce composant, je dois définir quels sont les membres du groupe de ce composant, tout ce formulaire. Donc, je dois construire le formulaire d'une manière ou d'une autre. Donc, je dis que cette forme de points est égale à cela. Le générateur de formulaire de service. Donnez-moi un ancien groupe ou un groupe. Et ce groupe contiendra plusieurs membres, qui sont des contrôles. Et les contrôles que nous avons vus dans le fichier HTML. Ils sont le nom et l'icône, et ils sont contrôlés ici. Nous devons donc les définir aussi ici. Je vais vous dire pourquoi plus tard parce que nous devons utiliser le validateur pour cela. Donc angulaire interagira avec ce formulaire pour repérer chaque erreur que l'utilisateur peut porter. Alors je vais ici et je dis ce nom. J' ai donc besoin de spécifier exactement comme les entrées que j'ai pour cette police. J' ai donc ici le nom, comme le nom de cette catégorie, et ce sera tableau. Et ce tableau, par exemple, maintenant la valeur par défaut de celui-ci est vide, puis je définit l'icône et l'icône aussi bien. Elle est vide lors de l'initialisation de cette police. Et aussi, nous avons besoin d'une propriété qui s'appelle la couleur. Je vais vous montrer plus tard comment utiliser le sélecteur de couleurs pour ramasser une couleur et implémenté et inséré dans la base de données. Parce que, comme vous vous en souvenez, notre catégorie a aussi une couleur. Mais maintenant, je suis juste de commencer simple que possible. Donc, nous ne laissons que le nom et l'icône. Donc maintenant ce formulaire, s'attendant à ce qu'il ait le nom et l'icône à l'intérieur. Et cela peut être dans le modèle HTML. Mais comment on peut dire, d'accord, vous, ce contrôle, vous êtes lié à ce groupe de formulaires. Nous pouvons spécifier cela par une propriété qui est appelée nom de contrôle de formulaire. Et ce nom de contrôle de formulaire aura le même nom que j'ai spécifié dans le groupe de formulaires. Donc ici, je dois aussi avoir le nom. Donc ici, je dis que, que cette entrée et ce champ est exactement suivre le nom de la catégorie. La même chose que je fais aussi pour l'icône. Donc, je spécifie ici à nouveau icône. Donc, de cette façon, j'ai connecté le formulaire. Avec la forme réactive, qui est ici. Ok, pourquoi on fait tout ça ? Voyons maintenant comment lier les données et lire à partir des entrées. Maintenant que tout notre bouton créer, qui est maintenant venu. Nous devons donc lier une fonction à ce bouton. Quand je clique dessus. façon dont nous le faisons est très simple. Je vais au modèle HTML, je vais sur le bouton, puis je dis qu'une clique. Et puis je dis sur Soumettre par exemple, ceci n'importe quelle méthode que vous pouvez définir, n'importe quelle méthode que vous voulez pour ce bouton et nous ne pouvons pas tester cette méthode. Donc, je vais ici et fais le fichier TypeScript que j'ai défini à partir d'énergie dessus. Je définit une méthode qui est appelée onsubmit. Console enregistrons quelque chose comme par exemple, quelque chose comme je suis le bouton. Donc, ici, nous avons le bouton qui est cliqué et il va consigner pour moi dans la console je suis bouton. Lorsque je clique dessus, nous avons besoin solide pour enregistrer aussi le modèle. Donc quand je clique dessus, je l'ai fait, je suis le bouton. Ok, nous allons lier les données maintenant. Nous devons donc avoir un moyen de lire les données que j'ai saisies ici. Et puis je les ai mis dans la console. Comment peut-on faire ça ? abord, nous devons aller à la TA est déposée et onsubmit méthode, steve of ion en bas je dis cette forme de point, que nous construisons déjà, des contrôles de points. Et puis je spécifie le champ, par exemple, nom. Et puis je dis valeur. J' ai donc besoin d'avoir la valeur de ce champ. La même chose que je fais aussi pour l'icône. Donc, je vais ici, sauver, et puis je crée, et je vois que j'ai vide parce que je n'ai rien spécifié. Je spécifie ici. Et je verrai que j'ai eu les données. Donc, je dirai que la catégorie est la santé. Et aussi l'icône est, par exemple, la santé de l'icône. Donc, quand j'enregistre ou clique, je verrai que j'ai obtenu les données. Donc maintenant, nous devons lire ces données et les mettre dans la base de données. Mais d'abord, faisons un peu de validation. Par exemple, comme vous l'avez vu ici, que lorsque je mets une valeur vide, je vois que je n'ai reçu aucune erreur et les données sont envoyées. J' ai donc besoin de montrer à l'utilisateur que vous ne pouvez pas envoyer, par exemple, le nom de Mt et l'icône vide. Alors faisons ça. Il est très simple que lorsque nous créons le groupe de formulaires ou le générateur de formulaires, nous devons spécifier que ce champ est requis. Et comment on fait ça. Nous le faisons d'une manière que nous appelons une bibliothèque appelée validateurs. Et ce validateurs a une propriété qui est appelée obligatoire. Et aussi il a une autre propriété comme max ou max length ou e-mail, etc Pour l'instant ce dont j'ai besoin est seulement un requis. Ce champ sera donc obligatoire. Je ne peux donc pas soumettre le formulaire seulement quand il est plein. Donc, quand seulement quand l'utilisateur a mis des données dans cette zone de texte, Ok, maintenant si je clique, je vois que je peux toujours soumettre. Par exemple, faisons-le de telle sorte que si le formulaire n'est pas valide, ne consignez rien sur la console. Mais quand c'est valide, alors la console connecte pour moi le nom et l'icône. Alors comment on peut faire ça, c'est très simple. Je dis que si ce formulaire est valide ou non valide, alors ne faites rien lorsque vous cliquez sur le bouton. Alors revenez. Sinon, connectez la console et faites le nom et l'icône. Parce que si vous savez que lorsque je clique sur retourner ou quand j'ai écrit ici, tout après ne sera pas exécuté. Donc ici, je sauve. Et puis je vois que je n'ai pas de lignes vides. Mais quand je mets des données, on voit qu'on a les données. Donc, à partir d'ici, nous garantissons que le formulaire est vraiment valide ou non. Mais qu'en est-il de l'affichage d'un message à l'utilisateur ? Comme ici, par exemple, nous disons que leur nom est requis lorsqu'il soumet des données vides. Donc on ne peut pas faire ça très facile. Nous allons juste au modèle et après l'entrée, nous ne pouvons pas avoir un autre élément qui est appelé petit. Et ce petit a du verre, qui est appelé être invalide. Et cette classe est livrée avec Prime NG. Et à l'intérieur de cela, nous pouvons définir ce que la méthode sera pour l'utilisateur. Par exemple, le nom est requis. Je sauve. Et nous verrons que cela est toujours affiché. Et ce qui est un problème pour moi. J' ai besoin juste quand il n'y a rien dans ce champ, je veux afficher ce message. Mais d'abord, nous voyons que ce n'est pas là à la, parce que je pense que la classe est mal. On peut le changer en erreur. Et nous verrons que ça parle. Oui. Donc maintenant, nous avons une lecture. Basé sur la classe d'erreur, P, classe d'erreur. Donc, ici, nous devons spécifier quand il sera affiché. Donc, comme vous le savez dans Angular, il y a de l'énergie si c'est le cas dans ng-si je dis quand le point contrôle le nom du point de forme est invalide, alors affichez ce message. point de formulaire contrôle le nom du point, point non valide. Ensuite, affichez ce message. Donc maintenant nous l'avons invalide, mais quand je mets du texte, je vois qu'il a disparu. Donc maintenant, comme vous le voyez ici, montrer et cacher des choses. Mais la question ici que quand je vais à la catégorie je vais savoir que je vois directement que le nom est nécessaire. Je ne veux pas surprendre l'utilisateur directement avec des erreurs. Je veux juste lui montrer l'erreur quand il clique sur Créer et il a un champ vide. Alors comment on peut le cacher en premier. Donc, nous devons vérifier si l'utilisateur a cliqué sur le bouton ou savoir comment nous pouvons le faire c'est très simple que je vais ici au fichier ts et je dis que c'est soumis est une variable où je peux définir toujours placer vos variables, toujours en haut avant le constructeur, puis le constructeur, puis l'initialisation. Et je vais vous parler aussi des méthodes privées. Donc, voici le type booléen soumis, et il a une valeur par défaut qui est false. Donc, au début, le forum n'est pas encore soumis. Ici, j'ai une faute de frappe ou ont soumis. Et puis maintenant, nous pouvons aller au bouton sur soumettre et IC d'abord, ce point est soumis est vrai. Donc, ici, nous avons le soumis est vrai. Donc, je peux dire maintenant que lorsque cette erreur est ng-si invalide et que le formulaire est soumis, alors montrez-moi l'erreur, mais ne soumettez rien, alors ne le montrez pas. Donc ici, au début, nous n'avons rien. On n'a pas de flèches. Mais quand j'ai ça, d'accord, je n'ai aucune erreur. Je peux me soumettre. Mais quand je le vide, je le revois. Retournons en arrière. Deux catégories l'entendront de nouveau de console. Donc, ici, nous disons que lorsque je soumets, je reçois cette erreur. Le nom est obligatoire. Donc je dois sentir quelques données ici. Donc de cette façon, je montre que c'est étranger requis. Faisons un refactoring rapide. Donc, tout d'abord, je ne veux pas avoir dans mon modèle HTML très long nom. Donc, je peux le faire et je peux faire ce type ici dans une variable. Donc, c'est très facile. Vous pouvez utiliser set et get. Donc, comment nous pouvons faire cela, nous pouvons définir, par exemple, obtenir la forme de catégorie sera une méthode et il retournera pour moi cette forme de points contrôles de points. Donc, quand je veux accéder aux contours de ce formulaire, je dis juste ce nom de point ou ce formulaire de catégorie, icône, etc Donc de cette façon je peux accéder et remplacer aussi cela. Donc, je peux dire ici, pas de contrôles de forme, mais de catégorie 4. Alors je le sauve, je teste tout. Nous avons tout qui fonctionne bien. Donc maintenant, nous devons aussi le mettre pour l'icône que je vais ici. Aussi, nous devons copier la même chose. Je dis que cette icône est nécessaire. Et ici, au lieu du nom, je dis l'icône. Donc maintenant, nous avons l'icône et les champs de nom sont nécessaires et nous sommes en mesure de lier les données et de les voir dans le journal de la console. Dans la prochaine conférence, je vais vous montrer comment envoyer ces données à la base de données afin que nous ne puissions pas les voir également sur notre table des catégories. Ce que nous avons ajouté ici. 98. Ajoutez des données de catégories envoyez des données à la fonde: Maintenant, envoyons les données au back-end. J' ai donc ici un nom et une icône, et je vais créer une catégorie dans le back-end. Alors, comment peut-on faire ça ? Tout d'abord, nous avons tout recueilli. Donc, nous avons ici les données, nous avons collecté, l'objet, nous avons recueilli le nom et l'icône. Donc, maintenant, nous avons besoin d'un service aussi. Si vous vous souvenez, nous avions un service pour obtenir les catégories. Maintenant, nous avons besoin du service pour ajouter les catégories. Donc, ce dont nous avons besoin est d'importer le service de catégorie et ajouter les catégories ajouter la méthode de catégorie. Donc, d'abord, nous allons l'importer service de catégorie privée. Et puis je dis catégories service. Donc, il sera important automatiquement, comme nous le voyons ici à partir des produits. Et nous devons y aller et définir aussi notre méthode. Donc ici, d'une certaine manière, je dirai que si c'est invalide, puis retournez, sinon, utilisez le service et trouvez ajouter des catégories. Mais maintenant, nous ne l'avons pas encore défini. Allons-y et faisons-le. Pour aller vite dans, à l'intérieur de ces fichiers est qu'il est si facile que vous avez juste à appuyer sur Contrôle et p. Et puis il va ouvrir pour vous tous les fichiers. Vous pouvez les servir par nom, puis vous pouvez dire catégories, service, puis vous sauterez directement au fichier. Donc, c'est comme si ça vous donnerait plus de productivité. Ne cherchez pas le fichier dans la liste des fichiers. Donc je veux que vous ayez créé la gloire et qu'ils créent la catégorie. Nous devons également envoyer les données. Nous devons donc envoyer les données de la catégorie. Donc, je dois dire que la catégorie a une catégorie de type. Donc, je veux envoyer la catégorie elle-même au backend par cette méthode. Et cette méthode retournera cela si le point de requête HTTP post, parce que nous publions des données. Et ces données auront d'abord l'URL. Comme vous le savez précédemment, nous avons cette URL ici. Nous avons donc la même URL pour poster l'autre comme nous l'avons vu dans le back-end. Et aussi, nous devons spécifier les données. Donc les données, je les ai eu d'ici, je dis, mettre Suivez-moi cette catégorie, c'est tout. Donc maintenant, nous avons créer la catégorie. Je reviens au formulaire et puis je verrai que dans le produit ou la catégorie services, nous avons créé la catégorie ce dont j'ai besoin pour transmettre nos données. Nous devons donc d'abord créer une constante, appelez-la catégorie. Cette catégorie a une catégorie de type, et cette catégorie aura le nom de propriété d'où elle provient, à partir de la forme de catégorie, nom de point, valeur de point, comme nous l'avons vu précédemment. Et consoles les consigner et l'icône. Donc, cette catégorie forme l'icône, cette valeur. Donc, de cette façon, j'ai créé un objet. Ici. Ce n'est pas un point-virgule, mais c'est une virgule parce que je crée un objet , puis je vais envoyer cette catégorie à ce service. Alors essayons ça. Maintenant. Je vais à Create. J' ajoute, par exemple, la santé et vu pour l'icône, je clique sur Créer. Et je vois que rien ne se passe parce que aussi si je vais au réseau, je vois que le front end n'envoie aucune demande. C' est pourquoi parce que je vous ai dit que nous devons nous abonner à tout ce qui est observable du serveur de données me renvoie. Comme vous vous souvenez en l'entendant, que ce bien revient pour moi observable. La même chose, le patron est également de retour observable. Et comme nous l'avons vu précédemment dans le back-end, que le backend m'envoie, par exemple, lorsque je crée une catégorie, m'envoie que la catégorie est ajoutée avec succès. Donc, pour cela, nous avons juste besoin de nous abonner à ces données afin que je ne puisse pas utiliser le service tel qu'il est ici. Donc j'ai juste besoin de dire abonnez-vous. Donc, quand nous nous abonnons et de cette façon, cela signifie que vraiment me donner une donnée d'exécution. Donc ici, j'ai la santé et puis P santé. Et j'observe ici le réseau. Lorsque je clique sur Créer, je vois que la catégorie est créée et ajoutée. Et quand je vais à leur liste de catégories, je verrai qu'il est ajouté ici. Alors rappelez-vous juste que vous devez toujours vous abonner, parce que si vous ne vous abonnez pas, C'est comme si vous appelez la méthode, mais vous n'avez rien fait. Donc, cette requête HTTP vante ne sera pas exécutée uniquement lorsque vous vous abonnez à elle. Ok, j'ai remarqué quand j'ai ajouté ceci, je n'ai pas montré à l'utilisateur, ok, Ceci est ajouté avec succès, ou il a eu une erreur ou quelque chose. Nous devons interagir avec l'utilisateur d'une manière ou d'une autre. J' ai besoin d'ajouter, par exemple, une notification dit que, ok, La catégorie est ajoutée avec succès et revenir en arrière automatiquement. Deux catégories, table en fin de prime vous, il y a un module appelé toast. Et ce toast, vous pouvez toujours afficher la notification à l'utilisateur, quelque chose comme ça. Ainsi, vous pouvez toujours afficher une notification à l'utilisateur et ils disparaissent automatiquement après un certain temps. Nous devons donc le mettre en œuvre. Donc, nous devons d'abord importer le module. Comme toujours nous le faisons. Donc ici, nous avons besoin du module. Je vais à l'UX des modules. L' un d'eux ici, comme nous l'avons dit précédemment, Mettons les modules de base d'abord sur le dessus. Donc, pour ne pas avoir de problèmes. Et puis nous avons aussi les modules UX sont regroupés ensemble. Donc, ici, nous avons un module de toast. Ok, gentil. Tout est importé. Aucun problème si vous obtenez cette erreur d'une manière ou d'une autre que vous devez redémarrer le frontal. Donc, lorsque vous obtenez cette erreur, vous avez juste besoin de redémarrer l'avant et encore, et il disparaîtra. Et pour utiliser cette notification, il suffit d'appeler P toast. Donc, quand nous allons ici et copier cette balise HTML et nous allons au formulaire ajouté en haut avant le formulaire, je dis Pete perdu. Donc je le garde ici, et ensuite on doit porter ce toast. Donc, comme nous l'avons dit, quand je clique sur Créer et tout a réussi, alors je vais déclencher cette notification de toast. Alors comment on fait ça ? Si nous continuons dans la documentation, nous devons appeler un service qui s'appelle Message Service. Et ce serveur de messages aura ADD. Ensuite, vous devez spécifier leur couleur, qui est le succès, ainsi que le message de service de résumé et le détail du message. Importons donc le service. Je vais au service de message privé. Je vais aussi ici au formulaire. Et aussi, nous avons ici beaucoup de méthodes privées. Donc, ici, nous avons aussi le service de message. Vous avez donc juste besoin de l'importer à partir de l'API prime end. Après cela, tout fonctionne bien. J' ai donc besoin de savoir une fois que leur catégorie est ajoutée aux taxes, car je veux afficher un message de réussite. Et quand il y a une erreur s'est produite, alors j'étais un message échoué. Donc, comme vous vous souvenez, nous avons dit que créer la catégorie sera observable et il retournera pour moi quelques données. Donc, comme vous le voyez ici, que ce service se vanter est de retour observable avec les données. Donc, ce que ces données, ce serait la catégorie elle-même, comment nous avons créé dans le back-end. Donc la nouvelle catégorie. Donc ici, je vais avoir un poste observable. Donc ici, je vais avoir un type de retour est observable mais pas un tableau observable, ce sera une catégorie seule, pas un tableau. Donc, en revenant au composant lui-même du formulaire, je vois que si j'obtiens une réponse, alors j'affiche un message de réussite. Et si je ne vois aucune réponse ou je reçois erreur à l'arrière, puis j'affiche un message d'erreur. Alors comment nous pouvons faire ça, la réponse, je comprends. Et puis je dirai ici que l'affichage de cette gravité du service de message. Et puis je dirai le succès et le résumé du message et le détail de celui-ci. Donc ici, je vais dire que j'ai d'abord le message de succès et le type est Exemple, succès ou le résumé est le succès. Et que je peux dire catégorie ou comme message pour les gens ou pour l'utilisateur, catégorie est créée. Et nous avons aussi, quand nous obtenons une erreur, alors nous devons afficher un message d'erreur. Alors, comment nous pouvons faire cela après ce crochet, nous avons une virgule et nous disons cette erreur, et cette erreur sera une fonction. Il retournera pour moi le message d'erreur que je vois dans mes données. Donc je vais faire la même chose ici. Je vais avoir celui-là. Je dirai que ce point .me ajouter cyber t est une erreur. Et puis je vais afficher, par exemple, notre catégorie n'est pas créée. Mais d'abord, nous devons ajouter quelque chose qui est très important. C' est le modèle, le modèle de l'hôte lui-même. Nous avons donc ici le modèle HTML. Nous allons regarder normalement les ajouter au haut du modèle. Donc, nous économisons, nous revenons à notre application et nous allons à New. Nous recevons toujours des erreurs. C' est une erreur d'injecteur car nous utilisons service de message et il n'est pas fourni dans mon module d'application. Donc, d'abord, nous allons au module de l'application à nouveau. Et dans les fournisseurs, comme nous l'avons dit précédemment, nous devons ajouter le service de messagerie ici. Et puis nous devons l'importer. Et nous économisons, et nous voyons que nous avons, tout fonctionne bien. Alors maintenant, ajoutons une catégorie et nous voyons si nous obtenons le message de toast ou non, qui est appelé, par exemple, les ordinateurs. Et puis l'icône sera, par exemple, nous pouvons sélectionner n'importe quelle icône, PCI, PCI, par exemple. Je ne sais pas s'il existe, mais on ne le verra pas plus tard. Donc, comme nous voyons ici que nous avons une autre erreur. Cela parce que nous n'avons pas inclus le module d'animation du navigateur. Si vous vous souvenez, dans la boutique NGI nous avons ajouté ce module, mais ici nous ne l'avons pas ajouté. Nous allons donc l'ajouter à nouveau à notre module. Donc, si vous vous souvenez, nous avons ici un module de navigateur. Nous devons donc importer le, aussi le module d'animation du navigateur. Et ce sera important. Ici. Nous disons module de navigateur, module d'animation d'Angular, puis navigateur de plate-forme. Et après le navigateur de plate-forme, nous disons des animations. Donc, ici, nous avons importé le module d'animation. Alors créons à nouveau cette catégorie. Nous devons dire ordinateur et nous pouvons dire PCI, PCI par exemple. Et nous créons, et nous voyons que la catégorie est créée. Et vérifions notre table. Nous voyons qu'il est vraiment créé et cela créé ici parce qu'il est créé et ensuite nous n'avons pas reçu le message. C' est pourquoi il est créé ici deux fois. Donc, faisons une erreur pour voir si l'erreur fonctionne vraiment. Alors je vais à leur service, que nous avons créé. Faisons une erreur dans l'ABI par exemple, nous pouvons dire avec une lettre comme celle-ci. Donc, quand nous ajoutons une catégorie, nous revenons à nouveau à la nouvelle. Je dirais encore un ordinateur. Et nous disons PI BC je crée, et puis je reçois la catégorie d'erreur n'est pas créé parce que le dos et répondre à 4.4 introuvable. Alors remettons-le et tout fonctionne bien. Et nous avons la catégorie créée. Prenons l'exemple. Remettez l'utilisateur à la table des catégories automatiquement après avoir créé la catégorie avec succès. Alors, comment peut-on faire ça ? Je vais de nouveau au composant de formulaire de catégories. Après le succès, j'affiche le message. Je vais définir une minuterie et ce délai une fois qu'il est fait, puis nous revenons aux catégories. Donc, nous devons d'abord avoir un timeout, timeout ou vous pouvez l'utiliser à partir de la note, notre x js. Et vous pouvez, à l'intérieur de ce dimer, spécifier combien de millisecondes vous voulez l'exécuter. Et puis je dis de promettre. Donc, les diplômes, comme après qu'il a été exécuté, après deux secondes, alors ce que vous voulez faire, disons, par exemple, fait. Donc, pour revenir aux catégories, nous devons utiliser un autre service qui est appelé emplacement. Et cet endroit est un service. Vous pouvez l'importer facilement. Donc, ici, nous avons aussi un autre service. On peut l'appeler comme ça privé et on l'appelle « lieu ». Et cet emplacement est de type hors emplacement, cet emplacement de Angular commun. Ok, Donc, comme nous le voyons ici, nous avons des modules de noeud, angulaire commun. Donc, nous avons importé et nous voyons que c'est vraiment de Angular commun. Donc, ici, nous utilisons aussi cette méthode ou ce service. Nous disons cet emplacement point et puis je recule. Donc je veux juste retourner où j'étais avant. Nous sauvegardons tout comme un style. Encore une fois. Nous ajoutons, par exemple, un autre avec disons par exemple, je veux ajouter de l'électronique. Et puis l'icône sera PI électronique. C' est une icône est juste aléatoire, nous devons les réparer plus tard. Donc, j'appuie sur Créer. Et après deux secondes, nous sommes retournés automatiquement. Donc, comme nous le voyons ici, que tout fonctionne bien. Nous avons que ces deux, nous avons les messages et nous avons également créé des catégories. Dans la prochaine conférence, nous allons voir comment supprimer une catégorie et comment modifier la catégorie. 99. Écrivez une catégorie de dialogues de confirmation: Ok, Dans cette conférence, je vais vous montrer comment supprimer une catégorie et dialogue de confirmation pour l'utilisateur quand il voulait supprimer une catégorie. Tout d'abord, nous revenons à notre tableau des catégories. Nous devons ajouter ici quelques boutons d'action pour chaque catégorie, comme un bouton pour supprimer et botton pour modifier. Nous revenons donc à notre tableau de liste des catégories. Et si vous vous souvenez, nous avons ici l'en-tête de la table et les champs. J' ai donc besoin ici d'abord d'avoir un autre en-tête ou une autre colonne sur l'en-tête. Gardons-le vide. Et ici, je veux ajouter deux boutons, un pour l'édition et un pour la suppression. Donc, au lieu de cette icône de catégorie, nous l'enlevons et nous ajoutons ici deux boutons. premier est un bouton que j'ai copié depuis le haut. Il aura une route ou un danger. Nous pouvons l'appeler comme dépendre de ce que la classe que nous allons utiliser étiquette. On n'a pas besoin d'étiquette. Nous pouvons simplement le supprimer parce que nous avons seulement besoin d'icône pour ce bouton et le nom de l'icône, il ne sera pas plus ce sera PI, muguet et cette corbeille. Pour moi qu'il y a un lien de routeur de suppression. Nous ne voulons pas de lien de routeur, mais nous aurons besoin d'un clic. Nous ajouterons cela lorsque nous serons prêts à le faire. Il faut ajouter un autre bouton. Et ce bouton sera pour l'édition. Donc, nous avons ici un autre bouton, mais il n'aura pas de poubelle, il aura une icône appelée crayon. Et comme vous le voyez ici, nous avons un crayon PI et ensuite nous économisons. Et nous verrons que notre application a été mise à jour. Mais ici, nous devons ajouter plus de distance entre ces boutons. Je vais ajouter ici une classe. Je dirai p moins marge, non ? Ensuite, pour ajouter nous sauvegardons et il aura cet espacement. Alors vérifions comment on peut colorer les boutons. Si vous vous souvenez, si nous allons à prime NG, nous allons à nouveau sur les boutons et le bouton que nous avons une couleur différente. Donc, ces couleurs sont appelées, par exemple, un danger. Si vous voulez voir tout le code, vous allez simplement à la source et vous verrez toutes les couleurs ici, tout le code qui y est écrit. Donc, utilisons deux couleurs. Tout d'abord, nous pouvons utiliser un danger pour supprimer ou supprimer. Et aussi, nous pouvons utiliser, par exemple, succès avec un vert, qui est pour l'édition. Donc, nous économisons, revenons à l'application, mensonges, nous avons tout va bien ici. Donc, nous allons avoir un événement click sur ce bouton. Donc, tout d'abord, nous pouvons ajouter la méthode ici, qui est appelé onclick ou click. Ensuite, ici, nous avons, par exemple, Supprimer la catégorie. Et je veux passer aussi l'ID de catégorie que je veux supprimer, donc je peux dire ID de point de catégorie. Donc, de cette façon, je garantis que je supprime le bon ID. Cette méthode sera déclarée dans le fichier TypeScript. Je vais au fichier TypeScript de la liste des catégories, et j'ajoute une nouvelle méthode après les ONG dedans. J' appelle cette catégorie DDD de méthode, et il a l'ID de catégorie en tant que paramètre, qui est une chaîne. Donc, pour cela, nous devons utiliser service de contiguité de service de catégorie supprimera pour moi une catégorie à travers le back-end. Donc, pour cela, nous devons créer le service qui supprime pour moi une catégorie. Alors nous allons à notre service. J' ai dit catégorie service. Et j'ai ajouté ici à la catégorie de leads, qui accepte l'ID de catégorie comme une chaîne. Et il retourne observable peut-être de la catégorie principale ou peut-être par exemple, seulement un objet sans rien spécifier. Et aussi la requête HTTP sera supprimée. Donc, ici, nous avons également renvoyé l'objet parce que si vous vous souvenez dans le back-end, je passe l'ID à l'URL, puis il sera supprimé. Donc, comme vous le voyez ici, nous avons ici les backticks et aussi l'URL. Et puis j'ai utilisé l'ID de catégorie, qui est passé par cette méthode. Nous économisons sur notre composant. Nous utiliserions le service de catégorie. Donc, nous disons cela cependant, catégorie service Dot Delete catégorie. Et puis je passe l'ID de catégorie, que j'ai obtenu à partir du modèle HTML. Mais comme vous le savez, cette suppression ne sera pas exécutée. Donc, je vais ici, je dis souscrire, et puis je suis allé pour la réponse. Et cette réponse, je peux afficher un message de réussite ou un message d'échec. Donc, pour cela, nous devons avoir le service de message que nous avions précédemment, et aussi le message de toast. Donc nous avons ici le toast, nous le copions à partir du formulaire. Et nous avons également ajouté ici en haut de la liste dans la liste des composants. Donc, ici, nous avons celui-ci et nous appellerons à nouveau le service de messages. Alors, c'est quoi celle-là ? Nous allons le copier à nouveau dans notre composant ou composant de liste de catégories, et nous l'appelons, et nous disons exactement les mêmes messages que nous voulions afficher à l'utilisateur. Donc, je veux quand il y a un certain succès ISA que le succès et la catégorie ont été supprimés. Donc, je dis ici les messages ou la catégorie de succès de service de message est supprimée. Et aussi quand il y a une erreur, je veux montrer à l'utilisateur qu'il y a un problème. Nous ne pouvons pas supprimer la catégorie. Donc, comme ici, les crochets après, avant de mettre fin à l'abonnement, j'ajoute l'erreur ISA, la catégorie n'est pas supprimée. Donc nous économisons, nous avons tout fonctionne bien maintenant. Et quand j'essaie de supprimer, par exemple, supprimons celui qui est doublement situé. Et puis nous voyons que cette catégorie est supprimée. Mais il n'est pas supprimé de la liste seulement quand je vais à une autre page, par exemple, au tableau de bord et revenir à la catégorie, alors je verrai que les catégories sont vraiment nécessaires. Donc, quand je veux supprimer quelque chose, je veux actualiser cette table. Donc, c'est très simple. On appelle le service de nouveau. Donc, sur le succès de la suppression, nous pouvons dire aussi à nouveau appelé pour moi cela. Mettons donc le service de catégorie d'obtenir à nouveau des catégories dans une méthode. Nous appelons cette méthode, par exemple, privée car elle est seulement à l'intérieur de ce fichier ts, elle n'est utilisée nulle part ailleurs. Donc, nous pouvons dire Get catégories. C' est une méthode. À l'intérieur de cette méthode, j'appelle ce service. Donc, d'abord, j'appelle la méthode sur l'ONG sur Edit appelant ce point getCategories. Et aussi je vais après un message réussi ou une réponse réussie. Je veux avoir ces bonnes catégories à nouveau. Donc, nous économisons, nous allons à nouveau à l'extrémité frontale, essayez de supprimer quelque chose. Joli. Nous avons actualiser qu'ils seront, et nous avons les nouvelles données comme Supprimer à nouveau. Nice, il est supprimé et nous avons actualisé les données. Mais pour moi en tant qu'expérience utilisateur, j'ai peur que lorsque je clique par erreur sur cela et qu'il soit supprimé. Donc, je veux afficher une boîte de dialogue de confirmation à l'utilisateur. Donc, quand il voulait supprimer quelque chose, alors il obtient confirmation. S' il confirme vraiment la suppression ou non. Prime N G a également un composant appelé dialogue confirmé. Et quand vous allez confirmer la boîte de dialogue et l'essayer, par exemple, celui-ci, il y a un message de confirmation avec une icône et du texte. Oui et non. C' est exactement ce dont nous avons besoin pour la réunion et confirmation pour notre suppression de la catégorie. Alors, comment nous pouvons utiliser ce composant, nous pouvons d'abord aller à la documentation et nous verrons que nous devons importer deux modules, ou un module et un service. Donc, le premier module est confirmé module de dialogue. Nous pouvons copier celui-ci et aller au module d'application où nous importons le module ou le module UX. Et puis nous l'ajoutons à nos modules UX. Et nous avons aussi besoin d'importer un service de confirmation. Et ce service, nous allons l'utiliser dans nos catégories, le moins composant. Mais d'abord, nous devons utiliser aussi du HTML. J' ai donc besoin de copier ce code. Je dirai que nous avons ici confirmation et icône et aussi un dialogue confirmé. Ou il est préférable d'utiliser l'exemple exactement qui est ici, car il a plus de propriétés, car comme vous le savez, chaque composant a beaucoup de propriétés. Donc, lorsque vous trouvez la propriété que vous voulez ou l'exemple que vous voulez, utilisez simplement la même chose. Donc, quand vous voulez voir l'exemple de ceci, confirmez, il suffit d'aller à la source et vous verrez ici l'exemple exact. Donc, comme nous le voyons ici, que dans la base, il a utilisé cette balise HTML p confirmation dialogue, et il lui a donné un peu de style et aussi des baies Z, index et un style pour le bouton. Pour qu'on puisse copier celui-là. Allez à la liste des catégories, et nous le mettons, par exemple ici à la fin. Et maintenant, nous devons avoir le service, alors comment il utilise le service de confirmation de service. Donc je vais voir qu'il est allé, il a cliqué sur le bouton, il exécute une méthode de confirmation. Et cette méthode aura ces propriétés. Donc, ce service de confirmation a une confirmation et il a quelques options comme un message, en-tête, icône, et aussi lors de l'acceptation et lors du rejet. Donc, quand j'accepte, je supprime la catégorie et affiche un message de succès. Mais quand je rejette, je ne fais rien. Pour qu'on puisse copier cette partie, tout ça. Et nous allons à notre liste des catégories. Donc, lorsque l'utilisateur clique sur la catégorie de besoins, tout d' abord, nous voulons lui montrer un dialogue. Et ce dialogue viendra exactement du service de confirmation. Mais d'abord, nous devons importer le service de confirmation, comme nous l'avons vu précédemment. Nous avons donc besoin de leur service de confirmation, qui est importé de l'énergie première. Nous avons donc ici le service de message et aussi le service de confirmation. Et lorsque vous appuyez sur l'espace de contrôle ou sur le point de contrôle, vous obtenez l'importation automatique. Maintenant, revenons à la méthode, nous allons voir que, que nous avons le message de confirmation. Donc, nous pouvons remplacer ça par quelque chose comme, voulez-vous supprimer cette catégorie ? Et aussi l'en-tête sera Supprimer catégorie. C' est donc comme un titre de cette boîte de dialogue de confirmation. Et nous donnons le triangle d'exclamation comme une icône pour montrer que c'est un danger. Donc nous déplaçons ce graphique à barres, où est ce service de catégorie ? Et nous copions tout avec la flèche elle-même, et nous le plaçons à l'intérieur de l'acceptation. Joli. Donc maintenant, nous avons la boîte de dialogue de confirmation, le service de dialogue de confirmation, puis nous avons l'erreur et les messages. Mais en rejetant, je ne ferai rien. Je vais juste le garder comme ça pour qu'on n'ait rien à faire avec ça. Nous économisons. Et comme je vous l'ai dit, peut-être que vous verrez cette erreur. Il suffit de redémarrer l'extrémité avant et vous vous en débarrasserez à l'extrémité avant. On l'essaye. Nous verrons que le service de confirmation n'est pas fourni. Donc, nous allons au module de l'application, et encore une fois, nous devons fournir le service de confirmation comme nous l'avons vu avec le service de messagerie. Donc, nous revenons à l'extrémité frontale et nous essayons de supprimer certaines catégories. Je dis de supprimer celui-ci, ok, on a la catégorie des pistes. Voulez-vous obtenir cette catégorie ? Et puis quand je clique sur Oui, je vois qu'il a été supprimé. Et aussi la table est rafraîchie et j'ai reçu un message. Mais quand je clique maintenant, rien ne se passe. 100. Modifier une catégorie: Ok, dans cette conférence, je vais vous montrer comment modifier une catégorie. Auparavant, nous avons fait le Supprimer. Maintenant, nous voulons faire l'édition. Donc, nous voulons rendre cette catégorie d'édition fonctionnelle bouton sera exactement la même forme pour une nouvelle catégorie. Juste la différence que nous remplissons les données de la catégorie déjà ici. Et nous avons également besoin de changer ce titre pour être modifier la catégorie et aussi ce bouton pour être, par exemple, mettre à jour. Alors commençons par commencer. Donnons une fonction que nous avons 20. Cliquez sur cela, nous allons à la composante de la nouvelle. Donc, tout d'abord, nous devons créer ces méthodes. Donc, nous allons à nouveau, deux catégories, composant de liste. Voici les catégories moins composant. Et sur la mise à jour du bouton, nous avons eu ici, supprimer, et aussi nous avons eu une mise à jour ou éditer. Nous devons ajouter une fonction. Donc, ce sera exactement la même chose que nous avons fait avec la suppression. J' ai donc besoin d'avoir un clic, et ce clic sera la catégorie de mise à jour. Et je veux passer aussi. Ils ID de catégorie parce que j'ai besoin de l'ID pour récupérer les données de la catégorie. Donc, ici, nous tapons l'ID de catégorie. Nous revenons au fichier TypeScript, nous allons à la liste des catégories, et nous ajoutons une nouvelle méthode. Nous l'appelons catégorie Mise à jour. Donc voici la catégorie de mise à jour, puis j'ai l'ID de catégorie, qui est une chaîne. Et cette méthode me conduira à la forme de catégorie. Donc, il va naviguer pour moi deux catégories pour, donc de cette façon, nous avons besoin d'un navigateur. Donc, nous avons besoin d'un moyen pour que lorsque nous cliquons dessus, il nous navigue vers ce composant. Bien sûr, vous pouvez le faire et loin aussi dans le modèle HTML, vous n'avez pas besoin d'avoir un événement click, mais vous pouvez également le faire directement comme un lien de routeur, nous l'avons fait précédemment avec un lien normal. Mais je veux vous montrer aussi comment naviguer quand vous en avez besoin. Le fichier TypeScript dans Angular, il y a une classe qui est appelée routeur. Nous pouvons également l'importer dans le routeur constructeur. Et c'est le routeur, et il vient du routeur angulaire. Et quand nous voulons utiliser ce routeur, nous allons à nouveau pour mettre à jour la catégorie. Et je dis ce point routeur de point naviguer par URL. Et ici, je spécifie l'URL que le routeur me prendra. Donc, ce sera pour le nouveau composant, qui est le composant de formulaire. Et ici, nous disons, nous avons des arrières. Nous, nous disons la forme de catégorie. Et puis je peux spécifier l'ID que je veux passer à ce lien. Et puis nous disons ici que l'ID de catégorie est cet ID de catégorie. Donc, je veux aller à ce lien comme formulaire de catégories ISA, puis je passe l'ID où je veux naviguer. Mais la question ici que nous n'avons pas ce lien, nous avons seulement comme le forum. Donc, quand je clique sur Nouveau, cela me conduira au forum, mais je n'ai pas quelque chose avec l'ID. Alors ajoutons cela au module de l'application. Nous allons au fichier du module d'application, et puis nous avons ici les routes. Nous aurons une nouvelle route, qui sera exactement la même que la nouvelle. Mais nous devons ajouter ici une pièce d'identité. Donc, lorsque vous affectez ceci avec ID ou n'importe quelle clé que vous voulez utiliser, alors il aura comme un paramètre, comme une variable. Ainsi, vous pouvez l'utiliser comme paramètre et en lire la valeur en angle. Et nous voulons également faire référence à la forme des catégories. Alors vérifions si tout fonctionne bien. Je vais tout enregistrer, donc tous les changements seront sauvegardés. Nous revenons à notre application, elle est mise à jour automatiquement. Nous cliquons sur éditer, nous voyons que tout va bien. Nous avons navigué vers la bonne URL. Et aussi nous avons ici l'ID, l'ID de leur catégorie, que j'ai cliqué. Donc, quand je clique sur celui-ci, j'aurai un ID différent. Lorsque je clique sur celui-ci, j'ai aussi un ID différent. Donc, sur la base de cet ID, je vais spécifier que ce forum est pour l'édition ou est pour l'ajout d'une nouvelle catégorie. Donc, pour cela, je vais à leur forme de catégories et définir une variable. Nous l'appelons le mode d'édition. Et ce mode d'édition obtiendra une valeur au début, ou par défaut sera false. Donc, ce n'est pas le mode d'édition par défaut, mais nous devons le faire comme mode d'édition lorsque nous naviguons pour éditer une catégorie. Ok, Alors comment je peux savoir que ce formulaire est en mode édition ou non, cela sera connu par s'il y a un paramètre après ce lien, alors je suis en mode édition. Et si je n'ai pas ce paramètre, je ne suis pas en mode édition. Alors, comment nous pouvons savoir que d'abord je créerais une méthode sur l'énergie sur édition. Je l'appelle, par exemple, ces points. Nous pouvons appeler cette méthode vérifier le mode d'édition. Donc, de cette façon, je vais vérifier à l'intérieur de cette méthode si je suis en mode édition ou non. Donc, définissons cette méthode. Descendez. Et si vous avez remarqué, je montre les méthodes internes. J' utilise le soulignement derrière eux et un drapeau les avec un privé. Alors j'ai besoin d'un moyen de lire les paramètres de leur lien, de l'URL. J' ai besoin de savoir s'il y a 3D ID ou non, comment nous pouvons le faire. Si vous vous souvenez, nous utilisons quelque chose appelé route. Mais ici, en automne, il y a quelque chose qu'on appelle la route activée. Et cela, nous pouvons l'utiliser à partir d'Angular pour savoir si nous avons un paramètre dans l'URL ou non. Alors appelons-le. Nous avons un privé ou un routeur. Et ce routeur, c'est ce qu'on appelle la route activée. Et cette route activée vient aussi du routeur Angular, ou c'est mieux, Appelons ça une route seulement. Nous revenons à notre méthode qui est le mode d'édition de vérification. Nous allons ici et nous disons ces points, point de route, params, comme les paramètres, vérifier pour moi les paramètres qui sont dans l'URL actuelle, puis souscrire. Donc, je veux m'abonner pour voir et observer le lien quand je vais à ce composant. Donc, vous vous souvenez, nous nous abonnons à observable. Et observable nous donne toujours une nouvelle valeur. C' est comme un battement de cœur, vous pouvez imaginer chaque fois qu'il vient avec une nouvelle valeur. Donc gaspiller sur l'agresseur ce qu'il clique quand il clique sur Ajouter venir à ce composant et il a ID ou paramètres en général dans leur lien, puis l'abonnement serait déclenché. Et puis je peux lire les paramètres qui viennent avec l'URL. Donc, pour lire ces paramètres, le retour d'abonnement pour moi, armes à feu, par exemple, vous pouvez définir une variable ici. Ensuite, nous avons la fonction flèche ouverte et la fonction flèche à l'intérieur. Je peux gérer ce que je veux faire. Donc, par exemple, s'il y a des paramètres, ID, s'il y a de l'ID à l'intérieur de ces paramètres, et ce sera exactement le même que j'ai défini dans un module. Donc ici, quand je dis ID, alors je dois aussi chercher ID. Mais si je l'appelle, par exemple, l'ID de catégorie, alors je dois ici aussi rechercher l'ID de catégorie. Donc, s'il y a un ID comme l'utilisateur a cliqué sur le mode d' édition et qu'il y a ID param dans le lien. Ensuite, faites le mode d'édition comme un vrai. Ok, donc maintenant nous sommes en mode édition, nous sommes sûrs que l'utilisateur a cliqué sur le bouton Modifier et nous lisons les valeurs qui proviennent de cet ID de catégorie. Parfait, Sauvegardons maintenant et voyons si nous pouvons aimer démarrage plus faible simple. Nous pouvons dire par exemple, allons changer ce texte pour être annonce est TD modifier lorsque j'ajoute une nouvelle catégorie. Et aussi éditer est Td d'annonce, où je suis en train d'éditer la catégorie air. Et aussi ce bouton aura ici mise à jour lorsque je mets à jour la catégorie, lorsque je suis en mode édition ou que je crée quand j'en crée une nouvelle. Alors faisons-le, c'est très simple. Donc, nous allons au modèle, modèle HTML, et si vous connaissez les conditions ternaires, C'est comme en ligne. Si c'est le cas, lorsque je définis cette entrée comme une liaison bidirectionnelle, alors je serai en mesure de lire les valeurs ici. Donc, par exemple, je peux voir des variables. Je peux prendre le mode d'édition s'il est possible de le changer ou non, ou de le lire en fonction de cela. Donc de cette façon, je peux être en mesure de lire le mode d'édition précieux. Donc, je dis comme était certainement conditionné la condition en ligne si, je dis le mode d'édition. Quand j'ai le mode d'édition. Puis pour moi ici, mettre pour moi ici, éditer la catégorie. Mais quand je n'ai pas le mode d'édition, alors faites-le comme ajouter la catégorie comme avant. Donc ici, nous avons spécifié en fonction de la valeur du mode d'édition. Si c'est vrai, alors c'est le mode d'édition. Mais quand c'est faux, c'est la catégorie ou l'ajout d'un nouveau mode catégorie. Sauvegardez-le et réessayez. Nous verrons que nous avons ADT catégorie, mais quand je retourne aux catégories, je clique sur Nouveau, je verrai que j'ai ajouter catégorie. Mais quand je vais ici et cliquez sur ce crayon, je vais voir que j'ai édition catégorie. Donc la même chose que je vais faire, c'est avec ce bouton. Donc, quand est le mode d'édition, puis faites-le comme créer, mais sinon faites-le comme édition. Donc, le bouton est déjà dans la barre d'outils et est-il là ? Donc, nous l'avons ici en tant que Create. Nous disons donc que l'étiquette sera disponible en fonction du mode d'édition. Donc, quand c'est le mode d'édition, alors donnez-moi comme mise à jour. Et quand ce n'est pas le mode d'édition, faites-le comme crée ou quand nous enregistrons, nous voyons qu'il a une mise à jour parce que je suis ou j'ai ID ici. Donc, quand je retourne à la catégorie. N' est-ce pas, que c'est Create. Retournez aux catégories, modifiez, puis c'est la mise à jour. Donc maintenant, nous avons fait comme changement tactique. Donc, nous avons seulement cet échange basé si j'ai ici un ID ou non. Alors maintenant, nous allons sentir les données qui viennent avec ce formulaire. Donc, nous avons besoin d'une API ou de l'Ecole qu'il va saisir pour moi cette contiguïté avec cet ID. Ensuite, je sens les données de cette catégorie à l'intérieur de ces champs de cette forme. Et bien sûr, tout cela sera en mode édition. Donc, quand nous revenons à notre fonction que nous avons créée ici, nous devons vérifier si nous avons une catégorie avec cet ID ou non. Donc, nous avons déjà ces params ID. Donc, je lis la pièce d'identité ici. J' ai donc besoin d'un service pour obtenir une catégorie par ID. Et nous avons déjà créé cela dans le backend. Si vous vous souvenez, quand je vais à la catégorie et je l'appelle par ID, suit par exemple, j'appelle celui-ci. Et j'ai mis une pièce d'identité après leur lien. Et quand j'envoie, j'obtiendrai cette catégorie à partir de la base de données, qui est exactement avec le détail comme le nom, l'icône et la couleur. Donc aussi, nous avons besoin d'un service. Donc, quand nous revenons à notre service, qui est le service de catégorie, nous devons avoir une catégorie get, catégories, mais une catégorie, donc ce sera la même. Mais ici, je passe l'ID de catégorie, qui sera une chaîne. Et aussi l'observable ont été retournés pour moi une seule catégorie, pas plusieurs catégories. Donc, je n'en aurai qu'un. Et à la fin, j'aurai ici l'ID de catégorie. Donc, je vais avoir ici comme plus l'ID de catégorie. Ou si vous le souhaitez, vous pouvez utiliser la fonctionnalité backticks. Donc, nous pouvons avoir ici cochez et aussi entendre coche et le signe du dollar, puis l'ID de catégorie Isaac. Donc, dans ce cas, nous avons l'ID de catégorie. Nous l'avons obtenu exactement avec ce service, mais nous devons renommer ceci et nous l'avons comme bonne catégorie. Revenons donc à notre formulaire. Donc on peut y aller, deux catégories se forment. Et puis je dirai cette catégorie de points, point de service get catégorie. Et cette catégorie acceptera l'ID de catégorie, qui est dans les paramètres. Donc, je vais dire params dot ID et puis m'abonner comme toujours. Alors je vais obtenir, d'accord, donc enquête. Et puis je ferai quelque chose. Je veux définir les champs de la catégorie pour être dans la forme avec cette catégorie que j'ai obtenue du back-end. Donc, si vous vous en souvenez, nous pouvons atteindre ces contrôles en utilisant ce formulaire de catégorie. Donc, nous disons cette forme de catégorie de points, nom de point, valeur de jeu de points. Donc, je veux définir la valeur pour cela. J' ai donc défini le nom du point de la catégorie de valeur. Donc, je reçois ici cette catégorie et j'utilise le nom de celle-ci, que j'ai obtenu du backend pour définir la valeur du champ, qui est dans ce contrôle. Donc, c'est très simple. Donc ici, nous avons celui-ci et aussi un autre pour l'icône. Donc, je vais dire si la valeur de l'icône de point et puis l'icône de point de catégorie. Alors sauvegardons ça, essayez-le. Ok, nous avons lourdement la chose va bien. Nous avons donc, encore une fois, nous revenons aux catégories. Nous avons ici une beauté et nous avons la santé. Quand je clique sur la santé, alors j'obtiendrais ici la santé, la santé. Et aussi quand je clique sur la beauté, j'ai ici la beauté, la beauté. Et chaque fois que je clique, j'appelle le back-end pour obtenir la catégorie de la catégorie actuelle visitée ou de l'ID visité. Ok, donc ce dont nous avons besoin maintenant, c'est quand je change ces champs et puis je clique sur Mise à jour, puis il est vraiment mis à jour dans la base de données. Donc, ce dont nous avons besoin, vous devez répéter avec moi d'abord, un service qui se met à jour pour nous dans la base de données. Et nous devons aussi définir la logique. Lorsque je clique sur le bouton, il enverra une demande de mise à jour, pas toute demande, parce que si vous vous souvenez, ce formulaire est fait uniquement pour créer une nouvelle catégorie, nous devons également vérifier le mode d'édition, et alors nous décidons s'il s'agit d'une mise à jour ou s'il crée une nouvelle catégorie. Alors faisons d'abord la logique du bouton. Lorsque je clique sur ce bouton Mise à jour, comme vous vous en souvenez, ce n'est qu'un seul bouton. Nous ne faisons que changer le texte. Donc ici, nous avons seulement mettre à jour ou créer, et ensuite nous avons la méthode sur soumettre et soumettre. Je vérifie si ce formulaire est valide ou non, puis je crée une nouvelle catégorie. Donc peut-être après avoir recueilli les données de leur catégorie, comme nous savons ce que l'utilisateur a entré dans le formulaire. Nous pouvons vérifier le mode d'édition. Si ces points, le mode d'édition. Puis mettre à jour pour moi cette catégorie. Sinon. Alors faites pour moi, je crée la catégorie. Donc, pour cela, nous pouvons définir une méthode. Nous pouvons l'appeler cette catégorie de mise à jour de points. Ce serait une méthode privée. Et cette méthode acceptera pour moi une catégorie. Je vais donc envoyer ces données de catégorie qui sont collectées auprès de l'utilisateur, puis je les enverrai à cette méthode. Sinon. Ensuite, je dirai aussi une autre méthode, juste pour rendre notre code plus propre et plus lisible, nous pouvons dire Ajouter ou Créer catégorie. Et puis je transmets à nouveau ces données de catégorie. Nous devons donc définir deux méthodes. Donc, cette méthode est déjà définie ici, nous l'avons déjà ici. Donc, nous disons simplement ajouter la catégorie privée, et cette catégorie acceptera les données de catégorie. Donc, nous pouvons dire que nous avons ici aussi catégorie. Et puis nous pouvons couper cette partie du code ici et ensuite collé dans la catégorie. Nous avons donc ajouté une catégorie à l'intérieur de cette méthode. Nous devons donc ajouter la catégorie de mise à jour. Ce sera la même chose. Donc, nous avons ici la catégorie de mise à jour privée et puis ce sera une catégorie et aussi ce sera le type de catégorie. J' essaie toujours de vous montrer que pour ajouter toujours des types. Donc ce serait mieux pour toi. Et plus convivial code ou ami développeur. Nous ferons quelques refactoring plus tard en fonction des règles. Par exemple, je n'utilise pas d'engrenage cette réponse donc je peux me débarrasser de ce paramètre. Nous verrons ça plus tard. Alors je veux que tu voies la vidéo que je veux faire sur le refactoring. Nous refactorisons tout ce code, vérifions nos problèmes. Tout est nettoyé pour le livrer de manière très propre. Alors, quelle est la différence entre créer une catégorie et une catégorie de mise à jour ? La différence que la catégorie de création, je n'ai pas besoin de passer un ID de leur catégorie que je veux mettre à jour ou créer. Mais dans la catégorie de mise à jour, j'ai besoin de passer les nouvelles données de catégorie et aussi l'ID de la catégorie que je veux mettre à jour, qui est celui-ci. Donc, pour cela, je suppose que toute cette méthode sera exactement la même que d'ajouter la catégorie, sauf que nous devons aussi avoir l'ID. Donc, je vais dire ici que nous pouvons copier ici tout et le coller ici. Mais nous n'avons pas ici créer la catégorie, mais nous avons besoin d'une catégorie de mise à jour. Donc, mettre à jour une catégorie en utilisant la catégorie que je veux mettre à jour. Mais comme je vous l'ai déjà dit, nous avons aussi besoin de la carte d'identité. Alors créons ce service. abord, nous allons à nouveau deux catégories, le service, nous créons le service et ensuite nous discuterons de l'ID, comment nous pouvons l'obtenir. Donc, tout d'abord, nous avons ici créer la catégorie, ce sera exactement la même. Nous avons juste besoin de remplacer celui-ci aussi, catégorie de date. Et puis nous avons lu cette catégorie. Il nous reviendra une nouvelle catégorie qui est obsolète. Mais ici au lieu de post, nous devons ajouter put. Et avec cette requête PUT, nous pouvons mettre à jour la catégorie. Et aussi nous entendons, comme vous vous en souvenez, dans la mise à jour de la demande , nous devons aller à mettre, nous devons passer tous. Donc, l'ID de la catégorie avec une nouvelle donnée. Il ne s'agit donc pas seulement d'obtenir et d'envoyer de nouvelles données, mais aussi de passer l'ID. Donc nous avons besoin ici d'une manière ou d'une autre, comme nous disons, plus l'ID point de catégorie. D' accord ? Mais cela viendra indéfini, je suppose, parce que nous n'avons pas spécifié dans cette catégorie que nous avons aussi ID. Alors comment nous pouvons faire ça, nous retournons à notre formulaire ici. Donc nous disons ça, ok, j'ai ici la catégorie de mise à jour. Mais si vous vous souvenez de cette catégorie qui est passée ici dans la méthode, elle n'a que le nom, une icône, mais elle n'a pas l'ID de catégorie. Ok, si vous vous souvenez, on a eu l'ID de catégorie d'où on vérifiait le mode d'édition. Donc, dans le mode d'édition, je peux aussi définir une variable globale comme près de ce mode d'édition, je l'appelle ID de catégorie actuelle. Donc, je dis l'ID de catégorie actuelle. Et ce sera, par exemple, une chaîne. Et au début ce n'est pas le cas parce qu'il n'a aucune valeur au début. Donc, quand nous revenons au mode d'édition, nous devons avoir ce mode d'édition de vérification. Et puis après avoir attribué le mode d'édition, je dis que cet ID de catégorie actuelle de point sera params point ID, parce que s'il y a ID, puis l'affecter à l'ID actuel. Donc, quand nous économisons, je pense que nous avons un problème ici. Nous manquons la fin de l'abonnement. Bracket, donc nous devons l'ajouter ici. Donc, soyez prudent lorsque nous copions coller un peu de personnel pour ne pas manquer quelques crochets. Nous vérifions notre terminal. Si nous n'avons aucun problème ici, alors nous voyons que, ok, nous avons manqué que la catégorie n'est pas définie. C' est parce que je n'ai pas enregistré leur service de catégorie. Donc nous le gardons à nouveau. Je clique sur les catégories. Je veux mettre à jour aussi la beauté de l'icône, donc pas supprimer ou mettre à jour. Donc, je vais dire ici une beauté par exemple, nous corrigeons ce problème et nous supprimons cette icône. Et puis nous cliquons sur la mise à jour. Nous voyons que nous obtenons des erreurs et notre backend dit que c'est indéfini. Cette indéfinie. Pourquoi ? Parce que j'ai lu l'ID de catégorie, mais je ne l'ai pas transmis au service. Nous avons ici l'ID de catégorie actuelle. Donc, nous avons juste besoin de construire l'objet de leur catégorie que je passe pour mettre à jour ou supprimer ou désolé, ajouter avec un ID. Donc, je dirai que l'ID sera cet ID de catégorie actuelle. Donc, quand il y a un ID dans le mode d'édition, alors je l'envoie au mode d'édition. Mais quand il n'y a pas, alors je l'envoie même Il n'y a pas parce que l'idée serait créée dans la base de données lorsque je crée une catégorie. Alors sauvegardons ça. Essayé à nouveau, nous supprimons cette icône et ajoutons ici la beauté à nouveau et ici une beauté à nouveau, et nous cliquons sur Mise à jour. Nous voyons que cette catégorie a été mise à jour et nous sommes retournés à la liste cela parce que nous avons copié le même code, qui est 4 ajouter catégorie. Alors choisissons juste les textos. Tout ce qu'il nous faut ici, être bien est mis à jour. Catégorie n'est pas mise à jour en cas d'erreur. Donc, quand nous enregistrons, essayez de modifier celui-ci. Donc, nous pouvons voir ici être mise à jour de la santé, poux, obtenir un bon est mis à jour et il est automatiquement retourné. Et nous avons ici la catégorie mise à jour. Donc, comme un résumé et rapide, nous devons donc spécifier si nous éditons ou nous avons NU. Nous utilisons le même formulaire parce que nous n'avons pas besoin de doubler le code. Je ne veux pas en créer quatre autres pour créer ou modifier une catégorie. Nous pouvons donc utiliser le même composant mais dans des conditions différentes. Donc, tout d'abord, quand j'ai un nouveau, je crée juste un composant, pas de problème ou de catégorie. Et quand j'ai édité, je passe l'ID de leur catégorie cliquée. Et sur la base de cet identifiant, j'ai défini mes choses, j'ai défini ma logique. Je dis que c'est edit, c'est mise à jour ou non. Et aussi je sens les données de la catégorie. Et comment nous avons fait cela, nous avons vu que nous lisons cette valeur à partir des paramètres. Et par les paramètres, j'envoie à nouveau la fonction basée sur le mode d'édition. Si je suis en mode Édition ou non. Et puis je mets à jour cette catégorie ou ajoute la catégorie Eliyahu en fonction de la condition du mode d'édition. Et bien sûr, pour chaque mouvement où je veux faire, j'avais besoin de services d'un service qui saisit pour moi la catégorie sélectionnée de la base de données. Et aussi quand je veux mettre à jour la catégorie, j'ai créé le service de catégorie de mise à jour, qui est également situé dans le service pour mettre à jour les choses de la base de données à travers le backend, que nous utilisons l'API ici. 101. Ajoutez le sélecteur de couleurs pour la couleur de catégorie: Bienvenue de retour. Dans cette conférence, je vais vous montrer comment créer un sélecteur de couleurs. Parce que comme vous vous souvenez que notre catégorie est également livré avec une propriété qui est appelée une couleur prime. Ng est également livré avec un contrôle de sélecteur de couleur. Ainsi, vous pouvez choisir une couleur et utiliser la valeur et la stocker dans la base de données. Comment pouvons-nous utiliser ce sélecteur de couleurs ? Tout d'abord, nous devons importer le module Color Sélecteur puis l'utiliser dans notre module d'application comme je l'ai fait ici. J' ai donc ici le module de sélecteur de couleurs et je l'importe à notre exposition VOUS. Ensuite, nous devons utiliser un composant qui est appelé sélecteur de couleur de pois. Alors copions celui-ci et allons à notre formulaire. Donc, je voudrais aussi le placer près de l'icône et du nom. Donc, nous pouvons aussi avoir ici une propriété de couleur. Je vous montre cela parce que je veux que vous sachiez comment ajouter une autre propriété afin que nous n'avons pas seulement le nom et l'icône dans la catégorie bien sûr peut-être que nous aurons la couleur, nous aurons l'image, nous aurons plusieurs choses. Ainsi, vous pouvez ajouter vos propres propriétés en fonction de vos besoins. Donc, je vous montre cette conférence spécialement pour vous montrer comment ajouter d'autres propriétés pour être plus pratique. Donc, nous retournons à notre formulaire et trouvons le champ. Donc, nous avons ici créé un champ comme nous avons un nom et une icône. Créons un autre champ. Je dis div. Je lui donne une classe qui est le champ B, et aussi une autre classe qui est appelée appel P. Donc, quand j'appuie sur onglet, je verrai qu'ils sont assignés à un div en tant que classe. Nous avons donc besoin d'une étiquette. Donc nous pouvons avoir cette étiquette pour la couleur. Et à l'intérieur de cette étiquette sera la couleur du texte. Et puis nous allons placer notre composant ici. Donc, nous avons ici le sélecteur de couleur et vous modèle de couleur. Mais comme vous le voyez ici, nous n'utilisons pas le modèle NG. Nous utilisons le nom Form Control. Bien sûr, ce sélecteur de couleurs, je suis sûr que dans la documentation qu'ils ont mentionnée à ce sujet. Ainsi, nous pouvons voir que dans les forums pilotés par un modèle ou dans des formes réactives, sélecteur de couleur peut également être utilisé sous une forme pilotée par un modèle. Comment nous pouvons faire cela, nous lui donnons juste un nom de contrôle de formulaire de propriété, ce qui est assez simple. Donc nous enlevons cette partie. On dit, Ok, nom du contrôle de formulaire. Mais comme vous vous en souvenez, nous avons dit que chaque nom de contrôle doit être à l'intérieur de notre groupe de formulaires, que nous construisons dans le fichier ts ou dans le fichier de code. Donc, je vais à nouveau à mon constructeur de formulaire et un groupe, puis j'ajoute la propriété color. Alors je dis ici, ajouter pour moi de la couleur. Et la valeur par défaut, par exemple, peut être FFF. Donc, cette couleur, le large, qui sera une valeur par défaut quand il n'y a pas de valeur vient de la base de données. Alors sauvegardons tout pour voir si tout fonctionne bien. En revenant à notre application, nous voyons bien que nous avons la couleur ici. Donc on a tout. Nous avons un sélecteur de couleurs et ce qui nous manque maintenant que nous avons besoin, lorsque nous mettons à jour la couleur, nous devons l'envoyer au back-end. Donc, tout d'abord, comme vous vous en souvenez, quand j'ajoute une catégorie, nous devons choisir une couleur. Et aussi quand nous allons mettre à jour la catégorie. Alors commençons par ajouter une catégorie. Donc, lorsque j'ajoute une catégorie et que j'appuie sur le bouton Créer, si vous vous souvenez, nous créons l'objet catégorie. Nous avons ID, nom et icône, que nous récupérons à partir du formulaire lui-même. Et puis je les envoie en fonction si je suis en mode édition et tout si je suis en mode Ajouter. Donc nous en avons parlé auparavant. J' ai donc besoin d'envoyer la couleur. Donc, ce serait exactement de la même façon. Donc, je dirai aussi, couleur sera cette forme de catégorie de points parce que nous définissons la forme dans la forme que nous avons aussi une couleur. Donc, je vais dire valeur de point de couleur. Mais ici, nous avons toujours un problème. Nous avons un problème en disant que la couleur n'est pas assignable à la catégorie, comme la couleur n'existe pas dans le type de catégorie. Donc, quand je vais dans cette catégorie, je verrai que je n'ai pas déjà cette propriété, donc nous ne pouvons pas l'ajouter et aussi l'ajouter comme facultatif parce que parfois je n'en ai pas besoin et c'est aussi facultatif. Donc, après cela, quand je l'ai ajouté, l'erreur, ceux-ci apparaissent. Essayons donc maintenant d'ajouter une catégorie en fonction de ce que nous avons fait ici. Donc, je vais à notre application, donner un nom, par exemple, des jeux PC. Et l'icône sera un PC. Et puis je donnerai une couleur. Par exemple, celui-ci rouge. Ou donnons-le comme ça pour être reconnaissable. Et puis je clique sur Créer, surveillez simplement votre réseau ce que nous envoyons au back-end. Donc, quand je clique sur Créer, je vois que obtient une interface graphique est créée. Et la couleur que j'ai envoyée est exactement la couleur que j'ai sélectionnée. Et quand je reviendrai pour éditer cette catégorie, je verrai que la couleur est en arrière pour coller cela parce que nous ne sommes pas initialiser. En outre, lorsque je clique sur le mode d'édition, comme vous vous en souvenez, nous initialisons ces champs, ces valeurs. Donc ce dont nous avons besoin aussi pour initialiser la couleur. Faire cela est assez simple. Nous allons juste à nouveau à notre formulaire de catégories. Si vous vous souvenez, nous faisons vérifier le mode d'édition et injecter le mode d'édition. Quand j'ai le mode d'édition, alors je mets les valeurs de ces champs à la valeur initiale que j'obtiens de la base de données. Donc, nous allons juste avoir besoin d'ajouter cette couleur de point de forme de catégorie, puis définir la valeur de la couleur pour être la couleur de point de catégorie, que j'ai obtenu du back-end, que j'ai obtenu de la base de données. Parce que si vous vous souvenez, aussi, notre backend nous envoie la couleur parce que nous l'avons sauvegardée dans le back-end. Donc, quand je clique sur Enregistrer, OK, retournez à l'application. Nous voyons que la couleur est initialisée et ce qui est une grande chose. Donc ici, j'ai cette couleur. Parfois, je n'ai rien. Donc parce qu'il devient noir ou quelque chose comme large. Donc, cela a déjà une couleur dans la base de données. Donc, quand je vais dans Catégories et que je veux éditer, je verrai la couleur d'origine. Mais comme vous le voyez, je n'aime pas l'avoir comme ça. C' est dans la même ligne de leur étiquette. Donc, nous avons juste besoin de mettre cette icône ou cette couleur pour être dans la même ligne avec ces entrées. Donc, pour avoir l'étiquette sur le dessus et en dessous est une couleur. C' est très simple ici. Je vais le faire très vite. Je vais juste ajouter un BR. Br est une ligne de rupture. Donc, quand je sauve, je verrai que j'ai ici une ligne de rupture et j'ai cette couleur, que je peux choisir et mettre à jour ma catégorie en fonction de cela. Alors ajoutons aussi cette colonne à la liste de la table. Donc, nous pouvons avoir ici id, nom, icône, et une couleur. Donc, pour ce faire, nous pouvons aussi aller à la liste. J' ai ici un autre td, qui est la catégorie cette couleur. Et j'ai aussi un en-tête. Donc, nous aurons un en-tête de la table qui sera appelé couleur. Donc on peut l'avoir comme couleur. Et aussi la valeur ou la TD être cette couleur de point de catégorie. Donc, quand nous enregistrons ce formulaire ou ce tableau, nous verrons que nous avons la couleur. Dans la prochaine conférence, je vais vous montrer comment embellir cette table. Nous voulons que l'utilisateur soit plus convivial avec l'interface utilisateur. Comme je veux qu'il voit l'icône elle-même et aussi je veux lui montrer le lot Recolor, textes et des codes comme ça. Nous voulons donc montrer à l'utilisateur le réel ou la réalité de la catégorie, quoi cela ressemblera. 102. Refactoring Code et Beautify Categories Table avec plus de fonctionnalités: Très bien, dans cette conférence, je veux vous montrer comment nous pouvons afficher la couleur et l'icône sur la liste des catégories de tableau. Donc, tout d'abord, comme vous vous souvenez que nous utilisons Icône Library, qui est fourni par prime end. Et cette bibliothèque d'icônes vient toujours avec une classe II, puis BI, qui est un raccourci pour l'icône Prime. Ensuite, vous spécifiez le nom de l'icône. Bien sûr, vous avez la possibilité de ne pas utiliser cette bibliothèque d'icônes. Il y a beaucoup de bibliothèques d'icônes. Vous pouvez les utiliser juste vous avez besoin de remplacer le fichier de style que nous avions précédemment et que nous avons créé dans les fichiers publics. Donc, vous avez juste besoin d'aller ici et dire que je ne veux pas utiliser, par exemple, les icônes principales. Je veux utiliser, par exemple, les icônes de matériel Google. Donc, dans cet exemple, nous montrons comment utiliser les icônes prime. Donc, si vous vous souvenez dans notre base de données que nous stockons simplement le nom de l'icône. Donc, par exemple, si je veux utiliser une de ces icônes, par exemple, je veux une boussole. Je vais juste ici et dire que l'icône de cette catégorie sera une boussole. Et puis je clique sur la mise à jour. Vous avez deux options ici. Vous pouvez stocker tout le nom de l'icône, comme l'icône PI, puis le stocker ici. Ou vous pouvez aussi, vous venez de mettre ce préfixe et le code dur, ce préfixe dont nous avons besoin ici dans le tableau dans le code HTML. Cela dépend si vous allez utiliser cette bibliothèque d'icônes ou non. Donc, si vous voulez utiliser une bibliothèque d'icônes différente, alors je vous conseille de stocker tout le nom de l'icône qui est dans ce champ. Ou si je vais utiliser uniquement les icônes N G premiers comme je vais le faire ici. Ensuite, je ne stocke que le suffixe de cette icône, qui est le nom de l'icône. Et ici, dans le code, je vais dans le champ où je reçois le nom de l'icône. J' ai exactement comment nous utilisons l'icône. Et cette icône aura une classe qui est appelée icône P, puis le préfixe lui-même. Mais nous le faisons d'une manière différente. Donc, nous disons que ng-class sera exactement comme, par exemple, nous le mettons aussi entre parenthèses afin que nous puissions utiliser une variable à l'intérieur de la classe NG. Donc, la classe ng-dans ce cas sera le préfixe lui-même, comme PI plus l'icône de point de catégorie. Donc, je dis ici que je ne veux pas avoir de préfixe ou de suffixe, mais je veux utiliser cette icône de catégorie, mais tout est ici codé en dur. Donc, quand nous économisons, nous pouvons voir que nous allons obtenir l'icône dans la table. Donc, ici, nous avons la, par exemple, la boussole. Je veux aussi changer cela, par exemple, la santé. Nous pouvons lui donner une autre icône comme par exemple, nous pouvons avoir ce cœur, donc nous pouvons aller ici et remplacer cela. On dit mise à jour, d'accord, donne-le-moi comme un cœur. Et aussi nous pouvons changer ça pour quelque chose comme dans l'icône, quelque chose comme ça, e grand. Donc nous pouvons avoir celui-ci ainsi qu'une icône que j'ai mise à jour. Et puis tous seront placés exactement comme je les préfixe dans la table. Sinon, si le nom est incorrect ou n'existe pas dans la bibliothèque d'icônes, alors il sera vide ici. Vous pouvez aussi redimensionner cette icône et la agrandir. Il est également écrit dans la documentation que vous avez juste besoin d'ajouter. Aussi font-style, qui vient ici. Donc style, taille de police, vous le donnez, par exemple, à R, m. Donc nous pouvons l'avoir comme ça. Donc ici, j'ai je et puis je le donne comme le temps. Ce style sera sauvegardé dans notre EM. Et puis nous verrons que l'icône est devenue vraiment plus grande en tant qu'utilisateur ou utilisateur frontal, je ne suis pas intéressé par l'ID parce que c'est si long et je ne suis pas intéressé comment cet ID est affiché. Donc peut-être que nous pouvons supprimer cette colonne d'ID d'ici, donc nous n'avons plus besoin de cela. Donc, nous l'enlevons et nous pouvons avoir seulement le nom, puis l'icône et cette couleur. Donc, comme vous le voyez ici, nous aurons une nouvelle table et ensuite nous avons la couleur pour la couleur. Je vous conseille également de remplacer cela pour être la même que la couleur. Et ce sera un devoir pour vous. Je vais créer un devoir après cette conférence, je veux que vous me montrez comment remplacer ces hashCode par la couleur rouge. Donc, je veux, par exemple ici un div, qui montrera, par exemple, la couleur de ce hashCode. Ok, qu'en est-il d'ajouter une fonction de tri pour la table ? Donc, par exemple, si je clique sur les en-têtes, je peux trier ces colonnes. Donc je peux trier par nom dans ce cas. Alors activons ça. Je vais à la table de fin prime et je vérifie comment on peut activer le tri. Donc, comme vous le voyez, nous avons une table et ensuite nous avons ici une sorte. Et cet exemple nous montre comment il trie en fonction de ce que vous cliquez sur la colonne. Pour moi, je ne veux qu'une seule colonne pour activer la source sur. Donc, si nous allons à la documentation, nous verrons qu'il attache un attribut à l'en-tête de la table. Donc, où il veut montrer tous trier la table sur la base. Donc, je veux, par exemple, trier en fonction de la colonne qui est appelée code. Ou je peux trier en fonction d'une colonne qui est nommée nom. Nous pouvons donc le faire aussi pour notre table. Donc, je peux aller ici et copier cette partie où il colonne appropriée. Donc, je vais ici et je vais dans le champ de nom ou leur nom En-tête où je veux trier par nom et le placer ici. Donc, nous aurons une sorte de nom de colonne. Et quand je sauve et retourne à notre application, alors nous verrons qu'il est cliquable et qu'il est tri. Mais il ne me montre pas l'icône où je veux trier comme, par exemple, de a à Zed ou de Z à a. Ensuite, je veux ajouter aussi un autre champ qui est appelé icône source P. Et c'est un composant qui peut être utilisé pour afficher l'icône du tri. Et comme vous le voyez ici qu'il a placé après leur nom, ce sera après le nom que nous avons créé ici, le texte lui-même. Donc, il affichera l'icône que nous voulons dans notre application. Donc, quand nous retournerons et nous verrons l'icône, alors je saurai que comment je suis en train de trier. Il y a plus de fonctionnalités peuvent être ajoutées à la table. Mais gardons-le maintenant comme ça pour la catégorie. Parce que comme nous l'avons dit, nous commençons simple, mais dans les prochaines conférences pour les produits et les utilisateurs, nous allons ajouter quelques filtres comme la recherche de produit ou par exemple, bascule ou par exemple, redimensionner les colonnes. C' est ce que nous devons faire, qui est documenté ici pour l'instant. Comme je vois que nous avons une belle table. Sauf si vous faites cela et que vous affichez la coloration, je l'ajouterai aussi à leur code de cette conférence. Mais d'abord, je veux que vous le fassiez comme un devoir et publiez votre affectation sur le référentiel de code ou sur la base de code des devoirs que je joindrai après cette conférence. 103. Fixes ESLint: Ok, Dans cette section, nous avons créé beaucoup de code et nous avons écrit beaucoup de choses. Donc je suis sûr que nous avons aussi fait beaucoup d'erreurs. Alors réparons-les en utilisant Eastland. Eastland, comme vous vous en souvenez, est une extension que nous avons installée sur Visual Studio Code et qui est fournie par configuration par défaut avec le NX. Donc ici, comme vous vous en souvenez, nous avons un préfixe comme admin et aussi quelques autres règles que vous pouvez spécifier. Alors passons en revue ce que nous avons créé. Tout d'abord, nous avons des catégories forme. Nous voyons que nous obtenons une erreur ici, que cela devrait être des préfixes en tant qu'administrateur. Alors réparons ça. Donc, d'abord, nous avons ceci corrigé, j'ai une autre flèche que nous avons ici que le type booléen est booléen. Nous définissons ici un booléen et nous avons dit à nouveau que c'est booléen, ce n'est pas bon moyen. Donc, dans ES peluche dit que vous dites seulement que si c'est booléen ou le rendre égal à une valeur booléenne. Donc ici, nous avons maintenant que seulement faux, alors le code ou le compilateur saura automatiquement que c'est une variable booléenne. Donc, vérifions ici l'autre code, comme vous le voyez ici, que nous avons aussi quelques erreurs comme cette réponse est déclarée mais elle n'est jamais lue. Donc, je ne veux pas utiliser une réponse lorsque je crée une catégorie, moins que, si je dis, par exemple, la catégorie et le nom soient créés. Donc, par exemple, je peux utiliser cette réponse. Par exemple, je le renomme comme une catégorie parce que lorsque nous créons une catégorie, elle répond pour moi le backend avec cette catégorie. Ainsi, je dois dire, par exemple, ce genre de catégorie. Et puis je dis qu'il avait la catégorie, je supprime cette partie, utilise les backticks ici, remplacer par des backticks. Et je dis que cette catégorie, ce nom de point de catégorie est créé. Donc, quand je remplace cela et que je vais au code, créez une nouvelle catégorie. Je dis, par exemple, PlayStation. Et puis l'icône est, par exemple, jouer ou autre chose. Donc, à je sélectionne une couleur, alors je verrai que la notification dirait la catégorie PlayStation est créée. Donc exactement comme vous voulez ici. Et aussi par exemple ici, je n'utilise pas la variable, donc vous pouvez simplement la supprimer pour garder votre chose de voie la plus facile est clair à votre code est clair. Aussi la flèche si vous ne voulez pas mentionner l'erreur, ok, donc supprimez cela. On n'a pas besoin de toi. La même chose pour cela est que vous pouvez aussi avec la catégorie de mise à jour, vous pouvez faire la même chose ici. Par exemple, je vais le supprimer. Et ici aussi, je n'ai pas besoin que ça soit fait. Donc, nous n'avons pas besoin aussi l'erreur. Donc, comme vous le voyez maintenant, nous avons un code propre, quatre catégories, quatre composants dans le HTML. Je ne pense pas qu'on ait de problème. Tout est clair et trouver dans la liste des catégories aussi. Nous avons aussi quelque chose dans le HTML. Non, on n'en a pas, on tient compte de leur liste. Ok, nous avons ici une erreur que ce préfixe devrait être admin, devrait être des bits bleus. Et aussi, encore une fois, nous devons supprimer ces variables inutilisées. Par exemple, ici, la boîte de dialogue de confirmation dit que ok, quand j'accepte, je fais quelque chose, quand je rejette, alors je ne fais rien, donc il vaut mieux l'enlever. Ok, Ce que nous avons créé aussi bien dans le module de l'application, voyons si nous avons des problèmes. Ok, on n'a pas de problème ici. En outre, nous avons travaillé sur le service de catégorie comme vous vous en souvenez. Donc, ici, nous avions également créé du personnel, comme nous le verrons dans la prochaine conférence, nous devons remplacer cela par 100 variable, parce que comme vous le voyez, nous répétons la même URL dans chaque noyau. Donc, ici, nous devons aussi refactoriser cela. Ici, il me donne un objet c'est dire, n'utilisez pas l'objet comme un type. J' ai donc fait une erreur ici parce que l'objet signifie n'importe quelle valeur de non-connaissance. Donc, dans ce cas, je dirais pour l'exemple, effacons-le. Par exemple, Supprimer la catégorie, il me donnera un objet en retour. Donc, je dis tout, donc vous pouvez spécifier n'importe quel pour ce type. Vous pouvez donc vous attendre à n'importe quelle réponse du backend. Alors pourquoi on sauve ça ? Ok, on n'a pas de problème de peluchage, donc tout fonctionne bien maintenant. Nous avons un code propre. Nous n'avons pas à nous embêter avec des erreurs dans l'éditeur. Dans la prochaine conférence, je vais vous montrer comment utiliser les variables d'environnement. Vous vous souvenez qu'Angular est toujours livré avec des variables d'environnement, comme nous le verrons dans la prochaine conférence. 104. Table de table de la liste de produits: Ok, maintenant dans cette conférence, nous allons construire la table des produits. Donc, comme vous vous en souvenez, nous créons le composant, puis nous remplissons le modèle, puis nous appelons les services. Donc, nous allons d'abord créer deux composants. Un pour la liste des produits et l'autre pour les produits pour. Donc, comme nous le faisons toujours, nous allons générer dans la console NX et nous cherchons le composant comme toujours. Et puis je lui donnerai un nom. Où est le chemin d'accès est Pages, puis produits, puis liste des produits. Et le projet est admin. Et encore une fois, nous n'avons pas besoin de style avec elle parce que nous avons un style public. Et aussi, nous devons aussi importer ou sauter ces tests. Alors c'est tout. Et nous vérifions si tout va bien. Ok, ça va Admin, pages d'application, produits, liste de produits, et le composant. Nous l'exécutons. Et nous créons un autre composant pour quoi ? Pour le formulaire. Donc, nous avons forum et liste exactement comme les catégories. Donc, nous cliquons sur la course. Et nous verrons dans notre liste de fichiers que nous avons deux composants en vous, qui forment nos produits et liste de produits. Et ils sont répertoriés sous les pages. Donc, comme je vous l'ai dit au début de cette section de l'article, j'ai écrit que je vais faire la même chose avec les catégories, donc nous n'avons pas à répéter le même code. Apportez la table exactement comme nous l'avons fait avec les catégories. Nous pouvons simplement le copier et vous pouvez ensuite ajuster ce tableau pour s'adapter au produit. Par exemple, nous allons à la liste des catégories et nous copions le contenu de celui-ci. Donc, je vais les amener tous ici. Et puis je vais coller cela dans le composant de liste de produits où il est vide maintenant parce qu'il est en vous. Et puis nous aurions des erreurs. Nous pouvons les corriger en fonction de nos besoins, puis nous pouvons afficher les données des produits. Ce serait un moyen plus rapide. Je veux vous montrer comment réutiliser le code et comment vous pouvez implémenter des choses réutilisables. Et comme je vous l'ai dit au début de cette section, nous allons mettre en œuvre les nouvelles choses telles que les catégories. Comment nous pouvons faire une sélection des catégories, et aussi comment télécharger l'image du produit. Et aussi comment nous pouvons avoir un éditeur HTML de zone de texte de portée pour la description du produit. Nous pouvons donc nous concentrer sur les choses nouvelles et les choses antérieures que nous avons faites auparavant. Nous ne pouvons que copier les coller. Donc, comme vous voyez ici que nous devons commencer sur le toast, ok, que ces deux-là resteront les mêmes, qui affiche des messages de confirmation sur la suppression ou l'édition. Et ici, nous avons besoin d'avoir le titre pour être un produit. Et voici la liste de tous les produits. Et encore une fois, nous devons remplacer. On a un bouton qui est nouveau, ok, on n'a besoin de rien ici. Et aussi nous devons remplacer ces variables de catégories, qui seraient définies dans le constructeur avant le constructeur ici. Donc, je peux dire une variable qui est appelée produit, et ce produit n'est qu'un tableau vide pour l'instant. Pour que nous puissions sauver ça. Et nous allons à nouveau au modèle HTML, puis nous devons remplacer ces colonnes. Ainsi, par exemple, au début, nous avons le nom du produit, si vous vous en souvenez. Et nous avons aussi besoin d'une image si vous vous en souvenez dans notre back-end. Et puis nous avons besoin d'avoir aussi le prix pour qu'il soit triable aussi bien. Donc, j'ai aussi besoin de trier par prix. J' ai donc besoin d'un champ triable ici. Et aussi nous avons besoin d'avoir un stock, comme combien de ce produit dans mon stock interne ou dans mon stock. Ainsi, nous pouvons également remplacer ceux par des stocks. Ensuite, nous avons besoin d'une colonne pour cette catégorie. Nous avons donc besoin ici d'avoir une catégorie à laquelle ces produits appartiennent. Nous pouvons donc avoir une catégorie et nous verrons comment nous pouvons connecter catégories avec les produits comme nous l'avons fait dans le back-end. Et maintenant, nous avions besoin ici à l'extrémité avant pour afficher le nom de la catégorie. Si vous vous souvenez, il a été rempli dans le backend qui s'affiche lorsque ce produit est créé. Donc, nous pouvons dire créé à, donc nous savons que ce produit dans lequel le temps est créé. Et nous pouvons aussi trier en fonction de ça. Nous n'avons pas besoin de trier par image et ce champ ou cette colonne suivra l'action comme les boutons d'édition et de suppression. Ok, passons au corps. Donc ici, j'ai un produit. Je vais vous montrer comment nous pouvons réduire ce code à la fin de cette section comme facultatif. Donc, c'est facultatif à vous si vous voulez refactoriser ce code HTML et réduit dans ce code. Donc, vous ne pouvez pas le laisser comme ça codé en dur la table. Certaines personnes n'aiment pas ça. Ils aiment utiliser une boucle ici. Ainsi, ils peuvent faire une boucle dans une constante ou certaines colonnes qui sont déjà configurées EHR. Et puis ils peuvent remplacer ou placer leurs colonnes en fonction de ce tableau. Alors qu'est-ce ici maintenant, nous sommes en dur codage des choses. À l'avenir, nous verrons comment nous pouvons refactoriser cela comme facultatif. Donc pour l'instant, je peux dupliquer tout ça. J' ai besoin ici le nom du produit. Donc, nous pouvons avoir ici le nom du produit, le produit, comme nous l'avons dit image. Nous pouvons aussi avoir un produit, le prix du produit. Donc, nous avons ici aussi prix. Et nous pouvons avoir un stock, combien dans le contenu ou compter en stock. Rappelez-vous donc que ce champ doit être exactement le même que nous avons créé dans la base de données. Donc, si nous allons chez le facteur, si vous vous souvenez, si je vais ici et je veux vous montrer quand je mets en vente les produits, donc je reçois les produits ici. Nous avons ici une description riche, l'image et la marque et aussi les avis de prix est en vedette, description du nom, vous vous souvenez ? Donc, ici, nous avons aussi un certain nombre en stock. Donc, ce dont nous avons besoin qui s'appelle count est dock. Donc, ces champs devraient être exactement les mêmes que nous utilisons dans le front end. Donc, pour ne pas avoir de conflit de code, vous pouvez utiliser un nom différent, mais gardons les choses cohérentes et plus stables entre le front-end et le back-end. Alors j'ai besoin d'un compte en stock et nous avons aussi besoin de la contiguïté. Et ici, nous aurons aussi problème. Nous le montrerons plus tard parce que, comme vous le voyez ici, nous sommes d'accord pour obtenir cette catégorie. Mais la catégorie est objet. Donc à l'intérieur que nous pouvons dire catégorie puis nom. Mais je veux le garder comme ça maintenant juste pour me concentrer dessus et pour vous montrer comment cela vient vraiment exactement de la base de données. Donc maintenant, nous avons besoin d'une catégorie de produits et à la fin, nous avons besoin d'une colonne pour créé à. Donc, nous avons dit ici, créé à. Et ce devrait être exactement le même domaine, exactement comment il est ici. Donc, il n'est pas créé à sa date, créé. Donc nous devons mettre la même chose ici, d'autres choses dont nous n'avons pas besoin pour pouvoir les supprimer. Nous devons également supprimer cette partie. Nous n'avons pas besoin de couleur, mais les boutons, nous avons besoin de les garder juste nous remplacer les méthodes afin que nous puissions dire un produit, a fait produit, et aussi, nous avons besoin d'avoir mise à jour produit. Et ici, nous n'avons plus d'ID de catégorie, mais nous avons ici un ID de produit. autres choses sont exactement les mêmes. On n'a rien à faire. Vérifions notre application sauf si nous devons aller au module d'application, je vais vous montrer pourquoi. Donc, nous allons à nouveau à notre application et cliquez sur les produits. Nous voyons que nous n'avons pas d'itinéraire correspondant aux produits, nous devons donc ajouter des itinéraires de la même manière. Nous avons trois itinéraires, quatre catégories, catégories de formulaire catégories, ID de formulaire pour éditer le produit ou la catégorie. La même chose exactement. Nous devons faire de même, mais nous devons appeler des produits informatiques. Et ici les produits se forment. Et encore une fois, une forme de produits. Et le composant ici qui est automatiquement importé est le composant de liste de produits et le formulaire de produits. Déplaçons les vers le haut pour être avec cette pièce de composant. Et puis nous pouvons les utiliser dans l'application vers le bas. Donc, nous ne pouvons pas avoir ici liste de produits. Et aussi, nous avons besoin d'avoir ici des catégories ou des produits composant de formulaire. Donc, nous avons ici des produits composant de formulaire. Tout va bien. Nous économisons, nous allons à l'application, nous n'avons aucune erreur. Nous vérifions ici les produits, ok, nous avons maintenant tout et toutes les colonnes. Mais nous avons des données vides parce que nous avions un tableau vide. Donc, ce que nous devons faire maintenant, c'est juste vérifier et saisir les données que nous avons vues précédemment dans le facteur et les placer dans notre table et voir comment nous pouvons créer le service exactement. Aimez aussi les goodies et créez le modèle du produit. 105. Service de produits et obtenez les produits de la base de données: Ok, dans cette conférence, nous allons remplir le tableau que nous avons construit dans la conférence précédente avec les données. Donc, comme nous le voyons ici que nous avons les données proviennent de la base de données et aussi du backend avec quelques champs pour tous les produits, comme la liste des produits. Et c'est l'API que nous avions déjà. Donc, tout d'abord, nous devons remplir cette gamme de produits, exactement comme nous l'avons fait avec les catégories. Donc nous devons d'abord avoir un service. Je pense que le service, nous pouvons également le placer dans la bibliothèque de produits comme nous l'avons fait avec les catégories, sorte que nous pouvons entendre la même chose. Nous pouvons également avoir le service de catégorie, mais nous pouvons le remplacer et le renommer en service produit. Donc, nous avons ici des produits. Et puis j'aurai ici le fichier qui s'appelle le produit services.js. Et puis je veux avoir à l'exporter vers les modules ou vers le module lui-même de la bibliothèque. Donc, nous pouvons avoir ici un produit et nous avons aussi besoin d'avoir un modèle. Donc, le modèle sera exactement comme les champs du produit. Donc je vais les remplir rapidement pour ne pas perdre un jour. Donc, nous pouvons avoir ici un fichier de produit. Nous pouvons appeler cela aussi un produit. Et je vais remplir toutes ces informations exactement comment nous les avons dans le backend. Donc, je voudrais aussi garder ce même nom des champs qui vient du backend pour garder tout cohérent et n'a pas de conflit avec leur développeur back-end. Donc, nous avons ici le nom, comme une description de chaîne est une chaîne. Description est également chaîne, comme nous l'avons vu dans le backend, image, sera une chaîne qui sera l'image principale du produit. Les images, qui seront la moindre des images du produit, qui sont comme par exemple, nous les utiliserons pour une galerie comme nous le verrons à l'avenir. Aussi une marque qui sera à nouveau chaîne. Et le prix est, devrait être ici. Un nombre, pas comme une chaîne. Catégorie sera le type de catégorie. J' ai donc importé ici cette catégorie du modèle de catégorie et j'ai placé cette catégorie comme catégorie. Donc compter en stop sera un nombre et aussi une note sera un nombre. Nombre de commentaires est présenté. Donc, nous pouvons afficher le produit dans la page d'accueil ou non, et ce sera un booléen. Et puis la date créée, qui sera une date de chaîne. Et ici aussi, nous devons l'importer ou l'exporter. Nous devons donc exporter ce modèle afin que nous puissions le voir dans d'autres endroits de notre projet. Ainsi, nous pouvons soulever aussi bien des produits. Donc, nous aurons produit et aussi catégorie. Mais ici, nous devons le renommer non pas les produits, mais le produit parce que nous donnons une classe seulement pour un produit. Nous aurons donc ici un produit et une catégorie. Alors maintenant, nous allons aller au service et nous renommons tout. Donc, nous devons d'abord avoir des produits ici. Et aussi, ce sera la même URL parce que nous disons la même URL pour le back-end. Et aussi ici, nous aurons un produit pour le préfixe ou le suffixe de cette URL. Et puis commençons tous les trucs pour que nous puissions commencer un par un. Donc, ce dont nous avons besoin maintenant, nous avons des produits, alors faisons, obtenons des produits. Et ce sera exactement le même, mais ce qu'il a été retourné gamme de produits qui ne devaient pas retourner pour nous seulement catégories, mais il retournera un produit. Nous avons donc ici un produit et le produit. Et puis nous n'avons pas besoin de ces catégories donc nous pouvons les supprimer parce qu'il n'est plus utilisé. Bon, maintenant notre service est prêt. Nous avons juste besoin d'aller au niveau de l'application et ensuite nous pouvons utiliser ce service. Je vais donc aller ici à l'application, à la liste des produits. Et comme vous vous en souvenez, nous l'avons fait aussi dans les catégories. Alors faisons-le vite. Tout d'abord, j'ai besoin d'appeler le service produit. Donc, je vais dire ici produit ou service de produit privé, qui sera de type produits service, comme vous le voyez, il est déjà connu, donc et il est importé de l'espace de travail et le nom que nous avons ici un problème, C'est ES peluches donc nous devons appeler ceci en tant qu'administrateur et ensuite nous créons une méthode. Nous pouvons l'appeler ce point obtenir des produits. Et nous allons mettre en œuvre cette méthode. Donc, je descends, disons privé, soulignement obtenir des produits. Et dans ces bons produits, je dirai ce service de produit point qui obtient des produits comme nous l'avons vu précédemment, puis abonnez-vous à cette bibliothèque ou à ce observable comme nous l'avons vu. Et puis les produits reviendront dans le rappel de l'abonnement. Et puis je peux dire ce point produits, la variable que j'ai définie ici sera aussi celle des produits. Donc, je suis de côté encre, ce produit aux produits qui sont revenus du backend. Donc, après cela, Enregistrez-le et essayé de mettre à jour notre application. Et nous voyons que nous avons toutes les données dont nous avons besoin. Ok, tout n'est pas parfait, mais allons-y un par un. Ok, le nom va bien. L' image, nous devons remplacer l'image. Comme nous le verrons dans la prochaine conférence, le prix est correct, très bien. Stock, le numéro en stock est correct. Les deux catégories sont objet. Donc on doit trouver un moyen de comprendre pourquoi ça arrive comme ça. Donc, si vous voulez savoir ce qui revient du back-end, dans le front end, vous n'avez pas la possibilité d'utiliser le facteur, alors vous pouvez aller au réseau et vérifier vos appels. Donc, par exemple, ici, j'ai appelé la catégorie ou les produits. Donc, les produits, j'ai tous les produits. Ici. Je vais ici encore, et je vois que la catégorie est, objet, n'est pas comme un seul champ. Et cette catégorie, comme nous nous souvenons, nous avons fait de la population pour celle-ci. Donc, ici, nous avons la catégorie et puis leur nom. Donc, dans le HTML de notre application ou du modèle lui-même, nous devons dire que nous n'allons pas avoir la catégorie seulement mais le nom du point de la catégorie. C' est pour ça que je te dis de garder la même dactylographie. Maintenant, je ne peux pas voir le nom de point de catégorie et je n'ai aucune erreur ou aucune erreur. Et comme nous le voyons ici, cette catégorie est venue exactement comme nous le voulons. Ok, et le rencard ? La date, comme nous le voyons ici, est formatée à partir du format qui provient de la base de données. Pour corriger ce format, nous pouvons utiliser quelque chose dans Angular appelé le tuyau. Et ce tuyau, si vous l'utilisez, notre recherche dans la bibliothèque Angular, vous verrez comment nous l'utilisons. Donc, si vous descendez, vous pouvez voir les options ou l'exemple comment nous pouvons l'utiliser. Vous devez fournir une chaîne de date, puis ou objet. Et puis vous dites Ce signe, puis date, puis vous spécifiez l'option. Il y a beaucoup d'options pour le formatage des dates dans Angular, donc toutes sont répertoriées ici. Ou vous pouvez également utiliser l'un de ces formats 3D comme journée longue, journée complète, courte, temps moyen. Il y a beaucoup d'options pour moi. Je vais utiliser celui-ci qui s'appelle graphique. Alors, comment peut-on utiliser ça ? Donc nous pouvons aller ici et ensuite nous mettons cette colonne et ensuite nous pouvons dire, et je veux avoir une date avec un format court. Et après que nous avons enregistré et essayé cela dans notre application, ok, les jeux de format de date, vraiment parfait. Ok, donc de cette façon, nous avons formaté la date. La prochaine conférence. Ce sera, comme je vous l'ai dit, nous allons montrer l'image qui vient ici du back-end. Alors vous voir dans la prochaine conférence comment mettre en œuvre cette image. 106. Montrez l'image de produit dans la table: Il est très utile que l'utilisateur puisse voir aussi l'image de son produit dans le tableau. C' est donc très simple comment nous pouvons le faire. Si nous allons dans les champs, vous vous souvenez que nous avons l'image d'en-tête et ensuite nous saisissons les données de l'image. Et l'image vient comme vous êtes L, comme nous avons vu comment elle vient du backend. Et si nous voulons avoir une image ici, nous remplaçons juste cette partie ici par une image. Et cette image aura la source et aussi l'alternance quand elle ne peut pas être affichée. Donc, si nous voulons utiliser l'image du produit, nous avons juste besoin de le faire et de placer l'image du produit ici. Donc ça va marcher. Mais je préfère toujours deux chaînes qui donc vous n'avez pas besoin d'utiliser ces crochets ici. Donc, vous n'avez pas besoin d'utiliser ces crochets, vous pouvez donc le remplacer par des crochets comme celui-ci. Donc, ce sera comme de lier chemin ou de liaison bidirectionnelle dans Angular. Donc, il dira que l'entrée de l'image ou de l'image sera une source et il acceptera des variables. Donc, il acceptera les variables angulaires, pas, par exemple, les forces, comme nous le savons dans le HTML normal. Donc, ici, nous avons l'image du produit. Quand nous économisons, alors nous verrons que nous obtenons les images. Mais comme nous le voyons ici, ils sont très grands parce qu'ils ne sont pas élégants. Donc, ce que nous pouvons faire, vous pouvez aussi créer des clous. Ainsi, vous pouvez télécharger de petites images. Donc, vous avez besoin dans le backend pour créer un champ qui est appelé vignette. Ou vous pouvez faire aussi bien ici, redimensionnement par style. Alors tu vas ici et dis style. Par exemple, il aura une largeur qui sera de 100%. Donc, je vais avec cette façon, qui est très simple, bien sûr. Vous pouvez également télécharger une petite image où il y a des clous avec une taille fixe et vous verrez à quoi il ressemblait ici. Donc, par exemple, j'ai ce produit avec très élevé, Donc je dois le garder de cette façon. Mais vous pouvez également créer une image carrée. Ce n'est donc qu'un exemple pour vous. Vous pouvez faire ce que vous sentez et parfait pour vous, pour l'affichage de votre table. 107. Modèle de forme de produits de fabrication: Ok, dans cette conférence, nous allons voir comment nous pouvons créer le formulaire pour ajouter un produit. Donc, si vous vous souvenez que nous avions la même catégorie, nous cliquons sur vous, alors nous allons à la forme de catégories et qui sera ici formulaire pour ajouter un produit. Donc on ne peut pas utiliser la même chose. Nous pouvons commencer comme un modèle à partir de la forme de catégories. Ainsi, nous pouvons copier celui-ci, les catégories se forment et collées sous forme de produits aussi bien. Mais nous aurons besoin d'un autre domaine. Nous corrigerons toutes les erreurs que nous obtenons ici. Et aussi, nous allons utiliser un nouveau contrôle comme un commutateur, comme une zone de texte enrichi, zone de texte et sélecteur. C' est exactement ce que vous avez vu dans la démo au début des sections du panneau d'administration. Donc, nous aurions le même toast qui sera la conformation pour ajouter un produit ou mettre à jour un produit. Et aussi ici, nous allons avoir un garde. Et le garde aura un en-tête, et cet en-tête sera ici, produit. Et aussi ici notre produit. Et ici, nous avons aussi des produits. Donc, je vais faire comme un rapide parce que nous avons tout expliqué dans les catégories. Donc, nous avions ici aussi bien le mode d'édition. Nous devons donc définir une variable qui est appelée mode d'édition. Et ce mode d'édition aura, par exemple, au début de la fausse valeur, nous avons une barre d'outils et la barre d'outils aura aussi, à gauche et à droite. Il aura aussi le mode d'édition, mettre à jour ou créer un bouton pour onsubmit et un bouton pour sur annulation. Exactement la même chose que nous avons fait avec les catégories. Ok, nous venons maintenant au travail sérieux. Où se trouve, par exemple, le groupe de formulaires ? J' ai donc besoin de définir aussi, un ancien groupe dans ce composant, comme nous l'avons fait avec les catégories. Dans ce cas, nous devons définir une autre variable ou un autre membre de classe, qui est appelé formulaire. Et ce formulaire aura un type de groupe de formulaires. Et pour construire ce groupe de formulaires, nous devons utiliser un service appelé Form Builder. Donc, nous aurons un privé ici, et privé sera un constructeur de formulaires. Et ce générateur de formulaire provient du générateur de formulaire de type. Et ici, nous pouvons avoir une méthode privée. On peut le définir. Donc, nous pouvons voir ces points sous forme par exemple, nous ne l'avons pas fait dans la catégorie, mais je vous montre comment obtenir avancée étape par étape. Donc, ici, nous mettons tout dans et g sur n'importe quel, comme lors de l'initialisation du composant. Lorsque je clique sur Ajouter un nouveau , ce composant sera initialisé. Donc je fais ici le formulaire, mais maintenant je le rend plus compréhensible. Donc, je vais le regrouper dans une méthode et le mettre qui est appelé dans la forme. Nous devons donc définir une méthode privée qui est appelée sous sa forme. Et à l'intérieur de cette forme d'initialisation, nous devons construire la forme elle-même. Donc, je dirais ce groupe de points du constructeur de formulaire point. Et puis nous commencerons à construire notre groupe. Ensuite, nous devons dire que cette forme est égale au groupe que nous allons construire maintenant. Donc, les membres de ce groupe seront exactement les mêmes que les champs du produit lui-même. Donc, comme vous vous souvenez, nous avions un nom, nous avons le prix, nous avions , par exemple, catégorie, nous avions aussi, image et images. Je vais les énumérer, tous ici et ensuite nous les expliquerons rapidement. Donc je ne veux pas taper pour ne pas perdre de temps pour toi. Ok, donc comme vous le voyez ici, nous avons le nom qui est requis et aussi la marque est également requise. Aussi le prix est également nécessaire catégorie chose elle-même, qui viendra également du backend ou comment nous pouvons le poster dans le back-end. Et ce sera un sélecteur, comme une liste que vous pouvez sélectionner à travers elle et rechercher une catégorie, comme nous le verrons plus tard. Et compter dans la description du stock, description riche qui n'est pas nécessaire image. Je pense que nous pouvons le faire maintenant pour comme un auteur requis et est également présenté. Nous pouvons le dire aussi, pas nécessaire. Donc, dans le même temps, nous devons construire ces éléments ou ce formulaire contrôles dans le modèle. Donc, à partir de la catégorie que nous avions déjà nom, par exemple, mais nous n'avons pas besoin d'icône, nous n'avons pas besoin de couleur. Nous devons les remplacer par les bons composants. Ainsi, par exemple, le nom serait rester le même et aussi la marque. Ce sera aussi une entrée de texte et nous pouvons le remplacer. Donc, nous pouvons dire marque ici et aussi une marque ici. Et aussi, nous pouvons avoir ici tout comme une marque. Et ici, nous devons créer comme, par exemple, le raccourci comme nous en avons parlé précédemment. Donc on peut faire ça comme ça. Nous disons obtenir la forme du produit et ce point de contrôle point de forme. Et puis nous aurons ici, ne pas obtenir bon est quatre, mais les produits se forment. Donc, c'est comme notre modèle, nous devons donc utiliser ce modèle chaque fois que nous créons. Et uniforme. J' ai tout expliqué en détail, comment nous avons créé chaque étape de cette forme dans la section catégories, ok, nous plaçons cela avec une marque et aussi, nous avons besoin d'un prix. Donc se permettre le prix, ce ne sera pas une zone de texte, ce sera un nombre important. Donc, un numéro d'entrée, comme vous le voyez ici, nous pouvons utiliser quelque chose appelé numéro d'entrée. Et ce numéro d'entrée de Prime NG est tellement génial. Ça te donne beaucoup, beaucoup, beaucoup, beaucoup d'options. Je vais utiliser celui-ci qui est appelé sans regroupement. Donc, nous devons d'abord importer le module. Comme toujours, je vais au module de l'application, importe le module du numéro d'entrée, puis je le place à nouveau ici dans nos modules u x. Et puis nous pouvons utiliser ou utiliser des exemples, donc nous pouvons dire source. Et si nous allons trier, nous verrons sans regroupement, donc nous devons utiliser celui-ci. Revenons donc à notre modèle. Nous n'aurons pas besoin d'une couleur, mais nous aurons besoin ici d'un prix. Donc, et comme nous l'avons convenu auparavant, nous n'allons pas utiliser ng-model comme liaison bidirectionnelle comme entrée et sortie dans le même temps ? Non, parce que nous avons ici un contrôle de formulaire et puis celui-ci sera un nom de contrôle de formulaire car ce sera un prix et l'étiquette sera un prix ici. Eh bien ici prix et nous avons besoin aussi prix ici. Donc, quand nous allons le vérifier, nous verrons que tout est correct. Et il a ici quelque chose appelé ID d'entrée. Nous pouvons le copier et le faire comme un prix aussi. Et ce champ est obligatoire. Donc, nous devons également ajouter un avis de validation à l'utilisateur quand il a mis ou il ne met aucune valeur à l'intérieur. Donc, nous allons dire ce formulaire de produit prix point invalide et est soumis, puis montrez-moi erreur que le prix est requis. Aussi cela est soumis variable. Nous pouvons le définir aussi dans le composant. Donc, nous disons ici est soumis au début est un faux. Voyons maintenant ce que nous avons à l'avant. Donc, après avoir tout sauvegardé, je vais à l'avant et encore, je verrai ce produit publicitaire. Je vous ai créé bouton, bouton Annuler. Nous avons le nom et le prix. Et comme vous le voyez ici, l'utilisateur ne peut pas mettre de lettres, mais il ne peut mettre que des chiffres. Donc ici, nous avons besoin d'avoir une catégorie, une catégorie. Je préfère utiliser la liste, comme je vous le montrerai plus tard, une liste déroulante et cette liste déroulante, Il est également livré comme filtre de composant, comme nous le verrons dans la prochaine conférence. Sentons les simples. Donc, je vais ajouter aussi le nombre est tok et la description. Donc compter en stock sera à nouveau un nombre. Et ce nombre sera lei, pas près d'eux. Ce sera dans une nouvelle ligne. J' ai donc mis affaire aussi pour créer une nouvelle grille qui sera sous cette partie. Donc, comme vous le voyez ici, nous les avons tous regroupés dans cette grille. Mais nous pouvons maintenant en créer une nouvelle, comme une nouvelle ligne. Et cette ligne, parce que ce formulaire champs. Donc, nous pouvons copier la même offre, le prix et nous disons le décompte en stock. Donc je les ai remplacés ici. Donc, nous avons maintenant compté en stock pour tout, et tout est défini comme numéro d'entrée. Donc, lorsque nous actualisons, nous verrons que notre composant est rafraîchi avec un culte en stock, mais il est plein. Ainsi, nous pouvons également définir une petite doublure. Donc nous pouvons dire ici que je veux seulement la colonne 4. Donc, j'ai besoin d'avoir ceci comme une colonne de formulaire comme nous le voyons ici. Mais aussi, vous pouvez définir une nouille de manière différente. Donc, vous n'avez pas besoin de créer une grille, mais vous pouvez aussi dire que je peux aussi avoir une colonne, mais ce sera à la richesse. Vous pouvez avoir ici quatre et 12, mais quand il ne correspond pas, il ira automatiquement à une nouvelle ligne. Vous voyez ici. Et c'est comme si on avait défini une nouvelle ligne. Donc, ce que je vais faire avec une description. Donc, nous aurons ici 12 colonnes, quatre colonnes pour le culte est parler. Et aussi, nous aurons ici près d'elle pour les catégories. Nous pouvons donc le sentir aussi, mais nous n'utiliserons pas le numéro d'entrée quatre catégories. Nous utiliserons la liste déroulante comme nous le verrons dans la prochaine conférence. Donc, nous pouvons renommer cette partie en catégorie et la laisser vide comme vous le voyez ici, j'ai tout remplacé en catégorie. Nous mettrons ici l'entrée de la catégorie ou la liste déroulante dans la cellule, comme nous le verrons dans la prochaine conférence. Et aussi ici, j'ai une description et une description sera une zone de texte, et nous pouvons ajouter aussi cela. Alors soyons sûrs que tout va bien. Nous avons votre nom, le nombre de prix de la marque est toujours vide. Nous nous sentirons avec leur catégorie et ensuite nous avons une description. Et la description sera une zone de texte. Et cette zone de texte, nous pouvons également la trouver. Donc, quand je vais à la zone de texte d'entrée, nous verrons le module de zone de texte d'entrée. Nous pouvons aussi l'importer et le placer ici avec nos modules. Et nous avons ici aussi les modules UX, et nous l'importons. Et puis nous verrons les options de. Donc, ici, nous avons une étiquette de flux. Non, nous n'avons pas besoin de cela, bien que la taille, nous pouvons utiliser la taille par défaut. Donc je peux dire qu'on peut peut-être utiliser celui-là. Retournez à notre modèle et placez la description ici. Et nous lui donnons un nom comme un nom de contrôle de formulaire, comme nous le faisons toujours pour ne pas manquer cela. Donc, nous avons ici le nom de contrôle de formulaire de zone de texte sera la description elle-même. Donc, nous sauvegardons cela, allez à notre application. Nous verrons que nous avons une description. Ici, nous avons la description. Vous pouvez également définir la hauteur pour cela. Par exemple, c'est comme petit. Tu peux le rendre plus grand. Je pense que Prime NG fournit que, comme vous le voyez ici, nous avons des lignes et des colonnes. Donc, vous pouvez également définir cela. Donc, nous pouvons ajouter que deux lignes et la description que nous pouvons faire pousse comme sept. Donc, nous économisons. Et nous reviendrons à l'application. Joli. Nous avons ici les lignes, et après cela, nous aurons une description de portée. Atteindre la description, nous allons expliquer qu'il se termine également lecture séparée parce que c'est un bec. Nous pouvons ajouter ici également est en vedette champ. Donc, si vous vous souvenez, nous pouvons utiliser est drapeau en vedette. Donc, nous pouvons utiliser aussi bien un commutateur, et ceci est situé ici est appelé commutateur d'entrée. Nous pouvons donc définir notre produit s'il est présenté ou non. Nous pouvons donc également importer ce module. Allez ici, importez le module ainsi, et allez importer le commutateur. Alors on peut placer ça ici. Et puis nous pouvons utiliser les entrées du commutateur d'entrée, qui seront exactement les mêmes et celui-ci. Donc, nous aurons une nouvelle rangée. Nous pouvons l'ajouter après catégorie, comme près de leur catégorie. Donc nous pouvons l'ajouter ici. Donc, nous avons ici cette catégorie, nous avons aussi une autre colonne peform. Nous avons ici, quatre colonnes et remplacer tout par ses caractéristiques. Nous devons donc spécifier que la fonctionnalité est requise, donc nous n'avons pas besoin de la validation. Ça suffira comme ça. Et puis nous avons le contrôle lui-même. On peut le copier et ensuite le placer ici. Donc, nous avons ici le commutateur d'entrée, et nous pouvons supprimer ce modèle NG parce que nous utilisons le nom de contrôle de formulaire. Vous avez toujours, vous devez vérifier si ce support. Donc exactement son nom de contrôle de formulaire de support pour notre composant parce que nous avons construit ces contrôles à l'intérieur d'un groupe et vous ne pouvez pas utiliser ng-model dans le groupe de formulaires, sinon vous obtiendrez une erreur. Il est donc préférable d'utiliser un nom de contrôle de formulaire dans ce cas pour les formulaires réactifs ou directifs. Alors vérifions que f est tout ce qui veut. Joli. Nous avons ici est le nom, la marque et la description. Dans la prochaine conférence, je vais vous montrer comment nous pouvons saisir catégories et comment nous allons saisir les données de la base de données également. Donc, nous allons voir ici les vraies catégories qui sont listées ici. 108. Déclinaison de produits pour la catégorie de produits avec filtre: Ok, dans cette conférence, nous allons voir comment créer la liste déroulante de catégorie avec un filtre. Je peux donc filtrer et sélectionner les catégories que je veux et qui sont stockées dans ma base de données. Tout d'abord, nous devons avoir un composant déroulant. Il est également disponible en prime NG comme accessoire vers le bas si vous le voyez ici. Et puis vous aurez de nombreux exemples. Sélectionnez l'exemple le plus simple. Mais d'abord, nous devons importer le module de déposé en premier. Donc, nous allons ici et importons le module déroulant, puis l'ajoutons à notre code. Je l'ai déjà fait pour que nous puissions passer à l'exemple. Donc, nous avons ici une liste déroulante p options. Et certaines villes, comme les villes viendront comme du backend. Et notre backend sera leurs catégories elles-mêmes. Copions cette partie et allons ici et collez-la dans notre étiquette. Donc, nous avons ici déjà créé cette catégorie, et nous avons ici leur catégorie est nécessaire et puis nous le collons ici, mais nous n'avons pas ici d'options ou de villes. Nous avons des catégories. Ainsi, cette liste de catégories sera placée dans l'entrée, qui est appelée options. Donc, cette liste déroulante accepte l'entrée appelée options, qui seront les données qui seront remplies dans le abandonné. Et aussi le modèle. Nous n'avons pas besoin de modèle NG, comme nous l'avons dit précédemment, nous avons juste besoin d'avoir le nom de contrôle de formulaire. Ce nom de contrôle de formulaire sera catégorie. Donc, comme nous le voyons ici dans cet exemple qu'il a défini une variable appelée cités. Et les villes ont un tableau, notre tableau qui est le nom et le code. Et bien sûr, vous pouvez définir n'importe quel objet ou structure que vous voulez. Nous allons donc le faire d'abord. Définissons la catégorie qui sera le tableau des catégories. Définissons les catégories qui seront un tableau. Donc, pour l'instant, ce sera un tableau vide. Et comme il l'a fait ici, nous avons dans les villes comme un tableau codé en dur, mais nous allons l'attraper dans la base de données. Pour cela, nous avons besoin du service de catégorie que nous avons créé précédemment, et nous avons là une méthode qui s'appelle getCategories. Donc, d'abord, après avoir réinitialisé le formulaire, nous disons que ce point obtenir des catégories. Donc, nous allons obtenir toutes les catégories de la base de données et les afficher pour que l'utilisateur voit lequel est le bon pour lui. Donc, nous avons ici une méthode privée. Nous l'appelons un GetCategories. Et ici, nous allons utiliser le service de catégorie. Donc, nous avons aussi besoin d'appeler le service de catégorie. Donc, nous disons ici catégories privées service. Et ce service de catégorie sera le type de service de catégories, qui est déjà défini ici. Nous pouvons donc l'importer automatiquement. Donc, ici, nous avons le service de catégorie, et puis nous dirons que ce point de service de catégorie de points obtient des catégories. Et comme vous vous en souvenez, nous avons ici en tant qu'abonné, donc nous pouvons nous y abonner. Et puis nous obtiendrons dans le rappel les catégories. Et puis nous avons ouvert et une fonction. Et puis nous disons que ces catégories de points seront des catégories. Nous avons donc chargé le tableau des catégories ici. Ensuite, nous dirons que le tableau des catégories a obtenu le champ. Alors sauvegardons tout et essayons ça. Nous allons voir ça vraiment, nous avons toute la liste. Donc tout va bien, fonctionne Parfait. Nous avons donc ici maintenant les catégories que nous avons déjà créées, et ensuite nous les avons quand nous créons une nouvelle catégorie afin que l'utilisateur puisse sélectionner parmi elles. Mais ajoutons plus de fonctionnalités comme nous pouvons ajouter un filtre afin que l'utilisateur, s'il a une longue liste ici, n'ait pas à rechercher manuellement, il peut taper quelque chose et il obtiendra les données filtrées. Donc, nous ne pouvons pas le faire très facilement comme nous le voyons dans l'exemple qu'il a ici, quelque chose comme pour le filtrage. Et l'un d'eux est le filtrage et l'icône claire. Donc, la différence de cela qu'il a ajouté l'option et une autre entrée pour ce filtrage, qui est appelé filtre à travers. Et il a dit que filtré à travers puis filtrer par nom. Pour qu'il puisse filtrer aussi par quelque chose. Vous pouvez filtrer par nom, par ID. Ainsi, l'utilisateur, quand il a tapé quelque chose, les données seront filtrées par cette valeur. Et aussi, il a créé un détenteur de place. Nous pouvons aussi bien le copier. Donc, d'abord, nous pouvons copier cette partie et aller à notre formulaire de produits et ajouter ces propriétés. Donc, nous avons ici les enchères nom de contrôle de formulaire et il filtré est à travers filtre par nom, puis montrer clair à travers la catégorie de sélection de l'espace réservé. Alors sauvegardons ça, essayons-le. Et puis on ouvre, gentil, on a le filtre prêt. Donc nous avons ici pour mobile, je veux des voitures. Donc, vous voyez que nous obtenons les résultats immédiatement. 109. Éditeur HTML pour la description détaillée du produit: Parfois, nous devons montrer à l'utilisateur un peu de détails et de liberté pour créer son détail de produit. Comme nous voyons ici que nous pouvons aussi avec Prime NG, trouver un éditeur qui est appelé éditeur de boîte de conduit atteint. Ceci a atteint l'éditeur Xbox. Vous pouvez également appliquer un style à votre texte. Donc, par exemple, je veux avoir des titres. Je veux aussi avoir du texte sous-jacent afin que nous puissions donner à l'utilisateur la possibilité colorier et de faire beaucoup de choses dans le texte et la description détaillée du produit. Sinon, nous finirons par Ajouter un champ pour chaque pièce spéciale ou mâcher l'utilisateur doit entrer. Mais maintenant, nous pouvons donner la liberté à l'utilisateur avec cette grande zone de texte portée. Nous allons donc l'ajouter à notre formulaire de produit et voir comment travailler avec. Donc, quand nous allons à la documentation de cet éditeur, nous faisons défiler aussi vers le bas. Nous avons besoin d'un module d'éditeur. Et ce module d'éditeur nous allons et importé dans le module d' application comme nous le faisons toujours pour chaque module en énergie première. Et puis après cela, nous devons importer ou utiliser un composant appelé éditeur. Et ici le texte, qui sera comme HTML et un style si vous avez un style spécifique pour cela. Ensuite, vous retournez ce texte dans votre backend ou à votre API lorsque vous soumettez un nouveau produit. Mais celui que nous voulons n'est pas avec n'importe quel modèle, mais avec le nom de contrôle de formulaire, comme je vous l'ai dit, nous utilisons des formulaires réactifs. Donc, nous allons ici à nouveau à notre formulaire. Nous allons créer un nouveau champ et un nouveau live. Nous allons lui donner une classe. Et cette classe sera également 12 colonnes avec une étiquette et sera l'éditeur à l'intérieur. Donc j'ai créé ça déjà ici. Donc, nous avons ici une description riche comme exactement comment nous l'avons défini ici dans le formulaire. Et aussi nous avons l'éditeur lui-même et le nom de contrôle de formulaire sera atteint description. Et j'ai créé une étiquette qui s'appelle détails sur le produit. Donc, lorsque nous sauvegardons cela et que nous allons à notre demande et nous verrons que nous manquons quelque chose parce que nous verrons que cette partie ne fonctionne pas pour notre application. abord, il a une dépendance qui est appelée une plume. Et voici une grande chance pour nous de voir comment nous pouvons inclure des bibliothèques externes, bibliothèques JavaScript à l'application Angular. Donc, si vous descendez ici à la documentation à la fin, vous verrez que c'est une dépendance. Quill editor est un éditeur que vous pouvez installer avec npm install, puis vous devez l'importer. Donc d'abord, nous allons installer cette partie. Donc nous y allons, nous ouvrons un nouveau terminal et ensuite nous disons npm installer Quill coffre-fort. Et après avoir installé avec succès, nous devons importer les bibliothèques. Donc, nous devons d'abord importer le script dans le fichier JSON Angular. Si vous vous souvenez, nous avons un fichier JSON angulaire que nous configurons les applications à l'intérieur. Donc, nous allons configurer l'obligation admin, pas d'autres applications, mais seulement l'application admin dans les scripts. Nous pouvons ajouter cette ligne. Nous n'avons pas besoin d'aller vers le haut car nous avons le module de noeud dans le même niveau de Angular JSON. Donc nous n'avons pas à monter un niveau ou à l'intérieur d'un dossier. Et aussi, il existe deux fichiers de styles dont nous avons besoin pour les importer. Donc ici, après que nous avons les styles, après que les styles, nous pouvons importer ce CSS de base et aussi l'autre qui s'appelle Snow CSS. Donc, après avoir enregistré toutes les choses que les modifications n'ont pas pris effet jusqu'à ce que vous redémarrez votre application. Nous devons redémarrer le serveur parce que nous avons angulaire JSON changé. Et ici, je vais redémarrer mon application. Ok, c'est redémarré mais je me plains toujours de quelques flèches que nous n'avons pas réparées auparavant. Alors, réparons-les et faisons en sorte que tout fonctionne. Nous avons donc un problème que ce onsubmit et onCreate ou son propre conseil ne sont pas définis, donc nous devons les définir. Donc, je vais copier cette partie, aller au composant lui-même, le code du composant. Et je dirai sur soumettre un. Et aussi nous avons sur annuler. Nous définissons donc les deux méthodes. Nous n'avons plus d'erreurs. Ensuite, nous revenons à notre demande. Nous vérifions comment nous avons, comment ils sont chaque éditeur. C'est très génial. Nous avons maintenant tout. Vous pouvez taper, tout ce que vous voulez. Donc, vous pouvez avoir il est stylé dans leur front end déjà comme un utilisateur, exactement l'avoir à l'extrémité frontale. Donc, nous verrons plus tard comment nous pouvons afficher ce HTML dans l'application frontale dans n'importe quel magasin. Donc, l'utilisateur a la liberté de taper ce qu'il veut ici. Et puis nous verrons plus tard comment nous pouvons afficher ce HTML qui est affiché ici, ou que l'utilisateur a utilisé dans le détail du produit. 110. Champ de téléchargement d'images de produit avec affichage de miniatures: Dans ce cours, et pour le produit, nous avons deux types d'images. Tout d'abord, l'image principale, où il affichera l'image du produit. Et aussi, nous avons une galerie. La galerie où ils utilisent quand il va au détail du produit, il ne peut pas voir plusieurs images du produit. Donc, d'abord, nous allons créer maintenant l'image principale. Et pas seulement cela, nous verrons aussi un affichage. Lorsque l'utilisateur télécharge une image, il dira un petit affichage. L' image qu'il a téléchargé pour s'assurer que tout est téléchargé bien pour le téléchargement de l'image, nous ne allons pas utiliser quelque chose de spécifique. Nous allons utiliser le HTML standard. Donc, tout d'abord, je vais avoir un div comme ça. Il sera également sous la description. Et ici, à l'intérieur de cela, j'aurai aussi une étiquette et je vais lui donner, par exemple, comme un nom, image principale. Et puis nous aurions une entrée, et cette entrée sera de type de fichier. Donc, nous aurons ici un type qui est appelé fichier. Donc, je peux télécharger des fichiers via cette entrée. Et pour le coiffer, nous verrons comment nous pouvons le rendre plus beau. Nous allons ajouter une classe et ensuite nous dirons que ce type de fichier, il HTML standard, accepte toute l'image. Nous ne pouvons donc accepter aucun autre fichier. Nous n'accepterons que les images. Ok, eh bien, économisons et essayons ce que nous avons ici. Donc, après la mise à jour de l'application, nous verrons que nous avons un champ ici. Mais regarde, c'est moche. Il n'a pas ces images principales et vous savez, comme l'étiquette n'est pas en haut et le téléchargement de fichier sera ici. Donc, je vous conseille d'ajouter une classe pour cette entrée, qui est appelée texte d'entrée. J' ai obtenu ça en inspectant les entrées M et G. Et j'ai eu ce cours. Donc, ici, nous avons p texte d'entrée lorsque vous enregistrez, il aura plus de style de vie. Il serait situé exactement sous l'étiquette et tout ira bien. Ok, gentil. Nous allons donc mettre en œuvre le téléchargement. Donc, quand je sélectionne une image de mon ordinateur, alors j'ai besoin d'avoir un peu d'affichage ici qu'après avoir téléchargé l'image, elle serait affichée ici. Alors comment nous pouvons faire ça, ok, d'abord, nous devons détecter l'image ou le fichier qui est téléchargé. Donc, je vais dire ici que lorsque je change celui-ci, ce champ GF change, alors j'aurai une méthode qui est appelée sur le téléchargement d'image, par exemple. Et ce téléchargement d'image va me passer les données du fichier que j'ai téléchargé à travers une variable spécifique d'ajout précieux, qui est appelé événement. Et vous devez mettre ces dollars derrière lui. Ensuite, vous obtiendrez les données de la bonne manière de l'image. Nous pouvons donc mettre en œuvre cette méthode. Nous allons au fichier TypeScript et puis nous dirons que nous avons ici sur le téléchargement d'image et cela aura l'événement comme nous l'avons vu. Et puis nous allons avoir le fichier lui-même et affiché dans le voile ASAM, la miniature elle-même. Ce sera sous cela, par exemple, sous cette entrée, nous aurons comme un div, comme toujours comme petit div. Cette div aura à l'intérieur et l'image. Donc, nous pouvons avoir ici un div, et à l'intérieur de cette div nous avons une image. Et la source de cette image sera l'image que nous avons téléchargée. Nous devons donc remplir une variable qui est appelée affichage d'image par exemple. Et ce sera comme entrée pour l'image. Nous devons donc le mettre entre parenthèses. Nous devons donc définir une variable appelée affichage d'image, qui va saisir les données du fichier que nous avons téléchargé et les placer à l'intérieur de cette image. Alors faisons ça. Nous définissons une variable, et cette variable peut être une chaîne ou un type qui est appelé tampon de tableau. Et je vais vous dire plus tard ce qu'est le tampon de tableau et pourquoi nous l'avons. Au fait, réparons cette pellicule que nous avons ici doit l'avoir en tant qu' administrateur parce que nous ne pouvons pas le nommer comme ça. Donc, nous avons un formulaire de produits d'administration. Ok, puis sur le téléchargement d'image lorsque cet événement s'est produit, je recevrais un fichier de l'événement, et ce fichier sera défini. Je vais l'obtenir de l'événement. Donc, ici, nous avons, par exemple, événement. Mais voyons d'abord quel événement revient pour moi. Donc, quand je vais ici, je peux me connecter à la console. Je veux toujours suivre les choses dont j'ai besoin pour comprendre pourquoi je vais faire les choses. Alors sauvegardons cela et allez dans notre application et essayez de télécharger une image. Donc, nous avons ici une image, je l'ai dans mon PC, et puis je verrai cet événement est livré avec beaucoup de propriétés. Et ces propriétés dont j'ai besoin exactement sont Dieu bon. Et puis quelque chose appelé fichiers. Et ces fichiers contiendraient mon fichier que j'ai téléchargé. Alors revenons en arrière. On peut supprimer ça. On n'en a plus besoin. Nous pouvons ensuite définir une constante comme nous avons vu un fichier. Et cette constante aura une cible de point d'événement. Et puis ces cibles, comme nous l'avons vu qu'il a aussi à l'intérieur des fichiers. Et ces fichiers, nous devons saisir seulement le premier élément parce qu'il vient toujours avec tableau. Et nous devons saisir seulement le premier élément de ce tableau, comme nous l'avons vu ici. Donc ici, il a un rayon et nous avons seulement besoin du premier élément. Donc, comme toujours, s'il y a quelque chose dans le fichier, alors nous devons faire quelque chose. Sinon, alors nous ne faisons rien. Donc nous devons nous assurer que le dossier, nous avons bien compris. Ensuite, nous devons mettre le contenu du fichier à l'intérieur de notre variable, qui est appelée aperçu de l'image comme une donnée. Alors, comment nous pouvons lire ces données en JavaScript, il y a quelque chose appelé FileReader. Et ce lecteur de fichiers, nous pouvons lire des données à travers elle. Ainsi, nous pouvons créer une nouvelle classe de FileReader. Et ce lecteur de fichiers à travers elle, je peux toujours lire les données que je veux. Donc, comment nous pouvons lire, nous pouvons dire lecteur de fichier, lire comme URL de données, puis vous passez le fichier que vous voulez. Donc nous avons téléchargé le fichier, nous l'avons reçu. Ensuite, nous créons un FileReader et trouver lecteur a lu comme URL de données, le fichier lui-même. Maintenant, j'ai ce fichier lui-même comme une donnée à l'intérieur du lecteur de fichiers. Comment nous pouvons dire quelque chose comme cet aperçu d'image point ou l'affichage d'image aura les données elles-mêmes. Donc, ce FileReader vient toujours avec une méthode qui est appelée onload. Donc, lorsque nous chargeons nos données sur ce lecteur de fichiers, faisons quelque chose et ceci, nous pouvons les définir. Il a un rappel, mais d'une manière différente, il a une méthode. Et puis ce rappel, vous l'appelez comme ça. Et à l'intérieur de cette méthode, vous pouvez faire ce que vous voulez. C' est un événement. Donc, nous ne pouvons pas faire cet affichage d'image point, puis le résultat de point FileReader. Et à l'intérieur de ce résultat, nous aurons nos données de fichiers. Ainsi, vous pouvez toujours lire le fichier comme une donnée, les mettre dans une variable et les passer à l'entrée de l'image ou à la balise HTML de l'image. Parfois, si vous mettez ceci après avoir lu les données ou FileReader, cela ne fonctionnera pas. Il est donc préférable de le mettre avant. Ensuite, l'événement sera exécuté après avoir lu les données car il saura qu'il y a quelque chose sur le lot car c'est un événement et il doit être défini avant de lire les données. Alors sauvegardons ça et essayons-le. Nous pouvons peut-être essayer maintenant de télécharger un fichier. Donc, je reviens ici à mon dossier. Je sélectionne un fichier que j'ai déjà. Comme vous le voyez ici, j'ai 0 est indéfini. Pourquoi ? Parce que j'ai un problème ici. Ce n'est pas un dossier. Donc il doit être classé comme vous vous en souvenez, notre tableau. J' ai eu une erreur ici et je l'ai réparée. Chargons à nouveau le fichier. Nous retournons ici, nous verrons, super, nous avons l'image est téléchargée. Donc, comme résumé, résumé rapide, j'ai téléchargé le fichier. J' ai créé un FileReader, qui vient JavaScript standard. Laissons l'application web lire le contenu des fichiers. Donc ici, j'ai chargé le fichier, que j'ai téléchargé dans le FileReader, puis je l'assigne à l'affichage de l'image. Mais comme vous le voyez, c'est une grande image. Donc peut-être que si je télécharge une image plus grande, cela prendra plus grand que l'espace. Alors limitons cette image. Donc j'irais ici, peut-être que je pourrais faire des trucs en utilisant mon expérience dans l'énergie première. Je vais lui donner, par exemple, une classe. Et cette classe sera appelée colonne P, par exemple, à deux colonnes. Et cette image aura du style, ce qui sera comme la largeur 100%. Donc, ce serait 100% de son parent. Alors sauvegardons ça. Revenez à notre application. Et puis nous essayons de télécharger leur fichier. Encore une fois. On y va. Les gars, nous avons une très belle, alors mettons un peu d'espace entre l'image et le InputField parce que c'est laid comme ça. Comme vous vous souvenez de la, nos classes, classes de fin de premier plan, nous pouvons avoir marge, bas, marge, haut. Nous pouvons donc faire ce que nous voulons au sujet de la marge. Donc, je veux mettre la marge top deux. Et aussi si vous remarquez qu'il y a, parce que nous utilisons cette colonne, il a un rembourrage. Donc, nous pouvons faire aussi P rembourrage gauche 0 par exemple. Donc ici, nous pouvons le sauver et ensuite nous l'essayons à nouveau. Nous téléchargeons un fichier et nous voyons si tout a bien fonctionné. Parfait. Nous avons maintenant avec le fichier et nous sommes prêts à soumettre ce fichier au backend, puis il sera téléchargé via notre API back-end. Dans la prochaine conférence, nous allons voir comment soumettre toutes ces données pour créer un produit dans la base de données. 111. Soumettre un nouveau produit sous forme de FormData: Ok, dans cette conférence, nous allons voir comment poster un nouveau produit ou ajouter un produit à la base de données. Donc, si vous vous souvenez, nous avons créé le formulaire, alors nous allons faire un Create. Ici, les choses sont un peu différentes de la catégorie. Pourquoi ? Parce que nous n'allons pas publier les données en JSON. Nous allons les poster sous forme de données de formulaire, comme nous le verrons maintenant, c'est parce que nous avons un fichier qui est l'image. Nous devons donc poster les données comme un type de données de formulaire, pas comme un JSON. Parce que si vous vous souvenez, quand nous travaillions sur le backend, je vous montrais que nous publions ou mettons un produit dans la base de données, mais avec la forme que le format pas avec le JSON comme les autres. Ainsi, vous serez en mesure de télécharger des images avec vos données de formulaire. Alors passons à autre chose. Alors. Lorsque nous créons, lorsque nous cliquons sur ce Créer, nous allons construire nos données de formulaire. Alors allons ici et nous avons déjà la méthode, nous l'avons définie, qui est onsubmit. Je vais voir si j'ai d'abord le formulaire valide. Donc, je dis que si cette forme de points, comme le groupe de formulaires que j'ai est invalide, alors retournez. Ne faites rien d'autre. Après ce retour, nous allons construire les données du formulaire, mais avant cela, nous devons valider le champ. Donc, après cela, si vous vous souvenez, nous avions créé ces notifications pour que l'utilisateur voir s'il a des erreurs ou des erreurs dans les champs. Donc, sur la base de ces champs obligatoires que nous avons définis ici, nous construisons nos notifications ici. Donc, nous devons les activer, pas les vacances. Donc, tout d'abord, nous devons dire est soumis est vrai. Donc, quand je clique sur Soumettre, je dois dire que le formulaire soumis est vrai. Donc oui, il est soumis. Donc exactement comme nous l'avons fait avec la catégorie. Donc, après avoir sauvegardé cela, nous essayons à nouveau et puis nous, j'ai essayé de cliquer sur Créer. Donc, après cela, je vais obtenir les erreurs de validation comme vous le voyez ici. Maintenant que nous avons, nous allons sentir ces données et les recevoir et les envoyer au back-end. Alors, comment pouvons-nous recevoir avec ces données sous forme de données de formulaire ? Tout d'abord, nous devons définir une constante qui est appelée données de formulaire de produit et est un type est formé qui forme des gommes de données avec un JavaScript de base dans le navigateur. Donc ce n'est pas une bibliothèque. On n'a rien à importer. C' est à l'intérieur du JavaScript que nous utilisons maintenant, puis ces données de formulaire, nous allons les transmettre au service, qui sera à un produit, puis nous l'enverrons au back-end. Mais comment nous pouvons remplir ce formulaire que notre premier, Donc, je dois déplacer les données que je saisis ici dans les entrées aux données de formulaire produits. Nous disons juste le point de données de formulaire de produit append. Ensuite, je spécifie la clé que je veux ajouter, puis la valeur de celle-ci. Par exemple, je dirai nom et ensuite je dirai le nom du contrôle. Donc, je dirai cette forme de produits de point, qui est déjà que nous avons vu est ce formulaire obtenu contrôle nom de point, valeur de point. Donc, dans ce cas, j'ai spécifié un nom d'ajout à cette valeur. Rappelez-vous que ce nom doit être exactement la façon dont nous spécifions dans le back-end. Donc exactement les champs que nous avons spécifiés ici aussi. Et vous faites la même chose pour tous les champs. Donc, comme ça, vous devez faire une marque et une catégorie, et cetera. Mais je pense qu'il est préférable de le faire en boucle, surtout si nous avons plusieurs champs. Donc, je dirais ici peut-être que je peux dire pour chaque contrôle que j'ai ici, faire cette clé et la valeur de celle-ci, nous disons juste des touches point d'objet. Ça veut dire comme me donner les clés, pas les valeurs de ça. La forme des produits. Formulaire de produit a plusieurs contrôles et je veux prendre les clés d'entre eux. Et puis on m'a dit de les cartographier, comme de les parcourir tous. Et puis je 2 me rendrai la clé. Donc, comme nous l'avons dit, parce que nous allons examiner les clés, que nous sommes ici. Donc, après avoir obtenu la clé, nous pouvons faire ce que cela ajoute pour cela. Mais d'abord, connectons la console pour voir ce qui se passe ici pour le rendre clair pour vous. Donc, je dirai que la console consigne la clé elle-même, puis la console connecte pour moi ce formulaire de produit point. Et puis je spécifie la clé que je veux, puis j'obtiens la valeur de celle-ci. C' est exactement ce que nous avons dit ici, comme cette forme de produit point, nom de point, valeur de point, exactement la même chose. Donc ici, il a un tableau et puis je vais les lire. Donc, il doit imprimer pour moi maintenant cette clé, comme le nom et la valeur, et tous d'entre eux. Donc, contrairement à la catégorie, à la marque , etc., je retourne à l'application. Je pense que certains sont comme un produit qu'on peut dire. Et puis la marque est Brian Guan. Et le prix est, par exemple, 500 et le nombre en stock est de 20. Et la catégorie sera, par exemple, la beauté est en vedette No. Et puis nous avons, par exemple, une description et une autre description détaillée, et nous avons une image. Donc, je vais télécharger une image au hasard. On l'a ici. Ensuite, je vais cliquer sur créer. Quand je clique dessus et nous voyons que nous avons obtenu les données exactement. J' ai donc nommé le produit 1, puis la marque, la marque un. Le prix est 500, la catégorie est la catégorie tout cela parce que nous retournons l'objet tout de celui-ci et aussi compter en stock 20. Donc c'est exactement ce dont nous avions besoin. Alors, comment nous pouvons ajouter ceux qui viennent de passer par, nous disons formulaire de produit, point de données ajouter. Et puis nous disons cette clé. J' ai donc besoin d'une clé, comme nous l'avons dit précédemment. Et puis ces points sous forme de produit. Et puis je dis la clé elle-même, valeur point. Alors allez sur tous les produits formulaire, puis soumettez la valeur du champ. Ensuite, nous disons ce point, nous pouvons définir une méthode qui est appelée ajouter un produit. Exactement comment nous avons fait avec la catégorie, mais ceux-ci accepteront, acceptent les données de formulaire de produits après que nous avons tout mis à l'intérieur. Alors définissons cette méthode. Ce serait exactement le même que nous avons défini quatre catégories. Ce sera exactement comme si nous utiliserons le service de produit, produit publicitaire, et ensuite j'utiliserai toute cette propriété. J' aime le service de messages. Alors faisons-le vite. J' ai défini à un produit à la fois impair, donc nous l'avons comme catégorie d'ajout, mais nous avons besoin à un produit et ce produit publicitaire acceptera pas le produit lui-même, pas le produit comme un fichier JSON, mais nous accepterons les données de formulaire. Donc, nous devons dire ici, données de produit seront de type de données de formulaire et ensuite j'utiliserai un service de produit. Nous devons donc utiliser aussi le service produit pour ajouter le service qui crée un produit. Et puis je lui transmets les données du produit. Donc, nous devons d'abord appeler le service produit. Donc nous l'avons ici pour pouvoir dire service privé, service produit. Nous descendons à nouveau à notre ajout d'un produit. Donc, créez le produit. Nous devons définir cette méthode. Donc, je vais à nouveau à notre service de produits. Donc nous l'avons ici. Donc, après que nous allons cela, donc ici nous mettons cette méthode à nouveau et sans commentaire et nous disons créer le produit, pas la catégorie. Et ici, nous avons des données sur les produits. Et ici, il acceptera les données de formulaire. Et puis il reviendra pour moi observable d' un modèle de produit parce que je vais obtenir le produit lui-même. Et ici aussi un produit, et ce sera une demande de poste, mais ici ce sera l'URL pour les produits. Ici, nous avons les catégories dont nous avons besoin pour corriger cela. Donc nous avons ici pour ce produit. Et puis je passe les données du produit à la demande de poste. C' est exactement ce qu'on a fait avec un posteur. Maintenant, je construis des données de téléphone et les envoie au back-end avec la requête de post HTTP. Alors sauvegardons ça. Et puis nous continuons dans notre front end ici nous avons la catégorie ni il ne retournera pour moi un produit. Et ce produit, ce sera un produit. Et puis nous avons le modèle de produit. Nous devons l'importer à nouveau. Et ici, nous avons besoin d'un service de messagerie. Et le service de messagerie, si vous vous en souvenez, c'est aussi de Prime NG. Nous l'avons utilisé pour afficher des messages comme Notification Service, qui est situé dans Prime NG. Et puis nous avons maintenant tout va bien. Maintenant, nous devons définir cela. Le j'ai besoin d'afficher le nom du produit, puis j'ai une minuterie pour revenir en arrière. Après l'ajout réussi du produit, nous importons ceci, qui provient de Rx2. Oui, vous spécifiez l'heure, puis vous attendez jusqu'à ce qu'elle soit exécutée ou passée, puis vous revenez à la liste des produits. Et puis nous devons avoir ici quelques corrections comme produit, comme sur le texte des messages. Ici, nous avons produit n'est pas créé lorsque nous obtenons une erreur et nous ne manquons maintenant que l'emplacement. Donc, nous retournons ici et appelons méthode privée ou service privé, qui est appelé emplacement. Et cet emplacement viendra de l'emplacement dans Angular. Alors essayons ça. Et puis je vais remplir à nouveau mes données ici. J' ai une marque, j'ai une marque. Et gardez toujours un œil sur le réseau ici, donc nous l'utiliserons toujours. Donc, quand vous voulez savoir ce qui envoie ou ce que vous envoyez au front ou au backend. Il est préférable d'utiliser le réseau parce que vous verrez clairement ce que vous envoyez au backend ici, 500, 23, puis nous choisissons la catégorie et est présenté. Oui, nous pouvons le mettre tel qu'il est présenté. Et voici la description et la description détaillée. Et puis j'envoie une image. Donc après ça, on se soumet, accord, il se plie et se plie encore. Donc, nous obtenons une erreur à l'arrière et je suppose, et ici j'ouvre le sac et encore une fois pour vous montrer l'erreur, il dit la valeur du champ ID de l'objet cast, objet, objet, catégorie ID de chemin. Parce que si vous vous souvenez, nous avons imprimé dans le journal de la console cette catégorie et il nous donne une catégorie en tant qu'objet. Donc, j'ai besoin de passer seulement l'ID de point de catégorie. Je ne veux pas passer toute la catégorie. Nous pouvons résoudre ce problème très facilement. Donc, nous pouvons non seulement envoyer la catégorie elle-même à l'extrémité frontale ou au backend, tout cela. Nous ne pouvons envoyer qu'une valeur spécifique ou un champ spécifique. Parce que si nous allons à la documentation de liste déroulante, la liste déroulante elle-même, parce que vous savez que nous lisons la valeur ici à partir de la liste déroulante. Donc, la valeur de la catégorie dans la liste déroulante donne l'objet entier de la catégorie qui comprend ID, nom, couleur, icône. Maintenant, nous n'avons besoin que de la carte d'identité. Donc, nous devons dire en quelque sorte que s'il vous plaît ce contrôle et ne me donner que l'ID qui est spécifié ici, pas tous les objets. Si vous allez à la documentation déroulante dans Prime NG, nous voyons que nous avons quelque chose d'entrée avec ces entrées, qui est appelée valeur d'option. Vous pouvez donc définir une valeur d'option ou une clé de l'enchère. Donc tu ne peux pas dire ça, donne-moi seulement ces clés ici. Donc, nous ne pouvons pas utiliser cette valeur d'option aussi et le spécifier comme étiquette facultative ici. Par exemple, l'option étiquetée, je l'ai dit, choisir parmi l'objet de catégorie, le nom seulement, et l'afficher ici. Mais quelle sera la valeur, la valeur de cette option. Donc, je ne peux pas dire que la valeur de l'option sera l'ID, l'ID de cette catégorie que je reçois avec les catégories. Donc, après avoir sauvegardé cela et quand nous publions des données sur le back-end, alors nous verrons que la catégorie n'est plus objet. Il sera aussi ID. Donc, quand je sélectionne quelque chose ici, je spécifie seulement l'ID, pas la catégorie des objets, tout cela. Je détaille ce point juste pour éviter, si vous obtenez une erreur comme celle-ci, alors vous pouvez savoir comment le résoudre. Alors remplissons ce formulaire à nouveau et nous allons cliquer sur Soumettre. Donc je sens déjà ces données. Je vais appuyer sur créer. Lorsque j'appuie sur grade, je dis que le produit n'est pas créé parce que j'ai eu une erreur. Vérifions le réseau ici. Donc vous voyez que nous envoyons tout bien. Je vais ici et je vois les en-têtes. Les en-têtes de la demande seront une donnée de formulaire et tout me semble bien. J' ai le nom, le prix de la marque, la catégorie. Regardez, cette catégorie vient aussi seulement que le nombre d'ID est la description de conversation, la description atteinte, tout va bien mais le champ de l'image est vide. Et la réponse est de dire, aucune image là-dedans demande. Donc, nous avons besoin d'avoir en quelque sorte l'image aussi dans les données de formulaire. C' est pourquoi nous utilisons des données formées. Pour ça. Je dois dire pour former cet append pour la viande aussi l'image, mais l'upending de l'image est différente d'ajouter des champs normaux. Ce n'est pas comme ça. Ce n'est pas comme je le dis, ajoutez la clé et la valeur de celle-ci. Donc, la valeur de leur image clé est vide en quelque sorte, même nous l'avons définie ici. Mais le problème en utilisant l'image Form Control ici, il ne me donnera pas les données réelles. Cela ne me donnera que le chemin des données. Parce que si je soumets, encore une fois avec ce changement, par exemple, j'ai ici le nom de contrôle de formulaire, alors vous verrez que les données ne viennent que le chemin de celui-ci. Donc je n'envoie pas le chemin. Je voulais envoyer les données exactement comment nous les avons obtenues et comment nous les construisons avec le FileReader précédemment. Donc, si vous vous souvenez, lorsque nous téléchargeons l'image, quand je clique sur le téléchargement d'image, alors j'ai créé un lecteur de fichiers comme nous l'avons vu dans la conférence précédente. Nous devons donc passer le fichier lui-même. Alors comment on fait ça ? C' est très simple. Nous allons sur le téléchargement d'images. Et je dis que ne prenez pas la valeur du nom de contrôle de formulaire, alors supprimez cela. Mais nous allons ici et disons que la valeur du nom Form Control sera le fichier lui-même. Donc, ce ne sera pas le chemin du fichier, mais ce sera le fichier lui-même. Alors, comment peut-on faire ça ? Si ce fichier, s'il y a un fichier, alors cela forme le formulaire que nous construisons dans le groupe de points. Nous disons la valeur de patch, comme ajouter une valeur, valeur sur une clé qui est appelée image, puis coller le fichier. Comme vous vous en souvenez, nous avons défini ici l'image, mais elle est vide. Mais maintenant, nous devons le définir et patcher cette valeur à la forme elle-même. Et une autre chose comme nous avons besoin de valider cela parce que nous postons un fichier qui n'est qu'une image. Donc, nous devons dire que pour cette forme de point point point obtenir l'image elle-même. Et puis nous disons la valeur de mise à jour et la validité. Donc, ici, nous devons utiliser cette méthode juste pour confirmer que tout fonctionne bien. Nous mettons à jour la valeur car après l'avoir corrigé, nous devons mettre à jour le formulaire lui-même. Donc nous obtenons juste cette valeur et mis à jour comme un fichier que nous butons. J' ai rempli les données à nouveau et j'ai aussi l'image ici. Donc, quand je clique sur Créer, je verrai que aussi il est toujours en attente. Je reçois une autre erreur car il dit que la validation du produit est présentée, du gaz à la valeur sentie booléenne, c'est vide. Nous devons donc rendre cette fonctionnalité par défaut false ou true. Donc, quand c'est comme ça, alors nous ne le faisons pas, nous ne pouvons pas envoyer une valeur vide. Nous devons envoyer une fausse valeur. Donc, il est en vedette doit être par défaut comme un faux. Et quand on l'a changé, on en a lu la valeur. Essayons encore ça. Après avoir donné une valeur par défaut aux fonctionnalités ISB, nous cliquons sur Créer. Nous verrons que le produit est créé avec succès. Et si nous allons à notre liste de produits, nous verrons que l'image du produit a été téléchargée et qu'elle est déjà sur le serveur. Donc, il est du côté serveur, a été téléchargé avec succès. Donc, comme un résumé, nous avons fait exactement comment nous faisons avec les catégories que nous faisons juste est soumis, vérifier le formulaire est invalide. Nous ne faisons rien quand c'est invalide, alors nous envoyons les données sous forme de données de formulaire, pas en tant que JSON, nous l'avons fait avec la catégorie. Et puis nous construisons ces données de formulaire. Et puis nous ajoutons ces données. Deux produits forment des données. Et puis nous créons une méthode qui est appelée ajouter un produit, qui utilise le service produit, créer un produit. Et puis basé sur cela, cela me donnera un message de réussite ou un message d'échec. Le problème principal que nous avons rencontré ici que le champ d'image ne peut pas être utilisé comme un nom de contrôle de formulaire car il ne retournera pour moi ici que le chemin. Il ne retourne pas le fichier lui-même. Donc, ce que nous avons fait pour résoudre cela, nous avons dit sur le téléchargement d'image quand nous l'avons fait dans la conférence précédente, nous avons dit patch une valeur à la forme qui est appelée image. Et la valeur de ce contrôle de formulaire sera le fichier lui-même. Ce ne sera pas le chemin. Ensuite, pour que les choses deviennent actives, nous devons appeler ce champ à nouveau, puis dire valeur de mise à jour et validité. Et aussi, nous devons être prudents avec les valeurs par défaut ici parce que parfois, quand vous n'envoyez rien au backend, étrange quand vous envoyez un mauvais type, par exemple, est en vedette était vide ici, donc j'étais en utilisant une chaîne vide. Et pour le backend, c'est un problème parce que le backend attend une valeur booléenne. Donc, la valeur par défaut de ceci est Richard sera un faux à moins que nous ne le modifiions. Donc, quand je vais ici et le changer, il lira la valeur comme un booléen parce que nous lisons les valeurs de onsubmit lorsque je soumets une méthode. Alors faisons maintenant un refactoring rapide. Nous avons juste besoin de supprimer ces journaux de console afin que nous n'ayons pas besoin d'avoir un journal de console et notre code, et nous avons déjà créé notre produit dans la liste des produits. 112. Modifier un produit: Dans cette conférence, nous allons voir comment nous pouvons éditer un produit. Exactement comme nous l'avons fait avec la catégorie. Si vous vous souvenez, nous cliquons sur l'un des éditer à la catégorie, puis nous pouvons éditer et mettre à jour. Nous pouvons faire de même avec le produit. Donc, quand je clique sur ce bouton d'édition, je peux revenir sur le formulaire et sentir les données. Alors, comment peut-on faire ça ? C' est exactement comme dans les catégories. Je suis allé à la liste des produits. Si vous vous souvenez, nous avons le bouton pour l'édition et nous disons juste mettre à jour un produit et je passe l'ID du produit que je veux. Et puis la mise en œuvre de ce produit de mise à jour, ce sera ces routeur naviguer par URL à la forme des produits, puis l'ID du produit, parce que nous avons défini cette route déjà comme nous l'avons vu ici précédemment. Donc maintenant, lorsque nous cliquons sur le Modifier, alors nous allons aller à Ajouter un produit. Mais le problème que nous avons des données vides, nous n'avons pas obtenu le produit lui-même rempli déjà dans ces champs. Donc, encore une fois, nous devons spécifier le mode d'édition. Et puis nous disons quand j'ai ID, puis je prépare le mode d'édition, puis je récupère les données du produit de la base de données, puis je les place dans les champs comme nous l'avons fait avec les catégories. Alors faisons-le vite. Comme vous vous en souvenez dans le modèle, nous avons défini et éditer la variable de mode, et cette variable est définie ici. Nous devons donc spécifier et vérifier le mode d'édition comme nous l'avons fait précédemment. Donc, tout d'abord, nous devons créer une méthode qui s'appelle mode d'édition Jack et cliquez sur le mode Modifier. Ce sera une méthode privée. Donc, où je peux vérifier le mode d'édition et lire l'ID de l'URL, exactement comment nous avons fait avec les catégories. Nous avons donc besoin de la route elle-même, de ce service. On peut l'attraper et le mettre dans nos appels de services. Donc, ici, nous avons la route qui est activée route et entendre de la route. Je ne peux pas savoir quels sont les paramètres sont passés dans l'URL s'il y a un ID qui est passé comme nous l'avons fait précédemment, alors dit le mode d'édition à true. Et puis nous allons définir les champs des produits par le produit que nous avons obtenu du back-end. Donc, nous devons d'abord définir également un ID de produit actuel. Donc, parce que nous avons besoin que, comme vous vous en souvenez, nous avons donc un identifiant de produit actuel qui est défini ici, sera une chaîne, et ensuite nous devons créer une surface pour obtenir un seul produit. Donc, si nous allons à nouveau aux services, nous allons au service de produits, nous devons créer une méthode qui s'appelle obtenir un produit. Et comme nous l'avons fait exactement avec une catégorie, nous pouvons définir cette méthode. Donc, nous pouvons juste dire que nous avons un bon produit, ID produit, produit ici pour appeler le modèle de produit. Et aussi ici, je vais obtenir le produit. Et ici, nous avons besoin de l'URL de l'API, puis je passerai l'ID du produit. Donc, ici, le service est prêt. Nous revenons à notre formulaire, puis pour vérifier le mode d'édition, nous devons appeler le service produit. Donc, je dis ce service de produit point et puis obtenir un produit, un seul produit, puis m'abonner au produit lui-même. Et puis je vais obtenir le produit à partir du backend. Et puis pour chaque champ de ces champs de produit, nous devons spécifier la valeur que nous avons obtenue du back-end. Donc, nous pouvons supprimer cette partie. Donc, nous devons dire d'une manière ou d'une autre comme cette forme de point produit que nous avons déjà. Et puis je vais champ par nom de champ et la valeur définie. Et puis j'ai défini la valeur avec le produit que j'ai obtenu du backend et le nom. Alors faisons ça pour tous les champs rapidement. Donc, je vais ici d'abord à la catégorie, puis je mets la valeur de la catégorie que j'ai obtenue du produit. Et aussi, j'ai cette marque. Et puis le prix en stock est en vedette description et description riche. Sauvons au trie que nous allons à notre front end, nous sélectionnons un produit, par exemple, celui-ci. Et puis je verrai que tous les champs sont parfaitement remplis, mais à l'exception du champ de l'image que nous n'avons pas d'image principale ici, nous ne pouvons pas la voir. C' est parce que la vue de pitié de l'image, comme vous vous en souvenez, elle est stockée dans une variable appelée affichage de l'image. Et dans l'affichage de l'image, je peux spécifier la valeur de l'URL de l'image, que je reçois du back-end. Nous pouvons donc le faire très simplement. Nous pouvons dire cette URL de l'image de point ou l'affichage de l'image. Ce sera le produit lui-même, cette image. Donc, ici, nous avons un chemin vient déjà du backend et avec l'affichage de l'image. Mettons à jour ça et vérifions-le. Ok, nous voyons que nous avons l'image est déjà sélectionnée et affichée ici. Et aussi si nous voyons que nous manquons la catégorie, la catégorie n'est pas sélectionnée car elle est toujours par défaut. Le problème que si vous vous souvenez, nous avons spécifié la catégorie par ID. Et quand je vais au réseau et vérifier ce que je reçois la catégorie, je l'obtiens comme objet parce qu' un backend m'envoie toute la catégorie avec le produit. Nous devons également spécifier l'ID. Donc, je vais dire l'ID de point de catégorie. Donc, ici, je vais et je dis ensemble produit, catégorie point ID lui-même. Nous essayons à nouveau et nous verrons que la catégorie est déjà sélectionnée. Donc, vous voyez étape par étape, vous devez vérifier que tout fonctionne bien. Et puis nous allons faire le Soumettre de la mise à jour par moi. Par exemple, lorsque je modifie le prix, je souhaite soumettre la mise à jour du prix au back-end. Donc, le bouton sur Soumettre était déjà défini comme nous l'avons vu ici, mais nous n'avons qu'ajouter un produit. Donc, nous devons en quelque sorte faire de la même façon que nous avons fait avec la forme des catégories. Nous devons vérifier le mode d'édition. C' est vraiment le mode. Ensuite, mettez à jour le produit, pas un produit publicitaire. Et si ce n'est pas le cas, alors nous ajoutons le produit. Donc, j'ai ici si ce mode d'édition de point, et puis je vais aller et je dis que, ok, Faites pour moi la mise à jour, sinon, faire pour moi produit publicitaire. Nous devons donc définir une autre méthode qui s'appelle Modifier le produit ou mettre à jour le produit. Donc, ce sera aussi une méthode privée. Il sera mis à jour produit et ensuite il demandera la forme des produits que de nouveau. Donc mettre à jour le produit, il sera sur le dessus ici, nous l'avons comme soulignement privé, mettre à jour le produit. Et puis je vais passer les données de formulaire de produit, qui a aussi plonger hors de la forme du produit ou des données de formulaire lui-même. Donc ici, nous devons passer aussi bien à la mise à jour, un formulaire que parce que si l'utilisateur a mis à jour l'image. Donc exactement comment nous avons fait avec la catégorie de mise à jour. Comme vous vous en souvenez, nous avons créé le service de catégorie de mise à jour, puis nous avons créé un message et une minuterie pour revenir à la liste des produits. Et puis s'il y a un échec, nous affichons un message d'échec. Ajoutons également la méthode de mise à jour, qui sera également dans ce service produit. Donc, nous allons à nouveau au service de produits. Ainsi, nous avons aussi la mise à jour du produit et ensuite nous avons les données du produit lui-même observables. Il retournera pour moi le produit mis à jour et aussi, nous devons passer l'ID, mais voici les choses un peu différentes. Nous devons passer l'ID et nous les avons dans une donnée de formulaire. Vous pouvez également obtenir notre capture de l'ID lui-même à partir des données du produit. Mais à mon avis, il est préférable d'ajouter un autre paramètre pour mettre à jour le produit, qui sera l'ID du produit. Donc, je vais ajouter ici aussi un ID de produit, qui sera de taper une chaîne. Et puis je vais à nouveau au formulaire de produit. Et sur la méthode de mise à jour, je vais ajouter, si vous vous souvenez, ce point ID de produit actuel, que nous avons défini précédemment, et nous l'attrapons injecté sur le mode d'édition. Donc, si vous vous souvenez, nous avons ici cette vérification du mode d'édition et nous avons attribué l'ID actuel de leur produit à l'ID de produit actuel. Donc maintenant, nous avons toute la méthode fonctionne bien. Nous avons juste besoin de soumettre les données. Sauvons ça. Si nous allons à l'un de nos produits, comme ceux que nous avons créés précédemment, je verrai ici que, d'accord, j'ai le nom du produit, la marque de produit un. Je mise à jour par exemple, est en vedette. Et dans la description, je dis description mise à jour juste pour être sûr que tout va bien. Et puis nous cliquons sur la mise à jour. Alors mettons-nous à jour ça. Nous verrons que le produit est mis à jour et nous sommes retournés à nouveau et nous verrons que le produit est vraiment mis à jour avec la description mise à jour. Essayons de changer l'image aussi. Donc, je vais voir ici que par exemple, j'ai une de l'image comme celle-ci par exemple, je mise à jour et nous verrons qu'elle a également été mise à jour comme nous le voyons ici. 113. Le champ d'image de validation dynamique n'est pas requis en mode Modification: Donc, c'est pourquoi j'ai fait l'image principale n'est pas obligatoire champ au début parce que je suis ici montrant seulement l'aperçu de l'image, mais je ne charge pas l'image à nouveau dans le fichier d'entrée ici. Donc, quand je soumets une mise à jour, et comme vous l'avez vu dans le back-end, nous avons déjà fait que nous vérifions l'image. S' il y a une image avec cette requête, alors ok, utilisez-la. Mais sinon, gardez l'ancienne image. Si l'utilisateur n'a pas téléchargé d'image ici. Donc, voici comment nous l'avons fait dans le back-end et comment nous le gérons dans le front end. Mais nous avons un problème ici que si le produit, quand je clique sur vous, je crée un nouveau produit. Je ne montre pas à l'utilisateur d'erreur de validation ici. Comme par exemple, lorsque je clique sur Créer, je montre juste que le produit n'est pas créé, mais je ne montre aucune erreur de validation ici, nous devons côtoyer une erreur de validation. Mais lors de la mise à jour, cette validation ne devrait pas apparaître. En d'autres termes, je veux en mode édition, ce n'est pas un champ obligatoire, mais onCreate, je voulais être un champ obligatoire. Comment peut-on faire ça ? Tout d'abord, faisons ce champ comme nécessaire. Et sur le modèle lui-même, nous copions une de ces petites descriptions ou les petites balises Nous avons ici, l'image, télécharger l'image et après l'image ici, nous pouvons, par exemple, mettre une erreur de validation. Donc, je dirais que la forme du produit, comme si l'utilisateur n'a pas patché une image, alors invalide et est soumis, puis l'erreur d'affichage, dire l'image est requise. Mais cela ne sera montré que lorsqu'il y a une erreur et qu'il n'y a pas d'image téléchargée avant. Donc nous voulons le montrer comme je vous l'ai dit sur Create. Donc, nous revenons à la forme elle-même et ensuite nous faisons ces champs d'image comme nécessaire. Donc, nous allons ici, cela définit le validateur pour être un requis. Donc, quand je vais à l'extrémité frontale, je clique sur Créer, je verrai, ok, L'image est requise. Et ce cas, je ne peux pas soumettre de produit seulement quand j'ai une image à l'intérieur. Essayons vite. J' ai créé ici un produit. Je sens déjà le formulaire et j'ai également téléchargé l'image. Donc, quand je clique sur Créer, je verrai que le produit est vraiment créé. Mais quand il n'y a pas d'image, alors j'aurai une erreur. Cette image est requise comme nous l'avons vu précédemment. Mais ce que je veux maintenant quand je passe en mode Edition, je ne veux pas que ce champ soit requis lorsque l'utilisateur met à jour un produit. Par exemple, je suis en train de mettre à jour celui-ci. Cliquez sur Mettre à jour, je vais obtenir une erreur. L' image est requise car l'utilisateur ne veut pas modifier l'image. Donc il n'a rien téléchargé, mais le champ lui-même est vide. La façon de corriger cela, que je ne sens pas le champ d'image à nouveau pour rendre pas nécessaire parce que sinon quand je mise à jour, je vais renvoyer à nouveau le fichier et le fichier sera téléchargé à nouveau. Et j'aurai des fichiers répliqués dans le back-end là-bas. Bonne façon qu'en mode édition, je peux supprimer ces règles de validation. Ensuite, je peux dire quand il y a ID et cet ID, quand je reçois le produit, tout va bien. Je vais ici et je dis ce produit point pour cette image elle-même. Et puis nous disons définir à nouveau les validateurs, et les validateurs seront nuls, comme nous l'avons dit ici, nous avons des validateurs corrects, mais ces validateurs ne sont maintenant rien tableau vide. Et pour que cela fonctionne, si vous vous souvenez, lorsque nous avons mis par lots une valeur de l'image, nous devons vérifier la valeur de mise à jour et la validité. Donc, nous pouvons à nouveau appeler cela pour mettre à jour et actualiser ce champ de formulaire pour prendre tous les changements qui a fait là, nous pouvons ce point image de formulaire de produit, puis à nouveau mettre à jour la valeur et la validité. Donc, quand nous disons celui-ci, alors nous verrons qu'il a été actualisé et alors le validateur ne sera plus actif. Donc, quand je vais ici, je dis année 2002, et je n'ai rien dans ce domaine et ce n'est pas valide parce que je n'ai pas de dossier ici. Mais quand je clique sur la mise à jour, cela fonctionnerait et il mettra à jour le fichier. Mais quand je vais à un nouveau produit, alors ce champ sera requis. Je ne peux pas créer un produit seulement quand je sens le champ ici. Donc, en mode édition, nous avons requis et n'allons pas modifier le mode, ce n'est pas nécessaire. Vous pouvez faire de même pour tous les champs. Cette image était un exemple seulement. 114. Ajouter la pagination de produits de table: Dans cette conférence, nous allons voir comment ajouter l'expéditeur à la table de liste de produits. Ajouter la paginer en prime NG est très facile. Ce n'est qu'une propriété, vous pouvez l'ajouter et la variable aura une pagination. Donc, quand nous allons à prime NG et ensuite nous allons à la table, il y a une catégorie appelée page. Et ici, vous verrez comment vous pouvez utiliser le paginé est seulement propriété supplémentaire, qui est appelé paginé ou à travers. Ensuite, vous pouvez voir combien de lignes vous pouvez afficher dans chaque page que vous pouvez afficher ainsi qu'un rapport sur la page. Par exemple, cela montre une à dix entrées sur 100 et vous ne pouvez pas avoir de modèle pour cela. Vous pouvez donc spécifier un texte que vous souhaitez afficher dans ce rapport. Et aussi les lignes par option de page, qui est celle-ci. Vous pouvez également afficher les options du nombre de lignes que vous souhaitez afficher dans une page. Ajoutons ça à notre table. Je vais ajouter le paginé à notre table. Donc, je vais ici et dire paginate est à travers les lignes sont 10. Donc nous gardons ça. Nous passons de nouveau à notre demande. Il est encore chargé. Et nous verrons que nous avons eu l'initiateur. Vous pouvez ajouter les autres modèles tels que rapport Shore Current ou si vous souhaitez avoir des lignes par page option. Donc c'est à vous de choisir. Pour moi. Je me sens que c'est beau comme ça. 115. Liste de tables et services d'utilisateurs: Ok, comme nous l'avons convenu dans ce cours, que nous n'allons pas répéter les choses encore et encore. Donc, auparavant, nous avons fait la table des catégories et ce sera pour les utilisateurs la même chose. Donc, pour cela, je crée un composant qui est appelé liste des utilisateurs. Et le composant de liste de cet utilisateur a exactement la même chose que nous avions dans des catégories comme le toast lui-même, comment nous avons la conformation sur les opérations. Et aussi la page d'administration, je vais juste remplacer ceux pour être des utilisateurs et aussi ici les utilisateurs. Et puis nous avons à nouveau le bouton Nouveau pour ajouter un nouvel utilisateur. Et aussi nous avons la table qu'ils vont valoriser, seront les utilisateurs et aussi leurs champs, que nous savons tout sur les utilisateurs et comment nous les avons reçus à partir du backend. Pour moi, je vais afficher dans le tableau seulement le nom, e-mail et s'il est administrateur ou non, et le pays. Et nous pouvons aussi rendre ces tables ou ces colonnes triables ou non. Et pour cela, nous avons l'utilisateur, et l'utilisateur a un nom. Email est admin et pays. Et nous avons le bouton Supprimer l'utilisateur et mettre à jour l'utilisateur. Et pour cela, nous avons créé la route qui sont déjà définis précédemment, avons-nous fait catégories et produits. Nous avons les utilisateurs, qui se réfère au composant de liste de l'utilisateur et le formulaire qui est que vous ne parvenez pas aux utilisateurs du composant. Donc, pour saisir les données de la base de données aussi, nous avons créé les services pour l'utilisateur. Donc, le composant utilisateur, j'ai le service utilisateur et le service utilisateur. Si nous y allons, il aura les utilisateurs obtenir l'utilisateur, créer un utilisateur, mettre à jour et supprimer exactement comment nous l'avons fait précédemment avec les catégories. Et l'URL de l'API sera pour les utilisateurs. Et j'ai mis le service exactement dans la bibliothèque de l'utilisateur, pas dans la bibliothèque de produits parce que nous utilisons maintenant la bibliothèque de l'utilisateur. Ainsi, la bibliothèque de l'utilisateur aurait un dossier appelé services. Et à l'intérieur des services, nous aurons des services aux utilisateurs. Et aussi, j'ai créé un modèle de l'utilisateur exactement comment nous l'avons dans le back-end, comme ID, nom, mot de passe, e-mail, téléphone et jeton. S' il a un jeton, comme nous le verrons plus tard, est administrateur, Rue, Appartement, code postal, ville et pays. Et nous revenons au composant de liste d'utilisateurs. Comme toujours, quand NG sur elle, je dis obtenir pas des catégories, mais obtenir des utilisateurs. Et ces utilisateurs, nous les avons déjà dans le back-end. Donc, nous avons ici aux utilisateurs et aussi obtenir des utilisateurs. Et puis j'utiliserai les services utilisateur pour obtenir les utilisateurs et leurs utilisateurs abonnés. Et this.userId sera les utilisateurs que nous avons définis comme une classe membre, qui est tableau d'utilisateurs. Et puis je l'utilise dans cette table comme une valeur. Et nous vérifions le front end, nous verrons que la liste de l'utilisateur est venu comme ça. Donc, nous avons ici le nom d'utilisateur, l'email est admin, et le pays, il est vide ici parce que dans la base de données ce pays est aussi vide. Nous les mettrons à jour quand nous ferons l'édition dans le même temps que j'ai fait aussi, cette suppression, qui sera également boîte de dialogue de confirmation, comme voulez-vous supprimer l'utilisateur ? Et puis l'utilisateur peut sélectionner oui ou non, puis il exécutera la bonne décision. Donc ici, nous avons aussi supprimer l'utilisateur et nous exécutons ce code lorsque l'utilisateur clique sur le bouton Supprimer ajouter, quand je vais à la liste de l'utilisateur, nous appelons à nouveau le service de confirmation. Nous devons donc confirmer si les utilisateurs doivent être supprimés ou non. Et puis, lorsqu'ils acceptent cela, puis Service utilisateur, nous appellerons un utilisateur de suppression avec l'ID utilisateur sélectionné. Et puis j'actualise à nouveau la liste en obtenant les utilisateurs. Et puis le service de message, qui me montrera que l'utilisateur est supprimé ou l'utilisateur est supprimé. Et rappelez-vous que nous avons importé l'utilisateur, le modèle utilisateur et les utilisateurs à partir de l'utilisation de la bibliothèque. Je voudrais ajouter une chose ici que je ne veux pas afficher est admin true ou false ? Nous pouvons, par exemple, afficher une icône ou nous pouvons afficher quelque chose dans l'utilisation finale prime est appelé tag. Et tag, nous pouvons utiliser l'une de ces balises en fonction de l'état s'il est administrateur ou non. Ainsi, par exemple, j'afficherai cette balise lorsque l'utilisateur est admin, et j'afficherai ce DAG avec cette icône lorsque l'utilisateur n'est pas administrateur. Alors faisons ça. Nous pouvons également importer le module de tag dans notre module d'application. Et quand nous allons ici, nous l'utilisons dans notre module UX. Et nous pouvons utiliser l'exemple qui vient avec des icônes. Donc, il l'a utilisé d'une manière comme si nous allons à la source, nous verrons les icônes qu'il a utilisé p tag. Et puis il a spécifié une marge, puis il a sélectionné l'icône et puis la gravité sera le succès et la valeur sera le succès. Nous n'avons pas de valeur ici, donc nous aurons seulement icône. Donc, nous pouvons utiliser ce dag et aller à notre composant de liste d'utilisateurs. Et voilà, administrateur. Nous ne allons pas vérifier cela, mais nous dirons que l'utilisation de ce DAG et ng-if montrera cette balise ou non basée si l'utilisateur est administrateur ou non. Donc, je dirais que l'utilisateur est admin. Donc, si l'utilisateur est admin, alors faites ou affichez ce badge ou cette balise. Et comme nous l'avons dit ici, nous n'avons pas besoin de la valeur. Donc, nous pouvons l'enregistrer et le vérifier dans les poux avant, nous verrons que nous avons déjà cette étiquette et nous pouvons également utiliser les appels comme il est autour d'elle. Donc on ne peut pas dire que arrondi est vrai. Nous pouvons définir cette balise comme une bordure arrondie, donc nous pouvons l'ajouter ici. Nous avons un travers arrondi, donc il a entrée qui est appelée arrondie. Donc nous économisons. Et encore une fois, quand ce n'est pas admin, alors je vais afficher le danger. Et je dis que l'utilisateur n'est pas administrateur. Donc, ici, nous avons une autre balise P et je dis MET ng-si pas admin, puis l'icône sera une autre icône et la gravité sera danger, comme le rouge et arrondi à travers. Donc, quand nous allons à nouveau et nous vérifions l'icône de l'icône pour il est temps, donc nous pouvons le prendre et le placer ici. Nous sauvegardons l'application et vérifions si tout fonctionne bien. Donc, comme vous le voyez ici, nous avons alors l'administrateur à venir avec le flux vrai ou faux d'ici, je ne le ferai pas si l'administrateur a cette icône, donc il est administrateur. Sinon, il n'est pas ajouté. Donc je vous montre ceci parce que je veux voir comment nous pouvons rendre les valeurs à l'intérieur exactement comme nous le voulons. Donc, quand vous vouliez jouer icône, vous pouvez l'afficher. Si vous voulez l'image, vous pouvez afficher l'image comme nous l'avons vu dans le produit. Et si vous voulez afficher quelque chose d'autre comme un composant, vous pouvez le faire aussi bien que nous le voyons ici dans Admin. 116. Formulaire de utilisateurs Ajouter et modifier: Ok, dans cette conférence, je passe par le formulaire utilisateur. Le formulaire utilisateur que j'ai créé exactement aussi comme catégories, comme je vous l'ai dit, parce que les catégories seront notre référence. Et à partir de cela, nous aurons un modèle et utiliserons ce modèle partout où nous le voulons. J' irai vite pour ne pas répéter les mêmes choses. Mais si vous voulez tout en détail, comment nous avons créé ce formulaire, vous allez vérifier les catégories pour. Donc les catégories se forment. J' ai tout expliqué en détail comment nous construisons ce formulaire. Donc exactement comment nous avons fait avec les catégories. Vous savez que le modèle d'utilisateur que nous avons créé précédemment, il a besoin d'un nom, mot de passe, e-mail, et d'autres choses. Et sur cette base, j'ai créé les quatre. Donc tout est pareil. Nous avons un toast pour les messages de confirmation et aussi l'en-tête, la barre d'outils qui contiennent le onsubmit et annuler si vous voulez le voir ici plus en détail, je vous ai montré. Donc, comme vous le voyez ici, nous avons la mise à jour et l'annulation et cela change lorsque je clique sur vous en fonction du mode d'édition. Et maintenant, nous avons le nom, e-mail, et aussi le téléphone. Et aussi, nous avons ici l'administrateur est l'administrateur et la rue, appartement et d'autres choses. Bien sûr, il y a de nouvelles choses que je vais vous montrer comment les faire. Par exemple, nous avons besoin, par exemple, de montrer comment valider l'e-mail, ce qui est une nouveauté, et aussi comment nous pouvons saisir ce pays vers le menu déroulant. Maintenant, je l'ai vide. Je veux vous montrer comment nous pouvons prendre les pays dans notre liste déroulante à partir d'une bibliothèque. Et dans le composant lui-même, je vais sur l'énergie dessus. Je dis init, téléphone utilisateur, et en effet formulaire utilisateur. Comme chaque formulaire que nous utilisons Form Builder, nous avons le nom qui est requis. Le mot de passe est également requis, mais lors de la mise à jour n'est pas nécessaire car comme vous vous souvenez dans le backend, comment nous l'avons fait, nous l'avons fait de telle sorte que si l'utilisateur ne met pas de mot de passe sur la mise à jour d'un utilisateur, alors il conservera le mot de passe précédent, ce qu'il a déjà fait. Mais quand il a mis quelque chose ici, alors il mettra à jour le mot de passe en fonction de cela. Donc exactement comment nous avons fait avec l'image du produit, si vous vous souvenez, la même chose exactement, nous allons faire avec l'utilisateur pour un mot de passe sera nécessaire quand je vais avoir le nouveau formulaire. Mais cela ne sera pas nécessaire lorsque j'édite un utilisateur. Donc ici, nous devons faire et gérer la chose avec un mot de passe. Donc, comme nous le voyons ici, nous l'avons requis par défaut, et puis nous allons vérifier le mode d'édition comme nous le voyons précédemment. Et puis je dirai ce formulaire utilisateur point, le mot de passe quand je suis en mode édition. Donc, soit c'est MOD est via des validateurs définis, ce sera comme un tableau vide de validateurs. Et puis nous disons ce mot de passe point, la valeur de mise à jour et la validité. Donc, comme nous le voyons ici, nous avons mis à jour ce champ après avoir vérifié le mode. Donc, quand je retourne en arrière et l'essayer, donc nous allons aux utilisateurs ou savions qu'il serait nécessaire. Et sur Edit, il ne sera pas nécessaire. Donc, nous pouvons mettre à jour si ce n'est pas nécessaire. Donc, sur cette base, j'ai aussi créé le formulaire. Nous allons avoir l'e-mail. L' e-mail lui-même est également requis. Mais ce n'est pas seulement nécessaire. Que faire si l'utilisateur met quelque chose de mal ? Comme si on le met comme ça, alors on doit lui dire non, c'est mal. E-mail. Nous pouvons le faire très facilement. C' est aussi un autre validateur, qui est appelé email. Donc, nous devons mettre un nouveau tableau, comme nous avons plusieurs validateurs. Donc, je dirai obligatoire et aussi validateur point email. Donc, dans ce cas, nous aurons deux validateurs. Mais quand nous revenons à notre formulaire et essayons de cliquer sur vous, puis dites, par exemple, un e-mail invalide, quelque chose comme ceci. Ce n'est pas un e-mail. Lorsque je clique sur Créer, je vais dire que je vais voir qu'il ya e-mail est nécessaire. Je ne veux pas avoir d'e-mail est nécessaire. Je veux dire que l'e-mail est invalide, mais quand il est vide, je dirais, ok, Email est requis. Alors, comment nous pouvons faire la différence entre deux messages. Donc, comme vous le voyez ici, nous avons ng-if email utilisateur invalide et le formulaire est soumis, puis afficher pour moi un message. Nous pouvons avoir ici deux types de messages. Donc nous pouvons diviser ce message, nous pouvons le mettre dans une plage et nous avons un autre message dans une autre période. Donc on peut avoir deux travées. Un pour l'e-mail est requis et un autre, l'e-mail n'est pas valide. Mais ici, nous devons également vérifier ng-if, quel est le type de l'erreur ? Donc, je vais dire ici aussi sur ng-if pour l'e-mail est nécessaire, je dirai les erreurs de point de formulaire utilisateur. Est un obligatoire. Alors montrez-moi ce message. Mais si l'erreur est un e-mail, alors montrez-moi l'autre message. Donc, nous pouvons mettre cela aussi bien ici et dire, au lieu d'erreurs point requis, nous disons l'e-mail point d'erreur. Donc, nous sauvegardons cela et essayons à nouveau. Et nous verrons quand je vais mettre un mauvais e-mail, je dirai e-mail est invalide, mais quand je mets vide, je verrai e-mail est nécessaire. Ainsi, vous pouvez faire la différence entre les validateurs à l'intérieur de votre email, revenant à nos composants. Donc nous avons ici deux validateurs. Et pour le téléphone, il est également nécessaire pour l'étranger comme IC ici, j'ai utilisé un nouveau contrôle qui est appelé Input Mask. Et ce masque d'entrée, si vous allez à prime NG, vous verrez que j'ai utilisé ce composant. Ce composant est juste pour vous montrer et aider l'utilisateur à entrer ce numéro d'une manière correcte. Donc, comme vous le voyez, j'ai mis un numéro et ça le masque. Donc, l'utilisation de ceci est exactement la même chose. J' ai importé le module dans le module d'application, puis j'ai utilisé un de ces exemples sont utilisés, par exemple, celui qui la police. Mais comment vous pouvez spécifier le masque que vous voulez, vous pouvez le spécifier en mettant 99 de cette façon. Donc, quand je retire cette partie aussi du masque, alors je dois avoir le masque de cette façon. Donc c'est un masquage. Donc, l'utilisateur mettra toujours cela là, de la bonne façon. Donc, vous voyez ici, j'ai le masquage exactement comme je l'ai défini ici est admin est un commutateur. Nous avions déjà vu cela dans le produit quand il est en vedette ou non. Street est un appartement de zone de texte, code postal ville. Et puis nous avons les pays. Dans la prochaine conférence, je vais vous montrer comment lister leurs pays dans cette liste en utilisant une bibliothèque externe. Mais maintenant, comme nous le voyons ici dans notre composant, que nous sommes en mesure de faire la même chose que nous avons fait avec les catégories et le produit. Donc, quand je vais en premier, je vérifie le mode d'édition et je vérifie si j'ai des paramètres sur l'utilisateur. Donc, quand j'ai un paramètre, par exemple ici, qui est l'ID utilisateur, alors je suis en mode édition. Et en mode édition, je montre quelques informations que j'ai grandi à partir du backend. J' utilise donc le service utilisateur pour obtenir un utilisateur par ID et m'abonner à cette valeur. Et puis j'ai défini les contrôles en fonction des valeurs que j'ai obtenues du backend. Mais quand je suis sur une nouvelle, alors je vais avoir ajouté un producteur. Et cet utilisateur Ajouter va créer un utilisateur pour moi. Et puis il affichera message de succès et revenir en arrière quand ils sont vides. Et l'emplacement, nous revenons à la liste de l'utilisateur et s'il y a un échec, il me dira que l'utilisateur n'est pas créé. Nous avons parlé de tout cela dans les vidéos précédentes de catégories et de produits. Vous pouvez les voir plus en détail et les répéter si vous ne comprenez pas quelque chose. Je vous explique ici seulement les nouvelles choses qui sont vraiment importantes pour vous, ce que nous n'avons pas fait auparavant dans le cours et la prochaine conférence, Voyons comment nous pouvons remplir leurs pays en fonction d'une bibliothèque externe. Comme je vous l'ai déjà dit. 117. Réaliser les pays de décrochage à l'aide de pays i18n iso: Ok, super. Maintenant, dans cette conférence, je vais vous montrer comment sentir la liste des pays. Bien sûr, nous n'aurons pas un éventail de pays dans le monde. Non, mais nous allons utiliser une bibliothèque qui est toujours mise à jour avec le code des pays et les noms. Et cette bibliothèque s'appelle IAT EN, pays ISO. Et vous pouvez le trouver sous forme de paquets MPM et vous pouvez l'installer via ce commentaire. Je vais donc au composant de formulaire de nos utilisateurs et je vais faire remplir la liste du pays ici. Donc, nous avons maintenant tableau vide parce que nous l'utilisons pour la liste déroulante comme nous l'avons fait exactement avec les catégories dans le produit. Donc, tout d'abord, nous devons installer la bibliothèque qui arrête notre compilateur, puis coller la commande de MPM install. Et puis nous verrons comment nous pouvons appeler cette bibliothèque et appeler la liste des pays. Ok, comme vous le voyez ici, je l'ai installé déjà eu. Maintenant, si nous allons au formulaire de l'utilisateur, nous devons avoir le champ du pays, exactement comment nous avons fait avec les catégories. Nous pouvons définir une méthode qui est appelée, par exemple, obtenir des pays. Et cela donne aux pays, je vais initialiser celui d'un pays et les obtenir de cette bibliothèque. Nous définissons donc une nouvelle méthode. Nous l'appelons pays Git privés, et il sera défini ici. Allons à la documentation de cette bibliothèque. Je vais aller voir ici. Il dit que je dois définir une variable qui s'appelle pays, et ensuite je ferai une demande. Ok, ici, il utilise un JavaScript, mais dans TypeScript, si vous voulez importer une des bibliothèques, vous devez faire ce qui suit. Tu dois aller ici. Et après avoir installé la bibliothèque elle-même, vous dites Importer puis artistique ou star. Et puis vous dites, comme vous définissez, par exemple, une constante que vous allez utiliser pour cette bibliothèque. C' est comme je dis, importez pour moi tout et mettez-le dans une constante, appelez-le pays par exemple, liste ou lèvre comme bibliothèque. Et puis nous disons de. Et puis vous définissez le chemin qui est défini ici. Donc, vous dites, je veux l'importer à partir de cette bibliothèque. D' accord ? que nous avons défini. Nous le mettons ici et nous verrons que tout va bien. Nous n'avons pas encore d'erreur. Ok, nous retournons dans nos pays GET. Nous devons enregistrer l'allocation et lire la liste du pays. C' est comme ça qu'il l'a dit. Donc nous ne pouvons pas copier aussi cette ligne. Disons que les pays enregistrent les paramètres régionaux et nous devons le faire, mais nous n'avons pas de pays. On a quelque chose qu'on appelle la lèvre du pays. Donc, je vais dire ici pays Lib puis enregistrer locale et ensuite exiger. Et cela requis demandera à la bibliothèque d'apporter le fichier JSON anglais qui se trouve et il a toute la liste du pays. Vous pouvez aussi utiliser la requête HTTP pour obtenir ce JSON. Mais je vais vous montrer un moyen plus facile. C' est très simple pour le faire fonctionner. Vous pouvez le faire comme déclaration et vous pouvez dire déclarer et ensuite causé, exiger. Et dans ce cas, cela fonctionnera avec espoir. Donc, comme vous le voyez ici, maintenant nous avons à acquérir et tout fonctionne bien. Et j'ai ici la bibliothèque. Ok, voyons un exemple pour obtenir tous les pays. Donc, comme vous le voyez ici, il a dit définir les pays, puis il a fait la demande et qu'il a dit console journal avec les pays, obtenir des noms en anglais et sélectionner officiel. Alors faisons cela de cette façon et essayons de voir ce que nous avons dans notre journal de console pour cartographier les choses exactement comme nous voulons pour notre liste déroulante. Donc, je vais mettre ce code ici. Je remplace la lèvre de ce pays par celle-ci. Et puis on peut voir ce qu'il va taper pour nous. Après avoir enregistré, je vais à nouveau dans le panneau d'administration, mais nous devons exécuter le projet. Donc, comme nous le voyons ici, ce projet est en cours d'exécution avec succès. Nous nous rafraîchissons ici pour voir ce que nous allons obtenir dans la console. Ok, dans la console, j'ai de l'objet. Et cet objet a le code de leur pays, puis le nom de celui-ci. D' accord, mais comme c'est le cas, on ne peut pas l'accepter comme ça. Nous devons avoir les pays comme liste parce que nos pays ont abandonné, acceptent les pays comme un tableau. Donc, nous pouvons utiliser ou trouver un moyen de mapper les choses qui sont à l'intérieur de cette méthode en tant que tableau. Alors, comment peut-on faire ça ? Donc, je vais faire d'abord, je vais me débarrasser de ce journal de la console. Nous l'utiliserons pour autre chose. Donc, je dirai que les pays vivent, donnez-moi les noms en anglais, et ensuite nous devons cartographier dessus. Donc, nous ne pouvons pas mapper sur l'objet en utilisant une méthode qui est appelée entrées point d'objet. Et dans cette méthode, cela me permettra de boucler toutes les entrées comme si elles étaient un tableau. Pour vous expliquer plus clairement, je vais faire, je vais supposer que ces entrées comme tableau et je vais dire carte, ok, je prie accepter cette carte et cette carte a été retournée pour moi entrée par entrée. Pour faire une opération avec. Donc, par exemple, la console consigne cette entrée. Donc je vais dire ici, ok, consoles log pour moi cette entrée. Rafraîchissons et réessayons cela et nous verrons ce que nous aurons dans le verrou de la console. Donc, comme vous le voyez ici, il est actualisé et nous avons tous les membres du tableau. Donc, l'objet vient toujours comme premier numéro est la clé, et le deuxième membre est l'Espagne. Donc, et nous avons tous les tableaux comme ça. Donc, nous pouvons alors avec la carte retour comme exactement ce que nous voulons. Donc, sous forme d'utilisateurs, nous avons besoin de l'option étiquetée comme un nom et la valeur de l'option comme ID. Donc, nous pouvons cartographier en fonction de ça. Donc, nous pouvons dire ici, ce point pays sera des entrées d'objet sur tous les pays qui sont dans cette bibliothèque et cartographier au-dessus d'eux. Et au lieu de retourner l'objet lui-même, l'entrée elle-même retournée pour moi et l'objet où l'ID est l'entrée 0, comme l'index 0. Donc, nous avons ici l'ID et le nom sera entrée et un. Donc, nous aurons l'ID comme entrée 0 et le nom de leur pays sera entrée un pour la deuxième entrée. Donc, après cela, nous allons consigner les pays. Donc, je vais dire ici, console point journal à nouveau ces pays. Donc, après avoir sauvegardé cela, nous actualisons, nous allons à notre application et nous verrons que nous avons retourné une liste ou un tableau de tous les pays avec l'ID de code et le nom. Et si je vais ici aux pays, parce que comme vous vous souvenez que nous avons ces pays est tableau, tableau vide. Et ce tableau est utilisé pour les options de cette liste déroulante. Donc, quand j'irai ici, je verrai que j'ai tous les pays. Et la belle chose que je peux chercher à travers eux pour que je puisse dire l'Espagne, ok, j'ai eu l'Espagne et tout fonctionne parfaitement. Et bien sûr, je peux ensuite mettre à jour mon utilisateur. Donc, je dirais mise à jour ici et puis il me ramènera et je vais arriver ici ce pays et est la douleur. Donc, c'est parce que ce que nous stockons dans la base de données, mappage à la Rename, alors vous devez faire aussi le mappage ici dans cette liste. Nous devons donc faire une fonction dans la liste de leur pays. Et puis il ira chercher l'Espagne, puis récupérer le nom du pays. Et cette méthode est fournie ici. Donc vous pouvez dire leur bibliothèque, donnez-moi le nom du code nous, et il vous donnera le nom du pays, qui est États-Unis d'Amérique. Comme un devoir pour vous ou comme une mission, je veux que vous fassiez pour moi dans la prochaine conférence, la mission que nous obtenons ici dans la liste, le vrai nom du pays, mais pas le nom ou le code du pays. Donc, votre travail sera basé exactement dans la liste des utilisateurs. Donc, vous devez à nouveau utiliser cette bibliothèque dans les utilisateurs, ce composant. Et puis vous devez cartographier ou trouver le nom où nous cartographions ce champ. Donc, au lieu de cet utilisateur ce pays, vous devez faire quelque chose ici. Cette solution est également fournie avec l'affectation et je l'attacherai aussi au code. De cette façon, nous avons tout fait en ce qui concerne l'utilisateur. Donc, nous avons tout nom, e-mail est admin et pays. Et comme nous avons convenu précédemment, que l'utilisateur pour nous est le même que le client. Et si vous voulez le rendre plus grand ou plus compliqué, vous ne pouvez pas séparer les utilisateurs du site sur les clients parce que nous utilisons ici l'utilisateur en tant que client. Et il peut être admin ou non, mais ce sera exactement la même façon que nous avons fait avec les utilisateurs pour attacher un client. 118. Réaliser la solution de pays: Comme vous le voyez, j' ai récupéré avec succès le nom complet du pays. Comment j'ai fait ça ? Tout d'abord, pour le pays dans la liste des pays des utilisateurs, j'ai créé une méthode appelée get country name, puis je passe à l'utilisateur ce pays. Et parce que nous enregistrons l'ID du pays dans la base de données. Alors vérifions le nom de ce pays. Comme vous le voyez ici, je vérifie s'il y a une clé de pays passée à la méthode, puis retourné pour moi, Users Service fait bon pays. Ok, donc j'ai défini une méthode est appelée bon pays dans le service utilisateur. Donc, comme vous le voyez ici, ils obtiennent pays utilise la lèvre du pays ou leur bibliothèque pays, que nous avons utilisé précédemment dans la vidéo précédente. Et puis obtenez le nom, puis iPads la clé de pays, puis la langue que je veux obtenir ceci. Si vous vous souvenez, il y avait quelque chose pour l'enregistrement de cette bibliothèque, comme vous le voyez ici, si nous voulons l'utiliser, nous devons enregistrer qu'ils sont situés. Alors comment j'ai fait que j'ai supprimé cet enregistrement et je l'ai mis dans le constructeur de ce service, du service utilisateur. Donc, il sera appelé une seule fois. J' ai donc déjà ajusté la dislocation une seule fois parce que service utilisateur est appelé Une seule fois lorsque j'initialise l'application, je supprime cela des utilisateurs car je l'ai supprimé d'ici. Donc, nous n'avons pas encore cet appel de la bibliothèque ou l'enregistrement. Nous avons seulement la même méthode get countries. Et puis j'ai dit que ces pays utilisent le service d'utilisateur et ensuite obtenir. Je vais donc aller chercher des pays. Et comme vous le voyez ici, je retourne les mêmes entrées d'objet de code. Et puis j'utilise la bibliothèque que j'ai initialisée ici dans le service utilisateur. Ainsi, nous ne l'utilisons qu'une seule fois. Nous l'appelons une fois, et nous n'avons pas de duplication de l'enregistrement des paramètres régionaux comme nous l'avons vu précédemment. Donc, toujours quand vous avez un peu de duplication, jetez les choses au service. En outre, j'ai entendu une erreur parce que j'utilise des pays dans le service utilisateur. Que faire si je veux utiliser le pays et le pays Git dans d'autres bibliothèques, comme par exemple, dans des commandes ou dans des produits. Dans ce cas, je supprime tout cela et crée un service qui est appelé, par exemple, les utilitaires. Ces utilitaires me donneront, par exemple, des pays, villes, par exemple, pour la transformation de textes ou pour le formatage de nombres. Nous pouvons donc utiliser ces utilitaires partout dans notre application ou notre espace de travail. Nous verrons cela plus tard quand nous aurons besoin d'obtenir des pays et obtenir pays dans notre projet étape par étape. 119. Créer des documents Composants Tableaux, des détails et des services: Ok, Maintenant, nous sommes là, nous allons créer la liste des commandes et la page des détails de la commande. Donc, pour cela aussi, nous devons faire deux composants. abord, ou les listes où je verrai le tableau de l'ordre et aussi le détail de l'ordre où je verrai les détails de l'ordre comme nous le faisons toujours, nous allons créer deux composants. Bien sûr, j'utilise une console ECS. Comme toujours, j'ai nommé un nouveau composant, qui est appelé liste des ordres, et il sera créé une application ou un administrateur. Et puis j'ai un style de vie pour ne pas générer de fichier CSS parce que nous n'en avons pas besoin. Nous avons des styles publics. Et aussi j'ai créé un sélecteur qui sera admin ou il y a une liste, et puis j'ai sauté ces tests. Laissons cette partie. Et puis nous verrons le suivant, qui est le détail de la commande. Ici, nous n'aurons pas de forme, nous aurons sur les détails et dans les détails je vais afficher la commande et puis je peux changer l'état de la commande comme nous le faisons toujours avec n'importe quel problème. Donc ici, je vais appeler l'article en tant que détail des commandes d'administration. Alors, quel sera le sélecteur ? Et ce sera exactement les mêmes options que nous choisissons pour la liste des commandes. Ok, revenons à notre structure de code pour voir si tout est créé. Ok, nous l'avons maintenant, tout est créé. Nous avons maintenant un composant vide. Faisons d'abord la liste des commandes, la liste des commandes. Donc, ce sera exactement le même que les catégories ainsi que je vous l'ai dit, nous avons les catégories comme un modèle. Et si vous vous souvenez, nous avons toujours défini le modèle de la table, que nous avons utilisé quatre catégories. Donc je ne vais pas utiliser la même chose ici. Donc je vais copier cette partie, revenir à la liste des commandes, et ensuite nous allons faire quelques choses ici. Bien sûr, ce ne sera pas exactement la même chose. Par exemple, nous n'aurons que supprimer plus ancien, mais nous n'aurons pas, par exemple, mettre à jour tout cela. Nous dirons l'ordre sûr. Comme nous allons voir le détail des commandes parce que nous ne allons pas les éditer. Je vais donc renommer ces choses rapidement. Donc, comme vous le voyez, j'ai tout renommé. Nous avons maintenant des commandes, une liste de commandes, et puis je l'ai renommé coule ici. Bien sûr, la commande ne viendra pas avec de nouvelles, comme comment nous avons ici avec la catégorie, parce que la commande sera placée par l'utilisateur dans la boutique elle-même. Ainsi, l'utilisateur va passer la commande. Nous ne pouvons pas créer ici une nouvelle commande. Donc, dans ce cas, nous pouvons supprimer cette partie. Donc, bien sûr, vous pouvez toujours être en mesure de créer une nouvelle commande. Il vous suffit de refaire le formulaire et de suivre ce que nous avons fait précédemment. Mais maintenant pour le détail, je veux vous montrer différentes choses pour ne pas être la même chose que nous avons fait précédemment dans les parties précédentes. Donc, je vais me débarrasser de toute cette barre d'outils qui est utilisée pour créer ou un nouvel ordre afin que nous puissions nous en débarrasser comme nous le voyons ici. Et maintenant, nous aurons une table plus simple. Donc, comme vous vous en souvenez, l'ordre a quelques champs que nous avons définis précédemment dans le back-end. Donc maintenant, nous allons faire à nouveau aussi, le même modèle que nous avons pour le front end. Et si vous vous souvenez, nous avons créé une bibliothèque qui s'appelle les ordres. Donc, dans les commandes, nous allons placer notre modèle aussi. Donc, je vais le faire rapidement. Donc, comme vous le voyez ici, j'ai créé le modèle de commande. Le modèle de commande contient quelque chose appelé article de commande. Et l'article de commande, il devrait être aussi un autre modèle. Nous pouvons donc créer ce modèle aussi. Donc, nous avons ici un autre fichier qui est appelé élément de commande. Donc, avec cet article de commande, je vais placer une nouvelle classe qui s'appelle article de commande. Et puis nous avons cet article de commande qui aura l'ID de produit et la quantité. Nous allons donc revenir à l'article de commande et importer cet article de commande. Donc, nous aurons ici ou l'article qui est importé à partir de l'article de la commande. Nous devons aussi nous rappeler que nous devons exporter ces modèles dans le fichier d'index. Donc, nous avons ici aussi, star d'exportation du modèle lui-même. Et puis commandez. Donc, nous avons ici la commande et aussi nous avons besoin d'exporter l'article de commande afin que nous sauvegardons tout fonctionne bien aussi bien que vous voyez ici nous avons ici le module de commande que nous avons créé précédemment. Plus tard. Nous allons également créer les services. Donc, nous allons créer maintenant dossier, Appelons ça services, que nous allons placer à l'intérieur, le service des commandes. Revenez donc à notre application. Nous allons définir une autre variable ou un autre membre de classe, qui est appelé ordres. Et les troubles auront un ordre de type. Et cet ordre que nous avons créé précédemment, et ce sera un tableau vide au début. Parfois, vous obtenez cette erreur comme l'élément de commande de propriété est manquant dans le type undefined. Il est donc préférable d'avoir comme toujours les champs. Facultatif comme toujours. Donc, si vous avez ce champ en option, cela ne vous dérangera pas tant l'Eastland qu'il vous montre. Oui. D'accord. Ce n'est pas défini. Vous voulez dire que vous devez le définir et ensuite vous créez un élément de commande, etc. Donc, lorsque vous définissez un tableau uniquement, il est préférable de simplement le faire un optionnel. Et ici, vous n'aurez plus de problème. Et nous les ajoutons aussi pour ne pas avoir de problème ici. Donc, nous aurons les ordres, tableau des ordres et le tableau ordonné est vide. Donc, nous revenons à notre modèle et nous allons ajouter ces modules ou ces champs membres ici. J' ai donc ajouté ces colonnes comme le prix total de l'utilisateur, puis la date commandée et le statut. Et ici, nous aurons la colonne seulement pour les actions. Ainsi, comme vous le voyez ici, vous pouvez ajouter les colonnes que vous voulez en fonction de ce que vous voulez afficher. Donc ici, je n'ai besoin que de ça, mais bien sûr, vous avez la liberté d'ajouter plus de choses pour vous. Donc maintenant, nous allons à nouveau au modèle ici, aux valeurs où nous affichons les valeurs de l'ordre. Et nous allons enlever tout ça. Nous gardons simplement les boutons d'action et nous montrerons seulement comme les valeurs qui sont dans ces champs. Ok, ajoutez, j'ai ajouté tous ces champs. Nous verrons plus tard comment nous pouvons faire un mauvais pour leur statut. Comme nous allons montrer une couleur de l'ordre en fonction de l'état de celui-ci. Je voudrais également ajouter quelques commandes afin que nous ne puissions pas avoir de commande pour leur nom, désolé pour l'utilisateur, pour le prix. Et aussi vous pouvez par date et vous pouvez commander ainsi le statut. Alors faisons-le vite. Donc, comme vous le voyez ici, j'ai défini tout le personnel pour être trié comme il nous faut. Jetons un coup d'oeil si on n'a pas de problème là-bas. Alors j'irai à la table des commandes. Vous voyez que j'ai une erreur que je n'ai pas défini l'ordre d'itinéraire. Donc, nous devons aller au module de l'application et ensuite nous devons définir l'ordre ainsi que nous l'avons vu précédemment. Donc, d'abord, j'ai besoin d'avoir l'ordre, par exemple, la liste. Il s'agira donc de commandes, composant de liste, et nous aurons ici des ordres. Et aussi, nous devons définir un ID. Donc, nous serons assez, par exemple, avec seulement des commandes. Et puis je dirai pour moi l'ID sans, par exemple, le, la forme elle-même parce que nous ne nous sommes plus formés ici. Donc, ici, nous allons dire détail et nous économisons. Donc, revenant à l'application à nouveau, et après qu'elle est chargée, nous verrons que nous pouvons aller à la commande et voir les utilisateurs et l'état et l'ordre de date. Mais nous n'avons pas de données. Nous devons créer un service pour récupérer les données à l'extrémité frontale. Exactement comme on l'a dit. Encore une fois avec la catégorie, nous pouvons également copier ce service de catégorie et remplacer les choses ici. Alors faisons ça aussi vite. Et bien sûr, vous pouvez utiliser la possibilité de remplacer. Donc nous avons ici la catégorie et vous ne pouvez pas correspondre à l'affaire. Donc, je peux correspondre à l'affaire, cette affaire ou à des cas. Donc, je dirai remplacer la catégorie par l'ordre. Donc tout sera remplacé immédiatement. Et aussi, si vous voulez avoir une lettre majuscule, comme dans certains cas comme cette catégorie a une lettre majuscule. Vous pouvez également le remplacer par l'ordre des lettres majuscules. Donc, comme vous le voyez ici, j'ai également remplacé tout pour être comme un ordre. Ok, c'est très simple. Nous avons aussi des catégories, donc vous pouvez également remplacer cela. Donc, nous disons que les catégories sont des ordres. Eh bien, ici, nous devons le remplacer. Comme vous le voyez, nous avons encore des catégories, mais avec lettre majuscule. Nous avons donc ici des ordres et aussi des lettres majuscules, et nous les remplacons tous. Comme vous le voyez maintenant, nous avons toutes les commandes, est prêt ou le service est prêt. Nous n'avons pas à le faire et à en souffrir autant. Donc, nous le sauvegardons et ensuite nous exportons comme nous l'avons fait auparavant dans d'autres bibliothèques. Donc je vais voir ici Services que, ok, maintenant nous revenons à notre application. Nous allons au composant liste et nous verrons comment nous pouvons ajouter toutes ces commandes. C' est très simple, exactement comme nous l'avons fait avec les catégories. Nous avons juste besoin de faire dessus que nous avons besoin d'initialiser ou d'obtenir les commandes. Donc, je dirais que ce point, obtenir les détenteurs et obtenir tous ceux sera une méthode que je vais définir maintenant. Donc, il sera ici, je reçois des catégories ou obtenir des commandes. Et ceci ici obtenir des ordres. Il demandera le service de commande. Nous devons donc également importer le service de commande. Donc, comme vous le voyez ici, je l'ai fait rapidement parce que nous l'avons déjà fait dans des catégories. Et aussi nous pouvons faire avec ici. Donc, après cela, je vais saisir les données aussi bien ici, comme vous le voyez, nous avons déjà les ordres, mais comme vous le voyez, nous avons l'utilisateur qui vient comme objet, objet. Mais ce n'est pas l'objectif que nous voulons avoir parce que nous avons besoin d'avoir seulement le nom ou l'e-mail. Parce que si nous allons au réseau et vérifier notre exemple, cette demande que nous avons créé quatre commandes comme nous le voyons ici. Ensuite, nous verrons que les articles de commande jeux dans la façon dont ils sont peuplés. Par exemple, l'utilisateur est entièrement renseigné. Donc ce dont j'ai besoin, c'est seulement le nom, exactement comme nous l'avons fait dans le back-end. Donc, dans ce cas, vous pouvez afficher le nom ou vous pouvez afficher, par exemple, l'e-mail. Donc, je vais afficher seulement le nom. Alors je dirai ici ce nom. Mais si vous vous en souvenez, nous avons défini l'utilisateur dans le modèle comme une chaîne. Il est donc préférable de le définir en tant qu'utilisateur. Donc, ici, nous obtiendrions l'utilisateur d'une autre bibliothèque, qui est appelée Importer l'utilisateur. Et cet utilisateur sera des utilisateurs. Et comme vous le voyez ici, nous allons obtenir l'utilisateur et le placer ici. Et puis nous aurons tout va bien, afin que nous puissions obtenir le nom de la bonne façon. Alors sauvegardons ça à nouveau et vérifions notre front end. Ok, je vois que j'ai mon nom ici. J' ai le prix total et j'ai la date à laquelle j'ai passé la commande, mais il a besoin de formatage et le statut est 0. Alors ce que cela signifie 0. Pour moi, je voudrais avoir quelque chose comme la dénomination, comme en attente, expédition ou expédiée ou livrée. Je veux donc montrer l'état de la commande que nous allons éditer ici. Ainsi, l'utilisateur ou l'administrateur de la boutique, il peut mettre à jour l'état de la commande. Donc, pour cela, il est préférable de faire un peu de cartographie. Et cela, ce que nous verrons dans la prochaine conférence. 120. Statut de l'ordre: Ok, dans cette conférence, nous allons voir comment nous pouvons définir un statut pour le propriétaire. Et ce statut, je vais utiliser les tags que nous avons utilisés précédemment. Donc, je peux montrer dans une couleur comme livré, ou c'est une expédition, ou c'est en cours, ou c'est, par exemple, reçu, et cetera. Donc, je vais vous montrer comment je vais définir ces constantes et ensuite comment allons nous mettre cette balise dans notre table. Donc, tout d'abord, nous avons déjà importé ce module dans notre module d'application. Nous avons donc juste besoin d'avoir ou de définir la balise elle-même. Donc, je vais prendre ce DAG et ensuite le placer dans mon code où je récupère le statut de la commande. Donc, nous allons placer cette étiquette. Rafraîchissons pour voir si tout fonctionne bien. Et puis nous verrons que l'application est rechargée. Parfait. Nous avons maintenant en vous, Ok, nous allons maintenant voir la coloration. Nous allons voir comment ajuster le texte. Comme vous vous en souvenez, vous pouvez définir votre propre mappage pour l'ordre dans lequel vous pouvez le définir. Vous n'avez pas à le faire dans le back-end. back-end n'est qu'un endroit pour stocker des données. Vous n'avez pas à gérer quels sont les types de commandes. Donc, la solution la plus simple pour cela, je vais avoir quelque chose comme le texte de l'ordre ou l'ancien texte d'état et aussi le statut de la commande lui-même, comme comment il sera coloré. Donc, pour cela, nous pouvons définir une constante. Donc, nous pouvons appeler cette constante, par exemple, l'état de la commande, et nous pouvons définir constante ici, ou vous pouvez le faire aussi dans un fichier externe. Je vous montrerai quand nous allons refactoriser ça. Donc nous devons d'abord avoir une constante. Nous pouvons appeler cet ordre constant puis statut. Et ce statut d'ordre sera l'objet et l'objet sera, par exemple, plusieurs objets. Et ces objets définiront l'étiquette qui sera comme en attente ou traitée ou expédiée, ainsi que la couleur, la couleur qui sera basée sur ces valeurs. Donc, tout d'abord, je vais placer la valeur comme ici, comme ceci, comme un objet comme celui-ci. Bien sûr, vous pouvez le faire en tant que tableau ou vous pouvez le faire en tant qu'objet. Vous pouvez également entendre définir des clés comme vous le souhaitez. Donc, selon la façon dont vous stockez ou comment vous allez stocker l'état dans la base de données. Pour moi, par exemple, le premier, il sera étiqueté, je vais l'appeler, par exemple, en attente, qui sera le premier statut et la couleur. Donc, la couleur du badge sera la couleur de cette étiquette elle-même. Donc, comme vous le voyez ici dans cet exemple, il a plusieurs couleurs, donc je vais utiliser les mêmes couleurs. Donc nous pouvons avoir cela aussi. Nous voyons qu'il utilise des informations de succès, des couleurs d'avertissement. Donc ça dépend de vous. Donc, si vous voulez des couleurs spéciales, vous pouvez le définir en CSS. Mais pour moi, ces couleurs suffisent. Donc, en tant que premier état, cette couleur sera une couleur primaire telle qu'elle est définie ici. Donc, nous avons ici le succès primaire, info, avertissement et danger. Nous allons donc utiliser ces couleurs. Donc, d'abord, j'utiliserai cette couleur, puis je définirais un autre statut, qui sera, par exemple, le traité et traité aura la couleur comme orange, ce qui sera avertissement, couleur d'avertissement. Et bien sûr, je vais définir une autre couleur ou un autre état qui sera expédié et pas cher d' avoir aussi la couleur d'avertissement comme nous sommes en cours et nous aurons un autre statut qui serait appelé livré. Et cela livré aura la couleur de succès. Et puis nous aurons comme un rejeté ou par exemple, annulé ou échoué. On peut l'appeler. Donc, nous pouvons faire un autre champ qui sera appelé échec. Donc, lorsque l'utilisateur pour effectuer un paiement ou par exemple, lorsque l'utilisateur demande le remboursement. Ainsi, nous pouvons faire, par exemple, cette couleur un danger. Ok, nous avons maintenant le statut de commande. Et ce statut de commande, nous allons le stocker dans une variable que nous avons rappelé ou le statut parce que nous allons l'utiliser dans le modèle. Donc, je dirai que le statut de la commande est égal au statut de la commande, la constante. Donc quand je vais ici, j'ai le DAG ici. Donc, je dirais que la valeur de ce DAG, vous devez définir la liaison. Donc, nous allons lier une variable ici. Nous n'allons pas utiliser une chaîne statique parce que nous avons déjà la chaîne. Nous ne pouvons donc pas dire que le statut de la commande sera le statut de la commande lui-même. Et la clé sera commandée ces statuts parce que comme vous vous en souvenez, nous avons défini des clés pour les états et basé sur ce que je suis en train d'enregistrer dans la base de données, comme nous le verrons dans le front end dans n'importe quel magasin quand j' envoie la commande et comment nous mettre à jour l'état de la commande, nous verrons comment nous stockons cela dans la base de données, puis état de la commande après avec le nom qi dot. Et ici, je vais obtenir le nom du statut ou l'étiquette du statut. Ici, nous devons avoir une étiquette, pas le nom. Et puis nous devons définir la couleur. Mais voyons d'abord, si tout fonctionne bien, je sauve tout. L' application rechargée, Ok, nous avons ici en attente et nous verrons comment nous allons changer le statut et ensuite nous verrons comment il va refléter dans ce tableau. Donc maintenant, nous avons l'attente et nous avons besoin maintenant de la coloration. Donc, pour colorer ces balises, nous devons définir quelque chose qu'on appelle la gravité. Et la gravité sera exactement la même couleur que j'ai définie dans notre constante. Alors j'irai ici. Je dirai comme cette gravité et ce sera aussi comme une liaison variable. Nous n'allons pas utiliser un texte statique. Nous ne dirons pas comme un danger ou notre chaîne ici. Non, parce que nous utilisons une variable et ce sera la même chose. Il sera également l'état de l'ordre, puis plus ancien que le code d'état, qui proviennent du backend et qui sera ensuite la couleur. Et quand nous sauverons cela, nous verrons que nous retournons la bonne couleur. Quand j'irai ici, je le verrai si ça marche bien. Donc, modifions, par exemple, l'état de l'ordre en attente. Nous pouvons le changer, par exemple, en danger, par exemple, pour voir si tout fonctionne bien. Donc, je sauve ça. Je vais ici, je vais voir qu'il est rouge. Donc nous sommes sur la bonne voie, nous n'avons aucun problème. Donc, comme je vous l'ai dit, nous définissons une constante dans le composant de la liste des ordres. Et dans l'ordre du composant Greece, j'ai aussi utilisé une variable ou un membre de classe parce que je vais l'utiliser dans le modèle. Et puis si vous vous souvenez de cette valeur de l'état de la commande retourné comme 0, et cela sera enregistré dans la base de données pour le statut de la commande. Donc 0 pour l'attente. Un est pour le traitement, trois pour l'expédition, pour quatre livrés. Et nous définissons tout ce graphique ou dictionnaire ici. Et aussi, nous utilisons l'élément d'étiquette parce que ce module de type ou composant technique demandé aussi pour la coloration et nous avons fait les couleurs exactement comment cette étiquette fonctionne pour. Date de la formule, comme vous le voyez ici, elle est formatée comme à partir du format qui vient de la base de données. Nous pouvons également formater la date en utilisant les tuyaux, comme nous l'avons fait précédemment avec le produit. Si vous vous souvenez, nous avons fait ou faire le créé à dans ce format. Nous pouvons donc le faire aussi pour la commande. Donc, nous allons à nouveau sur le terrain. On n'a pas d'étiquette, on n'a pas ça. Nous pouvons avoir l'ordre de date et placer le formatage de tuyau court pour la date. Et tout fonctionne parfaitement. Nous avons donc ici la date et le statut. Dans la prochaine conférence, nous allons créer le détail de cette commande afin que nous puissions voir plus de détails sur cette commande comme les articles et aussi le produit. Quels sont les produits et le prix de chaque élément d'un produit ? Nous verrons donc tous ces détails dans la prochaine conférence. 121. Composante de détails de commande: Ok, nous avons vu précédemment comment nous créons la liste des commandes, et nous avons vu comment nous avons créé le badge d'état pour la commande. Maintenant, dans cette conférence, nous allons voir comment faire les détails de l'ordre. Alors, quelle est l'exigence pour cela ? Les exigences sont pour moi sont juste que je veux voir les détails de la commande et changer le statut. Ils ne vont pas ici pour créer des commandes ou par exemple, mettre à jour l'ensemble des données de commande. Mais ce sera dans le front end, le front end, l'utilisateur ou le client va créer les données ou la commande dans notre numéro. Donc, je suggère un certain design que j'ai déjà fait. Comme par exemple, nous pouvons avoir tous les détails. Nous pouvons avoir le numéro de commande, la date commande et le statut de la commande, qui peuvent être mis à jour. Et aussi le prix total de la commande et les articles de la commande. Nous pouvons lister les articles de commande ici , puis l'adresse de la commande et quelques informations sur le client. Alors faisons cette structure exactement comme c'est fait ici. Donc, nous allons à nouveau à l'administrateur. Ensuite, je veux changer ici l'icône pour être beaucoup éditer, mais ce sera comme une vue. Ainsi, nous pouvons changer l'icône en fonction des icônes en énergie première. Nous avons ici icône en prime utilisation finale est appelé Pi I, donc nous pouvons utiliser celui-ci. Donc, je vais à nouveau à ma liste de commandes et puis je vais changer l'icône ici de crayon à I. Et puis nous économisons, nous allons voir que tout fonctionne bien dans notre application. Ok, on a l'icône ici. Maintenant, nous avons besoin de voir les détails de la commande. Donc, quand je clique ici, je veux aller au détail des commandes. Nous avons d'abord besoin d'un itinéraire et que nous avons déjà créé, puis référence à cette route. Donc, nous devons d'abord définir la fonction qui est appelée Afficher l'ordre. Nous irons ici encore et puis nous définirons une méthode qui s'appelle l'épaule Show Order ici. Et je reçois ici le numéro de commande de l'avant. Et nous allons utiliser le routeur. Et le routeur, comme nous l'avons dit précédemment, c'est un service ou une classe que nous pouvons utiliser. Donc, je vais avoir ici le routeur lui-même, je dirais routeur privé. Et ce sera le type de routeur. Et nous pouvons l'importer aussi Angular. Nous faisons cela comme lettre minuscule pour être utilisable. Et puis nous allons ici et dire ce point routeur de point naviguer par URL. Et puis je spécifie l'URL où je vais aller d'ici. Donc, je veux aller à la route où j'ai spécifié dans notre module. Donc, si vous vous souvenez, nous avons ici plusieurs routes. Nous avons dit que tout cela sera après que c'est une pièce d'identité. Ensuite, je vais aller au composant de détail. Donc, nous allons ici à nouveau et nous disons naviguer pour moi, commandes barre oblique, puis l'ID de l'ID de la commande. Donc, nous pouvons combiner cela avec des backticks et dire des ordres, puis nous disons l'ID de commande. De cette façon, nous naviguons par URL vers notre composant. Alors essayons ça. Nous allons ici, ok, nous avons des travaux de détail de l'année, mais comme vous le voyez ici, nous n'allons pas avoir, par exemple, la structure des forums. Nous voulons avoir quelque chose comme des détails, vous savez, donc vous devez avoir comme du texte statique. Nous n'avons pas de formulaire, donc nous n'allons pas utiliser le formulaire ici. Seulement ici quand je vais changer l'état, je vais le changer en fonction de l'événement onchange, qui revient de la liste déroulante ici. Donc on n'a pas besoin d'un formulaire. Nous avons juste besoin d'afficher une donnée. Et nous pouvons aussi utiliser cet accordéon. Donc, nous pouvons y aller et vérifier NG premier pour quelque chose qui est appelé jeu de champs. Donc, dans le jeu de champs, comme vous le voyez ici, nous pouvons l'utiliser et afficher le contenu à l'intérieur de ces ensembles de champs. Mais d'abord, nous allons avoir le titre et d'autres choses comme comment nous avons dans la catégorie. Nous avons ici le sous-titre titre, puis nous avons une barre d'outils. Nous n'avons pas besoin de barre d'outils ici, mais nous avons juste besoin de montrer comme quelques informations à ce sujet. Nous sommes dans le détail de l'ordre. Alors faisons cela comme nous l'avons fait exactement sous forme de catégories. On a utilisé quelque chose comme la carte. Et à l'intérieur de la carte, nous avons une barre d'outils. Nous n'avons pas besoin de la barre d'outils. Nous avons juste besoin, Par exemple, la page d'administration et toast pour la mise à jour. Impossible de copier uniquement cette partie au début. Et puis nous pouvons ajouter notre grille et à l'intérieur, les jeux de champs. Donc, d'abord, je vais couper pour copier seulement cette carte, puis la page d'administration et l'hôte lui-même afin que nous puissions les copier et revenir à nos détails de commande. Nous allons enlever cette partie et la placer avec notre carte postale. Nous fermons à nouveau le pKa pour être tout va bien et aussi cela. Donc, à l'intérieur du Picart, nous allons placer nos données. Donc, d'abord, nous n'avons pas besoin de mode d'édition, nous avons seulement un ordre de vue, donc nous devons supprimer toute cette partie. Nous disons que nous avons seulement une vue ordonnée. Donc, je dirais ici Voir l'ordre et ici. Nous pouvons dire que vous pouvez modifier le statut de la commande ici. Donc, nous ne pouvons avoir que cette information. Donc maintenant, nous pouvons utiliser notre ensemble de champs. L' utilisation de l'ensemble de champs est très simple, c'est juste que vous avez à copier cette partie et importer le module. allons donc importer le module lui-même comme nous l'avons fait précédemment dans notre module d'application. Donc, nous allons ici, nous avons l'importation de ce module, module jeu de champs, et ensuite nous le plaçons ici. Donc, bien sûr, comme je vous l'ai dit, nous avons beaucoup de modules. Vous pouvez également séparer les modules comme nous le ferons plus tard. Je vais vous montrer dans la partie refactoring. Nous allons, nous allons faire un module spécial seulement pour que l'UX n'ait pas très grand module. Mais nous allons ici dans le cours étape par étape. Nous enregistrons cette partie, puis nous vérifions quel est le HTML requis pour cela. Donc on peut dire ça, Ok, je veux celui qui est doublé. C' est très simple. Basculer le modèle est celui-ci. Donc nous pouvons copier cette partie et ensuite nous la plaçons ici. Et ici, nous aurons notre contenu et nous pouvons définir nos en-têtes. Par exemple, je veux basculer l'en-tête pour plus de détails, puis commander des articles, puis l'adresse de commande. Nous avons donc besoin ici des détails de commande et un autre pour les articles de commande. Et aussi nous avons besoin d'un autre pour l'adresse de commande. Donc, ici, nous sauvegardons et puis tout ici est l'alignement et le formatage pour nous. Vérifiez les ordres. On y va encore, on va vérifier. Ok, tout va bien. Mais comme vous le voyez ici, ils se collent l'un sur l'autre. Nous avons des classes prêtes pour la marge et le rembourrage afin que nous puissions les utiliser aussi bien ici. Mais je veux juste mentionner pour 1 qu'ici dans le jeu de champs ou tout composant qui est de prime et g, nous ne pouvons pas utiliser comme classe comme celle-ci et ensuite lui donner une classe comme un HTML. Il y a quelques clés spéciales pour cela, donc vous devez toujours vérifier dans la documentation, qu'est-ce qu'une clé pour donner une classe spécifique pour ce composant ? Par exemple, ici dans notre cas, cela s'appelle classe de style. Donc, dans la classe de style, je peux l'utiliser comme une classe. Donc, nous pouvons définir la classe que nous voulons pour ce panneau basculé. Donc, je veux avoir une classe qui est appelée P margin bottom, par exemple pour et la même chose pour l'autre. Alors sauvegardons cela et essayons-le pour voir si ça marche. Ok, comme vous le voyez, nous avons ici un espace. Alors refaisons-le pour les autres. Donc, j'ai besoin ici pour la classe de style aussi, et ici la classe de style aussi bien. Donc nous avons ici trois classes de style et ça marche bien. Et je pense que c'est aussi ciblable. Nous allons donc placer notre contenu, ce que nous allons avoir. Par exemple, nous avons ici le numéro de commande, date de la commande et le statut de la commande, ainsi que le prix total de la commande. Nous obtenons tout cela à partir du backend. Donc tu dois répéter derrière moi, qu'est-ce qu'on a besoin de faire ? On a besoin d'un service. Et le service saisit le détail de la commande et dans le frontal ou dans le composant ou le détail de l'article ou de la commande. Je vais utiliser ce service pour récupérer les données. Mais faisons d'abord cette mise en page, cette mise en page, je pense que c'est assez simple. Nous avons, comme vous le voyez ici, accepté ? Et cette grille est en trois parties, trois parties égales, et ici la quatrième partie. Donc, comme vous le voyez, nous avons besoin d'une grille et d'une colonne 444 et à l'intérieur d'eux un contenu de données. Donc, nous pouvons le faire simplement. Nous allons d'abord à nos détails de commande et nous dirons que nous avons besoin d'une grille. Donc, je vais définir un div qui est une classe appelée grille p. Et puis à l'intérieur de cette grille p, j'aurai des composants ou des éléments où ils définiront trois colonnes. Donc nous disons div dot py appel. Par exemple, vous définissez une colonne afin que je ne puisse pas avoir de colonne p pour, donc par exemple, nous devons mettre ici premier, deuxième, troisième, quatrième. Donc, nous allons les voir qu'ils sont alignés les uns sous les autres dans notre modèle, exactement. Donc, nous avons tout bien ici. Alors sentons ces données. Pour remplir ces données, nous avons besoin, par exemple, d'une étiquette comme un titre, puis des données à l'intérieur que j'obtiens de la base de données. Donc j'irais ici pour un titre comme avec H5. Et puis dans H5, je dis Order ID, comme un texte codé en dur. Et puis un paragraphe où je peux mettre l'ID lui-même. Donc, nous aurons ici un ID, et cet ID sera remplacé, que nous avons de la base de données. Et vous voyez que ce numéro de commande ressemble à ça. Ce dont nous avons besoin aussi, nous avons besoin de la date de commande et de l'état de la commande. Donc, nous avons ici aussi un autre h5. Donc, je vais avoir ici l'ordre, qui sera la date. Et aussi, nous aurons comme une date ici, accord, qui viendra de la base de données aussi. Et aussi nous avons besoin ici d'une autre chose qui s'appelle statut de commande. Donc, vous aurez ici le statut de commande, mais ce statut, ce ne sera pas, par exemple, un texte, ce sera une liste déroulante. Donc, je vais utiliser P déroulé comme il est défini, isPrime NG. Et ce verrouillage aura des options et nous verrons plus tard comment nous allons le remplir avec les données. La dernière chose dont nous avons également besoin est le prix total de la commande, comme nous l'avons déjà dit. Donc, j'ai besoin ici un autre F5 et que je vais dire le prix total de la commande. J' ai vu leur utilisateur peut savoir quel est le prix total de la commande. Et puis à l'intérieur, j'aurai un peu de prix. Alors sauvegardons ça. On y va, ok, on a la liste déroulante, on a les données, on a la date, donc on a juste besoin de remplir les données. Donc, faisons d'abord ou saisissons des données de la base de données. Comme vous vous en souvenez, nous avons défini un service et ce service contient l'obtention des détails de commande. Donc, si nous allons à la bibliothèque des commandes et nous avons ici les services et le service de commande, nous avons quelque chose appelé vieillir. Donc, dans notre composant de détail de commande, nous devons utiliser le service de commande. Donc, d'abord, je dois dire privé ou le service. Et puis nous aurons un type qui s'appelle service de commande. Et ce service de commande est automatiquement importé de mon espace de travail. Et puis les ordres à est défini comme nous l'avons vu précédemment, une méthode qui est appelée ce point obtenir le soi-disant, c'est très simple. On a juste besoin d'appeler cette méthode. Et puis ces méthodes seront mises en œuvre en tant que privées. Et puis nous disons que vieillir et obtenir l'ordre nous donnera l'ordre à une variable ou un membre de la classe, qui est appelé ordre et a un ordre de type comme nous avons précédemment défini le modèle d'ordre. Alors on y va. On perd un service. Nous disons ce service de commande point, point obtenir l'ordre, puis vieillir avec venir avec l'ordre qui vient des paramètres que j'ai obtenu par l'URL. Nous avons donc besoin d'utiliser le service que nous avons utilisé précédemment, qui est appelé route activée. Donc, nous avons ici importé route activée. Et cette route, je vais observer le paramètre ceci, la truite et puis params. Et puis je verrai s'abonner, puis j'obtiendrai des params et je m'abonnerai à eux. Et comme vous le voyez précédemment que dans le module d'application, nous définissons notre param comme ID. Donc nous avons ici une pièce d'identité. Donc, quand vous avez un autre cochon, vous devez l'utiliser. Nous devons donc utiliser ID par exemple. Et je dirai ici, si params dot ID, et puis je vais appeler le service get order. Et nous allons utiliser ce service, cet ID, parce que dans l'ID params, comme vous vous en souvenez, nous obtenons l'ID de la commande. Donc, je vais obtenir de l'ordre avec cette pièce d'identité. Et puis nous disons que nous avons l'ordre et que l'ordre sera égal à l'ordre. Donc, cet ordre, que nous définissons comme un membre de la classe, qui sera le même que l'ordre. Donc, ici, nous sauvegardons tout et ensuite nous allons à notre front end et vérifions si tout fonctionne bien. Donc nous n'avons pas d'erreur. Nous avons juste des erreurs ici. Ils ont besoin d'ordre. Donc, nous avons juste besoin de le définir en quelque sorte pour ne pas avoir cette erreur dans la console pour dire l'ID de commande. Et ce sera vos devoirs pour le faire, l'ordre principal comme vous le verrez dans les prochaines conférences. Donc nous gardons cette partie. Nous n'avons pas d'erreur seulement comme erreur ES charpie que cette méthode ne peut pas être vide, pas de problème. Ensuite, nous allons remplir les détails de la commande. Ainsi, par exemple, nous avons défini la classe membre qui est appelée ordre. Et cet ordre que je vais remplacer par l'ID de point de commande. Donc, je vais obtenir cet ID de commande entre ces parenthèses pour être défini comme une variable et aussi ici nous devons avoir l'ordre de date ordonné, date ordonnée, et la liste déroulante que nous allons laisser tomber. La prochaine conférence et le prix total de commande seront de la même façon que nous l'avons fait ici. Donc, nous aurons commande le prix total. Donc nous économisons et nous vérifions ça, ok, tout fonctionne bien. C' est mieux toujours quand nous recevons des données au front end, il est préférable de voir que si ces données sont prêtes ou non. Parfois, sur les serveurs lents, lorsque vous n'obtenez pas de commande, vous obtiendrez des erreurs dans la console et cela causera un problème et il n'y a pas de données sera affiché. Il est donc préférable d'attendre que cette commande soit prête, comme cette variable pour être prête parce que comme vous le voyez, nous avons beaucoup de temps d'attente. Nous devons donc nous abonner aux params et attendre le service jusqu'à ce que cette commande, Garfield. Il est donc préférable d'utiliser toujours ng-if pour ce rythme. Donc, je dirais au niveau de la page d'administration, j'utiliserai ng-if. Donc, dans ng-if je dirai s'il y a de l'ordre, puis affichez le contenu à l'intérieur. Sinon, affichez la page vide jusqu'à ce que les données arrivent. Donc, jusqu'à ce que les données viennent signifie que je n'obtiendrai pas d'erreurs quand je dirai, par exemple, ordre point quelque chose, parce que si cela n'est pas défini, alors je vais obtenir une erreur dans la console. Il dira que nous ne pouvons pas obtenir l'ordre de date à partir de variable indéfinie. Donc, il vaut mieux ici d'avoir ng-if dans GF, cela signifie que s'il est ordonné, comme il y a un ordre défini, il y a des données dans cet ordre. Ensuite, une capture pour moi les données et montrer la page sinon, afficher la page vide. Ok, maintenant on a l'ordre ici. Faisons un peu de style ou de purification pour ces données. Par exemple, nous avons ici la date est laide, elle n'est pas formatée, et aussi l'ancien prix ne vient pas comme une devise. Donc, comme nous l'avons déjà dit, cet Angular vient avec quelque chose appelé pipes. Et dans ces tuyaux, vous pouvez définir ce que vous voulez formater vos données. Par exemple, je vais utiliser la date ici, qui est pour utiliser la date. Et cette date sera format court comme nous l'avons vu précédemment, exactement. Et le prix, il y a quelque chose qu'on appelle la monnaie. Donc, si vous voulez voir tous les tuyaux que vous voulez, il suffit de le faire et tous seront placés et affichés ici. Ainsi, vous pouvez avoir, par exemple, la date, vous pouvez avoir le nombre, personne, et aussi trancher. Et si vous voulez également afficher des données JSON, tous ces tuyaux sont disponibles pour afficher vos données de la bonne manière. Donc, par exemple, ici, je vais utiliser la monnaie. Donc, sauvegardons et vérifions que la glace nous avons ici que monnaie est très belle et aussi la date est formatée. 122. Écrire des objets avec des prix totaux: Alors vérifions maintenant ce que nous obtenons du backend pour afficher les éléments de commande. Alors ce que je vais ici et ouvrir le réseau et les outils de développement, alors je vais voir que je reçois ici quelques demandes. Donc, vous avez deux options. Une des options que vous pouvez consigner l'ID de commande après l'avoir obtenu. Par exemple, quand je vais ici pour les détails, puis vous pouvez faire un journal de console , puis cet ordre de points pour être sûr des données provenant du backend. Ou sinon, vous pouvez directement aller à l'onglet Couple authentique, puis trouver la demande que nous avons appelée précédemment pour obtenir les détails de la commande. Donc, je la console, regarde dans le journal de la console. Nous verrons que nous avons des articles de commande et cette commande est tableau. Par exemple, dans notre cas, ici est vide. Essayons une autre commande que j'ai ici ou là avec quelques articles. Ok, on en a un autre. Nous pouvons supprimer, ralentir celui-ci, aller ici ou là des éléments. Ok, j'ai ici deux articles. Et comme vous le voyez dans chaque article de commande, j'ai ce produit et la quantité. J' ai donc ici pour commander des articles. Chacun d'entre eux est aux produits avec une quantité et de les afficher. Si nous vérifions ici notre modèle, nous avons votre nom, catégorie de marque , sous-total, et nous avons ici le prix total et comment il compte tout cela. Vous avez deux options. Une des options que vous pouvez créer une table et afficher ces données ou autrement vous pouvez le faire manuellement. Nous pouvons le faire manuellement et facilement en faisant aussi la structure du champ ou une grille, une grille à l'intérieur de ce champ. Donc, nous pouvons également dire ici qu'à l'intérieur de cet ensemble de champs, nous devons définir non pas le contenu, mais une autre grille. Et cette grille aura la même structure que nous l'avons vu précédemment. Je vais les remplir. Donc, comme vous le voyez ici à l'intérieur de cet ensemble de champs, j'ai défini une grande annonce à l'intérieur de cette grille, il y a des colonnes de deux, donc jusqu'à ce qu'elles aient un égal de 12, parce que nous avons 12 colonnes disponibles. Nous avons donc besoin de six de ces colonnes et de toutes ces données et de l'inflammation. Si nous allons vérifier notre article de commande, accord, nous les avons exactement comme nous avons besoin. Donc maintenant, nous devons récupérer les articles de commande d' ici et ensuite mettre les informations dans cette table. C' est très simple. Nous pouvons également faire une autre grille en dessous. Donc, il sera exactement égal à cette grille. Mais nous remplacerons ces données textuelles par les données de commande ou de commande. Mais cette grille être répétée parce que nous avons besoin de plusieurs articles de commande, nous avons besoin de plusieurs rôles. Donc, vous pouvez considérer qu'il s'agit d'une ligne et chaque roche sera répétée en fonction des données qui arrivent par les articles de commande. Donc, comme nous le voyons ici, nous avons MD4. Md4, je vais mettre à l'intérieur chaque article de commande. Donc, je vais dire laisser l'article de commande hors, commander que les articles de commande. Donc, nous aurons ici, ou les éléments que je pense que nous avons ici une erreur dans le modèle. Il dit que l'article de commande n'est pas défini. Donc je pense que nous devons retourner au modèle pour vérifier si tout fonctionne bien ici. Nous avons ici l'ordre et puis le champ est appelé les éléments anciens doivent être modifiés éléments. Donc, nous revenons à nouveau, nous voyons que l'erreur est corrigée. Donc nous n'avons aucun problème ici. Et puis je vais remplacer l'article de commande par ces données. Donc, d'abord, nous avons besoin d'article de commande produit. Nous avons donc ici premier article de commande, et à l'intérieur de cet article de commande qui est un produit, et à l'intérieur de ce produit il y a des détails sur le produit. Donc, tout d'abord, je vais dire article de commande, article forcé de premier ordre, que j'ai obtenu de la LC4. Donc, je dirais qu'il commande article point produit et ensuite me donner le nom du produit. Donc, voici comment cela devrait être fait. Donc, comme nous le voyons ici, nous avons toutes les informations que nous avons obtenu avec ce MD4. Et puis la même chose, ce sera exactement pour leur marque. Je vais vérifier ici, aller au produit, et le produit sera aussi la marque. Nous avons besoin de cette catégorie. Mais voyons comment cette catégorie est implémentée. Donc, nous allons ici et vérifier si cette catégorie est également remplie. Donc, nous avons besoin de nom de catégorie. Donc le nom du point de la catégorie. Et aussi nous avons besoin du prix. Donc, nous devons vérifier aussi cela. Donc, nous avons dit article de commande point produit. Cette quantité de prix vient directement avec l'article de la commande. Nous avons donc ici le produit et la quantité. Donc, nous choisirons ça. Donc, nous disons la quantité point d'article de commande. Et après cela, le sous-total, nous verrons comment nous pouvons corriger cela. Donc nous avons ici des yeux de commande, nous avons la quantité trois, prix des ordinateurs et de la marque, et tout fonctionne parfaitement. Nous avons donc besoin du sous-total. Le sous-total, nous devons l'avoir aussi bien calculé. Nous pouvons donc calculer en multipliant le prix par la quantité. C' est très simple. Donc je vais aller ici et copier celui-ci et dire le prix multiplié par la quantité. Nous avons ici tout multiplié. Ensuite, nous vérifions à nouveau, ok, Nous avons aussi le prix est à venir en calculant le prix multiplié par 3. Ensuite, nous arrivons ici 750 et la même chose pour ici. Nous pouvons lui donner aussi, euh, drapeaux ici comme la monnaie et aussi pour le prix que nous pouvons donner ici aussi un drapeau ou une monnaie de pipe. Donc, puis il sera affiché comme ceci. Donnons un peu d'espace entre ces grilles. Par exemple, nous avons ici un peu collant et donc nous pouvons le faire avec plus d'espaces. Donc, je peux dire aussi cette grille donner pour moi le bas de marge sera cinq. Et le même pour la grille elle-même. Donc, chaque grille sera générée, aura le bouton de marge cinq. Donc, comme nous le voyons ici, tout est parfait. Donc, nous pouvons aussi bien en faire autant que l'audace est à vous de décider. Prime NG est également livré avec certaines classes, sont des classes prêtes pour faire des choses audacieuses. Donc, si vous allez ici à la prime floakes et vous verrez quelque chose appelé texte. Et dans ce texte, vous avez quelques styles afin que vous puissiez aligner le texte et lui donner un peu de style. Donc, par exemple, je veux donner ce sondage de texte p. Donc, nous pouvons aller ici et ensuite nous pouvons définir chaque colonne comme un p, texte gras. Donc, nous avons tous d'entre eux sera audacieux. Donc quand on économise, on y va, on a tout chauve. Donc maintenant, nous avons défini tous ces éléments et nous avons également ici sous-total. Nous devons aussi avoir ici ce total, afin que l'utilisateur puisse voir le sous-total et ensuite le prix total de la commande entière. Comme nous l'avons vu précédemment, comment nous avons calculé le prix total dans le back-end. Pour ce faire, nous pouvons aussi bien définir une autre grille pour cela. Donc on peut avoir un autre div. Et cette div aura une classe de grille de pointe. Et cette grande grille contenait deux colonnes. L' un est pour le titre ou l'étiquette du prix total, puis le prix total lui-même. Donc, nous aurons un div avec P, appelez deux, et un autre, nous aurons p égal à, et ici je vais écrire un prix total. Et ici aussi, je vais définir ce prix total, que je reçois de la commande elle-même. Donc ici, je vais dire me donner le prix total de la commande. Donc, commandez le prix total des points, sauvegardez cela. On a essayé. Nous verrons que nous avons obtenu le prix total. Ce prix est-il la somme des sous-totaux ? Mais donnons-lui un peu de décalage pour être exactement sous ces lignes comme nous le voyons ici. Nous pouvons donc aussi le faire en définissant quelque chose appelé offset. Donc, lorsque vous utilisez offset pour cela, alors il va pousser les colonnes, certains espaces, le jeter obtiendrait le bon endroit. Donc je veux pousser ceux comme par exemple, nous avons ces 2222, donc nous devons compenser huit, donc 1234. Alors ici, j'aurai les deux colonnes. Donc, je vais décaler les colonnes et je vais lui donner un repos, quatre à deux. Nous pouvons donc le faire aussi. C' est très simple. Vous dites simplement que la première colonne aura un décalage de huit. Et quand nous disons, nous verrons qu'il a été compensé sous eux à la huitième place. Faisons-les aussi bien chauve que nous l'avons vu précédemment. Donc, nous pouvons donner à celui-ci, par exemple ici, classe audacieuse. J' ai donc p texte gras, et un autre aura le boulon PTX. Et vous pouvez aussi bien leur donner un style comme la couleur. Donc, nous pouvons donner à l'ensemble du contenu de la grille pour être couleur, par exemple, vert. Donc, je dirais le style et depuis le style je dirai la couleur, et ensuite vous pouvez définir une couleur verte. Donc, après avoir gardé ça, nous verrons tout a le vert dans cette grille. Et cette grille a un texte en gras, qui a le prix et le prix total. Donnons-lui aussi une certaine monnaie comme nous l'avons fait auparavant, pour avoir le format de devise. Ok, gentil. Maintenant, nous avons notre table de commande avec cette devise. Comme je vous l'ai déjà dit, vous avez la possibilité d'utiliser une table, mais nous utilisons la table plusieurs fois. Je voulais utiliser un peu spécifique avec une grille afin que vous puissiez vous habituer aux grilles. 123. Adresse de la commande et informations du client: Donc, pour l'instant, nous avons terminé les détails de commande et les articles de commande. Nous ferons la même chose pour l'adresse de commande sur leur adresse est exactement la même comment il est livré avec une information utilisateur et aussi avec le détail de la commande. Donc, je saurai quel utilisateur l'a commandé et aussi, je connais l'adresse, et c'est tout. Donc, nous pouvons aller ici et ensuite définir un autre jeu de champs. On ne peut pas avoir une autre grille ou div, on peut dire une grille de pointe. Et à l'intérieur de ce bécher, et je vais avoir une colonne. Donc, j'aurai trois colonnes et chacune d'entre elles contiendra des données spécifiques. Donc, je vais dire H5, donnez-moi une autre adresse ou l'adresse du client est à vous comment vous voulez le nommer. Et puis à l'intérieur de ce B, je vais obtenir les détails de commande qui viennent du back-end. Donc, ce que nous voulons ici pour afficher toutes ces informations pour gagner du temps. Je l'ai déjà défini. Donc, nous avons ici l'ordre soit l'adresse sera commandé cette adresse d'expédition, puis j'ai sauté une ligne et puis ISA adresse d'expédition deux, puis le zip et puis la ville près de l'autre. Puis BreakLine où j'aurai le pays de commande. Ok, vérifions ces changements, comment ça va devenir à l'avant. On peut repartir ici. Ok, j'ai l'adresse, rue Flower, 13, Prague, République tchèque. Ok, nous devons aussi afficher le nom du client. Donc, dans la colonne suivante, je vais dire ici h5. Et comme vous vous souvenez que les informations client sont fournies avec une classe d'utilisateur. Et à l'intérieur de cette classe d'utilisateur, j'aurai le nom. Donc, nous pouvons aussi avoir ici des informations sur l'utilisateur. Donc, je vais entendre dire cela, donnez-moi l'ordre de cet utilisateur, et puis après cela, il est préférable d'avoir le nom. Donc on sauve ça. D'accord. J' ai aussi mon nom. Vous pouvez également à cette autre information comme e-mail ou par exemple, numéro de téléphone. Donc nous pouvons avoir ici un autre h5, nous pouvons dire coordonnées. Ou je vais définir, par exemple, le téléphone. Donc, je vais dire ici Ordre et pas à l'utilisateur, mais il sera exactement à venir dans le niveau de l'ordre. Donc, nous allons arriver ici ou là et ensuite nous former. Donc on sauve ça. On y va encore. Ok, nous avons rempli notre détail de commande, donc tout fonctionne bien. Maintenant, j'ai deux commandes ici, mais vous pouvez ajouter d'autres commandes si vous voulez. Donc voici ma commande est très bien. On a tout. Nous avons la date de commande, l'état de la commande, nous allons voir dans la prochaine conférence, nous utilisons la monnaie que nous avons utilisée, comment nous utilisons la grille, et aussi nous utilisons les informations sur les données de saisie des articles de commande et de commande. 124. Mise à jour de l'état de l'ordre: Ok, dans cette conférence, nous allons voir comment nous pouvons mettre à jour le statut de la commande. Comme vous vous en souvenez, nous avons un statut spécifique pour les plus âgés. Et maintenant, nous allons faire notre remplir cette liste et ensuite nous aurons tout le statut de la commande. Et lorsque nous sélectionnons l'un de ces statuts, alors il obtiendra, par exemple, la nitrification pour nous pour mettre à jour l'état de la commande. Donc, comme une première étape, remplissons cette liste ou cette liste déroulante. Comme vous le savez ici, nous n'utilisons pas de formulaire, donc nous pouvons utiliser le modèle NG, qui est une liaison bidirectionnelle pour lire et insérer des données dans la liste déroulante. Donc, si nous passons à la première extrémité, nous ne pouvons pas voir dans la liste déroulante que nous avons la base. Nous allons utiliser cette base. Donc, le basique contiendra, par exemple, il demandera un rayon du statut et ensuite je peux utiliser le modèle NG comme il est mentionné ici. Nous devons donc définir les options et le modèle NG. Donc, tout d' abord, avons les options. Et comme nous le voyons ici, les options viennent comme tableau. Alors prenons cette partie, puis placez-la dans notre composant de détail de commande. Nous pouvons donc aller ici où nous avons défini le statut de la commande. Donc, nous avons ici la liste déroulante, et ensuite nous avons des options. Ce sera des statuts de commande, comme nous avons plusieurs états dans cet ordre ou ce tableau, et nous avons un statut sélectionné. Donc, tout d'abord, nous devons remplir la liste déroulante, la liste déroulante. Comme vous vous en souvenez, nous avons défini précédemment dans l'élément de la liste ordonnée, un tableau d'état de la commande. Et ce tableau d'état de l'ordre, il contiendra tous les états qui peuvent provenir de l'extrémité frontale. Mais comme nous le voyons, ce n'est pas tableau, tableau, mais c'est dictionnaire. Et nous allons mapper ce dictionnaire et le changer en tableau. Mais d'abord, nous pouvons mettre cette constante dans un fichier supplémentaire ou un fichier externe afin que nous puissions le lire et ensuite nous pouvons l'utiliser dans les deux composants. Donc ici, au niveau ordonné, je peux définir un nouveau fichier. On ne peut pas dire des constantes de point plus anciennes. On peut l'appeler comme ça. Et puis à l'intérieur de cette constante plus ancienne, je vais mettre ce statut de commande et exporté afin que je puisse l'utiliser dans d'autres endroits. Je dirais ici, exporter le statut de l'ordre const. Et cet état de l'ordre sera tableau ou le dictionnaire d'adhérer à garder. Tout fonctionne bien. Nous allons importer ce statut de commande à partir du fichier de constante. Donc, nous montons d'un niveau et nous obtenons la constante de l'ordre. Donc, nous allons nous assurer que tout fonctionne bien pour l'instant dans notre liste de commandes. Ok, tout fonctionne et la cartographie fonctionne bien. Ok, Maintenant, nous allons utiliser cette constante dans l'ordre des composants de détail. Donc, nous allons aller au composant et prendre aussi à nouveau importer aussi l'état de la commande à partir de puis aussi un pas vers le haut et puis me donner la constante. Ok, mais comme vous vous souvenez que nous avons dit cela a baissé sauf que tableau. Donc, nous devons mapper ce tableau ou ce dictionnaire pour être comme un tableau, alors nous pouvons l'utiliser aussi bien. Donc, nous avons défini ici l'état de la commande est, donc nous pouvons l'utiliser aussi bien. Nous pouvons définir cela. Donc, nous pouvons dire ici les statuts de commande, qui est par exemple, tableau vide pour l'instant. Nous devons donc définir cela. Donc, dans Anki sur init, nous pouvons dire ce statut de point. Nous devons donc cartographier l'état de la commande et il est préférable de l'appeler avant d'obtenir la commande afin que la liste déroulante soit prête et ensuite nous obtiendrons la commande. Donc, la méthode que j'ai définie ici, et puis je vais voir comment nous pouvons mapper ces anciens statuts à tableau d'ordre. Donc, ce que nous avons besoin pour la liste déroulante, en fait, nous avons besoin d'options, et ces options sont constituées comme nous l'avons vu précédemment à partir de l'ID et le nom. Ainsi, chaque vente aux enchères aura un ID et un nom, nom pour l'affichage et un identifiant 4 en utilisant et en envoyant à la base de données. Donc, si vous vous souvenez, nous avons utilisé une fonction qui est appelée touches de point d'objet. Donc, je peux passer par un dictionnaire pour tous les objets à l'intérieur d'un dictionnaire. Donc, quand je dis ici, object.Create de cet objet, alors il me donnera 0, 1, 2, 3, 4. Essayons ça. Donc, je dirais les clés point d'objet de l'état de l'ordre. Et nous pouvons faire un journal de console pour cela. Donc, pour être sûr que tout fonctionne parfaitement, je veux que vous compreniez pourquoi je fais ça. Donc, d'abord, nous devons console les clés point d'objet journal de l'état de l'ordre. On va donc à l'un des ordres. Ok, j'ai 0, 1, 2, 3, 4. D'accord. Mais nous n'avons aucune valeur. Nous n'avons aucun nom de ce statut. Comment nous pouvons le faire lorsque je crée un autre journal de console. Et puis j'aurai ici un autre journal de console. Et je dis, par exemple, donnez-moi le statut de la commande et puis dites 0. Ensuite, je vais ici, je dirai que 0 est flexion et la couleur est primaire. Donc, quand je veux atteindre l'un des états de commande, je dois spécifier la clé et je reçois ces clés à travers les clés d'objet. Et comme vous vous en souvenez, nous avons un tableau. Donc, à travers la boucle, à travers ce tableau, je peux faire quelque chose avec. Alors revenons ici, objet de la carte de points d'état. Donc, je vais boucler ou parcourir tous ces éléments, générer un nouveau tableau dans un style différent qui correspond à ma liste déroulante. Donc quand je fais la carte, je passe par toutes les clés. Donc, je vais dire clé, donc il va revenir pour moi clé par clé. Déplacez ce journal de console ici et placez-le ici. Et à la place du 0, je dirai donnez-moi une console pour moi l'état de l'ordre de la clé qui est retournée à partir de ce tableau. Donc, quand on économise, on remarque que j'ai tout le statut si facilement. Nous pouvons cartographier tous ces éléments et les faire comme tableau d'ID et étiquette ou ID et nom. Et comme vous le savez, cette carte est seulement pour changer le style du dictionnaire ou le style du tableau. Pour que nous puissions faire quelque chose de différent. Nous pouvons construire notre propre tableau. Donc, je vais dire ici, retourné pour moi, pour chaque clé que vous traversez, ce tableau d'objet est retourné pour mon ID. Et cet ID sera la clé elle-même. Et puis le nom sera le statut de la commande et non le statut de la commande lui-même, la clé. Et à l'intérieur, nous avons non seulement le statut de la commande, nous avons la couleur et l'étiquette. Donc je vais utiliser l'étiquette parce que j'ai besoin du nom. Je veux afficher ce nom dans notre liste déroulante, donc je vais dire étiquette, ok, nous enregistrons pour voir le résultat de toute cette cartographie, alors nous devons l'assigner à constante. Donc, je dirai que cet état de l'ordre des points est égal aux clés d'objet et à tout ce mappage. Donc, nous ne pouvons pas sauvegarder cela et revenir à notre application. Nous verrons que GOT la liste déroulante de l'objet, de l'objet. Ok, voyons quel est le problème, pourquoi on a ça. Donc, nous pouvons consigner je toujours, par exemple, quand je ne sais pas ce qui se passe ou quand je reçois cet objet, tableau d'objets, je consoles journalise les choses. Donc, si vous vous souvenez, nous avons assigné à la liste déroulante cette vieille stéatose et je vais la consigner. Donc je veux voir ce qu'il y a. Donc, comme vous le voyez ici, nous avons, nous avons un tableau, ok, c'est bon. Nous avons ID, puis nom plier le problème ici, cette énergie première m que vous devez spécifier étiquette que vous voulez afficher à l'intérieur de votre tableau. Donc, si vous voulez afficher le nom, alors vous devez dire option étiquetée, puis nom. Comme vous le voyez ici, il a défini le nom et le code. Donc il peut dire qu'il peut afficher cet accord ou qu'il peut afficher le nom. Nous devons donc faire la même chose. Donc, nous devons dire dans notre liste déroulante, ne pas par exemple, me montrer le statut de la commande en tant qu'objet, mais montre-moi le nom de celui-ci. Et l'étiquette d'option sera le nom. Ok, revenez à notre demande. Nous verrons que nous avons obtenu le nom affiché exactement comment nous avons défini dans notre constante. Ok, et maintenant modèle NG ? Et vous modélisez, il retournera pour moi cet élément sélectionné et aussi je peux lui assigner un élément sélectionné. Donc statut sélectionné, ce sera l'élément sélectionné de cette liste déroulante, donc nous devons le définir. Et nous pouvons dire ici aussi le statut sélectionné, ce sera tout. Ok, voyons comment on peut obtenir la valeur. Par exemple, je veux changer quand je passe d'ici à ceci, et ceci à ceci, je veux voir les changements. Je veux consoles journal. Quel est le résultat de ce changement ? Donc c'est très simple. Dans la liste déroulante, vous pouvez simplement définir une méthode, méthode sortie dans votre liste déroulante, qui est appelée changement. Et quand nous changeons quelque chose, vous pouvez créer une méthode, par exemple, sur le changement de statut. Et dans ce changement, vous pouvez passer un mot-clé qui est appelé événement, et nous sauvegardons celui-ci. Nous allons à nouveau à notre application, nous définissons la méthode et nous disons sur le changement de statut et cet événement, nous pouvons dire par exemple, qu'il peut être un événement comme celui-ci. Et nous allons consigner cet événement pour que nous puissions voir ce qui se passe ici. Donc, nous pouvons dire ici, événement de journal de la console, il est préférable également de supprimer tous les journaux de la console, que nous avons définis précédemment pour avoir une console claire. Donc, nous avons ici le journal de la console de l'événement quand je vais changer cet état. Alors je vais changer. Mais je ne reçois rien parce que nous ne pouvons pas utiliser le changement. C' est exactement ce que je t'ai dit pour le style. Vous ne pouvez pas utiliser de classe sur ces membres. Vous avez quelques clés spécifiques que vous devez suivre. Donc, je vous encourage toujours à lire documentation du composant lorsque vous voulez faire quelque chose. Donc, quand je vais ici, je veux voir quand je changerai ce qui va arriver. Nous pouvons donc aussi en savoir plus sur tout cela. Vous voyez, vous avez beaucoup de méthodes. Par exemple, il y a onclick, onchange sur le filtre. Il y a donc beaucoup de choses. Donc ce dont nous avons besoin est exactement inchangé. Donc, quand je remplace ce changement par le changement, alors je verrai que les résultats. Ce n'est pas comme une liste déroulante standard. Ce n'est pas comme un bouton standard. Vous devez donc lire la documentation et voir ce dont vous avez besoin ici. Alors essayons encore. Ok, gentil. Nous avons l'événement original et il y a de la valeur et la valeur est un. Donc, la valeur renvoyée en tant qu'objet. premier champ est l'identifiant et le second est le nom de l'état. Donc, par exemple, j'ai ici échoué, alors j'aurai l'objet, qui est la valeur et l'ID et le nom. Donc, il vaut mieux en quelque sorte aussi que nous pouvons retourner seulement l'ID parce que nous allons utiliser seulement l'ID pour le stocker dans la base de données ou charger l'état de la commande en fonction de cela. Donc, nous pouvons voir aussi dans la documentation que nous avons aussi, pas l'étiquette facultative mais la valeur de l'option. Donc, la valeur de l'option sera utilisée pour ce champ ou pour ce chien vers le bas, ce serait l'ID. Nous en avons parlé plusieurs fois auparavant. Et je veux juste que vous sachiez exactement comment spécifier les choses et les entrées pour le composant de Prime NG. Nous changeons encore, Ok, nous avons ici, encore une fois, nous avons la valeur deux, donc nous n'obtenons que la valeur. Donc, sur le changement d'état, je vais mettre à jour l'état de la commande en fonction de la façon dont nous l'avons obtenu dans le backend, comment nous l'avons fait dans le back-end. Donc, comme vous vous en souvenez, je créais une méthode put mal orthographiée puis post. Je suis juste en train d'envoyer le statut à la commande spécifique dans l'API de nos commandes. Donc, quand j'envoie cette demande, j'obtiendrai le statut mis à jour et ensuite je recevrai la commande à nouveau. Donc nous avons juste besoin de passer le statut. Nous n'avons pas besoin de transmettre toutes les données de la commande comme nous l'avons fait auparavant avec le produit et la catégorie. Donc pour ça, nous avons besoin d'un service. Ce service sera l'ordre de mise à jour. Et comme vous vous en souvenez, nous avons défini tous les services dont nous avons besoin pour mettre à jour la commande. Donc, après avoir mis à jour la commande, je ne vais pas envoyer la commande elle-même. Je vais envoyer seulement le statut. Donc, je vais dire ici statut. Et comme vous vous souvenez, dans le JSON, nous envoyons le statut comme celui-ci, statut JSON et deux, sorte que vous pouvez aussi bien envoyer le statut, dike cela ou définir votre propre type. Donc, je vais avoir un statut. Et le statut sera une chaîne et ce que je vais obtenir dans l'ordre. Donc, dans l'ordre, je vais obtenir la commande elle-même après avoir mis à jour ma commande. Et aussi, nous devons passer l'ID de commande, qui sera également chaîne. Donc nous avons besoin ici aussi, ou leur carte d'identité. Et puis j'enverrai le statut de la commande. Donc, ici est différent, mais bien sûr, vous pouvez envoyer la commande à nouveau et il sera automatiquement, le backend obtiendra seulement le statut comme nous l'avons vu dans la partie back-end. Donc ici, nous avons l'ordre de mise à jour. Revenons à notre composant et créez ou appelez le service de mise à jour. Donc, j'irais aux détails de la commande à nouveau et onChange, Je vais appeler pas événement, mais je dirai ce point Service de commande, Mise à jour de l'ordre. Et mettre à jour l'ordre. Je vais à tartes le statut comme vous le voyez ici, nous avons une chaîne d'état, je vais envoyer un objet aura le statut, et le statut sera la valeur de point d'événement, comme nous l'avons vu précédemment dans le journal de la console. Et aussi, nous devons envoyer aussi le numéro de commande. Donc nous avons aussi besoin ici, quand je reçois la commande, je dois dire ceci, le numéro de commande. Donc, ici, nous avons tout va bien. Et comme nous l'avons déjà parlé, nous avons dit qu'il ne sera pas exécuté tant que vous n'y souscrivez pas. Donc, nous avons ici commande et peut-être que nous pouvons, par exemple, consoles enregistrer l'ancienne mise à jour. Alors sauvegardons et revenons à notre front end et vérifions afin que nous puissions dire expédié, ok, Il a été mis à jour et nous avons le nouveau statut. Donc nous avons un statut pour, ok, faisons échouer un autre. Donc nous pouvons aller ici et nous verrons que le statut est pour, ok, donc par exemple, c'est échoué. Nous allons à nouveau aux ordres. Nous verrons aussi que le statut a changé. Donc, nous allons à nouveau, nous avons mis à jour livré. On va ici et l'état qui a été mis à jour. Donc, c'est très agréable d'avoir comme une notification pour l'utilisateur. Comme nous l'avons toujours fait, que tout va bien. Donc, quand il clique ici, alors il recevra une notification que d'accord, le message ou l'autre, la commande a été mise à jour pour cela. Si vous vous souvenez, nous avons créé ou appelé le Service de Message et la méthode que les terroristes feront pour moi ce que je veux. Nous pouvons donc copier cette partie et revenir à notre liste de détails de commande. Et nous disons qu'après cet axe, ok, Show Message Service saxes, puis dire que l'ordre est mis à jour. Sinon, lorsqu'il y a une erreur, nous montrerons l'erreur. Mais d'abord, appelons le service de messagerie. Donc, nous allons ici chez notre constructeur et ensuite nous appelons le service de message privé, qui sera le service de message, qui provient de l'énergie Prime. Et puis nous économisons, nous essayons encore. Ok, tout fonctionne bien. Donc la commande a été mise à jour. Et si on repart ici, d'accord, ça marche bien. Donc, quand nous allons à nouveau et vérifier s'il y a une erreur, alors montrez-moi l'erreur. Donc, ici après l'abonnement, je peux dire aussi que s'il y a une erreur en général, alors faites pour moi un message d'erreur et dites que l'ordre n'est pas mis à jour. Mais bien sûr, l'Estlund se plaint ici que nous n'avons pas utilisé cette erreur, donc vous pouvez la supprimer ou vous pouvez également l'imprimer dans les détails. Mais pour moi maintenant, je vais juste afficher l'ordre n'est pas mis à jour et aussi ici, nous devons supprimer l'ordre afin que nous ne les utilisons pas. Nous n'affichons pas seulement des messages après l'abonnement, l'échec ou le succès, ok, comme vous le voyez ici, nous avons maintenant tout mis à jour et notre statut de commande est mis à jour. Une dernière chose reste que lorsque je vais aux commandes, par exemple, j'ai ici une livraison, mais quand je vais ici, je vois toujours comme en attente. C' est boeuf causé que lorsque nous chargeons la commande, nous ne mettons pas à jour le statut sélectionné dans la liste déroulante. Donc simplement vous allez ici et dites que ces points sélectionnés statut sera ordonné point statut. Donc c'est tout. Vous avez juste besoin de le faire pour vous assurer que vous entrez le bon statut. Donc, comme vous le voyez ici, nous avons un livré et il peut être mis à jour facilement. 125. Créer une page de connexion: Bon, maintenant nous allons voir comment nous pouvons créer le composant de connexion. Mais d'abord, revenons à notre graphique sur la structure de notre projet. Comme vous vous souvenez, que nous avons créé une bibliothèque qui est appelée les utilisateurs et la bibliothèque d'authentification. Et dans cette bibliothèque, il sera partagé entre toutes les applications. Parce que je n'ai pas besoin de répéter le composant de connexion dans chaque application. Ou la page de connexion, qui contiendra e-mail et mot de passe. Je vais créer ces composants pour être également partagés dans la bibliothèque de l'utilisateur. Donc, comme vous le voyez ici, nous aurons un composant de connexion et un composant d'enregistrement. Et à côté de cela, nous aurons aussi les services qui vont m'aider à me connecter et à enregistrer un nouvel utilisateur. Comme vous l'avez lu dans l'article précédent, nous devons faire beaucoup de choses en ce qui concerne les authentifications. Nous avons beaucoup de conférences et de nombreuses fonctionnalités à mettre en œuvre à l'intérieur de ces conférences dans cette section. Donc, tout d'abord, je vais vous montrer comment créer le composant de connexion à partager entre toutes les applications. Je commencerais d'abord à être, par exemple, seulement modéliser. Donc, nous aurons seulement HTML, CSS, nous aurons une belle page de connexion, et puis nous allons voir comment le connecter à l'application, qui est l'application du panneau d'administration. Et puis plus tard, quand nous allons travailler quand la question de l'obligation, nous avons été connectés là aussi. Ok, comme nous le faisons toujours, nous allons créer un composant qui s'appelle login. J' utilise donc une console ECS pour créer un composant. Donc ici, je vais le mettre dans le dossier Pages, puis le nom du composant sera un login. Et nous avons aussi ici où c'est un projet. Donc, nous n'utilisons pas admin, nous utilisons la bibliothèque de l'utilisateur et aussi, je vais sauter le style. Donc, nous avons déjà le style public et aussi nous avons besoin d'un sélecteur. Donc, je vais mettre les utilisateurs se connecter comme un sélecteur parce que j'ai des utilisateurs, je suis dans la bibliothèque de l'utilisateur, donc le préfixe sera des utilisateurs, puis sautant les tests. Donc, nous exécutons ce composant ou ce commentaire, et nous verrons que le composant est créé à l'intérieur de la bibliothèque de l'utilisateur. Donc, nous avons ici plusieurs bibliothèques, si vous vous souvenez, l' un d'eux est des utilisateurs, et nous avons ici des pages. L' un d'eux est une page de connexion. La page de connexion que je prévois de faire est celle-ci. Donc, nous avons ici comme une image et aussi comme certains administrateur boutique de bienvenue, nom d'utilisateur ou e-mail, mot de passe et soumettre. Et puis nous avons ici l'espace vide. Donc, créons la mise en page pour cela. Nous allons utiliser le système de réseau d'énergie de premier plan pour créer toute cette disposition. Mais d'abord, laissez-moi vous parler des routes. Ici, nous avons des routes. Donc aussi quand nous allons avoir un login, nous avons besoin d'un itinéraire pour nous connecter. Alors comment nous pouvons faire cela, comme vous vous en souvenez dans l'application d'administration, dans le module d'application, nous avons ses propres routes parce que ces composants sont situés à l'intérieur de ce module aussi, ou à l'intérieur de cette catégorie aussi. Donc, nous avons ici les composants et que les routes sont situées ici. Mais comme vous vous souvenez que nous les avons créés composant de connexion à l'intérieur de la bibliothèque de l'utilisateur. Et pour cela, je vais mettre l'itinéraire ici pour que les utilisateurs aient son propre itinéraire. Il ne doit pas entrer en conflit avec ces routes car ce module sera également utilisé dans le module d'administration, donc nous n'aurons aucun problème. Alors créons d'abord l'itinéraire. Comme vous vous souvenez, nous avons créé constante qui l'appellent routes. Cette route a un type qui appelait aussi les routes. Et ces routes seront un tableau d'objets où je mettrai mes routes. Donc, le premier objet aura un chemin qui est appelé login. Donc, quand je mets dans mon application slash login, alors j'irai à ce composant, qui est le composant de connexion, ok, maintenant j'ai créé ici la route, et voyons si nous fonctionnons bien. Donc, je suppose que quand je mets ici connexion, alors je vais obtenir la page de connexion. Mais comme vous le voyez ici, nous avons une erreur qui n'existe pas parce que module utilisateurs n'est plus utilisé dans le module d'application, qui est appelé un module. Donc, ici, nous avons le module d'application. Nous devons également appeler le module de l'utilisateur. Donc, ici, nous aurons un ajout de ces modules. Nous aurons quelque chose d'autre qui est appelé molécule Utilisateurs. Donc, nous aurons ici le module utilisateurs, qui vient des utilisateurs de la bibliothèque et revérifier que, qu'il est automatiquement importé. Il sera ici en tant que module d'utilisateur de mon espace de travail. Alors organisons un peu ce code et mettez-le ici. Ok, gentil. Vérifions encore si nous allons bien travailler. Donc, je vais dire login, ok, Pourtant, je reçois une erreur que cette route n'existe pas. Pourquoi ? Parce que si vous vous souvenez quand nous avons créé les routes ici. Le module d'application, nous avons dit quelque chose comme le module de routeur, nous appelons la sécheresse et le module. Et puis nous avons dit pour root, et puis nous appelons la route, qui a des analyseurs et un composant. Nous devons faire la même chose dans le module de l'utilisateur. Donc ici aussi, dans le module utilisateurs, j'appellerai le module route. Et ce module de routeur n'aura pas combattu root parce que la racine est l'application. Donc, l'application aura une racine. Et le module de cet utilisateur est un enfant de ce module. Donc, nous appelons le module des utilisateurs à l'intérieur de notre module d'application. Donc, de cette façon, ce module est un enfant et je veux utiliser les auteurs de cet enfant dans ma route d'application. Donc, je vais dire pour enfant, et puis je vais spécifier cette constante de routes, que j'ai définie ici. Sauvegardons cela et vérifions si tout fonctionne bien. Je vais revenir ici et je dirai, Regardez dans mon login fonctionne. Donc maintenant, nous atteignons le composant que nous avons créé précédemment, qui est appelé futur composant de connexion, je vais parler du module de chargement paresseux. Donc, nous avons ici chargé le module totalement, Exactement. Donc, nous allons parler plus tard de chargement paresseux, ce qui rend la taille du faisceau pour le chargement paresseux est la plus petite, comme nous le verrons plus tard. Tout d'abord, laissez commencer à modéliser les composants de connexion. Donc, tout d'abord, je vais avoir le, ce gris, le fond gris. Donc, je vais avoir un conteneur de connexion. Donc, j'aurai, par exemple, div, et je vais utiliser ce verrouillage et aussi sous forme de registre. Donc, nous aurons le registre de connexion et le registre de connexion div contiendra également le panneau, le panneau qui contiendra cette zone blanche. Donc nous avons ici toute l'inscription et ici nous avons un panel. Alors créons ça. Donc, je vais créer un autre div et je vais lui donner le panneau Login Register. Et puis je vais jouer avec l'équité. Mais d'abord, vous vous souvenez que nous avons créé un style public. Donc, nous pouvons utiliser aussi ce style ou ce cours dans notre style public. Donc, tout d'abord, je vais avoir ici la bibliothèque de l'utilisateur, si vous vous souvenez, nous avons créé un registre de connexion et les utilisateurs et les utilisateurs est appelé dans le niveau de l'application, mais ici nous ne l'appelons pas, donc nous devons appeler les utilisateurs comme Eh bien. Donc, ici, nous pouvons dire des clips et ensuite importer le style que je veux importer, qui est les lèvres, les utilisateurs et l'utilisateur SCSS, parce que nous avons ici appeler tous les composants. Mais ici supprimons celui-ci parce que nous allons en faire un seul, par exemple, pour une connexion et une inscription. Donc, nous pouvons l'appeler login et enregistrement. Donc la première classe de ce registre de connexion sera celle-ci. Et puis à l'intérieur, je vais avoir un panneau. Donc, comme vous le voyez ici, nous avons ici comme un dégradé, il va du noir au gris. Il existe de nombreux outils pour créer un dégradé. Vous n'avez pas à le faire manuellement, vous pouvez les copier. Donc, je vais faire ce qui est appelé générateur CSS et générateur CSS3, vous pouvez choisir ce que vous voulez. Par exemple, vous voulez un dégradé, puis vous pouvez spécifier le dégradé que vous souhaitez créer. Et puis vous pouvez copier tout le CSS et l'utiliser là. Pour moi, j'ai recueilli un gradient, ce qui est exactement pour notre cas. Donc, je vais avoir ici le dégradé du gris au noir. Comme vous le voyez ici. Nous l'avons déjà défini et nous économisons tout. Nous avons toujours, nous avons une erreur. Il dit que le fichier ne correspond pas au style parce que ici nous avons dit que regarder dans seulement donc nous devons le faire se connecter et s'enregistrer. Et ils l'ont fait parce qu'on n'en a plus besoin. Alors sauvegardons ça. Et puis nous verrons qu'il n'y a pas de fond gris parce que nous devons définir une hauteur. Donc, nous devons dire que la hauteur de cette page ou de cette div sera de 100%, ou vous pouvez utiliser VH, donc nous disons 100 d'une hauteur de vue. Donc, dans ce cas, nous aurons la hauteur exactement comme nous le voulons. Nous avons ici le dégradé, et comme vous le voyez ici, nous avons un panneau blanc. Alors créons ce panneau. Donc je vais faire, je veux avoir une largeur de ce panneau. Donc, il aura, par exemple, 650 pixels. Et aussi, il aura une hauteur qui est de 525 pixels, est comment je l'ai mesuré, et la couleur de fond sera blanche. Vous avez également la possibilité d'utiliser dans un NG premier beaucoup de couleurs, et ces couleurs sont définies comme ceci ici. Donc, si vous venez d'inspecter n'importe quel élément, vous les verrez ici. Vous pouvez donc utiliser toutes ces couleurs. Par exemple, le blanc est suface a. Donc, j'utiliserais cette couleur est préférable pour rendre tout le code unifié. Donc je vais dire ici var, donc phase A, ok, vérifions ça. Ok, nous avons ici l'espace est créé, mais nous devons le mettre au milieu. Alors comment nous pouvons faire les choses au milieu. Donc, je vais avoir ici position absolue, et puis je peux le positionner comme. Laissé à 50 pour cent, comme au milieu. Et aussi à partir du haut sera 50 pour cent aussi bien. Mais nous devons donner des marges. Donc, comme vous voyez ici qu'il a une certaine marge, ok, ça a baissé, mais c'est trop parce que, comme vous le savez, quand vous mettez quelque chose au milieu, vous devez mesurer moins la moitié de la taille du panneau. Donc, nous pouvons dire, par exemple, que vous pouvez faire comme ça. Vous pouvez dire Calc 2 pour cent moins la moitié de 650 est 325 pixel. Et puis ce sera au milieu. Et aussi nous avions besoin au milieu de ce vert du haut. Donc, nous pouvons dire aussi, Calc 50% moins 525, disons par exemple, c'est 260 pixels. Donc, de cette façon, nous pouvons dire que cela peut être au milieu, comme vous le voyez ici. Et quand vous redimensionnez l'écran de la hauteur et de la largeur, il restera toujours au centre, ok, à l'intérieur de ce panneau maintenant nous allons avoir moitié de l'image et la moitié du contenu où je dois mettre mon téléphone, il senti donc nous avons besoin d'une note. Donc, la grille aura une colonne, vous savez, que cette grille a 12 colonnes. Donc, la grille serait située à l'intérieur du panneau. Donc, nous allons dire que me donner tout cela comme une grille et me donner six colonnes pour l'image et six colonnes le contenu. Alors allons-y et faisons-le. À l'intérieur du panneau, je vais donner div, qui est a une grille p. Et à l'intérieur de la grille, j'aurai aussi un autre div, qui aura P moins colonne et six, parce que nous avons six colonnes pour l'image. Et à l'intérieur, je vais mettre l'image elle-même. J' ai donc imaginé défini et je l'ai copié dans le dossier évalué, mais le dossier Assets de l'application. Parce qu'ici, nous n'avons pas de dossier assets. Vous devez donc spécifier l'application que vous obtiendrez de l'image. Donc, dans l'application admin, nous allons placer dans le dossier assets notre image, nous avons des images. Et puis je vais placer la photo de connexion ici. Donc, ici, nous devons dire que la source de l'image sera exactement dans le dossier assets. Donc les actifs, il prendra automatiquement l'application, ils exécutent le dossier des actifs de l'application, des images. Et puis nous pouvons dire login. Et nous gardons ça. On l'a vérifié. On voit, ok, l'image est placée exactement à cet endroit. Alors maintenant, nous faisons la deuxième colonne qui contiendra notre forme elle-même. Donc, je dirais div point à nouveau la colonne 6. Et puis à l'intérieur de la colonne 6, je vais avoir, comme vous le voyez ici, que nous avons un titre et ensuite la forme elle-même. Donc nous ne pouvons pas simplement dire que je veux avoir h3 pour le titre. Je dirai bienvenue. Et aussi je veux avoir H2, par exemple, page de connexion. Et puis nous devons sauver ça. Et puis nous verrons que nous avons ici la page de bienvenue et de connexion. Et sous eux, comme nous avons vu que nous avons besoin de créer la forme. Donc, ici, nous devons créer un formulaire. Donc, je définirais une autre grille. Nous pouvons dire comme ça, vous ne pouvez pas considérer la grille comme une rangée. Donc là encore, nous pouvons dire div être appelé 12 ou oui, parce que nous avons besoin d'eux l'un sous l'autre. Et ici, je vais placer le premier composant, qui est comme le composant e-mail. Et aussi, je suis là, on va placer le mot de passe. Nous devons placer ce bouton de soumission, mais le traîneau fait quelque chose. Pouvez-vous, par exemple, si vous vous souvenez, dans la bibliothèque NG Prime, nous avons des composants comme celui-ci. Nous avons cette icône, puis l'utilisateur. Donc, ce serait génial si nous faisons la même chose pour utiliser ce composant aussi. Donc, nous avons ici groupe d'entrée, et il a l'utilisateur et le nom d'utilisateur, donc nous pouvons copier la même chose pour cela, ou nous pouvons le nommer comme e-mail. Donc, nous avons ici l'utilisateur, détenteur du lieu sera e-mail et le même sera pour l'entrée-groupe, mais nous allons mettre le mot de passe et l'icône du mot de passe, comme je le sais, il est verrouillé. Donc, ce groupe a une étendue pour l'icône et aussi l'entrée elle-même. Vérifions notre page. Ok, nous avons tout, mais ce n'est pas stylé parce que je pense que nous n'avons pas eu les styles de Prime NC. Je vous dirais pourquoi. Parce que nous sommes ici dans un nouveau module et nous travaillons dans un composant qui n'est pas dans le module d'application. Donc ce module ne peut pas voir les modules de prime et G que nous avons importés au niveau de l'application, dans l'application admin, comme ceux-ci. Parce que nous avons besoin de les importer là aussi. Plus tard, lorsque nous ferons le refactoring, nous verrons comment créer un module pour cela. Et puis nous pouvons appeler ce module pour tous les modules NG premiers. Nous ne pouvons donc pas être utilisés partout. Donc, je pense que celui-ci utilise le module de texte d'entrée afin que nous puissions l'utiliser aussi bien dans notre module d'utilisateurs. Donc, nous retournons à notre module utilisateurs et puis importons ce module aussi. Donc, nous dirions ici, module de texte d'entrée, bon pour moi. Comme nous le voyons ici, nous l'importons à partir du texte d'entrée d'énergie Prime. Nous vérifions à nouveau notre application et nous voyons que tout fonctionne bien. Donc, mais nous en avons comme ici certains, ça coche totalement sur le panneau. Prenons un peu de rembourrage. Donc peut-être que nous pouvons donner pour cette colonne, ce conteneur du côté droit, plus de rembourrage. Donc, nous pouvons dire que le rembourrage en général sera, par exemple, cinq. Donc quand on sauve et vérifie ça, on a maintenant un P-adic plus gentil. Et pour la grille qui contient les contrôles ou les entrées, nous pouvons lui donner aussi un haut de marge comme quatre, sorte que nous pouvons faire de l'espace entre les titres et aussi la forme elle-même. Peut aussi le rendre plus grand. On peut l'avoir comme six, d'accord, maintenant ça va mieux. Donc, ici, nous avons maintenant le titre, les entrées. Ici, nous l'avons encore comme texte. Nous devons donc changer le type de ce mot de passe d'entrée pour être mot de passe. Et puis on doit appeler un bouton. Et voici le bouton que nous avons déjà créé ou nous avons déjà vu dans leur bibliothèque prime et g. Donc, nous avons ici plusieurs boutons. Nous avons donc besoin d'importer le module moderne, qui est le module des utilisateurs finaux. Donc nous pouvons l'avoir ici aussi. Vous pouvez créer votre propre constante pour le module UX, mais je pense que dans le module utilisateurs, nous ne allons pas utiliser autant vous prochain module, nous aurons ici sur le module inférieur et le module de texte. Donc, nous allons à nouveau ici et utiliser l'un des boutons. Par exemple, utilisons celui-ci, le standard. Nous ne allons pas compliquer les choses. Je l'appellerai soumettre ou se connecter est à vous. Donc, quand nous économisons, nous allons ici à nouveau, nous verrons que nous avons le bouton de soumission. Vous pouvez spécifier les classes que vous voulez aussi pour les boutons, quelques-uns, rappelez-vous, donc nous voulons faire ce bouton avec pleine largeur dans le contenu Donc nous pouvons faire aussi bien. Comme vous vous en souvenez, dans la description ou dans les propriétés, nous avons quelque chose appelé une classe de style. Donc nous pouvons lui donner un cours aussi. Donc, nous pouvons dire ici, classe de type de boutons sera pleine btn par exemple. Et puis nous devons utiliser ce sera la classe et lui donner une propriété, par exemple, dans l'enregistrement de connexion. Et ici, nous pouvons dire le btn complet, nous aurons un blé qui est 100%. Donc, quand nous enregistrons et nous reviendrons à l'application, nous verrons que nous avons le bouton pleine largeur. Ok, ajoutons aussi une validation. Si vous vous souvenez, lorsque nous voulons ajouter la validation, nous devons utiliser un groupe de formulaires et l'ancien groupe, nous allons utiliser le générateur de formulaires pour cela. Donc, d'abord, nous devons combiner ce formulaire et utiliser quelque chose appelé form-group. Et le premier groupe aura une valeur ou la constante qui est créée dans le fichier ts, qui aura la forme elle-même exactement comment nous avons fait avec les catégories, avec les produits, avec les commandes. Tout cela, nous l'avons déjà fait et déjà expliqué. Donc, je vais donner ici un nom qui est appelé groupe de formulaire de connexion. Mais ici, il se plaint qu'il n'y ait pas d'entrée pour le regroupement étranger parce que nous avons besoin d'importer aussi certains modules, comme quatre modules. Et aussi le module de formulaire réactif. Et ces modules sont définis dans des formes angulaires comme nous l'avons vu précédemment et nous en avons trop parlé. Donc, en revenant au fichier ts, je l'ai fait rapidement. Nous avons ici le groupe de formulaire de connexion, que nous avons défini comme un groupe formel. J' ai utilisé le service de générateur de formulaires pour construire un formulaire. Et j'ai la méthode ici est appelée n'importe quel formulaire de connexion. Et le formulaire de connexion sera comme e-mail et mot de passe. Et e-mail a deux validateurs, qui est requis et e-mail, comme nous l'avons vu précédemment, et le mot de passe ainsi est nécessaire. Revenons au HTML et donnons la validation. Donc, d'abord, nous devons donner pour ce composant pour le nom de contrôle, comme vous vous en souvenez. Donc, ce nom de contrôleur sera e-mail et le message d'erreur, il sera exactement sous ce groupe. Nous aurons donc aussi un formulaire de connexion pour le définir. Donc, si vous vous souvenez, nous avons défini un formulaire de connexion pour faire court froid. Donc, nous pouvons dire obtenir le formulaire de connexion. Et ce formulaire de connexion retournera pour moi que ce groupe de formulaire point ou groupe de formulaire de connexion qui contrôle de ne pas avoir toute la phrase dans le modèle HTML. Nous ne pouvons donc utiliser qu'un formulaire de connexion. Donc, un formulaire de connexion si e-mail est invalide et le formulaire est soumis, puis choisissez l'une des deux erreurs, comme nous l'avons vu précédemment. L' e-mail requis, affiche ensuite l'e-mail requis lorsque l'e-mail est, par exemple, non valide, puis indique que l'e-mail n'est pas valide. Nous allons définir est soumis formulaire aussi bien ou variable. Donc, comme soumis par défaut est false, La même chose va aussi pour le mot de passe. Nous devons définir le nom de contrôle étranger et la police. La police ou le nom aura un mot de passe. Et puis je vais avoir le message d'erreur aussi. Donc, le bouton Soumettre, nous ne cliquons pas parce que nous utilisons le composant prime n j, nous disons onclick. Donc, si vous vous souvenez que prime NG a sa propre implémentation pour le clic de ses composants. Donc, nous pouvons dire ici sur Soumettre est défini aussi, la méthode onsubmit. Donc, nous allons aller ici et dire à nouveau que onsubmit est soumis, est vrai. Alors sauvegardons tout et essayons ça. Ok, nous avons les messages d'erreur, ok, l'AML est également invalide quand j'ai mis un email non valide, mais maintenant c'est valide. Alors maintenant, nous avons le formulaire de connexion. Maintenant, nous avons notre page de connexion. Nous verrons comment nous pouvons rediriger l'utilisateur à la page de connexion quand il ne se connecte pas, chaque fois qu'il va essayer de mettre, par exemple ici des produits ou par exemple, quand il essaie d'aller au panneau d'administration en général, nous allons le rediriger vers la page de connexion en fonction de la règle, s'il est connecté ou non. Ensuite, nous allons créer le service de connexion et nous allons soumettre l'utilisateur à prendre le jeton du backend. 126. Service de connexion et réessayer le jeton: Ok, après avoir créé notre composant de connexion et le panneau de connexion et les contrôles, nous allons créer le service, le service, qui vient quand je clique sur Soumettre, puis je vais soumettre un utilisateur avec e-mail et mot de passe et récupérer le jeton. Ce jeton, que je vais utiliser pour valider l'utilisateur s'il est verrouillé dans tous les pas dans mon application. Donc, comme vous le voyez ici sur la méthode Soumettre, nous allons appeler un service. Et ce service, vous pouvez utiliser soit le service utilisateur lui-même et vous pouvez définir une méthode. Vous pouvez l'appeler, par exemple, connexion, ou vous pouvez créer un nouveau fichier et un nouveau service, et vous l'appelez utilisateurs ou service d'authentification. Pour moi, je vais créer un nouveau service. Donc, je vais cliquer sur le générateur NX, puis je vais chercher service et ensuite donner le nom pour ce service, comme l'authentification d'authentification. Ou vous pouvez donner le nom complet et le projet sera des utilisateurs. Et si vous vous souvenez que nous avons la structure de fichiers là afin que nous puissions le mettre dans le dossier des services et nous pouvons aussi bien sauter les tests afin que nous puissions vérifier maintenant entendre que, ok, le service est créé à l'intérieur des services sous le nom de services.js. Ok, créons ce fichier et ensuite on y va. Nous verrons qu'il est généré et nous allons l'utiliser. Tout d'abord, comme nous l'avons fait avec les utilisateurs, nous devons configurer l'URL de connexion ou l'URL de l'API. Donc, copions celui-ci, puis collé ici et définissons une nouvelle variable. Nous appelons, par exemple, la bouche URL API. Et ce sera la même chose, ce serait les utilisateurs. Donc nous pouvons garder le même nom aussi. Donc, comme vous vous en souvenez dans le back-end, nous avons créé l'API qui est appelée utilisateurs. Et ces utilisateurs contenaient aussi la connexion de la méthode. Donc, nous n'allons pas utiliser la même API. Importons aussi cette variable d'environnement parce que nous allons utiliser cette variable d'environnement aussi bien ici. Donc, le premier service que nous allons utiliser, qui est appelé login. Et cette connexion aura un nom de connexion, et il acceptera l'e-mail, qui sera une chaîne, et aussi mot de passe, qui sera aussi bien que rétrécir. Et il reviendra pour moi observable de quoi de l'utilisateur, parce que nous allons obtenir l'utilisateur avec un jeton de cet observable. Nous devons donc importer aussi le modèle utilisateur, et ensuite nous devons utiliser le client HTTP afin que nous puissions aussi bien l'utiliser dans le constructeur ou l'appeler dans le constructeur, puis importé aussi bien à partir de la bibliothèque HTTP dans Angular. Et ici, nous disons revenir pour moi un point HTTP post. Et tout d'abord, nous postons l'URL et les données comme nous l'avons vu dans le facteur précédemment, ce sera e-mail et mot de passe. Donc, nous pouvons aussi bien ici passer e-mail sera e-mail et l'e-mail lui-même. Donc, nous avons un objet, la clé est l'email, et cet e-mail est une valeur qui est transmise ici. Et aussi, nous avons un mot à la mode qui sera aussi mot de passe. Si vous avez le même nom des clés et l' objet que vous portez déplacez également la définition de la clé. Vous pouvez simplement dire e-mail et mot de passe, et il sera connu automatiquement par le client HTTP post. Et ici, nous obtenons toujours une erreur parce que nous devons mettre le type de retour attendu, qui sera, par exemple, l'utilisateur. Parce que nous avons défini ici que nous attendons l'utilisateur. Et ici aussi, nous devons dire que nous attendons l'utilisateur. Et dans le facteur est, si vous avez vu précédemment, nous avons aussi bien l'utilisateur, qui est l'e-mail et le jeton. Remplaçons cette URL d'API par des utilisateurs. Et maintenant, nous avons le service de connexion est prêt. Donc, utilisons-nous cela et essayons de consigner ce que nous recevons du back-end dans le front end. Donc, je vais revenir ici à notre composant de connexion et ensuite je vais demander le service de maison. Donc, dans le constructeur, je dirai un point de vue pour moi, le service OSS. Je dirais donc que c'est ici que ce sera notre quatrième service. Et il serait affiché automatiquement et important automatiquement en fonction de ce que nous avons défini ici. Donc, nous avons ici ça dehors. Et puis je dirai onsubmit, faites-le directement. Nous pouvons dire ce point d'authentification, comme notre, notre identifiant de chien de service. Et puis nous pouvons passer le nom d'utilisateur et le mot de passe. Nous devons donc créer ici un objet qui contient le nom d'utilisateur et le mot de passe. Appelons-le, par exemple, les données de connexion. Et ces données de connexion auront l'e-mail. qui sera ce point de connexion formulaire email point parce que ce sera à la recherche groupe de formulaire qui contrôle puis la valeur de point d'e-mail et le mot de passe sera exactement le même. Ainsi, nous pouvons définir un autre membre qui est appelé aussi mot de passe. Donc, nous pouvons dire aussi donnez-moi le champ de mot de passe du formulaire et donné pour moi la valeur de celui-ci. Donc, comme nous le voyons ici que nous avons créé les données de connexion. Donc, nous pouvons dire ici, données de connexion email point et mot de passe de données de connexion point. Bien sûr, vous pouvez le faire directement. Vous pouvez dire que je veux envoyer directement les données du formulaire comme ceci. Et comme ça sans envoyer d'objet. Donc, nous pouvons le faire directement. Donc, vous n'avez pas besoin de ce total d'objet. Alors rendons ça très simple. Mais d'abord, nous devons également vérifier si le formulaire est valide, comme nous n'avons pas d'erreur de validation. Si ce point de groupe de formulaire de connexion est invalide, alors nous disons juste retour. Donc nous n'avons pas besoin de faire autre chose, continuer et faire pour moi qu'ils cherchent. Donc, comme nous l'avons dit précédemment, cette connexion reviendra pour moi et observable. Il observera les données. Quand il y a des données arrive, alors elles seront exécutées. Nous devons donc le rendre exécutable. Nous devons nous y abonner. Ensuite, nous attendons les données de l'utilisateur. Et à l'intérieur de cet utilisateur, allons console que dans notre journal, donc nous disons utilisateur de journal de la console. Alors essayons ça. Nous voyons que si tout fonctionne bien. Donc, je suppose que lorsque j'essaie de regarder dans, je vais obtenir des données à l'avant que donc voici ma console. Et je vais avoir, par exemple, mon e-mail. Et puis j'aurai le mot de passe. Je vais cliquer sur Soumettre. Je vais voir que j'obtiens ici les données avec un nouveau jeton, exactement comment nous l'avons fait avec le back-end. Mais si je vais mettre comme mot de passe long, je vais obtenir ici erreur, peut-être que la mauvaise demande, qui est le mot à la mode, est fausse. Donc, nous devons également montrer qu'ici que leur mot de passe est faux parce que nous ne voyons rien ici dans le front end. Nous devons donc montrer à l'utilisateur qu'il y a quelque chose qui ne va pas. Alors, comment peut-on faire ça ? Comme vous vous en souvenez, après l'abonnement, nous pouvons définir et modifier. Cette erreur peut devenir comme ça. Et puis nous disons que s'il y a une erreur et à l'intérieur de cette erreur, nous pouvons dire journal de console pour moi, l'erreur elle-même. Nous pouvons donc le faire aussi. Essayons de mauvais nom d'utilisateur et mot de passe afin que nous puissions l'utiliser comme ceci. Et je vais mettre un nom aléatoire. Ok, j'ai une erreur et j'ai le type d'erreur ici. Alors maintenant, nous allons montrer un message à l'utilisateur. Par exemple ici qu'il y a une erreur ou le nom d'utilisateur ou le mot de passe incorrect. Donc on peut le montrer exactement ici. Donc, nous pouvons aller à nouveau au formulaire de connexion et nous pouvons placer une autre colonne. Par exemple, ici nous pouvons définir une autre colonne avec k, disons div, l'appel P et 12 aussi. Et à l'intérieur de ce p égal 12, nous pouvons définir un petit. Et ce petit nous aurons une classe qui s'appelle erreur P. Et cela soit flèches. e-mail ou le mot de passe sont erronés. Mais comme nous le voyons ici que nous voyons toujours cette erreur parce que nous avons définie comme une étendue sans définir aucune condition sur l'apparence. Donc nous pouvons mettre aussi bien ici ng-if. Donc, nous pouvons dire ng-si le formulaire est soumis. Et aussi, nous pouvons définir une autre variable qui est appelée erreur, comme l'erreur d'authentification. Pour que nous puissions aller ici et définir celui-ci. Et par défaut, il aura une valeur tombe. Et puis quand nous allons avoir des erreurs ici, nous pouvons dire que l'authentification flèches est vraie, donc nous sauvegardons tout. Retournez à notre application. Ok, nous ne voyons pas le message d'erreur. Donc, quand je vais mettre mon e-mail et mon mot de passe puis des souris, je n'ai pas eu d'erreur parce que j'ai eu l'utilisateur et le jeton. Mais quand je fais une erreur, par exemple, dans le mot de passe, je reçois une erreur et j'ai eu un courriel ou un mot de passe erroné. Mais que faire si je reçois, par exemple, une flèche mais ce qui n'est pas une erreur d'authentification. Comme certains, une erreur qui vient comme avec l'erreur du serveur parce que le serveur n'est pas connecté. Nous devons donc spécifier le statut d'erreur. Si vous vous souvenez, nous avons défini dans l'état backend de l'erreur, mais s'il y a une erreur de serveur en général, alors cela me donnera 500. Donc, en fonction de l'état de l'erreur, je peux montrer ici différents messages. Donc ici, au lieu d'avoir ce message, nous pouvons également définir une variable. On peut l'appeler, par exemple, message de la maison. Et ce message sera remplacé par la phrase que nous avons créée précédemment. Nous aurons donc ici, par exemple, notre message. Et ce message par défaut est un e-mail ou un mot de passe incorrect. Mais ici, nous pouvons le changer en fonction de l'erreur. Donc, je peux vérifier ici que l'état d'erreur. Donc, nous ne pouvons pas dire réponse d'erreur HTTP. Donc, nous avons ici réponse d'erreur HTTP est livré avec un type ou un statut. Donc, quand je vais ici et vérifier l'erreur, si vous vous souvenez, nous avons ici une réponse d'erreur de ce type, et puis nous avons ici, ok , false, puis état 2s est 400. Donc, de toute façon, nous allons montrer l'erreur s'il y a une erreur qui s'est produite. Et puis je dirai si le statut d'erreur est égal à 400 ou pas égal à 400, alors ce message OK point sera une erreur dans le serveur. Donc, nous ne pouvons pas dire cela à l'utilisateur qu'il sait qu' il y a un problème dans l'authentification dans notre serveur. Donc, nous pouvons dire erreur dans le cerveau. Veuillez réessayer. Plus tard. Dans ce cas, nous avons entouré toutes les erreurs ou les erreurs possibles impaires à l'utilisateur. Donc, ce ne sera pas un problème pour nous lorsque nous montrons les flèches pour l'utilisateur. Et de la même manière, nous devons dire que ce point de la flèche, quand tout va bien, alors nous devons le cacher. Donc, nous disons que l'erreur de serment n'est pas vue, est fausse. Donc, nous pouvons revenir ici et nous pouvons recharger notre application et essayer à nouveau. Donc, je dirai, par exemple, trouvé dans votre gmail.com, et ensuite je ferai, par exemple, une erreur. Ok, j'ai eu l'erreur et ensuite je vais m'en occuper, pour qu'on puisse faire ça. Donc d'accord, l'erreur a disparu. Donc maintenant, je vais faire une erreur dans le serveur. Erreur pas sur le nom d'utilisateur ou mot de passe sont erronés, mais adulte dans leur serveur lorsque l'utilisateur saura qu'il y a une erreur dans le serveur et voir ce message. Donc, nous pouvons aller ici au service utilisateur et peut-être que nous pouvons ou le service d'authentification, et nous pouvons faire quelques erreurs ici, par exemple. Donc, nous allons à nouveau à notre application et essayons de vous connecter à nouveau. Et puis je vais cliquer sur Soumettre. Nice parce que j'ai eu une erreur différente, ce qui n'est pas 400. J' ai 404. Et cela m'a donné ce message. Alors maintenant, nous avons entouré l'utilisateur avec toutes les possibilités des flèches. Dans la prochaine conférence, nous allons voir ce qu'il faut faire avec cet utilisateur et le jeton. Et nous pouvons le stocker et prendre des décisions sur notre application en fonction de ce jeton. 127. Créer un service de stockage local et un jetons de magasin de magasin: Ok, peut-être qu'on se demande maintenant pourquoi on fait leur login ou pourquoi on a besoin de l'authentification. L' authentification s'effectue normalement lorsque vous voulez empêcher l'utilisateur d' accéder à certaines pages spécifiques ou de faire des requêtes au serveur. Par exemple, si quelqu'un vient à mon application et puis il a dit naviguer directement vers les produits, alors il verra leurs produits, mais je veux empêcher l'utilisateur de le faire. Donc, il sera redirigé directement vers la page de connexion et ensuite je vais le laisser se connecter. Et bien sûr, quand nous allons naviguer lorsque l'utilisateur navigue, nous devons toujours vérifier qu'il est autorisé à naviguer dans mon application ou non. Pour cela, il n'est pas juste de faire un nouveau jeton ou de générer le jeton chaque fois que je veux naviguer à un endroit quelconque. Donc, chaque fois que je vais demander à l'utilisateur s'il a le jeton ou non, puis vous demander le backend validé, puis le renvoyer à l'avant et puis je lui permets de naviguer vers un autre endroit. Ce n'est pas juste et c'est très épuisant pour le serveur. Donc, pour cela, nous allons stocker le jeton que nous avons obtenu quand nous avons verrouillé dans le stockage local. Si notre application, n'importe quel site Web et toute application a entendu quelque chose appelé un stockage local ou de stockage. Et dans le stockage local, vous pouvez l'utiliser pour stocker des données de votre application, que vous devez toujours utiliser pour vérifier l'utilisateur, par exemple, ou si vous voulez stocker leur panier comme nous le voyons ici, ou si vous voulez définir le locale actuelle de l'application, par exemple, un utilisateur l'a en anglais et il l'a définie, par exemple en français. Et puis, quand il est retourné sur le site, il ne reverra pas l'anglais, mais il verra le français, le français qu'il a commencé. Donc, ces valeurs sont toujours stockées ici. Et sur la base de cela, puis ils utilisateur quand il a visité le site à nouveau, tout quand il navigue ailleurs, il utilisera toutes ces informations qui sont utilisées dans le stockage local. Donc, le stockage local, vous ouvrez DevTools, puis vous allez à l'application et vous verrez le LocalStorage. Il y a aussi les cookies qui est aussi le stockage de session. Mais nous allons utiliser dans ce cours, le stockage local. Donc, ce que je vais faire maintenant d'abord, je vais enregistrer ce jeton dans mon stockage local. Donc, lorsque je me connecte et que j'ai une connexion réussie, je stockerai ce jeton dans mon stockage local. Supprimons donc toutes ces informations de données. Vous pouvez supprimer toutes les données du site Web facilement lorsque vous allez à un onglet de stockage ici dans Google Chrome, puis vous dites données secondaires claires. Donc, lorsque vous effacez tout, alors vous verrez que votre stockage local est vide. Maintenant, nous allons, quand nous nous connectons, nous mettons le jeton dans le stockage local. Pour cela, je dirais aussi que je peux faire un autre service qui est appelé ici un service de stockage local. Donc générons ça aussi. Donc, je vais aller ici, générer, et ensuite je dirai service comme nous l'avons fait précédemment. Et le service serait répété dans les services. Et le nom de celui-ci sera stockage local et le nom du projet sera utilisateurs. Et aussi, nous allons sauter ces tests. On le dirige. Nous créons le service comme nous le voyons ici, et nous allons faire le service de stockage local. Alors comment nous pouvons travailler avec le moteur de stockage local et tout ce que je vous ai montré. Nous pouvons le faire très facilement, faire avec JavaScript standard et Luke et le stockage si vous Google pour cela dans le navigateur et vous allez ici à MD et Web docs, vous verrez que nous avons quelque chose appelé un stockage local. Et ces stockage local, il a quelques méthodes comme set item et get item et remove item et clear en général. Alors prenons un exemple. Je vais créer une méthode de service. Nous pouvons l'appeler, par exemple, ici, après le constructeur, nous pouvons dire set item. Et set item me demandera une donnée. Et puis je ne peux pas dire exactement l'élément de l'ensemble de points de stockage local. Et puis je peux spécifier la clé. Donc, par exemple, je peux dire jeton et ensuite je vais donner les données comme une valeur. Donc, nous pouvons utiliser ce service de stockage local n'importe où. Donc, utilisons-le après que nous ayons une connexion ou un succès verrouillé. Donc, par exemple, après avoir fait une connexion, alors j'irai ici et j'appellerai leur service de stockage local à partir d'ici. Donc nous pouvons dire ici, service de stockage local privé. Et puis il aura un service de stockage local de type. Et puis nous pouvons utiliser ce service de stockage local ici. Donc, nous dirons qu'après cela, ce service de stockage local mis élément set. Et je vais spécifier les données. Par exemple, je vais stocker le jeton point utilisateur, ok, nous sauvegardons, puis essayons de vous connecter et de vérifier notre stockage. Donc nous allons ici et j'aurai mon email et mon mot de passe. Donc, après avoir cliqué sur Soumettre où je vais verrouiller et appeler le service de journalisation, alors je dois il ici la clé définie du jeton. Pour être avec une valeur du jeton. Donc, quand je clique sur Soumettre, car je vois que j'ai un réseau réussi, puis j'ai écrit le nom et le mot de passe, puis j'ai récupéré ce jeton. Donc, à partir de maintenant, nous allons utiliser ce jeton pour vérifier la navigation de l'utilisateur sans demander de données de connexion encore et encore, chaque fois que l'utilisateur navigue quelque part, je veux voir s'il est autorisé ordinal que je vais demander un nouveau jeton. Maintenant, nous pouvons toujours demander le jeton de stockage local. Et comme vous vous en souvenez, ce jeton a un délai d'expiration. Donc, quand il a expiré, l'utilisateur ne pourra pas naviguer à nouveau dans l'application seulement lorsqu'il se connecte à nouveau et demande un nouveau jeton. Donc, ce que nous avons réellement besoin ici, nous avons besoin d'un élément de jeu et aussi obtenir l'article, comme nous avons besoin de récupérer le jeton. Donc, nous pouvons dire que la valeur de retour sera une chaîne, puis il retournera pour nous le point de stockage local get item, et ce sera quoi ? Le jeton, et nous pouvons faire aussi ajouter supprimer l'élément. Donc, supprimez l'élément, nous allons l'utiliser ou nous supprimons le jeton lorsque l'utilisateur se déconnecte également. Ici, je dirai point de stockage local supprimer l'article, et ici ce n'est pas le retour est juste une méthode normale où il va supprimer pour moi l'élément. C' est mieux que de renommer ceux qui ne sont pas mis élément mais setosa parce que nous n'utilisons qu'une seule clé qui est jeton, et spécifiquement pour l'authentification. Donc, je vais ici pour dire ce jeton set et aussi ici et obtenir le jeton. Et ici, supprimez le jeton. Donc c'est mieux comme ça. Nous pouvons donc utiliser ce service à l'extérieur et n'importe où dans notre application. Et il est toujours agréable de définir une constante pour les chaînes répétées. Donc, par exemple, je dirai ici const, par exemple, sera jeton. Et ce jeton aura un jeton de nom JWT. Et ici, ce qui serait toujours, les constantes seront une majuscule. Et nous pouvons remplacer ce jeton ici. Donc, pour ne pas répéter la même chaîne, nous pouvons dire toujours une constante et nous pouvons utiliser cette constante et la renommer. Ou voulons-nous quand nous voulons renommer cette clé ? Alors sauvegardons ça et réessayons. Nous avons toujours le jeton. Et si je dois remettre mon e-mail, je verrai que j'ai eu une erreur parce que ici nous devons appeler l'élément non défini, mais nous dirons jeton set. Et puis nous sauvegardons à nouveau l'e-mail, nous soumettons, et puis nous aurons ici ce jeton JWT. Nous devons donc aussi supprimer celui-ci. Alors faisons un départ clair pour que nous puissions effacer à nouveau les données. Et puis nous n'aurons rien dans notre entrepôt local. Alors essayons à nouveau de soumettre. Ok, gentil, nous avons le jeton JWT et de cette façon nous allons utiliser ce jeton pour protéger et protéger les URL. Et cela équivaut au backend. 128. Créer des tracés pour le panneau d'administrateur: Ok, dans cette conférence, nous allons voir comment garder le panneau d'administration. Comme nous devons protéger le panneau d'administration contre les utilisateurs qui ne sont pas autorisés ou authentifiés à se connecter. Mais tout d'abord, normalement après avoir mis le nom d'utilisateur et le mot de passe et ensuite nous cliquons sur soumettre, nous sommes redirigés vers le panneau d'administration si tout va bien et notre nom d'utilisateur et mot de passe, non ? Donc, nous ne pouvons pas le faire après le bouton Envoyer ou cliquez sur Soumettre, puis nous pouvons rediriger l'utilisateur vers l'application ou vers l'application du panneau d'administration. Alors, comment nous pouvons faire cela, nous pouvons aller ici au composant de connexion. Et nous voyons que nous avons déjà créé l'authentification de connexion. Et après que l'utilisateur s'ouvre. Ainsi, nous pouvons appeler le routeur, le routeur, qui permet v de naviguer à une nouvelle page ou à la page d'accueil de notre application. On ne peut pas appeler ici le routeur privé. Et ce routeur aura un routeur et il sera importé à partir d'Angular. Et puis nous allons ici où nous avons une connexion réussie. Ensuite, nous disons ceci, le routeur, et puis je peux dire naviguer, puis je spécifie l'URL dans le tableau. Nous avons donc besoin, par exemple, de la page d'accueil. Nous n'avons pas besoin d'aller à des sous-pages. Nous allons donc à la page d'accueil lorsque nous nous connectons à l'application. Essayons ça et puis allons ici. Nous pouvons dire, par exemple, e-mail, je vais mettre mon e-mail et le mot de passe, puis je vais cliquer sur Soumettre. Donc, nous cliquons sur Soumettre et puis nous voyons que nous sommes redirigés vers l'application ou vers le panneau d'administration. Nous avons ici des espaces à cause des routes. Nous allons organiser nos itinéraires plus tard pour le rendre directement au tableau de bord. Donc, comme vous le voyez ici, nous sommes maintenant en mesure de naviguer dans l'application. Nous avons un problème ici. Je vais supprimer le jeton du stockage local, donc nous serons considérés comme non verrouillés. Donc, lorsque je navigue, je suis toujours capable de naviguer dans l'application. Même moi, je n'ai pas de jeton. Ou par exemple, laissez-moi recharger l'application, allez à nouveau à la page de connexion. Et puis comme vous le voyez ici, nous sommes dans la page de connexion. Donc, si je vais à U R, L et je dis des ordres, alors j'irai à la page des propriétaires. Donc c'est faux. Nous devons d'abord nous connecter et voir que l'utilisateur est vraiment verrouillé. Ensuite, nous lui permettons d'aller à des commandes ou deux produits ou à d'autres pages. Donc, pour cela, nous avons besoin de créer quelque chose est appelé garde. Et la garde est en fait un service. Vous pouvez le transmettre aux routeurs ou aux itinéraires que vous avez créés. Et puis vous pouvez dire protéger cette route jusqu'à ce que l'utilisateur ait approuvé quelque chose ou que l'utilisateur ait fait quelque chose. Nous pouvons donc le faire très facilement. Donc, quand nous allons au module d'application ici, sorte que vous vous souvenez, nous avons ici les routes. Donc je ne peux pas dire que cette route, route, je dis peut activer. Et puis je spécifie quelque chose appelé garde. Et le garde est en fait un service et le service qui observe toujours les routeurs et voir s'il est autorisé à entrer dans cette route ou rester en place sans passer à une nouvelle route. Alors gardons ça vide et nous allons créer notre garde. Donc, tout d'abord, je vais aller créer les gardes dans les services de la bibliothèque utilisateur. Nous allons donc créer un nouveau service. Donc, je vais au module NX et puis je dis générer pour moi un nouveau service. Et ce service sera situé dans le dossier des services et il sera appelé garde-bouche. Donc nous appelons ce service comme notre garde buccale. Et puis je spécifie que le projet sera des utilisateurs parce que nous le mettons dans la bibliothèque de l'utilisateur et c'est tout. Donc, nous pouvons aussi sauter ces tests. Donc, quand je clique sur Exécuter, je verrai que le service est créé ici comme ancien service de garde. Vous pouvez supprimer ce suffixe. Par exemple, vous pouvez dire que comme hors garde sans service Asgard, vous pouvez dire seulement hors garde. Et ce sont le garde implémentera quelque chose d'Angular, qui est appelé peut activer. Et ceci vient du routeur Angular. Donc, cela peut activer est une méthode qui observe toujours pour moi le routeur et retourne vrai, alors nous permettons que nous allons à une nouvelle route, ou c'est faux, deux 4 bits vont à cette route. Pour le comprendre plus de moi, je vais créer cela peut activer. Donc, par exemple ici, il dit que l'erreur que la classe sont hors de garde est en train d'implémenter peut activer, ce qui peut activer la méthode est manquant. Donc, créons cette méthode parce que lorsque vous voulez implémenter une classe ou étendre quelque chose de classe, vous devez également faire les mêmes méthodes qui le sont. Créé dans cette classe. Donc, quand je vais ici pour ne pas activer, j'appuie sur Contrôle. Je vois qu'il a une interface et cette interface a une méthode qui est appelée peut activer, et cette méthode acceptera la route qui sera activée snapshot et aussi état. Et il reviendra pour moi observable de booléen ou une promesse ou Booléen lui-même, ce qui est clair. Nous pouvons donc également copier cette méthode. Nous pouvons le prendre ici et aller à notre protège-bouche, puis le coller ici et ouvrir l'implémentation de cette méthode. On doit importer des trucs. Par exemple, activé a écrit snapshot, c'est important. Nous contrôlons l'espace point ou contour dans Windows, puis nous verrions qu'il est importé ici automatiquement. Et un autre nous avons besoin aussi de l'importer. Ok, cela me donne une erreur parce que cette méthode renvoie un booléen ou observable de booléen ou une promesse de booléen. Donc nous pouvons revenir comme tout simplement comme faux. Et puis nous devons exporter cette méthode afin que nous puissions l'utiliser au niveau de l'application. Donc, nous allons ici et nous disons que l'exportation des services Lip. Et puis le garde que j'ai créé, nous sauvegardons et je vais maintenant à notre module d'application. Et puis je dirais, utilisez le protège-dents que j'ai créé. Donc, ici, nous avons l'Asgard et il serait importé automatiquement à partir de la bibliothèque des utilisateurs. Alors faisons défiler vers le bas et nous verrons que nous avons protégé ce chemin, comme l'itinéraire ajoute ses enfants afin que nous ne puissions accéder à aucun enfant parce que ce hors garde retourne toujours faux. Voyons voir ça. Donc, comme vous le voyez ici, nous avons une page blanche parce que je ne suis pas en mesure d'accéder à quoi que ce soit, mais par exemple, login, ok, je ne peux pas accéder à la connexion. Mais si je mets, par exemple, quelque chose qui est enfants de cette route, parce que nous avons ici des catégories, commandes, des produits, et cetera. Donc je vais mettre un d'eux parce que nous avons ici des produits. Et puis je vais obtenir une large page parce que je ne suis pas autorisé maintenant à entrer parce que peut activer est pour me donner de l'ordre d'entrer parce qu'il retourne une force. Donc, quand je l'envoie à true, puis enregistrer et essayer à nouveau, nous verrons que nous sommes en mesure de nous connecter et de voir le panneau d'administration. Mais quand je le mets à false, je ne serai pas autorisé à y entrer et j'aurai une page blanche. Donc nous sommes très proches. Donc maintenant, nous sommes autorisés à aller à la page de connexion parce que nous ne l'avons pas inclus dans la garde. Parce que si vous vous souvenez que la page de connexion se trouve dans le module utilisateurs ici. Nous avons donc la voie de connexion en dehors du jardinage, donc nous n'avons pas besoin de la protéger ou de la protéger. Donc, je veux en quelque sorte ne pas être dirigé vers une page blanche ou vers une page qui n'est pas définie. Donc, je veux être redirigé vers leur connecté quand je ne suis pas autorisé à entrer dans cette route. Donc, quand je mets ici quelque chose comme produit ou l'utilisateur essaie d'accéder directement via l'URL. Je veux l'envoyer à la page de connexion. Donc exactement la même chose. Nous utilisons ce garde exactement pour faire ce que nous voulons. Donc, lorsque l'utilisateur essaie de faire quelque chose avec ses liens, nous gérons. Quel est le résultat de cela ? Nous pouvons donc le faire très facilement. Donc, nous pouvons dire que aussi, nous devons rediriger l'utilisateur en utilisant le routeur vers la page de connexion. Ce que je vais faire ici que je vais importer à nouveau un routeur privé. Et ce routeur vient par angulaire à nouveau comme nous l'avons fait directement dans la connexion. Et aussi, je vais dire que naviguer pour moi de me connecter. Donc, quand je dis celui-ci, puis je vais à nouveau et j'essaie d'entrer, par exemple, deux ordres. Ensuite, je vais obtenir trois dirigé vers la page de connexion parce que je ne suis pas autorisé à entrer à ce salaire. D' accord. Lorsque je suis autorisé à entrer, je suis autorisé à entrer lorsque j'ai un jeton avec un délai d'expiration valide, puis je peux autoriser l'utilisateur à entrer sur cette page. Dans ce cas, je veux obtenir le jeton ici d'une manière ou d'une autre et je retournerai false ou true qui peut activer en fonction des données de jeton. Donc, si vous vous souvenez, nous avons stocké le jeton dans le stockage local. Donc, nous pouvons utiliser à nouveau ici notre service de stockage local. Donc, je dis jeton de stockage local privé, apportant pour moi à nouveau ce service de stockage local. Et là, je vais avant tout. Je veux avoir le jeton. Donc, je vais dire le jeton const, puis ce service de stockage local point, puis obtenir le jeton. Donc, nous avons le jeton. Donc, je vais vérifier s'il y a un jeton dans leur stockage local, comme il n'est pas vide, puis permettez-moi, l'utilisateur d'accéder à cette page et de l'envoyer par deux peut activer la méthode. Donc, je vais dire ici, retourner true, sinon point routeur naviguer à la page de connexion et retourner false. Essayons donc de sauvegarder cela et réessayer. Donc nous sommes ici, j'y vais, j'ai ici ce jeton. Donc, quand j'essaie d'aller aux produits, je dois être capable de voir les produits. Parce que nous avons des jetons ici. Je dirai ici les produits. Et puis, ok, parfait, on a l'axe. Ok, essayons de supprimer le jeton et revenons à notre page de connexion. Et puis j'ai supprimé le jeton. Donc quand je lirai le jeton, je n'aurai rien. Ensuite, il va renommer le direct me et retourner faux. Donc, je vais dire ici produits. Ok, je suis revenu voir Logan. C' est ainsi que nous protégeons la route. Ainsi, l'itinéraire lui-même est protégé dans l'application du module d'application, comme vous vous en souvenez, nous avons ici avec le protège-bouche. Donc, toutes ces routes sont protégées en fonction de peut activer ce qu'il va retourner pour moi, vrai ou faux. Donc quand je vais ici, je vérifie s'il y a un jeton, et puis je dis, ok, connectez-vous. Mais maintenant dans ce cas que si quelqu'un vient ici, je me sens comme un jeton DVT, exactement comme la clé et je mets quoi que ce soit, alors je pourrai aller à la page des produits. Parce que j'ai dit s'il y a un jeton, je n'ai pas vu la valeur de ce jeton si je suis autorisé ou non, si je suis administrateur ou non. Et ce que nous verrons dans la prochaine conférence, nous devons lire ce jeton et l'analyser. Et sur la base de cela, nous permettons à l'utilisateur d'entrer à cette page ou nous lisons le diriger vers la page de connexion. 129. Lisez la isAdmin et l'expiration des données de jetons: Ok, dans cette conférence, nous allons voir comment nous pouvons vérifier si l'utilisateur est administrateur ou non. Comme je vous l'ai dit ici précédemment, que nous ne faisons pas ici une sécurité utilisateur, nous ne faisons pas la sécurité des applications. La sécurité elle-même va lorsque nous interceptons les requêtes HTTP, comme obtenir un produit ou obtenir des commandes, poster un produit ou poster des commandes uniquement avec un jeton. Donc normalement n'importe quel client peut accéder à mon API sans jeton. Nous en parlerons plus tard. Mais maintenant, ce que nous faisons n'est qu'une expérience utilisateur. Donc, je suis juste en train de diriger l'utilisateur s'il est connecté ou non. Et s'il est enfermé, il peut voir le panneau d'administration. Sinon, il sera redirigé vers la page de connexion. Alors analysons ce jeton qu'on a obtenu d'ici. Donc, si vous vous souvenez, nous avons créé ce jeton JWT et dans le back-end, nous avons intégré des données comme l'ID utilisateur et aussi s'il est administrateur ou non. Donc, quand nous allons à JWT point io et ensuite nous mettons notre jeton ici, nous verrons que nous obtenons ici l'ID utilisateur et s'il est admin et aussi le temps d'expiration. Donc, nous devons en quelque sorte décoder ce jeton dans le front end. Et puis nous découvrons si l'utilisateur connecté est admin lot impair. Essayons ça maintenant. Donc, tout d'abord, je vais utiliser une méthode appelée AT ou B. C'est comme pour décoder les chaînes de données qui ont été encodées sur la base de l'encodage base-64. Voyons ce qu'on peut obtenir ici. Donc, tout d'abord, je veux décoder ce jeton. Donc, s'il y a un jeton, alors faites pour moi une constante, appelez-le décodage de jeton. Et puis nous allons utiliser cette méthode est Javascript méthode, donc nous pouvons l'utiliser directement sans appeler aucune bibliothèque. Donc, je vais dire ici jeton, et ensuite nous verrons ce que nous obtenons en conséquence. Donc, nous allons enregistrer la console aussi, ce décodage de jeton pour voir ce que nous avons dans la console et ce que cela, ou quel jeton décodé reviendra pour moi. Donc, nous enregistrons et allons à notre application et vérifions notre console. Donc, si vous vous souvenez, nous sommes déjà connectés ici que je puisse passer directement aux commandes par exemple. Et puis je vais obtenir ici quelque chose que nous verrons que nous obtenons erreur est appelée erreur de caractère invalide. Cela parce que le jeton est composé de trois parties. La première partie est appelée les en-têtes, qui spécifie quel type du jeton et aussi ce que l'algorithme est écrit ou généré ce jeton. Et la deuxième partie contiendra les données, comme vous le voyez ici, la couleur correspond. Donc, nous avons ici aussi les données qui arrivent à l'intérieur du jeton. Et la troisième partie est pour vérifier le jeton chiffré ou la signature du jeton. Nous sommes intéressés par la deuxième partie. Nous devons donc diviser ce jeton en fonction du point. Donc, après l'avoir divisé, nous obtenons la deuxième partie. Donc, tout d'abord, nous devons nous séparer. Nous disons point de jeton split. Et puis basé sur le point. Et comme vous vous en souvenez, la scission reviendra pour moi tableau de trois éléments. Donc, la première partie et la deuxième partie, qui contient nos données. Donc, nous allons compter de 0 à deux. Donc, nous voulons la deuxième partie. Donc, ici, nous avons maintenant divisé le tableau et nous allons prendre la partie et décoder et lire ce jeton de cette façon. Donc, après le codage et revenir à l'application, nous verrons que nous obtenons également l'ID utilisateur objet est admin et aussi le temps d'initialisation et le temps d'expiration du jeton. Donc exactement comment on est arrivés ici. Donc, la première partie est pour les en-têtes, et la deuxième partie est pour les données du jeton. Et la troisième partie concerne la signature et la vérification de la signature. Nous avons donc obtenu ces données, qui nous intéressent. Alors maintenant, nous sommes prêts. Nous lisons le jeton comme un JSON. Donc, nous pouvons aussi prendre cette partie, tout cela comme un JSON. Donc, nous pouvons dire JSON point analyse. Et puis je peux lire tout cela comme un objet JSON. Ensuite, je serai en mesure de lire le contenu de ce jeton. Donc, nous ne pouvons pas dire si jeton decode dot est admin, comme l'utilisateur est admin exactement comment nous l'envoyons à partir du back-end et ensuite nous retournons un vrai. Donc, dans ce cas, si l'utilisateur est vraiment administrateur, alors il peut accéder au panneau d'administration. Sinon, il ne sera pas en mesure d'y accéder. Alors supprimons cette partie et vérifions si tout fonctionne bien pour nous. Donc, je vais essayer notre jeton après avoir sauvé. Donc, je vais aller ici à la connexion. Et puis, ok, on a tout ici. Et je vais me déconnecter en supprimant ce jeton minutieusement, et je vais me connecter à nouveau. Donc, je vais dire mon e-mail. Et comme vous le voyez, j'ai mis ici mon email et mon mot de passe et je vais cliquer sur Soumettre. Ok, nous sommes vraiment dirigés parce que je suis administrateur. Je vais essayer un autre utilisateur. Donc, nous aurons un utilisateur qui n'est pas admin. Donc, je vais revenir à la page de connexion. Donc, je vais aller directement à la base de données et ensuite je vais me changer pour ne pas être administrateur, mais je serai comme Faux d'admin. Et puis je vais cliquer sur mettre à jour cette ligne. Donc, après cela, j'ai été mis à jour, je vais essayer à nouveau de me connecter. Voyons ce que nous aurons. Donc, je vais mettre mon e-mail et mon mot de passe, puis je voudrais cliquer sur Soumettre. Nous voyons ça, ok, j'ai ce jeton, mais je ne suis pas capable de me connecter comme vous le voyez ici, parce que je ne suis pas administrateur, parce que l'administrateur ne vient pas avec ce jeton. Donc pour être sûr, je veux vous montrer pour qu'on puisse copier ce jeton et le mettre ici. Et nous verrons que c'est admin est faux. Donc, dans ce cas, je ne suis plus en mesure de me connecter. Alors remettons-le comme un vrai pour être toujours en mesure de se connecter. Donc, dans ce cas, je fais la distinction entre les clients et non les clients. Peut-être que quelqu'un viendra me dire, d'accord, je peux créer un identifiant d'utilisateur et est administrateur. Et comme je crée un jeton comme celui-ci, exactement. Et j'ai collé dans mon stockage local et j'essaie de passer par le lien, je vais vous dire, oui, bien sûr, vous pouvez le faire, mais vous ne serez pas en mesure d'envoyer des demandes. Vous ne pouvez pas prendre de produit, vous le ferez, vous allez dans le panneau d'administration , bien sûr, mais vous ne serez pas en mesure de voir des données. Vous ne pourrez pas envoyer de requêtes au serveur. Parce que comme nous le verrons plus tard, nous allons les intercepter et protéger les API avec un jeton. Donc, comme vous vous souvenez dans Postman, comment nous chargeons toujours le jeton dans le corps de la requête pour pouvoir envoyer cette requête au backend. Donc, comme vous le voyez ici, nous chargeons toujours un jeton avec chaque requête que je faisais. Donc, dans ce cas, nous protégeons le backend. Ce que nous faisons ici, c'est juste l'expérience utilisateur. Ainsi, l'utilisateur ne sera pas en mesure de voir facilement le backend ou le panneau d'administration s'il n'est pas administrateur. Donc, je me mets moi-même comme administrateur à nouveau et je suis capable de verrouiller et récupérer les données afin que nous puissions aussi bien utiliser le délai d'expiration. Ainsi, un utilisateur est en mesure de se connecter à tout moment à notre application, tout moment de la journée. Donc, si vous vous souvenez, nous avons une journée d'exploration, nous l'avons placée dans le backend. Bien sûr, vous pouvez définir le jeton dans le back-end autant que vous le souhaitez que nous l'avons vu précédemment. Donc ici, je vais vérifier aussi bien le jeton s'il a expiré ou non. Donc, nous allons dire ici admin. Et aussi je vais avoir une méthode qui vérifiera pour moi le temps d'expiration du jeton, une méthode privée, il sera jeton expiré. Donc, ici, je saurai que si le jeton est expiré ou non, donc, puis nous dirons envoyer le décodage du jeton et EXP, parce que si vous vous souvenez, expiration vient dans le champ x. Donc, je vais créer cette méthode. Je vais te montrer vite. Donc, nous avons ici à la méthode qui est appelée jeton expiré, et il aura le temps d'expiration. Il reviendra pour moi booléen. Donc, pour vérifier l'heure d'expiration de quelque chose, vous savez que l'heure est à venir pour nous comme une impression ou comme un horodatage. Et cet horodatage, nous pouvons l'analyser en faisant cette méthode. Donc je peux vérifier si le sol puis obtenir le temps. Donc tout cela, comme si j'avais le temps maintenant, si c'est plus grand que cette exploration, alors le jeton est valide. Si ce n'est pas le cas, l'expiration du jeton est terminée, sorte que le jeton est expiré. Donc, de cette façon, vous pouvez vérifier le jeton s'il a expiré ou non. Bien sûr, il y a aussi d'autres façons comme vous pouvez les Google. Vous pouvez les trouver comme en utilisant femme JS ou par exemple, en utilisant une autre bibliothèque qui prend, en vérifiant le jeton et vous renvoyer toutes les informations que vous voulez. Ici. Nous l'avons fait avec du JavaScript vanille. Essayons donc que maintenant nous économisons et nous avons maintenant le jeton. Bien sûr, je ne peux pas le faire expirer maintenant parce que je ne suis pas comme j'ai créé le jeton maintenant, mais maintenant nous définissons tout et nous sommes en mesure d'utiliser ce jeton et nous sommes des utilisateurs valides en tant qu'administrateur, pour regarder dans le panneau d'administration. Comme je vous l'ai dit, c'est le moyen le plus simple de coder ce jeton, il y a des moyens plus compliqués. Dans la prochaine conférence, comme je vous l'ai dit, nous allons faire plus de sécurité et donc nous ne serons pas en mesure de voir des données si nous n'avons pas de jeton valide. 130. Enable l'authentification de backend backend pour les API: Si vous vous souvenez au début de travailler avec le panneau d'administration, nous avons désactivé dans le back-end l'authentification de nos API. Alors comment nous avons fait cela, si vous vous souvenez que nous avons commenté toute l'authentification et nous avons dit que nous autorisons tout. Donc, dans le fichier JWT, dans l'Acme, dans le back-end, j'ai tout désactivé et j'ai dit, OK, un bas pour moi. Tout ce que vous devez être à moins qu'on en ait parlé auparavant. Alors remettons-le en arrière. Comment toutes les API sont sécurisées à l'exception de celles-ci. Nous avons donc besoin de sécuriser toutes les API. Nous ne serons donc pas en mesure de poster un produit. Nous ne serons pas en mesure de poster l'utilisateur ou nous ne sommes pas en mesure d'obtenir les utilisateurs. Donc, après l'activation, Essayons, par exemple, aller dans notre panneau d'administration pour les utilisateurs parce que ici les utilisateurs n'est pas inclus. Alors vérifions ça. Je vais revenir ici et vérifier les utilisateurs. Je vais voir que je suis devenu vide et j'ai eu une erreur dans la console que je suis non autorisé. Donc nous devons faire quelque chose exactement comme nous l'avons fait avec le facteur. Si vous vous souvenez, nous chargeons un jeton dans la demande, puis nous envoyons cette demande. Dans ce cas, nous obtenons ce que nous voulons, tout en douceur. Donc, ici, nous allons également charger ce jeton, que nous avons obtenu après nous être connectés à cette requête. Donc, le backend m'autorisera à obtenir les données de la base de données. Alors voici ce que nous allons faire dans la prochaine conférence. 131. Interceptez des demandes HTTP avec Token: Ok, comme je vous l'ai déjà dit, qu'on doit charger ce jeton sur leur demande. Si vous vous souvenez, nous chargeons le jeton sur leur requête dans Postman, et nous passons ce jeton dans les en-têtes de la requête. C' était très facile en tant que facteur, nous allions juste ici et choisir l'autorisation. Et puis on dit le jeton de barrière, et ensuite on gaspillait notre jeton ici. Donc, de la même façon que nous allons faire ici, mais avec Angular. Dans Angular, ce concept est appelé intercepteurs. L' intercepteur est quelque chose qui observe toutes les requêtes qui sortent de l'extrémité frontale et puis vérifie si cette requête va au backend est API, puis je charge un jeton dessus. Parce que, comme vous le voyez précédemment, le back-end est maintenant fait, permettez-nous d'envoyer des demandes sans ce jeton parce que nous ne sommes plus autorisés. Alors, comment pouvons-nous le faire facilement ? Comme vous vous en souvenez, nous utilisions toujours des outils NX. Je vais ici pour générer un nouveau module et il y a quelque chose appelé intercepteur. Et l'intercepteur est quelque chose qui sera chargé sur le service HTTP, puis il chargera le jeton dessus. Donc, la façon de le faire, nous allons et nous donnons un nom, par exemple, GW t. Et puis nous pouvons le passer aussi dans le dossier des services, qui est situé dans les utilisateurs du projet parce que nous allons l'utiliser dans le application. Et puis passons ça pour l'instant. Donc, nous pouvons cliquer sur sauter ceci, puis nous exécutons ceci, puis nous allons à notre application et nous verrons que nous avons l'intercepteur JWT. Ok, voyons ce qu'est l'intercepteur. Interceptor est en train d'implémenter une classe ou une interface appelée intercepteur http. Et à l'intérieur de cet intercepteur http, il y a une méthode qui est appelée interception. Et cette interception recevant une requête, puis suivante pour la gestion, puis il retournera l'événement HTTP. Donc pour l'instant, c'est comme ça. Nous devons donc charger sur les en-têtes de requête HTTP en tant que facteurs faisant à la requête HTTP avec le jeton. Parce que toujours nous mettons des données supplémentaires dans les en-têtes. Chaque requête qui va dans votre application passe sur les en-têtes. Donc, jeton d'authentification sera chargé sur les en-têtes de la requête, comme vous le voyez ici, nous avons ici par exemple, la demande d'en-têtes et j'ai le porteur d'autorisation, puis le jeton. C' est exactement ce que fait le facteur. Alors faisons exactement la même chose avec nos applications. Nous serons donc en mesure de voir les utilisateurs parce que maintenant nous ne sommes pas autorisés à voir les utilisateurs ou les commandes parce que nous ne sommes pas autorisés. Donc, tout d'abord, j'irai ici à l'intérieur de cette méthode et ensuite je recevrai ce jeton et aussi l'URL. Ainsi, le jeton, comme vous vous en souvenez, est stocké dans le stockage local. Donc, tout d'abord, je vais définir une constante. Je l'appellerai jeton, et j'utiliserai le service de stockage local. Ainsi, le service de stockage local que nous avons utilisé précédemment, qui est également situé dans le même référentiel, le tout dans le même dossier du service de cet utilisateur. Donc, je vais dire ici jeton de stockage local privé. Et puis ce jeton de stockage local proviendra du service de stockage local. Et puis je vais l'utiliser. Donc, je vais dire ici ce point LocalStorage assombrir, puis getToken. Donc c'est tout. Ensuite, nous avons ce jeton que nous avons stocké dans le stockage local ici à l'intérieur de cette constante. L' étape suivante est la demande. Cette requête est chaque requête allant de la requête HTTP frontale. Parce que si vous vous en souvenez, dans nos services, nous utilisons des requêtes HTTP. Donc, nous utilisons toujours HTTP post HTTP, GET HTTP rapport, etc. Donc, comme vous le voyez ici, nous utilisons le protocole HTTP pour envoyer nos requêtes au backend, donc nous voulons les intercepter. Donc, le u r l sera à l'intérieur de cette demande. Donc, quand je dis donnez-moi les données de l'utilisateur, alors j'irai et mettrai la demande. Et à l'intérieur de cette requête il y a une URL, et cette URL sera notre URL API. Ici, nous pouvons dire que const est API URL. Et puis je dirai que me donner cette demande, qui est adoptée ici. Et puis vous êtes L et commence par, donc si l'URL commence par mon API, si vous vous souvenez que nous avons stocké l'API dans nos variables d'environnement, qui se trouve dans le fichier d'environnement. Donc, nous pouvons aussi bien ici que nous disons que me donner l'environnement. Il sera importé des environnements, de l'environnement. Et puis je vais définir l'URL de l'API. Donc, si mon URL API commence par cette URL. Alors je l'intercepterai. Donc, cela signifie qu'il s'agit d'une URL back-end. Ok, comme je vous l'ai déjà dit, nous devons mettre ça dans les en-têtes, comment nous pouvons faire ça. Donc, quand nous avons un jeton, donc je dis quand, si jeton et aussi quand j'ai une URL API, alors je vais ajouter les en-têtes à cette requête. Donc, je dirai que la requête sera la même requête, mais clone comme clone la requête actuelle et ajuste ce qui suit. Nous devons donc ajuster cette requête pour avoir des en-têtes définis. Comme vous vous en souvenez, je vous ai dit que nous devons mettre le jeton dans les en-têtes de la demande. Et puis je dirais autorisation. Et puis si vous vous souvenez que nous utilisons l'autorisation de bière, donc ici je vais avoir un cours d'eau appelé amer et ensuite l'espace. Tu te souviens que tu dois mettre de l'espace. Et puis je mettrai le jeton après. Donc, de cette façon, je vais passer le jeton avec une autorisation amère dans les en-têtes de toute requête. Et nous gardons cette prochaine requête de poignée de point. Donc d'accord, nous gardons ça et nous vérifions notre console si tout fonctionne bien, ok, tout fonctionne bien. Mais maintenant, nous devons exporter cet intercepteur comme n'importe quel service que nous faisions auparavant, afin que nous puissions l'utiliser en dehors de notre bibliothèque, de notre bibliothèque d'utilisateurs. Donc nous allons ici pour indexer et je vais dire Export, puis des services lib et puis JWT intercepteur. Donc, après cela, nous sauvegardons et puis nous devons utiliser cet intercepteur où nous utilisons l'intercepteur. Tu as le choix. Vous pouvez l'utiliser ici dans le module utilisateurs parce que nous utilisons aussi bien l'utilisateur que le module dans le module d'application. Ou vous pouvez l'utiliser directement dans le module d'application. Alors, comment peut-on utiliser ça ? J' irai aussi bien ici et je vais vérifier les fournisseurs que j'ai, déclaration du module NG ou importation. Et il y a quelque chose qui s'appelle les fournisseurs. Donc, improvisateurs, je suis en train de fournir un service. Je donne un jeton. Je fournit une variable à un service afin de pouvoir l'utiliser. La façon d'utiliser cela est que nous disons que nous mettons une virgule ici, puis nous ouvrons un objet et nous disons fournir. Et puis les intercepteurs HTTP. Et comme vous le voyez ici, intercepteurs http proviennent de HTTP en Angular. Donc nous utilisons celui-ci. Et puis nous allons dire utiliser la classe comme par défaut. Nous allons utiliser la classe dont l'intercepteur JWT, que j'ai créée dans la bibliothèque de l'utilisateur. Donc, quand j'irai ici, je verrai qu'il est automatiquement importé comme vous le voyez ici. Par exemple, si nous montons, nous verrons que l'intercepteur JWT est importé de la bibliothèque des utilisateurs. Nous disons que Multi est vrai. Donc, après avoir économisé et ensuite nous allons à notre front end, nous verrons que nous sommes en mesure de voir leurs utilisateurs. Donc aussi, je peux voir les commandes car ici j'ai un jeton et puis je charge la requête avec le jeton. Donc, comme vous le voyez ici, si nous passons à l'une de ces demandes, vous savez que nous avons ici dans le réseau. Ok, j'ai celui-là. Je vais vérifier les en-têtes que j'ai ici, obtenir, et je vais voir que, ok, porteur d'autorisation est mon jeton, ok, peut-être que quelqu'un me le dira. Aha, ok, je peux alors générer n'importe quel jeton et ensuite je peux l'envoyer avec les en-têtes de mes demandes et tendons via Postman et ensuite je peux détruire leur site web. Non, ce n'est pas possible parce que si vous vous souvenez, dans le back-end, nous avions un secret. Si vous vous souvenez, j'ai fait un fichier secret qui est appelé, par exemple, secret. Vous l'ajoutez au jeton, puis basé sur cela, vous avez une signature de jeton JWT, puis il générera pour vous ce jeton basé sur ce secret. Donc, de cette façon, vous verrez que vous envoyez également ce jeton et il sera analysé sur la base de cette chaîne secrète que vous avez créée. Si vous vous souvenez, je mets, J'aime mon chien, par exemple, comme un secret dans le back-end. Donc maintenant, si cela sera analysé par Birkbeck et accepté par cette clé secrète, alors diabétique et votre réponse avec moi avec une donnée. Sinon, si j'envoie un jeton, il ne sera pas accepté car il n'aura pas le même secret que j'ai créé quand je signais ce jeton dans le back-end et l'enverrai au front end. Soyez donc prudent, vous devez garder ce secret, vraiment secret afin que vous ne puissiez pas l'utiliser ailleurs ou le donner à quiconque parce que cela sécurise totalement votre application. Donc, si vous vous souvenez, nous utilisions le secret, si vous vous souvenez, et ce secret est dans le fichier de l'environnement et je l' utilisais comme mon chien est gentil ou j'aime mon chien est dépendant. Donc, vous pouvez mettre ici n'importe quelle chaîne. Et sur la base de cela, toutes vos requêtes dans le back-end, nous allons utiliser ce secret et ensuite analyser. Chaque requête vient avec ce secret, puis sur le jeton, puis il répondra pour vous si c'est juste ou non. Ok, maintenant on l'a fait, tout va bien. Nous avons chargé notre jeton sur la requête HTTP. Nous recevons et sécurisons notre application d'administration totalement sans aucun problème. Maintenant, j'ai le résumé. Si vous vous en souvenez, nous avons fait une sécurité et nous avons mis ce jeton dans l'application, dans le stockage local. Et nous utilisons ce jeton pour envoyer cette demande et aussi rediriger l'utilisateur vers la page de connexion s'ils ne sont pas verrouillés. Dans la prochaine conférence, nous allons faire la déconnexion, qui ne fait que supprimer ce jeton JWT. Et puis nous serons déconnectés. 132. Utilisateur de Logout: Ok, super. Maintenant, nous allons voir comment nous pouvons déconnecter un utilisateur. Donc, si je clique sur ce bouton, je vais déconnecter l'utilisateur. Lorsque nous voulons regarder l'utilisateur, nous supprimons simplement ce jeton du stockage local, puis redirigeons l'utilisateur vers la page de connexion. Donc, sur le clic sur ce bouton, nous allons appeler un service appelé lockout. Nous pouvons donc le faire très simplement. Nous allons simplement à la bibliothèque des utilisateurs où nous créons nos services ou services d'authentification. Nous avons une connexion ici. Nous allons aussi avoir la déconnexion. Donc, je vais aller ici et dire, donnez-moi une fonction de déconnexion. Il n'aura aucun paramètre. On va juste surveiller l'utilisateur. Donc, pour cela, nous allons utiliser aussi le service de stockage local. Nous avons donc besoin d'appeler le service de stockage local. Alors, je vais aller ici et dire privé. Nous pouvons dire un service de jeton ou de jeton, puis nous pouvons appeler le service de stockage local. Et ce service de stockage local, je vais l'utiliser ici. Et puis ce jeton point, puis supprimez le jeton. Donc c'est tout. Et puis nous allons à l'avant pour regarder l'utilisateur ou vous pouvez le regarder ici. Donc, dans ce cas, nous avons aussi besoin d'un routeur. Donc, j'appellerais ici privé puis routeur. Et puis je me souviens encore du routeur. Et puis j'ai, après avoir supprimé le jeton, je dirai ces points, routeur, point, naviguer. Et puis je vais sélectionner la page de connexion. Donc, je vais dire ici login et ensuite nous sauvegardons. Et puis nous devons appeler le service chaque fois que je clique sur le bouton dans la barre latérale. Donc, si vous vous souvenez, nous avons cela dans leur application partagée dans Admin. J' ai dans la barre latérale ainsi le bouton qui s'appelle lockout. Et je vais aller ici et dire cliquer. Comme quand je clique sur ce bouton sur ce lien, je vais regarder l'utilisateur. Et qu'est-ce qu'on dit ici ? Regardez l'utilisateur. Et puis nous implémentons cette méthode. Donc, nous allons à la barre latérale aussi ici dans le composant. Et puis j'ai besoin d'appeler le service d'authentification car il est utilisé dans le, OU il est créé dans la bibliothèque de l'utilisateur. Donc, je vais dire ici, service d'authentification privée et ensuite appeler pour moi hors service de la bibliothèque de l'utilisateur. Et nous verrons qu'il est importé ici automatiquement. Mais parfois, vous serez en erreur avec l'importation automatique que vous verrez qu'il retourne le chemin complet. Ça ne fait pas ça comme avec le raccourci comme on l'a dit précédemment. Donc parfois comme ça devrait être comme, comme ces utilisateurs. Mais comme vous le voyez ici, nous avons un problème. Nous avons une erreur parce que je pense que tout le service n'est pas exporté. Donc, pour vérifier cela, nous allons à nouveau dans notre bibliothèque d'utilisateurs et vérifions si nous avons exporté le service d'authentification. Nous verrons qu'il n'est pas exporté. Nous devons donc faire aussi bien ici, Export. Et puis de. Et puis je vais sélectionner la bibliothèque, puis les services, puis notre service. Donc, ici, nous serons en mesure de voir cela dans notre composant de barre latérale. C' est donc mieux toujours pour le linting d'avoir ce chemin de raccourci. Nous avons donc maintenant le service d'authentification. Je vais créer une autre méthode, que nous avons créée ici. Donc, il s'appelle l'utilisateur de verrouillage. Et cet utilisateur de déconnexion sera situé dans le TS. Très bien. Je vais définir cette méthode ici et puis je dirai ce service AVS point. Alors regarde dehors. C' est aussi simple que ça. Et puis le belvédère, si j'y vais, il supprimera ce jeton pour moi et ensuite il me naviguerait vers la page de connexion. Sauvons tout et nous allons essayer ça. Donc, comme vous le voyez ici, mon jeton est expiré. C' est pourquoi j'ai enregistré cette vidéo après une journée. Donc, comme vous le voyez ici, quand il est expiré, j'ai le jeton II a déjà été lu dirigé vers la page de connexion. Alors regardons à nouveau. Donc, je vais aller ici et mettre mon e-mail et mon mot de passe. Maintenant, je vais me connecter. Ok, je me suis connecté, je suis là, je vois tout. Je vois les utilisateurs de commandes, ce jeton est valide. Maintenant, je vais cliquer sur la déconnexion. Donc, lorsque vous cliquez sur le logo ici, vous serez redirigé vers la page d'accueil ou vers la page de connexion. Et vous verrez que le stockage local n'a plus le jeton. C' est ainsi que nous déconnectons l'utilisateur. Tout fonctionne bien. Vous pouvez vous connecter à nouveau, puis accéder à votre application de panneau d'administration. De cette façon, nous avons terminé tout ce qui concerne l'authentification. Alors maintenant, nous allons voir comment nous pouvons organiser notre code plus. Nous allons faire un peu de refactorisation et c'est ce que nous verrons dans la prochaine section. 133. Styling de tableau de bord: Ok, une fois l'authentification terminée, nous allons décorer notre tableau de bord. Si vous vous en souvenez, nous avons la page du tableau de bord ici. Nous allons faire quelque chose comme ça. Donc, nous verrons que le total des commandes et combien de clients nous avons, et combien de produits et le total des ventes. Si vous vous en souvenez dans le backend, nous avons implémenté toutes ces API. Donc, je peux les prendre aussi de la base de données. Alors faisons ça. Tout d'abord, je vais à ma demande originale où nous avons un progrès là-bas. Alors je vais m'enfermer. Ensuite, nous irons au tableau de bord de l'eau de bain a des travaux de tableau de bord. On n'y a rien encore fait. Donc, nous allons à nouveau à nos pages dans notre application d'administration, puis nous allons au tableau de bord. Le tableau de bord, si vous vous souvenez, nous avons créé un composant comme celui-ci, donc nous devons le refactoriser. Nous supprimons d'abord le style. Nous n'avons pas besoin du style parce que nous allons utiliser les styles publics, qui sont le dossier de nos styles ici. Donc, tout d'abord, nous allons gabariser ce tableau de bord. Donc, comme chaque page d'administration, nous allons faire la même chose. Donc, tout d'abord, j'aurai un div et il aura une page d'administration. Et cette classe de page d'administration est déjà implémentée. Donc, nous allons avoir aussi ici notre carte que nous l'avons fait auparavant. Nous pouvons donc avoir ici un tableau de bord comme titre et sous-en-tête. Nous pouvons avoir comme les dernières mises à jour. Donc, supprimons comme ceci, comme ne pas le faire en entrée. Nous pouvons le faire seulement apparu chaîne et entrée pure. Donc, nous avons ici le tableau de bord. Donc je vais être d'accord, si vous vous souvenez, nous avons ici quatre rectangles. Nous avons donc besoin d'une grille. Alors allons-y et faisons-y. Et nous disons div dot py grid. Et à l'intérieur, je vais avoir l'appel UV dot py et puis trois. Il nous faut quatre de ça. Et encore une fois, je vais utiliser cette carte à l'intérieur. Donc, nous aurons aussi ici une autre carte. Et à l'intérieur de cette garde, nous mettons notre objet. Donc, l'élément qui aura exactement le même, qui aura l'icône, et un certain titre et un certain nombre. Alors faisons la même chose. Donc, je vais aussi définir un div. Et ce div comme un nom, nous pouvons l'appeler l'élément, comme l'élément de tableau de bord. Et puis à l'intérieur de cet article, j'aurai un autre div. Je vais mettre d'abord l'icône. Ainsi, par exemple, nous allons avoir l'icône du panier, comme quatre commandes. Et encore une fois, une période où nous allons mettre le nom. Donc, nous avons ici la travée qui s'appelle les ordres. Et puis nous aurons aussi une autre étendue qui contiendra le nombre. Donc, nous pouvons dire comme un code dur un nombre qui est comme 25 par exemple. Voyons si on va bien. Ok, nous avons maintenant cette carte, nous avons l'icône, nous avons le texte et le numéro. Alors attachons-les. Tout d'abord, je vais avoir un arrière-plan que j'utilise un site Web est appelé un point de gradient io. Et cela vous donnera beaucoup de très grands gradients. Vous pouvez les utiliser et vous pouvez simplement copier le CSS du dégradé que vous voulez, puis vous pouvez l'utiliser dans votre application. Donc tout d'abord, je vais faire un dégradé, celui-là. Alors allons ici et allons au style de notre application. Donc, tout d'abord, nous devons avoir un fichier de style pour le tableau de bord. Donc si on y va, si tu te souviens, on a tous les styles ici. Donc, l'application de styles, et ceci est tableau de bord, qui est utilisé uniquement dans le panneau d'administration. Donc, nous pouvons le mettre dans l'application d'administration. Donc, nous ne pouvons pas dire ici le point de tableau de bord SCSS. Et puis nous devons également importer ce tableau de bord dans l'administrateur parce que nous utilisons ce fichier. Et ce fichier contient tous les fichiers que nous sommes utilisés ici, et nous l'utilisons dans l'application. Donc, si vous vous souvenez, nous avons ici aussi le dossier Styles dans le niveau de l'application. Donc, je vais aller et utiliser le fichier admin SCSS. Nous avons donc besoin d'importer aussi bien le fichier de tableau de bord. Rappelez-vous que nous avons la coquille. Maintenant, nous allons importer aussi le tableau de bord. Donc, nous remplaçons simplement cela par tableau de bord. Ok, allons maintenant à notre tableau de bord. Faisons la clause d'autres. Donc on n'a rien ici. Nous ne pouvons avoir que le CSS et le fichier de tableau de bord, donc nous avons seulement besoin de ces deux fichiers. Nous allons travailler avec cela. Donc, tout d'abord, je veux styler l'élément de tableau de bord. Donc, l'élément de tableau de bord, nous serons à mon avis comme un flex afin que nous puissions aligner les choses à l'intérieur de cette Flexbox. Et aussi que nous devons aligner chaque texte pour être centré. Donc, ce sera tout le texte à l'intérieur de ce sera centré. Ok, donnons à tous les scie un gradient. Ainsi, nous pouvons, par exemple, copier ce dégradé ici. Et je vais à mon CSS et je colle juste et j' obtiendrais exactement le style CSS qui est assigné ici. Donc, nous chargeons notre application et nous voyons que c'est seulement du style à l'intérieur de la div, mais je veux toute la carte. Si vous vous en souvenez, le panier est toujours livré avec quelque chose appelé style de classe ou classe de style. Donc, la carte elle-même a besoin d'avoir un peu de style. Donc, on peut entendre avoir une classe de style. Et cette classe temporelle sera différente d'une carte à l'autre, comme vous le voyez ici, parce que nous les avons différents. Nous avons donc besoin d'un dégradé pour chaque carte. Donc on peut le donner comme un nom. Donc on peut dire les ordres. Par exemple, je vais avoir une classe spéciale pour cela, qui s'appelle les ordres. Donc ici, je retourne au CSS et puis je crée cette classe, puis je lui donne un nom, et puis je déplace ces ingrédients ici. Donc je vais le mettre ici et ensuite sauver. Et nous verrons que toute la carte est colorée. Et c'est exactement ce que nous voulons. Maintenant, nous voulons que tout ce qu'il y a à l'intérieur de la voiture soit blanc. Donc, sur l'article, je vais dire couleur. Et si vous vous souvenez, nous utilisions des vars. Et si vous vous souvenez que nous avons une variable qui est appelée enquêtes, ou vous pouvez utiliser simplement la couleur blanche. Donc, j'utilise les vars, dont j'ai parlé plusieurs fois auparavant. Donc, nous avons ici la couleur de surface sera blanche. Et aussi, nous devons avoir que cela justifie le contenu entre ces éléments à l'intérieur de l'élément ou de l'élément de tableau de bord pour avoir de l'espace entre eux. Donc, comme vous le voyez ici que nous avons différentes tailles ou polices, ou nous avons ce grand, par exemple, cette taille et cette taille. Alors donnons-leur à tout le monde en classe. Donc, je, nous avons donné, notre oeil va utiliser une classe de ceci et je vais donner pour cela comme par exemple, un nom. Et je donnerai pour cette classe, nous pouvons l'appeler en numéro général. Donc, ici, nous allons les coiffer. Donc, tout d'abord, je veux styler l'icône à l'intérieur que l'élément je vais donner le PI, puis je dirai la taille de la police, bien avant EM. Et puis nous le donnons comme une marge de fond juste pour pousser le contenu sous huit, comme 15 pixels. Et aussi, je vais donner une taille pour le nom. Ainsi, la taille de la police de leur nom sera, par exemple, 1,4 AM. Et le nombre sera un peu grand. Donc, je vais le donner comme par exemple, la taille de la police sera 3M. Par exemple, nous pouvons lui donner un 3M. Et aussi, nous allons le faire flotter, non ? Donc on peut mettre le texte sur la droite, mais d'accord, ne le faisons pas maintenant. Je te montrerai plus tard. Donc on sauve celui-ci. Nous vérifions que tout est redimensionné, d'accord, mais comme nous voyons ici que nous n'avons pas la couleur, je ne sais pas pourquoi nous avons la couleur, le costume, le visage. J' ai oublié un litre. Alors nous aurons la couleur blanche, espérons-le. Ok, nous avons maintenant la couleur blanche. Mais comme vous le voyez ici, nous n'avons pas eu d'effet. Donc peut-être que je peux regrouper ces deux éléments comme l'icône et le nom dans un div. Donc, ce sera comme par exemple, dans un div, je peux supprimer celui-ci et le mettre et faire cette travée seule. Donc, nous verrons que le flux sera divisé entre cette étendue et cette div. Donc, il sera divisé entre eux. Donc, comme vous le voyez ici, que le flex m'a donné la possibilité d'avoir ici les commandes et ici le numéro. Pour simplifier le mode de code comme ne pas avoir ce div et ce div et les mettre dans un div pour être dans de nouvelles lignes, nous pouvons simplement utiliser un simple HTML comme week-end, disons un BR ici. Comme si on pouvait mettre une ligne de frein ici. Donc je le fais très simple. Bien sûr, vous pouvez le faire de la manière que vous voulez. Je veux juste te montrer comment on peut se styler rapidement. Nous voyons aussi bien que ce nombre est comme un peu élevé. On peut le poser comme un peu. Donc nous pouvons donner une marge supérieure à ce nombre. Donc nous pouvons dire ici, ce nombre lui donne une marge supérieure d'environ 50 pixels. Donc, nous allons voir maintenant que nous avons notre premier point. Donc, nous avons juste besoin de dupliquer ces articles pour avoir quatre autres, comme les produits utilisateur et le total des ventes. Et puis nous leur donnons différents gradients. Donc, nous le faisons rapidement. Donc, tout d'abord, je vais dupliquer cette colonne parce que nous avons ici la colonne trois et une autre, une autre et une autre. Nous devons donc en avoir quatre. Donc d'abord, ce sera des produits, d'accord ? Il a un numéro. Et aussi les produits seront, par exemple, un cas bref. Et si vous vous souvenez, nous voulons donner un dégradé différent. Nous devons donc mettre ici aussi un produit. Donc, la carte aura une classe différente de l'autre. Donc aussi bien ici, nous faisons la même chose pour les utilisateurs et nous faisons la même chose aussi. Comme nous donnons l'icône sera utilisateurs. Et aussi ici les utilisateurs de l'élément de tableau de bord. Et aussi, nous avons besoin d'avoir ici le total des ventes. Et on peut donner ici, comme on peut dire que l'icône est le dollar. Je reçois les icônes de Prime NG comme nous l'avons vu précédemment. Donc, nous mettons ici les ventes totales. Et aussi, nous avons besoin ici d'un nombre mais en dollars, donc nous pouvons utiliser aussi bien les tuyaux dont nous avons parlé précédemment. Donc, je vais avoir ici une chaîne comme 120, et ensuite j'utiliserai le tuyau de monnaie. Donc on sauve tout. Et nous passons à nouveau à notre application. Nous verrons que nous avons les cartes, mais nous n'avons pas assez ou le gradient. Copions donc les mêmes dégradés que j'ai créés ici. Donc, pour le faire rapidement, j'ai également sélectionné un gradient, comme je vous l'ai dit précédemment, à partir du site Web. Donc, nous pouvons sauvegarder cela et revenir à notre application. Et nous verrons que nous avons ici les couleurs que nous avons assignées ici. Comme je le vois ici, que la police est un peu grande, donc nous pouvons la rendre plus petite. Donc, pour le nombre, donc nous pouvons faire ce nombre pour avoir, par exemple, 2,5. Ce serait mieux, je suppose. Ok, maintenant nous avons tout va bien. Nous avons décoré notre première page dans notre tableau de bord. Nous avons donc besoin de remplacer ces nombres par les données réelles qui proviennent du back-end. Et c'est ce que nous verrons dans la prochaine conférence. 134. Services de statistiques du tableau de bord: Comme vous le voyez, j' ai saisi toutes les données de la base de données en fonction de nos services. Alors comment j'ai fait cela, mais la solution, je l'ai attaché, le code avec ces devoirs et je vais l'expliquer rapidement. Donc, tout d'abord, si nous passons au composant de tableau de bord, j'ai appelé plusieurs services, un pour obtenir le nombre de commandes, le nombre de produits et le nombre d'utilisateurs, et le total des ventes. Et puis je n'ai pas dit comme séparément, comme ok, ce point s'abonner et me donner le nombre de commandes, puis point de produit s'abonner et me donner le nombre de produits, comme nous l'avons fait précédemment avec nombreux endroits ici dans le forums ou avec la liste des catégories, par exemple, comme vous voyez ici que je m'abonnais à cette sortie de cette GetCategories. Et puis j'attribue deux catégories pour les afficher dans le modèle. Sachez ici que c'est un peu différent. J' ai utilisé une fonction dans R x js qui est appelée combine dernièrement. Et ces dernières combinées, Il est si excellent moyen de combiner plusieurs observables. Donc, quand tous sont prêts, comme c'est le cas, ce sont des observables. Quand ils sont prêts, alors je m'abonne à eux et je vais obtenir un tableau des valeurs exactement le même ordre de ce tableau. Donc ici, je vais obtenir sur le premier membre de cette valeur, je vais obtenir le nombre de commandes. Et dans le deuxième nombre de produits, le nombre d'utilisateurs et le total des ventes. Et si vous changez cela, comme par exemple, si vous déplacez cela vers le haut, alors les valeurs seront différentes. Donc, comme vous le voyez ici, les valeurs, ce sera un tableau. Comme nous le voyons ici. Il s'agit du nombre de commandes, du nombre de produits, du nombre d'utilisateurs et du total des ventes. D' accord ? Et puis j'attribue ces valeurs. Membre de classe, qui est appelé statistiques, qui est un tableau. Et ce tableau, je l'ai utilisé dans le modèle. Je suis allé ici et je dis, Ok, statistiques, donnez-moi la première, parce que si vous vous souvenez, nous avons ici, le premier est le nombre d'ordres. Alors donne-moi le premier. Et puis le nombre de points d'ordre. Je parlerai de ce nombre d'utilisateurs contrés par points plus tard. Donc maintenant, nous avons exactement comment nous obtenons les valeurs du back-end. Donc, les statistiques seront d'abord le nombre de produits, exactement le même ordre que ici. Et aussi pour tout cet utilisateur cool et aussi le total des ventes. Juste une chose, comme n'oubliez pas d'avoir ici, ng-si si les bâtons statiques sont pleins ou je veux dire qu'ils ont de la longueur, alors affichez le composant lui-même de toute la page de tableau de bord parce que sinon vous obtiendrez une erreur lorsque ces ne sont pas encore prêtes. Ok, allons aux surfaces. Donc leurs services, comme vous le voyez ici, qu'ils sont appelés à partir de différentes bibliothèques. J' ai donc utilisé ici service utilisateur, produit, service, service de commande. Cela dépend de l'endroit où chaque fonction liée, par exemple, au service de commande. Je suis allé aux services de commande ici dans la bibliothèque de commandes. Alors j'ai dit, donnez-moi le compte d'ordre et il reviendra pour moi observable. Et le type de ce sera le numéro de nombre de commandes. Pourquoi j'ai ça ? Exactement cela parce que notre API, si vous vous souvenez, elle retournera pour moi un objet, et ce sera de cette façon, elle ne retournera pas pour moi le numéro directement. Il sera retourné dans un objet. Donc, je dois correspondre exactement le même revenu qui proviennent du backend et je l'ai mis en avant. Donc, je vais m'attendre à un champ de nombre d'ordres avec une valeur qui sera le nombre. Donc, le retour observable aura cette forme et aussi que get s'attend à cette forme. Donc, la même chose que j'ai fait aussi pour tous les autres services. Donc, nous avons ici tableau de bord et nous avons aussi le nombre de produits. Le nombre de produits, comme vous le voyez, il viendra aussi bien de la même manière parce que je reçois du backend de cette façon. Vous pouvez également ajuster que je vais vous montrer plus tard et aussi pour les utilisateurs et le total des ventes, le total des ventes est dans les commandes. Donc, nous l'avons aussi dans la bibliothèque ordonnée. Donc, comme vous le voyez ici, nous obtenons également le total des ventes sous forme de nombre. C' est pourquoi dans le tableau de bord, dans le modèle, j'ai dit, Ok, donnez-moi des statistiques. La première valeur. Et puis la valeur sera objet car ici les statistiques auront plusieurs valeurs qui proviennent de ces observables. Et chaque observable revient pour moi objet. Donc, je veux utiliser la valeur ou le membre de statistiques du tableau statique. Et puis je dirai que donnez-moi le compte d'ordre. Si tu ne veux pas de cette façon. Comme si tu veux le faire de cette façon, seulement. J' explique cela juste pour vous montrer comment faire tous ces changements facilement dans votre code. Disons donc que nous attendons les valeurs. Directement, comme je vais arriver ici, pas des objets, mais la valeur directement. Alors, comment peut-on faire ça ? Tout d'abord, je vais au nombre de commandes get par exemple, et je m'attendrais à ce que le nombre ne soit pas ordonné, mais je m'attendrais à ce que le nombre. Et aussi, je m'attendrais ici seulement nombre. Mais comme vous le savez, l'API retournera pour moi l'objet, l'objet lui-même. Donc c'est mal pour moi. Donc, je ne vais pas obtenir un numéro, je vais obtenir l'objet. Donc, je peux mapper leur retour, qui vient de l'API. Je peux le changer pour être un nombre seulement. Donc je peux faire ça comme un nombre seulement. Alors comment vais-je faire ça ? Je peux prendre ça et mettre du tuyau après tout, tout ça. Et puis je dis carte. Et je vais importer cette carte de nos opérateurs x js. Et c'est une cartographie spatiale, pas comme la carte de tableau. C' est la cartographie de notre opérateur XJ AS qui vient de notre bibliothèque x js. Donc, il retournera pour moi ce mappage et je peux mapper la valeur comme je veux. Donc, je vais m'attendre ici à l'objet, qui vient comme ça. Donc ici ou le compte viendra comme objet. Et je veux la cartographier comme un moyen d'être seulement un nombre. Alors, comment je peux faire cela, je dirai que j'ai ici la valeur de l'objet par exemple. Et puis je ne retournerai pas la valeur de l'objet. Je vais retourner point de valeur de l'objet. Et puis je choisirai celui-ci, le nombre d'ordres. Donc, je dis que, que cette valeur d'objet sera le nombre d'ordres. Donc, de cette façon, je dois dire que cette valeur d'objet peut être n'importe quel ordre. Vous pouvez spécifier le type directement comment nous le spécifions avant. Donc, comme résumé, j'ai utilisé la carte de notre x j comme opérateurs. Et puis je m'attendais à l'objet qui viendra de l'API. Et puis j'ai dit, ne me donnez pas l'objet lui-même, mais donnez-moi le champ de cet objet, qui sera ordonné compte. La même chose que nous allons faire pour les autres parties. Donc, par exemple, nous allons faire pour les utilisateurs, Allons ici. Et nous accepterions, attendons à ce que nous n'ayons pas le nombre d'utilisateurs, mais nous aurons le nombre. Et aussi bien ici pas le nombre d'utilisateurs, mais nous aurons aussi le nombre. Et puis je dirai point pipe. Et puis la valeur de l'objet ne sera pas l'objet lui-même, mais le compte d'utilisateur. Comme parce que, comme vous vous en souvenez, l'API retournera pour moi le nombre d'utilisateurs dans l'objet. C' est donc le mappage de leur valeur de retour, qui vient de l'observable. Donc, de cette façon, je vais garantir que j'obtiendrai le numéro parce que l'objet de forme backend est comme ça. Importons aussi cette carte ici de notre x j s. Donc, nous avons ici observable et aussi la carte de RX j comme opérateurs. Rappelez-vous, cette carte n'est pas un mappage de tableau, c'est un mappage de notre xjs. Donc, vous devez le mettre à l'intérieur d'un tuyau hors observable. Donc, la même chose que nous allons faire aussi pour le total des ventes. Donc, nous ne nous attendons pas à des ventes totales comme ça, mais nous pouvons nous attendre à ce que la carte et cette carte soient retournées pour moi comme ceci, exactement de la même manière. Nous ne faisons aucun changement sauf ce champ car il provient du backend. Donc, je vais dire ici total. Donc on sauve tout. Et puis nous essayons aussi de le faire pour les produits. Je vais le faire rapidement. Donc, nous aurons ici le numéro et aussi ici nous aurons un numéro. Et puis j'utiliserais et importerais cette carte de notre xjs. Donc nous pouvons avoir ici la carte et ensuite je vais l'utiliser ici importé. Donc, pour chaque service, nous devons faire de la même manière et placer ici la valeur du tuyau et de l'objet. Et ce ne sera pas le nombre d'ordres, mais ce serait Dieu produit. Donc, nous sauvegardons tout et nous vérifions que tout fonctionne bien. Toutes ces étapes, ce que j'ai fait maintenant est juste parce que je ne veux pas voir ici comme point, puis commander le nombre, puis le nombre de produits. Maintenant, nous pouvons juste avoir les statistiques et les valeurs d'inondation qui viennent du back-end. Donc, nous pouvons ici essayer de revenir au navigateur. Et nous vérifierons que nous obtenons les valeurs de la bonne façon. Comme nous voyons que nous ne recevons pas le total des ventes. Vérifions l'API. Voyons comment le total dit un retour. Donc peut-être que nous avons des fautes de frappe, donc nous pouvons avoir ici des ventes totales. Ok, vérifions notre API. Nous allons à nouveau au service de commande. Où est le service de commande ? C' est ici. Et puis je dirai obtenir le total des ventes sont, c'est toujours le nombre de commandes. Donc nous pouvons mettre le total des ventes comme ça. Et puis nous avons aussi l'API. Tout fonctionne bien. Nous rechargeons et allons dans le navigateur et vérifions si cela fonctionne à nouveau. Bien, ça marche encore. Donc, comme vous voyez que nous avons mappé les valeurs qui viennent du backend à une seule valeur après avoir lu cet objet. Donc, vous avez le contrôle total sur l'extrémité frontale. Il suffit de vous assortir avec un backend et tout fonctionnera bien pour vous. partie la plus importante de cette conférence qui, ou cette solution des devoirs est d'utiliser cette dernière combinée. Donc, vous n'avez pas à vous abonner un par un. Nous avons un code très court. Nous nous abonnons à tout et nous mettons les valeurs dans statistiques et nous les utilisons à l'avant ou dans le modèle. 135. Refactorisation de routes: Ok, dans cette conférence, nous allons faire un refactoring de notre code. Donc, tout d'abord, faisons un peu de refactoring pour la route. Donc, la route, comme vous vous en souvenez, nous les avons créés au niveau de l'application. Donc, comme vous le voyez ici que nous avons dans le module d'application, nous avons tous nos itinéraires sont situés ici. Tout d'abord, ce que nous allons faire, nous allons créer un module spécial pour itinéraires, puis faire en sorte que le tableau de bord fonctionne bien. Et aussi les autres pages. Parce que par exemple, quand je vais ici à l'itinéraire et aller à la page d'accueil, je vais voir que je suis la page vide. Donc ce que je m'attends à ce que je dois avoir le tableau de bord directement. Donc, je ne veux pas avoir un itinéraire qui s'appelle tableau de bord ici. Il est très simple de le faire. Nous avons juste besoin de dire que, ok, j'ai le parent est grossier et j'ai le shell qui contient le contenu et la barre latérale toujours. Et puis je veux que le tableau de bord ne soit pas dans une URL séparée, mais ce sera exactement le même que la route apparente. Donc, nous pouvons simplement supprimer ce chemin d'ici et ensuite nous disons « Sauvegarder ». Et puis nous verrons que notre application est chargée directement sur la page du tableau de bord. Donc, chaque fois que je vais au tableau de bord, je verrai que le tableau de bord sera sur la page d'accueil. Donc, comme vous voyez que nous avons précédemment configuré sur la barre latérale que le tableau de bord aura barre oblique tableau de bord. Nous devons donc supprimer cela aussi. Donc, nous allons ici à la partagée, puis à la barre latérale. Et dans la barre latérale, je dirais que le lien du routeur sera la page d'accueil seulement. Donc, nous n'avons pas besoin de spécifier la page de cette façon. Donc, je vais ici aux produits, retourne au tableau de bord, tout fonctionne bien. Ok, la deuxième étape, je vais refactoriser le module d'application et mettre les routes dans le module d'itinéraire séparé. Parce que comme nous le voyons ici que nous avons très gros fichier pour le module d'application. Donc, nous pouvons normalement mettre les routes dans un module séparé. Alors faisons ça. Comme vous le savez, que nous pouvons avoir plusieurs modules dans application angulaire et ces molécules peuvent contenir plusieurs composants eux-mêmes aussi bien. Le module n'a pas besoin de contenir plusieurs composants. Il peut également être utilisé pour importer certaines bibliothèques telles que le module UX. Il peut tenir les routes elles-mêmes. Donc, nous pouvons le faire avec un X. Vous pouvez générer un module ou vous pouvez simplement utiliser des extraits angulaires. Je veux juste vous montrer qu'ils sont une façon différente de générer des composants et des modules dans Angular. Donc, tout d'abord, vous pouvez utiliser Générer et ensuite vous pouvez trouver le module. Et vous trouverez ici des schémas, module Angulaire. Et ici, vous spécifiez les propriétés de votre module comme nous l'avons vu précédemment. Mais il y a une autre façon que je peux installer aussi l'extension, qui est appelée extraits angulaires. Et ces extraits angulaires, il suit toujours la version angulaire, donc il suit toujours la version actuelle dans laquelle vous êtes. Donc, ici, nous avons des extraits angulaires. Vous pouvez l'installer et il vous donnera la possibilité de générer des composants directement en direct dans le code, comme vous le voyez ici. Par exemple, nous avons besoin d'un module. Donc, après l'installation de cette extension, nous pouvons l'utiliser. Donc, tout d'abord, je vais créer un nouveau fichier au niveau de l'application, donc près du module de l'application et appeler le module de routage dot ts. Et à l'intérieur de ce routage d'application, je vais utiliser les extraits. Donc je dois juste mettre un moins. Et puis il va énumérer pour moi quelques options des extraits. Donc, je vais dire ici module, comme vous le voyez ici. Et puis je collecte Entrée ou j'appuie sur Entrée. Et quand j'appuie sur Entrée, il générera pour moi tous ces éléments. Et il va générer pour moi le nom et spécifié afin que je puisse donner un nom directement. Donc, je dirais module de routage d'application. Et c'est par défaut l'importation d'un composant dont je n'ai pas besoin. Donc, nous pouvons supprimer cette importation de composant, nous n'avons plus besoin de cela. Et nous avons maintenant le module de routage de l'application. Donc, nous pouvons copier toutes les routes que nous avons ici. Donc, nous pouvons tous les copier ou les couper, puis les coller dans le module NG derrière le module AND parce que c'est une constante et je vais l'utiliser. Et de la même manière, nous devons importer tous ces composants. Donc, pour les importer rapidement, vous avez juste besoin d'appuyer sur l'espace de contrôle ou sur le point de contrôle, puis vous obtiendrez tous. Donc je vais le faire rapidement. Comme nous voyons que nous avons importé automatiquement tout et nous avons aussi besoin de la, notre protège-bouche, que nous avons spécifié à partir de la bibliothèque des utilisateurs. Et aussi, nous devons importer le type de routes qui vient d'Angular. Maintenant, nous avons les routes importées. Je vais faire exactement la même chose que nous avons fait dans le module. Nous devons donc copier cette ligne ou couper la diapositive. Alors on va ici et on le prend. Et puis nous allons au module d'application et nous allons à l'importation, parce que c'est dans l'importation, je vais importer le module de routeur. Et puis nous allons utiliser ce module de routage dans le module d'application. Nous avons également besoin d'importer notre module de protéines dans notre module d'application. Donc, dans ce cas, nous aurons les routes automatiquement à l'intérieur de notre application. Encore une fois, contrôlez l'espace pour importer automatiquement. Et puis nous aurons toutes ces bibliothèques ne sont plus nécessaires. Donc, quand vous économisez, nous verrons que nous sommes grisés. Donc, cela signifie qu'ils ne sont utilisés nulle part. Ainsi, nous pouvons également supprimer l'importation inutilisée. Si vous obtenez une telle erreur dans la console que d'accord, sortie du routeur n'est pas définie. C' est parce que ce module d'application n'a plus le module de routeur. cette raison, vous pouvez également effectuer une exportation du module de routeur dans le module de routage ARP. Donc, vous avez juste besoin d'avoir dans les exportations module de routeur à nouveau. Donc, il saura alors que le module d'application utilise le module de routeur, qui est utilisé dans le module de routage AP. Et nous pouvons vérifier à nouveau notre navigation. Nous voyons que tout fonctionne bien. Et aussi, nous devons spécifier si l'utilisateur, par exemple, est allé à la page indéfinie, quelque chose comme ceci. Alors, qu'est-ce qui va se passer ? Je ne veux pas qu'il voie un large débat. Je voulais, par exemple, être redirigé vers la page d'accueil. Alors, comment nous pouvons faire cette redirection vers la page d'accueil, Il est très simple ainsi que vous voyez ici que nous avons plusieurs partenaires et le chemin racine, mais nous ne allons pas utiliser ce chemin d'itinéraire. Nous allons créer un autre laissez-passer. Et il est très important d'être à la fin de ce chemin. Donc ce chemin sera comme deux étoiles. Et puis nous pouvons dire rediriger vers la page que vous voulez. Dans notre cas, nous voulons être directement sur la page d'accueil. Et puis vous avez besoin, après avoir tout comme Directory direct à, vous devez avoir un match de bain et puis plein comme je veux correspondre exactement ce chemin que sur. Donc nous pouvons avoir ici exactement ça dehors. Donc, nous avons tout, tout ce qui n'est pas défini ici, puis redirigé vers la page d'accueil. Vous devez toujours être sûr que cela arrive à la fin. Sinon, si vous le mettez avant, alors tout sera redirigé vers la page d'accueil. Alors essayons à nouveau et faisons un problème ici. Et par exemple, nous verrons que nous avons obtenu trois dirigés vers la page d'accueil. Ainsi, nous avons repensé notre module de routage pour avoir un module application plus stable et plus propre. Et aussi, nous allons faire d'autres refactorings qui sont liés à la performance, comme nous le verrons plus tard. 136. Fin pour de performance: Une des histoires importantes que l'utilisateur ou le développeur tombe toujours dans cette fuite de mémoire. La fuite de mémoire est très mal de tête pour l'application, en particulier dans Angular. Vous devez avoir et être sûr que vous n'avez pas de fuites de mémoire dans votre application. Alors, quelle est la signification d'une fuite de mémoire ? Une fuite de mémoire est comme quelque chose que vous créez, par exemple, un objet. Et cet objet est créé encore et encore et encore à chaque fois que vous visitez, par exemple, une page spécifique. Donc, par exemple, je vais ici deux catégories. J' ouvre un nouvel objet, et cet objet reste dans leur mémoire. Je vais et encore, j' ouvre un nouvel objet, et l'ancien objet reste en mémoire. C' est que je parle d'objet. Mais dans notre cas ici, la seule fuite de mémoire que nous avons est les abonnements. Si vous vous en souvenez, nous utilisions des abonnements pour saisir les données des services, à partir du backend. Et ces services fournissent toujours des observables. Et ces observables, nous les utilisions en disant que nous voulons nous abonner à quelque chose. Par exemple, j'ai une liste de catégories. Et si vous voulez dans le composant de liste des catégories, vous pouvez voir comment nous ouvrons un abonnement. Et si vous vous souvenez que l'abonnement signifie que j' observe les valeurs ne le seraient pas quand elles sont prêtes à partir de cette observable, qui est la méthode GET, méthode HTTP. Et puis je m'abonne pour obtenir les données à partir de lui. Donc, chaque fois que je visite ce composant, j'ouvre un nouvel abonnement. Et ces abonnements doivent être fermés. Il existe plusieurs façons de faire comme l'abonnement ou de mettre fin à l'abonnement. L' un d'eux est de faire comme point, désabonner, comme immédiatement après que vous vous y abonnez. Donc, j'obtiens les données et puis je me suis désabonné à elles. Sinon, vous pouvez avoir, une autre façon d'utiliser KMS et plus efficace de notre XJ comme nous le faisons est appelé prendre jusqu'à. Et ici, vous pouvez spécifier une Bible. Et à l'intérieur de ce tuyau, c'est comme si nous filtrons les données qui proviennent de cet observable. Je dis prendre jusqu'à ce que et prendre jusqu'à toujours des opérateurs de notre xjs. Choisissez jusqu'à ce qu'il attend quelque chose qui est appelé sujet. Et ce sujet, lorsque vous l'utilisez ou terminé, alors l'abonnement sera terminé. Pour en expliquer plus, comme je le dis, le Big Data, le Big Data jusqu'à ce que quelque chose arrive. Alors, ce que ce quelque chose, quelque chose qui s'appelle RX JS, appelé sujet. Ainsi, vous pouvez définir et utiliser des objets très facilement. Disons que nous pouvons donner un nom à ce sujet. Donc, nous pouvons dire, et subs N abonnements. Et toujours un abonnements qu'ils donnent comme suffixe avec un signe de dollar. Et ce signe dollar de cette façon, cela signifiera que j'ai ici sujet ou observable. Et ce n subs aura un type de sujet. Et le sujet aussi de notre x js. Et toujours, lorsque vous créez un sujet, vous devez dire un nouveau sujet. Et je vais toujours, ce sujet besoin de spécifier un type, comme vous le voyez ici, un type générique. Donc, vous devez vous attendre à quelque chose à l'intérieur de ce type. Donc, nous pouvons dire pour l'instant tout. Donc, dans ce cas, nous avons n sous-s. Donc, n sous-s commenceront à s'exécuter chaque fois que je visite ce composant, qui est par exemple, la liste des catégories. Donc j'ouvre maintenant et vous les pools de sujets, ça s'appelle finit ups. Donc, je veux prendre cet abonnement de données jusqu'à ce que n sous-s finissent. Donc, quand finit par scanner finition ou comment je peux finir finit ups et ensuite être fini de cette façon. Donc vous ne pouvez pas dire que ça finit et ensuite vous pouvez dire complet. Donc, dans ce cas, je dis que ça finit par finir. Donc prendre jusqu'à ce que se termine ups comme n abonnement, ce qui se passe ici. Donc, quand on économise, essayons ça. Nous verrons que nous le sommes, d'accord, nous obtenons les données. Donc, après avoir obtenu les catégories, nous avons terminé les finis et nous obtenons ici les, par exemple, les données. Mais comme vous voyez que nous avons terminé leur abonnement sur n, sur n, ce qui n'est pas tant une bonne pratique car sur NDI, sur Edit, s'il y a un retard du backend, alors cela sera exécuté avant cela. Et puis nous obtenons les catégories, puis il y aura un retard et l'abonnement sera terminé avant qu'il ne commence. Donc pour vous, pour cela, nous utilisons OnDestroy. Donc, quand le composant est détruit, ce que je veux dire, donc quand je suis sorti de n'importe quel composant dans Angular, par exemple, quand je sors de la liste des catégories et que je vais aux produits, je vais obtenir NG onDestroy du composant des catégories, ce qui signifie que je suis en train de détruire le composant directement. Je n'en ai plus besoin, seulement quand je le rentre visite. Donc j'exécute le NG dessus. Encore une fois. C'est le cycle de vie des composants dans Angular. Donc, je veux ajouter un abonnement lorsque le composant a été détruit. Alors, vous me comprenez ? Je pense. Donc ici, nous devons utiliser sur détruire aussi. Donc, ce composant va implémenter sur init et sur destroy. Donc, pour cela, nous devons créer une méthode qui s'appelle NG OnDestroy. Et cette énergie sur la destruction fera pour moi le travail que je veux. Donc je dis ici, n sous-marins complets. Donc, pour être sûr que nous pouvons consigner quelque chose ici pour voir comment il est exécuté ou imprimer quelque chose que les catégories détruites. Donc, si tu veux, tu peux sauver ça. Et puis nous allons à Catégories et naviguons hors de lui. Donc ici, mon application est à nouveau rechargée. Je sors maintenant des catégories. Je vais voir que les catégories sont détruites, donc il est retiré de la mémoire. On n'a rien là-bas. Donc, pour cela, quand l'énergie et est détruite est terminée et je n'ai pas pris jusqu'ici. Les abonnements resteront ouverts. Et chaque fois que je visite la page des catégories, je vais vous ouvrir vous abonner, vous abonner, vous abonner, ce qui provoquera pour moi une fuite de mémoire. Il est donc préférable de dire prendre jusqu'à et détruire cet abonnement lorsque n subs est terminé, ce qui se produit réellement lorsque Nk de la constante ne sera pas détruit. Donc, comme vous le voyez ici, qu'après avoir détruit ce composant, nous finissons les abonnements pour l'avoir plus efficace. Parfois, les gens qu'ils disent le font aussi, comme prendre la prochaine valeur, assurez-vous que vous avez la prochaine. Et puis faire, par exemple, cette fin d'abonnement ou complète de leur abonnement. Donc, dans ce cas, vous devez le faire pour tous les abonnements que vous ouvrez dans votre application pour éviter toutes les fuites de mémoire que vous avez. Pour cela, nous devons faire tout cela pour nos composants, ce que nous avons fait. Et à partir de maintenant, nous allons toujours utiliser cette fin ups pour compléter toujours le sujet et terminer les abonnements. Dans cette vidéo, je vais faire la même chose pour tous les composants que nous avons créés ou pour tous les abonnements que nous avons ouverts pour ne pas rendre la vidéo lente pour vous. Et à la fin, vous verrez le code de section, qui est à cela avec tout NG OnDestroy et aussi avec Abonnez-vous prendre jusqu'à ce que. 137. Architecture des composants de la Repository: Super. Maintenant, nous allons commencer avec notre boutique ND. Maintenant magasinez où leurs clients vont entrer et C produits et commander certains produits. Donc, si vous vous souvenez, nous avons créé le dépôt de projet de cette façon que nous avons un magasin et par exemple, une application de blog interne et l'application de panneau d'administration. Nous avons terminé l'application de panneau d'administration et nous allons commencer avec l'application e-shop, mais je ne vais pas utiliser ce concept que j'ai un seul e-shop, je vais supposer que j'ai plusieurs clients que je développe société, par exemple, société de logiciels am. Et je veux fournir mon e-Sharp à plusieurs clients. Donc, pour ne pas répéter ce code encore et encore, je peux obtenir l'avantage d'utiliser les bibliothèques. Ainsi, par exemple, je veux, par exemple, utiliser à nouveau le composant de connexion et le composant d'enregistrement dans un autre client ou dans un autre magasin. Bien sûr, je peux changer le style de la connexion, puis je ne vais pas répéter le même code chaque fois que j'ai un nouveau client. Donc, je vais utiliser cette approche. Donc, comme vous le voyez ici que nous avons NGI shop un et choc énergétique aussi. Et j'ai déplacé tous les composants de la fin G Sharp pour être fournis par les bibliothèques comme les produits et les commandes. Par exemple, nous aurons la liste des catégories, la bannière et le composant de détail du produit et le composant de liste de produits qui seront tous dans la bibliothèque de produits. Donc, dans ce cas, lorsque je crée et que vous magasinez, je peux utiliser les mêmes composants qui sont situés dans cette bibliothèque. Donc, je ne veux pas répéter le codage à nouveau dans tous les magasins NG. Et ce sera tout sous un seul dépôt, qui est appelé dépôt Blue Bits. Et nous aurions l'avantage de partager le code entre notre organisation. Laisse-moi t'expliquer plus. Ainsi, par exemple, Google a le même login pour tous ses services, comme Google Drive, Google AdSense, Google Analytics, vous verrez toujours le même composant de connexion est utilisé. Et c'est ce que je vais faire ici, je vais utiliser les mêmes composants ou la même bibliothèque avec des services différents. Je m'occupe de cela. Retour à notre design. Nous verrons que nous utilisons ces catégories, par exemple, la liste des produits loués et en vedette. Et ceux-ci seront situés exactement dans la bibliothèque des produits. Et aussi, le login sera le même login que nous avons utilisé pour le panneau d'administration précédemment. Ainsi, nous réutilisons des composants. Chaque e-Sharp que nous créons. 138. Préparer la structure et les styles: Ok, bienvenue de retour. Nous allons maintenant exécuter l'application dont nous avons besoin pour n'importe quel magasin. Si vous vous en souvenez, nous avons deux applications. L' un est l'administrateur, et le second est initialement, vous avez deux façons d'exécuter n'importe quelle application. Vous pouvez seulement taper x serve, puis taper le nom de l'application. Par exemple, j'ai n'importe quel magasin ou vous pouvez utiliser aussi la console NX, comment nous l'avons fait auparavant, comme un service. Et puis vous pouvez spécifier la boutique que vous voulez. Donc, pour moi, je vais utiliser une ligne de commentaire et commencer notre application. Ici. Au lieu d'avoir l'application de panneau d'administration, nous aurons l'application frontale ou la fin que vous magasinez. Ok, leur application est en cours d'exécution avec succès. Allons ici et rafraîchissons notre page et nous verrons que nous avons ce que nous avons fait précédemment quand je vous expliquais sur l'énergie première. Donc, tout d'abord, nous devons configurer les styles de somme. Nous devons préparer notre front end. Donc, si nous revenons à la conception, comme vous le voyez ici sur la photo, vous verrez que le site lui-même est dans un conteneur. Donc, ce conteneur a une largeur spécifique. Et nous allons mettre toute l'application à l'intérieur de ce conteneur. Ainsi, l'application ne sera pas une application pleine largeur. Donc, pour ce faire, allons ici à notre application de vente de fin. Et aussi, nous avons ici application. Et ici, dans le composant de l'application, nous n'allons pas avoir directement l'en-tête et le pied de page, mais nous les contiendrons dans un conteneur. Donc, nous pouvons créer un div, lui donner une classe, nous pouvons l'appeler conteneur. Et à l'intérieur de ce conteneur, nous allons mettre tous les composants que nous appelons à notre application. Et ce conteneur, nous pouvons le configurer afin que nous puissions aller aux styles de notre application. Si vous vous souvenez, nous avons des styles publics et nous avons ici et vous magasinez à la boutique NDI utilise d'autres styles. Donc, par exemple, nous pouvons utiliser une classe que nous pouvons placer ici. Donc ici, vous n'avez pas à importer seulement, mais vous pouvez également écrire des classes. Ainsi, par exemple, vous pouvez dire que le conteneur aura des largeurs. Par exemple, 1, 0, 0, 0, 0, 0 à 100 pixels. Et aussi, nous pouvons lui donner un rembourrage, comme par exemple, 15 pixels. Donc de haut en bas. Donc, il aura une largeur spécifique et un peu de rembourrage. Donc, si nous allons ici, nous verrons que le contenu est un peu déplacé en fonction de la configuration que nous avons donnée. Donc, comme vous le voyez ici que le conteneur div a cette largeur et aussi, il a un rembourrage. Mettons-le au milieu. Donc, nous pouvons dire que ce conteneur aura une marge 0 sur tous. Ainsi, nous pouvons mettre le contenu au milieu, comme vous le voyez ici. Bien sûr, cela dépend de la largeur que vous avez obtenue du concepteur. Vous pouvez lui demander audio peut ouvrir le fichier XD et vérifier la largeur qui est fourni là. Le fichier XD pour la conception est joint à cette conférence afin que vous puissiez l'utiliser également. Et comme vous vous souvenez dans la conception, comme vous le voyez ici, que nous avons un fond gris, ce fond gris du contenu. Nous pouvons utiliser à nouveau le même fond gris. Nous pouvons donc utiliser l'une de ces couleurs, qui sont fournies par prime NG parce que nous l'avons déjà importée. Donc nous pouvons avoir un de ces gris, par exemple, prenons ce gris. Alors je vais dire, donnez-moi ici aussi. Une couleur d'arrière-plan sera précieuse et cette variable sera la surface 100. Donc, je vais mettre ça et j'obtiendrais ce fond gris. Mais comme vous le voyez ici que nous n'avons pas le, par exemple, le DV ne colle pas exactement sur le navigateur de page parce que nous ne l'avons pas normalisé. Si vous vous souvenez, dans l'application d'administration, nous avons utilisé une bibliothèque qui s'appelle normalize. Donc, utilisons-le aussi bien ici. Nous pouvons donc le mettre en haut de notre application. Et puis nous pouvons avoir comme un grand dimensionnement du conteneur et des paddings initialisés pour la configuration de l'application. Si vous vous en souvenez, nous avons un fichier de configuration. Nous avons spécifié la police et la taille de la police ainsi que quelques initialisations sur ces liens. Je préfère mettre cela aussi bien sous l' importation des bibliothèques parce que le premier N G remplace certains employés, il remplace la police. Il remplace une configuration que nous avons faite. Donc, nous pouvons commencer ici clair. Après avoir tout importé, nous pouvons initialiser notre application avec une police spécifique, puis nous pouvons initialiser ou commencer le style basé sur cette configuration ici. Donc, nous gardons ça. Et nous verrons que nous avons maintenant de meilleures polices. Nous avons la taille de police par défaut sera 14. Et sur cette base, nous allons construire notre application. Alors nettoyons un peu. Donc, nous avons ici en-tête et nous avons ici le contenu. Donc, nous pouvons aussi bien ici. Et nous avons le routeur dans les pages, nous avons le composant de page d'accueil. Donc, dans le composant de page d'accueil, nous n'avons plus besoin de cela, donc nous pouvons simplement le supprimer et l'enregistrer. Donc, dans la prochaine conférence, nous allons commencer à styliser l'en-tête. Donc, comme vous le voyez ici, nous avons l'en-tête et nous allons le styliser exactement comme nous l'avons dans leur conception. 139. Styler l'chef: Ok, dans cette conférence, nous allons styler l'en-tête, l'en-tête qui contiendra le logo, certificat, et quelques liens. Donc, tout d'abord, faisons un peu de nettoyage. Nous n'utilisons pas le régime des composants parce que nous avons le fichier que nous localisons dans les styles publics. Donc, nous avons ici dans le magasin quelque chose appelé en-tête. Nous allons donc utiliser celui-ci jusqu'à présent que nous devons supprimer celui que nous avons créé précédemment. Donc maintenant, nous pouvons commencer avec l'en-tête. Donc, si nous revenons à la conception, comme vous le voyez ici, que nous pouvons avoir le logo ici et la recherche ici, ainsi que la navigation et quelques icônes pour les voitures et le compte utilisateur. Mais comment cela a été localisé, comment nous pouvons localiser ces choses. Si vous vous souvenez que nous utilisions une grille en fin de compte. Et vous pouvez être d'accord avec un concepteur pour vous fournir une conception guidée par grille. Alors, comment peut-on faire ça ? Si vous le souhaitez, vous pouvez simplement aller à View et ensuite vous pouvez dire sûrement sur la grille dans XD ou Adobe XD. Et puis vous verrez ces grilles. Nous aurons un 12 colonnes et toutes ces colonnes seront utilisées exactement comme nous les avons en fin de compte. Donc, si vous gardez plus d'yeux, vous pouvez voir que la recherche utilise quatre colonnes. Et aussi il y a ici un espace une colonne, puis la navigation a trois colonnes, et celui-ci n'a qu'une seule colonne. La bannière utilise tout l'espace. Par exemple, les catégories. Chaque élément utilise deux colonnes. Et ici aussi, la même chose pour leur article de produit. Nous verrons que nous avons trois colonnes pour chaque article. Ainsi, vous pouvez avoir un bon concepteur et le concepteur vous donnera la conception du système quadrillé, ce qui rendra pour vous le dimensionnement facile. Donc, je suppose que nous avons besoin d'une ligne de grille qui aura trois colonnes et quatre colonnes, et une colonne d'espace qui aura un décalage de celui-ci. Donc, nous aurons trois colonnes avec décalage 11 colonne à la fin pour ces icônes. Alors faisons exactement la même chose. J' irai ici d'abord et j'ouvrirai un tag. Normalement, l'en-tête est livré avec une balise appelée header, qui est la balise HTML. Et puis j'aurai un div et je vais lui donner une grille de classe P. Et ce grade B aura plusieurs colonnes, comme nous l'avons déjà dit. Donc, tout d'abord, nous aurons un div avec trois colonnes, donc p appelé trois. Et nous verrons comment nous parlerons de réactivité à la fin de ce cours. Donc celui-ci aura, par exemple, col md comme des tailles moyennes pour trois, mais nous allons maintenant utiliser le général, qui sera un trois colonnes seulement. Et aussi, nous avons besoin d'un autre div, qui aura pour la barre de recherche, qui aura un appel P, et quatre colonnes, et trois autres colonnes avec décalage un pour le pousser. Donc, pour le menu, nous aurons div P appel trois. Et puis nous aurons aussi une classe qui est décalée une. Donc, nous allons dire p offset et nous spécifions combien. Donc, nous ne pouvons compenser qu'un seul. Donc on peut avoir un décalage, puis un. Donc, dans ce cas, nous aurons une ligne poussée. Mettons comme quelques mots ici. Par exemple, ici je mets le logo, et ici je vais mettre, par exemple, la recherche. Et ici, je vais mettre, par exemple, le menu. Et à la fin, nous avons une colonne pour les icônes, qui aura P appel et une. Et ici, nous allons mettre des icônes. Sauvegardons cela et vérifions notre application. Encore une fois, nous verrons que nous ne pouvons pas résoudre le composant d'en-tête SCSS, oui, parce que nous l'avons supprimé. Nous allons au fichier ts du composant et supprimons cette ligne parce que nous ne l'utilisons plus. Nous revenons donc à notre application. Nous verrons que nous avons le logo, recherche, le menu et les icônes. Donc exactement comment nous spécifions ces espaces. Maintenant, remplissons ces espaces. Tout d'abord, je vais remplir le logo. Donc, le logo, je l'ai déjà utilisé dans l'application d'administration. Donc, si vous vous souvenez que chaque application a ses propres actifs. Nous devons donc utiliser le logo aussi, qui est situé dans le dossier des actifs et le mettre dans l'application de la boutique Andy. Donc, je vais aller ici, copier le fichier ou le dossier tout et dire boutique ND. Et puis je vais aller dans le dossier Assets et puis coller les images ici. J' aurai donc un logo et la photo de connexion dont nous avons besoin pour la page de connexion. Donc, ici, nous avons le logo et je vais l'utiliser dans l'en-tête. Donc, le logo simplement nous pouvons le mettre à l'intérieur, par exemple, un div. On peut lui donner un cours, on peut l'appeler logo. Et à l'intérieur du logo, je vais placer l'image. Donc, je vais avoir ici l'image et puis il aura comme une source, qui sera le dossier Assets. Et puis les images, puis le logo. Et j'ai oublié le nom. Ce sera le logo point. Png. Donc, nous aurons ici logo point PNG et l'alternance sera locale. Et puis on pourra sauver ça. Et nous verrons que nous avons le logo ici, mais nous devons avoir quelques tailles spécifiques. Donc, pour le style, nous pouvons aller à notre style d'application. Par exemple, il peut briller celui-ci et nous n'avons pas besoin du composant. Nous pouvons aller ici et spécifier que nous avons l'en-tête. Et l'en-tête contiendra quel logo. Donc, nous pouvons mettre ici logo et à l'intérieur du logo, nous aurons l'image. Et cette image aura comme une taille spécifique. Donc, basé sur la conception, nous pouvons donner une largeur, par exemple, 160 pixel pour le logo. Pour qu'on puisse aller ici et vérifier. Nous verrons que nous avons la taille du logo comme ça. Donc, de cette façon, nous avons préparé notre logo et ensuite nous allons faire cette barre de recherche. La barre de recherche se trouve à l'intérieur de cet élément ou de cette colonne. Donc, nous aurons ici une contribution. Et vous pouvez également créer un composant informatique distinct pour cela. Par exemple, vous pouvez l'appeler une recherche de produit. Mais je vais le garder comme ça pour l'instant parce que nous allons le remplacer par un composant comme nous le verrons plus tard. Donc maintenant on peut le garder comme ça. Alors allons-y et faisons le menu. Nous pouvons également le menu, pas localiser tous les éléments de menu ici pour ne pas avoir gros en-tête. Mais nous pouvons également créer un composant. On peut appeler ça un VE. Le nom peut être N, G pointu, NADPH. Et ce NG shop nav sera un composant où il tiendra mes articles de navigation. Donc, créons ce composant. Pour créer le composant, nous pouvons également utiliser la console NX. Donc, je vais aller ici pour générer un nouveau composant, et je vais chercher le composant. Et ce composant aura un nom nav. Et les projets seront finis que vous magasinez. Et le style. Ok, j'ignore le style et aussi, nous avons besoin d'un style de vie. Et aussi, le sélecteur sera N G nav pointu. Et on doit sauter les tests. Et où il serait situé. Il ne sera pas situé sur la racine de l'application, mais ce sera, il sera situé dans un partage, puis nav près de l'en-tête et du pied de page. Donc, nous pouvons enregistrer cela et vérifier notre application. Nous verrons que nous avons créé le composant nav ici, et il est automatiquement importé dans le module de l'application. Donc maintenant, nous pouvons utiliser ce composant. Donc, sauvegardons et vérifions si le composant est vraiment bascule bien, ok, il a Navisworks afin que nous puissions créer ou modéliser la navigation maintenant, qui sont normalement leur navigation vient dans la liste non triée. Et cette liste non triée, nous pouvons lui donner une classe qui s'appelle nav. Et puis nous pouvons avoir LI et nous aurons besoin de trois éléments de liste. Et à l'intérieur de l'élément de la liste, nous aurons un lien. Donc, lorsque vous cliquez sur Tab, vous l'aurez comme ceci. Donc, d'abord, nous aurons H ref. Nous n'en avons pas besoin parce que nous allons les remplacer par le lien routeur, comme nous l'avons vu dans l'application admin. Et ici, nous pouvons avoir, par exemple, la maison et nous aurons ici des produits, et nous aurons le contact. Donc aussi, nous allons créer un style. Vous pouvez également utiliser l'en-tête ici, ou vous pouvez créer un fichier séparé pour le style. Donc, de cette façon, je vais créer un autre fichier qui s'appelle nav ul dot SCSS. Et ce nav CSS sera importé dans mon application. Donc, je vais aller ici à la boutique MD. Et puis après l'en-tête et le pied de page, je vais appeler le fichier NAV. Donc, après cela, nous économisons et nous allons à la lutte assez pour styliser notre navigation. Donc, je vais avoir ici nav. Et comme vous vous souvenez, à l'intérieur de l'amour, nous aurons LI. Le style de liste de ce LI sera nul pour ne pas avoir ces points près de chaque élément de liste et l'affichage sera inline-block, donc ils peuvent être proches l'un de l'autre, pas sous l'autre comme une liste. Et puis je vais donner marge écrire environ 15 pixel pour repousser les éléments les uns des autres. Alors sauvegardons et vérifions notre application. Nous verrons que nous aurons tous ces éléments de navigation. Donc maintenant, nous pouvons styliser les liens de sorte qu'un lien aura de la couleur et que la couleur sera comme un gris foncé. Donc, je vais utiliser une variable qui est appelée surface. 500. Et puis sur qui que ce soit, je vais utiliser une couleur différente. Donc, quand je mets la souris sur le lien, je vais utiliser une couleur différente. Donc, par exemple, nous pouvons avoir ici sur le a, et l'a aura une couleur, qui sera la couleur primaire. Si vous vous souvenez, nous avons défini une couleur primaire dans la configuration et cette couleur nous pouvons l'utiliser ici. Donc, la couleur primaire, nous allons l'utiliser toujours dans notre application lorsque vous voulez changer le thème ou la coloration ou la couleur de base de l'application. Donc, la couleur est située ici. Donc si je sauve, on y va, on verra ça, ok, on a la navigation comme ça. Nous avons encore un problème dont nous avons besoin. Comme en quelque sorte quand on met la souris, dirait qu'il n'y a pas de texte. Ce que nous voulons l'avoir comme un lien. Vous pouvez donc modifier le comportement de la souris ici. Vous pouvez dire que plus grossier sera un pointeur, sorte que vous pouvez le faire comme ça. Et puis la souris serait comme un pointeur. Et pour les liens de routeur, nous devons les ajouter afin que nous puissions revenir à la navigation ici. Et puis nous pouvons dire à ce sujet, nous allons au lien du routeur, qui sera la page d'accueil. Donc, ce ne sera rien. Et pour les produits, nous allons utiliser le lien de routeur, qui est appelé produits. Et pour le contact, nous allons utiliser le lien de routeur, qui est appelé contact. On sauve ça. Et puis nous ne pouvons pas vérifier que nous avons la liste des produits et la page d'accueil. Enfin, comme nous l'avons vu dans la conception, nous avons cependant deux icônes ici. Remplaçons-les par les icônes de la navigation. Donc ici, nous pouvons avoir l'en-tête et à l'intérieur nous avons les icônes. Je vais utiliser une icône d'ONG de premier plan. J' ai deux icônes. L' un est utilisateur, l'autre est un panier d'achat. Mais aussi, ces composants ou ces icônes seront remplacés par les composants. Par exemple, le panier. Je veux montrer combien d'articles dans le panier. Nous devons donc le remplacer d'une manière ou d'une autre par leur composant, comme nous le verrons plus tard quand nous allons travailler avec leur panier. Mais pour l'instant, nous allons le coiffer comme ça. Donc aussi, nous devons avoir les styles ou tous devraient être comme une ligne en quelque sorte, parce que vous voyez ici, ils ne sont pas alignés ensemble. Donc, nous pouvons donner une classe pour chaque article. Donc, par exemple, nous avons ici notre logo, et ici nous pouvons donner un verre appelé surge. Et ici, nous pouvons donner une classe comme par exemple, la navigation. Et ici, nous pouvons donner un verre, nous pouvons l'appeler Outils ou actions. Donc on peut lui donner comme des outils. Et puis on peut mettre comme un peu de marge, quelques marges de marge. Donc, pour les aligner tous ensemble, pour moi, la navigation est correcte comme ça si je le vérifie. Donc d'accord, c'est bon pour moi comme ça. Donc, nous pouvons simplement déplacer ces outils comme donner édité avec un haut de rembourrage afin que nous puissions l'aligner avec l'élément. Donc, nous pouvons dire que cette div aura rembourrage, rembourrage haut, nous pouvons dire que serait 15 pixels ou plus jusqu'à ce qu'ils soient alignés ensemble. Donc, nous pouvons avoir ça comme 22 pixel. Donc, nous allons au style d'en-tête. Donc nous allons à notre en-tête SCSS, et ensuite nous pouvons aller ici et ouvrir une nouvelle balise. On peut appeler ça des outils. Et ces outils auront, le haut de bande sera 22 pixel. Et comme vous le voyez ici, c'est aligné. Mettons un peu d'espace l'un de l'autre de ces icônes. Donc, comme vous le voyez ici que nous avons créé les icônes les unes près de l'autre. Donc, je peux accéder à cette classe à partir des outils. Donc tout ce que BI Insight Tools lui donne de la marge, n'est-ce pas ? Comme par exemple, cinq pixels ou 10 pixels. Donc on peut dire ici dot py puis marge, non ? Par exemple, 10 pixels. Donc on peut le faire comme ça. Et nous verrons qu'ils sont maintenant loin l'un de l'autre. C' est très génial. Donc maintenant l'en-tête pour nous est prêt sauf la recherche. Nous allons créer un composant, en particulier pour la poussée, et nous allons l'utiliser et le mettre dans la bibliothèque des produits. Donc, à partir de la bibliothèque de produits, nous allons utiliser le composant set pour rechercher leurs produits. 140. Recherche de produits: Ok, nous allons dans cette conférence pour faire l'entrée de recherche. Donc, la personne qui peut rechercher un produit quand il a mis du texte à l'intérieur de cette entrée. Mais une chose différente ici que nous allons le mettre dans l'en-tête, mais nous allons fournir ce composant dans leur bibliothèque de produits. Bien sûr, vous pouvez aussi le garder dans le composant d'en-tête et vous pouvez l'utiliser normalement. Mais je vais le faire ici comme un composant séparé qui peut être localisé et réutilisable ailleurs. Donc, tout d'abord, nous allons à notre code. abord, nous allons remplacer cela par quelque chose comme un composant qui sera situé dans leur bibliothèque de produits. Quelque chose comme nous avons tout pointu, mais n'importe quel nav magasin est situé à l'intérieur de l'application elle-même, près de l'en-tête et du pied de page. Mais ce composant sera situé dans la bibliothèque de produits. Alors, comment peut-on faire ça ? Tout d'abord, créons le composant. Donc, d'abord, je vais à la génération NX, puis je vais utiliser ce générateur, rechercher le composant. Et puis je vais créer dans le dossier des composants et un composant qui est appelé Recherche de produits. Et ce projet sera des produits. Et puis nous allons sauter le style et sauter les tests. Tout comme nous sommes comment nous faisons toujours avec chaque composant et nous pouvons donner leur sélecteur comme produits. Rechercher. C' est aussi une option qui s'appelle Exporter. Je ne vais pas le dire maintenant, mais je vais vous montrer la différence au minimum. Donc, créons ce composant, puis exécutons cette application ou cette ligne commune. Et cette commande sera exécutée dans leur bibliothèque de produits. Comme vous le voyez ici que nous avons créé le dossier des composants. Et à l'intérieur de ce dossier de composants, il y a un composant appelé recherche ou recherche de produit. Simplement, je vais dire à mon application qui utilisent ce composant d'une manière ou d'une autre. Et j'irai ici à l'en-tête, puis je remplacerai ceci par le composant que j'ai créé. Nous appelons donc le composant de cette façon. Mais comme vous le voyez ici, qu'il est toujours indéfini car il dit que le certificat de produit n'est pas connu élément. D' accord ? Pour cela, nous allons utiliser le module produit ou la bibliothèque de produits. Donc ici, la bibliothèque de produits a un module et il contient des composants. Pour laisser l'en-tête ou l'application voir ces composants, nous devons importer le module produits. Ok, Nous allons ici et puis à notre application, comme vous le voyez ici, nous avons au module au niveau de l'application et nous avons ici importer les modules. Mais le problème ici que nous avons le module produit est importé et même que nous ne sommes pas en mesure de voir le composant de recherche de produit. C' est parce que nous n'avons pas vérifié ce que l'on appelle l'exportation. Vous devez donc exporter le composant dans le module ONG. Alors comment on fait ça ? Nous allons de nouveau à notre module produits. Donc, je vais chercher le module de produits, qui est situé dans la bibliothèque de produits. Et comme vous le voyez ici, nous avons une déclaration. Et à l'intérieur de la déclaration, nous plaçons le composant. Mais aussi, nous devons dire que ce composant est exportable, donc il peut être utilisé dans d'autres composants en dehors de ce module. Donc, quand nous sauvegardons tout et nous revenons à notre en-tête, nous verrons que, super, la recherche de produit est définie. Donc, quand nous allons au navigateur et nous vérifions que nous voyons le travail de recherche de produit. Rappelez-vous donc, toujours lorsque vous créez un composant de pistolet en dehors de l'application, comme par exemple, dans la bibliothèque de produits, vous devez exporter ce composant, pas seulement le déclarer. Et pour le faire lorsque vous générez un composant, il suffit de vérifier celui-ci dans la console NX. Donc, vous diriez juste d'exporter aussi bien dans le module, ce composant. Ok, alors nous allons styler ce composant. Je vais aller à leur composant et place ici. Au lieu d'avoir un travail de recherche de produit, nous allons créer un div. Et ce div aura une recherche de produits de classe. Et puis comme un design, nous avons une icône et près d'elle une zone de texte. Donc, nous devons d'abord avoir défini l'icône et l'icône comme nous l'avons vu précédemment, il sera défini comme PI. Et puis je spécifie l'icône PI, qui sera recherché. Ok, nous avons l'icône et maintenant nous avons besoin d'avoir des commentaires. Et l'entrée aura un type de texte, puis avec le nom peut être recherche. Et l'ID sera aussi la recherche. Nous verrons comment nous utiliserons cette recherche plus tard. Un porte-place pour que nous pouvons utiliser trouver des produits. Et nous pouvons lui donner une classe qui peut être, par exemple, recherche de produit, comme le même brevet. Et puis nous pouvons dire entrée. Ainsi, nous pouvons accéder facilement à cette entrée dans nos styles. Donc, pour cela, nous allons styler ce composant. Appelons tout les autres. Comme si on n'avait pas besoin de tous. Nous avons juste besoin de ce composant et nous allons à nouveau à des styles publics. Mais nous ne sommes pas dans la boutique, mais dans leurs lèvres parce que nous avons créé le composant dans la bibliothèque. Donc, en règle générale, je vais créer les composants de recherche de produit numérotation sera à l'intérieur de la bibliothèque de produits. Je vais créer un nouveau fichier et je dirai point de recherche de produit SCSS. Et puis je vais placer ce verre ici et sauver. Donc, nous allons à notre application pour voir si tout fonctionne bien. Super. Nous avons ici l'icône et la saisie de texte. Donc, tout d'abord, nous devons mettre la bordure, comme nous l'avons vu dans la conception précédemment, que nous avons ici, comme une zone grise et à l'intérieur il y a une icône, puis la saisie de texte. Donc, l'utilisateur va penser que tout cela est une entrée de texte. est donc très simple de le faire. C' est juste un jeu avec le SESS. Donc, tout d'abord, j'aime toujours utiliser le flex. Donc, afficher flex. Nous laissons les éléments comme l'icône et l'entrée être proches les uns des autres. Et je vais lui donner une couleur de fond, qui provient des objets de valeur de Prime NG. Et ce sera bientôt la phase. Et par exemple, 200 plus sombre que l'arrière-plan du conteneur. Et il a un rayon de bordure comme environ 10 pixels. Et nous pouvons lui donner une largeur comme initialement nous pouvons dire 275 pixel comme un design et nous pouvons lui donner une hauteur pour dire, par exemple, 35 pixel. Tu peux lui donner plus. Nous économisons, nous vérifions à nouveau tout. Nous constatons que nous ne voyons pas les changements. Pourquoi ? Parce que nous n'avons pas utilisé ce fichier de style. Donc, tout d'abord, nous devons importer le fichier de style. Donc, je dois dire Importer, et ensuite je dirai la recherche de produit. Donc, dans ce cas, les produits sont importés dans anti boutique comme vous le voyez ici. Et puis je serai en mesure de voir ce régime comme vous le voyez ici, nous avons la boîte grise. Donc maintenant, nous avons besoin d'une icône orange. Donc, je vais revenir ici à ma recherche de produit. Nous allons accéder à l'icône, comme toujours nous le faisons avec PI car il a une classe appelée PI. Et je vais lui donner une largeur qui sera de 25 pixels. Et par exemple, nous pouvons, la taille de la police peut être une icône plus grande, un peu plus grande. Donc, nous pouvons lui donner 1.3 AM. Et puis nous pouvons lui donner une couleur, qui sera notre couleur primaire. Donc nous économisons, nous vérifions ça, ok, nous avons l'icône colorée, mais nous devons lui donner une marge et un rembourrage comme être plus dans l'espace. Donc, nous pouvons donner pour la marge examinée, top 10 pixel, et la marge droite ou gauche, puis pixel. Et nous économisons. On a encore essayé. Ok, il est situé à cet endroit. Bien sûr, vous pouvez toujours utiliser les outils de développement pour gérer ou mesurer combien vous avez ici. Des espaces comme par exemple, vous pouvez utiliser avec ok, ce que vous aimez. Vous pouvez le placer dans votre style. Ok, maintenant nous allons styler cette entrée. Donc, cette entrée a comme arrière-plan et bordure. Enlevez-les. Donc, je vais dire ici comme je l'ai appelé. J' ai donc ici la recherche de produit moins entrée. Je dirai ici moins entrée. Je suis donc à l'intérieur de la recherche de produits avec SAS. Il me donne la capacité avec cette esperluette, je peux donner une entrée moins et puis je vais lui donner la hauteur sera exactement la même hauteur que nous avons donné pour le conteneur. Et la couleur de fond sera transparente. Comme nous n'avons pas de couleur d'arrière-plan et de couleur du texte lui-même. Ce sera var, variable, qui est la surface et 600, comme il serait plus sombre un peu comme la couleur de la police et la bordure, par exemple, nous pouvons l'enlever totalement. Nous n'avons pas besoin de frontière, donc je vais donner la frontière 0. Et puis nous économisons, essayons. Et on dirait, Super, on a tout ici. Mais comme vous le voyez ici, quand je mets la souris dessus, je vois une bordure. Supprimons également cette bordure. Comment nous pouvons le faire à l'intérieur de l'entrée, je peux dire esperluette focus. Et aussi je suis pour cent actif pour ça. Dans ce cas ou dans cette situation lorsque je me concentre sur l'entrée, vous pouvez mettre la bordure est none ou 0 et le contour est none. Donc, dans ce cas, nous garantissons que nous n' avons rien quand nous nous concentrons, comme vous le voyez ici. Maintenant, nous avons le style totalement. Nous avons tout le composant est créé. Ce que nous allons faire à l'avenir, quand je mets du texte ici, je vais trouver une liste de produits suggérés où il a trouvé dans la base de données. Mais maintenant, poussons un peu par le haut. Donc, si vous vous souvenez, nous avons dans l'en-tête, donc quand je vais au NG, montrez-vous à l'en-tête, nous avons donné une classe qui est appelée recherche. Donc, je vais aller au fichier CSS et dire que cet en-tête aura sur le dessus vous vous souvenez que nous avons des outils et nous avons aussi la recherche. Et il aura le dessus de rembourrage. On peut dire 25 pixels par exemple. Donc, dans ce cas, nous devons aligner aussi tout. Donc, nous pouvons avoir ici aussi, cette navigation peut avoir plus, plus d'espace sur le dessus. Donc, nous pouvons ensuite la navigation lui donner le haut de rembourrage ainsi. Et nous pouvons le mesurer comme 25 pixels pour qu'il puisse être aligné. Et aussi, nous devons donner plus d'espace aux outils sur le dessus, sorte que nous pouvons aussi le donner comme ça. Donc, pour la navigation, nous avons besoin de 23 pixels, environ 23 pixels, et les outils dont nous avons besoin d'environ 38 pixels. Donc, pour les outils, nous avons besoin de 38 pixels. Et le haut de rembourrage de navigation sera de 25 pixels. Donc on sauve tout. Nous sauvegardons tout le style. Nous voyons que nous avons l'en-tête est prêt. 141. Composants de bannières: Ok, donc maintenant nous avons fini l'en-tête, l'en-tête qui contient le logo et une barre de recherche. Et aussi, nous avons quelques icônes et le menu. Maintenant, nous passons à la page d'accueil. Revenons à notre design. Comme vous vous en souvenez, dans notre conception, nous avons une bannière, puis la liste des catégories, puis nous avons la liste des produits en vedette. Donc, créons composant par composant. Donc, à mon avis, je vais faire un composant pour la page d'accueil. Donc, dans notre code, nous avons déjà créé une page d'accueil dans l'application et vous magasinez. Nous avons déménagé ici et nous avons dit la page d'accueil. Et nous avons dit alors le composant de page d'accueil contiendra quelque chose a et B. Ce quand je vous enseignais sur la grille. Donc, pour moi, j'imagine que la page d'accueil contiendra ce qui suit. Tout d'abord, quelque chose comme appelé bannière d'interface utilisateur. Et ce sera un composant. Et puis peut-être que je vais avoir la liste des catégories ou des catégories Bannière aussi bien. On peut l'appeler catégories Bannière, pas de problème. Et aussi, nous avons mis en vedette produit. Ainsi, nous aurons trois composants les uns sous les autres et ils apparaîtront sur ma page d'accueil. Mais où est l'emplacement de ces composants ? Donc, tout d'abord, bannière d'interface utilisateur, je suppose que cela peut être dans la bibliothèque d'interface utilisateur, que nous avons créé précédemment dans les lèvres. Et nous avons des commandes, des produits, de l'interface utilisateur et des utilisateurs. Nous avons l'interface utilisateur. Donc, je suppose que nous allons créer le composant de la bannière de l'interface utilisateur. Pour ce faire, je veux vous montrer d'abord comment supprimer une bibliothèque. Par exemple, si je veux supprimer cette bibliothèque parce qu'elle a été générée en quelque sorte mal avec nous. J' ai fait cette erreur par but lorsque nous créons cette bibliothèque dans la ligne de commande, si vous vous en souvenez. Donc, je veux supprimer maintenant cette bibliothèque. Comment nous pouvons supprimer une bibliothèque. Tout d'abord, vous allez ici et dites que je veux supprimer totalement ce dossier. Mais ce n'est pas suffisant. Vous voulez également le supprimer du JSON index.js, qui est situé à la racine du projet. Donc, vous devez également supprimer l'interface utilisateur ici aussi. Vous devez le supprimer de la base de ts config, si vous vous souvenez, nous définissions le chemin est ici, donc vous devez supprimer cela aussi. N' oubliez pas de supprimer également la bibliothèque du JSON Angular car dans Angular Jason, je définit mes projets. Si vous vous souvenez, nous avons défini l'interface utilisateur, il jeux comme généré ici automatiquement. Nous devons donc supprimer cette partie aussi. Donc, de quatre endroits. D' abord la configuration NX, puis JSON angulaire, puis le dossier qui contient la bibliothèque. Ensuite, vous pouvez générer une nouvelle bibliothèque facilement à l'aide d'une console ECS. Alors, sauvegardons tout maintenant. Voyez si notre projet fonctionne toujours bien. Ok, le projet fonctionne toujours bien. Nous n'avons aucun problème ici. Et maintenant, nous allons créer une nouvelle bibliothèque. Alors fermons tous ces onglets. On n'en a plus besoin. Nous avons juste besoin de créer une génération. Et puis on peut dire bibliothèque, qui est ici. Et puis nous pouvons définir le nom de la bibliothèque. Je dirai UI, la bibliothèque appelée UI. Je vais localiser mes composants d'interface utilisateur tels qu'une galerie, des bannières, etc. Et puis vous appuyez sur l'exécution de ces options. Vous pouvez jeter un oeil à eux. Nous en avons parlé surtout lors des premières conférences lorsque nous créions la bibliothèque. Donc, d'abord, nous cliquons sur courir. Et puis nous verrons que la bibliothèque a été générée à nouveau. Allons ici aux lèvres. Et puis nous verrons, ok, super, nous avons encore la bibliothèque ici définie et tout va bien. Maintenant, générons un composant qui sera le composant de l'interface utilisateur, la bannière de l'interface utilisateur. Si vous vous souvenez, j'ai dit que je vais le mettre dans la bibliothèque de l'interface utilisateur. Donc, nous ouvrons à nouveau le même type de génération. Donc nous devons fermer ceci parce que nous générons une bibliothèque. Nous devons générer une nouvelle chose qui s'appelle composant. Donc, je vais aller ici, cliquez sur Générer le composant, et ce composant aura un nom. Tout d'abord, nous allons le mettre dans le dossier pour être plus organisé à l'intérieur de la bibliothèque. Donc, je me souviens de ces composants de dossier comme toujours. Et puis je lui donnerai le nom, qui est bannière. Et puis le projet apparaîtra avec est l'interface utilisateur. Ensuite, nous ferons le reste des choses que nous avons déjà faites. Donc, le plus important est l'exportation. Rappelez-vous, nous en avons parlé précédemment, afin que nous puissions l'utiliser dans d'autres endroits. Et puis on n'a rien d'autre dans un style de vie. Un lector qui est très important, nous devons l'appeler bannière d'interface utilisateur. Et puis nous devons dire sauter cela si vous n'êtes pas intéressé à créer des tests unitaires maintenant. Donc, cliquez sur Exécuter, puis appelez nos fichiers et vérifiez si le composant a été généré. Vérifions. Ok, nous allons CUI source lèvres composants et nous avons le composant bannière et il a son fichier ts avec le bon électeur. Et aussi, il est déjà importé dans le module et aussi bien exporté. Donc j'ai juste besoin de faire une chose, au moins. Donc, ici dans le module, j'ai besoin d'utiliser ce composant. Donc, dans leur, dans leur page d'accueil, comme vous le voyez, il me donne toujours erreur que vous, Je bannière n'est pas élément ou élément connu. Donc, ce que nous avons à faire est juste d'aller à nouveau au module de l'application, puis nous allons importer le module de l'interface utilisateur. Donc, je vais aller à l'importation et dire le module d'interface utilisateur. Donc, si vous parfois, il ne sait pas qu'il a été créé, surtout lorsque vous créez cette bibliothèque récemment. Donc, vous devez dire que le module d'interface utilisateur le tapez comme ceci. Et puis vous cliquez sur Espace de contrôle ou point sur Mac pour juste voir si ses voitures remplissent cela ou non. Donc, nous voyons que ce n'est pas la fin automatique. Nous allons et nous l'importons manuellement. Je vais donc dire Importer ici. Et puis vous module ICT de, et puis je dirai ajouter des bits bleus, interface utilisateur, le nom de l'organisation, puis l'interface utilisateur. Parce que si vous vous souvenez, la configuration ts a déjà défini pour moi un bain, qui fait référence à la bibliothèque de l'interface utilisateur. Donc, puis nous sauvegardons, et nous voyons que la bannière d'interface utilisateur n'a plus l'erreur. Commentons ceux-là. Donc, nous commentons cette partie et nous économisons, puis nous allons à l'application. Nous verrons bien que la bannière fonctionne. Alors maintenant, nous allons le styliser. Ok pour coiffer la manière, je voudrais jeter un oeil à la conception. Donc, tout d'abord, nous allons à la conception. Nous verrons que nous avons divisé, par exemple, cette bannière en deux colonnes comme je peux l'imaginer. Donc, si vous continuez, vous pouvez également activer la grille de mise en page afin que vous puissiez voir comment la mise en page se déroule ici. Donc, tout d'abord, je voudrais avoir, par exemple, cinq colonnes ici, puis Offset une colonne. J' ai donc un 1, 2, 3, 4, 5 pour ce titre et le bouton, et une autre colonne pour l'image, qui sera six colonnes. Donc, tout d'abord, nous devons créer un div qui contiendra la bannière et nous lui donnons cette couleur de l'arrière-plan. Et aussi, nous allons faire une grille qui est à l'intérieur, ces deux colonnes. Donc, j'irai ici et je donnerai div, et j'appellerai cette bannière div en général. Et puis je vais créer un div et le donner comme une grille de crête. Et puis à l'intérieur de ce pic de lecture, j'aurai deux colonnes. Le premier sera P appel, puis cinq, comme nous l'avons vu dans la conception. Et le second n'en aura que six. Ici, nous aurons six, mais celui-ci aura un décalage b, puis un. Nous pouvons donc pousser ce contenu d'une colonne vers la droite. Donc, comme nous le voyons à l'intérieur du design que nous avons deux parties, comme deux textes, les meilleurs produits dans chaque catégorie. Nous avons donc besoin de deux textes. Donc, je mettrais, par exemple, les premiers textes dans H1, et je dirai les meilleurs produits. Et aussi un autre bord, par exemple, ce sera H2 et ce serait dans toutes les catégories. Donc ici, nous avons deux textes et ensuite nous aurons un bouton. Donc, le bouton, on peut l'attraper de Prime Energy. Comme vous le savez que nous avons une bibliothèque de boutons, mais comment nous pouvons utiliser ce bouton. Alors allons ici et aller à leur bibliothèque NG principale. On ne peut pas vérifier. Donc nous pouvons avoir ici, nous avons les icônes. Allons aux boutons. Donc, ici, nous avons les boutons. Je veux un bouton qui contiendra du texte puis une icône. Nous devons donc utiliser celui qui est dans les sources. Je pense que nous devons utiliser celui-ci parce qu'il a la composition des yeux est sur la droite. On peut copier cette partie. Et puis on va à notre code et on place ce bouton ici. Mais comme vous le voyez, nous avons un problème que le bouton n'est pas défini parce que nous avons besoin d'importer le module de bouton, mais faites-le chaque module que nous devons l'importer à vous ou au niveau de l'application, je dirais à l'interface utilisateur parce que dans l'interface utilisateur il a ces composants. Et ces composants ne voient pas d'autres composants qui sont en dehors de ce module ou en dehors de cette bibliothèque. Nous devons donc importer à nouveau le module de bouton ici. Je vais donc dire Importer ici. Bouton, module de et puis je dirai fin prime g barre oblique. Donc, comme vous le voyez, c'est déjà défini ici. Et puis nous le mettons dans l'importation du module et nous verrons que notre bouton a été défini. Donc, l'étiquette de ce bouton sera en voir plus. Et l'icône sera, comme nous l'avons vu, nous avons ter, enfants, non ? Et puis on économise. Nous vérifions si nous avons tout fonctionne bien, nous avons tout fonctionne bien, mais le bouton ne s'affiche pas parce que le module n'est pas enregistré. Nous passons de nouveau à notre demande. Encore une fois, ne s'affiche pas. Vous pouvez enregistrer à nouveau leur composant. Ok, ça se montre. Donc, parfois, vous devez économiser plusieurs fois pour que les choses fonctionnent ou apparaissent dans leur front end. Donc maintenant, nous devons styler ça. Tout d'abord, nous devons créer un fichier de style pour la bannière. Donc, si vous vous souvenez, nous avons des styles publics et nous avons créé des sauts. Et à l'intérieur de ces boucles, nous avons un dossier pour chaque bibliothèque. Donc, je vais créer une bibliothèque d'interface utilisateur ou faites-vous je dossier. Et à l'intérieur de ce dossier d'interface utilisateur, nous aurons ce point de bannière SCSS. Et puis nous allons le coiffer ici. Donc, tout d'abord, j'irai rapidement pour le coiffer. Donc, nous avons cacher ce sera comme un design à un pixel 180. Et aussi nous avons une largeur, ce sera 100%. Et une couleur de fond, qui sera comme ça, comme une couleur légèrement bleue. Donc, comme nous le voyons ici dans la conception, nous avons une diapositive, une couleur bleue. Donc si je vais ici et qu'on peut cacher la mise en page, on verra ce bleu clair. Vous pouvez copier la couleur qui est la même qu'ici. Vous pouvez le copier ou utiliser quelque chose de la surface. L' ordre défini, les couleurs définies qui sont dans le moteur principal, mais je suivrais exactement le concepteur. Donc ici, je vais avoir comme cette bannière couleur de fond. Et puis nous avons besoin d'un rayon de frontière parce qu'il a des bordures sinueuses. Donc nous devons avoir un rayon de bordure et ce serait 15 pixels. Vérifions si nous sommes sur la bonne voie. Maintenant, nous ne voyons rien du style parce que nous n'importons pas de bannière SCSS dans notre application. Nous devons donc importer Banner CSS dans notre application. Mais comme nous le faisons toujours, nous mettons un fichier qui importe tout, tous les composants, puis nous importons ce fichier dans notre application. Donc, dans ce cas, nous économiserons moins de lignes. Donc je vais ici pour créer un autre fichier. Je l'appellerai point IBB SCSS. Et à l'intérieur de cette interface utilisateur SCSS, je devrai importer pour être comme ça. Et puis cette importation va importer pour moi cette bannière ou CSS. Et dans ma boutique, je vais ici et je dirai importer pour moi toute la bibliothèque, qui contient comme ce saut. Et puis nous avons l'interface utilisateur et puis leur bannière ou désolé, l'interface utilisateur scss. Donc, dans ce cas, j'ai importé VOUS IS CSS qui contenait la bannière. Alors, sauvegardons tout. Revenez à notre application. Ok, on a cette couleur, on a tout bien. Alors poussons un peu la bannière du haut. Donc, nous pouvons faire soit la marge en bas de l'en-tête ou la marge en haut de la bannière, je dirais par exemple, marge en haut de l'en-tête. Vous pouvez aussi bien mettre la marge en haut ou en haut de la bannière. Alors nous allons ici et où sont nos styles d'en-tête ? Nous avons des applis. Et puis en-tête partagé tranchant. Je vais lui donner, par exemple, le bouton de marge à l'en-tête, pousser tout sous l'en-tête, environ 25 pixels, disons tout ce que vous pouvez mesurer avec un design. Donc nous l'avons comme ça maintenant. Et maintenant, nous allons faire un peu de style. Tout d'abord, stylisons ces titres. Je passe encore à travers leur bannière. Et puis je dirai, Peut-être que je peux donner un cours pour tous ces groupes afin que je puisse le donner comme un texte. Nous annulons un texte de bannière. Donc, je vais ici et je fais défini ici quelque chose comme bannière. Et puis textez. Et tous ces textes peuvent être stylés. Donc, tout d'abord, il aura une couleur. J' ai déjà cette couleur, qui sera variable, phase de costume. Et puis 700. Et puis marge en haut. Nous pouvons lui donner comme pousser le texte à partir du haut d'environ 50 pixels. Et puis nous commençons à styliser les titres de sorte que le titre premier, H1, il aura comme par exemple, marge top 0 ou marge en général 0 pour ne pas avoir ces espaces autour, nous pouvons l'initialiser. Et puis la taille formée sera trois AM et un poids de police. On peut le donner comme un poids lourd, quelque chose comme 400. Et aussi H2. Et puis nous pouvons aussi lui donner une marge 0. Et puis nous pouvons également donner une taille de police et un poids de police. Donc, nous pouvons dire ici la taille de la police sera 20 AM et le poids de la police 300. Je suis rapide dans le style parce que notre cours ne concerne pas le style, c'est montrer la structure angulaire et comment nous allons structurer notre application. C' est pourquoi je suis si rapide à expliquer le CSS. Alors sauvegardons le chèque. Ok, nous sommes très proches de notre design. Maintenant, nous avons le bouton ici. On doit pousser leur code ou appuyer un peu sur le bouton. Vous pouvez le faire à travers le style. Si vous vous souvenez, nous donnons le style, pas la classe directement, mais la classe de style. Ensuite, vous pouvez utiliser les marges et les paddings prédéfinis, qui sont en NG premier. Donc, je dirais marge supérieure, et ensuite je vais lui donner, par exemple, trois ou quatre. Donc nous pouvons le mettre et nous verrons qu'il est poussé automatiquement. Ok, gentil. Nous avons aussi besoin maintenant d'une place pour notre image. J' ai, par exemple, l'image déjà définie. Je l'ai déjà dans mon dossier assets. Ça s'appelle l'image de bannière. Donc c'est SVG. Vous pouvez collecter n'importe quelle image de votre choix et placer dans le dossier assets du niveau de l'application. Donc, nous avons ici les actifs de l'application, et puis nous avons mis des images comme nous l'avons vu précédemment avec le logo. Et puis à l'intérieur de cette colonne, je dirai image. Et la source de l'image sera le dossier Assets et après les assets, les images. Et après les images, bannière, image, point SVG. Donc, nous pouvons également importer SVG, ok, nous avons notre image ici. Nous devons le pousser un peu à gauche ou à droite. Mais je veux vous montrer quelque chose qui est de l'animation. J' utilise une bibliothèque qui s'appelle Any made SCSS animate ou CSS animate. Je vais vous montrer comment nous pouvons, par exemple, lorsque l'utilisateur ouvrira cette page ou ce site, cela viendra comme de gauche à droite à comme glisser. Ce chariot glisse de gauche à droite. Je vais vous le montrer lors de la prochaine conférence. 142. Animate animer: Avant de commencer par la conférence sur l' animation de la manière dont je veux parler sur la question de la police. Donc, nous avons déjà parlé au début du cours des polices, les polices que nous avons installées précédemment, mais elles ne prennent pas effet seulement lorsque vous configurez quelque chose en classe NG amorcée, qui est appelé composant de pic. Assurez-vous donc juste que vous avez configuré cela et assurez-vous que dans votre appel de vos bibliothèques et d'autres composants, que vous mettez la configuration après les appels Prime NG. Donc, après cela, nous avons ce fichier de configuration. Le fichier de configuration est appelé ici et il a un composant de pic pour la police. Maintenant, nous allons voir comment nous pouvons animer la bannière. La bannière. Je pense que le meilleur cas ici que nous pouvons faire glisser cette image de droite ou de gauche à droite. Pour cela, j'utilise une bibliothèque qui est appelée CSS animée. Si vous allez sur leur site Web, qui est appelé Animate dot style, alors vous trouverez cette bibliothèque. Cette bibliothèque est très grande pour l'animation. Il a beaucoup d'animations comme vous pouvez utiliser pour vos divs, pour vos images, par exemple, des textes. Vous pouvez faire ce que vous voulez, css et très léger et très léger pour le navigateur sans utiliser JavaScript et ces choses compliquées. Donc, ils sont animation CSS est très léger et aussi navigateur convivial. Donc ce que nous avons vraiment besoin ici que nous voulons faire glisser l'image de gauche à droite. Donc, nous pouvons utiliser cette animation. Mais nous allons d'abord voir comment nous pouvons installer cette bibliothèque. Tout d'abord, nous devons exécuter cette commande npm install n'importe quel main.css moins save. Donc, je vais ouvrir un nouveau terminal et ensuite j'installerai cette bibliothèque. Ainsi, l'installation de cette bibliothèque peut prendre un certain temps. Je vais l'ignorer. Donc ici, j'ai la bibliothèque a été installée, ajouté un paquet, comme vous le voyez ici. Maintenant, nous allons l'ajouter à notre style. Donc, si vous vous souvenez, nous utilisions ici dans ND shop, SCSS, pas en admin dans n'importe quel magasin. Ceci est spécialisé pour leur boutique que nous ajoutons des bibliothèques ici. Donc, nous voulons ajouter le CSS animé ici. Alors, comment peut-on faire ça ? Tout d'abord, je vous ai dit avec ce signe, vous pouvez atteindre toutes les bibliothèques qui sont dans le module npm ou dans le dossier des modules de noeud. Ici, nous avons le dossier des modules de noeud. Ce que nous voulons en fait, nous avons déjà installé est animate CSS. Donc NMAC comme S est situé ici et nous voulons inclure le fichier animate point CSS. Alors c'est tout. Donc, tout d'abord, je vais faire l'importation. Et puis j'utiliserai ce signe. Et puis je dirais n'importe quel point css , puis barre oblique parce que si vous voyez que le nom du dossier a animé CSS. Et puis nous entrerons dans le verre ou le fichier qui est appelé à nouveau animer le CSS. Donc, dans ce cas, nous avons importé la bibliothèque. Donc maintenant, c'est important pour notre application. Nous allons utiliser l'une de ces animations, alors comment nous pouvons l'utiliser. Donc, tout d'abord, vous devez dire que je dis que ce H1 ou cette div ou cette image est animée. Comment nous pouvons le faire en disant n'importe quel compagnon animé. Donc nous pouvons copier cette classe. Et puis on va à notre bannière. Nous avons donc créé la bannière dans la bibliothèque, qui est appelée bibliothèque d'interface utilisateur, et ensuite nous avons la bannière ici. Donc, ce que je veux animer n'est pas seulement l'image, nous pouvons animer tous les div. Donc, je peux mettre ici sur le conteneur div de l'image. Donc, ce conteneur de cette image ici, je peux le mettre dans un div et ensuite nous pouvons l'animer. Donc, nous avons tout fait animé. Donc maintenant c'est, nous disons que cette chose est animée, mais quelle est l'animation ? Ainsi, l'animation sera glissée à gauche. Donc ici, nous pouvons le copier. Vous avez le bouton ici pour le copier. Et puis nous allons ici à nouveau à notre classe et nous mettons de l'espace que nous avons une autre classe, qui est appelée boue à gauche. Donc, nous économisons, allons à notre application et nous rafraîchissons. Et nous verrons cela glisser de cette façon. C' est une très bonne façon de faire ça. Donc ce que je vais faire maintenant juste pour mettre cette image à la fin ici, comme quelque chose comme le design, parce que le design montre que cela va principalement vers la droite. Alors faisons ça. Donc, d'abord, nous pouvons donner le conteneur div de l'image, quelque chose comme image de bannière. Donc nous avons ici cette image de bannière. Donc, après cela, nous avons le texte de bannière et maintenant l'image de bannière. Donc, nous allons au style de la bannière. Donc, nous l'avons déjà dans les styles, les lèvres de style public. Et puis je vais ici à la bannière, et puis je vais choisir ici, pas de texte, mais j'ouvrirai une nouvelle balise, qui sera l'image. Donc ici, ce sera l'image. Et cette image, nous pouvons lui donner, par exemple, le centre d'alignement du texte, comme les choses à l'intérieur de cette image seront centrées. Revenons au navigateur. On verra qu'il est toujours là parce que je n'ai pas gardé cette partie ici. Donc, si nous revenons en arrière, nous verrons que c'est plus à droite, donc c'est centré. Mais lorsque vous mettez, par exemple, l'image elle-même, texte s'aligne plus vers la droite, alors il sera poussé totalement vers la droite comme vous le voyez ici. Mais nous avons besoin ici encore un rembourrage pour que nous puissions donner à cette image comme nous devons la pousser un peu du haut et de la droite. Donc, nous pouvons donner au récipient lui-même un rembourrage. Donc nous ne pouvons pas dire que le rembourrage sera de ce haut d'environ 15 pixels. Et puis de droite, ce sera comme à nouveau 15 pixel. Et à partir du bas sera 0, et à partir de gauche il sera 0. Après cela, nous verrons que nous avons exactement ce que nous voulons. Donc nous avons ici l'animation, et nous avons vérifié cela dans la console. Donc peut-être que nous avons besoin de plus de paddings comme de gauche pour que nous puissions le donner comme plus de poussée vers la gauche, quelque chose comme 50 pixels. Je pense que je n'étais pas assez avec ça. Donc je dois mettre ici 50 pixels. Donc, nous économisons. On y va encore. Nous voyons que l'animation va très bien. Bien sûr, si vous n'utilisez pas d'ensachage, vous pouvez simplement dire haut de rembourrage. Et puis vous pouvez, par exemple, mettre toutes ces valeurs à 0. Et puis vous pouvez simplement dire le centre de l'alignement du texte. Donc, il sera au centre de la div, que nous avons spécifié année. Je préfère toujours le centre. C' est ainsi que nous animons les choses avec CSS. En utilisant cette grande bibliothèque qui est appelée CSS animé. Bien sûr, vous pouvez également utiliser l'animation de CSS ou d'animation angulaire. Mais je préfère toujours utiliser des choses simples qui peuvent affecter les performances de mon application. J' utilise donc surtout plus CSS et HTML sans utiliser des bibliothèques trop compliquées ou JavaScript. 143. Style de bouton PrimeNG primaire: Dans cette conférence, je vais vous montrer comment remplacer le bouton de Prime NG à un style spécifique que vous voulez. Si vous vous souvenez, nous avons importé le bouton de Prime energy et il est venu comme un style standard, qui est bleu. Mais nous voulions comme dans le design, comment nous l'avons ici. Nous pouvons donc le faire facilement en remplaçant le style de prime NG. Alors faisons ça maintenant. Donc, tout d'abord, je vais revenir au composant bannière que j'ai créé précédemment. Et puis dans la classe de style, je peux ajouter une nouvelle classe. On peut lui donner un bouton ou un bouton de bannière. Et ici, le bouton de bannière aura un style dans Banner, CSS. Alors allons ici et créer une autre balise, qui sera à nouveau préfixée avec une bannière, puis un bouton. Donc, si vous voulez remplacer ce bouton, nous avons spécifié la classe pour cela. Alors donnons-lui, par exemple, quelques propriétés. Donc ce que je veux d'abord, c'est un fond blanc. Donc, je vais mettre la couleur de fond sera var, puis costume phase 0. Et puis nous pouvons avoir un fond blanc, puis cette couleur sera une couleur primaire, que j'ai définie précédemment pour notre application. Et on en a parlé avant. Et aussi bordereau ou essayons maintenant sans styliser plus pour voir si nous allons progresser. Eh bien, d'accord, comme vous le voyez, nous avons maintenant la frontière est toujours bleue. Et sur Hoover, nous l'avons toujours comme bleu. Alors allons-y d'abord, retirez la bordure. Je vais enlever la frontière comme bordée 0. Maintenant, nous économisons. Ok, maintenant, retirons le vol stationnaire. Alors, comment peut-on faire ça ? D'abord ? Si vous voulez survoler ou supprimer le survol, C'est très simple. Comme vous le voyez ici en CSS, le planeur sera à leur manière comme je suis à l'intérieur de la classe de bouton. Et puis je dis ça et encore. Donc esperluette planent. Donc ça veut dire comme le bouton. Et puis j'ai cet attribut qui est appelé hover, et puis je peux supprimer l'arrière-plan aussi. Donc, je peux aussi faire les mêmes propriétés ici. Donc, nous pouvons économiser et nous remarquerons que cela n'aura aucun effet. Donc fin prime, Il est stylisant certains boutons de manière différente. Donc, si vous voulez remplacer certains styles de Prime NG, pas seulement le bouton, la seule façon de le faire correctement, est d'inspecter. Vous pouvez donc ouvrir les outils de développement. Vous pouvez cliquer avec le bouton droit de la souris sur le bouton, puis inspecter. Et puis vous verrez le, par exemple, le style ici. Donc, je ne veux pas le style de la portée du texte à l'intérieur. Je veux le bouton lui-même. Et pas seulement le bouton, Je veux le bouton B, comme cette tuile, comment je, où ici le style du bouton de bannière. Donc, comme vous le voyez ici, nous avons toutes les informations qui viennent ici. Mais nous avons toujours un problème que nous ne voyons pas nos classes que nous avons spécifiées. Ils sont dans le bouton et voici nos propriétés. Comme vous le voyez, ce bouton de bannière, la classe que nous avons définie est ici et aussi sur le bouton lui-même. Donc, premier ND fait tout pour vous est de passer par la classe de style. Donc ce que je vais faire maintenant pour vérifier toute la raison pour laquelle cela ne fonctionne pas. Donc, pour activer le style de vol stationnaire, vous pouvez cliquer dessus sur cette bascule. Ensuite, vous pouvez sélectionner quelle activité peut faire comme à la place de vous, comme vous n'avez pas à faire l'activité de la souris par vous-même. Tu peux juste dire que je veux plus. Donc, d'accord, maintenant c'est dans l'état de Harvard le bouton. Donc, comme vous voyez que nous n'avons pas plus directement, il a activé, puis survolez. Nous devons donc faire la même chose parce que regardez, c'est l'emporte sur nos changements parce que cela vient plus important que nos changements. Donc, dans ce cas, je dois le faire exactement de la même façon que je le fais ici. Donc, nous pouvons prendre cette activer Hover et ensuite nous allons à nouveau à notre code. Donc, je vais aller ici et dire, non seulement planer, mais activer aussi, activé. Et puis nous verrons que nous avons ici les changements qui vont principalement. Essayons donc ou redémarrons la page. Et on y va. Et nous verrons qu'il a normalement l'effet de vol stationnaire. Donc nous n'avons plus ce problème. Donc, de cette façon, vous pouvez remplacer non seulement le bouton, mais tout dans prime NG. Parfois, tu en as besoin. Vous devez remplacer un style à partir d'un composant comme accordéon ou certains manuels ou par exemple, un bouton bascule. Vous devez donc le faire pour chaque partie de Prime NG en fonction de votre conception. C' est donc le moyen le plus simple de remplacer. Et c'est l'objectif d'avoir les styles publics. Parce que sans avoir de styles publics, vous ne verrez pas les modifications dans votre composant. Parce que si j'ai ce cadran dans le composant, alors la fin principale où le rendu aussi bien basé sur le composant. Dans ce cas, je ne pourrai pas accéder au style du, par exemple, ce bouton uniquement avec quelque chose appelé hôte et, ou par exemple, host deep. Et cela est utilisé dans Angular pour accéder à l'intérieur de certains composants ou composants enfants qui sont définis à l'intérieur du composant principal ou parent. Donc, dans ce cas, nous garantissons de la manière avec styles publics que tout est public et ouvert pour nous. Nous pouvons simplement passer par et ensuite nous stylisons comme nous le voulons en fonction de ce que nous inspectons ici. C' est pourquoi j'utilise toujours les styles publics. Je n'utilise pas les styles de composants. Bien sûr que c'est à vous de voir. Vous pouvez également utiliser le style des composants. Alors vérifions à nouveau la conception, nous verrons que nous avons ici comme plus de rayon de frontière. Donc on peut dire comme si c'était 13 ans. Mettons donc le même rayon de bordure qu'un design. Revenons donc à notre code. Et puis nous dirons ici que le bouton a border-rayon sera de 13 pixels. Sauvegardons, vérifiez-le à nouveau dans notre navigateur. Et nous verrons que nous l'avons aussi de cette façon. Nous remarquons que le bouton a plus de hauteur. Donc, vous pouvez aussi lui donner une hauteur que vous voulez comme ici, il a 48 ou peut-être nous allons le faire, par exemple, 50 pour avoir comme un nombre constant. Donc, nous revoilà et nous disons, accord, la hauteur du bouton sera de 50. Alors il y va, Pixel, 50 pixels. Donc encore une fois, nous allons au navigateur, nous vérifions que, ok, nous avons le bouton avec 50 pixels. Donc, c'est une façon dont nous implémentons les choses et comment nous remplacons cela meurt à partir de Prime NG. 144. Bannide de catégorie Banner: Ok, retour à notre conception, nous allons maintenant faire les catégories composant ou catégories bannière. Donc, ces catégories auront un titre et la liste des catégories. Et chaque élément de catégorie aura l'icône que nous avons spécifiée dans le back-end et le nom de la catégorie. Et quand je clique sur une catégorie, j'allais à la page de la liste des produits et je montrerai les produits qui sont dans cette catégorie. Alors faisons cela rapidement et nous allons l' implémenter de la même manière que nous avons mis en œuvre cette bannière. Donc d'abord, je dois y aller. On peut tout fermer. Donc on n'a pas besoin de faire autre chose ici. Donc, nous allons juste créer un nouveau composant qui est appelé catégories de pâte. Et où cela pourrait être bon bannière IS sera créé. Je suggère pour moi maintenant que je peux le créer dans la bibliothèque de produits. Nous avons donc des produits pour les lèvres, et ici nous pouvons définir les composants que nous avions fabriqués avec la recherche de produit. Nous pouvons également ajouter la bannière des catégories. Donc, nous pouvons aller ici et générer, puis nous donnons un nouveau composant. Et ce composant schémas. Et je vais lui donner ici des composants. Et ce ne serait pas le but est planaire. Et puis le nom du projet sera les produits. Et puis je vais ici dans la liste comme nous le faisons toujours, je donne l'exportation parce que je vais l'utiliser dans la page d'accueil et le chemin et des objectifs. Nous devons donner un sélecteur, le sélecteur, comme nous l'avons dit, nous définissons cela, que nous donnons au produit le nom de la bibliothèque comme en règle générale. Et puis nous définissons ce que nous voulons. Donc, nous pouvons dire produits, catégories, bannière. Et ici, nous avons ce sélecteur. Sautez les textes et nous devons spécifier aucun besoin de style afin que nous puissions mettre en ligne style. Donc, dans ce cas, nous aurons la bannière des catégories générée de cette façon. Donc, nous allons cliquer sur Exécuter. Et puis nous allons à nouveau à nos dossiers. Nous verrons que nous avons des catégories bannière. Donc, comme chaque catégorie ou comme chaque composant, nous avons besoin div et nous pouvons donner cette bannière des catégories de qualité div. Et cette bannière catégories contiendra un titre, comme nous l'avons vu dans la conception. Il s'appellerait ici catégories. Donc je donne H3, vous pouvez donner tout âge que vous voulez pour moi, je donne le H3 parce que c'est le troisième niveau de la page. Donc, ici, nous avons maintenant des catégories et puis nous définissons, convenu, donc p grille, parce que si vous vous souvenez dans la conception que ces catégories sont sous métrique, convenu. Donc, à chaque grille aura deux colonnes parce que nous avons six catégories là-dedans du tout. Donc, nous donnons cette div, puis appelons et deux. Donc, dans ce cas, nous aurons les catégories situées ici. Donc, ce que nous voulons d'abord, nous avons besoin d'un div qui contiendra la catégorie elle-même ou l'élément de la catégorie. Et puis à l'intérieur de cet élément de catégorie, nous aurons un arrière-plan, puis l'icône et le nom. Donc, je vais donner ici div. Et puis je dirais, par exemple ici div, une icône de catégorie ou ce sera, oui, ok, Ils sont icône de catégorie parce que j'ai besoin ici de l'icône d'abord. Donc, nous avons ici l'icône de catégorie et un autre div où je vais mettre le nom de la catégorie afin que nous puissions dire la catégorie de point div, le nom de tiret. Et ici, nous allons mettre une icône. L' icône que nous lisons en utilisant était de prime et g, Si vous vous souvenez, nous utilisions la balise qui est appelée I et puis P icône, et puis je donne l'icône que je veux, par exemple, vérification PI. Donc, ici, nous avons l'icône et le nom sera, par exemple, le nom de la catégorie sera, par exemple, jardin. Nous allons donc remplacer plus tard tout ce composant ou ce texte solide ou texte codé en dur par la catégorie qui vient du back-end. Donc maintenant, nous sommes structurés notre page. Revenons à la page d'accueil. Donc nous avons tout fonctionne bien, mais nous n'avons pas cette bannière parce que nous ne l'avons pas appelée sur la page d'accueil. Donc, tout d'abord, je dois aller à l'application et vous magasinez, comme vous vous en souvenez, nous avons les pages et ici la page d'accueil. Et le deuxième composant sur lequel nous travaillons est que les catégories composant ou catégories bannière. Donc, ici, nous l'avons appelé comme des produits. Ok, je pense ou bannière IS et aussi nous devons le fermer aussi, donc nous n'avons pas ici de problème. Donc, dans ce cas, je vais avoir comme la bannière des catégories sera appelée à partir de la bibliothèque des produits. Donc, si vous vous en souvenez, nous avons déjà importé le module produits. Donc, le module produits, à l'intérieur du module produit, j'ai déjà la bannière catégories, qui dans la console ECS a fait dans l'exportation et mettre ce composant, qui dans les bibliothèques produit ou la bibliothèque de produits. Donc, ici, nous avons tout. Essayons ça. Nous verrons, super. Nous avons des catégories. Et l'icône et le jardin. Donc, ce dont nous avons besoin, en fait nous avons besoin d'abord pour coiffer cette bannière. Nous allons donc aussi à nos styles publics. On a des lèvres. Si, si vous vous souvenez, nous avons défini la même structure. Donc, je vais créer un nouveau fichier dans la bibliothèque Produits et donner comme bannière catégories. Et cette bannière catégories aura, sera un CSS. Et puis nous allons le styliser ici. Mais nous devons d'abord l'importer aussi dans nos produits, qui sont importés dans notre style d'application. Donc nous avons ici aussi, nous n'avons pas les produits, nous avons des catégories, bannière. Donc, dans ce cas, je peux voir les styles dans mon application. Donc, comme nous le voyons dans le design, nous avons comme un peu d'espace ici. Donc, soit vous pouvez donner bannière ou par exemple, ici, marge inférieure, ou ici vous donnez la marge haut pour moi, je donnerai la marge haut pour les catégories. Donc peut-être qu'on peut aller ici deux catégories, bannière et tout d'abord, on doit appeler cette classe. Donc, nous avons ici la classe des catégories, bannière dans les catégories mammifères bien, fichier CSS. Donc je vais donner ici Ferraris comme marge, mais dope ou ouais, dope, on ne peut pas dire 75 pixels. Et aussi, nous allons styler le H3, qui est à l'intérieur. Donc, nous pouvons lui donner, par exemple, le bouton de marge. Donc, nous pouvons pousser l'icône de catégorie en dessous, environ 20 pixels. Donc, nous pouvons enregistrer ceci pour vérifier si nous importons vraiment cette fois. Ok, Nous voyons que nous avons, le style est importé. Ok, gentil. Et nous allons colorer cela de la même façon que la couleur qui est définie ici. Ce n'est pas tout à fait noir, mais c'est comme de la lumière en gris. Ainsi, nous pouvons utiliser les gris qui sont dans la surface et définis dans le, dans l'énergie première. Donc, comme vous le voyez ici, nous avons beaucoup de variables pour les couleurs, donc nous pouvons rester sur celles-ci. Donc, nous pouvons prendre, par exemple, cette plus sombre. Donc on peut prendre cette diapositive. Nous pouvons prendre par exemple les enquêtes 500 par exemple. Donc nous allons ici, nous lui donnons une couleur à ce H1 ou H2, H3. Et nous disons loin, donc la phase 500. Donc maintenant, nous avons spécifié la couleur du titre. Nous y retournerons et nous verrons qu'il a obtenu cette couleur. Peut-être que vous pouvez utiliser plus sombre, donc vous augmentez simplement le nombre qui est spécifié ici. Donc, je vais lui donner, par exemple, 700. Alors on y va, on lui donne 700. Ou en fonction de la conception, vous pouvez définir vos propres couleurs, nos propres variables. Et puis vous pouvez les utiliser dans votre application fonction de la conception qui est fournie par le concepteur. Donc, ici, nous avons le style, le H3, ce dont nous avons besoin aussi pour le style de cette catégorie elle-même. Donc, à l'intérieur de la bannière des catégories, nous avons défini un div qui est appelé catégorie ou catégorie élément. On peut l'appeler comme ça, je l'appelle ici, catégorie. Et à l'intérieur de cette catégorie, je vais avoir des valeurs similaires. Comme par exemple, nous avons une hauteur minimale pour cela, comme il a une certaine hauteur, nous pouvons lui donner 100 pixels. Je les copie ou je connais ces informations à partir de la conception, donc nous pouvons copier aussi. Le rayon de bordure deux sera de cinq pixels. Et puis nous avons aligner le texte. On lui donne un centre. Donc tout à l'intérieur serait au centre. Et cela sera affiché sous la forme d'un flex. Je vais vous dire pourquoi, Parce que nous voulons aussi justifier leur contenu d'être dans le centre. Donc d'abord, on peut le donner comme ça. Je veux juste donner une couleur de fond, une couleur de fond aléatoire, juste pour voir comment mes changements vont parce que tout est transparent maintenant. Donc, nous pouvons aussi être, par exemple, aléatoirement cette couleur. Bien sûr, nous allons le remplacer par leurs catégories couleur, que nous avons également définies dans le back-end. Donc nous avons ce jardin ici, nous avons cette bannière. Je veux donc justifier leur contenu. Donc, si vous vous souvenez, nous définissons cela comme flux. Donc, vous ne pouvez pas dire simplement justifier le contenu , puis vous direz centrer, puis aligner les éléments. Vous pouvez le donner, par exemple, également centre. Donc, ce sera exactement au centre de cette div. Donc, deux choses, justifier le contenu et aligner les éléments. Alors donnons-le ici. Donc, comme nous voyons justifier le contenu, nous disons centrer et aligner les éléments. Ça le sera aussi, Centre. Donc tout sera centré à l'intérieur. Mais comme vous le voyez, ils sont proches les uns des autres, comme l'icône et aussi le nom, ils sont proches les uns des autres parce que nous avons dit display flex. Donc, pour les mettre les uns sous les autres, il est agréable, je pense que dans flex vous pouvez dire direction flex. Ce ne sera pas activé, ils sont tous comme pas un horizontal, mais ce sera colonne et aussi colonne inverse. Vous avez plusieurs options ici. Tu peux basculer entre toutes ces choses. Donc, vous voyez, faire des choses est vraiment important à apprendre. Comme vous le voyez, vous ne pouvez pas faire les choses seulement quand vous apprenez quelque chose de pratique. C' est pourquoi je fais ce genre de cours. Cours qui viennent avec une expérience pratique. Non seulement je dirige un document, puis d'accord, vous pouvez l'appliquer. Non, tu le vois devant toi. Vous voyez comment nous avons vraiment besoin, par exemple, de direction flexible. Peut-être que vous avez vu la direction flexible. D'accord. Tu ne sais pas ce que c'est ? Vous n'avez jamais connu pourquoi nous l'utilisons, mais maintenant vous pouvez voir comment il est utilisé. C' est donc une grande valeur de faire les choses pratiquement. Donc, nous avons maintenant cette catégorie. Donc, ce dont nous avons besoin basé sur le design pour donner à l'icône plus grande taille et aussi le texte pour être un peu plus grand. Alors faisons ça dans le code. Vas-y, je vais ici. Donc, je dirai que si vous vous souvenez, nous avons spécifié icône, catégorie, icône. Donc, je vais aller ici et je vais dire que je suis pour cent catégorie ou icône parce que je suis pour cent va me donner la catégorie de points. Et puis j'ai mis l'icône du tableau de bord. Il fera pour moi dans cette icône de catégorie. Donc, ici, nous aurons la classe, et à l'intérieur de cette classe, nous utilisons l'icône. Donc, nous pouvons utiliser cette classe aussi. Donc ici, je peux dire PI, ce sera la taille de la police. Nous pouvons le donner comme par exemple, 40 pixel. Tout ce que vous pouvez utiliser les unités EM, vous pouvez dire à EM. Donc nous pouvons l'avoir comme un gros texte. Donc, revenons au navigateur, nous verrons, ok, nous l'avons comme ça. J' ignore les changements parce qu'on n'a pas sauvé ça. Donc, nous devons mettre à nouveau, direction flex sera colonne. Ok, nous avons maintenant tout va bien, donc il est rechargé. Et nous l'avons comme ça. Aussi peut-être que ce texte, nous pouvons lui donner un peu plus grand. Donc, je vais aligner aussi une autre classe qui est appelée texte ou nom. Non, ce qu'on appelle le verre ici. On l'a comme nom. Donc, je vais ici le nom, et puis la taille de la police du nom sera comme un peu plus grande. On peut lui donner 1.2 heures du matin. Donc, ce 1,2 E m, ce que cela signifie, comme, je vais multiplier 1,2 par 14 pixel et puis il vous donnera la taille en pixel. Donc c'est comme ça que c'est calculé parce que nous avons le corps spécifié précédemment dans leur configuration, que nous avons. La taille du corps de la police sera de 14 pixels. Donc après ça, on peut sauver et repartir. Et nous verrons que nous avons une police plus grande un peu ici. Donnons aussi un peu d'espace ici sous l'icône. Donc nous pouvons aller ici à l'icône elle-même. Et nous pouvons aller à nouveau ici et dire, par exemple, à l'œil lui-même ou le PI, nous pouvons donner margin-bottom comme 10 pixel. Donc, nous pouvons aussi utiliser cette classe ici. Et nous disons comme, je veux un fond de marge sera de 10 pixels. Donc, pour pousser le texte un peu loin de l'icône. Donc nous économisons, rechargeons, Ok, tout va bien maintenant. Alors vérifions au moins le rayon de la frontière. Je pense que c'est plus grand. Il en a 14. Donc, nous pouvons aussi donner un plus grand rayon de frontière. Donc nous pouvons donner ici 14 pixel. Et puis nous allons à nouveau à notre conception. Et nous verrons que nous avons une catégorie spécifique. Donc maintenant, ce que nous allons faire est juste de répéter les catégories qui sont dans la base de données, nous obtenons de Postman et nous résolvons cela précédemment dans l'application du panneau d'administration et les plaçons ici. Donc, tout d'abord, nous devons appeler ce service de catégorie. Donc, comme vous le voyez ici, nous avons tout stylé. abord, nous devons avoir un tableau similaire de catégories. Donc, nous pouvons définir ici dans les catégories de fichiers ts pourquoi ce sera comme tableau. Et ce tableau sera de type de modèle de catégorie. Si vous vous en souvenez, nous avons également défini ce modèle. Donc, il sera initialement vide parce que nous allons l'obtenir à partir du back-end. Et quoi, comment et comment je peux utiliser ou obtenir les catégories. Nous pouvons les faire passer par le service si vous vous souvenez, que nous avons créé dans la catégorie service. Et nous avons toute cette liste afin que nous puissions obtenir des catégories. Donc, je vais ici à mon fichier TypeScript dans la bannière des catégories, et j'appellerai ce service de catégorie. Je dirai catégories privées service. Il s'agira de catégories de service comme vous le voyez ici. Donc, si vous voulez, vous pouvez utiliser celui-ci. Et puis sur l'ONG sur Edit, nous pouvons appeler à nouveau ce service de catégorie. Et puis nous pouvons sentir ces catégories. Alors faisons ça. Nous pouvons dire ce service de catégorie de points, puis getCategories. Et si vous vous souvenez, nous devons nous abonner, nous devons attendre une valeur qui vient du backend et ensuite nous la poussons au tableau. Donc, nous avons ici dot subscribe parce que c'est la requête HTTP. Et puis je vais obtenir leurs catégories dans le retour de l'abonnement. Donc, ici, nous avons des catégories. Et puis je dirai que ces catégories, comme la variable que j'ai définie ici, seront les catégories qui reviennent, ou les catégories de réponse qui sont revenus du backend. Et si vous vous souvenez, nous avons aussi besoin de se désabonner, nous devons le faire. Par exemple, prenez jusqu'à ce que si vous vous souvenez, nous avons fait qui est juste pour la performance de ne pas faire des problèmes. Donc, cet abonnement ne restera pas ouvert. Nous devons donc le faire aussi. Et les sous-marins, si vous vous souvenez, et nous avons défini cela et nous en avons parlé dans le refactoring du panneau d'administration. Donc, n subs sera une variable qui sera aussi bien définie ici. Donc on peut appeler ça n sous-marins, désolé. Donc n sous-s aussi avec dollar. Donc, il aura un type qui est appelé sujet. Et le sujet vient de nos x js et le type de celui-ci sera n'importe quel. Et puis nous en tant qu'initialisation, quand je visite ce composant, je dis nouveau sujet. Donc ça finit, eh bien, ça finira, comme je le dis ici, prendre jusqu'à ce que, Ok, je prends jusqu'à ce que ce sous-marin. Et quand ça finira, nous finirons quand je détruirai ce composant. Lorsque je détruis ce composant, quand je navigue loin de la page d'accueil, quand je ne vois plus ce composant. C' est pourquoi nous devons aussi appeler quelque chose sur détruire. Donc, ce OnDestroy fait partie du cycle de vie angulaire des composants. Et puis nous pouvons l'utiliser, donc il sera exécuté lorsque le composant sera détruit. Donc, ici, nous implémentons onDestroy, puis je dis NG onDestroy, et ensuite je vais spécifier ce qu'il va faire. Donc, je veux que cette fin subs soit complétée. Donc, comme je l'ai dit, est évident que nous devons le faire de cette façon. Nous disons Suivant, comme aller à l'étape suivante et ensuite terminé. Donc, lorsque ce composant est terminé, l'abonnement sera terminé et nous n'aurons aucune fuite de mémoire. Donc nous économisons. Et nous avons maintenant la catégorie C'est par exemple ici, faire un journal de console pour être sûr que nous obtenons les catégories du back-end. Bien sûr, vous devez être sûr que vous exécutez le back-end. Donc, nous économisons à nouveau et nous allons à la console. Et nous verrons qu'il y a peut-être une erreur. C' est une erreur ici. Il dit sont trois erreur d'injecteur. Le service de catégorie utilise le client HTTP et il n'y a pas de fournisseur pour le client HTTP. Donc, nous devons faire ou appeler aussi. Si vous vous souvenez, nous l'avons fait dans le panneau d'administration, nous devons également appeler à la fin de l'application, le module client HTTP. Donc, j'enregistre ici à nouveau, module client HTTP comme nous l'avons fait précédemment dans l'obligation d'administration. Donc nous avons appelé maintenant, ok, je reçois cinq catégories comme vous le voyez ici. Mais à l'avant, nous n'avons rien encore parce que nous n'avons pas ajouté cela au modèle. Donc, nous revenons à nouveau à notre bannière de catégories ici. Donc, nous avons utilisé tableau. Bien sûr, vous supprimeriez toujours leur journal de console car cela affecte les performances de l'application. Ne faites pas beaucoup de journaux de console et gardez-les en production. Il est donc préférable de les enlever. Donc ici, comme vous le voyez, nous avons la catégorie et nous avons la deuxième colonne. Nous devons donc faire une boucle sur ces deux colonnes ou deux chaque catégorie. Et puis il va générer pour moi ces catégories, qui est fourni à partir du tableau de catégories. Donc je dirais ici dans la deuxième colonne, G4. Et puis à la fin vous pour, Je dirai laisser la catégorie sera hors catégories, catégories. Nous définissons cela déjà et c'est plein. Maintenant, nous avons la catégorie ici. Je dirai remplacer pour moi le nom de la catégorie. Pour que nous puissions le faire de cette façon. Je dis le nom de point de catégorie et ensuite les largeurs vérifient cela pour voir si tout fonctionne bien. Bien, on les a tous comme ça. Nous allons donc remplacer la couleur de fond. Faire cela est très simple. Si vous vous souvenez, nous avons la couleur sur la catégorie, donc nous l'avons dans le CSS ici. Donc, nous avons ici la couleur d'arrière-plan sur les catégories classe ou composant de catégorie. Donc, voici la catégorie div. Donc, ici, nous allons et nous disons que nous avons une entrée pour les devs ou tout élément HTML qui vient d'Angular, nous venons d'appeler le style NG. Et dans n'importe quel style, nous avons spécifié cela entre parenthèses. Donc c'est une entrée. Donc, nous devons faire à l'intérieur de cette entrée du code angulaire. Et à l'intérieur, nous ouvrons un objet, et cet objet contiendra la propriété du style, l'arrière-plan, la propriété du style, nous le définissons comme ceci. Contexte. Couleur. Donc, il aura comme cette couleur de fond. Et puis je dirai la catégorie, la catégorie que j'ai obtenue du MD4, puis la couleur. Donc ici, cette div aura cette couleur de fond, qui sera la couleur de point de catégorie. Donc nous économisons. Et puis nous allons à l'application. Nous verrons que nous avons obtenu la couleur que nous avons définie dans le panneau d'administration avant, si vous vous souvenez. Donc, de cette façon, nous avons cette couleur. Le style énergétique fait le travail pour vous. Ainsi, vous pouvez aussi bien utiliser d'autres propriétés, telles que, par exemple, la couleur. Donc, vous voyez ici que la couleur changera aussi en fonction de cela. Donc c'est très simple. Vous pouvez cela à l'intérieur du NG quatre et aussi l'icône, si vous vous souvenez, nous avons ici l'icône spécifiée pour leur catégorie, donc nous pouvons l'utiliser aussi bien. Vous avez deux options. L' un d'eux est juste le faire et puis vous dites l'icône de point de catégorie. Parce que si vous vous souvenez, nous spécifions l'icône uniquement le nom de l'icône, qui provient de Prime NG. Nous devons donc le connecter pour être pi, puis moins, puis spécifier le nom de l'icône. Et on pourra l'obtenir ici. C' est exactement ce qu'on a fait avec le panneau d'administration. C' est pour ça que je vais vite ici. Donc, comme vous le voyez, nous avons tout est défini. Je pense que la police de texte est un peu grande. Rallons-le plus petit. Je vais revenir ici à la bannière des catégories et ensuite je vais faire le nom pour être. On le garde comme un. Donc nous n'avons pas à faire quoi que ce soit ou à changer ici. Donc on peut juste le garder comme ça. Et nous verrons, ok, nous avons le texte et les icônes sont très belles. Nous avons cinq catégories seulement parce que nous avons défini cinq catégories dans le back-end, vous pouvez ajouter une autre catégorie. Je vais l'ajouter pour la prochaine conférence. Vous pouvez utiliser l'application du panneau d'administration pour ajouter une catégorie, et il sera ajouté ici avec l'icône de droite. Bien sûr, la dernière chose que je veux mentionner est lorsque je clique sur l'une de ces catégories, je veux aller à la liste des produits, puis à la catégorie de ce produit. Je veux donc voir les produits de cette catégorie, de la catégorie sur laquelle j'ai cliqué. Donc, pour ce faire, nous devons faire sur la bannière elle-même. Ici, la catégorie. Nous ne pouvons pas dire lien routeur si vous vous en souvenez. Donc je ne peux pas dire ça ici. Il peut s'agir d'un lien de routeur. Donc, le lien du routeur, ce que ce sera, ce sera un produit. Donc, nous pouvons mettre ici en guillemets doubles parce que je définit cette entrée. Donc ici, j'écris un code TypeScript ou JavaScript, disons, ou un code angulaire. Donc ici, je spécifie le patron. Ce seront des produits. Et puis je crée, par exemple, le même composant que je l'appelle, mais ce serait comme dans la catégorie. Donc, je vais à une catégorie spécifique et puis je passe ID de catégorie parce que je vais utiliser dans ce routeur ou dans ce lien, je vais utiliser un composant qui lit leur ID de catégorie. Et puis il me reviendra la catégorie que je veux. Donc ici, je peux dire plus, bien sûr, nous mettons ceci en guillemets simples parce que c'est de la chaîne. Et je vais combiner avec lui l'ID de point de la catégorie. Donc, je vais lire l'ID, alors ce sera avec ce lien de routeur. Mais nous obtenons toujours une erreur ici. Pourquoi ? Comme nous n'avons pas utilisé le module routeur dans le module produits, vous devez utiliser ce module routeur à l'intérieur du module produit. Alors utilisons-nous ça. Bien sûr, nous reviendrons à ce module de routeur plus en détail lorsque nous définirons les produits sont sortis. Donc, nous avons juste besoin d'appeler le module du routeur comme ça. Et puis nous avons un spécifié notre catégorie, comment il se comportera, exactement ce que nous voulons. Donc, si je clique maintenant sur eux, peut-être que j'aurai des erreurs parce que je ne peux pas aller à cette catégorie parce que nous n'avons pas de route pour cela. Donc, si vous voulez le faire fonctionner, nous devons créer un composant. Et puis nous allons créer la liste de produits basée sur filtré, fonction de ces catégories, comme nous le verrons plus loin dans les prochaines conférences. Donc, comme vous le voyez ici, je clique, je reçois une erreur parce que je ne peux pas accéder à ce composant ou y aller. Donc pour moi, je serai assez là. Je veux juste mentionner que nous pouvons faire un grand comportement ou un comportement plus libre et amical. Que quand je mets la souris, ce sera comme un pointeur. Donc, nous pouvons le faire sur le style de catégorie. Donc, si je clique sur Contrôle, si vous voyez que je clique sur Contrôle, puis cliquez sur la classe et cela me conduira à la classe spécifiée. Donc, je peux dire ici pointeur de curseur. Et puis on économise. Et nous allons à nouveau à notre application dans le front end, vous verrez que nous avons maintenant toute la catégorie est cliquable. Donc, nous pouvons, si je clique ici, ok, je reçois une erreur dans la console parce qu'ils sont sortis n'est pas encore défini. Donc, dans la prochaine conférence, nous verrons comment agrandir cette application. Nous allons aller à la liste des produits et nous allons filtrer par catégorie. Comme vous le verrez plus tard, étape par étape. 145. Article de produit: Ok, on est toujours sur la page d'accueil. Nous allons créer les produits en vedette. Les produits en vedette auront certains produits article. Comment nous l'avons fait exactement dans le backend, si vous vous souvenez, nous avons galant cette API de produits en vedette. Donc, nous ne pouvons avoir que les produits en vedette ici. Si vous vous souvenez, nous signalions chaque produit avec un drapeau qui est appelé est présenté et nous l'avons défini sur true ou false. Et sur la base de cela, nous mettons le produit en vedette au premier plan. Mais tout d'abord, je voudrais styler l'élément de travail ou l'article du produit. Cet article de produit que nous allons utiliser aussi bien dans leur liste de produits que dans d'autres endroits comme des produits suggérés ou par exemple, dans la page d'accueil, ou ailleurs dans la page de produit elle-même. Donc, dans ce cas, nous avons besoin de deux types de composants. abord, le conteneur de tous ces produits article, qui est appelé produits en vedette et l'article produit lui-même. Ainsi, vous pouvez aussi bien faire des produits en vedette et mettre article produit. Mais dans ce cas, l'article du produit ne sera pas réutilisable ailleurs. Donc, tout d'abord, créons deux composants. premier composant sera situé dans la bibliothèque de produits, comme nous l'avons fait avec les catégories, bannière et recherche de produits, nous allons localiser les produits en vedette et l'article du produit afin que nous puissions aussi utiliser la console. Je vais le faire rapidement. Donc, comme vous le voyez ici maintenant, nous avons deux composants. Tout d'abord, il a appelé les produits en vedette, ainsi que l'article du produit. J' ai fait erreur ici que j'ai mis le, par exemple, j'ai gardé quand je générais l'élément, j'utilisais le même outil de génération. J' ai donc confondu ça. J' ai mis j'ai toujours les produits ou le sélecteur est resté produits article. Nous devons donc le faire aussi. Donc, nous devons réparer ça. Alors comment on peut le réparer ? Si vous faites une erreur, vous pouvez simplement revenir au composant et vous pouvez le modifier directement ici. Donc, nous avons le sélecteur, puis je veux des produits et je dirai les produits en vedette aussi. Donc, dans ce cas, rien ne changera, juste ce sélecteur. Donc, quand je veux appeler ce composant, je veux utiliser le sélecteur. Et j'utilise des produits comme préfixe. Parce que si vous savez que nous avons une règle dans ES peluches que nous avons des produits comme attribut comme préfixe. Nous devons donc toujours préfixer nos sélecteurs avec des produits comme le nom de la bibliothèque. Et puis j'ai mis le nom du composant que je veux. Ainsi, nous avons ici l'article produit que nous avons créé précédemment. Donc maintenant, nous pouvons faire le conteneur d'abord, nous pouvons dire par exemple, nous avons div, qui contiennent les produits de fonctionnalité et le titre. Donc, je vais créer ici un div et je vais lui donner une classe qui est appelée produits en vedette. Et aussi, je vais donner un titre qui est vraiment, vraiment comme H3. Et ce h3 aura également des produits en vedette. Et puis j'ai besoin d'une grille parce que nous allons mettre les articles dans la grille, l'article du produit. Nous avons donc besoin d'une grille, exactement comment nous l'avons dans la conception, dans la conception, si vous vous souvenez, nous avons quatre colonnes, donc nous avons besoin de 34 pour chaque article de produit. Donc, si nous allons à nouveau au code, nous pouvons définir un div ou une grille. On peut appeler ça une grille. Et puis à l'intérieur de cette div, nous allons définir les colonnes. Donc, je vais dire div point P colonne, parce que ici j'utilise le système de grille de Prime NG. Et puis je dirai trois. Nous avons 12 colonnes, donc j'ai besoin de quatre colonnes. Dans ce cas, je dois le diviser par trois. Donc 4 multiplié par 3 est 12. Donc, ici, nous aurons quatre colonnes. Et à l'intérieur, nous allons utiliser l'article des produits. Donc, je vais dire ici, produits, article de produit. Donc, nous avons ici ce composant déjà défini. Donc, dans ce cas, je vais enregistrer, tout enregistrer, puis nous allons utiliser le composant de produit de fonctionnalité dans l'application de boutique. Dans la page d'accueil, comme vous vous en souvenez. Donc, nous avons dans la page d'accueil, ce DAG aussi. Nous avons la bannière, nous avons les catégories, et maintenant nous allons utiliser le produit lui-même ou les produits caractéristiques. Alors commençons cette partie et nous disons que nous avons la nouvelle balise qui est définie précédemment. Donc, les produits et ensuite les produits en vedette. Donc, de cette façon, nous avons appelé le composant, qui est appelé produit de fonctionnalité. Et à l'intérieur de ces produits de fonctionnalité, j'appelle l'article de produits. Donc, dans ce cas, je dois avoir dans le produit frontal fonctionne pour le temps. Alors allons-y et vérifions. Ok, Nous avons des articles de produits, des travaux. Nous l'avons à un moment donné parce que nous ne l'appelons qu'une seule fois. Nous n'avons pas ici de boucle for pour chaque produit. Donc, pour l'instant, nous allons créer l'article produit. Et dans la prochaine conférence, nous allons appeler les produits de fonctionnalité et mettre cela en boucle. Donc, vous aurez l'article de tous les produits. Donc, tout d'abord, faisons le style de produits article. Donc, dans l'article du produit, si vous vous souvenez, dans la conception, nous avons sur l'image supérieure, le titre, le prix, puis le bouton, bouton, qui est appelé Ajouter au panier. Donc, nous devons créer un div, div. Et puis je dirais que la classe de cette div sera l'article du produit. Nous devons créer un fichier de style pour cela, comme nous le verrons plus tard. Et à l'intérieur de cette div, je vais avoir quelque chose d'emballage de produit ou d'emballage d'article de produit. Pourquoi j'ai besoin de ça ? Parce que si vous voyez dans la conception, nous avons ici un fond gris. Donc ce sera l'emballage et à l'extérieur de celui-ci, comme si je poussais l'image dehors. Donc, ici, nous aurons aussi l'image. Donc je me demande à Arbor d'être coloré comme ça. Et puis je vais mettre l'image, le texte et le prix à l'intérieur. Et à l'intérieur de l'emballage de l'article du produit, nous allons avoir l'image. Et l'image aura comme une source, qui sera l'image du produit elle-même. Et aussi, nous aurons une classe pour cette image. On l'appelle Image, puis l'alternance. Nous pouvons le garder vide pour l'instant, Tous remplacent le nom du produit à l'intérieur. Et aussi, nous avons besoin d'un titre qui aura aussi un verre, qui sera le nom, le nom du produit, et à l'intérieur il aura le nom du produit. Et nous avons aussi besoin d'avoir un prix. Donc, nous avons ici un prix. Nous le mettons en H5 et à l'intérieur ou leur classe sera prix. Et à l'intérieur, nous aurons le prix du produit. Et à la fin, nous avons besoin d'un bouton. Et ce bouton sera exactement comme nous avons fait le bouton de la bannière. Donc, ce sera le bouton P et la classe de style. Je vais lui donner une classe qui s'appelle Ajouter au panier. Et l'étiquette sera ajoutée au panier, et l'icône sera un panier. Mais ici, nous avons un problème que nous n' appelons pas le module produits ou le module bouton, désolé. Nous devons donc appeler aussi ce module de bouton dans le module ou le module de produits. Parce que si vous vous souvenez que chaque module est totalement séparé, ce qui est ne voit pas les autres composants ou les autres modules qui sont appelés dans l'application ou dans une autre bibliothèque. Donc, nous devons appeler à nouveau le module de bouton, à l'intérieur de cette bibliothèque de produits, Sauvons tout à nouveau afin que nous puissions avoir une sauvegarde et ensuite nous allons à l'application. On ne voit toujours rien parce que, d'accord, c'est vide. Nous avons seulement comme ils sont bouton et ici nous devrions avoir comme un nom, une image, etc. Mais maintenant nous les avons vides parce que nous n'avons pas spécifié cela. Alors ce qu'il peut être ici, ok. Si je passe à nouveau à l'article des produits ou aux produits de fonctionnalité, la fonctionnalité des produits proviendra du backend. Et ici, dans ce cas, je veux passer ces produits à l'article du produit. Et puis l'article du produit sera rendu en fonction de quoi ? Donc inséré à l'intérieur. Donc, nous avons besoin de quelque chose appelé entrée. Et cette entrée peut être définie de cette façon. Si vous vous souvenez, nous utilisions toujours les entrées comme propriétés. Donc, nous spécifions comme une entrée qu'il peut faire quelque chose exactement comme comment nous avons entrée. Par exemple, source de l'image. Donc c'est l'entrée, aussi la classe stylisée est entrée. Ainsi, nous pouvons spécifier l'entrée qui est appelé produit, le produit lui-même. Et puis ici, je vais passer le produit que j'ai à partir du backend ou de la liste des produits, que je l'ai à partir du back-end. Donc, nous verrons cela dans la prochaine conférence. Mais maintenant, je vais définir cet élément ou cette entrée. Alors faisons ça. Nous pouvons tout remettre et aller à l'article du produit. Donc, dans ce cas, je peux voir chaque entrée qui arrive à ce composant et je peux le rendre ici. Nous allons donc au TypeScript de ce composant ou au fichier de classe de ce composant. Et puis nous allons ajouter une entrée. L' entrée est quelque chose que vous pouvez définir dans Angular, et ce sera un élément injectable, donc ce sera comme cette entrée. Et puis vous pouvez définir le nom de l'entrée que vous voulez. Par exemple, je veux un produit. Ce que je vais avoir aussi bien dans le produit ou les produits de fonctionnalité, je vais le passer ici. Je dirai que le produit d'entrée sera le produit qui vient du back-end. Donc ici, j'ai un produit et le type, si vous voulez définir un dipôle. Il serait donc plus facile pour vous d'accéder à cette entrée. Par exemple, je veux accéder à leur prix de nom facilement. Donc, nous pouvons appeler ce produit moderne parce que je passe un produit et l'entrée sera importée à partir du noyau angulaire. Donc, ici, nous avons angulaire ou importé à partir du noyau angulaire. Donc, dans ce cas, nous avons maintenant l'entrée. Maintenant, je suis à l'intérieur de ce composant. Je peux utiliser ce produit à l'intérieur, comme j'ai les produits que j'ai obtenus du backend et je peux l'utiliser ici ou utiliser ses propriétés ici. Donc, tout d'abord, je peux utiliser, par exemple, l'image. Donc, je vais avoir ici l'entrée source, comme vous le voyez ici, c'est l'entrée. Donc, je ne peux pas dire l'image point produit. Donc, nous aurons l'image du produit. Et ici, dans l'Alt, vous pouvez aussi spécifier le nom. Ainsi, vous pouvez aussi bien dépasser le nom du produit. Et aussi ici, vous pouvez spécifier le nom du produit qui sera intitulé dans le nom. Donc, nous avons ici le nom du produit. Et aussi, nous pouvons définir cela un prix. Donc, nous avons ici aussi, produit, quel prix. Et puis vous pouvez également passer ou faire un tuyau qui est, sera une monnaie. Donc, si vous vous souvenez, nous avons mis le prix dans une pipe pour la monnaie pour le styliser et mettre le signe du dollar derrière elle. Alors sauvegardons ça. Nous remarquerons que nous ne verrons rien parce que ce composant n'a pas encore d'entrée. Donc nous n'avons pas de données ici. donc préférable de toujours dire que quand il y a un produit, comme quand cela est défini, il y a que l'intérieur il affiche alors ce composant. Je fais toujours cela pour éviter d'avoir des erreurs. Alors, comment nous pouvons faire cela, vous pouvez juste dire ng-if à l'intérieur de ce ng-si vous dites juste produit. Donc, s'il y a un produit entrant dans ce composant avec nos données, alors cette plaque, sinon, n'affiche rien, donc nous pouvons enregistrer et vérifier à nouveau. Nous verrons que nous n'avons rien parce que nous ne transmettons aucun produit à article de produits futurs. Donc, ce que nous allons faire ensuite, c'est de faire ces produits de fonctionnalité. Nous allons les appeler. Et puis nous allons passer à l'article du produit ou à l'article des produits. Le produit lui-même, qui provient du backend des produits de fonctionnalités. 146. Bannide bannière Bannière de produits plaqués: Si vous vous souvenez dans Postman ou dans le back-end, nous obtenions les produits de fonctionnalités en fonction d'un certain nombre. Comme vous vous en souvenez, nous avons créé l'API dans le back-end, qui dit produit get puis présenté. Ensuite, vous spécifiez le nombre de produits que vous voulez afficher dans le front end ou afficher, ou pour obtenir faire votre front end. Donc, tout d'abord, je veux vous montrer comment je peux appeler cette API. Donc je l'ai mis dans Postman, comme vous vous souvenez, nous avons maintenant trois produits qui sont présentés comme le drapeau de l'Est est vrai tout le chemin. Ainsi, comme nous l'avons toujours fait avec chaque produit ou avec chaque service que nous pouvons appeler les produits de fonctionnalité. Ainsi, nous pouvons appeler les produits de fonctionnalité à l'intérieur du composant, que nous avons créé quatre produits en vedette. Donc, tout d'abord, je dois créer ce service. Donc, tout d'abord, je vais au service produit et ensuite nous créons une nouvelle fonction. Nous pouvons l'appeler obtenir produit en vedette. Et puis ces produits ou cette fonction reviendront pour moi observable. Et ce tableau observable sera un tableau de produits, comme j'obtiendrais plusieurs produits, pas seulement un. Et puis cela reviendra pour moi requête HTTP et ensuite obtenir. Et puis nous pouvons spécifier à nouveau que nous voulons une gamme de produits. Donc je l'aurai ici aussi. Et puis nous pouvons spécifier ce qui est une URL. Ce sera exactement la même chose que vous êtes L ici. Donc, nous pouvons avoir toute cette partie et ensuite nous allons remplacer ce que nous avons dans le backend ou comment nous l'avons dans le back-end. Donc, nous avons ici l'URL, et puis nous disons que nous devons obtenir et puis des produits en vedette. Et puis nous spécifions le compte. Et ce compte, vous pouvez le rendre dynamique. Vous pouvez le passer à la même fonction, sorte que vous pouvez l'utiliser à nouveau ailleurs. Donc je vais dire ici numéro de comptage. Donc, je vais passer le numéro deux quand j'appelle cette fonction. Donc, je vais dire ici que j'ai présenté et ensuite spécifier pour moi le compte. Donc je vais avoir besoin ici compter. Donc, dans ce cas, nous avons appelé cette fonction un compte spécifique des produits, comme j'ai besoin de trois produits en vedette. Et puis il m'appellera cette API. Donc, nous sauvegardons cela et revenons à notre composant de produit de fonctionnalité. Et nous devons appeler le service produit. Donc, nous devons dire ici, le service privé de produits, ou par exemple, le service prod. Vous pouvez spécifier le nom que vous voulez ici en fonction de votre capacité à lire le code. Et puis je dirais le service des produits, qui vient des services, du service des produits. Et puis à la fin vous sur édition, je peux spécifier une méthode qui sera appelée aussi, comme un privé, nous pouvons dire obtenir des produits en vedette. Et puis je spécifie le nombre, comme nous l'avons dit précédemment. Ainsi, vous pouvez spécifier le compte ici ou vous pouvez définir un directement lorsque nous créons cette méthode. Donc, ici, je vais créer cette méthode et je dirai privé et ensuite spécifier la méthode. Et puis je dirai ce service de produit point et puis obtenir des produits en vedette. Et puis cela reviendra pour moi, par exemple, abonné. Mais d'abord, je dois spécifier le nombre de produits de fonctionnalités que je veux. Par exemple, dans mon cas, je veux quatre parce que j'ai quatre produits dans une seule ligne. Et puis nous pouvons dire s'abonner comme quand leur valeur est prête, Donnez-le-moi à l'intérieur d'un produit. Et puis je vais arriver ici et je dois spécifier la variable du produit comme nous le faisons toujours. Donc, j'ai besoin de membre de la classe ici, qui est appelé produits. Vous pouvez l'appeler aussi bien produits futurs, qui sera un type de produit et ensuite il sera tableau. Et à l'intérieur, ce serait un tableau vide. Donc, ces produits seront remplis. Nous allons l'utiliser dans le modèle et ensuite comment il sera rempli par, nous pouvons dire dans ce point, produit est égal aux produits qui vient de souscrire. Si vous êtes confus, vous pouvez renommer cela, vous pouvez l'appeler aussi bien produits en vedette. Renommons comme ça pour ne pas être confus. Nous avons donc des produits à venir. Et puis cela, ces produits de fonctionnalité sont des produits qui proviennent de cette API ou de cet appel. Et puis nous allons utiliser ces produits de fonctionnalité dans le front end. Donc, je dois aller au modèle et puis je vais dire dans les produits de fonctionnalité, apporter pour moi chaque colonne un produit et le passer à un article de produit. Donc, ici, je vais dire MD4 et puis laisser le produit, comme un produit de produits en vedette, comme je vais passer par tous les produits qui viennent à travers cette fonctionnalité produits. Et puis je dirai passe pour moi. Si vous vous souvenez de la conférence précédente, nous avons créé une entrée qui s'appelle produit. Et puis je vais passer ce produit à cette entrée ou à ce composant. Donc, dans ce cas, ce composant recevra ce produit à chaque fois, et cela serait exécuté quatre fois parce que nous avons quatre produits provenant du back-end. Et puis il sera rendu de cette façon. Donc, je vais aller à leur composant. Et ici, le modèle sera rendu exactement comment nous avons reçu le produit. Donc, en fait, nous aurons quatre composants sont appelés ici parce que nous avons des produits de prédicateur pour les produits. Alors sauvegardons tout et vérifions si tout fonctionne bien. Je clique sur Enregistrer tout. Et puis nous allons à l'avant et nous verrons, ok, super, nous avons tous ces produits, mais ce n'est pas stylé et nous allons styler chaque produit dans la prochaine conférence, comme nous vous verrons plus tard. Mais tout d'abord, rappelez-vous que de faire toujours la finition de l'abonnement sous-capulaire. Donc, ici, nous avons un abonnement. Et comme vous vous souvenez que lorsque je pars avec ce composant, je dois terminer l'abonnement. Sinon, j'aurai une fuite de mémoire à l'avenir. Donc, pour ce faire, nous devons aller et faire exactement ce que nous avons fait avec chaque abonnement précédemment, ce que j'en ai parlé plusieurs fois. Donc je vais faire ça vite. 147. Styler de produits: Ok, ici, j'ai stylé l'article du produit. Je vais vous montrer le style rapidement, comme le CSS, parce que je vous ai dit que nous nous concentrons ici dans Angular. Donc, la partie de style pour nous est comme une partie secondaire. Donc, je peux l'expliquer rapidement si vous avez déjà de l'expérience avec CSS. Donc, notre cours ici se concentre juste sur Angular et comment nous pouvons structurer notre projet de la bonne manière. Mais bien sûr, je peux vous montrer rapidement le CSS de ne pas faire l'embarquement du cours et plus longtemps. Donc, je peux partager avec vous le code directement du CSS. Donc, tout d'abord, j'ai ici un composant de produit ou un fichier de style, que j'ai créé dans notre dossier de style public, comme nous l'avions convenu précédemment, que nous avons le style public dans les bibliothèques. Et cette bibliothèque est que chaque bibliothèque avait son propre style public pour chaque composant qui est à l'intérieur de cette bibliothèque. Donc, ici, nous avons l'article produit que j'ai créé. Et comme vous vous en souvenez dans le modèle d'article du produit, si vous revenez à l'article du produit à nouveau, nous avons ici l'article puis l'emballage de l'article du produit, et à l'intérieur, j'ai l'image, puis le nom , le prix, et ainsi de suite. Donc, je vais à nouveau au style, donc je vais vous montrer que j'ai l'emballage. Je lui donne une couleur de fond pour donner ce fond gris ici. Et aussi je donne une frontière parce que si vous remarquez, nous avons un peu de frontière ici. Et aussi, j'ai donné un flex d'affichage border-rayon parce que je veux aligner ces éléments au centre les uns sous les autres. Nous avons donc un flex, tous centrés, justifiant leur contenu aussi. Centre, comme être tous au centre, au milieu de la boîte. Et comme va fléchir direction est colonne comme je ne veux pas qu'ils soient proches les uns des autres, mais je les veux de haut en bas colonnes. Donc, comme vous le voyez ici, nous avons aussi une hauteur minimale pour leur donner tous la même hauteur, comme cette boîte aura toutes la même hauteur. Et puis marge supérieure, je pousse un peu le code, ou ce composant du haut, un peu, environ 85 pixels. Ok, l'image elle-même, nous l'avons comme une largeur. Ici. Nous avons environ 60% de leur tige parce que c'est à l'intérieur de l'emballage. Donc, nous n'aurons pas toute la largeur de l'image, mais nous avons 60 pour cent de leur partie supérieure ici. Donc, ce sera comme ça et au milieu parce que nous avons spécifié ici justify-content center et le haut de la marge est moins 85. Pourquoi j'ai fait ça ? Parce que je veux le sortir de l'emballage. Donc, je lui ai donné un haut de marge, comme le haut de la marge de l'image, le pousser hors du sous-pixel 85 plus mûr. Le nom que je lui ai donné un peu comme marge, haut et bas. Donc, il sera 10 pixel pour être loin du bit de l'éditeur d'image et loin du prix ainsi. Et ils ont ensuite le prix. Je lui ai donné une couleur primaire, que notre variable de couleur primaire que nous avons définie précédemment, certaine taille de police et comme nous allons marge 0 parce qu'il vient initialement ce H1 ou h5, initialement avec quelques marges. Alors je les fais 0. Et la fin, j'ai le bouton, comme vous le voyez ici, je le remplace par le bouton avec le fichier de style ou que la classe de style que nous avons ici, classe de style du bouton et j'ai Ajouter au panier. Donc, nous le remplacons. Et puis nous sommes allés ici et nous avons donné comme le style. Je suis allé au style et j'ai donné la couleur de fond sera la couleur primaire. C' est comme si je l'écrase la couleur, puis la bordure et lui donne 0. Je ne veux pas de bordure et je lui donne plus de rayon de bordure en fonction de la conception, comment je l'ai. Et puis j'ai exporté ou importé ce fichier dans les produits SCSS. Et puis ce fichier produit SCSS, qui contiennent tous les styles, je l' ai importé dans et vous magasinez, que nous l'avons déjà importé dans l'importation pour les lèvres. Et puis nous verrons que le style ressemblera à ceci. Donc, le style est assez simple. On n'a pas à rendre ça compliqué. Nous suivons la conception telle qu'elle est. Et puis nous ferons le bouton Ajouter au panier lorsque nous allons travailler avec le panier. 148. Styler de produits: Bonjour et bienvenue. Maintenant, dans cette section, nous allons créer le composant de liste des produits ou la page des produits. Donc, quand l'utilisateur, quand il est sur la page d'accueil et qu'il va aux produits, il verra cette liste de produits. Et comme vous le voyez, nous utilisons certains composants que nous avons créés précédemment. Nous avons utilisé celui que nous avons créé pour les futurs produits, qui est appelé article produit, et nous allons l'utiliser dans la liste des produits. De plus, nous allons faire un peu de filtrage pour les produits. Si vous vous souvenez, nous avons des catégories et ces catégories que nous pouvons sélectionner la catégorie que je veux afficher. Et dans ce cas, mes produits vont être filtrés. Alors commençons à faire ça. Comme vous le voyez, nous avons deux colonnes, une colonne pour les catégories, et une colonne sera pour la liste des produits. Et à l'intérieur de la liste des produits, il y a trois colonnes. Faisons ça et commençons par cette liste. Et nous allons d'abord présenter tous les produits que nous avons dans la boutique. Et nous passerons ensuite au filtrage par catégories. 149. Réutiliser des composants de page de produits: D' accord, comme vous vous en souvenez, nous avons créé le lien qui fait référence à la liste des produits. Et cette liste de produits se trouve à l'intérieur de notre application. Nous avons ici dans les sources, nous avons quelques pages et ces pages, notre page d'accueil et nous avons créé une liste de produits. Mais sur la base de la nouvelle architecture que j'ai suggérée que nous allons construire plusieurs emplois, alors nous devons déplacer cette liste de produits vers la bibliothèque de produits. Donc, nous ne allons pas l'utiliser seulement pour cela et vous magasinez, peut-être que je vais avoir ND shop aussi. Donc, je vais utiliser à nouveau le composant de liste de produits. Donc, dans ce cas, j'aurai l'application dans mon code. Il est préférable de déplacer leur liste de produits vers la bibliothèque de produits, comme nous le voyons ici, que nous avons une bibliothèque de produits et que nous localisons tous les composants partagés ici. Donc, nous pouvons aussi bien créer ici un plus froid qui est appelé pages. Et à l'intérieur de ce dossier Pages, nous allons mettre la page de liste des produits. Supprimons donc d'abord ce composant. Je vais m'en débarrasser. Donc, nous avons maintenant supprimé le composant et n'oubliez pas de le supprimer également du module d'application où nous aurons appelé ce composant. Nous supprimons donc toujours les composants du module connexe. Donc nous l'enlevons. Et aussi, nous allons supprimer ce chemin. Et nous allons utiliser ces tampons enfants comme nous l'avons fait avec la page de connexion. Alors supprimons cela aussi. Et nous allons supprimer l'importation parce qu'elle n'existe plus. Alors maintenant, nous sommes propres et prêts à commencer à travailler. Donc, d'abord, générons un nouveau composant qui sera situé dans leur bibliothèque de produits. Donc d'abord, je vais chercher le composant. Et puis ce composant sera situé dans un dossier qui est appelé pages. Et à l'intérieur de ces pages, j'appellerai, par exemple, la liste des produits. Donc, je dirais la liste des produits, désolé, liste. Et puis je vais mettre à l'intérieur du projet ou de la bibliothèque qui s'appelle produits. Et nous allons, tout d'abord, exporter parce que nous allons l'utiliser également dans l'application. Ou puis nous allons avoir un style en ligne pour ne pas avoir comme CSS imbedded. Donc, nous devons aussi sauter ces tests comme nous l'avons toujours fait. Donc nous avons ici sauter ça, ceci et le sélecteur l'est aussi. Nous allons utiliser ou choisir la sélective en fonction de nos règles en Islande, et nous l'appelons directement liste de produits. Donc, dans ce cas, nous pouvons exécuter cette commande et aller à notre bibliothèque de composants ou à la bibliothèque qui est la bibliothèque de produits. Et nous verrons que les pages ont été créées ici, qui est la liste des produits. Maintenant, si vous savez que si je vais ici, j'aurai une erreur dans la console parce que je ne peux pas cela ou voir cette route plus. Alors, comment pouvons-nous résoudre ça ? Si vous vous souvenez, nous avons fait la même chose exactement avec le login. Si vous vous en souvenez, nous avons le composant de connexion. Et dans le module de l'utilisateur, je faisais référence à cette page de connexion et utiliser des routes pour enfant comme nous l'avons fait exactement avec la connexion. Alors faisons la même chose avec le produit. Donc, tout d'abord, je dois être sûr que j'importe le module de produit, qui sera dans le module d'application dans le magasin de moteur. Donc, nous devons vérifier ça, ok, nous n'avons pas les produits, nous l'avons ici. Nous avons un module de produits. Maintenant, dans le module produits, je vais créer des itinéraires. Ok, passons au module Produits. Et dans le module produits, nous allons créer une constante, encore une fois, comme nous l'avons fait auparavant. On appelle ça des routes. Et ces routes auront un type de routes. Et puis ces routes auront la valeur de tableau. Et chaque tableau ou chaque membre de ce tableau sera un objet. Et le premier objet que nous allons avoir est le chemin qu'on appelle les produits. Donc, quand j'appelle ce module, et puis je vais dans ma page deux produits, alors ici, il sera redirigé parce que j'appelle ce module dans le module d'application. Donc, toutes les routes qui sont ajoutées ici seront également définies dans l'application. Alors faisons ça. Nous avons ici des produits et nous allons avoir la cartographie comme un enfant si vous voulez ou vous pouvez faire le chemin est comme exactement comment vous voulez ici. Ainsi, par exemple, vous pouvez dire composant, puis vous pouvez importer le composant de liste de produits. Alors gardons ça comme ça pour l'instant. Et je vais utiliser les enfants plus tard quand nous allons avoir les catégories page Garth et vérifier, et cetera. Donc, tout d'abord, faisons comme ça. Donc, quand je vais aux produits, je dois voir cet appât ou élément de liste de produits que j'ai créé, mais dans la bibliothèque de produits. Donc, tout d'abord, nous devons aussi utiliser cette route, comment nous allons l'utiliser. Donc, si vous vous souvenez, nous appelons un module de routeur, mais tout au long de notre module est utilisé purement ici, mais nous devons lui donner une propriété qui est appelée pour enfant, et cet enfant aura accepté les routes. Donc, dans ce cas, je dis que ce module de produits est enfant du module d'application et il peut l'utiliser routes. Donc, quand je vais maintenant à mon application et que je clique sur les produits, ok, j'ai le travail de liste de produits qui se trouve dans leur bibliothèque de produits. Donc, dans ma demande, je n'ai qu'une seule route, qui est, par exemple, la page d'accueil. Et là, mon module de produits, j'ai leur route pour les produits. Donc, tous les produits de la liste. Donc, ici, nous avons des produits. Nous allons à cette route produits. Et puis je verrai que je suis vraiment dirigé vers le composant de liste de produits. Alors maintenant, composez ce composant et faites-le fonctionner. Donc, nous aurons sur la droite, comme la liste des produits, et sur la gauche nous aurons la liste des catégories. Nous devons donc appeler aux services, catégories et produits. Et tous les deux, nous les avons déjà fait. Allons donc ici et définissons nos composants. Donc, tout d'abord, je vais utiliser cette grille pour que nous puissions tout envelopper dans un div et lui donner un nom. Nous pouvons dire la liste des produits ou la page des produits. Donc on peut, c'est à toi de décider et on peut le donner comme ça. Et puis nous allons avoir la div, qui est appelée grille B pour avoir comme une rangée de grilles. Et puis nous allons avoir deux colonnes. Donc on aura trois colonnes. Donc, nous avons ici P, appelez trois, qui contiendra les catégories. Donc, nous pouvons dire ici catégories. Et aussi, nous allons avoir un autre div pour l'article produit lui-même. Donc, nous avons ici div et P appel à ce serait le reste. 12 moins trois sera neuf. Nous allons donc mettre les produits ici. Donc, sauvegardons pour être sûrs que tout fonctionne. Donc, je vais ici à mon application parfaite, j'ai ici catégorie et j'ai ici les produits. Commençons donc par les produits. Si vous vous en souvenez, nous avons créé dans nos produits quelque chose comme un composant qui est appelé article produit. Et ce produit, nous l'appelons partout, par exemple, dans les produits en vedette. Donc, je vais utiliser la même chose. Donc nous pouvons faire exactement la même chose que nous avons fait. Donc, nous avons ici comme article de produit, mais d'abord, nous allons le diviser. Donc, nous avons à l'intérieur de cette div, nous aurons une autre grille. Donc, la grille de points div ou la grille de p. Et à l'intérieur de ce grade B, nous allons avoir plusieurs colonnes. Donc paire rangée, ce sera trois. Donc, je vais demander à P. Donc à l'intérieur de cela, donc nous aurons trois colonnes. 12 divisé par 4 sera trois colonnes. Donc, nous allons ici pour utiliser notre article produit. Donc, nous avons ici l'article du produit. Mais d'abord, nous devons passer pour cela, les produits. Nous devons donc appeler à nouveau le service de produit, pas le produit de fonctionnalité, mais nous allons utiliser le service de produit, tout cela. Et puis nous pouvons être en mesure de boucler les produits et d'obtenir des produits. Et ici, il sera répété plusieurs fois et il va lister mon produit. Alors faisons ça. Donc, je vais ici et appelle mon service de produits. Donc, je dirais ici, service privé de produits. Et ici, nous aurons à nouveau un service de produits. Et nous allons définir un membre de la classe qui s'appelle les produits. Donc, il contiendra mon ancien produit, ce sera type de produit et il sera tableau, et au début il sera vide. Donc, ici, nous allons avoir la méthode qui est appelée, nous pouvons dire obtenir des produits et nous allons mettre en œuvre cette méthode. Donc d'abord, je vais avoir ici en tant que produits privés de bons. Et cela obtient les produits utiliseront le service produit. Donc, je vais dire ce service de produit point, point obtenir des produits. Nous avons déjà défini cette méthode lorsque nous avons créé l'application Admin. Donc on peut l'utiliser à nouveau ici. Donc, je vais avoir ici souscrire. Et puis après l'abonnement, j'obtiendrais les produits. eux-mêmes à partir du backend. Et puis ces produits, je vais les affecter aux produits ou au membre de la classe que j'ai défini précédemment. Donc, je peux l'atteindre en disant ce produit et ensuite utiliser les produits de réponse afin que je puisse donner un nom comme des produits à risque juste pour vous de ne pas être confondu entre les noms. Donc, nous allons assigner cela à ce tableau. Donc, après cela, nous allons au modèle. Et puis dans le modèle, nous dirons MD4. C' est exactement comme ça qu'on a fait les choses avant. Nous l'expliquions en détail. Donc, nous disons laisser le produit hors produits, que j'ai définis dans mon application ou en tant que membre de la classe, puis boucle dessus et afficher pour moi l'article du produit. Alors sauvegardons cela et allons à l'application. Et nous allons voir que nous n'avons rien parce que je pense que je n'ai pas enregistré le modèle ou non, peut-être que je n'ai pas attribué le produit. Donc, j'ai ici entrée de produit comme vous le voyez. Et puis j'ai besoin d'assigner leur produit, que j'ai obtenu de la boucle for. Donc ici, j'ai produit, et puis je vais attribuer ces produits ici. Donc, quand nous allons à nouveau à l'application et nous verrons que nous avons répertorié tous nos produits et en utilisant l'article produit que nous avons créé précédemment. Pour éviter parfois l'erreur peut être les produits ne vont pas être prêts. Il est donc préférable de ne pas les afficher jusqu'à ce que les produits soient vraiment prêts. Donc, nous devons dire ici, ng-if produits. Donc, s'il y a des produits prêts, alors cette grille sera créée. Ensuite, nous allons faire une boucle sur les produits pour chaque article, comme nous le voyons ici. Maintenant, nous avons toute notre liste de produits prêt, nous allons créer maintenant les catégories. Donc les catégories seront exactement les mêmes. Je vais appeler le service de catégorie. Donc je dirais ici privé. Et puis je dirai catégorie service. Et puis le service de catégorie sera appelé. Et ici, nous allons dire aussi, ceci cependant, GetCategories. Donc, nous n'allons pas obtenir seulement des produits, nous allons aussi obtenir des catégories. Donc, ici, nous appelons cette méthode. Nous allons créer à nouveau cette méthode. Donc, nous avons ici getCategories privées, puis getCategories. Et les GetCategories, nous allons utiliser un service Gatt et ce service de catégorie. Il a été retourné pour moi toutes les catégories. Et puis nous nous abonnons. Ensuite, nous allons avoir les catégories de réponses. Par exemple, une réponse obtient. Et puis nous allons définir une variable ou un membre de classe. Nous l'appelons catégories. Il aura une catégorie de type et il sera un tableau aussi bien initialisé qu'un tableau vide. Ensuite, nous allons assigner ces catégories de variables à nos catégories de réponses. Donc, nous avons ici la réponse obtient. Donc, après cela, nous allons l'utiliser dans le front end. Si vous vous en souvenez, nous avons la colonne quatre catégories. Donc, je vais ici pour avoir, par exemple, H4, et je vais dire ici catégories. Vous pouvez donc lui donner un titre en haut. Et puis je vais utiliser l'extrémité principale de la case à cocher. Comme vous le voyez ici, nous avons le composant NG premier, qui utilise comme une case à cocher. Nous pouvons donc nous en servir aussi. Alors utilisons ce basique comme celui-ci. Donc, tout d'abord, nous pouvons copier cette partie dans les sources. Nous pouvons avoir ici un div, et cela aura un champ, et il aura l'ID d'entrée de modèle NG. Et je verrai comment nous pouvons le préparer. Nous allons donc avoir ici sur le terrain même. Mais P checkbox n'est pas important parce que nous avons besoin d' importer le module checkbox dans notre module produits, pas dans le module application parce que nous avons ce composant à l'intérieur du module produits. Alors importons cela aussi. À la fin de leurs importations, je vais dire comme module de case à cocher. Et ce module de case à cocher avec viennent de Prime NG case à cocher. Donc, nous pouvons aussi bien importé ici, Importer et dire module case à cocher de prime et g slash case à cocher. Donc, nous avons maintenant ce module de case à cocher. Et si nous allons à l'application, nous verrons que nous n'avons plus l'erreur ici. Donc maintenant, nous allons utiliser cette case à cocher et nous allons faire une boucle sur les catégories. Donc encore une fois, nous devons avoir ici NG quatre, je dirai n 24 et cette catégorie de plomb MD4. Je vais donc parcourir toutes les catégories. Je dirais donc que les catégories de catégories que j'ai définies précédemment. Donc, d'abord, je dirai que cette case à cocher aura, sera binaire, comme vrai ou faux. Et ce sera, ou l'ID sera, nous pouvons le mettre en entrée. Donc, nous pouvons mettre ici l'ID de point de catégorie. Donc, je vais avoir, l'entrée aura cet ID, et ensuite nous pouvons donner comme une étiquette non vérifiée, mais nous pouvons donner le nom de point de catégorie par exemple. Donc, dans ce cas, nous aurons ce nom de point de catégorie affiché comme une case à cocher. Et ici pour, c'était là pour binaire. Nous devons donc le changer en ID de catégorie. Donc, dans ce cas, nous aurons ici PAS d'ID d'entrée comme c'était avant binaire. Ce sera l'ID de catégorie. Donc, les quatre, donc lorsque vous cliquez sur l'étiquette, il sera coché ou décoché la case à cocher. Donc ici, nous devons dire aussi, donnez-moi l'ID de catégorie. Donc, après avoir sauvegardé cela, nous allons à l'application et nous verrons si nous avons tout beau. Nous avons maintenant les catégories répertoriées en tant que cases à cocher. Donc, de cette façon, nous allons créer notre filtre, que nous verrons dans la prochaine conférence. 150. Filtrer des produits par catégorie: Ok, maintenant dans cette conférence, nous allons filtrer par catégorie. Donc, si je vais à ma démo que j'ai déjà préparée, je veux vous montrer comment je vais filtrer, comme vous le voyez ici, quand je clique sur Plus, alors que je ne vois que mobile, mais quand je clique aussi bien sur la beauté, alors je vais avoir une beauté et mobile ensemble. Donc, dans ce cas, nous avons besoin de quelque chose comme combiner toutes ces catégories ID, et les envoyer au back-end. Et le backend répondra avec moi avec ces identifiants de catégories pour ces produits. Donc, en revenant à notre application, nous allons d'abord mettre en œuvre quelque chose. Lorsque je clique sur cette case à cocher, quelque chose se produira. Alors faisons ça. Donc, tout d'abord, nous allons au modèle et nous verrons que nous avons ici case à cocher et nous avons ici une erreur. Ceci est le modèle NG n'est pas la propriété connue de la case à cocher pic. Pourquoi ? Parce que nous avons besoin d'importer aussi bien des formulaires Module, module forums y compris le, bien sûr le modèle NG. Donc, nous avons ici le module de formulaires. Et dans ce cas, l'erreur disparaîtra. Ok, maintenant nous avons déjà ce bien. Donc, ce qu'on va faire, c'est sur le changement. Donc, quand cette case à cocher change, il indique, alors nous allons filtrer. Donc, je vais avoir ici une méthode qui s'appelle onchange. Et il vient en tant que propriété ou propriété de sortie de cette case à cocher. Alors posons ça. On n'a plus besoin de ça pour avoir plus d'espace. Et maintenant, je vais dire onchange, ok, filtre de catégorie. Donc, nous avons ici filtre catégorie. Et je vais définir cette méthode. Alors passons au fichier TypeScript. Et nous aurons ici la méthode publique ou directement, qui est appelé filtre de catégorie. Et maintenant, nous devons consigner comme quelque chose. Par exemple, par exemple, le filtre de catégorie console.log. Pour être sûr que tout fonctionne bien. Donc, j'ai ici filtre catégorie. Je vais à mon application, ouvrez à nouveau la console et vérifiez si nous sommes parfaits. Nous avons donc un filtre de catégorie. Comme vous le voyez après avoir ajouté le modèle NG, nous voyons que tous sont vérifiés. Un, j'ai un chèque. C' est parce que j'ai défini une variable pour n'importe quel modèle. Donc, lorsque cette variable est vraie, toutes vont passer, comme toutes ces cases à cocher qui sont générées dans cette boucle MD4 suivent cette variable. Donc nous avons besoin de quelque chose de séparé. Nous devons le spécifier pour chaque catégorie. Donc, pour cela, j'ai besoin de créer pour chaque catégorie un champ qui est appelé vérifié. Donc, si ce champ est coché ou non. Donc, nous pouvons le faire aussi bien lorsque nous allons au modèle de catégorie ou quand je dis, par exemple, point de catégorie vérifié. Mais je vais obtenir une erreur ici car il n'y a pas de champ dans la catégorie appelée check, donc nous devons ajouter cela. Mais dans ce cas, je vois que ces vérifiés seront pour chaque catégorie vrai ou faux. Donc, pour l'expliquer plus, faisons ça. Donc, tout d'abord, je vais définir cette vérification. Je vais passer aux modèles que nous avons définis précédemment. Donc, nous avons ici la catégorie et dans cette catégorie je vais avoir vérifié. Et il sera facultatif avec une valeur booléenne. Donc, quand nous irons ici, nous n'aurons plus cette erreur. Et puis sur le pied de page de la catégorie, je vais montrer les catégories. Donc, en général, Donc, je vais dire ici, consoles enregistrer cette troisième catégories. Donc, nous avons ici à cette catégorie de charge. Donc, je ne veux pas juste voir que toutes les catégories à chaque clic de la case à cocher que j'ai ici. Alors fermons ça aussi. Et maintenant, quand je clique sur check, je vois qu'ils sont tous vérifiés parce que je n'ai pas enregistré. J' oublie toujours d'économiser. Donc, nous revenons à l'application, elle est rechargée. Donc, quand je clique sur mobile, par exemple, j'irai ici à ce journal de console et je vais vérifier plus et l'ouvrir. Et je verrai vérifié. C'est très bien. Mais ici, si je vais à cette catégorie qui s'appelle la beauté, je n'ai pas totalement ce champ vérifié. Et maintenant, supprimons tout, fermons cette partie ou supprimez la console et décochez le mobile. Donc, quand je vérifie qu'ils veulent alors et puis aller ici, je vais voir vérifié est faux et les autres sont, n'a rien. Donc, de cette façon, je ne peux pas dire que je ou je peux filtrer en fonction de la liste ou des catégories vérifiées. Et puis je peux obtenir leurs idées et ensuite envoyer au back-end pour obtenir les produits filtrés. On doit traduire ce chien. Donc, tout d'abord, j'ai besoin d'obtenir seulement les catégories filtrées ou sélectionnées. Comment je peux faire ça. Je vais donc filtrer la catégorie. Nous allons ici, je vais appeler à nouveau qui obtenir des produits, mais avec quelques filtres. Donc, avec des idées de catégories que je veux passer au back-end. Mais avant cela, faisons, par exemple, une liste d'ID de catégories sélectionnées. Donc, nous pouvons avoir la liste des catégories ID. Donc, sur le filtre de catégorie, je vais avoir une constante. Par exemple, je l'appelle catégories sélectionnées, par exemple. Et dans ces catégories sélectionnées, ce seront ces catégories de points. Donc, vous ne remarquez pas chaque clic lorsque je clique sur le filtre Catégorie, cela sera exécuté. Donc, les catégories sélectionnées, je vais filtrer, filtrer les catégories. Donc, comment je vais filtrer ceci est le tableau de filtrage ou nous allons filtrer le tableau. Donc, dans ce cas, il va filtrer et retourner pour moi seulement les catégories qui sont vérifiées, qui a senti champ vérifié à travers. Alors, comment peut-on faire ça ? Donc, je vais dire ici filtre et ce filtre, il reviendra pour moi ou je peux obtenir de cette catégorie, Catégorie un par un. Et avec la méthode flèche directement, je dirai retour pour moi catégorie, qui est vérifiée. Donc, quand ils sont catégorie est cochée, puis retournez-le, puis mettez-le dans les catégories sélectionnées. Donc, après cela, nous allons consigner les catégories sélectionnées pour voir si nous obtenons vraiment seulement les catégories sélectionnées. Alors on y va, journal de la console. J' aime utiliser le journal de la console. Aussi, je peux utiliser un débogueur, mais j'aime le journal de la console parce que je ne peux pas voir les résultats en direct devant moi. Donc, si vous voulez, alors vous pouvez utiliser le débogueur aussi. Donc, mais maintenant nous avons ici les catégories sélectionnées. Je vais maintenant cliquer sur mobile. D' accord ? Je n'ai que le mobile. C'est très génial. Alors nettoyons à nouveau, cliquez sur la beauté et les ordinateurs. Je vais faire vérifier trois éléments. Mais je n'ai pas toutes les catégories, ce qui est si bon. Et si vous vérifiez ici, vous verrez tous vérifiés. Et chaque fois que je clique sur le chèque, j'ai réduit à nouveau les catégories. Donc ils sont maintenant deux. Je n'ai que les téléphones portables et les ordinateurs vérifiés. C' est très bien. Donc maintenant, nous avons besoin non seulement des catégories sélectionnées que vous voyez ici, je reviens toutes les catégories. Je veux retourner seulement l'ID. Donc, dans ce cas, nous avons ici, le filtre revient pour moi tableau. Donc, comme vous le voyez, nous retournons tableau ici. Donc, je peux mapper à travers ce tableau et le donner à nouveau comme une nouvelle forme. Donc, je vais dire comme à nouveau catégorie, mais pas la catégorie elle-même ou retourné pour moi, mais retourner pour moi seulement la catégorie et l'ID. Donc, dans ce cas, je n'obtiendrais que les ID de catégories dans les catégories sélectionnées. Essayons encore une fois. Alors j'irai ici, mobile. Donc j'ai cette idée d'ordinateurs mobiles, d' accord, j'ai deux pièces d'identité. House, gentil, j'ai trois pièces d'identité. Donc, dans ce cas, nous sélectionnons ou collectons les idées des catégories sélectionnées. Maintenant, nous devons les transmettre à l'API et rendre les produits qui sont assignés à ces catégories. Et si nous allons au facteur, si vous vous souvenez, nous passions au backend les catégories en tant que paramètres de requête. Donc, quand j'envoie une demande avec pour obtenir leurs produits étaient et quand cette demande a des idées de catégories ou de catégories, alors il va filtrer pour moi en fonction des ID qui sont passés dans cette demande. Pour que nous puissions le faire facilement. Donc, je peux avoir ici en homme, les catégories ou nous pouvons avoir leur clé, qui s'appelle les catégories. Si vous vous en souvenez, nous l'avons créé. Et les valeurs seront les catégories séparées par des virgules. Nous pouvons donc avoir ces catégories aussi. Donc nous pouvons aller ici, par exemple, nous pouvons prendre le premier et aller à nouveau chez le Facteur. Et nous pouvons passer, par exemple, nous allons en prendre un maintenant. J' aurai donc les produits, pas tous. Je n'aurai que les produits qui ont cette catégorie. Donc quand je clique, je vais obtenir, goodie des téléphones. Donc, je vais avoir des produits ou deux produits qui sont téléphones exactement comment nous l'avons dans le front end dans la démo. Donc, si je passe une autre catégorie, comme par exemple, si je mets une virgule et puis nous allons obtenir la catégorie d'une autre. Donc, nous pouvons revenir ici à Postman et ensuite passer avec une virgule, une autre catégorie. Ensuite, je vais obtenir deux ou plusieurs produits parfaits basés sur des catégories sélectionnées. Donc, dans ce cas, nous devons ajuster notre service produit pour obtenir aussi ou passé les catégories à travers elle au backend. Alors, comment nous pouvons faire ça à l'avant. Donc, après le filtrage ou le filtre de catégorie, j'ai besoin de récupérer les produits à nouveau. Je veux appeler cela à nouveau, puis je vais mettre à jour le produit lui-même. Alors, comment peut-on faire ça ? Tout d'abord, supprimons ce journal de console. Et puis je dirai ici que l'appel pour moi ce produit point ou obtenir des produits, mais avec des catégories filtre ou catégories sélectionnées. Donc, ici, nous avons déjà un tableau de catégories sélectionnées, tableau d'ID, et nous allons le passer ici. J' ai donc besoin d'ajouter aussi bien à ce paramètre de méthode, qui seront des catégories, par exemple, catégories sélectionnées, ou nous pouvons l'appeler catégorie est filtre. Donc, nous pouvons avoir ici des catégories. Filtre. Et cette catégorie est filtre aura, par exemple, optionnel et il sera chaîne, tableau de chaînes parce que nous avons filtré nos catégories et nous retournons seulement l'ID, comme vous vous souvenez. Donc maintenant, nous avons le filtre des catégories. Nous devons maintenant le transmettre à notre service de produits. Donc, nous devons aller pour obtenir des produits, puis à ce filtre, puis l'envoyer au backend. Par conséquent, le filtre de catégories n'est pas défini dans cette méthode. Donc, nous devons aller à cette méthode dans notre service de produits et ajusté pour accepter également obtenir le filtre goodies. Et ce filtre de catégories sera un tableau de chaînes. Donc, nous pouvons avoir aussi l'option de ne pas détruire les bons produits que nous avons créés dans l'application du panneau d'administration. Donc, ici, nous l'avons optionnel. Donc, quand vous passez certaines catégories, alors, ok, ça vous donnera les produits filtrés. Mais si vous ne passez rien, alors il vous donnera le produit entier. Donc, le type de ce champ sera string, et ce serait un tableau de chaîne. Donc maintenant, nous allons passer cette requête HTTP. Comment peut-on faire ça ? Tout d'abord, nous devons définir, par exemple, une variable qui est appelée params. Ici, j'utilise le lead, pas const parce que je vais le changer dans les prochaines lignes de leur code. Donc, ce sera un nouveau HTTP ou HTTPS minuscule params. Donc, ce sont des bombes provenant d'Angular et celles que vous pouvez les appeler à partir d'une bibliothèque de noyau angulaire ou d'une bibliothèque HTTP. Donc, ces paramètres, nous allons les passer à leur demande, exactement comment nous avons fait avec Postman, comment je suis en bus ici, params de requête. Et dans le front end, comment nous pouvons passer cela, nous utilisons des paramètres HTTP. Ok, ici nous avons les paumes sont séparées par des virgules. Nous devons donc faire la même chose. Donc, vérifions s'il y a des catégories filtre. Donc, nous pouvons dire si les catégories filtrent comme nous avons les catégories filtre passé à ne pas détruire aussi bien que je vous ai dit l'application du panneau d'administration. Ensuite, je dirai que les params seront params dot la bande. Ici, vous devez ajouter un paramètre qui est appelé catégories. Exactement comme on a fait avec un facteur. Donc, ici, nous avons des catégories. Et puis ces catégories seront quoi ? Ils seront des catégories filtre, que j'ai obtenu à partir de l'extrémité frontale ou de l'utilisateur, ou à partir des cases à cocher. Il contiendra l'ID des catégories, mais c'est un tableau. Donc, nous devons joindre ce tableau pour être un, comme par exemple, comme ceci, pour être ID ou ID de catégorie virgule autre, virgule un autre. Donc c'est très simple. Vous pouvez joindre un tableau de chaînes en disant cette jointure de points de tableau. Ensuite, vous pouvez spécifier ce que vous voulez joindre en fonction de virgule, basé sur un point ou basé sur un devis. Donc vous avez juste à dire virgule. Donc, dans ce cas, ces catégories auront la forme de ceci. Donc, nous sauvegardons cela et nous économisons aussi ici. Alors vérifions si nous faisons vraiment de bonnes choses. Donc, je veux, par exemple, que la console consigne les paramètres. Donc, nous pouvons avoir ici le journal de points de console, et ensuite nous pouvons passer les paramètres. Donc, et maintenant je vais à la case à cocher de l'application, une catégorie, ok, j'ai ici mettre à jour un param de tableau, et nous avons un modèle. Donc, si vous allez à l'encodeur de rencontre ici, nous avons le param est déjà défini. Donc encore une fois, si je clique, j'obtiendrai aussi le patch HTTP. Sont limités à l'intérieur des paramètres HTTP, qui seront envoyés sur leur requête. Je vais vous montrer comment vous pouvez voir la demande est des choses Br ou des invites ou non. Mais pour l'instant, nous allons sur la bonne voie. Donc, pour sûr que nous passons les catégories ou les catégories ID pour obtenir des produits et nous le passons pour obtenir un service de produit. Et ce bon produit par service est retourné pour moi, les produits. Mais maintenant la demande comme vous le voyez ici. Donc, si je clique sur, par exemple, ici, je clique si je vais à nouveau au réseau. Alors essayons à nouveau. Nettoyons ce réseau. Je clique ici, j'envoie comme vous vous en souvenez, une demande. Donc je ne vois rien. Vous devez être sûr que vous n'avez pas un seul type. Vous filtrez par un type. Je veux filtrer tout pour pouvoir voir toutes les demandes. Donc, je clique sur Plus de vin, ok, j'arrive aux produits comme vous le voyez ici. Et ces produits demandent d'abord, qui passe par le backend et n'est chargé avec aucun paramètre. Nous devons donc charger certains paramètres ou modèles de requête à cette requête. Donc, ici, nous aurons une catégorie de points d'interrogation, puis les catégories seraient séparées par des virgules. Eh bien, nous pouvons le faire très simplement lorsque nous revenons à la demande GET. Et puis je vais passer l'objet. Rappelez-vous pas les params directement, comme vous ne pouvez pas dire, Ok, patron pour moi les params le savent ou non, fourchette fonctionne pour vous. Vous devez passer l'objet et cet objet, la clé de celui-ci sera appelée params. Et puis vous passez la variable params, que nous avons créée ici. Supprimons donc ce journal de console et revenons à notre application, rechargée. Et puis nous allons, par exemple, le nettoyage de cette console tout nettoyer. Je vais avoir plus de bile. Ok, j'ai des catégories. Comme vous le voyez dans cette demande. J' ai ici les catégories et leur contiguïté que j'ai sélectionnées. Et aussi, si je vais ici, beauté, Ok, on a une autre demande et on la cherche. Ce sont des catégories de produits, d'accord, Nice. Nous avons ici les catégories de produits et ils sont séparés par des virgules. Donc, dans ce cas, maintenant le filtre fonctionne en envoyant au backend une requête avec des paramètres de requête. Et le back-end me renvoie les produits qui sont dans ces catégories. A chaque clic, je clique ici, je filtrage. Je demande au backend, renvoyez-moi les produits qui ont cette catégorie. Donc, dans ce cas, nous avons filtré notre page produit. Nous avons donc des filtres produits. Et dans la prochaine conférence, je veux vous montrer quand je clique sur l'une de ces catégories dans la page d'accueil. Et je passe ici à la page des produits. Je ne montrerai que les produits qui sont dans cette catégorie. Donc, nous n'allons pas avoir, nous ne allons pas être redirigés vers la page des produits, mais nous serons d'accord d'utiliser le produit est composant, mais nous n'afficherons que la catégorie sur laquelle nous avons cliqué sur leur page d'accueil. 151. Page de catégorie: Ok, dans cette conférence, nous allons voir quoi faire si je clique sur une de ces catégories et ensuite ce qui se passera. Donc, pour moi, je dirais peut-être que vous, quand je clique sur l'un d'eux, j'irai aussi à leur page de produits. Et puis je vais montrer seulement les produits qui sont dans cette catégorie sur laquelle j'ai cliqué. Et bien sûr, nous pouvons faire quelque chose supplémentaire afin que nous puissions cacher cette barre latérale et aussi juste montrer leurs produits. Pour que nous puissions le faire facilement. Je vais vous le montrer dans cette conférence. Donc, tout d'abord, nous devons spécifier une nouvelle route. Donc, dans le module produits, si vous vous souvenez, nous avons plusieurs itinéraires et l'une de ces routes sera également quatre catégories. Donc nous ne pouvons pas avoir un nouveau chemin ici aussi. Donc on peut dire, on peut l'appeler catégorie. Et cette catégorie aura comme paramètre que nous l'avons vu précédemment, que nous avons aussi l'ID de catégorie. Donc, nous aurons l'ID de catégorie passé avec cette catégorie. Donc, dans ce cas, nous allons aussi bien à la liste des produits composant. Mais dans le produit ce composant, je vais vérifier si je reçois mon clic de produits qui vient de la navigation en haut ou de la catégorie à la maison. Donc, pour cela, nous devons aller au composant de liste de produits. Et puis nous allons avoir la route activée. Nous devons donc également nous abonner à l'itinéraire actuel. Nous devons donc savoir sur quelle route je suis, par exemple, sur les produits ou sur la catégorie. Donc, dans ce cas, je vais utiliser un autre service qui s'appelle la sécheresse activée. Donc, nous pouvons l'appeler, appeler ce service comme route, puis appeler la route activée à partir d'Angular. Et ici, je vais sur NDI dessus. Je dirai, vérifiez pour moi, ils sont sortis. Donc ici, je vais dire ceci cependant, truite, que j'ai appelé en tant que service, puis params, puis abonnez-vous à ces paramètres et puis vérifiez quels biomes j'ai. Donc, nous avons ici des paramètres et puis je vais vérifier et gérer ceux-ci. Peut-être s'il y a dans leur ID de catégorie params. Comme nous l'avons spécifié dans la définition de l'itinéraire, puis apportez pour moi les produits utilisant cet ID de catégorie, qui est passé dans cette URL. Pour que nous puissions le faire facilement. Donc, je vais dire cette catégorie de points ou de bons produits, exactement comment nous l'avons fait précédemment. Donc, nous devons annuler celui-ci ou l'enlever totalement. Enlevenons-le. Donc, je n'ai rien ici. Je vais obtenir les produits en fonction de leur catégorie qui est passée dans l'URL. Mais je ne peux pas le passer comme directement. Je ne peux pas dire l'ID de catégorie de point params. Parce que je passe à cette méthode. Bon produit, je passe tableau, tableau de chaînes. Donc, nous devons mettre ceci à l'intérieur du tableau, aussi simple. Donc, vous diriez juste tableau d'ID de catégorie params. Donc, ce sera un ID de catégorie, qui à l'intérieur d'un tableau, qui sera passé pour obtenir des produits. Et ce sera comme filtre de catégorie. Et puis il va saisir les données des produits de la catégorie. Donc, dans ce cas, nous n'aurons que les produits qui se trouvent dans ces catégories, sur lesquels j'ai cliqué. Donc tu sais, c'est dans la ligne. Si, donc, s'il y a cette chose ou cette variable, alors faites-le. Sinon, il suffit d'obtenir des produits sans filtre, comme obtenir tous les produits comme nous l'avons fait précédemment. Donc, ici, nous disons ce point, obtenir des produits sans aucun filtre. Donc, dans ce cas, je reçois les produits du backend en fonction de cette catégorie. Joli. Alors sauvegardons ça et essayons ça. Donc, je vais à nouveau sur la page d'accueil afin que nous puissions cliquer sur Accueil. Cliquez sur mobile. Ok, on voit que ça ne marche pas. Vérifions notre console. Nous remarquerons que je pense que nous n'avons pas cette route jusqu'à présent que nous avons défini la catégorie de produits et ensuite nous avons mis l'ID de catégorie. Donc, pour cela dans la page d'accueil, si vous vous souvenez, nous avons mis ou dans les catégories bannière, nous avons dit que, ok, je veux aller d'abord deux produits et ensuite je vais aller à la catégorie. Nous pouvons donc définir cela comme un enfant de ce chemin. Nous pouvons définir la catégorie vaste comme un enfant de chemin de produits. Ou vous pouvez juste ajuster les catégories Bannière, comme nous l'avons vu ici, pour ne pas avoir la catégorie de produits de liaison routeur, nous pouvons avoir directement cette catégorie. Donc, lorsque vous cliquez sur Enregistrer, donc je n'ai plus de produits. Donc, lorsque nous cliquons sur Enregistrer, allez à nouveau à notre application, je vais cliquer sur l'un de ceux-ci. Ok, je reçois toujours une erreur parce que ce n'est pas défini parce que je n'ai pas enregistré, encore une fois leur module produits. Ça arrive toujours avec moi. J' ai donc besoin de sauvegarder le module de produits. Je reviens ici, mobile, gentil. J' ai ici deux produits seulement et avec cet identifiant. Mais quand je vais à la page des produits, je reçois tous les produits. Mais quand je clique sur l'une de ces catégories, je reçois seulement les catégories qui sont sous, je ne reçois que les produits, désolé, qui sont dans cette catégorie. Mais j'ai encore ici cette barre latérale de catégorie, ce qui n'est pas sympa, comme sinon vous devez le faire comme vérifié. Sinon, vous pouvez ou une autre solution, vous pouvez, par exemple, le cacher totalement. Faisons comme quelque chose de pratique avec se cacher. Rendez ce composant dynamique pour en savoir plus. Donc, tout d'abord, je vais d'abord ne pas montrer cette barre latérale totalement. Donc, dans ce cas, nous avons dans la liste des produits, nous devons également vérifier si je suis dans la page des catégories ou non. Nous pouvons donc définir un autre membre de la classe. On ne peut pas dire que c'est la catégorie. Par exemple, ordonnée de page. Donc, je ne peux pas dire en tant que booléen, je peux définir cela comme un booléen. Et puis je vais ici aux paramètres où je lisais les paramètres de l'URL. J' ai donc l'ID de catégorie de paramètre ou non. Je ne peux pas faire la même chose. Donc, nous pouvons dire que le ticker est un ID de point stérile, puis définissez cette catégorie ou chaque page de catégorie sur true. Donc, je suis vraiment dans sa page de catégorie. Sinon, définissez-le sur false. Alors, d'accord, pourquoi je fais ça ? Donc, je vais utiliser cette variable dans le modèle. Donc, ici dans le modèle, quand je vais au modèle HTML, je veux d'abord cacher leurs catégories. Donc, je vais dire ici pour leur liste de catégories, qui est des cases à cocher, qui est dans la colonne 3 telle que nous la définissons précédemment. Donc, je dirais ng-if est la page de catégorie. Donc, si c'est une page d'agouti, alors montrez-la. Mais nous n'avons pas besoin est la page de catégorie. On doit le cacher. Donc ça ne va pas aller à la page alors. D' accord. Je l'ai fait. Ce sera faux parce qu'il ne le montrera pas. Mais quand il s'agit d'une page de catégorie, alors il masquera ce composant. Donc, il va cacher cette colonne ici, qui contient les cases à cocher pour leur catégorie. Et ici aussi, si nous économisons, essayons ça. Et on va à l'avant. Ok, nous avons ici les catégories. Donc, nous avons ici le produit, désolé, donc quand nous allons à la page d'accueil, j'ai ici mobile. D' accord. J'ai deux articles et quand je vais à des produits ou je vais obtenir la barre latérale avec les produits que je les ai ici. Donc, c'est exactement le même composant, mais il se comporte en fonction de la route qui est ici. Mais je voudrais également parler de l'affaire. Que se passe-t-il si nous avons plus de trois produits ici dans la ligne ? Je veux te montrer ce qui s'est passé. C' est un insecte. Donc, nous avons besoin, par exemple, nous allons à, par exemple, deux ordinateurs. Ok, on a trois produits. Allons au panneau d'administration et revenons à nos produits. Et faisons un produit pour être comme un ordinateur. Donc je vais ici à l'ordinateur, Tom avec ce plus sauvage et je l'ai mis comme une catégorie d'ordinateur. Mettez à jour cela, et revenez à notre application dans le front end. Ok, et je clique sur l'ordinateur. Et comme vous le voyez, accord, j'ai du produit supplémentaire ici, mais il est tombé en panne, comme si j'avais 123 et puis c'était une nouille. Parce qu'ici, c'est vide. Et cela se produit quand j'ai cette colonne est toujours avec neuf colonnes. Alors inspectons ça. Donc, je veux vous montrer que nous avons défini cela comme un neuf colonnes. Maintenant, cette barre latérale de catégorie est cachée, donc il a poussé leur contenu vers la gauche. Donc, nous avons maintenant cette grille de contenu. Il n'a que neuf colonnes. Nous avons donc besoin de le rendre dynamique. Donc, nous, nous finissons, nous voulons le faire ainsi que 12. Donc, quand je clique ici ou je vais ici, je vais avoir cela comme une colonne 12, donc il sera entièrement sur l'écran. Ainsi, nous pouvons utiliser la même valeur que nous avons définie précédemment pour chaque page de catégorie. Mais je vais utiliser une classe différente ici. Au lieu de neuf colonnes, je vais utiliser 12 colonnes. Alors, comment peut-on faire ça ? Donc, vous dites juste ici classe NG par ceci, et vous le définissez comme entrée pour cette div. Et ici, vous allez définir un objet. Et cet objet aura battu appel neuf quand je suis en dehors de la page de catégorie. Donc, quand ce n'est pas la page de catégorie, est donc la page de contiguïté ne l'est pas. Sinon, vous pouvez définir n'importe quelle nouvelle classe. On peut l'appeler. Il s'appellera 12. Et quand est la page de catégorie. Donc, nous gardons cela et nous voyons que quand il ne va pas aller à la page, il sera neuf. Donc, comme vous le voyez ici, ce n'est pas la contiguïté. C' est la page de catégorie, désolé, et c'est 12. Donc nous l'avons ici, 12 colonnes. Mais quand je vais à des produits, tous les produits, je l'ai comme trois colonnes. Donc nous l'avons comme neuf colonnes. Et ici, nous avons la colonne latérale existe, donc ce sera comme un neuf. Donc, dans ce cas, j'ai aussi une définition dynamique des classes ici. Donc, je peux jouer dans le modèle dans le même composant en fonction de ce que je viens. Donc, quand je viendrai de cette page ou de cette catégorie, j'aurai celle-ci. Et quand je viens de produits similaires ici dans l'allégation fondamentale, je n'ai pas de paramètres ici, aucune catégorie. Donc, je vais montrer celui-ci. Donc, mais nous avons un petit problème ici. Donc, si je vais à nouveau aux ordinateurs, nous voyons qu'ils sont très larges, je veux les garder, par exemple, pour que nous puissions utiliser la même chose que nous l'avons fait avec ng-class ici. Donc, nous pouvons mettre aussi bien est la catégorie, est la page de catégorie ou non. Sur, par exemple, celui-ci où nous définissons la largeur de l'article produit. Donc, nous pouvons aussi bien ici supprimer cette classe ng-class ou cette classe et dire quand ce n'est pas la page de catégorie, puis le faire comme par exemple, le 3, comment c'était avant ou quatre. Mais quand c'est la page de catégorie, alors faites-le comme un trois. Donc, nous aurons ici quatre colonnes, parce que 12 divisé par 3, ce sera quatre. Alors sauvegardons cela et actualisons pour moi l'application automatiquement. Et nous verrons que nous aurons quatre produits ici. Et quand je vais, parce que je suis ici dans le projet de catégorie ou chemin de catégorie. Quand je vais au produit, je les aurai ici comme trois aussi. Vous voyez donc que vous avez une zone dynamique et dynamique pour jouer avec votre composant en utilisant d'où vous venez. Nous avons donc utilisé le même composant, ce qui est très agréable d'avoir à lister les produits basés sur cela. Donc, maintenant, nous avons plus de liberté pour l'utilisateur de se déplacer à l'intérieur de mon application. 152. Page de détails du produit: Ok, dans cette conférence, nous allons voir comment construire la page détaillée du produit. Nous allons donc créer un composant que nous ferons référence à un produit spécifique, surtout lorsque je clique sur l'un des produits. J' irai donc ici et je verrai le détail du produit dans tous les détails. Donc, tout d'abord, nous devons avoir comme un titre et une description que nous aurons aussi. Ils sont cotés. Il viendra des étoiles qui vont utiliser à partir du prix Prime NG. Et nous pouvons ajouter comme une fausse offre. De plus, nous allons ajouter cette quantité afin que vous puissiez sélectionner combien vous voulez acheter de ce produit. Et puis nous allons avoir deux boutons. Et aussi, nous allons avoir la description que nous avons créée en HTML dans l'éditeur ici. Donc, il sera rendu le même exactement comme nous l'avons ici à l'extrémité avant aussi. Nous verrons comment rendre le HTML, qui est écrit dans le panneau d'administration, et il sera également dans le front end. Nous allons créer une galerie, donc je ne vais pas utiliser un composant prêt. Nous allons apprendre à construire une galerie par notre main. Et avec ça, que nous vous verrons dans la prochaine conférence. Et je veux vous montrer que la construction de la galerie IS ou la construction d'un composant d'interface utilisateur en général est également possible. Vous pouvez donc l'utiliser partout dans vos applications. Ainsi, nous pouvons construire nos propres composants comme une galerie et un exemple de vol, évaluation des étoiles ou par exemple, un curseur. Vous pouvez le construire par vous-même et situé dans vos bibliothèques dans votre projet. Alors commençons à construire cette partie ici. Et dans la prochaine conférence, nous allons construire la galerie. Alors tout d'abord, jetons un coup d'oeil ici. Nous avons donc besoin d'une description du titre, note, puis d'un peu de prix et de quantité. Donc, tout d'abord, je veux créer un composant qui sera à l'intérieur de la bibliothèque Produits, à l'intérieur des pages. Nous avons donc une page spécialement pour le détail du produit. Donc, je vais cliquer sur Générer et puis j'aurai un composant ici, et il sera également situé dans les pages. Et puis nous pouvons l'appeler page produit ou détail du produit. Donc, c'est à vous de choisir. Donc, je vais l'appeler page produit. Et la page produit sera située dans les produits du projet. Et aussi, nous allons utiliser les mêmes options que nous utilisons toujours. Donc, ici, nous avons le sélecteur de préfixe, nous aurons ici des produits. Et bien sûr, ce sera la page du produit. Bien sûr, nous n'allons pas utiliser le sélecteur parce que nous allons lire directement, directement le routeur à ce composant. Et nous allons dire sauter les tests. Et puis nous allons générer ce composant. Nous sommes sûrs que c'est dans la bibliothèque de produits. Parfait. Nous allons ici à nouveau et nous verrons que ces pages ou page produit est créé ici. Donc ce que nous allons faire, nous allons, quand je clique sur un produit ici dans mon front end, alors je serai redirigé vers le détail du produit. Donc, disons, par exemple, que nous cliquons sur l'image. Donc, si vous vous souvenez, nous avons créé article, produit, article. Cet article de produit, il a une image, et nous allons mettre le lien sur l'image. Donc, quand je clique sur l'image, il me redirigera vers le détail du produit. Donc, nous avons ici le routeur. Alors quel routeur ? Nous allons utiliser le lien de routeur. Et puis je vais utiliser le produit lui-même. Donc, nous allons avoir ici un code comme le produit lui-même, l'ID du produit. Mais avant cela, nous pouvons dire, par exemple, que je veux les produits. Comme si nous pouvons le mettre à l'intérieur d'une chaîne pour que nous puissions mettre un produit slash. Alors emmenez-moi à leur page de produits. Et puis après cela, ajoutez pour moi l'ID, l'ID du produit. Donc, je vais avoir ici l'ID de point de produit. Donc, le produit entrant à l'article produit, je vais obtenir son ID et le couper avec leurs produits. Nous allons donc créer cette route dans le module produit. Donc, dans le module produit, nous avons créé précédemment catégorie de produit et nous allons créer un autre chemin qui est appelé produits, puis l'ID du produit. Donc, nous avons ici l'ID du produit. Donc, dans ce cas, chaque ID viendra après la page du produit. Il sera rendu à un composant de page de produit, pas une liste de produits, mais un composant de page de produit. Nous avons donc créé ce composant de page produit pour cet objectif. Alors testons ça. Donc, comme vous le voyez ici, nous avons ici toute l'application. Lorsque je clique sur l'image, je reçois la page produit fonctionne. Donc c'est exactement ce que nous voulons et nous avons ici l'identifiant de leur produit. Revenons donc à notre code et nous allons modeler ce produit ou cette page produit. Alors allons ici et fermons toutes les autres pages. On va rester ici. Et en passant, créons un fichier de style. Donc, si vous vous souvenez, nous avons les Styles publics dans leur vie. Produit que nous pouvons créer aussi ici, un fichier pour la page des produits. Alors donnons-lui un nom page produit, SCSS. Et puis dans les produits, je veux l'importer aussi, exactement comme nous le faisons toujours. Donc, nous avons deux pages de produit, SCSS, puis chaque style que je vais écrire ici, ici, il sera importé dans mon application et l'application peut le voir. Donc, tout d'abord, nous allons avoir une grille comme toujours. Donc, nous pouvons envelopper cette grille d'abord dans un produit. Nous pouvons l'appeler page produit. Donc, nous avons ici la page produit. À l'intérieur de cette page de produit, j'aurai une grille, donc div, p grille. Et à l'intérieur de cette grille, j'aurai deux colonnes. Le premier sera six et l'autre sera six. Nous avons donc des colonnes égales. Donc, nous avons ici P appelé cherche, et nous allons en avoir un autre qui est aussi appelé six. Donc, nous avons maintenant la grille ici. Nous allons localiser comme un composant de galerie d'interface utilisateur et nous allons le localiser plus tard. Je vais donc commenter cela. Et nous mettons ici les détails du produit. Donc, tout d'abord, je vais avoir, par exemple, nous pouvons mettre ici un cours. On peut le donner, l'appeler « produit ». Et ce produit, nous allons mettre ses détails. Donc, tout d'abord, je veux le titre du produit, qui viendra d'un nom de produit. Donc, nous verrons plus tard comment nous allons obtenir leur produit. Donc, pour cela, nous avons besoin d' un fichier précieux dans TypeScript pour obtenir les détails du produit, si vous vous en souvenez. Nous avons donc créé ce service et nous allons l'attraper à nouveau et l'utiliser ici. Donc, nous avons ici le nom du point de produit, et ensuite nous allons avoir la description du produit. Donc, je vais le mettre à l'intérieur du paragraphe et lui donner une classe, par exemple, produit. Et ce sera la description, par exemple, le disque. Et puis nous allons mettre la description du produit. Donc, ici, nous allons appeler toutes les informations sur le produit. Donc et bien, nous devons aller pour une évaluation et d'autres composants. Mais nous allons d'abord importer le produit afin que nous puissions apporter le produit à partir du backend et ensuite nous pouvons l'utiliser ici. Donc, tout d'abord, je vais à cette page de produit. Je vais appeler ce service de produits. Donc, nous avons ici encore un service fier. Nous avons donc un service de produits, qui sera ici. Et nous allons aussi utiliser un routeur parce que nous allons obtenir l'ID de l'URL. Donc, nous avons ici aussi, privé et route. Et je vais avoir activé la route, dont j'ai attrapé, de l'URL. Je vais récupérer les données de l'URL. Donc, nous allons dire ici, cette route point, puis me donner les paramètres, qui viennent du backend ou à travers l'URL. Et ce params, nous allons s'abonner à eux parce que chaque fois que nous changeons l'ID, nous devons nous abonner et attraper ce que l'ID change pour voir le bon produit. Donc, nous pouvons dire ici params, nous avons aussi les fonds dans l'abonnement. Et puis nous allons utiliser ces paramètres pour l'utiliser dans le service produit. Donc nous aurons ici ce point. Ou faisons comme si les premiers paramètres pointent l'ID de produit. Comme si nous avons un paramètre qui est appelé un identifiant de produit, alors nous allons utiliser ce service de point produit. Tout ce que nous pouvons dire dans la fonction séparée, obtenir le produit en général comme organiser juste notre code pour être plus agréable et nous pouvons passer l'ID du produit ici. Donc, après cela, nous allons à une autre ligne et nous ouvrons une nouvelle méthode. Nous l'appelons ainsi obtenir le produit. Donc, comme vous le voyez ici, nous obtenons le produit et ce produit recevra l'identifiant du produit. Donc, nous pouvons dire ID, ce sera une chaîne. Et puis nous allons utiliser ce service de produits points et ensuite arriver au produit. Et obtenez le produit, si vous vous souvenez qu'il demande l'ID du produit. Donc, je vais donner l'ID du produit, puis je m'abonnerai, puis j'obtiendrai un produit de réponse. Par exemple, ici nous pouvons lui donner ce nom et ce produit de réponse. Je vais l'utiliser pour l'assigner à un membre de la classe, qui sera appelé produit et a un type. Produit. Nous allons donc définir un membre de la classe. Nous appelons ça produit. Et cela aura la classe qui est produit de type. Et nous allons encore ici et nous disons ce produit point. Ce sera le produit de réponse. Alors c'est tout. Donc, dans ce cas, nous obtenons le produit à partir du backend. Nous avons vu précédemment comment nous avons créé cela dans l'application du panneau d'administration. Alors rappelez-vous toujours de mettre fin à l'abonnement. Donc, si vous vous souvenez, je vous dis toujours de dire que ces prennent jusqu'à, et nous allons dire ces sous-marins de fin, comme deux extrémités et l'abonnement et n sous-s seront un sujet. Nous pouvons donc le définir ici aussi. Et il sera sujet et taper tout. Et le sujet sera égal à un nouveau sujet, qui vient aussi de notre x js. Et puis nous devons appeler OnDestroy. Donc, nous avons ici dans la classe, nous devons aussi mettre en œuvre sur cette Troie. Et nous avons besoin, alors il nous donnera erreur que nous n'implémentons pas la méthode NG sur détruire. Donc, vous devez aussi appeler cette méthode. Donc, quand ce composant est détruit, ces points n sous-s, désolé, ce point. Et désolé, j'ai besoin de mettre ici les crochets et puis ce point n sous-s, puis suivant. Et puis cela finit le complet. Donc, dans ce cas, lorsque cela se termine aide à terminer, lorsque le composant est détruit, cet abonnement sera terminé et nous n'aurons pas de fuite de mémoire. Parfait, Maintenant, nous avons un produit. Ici. On a tout ce qu'on va vérifier. Comme si nous avons un produit, puis afficher pour moi le détail du produit afin de ne pas avoir de problèmes. Donc, ici, nous allons avoir ng-if produit. Donc, si j'ai produit, alors affichez les informations sur le produit pour moi. Alors sauvegardons ça et passons à ce front. Nous verrons que nous avons obtenu le produit sur lequel nous avons cliqué. Donc, si je vais à un autre produit, je verrais que j'ai aussi ce produit. Donc, nous allons continuer et styliser les choses exactement comme nous l'avons fait dans leur démo. Donc, je vais ici, comme vous le voyez, je vais ajouter maintenant la note, la note, j'aime utiliser quelque chose qui vient de l'énergie Prime. Donc, vous pouvez le rechercher. C' est ce qu'on appelle la composante de taux. Et comme vous le voyez, il a beaucoup d'usages. Pour moi, je vais utiliser celui qui est handicapé. Donc, tout d'abord, nous devons importer le module comme nous le faisons toujours avec chaque interface utilisateur ou chaque composant prime z. Donc, je veux le module de notation et ensuite je l'importerai dans mes modules. Donc, nous ne pouvons pas mettre ici les modules, le module de notation, et ensuite nous allons savoir lequel est bon pour nous. Donc, nous allons tomber exemple, obtenir celui qui est appelé NO annuler celui-ci et ensuite nous pouvons le désactiver. Donc, si nous allons à la source ici, vous pouvez voir tous ces exemples. Alors ramassons celui-là. Par exemple, nous pouvons dire notation, modèle et cette chose. Donc, nous allons à nouveau sur notre page de produit, puis après cela, nous ouvrons un div et nous pouvons lui donner un nom que nous appelons comme évaluation de produit. Et puis nous plaçons ce composant ici. Donc, la note qui vient du backend sera la cote de produit point. Donc, nous pouvons avoir ici la notation point de produit, et ensuite nous allons l'utiliser. Donc d'abord, nous n'avons pas besoin de cette annulation. Nous devons avoir les handicapés. Donc, si vous vous souvenez, nous avons désactivé et ensuite nous avons mis à vrai comment je sais qu'il y a ceci désactivé parce que j'ai vérifié la documentation. Donc, si vous allez ici, vous verrez cet exemple désactivé et non désactivé. Il aimait quelque chose comme handicapé. Il l'a mis sur vrai pour que nous puissions faire la même chose. Ainsi, le nombre d'étoiles par défaut sera cinq. Donc r rien question ici, nous sommes en mesure de continuer. Prenons cela dans notre application. Donc, nous allons à nouveau à notre page ou produit. Bien, on est là. Ils mangent. Retirons celui-ci. Voyons comment on peut l'enlever. Donc nous avons ici annuler faux. Pour que nous puissions donner des chutes annulées. On l'a remis. J' ai donc mis ici les formulaires du Conseil et je vérifie à nouveau la demande. Parfait. On l'a comme ça. Et maintenant, nous allons ajouter d'autres choses, qui est le prix du produit. Alors ajoutons le prix. Donc, je vais avoir ici aussi bien en direct, ce qui est appelé prix du produit. Et ce prix de produit contiendra ce qui suit. abord, nous allons avoir le produit et qui sera comme avec une monnaie. Donc, nous allons avoir ici produit. Prix des points. Et nous allons avoir cette pipe, qu'on appelle la monnaie. Donc, nous allons afficher le produit comme un argent. Donc, de façon monétaire. Et puis nous aurons une autre période à faire comme une offre. Donc on peut avoir de la classe et on peut dire le prix avant. On peut appeler ça le prix avant. Et cela, nous pouvons, par exemple, le faire comprendre. Par exemple, nous pouvons dire produit du prix plus 18 et ce sera aussi la monnaie. Donc, chaque produit viendra avec un prix comme celui-ci, prix d'origine et plus 18, qui sera déposé comme ça. Et nous pouvons, après cela, nous allons le styliser pour que nous puissions faire ça gros et nous pouvons faire ça comme une ligne à travers pour qu'elle puisse être abandonnée comme si c'était un prix avant. Et maintenant, nous allons avoir la quantité. Donc la quantité, comme vous vous en souvenez, nous l'avons ici. Donc, nous avons une entrée de nombre dans le premier end. Je vais utiliser ce numéro d'entrée. Et comme vous le voyez, nous l'avons ici. C' est donc aussi une bonne façon de l'utiliser aussi bien. Nous devons importer ce module de numéro. Je vais aller au module produit, importer ce module de numéro, puis utiliser ce module de numéro d'entrée dans mes modules. Et puis nous pouvons vérifier ce composant à quoi il ressemblait. Donc celui-ci qui s'appelle les limites moyennes MAX, nous allons et vérifions. Et nous avons celui-ci, ce qui sera comme avec un bouton pour que nous puissions copier toute cette ligne. Et puis nous allons ici à la page du produit et nous pouvons dire div point produit. On peut le donner comme une quantité. On peut donner ce cours. Et puis nous plaçons ces numéros d'entrée ici. Et aussi ici, nous allons pas avoir quelque chose de numéro. Nous allons avoir une variable de quantité. Et cette variable de quantité, nous devons la définir comme membre de la classe pour lire la valeur de celui-ci. Ensuite, nous allons l'utiliser pour ajouter le produit au panier avec une quantité spécifique qui est ajoutée ici. Donc ici, ce sera ce UML sûr, boutons. Nous pouvons donner ici le nom, la quantité et max Min. Et nous allons avoir ici aussi la quantité, la lettre majuscule. Et puis nous plaçons ceci pour être une quantité. Donc, quand je clique sur l'étiquette, je me concentrerai automatiquement sur celle-ci. Donc, quand je clique ici, je me concentrerai sur l'importation aussi. Donc ici, ça fonctionne bien. Bien sûr, nous avons besoin de plus de style comme nous le verrons plus tard. Donc la dernière chose que nous allons ajouter, ce sont les boutons. Et nous allons avoir ici une autre div. Donc, nous avons ici div, et nous l'appelons comme des produits. Actions. Et ces actions, nous aurons deux boutons. premier bouton sera quatre à l'heure actuelle, et le deuxième bouton sera quatre Pour le panier et Ajouter au panier, Je vais appeler la méthode qui est appelé produit publicitaire au panier. Nous devons donc mettre en œuvre la méthode ici. Donc, nous avons une autre méthode au produit à panier et nous l'avons vide pour l'instant. Nous n'allons pas le mettre en œuvre. Maintenant. Nous allons le mettre en œuvre quand nous avons un chariot. Donc, ici, nous avons utilisé le bouton, qui vient aussi de prime end. J' ai donc utilisé le module de bouton, que nous avons appelé précédemment à d'autres fins. Donc, nous avons maintenant ici l'étiquette de bouton et tous sont utilisés aussi, l'étiquette arrondie. Donc, si vous allez ici aux boutons, Nous avons ici plusieurs boutons. Donc nous avons ici aussi, arrondi. Donc, vous n'avez pas besoin de le coiffer et de faire un peu d'arrondi. Vous pouvez l'utiliser directement. Donc, si vous allez à la source, vous verrez ce bouton arrondi ici. Donc j'ai utilisé exactement celle-là. Donc aussi, je mets ici le bouton Ajouter au panier. Alors vérifions que dans l'application, d' accord, nous avons deux boutons. Tout fonctionne bien et j'appuie sur ce bouton et ça a été traité de son frère parce que vous vous souvenez que nous utilisons ces lunettes pour pousser les choses les unes des autres, comme Bim NG, marge, non ? Deux, alors il va le pousser de la droite. Maintenant, nous allons styler ceci. Nous avons donc créé un fichier de style. Je vais donc le coiffer rapidement. Nous avons, tout d'abord, nous devons avoir la classe de page de produit ou la classe de produit. Nous avons donc ici ce produit, comme vous le voyez dans notre page produit. Si nous l'ouvrons à nouveau, nous avons ici le produit. Nous avons donc besoin d'avoir le nom du produit, la description du produit. J' ai oublié de donner des cours ici. Donc nous pouvons entendre donner un nom aussi. Nous allons donc à la description de notre nom de produit, évaluations, la quantité de prix, et cetera. Donc, nous allons styler tout ça. Alors commençons par le nom. Donc ce nom sera comme nous ne pouvons pas lui donner la taille de la police sera comme deux EM comme nous pouvons le faire double taille, il sera grand. Et puis nous allons avoir la description. La description sera aussi bien que la taille de la police sera comme 1.4 EM. Et aussi, nous avons leur note. Donc ils évaluent sera dans la façon dont ils, nous le poussons de haut en bas. Donc, nous pouvons dire marge 15 pixel 0. Donc, de haut en bas, donnez-lui mod 15 pixel de haut en bas. Et puis nous aurons le prix. Donc d'abord, le prix sera comme ça. Donc, nous avons le prix du produit, nous avons déjà la classe, la taille de la police. Nous lui donnons, par exemple, 1, outil EM ainsi, et font-weight, nous pouvons le rendre gras. Donc, nous pouvons lui donner comme 600 bouton de bordure de poids de police pour l'ensemble du conteneur du prix. Donc, nous pouvons avoir une ligne en dessous pour séparer des boutons d'action, ainsi de suite et la quantité. Donc nous pouvons avoir le bouton Border, nous lui donnons un pixel et solide. Et puis nous pouvons donner une variable. Et cette variable aura une phase d'égout, dont les couleurs que je choisis de Prime NG 300, dont ce sera un gris. Et puis ensachage, nous allons donner un peu de rembourrage 25 pixels de haut en bas pour pousser le contenu loin de lui. Alors économisons et voyons ce qui se passe et ce qui se passe ici. Donc je vais à la page, Ok, j'ai ici le titre, la description, j'ai ici, la note. Et nous allons styler cette partie. Donc, ici, nous avons, si vous vous souvenez, défini une classe et cette classe, qui était ici pour le prix avant. Donc je vais le coiffer aussi. Donc, à l'intérieur du prix, nous allons avoir le prix de la classe avant. Ce sera la taille de la police. Nous le donnons comme un EM, comme si ce serait un peu plus petit. Et puis margin-gauche, par exemple, pour pousser le contenu un peu de la gauche, nous pouvons lui donner 10 pixels pour ne pas être collé l'un à l'autre. Et nous pouvons donner un poids de police sera comme un 100 pour le rendre plus léger. Et on peut le donner comme une couleur plus claire. On peut dire var, comme Sûr, phase. Ce sera comme gris, grisé. Alors bientôt la phase 500 est bonne. Et puis par exemple, décoration de texte aime avoir comment dire la ligne à travers. Donc, nous pouvons donner la ligne à travers de cela comme le prix précédent. Alors on peut vérifier ça si ça marche bien. Vous voyez, nous avons maintenant une ligne à travers et nous avons le prix du produit. Je dirais qu'on va le rendre un peu plus grand. Par exemple, ici nous pouvons avoir, le prix peut être 1.4 et nous pouvons le vérifier à nouveau. Nous verrons, ok, nous avons un prix plus faible et puis nous avons la taille de la police pour cela ne prend aucun effet SI je sais pourquoi, parce que ici nous avons 1 pour EM, ok, Quand je mets ici aussi E M 1 M, puis cela signifie que ce sera la taille du parent. Donc ici, je peux dire que les brevets sont, ou la taille ou la taille de la police de cette classe sera un EM, comme exactement la même de cette taille. Donc, quand je le mets comme 0 ou 0, par exemple sept, alors il deviendra plus petit. Donc parce que EM est comme un comment dire qu'il est lié, Il est lié à leur parent. Donc, quand je dis lié, alors il sera de la même taille si je mets un EM, la même taille de leur brevet. Donc, dans ce cas, nous allons le rendre plus petit et nous le mettons 0.7. Donc si je le fais plus grand, comme si je le mets à, par exemple, cela aussi, nous devions plus gros mais avec un pourcentage qui est plus petit que le parent, parce que je l'ai ici aussi, 0,7. Voici donc les unités EM, comment elles fonctionnent. Alors maintenant, nous avons tout. Maintenant, nous allons styler cette quantité. Donc, tout d'abord, il est poussé un peu à droite et à gauche parce que nous avons ici avec leur classe, si vous vous souvenez, nous avons quelque chose comme un appel P 12 PM D3. Donc, nous pouvons donner à cette classe, et cette classe est, viennent par défaut avec padding. On peut lui donner aussi, la literie 0. Donc, initialisons cela pour être remplissage 0 et ensuite il serait poussé exactement. Donc, maintenant, nous allons avoir la quantité aussi. Donc je vais avoir ce cours. Donc, nous avons ici après le prix, nous ouvrons une nouvelle étiquette et disons que la quantité, nous le donnons à nouveau, comme la marge haut ou la marge droite et vers le bas. Donc, nous pouvons avoir une marge de 25 pixels et 0. Et puis nous pouvons donner l'étiquette qui est à l'intérieur de cette police plus grande, plus grande taille de police. Donc, nous pouvons dire ici à l'étiquette aura quelque chose d'étiquette solide est faux. L' étiquette aurait la taille de la police, qui sera pour l'examen 1.2 M. Donc, nous ne pouvons pas dire aussi bien ici 1 à EM. Donc, nous verrons que c'est devenu plus grand exactement comme nous le voulions. Mais comme vous le voyez, je veux cette orange, comme mes boutons, j'ai partout des boutons avec orange. Donc, nous pouvons aussi l'avoir, donc nous pouvons remplacer les boutons ici, qui viennent de Prime NG. Donc, si vous inspectez à ce bouton, vous verrez que c'est un bouton normal. Et ce bouton normal a une classe qui est appelée bouton PI. Alors faisons défiler jusqu'à ce que nous détections la couleur. Donc, si nous allons plus bas, nous verrons le bouton et il a cette couleur, donc nous pouvons changer cet arrière-plan. Alors attrapons ce cours. C' est l'avantage d'avoir des styles publics. Sinon, nous ne serons pas en mesure de le changer facilement à l'intérieur du composant. Parce que si ce composant brillant, alors nous ne sommes pas en mesure de changer cela. Donc, nous disons, comme la couleur de fond de ce bouton sera la couleur primaire, que j'ai défini ma couleur primaire. Et puis la frontière sera 0 pour ne pas avoir ces frontières bleues. Et maintenant ce sera, je suppose, orange comme vous le voyez ici. Donc, c'est très gentil. Maintenant, nous allons styler aussi ces boutons est très simple. Nous avons juste ici, pas la quantité, mais nous avons défini une classe qui est appelée actions. Je peux donc y aller et définir des actions. Et à l'intérieur de ces actions, nous avons aussi le bouton PI. On peut copier la même chose ici. Donc, nous pouvons aussi avoir la couleur de fond pour être orange de ce bouton. Donc je ne suis pas sûr d'avoir le bon nom de la classe. Donc nous pouvons avoir ici la quantité. Et voici une sorte d'action n'est pas des actions. Donc je dois mettre S. Et maintenant ce sera, je pense orange comme vous le voyez ici. Joli. Donc tout ce que nous avons maintenant tout ce que je viens de manquer une chose, qui est la description du produit. Nous allons donc avoir une nouvelle grille. Donc une nouvelle grille dans le même niveau. Donc, parce qu'il obtient tout l'espace sous la galerie de produits et la page produit. Donc, notre manque total de détails. Donc, nous avons ici une autre grille de pic et puis nous allons donner un div être appelé et puis 12, comme il sera dupé. Et à l'intérieur de cette div, je vais saisir les données des données HTML qui viennent pour le produit. Si vous vous souvenez, nous avons ici dans l'admin définir celui-ci et il est à venir ou enregistré dans la base de données comme HTML. Alors comment on peut attraper ça ? Donc parce que si je vais ici et je dis, ok, imprimer pour moi le produit qui atteindre la description parce que nous l'avons stocké dans la description de portée que vous vous souvenez. Donc ici, je vais voir que je vais obtenir du code HTML, ce qui est horrible. Donc nous devons faire quelque chose pour ça. Donc, la façon la plus simple de le faire est de définir un div. Et ce div, vous pouvez utiliser un DAG, qui vient avec Angular appelé HTML interne. Et à l'intérieur de ce HTML interne, l'entrée, vous pouvez dire me donner la description de la portée de point de produit de cette façon. Donc, tout le contenu de cette div sera rendu en HTML comme vous le voyez ici. Donc, nous avons besoin comme un peu plus de style parce qu'il est remplacé par les styles de prime NG ou de mon application. Donc, nous pouvons donner, par exemple ici, j'aime aussi quelque chose comme le produit et la description d'atteindre par exemple. Donc, et nous allons utiliser cette classe aussi pour que nous puissions entendre leurs actions. Et nous allons avoir dehors ici parce que ce n'est pas à l'intérieur du produit. Donc nous allons l'avoir dehors ici. Je vais avoir le produit et ensuite atteindre la description. Et puis je vais avoir la hauteur de la ligne, par exemple, sera de 1,6. Donc, dans ce cas, je vais avoir comme quelques espaces entre tous ces éléments. Donc, sauvegardons aussi bien le HTML parce que je ne l'ai pas enregistré. Donc, nous allons voir que nous avons eu comme un peu plus belle hauteur de ligne ici. Donc, de cette façon, nous avons la description de la description détaillée du produit. Ce qui nous manque, c'est une galerie. Je vais dans la prochaine conférence, créer un composant pour la galerie. Ensuite, nous allons saisir les données ici et les mettre ou les images et les mettre dans cette galerie. Mais avant de partir, je vois que nous avons une erreur dans la console. Donc, si vous voyez cette description de lecture de undefined, donc je veux mentionner que c'est pourquoi je vous ai dit que vous devez mettre le produit ng-if. Donc, s'il y a un produit, alors nous allons l'afficher. Donc, je préfère déplacer celui-ci vers le haut, comme leur div conteneur Comme tout cela sera contenu ici. Donc, s'il y a un produit, alors affichez-le. Si ce n'est pas le cas, ne faites rien. Donc, dans ce cas, vous n'obtenez pas cette erreur ici. Donc, tout est au sujet du produit. Comme je vous l'ai dit, nous allons créer la galerie lors de la prochaine conférence. 153. Composante d'images de galerie de produits: Ok, Maintenant, nous allons continuer avec notre page produit et nous allons mettre en œuvre la galerie, les images de la galerie du produit. Donc, si vous vous souvenez que nous avons déjà venu avec la puce Loi demande avec toutes les images, qui est appelé champ images. Et nous avons l'image principale où nous affichons le produit lui-même comme vous le voyez ici. Et aussi cette image de la galerie où les ou les images, où les images de leur galerie sont stockées. Donc, si vous voulez travailler sur ce composant, nous allons ne pas utiliser quelque chose de Prime NG. Bien sûr premier NG fournissant également un peu d'artillerie, comme par exemple ici, celui-ci, si vous le vérifiez, Il s'appelle la gonorrhée et il a une très belle documentation comme et vous pouvez ajouter des images et les supprimer dynamiquement. Mais je vais utiliser dans cette conférence mon propre composant parce que je veux vous montrer comment créer aussi un composant d'interface utilisateur et les utiliser dans votre application. Donc, tout d'abord, nous allons créer ce composant de galerie dans votre bibliothèque d'yeux. Si vous vous souvenez, si nous allons à ellipse, nous avons une bibliothèque d'interface utilisateur où nous avons placé nos composants de bannière. Nous allons donc créer un nouveau composant, qui est appelé galerie. Nous allons l'appeler galerie d'interface utilisateur. Donc, d'abord, je vais générer un nouvel utilisateur de composant en utilisant cette console NX. Et puis nous allons l'appeler dans le dossier des composants. Je vais lui donner un nom qui s'appelle galerie. Donc, ce sera comme des images de galerie. Le projet sera l'interface utilisateur. Et la même chose pour toutes les autres options que nous portons en utilisant ici. C' est pour ça que je t'ai dit au début du cours, sois patiente. Vous saurez tout, pourquoi cela se passe, pourquoi nous vérifions ces cases à cocher. Alors maintenant, vous les connaissez tous. Donc le sélecteur sera Galerie, genre, comme ça. Et parce que ça commence par le nom de la bibliothèque, comme nous l'avons dit, ils sont tous dans le ES lié. Alors maintenant, nous allons créer ce composant et l'exécuter. Ok, leur composant a été créé. Vérifions ça. Nous verrons que nous avons la galerie ici et aussi il est placé dans votre module et aussi, Il utilise cela. Il est exporté aussi. Ok, maintenant passons à autre chose. Comme vous le voyez dans ma démo que j'ai déjà préparée, j'ai l'image principale puis deux images, et je clique dessus et cette image est en train de changer. Donc, nous avons besoin de quelque chose comme div, main, div où j'affiche l'image principale et ici comme une liste où je vais afficher plusieurs images. Allons-y, faisons le travail de la galerie, et ensuite nous allons mettre en œuvre cela. Mais d'abord, appelons-le dans notre composant. Donc, si vous vous souvenez, nous avons de l'espace vide ici. Nous allons donc appeler cette galerie à l'intérieur de nos produits. Alors passons à ce produit et pages, page produit. Et si vous vous souvenez, j'ai commenté ici, la galerie de l'interface utilisateur. Donc ici vous, je galerie, nous allons l'appeler. Et nous voyons que cela donne toujours une erreur parce que nous n'utilisons pas le module d'interface utilisateur ici. Donc, nous allons utiliser le module de l'interface utilisateur ici. Module où je vais exporter ou importé. Il sera importé à partir de la bibliothèque d'interface utilisateur. Nous allons donc avoir des importations. Et puis votre module oculaire de. Et puis je vais mettre le nom de l'organisation, puis vous dire, i. Et dans ce cas, je vais voir que mon produit ici ou UI Gallery, l'erreur cette application encore. Alors sauvegardons tout et vérifions si notre composant est placé là. Alors, allons-y. Ok, les travaux de la galerie. Nous allons donc remplir cette zone. Alors passons au composant de la galerie. Comme je me suis souvenu ou comme je vous l'ai dit précédemment, vous appuyez sur Contrôle P, puis vous pouvez passer à n'importe quel composant que vous voulez en tapant le nom du composant. Donc j'ai ici composant galerie, sympa, je suis là. Il vaut mieux ne pas chercher ici. Maintenant, nous avons des galeries de travail. Donc, nous allons maintenant créer le modèle. Ok, pour ça, je vais créer un div et lui donner une galerie de noms. Et cette galerie contiendra une image en vedette, par exemple, ou une image principale de ce que nous avons en haut. Alors que dv sera à l'intérieur, une image, et cette image aura une source qui sera l'image sélectionnée sur laquelle je clique. Et aussi les autres images seront en dessous, comme nous pouvons avoir ici div. Et on peut appeler ça des images. Et ces images, comme je vous l'ai dit, un outil B liste pour que je puisse utiliser. L' UL et LI. Donc, dans ce cas, je peux dire UL et LI et à l'intérieur après avoir appuyé sur onglet, si vous voyez que nous utilisons Emmet, donc il complète automatiquement mon code HTML. Et ici, je ne vais pas utiliser pour mettre l'image comme de cette façon, comme ici, image quelque chose. Je veux vous montrer une façon différente de mettre l'image comme arrière-plan. Donc, nous pouvons mettre un fond de style de l'image, puis il sera affiché comme l'image cette LI. Mais maintenant mettons comme quelque chose juste pour être sûr que tout fonctionne. On peut dire image. Et ici, nous avons une source et nous pouvons, par exemple, appeler, nous l'appelons image sélectionnée. Et ce sera une variable. Nous allons donc avoir ceci comme contribution. Nous devons donc définir la variable ou cette image sélectionnée membre de la classe dans le fichier ts. Donc, je peux aller ici et définir un membre de classe et l'appeler image sélectionnée, et ce sera une chaîne. Donc, nous allons nous en servir. Sauvons tout pour voir si nous allons bien, comme si nous l'avons maintenant que nous ne faisons aucune erreur, Donc nous n'avons pas de problèmes dans leur code. Et nous devons voir ici, Ok image, mais je n'ai pas l'image principale. Alors faisons une image statique. Donc, je vais aller ici à nouveau à travers le fichier ts et donner ceci comme quelques images. Image. Par exemple, je vais dans le dossier Assets de mon application, puis j'appellerai une image. Bien sûr, vous pouvez appeler n'importe quelle image sur Google. Donc, par exemple, je vais mettre l'URL d'une image ici. Par exemple, je suis à la recherche d'images est appelé produit. Je vais aller à cette image par exemple, et je dirai copier l'adresse de l'image. Donc si je vais ici et que je mets l'image, ok, j'ai l'adresse de l'image ici. Alors allons-y et placez-le dans notre image sélectionnée précieuse. Donc, ici, nous avons sélectionné l'image, et puis nous allons avoir l'image sélectionnée, je pense, dans notre application. Donc, après avoir sauvegardé cela, nous allons à notre application, nous verrons que cette image est placée ici. Donc, si vous savez que nous source entrée lorsque vous utilisez comme entrée, alors vous aurez source soudaine en entrée, qui provient de la variable, qui est définie dans le fichier ts. Sinon, ce ne sera qu'une chaîne et il ne vous donnera aucune entrée ici. Donc c'est mieux toujours ou pas mieux. Vous devez le mettre comme dans ce crochet pour dire que c'est une entrée et je vais utiliser précieux, qui est défini dans le fichier ts de la galerie ici. Donc, après avoir sauvegardé cela, nous sommes sûrs que nous obtenons l'image. Maintenant, nous allons recevoir les images, la liste des images, comment je peux recevoir la liste des images. Donc, si vous vous souvenez, nous avons travaillé avec les entrées. Donc cette galerie, je pense que nous aurons une entrée qui est supprimée. Cette partie ici. Nous disons ici, rien, juste vraiment le rendre vide. Et si vous vous souvenez, j'ai parlé des entrées. Donc, l'entrée est quelque chose où je vais définir l'entrée pour ce composant. Donc, ce composant acceptera cette entrée et l'utilisera pour se rendre dans le modèle. Donc on peut dire des images. On peut dire que c'est un tableau de chaîne. Nous pouvons avoir un éventail de partenaires, comme nous n'aurons pas un seul chemin. Nous aurons plusieurs images, plusieurs parties. Pourquoi ? Parce que je veux afficher cette partie ici, liste des images. Nous allons donc utiliser ces images ici. Donc, après cela, nous allons dans cette LI, je vous ai dit que nous allons utiliser une manière différente. Donc ici, je vais dire, je vais le donner comme MD4. Donc nous avons ici NG 4. Ensuite, laissez l'image comme une image d'images, les images que l'on est l'entrée que j'ai déjà définie. Donc maintenant, après cela, nous allons dire que nous pouvons donner l'image comme un style audacieux. Comme je vous l'ai dit, c'est une façon différente de donner l'image. Alors je vais vous dire pourquoi je fais ça. C' est juste pour le dimensionnement. Donc, je veux garder des tailles fixes pour que toutes les images soient les mêmes. Donc, je les mets comme une couleur d'arrière-plan ou une image d'arrière-plan. Donc, ici, nous pouvons avoir l'image de fond. Ainsi, vous pouvez définir comme cette image de fond. Et puis cette image d'arrière-plan aura une URL comme celle-ci. Parce que vous savez, en CSS, je dis l'image, l'image fond comme URL. Donc, dans ce cas, nous avons ici URL. Et puis je vais mettre une autre double citation et plus, plus. Et au milieu de cette classe, je mettais l'image que j'ai obtenue à partir des images. Donc, pour chaque boucle, je vais avoir une image et la placer ici afin que l'URL soit remplacée ou placée ici à l'intérieur de cette URL d'image d'arrière-plan. Donc, dans ce cas, nous aurons notre image. Mais bien sûr. On a toujours besoin de style. Alors faisons d'abord le style pour que nous puissions voir ou ce qui se passe. Donc d'abord, comme vous le voyez ici, nous n'avons rien. Donc, nous pouvons avoir ici également enregistré pour ne pas avoir d'erreur. Donc on sauve tout. Encore une fois, nous n'avons rien. Donc maintenant, nous allons utiliser ce composant, cette galerie u i pour le mettre où dans la page du produit, dans la page du produit et donner cette entrée de galerie, qui est appelée images. Et ces images seront les images du produit. Mais d'abord, faisons ça. Donc, je veux vous montrer que cette demande, comment elle vient du backend. Donc, je veux ici réseau, je vais aller à DevTools et réseaux ouverts. Et nous allons actualiser la page et rechercher la demande, qui se termine par cet ID parce que moi, la demande se termine toujours par notre identifiant de produit. Donc, comme vous le voyez, j'ai celui-là. Donc, si je vais à Preview, quand je clique dessus, je verrai que j'ai la marque ou tout sur le produit. Maintenant, nous allons avoir les images. Si vous voyez que nous avons l'image qui est l'image principale, puis les images, plusieurs images sont ici, qui proviennent du back-end. Nous allons donc utiliser ces images dans notre galerie. Donc, nous avons juste besoin de dire produit, comme l'entrée que nous avons déjà définie. Nous disons que les images seront des produits, comme ce produit que j'utilise des images. Donc, comme vous le voyez, nous avons maintenant entré la, notre galerie à l'intérieur, comme cette page produit. Et nous passons les images à cette entrée. Et l'entrée ou le composant, nous le rendons de cette façon ici. Alors allons ici et briller que nous verrons. Ok, on a des trucs dont tu as entendu parler. Ils sont totalement démodés. Nous allons le styliser. Donc, tout d'abord, créons un fichier de style. Donc, dans les styles publics, nous avons la bibliothèque et ensuite vous, moi, et avons comme galerie aussi. Dot SCSS, désolé, c'est CSS, donc nous devons le mettre comme S, S, S, OK. Et maintenant, nous devons importer ça. Donc, nous disons aussi importer pour moi galerie. Donc, nous avons de cette façon et cette interface utilisateur est aussi importante dans n'importe quel magasin. Donc quand tu magasines ne peux pas voir ça. Alors maintenant, nous allons utiliser ou coiffer ce Ghana. Donc vous pouvez utiliser aussi bien ma façon, je vais toujours de cette façon. Donc, je sépare ici l'écran afin que je puisse ici voir quelles classes j'ai utilisées. Donc, je vais commencer par la galerie. Et cette galerie contient l'image principale. Et comme vous le voyez ici, et l'image principale, par exemple, gardons comme pour l'instant vide. Je vais aussi avoir le style des images. Donc nous avons ici des images. Et ces images, comme vous vous en souvenez, nous les avons définies comme U L. Donc, cet UL sera un flex. Nous devons donc faire un flex d'affichage pour qu'il soit aligné l'un près de l'autre, ces éléments ou de ces alliés. Et nous l'initialisons avec marge 0 et literie 0 car il vient avec une valeur par défaut du navigateur ou de la bibliothèque. Donc maintenant nous avons ce flex, et vérifions si nous nous rapprochons vraiment les uns des autres, en les rapprochant les uns des autres. Donc nous économisons, ok, nous n'avons toujours rien parce que nous devons aussi dire le style de la LI. Donc, nous économisons et puis nous continuons avec le LI à l'intérieur de cet UL, nous avons un LI et nous avons, par exemple, la taille de fond. Rappelez-vous que nous avons l'image de fond qui est définie là, donc nous la mettons sur la couverture. Donc, il couvrira toute la zone qui a une largeur de 100 et pixel, comme je vais lui donner 100 pixels de largeur et 100 pixels de hauteur. Et toujours LI éléments, nous devons leur donner un bloc d'affichage parce que sinon ils seront affichés comme un texte, textes en ligne, ils seront proches les uns des autres. Donc, quand vous leur donnez un bloc d'affichage, il lui donnera ou lui donnera un comportement comme ça. Sauvegardons et vérifions que ce qui se passe à l'avant. Ok, vos dés, nous les avons tous près l'un de l'autre. Alors reprenons, plus au style. Nous stylisons les images. On ne l'a pas stylée, l'image principale. Donc on doit donner comme quelque chose de marge, non ? J' aime les mettre loin les uns des autres un peu. Donnons 15 pixels. Donc on peut avoir en eux comme séparés. Maintenant, c'est très gentil. Nous allons maintenant styler l'image principale, comment nous pouvons le faire. Tout d'abord, nous devons donner une valeur à cette variable. Donc, nous allons clause et puis revenons ici. Et je vais donner une valeur à cette variable. Donc, cette variable devrait être, comme vous vous en souvenez, une URL qui vient du backend. Donc ce que nous avons ici, seulement les images. Donc, dans ce cas, je peux afficher les premières images ou image du tableau d'images qui vient de la page des produits. Donc, dans ce cas, je ne peux pas dire dans mon énergie sur, dans ce, cela sélectionné l'image sera ce point images comme ces images, et prendre le premier membre du tableau. Donc, pour être plus agréable, vous pouvez vérifier s'il y a des images. Et ces images ont de la longueur, comme il y a des éléments à l'intérieur de cette image, alors vous pouvez lui donner l'image sélectionnée. Et aussi, nous devons vérifier la galerie comme nous verrons plus tard s'il y a des images ou non. Donc maintenant, nous avons ces images sélectionnées est placé ici. Vous voyez, nous avons maintenant l'image principale est placée. Et puis nous avons aussi cette galerie d'images sous elle. Alors, nous allons un peu styler ça. Nous allons utiliser un peu de style dessus. Allons au fichier de style afin que div de l'image principale contienne l'image elle-même. Donc, je peux aligner tout à l'intérieur au centre pour que nous puissions donner le centre d'alignement du texte. Je voudrais le faire au milieu juste pour le faire un peu au milieu de la, de cette page ou de cette div. Donc, après cela, nous allons avoir quelques valeurs pour cela. Comme si nous pouvions pousser le contenu en dessous, environ 15 pixels. Et aussi, nous pouvons faire une hauteur, nous donnons cacher comme 600 pixels maximum pour ne pas être très grand. Et puis nous pouvons styler l'image à l'intérieur. Donc, vous vous souvenez, nous avons l'image principale dans la div et à l'intérieur il y a une image. Pour que je puisse y accéder directement. Je peux dire non, Oh mon Dieu. Je dis que l'image EMG aura la largeur maximale sera de 100%. Donc, je ne veux pas mettre l'image plus que la taille. Sinon, il sera poussé à l'intérieur de ce contenu. Donc, je voulais avoir un maximum de 100% du conteneur parent, qui est celui-ci. Donc, nous avons une largeur max 100% et nous donnons la hauteur 100%. Donc, pour avoir la hauteur du brevet comme 600 pixels. Alors sauvegardons cela et essayons de vérifier si nous faisons bien. Rafraîchissez, gentil. Nous avons tous les articles sont stylés. Nous avons ces 600 pixels et nous avons ici les images de la galerie. Alors faisons maintenant ceux au centre. Comment nous faisons les choses dans le centre, si vous vous souvenez, nous utilisons flex afin que nous puissions dire justifier le contenu de leur conteneur, qui est l'URL au centre. Donc, après cela, nous verrons qu'après le chargement, nous aurons ces éléments centrés. Alors regardez, nous avons une très grande galerie et la première image est sélectionnée, comme celle-ci est sélectionnée. Alors faisons maintenant le clic. Donc, quand je clique sur l'une de ces images, je vais changer cette image. Donc, c'est très simple. Je suis sûr que tu penses la même chose comme moi. Donc je vais faire un événement. On peut dire « clic ». Ce clic aura comme par exemple, changer l'image sélectionnée. Donc, de cette façon, je peux être en mesure de changer l'image afin que nous ne puissions pas passer aussi bien l'image que je sélectionne ici. Alors allons-y et vérifions ça. Et nous pouvons créer cette méthode. Je peux simplement dire ici dans le fichier ts, définir une nouvelle méthode ici, qui est la même que nous appelons, et il a une image et ce sera une chaîne parce que nous utilisons l'URL de l'image. Et puis nous avons ici que ces deux sélectionnés l'image sera l'image que j'ai obtenu de l'extrémité avant. Donc, nous allons renommer cela en URL de l'image. Il vaut mieux en avoir plus parce que l'image s'exprime comme une donnée. Donc on peut faire ça comme ça. Donc, l'URL de l'image ici aussi. Donc on peut l'avoir. Image sélectionnée URL de l'image, sélectionnée l'URL de l'image. Ici, nous en avons un autre. Et puis ici, nous avons des images syntaxiques. Et nous pouvons dire aussi cette image URL. Donc, pour ne pas avoir de nommage déroutant parce que nous ne passons pas l'image elle-même, nous ne passons que la cellule, l'URL de celle-ci. Donc, ici, nous sauvegardons cela, aussi, ce composant ici, et nous allons vérifier cela. Donc, nous avons composé ne pas utiliser le constructeur. Je vais vous montrer que nous avons ici des flèches. Nous allons tous les arranger. Nous utilisons un X, comme vous le verrez plus tard. Donc nous en avons deux, par exemple ici il se plaint à ce sujet. Je n'ai pas de méthode à l'intérieur de cela parce qu'elle est vide, il est donc préférable de vous la supprimer si vous n' avez pas ou si vous n'allez pas utiliser cette méthode. Donc, nous économisons et nous sommes maintenant nettoyés des erreurs comme les erreurs grammaticales brisées. Donc, quand je clique, comme vous le voyez, je clique sur l'image et l'image est cette commutation. C' est très sympa. Et aussi, nous allons vérifier si nous avons des images entrées. Vous devez donc vérifier s'il y a des images entrées. Il est donc préférable de le faire très facilement. Donc, vous ne pouvez pas dire que get est sa méthode comme vous pouvez définir un getter et dire a des images. Ainsi, vous pouvez définir cette méthode comme une variable qui peut être utilisée comme une variable ou un membre de classe et l'utiliser dans le modèle. Et je dirai retourner pour moi ce point images longueur point. Donc, je veux vérifier si elle a une longueur supérieure à 0. Ensuite, j'ai des images dans le composant. J' ai donc des images de l'avant ou de la page du produit. Sinon, cela me donnera faux, alors je n'afficherai rien. Donc c'est comme ça que nous faisons. Donc, ici, nous avons ng-if. Donc, s'il y a une galerie, donc nous pouvons dire ici a l'image. Donc, si elle a une image, alors affichez tous les composants. Sinon, n'affichez rien parce que dans ce cas, je vais casser toute la portée parce que j'utilise ici des images, des liens, et plusieurs ou autres choses ici. Donc, de cette façon, il est préférable de toujours utiliser ce précieux. Donc, je vais dire ici, si ce point a une image, donc et aussi, quand cela vient comme indéfini, alors cela me donnera un problème. Je vais te montrer comme ça. Allons ici et je vais tout sauver. Donc, je veux vous montrer que lorsque nous n'avons pas d'images dans le tableau, dans l'entrée, juste pour être un peu prudent avec les entrées, parce que dans ce cas peut-être vous allez causer composant cassé et cela donnera des erreurs de console. Donc, il vaut toujours être sûr que l'entrée est vraiment a des données ou non. Et puis, surtout si c'est un tableau et que vous bouclez dans ce tableau et faites des choses dans le modèle. Il est donc préférable d'être sûr que vous avez des images 3D, puis d'afficher le modèle. Eh bien, ici. Parce que maintenant je demande s'il y a des images, puis si les images sont indéfinies, j'aurai une erreur. La longueur est indéfinie ou vous appelez des longueurs à partir de quelque chose qui n'est pas défini. Donc, dans ce cas, nous aurions une erreur. Il est donc préférable de résoudre cela comme je vais vous le montrer maintenant. Alors allons ici et donnons un tableau vide d'images. Je ne vais rien donner. Donc, nous ne pouvons pas dire null ici ou indéfini. Pour que nous puissions sauver. Et puis bien sûr, nous n'aurons rien dans la galerie. Mais nous allons avoir une erreur dans la console. Nous disons la longueur de null, comme vous le voyez ici dans le composant de la galerie ts T2 et T4. Donc, si nous allons à ce composant de galerie ts 24, comme vous le voyez ici, je dis, Ok, il y a une erreur ici. C' est pourquoi je vous ai dit qu'il est préférable vérifier chaque ligne de code lorsque vous utilisez, en particulier les entrées. Donc TypeScript vous donne la possibilité de vérifier cela en mettant un point d'interrogation. Et puis si cela n'est pas défini, alors il retournera pour vous une valeur. Essayons encore une fois. Nous enregistrons lorsque cette image a une valeur nulle, alors elle ne continuera pas ici et elle retournera indéfinie en général. Donc maintenant je ne reçois plus cette erreur comme vous le voyez ici. Et aussi ma galerie est vide. Donc, je vous garantis qu'avec ce point d'interrogation, j'ai dit que, d'accord, s'il y a ce non défini, ne continuez pas leur état, retournez juste indéfini. Et ici, quand cela n'est pas défini, alors toute la galerie ne sera pas affichée. Donc, voyez-vous, soyez toujours prudent à propos de vos entrées. C' est pourquoi nous faisons ici des choses pratiques. Sinon, vous allez avoir des ennuis. Nous avons beaucoup d'erreurs dans la console et vous ne saurez pas d'où ils viennent. Le dernier correctif que je veux ajouter ici que nous avons ici vous galerie est de donner erreur, désélectionner ou devrait être préfixé par l'un des préfixes, bits bleus. Donc parce que ici dans le fichier ES lint à l'intérieur de l'interface utilisateur de la bibliothèque, je définis cela. Ok, je veux que cet attribut soit un peu bleu spécifique à ses bits bleus. Alors réparons ça aussi. Nous le faisons comme vous le voyez ici. Et aussi, l'élément ou le sélecteur sera préfixé en tant qu'interface utilisateur. Donc, quand nous gardons ça, nous retournons à notre galerie. Bien sûr, il faudra parfois aimer quelque temps pour être réparé ou il peut être réparé immédiatement comme vous le voyez ici. Et aussi nous avons ici la bannière, vous je bannière aussi corrigé cette erreur. Donc, de cette façon, nous n'avons pas d'erreurs ici. Nous sommes propres. Mais de toute façon, nous allons les réparer tous à la fin, comme je vous montrerai plus tard avec un excellent. Donc c'est tout au-dessus de la galerie. Maintenant, remettons l'erreur, quel ordre ils sont erreur que j'ai fait ici pour que nous puissions avoir les images du produit. Donc maintenant, nous avons vu toute la galerie et nous avons fini totalement la page produit. Donc, je peux voir toutes les images de produit, par exemple , celle-ci, et aussi tout autre produit que vous voulez voir. Donc dans ce cas, c'est très sympa. Nous avons entièrement mis en œuvre la page produit. Nous allons travailler la prochaine section avec leur panier. Nous allons ajouter au panier, nous ajoutons cette quantité et nous allons travailler avec l'ONG RX pour sauvegarder les articles du panier. Et nous verrons comment ça change ici immédiatement. 154. Service de panier dans LocalStorage: Ok, alors revenons à notre structure de diagramme. Nous devons créer le composant de paiement, le composant carte et le composant d'historique des utilisateurs, comme nous l'avons vu dans la vue d'ensemble. Alors maintenant ce que nous avons besoin d'abord pour créer le composant de carte, mais aussi le composant de carte besoin d'un service de panier. Et ce service de panier, vous pouvez créer une bibliothèque pour cela. Ou vous pouvez également placer toutes les choses dans la bibliothèque des commandes, que vous voyez sur la droite. Donc, sur la droite, la bibliothèque la plus ancienne sera responsable du panier de paiement et aussi comme tous les utilisateurs commande et aussi peut-être que nous pouvons gérer le paiement. Donc, tout d'abord, commençons par le chariot. Le panier, je vais créer un service qui est appelé service de chariot, et il sera situé dans la bibliothèque des commandes. Et pour la semaine observée, le chariot nous allons bien utiliser les algues, les observables ou NDR x. donc je vais vous montrer les deux façons. Je vais commencer par le facile, qui est comme des observables. Donc, nous pouvons observer dans l'en-tête comme vous le voyez ici, quelque chose comme nous pouvons voir toujours mise à jour en direct sur le panier. Donc, par exemple, quand je clique sur Ajouter au panier ici, OK, il est ajouté aussi. Lorsque je clique à nouveau sur, par exemple, allons à la page des produits et je clique sur ce produit. Je vois que la façon dont vous voyez qu'il est mis à jour afin que nous puissions voir comment cette carte est mise à jour en direct. Donc, je vais utiliser les deux façons et DRX et observables. Mais maintenant, commençons par facile, qui est observables. Revenons donc à notre projet et à notre code. Créons un nouveau service, qui est appelé service de chariot. Et il sera situé dans le service de commande ou la bibliothèque de commande. Donc, nous pouvons aller ici et encore à la console NX générer et nous avons un service, et nous allons nommer ce service dans un dossier appelé services à l'intérieur de la bibliothèque des commandes. Donc, nous pouvons avoir ici panier Services. Le nom du projet sera des commandes, et nous devons sauter ce test. On n'en a pas besoin actuellement. Donc, après cela, nous créons ce service de garde et nous allons sentir notre code là-bas. Alors fermons tout va deux lèvres et encore une fois, ordres bas et puis les lèvres et les services. Et nous voici dans notre service de chariot. Donc, le service de panier aura, tout d'abord, comme certains, par exemple, initialisation pour le panier. Donc, pour la carte, je vais utiliser le stockage local. Pourquoi le stockage local ? Donc, quand l'utilisateur revient à la boutique après avoir rechargé l'application, je veux toujours garder la carte qu'il a remplie précédemment. Donc je veux garder toutes les données des gardes qu'il pense P4 de ne pas les perdre. Donc, par exemple, quand je me déplace surtout d'une page à l'autre, ou par exemple, quand je laisse l'application aller ailleurs, je veux garder les données de garde toujours les mêmes ici. Le meilleur moyen est, comme vous le voyez ici, que nous puissions utiliser le stockage local. Le stockage local aura, par exemple, le panier. Et rappelez-vous que nous avons aussi sauvé le jeton JWT ici. Et maintenant, nous allons sauver cette Cartier aussi. Ainsi, le panier aura des articles et chaque article aura un ID de produit et une quantité de cet article. Donc, dans ce cas, je peux enregistrer le produit qui est utilisé et aussi la quantité de celui-ci. Et aussi, quand je veux ajouter quelque chose à leur panier, encore une fois, je vais voir que ce panier coupé mis à jour et nous avons la quantité pour le même produit. Donc, je n'ai pas besoin d'ajouter le produit à nouveau, mais j'augmente simplement sa quantité lorsque l'utilisateur clique sur Ajouter au panier plusieurs fois. Donc, dans ce cas, nous devons avoir quelque chose comme le stockage local. Donc, quand je rafraîchis ma page, je vais ici, rafraîchir. Et je vois toujours mes articles de panier qui se trouvent dans leur page de panier. Et nous avons aussi ceux dans le stockage local. Certaines personnes utilisent également la base de données, elles bloquent la garde des utilisateurs dans la base de données. Mais ici, nous ne sommes pas encore connectés, donc nous perdons juste en utilisant le stockage local, ce qui est comme pour le public, pour tout le monde, n'importe quel utilisateur, c'est seulement enregistrer sous le domaine, qui est l'hôte local, ou pour exemple, mon e-shop dot com. Et ceci pourrait chaque.com, nous aurons un stockage local comme vous le voyez ici. Et ce stockage local aura un chariot. Donc, à chaque fois que l'utilisateur revient à la boutique, il verra encore une fois que sa carte est toujours là et qu'il n'a pas perdu les articles du panier. Donc ici, nous ne forçons pas l'utilisateur à se connecter, C'est juste public. Nous n'avons aucun forçage pour la connexion. C' est pourquoi nous le stockons dans le stockage local, pas dans la base de données. Dans ce cas, nous allons créer ce service basé sur le stockage local. Donc, tout d'abord, comme je sais que tout ou chaque stockage local a besoin d'initialisation. Nous devons initialiser notre stockage local avec leur panier, comme les articles vides. Donc, nous pouvons utiliser init, stockage local. Nous pouvons faire une méthode qui est dans son stockage local. Et puis nous disons comme constant, nous pouvons donner le panier initial, comme nous pouvons l'appeler panier initial. Et cette carte initiale aura, sera comme objet, qui contient deux choses, ou une chose qui est appelée éléments. Et ces articles seront les articles que je veux localiser comme d'habitude comme nous l'avons vu précédemment, ID du produit et la quantité. Donc, pour l'instant, les articles ou la carte de la LNH, le début sera totalement vide. Et ici, nous dirons le stockage local en général, parce que c'est JavaScript. Maintenant, nous écrivons, nous disons ensemble article et puis je mets l'article de cette façon, Je dis garde, ou nous pouvons dire comme panier normal, qui sera le k, La clé ici, nous avons ici c0. Et puis nous mettons la valeur, et la valeur sera la carte initiale. Ok, gentil. Nous obtenons une erreur ici car n'est pas assignable au paramètre de chaîne, car nous ne pouvons pas affecter des objets à être une chaîne à l'intérieur de l'élément set. L' élément nécessiterait qu'il s'agisse d'une chaîne. Alors comment pouvons-nous faire, comme vous le voyez ici, que nous stockons les données, d'accord ? Tableau d'objets et toutes ces données. Nous pouvons les changer en chaîne en utilisant JSON stringify. Donc, c'est comme une méthode appelée JSON stringify. Il va changer pour moi cet objet en chaîne et le stocker dans le stockage local sous forme de chaîne. Pour que nous puissions le faire facilement. Donc, c'est comme si nous avions un rayon qui est ou chaîne JSON, et nous stockons les données à l'intérieur. Donc, nous pouvons dire constante, encore une autre constante. Nous pouvons dire la carte initiale, même, mais ce ne sera pas le panier initial en tant qu'objet, ce sera JSON. Et ce garde aura, utilisera cette classe ou cette bibliothèque, qui est interne en JavaScript. Et nous disons JSON dot stringify. Donc, faites cet objet comme une chaîne, puis stockez-le dans la garde initiale ici. Donc après avoir gardé ça, on voit ça, ok, tout va bien. On n'a aucune erreur. Mais la question ici, qui va appeler cette fonction ? Comme on doit l'appeler seulement la première fois quand je suis entré dans mon magasin. Comme je veux ici, allez le client qu'il va entrer dans mon magasin. Mais j'ai besoin d'initialiser une voiture à un objet vide. J' ai donc besoin d'initialiser sa carte avec des éléments vides au début pour un nouveau visiteur qui est venu au début dans ma boutique pour la première fois. Nous devons donc l'appeler comme la première fois et une seule fois. Non seulement comme chaque fois que je vais sur une page, j'ai besoin d'appeler initialize, initialize. Sinon, cela affectera les performances. Il vaut mieux l'appeler d'une manière ou d'une autre, une fois. Donc, vous avez l'une des deux options. Donc, si vous savez que nous avons des modules et que nous allons utiliser le module de commande dans le module d'application ici. Alors appelons le module de commande dans le module d'application de l'atelier d'énergie. Donc, je vais aller dans un magasin, puis le module d'application ici, ce qui est comme le composant racine que nous pouvons dire, ou le module d'itinéraire. C' est le début de ma demande, le conteneur principal. Donc, je dis ici ajouter le module et puis j'appelle ok, ou le module. Donc, l'ordre est le module sera importé à partir du nom de l'organisation et l'ordre est, cela dépend de la bibliothèque comment nous avons spécifié le nom là. Donc maintenant le module Orders, qui est celui-ci, est appelé dans mon module d'application. Sauvons ça ici. Et maintenant nous vérifions. Donc, nous devons savoir que lorsque cela est appelé, alors vous pouvez initialiser le panier. Donc, cela sera appelé pour une seule fois, seulement avec une première fois où je vais utiliser le module commandé. Donc, dans ce cas, vous devez être sûr que tous ces modules sont vraiment appelés une seule fois. Dans le module Orders, je peux définir un constructeur. Et quand c'est de l'or ou que ce module de commande est créé, je peux appeler la commande ou le service Carter. Donc, nous pouvons dire que le service de chariot à l'intérieur du module que vous voyez comme vous pouvez également utiliser les services à l'intérieur du constructeur de module. Donc, et puis je dis panier service point initialiser la carte de stockage local. Donc, comme vous le voyez ici, nous avons ici cette méthode. Et je vais appeler le constructeur de notre module la méthode qui s'appelle le stockage local du panier initialisé. Donc, quand nous sauvegardons, alors mon application sera rechargée et il appellera le module Orders. Autrement dit, le module sera construit comme au début parce que c'est une classe. Donc, chaque classe, quand vous l'appelez en interne, Angular appelle ce module d'ordres et en crée un nouvel objet. Et puis il appellera automatiquement le constructeur. Le constructeur a cette méthode qui est à l'intérieur du service de carte. Donc, lorsque nous allons à notre application et rafraîchir, nous verrons que le panier est créé. Supprimons donc à nouveau ce jeton ou comme ce stockage local ou tout. Donc, nous allons, par exemple, à la page d'accueil. Donc maintenant, nous n'avons rien parce que je l'ai supprimé parce qu'il avait sa preuve que je n'appelle pas le module commandes plusieurs types. Donc, lorsque je recharge la page, comme lorsque j'appelle mon application pour la première fois , l'article du panier sera créé avec sa valeur dans leur stockage local. Donc, ici, nous garantissons que nous n'utilisons ou créons la carte qu'une seule fois. Et il n'est pas créé plusieurs fois lorsque je navigue dans mon application. Mais aussi parfois peut-être que vous utiliseriez module Orders dans d'autres endroits comme vous allez l'utiliser. Par exemple, dans votre application, vous avez des pages ou par exemple, vous avez un autre module et vous allez utiliser module Orders parce que vous avez besoin de certains composants à partir de là, comme nous l'avons vu précédemment. Et dans ce cas, cela fera un problème pour vous que cela sera appelé plusieurs fois. Donc, dans ce cas, il est préférable de l'appeler et de trouver un endroit où est appelé ou les choses ne peuvent être appelées qu'une seule fois. Par exemple, je suggère pour vous, l'en-tête, comme vous vous souvenez de l'en-tête dans mon application est appelé une seule fois. Donc, nous avons ici dans l'application plus composant, nous avons en-tête ND Shoppe. Et cet en-tête d'énergie Shoppe est appelé une seule fois. Donc, pour le prouver, je vais vous montrer comme je vais avoir ici le journal de la console. Par exemple, dans l'en-tête, nous pouvons dire. Et puis nous verrons que chaque fois que je navigue dans mon application, je verrai que, ok, n'importe quel en-tête est appelé une seule fois. Vous voyez qu'il s'appelle Seulement le moment où j'ai défini l'en-tête car il est à la racine de mon application dans leur composant d'application principal. Donc, il serait appelé qu'une seule fois, indépendamment de cela ou les partenaires que je visite. C' est une façon, une autre façon que je vous ai montré que vous pouvez utiliser un constructeur du module d' Arthur si vous n'êtes pas sûr que vous n'allez pas utiliser le module de commande plusieurs fois. Donc, ici, nous avons l'initialisation de leur panier. Maintenant, nous allons remplir cette garde et voir comment nous pouvons mettre des articles dans ce panier. Comment nous verrons dans la prochaine conférence. 155. Ajouter des produits à votre panier: Bienvenue de retour. Nous allons maintenant ajouter des articles au panier. Donc, si je clique sur ce bouton, Ajouter au panier, je vais ajouter ce produit avec son identifiant et combien ou quantité au tableau d'articles, qui est défini dans le stockage local dans leur panier. Donc, pour cela, nous devons ajouter une nouvelle méthode qui est également ajoutée au service de panier. Je l'appelle set garde article et il acceptera un article de panier comme nous le définirons plus tard. Et cet article de panier sera un modèle et il retournera pour moi la carte que j'aime toujours donner des dactylographies pour tout ce que j'utilise, comme la chaîne, le nombre ou même je crée mon propre type. Donc, pour cela, je vais créer le panier et l'article du panier. Donc, nous allons simplement sur les modèles que nous avons ici ou l'article ou nous pouvons aussi bien défini panier. Et comme vous le voyez ici, nous le définissons comme une classe, donc nous pouvons dire classe d'exportation. Et cette classe sera nommée comme panier au début, et il aura des articles, et ces articles seront de type d'article de garde et tableau d'article Garth. Donc, dans ce cas, j'ai besoin de définir aussi bien cette classe, je dirai l'élément de la classe Garth. Et cet article Garth aura d'abord le produit lui-même. Ou nous pouvons dire ID produit, ce qui sera plus simple. Donc nous pouvons lui donner ce nom et ce sera une chaîne. Et puis nous pouvons définir la quantité. Donc, la quantité de ce produit à l'intérieur de la voiture. Donc, ce sera un nombre. Donc, pour cela, Il est préférable de toujours donner ces éléments en option. Donc, lorsque vous créez un nouvel objet de cette classe, il ne vous donnera pas d'erreur lorsque vous ne transmettez pas, par exemple, la quantité. Donc, dans le même fichier, j'ai deux types, chariot et Garth article. Je vais utiliser ces types ici. Donc, nous appuyons simplement sur l'espace de contrôle et nous importons l'article du panier et aussi l'espace de contour ou point, il me donnera le panier lui-même. Alors maintenant, quand je mets un article de panier, je veux retourner le panier lui-même. Donc, tout d'abord, nous devons ajouter l'article au panier dans le stockage local. Faisons ça. Donc, tout d'abord, je peux dire que je peux obtenir le garde actuel qui est à l'intérieur du stockage local parce que je vais utiliser ces éléments et ajouter à eux plus d'éléments. Donc tout d'abord, j'ai besoin de la carte actuelle. Alors ce que garde que j'ai actuellement dans le stockage local peut-être parce que j'ai déjà ajouté quelques éléments, donc j'ai besoin d'obtenir la garde actuelle. Et puis je pousse sur les articles de cette garde, le nouveau produit. Pour que nous puissions le faire facilement. Donc, tout d'abord, on peut avoir cette carte de garde, et cette carte sera du type de garde. Et puis nous pouvons dire stockage local, point get ou get item. Exactement. Et maintenant, nous sommes en train de définir ou d'obtenir la file d'attente que nous avons définie ici. Donc je veux avoir ce garde. Donc, si vous voyez que lorsque vous utilisez plusieurs fois cette constante est préférable de la définir en haut ici. Donc, vous pouvez dire export, et nous pouvons l'appeler comme Garde, article ou clé de carte. On peut dire comme ça. Et il vaut mieux que la constante puisse être une lettre majuscule. Nous avons coulé et dit garde et clé. Et ce panier et cette clé seront de la manière nommée comme panier. Ainsi, nous définissons cette constante et que nous allons utiliser dans toute notre classe ici ou dans tout notre service. Donc, dans ce cas, il est préférable d'avoir cette clé de carte et de monter de celui-ci et au lieu de celui-ci. Donc, dans ce cas, vous n'aurez pas de chaîne codée en dur, ce qui n'est pas beau. C' est comme si j'avais tout le chariot et j'aimais ces articles. Et à l'intérieur, je vais avoir ici pousser comme l'article de garde au chariot. Pour que nous puissions le faire facilement. Donc tout d'abord, nous avons besoin de la carte aussi. Si vous vous souvenez, nous le mettons comme un JSON ou une chaîne de JSON. Donc, nous devons le retourner pour être comme un objet. Donc, dans ce cas, nous ne sommes pas suffisants pour le faire. Ce n'est pas suffisant parce que cela reviendra pour moi une chaîne et cela me donnera une erreur parce qu'il est ici disant que la carte sera comme une chaîne, mais il a une carte. Donc, nous retournons une chaîne et nous définissons que cette carte a une carte de type, qui est faux jusqu'à présent qu'il est préférable d'analyser ce JSON. Donc, je dirais JSON dot Parts. Ici, nous revenons de chaîne en objet, donc nous n'avons pas à le stringifier parce que lorsque nous définissons l'élément dans ce Garth, nous le stringifions. Mais quand nous voulons obtenir l'élément du stockage local, nous allons l'analyser comme de chaîne à JSON. Donc, dans ce cas, je l'ai comme un objet et puis je peux accéder aux éléments ou à tous les membres de la classe à l'intérieur de ce JSON. Donc ici, je vais juste aller et ISA points points points points points points qui pousseraient. Donc, je pousse un nouvel article dans le panier et je lui donne l'article du panier. Donc, ici, nous avons notre article de panier défini et poussé à leurs articles de panier. Mais ça me donne une erreur parce que je n'ai pas retourné la carte. Encore une fois. Je veux rendre la garde mise à jour. Donc, nous pouvons dire ici, retourner le panier qui est mis à jour avec un nouvel article ici. Donc, tout d'abord, nous devons appeler cette méthode comme nous pouvons l'appeler. Comme nous l'avons dit, que nous allons cliquer sur ce bouton et ajouter cet article au panier ici. Donc, comment nous pouvons faire cela, nous pouvons aller à notre article de produit si vous vous souvenez de ce composant que nous avons défini précédemment, afin que nous puissions rechercher et nous disons article produit. Et voilà. Donc, nous pouvons dire élément produit composant. Et si vous vous souvenez à l'intérieur de ce composant d'article de produit, nous avons bouton. Donc on peut dire ce bouton Onclick. Et nous pouvons dire Ajouter un produit au panier. Donc ici, dans ce cas, nous pouvons ajouter ce produit au panier. Nous devons donc définir aussi cette méthode. Donc, nous allons à ce TypeScript de cet article de produit et nous disons que le produit publicitaire au panier appellera le service de panier. Donc, nous avons aussi besoin d'appeler le service de chariot. Je dirai un service de garde privé. Et ce service sera importé du service chariot. Mais comme vous le voyez ici, c'est le chemin complet. Nous avons besoin de quelque chose comme un raccourci, comme nous devons le dire, comme ajouter. Et puis j'ai mis le nom de l'organisation et je dirais quelle bibliothèque j'ai créé le service, mais cela me donne toujours une erreur parce que nous n'avons pas exporté les commandes ou le service de panier dans la bibliothèque commandée. Donc nous allons au fichier d'index ici. Donc, je clique sur le fichier d'index à l'intérieur ou la bibliothèque. Et je dis l'exportation pour moi aussi, pas ou leur service, mais aussi le service des gardes. Donc nous pouvons avoir ici le service de chariot. Donc ici, quand je vais à l'article du produit, je n'aurai pas de problème lorsque j'importe ce service de garde car il sera défini. Alors maintenant, quand nous utilisons ce service de garde, si je vais ici et utilise ce service de carte à l'intérieur de mon produit, je n'aurai aucun problème ici. Je reçois toujours une erreur parce que cela devrait être ou il n'y a pas d'ordre. Et maintenant, nous allons à notre méthode, encore une fois, ajouter le produit au panier. Et puis nous disons ce point produit ou service. Et puis nous aurons mis élément de garde. Mais ici, nous avons besoin d'un article de panier. Comment pouvons-nous créer un article de panier ? Nous pouvons créer un objet, nous pouvons dire const, et ensuite nous l'appelons élément Garth. Et cet article aura un type d'élément de garde, mais cet élément de garde aussi je pense qu'il n'est pas exporté. Nous avons donc besoin d'aller à notre fichier d'index. Et pour la bibliothèque. Et puis je dis exporter, commencer à partir de pas de surfaces, mais nous avons besoin de modèles. Nous devons importer ou exporter un nouveau modèle, qui sera le modèle GARCH que nous avons créé. Donc, dans ce cas, article produit, bibliothèque de produits peut voir cet article de panier. Donc nous pouvons le passer ici et supprimer cette ligne. Donc, dans ce cas, mon article de panier sera défini. J' ai besoin de créer un nouvel objet de garde. Donc, vous avez l'article sera l'ID du produit. Et cet ID de produit sera cet ID point de produit parce que j'ai ici le produit d'entrée, si vous vous souvenez, nous avons passé le produit ou comptage à cet article de produit et ensuite je le récupère. Et donc je peux obtenir tous les détails du produit, y compris l'ID, puis la quantité. Donc, nous sommes dans l'article du produit, donc l'utilisateur, quand il clique une fois sur le produit ou le bouton Ajouter au panier dans l'article du produit, nous allons ajouter un seul au panier. Et puis nous passons ce point de garde 2. Protéger l'article, et nous allons tous bien. Alors sauvegardons tout et rechargeons l'application. J' espère que nous n'aurons aucune erreur. Ok, on y va. Donc maintenant, j'ai ici l'article du produit, si vous vous souvenez, nous avons utilisé l'article du produit dans les produits de fonctionnalité et aussi nous l'avons utilisé aussi bien dans la liste des produits. Donc je vais ajouter ceci au panier. Donc, quand je clique ici, je vois que le panier ici n'est pas mis à jour. Pourquoi ? Parce que aussi dans le service, quand vous allez à leur service de panier, vous n'êtes pas suffisant pour pousser des articles ici. Vous devez également les repousser à nouveau dans le stockage local. Dans ce cas, vous devez à nouveau tout stringifier, comme vous devez refaire ces lignes. Donc, après avoir appuyé sur cette carte, vous pouvez dire comme garde initiale JSON ou vous pouvez dire garde JSON. Et ce sera stringifier ce garde après que nous lui avons poussé cet objet. Et puis nous allons pousser ce JSON garde en utilisant cette clé de garde à leur stockage local. Alors faisons ça. Bien sûr, nous allons refactoriser cette méthode. Je vous montre juste les étapes, comment on peut faire ça. Donc, je vais à nouveau à l'application, puis Ajouter au panier. Je vois que l'article est ajouté ici. Cliquez à nouveau, je vois que l'élément est ajouté. Je clique sur IC, j'ai maintenant trois éléments. Alors faisons un peu de refactoring. Alors mettons d'abord cela dans une nouvelle méthode. Comme tous ceux-ci comme les barres JSON, LocalStorage, obtenez l'article comme le panier lui-même. Mettons-le dans une méthode qu'on peut appeler ça « Get guard ». Donc, on peut dire avoir le chariot comme en général. Et cela retournera pour moi le panier lui-même, comme panier comme objet, pas garde comme par exemple, que les données JSON. Donc, tout d'abord, nous pouvons dire, donnez-moi le genre et de cette façon je dirais carte JSON.Parse, mais nous pouvons dire de cette façon, comme je veux le rendre plus détaillé, juste vous pouvez le comprendre. Donc, bien sûr, vous pouvez le garder comme nous l'avons fait avant, mais je veux détailler, donc nous pouvons dire ici garder les données JSON, ou nous pouvons l'appeler chaîne JSON de voiture parce que nous devons stringifier celui-ci. Et puis je définit constante, je l'appelle à nouveau carte. Et cette carte, il sera aussi du type de garde. Donc ici, ce ne sera pas la carte, ce sera la chaîne. Donc, nous obtenons l'article du stockage local. Il retournera pour moi la chaîne qui est dans le stockage local avec cette clé. Et puis je l'ai compris. Et puis je dirai ici, JSON points parties, puis garde la chaîne JSON. Et ici, j'aurai aussi les données du panier. Et à la fin, je dirai revenir pour moi cette garde comme objet. Donc ici, nous n'avons pas à nous embêter. On dit juste ici, juste donne-moi une constante sera Garde. Et ce panier aura cette carte point obtenir. Donc c'est simple. Nous avons sauvé toutes ces lignes parce que nous allons utiliser aussi bien obtenir Garth plusieurs fois dans d'autres méthodes comme nous le verrons plus tard. Donc, après cela, poussez des éléments, puis gardez JSON stringify à nouveau. Et puis j'ai mis l'article à l'intérieur du stockage local et je retourne le garde à nouveau. Ok, après cela, revenons à notre application et vérifions si tout fonctionne bien. D' accord. Nous ajoutons des articles à leur panier. D' accord. Mais avec l'ajout, nous avons un problème que vous si vous voyez que lorsque je clique sur cet article Ajouter au panier, il est d'ajouter le produit encore et encore et encore. J' aurai l'identifiant du produit et il est ajouté plusieurs fois. Nous devons juste quand je clique sur Ajouter au panier. Et si ce produit déjà dans leur panier, alors je dois ajouter la quantité, augmenter la quantité seulement, pas ajouter un nouvel article de produit. Sinon, notre garde aura des problèmes qu'il dupliquera le produit lui-même. Nous devons donc vérifier si l'identifiant du produit ou le produit existe déjà dans leur panier. Augmentez simplement la quantité et ne faites aucun ajout à ce tableau d' articles jusqu'à présent que nous devons vérifier si le produit est déjà à l'intérieur ou à l'intérieur de la carte. Donc je reçois la carte, alors je peux créer une constante, nous pouvons créer, appeler ça un garde. L' article existe. Nous pouvons dire que l'article Garth existe, cet article panier existe. Nous allons parcourir les articles du panier et vérifier s' il y a déjà un article Garth passé dans ce panier. Donc, nous pouvons dire carte pour trouver ou points solides d'abord, point trouver parce que nous l'avons comme un tableau. Et je vais vérifier s'il y a un produit ou un ID de produit similaire à l'article de panier qui est passé ici, alors l'article de panier existe. Donc je vais dire trouver. Et puis article, vous savez que nous pouvons utiliser cette amende de cette façon. Et nous pouvons spécifier un booléen ou comme une valeur de retour booléenne, qui va définir pour moi cet élément existe ou non. Donc, pour chaque élément dans ce tableau, vérifiez l'ID. Si c'est exactement le même article de garde que je clique sur ou ajoute à leur panier, alors retournez-le pour moi. L' article dans le panier existe. Donc ici, je vais vérifier s'il y a un élément Garth existe. Ensuite, augmentez la quantité autre, poussez le nouvel article en cours à la garde, puis renvoyez cette garde à nouveau. Donc c'est comme ça que nous allons le faire. Nous allons donc augmenter la quantité pour le produit que nous appelons celui que nous avons trouvé ou celui que nous avons trouvé. Jusqu' à présent, si j'ai plusieurs produits, j'ai besoin d'en trouver un. Comme passer par tout le tableau, tout l'élément, et vérifier quand j'en trouve un, puis augmenter la quantité. Donc, la meilleure façon de boucler ces éléments est d'utiliser la carte. Donc, quand je vais ici et je dis des éléments de carte à nouveau, puis point map. Et puis nous pouvons dire ici élément de garde ou comme objet, juste comme ça. Et cet article, il va le vérifier. Donc, si l'article est égal à, désolé, article point produit, c'est exactement la façon dont nous avons trouvé l'article Garth. Donc, je vais dire ici, si l'article que l'ID du produit est égal à l'article Garth, que je passe dans cet ensemble ici, garde l'ID du produit point point point de l'article. Ensuite, nous devons avoir cet article, cette quantité augmentée. Donc, nous disons juste item.quantity égal à l'article la quantité que nous avions avant comme précédemment, plus la quantité qui est passée avec l'article Garth. Donc, je vais dire ici panier article point quantité. Donc, après cela, nous économisons et nous vérifions si nous augmentons vraiment la quantité. Donc ici, mon garde est à nouveau initialisé. Je clique sur OK, j'ajoute, vous voyez, nous avons augmenté la quantité en fonction de leur article de garde si elle existe ou non. Donc, quand je clique sur un autre produit, ok, je n'ai ici qu'un seul produit. Lorsque je clique sur un autre, il ne trouvera pas ce produit, donc il ajoutera un nouvel article, comme vous le voyez ici. Lorsque je clique à nouveau, nous verrons que cet article augmente la quantité. Troisième produit. Nous avons ici, trois produits. Encore une fois, il augmentera sa quantité. Nous n'avons donc qu'un seul produit, mais la quantité est différente en fonction de ces clics. Il vaut mieux toujours dans certains cas, à l'intérieur du mappage, vous retournez l'élément mis à jour. Donc, vous dites juste ici encore que le retour pour moi l'article. Bien sûr, nous utilisons les références de tableau, mais il est préférable de retourner l'élément à la carte afin que les éléments puissent être mis à jour comme d'une manière agréable. Donc, après avoir sauvé, essayons encore. Nous avons initialisé, encore une fois notre article de panier. Je clique sur OK. J' augmente la quantité et j'ajoute un nouveau produit avec la nouvelle quantité. J' ai encore cliqué ici. Et je vois que nous avons aussi cette quantité. Bien sûr, en tant que devoirs pour vous, je vais l'ajouter à la section suivante. Quand je veux ajouter à leurs cartes sur l'article, je veux que vous montrer un bateau à l'utilisateur qu'il peut, que l' élément de garde est ajouté parce que quand il peut prendre parfois et ce n'est pas une bonne expérience utilisateur comme nous ne pouvons pas voir ce qui s'est passé. Comme, bien sûr, l'utilisateur ne verra pas ce journal de console, mais vous allez simplement cliquer, mais il ne voit rien si leur article de panier est ajouté ou non. Bien sûr plus tard, nous allons mettre à jour ce tableau ici pour montrer que, ok, ceci, il y a un nouvel article de panier ajouté ici, mais il vaut mieux aussi bien ajouter une boîte de dialogue de confirmation ou confirmer que ce panier ou cet article est ajouté au panier avec succès. C' est donc notre méthode d'article de garde. C' est simple, nous avons défini et obtenir Garde aussi. Donc, nous allons utiliser cet article get panier. Comme vous le voyez ici, que lorsque nous rechargeons l'application, nous initialisons à nouveau le stockage local. Nous ne recevons donc aucun avantage du stockage local car c'est si, si le client ou l'utilisateur quitte le site Web et y retourne, il perdra son article de panier. Donc nous devons les garder dans leur magasin local. Et ce sera ce que nous verrons dans la prochaine conférence, étape par étape. 156. Restez du panier sur la rechargée: Ok, donc comme vous le voyez ici, quand nous rechargeons l'application, nous perdons les articles du panier. Donc, quand j'ajoute un panier deux articles à leur histoire de panier, alors vous allez recharger l'application et nous perdons les articles et les articles se initialiser à nouveau. Donc, dans ce cas, nous devons en quelque sorte obtenir l'avantage du stockage local parce que nous avons dit que le client quitte le site Web et revient à nouveau, nous voulons garder son panier plein, alors comment nous pouvons le faire ? Donc, tout d'abord, je voudrais aller à mon initialisation du stockage local du panier. Ensuite, avant d'initialiser le Garth, nous pouvons vérifier s'il y a des gardes dans le stockage local ou non. Nous pouvons donc définir des cônes aussi, qui s'appelle chariot. Et cela coûte ou sera un type de garde. Et puis nous pouvons dire que ce point get guard, la méthode qui a défini dans la conférence précédente. Donc ici, je vois si j'ai un chariot ou pas. Donc, s'il y a un panier ou s'il n'y a pas de carte, nous pouvons alors créer l'initialisation du panier. Ensuite, nous pouvons utiliser la carte initiale pour l'ajouter à notre stockage local. Donc, nous pouvons alors utiliser toute cette partie du code ici. n'y a pas de carte initialisée précédemment. Donc, en fait, nous sommes juste en train d'initialiser le panier. Sinon, ne faites rien d'autre parce que si nous avons déjà le panier, alors nous ne l'initialiserons pas. Encore une fois. On n'appelle que cette partie. Nous n'avons pas de garde qui vient de la carte elle-même, qui provient du stockage local. Alors gardons ça et les grilles essayent ici. Et nous verrons que lorsque nous rechargeons l'application après avoir ajouté quelques articles à leur panier, nous les aurons toujours. Donc ici par exemple, j'ai deux articles, la quantité 2 et 1. Je vais recharger l'application. Donc, mon code vérifie s'il y a une carte dans le stockage local ou non, s'il n' y a pas de carte de stockage locale, alors initialisez-en une. Sinon, gardez-le. Ne faites rien, n'initialisez plus rien. Ainsi, nous obtenons l'avantage de revenir sur le site Web après avoir ajouté quelques articles à leur panier. Ainsi, l'utilisateur pourra revoir son panier lorsqu'il n'aura pas le temps d'acheter maintenant. Donc il peut retourner sur le site à tout moment, et alors il ne peut pas voir que sa carte est toujours remplie. Là. 157. Observer le badge de panier dans l'en-tête: Ok, maintenant dans cette conférence, nous allons observer le chariot. Donc ici, quand l'utilisateur ajoute quelque chose à son panier, alors nous allons ajouter ici un peu mauvais pour montrer combien d'articles dans leur panier nous avons ici. Donc, tout d'abord, je voudrais créer un composant pour cela. Nous pouvons donc utiliser le nombre d'articles de panier que nous avons ici. Alors faisons-le pas à pas. Tout d'abord, passons à l'en-tête de notre application. Comme vous vous en souvenez, nous avons créé cette icône dans l'en-tête, donc nous avons partagé l'en-tête et dans l'en-tête comme vous vous en souvenez, nous avons placé leur icône de panier d'achat. Au lieu de cela, je vais utiliser un composant qui peut l'appeler comme par exemple, des ordres et des ordres. On peut lui faire des courses, ou on peut dire juste garde. Et je peux, par exemple, juste comme ça. Donc, définissons ces composants dans la bibliothèque d'ordre. Donc on peut voir un oeuf générer et ensuite je veux générer un composant. Et ce composant sera placé dans le projet qui est appelé ordres. Et ici, nous pouvons dire que dans les composants, nous définissons l'icône du panier ou le panier mauvais. Qui peut dire que c'est à vous de choisir. Donc, nous pouvons avoir ici l'icône Garth, qui sera dans l'en-tête. Et puis nous faisons tout le personnel que nous faisons toujours je ne veux pas de style en ligne, je ne veux pas aussi bien des tests. Nous pouvons donc utiliser un sélecteur, que nous avons défini précédemment. Nous pouvons dire panier, puis icône. Et ici, on peut sauter les tests. Et puis nous exécutons ce composant. Nous avons fait ce commentaire plusieurs fois. Donc on n'a plus à l'expliquer à tout moment. Donc, nous avons maintenant ici le composant qui est créé, qui est icône de panier. Et à l'intérieur de cette icône de panier, je vais placer mon icône de panier, que j'ai définie dans l'en-tête. Et puis nous avons aussi besoin de tout enregistrer et de vérifier si notre composant fonctionne vraiment bien. Donc parce que je n'ai pas vérifié l'exportation, nous avons tout ça. Je vois que je reçois toujours l'erreur ici ou il y a l'article du panier n'est pas inconnu. Oui. D'accord. J' ai ici des fautes de frappe, alors gardons ça. Je suis sûr que nous aurons maintenant l'icône parfaite. Maintenant, ce n'est pas l'icône, l'icône de plan. C' est un composant que nous avons appelé dans l'en-tête de notre application ici. Donc, nous allons utiliser ce composant pour observer cette carte actuelle. Tout d'abord, je veux montrer ici combien de temps ou combien de garde nous avons ici. Donc, tout d'abord, lors de l'initialisation de ce composant, nous pouvons également utiliser le service de carte. Donc, je dirai le service privé puis de garde, que nous avons déjà défini dans notre module de commandes. Donc, nous pouvons dire service de chariot et les erreurs de gardes ou dans Orangi sur Edit, nous pouvons dire ce service de garde et ensuite nous pouvons dire obtenir panier, comme vous le voyez ici. Donc, nous pouvons obtenir la carte actuelle qui est chargée à notre application. Donc, tout d'abord, nous devons définir une variable qui est appelée, par exemple, nous pouvons dire le nombre de cartes. Et ce compte de cartes a peut-être un numéro. Et ce nombre peut être initialisé en tant que 0. Donc, nous pouvons dire que le nombre sera initialisé comme 0. Et puis nous pouvons dire cela après avoir obtenu ce garde, parce que ce chariot va revenir comme une carte. Donc on peut dire ce nombre de cartes. Je veux que vous montrer comment tout peut être dans une ligne après avoir obtenu le panier, nous pouvons dire que les articles parce que cela va revenir pour moi garde. Et puis je dis longueurs. Donc ce nombre de poussettes sera la longueur des articles qui sont à l'intérieur de cette garde. Alors sauvegardons cela et nous allons au modèle et afficherons ce panier ou ce numéro près de cette icône afin que nous puissions rester petit, dag. Et nous définissons comme on peut dire le nombre de gardiens. Donc, sans style, juste pour voir comment nous avons le nombre de cartes dans l'en-tête de ce composant. Nous rechargeons donc l'application. Donc, parfois après que vous ne voyez pas ces changements, vous avez juste besoin d'enregistrer peut-être à nouveau l'en-tête, alors vous verrez ces changements. Donc, comme vous le voyez ici, nous avons trois articles parce que dans notre entrepôt local, nous avons ajouté trois produits. Ok, que maintenant nous avons le numéro des icônes ou, ou des éléments qui sont dans nos cartes. Chaque fois que je recharge l'application, j'aurai les articles ou combien d'articles dans leur panier j'ai ici. Donc, tout d'abord, nous avons aussi besoin de le styliser. Alors faisons comme un badge d'être une icône rouge ici. Il montrera que nous avons ici trois éléments. Donc, pour ce faire, prime end aussi vous fournir quelque chose appelé badge. Vous pouvez également utiliser directement l'icône avec ce badge, ou sinon vous pouvez utiliser uniquement le badge et le placer d'une manière ou d'une autre et dilater sur votre chemin. Donc, utilisons le basique. Je vais utiliser ces chiffres. Donc je vais utiliser celui-là. Donc, si nous allons à leurs sources, nous verrons que celui-ci, qui est appelé Danger, donc cela aura trois et alors il aura la couleur actuelle, ce qui est appelé danger. Donc, ce que nous avons besoin d'abord pour importer le module, qui est appelé module de badge. Mais dans ce cas, à l'endroit où nous avons créé leur composant, ou à l'endroit où nous allons appeler ce badge. Donc, dans notre cas, ce sera dans le module des commandes. Donc, dans le module Orders, je vais importer cela. Donc, nous avons ici le module de badge d'importation. Et le module de badge sera dans le tableau d'importation de ce module. Nous économisons et nous retournons à l'icône de notre panier. Nous obtenons le modèle de ce badge rouge. Alors on y va, on dit « P badge ». Et au lieu de ce petit ce que nous avons défini ici, nous le plaçons juste et le compte de garde serait comme d dt de cette théorie, le nombre codé en dur. Donc on peut dire que le nombre de Garth sera la valeur de ce badge. Et nous enlevons l'ancien que nous avons, et nous rechargeons l'application et voyons si nous avons le lot, sympa, nous l'avons ici aussi. Avez-vous une autre option pour utiliser un qui vient aussi avec icône ? Donc, vous pouvez utiliser celui-ci. Donc, nous pouvons aussi bien aller ici et voir dans les sources, par exemple, nous avons positionné badge et ce sera celui. Nous pouvons prendre, le milieu, par exemple. Ok, copiez toute cette partie. Et puis nous supprimons tout cela parce qu'il vient par défaut avec l'icône. Donc nous avons ici le genre, il est remis ou la zone. Donc maintenant, nous avons leur couleur et le nombre ou la valeur de cet article ou article de panier sera le nombre de cartes, que nous avons défini précédemment. Et nous avons une taille de police, nous avons un style. Et voici les dents de l'icône du calendrier PI. Nous allons utiliser cette icône, qui s'appelle panier. Donc, après avoir sauvegardé cela, revenez à notre application dans le front end. Nous verrons que nous avons le panier ici. Ok, ça semble grand, mais oui, on peut, tu peux le coiffer comme tu veux. Vous pouvez donner une police plus petite ici comme vous le voyez, car il a spécifié une taille de police dans le style de cet œil afin que nous puissions la rendre plus petite comme 1.5. Il sera comme plus clair et plus agréable et vu pour les utilisateurs tous d'entre eux. Ici, nous avons l'article de garde qui est mis à jour avec le nombre actuel de mes articles de panier dans mon stockage local. Alors peut-être que dans ce cas, allons aussi styler cette icône afin qu'ils puissent être les mêmes, nous pouvons lui donner la même propriété, donc nous pouvons donner la même coloration, comme nous l'avons ici, un texte de classe P secondaire. Donc, nous pouvons aller à nouveau à notre composant d'en-tête, et nous pouvons donner ce style à cette classe, à l'icône de l'utilisateur. Donc, pour ne pas avoir différents styles partout. Et aussi, nous devons donner le style de couleur sont la taille, la taille police de l'icône. Donc, il peut être aussi bien la même chose que nous pouvons donner ici Style et aller au composant d'en-tête. Et puis nous disons ici, la taille de la police sera de 1,5 gramme. Bien sûr, ce sera aussi un composant à l'avenir lorsque nous allons voir les ordres de l'utilisateur, lorsque nous cliquerons sur cette icône. Donc, nous allons remplacer comme cela toujours aussi bien avec le composant comme nous l'avons fait avec l'icône de panier de commandes. Alors sauvegardons tout maintenant et vérifions si nous avons ce que je coifferais, nous n'avons aucun problème. Joli. Nous avons maintenant le panier et les icônes utilisateur ressemble le même. Mais maintenant j'ai un problème comme quand je veux ajouter un élément à cette garde, par exemple, ajoutons celui-ci. Je vois qu'il n'est pas mis à jour. Donc seulement quand je me rafraîchis. D' accord. Je vois que l'article est ajouté à mon panier. Donc, nous devons en quelque sorte observer, comme faire cette variable de somme et cette variable observe leur stockage local, regarde le stockage local regarde toujours mes articles de panier. Donc, quand Ellie change se produit dans l'application concernant leur panier, alors cela sentira le changement et ensuite il fera rapport et me le montrera ici. Nous allons donc utiliser pour cela les observables. Donc, pour comprendre observateur sera plus, vous le verrez ici. Nous allons donc faire une variable dans leur service qui est appelé sujet, et ce sujet est observable. Donc nous pouvons nous abonner à cet observable comme je peux, ceci, ce compte de garde variable. Quand est-ce que nous allons toujours regarder cette carte comme le panier est toujours mise à jour. Donc, chaque fois que je clique quelque part pour ajouter au panier, enlever quelques cartes, alors cela va écouter ça et dire, ok, je suis mise à jour, j'ai eu quelques mises à jour. Faisons ça. Donc étape par étape, faisons l'observable. Comment nous pouvons faire un public observable. Public observable pour moi, je peux le faire à l'intérieur du service de cartes. Donc, nous pouvons définir un observable simplement en appelant quelque chose appelé sujet. Si vous vous en souvenez, nous avons également utilisé le sujet dans n'importe quel shell ou mis fin à l'abonnement comme vous l'avez vu précédemment. Donc, nous pouvons utiliser un sujet aussi ici. Mais au lieu de cela, nous disions comme ça, nous pouvons définir garde et ce chariot, comme je vous l'ai dit, toujours, les observables sont suffixe avec ce signe de dollar. Et nous ne pouvons pas dire que cette carte a un type ou un sujet et le sujet aura un type que nous avons déjà mis, si vous vous souvenez, quand nous étions en train de mettre fin aux abonnements. Mais maintenant, nous allons dire que ce sujet contiendra le panier. Et ce sujet, nous faisons un nouveau sujet. Nous l'initialisons si rapidement. Nous créons un objet. Ok, Donc dans ce cas, quand je vais à mon composant ici, comme par exemple, disons icône de panier, alors je ne vais pas utiliser get Guard seulement. Get garde ne revient pour moi que la garde actuelle quand je charge l'application. Non, je veux l'observer d'une manière ou d'une autre. Donc nous pouvons dire aussi bien ici, ce service de cartes à points. Nous avons donc ici définir leur service de panier et ensuite le panier, cet article ou cette variable que j'ai définie. Et puis je dis abonnez-vous. Je vais donc m'abonner à cette carte, qui me retournera le panier lui-même. Et puis la carte elle-même. Je peux obtenir la longueur et l'assigner à leur nombre de chariots. Donc on ne peut pas dire ici que ce compte de cartes sera le gardien. Celui-ci serait un chariot. Bonne longueur des points. Donc, dans ce cas, nous aurons toujours le chariot observé. Ainsi, chaque changement qui arrive à leur panier sera observé par leur nombre de chariots. Ok, maintenant, retirons cette ligne. Donc maintenant, si je vais à l'application, j'arrive ici 0, ok, je veux ajouter quelque chose à leur panier. Ce n'est toujours pas observé. Donc, un état de changement, comme ici, nous disons que le changement n'est pas ressenti comme cet article ou que cet élément de stockage local de carte est ne ressent pas les changements. Et nous ne pouvons pas non plus observer cela aussi. Donc, nous devons dire à ce sujet que vous mettre à jour. Donc, tous ceux qui s'abonnent à vous peuvent ressentir ce changement. Alors, comment peut-on faire ça ? Si on va au service de garde. À la fin de cette méthode, je dirai après avoir tout initialisé, je, avant de dire retourner la voiture, je ne peux pas dire cette carte à points, le sujet que j'ai créé. Et ensuite ensuite. Ensuite, au lieu de retourner la carte, je peux dire aussi ensuite, mettre à jour le panier. Donc, dans ce cas, tous ceux qui ajoutent, quand j'ajoute quelque chose à leur panier, tous ceux qui s'abonnent à ce précieux, il sentira le changement parce que alors cela se met à jour et avec le plus récent garde après que j'y ai ajouté des éléments. Et puis tous ceux qui s'y abonnent, il dira, d'accord, c'est une mise à jour. Je vais obtenir cette mise à jour et la montrer à l'utilisateur. Donc, pour cela, je veux vous montrer un journal de console. Donc, vous voyez que ce journal de console sera exécuté chaque fois que j'ai, par exemple, une mise à jour sur le panier qui ajoute des articles à leur panier. Alors sauvegardons cela et allons à notre application. Encore une fois. Il sera rechargé. Ok, maintenant nous avons toujours l'Euro parce que nous n'avons pas initialisé cet abonnement ou abonné. Je vais donc ajouter des articles à leur produit. Donc, par exemple, je vais ajouter celui-ci. Lorsque je clique, je vois que cela a un 5 car il a été mis à jour. Le panier que nous avons ou l'observable que nous avons défini là. Et cela observable. Toujours observer, ou cet article est toujours d'observer ce que nous faisons à leur panier. Donc glucose, j'ai ici comme le journal de la console que je t'ai montré. Donc, quand je clique sur Ajouter au panier, l'icône ici en haut va sentir le changement et la console. Donc, ici, nous pouvons dire, par exemple, cliquez, je vois que vous regardez, ce sont des éléments que le garde a été mis à jour. Et à cause de cette prochaine, que nous avons ici, alors l'objet de garde observable ou gardes, va mettre à jour Intel et dire à tous ceux qui s'y abonnent, comme dans notre cas, cette icône de panier que d'accord, je suis mis à jour. Veuillez vous mettre à jour et faire le code ce que vous faisiez dans l'abonnement. Donc, dans ce cas, je console journal et met à jour le nombre de gardiens, ce que je définis ici. Et je l'ai utilisé dans la valeur de ce badge, donc je vois le numéro ici. Mais maintenant, quand je recharge l'application, je reçois toujours 0 et ne pas obtenir que le compte actuel ou précédent de ma garde où j'ai précédemment dans mon stockage local parce que l'Europe que le stockage ocre est correct, tout va bien. Nous avons cinq éléments, mais nous ne pouvons pas voir la mise à jour ici. Parce que aussi quand nous initialisons l'exemple complet que garde, si vous vous souvenez, nous disions s'il n'y a pas de carte, alors ok, mettre à jour ou créer un nouveau garde dans ce stockage. Sinon, s'il n'y a pas de carte, alors nous pouvons dire ici aussi, ce sujet de garde pris sera ou que prochaine mise à jour avec la carte actuelle que vous avez ici. Donc, par exemple, je peux dire celui-là. Donc, dans ce cas, je peux dire d'autre, s'il y a panier puis mis à jour pour moi avec la carte actuelle. Donc, quand il n'y a pas de carte, initialisez une nouvelle carte et ajoutez-la au stockage local. Sinon, il suffit de mettre à jour ce sujet gérunds, que j'observe avec le garde que vous avez trouvé dans le stockage local. Alors sauvegardons cela et revenons à l'application. Vous verrez que cela ne fonctionne plus. Donc c'est parce que nous utilisons le sujet. Il vaut mieux aussi utiliser quelque chose est similaire au sujet, mais c'est appelé sujet de comportement. Vous pouvez, au lieu de cela, utiliser sujet de comportement. Donc ça fait exactement la même chose. Mais nous, parce que nous allons, nous appelons cela dans l'instructeur du constructeur de module du module, alors ce ne sera pas prêt. Le sujet n'est pas encore prêt, donc il ne sera pas exécuté et il n'obtiendra pas le prochain. Donc, cela est exécuté et terminé avant que ce sujet ne soit initialisé. Il est donc préférable d'utiliser pour ce sujet de comportement. Nous avons votre sujet, c'est exactement le même. La différence ici que vous devez dire que l'objet de comportements doit être initialisé avec quelque chose comme dans votre panier. Donc nous ne pouvons pas simplement dire ici, ce panier à point. Donc, je reçois leur panier qui est dans le stockage local, et puis je crée mon sujet de comportement. Et dans ce cas, on n'a plus besoin de ça. Donc, après cela, nous avons le panier initialisé avec le garde actuel, qui est stocké dans le stockage local. Donc, de cette façon, je vais arriver ici cinq à chaque fois que je recharge mon application. Donc maintenant, lorsque j'ajouterai un nouveau produit à mon stockage local, j'aurai, par exemple, celui-ci. Nous pouvons avoir Ajouter au panier et nous arrivons ici, six obtient de plus en plus et observant ce nombre. Et quand je recharge l'application, j'en ai encore six ici. Ok, essayons de retirer tout le chariot qui est dans le stockage local. Donc totalement et voir pour l'utilisateur qui vient pour la première fois à notre boutique. Donc, je vais supprimer sélectionné. J' ai supprimé le garde. Maintenant, je vais à nouveau à la page d'accueil et je suis nouveau client qui vient à la boutique. Je veux ouvrir la console. Je veux voir si je reçois une erreur. Nous rechargeons donc l'application. Alors je dis ici, rechargez. Tout d'abord, je reçois une erreur. Impossible de lire les éléments de propriété de null où j'obtiens cette erreur dans le composant d'icône de panier. Ok, nous devons aller à ce composant parce que nous avons vu que ces éléments n'est pas défini parce que le garde n'est pas encore initialisé. Supprimons donc ce journal de console. Et puis nous disons que si la carte a un objet ou le garde que j'ai obtenu est défini, alors donne-moi la longueur de celui-ci. Donc, dans ce cas, nous avons ce point d'interrogation. Sinon, dans TypeScript, vous pouvez dire à point d'interrogation lorsque cette indéfinie. Alors garde Count, donne-le comme 0. Donc c'est comme si d'autre, donc le compte des gardes sera celui-ci. Mais quand celui-ci est indéfini à cause de ce point d'interrogation, pour éviter l'erreur dans la console comme nous l'avons vu précédemment, alors retournez comme 0. Donc, nous sauvegardons cela à nouveau, rechargeons l'application. Nous n'avons rien dans leur garde maintenant, alors ok, nous n'avons pas l'erreur, mais pour le tester plus, nous devons supprimer, encore une fois, recharger l'application, aller sur leur console. Bien, nous n'avons aucune erreur. Maintenant, je vais ajouter un élément à ce Karp. Je clique sur les mensonges, j'ai 123. Oui, comme vous le voyez. Donc, lorsque je clique ou un autre produit, je vois qu'il n'est pas ajouté parce que je ne reçois que le nombre d'articles. Donc, ils sont répétés produit ne sera pas compté ici. Nous n'avons donc que les différents produits. Et nous verrons quand nous allons au détail de garde, nous verrons combien d'articles nous avons obtenu et combien de fois l'utilisateur clique sur Ajouter au panier pour vous dans la prochaine conférence comme un devoir, Je veux que vous ajoutez un pop-up comme vous le verrez, et je l'explique dans les devoirs. Donc, quand je clique sur Ajouter au panier et que tout est réussi, je veux que vous affichez un pop-up comme l'article est ajouté avec succès à leur panier. Donc, dans ce cas, l'utilisateur ne cliquera pas plusieurs fois et il ne le sait pas. Il, ok, il est ajouté au stockage local tout parce que c'est vrai. Mais nous n'avons aucune notification pour l'utilisateur, ce qui n'est pas une bonne expérience. Comme dernière question, devons-nous mettre fin aux abonnements ici ? Non, nous n'en avons pas besoin parce que nous sommes toujours abonnés à leur panier. Nous n'avons pas besoin d'avoir n abonnement parce que je ne pars pas en premier. Et ce composant, cet en-tête existe toujours. Ce composant a toujours été créé pour une seule fois et il n'est pas créé plusieurs fois. Donc, je ne crée pas multicolore de plusieurs abonnements. Mais ici, nous avons juste une fois et c'est tout le temps, tout le temps quand je visite ou navigue dans mon application, j'ai cet article abonné et il observe toujours le panier. Donc, dans ce cas, en résumé, nous avons créé dans leur service de panier quelque chose appelé sujet de comportement, qui est observable et ce observable sera observé et ne pas défier toutes les personnes ou tous les éléments ou leurs composants qui sont s' abonner à ce comportement à concernant ses modifications. Donc, quand je dis point de carte suivant, par exemple, dans ce cas ici, nous avons l'un d'eux. Ici, nous avons point suivant. Ensuite, je mets à jour ce sujet de comportement. Donc, l'icône du panier écoutera ce changement et exécutera le code qui sera à l'intérieur de l'abonnement en fonction de leur garde qui est retourné de ce sujet de comportement. C' est donc la façon la plus simple d'observer les choses dans mon application. Sinon, nous pouvons utiliser NG RX, ce qui est plus compliqué. Et pour cela, je ne vois pas comme une chaleur d' utiliser MDR x ou qui est la gestion de l'état seulement pour ce cas simple, dont nous avons seulement quatre cette carte. Je vais, bien sûr, à la fin de cette section, expliquer comment ajouter dans le magasin d'état RX en utilisant des schémas NX. Et aussi, nous allons mettre en œuvre ce chariot comme dans le magasin d'état, pas comme nous l'avons ici avec les observables. Et vous avez optionnel si vous voulez suivre la façon MDR x, ou vous pouvez suivre cette façon simple et agréable ici. 158. Ajoutez du produit au panier avec des quantités: Bon, maintenant nous allons dans cette conférence pour ajouter le produit au panier, mais avec la quantité, si vous vous souvenez, nous n'avons ajouté ici qu'un seul article de ce produit. Donc maintenant, nous allons au détail du produit et nous allons sélectionner Quantité. Et puis je vais cliquer sur Ajouter au panier. C' est exactement la même chose que nous avons fait avec le composant article produit. Nous allons faire avec le composant de détail du produit. Donc, tout d'abord, je vais avoir cet article de produit ici. Si vous vous souvenez, nous utilisions également le service de chariot. Et dans le service de panier, nous utilisions le produit publicitaire au panier. Donc, la principale différence ici, nous allons utiliser le dans les pages, page produit. Nous devons utiliser cette quantité que nous obtenons à partir de la quantité entrée ou du numéro d'entrée, puis la placer ou la transmettre lorsque nous créons l'article produit. Donc, dans le composant de page de produit, j'irai au fichier TypeScript, puis je vais avoir à nouveau le produit ou le service. Et puis nous allons utiliser ce service de panier lorsque je vais ajouter le produit au panier. Donc, tout d'abord, nous pouvons obtenir cette quantité. Nous avons donc défini précédemment la variable qui est appelée quantité. Donc, pour comme faire un préfixe, nous pouvons initialiser cet élément avec un et min peut être un à 100, ne pas avoir 0. Et aussi nous pouvons initialiser la quantité avec le numéro un. Donc nous pouvons dire ici au lieu de nombre, vous pouvez dire aussi, cela peut être un. Mais bien sûr, il ESL et se plaindre lorsque vous définissez le type, puis la valeur, parce que la valeur est un. Donc on sait que c'est un numéro. Donc automatiquement, TypeScript dira qu'il s'agit d'un nombre. Donc, nous disons que cette quantité est initialisée et ensuite nous allons tout sauver. Nous essayons cela après avoir mis à jour notre application. Donc, nous voyons que ce n'est pas initialisé. Je pense que j'ai un dipôle, ouais, ok, on doit avoir ici égal, pas taper. Donc, nous pouvons avoir ici la quantité est égale à un. Et comme nous voyons qu'il est initialisé avec un et je ne peux pas aller à 0. Maintenant, lorsque je clique sur Ajouter au panier, je dois ajouter cet article au panier. Donc, tout d'abord, je peux tirer pour appeler le service de garde exactement comme nous l'avons fait avec cet article ou dans l'article de produit que nous avions défini précédemment. Donc, tout d'abord, je vais avoir la création de l'article de panier. Donc, je dirais article de panier const. Et cet article Garth sera de type article de panier. Et il sera égal à aimer l'article lui-même, qui sera l'ID du produit, sera l'ID du produit où je suis maintenant. Donc, si vous vous souvenez, nous avons ici le produit qui obtient, donc nous ne pouvons pas dire après que nous obtenons ce produit point parce que nous n'avons pas défini ici. Et nous avons rempli notre variable ou membre de la classe avec le produit que nous avons obtenu du backend ici. Donc, nous pouvons dire que ce point de produit ID point. Donc, je pense que l'ID de produit de l'article Garth serait cet ID de point de produit et une quantité sera cette quantité de point. Donc, comme une quantité sera changée en fonction mes changements ici parce que j'utilise le modèle NG, qui aura une liaison bidirectionnelle. Et il reflétera que toujours ou reflète toujours le numéro de page ou d'entrée, que je change ici de l'utilisateur. Et puis il mettra cela dans la variable qui est appelée quantité. Et je l'ai défini ici comme une classe membre comme vous le voyez ici. Alors maintenant, nous allons à nouveau et nous ajoutons cet article de panier à notre panier. Donc, je vais dire ceci cependant, service de garde, point, ajouter ou définir élément de coupe. Et puis je passe l'article du panier, que je veux. Donc, quand nous sauvegardons cela et nous essayons cela dans notre application, donc je vais enregistrer ici, et je choisirais cinq ou six puis ajouter au panier. Et puis cet article sera ajouté à mon panier. Alors vérifions si nous l'avons comme vraiment dans notre stockage local. Donc, nous avons ici deux articles. Je vois ici qu'il n'est pas ajouté. Donc peut-être que ce bouton ne fonctionne pas. Revenons donc à notre application et vérifions. Ok, on a le bouton ici. Nous n'avons pas de bouton PI, donc nous pouvons utiliser seulement Glick, comme nous n'allons pas utiliser l'onclick qui vient seulement avec le bouton PI de Prime NG savoir que nous avons un bouton. Donc, le, encore plus loin le bouton pour tirer que cet événement, nous pouvons utiliser seulement clic, mais lorsque vous utilisez l'énergie première dans la documentation, ils ont dit que vous devez utiliser onclick. Donc, dans ce cas, nous n'avons que bouton. Nous allons le changer pour cliquer. Alors sauvegardons et revenons à notre application. Et puis nous vérifions ça. Donc, nous en sélectionnons quatre. Nous avons ajouté, ok, carte mise à jour. Nous avons maintenant l'article qui a la quantité cinq, comme parce que nous l'avons déjà dans le panier. 159. Page de panier: Ok, dans cette conférence, nous allons gabariser cette page de garde, cette page actuelle. Il va avoir tous les articles de panier où je vais soumettre pour commande et ensuite je peux examiner mon panier et ICU ce que j'ai commandé. Et je peux toujours changer la quantité, quantité ou le nombre d'articles que j'ai commandés. Et bien sûr, nous allons lister comme quelque chose comme mon panier a trois articles et nous avons un bouton comme retourner à la boutique à nouveau et aussi quelques informations. Et aussi, nous allons implémenter la suppression d'un élément de la carte. Donc, tout d'abord, nous allons faire ce modèle que je vous montre ici. Donc, d'abord, nous allons créer un composant qui est appelé page de garde, et il sera dans la page Commandes. Donc, je vais aller à une console ECS, puis cliquez sur Générer, puis sur composant. Et puis j'aurai ici les pages dans les pages à l'intérieur de la bibliothèque des commandes. Donc, je vais avoir ici les pages, puis la page du panier. Et puis nous allons sélectionner le projet qui sera des commandes, parce que nous devons le faire dans la bibliothèque des commandes. Et la même chose pour les autres composants. Donc nous avons un style de vie. Nous avons aussi, sauter le test. Donc, ici, nous avons tout cela et aussi le sélecteur peut être des commandes et la page du panier. Donc, dans ce cas, nous aurons un composant créé. Nous avons juste besoin maintenant de renvoyer ce composant à leurs itinéraires. Donc, si vous vous souvenez comment nous avons créé des itinéraires dans le module de l'application. Donc, nous avons ici dans le module d'application de magasin d'énergie, nous avons créé quelques itinéraires et nous avons seulement l'itinéraire principal. Mais dans le module produits, nous définissons aussi les modules enfants. Nous ferons la même façon que nous avons fait exactement avec le module de commande ou comment nous l'avons fait dans les produits. Alors faisons ça. Donc d'abord, je vais aller à la bibliothèque des commandes. Fermons tout et revenons sur les lèvres. Et bien sûr, nous avons déjà importé la commande est module dans notre module d'application, donc nous n'aurons aucun problème. Donc nous fermons tout et nous passons à nos bibliothèques et nous avons ici des ordres. Et je vais implémenter les routes dans le module Orders. Donc, nous définissons une constante qui est appelée routes. Et il aura un type de routes. Donc, nous avons ici des routes et il aura le type de route et la route que nous l'importons à partir d'Angular. Et ce sera tableau, et ce tableau sera des objets tableau, et les objets seront Bath. Et par exemple, je peux définir le premier chemin, qui peut être panier. Et le composant de ce chemin sera le composant que j'ai créé, qui est le composant de page de garde. Donc maintenant, nous sommes prêts pour cela et nous allons juste à nouveau aux routes ou au module de routeur. Et dire que pour l'enfant comme nous l'avons fait exactement avec les produits et puis je passe les routes que j'ai créées. Donc maintenant, nous devons vérifier si tout fonctionne bien. Je vais à ma demande, je montre celle-ci. Si vous voyez que c'est un port indifférent, j'ai démo, je l'ai déjà préparé, donc pour vous montrer ce que nous allons faire et ensuite nous implémentons cela facilement. Donc, tout d'abord, je veux quand je clique sur cette icône, je vais à leur page de panier. Donc, nous avons créé le composant pour l'icône du panier et nous avons juste besoin d'ajouter quelque chose qui est appelé routeur, lien routeur. Et c'est le lien du routeur m'emmènera à la page du panier. C' est simple. Donc, nous avons juste enregistrer, aller à nouveau à l'application et rechargé et nous cliquons sur cette carte. J' ai ici une erreur, je dois l'enlever. Et puis nous retournons à leur panier ou à nouveau à la page. Et nous verrons que nous sommes en mesure d'aller à la page du panier fonctionne. Donc, ce que nous allons modèle. Donc, nous allons au composant qui est appelé page de panier. Et dans la page du panier ainsi que dans chaque composant, nous le définissons d'abord avec la page du panier ou le nom du composant. Et puis nous disons div p grille, et nous allons utiliser la grille ici aussi. Et comme vous le voyez, nous avons dans le modèle que nous avons ici huit colonnes, parce que ici je vais mettre le résumé des commandes comme le prix total et s'il ya des taxes et des navires ou quelque chose comme ça. Donc, tout d'abord, nous pouvons avoir la grille et il aura huit colonnes. Donc, je vais mettre div appel et, ou, désolé appel P. Et 8 premier div aura comme un bouton et nous pouvons le donner comme ça. Et cela aura un bouton PI, donc nous pouvons utiliser le bouton aussi. Donc le bouton, je peux le prendre de l'énergie Prime. Donc, nous pouvons utiliser exactement le même bouton comme nous l'avons fait auparavant plusieurs fois. Je n'ai pas à le répéter. Donc, la seule chose qui manque ici est que j'ai besoin d'importer à nouveau le module du bouton. Donc nous avons juste besoin d'avoir ici le module de bouton. Donc, nous devons ajouter le module de bouton, qui vient aussi de Prime energy. Titre. Donc, dans le titre, nous aurons quelque chose comme ma carte afin que nous puissions créer un autre div. Et ce div aura aussi H4 et H4. J' aurai un texte qui s'appelle mon panier. Et comme je peux mettre l'information, par exemple, on peut dire le nombre de cartes. Donc nous pouvons mettre ici comme le compte du chariot, comment nous allons le prendre aussi. Nous l'avons déjà fait avec la navigation, mais nous pouvons le faire à nouveau ici pour corriger les informations. Donc, nous avons ici H4 et aussi nous pouvons ajouter après cela une phrase comme comment nous avons ici comme l'expédition après paiement, délai de livraison, oui, quelque chose comme ça. Donc, nous pouvons aussi bien ajouter cette inflammation. Donc, je vais ajouter un autre div. Et à l'intérieur de cette div, je peux lui donner une classe aussi. Et ce verre, nous pouvons lui donner une expédition de garde, par exemple, info, afin que nous puissions le colorer. Et puis nous pouvons mettre le texte ici. Donc, bien sûr, ce texte peut être dynamique en fonction des méthodes d'expédition si vous l'implémentez dans le back-end. Alors sauvegardons et stylisons cette partie. Je suis sûr que cela ne fonctionnera pas directement. On doit faire un peu de style. Donc nous devons d'abord avoir un sac pour montrer le bouton. Donc nous avons juste tout ce que nous pouvons enlever ce bouton ou nous pouvons le laisser comme ça. Donc, nous pouvons avoir une autre méthode pour cela ici dans le script du composant. Pour qu'on puisse retourner faire du shopping. Et puis à l'intérieur, nous allons avoir le bouton où ça me ramènerait au magasin. Donc j'ai besoin dans le constructeur, j'ai besoin d'appeler le routeur. Donc, je dirais ici routeur privé. Et puis nous avons besoin d'un routeur. Et à l'intérieur de ce routeur, nous allons avoir commandé le bouton retour. Nous dirons ce routeur point naviguer. Et puis nous spécifions la navigation qui sera des produits. Donc, je vais mettre ou je vais revenir à la page qui est appelé produits de cette façon. Et nous verrons que nous avons obtenu la base dans notre page. Donc, si je vais cliquer sur retour à la boutique comme j'étais, alors je retournerai à la boutique comme je l'étais, qui vous êtes comme je vous l'ai montré avec ce externe et ici nous avons ma carte, ce numéro, nous allons la remplacer par la carte actuelle. Les articles comptent. Et ici, l'expédition, nous allons le styliser. Donc nous avons juste besoin d'ajouter cette classe d'une manière ou d'une autre. Donc, tout d'abord, je dois définir une classe ou un fichier ou un fichier de style, qui sera basé dans les lèvres exactement dans la bibliothèque où nous avons créé. Cela ne donnerait donc aucun conflit ou ne nous embrouillera pas pour voir où il se trouve. Donc, je vais donner cette carte que CSS, je crée un nouveau fichier et ce fichier, je vais l'importer dans les ordres. Donc, ici, nous devons dire Importer, pas URL, mais seulement importer ce lien que nous voulons importer, qui est point de carte SCSS. Donc, après cela, nous devons être sûr que c'est aussi les commandes est important dans n'importe quel magasin. On doit vérifier ça, d'accord. Il est importé, donc nous travaillons bien ici. Donc, comme vous l'avez vu précédemment, nous avons créé une classe qui s'appelle page de garde, comme nous pouvons dire page de panier. Et ces cartes page nous pouvons lui donner, par exemple, la hauteur moyenne. J' aime donner une hauteur minimale pour le chariot ici. Donc nous pouvons avoir ici un espace vide pour nous laisser travailler bien. Et bien sûr, je vais implémenter plus tard quand nous n'avons aucun élément dans leur panier. Donc nous pouvons montrer que votre panier est vide. Nous devons donc le mettre en œuvre également. Et après cela, nous allons avoir cet article de panier ou nous avons dit que nous devons créer l'article Garth. Donc on peut dire carte à points. Et à l'intérieur de ces cartes à points, nous pouvons avoir cette expédition, désolé, expédition. Et nous pouvons donner à cette expédition comme la couleur verte. Et nous pouvons pousser le contexte sous un peu avec 15 pixels ou nous pouvons donner comme pas besoin pour cela. Nous pouvons simplement le pousser en utilisant les classes qui sont prêtes dans notre première extrémité. Donc nous pouvons dire comme ici, B ou bas de marge, ce qui sera comme si nous pouvions prendre cinq. Et aussi, nous pouvons le faire pour chaque div que nous avons créé. Donc, pour donner quelques espaces entre toutes ces feuilles de ne pas être collés les uns aux autres. Et on sauve tout. Et puis nous sommes prêts avec les premières lignes. Appelons maintenant l'élément de garde, qui est celui-ci. Donc, l'article du panier sera également à l'intérieur d'un div. Donc, nous avons ici quelque chose comme div et nous pouvons lui donner un nom qui est appelé article panier. Et à l'intérieur de cet élément de garde, nous allons avoir une autre grille parce que je veux avoir comme division de la grille. Donc, nous pouvons avoir ici deux colonnes pour l'image. Exemple 9 colonne pour l'inflammation et le nom, ainsi que trois colonnes pour le bouton ici. Donc, bien sûr, vous ne pouvez pas, vous savez comment, vous devez savoir que quand je crée une grille à l'intérieur d'un ici, donc à l'intérieur de huit colonnes, alors j'ai aussi ici encore une 12 colonnes. Donc, il sera lié au parent. Alors je suis à l'intérieur de quoi ? Je suis à l'intérieur de P call 8. Je ne suis pas à l'intérieur de la largeur comme toute la page parce que ici si vous voulez voir nous avons b, désolé, rappelez-vous. Et puis nous pouvons dire 12 moins 8 est 4. Et ici, nous allons mettre le résumé de la commande, nous pouvons l'appeler. Donc ici, dans ce domaine, dans cet espace, je vais mettre le résumé de la commande. Jusqu' à présent, le modèle de l'article de panier, comme nous l'avons dit, nous créons une nouvelle grille. On peut donner une grille. Et à l'intérieur de ceux-ci être super week-end, un autre live pour colonne qui contiendra l'image. Donc, nous pouvons dire l'outil d'appel P et il à l'intérieur, nous aurons l'image de l'article de panier. Donc, nous pouvons dire directement l'image aura la source. Je ne peux récupérer aucune image de Google. J' ai copié une image. Je vais le poster ici. Mais bien sûr, nous allons changer cela aussi. Donc nous ne pouvons pas dire que cette div aura une classe. Nous pouvons dire panier, article et image. Donc, il vaut toujours mieux préfixer comme ça. Nous pouvons donc utiliser cet avantage du SESS. Donc, nous pouvons toujours préfixer avec un parent, je dis élément écart et puis je passe cette chose que je veux le style. Et après cela, nous avons aussi besoin de la colonne, la deuxième colonne qui sera près d'elle où j' aurai les informations de leur produit. Donc on peut nous appeler, par exemple, oui, on peut lui donner huit ou sept aussi. Donc nous pouvons maintenant avoir neuf colonnes. Nous pouvons donc donner le nom du produit. Donc, nous pouvons donner div et il aura le nom de l'article du panier. Donc, nous aurons le nom de l'article du panier, qui sera comme codé en dur. Maintenant, nous pouvons juste coder en dur les choses que nous pouvons dire juste nom du produit. Nous pouvons aussi avoir un div et qui aura panier, article et ensuite prix. Et nous pouvons aussi donner un certain prix codé en dur et utiliser le drapeau de la monnaie. Ainsi, nous pouvons donner de la monnaie comme la pipe que nous avons créée précédemment, tout ce que nous connaissons ou en parlons auparavant. Et après eux, nous allons avoir le bouton Supprimer. Donc, si vous voyez que je veux supprimer ainsi le bouton de ou supprimer le produit du panier. Bien sûr, le bouton en prime end. Il y en a beaucoup. L' un d'eux est seulement avec icône, sorte que vous pouvez avoir un bouton sur moi avec icône. Donc, vous pouvez l'utiliser aussi. Donc, nous pouvons créer un div aussi. Nous pouvons lui donner la classe, qui est appelée garde Item remove. Donc, nous avons enlevé l'élément de garde et ce sera un bouton PI aussi, et il a un peu onclick dessus. Donc, nous avons le bouton P et ce bouton B aura la corbeille d'icône, exactement comment nous l'avons obtenu des ONG privées, puis supprimer l'élément de garde. J' ai donc besoin de sauter dans le fichier et de créer la méthode qui s'appelle l'élément CreateCars. On peut le laisser vider pour l'instant. Donc, après cela, nous avons créé le premier côté. Alors vérifions si nous avons tout va bien. Donc, après avoir chargé l'application, nous voyons que rien n'est stylé. On doit le styliser. Alors passons maintenant au fichier de style. Je vais avoir ici, le style à nouveau. Nous devons donc styliser tous les éléments que nous avons créés. Alors je cache ce panneau. Nous pouvons également fermer tout ce que nous avons précédemment afin de pouvoir voir ce que nous allons commencer. Donc, tout d'abord, nous devons avoir l'article, comme vous le voyez ici. Nous avons un fond blanc et était bordure et le rayon de la frontière. Donc je vais avoir ici dans la carte. Tout d'abord, je vais sauter à l'intérieur et dire que je veux article. Cet article aura une couleur de fond de comme une large et aussi une bordure, qui sera comme un gris plus clair. Et nous pouvons lui donner aussi un rembourrage pour que nous puissions pousser le contenu à l'intérieur de 15 pixels et nous pouvons aussi donner ce rayon de bordure, que je vous ai dit que nous avons des radios sur la frontière. Et puis nous pouvons dire que l'image que nous avons définie ici, sorte que nous pouvons, que nous avons IR, Garth image élément et à l'intérieur une image que nous pouvons aussi bien l'appeler et le donner à l'intérieur de cet élément que nous avons ici aussi, image. Donc, l'image à l'intérieur il y a la balise image et il aura une largeur élevée à 120 et max 100%. Donc, quand le site Web va être réactif, il est préférable de le donner comme une largeur maximale, qui est de 100. Ainsi, le contenu de l'image ne sortira pas du conteneur principal ou de leur conteneur parent pour ne pas avoir de problème dans le style. Donc, nous sauvegardons et allons à l'application, ok, Maintenant, nous avons les éléments de cette façon. Donc maintenant, nous devons faire un peu de style pour leur nom et aussi le prix et ce bouton, qui est déjà là, nous avons juste besoin de changer la couleur comme je vous montrerai plus tard. Donc, tout d'abord, nous devons styler le nom que je vais donner ici. Styling ou une classe qui est appelée nom. Donc, comme je vous l'ai dit, c'est un avantage d'avoir Garth, puis article, puis nom et ce que nous faisons comme nous pouvons donner ce préfixe et ensuite nommer comme vous le voyez ici. Pour que nous puissions profiter de SCSS ici. Donc le poids de la police de ce texte sera de 600 et la taille de la police peut être de 1 à EM. Donc on peut lui donner un peu plus grande taille. Et nous pouvons pousser ce contenu en dessous d'environ 15 pixels parce que comme vous le voyez, il colle l'un à l'autre. Et pour le prix, nous allons donner les mêmes propriétés qui sont ici, sauf que nous allons la colorer avec de l'orange ou notre couleur primaire. Donc ici, la couleur sera la couleur primaire, que j'ai définie dans mes fichiers SAS. Et nous verrons que nous avons le style bien ici. Je vais vous montrer plus tard comment colorer tous les boutons avec notre couleur orange avec une couleur primaire. Mais passons d'abord et nous allons mettre en œuvre, j'ai déjà dit que nous devons mettre en œuvre le, le comptage ou ce que l'on appelle la quantité. Et aussi le sous-total, si vous vous souvenez, nous l'avons déjà fait dans cette page de produit de la carte et nous avons ici la page détaillée du produit que nous avons cette quantité article, donc nous pouvons l'utiliser de la même façon que nous l'avons utilisé à partir de prime end. Pour qu'on puisse le copier. Et d'abord, mais vous devez créer une autre colonne parce que nous avons terminé deux colonnes pour l'image et sept colonnes pour leur contenu et bouton de suppression. Maintenant, nous devons créer une autre colonne, qui sont le reste. Donc, nous pouvons dire appel p, et puis il aura quatre ou trié3. Nous avons donc 12 colonnes au total. Et à l'intérieur de ces 12 colonnes au total, nous allons avoir ce numéro P ou le numéro d'entrée que nous avons défini dans notre page produits. Donc, si nous allons à la page détaillée du produit, sorte que vous pouvez aller rapidement, a sauté à elle. On peut dire « produit ». Et la page, comme vous le voyez ici, j'ai sauté directement à ce composant. Et nous avons dans ce composant que nous appelons le bouton quantité, qui est celui-ci. Pour qu'on puisse copier tout ça. Ce sera exactement la même chose. Nous devons donc revenir à notre composante qui est ici. Nous définissons donc celui qui est aussi bien ici. Nous n'avons donc pas besoin, par exemple, de toutes ces informations. Nous avons juste besoin d'avoir garde, par exemple, article et nous lui donnons la quantité. Donc, dans ce cas, nous pouvons le coiffer et lui donner un peu de classe. Et nous avons l'étiquette n'a pas besoin comme nous le voyons dans la conception afin que nous puissions l'enlever. Et p numéro d'entrée n'est pas important. Nous devons aussi importer. Nous vérifions comment nous l'avons dans l'énergie de la saumure. Donc, nous pouvons avoir ici des entrées, plusieurs entrées. L' un d'eux est le numéro d'entrée, donc il devrait être celui-ci. Vous pouvez copier, ok, le module de numéro d'entrée. Nous devons donc importer celui-ci dans notre module de commandes. La même chose que nous avons fait avec le bouton et d'autres choses. Donc, nous venons de mettre ici le module de numéro d'entrée. Donc, revenez à notre modèle pour voir si tout fonctionne bien. Ok, on l'a fait, on n'a pas besoin d'utiliser le modèle NG. Je vous montrerai plus tard comment nous pouvons en obtenir la valeur. Et le mode sera cette UML, afficher les boutons à travers la quantité d'ID d'entrée, et il aura. Donc maintenant, nous avons ce numéro d'entrée. Rechargeons la page. Ok, nous voyons comme un problème ici que ça sort de notre module. C' est, je ne veux pas que vous vous expliquiez autant cela parce que nous devons ajouter aussi une autre classe pour ce composant qui s'appelle P Floyd, qui sera pour cette grille. Donc, nous devons mettre sur la grille hors élément de garde aussi, p Floyd, donc dans ce cas, ou fluide. Donc, dans ce cas, nous aurons la bonne classe fixe ici parce que le liquide P est pointillé avec. Les modèles ou les composants de formulaire de prime end g. Et vous devez l'utiliser chaque fois que vous allez utiliser des composants de formulaire dans une grille. La dernière chose que je veux avoir ici, juste ajouter un sous-total. Et combien est le sous-total de ce produit article sous-total, je veux dire, avec elle, comme j'ai besoin de savoir combien notre ensemble beaucoup sont Homère à ce prix de ce produit multiplié par la quantité. Donc, dans ce cas, je peux utiliser aussi le concept de sous-total. Nous avons donc ici aussi des articles de carte, sous-total et sous-total. Nous avons la portée ici parce que je vais lui donner une autre couleur, qui sera verte et il sera codé en dur à un $100. Et nous pouvons styliser ces éléments ou ces composants que nous avons ajoutés maintenant. Donc, tout d'abord, j'ai besoin de styliser cette quantité. Donc, nous avons ici P ou la quantité de l'article du panier. Donc, la classe de quantité d'article de panier que nous avons créé ici et à l'intérieur du numéro d'entrée. Donc, nous pouvons donner des marges, comme la marge. Nous pouvons dire, nous pouvons en donner deux quand t, comme 20 pixels ou 15 pixels en général, comme nous le pouvons, et donner comme ça de haut en bas et de gauche et de droite, rien nous ne pouvons le garder comme 0. Et nous pouvons aussi bien pour le sous-total, nous pouvons dire sous-total, nous pouvons donner le poids de police, qui peut être 600, comme un peu gras. Et aussi la valeur à l'intérieur de ce sous-total, comme je l'ai défini ici, j'ai des éléments de garde sous-total, puis des éléments de garde sous-total, puis la valeur. Donc, je peux utiliser cet avantage de ainsi, et je lui donne une couleur verte. Sauvons tout et voyons si nous faisons bien. Nice Maintenant, nous avons notre initialisation de garde est prête pour les boutons qui sont ici. Nous devons les colorer avec notre couleur primaire, qui est aussi orange. Donc, vous pouvez le faire facilement en allant à la page du panier et dire que je veux styliser tous les boutons et leur donner la couleur de fond comme nous l'avons fait précédemment. Donc, si vous vous souvenez, nous avons donné la couleur de fond, les couleurs primaires et les bordures est 0. Donc, vous pouvez le mettre ici, ou si vous sentez que vous utilisez cela toujours, vous pouvez le mettre sur le fichier racine ici boutique NG. Vous pouvez, si vous vous souvenez, nous avons ajouté ici quelques lunettes et aussi vous pouvez dire que tous les boutons leur donnent la couleur de fond. La couleur primaire sera comme ceci, et la bordure sera 0. Donc tu peux faire ça. Tout ce que vous pouvez faire de cette façon. Pour que nous puissions voir les changements. Et nous voyons que tous les boutons ont cette couleur primaire, que nous avons. Dans la prochaine conférence, nous allons voir comment sentir ces données à partir d'un produit réel. Donc maintenant, nous avons seulement le produit. Dans ce cas, nous devons sentir que le panier avec des données réelles des produits de la base de données que l'utilisateur a sélectionné et ajouté à sa carte. 160. Connecter le panier avec des produits: Ok, dans cette conférence, nous allons connecter le panier avec les produits. Comme vous le voyez ici, j'ai deux articles dans mon panier, mais je ne peux pas les afficher ici. Donc, nous allons connecter ce panier, que nous avons maintenant la page du panier avec un vrai produits qui sont à l'intérieur. Donc, la meilleure façon de le faire, nous allons attraper les services du produit. Donc, tout d'abord, allons à leur page de panier comme nous l'avons fait précédemment. Et maintenant, nous allons mettre en œuvre ici les données codées en dur que nous saisissons ici avec les données réelles. Donc, tout d'abord, je vais avoir comme un module où j'aurai l'article du panier avec ses détails. Donc, au début ici, nous pouvons commencer à utiliser ce service de garde ou comme nous l'avons vu précédemment. Donc, je vais ici le service de garde privé. Et puis j'importerai le service de chariot. Après ça. Lors de l'initialisation de cette page, je vais avoir une autre méthode qui me donnera l'initialisation de leur page de panier. Donc, sur NG dessus, j'utiliserai une méthode comme nous pouvons l'appeler, par exemple, obtenir les détails du panier par exemple. Et puis nous définissons les détails de cette carte. Donc encore une fois, nous avons ici obtenir les détails de la carte et je vais le donner comme un détail de carte Git privé. Et à l'intérieur, je vais utiliser ce service de cartes. Donc, le service de panier, je vais observer la carte actuelle, que nous avons défini précédemment et nous avons observé, donc je vais dire ici panier. Et puis on a un tuyau, on fait un tuyau. Et puis nous devons nous rappeler que pour faire prendre jusqu'à ce que comme quand je quitte cette page, je vais détruire l'abonnement, afin que nous puissions le faire plus tard. Maintenant, gardons-le comme en jouant ceci et puis abonnons-nous. Et puis j'obtiendrais la, par exemple, la carte de réponse que nous pouvons appeler. Et dans cette carte de réponse, je vais donner, par exemple, comme une carte de réponse éléments. Et puis je vais les boucler parce que vous vous souvenez que nous avons créé tous les articles du panier et nous ferons quelques bouclages à l'intérieur. Donc, comme vous le voyez ici, nous avons pour chacun, donc pour chaque article à l'intérieur du panier article, donc pour l'instant j'ai deux articles et ils sont stockés dans le stockage local et dans mon panier. Donc, je vais aller ici, boucle sur chaque article et obtenir le produit, et obtenir la quantité jusqu'à ce que nous avons besoin aussi pour passer en revue le service produit. Donc, nous disons ici comme article Garth. Donc, nous allons revenir ici chaque article du panier et je vais faire une boucle sur eux. Donc, nous allons enregistrer la console, comme être sûr que nous faisons tout va bien. Donc, je vais dire ici, console log pour moi cet article de panier où je suis en boucle. Donc, après cela, l'application est rechargée. Nous ouvrons à nouveau la console et nous verrons que nous avons obtenu deux objets, un avec l'ID du produit et la quantité, et l'autre avec l'ID du produit et la quantité. Mais l'identifiant, comme vous le voyez, ne suffit pas parce que j'ai besoin du nom du produit, le prix, l'image, et aussi cette fille jusqu'à, la quantité, tant d'informations sur le produit. J' ai donc besoin d'utiliser le service produit. Donc, pour cela, nous pouvons aussi utiliser ce service produit. Mais je suis sûr, comme vous n'avez pas à suivre cela parce que je le suis, je veux vous montrer une erreur que nous allons dire face maintenant, et nous allons continuer à corriger cette erreur dans la prochaine conférence. Donc ici, j'ai un service de produits. Je l'ai utilisé pour que nous puissions l'obtenir produit ou service. Et il proviendra du nom de l'organisation des produits. Donc, nous pouvons aller ici et dire le service d'importation de produits, mais d'où ? À partir de la bibliothèque des produits. Donc, nous pouvons avoir ici des bits bleus et ensuite la bibliothèque de produits. Ok, maintenant tout va bien. Nous n'avons aucun problème. Je vais ici pour chaque article de panier, si vous vous souvenez, nous avons l'ID de produit pour obtenir le produit. Alors faisons ça. Donc, je vais dire ce service de produit point, point, désolé, le service de produit que nous définissons point obtenir produit. Et puis article panier, que j'ai obtenu ici dans la boucle, point ID produit. Parce que si vous vous en souvenez, bon produit fonctionne avec un bon identifiant de produit comme nous l'avons fait dans les sections du panneau d'administration. Donc, ici, nous avons ce bon produit et nous allons, par exemple, y souscrire. Et on peut dire un produit comme ça. Comme si nous obtiendrions le produit dans leur réponse et gardons le vide. Lorsque j'enregistre, j'obtiens une erreur dans la console et aussi dans l'application. Je vais vous dire pourquoi. C' est parce que nous avons des appels de ressources ou une dépendance circulaire, qui est appelé mentionné ici. Parce que comme nous le savons précédemment que nous avons utilisé ce service de garde dans la bibliothèque de produits où nous l'avons utilisé dans l'administrateur ou désolé, dans l'article du produit, comme nous nous souvenons ici. Donc, si je vais à l'article du produit dans la bibliothèque de produits, nous avons ici la liste des produits de la page du produit, et l'un d'eux est un composant appelé article produit. Et si vous vous souvenez, nous avons utilisé le service des cartes. Donc, c'est un, un gros problème pour moi ici parce que ce service de produits ou la bibliothèque de produits utilise la bibliothèque de commandes. Et dans le même temps, bibliothèque commandée utilise la bibliothèque de produits. Ainsi, nous aurons une boucle entre les commandes et les produits. Donc, comme vous le voyez ici, J'ai utilisé de la bibliothèque de produits et ici j'ai utilisé dans le, dans les produits que j'ai utilisés à partir de la bibliothèque de commandes. C' est la raison pour laquelle nous obtenons une erreur ici. Et il donnera à certains ne peut pas lire la propriété ou le de undefined, ce qui est une erreur indéfinie en raison de cette dépendance circulaire. Comment nous pouvons résoudre cela, nous allons résoudre cela avec la solution la plus simple. Comme je vais vous montrer notre, US, je vais vous montrer dans la prochaine conférence. Parce que nous avons plusieurs solutions pour cela. L' un d'eux est de dupliquer du code dans la bibliothèque de commandes en ce qui concerne l'obtention du produit. Ou nous allons faire une classe parent qui détient deux bibliothèques qui font référence. 161. Supporter les troubles de la Circular de la bibliothèque: Ok, comme nous l'avons vu précédemment que nous avons un problème de dépendance circulaire. Donc, en d'autres termes, nous avons vu que la bibliothèque de produits dépend de la bibliothèque de commandes. Et aussi la bibliothèque des commandes dépend de la bibliothèque des produits. Et ce concept en x en général ou en angulaire en général est angulaire. Donc angulaire n'aime pas avoir de dépendance circulaire car il n'est pas essayé l'implémentation. Lorsque vous allez implémenter une bibliothèque. La bibliothèque doit être totalement indépendante et ne dépend pas d'autres bibliothèques qui sont dans le même dépôt ou dans le même projet. Surtout si vous voulez vous débarrasser de la bibliothèque de produits, vous n'aurez pas de problèmes que j'ai besoin de passer à travers aussi bien de la Bibliothèque Arbutus. Donc, l'une des deux solutions que nous allons faire. Premièrement, je vais faire une solution facile. Donc, ce qui est, je vais ici, par exemple, dans leur page de produit ou page de panier. Je vais créer dans le service des commandes quelque chose appelé get product, qui est exactement le bon service produit, qui vient du service produit. Donc, ici comme une solution, je vais dire que, ok, bon produit, et ce produit sera mis en œuvre, par exemple, dans les services de commandes. Donc, nous n'allons plus utiliser ce service produit. Donc, l'autre solution est de faire une bibliothèque de base, comme vous le voyez ici. Donc, nous avons, par exemple, une dépendance qui est appelée bibliothèque de base. Je crée une troisième bibliothèque. Et puis cette troisième bibliothèque contiendra des modaux comme commande de produit, carte, produit I, article de commande, et deux aussi bien, comme plusieurs modèles, tous les modèles de mon projet. Et puis j'aurai des services abstraits. Donc, je ne vais pas avoir la mise en œuvre de ces domaines comme je ne vais pas obtenir des ventes totales et la mise en œuvre de celui-ci, non, je vais avoir abstrait. Et puis la bibliothèque de produits implémentera ce service abstrait. Donc, dans ce cas, toutes ces bibliothèques ne dépendront pas de la bibliothèque de produits, cela dépendra de la bibliothèque de base. Donc, dans tout changement que vous voulez faire dans la bibliothèque de commandes, vous devez le faire aussi bien dans la bibliothèque de base. Ou en d'autres termes, vous devez toujours implémenter certaines portées qui sont créées dans la bibliothèque de base. Donc, vous devez toujours mettre en œuvre tout dans la bibliothèque des commandes lorsque vous avez, par exemple, obtenir la méthode des commandes dans la bibliothèque de base. Donc, dans la section refactoring, dans la section suivante de cette section, nous allons faire un refactoring et faire cette bibliothèque de base. Je ne vais pas le faire maintenant parce que maintenant nous nous concentrons sur le côté de la carte. Nous verrons plus tard comment nous pouvons refactoriser notre projet et utiliser une bibliothèque de base, alors nous n'aurons pas de dépendance circulaire comme nous le voyons ici. Alors faisons ça. D' abord. Je vais avoir à la place du service de produit, que j'ai importé de la bibliothèque de produits, je vais avoir un service de commande. Donc, nous pouvons utiliser ici le service de commandes. Et au lieu de celui-ci, nous disons service de commande et service de commande. Je vais l'importer à partir de. Il est préférable lorsque vous êtes dans la même bibliothèque de ne pas importer à partir du chemin d'accès. Vous pouvez importer à partir du chemin relatif. Donc, ce qui est plus facile et propre. Donc maintenant, nous supprimons cette partie et nous utilisons le service de commande. Le service de commande dans ce cas doit avoir une bonne méthode de produit. Donc, actuellement, nous aurons la duplication du code, ce qui n'est pas un gros problème pour nous maintenant parce que nous allons le refactoriser plus tard. Donc, pour l'instant, je vais aller au service produit. Ici. Où est-il ? Ici ? Nous avons un service de produits. Et je veux seulement obtenir le produit. Donc nous copions celui-ci. Et puis nous allons au service de commande et créons cette méthode ici. Donc, le service de commande verra ce service produit également. Donc, dans ce cas, nous n'aurons pas de dépendance circulaire. Mais regardez, nous avons ici un produit, aussi le modèle avec des codes pour moi, une dépendance circulaire. Alors peut-être que vous pouvez déplacer le modèle ici aussi, faire un duplicata, ou simplement le mettre maintenant comme n'importe quel. Et nous allons refactoriser que tout cela nous mettons maintenant tout, comme je vais obtenir le produit bien sûr objet produit, mais je vais en utiliser pour l'instant. Et pour l'URL de l'API, nous aurons une autre URL d'API ici. C' est ce qui s'appelle. Produits, de sorte que nous pouvons appeler cela des produits. Et ici, nous aurons aussi des produits. Donc, dans ce cas, nous avons l'application du code, mais ce n'est pas un problème parce que nous allons le refactoriser. Sois patient avec moi parce que nous allons dans ce cours étape par étape. Donc maintenant, je peux voir que le bon produit fonctionne bien ici, qui est exactement le service produit que nous avons créé dans la bibliothèque de produits. Alors maintenant, je vais essayer de voir si je suis vraiment obtenir ces produits détaillés à partir de mon article de panier. Console enregistrons le produit que nous avons obtenu du service que nous avons créé. Alors sauvegardons tout et allons à notre application. C' est rechargé, et nous n'avons plus cette dépendance circulaire. Donc, comme vous le voyez ici. Nous avons donc besoin à l'avenir de supprimer cette dépendance que nous avons créée à propos du service de chariot, car un service de voiture est utilisé dans la bibliothèque de produits. Nous devons donc aussi le mettre en œuvre. Donc maintenant, nous avons tous les détails du produit. Donc, comme vous le voyez, j'ai deux produits dans la garde. J' en ai les détails. Donc, nous allons créer ou nous allons modéliser ou remplacer ces choses codées en dur avec nos articles de panier. Donc, je vais d'abord créer comme tableau. On peut l'appeler comme un article Garth détaillé. Donc, nous pouvons dire que les articles de carte détaillés comme celui-ci seront la queue de l'article du panier comme ne pas avoir l'identifiant du produit seulement, mais il aura le produit lui-même. Donc, nous pouvons donner ce produit détaillé exactement le même type. On peut le donner aussi. Les articles du panier détaillés. Donc, dans ce cas, nous devons créer ce modèle. Donc, ce garde aussi, nous aurons non seulement l'identifiant du produit de garde, comme nous avons des articles de carte, produit détaillé seulement. Et ce produit aura ou sera taper n'importe quel pour l'instant parce que sinon nous aurons une autre dépendance circulaire. Donc, utilisons-le comme ça maintenant comme tout. Mais bien sûr, nous allons le remplacer par un modèle de produit, qui est dans la bibliothèque de produits. Et nous allons le faire dans le refactoring. Donc, ici n'est pas obtenu des articles, est un élément. Donc, nous avons besoin ici d'un article et il sera tableau de ces détails de l'article de panier. Nous devons donc importer cela aussi à partir de notre modèle de panier. Nous l'avons défini ici et nous avons aussi la quantité que nous allons ajouter aussi d'autres champs, comme nous le verrons plus loin. Donc, revenant à ce détail de l'article de panier, n'oubliez pas d'initialiser toujours cela avec un tableau vide parce que nous allons remplir ce tableau à l'intérieur de cette boucle. Donc, nous disons que ce panier articles détaillés, ne peut pas l'appeler à nouveau. Ouais, articles de panier détaillés parce que nous avons plusieurs ici, point push. Nous allons pousser le produit. Donc, nous pouvons créer ici objet. Et cet objet sera le produit, et nous obtenons le produit que nous avons une réponse ici. Donc, nous pouvons avoir ici pas des produits, nous pouvons dire produit de réponse. Donc, faire la différence entre ces produits et le produit de réponse. Donc, dans ce cas, nous aurons produit. Le produit et la quantité de réponse seront la quantité de points Garth. Donc on sauve tout. Ok, gentil. Nous n'avons aucune erreur. Maintenant, passons à ce modèle. Donc, comme vous le voyez, nous avons créé à l'élément de garde. J' ai donc besoin de boucler cet article de panier plusieurs fois pour créer plusieurs articles de panier ici. Donc nous n'en avons qu'un maintenant. Mais si je mets ici MD4 et dans ce MD4, je dirai laisser l'article panier hors des articles de garde détaillés. Donc, nous avons besoin d'avoir article de panier de Dieu ItemDetail un par 1. Tout d'abord, remplacons l'image. Donc je dirais ici, pas la seule source, comme nous aurions SRC. Et puis je dirai article point produit, point image. Comme vous le voyez ici, nous ne recevons pas la saisie semi-automatique car nous définissons le produit comme n'importe quel. Mais nous aurons un champ d'image après que nous allons le faire. Si affacturage. L' Alt, bien sûr, nous pouvons également mettre le nom du produit. Donc, pour n'êtes-vous pas incapable de le faire. Vous avez juste à faire ATTR comme attribut dot alt. Et puis vous pouvez utiliser à nouveau le produit de point d'article de panier, nom de point. Et ici, nous allons le remplacer par le nom du produit afin de ne pas dire nom du produit codé en dur. Nous disons article panier produit point, nom point. Exactement comment il est dans le modèle, comment nous l'obtenons à partir du back-end. Donc, ici, nous allons dire point produit, point prix. Et ici, nous avons le déplacement de l'article du panier. Nous allons le faire lors de la prochaine conférence. Ensuite, nous avons aussi la quantité aussi nous allons travailler avec leur quantité dans la prochaine conférence. Ici, sous-total est, sera comme un prix point d'article de panier ou prix de point de produit multiplié par ou plus. Il est multiplié par la quantité de points de l'article du panier. Nous aurons donc plusieurs articles de panier. Chaque article du panier a sa quantité. Et puis nous le multiplions par le prix et j'obtiendrai le sous-total. Ok, comme vous le voyez ici, nous devons garder des objets qui sont exactement deux ici. Et nous sommes nous les avons avec tous leurs détails comme le prix et le nom, image et l'écriture sous-total. Donc, nous avons ici parfois avertissement, il dit comme trouvé deux éléments avec le même ID. Parce que ici, si vous vous souvenez avec la quantité que j'ai dit que j'ai besoin d'ID d'entrée sera la quantité. C' est mieux comme si on pouvait changer ça. Nous pouvons mettre, par exemple, l'ID de point du produit par exemple. Donc, il sera unique et nous n'aurons pas cette application sur chaque boucle parce que cet article de garde se produit deux fois en fonction mon numéro ou du nombre de mes articles de panier dans leur panier. Donc, après cela, vous voyez que deux d'entre eux sont créés. Donc, si nous allons à Inspecter, nous verrons que nous devons panier des articles comme vous le voyez ici. Faisons plus comme un petit style. Comme si nous pouvions pousser cette marge en bas. Nous pouvons lui donner 15 pixels, comme il sera séparé comme ça. Nous pouvons le faire directement dans le modèle. On peut utiliser le premier end, comme les outils de marginalisation. Donc on peut dire p bouton de marge 5. Donc, il lui donnera un peu d'espace en dessous, qui est déjà défini dans prime NG. Donc, comme vous le voyez, nous les avons séparés. Essayons donc d'ajouter quelque chose à la garde. Je vais continuer à faire du shopping. Je veux ajouter cet ordinateur portable. Donc j'ajoute au panier, panier mis à jour. Nous avons ici trois articles dans le panier. Alors fermons ça et allons dans notre panier. Joli. Nous avons trois articles dans leur panier maintenant. Donc, dans la prochaine conférence, nous allons travailler avec supprimer l'article du panier, et nous allons travailler avec la quantité, mettre à jour la quantité à partir du stockage local. Comme résumé, vous vous souvenez, nous avons refactorisé notre service de commande. Nous avons ajouté le produit pour obtenir le service de commande produit, ce qui est à mon avis erroné parce que nous avons l'application dans le code entre la bibliothèque de produits et la bibliothèque. Mais comme je vous l'ai dit, nous allons corriger ça dans la partie refactoring. Je veux que vous l'essayiez par votre main pour voir vraiment la différence entre avoir comme cette duplication ou comment nous allons créer une bibliothèque de base à, hériter de toutes les méthodes abstraites et les implémenter dans la bibliothèque. Dans ce cas, nous n'aurons aucune dépendance circulaire entre les bibliothèques et nous l'aurons exactement de cette façon. 162. Retirer les produits de chariot: Bienvenue de retour. Maintenant, nous allons dans cette conférence pour supprimer l'élément de la carte. Donc, comme vous vous en souvenez, nous avons créé plusieurs articles et je vais maintenant les supprimer de mon panier. Donc, si l'utilisateur a changé d'avis et qu'il veut filtrer certains éléments, il ne veut pas, par exemple, à Y celui-ci. Donc, il peut cliquer sur ce bouton et puis il peut être supprimé. Donc, si vous vous souvenez dans notre code dans le modèle, nous avons une méthode sur cliquez sur cette icône que nous avons supprimer élément de garde. Alors passons aussi. L' article Garth, que nous avons ici à la fin vous boucle FOR est de voiture les articles détaillés. Donc, puis je vais au fichier ts et puis recevoir cet article de panier. Bien sûr, ce type d'article de panier sera l'article de panier détaillé. Et puis nous allons appeler un service depuis le chariot. Et ce service, nous pouvons le créer ici. Donc, c'est exactement quelque chose comme article de panier de jeu. Nous recevons un article Garth, puis nous le poussons à nouveau dans notre stockage local et mettons à jour notre observable de leur panier. Dentiellement défini que nous avons une nouvelle donnée de garde. Alors faisons ça. Donc, je vais créer une méthode. On peut l'appeler supprimer l'élément de garde. Ils ont besoin de l'article du panier. Il suffit d'obtenir uniquement l'ID du produit, l' ID, qui se trouve à l'intérieur de cet article de garde. Donc, nous pouvons avoir l'ID du produit comme une chaîne. Et puis nous faisons à nouveau une réception de leur chariot. Donc nous devons récupérer leur chariot parce que nous allons mettre à jour ce garde. Et puis nous avons un filtre. Nous allons donc filtrer les articles du panier pour recevoir tout à nouveau, l' exception de l'identifiant du produit ou de l'article du panier avec cet identifiant de produit. Donc, ce que je dois faire, je vais créer une constante, je l'appellerai dans votre panier. Et ceci une nouvelle carte sera Dieu, les objets. Et puis je les filtrerai. Si vous vous souvenez, nous avons comme méthode de filtre où il retourne pour moi des éléments sous une certaine condition. Donc, si toute la commande, l'ID du produit n'est pas égal à l'article que j'ai reçu ici. Ensuite, il retournera pour moi tous les autres articles qui n'ont pas l'identifiant du produit. Donc, dans ce cas, je vais obtenir un nouveau panier sauf cet article de garde qui a cet identifiant de produit. Donc, je vais dire l'article point ID produit, pas égal, comme donnez-moi tout ce qui n'est pas égal à l'ID du produit que j'ai reçu de l'article du panier. Donc, après cela, nous avons une réception cette constante. Et tout simplement nous disons que ce panier ou panier que nous avons créé points articles, donner à nouveau, puis vous avez attrapé. Donc notre garde a été mise à jour. Maintenant, nous allons le mettre à jour dans le stockage local. Donc exactement la même chose qu'on a fait ici. Nous devons créer cette chaîne JSON. Donc, nous pouvons appeler ce JSON, nous pouvons l'appeler comme chaîne de gardes et, ou par exemple, nous pouvons dire chaîne JSON. Et puis il était 10 Guifei il. Donc, je peux être en mesure de le définir dans le stockage local comme une chaîne. Et bien sûr, nous n'oublions pas à la fin de mettre à jour qui est devenu observable. Donc, nous allons voir les mises à jour dans le front end aussi bien. Si pour chaque élément ou pour chaque composant qui observe cette garde observable. Alors sauvegardons tout et essayons ça dans notre front end. Nous verrons donc que nous avons deux éléments. Supprimons l'un d'entre eux. Donc, quand je supprime l'un d'eux, je vois que rien ne se passe parce que je n'appelle plus le service. Donc, nous allons à nouveau à notre page de panier et nous devons recevoir ce service de panier de points qui suppriment l'article Garth, mais ce que je dois passer l'ID du produit, donc je vais obtenir le panier article point produit, point ID. Alors essayons que maintenant je vais cliquer sur Supprimer. Joli. Rien ne s'est passé, mais leur carte a été mise à jour. Et ici, j'ai un élément supplémentaire qui est quelque chose de mal. Je vais vous dire pourquoi. Parce que si vous savez, nous avons un garde observable et ce garde l'observable tire tout à l'intérieur de l'abonnement à nouveau quand il y a mise à jour à venir sur leur panier. Donc, dans ce cas, j'ai aussi, encore une fois un élément de garde de réponse pour chaque. Et puis je reçois le produit à nouveau et je les pousse au panier article détaillé à nouveau. Ainsi, les détails de l'ancien élément de garde auront des éléments. Et aussi quand je supprime et que cela a été mis à jour, il ajoutera à nouveau des éléments, qui sont encore. Leur chariot dans le stockage local. Donc, la meilleure façon de résoudre ce problème, nous pouvons initialiser toujours cet élément de garde détaillé avec un tableau vide. Donc, quand il y a mise à jour vient au panier, puis juste vider les détails de l'article de panier où nous sommes en boucle ici. Donc, de cette façon, il sera vide et il sera rempli à nouveau. Après cela, je verrai que mon chariot se met à jour. Alors sauvegardons ceci et réessayons ça dans notre front end. Ok, maintenant nous n'avons qu'un seul objet. Alors ajoutons, par exemple, celui-ci et celui-ci, et revenons à leur panier. Ok, on en a trois. Donc, quand je supprime celui-ci, je verrai qu'il a été mis à jour à nouveau. Ok, il a été mis à jour. Lorsque j'ajoute une floraison de la page, j'ai toujours cet article de panier ici. Donc, dans ce cas, nous garantissons que nous supprimons toujours ce type d'article du stockage local. Et aussi de notre garde observable, qui est d'envoyer chaque commentaire ou chaque changement aux abonnés, comme par exemple, cette icône parce qu'il est abonné au compte. Et aussi pour d'autres pages où ils s'abonnent au panier. Donc, maintenant, nous avons un problème. Allons le réparer rapidement. Je veux obtenir le nombre de cartes afin que nous puissions le faire facilement en faisant une autre variable qui s'appelle le nombre de gardes ici. Et cela au début, ce sera 0. Donc, par exemple, nous l'aurons comme un 0. Nous l'avons déjà fait exactement ici dans l'icône du panier. Donc, le nombre de cartes aura l'après l'inscription au panier observable, je vais voir des liens de carte me donner la longueur ou me donner 0, et aussi bien ici, n'oubliez pas de mettre ce point d'interrogation au cas où il n'y a pas d'articles ou totalement. Donc, nous allons à nouveau à la page du panier. Et à l'intérieur de cet abonnement de cette carte, nous allons ici et nous disons comme pas avant pour chacun nous devons dire ce point ou par exemple, carte de réponse ici dans ce cas. Donc nous disons garde Count, donnez-moi le nombre de cartes ici, mis à jour avec cette réponse, qui vient du jardin observable ou sujet de comportement. Et ici, nous devons le remplacer par le nombre de cartes parce que si vous vous souvenez, nous l'avons ici comme codé en dur. Maintenant, nous allons l'avoir comme un nombre réel de combien d'articles à l'intérieur du panier. Alors sauvegardons ça, sauvegardez celui-là. Et puis nous allons à l'application. Nous verrons que nous avons aussi les bons éléments que nous ajoutons ici. Donc, exactement comme nous l'avons fait avec ce badge ou icône. Donc on peut vérifier maintenant, on voit, d'accord, c'est trois. On a mangé. Ça change à deux. Donc, tout est observé et à jour. Donc dernière chose, je veux juste ajouter que nous avons toujours besoin quand je visite cette page de garde, nous devons mettre fin à l'abonnement. Donc aussi, nous devons faire prendre jusqu'à ce que nous le faisons toujours. Et puis ce point n sous-s. Rappelez-vous, nous l'avons défini plusieurs fois. Et chaque composant qui est nécessaire pour entrer dans l'abonnement. 163. Widget de résumé de commande: Très bien, dans cette conférence, nous allons faire ce résumé de commande. Et cet ordre quelqu'un. C' est exactement comment nous avons fait et comment nous observons les articles du panier et nous appelons le produit et nous avons fait le calcul du sous-total. Je vais faire la même chose ici. Alors, allons créer le composant. Je l'ai déjà créé. Donc, le composant, j'ai utilisé la console et x, puis j'ai créé un composant et lui donner un nom, résumé de la commande. Et ce composant sera situé dans les composants à l'intérieur de la bibliothèque des commandes, et il sera automatiquement importé dans le module des commandes, sorte que nous pourrons l'utiliser dans d'autres pages. Alors pourquoi je l'ai fait en tant que composant ? Parce que je vais l'utiliser dans leur page de panier, comme vous le voyez ici, je l'ai appelé dans notre page de panier comme nous l'avons fait précédemment. Et aussi, je vais l'appeler dans la page de paiement. Donc, quand nous allons remplacer ce contenu ici par l'adresse de l'utilisateur. Donc, nous allons également garder ce résumé de commande comme n'importe quel e-Sharp formel. Donc maintenant ce que j'ai fait exactement est juste de donner comme quelque chose de modèle. J' ai donné comme h3. Effectuez ce résumé de commande. J' y vais vite parce qu'on l'a fait plusieurs fois. Je vais joindre pour vous le code afin que vous puissiez continuer avec le cours. Maintenant, nous avons aussi le prix de synthèse. Et je fais ici quelques calculs pour le prix total, qui sera dans le script des composants comme nous le verrons plus tard. Et aussi, nous faisons une inflammation comme l'emballage et l'expédition. C' est de l'information codée en dur. Je le donne comme un style, qui est appelé prix récapitulatif ou expédition sommaire. Et puis je montre à nouveau le prix total, ce qui sera comme le prix total sera le même ici. Donc, c'est juste comme des données aléatoires de déclaration. Je le fais juste comme dans une affaire comme si je ressemblais à de vrais e-shop. Donc, nous avons ici l'article vendeur et ce sera exactement quand j'ajouterai un nouvel article à calculer ici. Nous verrons donc comment nous l'avons fait. Donc, j'ai ici comme un modèle, je l'ai stylé. J' ai ajouté ce fichier de numérotation à nos styles publics, qui seront à l'intérieur des styles, lèvres, puis des commandes. Et j'ai ici le récapitulatif des commandes. Et cet ordre quelqu'un que je donne au conteneur de celui-ci comme fond de couleur blanche et une bordure pour garder le même style, un peu de rembourrage. Ensuite, j'ai donné le flex d'affichage des prix, qui sera comme cette div ici. Donc, il aura deux colonnes. Une colonne sera l'info ou leur étiquette, puis la valeur de l'étiquette. Ici encore, nous avons quelque chose comme nous avons un autre comme les prix des articles. Et puis nous avons ici span, deux travées comme elles sont affichées comme Flex et elles seront alignées l'une près de l'autre. Et je donne à ce flex de diamant qu'ils sont comme bloc. Parce que si vous ne les affichez pas comme bloc, les travées, elles seront collées les unes aux autres et elles ne seront pas considérées comme, comme un div, nous pouvons dire. Donc, nous avons ici bloc d'affichage cette travée, comme vous le voyez, nous avons deux travées ici. Première interdiction et deuxième travée, disons la première travée et la seconde dans chaque rangée. Alors quoi, comment j'ai fait le style ? Je viens de lire ce groupe directement. J' ai donné à la première avec 80%. Donc, comme vous le voyez ici, il a 80%. Bien sûr, vous pouvez également utiliser la grille. Je l'ai juste fait comme d'une manière différente juste pour vous montrer que vous pouvez aussi ne pas avoir à dépendre de la sur la grille toujours. Et puis j'ai dit, dernier enfant, dernier géant du conteneur comme quelqu'un de prix qu'il a de la portée. Et le dernier enfant de cette période aura 20 pour cent de poids de police 600. J' ai donc ces groupes. C' est le premier enfant, et c'est le dernier géant du conteneur, qui est appelé prix récapitulatif. Donc, comme vous le voyez ici, nous avons ce 80% et ce sera 20%. Et après cela, j'ai une autre ligne et puis nous avons un bouton pour passer à la caisse. Donc, ce bouton m'emmènera à la page de paiement comme nous le verrons plus tard. Maintenant, nous avons ce style. Comme vous le voyez, nous mettons quelques informations, c'est très facile. J' ajoute que aussi le style avec cette conférence. J' ajoute donc ce composant. Donc tu ne le fais pas, tu n'as pas à taper à nouveau avec moi ou arrêter la vidéo. Vous pouvez simplement saisir le composant. J' ai le modèle, j'ai le script, et j'ai mis le style aussi bien dans l'attachement ou aux ressources de cette conférence. Donc, maintenant, nous allons faire pour cela, le calcul du prix total. Donc, par exemple, je vais ici pour ajouter un autre produit et un autre produit. Je vais encore voir le garde pour le vérifier. Ok, Nous avons ici le prix calculé automatiquement, qui sera résumé de tous ces prix ici. Alors comment cela peut être fait. Donc, c'est très simple. Je m'abonne à nouveau à leur panier comme nous l'avons fait exactement avec cette page de garde. Et puis j'ai initialisé à chaque changement de ce panier. Ensuite, j'initialise quelque chose appelé prix total. C' est une variable fixe ou membre de classe, qui sera appelé prix total, qui serait un nombre. Et puis je suis retourné au jardin. Ici, j'ai vérifié si j'ai un garde revenant de cet abonnement, nous l'observons. Et puis j'ai regardé les articles de ce panier et ensuite j'ai appelé le produit pour chaque article de carte. Prends-en un. Ici. J'en ai pris une parce qu'on l'appelle une fois. Donc, quand vous faites un abonnement pour cela, alors cela vous donnerait la possibilité de vous désabonner facilement afin que vous n'ayez pas à faire jusqu'à ce que comme n sous-s jusqu'à ce que le composant soit détruit si facilement que vous pouvez le faire. Vous dites juste en prendre un, j'en prends un et finis automatiquement l'abonnement. Donc, il va en saisir un, puis terminer l'abonnement. Donc ici, vous ne vous souciez pas de la fuite de mémoire. Ce steak vient également de notre x j en tant qu'opérateurs, sorte que vous pouvez les utiliser aussi bien. Et puis nous souscrivons à leur produit. Et puis je dis que le prix total, que j'ai initialisé à chaque changement de leur garde, ce sera le prix du produit multiplié quantité d'article. Mais plus égal. Ça veut dire que je veux faire quelque chose comme ça. Donc le prix total pour chaque article juste il cumulé avec le prix total précédent. Et puis avec ce prix du tout, comme par exemple, la fille du souper. Donc avec un sous-total que nous avons calculé ici. Donc, dans ce cas, vous pouvez le rendre plus petit. Tu dis juste plus égal. Et égal vous donnera un produit du prix, comme item.quantity. Et il s'accumulera à ce prix total. Seulement quand il y a un changement arrive, alors il sera initialisé à 0. Donc, dans ce cas, nous sommes en mesure de faire une boucle sur les articles et de calculer le prix total que nous ajoutons, en ajoutant, en ajoutant. Et puis il sera calculé de la bonne manière. Alors c'est tout. n'y a rien de compliqué. Donc, nous avons maintenant défini aussi bien les sous-marins. Donc, ce sera sur l'ONG OnDestroy. Je n'ai pas ajouté ça. Nous devons donc ajouter de l'énergie OnDestroy aussi pour éviter. Et puis nous verrons que ces deux finis seront les prochains. Et aussi ce noeud n subs sera complet. Donc, quand je quitte ce composant, je terminerai l'abonnement au gardien, abonné ou sujet de comportement. Donc, dans ce cas, je suis à chaque fois en train de mettre à jour le panier. Ici, le résumé de la commande sera calculé automatiquement. Donc, je vais ici, aller à nouveau, ajouter au panier, nous pouvons ajouter plus d'articles. Je vais à nouveau dans mon chariot. Je le verrai ici. D' accord. J' ai plus d'articles et il calcule pour moi le bon résumé de commande, la dernière tuile que je voudrais faire, peut-être que nous pouvons faire ce bouton complet, comme être grand bouton et bien montré, il attirera l'œil de l'utilisateur. Donc, nous pouvons le faire simplement dans ce fichier de numérotation. Je vais au résumé de la commande. Si vous vous souvenez, nous avons ici commander quelqu'un que j'ai créé bouton de paiement à l'intérieur du résumé de la commande afin que nous puissions entendre. On commande à quelqu'un d'aller et on ouvre un nouveau cours. Nous l'appelons bouton vérifier et le bouton à l'intérieur du résumé aura une largeur de 100%. Et nous vérifions que nous rechargeons l'application, ok, nous avons toute la largeur du bouton Checkout. Et lorsque nous cliquons sur le Check out, nous devons passer à la page de paiement. Comme nous le verrons plus tard. 164. Mise à jour de la quantité d'objets de panier: Ok, dans cette conférence, nous allons voir comment nous pouvons mettre à jour la quantité d'article de garde. Donc, dans ce cas, nous devons mettre à jour cette quantité d'article de garde de la manière que nous mettons à jour également le sous-total et le résumé de la carte. Donc, tout d'abord, commençons par initialiser notre quantité quand la quantité que l'utilisateur a commandée. Donc, par exemple, quand je vais, encore une fois, actualisons cette page. Je n'ai rien ici. Donc, nous allons initialiser avec le nombre d'éléments à l'intérieur de cette quantité. Donc, tout d'abord, nous devons aller à notre numéro d'entrée que nous avons créé. Il est plié celui-là. Et ce numéro d'entrée a comme quantité minimum, maximum. Nous allons ajouter quelque chose comme dans la documentation de l'énergie de la criminalité. Alors, suivez toujours la documentation. Donc, comme vous le voyez, nous avons ici modèle NG et modèle NG, vous pouvez spécifier la valeur, donc simplement, vous pouvez simplement dire, ok, et vous modélisez, et puis à la fin vous modélisez, nous disons la quantité point d'article, ok, mais nous sommes toujours obtenir une erreur. C' est comme ne peut pas lier le modèle NG. Toujours lorsque vous obtenez cette erreur, comme ne peut pas lier le modèle NG car ce n'est pas le numéro d'entrée de propriété connu. C' est parce que nous avons besoin d'importer un module qui est appelé module de force ou module de formulaires. Donc, où nous devons importer ce module, nous avons importé précédemment dans plusieurs modules, comme des produits et aussi dans l'application elle-même. Donc ce que nous pouvons importer ici aussi. Dans la bibliothèque des commandes, nous avons le module des commandes. Nous disons que nos composants utilisant également le module de formulaires quatre comme module contiennent tous ces éléments dont nous avons besoin pour le formulaire. Donc, dans ce cas, nous aurons que notre application et a été mis à jour avec la dernière quantité qui sont définis à l'intérieur du panier. Et nous voyons ici que nous avons initialisé avec leur quantité. Je vais ajouter au panier un autre aussi de cet article. Donc, j'irais au produit et aller à ce produit. J' en ajouterai quatre, par exemple. OK, on s'est mis à jour. Je vais à mon chariot. Je vais voir que j'ai cinq parce que précédemment j'en avais un. Donc, maintenant, nous avons cinq de ce point. Et aussi le résumé de la commande fonctionne bien. Mais maintenant, ok, ça marche bien. Aime un sous-total, comme vous le voyez ici, car il vient par calcul entre la quantité d'article et le prix du produit. Il est donc facile à calculer et il est automatiquement mis à jour. Mais ce que nous devons également mettre à jour, c'est le résumé des commandes. Alors, comment nous pouvons mettre à jour le résumé de la commande ou aussi bien quand nous rechargeons la page, vous voyez que j'ai ici encore cinq, mais je veux l'enregistrer. Je veux garder ce changement toujours. Donc, la meilleure façon de le faire est de mettre à jour le panier lui-même. Comment nous faisons mise à jour sur le panier lui-même. Tout d'abord, organisons un événement. Lorsque je change cela, je vais lire la valeur et faire quelque chose avec cette valeur. Donc, tout d'abord, allez à nouveau à la documentation. Je veux un événement qui est déclenché quand j'ai changé la valeur de ce numéro d'entrée. Suivez toujours la documentation. Vous allez revenir à prime, fin au numéro d'entrée. Et vous voyez dans la documentation que vous avez des propriétés comme nous l'avons vu ici, que nous avons des boutons Afficher, ID d'entrée, et cetera. Et aussi, nous avons aussi des événements. Et ces événements, ils se comportent en fonction l'interaction de l'utilisateur sur ce composant. Donc ici, j'ai quelque chose qui est appelé sur l'entrée. Donc, lorsque la valeur est entrée, lorsque l'utilisateur met une valeur à l'intérieur de cette entrée, alors il déclenchera un événement. Alors comment on peut déclencher ou appeler l'événement ? On va juste au composant. Et c'est comme comment nous avons avec onClick ou par exemple, comme celui-ci ou par exemple, sur l'accent sur quelque chose onclick, surmouseover. La même chose que vous avez à faire ici Que vous dites simplement sur l'entrée, car il est déjà défini comme une propriété de ce composant, qui est appelé numéro d'entrée p. Donc, oninput, je vais créer une méthode, je l'appellerai mise à jour, garde la quantité d'article. Ok, donc quels sont les paramètres de cette méthode ? Les paramètres seront d'abord l'événement, parce que je veux lire la valeur de cette entrée. Combien est maintenant la valeur qui est entrée en valeur comme ici. Ok, je change, j'ai besoin de quatre. J' ai donc besoin de lire cette valeur. Donc, pour ce faire, nous passons quelque chose appelé événement. Il doit être préfixé de ce signe du dollar. Bien sûr, c'est un événement qui peut être déclenché pour tous les types de sorties. Ceci est appelé sortie, et ceci est appelé entrée. Ainsi, dans les composants d'angulaire, vous définissez des sorties et des entrées pour chaque composant. Donc maintenant, nous avons ceci défini ici, et aussi nous devons passer l'article du panier lui-même. Donc, créons cette méthode. Nous allons aller au fichier TypeScript et puis nous créons cette méthode, le paramètre, comme nous l'avons dit, il sera même, vous n'avez pas à mettre le préfixe avec signe, signe dollar et nous venons de mettre événement et aussi l'article panier. L' article du panier sera l'article de garde détaillé parce que nous saisissons de la boucle for. Donc, il sera de garder l'article détaillé. Si vous vous souvenez, lorsque nous étions en train de définir un article de panier, j'appelais ce service de panier et puis définir l'article de panier, cet article de panier, nous devons passer l'article de panier lui-même. Donc, comme vous le voyez ici, nous devons passer l'élément Garth et ensuite il sera réglé. Mais ce cas, quand j'ajoute un nouvel article de panier au panier. Donc, pour cela, nous allons vérifier si nous avons déjà l'article du panier et nous augmentons la quantité. Sinon, nous poussons l'article du panier récemment et en Europe telle qu'elle est. Donc ici, nous ne passons pas l'article du panier, mais nous passons ce qui suit. abord, nous devons avoir l'identifiant du produit pour l'article du panier, qui viendra du produit point de l'article du panier, point ID. Et aussi nous devons passer une quantité, quantité que nous lisons de cet événement. Alors vérifions ce que cet événement me renvoie et comment nous pouvons lire la valeur. Alors commentons cette partie. Je fais cela avec la barre oblique de contrôle et il va commenter pour moi ou les pièces ou les lignes que j'ai sélectionnées. Donc, nous avons ici l'événement console.log, juste comme ça. Donc, quand je mets à jour la quantité, je veux voir quelque chose. Donc nous ouvrons la console et ensuite je vais mettre à jour la quantité. D' accord ? Je reçois un objet, qui est appelé événement original, comme l'événement qui est fait, qui est un clic de souris, et la valeur. Donc, ce qui nous intéresse, c'est la valeur. Donc, nous devons dire ici, valeur point d'événement. Nous allons à nouveau à notre front. Nous essayons. Nous changeons cette valeur. Nous voyons que nous recevons maintenant que j'ajoute de la valeur, c'est génial. Donc, nous avons besoin pour leur article de panier ici, cette quantité sera l'événement que la valeur. Donc, ici, nous avons la valeur de point d'événement. Donc, si je vais maintenant à l'avant et essayer ça. Ok, nous voyons que nous sommes en augmentation, mais nous avons tort. Vous voyez que c'est comme plusieurs fois dupliqué parce qu'il y a un mauvais calcul qui se passe. Ecoute, ça se fait vraiment mal et mal plus. Donc, ce que nous pouvons faire dans ce cas, nous devons vérifier notre article de panier. Donc, si vous vous souvenez, lorsque l'article du panier existe, j'envoie l'article du panier avec la nouvelle quantité et ensuite j'augmente la quantité. Donc, je calcule si leur article de panier existe déjà, j'augmente la quantité avec la quantité précédente. Donc, dans ce cas, nous avons une mauvaise accumulation. Nous augmentons donc de plus en plus. Donc j'ai, maintenant quand je clique sur 525, il va ajouter 525. Donc, ce sera ce qui existe dans leurs voitures avant, et puis il aura plus d'accumulation comme vous le voyez ici. Donc, dans ce cas, nous devons dire de définir l'article du panier pour mettre à jour la quantité, pas par exemple, ajouter à la quantité. Donc parce qu'avant ici nous avons fait cela parce que nous allons dire que si les tribunaux, si l'utilisateur vient ici et il clique sur Ajouter au panier, un autre ajouter au panier, alors si l'article existe déjà dans leur garde, nous augmentons la quantité. Mais maintenant notre cas ici, nous mettons à jour totalement cette quantité. Nous devons donc lire cette valeur et supprimer l'ancienne quantité et mis à jour avec le numéro qui est situé ici. Donc, pour cela, je vais ajouter un autre paramètre pour définir le service d'article de panier, qui est appelé élément de panier de mise à jour, comme juste ceci et cet élément de garde de mise à jour sera facultatif, comme ne pas être requis lorsque vous appelez article de panier ensemble, car parfois nous envoyons uniquement l'article de garde pour mettre à jour ou ajouter la quantité ou pousser un nouvel article de panier. Donc celui-ci ne sera pas nécessaire. Nous ne recevrons aucune erreur dans les autres objectifs de cet article de panier. Et puis nous vérifions s'il y a un élément de garde de mise à jour, puis mettre à jour la quantité totalement. Sinon, prenez simplement l'ancienne quantité et ajoutez un nouvel article ou une nouvelle quantité à l'article produit et mettez à jour leur panier. Alors, où cela doit être fait. Donc, je vais vérifier ici. Je dirai si l'élément de garde de mise à jour, comme si cette gomme est vraie, alors cela signifie que je viens ici et je clique sur cela. Donc, dans ce cas, nous devons dire que la quantité de l'article est seulement égale à la quantité de l'article du panier. Nous n'avons pas à faire d'accumulation ou ajouter toute la quantité à la nouvelle. Sinon, sinon, si c'est faux, alors, ou si c'est inconnu, indéfini, ou faux, alors nous devons faire cette accumulation. Donc, sauvegardons cela et nous devons mettre à jour notre composant de page d'article de panier ici que nous avons l'élément de garde de jeu, ok, premier paramètre est cet élément de garde. Et puis nous disons à travers parce que nous avons besoin de mettre à jour l'élément de la carte, pas ajouter à Descartes. Et disons plus comme certains articles qui sont vraiment devenus gros. Donc on ne peut avoir que celui-là. Donc, je vais augmenter la quantité comme vous voyez quand je mets à jour cette carte est mise à jour. Et aussi le résumé parce que tout le monde dans cette application observe le panier, parce que comme vous vous en souvenez, nous avons ce panier observable. Et dans le service de chariot, chaque fois que je mets un article de panier, je dis à l'observable, de mettre à jour le garde et d'avertir tout le monde. Donc, dans ce cas, nous avons mis à jour la quantité d'articles de jardin, ce qui m'aidera à toujours suivre le résumé de la commande et que Dieu restera le même toujours même vous ajoutez un autre article, par exemple, ici, et vous allez à le jardin à nouveau. Vous verrez ici l'article. Par exemple, je vais ajouter cet élément. Encore une fois, ce sera sept. Donc, nous devons aller le trouver. C' est celui-là que j'ai ajouté. Allez dans leur chariot. On verra qu'il en a sept. Donc, de cette façon, nous sommes sûrs que nos données sont fixes, notre panier est fixé. Nous n'avons aucun problème ici. Et nous sommes prêts à aller à la caisse. 165. Page de paiement: Ok, Après avoir eu notre page de panier, nous allons passer à la page de paiement. Donc, pour cela, nous devons aussi créer un nouveau composant que nous appelons cela une page de paiement, comme nous l'avons fait avec leur page de voitures. Alors passons à la console suivante, générez. Et puis nous aurons un composant. Et ce composant aura un nom qui est sous composant ou pages. Ce sera sous les pages. Et puis il aura la page de départ. Le nom du projet sera des commandes parce que nous mettons dans les commandes. Et puis nous faisons la même chose, ce que nous avons fait pour chaque composant. Et nous gardons les tests. Et aussi nous avons besoin d'ajouter un sélecteur qui sera la page de vérification des commandes. Donc, ici que nous avons maintenant prêt pour nous le composant. On appuie sur Run. Nous allons aux pages de notre bibliothèque de commandes. Donc nous devons avoir ici et vous allez voir la page. Donc nous vérifions ça. Nous voyons que nous avons la page de paiement ici et nous avons le composant aussi. Donc ce dont nous avons besoin, nous devons ajouter une route dans la bibliothèque d'ordre, exactement comme nous l'avons fait avec le garde. Je vais avoir ici la caisse. Et nous verrons plus tard comment nous allons autoriser cette page. Donc, nous allons forcer l'utilisateur à, à regarder dans et puis il peut mettre son adresse et puis il peut placer un plus vieux. Mais maintenant, nous allons faire une formulation pour vérifier. Mais en tant qu'invité, comme nous n'avons pas. Par exemple, l'utilisateur du lecteur se connecte. Vous allez le faire dans la section suivante. Mais maintenant, nous faisons juste passer une commande normale avec un compte d'utilisateur existant qui est appelé invités. Et puis nous devons vérifier ou aller à la page de départ lorsque nous cliquons sur ce bouton dans leur panier. Alors, comment peut-on faire ça ? C' est très simple. Nous faisons la même chose, comment nous faisons avec la navigation normale. Donc, nous allons dire comme routeur point naviguer et ensuite nous allons à une page spécifique. Ou vous pouvez dire un lien de routeur sur la page de paiement et vous donnez comme ça dans le résumé de la commande. Donc, nous devons aller à commander quelqu'un composant parce que le bouton Checkout existe dans le composant de résumé de commande. Donc, ici, nous allons donner onclick. Et ce onclick, nous allons lui donner comme naviguer pour vérifier. Et puis nous devons créer cette méthode. Donc, nous allons à nouveau au résumé de la commande, puis nous créons cette méthode. Nous disons naviguer pour vérifier, nous devons importer aussi le service de routeur. Donc, nous disons ici routeur privé, et puis il sera routeur. Et ce routeur viendra du noyau angulaire, comme nous le savons toujours. Nous allons donc utiliser ce service de routeur. Nous disons ce routeur point, point naviguer. Et puis nous avons ouvert tableau. Nous disons à l'intérieur de ce tableau qui navigue pour moi de vérifier la page. Alors c'est tout. Donc, sauvegardons tout et essayons si nous naviguons vraiment à notre page de paiement, que nous avons créé précédemment. Mais je suis toujours dans la page de paiement parce que j'ai fait une erreur. Ici, nous allons au module des commandes et nous devons dire que ce composant sera un composant de paiement, pas un composant de page de garde. Ainsi, vous garantissez que vous allez à la page de paiement. Alors revenons en arrière. Allez à notre garde, cliquez sur Vérifier. Ok, parfait. Nous avons la page de paiement fonctionne. Donc, la page de paiement, ce sera exactement comme la page de garde. Donc, il aura sur le dessus quelque chose comme retour à leur panier, comme bouton. Comment nous avons comme retour à leur panier ici et tout, par exemple, retour au shopping. Et aussi, il aura une forme. Et le formulaire sera exactement comment nous avons construit dans le panneau d'administration. Si vous vous souvenez, je vais regarder dans et comme vous le voyez ici dans les utilisateurs, nous avons créé un formulaire qui nous donne nom, e-mail, mot de passe, et toutes les autres informations sur l'utilisateur. Nous utiliserons le même formulaire afin que nous puissions le copier exactement de la même manière. Et nous devons supprimer est admin et le mot de passe et les autres informations peuvent nous pouvons les utiliser. Donc, j'ai déjà expliqué sur ce formulaire, comment nous avons obtenu les pays, comment nous avons toujours obtenu la validation. Donc, lorsque vous voulez créer un utilisateur sans validation, la seule différence que nous avons besoin pour valider ces champs lorsque nous faisons cela dans leur page de paiement. Donc, dans ce cas, nous allons utiliser le même exactement étranger que nous avons utilisé dans le panneau backend. Nous utiliserons exactement les mêmes composants comme cette entrée. Donc, d'abord, faisons ce modèle pour la page de paiement. Donc ce que j'ai aussi besoin d'avoir comme une page de paiement ici, comme exactement comment nous avons avec leur garde. Donc nous l'avons fait. Page de paiement et nous aurons le bouton nous le rappelons à leur panier, pas de retour à la boutique. Et nous faisons un bouton qui est de retour à leur panier. Nous devons donc ajouter cette méthode. Donc on retourne à leur chariot. Nous utiliserions également le module routeur. Nous disons privé et le routeur. Et le routeur. Et ce routeur viendra d'Angular. Et nous disons, ce point de routeur naviguer. Et je veux naviguer vers leur page de panier. C' est exactement comme ça que nous naviguons toujours. Donc on sauve ça, on sauve ça. Et nous allons à notre page de panier à l'avant. Donc, nous avons ici vérifier. Ok, on a maintenant le bouton de retour à leur panier. Donc, lorsque l'utilisateur veut changer quelque chose dans sa voiture avant de quitter, il peut retourner à son panier. Maintenant, nous allons ajouter le formulaire. Donc, le formulaire sera également à l'intérieur d'une grille. Donc, je vais le donner comme une grande grille de but. Et il aura un nom qui est appelé comme formulaire de vérification. Donc exactement la même chose. Donc nous avons donné la forme. Et puis nous devons utiliser le formulaire que nous avons utilisé dans les utilisateurs pour le formulaire à l'arrière et tout dans le panneau d'administration. Nous allons donc utiliser exactement le même. J' ai donc déjà préparé ce code parce que nous avons tout répété comme nous avons parlé de la façon dont nous créons le nom de contrôle de formulaire, comment utiliser chaque composant, comment nous utilisons le commutateur, comment nous utilisons la liste déroulante, comment nous avons obtenu les pays. Si vous ne savez pas comment faire cela, vous allez simplement à la conférence où nous avons créé l'utilisateur dans le panneau d'administration. Donc, ici, vous pouvez utiliser le même concept. Nous allons utiliser la même chose, nous allons utiliser aussi. Même initialisation pour le formulaire comme ici. Nous allons utiliser la même soumission. Nous aurons aussi les mêmes validateurs que nous utilisons précédemment comme ceci est requis, ce n'est pas nécessaire. Et après cela, nous allons utiliser le même modèle de commandes exactement et ensuite nous allons passer la commande. Alors laissez-moi maintenant importer ce code. Donc, nous avons tout le code ici dans la grille. Donc, je l'ai déjà préparé. Je clique ici et nous avons maintenant les choses sont importées. Nous devons donc importer des contrôles. Comme par exemple, nous devons importer le module de modèle de texte d'entrée et nous devons utiliser un masque de saisie et aussi les autres entrées comme la liste déroulante. Donc, nous pouvons le faire aussi dans le module Orders. Donc, nous importons tous les module de texte d'entrée, module de masque d'entrée, tous dans nos modules qui sont situés ici. Nous avons donc un masque d'entrée et nous avons aussi la liste déroulante d'entrée. Donc, nous n'aurons aucun problème dans le modèle. Donc, le modèle devrait fonctionner correctement après cela. Donc, nous sauvegardons et nous ne devrions pas voir ces erreurs seulement parce que nous voyons toujours cette erreur parce que ce nom de contrôle de formulaire n'est pas défini parce que nous avons également besoin d'importer quelque chose qui est appelé module réactif. Donc le module de formulaires réactifs, que nous avons également utilisé dans le panneau d'administration et nous en avons parlé précédemment. Donc ici, maintenant nous n'avons pas d'erreurs. Donc, si vous vous souvenez dans l'utilisateur est formulaire, nous devons initialiser un formulaire et aussi obtenir les pays. Donc, nous devons aussi utiliser le même code que nous avons ici. Donc, j'ai préparé cela aussi pour ne pas obtenir autant de temps de vous dans la conférence. Donc, je n'ai pas besoin d'expliquer cela à nouveau parce que nous avons déjà expliqué cela dans les conférences des utilisateurs. Donc voici le formulaire que j'ai dit sur un NG sur dedans, j'ai un formulaire de paiement et tout check out chaud nous avons ces formulaire de paiement, groupe, constructeur de formulaire et groupe. Et j'ai listé les champs que je veux utiliser. Et aussi, j'ai utilisé obtenir des pays, obtenir des pays. Nous l'avons obtenu du service utilisateur, si vous vous souvenez comment nous l'avons utilisé. Et le formulaire de paiement, qui me renvoie aussi les contrôles. Et puis nous avons soumis groupe de formulaire de paiement ou leurs éléments parce que nous avons besoin de lire l'article de commandes pour passer la commande, comme nous le verrons plus tard, l'ID utilisateur qui est utilisé, nous avons besoin d'utiliser aussi bien l'ID utilisateur. Donc, et nous avons la liste du pays qui sera listée dans la liste déroulante. Donc, c'est exactement ce code maintenant, actuellement est exactement comment nous l'avons dans la forme de l'utilisateur. Donc tu n'as pas à l'écrire. Encore une fois. Je vais l'attacher à cette conférence. Vous n'utilisez que ces codes pour vos composants. Je vais joindre le composant de page de paiement, le HTML et le TypeScript. Aussi. Vous n'avez pas à oublier d'importer ces modules, dont j'ai parlé précédemment dans le module Orders. Donc maintenant, nous avons juste besoin de le styliser. Mais d'abord, sauvegardons pour vérifier. Nous avons maintenant tout va bien parce que nous avons aussi besoin de styliser la page de paiement. Alors je vais à la caisse. Ok, on a maintenant tout. Mais nous avons encore ce bouton vérifier parce que c'est dans l'ordre des composants de quelqu'un. Donc, nous devons vérifier si nous sommes sur la page de paiement, cacher ce bouton. Et nous avons maintenant tout ici, mais aussi les boutons sont bleus. Donc, créons un fichier de style d'abord. Nous devons ajouter ici. Et pas seulement les commandes, nous devons ajouter un nouveau dossier ou fichier, nous l'appelons vérifier. Comme nous pouvons simplement dire vérifier, SCSS et injecter ou dans les commandes que nous avons besoin de l'importer. De cette façon, celui-ci serait aussi important. Donc, nous devons mettre ici, vérifier. Donc, après les avoir importés, nous mettons le style pour ça. Donc, ce que j'ai fait dans le style, c'est exactement ce que nous avons fait avec la page du panier, si vous vous souvenez. Donc ici, j'ai la page de paiement. Je lui donne min-hauteur pour lui donner comme une hauteur minimale pour ne pas être comme très, très mince. Et aussi les boutons que je leur ai donné bordure de couleur primaire 0, comme nous l'avons fait précédemment. Et consultez le formulaire. Je le donne comme un peu de marge haut d'ici pour être loin du bouton. Et aussi l'ordre de placement bot. Il sera pleine largeur car ici nous avons également le bouton Placez commande. Nous le mettrons avec les fluides. Il sera également coloré à partir de ces classes que nous avons définies ici avec orange. Et puis nous voyons que nous avons tout comme ils vérifient au panier et à l'ordre de place. Mais comme je vous l'ai dit, nous devons cacher ces caisses. Donc, je ne peux pas dire dans l'ordre quelqu'un composant, si je suis dans la page de paiement, cacher pour moi ce bouton, comment nous pouvons faire ça ? Nous pouvons le faire simplement. Nous allons au résumé de la commande. Nous l'appelons déjà ce composant de routeur, si vous vous souvenez, ou service de routeur, nous devons vérifier ce routeur si contient la page de vérification ou non. Donc, dans la méthode du constructeur, nous disons ce routeur, cette URL, comme l'URL actuelle du routeur. Cela inclut. Donc, vous ne pouvez pas dire inclusions pour une chaîne pour rechercher une chaîne spécifique à l'intérieur de la chaîne. Donc ici, l'URL retournera pour moi cette URL. Donc, je vais vérifier si cette URL contient un mot qui est appelé check out, puis cacher pour moi le poussin ou le bouton Checkout, qui est dans le résumé de la commande. Donc on ne peut pas dire s'il est contenu, regardez. On peut utiliser la ligne de fin. Si oui, nous avons ici, nous pouvons donner comme une variable ou un membre de classe que nous appelons il est checkout. Donc, pour savoir que nous avons la page de paiement et nous le donnons au début comme un faux. Donc, au départ, ce sera un faux. Si nous avons une page de paiement, alors nous disons que c'est vérifier est à travers. Sinon, comme autrement, ce sera faux. Ces vérifier, ce sera faux. Donc maintenant avec cette variable que nous avons créée, nous passons par le modèle de quelqu'un de commande et nous disons que celui-ci, ce bouton sera totalement caché. Donc, nous pouvons dire ng-si l'expression est vérifier. Donc, quand ce n'est pas vérifier, alors montrez le bouton. Mais quand il est retiré, masquez le bouton. Donc nous économisons, nous sauvegardons cela aussi. Nous allons au modèle. Donc, comme vous le voyez ici, le bouton est caché dans la page de paiement parce que j'ai vérifié bouton ici ou chaîne à emporter. Mais quand je vais à leur panier, je vais avoir vérifier est apparu ici. Comme vous le voyez, j'ai vérifié le routeur. Je l'ai fait dans le constructeur, bien sûr, vous pouvez le faire dans les ONG en elle, pas de problème. Mais je l'ai fait dans le constructeur, ce qui est comme avant l'ONG avant d'initialiser le composant. Lorsque nous construisons cette classe, alors il appellera routeur, URL inclut checkout, puis c'est checkout through ou check out false. Donc, nous utilisons cela dans le ng-if pour afficher ou cacher ce bouton. Donc ce que nous devons faire, la seule différence que nous voulons que ce formulaire soit validé. Nous devons donc valider tous ces champs parce que lorsque nous les avons copiés à partir du formulaire d'utilisateurs, ceux-ci ne sont pas obligatoires. Nous devons donc en faire autant que nécessaire. Alors faisons-le vite. Je vais avoir ici comme ville, est-il nécessaire code postal pays ? Tous sont requis. Dans ce modèle, nous devons avoir, par exemple, e-mail, ok, nous avons la validation. Pour les étrangers, nous avons une validation, mais nous n'avons pas de rue. Nous devons donc changer tous ceux pour ne pas être formés, mais ce sera Street. Donc une rue est nécessaire. Donc il y a la même chose. Je dois copier cette partie et la mettre pour l'appartement. Je pense que ce n'est pas nécessaire. Vérifions ça dans notre formulaire. D' accord. C' est nécessaire aussi, c'est important lorsque vous livrez une expédition, l'expéditeur doit connaître l'appartement. Donc, nous disons aussi, ici, appartement et appartement est nécessaire. La même chose que nous faisons pour le code postal. Donc, nous devons aussi ajouter ce code postal ici. Donc on a zip. Et puis la ville. Vous voyez, c'est exactement la même chose que nous avons fait avec le formulaire d'utilisateurs. Donc vous n'avez pas à aimer, dites-moi si vous, si vous ne comprenez pas cette conférence, retournez simplement au formulaire d'utilisateurs. Vous comprendrez tout ce point. C' est pourquoi, au début de ce cours, je préfère que vous ne sautiez aucune partie de ce cours parce que tous sont, vous pouvez les considérer, sont tenus d'assister dans le cas où vous voulez me suivre. Mais je mentionne dans chaque conférence où j'explique ceci, donc vous n'avez pas à vous soucier de ce point. Donc maintenant, j'ai tout est validé. Donc, nous devons ajouter, eh bien, ajouter un bouton pour passer commande. On dit comme jouer à l'onclick. Nous avons ici le bouton onclick de Prime NG. Donc, je vais dire ordre. Donc, cette méthode d'ordre de place, je dois l'implémenter. Donc tout d'abord, je dois passer la commande. Donc, je vais dire ici, si cela, comme, si vous vous souvenez, nous avons ce formulaire point, comme le formulaire de paiement est invalide, alors retournez et ne faites rien parce que nous n'avons pas atteint ces conditions de validation. Donc, dans ce cas, nous y retournerons. Donc, lorsque nous soumettons le formulaire, nous devons définir la variable que nous avons créée, qui est appelée est soumise à true, comme pour activer la validation. Donc, lorsque l'utilisateur clique sur Placer, Commander, cela signifie comme il a soumis, mais il a un problème dans la validation. Et puis la prochaine conférence, nous verrons comment nous pouvons passer l'ordre dont nous avons besoin pour collecter les données et faire le modèle de commande. Ainsi, nous avons terminé cette conférence. Donc, vous voyez ici nous avons le modèle, nous avons défini le bouton Commande, et nous avons le formulaire prêt pour contrevenir ou passer la commande. Et comme vous le voyez ici, lorsque j'ai cliqué sur passer commande, tous ces champs sont obligatoires. 166. Placer des ordres: Ok, ce que nous allons faire maintenant, nous devons passer la commande. Si nous allons à la page de paiement et cliquez sur Passer commande, alors la commande sera passée après validation des données de formulaire de l'utilisateur. Comme je vous l'ai dit, nous allons passer une commande en tant qu'invité, nous ne allons pas mettre en œuvre le login maintenant. Nous le ferons dans la prochaine section. Donc, tout d'abord, nous devons essayer le passage de la commande étape par étape. Et puis nous passons à la connexion et saisissons les données de l'utilisateur de la base de données. Mais maintenant, nous devons passer la commande normalement. Alors collectons les données du formulaire. Comme vous vous en souvenez, nous avons dans la bibliothèque de commandes et le modèle qui est appelé ordonné. Donc, dans la bibliothèque des commandes, nous allons ici et nous voyons ici l'ordre. Et dans la commande que nous avons comme ID, articles de commande, expédition, adresse, une expédition à ce aussi, et toutes les informations dont nous avions besoin pour passer une commande. Nous devons donc collecter ces données et les placer exactement de la même manière dans leur dos. Et si vous vous souvenez avec le Facteur, nous publiions la commande comme je vous l'ai montré précédemment dans la partie back-end. Si vous ne voyez pas la vidéo, vous devez aller voir la vidéo de création d'une commande dans la base de données. Copions donc ces données et allons à notre page de paiement. Sur la méthode Placer la commande, lorsque je clique sur ce bouton, qui est ici pour passer la commande, j'ai soumis et puis je vérifie si le formulaire est valide. Ici, nous devons créer le modèle de commande. Donc, nous devons créer l'ordre const, et ce sera le type d'ordre. Donc, l'ordre viendra des modèles. Et puis ce sera égal à mes champs, que je dois ressentir ici. Mais nous devons d'abord remplacer ces chaînes par la valeur, l'ID. Nous n'en avons pas besoin car lorsque nous avons passé la commande, elle viendra automatiquement avec l'ID de la base de données. Mongodb fera ça pour moi. Et puis commandez des articles. Nous devons récupérer les articles de la commande. Pour l'instant, définissons un membre de classe. Nous l'appelons ceci articles de commande. Et ces éléments de commande, nous pouvons le définir ici comme un membre de la classe, comme vous le voyez ici, qui sera tableau de l'article de commande. Donc, nous avons un élément de commande et ce sera un tableau. Au début, ce sera le tableau initial. Donc, nous devons également supprimer cette question pendant que nous avons encore un problème ici, parce que nous devons mettre une virgule. Nous avons ici une erreur parce qu'il dit que le type d'élément de commande est tableau, mais il est dans le modèle, c'est seulement un ou le bon. Vérifions la commande. Si vous vous souvenez, nous avons fait, je pense que j'ai oublié de mettre ici un tableau, donc nous devons réparer ça. Je pense que l'application groupée par l'administrateur ne sera pas affectée pour cela. Alors vérifions le panneau d'administration pour être sûr que nous n'avons aucun problème ici. D' accord. Tout va bien. Nous n'avons aucun problème. D' accord. Retournez à l'application frontale. À la fin, vous magasinez. Maintenant, nous avons les articles de commande à faire maintenant l'adresse, donc ils sont l'adresse d'expédition un. Nous pouvons dire que ce point vérifier formulaire. Vous vous souvenez qu'on accédait aux contrôles du groupe de formulaires comme celui-ci. Point. Nous pouvons maintenant mettre la rue par exemple, cette valeur. Donc, avec cela, nous avons accès au champ de rue et nous disons que nous avons la valeur de celui-ci dans l'adresse d'expédition un, nous devons correspondre exactement au modèle. Donc, vous n'avez pas à oublier que peut-être l' adresse d'expédition deux peut être aussi comme le pas la rue, mais nous pouvons utiliser l'appartement. Donc, nous avons ici la valeur de point d'appartement et aussi la ville sera la même. Donc nous devons copier ceci, le mettre ici, supprimer ce point d'interrogation et nous disons la ville, ce code postal le même. Nous devons également ajouter le code postal ici aussi. Donc nous devons mettre ici la virgule, virgule et ici le pays. Encore une fois, nous devons faire de même. Je vais le faire vite. Donc, nous devons tous les ajouter comme ça. Et nous aurons un problème avec un utilisateur. Je l'expliquerai plus tard. Donc, tout d'abord, nous devons avoir comme toutes les valeurs pour être justes. Nous avons un pays qui supprime ce point d'interrogation. On va y aller, téléphone de campagne, on doit mettre aussi. Le téléphone ici état 2s, prix total, prix total. Nous avons aussi besoin. Aussi bien de le calculer en quelque sorte. Utilisateur et ils ont commandé. Donc, nous avons aussi ici. Ils ont commandé ou il peut être point de date. Maintenant, supprimons ces points d'interrogation et nous allons vérifier si tout va bien. Nous avons donc la ville, statut du pays, le prix total, et l'utilisateur. Donc, l'utilisateur que nous n'avons pas sous la forme quelque chose appelé utilisateur. Nous allons donc utiliser quelque chose appelé ID utilisateur. Et cet ID d'utilisateur viendra comme un ID statique ou un utilisateur statique, que je vais utiliser en tant qu'invité. Donc, nous allons à l'application bundled admin. Nous pouvons créer un utilisateur comme un utilisateur aléatoire. Nous lui donnons un nom comme invité, et nous pouvons remplir l'e-mail. Par exemple, si votre organisation nous pouvons dire et nous pouvons lui donner un mot de passe comme et toutes les autres informations. Peut-être qu'on peut leur donner comme ça. On peut mettre n'importe quel numéro ici. Et nous cliquons sur Créer, créé, cet invité. Alors, qu'avons-nous besoin de faire ? Nous allons à la base de données et l'attraper l'ID de l'utilisateur. Donc, je suis allé à la base de données, cloud mongodb.com et je me connecte avec mon compte et puis je vois tous les utilisateurs, que j'ai ici. J' ai créé cet invité. Donc, nous prenons cela, donc nous pouvons cliquer sur éditer. Peut-être que nous pouvons copier cette partie ici et aller à notre demande. Nous devons également remplacer. Ils vérifient la page, nous devons ajouter cela à cet utilisateur, mais vous pouvez faire, par défaut, cet utilisateur sera l'invité. Bien sûr, nous allons afficher ou remplacer cela lorsque l'utilisateur sera verrouillé. Nous devons donc ajouter cette chaîne ici. Donc, nous n'avons pas besoin du temps pour ne pas avoir d'erreur. Donc, l'ID utilisateur pour moi sera cette chaîne. Donc nous gardons ça. Et puis nous devons passer à l'utilisateur. Et nous voyons que nous avons encore un problème ici. Pourquoi ? Parce que j'ai fait cette erreur par des violets juste pour vous montrer comme quand vous obtenez une demande différente. Par exemple, dans le panneau d'administration, nous obtenions l'utilisateur comme un objet qui contiendra le type d'utilisateur, l'utilisateur qui a un nom d'ID, mot de passe au backend retournait pour moi cet objet, pas tout. C' était seulement un nom, peut-être un e-mail, et d'autres informations. Donc, dans ce cas, lorsque vous avez un conflit entre la demande a post et ils requête GET, alors il est préférable à l'extrémité frontale de définir ceci comme n'importe quel. Parce que dans la requête GET, nous obtenons ceci en tant qu'objet utilisateur. Mais quand nous postons une demande, nous devons envoyer seulement l'ID. Il est donc préférable de résoudre ce problème, ce conflit entre l'application. Vous dites simplement que ce champ est n. Donc, dans ce cas, vous serez en mesure d'utiliser le formulaire que nous avons créé ici comme une chaîne ainsi que pour poster une commande dans la base de données ou dans le back-end. Parce que si vous vous souvenez du backend avec des fils obtenant l'utilisateur comme une chaîne de son ID pour la date commandée, nous avons juste besoin aussi bien de mettre la date. Donc c'est la lettre majuscule point maintenant. Donc, lorsque l'utilisateur publie cette commande avec succès, alors nous mettons le point maintenant. Donc, si nous allons à l'ordre de date, nous devons donc avoir cette date maintenant et vous pouvez l'encapsuler comme une chaîne. Donc, vous pouvez utiliser un cochon chauve-souris et prendre cela comme une chaîne parce qu'il le demande comme une chaîne. Donc, comme vous le voyez ici, donc nous allons à l'ordre il dit que je veux que comme une chaîne. Pour qu'on puisse saisir ça entre nous, penser à des tiques. Et maintenant, nous devons obtenir les articles de commande. Nous voulons donc poster une commande. Nous devons envoyer les articles de commande. Ainsi, chaque article de commande, comme nous nous en souvenons, contenait le produit et la quantité. Nous devons donc nous abonner à nouveau à leur panier. Donc, si vous vous souvenez, nous avons créé un service de garde et un service de défausse. Je peux récupérer tous les articles du panier. Alors on va ici et on dit privé. Et puis nous devons avoir comme un service de chariot. Et ce sera le type de service de chariot. Et nous utilisons ce service de garde pour récupérer les articles de jardin. J' ai créé ici. Membre de la classe, qui est appelé éléments de commande. Donc, un MD sur dedans après la forme d'intializer, nous pouvons le dire et ensuite obtenir des éléments de carte. Donc, dans ce cas, nous devons définir une méthode après l'initialisation du formulaire, nous pouvons dire des articles de panier Git privés. Et ce sont des objets de garde qui utiliseront ce service de cartes. Donc, nous devons dire ce service de cartes à points et ensuite observer notre garde. Ou vous pouvez utiliser aussi obtenir garde parce que nous n'avons pas à utiliser directement. Les articles de panier, que nous avons, comme tous observer cette garde parce que nous ne faisons aucune chaîne. Donc, chaque fois que nous avons visité le composant, nous recevons cette carte de notre stockage local et nous lisons les données. Donc, vous pouvez dire comme un chariot constant. Et bien sûr, vous pouvez utiliser la carte que nous avons créé l'observable. Donc, ce panier aura un type qui est appelé carte, et cette carte sera importée à partir des modèles. Maintenant, nous devons obtenir des articles de carte. Donc, je dois dire ce point d'articles de commande, que nous avons défini précédemment, nous dirions les points de carte. Mais ici, nous aurons aussi un problème. Parce que si nous allons aux articles du panier, ils ont l'ID du produit du panier. Mais dans l'article de commande de nous allons au modèle, nous avons seulement produit. Nous avons donc l'une des deux options. Peut-être devrions-nous changer cela pour l'ID du produit aussi. Ou nous pouvons cartographier un nouvel élément pour s'adapter à cet article de commande. Donc, je peux dire ici que cette garde commande éléments carte point. Et puis dans cette carte, je peux dire élément. Et chaque article sera comme retourner pour moi un objet. Et ce sera produit, et ce produit sera item.name, ID de produit, puis la quantité sera la même quantité point d'article. Donc, de cette façon, je mappe tous ces éléments pour avoir un identifiant de produit mais un produit. Ainsi, il fera une boucle sur tous les articles à l'intérieur, garde article, article par article, et le modifiera pour avoir l'ID produit et non produit en lisant l'ID produit point article. Et cela a été retourné pour moi tableau, comme vous le voyez ici, de l'élément de commande. Donc, dans ce cas, nous avons rempli nos articles de commande. Donc, pour nous assurer que tout va bien, nous pouvons simplement regarder dans le journal de la console ces éléments de commande pour être sûr que nous allons vraiment bien. Donc, nous ne pouvons pas dire que la console consigne ce troisième élément de commande après avoir fait ce mappage ici. Donc, je vais rafraîchir et ensuite j'ouvrirai la console. Et nous verrons que nous avons obtenu tableau, produit et quantité. Et ce sera un produit et non un identifiant de produit, qui correspond exactement aux articles de la commande. Et puis quand je soumets une nouvelle commande, je dis que ceci ou d'autres articles seront des articles plus anciens que nous avons remplis ici. Avons-nous besoin de calculer le prix total ? Non, parce que nous le sommes si nous envoyons le prix total à l'arrière et puis tout utilisateur peut poster le prix total à. Dans ce cas, cela fera pour moi un problème que je vais placer. Par exemple, pirater leur site Web et envoyer une commande avec un prix total faux. Comme je peux mettre 41, 1000$, je peux mettre 2$ et je peux l'envoyer à l'API. Donc, le backend ne reçoit pas le prix total, mais nous le calculons en interne et collé faire la base de données, donc nous n'avons pas à envoyer ce prix total, le prix total dans le modèle que nous l'avons utilisé parce que nous voulait l'utiliser dans l'application du panneau d'administration. Si vous vous souvenez, nous sommes allés aux commandes et nous, nous recevons le prix total ici. Donc, dans ce cas, nous garantissons que tout se passe dans le backend. On n'envoie rien au front. Donc, toujours quand nous faisons ce calcul, quand nous passons l'ordre, tout devrait devenir à partir du backend. Sinon, si vous envoyez depuis le front end comme ceci ici sous forme de chaîne, par exemple, vous l'envoyez au back-end, alors ce n'est pas une bonne pratique car n'importe qui peut simuler ce prix et l'envoyer au back-end et faire un problème pour vous dans la boutique en ligne. Donc, après ça, nous avons fait le chèque. Nous avons créé le modèle de commande. Si vous vous souvenez, nous avons créé un service qui s'appelle créer l'ordre. Et cet ordre de création affichera une commande pour moi dans la base de données. Alors appelons le service de commande. Nous allons ici de nouveau à notre page de paiement. Nous demandons le service de commande. Donc nous avons ici le service de chariot. Nous avons besoin d'un service de commande privé. Et ce serait le type de service de commandes. Ensuite, ce service de commande, nous devons l'utiliser pour créer une commande. Alors, je reviens ici. Et puis je dirais ce service de commande point, point créer l'ordre. Et je vais envoyer cette commande, faire le back-end. Mais comme vous vous en souvenez, cela ne sera pas exécuté tant que je n'ai pas souscrit. Donc, quand nous pouvons faire l'abonnement, et ensuite nous pouvons dire ordre ici ou nous pouvons juste le garder et vide, comme vide. Et puis nous pouvons rediriger l'utilisateur vers une page de remerciement, comme nous le verrons dans la prochaine conférence. Pour qu'on puisse ouï-dire. Direct aussi. Page de remerciement. Et comme nous le verrons plus tard, je vais l'ajouter bientôt à leur cours. Comme après toi, d'accord, tu regardes ce cours, tu t'es inscrit, mais tu ne vois pas ce paiement. Je vais ajouter ce maximum de paiement après deux semaines de création de ce cours. Donc, nous sommes ici, nous ne pouvons peut-être pas trop, merci, mais aussi peut-être pour le paiement. Donc page de paiement. Donc, nous verrons dans le paiement que nous ne allons pas coller toute commande ou toute commande dans la base de données jusqu'à ce que le paiement ait accès. Et nous le ferons avec la passerelle de paiement sprite. Mais qu'en est-il du statut, si vous vous souvenez, nous avions également un statut pour la commande et vous savez que la commande vient toujours comme flexion initialement. Donc, le statut de l'ordre, nous ne l'avons pas senti parce que nous n'avons pas de quatre membres qui s'appelle statut ici. Donc, si vous vous souvenez, nous avons créé une constante dans le panneau d'administration, qui est appelé statut. Donc, le statut de la commande doit initialement être comme la flexion, comme l'état initial de la commande. Donc, quand nous allons à l'application Admin puis à la commande, nous avons une constante de commande et nous avons le statut de commande. Il est donc préférable ici d'utiliser ce statut de commande de la même manière, que nous avons utilisé dans le back-end. Donc, dans ce cas, nous pouvons lire dans le backend les mêmes données qui sont collées ou les deux à travers leur front end. Donc ici, je dirais peut-être que nous pouvons déplacer cette constante d'ordre, comme à partir d'ici, nous la coupons et la déplaçons à la bibliothèque des ordres. Donc, nous allons ici et nous pouvons entendre collé près des services de modèle de composants. Nous ne pouvons pas nous baser directement sur la bibliothèque, donc il sera près du module. Et puis dans l'application d'administration, nous aurons une erreur car ce fichier sera manquant. Donc surtout quand je dirige le détail de la commande et aussi la liste des commandes. Donc, comme vous le voyez, le statut de la commande n'existera plus et cela me donnera une erreur. Donc nous devons d'abord l'importer à partir de celui-ci, à partir des commandes Blue Bits. Donc on l'a eu et on l'a collé ici, Ok, et retirez cette partie et sauvegardez celle-ci. Et aussi dans les détails de la commande, nous avons ceci ici et coller dans l'ordre comme je vais l'obtenir de la bibliothèque des commandes, mais nous obtenons toujours l'erreur. Donc, l'état de la commande ici n'est pas exporté à partir de la bibliothèque de commandes Donc, nous devons aller à l'index et dire Exporter pour moi, commencer à partir de. Et puis on dit lèvre. Et cette lèvre va, je vais importer ou exporter la constante de commande. Donc, dans ce cas, les détails de la commande dans l'application du panneau d'administration et aussi la liste des commandes. Nous verrons cela comme la constante d'état de la commande. De cette façon, nous pouvons être en mesure de l'utiliser aussi bien dans le front end ou dans n'importe quelle application de boutique, ou dans la bibliothèque elle-même où nous avons créé la commande ou affiché la commande. Donc, le statut initial pour toute commande, il ne sera pas comme traité ou expédié. Il va se pencher. Donc, quand je vais à l'application du panneau d'administration, je vais au détail de la commande ici l'utilisateur obtiendra la commande, l'administrateur obtiendra toujours l'état initial de la commande pour les nouvelles commandes comme ajout. Donc, de cette façon, nous serons sûrs que nous sommes toujours initialisés cette flexion. Et puis l'administrateur peut changer le statut ici comme nous le voyons ici. Revenons maintenant à notre page de paiement. Nous allons donc importer ici la constante d'état de l'ordre, que nous avons utilisée ici. Nous pouvons donc l'importer aussi sur notre page de paiement. Alors j'irai ici. Et puis je dirais importer pour moi la constante d'état de la commande à partir de. Ensuite, nous sélectionnons le chemin actuel ou le brevet parce que nous sommes dans la même bibliothèque, donc nous n'avons pas à nous en soucier. Donc, après cela, nous disons que le statut de la commande sera initialement le statut de la commande. Et puis si nous avons besoin d'aller vérifier l'état de la commande. Ainsi, l'état de la commande dans le stocké dans le back-end comme suit, comme vous vous en souvenez ou dans la base de données. Si nous passons aux commandes et nous verrons alors le statut est stocké sous forme de nombre. Donc, nous devons aussi obtenir la clé, donc nous n'avons pas besoin d'utiliser l'étiquette ou leur couleur. Nous avons besoin de la clé jusqu'à présent que je dirais qu'on peut peut-être y aller, en retournant à notre page de paiement. Donc, nous avons ici la constante que nous avons page de paiement. Je vais dire ici les touches de point d'objet. Vous savez donc que cela me rendra les clés de cet objet que je passe ici. Nous devons donc obtenir les clés du premier objet. Donc, si j'obtiens les clés, alors nous aurions un tableau des clés, qui est 0, 1, 2, 3. Donc ce dont j'ai besoin, c'est le premier. Donc, nous avons comme ça 0, tout ce que vous pouvez directement sans quoi que ce soit qui dit que je veux le statut 0, qui sera stocké dans la base de données, exactement comment nous avons défini notre mappage de statut, qui est également dans la constante comme vous le voyez ici, nous avons le 0 pour en attente. Donc, je veux l'état 0 et il sera stocké dans la base de données en tant que statut 0. Et dans le panneau d'administration, il apparaîtra initialement comme flexion, qui est le statut 0 0. Alors je vais y aller en premier. On peut faire comme ici un journal de console. Peut-être que nous pouvons confirmer que c'est un succès. Donc, je vais dire console.log, comme ajouté avec succès. Bien sûr, comme je vous l'ai dit, nous allons remplacer la page de remerciement ou la direction ou par le paiement comme nous le verrons plus tard. Alors sauvegardons. Je vais remplir ces données rapidement. Donc je sens ces données, je vais passer la commande, mais ouvrons la console afin que nous puissions voir notre message s'il apparaît après avoir passé cette commande. Donc, quand je clique sur Passer commande, ok, ajouté avec succès. Alors vérifions leur base de données si nous ajoutons vraiment cette commande avec succès. Alors fermons à nouveau ces et ensuite nous actualisons notre base de données. Et nous verrons que si nous recevons l'ordre, gentil, nous avons l'ordre ici. Donc, nous avons un statut de commande et entendons tout ce qui est lié à moi. Et comme vous voyez que nous avons l'utilisateur est celui invité. Donc, nous n'avons pas, comme nous l'entendrons, le nom et l'e-mail parce que nous ne laissons pas l'utilisateur se connecter. Parce que, comme nous l' avons dit, nous allons forcer l'utilisateur à se connecter sur la page de paiement afin que nous puissions obtenir ses informations sans, par exemple, mettre toutes ces informations dans la base de données. Donc, en fait, nous pouvons nous débarrasser du nom et de l'e-mail ici parce que nous n'en avons pas besoin, parce que nous allons demander à l'utilisateur quand il s'inscrira à l'avenir, quand nous allons faire l'authentification pour entrer son nom et son email lors de l'inscription. Donc, nous faisons alors juste, par exemple, ce sont des variables en lecture seule ou des champs en lecture seule. Et toutes ces informations sont modifiables afin qu'il puisse passer commande avec son email et le nom avec lequel il s'est enregistré. Donc, nous allons au panneau d'administration, nous voyons si nous avons vraiment cet ordre. Ok, gentil. J'ai ici l'ordre de flexion afin que je puisse voir l'ordre et il vient de l'invité. Bien sûr, comme je vous l'ai dit, nous allons remplacer cela par un utilisateur, comme nous le verrons dans la section suivante. Mais maintenant, nous postons la commande en tant qu'invité. Et plus tard, nous allons utiliser la connexion et l'authentification dans le front end pour obtenir la vraie idée en utilisant la bibliothèque partagée. Donc, comme vous le voyez ici, nous allons voir comment nous pouvons utiliser le composant de connexion, que nous avons également utilisé dans l'application du panneau d'administration. Donc, le même verrouillage, nous allons l'utiliser aussi dans le front end pour se connecter à ce client et le laisser passer des commandes. Dans la prochaine conférence, nous verrons comment nous pouvons vraiment diriger l'utilisateur vers une page de remerciement après avoir passé la commande. Et une dernière chose que je veux vous montrer, si nous allons au détail de cette commande, nous verrons que nous obtenons la même quantité, exactement ce que nous avions dans leur panier. 167. Page de remerciements: Après un passage réussi de la commande dans notre e-shop, nous allons rediriger l'utilisateur vers une page de remerciement, comme nous ne pouvons pas lui dire. D'accord. Merci pour votre commande. Nous allons expédier votre colis dans les trois prochains jours, par exemple. Nous pouvons donc supprimer ce journal de console que nous avons créé ici. Et puis nous allons lire, diriger l'utilisateur vers un nouveau composant. J' ai déjà créé ce composant qui s'appelle merci et la page de remerciement sera comme une page de paiement. Ce sera la même chose à la page de paiement. Et à l'intérieur il y a un div qui s'appelle la page de remerciement. J' ai mis H2 comme premier titre, comme merci d'être avec nous. Et un autre h3 nous avons reçu ici j'ai une erreur. Donc, votre commande et puis il sera livré dans les trois prochains jours aussi. J' ai un bouton qui sera de retour au magasin. Mais ici, je n'ai pas utilisé naviguer et onClick. J' ai utilisé le lien de routeur, comme cela me conduira à la page d'accueil de l'application. Alors maintenant, essayons ça. Donc, bien sûr, après avoir ajouté tout cela, j'ai ajouté la route pour la page de succès. J' ai appelé ça le succès. Et le composant sera le composant Merci. Et bien sûr, cela sera également authentifié comme nous le verrons plus tard. Donc, dans mon composant de page de retrait, je vais juste utiliser le routeur à nouveau. Donc, nous devons dire que ce livre routeur naviguer à notre navigation. Et puis ce sera un tableau. Et ce sera le dirigé comme au succès. Donc, dans ce cas, nous aurons comme la redirection de leur succès après que nous nous assurons que souscrire comme Succédé. Mais si ce n'est pas le cas, vous pouvez également afficher un message d'erreur à l'utilisateur. Vous pouvez l'avoir comme un devoir pour vous. Donc, vous pouvez simplement dire qu'il y a une erreur. Par exemple, vous pouvez afficher un message à l'utilisateur comme je vous l'ai dit. Donc on peut juste dire comme ça. Donc, après l'abonnement, nous avons ici, l'abonnement, ces parenthèses. Après ces crochets, vous mettez une virgule, puis il répondra pour vous avec l'erreur. Donc, s'il y a une erreur dans cet abonnement, alors il sera exécuté ici, donc il ne naviguera pas. Donc peut-être que nous pouvons dire afficher un message, par exemple, à l'utilisateur. Donc, vous pouvez le faire comme un devoir pour vous. Alors maintenant, essayons ça. Nous allons aimer naviguer pour voir si nous naviguons. Après avoir vérifié, je vais à la page de paiement, je sens que les données. Et puis nous allons passer la commande et quand son succès, il me redirigera vers la page de remerciement. Donc nous passons la commande. Parfait. Nous vous remercions d'avoir fait vos achats avec nous. Nous avons reçu votre commande et elle sera livrée dans trois jours. Et puis vous pouvez cliquer sur le retour pour magasiner et vous allez à nouveau sur la page d'accueil. Donc c'est génial. Donc, nous avons passé la commande avec succès et nous avons maintenant entièrement e-Sharp, comme nous pouvons le dire, fonctionnel, nous avons juste besoin d'ajouter ces points, que je vous ai dit à propos de l'authentification, que nous devons forcer l'utilisateur à se connecter avant qu'il puisse vérifier . Un autre point, je dois mentionner, vous voyez que notre garde est encore tombée. Donc, nous avons ici comme il est encore deux éléments après que nous avons passé la commande afin que nous puissions initialiser aussi bien le stockage local avec des voitures vides parce qu'après avoir réussi off check out, je veux avoir ce garde comme vide quand je vais à l'arrière à la ou à la boutique, je n'ai pas de cartes parce que j'ai déjà commandé. Donc, pour ce faire, nous pouvons aussi bien aller à notre comme ici où nous sommes en train de créer avec succès la commande. On appellerait ce service de cartes. Donc ils se tenaient service de garde. Nous ne devons pas appeler stockage local de la carte d' initialisation parce que dans tout stockage local actuel, comme vous vous en souvenez, nous avons vérifié que si nous avons une nouvelle carte, initialisée et nouvelle carte, alors ok, faire une nouvelle carte. Si ce n'est pas le cas, utilisez leur carte dans notre stockage local. Donc nous avons besoin de quelque chose qui s'appelle vide ce chariot. Donc, nous pouvons aussi bien faire le chariot vide. Nous pouvons donc avoir cette méthode aussi. Et ici, nous pouvons copier la même chose. que nous puissions créer une carte initiale, nous pouvons lui donner une constante. Et puis nous pouvons dire vérifier comme l'article de l'ensemble de points de stockage local, puis avec le panier initial. Donc, après cela, nous pouvons appeler cette méthode. Je vais ici. Et puis je devais placer cette méthode sur notre page. Nous avons toujours une erreur ici parce que nous devons aussi le changer JSON parce que sinon cela ne fonctionnera pas. Donc, nous avons ici la carte initiale et je vais passer n'importe quelle chemise Carte JSON. Donc de cette façon, nous avons un chariot vide à nouveau. Allons ici et disons vider ce chariot. Donc, après naviguer, il est donc préférable de le faire avant la navigation. Donc, nous vidons leur panier et nous naviguons vers la page de réussite. Alors essayons ça. Donc, je sens la forme. Je vais passer la commande. D' accord. On retourne à la boutique. Et comme nous voyons que nous avons encore ces deux ici parce que celui-ci observe, comme vous vous en souvenez, est en train d'observer le chariot. Donc, en quelque sorte, nous devons dire à l'observateur pour obtenir la carte initiale, nous n'avons pas besoin d'avoir comme le garde observable que nous avons déjà gardé. Donc, pour cela, je vais à leur service de chariot et je dis que ce point de garde observable ensuite et ensuite nous donnons le panier initial. Donc, après avoir vidé la carte ici, nous ne pouvons pas dire ces deux points de carte ensuite puis l'intestin initial. Donc, dans ce cas, la personne qui se connecte à l'application après, s'il est resté dans la page, par exemple, alors il retournerait à la page d'accueil et il verra que ce répertoire de garde vide. Essayons encore une fois. Je vais ajouter deux articles à ce garde, puis aller à mon panier, vérifier, remplir à nouveau le formulaire. Donc, je vais vous dire plus tard de ne pas remplir à nouveau le formulaire, encore une fois pour le développement, je vais vous dire comment initialiser ces champs avec des valeurs initiales. Donc vous n'avez pas à ressentir cette forme chaque fois que vous testez quelque chose. J' ai donc ici, encore une fois le champ de formulaire, donc je remplace une commande. Comme vous le voyez, d'accord, retournez à la boutique. Nous avons ici ce Garth vide. Nous allons à nouveau et nous voyons que nous avons, notre chariot est déjà vide. Donc, quand je vais au produit, j'ajoute un article. Vous voyez que nous avons de nouveau l'article. Ainsi, nous garantissons que nous avons un panier vide pour l'utilisateur. Il n'aura aucun problème quand il a voulu retourner faire du shopping dans mon e-shop. Je veux juste mentionner quelque chose pour vous à des fins de développement comme vous voulez développer. Vous n'avez pas à sentir chaque fois que ce formulaire quand vous voulez, par exemple, pour tester la caisse, je suis sûr que vous allez essayer de toujours tester la caisse lorsque vous développez. Et puis vous devez sentir toujours cette forme pour faire une solution facile pour vous. Si vous vous souvenez, nous avons ici une chaîne qui est vide lorsque nous créons le groupe de formulaires. Vous pouvez donc donner ici des valeurs par défaut. Donc, vous pouvez dire ici nom un, par exemple, e-mail. Vous pouvez donner un e-mail, email.com. Et lorsque vous rechargez l'application, vous verrez que toutes ces données sont remplies automatiquement, de sorte qu'elles seront par défaut avec ces valeurs. Comme vous le voyez ici, j'ai rechargé et je vois ces valeurs par défaut. Donc, dans ce cas, vous n'aurez pas à vous soucier de remplir cette application ou ce formulaire chaque fois que vous actualisez votre code et que vous revenez en arrière, ce sera un très difficile pour vous. Donc, vous venez de configurer certaines valeurs par défaut. Et puis après avoir terminé le développement, vous êtes sûr que tout va bien. Ensuite, vous pouvez remplacer, supprimer toutes ces valeurs par défaut. Il sera donc vide par défaut pour l'utilisateur en public ou en production. 168. Permettre de se connecter sur la Checkout: Dans la section précédente, nous avons vu comment nous avons pu passer une commande en tant qu'utilisateur invité. Mais maintenant, nous allons faire le placement de la commande en fonction des données de l'utilisateur. Ainsi, comme chaque boutique, nous allons demander à l'utilisateur connecter quand il appuie sur le bouton Checkout. Alors, comment pouvons-nous le faire facilement ? Donc, tout d'abord, si vous vous souvenez, nous avons créé des gardes, et ces gardes, ils sont créés spécialement pour protéger les pages. Et nous utilisons notre composant de connexion, que nous avons créé précédemment dans l'application d'administration. Donc aller à lèvres, si vous vous souvenez, nous avons des ordres et ces ordres, si vous vous souvenez, nous avons un module de commande. Et dans le module de commande, j'ai défini mon hypothèse. Mais comment nous pouvons créer ou protéger la page de paiement, page de paiement, nous allons utiliser quelque chose comme, par exemple, le garde que nous avons créé pour la page d'administration. revenant à l'application Admin, si vous vous souvenez Aller à ses routes, nous verrons que nous avons dans le module de routage de l'application ici que nous avons créé peut activer out guard. Et la garde extérieure venant de la bibliothèque de l'utilisateur, que nous avons créé auparavant, qui vérifie les liens et le jeton. Et puis sur la base de cela, il vous dirigera vers la page de connexion ou il vous dira, d' accord, vous êtes les bienvenus. Vous pouvez entrer et retourner, vrai. Nous vous expliquons tout cela avant. De cette façon, nous pouvons également utiliser le protège-dents pour protéger la page de paiement. Donc, la page de paiement, si vous vous souvenez, nous avons défini l'air hors de lui, le module des commandes. Donc de cette façon, je ne peux pas dire après que le bain puisse s'activer. Et puis nous disons d'utiliser notre protège-bouche. Et les Asgards viennent d'où ? De la bibliothèque des utilisateurs. Donc, si vous voyez qu'il est automatiquement importé ici. Et n'oublie pas la virgule. Mais ici, nous avons un problème parce que nous devons dire que c'est un tableau. Donc, vous devez le mettre dans un tableau. Donc, tableau out garde pour éviter d'avoir une erreur. Donc maintenant, si nous allons à nouveau à notre application, allant par exemple, au panier, et je vais à la page de paiement et puis dire ici, vérifier, je ne suis pas en mesure de faire quoi que ce soit. Alors, ouvrons la console et voyons quel est le problème. Nous verrons qu'il n'y a pas de connexion de segment d'URL de routes, ok, Donc je suis vraiment lu dirigé vers leur login, mais je ne peux pas y aller parce qu'un regard dans la route n'est pas défini. Si vous vous en souvenez, l'itinéraire défini dans la bibliothèque de l'utilisateur ou dans l'utilisateur est module. Si je vais au module de l'utilisateur, je verrais que la connexion du chemin est définie ici. Donc, de cette façon, j'ai besoin d'inclure le module utilisateurs dans mon application. Donc, si vous vous souvenez, nous avons également inclus le module de l'utilisateur, dans le module de routage de l'application ou dans le module d'application de l'application d'administration pour être défini pour toutes les routes qui sont incluses dans cette bibliothèque, comme vous le voyez ici. Nous devons donc faire la même chose aussi pour l'atelier de moteurs. Donc, je vais aller à la fin de votre application shop, puis dire dans le module de l'application, importer pour moi le module de l'utilisateur. Donc de cette façon, je vais l'utiliser ici. Et puis j'utiliserais la possibilité de Auto Import Tout vous pouvez l'utiliser ou importé par vous-même manuellement. Donc, en appuyant sur le point de contrôle ou l'espace de contrôle, vous serez en mesure de voir la méthode d'importation automatique. Donc, de cette façon, nous verrons que le module a été importé. Ok, Sauvegardons maintenant et notre application sera rechargée et je vais essayer de cliquer sur la page de paiement à nouveau ou sur le bouton de paiement. Je clique. Comme vous le voyez ici, nous sommes passés à la page de connexion de la boutique I-N-G. Donc, le logo est exactement le même style que nous avons créé auparavant avec le fond gris et aussi, par exemple, l'image et aussi le texte. Donc, il utilise le même composant que nous avons utilisé précédemment dans la page d'administration. Mais comme vous le voyez, tout est gardé ici. Par exemple, l'en-tête et aussi le pied de page, donc seulement dans le conteneur. Donc maintenant, si je regarde en tant qu'utilisateur, tant qu'utilisateur qui est inscrit dans leur base de données, alors je pourrai voir la page de paiement. Sinon, je ne peux pas voir ou je ne peux pas vérifier seulement si je peux ou si je regarde dans leur magasin. Donc, je vais essayer de me connecter. Donc, je vais mettre ici mon e-mail que j'ai. Donc, je vais mettre ici l'e-mail et ensuite j'ai le mot de passe. Comme vous le voyez ici, je suis redirigé vers la page d'accueil. Maintenant, je vais revenir à la page de départ et je verrai bien, que je peux accéder à la page de paiement. Donc, dans les prochaines conférences, je vais remplir mes données automatiquement. Vous savez que j'ai, mon utilisateur a déjà des données dans la base de données. Donc de cette façon, si je n'ai pas cela au début, je peux placer ou remplir le formulaire, passer la commande, et mes données seront enregistrées dans la base de données. Mais comment je vais charger les données de l'utilisateur, ce que nous allons voir dans la prochaine conférence, nous allons utiliser NGINX pour enregistrer toutes les données de l'utilisateur dans un magasin où nous pouvons être utilisés partout dans l'application. Donc, par exemple, ici dans les produits, comme vous le voyez, je ne peux pas voir un produit, mais je ne peux pas faire un commentaire seulement si je suis verrouillé. Donc parce que ici, nous allons ajouter une section de révision qui n'apparaîtra pas seulement si l'utilisateur est connecté. Comment je peux savoir que l'utilisateur est connecté l'application que nous utiliserions pour ce MDR x avec le courant, nous utilisons les observables comme vous le voyez avant. Mais maintenant, nous allons utiliser le MDR pour faire une gestion de l'état de l'utilisateur ou de la session utilisateur dans leur boutique. 169. Qu': Ok, dans cette conférence, nous allons savoir ce qu'est MGR x, y. nous avons besoin de NGINX. Donc, NDR x en général est une gestion de scène. Ok, tu ne m'as pas compris, mais je vais l'expliquer d'une manière pratique pour toi. De nombreux cours couvrent et DRX comme une bibliothèque et il peut être utilisé pour la gestion de scène. Mais qu'est-ce que la gestion de l'État ? Si vous vous souvenez avant de créer Ajouter au panier. Donc, quand j'ajoute quelque chose à leur panier, je vois que le nombre ici augmente. Donc, c'est comme si j'avais une variable publique que toutes les applications ont accès à cette variable. Il peut être augmenté de n'importe où ou à partir de n'importe quel composant. Donc, quand je vais ici ou quand je vais par exemple à la page du produit, je clique sur Ajouter au panier. Je vais voir que ce nombre augmente directement à partir de n'importe quel composant qui utilise ces, par exemple, que l'état. Donc, de cette façon, nous avons fait cela, nous utilisons des observables, mais maintenant nous allons l'utiliser en utilisant NGINX. Donc, NGINX est en fait un magasin qui contient les variables publiques qui sont utilisées parmi l'application. Donc, pour moi, j'ai une variable qui est publique. Je peux y accéder depuis n'importe quel composant. Et c'est exactement l'objectif de x. bien sûr, il a aussi plus de capacités, comme nous le verrons plus tard, comme avoir des effets ou est de récupérer des données de la base de données, etc. Donc, l'utilisation est pour les variables publiques qui peuvent avoir r peut soit accessible à partir de n'importe quel composant. Donc, en tant que structuré ici, j'ai un magasin de variables. Donc magasin ou variable a, par exemple, l'accès à quelque chose appelé effets de réducteur et le service de repos et composant intelligent. Nous avons donc, par exemple, notre composant intelligent, qui sera dans notre cas comme celui-ci. J' ai donc ici notre composant intelligent, qui sera le produit lui-même. Je clique sur un bouton, puis je fais une action. Donc, cette action me donne la possibilité d'accéder à cette variable dans le panier. Ainsi, le composant intelligent de cette façon ou tout composant dans Angular, observe ou s'abonne à ce magasin des variables et lit des données à partir de celui-ci. Bien sûr, cela aussi là, par exemple, le composant intelligent peut créer une action. Donc, il faut une action pour changer une variable dans leur magasin. Donc, par exemple, j'ai une action qui est comme Ajouter au panier. Et ce Ajouter au panier va chercher une action est appelée Ajouter au panier pour changer la valeur de la variable de de carte ou de nombre de panier combien de produits dans le panier à augmenter dans le magasin. Donc, en augmentant que dans le magasin utilise quelque chose d'un réducteur. Ainsi, le réducteur est utilisé pour filtrer les données ou mettre à jour l'état de cette variable. Il se déplacera, par exemple, comme nous l'avons vu ici, de trois à quatre lorsque je clique sur Ajouter au panier. Ainsi, l'application ou toute variable peut être vue à partir de tous les composants. Donc, je n'ai pas, par exemple, comment dire que nous ne pouvons pas avoir de variables privées pour chaque composant. Donc, de cette façon, beaucoup de gens se demandent comment je peux définir une variable publique qui peut être accédé à nos données de transfert d'un composant à un composant. C' est la façon dont nous NDR x ou en utilisant les observables epsilon comme nous l'avons vu auparavant. Donc maintenant, comme vous le voyez ici dans la documentation NGINX, il dit que c'est un cadre pour gérer l'état global et local. Je vais vous montrer aussi un exemple d'utilisation de MDR x dans quelque chose comme une donnée en temps réel. Donc, je veux, par exemple, j'ai une application de trading. Et dans cette application de trading, j'ai plusieurs composants et les prix sont changés très rapidement en fonction de WebSocket. Donc, par exemple, ce site, il s'appelle hetero. Je ne sais pas si tu le sais. Et il est d'observer les prix de tous les actions similaires, par exemple l'huile ou par exemple, que Bitcoin ici comme vous voyez le Bitcoin, par exemple, ce composant est augmenté ou diminué en fonction d'une connexion WebSocket. Et l'état de ce composant est mis à jour, toujours comme les numéros ici sont mis à jour. Comment cela se passe, comment ça se met à jour, l'heure. C' est ce qu'on appelle un état. Donc, l'état de ce composant, qui est appelé Bitcoin, et ce nombre est mis à jour toujours basé sur données WebSocket qui viennent en temps réel à partir de la base de données ou à partir d'un serveur spécifique. Mais les autres composants ne sont pas mis à jour car il n'y a aucune action d'état est mentionnée ou va à ces composants. Donc seulement ce composant. Donc, je dois supposer que j'ai, par exemple, une variable qui s'appelle Bitcoin dans le magasin d'état. Et cette variable est seulement mise à jour, mais les autres comme l'or ou l'Euro-USD ne sont pas mis à jour. Donc, la même chose qu'on fait ici. Nous n'avons utilisé qu'une seule variable dans notre magasin d'état, donc nous n'avons utilisé que le panier. Donc, comme vous le voyez, il y en a plusieurs. Donc, ici, nous avons seulement la variable de garde, sorte que l'on peut accéder à partir de tous les composants de l'application. Donc, c'est l'idée principale de MGR x en général, nous allons voir en détail comment nous allons mettre en œuvre et le r x pour observer la session utilisateur. Donc, de cette façon, quand je vais vérifier, j'ai stocké une variable, variable publique, qui est appelée utilisateur authentifié. Donc, cet utilisateur, quand il a des données, alors il va remplir ces données ici. Et aussi, par exemple, je vais l'utiliser comme vous le voyez plus tard, que nous aurons ici quelques commentaires et commentaires. Donc, l'utilisateur, s'il est verrouillé ou si cette variable est définie dans le magasin d'état, alors nous allons avoir ici quelque chose comme un champ de revue et de commentaire. Ainsi, l'utilisateur pourra voir que s'il n'est pas connecté, vous ne verrez que cette page. S' il n'est pas enfermé. 170. Faisons de créer NGRX State Store dans la bibliothèque de utilisateurs: En passant par la documentation des oeufs NDR, si vous allez directement à quelque chose appelé architecture ou commencer dans NDR x point au site Web. Ensuite, vous verrez ce diagramme. Et dans ce diagramme, il vous explique plus ce que j'ai déjà parlé. Donc, comme vous le voyez ici, nous avons un composant est toujours faire une action. Et puis cette action peut être, il utilisera des données pour obtenir des données de la base de données ou non. C' est pour ça qu'il est parsemé. Donc, cette action va utiliser le réducteur pour changer un état ou une variable dans le magasin d'état ou dans le magasin lui-même. Donc, ici, nous avons quelque chose appelé sélecteur. C' est comme, par exemple, j'ai ici 20 variables et je veux que mon composant sélectionne une seule variable ou s'y abonne pour observer toujours l'état de cette valeur dans la porte des États. Donc, de cette façon, tous les autres composants, comme si j'ai ici un autre composant, nous verrons aussi les changements de cette variable dans ce point d'état. Donc, l'utilisation du sélecteur est aussi quelque chose que nous allons voir maintenant en action. Donc, si vous imaginez avec moi que dans l'architecture de MDR x il y a quelque chose appelé réducteurs d'actions, sélecteurs, Quels sont-ils ? Ce sont des fichiers et tous ces fichiers, ce sont des classes. Et ils contiennent quelques fonctions pour atteindre ce diagramme. Donc, pour voir comment créer ces fichiers, peu pratique, je vais vous montrer un moyen avec NX ici dans la console NX. Si vous vous en souvenez, nous créions des composants. Nous créions plusieurs employés à l'aide de cette console. Et cela nous a aidé à générer aussi quelques chaudières de n DRX. Donc, quand je clique sur Générer ici, j'aurai une liste. Et dans cette liste, je vais voir que j'aurai un roman angulaire et DRX. Donc, de cette façon, nous allons générer les fichiers qui sont nécessaires pour Angie RX ou le magasin d'état utilisant cette console. Donc, quand je clique dessus, il me demande de définir un nom pour cette fonctionnalité. Donc, si vous vous souvenez, notre application est divisée deux fonctionnalités ou bibliothèques. Nous avons des commandes, des produits, l'interface utilisateur et aussi des utilisateurs. Nous devons donc avoir l'état de l'utilisateur ou la session utilisateur dans notre application. Ainsi, tous les composants de l'application ou de la boutique peuvent accéder à cette variable pour récupérer données de l' utilisateur partout dans l'application et observer les changements si l'utilisateur est authentifié, verrouillé ou non. De cette façon, j'affiche des informations sur l'application ou non dans ces composants. Donc, tout d'abord, c'est demander un nom. Donc, ce nom est toujours le même nom de l'entité. Donc, par exemple, ici, j'ai des utilisateurs. Tout ce que vous pouvez définir n'importe quel nom, mais ici dans ce cas, j'appellerai aussi les utilisateurs et aussi le module. Le module ici, vous devez spécifier le chemin exactement comment il est ici. Donc, tout d'abord, vous devez dire des lèvres. Et après la vie, nous avons SRC slash SRC. Et puis nous allons mettre lib, et ensuite nous allons spécifier le module. Qu' est-ce qu'un module comme nous l'avons vu ici, son module utilisateurs. Donc ici, ce fichier va être changé en fonction de la génération similaire du magasin d'état car il va ajouter des bibliothèques et des importations où il utilise le magasin d'état. Donc, ici, nous devons définir le fichier, je dirai le module users.js qui a exactement le même nom du fichier ici. Ok, quel est le dictionnaire ou le répertoire qui sera défini ? Normalement, ils le nomment comme ça. Ça s'appelle l'état. Mais par exemple, pour nous, nous pouvons supprimer ce plus et le définir de cette façon. En outre, comme vous le voyez, le commentaire est exécuté et il vous dit quelles erreurs peuvent peut-être arriver. Donc, par exemple, ici, il est un passé n'existe pas. J' ai fait ici erreur, surtout pour vous montrer quand vous obtenez un type d'erreur, vous devez voir quel est le problème. Donc, comme vous le voyez ici, j'ai ici manquant S. Donc ce sera après l'ajout le S devrait être bien. Ok, on a toujours l'erreur. Pass n'existe pas y. vérifions pourquoi. Donc, par exemple, nous avons ici les lèvres, comme vous le voyez, nous avons défini à partir des lèvres supérieures, puis nous avons oublié le nom de la bibliothèque. Donc, je dois mettre les lèvres, les utilisateurs et puis SRC, puis lib, puis les utilisateurs. Donc après ça, ça devrait aller. Donc, comme vous le voyez, ça vous montre ce que ça va arriver. Ça ne s'est pas encore produit. Il a créé un fichier qui se trouve dans ce chemin. Il s'appelle effet, exactement comme je vous l'ai dit, modèle et aussi réducteur utilisateur, puis sélecteur et aussi une certaine mise à jour sur le module de l'utilisateur et index.js. Donc, de cette façon, j'ai aussi plusieurs options où je peux également définir, un comportement spécifique de ce magasin d'état. Donc, par exemple, je peux générer FSH. C' est pour Sayed. Il est utilisé pour utiliser certaines fonctions où je peux accéder au magasin d'état et rendre mon code plus organisé et plus beau quand je veux quelque chose du magasin d'état comme nous le verrons plus tard. Alors vérifiez cela aussi. Cela nous aidera aussi bien que nous voyons ici qu'il génère des modèles. Et si vous vous en souvenez, nous avons déjà des modèles définis dans notre application. Donc pas besoin de créer en tant que modèle. Donc, nous allons supprimer celui-ci après que le décrochage d'état soit créé. Donc, maintenant, nous sommes prêts à exécuter cette commande. De cette façon, nous serons en mesure d'utiliser le magasin d'état. Donc, nommez le module qui passe à travers le module, le bon, le nom du répertoire. Et voici quelques options. Vous pouvez les utiliser ou vous pouvez creuser à leur sujet. Par exemple, ici vous verrez que ces barils vont créer pour vous l'importation ou l'exportation des composants afin que vous puissiez les importer à la fois. Mais je veux vous montrer l'état pur que ce qui est vraiment nécessaire, par exemple, ici pour tester et aussi la somme minimale répliquée. Plus de commentaires sont ici. Donc vous n'avez pas besoin de les utiliser. Configuration de l'itinéraire, itinéraire pour la gestion de l'état des fonctionnalités avec MDR x. Vous n'avez pas besoin de le faire car nous allons le faire manuellement. C' est plus sûr pour garder notre application dans la bonne voie. Donc, ici, il y a beaucoup d'informations comme par exemple, sauter un JSON. Nous allons ajouter les dépendances NDR x à installer et la bibliothèque DRX à nos modules de noeud. Donc, de cette façon, vous pouvez l'ignorer si vous l'avez déjà installé. Mais si vous ne l'avez pas installé, ne vérifiez pas celui-ci. Et aussi la science TX et RX vous pouvez définir, comme vous pouvez le voir dans la documentation ou comme nous le verrons plus tard, deux styles de création de la NDR à côté. Des lunettes et des créateurs. Par exemple, ici, je vais vous montrer l'action. Je vais créer de l'action. Et cette action peut être créée de cette manière. Donc quelque chose comme la connexion constante créer une action, et cette action a quelques propriétés. Il y a aussi une autre façon de créer des classes, mais je préfère la façon des créateurs. C' est mieux et cela va vous donner une plus dynamique sur les typages pour le TypeScript. Donc, avant de terminer cette vidéo, s'il vous plaît vérifier ce que vous avez ici à avoir exactement comme je l'ai. Et puis cliquez sur Exécuter, puis vous verrez l'état du fichier ou l'état supplémentaire obtenu ici avec les fichiers de test ainsi. De cette façon, nous verrons dans les prochaines conférences, quelles sont les actions FX pour saids, et cetera, qui nous aidera à créer notre magasin d'état de la session de l'utilisateur dans notre boutique. 171. Processus de session utilisateur de diagrammes: Très bien, au début, je voudrais expliquer comme un diagramme comment le processus sera quand nous allons obtenir l'utilisateur ou construire la session utilisateur. Donc, comme un rappel, l'objectif principal que je veux, chaque composant de mon application comme le détail du produit, composant de pompe, et aussi vérifier le composant de page. Obtenez des données du magasin qui sont partagées entre toutes les applications. Donc, par exemple, j'ai défini ici deux variables. L' un est l'utilisateur. Il contiendra les données utilisateur de l'utilisateur connecté en cours. Et aussi il tiendra aussi bien, est authentifié, c'est comme, par exemple, c'est une variable booléenne. Il peut être vrai ou faux, ce qui veut dire que, ok, Maintenant, la boutique ou le site Web a authentifié l'utilisateur ou non. Et sur la base de cela, Comme je vous l'ai dit, nous pouvons montrer, par exemple, certaines parties de l'application comme l'évaluation du produit et ainsi les données de l'utilisateur. Il m'aidera à faire un composant de page de paiement et aussi saisir les données de l'utilisateur connecté actuel à mon chèque pour. Alors comment ce sera le processus, le processus en fait que nous devons agir, pour faire une action comme vous vous en souvenez. Donc, un composant déclenche une action, puis il se déclenchera pour nous de récupérer des données de la base de données de l'utilisateur en fonction du jeton et de la façon dont nous avons parlé auparavant. J' irai donc avec le processus facile d'abord. Par exemple, nous avons ici une page de connexion, et quand je clique sur Login, je crée un jeton qui vient de la base de données ou du serveur. Et puis je vais demander au magasin d'état de se déclencher pour moi et l'action, qui s'appelle Construire la session utilisateur. Bien sûr, c'est après une connexion réussie. Donc, de cette façon, après avoir construit la session utilisateur, je dirais au magasin, ok, l' utilisateur est des données utilisateur, que je reçois de la base de données et est également authentifié, est vrai parce que j'ai réussi la connexion . Donc, la connexion elle-même a déclenché les données ou déclenché cette action et changer les données dans leurs états. Chien les deux variables que j'ai, qui sont utilisateur et aussi il authentifié. Aussi une autre action peut, par exemple, ou un autre composant ou un autre événement peut changer pour moi, le magasin d'état, ok, l'utilisateur est déjà connecté. Il est revenu, par exemple, après deux heures, il a de nouveau ouvert la demande. Maintenant, comme vous vous en souvenez, nous lisons ce jeton depuis le stockage local pour voir si cet utilisateur est authentifié ou non. Donc, de cette façon, je vais juger si c'est comme un jeton valide, alors nous construisons une nouvelle session utilisateur, ok, disons à l'effet et aussi le réducteur, comme nous le verrons plus tard en détail, pour définir qui est authentifié à true et également obtenir les données de l'utilisateur à partir de la base de données et les transmettre à la variable utilisateur dans le document States. Si non, ce qui est possible, comme alors nous avons, par exemple, le jeton n'est pas valide, alors je dirai, ok, dans cette session utilisateur à session, ou par exemple, réinitialiser la session de l'utilisateur. Donc, la réinitialisation d'une session utilisateur est à définir, est authentifiée aux chutes et les données utilisateur seront nulles dans le magasin. Et qui regarde ce qui se passe dans le magasin. Ces composants. Donc, pas seulement la page de paiement ou le détail du produit, peut-être un autre composant aussi bien dans mon application. C' est donc l'idée principale de NGINX ou de la gestion des états. Bien sûr, il y a beaucoup d'usages. Vous pouvez également conserver tous vos magasins d'état de données. Mais je spécifie ici un cas où il est vraiment nécessaire du MDR x. Donc, de cette façon, vous apprenez à construire une action, comment la déclencher, puis créer un effet et un réducteur pour changer l'état de la dans le magasin d'état. Et puis nous verrons comment nous pouvons lire toutes ces variables dans les composants dont j'ai besoin pour construire mon application pour montrer ou cacher des choses. Je vous invite à jeter un oeil à ce diagramme. Encore une fois. Nous le gardons dans votre cerveau. Il nous aidera dans les prochaines conférences pour construire notre magasin d'état concernant l'utilisateur et l'authentification. 172. Service de session utilisateur d'init: Maintenant, continuons à créer notre logique, logique pour l'initialisation de la session utilisateur. Nous allons faire cette logique ici. Donc, à partir du chargement de l'application, je vais lire un geste de jeton si c'est valide. Et puis je ferai avec une action appropriée pour définir certaines variables dans le magasin d'état. Donc, tout d'abord, nous avons besoin d'un service qui est appelé service utilisateur init. Alors comment on peut appeler ce service ? Nous ne pouvons pas appeler le service réellement dans notre initialisation de l'application. Donc, en revenant à la fin, vous magasinez le point d'entrée de l'application dans est dans le composant de l'application. Donc, nous pouvons entendre, avoir dans l'initialisation de l'application, nous pouvons appeler un service dans la session d'application informatique. Donc, pour cela, je vais appeler le service utilisateur. Donc, nous avons ici dans le constructeur comme toujours, comment nous appelons des services dans les composants. Donc, je vais dire ici un service privé et puis je dirai utilisateurs. Le service utilisateur proviendra du service des utilisateurs, que nous avons défini dans la bibliothèque de l'utilisateur. Ensuite, à l'intérieur de ce constructeur, nous allons initialiser, par exemple, la session d'application. Mais vous pouvez aussi bien faire sur, en elle. Donc, vous pouvez avoir ici comme sur l'initialisation du composant d'application, comme notre application va appeler le service qui est appelé session d'application init. Donc, nous allons avoir ici dedans, implémente dessus. Donc, de cette façon, nous devons appeler quelque chose appelé NG sur la fonction init. Et cette fonction sera exécutée lorsque nous allons appeler l'application ou quand nous commencerons notre fin vous magasinez. Donc, de cette façon, je vais dire ce service utilisateur point, et puis je vais appeler le service que je veux. Donc, allons au service utilisateur en cliquant sur le contrôle et le clic de la souris, il vous emmènera directement au service utilisateur. Et dans le service utilisateur, si vous vous souvenez, nous avions de nombreux services que nous avons créés pour nos utilisateurs, créer, éditer et ajouter. Donc, à la fin ici, nous pouvons avoir comme un service, nous l'appelons n'importe quelle session d'application. Et dans cette session d'application init, nous allons appeler quelque chose ou une action qui viendra du magasin d'état. Donc de cette façon, nous allons commencer notre initialisation de la session dans le stock de l'état. Voyons si tout fonctionne bien. Donc je vais sauver celui-là. Donc nous devons aussi l'appeler ici. Donc après qu'on l'ait dedans, obsession, ok, on l'a appelé. Et puis on économise, et on sauve celui-là. Et notre application fonctionne sans aucune erreur. Alors vérifions le navigateur. Ok, nous avons un problème que nous avons module d'application, module fonctionnalité de magasin, mais réduire son gestionnaire, réducteur gestionnaire, réduire et gestionnaire. Cela se produit parce que nous créons un magasin d'état dans une bibliothèque. Donc, ici les utilisateurs est une bibliothèque, mais l'application ne sait rien sur ce magasin d'état. Donc, pour initialiser le magasin d'état en général, nous devons créer ou appeler certaines méthodes dans le module d'application. Donc, dans l'application et vous magasinez ou dans l'application que vous allez créer, vous devez initier le magasin d'état en quelque sorte comment l'initialisation peut être. On doit appeler deux modules. Donc, ces deux modules seront d'abord un module de magasin. C' est la porte où elle va initialiser mon magasin. Donc, stocker le module, vous devez être sûr qu'il est importé à partir de la bibliothèque MDR x. Et puis vous appuyez sur point et vous avez quatre racines. Et cette quatre racine, il appellera un objet vide. Donc, ici, nous initialisons notre magasin avec un objet vide aussi. Nous allons utiliser les effets, les effets. Nous saurons à quoi ils sont utilisés plus tard. Donc, nous avons ici affecte le module. Donc, et puis nous pouvons appeler à nouveau pour root et nous l'initialisons avec un objet vide ou non, nous l'initialisons avec un tableau vide. Ainsi, nous pouvons être en mesure d'initialiser notre magasin. Et sauvegardons et voyons si l'erreur a disparu. Ok, maintenant notre application sait qu'il y a un magasin d'état. Donc, de cette façon, je suis capable de commencer à travailler avec mon magasin d'état dans la bibliothèque de l'utilisateur. 173. Créer des actions de session utilisateur de Build: Ok, Notre magasin d'état a initialisé le module de magasin affecte le module au niveau de l'application. Voyons ce qui s'est passé dans le module de l'utilisateur parce que si vous vous souvenez, nous avons dit qu'il a été mis à jour. Donc, ici, il dit que aussi il appelle le module lui-même. La bibliothèque, comme le module de bibliothèque de l'utilisateur, appelle le magasin d'état. Mais pour la fonctionnalité, parce que les utilisateurs est en vedette dans l'application. Donc, de cette façon, je n'appelle pas pour la route, mais j'enregistre une fonctionnalité. Donc, cela de l'utilisateur, les utilisateurs disposent D. Donc, vous avez besoin pour la fonctionnalité deux paramètres, un, ce nom de la fonctionnalité, puis aussi le réducteur. Réducteur, qui va être utilisé dans le magasin d'état pour changer les états et changer les variables à l'intérieur de l'état stocké. Donc ici, nous avons besoin d'un nom et aussi du réducteur. Réducteur proviennent de la lime des réducteurs. Donc, si vous allez ici aux usagers de la route, vous verrez que nous avons initialisé quelque chose avec les réducteurs. Ok, on va travailler avec ça. Nous allons supprimer du code qui est initialisé automatiquement par le plug-in d'une console ECS. Mais tout d'abord, créons une action. D' accord ? L'action va vérifier ou construire la session utilisateur en fonction d'un jeton. Et ce jeton sera géré s'il est valide ou non dans les effets. Et dans le réducteur, je vais changer les variables basées sur cela. Voyons donc comment cet exemple ou cette initialisation de l'intestin de porte des états appelant l'action. Donc, si vous allez aux utilisateurs pour l'analyser en disant ici comme c'est, bien sûr, c'est un service. Donc, comme vous le voyez ici, ses utilisateurs pour analyse. Et cet utilisateur testé contient quelques variables, Voyons plus tard. Et aussi constructeur qui a un magasin, puis dedans, et dans cette init, il dit que ce point stocke l'action de cet utilisateur de badge dedans. Donc, il y a une action dans les actions de l'utilisateur, qui est appelé fin. Allons à l'action de l'utilisateur, d'accord ? Dans les actions de l'utilisateur, il y a des actions sont initialisées avec notre création de ce magasin d'état. Nous pouvons donc créer nos propres actions. Alors mettons un peu d'espace ici. Bien sûr, nous allons supprimer ces choses plus tard, mais nous allons créer notre action. Donc, tout d'abord, j'ai besoin de créer l'action qui s'appelle Construire la session utilisateur. Donc, vous initialiseriez constante et cela sera appelé session utilisateur de construction. Et de cette façon, j'aurai une méthode d'action de création qui est appelée à partir du magasin d'état. Donc ici, comme vous le voyez ici, action de création est importée à partir de la bibliothèque stockée et de GR x. Donc, de cette façon, vous devez donner un nom pour cette action. Donc, le nom est normalement appelé de cette façon, vous définissez le nom de la fonctionnalité, vous pouvez dire utilisateurs, puis vous pouvez définir ce que cette action fait. Dans notre cas, il s'appelle Build session utilisateur. C' est ainsi que nous avons créé notre première action. Bien sûr, il y a plus d'actions qui viendront plus tard, comme en cas de succès ou d'échec, comme décocher le jeton, repoussé ou non. Donc c'est ce que nous allons faire plus tard. Alors maintenant, Ok, je vais retourner à ma carte d'identité de l'ASL. Allons nettoyer quelque chose ici. Alors enlevons tout ça. Nous n'avons pas besoin de les initialiser. Et aussi, nous pouvons supprimer ce commentaire ici, et nous pouvons dire construire la méthode de session utilisateur. Donc, ici, nous avons construire une session utilisateur aussi. Et il va envoyer pour moi une action de l'action que nous avons créée auparavant, qui s'appelle Construire une session utilisateur. De cette façon, j'envoie l'action. Donc, nous devons appeler ça d'une manière ou d'une autre, où nous allons l'appeler. Nous allons l'appeler dans le service que nous avons créé auparavant. Donc, de cette façon, je vais aller au service utilisateur. Et puis dans le constructeur, j'ai besoin d'appeler l'ID FSA, si vous vous souvenez. Donc ici, je vais dire les utilisateurs privés pour Sayed. Et puis nous appellerons les premiers secours de l'utilisateur du magasin d'état. Donc, je vais dire ici la facette des utilisateurs. Donc, de cette façon, il a été importé automatiquement et je peux l'utiliser et utiliser les méthodes à l'intérieur. C' est un service. C'est comme si on appelait un service à l'intérieur du service. Donc, je dirais ici, ces utilisateurs de points pour testé. Et puis je vais construire une session utilisateur de cette façon, ce projet de loi, donc la session utilisateur, il distribuera une action pour moi qui s'appelle Construire la session utilisateur. Et sur cette base, l'action enverra une notification à l'effet de faire quelque chose, comme nous le verrons dans la prochaine conférence. Sauvons maintenant tout pour voir si tout fonctionne toujours bien. Nous n'avons pas d'erreurs. Donc, nous retournons à notre navigateur. Ok, on n'a pas d'erreur. L' application fonctionne toujours bien. 174. Créer l'état de l'utilisateur: Ok, faisons maintenant le magasin, le magasin des utilisateurs. Donc dans le magasin, j'aurai deux champs. L' un est un utilisateur qui contiendra pour moi les données utilisateur telles que nom, adresse, e-mail , etc., et aussi si authentifié, si l'utilisateur est authentifié ou non. Alors maintenant, nous allons créer cet état. Que les états sont créés dans les réducteurs. Donc, en ce que l'utilisateur, nous aurons une classe ou une interface qui aura les champs ou les variables que j'ai besoin d'utiliser dans mon magasin, comme l'utilisateur, et est authentifiée de cette façon ici, comme vous le voyez, il y a quelques initialisation déjà effectuée. Nous ne l'utiliserons pas. Je vais l'expliquer et créé devant vous étape par étape pour ne pas avoir un problème ou un malentendu. Donc, tout d'abord, nous pouvons garder toutes ces importations. Nous allons supprimer ce dont nous n'aurons pas besoin dans les prochaines conférences ou dans ce refactoring. Donc d'abord, je dois créer un état. Pour créer un état, nous devons avoir Export, puis nous définissons l'interface. Comme vous le voyez ici, il a déjà créé la propriété, mais je vais lui donner un nom, l'état de l' utilisateur, qui est meilleur nom et plus clair de ne pas avoir de noms dupliqués dates entre la bibliothèque. Si vous voulez avoir un autre magasin d'état dans une autre bibliothèque. Donc, vous n'avez pas aussi besoin d'avoir ici entité, état ou entité utilisateurs. Nous en parlerons plus tard dans des sujets plus avancés. J' ai donc besoin de créer une interface pure qui est appelée état de l'utilisateur. Et cet état utilisateur aura deux champs. L' un est appelé utilisateur. Il aura un type, il s'appelle utilisateur. Le modèle utilisateur, que nous avons créé à partir de l'utilisateur dans le modèle qui contiendra email, mot de passe, etc Donc toutes ces informations, ils seront dans ce champ. Et aussi, nous allons créer une variable qui est appelée est notre authentifiée. Ainsi, nous pouvons savoir si l'utilisateur est authentifié ou non. Donc, il aura un type booléen. Ok, Donc pour cela, nous pouvons supprimer cet original qui est créé par la console NX. Et maintenant, il y a l'interface qui est appelé l'état partiel des utilisateurs. Donc, nous avons juste besoin de remplacer les utilisateurs état partiel. Normalement, nous n'en avons pas besoin pour l'instant, mais nous en aurons besoin aussi dans un sujet plus avancé. Mais nous allons avoir le type de cette clé de fonctionnalité utilisateurs, qui est appelé utilisateurs. Et puis il aura un type d'état utilisateur. Ok, cet adaptateur dont on n'a pas besoin. Maintenant, après cela, nous avons besoin d'avoir un état initial. Donc, l'état ou l'état de début de mon application, normalement l'utilisateur est nul au début et aussi il authentifié est faux. Nous avons donc besoin d'un état initial aussi. Donc, je vais appeler ici la constante d'exportation aussi. Il sera appelé état initial. Donc, je vais avoir ici l'état initial des utilisateurs pour avoir des noms plus pratiques. Et puis dans cet état utilisateur initial, il aura un type d'état utilisateur, et il sera égal à un objet. Donc, cet objet aura un utilisateur vide comme null au début comme nous l'avons dit, et est authentifié sera faux au début. Donc, nous avons un état initial comme ça. Donc de cette façon, nous avons créé notre état. Alors maintenant, nous allons créer le réducteur, comment il va sentir l'action. Donc, je vais dire quand une action s'est produite comme l'état de session Build, je vais appeler quelque chose. S' il n'y a rien, alors il ne fera rien ou aucun changement sur leur magasin d'état. Donc je vais d'abord supprimer tout ça comme si nous avions déjà l'état initial. Alors maintenant, nous créons un réducteur. Il serait appelé aussi bien les utilisateurs réducteur. Ce sera le même nom du magasin d'état, comme toujours les utilisateurs, les utilisateurs, c'est pluriel. Donc maintenant, nous créons une réduction, il crée méthode de réducteur viennent de la porte DRX états. Donc, ici, nous avons créer réducteur et il nous demandera état initial. Quel est notre état initial ? C' est celle-là ? État de l'utilisateur initial ? Et quel est l'autre ou quels sont les autres paramètres ? D' autres paramètres seront, par exemple, les types de réducteurs. Donc, nous allons avoir plus de code organisé. Nous pouvons mettre cela et aussi bien le mettre ici et nous allons mettre une virgule, notre premier ou le deuxième paramètre sera activé. Ceci est également importé à partir des réducteurs ou de MDR x. Donc, comme vous le voyez ici, nous avons ici sur est importé. Alors. Ensuite, je vais dire quelle action sur l'action, qui est à partir des actions de l'utilisateur. Comme vous le voyez ici, il est importé étoile comme l'action des utilisateurs, comme importer tout de l'action des utilisateurs, puis vous pouvez les utiliser. Donc, nous avons ici aussi charger l'accès des utilisateurs, ou nous avons ici construire session utilisateur. Et ceci sur la méthode, il aura deux paramètres. La première est, par exemple, l'action elle-même, comme l'action qui va se passer. Donc, je vais avoir ici la construction de point d'action de l'utilisateur, la session utilisateur. Ok, qu'est-ce qui va se passer ? Donc, voici le deuxième paramètre, nous allons changer l'état. Donc, j'aurai aussi une fonction de rappel qui aura comme état de paramètre. Et ça fera des trucs pour moi ou changera l'état lui-même. Pour l'instant. Nous ne pouvons faire que comme un changement sur l'état, comme copier tel quel. Nous n'allons pas mettre à jour l'état. Donc, j'ai ici aussi un autre parenthèses. Donc je vais dire ici, juste copier l'état, alors ne fais rien, juste le cloner. Ainsi, notre état n'a pas changé, rien ne lui est arrivé. Ok, De cette façon, nous savons que notre réducteur va exécuter quelque chose basé sur cette action et changer cet état. Nous ferons plus de changements lors de la prochaine conférence lorsque nous allons travailler avec l'effet. Mais d'abord, supprimons ce code qui n'est pas nécessaire parce que nous l'avons déjà créé. Donc maintenant, nous avons ici le réducteur de fonction, qui est exporté et utilisé dans le module de l'utilisateur, si vous vous souvenez. Donc, nous avons ici l'état, il sera de l'état de l'utilisateur type et, ou indéfini et l'action. Et ici, le réducteur de l'utilisateur a été créé et il est importé et utilisé ici. Donc, de cette façon, notre magasin d'état est prêt à partir d'état un point de vue. Donc, de cette façon, je peux appeler toutes les actions dont j'ai besoin et changer l'état en fonction de cela. Nous avons encore quelques erreurs dans la console. Vous pouvez les ignorer pour l'instant parce qu'ils sont dans les sélecteurs et nous allons les corriger dans les prochaines conférences. 175. Créer des actions efficaces si vous créez de tels créez valides ou pas: Après avoir la compréhension des actions et aussi réducteur et le magasin d'état, je vais faire une mise à jour de notre diagramme. Donc, si vous vous souvenez, nous avons créé une action qui est appelée session utilisateur de ceinture. Donc, de cette façon, nous aurons deux options basées sur le jeton. Donc, le jeton, s'il est valide, il dira que, ok, construire la session d'action de l'utilisateur est un succès. Et aussi, sinon, il échouera et il changera là. Ou il ordonnera au réducteur de faire quelque chose au magasin d'état, comme le paramètre est authentifié à false et l'utilisateur à null. Et dans le sens inverse, cela arrivera lorsque le jeton est valide. Ainsi, la session utilisateur de construction d'action se déclenchera. Cet effet validera ce jeton qui est stocké dans notre stockage local pour obtenir les données de l'utilisateur à partir de la base de données s'il est valide à définir avec les données utilisateur. Sinon, nous allons le définir sur null au cas où il y aurait une erreur dans l'API ou dans le cas où il y a un jeton non valide. Donc, de cette façon, nous allons créer deux actions qui décideront que la session utilisateur se construit avec succès ou ce n'est pas le cas. Et l'effet va appeler ces actions basées sur la validation du jeton. D' abord, créons ces deux actions. Et j'aurai deux actions qui sont déjà en juillet. Donc, nous pouvons supprimer celui-ci qui est appelé init parce que nous avons construit session utilisateur. Et de la même façon que nous avons une grande action. Et aussi il aura un nom. Je peux donc remplacer tout ce texte ici. Nous pouvons dire que les utilisateurs construisent le succès de la session utilisateur, comme la façon dont nous avons ici. Et aussi, nous pouvons renommer celui-ci afin que nous puissions, au lieu de construire ou les utilisateurs autorisés, nous pouvons dire construire la réussite de la session utilisateur et aussi construire la session utilisateur a échoué. Donc nous pouvons avoir ici au lieu de l'échec. Donc de cette façon, nous pouvons avoir l'action, ok, quelles sont les propriétés de cette action ? Donc, les propriétés seront les données qui sont chargées. Nous aurons donc les données sont authentifiées par et les données utilisateur sont, par exemple, l'utilisateur lui-même, l'objet utilisateur. Donc, de cette façon, je suffirai de ne charger que les données de l'utilisateur. Donc, de cette façon, nous pouvons avoir ici des accessoires ou la propriété qui sera appelée utilisateur. Et le type de celui-ci sera modèle utilisateur, que nous avons créé auparavant. Donc, pas besoin d'utiliser toute cette entité utilisateur ici. Et aussi en cas d'échec, il aura aussi la même chose, comme il aura la même chaîne. Et aussi cela fera pour moi une action basée sur cela. Il va charger une erreur ou il peut charger, par exemple, comme un message que le jeton n'est pas valide ou quelque chose comme ça, nous serons assez pour créer l'action seulement sans accessoires juste pour le moment. Alors maintenant, je vais avoir 2, trois actions. Un, construire la session utilisateur, qui est celui-ci, il sera appelé et déclencher l'effet. Et l'effet sera de décider quelle est la bonne action à prendre lorsque son succès, lorsque le jeton est valide et que les données de l'utilisateur sont prêtes, ou si elle a échoué et que le réducteur se comportera de manière spécifique, garçon, en fonction de ces actions. Donc, ici, nous avons juste à ne pas oublier que nous avons ici la phrase ratée de ne pas avoir de confusions du nom ou de nommer leurs actions. Maintenant, nous pouvons ajouter plus de réducteurs. Donc, de cette façon, nous pouvons aller ici et dire que, d' accord, sur l'action de l'utilisateur Construire l'état de session, faire quelque chose. Vous pouvez aussi bien en faire un autre sur. Nous avons ici une autre virgule et nous disons sur l'action des utilisateurs similaires ainsi. Et nous pouvons choisir sur le succès. Ainsi, l'État sera, ou sera mis à jour en fonction de ce que nous tirons de cette action ou de cet effet. Donc, de cette façon, nous aurons cette date. Il sera mis à jour avec un clone de cette date. C' est très important, celui-là, et cette ligne est très importante. Comme si nous allons mettre à jour l'état, pas changer l'état entier. C' est ce qu'on appelle immuable. Vous devez suivre toutes les actions ou les changements de commande sur votre magasin d'état. Donc, comme je vous le montrerai dans les outils de développement plus tard, lorsque nous créons un outil de développement, verrons comment l'état change étape par étape à chaque appel des actions. Donc maintenant nous avons l'état et je vais mettre à jour maintenant mes données dans ce magasin d'état. Donc, lorsque vous définissez un objet de cette façon et que vous mettez une virgule ici, et que vous ajoutez les champs qui vont être mis à jour de cette façon, vous dites, ok, prenez le même état, mais mettez à jour seulement deux champs, qui sont vraiment ceux-ci, vous pouvez mettre à jour un seul champ, par exemple, utilisateur, puis vous mettez à jour l'utilisateur rempli avec les données utilisateur. Comment puis-je obtenir les données utilisateur qui sont transmises à cette réussite de session utilisateur de construction. Je veux dire, celui-là, cette propriété qui viendra de l'effet que je vous ai dit. Donc, de cette façon, vous pouvez également ajouter un paramètre ici qui est appelé action. Et cette action, elle aura les champs de cette action. Donc, nous avons ici dans ce cas utilisateur, sorte que l'utilisateur soit l'utilisateur de point d'action. Et parce que la session a obtenu des succès, nous pouvons mettre à jour également est authentifié pour être vrai. Donc, de cette façon, nous aurons deux champs mis à jour dans ce magasin d'état. Mais lorsque l'action a échoué ou la session utilisateur de construction a échoué, alors nous allons rendre l'utilisateur est nul et ethos indiqué est faux. Pour que nous puissions faire la même chose. Ou copions cette partie ici. Nous pouvons dire cela sur, nous mettons des virgules et nous changeons juste l'action. Donc, ici, nous aurons la session de l'utilisateur construit a échoué. Et aussi l'action de l'Etat tout de même. Nous devons juste mettre à jour l'utilisateur pour qu'il soit nul car il a échoué et qui est authentifié sera faux. Ainsi, nous avons créé les actions basées sur la validation du jeton et l'impact sur les réducteurs. Mais nous n'avons pas encore géré cette partie, comme cette partie qui est un jeton d'impact et valide. On n'a pas encore travaillé avec ça. Donc maintenant notre magasin d'état est mis à jour en fonction du comportement de ces actions. Dans la prochaine conférence, nous allons gérer l'effet où il sera décidé de prendre cette action ou cette action. 176. Créer un effet de session de session de construction: Création d'un effet. C' est un calme simple. Ça vient toujours avec l'action. Donc l'action va déclencher l'effet. Et l'effet décidera en fonction de ce qui est dû au succès ou au fait que la structure créée de MDR X nous a permis d'avoir des actions sont également nous permettre d'avoir des effets. Aussi les aides FES ainsi que les réducteurs et les sélecteurs. Nous avons parlé des réducteurs, aussi des actions et aussi nous avons parlé du passage, passons aux utilisateurs affecte points ds. Donc, dans l'effet ici, il utilise aussi quelque chose appelé Create effect. Créer effet est une fonction qui vient de la bibliothèque MDR x. Donc, à cause des changements que nous avons fait dans les actions ici, nous avons perdu l'init et les fonctions par défaut qui sont créées auparavant par la console NX. Alors faisons un nettoyage ici. Donc, comme nous l'avons fait avant, je vais commencer à partir de zéro. Nous avons ici l'effet des utilisateurs, qui est également utilisé dans le module des utilisateurs. Nous allons donc supprimer tout cela. Maintenant, nous allons créer un effet. Donc, la meilleure source pour avoir comment créer des effets est une documentation de n DRX. Donc, comme vous le voyez ici, nous avons la documentation interne, quelque chose appelé effets NDR x. Et il vous montre ici un exemple de la façon dont la création des effets. Il y a quelques explications sur modèle Angular et aussi comment utiliser un service pour lequel les films. Et puis ici, il va chercher les films et puis écrire des effets dans leur section effets d'écriture, vous pouvez voir exemple de création de cet effet. Donc exactement comme la documentation, je vais avoir un nom pour mon effet. Donc, le nom de notre effet est build session utilisateur. Et toujours les effets sont suffixe avec le signe du dollar, comme vous le voyez ici. Maintenant, nous pouvons créer notre effet en utilisant la méthode create effect. Le paramètre de create effect sera une fonction qui observe toujours les actions sont en cours dans l'application. Donc, par exemple, j'aurai ici d'abord une fonction de rappel, et cette fonction de rappel retournera pour moi ces actions, le tuyau. Donc, je suis ici en observant les actions qui sont en cours d'exécution dans l'application. C' est un service qui est fourni par n DRX pour observer les actions qui sont en cours dans l'application. Donc, ici dans le tuyau, quand j'ai l'action qui s'appelle Build session utilisateur, alors je vais faire quelque chose de tel que vous devez dire de type, comme lorsque cette fonction ou lorsque l'action a un type de, par exemple, la session utilisateur de construction, alors nous allons juste assombrir et chercher les données. Donc, si vous vous souvenez, nous avons importé l'action de l'utilisateur ici. Donc, je vais l'utiliser, et je dirai point d'action de l'utilisateur Construire une session ou construire une session utilisateur de cette façon, quand c'est le type, alors je vais faire quelque chose avec. Donc, vous mettez une virgule ici pour ajouter un autre tuyau, qui est une carte concat ou une carte de fusion. C' est un RTX pour nous pour être en mesure de cartographier, c'est des liens de tout cela observable à un nouveau type à une nouvelle action. Donc, de cette façon, vous pouvez avoir une carte concat. Et cette carte concat aussi bien avec ont aussi comme paramètre, une fonction de rappel. Et cette fonction de rappel, nous pouvons faire à l'intérieur ce que nous allons faire pour le jeton. Donc, en tant que dessin, je vais vérifier si le jeton est valide ou non. Donc, si vous vous souvenez, nous avons créé un service de stockage local, et ce service de stockage local contenait pour moi tout ce qui concerne le jeton d'authentification. Donc, pour cela, je vais ajouter aussi une autre méthode ici avec le service de stockage local, qui sera, est un jeton valide. Donc, ici, nous pouvons avoir est valide parler ET fonction. Et cette fonction va valider pour moi ce jeton, qui est maintenant dans le stockage local. Et puis il retournera false ou true en fonction du temps de validation et d'expiration du jeton. Donc, l'implémentation de cette méthode dans le stockage local, ce service que nous allons avoir ici a d'abord causé le jeton, et je vais attraper le jeton de ce point, obtenir le jeton. C' est comme si j'appelais cette méthode pour obtenir le jeton du stockage local. Et puis je vais vérifier s'il y a un jeton ou s'il y a vraiment un jeton comme il est défini, comme nous avons un jeton dans le magasin d'état ou dans le stockage local, alors nous allons le vérifier. Donc nous devons le décoder. Si vous vous souvenez, on faisait un décodage pour ce jeton dans la garde. Donc ici, je vais avoir un décodage de jeton et ensuite je vais avoir que le garde ou je vais copier la méthode qui était dans la garde ici. Si vous vous souvenez que nous analysions ce jeton à certaines parties et alors nous obtenons l'exploration ou aussi certains champs comme est admin et aussi l'ID utilisateur, si vous vous souvenez. Donc maintenant, je vais copier cette partie, puis revenir à la fonction de stockage local. Et puis nous aurons ici, et puis nous fermons le support. Maintenant, nous avons le jeton. Donc maintenant, nous devons obtenir le x par arrangé dans le temps et valider ce jeton. Si vous vous souvenez aussi, nous avons dans l'ancien garde une certaine façon pour la validation, qui était jeton expiré et nous faisions un calcul. Il reviendra pour moi à travers tous les faux si cela, comme par exemple, le jeton a expiré. Donc, je vais copier la même méthode que nous ferons plus tard, un certain refactoring. Donc je l'aurai ici aussi. Ce sera une méthode privée. Et aussi, je vais dire que ici, si le jeton n'est pas expiré, puis retourné pour moi à travers, parce que ici je dis est jeton valide. Donc, si c'est valide, alors il a été retourné pour moi. Donc ici, j'aurai si ce n'est pas expiré, car ici jeton expiré, il reviendra pour moi vrai ou faux. True si elle a expiré. False s'il n'a pas expiré. Et ici, je veux n'est pas expiré comme est un jeton valide, donc il n'est pas expiré. Donc aussi pour combler toutes les lacunes de cette fonction, nous devons aussi ajouter d'autres. Donc, quand il n'y a pas de jeton totalement, alors revenez pour moi faux, comme si vous n'aviez pas de jeton valide. Donc, nous pouvons avoir ici retour false, ok, est valide jeton maintenant peut être utilisé dans l'effet, comment nous pouvons l'utiliser. Nous pouvons aussi importer ce service. Donc, nous pouvons dire ici le service de stockage local. Et puis ce service de stockage local, nous pouvons l'appeler exactement de la façon dont nous l'avons. Ici. Nous avons un service de stockage local, et notre service de stockage local vérifiera si le jeton a expiré ou non. Donc, je vais avoir ici, si ce service de stockage local point qui est un jeton valide, alors je vais faire quelque chose qui est une action pour le succès. Sinon, je vais faire ou saisir l'action de l'échec comme nous l'avons vu dans notre diagramme. Donc ici, j'ai exactement le point où je suis arrivé ici. Donc, nous avons ici, oui, nous allons saisir l'action du succès et construire la session utilisateur. Sinon, nous devons également saisir l'action qui échoue ou il n'y a pas de jeton ou de jeton expiré, et construire l'état vide, ce qui reflètera que nous avons un ensemble vide ou qu'il n'y a pas d'utilisateur déjà connecté à notre magasin. Dans la prochaine conférence, nous allons construire ou voir comment nous pouvons faire ces étapes. Comme je l'ai déjà dit. 177. Action de appelant sur le jeton de non-validité: Donc, le comportement ici que quand il est un jeton non valide, nous allons appeler cette action. Donc de cette façon, je vais faire le plus facile ici. C' est un peu plus difficile parce que nous avons besoin de récupérer des données de la base de données en utilisant nos API. Donc, je vais d'abord faire la partie facile. Donc maintenant dans le reste, lorsque le jeton n'est pas valide, appelons une action. Appeler une action dans l'effet. Ce sera comme le retour, comme off sera importé à partir de RX JS. Il reviendra pour moi et observable sur une action. Donc, de cette façon, je peux dire que les actions de l'utilisateur dot puis construire la session utilisateur échouent, mais vous devez l'appeler comme une fonction. Donc, c'est la chose importante à remarquer, de ne pas manquer ça. Donc ici, nous ne l'avons pas appelé comme une fonction parce que c'est un type. Nous demandons donc le type de cette action, mais ici nous allons exécuter cette action. Et cette action n'est pas exécutée comme lorsque le jeton est invalide, alors nous allons avoir dans notre réducteur un comportement. Et ce comportement définira l'utilisateur sur null et est authentifié sur false. Ainsi, les composants remarqueront que qui observent ces variables ou ces champs, alors ils sauront que l'utilisateur est nul et est authentifié est faux. Donc, ne montrez pas quelque chose ou ne cachez pas quelque chose à l'utilisateur global. Donc maintenant, la partie, si nous allons avoir ici, comme s'il y a un jeton valide, alors nous devons vérifier ou saisir les données de l'utilisateur, puis les ajouter à un autre réducteur et appeler l'action, qui est Les succès de session, qui aura les données de l'action, qui sera utilisateur et ajouter à la variable de l'état, stocker l'utilisateur et l'objet utilisateur et est authentifié sera vrai. Donc, d'où je vais obtenir ces données utilisateur, les données utilisateur proviendront du service, le service que nous avons créé auparavant, qui est appelé utilisateur Git. Et nous avons besoin pour cela, le nom d'utilisateur. C' est pourquoi, dans le back-end, nous avons également stocké dans le jeton, l'ID utilisateur. Donc, nous avons expiré ration, nous avons est administrateur ou non, et aussi nous avons l'ID utilisateur. Donc, comme je le suggère, nous pouvons également créer une fonction qui est appelée Get User ID à partir du jeton. Pourquoi on a besoin de ça ? Parce que je vais appeler dans l'effet le service utilisateur. Donc, ici aussi, nous avons également besoin d'obtenir le service utilisateur. Je vais avoir ici privé et ensuite service aux utilisateurs. Et ce type de service des utilisateurs ici. Donc, nous avons ici le service utilisateur, donc nous pouvons l'utiliser maintenant. Mais d'abord, après ça. Donc, ce service utilisateur point, point get utilisateur est dans le besoin d'ID utilisateur. Donc ici, j'ai besoin de définir un ID utilisateur qui est constant, et nous pouvons l'appeler ID utilisateur comme ceci. Et nous appellerons ce service de stockage local point. Et puis j'aurai une fonction qui est bonne, disant Obtenir l'ID d'utilisateur du jeton par exemple. De cette façon, nous aurons l'ID utilisateur du jeton. Faisons cette fonction. Donc je vais copier cette partie pour avoir le même nom, et ensuite j'aurai cette dopamine ici ou la fonction ici. Ce sera exactement la même chose. Nous allons décoder et faire la même chose. Et nous n'allons pas obtenir l'expiration, mais nous obtiendrons l'ID utilisateur, qui a été stocké avec le jeton. Donc exactement la même chose. J' aurai ici jeton getToken et ensuite je vérifierai ce jeton. Je vais le décoder. Tout d'abord, je devrai retourner l'ID utilisateur de point de jeton. Donc, de cette façon, nous pouvons supprimer cette partie. Et je dirai décoder le jeton puis l'ID utilisateur parce que je sais et je suis sûr qu'il y a un ID utilisateur dans ce jeton après l'avoir décodé, sinon, retournez pour moi null. Donc, quand il n'y a pas de jeton, puis retourné pour moi null. Donc, de cette façon, nous obtiendrons l'ID utilisateur du jeton pour être plus sûr, comme ne pas avoir d'erreurs ou de problèmes dans le cas où il n'y a pas d'ID utilisateur, alors nous pouvons avoir aussi si ici. Donc, je peux ajouter ici, si le décodage de jeton, comme j'ai ici un jeton, mais par exemple, il n'est pas possible de le diviser. Donc de cette façon, décodage de jeton, nous deviendrons indéfinis. Donc, de cette façon, je peux avoir si, OK, et le code, comme si j'obtiens vraiment un décodage de jeton, puis retourné pour moi, ce jeton décoder cet ID utilisateur. Sinon, revenez pour moi aussi, nul. Donc, de cette façon, nous couvrons toutes les possibilités qui peuvent se produire en ce qui concerne l'ID utilisateur du jeton. Donc, ici, je reçois l'ID utilisateur du Docker. Maintenant, nous sommes en mesure d'utiliser cet ID utilisateur à l'intérieur de ce service. Mais aussi c'est mieux ici parce que nous avons la possibilité que l'ID d'utilisateur puisse être nul, il est donc préférable d'avoir si ici aussi. Donc, s'il y a ID utilisateur, alors nous allons retourner aussi, les données de service retour et action. Donc ce sera comme ça. Donc, je reviendrai. Je veux revenir sur cette action ou de l'action réussie, mais je dois appeler le service. Donc, dans le service, quand j'appelle le service, je peux aussi ajouter un tuyau et le mapper à un autre type, ce qui sera un succès de session utilisateur de construction. Donc, pour expliquer cela, je peux avoir ici ce service utilisateur point que getUser et ensuite je passe l'ID utilisateur que je veux ici. Donc, nous donnons toujours l'erreur, obtenant l'erreur parce que sont les types ne correspondent pas ensemble. Nous devons donc gérer ce type pour être exactement le même des types d'actions. Parce que Create effect, attendez-vous pour moi. Actions pas, par exemple, comme observable de données. Donc, de cette façon, nous aurons ici aussi pipe. Nous devons donc mapper ces données à un nouveau type. Donc, la carte devrait provenir de nos x js comme vous le voyez ici. Donc, ici, nous aurons une carte. Et puis cette carte, nous obtiendrions les données de l'utilisateur à partir de lui. Et cette cartographie, ou nous allons retourner comme non pas par exemple, données de l'utilisateur lui-même, mais l'action, l'action de succès. Donc, nous pouvons avoir ici retour après l'action de l'utilisateur de mappage, puis construire des succès de session utilisateur. Mais ce succès de session utilisateur nécessite une invite et ces sondes sont des utilisateurs. Donc, de cette façon, je vais avoir ici, ces invites seront l'utilisateur. Donc, l'utilisateur sera les données de l'utilisateur, que j'ai obtenu ici. Donc, de cette façon, je dis quand il y a un jeton valide, puis trouvez pour moi l'ID utilisateur de ce jeton. Et puis si leur ID utilisateur est valide, alors attrapez pour moi les données utilisateur du backend, puis changez les données de retour pour être une action de la section utilisateur de construction ou de succès de session en utilisant les données utilisateur. Donc de cette façon, je dis que le feu pour moi cette action. Et aller au réducteur de cette action, nous remarquerons que je reçois dans l'action de l'action, les données de l'utilisateur et les mettre dans le champ de l'utilisateur, dans le magasin d'état et est également authentifié. Je le fais comme un vrai. C' est ainsi que j'ai créé l'effet. Mais maintenant, il nous manque quelques points. Je te l'ai dit toujours quand on a des singes, toujours couvrir toutes les possibilités, ok ? Si je n'entends pas avoir un jeton valide, puis renvoyé pour moi l'action, ok, la session a échoué. Ici, par exemple, s'il y a une erreur avec l'API. Donc, quand je saisis les données de l'utilisateur du service utilisateur et qu'il y a une erreur. Comment nous pouvons envoyer, par exemple, la session utilisateur de construction a échoué. Ici, vous pouvez ajouter la virgule après le mappage à l'intérieur de la méthode de tuyau. Donc, de cette façon, vous pouvez dire attraper erreur. Et cette erreur de capture aura pour vous une erreur ou une fonction de rappel où vous portez tourner exactement la même chose ici. Ainsi, vous pouvez aussi bien le retour de la session de ceinture d'action des utilisateurs a échoué. Donc, cela sera appelé quand il y a un échec dans l'API , puis il initialisera la décision et est authentifié sera faux. Mais aussi un an, nous avons un si, s'il n'y a pas d'identifiant d'utilisateur, nous devons aussi l'attraper. Donc, nous avons aussi à ajouter ici autre pour l'ID utilisateur. Donc, s'il n'y a pas de jeton valide et sinon, s'il n'y a pas d'ID utilisateur et a échoué, s'il y a ID utilisateur, alors faites votre travail, prenez ces données et le champ pour moi le magasin d'état, comme nous le voyons ici dans le réducteur et comme nous l'avons discuté avant. Alors maintenant, nous avons fini aussi cette partie. Donc, nous avons maintenant l'action quand il a échoué et aussi l'action quand c'est le succès. Nous avons chargé les états dit en utilisant le réducteur avec les données et les données sont hors du magasin, est mis à jour toujours basé sur toute cette date. Maintenant, nous devons en quelque sorte lire toutes ces variables dans les composants. Par exemple, je vais le lire dans la page de paiement et remplir le formulaire de vérification des données et dire que le formulaire sera rempli automatiquement lorsque je me connecte à la page de paiement. Donc, je n'ai pas besoin de sentir mes données comme mon nom, e-mail, adresse, etc. 178. Objet des champs de Observe à l'aide de sélecteurs: Donc maintenant, nous allons saisir une donnée à nos composants. Donc, je veux que mes composants voient les données du magasin d'état. Mais d'abord, nous devons créer des sélecteurs. sélecteurs sont en fait pour saisir les données du magasin d'état. Donc, si vous vous souvenez que notre structure est créée pour nous, un sélecteur d'utilisateur. Et dans ce sélecteurs d'utilisateurs, nous obtenons une erreur ici parce que c'est, nous avons changé les types, nous avons changé les actions. Donc, je vais tout supprimer d'ici, qui est automatiquement créé, et aussi supprimer toutes les erreurs qui sont définies dans l'importation et commencer à partir de zéro. Mais je vais garder cette partie est de rechercher l'état de la fonctionnalité utilisateur géré par NGINX. Donc, ici, c'est comme si j'obtenais l'état de l'utilisateur. J' ai tout le magasin ici. Donc avec ce magasin, je peux faire des trucs. Donc, je peux sélectionner les données utilisateur et aussi l'utilisateur authentifié ou est authentifié ou non. Donc, ici, nous avons juste une erreur est un état, nous devons le remplacer par l'état des utilisateurs. Si vous vous en souvenez, nous avons créé des états utilisateur dans le réducteur. Donc, nous avons ici importer l'état de l'utilisateur à partir de là, vous faites réducteur. Donc, cette constante obtient l'état de l'utilisateur utilise le sélecteur de fonctionnalité de création. Donc, sélectionnez pour moi l'état de l'utilisateur entier en utilisant la clé de fonctionnalité utilisateurs, qui est appelée utilisateurs. Parce que ici, notre application, si nous créons une autre bibliothèque ou dans un autre magasin d'état, par exemple , vos produits, nous devons faire la différence entre tous ces états portes que j'ai ici. Donc, la clé de fonctionnalité des utilisateurs ou le nom d'état qui est utilisé dans le module utilisateurs, qui est celui-ci pour la fonctionnalité est appelée fonctionnalité que j'appelle Utilisateurs fonctionnalité Qj est appelé les utilisateurs doivent être différents de bibliothèque à bibliothèque, ou de bibliothèque, ou de à la fonctionnalité. Donc ici, je vais créer aussi un sélecteur. Je sais que vous ne comprenez pas ce qu'est un sélecteur, mais bientôt vous verrez l'utilisation de celui-ci et vous le comprendrez. Donc, je créerais ici une constante, je l'appellerai Get User. Donc, à partir du magasin d'état, donnez-moi juste le champ utilisateur. Donc ici, je vais appeler quelque chose qui est appelé crée un lecteur, et cela crée un vecteur est de MDR x. puis j'utiliserai l'état getUser ici. Et puis je dirai à partir de cet état, que j'ai ici, alors je peux l'utiliser pour retourner quelques champs spécifiques de celui-ci. Donc, je vais dire ici de cet état, puis retourné pour moi, état utilisateur point. Donc, l'utilisateur ou l'utilisateur rempli à l'intérieur cette porte indique où il sera avec des données ou il sera nul en fonction de la décision ici, alors je peux obtenir les données de l'utilisateur exactement la même chose que nous pouvons faire aussi pour authentifié. Ainsi, nous pouvons créer une autre constante qui sera également sélecteur. Donc, nous pouvons dire que get user est authentifié. Par exemple, tout est le nôtre pour être plus court. Donc crée un électeur est le nôtre sera également obtenir de l'état utilisateur. Et puis j'utiliserai exactement la même chose ici. Mais au lieu du champ utilisateur, je vais utiliser est le champ authentifié. Donc, ici, je reçois est authentifié. Ok, j'ai créé cet électron, tout va bien. Maintenant ce que je peux faire avec, comment nous pouvons utiliser ces sélecteurs. Si vous vous souvenez, je vous ai dit que nous avons la façade est pour faire et embellir notre code plus. Nous n'aurons pas de gros appels dans les composants. Nous ne pouvons avoir que des appels courts lorsque je veux appeler l'utilisateur get ou quand je veux avoir les données utilisateur du magasin d'état. Allons à l'USAID. Et ici, nous pouvons créer quelque chose qui est appelé comme observable, nous pouvons dire. Et cet observable sera une variable de l'utilisateur pour analyse. Et il aura courant, par exemple, nous pouvons lui donner un utilisateur actuel. Donc c'est un nom et il serait observable comme moi, ils le feront. Les variables observables sont toujours des suffixes avec signe dollar. Et ici, nous avons cette porte à points. Et puis a pris pipe ici comment on peut appeler un sélecteur. Donc, si vous vous souvenez, nous appelons ici une action. Maintenant, on peut appeler ici un sélecteur. Donc, je vais dire que ce point a stocké le tuyau, et puis je dirai sélectionner les utilisateurs, les sélecteurs, l'utilisateur sélectionné, qu'est-ce que c'est ? C' est ici. C' est importer tout pour moi des sélecteurs d'utilisateurs. Si important pour moi, tout, ce qui est exporté ici. Donc exporte pour moi ceci, ceci et ceci. Donc maintenant, nous avons dans la facette, exporter ou sélectionne pour moi le sélecteur d'utilisateur, qui sera, par exemple, getUser. Et aussi nous allons créer une autre variable qui sera appelée est authentifiée. Et ceci est authentifié, il sera également observable parce que ce tuyau reviendra pour moi observable et sélectionnera pour moi une donnée spécifique du magasin. Donc, je dirais ici magasin dot py pz aussi, puis sélectionnez, puis sélecteurs d'utilisateurs. Et puis je vais sélectionner Git, l'utilisateur est sorti. Donc, de cette façon, j'ai ici deux variables dans l'usaid de l'utilisateur. Je peux les utiliser et canaliser des données du magasin et observer ces données qui sont stockées dans le magasin d'état. Nous n'avons pas besoin de cette importation afin de pouvoir la supprimer. Dans la prochaine conférence, je vais vous montrer comment nous pouvons aussi appeler tous ces observables. Donc, nous allons passer au niveau du composant, par exemple, dans le produit, et nous allons appeler le service utilisateur et appeler, par exemple, cela obtenir l'utilisateur actuel. Donc l'utilisateur actuel, il va récupérer les données de l'utilisateur à partir du magasin d'état s'il est authentifié ou non. 179. Page de vérification de votre remplis automatique basée sur l'utilisateur enregistré: Ok, maintenant nous avons ces deux variables ou deux champs de l'état stockés qui observent pour moi l'utilisateur actuel, et si l'utilisateur est authentifié ou non. Je veux juste mentionner encore une fois que nous avons fait cette partie. Donc, en chargeant l'application depuis le début, nous supposons que nous avons déjà un jeton de stockage local. Donc, nous avons verrouillé avant d'une manière ou d'une autre et nous avons déjà le jeton dans leur magasin d'état et nous vérifions si c'est valide ou non. On n'a pas fait cette partie. Et cette partie viendra plus tard après cette conférence ou cette somme de conférences après avoir terminé complètement cette partie et observer ou remplir la page de paiement en fonction de l'utilisateur connecté et connecté. Maintenant, nous avons ces variables. Nous pouvons ensuite utiliser les utilisateurs pour Sayed directement dans n'importe quel composant de notre bibliothèque, par exemple, dans les commandes. Ou nous pouvons aussi bien les appeler ou appeler ça par le biais des services. Parce que nous avons dit que les bibliothèques communiquent entre elles par le biais des services de ces bibliothèques. Donc, nous pouvons avoir ici aussi un service que nous pouvons appeler observer, entrer dans l'utilisateur. Donc, je peux ajouter ici aussi un service, qui serait observé, ou il peut avoir sa petite lettre observer l'utilisateur actuel. Donc, ici, nous avons un utilisateur actuel. Nous supposons que nous avons verrouillé et que nous avons l'utilisateur actuel. Donc de cette façon, j'appellerai ça rapide Sayed, qui est des utilisateurs pour Sayed. Donc, avec les utilisateurs pour Sayed, il aura deux champs. L' un d'eux est l'utilisateur actuel. Donc, de cette façon, nous pouvons retourner ça. Donc celui-ci reviendra pour moi et observable. Et ces observables contiendront l'utilisateur actuel. Et nous pouvons également créer ou est-ce que l'utilisateur actuel est authentifié ? L' utilisateur actuel est-il authentifié ? Et de cette façon, nous pouvons également appeler ou retourner cet observable, qui serait ceux-ci, le premier secours de l'utilisateur cependant, est authentifié. De cette façon, nous pouvons revenir à notre bibliothèque de commandes ou à la page de paiement ou du composant de commande. Et nous avons ici dans la page de paiement, nous pouvons appeler le service utilisateur. Nous l'avons déjà appelé. Donc maintenant, sur la base de cela, nous pouvons obtenir les données de leur utilisateur actuel et sentir que formulaire de vérification. Nous pouvons ajouter ici une méthode qui peut être ce point auto Feel utilisateur. C' est ça. Ainsi, nous pouvons avoir les données de l'utilisateur déjà remplies dans le formulaire lorsque nous effectuons une commande. Donc je veux dire, ici dans cette page, quand je vais ici à la garde et puis cliquez sur Checkout, j'aurai ici mes données basées sur mon jeton après que je me connecte. Parce que si vous vous souvenez, nous avons activé le connecté ici. Nous devons donc nous connecter et nous aurons ici cette page ou l'accès à cette page. Alors revenons ici et disons privé. Nous définissons une méthode et nous l'appelons auto-fill données utilisateur. Et ce remplissage automatique des données de l'utilisateur avec de l'or pour moi, ce point observer l'utilisateur actuel. Nous devons donc observer l'état actuel de l'utilisateur. Nous pouvons voir s'il est connecté ou pas. Et puis nous pouvons obtenir aussi les données de l'utilisateur. Nous n'avons pas à vérifier ici si l'utilisateur est connecté ou non parce que cette page est déjà protégée par l'itinéraire, si vous vous en souvenez. Mais nous allons parler d'observer que l'utilisateur est connecté lorsque nous entendons l'évaluation du produit. Mais ici, c'est déjà protégé. Vous n'avez donc pas à vérifier si l'utilisateur est authentifié ou non. Vous avez juste besoin d'obtenir les données de l'utilisateur ou de l'utilisateur actuel. Observez donc les données actuelles de l'utilisateur. Je m'y abonnerai. On peut à la place avoir gleich cette pipe et prendre jusqu'à ce que et toutes ces choses. Vous ne pouvez pas ajouter aussi un tuyau qui est appelé prendre, et il en prendra un. Et vous ne pouvez prendre qu'une seule valeur du magasin d'état. Comme si vous n'aviez pas à prendre la valeur toujours, toujours, toujours, et à l'observer. Non, vous prenez juste un et automatiquement leur abonnement, comme nous l'avons déjà parlé, il sera terminé. Donc, de cette façon, vous n'aurez aucune fuite de mémoire. Donc ici, j'ai un tuyau, prenez-en un, ok, abonnez-vous, et puis j'aurai l'utilisateur. Donc, ici, cet utilisateur va retourner pour moi les données de l'utilisateur. Donc, si nous vérifions ici ce type, comme vous le voyez, il sera de type utilisateur. Donc, nous avons aussi besoin de revenir, C'est une fonction de rappel. Et nous remarquerons que ce paramètre a utilisateur, type d'utilisateur. J' enregistre son auto formaté. J' ouvre à nouveau ces crochets, puis nous allons remplir le formulaire. Alors, comment nous avons échoué au forum avant, nous étions juste en train d'aller terrain par terrain. Donc, je vais dire ici, ceci, la forme de paiement dot seti dot set valeur. Donc, de cette façon, je vais avoir ici ceci cependant, point de formulaire de paiement, par exemple, nom. Ce sera la valeur définie par point, si vous vous en souvenez. Et puis je vais définir la valeur à partir du nom de point de l'utilisateur. Donc, dans ce cas, nous aurons le nom d'utilisateur automatiquement dans la caisse. Alors allons-y et essayons ça. Donc, je vais revenir ici, vérifier. Et nous remarquerons que nous n'avons rien eu. Ok, vérifions la console pourquoi nous n'avons pas de données et je suis sûr que nous avons une erreur. Ok, gentil. Il y a déjà une erreur ici. Il faut qu'on le vérifie. Donc, cette erreur disant que n'a pas réussi à charger une ressource, la liaison sans serveur avec l'état pour 01, non autorisée pour l'API obtenir l'utilisateur. Donc, nous sommes vraiment obtenir l'utilisateur, mais nous sommes non autorisés. Pourquoi ? Parce que si vous vous souvenez, nous n'avons fait aucune interception, aucune interception HTTP pour notre application dans un magasin de bonbons. On l'a fait seulement pour l'administrateur. Si vous vous souvenez, nous avons ici dans le module d'application, nous avons fourni quelque chose appelé fournir intercepteur http, puis nous avons appelé intercepteur JWT et multi est vrai. Ainsi, nous pouvons charger chaque requête HTTP avec notre jeton. De cette façon, le serveur nous autorisera à utiliser cette API. Donc maintenant nous avons ici à l'administrateur, mais nous ne l'avons pas à la fin vous magasinez. Je vais donc aller ici à l'application, au module, puis à leurs fournisseurs. Et puis j'utiliserais ici qui fournissent un point de contrôle d'intercepteur http à l'importation automatique. Et aussi j'ai ici intercepteur JWT de l'utilisateur Blue Bits, et alors nous l'aurons déjà ici. Ok, revenons maintenant à notre page d'accueil. Et puis sauvegardons à nouveau. Supprimons ce point d'arrêt. Et puis nous irons voir. Nous remarquerons que nous avons maintenant le nom déjà rempli dans ce champ. Donc, pour continuer ici, vous pouvez également sentir toutes ces données basées sur les données de l'utilisateur ou verrouillé dans l'utilisateur. Donc maintenant, je vais y aller à nouveau et je vais remplir tout cet ensemble de nom d'utilisateur de valeur. Donc, il vaut mieux aussi bien ici pour vérifier si nous avons l'utilisateur à éviter d'avoir une erreur. Parfois, nous n'aurons pas d'utilisateur si vous vous souvenez, et il reviendra pour moi null parce que le magasin d'état a dit que l'utilisateur peut être null. Donc de cette façon, nous pouvons avoir si ici est mieux. Donc, nous pouvons dire ici ce formulaire DO vérifier. Et puis, et nous continuerons sur tous ces champs. Donc, je vais aller vite sur eux. Bien sûr, vous pouvez les sentir par vous-même et terminer cette conférence en remplissant les données du formulaire. Donc ici, je sens toutes les données acquises par l'utilisateur dans leur page de paiement. Donc, quand je reviens ici, comme vous le voyez, nous avons toutes les informations. Maintenant, nous sommes ici à la maison et je vais à la caisse. Alors supprimons cette partie et je vais cliquer sur Checkout. Et je vais voir que mes données ont automatiquement rempli chaque champ que j'ai ici. Et aussi je peux passer une commande. Mais encore maintenant, si vous vous souvenez que passer la commande est basé sur l'ID invité de l'utilisateur, Mao, nous allons avoir l'ID utilisateur qui est verrouillé. Donc, vous allez le faire et faire beaucoup de refactoring dans les prochaines conférences. 180. Refactoring + Commandez de place avec l'utilisateur actuel: Ok, dans cette conférence, corrigeons quelques bogues et localisons également un ordre basé sur l'utilisateur connecté. Donc, tout d'abord, je vais avoir un bug ici, c'est moi, comme je vous l'ai dit, il en faut un. Donc, ici, nous avons le Q1 et lorsque vous enregistrez la page et l'application est rechargée dans cette page de retrait, alors vous verrez qu'il n'y a pas de données. C' est parce que lorsque vous n'en prenez qu'un, peut-être que cet utilisateur est nul. Et nous avons ici, si l'utilisateur est nul, alors nous ne sommes pas en mesure de définir les valeurs de l'utilisateur sur le formulaire. Donc, la meilleure façon lorsque vous vous abonnez à partir du magasin d'état, toujours à prendre jusqu'à ce qu'ils aient terminé l'abonnement ou lorsque le composant a été détruit. Donc exactement comment nous l'avons fait précédemment dans le cours, nous créons une, une variable qui est appelée abonnements finaux, ou nous pouvons l'appeler désabonnement. Donc ici, je vais avoir un désabonnement et cela aura un sujet de tout, et il aura un nouveau sujet. Donc, nous pouvons avoir le type, désolé, ici nous avons un type et aussi ce sera un nouveau sujet. Donc, de cette façon, je peux définir mon nouveau sujet et je peux l'initialiser, puis le terminer quand ce composant a été détruit. Donc ici, sur la destruction, je peux appeler ça désabonnement. Ce sera comme suivant et ensuite complet. Donc, lorsque le composant a été détruit, cet abonnement sera fait. Donc, ici, nous allons avoir ceci et ensuite le conflit. Et n'oubliez pas toujours lorsque vous utilisez NDI sur destroy pour implémenter également le composant avec destroy. Donc, nous aurons ici dedans et aussi onDestroy comme nous l'avons vu avant. Donc maintenant, nous devons terminer cet abonnement à la coupe, prendre jusqu'à ce que cette souscription. Ainsi, notre abonnement fonctionnera. Et quand je rafraîchis la page, je verrai que mes données sont toujours là. Donc ici, j'ai un problème. Je dois remplacer cela par un e-mail. Et nous aurons toutes les données vont bien et viennent de la base de données. Ok, maintenant faisons un autre refactoring, qui est exactement de placer l'ordre en fonction de l'ID utilisateur, qui est connecté. Donc, au lieu de cet ID utilisateur, je peux le faire sans rien. Comme on peut dire que ce n'est qu'une ficelle. Et puis nous pouvons dire, après avoir obtenu l'utilisateur, cet ID utilisateur est l'ID point utilisateur, qui vient de la base de données. Donc, de cette façon, nous aurons l'ID de la bonne façon. Et quand je passe la commande, je verrai l'ordre dans le backend en fonction de l'utilisateur connecté. Exécutons l'application Admin pour voir si nos commandes vont vraiment au back-end pour tester cela. J' ouvre donc un nouveau port pour ouvrir l'application en même temps. Donc, nous aurons ouvrir le front end et le panneau d'administration ou la boutique et le panneau d'administration, en même temps. Ok, ça fonctionne avec succès. Nous pouvons aller par exemple, à cela et nous disons hôte local. Et nous mettons le port que j'ai spécifié dans le NX ou dans le commentaire. Donc, vous aurez ici l'application Admin en cours d'exécution. Mais comme vous le voyez ici, nous obtenons la même erreur que celle que nous avons eue quand nous avons créé le magasin d'état. Donc aussi, nous devons initialiser l'application Admin pour leur magasin d'état. Nous devons donc copier ces deux lignes module de stockage et affecter également module pour exécuter l'application Admin avec succès sans aucun problème. Alors maintenant, je vais y aller et ensuite j'obtiendrai les importations. Et dans l'importation après le client HTTP, nous disons, ok, module stocké, Auto Import et affecte également le module sera Auto Import et enregistrer et notre application devrait fonctionner normalement. Donc maintenant, nous avons la page de connexion sans aucun problème, je vais me connecter, puis cliquez sur Soumettre. Et nous aurons notre obligation ou notre backend en cours d'exécution. Je vais passer aux ordres. J' ai ici, les ordres. Essayons donc de passer une commande à l'avant ou dans le magasin. Donc un an, j'ai déjà passé une commande. Je vais cliquer sur Passer commande. D' accord. Ma commande qui a été ajoutée avec succès et j'ai ici bouton pour revenir à la boutique. Allons au panneau d'administration et revenons aux commandes. Et nous verrons que les commandes ou la commande que j'ai passée sont ici. Donc, et aussi ça va avec mon nom parce que j'ai verrouillé avec mon nom en tant qu'utilisateur. Et c'est arrivé avec succès ici. Et je peux aussi le voir et voir tous les détails sur la commande. Donc, je voudrais vous conseiller toujours vérifier ce graphique ou ce graphique, comment nous avons construit tout le processus de magasin d'état pour récupérer des données du magasin d'état et aussi les utiliser dans nos composants. 181. Pasde de paiement Stripe Paiement Gateway: Dans cette section, nous allons ajouter le mode de paiement pour l'utilisateur après avoir vérifié. Donc, après avoir effectué un chèque, on me demande un e-mail et un mot de passe pour me connecter. Après cela, lorsque je passe une commande ou que je passe une commande, je dois disposer d'une passerelle de paiement pour pouvoir payer et ensuite je peux passer ma commande, puis le magasin va la gérer et me livrer mon produit. Donc, sur cette page, lorsque je clique sur passer commande, je ne vais pas passer la commande directement. Je vais être redirigé vers une page de paiement. Cette page de paiement décidera si je passe la commande ou non. Mais comment nous pouvons ajouter cette page. Nous ne allons pas créer un composant qui est fait par Angular. Donc, si vous vous souvenez, nous créons un composant pour la page, puis nous ajoutons quelques champs pour le paiement par carte et ensuite nous passons la commande. Non. Maintenant, de cette façon, nous allons ajouter une passerelle différente qui viendra aussi avec le formulaire et tout ce qui concerne la saisie des données du panier. Pour cela, nous avons besoin d'une passerelle de paiement. Et cette passerelle de paiement, je vous suggère d'utiliser quelque chose appelé stripe. Stripe.com a la capacité de vous fournir une API où vous pouvez passer une commande et payer pour vous-même ou pour votre boutique pour les personnes qu'ils peuvent placer ou celles de votre boutique. Et aussi il aura la capacité que vous suivez les paiements sur non seulement dans votre boutique, mais aussi dans un tableau de bord qui est créé par bande. Donc, tout d'abord, vous devez vous inscrire. Donc, j'ai ici comme me connecter, mais vous devez d'abord vous inscrire. Donc l'inscription est en cliquant ici sur inscription comme vous le voyez ici. Et puis lorsque vous cliquez dessus, vous aurez quelques informations. Vous devez donc remplir votre e-mail, nom complet et pays et mot de passe. Et bien sûr, il y aura d'autres informations sur ce qui est votre entreprise et comment vous êtes conscient comme votre adresse et comment vous localisez ou quels sont les produits de votre boutique que vous voulez aligner la passerelle de bande avec votre boutique. Bien sûr, tout cela, c'est une information simple. Vous n'avez pas à obtenir autant de temps lors de l'inscription. C' est comme l'email, le nom complet et certaines informations sur votre entreprise que vous pouvez les remplir facilement. Après cela, vous pouvez vous connecter et vous aurez comme un tableau de bord. Bien sûr, il y a aussi une certaine authentification. Vous devez fournir votre numéro de téléphone afin qu'ils puissent vous envoyer du code. C' est pour plus de sécurité. Donc j'ai le code sur mon téléphone, alors je vais le mettre. Et puis je vais être connecté à mon compte. Donc, après cela, nous avons comme le moyen de tableau de bord. Et dans le tableau de bord, vous pouvez savoir comment gérer les paiements de votre boutique. Donc, par exemple, j'ai déjà fait un certain paiement et j'ai, par exemple, un paiement qui peut être, par exemple, en direct et des paiements qui peuvent être avec test, avec le mode test, avec lequel vous allez travailler. Celui-ci, vous avez juste besoin d'activer le mode de test. Mode test, comme vous le voyez, J'ai ici quelques paiements afin que je puisse placer, Il y a autant que je peux pour déployer mon application ou développer mon application et travailler avec la bande. Assurez-vous donc que le mode de test est activé. Et nous allons continuer dans la prochaine conférence comment nous nous connectons en utilisant l'API. Et aussi nous allons créer comme par exemple, les outils de développement, ce qui est comme pour la création des clés d'API, comme nous le verrons plus loin. Aussi, n'oubliez pas d'aller à la documentation de stripe. Donc, vous ne pouvez pas écrire de documents de développeur Stripe. Et dans la documentation, vous verrez les informations dont je vais parler dans les prochaines conférences. Je vais joindre tous ces liens dans cette conférence. 182. Installation de bibliothèques nécessaires: La documentation des bandes prend en charge tous les langages de programmation dont nous avons besoin pour notre passerelle de paiement. Pour commencer avec la documentation, nous pouvons cliquer sur Commencer. Et ici, nous avons plusieurs opérations pour les paiements. L' un d'eux que nous allons faire est d'accepter les paiements en ligne parce qu'il y a aussi un certain nombre de factures d'abonnement et de traitement fiscal que nous ne couvrirons pas dans ce cours. Nous avons juste besoin d'accepter le paiement en ligne ou un seul paiement. Donc, si vous cliquez sur Accepter le paiement en ligne, vous aurez un exemple complet comment mettre en œuvre le paiement ou l'application. Pour ici, nous avons HTML réagir, et Next JS comme une extrémité frontale et aussi tomber en arrière. Tous les langages de programmation incluent le nœud. Donc, le problème ici que nous n'avons pas d'exemple pour Angular. Donc, si le langage de programmation du front end n'est pas répertorié ici, vous pouvez cliquer ici, ne codez pas, obtenir de l'aide de nos partenaires. Donc, lorsque vous cliquez dessus, vous aurez une recommandation de la bande, qui est appelée bande SGX. Et vous extraire est une bibliothèque. Nous pouvons l'utiliser avec Angular pour construire la passerelle de paiement dans le front end. Donc, comme vous le voyez ici, si vous tapez Angular et alors vous verrez cette bande CN. C' est en quelque sorte loué par le site Stripe. Donc, nous pouvons commencer avec cette bande CN en commençant ici. Et puis cela nous amènerait au dépôt Git de la bande MDX. Mais pour une meilleure vue de la documentation, vous pouvez voir aussi le site docs. Donc, il y a de la documentation pour MDX stripe, je vais aussi ajouter que le lien avec cette conférence. Donc, quand nous cliquons sur docs et puis vous verrez cette introduction. Nous verrons comment installer la bibliothèque, puis nous allons utiliser les services de cette bibliothèque. Commençons donc d'abord à installer la bibliothèque et la tribu gx et aussi la bande, qui est à l'origine de stripe. Donc, je vais copier ce code et ensuite j'irai à notre projet. Nous allons ouvrir un nouveau terminal, que j'ai déjà. Donc on peut avoir ici, noter que tout est de retour et qu'on peut en ouvrir un nouveau. Nous sélectionnons un bash, puis il ouvrira pour nous un nouveau terminal. Bien sûr, vous pouvez utiliser n'importe quel terminal que vous voulez. Mais pour moi, j'utilise, par exemple, zed comme H ou Bash. Nous avons basé le commentaire ici. Et si vous remarquez qu'il y a un signe de dollar au début, vous avez juste besoin de l'enlever. Et puis nous allons installer à la bibliothèque NC bande et la bande JS. Donc, lorsque vous appuyez sur Entrée, il sera ajouté aux bibliothèques ou au backend JSON, où nous avons installé ou ajouté nos bibliothèques pour le développement. Donc, si nous vérifions ici nos dépendances, nous verrons que nous avons deux bibliothèques. L' un d'eux est stripe et l'autre est SGX stripe. Il y a donc aussi une documentation pour cette bibliothèque que nous pouvons utiliser pour construire notre paiement. Je vais dans ce cours avec le plus simple. Bien sûr qu'il ya plusieurs options week-end faire. Mais je choisirai celui qui est exactement pour notre boutique. 183. Débit de paiement: Il vaut mieux toujours expliquer le flux, comment nous allons mettre en œuvre le paiement. Donc, quand je vais coder maintenant, vous pouvez comprendre ce que je fais. Tout d'abord, comme vous le voyez dans ce diagramme, que l'utilisateur va cliquer sur le bouton, qui est appelé Placer l'ordre a, nous l'avons dans l'extrémité frontale. Et puis nous allons créer quelque chose appelé Create check out session. Et cette demande sera traitée dans le backend après que nous envoyons les éléments de commande au backend. Et sur cette base, cela va calculer le prix total de la commande. Et puis il va créer quelque chose appelé ID de session. Et cet ID de session vient de l'API sprite, que nous allons utiliser dans le back-end. Et après avoir créé l'ID de session, nous allons rediriger l'utilisateur vers une page réussie, comme une page de remerciement ou une page d'échec. Comme nous ne pouvions pas créer l'ID de session parce que par exemple, connexion Internet ou il a un problème de réseau. Mais maintenant, nous supposons que nous allons créer un succès d'ID de session. Donc, nous allons envoyer qu'ils dirigent des informations à l'utilisateur dans le front end. Et l'application frontale lira directement à la page de paiement. La page de paiement serait fournie par bande. Il aura une forme spécifique de sorte que vous pouvez mettre votre numéro de carte, puis un autre détail que nous allons voir. Et nous utiliserons certaines données de carte de test, donc nous n'utiliserons pas de paiement réel. Nous utiliserons un protecteur de bureau, comme nous le verrons plus tard. Et puis après avoir géré le paiement à l'avant et après avoir redirigé vers l'API ou vers la page de paiement à partir de Stripe, nous allons avoir une redirection pour affecter page Q que nous avons créée avant ou vers une page d'échec. Donc, lorsque nous lisons dirigé vers la page de remerciement, nous allons créer un message de réussite et nous recréons la commande avec un statut en attente. Mais quand il est créé comme ou s'il y a un échec dans le paiement, alors nous allons rediriger l'utilisateur vers une page en échec et nous allons créer la commande comme un statut échoué. Nous devons donc garder la trace de chaque commande qui est créée, si c'est l'accès ou si elle a échoué. Ainsi, le client ou l'utilisateur ou le propriétaire de l'e-shop peut savoir quels sont les problèmes peuvent se produire dans son ego. 184. Créer une API de session de vérification: Implémentons maintenant ce diagramme avec le codage. Donc, tout d'abord, nous cliquons sur le détenteur de place, que nous avons déjà mis en œuvre à l'avant. Et puis nous allons créer une session de check-out. Mais la session de retrait nécessitait une API, qui est appelée Create check out session API. Et nous allons envoyer les articles de commande à cette API. Donc, en revenant à l'application back-end que nous avons créée auparavant avec NodeJS, j'irai à la page Orders. Et puis dans les routeurs de commandes, si vous vous souvenez, nous avons créé plusieurs API et l'un d'eux, celui-ci, qui se vante et l'ordre. Mais maintenant, nous avons besoin avant de poster et de commander, nous devons demander une séance de check-out. Donc, pour cela, nous avons besoin d'un routeur aussi. Et ce routeur aura une demande de poste. Et nous appelerions cette API comme une session de check-out ou créer une session de retrait. Ainsi, nous aurons l'API prête avec une demande et la réponse comme nous l'avons toujours fait avec nos API. Donc, je vais avoir ici la demande et ensuite une réponse. Et sur cette base, nous avons retourné le rappel que nous allons utiliser. Donc, le vérifier Créer une session, comme vous le voyez, nous avons dit que nous allons envoyer les articles de commande. Donc, je vais créer ici un appel constant il articles de commande. Et ces articles de commande, nous allons les recevoir à partir du corps de point de la requête. Ainsi, nous serons en mesure de gérer les articles de commande et d'obtenir l'identifiant du produit et de construire notre session. Il y a un exemple sur la documentation, comment nous grandissons pour créer un paiement pour cela, nous devons d'abord installer une bibliothèque qui s'appelle Stripe. Et nous allons utiliser cet effort pour créer notre jeton de session. Donc, je vais ouvrir ici un nouveau terminal. Je vais installer Stripe. Donc, je vais faire installer NPM bande. C' est ça. Donc, c'est sec. Nous allons l'utiliser dans notre API ici pour générer la session. Donc, je vais définir ici une constante qui s'appelle Stripe. Et ce lecteur, ça va nécessiter la bande que nous avons déjà installée. Donc, vous devez vous assurer que vous avez Stripe installer dans vos bibliothèques, comme vous le voyez ici, nous l'avons déjà. Et pour cela, nous devons fournir la clé, clé de test que nous avons créée auparavant. Je t'ai montré comment on a la clé. Mais encore une fois, je peux te le montrer. Nous allons donc à nouveau sur notre tableau de bord, comment nous créons nos paiements et comment nous créons un compte Stripe. Si vous allez aux développeurs, vous obtiendrez ici quelque chose appelé clés API. Et ceci ici, vous aurez la clé publiable où vous pouvez utiliser, par exemple, l'utilisation ou la création d'un paiement dans votre application. Dans notre cas, lors de la création de l'API, nous n'avons pas besoin de la clé publiable, mais nous avons besoin de cette clé secrète. Donc, vous devez faire une clé secrète révélatrice et ensuite vous la copiez. Et vous devez vous assurer que vous êtes en mode test. Et encore une fois, vous allez au code et après avoir besoin bande, vous placez un autre appel qui tiendra la clé elle-même. Donc, nous avons ici notre clé de test. Veuillez essayer d'utiliser votre propre clé pour ne pas essayer d'utiliser la même clé. Ainsi, vous pouvez avoir des résultats dans votre compte. Donc j'ai ici ce compte Stripe, j'ai ici la clé. Et puis je vais créer la session. Comment nous pouvons créer la session. Donc, si vous vous souvenez, nous avons créé l'ordre. Donc, maintenant, nous pouvons utiliser une bibliothèque rayée pour créer notre session. Donc, je vais définir ici une constante dans notre API. Je l'appellerai comme session. Et cette session aura une fonction de poids comme nous allons attendre jusqu'à ce que nous obtenions une réponse de Stripe dot check out. Exactement comme ça. C' est ce qu'on appelle s'efforcer de vérifier. Et puis vous devez dire des sessions avec S. Et ensuite vous devez dire Créer. Et avec cette Create, c'est une méthode où vous pouvez passer un objet et cet objet aura quelques paramètres spécifiques. Donc, nous devons d'abord définir que nous avons quelque chose appelé les types de méthode de paiement. Et puis nous devons dire ce genre de paiement. Maintenant, nous allons utiliser le garde comme MasterCard ou Visa Card. Encore une fois, nous devons avoir les éléments de ligne, mais les éléments de ligne doivent être formatés d'une manière spécifique. Nous pouvons dire que nous pouvons définir nos propres éléments de ligne. Donc, nous pouvons définir ici, nous pouvons dire des éléments de ligne de coût. Et comme nous le verrons plus tard, je vais vous montrer comment nous allons le définir. Donc, j'utiliserais ici des éléments de ligne, tableau. Nous devons passer ajouter souder une option qui est appelée mode. Et le mode est le paiement. Donc, nous pouvons dire de créer une session de paiement. Et puis nous avons quelque chose appelé URL de succès. Alors pourquoi nous avons cette URL de succès ? Je vous expliquerai cela plus tard. Mais pour l'instant, nous pouvons mettre l'URL localhost, puis 4200. Le port 4200 est utilisé dans notre application angulaire à l'extrémité frontale. Donc, si vous avez un port différent, alors vous devez l'utiliser. Mais pour moi, je vais utiliser le 4200 pour mon application frontale comme vous le voyez ici. Donc, après le paiement, je vais obtenir à lire dirigé vers l'application à nouveau, qui est, par exemple, passer, je dis succès, qui est notre page de remerciement, si vous vous souvenez. Et puis nous avons quelque chose appelé URL d'annulation. Et avec cette URL d'annulation, vous serez en mesure de rediriger l'utilisateur vers une page d'échec s'il n'est pas en mesure de payer. Donc, nous pouvons avoir à la place de cela, nous pouvons avoir comme une page, nous pouvons l'appeler, par exemple, erreur. Donc, nous pouvons créer cette page dans le front end. Et après cela, nous avons la séance ici. Nous allons renvoyer à l'utilisateur, à l'avant, comme nous l' avons vu dans notre diagramme, que je vais envoyer l'ID de session et lire directement NFO. Donc, de cette façon, je dois renvoyer à l'ID de session frontale afin que je puisse rediriger vers la session ou la page de paiement ou la page où nous allons mettre mes données de carte. Donc, je dirais ici, allons lier ce JSON et ensuite nous allons mettre comme ID. On peut mettre la session, que nous avons ici, point ID. Donc de cette façon, parce que cette session ou cette session de check-out reviendrait pour moi en tant qu'Asiatique et il a un membre qui est appelé ID. Je peux alors obtenir l'ID de session. Maintenant, il nous reste un problème, qui est les éléments de ligne. Maintenant, les éléments de ligne doivent être mappés d'une manière spécifique. Donc, si nous allons à la documentation de Stripe et voir, par exemple, accepter un exemple de paiement qui est la documentation rayée. Nous verrons dans le Node.JS, il y a comme un exemple que nous pouvons utiliser. Et cet exemple, comme vous vous en souvenez, nous avons mis des types de mode de paiement et il y a des éléments de ligne. Les éléments de ligne sont un tableau, qui ont un tableau spécifique d'objets. Et cet objet a des données Bryce, des devises et des données de produit, et cetera. Donc nous avons mis toutes ces informations, mais nous n'avons pas créé celle-ci. Donc, pour cela, nous devons construire ce tableau de cet objet où il a des données de prix, la monnaie, les données de produit, puis le montant unitaire. Si vous vous en souvenez, nous avons un article de ligne ou un article de commande qui n'a que l'ID de produit, et ensuite nous avons aussi la quantité. Donc, de cette façon, nous devons aussi créer cet objet de cette façon, c'est quelque chose comme le mappage. Encore une fois, nous allons lire la carte, l'autre élément pour avoir cette forme. Donc exactement comment nous avons fait avant avec l'affichage et plus vieux, si vous vous souvenez, nous avons lu les articles de commande, nous avons bouclé sur eux. Ensuite, nous avons obtenu le détail du produit après cela pour obtenir le prix de chaque produit et le nom de celui-ci, puis pour calculer le prix total. Mais ici, nous allons le faire à nouveau, mais à l'avant, comme par exemple, de manière différente. Donc, tout d'abord, je vais vérifier si je reçois vraiment un article de commande à partir du front end. Donc, s'il n'y a pas d'articles de commande à l'avant, puis envoyé directement et erreur, je dirai ici retourner une réponse et ensuite le statut que nous pouvons dire, et il sera 400. Et puis nous envoyons comme une erreur, par exemple, à l'utilisateur. session de récupération ne peut pas être créée, vérifiez les éléments de commande. Donc, nous pouvons, de cette façon avoir un message d'erreur dans la console pour nous. Après cela, nous allons vérifier s'il y a vraiment des articles de commande. Nous allons les parcourir et cartographier les éléments de ligne en fonction de ce que nous avons vu sur la documentation. Donc exactement comme nous l'avons fait avant avec les articles de commande que nous créions comme ou en boucle sur eux pour obtenir le détail du produit parce que nous avons besoin du détail du produit comme le nom. Et aussi nous avons le montant unitaire, qui est le prix. Donc, de cette façon, nous devons avoir un détail du produit. Et pour cela, si vous vous souvenez, nous étions en boucle mais en créant une promesse, tout ce que nous obtiendrons un tableau de produits ou articles de ligne qui sont passés par le numéro de commande ou les articles de commande. Donc, je vais aller ici et puis à nouveau boucle pour commander l'article. Donc, nous allons dire u, que les éléments de ligne auront, promettre que tout encore, si vous vous souvenez, J'ai expliqué toutes ces étapes. Donc promettez que tous géré pour moi les articles de commande où je peux retourner plusieurs articles de commande ou plusieurs produits en boucle sur les articles de commande. Donc, il dit toujours, ou leur point de carte. Et puis nous reviendrons ou façonnerons vraiment ce tableau. Qui a seulement l'ID du produit et la quantité à une autre forme qui aura la forme qui est définie dans notre tableau ou dans la documentation de Stripe. Donc, à la fin, nous aurons le retour de cet objet sous forme de tableau. Donc, tout d'abord, nous avons besoin d'une carte. Et si vous vous souvenez, parce que nous recevons les données de nos produits à partir de la base de données, nous devons mettre async, donc nous devons attendre parfois que chaque produit vienne et ensuite nous pouvons continuer notre boucle ou notre cartographie si j'ai plusieurs commander des articles. Donc, après cela, nous avons la feuille d'articles de commande ici devrait être commandé article comme un, parce que je suis en boucle maintenant un par un. Et je vais définir ici un produit. Et ce produit aura, contiendra les données du détail du produit où nous allons obtenir les articles de commande. Donc causé produit loin. Ensuite, nous utiliserons le modèle de produit si vous l'avez, comme si vous l'importez. Le modèle de produit doit donc être utilisé. Comme vous le voyez ici, nous n'avons pas de modèle de produit, nous devons l'importer. Donc, après les articles de commande, je vais avoir ici comme le coût, l'importation pour moi, le modèle de produit. Et puis nous dirons exiger des modèles où nous avons défini notre modèle de produit, si vous vous souvenez avant dans la session backend. Nous pouvons donc maintenant utiliser le modèle de produit. Donc, je vais dire ici point de produit, et puis nous dirons trouver par ID parce que nous allons obtenir la commande ou le produit par ID. Et puis ici, l'ID qui est passé vient de l'extrémité frontale ou d'autres éléments, point ID ou point produit. Si vous vous en souvenez, nous avons mappé le frontal pour dire que les autres articles contiennent le produit et aussi la quantité que le produit contiendra, l'ID du produit. Ok, le but du mappage maintenant de remodeler le tableau des éléments de commande à une autre forme que nous appellerons des éléments de ligne. Donc ici, je vais avoir un retour. Donc, je reviendrai et en forme de U, qui sera exactement celui-là. Pour que nous puissions le copier et revenir à notre code. Et nous disons retour pour moi objet, qui est appelé données de prix. La devise est le dollar et les données du produit. Le nom ne sera pas la chemise, mais il sera l'ID du produit ou le nom du produit. Si vous vous souvenez, nous avons appelé le produit et il a un champ appelé nom. Et aussi, le montant unitaire ici est de 2 000 ou c'est calculé par sens. Donc, vous devez avoir aussi ce sens, surprise. Donc, nous pouvons avoir ici prix point produit et multiplié par 100 parce que chaque $1 est $0.100. Et la quantité dans ce cas sera la quantité qui vient par l'article de la commande. Donc, je vais avoir ici l'article de commande, l'article, pas les articles et ici aussi l'article ou les articles pour éviter le problème. Donc, ici, nous aurons quelque chose qu'on appelle une quantité. Donc, après cela, nous pouvons passer des éléments de ligne de lois aussi à ces éléments de ligne parce que maintenant nous avons une nouvelle forme de ce tableau. Mais ici, vous devez vous rappeler toujours, je l'ai fait par des arcs achetés pour ne pas oublier, attendre, parce que attendre ici nous retournons une promesse. Donc, nous devons attendre jusqu'à ce que toute cette finition et nous allons obtenir les articles de ligne parce que ici nous avons un produit qui vient de la base de données et il a aussi un poids. Retournons à notre terminal pour voir si nous avons des problèmes. Comme vous le voyez ici, nous avons un problème. Il dit invalide, l'intializer de propriété de tête courte. Donc, nous avons ici un problème avec le nom. Donc, nous devons avoir ici pas égal mais deux-points, donc de cette façon, ok, Nous n'avons aucun problème et la connexion à la base de données est prête. Et nous pouvons maintenant appeler cette API, qui est appelée crée une session de check-out pour obtenir la session de check-out à partir du back-end. 185. Créer un service de session de vérification de Frontend: Revenons maintenant à l'avant et à l'avant où nous traitons nos commandes. Nous allons donc passer une commande et être redirigé vers un paiement payé, comme nous l'avons expliqué dans le schéma précédent. Donc, tout d'abord, nous devons créer un service qui demande le jeton de session de check-out. Donc, pour cela, nous ne passerons pas de commande lorsque je clique sur Passer commande. Mais je vais appeler un service où il me redonnera l'ID de session afin que je puisse vraiment diriger l'utilisateur vers le paiement en premier. Et puis en fonction du paiement, s'il s'agit d'un succès ou non, j'ai créé la commande en fonction du statut si elle se plie ou si elle a échoué. Donc, tout d'abord, si nous allons à nouveau à nos bibliothèques, nous avions créé un ordre est bibliothèque. Et dans la bibliothèque des commandes nous avons un service et nous avons service spécial pour les cartes et nous avons aussi pour les commandes. Donc, dans le service de commande, je vais créer un service où il lira également me diriger vers la page de paiement après avoir obtenu l'ID de session. Pour ce faire, nous pouvons faire un Create. Par exemple, nous pouvons donner un nouveau nom de méthode. Nous pouvons appeler ça un chèque en créant une session de sortie. Et de cette façon, la séance de check-out demandera des articles de commande. Commandez des articles, parce que nous avons besoin de les envoyer au backend, comme nous l'avons vu avant de calculer que tout le prix et aussi le détail de la chaussée. Donc, nous avons ici ou le tableau d'éléments, il serait envoyé au service, puis il retournera une requête HTTP, exactement comme nous l'avons fait auparavant avec les autres services, comme vous le voyez ici en haut. Et la demande sera postérieure demande. Donc, nous allons poster une demande de données. Et où avons-nous la même URL que nous avons basée avant des commandes. Et puis un chemin que nous avons spécifié précédemment, comme créer une session de check-out de l'API. Donc, nous avons ici créer session de vérification. C' est notre API, comment nous avons défini à l'arrière et avant. Et les données d'envoi avec la demande de poste seront les articles de commande que nous avons passés dans la fonction. Donc, nous pouvons avoir ici ou les éléments que nous les analysons ici. Donc, sauvegardons et voyons si cette flèche est, crée vraiment pour moi l'ID de session et nous n'avons aucun problème dans le back-end. Essayons de tester ça. Je vais d'abord voir si nous avons des erreurs. Parfois, vous avez comme le modèle d'article de commande être importé comme un chemin relatif. Mais, ou par exemple, le chemin le plus ancien, comme nous l'avons vu avec n'importe quel x. mais il vaut mieux si nous sommes dans la même bibliothèque pour utiliser un chemin relatif est. Donc, j'utilise ici, je vais le changer pour être comme ce modèle et l'article de commande. Comme j'arrive à l'élément de commande de fichier utilisé le bus relatif. Maintenant, je veux, quand je clique sur le bouton Passer la commande, je vais obtenir un ID de session. Nous pouvons l'utiliser comme pour le mettre dans le journal de la console pour l'instant. Donc, ce sera le travail dans la page de paiement, le composant de page de paiement où je crée ou passe la commande. Donc placer la fonction d'ordre, qui sera exécutée lorsque je clique sur ce bouton comme nous l'avons vu avant, ce que nous avons créé. Alors maintenant, je vais avoir passé la commande. Et puis passer la commande ne créera pas une commande, mais il appellera le service, qui est Créer une session de retrait. Donc, au lieu de cela, nous pouvons commenter cela pour l'instant. Juste pour l'instant, et nous y retournerons quand nous en aurons besoin. Donc, je dirais année ce service de commande et puis je serais créé session et nous allons passer les articles de commande. Donc, nous pouvons dire ici, ceci les articles de commande parce que nous les avons collectés à partir du stockage local comme vous le voyez ici avant. Donc maintenant, après cela, je crée le stockage local ou la, désolé, la session de blague ou l'appel de ce service. Je vais avoir une session et nous pouvons l'imprimer dans le journal. Donc, je vais dire ici, la console se connecte directement et nous allons vérifier ou imprimer cette session. Alors sauvegardons cela et revenons à notre application. Et puis nous ouvrirons la console. Alors maintenant, je vais essayer de passer une commande. Alors disons OK, passez commande. Je n'ai rien dans la console. Alors vérifions l'onglet Réseau où nous envoyons des demandes de notre application. Donc, comme vous le voyez ici, il y a une demande d'envoi, mais il n'a pas de contenu. Donc, il est revenu sans aucun contenu. Donc c'est sûr. Nous avons, par exemple, que dans le backend, une erreur. Vérifions à nouveau notre code back-end. Donc, je vais aller ici et vérifier le backend. Nous verrons cette console du backend que nous avons une erreur, comme je vous l'ai dit, il dit une année qui reçoivent l'URL d'annulation de paramètre inconnu. J' ai donc une faute de frappe. C' est pour ça que je veux que tu sois sûr d'avoir les fautes de frappe, non ? Donc, il ne sera pas, n'a pas de fautes de frappe dans leur code. Donc ici, je dois mettre, pas annuler comme ça. Je dois le dire comme ça. Nous économisons à nouveau. Nous vérifions si notre application est en cours d'exécution. Donc, il redémarre en raison de changements. OK, la connexion à la base de données est prête. Alors maintenant, je vais essayer de passer une commande à nouveau. Donc, actualisons, puis supprimez toute la console. Et encore une fois mettre l'onglet Console et puis nous le plaçons. Ok, nous avons une demande et si nous vérifions l'aperçu, gentil, j'ai l'ID de session. Donc, comme vous le voyez ici, j'obtiens un ID, qui est un ID de session que j'ai envoyé à partir du backend. Et nous avons maintenant l'ID de session. Maintenant, nous devons rediriger l'utilisateur vers la page de paiement. Pour ce faire, nous avons plusieurs façons de le faire. abord, nous devons utiliser un service Stripe, quelque chose appelé service Stripe. Donc, tout d'abord, nous devons aller chez le constructeur ici et importer le service de bande de Stripe. Donc, je vais dire ici service de bande privée. Et puis il s'appellera le service Stripe. Et ce service de bande sera importé de nx dry. Parce que si vous vous souvenez, nous avons installé la bibliothèque nx stripe. Donc je vais l'utiliser ici. Donc, je vais dire Importer puis le service Stripe, exactement comment je l'ai ici tapé. Et puis à partir de nous l'appelons la bibliothèque, qui s'appelle SGX stripe, que nous avons installé auparavant. Ok, maintenant nous pouvons utiliser le service Stripes, ok, donc après avoir obtenu la session ou l'ID de session, alors je peux utiliser ce jeton ou cet ID de session pour rediriger l'utilisateur vers la page de paiement. Donc simplement, je dois faire ici ce service de bande, puis lire directement pour vérifier. Ensuite, je dois utiliser un ID de session d'objet, comme ceci est l'ID de session. C' est déjà défini comme vous l'avez vu ici. Et cet ID de session viendra de cette session que j'ai créée. Et j'ai eu à l'intérieur un ID, parce que si vous vous souvenez, nous avons un objet et un ID à l'intérieur. Donc je l'ai exactement de la même façon. ID de point de session. Si vous obtenez une erreur ici, c'est à cause des Taipings. donc préférable de toujours affiner ou définir vos typages en fonction de ce que vous utilisez ? Par exemple, créer une page de paiement, si vous vous en souvenez, nous l'avons utilisée pour renvoyer certaines données. Et ces données, nous pouvons dire qu'il va revenir pour moi taper tout. Donc, je peux dire ici, la demande de poste aura une session et cette session aura taper tout. Donc, nous pouvons le mettre aussi bien, comme observable ici parce qu'il va revenir pour moi observable de type any. Donc, de cette façon, je n'aurai pas cette erreur où elle ne revient pas parce que cette session est inconnue pour moi. Ou vous pouvez le taper. Donc, vous pouvez dire que j'ai besoin d'avoir comme le type de retour sera ID, qui aura la chaîne de type. Donc, de cette façon, si vous allez à nouveau ici, vous verrez que l'erreur est apparue et vous avez un défini parce que vous avez l'ID déjà défini. Et aussi ici, vous devez résoudre un problème, qui est le type attendu, qui est retourné par la requête. Donc, je dirai année, le type de retour sera objet, qui a ID et la chaîne, car ici j'ai ID et une chaîne. Donc, ces scripts de frappe, ils sont dans ou comme, par exemple, trucs, vous devez les faire en utilisant TypeScript. Donc, vous devez vous assurer toujours que vous avez une saisie valide. Vous n'avez aucune erreur ou erreur de frappe entre les fonctions et les services. Donc, après cela, nous devons nous abonner à cette redirection pour vérifier. Donc, je dois dire ici, abonnez-vous aussi, et puis je dois trouver UC comme vous le voyez. Il retourne pour moi l'erreur de bande, cette erreur. Je vais m'abonner et vérifier si je reçois une erreur lorsque l'utilisateur n'est pas en mesure de payer ou s'il n'est pas en mesure d'atteindre la page de paiement en raison, par exemple, d'une erreur de connexion Internet ou de réseau. Mais comme vous le voyez ici, il est très mauvais d'avoir S'abonner à l'intérieur d'abonner, comme imbriquer s'abonner en général. Notre x js et aussi dans Angular est très mauvais comportement, donc nous pouvons faire une autre façon que nous pouvons appeler ces services après avoir renvoyé un type spécifique de cette session de check-out de création, comme nous changeons la sortie de cette session et alors, nous pouvons l'utiliser de nouveau d'une manière différente. Donc je vais ici au service de commande. Je vais bien avoir tout ce retour. J' ai une demande de poste HTTP. Supprimons ces dactylographies pour l'instant qu'il a tourné des pics de matrice. On n'en a pas besoin. Comme je vous l'ai expliqué, nous devons directement aller et changer le type de retour de ce post. Tu sais, ça me revient la session et l'ID à l'intérieur. Mais maintenant, je veux faire quelque chose avant de m'y abonner, comment nous pouvons le faire. Donc, si vous savez qu'il y a quelque chose appelé pipe, et ce tuyau est comme un tuyau où vous changez les données de retour d'un observable ou d'un service. Ainsi, par exemple, nous avons renvoyé ici une session et session.Get IID. Mais non, je veux faire autre chose avant de retourner cet ID de session, bien sûr, en utilisant cet ID de session. Donc, je vais aller ici et pipe. Je dirais, ok, changer pour moi la valeur de retour en quelque sorte ou avant un usinage à l'utilisateur ou à l'abonné, le changer et ensuite l'envoyer à l'abonné. Donc je dirais ici quelque chose appelé une carte de commutation. Et cette carte de commutation, ça veut dire que je vais changer ça, que ça ressemble, qui reviennent à une autre forme. C' est exactement comme la carte. Nous faisons avec le tableau, comme nous avons un tableau. Nous mappons dessus pour changer ce tableau d'une manière ou d' une autre entrée de données pour changer la, la forme de celui-ci. Donc, cette carte de commutation est importée de notre xjs. Vous devez donc vous assurer que vous avez cette carte de commutation importée de notre x j en tant qu'opérateurs, comme vous le voyez ici. Alors maintenant, je vais changer ça. Comme la sortie de l'abonnement, comme j'ai obtenu l'ID de session. Donc, je m'attends à obtenir l'ID de session ici. Donc, je vais avoir ici session. Et le type de session. C' est exactement le même type que nous avons défini auparavant. Donc pas observable, mais il aura l'ID de type et une chaîne. Donc, nous devons supprimer ça. Et puis dites ici que j'ai cette séance. Il contiendra id qui a la chaîne de type. Donc, ce sera une fonction de rappel est en train de changer l'émission de cet observable ou de cet abonnement. Donc, pour cela, nous aurons à nouveau un retour, comme le retour pour cette fonction, une autre forme de la session. Donc, nous aurons ici retourner ce service de rayure de points. Donc, ici, nous allons appeler le service stripe pas dans le composant. Donc, je vais supprimer tout cela et nous allons l'appeler ou l'utiliser ici. Donc, dans le service, donc nous ne allons pas l'utiliser dans le composant lui-même. Donc, copions ou OBTENONS cette partie et allons au constructeur du service. Et je dirai ici que, d'accord, j'ai besoin d'appeler le service de stripe. Et aussi, vous pouvez utiliser l'importation automatique directement en appuyant sur le point de contrôle et vous aurez nx stripe important. Et maintenant, nous allons dire que ce service de bande de points, puis lire directement pour vérifier en utilisant l'ID de session qui est retourné à partir du tuyau. Donc, je vais dire ici, directement pour vérifier, et puis j'ouvrirai un objet et me dire que ID de session est la session qui est retourné l'ID de point. Pourquoi je reçois ici l'ID de point parce que je définit le type attendu revenant de ce service, qui est créé sur la session. Donc, j'ai ici le type attendu ici. Donc, si vous vérifiez cette méthode, elle renvoie observable d'erreur. Donc, de cette façon, je ne retourne pas l'ID de session, je retourne et je change le comportement de cette requête de post à un autre observable. Donc ici, je vais avoir observable d'erreur. Donc, comme vous le voyez, il est automatiquement modifié. Il a le type de retour erreur observable, erreur de bande. Donc maintenant, je suis capable d'utiliser cette méthode. Et ici automatiquement, il me redirigera vers une page de paiement en utilisant l'ID de session, qui est retourné à partir du back-end. Donc maintenant, je vais aller ici et je vais dire directement abonner à ce service créer page de paiement. Et cet abonnement ne reviendra pour moi que l'erreur. Donc, je vais l'utiliser juste pour savoir si l'utilisateur a un problème avec la connexion ou non. Donc, je vais dire ici, si. Il y a une erreur. Ensuite, nous pouvons dire comme erreur de journal console dans la redirection vers le paiement. Donc juste comme ça, on peut l'avoir de cette façon. Et ici, nous avons quelques problèmes, donc nous avons juste besoin de supprimer tous ces problèmes. Donc nous l'avons maintenant, n'est-ce pas ? Donc, le service crée une session de check-out. Je me suis abonné et puis je serai redirigé vers cette page. Et ici, dans le service, c'est déjà fait de cette façon. Essayons ça et voyons si notre service fonctionne bien et nous avons une redirection. Donc, je vais aller à nouveau au panier et ensuite je vais aller voir que j'ai une erreur. Cela dit, le service de commande de service, pas de fournisseur pour le service Stripe. Nous devons donc fournir le service de bande. Mais avant cela, nous devons dire quelque chose dans la configuration pour ce service. Parce que si nous allons à la documentation de MDX bande et voir une étape qui est appelée installation. Il y a quelque chose suivant qui est appelé application d'installation. Et l'application sit up vous oblige à importer NGINX bande Module 4 racine et vous mettez la clé publiable, donc pas la clé secrète de Stripe, mais vous devez mettre la clé publiable. Nous devons donc importer cette partie. Nous avons donc besoin d'importer le module de bande NX. Donc, où dans le niveau de l'application. Donc, j'ai ici et vous magasinez, je vais aller au module de l'application. Et puis ici, dans les importations du module, je vais importer mon module qui est appelé module de bande MDX de bande NC. Et puis je vais utiliser le module MDX stripe et dire pour root. Et dans les quatre itinéraires, on vous demande d'avoir une clé publiable. Ainsi, vous devez utiliser la clé publiable de vos données. Donc, comme vous le voyez ici, nous avons la clé publiable et la clé secrète. Donc, je vais cliquer dessus pour être copié, puis je vais mettre ma clé publiable comme une chaîne ici. Donc, sauvegardons et puis voyons notre application si elle a toujours l'erreur. Alors, je vais à nouveau voir le garde. Comme vous le voyez, nous n'avons plus l'erreur car module MDX Stripe a déjà fourni le service pour nous, donc nous n'avons pas besoin de le fournir manuellement. Cela signifie que nous pouvons être en mesure d'utiliser tel ou tel service, appelé service Stripe et directement dans n'importe quel module de notre application. Alors maintenant, je vais cliquer sur vérifier et puis passer commande. Et vous verrez que nous avons trois dirigé vers une autre page qui aura le paiement. Et comme vous le voyez ici, j'ai les prix qui sont retournés à partir des articles que j'ai construits avant, si vous vous souvenez dans le back-end parce que j'envoie les articles de commande au backend. Et de cette façon, je serai en mesure de mettre mes données de carte et d'effectuer un paiement. Essayons ça. Donc, en acceptant un paiement, vous devez utiliser des données de test. Donc, dans la documentation de Stripe, c'est un paiement et il y a un exemple que j'ai montré que vous avez appelé accepte un paiement. Et ici, il y a un gardien où notre faux comme vous peut juste les utiliser et ensuite vous pouvez placer un paiement. Donc, par exemple, je vais utiliser celui-ci. Alors on va à nouveau au magasin. Je placerais mon e-mail ici et aussi je vais mettre comme le numéro de la carte ou vous pouvez mettre n'importe quelle date ici. Je mettrai donc ici cinq, vingt un, vingt un, dire 25, et un certain nombre et aussi un nom. Nous pouvons juste mettre n'importe quel nom et puis faire glisser Pays du paiement et ensuite vous pouvez payer. Et après cela, si vous remarquez qu'après le paiement réussi, vous allez être redirigé vers une page réussie. Mais si nous allons à notre application d'administration, nous n'avons pas de commande passée. Nous ne pouvons donc pas suivre les commandes où nous les avons passées à partir du back-end car si vous vous en souvenez, nous avons annulé le placement du service de commande ici. Dans la prochaine conférence, nous verrons comment nous allons passer de l'ordre. Nous avons réussi le paiement et l'envoyons au back-end et l'enregistrons dans la base de données. Mais après, avant cela, désolé, je dois vous montrer comment vous pouvez voir les paiements directement dans votre tableau de bord dans la bande. Donc, comme vous le voyez ici, j'ai ici un paiement que j'ai fait en utilisant cette clé de description et aussi cet e-mail. Et vous pouvez également cliquer dessus et voir plus de détails à partir de quel endroit et aussi quels sont les articles de ce produit et tout ce qui est passé au backend, comment nous l'avons créé avec succès. 186. Placer des ordres après le paiement réussi: Donc, dans la conférence précédente, nous avons vu que nous étions en mesure de gérer le paiement et également mettre nos données de carte et appuyez sur Bay. Et puis nous avons obtenu trois dirigés vers une page de remerciement, que nous avons créée dans notre application. Mais il nous manque la partie qui crée l'ordre. Donc, nous ne créons pas l'ordre réellement dans la base de données. Donc, quand je vais à l'application Admin et aller aux commandes, bien sûr, je tiens à vous rappeler que vous devez aussi ajouter le module d'application de l'administrateur pour ajouter le module de bande MDX. Parce que peut-être vous aurez besoin aussi bien de gérer certains paiements dans le panneau d'administration. Et aussi l'application ne fonctionnera pas parce que nous avons utilisé le service de bande dans le service de commande et l'application ne fonctionnera pas sans elle. Je veux dire, l'application Admin. Maintenant, nous avons toutes ces informations. Comme vous le voyez, je ne passe aucune commande. Je n'ai pas passé ma commande après avoir effectué le paiement. Donc, pour cela, nous devons également placer la commande dans la base de données. Où dans la page de remerciement. Je veux dire, après un paiement vraiment réussi, pas quand je clique ici sur Passer commande. Lorsque je passe la commande, je paie et retourne à la page de remerciement dans la page de remerciement, je vais faire créer la commande. Donc, en revenant à la page de retrait, si vous vous souvenez, nous avons créé un objet de commande. Et ces objets ordonnés, nous contenons les informations sur l'utilisateur ou sur l'entrée ou l'utilisateur, ou à peu près les mêmes informations qui proviennent de l'utilisateur qui saisit les informations dans le formulaire. Donc, pour cela, nous devons utiliser le service de commande, mais nous ne sommes pas ici mais dans la page de remerciement. J' irai donc à la page de remerciement. Je créerais à nouveau l'ordre et le placerais ici. Donc, dans la page de remerciement, nous n'avons pas cette information. Nous n'avons pas une fois que nous sommes redirigés vers la page de paiement, qui est directement en dehors de notre application et revenir à la page de remerciement. Nous utiliserons les données commandées. Je veux dire, ces informations, on va les perdre. Donc, nous avons besoin de les encaisser. Par exemple, dans notre application, nous pouvons dire que le moyen le plus simple est le stockage local. Je peux mettre en cache toutes ces informations dans le stockage local de mon application, puis je peux les utiliser à nouveau dans la page de remerciement pour passer la commande. Donc, pour ça, je vais créer deux services. Le premier service est appelé ordre de caisse. Par exemple, dans notre application, qui sera situé dans leurs services et service de commande. Donc, je dirai ici, après avoir créé le jeton de paiement, je créerais un service qui est appelé ordre de caisse ou par exemple, les données de commande en espèces. Donc, de cette façon, je passerai l'ordre qui est mort ou là aussi. Et cette diode utilisera le stockage local, ou ce service utilisera le stockage local pour mettre en cache les données de commande. Donc, je vais dire ici simplement l'élément de l'ensemble de points de stockage local. Et nous donnerons un nom à cet article comme les données commandées. Et ces données de commande seront transmis l'ordre lui-même ou l'objet qui sera transmis à partir de l'extrémité frontale ou à partir du composant de la page de paiement. Mais ici, nous avons besoin comme une chaîne. Donc, nous ne pouvons pas dire JSON dot stringify, comme nous l'ajouterions comme une chaîne et nous dirons, ok, stringify cet ordre. Ok, Donc, après avoir mis en cache les données commandées, afin que nous puissions ensuite les récupérer dans la page de remerciement du stockage local et les utiliser pour créer la commande. Alors je vais y aller. Après avoir passé la commande, lorsque l'utilisateur clique sur le bouton, commande, je collecte toutes les informations de commande. Et puis j'utiliserai ce point Order Service coffre-fort ou les données, et je passerai cette commande. Donc, de cette façon, je le mets en cache dans le stockage local. Donc nous n'avons pas besoin de ce service maintenant. On en a besoin dans la page de remerciement. Je veux dire, la création de l'ordre, l'ordre réel sera fait. Le merci. Page. Alors allons à nouveau et a obtenu cette partie ou supprimer totalement et revenons à notre page de remerciement. Donc, tout va bien jusqu'à maintenant, mais la création de la session de check-out devrait être faite après avoir recueilli les informations et encaissé les données de la commande. Sinon, je serai redirigé vers la page de paiement et je perdrai les données de commande. Il est donc préférable de déplacer cette pièce pour être à la fin après avoir mis en cache les données de commande. Donc, nous allons nous assurer que nous avons vraiment les informations sont mises en cache. J' ai donc besoin de sauver le service. Donc tout fonctionne bien. Joli. Alors passons la commande et vérifions notre application et le stockage local. Stockage de session, je prendrais le stockage local. Donc, dans le stockage local, nous avons le panier et aussi nous avons le jeton. Donc, quand je place ou quand j'appuie sur commande place, je dois aussi avoir le nous pouvons dire les données commandées. Ok, je vais cliquer dessus. Je l'ai commandé comme vous le voyez, mais maintenant je l'ai perdu totalement parce que j'étais vraiment dirigé vers un autre domaine, qui est appelé checkout strive.com. Alors maintenant, je vais mettre mes informations et le garde et ensuite je vais passer l'ordre. Alors maintenant, je vais être redirigé vers une page de remerciement. Alors là, merci. Page me redirigera vers l'application où j'ai localhost 4200 port. Donc, lorsque je clique sur OK, appuyez sur. Donc ici, à ce moment, je dois passer la commande, donc localhost 4200, et ensuite j'aurai exactement les données de commande dont j' ai besoin pour pouvoir les récupérer dans la page de remerciement et passer ma commande. C' est ce que nous verrons dans la prochaine conférence. 187. Placer la commande en page remerciée: Donc, en revenant au composant de la page de remerciement, nous verrons que nous avons un composant vide. Il a seulement comme Merci pour le shopping avec nous. Nous avons reçu votre commande, mais avant d'afficher ces informations, nous devons passer la commande. Donc, tout d'abord, nous avons, si vous vous souvenez, nous supprimons le placement du service de commande d'ici. Donc, nous mettons juste en cache les données de commande. Donc, nous devons faire un autre service qui n'est pas la mise en cache ou les données, mais obtenir les données de commande. Donc, nous pouvons avoir un autre service que nous pouvons appeler comme par exemple, récupérer ou obtenir ou le, ou obtenir des données de commande mises en cache. Se faire asperger. Aimer à ne pas avoir de confusion entre bon ordre et obtenir comme ordre qui est dans le stockage local. Donc, je vais dire ici, il suffit d'obtenir l'article et cet article obtenir, je ne vais pas seulement l'utiliser comme ceci, donc nous pouvons avoir seulement la clé get élément nous demande seulement la clé qui est ordonnée données. Et ce service devrait me retourner un ordre. Donc, je dirais ici, le type de retour est l'ordre. Donc, de cette façon, nous avons besoin d'avoir aussi un type de retour qui est commandé. Donc nous devons mettre ici retour. Mais ceux-ci get item est de retour pour nous en tant que chaîne. Donc, de cette façon, nous devons faire JSON.Parse. Donc, nous analysons de la chaîne à l'objet adjacent ou deux qui aura notre ordre. Donc, après cela, nous recevons le JSON.Parse comme ordre et nous obtenons cet ordre. Bien sûr, cette méthode n'a besoin d'aucun paramètre, donc nous utilisons simplement l'ordre GetCacheDir, ordre de retour du stockage local après l'avoir analysé. Revenons donc à notre page de remerciement, les composants. Alors fermons tout ça. On n'en a pas besoin. Ok, on sauve celui-là. Rendez-vous à notre page de remerciement. Nous devons à nouveau mettre en œuvre sur G sur dedans. Donc mettre en œuvre dedans. Et puis nous devons faire appel à elle et g sur n'importe quelle méthode. Et en Inde sur la méthode init, je vais récupérer les données de commande en utilisant le service, si privé ou le service. Et puis nous appelons le service de commandes ou désolé, pas le module de commande ou le service et le service de commande viendra du service que nous avons créé ici. Donc, nous devons supprimer cela comme chemin alias. Encore une fois, je ne sais pas pourquoi je l'ai comme ça, mais vous pouvez toujours le réparer manuellement. J' aurais des services électroniques, puis un service de commande. Donc, dans les ONG, je vais utiliser ou appeler ce service. Donc, je dirais ici, constant, nous pouvons dire ordre que. Et cet ordre qui sera égal à ce point ou à leur point de service obtient des données ordonnées écrasées. Donc, nous avons des données ordonnées GetCacheDir ici. Donc, faisons un journal de console des données commandées pour être sûr que nous obtenons vraiment les bonnes données de la commande et de la commande mise en cache et répétez notre mode de paiement. Donc, je vais revenir à notre demande, aller à nouveau à la carte, vérifier. Ensuite, je passerai la commande et je serai redirigé vers le paiement. Je mettrai mes données de paiement. Et vérifions si nous avons vraiment les données de commande. Donc nous les avons parce que nous ne pouvons pas les voir, nous il va maintenant nous ajoutons une autre page. Donc je vais payer maintenant et je serai redirigé vers une page de remerciement maintenant. Donc d'accord. On en a trois. Nous avons les données de commande dans le stockage local, et nous avons aussi l'article de commande. Donc, de cette façon, j'ai les données commandées dans la page de remerciement. J' ai toutes mes informations, mon adresse et toutes ces informations qui sont mises en cache et envoyées à partir du composant page de récupération. Maintenant, nous sommes en mesure de passer la commande. Donc, nous pouvons dire ici directement, ce service de commande cependant, créer l'ordre. Et cet ordre de création demandera des données de commande parce que nous passons une commande à ces données et ensuite nous abonnons. Et puis je peux obtenir les résultats comme notification ou quelque chose comme à afficher pour l'utilisateur. On n'en a pas besoin. Dans ce cas, nous devons le faire derrière la scène parce qu'il a déjà reçu cette notification qu'il a ordonné de placer la boue avec succès sur le succès. Nous devons avoir une chose qui est de supprimer les articles du panier, comme l'initialiser à nouveau, si vous vous souvenez, nous l'avons fait avant et aussi, nous pouvons, par exemple, faire une redirection vers la page d'accueil après cinq secondes. Mais nous pouvons avoir, redonnez cela au bouton show où l'utilisateur peut retourner à la boutique à nouveau. Donc, après m'être abonné, j'aurai une méthode de succès comme un rappel, puis j'utiliserai un service de carte à nouveau ici, si vous vous souvenez, nous devons utiliser le service de carte. Donc le service de garde. Et puis le service de garde encore ici. Donc, nous avons besoin comme week-end appeler directement en tant que service, mais pas de alias, mais d'un chemin relatif pour ne pas avoir le problème à nouveau. Donc ici, j'ai le service de cartes, et je dirais ici, après cet axe, ces points de service de garde de points vident leur panier. On n'a plus besoin de la voiture pour être pleine. Alors revenons en arrière, essayez notre application. Ok, maintenant on a des cartes vides parce que j'ai rafraîchi la page de remerciement. Alors placons maintenant l'auteur. Donc, je vais supprimer, je vais fermer la console pour l'avoir plus clair à voir. Je vais placer ou ajouter au panier cet article et aussi cet article. Alors maintenant, nous allons à la voiture 2. Nous avons deux articles et je vais maintenant faire un chèque. Donc, mon prix total est de 2200$. Et j'ai ces informations dans ma commande. Et maintenant, je vais cliquer sur passer la commande. Je serai redirigé vers la page de paiement. Je vais mettre à nouveau en formation du paiement. Comme je vous l'ai dit, vous pouvez aussi bien utiliser d'autres types de cartes. Donc, comme vous le voyez ici dans la documentation, il y a des gardes qui est toujours le paiement réussi, comme un test. Ceci est sécurisé en 3D. L' authentification doit l'effectuer pour un paiement réussi. Et il y a aussi cela toujours échouer. Donc, il dit que les fonds sont insuffisants. Et de cette façon, vous pouvez utiliser cette garde pour tester votre boutique de manière plus ou inefficace. Nous avons donc ces maintenant celui qui est appelé test, qui a toujours réussi. Et il est détecté comme une carte Visa que je vais passer ma commande 2200€. J' ai deux articles, comme vous le voyez ici. Toute cette corruption vient exactement comme nous l'avons mis en œuvre avant. Donc je remplace PE. Maintenant, je vais être redirigé vers la boutique. D' accord. La voiture qui est mis à jour parce qu'il a obtenu mt revenir à nouveau au panneau d'administration pour voir si ma commande a été passée. Donc nous devons faire pour rafraîchir à nouveau. Comme vous le voyez, nous avons ma commande. J' ai passé ma commande. Je peux le voir et voir toutes les données de cet ordre comme vous le voyez ici. Donc, nous sommes passés avec succès la commande de la bonne manière afin que je puisse ensuite le changer à livré ou échoué ou la flexion dépend l'état de ma boutique et de l'administration de mon e-shop. En outre, après le succès de passer une commande, Il est préférable de supprimer l'ordre mis en cache, qui est dans le stockage local du stockage local. Jusqu' à présent, nous pouvons également supprimer ces données de commande parce que nous n'en avons plus besoin. Donc, ce n'est pas agréable d'avoir les données commandées toujours dans mon stockage local. Donc, tout d'abord, nous pouvons créer un autre service qui est appelé Créer ou supprimer les données ordonnées mises en cache. Donc j'irais au service de commande. Ce sera quelque chose comme supprimer, mis en cache ou les données. Et de cette façon, il ne retournera rien parce qu'il est vide. Nous allons juste dire stockage local, point remove article, et nous devons spécifier le nom de l'article. Le nom de l'article dans notre cas était l'ordre que. Donc maintenant, je peux appeler cette méthode qui est appelée supprimer ordre mis en cache dans le succès après le placement de la commande, et supprimer l'élément de commande des données commandées. Donc, nous pouvons avoir ici ce point, comme par exemple, point de service de commande de voiture, supprimer le cache ou les données ainsi. Donc, de cette façon, je supprime vide le garde et supprime également les données de commande mises en cache. Mais maintenant, nous avons un bug très, très dangereux. Que faire si une personne comme était capable d'aller à la page des sexes ? Donc, par exemple, je peux faire comme ceci dans l'URL. Je peux aller à l'appât de succès, d'accord. Mais je n'ai aucune commande et je passe des commandes vides à mon, il passe des commandes vides dans ma base de données. C' est donc un problème très dangereux. De cette façon, nous devons le réparer. Ainsi, un problème de sécurité peut être résolu en obtenant l'ID de session que nous avons créé pour le paiement. Et assurez-vous que vraiment l'utilisateur a fait un paiement quand il est arrivé à cette page et valider leur paiement et dire, ok, vous êtes maintenant en mesure de passer la commande à la base de données. Donc, nous n'autorisons aucun placement de l'appel de commande tant que nous n'avons pas obtenu les informations réussies de l'utilisateur qu'il a réellement payé et qu'il a vraiment un ID de session pour passer la commande. C' est ce que nous allons voir dans la prochaine conférence. 188. Projet de lignage avec NX Lint: Très bien, dans cette conférence, nous allons faire le pelage de notre projet. Si vous vous souvenez, j'ai toujours quelques erreurs dans mon code que j'ai, comme elles sont parfois mentionnées en rouge, et parfois nous avons quelques avertissements comme quand elles sont mentionnées en jaune. J' ai donc gardé ces erreurs parce que je veux vous montrer comment nous pouvons les réparer pour tout le projet. Nous avons donc quelques commentaires qui sont fournis par NX, ce qui nous aidera à faire le linting pour notre projet ou pour notre propre espace de travail ici. C' est pourquoi, pendant le cours que vous voyez parfois, j' ignore ces erreurs parce que je veux vous montrer comment trouver et corriger toutes ces erreurs quand nous allons faire le pelage. C' est pourquoi nous avons dans chaque projet quelque chose appelé ES peluches. Donc, la configuration ES charpie, qui sont mentionnés ici, ce sont des règles que nous avons pour tout le projet ou le dépôt pour résoudre pour nous les problèmes qui peuvent être en TypeScript ou en HTML, ou en JavaScript, ou en les fichiers JSON. Donc, de cette façon, nous avons assuré que nous sommes livrés en production le bon projet sans aucun problème ni aucune erreur. Si nous allons au fichier JSON du paquet, qui est ici, nous voyons que nous avons déjà des scripts et ces scripts nous pouvons les exécuter pour faire quelques fonctions. Je vais commencer par le Linde. Linde est ce dont nous avons besoin pour le moment, nous devons comprendre ce que les erreurs et les erreurs que nous avons faites dans notre code basé sur les règles et les correctifs orientés ES. Donc, pour ce faire, on peut juste aller à la console. Nous pouvons aller à un nouveau terminal comme par exemple, nous pouvons fermer tout cela. Nous avons, par exemple, oui, ce terminal par exemple. Donc, nous avons maintenant nous pouvons dire propre ou clair. Donc, il va effacer l'interface pour moi. Donc j'ai ici que puis Manille. Je vais exécuter la commande qui s'appelle MPM run lint dans mon projet. Donc, comme vous le voyez, j'ai la longueur d'exécution de NPM, donc je vais exécuter cette commande, donc elle sera retournée dans la longueur de l'espace de travail x. Donc, ce commentaire est en fait une commande annexe qui sera exécutée à côté du NG Lint, qui est également pour allonger le code. Alors exécutons cette commande et voyons quelles erreurs nous aurons ici. Donc, il est en cours d'exécution maintenant. Maintenant prêt dans la boutique, il se terminera par projet par projet comme par exemple, nous avons deux applications, admin et tout pointu, et il a aussi des bibliothèques. Donc tous d'entre eux, Ils sont des projets. D' accord ? Donc, nous avons ici, par exemple, première erreur, qui est de dire que la page d'accueil, méthode de cycle de vie du constructeur vide inattendue ne devrait pas être vide. Méthode vide inattendue en Juin en elle. Donc, pour y aller directement, vous pouvez simplement dire cmd et cliquer avec une souris. Ou vous pouvez contrôler et cliquer sur la souris en suivant ceux-ci. Alors on y va. Ok, ça nous a amenés directement à ce composant. Comme vous le voyez, c'est la règle dans Eastland que je ne peux pas avoir de fonctions vides, il est donc préférable de les supprimer. Je n'ai pas aussi besoin du constructeur. Ainsi, nous pouvons également supprimer la mise en œuvre de l'énergie sur dans elle. Et aussi nous supprimons cette bibliothèque. Donc maintenant, nous avons un composant propre sans aucun problème ici. Alors vérifions aussi bien les autres erreurs. Nous avons donc terminé cette page d'accueil. Nous avons ici aussi erreur. Donc, ce qu'il dit, cette électrode devrait être préfixée avec un des préfixes, des bits bleus. Donc, si vous vous souvenez, dans l'application, nous avons créé ceci avec n'importe quel magasin. Donc, le sélecteur devrait être des bits bleus. Maintenant, nous voulons le garder avec NDI shop parce que nous sommes dans l'application boutique MD. Nous devons donc aller à la configuration orientée ETS, pas celle qui est globale, mais celle qui est à l'intérieur du projet. Nous avons donc un global qui sera appliqué à tout l' espace de travail ou à leurs référentiels ou aux bibliothèques et applications. Et nous avons aussi à l'intérieur de chaque application, nous avons quelque chose de spécifique pour ES peluches, qui remplacent d'abord celui que nous avons étendu, puis nous faisons et ajustons les heures. Donc, ici, nous avons dans l'application initiale, nous avons cet attribut net devrait être préfixé avec un bits bleu. Maintenant, nous voulons le préfixer avec un magasin d'énergie. Donc, dans ce cas, nous n'aurons plus cette erreur. Donc, quand on va au pied de page, on doit vérifier ça. Ok, nous avons encore une erreur avec un constructeur et g sur n'importe quel 20 pour les supprimer. Il est donc préférable de garder nos composants propres sans aucun problème. Donc, comme vous le voyez ici, nous avons également une erreur sur la page d'accueil. Nous devons remplacer cela. Avec la boutique NG. Donc, nous disons magasin NG comme un préfixe. Donc, vérifions aussi d'autres erreurs. Donc, je vais aller ici à Footer. Ok, on répare l'en-tête du pied de page. Nous devons également réparer l'en-tête. Donc, nous allons encore ici, nous verrons que nous avons utilisé le service de chariot, mais nous sommes appelés cartels, mais nous ne l'avons pas utilisé. Nous devons le supprimer. Nous avons aussi besoin de nettoyer et de jeter dedans et le constructeur. Donc, ES peluches a beaucoup de règles. Vous pouvez les ajouter à votre code. Ainsi, par exemple, vous ne voulez pas avoir de fonctions vides. Vous pouvez aller à la documentation de ES peluches. Comme vous le voyez ici. Je suis sur le site officiel de ES lane.org. Eastland a donc beaucoup de propriétés et de règles que vous pouvez configurer pour votre application. Par exemple, les codes doivent être doubles et non simples. Par exemple, nous avons ici parfois utilisant des guillemets simples, mais vous pouvez le configurer pour vous donner des guillemets doubles. Il y a donc des règles qui viennent toujours avec cet Eastland. Et puis je pense que NX déjà quand vous avez créé ce projet, il est toujours livré avec des règles spécifiques et similaires qui sont déjà prédéfinies dans un X. Donc, vous n'avez pas besoin de l'ajuster autant. Donc tu le fais juste. La prochaine chose que je vous ai montrée à propos de la préfixation du composant et des directives. Donc, si vous allez dans le Guide de l'utilisateur et ensuite vous allez à une règle, vous verrez qu'il y a beaucoup de règles et elles sont décrites ici, toutes d'entre elles. Ainsi, par exemple ici, cela permet des point-virgules inutiles. Donc, il vous montre toujours que lorsque le point-virgule n'est pas nécessaire, il vous donnera donc une erreur lorsque vous activez celui-ci et que vous n'avez pas de point-virgule. Donc, bien sûr, il y a beaucoup de rôles. Vous pouvez les voir aller un par un à eux. Et puis vous découvrirez qu'ils sont vraiment bénéfiques pour vous lorsque vous construisez votre projet. Et vous n'autorisez pas les développeurs à publier un code ou à valider code sans résoudre tous ces problèmes ou les règles que vous mettez pour votre projet. Donc, pour revenir à notre Eastland, encore une fois, nous voulons résoudre d'autres problèmes. Donc, nous avons ici en-tête, nous l'avons corrigé. Nous avons ici à des messages, et nous avons quelques problèmes ici. Donc, l'un des problèmes dans les messagers, le sélecteur doit être préfixé avec l'un de ces préfixes. Donc, nous avons aussi besoin de réparer celui qui est ici, nous avons besoin d'avoir un pointu donc nous avons déjà corrigé cela. Nous avons ajouté le préfixe NG shop à la peluche ES, très bien, donc nous n'aurons aucune erreur. Alors nous allons lancer à nouveau la commande que nous pouvons dire clair et puis exécuter lint. Et nous voyons si nous obtenons de nouvelles erreurs, donc pour être sûr que nous fixons les bonnes flèches. Ok, la dernière erreur que nous avons ici est aussi que composant de l'application doit être préfixé avec comme un magasin de bonbons. Donc, nous avons ici devrait être toujours et vous magasinez pour le composant. Donc maintenant, nous avons tout est limité, mais seulement pour l' application boutique ND parce que c'est l'application principale que nous avons créé lorsque nous avons créé des terminaisons. Donc, nous allons lier aussi bien l'application d'administration. Donc, je vais lancer ici un commentaire, aussi MPM exécuter peluches mais pour l'application admin. Ainsi, vous pouvez spécifier l'administrateur. Donc, il va courir pour vous aussi le linting pour le projet admin. Donc, de cette façon, nous aurons aussi quelques erreurs. Il faut qu'on répare ça. Donc, par exemple, nous avons quelques avertissements que nous avons utilisés ici. Donc, comme vous le voyez, nous avons comme un avertissement que nous utilisons le any. Vous pouvez également désactiver cette règle car parfois vous devez spécifier comme n'importe quel, comme nous l'avons vu précédemment. Nous pouvons donc rechercher la désactivation de cette erreur. Donc, nous pouvons aller inattendu tout type spécifié différent. Donc tu ne peux pas t'envoler dans leurs rôles ici. Et si vous ne trouvez rien, vous pouvez également utiliser l'outil de recherche ici. Donc, lorsque vous ne trouvez rien, la meilleure façon est d'utiliser Google. Donc, si nous allons ici, inattendu toute spécification et vous pouvez dire Désactiver. Donc, nous allons à Google, vérifier que TypeScript désactivé, rôle plug-in Eastland. Donc, comme vous le voyez dans le débordement de pile, nous avons Google l'erreur et il y a une solution. Il a dit qu'il suffit d'ajouter cette règle pour qu'on puisse copier celle-ci et aller à notre dossier Eastland. Il est préférable de le mettre sur le global car il sera appliqué à tout le projet. Nous avons donc aussi ces règles. Nous pouvons donc mettre cette règle, par exemple, ici. Donc, il sera appliqué sur tous les fichiers, principalement T, SDS, x, et JavaScript. Nous pouvons donc ajouter cette règle ici aussi. Donc on peut. Allez, comme vous le voyez ici, nous n'avons pas de fonction vide et aussi aucune explicite. Donc, nous sauvegardons ça et recommençons et exécutons notre commande. Nous pouvons dire clairement ici encore. Et puis en npm, exécutez lint admin. Donc, comme vous le voyez, nous recevons toujours cette erreur. Que tout avertissement, nous pouvons dire inattendu tout. C' est parce que lorsque nous passons à la, encore une fois aux règles, nous mettons cette règle ici. Donc il ne devrait pas être ici. Il doit être dans cela comme l'extension de la bibliothèque TypeScript. Vous pouvez donc ajouter cette règle ici, qui sera appliquée sur les rôles TypeScript. Donc, nous devons déplacer celui-ci et aussi celui-ci, et le mettre dans les règles que nous avons pour le TypeScript. Comme vous voyez TypeScript, alors ici ce serait le préfixe TypeScript. Donc, toutes ces informations, vous devez être prudent avec elle et vous pouvez ajouter vos règles d'écriture pour les faire fonctionner. Alors sauvegardons à nouveau et essayons d'exécuter notre commande. Donc, je vais revenir à ma ligne de commande ici. Et on ne peut pas dire clair. Et puis on peut aller npm, lancer lint admin. Encore une fois. Je vous montre lentement étape par étape pour savoir comment résoudre ces problèmes et avertissements. Donc, comme vous le voyez, nous n'avons plus cette erreur. Donc, nous n'avons pas l'avertissement ou qui est de dire que tout est comme ne pas préfèrent être utilisé. Donc, nous avons seulement ces erreurs dans l'application d'administration. Alors, réparons-les. Donc, ici, il dit que le NG, ou par exemple, ici dans cette application, NG OnDestroy doit être implémenté car ici je n'ai pas d'implémentations sur ce dessin. Nous devons aussi faire appel à la destruction. Donc, c'est l'une des erreurs. Nous avons également une autre erreur ici aussi. Nous devons mettre en œuvre le OnDestroy. Donc, nous n'avons pas implémenté ça. Donc, vous devez l'importer et mis en œuvre ainsi quelles erreurs nous avons, nous avons dans la liste des produits, nous avons corrigé, nous avons aussi dans la liste des utilisateurs. Donc, nous devons réparer ça aussi. Je vais avoir ici sur détruire une autre erreur, qui est la même que nous l'avons fait précédemment. Les ONG ne doivent pas être vides. Donc, nous pouvons juste supprimer le plomb, la mise en œuvre sur les ONG en elle. Nous n'avons plus besoin et aussi de l'apport d'énergie sur elle. La même chose va à la barre latérale. Nous corrigeons également cette erreur. Donc, de cette façon, vous faites tout de même pour toutes les bibliothèques. Et maintenant j'ai fini avec l'administrateur. Ensuite, vous voulez faire pour la bibliothèque, qui est appelée, par exemple l'interface utilisateur. Alors vous allez ici, MPM Linde et vous dites UI. Donc, de cette façon, il va lier la bibliothèque vous, donc vous devez toujours spécifier le nom de la bibliothèque. Donc, comme vous le voyez, nous avons une erreur dans la bannière et sur et il ne doit pas être vide. Nous avons donc ici aussi, nous devons en supprimer la mise en œuvre. Donc on sauve tout. Et nous allons à l'application pour vérifier si tout fonctionne bien. Donc, nous serons sûrs que nous n'avons pas d'erreurs dans notre application. Et comme vous le voyez ici, j'ai eu une erreur et vous montrez que la preuve ne correspondait à aucun des éléments. Donc on peut aller au sélecteur ici. Nous pouvons vérifier pourquoi nous avons ce problème. Donc, dans l'application et vous magasinez si nous allons à l'index comme, Il demande racine de bits bleus parce que ce module d'application que nous avons créé ou composant d'application, nous changeons ce spectacle NG prouvé qu'il était racine de bits bleus. Donc, dans l'index HTML de l'application et vous magasinez, vous avez juste besoin de renommer cela parce que c'est le point d'entrée de notre application. Donc, nous allons ici, réponds et rechargeons l'application. Tout fonctionne bien. Donc c'est tout pour résoudre les problèmes de peluchage. Comme je vous l'ai dit, il suffit d'exécuter NPM ou mpm peluches et vous spécifiez le nom du projet et il résoudra pour vous ou vous montrera les erreurs après ce que vous avez spécifié dans la peluche ES basé sur les racines maigres ALS ou les règles que nous avons spécifiées là. Donc, pour cela, je vais corriger toutes ces erreurs d'objectif pour toutes les bibliothèques, ce qui sera le même. Je ne vais pas le faire comme devant toi de ne pas prendre autant de temps. Et j'ajouterai que le code du projet à la fin de cette section. Et je veux juste vous rappeler que lorsque vous corrigez tous ces problèmes, par exemple, j'ai corrigé les ordres à la fin, vous obtiendrez tous les fichiers après peluches. Donc, de cette façon, vous n'avez pas d'erreurs. 189. NX Migrate à mettre à jour le projet à la dernière version: Très bien, dans cette section, nous allons parler des mises à jour de la version Angular et de la bibliothèque NX. Donc, vous savez que toujours Angular fournir les nouvelles versions tous les quatre mois ou tous les six mois. Et aussi dans X suit cela pour toujours continuer à interagir avec Angular. Donc, par exemple, j'ai travaillé dans ce cours avec Angular 11. Et puis une mise à jour est apparue, qui est angulaire 12. Nous allons donc mettre à jour notre projet à Angular 12. Maintenant, la grande chose avec Angular ou NX roman, Il vous fournit un outil pour la mise à niveau. Tu n'as rien à faire. Vous n'avez pas besoin de le faire manuellement et de savoir à l'arrière d'un JSON, quelles sont les bibliothèques que vous avez utilisées, puis de les mettre à jour. Mec, qui sait déjà que NX vous fournit toutes ces choses. Mais d'abord, nous devons vérifier nos changements. Donc, tout d'abord, je voudrais installer un programme qui s'appelle GitHub Desktop. C' est une application. Vous pouvez le télécharger depuis desktop.gov dot com. Vous pouvez l'installer pour Mac OS et Windows. Après l'installation de ceci, comme le bureau GitHub, vous pouvez connecter votre projet à celui-ci et voir les changements qui sont effectués dans le projet lorsque vous avez dot git dépôt. Donc, quand nous allons ici à notre application ou à la console ou deux, ils sont comme l'Explorateur de fichiers. Nous verrons que nous avons toujours un dossier qui s'appelle la porte. Vous ne pouvez pas le voir ici. Mais si vous allez dans le Finder ou dans l'Explorateur Windows, vous verrez un dossier qui s'appelle kid. Cela signifie que ce projet est connecté à un bon projet ou connecté à un dépôt Git par défaut. Et x fournit ce gamin et il est connecté d'une manière ou d'une autre, faire un dépôt Git. Donc, ce que vous devez faire est juste peut-être que vous pouvez supprimer cette partie ou vous pouvez la garder pour suivre vos modifications. Donc pour moi maintenant, je vais le garder. Mais si vous n'avez pas ce fichier en double, je vais vous montrer comment en créer un nouveau. Donc, tout d'abord, je vais à GitHub Desktop, que j'ai installé. Comme vous le voyez ici. J'ai tous mes projets que j'ai déjà fait. Et maintenant, nous pouvons commencer à faire ce qui suit. abord, nous devons créer un nouveau référentiel à partir du disque dur. Donc, vous pouvez, si vous n'avez pas ce fichier git dot, vous pouvez cliquer dessus et ensuite vous pouvez spécifier le dossier que vous allez implémenter votre projet. Par exemple, j'ai, mon projet est ici, je vais cliquer sur ouvrir, mais il dit que ce répertoire semble avoir un dépôt Git parce que j'ai dot get file comme je vous l'ai montré ici. Donc, pour cela, nous n'avons pas besoin d'utiliser cette option. Sinon, vous pouvez l'utiliser en créant un nom de référentiel et aussi il va initialiser pour vous nouveau fichier. Donc, dans ce cas, nous allons ajouter un dépôt existant à partir d'un disque dur parce que nous avons déjà cela. Nous avons ce dossier git dot. Je vais donc naviguer vers mon projet, vers l'espace de travail que j'ai créé. Et comme ouvrir ce projet que l'espace de travail où ce point obtenir dossier est là. Donc, nous l'ouvrons et nous disons Ajouter un dépôt. Et comme vous le voyez ici, je vais voir tous les changements que j'ai fait depuis le moment où j'ai installé dans x et jusqu'à maintenant que je veux que vous cliquiez sur le commit. Vous pouvez écrire un message de validation afin que nous puissions obtenir tout cela comme validé et confirmé. Donc tu ne peux pas dire comme finir. On peut dire que nous avons fini le cours ou le magasin. Donc on peut dire finir l'e-shop. Alors c'est tout. Donc, alors vous pouvez dire commit to master. Maintenant, nous n'avons aucun changement. Donc, mais quand je vais à mon fichier ou dans l'Explorateur de fichiers dans l'éditeur, je le verrai quand je changerai. Donc, faisons ici changer, par exemple, sauver, repartir, et nous verrons que nous avons eu, et ce changement est là. Il était 11, maintenant il est 12. Donc, pour cela, je veux le faire parce que nous allons améliorer notre projet. Donc, dans ce cas, nous serons en mesure de voir quels changements sont faits. Premièrement, qu'a fait pour moi pour mettre à jour mon projet ? Donc, pour mettre à jour le projet, nous pouvons aller au navigateur. Je vais vous envoyer un lien, ou vous avez un lien qui est joint à cette conférence. Il montre leur documentation sur la mise à jour d'un X sur le site Web normal de NX. Nous devons donc utiliser le terminal pour ça. C' est donc très facile et très simple, ce qui est très génial à faire avec n-x. C' est pourquoi j'encourage les gens à faire les projets de largeur angulaire NX parce que cela vous fournit les outils qui sont vraiment parfaits pour mettre à jour et migrer votre projet. Bien sûr, vous pouvez aussi utiliser NG, mise à jour. Mais il sera en partie mis à jour. Il ne mettra pas à jour les autres bibliothèques comme par exemple, NDR x, ou par exemple, si vous utilisez TypeScript, etc. Donc, pour cela, nous allons ouvrir le terminal et utiliser ce commentaire. Donc, nous allons ici, ouvrez à nouveau le terminal de notre projet comme nous le voyons précédemment. Donc nous pouvons aller à ce noeud ici nous sommes. Vous pouvez arrêter le projet est mieux. Il vaut mieux arrêter celui-là. Et je vais arrêter aussi l'application du panneau d'administration. Donc, ici, nous allons coller le commentaire des terminaux NX migrer plus tard. Donc, lorsque nous exécutons cette commande, nous verrons que NX commence à faire quelque chose qui met à jour le paquet JSON, il est donc préférable de le fermer et aussi de créer un fichier qui est appelé migration. Cela prendra un certain temps. C' est de cinq à dix minutes. Je vais sauter notre vitesse jusqu'à cette vidéo. Et vous le ferez, je reviendrai vers vous une fois que cela sera prêt. Donc, comme vous le voyez maintenant que la migration est prête. Donc, le paquet JSON, dit-il, assurez-vous que les paquets et les changements ont du sens, puis exécutez npm install. Vérifions notre paquet Jason. Nous verrons ça, ok, tout a été mis à jour vers la version 12, comme vous le voyez ici. Donc, nous avons aussi angulaire et tout a été mis à jour à la dernière version d'Angular. Donc, de cette façon, nous sommes mis à jour nos paquets et bibliothèques et toutes les dépendances facilement. Maintenant, nous allons vérifier la mise à jour ou comment nous pouvons installer ces mises à jour. Il a dit, assurez-vous que le package JSON change, ayez du sens, puis exécutez npm install. Mais aussi vous pouvez vérifier les changements en vérifiant le GitHub et vous voyez tous ces changements qui sont faits ici. Et aussi il a créé un fichier de migration qui sera utilisé pour la migration. Alors exécutons à nouveau l'installation de npm. Donc, nous pouvons dire npm installer dans notre projet. Et il installera toutes les bibliothèques mises à jour. Encore une fois. En outre, cela prendra du temps. Et je vais faire cette vidéo rapidement. Ok, Maintenant, après l'installation de MPM, comme nous le voyons ici, qu'il a installé et compilé toute la bibliothèque et tout a réussi. Donc, si nous allons à nouveau vérifier nos changements est seulement le package.json, qui est un fichier temporaire pour confirmer toutes les bibliothèques et leurs dépendances et leurs liens et jetons. Donc, pour l'instant, nous allons exécuter la dernière commande après cette mise à jour. Donc, si nous faisons défiler jusqu'aux instructions, encore une fois, nous voyons que npm ici installé et après cela, nous devons faire ONNX migrer autour des migrations. Donc, ici, nous allons exécuter cette commande et ensuite il mettra à jour notre projet. Et nous pouvons l'exécuter à nouveau et nous voyons s'il a été mis à jour. Donc, nous allons à nouveau à la ligne commune. Je copie celui-là. Je vois ici comme basé sur leur commandement. Et puis je dirige cette migration aussi. Ça prendra un certain temps, mais je vais accélérer la vidéo. Joli comme vous le voyez ici, le grand gradient est terminé. Il a fait beaucoup de choses comme supprimer certaines choses obsolètes et aussi mettre à jour étaient des travailleurs pauvres, des routes activées de migration, des instantanés ou des mises à jour qui sont faites ou sur Angular dans cette nouvelle version. Donc le NX a fait ça pour moi. Alors allons maintenant exécuter le projet et voir si nous le faisons vraiment. Tout va bien. Donc, je vais dire dans x servir et vous magasinez, et dans l'autre terminal, je veux exécuter aussi l'application d'administration. Donc nous allons ici, nous exécutons ces deux applications pour voir si tout fonctionne bien. Pendant cela, nous pouvons vérifier aussi notre bien. Comme vous le voyez, beaucoup de changements se produisent. Donc, mon conseil pour vous, vous devez vérifier toujours les changements de travail sont faits, surtout si vous avez mis à jour certaines règles sur ES lean par exemple, surtout si vous avez comme certaines applications où vous en avez, fait un peu de base ajustements. Vous devez donc toujours vérifier tous ces changements. Ensuite, vous pouvez migrer et démarrer votre application ou fusionner ou le code qui a été mis à jour pour votre projet. Donc, je ne vais pas parler en détail de chaque mise à jour qui s'est produite ici, mais c'est surtout le cas. J' aime sur la configuration des fichiers de du projet comme ES peluches, comme les tests, les outils , comme juste, et aussi les variables d'environnement que nous avons créées précédemment, les champs poly, etc. tous ces fichiers sont mis à jour, aussi le NX JSON. Donc, beaucoup de choses peuvent faire NX pour vous sans avoir l'effort de le faire manuellement, ce qui est tellement génial. Vous n'avez pas à vous soucier de tout cela peut être des mythes, une bibliothèque, vous, peut-être vous avez raté une mise à jour importante. Donc NX fait tout cela pour vous, qui est merci, grand, merci pour cette équipe qui développe toute cette bibliothèque et la garde sur la bonne voie pour les dernières mises à jour d'Angular. Donc, comme nous le voyons ici que nous avons compilé avec succès le projet de n'importe quel magasin et aussi l'administrateur. Alors allons à notre navigateur et vérifier si nous avons tout va bien. Alors d'abord, je vais à l'atelier de moteurs. Donc ici, j'ai besoin de me rafraîchir. Donc, nous avons ici le Refresh. Ok, il semble que tout fonctionne bien. Comme vous voyez la page du produit, accro produit, Ajouter au panier. Joli. Tout fonctionne bien. La page de paiement. Parfait. Donc, nous n'avons aucun problème sur l'application admin ou frontale. Allons à l'application du panneau d'administration. Donc, je vais aussi voir l'administrateur. Rafraîchissons à nouveau aussi. D' accord. Nous avons des produits, nous avons des catégories, tous fonctionnant bien. Nous avons passé quelques commandes et aussi des utilisateurs. Tout est parfait. Nous n'avons eu aucun problème. Après ça. Vous pouvez créer un message. Vous pouvez l'appeler comme core, mise à jour ou mise à niveau, vous pouvez dire. Et puis vous pouvez vous engager à maître. Et toutes ces modifications seront poussées et validées dans votre référentiel. Tout ce que vous avez à faire est de pousser cela dans un référentiel auquel vous vous êtes connecté. Tu vois, c'est très facile. Il nous a fallu environ 15 minutes pour faire la mise à niveau vers les dernières bibliothèques de notre projet. 190. Installation de Heroku et de préparation au git: Ok, Dans cette section, nous allons déployer notre backend ou notre API Web sur Heroku. Heroku est l'un des outils utilisés pour déployer le projet ou les API Web. Et ils peuvent être publics et nous pouvons les utiliser dans vos projets. Donc, vous n'aurez pas votre API basée uniquement sur localhost 3000 comme nous l'avons vu, mais nous allons le mettre sur une URL et nous pouvons y connecter nos applications frontales. La première étape que nous devons faire, nous devons aller sur un site appelé Heroku.com et ensuite nous sommes invités à être enfermés. Bien sûr, si vous êtes quelques-uns n'avez pas de compte ici, vous pouvez aussi bien vous inscrire. L' inscription est très simple. Il vous suffit de fournir prénom, nom, adresse e-mail. Et quel est votre rôle ? Pays ? Et aussi, vous devez mettre un peu de langage de développement de l'argent Brian. Nous devons mettre NodeJS dans notre cas et vous devez vérifier que vous n'êtes pas un spam et ensuite vous pouvez obtenir un compte. Une fois connecté, vous verrez un tableau de bord comme celui-ci. Donc, ce tableau de bord, nous devons créer une application que nous allons rendre publique pour notre API. Donc, tout d'abord, vous devez avoir créé une nouvelle application. Et cette création d'une nouvelle application, vous pouvez donner n'importe quel nom pour votre application. Dans mon cas, je lui donnerais un nom comme e-shop, backend par exemple. Et peut-être que ce nom ne peut pas être disponible, vous devez donc spécifier un nom spécifique. Peut-être que vous pouvez donner comme n'importe quel suffixe aléatoire. Par exemple, vous pouvez mettre votre nom de famille. Par exemple, je vais mettre mon nom de famille ou mon nom d'entreprise. Je vais voir, je dirais comme un bits bleus. Donc, dans ce cas, j'aurai l'e-shop retour et des bits bleus. Et puis vous choisissez votre région est préférable d'utiliser la région la plus proche où il est plus proche pour vos clients cibles. C' est donc mieux pour moi dans ce cas, je vis en Europe. Donc, je vais mettre l'Europe et puis vous devez cliquer sur créer une application. Nous avons donc créé une obligation. Il y a quelques instructions que nous devons faire d'abord. Nous devons d'abord télécharger et installer Heroku CLI. Allons à ce lien et vérifions-le. Donc, dans ce lien, vous pouvez voir plusieurs options pour installer Heroku. Donc, par exemple, vous avez façon macOS, vous pouvez utiliser commentaire si vous avez Homebrew et aussi si vous avez Windows, vous pouvez installer un programme d'installation. Et aussi pour ouvrir TO de cette façon, que j'aime toujours utiliser est en utilisant NPM, NPM global installé. Donc, vous pouvez faire npm installer dash global, Heroku. Allons donc à Paris et faisons ça. Alors j'irai ici et j'ouvrirai mon terminal. Je vais utiliser le bouton Contrôle J comme nous l'avons vu précédemment. Et puis je dirai npm installé moins g. Donc, de cette façon, j'installerai le périphérique Heroku Domain public, donc je peux utiliser les commandes Heroku dans ma machine. Mais le premier que je dois faire est peut-être qu'on a besoin d'une autorisation. Donc, les autorisations, peut-être qu'il ne vous permettra pas d'installer public ou globalement. Vous devez préfixer ce commentaire avec sudo. Donc, comme vous le voyez ici, je ne suis pas r. Je n'ai pas les autorisations pour le faire, donc j'ai besoin de préfixer cette commande avec sudo. Donc, nous pouvons dire sudo nmap, mais dans Windows, je pense que vous n'aurez aucun problème. Et puis il me demandera mon mot de passe. Et puis je vais mettre le mot de passe et il sera installé avec succès. Maintenant, comme vous le voyez, il a été installé, nous avons maintenant la commande Heroku. Ainsi, vous pouvez, par exemple, mettre Heroku comme ceci et vous obtiendrez une commande comme les options que vous avez, certaines options que vous pouvez utiliser pour vos commentaires Heroku. Retournez à notre navigateur. Après l'installation, nous retournons à notre application et nous devons faire une bonne édition. Et aussi, nous devons connecter notre projet Heroku ou notre projet back-end à Heroku git. Mais tout d'abord, la chose la plus importante parce que avant de faire cette étape, vous avez bien sûr, pour créer un fichier gitignore. Ainsi, par exemple, dans Heroku, je ne vais pas déployer ce fichier final. Ce fichier m contient ma chaîne de connexion à la base de données est mon secret et aussi l'URL de l'API. Je ne vais pas pousser cela au dépôt git Heroku. Donc, de cette façon, nous devons ajouter un fichier qui est appelé git ignore. Donc, quand j'utilise un bon commentaire de Heroku, alors il ne poussera pas les fichiers que je spécifie. Donc aussi, vous n'avez pas besoin de pousser les modules de noeud. Les modules monod viennent normalement un fichier très énorme, près de 200 mégaoctets, parce que nous installons des bibliothèques et leurs dépendances. Vous n'avez pas besoin d'utiliser également les modules Node. Donc, créer un fichier get ignoré, C'est très simple. Il vous suffit de créer un fichier à la racine du projet. Donc, vous devez dire git ignorer avant de faire n'importe quelle étape qui est mentionnée là. Donc, d'abord, vous devez ignorer le dossier des modules de noeud. Donc, nous disons des modules de soulignement de noeud barre oblique. Et aussi nous devons ignorer le fichier m et aussi d'autres fichiers de développement comme le plus joli RC, comme vous le voyez ici, nous avons ce fichier pour que nous puissions l'ignorer aussi. Donc, dans ce cas, nous avons, nous sommes, nous sommes prêts à connecter notre projet au dépôt Heroku. Donc, nous revenons aux instructions et nous devons dire d'y entrer. Parce que si nous n'avons pas initialisé notre projet précédemment car nous avons vu que nous n'avons pas un bon, Nous ne l'avons pas connecté à un bon. Donc, dans ce cas, nous devons dire obtenir tout, ok, Après que vous y arrivez, vous verrez qu'il y a un fichier créé dans ce dépôt qui va ou appelé comme point kid. Et si vous voulez le voir, vous pouvez aller ici dans le dossier backend et vous verrez que ce dossier et a été créé. Donc, la prochaine instruction, nous devons connecter Heroku git remote. Mais d'abord, nous devons utiliser Heroku login. Alors regardons d'abord Heroku. Donc, je vais utiliser Heroku login et puis il me demandera, voulez-vous ouvrir le navigateur et vous pouvez vous connecter alors. Donc, nous ne pouvons pas dire oui, nous pouvons appuyer sur n'importe quelle touche et puis il ouvrira automatiquement le navigateur. Donc, comme vous le voyez ici, j'ai une autre page. Il dit regarder dans Heroku CLI. Je dirai regarder et ensuite connecté parce que je suis déjà connecté sur le même navigateur. Ainsi, lorsque vous retournez au terminal, il saura que vous avez déjà connecté et vous pouvez utiliser les commandes Heroku, comme mentionné dans la documentation. Après cela, nous devons connecter notre Heroku ou notre projet au dépôt git Heroku. Donc, nous devons utiliser cette commande, toutes ces commandes, vous pouvez les utiliser comme vous le voyez, disons Heroku, git remote, puis ajouter E bits pointus et bleus. Donc, c'est exactement le même nom de l'application. Alors faisons ça. Et puis nous avons basé ce commentaire ici. Et puis, comme nous le verrons, d'accord, le dépôt Git est défini sur ce chemin. Alors maintenant, quand nous allons déployer notre projet ou télécharger notre code pour gérer cool, alors Heroku va obtenir ou lire tous leurs fichiers et le code que nous avons téléchargé à partir de ce chemin. Dans la prochaine conférence, nous allons voir comment nous pouvons créer aussi une base de données de production. Nous n'avons pas besoin d'utiliser la même base de données que nous voyons parce que peut-être cette base de données nous pouvons différencier entre le développement et la production. Comme nous le verrons dans la prochaine conférence. 191. Créer une base de données de production facultative: Ok, dans cette conférence, nous allons parler de la création d'une base de données de production. Donc, lorsque vous faites un développement ou lorsque vous faites une application, vous avez normalement une base de données spatiale pour vous, juste pour développer et tester des choses et faire un progrès pour votre application. Mais après avoir déployé le projet à live, vous devez créer une base de données de production. Dans ce cours, cela est facultatif pour que vous puissiez créer une base de données en direct, une base de données de production ou non. Donc, dans cette section ou dans cette conférence, nous allons le faire. Si vous vous souvenez, nous avons installé MongoDB Compass et cette application MongoDB Compass, nous pouvons être en mesure de créer des bases de données et aussi nous pouvons aussi importer et exporter des données. Donc, dans notre cours, nous utilisions cette base de données, qui s'appelle la base de données e-shop. Maintenant, nous allons en créer un nouveau. On peut l'appeler E forte aussi, base de données. Et ce serait une production large. Donc, nous pouvons avoir cela et nous pouvons créer la première collection, qui sera appelée, par exemple, catégories. Et puis nous faisons, créer pour la base de données, et la base de données est créée. Comme vous le voyez ici, mais nous n'avons qu'une seule table. Donc, si vous vous souvenez, j'ai joint pour vous au début du cours, certains fichiers, vous pouvez les utiliser comme données par défaut. C' est comme les données que nous insérons font la base de données. C' est comme semer. Donc, nous pouvons utiliser aussi l'ensemencement que aussi bien ici. Donc, je vais le faire rapidement. Alors, comment importer des données en utilisant une boussole ? Vous avez juste à aller ici, cliquez sur les catégories, par exemple, sur le nom de la collection. Et puis vous pouvez dire importer des données. Et puis vous accédez au dossier où je vous ai donné. Donc, je vous ai donné, par exemple, catégories ou des articles et d'autres tableaux. Donc, pour cela, vous pouvez utiliser pour ces catégories et vous devez spécifier ici que vous avez JSON. Et maintenant, nous faisons l'importation. Et cette importation s'est terminée. Et nous verrons que nos données sont situées ici. Nous ferons donc la même chose pour toutes les tables. Je vais le faire rapidement devant vous. J' ai donc créé ici une nouvelle table. Je l'appelle utilisateur, ou utilisateurs. Et ces utilisateurs, je vais importer ces données aussi. Nous devons donc faire la même chose pour toutes les autres tables. Donc maintenant ma production de base de données est pleine. Donc, nous allons utiliser cette base de données, mais nous sommes seulement pour leur application de produit ou que l'application développée sur le développement local Heroku, nous utilisons toujours la question de la base de données. Alors, comment nous pouvons faire cela dynamiquement, comme lorsque je déploie ISA à l'application utilise la base de données. Mais quand je développe, je veux dire à l'application, d' accord, utilisez cette base de données. Donc, c'est assez simple. Nous allons configurer les variables d'environnement qui sont préférées pour Heroku parce que nous allons utiliser ces variables et nous les utilisons dans l'application. Et sur le développement, nous pouvons garder, par exemple, cette chaîne de connexion. Mais sur la production, nous allons avoir une autre chaîne de connexion. Mais ici comme vous le voyez, ce fichier d'environnement n'est pas déployé parce que nous avons ajouté à git ignore. Donc, ce ne sera pas dans le déploiement sur Heroku parce qu'Heroku ne saura pas que nous avons un fichier d'environnement ici. 192. Régler les variables de l'environnement de produit: Ok, maintenant comment nous pouvons dire à l'application d'utiliser cette base de données de production, pas la base de données de développement. Tout d'abord, si vous vous souvenez, nous avons ajouté le fichier m et dans le fichier final nous l'utilisions pour connexion à la base de données que nous avons créée dans MongoDB Atlas. Donc, la chaîne de connexion est stockée dans le fichier m comme vous le voyez ici, et nous en avons parlé précédemment. Donc maintenant, nous allons avoir une chaîne de connexion différente pour la production. Donc, dans ce cas, ok, nous utilisons cette chaîne de connexion ici dans les connexions de processus à faire. Mais comme je vous l'ai dit que lorsque nous allons déployer cette application, ce module m-file, plus joli, IC et Node, ils ne seront pas téléchargés sur le serveur. Donc, d'où l'application déployée saura quelle chaîne de connexion utiliser. Parce que dans ce cas, lorsque je déploie, il ne saura pas quelle chaîne de connexion utiliser car elle sera indéfinie ici. Et puis nous aurons une erreur de connexion. Donc, pour cela, changeons d'abord tout ce que nous avons, comme deux ou dans notre app.js, tout ce que nous devons changer pour être en production. Par exemple, ce nom, je vais utiliser une base de données mais à l'étranger, pas celle-ci. Nous devons donc changer cela aussi. Nous devons également utiliser une autre variable, que nous pouvons appeler le nom de dB, par exemple. Et nous pouvons donner ce nom DB dans le fichier. Donc, nous pouvons, après cela a été une ligne, nous pouvons dire nom DP. Et puis pour local, je devrai utiliser cette base de données e-shop. Mais dans la production, nous allons en utiliser un autre. Ok, quoi d'autre ? Donc, l'application utilise également un port spécifique. Donc, lorsque vous démarrez l'application en production, comme vous le voyez ici, lorsque nous allons au navigateur de notre application et nous utilisons, nous disons, par exemple, ouvrir l'application ici sur le dessus. Ensuite, nous aurons une nouvelle application. Comme vous le voyez ici, nous avons le lien, mais il ne contient aucun port ou comme par exemple, 3000 ou quelque chose comme quelque chose. Parce qu'avant nous avions comme hôte local comme ça et 3000. Donc nous n'avons pas le tableau ici. Alors, comment nous pouvons aussi rendre le conseil dynamique. Nous devons donc le faire aussi bien parce que dans la production, il utilisera un port différent. Donc aussi ici, nous devons définir une variable. On peut le donner comme une constante et on dit port. Et ce port proviendra également de variables d'environnement. Et il s'appellera le port. S' il n'y a pas de port, utilisez 3000. Donc juste au cas où cette partie ne vient pas ou qu'elle est livrée avec indéfinie. Alors on utilise ce tableau ici. Et dans mon fichier, je peux définir ce port. Donc, nous pouvons dire aussi bien ici, utiliser le port, nous pouvons dire que le port sera 3000. Mais rappelez-vous, ce n'est que pour le développement local. Nous n'avons pas pour ça pour la production. La production le remplacera par un autre port. Mais le mot clé pour cela, il sera acheté comme ça. Donc Heroku va trouver ou créer un port seul. Normalement, c'est le port 80, qui est le port par défaut du HTTP. Ok, maintenant nous avons un problème. Alors, comment la production sans variable de chaîne de connexion. Alors, comment nous pouvons créer ça. Donc, nous allons à nouveau au navigateur où nous avons créé notre application. Et puis nous trouverons sur le dessus quelque chose appelé activité ou paramètres. Et dans leurs paramètres, vous trouverez un vars de configuration révélée. Ce sont donc les vars de conflit qui seront utilisés dans la production. Donc, dans ce cas, je dois dire à mon application ici, utilisez la chaîne de connexion, mais nous sommes en production une. Donc, je vais revenir au navigateur, puis créer une nouvelle chaîne de connexion de clé sera ce qu'il sera. La connexion reste la même mais avec une base de données différente. Donc, je vais utiliser le même. Et puis je dirai que pas utiliser la base de données e-shop, mais chacun de cela obéit à l'étranger. Et aussi, nous avons aussi besoin de créer une autre chose qui s'appelle le nom DP. Nous allons utiliser ce nom pointu, que la base, donc ici aussi, E-Sharp, qui obéit aussi large. Donc, dans ce cas, l'application saura qu'il y a une chaîne de connexion et il la lirait à partir d'ici. Donc on n'a pas à s'inquiéter pour ça. Il est donc préférable d'ajouter toutes les variables d'environnement à la connexion car sinon notre application échouera. Ce que nous devons utiliser ici, API URL, qui sera la même chose que nous avions là-bas. Ce sera api slash v1 et nous l'ajoutons secret. La même chose. Il devrait également être les mêmes lettres majuscules ou minuscules parce que c'est sensible à la casse. Et nous aurons ici le secret ou vous pouvez utiliser un autre secret. Donc, lorsque je déploie mon application, alors il va rechercher le processus. Mais notre erreur locale n'est pas déployée parce que nous l'avons dans le bon ignorer. Donc, il ne sera pas sur le serveur afin qu'Heroku ne sache pas du travail pour l'obtenir. Il va aller dans les vars du conflit et ensuite lire ces valeurs. Donc, dans ce cas, nous avons une base de données différente de la production et une base de données pour le développement local. Dans la prochaine conférence, nous allons voir comment nous pouvons l'utiliser et comment nous pouvons déployer l'application sur le serveur. 193. Déployez l'application et le test: Revenons maintenant à l'instruction de déploiement de l'application. Donc ici, si nous allons à nouveau à l'application et nous cliquons sur Déployer, et nous verrons à nouveau notre instruction. Nous avons donc déjà fait cette connexion et nous avons déployé ou fait le lien entre l'application et le dépôt Git de Heroku. Maintenant, nous allons exécuter ces commentaires. Tout d'abord, nous devons ajouter le code au bien, donc nous devons le valider. Donc, si vous ne savez pas ce que c'est, C'est comme si vous donniez des informations sur, comme quel code vous engagez dans votre dépôt. Donc quand je change, alors je dis, d'accord, j'ai changé celui-là, je l'enlève. Donc, je dirais dans le message de validation que la suppression du gestionnaire d'erreur. Ainsi, vous gardez une trace de vos changements sur le projet. Donc ici, nous pouvons le faire aussi avec Heroku. Donc, nous devons faire git add dot et ensuite git commit dash am, rendre meilleur ou n'importe quel message. Donc, tout d'abord, faisons le bien. Cela signifie que nous ajoutons tous les fichiers du projet au dépôt Git pour les préparer pour le téléchargement sur le serveur. Et puis après cela, nous devons faire le commit git, puis tiret m. Et puis vous pouvez spécifier un message. Donc, par exemple, déployer d'abord, mourir. Donc, nous pouvons aussi bien ajouter ce message de validation. Après cela, nous devons pousser le code au cetera. Nous sommes comment nous le faisons avec ce maître heroku git push commun. Donc, je vais aller au terminal et puis coller cette commande ici. Et puis il va télécharger toutes les informations ou tout le code que j'ai spécifié, sauf les fichiers ou les fichiers et dossiers que j'ai spécifiés dans git ignorer. Donc, dans ce cas, nous aurons tous nos dossiers de développement sont là. Donc, comme vous le voyez ici, c'est fléchette, ne déployer l'application, les fichiers finis, ça, commencer à le construire. Et maintenant, il montre toute la progression de l'installation des bibliothèques. Il fait également npm installer pour l'installation les paquets que nous avons utilisés pour notre application. Et puis il aura des modules Node, mais sur le serveur, pas celui-ci. Donc, après cela, il va compresser l'application pour une utilisation plus rapide. Et vous devez également vous rappeler de télécharger les images qui sont dans le dossier de téléchargement afin que nous puissions voir les images ainsi dans le, dans le serveur. Donc sinon, si vous n'avez pas ces images que j'ai attachées pour vous aussi, parce qu'elles sont aussi dans la base de données, les liens vers ces messages ou images. Vous devez également les télécharger sur votre serveur. Alors que le déploiement est terminé, vérification du déploiement, fait. Ok, Revenons au navigateur et allons à l'application et actualisons ici. Joli. Nous avons un message, l'utilisateur n'est pas autorisé. C' est génial parce que si vous vous souvenez, nous avons autorisé notre API. Donc, si vous vous souvenez dans les routes ou dans les aides, nous avons dit JWT que nous allons exclure certaines routes de l'authentification, par exemple, pour obtenir un produit ou obtenir une catégorie. Alors essayons d'obtenir un produit dans le navigateur. Donc, je vais dire ici exactement si vous vous souvenez comment nous faisions avec hôte local et 3000, puis j'ai mis API v1, et puis j'ai mis des produits par exemple. Donc c'est comme une demande get quand vous l'essayez, Ok, Nous avons toutes les données de notre base de données. Vous ne pouvez pas essayer ça aussi bien que Postman, si vous vous souvenez, nous avons beaucoup travaillé avec le facteur et nous avons essayé notre API dans Postman. Donc ici, je vais ouvrir un nouvel onglet pour une nouvelle requête GET, puis je vais mettre ce lien. Donc, le lien de mon API d'application, v1 produit. Donc, ce sera exactement comment je le fais comme de l'hôte local. Vous voyez donc que toutes ces informations sont stockées et que nous utilisons la base de données de production. Nous n'utilisons pas la base de données que nous avions pour local. Donc, pour le prouver, faisons un changement dans la base de données en utilisant boussole. Donc, je vais aller à mon application, je vais passer à la base de données de production. Je vais cliquer dessus et j'ouvrirai les produits. Et j'irai à celui où ça commence, je me souviens en tant que mol, quelque chose comme ça. Donc voici le petit, vous voyez ici le petit et c'est. Alors, changeons ça. On peut dire de changer cette phrase. Nous allons à la, donc nous cliquons sur le petit ici et nous pouvons dire, par exemple, à l'étranger. Donc on peut agrandir ça et dire la production. Donc nous ne pouvons pas ajouter ce mot « production » ici. Donc, après nous mettons à jour, puis nous allons à Postman, et puis nous cliquons sur Envoyer. Ok, nous avons ici la production. Donc, c'est la preuve que j'utilise la base de données large, mais sur mon hôte local, Essayons d'exécuter l'application sur local. Donc, nous pouvons dire npm commencer comme nous exécutions l'application localement, ok, Le localhost 3000, tout va bien. Maintenant, nous allons à la requête GET, mais sur l'hôte local. Nous avons donc ici, par exemple, produits API localhost 3000. Et puis si nous l'appelons, nous verrons que nous appelons la base de données, qui est dans l'hôte local. Et si on vérifie cette base de données, j'irai ici. Et je vais vérifier ce problème de base de données. Accédez aux produits. J'aurai beaucoup de produits fictifs que nous utilisions pendant le développement. Donc, dans ce cas, nous différencions chaque fois que j'ai déployé à mon truc de pouce d'application, pouvez-vous alors il va utiliser une base de données de leur production. Par exemple, je vais changer quelque chose ici. Je vais ajouter un journal de console. Quel exemple de journal de console. Comme utiliser, nous utilisons. Par exemple, vous pouvez mettre supplémentaire et ensuite vous pouvez utiliser le nom de base de données ici. Donc, quand j'économise, ok, sur mon local, je dirai que nous utilisons la base de données e-shop, mais nous devons le déployer. Donc, ici, notre hôte local, nous avons une base de données e-shop, comme nous le savons pour le développement. Mais si nous déployons cela, nous obtiendrions, nous utilisons la question de la base de données apporté thé ou produit. Donc, de cette façon, comment nous pouvons pousser les changements, encore une fois, nous devons mettre git add et ensuite nous ajoutons un message. Donc, par exemple, les commentaires, nous pouvons dire changement, puis nous appuyons sur Entrée, puis nous utilisons à nouveau pousser commun. Donc git, pousser le maître heroku, il sera à nouveau déployé. Donc, comme vous le voyez ici, il se déploie à nouveau. Le même processus que nous avons vu dans la première étape. Maintenant, le déploiement est terminé. Comment nous pouvons voir que, par exemple, ce message que nous utilisons, comme la base de données, vous, je veux dire comment nous pouvons voir le journal de la console ou les erreurs que nous voyons dans le développement. Pour voir que vous pouvez aller facile Deux plus ici, et vous pouvez vérifier ici une vue journaux. Donc, lorsque vous cliquez dessus, vous verrez tous les journaux comme vous êtes en train de développer localement. Donc nous disons ici, nous utilisons la base de données e-shop à l'étranger. Donc, cette très grande chose et exactement comment nous avons eu l'application sur local et aussi, cela fera comme surveillance pour notre API. Donc, quand j'appelle cette API, alors je vais aux journaux. Je vais voir que, ok, nous avons des informations Get API v1 produits et d' autres informations sur la demande et le retour et combien de temps cela a pris. Mais si nous allons à la base de données, nous devons, par exemple, vérifier une image. Donc, je vais ici et je vais aller à la base de données et j'ai des produits. Nous aurons un problème avec les images. Donc, si vous vous en souvenez, nous avons téléchargé quelques images avec notre e-Sharp. Donc, quand je vais ici, je verrai que dans le produit, ils ont encore ce localhost 3000. Malheureusement, cela n'est pas possible de le remplacer. Vous devez donc remplacer toutes ces chaînes qui sont liées à l'hôte local. Vous devez les remplacer chaque année par le lien qui est fourni pour votre demande. Donc, dans ce cas, je vais ici à ma demande et puis copier cette partie qui est d'ici à .com. Donc je vais copier tout ça. Et puis je vais aller à nouveau sur le campus et remplacer de HTTP à localhost. Aussi le port n'est pas nécessaire et je vais ajouter la mise à jour ou mettre à jour cette partie ici. Donc, nous cliquons sur Mise à jour et puis il sera mis à jour. Donc, quand je vais maintenant à l'application et coller l'URL de l'image, alors je serai en mesure de voir l'image avec succès. Sinon, toutes les images, malheureusement, ils sont toujours sur localhost 3000. Donc, pour cela, en fonction de votre nom de votre application, vous devez remplacer tout cela pour la base de données. Bien sûr, après avoir utilisé cette base , par exemple, dans un front ou quand nous le sommes, vous allez utiliser Postman, par exemple, lorsque je vais poster un produit en utilisant cette URL API, il va télécharger l'image basée sur cette URL, donc il sera stocké dans la base de données comme ça. Mais parce que nous utilisions cette base de données en développement, vous devez le faire manuellement. Parce que aussi, nous utilisions lorsque nous publions un produit. Si vous vous souvenez, si nous allons poster le produit et dans le produit post, nous faisions comme l'image en utilisant l'hôte. Je reçois l'hôte actuel, puis je mets le reste ici pour stocker le chemin d'image. Ainsi, l'hôte sera pris à partir de l'hôte que vous utilisez et à partir duquel vous appelez l'API. Donc, dans ce cas, vous n'avez pas à vous soucier des liens que nous voulons télécharger pour les fichiers téléchargés. Donc, maintenant, nous avons une API entièrement fonctionnelle sur le serveur. L' application a été déployée. Bien sûr, si vous voulez supprimer ce Heroku.com et créer votre propre domaine, ce n'est pas gratuit. Tu dois payer pour ça. Et bien sûr, vous pouvez être en mesure de l'avoir sous votre propre domaine. Donc, dans l'application frontale ou toute application frontale, lorsque vous allez déployer leur application frontale, pas leur API Web. Vous pouvez dire que pour mon application dans le front end en production, utilisez cette URL API pour tous comme l'application. Et puis, lorsque votre application a été déployée, elle se connecte à cette API et récupère les données à partir de là. 194. Préparer les pages Git et Github: Lorsque nous déployons le backend, je vous ai dit d'installer l'application, qui s'appelle GitHub Desktop. Je vais mettre à nouveau le lien avec cette conférence pour voir où l'installation de cette application. Github fournit un très grand outil pour le déploiement d'applications, qu'ils contiennent JavaScript, CSS et HTML. Et vous pouvez y déployer vos applications et les voir dans le navigateur. Ainsi, vous pouvez avoir un domaine et ensuite vous pouvez voir votre application publiée sur le navigateur. Donc, nous allons dans ce cours pour montrer comment nous pouvons déployer l'application sur GitHub Pages. Et si vous voulez voir d'autres façons, comme si vous voulez voir comment nous pouvons déployer cela via FTP sur notre propre domaine. Aussi, je peux faire une vidéo sur le parcours. Attrape-moi un message si tu veux que je fasse ça. Donc, tout d'abord, nous allons avoir cette publication GitHub Pages. Donc, pour cela, nous devons connecter notre dépôt actuel, notre projet actuel que nous avons créé avec Git, application de bureau GitHub pour la connexion à votre dépôt. Parce que nous allons créer un référentiel sur notre compte GitHub. Donc, tout d'abord, vous devez faire cloner un dépôt à partir d'Internet. Donc celui-ci vous demandera d'affecter à votre compte sur votre GitHub. Pour ce faire, il vous suffit de cliquer sur Se connecter. Et puis il vous demandera d'ouvrir le navigateur où vous vous êtes déjà connecté sur GitHub sur le navigateur. Donc, lorsque vous cliquez sur Continuer en tant que navigateur, puis il apparaîtra pour moi ouvrir l'application GitHub Desktop. Et puis lorsque vous cliquez sur Ouvrir l'application de bureau GitHub, je serai connecté à mes dépôts, que je me connecte sur le navigateur. Et puis je les aurai ici pour pouvoir les cloner ou faire quoi que ce soit avec eux. Mais lorsque vous créez un projet d'Angular avec NX, le projet vient par défaut. Comme vous le voyez ici sont les fichiers de projet que nous avons travaillé comme ici, Apps, lèvres ou tout cela. Et nous avons ici les applications. Comme vous le voyez, nous avons un fichier git point et ce dossier point get, désolé, nous devons le supprimer car il est connecté à un autre dépôt qui est créé par un X. Jusqu'à présent, il est préférable de déplacer ce dossier. Et aussi cela pour je veux mentionner que ce dossier peut être caché sur le système Mac par défaut. Donc, ce que vous devez faire est juste d'appuyer sur Commande et Maj et point, puis cela vous donnera la possibilité de les voir. Donc, je vais voir Command Shift et point, et comme vous le voyez ici, je les montre et les cache. Sur Windows. Vous verrez le dossier clair et vous le verrez, et vous serez en mesure de le supprimer directement. Mais pour la sécurité est activée, Mac cache les fichiers qui commencent par un point. Supprimons donc le dossier point get, qui est déjà créé par un x. et je vais cliquer sur Déplacer pour gagner. Bien sûr, si vous êtes connecté, votre projet est connecté à un référentiel. Vous n'avez pas besoin de faire cette étape et vous n'avez pas besoin de la supprimer des fichiers. Maintenant, nous revenons à l'application de bureau GitHub pour créer un nouveau référentiel, mais à partir du disque dur. Donc, ce que je dois faire ici est juste de créer un nouveau référentiel. Et puis je vais lui donner un nom du même nom du dossier où cette source de code est là. Donc si je vais ici d'un niveau supérieur, je vois que j'ai ici des morceaux bleus. Et dans les bits bleus, j'ai les fichiers source que j'ai travaillé et créés avec n-x pour créer mon application Angular. Jusqu' à présent, nous allons d'un niveau vers le haut, comme dans la façon dont nous voyons le dossier de leur source. Et puis nous cliquons sur ouvrir. Et puis ici, nous devons mettre le même nom du dossier, qui contient le code source. Donc, dans mon cas ici, je vais dire un bits bleus et ensuite je vais cliquer sur créer un dépôt. Donc, dans ce cas, j'aurai le dépôt existant, que j'ai déjà. Et il sera initialisé avec un dossier GitHub ou GitHub. Donc, comme vous le voyez ici, nous avons le dossier Git est de retour, mais initialisé localement. Nous ne l'avons pas encore connecté à notre dépôt sur GitHub. Alors, comment pouvons-nous connecter cela à notre dépôt GitHub ? Tout d'abord, vous devez cliquer sur ce bouton. Vous dites Publier le référentiel. Bien sûr, vous êtes déjà connecté à votre compte sur GitHub, sur le bureau GitHub. Et aussi, nous allons créer un référentiel pour cela. Donc, tout d'abord, vous devez lui donner un nom. Donc il n'est pas nécessaire ici vous avez la liberté de donner le nom que vous voulez. Par exemple, je créerais e-shop là comme ça. Et puis c'est toujours quand vous voulez utiliser des pages GitHub, vous ne devez pas garder ce code privé. Vous devez le faire en tant que public. Pour le rendre privé. Et avec les pages GitHub, vous devez payer. Mais pour ça, c'est gratuit. Vous pouvez simplement le faire en tant que public, puis vous cliquez sur Publier le référentiel. Donc, dans ce cas, après que vous êtes sûr que le dossier dot get est retourné, C'est comme X créé ici, pas ici. Donc, vous devez savoir que c'est vraiment à l'intérieur du code source de votre application. Vous devez donc avoir ce dossier de point pour obtenir avant de créer un référentiel. Ok, je vais à mon compte GitHub pour être sûr que si c'est vraiment, le dépôt est créé. Donc, comme vous le voyez ici, si je vais dans les dépôts, j'ai mon dépôt qui est créé ici, initialisé avec les choses que j'ai par défaut créées par une documentation x. Donc, comme vous le voyez ici, nous avons tous les fichiers et les fichiers sources ici. Ok, Donc ce que nous devons faire ensuite est de construire l'application puis de la publier sur GitHub Pages. Et ceci, ce que nous allons voir dans la prochaine conférence. Pour l'instant, nous sommes prêts. Nous avons juste besoin de publier la construction des applications comme le magasin de moteur et l'administrateur sur nos pages GitHub. 195. Créer des applications de Frontend: Ok, maintenant nous avons publié notre dépôt sur GitHub. Maintenant, nous devons construire l'application et ce sera, ou nous serons en mesure de voir les changements et nous pouvons accéder au site Web de notre problème. Donc de cette façon, nous devons aller à ce code. Et si vous vous souvenez, nous étions en train d'ouvrir le projet, qui est le projet de première ligne. Et comme vous le voyez, nous allons ici à la racine. On n'a rien à faire. Fermons toutes les commandes ou les terminaux qui ne sont pas nécessaires. Maintenant, nous ouvrons un nouveau terminal. Encore une fois, le Build signifie que je veux construire mon application. Je n'ai pas besoin de télécharger tous ces fichiers. Je veux que les fichiers qui me donnent angulaire puissent être publiés et ils peuvent être utilisés en production. Donc, je n'ai pas besoin de télécharger tous ces fichiers source et de voir comment mon application fonctionne là. Parce que sinon je télécharge les fichiers source. Non, angular a une propriété qui vous donne la possibilité de construire l'application qui compresse tous les fichiers. Dans quelques fichiers, votre projet, tout sera dans ces fichiers comme nous le verrons plus tard. Donc, si nous allons au paquet JSON, nous verrons dans le script plusieurs scripts. Donc, comme vous voyez que nous avons un script de construction, qui est de dire mg construit. Mais si vous vous souvenez, nous avons dit qu'Angular ou NX est construit sur angulaire en quelque sorte. Ainsi, vous pouvez faire les mêmes commentaires avec un x, comme vous le faites avec des commentaires énergétiques ou angulaires. Jusqu' à présent que la construction d'une application, si vous avez un installé, vous dites juste NX build et ensuite vous spécifiez l'application que vous voulez utiliser. Exemple, je veux admin ou je veux et vous magasinez pour l'instant. Je veux n G Sharp. Donc on ne peut pas dire construire Angie, shopping de cette façon. Donc, lorsque vous appuyez sur Entrée, l'application sera facturé et il sera spécifié dans un dossier est appelé l'Est. Donc, dans ce dossier dist, dans les applications, vous verrez votre application ici. Donc, comme vous voyez que la construction est terminée et nous avons seulement quelques fichiers dans le dossier dist. Donc, nous n'avons pas toute la source du projet et ce dossier que nous allons télécharger sur notre GitHub. Ou vous pouvez le télécharger sur votre serveur. Ensuite, on peut le voir. Ou vous pouvez voir l'application que nous construisions déjà et vous pouvez la parcourir sur le site, sur le public. Mais si nous voulons déployer ce projet sur GitHub Pages, GitHub Pages a quelques conditions que nous devons suivre. Tout d'abord, nous faisons la même chose. Nous faisons NX construire n'importe quel magasin, mais nous devons spécifier un dossier qui est appelé bain de sortie. Et ici, nous dans ce chemin de sortie, vous spécifiez un chemin spécifique qui aime GitHub, qui est appelé docs. Et puis il y a un mot-clé qui s'appelle Bayes HRF. Et ici, nous spécifions HRF ou le lien qui sera généré dans le fichier d'index, comme vous le voyez ici. Parce qu'ici, il dira que la base H ref est slash. Mais nous avons besoin que notre FRS de base soit le même nom du projet que nous avons créé sur GitHub, le même nom du dépôt. Si vous vous souvenez, j'ai ce nom de dépôt qui s'appelle e-shop. Nous devons donc mettre le même nom parce que GitHub ne voit aucun autre nom, seulement le nom du dépôt. Donc nous devons dire ici, barre oblique, c'est très important de mettre une barre oblique. Ne l'oublie pas. Vous devez dire e-shop, le même nom exactement du dépôt, puis une autre barre oblique. Donc, dans ce cas, nous allons construire notre application dans ces conditions. Alors appuyez sur Entrée et voyons ce qu'il va construire. Joli, cette construction est terminée. Mais bien sûr pas sur le dossier dist, il sera sur ce dossier docs, comme vous le voyez ici, Tooele sera exactement la même construction que nous avons dans le dossier dist, mais il sera dans un autre dossier aussi. Et la référence H de base sera E-Sharp comme nous l'avons spécifié dans le commentaire. Ce sont donc les conditions de base que vous devez faire pour construire votre application. Bien sûr, nous n'avons pas fini. Nous construisons maintenant l'environnement de développement. Nous ne construisons pas leur production. Mais je veux juste vous montrer étape par étape pour être clair pour vous de plus en plus. Dans la prochaine conférence, nous verrons comment construire ou déployer l'ensemble de ce projet ou ces fichiers pour pouvoir naviguer sur le site que nous avons créé pour N D sharp. 196. Déployer des applications de Frontend sur des pages de Github: Ok, maintenant après cela, nous avons créé le déploiement dans le dossier chiens et nous allons le déployer sur le serveur, souvent des pages GitHub. Alors, comment peut-on faire ça ? Tout d'abord, je vais aller sur GitHub Desktop. Encore une fois, comme vous le voyez ici, plusieurs fichiers ont été créés récemment. Il est préférable de toujours créer une nouvelle branche sur GitHub, qui sera comme le nom de la branche où vous allez toujours déployer votre application sur GitHub Pages. Pour qu'on puisse dire ça. Brian peut être GH et ensuite on peut dire des pages comme ça. Et puis nous créons une nouvelle branche. Et puis nous cliquons sur créer une branche. Donc on change de marque. Mais ici, nous devons dire apporter mes modifications à GitHub Pages parce que nous avons créé cette build. Donc nous devons aussi déplacer ces fichiers, les nouveaux fichiers, comme vous le voyez ici, tous en vous. Nous devons aussi les déplacer. Ensuite, vous branchez. Donc, je dis clignoter mes changements aux pages. Donc, quand nous pourrons aller et cliquer sur Changer de branche, ils seront tous déplacés ici. Après cela, l'étape consiste à publier la branche. Nous devons mettre cette branche sur la page GitHub et aussi sur notre dépôt GitHub. Alors maintenant tout est publié. Mais d'abord, nous devons envoyer ce message. Nous devons donc commenter ces fichiers aussi. On doit dire ça, ok, ces dossiers sont nouveaux. Nous devons les valider et les pousser sur le serveur. Donc, nous devons le dire à GitHub. Pour cela, nous pouvons créer un message. Nous pouvons dire GitHub Pages, prédire ours, par exemple. Et puis nous mettons tous ceux que nous pouvons dire commit en raison de la branche GH Pages. C' est engagé. Et puis nous devons pousser à nouveau. Nous poussons donc à nouveau nos changements que nous avons créés ici. Maintenant, nous n'avons pas de modifications au fichier. Revenons à notre page GitHub. Et je vais au dépôt que j'ai créé, qui s'appelle E sharp. Alors rappelez-vous que vous allez dans le même référentiel et après cela, nous allons à Paramètres, qui est situé ici à l'intérieur du référentiel. Et puis nous cliquons sur Paramètres et répondons aux choses. Vous verrez comme plusieurs options. L' un d'eux est des pages. Et par défaut, l'application sera publiée boue sur le dossier racine, nous devons donner le dossier spécifique. Nous devons donner les fichiers que nous avons créés par la construction, qui sont à l'intérieur des documents. On n'a pas besoin de construire tout ça. C' est mal parce que de ne pas travailler. Mais pour cela, nous devons spécifier un dossier. Je vais juste lui donner un idiot. Il apparaîtra ici. Donc, je vais dire donnez-moi le dossier docs, puis Enregistrer. Et comme vous le voyez, il est dit que votre côté a été publié à ce lien. Lorsque vous cliquez sur ce lien, nous verrons que nous avons une page par défaut, qui était le LisezMe. Cela prend un certain temps parce que nous devons attendre un moment où vous passez d'un dossier à l'autre. Vous devez donc attendre un peu jusqu'à ce qu'il soit déployé. Donc, après un certain temps, il sera déployé. Et aussi, vous pouvez vérifier ce domaine. Donc, comme vous le voyez ici, il a été déployé. Tellement gentil. Donc, nous avons tout ce lien et nous avons notre fin. Vous magasinez ici. Mais il y a un problème qui n'est pas de données. n'y a aucune connexion à la base de données. Et si vous vérifiez ici, la console à l'intérieur, nous aurions beaucoup d'erreurs. Que sont ces erreurs ? Ça veut dire que localhost 3000. Donc, nous sommes toujours sur l'hôte local. Le back-end, il se connecte toujours à l'hôte local, demandant des catégories et demandant des produits. Nous devons donc changer ce lien, localhost 3000 à notre application Heroku, que nous avons créé. Et cette application sera E-Sharp retour et bleu bits Heroku application. Et ici, nous pouvons accéder aux API comme nous l'avons vu dans la construction du back-end. Alors comment on peut arranger ça. Donc, comme vous le voyez ici, c'est dire que votre site est publié. Donc, toujours quand vous faites quelques changements, vous devez attendre un peu jusqu'à voir les changements qui sont publiés ici. Ça prend donc un peu de temps. Donc maintenant, après avoir publié, nous devons changer ce lien. Donc, si vous vous souvenez, dans l'application lorsque nous étions en train de créer l'application, nous avions dossier environnements. Et je vous ai dit que nous avons deux types d'environnements où nous allons utiliser. L' un est pour la production, et ici nous avons placé notre URL API et l'autre pour le développement local. Et nous en avons mis quatre dans ce temps pour les deux, la même chose, juste au cas où nous allions construire la production. Mais maintenant, nous sommes arrivés à ce moment. Nous devons remplacer. Le lien qui est créé pour l'hôte local ici. Mais sur le fichier prod d'environnement, nous devons le changer pour notre lien Heroku. Donc ici, je vais remplacer http localhost 3000 par le lien que j'avais de l'application Heroku. Donc nous aurons celui-ci et ce sera ma production. Donc, lorsque nous enregistrons cela, il sera sauvegardé pour toutes nos applications. Nous devons reconstruire le projet. Mais ici, après avoir construit à nouveau le projet, nous devons utiliser un drapeau qui est appelé large. Comme la construction, l'action large. J' ai besoin de la production au-delà. Je ne veux pas la construction normale, le développement au-delà parce qu'ici nous avons l'acier, le développement construit. On n'a pas la production. Comme vous le voyez, nous avons ici défaire dessus. Et tout le code source est disponible ici parce que c'est le développement, construction n'est pas la production. Et la taille du paquet de ceci, c'est très grand parce qu'il n'est pas compressé. Alors que la production est cultivée os pressant pour moi tous les fichiers. Et il sera minifié et il sera plus rapide, surtout pour les connexions Internet faibles. Donc, pour cela, nous devons marquer notre commande ici avec un large, nous n'avons pas besoin d'utiliser un expulsé dans un travail. Seulement ce dont nous avons besoin pour le signaler à l'étranger. C' est exactement le même commentaire. Donc, après cela, nous exécutons la commande. Et comme vous le voyez que NX commence à exécuter n'importe quelle production de construction de magasin. Vous voyez que le Gorman est changé. Nous avons maintenant la production et il va utiliser l'environnement, les fichiers. Donc maintenant notre construction est terminée. Et comme vous le voyez ici, si nous allons à docs, nous avons de nouveaux fichiers et ils sont toujours un peu de hachage pour empêcher leur argent. Et aussi, nous avons l'index HTML a été mis à jour et aussi les fichiers précédents où il a été supprimé. Donc, pour cela, nous devons pousser ces fichiers. Revenons donc à notre bureau GitHub après avoir fait toutes ces modifications. Et puis, comme vous le voyez, il y a plusieurs changements effectués. Certains fichiers ont été supprimés, qui sont de l'ancienne construction, et nous avons créé un nouveau fichier. Nous devons donc créer un nouveau message. Nous pouvons lui donner un nom comme le changement à la production. Donc, dans ce cas, nous aurons le changement à la construction de production et nous le pousserons à GH Pages, puis nous pousserons ce code ici. Parfois, vous obtenez ce message que vous devez récupérer. La télécommande change. Donc vous dites juste tirer à nouveau et ensuite vous pouvez juste pousser à nouveau. Donc parce que parfois GitHub ajoute des variables ou des fichiers basés sur la construction avec GitHub Pages. Après cela, nous avons tout déployé. Nous allons de nouveau à nos pages GitHub et nous rafraîchissons. Nous devons attendre un certain temps car voici que votre site est prêt à être publié. Nous devons attendre un moment jusqu'à ce qu'il soit publié dans le domaine ici. OK, il est écrit ici que mon site a été publié. Alors je vais à nouveau à notre magasin de bonbons, rafraîchir. Ok, on a toujours ce problème. Nous ne voyons toujours pas même les fichiers ont été publiés comme vous le voyez ici dans la source, nous avons toujours ce problème. Nous devons donc résoudre ce problème d'une manière ou d'une autre. Donc, comme vous le voyez, si vous vous souvenez que nous utilisions dans un fichier décent Angular pour chaque projet, par exemple, j'ai une application Admin. Je voyais quand vous voulez construire l'application juste pour remplacer les fichiers qui sont appelés environnement Ts avec des points larges de l'environnement, UC. Nous remplaçons ces fichiers. Et ces fichiers, si vous vous en souvenez, nous les avons édités. L' un est pour la production et l'autre pour le développement. Mais l'affaire s'est produite uniquement pour l'application d'administration. Nous devons également faire de même pour l'application NG shop. Donc je dois aller à et vous faire une demande de magasinage. Je vais faire défiler ici. Nous avons N D application forte. Et puis il utilise toujours l'ancienne configuration parce que nous ne les avons pas mises à jour. Donc j'ai fait cette erreur par, par but juste pour vous montrer que si vous n' avez pas parce que j'ai eu beaucoup de questions à ce sujet précédemment. Donc, vous êtes sûr que vous remplacez ceci, l'ancien. Si vous revenez à la conférence sur les variables d'environnement, vous devez être sûr que vous n'utilisez pas non plus l'environnement spécifique à l'application, mais que vous utilisez celui qui est public et partagé. Donc nous avons celui-là. Et puis nous devons relancer le commentaire de construction. Donc, nous devons faire attention que nous devons avoir cela comme à l'étranger et ensuite lancer le commentaire de la production. Donc ici, ils sont construits finis. Encore une fois, nous devons engager les changements, que nous n'avons plus. Si cela est permis, nous avons besoin, encore une fois, de faire un message d'engagement. On peut dire changer les fichiers, donc on peut le dire ici. Et puis nous nous engageons à GitHub Pages. Nous poussons, et nous devons attendre à nouveau le déploiement de notre application. Donc, quand je vais à GitHub Pages, rafraîchissez et je verrai qu'il va être construit. Cela changera en vert lorsque la construction est prête. Ok, comme vous le voyez ici, l'application a été déployée. Revenons sur le lien de notre boutique ND en ligne sur les pages GitHub. Nous rafraîchissons, nous voyons que nous n'obtenons aucune erreur. Enfin, nous allons ici, nous fermons la console, et voici notre application. Donc, si nous allons à nouveau au back-end ou à leur réseau et rafraîchir, nous verrons que notre réseau demande d'ici ou se refroidit. Donc nous avons ici le truc Heroku en haut. Donc, à partir de cette API, nous consommons nos données. Donc c'est comme ça que c'est très agréable. Maintenant, nous avons toute l'application fonctionne. I have Ajouter au panier, Ajouter au panier. Je vais à mon chariot. Et comme vous le voyez, la vitesse est très grande. C' est comme si je dirigeais le projet sur local. C' est très rapide et consommant très bon et formant très bon. Donc, de cette façon, nous construisons l'application sur les pages GitHub afin que vous puissiez envoyer ce lien à tous ceux que vous voulez visiter pour votre application. Donc, la question est, je veux aussi construire l'application Admin, comment je peux la construire. Nous devons donc construire l'application de la boutique NDI et aussi l'application du panneau d'administration, que nous avons créé précédemment. Malheureusement, ce GitHub Pages n'est lié qu'à un seul référentiel. Donc nous pouvons, nous ne pouvons pas créer ici plusieurs pages sous un seul dépôt. Donc, pour cela, vous devez créer un autre référentiel, que vous pouvez appeler E-Sharp admin. Et dans ce cas, vous pouvez y déployer vos modifications. Vous pouvez également gérer votre déploiement de manière à ce que GitHub utilise les tampons qui sont déployés à partir de votre environnement. Vous n'avez pas besoin de déployer tout le code, tout le code source. Vous pouvez simplement pousser le code qui est généré par les chiens. Et ceci, ce que nous pouvons voir dans la prochaine conférence, je vais le faire devant vous rapidement. 197. Créer plusieurs scripts d'APP, créer de multiples scripts: Ok, dans cette conférence, nous allons faire une facture pour plusieurs applications. Donc, si vous voulez d'abord que vous n'avez pas à télécharger votre code source sur GitHub. Vous ne pouvez télécharger la construction, production de votre dossier de projet que, comme je vous l'ai dit, nous allons créer deux dépôts pour un est ND shop et un pour l'application de panneau d'administration. Donc, mais d'abord, nous devons spécifier un chemin qui n'est pas à l'intérieur du dépôt que j'ai créé à l'intérieur de notre, comme notre code source, nous le faisons en dehors de notre code source. Donc, nous pouvons spécifier le chemin dans le commentaire comme ceci. On peut faire un pas comme ça. Donc, nous pouvons dire sortir du dossier actuel, qui est maintenant bits bleus, cette organisation le fichier source et créer une application qui est appelée boutique NG par exemple. Donc, nous pouvons créer celui-ci en tant que N G pointu. Et nous pouvons bain de base, qui peut être aussi magasin NG. Donc, dans ce cas, nous devons être sûrs de créer un dépôt exactement avec ce nom. Tu te souviens de ça ? Donc, nous appuyons sur Entrée et notre application va se construire jusqu'à la fin de la construction. Vous voyez ici que je suis dans mon dossier d'organisation. J' ai donc besoin de faire un pas en avant. Comme en dehors de notre dépôt, vous n'avez pas à le mettre dans le même dépôt. Donc, une fois le projet de loi terminé, nous avons aussi besoin d'aller à nos dossiers ici comme nous le voyons, et d'aller d'un pas vers le haut. Et nous verrons que nous avons N D pointu ici. Donc j'ai maintenant mes productions de fichiers sont ici. Donc, je n'ai pas besoin d'avoir notre téléchargement le code source. Donc celui-ci sera, va créer un dépôt pour elle. Nous pouvons donc utiliser GitHub Pages pour déployer celui-ci. Alors, comment peut-on faire ça ? Encore une fois, nous ferons les mêmes étapes que celles que nous avons faites précédemment. Nous n'allons pas utiliser ce dépôt, mais nous en utiliserons un nouveau. Nous dirons créer un nouveau dépôt. Nous cliquons donc sur créer un nouveau référentiel. Et ce nom de dépôt sera exactement le même nom que notre dossier. Donc, nous avons ici N D forte, comme je vous l'ai dit précédemment, et où nous devons choisir le chemin, il sera exactement sur la même route ici. Donc, en une étape vers le haut de notre fichier source où il est déployé, donc je ne peux pas voir le dossier. Je n'entre pas à l'intérieur. Non, je ne peux pas voir le dossier lui-même ici. Donc, je clique sur Ouvrir, même nom ici, je clique sur Créer un référentiel. Et dans ce cas, notre dépôt sera créé. Et puis nous avons juste besoin de dire Publier le dépôt. On garde le même nom. Et aussi, nous disons Publier le dépôt, mais nous devons le rendre public. Dans ce cas, je vais vous montrer que si je vais maintenant à mon compte GitHub, je n'aurai pas le code source dans cette catégorie. Donc je peux garder mon code précédent de la source comme celui-ci que nous avons créé pour l'e-shop. On peut garder celui-là en privé. Vous n'avez pas à le mettre en public, mais un nouveau dépôt qui est créé, comme vous le voyez ici, nous allons dans les dépôts. Et puis j'aurai N D pointu ici. Donc, comme vous le voyez, je n'ai que ces fichiers sources ici. Je ne suis pas désolé, les fichiers de production. Nous n'aurons pas le code source ici et c'est public. Donc, je m'en fiche parce qu'ils sont hachés et ils sont minimisés comme vous le voyez ici, ce qui n'est pas facile pour la normale ou les utilisateurs de récupérer mon code source à nouveau. Donc de cette façon, je vais à la séance et ensuite je vais aux pages. Et puis nous dirons que la source sera comme Directory, vous pouvez dire main, puis la racine elle-même. Donc, vous n'avez pas besoin d'utiliser le dossier docs, vous pouvez dire route car nous construisons directement sur la racine de ce projet. Donc, vous avez juste besoin de spécifier le chemin et aussi la branche. Donc je le garde sur la branche principale parce que nous n'avons qu'une seule marque, bien sûr vous pouvez créer une autre usine, mais dans ce cas nous n'avons pas besoin parce que nous avons seulement les fichiers de production. Et après cela, nous attendons que leur site Web soit publié. Nous disons, d'accord, votre site est publié. Je vais de nouveau ici sur le site et je le verrai produit précédemment. Et voici le chemin qui est ND boutique. Donc je peux retourner à notre dépôt, que j'avais pour la fin que vous magasinez et je peux le fermer, je peux le rendre privé. Nous avons donc du sodium pour le test précédent que nous avons fait auparavant. Donc, le E Sharp, je vais le faire comme un privé afin que vous ne puissiez pas revenir à Paramètres. Vous pouvez dire que ici la sécurité ou gérer l'accès. Et puis tu remets ton mot de passe. J' ai ici confirmer le mot de passe. Et puis je vais changer le dépôt d'accès pour ne pas être public, mais je veux le mettre comme un privé. Je vais aller ici pour changer la visibilité du référentiel. Je vais le mettre comme un privé. Et puis je comprends ce changement. On copie juste cette partie. Donc, dans ce cas, personne ne verra mon Par exemple, le code source, parce que j'ai déjà référentiel pour le public ou le code de production qui est publié pour la page publiée ou pages GitHub. Donc, faisons la même chose pour l'application admin. Donc, tout d'abord, nous devons utiliser à nouveau le même commentaire, mais pas avec NDI shop. Nous allons le faire avec l'application Admin. Mais laisse-moi te montrer un truc. Ce n'est pas forcément toujours faire cette commande. Toujours, toujours. Nous pouvons faire un poids comme nous pouvons enregistrer ce commentaire dans le paquet JSON dans mon projet. Comme si nous pouvions créer une nouvelle construction pour ici. Donc, nous pouvons dire, par exemple, que je crée un nouveau script dans le paquet JSON. Je dis, par exemple, construire large, par exemple, de cette façon, comme admin. Donc, nous pouvons dire panneau d'administration, application de panneau d'administration. Et le commentaire pour cela sera exactement le commentaire que nous avons utilisé ici. Mais nous devons remplacer cela par admin et aussi ici avec admin aussi. Et je dis que NX construit l'application Admin, pas le produit ou l'application. La même chose que nous pouvons faire aussi bien pour notre M construit sur un magasin N D. Donc, vous n'avez pas à enregistrer ce commentaire d'une manière ou d'une autre. Vous pouvez simplement dire, apporté construire un administrateur fier toute barbe à l'étranger. L' application qui est N G forte par exemple. Donc, dans ce cas, vous n'avez pas à écrire toutes ces lignes ne sont pas un commentaire. Donc on répare ça. On a choisi une autre virgule. On sauve tout. Et maintenant, je vais exécuter la commande que j'ai pour comme la production construite pour l'administrateur. Alors, comment peut-on faire ça ? Je dis juste npm run et je spécifie la commande que je veux exécuter. Je dirai construire, mais bizarre. Et puis administrateur. Et puis nous verrons qu'il va exécuter ce commentaire, ce qui est si génial pour moi. Donc, après cela, l'application a été construite, mais l'administrateur. Revenons donc à notre bureau GitHub et créons un nouveau référentiel. Les mêmes étapes que nous avons faites avec la boutique NDI. Alors j'irai ici. Je verrai tous mes dépôts. Celui-ci contient mon code source, il contient le magasin NG, mais la facture de production. Et je vais en ajouter un autre pour la construction de production admin. Donc, ici, nous devons créer un autre nom, admin, exactement les mêmes noms, comment nous les construisons précédemment. Vérifiez le chemin. Je pense que c'est déjà construit. Nous avons ici la construction admin. Et encore une fois, nous allons créer le dépôt. Et nous voyons que notre dépôt a été créé. Nous publions le dépôt et nous devons le rendre public. On n'a pas à le garder en privé. Alors nous créons ou publions le dépôt que nous voulons. Ensuite, nous allons sur notre compte GitHub et allons dans nos dépôts. Nous verrons à nouveau le dépôt d'administration ici. Donc, je vais cliquer dessus. Je verrai cela construit pour cela. Je vais aller pour les paramètres, j'irai aux pages. Et puis sur les pages, je vais choisir la branche principale, puis le dossier racine. Et puis je vais cliquer sur Enregistrer. Après cela, le site Web se prépare à être construit. Et puis nous allons le vérifier dans l'application d'administration quand il sera prêt. Donc, le site est publié à ce lien, nous cliquons dessus. Ok, on a l'administrateur et tout va bien. Essayons de nous connecter. J' aurai ici mes identifiants. Donc, nous avons ici mon mot de passe, je clique sur Soumettre. Nice, j'ai ici l'administrateur, exactement comment nous l'avons dans notre application quand nous le développons. Et tout fonctionne parfaitement et en douceur. Il s'agit donc de la construction de la production. Si vous voulez que je fasse pour vous l'application à exécuter sur un serveur personnalisé en utilisant FTP. Je pense que ce sera facile pour vous. Si vous voulez que je fasse une vidéo, vous pouvez m'envoyer un message ou vous pouvez ajouter une question dans l'assurance qualité. Et je vais ajouter une vidéo pour le téléchargement FTP afin que vous puissiez voir comment nous pouvons construire notre application sur un serveur personnalisé, pas sur GitHub Pages. Je vais aussi joindre ce paquet de fichiers JSON, comment il a été mis à jour avec ces commentaires. Vous pouvez donc utiliser ces commentaires pour construire votre application.