Vue. js 3 & Firebase pour débutants

1. Bienvenue au cours !: [MUSIQUE] Vue.js est un framework frontal incroyable et facile à utiliser pour créer des applications Web. Dans ce cours, nous allons l'utiliser pour créer une application de pizzeria pleine de fonctionnalités. Nous allons découvrir toutes les nouvelles fonctionnalités de Vue Version 3 lors de la construction de ce projet. De plus, nous associerons notre projet à Firebase, afin d'appliquer un backend à notre application. Cela nous donne une base de données en temps réel pour stocker nos utilisateurs, nos commandes et les pizzas du menu. Il sera également utilisé pour fournir des comptes utilisateurs et des authentifications, y compris les administrateurs et les utilisateurs réguliers. Le projet comporte de nombreuses fonctionnalités telles qu'un menu et un panier, ajout d'articles et la possibilité de passer des commandes. Nous avons une zone d'administration où les utilisateurs autorisés peuvent ajouter et supprimer des pizzas du menu. Vos commandes peuvent être affichées et supprimées, tout comme la possibilité de définir d'autres éléments comme le font les administrateurs. Toutes ces données proviennent de notre base de données. Bonjour. Je m'appelle Chris et je suis un développeur Web expérimenté. J'ai également enseigné à plus de 100 000 étudiants, à la fois en ligne et en personne. Si vous souhaitez créer de superbes applications frontales avec la version 3 de Vue et utiliser la base de données et l'authentification Firebase, ce cours est fait pour vous. J'ai hâte de vous voir lors de la première leçon. 2. Ce dont vous aurez besoin: Pour ce cluster, vous n'aurez aucun achat supplémentaire à effectuer. Tous les logiciels que nous allons utiliser seront gratuits et open source. Alors il n'y a en fait que peu choses dont nous aurons besoin. Mais avant de le faire, examinons maintenant exigences afin de ne pas être trop débordés. Comme il s'agit d'un cours de développement Web, vous devez au moins connaître les bases et on supposera que vous connaissez assez bien le HTML et le CSS et que à l'aise avec JavaScript. Vous n'avez pas besoin d'être un expert, mais vous devez au moins connaître les bases. J'ai des cours disponibles sur chacun d'entre eux si vous devez d'abord vous rafraîchir. De plus, si vous avez de l'expérience d'autres frameworks ou bibliothèques JavaScript tels que Angular ou React, ou même la version 1 ou 2 de Vue, ce sera un avantage considérable, mais pas essentiel. De plus, nous n' utiliserons que peu le terminal, mais si vous ne l'avez pas utilisé par le passé, ne vous en mais si vous ne l'avez pas utilisé par le passé, ne vous en faites pas. Nous n' utiliserons que quelques commandes simples. Visual Studio Code, ce sera l'éditeur de texte que je vais utiliser tout au long de ce cours. Il est actuellement très populaire dans le monde du développement Web, mais vous pouvez utiliser n'importe quel autre éditeur de votre choix. Si vous en avez besoin, le lien de téléchargement est disponible ci-dessous, et il est également totalement gratuit. Un autre avantage est qu'il est livré avec un terminal intégré, que nous utiliserons pour configurer notre projet et installer les packages dont vous pourriez avoir besoin. Mais aussi, si vous êtes à l'aise avec le terminal et que vous avez peut-être vos propres terminaux externes, tels que Item, vous pouvez également l'utiliser. Dans cet esprit, passons à la vidéo suivante où nous verrons comment configurer notre projet à l'aide de Vite. 3. Créez un outil avec du vite: Pour commencer notre projet, nous allons commencer par une configuration locale. Nous pouvons exécuter Vue.js sur notre propre ordinateur. Pour cela, nous utiliserons un outil de construction appelé Vite. Vite a en fait été créé par Evan You qui a également créé Vue.js. Cet outil de création nous permettra d'utiliser les composants d'un seul fichier, c' est-à-dire d'écrire une partie de notre site Web appelée les composants dans un seul fichier. Cela nous permettra de garder les choses bien organisées lors de la création de notre projet. Mais cela signifie également que nous aurons besoin d'un outil de création pour rassembler tous ces composants distincts et les regrouper pour créer notre application. Vites nous offre également de nombreux autres avantages, tels qu'un serveur de développement, le remplacement du module actif, qui mettra instantanément à jour le projet dans le navigateur sans avoir à actualiser la page, nous apporterons une modification. Il existe également de nombreux autres avantages. Vous devrez installer Node.js si ce n'est pas déjà fait. Vous pouvez le faire depuis nodejs.org. Allez-y et téléchargez la dernière version pour votre système d'exploitation. J'utilise un livre Mac si vous utilisez Windows, il devrait également le détecter automatiquement. Si ce n'est pas le cas, cliquez simplement sur l'autre téléchargement. Ce téléchargement inclura également npm, que nous utiliserons pour configurer notre projet et également ajouter des packages selon nos besoins. Ensuite, passez au terminal, que vous pouvez utiliser en tant que terminal autonome si vous préférez. Vous pouvez également utiliser celui intégré à Visual Studio Code. La simplicité, c'est celle que je vais utiliser. Accédez au code Visual Studio, aux options, au terminal, puis au nouveau terminal. Nous allons maintenant avoir ce terminal en bas, que nous pouvons utiliser pour écrire des commandes. Si vous utilisez le terminal pour la première fois, ne vous inquiétez pas, nous avons juste besoin quelques commandes simples. Vous pouvez utiliser un terminal pour parcourir les fichiers et les dossiers de votre ordinateur, comme vous pouvez le faire avec la souris en cliquant à l'intérieur d'une fenêtre. Ici, cependant, nous utilisons des commandes, mais nous devrons naviguer jusqu'à l'endroit où nous voulons ajouter notre projet. Je veux rester simple et l'ajouter au bureau pour un accès facile. Je suis actuellement dans le répertoire personnel de mon utilisateur. Nous pouvons utiliser la commande LS pour répertorier tous les fichiers et dossiers de ce répertoire. Ensuite, nous pouvons utiliser la commande cd pour accéder à l'un de ces répertoires que vous souhaitez. Pour moi, cela va vers le bureau, que nous pouvons voir dans la liste ici. cd pour le changer sur le bureau. Cela distingue également les majuscules des minuscules. Appuyez sur « Enter ». Nous pouvons maintenant voir que nous sommes dans le répertoire Desktop. Mais si vous le souhaitez, vous pouvez accéder à n'importe quel autre répertoire de votre choix. Mais juste avant de créer le projet, nous devons vérifier que les nœuds et npm sont correctement installés. Pour ce faire, nous allons taper node dash v, qui signifie version. Le numéro de version installé sera renvoyé . Ma version actuelle est la numéro 18. Vous aurez besoin d'au moins la version 15 du nœud pour continuer. De toute évidence, pour tout numéro de version supérieur à 15, vous serez prêt à partir. Mais si vous voyez un message d'erreur ou un avertissement, vous devrez revenir en arrière et vous assurer que nœud est correctement installé. Ensuite, nous pouvons vérifier npm, donc npm dash v. Nous ne voyons aucun problème ici. Pour créer un projet View JS à l'aide de Vite, nous devons exécuter cette commande. C'est du npm dedans. Afficher. Au plus tard. C'est une entrée. Il nous demande d'installer les packages suivants, savoir Create View. C'est très bien. Appuyez sur « Y » ou appuyez sur « Entrée ». Nous avons ensuite posé une série de questions. Tout d'abord, le nom du projet, le mien sera Pizza Planet. Vous pouvez le modifier si nous le souhaitons. Nous n'allons pas utiliser TypeScript. Nous allons appuyer sur Non, nous n'avons pas besoin du support JSX, donc nous allons opter pour « Non ». Voulez-vous ajouter le routeur de visualisation ? Oui, nous le faisons. Nous y jetterons un coup d'œil bientôt. Si vous voulez une gestion d'état, nous allons sélectionner Non car nous utilisons une gestion d'état dans des fichiers composables. Nous verrons également comment procéder tout au long du cours. Nous ne couvrirons pas l'intestin, alors nous allons appuyer sur Non et Non. Oui Longueur. Cela peut être oui. C'est à vous de décider. Plus jolie ? Oui Bien, et nous avons maintenant terminé. N'oubliez pas qu'auparavant, nous utilisions la commande cd pour accéder au répertoire du bureau. Maintenant, nous avons créé un nouveau répertoire appelé pizza planet, se trouve maintenant dans notre bureau. Ce que nous devons faire, comme indiqué ici, c'est maintenant passer au répertoire Pizza Planet, donc cd, pizza dash planet ou le nom du projet de votre choix. Nous devons ensuite exécuter npm install, qui installera tous les packages dont nous avons besoin pour nos projets Vue. Bien, les packages sont maintenant tous installés. Pour démarrer notre serveur de développement, nous devons exécuter npm, exécuter dev. C'est Enter. Cela nous donnera ensuite une adresse Web à ouvrir dans le navigateur. Nous pouvons le copier ou cliquer sur Commande ou Contrôle, ce qui l'ouvrira dans le navigateur. C'est le point de départ de notre projet, ce qui signifie que tout fonctionne correctement. Depuis que nous avons configuré le routeur de visualisation, nous en reparlerons un peu plus tard. Nous verrons également un lien Accueil et un lien À propos pour passer de l'un à l'autre. 4. Images de projet: Tout au long de ce projet, nous utiliserons certaines images du projet. Vous pouvez télécharger le vôtre si vous préférez, ou vous pouvez utiliser exactement les mêmes que ceux que j'utilise. Si vous voulez suivre et utiliser les mêmes, dans GitHub, j'ai ce référentiel qui est disponible sur github.com/, mon nom d'utilisateur, qui est chrisdixon161/pizza-planet-v3-images avec un tiret entre chaque mot. Il s'agit d'un référentiel simple. Tout ce que nous avons à l'intérieur est ce dossier d'images avec les six images que nous allons ajouter à notre projet. Si vous souhaitez les utiliser, cliquez simplement sur le bouton Code. Téléchargez le fichier zip. Une fois que c'est terminé, vous pouvez cliquer dessus pour l'ouvrir. Ensuite, nous devons l'ajouter à notre projet. Tout d'abord, accédez à Visual Studio Code ou à votre éditeur de texte. Ce que nous devons faire, c'est ouvrir notre projet à l'intérieur d'ici. Faites glisser le pointeur sur le dossier du projet que nous avons créé dans la vidéo précédente. Le mien est stocké sur le bureau. Faites-le glisser dans Visual Studio Code. Nous voyons maintenant tous les fichiers et dossiers de notre projet V dans la barre latérale. Il se peut également que nous devions rouvrir le terminal. Le terminal, puis accédez à Nouveau. Nous participons actuellement à un projet pizza-planet. Nous pouvons exécuter npm, exécuter dev, qui l'ouvrira à nouveau avec ce lien. Clic de commande ou de contrôle. Bien. Tout va bien. Ensuite, si nous allons dans nos images, puis dans notre dossier de projet, que nous venons d' ouvrir dans Visual Studio, allons dans le dossier source, dans les ressources, puis nous pouvons faire glisser le dossier des images à l'intérieur. Maintenez ça enfoncé. Nous pouvons également les voir dans une barre latérale si nous ouvrons la source, dans les ressources, et voici nos images que nous allons utiliser pour ce projet. Encore une fois, si vous souhaitez utiliser vos propres images, vous pouvez les ajouter à un dossier d' images à l'intérieur et les utiliser au fur et à mesure de l' avancement du projet. Mais maintenant que nous pouvons les utiliser, nous allons passer à la section de routage, où nous verrons comment passer d'une page à l'autre. 5. Vues Ou Composants ?: Dans cette section, nous allons examiner quelques routage de base qui nous permettront de basculer entre les différentes pages de notre application. Mais juste avant de le faire, je voudrais jeter un coup d'œil à deux fichiers différents que nous allons utiliser. Il s'agit de vues et de composants. Voyons quelle est la différence entre les deux. Tout d'abord, nous avons la notion de points de vue. Il s'agit de fichiers qui contiennent le contenu de chaque page affichée. Une application ou un site Web classique utilise des liens tels que Accueil, À propos de nous et Contactez-nous, et chacun de ces liens renvoie vers une nouvelle page. C'est ainsi que nous utiliserons les points de vue. Ensuite, les composants sont généralement des éléments plus petits de notre application, qui peuvent être soit un élément autonome, soit réutilisés sur les composants sont généralement des éléments plus petits de notre application, qui peuvent être soit un élément autonome, soit plusieurs pages de vues. Un composant peut être n'importe quel bloc de contenu tel qu'une carte de localisation, un produit sur une boutique ou même un simple bloc de texte. Les composants peuvent également être réutilisés soit en répétant le contenu sur plusieurs pages, soit en transmettant les données dynamiques d'un composant. Les fichiers de composants et les fichiers de vue sont identiques. Ils ont également le même contenu et structure puisqu'ils sont tous deux des composants de vue. Mais les avoir dans des dossiers différents permet de mieux organiser les choses. En résumé, une vue est une page nous pouvons utiliser pour passer d'une page à l'autre sur notre application. En général, un composant est une partie plus petite souvent plus réutilisable de notre page. Nous les stockons généralement dans leurs propres dossiers appelés vues et composants afin de les rendre plus organisés. C'est ce que nous allons examiner ensuite. 6. Vues et itinéraires: Dans le navigateur, notre projet est ouvert. Nous avons brièvement examiné cette page d'accueil et les liens À propos qui y sont fournis. Nous passons d' une page à l'autre ou ces deux vues que nous venons de découvrir. Nous pouvons voir ces deux fichiers de vue dans l'éditeur. Accédez au code de Visual Studio avec le projet ouvert dans le dossier source où nous écrirons tout notre code. Nous avons ce dossier appelé views. Il y a le About et le HomeView entre lesquels nous passons simplement de l'un à l'autre dans le projet. L'intérieur de ces fichiers vous semblera assez familier si vous avez déjà utilisé Vue.js par le passé. Ce ne sont que des fichiers de composants dans lesquels se trouve la section script, dans laquelle nous écrivons tout notre code JavaScript et importons tous les fichiers dont vous pourriez avoir besoin. Puis aussi une zone de modèles juste ici. C'est dans cette zone que nous écrivons notre code HTML. Nous pouvons également avoir une section de style que nous pouvons voir si nous accédons à AboutView. Au-dessus, dans le dossier source, nous avons ce dossier du routeur avec une page index.js. Nous l'avons puisque nous avons choisi d'installer le package de routeur Vue lors de la première configuration de ce projet. La clé se trouve en haut du fichier dans lequel nous importons n'importe laquelle de nos vues. Ici, nous pouvons voir que nous importons le HomeView depuis le dossier Views. Ensuite, en dessous, à l'intérieur de CreateRouter se trouve ce tableau de routes. Chacun de ces itinéraires est un objet, comme nous le voyons ici. Nous voyons le chemin du fichier, qui est une barre oblique. Il s'agit du répertoire personnel. Nous pouvons donner le nom de ce routeur, auquel nous ferons référence au cours de notre projet. Liez ensuite ceci à un composant de vue particulier que nous venons d'importer. Ensuite, nous avons également la section À propos. Vous vous demandez peut-être pourquoi nous n'avons pas importé le AboutView en haut à côté du HomeView. Eh bien, nous faisions souvent cela et l'AboutView était également important, tout comme nous l'avons fait avec les composants Home. Mais au lieu de cela, cela démontre une approche légèrement différente où nous utilisons ce que l'on appelle le chargement différé. Nous chargeons la page en différé pour ne télécharger le contenu de la page que lorsque l' utilisateur en a réellement besoin. Cet aperçu de la page du routeur, nous allons maintenant créer les vues dont nous avons besoin pour notre projet , puis nous pouvons revenir et les ajouter à notre tableau. Dans la source, dans le dossier Views, nous pouvons toujours utiliser HomeView et AboutView pour nos projets. Effacons simplement le contenu qui se trouve à l'intérieur pour ne pas avoir besoin des composants de bienvenue. Comme nous l'avons supprimé , nous pouvons également supprimer la référence à celui-ci ici. Au lieu de placer un titre de niveau 3, envoyez peut-être un SMS à une maison. Nous reviendrons et ajouterons du contenu à ces vues, mais pour l'instant, nous pouvons utiliser le titre de niveau 3 pour voir à quelle page nous passons. The AboutView, supprimez le style. Nous n'avons pas de section de script. Nous avons l'emballage, H3, et le texte d'environ. Dans les vues, nous avons besoin de deux fichiers supplémentaires. Cliquez sur l'icône « Fichier » située à peu près en haut. Nous avons également besoin de l'AdminView, qui utilise l'extension .vue. Créez un modèle, un titre. C'est pour l'administrateur. Nous archivons la vue finale que nous allons utiliser est le MenuView. Celui-ci sera utilisé pour afficher toutes les pizzas que nous avons dans notre base de données ainsi qu'un panier d'achats. Un autre modèle, l'en-tête du menu. Ensuite, nous pouvons les fermer et les importer dans notre routeur, donc l'index du routeur. Ils se trouvent tous dans le même répertoire qu'un HomeView. Copions et collons ceci trois fois de plus. Le Menu et le MenuView. Le suivant est l'administrateur de l'AdminView et le dernier est celui de About. Comme nous les avons importés en haut de notre fichier, nous pouvons essentiellement dupliquer la section Accueil. Juste en dessous, créez un nouvel objet, séparez-le par une virgule. Le chemin que nous voulons utiliser est une chaîne et ce sera un menu à barres obliques. Cela signifie que si nous entrons dans notre projet et qu'à la toute fin, en tapant le menu à barres obliques, nous verrons le menu dans le navigateur. Ensuite, le nom, qui est le lien du menu. Nous l'utiliserons bientôt dans notre projet. Le composant que nous voulons afficher est le menu que nous avons importé juste au-dessus. Ensuite, nous avons l'administrateur, écrit un nouvel objet et le sépare par une virgule. Celui-ci veut accéder à l'intérieur du navigateur avec la barre oblique admin, le nom du lien d'administration et les composants d'administration. Bien. Le dernier dont nous avons besoin est About. La voie à suivre et l'ordre dans lequel nous les plaçons ne font aucune différence pour notre projet. Le nom de ce lien, le lien À propos et enfin les composants. Bien. Tout cela est fait. Assurez-vous d'avoir une virgule entre chacun de ces itinéraires. Faites une sauvegarde. Si nous passons maintenant au navigateur, actualisons. le menu à barres obliques, nous avons les textes du menu de nos composants. Nous avons également Admin. Vous voyez le texte de l'administrateur, À propos, puis la barre oblique correspondant au répertoire de base. Actuellement, nous voyons toujours le contenu de nos quatre vues côté du contenu existant sur la gauche. Comment notre application sait-elle où nous voulons que ces vues s'affichent ? Eh bien, la réponse se trouve dans le RouterView, que nous allons examiner ensuite en ajoutant ces nouvelles vues à nos liens de navigation. 7. RouterLink et RouterView: Dans notre dossier source du projet, ouvrez le fichier App.vue. À l'intérieur de ce fichier, il y a deux choses principales à noter. L'un d'eux est que nous avons cette zone de navigation, qui contient deux liens de routeur. Il contient le texte de la page d'accueil et aussi celui de about, et voici les deux liens que nous voyons à l'intérieur de notre projet. La première chose à faire est ces liens ne sont pas les huit éléments habituels , comme nous le verrons dans le code HTML normal. Au lieu de cela, ils sont entourés à l'intérieur de cette liaison de routeur. C'est ainsi que le routeur de visualisation gère les liens vers d'autres pages ou composants. Il les utilise à la place des éléments a afin que le routeur puisse modifier les URL de la page sans recharger la page. Nous pouvons également contrôler l' URL à laquelle nous associons pour inclure des itinéraires dynamiques, qui peuvent inclure des variables, plutôt que de simplement avoir les textes en clair comme ici, nous pouvons également insérer des variables. De plus, vous verrez ce routeur afficher le composant en bas. C'est le point de vente qui affiche le contenu de notre page, que nous avons à l'intérieur des vues. C'est là que le contenu de notre page est affiché, qui nous donne un contrôle total plutôt que de simplement remplacer le contenu complet de la page. Nous voyons ici que ce composant d'affichage du routeur est placé à côté de l'en-tête. C'est pourquoi nous les voyons côte à côte dans le navigateur. Vous remarquerez également que si vous remontez en haut du fichier, le lien du routeur et la vue du routeur sont importés à partir du package view router. Avec ces connaissances, nous pouvons supprimer le code standard d'ici et créer nos propres liens à l'intérieur des composants d'en-tête. Nettoyons cette App.vue. Nous allons supprimer le lien de notre routeur, nous n'en avons plus besoin. Supprimez également ce contenu d'en-tête. Nous n'avons pas besoin de cet exemple HelloWorld dans notre projet, mais nous pouvons réutiliser ce fichier et le convertir en composant d'en-tête. Nous appellerons cela l'en-tête de l'application, renommerons le fichier AppHeader.vue. Ensuite, dans le modèle, nous pouvons placer cet AppHeader exactement là où nous voulons qu'il soit. Étant donné que ce fichier App.vue est le composant principal de notre projet, nous pouvons l'utiliser pour lui donner une certaine structure. Dans nos projets, nous voulons toujours que cette vue du routeur affiche la page. Mais juste au-dessus de cela, nous pouvons également placer dans l'AppHeader. Cela signifie que sur chaque page de notre projet, l'en-tête sera en haut, suivi du contenu de la page. Ensuite, n'oubliez pas que nous avons changé ce nom de fichier pour qu'il soit AppHeader.vue. Cela se trouve dans le dossier des composants. Saute à l'intérieur d'ici. Renommez ensuite l'exemple HelloWorld en AppHeader. Nous pouvons également supprimer ces icônes. [inaudible] a créé le projet. Nous n'en avons pas besoin pour notre projet. Passons à ce fichier AppHeader.vue. Nous effaçons tout le contenu. Nous n'avons pas besoin de script pour le moment. Nous allons le supprimer. Supprimez tous les styles par défaut. Tout le contenu se trouve entre les modèles. Je vais le remplacer par un en-tête HTML. En-tête de ligne, placez-le à l'intérieur d'un élément de niveau 1 avec le titre de soulignement de classe. Plutôt que de simplement ajouter le texte de pizza planet pour le titre de notre site, nous pouvons également le placer dans le lien du routeur. Il possède une étiquette d'ouverture et de fermeture. Puis, à l'intérieur des icônes Tilder, le texte de Pizza Planet. Vous pouvez voir que nous avons cette donnée sous-jacente qui est une erreur avec ce composant. C'est parce que nous devons ajouter les deux accessoires en tant qu'attribut. Comme il s'agit du titre du site, il s' agit simplement d'un lien vers la page d'accueil, qui est une barre oblique. Ensuite, une section de navigation avec nos liens de navigation. Ces liens de navigation renverront à nos points de vue. Nous nous dirigeons juste en dessous de notre niveau 1 . Les éléments de navigation. Il s'agit d'une série de liens relatifs. La classe de lien que nous associerons très bientôt à notre CSS. Les deux attributs. Ce sera le lien d'accueil, afin que nous puissions créer un lien vers la barre oblique et le texte d'affichage de la page d'accueil. Dupliquez cela trois fois de plus. La suivante concerne le menu, qui renvoie vers /menu. La dernière consiste à créer un lien vers l'administrateur sous la navigation et à placer le titre de niveau 2 avec le texte de la pizza numéro 1 . Sauvegardons-le et vérifions-le. Tout fonctionne. Nous avons maintenant l'en-tête de l'application en haut , puis nous devrions voir le contenu de l'affichage du routeur juste en dessous. Rafraîchir. Voici notre rubrique de niveau 1. Nous avons nos liens, nous avons le titre de niveau 2, mais nous avons toujours le contenu de cette page à côté. Le contenu dans lequel nous voulons qu'il s'affiche, mais nous n'avons pas le style requis. Cela se produit en raison du style qui est configuré par défaut dans notre projet VP. Nous pourrions le supprimer et utiliser le nôtre. Dans la barre latérale. Accédez au dossier des ressources, contient différentes feuilles de style. Supprimons le fichier base.css. Nous pouvons également supprimer le logo, mais nous ne pouvons pas utiliser ce fichier CSS principal, mais nous allons effacer le contenu et ajouter le nôtre. Sélectionnez tout le contenu et supprimez ce fichier. Il est enregistré dans le navigateur. Il s'agit de notre section d'en-tête. Maintenant au sommet. Maintenant, j'ai le contenu de la page juste en dessous ou nous pouvons également basculer entre le contenu de cette page avec ces liens d'en-tête. 8. Itinéraires nommés: Comme nous venons de le découvrir à l'intérieur du lien du routeur, nous avons créé des liens vers différentes pages présentant ces deux attributs. Puis à l'intérieur, placé dans une URL codée en dur vers laquelle créer un lien. Cela fonctionne très bien, mais nous avons également quelque chose appelé routes nominatives. itinéraire du nom peut être un avantage si nous utilisons le même lien plusieurs fois. Imaginez que notre projet contienne de nombreux liens vers cette page de menu, mais qu' nombreux liens vers cette page de menu, à l'avenir, si nous voulions changer cette URL du menu à barres obliques pour en faire pizza avec barre oblique directe, nous devrons modifier tous ces liens manuellement. Nous pouvons également créer un lien vers le nom que nous lui avons donné dans le fichier du routeur, accédant ainsi au routeur dans le fichier index.js. N'oubliez pas que chacun de ces liens porte un nom spécifique. Nous pouvons le transmettre sous forme d'objet, au lieu de la barre oblique, en plaçant les accolades pour créer un objet. Le nom de propriété, qui est égal à domicile. Comme pour tout autre attribut View Js, si nous y insérons des données dynamiques, telles que notre nom, nous devons également les placer entre les deux points, qui sont une liaison en v pour les rendre dynamiques. Cela indique à un routeur de visualisation qu'il ne doit pas être lu comme une chaîne de texte, mais qu'il doit plutôt rechercher nom que nous avons dans notre fichier de routeur. Nous pouvons également le faire avec le reste des liens. Copiez-le et nous pourrons le placer en haut de notre titre. Le second. C'était pour notre MenuLink, qui correspond au nom contenu dans le fichier de notre routeur. Le numéro trois. C' était le AboutLink. Enfin, le AdminLink. Enregistrez-le et accédez à notre projet. Il devrait être automatiquement mis à jour puisque nous utilisons Vite pour notre serveur de développement. Cliquez sur tous les liens et tout fonctionne toujours comme avant, mais maintenant, nous utilisons ces noms de routes. 9. Routes imbriquées: Notre configuration actuelle permet une structure de routeur comme celle-ci. Nous avons nos RouterLinks dans l'en-tête, puis nous avons remplacé le contenu de ces vues là où nous le voulions en utilisant le RouterView. Cela conduit à une structure d'URL assez simple. Nous aurions notre URL principale et chaque vue ajouterait à la fin le nom de admin, menu ou about, par exemple. Mais parfois, notre structure peut avoir besoin d'aller encore plus loin. L'une de ces vues peut également nécessiter des liens et un emplacement pour afficher le contenu. page « À propos de nous » de nos projets en est un exemple. Sur la gauche se trouve la vue À propos de nous, que nous pouvons placer dans le contenu de notre choix. De plus, nous pouvons également fournir des liens supplémentaires, comme nous le voyons ici, avec l'historique, livraison et les emplacements. Sur la droite, nous avons la structure souhaitée, qui serait la vue À propos de nous, puis les liens imbriqués relatifs à l'historique, livraison et aux emplacements suivants. Pour structurer cela, nous devons à nouveau utiliser le routeur de vue à l'aide des RouterLinks et du RouterView pour placer le contenu sur la page À propos de nous exactement là où nous le souhaitons. Passons au projet et nous pouvons commencer à mettre les choses en place. Ces sections d'historique, de localisation et de livraison que nous venons de voir seront toutes des composants entre lesquels nous pourrons basculer. Configurons-les dans le dossier des composants. Nous avons déjà cette configuration, alors créez un nouveau fichier, et celui-ci sera Delivery.vue. La prochaine, ce sera History.vue. Ensuite, le suivant concerne les emplacements, tous avec l'extension .vue, et nous pouvons également supprimer les composants dont vous n'avez pas besoin, savoir TheWelcome.vue, déplacer celui-ci et WelcomeItem. Bien. Passons maintenant à nos trois nouveaux composants, et nous pouvons ajouter une structure de base. Nous avons besoin du modèle et chacun de ces trois composants sera assez simple. Nous allons simplement créer un emballage. Nous ajouterons un titre en haut, une image et un peu de texte aléatoire. Le div, regardez la classe C de info_block. Cela sera ajouté à ces trois nouveaux composants, h3. Je vais utiliser les icônes de tilde et voici Delivery Info. Ensuite, une source d'image. Passons au dossier des ressources où se trouvera notre dossier d'images , puis à l'image que vous voulez se trouve le fichier box.jpg. Encore une fois, vous pouvez utiliser vos propres images si vous le souhaitez. Remplacez simplement l'un d' entre eux que vous souhaitez. Le texte alternatif, pizza dans la boîte. Puis aussi une classe de info_img. Juste après l'image, nous ajouterons du texte dans les éléments p, et vous pourrez le remplacer par le texte de votre choix. Mais pour simplifier, je vais juste ajouter du texte aléatoire de lorem ipsum. Si vous utilisez Visual Studio, vous pouvez simplement taper le mot lorem, puis appuyer sur « Entrée ». Cela nous donnera un texte factice que nous pourrons placer dans notre projet. Pour que les choses restent cohérentes, copions tous ces contenus, puis entrons dans l'historique. Collez-le et tout ce que nous avons à faire ici est de changer le titre de livraison en historique. L'image, celle-ci, c'est le chef image.jpg. Le texte alternatif du chef préparant une pizza. Faites une sauvegarde. La question suivante portait sur les locations. Collez à nouveau le contenu et modifiez le titre. L'image de celui-ci est constituée de tableaux. Modifiez également le texte alternatif. Voici les tables d'extérieur. Bien. Ce sont les trois composants que nous utiliserons pour passer l'autre dans la vue à propos et c'est ce que nous allons examiner ensuite. 10. Les composantes de vue et d'enfant: Passons maintenant à la page À propos où nous pouvons désormais utiliser un routeur pour basculer entre nos trois nouveaux composants. Nous avons également besoin d'une structure et d'un contenu sur cette page, ainsi que des liens du routeur et de la vue du routeur. Supprimons le titre du niveau 3 et placez-le dans un div avec la classe about. Ce sera l'emballage de ces composants, puis nous les placerons dans différentes sections. La partie supérieure, si nous allons à peu près, sera placée en deux zones. Si nous passons à la vue « à propos », elle sera divisée en deux sections. La section supérieure sera une introduction propos de cette page où nous trouverons quelques textes sur la pizza, l'histoire, que nous placerons dans une image, puis en dessous, nous ajouterons une deuxième section qui contiendra nos liens de routage pour basculer entre nos composants Freedom. la première section, avec la classe d'intro, et imbriquée à l'intérieur, nous aurons deux choses. Tout d'abord, il y a un div, et ensuite, l'image. Le div va contenir le texte, puis nous ajouterons l'image juste en dessous, puis nous ajouterons une nouvelle section en bas, et celle-ci contiendra nos liens. Commençons par ce premier div en lui donnant une classe de texte d' information (le trait de soulignement entre chaque mot). Rubrique de niveau 3 avec le titre de pizza de qualité depuis 30 ans. Allons voir ça. Il y a notre titre, puis en dessous de notre titre de niveau 3, placez en p des éléments avec le texte uniquement des ingrédients de la meilleure qualité dans une atmosphère conviviale. voilà, placés dans une classe afin pouvoir ajouter du CSS plus tard à du texte d'information. Ensuite, l'image. Tout d'abord, une nouvelle classe pour le style de info_image ou img. La source se trouve dans le dossier des ressources où se trouve notre dossier d' images, et celle-ci est dirigée vers le fichier calzone.jpg. L'ancienne image en gros plan du texte Calzone. Nous y voilà. Il s'agit de la section supérieure maintenant terminée. Bien sûr, nous allons bientôt l' améliorer un peu avec un peu de style, mais pour l'instant, passons à notre deuxième section, qui sera consacrée à nos liens. Cela nécessite une classe d'emballage plus d'informations, un titre de niveau 3, et cela signifie que vous devez cliquer sur les liens ci-dessous pour plus d'informations. Ensuite, nous pouvons commencer à construire nos liens dans les éléments de navigation HTML, liste non ordonnée. Chacune de ces liaisons sera placée à l'intérieur de la liaison du routeur. Chacun aura la classe de lien, mais notre style. Nous utilisons les deux points parce que nous allons dynamiser les deux attributs en les plaçant dans un objet, et cet objet va pointer vers le nom, que nous allons supposer attribuer à chacun de ces composants. Ce premier sera le lien vers l'historique et le texte d'affichage de notre histoire. Dupliquons cela deux fois de plus. Le second sera pour le lien de livraison. Un texte de livraison. Le numéro 3 sera le lien de localisation. N'importe quel texte de lieux. Bien. C'est tout ce dont nous avons besoin, maintenant nous avons nos liens gratuits dessous de toutes nos informations en haut . Allons voir ça. Accédez à la page À propos. Le contenu disparaît, peut-être simplement parce que nos noms ne correspondent pas, parce que nous ne l'avons pas encore créé. Passons simplement à la console et nous pourrons vérifier cela. Notre nom ne correspond pas, alors passons au routeur et faisons-le maintenant. Le routeur index.js. Nous devons d'abord importer nos trois composants, à savoir l' historique, les emplacements et la livraison. En haut, importez la livraison, cette fois dans le dossier des composants, le composant est delivery.vue. Dupliquez ceci deux fois de plus. La prochaine concerne l'histoire. Le dernier concerne les emplacements. Comme pour tous nos autres itinéraires, nous devons ajouter ces trois composants à un chemin. Mais n'oubliez pas que le chemin de ceux-ci sera imbriqué dans le lien À propos, donc c'est ce que nous voulons. En fait, nous pouvons simplement supprimer le second environ. Nous avons le nom du composant, c'est à peu près pour pouvoir simplement supprimer celui qui a été placé par défaut. Nous avons ce lien À propos et ce que nous voulons, c'est le chemin à suivre, puis la barre oblique, nous voulons les lieux, livraison et aussi l'historique. Comment s'y prendre ? Eh bien, actuellement, la barre oblique concernant le lien ne pointe que vers un seul composant. Nous pouvons également imbriquer plusieurs composants en ajoutant la propriété réservée aux enfants. Pour la propriété children, étant donné que nous liens vers plusieurs composants, doit être placée à l'intérieur d'un tableau. Chaque tableau contient un objet qui est structuré exactement comme chacun de ces itinéraires. Nous allons donc insérer le chemin, le nom et les composants. Pour que le premier soit lié à l'histoire, nous plaçons le nom du composant dans le chemin de l' histoire. Ce nom de composant doit correspondre exactement à celui que nous avons placé dans les liens de notre routeur. J'ai un lien vers l'historique, un lien de livraison et un lien vers les emplacements. Celui-ci est pour le lien vers l'historique. Ensuite, les composants historiques. Séparez-les par une virgule. Fermez ça. Séparez-les par une virgule et placez-les sur leur propre ligne séparée. Dupliquons ceci, copiez-collez ceci deux fois de plus. Le second concerne la livraison, lien vers le lien de livraison sur le composant de livraison. Ensuite, les emplacements. Essayons ça. Nous devons accéder à la page À propos de nous et ensuite vérifier exactement à quoi cela ressemblera. Actuellement, nous sommes sur une barre oblique, essayons nos liens en bas, nous avons l'historique. Nous parlons maintenant de l'historique des barres obliques, de la livraison, cela est ajouté à la fin et il en va de même pour les sites. Une chose que vous pensez peut-être, c'est que nous avons actuellement une barre oblique que nous avons placée à l'intérieur de ce chemin ici, puis nous avons également des emplacements de la barre oblique vers l'avant. Tout d'abord, lorsque nous avons configuré les itinéraires pour les enfants, nous n'avons pas ajouté de barre oblique avant chacun de ces chemins. Eh bien, si nous le faisions, il sera traité comme un chemin racine. Voyons exactement ce que nous entendons par là. Si nous ajoutons la barre oblique à chacune d' entre elles puis que nous accédons à la section À propos. Désormais, au lieu d'avoir une barre oblique, si nous cliquons sur l'un de nos liens, l'URL complète sera remplacée par ce lien vers l'historique de livraison ou les localisations. Mais comme nous voulons les ajouter à la fin du lien À propos, nous pouvons simplement les utiliser sans la barre oblique. Enfin, pour voir le contenu ci-dessous de chacun de ces composants, nous devons ajouter une vue du routeur. Accédez à la vue À propos, puis juste en dessous de la navigation et placez la vue du routeur. Ceci et vérifions-le. Nous avons la section supérieure , puis la zone des emplacements en bas, l'historique et aussi la livraison. 11. Vues nommées: Cette page À propos de nous comporte trois éléments entre lesquels nous pouvons basculer. Comme nous le savons, nous pouvons cliquer sur l'historique, les emplacements et également les composants de livraison. Comme nous l'avons déjà vu, nous pouvons utiliser des composants et les réutiliser dans n'importe quel fichier de votre choix. Par exemple, dans app.vue, nous pouvons suivre la méthode traditionnelle en important un composant, puis le rendant dans le modèle. Une autre méthode de rendu d'un composant consiste à utiliser le routeur Vue. Jusqu'à présent, nous avons utilisé les RouterViews pour afficher une page telle que celle-ci juste ici. Il en va de même dans la vue ci-dessus, que nous venons d'ajouter dans la vidéo précédente, nous avons utilisé le RouterView. Cela peut afficher la page de niveau supérieur ou n'importe quel composant secondaire, comme nous le faisons ici avec la page à propos. Nous pouvons également insérer autant de RouterViews que nous le souhaitons et chaque RouterViews supplémentaire agira comme prise avec différents composants. Si vous deviez insérer d'autres RouterViews, nous devons également leur donner des noms afin que le routeur sache quels composants afficher dans chacun d'eux. Supposons que nous souhaitions afficher des informations supplémentaires en bas de la page d'accueil, telles que les composants de livraison et d'historique. Nous avons ici un développeur. La clé ici est que nous avons deux RouterViews supplémentaires. Chacun d'entre eux possède un nom attributs qui seront importants dans un instant. Notez que le RouterView en haut n'a pas de nom. Il s'agit d'un emplacement par défaut. Cette valeur par défaut, ainsi que les deux noms sont définis dans la page d'index du routeur. La gauche montre ce que nous avons actuellement configuré pour la page d'accueil à l'aide d' un seul composant. Cependant, lorsque nous avons plusieurs RouterViews avec des noms, nous devons le modifier pour utiliser un objet de composants, comme nous le voyons sur la droite. premier est l'emplacement par défaut, qui est le RouterView sans nom. Ensuite, les deux noms suivants correspondront aux deux noms que nous avons donnés aux RouterViews. Accédez au projet et nous pourrons le configurer. Passez au composant principal de niveau supérieur, qui est le fichier app.vue, puis juste en dessous du RouterView, nous placerons dans un div. Ce div, le style et la mise en page auront la classe de wrapper de blocs d'informations. Ensuite, à l'intérieur, nous pouvons placer un RouterViews supplémentaire pour afficher n'importe lequel de nos composants. Pour cet exemple, je vais afficher la livraison ainsi que les composants de l'historique dans cette page principale. Placer un RouterView, les attributs du nom, qui seront égaux à la livraison. Copiez et collez ceci. Le second sera consacré à l'histoire. Nous souhaitons uniquement que ces deux composants s'affichent sur la page d'accueil. Pour cela, passons à la page d'index des routeurs et passons à la section d'accueil. Actuellement, le routeur domestique n'affiche qu' un seul composant de la vue d'accueil. Mais pour afficher plusieurs composants, nous pouvons modifier le composant pour qu'il ait un s à la fin. Supprimez-le, transmettez un objet. Comme nous l'avons vu avec les diapositives, nous devons ajouter la vue par défaut, qui est celle qui est affichée dans la vue du routeur sans nom. Celui-ci est la vue d'accueil, le nom de la livraison. Cela affichera les composants de livraison et le suivant sera destiné à l'historique. Juste pour récapituler, nous avons le composant par défaut, qui est la vue d'accueil à l'intérieur de l'application. Cela s'affichera dans la vue du routeur, qui n'a pas de nom. Ensuite, nous avons les composants de livraison et d'historique, qui correspondront au nom de nos deux vues de routeur supplémentaires. Maintenant, View Router sait quels composants afficher à chaque emplacement. ces deux composantes de la livraison ont déjà histoire, ces deux composantes de la livraison ont déjà été importées en haut de la page, donc tout devrait maintenant être prêt à partir. Enregistrez ce fichier, accédez à la page d'accueil. Du haut, nous avons cette entrée de niveau 3, que nous pouvons voir de l'intérieur de notre champ de vision. Ce que nous avons ici est ce titre, puis ci-dessous, nous avons nos composants de livraison et l'historique. Juste pour confirmer qu'ils ne s' affichent que sur la page d'accueil, nous pouvons accéder aux liens supplémentaires et nous ne devrions pas voir ces composants s'afficher. Pour terminer, revenons à notre application app.vue et ajoutons un petit style pour les faire apparaître côte à côte sur la vue plus grande , puis empilées verticalement sur le plus petit écran. App.vue. Nous avons cette classe de wrapper de blocs d'informations. Copions ceci dans la section style. Type d'affichage de Flex. Nous allons commencer par la vue sur petit écran, ce qui signifie que nous devons modifier la direction de flexion pour qu'elle soit en colonne. Cela permettra de garder notre contenu empilé verticalement sur le plus petit écran. Pour que cette modification soit côte à côte, nous devons modifier la direction de flexion pour qu'elle soit alignée sur un écran plus grand. Nous pouvons le faire en ajoutant une requête multimédia. En fait, nous pouvons également supprimer tout le reste du style. Je n'ai pas besoin de tout ça. Configurez toutes les requêtes multimédia avec nos médias. Nous voulons que cela cible les écrans d'une largeur minimale de 900 pixels. Prenons notre emballage de blocs d'informations. Nous allons modifier la direction de flexion pour qu'elle soit égale à la ligne. Sur les écrans plus grands (900), vous les placez dans une rangée , puis cela descend sur le plus petit écran. Il s'agit d'une autre méthode d' utilisation des composants plutôt que la méthode traditionnelle d'importation d'un composant dans un autre fichier à afficher. Nous pouvons également autoriser le routeur Vue à les placer dans une vue du routeur. 12. Projet UI- Section Intro: Cette nouvelle section est consacrée à l'introduction contenu dans notre application. Nous allons créer toute la structure dont nous avons besoin en créant différentes pages et composants. Plus tard, dans les prochaines sections, nous les dynamiserons en insérant diverses informations provenant d'une base de données, telles que nos commandes, nos utilisateurs et nos pizzas. Mais ensuite, nous allons commencer par créer les composants du menu. 13. L'interface utilisateur du menu: La page d'affichage du menu, que nous allons maintenant créer, sera divisée en deux sections. Sur la gauche, nous allons inclure le menu, qui inclura toutes les pizzas dans une liste. Ensuite, dans la section suivante, nous créerons la section panier sur la droite, qui listera tout le contenu que l'utilisateur ajoute au panier. Passons aux composants de notre vue de menu et commençons à travailler dessus Dans les vues dans la vue du menu. Nous allons déplacer le titre du niveau 3 pour le moment, puis créer un div, qui servira de wrapper à nos deux sections. Il s'agit de la classe de wrapper de soulignement de menu. Ensuite, deux autres divs, qui seront imbriqués à l'intérieur. La première concernera le contenu sur le côté gauche, qui sera notre menu. Je vais lui donner la classe de menu, puis créer un deuxième div, qui sera destiné à notre panier. Donne-nous la classe de basket. Passez ensuite à la section du menu et placez-la dans un titre de niveau 3. Utilisez les utilitaires pour tous les textes d'authentiques pizzas faites à la main. Pour notre deuxième division, qui est le panier. Encore une fois, un niveau 3 en tête des utilitaires. Celui-ci est pour le panier. Comme mentionné précédemment, pour l'instant, nous allons simplement travailler dans cette section de menu, qui sera un tableau HTML. Cette table ne contiendra qu' une seule pizza pour le moment. Mais nous y reviendrons lorsque nous commencerons à travailler avec la base de données Firebase afin de pouvoir parcourir en boucle toutes les pizzas stockées, puis les afficher dans ce tableau. Pour l'instant, nous allons configurer notre modèle indiquant à quoi cela ressemblera à l'intérieur du corps du tableau. Ensuite, à l'élément TR pour la première ligne de notre tableau. Tout le contenu de notre pizza sera placé dans cette seule rangée du tableau. Les cellules saisissent certaines données du tableau. Ce sera pour le nom de la pizza. Le nom de la pizza sera placé à l'intérieur des étiquettes robustes et figurera dans n'importe quel nom de pizza, tel que Margarita. dessous de cette première ligne du tableau, En dessous de cette première ligne du tableau, nous allons ajouter une deuxième ligne. Celui-ci contiendra la description dans les données du tableau. Les petites étiquettes et la description d'une délicieuse pizza à la pâte de tomates garnie de mozzarella. Faites défiler l'écran vers le bas et juste cette ligne du tableau pour ajouter une troisième ligne. Celui-ci concernera les options disponibles. Pour chaque pizza, nous allons créer deux tailles différentes , une de neuf pouces et une de 12 pouces. Plus tard, au cours de ce cours, nous aborderons cette question en boucle et le ferons à la fois pour les pizzas de 12 et de 9 pouces, mais pour l'instant, comme nous ne faisons que créer notre structure et ajouter quelques exemples de données, je vais simplement les placer dans une seule taille, qui sera pour la pizza de 9 pouces. Cela sera suivi par le prix. Ensuite, la troisième section sera un bouton qui sera utilisé pour ajouter la pizza au panier. Placez-le dans un bouton HTML à l'intérieur. Type de bouton. Ensuite, pour sortir, le symbole plus utilisera une entité HTML, qui est le code des esperluettes, le hachage 43 et un point-virgule. Le navigateur nous permet de voir à quoi cela ressemble. Nous avons notre première ligne, qui est le titre, la deuxième ligne, qui est une description et la troisième section sera notre option. Comme mentionné précédemment, nous passerons en revue cette troisième section, qui nous présentera nos différentes options. Voici notre table pour notre pizza, maintenant prête . Ensuite, dans la vidéo à venir , nous passerons à la section suivante, qui est le panier. 14. L'interface utilisateur du panier: la continuité de la vidéo précédente, où nous avons ajouté la section de menu sur la gauche, nous allons maintenant passer à la zone des paniers. Ce panier sera également un tableau présentant les pizzas que l'utilisateur sélectionnera en cliquant sur le bouton Ajouter juste ici. Suivi d'une commande, d'une section complète et d'un bouton pour passer la commande. À l'avenir, ce bouton de commande sera lié à notre code JavaScript pour ensuite transférer cette commande dans notre base de données. Pour le tableau, les sections contiendront une seule ligne. Cette ligne comportera la quantité et un bouton chaque côté pour augmenter ou diminuer la quantité. Vous aurez le nom de la pizza sélectionnée ainsi que le prix. Sous notre rubrique de niveau 3 pour les paniers, créez un div. Ce div contiendra la structure de tous les paniers, qui sera un tableau tout en haut, puis le texte, qui sera le total de la commande. Mais maintenant, entrez la valeur que vous souhaitez. Cela sera mis à jour et calculé avec JavaScript. Ensuite, un bouton qui sera chargé ultérieurement de passer la commande. Un peu de texte convient pour le moment. Voyons à quoi cela ressemble. Voici l'un de nos contenus. Nous pouvons maintenant passer à la section du tableau. Le tableau contiendra une seule ligne de tableau. Dans la première cellule de données du tableau, il y aura deux boutons et également la quantité. Nous aurons la quantité au milieu, puis un bouton de diminution sur la gauche et un bouton d'augmentation sur la droite. Le premier bouton avec la classe quantity_button, le type, qui est également bouton, puis l'entité HTML, qui correspond aux esperluettes, le hachage 8722 suivi du point-virgule. Cela nous donnera le symbole négatif, puis nous ajouterons la quantité, puis à droite un bouton avec le symbole plus. Pour la quantité qui se trouvera au milieu, placez-la dans n'importe quelle quantité pour le moment. Copiez notre bouton et collez-le en bas et remplacez simplement le numéro de code par 43. Les dates figurant sur ces boutons seront utilisées pour augmenter et diminuer cette valeur. Avant de l'ajouter au panier, nous mettrons également à jour le total de la commande au fur et à mesure que nous modifierons les choses. Il s'agit de notre première donnée tabulaire. Le second portera sur le nom de la pizza et aussi sur la taille de l'option et le troisième. C'est le prix de la pizza. Enregistrez et transférez dans le navigateur. Ce sont toutes les informations dont nous avons besoin pour le panier. Maintenant que tout ce contenu est en place, nous allons maintenant envisager d'ajouter un petit style pour le rendre un peu plus beau et améliorer la mise en page. 15. Polices et styles de base: À l'intérieur de notre projet, nous avons ce fichier main.js. Il s'agit du fichier qui est responsable de la création de notre application. Nous l'importons depuis la bibliothèque Vue. Nous importons également les principaux composants de l'application, dont celui-ci se trouve ici. Il s'agit du composant d'entrée principal et tout le reste sera imbriqué à l'intérieur. Nous transmettons ce fichier pour créer une application, puis nous montons l'application dans le DOM avec l'identifiant de l'application. plus, il inclut également une importation haut avec un fichier main.css, qui se trouve à l'intérieur de ce dossier d'actifs. La façon dont nous structurons notre style dépend entièrement de nous lorsqu' il s'agit d'une application Vue. Mais je vais l'utiliser comme une sorte de fichier de style général contenant des fichier de style général contenant styles de base tels que des polices et des réinitialisations. Nous pouvons toujours ajouter des composants spécifiques ou un style de page dans des composants individuels des fichiers Vue. Mais tout d'abord, nous devons choisir les polices que nous allons utiliser pour le projet. Pour cela, je vais utiliser les polices de Google. Rendez-vous donc sur fonts.google.com. Je vais utiliser deux polices distinctes. L'un d'eux sera destiné à nos titres et à notre titre, et l'autre au texte général. Cliquez donc sur Rechercher. Le premier s'appelle Marck script et celui-ci s'appelle M-A-R-C-K, et c'est celui pour nos en-têtes et notre titre. Sélectionnez donc ceci. Faites défiler vers le bas. Celui-ci ne contient que les textes habituels, ce qui est bien. Cliquez sur l' icône plus pour l'ajouter à nos familles sélectionnées, ainsi que celle-ci. Cherchons notre deuxième. Revenons à la recherche. Pour le texte général, je vais utiliser Roboto. C'est celui dont nous avons besoin ici. Passons à une sélection de polices. Donc 300, qui est un texte léger, le 400, qui est un poids normal, et aussi un 500. Ajoutez les trois à la famille. Cliquez sur ces familles sélectionnées et nous aurons les informations dont nous avons besoin pour importer dans notre projet. Nous avons donc un lien que nous pouvons utiliser ou nous pouvons utiliser la syntaxe d'importation. Pour l'importer, allons le dossier Assets et dans le fichier main.css. Ce champ est actuellement vide. Nous pouvons ajouter cette règle d'importation. Copiez donc tout ce qui se trouve à l'intérieur des balises de style. Collez ceci dedans. Comme nous l'avons déjà vu dans le fichier principal dot js, nous avons l'identifiant de l'application, que nous pouvons sélectionner comme wrapper principal pour notre projet. Sélectionnez donc ceci avec le hachage. À l'intérieur, nous pouvons définir la famille de polices comme Roboto en copiant cette deuxième ligne ici. Ce serait notre texte général et nous le remplacerons par le script Marck lorsque nous en aurons besoin. Entrez dans le corps. Nous ajoutons simplement des styles généraux à l'intérieur, vous vous souvenez ? Nous allons donc ajouter une marge pour centrer notre projet, en la réglant sur zéro en haut et en bas, ainsi que sur la gauche et la droite. Le texte de la ligne de couleur RGB, avec une valeur de 76 pour le rouge, le vert et le bleu. Juste après le corps, nous ciblerons les rubriques h1, h2, h3, h4, h5 et h6. N'oubliez pas que la famille de polices nous allons utiliser pour celle-ci est l'autre que nous obtenons des polices de Google. Copiez donc cette section, collez-la. Supprimez toute marge par défaut appliquée à l'un de nos titres avec le navigateur. Je place la couleur, qui est une valeur RGB de 76 76,76. Cela nous donne notre style de titre général, mais nous utiliserons le titre de niveau 3 à plusieurs endroits. Nous allons donc l'utiliser avec les en-têtes de page et de composants. Nous allons donc définir la taille de police pour qu'elle soit plus grande, soit 2,2 rems. Placez également une marge en haut et en bas d'un rem et zéro à gauche et à droite. Ensuite, la liste non ordonnée, les éléments UL. Réinitialisez tout espace appliqué par le navigateur, afin que la marge par défaut puisse être supprimée à zéro et que le rembourrage soit également remis à zéro. Les éléments de la liste, et en fait, les liens contenant les éléments a hériteront de la couleur. Cela supprimera cette couleur de lien violette, que nous avons par défaut dans le navigateur. Réinitialisez également la décoration de texte pour qu'elle soit nulle, ainsi que le style de liste. Cela garantira qu'aucun de nos liens ou éléments de notre liste ne soit souligné, et qu'aucun des points situés sur le côté du lien ne soit également souligné. Pour ce qui est des styles plus généraux, nous allons passer à nos éléments d' image et nous assurer que la largeur maximale de chaque image ne dépasse pas 100 %. Passons maintenant à nos cours sur nos liens routeurs Si vous vous en souvenez très tôt, nous avons ces liens nous avons ces liens tout en haut et vous pouvez déjà commencer à voir notre style prendre forme. Nous avons ces liens de menu en haut, que vous pouvez voir si nous accédons aux composants , puis à l'en-tête de l'application. Chacune de ces liaisons de routeur possède cette classe de liaison. Prenons ceci, un point puisqu'il s'agit d'une classe, une marge d'un rem pour lui donner un peu d'espacement, et nous allons également nous assurer que chacun d'entre eux change de couleur lorsque nous les survolons. Pour ce faire, nous allons à nouveau cibler notre lien. Nous allons utiliser le sélecteur de survol modifier la couleur du texte pour qu'elle prenne une valeur RGB de 161. Donc le rouge, le vert du 132 et le 132 aussi pour le bleu. Enfin, pour tous les boutons présents sur notre site, nous définirons également le style par défaut pour chacun d'entre eux. Le bouton supprimera donc l'arrière-plan, la couleur par défaut, en la réglant sur aucune. Une bordure très fine de 0,5 pixel, une ligne continue, et la couleur de cette ligne sera une valeur RGB de 202 pour chacune d'entre elles. rayon de bordure de 0,3 rems, un peu de rembourrage pour agrandir un peu le bouton. Donc un demi-rem en haut et en bas et un rem à gauche et à droite. Je dois indiquer à l'utilisateur qu'il peut cliquer sur ces boutons pour transformer le curseur en pointeur. Donc, si nous examinons notre projet, nous pouvons constater que certains d'entre eux ont pris effet. Mais n'oubliez pas qu'il ne s'agit que de styles généraux pour notre projet, et nous ajouterons des styles plus spécifiques à chacune de nos pages et composants individuels. 16. Menu et panier Styling: Ensuite, nous allons accéder au fichier d'affichage du menu et ajouter un style spécifique aux composants de cette vue . Ouvre ça. Ensuite, juste en dessous des modèles, nous ajouterons le style et ajouterons ces attributs étendus. Si vous n'avez jamais utilisé l'attribut scoped auparavant, cela signifie que tous les styles ne s'appliqueront qu'à ces composants, c'est-à-dire aux modèles que nous avons créés ci-dessus. Pour les voir en action, nous allons passer à la section du menu. Rends-le un peu plus petit. En haut, nous avons un titre de niveau 3, qui est celui-ci juste ici. Prenons ceci et définissons l'alignement du texte pour qu'il soit au centre. Cela vaut également pour notre panier. Cette section supérieure et cette section inférieure seront bientôt appliquées à gauche et à droite sur la vue d'ensemble. Mais nous allons d'abord commencer par la mise en page mobile, qui est le petit écran. Passons juste en dessous de notre h3 et disons la mise en page mobile. Pour passer d'une mise en page à l'autre, nous allons utiliser la flexbox. Si nous allons tout en haut, vous pouvez voir que ce div a la classe de wrapper de menu. Ce sera lui qui sera chargé de contrôler l'orientation de notre menu et également de notre panier. Ces deux divs sont les éléments enfants de l'enveloppe de menus. Si nous descendons et que nous sélectionnons cette option, nous pouvons utiliser la flexbox. Emballage de menus. L'écran sera le Flex. Vous pouvez voir la direction de flexion par défaut lorsque vous utilisez les zones flexibles dans une rangée. Ils seront placés côte à côte sur la page. Il s'agit de la disposition que vous souhaitez voir sur la vue plus large. Mais pour une vue plus petite, nous devons remplacer cette valeur par la direction de flexion de la colonne. Et aussi, la couleur. La couleur de police sera une valeur RGB de 80, 96 et 112. Ensuite, nous avons les deux sections qui se trouvaient à l'intérieur et que nous venons de regarder, à savoir la section menu en haut, puis la section panier. Chacune d'entre elles possède sa propre classe correspondante. Nous avons .menu et aussi .basket. Nous avons défini une couleur hexadécimale pour chacune de ces sections. Celui que je vais choisir est faf1e2. Rayon de bordure pour chacune de ces sections, petite valeur de trois pixels. La hauteur, au cas où nous n'aurions pas beaucoup de contenu, nous nous assurerons que chacune de ces sections représente au moins 100 % de la hauteur de la fenêtre d'affichage. Ensuite, un peu de rembourrage à l' intérieur de ces éléments pour vous laisser un peu d'espace par rapport au bord de l'écran. C'est la direction que nous avons pour la vue mobile. Si nous l'étendons un peu plus loin, nous voulons l' inverser pour que la direction de flexion soit une rangée. Nous pouvons le faire dans une requête multimédia, où je souhaite que l'écran ait une largeur minimale de 900 pixels. Prenez effet, s'il vous plaît. Maintenant, ce que nous allons faire, c'est récupérer la section d'emballage du menu, copier, la coller dedans. Nous avons déjà défini le type d'affichage sur Flex. Nous allons le supprimer. J'ai déjà défini la couleur. Nous allons le supprimer. Tout ce que nous avons à faire ici est de définir la direction de flexion pour qu'elle soit alignée. Ajoutez de l'espace entre les deux en justifiant le contenu. Ensuite, nous devons décider de l'espace chacune de ces sections va occuper. La section pizza aura probablement besoin d'un peu plus d'espace. Nous pouvons utiliser la direction de flexion pour nous donner plus d'espace que le panier. Pour une vue plus large, prenons la section du menu définissons la valeur de flexion sur deux. Ensuite, pour notre panier, nous définirons la valeur de flexibilité à un. Cela signifie que cela essaiera d'occuper deux fois plus d'espace disponible que la section du panier. Vous pouvez voir que cela se reflète dans le navigateur. Nous pouvons faire la différence entre ces deux sections. Nous allons ajouter une bordure à droite de ce menu pour ajouter une ligne verticale au centre. Dans le menu, définissez la bordure à droite d'un pixel, une ligne continue et la couleur RGB 202 pour chaque valeur. Nous y voilà. Nous avons presque terminé cette section, mais ce que je vais faire pour ces deux boutons , c'est supprimer la bordure, les réduire un peu. Si nous montons dans la section, nous voyons que chacun de ces boutons a la classe quantity_button. Nous pouvons le faire dans la section générale, juste au-dessus de la requête multimédia. Quantité_ btn. Supprimez la bordure. Réglons le rembourrage sur une valeur de 0,4 rems. Cela réduit désormais le rembourrage de ces deux boutons de quantité. Ensuite, nous allons continuer avec le thème du style. Nous allons ajouter du style à notre section d'en-tête. 17. Styling d'entête: Nous allons sûrement passer à l' ajout de nouveaux composants et de nouveaux éléments à notre site. Mais rapidement, juste avant de le faire, nous allons appliquer un style à cette section d'en-tête. Ouvrons la barre latérale, passons à nos composants, puis à l'AppHeader. L'AppHeader a besoin de la section de style en bas, et la section de style sera limitée à ces composants particuliers. Jetons un coup d' œil à ce que nous avons. Nous avons la classe de titre du site tout en haut. Commençons par ceci. Titre_site. Commencez par la taille de police du titre de notre site et nous opterons pour 3,6 rems. Faites-le assez grand. La couleur bleue d'Alice. Nous ne pouvons pas trop le voir pour le moment , mais très bientôt, nous allons ajouter une couleur de fond à cette section d'en-tête pour la faire ressortir encore plus. Nous allons ajouter une transformation pour faire pivoter cette valeur à une certaine valeur en ajoutant la fonction de rotation. Indiquez le nombre de degrés selon lequel vous souhaitez le faire pivoter, et il peut s'agir d'un nombre positif ou négatif. Huit degrés. Vous pouvez voir que cette valeur est désormais inclinée et vous pouvez augmenter ou diminuer cette valeur. Pour lui donner un peu d'espace par rapport au contenu ci-dessous, ajoutez une marge au bas des éléments. Allons-y pour deux Rems. Ensuite, nous pouvons récupérer notre en-tête qui est l'enveloppe de cette section complète. L'en-tête va utiliser la CSS Flexbox pour mettre en page les choses. Pour les affichages d'écran plus petits et plus grands, ces contenus seront placés verticalement dans le sens flexible de la colonne. Définissez le type d'affichage. N'oubliez pas que la direction de flexion par défaut est ligne qui se trouve de gauche à droite sur la page. Nous pouvons inverser cela pour utiliser la colonne. Pour placer le contenu au centre, utilisez la propriété flex de align-items. Nous pouvons voir que le contenu se trouve à peu près en haut et en bas de l'en-tête. Nous allons ajouter de l'espace avec une valeur de remplissage d' un rem en haut et en bas et de zéro à gauche et à droite. Pour les liens du menu, nous allons faire correspondre la couleur bleue d'Alice , puis les placer dans l'image d'arrière-plan. Car l' image d'arrière-plan pointera vers une URL qui est stockée dans notre projet. Entrons dans le dossier des ressources, dans le dossier Images, puis à l'intérieur, nous avons une image appelée main-bg. Il s'agit d'une barre oblique à points, accédez au dossier des ressources, des images, de l'arrière-plan principal. Nous souhaitons également que cela ne se reproduise pas. Comme nous avons ajouté un arrière-plan, nous souhaitons également ajouter à la propriété de hauteur et la définir comme une valeur fixe de 650 pixels. La taille de l'arrière-plan, nous allons la régler pour la couvrir. Ensuite, si nous regardons cette image dans le dossier des images, le main-bg, nous pouvons voir que cette image n'est pas centrée, elle est coupée sur le côté droit. Corrigons ce problème et revenons à notre CSS. Utilisez la propriété appelée Background Position. Mets-le au centre. Cette image sera désormais toujours centrée sur différentes tailles d'écran. Ensuite, une petite ombre technique à chacun de ces caractères d'un pixel, un pixel, de trois pixels, et la couleur à appliquer à cette ombre technique sera une valeur RGB de 20, 20, 20. La prochaine chose à faire est de passer au niveau du titre, qui est le texte du restaurant numéro 1 pour les pizzas. Nous pouvons le récupérer avec le sélecteur h2 et ajouter un peu d'espacement. Propriété de marge de deux rems en haut et en bas et de zéro à gauche et à droite. Une couleur de texte blanc antique et la taille de police de deux rems. Bien. Voici notre style maintenant terminé pour l'en-tête. Notre site est un peu plus beau. Ensuite, nous allons passer à la page d'administration et créer un nouveau formulaire de pizza. 18. Admin : ajouter un nouveau formulaire de pizza: Dans notre vue d'administration, très bientôt, cela sera divisé en plusieurs zones. Il est judicieux d' organiser toutes ces zones en différents composants et de placer ces composants dans un dossier d'administration. Passons à la barre latérale. Dans les composants, et à l'intérieur d'ici. Créez un nouveau dossier avec cette nouvelle icône de dossier appelée admin, et nous regrouperons tous les composants liés à l'administration. À l'intérieur, créez un nouveau fichier. Celui-ci sera le premier élément pour notre administrateur, qui sera un formulaire pour créer une nouvelle pizza. Nous l'appellerons NewPizza.vue. Créez le modèle dont nous avons besoin pour cette section et le wrapper de section. Cela aura la classe admin_section. Elle sera divisée pour avoir une section d'en-tête avec un titre et également le formulaire pour ajouter notre nouvelle pizza. L'en-tête de cette section, la classe de admin_section_header, h3. Texte de l'ajout d'une nouvelle pizza. Avant d'aller plus loin avec tout autre contenu, voyons à quoi cela ressemble dans le navigateur, mais nous devons d'abord l'importer dans notre interface administrateur. Accédez aux vues et à la vue d'administration. Tout en haut, placez-le dans notre script pour importer notre fichier. Ce que nous allons faire ici, c'est ajouter un attribut appelé setup. Nous reviendrons sur cette configuration très bientôt dans ce cours, mais pour l'instant, nous allons importer le composant que nous avons créé, qui s' appellera new pizza. Je vais l'importer depuis le répertoire @ pour accéder à l'itinéraire, au dossier des composants, à l'administrateur et au nom de fichier de la nouvelle pizza. Nous avons atteint le niveau 3. Pour l'instant, nous pouvons importer nos composants et le placer ci-dessous. Instantanément, dès que nous aurons enregistré, nous verrons que cela est ajouté à la section d'administration Accédez donc au lien d'administration et voici le titre que nous avons ajouté aux nouveaux composants de la pizza. En continuant sur le titre et en dessous, créez notre formulaire. Nous supprimerons l'action car elle est alimentée en gérant tous les JavaScript nécessaires. Chacune de nos sections, comme le nom de la pizza, la description et les différentes options, était entourée d'un style div. Ce div aura la classe form_group. Ensuite, il y aura une étiquette et une entrée. L'étiquette, le texte du nom, l'entrée. Le premier nom de la pizza aura le type de texte et l'identifiant du nom qui correspondront à notre étiquette. Copions cette section div. Nous allons le dupliquer et le coller ci-dessous. Le second sera pour la description. Pour celui-ci, nous n'avons pas besoin de saisie, nous allons utiliser une zone de texte, nous pouvons donc avoir plusieurs lignes de texte ou une longue description. Nous allons déplacer tout son contenu à l'intérieur d'ici. Nettoyons cela et ajouterons les lignes dont nous avons besoin. Réglons la valeur par défaut sur cinq ainsi qu'un identifiant de description, qui correspondra à l' étiquette juste au-dessus. Enregistrez ceci, et nous pouvons voir que nos entrées apparaissent maintenant à l'écran. Ensuite, nous allons créer deux nouvelles sections , destinées à nos première et deuxième options de pizza. Cela va nous donner deux options différentes pour la taille de la pizza. Le texte à l'intérieur des éléments P les transformera en éléments forts pour les rendre plus gras. Option 1. Ensuite, nous pouvons continuer avec nos éléments de formulaire. Nous allons copier le groupe de polices d'avant, le plus haut, l'écrire dedans, et celui-ci sera pour la taille. Ce sera en pouces. L'étiquette de la taille 1. Le type de texte est tout à fait correct, et nous allons également faire correspondre son identifiant à l'étiquette. dessous, nous devons également créer un nouveau groupe de formulaires, et celui-ci est toujours lié à l'option 1, et c'est le prix de cette taille particulière. Le texte du prix, l'étiquette du prix 1, l'identifiant correspondant. Ensuite, nous dupliquerons soigneusement cette section en ce qui concerne le prix , la taille et le texte. Copiez ceci. Collez-le ci-dessous pour créer une deuxième section. Celui-ci est pour l'option 2. Modifions les noms de propriété de chacun de ces attributs pour qu'ils soient de taille 2. Pareil pour le prix. Enregistrez ceci et passez au navigateur. Nous avons maintenant deux sections pour remplir les tailles. La dernière section sera consacrée à un bouton permettant de soumettre ce formulaire. Encore une fois, placez-le dans un div avec la classe du groupe de formulaires. Cela permettra de maintenir la cohérence du style. Ajoutez un bouton avec le texte d'ajout. Vous allez maintenant ajouter un nouveau formulaire de pizza maintenant rempli. Nous y reviendrons plus tard pour améliorer le style. Mais ensuite, nous allons passer à un autre composant d'administration, qui consiste à afficher les pizzas. 19. Admin : Composant de pizzas: Nous avons donc ajouté de nouveaux composants à pizza dans l'interface administrateur. Le prochain composant d'administration que nous allons créer est un composant pizzas, qui affichera toutes les pizzas disponibles dans le menu. Je vais accéder à la barre latérale et créer à nouveau un nouveau fichier Vue.js dans l' administrateur pour que tout reste organisé. Ce sera simplement Pizzas.vue. Comme toujours, fermez la barre latérale et créez un modèle pour stocker notre code HTML. Une section, qui aura la classe admin_section. Jetez également un œil au nouveau composant pizza que nous avons créé précédemment. Cela correspond également à cette même section. Nous pouvons donc appliquer le même style CSS. Cela comportera également un en-tête. Encore une fois, faites correspondre dans cet en-tête juste ici le même nom de classe. La classe était donc admin_section_header. Cela nous donnera un style cohérent pour tous nos blocs d'administration, titre de niveau 3 avec le texte du menu. C'est donc tout ce dont nous avons besoin pour la section d'en-tête. Passons en dessous de l'en-tête et créons notre tableau, qui listera toutes les pizzas disponibles dans le menu. La section du fil, ou l'en-tête du tableau, placée dans une rangée, puis le septième élément pour créer vos deux en-têtes. Nous allons donc faire en sorte que cela reste assez simple. Tout ce que nous faisons est d'ajouter un nom de pizza sur la gauche, puis sur la droite de la table, nous ajouterons un bouton pour supprimer cette pizza du menu. Ainsi, le titre de la pizza et le second seront le texte de suppression du menu. Je vais configurer une fonction plus tard pour ce faire. Sous le fil, créez la section du corps. La première rangée, qui se trouvera en dessous de nos rubriques. La première chose qui se trouve ici est le nom de la pizza dans les éléments de données du tableau, et nous allons simplement ajouter un exemple de texte à l'intérieur pour nom de notre pizza et nous le lierons à notre base de données plus tard. Ensuite, la cellule suivante à l'intérieur des données du tableau est un bouton qui va supprimer la pizza du menu. Le bouton possède le type de bouton et également une classe pour notre style de btn_remove. Ensuite, à l'intérieur d'une entité HTML, qui sera la croix. Il s'agit de l'esperluette, le mot des temps, suivi d'un point-virgule. C'est tout le contenu dont nous avons besoin pour le moment et plus tard, nous créerons une boucle pour parcourir toutes les pizzas disponibles et dupliquer chacune de ces lignes. De plus, comme pour les nouveaux composants de pizza, nous devons les importer dans la vue d'administration, ici. Dupliquez ceci et celui-ci sera pour toutes les pizzas. Il se trouve dans le même dossier d'administration. Nous changeons donc le nom, et je vais le mettre en bas du fichier dans le navigateur. Voici notre table avec notre seule rangée et notre pizza unique. Ensuite, nous allons créer les derniers composants d'administration pour répertorier toutes les commandes des clients. 20. Admin : composant des ordres de liste: Les derniers composants d'administration dont nous avons besoin seront utilisés pour répertorier les commandes en cours. Encore une fois, j'ai juste ces composants dans le dossier d'administration pour que tout reste organisé. Créez un nouveau fichier et celui-ci sera le orders.vue. Cela suivra également un modèle similaire aux précédents : nous créons un modèle, nous créons une section avec la section de classe d'administrateur, nous créons un en-tête, puis un tableau pour répertorier toutes les commandes. Commençons par le modèle et la section tout en haut. C'est notre emballage. La section doit également avoir une classe d'en-tête de section d'administration. Encore une fois, cela correspond aux composants d'administration précédents que nous avons créés, tout comme l'en-tête en haut, la classe, et si je pouvais simplement utiliser le mauvais composant en haut. Copions ceci. Celle-ci doit être l'en-tête de la section d'administration et la section doit être la classe de la section d'administration. Bien. Nous sommes maintenant de retour sur la bonne voie et nous pouvons créer à l'intérieur de l'en-tête notre rubrique de niveau 3 avec le texte des commandes en cours. De plus, tout comme les composants de la pizza que nous venons de créer, plus tard, lorsque nous l' associerons à Firebase, toutes nos informations seront extraites de notre base de données. Cela signifie que ce sera dynamique. Pour l'instant, nous allons simplement saisir quelques données fictives et ajouter cinq commandes en cours augmenteront et diminueront en fonction nombre de commandes que nous avons réellement dans notre base de données. Ensuite, la section du tableau, la ligne du tableau, les balises du titre. Les commandes indiqueront l'article, qui sera le nom de la pizza. N'oubliez pas que chaque pizza a deux tailles différentes, nous devons donc également la répertorier. Nous devons connaître la quantité et le prix. Nous ajouterons entre parenthèses le mot «  total » , car il s' agira de la valeur totale, qui sera le nombre de pizzas multiplié par le prix. Ensuite, en dessous de la première ligne de notre tableau, ajoutez la deuxième ligne et, pour l'instant, nous allons passer un exemple de commande. La première cellule à l'intérieur de l' élément de données du tableau sera réservée au numéro de commande. Cette cellule contiendra également deux informations. premier est le numéro de commande réel, augmentera en fonction du nombre de commandes que nous avons, et nous ajouterons également un bouton pour supprimer cette commande de la base de données, qui sera utile une fois la commande terminée. À l'intérieur des balises fortes, nous ajouterons le numéro de commande. Passons au numéro 1 pour le moment. Le bouton, l'entité HTML, qui sera l'esperluette et les heures, suivie d'un point-virgule, et ce sera une petite croix pour supprimer de notre base de données, la classe pour le style btn_remove, ainsi que le type de bouton. Ce numéro de commande et ce bouton Supprimer figureront sur ligne indépendante, puis la troisième ligne, que nous ajouterons juste en dessous, comportera toutes les valeurs situées sous nos en-têtes. Par conséquent, la première donnée du tableau dont nous avons besoin est l'élément. Ce sera le nom de la pizza, suivi de la taille, de la quantité. Toutes les valeurs sont correctes pour le moment à l'intérieur d'ici. La dernière chose dont nous avons besoin est le prix. Pour voir cela, accédez à notre vue d'administration. Nous pouvons maintenant l'importer en haut de notre fichier. Celui-ci, ce sont les ordres. Je vais le placer en bas du modèle. Faites défiler vers le bas. Bien. Nous avons une grande partie de l'interface utilisateur, donc la section d'administration est maintenant en place, et tout est maintenant configuré pour ajouter des données dynamiques à partir de notre base de données. Mais ensuite, nous allons passer à une autre de nos vues, à une autre de nos vues, la vue d'accueil, et commencer à ajouter notre contenu. 21. Vue d'accueil: Ensuite, nous allons travailler sur cette vue d'accueil, qui sera composée de nouveaux composants, et qui sera remplacée par le routeur de visualisation. N'oubliez pas que nous avons cette section d'en-tête en haut. Ensuite, en bas, nous avons déjà deux prises distinctes placées via le RouterView. Nous avons les sections relatives à la livraison et à l'historique, qui figureront toujours au bas de notre modèle. N'oubliez pas que juste au-dessus, nous aurons notre RouterView, qui affichera tous les composants de notre dossier de vues. Notre vue d'accueil est déjà configurée. Nous avons un modèle simple avec le texte de la page d'accueil. Nous pouvons le voir juste ici. N'oubliez pas que nos deux composants bas, qui sont placés dans le RouterView, ne s'afficheront que sur cette page d'accueil, car si nous accédons au routeur et à la page d'index, nous les avons configurés en tant que composants de livraison et historique et en tant que composants par défaut, qui sera la vue d'accueil. Ce sera cette section en haut. Passons maintenant à la vue d' accueil. Ensuite, nous pouvons nous mettre au travail en ajoutant du contenu pour notre style. Nous pouvons configurer la classe hot, puis juste en dessous, créer une nouvelle section div, qui aura la classe hot_text. Déplacez-vous vers le haut, un cap de niveau 3. Cela affichera le texte «  chaud sorti du four ». Nous y voilà. Une section de cette page d'accueil contiendra également du texte et comportera également une hot_pizza végétarienne, ainsi qu'une image que nous avons dans le dossier des images, qui se trouve à l'intérieur des ressources. Nous avons besoin de ce fichier fire.jpg. d'abord le texte sous le titre du niveau 3, puis ajoutez un élément p à votre texte. Celui-ci aura la classe hot_pizza_name. Le nom de la pizza est végétarienne chaude. Petit texte. Celui-ci aura la classe hot_pizza_description. Ensuite, le texte de notre plat végétarien emblématique, mais avec une touche d'originalité. Ensuite, en dessous de ce texte, nous pouvons placer un lien vers un routeur, qui redirigera vers notre menu. Le composant RouterLink, le texte de Let's Order. Ensuite, comme toujours, avec notre RouterLink, nous devons transmettre les deux attributs avec les deux points, puisque ceux-ci contiendront des données dynamiques, transmettre nos objets dynamiques où nous créerons un transmettre nos objets dynamiques où nous créerons lien vers le nom de MenuLink. Ce MenuLink est le même que celui que nous avons configuré dans le fichier du routeur, que nous pouvons voir dans le routeur, puis dans le fichier index.js. Ce sont les noms uniques que nous avons ajoutés à chacun de ces chemins. On y est presque. Nous avons maintenant cette section div, puis juste en dessous, nous la placerons dans notre image. Je vais vous montrer l'image que nous venons de regarder, qui se trouvait dans le dossier des ressources. Nous utiliserons../pour monter un niveau dans notre répertoire vers les ressources, images et le fichier fire.jpg. Le style de classe peut être hot_img, puis également le texte alternatif. Tout notre contenu est en place. Vérifions simplement que ce lien fonctionne. Cela permet d'accéder à notre section de menu, ce qui est bien. Nous pouvons descendre en dessous notre modèle et ajouter la section de style. Cela doit être sculpté sur ce composant. Nous allons commencer par la section principale avec la classe de hot, et voici le wrapper de cette section complète. Cela sera chargé de modifier la mise en page sur le petit et le grand écran. Pour ce faire, nous allons utiliser le type d'affichage Flex. Comme nous allons commencer par la première vue sur mobile, nous pouvons réduire la taille du navigateur, puis modifier la direction des colonnes sur un écran plus petit. La direction flexible est égale à la colonne. Cela placera notre contenu verticalement. Ensuite, dans une requête multimédia sur un écran plus grand, nous allons inverser cette option pour utiliser la ligne. Nous allons maintenant le faire avec @media, où nous ciblerons une largeur d'écran minimale de 900 pixels. Encore une fois, nous allons saisir la classe de chaleur et modifier la direction de flexion pour qu'elle soit égale à la ligne. Le petit écran, agrandissez-le, et maintenant deux éléments apparaissent côte à côte. Le premier élément était ce div, et le second est notre image. Placez-le au centre en alignant les éléments. En fait, cela veut simplement entrer dans la première section mobile, donc des fournitures pour le petit écran. En dehors de la requête multimédia, nous utiliserons le hot_image, ainsi que le hot_text. C'est une classe, ils la placeront entre les points. Nous avons la classe hot_text ainsi que notre image, qui constitue nos deux sections principales. Cela ciblera nos deux zones de contenu, et nous leur donnerons la même taille en définissant le flex comme une valeur de deux rems. Ensuite, l'alignement du texte par rapport au centre. Ensuite, nous avons le titre, qui n'a pas de classe Nous pouvons donc cibler un titre de niveau 3, qui est un enfant du hot_text. Le wrapper de hot_text sélectionnera le h3, qui est imbriqué à l'intérieur, et définira la couleur comme une valeur hexadécimale bb2118. qui nous donne cette jolie couleur rouge, que nous pouvons voir ici. Ensuite, le hot_pizza_name, qui est la hot_pizza végétarienne. Agrandissez-le un peu en réglant la taille de la police. Essayons 2.2 rems. Un peu plus petit aussi. 1,8. Ensuite, pour le texte suivant, il s'agit de la classe hot_pizza_description. Copiez ceci. Placez-le dedans. Le style de police doit être en italique, le poids de police doit être un peu plus léger, optons pour 300. Vérifions-le également sur l' écran plus grand. C'est très bien. Pour l'instant, nous pouvons procéder quelques ajustements selon vos goûts si vous le souhaitez. Mais ensuite, je vais continuer avec le style de ce projet. Nous allons notamment ajouter du style à nos tableaux, ainsi qu'à nos entrées de formulaire. 22. Forme et tableau Styling: Pour terminer cette section, passons maintenant au fichier main.CSS, où nous pouvons commencer à appliquer des styles partagés entre nos formulaires et nos tableaux, ainsi que des styles CSS généraux. À partir de là, en particulier au sein de l'administration, nous avons certaines zones qui incluent des classes partagées. Par exemple, si nous allons dans les composants et dans le dossier admin, nous avons cette nouvelle pizza. Il y a le wrapper de section de la section admin, puis nous avons cette section d'en-tête cohérente avec la même classe dans ces trois composants. Nous l'avons ici en haut des commandes et également en haut des pizzas. Nous avons également un formulaire auquel nous allons ajouter du style. Nous avons différents tableaux pour le menu et les commandes en cours, et nous avons également un tableau dans la vue du menu. Nous avons différents styles qui sont partagés entre plusieurs composants. Plutôt que de les placer dans des composants individuels, nous allons entrer dans le fichier main.CSS et y ajouter le code partagé. En plus des principaux wrappers formulaires et des tableaux, nous avons également quelques petits détails, tels que le bouton de suppression qui se trouve dans le menu, ainsi que dans les commandes en cours. Nous lui avons donné la classe btn_remove. Nous allons maintenant les ajouter à notre feuille de style. Entrez dans la source, dans les ressources, et nous aurons ce fichier CSS principal. Nous avons déjà ajouté du contenu à l'intérieur, donc allons tout en bas, en dessous du bouton, et nous allons continuer à partir de ce bouton et aller juste dessous et ajouter la classe btn_remove, que nous venons de rechercher auparavant. Puisque nous allons supprimer quelque chose avec cela, nous voudrions probablement ajouter une couleur rouge. La teinte que je vais choisir est une valeur RGB de 180 lignes, 67 et 67. Vous pouvez le voir instantanément dès que vous enregistrez ces deux boutons en bas et que vous changez de couleur. Nous pouvons également supprimer cette bordure en la définissant sur aucune, et la rendre un peu plus visible en augmentant la taille de la police à 1,2 rems. Cette section de menu ainsi que les commandes en cours sont contenues dans un tableau HTML. Pour l'élément principal du tableau, ajoutons un style. Nous pouvons placer dans un rayon de bordure, juste un rayon de bordure subtil de 0,3 rems. Nous le verrons plus clairement lorsque nous ajouterons des couleurs différentes. Nous pouvons également régler l' alignement du texte pour qu'il soit sur la gauche. Cela poussera tout le texte vers la gauche de chacune des cellules individuelles. Une largeur de 100 % affiche la largeur totale disponible. Ensuite, nous passerons aux cellules individuelles qui se trouvent à l'intérieur du th, pour l' en-tête de notre tableau et également td pour les données de notre tableau. À l'espacement, nous ajouterons un peu de rembourrage ou un espacement à l'intérieur de l' élément de 0,6 rems. Ensuite, nous travaillerons sur ce formulaire pour la section Ajouter une nouvelle pizza. Prenez l'emballage du formulaire principal, un espace vide en haut et en bas et un rem à gauche et à droite. Nous allons également faire correspondre le rayon de bordure du tableau en l'ajoutant également au formulaire. Encore une fois, nous verrons cela plus clairement plus tard. Dans la nouvelle pizza, nous verrons que chacun de ces éléments de formulaire, tels que le nom et la description, est intégré dans ce div avec la classe du groupe de formulaires. Cela est cohérent pour chacune de ces sections. Prends ça. Il s' agit donc de form_group. peu d'espace de remplissage pour chacun de ces groupes et nous ajouterons un rem verticalement en haut et en bas et zéro à gauche et à droite. Utilisez la Flex Box avec l'écran Flex. Nous allons aligner les objets au centre. Aligner les éléments au centre comme vous pouvez le voir donnera cet alignement vertical afin que le texte reste au milieu de chacune de ces sections. Si nous ne l'avons pas, vous pouvez voir que le texte est aligné tout en haut de cet élément. Nous ajouterons une bordure tout en bas de 0,5 rems pour l'épaisseur, une ligne continue et la couleur de la ligne aura une valeur RGB de 202 pour chacune des couleurs. Oups, c'est un peu trop épais. Cela veut juste être de 0,5 pixel. Ensuite, nous supprimerons le soulignement de la partie inférieure. Encore une fois, saisissez notre form_group, sélectionnez le dernier type qui est la toute dernière occurrence, qui est notre bouton, puis nous supprimerons la bordure inférieure en réglant sur none. Ensuite, nous allons donner à ces étiquettes et à nos entrées une taille constante à l'aide de la boîte flexible. L'étiquette leur donnera une valeur de flexion constante de 1 afin qu'ils restent tous identiques. Ensuite, comme nous voulons que l'entrée soit un peu plus grande, nous pouvons cibler toutes les entrées ainsi que la zone de texte et leur attribuer une valeur flexible de 3. Cela signifie que toutes nos entrées sur la zone de texte essaieront d'occuper trois fois plus d' espace disponible que nos étiquettes. Travaillons maintenant avec les bordures pour chacune de nos entrées. Juste en dessous de la valeur de flexion de 3, définissez la bordure. Cela prendra la même valeur que notre bordure inférieure. Nous pouvons le copier, le coller. Cela nous donne simplement une bordure plus claire et plus subtile pour chacune de nos entrées. rayon de bordure de 0,3 rems, un peu de rembourrage pour les agrandir légèrement de 0,6 rems. Par défaut, les entrées de formulaire HTML et les zones de texte n'héritent pas de la police et de la couleur par défaut. Nous devons donc les définir manuellement en configurant la famille de polices pour qu'elle hérite du parent et en faisant de même pour la couleur. Comme nous l'avons déjà vu, chacun de ces composants d'administration, comme la nouvelle pizza, possède cette classe de section d'administration, puis cet en-tête de section d'administration. Passons à notre style et nous pourrons les cibler. Tout d'abord, le wrapper principal qui est la section d'administration. Marge de 1 rem pour espacer tous nos composants. La couleur d'arrière-plan, qui est une valeur hexadécimale de faf1e2, et enfin, pour cette section un rayon de bordure de 0,3 rems. Ensuite, la section d'en-tête de chacun de ces composants et mémorisez-les contient la classe admin_section_header. Définissez le type d'affichage sur Flex. Faites une sauvegarde. Celle-ci a l'air bien et, tout comme celle-ci, nous aurons un petit problème, mais ajoutez une nouvelle pizza. Cela ne devrait pas être côte à côte. Nous avons de nouvelles pizzas, nous avons l'emballage, l'en-tête, le formulaire. Et en fait, nous devons juste nous assurer que cet en-tête est fermé. Découpez donc la balise de fermeture de l'en-tête et collez-la juste après notre h3. Cela semble maintenant meilleur et cela nous permet de rester plus cohérents avec le reste de ces sections. Revenons au style. Et vous vous demandez peut-être pourquoi exactement nous avons configuré la boîte flexible alors que nous n'avons qu'un seul élément à l'intérieur. Eh bien, c'est parce que plus tard, nous allons également ajouter une petite icône sur la droite pour fermer chacune de ces sections si nous n'en avons pas besoin. Par conséquent, comme nous aurons plusieurs sections, nous pouvons ajouter du contenu de justification pour ajouter de l'espace entre chacune d'entre elles. De plus, pour maintenir ces éléments alignés verticalement, alignez les éléments au centre. Enfin, un rembourrage d'un rem qui jouera sur tous les côtés de ce titre. Nous arrivons maintenant à quelque chose en ce qui concerne le style. Cela devrait également s'appliquer à notre section de menu. Ensuite, la dernière section à laquelle nous ajouterons du style dans cette vidéo, à l'intérieur de la section d'accueil, est composée de chacun de ces blocs d'informations situés en bas. Ils ont la classe info_block, que vous pouvez voir si nous entrons dans les composants principaux , à savoir l'App.vue. Cela rend notre livraison et nos composants historiques , alors passez à la livraison. Cela a la classe de bloc d'informations , tout comme le composant historique. Revenons à notre info_block de style. Le type d'affichage du flex, la direction de flexion de la colonne, l' alignement des éléments au centre, ajout d'un peu de rembourrage à chacun des rem, ainsi qu'une couleur d' arrière-plan différente pour chacun de nos blocs et la valeur hexadécimale de faf1e2. Sauvegardons ceci et voyons à quoi cela ressemble. Dans le navigateur, nous pouvons voir sur la plus petite vue ils sont empilés verticalement les uns sur les autres. Nous allons les étendre plus largement. Les deux composants sont côte à côte et nous avons cette direction de flexion de la colonne pour chacun d'eux. Le contenu est aligné au centre, un peu de rembourrage et la couleur d'arrière-plan. Il existe encore d'autres styles à appliquer à des composants individuels, mais nous les ajouterons au fur et à mesure du cours. Mais maintenant, nous avons beaucoup de contenu en place. Dans la section suivante, nous ajouterons du code JavaScript et verrons comment utiliser l' API de composition VueJS. 23. Options Ou Composition ?: L'API Options est quelque chose que vous connaissez peut-être si vous avez créé avec Vue.js dans le passé, dans Vue version 1 ou Vue version 2. La bonne nouvelle, c'est que dans la version 3 de Vue, l'API Options est toujours là pour rester. Mais nous avons une approche différente que nous pouvons également utiliser, appelée API de composition. L'API Options est quelque chose que vous connaissez peut-être si vous avez déjà créé avec Vue version 1 ou 2. Il s'agit d'une méthode traditionnelle de création d'applications Vue.js. La bonne nouvelle, c'est que Vue 3 n'est partie nulle part. L'API Options ressemble à ceci. À l'intérieur du script et de l'exportation par défaut, nous avions différentes sections, telles qu'une section de données. Cela contenait toutes les données ou états des composants, que vous pouvez considérer comme des variables. Il existe également des méthodes. C'est ici que nous pouvons ajouter nos fonctions JavaScript et les appeler selon nos besoins. Parmi les sections qui ne sont pas présentées ici citons les crochets, les montres et les accessoires à cycle de vie calculés . Encore une fois, tous sont toujours valables pour être utilisés dans Vue 3. Cependant, pour ce projet, je vais utiliser l'API de composition Vue 3. L'API Composition nous permet d'écrire du code qui ressemble davantage à du JavaScript normal. Cela ressemble à une variable JavaScript normale, un délai d'attente et à une fonction. Cela peut désormais être écrit dans les applications Vue.js, remplacez-le comme l'API Options dans une valeur d' exportation par défaut, puis dans une fonction de configuration, qui est mise en évidence ici. Les éléments contenus ici, tels que les variables et les fonctions, peuvent être mis à la disposition du modèle en les renvoyant en bas de la page. Il convient également de noter que nous pouvons utiliser la fonction de configuration parallèlement à l'API Options existante. Ici, la section des données sera transmise, mais toute autre section de l'API Options peut également être ajoutée. est aussi beaucoup plus que cela, car nous pouvons organiser le code dans des fichiers séparés et réutiliser le chemin si nécessaire, et bien d'autres choses que nous utiliserons selon nos besoins. Outre le JavaScript classique, nous pouvons également utiliser la réactivité de Vue. Ici, nous importons une référence à partir du package Vue et y incorporons la valeur de toutes les variables. Une référence est utilisée pour transformer le contenu en objet réactif. Cela signifie que toutes les parties de notre application qui en dépendent changeront si les données qu'elle contient changent. Cela signifie essentiellement qu'aucun composant n'est tenu à jour en cas de modification des données. Nous y reviendrons également très bientôt. En plus de ref, nous pouvons également importer à partir du package Vue des éléments tels que les propriétés de l' ordinateur et des montres, qui sont disponibles avec l'API Options. Enfin, nous avons également une méthode plus courte écrire du code de composition , à savoir la configuration du script. Sur la gauche se trouve l' exemple similaire au précédent, où nous avons une section de configuration et renvoyons toute Vue que nous voulons utiliser dans le modèle ou le code HTML. Ensuite, sur la droite, c'est exactement la même chose en utilisant la configuration des scripts. Il ajoute un attribut de configuration à nos balises de script pour raccourcir le code. Notez également que nous n'avons pas besoin la section des retours car toutes les données que nous souhaitons utiliser dans le modèle sont automatiquement mises à disposition. La configuration du script sera l'approche que nous utiliserons dans ce projet de classe, car elle est plus propre, plus courte et offre également de meilleures performances en interne. 24. L'objet et la liaison de données NewPizza: Passons maintenant au nouveau fichier Pizza.view. Nous pouvons commencer à ajouter des scripts JavaScript en utilisant la configuration des scripts que nous venons de voir. Nous pouvons ajouter des objets NewPizza, qui constitueront la structure de toutes nos pizzas dans notre application. Juste au-dessus du modèle, ajoutez les balises de script à placer dans les attributs de configuration. Ensuite, comme nous venons de le voir, nous devons importer notre référence, et nous l'importons depuis le package de vue, qui se trouve dans les modules de nœud. Ensuite, nous pouvons créer nos objets NewPizza, qui sont inclus dans cette référence. Cette référence va créer un objet réactif que nous pouvons utiliser dans toute notre application et dont utiliser dans toute notre application l'état sera mis à jour. Commençons par une constante ou une variable appelée NewPizza, configurons notre référence comme wrapper. Ensuite, nous pouvons y transmettre n'importe quel type de données. Cela peut être une chaîne, un tableau. Mais pour notre cas d'utilisation, nous devons créer un objet possédant toutes les propriétés de Pizza. Ces propriétés comprennent le nom de Pizza, on peut dire Margherita. Mais juste pour cela, je vais ajouter Eg. La raison en est que ce sera l' état initial de notre forme. Je vais entrer dans notre interface administrateur, jetons un coup d'œil et nous verrons ce nom. Cela va être lié à notre objet. La propriété de nom ici utilisant modèle V sera liée à notre nom. Nous lierons également la description à la propriété suivante. Lorsque nous enregistrons ce formulaire pour la première fois, le texte qu'il contient reflétera ce que nous voyons ici. Cela permet simplement à l'utilisateur de savoir exactement ce qu'il doit écrire pour créer notre nouvelle pizza. Ensuite, une description. Encore une fois, nous allons donner l'exemple d' une délicieuse pizza à base de tomates garnie de mozzarella. Séparés par des virgules, nous pouvons ensuite ajouter nos options, qui seront un tableau. Les placer dans un tableau nous permettra de créer différentes options, telles que notre taille. Chacun d'entre eux sera un objet. Nous allons avoir deux objets, juste comme celui-ci côte à côte. Chacune d'entre elles aura une propriété de taille, disons neuf pouces pour la toute première, et aussi un prix. même pour notre deuxième objet, va de même pour notre deuxième objet, mais celui-ci coûtera une pizza de 12 pouces et aussi un prix. N'oubliez pas que toutes ces valeurs ne sont que des valeurs de départ. Toutes ces valeurs d'objet peuvent être remplacées par les valeurs de ce nouveau formulaire à pizza. Ils seront mis à jour avant de les ajouter à la base de données. Pour lier les entrées de notre formulaire aux propriétés de nos objets, nous allons utiliser le modèle. Le modèle nous permet de créer on appelle une liaison de données bidirectionnelle, ce qui, comme indiqué, signifie que les valeurs de notre objet apparaîtront dans les entrées du formulaire. Dans toutes les entrées de formulaire que nous saisissons, nous pouvons ensuite les mettre à jour pour remplacer ces entrées de formulaire. Cela se reflétera à l'intérieur de notre objet. Pour ce faire, commençons par le nom. Accédez à nos entrées de formulaire, où nous saisissons le nom. Nous pouvons utiliser v-model en transmettant en tant qu'attribut. Nous voulons lier cela à notre objet, qui s'appelle NewPizza, et nous pouvons accéder à la propriété name, donc NewPizza.name. Copions ceci. Descendez dans la zone de texte, et nous pouvons la lier à la description. Après la description, nous avons ensuite des options, et nous devons les lier à chacune de ces valeurs de tableau. N'oubliez pas que les tableaux commencent à la position zéro du numéro d' index. Celui-ci sera zéro, et celui-ci sera le numéro d'index 1. Allons-y et nous pouvons ajouter ces options. Nous avons la taille numéro 1, collez-la dedans, NewPizza.options. Sélectionnez la première valeur dont le numéro d'index zéro dans la propriété appelée taille. Copions ceci, collons-le dans celui avec l'identifiant du prix numéro 1, les changements étant le prix. ensuite à notre option 2 dans la taille, il s'agit de l'indice numéro 1. Encore une fois, indiquez le prix numéro 1 et modifiez également la propriété de l'objet pour qu'elle soit le prix 2. Maintenant, si nous l' enregistrons dans notre formulaire, nous pouvons voir toutes les données initiales à l'intérieur de chacune d' elles et vous pouvez voir que l' option est également correctement définie. Nous avons le 9 pouces et aussi le 12 pouces. Consultez également la liaison de données bidirectionnelle et vérifiez que l'objet est mis à jour à partir de ce formulaire. Nous pouvons maintenant accéder à nos modèles. N'importe où à l'intérieur d'ici, nous pouvons afficher la valeur de NewPizza. Nous pouvons le voir en haut. Supprimons tout ce qui se trouve dans ces entrées. Ceci est maintenant mis à jour. Pareil pour la description, cela fonctionne. Essayons de mettre à jour le prix. Notre deuxième option est également liée à. Nous pouvons maintenant le supprimer en toute sécurité et passer à la vidéo suivante. Nous examinerons les références plus en détail et verrons comment ajouter des articles au panier. 25. Ref’s & Ajout au panier: Précédemment, dans ce nouveau composant pour pizza, nous avons brièvement examiné ce que l'on appelle une référence. Une référence est un wrapper pour une valeur. Dans notre cas, la valeur est la pizza. Dans la prochaine vidéo, nous utiliserons également une référence comme emballage ou panier, lequel l'utilisateur pourra ajouter des pizzas avant de les acheter. Pour ce faire, il convertit la valeur en objet réactif. L'avantage est que chaque fois que cet objet réactif est mis à jour, tous les composants qui s'appuient sur ces données seront également mis à jour. Passons à la vue du menu pour commencer à les utiliser et examinons les références plus en détail. Dans la vue du menu en dehors du modèle, créez notre script avec l'attribut setup. Créez notre importation, comme nous l'avons vu précédemment, où nous importerons la référence à partir du package Vue.js. Nous devons également créer une constante ou une variable pour notre panier. Enroulez-le dans un radeau pour rendre le contenu réactif et définissez la valeur initiale d'un tableau vide. Nous devons également créer une fonction qui va mettre à jour le panier. Appelons cela AddToBasket. Comme nous l'avons mentionné précédemment, lorsque nous utilisons la configuration de scripts, cela nous permet d'accéder directement à l'une de ces variables ou fonctions à l'intérieur de notre modèle. Passons à notre modèle et localisons notre bouton Ajouter, en nous assurant que nous sommes dans le menu. Nous pouvons maintenant répertorier les clics en utilisant @click et le configurer pour déclencher notre fonction appelée AddToBasket. Vérifiez que cela fonctionne. Nous le publierons dans un journal de console. N'importe quelle chaîne de texte convient. Saute dans la console. Cliquez sur le bouton et notre texte est maintenant mis à jour. Juste avant d'ajouter du code à notre fonction, je souhaite rapidement revenir à notre référence et voir comment cela fonctionne plus en détail. Pour cela, je vais créer un objet simple appelé user avec la propriété name et également une propriété likes. Vous vous demandez peut-être pourquoi je viens de saisir un objet utilisateur sans rapport à l'intérieur. Eh bien, le contenu de cet objet n'est pas important. La chose importante à noter ici est les objets JavaScript ont des propriétés. Dans notre cas, nous avons la propriété appelée name et la propriété appelée likes. Souvenez-vous plus tôt lorsque j'ai dit que lorsque nous utilisons une référence, Vue.js transforme en coulisses le contenu contient en un objet réactif. Comme nous venons de le voir, tout type d' objet possède ces propriétés. Comme notre panier est transformé en un objet en arrière-plan, valeur lui est également attribuée. Cette propriété de valeur nous permet de mettre à jour ou de lire le contenu qu' il Cette propriété de valeur nous permet contient. Tapons rapidement ceci et je vais vous montrer exactement ce que nous voulons dire. Pour l'instant, nous allons simplement commenter notre panier. Nous allons créer un panier connu, qui n' utilisera pas de référence. Ce ne sera qu'un objet simple. Encore une fois, juste pour renforcer cela, dans les coulisses, notre panier est transformé en un objet similaire à celui-ci puis une propriété de valeur lui Ainsi, lorsqu'il s'agit de mettre à jour une référence, tout comme notre panier, non seulement nous la mettons à jour en du nom de variable, tel que basket, mais nous devons également mettre à jour la valeur imbriquée à l'intérieur. Par exemple, lorsque nous appelons notre fonction AddToBasket, nous accédons d'abord au nom de notre variable ou de notre constante, puis à la valeur qu'elle contient. Ou nous pouvons utiliser quelque chose comme la méthode push pour pousser un nouvel objet. Le nom, n'importe quel contenu convient, le prix. Tout cela n'est qu'un exemple de code, peu importe la taille de 12. Comme il s'agit d'un panier, nous devons également connaître la quantité. Pour vérifier que cela fonctionne, vérifiez que nous mettons à jour la valeur qu'il contient, nous pouvons accéder à notre modèle et afficher la valeur de notre panier. Sauvegardons ça. Passons au menu. Nous pouvons voir que nous avons la propriété value qui est vide. Cliquez sur « Plus » et nous ne voyons pas que cela soit mis à jour. Cependant, si nous le mettons à jour pour utiliser une référence , décommentez-le. Cliquez sur le bouton. Nous pouvons voir que cet objet est désormais réactif et que toute mise à jour notre panier est désormais transmise à notre modèle. Un point clé à noter ici est que lorsque nous utilisons le panier contenu dans le modèle, tout comme ici, nous n'avons pas besoin d'accéder à basket.value. Cela se fait automatiquement pour nous. Cependant, comme nous pouvons le voir dans notre script, lorsque nous accédons ou mettons à jour l'une de nos références, nous devons utiliser la propriété value pour mettre à jour ou lire les données imbriquées à l'intérieur. Bien sûr, nous ne voulons pas sortir le panier de cette façon. Ce que nous voulons faire, c'est accéder à la section de notre panier et afficher le contenu dans notre tableau sans notre ligne de tableau. Nous pouvons l'ajouter à l'intérieur du corps de la table, remettre à l'intérieur, puis nous pouvons le placer en boucle sur notre panier avec une boucle Vue.js V4. Entre crochets, nous pouvons accéder au nom de la variable de l'élément ainsi qu'au numéro d'index de chaque boucle. C'est dans le panier, puis Vue.js, lors de la mise en boucle, a également besoin d'une clé unique. Maintenant, nous n'avons plus de clé unique unique que nous puissions utiliser. Mais à titre de mesure temporaire, nous pouvons transmettre le numéro d'indice. Plus tard, lorsque la pizza stockée dans la base de données, nous mettrons à jour cette clé pour utiliser l' identifiant unique pour chaque valeur. Désormais, chaque pizza contenue dans le panier est stockée dans la variable item. Nous pouvons mettre à jour la quantité, donc item.quantity, le nom de la pizza, c'est item.name, la taille, item.size, et aussi le prix vers le bas. Si nous le voulions, nous pourrions simplement ajouter item.price. Mais comme nous pouvons commander plusieurs pizzas, nous allons multiplier ce prix par la quantité d'articles pour afficher un total pour chaque ligne. Enregistrer. Faites un peu plus d'espace. Désormais, chaque fois que nous ajoutons une nouvelle pizza, le panier est mis à jour et affiché dans notre tableau. Ensuite, nous allons améliorer cela en passant en boucle les pizzas et en ajoutant le nom exact de la pizza au panier, plutôt que les exemples de données dont nous disposons actuellement. 26. Boucle de pizzas: heure actuelle, comme nous le savons, notre base de données n'est pas encore configurée pour stocker nos pizzas. Pour l'instant, à titre de mesure temporaire, nous allons créer une référence laquelle nous pourrons envoyer nos pizzas. Cela nous permettra ensuite de parcourir ces pizzas en boucle et de les exposer sur une table. Pour cela, allez dans le fichier MenuView, puis en haut, nous allons créer une nouvelle constante appelée AllPizzas. AllPizzas sera entouré d'un récif. Eh bien, la valeur initiale sera un tableau vide. Passons ensuite aux nouveaux composants pizza.view, qui se trouvent dans l'interface d'administration. Cela permet de gagner un peu de temps. Ce que nous allons faire ici, c'est sélectionner l'objet pizza complet. Il s'agit de l'objet de démonstration juste ici à l'intérieur de la référence. Copiez tout, y compris les bretelles frisées. Nous le copions parce que cela nous donnera la structure cohérente dont nous avons besoin pour ajouter de nouvelles pizzas à la base de données. Retournez dans la vue du menu et à l'intérieur de l' ancienne gamme de pizzas, collez-la deux fois. Veillez à ce que chacun soit séparé par une virgule. Changeons un peu les choses. Nous allons supprimer l'Eg. Margherita. Le second, Pepperoni, retirez l'Eg. On dirait garni de mozzarella et de pepperoni. Augmentez simplement le prix pour le rendre un peu différent. Maintenant, cela peut être parcouru en boucle dans le tableau des menus. Ils exposent chacune des pizzas. Passons maintenant au modèle. Insérez ce menu puis le tableau dans le corps du tableau. Nous ferons exactement la même chose que pour le panier créant une boucle v-for et les données là où nous en avons besoin. Revenez au corps du tableau de la section du menu v-for. Entre parenthèses, nous pouvons sélectionner la pizza ainsi que le numéro d'index. Cela fait partie de notre ancienne gamme de pizzas. Ensuite, insérez une clé, qui sera le numéro d' index pour le moment. Comme nous l'avons dit pour le panier, nous y reviendrons plus tard et utiliserons la clé unique que la base de données fournira. Génial. Nous avons désormais accès à toutes les pizzas et, au lieu d'afficher le nom codé en dur de la pizza, ouvrez les doubles crochets et nous pouvons accéder à nos objets, à savoir pizza.name. La description, la pizza, la description. Disons ceci et passons au menu. Voici nos deux pizzas. Nous avons notre Margherita et le pepperoni, qui correspondent à notre référence dans la section des scripts. Mais nous n'en avons pas encore fini avec celui-ci, car nous devons également ajouter les options de pizza. Nous devons adapter la taille et le prix des pizzas à la plupart des options qui s'offriront à chacune de ces pizzas. Pour cela, nous devons à nouveau descendre à notre table. Nous avons ici cette ligne de tableau, qui correspond à chacune de nos options. Nous devons créer une boucle supplémentaire à l'intérieur de celui-ci pour parcourir nos deux options, donc v-for. La valeur variable de l'option et nous la prendrons également dans l'index. Nous devons faire une boucle sur notre objet à pizza, qui est celui de la boucle initiale. Nous devrons accéder à nos options. La clé de cette option de transfert unique. Ensuite, entre crochets, nous pouvons sélectionner la première ou la deuxième valeur avec le numéro d'index. Pour la première boucle, cela sélectionnera la première option, et la deuxième boucle sélectionnera la deuxième option. Pour la taille de l'option, les accolades doubles, l'option et la propriété de taille même dans le symbole monétaire, l'option.price. Testons cela dans le navigateur. Nous avons maintenant notre boucle qui crée nos deux options, et chacune a une taille et un prix uniques. Bien. Nous faisons de bons progrès, mais maintenant, lorsque nous voulons ajouter chacune de ces pizzas au panier, nous devons également transmettre ces informations à la fonction. Ce bouton que vous avez ici ne nous permet pas seulement d' appeler AddToBasket, mais nous devons également ajouter les crochets et transmettre la pizza, ainsi que l' option jusqu'à la fonction, où nous pouvons recevoir ces valeurs, donc l'article et l'option. Maintenant, au lieu d'avoir le nom sous forme de chaîne, nous pouvons le transmettre dans le nom de la variable item.name. Le prix, qui est stocké dans l'option, est option.price. La taille, option.size. Essayons ça. Essayons la Margherita de neuf pouces. Ça a l'air bien. Un pepperoni de 12 pouces, tout cela semble parfaitement fonctionner. Ensuite, nous nous occuperons de la mise à jour de la quantité contenue dans ce panier si la même pizza est sélectionnée plusieurs fois. 27. Vérifier les articles de panier en double: Pour le moment, nous ajouterons une nouvelle pizza à notre panier. Tout fonctionne bien mais nous commençons à avoir un problème si nous ajoutons la même valeur plusieurs fois. Par exemple, si nous essayons d'ajouter la pizza de neuf pouces plus d'une fois, nous l'avons déjà tout en haut Au lieu d'augmenter la quantité à deux, nous obtenons un nouvel élément en bas. Il en va de même pour toutes nos pizzas. Plutôt que d'ajouter un nouvel article, nous voulons plutôt augmenter la quantité à chaque fois. Pour cela, avant de mettre notre nouvelle pizza dans le panier, nous devons d'abord vérifier si la nouvelle pizza existe déjà dans ce panier. Pour ce faire, tout en haut de notre fonction, nous pouvons accéder à notre panier, la valeur puisqu'il s'agit d'une référence, et utiliser la méthode de recherche JavaScript. La méthode find exécutera une fonction pour chaque valeur de notre panier. S'il y a des pizzas dans le panier, nous les stockerons dans une variable appelée pizza, puis nous pourrons travailler avec chaque pizza individuellement. Ce que nous voulons faire ici, c'est vérifier si le nom de la pizza et la taille de la pizza correspondent. N'oubliez pas que si nous ajoutons à notre menu, comme le Margherita, nous pouvons ajouter deux tailles différentes. Nous pouvons avoir deux noms de pizza distincts, mais ils ne correspondent pas. Nous devons également vérifier le nom de la pizza ainsi que la valeur de l'option. La méthode JavaScript find renverra la toute première valeur, dans notre cas, la pizza, qui correspond à une certaine condition. Nous voulons revenir à vrai si une certaine condition est remplie. Dans notre cas, nous voulons vérifier si le pizza.name est égal au item.name. agit de vérifier si la pizza qui se trouve actuellement dans le panier a un nom égal au nom de la pizza que nous essayons d'ajouter. Il devrait y avoir un triple égal et, en utilisant la double esperluette, nous devons également effectuer une deuxième vérification. La deuxième vérification consiste à savoir si la pizza est de la taille, il s'agit bien de la pizza qui est rangée dans le panier. Nous voulons savoir si cela est égal à l'option.size. Encore une fois, il s'agit de la taille de l' option de la pizza que nous essayons d'ajouter. Si les deux correspondent, cette affirmation est vraie et cette méthode de recherche renverra alors la pizza que nous trouvons dans le panier. Nous pouvons le stocker dans une constante ou une pizza existe et avant d'aller plus loin, nous allons vérifier en nous connectant à la console. Enregistrez la valeur de notre pizza constante, sauvegardez et transférez dans le navigateur. Sautez dans la console pour ne pas avoir de copains de pizzas à l'intérieur, en plus, ce n'est pas défini, les différentes valeurs ne le sont pas non plus. Mais si nous essayons de cliquer une seconde fois sur une pizza, nous retrouvons la pizza, qui correspond au panier. Nous voyons que c'est une pizza de neuf pouces, essayons-la avec les 12, celle-ci fonctionne aussi. Essayons simplement le pepperoni. La toute première fois n'est pas définie et si nous l'avons déjà dans le panier, il retournera la pizza qu'il a trouvée. Avec ces informations, nous pouvons maintenant placer une instruction if et vérifier si notre pizza se trouve avec cette constante. S'il souhaite accéder à la pizza, sélectionnez la propriété de quantité et augmentez-la de la valeur 1. De plus, si cela est vrai, nous voulons revenir en arrière, modifier cette fonction car nous ne voulons pas ajouter pizza supplémentaire à notre panier. Essayons maintenant ceci. Rechargez ça. Notre première Margherita, notre deuxième Margherita augmente maintenant la quantité. Essayons le pepperoni. Deux nouvelles lignes et un doublon et chaque fois que je clique sur un doublon, la quantité est augmentée de la valeur d'un. Ensuite, nous allons également revenir à notre panier et nous en tenir à la question de la quantité en connectant nos boutons d'augmentation et de diminution, ainsi qu'une fonction permettant de retirer une pizza du panier. 28. Éliminer et changer la quantité de panier: Comme nous l'avons découvert dans la vidéo précédente, lorsque nous ajoutons l'une de nos pizzas au panier, toutes nos pizzas sont désormais affichées sur la droite. Nous voyons également la quantité qui est la valeur par défaut d'un. Nous avons également ces boutons pour augmenter et diminuer la quantité. C'est avec cela que nous allons travailler maintenant. Accédez à la vue du menu, accédez à la section des modèles et faites défiler l'écran jusqu'à la zone du panier. À l'intérieur des paniers, nous avons notre corps de table, qui crée notre boucle pour toutes les pizzas. Ici, à l'intérieur de la boucle, nous avons accès à l'article dont vous souhaitez modifier la quantité. Ensuite, nous avons ici nos boutons pour augmenter et diminuer les valeurs. Pour la première, qui correspond à la diminution, nous pouvons ajouter un écouteur de clics, qui déclenchera ensuite une fonction. Nous allons transmettre cet article à la fonction, puis modifier la quantité. À l'intérieur du bouton d'ouverture, @click, et nous appellerons cette fonction quantité réduite. Passez l'élément pour que nous sachions quel élément réduire , puis passez au deuxième bouton, qui consiste à augmenter. Nous appellerons cela IncreaseQuantity. Encore une fois, cela nécessite également l'accès à l'élément que nous voulons modifier. Nous allons commencer par cette fonction IncreaseQuantity. Je vais faire défiler la page vers le haut. N'oubliez pas que si nous examinons cette méthode de poussée ici, nous pouvons voir la structure de nos paniers. Tout ce que nous devons faire est d'augmenter la propriété de quantité sur l'objet. Créez une fonction, IncreaseQuantity, récupérez l'élément qui lui est transmis, sélectionnez-le. Nous voulons uniquement travailler avec le champ de quantité, et nous allons l'incrémenter de la valeur un. Ensuite, la fonction permettant de diminuer la quantité. Prend également en compte l' article, item.quantity. Je vais le déduire de la valeur de un. C'est la première chose que nous devons faire pour la fonction de diminution. La deuxième chose est de vérifier si la quantité est nulle. Si c'est le cas, nous ne voulons pas qu' un article apparaisse dans le panier avec la quantité zéro. Nous souhaitons plutôt le supprimer du panier. Nous pouvons le placer dans une section F pour vérifier si la valeur item.quantity est égale à zéro. Si c'est le cas, nous souhaitons le supprimer du panier. Si nous le voulions, nous pourrions insérer le code à l' intérieur pour le faire. Mais au lieu de cela, je vais sous-traiter cela à une fonction autonome qui s' appellera RemoveFromBasket. Nous devrons également récupérer l'article que nous voulons supprimer, puis le créer en bas, la fonction RemoveFromBasket, transmettre l'article que vous souhaitez supprimer. abord, nous devons accéder à nos paniers complets et, comme il s'agit d'une référence, nous accédons à la propriété value. Ensuite, nous pouvons utiliser la méthode d'épissage JavaScript. Splice va supprimer un élément de notre tableau à la première personne à la position de départ. Nous devons donc récupérer le numéro d' index de cet article. Pour ce faire, accédez au basket.value. Voici le panier complet. Ensuite, nous pouvons récupérer le numéro d'index avec indexof. Nous avons besoin de connaître le numéro d'index de notre article. C'est juste du JavaScript normal. Cela n'a rien à voir avec Vue js. Nous trouvons la position d'index de notre élément particulier à l'intérieur de ce tableau, séparée par une virgule. Nous ne voulons supprimer qu' un seul élément. Maintenant, sauvegardons cela et vérifions que cela fonctionne. Cliquez sur n'importe quelle pizza. Si nous continuons à l'augmenter la valeur augmentera également. Essayons plus. Cela fonctionne bien. Négatif, cela va baisser. Ensuite, une fois que nous aurons atteint zéro, cet élément devrait être supprimé. Il s'agit d'une bonne fonctionnalité qui a été créée avec des fonctions assez petites. Ensuite, nous allons rester dans ce panier et commencer à mettre à jour le total de la commande à l'aide de propriétés calculées. 29. Propriétés calculées: Si vous avez déjà utilisé View Dress et utilisé des propriétés informatiques, la bonne nouvelle, c'est qu'elles sont là pour durer. Ils sont toujours entièrement pris en charge dans View Free, fois lors de l'utilisation de l'API de composition et de l'API d'options. Ils constitueront un cas d'utilisation idéal pour calculer le coût de toutes les pizzas contenues dans les paniers. Au bas du panier, nous avons actuellement cette valeur codée en dur, qui est disponible dans la vue du menu. Faisons défiler la page vers le bas et trouvons ceci. Ceci se trouve en bas de notre modèle. Nous pourrions utiliser des fonctions ordinaires pour calculer le coût à l'intérieur de ce panier, mais le problème avec une fonction est qu'elle ne s' exécute qu'une seule fois à chaque fois que nous l'appelons. Si nous écrivons plutôt ce calcul dans une propriété calculée, chaque fois que les données qu'il contient changent, dans notre cas, les paniers, dans notre cas, les paniers, sa valeur sera recalculée pour nous. Pour ce faire, rendez-vous en haut du fichier. Nous devons importer des données calculées à partir du package View. Computed agit comme un wrapper. Si nous décomposons les choses, nous pouvons d'abord créer une fonction anonyme pour calculer le niveau de nos paniers. En bas de notre script. Nous allons d'abord créer une fonction qui n'a pas besoin de nom à ce stade. Ce que nous allons faire, c'est créer une variable appelée coût total qui sera initialement nulle, puis nous pouvons parcourir tous les paniers et appuyer sur le champ de quantité de chacune de nos pizzas. C'est le coût total. Paniers, encore une fois, c'est un let Nous utilisons donc la boucle de valeur pour chacun d'entre eux. Pour chacune d'entre elles, nous exécuterons une fonction pour chaque valeur contenue dans les paniers et stockerons chacune d'elles dans l'article. Ensuite, nous pouvons récupérer notre variable vide appelée coût total. Utilisez l'opérateur plus égal pour ajouter une nouvelle valeur à notre coût total sur chaque boucle. Nous ne voulons pas simplement saisir le prix de l'article et le porter au total, car nous pouvons parfois avoir plusieurs pizzas. Pour cela, nous devons multiplier l'article.quantité par le prix. Nous pouvons accéder à ce coût total en dehors de la fonction. Nous devons le rendre. Ensuite, l'extérieur de la fonction crée une variable ou constante pour stocker notre valeur calculée. Nous appellerons celui-ci le total. Comme mentionné, computed agira comme un wrapper, nous devons donc le placer dans notre fonction. Découpez-le, collez-le dans l'ordinateur. Maintenant que nous avons calculé en tant que wrapper, chaque fois que le panier ou toute autre donnée qu'il contient est mis à jour, cette fonction sera réexécutée et la variable totale sera mise à jour. Ce total peut désormais être utilisé dans notre modèle. Saute vers le bas. Vous ajoutez le coût total, ajoutez un article autant que le prix puisque nous n'en avons qu'un. Augmentez la quantité. Ce chiffre est également doublé puisque dans notre valeur calculée, nous multiplions la quantité de l'article par le prix. Tout cela semble maintenant fonctionner correctement. Plus tard, nous améliorerons cela en créant un filtre de devises réutilisable pour assurer que les chiffres sont arrondis correctement. 30. Fichiers composables: Dans la section script de notre MenuView sur laquelle nous avons travaillé récemment, si nous y jetons un coup d'œil de haut en bas, cette section commence à devenir assez grande. Pour vous aider, nous pouvons déplacer le contenu dans des fichiers séparés, nous pouvons utiliser autant de ces fichiers que nous le souhaitons, ce qui permettra de garder les choses vraiment organisées. Ces fichiers sont appelés fichiers composables. Pour les garder organisés, nous allons créer un nouveau dossier appelé composables dans lequel les conserver. Ils vivront directement à l'intérieur de la source et accompagneront des éléments tels que nos actifs et nos composants. Cliquez sur la source, un nouveau dossier, le nom des composants, et si vous le souhaitez, nous pouvons modifier le nom de ce dossier, il n'est pas nécessaire qu'il s' agisse de composables, s'agit simplement d'une convention de dénomination. Une autre convention de dénomination concerne les fichiers qui se trouvent à l'intérieur. Ils ont tendance à avoir le préfixe « use », mais encore une fois, cela est totalement facultatif. Pour ceux qui n'ont aucun lien avec notre contenu, nous aurions des fichiers tels que UseBasket, UsePizza et UseOrders, qui sont tous des fichiers JavaScript ordinaires. Commençons par un fichier appelé UseBasket. Placez-le dans le fichier des composables, UseBasket, et celui-ci porte l'extension JavaScript. Ce fichier va exporter une fonction, donc exporter par défaut, une fonction appelée UseBasket. Le contenu de cette fonction sera l'ensemble des fonctionnalités liées au panier de notre MenuView ou de tout autre fichier d'ailleurs. Revenons au MenuView, examinons toutes les fonctionnalités liées au panier. Nous avons besoin du panier, découpons-le, collons-le dans notre nouveau fichier. Nous n'avons pas besoin des pizzas, elles seront placées dans un autre fichier, fonction AddToBasket, nous pouvons les prendre. Nous avons également besoin de IncreaseQuantity, de la diminution , de RemoveFromBasket, ainsi que du total , c' est-à-dire sa valeur calculée Supprimez tout cela et nous devrions simplement partir avec nos pizzas, coller dans notre fichier composable, assurant que tout est du panier, c' est-à-dire sa valeur calculée. Supprimez tout cela et nous devrions simplement partir avec nos pizzas, les coller dans notre fichier composable, en nous assurant que tout est intégré à cette fonction. Comme nous n' utilisons pas notre référence et la section calculée qu'elle contient, nous pouvons également importer les importations ou les copier. Nous pouvons voir que nous utilisons toujours notre référence dans ce fichier, mais nous n'avons pas pu supprimer Computed. Ensuite, importez-les en haut de notre fichier, juste à l'extérieur de la fonction. Maintenant, pour utiliser n'importe quelle fonction ou de ces variables dans différents fichiers, nous devons d'abord renvoyer cette fonction vers le bas. Toujours dans la balise de fermeture de notre fonction, créez notre section de retours doit renvoyer l'une de nos fonctions ou variables qui doit renvoyer l'une de nos fonctions ou variables que nous souhaitons utiliser dans d'autres fichiers. Nous avons effectivement besoin de tout à partir de là, nous avons besoin du panier, de la fonction appelée AddToBasket, nous avons besoin des deux fonctions pour augmenter et diminuer les valeurs, nous avons besoin du total. Mais une chose dont nous n'avons pas réellement besoin à ce stade est RemoveFromBasket. Cela est dû au fait que le seul endroit où cela est appelé se trouve dans cette fonction DecreaseQuantity Nous n'avons donc pas besoin de l'appeler depuis aucun fichier. Cela regroupe désormais toutes les fonctions et variables associées. N'oubliez pas que nous avons exporté ici une fonction appelée UseBasket. Pour accéder au contenu qu'il contient, nous pouvons accéder à notre MenuView et l'importer dans notre fichier. Importez, utilisez Basket. À l'aide du symbole d'ajout, nous pouvons accéder au niveau supérieur de notre source, puis accéder au dossier composable , puis au nom de fichier appelé UseBasket. Ensuite, en utilisant la déstructuration JavaScript, nous pouvons stocker toutes les valeurs renvoyées par ces fonctions dans des variables. Le panier, les fonctions de IncreaseQuantity, DecreaseQuantity, nous avons besoin de AddToBasket, ainsi que le total. Je les sélectionnais à partir de notre fonction UseBasket, que nous avons importée juste au-dessus. Toutes ces constantes peuvent désormais être utilisées dans notre modèle. Il ne reste plus qu'à enregistrer ceci, à revenir à notre projet et à vérifier que tout fonctionne toujours correctement. En fait, juste avant de faire cela, nous devons appeler cette fonction pour qu'elle soit disponible. au projet, ajoutez-les à nos paniers, les fonctions d'augmentation et de diminution fonctionnent. Nous pouvons les supprimer, et notre total fonctionne également. 31. Qu'est-ce que la base de feu ?: Alors, qu'est-ce que Firebase exactement et comment pouvons-nous l'utiliser ? Eh bien, Firebase est un service fourni par Google pour les sites Web, les applications et les jeux. Nombre d'entre eux ont besoin de services tels que l'authentification, stockage, l'hébergement et également une base de données. Firebase fournit toutes ces fonctionnalités dans une seule application. Je vais utiliser certains d'entre eux dans le cadre de notre projet. Nous utiliserons certains d'entre eux, notamment le Cloud Firestore, qui sera notre base de données, qui stockera nos pizzas et nos commandes. Le cloud Firestore est une base de données en temps réel, ce qui signifie que chaque fois que l'une de nos données stockées change, l'application est informée. Cela pourrait être un cas d'utilisation si l'administrateur devait supprimer une pizza, puis le menu serait également mis à jour. De plus, si vous avez plusieurs applications, exemple votre site Web et votre application mobile, la base de données peut être partagée et synchronisée. Nous pouvons également définir des règles et des rôles à des fins de sécurité. Mais plus d'informations à ce sujet plus tard. Il fournira également notre système d'authentification, fournissant un flux de connexion, de connexion, de déconnexion, de mot de passe oublié, ainsi que de multiples manières pour les utilisateurs de se connecter. Nous utiliserons un e-mail et un mot de passe pour vous connecter. Car d'autres services sont disponibles, tels que la connexion à Google, Twitter ou Facebook. En outre, de nombreux autres services Firebase seront ajoutés, tels que des analyses, fonctions cloud et du stockage. Alors, allez-y et créez un compte si vous ne l'avez pas encore fait. Le compte gratuit est tout ce dont nous avons besoin pour tester et créer notre projet La prochaine fois, nous le configurerons et créerons un lien vers notre projet. 32. Configuration de la base de feu: Une fois que vous avez créé un compte et que vous vous êtes connecté à Firebase, rendez-vous dans la zone de la console et vous verrez quelque chose qui ressemble à ceci. À partir de là, nous pouvons créer notre nouveau projet. Nous devons donner à ce projet le nom, eh bien, ce sera Pizza Planets. Vous pouvez appeler le vôtre Pizza Planet si vous le souhaitez, mais il s'agit de la troisième version de ce cours, donc je vais appeler la mienne V3. Cliquez sur la case à cocher, puis continuez. Google Analytics, je vais dire non à ce projet. Donnez-lui ensuite quelques instants pour terminer. Mon projet est maintenant configuré. Continuons, puis cela nous emmènera dans notre projet. À partir de là, nous pouvons obtenir les instructions pour ajouter Firebase à notre application pour iOS ou Android. Mais dans notre cas, nous cliquerons sur le lien Web. Si les choses semblent un peu différentes à ce stade, ne vous inquiétez pas, ces sites Web ont l'habitude de changer, mais le processus de configuration devrait être similaire. Nous devons maintenant enregistrer notre application en lui donnant un surnom. Je vais juste le garder de la même manière que Pizza Planets Version 3. Je ne vais pas configurer d'hébergement Firebase pour le moment. S'inscrire. Ensuite, une fois que cela sera terminé, il nous donnera quelques instructions pour le configurer. La première chose à faire est d'utiliser npm pour l' installer en tant que package de modules de nœuds. Copions ce lien, qui est npm install Firebase. Fermons le serveur. Collez ceci dedans. Nous avons maintenant quelques raisons pour lesquelles cela a été très lent aujourd'hui. Nous pouvons simplement le fermer et redémarrer le serveur avec npm run dev. Nous pouvons confirmer que cela a été installé en accédant au package.json. Ils auront Firebase comme dépendance. Retour au site Web de Firebase. La prochaine étape après l'installation consiste à copier certaines instructions. Je vais simplement le recopier et nous verrons ce que chaque étape fait dans un instant. Cela nous permettra de rester organisés en le plaçant dans un nouveau dossier JavaScript, qui se trouve directement dans le dossier source, en créant un nouveau fichier. Le fichier Firebase.js. Collez ceci dedans. La première chose à faire est d'importer et d' initialiser les fonctions de l'application, fournies par Firebase. Nous avons ensuite l'objet de configuration Firebase, qui est facilement renseigné avec toutes les informations relatives à notre application. Ensuite, tout en bas, nous utilisons les fonctions d' initialisation de l'application juste ici. Transmettez-lui ensuite les détails de configuration, qui nous donneront ensuite une référence à notre application. Nous avons maintenant la référence de l'application. Nous avons également besoin d'une référence à notre base de données Firestore afin de pouvoir ajouter et supprimer des enregistrements. À partir de là, nous devons également importer quelque chose depuis la bibliothèque Firebase. Tout en haut, nous allons créer un deuxième élément important dans lequel nous allons importer quelque chose depuis le package, à savoir Firebase. Mais cette fois, plutôt que de l'application Forward Slash, nous devons l'importer depuis la section Firestore. La fonction que vous souhaitez importer depuis cette section s'appelle GetFireStore. GetFireStore peut désormais être utilisé pour obtenir une référence à notre base de données. Pour ce faire, nous transmettons notre variable d'application. Juste celui-ci. Ceci est à l'intérieur d'une constante appelée Db , abréviation de base de données, appelée GetFireStore. Passez dans notre application. Lorsque vous travaillez avec Fire Store, il regroupe nos données dans des collections. Dans notre cas, nous aurons une collection pour les pizzas, une collection pour les commandes, et nous pouvons également en avoir une pour les utilisateurs. Pour travailler avec les collections, vous devrez également importer depuis le package Firestore. Revenez en haut de la page, obtenez package Firestore, importez la collection. Nous pouvons l'utiliser pour référencer nos collections en y ajoutant deux éléments. le premier cas, nous devons transmettre la référence de base de données que vous avez stockée juste au-dessus dans cette constante. Ensuite, ce sera le nom de notre collection, que nous n'avons pas encore créée pour le moment. Celle-ci s' appellera Pizzas. Cela nous donne maintenant une référence à une collection unique que nous pouvons utiliser pour lire des documents et ajouter de nouveaux besoins. Pour le rendre disponible dans d'autres composants, nous allons l'exporter sous forme de constante. Le nom de la constante sera DPPizzas&Ref. Copions et collons ceci. Cette deuxième référence concernera nos commandes. DBorder&Ref. Cela utilisera la même base de données, mais le nom de la collection des commandes. Cela nous permettra d'importer ces références dans d'autres fichiers de composants. Nous pourrions faire des choses comme lire le contenu ou ajouter de nouvelles données. Nous examinerons cela ensuite. La dernière étape de cette vidéo consiste à indiquer à Firebase que nous souhaitons utiliser le cloud Firestore ainsi que l'authentification. Passons à la section de présentation du projet dans le navigateur. Nous pouvons continuer sur la console. Nous n'avons pas besoin de données supplémentaires de ce point de vue. Cela nous donne la possibilité d'ajouter divers produits à Firestore. Nous pouvons faire des choses comme suivre les performances. Nous pouvons ajouter des analyses pour notre cas d'utilisation pour le moment, tout ce dont nous avons besoin est l'authentification et la base de données cloud Firestore. Commençons par l' authentification. Lancez-vous. Cela nous permettra de nous connecter à différents fournisseurs tels que Google et Facebook. Mais je vais créer un système de courrier électronique et de mot de passe. Cliquez dessus pour activer l' e-mail et le mot de passe. Maintenant, je ne vais pas activer le lien e-mail, nous allons simplement le conserver sous forme d' e-mail et de mot de passe. C'est tout ce que nous devons faire pour le moment. Ceci est actuellement activé. Revenons à l'aperçu de notre projet. Vous pouvez voir que nous avons maintenant le raccourci vers l'authentification. Ensuite, nous ajouterons le Cloud Firestore, qui apparaît également dans la barre latérale. Créez notre base de données. Nous allons commencer en mode test et nous examinerons les règles de sécurité plus tard. Mais pour l'instant, cela nous donnera un accès complet à notre base de données pour lire et écrire. Cette fonctionnalité ne devrait être autorisée qu'à des fins de test, et nous verrons comment nous pouvons l'améliorer ultérieurement. Cliquez sur Suivant. Choisissez un emplacement si vous le souhaitez et activez la base de données. Plus tard, nous activerons certaines règles de sécurité pour renforcer la sécurité de notre base de données. Bien. Nous avons maintenant configuré un mode d'authentification et nous avons également une base de données vide. fois cela en place, nous verrons ensuite Une fois cela en place, nous verrons ensuite comment ajouter de nouvelles pizzas à cette base de données vide. 33. Ajouter des pizzas à la base de données: Maintenant que la configuration est terminée, nous pouvons utiliser le DBPizzasRef que vous avez précédemment configuré ainsi que notre référence de commande pour travailler avec notre base de données. Nous allons commencer par ajouter les nouvelles pizzas à la base de données dans les nouveaux composants de pizza. Pour cela, nous devons importer deux choses. Passons donc au nouveau composant pizza, qui se trouve dans le dossier Components et dans le dossier Admin. En haut, créez nos instructions d'importation dans lesquelles nous importerons quelque chose appelé AddDoc, qui provient du nom du package, qui est Firebase/Firestore, qui est logique car il s' agit d'une fonction liée à la base de données. Le second que nous devons importer est notre DBPizzasRef. Le chemin du fichier a été facilement renseigné pour nous. Les deux seront utilisés dans une nouvelle fonction pour ajouter notre pizza. Revenons au bas de nos scripts. Cela va être asynchrone, créez une fonction appelée Ajouter. Comme nous travaillons avec une base de données et que les choses peuvent mal tourner, nous devons placer cela dans une section «  Essayer et récupérer ». Catch prend en compte l'erreur , que nous pouvons stocker dans la variable e. Pour l'instant, nous allons travailler dans la section d'essai. De là, nous pouvons appeler notre fonction, que nous venons d'importer, appelée AddDoc. À l'intérieur d'ici, nous devons passer deux choses. La première est la collection à laquelle vous souhaitez ajouter, qui est stockée dans notre DBPizzasRef. N'oubliez pas que cela fera référence à une collection appelée pizzas. L'article que vous souhaitez ajouter à la base de données sera notre NewPizza, qui est cet objet juste au-dessus. Comme cela est stocké dans une référence, nous devons accéder à la valeur. Nous pouvons désormais appeler cette fonction d'ajout lorsque nous cliquons sur le bouton Ajouter. N'oubliez pas qu'à l'intérieur de l'application et de la section d'administration, nous avons ce bouton Ajouter. Accédez au modèle. Nous y sommes. Nous allons écouter maintenant pendant un clic. Le nom de la fonction add empêchera le comportement par défaut, qui empêchera la page de se recharger et de perdre toutes les données ou le formulaire. De plus, comme nous ne savons pas combien de temps cela va prendre, puisque nous transférons certaines données vers un serveur externe, nous allons ajouter await car nous pouvons attendre que les données reviennent avant de passer à l'étape suivante. Et nous pouvons l'utiliser puisque nous avons marqué notre fonction comme asynchrone. Juste avant de le tester et de nous assurer que cela place notre NewPizza dans la base de données, nous allons ajouter un système de gestion des erreurs ainsi qu'un message à afficher dans le navigateur. Ce message peut être stocké dans une constante. Juste au-dessus de notre message NewPizza, const, stockez-le dans une référence, car nous allons le mettre à jour. Initialisez-le sous la forme d'une chaîne vide et revenez à notre fonction d'ajout où nous mettrons à jour la valeur de ce message. Puisque nous utilisons l'async, attendez, tout code exécuté ci-dessous ne se produira qu' une fois que nous aurons récupéré les informations de notre base de données. Sur la ligne suivante, nous saurons si cela a été un succès ou s'il y a eu un échec. Comme nous l'avons intégré dans une section d'essai, nous saurons que ce code ne s' exécutera qu' en cas de succès. Nous ajouterons le code d'échec à l'intérieur de la zone de capture. Ci-dessous, accédez à notre message.value, qui sera un succès. Ouvrez les backticks et nous dirons Pizza, placez-le dans un nom de variable. Nous allons placer une variable afin de pouvoir accéder à notre nouvelle pizza et le nom NewPizza.value.Name a été ajouté. Ensuite, s'il y a une erreur, passez dans la zone de saisie, nous accèderons à notre message.value et définirons cette chaîne sur laquelle il y a eu une erreur, ajouterons la pizza. Nous devons ensuite afficher ce message dans notre modèle. Je vais le faire tout en bas, juste en dessous de ce bouton, à l'intérieur d'une travée. Je vais mettre notre message et la dernière chose à faire est de le tester dans le navigateur. N'oubliez pas que notre base de données est actuellement vide. Dans Admin, nous allons ajouter une Margherita. Nous allons déplacer l'exemple de code. Cliquez sur le bouton Ajouter pour activer notre fonction. Ça y est, les choses commencent à aller bien. Nous avons Pizza Margherita qui a été ajoutée à la base de données et actualisée. Cela semble prometteur. Nous avons notre collection de pizzas, que nous avons créée dans notre configuration Firebase, qui se trouve ici. Nous avons ensuite utilisé dans NewPizza une méthode appelée AddDoc, et cette méthode AddDoc a ensuite référencé notre collection, qui est Pizzas, et la valeur est NewPizza.value. Dans la base de données, cette collection Pizzas contient un identifiant de document unique, puis tout le contenu de notre nouvelle pizza. Essayons-en un autre, Pepperoni. Ajoutez ceci. Nous y voilà. Nous savons comment documenter références et si nous cliquons sur celle-ci, celle-ci est désormais le Pepperoni. Pourquoi pas ? Nous en ajouterons une autre à notre nouveau formulaire de pizza. Végétarien Dites mozzarella, poivrons, oignons, champignons. Cela n'a pas vraiment d' importance à ce stade. Nous mettrons à jour le prix, disons 8 et 14. Ajoutez ceci. Nous avons également atteint notre objectif pour cette vidéo, qui est d'ajouter une nouvelle pizza à notre base de données. Mais si nous jetons un coup d'œil ce texte juste ici, nous avons également besoin d'un peu d'espace à gauche du message. Dans le fichier NewPizza, descendez vers le bas. Ajoutez une section de style. Nous allons lui donner une classe ou un span, une classe de message, y accéder et définir une marge sur la gauche, 1rem devrait convenir. Nous devons ajouter une nouvelle pizza pour pouvoir voir cela. Nous irons manger un festin de viande. Modifiez la description, pepperoni, salami, bœuf et jambon. Changez le prix. Nous y voilà. Nous verrons ensuite comment récupérer ces pizzas de la base de données et les afficher dans notre menu. 34. Obtenir des pizzas: Pour récupérer des pizzas depuis notre base de données Firestore, Firebase fournit une fonction appelée GetDocs. De plus, comme nous souhaitons utiliser ces pizzas à la fois dans le menu et dans la section d'administration, nous pouvons créer un fichier composable partagé pour ce faire. Créons un nouveau fichier dans la barre latérale. Dans les composables, nous allons créer un nouveau fichier appelé usePizzas.js. Cela suivra un modèle similaire à l'autre composable que nous avons créé. Nous allons exporter une fonction que nous pouvons importer dans n'importe quel autre fichier. Exportez la fonction par défaut appelée UsePizzas et créez le corps de la fonction qui contiendra tout le code que vous souhaitez rendre disponible. À l'extérieur, nous pouvons ajouter nos importations en haut du fichier. Nous devons importer la référence depuis Vue. La raison pour laquelle nous en avons besoin est que nous avons besoin d'une constante qui contiendra toutes les pizzas locales. Const AllPizzas est égal à une référence et il s'agira d'un éventail de toutes les pizzas. Maintenant, pour obtenir les pizzas, nous devons importer certains objets depuis Firebase. Le premier package dont nous avons besoin est celui que nous avons déjà mentionné , à savoir GetDocs. Celui-ci provient de Firebase/Firestore. Ensuite, nous devons également importer la référence que nous avons créée dans le fichier Firebase pour avoir accès à cette collection de pizzas. Nous devons donc importer le DBPizzasRef à partir de ce fichier Firebase. Importez le fichier DBPizzaRef à partir de ce chemin de fichier. Ensuite, juste en dessous, là où toutes les pizzas sont constantes, nous allons créer une fonction qui sera chargée récupérer nos pizzas de la base de données. Cette fonction sera marquée comme asynchrone car nous devons attendre le retour des données sur les pizzas avant de pouvoir utiliser cette fonction appelée GetPizzas. Ensuite, nous pouvons appeler notre méthode ci-dessus que nous venons d'importer appelée GetDocs, transmettre dans notre référence de collection, qui est DBPizzasRef. Nous allons stocker la valeur de retour dans une constante appelée docs et nous attendrons également que ces données nous reviennent. Exécutez ensuite cette fonction et obtenez la pizza de la base de données. Nous avons deux options différentes. Nous pouvons le déclencher manuellement en appelant GetPizzas ou nous pouvons déclencher lorsqu' un composant est monté à l'aide du hook de cycle de vie OnMounted . À partir du package vue, nous allons le faire avec OnMounted. Ensuite, dès que ce code ou ce composant sera monté sur le DOM, OnMounted sera appelé, qui appellera alors notre fonction appelée GetPizzas. Cela évite d'avoir à appeler cette fonction manuellement et cela signifie qu'elle le fera automatiquement en arrière-plan dès que le composant sera chargé. Si nous passons au projet et que nous accédons à la console, nous pouvons le tester en créant un journal de console pour la valeur renvoyée dans la documentation. Actualisez et nous ne voyons toujours rien dans la console car ce code n'est actuellement pas importé dans les composants. Le hook OnMounted Lifecycle n'est pas appelé. Alors allons-y, mais d'abord, nous allons renvoyer les valeurs que nous devons importer. Tout ce dont nous avons besoin actuellement, c'est de cette référence à AllPizzas. Nous allons commencer par l'importer dans notre MenuView qui se trouve dans la section Affichage. Ensuite, comme nous l'avons fait avec le composable UseBasket, nous devons d'abord l'importer Nous allons donc importer UsePizzas à partir de notre fichier composable, puis en utilisant cette structuration, nous importerons notre référence AllPizzas à partir de cette fonction. Const AllPizzas est égal à la valeur renvoyée par UsePizzas. Nous avons maintenant constaté une erreur puisque nous doublons cette référence AllPizzas, nous l'importons depuis notre composable. Nous avons également cet exemple de code ici. Nous n'avons plus besoin de tout cela. Nous pouvons supprimer cette section. Comme c'est le seul code qui utilise ref, nous pouvons également le supprimer du script. Si nous rechargeons, rien n' est encore connecté à la console. effet, pour que cela soit réellement monté et que notre fonction puisse être appelée, nous devons accéder au composant menu. Sélectionnez cette option, nous verrons alors un journal dans la console. Ouvrez cet objet et de nombreuses informations sont renvoyées par la base de données. Nous n'avons pas besoin d'une grande partie de ces informations à ce stade, mais une chose qui nous intéresse, c'est cette propriété documentaire. Ouvrez-le, et à l'intérieur se trouve un tableau contenant chaque document de pizza que nous avons créé. Jetons un coup d'œil à l'intérieur. Encore une fois, il y a beaucoup d'informations ici. Nous pouvons voir l'identifiant du document. Nous pouvons examiner les documents et les données et explorer les valeurs des données, y compris le nom, les options et la description. Ce que nous pouvons faire maintenant, c'est parcourir en boucle toutes les valeurs contenues dans les documents. Malheureusement, nous n'avons pas besoin d' approfondir tous ces niveaux de notre objet. Au lieu de cela, nous pouvons appeler des documents en tant que fonction. Cela permettra d'extraire tous les champs dont nous avons besoin et de les rendre accessibles à l'intérieur de notre script. Revenez dans notre composable. Nous pouvons déplacer le journal, accéder à nos documents renvoyés et l'appeler pour chaque boucle. Pour chacune, nous allons exécuter une fonction pour chacune de nos valeurs. Dans mon cas, j' ai actuellement quatre pizzas en stock. Ensuite, pour filtrer toutes ces données inutiles, je vais créer un nouvel objet avec une structure plus simple, donc const pizza. À l'intérieur, nous pouvons structurer ce nouvel objet avec uniquement les données dont nous avons besoin. Comme nous l'avons vu, chacun d'entre eux possède un identifiant unique. Nous pouvons le voir si nous fermons cet identifiant, donc nous le définissons. Pour accéder aux informations sur les pizzas sur chaque boucle, nous devons également transmettre une variable à notre fonction. Dans la première boucle, doc sera égal à notre première pizza. la deuxième boucle, ce sera notre deuxième pizza, et ainsi de suite. Nous y accédons et sélectionnons la propriété ID. Ensuite, nous devons transmettre les données que nous aurions vues, qui sont stockées dans les documents, .data.value. Nous devons maintenant accéder à tous ces champs. Comme nous l'avons mentionné, nous n'avons pas besoin d'approfondir tous ces champs Nous pouvons accéder à nos documents et appeler la fonction de données. À l'aide de l'opérateur de diffusion JavaScript, nous pouvons également extraire les valeurs dont nous avons besoin à certains endroits directement à l'intérieur de notre objet pizza, à côté de notre identifiant. Enfin, à chaque boucle, nous voulons attribuer la valeur de cette pizza à notre référence AllPizzas. Il suffit de supprimer cet objet, d'accéder à AllPizzas.value, puis d'utiliser la méthode JavaScript push pour envoyer chacune de nos pizzas. C'est tout ce dont nous avons besoin aujourd'hui. Revenons à notre fichier de menu. N'oubliez pas que nous avons importé toutes les pizzas de notre composable. De plus, le nom de cette variable est également le même que celui que nous utilisions précédemment. Maintenant, si nous l'enregistrons et le rechargeons, la table est maintenant remplie avec les pizzas de notre base de données. Une autre chose que nous pouvons maintenant faire puisque nous avons accès à un identifiant unique pour chacune de nos pizzas est de modifier la clé unique pour chaque valeur de cette boucle. Plutôt que d' utiliser l'index, nous pouvons accéder à notre pizza.id. Nous n'avons plus besoin de cet index, nous pouvons donc simplement référencer notre pizza. Il en va de même pour les options. Les options doivent comprendre deux éléments. Le premier, encore une fois, est pizza.id et comme la pizza a deux options, nous l'ajouterons également à notre option.size. Encore une fois, nous pouvons déplacer l' index et le tour est joué, tout est maintenant terminé. Ensuite, nous allons continuer avec un thème similaire en utilisant également ces pizzas dans la section d'administration et nous découvrirons également comment supprimer ces pizzas de notre base de données. 35. Liste et suppression de pizzas dans Admin: Comme nous l'avons découvert dans la vidéo précédente, si nous accédons à ce lien d'administration, nous avons également les composants de ce menu que nous avons créés précédemment. Comme nous l'avons également fait avec le menu de la vidéo précédente, nous devons maintenant extraire nos pizzas de la base de données et les afficher dans l'interface d'administration. Nous veillerons également à ce que cette croix rouge, que nous avons répertoriée à côté de chacune de nos pizzas, supprime également cet article de la base de données. Passons à notre utilisation du fichier pizzas.js. Il s'agit du composable que nous avons configuré dans la vidéo précédente. Nous devons importer deux éléments supplémentaires depuis Firebase, en particulier le package firestore. Ce dont nous avons besoin, c'est de quelque chose appelé delete doc, qui, comme supprimera un élément d'une collection ainsi que le document. Nous allons utiliser doc pour faire référence à tout document particulier que vous souhaitez sélectionner. Ensuite, cela est transmis à Delete Doc pour le supprimer réellement. Nous allons créer une nouvelle fonction à l'intérieur de cet objet juste en dessous de onmounted Elle sera asynchrone appelée delete pizza. sera également transmis à cette fonction de suppression de pizza ID sera également transmis à cette fonction de suppression de pizza lors de son appel. Parce que, bien sûr, nous devons savoir quelle pizza nous voulons supprimer pour pouvoir accéder à ce document que nous venons d'importer depuis Firestore. Doc va prendre en compte deux choses. La première est la référence de la collection de base de données, que nous avons toujours stockée dans DB pizzas ref , puis elle doit prendre en compte l'idée de la pizza réelle que nous voulons supprimer. Ce n'est pas réellement responsable la suppression d'une pizza, tout ce que nous faisons ici est d'obtenir une référence à un document en particulier. Nous réduisons cette ville par collection , puis par carte d'identité. Nous pouvons ensuite utiliser cette référence pour transmettre, supprimer le document. En ce qui concerne les passes, nous pouvons les stocker dans une constante, disons une pizza, puis les transmettre à Delete Doc. Nous allons attendre ça. Nous attendrons la fin de cette opération. Ensuite, nous appellerons notre méthode ci-dessus : appelez Get Pizzas. Si nous voulons appeler get pizzas une fois cela terminé, c'est parce que nous devons mettre à jour notre application. Nous supprimons un article, puis nous appelons get pizzas, qui se trouve juste ici. Cela va alors demander toutes les pizzas que vous avez stockées dans la base de données, moins une que nous avons supprimée. Cela mettra ensuite à jour toutes les pizzas, ce qui est notre référence ici en haut. Toutes les pizzas sont ensuite renvoyées, document est composable, ce qui mettra à jour notre menu, que nous avons créé sur la gauche ici, et le menu dans l'interface administrateur sera également mis à jour . Pour utiliser cette fonction, nous devons également la renvoyer depuis notre pizza de suppression composable, puis ouvrons la barre latérale, passons aux composants, la section d'administration, et à l'intérieur, nous avons ce pizzas.vue, responsable de cette section. Pizzas.vue doit importer les sections dont nous avons besoin. Il faut donc placer une balise de script lors de la configuration et importer notre composable, qui utilisait des pizzas. Use pizzas a renvoyé ces deux valeurs, que nous pouvons déstructurer et stocker dans des constantes afin d'avoir besoin de toutes les pizzas. Supprimez la pizza, que nous pouvons récupérer en appelant la fonction UsePizzas. Passons à notre section de tableaux où nous avons quelques données factices. Notre margarita est en place et nous pouvons maintenant utiliser le corps de la table pour recouvrir toutes nos pizzas. V pour pizza dans toutes les pizzas, entrez une clé et nous avons maintenant l'identifiant unique de pizza provenant de la base de données afin que nous puissions y accéder. La margarita peut être remplacée par le nom dynamique de la pizza, donc pizza.name. Comme il s'agit de la section administrative, nous n'avons pas besoin de toutes les informations supplémentaires telles que la description et les prix, il nous suffit de voir une référence à chaque pizza. Nous pouvons maintenant le voir sur la gauche. Chacune de ces croix permettant de supprimer la pizza de la base de données est stockée à l'intérieur de ce bouton afin que nous puissions ajouter un écouteur de clics , puis référencer notre fonction qui consiste à supprimer la pizza. Cela doit également transmettre l'identifiant de pizza que nous voulons supprimer. Nous pouvons maintenant y accéder avec pizza.id. Essayons-le. Nous allons supprimer le festin de viande. Dès que nous faisons cela, nous constatons un petit problème. Si nous examinons les quatre pizzas d'origine que nous avions, c'est très bien. Il agit des quatre pizzas originales de notre base de mais si nous passons à notre composable, nous l'avons supprimée de la base de données, mais nous avons appelé à nouveau get pizza, ce mais nous avons appelé à nouveau get pizza, qui consiste à récupérer nos pizzas existantes gratuites de la base de données et à les ajouter à toutes les pizzas. En gros, au lieu de remplacer toutes les pizzas, nous conservons les pizzas existantes et ajoutons les trois articles supplémentaires. En fait, ce n' est pas une mauvaise chose le moment, car nous pouvons constater que les trois articles supplémentaires n'incluent pas le festin de viande, que nous avons supprimé. Tout cela semble bien fonctionner. Pour résoudre ce problème, c'est assez simple, tout ce que nous devons faire juste avant de recevoir nos nouvelles pizzas est de récupérer notre référence de toutes les pizzas, leur valeur et de la réinitialiser un tableau vide avant de recevoir nos nouveaux documents. Essayons ça. Rafraîchissez la page. Voici nos trois pizzas, enlevez l'une d'entre elles, et tout fonctionne désormais correctement. dernière amélioration que nous pouvons apporter est d'ajouter un message d'erreur en cas d'erreur ou de problème, supprimer des pizzas ou même de récupérer les pizzas de la base de données. Pour cela, nous pouvons créer une nouvelle référence de message dans le fichier all pizzas. Juste en dessous de toutes les pizzas créez une nouvelle constante pour stocker notre message. Ce sera une référence et, par défaut, une chaîne vide. Ensuite, dans les pizzas à emporter, nous pouvons ajouter une zone de gestion des erreurs avec une zone d'essai et de capture. Mettons-le tout en haut de la section Essayer et attrapons. Catch enregistrera une erreur. Ensuite, nous devons déplacer tout notre code dans la section d'essai. Si vous trouvez la fin de cette fonction, saisissez tout jusqu'à all pizzas.value. Découpez-le en ne laissant que la zone d'essai et la zone de capture à l'intérieur, puis dans la section d'essai, collez-le à nouveau et voici dans la section d'essai, collez-le à nouveau et voici le code que vous voulez exécuter et essayer de réussir. Mais s'il y a une erreur, nous pouvons alors accéder à la zone de capture et mettre à jour notre message. Le message.value est égal à une chaîne et nous dirons qu' une erreur s' est produite lors de la récupération des pizzas. Veuillez recharger la page. Tout comme nous l'avons fait pour les pizzas, nous pouvons également mettre à jour le message et le réinitialiser pour qu'il s'agisse d'une chaîne vide à chaque fois que nous l'exécutons. Le message.value est renvoyé à une chaîne vide. Il en va de même pour notre deuxième fonction qui est de supprimer une pizza. Le bloc d'essai, le bloc de capture, qui prend en compte l'erreur, recadre le code existant, coupe et le remplace, placez-le dans le bloc d'essai. Réinitialisez le message, il s'agit d'une chaîne vide, puis mettez à jour le message dans le bloc de saisie. C'est une chaîne b, alors si vous le souhaitez, vous pouvez également inclure le message d'erreur, que nous recevrons. Mais pour plus de simplicité, je vais simplement créer une chaîne indiquant qu'une erreur s'est produite lors de la suppression de la pizza. Alors, veuillez réessayer. Ensuite, pour utiliser ce message dans nos composants, nous pouvons le renvoyer, revenir dans les composants pizzas.view, l' importer, puis, juste en dessous de la section d'en-tête, créer un nouvel élément p pour afficher notre message entre les deux accolades. Ajoutez une classe pour le style de l'erreur. Ce qui servira également de mesure temporaire, c'est d' ajouter du texte à l'intérieur. N'importe quel texte convient, c'est juste pour que nous puissions ajouter du style et voir à quoi cela ressemble sans avoir de véritable message d'erreur. Jusqu'à la section style, où nous pouvons ajouter du style à cette classe d'erreur. Tout d'abord, une couleur qui aura la valeur RGB de un à zéro pour le rouge, 67 et 67, qui nous donnera cette couleur rouge. Une bordure d'un pixel, une ligne continue arrondit les coins avec un certain rayon de bordure, puis un espacement intérieur et extérieur avec un rembourrage et une marge. Rembourrage de 1 rem et aussi d'1 rem de marge à l'extérieur, enregistrez, testez. C'est ainsi que notre message d'erreur sera affiché à l'intérieur des composants, mais si nous devions supprimer le texte et le laisser ensuite en tant qu' élément p vide, je peux le voir ici. suppression de ce texte d'erreur affichera toujours la bordure rouge car l'élément p est toujours présent, qu' il contienne des messages ou non. Pour supprimer cela, nous pouvons ajouter une instruction v If pour n'afficher ces éléments que si le message existe. Si nous avons un message et que ses éléments seront affichés, sinon, il sera supprimé du dom et nous ne verrons plus cette bordure rouge. 36. Créer des ordres: Pour créer une commande, suivez le même schéma que pour créer une nouvelle pizza. Passons au panier usagé composable, qui se trouve à l'intérieur d'un dossier composable. Ouvrez ceci et nous devons d'abord importer deux choses. Tout d'abord, nous devons importer AddDoc depuis le package Firestore, donc celui-ci provient de Firebase/Firestore. Ensuite, la référence à la collection de commandes réelle, vers laquelle vous souhaitez l'envoyer. Importons-le depuis notre fichier Firebase. Ce que nous devons faire est d' importer cette base de données de commandes (réf. contenu du panier se trouve déjà dans le tableau des paniers et il est affiché lorsque nous ajoutons quelque chose depuis la section du menu. Sur la droite, voici le panier. Nous devons maintenant créer une nouvelle fonction pour ajouter la collection la plus ancienne à la base de données. Juste en dessous de cette fonction, revenons à cette flèche en bas, cela n'a pas vraiment d'importance. Ce sera asynchrone, le nom de la fonction « add new order », puis, ce que nous devons faire à l'intérieur, c'est l'encapsuler dans un bloc try and catch afin qu'il puisse gérer les erreurs et transmettre l'erreur. La première chose à prendre en compte est que ce panier situé en haut est actuellement stocké sous forme de tableau. Mais Firebase nécessite un objet, nous pouvons donc utiliser l'opérateur de propagation pour fusionner les éléments actuels dans un objet. Passons à la section Essayer et nous allons restructurer notre ordre en créant un nouvel objet. La première propriété à ajouter s' appellera CreatedAt permettra de suivre l'ordre dans lequel nos commandes sont passées et, par conséquent, nous pourrons les traiter ou les afficher dans le bon ordre dans l'administration. Mais cela créera simplement une nouvelle date JavaScript, installez-la dans la base de données. Ensuite, comme mentionné précédemment, pour récupérer le contenu de notre tableau, intégrez-le à notre commande afin de créer la propriété d'une pizza, qui sera elle-même un objet dans lequel nous allons fusionner les propriétés de notre panier . Comme il s'agit d'une référence, nous devons accéder à la valeur juste après la commande. C'est ici que nous allons utiliser la méthode AddDoc de Firestore pour transférer vers une collection particulière. Une collection est notre référence de commandes que nous venons d'importer. Appelez la méthode AddDoc, qui prend en compte le premier paramètre de référence d'audit de base de données, qui est une référence à notre plus ancienne collection, puis nous appliquerons cet ordre particulier à cette collection. Une fois que cela aura été fait avec succès, nous attendrons la fin de cette opération, puis nous pourrons réinitialiser la valeur de notre panier pour qu'elle soit un tableau vide. Cela effacera toutes les pizzas du panier, afin que l'utilisateur puisse recommencer. C'est tout ce dont nous avons besoin maintenant pour la section d'essai et pour tenir l'utilisateur au courant Nous allons créer une nouvelle variable pour contenir un message. Le message par défaut sera quelque chose comme si votre panier est vide, donc nous pouvons le voir ou s'il n'y a pas pizza sur le côté droit. Donc, composez le texte du panier, placez-le dans une référence, le texte de votre panier étant vide. Ce sera la valeur par défaut et nous pouvons la mettre à jour selon que la commande a été ajoutée avec succès ou non , en descendant vers la fonction. Passons à la section Essayer et, tout en bas, nous accèderons au panier text.value, et le mettrons à jour pour qu'il s'agisse de nouvelles chaînes, du type « Merci, votre commande a été passée ». l'autre section, et comme nous l'avons vu précédemment, vous pouvez également intégrer le message d'erreur si vous le souhaitez, mais pour plus de simplicité, je vais simplement mettre à jour le texte du panier pour qu'il s'agisse d'une nouvelle chaîne, qui sera égale à une erreur lors de votre commande. Je vais dire, s' il vous plaît, essayez à nouveau. Nous pouvons l'appeler à partir de nos composants. Nous devons renvoyer notre appel de fonction et nous devons également renvoyer le texte du panier afin de pouvoir l'afficher dans les composants. Au fur et à mesure que vous commandez, le texte du panier s'affiche dans la vue du menu . Rendez-vous ici, et nous pouvons maintenant les importer depuis notre composable. Ici, nous avons déjà une référence à notre panier d'utilisation composable Nous pouvons donc passer entre crochets et importer le texte du panier en même temps que ajouter une nouvelle commande. Commençons par ajouter une nouvelle commande, que nous pouvons déclencher à partir de notre bouton. Descendez dans la division du panier, et en bas, vous trouverez ce bouton de commande, maintenant en un clic, qui déclenchera notre fonction. La dernière étape consiste maintenant à ajouter le texte du panier et se souvenir que, par défaut, il indique que votre panier est vide Nous ne voulons donc pas l' afficher s'il s'agit déjà de nos articles dans le panier. Pour cela, le rendu conditionnel sera utile. Passons en haut de la section du panier, juste en dessous du titre. Créons des sections div contenant cela et à l'intérieur, nous utiliserons v-if, pour ajouter notre rendu conditionnel où nous voulons vérifier si la longueur du panier est supérieure à zéro, c'est-à-dire nous avons des articles dans le panier. Si c'est vrai, nous allons couper la section div de fermeture, puis descendre jusqu'à la fin, juste en dessous de nos boutons placer la commande, fermer celle-ci. Vous pouvez maintenant voir si vous allez dans la section panier, nous n'avons aucun de ces boutons ou le total de la commande. Mais tout cela créera un nouveau div, qui est la section v-else et cette section ne sera affichée dans le navigateur que s' n' y a aucun article dans le panier, ce qui est l'état actuel. Mais cela se placera à l'intérieur des doubles bretelles bouclées. En fait, nous allons y mettre un élément p pour commencer. Je vais mettre le texte du panier et nous voyons des erreurs. Voyons de quoi il s'agit. Nous n'avons pas de v-if adjacent, il s' agit donc de la section v-l et cela devrait être le v-if. Nous avons juste cette section div supplémentaire que nous pouvons supprimer, assurez-vous que c'est correct. Nous avons ce div, la balise d'ouverture, tout le contenu, la section de fermeture, v-else. Nous devons également déplacer ce div de fermeture avant tout ne soit correct. Maintenant, nous devons simplement assurer qu'après la section v-l, nous avons deux divs de fermeture supplémentaires, donc libres d'affilée. Puis, en haut du h3, du div, puis du tableau. Nous devrions maintenant voir dans le navigateur que le texte par défaut de votre panier est vide, cliquez sur n'importe quel article et la longueur du panier est maintenant supérieure à zéro. Nous pouvons donc afficher notre tableau. Ajoutons maintenant quelques articles supplémentaires à nos paniers et nous pouvons tester en cliquant sur le bouton « Passer la commande » , cela semble bon. Nous avons un message génial, passez à la console Firebase. Il s'agit de Console.firebase.google.com. My Pizza Planet V3 dans la base de données. Nous avons maintenant la plus ancienne collection, nous avons un numéro de commande, ça a l'air bien. Nous avons une Margherita de 9 pouces et deux de 12 pouces. Essayons un autre pepperoni de 12 pouces et Margherita, passez votre commande. Bien, tout fonctionne correctement et ensuite, nous allons récupérer ces commandes dans la base de données et les afficher dans l'interface d'administration. 37. Recherche de commandes: Nous pouvons maintenant passer des commandes avec succès et les ajouter à notre base de données. Nous avons maintenant pour tâche de récupérer ces commandes dans la base de données afin de pouvoir les utiliser dans notre projet, et en particulier dans la section d'administration. Plus tôt, nous avons créé une section des commandes en cours en bas de page. Nous allons les récupérer dans la base de données, les parcourir en boucle et les placer dans cette table. Pour garder les choses organisées, créez un nouveau composable dans le dossier des composables. Celui-ci s' appellera UseOrders. Comme toujours, nous devons exporter une fonction par défaut, UseOrders et y placer le code. Pour commencer, nous avons besoin d'une constante pour stocker toutes nos commandes. Nous appellerons cela AllOrders. Nous utiliserons également la référence qui va entourer notre tableau. Nous allons l'initialiser sous la forme d'un tableau vide , puis nous devons importer cette référence depuis le package de vue. Nous avons également besoin d'une fonction qui récupérera ces éléments de la base de données et les enverra à notre référence AllOrders. Nous allons créer une nouvelle fonction asynchrone, All GetOrders. Nous pourrions faire quelque chose de similaire à celui que nous avons utilisé par le passé. Si nous y jetons un coup d'œil, notre composable, qui était UsePizzas. À l'intérieur, ce que nous avons fait par le passé, c'est récupérer nos documents avec GetDocs. Nous avons cette fonction appelée GetPizzas. Celle-ci est un peu plus simple car tout ce que nous faisons doit appeler notre méthode GetDocs et transmettre une référence à toutes les collections de pizzas. Si nous le voulions, nous pourrions faire exactement la même chose en faisant référence à nos commandes. Mais pour ce cas d'utilisation, n'oubliez pas que dans la vidéo précédente, nous avons également introduit un nouvel ordre dans la base de données, qui incluait une propriété appelée CreatedAt. Quand on nous présente les pizzas de la collection AllPizzas qui n'étaient pas dans un ordre particulier. C'est là que cela fonctionne un peu différemment d'AllPizzas. Nous voulons nous assurer que nous extrayons les commandes dans un ordre particulier fonction des données dans lesquelles elles ont été créées. Retour à UseOrders. Pour ce faire, nous devons utiliser ce que l'on appelle une requête. Nous devons l'importer . Requête d'importation. Cela provient du package firebase slash firestore. À partir de notre fichier firebase.js, vous devrez également importer cette référence dans AllOrders. Revenons maintenant à notre fonction GetOrders, nous allons utiliser cette requête que nous venons d' importer. Requête. Ce que nous devons faire ici, c'est l'adopter en trois volets. La première est une référence à notre collection, qui s'appelle DBordersRef. Ensuite, nous pouvons également transmettre des paramètres de recherche supplémentaires. Dans notre cas, ce sera OrderBy. Orderby. Il s'agit également d'une méthode Firebase qui va ordonner le contenu que nous extrayons de notre base de données en fonction d'un champ particulier. Si tout ce que nous pouvons utiliser, nous devons également l'importer. Ensuite, nous transmettons le nom du champ par lequel vous souhaitez le classer. Dans notre cas, comme nous pouvons le constater lorsque nous avons créé une nouvelle commande, cette propriété s'appelle CreatedAt. Récupérez-la, collez-la, puis stockons cette référence dans puis stockons cette référence une constante appelée QueryData. À partir de maintenant, ce que nous faisons est assez similaire à ce que nous faisions lorsque nous avons récupéré les pizzas. Nous devons utiliser GetDocs. Nous devons ensuite parcourir ces documents, puis les intégrer à nos constantes. Dans cet esprit, nous allons copier l'intégralité de cette section. Juste au-dessus du bloc de saisie, vous pouvez copier les crochets. Ce sont les crochets pour chaque boucle jusqu'à nos documents. Copiez-le, collez-le juste en dessous de nos données de requête. Encore une fois, nous pouvons utiliser une grande partie de ces données. Nous pouvons conserver ce nom constant. Nous pouvons rechercher nos GetDocs. Tout ce que nous avons à faire au lieu de rechercher directement AllPizzas ou AllOrdersRef, nous allons transmettre notre QueryData filtrée, puis nous allons parcourir chacun de ces documents en boucle au lieu de créer une pizza et structurer une nouvelle commande. L'identifiant est accessible exactement de la même manière puisque chacun de ces documents revient de Firebase avec la même structure. Nous pouvons également fusionner les données du document, c' est-à-dire tous les champs d'AllOrder, tels que AllPizzas, et nos dates CreatedAt. La dernière différence réside dans cette ligne : au lieu de pousser vers AllPizzas, nous avons poussé vers AllOrders. Nous allons mettre AllOrder au lieu de la pizza. Nous allons le tester avant de le placer dans nos composants, juste en dessous de nos crochets pour boucle, place dans un journal de console ou allOrders, aucune valeur. Mais pour que ce journal de console fonctionne réellement, nous devons importer ce composable dans les composants requis. Il s'agira de la vue par points AllOrders, qui se trouve à l'intérieur des composants. Ensuite, dans le dossier d'administration, ouvrez AllOrders. Nous n'avons pas de script pour le moment . Créez un script, configurez, importez notre composable, qui est UseOrders. Ensuite, en utilisant la structuration, nous pouvons importer nos AllOrders, que je ne suis pas sûr d'avoir réellement renvoyés Nous allons donc y jeter un œil dans une seconde. Appelez notre fonction UseOrders. Revenez simplement en arrière. Nous devons renvoyer toutes les commandes pour utiliser ce bouton dans notre fonction. Retournez toutes les commandes. Ils devraient maintenant exécuter notre journal de console. Accédez à la section d'administration. Ouvrez la console. Nous ne voyons actuellement rien à l'intérieur car nous n'avons pas appelé notre fonction getOrders. Ce que nous allons faire, c'est simplement supprimer notre fonction, c'est de l'importer ou de la monter également. Nous exécuterons notre fonction appelée GetOrders dès que ce composant sera monté. Cela doit également être importé en haut. Nous devons également importer GetDocs depuis Firestore. Essayons encore une fois. Ouvrez le journal de la console dans la cible où nous pouvons voir que nous avons un tableau contenant deux commandes distinctes. Ils sont structurés exactement comme nous les avons créés. Dans cette commande, nous avons l'identifiant. Ensuite, nous avons fusionné le reste des données du document , à savoir l' objet pizzas et CreatedAt. Nous avons presque terminé cette vidéo. La prochaine chose que nous allons faire, La prochaine chose que nous allons faire juste pour terminer, est d'intégrer notre code dans un bloc try and catch. Accédez à la fonction GetOrders. Récupérez le contenu complet du journal de la console contenant le total des données de requête. Placez-le dedans, essayez et attrapez. Catch prend une erreur. Collez ensuite le contenu dans la section d'essai. Nous savons que cela fonctionne. Nous pouvons donc également supprimer ce journal de console. Nous allons laisser celui-ci là. Dans la vidéo suivante, nous passerons à nos commandes, les passerons en boucle et les placerons dans la vue d'administration. 38. Boucle de commandes: Nous savons maintenant que nous pouvons récupérer avec succès les commandes depuis Firebase et les stocker dans notre variable AllOrders. Nous les avons importés dans le fichier orders.view, et nous pouvons les utiliser pour les parcourir et les afficher dans le tableau. Il s'agit du tableau que vous voyez dans la vue d'administration en bas. Comme nous l'avons fait pour les pizzas ci-dessus, nous pouvons parcourir toutes ces données et afficher les valeurs correctes. La première chose à faire dans les commandes actuelles, que nous devons modifier cette valeur codée en dur de cinq. Nous pouvons obtenir la valeur réelle avec AllOrders.length. Nous savons actuellement que nous avons reçu deux commandes, donc cela semble correct. Ensuite, il y a les en-têtes du tableau. Nous n'avons pas besoin de mettre cette section en boucle car nous ne voulons pas d'en-têtes dupliqués, mais nous devons créer une boucle pour les deux lignes supplémentaires suivantes. La première rangée avec le numéro de commande et la deuxième rangée avec les détails de la pizza. Pour ce faire, nous allons créer un wrapper supplémentaire appelé template. Découpez ces deux rangées du tableau. Nous pouvons transmettre un élément appelé modèle, coller à nouveau, et nous pouvons maintenant utiliser ce modèle pour ajouter la boucle deux. Le modèle ajoutera un wrapper à cette section, mais il n'ajoutera aucun code HTML supplémentaire Il s'agit donc en fait d'un wrapper invisible. Placer dans une boucle avec v-for, commander dans AllOrders. Nous avons besoin d'une clé. Nous savons que nous avons une clé unique pour chaque commande enregistrée dans la pièce d'identité. Il s'agit de order.id. Nous pouvons également utiliser ce order.id au lieu de ce numéro de commande. Ensuite, nous pouvons accéder aux informations sur nos pizzas qui sont stockées dans cette ligne. N' oubliez pas que pour chaque commande, nous n'avons pas qu'une seule pizza Nous devons donc créer une boucle supplémentaire pour parcourir chacune des pizzas de notre commande. Par exemple, nous sommes actuellement en train de passer revue cette première commande ici. Nous devons ensuite parcourir orders.pizzas en boucle pour accéder à toutes les valeurs qu'il contient et les afficher sous forme de données de tableau. v-for, et nous dirons «  commandez l'article dans l'ordre ». commande est l'OrderItem complet, que vous avez depuis la première boucle, mais nous voulons accéder aux pizzas. Nous pouvons voir si nous nous dirigeons vers la console et que nous sautons dans les pizzas, nous n'avons pas enregistré l'identifiant de pizza pour chacune d'entre elles. Mais le nom et la taille de chaque pizza sont également uniques, nous pouvons donc créer une clé à partir de ceux-ci. Nous dirons OrderItem.name. Nous verrons OderItem.size. Nous pouvons accéder à l'OrderItem sur les propriétés de la pizza telles que le nom, la taille, la quantité et le prix. Le premier est le nom, le second est la taille, donc OrderItem.size, la quantité. C'est à vous de décider comment vous souhaitez gérer ce prix à afficher dans le tableau d'administration. Si vous le souhaitez, vous pouvez tout d'abord essayer de générer le OrderItem.price. Si nous allons dans l'administrateur puis actualisons, nous pouvons voir notre structure. Nous avons le numéro de commande, le nom de la pizza, la taille , la quantité et le prix sera affiché sous forme de prix unique pour une pizza. Si vous le souhaitez, comme nous l'avons décrit ici où nous avons dit que c'est le total. Je vais multiplier le prix par la quantité. Multiplions avec l'étoile par OrderItem.quantity. Il s'agit maintenant du total pour chacune de ces lignes. Ensuite, nous allons revenir à ces commandes, et nous verrons comment supprimer des articles notre base de données à l'aide de cette croix rouge. 39. Suppression de commandes: Nous allons maintenant nous concentrer sur la manière de supprimer les commandes. Si nous passons au fichier composable UsePizzas, celui-ci utilise le même processus que utilisé auparavant lorsque nous avons supprimé les pizzas. Nous avions cette fonction appelée delete pizza, qui prenait un identifiant, nous effasions tous les messages d'erreur existants, puis nous stockions une référence de document en accédant à notre collection, ainsi que l'identifiant. Nous avons appelé une méthode appelée DeleteDoc qui a intégré la pizza que nous venons de référencer, puis finalement nous avons appelé GetPizzas, qui a extrait toutes les autres pizzas qui étaient toujours disponibles. Donc, pour que les choses restent simples et agréables, nous allons copier l'ensemble de cette fonction, puis entrer dans le fichier le plus ancien utilisé et le coller dedans. Bien entendu, nous devons apporter quelques petites modifications que nous appellerons cet ordre de suppression. Encore une fois, cela nécessitera toujours la transmission d'un numéro de commande. Nous effacerons également tout message existant. Ce sera un ordre constant, ce sera le DBordersRef, et nous supprimerons cet ordre. getOrders et dans l'appel de fonction celui-ci doit correspondre celui que vous avez juste au-dessus. Nous pouvons ensuite modifier le message, une erreur s'est produite lors de la suppression de la commande. Ensuite, cela nécessitera également une importation supplémentaire, nous devons extraire notre document. Nous devons intégrer DeleteDoc, et nous devrons également créer ce message Passons donc à nos importations. Depuis Firestore, nous devons référencer notre document et supprimer le document. Puisque nous traitons nos commandes, nous avons déjà reçu l'impulsion des commandes juste ici, donc c'est très bien. Nous avons donc le message. Nous devons ensuite le créer en tant que ref, message const est égal à une ref, que nous définirons initialement comme une chaîne vide. Nous l'avons déjà importé, donc c'est bon. Nous devons ensuite renvoyer certaines valeurs de ce composable vers la section de retour. Nous y reviendrons, je supprimerais toute la méthode ainsi que le message à afficher à l'intérieur des composants. Nous allons ensuite passer à nos composants dans le dossier admin et dans les commandes, le orders.view, où nous pouvons ensuite créer des importations. Nous sommes déjà en train d'importer notre fichier de commandes d'utilisation, afin de pouvoir ensuite déstructurer, supprimer la commande et également notre message. Tout d'abord, nous appellerons ordre de suppression si nous examinons la section d' administration, puis si nous descendons. Nous nous souvenons donc tous que chacun de ces numéros de commande comporte une petite croix, qui est un bouton, et cela va appeler notre méthode, à laquelle nous pouvons transmettre le numéro de commande. C'est le bouton qui se trouve juste ici. La classe de btn remove. Nous écoutons maintenant un clic, que nous appellerons ordre de suppression, et l'ordre de suppression prendra en compte le numéro de commande, que nous allons transmettre à cette fonction. Je vais devoir le récupérer dans notre boucle afin que nous puissions commander l'identifiant que vous avez déjà utilisé. Nous pouvons simplement le mettre entre crochets, et cela sera transmis à notre fonction. Essayons ça. Dans le projet. Nous n'avons que deux commandes à l'intérieur pour le moment. Nous allons essayer de supprimer celui-ci. Nous constatons que cela passe à trois commandes maintenant, mais nous devons actuellement actualiser pour voir les mises à jour. Mais c'est bien pour le moment, nous y reviendrons dans le futur et nous améliorerons cela en ajoutant nos fonctionnalités en temps réel à partir de notre base de données. Cela signifie que dès que modifications seront apportées à la base de données, notre application sera mise à jour avec les nouvelles valeurs. Enfin, n'oubliez pas que nous avons également importé ce message en haut. Ce que nous pouvons faire, c'est l' afficher juste en dessous notre en-tête dans l'élément P. Non seulement nous devons afficher le message à l'intérieur, mais nous devons également ajouter un rendu conditionnel. Nous ne voulons pas que ce message soit toujours affiché ou qu'il occupe l'espace qu'il occupe actuellement. Si nous y jetons un coup d'œil, que nous la supprimons et que nous l'enregistrons, vous pouvez voir si nous la commentons et appuyons sur « Enregistrer ». Cette section occupera de la place, qu'il y ait Cette section occupera de la place un message ou non. Nous allons donc faire pour ne l'afficher que s'il y a un message, en plaçant la section v if pour n'afficher que s'il y a un message en place, et pour le style, nous allons également ajouter la classe d'erreur. 40. Afficher et masquer les blocs d'administration: La vue d'administration peut sembler correcte pour le moment, mais imaginez si notre application était beaucoup plus grande et que nous avions beaucoup plus de pizzas dans le menu ou de nombreuses commandes. Cette page peut être très longue. Pour y remédier, nous allons maintenant afficher et masquer chacune de ces sections. Cela rend la page beaucoup plus petite et nous n'avons pas besoin de lire toutes ces informations. Pour cela, nous allons créer une variable locale dans chacun de ces composants d'administration gratuits, qui sera ensuite alternée avec le texte de show and hide. Pour commencer, sautez dans la barre latérale. Les composants, l' administration et la nouvelle pizza. Eh bien, nous allons créer une nouvelle constante locale appelée show NewPizza. Définissez cette valeur sur ref et configurez notre ref, qui sera égale à la valeur true. Nous l'afficherons par défaut. Cela sera visible dans l' administrateur, puis une fois qu'un utilisateur aura cliqué dessus, cela deviendra faux. Nous allons le faire dans nos modèles et dans la section d'en-tête juste en dessous de notre titre, à l'intérieur des petits éléments. À l'intérieur, nous voulons vous montrer le texte de l'option Afficher ou masquer. Nous pouvons également afficher cette section de manière conditionnelle à l'intérieur des doubles bretelles bouclées. Ce que nous pouvons faire, c'est dire que si show NewPizza est égal à deux, nous affichons le texte de hide. Si ce n'est pas le cas, nous dirons show. Actuellement, cela est défini sur true, nous verrons donc le texte de masquer en haut. Nous pouvons ajouter la classe ToggleBtn. Écoute un clic quand je clique. Tout ce que nous voulons faire ici est de rechercher votre NewPizza soit égale à que votre NewPizza soit égale à l'opposé de la valeur actuelle . Essayons ça. Cliquez sur Masquer. Cela va maintenant basculer et nous pouvons ensuite utiliser notre variable show NewPizza pour afficher et masquer cette section complète. La section que nous voulons afficher et masquer est le formulaire. Nous pouvons toujours garder la tête en place, qui comporte le bouton et aussi le titre. Dans le formulaire, ajoutez v-show qui n'affichera ce contenu que si la valeur de show NewPizza est égale à deux. Il n'est pas en train de revenir en arrière pour le moment. Essayons de rafraîchir. Cela semble bien fonctionner. Je ne suis pas certain de ce qui s'est passé là-bas. Nous pouvons désormais reproduire cette section dans les commandes ainsi que dans le menu. Passons aux commandes. Importez notre vue de référence. Créez une variable locale. Celui-ci peut être des commandes à montrer. La valeur initiale de true. En fait, ce que nous allons simplement faire ici, c'est copier la section NewPizza que nous avons créée, donc la petite section complète. Apportez-le pour que ce soit cohérent. Placez-le juste en dessous de nos commandes en cours, rubrique Niveau 3, dans la même classe. Cette fois, tout ce que je veux faire est de changer cela pour afficher les commandes. Modifiez cela dans toutes les autres sections. Nous voulons ensuite montrer et masquer. Notre tableau serait affiché de la même manière que les commandes. Essayons ça. Elle peut se cacher. Cela a disparu. Ensuite, l'affichage révèle cette section. Enfin, la section menu, qui se trouve dans les pizzas ou Vue. Nous devons également importer ref vue. Notre variable locale appelée ShowMenu, la valeur initiale est true, puis, comme avant, dessous de notre titre de niveau 3, nous devons à nouveau copier cette petite section, coller dedans, puis remplacer toutes nos variables par ShowMenu. Enfin, ajoutez v-show à notre tableau. Essayons ça. Le menu, le masquage et l'affichage. Juste comme touche finale rapide. Si nous survolons ce bouton, nous pouvons le transformer en pointeur. Nous avons une classe de ToggleBtn pour chacune de ces sections. Comme nous l'utilisons dans plusieurs composants, accédez à nos actifs et à la classe main.css de ToggleBtn. Nous allons définir le curseur comme un pointeur. Nous y voilà. Cela fonctionne désormais pour nos trois sections. 41. La fonction d'inscription: Ce projet va utiliser l'authentification Firebase pour gérer les comptes utilisateurs et leur permettre de s'inscrire et de se connecter. Si nous accédons à la console Firebase et à la section Présentation du projet, vous devriez voir juste en dessous que nous avons notre authentification et notre configuration des raccourcis de la base de données Firestore. En effet, dans les premières vidéos, nous les avons déjà activées dans notre projet. Mais si vous n' avez pas encore configuré l'authentification, il vous suffit de vous rendre dans la section Tous les produits et de l' ajouter à l' aide de ce lien d'authentification. Comme le mien est déjà activé, je vais retourner au projet pour le configurer. Faisons en sorte que les choses restent organisées. Créons un nouveau composable dans le dossier des composables, un nouveau fichier. Celui-ci va être useAuth.js. Ensuite, comme pour tous les autres composables, nous exporterons une fonction par défaut. Celui-ci est UseAuth. Ensuite, nous ajouterons un relevé de retour en bas avant d'oublier. Comme nous n'avons actuellement aucun utilisateur dans notre projet, il serait logique que la première fonction que nous ajoutions soit de créer un nouvel utilisateur. Pour cela, nous devons importer certaines fonctions du package d'authentification Firestore Firebase. Au-delà de notre fonction, nous allons maintenant effectuer ces importations. Ce dont nous avons besoin pour importer est quelque chose appelé GetAuth. De plus, pour créer un nouvel utilisateur, nous devons importer une méthode appelée créer utilisateur avec e-mail et mot de passe. C'est un étui entièrement en forme de chameau. Après le premier mot , assurez-vous que chaque mot suivant commence par une majuscule. Nous allons l'importer depuis Firebase/Auth. Ensuite, nous allons utiliser cette importation GetAuth, qui va initialiser l'authentification Firebase. Ensuite, nous allons commencer à le référencer à l'intérieur d'une variable. Participez à notre fonction. Appelez cette authentification, qui est égale à getAuth. Comme il s'agit de notre méthode, nous devons l'appeler entre crochets, la fonction d'authentification suivante, qui va créer un nouvel utilisateur. Cela va être asynchrone appelé inscription. Lorsque nous nous inscrivons, étant donné que nous créons un utilisateur avec un e-mail et un mot de passe, nous avons également besoin de passer à cette fonction lorsque nous l'appelons. Nous verrons bientôt comment procéder dans corps de la fonction ou dans la gestion des erreurs. Créez une zone d'essai et de capture, en transmettant l'erreur. Ensuite, dans la section d'essai nous allons appeler la fonction de création d'un utilisateur avec e-mail et mot de passe, que nous venons d'importer. Attendons la valeur de retour. Créez un utilisateur avec e-mail et mot de passe. Cela va prendre en compte trois éléments distincts. La première est une référence à l'instance actuelle, qui est celle que nous avons configurée en haut. Il doit également contenir l' e-mail et le mot de passe. Nous y sommes. De plus, pour stocker les messages d'erreur, nous pouvons créer une nouvelle variable réactive. Pour cela, nous devons d'abord importer la référence depuis vue et créer notre constante juste en dessous dans la fonction appelée ErrorMessage. Configurez ensuite notre référence, qui sera initialement une chaîne vide. Nous y sommes. Si cette section est maintenant réussie, si la zone d'essai fonctionne correctement, nous pouvons alors effacer tous les messages existants. Nous allons réinitialiser le ErrorMessage.value pour qu'il revienne à une chaîne vide. Ensuite, dans la section d'erreur, nous pouvons également mettre à jour ce message d'erreur. Si nous procédons par exemple à l'inscription d'un utilisateur, nous ne voulons pas simplement renvoyer un message d'erreur générique, tel que « une erreur s'est produite, un problème s'est produit lors de la connexion  » ou quoi que ce soit d'autre. Il serait logique d' être un peu plus descriptif quant à la nature de l'erreur. se peut qu'ils ne saisissent pas un mot de passe suffisamment long, qu'il ne contienne pas les caractères corrects ou que l'e-mail soit déjà utilisé. Pour cela, nous devons accéder à notre erreur, qui est transmise à la zone de capture. Nous avons une propriété appelée code. Ce code est une chaîne de texte qui équivaut à un message d'erreur, et les deux plus courants fournis par Firebase sont une chaîne appelée auth/email déjà utilisée. Ça ressemble à ça. C'est auth/email déjà utilisé, avec des tirets entre chacun de ces mots. Auth/Weak-Password est également un autre outil utile. Ces messages seront utiles à transmettre à l'utilisateur. Mais d'abord, nous devons nous assurer de pouvoir détecter lequel d'entre eux est généré à l'intérieur de notre erreur. Nous pouvons le placer dans une instruction if-else, nous pouvons le placer dans une instruction switch, selon votre préférence. Je vais opter pour l'interrupteur. Nous pouvons y ajouter plus tard si nous voulons accéder à l'erreur, qui est transmise à notre objet catch , nous pouvons accéder au code. Ensuite, nous pourrons commencer à élaborer nos dossiers individuels. le premier cas, nous allons vérifier la présence de cette chaîne juste ici. Collez ceci dedans. Si cela est vrai, s'il y a une correspondance, nous voulons définir la valeur ErrorMessage.value. Pour être un peu plus descriptif, disons qu'un utilisateur avec cette adresse e-mail existe déjà, veuillez vous connecter. Si cela est vrai, nous pouvons alors sortir de ces instructions de commutation. Nous n'avons pas besoin d'aller plus loin dans un autre code. Le second cas est égal à notre deuxième corde, que nous avions en bas de l' écran. Déplaçons ça. Collez-le comme dans notre étui. Si l'utilisateur saisit un mot de passe faible, il s' agira d'un ErrorMessage.value. Nous allons mettre à jour cette variable pour indiquer que le mot de passe doit comporter au moins six caractères. Nous en sortons ensuite si celle-ci est vraie. Enfin, avec l'instruction switch, nous devons également ajouter un message par défaut en bas de page. Ceci est utile si l'un des cas ci-dessus ne correspond pas, revenez à la section par défaut, qui mettra à nouveau à jour le ErrorMessage.value. Celui-ci peut être un peu plus générique. Nous allons dire que nous sommes désolés, une erreur inattendue s'est produite. C'est tout ce dont nous avons besoin dans notre fonction d'inscription pour le moment. La dernière chose à faire est de renvoyer notre fonction d'inscription ainsi que notre message d'erreur. Les deux seront désormais disponibles pour les appels depuis nos composants. C'est ce que nous ferons ensuite lorsque nous créerons le formulaire de connexion. 42. Créer le formulaire de connexion: Grâce à notre fonctionnalité d'inscription qui fonctionne désormais, nous avons également besoin d'un formulaire pour saisir les informations de l'utilisateur. Pour cela, ce formulaire sera à double usage. Cela permettra à l' utilisateur de se connecter et de s'inscrire pour créer un nouvel utilisateur. Pour cela, passons à notre barre latérale et nous pouvons créer nos nouveaux composants. Passez aux composants, et celui-ci s'appelle Signin.vue. Tout d'abord, nous allons créer la section de script qui utilisera la configuration. En haut, nous allons importer notre utilisation de composable, que nous avons créée dans la vidéo précédente et la définir comme étant @, qui est la racine de notre source, composable UseAuth. Récupérez nos variables que nous avons exportées lors de la première inscription. Nous avons également besoin de notre message d'erreur. Récupérez-les à partir de la fonction UseAuth ci-dessus. Ça doit juste venir , on y va. Également une variable de données de formulaire pour stocker l'e-mail et le mot de passe saisis par l'utilisateur. Nous allons le lier à notre formulaire à l'aide de v-bind. C'est ce que l'on appelle les données utilisateur. Nous devrons également importer la référence depuis le package vue. Configurez-le comme un objet, qui contiendra simplement l'e-mail et le mot de passe. Par défaut, les deux champs seront vides car l'utilisateur n'a saisi aucune valeur. Importez ensuite notre référence depuis Vue. Accédez à la zone du modèle pour créer le formulaire. Comme celui-ci sera un modal contextuel afin que nous puissions l'afficher et le masquer à l'aide de CSS, nous devons créer quelques wrappers pour l'activer. Le premier sera un div avec la classe de modal, qui est le wrapper principal. Ensuite, imbriqué à l'intérieur, un deuxième div avec la classe modal_content sera créé . Ce modal sera activé à l' intérieur de l'en-tête. Ce que nous allons bientôt faire, c'est créer dans l'en-tête un lien vers le haut, qui fera ensuite apparaître notre modal de tous ces contenus. Ensuite, dans le modal, nous voulons également créer une petite croix dans le coin, qui fermera ensuite ce modèle. La fermeture sera une période et la classe pour notre style de close_modal. La fermeture sera une entité HTML, qui est l' esperluette, le hachage. Puis 10060 et un point-virgule. Un élément p ci-dessous, celui-ci sera pour le texte, veuillez donc vous connecter pour continuer. Ajoutez une classe pour notre style de modal_text. Ensuite, en dessous, nous allons créer un formulaire permettant à l'utilisateur de se connecter. Nous n'avons pas besoin d'action, nous nous en occuperons avec le futur oui. Tout ce dont nous avons besoin ici, c'est d'une entrée pour notre e-mail, d' une entrée pour le mot de passe. Nous allons également créer deux boutons. Commençons par notre section e-mail, qui sera un div en tant que classe wrapper de form_group. Le libellé de l'adresse e-mail du formulaire. La saisie pour celui-ci, puisqu'il s'agit d'un e-mail, nous allons lui donner le type d'e-mail, l'identifiant de l'e-mail, le texte de remplacement de l'e-mail saisi. Ensuite, nous pouvons également utiliser le modèle v pour lier la valeur de cette entrée à nos données utilisateur juste au-dessus. Nous devons accéder à UserData.email. Nous y sommes. Cette entrée contient également l'identifiant du courrier électronique. Nous pouvons le lier à notre étiquette, puis copier notre section div. Celui-ci est pour le mot de passe. Collez-le juste en dessous. L'étiquette pour le mot de passe et pour la saisie, le type de celui-ci est également mot de passe, l'identifiant est le même. L'espace réservé à la saisie du mot de passe. Cela doit le lier à UserData.password. Ensuite, nos deux boutons en bas, juste en dessous de notre div. La première est la connexion. Placez dans un bouton le type de bouton, le texte de connexion. Dupliquez-le ou copiez-collez. Maintenant, ce que nous devons faire, c'est modifier ce texte pour nous inscrire. Plus tard, cela donnera à l'utilisateur la possibilité de se connecter ou de s'inscrire en utilisant le même formulaire modal. Nous y sommes. Nous avons créé de nouveaux composants modaux de connexion. Pour le voir, nous devons l'importer exactement là où nous le voulons dans notre projet. Comme mentionné précédemment, ce sera à l'intérieur de l'en-tête afin que nous puissions voir le texte tout en haut. Passons à l'en-tête jusqu'à la section du script. En fait, nous n'avons pas de script, alors créons-le maintenant. Configuration du script. Nous allons importer nos composants, c' est-à-dire la connexion. Le chemin du fichier, puisque nous sommes à l'intérieur des composants, est simple. /Connectez-vous dans .vue. Placez ensuite les composants en haut de la section d'en-tête. Vous vous demandez peut-être pourquoi nous ajoutons un formulaire de connexion dans cette zone d'en-tête, mais cela deviendra plus clair très bientôt. Mais en le plaçant dans l'en-tête pour le moment, nous conserverons ce groupe avec les boutons de connexion et d'inscription, qui s'afficheront très bientôt en haut de l'en-tête. Nous cliquerons sur un bouton, le formulaire apparaîtra et nous pourrons le fermer avec cette croix en haut. De plus, cela semble un peu compliqué pour le moment, mais nous corrigerons cela plus tard avec notre style. Pour l'instant, concentrons-nous sur le formulaire et sur l' inscription d'un utilisateur. Revenons aux composants de connexion que nous venons de créer. Puisque nous avons créé la fonction d'inscription dans notre composable, nous allons travailler avec ce bouton d'inscription situé en bas, et nous le lierons à la fonction à l' aide d'un écouteur de clics. Nous pouvons empêcher le comportement par défaut, qui consiste à actualiser la page, appeler notre fonction d'inscription, à appeler notre fonction d'inscription, qui prendra en compte l'e-mail et le mot de passe lors de la configuration dans notre composable. Les deux sont disponibles dans le script. Nous avons les données utilisateur, l'e-mail et le mot de passe. Transmettons ces deux valeurs. Il y a d'abord le UserData.Email, puis le UserData.Password. Cela devrait être tout ce dont nous avons besoin pour la fonction d'inscription. N'oubliez pas que nous avons également importé le message d'erreur. Affichons-le juste en dessous nos éléments p avec le texte «  Veuillez vous connecter pour continuer ». Placez-le dans une plage avec la classe error_message. À l'intérieur des doubles bretelles bouclées , notre message d'erreur s'affiche. Nous y avons fait pas mal de choses. J'espère que tout cela fonctionne. Passons au projet, ça nous permet de faire une sauvegarde. Nous allons créer un nouvel utilisateur pour continuer. C'est un peu difficile à voir, mais nous corrigerons ce problème dans le CSS très bientôt. Entrez une adresse e-mail et un mot de passe. Il suffit de voir ceci. Si je passe la souris dessus, clique sur le bouton « S'inscrire ». Pour le moment, nous ne recevons aucun commentaire. Nous n'avons donc pas de message d'erreur, Nous n'avons donc pas ce qui est bon signe. Nous fermerons également ce formulaire automatiquement après la connexion et l'inscription. Mais pour l'instant, revenez à la console dans la section d'authentification, mais nous devrions voir l'utilisateur, qui vient de s'inscrire. 43. Style modal: [CONTEXTE] Nous avons actuellement ce modal pas très beau qui contient les composants de connexion. Dans le sign-in.view, nous pouvons commencer à ajouter du style en ciblant toutes ces classes. Le div principal qui entoure tous les modaux possède cette classe de modal. Nous avons alors le contenu modal qui est contenu à l'intérieur. Ils peuvent désormais être utilisés pour styliser notre modal et faire apparaître au-dessus du reste du contenu. Nous descendons tout en bas pour créer la section de style, qui sera étendue à ce composant. Comme nous l'avons vu, le wrapper principal qui entoure tout ce div a la classe modal. Ce que nous allons faire ici, c'est cibler ce modal, qui est le wrapper complet. Nous allons étirer cette enveloppe sur toute la largeur et la hauteur de la page. Nous pouvons ensuite définir une couleur d'arrière-plan plus foncée afin de ne pas voir le contenu sous-jacent autant. Ensuite, sur le div suivant, qui est imbriqué à l'intérieur, qui est le contenu modal. Ce sera un peu plus petit. Il aura également une couleur de fond blanc pour le faire ressortir de tout le contenu sous-jacent. Tout d'abord, la section modale. Le modal aura une position fixe et il se distinguera du reste du contenu par un indice [inaudible] correspondant à un nombre élevé, tel que 999. Cela garantira que cet arrière-plan complet apparaît sur l'ensemble du contenu existant. Pour que ce modal se démarque, nous devons également définir la largeur à 100 vw. Toute la largeur du belvédère. La hauteur, 100 vh, soit 100 % de la hauteur du belvédère. L'arrière-plan, ce serait une couleur RGBA. Ce que nous allons faire pour le rouge, le vert et le bleu, c'est de définir ce paramètre sur zéro, qui est la couleur noir foncé. Nous allons définir l'opacité à 0,9. Il est légèrement transparent. C'est l'effet que nous recherchons. C'est la couleur de fond la plus foncée qui est légèrement transparente. Nous pouvons également le placer dans le coin supérieur gauche, afin de ne pas avoir cet espace en haut. Nous pouvons également utiliser la flexbox pour centrer tout le contenu. Tout d'abord, le sommet est nul. Nous ferons de même pour la gauche. Assurez-vous qu'il n'y a pas de trous sur le bord. Type d'affichage de Flex. Ensuite, nous nous assurerons que tout le contenu est aligné verticalement et horizontalement en plaçant la propriété justify-content au centre. Il en va de même pour aligner les éléments. Cela devrait être tout ce dont nous avons besoin à présent. Nous avons maintenant ce modal au centre. Tout son contenu au centre sera placé sur un fond blanc pour être plus visible. Cela a une classe si nous sauvegardons le contenu modal. Sélectionnez cette option, l'arrière-plan peut être de la couleur de votre choix. Je vais utiliser de la fumée blanche. Il a également besoin d'un peu d'espacement, de rembourrage. Nous en définirons la largeur, le rayon de bordure et centrerons également tout le contenu à l'aide de la flexbox. Nous allons définir la propriété de largeur à 80vw. N'oubliez pas d'utiliser un rembourrage sur tous les côtés pour donner un peu d'espace à l'intérieur , un petit rayon de bordure. Disons trois pixels. Nous allons également définir le type d'affichage pour qu'il soit flexible. La raison pour laquelle nous allons le faire est que nous allons définir, si nous remontons au sommet, nous allons utiliser cette zone flexible, en particulier à cause de ce bouton modal fermé. Nous voulons que cela soit terminé sur la droite, ainsi que le texte qui se trouve juste en dessous. Mais nous y reviendrons dans un instant. Mais maintenant, nous avons besoin que la direction de flexion se trouve dans une colonne, ce qui réinitialisera le contenu à la verticale. Couleur et valeur RGB de 76, 76, 76. Vous pouvez également voir dans ce texte que nous avons hérité de cette ombre technologique. Nous pouvons remplacer cette méthode par la propriété text-shadow en la définissant sur non. Passons maintenant à nos boutons. Nous pouvons sélectionner le contenu modal. À l'intérieur, nous avons nos deux boutons. Nous pouvons ajouter un cluster individuel, chacun d'entre eux si vous le souhaitez, ou à la place, nous pouvons utiliser du CSS pour sélectionner le contenu modal et le bouton qui suit, qui est le premier du type. Cela va sélectionner le tout premier bouton à l'intérieur de notre contenu modal, qui est notre connexion. Nous pouvons utiliser ces deux espaces avec une marge sur la droite. Nous allons également lui donner un aspect légèrement différent en réglant la couleur d'arrière-plan une valeur RGB de 163, 204, 163. Comme vous pouvez le constater, cela a sélectionné la toute première occurrence de ce bouton. Nous avons défini la couleur d'arrière-plan et y avons également ajouté de l' espace sur le côté droit. Ensuite, pour l' état de survol, vous ajouterez une petite transformation à cela. Encore une fois, nous allons récupérer le contenu modal, sélectionner tous les boutons qu'il contient. Ne l'appliquez que lorsque vous passez la souris dessus. Transformez. Agrandissez-le légèrement. Nous pouvons utiliser l'échelle. La valeur d'échelle de 1 est exactement ce qu'elle est actuellement. Pour l'agrandir légèrement, nous pouvons le régler sur 1.03, ce qui nous donne une belle transformation lorsque vous passez la souris sur chacun de ces boutons. Ensuite, remontons vers le haut où nous avons cette section modale fermée. C'est la durée dont nous venons de parler. N'oubliez pas que nous avons défini le contenu modal pour utiliser la flexbox. Par conséquent, étant donné que le modal fermé en est un élément secondaire, nous pouvons alors utiliser certaines propriétés de flexion. Pour ce faire, sautez vers le bas saisissez tous les modaux proches. La propriété de flexion de align-self et la valeur de flex-end. Ce que cela va faire, cela ne s'appliquera qu' à cet élément actuel. Sur la gauche, ce sera le Flex Start. Sur la droite se trouve l'extrémité flexible. Nous n'avons été qu'un bouton et nous pouvons définir le curseur comme un pointeur. C'est désormais chose faite. Que reste-t-il ? Nous avons le texte. Juste ici, nous pouvons le placer au centre. Celui-ci, si nous y jetons un coup d'œil, contient la classe du texte de soulignement modal, saisissez-le, définissez align-self comme étant égal au centre. Il place désormais nos textes au centre de la page. Réduisons simplement cela. La largeur de cette section convient à la vue mobile. Mais si nous étendons cela à la vue plus large que nous avons vue, nous voulons probablement que ce modal soit un peu plus étroit. Passons à une requête multimédia Nous pouvons le faire @media et nous ne l'appliquerons que lorsque la taille de l'écran est de 900 pixels ou plus. Sélectionnez le contenu modal. Je vais y aller, régler ça sur 40vw. Essayons cela en dessous de 900 pixels. Ensuite, plus de 900 pixels réduiraient la taille. Presque là, la dernière chose à laquelle nous devons nous occuper est cette période avec la classe de message d'erreur. Pour cela, je vais simplement ajouter un exemple de texte. Nous pouvons le voir. Définissez la couleur rouge et un espace en dehors de la requête multimédia. Récupérez notre error_message. La couleur 255, 104, 104. C'est la couleur rouge et elle a également besoin d'un peu d' espacement sur la gauche. Ajoutons une marge sur la gauche uniquement. Ça a l'air plutôt bien. Maintenant, nous pouvons simplement revenir au message d'erreur. Je supprime l'exemple de contenu d'ici. Nous y sommes. C'est maintenant notre style terminé pour le modal. À venir, nous verrons comment fermer ce modal lorsque nous cliquons sur ce X. 44. Basculer modal: Ce modal a maintenant une bien meilleure apparence. Nous aurons également besoin d'un moyen de l'ouvrir et de le fermer. Pour cela, passons à notre composable, qui est useAuth.js. Ensuite, à l'intérieur, nous allons créer une nouvelle variable qui contiendra l'état ouvert actuel. Il s'agira d'une valeur booléenne, que nous définirons comme une valeur initiale fausse. Cela s' appellera SignInModalOpen, sera intégré à une référence et à la valeur initiale false, puis créera ci-dessous une nouvelle fonction qui false, puis créera ci-dessous une nouvelle fonction qui fera passer cela en vrai ou en faux. Fonction ToggleModal. Tout ce que nous avons à faire ici est de récupérer le nom de notre variable, qui est SignInModalOpen, définir la valeur comme étant égale à l'opposé avec le point d'exclamation, donc SignInModalOpen.value. Si c'est faux, cela rendra vrai et si c'est vrai, cela définira alors le contraire, ce qui est faux. Renvoie les deux à partir de ce fichier afin que SignInModalOpen, ToggleModal, puis saute dans un composant qui se connecte. Je dois importer les deux depuis UseAuth ToggleModal et SignInModalOpen. La constante SignInModalOpen contrôlera si l'utilisateur peut voir ce formulaire Nous devons donc l'ajouter à notre wrapper dans ce div avec la classe de modal at v if statements, qui est égale à cette valeur. Maintenant, si nous l'enregistrons, parce que la valeur initiale est fausse, elle est maintenant supprimée. Revenons ensuite à notre modèle, où nous avons cette plage, qui consiste à fermer le modal. Nous pouvons écouter un clic, ce qui déclenchera notre fonction appelée ToggleModal. Comme nous savons que cette constante SignInModalOpen est définie la valeur initiale false, donc pour voir réellement ce modal, nous devons créer un bouton, qui va le changer pour qu'il soit vrai. Le problème que nous avons actuellement est que tout ce contenu dans le modal est masqué par défaut. Par conséquent, pour voir réellement ce bouton, nous devons créer un bouton en dehors de ce div principal avec le texte de connexion. Cela doit également être attentif à un clic, qui déclenchera ToggleModal. Style de la classe sign_in_btn. Sauvegardez-le et nous pouvons maintenant l' essayer dans le navigateur. Voici notre bouton de connexion. Cliquez dessus. Cela va maintenant faire en sorte que cela soit vrai, affichant ainsi le modal. Cliquez sur la croix pour la masquer. Juste pour terminer, déplaçons ce bouton dans le coin supérieur droit et nous pouvons également supprimer cette bordure. C'est le bas de notre section de style. Prenons notre bouton de connexion, donc sign_in_btn, le tout séparé par des traits de soulignement. Supprimez la bordure dont la valeur est none. Ensuite, en utilisant la flexbox, nous pouvons utiliser une ligne self. Nous l'avons configuré pour qu'il soit flexible. Maintenant, poussez-le sur le côté droit. Pour rendre cela plus visible, nous pouvons remplacer la couleur en héritant de cette couleur plus claire de notre parent. Enfin, nous allons également accéder à notre bouton de connexion en le survolant et lui donner un petit changement de couleur. RGB 161, 132. Voyons à quoi cela ressemble. Nous y sommes. Maintenant, notre modal va basculer entre ouverture et fermeture, ce qui fonctionne très bien. Les prochaines étapes consisteront à connecter l'utilisateur et à le déconnecter également. 45. Se connecter et sortir: Notre formulaire de connexion est conçu pour être à double usage. Nous l'avons déjà utilisé pour connecter de nouveaux utilisateurs, mais nous l' utiliserons ensuite également pour connecter les utilisateurs existants garder les choses bien organisées. Nous allons intégrer cette fonction de connexion à notre utilisation de composable. Ensuite, en cas de désactivation, nous avons notre fonction d'inscription . Ajoutons-y également une fonction de connexion. Avant cela, nous pouvons également importer une méthode depuis Firebase. Avant, nous devions CreateUserWithEmailAndPassword, mais maintenant, nous avons besoin de SignInWithEmailAndPassword. Assurez-vous que tout est composé d'une virgule afin que chaque mot commence par une majuscule après le premier. Il sera chargé de connecter tous les utilisateurs existants. Créons une fonction que nous appellerons à l'intérieur de laquelle nous allons l'appeler. Une fois que l'utilisateur a cliqué sur le bouton « Connexion » à l'intérieur de ce modèle. Une grande partie du code sera similaire à la fonction d'inscription. Nous avons le bloc try-catch Nous appellerons ensuite notre méthode Firebase particulière, et nous devrons également gérer les messages d'erreur. Ce que nous allons faire, c'est copier toute cette section d'inscription, je vais m'en servir comme point de départ. Collez ceci juste en dessous. La fonction, nous l'appellerons connexion. Au lieu de créer un utilisateur, nous allons le modifier pour qu'il s'agisse d'une connexion. Connectez-vous avec votre e-mail et votre mot de passe, nous effacerons ensuite tout message d'erreur, ce qui est très bien. Une fois connecté, nous souhaitons également fermer ce modèle. Nous allons donc cliquer sur « Ouvrir ». Nous allons saisir nos coordonnées. Si le processus de connexion se déroule correctement, nous cliquerons dessus, puis cela sera fermé. Nous pouvons le faire en définissant le modal de connexion ouvert pour qu'il soit égal à false. connexion modale ouverte est quelque chose que nous avons déjà configuré tout en haut et qui contrôle la visibilité du modal. Retournons à notre réception et redescendons dans la zone de pêche. Nous n'avons pas besoin du premier e-mail déjà utilisé, car si nous nous connectons, l'utilisateur doit déjà avoir enregistré l'e-mail. Ce que nous allons faire, c'est récupérer le message du mauvais mot de passe. Comme pour la fonction de connexion, sont tous des messages renvoyés par Firebase. Pour celui-ci, nous dirons mot de passe incorrect. Le numéro 2 est un utilisateur introuvable. Nous dirons qu'aucun utilisateur n' a été trouvé avec cet e-mail. Je vais conserver le message par défaut s'il y a d'autres erreurs. Juste avant d'ouvrir la section d'essai, nous allons ajouter des déclarations conditionnelles. En fait, nous les placerons en deux et nous vérifierons s'il n'y a pas d' e-mail ou de mot de passe. Si l'un de ces éléments est manquant, nous quitterons cette fonction et renverrons un message à l'utilisateur. S'il n'y a pas d'e-mail, nous vous enverrons une déclaration indiquant un message d'erreur. Cette valeur. Cela équivaut-il à saisir un e-mail valide ? Dupliquez ceci. Le second testera si le mot de passe n'est pas présent. Entrez un mot de passe valide. Cela arrêtera simplement une méthode inutile appelée Firebase si nous ne disposons pas de toutes les informations dont nous avons besoin. Nous allons maintenant avoir la fonction pour créer un nouvel utilisateur, pour connecter également un utilisateur existant. Ensuite, nous allons nous concentrer sur la déconnexion d'un utilisateur. Pour cela, Firebase fournit une méthode appelée déconnexion. Importez ceci. Ensuite, nous allons également créer une nouvelle fonction, qui va l'appeler. Il suffit d'un bouton au-dessus de nos relevés de retour. Créez une fonction appelée déconnexion. Nous appellerons notre méthode d'inscription, qui intègre également l'objet off afin savoir quel utilisateur se déconnecter. En fait, nous allons également intégrer cela dans une zone d'essai et de capture afin de pouvoir gérer les erreurs. emplacements de la section try détecteront toutes les erreurs, puis enverront un message d'erreur à l'utilisateur dont la valeur est égale à error.message. Il accède à l'objet d'erreur transmis à la zone de capture, puis accède à la propriété du message. Ces deux nouvelles fonctions doivent également être renvoyées. La première étape consiste à se connecter, puis à se déconnecter. Ces deux éléments doivent être accessibles depuis les composants de connexion. Ajoutez à cela des composants, signin.vue. Importez-les en haut, alors connectez-vous et déconnectez-vous. La fonction de connexion, nous devons la placer dans le formulaire, nous la lierons au bouton de connexion. L'inscription est déjà en cours d'appel. Nous avons la connexion juste au-dessus. Avec celui-ci, nous écoutons dès que vous cliquez, empêchons tout comportement par défaut et nous appellerons Login. Ensuite, comme pour la fonction d'inscription, nous devons également transmettre l'e-mail et le mot de passe que nous avons stockés dans l'objet de données utilisateur tout en haut, qui se trouve juste ici. Et cela est lié à nos entrées de forme. Donc, l'e-mail, le mot de passe, nous allons cliquer sur « Se connecter ». Notre fonction sera alors appelée transmission dans l'e-mail et également dans le mot de passe. Mais qu'en est-il de la fonction de déconnexion ? D'où allons-nous l'appeler ? Eh bien, actuellement, nous n'avons aucun bouton de déconnexion dans le modal ni dans l'en-tête. Mais nous avons le bouton de connexion dans le coin. Ce serait bien de changer le texte ici et de ne dire « connexion » que lorsque l'utilisateur est réellement déconnecté. Et aussi le contraire, lorsque nous devons l' utiliser pour nous déconnecter. Nous allons donc le faire en haut du modèle, puis revenons dans les composants de connexion, et en haut du modèle, nous avons le bouton de connexion. Dupliquons cela. Je clique, disons me déconnecter, modifie le texte pour me déconnecter. Nous reviendrons très bientôt sur ces boutons et ne montrerons qu'un seul d'entre eux à la fois. Mais maintenant, nous pouvons voir nos boutons de connexion et de déconnexion en haut. Mais juste avant de procéder au test, comment savoir si nous nous sommes déjà connectés ? Eh bien, l'un des moyens consiste à nous renvoyer l'objet utilisateur après avoir appelé la fonction de connexion. Si nous revenons à notre utilisation du composant, nous pouvons y accéder dans notre fonction de connexion en stockant la valeur renvoyée par la méthode de connexion par e-mail et mot de passe. Nous avons vu que cela se trouve à l'intérieur d' une constante appelée user, puis juste en dessous, nous pouvons tester avec un journal de console. Placez-le dans l'utilisateur, le navigateur et ouvrez les outils de développement. Accédez à la console, connectez-vous, entrez l'e-mail avec lequel vous vous êtes inscrit. Cette fois, nous allons cliquer sur Se connecter. Nous voyons une erreur. Désolé, il s'agissait d'une erreur inattendue, mais il semblerait que nous soyons en train de récupérer les informations d'identification de l'utilisateur. Jetons un coup d'œil. Nous avons l'utilisateur, nous avons l'e-mail, le jeton d'accès. Tout semble aller bien, mais nous recevons toujours un message d'erreur à l'intérieur. Alors jetons-y un coup d'œil. C'est le message contenu dans les instructions du switch. Faisons un petit débogage dans la section par défaut du journal de la console. Et ici, nous allons afficher l'objet d'erreur complet, et nous verrons si nous pouvons avoir une meilleure idée de ce qui se passe. Connectez-vous à nouveau. Ouvrez une session. Nous avons donc l'erreur, nous avons les informations d'identification de l'utilisateur et voici notre erreur. Les affectations sont constantes lors de l'utilisation de so sign in modal open. C'est là le problème. Cela doit être .value. Essayons encore une fois. Nous procédons à l'actualisation pour nous assurer que toutes les erreurs sont effacées. Connectez-vous, super, le message a été effacé. Nous avons toujours notre objet utilisateur et le modal est fermé car nous l'avons défini sur false. Supprimons les journaux de la console. Nous n'avons besoin ni de l'un ni de l'autre. retour de cet objet utilisateur fonctionne parfaitement et c'est une façon de détecter si l'utilisateur est connecté ou non. Nous pouvons également accéder aux propriétés de l'utilisateur telles que l'e-mail et l'identifiant. Mais ce n'est qu'une façon de procéder. Une autre méthode peut-être meilleure consiste à utiliser une méthode fournie par Firebase, que nous allons examiner dans la vidéo suivante, et qui tiendra compte de toute modification apportée à notre utilisateur connecté. 46. Détection des changements d'Auth: Comme mentionné dans la vidéo précédente, lorsque nous appelons cette méthode qui consiste à se connecter avec e-mail et mot de passe, une valeur est renvoyée. En cas de succès, cette valeur correspondra au contenu de l'objet utilisateur, qui contient toutes les informations dont nous avons besoin, telles que l'identifiant utilisateur et l'adresse e-mail de l'utilisateur. C'est bien, mais Firebase fournit également un observateur, ce qui est un moyen recommandé non seulement pour obtenir l'utilisateur, mais également pour nous informer en cas changement, tel qu' une déconnexion d'un utilisateur. Cet observateur va être importé dans notre fichier d'utilisation. Passez donc en haut et à l' intérieur de l'importation, nous allons également importer l'état activé/désactivé modifié. Pour appeler cela, nous allons descendre en bas de notre fichier, juste au-dessus du relevé de retour et nous l'appellerons en bas. Dans cette méthode de peinture, nous devons également placer entre crochets. Nous devons également transmettre deux paramètres. premier est l'occurrence de l'instance, nous y avons accès. Nos constantes désactivées seraient séparées par des virgules. Le paramètre suivant sera une fonction à appeler si un changement dans les utilisateurs de State a été détecté, c'est-à-dire cette fonction sera appelée si l'utilisateur se connecte ou se déconnecte. La transmission d'une fonction comme deuxième paramètre et de sa fonction impliquera également l'utilisateur actuel. Ouvre ça. Maintenant que nous avons accès à l'utilisateur actuellement connecté, nous voulons connaître notre place dans les déclarations conditionnelles. Nous pouvons vérifier si l'utilisateur existe. Si c'est le cas, nous définirons alors l'utilisateur. S'il n'existe pas, nous allons alors définir l' utilisateur comme étant égal à null et là où nous allons le définir, eh bien, créons une référence tout en haut de notre fichier. Juste en dessous du reste, nous disons const. Les données utilisateur sont égales à une référence. Par défaut, nous allons définir ce paramètre comme étant égal à null. Pour en revenir à notre observateur, nous pouvons insérer des déclarations conditionnelles et vérifier si l'utilisateur existe. Il s'agit d'un utilisateur qui sera transféré à notre fonction. S'ils sont connectés, nous définirons la valeur des données utilisateur pour qu'elle soit égale à cet utilisateur. Sinon, l'utilisateur n'est pas connecté. Par conséquent, nous pouvons renvoyer les données de l'utilisateur comme étant égales à null. Retournons ensuite ces données utilisateur à partir de notre composable. Cela va être utilisé dans divers composants. L'un d'eux peut être les composants de connexion pour nous assurer que nous n'affichons que le bouton correspondant en haut. Accédez à la connexion, importez-le en haut, puis descendez jusqu'à nos deux premiers boutons que nous voyons ici. Nous voulons uniquement afficher le bouton de connexion si aucune donnée utilisateur n'est présente. transmission de la VF indiquera s' il n'y a pas de données utilisateur. Si nous n'avons pas d'utilisateur, nous lui offrirons la possibilité de se connecter, à moins de transmettre des VL sur lesquelles l'utilisateur est actuellement connecté et où il a la possibilité de se déconnecter. Cela nous donnera maintenant l' occasion de le tester correctement. Mais juste avant de procéder au test, nous avons maintenant un conflit sans deux noms de variables. Je vais juste changer celui-ci pour qu'il s'agisse de données de formulaire. Copions ceci et utilisons-le dans notre formulaire. Les données du formulaire sont le point e-mail, il en va de même pour le mot de passe et également des modifications dans nos fonctions de connexion et d'inscription. Je pense que c'est partout. Vérifions simplement ces données utilisateur et nous ne les avons que sur nos deux sites. Bien, nous pouvons maintenant tester cela en plaçant l' utilisateur en haut du modèle, entre accolades. Nous disons « données utilisateur », « e-mail », mais souvenez-vous que parfois nous n'aurons pas accès à cet e-mail car les données utilisateur seront égales à nulles. Faire face au point d'interrogation pour que cela échoue silencieusement si nous avons des erreurs. Si ce point d'interrogation ne vous est pas familier , il s'agit d'un chaînage facultatif en JavaScript. Cela empêchera l'apparition d'une erreur si aucun e-mail n'est présent, ce qui sera le cas si l'utilisateur est déconnecté. Disons que cela passe au navigateur. Nous voyons que nous sommes actuellement connectés, l'e-mail se trouve tout en haut de la page, cliquez sur Déconnexion. Ce n est supprimé. Essayons donc de nous connecter une fois de plus. Notre e-mail est maintenant retourné. Donc, pour supprimer cette sortie du modèle , tout semble maintenant fonctionner correctement. C'est maintenant la fin de la section d'authentification. Félicitations pour avoir atteint ce stade. Nous n'avons pas encore terminé, mais nous avons encore beaucoup de fonctionnalités à ajouter à notre projet, qui seront ajoutées dans les prochaines sections. 47. Styler l'aperçu: Nous allons bientôt apporter la touche finale à notre projet. Nous allons commencer par quelques styles CSS pour cette vue d'ensemble. Pour le moment, cela ne semble pas très beau en dessous de l'en-tête. Passons à cette section, qui se trouve dans les vues, propos, sélectionnons la vue ci-dessus, puis nous pouvons créer une section de style en bas. Jetons un coup d'œil aux cours que nous avons. C'est tout ce que nous avons, ce wrapper qui enveloppe tout notre contenu avec la classe environ. Ensuite, passez à la section d'introduction, et cette section inclut notre titre et notre image. Il s'agit essentiellement de tout ce qui se trouve au-dessus de cette zone de liens. Commençons par ce cours d'environ. Nous allons commencer par définir le type d'affichage comme étant flexible, et nous nous assurerons que c' est dans le sens vertical en définissant le sens de flexion sur une colonne. L'utilisation de la flexbox et de cette direction verticale nous permettra ensuite d'aligner les éléments au centre. Alignez les éléments au centre, ce qui poussera ensuite le contenu au milieu de la page. Il s'agit de l'emballage de la page complète. Ensuite, nous avons la section d'introduction. Comme nous venons de le découvrir, la section d'introduction se résume à cette image, qui est l'image et les deux lignes de texte ci-dessus Nous allons donc également définir la direction flexible comme colonne sur celle-ci. La direction de l'affichage ou de la flexion de la colonne. Actuellement, vous ne verrez aucune différence si nous passons au navigateur. Cela est dû au fait que nous allons très bientôt utiliser une requête multimédia et la faire apparaître d' affilée sur un écran plus grand. Actuellement, cela s'applique au petit écran, puis sur l'écran plus grand, nous allons le configurer pour qu'il s'agisse d'une direction de ligne flexible. À l'intérieur de la règle des médias artistiques nous ciblerons une largeur minimale de 900 pixels, puis nous pouvons annuler notre section d'introduction en définissant la direction de flexion sur une ligne. Elles apparaissent dans une rangée. Ensuite, en dessous de 900 pixels, cela reviendra à la direction de la colonne. Revenons maintenant à la section d'introduction. Si nous faisons défiler la section jusqu'à la section complète à l'intérieur, nous avons ce div avec la classe de wrapper de texte d'information à côté de l'image. En fait, nous n'avons que deux sections avec lesquelles nous devons travailler. Nous pouvons à nouveau utiliser la flexbox pour définir la même taille à gauche et à droite. Nous devons également ajouter de l' espacement et de l'alignement, et nous le ferons juste en dehors de notre requête multimédia. abord, l'image était une image soulignement d'information qui récupérera également notre wrapper de texte d'information, notre IMG d'information et également notre wrapper de texte d'information. Comme les parents de l'intro ont le type d'affichage Flex, les éléments enfants peuvent utiliser Flex, et nous allons les configurer tous les deux pour essayer d' adopter exactement la même valeur. peu de rembourrage pour donner les deux à espacement d'une RAM. Alignez le texte en alignant le texte au centre, puis définissez l'alignement vertical. Nous pouvons également utiliser Align Self. Alignez-vous au centre. Encore une fois, cela fonctionne parce que les parents de introduction ont ce type d' affichage flexible, et align self fonctionnera parce qu'il s' agit d'un élément enfant de la flexbox. Cela prend en charge cette section. Faisons défiler la page vers le haut. Le suivant est le wrapper pour plus d'informations. C'est la section contenant tous nos liens et ce titre juste ici. Ciblons à nouveau cette section en dehors de la requête multimédia. Plus d'informations sur l'emballage à l'écran. Encore une fois, nous utiliserons la flexbox. Nous allons définir la direction de flexion de manière à ce qu'elle se situe dans une ligne de texte de colonne située au centre. Nous pouvons le faire ressortir en ajoutant de la couleur de fond. Rendez-la légèrement différente de la couleur blanche actuelle. Optez pour le double F, le double E, le D2. Actuellement, cet arrière-plan entoure uniquement le contenu Pour obtenir la largeur totale de la page, nous pouvons modifier la largeur pour qu'elle soit de 100 VW. Nous y voilà. Pour donner un peu d'espace à cela, ajoutez simplement un peu de rembourrage d'une RAM. Nous pouvons également trop modifier l'arrière-plan de cette section, alors copions ceci. Si nous revenons à la source, aux actifs, au fichier main.css. En fait, nous pouvons simplement supprimer l'arrière-plan du bloc d'informations et celui-ci correspondra désormais au reste du contenu. Essayons les sections et la page d'accueil, et assurons-nous que vous n' aurez aucun problème. En fait, ici, nous devons ajouter l'arrière-plan. Collez ceci dedans. Nous y voilà. Cela fonctionne désormais pour nos deux points de vue. 48. Terminer l'aperçu d'administrateur: Continuons avec les touches finales dans la section d'administration. À l'intérieur, nous allons utiliser la boîte flexible et placer de nouvelles pizzas côte à côte sur les composants du menu sur une vue plus large. Passons à la vue d'administration, qui se trouve dans le dossier des vues. Pour le moment, nous n' avons pas beaucoup de contenu, nous affichons simplement le titre du niveau 3 et les trois composants Il s'agit donc de la section de notre nouvelle pizza et de la composante pizzas. Découpez-le, enroulez-le dans un div, collez-le à nouveau dedans et donnez à ce div la classe de ligne. En bas, créez la section de style. Nous allons également étendre cela à nos composants. Sélectionnez la ligne. Dans la section initiale, nous allons définir le type d'affichage comme étant flexible, une nouvelle direction flexible étant une colonne. Cela fonctionnera sur le petit écran. Je réduirais cela et nous pouvons les voir dans le sens de la colonne. Configurez ensuite une requête multimédia à l'aide de la règle des médias artistiques, dans laquelle nous appliquerons tous les styles contenus ici sur 900 pixels. Sélectionnez notre ligne, ou vous pouvez remplacer la direction flexible par une ligne. Les écrans plus petits comporteront une colonne. L'étirement doit être supérieur à 900 pixels. Ils sont désormais côte à côte. Nous avons également besoin que ces deux composants soient un peu plus larges, afin qu'ils couvrent toute la taille de la page. Nous pouvons accéder à la nouvelle pizza ainsi qu'aux pizzas à l'intérieur des composants sous Administration. Celui-ci contient la section classe d'administrateur. Si nous mangeons des pizzas, nous pouvons voir que celle-ci le fait aussi. Entrons dans le dossier assets, dans main.css. Faites une recherche et nous avons déjà référence de la section d'administration juste ici. Définissez la valeur de flexion pour qu'elle soit égale à un. Toutes ces sections essaieront d' occuper le même espace disponible. Comme il s'agit d'une zone d'administration, nous souhaitons également introduire certaines mesures pour nous assurer que seules les bonnes personnes peuvent consulter cette page. Pour l'instant, nous allons nous assurer qu'ils sont connectés en important d'abord l'utilisateur. Revenez à la vue d'administration, dans le script. Nous devons importer notre utilisation du composable dans lequel nous pouvons extraire et stocker dans une constante les données de nos utilisateurs. N'oubliez pas que les données utilisateur sont soit égales à notre objet qui contient toutes les informations utilisateur, soit égales à nulles. Nous utilisons Auth pour appeler notre fonction. Par conséquent, les données utilisateur peuvent être utilisées avec un rendu conditionnel pour afficher et masquer le contenu de la page. Reprenons tout ce qui se trouve dans notre modèle, le plaçons dans un div comme wrapper, y rajoutons le contenu, puis utilisons le rendu conditionnel avec v-if, où nous pouvons vérifier si les données utilisateur sont présentes. Si nous sommes connectés, nous devrions pouvoir voir toute la section d'administration. Sinon, créez un élément p, qui sera destiné à la section v-else, avec le message indiquant que vous devez être administrateur pour voir cette zone. Voilà notre message. Avant de nous connecter, nous allons simplement ajouter du style à cette section en ajoutant une classe warning_msg. Nous allons le personnaliser dans une seconde. Mais avant cela, nous pouvons également ajouter un message de bienvenue si l'utilisateur est connecté. Juste au-dessus du titre de niveau 3, ajoutez du texte avec la classe user_email. Les textes sont les bienvenus. Ensuite, à l'intérieur des doubles accolades, nous pouvons accéder à nos données d'utilisateur. Email. N'oubliez pas que les données utilisateur ne seront pas toujours un objet, elles peuvent parfois être nulles. Par conséquent, nous pouvons utiliser chaînage facultatif JavaScript avec un point d'interrogation pour n'afficher cet e-mail que s'il est défini. Enfin, le style de notre e-mail utilisateur et du message d'avertissement ne font pas partie de la requête multimédia, donc user_email et warning_msg. Marge d'un rebord, il suffit de le pousser hors du coin. Essayons de nous connecter. Tout le monde, le contenu est maintenant visible et nous pouvons également voir un message de bienvenue en haut. De plus, juste pour dépasser le niveau 3, nous pouvons également appliquer le même montant de marge. Ajoutez le H3. Bien, ça a l'air beaucoup mieux maintenant. Passons à notre bouton d'inscription et cliquez dessus. Cela prend maintenant effet et supprime notre section d'administration de l'affichage. 49. Restriction de nouvelles pizzas: Une autre vérification que nous pouvons effectuer est de voir si notre utilisateur est connecté avant de pouvoir ajouter une nouvelle pizza à la base de données. Actuellement, nous n'avons aucun moyen de vérifier si l'utilisateur est un utilisateur régulier ou un administrateur. Mais nous y reviendrons plus tard, et nous allons le faire une fois de plus pour importer nos données utilisateur dans nos nouveaux composants de pizza. Composants, administration, nouvelle pizza. Placez une importation en haut à partir de notre composable. Importez, utilisez Auth depuis notre fichier composable. Ensuite, nous pouvons extraire les données de l'utilisateur. Si nous faisons défiler la page vers le bas, nous pouvons voir que nous avons cette fonction Ajouter les fonctions de notre nouvelle pizza à la base de données. Avant de l'ajouter, nous pouvons vérifier si l'utilisateur est connecté. Nous dirons s'il n' y a pas de données utilisateur, et puisque nous sommes dans le script, nous devons également accéder à la valeur. Si c'est faux, c'est-à-dire cela sera égal à null si l'utilisateur n'est pas connecté. Nous pouvons maintenant quitter cette fonction avant d' ajouter notre pizza à la base de données. Dans les circonstances actuelles, il va être assez difficile de tester cela. Parce que si nous étions déconnectés, nous ne pouvons actuellement pas voir le composant Ajouter une nouvelle pizza pour essayer. Ce que nous pouvons faire à titre temporaire est de désactiver le rendu conditionnel dans l'administrateur. Passez à la vue d'administration. Ensuite, dans les modèles, nous allons commenter les instructions if, le div de clôture, et nous devrons également créer la zone v-else. Cela nous donne désormais accès à la section d'administration lorsque nous ne sommes pas connectés actuellement. Ajoutons, et maintenant, chaque fois que nous essayons d'ajouter une nouvelle pizza, nous ne voyons pas le message indiquant que cela a été ajouté, et nous ne voyons pas non plus cela ajouté dans la section du menu. Bien. Tout cela fonctionnant, nous pouvons maintenant rétablir le rendu conditionnel dans la vue d'administration. Nous ne sommes pas connectés, donc tout le contenu devrait disparaître. Ensuite, nous nous en tiendrons à ce sujet de l'objet utilisateur en l' ajoutant à nos commandes. 50. Ajouter l'utilisateur aux commandes: Les prochaines étapes sont toutes liées à toutes les commandes. Ce que nous allons faire, c'est nous assurer que l'objet utilisateur figure sur notre commande avant de le transférer vers la base de données. Nous nous assurerons également que l'utilisateur est connecté avant de créer une nouvelle commande, et pour ce faire, nous passerons au panier d'utilisation composable et intégré à un utilisateur. Composables, UseBaskets, et ce fichier contient la fonction AddNewOrder. Mais avant de pouvoir réellement tester si l'utilisateur est connecté, nous devons également importer les données utilisateur depuis notre composable externe. Ainsi, n'importe quel composable peut être importé à l'intérieur d' un autre composable, ce qui rend ces fichiers vraiment flexibles. Comme nous le faisons pour n'importe quel composant, nous pouvons importer notre composable. C'est UseAuth, et c'est le cas. /, UseAuthf puisqu'elles se trouvent dans le même répertoire, puis dans notre fonction, nous pouvons extraire nos données utilisateur de notre fonction UseAuth. L'identifiant ici est que nous allons vérifier s' il y a un utilisateur connecté. Si c'est le cas, nous les ajouterons à la commande, sinon, nous ajouterons un message utilisateur pour se connecter. Et nous devons stocker ce message dans une variable ou une constante. Donc, const, SignInMessage est égal à une référence avec une chaîne vide comme valeur initiale jusqu'à la fonction AddNewOrder et nous pouvons abord vérifier si l' utilisateur est connecté. Dans la section d'essai, nous indiquerons si, UserData.value, ouvre les accolades. Si c'est vrai, nous voulons exécuter du code à l'intérieur Si ce n'est pas le cas, nous créerons une section L. La section L mettra à jour le SignInMessage, qui renverra à l'utilisateur un message lui demandant de se connecter pour passer une commande. Ensuite, dans notre section if, nous pouvons copier ou découper la section de commande jusqu'au texte de notre panier, sans le contenu d'origine. Placez-le ensuite dans la section if, afin qu'il ne s'exécute que si l'utilisateur est connecté. C'est tout ce que nous devons faire pour le moment dans la fonction, nous pouvons ensuite renvoyer notre SignInMessage, qui peut ensuite être importé dans notre vue de menu. En haut, nous avons déjà accès au panier d'utilisation , nous pouvons donc simplement saisir la fin de notre message de connexion. Ensuite, affichez ce message dans notre modèle, faites défiler la page jusqu'au bouton de commande, qui se trouve dans la section panier, recherchez ce bouton avec le texte du bouton de placement, puis juste au-dessus, ajoutez un nouvel élément P, sorties, notre SignInMessage. Nous pouvons maintenant tester cela lorsque nous sommes connectés et déconnectés. Comme on nous a demandé de nous connecter, nous ne sommes pas connectés actuellement. Nous pouvons le confirmer auprès de l'administrateur. Essayons de passer une commande, cliquez sur certains articles. Nous y voilà. Veuillez vous connecter pour passer une commande, cliquez sur notre modèle et nous pourrons nous connecter. Connectez-vous, cliquez à nouveau sur « Passer la commande » et tout est prêt. Toutefois, si cela fonctionne, déconnectez-vous et effacez la page, puis ajoutez de nouvelles pizzas à la commande. Encore une fois, si nous avons essayé de passer une commande, nous verrons toujours notre message juste ici. Vous avez peut-être déjà remarqué que dès que nous nous connecterons via le modal, ce message restera intact. Démontrons-le simplement. Si nous nous reconnectons, cliquez sur « Se connecter ». Le fait de conserver ce message intact peut semer la confusion chez l'utilisateur. Ils peuvent penser qu'ils ont encore besoin de se connecter. Tout cela signifie une erreur dans le processus de connexion. Pour y remédier, view fournit une méthode de surveillance qui déclenchera une fonction de rappel cas de modification d' un état réactif tel que notre utilisateur. En pratique, cela signifie que si nous revenons à notre panier d'utilisation composable en haut de la page, nous pouvons alors surveiller nos données utilisateur et, dès que des modifications se produiront, nous pouvons exécuter une fonction de rappel. L'observateur a été automatiquement importé depuis le package de visualisation. Si le vôtre ne s'est pas produit automatiquement, assurez-vous de l'ajouter. Ensuite, chaque fois qu'une modification se produit dans d'autres données utilisateur, la fonction s'exécute et nous pouvons effacer notre SignInMessage.value en la définissant comme une chaîne vide. Revenons à notre menu et rafraîchissons. Nous pouvons constater que tout cela prend effet sur toutes les nouvelles pizzas. Passez une commande. Cela fonctionne, car nous sommes connectés, déconnectons, nous passons une commande lorsque nous sommes déconnectés et nous voyons notre message d'erreur. Maintenant, si nous essayons de nous connecter une fois de plus, connectez-vous. Dès que cela se produit, nous supprimons le message d'erreur afin que l'utilisateur soit désormais libre de passer sa commande. Bien, il ne nous reste qu'à ajouter l'utilisateur à la commande. Revenons au panier d'utilisation composable puis à la fonction AddNewOrder. Juste dans la section if, oubliez pas que les données utilisateur, que nous récupérons depuis Firebase, contiennent de nombreuses informations et de nombreuses propriétés dont nous n'avons pas besoin. Pour simplifier, je vais créer un nouvel objet utilisateur et ne placer que l'identifiant et l' adresse e-mail de l'utilisateur, la propriété ID, nous pouvons récupérer à partir de UserData.value.UID et de l'e-mail de l'utilisateur. Celui-ci provient du UserData.Value.Email. Ensuite, ci-dessous, lorsque nous créons notre commande, nous pouvons également transmettre l' utilisateur. Maintenant, sauvegardons ceci. Essayons de passer une nouvelle commande. Passez votre commande, accédez à la console, à notre base de données Firestore et consultez les commandes. Si nous faisons défiler la page vers le bas, nous pouvons voir que notre objet utilisateur est également joint à la dernière commande que nous venons de passer. 51. Filtres et propriétés mondiales: Vous remarquerez que si nous entrons dans la section menu, commençons à ajouter des pizzas à notre panier. Si nous commençons à augmenter la quantité, augmentons cette quantité à six et voyons que nous avons un formatage incohérent. La première est réduite à une décimale, la seconde à deux décimales et le total de la commande est foiré. Si vous avez déjà utilisé la version 2 de Vue vous avez peut-être utilisé ce que l'on appelle un filtre. Un filtre était disponible pour fournir une mise en forme simple du texte et était idéal pour créer des éléments tels que des filtres de devises. Cependant, dans la version 3 de Vue, les filtres ne sont plus disponibles. Ils peuvent être remplacés par quelque chose comme une méthode ou une propriété calculée à l'intérieur d'un composant. Cependant, si vous souhaitez que cela soit disponible dans le monde entier afin que nous puissions le réutiliser, nous pouvons également utiliser un filtre comme celui configuré dans Vue 3 en accédant à ce que l'on appelle les propriétés globales. Les propriétés globales sont un objet que nous pouvons ajouter qui est disponible dans tous nos composants pour que nous puissions le réutiliser. Veillez cependant à ne pas exagérer et tout rendre accessible dans le monde entier. Mais un filtre de devises dont nous pouvons utiliser plusieurs composants est un bon cas d'utilisation. Passons au fichier main.js et configurons cela. Donc, juste en dessous de l'endroit où nous créons notre application, méthode consiste à appeler app.config.global.properties, puis nous pouvons donner cette propriété un nom tel que Dark.mode et nous le définirons comme vrai. Nous pouvons maintenant accéder à la propriété DarkMode à l'intérieur de n'importe lequel de nos modèles , qui agit comme une variable. Passons à la vue du menu et n'importe où dans ce modèle convient. Nous l'insérons à l'intérieur des doubles bretelles bouclées, maintenant nous le voyons en haut. C'est un très bon cas d'utilisation pour des chaînes simples ou des booléens comme celui-ci et nous pouvons y accéder dans n'importe quel composant. Nous pouvions également en configurer autant que nous le voulions, nous pouvions simplement les dupliquer et créer différentes variables. Ou nous pouvons également ajouter plusieurs propriétés à l'intérieur d'un objet. Conservons donc cette section mais supprimons la variable, et nous allons créer un objet appelé filtres, puis à l'intérieur des accolades, nous pouvons ajouter autant de filtres que nous le souhaitons. Pour notre cas d'utilisation, nous allons créer une fonction appelée FormatMoney. FormatMoney doit prendre en compte la valeur que vous souhaitez formater, puis nous pouvons renvoyer la nouvelle valeur formatée. Un moyen simple de le faire est d'appeler Value.toFixed et cela corrigera ce problème à deux décimales. l'avons également mentionné, puisqu' il s'agit d'un objet, nous pouvons également y ajouter plusieurs propriétés . Mais même si FormatMoney est tout ce dont nous avons besoin, revenons à notre menu et nous pouvons remplacer la tarification par notre filtre. Si vous le souhaitez, vous pouvez l'ajouter à la section du menu, mais actuellement, nos numéros sont déjà ajoutés à la base de données, donc cela devrait toujours s' afficher correctement. Le problème se produit lorsque nous ajoutons plusieurs pizzas et commençons à multiplier les nombres. Ce que nous pouvons faire, c'est aller dans la section panier, nous avons le total de la commande, nous avons ce prix juste ici, donc au lieu cela, nous voulons supprimer cette multiplication , accéder à nos filtres.FormatMoney. FormatMoney était une fonction qui prend une valeur à formater. Nous devons donc également transmettre cette valeur dans laquelle se trouve la multiplication que nous venons de supprimer. Ce sont les totaux des lignes et nous devons également effectuer le total de la commande. Supprimez donc cela, puis nous accèderons à Filters.ForfMatMoney, recollez-le dedans. Essayons ça. Augmentez la quantité et vous pourrez voir quand nous dépasserons six, ce qui était le problème auparavant, toutes correctement formatées à deux décimales. Comme notre filtre est un objet global, nous pouvons également l'utiliser dans d'autres composants où nous affichons des valeurs monétaires. Passons maintenant aux composants, l'administration et au orders.view. Accédez à notre tableau, tout comme dans le panier, nous multiplions également le prix par la quantité. Nous pouvons donc faire de même ici, nous pouvons dire Filters.FormatMoney. Transmettez-le, essayons-le dans la section d'administration. Cela semble également correct si nous examinons tous les totaux sur la droite. Il s'agit d'un moyen très simple mais utile de répéter des tâches simples dans notre application. formatage de sa devise est cependant un peu basique et nous pouvons l' améliorer en utilisant l'objet JavaScript Intl. Il s'agit de l'API d' internationalisation JavaScript qui fournit, entre autres fonctionnalités , un formatage des nombres, de l' heure et de la date basé sur la langue . Améliorons cela en revenant à notre fichier main.js. Nous pouvons remplacer notre exemple actuel juste après l'instruction return et nous déclarerons que nous voulons un nouveau Intl.NumberFormat. NumberFormat est l'une des nombreuses méthodes disponibles sur les objets Intl et ce NumberFormat permet un formatage numérique sensible à la langue , ce qui est idéal pour les devises. Ensuite, à la fin de la chaîne la méthode de formatage qui prend en compte la valeur que vous souhaitez formater. Dans notre cas, nous utilisons toujours cette valeur qui est transmise à la fonction plus, la méthode de format numérique prendra également en compte certains arguments pour spécifier les paramètres régionaux que nous utilisons , ainsi prendra également en certains arguments pour spécifier que certaines options. abord, les paramètres régionaux de l'utilisateur final qui définissent le style de formatage de la devise. La raison pour laquelle nous voulons le faire est que les devises sont affichées et formatées différemment selon les régions du monde. Par exemple, certains pays utilisent des décimales ou des virgules comme séparateurs. Disons que 10 000 peuvent ressembler à ceci ou cela et que certains pays utilisent également des symboles spéciaux. Si nous l' enregistrons actuellement et que nous passons au navigateur, actualisons. Nous pouvons voir sans ajouter d' options différentes à l'intérieur. Par défaut ma devise est à deux décimales et utilise la virgule entre les deux décimales. Mais si nous ajoutons, par exemple, une locale allemande qui est une valeur de chaîne de tiret au-dessus de case DE, dès que vous l'enregistrez , elle est mise à jour et séparée par une virgule à la place. mon cas d'utilisation, je vais le remplacer par l'anglais, dash GB, ce qui devrait revenir à la décimale. Ensuite, séparés par une virgule, nous pouvons également ajouter un objet d'options. À l'intérieur de cet objet, nous pouvons transmettre diverses informations telles que le style et les options monétaires. Le style sera égal à la chaîne de devise, puis nous devons également transmettre la devise que vous souhaitez formater. Cela peut être n'importe quelle devise telle que l'euro, l'euro, nous pouvons le voir ici Supprimez également ce symbole $ en un instant, cela peut être le $, je pense que l'USD. Retrouvez-nous juste ici, mais le mien sera en livres. En plus de la monnaie, elle peut également être utilisée pour d'autres choses. Nous pouvons inclure des unités de mesure et des pourcentages, mais ces options sont idéales pour notre cas d'utilisation et n'hésitez pas à les configurer avec la devise de votre choix. Juste pour terminer , revenons à la vue par points des commandes. Nous allons déplacer le symbole monétaire que nous avons codé en dur le menu Nous devons également faire de même ici et ici. La vue du menu, supprimez-la. Presque là, nous n' avons plus que la section du menu qui se trouve juste au-dessus. C'est l'option sans prix, nous pouvons déplacer le symbole monétaire, le publier, accéder à nos filtres, nous avons FormatMoney , le recoller dedans. Notre mise en forme des nombres a maintenant pris effet. 52. Mises à jour en temps réel: Lorsque nous mettons à jour notre site, certaines choses sont mises à jour immédiatement et d'autres non. Par exemple, si nous allons voir notre administrateur et que nous essayons d' ajouter une nouvelle pizza, nous n'aurons plus notre administrateur et que nous essayons d' ajouter une nouvelle pizza, que toutes les informations fictives pour le moment. Cliquez sur « Ajouter ». Ensuite, cette nouvelle pizza n' est pas automatiquement mise à jour dans le menu tant que nous n'avons pas cliqué sur « Actualiser ». Mais si nous supprimons une pizza en cliquant sur ce X, l'article est supprimé de l'administrateur. Pourquoi pensez-vous que cela se produit ? Eh bien, pour voir cela, nous devons examiner certains fichiers plus en détail. abord, si nous accédons à la section d'administration des composants, puis que nous ouvrons NewPizza.vue, nous avons cette fonction pour ajouter une nouvelle pizza à notre base de données. Tout ce que nous faisons ici, c'est effectuer quelques vérifications, puis nous ajoutons notre document à notre base de données, nous mettons à jour le message. Alors, si cela réussit, tout va bien. La pizza est stockée dans la base de données, mais notre application n'est informée par Firebase d'aucun ajout. Cependant, si nous passons à ce que nous utilisons des pizzas composables et que nous examinons notre fonction GetPizzas. Actuellement, après avoir ajouté notre pizza, nous devons actualiser la page, car cela appellera à nouveau notre fonction GetPizzas, mettant ainsi à jour le menu de droite. Cela semble logique, mais souvenez-vous que lorsque nous avons supprimé une pizza, l'application a été mise à jour avec les modifications. La différence entre ces deux situations est que si nous accédons à notre composable UsePizzas et que nous recherchons DeletePizza, la principale différence est que dès que nous avons supprimé la pizza, nous appelons à nouveau notre fonction GetPizzas qui transmettra les informations correctes aux composants de notre menu. Si nous le voulions, lorsque nous ajoutions une nouvelle pizza, nous pourrions également appeler à nouveau notre fonction GetPizzas. Mais il existe également une meilleure façon de faire les choses et c' est d'utiliser une fonctionnalité en temps réel de Firebase. Cela signifie que dès que nous apportons des modifications à notre base de données, l'application est informée de ces modifications. Par exemple, lorsque nous passons à l'administrateur et que nous ajoutons une nouvelle pizza, nous cliquons sur le bouton Ajouter et celle-ci est ensuite envoyée dans notre base de données. Dès que cela sera réussi, Firebase communiquera personnellement à notre application les informations mises à jour. Ensuite, notre menu sera mis à jour automatiquement. Pour ce faire, nous utilisons une méthode appelée snapshot. Passons à tout ce que UsePizza est composable. Nous pouvons l'importer depuis notre fistore, donc sur Snapshot, je vais le faire dans GetPizzas. Nous allons maintenant commenter tout le code existant que nous utilisons pour récupérer nos pizzas dans la base de données et le remplacer par la méthode OnSnapshot. transmission de snapshots et d' OnSnapshot prend également en compte la référence de la collection de pizzas qui est stockée dans DBPizzasRef. Ceci est suivi d'une fonction que nous allons exécuter chaque fois qu'il y a un changement dans la base de données. La fonction va récupérer les documents qui nous sont renvoyés. Comme le nom des documents correspond ici à celui des documents que nous avons parcourus en boucle auparavant, nous pouvons maintenant décommenter cette section, publier, puis la coller dans notre fonction. Cela revient à faire exactement la même action que précédemment. Nous allons récupérer les documents. Nous les parcourons en boucle, nous créons de nouveaux objets à pizza. Puis en dessous pour AllPizzas ref. Dès que cette mise à jour est effectuée, toutes les vues ou tous les composants qui s'appuient sur ces données sont mis à jour. Essayons-le donc dans l'administration. Nous allons donc passer à Ajouter une nouvelle pizza, cliquer sur « Ajouter », et dès que nous le ferons, notre application est mise à jour, mais nous constatons un petit problème. Non seulement nous recevons les pizzas gratuites qui sont renvoyées à partir de la base de données, mais celles-ci sont également ajoutées aux deux pizzas existantes que nous avons déjà. Un moyen simple de le faire est de vider notre tableau AllPizzas avant de récupérer les informations. Si nous allons dans la section d'essai, nous pouvons voir que nous avons déjà effacé la valeur existante et qu'il s'agit certainement d'un tableau vide. Tout ce que nous avons à faire est de déplacer cela dans notre instantané. Sauvegardons-la et rafraîchissons-la en tant que pizzas existantes gratuites. Ajoutons-en un de plus. Cliquez sur « Ajouter » et notre application est désormais informée de tout changement. Dans cet esprit, nous pouvons également revenir à notre fonction DeletePizza où nous pourrions supprimer l'appel manuel GetPizzas. Je vais jeter un œil à notre fonction DeletePizza. Nous n'avons plus besoin d'appeler GetPizzas manuellement, c'est fait pour nous. Maintenant, si nous supprimons également pizza et que notre administrateur est toujours mis à jour lorsque nous supprimons une pizza , la prochaine étape répétera également ce processus pour nos commandes en cours. 53. Mises à jour de commande en temps réel: Pour mettre à jour les commandes en temps réel, suivez le même schéma que pour les pizzas. Tout d'abord, nous allons utiliser orders.js dans le Composable. Tout en haut, nous devons importer notre propre méthode de capture instantanée. Ensuite, nous pouvons remplacer la méthode get docs existante que nous utilisions sur Snapshot. Nous irons chercher des commandes, qui se trouvent juste ici. Nous avons toujours besoin de ce QueryData, qui se trouve au sommet. Mais nous commenterons tout par la suite, de l'obtention la documentation au bas de notre section d'essai. Nous appellerons OnSnapshot, qui va prendre en compte nos données QueryData. Ensuite, une fonction à exécuter après chaque modification. Encore une fois, pour assurer la cohérence et réutiliser nos données, nous appellerons les données disponibles dans les documents. Ensuite, notre code existant, nous pouvons le décommenter, le mettre hors de propos, le placer dans notre fonction. Nous n'avons plus besoin de ces documents. Nous pouvons les supprimer car nous les transmettons automatiquement à notre fonction. Ensuite, pour éviter le même problème que nous avons rencontré avec nos pizzas, si vous vous souvenez du fichier « Utiliser des pizzas », nous faisons défiler la page vers le bas pour surutiliser la fonction pizza. À l'intérieur, nous avons dû réinitialiser la valeur de toutes les pizzas pour qu'elle soit vide, puisque nous avions les pizzas existantes. Ensuite, après chaque mise à jour, l'ensemble complet de pizzas a été ajouté à nos valeurs existantes, plutôt que de le remplacer. Faites de même pour les commandes d'utilisation, accédez à OnSnapshot où nous pouvons accéder à allorders.value. Cela équivaut à un tableau vide. Pour tester cela, nous devons ouvrir notre projet dans deux onglets distincts. Nous les placerons côte à côte. La raison pour laquelle nous faisons cela est que nos commandes sont passées dans les composants du menu, mais nous les visualisons dans les composants d'administration. Si nous devions simplement ajouter une nouvelle commande, puis cliquer sur « Admin », les commandes en cours seraient automatiquement affichées. Nous ne verrions pas la fonctionnalité en temps réel, mais nous pouvons le voir si nous accédons au menu et créons une nouvelle commande. Nous avons cinq commandes, cliquez sur « Valider ». Vous pouvez voir tout de suite que cela fait grimper à six nouvelles commandes. Essayons-en une autre. Cela passe à sept, et notre dernière commande est maintenant en bas de la liste. 54. Se désabonner des mises à jour: Lorsque vous utilisez OnSnapshot, le processus d'écoute de nos mises à jour est continu. Cependant, il se peut que nous n'ayons plus besoin de mises à jour. Nous avons besoin d'un moyen de détacher cet auditeur pour libérer toutes les ressources. Cela est relativement simple. Lorsque nous utilisons OnSnapshot, une méthode de désabonnement est renvoyée, que nous pouvons ensuite appeler dans notre application. L'un des cas d'utilisation pourrait se situer dans l'interface administrateur. Par exemple, si nous descendons vers le bas, nous sommes actuellement à l' écoute de toutes nos commandes en cours. Mais dès que nous quittons cette page et que nous en visitons une nouvelle, nous n'avons plus besoin d'écouter les nouvelles commandes. Nous pouvons détacher cet écouteur et libérer toutes les ressources du navigateur. Pour ce faire, utilisez le fichier orders.js, lequel nous pouvons stocker la fonction de désabonnement dans une variable. Comme mentionné, onsnapshot renverra une fonction de désabonnement, que nous pouvons stocker dans une variable ou une constante. Actuellement, le problème est que cette constante désabonnée est définie dans cette fonction. Nous avons besoin d'un moyen d' y accéder à l'extérieur. Une façon de le faire est de créer une nouvelle référence juste à l'extérieur d'ici. Nous dirons const, désabonnez-vous des commandes. Par défaut, il s'agira d'une référence vide. Nous pouvons le mettre à jour avec la valeur de désabonnement. Passons à la réception des commandes. en bas de la section du plateau, juste au-dessus du bloc de saisie, nous pouvons récupérer notre référence, qui est désabonnée de toutes les autres, et définir la valeur comme étant égale à unsubscribe. Nous avons maintenant une fonction de désinscription de la plus ancienne, que nous pouvons appeler lorsque nous n'avons plus besoin d'écouter les commandes. Nous pouvons le faire à l'intérieur d'un hook de cycle appelé unmounted. Nous devons l'importer depuis la bibliothèque Vue. Nous avons déjà OnMounted, qui s'exécute dès que le composant est monté sur le DOM, puis OnUnmounted dès que nous partons. Nous allons placer cela dans OnUnmounted. Cela va exécuter une fonction. Nous pouvons le tester à l' aide d'un journal de console qui permet simplement d'intégrer les connaissances et, disons, de les démonter. Accédez ensuite à notre référence, qui est désabonnée de la valeur du point des commandes. Nous appellerons cela une fonction. Passez à l'administrateur et nous ouvrirons les outils de développement dans la console. Ensuite, si nous démontons ce composant en passant à une autre page, nous voyons le journal de notre console. Cela devrait également faire appel à notre fonction de désabonnement. 55. Ajout de nouveaux utilisateurs: Notre application permet actuellement d' inscrire de nouveaux utilisateurs. Mais tout nouvel utilisateur qui s'inscrit peut accéder à l'intégralité de notre site. Cela inclut n'importe laquelle de nos pages et, plus important encore, la section d'administration. Nous avons besoin d'un moyen de configurer nos utilisateurs pour n' autoriser que les administrateurs autorisés à accéder à cette section. Firebase dispose d'une solution pour contrôler l' accès des utilisateurs à l'aide de revendications personnalisées. Si vous utilisez une application de production, c'est une excellente solution et vous pouvez trouver plus d'informations en cliquant sur ce lien ici. Les demandes personnalisées doivent être configurées côté serveur pour des raisons de sécurité. Nous pouvons les configurer à l'aide de Firebase Cloud Functions. Malheureusement, les fonctions Cloud nécessitent une mise à niveau vers un plan payant. C'est pourquoi nous allons utiliser une approche différente. Cela impliquera de créer à l'intérieur de notre base de données une collection d'utilisateurs. Chacun de ces documents sera lié à un utilisateur dans notre section d'authentification Nous utiliserons ce nom d'utilisateur comme identifiant du document, comme c'est le cas ici pour nos commandes. Mais cela signifie également que nous pouvons créer un nouvel enregistrement utilisateur qui contiendra des informations supplémentaires. L'une de ces informations sera le rôle de l'utilisateur. Dans le passé, nous avons créé nos pizzas et nos commandes dans le fichier firebase.js. Nous avons créé une référence à chacune de ces collections. Nous les avons ensuite utilisés pour créer nos nouveaux documents. Par exemple, utilisez des paniers et nous avons créé une nouvelle commande avec la fonction AddNewOrder. Nous avons utilisé la méthode AddDoc. Ceci est renvoyé à cette référence, à une nouvelle commande. Mais l'essentiel à noter ici lorsque vous utilisez AddDoc est que nous n'imposons pas de nouvel identifiant pour les documents. Chacun de ces documents possède un identifiant généré de manière unique. Mais au lieu de cela, nous voulons que la collection de notre utilisateur ait l'identifiant du document qui correspond à notre utilisateur qui correspond à notre utilisateur dans la section d'authentification, qui se trouve ici. Au lieu d'utiliser la méthode AddDoc, nous allons utiliser quelque chose appelé SetDoc. Cela nous permettra de transférer de nouvelles données vers une collection et de définir notre propre identifiant que nous souhaitons utiliser. Pour ce faire, nous exportons notre base de données dans notre fichier firebase.js , que nous pouvons désormais utiliser dans le fichier use of.js. Sautez dans ce composable. Nous pouvons maintenant importer les articles dont nous avons besoin. La première, nous devons importer le Doc depuis Firebase. De plus, la méthode dont nous venons de parler était SetDoc. Ceci est disponible auprès de Firebase/Firestore. Nous devons également importer cette référence dans notre base de données. Importez une base de données à partir de notre fichier Firebase personnalisé. Ce sera la méthode que nous utiliserons pour créer nos nouveaux documents. Mais nous avons également besoin d'un moyen d'accéder à l'identifiant actuel de l'utilisateur connecté. Passons à la fonction d'inscription, qui se trouve juste ici. Lorsque nous créons un nouvel utilisateur avec cette méthode ici, elle renvoie un objet. Nous pouvons déstructurer la propriété de l'utilisateur pour accéder aux données dont nous avons besoin. Nous pouvons ensuite utiliser ces données juste en dessous pour créer un nouvel objet utilisateur. Const, UseObject. Nous pouvons ajouter des informations supplémentaires à notre utilisateur, qui seront stockées dans la base de données. abord, une propriété appelée CreatedAt, qui est égale à de nouvelles données JavaScript. Nous n'avons pas vraiment besoin de cette date pour notre projet, mais il est toujours utile de l'ajouter au cas où nous en aurions besoin à l'avenir. Nous pouvons également stocker l'e-mail de l'utilisateur, auquel nous pouvons accéder à notre fichier userobject.email. Ensuite, l'élément clé est une nouvelle propriété appelée IsAdmin. Pour commencer, nous allons configurer tous les nouveaux utilisateurs pour que la propriété IsAdmin soit égale à false. Toujours dans cette section d'essai, dès que l'utilisateur s'est inscrit et que cela a été réussi, nous fermerons également le modal en définissant la valeur ouverte du modal de connexion sur false. Traitement. Accédez à la valeur et définissez-la sur false. Juste en dessous de notre objet utilisateur, nous pouvons ensuite créer une nouvelle constante appelée NewDoc. Ce sera le nouveau document que nous allons diffuser dans Firebase en utilisant la méthode doc. La méthode Doc doit l'intégrer dans une référence à notre base de données, que nous venons d'importer. Ensuite, séparé par une virgule, le nom de la collection des utilisateurs. La troisième valeur sera l'ID utilisateur que vous souhaitez utiliser lors de la création de ces documents. Ceci est accessible depuis notre utilisateur. Accédez à la propriété UID. Ensuite, pour transmettre cela à Firebase, nous pouvons attendre SetDoc. Les documents, c'est une référence que nous avons créée juste ici. Transmettez-la comme première valeur. Ensuite, la deuxième valeur correspond aux données de notre enregistrement, qui sont stockées dans l'objet utilisateur. Juste pour clarifier ce que nous faisons ici, lorsqu'un nouvel utilisateur s'inscrit, ce nouvel utilisateur sera d'abord créé dans cette section d'authentification. Nous allons ensuite créer un nouvel objet utilisateur à l'aide de cet ID. Installez ces informations supplémentaires dans la base de données. Mais juste avant de tester cela, étant donné que certains utilisateurs se sont déjà inscrits dans la section d'authentification, qui n'est pas liée à notre base de données, nous devons d'abord effacer ces utilisateurs. Laissons ce compte. Celui-là aussi. Supprimez tous les utilisateurs existants. Cela ne devrait pas être tout ce dont nous avons besoin. Nous avons le nouvel objet utilisateur. Nos documents ont été placés dans le document. Nous devrions avoir toute notre base de données d'importations. Nous devons également nous assurer que cela est également exploité. Revenons à notre projet. Créez un nouvel utilisateur , cliquez sur S'inscrire. Passons à Firebase et à la section d'authentification, nous avons notre nouvel utilisateur. Notez l'ID utilisateur, qui commence par 08. Le vôtre sera différent, bien sûr. Accédez à la base de données en tant que collection de l'utilisateur, qui commence par la même référence de document. Cela va être utile car lorsque nous authentifierons notre utilisateur pour la première fois, nous pouvons avoir accès à son identifiant. Ensuite, nous pouvons également accéder à la propriété IsAdmin. Pour commencer, nous allons cliquer sur le champ IsAdmin. Les changements sont synonymes d'être vrais. Nous avons au moins un utilisateur administrateur. Nous allons ensuite créer un deuxième utilisateur avec la valeur IsAdmin définie sur false. Reconnectez-vous, créez un nouveau compte. Inscrivez celui-ci, voici notre deuxième compte avec IsAdmin défini comme faux. Nous avons maintenant deux utilisateurs avec des niveaux d'accès différents. Nous l'utiliserons dans notre application pour autoriser uniquement les utilisateurs administrateurs à accéder à notre section d'administration. 56. Récupérer les utilisateurs d'administrateur: La première étape pour n'autoriser qu' un accès administrateur à notre application consiste à récupérer l'utilisateur actuel de notre base de données et vérifier si la propriété IsAdmin est définie sur true. Comme nous allons récupérer les utilisateurs, nous pouvons créer une référence à la collection de bases de données dans notre fichier Firebase. Tout comme nous l'avons fait pour les pizzas et les commandes, nous allons créer DBUsersRef, qui redirigera vers la collection de nos utilisateurs. Dites ceci, puis dans le fichier useAuth.js. Cette astuce est à importer, et nous l'utiliserons très bientôt. Ensuite, dans notre fonction, nous allons créer une nouvelle référence appelée UserIsAdmin, qui sera initialement définie sur la valeur false. Cette valeur par défaut, false, sera mise à jour après la création de notre fonction. Cette fonction va récupérer nos données utilisateur, récupérer l'identifiant de l'utilisateur connecté, récupérer l'enregistrement de notre base de et vérifier si la propriété IsAdmin est définie sur true. Créons une fonction, qui sera asynchrone, appelée CheckAdminRole. Créez d'abord une instruction is dans laquelle nous pouvons vérifier si nos données utilisateur, qui sont celles-ci ici, .value, nous pouvons vérifier si elles contiennent l'uid. Nous ajouterons également le point d' interrogation car cette valeur peut parfois être nulle. Ensuite, à l'intérieur, nous pouvons récupérer les détails actuels de l'utilisateur dans la base de données. Nous pouvons le faire en créant un document avec la fonction doc à laquelle nous voulons accéder. Tout d'abord, nous allons accéder au DBUsersRef, qui est notre collection, puis nous pouvons accéder à un enregistrement particulier à l'aide de l'identifiant. Cet identifiant est récupérable à partir de notre fichier UserData.value.UID. Copiez, collez ceci. Il se trouve à l'intérieur d'une constante appelée DocRef. Ensuite, pour réellement demander ces informations, nous pouvons attendre une fonction appelée GetDoc. Nous transmettrons cette référence dans notre document à l'intérieur d'une constante appelée user. Ensuite, nous devons effectuer deux vérifications à l'intérieur d'une instruction is. Tout d'abord, accédez à notre méthode user.exists, cette méthode existe est disponible pour l'utilisateur, et vérifiez si un document est trouvé, puis à l'aide de la double esperluette, nous effectuerons également une deuxième vérification, afin de vérifier si le champ IsAdmin est défini sur vrai. Nous pouvons également le faire sur l'objet utilisateur, qui possède une méthode appelée data, qui nous donnera accès à l'une de ces propriétés, donc Data.IsAdmin. Si ces deux conditions sont vraies, nous pouvons alors mettre à jour notre UserIsAdmin.value pour qu'elle soit égale à true. Si ce n'est pas le cas, dans une instruction else, nous allons définir UserIsAdmin pour qu'il soit égal à false, alors collez-le dedans. Réglez ce paramètre sur false. Nous devrons également importer la méthode GetDoc depuis Firestore. Notre valeur UserIsAdmin sera utilisée dans d'autres fichiers et composants pour vérifier si l'accès est autorisé. Nous n'avons pas besoin de le remettre en bas de page. N'oubliez pas que tout ce que nous avons fait ici est de créer une nouvelle fonction. Nous ne l'avons pas encore appelé pour exécuter le code qu'il contient. L'endroit où exécuter ce code sera à l'intérieur de l'AuthObserver. Faites défiler l'écran jusqu'à OnAuthStateChanged et le code qu'il contient s' exécutera chaque fois qu'un changement d'utilisateur est détecté. Si j'ai accès à un utilisateur, si quelqu'un est connecté, nous vérifierons le rôle d'administrateur. Cependant, si l'utilisateur se déconnecte, nous souhaitons mettre à jour UserIsAdmin.value pour qu'il soit égal à false. Maintenant que tout est en place, passons à la vue d'administration. Nous pouvons accéder à UserIsAdmin, et n'oubliez pas que cette vérification actuelle pour notre section d'administration ne vérifie que si l' utilisateur est connecté. Il ne s'agit pas réellement de vérifier s'ils ont accès à cette page. Nous pouvons améliorer cela en le remplaçant par UserIsAdmin . Essayons ça. Dans la section d'administration, connectons-nous. Tout d'abord, il s'agit de l' e-mail saisi, qui n'est pas un administrateur. Ajoutez l'e-mail et le mot de passe, connectez-vous. Bien. Cela ne nous donne pas accès à la section d'administration. Déconnectez-vous et connectez-vous avec l'utilisateur administrateur. Connectez-vous et dès que cela se produit, nous vérifierons le rôle d'administrateur, ce qui est actuellement vrai. Cela mettra ensuite à jour la valeur de notre variable UserIsAdmin, qui nous donne accès. Nous pouvons cliquer sur Se déconnecter. Dès que cela se produit, la fonction AuthStateChanged s'exécute Définissez UserIsAdmin sur false, masquant ainsi notre section d'administration. 57. Mettre à jour les utilisateurs réguliers: Lorsque ce projet est terminé, nous le remettons au client. La dernière chose que nous voulons faire est de demander au client accéder à notre base de données et de mettre à jour cette propriété d'administration chaque fois que vous ajoutez un nouvel utilisateur ou de supprimer l' accès administrateur si un employé quitte l'entreprise. Ce que nous allons faire pour améliorer cela est de créer une nouvelle section dans l'administration, qui permettra à un utilisateur administrateur existant de la mettre à jour. Ce processus impliquera la création d'un nouveau composant d'administration, lequel l'utilisateur administrateur pourra saisir adresse e-mail de l'utilisateur que nous souhaitons mettre à jour. Comme cela sera également placé dans cette section d'administration, cela signifie également que seuls les utilisateurs administrateurs peuvent effectuer cette mise à jour. Une fois que nous aurons recherché l'utilisateur par e-mail, un message s'affichera pour indiquer si l'utilisateur est actuellement administrateur ou non. Enfin, nous aurons un bouton qui fera passer ce rôle d' administrateur sur vrai ou faux. Tout d'abord, créons notre nouveau composant dans le répertoire des composants et dans le nouveau fichier admin. Nous l'appellerons ToggleAdmin.vue. Ensuite, nous allons créer notre structure de base. Notre structure de base sera similaire à celle des autres composants d' administration. Nous pouvons accéder à l'une de ces autres sections d'administration et accéder au modèle. Copions les sections de ce modèle, donnez-nous la même structure. Collez-le dans notre Toggle.Admin. Simplifions les choses. Nous pouvons déplacer le formulaire, donc tout recadrer, du formulaire de fermeture à la balise du formulaire d'ouverture. Nous conserverons ces mêmes classes pour le style, mais uniquement le titre de niveau 3 sera Toggle Admin Privileges. Nous devons également mettre à jour le nom de cette variable. Nous ne l'avons pas encore créé, mais celui-ci s'appellera ShowToggleAdmin. Fabriquez cet étui en forme de chameau. Nous l'utiliserons également dans les autres emplacements et le créerons dans l'indice de la section de script. Cela utilisera également la configuration du script. Vous devez importer la référence depuis vue et créer notre constante qui est ShowToggleAdmin. Enveloppez ceci dans une référence avec la valeur par défaut true. Cela signifie que, par défaut, nous pourrons voir la section à l'intérieur de l'interface d'administration, puis nous pouvons cliquer sur le bouton Masquer lorsque nous n'avons pas besoin de voir cette section. Accédez aux vues et à la vue d'administration pour l'importer. Dupliquons celui-ci. Il s'agit de ToggleAdmin. Il s'agit également de ToggleAdmin. Placez-le juste en dessous de nos commandes. Accédez à la page d'administration, en bas, où nous pouvons voir d'autres composants. Revenons à ce ToggleAdmin.vue. Ce que nous allons faire, c'est créer deux nouvelles sections. Le premier sera un formulaire dans lequel nous pourrons trouver un utilisateur en saisissant son e-mail. Nous avons besoin d'une constante pour conserver cet e-mail. Cela peut être ref, donc const email, et la valeur initiale sera une chaîne. Nous voulons uniquement afficher ce contenu que nous allons maintenant placer si ShowToggleAdmin est égal à true. Sous l'en-tête, créez un nouveau div. Nous pouvons utiliser le rendu conditionnel avec le if. Nous n'afficherons cette section si showToggleAdmin est égal à true. Placez maintenant le formulaire. Ce formulaire sera assez simple. Nous allons créer un div, la classe de form_group. Ensuite, à l'intérieur, nous ajouterons une étiquette et également une entrée d'e-mail afin que l' utilisateur puisse effectuer une recherche par e-mail. Tout d'abord, l'étiquette ou e-mail avec un texte permettant de trouver l'utilisateur par e-mail. L'entrée. Il aura le type d'identifiant e-mail. Envoyez également par e-mail une valeur de texte d'espace réservé pour saisir l'e-mail. Ensuite, nous pouvons utiliser le modèle V, qui liera la valeur à notre e-mail en haut. Ensuite, juste en dessous de cette section div, nous placerons également un bouton qui permettra de soumettre ce formulaire. Le type de bouton déclenchera alors une fonction permettant de trouver notre utilisateur. Nous n'avons pas encore créé cette fonction, mais nous allons l'ajouter pour le moment. clic [inaudible] empêchera le comportement par défaut et déclenchera la fonction de désactivation, qui créera bientôt l'appel FindUser. FindUser doit également saisir cette adresse e-mail que nous avons enregistrée ici. Entrez le texte de la recherche d'un utilisateur. Ensuite, toutes les fonctionnalités nécessaires seront terminées et j'utiliserai off composable. En haut, la première chose à faire est de créer deux constantes supplémentaires. Le premier sera pour un message. Nous appellerons cela le ToggleAdminMessage, qui utilisera ref et une chaîne vide pour commencer, et une deuxième constante appelée SelectedUser. Il s'agira d'un conteneur destiné à héberger un utilisateur que nous recherchons. Nous allons définir cette valeur comme égale à ref et à la valeur initiale nulle. Ce ToggleAdminMessage contiendra la valeur, qui indiquera si l' utilisateur est administrateur ou non, ou s'il est introuvable avec l'e-mail fourni. Créons notre fonction, donc asynchrone appelée FindUser. Utilisons au-delà de l'adresse e-mail de l'utilisateur que nous voulons rechercher. Placer une section d'essai et un catch en tant qu'erreur. Ensuite, nous pouvons nous mettre au travail dans la section d'essai. La première chose que nous allons faire ici est d' effacer tous les messages que nous aurions pu avoir auparavant. Ceci est stocké dans ToggleAdminMessage.value. Définissez cette valeur sur une chaîne vide. Ensuite, nous créerons également une déclaration conditionnelle qui vérifiera si l'utilisateur est administrateur. N'oubliez pas que cette propriété est actuellement définie ici. Si cela est égal à false, l'utilisateur n'est pas autorisé à mettre à jour la propriété admin Nous allons donc quitter cette fonction. N'oubliez pas les éléments que nous appelons à ce sujet depuis la section d'administration. Cette section devrait déjà être protégée de toute façon, mais il ne s'agit que d'une vérification supplémentaire au cas où. Ensuite, nous utiliserons la méthode de requête Firebase. Cela nous permettra de rechercher un enregistrement particulier si de l'utilisateur est collection de l'utilisateur est stockée dans DBUsersRef. Ensuite, nous filtrerons cela en utilisant la méthode where. Nous voulons vérifier la propriété de l'e-mail et vérifier si elle correspond à une adresse e-mail particulière. adresse e-mail que nous voulons vérifier L'adresse e-mail que nous voulons vérifier est celle qui est transmise à toutes les fonctions à cette fin, ce qui permettra à tous nos utilisateurs de vérifier par rapport la propriété e-mail et de vérifier si c' est bien celle qui a été transmise depuis notre formulaire. Ce qu'il y a à l'intérieur d'une constante appelée données de requête. Ensuite, nous pouvons faire une demande à ce sujet depuis Firebase en attendant GetDocs. Analyser les données de la requête, puis les stocker dans une constante appelée user. Cet utilisateur sera la valeur renvoyée par Firebase. À l'aide de cet objet utilisateur, nous pouvons ensuite construire un nouvel objet utilisateur contenant uniquement les propriétés dont nous avons besoin. N'oubliez pas que lorsque nous avons examiné ces objets, que nous avons obtenus de Firebase par le passé, nous avons obtenu de nombreuses informations, la plupart ne nous sont pas nécessaires. Nous créons un nouvel objet utilisateur, plaçons dans l'identifiant, que nous pouvons récupérer auprès de notre utilisateur, les documents, et GetDocs va renvoyer plusieurs documents, mais nous ne devrions avoir qu' un seul utilisateur avec un e-mail unique. Pour cette raison, nous pouvons sélectionner le premier document avec le numéro d'index 0. Sélectionnez l'identifiant, puis dupliquons-le deux fois. La deuxième propriété est l'e-mail. Modifiez-les tous les deux. La troisième propriété dont nous avons besoin sera IsAdmin. Même en tant qu'objet utilisateur plus simple qui ne contient que les propriétés dont nous avons besoin. Nous pouvons ensuite définir l'utilisateur sélectionné pour qu'il soit égal à cet objet. N'oubliez pas la valeur. C'est le cas si tout est couronné de succès. Sinon, nous pouvons mettre à jour la SelectedUser.value pour qu'elle soit égale à null. Ensuite, mettez également à jour notre valeur ToggleAdminMessage pour qu'elle soit égale à une chaîne. Vous pouvez placer le message de votre choix ici, mais je dois dire qu'aucun utilisateur n'a été trouvé avec cet e-mail. Nous devons également importer ces méthodes depuis Firebase, que nous allons simplement utiliser. Nous avons la requête, nous avons où, nous avons GetDocs. En fait, juste avant cela, nous devons également appeler la méthode des données avant l'e-mail. La même chose avant IsAdmin. Cette fonction extraira les propriétés dont nous avons besoin de chaque document. Ainsi, sur ces importations situées en haut de notre Firestore, nous avons GetDocs, la requête et aussi où. Enfin, en bas de l' instruction return, nous pouvons renvoyer notre fonction qui était FindUser, la valeur SelectedUser et également le message qui était ToggleAdminMessage. Nous y sommes. Enregistrez ce fichier et nous venons de terminer. Ensuite, nous allons les importer et les réutiliser dans ToggleAdminComponents. 58. Mettre à jour les utilisateurs réguliers: Auparavant, nous avions créé une fonction permettant de rechercher un utilisateur par son e-mail, puis nous stockons cette valeur dans cette constante utilisateur sélectionnée. Nous allons maintenant nous diriger vers le composant ToggleAdmin.vue pour les importer tout en haut. Nous allons importer UseAuth, à partir du chemin du fichier @/composable/UseAuth. Nous allons ensuite extraire et stocker ces valeurs de retour dans une constante. Nous avons donc besoin de find, nous avons besoin du SelectedUser, et ToggleAdminMessage est également égal à UseAuth, appelez cette fonction, puis faites défiler la page vers le bas. Juste en dessous de cette section du formulaire, nous allons créer une deuxième section qui affichera l'utilisateur s'il en trouve un. Il comportera également un message indiquant si un utilisateur est actuellement administrateur ou non, puis un bouton pour déclencher une fonction permettant de changer la propriété d'administrateur. Créez donc div pour cette section. Nous voulons utiliser le if pour n'afficher cette section que si le SelectedUser est égal à une classe de selected_user. Vers l'élément p où je peux afficher le message de l'administrateur. Il s'agissait de ToggleAdminMessage , puis d'un deuxième élément p juste en dessous. Celui-ci aura une chaîne de texte où la valeur de l' utilisateur est actuellement définie en tant qu'administrateur ou non administrateur. Nous allons dire utilisateur, puis le transmettre à l' SelectedUser.L'e-mail est actuellement défini comme, puis nous voulons définir dynamiquement s'il est ou faux. La façon dont nous pouvons le faire est de sélectionner notre SelectedUser.IsAdmin. À l'aide de l'opérateur ternaire JavaScript, nous pouvons afficher le texte de admin si cela est vrai. Si ce n'est pas le cas, un texte indiquant que vous n'êtes pas administrateur. Le dernier élément à entrer dans cette section est un bouton. Vous pouvez maintenant cliquer sur ce bouton, évitez la valeur par défaut. Cela déclenchera une fonction que nous n'avons pas encore créée appelée ToggleAdmin. Nous reviendrons sur cette fonction dans un instant, mais pour l'instant, le texte de cliquez ici pour changer les paramètres d'administration. Enregistrez ceci et nous pourrons ensuite revenir à notre utilisation de composable, où nous pouvons créer cette fonction ToggleAdmin. Async, ToggleAdmin, créez les blocs try et catch. Comme nous l'avons fait précédemment, nous allons commencer par une instruction if pour vérifier si l'utilisateur est la valeur admin. Si ce n'est pas le cas, nous abandonnerons cette fonction car ils ne sont pas autorisés. Cela se trouve à partir de UserIsAdmin.Value. C'est faux, nous allons renvoyer cette fonction avant d' apporter des modifications. Nous devons maintenant créer une référence à un document particulier que nous voulons mettre à jour la stocker dans une constante appelée DocRef. Ensuite, nous pouvons le construire avec cette méthode documentaire Firebase. En faisant référence à notre base de données, nous voulons faire référence à la collection de l'utilisateur. Enfin, nous voulons trouver un document à l'aide de l'identifiant. Nous pouvons le faire en saisissant notre SelectedUser et en accédant à la propriété ID. Donc SelectedUser.value.id. N'oubliez pas que ce que nous voulons faire avec ce document est de mettre à jour la propriété IsAdmin pour qu'elle soit à l'opposé de ce qu' elle est actuellement. Pour cela, nous pouvons écrire une méthode Firebase appelée UpdateDoc. Nous transmettrons la référence du document ci-dessus. Ensuite, en tant qu'objet, nous pouvons définir exactement propriétés que nous voulons mettre à jour. Nous voulons simplement mettre à jour la propriété IsAdmin pour qu'elle soit à l'opposé de ce qu'elle est actuellement. Nous pourrions le faire en accédant à notre propriété SelectedUser.value.IsAdmin et définissant comme étant le contraire de ce qu'elle est actuellement. Une fois que nous aurons mis à jour notre document Firebase, nous appellerons à nouveau FindUser, qui récupérera et définira nos données utilisateur et mettra à jour tous les composants. Nous devons également transmettre cet e-mail de l'utilisateur, qui se trouvera dans SelectedUser.value.email. Nous allons simplement le placer dans un simple journal de console dans la section des erreurs. De plus, comme nous avons utilisé la méthode UpdateDoc de Firebase, nous devons l'importer en haut , puis renvoyer la fonction ToggleAdmin en bas. Revenons au ToggleAdmin.view où nous appelons cette fonction à partir de notre bouton, qui se trouve juste ici, mais nous devons encore importer depuis notre composable. Tout devrait être maintenant en place. Passons à l'administrateur. adresse e-mail est actuellement celle de l'administrateur, mais l'autre est définie comme fausse. Allons-y maintenant. Cliquez sur « Rechercher un utilisateur ». Cet utilisateur n'a pas été récupéré. Nous pouvons voir que la propriété de IsAdmin est définie sur false. Cliquez sur « Toggle ». Il est ensuite mis à jour pour devenir un utilisateur administrateur, ce que vous pouvez également voir dans la console. Cela n'est pas vrai. Nous rétablirons ensuite cette valeur comme fausse, ce que nous pouvons également voir mis à jour dans la base de données. 59. Règles de Firebase: Ce sera maintenant la partie où nous augmenterons la sécurité de notre application du côté de la base de données. Ce que nous ferons dans la console Firebase si vous accédez à la base de données Firestore, puis nous avons cette option appelée règles. Cela nous permettra d'ajouter des règles de sécurité à notre base de données afin de déterminer qui peut faire quoi. Nous pouvons définir qui souhaite créer, lire, mettre à jour et supprimer des données de notre base de données, et nous pouvons être plus précis quant documents ou aux collections auxquels ces règles s'appliqueront. À l'heure actuelle, les règles de notre base de données ne sont pas sécurisées. Si nous y jetons un coup d'œil, nous avons ici tout ce qui correspond une certaine collection de documents dans notre base de données. Pour le moment, cela pointe vers le point d'entrée externe de notre base de données. Ensuite, imbriqués à l'intérieur, nous pouvons ajouter correspondances supplémentaires pour être plus précis sur les documents ou les collections auxquels les règles s'appliqueront. Ce paramètre actuel de document égal à étoile correspondra tous les documents de l'ensemble de notre base de données. Notre base de données n'est pas sécurisée car elle permet un accès complet en lecture et en écriture tant que nous sommes dans le mois suivant la création de la base de données. Cette règle d'un mois seulement est une fonctionnalité de sécurité, alors n'oubliez pas de désactiver l'accès complet. Cela protégera à nouveau notre base de données si nous oublions de revenir et d'ajuster ces règles. Pour ajouter nos propres règles, nous allons supprimer cette correspondance interne et commencer à écrire nos propres règles. Je vais le supprimer et laisser la correspondance extérieure, qui pointe à nouveau vers notre base de données complète. Ensuite, nous pouvons créer un match imbriqué. Nous allons commencer par notre collection de pizzas, donc /slash pizzas, puis nous aurons également les commandes et les utilisateurs. Nous pouvons également ajouter ces règles. N'oubliez pas que chacun de ces documents relatifs à la pizza est stocké dans un identifiant de document unique. Nous pouvons placer une variable et lui donner un nom de doc Id. Cela nous permettra d'accéder à l'identifiant du document dans cette section. Pour les pizzas, nous commencerons par dire « autoriser la lecture ». Nous autorisons la lecture parce que nous sommes d'accord avec le fait que quiconque lise les éléments du menu. Cependant, lorsqu' il s'agit de créer, de mettre à jour ou de supprimer des pizzas, celles-ci doivent être contrôlées. Nous pouvons également regrouper ces opérations. Nous pouvons dire autoriser, créer, mettre à jour et également supprimer. Tant que certaines conditions sont remplies, nous ne voulons autoriser ces trois opérations si une certaine condition est vraie. Cette condition est qu'il s' agit d'un utilisateur administrateur. La première chose à faire est de vérifier si l'utilisateur est réellement authentifié. Nous pouvons transmettre une instruction if où nous pouvons accéder à l'objet de la requête où nous pouvons accéder à la propriété off et vérifier si cela n'est pas égal à null. Cela signifie que l'utilisateur qui demande ces documents particuliers à l'intérieur de nos pizzas est actuellement authentifié. Il s'agit de la première étape. Nous avons un utilisateur authentifié, ou nous devons également accéder à propriété d' un utilisateur ou à son administrateur dans la base de données. Nous pouvons le faire en utilisant une double esperluette, la chaîne lors d'un contrôle supplémentaire. Nous pouvons accéder à une fonction get fournie par Firebase, qui nous permettra d' ajouter un chemin de fichier vers un document particulier. À l'intérieur, nous devons commencer par le chemin racine. La correspondance la plus complète, qui pointe vers notre base de données. Nous pouvons copier cette section et la coller dedans. Ensuite, comme nous l'avons fait ici, nous pouvons ajouter le nom de notre collection. Nous voulons pointer vers /users, puis vers un identifiant utilisateur particulier. Nous pouvons accéder à l'identifiant utilisateur actuel à partir de cet objet request.auth. Juste après /users, nous pouvons insérer une variable avec le symbole dollar, ouvrir les crochets, demander personnellement .auth, puis accéder à l'uid. Cela nous amène au document auquel vous souhaitez accéder. Ensuite, juste après ces crochets, nous accédons aux données, puis à la propriété qui est IsAdmin, en majuscule A. Une fois que nous aurons accédé à cette propriété IsAdmin, nous voudrons également vérifier si cela est égal à vrai. Juste pour clarifier, nous allons procéder à deux vérifications. Nous vérifions tout d'abord si l'utilisateur est réellement authentifié, est-à-dire s'il s'est connecté avec succès. La deuxième vérification consiste à accéder à la collection de l'utilisateur, puis à vérifier si la propriété IsAdmin est également définie sur true. Avant d'aller plus loin, testons ces règles dans le terrain de jeu des règles. Nous pouvons étendre cela et créer différents types de simulation pour obtenir nos données, créer de nouvelles données, les mettre à jour et les supprimer également. L'emplacement. C'est le chemin que nous sommes en train de vérifier. C'est /pizzas /DocID. Nous voulons tester cela auprès d'un utilisateur authentifié. Notre fournisseur d'authentification est le mot de passe, puis l'UID Firebase. Il s'agit de l'identifiant utilisateur à l'origine de la demande. Je vais prendre ça. Sans quitter cette page, je vais cliquer avec le bouton droit de la souris et ouvrir l'authentification dans un nouvel onglet. Copions. En fait, nous allons entrer dans la base de données, dans les utilisateurs. Il s'agit d'un identifiant unique. Copions ceci et cet utilisateur est l'administrateur. Je vais coller ça dedans. Cliquez sur Exécuter et nous ferons une demande d'obtention. Ici, nous pouvons voir que cela est mis en évidence sur la collection de pizzas. N'importe qui peut lire ces données. Nous nous attendrions à ce que tout se passe bien. Mais les restrictions concernent la création, la mise à jour et la suppression de données. Pour créer des données, Optimist nous a fait une erreur. Jetons un œil à cela. Cela indique que notre base de données correspond. La base de données est une base de données, des documents et je pense qu'elle a juste besoin d'un symbole dollar puisqu'il s'agit d'une variable. Rejeter. Nous avons également juste besoin des crochets réguliers qui correspondent à celui-ci ici pour insérer la variable. Nous allons essayer cela encore une fois. Exécutez cette largeur lors de la création. C'est très bien. Mise à jour. C'est très bien. N'oubliez pas que nous sommes un utilisateur d'ISAdmin. De plus, la suppression fonctionne bien. Remplaçons cela pour qu'il s'agisse l'utilisateur qui n'est pas authentifié IsAdmin est donc égal à false. Copiez ceci, collez-le. Nous sommes en train de lancer une demande de suppression. Cela est refusé car nous ne sommes pas administrateurs, mais nous devrions tout de même pouvoir obtenir nos données puisque tout le monde est autorisé à lire nos pizzas. Créez, il devrait y avoir un échec. Enfin, la mise à jour 2. Bien, maintenant nous savons que cela fonctionne. Nous pouvons le répéter pour d'autres collections. Mais pour ce qui est des commandes, nous voulons que n'importe qui puisse créer une commande. Mais chacune des trois autres opérations ne doit être effectuée que par un utilisateur administrateur. Copions ce match. Ensuite, collez-le juste en dessous. Celui-ci est pour nos commandes. Vous pouvez également renommer cette variable si vous le souhaitez. Ici, nous allons permettre à n'importe qui de créer une commande. Nous souhaitons ajouter certaines restrictions lors de la lecture, mise à jour ou de la suppression. Les mêmes règles s'appliquent. Nous voulons vérifier si l'utilisateur est connecté et authentifié. Nous obtiendrons également la propriété IsAdmin à partir de la collection de l'utilisateur. Tout cela peut rester le même. Testez-le. Ce sont des ordres. C'est bien. Nous allons passer à Créer. N'oubliez pas que tout le monde peut créer une nouvelle commande et que nous sommes toujours avec l'utilisateur, qui n'est pas un administrateur. Ça devrait aller. Nous pouvons maintenant tester les trois autres opérations. Écoutez, c'est un échec, comme prévu. Mise à jour. Supprimer. Ensuite, juste pour confirmer, nous allons accéder à la collection de nos utilisateurs et récupérer l'identifiant de l'utilisateur, qui est un administrateur. Nous en choisissons un. Je vais passer à l'utilisateur qui est administrateur, qui peut effectuer une suppression, une mise à jour, une création et aussi une lecture. La dernière chose que nous devons faire est de faire correspondre la collection de nos utilisateurs. Ils devraient permettre à tout le monde créer un compte pour commencer. Nous allons créer une correspondance ou /users, transmettre la variable de DocID. Ensuite, nous voulons permettre à tout le monde de créer un nouveau compte, et nous voulons également que les utilisateurs puissent lire leurs propres données. Nous allons autoriser la lecture. Mais nous allons également restreindre cela. Nous vérifierons également si l'utilisateur est authentifié. Collez ceci dedans. De plus, pour permettre à l'utilisateur d'accéder uniquement à ses propres données, nous allons vérifier si l'utilisateur, qui est disponible sur l'objet de la demande est égal au même identifiant utilisateur, qui est transmis à cette variable. La double esperluette constitue un second chèque. Demande d'accès pour authentifier l'UID. Il s'agit de l'identifiant de la personne qui fait réellement la demande. Nous voulons vérifier si cela correspond à l'identifiant du document. Par conséquent, si les deux conditions correspondent, l'utilisateur lit ses propres données, mais en plus des utilisateurs qui lisent leurs propres données, nous souhaitons également permettre à un utilisateur lire les données de n'importe quel utilisateur en plus. En plus de cela, nous voulons également placer cela entre crochets, puis effectuer une deuxième vérification. Autorisez également que cela soit vrai si l'utilisateur est un administrateur. Nous savons déjà comment obtenir ces informations, et c'est avec cette fonction d' obtention juste au-dessus. Copiez tout, du début à la fin , en vérifiant si l'administrateur est égal à vrai, puis veillez à le coller entre crochets. Cela permet désormais de toujours vérifier si l'utilisateur est authentifié, puis de vérifier s'il est administrateur ou s'il accède à ses propres données. En fait, il doit s'agir de l'opérateur JavaScript OR plutôt que de l'opérateur AND, ce qui signifie que l'un ou l'autre de ces côtés peut être vrai. La dernière chose à vérifier est d'autoriser la mise à jour et de supprimer des fonctions s'il s'agit d'un utilisateur administrateur. Nous allons autoriser. Combinez-les pour mettre à jour et supprimer des sections. Nous ajouterons les mêmes conditions que n'importe laquelle des conditions ci-dessus. Nous vérifierons si l' utilisateur est connecté et s'il est également administrateur. Copiez cette ligne, collez-la, et toutes les règles sont maintenant en place. Cela pourrait également être étendu pour permettre aux utilisateurs de mettre à jour leurs propres informations , mais c'est bien pour le moment. Mais il inclut également de nombreux doublons de code permettant de vérifier si l'utilisateur est un administrateur avec la fonction get. Nous pouvons améliorer cela en créant des fonctions réutilisables. Nous allons créer deux fonctions. L'une serait de vérifier si l'utilisateur est administrateur, puis de vérifier s'il accède à ses propres informations. Nous allons tout mettre dans l' allumette extérieure. Mets un peu d'espace. Ensuite, nous allons créer une fonction comme nous le ferons en JavaScript, donc IsAdmin, puis une deuxième fonction appelée IsAccountOwner. IsAdmin, c'est celui que nous utilisons plusieurs fois maintenant. Nous voulons copier que l' authentification de la demande n'est pas égale à null. jusqu'à la fin de Copiez ceci jusqu'à la fin de la fonction get. Accédez à la fonction IsAdmin, puis nous voulons renvoyer cette valeur, alors collez-la. Cela signifie que notre fonction renverra une valeur vraie ou fausse. Donc, IsAccountOwner, cela doit également vérifier si l' utilisateur est authentifié, nous allons donc renvoyer des demandes dont l'authentification n'est pas égale à null. Ensuite, comme nous l'avons fait en bas pour les utilisateurs, nous voulons également vérifier si l'identifiant de la personne qui fait la demande est égal à l'identifiant du document, alors copiez-le. Enchaînez-le avec les deux esperluettes, collez-le dedans. Mais n'oubliez pas que nous accédons ici à l'identifiant du document. L'identifiant de ce document n'est disponible que dans cette section . Nous devons donc transmettre la fonction, l'identifiant, puis nous remplacerons celui-ci. Nous ajouterons l' identifiant de ce document lorsque nous appellerons cette fonction. Nous y sommes presque maintenant. Ce que nous devons faire, c'est supprimer tout ce code de cabine et le remplacer par nos deux fonctions. Le premier est IsAdmin. Cela permet de vérifier que l' utilisateur est authentifié, et aussi s'il est administrateur, afin que nous puissions supprimer tout le code du match de nos pizzas. Juste après ces instructions, supprimez toute cette ligne, remplacez-la par notre fonction exactement la même pour nos commandes. Nous vérifions la même chose. Découpez tout cela à sa place. Insérez la fonction. La dernière étape concerne nos utilisateurs, qui utiliseront ces deux fonctions. Pour la lecture, nous allons supprimer tout ce qui se trouve après l'instruction if. Cela va utiliser les deux fonctions. Si IsAccountOwner, l'identifiant sera l'identifiant du document ci-dessus. Tout est administratif. Cela effectuera les deux mêmes vérifications qu'auparavant, et pour la demande de suppression, nous allons tout déplacer après les instructions if et simplement transmettre la fonction IsAdmin. Cela semble maintenant beaucoup plus propre et beaucoup plus facile à lire. La dernière étape consiste à tester nos conditions d'utilisation sur le terrain de jeu. Tout d'abord, l'emplacement où nous testons le parcours de l'utilisateur. Nous allons commencer par copier le nom d'utilisateur de l'utilisateur administrateur. IsAdmin est égal à vrai, collez-le. Celui-ci devrait être autorisé puisque nous sommes l'utilisateur administrateur. Nous effectuerons également la deuxième vérification pour voir si le propriétaire du compte fait cette demande. Même si nous ne sommes pas l'administrateur, copions l'utilisateur non administrateur. Collez-le dedans, dans le code. Cette simulation est désormais refusée. La raison pour laquelle cela est refusé est bien que nous soyons propriétaires d'un compte, nous n'accédons pas à nos propres documents. Nous accédons simplement à tous les documents génériques de la collection de l'utilisateur. Pour tester l'accès à nos propres documents, nous allons déplacer la variable et y coller le même nom d'utilisateur que celui indiqué ci-dessous. Exécutez ceci. Cela fonctionne désormais puisque nous sommes le propriétaire du compte des documents que nous sommes en train de vérifier. Créez. Essayons ça. Cela fonctionne. Nous pouvons également remplacer la variable. Cela devrait fonctionner pour tous les documents. Nous allons en essayer une autre. Nous allons essayer de le supprimer. Exécutez-le en tant qu'utilisateur non administrateur, et cela devrait échouer. Éteins. Copiez l'utilisateur administrateur. Collez-le, et celui-ci est autorisé puisque nous sommes un utilisateur administrateur. Nous y voilà. Il semble que tout fonctionne correctement avec nos règles de sécurité, et vous pouvez également les mettre à jour ou les modifier si vous le souhaitez. Mais pour l'instant, notre application est beaucoup plus sécurisée et nous publierons ces modifications.