Construire un clone Trello Fullstack : WebSocket, Socket IO

1. Introduction: Bienvenue dans mon cours complet où nous construisons un projet ferroviaire à partir de zéro. C'est génial de vous avoir parmi nous dans ce cours, nous allons implémenter un vrai projet partir du dossier vide jusqu'à l'application de production entièrement fonctionnelle qui sera déployée sur le rail nous allons implémenter une fonctionnalité dont un projet typique a besoin, comme par exemple, l'authentification, utilisation du Pi, la gestion et la création d'un état réactif, travail avec des formulaires et bien plus encore. Dans ce cours, nous utiliserons de nombreux outils différents sur notre client. Nous utiliserons Angular, qui est la meilleure solution pour les grandes applications de production évolutives. Sur le backend, nous allons utiliser now chess a été exprimé pour créer notre API afin de stocker nos données. Nous utiliserons MongoDB, qui est une solution très populaire pour stocker des données dans votre projet. Les utilisateurs utilisent également Socket Layer pour créer des mises à jour en temps réel dans notre application. Évidemment, nous allons écrire le meilleur code possible qui sera sec, évolutif et facile à comprendre. À la fin de ce cours, vous serez en mesure de créer vos propres projets, quelle que soit leur complexité, à l'aide de ces outils. Qui suis-je ? Je m'appelle Alexander cohesion et je suis un développeur Web avec plus de dix ans d'expérience, ainsi que l' instructeur professionnel avec divers cours sur les technologies Web. J'ai fait de mon mieux pour intégrer toutes mes connaissances ce cours et ils veulent vous le dire. Bienvenue à bord, et allons-y. 2. Quelles technologies utilisons-nous ?: Dans cette vidéo, j' aimerais parler des technologies que nous utiliserons dans le cadre de ce cours. Et dès le début, je veux définir des attentes réalistes. Nous allons utiliser un grand nombre de technologies ici. Il s'agira de Angular, Node.js Express, MongoDB, TypeScript et socket IO. Et c'est un tas de choses à apprendre. Et puis ce cours, je ne t'apprendrai pas tout du début à la fin. Ce n'est tout simplement pas possible. La quantité de connaissances dans chaque outil est énorme. C'est pourquoi ce cours est ciblé. Construire un projet réel du début à la fin. Oui, vous comprendrez et apprendrez toutes ces technologies à un certain niveau. Mais ici, dans certaines technologies, vous pouvez avoir besoin compréhension de base de ce dont nous parlons. Cela étant dit, passons à la liste. Et le premier de notre liste est Angular. Si vous ne le savez pas, Angular est l'un des trois frameworks frontaux les plus populaires, et nous l'utiliserons pour créer avant et le côté de notre application. Angular est un framework très strict qui convient aux grandes entreprises. Et nous avons ce TypeScript prêt à l'emploi, ce qui signifie qu'en utilisant Angular, nous pouvons créer de plus grandes applications, les rendre plus sûres grâce aux typages et les mettre à l'échelle si nécessaire. Si vous ne connaissez pas Angular tall, je vous recommande vivement de consulter la liste des bases d'Angular, fonctionnement des composants, de la création de modules, de l'ajout de routage, etc. Après avoir compris cela, il vous sera beaucoup plus facile de sauter dans le parcours. Le prochain dans la liste, nous avons connu échecs et en fait NodeJS que nous utiliserons sur le backend avec Framework qui s' appelle Express. Et s'il ne l'exprime pas, le framework le plus populaire pour Node.js, il est super petit, il n'est pas strict, il est vraiment flexible et nous l'utiliserons comme une solution très populaire pour construire back-end. Et dans ce projet, nous devons construire non seulement un mais aussi des connexions de socket gérées. Le back-end, c'est là exprime un vrai choix sympa ici, mais ce n'est pas tout à l'intérieur exprimé par défaut, nous avons JavaScript. Bien entendu, ce n'est pas la meilleure approche. Nous voulons vraiment utiliser TypeScript car nous utiliserons TypeScript sur le client avec angular. C'est alors que le back-end avec Express. Nous voulons également utiliser TypeScript. Pourquoi est-ce que c'est ? Parce qu' en fait, TypeScript apporte à JavaScript des resserrements statiques. Cela rend notre code beaucoup plus sûr et nous voyons tous nos problèmes, pas au moment de l'exécution, mais dans le transpiler et le temps. De toute évidence, pour un projet, nous devons stocker nos données quelque part, ce qui signifie que pour notre back-end, nous avons besoin d'une base de données. Et la solution la plus populaire ici est MongoDB. C'est vraiment la base de données la plus populaire au monde où nous pouvons stocker des données et elle s'intègre parfaitement dans notre stack avec Angular sur le client et NodeJS a été exprimé sur le backend. Et le dernier point mais non le moindre de la liste est Socket IO. Nous voulons dans notre application implémenter WebSockets pour avertir les autres utilisateurs lorsque nous créons une tâche ou colonne de crédit lorsque nous changeons de pièce, tous les utilisateurs de cette partie doivent être avertis. Et la solution la plus populaire pour les WebSockets à l'intérieur du mot connu est appelée socket IO. C'est la bibliothèque qui nous aide à gérer les WebSockets sur le backend et simultanément sur le client. C'est pourquoi c'est vraiment un bon choix. Encore une fois, si vous n'êtes pas familier avec certains outils ici, c'est tout à fait correct. Nous partirons de zéro, mais nous concentrerons l'apprentissage de tous ces outils uniquement sur les besoins quotidiens. Ce qui signifie en fait que nous allons apprendre des choses de base, des choses correctes et des choses nécessaires à la mise en œuvre de ce projet ferroviaire. 3. Ressources téléchargeables: Dans cette vidéo, je voudrais vous rappeler le code source, car dans ce cours, dans chaque cours où nous codons quelque chose, vous pouvez trouver le code joint de cette conférence spécifique, qui signifie que chaque cours contient un code source. Et si vous voulez simplement récupérer le code source de la conférence, vous pouvez certainement le faire. Il suffit de grandir sous la vidéo et vérifier l'archive jointe à la vidéo. Et aussi diversement que toujours, si vous avez des problèmes avec votre code, quelque chose ne se compile pas ou si vous avez juste une question concernant la vidéo ou le cours en général, vous pouvez simplement écrire vos commentaires sur cette vidéo, et je vais certainement y répondre. 4. Installation de nœud et angulaire: Dans cette vidéo, nous allons installer NodeJS Angular sur votre machine. Comme vous pouvez le voir ici, je suis sur le site officiel, Node js.org, où vous pouvez télécharger maintenant les échecs sur votre machine. S'il n'est pas installé, vous pouvez vérifier s'il est installé sur votre machine. Si vous écrivez simplement node moins version dans votre console, si vous obtenez la version 16, c'est très bien si vous avez quelque chose de plus ancien, je vous recommande vivement de mettre à jour votre version de Node. Mais le point important, c' est que vous pouvez voir que nous avons deux versions. Tout d'abord, 16 LTS et 17 actuels. Et vous pourriez penser, d'accord, je dois installer le courant. Et ils ne peuvent pas vous recommander d' installer la version actuelle, car version de support à long terme est généralement beaucoup plus stable. C'est pourquoi pour tous mes projets, en particulier s'ils sont livrés en production, j'utilise la version du nœud LTS, ce qui signifie que si vous accédez à ce site Web et que vous voyez comme la version LTS peut avoir 17 ou 18 ans. Je vous recommande toujours de télécharger Ts et non à jour et peu importe le système d'exploitation que vous utilisez. Non, ça marche partout. Vous le téléchargez simplement ici, vous l'installez sur votre machine, puis vous vérifiez dans la console avec la version node moins qui est correctement installée Node sur votre machine. Vous pouvez également taper ici et la version Pm moins pour vérifier que npm est également disponible pour vous. Notre prochaine étape consiste à installer angular et à travailler avec then globe, nous utilisons un outil appelé Angular CLI, ce qui signifie en fait que c'est l'outil qui nous aide tout d'abord à créer un Projet Angular, puis générez différents modules ou composants et faites beaucoup de choses avec Angular. Alors, comment pouvons-nous installer Angular CLI sur votre machine, comme vous pouvez le voir ici, je suis sur le site officiel, Angular slash CLI, et voici la première étape d'installation d'angular CLI. Et nous pouvons simplement copier cette commande qui installera globalement Angular CLI sur votre machine. Et comme vous pouvez le voir pour cela, nous utilisons npm, qui aura après l'installation de chaises connues. C'est là que je peux simplement lancer des paiements tau moins g Angular CLI. Et j'installe globalement Angular CLI sur ma machine. Nous devons maintenant vérifier si notre interface de ligne de commande Angular a été correctement installée. Nous pouvons simplement l' écrire en version G moins et voici quelques informations importantes. Tout d'abord, nous pouvons voir qu' Angular CLI est la version 13, ce qui signifie en fait que nous avons installé angular 13 ici sur notre machine. Deuxièmement, il s'agit de la version de notre nœud qui est activée sur votre machine. C'est npm et c' est un système opérationnel. Et quelques versions d' Angular que vous pouvez voir ici. Si vous voyez une telle sortie, cela signifie que vous avez correctement installé Angular CLI sur votre machine. L'étape suivante consiste à générer une partie et une partie de notre application. Comme vous pouvez le voir ici, je suis à l'intérieur de lui être plié. Et ils n'ont pas créé notre projet ici, ce qui signifie que nous créons rarement tout à partir de zéro. Donc ce que je veux faire ici, je peux simplement essayer MK deal et ensuite le nom de notre projet, L Trello. Et en fait, dans ce projet, nous implémentons le clone de trailer. C'est y. Voici juste un nom avec un joli préfixe et WSSE, vous pouvez créer un dossier non pas à partir de l'interface du terminal, juste dans votre gestionnaire de fichiers. Maintenant, je veux aller dans notre dossier Ultra Law. Et ici, nous devons créer deux dossiers différents parce que nous voulons séparer notre backend de notre front-end. Et vous vous demandez peut-être pourquoi ? Et en fait pour différentes raisons. Tout d'abord, il est plus facile de séparer votre front-end et votre back-end si vous souhaitez, pour certaines raisons, les placer plus tard dans différents référentiels ou peut-être même dans différentes équipes. Deuxièmement, si nous les séparons dans différents dossiers, alors ce n'est pas un monolithe, ce qui signifie en fait que nous n' injecterons certainement pas de choses du backend dans le dossier frontal, et vice versa. Ils sont vraiment isolés et séparés comme ils doivent l'être dans l'application réelle. C'est pourquoi je souhaite créer deux dossiers. Tout d'abord, il s'agira du client, et ensuite du serveur et du client Insight. Nous aurons notre application angulaire et ensuite dit serveur. Nous aurons notre gs connu avec Express, qui sera notre application back-end. Maintenant, nous pouvons générer notre application angulaire, comme vous pouvez le voir ici dans la documentation, nous exécutons simplement dans gene hue et le nom du dossier. Ensuite, nous sautons simplement le dossier et nous démarrons notre serveur. Mais ici, nous avons un problème car nous sommes directement créés notre dossier client et nous pouvons sauter maintenant insérer le dossier client, ce qui signifie en fait que nous ne pouvons pas créer notre application angulaire avec moteur car le dossier existe déjà. Pour cela, nous pouvons utiliser une commande vraiment sympa dans gene you. Et puis ici, nous devons fournir le répertoire du nom de l' application, et voici une barre oblique, qui signifie en fait que cette commande créera pour vous dans application d'angulaire dans votre répertoire existant. Comme vous pouvez le voir ici, je suis à l'intérieur du client où nous voulons exactement générer notre application angulaire. Et ils peuvent coller cette commande ici dans le nom de l'application gene Hue, barre oblique du répertoire. Et évidemment, nous ne voulons pas nommer le nom de notre application. C'est ici que nous pouvons fournir ELL Trello, tout comme nous avons nommé notre projet d'après la même entrée cachée. Et nous avons commencé notre processus de génération d' un nouveau projet Angular. Et voici quelques questions de la part d'Angular CLI. Avons-nous besoin d'un routage angulaire ? Bien sûr, oui, c'est pourquoi je clique sur oui, ici, quelle feuille de style nous devons utiliser. Et ici je vais choisir un CSS. Ensuite, notre projet sera généré. Comme vous pouvez le voir ici, tous les paquets ont été installés avec succès, mais par la suite, nous recevons un message qui peut vous embrouiller. Ici, nous recevons le message que le maître de la branche a été créé en tant que branche git par défaut. Et ils peuvent changer le nom en nom plus tard, mais il n'y est pas encore. Et peu importe quelle branche a été générée pour vous, master ou main, elle fonctionnera dans tous les cas. Vous pouvez donc ignorer cet avertissement. Et la dernière étape que nous devons faire est démarrer notre application client. Et comme vous pouvez le voir dans la documentation, c'est dans G serve. Donc, nous insérons simplement que le client doit l'essayer et simplement servir sans rien spécifier. Comme vous pouvez le voir ici, nous obtenons une production verte. Le message indiquant que le serveur de développement angulaire en direct écoute maintenant sur l'hôte local pendant 1200. Maintenant, nous pouvons simplement ouvrir localhost 4 200. Et ici nous voyons la page angulaire par défaut et maintenant insérer la console. Notre serveur Web doit fonctionner en permanence pendant que nous développons l'application. Voyons maintenant les fichiers qui ont été générés rapidement. Comme vous pouvez le voir ici, j'ai ouvert mon éditeur, je suis dans le dossier L Trello, et nous avons ici deux dossiers, server et client et insight client. Tous ces fichiers ont été générés avec Angular CLI. Et la partie la plus intéressante pour nous est ce dossier source. Et à l'intérieur de l'AB, nous avons notre composant d'application. C'est exactement ce que nous voyons sur l'écran. Il s'agit du composant par défaut d'angular. C'est là que tout d'abord, je veux supprimer le composant d'application, SCSS, les spécifications des composants de l'application. Nous n'avons ici que ces quatre dossiers. Maintenant, nous pouvons sauter dans le HTML du composant App, et nous voulons vraiment tout supprimer sauf cette dernière ligne, la prise du routeur. C'est extrêmement important rapidement. Je vais donc tout supprimer de ce fichier et vivre ici la sécheresse de la sortie. Et en haut, nous pouvons simplement l'essayer. Bonjour Trello. Nous savons donc que cela fonctionne. Après cela, nous devons sauter à l'intérieur notre composant d'application, le modifier. Parce qu'en fait, nous utilisons URL de style du fichier, ce qui modifiera les URL supprimées. C'est là que nous pouvons simplement supprimer cette ligne et utiliser ici un modèle. Et nous n'avons même pas besoin de ce trailer Title L parce que nous ne l'utilisons pas. Nous avons simplement notre composant d'application et c'est un composant vide. Maintenant, quand je vais aller à la page dans le navigateur, je peux voir que tout est supprimé. Notre page est complètement nettoyée et maintenant nous avons juste un petit message de bande-annonce, ce qui signifie en fait que nous préparons avec succès la partie client de notre application que goodwill implémentera plus tard. 5. Configurer le serveur: Dans cette vidéo, je souhaite préparer la partie back-end de notre projet pour démarrer la mise en œuvre. Comme vous pouvez le voir ici, il est complètement vide. Donc, ce que nous allons créer ici, ce que nous devons faire, nous devons initialiser le fichier JSON du package avec connu. Ici, nous pouvons écrire npm dans le besoin et cela créera pour nous un fichier JSON de package. Nous devons ici répondre à quelques questions. En général, j'appuie simplement sur Entrée sur chacun d'entre eux. Ce n'est pas important pour nous. Et à la fin, il suffit de cliquer sur Oui, et nous sommes prêts. Maintenant, nous pouvons sauter et dire éditeur et sortir de notre client vers notre serveur. Maintenant, nous avons juste un fichier simple, Beckett Jason avec le nom, la description de la version , le script principal, où nous n'avons rien dans l' auteur vide et la licence. Maintenant, nous devons installer deux packages qui nous aideront à créer notre projet back-end. Nous pouvons donc écrire ici le style des déficiences. Et après ce non démon moins D, qu'est-ce que ça veut dire ? Tout d'abord, qu'est-ce qu'un démon ? Qu'il s'agit d'un package spécial qui nous aidera à recharger chaque fois que nous modifierons un fichier, notre application back-end. Et c'est exactement ce que fait Angular rapidement chez le client. Mais à l'intérieur de notre projet back-end, nous n'avons pas de serveur Web qui fait aussi vite. C'est pourquoi quand Staline et un démon, comme vous pouvez le voir ici, j'ai utilisé l'option minus d, ce qui signifie en fait dans notre paquet Jason, aucun démon n'a été installé dans les dépendances de développement. Les dépendances de développement sont des dépendances que nous utilisons lorsque nous développons un projet. Nous n'avons pas besoin d'aucun démon pour la production. C'est juste pour le développement. Et notre prochain package s' appelle Ts node, et il est également uniquement destiné au développement. C'est ici que nous écrivons npm install Ts node minus t, qui signifie qu'il s'agit d'une dépendance de développement. Alors, que fait node ? s'agit simplement d'un processus qui transpose notre code TypeScript dans du code JavaScript à la volée, exécuté comme le code JavaScript normal à l'intérieur du nœud. C'est extrêmement efficace car nous voulons écrire du code TypeScript. C'est pourquoi nous devons d' abord le transformer de TypeScript en JavaScript. Et ce package permet de le faire d'une manière très simple. Maintenant sautons et disons Beckett json et vérifions ce que nous avons. Nous avons ici pour développer des dépendances. Et ici, je veux créer un nouveau script, mais je n'ai pas besoin du test de script. Nous voulons démarrer notre serveur Web. C'est y, voici un style de script, et ici nous pouvons appeler un démon le chemin d'accès à notre fichier. Et ici je veux écrire la barre oblique source server.js. Et comme vous pouvez le voir ici, nous avons le fichier server.js, que nous allons créer dans une seconde. C'est donc le fichier TypeScript et la partie la plus intéressante ici que nous n'avons pas précisé que nous utilisions ici nœud Ts dans aucun démon. Daemon le fait automatiquement dès la sortie de la boîte si nous avons installé le niveau snowed et spécifié ici non pas fichier JavaScript mais un fichier TypeScript. Et la dernière chose que nous devons faire est de créer le fichier de configuration ts, qui est un fichier de configuration pour TypeScript. C'est ici à l'intérieur d'un dossier de service. Je veux créer un nouveau fichier, ts config dot json. Ici, je vais coller un tel conflit et c'est conflit super typique pour l'application Node.js avec TypeScript. Nous allons donc définir les options du compilateur. C'est exactement ainsi que TypeScript transmettra notre code de TypeScript à JavaScript. Le module CommonJS signifie donc que nous écrivons notre TypeScript sur le backend à l'intérieur du coffre des noms. Et notre objectif est l'optique atmosphérique, car le nœud peut facilement lire mon code script six. Notre résolution de mode est donc nœud parce que nous écrivons dans des chaises nominales, déplaçons sur les cartes sources. C'est là que passe la carte source. Notre offre est l'annuaire. La sortie sera générée. Ici, nous avons un dossier dist, il sera créé automatiquement. Nous avons également ici le strict vrai module NDS inter pop, et nous avons besoin de cette option oui module inter Pope pour convertir correctement sont des entrées TypeScript à requérir à l'intérieur du jazz connu. Nous avons donc créé avec succès notre configuration TypeScript, et maintenant nous pouvons créer notre dossier source et dans ce fichier, car comme vous pouvez le voir ici, notre serveur vivra dans le serveur source Ts. Je saute donc dans une telle source et je crée un point de serveur de fichiers. Et n'oubliez pas Ts NodeJS. Maintenant, nous pouvons entrer et simplement écrire serveur de journaux de console juste pour tester s'il fonctionne. Maintenant, je vais sauter dans la console et ici dans le dossier du serveur, je peux écrire npm start, comme vous pouvez le voir ici, nous avons une sortie de no demon, ce qui est tout à fait correct. Il lave les fichiers TypeScript ici et ici. Aucun démon n'a commencé notre test de serveur source de nœud Ts, ce qui signifie qu'il utilise simplement le nœud Ts à l'intérieur, mais qu'il redémarre notre serveur. Et c'est le serveur de sortie que nous avons écrit dans ce fichier. Et maintenant Demon Bull redémarre notre serveur chaque fois que nous apportons des modifications. 6. Installation de la base de données: Dans cette vidéo, nous allons parler de la base de données de style sur votre machine. Et il y a une autre dimension dans laquelle nous allons utiliser MongoDB ici. Alors, quelle est l'idée ? Nous devons installer sur notre base de données de machine locale afin de pouvoir y enregistrer et lire certaines données que nous utiliserons dans notre application. Ces données seront disponibles pour nous en direct localement. Au moment où nous voulons déployer notre projet en production, nous devons configurer la base de données sur production et nous le ferons à la fin de ce cours. Maintenant, la question est de savoir comment installer MongoDB sur votre machine spécifique et comment vous pouvez travailler dans différents systèmes d' exploitation. Nous voulons donc quelque chose qui fonctionne partout sans tracas. En fait, l'installation de la base de données peut toujours poser quelques difficultés. Ici, comme vous pouvez le voir, j'ai déjà ouvert le site officiel de MongoDB avec la section install MongoDB. Il s'agit de l'URL afin que vous puissiez la vérifier si cela vous intéresse, et cela semble vraiment facile. Nous choisissons simplement ici un système opérationnel. Je clique donc sur le lien MongoDB Download Center. Et je suis maintenant sur cette page web. Et à ce stade, il n' est déjà pas vraiment clair ce que MongoDB nous devons installer. Il en existe différentes versions. Il existe des versions gratuites que nous voulons utiliser et des solutions payantes dont nous n'avons pas besoin. Et en fait ici, nous devons explorer un peu et voir ici le serveur communautaire MongoDB. En fait, cette communauté MongoDB est le nom de la version gratuite de MongoDB que nous voulons utiliser. Donc, ici à droite, nous pouvons choisir la version actuelle qui est totalement correcte. Voici maintenant votre plateforme, peut-être Windows, et maintenant il vous suffit de la télécharger et de l'installer. Il suffit donc de double-cliquer ici et de l'installer. Mais après cela, il y a quelques étapes supplémentaires. Nous devons configurer le répertoire de données. Voici que vous pouvez voir qu'ils le font dans la ligne de commande comme ceci. Et puis comme ça, c'est pourquoi vous pouvez installer MongoDB comme ça. C'est très bien. C'est la méthode officielle, mais en fait, mes étudiants ont eu beaucoup de problèmes lors de l'utilisation de bases de données avec une installation officielle. Pourquoi est-ce que c'est ? Parce qu'en fait, dans chaque système d'exploitation, vous pouvez avoir des problèmes. De plus, vous devez créer un dossier, puis spécifier le chemin d'accès, etc. C'est plus difficile. C'est pourquoi je vous recommande vivement de regarder la deuxième possibilité, comment installer une base de données sur votre machine. Et puis nous parlons ici de DACA et de Docker Desktop. Qu'est-ce que Docker ? Il s'agit d'un outil supplémentaire spécifique que vous ne devez pas apprendre, mais que vous pouvez simplement utiliser. L'idée principale est que Docker tout ce qui se trouve dans le conteneur. Il est complètement isolé et n'a rien à voir avec votre système d'exploitation. Docker fonctionne sur tous les systèmes d'exploitation et est gratuit, ce qui signifie en fait que nous installons Docker, d' abord sur votre machine. Et deuxièmement, nous utilisons l'image officielle de Mongo de Docker. Comme vous pouvez le voir ici, le lien pour Mongo, qui est supporté par MongoDB lui-même. Ce n'est donc pas un outil tiers. C'est super officiel et l'idée principale est que ce mongo est emballé dans un conteneur, donc il est complètement isolé sur votre machine et vous obtenez simplement du conteneur, le port où vous pouvez connecter et écrire des données dans ce conteneur. Et voici à quoi cela ressemblera lorsque vous commencerez dedans. Comme vous pouvez le voir sur la gauche, il doit être vert. Et à ce stade, vous savez, d'accord, mon Docker est en cours d'exécution et pour vous la liste sera probablement vide. C'est très bien. L'idée principale est que tout d'abord, vous lancez Docker sur votre machine. Après cela, nous allons simplement à la console et nous devons exécuter une commande comme vous pouvez le voir ici J'ai écrit docker run et après avoir installé Docker desktop sur votre machine, vous pouvez écrire Docker dans le console. C'est le nom connu, et ici nous écrivons docker run then minus d, qui signifie que ce doit être un processus détaché, qui signifie en fait que nous ne voulons pas exécuter ici dans ce terminal. Nous voulons simplement le détacher du terminal. Ici, nous spécifions les ports et ensuite nous spécifions le nom mongodb. Et ici, Mongo, ce nom, MongoDB est le nom du conteneur sur ma machine. Et voici ce que nous voulons télécharger, c'est exactement l' image que nous allons utiliser. Ici, nous utilisons Mongo 404. Vous pouvez également utiliser la version ultérieure ici, vous pouvez la consulter sur le site officiel du Mongo ou ici dans Docker. Comme vous pouvez le voir, vous pouvez cliquer ici sur balises, faire défiler un peu. Par exemple, vous pouvez utiliser dernière version ou simplement vérifier la version, comme vous pouvez le voir ici, la dernière version est 507. En ce moment, j'ai installé sur ma machine pour 0 pour, mais cela ne fait pas une énorme différence. Les choses que nous allons essayer dans MongoDB sont les mêmes sur toutes ces versions. Maintenant, je clique ici et Docker téléchargera cette image sur ma machine. Comme vous pouvez le voir, je n'ai obtenu aucune sortie à l'exception d'un hachage. Et c'est parce que MongoDB est déjà téléchargé par Docker sur ma machine. Ce n'est donc pas un problème, et cette ligne a simplement redémarré Mongo DB sur ma machine. Et en fait, si j'ouvre maintenant l'outil Docker, vous pouvez voir qu'il contient un MongoDB et qu'il est vert parce qu'il est en cours d'exécution ce moment et nous pouvons lui parler. C'est pourquoi, comme vous pouvez le constater, vous n'avez pas besoin de créer de fichiers supplémentaires. Vous n'avez pas à vous soucier de certaines autorisations ou de certains dossiers. Cela fonctionne tout simplement. Et il s'agit d'une ligne unique qui est utilisée pour de nombreux projets. Maintenant, la question est évidemment de savoir comment nous pouvons sauter dans la console de MongoDB quand elle est à l'intérieur du conteneur. Et pour cela, nous avons une commande spéciale, docker exec, qui signifie l'exécuter. Et voici le nom de notre conteneur. Dans notre cas, c'était MongoDB. Et après cela, nous écrivons notre commande et nous voulons venir et Mongo ici parce que c'est ce qui est installé à l'intérieur du conteneur. Le conteneur intérieur peut être installé n'importe quoi. Dans notre cas, cette image de Mongo contient simplement Mongo. C'est pourquoi nous appuyons sur Entrée. Nous recevons ici de nombreux messages de MongoDB. Et comme vous pouvez le voir après cela, je suis maintenant ici dans le terminal de Mongo à l'intérieur du conteneur, et ils peuvent écrire ici quelques commandes Mongo. Par exemple, afficher les bases de données, le point-virgule, j'appuie sur Entrée, et vous pouvez voir les bases de données que j' ai ici. Maintenant, vous pouvez dire, accord, mais je n'ai pas utilisé Docker, installé MongoDB juste de la manière officielle, que devraient-ils faire ? Et en fait, tu ne dois faire qu'une seule chose. Si vous l'avez installé de manière officielle, vous avez deux commandes différentes dans votre console. Tout d'abord, ce sera une commande de Dieu, et cela démarrera exactement de la même manière que nous l'avons fait avec processus docker run MongoDB sur votre machine, ce qui signifie en fait que la base de données sera en tant que processus en cours d'exécution sur votre machine. Et la deuxième commande que vous voulez utiliser est Mongo. Cette commande va directement insérer la console, comme nous l'avons fait avec torque. Ce sera exactement pareil. Le plus important dans ce cours est que votre base de données Mongo doit être exécutée directement sur votre machine pendant le développement du projet. Ce qui signifie en fait que vous avez trois choses. Tout d'abord, vous disposez d'une base de données standard. Deuxièmement, avez démarré le serveur Web pour le back-end. Et le dernier est le serveur web statique pour le frontend. 7. Utilisez-vous un bon éditeur ?: Nous avons presque fini de sous-typer tous nos outils. Et la dernière question que je voudrais vous poser, utilisez-vous vraiment le bon éditeur ? Parce qu'en fait, nous allons écrire beaucoup de TypeScript dans votre éditeur. Et l'éditeur ne supporte pas très bien TypeScript, alors vous pourriez envisager d' utiliser un autre éditeur. Comme vous pouvez le voir ici, je suis dans mon éditeur, c'est Vim, mais je ne vous le suggère pas. Je veux juste montrer de quoi je parle. Comme vous pouvez le voir ici où insérer un composant dans Angular et ici nous avons une entrée de notre composant. Généralement, lorsque nous écrivons le code avec, n'écrivez pas d' inverses en écrivant simplement quelque chose comme add component ou peut-être simplement add than comp. Ensuite, nous avons une auto-complétion. Et vous pouvez le voir ici, nous pouvons choisir beaucoup de choses. Nous voulons en fait entrer le composant depuis Angular. Il ne s'occupait pas seulement d'ici. Et tout d'abord, il a été auto-complété jusqu'à la fin. Et deuxièmement, j'ai obtenu ce composant d'entrée externe de Angular com. Et il est extrêmement important que votre éditeur puisse le faire. Vous avez vraiment besoin de la prise en charge de ces entrées externes lorsque vous écrivez du code. Parce que chaque fois que vous devez écrire une entrée, si vous voulez vraiment le faire à la main comme composant d'entrée, et que vous ne vous souvenez pas vraiment de quel package vous devez l'entrer. Ce n'est pas efficace. Vous passez simplement du temps à écrire du code sur des choses de Ron. Nous avons vraiment besoin de cette fonctionnalité d'entrée externe. Et la deuxième caractéristique est évidemment que vous voulez avoir un support de TypeScript dans votre éditeur, ce qui signifie que lorsque nous écrivons quelque chose de incorrect. Par exemple, ne sélectionnez pas ici, mais sélectionnez simplement où aller directement ici, un argument de message de type select n' existe pas sur le composant de type, ce qui signifie en fait, mais ne passez pas de temps Déboguer de la magie. Nous voyons simplement notre faute de frappe directement dans l'éditeur. Vous pouvez utiliser ici n'importe quel éditeur prenant en charge TypeScript. Mais si vous ne savez pas quel éditeur utiliser, je vous recommande vivement de consulter VS Code. Il s'agit d'un éditeur entièrement gratuit, qui fonctionne sur tous les systèmes d'exploitation. Il vous suffit de l'installer. Vous obtenez un tel éditeur avec prise en charge intégrée de TypeScript prêt à l'emploi, ce qui signifie que vous obtenez toutes ces fonctionnalités dans votre éditeur. Et dans ce cas, il est beaucoup plus facile pour vous d'écrire du code. 8. Configuration de la prise avec Express: Dans cette vidéo, nous commençons par développer notre projet. En fait, le but de cette vidéo est de configurer notre serveur back-end avec Express, MongoDB et socket IO. Commençons donc. Ici. Nous devons installer plusieurs nouveaux packages. Tout d'abord, nous voulons exprimer qu'il s'agit d'un cadre. C'est pourquoi je souhaite accéder à la console. Et comme vous pouvez le voir à l'intérieur du dossier racine, nous ne voulons pas installer ici packages car nous devons d'abord sauter dans notre dossier serveur ici boop voulez installer des packages. C'est là que je suis juste dans npm install express. Dans ce cas, nous installons ce framework en tant que dépendance. Ici, vous pouvez voir maintenant que nous avons une nouvelle dépendance, exprimée comme notre framework. La prochaine chose que nous voulons installer est Mongoose. Et si vous ne savez pas ce qu'est Mongoose, c'est le package le plus populaire pour travailler avec MongoDB dans des chaises connues. Pourquoi c'est le plus populaire, parce que vous pouvez simplement configurer votre connexion à MongoDB avec lui, vous pouvez créer vos modèles et travailler avec MongoDB de manière plus correcte en travaillant avec des modèles. Donc, vous avez généralement quelque chose comme une RAM et nous apprendrons Mongoose plus raide dans les prochaines conférences. Et la dernière chose que nous voulons installer ici est Socket IO. C'est pourquoi npm installe socket point ion. Et c'est exactement notre bibliothèque pour travailler avec des WebSockets à l'intérieur de chaises connues. Comme vous pouvez le voir, toutes nos dépendances sont installées et maintenant nous pouvons sauter dans set source, serveur Ts, et nous n' avons rien ici. Et nous pouvons commencer par configurer notre sirop. Mais en fait, voici la question. Il est très facile d'écrire votre code pour Stratton Express. Son entité est vraiment facile à créer un serveur Web pour Socket IO, mais en fait, il n'est pas si facile de configurer MongoDB Express et socket IO. Parce que ce que nous voulons de l'expression, nous voulons des rondes normales, tout comme dans une application normale, mais nous voulons également nous lier à son E/S de socket afin de pouvoir travailler avec WebSockets. Et en plus de tout cela, nous devons d'une manière ou d'une autre démarrer notre MongoDB. Comme je l'ai dit, ce n'est pas facile, mais il s'agit de la production parce que personne n'a besoin d'un seul package. Nous voulons vraiment une application prête pour la production. Donc, tout d'abord, je vais saisir notre Express. Express. Et en fait, en ce moment, vous pensez probablement, accord, à ce qu'il fait. Il a essayé d'inverser les chaises nominales à l'intérieur. Et en fait c'est très bien parce que nous ne sommes pas bien ici. Javascript, où juste ici, TypeScript. Et cela se passe avec notre config. Et juste pour vous rappeler que nous avons notre configuration ts. Cela est apparu à ECMO ScriptSIG, qui peut maintenant être lu par Jess. Mais plus important encore, CommonJS et node offrent plus de résolution. C'est là qu'il sera converti en besoin et il fonctionnera comme un charme dans le jazz maintenant. Mais pour nous, c'est extrêmement confortable car l'utilisation d'entrées est bien meilleure que ce que nécessite la main droite. Et voici un autre problème. Comme vous pouvez le voir ici, j'ai une erreur. Impossible de trouver le fichier de déclaration pour le module exprimé. Qu'est-ce que cela signifie ? Typescript essaie de nous aider avec l'inverse. Il ne peut pas le faire hors de la boîte parce que TypeScript ne connaît rien au package express. Et voici une solution que nous devons installer avec npm install save-dev, types express. Nous pouvons donc installer des typages supplémentaires pour package express, puis taper script peut nous aider petit. Et c'est exactement ce que nous voulons faire. Nous devons sauter et définir la console et la droite et les paiements tau. Et voici les types slash Express, et voici important moins l'option de l'installer simplement en tant que dépendance de développement. Nous n'avons pas besoin de cette bibliothèque pour la production. Et comme vous pouvez le voir après l'installation, cette erreur a disparu. Et maintenant, TypeScript peut nous aider avec Express. Nous avons donc importé avec succès notre colis express et nous pouvons maintenant créer notre application. Je peux donc simplement écrire ici const ab equals, et ici nous appelons Express. Et comme vous pouvez le voir maintenant, si je suis halite et express, vous pouvez voir tous les types d' expressions de ce package spécifique. Par exemple, nous pouvons lire ici qu'il crée une application express, ce qui est extrêmement utile à des fins de développement. La deuxième chose que nous voulons faire, nous devons créer un serveur HTTP et vous verrez pourquoi dans une seconde. Donc ici je veux déstructurer, créer un serveur à partir de, et voici http. Comme vous pouvez le voir, nous sortons ATP de la boîte et créons également un serveur car il s'agit du package de nœud par défaut. Mais il se peut que vous manquiez des dactylographies pour des chaises connues. C'est là que nous pouvons sauter directement dans la console et écrire npm install types node minus t. Et dans ce cas, nous installons à coup sûr toutes les saisies nécessaires pour les chaises nominales. Nous avons donc importé un serveur de création à partir de http. Nous devons maintenant l'utiliser. Après l'application, nous pouvons créer notre serveur HTTP. Et ici, nous voulons appeler notre serveur de création et fournir dans notre application. Et juste pour te rappeler, app, c'est une instance de notre Express. Il s'agit de notre serveur express. Nous créons ici un serveur HTTP. De plus, la prochaine chose que nous voulons entrer ici est socket. C'est ici, où un serveur important avec un grand S à partir du package d'E/S socket. Et maintenant, nous pouvons créer directement notre serveur de socket. Donc voici const ion, et ici nous appelons serveur. Et à l'intérieur, nous fournissons notre serveur HTTP. C'est exactement pourquoi nous avons créé ce serveur HTTP en premier et avant qu'il ne soit exprimé. Dans ce dossier, nous avons trois choses différentes. Tout d'abord, nous avons notre application, nous permet de travailler directement avec Express. Deuxièmement, nous avons notre serveur HTTP, que nous pouvons commencer par un certain port. Le troisième est notre IR, nous pouvons donc faire des requêtes WebSockets. Et juste pour vérifier que tout fonctionne, je veux utiliser ici notre application et essayer simplement apt-get slash. Nous voulons donc créer notre nouvelle route sur slash. Et ici, nous n'avons besoin de rien, mais je veux juste répondre avec une ficelle. C'est pourquoi nous pouvons écrire ici une demande et une réponse. Et ici, l'API d'envoi de points de repos est en place. Si vous n'êtes pas familier avec Express, c'est ainsi que nous créons des routes de lecture uniquement à l'intérieur de notre serveur principal. Nous disons donc, d'accord, nous créons maintenant obtenir la route pour la barre oblique, ce qui signifie pour la page d'accueil. Voici notre Kohlberg. À l'intérieur de notre Kohlberg, nous recevions des demandes et des réponses. Et ici, nous pouvons utiliser le point send pour envoyer la chaîne à ce tour spécifique. La dernière chose que nous devons faire ici est de démarrer notre serveur. Ici, nous pouvons écrire un serveur HTTP. N'écoutez pas et n'entendez pas. Nous fournissons un port, par exemple, pour 1001. Après cela, nous avons un rappel. Le serveur Web de la tour est aussi talentueux. Nous pouvons donc écrire dans un journal de console, par exemple, que notre API écoute sur le port. Et voici notre rôle. Et en fait, il aurait été isolé pour mettre le sport dans un fichier de configuration supplémentaire, mais pour l'instant il ira aussi. Voyons donc si cela fonctionne. J'ai ici un onglet avec un serveur API ouvert. Et comme vous pouvez le voir ici, aucun démon n'a redémarré ce serveur web encore et encore. Et à un moment donné, notre API de journal de console écoute sur le port 4,001, ce qui signifie que même le navigateur, nous ouvrirons l'hôte local pour 1001. Vous pouvez voir ici que notre API de message est active, mais elle n'est pas tolérable. Je veux également vérifier si notre connexion de couche de socket fonctionne. C'est pourquoi ici après EB, nous pouvons écrire ir point et ici nous l'avons sur. Et comme vous pouvez le voir, tout d'abord, nous obtenons tous les types prêts l'emploi avec Socket Layer. Nous n'avons pas besoin d'installer de package supplémentaire. Deuxièmement, vous pouvez le voir sur la fonction d'écoute de notre socket IO, ce qui signifie que nous pouvons écrire ici, et nous fournissons ici comme premier paramètre de connexion. Et en fait, c'est l'action par défaut qui peut se produire dans les E/S de socket. Et voici notre rappel. Nous ne voulons rien pour l'instant, mais nous pouvons simplement écrire console.log connected. Et nous ne pouvons pas vraiment voir que la couche socket fonctionne pour nous parce que nous lui avons simplement défini un onglet sur le back-end, mais pas sur le client. Mais c'est ainsi que nous écrirons notre code Socket Layer sur le backend et nous y sommes parfaitement préparés. Ici, nous zappons, nous travaillons avec Express avec un yard, nous travaillons avec Socket Layer et serveur HTTP que nous utilisons pour démarrer le serveur. Et la dernière chose que nous devons faire ici est de configurer notre mangouste. Et juste pour vous rappeler, mongoose le package pour fonctionner avec MongoDB. Donc, ici en haut, je veux entrer une mangouste. Et voici un point très important. Vous ne voulez jamais démarrer vos serveurs Web avant de vous connecter à la base de données. L'idée principale est qu' à l'intérieur de votre observateur, vous allez faire quelques requêtes à la base de données, et la base de données n'est pas encore prête, alors nous pouvons faire cette requête, qui signifie en fait chaque fois nous voulons être sûrs que MongoDB est, leur connexion est établie. Et ce n'est qu'après cela que nous démarrons notre serveur Web. C'est ici ce que je veux écrire après notre socket IO, nous pouvons écrire ici Mongoose dot et nous avons ici une méthode connect. Et en fait, à l'intérieur, nous voulons fournir notre URL mongodb. Donc ce que je veux coller ici, c'est cette année, c'est MongoDB deux-points slashes, barre oblique du port 27017 de l'hôte local l Trello. Et en fait, cette partie sur la gauche est le chemin par défaut de MongoDB. Et peu importe comment vous avez installé Mongo DB manière officielle ou avec le conteneur Docker, cela fonctionnera exactement de la même manière. Soit vous avez un processus MongoDB en cours d' exécution sur votre machine, sur le sport, soit vous avez un MongoDB en cours d'exécution à l'intérieur du conteneur avec le sport, qui est disponible à l'extérieur sur notre machine locale. Ici, après la barre oblique, c'est juste le nom de la base de données que vous pouvez écrire ici, n'importe quel nom et elle sera créée. Je viens d'écrire ici la bande annonce, comme le nom de notre projet. Cette ligne est donc en fait une promesse. C'est pourquoi nous pouvons écrire point. Ensuite, une fois que nous nous sommes connectés avec succès à notre base de données MongoDB, il sera déclenché. Et maintenant, à l'intérieur, nous pouvons tout d' abord écrire que nous nous sommes connectés avec succès à notre base de données. Je peux donc écrire ici connecté à MongoDB. Et je souhaite également déplacer cet écouteur HTTP à l'intérieur. Dans ce cas, tout d'abord, notre connexion à MongoDB est établie. Ensuite, nous démarrons notre serveur. Maintenant, je veux accéder à notre serveur Web et vérifier s'il fonctionne. Comme vous pouvez le voir maintenant, je reçois un message connecté à MongoDB et après le semestre réussite de notre API, le standard, ce qui signifie en fait que le standard, ce qui signifie en fait c'est exactement notre objectif. Tout d'abord, MongoDB. Deuxièmement, notre serveur Web. En fait, en ce moment, vous pouvez obtenir un peu d'Azure concernant la connexion ici. Et le problème le plus courant que vous pourriez avoir, vous n'avez pas démarré votre processus MongoDB sur votre machine. S'il n'est pas démarré, ne pouvons pas nous connecter à une base de données MongoDB. Ensuite, vous obtiendrez probablement une erreur, comme impossible de vous connecter à Mongo DB ou échec de la connexion. Mais si vous voyez sur votre écran connecté à MongoDB et que le paiement est démarré, cela signifie que vous avez tout configuré avec succès. Et nous avons démarré notre serveur Web sur le backend avec MongoDB et socket IO. 9. Créer un modèle d'utilisateur de Mongoose: Dans cette vidéo, nous allons parler création de notre modèle d'utilisateur. En fait, le démarrage de l'application va enregistrer les utilisateurs. Donc, utilisateur actuel, nous pouvons nous connecter avec l'utilisateur, ce qui signifie que nous devons gérer nos utilisateurs sur le front-end, sur le backend et dans la base de données. Dans cette vidéo, nous allons nous concentrer sur la mangouste et la base de données. Encore une fois, ce qui est mongoose était déjà installé dans le package R JSON. Vous pouvez voir Mongoose ici, mais ce qu'il fait essentiellement, c'est le site officiel de Mongoose. Vous pouvez voir ici l'exemple. Nous injectons donc des biens humains et nous faisons connecter Mongoose point. Et voici une base de données MongoDB. Après cela, nous pouvons écrire le module mongoose cat, et nous définissons que notre chat a nommé string, ce qui signifie en fait que cat est notre entité. Et maintenant, nous pouvons créer cette entité juste à l'intérieur de JavaScript. C'est là que nous en sommes au Royaume-Uni, et nous indiquons à l'intérieur du nom. Nous avons donc créé un minou, qui n'est qu'un objet. Mais maintenant, dans Katie, nous avons une méthode de sauvegarde. Et cette méthode retourne comme une promesse, qui signifie en fait que c'est ainsi que nous allons enregistrer l'enregistrement dans MongoDB. Maintenant, vous pouvez vous demander, pourquoi avons-nous besoin de mangouste ? Pourquoi nous ne pouvons pas simplement utiliser le pilote officiel MongoDB comme mongodb dot save et lancer dans un objet que nous voulons enregistrer. Ce n'est pas confortable de travailler dans le grand projet, même dans le projet moyen, ce n'est pas si confortable parce que vous n' avez aucune abstraction. Vous écrivez du code de très bas niveau, comment vous devez enregistrer des données dans une base ou comment vous allez les lire. En fait, c'est pourquoi nous préférons utiliser rampes dans nos projets backend. Qu'est-ce que Ram Dass est rapide, nous définissons quelque chose comme des modèles, qui sont nos entités au sein de notre projet. Par exemple, nous avons un utilisateur qui a peut-être des tâches ou vous avez des tableaux si nous parlons d'application de parcours, etc. Ensuite, nous pouvons définir les relations entre ces modèles. Et puis toutes ces relations se font de manière beaucoup plus facile. Nous pouvons le faire nous-mêmes avec MongoDB, ce qui signifie simplement que nous écrivons moins de code. C'est pourquoi, dans cette vidéo, nous voulons nous concentrer sur notre modèle d'utilisateur. Et la première chose que je veux faire dans la source, je veux créer un dossier de types. Et en fait, nous sommes ici en TypeScript, ce qui signifie que nous devons l'exploiter. Et c'est très important pour investir plus de temps dans TypeScript que dans l' écriture de votre code. Dans ce cas, il vous sera plus facile de développer votre application. C'est là que, dans les types de source, je veux créer des points d'interface utilisateur. Et comme vous pouvez le voir ici, j' ai cette notation où nous avons un suffixe de ce que c'est exactement. À l'intérieur, je veux créer notre nouvelle interface utilisateur. Et si vous ne connaissez pas bien TypeScript, c'est juste une définition de l'objet que nous pouvons utiliser partout. Dans ce cas, nous utilisons l'interface Word, qui est un mot réservé dans TypeScript. Et ici, nous définissons un utilisateur d' interface et nous pouvons définir les champs que nous avons à l'intérieur de notre utilisateur. Tout d'abord, nous devons créer un e-mail, car c'est ce que nous utilisons dans l' application pour enregistrer un utilisateur, valider cet utilisateur, puis envoyer un e-mail à l'utilisateur. De plus, nous avons besoin d'un nom d'utilisateur et il sera diffusé en continu et un mot de passe sera également nécessaire. Et évidemment, nous devons hacher un mot de passe et ne jamais arrêter les mots de passe juste comme une contrainte plane. Enfin et surtout, ici sera créé à, nous n'avons pas besoin d'utiliser ce champ, mais c'est vraiment agréable de l'avoir, tout d' abord à des fins de débogage. Et deuxièmement, nous pouvons l' obtenir chez Mongoose tout juste sorti de la boîte et il sera daté. Voici donc à quoi ressemble une interface utilisateur. Maintenant, dans l'ensemble de notre application, dans notre back-end, nous pouvons utiliser cette interface utilisateur. Maintenant sur la droite, je veux créer un modèle pour cet utilisateur. C'est pourquoi, dans la source, nous pouvons créer un nouveau dossier appelé modèles. Et à l'intérieur, nous pouvons enregistrer les points utilisateur, et c'est notre modèle. C'est exactement quelque chose pour Mongoose. Ce que je veux écrire ici, c'est notre schéma utilisateur. Et ce que cela signifie ici, nous définissons un schéma de notre modèle. Et pour cela, nous utilisons un nouveau schéma. Et comme vous pouvez le voir, je n' ai pas de saisie semi-automatique. Essayons donc d' importer ici le schéma. Et comme vous pouvez le voir, je n' ai pas une bonne entrée ici. J'ai un autre commentaire de l'inspecteur, et ce n'est pas correct. Je vais donc taper ici le schéma d'entrée de mongoose. Vérifions-nous s'il y a une erreur. Nous n'avons pas d' erreur, ce qui signifie que c'était juste un problème de mon éditeur. Ici, je peux inspecter le schéma, ce qui signifie qu'il est vraiment disponible avec TypeScript à l'intérieur. Nous voici dans votre schéma. Et maintenant, entre crochets, nous pouvons définir notre objet, mais le schéma n'est pas ce que nous allons utiliser dans l'application. Ça doit être un modèle. C'est pourquoi ici nous pouvons écrire cela puis exporter le modèle par défaut. Et ce modèle provient également de Mongoose. Mettons donc ici le modèle de virgule. Et ici model est une fonction où nous fournissons notre chaîne. Il sera utilisé avec une grande teinte. Et il y a un deuxième argument. Nous fournissons ici un schéma utilisateur. C'est ainsi que nous définissons un modèle à l'intérieur de Mongoose. Nous pouvons donc exporter ici le modèle par défaut que nous fournissons ici, le nom et notre schéma. Et ici, nous devons définir notre schéma. Mais nous sommes en plein TypeScript. Et en fait, ce n'est pas le meilleur moyen de créer un nouveau schéma. Pourquoi est-ce que c'est ? Ici, nous mettons en évidence notre schéma et vous pouvez voir qu'une grande partie de n est ici et c'est mauvais. Pourquoi est-ce que c'est ? Parce que nous n'avons défini aucun type de schéma. C'est pour cela que nous voulons faire. Nous voulons créer une définition du schéma pour un utilisateur. Je veux donc sauter ici sur la gauche et créer ici une interface experte. Il s'agit donc d'une nouvelle interface pour le document utilisateur. Voici une énorme différence, nous avons ici une interface pour l'utilisateur. C'est juste l'utilisateur avec les champs et c' est utiliser un document. C'est ce que nous utilisons uniquement pour la mangouste. Et ici je veux écrire x tans. Et si vous ne savez pas avec quoi s'étend, prenez simplement tous les champs de notre utilisateur ici. Je veux donc écrire ici extends User comma document. Et en fait, ce document doit être chargé depuis Mongoose. Donc ici en haut, j'ai besoin d'écrire le document d'entrée de Mongoose. Et en fait, pour l'instant, nous n' avons rien à fournir à l'intérieur. Et vous pouvez demander maintenant, d'accord, mais cela n'a aucun sens ce qui s'est passé ici. Nous avons créé un document utilisateur d'interface. Ici, nous sommes simplement un utilisateur étendu et un document. Et oui, c'est logique parce que tout d'abord, nous avons notre interface utilisateur. Nous pouvons l'utiliser partout. C'est notre rôle, mais nous le mélangeons également avec le document. Et le document vient de Mongoose. C'est la définition du document et la partie la plus importante est, par exemple, cet AD, car chaque document à l'intérieur de mongodb possède NAD. Et dans ce cas, nous n'avons pas besoin de spécifier que l'utilisateur a AD, il provient du document de mongoose. Et maintenant, nous pouvons sauter ici sur la droite et utiliser souvent le schéma. Nous pouvons fournir dans les réservoirs un document utilisateur que nous venons de créer. Et maintenant je peux le saisir ici en haut. C'est donc à partir de notre interface utilisateur de types. Dans ce cas, nous disons que notre document utilisateur est ce que nous devons fournir dans notre schéma utilisateur. Et exactement la même chose que nous pouvons faire avec notre modèle ici, nous pouvons fournir notre document utilisateur. Et si vous ne savez pas ce que signifie cette partie, il s'agit en fait d'un générique, ce qui signifie en fait que nous fournissons un type générique. Il peut s'agir de n'importe quoi par défaut. Mais si nous inspectons maintenant notre schéma, vous pouvez voir qu'il n'en est plus. Nous avons ici notre document utilisateur, ce qui est extrêmement important pour nous et pour la validation de TypeScript. Parce qu'en fait ici, maintenant à l'intérieur de ce que je veux faire, je veux lancer quelque chose qui n' existe pas à l'intérieur de l'utilisateur. Par exemple, supposons que nous avons un formulaire de propriété d'utilisateur interne. Et ici, à l'intérieur, nous voulons fournir le type est chaîne. Et je sauvegarde cela , puis j'entre ici et je réduis cet argument de type foo n'est pas assignable au paramètre de type. Et ici, nous pouvons voir notre nom d'utilisateur e-mail, passe créé ajouter un identifiant de soulignement, qui provient du document et ici pour souligner la version. qui signifie en fait que si nous n'essayons pas ce document utilisateur ici, nous n'obtenons aucune validation de TypeScript. Il est extrêmement important que nous l'obtenions. Maintenant, à l'intérieur du masque, fournissez tous les champs. Chairman d'Etre pour notre utilisateur. Commençons par l'e-mail. Donc ici notre champ est email et puis dit, Nous devons fournir le type, c'est une chaîne. Deuxièmement, ici nous pouvons dire propriété requise et comme vous pouvez le voir, TypeScript nous aide et montre quelles propriétés nous pouvons fournir un aperçu Mongoose. Donc en fait à l'intérieur requis, mais peut fournir un tableau avec des données et des messages valides. Parce qu'en fait, nous voulons afficher sur le front-end un message sympa lorsque notre e-mail n'est pas valide. Il ne s'agit donc pas simplement d'une chaîne. Cet e-mail n'est pas valide. Et pour cela, nous pouvons entrer ici sur le validateur supérieur. Ici, je veux entrer des données valides pour le validateur John. Comme vous pouvez le voir, nous obtenons un module d'erreur. validateur n'est pas installé, nous devons donc accéder à notre serveur. Ici, j'arrête le serveur Web et ils vont écrire ici des données valides sur des déficiences, mais ce n'est pas tolérable. Je souhaite également obtenir des types pour ce package. C'est y ici aux types slash valid data, mais il doit être installé en mode développement. Donc ici, n'oubliez pas, moins t. Nous pouvons maintenant ouvrir sur la droite, sont empaquetés en JSON et comme vous pouvez le voir ici dans les dépendances de développement, j' ai validé des types validateur et des indépendances validées. Maintenant, nous n'avons aucune erreur pour les données valides, nous pouvons donc les spécifier à l'intérieur requis. Et en fait, je me trompe un peu. Ce champ n'est pas obligatoire car suffit de fournir s'il est obligatoire ou non. Dans notre cas, l'e-mail est obligatoire. Ici, en tant que deuxième paramètre, nous pouvons fournir un message d'erreur s'il est vide. Et ici, nous pouvons fournir un e-mail est requis. Et après cela, nous avons notre validation. C'est ici que nous avons une propriété validate, et c'est exactement là que nous voulons utiliser notre validateur. Donc, ici, je peux écrire un point de validation et nous obtenons une bonne auto-complétion à cause des types. Et ici je vais écrire un e-mail. Nous avons donc ici de nombreuses validations. Et où je reçois une validation par e-mail prête à l'emploi. Et il y a un deuxième argument que nous pouvons fournir ici, l'e-mail non valide. Enfin, je souhaite créer des index. Et en fait, si vous ne savez pas ce que sont les index, sont des éléments qui peuvent accélérer les requêtes de votre base de données. Et deuxièmement, cela peut rendre, par exemple, un champ de courrier électronique unique. Dans ce cas, je souhaite écrire des index de création. Et ici en tant qu'objet, je fournis un aperçu, unique, vrai ce qu'il fait, il lit notre e-mail est un index unique dans ce cas, mais ne peut pas enregistrer deux personnes avec le même e-mail. Encore une fois, dans le schéma mongoose, nous fournissons tous les champs dont nous avons besoin pour notre utilisateur. Et le premier champ était un e-mail ici, mais doit fournir un type à l'intérieur. Et c'est exactement la ligne de chargement dont nous avons besoin par défaut. Mais en fait, nous pouvons fournir ici requis que nous pouvons définir en vrai ou faux ici nous pouvons fournir des validateurs et nous pouvons créer des index. Et en fait, nous pouvons faire tout cela comme ce pilote MongoDB à l'intérieur du plan. C'est pourquoi je préfère utiliser Mongoose parce que c'est dans un domaine où nous sortons toutes ces choses de la boîte. Le champ suivant est notre nom d'utilisateur. Nous pouvons donc ici fournir notre nom d'utilisateur et ce sera plus facile. Tout d'abord, le type sera chaîne, et deuxièmement, required doit être vrai. Et ici, je veux également fournir l'erreur de validation. C'est pourquoi nous utiliserons la même notation avec le tableau. C'est vrai et le nom d'utilisateur est requis. Nous pouvons maintenant copier-coller cet utilisateur car ce sera le même. Et le dernier, ce que nous avons ici est notre mot de passe et notre mot de passe est une chaîne de caractères, et il est également requis, mais ici le mot de passe est requis. Et la dernière chose que nous voulons faire est de sélectionner false. Et en fait, ce que fait select false, il ne sélectionnera jamais ce champ lorsque nous ferons une demande. Par exemple, nous voulons obtenir un identifiant utilisateur à partir de la base de données. Nous ne récupérerons pas ce terrain. Et c'est extrêmement important car cela permet d'économiser notre application. Peu importe les requêtes que nous écrivons. Nous savons toujours que nous ne récupérerons pas de mot de passe, ce qui signifie que nous sommes par défaut en sécurité. Enfin, ce qu'ils veulent fournir ici, ce sont les horodatages. Nous pouvons donc fournir ici à l'intérieur d'un objet et écrire ici des horodatages, et ici nous le définissons sur true. Dans ce cas, notre propriété CreatedAt sera directement générée par mongoose. Mais comme vous pouvez le voir ici, il y a une faute de frappe. Nous n'avons pas besoin de fournir le sujet ici. Il s'agit d'un deuxième argument après notre objet, ce qui signifie que dans le nouveau schéma tant que fonction, nous fournissons d'abord cet objet avec tous nos champs, et deuxièmement, l'objet avec horodatages vrai. C'est donc le deuxième document sur la façon dont le nouveau schéma. Nous sommes donc prêts avec la première partie de notre modèle. Mais nous avons un énorme problème ici si nous essayons simplement d'utiliser notre utilisateur comme ça. Par exemple, ici, nous pouvons écrire un nouvel utilisateur et nous avons été fournis dans un objet avec un mot de passe de nom d'utilisateur e-mail. Et après cela, nous appellerons safe, puis notre utilisateur enregistrera directement ce mot de passe sous forme de chaîne simple. C'est interdit, c'est mal et nous ne devrions jamais le faire. C'est pourquoi nous devons résoudre ce problème. Ce que nous pouvons faire à ce sujet, nous devons hacher notre mot de passe avant de le stocker dans la base de données. Et pour cela, nous pouvons utiliser une bibliothèque vraiment sympa, qui s'appelle la crypte. Et c'est la solution la plus populaire. Hachez le mot de passe. C'est ici que nous devons accéder à la console et installer ce package. Donc npm a installé be crypt jazz et nous voulons également installer des typings. Donc ici aux types slash be crypt jazz, mais évidemment ça doit être width moins t. Alors vérifions-nous le son. Je passe au package JSON. Et ici, je vois que les types sont des chrétiens dans des dépendances de développement et des indépendants cryptés. C'est tout à fait correct. Maintenant, ce que nous pouvons faire ici, nous pouvons définir la prière par points du schéma utilisateur. Et c'est la possibilité d'exécuter une fonction avant quelque chose. Ici, nous sommes intéressés à fournir un coffre-fort, ce qui signifie en fait que nous exécuterons notre fonction directement avant la sécurité. Donc, ici, je veux écrire une fonction sinc et ils diront Pourquoi j'utilise ici la fonction et non la fonction flèche dans une seconde. C'est vraiment important de l'écrire ainsi. Et voici le Next. Et maintenant, nous avons des crochets et nous pouvons faire quelque chose à l'intérieur. L'idée principale est que nous pouvons faire ce que nous voulons ici avec notre objet. Et après cela, lorsque nous changeons de sujet, par exemple, nous devons appeler ensuite et mongoose procédera à la sauvegarde de nos données. Et les préventes signifient que cette fonction sera appelée, d' abord après Create et ensuite après la mise à jour. Et c'est exactement ce que nous voulons. Par exemple, nous voulons non seulement créer un mot de passe pour l'utilisateur, mais également le mettre à jour ultérieurement dans le formulaire de mise à jour. Et la première condition que je veux écrire ici est la suivante. Dans le cas contraire, ce point est modifié. Et comme vous pouvez le voir, nous avons une fonction qui est modifiée et nous pouvons fournir un mot de passe, puis nous voulons juste ne rien faire et revenir ensuite. Ce que nous faisons ici, est vérifier si notre champ de mot de passe a été modifié. Ce n'est pas le cas a été créé parce que nous y aurons un mot de passe, mais c'est le cas avec update if suggestions utilisateur et nous n'avons pas changé le mot de passe, alors cela n'a aucun sens à appliquer cette fonction. C'est ici que le poulet, d'accord, si le champ du mot de passe n' est pas modifié, alors nous disons simplement pour Mongoose, allez-y. Comme vous pouvez le voir ici, nous avons écrit une fonction sinc et non une fonction error. Et c'est important ici parce que nous voulons utiliser ici cette propriété. Et pour avoir une référence correcte , nous devons l'écrire en tant que fonction et non en tant que fonction flèche car dans un autre cas, elle sera exécutée et nous utiliserons également ici une fonction sinc car l'opération cryptée sera synchrone. Après ça, je veux écrire try-catch. Et en fait, si nous obtenons une erreur, ce sera une crypte, alors nous entrerons dans la cage. Ici, nous recevons notre erreur et nous voulons renvoyer cette Sarah à l'intérieur ensuite. Ici, nous lançons dans Azure en tant qu'erreur. Et vous vous demandez peut-être, d'accord, mais pourquoi cette étrange erreur de notation est-elle due à l'ère ? En fait, si vous essayez simplement d'écrire comme ça, nous obtiendrons une erreur. L'argument de type unknown n' est pas assignable au paramètre de type callback error ou undefined, ce qui signifie en fait que dans une cage, chaque Azure est inconnu, ce qui est évident car c'est Sketch et nous ne savons pas ce qui s'est passé. C'est pourquoi nous écrivons catch, mais en fait nous ne pouvons pas utiliser une flèche comme celle-ci et nous pouvons la fournir à l'intérieur suivant, c' est pourquoi nous devons convertir un type de notre époque en quelque chose de significatif. Dans ce cas, j' utilise la flèche S et nous pouvons fournir des erreurs dans la fonction suivante. C'est exactement ce que nous faisons ici. Maintenant, nous devons essayer notre logique pour hacher le mot de passe. Et pour cela, je veux en haut entrer notre gros module js déchiré. Je suis donc en train de saisir be crypt jazz de Big Rip jazz. Et maintenant, dans notre essai, nous pouvons d'abord prendre un sel. Et si vous ne savez pas For be crypt où générer et saler d'abord , puis nous avons fourni fonction de déchiffrement pour hacher le mot de passe. C'est par ici, nous avons besoin d'un sel. Et pour cela, nous sommes Colin qu'il nous a sertis de sel de chien. Comme vous pouvez le voir, il s'agit d'une fonction qui génère de manière synchrone du sel rapide. Et ici, nous pouvons en fournir dix, par exemple. Et il s'agit d'une fonction asynchrone. C'est là que nous devons essayer d'attendre, afin qu'il obtienne rapidement du sel. Et maintenant, nous devons mettre à jour notre mot de passe. En fait, cette fonction est appelée avant d' enregistrer cet enregistrement, ce qui signifie nous avons une référence à tous les champs que nous essayons d'enregistrer. Et ici je vais écrire ce mot de passe point pour changer le champ que nous essayons d'enregistrer. Ici, nous voulons attribuer un hachage de point d'échecs fluage de poids B et en fait un hachage, comme vous pouvez le voir ici, nous aurons notre mot de passe et à l'intérieur nous devons d'abord fournir notre mot de passe, ce mot de passe. Et deuxièmement, dans ce cas, notre mot de passe sera haché et nous allons simplement stocker un hachage dans notre base de données. Dans ce cas, après que nous appellerons ensuite et que nous devons le faire à coup sûr, ce mot de passe sera mis à jour et nous sauvegarderons le dossier vierge. C'est pourquoi à l'intérieur nous voulons écrire return next et nous l'appelons simplement, cela déclenchera l'enregistrement d'un enregistrement dans la base de données. Et la partie la plus importante qui redessine cette logique à l"intérieur du modal vendu cette logique avec sauvegarde est complètement isolée à l"intérieur du modèle. Et lorsque nous écrirons code lié à l'utilisateur, nous ne connaîtrons même pas cette logique. Tout est à l'intérieur du modèle. Cela n'a rien à voir avec recherche d'un utilisateur ou son enregistrement. C'est ce qui se passe à l'intérieur du modèle. La dernière chose dont nous avons besoin pour l'avenir est la fonction valider le mot de passe. Pourquoi en avons-nous besoin ? Parce qu'en fait, lorsque nous essaierons de connecter l'utilisateur, nous voulons comparer non seulement l'e-mail, mais également le mot de passe fourni. Et nous avons une très bonne chose qui s' appelle des méthodes à l'intérieur de Mongoose. Ici, nous pouvons écrire des méthodes de schéma utilisateur, et ici nous voulons créer une nouvelle méthode, par exemple, valider le mot de passe. Et en fait, cela fonctionne exactement de la même manière, comme par exemple, les méthodes à l'intérieur des classes. Nous pouvons donc faire appel à notre instance de notre utilisateur. Cette méthode valide le mot de passe. Et ici, nous devons fournir la fonction. Et encore une fois, je n'écris pas ici la fonction flèche mais juste une fonction ici en obtenant le mot de passe en tant que paramètre. Parce qu'en fait, lorsque nous voulons comparer un mot de passe, nous fournirons quelque chose que nous voulons comparer. C'est ici que mot de passe est une chaîne, et ici à l'intérieur, nous voulons comparer le mot de passe fourni avec notre mot de passe dans notre instance. Ici, nous pouvons simplement retourner be grip js dot compare. Et c'est une fonction qui permet de comparer, tout d'abord, un mot de passe d'avion qui est fourni de l'extérieur. Et deuxièmement, notre chaîne, et c'est ce mot de passe point que nous stockons sous forme de hachage dans notre enregistrement. Notre dernière utilisation ressemblera donc à ceci, où, par exemple, nous avons un utilisateur et que nous voulons l'enregistrer. Nous avons donc ici un nouvel utilisateur. Nous devons le fournir dans notre e-mail. Ensuite, nous devons fournir ici un nom d'utilisateur, puis nous fournirons ici un mot de passe. Après cela, nous essaierons de sauvegarder un utilisateur. allons donc nous appeler ici. Cela permet d'économiser. Et en fait, après que Colin soit aussi mince, notre presse Save sera appelée et nous stockerons le mot de passe correct. Mais après cette ligne, nous pouvons également écrire un mot de passe de validation point utilisateur. Et ici, nous pouvons fournir n'importe quel mot de passe que nous voulons comparer. Cette fonction nous renverra vrai ou faux selon l'exactitude du mot de passe. Et c'est tout à fait correct de faire tout cela dans le modèle User et non dans certains contrôleurs où nous travaillons simplement avec des utilisateurs. Parce que dans ce cas, notre logique est complètement isolée à l'intérieur de l'utilisateur. Et maintenant, il ne nous manque qu'une seule ligne dans notre interface utilisateur types avec document utilisateur défini. Mais en fait, nous devons spécifier dans ce document utilisateur que nous avons écrit ici une nouvelle méthode, validate password. C'est pourquoi ce que je veux faire ici, je veux créer une nouvelle méthode dans validate password. Et nous savons qu'à l'intérieur nous obtenons un paramètre, nous pouvons simplement le nommer param1, et c' est une chaîne, et nous savons que nous obtenons une chaîne de caractères. Dans ce cas, j' utiliserai un document complètement correctement tapé et nous pourrons utiliser plus tard dans TypeScript pour appeler cette méthode de validation du mot de passe et obtenir la saisie semi-automatique. 10. Ajouter un enregistrement: Dans la vidéo précédente, nous avons créé avec succès notre modèle d'utilisateur. Et ils peuvent comprendre que vidéo précédente était vraiment sèche parce que nous venons créer un modèle et vous n'avez pas vu comment nous utilisions ce modèle dans une application réelle. C'est pourquoi le but de cette vidéo est de créer notre méthode d'enregistrement, qui signifie que nous allons enregistrer l'utilisateur, et c'est exactement comme cela que nous utiliserons notre modèle d'utilisateur. Examinons donc notre code. Pour l'instant, nous n'avons qu'un modèle dans les modèles sources. Et ce que nous voulons construire, c'est une architecture MVC. Qu'est-ce qu'il a une moyenne réellement exprimée en tant que cadre. Je n'ai pas d'architecture exprimée avec des routes simplement définies démarrer le serveur Web et nous sommes prêts à partir. Nous n'avons pas beaucoup de règles qui sont définies à l'intérieur. C'est pourquoi nous devons faire quelque chose par nous-mêmes. Et l' architecture très populaire qui utilise bien notre projet back-end est MVC, ce qui signifie en fait la vue du modèle et le contrôleur. Et en fait 90  % des cas, nous n'utiliserons que des modèles et des contrôleurs. Nous n'utiliserons aucune vue simplement parce que nous travaillons et créons un EPI et que nous n'avons pas besoin d'y afficher des vues. Nous répondons simplement par le châtiment et c'est tout. C'est pourquoi mon idée est de créer un nouveau dossier appelé controllers. L'idée principale est qu'ici, sororité S enregistrera tous nos itinéraires. Par exemple, nous avons ici un itinéraire vers la page d'accueil. L'idée principale est que nous n'écrivons pas la logique de cette route directement en tant que callback, nous l'écrirons dans un contrôleur spécifique au site, ce qui signifie en fait toutes nos requêtes que nous voulons scinder différents contrôleurs. Par exemple, nous avons un contrôleur utilisateur et il y a eu émeutes dans toutes nos actions concernant l'inscription, la connexion, la déconnexion de l'utilisateur, etc. Ensuite, nous avons un contrôleur de carte où nous écrirons à l'intérieur de tout ce qui est lié à la carte. partie la plus importante est que modèle interne définirait façon dont nous travaillons avec la base de données. Nous créons donc notre entité comme utilisateur, mais à l'intérieur du contrôleur en utilisant cette entité. Et nous créons certaines réponses de notre API, ce qui signifie en fait que nous séparons notre logique. Tout ce qui était la base de données va aux modèles, mais nous utilisons des modèles dans de tels contrôleurs. C'était donc la théorie. Créons maintenant notre premier contrôleur. Et pour cela, je veux m' inscrire ici dans votre itinéraire, et ce sera un itinéraire pour l'enregistrement. C'est pourquoi nous avons ici la publication de l'application et l'URL sera celle des utilisateurs de slushy pie slash. Voici le registre des points de notre contrôleur d'utilisateurs. Donc notre première règle ici est que toutes nos URL, nous allons commencer par une API slash, parce qu'en fait c' est vraiment sympa d' avoir un espace de noms pour notre API. Deuxièmement, comme vous pouvez le voir là où ce n'est pas important, quelque chose comme register où les entrées ici sont contrôlées par tout l'utilisateur et nous devons avoir un bon nommage. Le nom typique et pour les contrôleurs est toujours plus actif que, par exemple, contrôleur d' un utilisateur et non le contrôleur utilisateur. Importons maintenant l'étoile lorsque les utilisateurs la contrôlent. Et si vous ne savez pas ce que cela fait, l'idée principale est qu'à l'intérieur nous aurons un tas de fonctions. Et cette fois en tant que groupes, toutes ces fonctions se trouvent à l'intérieur de cet objet. Ensuite, nous pouvons écrire quelque chose comme registre des points du contrôleur des utilisateurs. Ici, nous voulons l' importer, et ici nous avons la barre oblique de nos contrôleurs, et ici nous allons créer des utilisateurs de fichiers. Et comme vous pouvez le voir, cela n'a aucun sens de nommer ce fichier users controllers, car ce fichier se trouve directement à l'intérieur des controllers. C'est par ici, nous allons sauter pour que ce soit des contrôleurs. Et voici users.js. Et voici notre dossier qui est un contrôleur. Et puis dites que c'était juste, toutes les actions qui sont liées à l'entité utilisateur. Maintenant sur la droite, je veux ouvrir notre serveur Ts. Et comme vous pouvez le voir, en fait, cette partie que vous pouvez voir ici est ce que nous écrivons à l'intérieur du contrôleur. C'est donc notre rappel. Et comme vous pouvez le voir, il s'agit simplement d'une fonction simple avec la réponse à la requête. Et le troisième paramètre ici peut être le suivant. C'est pourquoi ce que je veux faire ici, je veux créer une fonction qui s'appelle register. Et il s'agit d'une fonction asynchrone. Pourquoi avons-nous besoin ici d'une fonction synchrone, parce que nous allons travailler avec la base de données et ces requêtes pour notre base de données ou en tant que synchrone. Et ici, nous obtenons comme argument est d'abord une demande, ensuite une réponse, et le dernier est le suivant. Et ce n'est qu'une fonction. Donc c'est exactement la même chose que nous collons ici directement, mais nous l'avons simplement déplacée à l'extérieur, à l'intérieur de notre contrôleur. Mais ce code est mauvais. Pourquoi est-ce que c'est ? Parce qu'en fait, nous n'avons pas saisi notre réponse à la demande. Et ensuite, ici je peux écrire deux points, et voici notre demande. Et c'est la partie la plus importante. Nous avons ici une requête qui provient de l'API Fetch. Nous n'en avons pas besoin, mais nous avons besoin d' une demande qui vient d'une expression. C'est ici, demande d'importation d'express. Et comme vous pouvez le voir maintenant, nous avons une définition complètement différente. Nous avons ici la robe intérieure, le corps, le corps de la demande. Et c'est exactement ce dont nous avons besoin. En outre, nous avons besoin ici non seulement d'une demande mais d'une réponse, et je suis en Grande-Bretagne ici également une réponse. Tapez ici response en tant que réponse. Et le dernier n'est pas le suivant, mais la fonction suivante. Ici, nos deux entrées sont correctes. C'est de l'expression. C'est ainsi que nous allons généralement créer une nouvelle action du contrôleur. Peu importe qu'il s'agisse un contrôleur utilisateur ou d' un contrôleur d'article, ce sera toujours le même. Maintenant, directement à l'intérieur, ils veulent écrire try-catch. Pourquoi est-ce que c'est ? Parce qu'en fait, nous allons écrire un code synchrone avec async wait dans cette fonction. Et nous voulons gérer toutes les erreurs. Et le moyen le plus simple a été exprimé pour gérer une erreur est d'utiliser next, et nous l'avons déjà utilisé précédemment dans notre modèle. Ici, cela fonctionne exactement de la même manière. Donc nous pouvons écrire ici, essayer et nous avons une cage et nous obtenons une erreur. Ce que nous voulons faire, celui à appeler ici ensuite et à lancer l'erreur. C'est ça en fait, est une seule ligne qui propagera notre erreur à exprimer, puis express montrera Sarah à l'écran. Maintenant, à l'intérieur, nous voulons créer un utilisateur car en fait, il s'agit l'enregistrement et l'enregistrement signifie simplement créer un utilisateur. C'est pourquoi je souhaite importer le modèle utilisateur à partir de. Et ici, nous avons nos modèles slash user model que nous avons créés précédemment. Et comme vous pouvez le voir ici, je ne l'ai pas nommé user avec un U majuscule, mais j'ai utilisé le modèle. C'est juste pour être parfaitement clair dans notre code que nous travaillons avec le modèle. Et maintenant, nous pouvons utiliser ce modèle à l'intérieur. Nous pouvons donc écrire ici const, et voici un nouvel utilisateur, parce que nous voulons enregistrer un nouvel utilisateur et nous sommes ici dans le modèle utilisateur hue. Et maintenant, à l'intérieur, nous devons transmettre quelques données. Dans notre cas, nous devons passer ici en homme que nom d'utilisateur et mot de passe. Nous voulons donc écrire cela ici. Nous voulons définir un e-mail, et il s'agit d'un e-mail point body dot. Ensuite, nous voulons définir ici username, et ceci est request point, point username. Et le dernier est mot de passe, et c'est le mot de passe du point du corps du point de demande. Mais ici, nous avons un énorme problème. Par défaut, express ne peut pas fonctionner avec l'ébullition et, par défaut, express ne lui transmettra pas de tau. C'est pourquoi ce que nous devons faire, nous devons installer un package supplémentaire pour cela. Et ce package s'appelle BodyParser. C'est pourquoi je vais sauter dans la console et savoir que je suis à l'intérieur du serveur. Je vais écrire npm install. Et ici, nous voulons installer BodyParser. J'appuie sur Entrée et le package est installé. Nous pouvons maintenant redémarrer notre serveur et revenir en arrière. L'idée principale est donc qu' ici à la place de la sororité S, je vais importer mon analyseur corporel. Appelons-le BodyParser avec CamelCase et nous l' importons à partir du package BodyParser. Maintenant, quelque part ici, avant de faire nos routes, nous pouvons écrire ab use et à l'intérieur nous voulons essayer BodyParser dot json. Et en fait, ici, vous pouvez vérifier directement ce que fait BodyParser Jason et il renvoie un middleware, le tone lip analyse JSON et c'est exactement ce que nous voulons. Nous voulons transmettre notre JSON, mais ce n'est pas seulement cela, mais nous voulons également un analyseur de corps IPO supplémentaire. Et ici, l'URL sera codée par point. Et à l'intérieur, nous fournissons des services étendus à travers ce que font ces deux lignes. La première ligne recherchera simplement le type de contenu json d'application , puis les parents d'un corps dans le JSON. Nous pouvons donc travailler avec notre corps comme un objet et c' est extrêmement facile. À la ligne suivante, nous ferons exactement la même chose , sauf pour les chaînes codées en URL. Ensuite, nous aurons aussi notre corps. Ainsi, avec cette configuration dans chaque projet, vous pouvez travailler normalement avec l'API où vous avez body comme adjacent. Et c'est exactement ce que nous faisons ici. Nous lisons le corps à la demande. Maintenant, je veux connecter notre nouvel utilisateur par console afin que nous puissions vérifier à quoi il ressemble. Et après cela, je veux essayer de sauvegarder l'utilisateur. Donc, ici, nous pouvons essayer l'utilisateur enregistré, et ici nous pouvons appeler un poids dans votre sauvegarde de points utilisateur. Cette ligne unique créera un nouvel utilisateur France dans la base de données. C'est pourquoi je veux ici consigner l' utilisateur enregistré, le coma, l'utilisateur enregistré. Maintenant, je veux utiliser un tel outil qui s' appelle Postman pour faire une demande. Et si vous n'avez pas de facteur sur votre machine, vous pouvez simplement passer à Postman. Ne le chargez pas ici. C'est totalement gratuit. Il comporte des niveaux payants, mais nous n'en avons pas besoin pour notre cours. Ici, on dirait. Et en fait, ce que nous voulons faire, faire une demande de publication sur notre URL. Et ici, nous avons notre hôte local pour 1001 utilisateurs de slash slash. Maintenant, nous devons sauter au corps et sélectionner ici mal. Et sur la droite, nous pouvons dire que c'est adjacent. Ce que nous voulons maintenant passer à l'intérieur est un objet avec trois champs. Tout d'abord, nous avons ici un e-mail, par exemple, foo sur gmail.com. Ensuite, nous avons notre champ nom d'utilisateur, par exemple foo, et nous avons notre champ mot de passe, par exemple 123. Nous allons maintenant envoyer une demande et vérifier si elle fonctionne. Comme vous pouvez le constater, la demande est bloquée. Et c'est tout à fait normal parce qu'en fait ici mais je n'ai pas appelé Rest Jason par exemple. C'est pourquoi c'est une arme de poing. Mais maintenant, nous pouvons passer à l'intérieur la console et voici notre sortie. Tout d'abord, nous pouvons voir ici notre nouvel utilisateur. C'est avant d'enregistrer. C'est ce que nous avons après Colin, le nouveau modèle d'utilisateur, ce qui signifie en fait que nous jetons à l'intérieur ces trois champs et que nous obtenons l'utilisateur d'une seule Goose. Et comme vous pouvez le voir, la principale différence de notre objet est que nous avons ici NAD, qui est un AD MongoDB, et il a été généré automatiquement rapidement. Et en fait, après cela, nous pouvons utiliser ce nouvel utilisateur et l'enregistrer, par exemple, base de données avec la méthode de sauvegarde par points, ce qui est extrêmement facile. Et la partie la plus importante est ici l'utilisateur enregistré. Il s'agit de notre utilisateur enregistré, qui provient de la base de données. Comment pouvons-nous savoir qu' il est déjà enregistré ? Tout d'abord, nous voyons ici notre mot de passe et notre mot de passe ici. Nous avons donné 123, mais ici nous ne l'avons pas enregistré comme 123. Il s'agit d'un mot de passe haché. Pourquoi cela se produit-il ? Parce qu'en fait nous définissons le modèle et que nous avons ici une méthode appuyez sur Enregistrer. Et juste pour vous rappeler, ici nous avons généré un hachage à partir de notre mot de passe et nous l'enregistrons avec la crypte au lieu du mot de passe. Et c'est un modèle extrêmement important. Nous ne voulons pas écrire ici logique concernant le remplacement du mot de passe par le hachage. Cela n'a aucun sens car nous voulons définir un modèle avec une certaine logique. Et puis ça se passe comme par magie parce que c'est défini. Dans ce cas, nous enregistrons, nous venons de changer notre mot de passe et notre hachage et à l'intérieur de notre contrôleur sans rien savoir à ce sujet. Les mêmes objectifs concernant ces champs créés et mis à jour à. Ces deux champs ont été ajoutés pour nous parce que nous avons défini ici les horodatages vrais. Notre utilisateur a donc été enregistré avec succès dans MongoDB. Mais en fait, nous ne pouvons pas simplement lancer l' utilisateur enregistré en tant que réponse. Est-ce que tout d'abord, nous n'avons pas besoin de tous les champs et bien sûr, nous ne devrions jamais donner ce mot de passe à l'extérieur. Et en fait juste pour vous rappeler ici, l'intérieur de l'utilisateur de nos modèles, nous avons dit que le mot de passe n' est pas sélectionné, il est sélectionné faux. Mais en fait, après avoir enregistré l'utilisateur ici, ce mot de passe est renvoyé rapidement. Et en fait, si nous nous en sortons bien, nous n'obtiendrons pas le champ du mot de passe. Mais après avoir enregistré, l'utilisateur l' obtiendra évidemment. C'est pourquoi nous devons créer une réponse adaptée à nos besoins. C'est pourquoi je veux créer une fonction supplémentaire, normaliser l'utilisateur. Et ici, nous obtenons l'utilisateur et nous savons qu'il s'agit d'un document utilisateur. Et comme vous pouvez le voir dans notre document utilisateur, nous pouvons entrer à partir de l'interface utilisateur de types. Juste pour vous rappeler, utiliser un document est juste comme un objet utilisateur avec ID et méthode de validation du mot de passe. Et comme vous pouvez le voir ici, nous pouvons inspecter un nouvel utilisateur et nous pouvons voir que c'est utiliser un document et la propriété, c'est exactement ce que nous passons ici et ici dans cette fonction, nous voulons renvoyer l'utilisateur normalisé pour l'API. Donc tout d'abord, nous aurons ici un e-mail, c'est l'e-mail point de l'utilisateur. Ensuite, nous voulons notre nom d'utilisateur. Il sera utilisé nom d'utilisateur, et le dernier est 80, c'est l'ID de point utilisateur. Et juste pour vous rappeler, dans MongoDB ou les dames sont stockées avec un identifiant de soulignement. Mais en fait, dans Mongoose, nous pouvons les utiliser dans les deux sens, comme l'identifiant du trait de soulignement et comme le point AD. Cette méthode existe déjà et c'est simplement comme références underscore id. Donc je vais normaliser l'utilisation d'une fonction complètement prête et maintenant nous pouvons appeler ici eat lorsque nous répondons avec cet utilisateur enregistré. Je peux donc simplement écrire ici en tant que sable et à l'intérieur, nous passons un utilisateur normalisé et voici notre utilisateur enregistré. Allons voir si ça fonctionne. Nous n'avons aucune erreur sur le serveur Web. Je vais ouvrir ici Postman et appuyer à nouveau sur Envoyer. Et comme vous pouvez le voir avec succès dans normalisation de notre utilisateur et nous ne sommes pas arrivés ici, par exemple, le mot de passe de retour, ce qui est extrêmement important. Mais voici quelque chose que je n'aime pas dans nos réponses. En fait, nous avons fait quelques validations à l'intérieur d'un modèle. Mais si je supprime le nom d'utilisateur ici et que je clique sur Envoyer, nous obtenons 500. Et il s'agit en fait d' une page HTML avec une certaine validation ici. Ce n'est pas ce que nous voulons, ce que nous pouvons faire ici, nous pouvons utiliser le sketch et lire les messages de notre époque. Mais le problème principal est que notre erreur n'est pas toujours une erreur de validation. Il peut s'agir, par exemple, de 500, mais nous pouvons également obtenir des erreurs de validation. Et la façon la plus correcte de le vérifier dans TypeScript est la suivante, où Azure est une instance d'erreur de validation Azure DOD. Mais ici, il est important de saisir correctement l'erreur car nous voulons importer cette erreur depuis Mongoose. Je suis donc en train de saisir notre époque depuis Mongoose. Dans ce cas, il sera traité correctement car en fait, ici, cette erreur de validation est une classe de mangouste. Et si nous avons des erreurs de validation de Mongoose, nous pouvons les traiter ici. Essayons-le dans le journal de la console et voyons ce que nous obtenons ici. Je vais appuyer à nouveau sur Envoyer. Et comme vous pouvez le voir dans la console, nous obtenons ici des erreurs. Et c'est un objet. Ce qui signifie que nous pouvons lire les messages du sujet et les afficher à l'écran. Ici, je veux créer un message de propriété. Et ici, nous pouvons écrire des valeurs de points d' objet, qui liront les valeurs de notre objet. Et à l'intérieur, nous lançons des erreurs. C'est exactement ce que nous obtenons de Mongoose et nous voulons passer en revue tous les champs. Et ici, nous obtenons une erreur et nous avons juste besoin d'un message d'erreur. Ce sera donc un tableau de chaînes. Maintenant, nous pouvons simplement écrire l'état du risque de retour, par exemple, quatre contre deux, ce qui signifie une entité non traitable. Et voici les messages JSON point, ce qui signifie que lorsque nous recevons des messages de validation, nous répondons avec ce statut et que nous affichons ces messages d'erreur, nous n'avons pas toute erreur dans la console. Essayons donc à nouveau. Je suis en train de frapper le sable et nous recevons de bons messages d'erreur. Le nom d'utilisateur est requis pour cela car ici nous avons vérifié à l'intérieur de la cage, par exemple, de la classe, nous avons normalisé nos messages ici et nous avons répondu avec eux. Et en fait, il est très logique de déplacer cette fonction plus tard vers un déplacer cette fonction plus tard vers assistant, car nous ferons exactement la même chose encore et encore, où nous en aurons une qui sera validée. Et voici la dernière étape que nous voulons franchir. Nous avons besoin que notre client fournisse un jeton, ce qui signifie que lorsque notre utilisateur est logger tin, nous générons un jeton unique pour effectuer une authentification DVT. Qu'est-ce que cela signifie ? Nous avons un jeton de chaîne spécial que nous lançons sur le client. Ensuite, le client peut joindre ceci pour être t à l'en-tête. Et plus tard, nous vérifierons si la demande est authentifiée et que le diffuseur est autorisé à effectuer certaines modifications. Mais dans cette vidéo, nous devons simplement insérer dans notre réponse, le jeton GBT que nous allons générer. Et pour cela, nous devons installer un package supplémentaire. Ici, je vais écrire le jeton Web JSON d'installation npm. Et ce n'est pas seulement qu'il voudra également taper. Voici donc les types slash JSON web token. Nous avons donc installé deux packages , puis redémarré mon serveur Web. Maintenant, revenons en arrière. Ici, nous voulons importer maintenant notre JSON Web Token, ou simplement DVT. Essayons-le ici en productivité à partir du jeton Web JSON. Et maintenant, ce que nous voulons faire ici à l'intérieur de normalize, et c'est le meilleur endroit pour le faire, parce que nous avons ici tout l'utilisateur et nous construisons quelque chose qui n'est pas lié à la base de données. Nous voulons donc générer ici notre objectif. Et pour cela, nous sommes juste Colin, points GBT signent l'intérieur. Nous devons fournir une charge utile et une clé secrète. Alors, que montrons-nous la charge utile d' aperçu ici ? Tout d'abord, nous voulons obtenir une annonce et il s'agit d'un identifiant de point utilisateur , puis d'un e-mail. C'est user.email. En fait, il nous suffit de fournir juste un identifiant pour pouvoir l'utiliser plus tard par ID. Mais le courrier électronique est également agréable à avoir pour validation et compréhension avec Susan et ce qui est secret ici. C'est juste une chaîne aléatoire qui nous aidera à décoder puis à appeler des jetons. Donc, ce que nous voulons faire ici dans ces services, créer un nouveau fichier. Par exemple, config point ds. Ici, nous allons stocker toutes les propriétés nécessaires comme par exemple, secret. Donc ici, je veux juste exporter, const, notre propriété secrète et ils le nommeront secrets, évidemment pour des raisons de production, vous voulez avoir ici quelque chose de plus sûr. Peut-être un hachage long comme 12 symboles. Maintenant, nous pouvons utiliser le secret ici simplement en inversant notre secret pour John. Et voici notre fichier de configuration. Maintenant, au lieu de cette clé secrète ou privée, je vais simplement écrire un secret. Donc, ce que fait cette ligne, elle génère un jeton qui n'est qu'une chaîne. Et maintenant, nous devons ajouter ce symbole à notre réponse. Vérifions-nous si cela fonctionne, mais nous n'avons aucune erreur. Allons à l'intérieur. Facteur, appuyez sur Envoyer. Comme vous pouvez le voir ici, je dois fournir mon nom d'utilisateur. Par exemple, pour, regardons ça. Ici, nous obtenons tous nos champs et nous parlons également. Et comme vous pouvez le voir, notre jeton n'est qu'une chaîne unique que nous attacherons à toutes vos requêtes sur le client et que nous décoderons sur le backend, ce que nous ferons dans nos prochaines vidéos. Nous avons donc mis en œuvre avec succès notre méthode d'enregistrement notre méthode d'enregistrement avec validation et normalisation de notre API. 11. Implémenter le login: Dans les vidéos précédentes, mais entièrement implémenté notre méthode de registre dans cette vidéo, nous voulons implémenter le début de notre utilisateur, mais en fait, je veux que vous essayiez de le faire vous-même car ce sera super similaire à l' inscription et nous sommes déjà tout préparés. Alors de quoi as-tu besoin pour faire un orteil ? Tout d'abord, insights server.js, vous souhaitez créer un nouvel itinéraire. Et en fait, nous avons déjà notre itinéraire pour l'inscription. Nous devons maintenant en créer un pour la connexion. Par exemple, nous pouvons créer une chaîne slash api slash users slash login. Maintenant, ici dans ce contrôlable doit créer une nouvelle connexion de méthode. La question est évidemment de savoir ce que nous allons atteindre et ce que cette méthode doit faire. Et en fait, insérez Postman, nous pouvons simplement essayer de l'utiliser. Donc, ici, vous aurez un identifiant slash et au lieu de e-mail, nom d'utilisateur, mot de passe, nous lançons simplement à notre demande e-mail et mot de passe. Nous n'avons pas de nom d'utilisateur car il s'agit identifiant et d'une adresse e-mail unique. Et ici, vous avez deux variantes possibles, comment vous pouvez l'implémenter. La première variante est plus facile. Vous voulez simplement lire un e-mail dans le corps du message. Vous voulez essayer de trouver l'utilisateur dans la base de données et le renvoyer à nouveau. Et n'oubliez pas d'utiliser l' utilisateur normalisé parce que nous avons besoin de cette discussion. Et aussi, si vous souhaitez une approche plus difficile, vous pouvez également essayer de valider non seulement l'e-mail mais également le mot de passe pour cette méthode de validation dans notre modèle. Mais même si vous essayez de faire le premier pas par vous-même, c'est très bien. Si vous souhaitez implémenter l'une d'entre elles, mettez simplement la vidéo en pause maintenant, et maintenant, faisons-le ensemble. Notre première étape sera donc de sauter à l'intérieur de nos sororités. Ici, nous voulons créer un nouvel itinéraire. Nous avons donc ici un article car il s'agit d'une demande de publication suite à la Guinéenne. Et ici, nous avons la barre oblique utilisateur CPI slash login. Et voici la méthode de connexion point de notre contrôleur utilisateur, que nous allons créer dans une seconde. Maintenant, je vais sauter dans l'utilisateur de sauvegarde des contrôleurs et ils ne copieront rien parce que nous voulons essayer de l'écrire à partir de zéro. Nous avons donc ici notre méthode de connexion et nous savons qu'il s'agit d'une méthode asynchrone où nous recevons notre demande, qui est exactement comme haut à l'intérieur de l'enregistrement. Deuxièmement, nous avons ici notre réponse, qui est une réponse de type. La dernière est la suivante, c'est la fonction suivante. Et maintenant, dans notre fonction, nous voulons écrire, essayer et attraper. Donc, à l'intérieur de la cage, nous aurons notre ère et ils veulent juste la propager à l'ère suivante. Pourquoi ça ? Parce qu'en fait, ici, nous n' aurons aucune règle de validation, mais nous allons juste vérifier, oh, validation dans notre try et non dans catch. Que devons-nous faire à l'intérieur ? Ici, nous obtenons notre corps de demande avec e-mail et mot de passe à l'intérieur. Et notre première étape consiste à essayer de faire entrer cet utilisateur dans la base de données. Ici, nous pouvons écrire un K. Nous avons besoin de notre utilisateur et réessayez avec un modèle d'utilisateur de poids en trouver un. Et comme vous pouvez le voir ici, nous avons find by ID, find and find one. Donc, en utilisant model.fit find, on essaie trouver tous les documents sous forme de tableau par un prédicat. Par exemple, nous pouvons trouver ici une liste par champ actif. Trouvez-en un. Nous ferons de même mais très bien, juste un seul disque. C'est ce que nous voulons utiliser et parfois nous aurons besoin de trouver un élément par ID. Ici, nous avons une belle amende par la méthode. Et comme vous pouvez le voir ici, nous avons également beaucoup d'autres méthodes, comme par exemple, trouver une, supprimer et mettre à jour, etc. Mais pour l'instant, nous allons utiliser find one, puis nous avons dit Nous devons donner un prédicat en tant qu'objet. Et ici, nous avons notre e-mail et c' est l'e-mail du corps de la demande. Donc, en fait, ce paquebot va essayer de trouver notre dossier dans la collection de l'utilisateur par ce mail. Ici, comme vous pouvez voir où obtenir le document utilisateur. Mais en fait, ce n'est pas vrai parce que nous pouvons arriver ici maintenant et pas un document parce que peut-être la femme n'existe pas. C'est par ici. Je veux vérifier si nous n'obtenons pas d'utilisateur, puis nous voulons lancer une erreur. Et pour cela, nous pouvons simplement renvoyer notre statut de point de réponse. Ici, nous avons la photo au statut comme précédemment. Et ici, nous voulons renvoyer du JSON. Et en fait, ici avec pas de validations différentes. Dans tous les cas, nous renvoyons simplement un identifiant ou un mot de passe invalide. C'est ici au sommet. Je peux créer et enregistrer dans l'objet nos erreurs. Je veux donc créer des erreurs. Il s'agit d'un objet avec un champ, e-mail ou un mot de passe, par exemple. Et ici, la valeur est une adresse e-mail ou un mot de passe incorrect. L'essentiel est donc que nous avons exactement la même structure de nos erreurs, comme nous l'avons fait dans tous les autres endroits. Ici, nous renvoyons simplement nos erreurs dans JSON. Si nous n'avons pas d'utilisateur. Ensuite, nous pouvons répondre à nos utilisateurs. Voici donc du sable et ici nous pouvons appeler notre utilisateur normalisé et nous avons fourni un utilisateur d'insertion que nous avons trouvé. Et en fait, si vous avez écrit ce code même sans cette erreur, vérifiez votre golden, car vous avez essayé de faire quelque chose par vous-même. Voyons maintenant si ce code fonctionne. Nous n'avons donc aucune erreur ici dans le serveur Web. Ouvrons notre facteur et cliquons sur Envoyer. Et comme vous pouvez le voir ici, cela fonctionne déjà. Voici notre slash api slash users slash login. Il s'agit d'une demande post avec nos deux champs. Ici, nous obtenons le bon utilisateur avec le Tonkin. Et en fait, si ici, notre e-mail n'existe pas, envoyé masqué et que nous obtenons un objet avec un e-mail et un mot de passe, un e-mail ou un mot de passe incorrect, ce qui signifie en fait que nous avons réussi mis en œuvre notre poumon kenyan de l'utilisateur. Mais ici, il ne nous manque qu'une petite chose, et c'est validé du mot de passe, mais c'est extrêmement facile à utiliser Juste parce que nous avons déjà tout préparé à l'intérieur de notre modèle. Et juste pour vous rappeler que dans notre modèle d'utilisateur ici en bas, nous avons cette méthode de validation du mot de passe et nous utilisons ici be crypt compare, où nous comparons le mot de passe de l'utilisateur avec une chaîne. C'est exactement ce que nous voulons faire ici. Nous pouvons simplement créer une variable avec le même mot de passe. Ici, nous voulons appeler le mot de passe de validation point utilisateur. Et comme vous pouvez le voir, nous avons ici notre saisie semi-automatique du TypeScript. Et en fait, nous obtenons cette saisie semi-automatique simplement parce que dans notre document d'interface utilisateur, nous avons écrit cette ligne. Si vous n'avez pas écrit cette ligne ici, vous ne les obtiendrez pas automatiquement. Nous avons donc ici notre mot de passe de validation et à l'intérieur nous voulons fournir une chaîne pour vérifier s'il est correct. Et voici le mot de passe du corps de la demande Et en fait, si ces mots de passe sont égaux, alors nous obtiendrons ici Boolean. Mais comme vous pouvez le voir, nous obtenons une chaîne, ce qui signifie que quelque chose ne va pas. Regardons notre interface. Validate password renvoie une chaîne, elle est incorrecte, elle doit être booléenne ici. Now is same password renvoie un faux booléen. Et ici, nous pouvons écrire une condition. Par exemple, si aucun mot de passe n'est le même, nous voulons renvoyer exactement la même erreur. Je vais donc copier-coller ici. Depuis l'état des deux erreurs JSON, vérifions-le. Je suis assis ici et on a un bon utilisateur. Mais que se passera-t-il si nous lançons ici un mot de passe incorrect ? Je clique ici envoyer et nous obtenons une erreur. Regardons donc à l'intérieur de la console. Ici, nous recevons un message assez étrange, argument illégal, une chaîne non définie. Et comme vous pouvez le voir ici dans notre trace de pile, cela provient de notre contrôleur et nous entendons par défaut notre ligne Model Ts source. Passons donc à l'intérieur de notre modèle Ts line 44. Comme vous pouvez le voir, c'est notre grande comparaison de cryptes. La question est de savoir quel est le problème. C'est pourquoi ce que nous pouvons écrire ici c'est valider le mot de passe. Et voici tout d'abord notre mot de passe et ce mot de passe. Et en fait, je veux juste voir ceci, pour savoir que nous sommes du bon côté. Notre serveur est redémarré. Allons vérifier le son. Je clique sur Envoyer un regard infini à l'intérieur de la console. Et comme vous pouvez le voir ici, plus nous verrons bien, tout d' abord, valider le mot de passe. C'est une chaîne et voici notre objet. Mais comme vous pouvez le voir dans ce sujet, avec don't have password, c'est pourquoi nous ne pouvons pas comparer l'objet avec le mot de passe parce que nous n' avons pas de mot de passe. Pourquoi ne l'avons-nous pas ? Parce qu'en fait , en haut, nous avons dit pour le mot de passe, sélectionnez false, ce qui est tout à fait correct. Dans 99 % des cas, nous ne voulons pas sélectionner de mot de passe parce que c'est sûr. Mais en fait, dans ce cas précis, dans cette méthode de connexion, nous ne pouvons pas travailler sans mot de passe car nous devons comparer notre mot de passe de l'utilisateur. C'est pourquoi ce que nous pouvons faire, nous devons supposer qu'il en trouve un. Il obtient donc également un mot de passe. Et pour cela, nous pouvons écrire point select. Voici une chaîne à l'intérieur que nous écrivons plus mot de passe. Et en fait c'est une très bonne notation parce que nous pouvons utiliser ici plus le mot de passe, moins la biographie et ainsi de suite. Si nous voulons supprimer ou ajouter des champs spécifiques, dans ce cas, pour cette demande spécifique, nous obtenons non seulement le champ utilisateur complet, mais également le champ mot de passe. Et maintenant, si nous réessayons, je suis sur le sable. Nous pouvons vérifier et dire console. Et maintenant nous obtenons notre utilisateur avec le mot de passe, qui est haché, et puis nous n'avons pas d'erreur, mais cela ne fonctionne pas correctement parce que j' ai un mauvais mot de passe et nous obtenons toujours l'utilisateur, pourquoi cela se produit. Et en fait, si nous examinons ici notre méthode de validation du mot de passe que nous utilisons ici big crypt compare. La question est de savoir ce que nous obtenons ici, nous pouvons voir dans les Taiping qui recevaient une promesse booléenne. Et c'est extrêmement important. Il s'agit d'une opération asynchrone. Il n'est pas synchrone. C'est ainsi que nous devons revenir à l'intérieur de notre interface utilisateur types. Et ici, nous pouvons dire que nous obtenons le booléen. Il s'agit en fait de Rami du booléen. Et maintenant c'est complètement correct parce que maintenant si nous allons sauter dans notre contrôleur ici, nous avons utilisé le mot de passe de validation. Nous voyons que nous sommes en train de récupérer promise Boolean Maintenant le même mot de passe est promis booléen, qui n'est pas ce que nous voulons. C'est là que nous pouvons écrire un poids et cela va tenir notre promesse. Et ici, nous allons obtenir notre booléen. Comme vous pouvez le constater, TypeScript nous aide vraiment beaucoup à comprendre les bonnes saisies. Et nous pouvons toujours vérifier quel type nous avons. Ici. Nous obtenons le même mot de passe et il devrait fonctionner. Allons voir ça à l'intérieur de Boltzmann. Je suis sur le sable et nous recevons un message, un passe par e-mail ou un mot de passe incorrect. Ici, avec le mot de passe correct, 123, nous récupérons notre utilisateur et c'est exactement la demande de connexion implémentée. 12. Créer des middleware auth: Dans cette vidéo, je veux parler des middlewares. Qu'est-ce qu'un middleware ? Généralement, lorsque nous faisons une demande du client au backend, nous lançons simplement cette requête à l'intérieur de notre parcours. Ensuite, à l'intérieur du contrôleur, c'est exactement ce que nous avons fait ici dans notre serveur source. Donc, ici, nous avons deux demandes de publication, enregistrement et connexion, et nous sautons simplement à l'intérieur de notre contrôleur, ce qui signifie en fait ici insérer le contrôleur, nous recevons une demande et une réponse. intergiciel est quelque chose qui peut être appelé avant que nous n' arrivions ici, ce qui signifie en fait qu'un intergiciel est appliqué sur le back-end, mais avant que notre requête ne se trouve deux-points dans notre contrôleur ou à l'intérieur de notre route, Kohlberg, en faisant des middlewares du tout. Si vous devez faire quelque chose avec request avant que cette requête n'entre dans le contrôleur, c'est exactement à ce moment que vous avez besoin d'un middleware. Des intergiciels, avons-nous besoin dans notre projet ? Il s'agit de l' intergiciel d'authentification. Pourquoi en avons-nous besoin ? Imaginez juste que chaque fois que nous avons besoin de faire quelque chose avec Strategist chez l'utilisateur, nous devons vérifier son jeton, ce qui signifie en fait dans chaque méthode, comme par exemple ici s'inscrire, nous obtenons le jeton de l'utilisateur. Nous devons transmettre ce signe. Nous devons valider ce jeton, et nous devons trouver l'utilisateur actuel avec ce jeton. Et cela n'a aucun sens d'écrire ce code dans chaque action du contrôleur. C'est pourquoi nous devons créer un middleware que nous réutiliserons partout. C'est pourquoi je veux sauter ici dans le dossier source et créer ici un nouveau dossier, qui s'appelle middle. Alors qu'ici nous pouvons stocker tous nos middlewares. Et le premier intergiciel que nous devons créer est hiboux point ts. Et en fait, qu' est-ce que le middleware ? Ce n'est qu'une fonction. C'est pourquoi je souhaite exporter la default et la fonction synchrone. Et vous vous demandez peut-être, d'accord, mais pourquoi est-ce synchrone ? Nous obtenons simplement ici notre demande et faisons quelque chose avec elle. Parce qu'ici, nous voulons également travailler avec la base de données. Si nous avons un jeton, celui-ci est valide. Nous voulons lire une idée de l'utilisateur à partir de ce jeton et obtenir cet utilisateur dans la base de données. Nous pouvons donc utiliser cet utilisateur qui sera préparé ultérieurement dans notre contrôleur. C'est pourquoi il s'agit d'une fonction asynchrone. Nous recevons ici une réponse à la demande. Et ensuite, exactement comme nous l'avons fait précédemment, ici, tapez notre demande, puis nous aurons notre réponse. La dernière ici sera notre fonction suivante, qui sera la fonction suivante à partir de R exprimé. Et ici, je vais inverser en haut notre demande et notre réponse. Et cette fonction ne renvoie rien. C'est pourquoi il s'agit d'une fonction vide. Et à l'intérieur de cette fonction, nous voulons lire le jeton de notre requête, mais je ne vais pas directement encapsuler tout notre code avec try catch. Pourquoi est-ce que c'est ? Parce que nous allons essayer de faire des requêtes asynchrones à notre base de données et cela peut échouer. C'est pourquoi ici, c'est une bonne approche pour écrire try-catch où nous obtenons notre flèche puis notre capture latérale. Nous voulons juste prendre les risques et statut et voici 401. Vous pouvez demander, d'accord, mais pourquoi n'avons-nous pas affiché d'erreur ici ? Parce qu'en fait, on s'en fout. Il s'agit d'un intergiciel permettant de vérifier notre authentification. Si, pour une raison quelconque, nous ne pouvons pas analyser la conversation, parler et écouter, c'est valide. Nous n'avons pas pu trouver cet utilisateur de toute façon, cela signifie que notre utilisateur n' est pas connecté. C'est ici que nous sommes directement notre statut 401. Maintenant, nous devons lire notre statut. Donc, ici, je veux créer notre en-tête et nous pouvons obtenir notre en-tête à partir d' en-têtes de points de demande, d'autorisation de points. En fait, cela signifie que nous allons stocker notre jeton dans notre en-tête d'autorisation. Et en fait, une approche typique, j'espère que nous implémenterons notre autorisation de devoir est que nous avons ici la clé d'autorisation, c'est notre en-tête et la valeur ici sera le jeton d'espace porteur. Nous aurons donc ici un flux unique. C'est pourquoi nous devons diviser notre jeton en conséquence. Mais tout d'abord, nous lisons ici notre en-tête et il se peut qu'il ne soit pas défini. Dans ce cas, nous pouvons simplement dire que pour 01, c'est y ici. Si nous n'avons pas notre en-tête, nous pouvons simplement copier-coller cette ligne avec des silences et un statut pour 01. Après cela, nous devons vraiment analyser notre jeton. Nous allons donc parler et voici notre entête divisée, et c'est juste une chaîne qui a été divisée par un espace. Nous obtenons donc un tableau avec deux éléments. Comme vous pouvez le voir ici. En première position, nous aurons mieux. Et en deuxième position , ce sera notre chaîne. Ce que nous voulons obtenir, c'est ici que je vais prendre le deuxième élément du tableau et ce sera notre jeton. Mais comme vous pouvez le voir ici, nous recevons le message du TypeScript. Cet objet n'est peut-être pas défini. C'est pourquoi j'aime tant TypeScript. Cela aide beaucoup pendant le développement. Quel est le problème ? En fait, nous avons ici notre IV, notre tenue vestimentaire et notre statut, ce qui signifie que nous ne viendrons pas ici. Mais TypeScript comprend que nous allons venir ici parce qu'en fait nous ne l'avons pas essayé ici, revenez. Et c'est pourquoi ce code n'est pas valide parce que dans ce cas, notre en-tête peut être contraint ou non défini. Mais après cette vérification correcte avec return, il ne peut s'agir que d'une chaîne valide. La prochaine étape que nous devons faire est donc de vérifier notre jeton. En utilisant GBT, c'est ici que je veux importer DVT à partir de JSON Web Token. Et juste pour vous rappeler il s'agit d'une bibliothèque que nous utilisions pour générer un jeton sur le backend, et maintenant nous devons le valider. C'est pourquoi nous pouvons simplement essayer d'obtenir des données de notre jeton. Et ici, GBT vérifiera l'intérieur. Eh bien Python, tout d'abord, un jeton. Deuxièmement, notre clé secrète. Et juste pour vous rappeler que dans notre configuration, nous avons notre secret. C'est pourquoi ici je vais juste l'essayer secret et il sera entré à partir de notre config. Et nous n'avons pas besoin de fournir d'options supplémentaires. Mais si nous vérifions ici notre lot de données ou de TVP PE, mais que nous savons que ce n'est pas correct, ce n'est pas ce que nous commençons à l'intérieur. Si nous regardons ici, à l'intérieur de nos utilisateurs de contrôleur, nous avons généré notre jeton et à l'intérieur nous avons un identifiant et un e-mail, ce qui signifie en fait qu'il est valide ici pour dire après la vérification dérivée comme. Et ici, nous pouvons dire que nous récupérons un objet avec une chaîne D et aussi notre e-mail, qui est une chaîne, dans ce cas, ici maintenant dans les données nous obtenons une base de données correcte. Il s'agit d'un objet avec un courrier D et D. Nous avons donc ici l'idée de l'utilisateur et nous pouvons maintenant essayer de le récupérer dans la base de données. Mais pour cela, nous devons utiliser notre modèle. C'est par ici, au sommet. Nous pouvons importer notre modèle utilisateur à partir de nos modèles. Nous pouvons donc revenir à l'intérieur de la barre oblique de nos modèles, et ici nous avons notre utilisateur. Maintenant, après avoir reçu nos données, nous pouvons faire une demande pour récupérer un utilisateur. Et en fait, nous utilisons un poids. Ici, nous aurons utilisé un point modèle. Et ici, nous voulons trouver l'utilisateur par AD, et nous avons cette fonction par défaut dans mongoose. Et ici, au lieu d'une div, nous pouvons écrire un point de données AD, et cet utilisateur sera là, ou peut-être maintenant, c' est là que nous devrons également le vérifier. Si nous n'avons pas d'utilisateur de retour, nous voulons également indiquer que l'utilisateur n'est pas connecté. Mais si tout va bien, alors nous voulons définir une requête interne à notre utilisateur. En fait, l'idée principale est que cette demande sera mise à jour par nous ici. Ensuite, lors de notre prochain appel, cette demande arrivera à notre contrôleur et nous aurons ensuite un accès direct à cet utilisateur. C'est ici, je veux écrire une demande utilisateur égal à utilisateur. Et c'est cet utilisateur que nous avons obtenu de la base de données. Et après cette histoire d'amour , appelle le suivant. Et cette ligne indique que nous sommes prêts avec notre middleware et que notre requête peut être transmise à notre contrôleur. Mais ici, nous avons un problème, comme vous pouvez le voir ici, où j'obtiens un utilisateur de propriété d'erreur qui n'existe pas sur la demande de type et qu'il est complètement valide. Cette demande provient d'express et à l'intérieur, il n' y a pas d'utilisateur sur le terrain. Donc, ce que nous pouvons faire ici, l'approche de Ron sera d'écrire ici tout et je vous recommande vivement d'éviter d'en utiliser dans vos projets car TypeScript ne peut pas vraiment vous aider. Vous avez simplement votre code avec des trous de JavaScript brut. C'est là, Ras comme tout le monde, sera une super mauvaise approche. Pourquoi est-ce que c'est ? Parce que nous disons simplement que nous ne nous soucions pas de ce qui concerne les demandes. Nous disons simplement qu'il s'agit de n'importe quel utilisateur point et que cela fonctionne. Il s'agit de l'approche pour débutants. Nous n'écrivons pas de code comme ça. Ici. Request user est tout à fait correct, mais cette demande ne doit pas être une demande expresse. Nous devons l'étendre. Et en fait, ici, à l'intérieur de types, nous pouvons créer un nouveau type et le nommer interface point de requête express, point ds. Maintenant, je peux créer cette nouvelle interface. Et nommons l'interface de demande expresse et elle doit en fait s'étendre. Voici donc une demande d'extension. Et en fait, cette demande viendra directement de l'expression. Donc, ici en haut, je peux écrire une demande d'importation à partir de exprimé. Donc, ce que nous faisons ici, nous avons simplement créé une interface et nous avons étendu tout ce que nous avions demandé à notre interface. Et maintenant, nous pouvons simplement dire que nous avons un champ, l'utilisateur, qui peut ne pas être défini, et c' est notre document utilisateur. Ici, vous pouvez tâche ou k, mais pourquoi l'utilisateur peut être indéfini ici, nous n'avons pas de cas où l'utilisateur de la requête interne est indéfini et vous avez tout à fait raison, mais nous n'utilisons pas de middleware à chaque demande. Parfois, nous n'avons pas d'utilisateur dans notre demande car toutes les demandes ne doivent pas être autorisées. Et maintenant, nous pouvons simplement copier-coller cette interface de requête express et définir notre middleware et le mettre ici au lieu de request. Je dois donc maintenant importer un middleware de requête express. Nous n'utilisons plus de demandes d'Express. Nous utilisons la version étendue normale . Et maintenant, nous n' avons plus aucune erreur. Et ce que nous obtenons ici, c'est une demande complète d' express plus notre champ utilisateur. Et c'est exactement la bonne approche pour utiliser TypeScript. Nous avons donc créé avec succès notre middleware. Maintenant, nous devons l'utiliser. Et pour cela, je souhaite créer un nouvel itinéraire. Eh bien, nous allons obtenir l'utilisateur actuel en parlant. Revenons donc en arrière et disons serveur source. Et ici, nous avons deux rails postérieurs ici. Maintenant, je veux créer apt-get et nous avons ici slash API slash user. Il s'agit de la route pour récupérer l'utilisateur actuel. Maintenant, après cela avec une virgule, je veux écrire un intergiciel. Et en fait, dans ce fichier, nous n' avons pas déclaré quel est notre middleware. Nous devons donc entrer ici notre middleware à partir de nos middlewares. Nous avons donc ici les heures d'ouverture des middlewares. Et c'est exactement ce que nous allons faire. Si vous écrivez comme ça, alors vous appliquerez ce middleware avant que nous ne soyons à deux points ici contrôleur. Et ici, nous obtiendrons le point de notre contrôleur utilisateur , par exemple, l'action actuelle l'utilisateur, ce qui signifie tout d'abord, dans cette route, cet intergiciel owls sera exécuté si nous obtenons une demande d'utilisateur est entrée dans le contrôleur, puis où champion ici. Et comme vous pouvez le voir avec express, il est assez facile à lire et à comprendre. Maintenant, je veux sauter dans le contrôleur des utilisateurs et créer cette nouvelle méthode. Donc, en bas, créons notre nouvelle fonction, qui sera un utilisateur actuel. Et ici, nous savons que nous recevons demandes et des réponses, mais c'est important, mais ici nous n'utilisons pas de demandes d'express, nous utilisons notre version étendue. Donc ici je vais écrire de cette façon j'obtiens une interface de requête express. Et le paramètre suivant ici sera augmenté la réponse. Elle reste la même qu'auparavant. Et ici, à l'intérieur de notre fonction, nous devons appliquer une certaine logique. Ce que nous voulons faire ici, en fait à l'intérieur de l'utilisateur actuel, nous pouvons directement obtenir cet utilisateur à partir de la requête. Ici, nous pouvons dire des points de robe et normaliser l'utilisateur, comme nous l'avons fait sur le dessus. Et ici, nous allons demander à cet utilisateur. Et en fait, cela fonctionnera principalement parce que ce que nous faisons ici, nous utilisons notre utilisateur à partir de la requête avec throw it inside normalized user. Et juste pour vous rappeler, nous avons normalisé l'utilisateur ici en haut. Et ce n'est qu'un document utilisateur normal. Et nous générons ici notre réponse et nous la renvoyons. Mais en fait, nous avons TypeScript. Qu'est-ce que cela signifie ? Ici, nous obtenons un argument error de type user document ou undefined it. Il n'est pas assignable pour utiliser un document. Et c'est tout à fait valide parce que nous avons dit que dans notre demande, nous n'avons pas toujours d'utilisateur. Et en fait, le fait est que cette logique ne se produira jamais parce qu' à l'intérieur de notre serveur, nous lancerons cet intergiciel, qui signifie en fait que si nous n'avons pas d'utilisateur, alors ce middleware maison retour pour 01. Mais TypeScript ne se soucie pas notre intergiciel car il lit simplement notre fonction. Et si je regarde simplement notre fonction sans notre middleware, alors notre code est invalide, car ici nous essayons de le lancer indéfini dans un utilisateur normalisé. Et pour gérer cela pour TypeScript, nous devons l'essayer ici. Avec ne pas avoir d'utilisateur, alors nous voulons lancer 401. Ici, nous pouvons écrire return, res, send status, et ici à l'intérieur pour 01. Dans ce cas, il est complètement valide pour TypeScript car ici, dans request user, il ne peut pas être indéfini avec cette vérification ici ? Et en fait ce code est bien meilleur parce que dans ce cas, nous avons cette fonction unique et nous pouvons complètement tester isolément, mais ne vous souciez pas de cette fonction, de ce que nous avons fait à l'extérieur avec des fonctions supplémentaires, middleware over terror avec une note plus simple que cette fonction fonctionnera correctement dans chaque cas, parce que nous avons couvert tous les cas ici, notre fonction doit être correctement implémentée. Allons voir si ça fonctionne. Je passe au serveur et nous avons une erreur. Allons voir ce que nous avons. Et en fait, vous pouvez voir ici que c'était l'ère de TypeScript et que la dernière compilation s'est déroulée avec succès. Nous avons démarré l' observateur connecté à MongoDB et voici notre API. Nous pouvons donc passer directement à Postman et essayer de faire une requête GET. Mais dans notre demande, nous devons fournir un jeton. C'est par ici. Je vais copier-coller pour parler car nous devons l'utiliser. Et pour cela, je vais créer ici une demande GET. Et c'est l'utilisateur slash api slash. Je suis juste en train de frapper ici envoyé. Et comme vous pouvez le voir, nous arrivons ici sans autorisation. Pourquoi est-ce que c'est ? Parce que l' autorisation interne avec n'a pas fourni de jeton valide. Mais si au lieu de cette ficelle, je vais coller notre birra parlant plutôt que l'espace. Et puis nous avons notre ficelle, je frappe ici envoyer, et ça a marché comme par magie. Et voici notre utilisateur normal avec le Tonkin. Mais le plus important, c'est que nous n'avons pas essayé. Toute cette logique avec l'obtention utilisateur actuel ici dans cette méthode, elle est écrite dans un middleware. Et maintenant, nous pouvons utiliser notre middleware partout où nous voulons vérifier l'utilisateur actuel ou si nous avons besoin des informations utilisateur actuelles dans notre contrôleur. 13. Créer un module de la voix: Dans les vidéos précédentes seront toujours préparées quelques demandes de Pi pour notre utilisateur enregistré et utilisateur actuel de gating. Donc maintenant, ce ne serait pas bien de commencer à implémenter quelque chose sur le front-end. C'est pourquoi je veux entrer dans notre client. Et ici, je veux commencer par notre module utilisateur. Et ce que nous aurons dans notre module utilisateur, ce sont deux pages de connexion et d'inscription. Mais il ne suffit pas d'avoir deux pages pour s'inscrire et se connecter à l'intérieur de notre module, nous aurons également besoin d'un service pour travailler avec l'utilisateur actuel. Par exemple, nous devons enregistrer l'utilisateur, l' utilisateur de connexion, obtenir l'utilisateur actuel, etc. et ainsi de suite, nous avons besoin d'une interface pour notre utilisateur actuel également, c'est là que dans cette vidéo, allons nous concentrer sur les bases de notre module d'authentification. Pour cela, je veux aller dans le dossier source de notre application. Et ici je veux créer un nouveau dossier. Ici, nous voulons tout isoler, ce qui parle d'authentification, l' enregistrement commence. La première étape consiste à créer un module. Et si vous n'êtes pas très familier avec Angular, juste deux mots sur les modules dans Angular, dans les autres frameworks comme par exemple, React, nous utilisons simplement des importations et des exportations, Bot Insight angular, nous avons beaucoup plus, nous avons des injections de dépendance, ce qui signifie que l'ensemble de l'application est divisé en différents modules. Par exemple, dans notre cas, nous définissons ici et maintenant le module. Nous pouvons maintenant créer différentes choses à l'intérieur de ce module et elles seront isolées à l'intérieur de ce module. Et nous pouvons définir ce que nous voulons exposer à l'extérieur. Et si nous n'avons rien exposé pour une utilisation en extérieur, alors nous ne pouvons pas simplement utiliser les éléments de ce module. Et c'est vraiment une bonne approche pour les applications volumineuses. Créons d' abord notre module. Pour cela, nous devons exporter notre classe, notre module. Maintenant, au sommet de cette classe, nous voulons fournir un décorateur de module NG. Et à l'intérieur, nous passerons différentes choses, mais pour l'instant, nous n'avons pas encore besoin d' enregistrer quoi que ce soit ici. Ce que je veux faire maintenant, je veux revenir dans notre module d'application, car nous devons enregistrer ce module dans notre module d'application. Dans un autre cas, ce module ne le lie pas à notre application car nous ne faisons charger un module et nous devons également y placer tous les modules enfants. C'est ici qu' à l'intérieur, dans birds, nous pouvons simplement écrire notre module. Et avec cette ligne où obtenir une entrée automatique ici en haut. Maintenant, nous sommes sûrs que notre module est chargé. La prochaine étape consiste à créer une interface utilisateur actuelle. Et de mon point de vue, cela n'a aucun rapport avec le module hiboux. Ici, nous pouvons créer un nouveau type de dossier et enregistrer ici, l'interface utilisateur actuelle point ts. Et dans notre projet Express, nous n'avions aucune règle concernant le nommage des fichiers parce que nous venions exprimer et que tout ce que nous écrivions, nous écrivons simplement avec nos propres directives Dans l'angle, il est fortement recommandé de nommer tous nos noms de fichiers, Start puis le suffixe de l'entité. Par exemple, ici nous avons écrit le module point car il s' agit d'un module annoncé. Dans ce cas, nous sommes juste ici, interface point parce que ce sera une interface et exactement la même chose s'applique aux classes. Ici, nous n'écrivons pas des hiboux de classe, mais notre module. Et ici, dans CurrentUser, nous sommes ici, l'interface experte, et ici nous avons notre interface utilisateur actuelle. Maintenant, la question est de savoir ce que nous allons trouver à l'intérieur ? Et il est facile de répondre qu'il suffit de regarder à l'intérieur de notre facteur. Nous revenons donc ici pour notre utilisateur actuel, notre e-mail, notre nom d'utilisateur, notre identifiant et notre jeton. Nous pouvons donc simplement écrire ici que nous obtenons un DStream. Nous avons notre jeton, qui est une chaîne. Nous avons notre nom d'utilisateur. Il s'agit également d'une chaîne, et le dernier est notre e-mail. Et grâce à cela, nous avons réussi à définir notre entité utilisateur actuelle sur notre client. Et maintenant, dans chaque endroit où nous parlons d'utilisateur actuel, nous pouvons utiliser cette interface. Notre prochaine étape ici est de créer une classe, car en fait, avant, nous allons commencer par créer des composants pour l' enregistrement et la leucémie, mais nous devons créer un service qui communiquera avec notre API. Et le service appartient certainement à notre module. C'est pourquoi ici je vais créer un nouveau dossier, services, et je veux créer ici point services.js. En fait, c'est vraiment un bon nom si vous ne savez pas comment nommer votre service. Si vous voulez juste emballer quelques méthodes dans votre service dans le module et que vous ne savez pas vraiment en quoi consiste cette méthode II. Vous pouvez simplement nommer le service comme un module. Dans notre cas, nous avons ici notre module et notre service. Mais si vous êtes un service à un moment donné, ce sera trop grand. Tu peux toujours te séparer. Il peut s'agir du service de connexion, du registre, service, du service utilisateur actuel, de ce que vous préférez. Pour l'instant, notre service est parfait. Ici, je souhaite exporter le nouveau service des heures de cours. Maintenant, il est super important de ne pas oublier d'écrire sur le dessus injectable. Parce que si vous le souhaitez, essayez cette seule ligne, il sera très difficile de déboguer un problème. Vos entrées fonctionneront, mais vous obtiendrez un peu de magie dans la console. C'est pourquoi il ne faut jamais oublier injectable s'il s' agit de services, il faut maintenant enregistrer le service à l'intérieur d'un module. Et c'est exactement, cela va dans le sens des injections de dépendances et des modules dans Angular. Ce que nous voulons faire ici, c'est créer un nouveau champ appelé fournisseurs. Et ici, c'est un tableau et nous écrivons à l'intérieur de notre service. C'est donc exactement la bonne façon d'enregistrer tous les services dans notre module. Maintenant, nous voulons créer notre première méthode ici et elle sera l'obtention de l'utilisateur actuel. Eh bien, ici, nous pouvons simplement écrire que nous voulons créer, obtenir la fonction utilisateur actuelle et elle retournera rapidement observable de l'utilisateur actuel. Et à ce stade, vous pourriez avoir des questions si vous ne connaissez pas Angular à ce point, et si vous ne savez pas du tout ce que nos observables et si mince avec générique ici peuvent être déroutants pour vous. Qu'est-ce qui est observable ? Il s'agit simplement d'une représentation du flux. Qu'est-ce que Stream ? C'est quelque chose qui a changé au fil du temps, ce qui signifie que nous pouvons nous abonner au stream. Et lorsque le changement se produira dans le flux, nous obtiendrons une nouvelle valeur. Alors dites l'angulaire, tout fonctionne sur l'amour avec les flux quand vous n'utilisez pas de promesses. Ce qui signifie en fait des flux et des observables, est un modèle spécifique, façon dont nous allons écrire notre code. Donc, ce que nous disons ici, c'est que nous récupérons un observable. Et ici, nous indiquons le type de données que nous récupérons. Et dans notre cas, nous disons ici que cette fonction doit renvoyer un observable de type interface utilisateur courante. L'interface utilisateur actuelle est exactement notre objet utilisateur actuel. Maintenant, à l'intérieur, nous voulons récupérer des données, et pour cela dans Angular, nous avons HTTP. C'est pourquoi ici je vais écrire constructeur et à l'intérieur de private, http est égal au client HTTP. Donc, ce que cette ligne fait en haut, cette notation avec constructeur, puis private some variable equals some class est la façon dont nous injectons des dépendances dans un service. Et c'est très bien si c'est un peu effrayant pour vous de voir un tel code, nous écrirons exactement le même code encore et encore dans chaque vidéo. Pour l'instant, il vous suffit de comprendre que nous devons utiliser HTTP ici dans notre service. C'est ici que nous devons injecter ce client HTTP. Et maintenant ici dans nos méthodes, nous pouvons utiliser ce point HTTP et dynamique est ici nous voulons utiliser méthode GET pour obtenir notre utilisateur. Donc, ce que je veux faire maintenant, je veux créer une URL. Et en fait, ici, nous pouvons simplement coller http localhost 4,001 slash api slash user, et nous jetons simplement ici notre URL. Et maintenant, nous devons renvoyer cette URL HTTP GET. Mais ici, nous obtenons une erreur. type d'objet observable n' est pas assignable à l'interface utilisateur actuelle de type observable, pourquoi cela se produit-il ? Parce qu'ils sont en fait HTTP GET renvoyant par défaut observable off object parce que notre HTTP GET Cantril et savent quelles données nous récupérons quand non, ce n' est que nous-mêmes dans notre application, mais nous pouvons le faire ici, nous devons préciser ce que nous récupérons. Et dans ce cas, nous disons, d'accord, ce HTTP GET spécifique par cette URL retournera fausse interface utilisateur actuelle et pas simplement un objet aléatoire. C'est pourquoi dans ce cas, lorsque vous n'obtenez aucune erreur, car cette seule ligne retourne rapidement observable de l'interface utilisateur actuelle. Et vous devez juste vous rappeler que tout ce HTTP reviendra pour nous toujours observable de quelque chose. Maintenant, la prochaine chose qui est vraiment mauvaise, c'est cette ligne. Pourquoi est-ce que c'est ? Tout d'abord, ici nous avons directement la base routière ici. C'est une très mauvaise approche. Pourquoi est-ce que c'est ? Parce que cette ligne va rompre en production. Il ne convient que pour le développement. Et nous devons écrire exactement le même code encore et encore dans chaque méthode, c'est mauvais. Pour cela, nous avons des variables d'environnement dans Angular. Nous pouvons revenir à l'intérieur des environnements sources et ici de l'environnement, oui, c'est exactement là que nous devons définir toutes nos constantes en fonction d'un environnement spécifique. Donc, ce que nous devons faire ici, nous pouvons créer une nouvelle URL d'API de propriété, et nous pouvons simplement coller notre flux ici. Donc hôte local pour l'API barre oblique 1001. Et c'est tout à fait correct parce qu' ici, dans notre environnement de développement, où l' URL de l'API est définie, aura également un environnement de production. Et nous pouvons y définir différentes URL d'API. C'est la façon la plus correcte de procéder. Maintenant, nous pouvons simplement utiliser l'environnement here, et comme vous pouvez le voir, nous obtenons une URL d'API de point d'entrée externe plus. Et ici, nous avons simplement besoin d'utiliser slash user et rien de plus. Dans ce cas, nous réutilisons cette URL d'environnement qui est complètement isolée à l'intérieur de la variable d'environnement, nos services étant entièrement prêts. Mais ce que nous voulons faire, c'est que nous voulons obtenir cet utilisateur chaque fois que nous chargeons notre application angulaire. Pourquoi est-ce que c'est ? Parce qu'ils ont réellement été volés. Notre utilisateur actuel est normalement en mémoire et après s'être connecté ou enregistré, nous parlons simplement dans le stockage local. C'est pourquoi chaque fois que nous sautons dans notre application, nous devons obtenir l'utilisateur actuel. Pour cela, je souhaite revenir à l' intérieur de notre composant d'application. Et c'est exactement le composant qui sera chargé sur n'importe quelle page. Ici, nous pouvons écrire implémenter sur init. Et si vous ne savez pas ce qui ne s'y trouve pas, il agit d'une méthode spéciale qui sera appelée lors de l'initialisation de notre composant. Ici, je suis en plein génie là-dedans. Et puis nous avons dit que nous pouvions utiliser notre service, mais pour l'utiliser, nous devons l'injecter ici. Et ici, nous écrivons exactement les mêmes choses que celles que nous avons écrites à l'intérieur ou au service. Privé, pas HTTP comme nous l'avons fait dans le service, mais notre service que nous venons de créer. Et ici, nous devons entrer notre service, qui se trouve à l'intérieur de notre module. Et maintenant nous pouvons l'utiliser ici directement à l'intérieur du moteur. C'est donc notre service et nous avons ici la méthode utilisateur actuelle. Mais ce qui est le plus important, ces retours pour nous et observables. Et en général, nous voulons faire quelque chose pour écouter les changements de l'observable. C'est pourquoi nous allons essayer ici dot subscribe. Et maintenant, abonnez-vous ici, nous allons obtenir quelques informations. Donc ici je vais juste écrire les rads et journal de console Ras afin que nous puissions vérifier si cela fonctionne. Je vais accéder au navigateur et recharger la page. Et juste pour vous rappeler, votre serveur Web client doit également être démarré. Nous obtenons ici une erreur. Service client HTTP, aucun fournisseur pour le client HTTP. Qu'est-ce que cela signifie ? Cela signifie que nous utilisons le client HTTP dans notre application, mais que nous n'avons pas injecté de module de client HTTP dans notre application. C'est une façon de le réparer. Nous devons sauter à l'intérieur d'un module, et ici nous devons importer le module client HTTP. Dans ce cas, notre erreur sera corrigée. Rechargeons la page. Comme vous pouvez le voir maintenant, cela fonctionne, mais ici, nous obtenons une erreur propos de la demande d'origine croisée. Et en fait, c'est tout correct car nous n'avons pas configuré correctement notre application dorsale Express pour qu'elle fonctionne avec des requêtes cross-origin. C'est pourquoi nous pouvons simplement revenir à l'intérieur de notre serveur. Et en ce qui concerne les niveaux de serveurs open source, notre prochaine étape sera d' installer un package supplémentaire. C'est pourquoi je vais sauter à l'intérieur de notre serveur. Et ici, npm install course and course est le package le plus populaire pour résoudre problèmes de cours avec l'application Express. Je vais juste retourner à l'intérieur de la sororité S. Et ici je peux écrire sur le premier cours d'entrée, Drum Corps. Et maintenant, la seule chose que nous devons faire ici est qu'avant notre analyseur corporel, par exemple, nous pouvons écrire un pews et nous fournissons un cours d'aperçu en tant que fonction. Comme vous pouvez le voir, nous n' avons plus d'erreurs dans backend et nous pouvons recharger notre page frontale. Comme vous pouvez le voir maintenant avec l'ère Don't have Discourse et nous ne faisons que devenir non autorisés. Voyons ce que nous avons à l'intérieur du réseau. Nous avons cette demande pour l'utilisateur, et si je la réduis un peu, nous pouvons voir ce que nous obtenons dans les en-têtes de réponse et nous obtenons ici le contrôle d'accès allow origin star. Et en fait, c'est pour cela que cela fonctionne. Notre back-end, réglez-le correctement. Ils permettent l'origine de l'accès. C'est pourquoi nous n'obtenons aucune erreur de la part du navigateur. Mais comme vous pouvez le voir ici, nous obtenons 401 non autorisés. Et en fait c'est tout à fait normal. Nous ne sommes pas connectés, dans notre application. Nous avons simplement récupéré l'utilisateur actuel et nous avons reçu une erreur. C'est très bien. Ce qui ne va pas avec n'a pas réagi à cette demande autorisée. Ce que nous pouvons faire, c'est revenir à l'intérieur notre composant d'application où nous avons écrit ce code. Et nous pouvons également gérer une erreur. Et pour cela, nous pouvons écrire dans Subscribe, non pas une fonction mais un objet. Ici, à l'intérieur de l'objet, nous pouvons avoir deux champs. Tout d'abord, ensuite, c'est exactement notre succès. Comme vous pouvez le voir ici, je laisse cette fonction telle quelle. Mais après cela, nous pouvons créer une erreur. Et dans ce cas, c'est ce qui se passera si nous avons une erreur. Donc, ici, nous pouvons simplement écrire erreur de journal de console et peut-être que nous voulons voir Sarah, vérifions ce que nous obtenons. Je recharge la page et nous obtenons notre erreur, la réponse d'erreur HTTP. Et ici, nous n'avons pas autorisé et nous pouvons réagir à cette époque. Donc, ce que je veux faire maintenant, je veux créer la fonction utilisateur actuelle. Et en fait, cela n'a pas beaucoup de sens parce que nous n'avons pas de chance, mais nous devons quand même enregistrer des informations dans notre application selon lesquelles l'utilisateur n'est pas verrouillé. Dans ce cas, l' ensemble de l'application, chaque composant peut vérifier, sommes-nous bloqués maintenant et notre composant sait comment réagir à cela. C'est pourquoi nous devons revenir à notre service. Et ici, je veux créer un nouveau jeu de méthodes utilisateur actuel. Ici, nous obtenons l'utilisateur actuel, qui est notre interface utilisateur actuelle. Et cela renverra un vide parce qu'en fait, nous allons simplement modifier les données à l'intérieur et ne rien retourner. Et en fait, ce n'est pas tout à fait correct. Voici l'interface utilisateur actuelle ou null si nous n' avons pas d'utilisateur actuel. Parce qu'en fait, si nous ne sommes pas bloqués dans Poupon pour définir l'utilisateur actuel sur maintenant. Maintenant, la question est : qu'est-ce qui se passe à l'intérieur En général, ce que vous verrez dans de nombreuses applications. Les gens définissent simplement une propriété locale quelques heures, comme l'utilisateur. Et puis ici, vous pouvez simplement écrire cet utilisateur est égal à utilisateur. Ce n'est pas la meilleure approche avec Angular. Et à l'intérieur de l'Angular, il est très confortable et efficace de travailler avec des flux, car il est beaucoup plus facile de réagir aux flux et de les combiner. C'est pourquoi nous devons utiliser une approche plus difficile, mais elle est la plus adaptée aux grandes applications. C'est exact. C'est là que je veux écrire que nous arrivons ici, le flux utilisateur actuel. Ici. Je veux créer un nouveau comportement un sujet, et cela dit comportement un sujet. Je dis que nous obtenons ici l'interface utilisateur actuelle ou maintenant, ou non définie. Et après ces crochets ronds, et ici nous disons qu'il n'est pas défini par défaut. Donc ce que j'ai écrit ici et comment nous allons l'utiliser. En fait, qu'est-ce que le sujet du comportement ? Il s'agit simplement d'une représentation des flux. Il s'agit simplement d'un flux qui possède une valeur par défaut. Dans ce cas, notre valeur par défaut est undefined it, et nous pouvons également définir à l'intérieur du flux types tels que current user interface now ou undefined. Et maintenant, dans set current user, nous pouvons changer le flux. Nous pouvons écrire ici ce point utilisateur actuel. Et pour changer le flux, nous utilisons point next et nous vous apportons de la valeur. Dans ce cas, nous fournissons l'utilisateur actuel et il est complètement valide car l'interface utilisateur actuelle est un type valide. Le point principal est ici que de nombreux composants de notre application peuvent s'abonner à ce flux d'utilisateurs actuel, et ce seront des pillards automatiques terminés en ce moment ici, quand nous vous modifiez la valeur dans le flux utilisateur actuel. Et ne vous inquiétez pas, si vous ne l'avez pas complètement compris, vous verrez comment nous l'utiliserons dans les prochaines conférences. Nous avons donc créé avec succès notre utilisateur actuel défini. Maintenant, dans notre composant d'application, au moins par erreur, nous pouvons faire quelque chose. Nous pouvons définir notre utilisateur actuel à deux. Maintenant, ici je vais écrire ce point notre service point set utilisateur actuel. Et ici, à l'intérieur, je vais le faire maintenant. Donc, ce qui se passe ici sur Initialize de notre application, nous obtenons ici l'utilisateur actuel. Si nous n'avons pas obtenu l'utilisateur actuel, nous le définissons sur null. Et maintenant vous voulez certainement me demander pourquoi j'ai écrit ici maintenant et je le définis et l'utilisateur actuel, il est logique de définir ici l'utilisateur actuel et maintenant, mais pas l'indéfini. De plus, ils l'ont fait dans le but car nous devons gérer trois états différents. Tout d'abord, par défaut, nous l'avons indéfini, ce qui signifie que pour nous, nous n'avons pas encore récupéré l'utilisateur actuel. Ce n'est pas prêt si nous sommes assis ici maintenant, cela signifie que nous avons récupéré l'utilisateur actuel, mais cela n'a pas réussi. Nous ne sommes pas enfermés. Donc maintenant, ça veut dire que nous ne sommes pas enfermés. Et l'interface utilisateur actuelle signifie évidemment que nous sommes bloqués. Nous avons donc créé avec succès notre module, notre service, l'interface utilisateur actuelle et certaines fonctions de base dont nous aurons besoin lors des prochaines conférences. 14. Page d'enregistrement - Markup + Form: Dans la vidéo précédente, nous avons préparé de nombreux membres du personnel concernant l'utilisateur actuel. Dans cette vidéo, je souhaite me concentrer sur la création notre page d'inscription car le gâteau pour l'inscription sera déjà implémenté. Et pour cela, il faut d'abord créer un nouveau composant. C'est pourquoi je suis ici pendant les heures d' application nous devons créer un nouveau dossier appelé composants. Le premier composant que nous pouvons implémenter est l'enregistrement. Et voici un mot important. En fait, nous allons implémenter deux composants, l' enregistrement et la connexion. Les différences entre ces deux composantes ne sont pas si importantes. Nous avons dans l'inscription, un champ supplémentaire, nom d'utilisateur et une connexion avec, nous n'avons pas ce champ. Ensuite, nous avons différents Le caoutchouc du pneu. C'est ça. Tout. D'autres choses restent les mêmes. C'est pourquoi nous avons deux possibilités. Nous pourrions créer un composant unique et gérer simplement entre la connexion et l'enregistrement. Nous pouvons également créer deux composants différents. Je préfère créer deux composants différents simplement parce que c'est plus facile à maintenir par la suite, même lorsque nous dupliquons un peu le code. Nous allons donc créer un nouveau dossier et l'appeler register. Maintenant, dans ce dossier, nous devons créer son fichier, un fichier HTML. Et ici, nous aurons enregistré les points de composant point et aussi composant point HTML enregistré. Maintenant, dans notre composant, nous devons expertiser notre nouveau composant de registre de classe , puis dire ce composant, nous devons d' abord fournir un sélecteur. Vous avez ici une décision importante. Vous pouvez nommer tous vos sélecteurs commençant par le nom de votre application. Par exemple, vous créez un préfixe valide dans l'application. Par exemple, dans notre cas, nous pouvons le nommer L Trello ou simplement L. Ensuite, vous avez une différence entre toutes les bibliothèques que vous utilisez et les composants de notre projet. Parce qu'en fait, si nous sautons dans le code HTML, nous avons ici le registre L, alors nous savons que c'est une composante de notre projet. Si vous avez ici, par exemple, préfixe vide puis un bouton, vous comprenez le k. Il s'agit d'une bibliothèque de matériaux et ce n'est pas notre projet. C'est la première approche possible. Je préfère une autre approche où je préfixe chaque composant du module, ce qui signifie que nous sommes maintenant à l'intérieur de notre module. C'est ici que le sélecteur sera enregistré. C'est beaucoup plus facile car nous n'utiliserons pas de bibliothèques. Et dans ce cas, nous pouvons voir à partir de quel module nous obtenons ce composant. La prochaine chose que nous devons fournir à l'intérieur notre composant est notre URL de modèle. Et il s'agit de l'URL de notre composant de registre HTML. Maintenant, n' oublions pas d'enregistrer nos composants dans notre module. Ici, nous allons sauter à l'intérieur de notre module Ts, et nous créons ici des déclarations de champs. Et à l'intérieur, nous pouvons maintenant écrire le composant de registre et le delta E importé à partir de composants enregistrés, enregistrés. Notre composant est donc là. Maintenant, nous pouvons écrire un balisage pour notre composant dans notre composant de registre, oui, et en fait ici j'ai oublié lettre S dans le registre de mots. Maintenant, lançons un marqueur pour notre page d'inscription. Et la première classe que nous avons ici est div avec la page de connexion de classe. Et cela peut être déroutant pour vous, mais c'est juste parce que nos styles ont été écrits pour la page de connexion et c'est exactement la même chose que la page d'enregistrement. Nous avons donc ici notre page de connexion div, et maintenant à l'intérieur, nous aurons un lien en haut. Ici, nous avons un lien de routeur et voici une barre oblique. Cet itinéraire va donc vers notre page d'accueil. À l'intérieur du lien de notre routeur, nous voulons une image. Voici donc les acides slash source d'image, barre oblique Trello, logo point SVG. Et après ce cours, loi sur les fils, logo principal. Et en ce moment, vous voulez certainement dire, accord, nous n'avons pas d'images. C'est en particulier pour vous que vous avez préparé toutes les images et les mettre dans ce dossier, à l'intérieur des actifs. Et vous pouvez prendre toutes ces images de l'archive de cette leçon spécifique dans la boîte de description ci-dessous, comme vous pouvez le voir ici, dans la source, dans les ressources, j'ai pas mal d'images, alors n'oubliez pas pour les prendre pour notre projet. Revenons maintenant à l'intérieur de notre application, nos composants s' enregistrent, enregistrent HTML, et après notre balise a ici en haut, nous voulons créer div avec class firm container, et ce sera notre conteneur pour notre formulaire. Maintenant, à l'intérieur du conteneur, nous voulons tout d'abord écrire l'en-tête de connexion de la classe def. Et encore une fois, nous avons la classe à partir de la connexion, mais ce n'est pas grave. Et ici, nous écrivons «  Register to Trello ». Ensuite, nous écrirons une classe pour les erreurs de validation. Et en fait, pour l'instant, nous n' y mettrons aucune erreur, mais nous l'utiliserons plus tard. C'est ici, juste des erreurs de classe div le fermaient. Il est complètement vide et rien n'y est encore rendu. Après cela, nous avons notre formulaire. Nous allons donc ouvrir et fermer la balise form. Et à l'intérieur, nous avons des champs spécifiques. Donc tout d'abord, nous avons ici un e-mail, donc entrez un e-mail de type e-mail. Et ici, nous voulons placer l'adresse e-mail du titulaire. Et le dernier sera la saisie de la connexion à la classe. Maintenant, je souhaite copier-coller cette ligne deux fois parce que nous avons besoin non seulement d'un e-mail, mais également de notre nom d'utilisateur. Ici, nous n'avons pas besoin de Type. L'espace réservé sera le nom d'utilisateur et la classe. Nous allons chercher des commentaires. Et après cela, tapez mot de passe et mot de passe d'espace réservé. Après cela, nous pouvons créer notre bouton pour enregistrer l'utilisateur. Ici, nous serons le bouton Type, Soumettre, Classe, Connexion, Bouton Soumettre. Et à l'intérieur de ce bouton, essayons-le pour un registre. Après notre formulaire, nous voulons afficher nos liens. Nous aurons donc ici des liens de formulaire de bas de classe div. Fermons cette div et créons simplement un lien unique vers notre page de connexion. Voici donc un lien de routeur. Encore une fois. Ici, nous aurons une page de connexion slash et un lien d' inscription de classe. Ici, à l'intérieur de notre étiquette a, nous allons simplement lancer la connexion. Vérifions si quelque chose est rendu. En fait, nous voulons aller à la page d' enregistrement des barres obliques et voir notre page, mais cela ne fonctionne pas parce que nous n'avons pas enregistré notre itinéraire. Enregistré. Pour cela, nous devons revenir à l'intérieur de notre module, notre module. Et ici, nous devons enregistrer toutes les routes que nous voulons créer dans ce module spécifique. C'est là qu'en haut, nous pouvons créer un tableau de routes et nous pouvons dire que c'est des rounds, et dans ce cas, ce ne sera pas juste un tableau. Nous aurons à l'intérieur de la validation de chaque tour. Nous devons donc ajouter ici un objet avec notre chemin qui sera enregistré et notre composant que nous venons de créer. Et c'est un composant de registre. Dans ce cas, cela fonctionnera une fois que nous aurons ajouté ces routes à nos entrées. C'est là que nous devons entrer directement dans les oiseaux et utiliser point du module Hear Route pour les enfants. Et il est important de l' utiliser ici pour enfant et non sillonné car nous voulons créer le module Strauss inside ou un module enfant, pas dans le module app. C'est ici que se trouvent les itinéraires enfants et les itinéraires pour ce module spécifique. Maintenant, voyons ça. Je vais recharger la page et passer à la barre oblique. Et comme vous pouvez le voir dans ce cas, il a été rendu. Nous pouvons voir notre téléphone sans CSS, et voici notre fichier SVG que nous fournissons en haut. Donc maintenant, votre question est sûre, alors que c'est notre CSS et c'est le but. J'ai également préparé l'ensemble du CSS pour notre projet. Nous allons donc nous concentrer uniquement sur Angular et écrire dans la logique métier. C'est pourquoi vous devez prendre le code source de notre projet sous la vidéo. Ensuite, dans le dossier source, dans styles.css, vous devez copier ces lignes. Et comme vous pouvez le voir ici, tout cela se trouve dans des parties de styles Nouveau dossier, que vous devez également copier. Vous devez donc copier deux choses, le dossier des styles source et les styles source, CSS, vous devez remplacer ce fichier. Donc, à l'intérieur de nos styles sources, nous avons beaucoup de styles différents. Comme vous pouvez le voir ici. Par exemple, créez une tâche. Nous avons tout ce qui concerne la création de tâches. Et tous ces styles sont globaux et nous utiliserons styles les plus anciens juste pour nous concentrer entièrement sur l'application Angular. Aussi, je tiens à vous rappeler que notre fichier global, styles source, CSS, est automatiquement utilisé par Angular, ce qui signifie que si vous avez écrit ces symboles ici, cela fonctionnera immédiatement. Et maintenant, si nous allons recharger la page, nous avons ici, notre balisage. Nous avons donc ici l'icône trello, et il s'agit en fait d'un lien vers la page d'accueil. Et nous avons notre formulaire d'inscription avec e-mail, nom d'utilisateur et mot de passe. Le seul problème est ici, bonjour le Trello que nous pouvons voir dans le coin. Ce ne sont que quelques restes dans notre application source, le composant HTML de l'application. Ici, nous pouvons supprimer cette ligne et vivre ici la sortie du routeur. Nous avons donc créé avec succès notre balisage pour la page de registre. Passons maintenant à lier d'une manière ou d'une autre ce formulaire avec Angular. Et en fait, dans Angular, nous avons des formes réactives. Et il s'agit d'un module Angular supplémentaire pour travailler avec les formulaires à la manière des échecs de cette semaine. C'est y. Revenons à l'intérieur sont nos composants, inscrivez-vous, inscrivez le composant ts. Et ici tout d'abord, je veux mettre dans notre formulaire, nouveau groupe de formulaires d'attributs. Et ici, je vais essayer c'est égal à la forme. Et là aussi, nous avons besoin de NG Submit pour soumettre le formulaire. Et ici, nous allons créer sur Soumettre. Maintenant, la question est de savoir quel est ce groupe de formulaires ? En fait, dans les formulaires réactifs, nous pouvons créer un groupe de formulaires à l'intérieur d'un composant. Et il s'agira d'une représentation de notre formulaire HTML. Et il sera entièrement lié à nos éléments HTML et fonctionnera immédiatement. Ce que nous voulons faire ici dans notre classe, nous voulons créer notre formulaire. Et c'est en fait ce point si groupe de points b. Et nous n'avons pas du tout de B à l'intérieur de notre composant. C'est pourquoi nous devons insérer un constructeur injecté. Donc, ici, je vais écrire private if b, et c'est un générateur de formulaire. Et comme vous pouvez le voir, il a été importé à partir de formes angulaires. Maintenant, en haut, nous avons accès à ce grand groupe et voici notre formulaire. Quels domaines possédons-nous ? Tout d'abord, nous avons un e-mail et en fait ici nous pouvons dire sous forme de tableau nos validateurs, donc la valeur initiale ici est vide et ici nous pouvons écrire des validateurs point requis, dans ce cas des formulaires réactifs. Nous vérifierons par défaut le caractère vide de ce champ. Maintenant, nous pouvons copier-coller cette ligne car nous avons exactement la même. Nous avons ici notre nom d'utilisateur, également un champ vide et une validation requise, et voici notre mot de passe. Il s'agit également d'un champ vide par défaut et il est nécessaire pour que notre entreprise soit déjà performante. Et cette ligne ici pour le formulaire Firm Group lie ce formulaire spécifique à notre code HTML, mais ce n'est pas tout. Nous devons également lier chaque champ. Partout ici, nous avons cette contribution. Et en fait, ce que je veux faire ici, je veux mettre un attribut de nom de contrôle de formulaire. Ici, nous allons lier un champ spécifique pour chaque entrée. Le premier ici sera notre e-mail. Le second est notre nom d'utilisateur et le dernier est le mot de passe. Dans ce cas, lorsque nous modifierons ces entrées, elles seront mises à jour dans notre groupe de formulaires ici. Et la dernière chose que nous devons créer est sur la méthode Submit. Nous l'avons donc déjà créé dans notre code HTML. Ici, nous pouvons simplement ajouter sur submit et il retourne nul. Et maintenant, à l'intérieur, je veux juste me connecter à la console sur Submit comma, ces valeurs de points de formulaire. Allons voir si ça fonctionne. Je vais recharger le patient que nous obtenons une erreur qui ne peut pas se lier au groupe de formulaires car il ne s'agit pas d'un élément connu du formulaire. Pourquoi cela se produit-il ? Parce que nous n'avons pas injecté module de formulaires réactifs dans notre module. Revenons donc à l'intérieur ou à l'extérieur du module. Et ici, dans les entrées, nous devons écrire un module de forums réactifs. Et après cette contribution, nous ne devrions pas avoir Sarah. Rechargeons la page. Comme vous pouvez le constater, nous n'avons pas d'erreur. Maintenant, je peux fournir quelque chose à l'intérieur et cliquer sur Enregistrer. Et comme vous pouvez le voir ici dans la console où obtenir onsubmit, e-mail, nom d'utilisateur et mot de passe, ce qui signifie en fait que tous nos champs ont été liés avec succès à notre composant angulaire. 15. Page d'enregistrement - service + validation: Dans les vidéos précédentes, nous avons créé un marché pour la page de registre et également pour l'entreprise, mais nous manquons toujours notre appel API, que nous devons implémenter dans cette vidéo. C'est pourquoi Tout d'abord, je veux revenir à notre, nos services, notre service, parce qu'en fait, ici, nous allons écrire tous nos appels d'API et nous avons déjà ici obtenir l'utilisateur actuel, que nous allons polir plus tard. Mais pour l'instant je veux créer un registre API charbon. C'est pourquoi ici nous pouvons simplement écrire register. La question est : qu'est-ce que nous en arrivons là ? Nous recevons notre formulaire, mais nous ne l'avons pas encore tapé. C'est pourquoi il n'est pas confortable à utiliser. Et nous ne voulons pas écrire ici que nous en obtenons parce cela n'a pas beaucoup de sens ce que cette méthode veut, elle veut savoir ce qui a été fourni à l'intérieur. C'est pourquoi j'ai voulu revenir à l'intérieur nos types et créer ici un nouveau type. Et nous pouvons nommer ce type d'interface de demande de registre. Et vous vous demandez peut-être, d'accord, mais pourquoi un nom si étrange ? Et en fait, ce n'est pas étrange. L'idée principale est le temps de corriger tout ce que nous écrivons concernant la demande et la réponse avec un suffixe spécifique dans ce cas, je sais. Ok. Il s'agit d'une demande de registre. Voici donc le corps de la demande. Si nous parlons de réponse de notre registre si nécessaire, alors ce serait un test d'interface de réponse enregistré. Dans ce cas, il est plus facile comprendre pourquoi vous utilisez cette interface. Créons maintenant cette interface. Donc, ici, je veux exporter notre nouvelle interface et ce sera une interface de demande de registre. Ce que nous aurons exactement dans tous les champs que nous avons écrits à l'intérieur d'un formulaire. Nous aurons donc ici notre e-mail, c'est une chaîne, notre nom d'utilisateur, ce sera également une chaîne. Le dernier est notre mot de passe. Et le mot de passe est également une chaîne. Et en fait, il ne s'agit pas seulement de la forme. Si nous regardons à l'intérieur de nos contrôleurs source de serveur, les utilisateurs ont déjà créé ici une méthode de registre. Et dans notre méthode de registre, c'est ce que nous recherchons à l'intérieur du corps. Demandez donc le corps de l' e-mail, le nom d'utilisateur , le mot de passe, et c'est exactement ce que nous envoyons du client. Nos inscrits ont donc demandé que nous puissions revenir à l'intérieur de nos services, de nos niveaux de service. Ici, à l'intérieur de register, ce que nous obtenons en tant que paramètre, c'est notre demande de registre et notre type est l'interface de demande enregistrée que nous venons de créer. Maintenant, la question est de savoir ce que je récupère après l'enregistrement, nous récupérons notre utilisateur actuel. C'est ainsi que nous pouvons écrire exactement comme si l'utilisateur actuel pouvait observer l'interface utilisateur actuelle. Nous l'avons déjà. Dans ce cas, tout ce qui se trouve dans notre méthode est correctement saisi. Nous devons maintenant créer une propriété URL. Donc, voici l'URL et nous utilisons à nouveau l'environnement point un royaume payeur parce que ce sont les mêmes utilisateurs de barre oblique, parce qu'ils ont été enregistrés, la demande est juste de poster pour les utilisateurs de slash. Et maintenant, je veux renvoyer ce HTTP et nous avons accès ici au message HTTP et à l'intérieur, nous fournissons l'URL du festival. Et deuxièmement corps, et notre corps est notre demande de registre. Mais encore une fois, nous obtenons ici une erreur car notre type est observable de l'objet et non observable par l'interface utilisateur actuelle. Parce que, évidemment, par défaut, publication HTTP ne sait pas ce que nous voulons fournir des informations. C'est là que, dans notre publication HTTP, nous devons fournir ce que nous récupérons. Et c'est l'interface utilisateur actuelle, mais ce n'est pas tout, devra également créer une méthode supplémentaire pour définir le jeton dans le stockage local. Qu'est-ce que cela signifie ? En fait, lorsque nous enregistrons un utilisateur ou que nous obtenons l'utilisateur, nous obtenons également le champ de jeton que nous avons préparé sur le backend. Et nous ne devrions rien faire avec ce champ sur le client, mais nous devons simplement l' enregistrer et le stockage local et l'attacher à chaque demande. Dans ce cas, notre backend peut comprendre quand la demande est autorisée et que nous avons fourni le bon jeton. C'est ici que je souhaite ajouter un jeton de jeu de méthodes supplémentaire. Et en fait, à l'intérieur, nous fournirons l'utilisateur actuel car soit nous appellerons cette méthode après avoir obtenu un utilisateur actuel, soit après enregistrement ou guinéen. Donc, ici, l'utilisateur actuel est l'interface utilisateur actuelle et maintenant il renverra nul car à l'intérieur, nous voulons simplement utiliser le stockage local. Et ici, je vais écrire l'élément de jeu de points de stockage local. Et à l'intérieur, je veux fournir une discussion sur le terrain et nous écrivons à l'intérieur du jeton de point utilisateur actuel. Cette méthode stocke donc simplement dans LocalStorage notre jeton de l'utilisateur actuel, et maintenant nous sommes entièrement prêts à ajuster notre composant. Revenons donc à l'intérieur notre composant de registre des composants. Et nous avons ici à soumettre, et évidemment cette valeur ferme est tirée ici. Nous voulons utiliser notre service. C'est pourquoi je souhaite injecter ici notre service. Nous écrivons donc à nouveau en privé et nous avons notre service, qui est notre classe de service d'authentification. Et maintenant, à l'intérieur de la soumission, nous pouvons écrire ce registre de points de service. Et comme vous pouvez le voir, nous sommes fournis dans une demande de registre, mais à l'intérieur de notre composant, nous avons juste cette forme de point, la valeur du point. Et en fait, cette valeur ferme, comme vous pouvez le voir ici, le type de celle-ci est quelconque, c'est pourquoi elle fonctionnera pour nous et nous ne pouvons pas vraiment la taper de quelque façon que ce soit. Alors, quels sont les retours enregistrés rapidement ? C'est un observable. C'est pourquoi ici nous pouvons à nouveau écrire Subscribe with so object inside dans les champs qui seront suivants s'il est correct ou s'il s'agira d'une erreur. Donc à l'intérieur suivant, mais nous allons obtenir le sac utilisateur actuel. Et ici, nous allons faire un peu de logique. Et si nous avons une erreur ici, nous devons spécifier un aérodrome. Et voici une fonction avec Era. Et à l'intérieur, nous pouvons simplement vous connecter à la console et réduire. Donc tout d'abord, je veux écrire une erreur, une erreur ici dans le journal de la console suivante notre utilisateur actuel, coma, utilisateur actuel. Maintenant, vérifions-nous si cela fonctionne. Je fournirai un e-mail qui n'existe pas dans le nom d'utilisateur et le mot de passe et je clique sur Enregistrer. Et comme vous pouvez le voir, voici notre réseau. Nous arrivons ici pour demander. Tout d'abord, nous recevons une demande d'options. Et c'est tout à fait normal parce que nous avons utilisé bien sûr. Et nous avons une demande entre deux hébergeurs différents parce que nous hébergeons nos applications sur des parties différentes. Vous verrez donc ces options à chaque fois. C'est tout à fait normal. Mais nous sommes intéressés par notre demande de publication, qui est la publication par les utilisateurs sans chemin slushy. Et voici notre charge utile. La charge utile est parfaitement correcte et voici notre réponse. Comme vous pouvez le voir, nous récupérons notre identifiant e-mail et notre nom d'utilisateur, ce qui signifie que tout fonctionne correctement. Et voici notre utilisateur actuel. Mais comme vous pouvez le voir précédemment, nous obtenons une erreur, une réponse d'erreur HTTP. Et cela ne devrait pas vous déranger car c'est l'erreur de cette requête non autorisée et nous la corrigerons dans la vidéo suivante. Cela n'a aucun effet sur notre composant de registre. Comme vous pouvez le voir ici dans la console, nous récupérons notre utilisateur actuel, ce qui signifie que notre code est complètement correct. Donc, ce que nous pouvons faire maintenant, nous pouvons écrire ce point et ici nous avons notre service et nous pouvons appeler ici un jeton de jeu de méthodes et fournir insert current user. Ensuite, cette ligne, parce que nous avons ici l'utilisateur actuel enregistrera notre jeton de CurrentUser dans le stockage local, mais il n'est pas conservé. Nous voulons également enregistrer un utilisateur pour l'ensemble de l'application, et nous sommes déjà préparés pour la même méthode dot set CurrentUser. À l'intérieur. Nous pouvons simplement fournir notre CurrentUser et écouter cette méthode. Il va simplement définir cet utilisateur actuel dans le flux des utilisateurs actuels. Vous verrez comment utiliser flux utilisateur actuel dans les vidéos ultérieures. Plus important encore, maintenant après l'enregistrement, nous l'avons défini sur Target et nous nous sommes assis chez CurrentUser dans notre application. Et la dernière chose que nous voulons mettre en œuvre est notre validation. Parce qu'en fait, si nous obtenons une erreur, nous voulons la montrer. C'est pourquoi ici. Tout d'abord, je veux taper notre erreur parce que nous savons de quoi il s'agit. Il s'agit d'une réponse d'erreur HTTP. Et là, nous obtenons notre erreur et nous pouvons écrire ici point Azure au moins. Et oui, cette flèche sera quelconque, mais c'est toujours mieux que rien. Mais nous voulons maintenant enregistrer notre erreur ici. Maintenant, la question est de savoir dans quel format nous obtiendrons nos erreurs. Et pour cette seconde ouverture à nouveau, nos contrôleurs, utilisateurs. Et comme vous pouvez le voir, voici notre truc. Et ce que nous faisons dans cette ligne, nous cartographions nos erreurs et nous recevons des messages sous la forme d'un tableau de chaînes, ce qui signifie que nous sommes sûrs que si nous obtenons une erreur, c'est toujours un tableau de chaînes. C'est pourquoi ce que nous pouvons faire dans le composant de registre interne de notre client, nous pouvons générer un message d'erreur et l'afficher ici. C'est y. Ce que je veux faire ici, je veux créer juste une seule erreur et elle sera de type chaîne maintenant. Et par défaut, ce sera maintenant parce que nous n'avons pas d'erreur. Maintenant, à l'intérieur de notre erreur, nous pouvons écrire cette ère de points. Nous savons que nous recevons ici notre erreur sous forme de tableau. C'est pourquoi ici, nous pouvons simplement créer une jointure point point Azure ici deviendra un espace, ce qui signifie en fait que nous voulons joindre toutes nos erreurs avec une virgule et un espace, et ce sera juste un terrain. Maintenant, je veux sauter à l'intérieur d'un composant de registre HTML ici où nous avons des erreurs de classe div. Je veux écrire et GE et afficher ce champ uniquement lorsque nous avons une erreur et qu' à l'intérieur, ils peuvent simplement rendre notre erreur. Maintenant, vérifions-nous si cela fonctionne. Mais comme vous pouvez le voir ici, nous obtenons une erreur impossible de lier à G si ce n'est pas une propriété connue de div. Et cela se produit lorsque nous n'avons pas injecté de module commun dans notre module. C'est là qu' à l'intérieur des importations, nous devons entrer le module commun d'Angular. Comme vous pouvez le voir, nous n'obtenons aucune erreur. Et ce que je veux faire, fournir des données non valides. Par exemple, dans un e-mail, je fournirai des données et non un format incorrect. Maintenant nettoyons tout et cliquons sur Enregistrer. Et comme vous pouvez le voir ici, nous recevons notre erreur. Et il s'agit d'un tableau avec une adresse e-mail non valide. Et nous rendons cet e-mail non valide ici en haut, qui signifie en fait que nous avons correctement réagi Azure et Don lors de l' enregistrement de notre utilisateur. Maintenant, vérifions-nous si nous parlons vraiment en toute sécurité après l'enregistrement. C'est là que nous allons recharger la page et fournir un e-mail, un nom d'utilisateur, un mot de passe corrects et cliquez ici pour vous inscrire. Comme vous pouvez le voir, nous avons notre utilisateur, ce qui signifie que nous avons commencé en mémoire. Mais ici, lorsque je suis champion du stockage local de l'application, vous pouvez voir notre jeton et voici une valeur, ce qui signifie que nous avons réussi implémenter l'enregistrement de l'utilisateur et nous avons stocké le jeton dans LocalStorage. 16. Page de connexion: Dans la vidéo précédente, nous avons terminé avec succès notre page d'inscription. Dans cette vidéo, nous devons implémenter la page de connexion. Et je pense que c' est une idée géniale que vous essayez de la mettre en œuvre vous-même. Que devons-nous implémenter sur cette page ? En fait, la page de connexion est simplement une URL slash login et nous voyons exactement le même formulaire comme s'inscrire, mais formulaire de connexion. En fait, nous n'avons qu'un e-mail et mot de passe et nous n'avons pas de nom d'utilisateur. Évidemment, tous les textes sont différents, mais c'est essentiellement ça. Nous utiliserons également l'autre demande de suivi du jeu sur les utilisateurs de slushy pie slash login. Et voici trois niveaux de complexité pour vous. Tout d'abord, vous pouvez mettre cette vidéo en pause dès maintenant et essayer de l' implémenter vous-même. deuxième niveau est que vous recevez quelques conseils de ma part avant de commencer à mettre en œuvre. Alors, que devons-nous faire ? Tout d'abord, comme vous pouvez le voir ici, à l'envers des composants, nous avons un composant de registre. Et comme je l'ai dit plus tôt, avec ne pas vouloir partager le composant entre l'enregistrement et la connexion, ce qui signifie en fait que nous pouvons implémenter le nouveau composant login avec exactement le même balisage, mais sans notre nom d'utilisateur et notre fichier ts sera super similaire. Nous avons besoin d'un formulaire, nous avons besoin de onsubmit et ainsi de suite. Mais la principale différence sera dans un service, nous n'utiliserons pas notre service qui s'enregistre, mais nous devons créer une méthode de connexion, ce qui signifie en fait que nous devons dans notre service ici, créer une demande de connexion, qui effectuera un appel d'API. Et en fait, il sera très similaire à notre registre. Mais ici, nous devons créer non pas une interface de demande enregistrée, mais une interface de demande de connexion. Et puis à l'intérieur, nous devons fournir une URL correcte si vous voulez l'essayer vous-même. Maintenant, il suffit de mettre la vidéo en pause ici. Et si tu ne veux pas l'essayer toi-même, faisons-le ensemble. Et notre première étape sera de créer l'interface de notre service. Nous avons donc ici notre interface de demande de registre. Et en fait, comme vous pouvez le voir, nous avons trois champs ici, nous ne pouvons donc pas les réutiliser dans login. Mais je veux faire ici, je veux créer une nouvelle interface, une interface demande de connexion. Passons à l'intérieur de ce fichier et nous pouvons copier-coller complètement notre interface de demande de registre, juste parce qu'elle sera super similaire et qu'ils ne veulent pas beaucoup taper. Nous devons donc créer ici notre interface, l'interface de demande de connexion. Et nous avons un e-mail interne et un mot de passe, et nous n'avons pas notre nom d'utilisateur. Nous avons donc créé notre interface avec succès. Maintenant, nous pouvons revenir à l'intérieur notre service et nous pouvons copier-coller méthode de registre complètement parce que méthode de connexion sera super similaire. Nommons notre méthode de connexion. Et ici, nous ne recevons pas de demande d' enregistrement, mais notre demande de connexion, ici nous avons besoin d'une autre interface que nous venons de créer. C'est une interface de demande de connexion. Et de retour, nous obtenons notre utilisateur, ce qui signifie que c'est une interface utilisateur actuelle correcte et observable. Voici maintenant l'URL. Nous avons ici API URL slash users slash login. Et cette API est déjà implémentée dans notre backend. Login est certainement une demande de publication, ce qui signifie que nous devons fournir un message avec une demande de connexion corporelle que nous définissons comme paramètre et notre service de connexion est entièrement implémenté. Notre prochaine étape sera de créer un composant ici et ce composant de registre défini est très similaire à notre composant de connexion. Cela n'a aucun sens de tout retaper vous-même. C'est pourquoi je souhaite copier l'ensemble du dossier et le coller ici et renommer le dossier login. Nous avons maintenant un composant de connexion. Nous devons renommer ici les pages. Ce sera donc le composant point point HTML de connexion. Et voici le composant point de connexion point ts. Nova doit sauter dans notre code HTML et le modifier un peu pour que ce ne soit pas si différent. Tout d'abord, ici, au lieu d'être inscrit sur Trello, nous pouvons écrire login dans la bande-annonce. Maintenant, nous partons d'ici erreur, tout comme nous les avions. Il fallait également soumettre un formulaire et ici nous avons e-mail, nom d'utilisateur. On n'a pas besoin du grand, on peut l'enlever. Nous avons notre mot de passe. Et maintenant voici le bouton de soumission, pas avec le registre, mais nous nous connectons, par exemple, le dernier mais non moindre est le lien du routeur ici en bas, il devrait aller à une page d' enregistrement. C'est ici que se trouve le registre des barres obliques. Et au lieu de ce texte, nous pouvons écrire dans «  S'inscrire pour un compte ». Nous avons donc réussi à modifier notre code HTML. Passons maintenant à notre fichier TypeScript. Tout d'abord, nous devons changer de sélecteur. Il n'est pas enregistré, mais notre identifiant et notre modèle sont des composants de connexion HTML. Maintenant, ClassName est également différent. C'est le composant de connexion Live era tel quel. Voici notre formulaire. Nous avons besoin d'un e-mail et d'un mot de passe, mais pas de nom Alors supprimons simplement le nom d'utilisateur ici. Notre constructeur reste le même. Notre onsubmit reste presque le même. Mais ici, nous n' utiliserons pas la méthode register. Nous avons créé une méthode de connexion à l'intérieur où nous fournissions le formulaire complet. Et ici, nous avons subscribe et si nous réussissons à nous connecter, alors ici nous avons le journal de la console et l'utilisateur actuel définis dans talking et nous sommes définis dans l'utilisateur actuel, ce qui signifie en fait que c'est exactement 99% exactement le même code comme enregistrement interne. Et la dernière étape sera d'enregistrer nos composants. Nous devons donc sauter dans les larmes de notre module. Ici, à l'intérieur des déclarations, nous devons dire que nous avons un nouveau composant et qu'il s'agit d'un composant de connexion. Et nous devons également créer ici un nouvel itinéraire. Je vais donc copier-coller la route du registre et ce chemin login et composant seront des composants de connexion. Allons voir si ça fonctionne. Nous n'avons aucune flèche ici à l'intérieur de l'observateur. Je vais recharger la page et essayer de sauter ici en bas, par exemple, dans la page de connexion. Et comme vous pouvez le voir où sur slash login. Et voici notre formulaire et nous pouvons recharger la page où tache sur cette page, tout va bien. Essayons maintenant si nous pouvons nous connecter. Donc ici, tout d'abord, je veux écrire quelque chose de incorrect. Voici un e-mail qui n'existe pas. Et puis un mot de passe. Je frappe ici en disant dedans, et nous obtenons une erreur, comme vous pouvez le voir ici auparavant, nous obtenons une erreur de photo avec des validations. Et à l'intérieur de notre erreur où obtenir un e-mail ou un mot de passe rempli, e-mail incorrect un mot de passe. Et nous le faisons dans ce cas parce que nous ne voulons pas avertir l' utilisateur de ce qui n'est pas correct. Nous ne devrions pas dire que quelque chose comme cet e-mail est déjà pris. Nous disons simplement qu'il n'est pas valide. C'est pourquoi cette logique à l'intérieur du composant de connexion de bone fonctionne. Et juste pour vous rappeler ici, nous copions collés lors soumission et ici à l'intérieur d'une erreur avec nos erreurs jointes, car dans le cas page Register, nous avions ici un tableau de chaînes. Ici, nous ne l'avons pas avec voir directement une flèche, un e-mail, un mot de passe, ce qui signifie en fait qu'ici, au lieu de rejoindre, nous pouvons écrire un e-mail ou un mot de passe Dodd. Dans ce cas, nous l'appliquerons correctement zone à l'intérieur. Allons vérifier le son. Je recharge la page. Tapons ici un e-mail qui n'existe pas, mot de passe de connexion et nous recevons un mot de passe incorrect , ce qui signifie que notre validation fonctionne correctement. Essayons maintenant de vous connecter avec les informations d'identification correctes. Voici donc j'ai complet sur gmail.com et voici notre mot de passe 123. Je frappe ici, disons méchant, et nous obtenons l'utilisateur actuel. Mais le principal problème, c'est que nous restons sur cette page. Et deuxièmement, nous n'avons pas du tout supprimé cette zone. Et en fait, nous pouvons faire les deux choses simultanément. Tout d'abord, ce que je veux faire ici en soumettant, nous pouvons supprimer Sarah. Voici donc cette erreur de dollar que nous pouvons écrire à l'intérieur maintenant. Et en fait, je peux dire maintenant que le nom de l'ère n' est pas le meilleur parce qu'en fait, error est super générique et ils aimeraient changer ce nom ici de era en message era par exemple, dans ce cas, nous devons le changer ici à l'intérieur de l'ère suivante et ici à l'intérieur de l'ère. Et après cela, nous devons passer au modèle et le modifier également. Donc, ici, nous avons Angie en cas d'erreur, ce devrait être un message d'erreur. Nous sommes ici en train de rendre notre époque. Et je pense que cette approche est beaucoup plus propre parce qu'elle nous permet de comprendre ce que nous rendons ici. Il ne s'agit pas d'une erreur générique. C'est vraiment un message d'erreur. Nous devons maintenant appliquer exactement la même chose dans notre registre. Revenons donc à notre registre. Et ici tout d'abord, je veux écrire un message d'erreur. Voici aussi un message d'erreur, puis dites le fichier ts, je veux changer le message d'erreur de la flèche deux ici, le message d'erreur droit dans era, et nous voulons le définir maintenant dans notre succès. Donc ici ce message d'erreur est égal à maintenant, la dernière chose que nous voulons faire, nous voulons rediriger l' utilisateur vers une autre page. Cela n'a aucun sens que nous restions sur cette page et qu'elle répertorie, nous voulons aller à la page d'accueil après la connexion d'un utilisateur. Pour cela, nous devons injecter ici notre routeur. C'est mon constructeur d'insert. Je peux écrire un routeur privé égal à un routeur. Et comme vous pouvez le voir, ce routeur provient de angular-ui-router. Et maintenant, dans le succès, sur la dernière ligne, nous pouvons écrire ce point, point de navigation par URL. Et nous fournissons ici une URL, par exemple, juste une barre oblique. Et maintenant, nous devons faire exactement la même chose sur notre page de connexion. Je saute donc à l'intérieur du composant de connexion ici. Tout d'abord, je veux injecter un routeur Zhao privé. Et après cela, je peux coller cette ligne, cette route naviguer par barre oblique d'URL, qui signifie en fait dans les deux cas, avec inscription et connexion, que nous voulons rejeter notre utilisateur sur la page d'accueil. Allons voir si ça fonctionne. Je suis ici sur la page de connexion J'écris ici f2 à gmail.com, ici 123. Je clique sur la connexion, puis sur la page d'accueil, ce qui signifie que nous avons réussi à implémenter notre page de connexion. 17. Page d'accueil: Dans les vidéos précédentes, nous avons terminé notre page de connexion. Dans cette vidéo, nous allons implémenter notre page d'accueil pour le projet. Et le point principal est que cette page sera juste un balisage et aucune logique du tout. Pourquoi est-ce que c'est ? Parce qu'en fait, cette page est réservée aux utilisateurs anonymes si nous sommes bloqués mais ne voyons jamais cette page car nous sommes directement redirigés vers la page des tableaux d'informations. Tout d'abord, implémentons dans votre module. Et pour cela dans l'application, je veux créer un nouveau module qui s'appelle Home, ce qui signifie en fait qu'il s'agit d'un module complètement séparé. Cela n'a rien à voir avec les heures, et il y a juste un composant de page d'accueil à l'intérieur qui est isolé à l'intérieur de ce module. Allons donc à l'intérieur de ce dossier et créons un nouveau fichier Home module Ts. Et beaucoup d'étudiants me demandent très souvent pourquoi ils n'utilisent pas de générateurs avec Angular. Et en fait, il y a une raison à cela. Je trouve qu'il faut plus de temps pour utiliser un générateur pour simplement copier-coller le module si nécessaire, et aussi pour le processus éducatif, afin que vous vous en souvenez mieux. Je l'écris de toutes pièces. C'est y. Créons à nouveau un module d'accueil à partir de zéro. Et à chaque module suivant, nous allons simplement copier-coller. C'est ce que nous voulons faire ici. Nous voulons créer une nouvelle classe et la nommer module d'accueil. Après cela, nous devons injecter ici un décorateur dans le module GI. Et à l'intérieur, nous devons fournir nos dépendances, au moins ici dans les entrées, nous devons fournir un module commun parce que nous en avons besoin dans chaque module. Par exemple, pour les boucles comme dans G4, offrant G Si maintenant, créons notre composant home pour cette biomasse, créez un nouveau composant de répertoire. Et à l'intérieur, nous voulons créer un nouveau dossier d'accueil. Et oui, je comprends que nous n'avons qu'un seul composant ici et cela n'a pas beaucoup de sens de créer des composants de barre oblique plutôt que le dossier Home à l'intérieur. Mais c' est quand même une bonne structure. Et si vous n'avez pas besoin de diviser cette page d'accueil en différents composants, vous pouvez le faire à coup sûr. Passons donc à l'intérieur de la page d'accueil et créons ici le composant principal point HTML et le composant principal point ds. Maintenant, allons à l'intérieur de la page HTML et rentrons chez nous ici, mais nous n'avons besoin de rien, juste quelque chose à tester. Passons maintenant à l'intérieur de notre fichier ts. Et ici, nous voulons créer notre classe et c' est le composant principal. Ensuite, nous devons enregistrer nos composants. Nous voulons donc injecter notre composant et à l'intérieur nous devons tout d'abord fournir un sélecteur. Donc, ici, je vais simplement utiliser un sélecteur home car cela n'a pas beaucoup de sens de préfixer notre composant home avec un nom de module comme home, home, ce n'est tout simplement pas nécessaire après notre sélection, nous devons fournissez ici à l'URL du modèle, puis dites URL du modèle, nous aurons le composant HTML de la maison. Et notre dernière étape consiste à ajouter notre composant à notre déclaration. Donc, dans le module home ici, nous voulons créer des déclarations et les mettre dans notre composant home. Tout va bien ici, mais nous n'avons pas créé d'itinéraire. C'est pourquoi je veux créer ici une propriété routes. Et nous pouvons dire que c'est un type routes et qu'il s'agit d'un tableau avec une seule clé. Et voici notre chemin. C'est une chaîne vide, cela signifie page d'accueil, et voici notre composant, et notre composant sera le composant principal. Ensuite, nous pouvons enregistrer cet itinéraire dans les entrées. Voici donc le point du module de route pour les routes enfants. Et maintenant, nous ne devons pas oublier d'enregistrer notre module d'accueil dans notre module d'application. C'est pourquoi je souhaite revenir à l'intérieur de notre module d'application. Ici, initié aux oiseaux, nous pouvons ajouter notre module d'accueil. Tout va bien. Je ne vois aucune erreur à l'intérieur de l'observateur. Ouvrons donc un navigateur et voici notre page d'accueil. Comme vous pouvez le voir, le mot home est affiché ici, ce qui signifie que nous avons créé avec succès tout notre module et notre composant vide. Et maintenant, nous devons simplement essayer de baliser la page entière. C'est mon, revenons à l'intérieur des composants home, home, home component HTML. Ici, commencez à écrire notre balisage. Rien de spécial ici, juste plein d'éléments DOM. Nous avons donc ici un en-tête avec un en-tête en verre. Et maintenant, fermons cet en-tête. Ensuite, nous voulons créer un lien vers notre page d'accueil. Voici donc une barre oblique de liaison de routeur. Et ici, nous avons la classe à la maison qui avait un lien de domicile. Fermons la vente et remplissons le double lien pour montrer une image. Nous aurons donc ici la barre oblique source de l'image, etc., barre oblique Trello, le logo, le point blanc SVG. Et terminons cette image. Comme vous pouvez le voir dans le navigateur, il est appliqué. Et ici, nous voyons notre en-tête et notre lien vers notre page d'accueil. Nous devons maintenant fournir des liens vers la page de connexion et d'inscription. C'est pourquoi après a, on peut écrire div. Et à l'intérieur de div, nous pouvons écrire deux liens. Tout d'abord, ici, à l'intérieur de div aura un lien routeur vers notre login slash que nous venons de créer avec la classe WHO avait un login, je vais fermer la vente. Et juste à l'intérieur de la connexion, nous pouvons maintenant copier-coller ce lien et ici nous avons slash register. Voici le registre d'en-tête de la classe d'accueil, et le texte à l'intérieur sera également enregistré. Nous allons vérifier si cela fonctionne, comme vous pouvez le voir dans le navigateur ici à droite, nous avons un lien de connexion et un lien d'inscription. Maintenant, disons le premier bloc de notre page. Voici donc Div, héros de la maison de classe. Fermons cette div et à l'intérieur nous voulons ajouter un conteneur home de classe div. Fermons cette division. Et à l'intérieur du conteneur domestique, nous avons un div. Et à l'intérieur de cette div se trouvera la balise H1. Et ici, nous avons le titre de maison de classe Desh. Fermons ce H1 et à l'intérieur de chacun d'eux je veux coller. Bien que le texte préparé aide les équipes à travailler de manière plus collaborative et à en faire plus après chacune d'elles, nous avons une balise p. C'est notre description. Voici une description de la maison en verre. Et à l'intérieur de ce p, je vais coller la description des tableaux Trello, des listes et des courants. Après la première div, nous aurons une deuxième div. Fermons-le. À l'intérieur. Il doit s'agir d'une image. Donc, voici source de l'image slash acides slash hero dot SVG. Fermons cette image et vérifions si elle fonctionne. Nous sautons dans le navigateur. Comme vous pouvez le voir ici, nous avons une première section de notre page d'accueil. Ici, à gauche, nous avons du texte et une belle image à droite. Je pense que vous avez une idée taux de travail et des blogs pour la page d'accueil. Comme vous pouvez le voir, nous avons simplement un titre de blog, une description et une image, ce qui signifie en fait que vous souhaitez accélérer le processus de création de la page d'accueil car il s'agit simplement d'un code HTML sans aucune logique. Ici, je veux coller la deuxième équipe d'accueil du blog. Si vous le souhaitez, vous pouvez simplement mettre la vidéo en pause , tout retaper ou simplement prendre le code HTML de la page d'accueil dans le code source sous la vidéo. Donc, ce que nous avons ici, nous avons une équipe à domicile, un conteneur d'équipe de conteneur à l'intérieur. Nous avons travaillé avec n'importe quelle équipe, description et une image. Voyons à quoi ça ressemble. Ici. Après notre premier élément, nous avons le second avec du texte et maintenant l'image. Créons maintenant un bloc de plus ici. Je colle les informations personnelles. Mêmes choses ici, nous avons des classes en image que H1 et p. Voyons ça. Je suis en train de recharger la page et nous avons ici en bas un bloc de plus avec une image et des textes. Et maintenant, collons notre dernier bloc. Comme vous pouvez le voir, il est un peu plus grand. Nous avons ici quelque chose sur le flux de travail et l'automatisation. Nous avons ici la description H1 et aussi la liste à puces. Et à droite, nous avons une image comme toujours, comme vous pouvez le voir ici, à droite, nous avons une image et à gauche, nous avons d'abord une description du titre puis une liste à puces, qui signifie que nous avons créé notre page d'accueil avec succès. Ce n'était pas quelque chose de spécial, juste un marqueur pour un utilisateur non connecté. 18. Intercepteur d'Auth: Dans la vidéo précédente, nous avons créé notre page d'accueil avec succès, mais nous n'avons plus qu' un seul problème. Nous avons en fait mis en œuvre l' obtention de l'utilisateur après la page pour vous rappeler, dans notre application d'information client, composant de l' application ts, nous appelons notre service obtenir l'utilisateur actuel. Et en fait maintenant, nous recevons toujours une erreur ici et non autorisée. Et en fait, si je vais aller à la page d'inscription et créer simplement un compte qui n'existait pas auparavant. Comme vous pouvez le voir après l'inscription où l'on a réagi à la page d'accueil. Et à l'intérieur du stockage local, nous avons ce jeton. C'est ce que nous avons défini depuis le back-end pour authentifier notre client. Mais ensuite, rechargez la page. Ce jeton n'est pas utilisé et nous arrivons ici sans autorisation. Et l'idée est essentiellement que le client de la tour doit, à chaque demande, appliquer ce jeton depuis le stockage local si nous l' avons, dans ce cas, notre backend sait quand nous sommes autorisés, mais imaginez simplement si nous avons rarement besoin d' entrer dans chaque méthode, comme par exemple, obtenir l'utilisateur actuel et qu'il a quelques cheveux du stockage local. Ce n'est pas déficient, cela prend beaucoup de temps, et nous voulons vraiment ajouter ce jeton à chaque demande. Pour cela à l'intérieur de Angular, nous avons des middlewares. C'est pourquoi nous allons maintenant créer un middleware now. Qu'est-ce qu'un middleware ? C'est quelque chose entre le début de notre requête et, et, en fait, ici, nous avons, par exemple, le HTTP GET et nous allons créer un middleware. Cela signifie qu'après le démarrage de cette demande, elle n'a pas été envoyée ici. Nous voulons appliquer un intergiciel, donc nous voulons faire quelque chose. Par exemple, il y a un en-tête. C'est pourquoi je veux entrer dans les services de notre maison et créer ici pendant vos heures de service, intercepteur, points de service DOD. Et ce ne sera qu'un cours, tout comme un service injectable normal. Ici, nous avons des experts, des heures de cours, un intercepteur, et ici nous devons dire implémente l'intercepteur http. L'idée principale est donc que cet intergiciel dans Angular est appelé interceptif parce qu' il intercepte notre requête. Et ici, nous écrivons implémente l'intercepteur http pour obtenir un intercepteur de classe étroit implémente incorrectement l'interface et l' interception de propriété est manquante, et c'est exactement ce que nous devons create afin d' implémenter ce middleware. C'est pourquoi nous allons créer ici une nouvelle méthode appelée intercept. Et comme vous pouvez le voir ici, ma saisie semi-automatique a déjà reçu la requête et la suivante, et elle renvoie un événement HTTP observable de bureau, ce qui signifie en fait que nous avons un accès complet ou une requête ici dans la propriété request. Et nous appellerons la prochaine fois que nous serons prêts et nous aurons terminé tout ce que nous devons faire ici. C'est pourquoi tout d'abord, ce que nous voulons faire à l'intérieur est d' obtenir un jeton de notre stockage local. Ecrivons ici que nous avons une cible et il s'agit d'un élément de stockage local. Et à l'intérieur, nous fournissons un jeton. Après cela, je veux écrire request equals request clone. Et ici, à l'intérieur, nous fournissons un objet avec des en-têtes de groupe de champs. Les informations qui l'entête sont un objet que nous fournissons autorisation sont égales à une chaîne parlante ou vide. Et après cela, nous appelons la poignée de retour à côté et nous avons été fournis dans notre demande. Donc, ce que fait ce code, tout d' abord, nous avons obtenu un jeton de la recherche Google. Il s'agit donc d'un élément non défini ou d'un jeton valide. Maintenant, nous faisons une demande de clonage. Pourquoi faisons-nous ça ? Parce que la requête est immuable, nous ne pouvons pas vraiment la modifier. C'est là que nous devons l'eau de Cologne afin de fixer quelque chose. Ici, nous utilisons des propriétés set header pour définir un en-tête. L'en-tête est appelé autorisation et à l'intérieur, nous fournissons notre jeton. Donc, si nous n'avons pas de jeton, nous disons ici une chaîne vide. Et après cela, nous appelons le handle suivant, qui signifie essentiellement que nous devons poursuivre notre demande et que nous fournissons une demande mise à jour à l'intérieur. C'est ainsi que nous créons des intergiciels ou des intercepteurs dans Angular. Mais maintenant, nous devons injecter cet intercepteur dans notre application. Mais la chose principale mais nous voulons faire pour injecter un intercepteur, pas à l'intérieur du module, mais à l'intérieur du module d'application parce que nous voulons le faire au niveau mondial pour injecter l'intercepteur, nous utilisons des fournisseurs ici. Donc, ce que nous voulons faire à l'intérieur de ceci fournit un objet avec un champ provide, et nous utilisons ici des intercepteurs HTTP. Il vient d'Angular aussi, nous utilisons ici la classe. Voici notre classe, notre intercepteur, que nous venons de créer. Et le dernier est déplacé vers vrai. Et c'est exactement comme ça que nous devons fournir des intercepteurs http dans Angular. Nous disons donc que nous devons nous inscrire et que vous avez fourni et qu'il s'agit d'un intercepteur http et que nous devons utiliser notre intercepteur d' heures de cours. Maintenant, vérifions-nous si cela fonctionne. Je recharge la page et vérifions à l'intérieur du réseau, notre utilisateur de demande. En fait, je veux faire défiler vers le bas. Ici, nous pouvons voir l'autorisation et notre jeton, qui signifie en fait notre interception, fonctionne correctement. Et nous avons directement appliqué cet en-tête d'autorisation à chaque requête, par exemple pour obtenir un utilisateur actuel. Mais nous sommes toujours en train de récupérer notre erreur 401 et ils savent quel est le problème. Si nous regardons à l'intérieur du stockage local, nous pouvons voir que ce jeton est simplement une cible, c'est juste une valeur. Mais si nous revenons à l'intérieur de notre backend ici, à l'intérieur de la source, des middlewares, des hiboux. Et c'est là que nous vérifions un jeton ici car vous pouvez voir où faire une division par un espace. Parce que comme je l'ai dit tout à l'heure, nous sommes dans la bière puis dans l'espace. Si nous utilisons une authentification DVT, ce n'est pas le cas ici. Nous n'avons pas un mot ici, bière, et c'est exactement notre problème. Nous ne l'avons pas implémenté, et nous devons le faire lorsque nous renvoyons un jeton au client. Donc ici, à l'intérieur des serveurs, des contrôleurs de source, des utilisateurs, lorsque nous générons un couple ici, dans utilisateurs normalisés, nous devons écrire ici de l'espace. Ici, nous avons le train de justice, où à l'intérieur, où bon, et de la bière. Et ici, nous injectons le jeton que nous avons généré. Allons voir si ça fonctionne. Donc notre jeton n'est pas valide, ils le supprimeront simplement et il passera à la page d'enregistrement. Maintenant, je veux juste mettre quelques informations d'identification ici et cliquer sur « S'inscrire ». Et maintenant, lorsque nous vérifions notre stockage local, vous pouvez voir que nous avons de la bière plutôt que de l'espace et que nous discutons. C'est pourquoi, lorsque je recharge la page avec l'erreur « ne plus obtenir pour 01 », nous obtenons ici notre réponse. Et en fait, ici, vous pouvez voir que notre utilisateur de requête est 200 et notre réponse est exactement ce que nous attendions, comment cela fonctionne. Une fois de plus, nous nous inscrivons, par exemple, ou nous nous connectons et nous créons un jeton dans le stockage local. Donc, l'espace Birra et le jeton chaque fois que nous faisons une requête sur l'intercepteur dans Angular, il s'attache à l'intérieur de l'en-tête, ce jeton d'autorisation. Et ici, nous avons ours, puis notre jeton et notre back-end vérifient cet utilisateur et nous donnent une réponse ici. C'est pourquoi chaque fois que nous rechargeons la page, nous récupérons notre utilisateur actuel. Et c'est exactement ce que nous voulions atteindre. Maintenant, ici, à l'intérieur de nos clients, source AB, composant AB, oui, je veux apporter une petite amélioration parce qu' en fait, ici, nous avons annoncé un service, mais nous n'utilisons pas ce Ras et en fait maintenant nous obtenons un utilisateur donc nous pouvons écrire ici non pas trans, mais c'est l'utilisateur actuel. Et au lieu du journal de console, nous voulons le définir avec la méthode que nous avons déjà préparée. Nous avons donc ceci, notre service dot set utilisateur actuel, et à l'intérieur nous fournissons notre utilisateur actuel. Notre utilisateur est maintenant connecté avec succès à notre application. 19. Garde de la bouche: Dans cette vidéo, je veux parler de Gvd dans nos URL, ce qui signifie, par exemple, que nous ne devrions pas autoriser l'utilisateur à accéder à la page d'accueil. S'il est déjà enfermé, il doit sauter directement sur le plateau. Par exemple, si nous ne sommes pas bloqués et que nous essayons d'accéder à la page du tableau, alors lorsque nous ne sommes pas autorisés à entrer nous devons être redirigés vers la page d'accueil. Il existe donc différentes approches à ce problème. Mais pour tout cas d'utilisation, je vous recommande vivement de commencer par créer un observable d' étain islamique. Faisons ça maintenant. Donc, en fait, je veux sauter dans notre application, nos services, notre service ici sera créé flux d'utilisateurs actuels. Et comme ils l'ont dit, il est coupé que nous pouvons utiliser à partir de n'importe quel endroit de notre application. Et juste pour vous rappeler, nous utilisons ici définir l' utilisateur actuel pour modifier le flux. Donc, essentiellement, ce que nous pouvons faire maintenant, par exemple, à l'intérieur de notre composant d'application quelque part après juin, nous pouvons écrire ce point, notre point de service utilisateur actuel ici nous avons raison et abonnez-vous au forum, et nous obtenons ici notre réponse. Et maintenant je veux juste écrire ici le journal de la console. Tu vois de quoi je parle ? Nous nous sommes donc abonnés au flux de notre service. Désormais, chaque fois que nous changeons de flux, nous récupérons ces données dans ce composant. Vérifions-nous maintenant dans le navigateur. Et nous obtenons ici deux journaux de console. Tout d'abord faire la course et le définir, puis Ras et les informations sur notre utilisateur, pourquoi cela se passe comme ça au début du flux ne l'est pas parce que nous n'étions pas encore un utilisateur louche. Mais après un certain temps, lorsque notre appel CurrentUser est terminé et qu'il est réussi, nous définissons CurrentUser dans ce flux. C'est pourquoi chaque endroit où nous nous abonnons à cet utilisateur actuel peut obtenir ces informations. Et c'est exactement cette information. Mais nous pouvons l'améliorer encore parce que nous voulons essentiellement vérifier s'il est verrouillé ou non. C'est pourquoi vous voulez généralement prendre cette réponse et la convertir en booléen et vérifier la valeur true. Dans ce cas, nous sommes bloqués, mais nous ne voulons pas écrire ce code partout. C'est là que nous pouvons, à l'intérieur notre service, créer un flux supplémentaire basé sur notre premier flux. Voici donc notre utilisateur actuel de Stream. Mais maintenant, je veux créer un nouveau flux, qui s'appelle logger tin. Et maintenant, dans notre application, à n'importe quel endroit que nous pouvons utiliser, nouveau flux est l'équipe de journaux. Alors qu'est-ce qu'ils y ont fait ? Ici, nous utilisons cet utilisateur actuel et il s'agit déjà d'un flux. Nous voulons simplement la transformer en une autre valeur. C'est là que je suis en plein dans le tuyau DOD, puis dans la fonction Plan du site. Et si vous ne le savez pas, c'est le code Rix JS. Donc, essentiellement, nous utilisons des looks chess et disons à Angular pour transformer nos flux. Et c'est de cette façon que nous l'utilisons. Nous écrivons toujours le point pipe , puis la liste de nos transformations. C'est là que vous verrez ce tuyau partout et ici à l'intérieur où vous utiliserez une carte pour cartographier nos données. Nous savons donc qu'à l'intérieur de notre carte nous pouvons obtenir trois états différents, non défini, faux et vrai. Mais le point principal est que notre application ne se soucie pas d'undefined. Il était pertinent de vérifier sa connexion. Si nous avons ces informations, si nous ne les avons pas encore, nous voulons simplement attendre ces informations. C'est bien avant que je veuille ignorer cette propriété non définie en tant que. C'est ici que nous pouvons utiliser le filtre avant notre carte. Et le filtre est également une fonction. Donc essentiellement, tout d'abord, nous utilisons un filtre à l'intérieur du tuyau, puis une carte. Donc, ce que nous obtenons filtre d"informations à l"intérieur du filtre en obtenant notre utilisateur actuel, et en fait cet utilisateur actuel peut être indéfini maintenant ou notre utilisateur actuel. Et ici nous ne voulons pas arriver à la carte si elle n'est pas définie, c' est pourquoi ici nous pouvons écrire l'utilisateur actuel n'est pas égal à undefined it. Dans ce cas, nous viendrons ici et voici notre carte. Donc, ce que nous voulons faire carte encart, où je suis ici, utilisateur actuel. Ici, nous voulons simplement le convertir en booléens afin que nous puissions écrire ici booléen puis utilisateur courant. Dans ce cas, cette logique nous ramènera vrai ou faux, et nous sauterons cela, non défini ce dont nous n'avons pas besoin et que nous n'utiliserons pas dans notre application. Mais nous pouvons encore simplifier ce code. Au lieu de voler et cette logique peut définir la carte, nous pouvons simplement écrire ici booléen, et cela fera exactement la même chose. Donc R is look at tin est un nouveau flux basé sur l'utilisateur actuel, qui retournera pour nous vrai ou faux. Allons voir si ça fonctionne. Je vais revenir en arrière dans le composant d'installation. Et ici je veux écrire ce point ou point de service est verrouillé. Ici, nous pouvons également écrire Subscribe et nos têtes et notre repos seront verrouillés. Alors voyons ça. Nous pouvons même le nommer pour être plus compréhensible, est connecté. Et ici, le journal de la console est le journal de tin, coma est la propriété de connexion. Sauvegardons cela et vérifions-le et naviguons. Je recharge la page et ici nous ne voyons pas l'islam devenir indéfini. C'est. Nous voyons simplement que le passage est faible parce que c'est le premier état où nous avons vrai ou faux. Et c'est exactement de cette façon que nous pouvons utiliser dans n'importe quel endroit de notre application, ce flux pour savoir si l' utilisateur est connecté ou non. Maintenant, je veux supprimer ce code car nous n'en avons pas besoin ici. C'était juste pour les tests. Et maintenant, je veux vous montrer la solution la plus simple, comment vous pouvez rediriger l'utilisateur vers une autre page. Et nous pouvons simplement commencer par notre composant d'accueil, parce que nous voulons essentiellement rediriger l'utilisateur vers la page du forum s'il est déjà verrouillé, comment nous pouvons le faire. Tout d'abord, ici, nous devons injecter à l'intérieur du constructeur notre, notre service. Voici donc le service des heures privées annoncé, service que nous avons déjà. Maintenant, nous voulons écrire des outils sur les besoins, nous avons donc initialisé. Nous allons maintenant utiliser l'ingénierie. Et à l'intérieur maintenant, nous pouvons écrire exactement cette logique Lake Road dans notre composant d'application. Voici donc ce point, notre point de service. Ici, nous sommes enfermés. Donc, après cela, nous pouvons écrire Subscribe et nous pouvons obtenir ici est le connecter à propriété ici à l'intérieur de cet subscribe soit devenir vrai, soit nous obtenons faux. Et si c'est vrai, nous voulons rediriger l' utilisateur vers la page du forum. C'est ici que nous pouvons simplement essayer. Eve est comme une boîte de conserve. Ensuite, nous voulons rediriger l'utilisateur. Et pour essayer de rediriger, nous pouvons utiliser comme nous l'avons utilisé précédemment, le routeur. Nous allons donc créer un nouveau routeur de propriété privée. Et ce routeur, maintenant dans notre condition if, nous pouvons écrire ce point, point de navigation par URL. Et ici, nous pouvons simplement fournir des tableaux slash. Et en fait, nous n'avons pas encore implémenté ces tableaux slash, mais cela n'a pas d'importance. Nous le faisons simplement à titre d'exemple, comment vous pouvez restreindre l' accès aux URL. Allons voir ça. Et en fait, nous avons déjà une erreur, impossible de faire correspondre de nouveaux itinéraires. Et voici les planches. Et essentiellement, nous pouvons le vérifier, par exemple, avec un registre de barre oblique. Pour comprendre que cela fonctionne, je vais recharger la page et comme vous pouvez voir où sur slash register, pourquoi cela se passe où sauter à la page d'accueil, j'appuie sur Entrée et nous n'avons même pas vu notre page d'accueil où ils s'inscrivent directement. C'est donc le moyen le plus simple de mettre en œuvre, par exemple, la redirection angulaire dans une autre route. Mais voici un problème que nous avons utilisé ici, abonnez-vous à partir d'un échange. Tu dois être très prudent avec ça. Parce que si nous utilisons subscribe, nous devons également écrire unsubscribe. Si nous n'avons pas essayé de nous désinscrire, cela signifie que nous avons un abonnement arme de poing dans notre application. En fait, notre pathologie de la composante d'origine a été détruite parce que nous sommes dans la page du registre, mais cet abonnement est toujours là parce que nous ne nous en sommes pas désabonnés. C'est là que nous devons toujours penser à nous désinscrire de nos abonnements. Pour ce faire, nous devons simplement créer un abonnement ici en haut, par exemple, c' est le connecter dans l'abonnement, et le type est abonnement. Maintenant, dans notre moteur, nous pouvons attribuer cet abonnement connecté. Le résultat de Subscribe sera notre abonnement. Maintenant, en haut, nous pouvons ajouter détruire. Donc quand ce composant sera détruit, mais je voulais créer en G sur la méthode de destruction. Et à l'intérieur, nous pouvons simplement écrire ceci, c'est comme obtenir un abonnement, le DOD, se désabonner. Je l'enregistre mais nous obtenons une erreur. Nous n'avons pas d'initialiseur ici parce que l'entrée par défaut faible n'est pas définie, elle n'est pas définie et c'est vrai. C'est pourquoi nous pouvons ici l' écrire ou l'indéfinir, car il n'est pas défini par défaut et nous le définissons simplement en ingénierie. Mais c'est mon code ici, n' est pas valide car cet objet peut être indéfini. C'est pourquoi nous devons ici mettre un point d'interrogation. Donc cette ligne ne fera rien si c'est un it indéfini. Mais si nous avons un abonnement, nous réussirons le désabonnement lorsque le composant sera détruit. Mais maintenant je veux vous montrer la deuxième variante possible à l'intérieur et à la couleur pour effectuer des redirections ou pour garder vos itinéraires. Et c'est exactement la fonction appelée quadrants dans Angular. Et l'idée est exactement la même que pour les intercepteurs, nous faisons quelque chose avant que le travail ne définisse le composant. Donc, essentiellement, nous voulons faire quelques vérifications, puis retourner vrai ou faux. C'est ici pendant les heures de notre module. Je veux créer un service Insights et votre fichier, et ce sera notre service word dot. Ici, je souhaite exporter notre nouveau service de mots sur les heures de cours. Et ici, nous écrivons que les outils peuvent activer. Et c'est exactement la même chose que nous avons fait avec nos intercepteurs. Comme vous pouvez le voir ici, nous devons définir, activer pour faire fonctionner ce R-carré. C'est pourquoi ici nous pouvons écrire, activer, et ici nous obtenons plein de choses à l'intérieur. En fait, nous n'avons pas besoin de tout ça. Nous pouvons le supprimer et ce retour est trop bavard. Nous voulons revenir ici. Nous voulons renvoyer un observable de booléen, ce qui signifie que nous retournons vrai ou faux. Mais en tant que flux, maintenant à l'intérieur, nous voulons utiliser notre, notre service. C'est pourquoi nous devons ici définir le constructeur et injecter ici dans notre service de nos heures de service. Et l'idée est qu' à l'intérieur de cette méthode, nous devons renvoyer un observable de booléen. C'est ici directement. Je peux écrire ça. Notre service. Le point est une boîte à billes. Ici, je veux écrire pipe parce que nous avons besoin de faire des choses à l'intérieur. C'est mon point de vue. Je vais également ajouter MAB et nous arrivons ici car un argument est la propriété de connexion. Maintenant, à l'intérieur, ils veulent simplement vérifier si nous avons une connexion, donc c'est vrai, puis ils veulent directement retourner vrai. Mais si nous avons false, je souhaite rediriger l' utilisateur vers une autre page. C'est là que nous avons également besoin d'un routeur. Nous pouvons donc injecter ici un routeur privé, et c'est notre routeur, et nous pouvons l'utiliser ici. Nous écrivons donc ce point router dot navigate by URL. Par exemple, avec le détecteur, utilisez la page d'accueil. S'ils ne sont pas bloqués. Après cela, nous devons retourner false. C'est obligatoire parce qu'il s' agit essentiellement d'un booléen observable et nous devons non seulement faire quelque chose ici, mais également renvoyer false. Et ici, je veux naviguer par URL, pas une chaîne vide, mais juste une barre oblique. Et vous pourriez dire, mais pourquoi nous ne sommes pas revenus, écoutez simplement ceci, parce que ce locked-in est un flux avec vrai ou faux. Parce qu'ici, nous voulons également utiliser route et naviguer par URL, et nous pouvons le faire si nous retournons simplement vrai ou faux. Notre gouache est maintenant prête, mais nous devons nous enregistrer correctement. C'est mon intérieur dans notre module. Ici, à l'intérieur des fournisseurs, nous devons mettre notre service de fil hiboux que nous venons de créer. Maintenant, nous devons vérifier un itinéraire, notre quadrant de route, c'est ici que nous pouvons, il peut s'activer. Et à l'intérieur, nous fournissons un tableau avec notre service d'authentification, ce qui signifie que lorsque nous passons à la connexion, notre service sortant vérifiera si nous sommes bloqués dans un nœud avec l' utilisation de notre flux. Et s'il retourne false, nous serons redirigés vers la page d'accueil. Allons voir ça. Je recharge la page et un message d'erreur s'affiche. La classe, notre service carré ne peut pas être créé car il n'a pas de décorateur angulaire. Et en fait, ici à l'envers, j'ai oublié d'écrire injectable. Ne l'oubliez pas. C'est par ici. Mettons des crochets injectables et ronds. Rechargeons la page, mais il n'y a pas d'erreur. Maintenant, je veux essayer de passer à notre même moyen. Je frappe le même moyen. Et comme vous pouvez le voir, je peux accéder à la page de connexion car ici nous avons écrit pour activer notre équipe. Ce qui signifie en fait que si nous arrivons ici , nous pouvons accéder à cette page. Ce qui signifie en fait que si ici dans notre application, je supprimerai notre jeton et ils rechargeront la page de connexion. Je serai redirigé vers la page d'accueil car ils n' ont pas accès à cette page spécifique raison de l'activation possible, ce qui signifie que nous avons réussi à accéder aux pages en deux de différentes manières. Tout d'abord, en utilisant le composant et deuxièmement en utilisant la fonction Angular qui peut être activée. Mais en fait, nous avons créé ce hibou carré, non pas pour se connecter ou s'inscrire, mais pour les futures cartes et les pages de portage car il y avait beaucoup de demandes uniquement pour les utilisateurs connectés. C'est là que je vais supprimer, activer. Et ils veulent également changer notre code à l'intérieur de la maison des composants, car ici nous ne devrions pas rediriger vers le registre des barres obliques, mais plutôt vers les tableaux de barres obliques, que nous implémenterons dans notre prochaine vidéo. 20. Obtenir des tableaux de jeux: Dans les vidéos précédentes, nous avons terminé la mise en œuvre notre page d'accueil et nous commençons maintenant une nouvelle section. Et il s'agit d'un tableau de page. Donc, en quoi consiste cette page, c'est une page où nous pouvons obtenir la liste des tableaux de l'utilisateur, les afficher à l'écran et créer un nouveau tableau. Ici, vous voulez certainement demander, d' accord, mais nous avons des E/S de socket. Allons-nous utiliser les sockets sur lesquels vous vous trouvez exactement sur cette page ? Et ma réponse est non parce que nous n'avons pas besoin d'utiliser socket ou partout où nous avons pour TP hier, beaucoup de cas où nous avons besoin de socket IO, mais certainement pas pour cette page. Pourquoi pas ? Parce qu'en fait c' est la page où nous, pour l'utilisateur actuel, une liste aléatoire plus simple de mots. autre utilisateur n'a besoin d' accéder à cette page spécifique. C'est là que cela n'a aucun sens d' utiliser ici socket IO, mais ne vous inquiétez pas, nous utiliserons socket ion beaucoup plus tard sur la page de la carte unique. Et dans cette vidéo, nous allons nous concentrer sur la création de notre tableau sur le backend et sur l'obtention de la liste des tableaux à partir de l'API. C'est pourquoi nous allons revenir de notre client à notre serveur. Ici, dans notre dossier source, à l'intérieur des types, nous voulons créer une nouvelle interface et la nommer board, dot interface et point ts. Board est donc notre nouvelle entité. À l'intérieur, nous enregistrerons notre interface de tableau que nous utiliserons dans différentes pages. Par exemple, dans la page contenant la liste des tableaux et sur la page du tableau unique. Nous voulons donc exporter notre nouvelle interface et ce tableau. Et la question est de savoir ce que nous aurons à l'intérieur, exactement comme nous l'avons fait chez notre utilisateur. Nous aurons ici une interface pour le tableau comme celle-ci. Et nous aurons ici un document du tableau, qui étendra le document pour obtenir au moins un identifiant. Nous n'avons donc pas besoin de NAD ici, mais nous avons besoin d'au moins un titre. Chaque port doit donc avoir un titre. Deuxièmement, nous l' aurons créé ici, il s'agit d'une date, et ce sera également une date. Et en fait ici sur le côté droit, utilisateur, comme vous pouvez le voir, nous n'avons pas créé de tête mise à jour, mais elle est là à cause de Mongoose, donc nous pouvons l'écrire ici aussi. Le dernier champ dont nous avons besoin ici dans notre tableau. Notre tableau doit appartenir à un utilisateur. C'est ici que nous devons enregistrer le MAD de l'utilisateur qui a créé ce forum. Et pour cela, nous pouvons écrire ici l'ID utilisateur, et nous n' écrivons pas ici une chaîne, mais des types de points de schéma, un ID d'objet point. Nous devons maintenant importer ici le schéma supérieur de Mongoose. Comme vous pouvez le voir ici, nous avons cette notation spéciale, types de schéma, l'ID d'objet point. Et c'est exactement comme ça que nous créons un « d » dans Mongoose. Donc à l'intérieur, ce n'est pas juste une idée, c'est un identifiant d'objet, mais au moment où nous allons créer notre API, cet ID utilisateur sera simplement une chaîne rapide, afin que nous puissions comprendre ce que l'utilisateur a créé cette partie spécifique. La prochaine étape consiste à créer notre document pour le tableau. C'est là que je veux une interface experte et nous avons ici un document Word, exactement comme nous l' avions sur la droite. Ici, nous voulons utiliser le document extents et ce document nous vient de Mongoose, nous ne devons donc pas oublier de l' ajouter ici haut parce que dans un autre cas, cela ne marchera pas. Ici, nous mettons simplement des crochets et rien de plus. Nous n'avons donc pas ici de mot de passe valide ou quelque chose de similaire parce que nous étendons simplement le document et avec quelque chose de nouveau découragé. Nous avons donc créé avec succès notre interface de tableau. Il est maintenant temps de créer notre modèle. Donc, à l'intérieur des modèles, nous créons de nouveaux points de tableau de fichiers. Et encore une fois, comme nous l'avons fait pour l'utilisateur, nous allons créer notre schéma de tableau. Donc ici à droite, je vais ouvrir notre utilisateur pour que nous puissions y jeter un œil. Tout d'abord, ici en haut, je vais importer le schéma et le modèle. Et maintenant, nous voulons créer notre schéma de tableau comme nous l'avons fait pour notre utilisateur. Et ici, nous voyons nouveau schéma et c' est le schéma mongoose. Et à l'intérieur, nous fournissons le document de notre tableau que nous venons de créer. Après cela, nous avons des crochets ronds et à l'intérieur, nous devons fournir tous les champs de notre document de conseil. Le premier champ ici sera intitulé. Qu'est-ce que le titre ? C'est une chaîne. Disons ici que notre type est chaîne. Et deuxièmement, c'est obligatoire parce que nous ne pouvons pas créer notre tableau sans titre. C'est pourquoi nous avons mis ici requis. Comme vous pouvez le voir ici, une erreur s'affiche. L'argument de type title n'est donc pas assignable au paramètre, ce qui signifie que nous avons fait quelque chose de mal avec notre document du forum. Et voyez notre problème car ici ont été étendus à partir du document, mais nous ne l'avons pas fait à partir de notre tableau, ce qui signifie en fait que toutes ces propriétés n' étaient pas disponibles rapidement, comme vous le pouvez voyez maintenant qu'il n'y a pas d'erreur. Le titre est que maintenant nous avons juste besoin de fournir un ID utilisateur. Et ici, à l'intérieur, nous devons définir notre type et ce sera exactement le même schéma, les mêmes types de points, l'ID d'objet point. Et le suivant est requis dans ce cas quand non, OK. L'utilisation du rayon D est également obligatoire. Ensuite, nous devons exporter notre modèle. Voici donc le modèle par défaut expert et nous fournissons un aperçu en tant que document générique de notre tableau ici maintenant nous pouvons ouvrir nos crochets et le premier périmètre que nous fournissons ici nommé tableau. Et il y a un deuxième paramètre, notre schéma de carte. Comme vous pouvez le voir, nous avons implémenté notre tableau exactement de la même manière que nous l'avons fait avec l'utilisateur. Mais board est beaucoup plus simple car nous n' avons pas ici de méthodes supplémentaires et de validations supplémentaires. Nous devons maintenant créer un nouveau contrôleur de carte. Et la méthode pour faire entrer Albert. C'est pourquoi ce que je veux faire, je veux sauter dans de tels niveaux de serveur de source de service. Ici. Tout d'abord, je veux enregistrer un nouvel itinéraire et ce sera app.get. Et nous avons ici des tableaux slash api slash. Et voici la liste pour obtenir tous les tableaux de l'utilisateur actuel. C'est ici que nous voulons utiliser notre middleware OS, car si nous ne sommes pas connectés, nous pouvons obtenir des cartes. Nous devons avoir un utilisateur. Et le dernier ici sera le contrôleur de notre conseil. Nous ne l'avons pas ici et là, point, par exemple, obtenez des tableaux. Nous devons donc créer contrôleur de notre carte et obtenir ici la méthode de la carte. C'est pourquoi au sommet. Tout d'abord, je veux entrer notre étoile en tant que contrôleur de la carte, Rome, et voici les tableaux slash des contrôleurs de chemin. Et nous n'avons pas encore ce fichier, créons-le maintenant. Ici, à l'intérieur des contrôleurs, je peux créer des points de tableaux, et ici nous devons créer une nouvelle action. Ici, nous allons le faire exactement de la même manière que nous l'avons fait dans le contrôleur de nos utilisateurs. Donc tout d'abord, en haut, nous devons entrer notre réponse à la demande et la fonction suivante d'express. Après cela, nous pouvons créer notre nouvelle fonction, get boards, qui sera une fonction asynchrone. Et nous arrivons ici tout d'abord, notre demande et ceci est type request, puis response, c' est type response. Et le dernier est le type suivant, la fonction suivante. Et cela précédemment, nous voulons écrire ici try-catch afin que nous puissions tout gérer correctement. Ici, nous obtenons notre erreur et nous pouvons simplement jeter à l'intérieur de notre prochaine ère, ce sera la prochaine. Maintenant, à l'intérieur de notre tribu doit essayer de laisser la logique pour cela. Nous devons injecter ici notre modèle de planche que nous avons déjà créé. Voici donc un important modèle de conseil d'administration pour Rome. Et ici pour danser, on saute à l'intérieur de modèles slash board. Et maintenant, nous pouvons essayer de trouver tous les tableaux par ID utilisateur spécifique. Nous voulons donc obtenir nos conseils de propriété. Et ici, nous utilisons un poids modèle Bohr dot find. Et si vous ne le savez pas, find trouvera pour nous anciens enregistrements par prédicat spécifique. Donc, à l'intérieur, nous pouvons fournir un objet avec une usure alimentée t égal à l'ID de point utilisateur de point de demande. Et comme vous pouvez le voir ici, nous obtenons directement une flèche de TypeScript indiquant que l'utilisateur n'existe pas dans la requête. Et c'est tout à fait juste. Pour rappel, nous avons créé ici nos propres demandes personnalisées avec un champ à l'intérieur. Ici, nous pouvons écrire une interface de requête express , et dans ce cas, elle fonctionnera correctement, mais notre utilisateur de requête peut éventuellement être indéfini et alors ce code ne fonctionnera pas. C'est ici qu'il faut essayer. Si nous n'avons pas d'utilisateur point request, alors nous voulons lancer ici pour 01. Donc, l'adresse de retour, le statut d'envoi, et voici 401, exactement comme nous le faisions précédemment dans le contrôleur d'un utilisateur. Donc, en bas, nous avons fait exactement la même chose. Et maintenant, nous devons simplement répondre par le biais de nos tableaux. Ici, nous pouvons écrire rest dot sand, et nous envoyons ici des tableaux. Et au centre, la liste de ce tableau n'est qu'un tableau. Allons voir si ça fonctionne. Comme vous pouvez le voir ici, insérez le serveur, celui-ci est connecté et il n'y a pas d'erreur. Alors passons à l'intérieur de Postman. Faisons ici une demande de planches à tarte slushy. Et comme vous pouvez le voir ici dans les en-têtes, ou vous avez déjà un jeton injecté parce que nous avons déjà utilisé cette requête. Je suis en train de frapper le sable. Et comme vous pouvez le voir, je récupère un tableau vide parce que nous n'avons pas de tableaux. Maintenant, la question de savoir comment nous pouvons obtenir des tableaux si nous n'avons toujours pas de tarte pour créer un tableau. Et pour cela, nous pouvons simplement sauter à l'intérieur Mongo et créer ce port par nous-mêmes. C'est par ici. À l'intérieur de la console, j'écrirai docker exec moins 80 MongoDB Mongo. Donc, essentiellement, nous voulons appeler commande Mongo dans notre conteneur, MongoDB. Juste pour vous rappeler si vous n'avez pas utilisé dark ici, mais que vous venez d'installer MongoDB sur votre machine. Ensuite, il vous suffit d'écrire console d'insertion MONGO et cela fonctionnera. Je frappe ici, saisis-les ici dans la console de Mongo. Nous devons maintenant utiliser notre base de données. C'est pourquoi je suis ici en train d'écrire en utilisant l'espace ultra long. Et après cela, ils ont mis un point-virgule. J'appuie sur Entrée. Comme vous pouvez le voir ici, nous sommes passés à la remorque dB HL. Maintenant, nous pouvons écrire des collections d'exposition en point-virgule, et comme vous pouvez le voir, ce sont nos collections. Nous avons ici des tableaux et nous avons nos utilisateurs. Ce que nous voulons faire maintenant, nous voulons insérer un nouvel enregistrement dans nos tableaux. Pour cela, nous pouvons écrire db point, ports, dot insert, et ici nous avons une fonction, donc des crochets et à l'intérieur d'un objet. Et ici, nous devons fournir ce que nous voulons insérer. Dans notre cas, ce sera juste le titre, par exemple, le premier tableau. Et nous devons écrire ici un identifiant utilisateur, mais ici nous ne devons pas fournir la chaîne VM doit fournir un ID d'objet. C'est là que je veux écrire l' identifiant utilisateur deux-points, puis l'objet IED. J'ai ouvert ici des crochets ronds et à l'intérieur je colle dans notre flux. Comme vous pouvez le constater, il ne s'agit pas seulement de l'usure, de la fin de la chaîne. Nous commençons ici à l'intérieur ID utilisateur et de l' ID d'objet avec la chaîne. Et à la fin, nous devons mettre un point-virgule. J'appuie sur Entrée et nous obtenons le bon résultat inséré. Et maintenant, nous pouvons essayer d'obtenir toutes les notices de cette collection spécifique. Donc, les tableaux de points db, recherche de points et les crochets ronds. J'appuie sur Entrée et nous n' obtenons qu'un seul objet avec ID. Et c'est l'idée de notre titre de tableau premier tableau et l'utilisateur AD est un identifiant d'objet correct. C'est pourquoi nous pouvons maintenant revenir dans notre facteur, choisir notre demande de tableaux API et cliquer sur Envoyer. Comme vous pouvez le voir, nous obtenons notre ASHRAE avec un objet à l'intérieur. Ici, nous avons notre identifiant et ici nous le voyons comme une chaîne, titre et un ID utilisateur, ce qui signifie que nous avons créé avec succès notre premier tableau depuis la console et que nous avons la liste de nos tableaux. Mais ici, je veux améliorer la dernière petite chose, comme vous pouvez le voir ici, nous obtenons nos identifiants du backend avec un trait de soulignement. Et en fait, généralement à partir de l'API, nous obtenons un DES. Normalement sans trait de soulignement. C'est juste le truc de MongoDB, qui signifie que ce n'est pas si confortable pour obtenir un, c'était souligné sur le front-end et je ne veux pas le faire. Et à l'intérieur de Mongoose, il est possible de régler ça. C'est pourquoi je veux revenir dans notre code, dans les sororités. Et ici, par exemple, après notre configuration d'abus, nous pouvons écrire ici Mongoose dot set here comme premier paramètre que nous fournissons à Jason. Et comme deuxième paramètre, nous fournissons un objet. Et à l'intérieur, tout d'abord, nous disons que nous sommes Charles jusqu'au bout. Et deuxièmement, transformez. Et ici, à l'intérieur transformé, nous avons deux arguments. Le premier sera souligné et second sera converti. Et c'est ça, la fonction. Et à l'intérieur de cette fonction, nous voulons écrire l' ID de soulignement du point converti par suppression. Donc, ce que nous faisons ici, nous pouvons passer à la méthode JSON qui est écrite à l'intérieur, nous fournissons une transformation, donc nous disons comment nous allons la transformer. Et en fait, à l'intérieur de Mongoose, nous allons récupérer NAD et underscore ID. Et ici, nous allons supprimer uniquement de l'ID de soulignement JSON, ce qui signifie en fait que dans Mongoose, nous avons toujours cet ID de trait de soulignement. Nous pouvons l'utiliser en toute sécurité, mais nous ne l'obtiendrons pas dans JSON, nous obtiendrons un identifiant normal. Et vous voudrez peut-être aussi savoir ce qu'est la force virtuelle et l'incitation à l' intérieur des modèles. Nous pouvons créer des propriétés virtuelles et par défaut dans Mongoose Whoop ne les récupérera pas. Et en fait, nous voulons les récupérer. C'est ici que nous écrivons des virtuels, c'est vrai. Voyons donc si ce code fonctionne. Je retourne voir le facteur et je suis sur le sable. Comme vous pouvez le voir ici, nous obtenons exactement la même réponse, mais nous n'avons pas d'identifiant de soulignement. Nous avons juste un d normalement, qui est une chaîne de caractères. Et c'est exactement comme si nous voulions l'utiliser dans le front-end. 21. Frontend pour les cartes de la réception: Dans la vidéo précédente, nous avons réussi à intégrer nos cartes en back-end. Nous devons maintenant commencer par notre festival de la partie frontale. Pour cela, nous devons implémenter notre module de cartes. Mais juste pour vous rappeler ici dans la source des clients , l'application, les composants maison, la maison, les T, nous avons très directement sur les tableaux slash lorsque nous sommes enfermés. C'est là que nous devons tout d'abord implémenter notre module de cartes et à l'intérieur de cette route, afin qu'au moins notre code puisse fonctionner correctement. C'est ici que nous voulons créer de nouvelles cartes de modules. Et il s'agit d'un module séparé pour une seule page où nous avons une liste des tableaux et, en fait, à l'intérieur, nous pouvons également créer un composant pour un seul tableau. Mais je tiens vraiment à séparer ces deux modules car ils sont deux différents. C'est mon module intérieur de nos cartes. Nous pouvons créer des tableaux point module.js. Et ici, je ne veux pas tout écrire à partir de zéro. Je veux copier et coller complètement le module entier et simplement le changer. Alors, qu'est-ce que nous avons ici ? Tout d'abord, notre classe sera ennuyée module. Nous n'aurons pas ici dans les déclarations, composant home et nous avons besoin de here and you round, mais ici nous n'avons pas besoin de path home, mais nous avons besoin de tableaux de chemin. Et ce composant home n'existe pas ici, nous devons donc le remplacer notre nouveau composant, le composant boards. C'est là que ce que je veux faire, je veux que les composants de la maison copient complètement ce répertoire personnel et le collent ici dans les tableaux, dans le dossier des composants. Vous pouvez donc utiliser des générateurs angulaires si vous le souhaitez. Je veux vraiment copier le module coller. C'est plus rapide pour moi. Donc, ici, je veux renommer ces composants en cartes, et c'est notre composant racine des cartes modules. Et à l'intérieur, nous avons deux dossiers. Tout d'abord, le composant de cartes HTML. Deuxièmement, les cartes composants ts. Ici, dans le code HTML, nous pouvons simplement tout supprimer et simplement écrire des tableaux pour vérifier si cela fonctionne. Maintenant, nous pouvons sauter à l'intérieur de notre composant Boards. Et ici tout d'abord, nous pouvons changer notre sélecteur et nous pouvons écrire ici des tableaux et notre URL de modèle sera un composant HTML important. Maintenant, à l'intérieur, nous avons notre classe, qui est le composant boards, et ici nous devons supprimer les outils. Nous n'en avons pas besoin pour l'instant. Et ils supprimeront tout le code de notre composant cartes, et nous pouvons également supprimer toutes les entrées. Nous avons donc créé avec succès notre nouveau composant de carte vide et nous pouvons maintenant l'utiliser dans notre module de cartes. Ici, nous pouvons écrire un composant de cartes et le faire. Saisissez-le automatiquement ici en haut. Et maintenant, nous avons un itinéraire pour les tableaux à barres obliques. Et ici, à l'intérieur des déclarations, nous pouvons définir notre composant de cartes. Et la dernière étape que nous ne devons pas oublier est enregistrer le module de ce forum dans notre module d'application. Donc ici, dans nos entrées, nous devons ajouter le module boards. Allons voir si ça fonctionne. Je n'ai pas de flèches ici sur le serveur Web. Maintenant, je veux accéder à notre page et la recharger. Et comme vous pouvez le voir, où se trouve notre texte sur les mots slash. Si je vais sauter ici sur la page d'accueil, je serai directement le tableau parce que je suis enfermé. Maintenant, voyons si nous allons être redirigés. Si nous ne sommes pas connectés. Pour cela, par exemple, nous pouvons simplement supprimer le jeton et recharger la page. Et comme vous pouvez le voir ici, nous ne sommes pas autorisés, mais nous ne sommes pas redirigés vers la page d'accueil. Et essentiel pour cela, nous avons créé à l'intérieur de notre maison des services r squared, et nous pouvons utiliser ce R-squared maintenant dans notre module de cartes. Donc, à l'intérieur des planches, à l'intérieur des cartes, le module T ici sur la route que nous pouvons attacher, peut être Et ici, nous devons fournir un tableau avec World Service que nous avons créé précédemment. C'est très bien de l'utiliser comme ça. Nous n'avons pas besoin de l' enregistrer ici. Comme vous pouvez le voir ici, il n'y a pas d'erreur. Rechargeons la page. Comme vous pouvez le voir maintenant, nous ne pouvons pas accéder à nos sports de boue et avons été redirigés vers la page d'accueil. Ce qui signifie que r peut s' activer, fonctionne correctement. Et maintenant, avec une seule ligne ici, nous pouvons définir quelles pages sont autorisées que pour les utilisateurs connectés. Nous avons donc créé avec succès notre module de cartes, et maintenant je souhaite créer une interface de port. Et nous pourrions le créer à l'intérieur du module boards. Mais en fait, je veux créer ici un nouveau dossier AB et l' appeler partagé. Parce qu'en fait, je veux mettre tous les types que nous utilisons partout dans ce dossier partagé. Par exemple, tableau de colonnes de tâches. Ce sont toutes des entités partagées que nous pouvons utiliser dans différents modules. va de même les services ou services qui sont partagés, comme le service de tableau, le service de tableau unique, le service colonne, le service de tâches. Nous pourrions le mettre dans un module spécifique, mais je veux vraiment mettre tout cela dans lequel nous allons simplement chercher des données dans le service partagé. C'est pourquoi nous avons partagé ici AB. Et ici tout d'abord, je veux créer de nouveaux types de dossiers. Et maintenant, dans nos types de prises de vue d' application, nous pouvons définir un nouveau type et c'est l'interface point tableau. Ts. Exportons ici notre nouvelle interface. Et ce sera une interface de notre carte et nous devons la nommer interface de port. Et à l'intérieur, nous devons définir exactement les mêmes champs que ceux que nous avons créés sur le backend. Et tout d'abord, voici NAD, c'est une chaîne. Deuxièmement, c'est le titre, c'est aussi une chaîne. Nous avons également créé ici que cela est tendu et que le dernier est mis à jour. C'est aussi une ficelle. Et en fait, ici, nous obtenions l'ID utilisateur, juste pour vous rappeler ici à l'intérieur nos modèles de source de serveur et ici nous avons notre tableau. Nous avons UserID, ce qui signifie en fait que nous obtiendrons également l' ID utilisateur et c'est une chaîne. Notre interface pour Boyd unique est complètement prête et nous pouvons l'utiliser dans n'importe quel composant. Maintenant, je veux créer le service pour travailler avec les tableaux. Et en fait, toutes les demandes comme créer un tableau, s'ennuyer, obtenir des tableaux, supprimer un tableau iront dans le service. C'est là qu' à l'intérieur du partage, je veux créer un nouveau dossier et le nommer services. Et puis nous avons dit que nous allons créer un nouveau service qui s' appelle Boards service point ds. Nous allons maintenant définir notre nouvelle classe. Nous avons donc ici un service de classe Boards, et nous devons écrire dessus injectable pour pouvoir l'utiliser partout. La première méthode que nous voulons définir ici est get boards. C'est exactement ce que nous avons déjà préparé sur le back-end. Voici donc nos tableaux get et nous n'avons pas besoin de fournir d'argument ici. Et nous retrouverons un observable avec un rayon de nos planches. C'est pourquoi nous pouvons écrire ici un tableau d'interface de port. C'est exactement ce que nous venons de définir. Maintenant, à l'intérieur de ce tableau, nous voulons nous assurer que la demande HTP. C'est pourquoi nous devons essayer de construire et d'injecter. Voici les clients HTTP et HTTP. Maintenant, à l'intérieur de nos tableaux, nous voulons obtenir une URL exactement comme nous l'avons fait précédemment pour le service utilisateur. Nous avons donc ici notre URL et c'est l'environnement. Ne nous envoyez pas d'URL API. Et voici la barre oblique. C'est exactement notre enfant. Maintenant, nous pouvons renvoyer ce point http.get, et nous voulons obtenir notre URL sans aucune option. Et comme vous pouvez le voir ici, nous obtenons évidemment une erreur. objet observable n'est pas assignable à l'interface du tableau observable. C'est là qu'ici, comme précédemment, nous devons spécifier que nous allons revenir dans une gamme de tableaux, donc nos services sont complètement prêts et ils veulent juste le tester. C'est pourquoi je veux revenir ici à l'intérieur de notre module boards boards et nous devons tout d'abord injecter le service ici chez les fournisseurs. Ici, nous pouvons écrire que nous avons ici le service Boards, et il est disponible rapidement. Nous sommes maintenant autorisés à sauter à l'intérieur de notre composant injecté. Donc tout d'abord, je veux définir notre constructeur et nous savons qu'ici nous avons le service Boards et c'est notre service Boards. Maintenant, en plus, je veux écrire ici des outils dessus. Et maintenant non initialisés, ils veulent récupérer cette liste de nos cartes. Nous avons donc notre énergie là-dedans et l'intérieur, ils peuvent simplement écrire ce service de tableau, obtenir des tableaux, s'abonner pour que nous obtenions le résultat. Voici quelques résultats. En fait, il s'agit de forums et ils veulent juste enregistrer sur console ce que nous récupérons. Nous avons donc nos planches, des planches de coma. Allons voir si ça fonctionne. Mais il n'y a pas de flèches ici à l'intérieur du serveur Web frontal. Et reconnectons-nous maintenant car nous sommes bloqués. Je vais donc vous fournir notre nourriture sur gmail.com. Maintenant, comme vous pouvez le voir après vous être connecté, mais je me retrouve dans les tableaux slash. Et ici à l'intérieur de la console, nous pouvons voir des tableaux Et il s'agit d'un tableau unique pendant que nous l'obtenons parce que dans la vidéo précédente, ils ont été créés dans la console pour tester le graphique ce point et essentiellement ces sous-tableaux pour notre utilisateur actuel. Pourquoi est-ce que c'est ? Parce qu'ils sont en fait ici notre demande back-end. Nous trouvons ici nos tableaux par ID utilisateur, ce qui signifie que nous trouvons tous les tableaux avec cette demande d'ID utilisateur à partir desquels nous obtenons cet identifiant utilisateur à partir de notre demande réseau. Voici la demande de notre conseil, et voici nos en-têtes. Et comme vous pouvez le voir ici dans les en-têtes en bas, nous avons cette autorisation et voici notre jeton. Ce sont exactement les informations dont notre backend a besoin pour fournir rapidement des données correctes à l'utilisateur actuel. Donc, comme vous pouvez le voir, l'obtention des cartes à l'intérieur du module fonctionne correctement. Et nous avons préparé avec succès notre service pour obtenir une liste de tableaux sur le client. 22. Formulaire en ligne: Dans cette vidéo, je veux parler d'un module supplémentaire que l'on souhaite généralement créer en direct pour notre application. Et je parle ici d'un formulaire en ligne. Jetons un coup d'œil au projet complètement terminé que nous mettons en œuvre. Comme vous pouvez le voir ici, je suis sur la page des sports slash et je viens de créer un utilisateur. Nous n'avons donc aucun conseil d'administration. Et ici, nous avons créé un tableau. Comme vous pouvez le voir, il ne s'agit que d'un carré avec quelques textes. Mais quand je clique dessus, vous pouvez voir ici une entrée sans espace réservé, nous pouvons taper ici, par exemple, foo board, et nous appuyons sur Entrée. Et après cela, notre tableau est directement créé. Ici. Nous revoyons cette carte, et il s'agit essentiellement d'un exemple de formulaire en ligne. Nous avons donc ici un carré avec le texte. Ensuite, nous cliquons ici et activons un mode d'édition où il suffit de taper quelque chose et nous appuyons sur Entrée. La solution la plus simple serait donc de simplement créer ce composant et de le jeter à l'intérieur de nos planches. Mais ensuite, nous allons sauter dans un seul tableau. Ici, sur la gauche, nous avons exactement la même chose. Vous pouvez voir ici le titre de notre tableau que je suis en train de cliquer ici et que nous passons en mode édition. Ici, nous voyons le titre de notre tableau, mais maintenant nous pouvons le modifier pour pouvoir le mettre à jour et appuyer sur Entrée et date Web, le titre de notre tableau, exactement le même que nous avons ici avec la liste. Ce ne sont que quelques textes cachés ici et nous obtenons ici non seulement une entrée, mais aussi un bouton, au moins. Comme vous pouvez le constater, les styles sont différents dans chaque cas, mais cela n'a pas beaucoup de sens de créer un composant supplémentaire pour chaque cas, comme créer un composant intégré, mettre à jour nom du tableau, puis création d'une tâche, création d'une colonne, etc. Parce que nous pouvons également ajouter la tâche dans notre colonne et il s'agit également d'une entreprise en ligne. C'est pourquoi j'ai vraiment une approche judicieuse qui serait de créer un composant unique qui puisse couvrir tous nos besoins. Quels cas avons-nous donc ? Tout d'abord, dans tous les cas, nous avons un balisage. Ensuite, nous avons un état d'édition lorsque nous cliquons simplement sur l'élément. Mais comme vous pouvez le constater, le balisage peut être complètement différent. Mais ce qui est différent, ce n'est pas le balisage, c'est juste le style en fait, si nous allons vérifier ici, comme vous pouvez le voir, il si nous allons vérifier ici, s'agit d'une police en ligne que j'ai créée et nous joignons simplement ici le formulaire Créer une tâche. L'idée principale est que toutes ces classes sont disponibles globalement et que nous pouvons simplement les modifier avec CSS. L'intérieur était fourni dans différentes choses. Par exemple, nous pouvons tout d'abord taper du texte qui sera affiché ici, comme par exemple au niveau actuel. Mais nous pouvons également afficher ici ce texte comme le nom de notre tableau. Maintenant, nous sommes masqués ici, Modifier et nous pouvons vouloir propager ce texte dans le formulaire d'édition. Mais ici, avec une tâche, nous n'avons pas besoin de le faire. Mais ici aussi, nous avons un cas où nous avons au bouton Panier et pas seulement une entrée. Tous ces boîtiers doivent donc se trouver à l'intérieur ce composant unique pour fonctionner correctement. Essayons maintenant de créer ce composant. Et ce composant est super partageable. C'est pourquoi je veux l' emballer dans AB srand. Et ici, nous voulons créer les modules de dossiers. Ici, vous pouvez demander, d'accord, mais nous parlons de composant. Oui, vous avez parfaitement raison, mais vous ne pouvez pas utiliser de composants sans module. Vous pouvez soit enregistrer un composant à l'intérieur d' un module, soit injecter module et le module d'injection est bien meilleur car vous pouvez définir quels composants vous voulez autoriser à l'extérieur et quels n'est pas. C'est là que c'est généralement lorsque nous voulons partager un composant, je vous recommande vivement de créer un module pour cela. C'est là que nous avons un module et nous pouvons créer un nouveau dossier qui sera intégré au formulaire. Et c'est exactement le formulaire pour tous ces cas. Passons maintenant à l'intérieur et créons ici formulaire en ligne point module.js. Et à l'intérieur, nous devons exporter notre classe, qui est un module de formulaire en ligne. Maintenant en haut d'un pour injecter notre module NG comme nous l'avons fait précédemment. Et ici, nous voulons des entrées internes pour ajouter notre module commun. L'étape suivante consiste à créer nos composants. Nous aurons donc ici un dossier de composants, et ici à l'intérieur nous aurons notre formulaire en ligne avec deux fichiers. Tout d'abord, dans le composant point en direct, point ts, et deuxièmement, le composant point HTML en ligne. Essayons-le à l'intérieur de certains textes, par exemple sous forme de ligne. Et passons à notre intérieur des terres à partir d'ici, expert, notre composant de formulaire en ligne de classe. Maintenant, en haut, nous devons définir notre composant. À l'intérieur, nous pouvons fournir un sélecteur, et ce sélecteur sera juste en ligne. Et ici, nous devrons également fournir un modèle de TRL. Il s'agit d' un composant de formulaire HTML intégré. Notre composant de base est donc prêt lorsque masse est maintenant enregistrée à l'intérieur du module. Voici donc tout d'abord, nos déclarations, nous aurons ici un composant de formulaire en ligne. Et deuxièmement, et c'est super important, ce sont les experts car ici nous voulons autoriser l'utilisation de ce composant à l'extérieur. C'est ainsi que nous ajoutons composant de formulaire en ligne dans le tableau des experts. Revenons maintenant à notre composant et définissons certaines entrées comme précédemment dans cet ensemble. Tout d'abord, nous voulons donner un titre à notre formulaire en ligne. C'est pourquoi nous avons ici un titre d'entrée et c'est une chaîne, et par défaut c' est une chaîne vide. Mais il est important de faire distinction entre le titre du formulaire. C'est ce que nous voulons changer et uniquement les textes que nous montrons parce que nous avons besoin choses différentes dans différents cas. Par exemple, vous souhaitez exécuter le texte par défaut, mais lorsque vous êtes masqué sur notre téléphone, vous souhaitez afficher un autre texte. Et c'est essentiellement le titre, mais nous avons également besoin ici du texte par défaut, c'est ce que nous affichons lorsque nous ne sommes pas activés notre cabinet. Ici, créons un texte par défaut, est une chaîne. Et ici, je veux faire une belle tournure. Je veux écrire ici, pas le définir. Et c'est essentiellement ce que je vous recommande de faire beaucoup si vous venez de commencer à implémenter quelque chose ou même pour la production, lorsque vous n'êtes pas sûr d'avoir des données, il est préférable de ne pas l' a défini plutôt que de simplement l'indéfinir ou simplement une chaîne vide. Dans ce cas, les gens peuvent directement voir que la valeur n'est pas là et qu'elle n'est pas cassée. Il y a aussi un cas où nous voulons afficher un bouton, c'est là que nous devons créer une entrée supplémentaire, a un bouton et c'est booléen. Et par défaut, il sera faux, ce qui signifie mais ne pas afficher le bouton. Si nous avons un bouton, nous voulons modifier le texte de ce bouton. C'est ici que sera notre entrée avec le texte du bouton et c'est une chaîne. Et par défaut, ils veulent le définir pour envoyer car c'est le type de texte le plus populaire. Après cela, nous voudrons parfois fournir un espace réservé pour notre entrée. C'est ici que vous entrez avec l'espace réservé en entrée, et il s'agit d'une chaîne, et par défaut, il s' agira d'une chaîne vide. Et la dernière chose dont nous avons besoin est un type d'entrée parce que nous avons un cas où nous sommes une tendance de masse et non pas une entrée mais une zone de texte. C'est là que je veux écrire une entrée avec un type d'entrée, et ce n'est qu'une chaîne. Nous pourrions créer une énumération ici, mais je la laisserai comme une chaîne. Par défaut, nous pouvons écrire qu'il ne s' agit que d'une entrée de chaîne. Et au moment où nous voulons écrire la zone de texte, nous fournirons ici une zone de texte de chaîne. Maintenant, nous devons également définir une sortie. Il s'agit des valeurs que nous voulons propager après avoir soumis un formulaire. C'est par ici, définissons un nom sans fin de sortie qu'il gère submit. Et c'est un nouvel émetteur d'événements. Et là, il y a un point important. Nous devons l'entrer à partir du noyau angulaire et non du nœud, puis dire ajouter un nouvel émetteur d'événement. Nous voulons fournir le type de données que nous voulons récupérer. Et ce sera une chaîne parce que la forme nominale, nous n'avons qu'une seule chaîne que nous voulons rendre. Ici aussi, nous avons besoin que la propriété locale à gérer soit éditée par défaut, nous avons besoin que l'édition soit définie sur false, puis nous activons l'édition, nous la définissons sur true. C'est ici que l'édition sera booléenne et par défaut elle sera fausse. Enfin et surtout, nous voulons créer un formulaire réactif. C'est là que je veux fournir un constructeur d'informations privé si b et c'est un groupe de formulaires et nous avons déjà créé un formulaire réactif précédemment pour notre inscription. C'est ici que nous utiliserons exactement la même chose, mais nous allons simplement créer ici un formulaire. Et ici nous pouvons écrire ce groupe de points FB point. Nous devons fournir à l'intérieur de nos champs. Et dans notre cas, nous n'avons qu'un titre. Et ici, nous pouvons dire qu'il s'agit d'une chaîne vide. Et en fait, j'ai fait une erreur. Si b n'est pas un groupe ferme, il s'agit en fait d'un générateur de formulaires. Nous avons donc besoin d'une autre contribution. Écrivons maintenant un peu de marché afin que vous compreniez la logique Bêta. Donc, ici, je veux sauter à l'intérieur du HTML et nous n'avons pas besoin de ce texte. Maintenant, voici tout d'abord, je veux créer une div, et cette div sera notre div par défaut avec un certain balisage. C'est pourquoi nous avons besoin d'une classe que nous pouvons utiliser globalement et au-delà, pour nos besoins. Ici, nous pouvons écrire un conteneur de formulaire en ligne. Encore une fois, nous n'écrivons aucun style pour notre conteneur de formulaires en ligne. Chaque cas d'utilisation doit créer ses propres styles. Ici aussi, je veux créer une autre classe également pour le style si en mode édition, c'est là que je vais créer en classe G. Et là, je fournis un objet, un verre à whisky dans un tableau de bord, un récipient à tableau de bord. Donc le même nom, l'édition de tableau de bord. Ici, nous fournissons la valeur l'édition que nous venons de créer. L'idée principale est que nous disposons de suffisamment de classes pour que les autres développeurs puissent utiliser ce composant et le styliser correctement pour chaque état. Et la dernière chose à faire ici est, bien sûr, un clic. Nous voulons activer notre édition. Créons donc ici une nouvelle fonction, activons l'édition et n'avons rien à fournir ici. Définissons maintenant cette fonction. Donc, à l'intérieur de notre fichier ici en bas, nous pouvons créer activer l'édition et ce que cela l'a activé et fait. Tout d'abord, définissez ce point sur true, mais ce n'est pas tout. Nous avons un cas où nous voulons voir la valeur que nous voulons changer. Par exemple, nous avons un formulaire d'édition comme le nom amusant du tableau. Et pour cela, nous avons fourni dans ce titre d'entrée. Mais comme vous pouvez le voir dans le titre de notre entreprise est vide, ce qui est correct. Mais dans notre cas, lorsque nous passons au montage, nous voulons définir notre titre. C'est pourquoi nous pouvons écrire ici si nous avons un titre. Donc, si nous avons this.title, nous voulons le mettre dans notre formulaire. Et pour cela, nous pouvons écrire cette valeur de pas de point sous forme de point. Et à l'intérieur, nous avons un objet avec un titre, ce titre. Donc, ce que fait cette ligne, si nous l'activons dans édition et que nous lui fournissons un titre à l'intérieur, nous mettrons à jour notre valeur de la forme avec la valeur de hauteur de la fonction. Revenons maintenant à notre code HTML. Donc à l'intérieur d'une div avec Festival one pour créer une div que nous montrerons quand nous ne serons pas en phase de montage. Et ce n'est qu'un texte avec certaine classe que nous pouvons styliser. C'est ici, classe de div. Ici, nous allons avoir un texte de formulaire en ligne. Et ici, nous voulons n'en montrer qu'un seul. Nous ne sommes pas dans l' éditeur et disons que c'est le cas, le NADH est en train d'éditer. Ensuite, nous montrons ce div et à l'intérieur d'un pour afficher notre texte par défaut que nous obtenons dans l'entrée. Ensuite, nous créons notre formulaire, comme nous l'avons fait lors de l'enregistrement interne. C'est donc une forme réactive et notre groupe de formulaires bien défini. Nous pouvons donc fournir ici notre groupe de formulaires. Ceci est notre formulaire et nous aurons également ici NG Submit. Et nous devons créer la fonction onsubmit. Mais finissons-en avec ce formulaire ici. Tout d'abord, nous voulons rendre ce formulaire d'une seule mesure lors de la phase d'édition. C'est pourquoi dans GE est en train d'éditer. Et nous voulons également fournir une classe pour style et nous la nommons simplement formulaire en ligne. Revenons maintenant à l'intérieur de ce fichier et créons ici notre fonction onsubmit. Et voici la partie la plus délicate. Nous pourrions ouvrir un formulaire, ne pas fournir de valeur, puis simplement appuyer sur Entrée. Et ce n'est pas ce que nous voulons émettre. Cela n'a aucun sens de rencontrer une chaîne vide. Nous voulons donc le vérifier ici. Si nous avons cette forme de point, cette valeur de point, ce titre , uniquement, alors nous voulons l'émettre. Et pour une viande, nous avons ce point handle submit a mid, et à l'intérieur nous fournissons ce titre de point de valeur ferme, qui signifie en fait que si nous soumettons ce formulaire et que nous avons une entrée vide, nous voulons immédiatement ce que nous voulons faire après avoir fermé nos oreilles en état d'édition, c'est pourquoi l' édition est égale à faux. Et nous voulons également remettre notre entreprise à l'état initial. C'est pourquoi cette réinitialisation de point en forme de point et cette fonctionnalité que nous obtenons de l'Angular prêt à l'emploi. Revenons maintenant à notre code HTML. Nous avons ici un formulaire. Nous devons maintenant définir une entrée. Nous allons donc créer une entrée avec un texte de type. Et nous arrivons ici dans le nom du contrôle de formulaire. Et quand dans cette forme réactive de fleur, nous avons ici notre titre de nom voudra également créer ici une classe de style. Voici donc l'entrée du formulaire d'entrée de classe. Nous voulons également fournir ici notre espace réservé et nous l'obtenons à partir de l'entrée. Il s'agit donc d'un espace réservé en entrée et nous voulons rendre cette entrée. Un seul qui a fourni le bon type à l'intérieur. Voici NG IV avec le type d'entrée, où notre type d'entrée est égal à l'entrée. Et maintenant, nous voulons faire exactement la même largeur textarea. Nous avons donc ici à l'extérieur et nous voulons fermer directement notre zone de texte. Et maintenant, à l'intérieur, nous voulons vérifier ce NG IV. Donc ici notre type d'entrée est égal à textarea, puis nous allons Randy. Mais nous devons également fournir ici un nom de contrôle de formulaire, et ce sera également un titre. Et nous devons également fournir ici un cours. Et dans ce cas, la classe sera la même entrée de formulaire d'entrée et après la façon dont elle s'étend sur le masque, créez un bouton pour soumettre. C'est là qu'ici, dans le bouton et à l'intérieur, nous aurons notre texte, le texte du bouton que nous obtenons à partir de l'entrée. Et nous voulons afficher ce bouton uniquement si nous avons une entrée correcte. Donc, si nous avons une entrée a un bouton, nous allons le rendre. Ensuite, nous voulons taper submit, et ici nous voulons le désactiver s' il est invalide, c'est là qu'il est désactivé et nous pouvons utiliser le formulaire point invalide. Et après cela, nous voudrons également ajouter une classe pour le styliser. Et voici le bouton de formulaire en ligne. Et en fait, avec ceux-ci formulaire d'entrée est complètement prêt. Donc, ce que nous faisons ici, nous avons une div, nous avons ici activer l'édition. Nous avons ici différentes classes pour chaque élément qui ont été affichées dans notre texte par défaut et voici notre formulaire avec entrée ou zone de texte et bouton si nous en avons besoin. Dans la vidéo suivante, nous allons essayer d'utiliser notre entreprise intérieure sur le cas d'utilisation de la création du tableau. 23. Implémenter la création d'un tableau: Dans la vidéo précédente, nous avons préparé avec succès notre formulaire intérieur, mais nous ne savons pas comment nous allons l'utiliser avec juste créé avec toutes les valeurs possibles à l'intérieur. Dans cette vidéo, nous allons vouloir l'utiliser, mais nous n'avons rien à l'intérieur de notre page de tableaux. C'est la façon de mettre à l'intérieur de notre formulaire intérieur. Nous devons également générer notre page de tableaux. Et ici, nous avons principalement du balisage en ligne parce que nous avons déjà accès à nos tableaux, parce que nous avons déjà créé la méthode get board et que nous y souscrivons pour obtenir nos tableaux. Commençons donc par notre balisage nous pouvons supprimer le monde du sport. Et tout d'abord, en haut, je veux écrire top parce qu' en fait dans cette vidéo, nous n'allons pas implémenter notre barre du haut, mais nous ne devons pas oublier que nous devons l'implémenter plus tard. Et c'est ici que nous pouvons commencer notre balisage. Donc tout d'abord, nous avons ici des tableaux, un conteneur de pages. Maintenant fermons cette div et à l'intérieur, nous aurons une autre div avec la barre latérale gauche de la classe home. Ici, nous fermons notre division. Et en fait, nous sommes en train de créer notre barre latérale sur la gauche et à l'intérieur, nous aurons des liens vers nos différentes pages. C'est pourquoi nous avons ici une liaison routeur et nous voulons fournir ici un lien sur les tableaux slash. Après cela, nous devrons également ajouter une classe ici, option de menu latéral des tableaux. Ici aussi, nous voulons halite le lien quand il est inactif route et un Angular pour cela, nous avons un attribut spécial qui est appelé lien de routeur actif. En fait, il s'agit d'une directive. Et puis dit, nous pouvons fournir la classe que vous voulez obtenir. Dans notre cas, nous voulons sélectionner une option de menu latéral du tableau de classe. Fermons notre A ici et à l'intérieur. Essayons les textos. C'est aussi des planches. Définissons ici un autre lien qui sera à la maison. C'est pourquoi je vais copier-coller complètement ce lien de routeur ici sera coupé. Liaison de routeur de même classe active. Ici, nous pouvons écrire non pas des tableaux mais à la maison, mais aussi ici nous voulons écrire options actives de lien de routeur, car en fait, ici, nous avons routé une barre oblique de lien et nous avons coupé dans chaque lien de routeur. C'est pourquoi cette liaison de routeur active mettra toujours en évidence cet élément que nous voulons éviter cela. C'est pourquoi nous devons fournir des options actives de liaison de routeur. Et ici, à l'intérieur, nous fournissons un objet avec un champ exact vrai. Dans ce cas, nous allons mettre en évidence cette boucle lean on et nous avons un maillage complet sur slash. Et en fait, de notre point de vue, cela n'a pas beaucoup de sens de créer ces deux liens différents. Parce que lorsque nous sommes bloqués mais que nous ne pouvons pas accéder à notre page d'accueil, cela signifie que nous serons directement redirigés vers notre page de tableaux. Mais c'est le balisage que nous obtenons du projet. Nous implémentons donc simplement ce que nous avons après notre barre latérale. Nous devons créer une pièce principale avec notre conteneur pour les planches, c'est là que se trouvera la classe div Boards section container. Maintenant fermons ici div et à l'intérieur nous voulons créer un autre div. Ici, nous aurons div class my boards. Fermons cette div et à l'intérieur , nous voulons créer une classe supplémentaire avec un en-tête. C'est ici, la classe div, l'en-tête de la section My Boards et à l'intérieur, en-tête de la section My Boards nous devons créer une classe de plus. Et ce sera l'en-tête de la page des planches de verre, le nom, et à l'intérieur nous allons l'essayer. Mes planches. Après notre en-tête, nous voulons afficher notre liste. C'est par ici. Nous aurons une liste de tuiles de tableau div car nous aurons ici chaque tableau sous forme de tuile. Ici, nous pouvons fermer notre div et à l'intérieur de cette div, nous voulons afficher notre formulaire en ligne. Je vais terminer dans une seconde parce que pour instant je veux juste terminer notre balisage. Et après nous avons intégré le groupe de formulaire un pour rendre toutes nos tuiles, qui sont des planches. Et pour cela, nous allons écrire notre graphique ici, donc un lien routeur. Et ici, nous voulons fournir un lien vers chaque tableau. C'est ici que nous avons un paramètre dynamique. Ici, nous pouvons fournir un tableau avec des tableaux slash. Et le deuxième paramètre que nous avons mis ici, ID du point du tableau virgule. Dans ce cas, nous générerons un lien de routeur correct pour chaque carte. Mais pour avoir accès au tableau ici, nous devons écrire et G pour boucle. C'est ici dans G4 et nous parcourons nos planches en boucle . Alors laissez le conseil d'administration, et ici nous allons également manquer notre classe. Donc, ici, nous devrions avoir une tuile de tableau et fermons ceci a. Maintenant, dans notre lien a, nous voulons fournir une div avec nom des détails de la tuile du tableau de classe. Fermons cette div et affichons simplement le nom. Ce sera la tuile ennuyée et le balisage sera entièrement prêt. Allons voir si ça fonctionne. J'ai en fait ici une flèche parce qu'ils n'ont pas utilisé correctement la propriété. Ici, nous devrions mettre des crochets doubles et non des crochets simples. Vérifions-le encore une fois. Nous avons un récit selon lequel nous n'avons pas de tableaux de propriétés, et cela est tout à fait valide dans notre script de type. Nous recevons nos cartes, mais nous avons simplement ici le journal de console avec Dan, sauvegardez-les. Et en fait, nous devons le faire de cette façon ici en haut, nous pouvons créer des propriétés de tableaux. Ce sera notre interface de tableau que nous avons déjà. Il s'agit d'un tableau et par défaut nous aurons une liste vide de nos tableaux. Maintenant, au lieu de notre journal de console, nous pouvons simplement attribuer à ce tableau, les tableaux que nous recevons de notre service. Vérifions-le encore une fois. Comme vous pouvez le voir maintenant, nous n'avons pas d'erreur, mais nous avons un tableau d'erreur. La vignette n'existe pas. C'est pourquoi j'aime tant TypeScript. C'était simplement une faute de frappe, mais nous ne la déboguons pas en cours d'exécution. Nous avons simplement une validation de TypeScript. Voici donc le titre, et maintenant nous n'avons plus d' erreur. Tu ne devrais pas être valide. Allons voir ça. Je recharge la page et en fait elle semble d'une manière ou d'une autre. Nous avons ici notre application à la barre. Nous ne l'avons pas encore implémenté. Ici, sur la gauche, nous avons un lien Boards et un lien d'accueil. Les liens sont donc là. Et voici notre contenu principal avec mes planches dans les reliefs que nous allons créer un deuxième et notre premier tableau avec le bon lien. Et comme vous pouvez le voir ici en bas, il s'agit de slash port, slash id, ce qui signifie que notre URL fonctionne également. Mais j'ai une petite faute de frappe dans le balisage. Comme vous pouvez le voir, notre barre latérale n'a pas l'air très bien parce qu'ici, à l'intérieur d'une barre latérale gauche de la classe div, j'ai manqué le conteneur de mots, donc il devrait être côté gauche, mais conteneur, comme vous pouvez le voir maintenant, notre barre latérale est beaucoup plus grande et elle est plus belle. Comme vous pouvez le voir, nous avons réussi à récupérer nos cartes avec ce code dans notre composant avec notre service. Nous enregistrons ces informations dans la propriété de nos tableaux et notre liste de tableaux a été affichée. Et en fait, dans notre réseau, nous pouvons voir que nous avons une demande sur l'hôte local pour 1001 cartes sans chemin slushy. Et nous obtenons notre pension unique que nous avons. Et maintenant, il est temps de parler de la ferme intérieure. Alors, comment nous allons l'utiliser ici dans notre code HTML. Et pour cela, je veux ouvrir notre formulaire intérieur ici droite afin que nous puissions comprendre ce que nous avons à l'intérieur de notre composant. Nous avons donc ici de nombreuses contributions. Donc, ce que nous devrions fournir pour cet usage spécifique, nous sommes en fait en ce sens que nous avons notre formulaire de tiret en ligne. Fermons-le ici. Et maintenant, tout d'abord, à l'intérieur, je veux donner un cours. Et l'idée principale est que c'est la classe parente que nous pouvons styliser parce que nous voulons appliquer styles uniques à notre composant. Et juste pour vous rappeler que nous avons des cours comme inland from container, inland from text and song. L'idée est que cette classe et cette classe remplaceront n'importe quel CSS. Et c'est exactement l'idée. C'est là que nous donnons de la classe, par exemple, créer un formulaire de tableau. Maintenant, tous ces clusters à l'intérieur seront plus simples imbriqués dans notre CSS. La deuxième chose dont nous avons besoin ici est le texte par défaut. Et ce sont les textes que nous verrons sur la carte à l'avance. Et voici nos textes par défaut, créez un nouveau tableau. Et la dernière chose que nous devons fournir ici est la gestion de la soumission. C'est ce que nous obtenons de notre formulaire. Ici. Nous pouvons écrire, par exemple, créer un tableau et nous obtenons ici un événement. Alors qu'est-ce que cet événement, juste pour vous le rappeler ici, nous avons un handle submit et c'est une chaîne. C'est notre titre et nous n'avons pas besoin ici d'un titre de bouton, texte de bouton, d'un espace réservé, d'un type de saisie, simplement parce que c'est la principale entreprise intérieure par défaut. Maintenant, nous allons vérifier si cela fonctionne là où sauter ici à l'intérieur de la console et mourir directement ont une erreur. Nous n'avons pas de méthode create board, donc créons-la maintenant ici. Il s'agit d'une méthode où nous obtenons une chaîne. Nous pouvons donc dire que nous obtenons ici un titre, c'est une chaîne et que nous renverrons void, ce qui ne veut rien dire. Et il liste ici je veux consulter notre titre, qui a été créé à l'intérieur de notre formulaire intérieur. Maintenant, nous arrivons ici et l'argument étroit de type event n'est pas assignable pour autoriser une chaîne de caractères. Et en fait, cela peut être très difficile pour vous de déboguer parce que vous pourriez penser, accord, je fournis ici quelque chose de différent. Mais le problème n'est pas là. Le problème est qu' à l'intérieur de ce module, nous n'avons pas injecté dans notre module de formulaire intérieur. C'est ici qu' à l'intérieur du module boards, nous devons importer notre module partagé et il sera en ligne pour module. Et l'idée principale est que nous sommes inversés ici sur un module, mais à l'intérieur nous avons un composant expert id. C'est pourquoi nous pouvons maintenant utiliser ce composant exploité sous forme intérieure ici à l'intérieur de notre composant. Allons voir ça. Comme vous pouvez le constater, nous n' avons plus cette erreur. Nous avons quelque chose de différent et nous ne pouvons pas nous lier à groupe de formulaire car ce n'est pas une propriété connue de la forme, c'est pourquoi nous devons faire ce que nous devons faire. Nous devons intégrer des formulaires réactifs dans notre module de formulaire en ligne. C'est pourquoi je veux sauter dans le module de formulaire en ligne. Et ici, dans les entrées, je veux écrire un module de formulaires réactifs. Maintenant, nous ne devrions pas avoir une telle erreur. Allons voir ça. Comme vous pouvez le constater, tout est vert et nous sommes prêts à partir. Vérifions-les dans un navigateur où recharger la page et voilà, c'est notre élément. Et il peut être très difficile pour vous de comprendre ce qui se passe ici parce que nous n'avons pas écrit CSS et que le CSS a déjà été préparé rapidement. Examinons donc cet élément. Qu'est-ce que nous avons ici ? Comme vous pouvez le voir, il s'agit d'un formulaire intérieur et c' est notre formulaire de création de tableau de classe. Allons voir ça. Ce que nous avons à l'intérieur de notre projet et de nos styles. Nous n'avons pas parlé des styles Source et ici de nombreux styles et nous sommes intéressés maintenant par la création d'un formulaire de tableau. Ouvrons-le, et voici notre CSS. C'est exactement ce que nous voyons ici. Il s'agit de créer un formulaire de tableau. Voici notre parent. Plus important encore, à l'intérieur de la forme intérieure, nous avons des styles différents. Par exemple, voici le conteneur de formulaire en ligne de la classe div et comment nous le stylons, nous utilisons ici notre classe parente que nous avons juste ici. Il s'agit de créer un formulaire de tableau puis un conteneur de formulaire en ligne. Et c'est ce que vous pouvez voir ici. Préfixez toujours ici, toutes les classes intérieures avec create board form, qui est notre formulaire parent, juste pour cet usage spécifique. C'est ainsi que nous rendons notre arrière-pays super flexible. Il contient 0 CSS à l'intérieur et nous définissons simplement tous nos CSS extérieurs pour chaque cas. C'est pourquoi nous avons défini ici, accord, nous avons l'intérieur des terres à partir du conteneur, vous devriez avoir display flex, aligner les éléments et justifier le contenu. Ensuite, si nous avons besoin de styliser en ligne à partir de textes, par exemple, dans ce cas, nous n'avons pas stylisé, mais nous pouvons également créer un formulaire de tableau, un formulaire en ligne, du texte et un style pour cet élément. C'est ainsi que nous avons créé notre superbe formulaire intérieur, qui est super partageable pour chaque cas. Maintenant, vérifions-nous si cela fonctionne vraiment. Nous avons donc ici notre texte par défaut créer un nouveau tableau. Nous pouvons cliquer dessus, et maintenant nous avons notre contribution et nous pouvons écrire quelque chose ici. Et ils voient déjà ici une erreur. Comme vous pouvez le voir ici, nous avons une entrée avec une entrée de formulaire de saisie de classe, mais c'est ce que nous stylons et où styler la saisie de formulaire en ligne, ce qui signifie en fait que nous avons fait une faute de frappe. Revenons à l'intérieur notre composant, le composant de formulaire intérieur. Et ici, nous avons notre entrée et ici nous devons changer notre entrée de formulaire de saisie en entrée de formulaire en entrée de formulaire en ligne. Et comme vous pouvez le voir, nous rencontrons exactement le même problème ici dans textarea. Il doit s'agir d'une entrée de formulaire intégrée. Vérifions-le encore une fois. Je suis en train de recharger la page masquée sur le bouton, et maintenant nous avons une entrée correctement stylisée. Maintenant, je peux payer quelque chose comme foo, puis appuyer sur Entrée et notre formulaire est fermé avec succès. Nous voyons de nouveau créer de nouveaux tableaux. Et à l'intérieur de la console, nous voyons que notre titre est exactement notre composant de sortie à l'intérieur de la carte. Mais ce qui nous manque complètement ici, c'est créer un tableau sur le client et sur le serveur. Et maintenant je veux faire l'inverse. Je veux commencer par le front-end et terminer avec le Pi. Ensuite, vous pouvez voir comment nous procédons dans l'ordre inverse. Alors Festival ici, nous avons notre composant Create board inside. L'idée est donc que nous utiliserons ici notre service de conseil d'administration. C'est mon service interne à notre conseil d'administration, nous devons créer une nouvelle méthode. Par exemple, appelons-le point de création. Donc, ce que nous obtenons ici, nous arrivons simplement ici au titre et c'est une chaîne et arrière, nous obtiendrons un observable avec Board créé, ce qui signifie que l'interface sera ennuyée. Et maintenant, ce que nous aurons à l'intérieur, tout d'abord, nous pouvons copier-coller l'URL car ce sera exactement la même chose. Il s'agit de tableaux slash et nous faisons une demande de publication. C'est là que nous pouvons dire que nous renvoyons ce HTTP et que nous ne l'obtenons pas, mais que nous publions. Et à l'intérieur. Tout d'abord, nous devons fournir une URL. Et deuxièmement, nous allons fournir ici un objet avec un titre de champ. Et en fait, c'est notre corps. Et pour notre conseil d'administration, il suffit de fournir le titre. Parce que sur le backend avec deux choses. Il s'agit du titre et de l'ID utilisateur. Et l'ID utilisateur, notre backend doit comprendre par lui-même, car nous fournissons un jeton avec notre demande et nous sommes authentifiés. Le principal problème est ici que nous sommes en train de contourner la saisie. Nous devons fournir un aperçu ou un post. Nous récupérons l'interface de notre tableau. Et dans ce cas, nous avons créé avec succès la méthode Create Board. Et comme vous pouvez voir toutes nos méthodes d'API, je vais regarder exactement de la même manière. s'agit simplement d'une URL, puis un message HTTP dont nous avons besoin. Utilisons maintenant la méthode de service dans notre composant. Alors revenons en arrière. Et voici notre tableau Create. Et ici, nous voulons l'appeler ce mot point de service. Et ici Create Point. Et à l'intérieur, nous fournissons exactement le titre que nous avons obtenu ici à partir de notre formulaire intérieur. Et après cela, nous écrivons dot subscribe et ici nous récupérons le tableau créé. Que voulons-nous faire de ce point ? Nous voulons simplement changer notre, le taux de ces conseils. C'est ainsi que je vais écrire ce tableau à points égal. Et ici, nous étalons nos tableaux à points , puis ils veulent mettre notre tableau créé. Donc, essentiellement, nous créons ici dans votre tableau, où nous mettons tous nos champs de l'ancien tableau, puis nous créons un tableau. Donc, notre front et cela entièrement préparé. Maintenant, nous devons passer au backend et tout y créer. Sur le backend. Ce n'est pas si difficile car nous avons tous créé un modèle pour le tableau et nous pouvons l'utiliser. Nous avons juste besoin de sauter et de dire sororité S. Et voici la création de votre demande API. Ici, nous pouvons copier, coller , obtenir complètement, et ce sera affiché sur des tableaux slash. Ici, nous devons utiliser middleware du système d' exploitation car il s' agit d'une requête authentifiée. Et ici, nous utilisons le point contrôleur de la carte, par exemple, create board. Et maintenant, nous devons créer cette méthode dans notre contrôleur. Revenons donc à l'intérieur du contrôleur de notre carte. Et ici, nous voulons créer exactement la même chose, mais ce sera une demande de publication pour créer un enregistrement. C'est pourquoi je vais le copier-coller complètement et le renommer. Nous avons donc ici notre tableau Créer et nous obtenons ici notre réponse à la demande. Et ensuite, et nous avons à l'intérieur essayer de l'attraper ici. Tout d'abord, à l'intérieur où le poulet est utilisé sur demande , c' est tout à fait bien. Ensuite, nous voulons créer un nouveau tableau. C'est ici que je vais supprimer cette ligne. Donc, ici, je vais écrire que nous créons notre nouveau tableau et pour cela, nous utilisons votre modèle ennuyé , puis nous avons dit Nous devons fournir un objet valide. Ici. Tout d'abord, nous fournissons un titre du tableau de demande, le titre point. Et le second est l'utilisateur AD et utilise réellement par rapport à la prise de masse de notre demande, de notre middleware. Nous aurons donc ici la demande point USA, point underscore ID. Et en fait, nous pouvons utiliser à la fois identifiant de soulignement ou un D, peu importe. Nous les avons tous les deux disponibles. Cette ligne n'enregistrera donc rien dans la base de données. Nous créons simplement ici une instance de notre modèle. Ensuite, nous voulons enregistrer cet enregistrement dans la base de données. C'est pourquoi ici nous pouvons essayer le tableau sauvegardé et nous utilisons ici un poids ici, et vous avez acheté dot save. Dans ce cas, nous sauvegardons cet enregistrement et nous récupérons notre tableau enregistré. Comme vous pouvez le voir, il s' agit d'un document Word. Après cela, nous pouvons répondre avec notre tableau enregistré. Encore une fois, nous avons une demande de publication, nous avons une action Créer un tableau ici. Nous sommes en train de vérifier que nous sommes enfermés. Ensuite, nous utiliserons notre modèle de tableau pour créer un nouveau tableau avec le titre que nous avons fourni et utiliser une 3D que nous n'avons pas fournie. Mais bon sang, de la part de notre utilisateur bloqué et nous avons enregistré ce nouveau point dans la base de données. Nous avons récupéré notre tableau enregistré et nous répondons avec cette API. Allons voir si ça fonctionne. Je n'ai aucune erreur ici dans le back-end. Alors allons dans le client ici, je veux cliquer sur créer un nouveau tableau et je tape quelque chose et j'appuie sur Entrée. Et comme vous pouvez le voir directement ici, nous avons notre nouveau tableau. Allons voir notre réseau. Et en fait, au sein du réseau, nous avons la demande de notre conseil d'administration. Et ceci est un article sur les points de barre oblique. Et ce qui est le plus important ici, c'est notre réponse. Il s'agit d'un nom d'utilisateur de titre. C'est exactement ce qui a été enregistré dans la base de données, ce qui signifie que si je recharge la page ici, nous obtenons deux tableaux maintenant parce que toutes ces informations sont enregistrées dans la base de données. Et ici, au sein de notre réseau, nous recevons nos tableaux. Et comme vous pouvez le voir dans l'aperçu, nous avons déjà deux tableaux et non un, ce qui signifie que nous avons complètement terminé notre page de tableaux. Tout d'abord, soyez rendu ici la barre latérale, mais nous n'en avons rien fait. Nous sommes également utilisés ici notre formulaire intérieur, qui est super partageable. Et nous avons créé notre service, qui s'adresse à notre API, pour créer un nouveau tableau à partir de cette page. 24. Ajout de la barre supérieure et de la déconnexion: Dans la vidéo précédente, nous avons terminé notre page de tableaux, mais nous avons oublié d' implémenter notre barre supérieure. Et en fait, il s'agit du TBA sur chaque page pour un utilisateur connecté, ce qui signifie en fait non seulement ma page de tableaux, mais également une page de tableau unique, c'est pourquoi nous devons le créer en tant que module partageable. Je veux donc passer à notre application source client partagée. Et ici, nous avons nos modules et notre entreprise intérieure. Et en fait, ici, je veux copier-coller complètement ce formulaire en ligne et le renommer en notre langue. Mais maintenant, à l'intérieur de la masse, tout change. Tout d'abord, commençons par notre module. Donc, ici, nous avons un module de barre supérieure et à l'intérieur avec aucun module de formulaire réactif, nous aurons simplement un balisage et le bouton de déconnexion. Ici, nous pouvons supprimer cette entrée et nous devons également modifier notre composant. Mais avant tout, changeons le nom de la classe. Ce devrait être notre module de barre supérieure. Passons maintenant à l'intérieur de nos composants. Et ici, nous n' avons pas de société intérieure, nous avons notre barre supérieure et nous avons deux fichiers à l'intérieur. Tout d'abord, il s'agira du composant de point de barre supérieur HTML. Et voici notre composant de point de barre supérieur. Changeons maintenant le balisage. Je veux tout supprimer dans la barre supérieure droite plus simple. Passons maintenant à notre fichier ts et supprimons tout de notre composant. Maintenant, je veux renommer notre sélecteur dans la barre du haut juste pour indiquer clairement à quoi il appartient. En fait, nous n'avons qu'un seul Toba dans notre application. Nous pourrions simplement écrire ici Tampa, mais comme il est partageable pour nous, je vais écrire ici en haut, mais juste à cet endroit, nous avons notre modèle d'URL. C'est la barre supérieure et nom de notre composant est composant de la couchette supérieure. Maintenant, je peux supprimer les symboles et vivre ici notre entrée de composant. Revenons maintenant à l'intérieur d'un module. Nous n'avons pas ce composant de formulaire intégré, mais nous voulons déclarer ici notre composant de barre supérieure et notre composant TBA expert parce que nous voulons l'utiliser en dehors. Notre module est donc entièrement prêt. Oui, nous n'avons pas implémenté de logique à l'intérieur, mais nous ne pouvons toujours pas vraiment la lier. Et nous voulons sauter et dire module de cartes et l'intérieur de nos entrées, nous pouvons ajouter ici le module de barre supérieure. Maintenant, ici à l'intérieur de nos tableaux de composants, tableaux, HTML en haut. Au lieu de ce texte, nous pouvons simplement écrire la barre supérieure AP et nous pouvons la fermer ici. Allons voir si ça fonctionne. Nous n'avons aucune erreur ici. Je vais recharger la page. Et ici, en haut, vous pouvez voir la barre supérieure des textes, ce qui signifie que nous avons réussi à lier notre module et notre composant à notre page de tableaux. Essayons maintenant de commercialiser notre barre d'outils. C'est ici que je vais revenir à l'intérieur du code HTML de notre composant Tombow. Ici, écrirons-le. Donc tout d'abord, nous avons ici div avec des tableaux de navigation de classe. Fermons cette div à l'intérieur. Nous aurons encore un div, div, navbar, côté gauche. Fermons cette div et à l'intérieur tout d'abord, nous aurons un lien vers notre maison. C'est pourquoi une liaison routeur. Voici notre barre oblique, et voici l'icône de la barre de navigation de classe. Fermons notre A et à l'intérieur nous devons fournir une nouvelle image. Donc, voici la source imagée slash assets slash home point SVG. Après cela, nous aurons un autre lien de routeur. C'est pourquoi je vais le copier-coller complètement et il va sur des tableaux slash. Et ce sera Naropa eigenspace, icône des tableaux de navigation. Et à l'intérieur, nous avons un autre fichier SVG. Ce sont des tableaux slash assets, comme vous pouvez le voir maintenant, lorsque je recharge la page, nous avons deux belles icônes, nous avons deux belles icônes, une sur le lien de la page d'accueil et l'autre sur nos tableaux. Mais comme vous pouvez le voir ici, les rails ne sont pas valides. Nous ne les avons pas du tout parce qu' en fait nous devons sauter à l'intérieur de notre module de barre supérieure. Et ici, importez le module d'itinéraire. Sauvegardons cela et rechargeons la page. Et comme vous pouvez le voir maintenant, cela lie vraiment, tout d'abord, page d'accueil et ici les tableaux slash. Poursuivons maintenant notre balisage. Après notre côté gauche, nous avons notre côté droit. Ici. Nous voulons fournir notre image avec des acides slash source, logo Trello, un point blanc SVG. Et voici notre barre de navigation de classe. Plus longtemps après une image, nous avons une div avec la classe navbar à droite. Appelons cela t. Et à l'intérieur, nous voulons créer un lien suivre la robe, c'est y. Voici la classe div, l'icône de la barre de navigation, la barre de navigation , l'icône de déconnexion. Et ici, à l'intérieur, je veux simplement écrire le texte de la goutte. Allons voir si ça fonctionne. Ici, nous avons nos liens sur la gauche, nous avons l'image de la bande-annonce au centre et nous avons un bouton comme lien de déconnexion à droite. Mais nous n'avons attaché aucune logique ici. Notre barre supérieure est donc entièrement prête. Nous avons tout implémenté, mais nous devons maintenant implémenter notre déconnexion. L'implémentation de la déconnexion est très simple. Nous avons juste besoin de supprimer notre token du stockage local, de nettoyer CurrentUser dans notre mémoire et de le rediriger ou de l' utiliser vers la page d'accueil. C'est ce que nous voulons faire ici. Nous voulons joindre un événement click. Alors ici cliquons droit. Et ce que nous faisons, c'est notre méthode de déconnexion. Et le numéro doit créer cette déconnexion dans notre composant. Que voulons-nous faire à l'intérieur ? En fait, je souhaite stocker logique de nos logos dans notre service car cela est lié à l'authentification et ils ne veulent pas écrire cette logique directement ici. C'est y. Ce que nous devons faire, nous devons injecter notre service horaire, qui est notre fournisseur de services à l'intérieur de ce composant. Et maintenant, nous pouvons utiliser notre déconnexion point point. Et en fait, nous n' avons pas une telle méthode. Nous devons le créer, mais ce n'est pas tout, mais aussi après celui-ci pour rediriger l'utilisateur vers la page d'accueil car nous ne sommes plus connectés. Et pour cela, nous devons injecter ici routeur. Donc je peux adhérer au routeur et ce sera notre sécheresse. Après le côlon sont notre service. Nous pouvons écrire ici ce routeur point de navigation par URL, et nous voulons simplement rediriger l'utilisateur vers notre page d'accueil. Nous sommes donc presque prêts. Nous devons simplement implémenter notre méthode de déconnexion ici dans notre classe de service. Donc ici en bas, je vais écrire log out with don't need here anything. Nous voulons simplement supprimer notre token. Donc ici, nous pouvons écrire l'élément de suppression de point de stockage local et ont été fournis à l'intérieur de la cible. Cela suffit, mais nous n'avons pas nettoyé notre mémoire. Et en fait, cet utilisateur actuel a toujours un utilisateur actuel valide. Ce n'est pas bon. Nous devons le régler maintenant. C'est pourquoi ce point utilisateur actuel point. Ensuite, nous sommes maintenant à l'intérieur et avec ce revêtement unique, tous nos composants seront avertis que nous ne sommes plus bloqués. Allons voir si ça fonctionne. Je n'ai aucune erreur ici. Nous n'avons pas besoin d'implémenter quoi que ce soit sur le backend. Maintenant, cliquons simplement ici pour vous déconnecter. Et comme vous pouvez le voir, boum, je suis directement sur la page d'accueil et nous pouvons vérifier que nous ne sommes pas bloqués. En fait, il a été nommé sauter ici dans le stockage local de l'application. Je n'ai pas mon jeton. C'est pourquoi, lorsque je recharge la page, je reçois 401 Unauthorized, ce qui signifie que nous avons implémenté avec succès notre barre supérieure et notre fonctionnalité de déconnexion. 25. Créer un module de carte: Dans la vidéo précédente, nous avons terminé la mise en œuvre de notre page de tableaux. Dans cette vidéo, nous commençons à implémenter notre page de tableau unique. Nous nous concentrons ici uniquement sur la création de notre module et de notre composant de base. C'est pourquoi je veux sauter dans le jeu de sources. Et ici je veux créer un nouveau dossier avec un nouveau module. Et en fait, vous pourriez dire, OK, mais pourquoi nous n'emballons pas notre carte de composants dans le module de cartes et oui, vous pouvez le faire, mais je veux le scinder parce que la logique à l'intérieur de ces deux modules est assez différent. Nous devons encore payer beaucoup à l'intérieur de notre module de carte. C'est y. Créons ici un nouveau dossier qui s'appelle board. Et à l'intérieur, nous voulons créer notre tableau point module.js. Aussi, créons directement ici notre dossier de composants et notre dossier mu à l'intérieur duquel s'appelle board. Et ici, nous avons besoin de deux nouveaux fichiers. Tout d'abord, board dot component point ts, et deuxièmement board dot component point HTML. Maintenant, faisons des tendances à l'intérieur du HTML, mot bouilli, et créons notre composant. Ici, nous pouvons exporter notre nouvelle classe, appelée composant de carte. Et sur le dessus remasterisé un décorateur de composants. À l'intérieur, nous voulons fournir notre sélecteur et nous pouvons simplement dire ici que nous avons sélectionné board et nous devons également fournir ici une URL de modèle qui est coulé composant HTML, notre composant de tableau est entièrement préparé. Nous devons savoir créer notre module. Nous voulons donc exporter une nouvelle classe, appelée molécule de carte. Et nous voulons ajouter au sommet du décorateur et du module GI et fournir un aperçu, au moins la liste des entrées. Et ici, nous aurons tout d'abord module commun également maintenant nous pouvons créer nos déclarations et fournir des informations, les composants de notre carte que nous venons de créer. Nous voulons donc vous inscrire ici dans votre parcours. C'est ici qu' en haut, nous pouvons créer une nouvelle propriété appelée routes. Et ce sont nos cris, qui sont un tableau. Et à l'intérieur, nous devons fournir un nouvel objet avec un chemin de champ. Et ici, nous aurons la barre oblique des tableaux d'URL, et ici nous aurons l'ID du tableau deux-points. Que signifie cet identifiant de forum ? Cela signifie que nous avons un paramètre dynamique, ce qui signifie que nous avons ici un ID de tableau et qu'il est différent pour chaque tableau. Après cela, nous devons fournir ici un composant, et dans notre cas, il s' agira de notre composant de carte. Ici aussi, je veux utiliser le mot service. C'est pourquoi ici nous pouvons écrire, activer. Il s'agit d'une baie, et voici notre service requis. Pourquoi faisons-nous ça ? Parce que cette URL est réservée aux utilisateurs connectés. Si nous ne sommes pas connectés, nous ne voulons absolument pas accéder à cette URL. Et maintenant, nous devons enregistrer ces routes dans nos entrées. Ici, nous pouvons mettre un point de module d'itinéraire pour enfant, et ici nous donnons un aperçu de nos itinéraires. Enfin, nous devons enregistrer ce module dans notre module d'application. Donc ici, dans nos entrées, nous pouvons simplement écrire le module du tableau, et c'est notre nouveau module, qui est entré ici en haut. Allons voir si ça fonctionne. Nous pouvons maintenant accéder à notre navigateur, ouvrir nos outils de développement. Ici, nous pouvons cliquer sur notre premier tableau. Et comme vous pouvez le voir, nous n'avons pas d'erreur. Nous voyons ici sur le panneau de mots supérieur puis l'URL, nous voyons les tableaux slash, les barres obliques et les D de ce tableau spécifique. Ce que nous devons faire maintenant, c'est créer un seul tableau pour cette page spécifique. Pourquoi est-ce que c'est ? Parce qu'en fait, nous ne sautons pas toujours de la page des tableaux à notre tableau unique. Et vous pourriez dire, OK, eh bien, sur la page des tableaux, nous avons tous nos tableaux. Mais encore une fois, lorsque nous sommes sur cette seule page et que nous rechargeons la page, nous n'avons aucune information importante, qui signifie que nous devons obtenir cette annonce à partir de notre URL et obtenir cette carte spécifique avec le CD. Vous trouverez également des informations supplémentaires ultérieurement, telles que des colonnes ou des tâches. C'est pourquoi je souhaite ouvrir notre application, services partagés, nos tableaux, nos niveaux de service, et la vente sera définie précédemment ici nous écrivons toutes nos demandes au colorant, qui sont liées à nos tableaux. C'est pourquoi nous pouvons créer ici une nouvelle méthode qui s'appelle get bored. Et puis côté pour obtenir un tableau, nous devons fournir un ID de tableau, qui est une chaîne, et retour nous obtiendrons un observable avec notre interface de tableau. Maintenant, à l'intérieur, nous devons préparer notre URL. Nous allons donc utiliser l'environnement Doherty Pi URL plus, et ici nous voulons concaténer nos tableaux plus AD. C'est pourquoi il est très logique d' utiliser des chaînes ECMO ScriptSIG ici et d'injecter dans cet environnement une URL DPI. Ensuite, nous avons ici barre oblique, tableaux , barre oblique, et voici un AD comme argument. Et en fait ce n'est pas une AD, elle est née et AD. Il s'agit donc de l'URL que nous voulons récupérer depuis le backend. Et maintenant, nous devons renvoyer notre requête à partir de ce point http.get. Et nous fournissons à l'initié notre royaume d'urine que nous voulons récupérer. Mais là encore, nous récupérons des objets observables et nous devons spécifier que nous récupérons notre interface de tableau. Essayons maintenant de récupérer cette URL. C'est pourquoi nous devons revenir à l'intérieur notre module de carte, composants, composant de carte. Et ici, à l'intérieur, je veux créer une nouvelle méthode fetch data, et cette méthode renverra void. Et à l'intérieur, nous voulons utiliser cette méthode que nous venons de créer pour récupérer notre tableau par AD. C'est là que nous devons fournir un constructeur et voici le service de tableaux privés que nous service de tableaux privés que avons mis fin à ce service Boards. Et à l'intérieur de nos données de récupération, nous pouvons écrire ce point de service de tableau de points, s'ennuyer. Nous fournissons un identifiant de tableau d'informations, mais nous n'avons encore qu'un D dans ce composant. Et en fait, nous devons stocker cet identifiant de forum à partir de l'URL, car nous l'utiliserons beaucoup dans ce composant. Mais si nous écrivons ici board ID equals string, alors nous obtiendrons ici un tableau étroit qu'ils creusent n'a pas d'initialiseur et ne l'est pas défini dans le constructeur. Et en fait, nous ne voulons pas arriver ici sans le définir parce que ce ne sera pas confortable de travailler plus tard. Board AD est obligatoire pour notre composant. Et pour obtenir le périmètre à partir de notre URL, nous devons injecter ici route. Voici donc un linceul privé. Ici, nous voulons utiliser la route activée. Maintenant, à l'intérieur, nous voulons essayer de lire cette sécheresse activée. Donc, ici, je veux obtenir l'ID du tableau en tant que paramètre et nous utilisons ici ce linceul de points, points, instantané, point params map get here sera l'ID du tableau. Et c'est ainsi que vous obtenez généralement paramètres à partir de l' URL dans Angular. Mais comme vous pouvez le voir, c'est ce que nous récupérons. Nous sommes en train de nous fatiguer, c'est tout à fait raisonnable car Angular peut être sûr que ce paramètre est toujours là. C'est pourquoi nous pouvons écrire ici, parce que nous voulons vraiment enregistrer juste une chaîne de caractères. Nous pouvons vérifier et lancer une erreur si elle n'est pas là. C'est pourquoi nous pouvons écrire ici. Si nous n'avons pas notre carte AD, alors nous lancerons une flèche. Voici une nouvelle erreur, par exemple, ne peut pas s'ennuyer AD à partir de l'URL. Et après cela, nous écrivons simplement que cet ID de tableau est égal à l'ID du tableau. Et comme vous pouvez le voir dans ce cas où vous vous connectez à l'intérieur de la chaîne, parce que nous avons vérifié ici pour TypeScript que ce n'est pas le cas maintenant. Et si c'est le cas maintenant, alors nous lançons une erreur. C'est en fait le mieux que nous puissions faire pour obtenir une chaîne dans ce composant. Parce qu'il ne sera pas confortable de vérifier chaque endroit où nous obtenons ce paramètre. Et maintenant, à l'intérieur de Good Board, nous pouvons vous donner un aperçu. Ce tableau à points AD. Après cela, nous pouvons écrire point subscribe et nous récupérons notre tableau et nous pouvons l' attribuer et enregistrer quelque part. Mais au moins pour l' instant, je veux juste enregistrer la console de notre tableau Comma board, mais nous n'avons pas du tout appelé «  fetch data » quelque part. C'est pourquoi nous devons y écrire des outils. Et maintenant, après notre constructeur, nous pouvons en juin dedans et l'intérieur nous pouvons appeler cela fetch data. Et en fait, chaque fois que je dois récupérer des données dans chaque composant, je préfère créer une méthode supplémentaire pour cela, appelée fetch data. Et ne vous contentez pas de jeter cette logique à l'intérieur et de vous y joindre juste pour la rendre plus propre. Comme vous pouvez le voir lorsque nous passons au navigateur, nous faisons maintenant une demande sur notre slash api slash, forward slash et cet identifiant spécifique du paramètre momma, qui signifie en fait que nous avons réussi implémenté sur le client ou lorsque vous avez acheté le module et que vous avez même récupéré notre tableau depuis le backend. Évidemment, nous n'avons pas implémenté de partie back-end, et nous le ferons dans la vidéo suivante. 26. Obtenir une seule carte: Dans la vidéo précédente, nous avons implémenté avec succès la partie frontale de notre composant de carte et de notre module de port. Mais maintenant, sur le backend, nous voulons implémenter l'obtention d'un seul tableau. C'est exactement la demande qui est cassée ici. Et je pense que nous avons mis en œuvre beaucoup de choses ensemble et que vous ne saviez déjà pas comment faire. C'est pourquoi je vous recommande vivement de l'implémenter vous-même. Comme toujours, ayez trois niveaux différents pour le niveau numéro un de l'UE, vous suffit de mettre la vidéo en pause ici et de le faire vous-même. À la fin, vous devez obtenir notre tableau depuis le backend, niveau numéro deux, parlons-en. Alors, que devons-nous mettre en œuvre ? Tout d'abord, je veux ouvrir ici notre serveur source. Et ici, nous devons fournir dans votre demande et cela sera sur slash, api slash boards et puis Boyd AD, et ce doit être un paramètre dynamique. Il faut protéger la sécheresse. À l'intérieur de notre contrôleur de carte, nous devons créer une nouvelle action. Maintenant, nous sautons ici à l'intérieur des contrôleurs bouillis, et nous faisons exactement la même chose comme si nous avions oublié les cartes. Mais voici Groupon pour trouver un seul tableau avec le d de ce tableau à partir de l'URL. Donc, si vous voulez faire un niveau pour simplement mettre la vidéo en pause ici, et si vous voulez simplement le faire ensemble, commençons. Tout d'abord, nous devons revenir à l'intérieur nos niveaux de serveurs ici et créer une nouvelle URL d'API. Donc, ici, nous aurons des tableaux slash apt-get slushy pie et ici l'identifiant du tableau deux-points. Nous voulons maintenant créer une nouvelle méthode. C'est pourquoi je vais sauter à l'intérieur des ports des contrôleurs et là on s'ennuie. Ils veulent les copier complètement parce qu'ils seront super similaires. Alors ici, je copie-collé, je m'ennuie, et ils veulent nommer cette méthode, s'ennuyer. Et ici, nous recevons une réponse à la demande et ensuite, nous vérifions si nous sommes bloqués. Maintenant, au lieu de rechercher, tous les tableaux voudront utiliser find one pour trouver un seul tableau. Et en fait encore mieux, nous pouvons utiliser ici find by ID. C'est aussi une méthode qui est possible et à l'intérieur du vermis, il suffit de fournir une identification de ce sport. C'est pourquoi nous pouvons supprimer un objet et plus simplement ici, demander point params dot board Id. Et là, nous recevons notre carte et nous envoyons simplement ce sac de carte dans notre API. Maintenant, vérifions si nous utilisons notre méthode correctement ici, et voici le point get boards du contrôleur de la carte. Cela n'est pas correct. Il faut s'ennuyer. Nous n'avons aucune erreur ici dans notre API et nous avons réussi à implémenter la mise en place de la mise en place. Allons voir ça. Je recharge la page, mais il n'y a pas d'erreur. Ici. Nous recevons notre tableau par D, et voici les informations de la base de données. Nous avons un titre D et un nom d'utilisateur. 27. Ajout de flux de cartes: Dans la vidéo précédente, nous avons implémenté avec succès calibrage de notre carte unique à partir de l'API. Dans cette vidéo, je souhaite partager mon idée façon dont nous allons utiliser ce tableau et l'enregistrer. Et en fait, c'est peut-être un peu délicat. Pourquoi est-ce que c'est ? Parce qu'en fait, ici, à l'intérieur du client, nous avons notre composant de carte et nous pouvons simplement le stocker dans une propriété ici. C'est très bien. ce que nous pouvons faire. Mais plus tard, nous aurons un modèle et c'est là que les choses seront différentes. Juste pour mentionner, nous avons ici une page avec le tableau et puis nous avons cliqué sur une tâche pour ouvrir cette tâche dans le modèle, le principal problème est lorsque nous rechargeons la page, nous voulons revenir à cette tâche spécifique, ce qui signifie que nous voulons avoir dans notre tableau barre oblique URL slash board ID slash tâches slash ID de tâche. Ensuite, nous rechargeons la page et nous récupérons d'abord notre tableau, puis peut-être toutes les colonnes, toutes les tâches. Et nous voulons résoudre cette tâche à l'intérieur du modèle, mais cela a-t-il un moyen ? Nous enregistrons, par exemple, notre tableau ici dans le composant board, mais nous ne pouvons pas vraiment utiliser ces informations dans notre composant de tâche. Pourquoi est-ce que c'est ? Parce que plus tard, nous enregistrerons notre composant de tâche ici en tant que composant enfant de ce chemin. Et nous ne pouvons pas vraiment accéder à certaines données qui ont été stockées dans ce composant de carte à partir de l'enfant. Quelle est la solution à ce problème ? Nous devons utiliser un service. Comment pouvons-nous y parvenir ? Tout d'abord, à l'intérieur d'un tableau, je veux créer un nouveau dossier appelé services. Et ici, nous pouvons créer un service de point de carte, point ds. Ici. Nous ne devrions pas mélanger notre service de conseil ici avec notre service de conseils d'administration, qui a des tableaux à services partagés. Ce service sert simplement à récupérer des données depuis le backend. Si nous voulons obtenir nos tableaux, nous utilisons de bons tableaux, nous nous ennuyons, nous créons des tableaux et ainsi de suite. Mais ce que nous faisons dans le tableau, c'est une sorte d'état pour cette page spécifique, qui signifie en fait que nous allons stocker nos colonnes de tableau, nos tâches, tout ce que nous avons sur cette page, puis tous les composants de cette page peuvent utiliser le service pour obtenir ces informations via des flux. C'est pourquoi ici nous voulons créer notre classe et il sera ennuyé de service. Et ici, en haut, nous ne devons pas oublier d'utiliser un injectable. Ce que je veux faire maintenant ici, exactement comme nous l'avons fait avec notre utilisateur actuel. Juste pour te rappeler que nous avions là, notre service. En haut de la page, nous avons créé ce flux d'utilisateurs actuel que nous pouvons utiliser dans l'ensemble de notre application. Nous voulons faire exactement la même chose. Maintenant ici, nous voulons créer ici Board était plus grand et c'est un flux et ceci est dans votre sujet de comportement. Et nous arrivons ici à l'une ou l'autre interface du tableau maintenant. Et ici, à l'intérieur, nous mettons maintenant juste parce que par défaut nous n'aurons pas de tableau. Nous ne l'avons pas encore récupéré. Ensuite, après avoir récupéré ce tableau, nous pouvons le configurer et mettre à jour le flux. C'est ainsi que nous devons créer une nouvelle méthode, a déclaré le conseil. Et à l'intérieur de l'utérus doit fournir notre tableau, qui est notre interface de tableau, et c'est nul. Et voici ce que nous voulons faire, c'est bien d'appeler ce jeu de fléchettes Stoller point ensuite parce que nous voulons mettre à jour un flux et le retirer de notre tableau. Nous ne devons pas oublier d'enregistrer notre service de conseil à l'intérieur d'un module. Ici, nous devons créer nos fournisseurs et nous écrivons notre service de conseil d'administration à l'intérieur. Et maintenant, nous pouvons l'utiliser directement dans notre carte de composants. Nous ne voulons donc pas créer ici le tableau des propriétés. Nous voulons en fait injecter ici l'intérieur de notre constructeur une nouvelle propriété. Et il sera ennuyé du service du conseil d'administration. Et comme vous pouvez le voir, c'est la différence que nous avons ici, fois les services, le service des conseils et le service du conseil. Et c'est là une énorme différence. Tout d'abord, il s'agit d' un service pour travailler avec eBay. Le second service ressemble plus à un État. Et ce que nous pouvons faire maintenant avec les données de récupération après l'abonnement, nous pouvons écrire et dire ce service de tableau, tableau de points. Et nous sommes fournis à l'intérieur de notre tableau. Dans ce cas, nous le stockons dans le flux. Et maintenant, nous pouvons utiliser ces informations non seulement dans notre composant de tableau, mais aussi plus tard dans notre composant de tâche. Et c'est extrêmement flexible et c'est la meilleure solution que je puisse imaginer pour partager des données entre deux tours. Et juste pour vérifier que cela fonctionne, je veux créer ici le flux supérieur pour le tableau. Donc, en fait, nous avons ici un flux de tableau et nous savons qu'il s'agit d'une interface observable de la carte. Nous montrons donc ici que nous devons obtenir un tableau. n'y a pas d'autre possibilité. Et pour éviter cette erreur de script de type sans initialiseur, nous allons écrire ce code directement dans le constructeur. C'est très bien. Ici, nous pouvons écrire ce tableau à points avec dollar égal, et ici nous voulons utiliser le point de service stocké. Et voici notre chaîne, qui est le dollar du conseil. Et vous pourriez dire, pourquoi ne pas l'utiliser directement ? Parce qu'ici, à l'intérieur du flux de tableaux, nous pouvons maintenant entrer dans notre composant sans avoir besoin de null du tout. Nous voulons simplement travailler avec notre composant lorsque board ne l'est pas maintenant, c'est pourquoi ce que nous pouvons écrire ici, nous pouvons écrire pipe puis filtrer le résultat. Donc, ici, il suffit de filtrer Boolean pour éliminer. À partir de là, nous n'obtiendrons rien si c'est le cas maintenant, nous allons simplement mettre à jour notre tableau. Si nous obtenons un tableau, et maintenant nous pouvons sauter dans notre fichier HTML et afficher ici notre flux de tableau juste pour le tester, c'est pourquoi board dollar. Et ici, nous utilisons un seul tube pour afficher ces informations. Allons voir ça. Je recharge la page et nous obtenons objet, objet parce que nous sommes adjacents et nous devons le passer avec Jason pipe. Regardons ça encore une fois. Nous arrivons ici à notre tableau, et comme vous pouvez le voir, ce sont les informations de notre tableau qui ont été préchargées. Il s'agit du titre, de l'utilisateur, de l'ID utilisateur L'idée est donc que ce service contient des informations, mais nous n'avons pas besoin de les stocker d' une manière ou d'une autre dans notre composant de carte. Nous utilisons simplement les flux du service et les utilisons dans chaque composant où nous en avons besoin, par exemple, nous écrirons exactement le même code dans notre composant de tâche si nous avons besoin l'accès pour notre oiseau, par exemple. Plus important encore, nous pouvons cartographier des données de ce type, ce qui est vraiment pratique. 28. Créer un service de socket: Dans cette vidéo, nous commençons une partie intéressante de notre application qui consiste à configurer la connexion de la couche socket. Et juste pour vous rappeler que nous l'avons déjà configuré. Quetta, tu es sur le back-end. Donc, dans notre code, nous pouvons ouvrir le test du serveur source de service. Et ici, en haut, nous avons un nouveau serveur IR, puis ici nous avons IR sur la connexion. Et voici notre connexion au journal de la console, ce qui signifie que nous l'avons configuré avec succès. Donc, passez au back-end, et maintenant nous devons l' implémenter sur le client. Et pour cela, nous utiliserons exactement la même bibliothèque que celle que nous utilisons en back-end. Juste pour vous rappeler que nous avons utilisé socket. C'est ici dans la console, je veux sauter dans notre dossier client. Et ici, je veux installer un nouveau paquet qui s'appelle socket Datta your dash client. Et c'est exactement le même package de la même équipe, mais c'est pour la configuration de notre client. Et ce package n'a rien à voir avec Angular. Il s'agit simplement d'un simple JavaScript. Alors, que voulons-nous faire maintenant ? Tout d'abord, dans l' application source de nos clients , les services Insight partagés, je souhaite créer un nouveau service et ce sera notre service de travailler avec socket. C'est par ici. Nommons son socket, DOD service dot ts. Et maintenant, à l'intérieur, nous devons créer notre classe appelée service de socket. Et évidemment, il ne faut pas oublier injectables ici sur le dessus. Donc, ce que nous voulons créer ici, nous voulons créer une fonction qui générera pour nous une nouvelle connexion. C'est pourquoi nous pouvons écrire ici une connexion socket SetTab. Et ici, nous obtenons notre utilisateur actuel. Pourquoi l'utiliser actuellement parce qu' ils veulent réellement envoyer des données privées via la connexion socket. Pourquoi est-ce que c'est ? Parce qu'en fait, nous allons utiliser socket. Vous êtes sur la page du forum, ce qui signifie que notre utilisateur est inscrit. Mais à l'intérieur, plongez dans les yogis, nous n'avons pas de système comme GET, comme nous l'avons utilisé pour l'authentification. Nous n'avons pas d' en-têtes HTTP et nous ne pouvons pas attacher notre jeton à notre socket. Mais il existe un moyen de transmettre notre jeton en utilisant socket. C'est une façon de rendre cela possible. Nous voulons configurer cette connexion pour notre utilisateur actuel. Et nous pouvons ensuite lancer le jeton depuis CurrentUser à l'intérieur de notre connexion socket à chaque requête. Donc, comme je l'ai dit ici, nous obtenons comme argument l'utilisateur actuel et cette interface utilisateur actuelle. Et de retour, nous sommes annulés. À l'intérieur, nous voulons utiliser notre ion. Et en fait, je dois entrer ici sur le dessus de votre batterie. Et voici notre client d'E/S socket. Maintenant, à l'intérieur des urgences, je peux fournir une URL où nous voulons nous connecter. Et en fait, nous pouvons simplement essayer HTTP et notre port du serveur. Nous ne voulons pas utiliser cela parce que pour cela, nous avons des variables d' environnement, qui signifie en fait que nous voulons sauter dans l'environnement source des clients, oui, et ici comme nous avons notre API Euro, nous voulons créer une URL socket. C'est ici que nous pouvons créer l'URL des sockets, et c'est le localhost http. Ici, nous avons 4 001 et nous n'avons pas besoin de mettre ici une barre oblique huit pi car nous avons configuré notre connexion socket layer directement sur notre serveur. Et vous pouvez dire, d'accord, mais nous pourrions réutiliser cette API comme une propriété unique pour l'URL de l' API et les E/S de socket. Oui, nous le pouvons, mais je vous recommande vivement de le diviser en deux propriétés différentes. Dans ce cas, il est plus facile de la scinder ultérieurement si vous souhaitez déplacer votre couche socket vers un autre serveur Web. Maintenant, dans notre service de socket, nous pouvons utiliser notre environnement. C'est ici, point d' environnement, nous avons des sockets, une URL. C'est exactement ce que nous devons donner l'envers ou à votre connexion. Et excellent. Maintenant, en outre, je veux fournir le jeton de notre utilisateur actuel, car en fait, nous configurons connexion de la couche socket uniquement pour l'utilisateur connecté, qui signifie que nous n' avons jamais ce jeton. C'est ainsi que nous pouvons écrire heures de terrain et ensuite nous fournissons des discussions, qui est le jeton de point utilisateur actuel. Et en fait, comme deuxième argument, nous fournissons un objet avec notre champ et ce champ extérieur à l'intérieur du socket IO sert exactement à authentifier un utilisateur. Et ce que nous obtenons, c'est que le résultat de notre RA est cette connexion socket. C'est là que je veux écrire cette socket égale IR. Et ici, nous devons créer cette propriété, à l'intérieur du socket. Comme vous pouvez le voir, il s'agit de nos deux contributions. Cela n'est pas correct. Nous voulons importer le socket depuis le client Socket Layer, ou il n'est pas défini car par défaut nous n'avons pas de socket. Et puis, à un moment donné, nous l'avons configuré en utilisant la connexion socket d'installation. En plus de notre fonction de configuration, je souhaite créer une fonction de déconnexion, ce qui signifie qu'à un moment donné, notre utilisateur sera verrouillé et que nous voulons le déconnecter de notre connexion par prise. C'est ici que nous allons créer une fonction de déconnexion supplémentaire. Et c'est très simple. Ce que nous voulons appeler ici, nous voulons écrire ce point socket. Et ici, nous avons une méthode qui s'appelle disconnect. Et comme vous pouvez le voir ici, je n' obtiens pas de saisie semi-automatique car en fait, ce socket peut éventuellement être indéfini. Et il y a deux variantes possibles de la façon dont nous pouvons le corriger. Tout d'abord, ici je peux juste mettre un point d'interrogation et c'est fini. Mais je ne veux pas écrire le code comme ça. Je tiens vraiment à informer un développeur que si nous n'avons pas de socket, nous avons un problème. Nous ne pouvons pas vraiment utiliser la déconnexion avant de configurer notre connexion. Si nous n'avons pas ce point socket, alors nous voulons lancer et rétrécir. Donc, voici une nouvelle erreur. Et par exemple, la connexion socket n'est pas établie. Notre service de sockets de base est donc créé avec succès. Maintenant, nous devons à un moment donné implémenter la configuration de connexion socket et ils veulent vraiment le faire dans notre module d'application. Pourquoi est-ce que c'est ? Parce que chaque fois que nous sommes authentifiés et que Berlin, maintenant que nous avons CurrentUser, voudrait établir une connexion. C'est ici que nous pouvons accéder à notre composant d'application. Et voici un prochain. Et juste pour vous rappeler, nous obtenons ici l'utilisateur actuel chaque fois que nous lançons notre application. Et ici, nous définissons l'utilisateur actuel et nous pouvons, avant cela, établir une connexion. C'est ici que nous pouvons écrire privé et nous avons un service de socket, et c'est notre service de socket. Maintenant, avant de pouvoir écrire, nous avons ici ces points, service de socket, point, connexion socket d'installation. Et en fait, nous obtenons notre utilisateur actuel et nous pouvons le donner à l'intérieur. Sauvegardons ceci et vérifions si cela fonctionne, comme vous pouvez le voir ici sans aucune erreur, puis sautez dans le navigateur. Et ici, c'est rouge, nous obtenons une erreur. Aucun fournisseur de service de socket a mis fin à cela parce que nous avons créé notre service de socket, mais nous n'avons pas injecté à l'intérieur d'un module. Et ici, nous utilisons le service socket dans notre composant d'application, ce qui signifie qu'il est logique d'injecter ce module chez nos fournisseurs. C'est pourquoi ici nous pouvons écrire un service de socket et nous sommes prêts à partir. Allons voir ça. Je recharge la page et une autre erreur s'affiche. Donc peu importe ce que nous obtenons, nous faisons cette demande sur socket a yarn. Vous pouvez le voir ici, mais nous obtenons une erreur. Nous avons un cours, ce qui implique une politique d'origine croisée. Parce qu'ici avec ne pas avoir de contrôle d'accès, autorisez en-tête d'origine sur la ressource demandée. Et c'est en fait tout à fait correct et nous devons déterminer à l'intérieur de Serum pourquoi cela se produit, parce que notre serveur n'autorise pas les connexions depuis autre hôte et utilisera certainement ici un autre hôte, il s'agit d'un hôte local pour 1200. C'est pourquoi nous devons aller à l'intérieur d'une source serveur. Et ici, nous avons nos niveaux de serveurs, et nous devons configurer notre serveur IIS un peu différemment. Donc, comme deuxième paramètre, nous pouvons fournir quelques options et nous recherchons l'option qui s'appelle cores. Et à l'intérieur, nous pouvons définir l'étoile d'origine et démarrer signifie que nous autorisons les connexions depuis n'importe quel hôte. Et en ce qui concerne le projet ferroviaire, vous pouvez écrire ici juste une liste de votre domaine. Mais pour nos besoins, étoile d'origine est tout à fait valide. Allons voir si ça fonctionne. Je suis ravi maintenant de la page et nous n'avons aucune erreur. Maintenant, nous pouvons sauter à l'intérieur du réseau, et ici, comme vous pouvez le voir, nous avons des connexions WebSocket. en sommes donc à des centaines. Et si vous pouvez voir dans votre navigateur quelque chose comme ça, cela signifie que votre demande de connexion socket est cela. Et en fait, nous pouvons maintenant accéder à notre console principale. Et ici, nous pouvons voir connect trois fois parce que chaque fois que je recharge la page, une nouvelle connexion est établie, ce qui signifie que nous avons réussi créer une connexion socket sur le client. Maintenant, la seule question est : est-il de la déconnexion ? Nous avons créé une déconnexion mais nous n'avons pas pu l'utiliser où nous voulions l'utiliser. En fait, je voudrais l' utiliser dans la déconnexion. C'est ici que nous pouvons accéder à notre application, aux services de santé et au service de résultats ici. Et voici notre déconnexion. Et ici, nous supprimons d' abord notre conversation, puis quand nul et notre utilisateur actuel. Et ici, nous pouvons utiliser socket pour déconnecter notre connexion car nous savons comment nous l'utilisons n'est plus verrouillée. Nous n'avons pas besoin de cette prise de courant. C'est ici à l'intérieur du constructeur, nous pouvons injecter notre nouveau service de socket, et c'est notre service de socket. Maintenant, en bas de notre déconnexion, nous pouvons écrire ce point de service de socket, et nous allons déconnecter notre utilisateur actuel et fermer notre connexion socket. 29. Rejoindre et quitter le tableau: Dans cette vidéo, je veux vous montrer comment utiliser les sockets sur l'exemple de la connexion à notre carte et de les déconnecter à la carte. Qu'est-ce que ça veut dire ? Insérez réellement le socket IO. Nous avons un tel thin qui est appelé rooms, ce qui signifie en fait que lorsque vous ne notifiez pas simplement notre backend avec un message de socket ou un autre client lorsqu'ils définissent tous les clients connectés à des chambre. Et en fait, quand nous parlons de planches à l'intérieur de la remorque, cela a beaucoup de sens. Nous voulons vraiment avertir uniquement les utilisateurs qui ont rejoint ce forum spécifique. Ce qui signifie, par exemple, que nous avons deux utilisateurs différents. Un utilisateur a ouvert le tableau, plein. Formulaire de tableau ouvert pour le deuxième utilisateur. Maintenant, le premier utilisateur a créé une tâche et nous devons informer un deuxième utilisateur création de cette tâche parce qu'il est connecté à cette salle ou à ce tableau. C'est ici que, dans cette vidéo, nous expliquerons comment nous pouvons rejoindre notre conseil d'administration et le quitter. Et pour cela, nous devons créer une nouvelle méthode dans notre service de socket. C'est pourquoi je veux ouvrir nos niveaux de service de circuit ici, créer une nouvelle méthode appelée emmet. Pourquoi nous avons besoin de cette méthode, en fait Insights Socket lui-même. Nous avons ces points, socket, point et meet, et nous pouvons fournir juste une chaîne comme foo. Ce sera notre message d'émission. Et ici, nous pouvons fournir quelques informations, par exemple, la chaîne Ambar. C'est ainsi que nous pouvons généralement utiliser sockets dans notre application, mais je souhaite l'encapsuler dans méthode supplémentaire pour deux raisons. Tout d'abord, nous voulons isoler une bibliothèque et créer un wrapper. Dans ce cas, nous pouvons toujours abandonner cette utilisation, par exemple, socket à votre client et utiliser une autre bibliothèque. Deuxièmement, ici je veux valider que nous sommes connectés pour socket un fil. C'est ainsi, voici notre image et nous y arrivons, tout d' abord, le nom de notre événement, c'est juste une chaîne. Et si vous ne connaissez pas l'intérieur des E/S de socket, nous émettons toujours uniquement avec des chaînes uniques, que nous écoutons sur d'autres clients ou dans notre backend. Et le second ici sera un message ici, j'écrirai tout gaspillage, tout, parce que c'est un message que nous pouvons fournir une chaîne et aucun objet ou aucune donnée que nous aimons. Et là, nous avons un vide, mais nous voulons le faire à l'intérieur. Tout d'abord, je vais copier-coller cette ligne pour vérifier la connexion du socket. Parce que si nous n'avons pas de prise de courant, nous ne pouvons pas utiliser de viande. Après ça. Nous pouvons simplement utiliser ce socket dot commit et ont été fournis dans la virgule de notre nom d'événement. Voici notre message. Notre fonction image est prête et nous pouvons maintenant l'utiliser. Et en fait, je veux l'utiliser directement dans nos composants de carte d'application, composant de carte, composant ts. Et nous avons ici en juin la méthode init. Et en fait, c'est un bon endroit pour mettre juste ici la jointure de l'utilisateur, qui signifie en fait que chaque fois que ce composant est chargé, cela signifie que les utilisateurs sautent à ce route et nous devons rejoindre l'utilisateur s'il a changé d'itinéraire et que nous voulons quitter cette salle ou ce tableau. Donc avec déconnecter un utilisateur de cette pièce spécifique. C'est pourquoi nous pouvons écrire ici. Tout d'abord, nous devons injecter ici notre service socket. C'est y, voici le service socket, et c'est notre service socket. Maintenant, nous pouvons utiliser cette méthode et écrire ce point de service point socket. Et là, nous avons notre image et nous devons d' abord donner un aperçu du nom de notre événement et ensuite des données. Donc, essentiellement, ce que nous voulons écrire ici, quelque chose comme les tableaux se joignent. Et ici, notre message sera, par exemple, un objet avec un ID de tableau. Et ici, nous fournissons l' ID du forum de cette URL spécifique. Il s'agit de cet identifiant de tableau. Nous disposons déjà de ces informations. Pourquoi j'ai mis ces informations dans l'objet. Parce que dégonfler, si pour une raison quelconque nous voulons mettre ici plus d' informations avec l'objet, nous pouvons le faire directement. Si nous avons ici, une chaîne doit refléter tous ces endroits, de la chaîne à l'objet. Comme vous pouvez le voir ici, nous pouvons émettre n'importe quelle tension. Nous pouvons écrire ici pour. C'est très bien, mais nous aurons beaucoup d'événements de socket différents et nous voulons les organiser d'une manière ou d'une autre. C'est pourquoi je préfère utiliser des tableaux, qui est un pluriel d'une entité, comme des tableaux ou peut-être des colonnes ou des tâches. Et voici ce qui s'est passé ? Par exemple, nous l'avons rejoint, ce n'est qu'un début. Nous pouvons ensuite faire quelque chose comme succès commun si c'est dans un processus synchrone, ce qui signifie en fait que pour l'instant, les oiseaux se joignent bien. Ce qui ne va pas, c'est que nous écrivons ici une chaîne où c'est juste en TypeScript et que nous devons utiliser d'innombrables. Et en fait, il n' que quelques constantes dans une seule propriété. C'est pourquoi ici à droite, je veux ouvrir notre dossier partagé, et ici nous avons des types dans. Ici. Je veux créer des événements de socket point dans m point ts. Ici. Maintenant, nous pouvons exporter notre enum, qui est l'ENM de socket UN, et c'est juste un objet ici nous pouvons écrire des tableaux de champs join equals, et ici nous écrivons boards join. Tout d'abord, nous avons ici un style de code. Deuxième Luba non dessiné ici, une ficelle. Juste ici, les événements de socket dans la chaîne de m tableaux à points, dans ce cas, à chaque endroit où l'on utilise la même chaîne, mais nous ne l'écrirons jamais de manière incorrecte parce que nous utilisons ici Justin unum, qui est une variable et non une chaîne simple. Donc, ce que fait cette ligne, elle émet pour notre back-end dans un nouveau message d'E/S de socket. Voici quelques chaînes de caractères et quelques données. Pourquoi nous fournissons exactement ces données, parce que nous voulons rejoindre notre utilisateur actuel sur le backend. Donc, notre connexion de prise actuelle à la carte spécifique. Et c'est suffisant pour que notre backend réagisse. Maintenant, il est temps de l'implémenter côté back-end, c' est là que nous devons ouvrir la source de nos serveurs. Et voici notre test de serveur. Et ici, en bas, nous avons notre propre connexion. C'est très bien. Maintenant, à l'intérieur, nous pouvons supprimer ce journal de console et nous voulons réagir avec notre point de socket activé, sur certains événements et entendre ce que nous attendons. On attend le joint du conseil d'administration. Mais ici, nous avons exactement le même problème à l'intérieur backend et nous ne voulons pas écrire uniquement des chaînes simples. Nous voulons également les organiser dans l'enum. Et en fait, nous allons dupliquer exactement le fichier complet de nos événements de socket dans le client et dans le sirop. Et vous pourriez dire, d' accord, c'est inutile. Nous ne pouvons créer qu' un seul fichier. possible, mais vous pouvez éventuellement diviser votre client et votre serveur en différents référentiels , puis partager n'importe quoi entre eux. C'est pourquoi je souhaite vraiment isoler notre client et notre back-end. Donc, ce que nous voulons faire ici à l'intérieur de nos types, nous pouvons créer exactement la même chose. Ce seront nos événements de socket qui n'énumèrent pas de points. Et maintenant, à l'intérieur, ils pourront être placés exactement le même code que celui que nous avons sur le client. Ce que je veux faire maintenant ici, au lieu que les oiseaux se joignent, je peux écrire des événements socket dans m dot boards churn. Et comme vous pouvez le voir, cette entrée provient des événements de type socket. C'est ainsi que nous nous abonnons à notre événement depuis le client avec socket, the tongue, mais d'où nous obtenons notre socket, c'est notre premier paramètre ici. Comme vous pouvez le voir, c'est socket et ici nous avons socket point on, mais ici nous devons fournir deux arguments. Tout d'abord, c'est notre événement, et ensuite c'est notre Kohlberg. Donc, ce que nous obtenons ici contient généralement certaines données, et ce sont exactement les données que nous avons fournies par le client. Nous pourrions écrire ici un peu de logique, mais nous ne voulons pas, car en fait, nous avons écrit tout ce qui est lié à nos tableaux à l'intérieur du contrôle. Et il est très logique d'écrire tout le code d'E/S de notre socket également dans le contrôleur. Peu importe qu'il s'agisse de Socket Layer ou de justice GTP. Nous pouvons isoler tout ce code à l'intérieur de nos contrôleurs. C'est ici que nous pouvons utiliser le point contrôleur de notre carte, par exemple, join board. C'est ce que nous voulons mettre en œuvre. Et maintenant à l'intérieur tout d'abord, je veux donner plus que socket et ensuite données. Et nous le ferons dans chaque cas lorsque nous travaillerons avec Socket Layer et donnerons ces informations à l'intérieur. C'est très similaire à ce que nous faisons avec notre Express. Ici. Nous utilisons le contrôle des naissances ou créons un tableau. Et en fait, c' est ainsi que nous donnons directement une réponse à la demande interne. Et ensuite, pourquoi nous faisons cela. En fait, lorsque nous fournissons tout ce qu'il y a à l'intérieur, nous pouvons utiliser ce que nous voulons. Si nous avons besoin d'un y'all, nous pouvons utiliser un fil quand il fait du vélo. Nous pouvons utiliser ces informations si nous avons besoin de certaines données de l'événement, nous pouvons également les utiliser. Et maintenant, il ne nous reste plus qu'à mettre en œuvre notre joint. C'est pourquoi je souhaite me lancer dans nos sports de manette. Et ici, en bas, nous devons créer une nouvelle fonction. Ici, nous avons des cônes experts, Joan board, et nous arrivons ici, tout d'abord, Iowa, qui est un serveur. En fait, nous avons ici beaucoup de choses inverses. C'est pourquoi vous devez être prudent, mais nous devons entrer notre serveur à partir du socket IO. C'est important. C'est là que nous obtenons un fil et c'est notre serveur en tant que type. Après cela, nous avons notre socket. Et le socket provient également du socket IO. Enfin et surtout, voici nos données. Et en fait, nous savons qu' à l'intérieur, nous fournissons l'identifiant du tableau, qui est une chaîne, et c'est assez d'informations pour nous. Voici donc à quoi ressemble une fonction typique à l'intérieur du contrôleur lorsque nous travaillons avec Socket Layer. Et maintenant, ce que nous voulons faire à l'intérieur, nous voulons simplement écrire socket point join. Ici, nous fournissons l'ID du tableau de points de données. Et ça y est, il ne s' agit que d'une seule ligne. Donc, ce que fait ce code, donc Wed montré dans cette connexion socket actuelle. Donc notre utilisateur actuel de ce forum ID, et ce n'est qu'une chaîne, rien de plus. Mais en fait, lorsque nous écrivons join et foo, nous disons simplement à socket de joindre socket actuel à cette salle avec ce nom, mais nous n'avons pas de salles dans notre application, nous avons des tableaux, mais l' idée est exactement la même chose, lorsque nous rejoignons nos utilisateurs au forum, puis ils recevront nos messages à ce forum spécifique. Certains veulent maintenant tester le bon fonctionnement de notre code. C'est pourquoi je veux juste écrire le serveur de journaux de console, socket join. Et ici, je vais écrire un tableau de points de virgule AD dans ce cas. Mais maintenant, lorsque nous voyons ce journal de console, cela signifie que le message a été émis avec succès depuis le client ou le backend. Et notre backend a réagi au message et a rejoint notre utilisateur dans cette salle. C'est ici que nous allons sauter dans notre backend et recharger la page. Et comme vous pouvez le constater, nous n'avons aucune erreur. Et en fait, notre code avec ce composant de carte et cette image sera déclenché parce que notre composant a été rendu. Et maintenant, nous pouvons sauter dans la console et vous pouvez voir le circuit de service ou votre jointure. Et voici le D de notre tableau. C'est ici que nous rejoignons notre socket actuel. Et comme vous pouvez le voir dans le navigateur, c'est exactement le d de notre tableau. Et maintenant, nous voulons faire exactement la même chose avec la vie et la pension. Et en fait, ce qu'ils voulaient faire, je veux créer ici une méthode supplémentaire, initialiser les auditeurs et en fait tous mes auditeurs comme les abonnements, par exemple, j'emballe toujours dans ce méthode supplémentaire. C'est le même nom que dans, par exemple, fetch data. Dans ce cas, ils ne contiennent pas beaucoup d' informations en juin. C'est là que je veux écrire, initialiser les auditeurs et m'abonner ici pour vivre dans une page. Et en fait, nous pouvons le faire si nous utilisons une application de lutte contre la sécheresse et que nous avons ici une sécheresse, mais pas un routeur. C'est ainsi que nous devons utiliser le routeur et c'est notre travail. Et maintenant, nous pouvons écrire un abonnement pour vivre dans une page. Et ici, nous pouvons écrire ces événements point routeur point. Et voici que nous nous sommes inscrits. Et en fait, nous nous abonnons, nous aurons ici accès à chaque événement déclenché par un routeur. Et ce que nous voulons écrire ici, si événement, exemple d'ici, nous avons le début de la navigation. Et le début de la navigation est le début d'un changement dans notre itinéraire. Et en fait, si cela se produit, alors je veux me connecter à la console en laissant une page. Encore une fois, nous utilisons événements de sécheresse pour nous abonner à tous les événements de sécheresse. Et nous obtenons avec Subscribe l'accès à chaque événement maintenant ici pour vérifier l'événement spécifique où l'utilisation de l'instance de et nous fournissons ici la pile de navigation. Et voici notre journal de console où nous voulons émettre un message de socket et ce message sera en direct sur un forum. Ensuite, nous devons déconnecter un utilisateur de ce forum spécifique. Allons voir ça. Je recharge la page et nous avons un étroit j'ai oublié de mettre une virgule ici en haut. Mettons-le maintenant et rechargeons la page. Et comme vous pouvez le voir, nous n'avons pas d'erreurs, mais nous ne pouvons pas vraiment passer à une autre page où ils peuvent essayer de le faire ici. Je peux juste revenir en arrière et nous quittons la page parce que nous sommes maintenant sur la page des tableaux slash. Et voici ce journal de console, qui signifie en fait que ce journal de console se déclenchera chaque fois que nous vivrons une page. Mais en fait, ici, je ne veux pas utiliser le sommet du service des sockets. Au lieu de cela, je veux écrire ici ce tableau à feuilles de points de service. Et en fait, vous pourriez demander, mais pourquoi, pourquoi ne pas simplement écrire ici socket au milieu de la réponse ici, ce n'est pas sur LinkedIn que nous voulons faire à l'intérieur d'un service de forum lorsque nous quittons la page. Et en fait, ici , à l'intérieur du service la mer, nous avons le flux de la planche et nous devons également le régler maintenant quand nous avons quitté le tableau, c'est ici. Créons notre méthode de planche à feuilles et nous avons juste ici un vide à l'intérieur. Tout d'abord, whoop, je veux installer ce tableau maintenant, qui signifie en fait que nous n'avons plus de tableau. Et après cela, nous voulons répondre à ce message qui quittera le conseil d'administration. C'est pourquoi nous devons ouvrir nos types partagés. Et voici les événements de socket. Ici, nous avons le churn Boards. Maintenant, nous pouvons copier-coller ce message et le nommer en direct. Et c'est juste ennuyeux. Partir. Maintenant, je vais copier-coller cette ligne. Et maintenant, nous pouvons utiliser notre service de socket. Mais pour cette machine virtuelle doit l' injecter ici dans le constructeur. Nous avons donc ici notre service de socket, et c'est un service de socket et nous l'utilisons exactement comme nous le faisions auparavant. Ce que je veux écrire ici, c'est ce service de socket dot m it et a été fourni à l'intérieur de notre nom d'événement. Et dans ce cas, ce seront nos événements socket E et M dot boards live. Et en fait, ici, nous devons fournir ce que nous devons vivre au conseil d'administration. C'est là qu'il nous manque un identifiant de tableau, qui doit être une chaîne, et que nous devons fournir à partir de notre composant. Ici, je veux mettre l'identifiant du tableau. Nous devons maintenant mettre à jour notre composant. Nous avons donc ici notre composant board, et ici à l'intérieur du live board, je vais écrire cet ID de port point. Maintenant, nous devons simplement implémenter exactement la même chose sur le serveur que nous avons fait pour la jointure, mais nous devons utiliser live. C'est là que nous allons revenir en arrière dans les silos, les serveurs, la source, le serveur, oui. Et voici notre géant des connexions et des ports. Ce que je dois faire maintenant, je veux mettre à jour les événements de socket qu'ils contiennent sur le backend, et ce seront également les ports qui quitteront. Et ici, je suis en direct. Maintenant, ici, nous pouvons copier-coller ces lignes complètement et enregistrer une prise de plus, pas pour les tableaux barattés, mais pour les tableaux à points en direct en devinant qu'il a des données. Et ici, nous voulons utiliser le contrôleur de ports, pas rejoindre le tableau, mais le quitter. Et nous devons maintenant créer ce module live à l'intérieur de notre manette. Et en fait, ce sera exactement la même chose. C'est pourquoi je vais copier-coller complètement cette méthode et la nommer en direct Ici , nous obtenons notre IR comme précédemment socket car auparavant, les données internes se terminent, nous avons notre ID de carte. Maintenant, dans le journal de la console, nous pouvons écrire notre cour pour partir. Et voici la carte de données AD et au lieu de socket joint, où juste ici, socket dark leaf, et avec cette seule ligne où nous déplaçons notre socket actuelle de cette pièce spécifique, qui signifie que nous n'obtiendra aucun événement de ce forum. Allons voir si ça fonctionne. Je recharge la page et on y est. Maintenant, je suis un sac caché et nous devons envoyer la section pour notre back-end. Voyons ça comme vous pouvez le voir ici. Tout d'abord, nous avions ici socket je jouxte et rejoignez cette pièce spécifique. Et quand je réponds, nous avons une feuille de cette pièce. Et c'est exactement comme ça qu'un client et la mendicité fonctionnent ensemble lorsque nous utilisons le socket IO. 30. Authentification dans socket.io: Dans cette vidéo, nous devons terminer le travail sur l'authentification maintenant un socket User Insights. Mais tout d'abord, nous voulons régler un gros problème. Comme vous pouvez le voir ici, je suis connecté et je suis sur la page du forum. Mais que se passera-t-il si je me déconnecte ? Je veux donc simplement sauter dans l'application, supprimer notre jeton et recharger la page. Je suis maintenant directement sur la page d'accueil. Cela est tout à fait valable. Mais à un moment donné, je veux m'authentifier à nouveau. Je clique ici pour me connecter, puis coller ici f2 à gmail.com. Et notre mot de passe, je frappe ici même. Et comme vous pouvez le voir, nous n'avons pas d'erreur, mais après le même saut dans premier-né et nous obtenons une erreur, connexion socket n'est pas établie pourquoi cela se produit. En fait, nous avons notre connexion socket d' initialisation dans notre application source, composant d' application ts, ce code. Donc, après la page Lord, nous allons chercher l'utilisateur actuel et ici nous configurons la connexion socket, mais nous ne sommes pas bloqués au début. C'est pourquoi nous sommes venus ici et nous avons défini notre utilisateur actuel maintenant, puis nous nous sommes bloqués avec succès. Et juste pour vous rappeler, c'est ce qui se passe, où à l'intérieur de nos composants se connectent. Voici notre onsubmit ici où vous vous abonnez à la connexion et nous sommes assis ici à parler et à l'utilisateur actuel, c'est tout à fait correct, mais nous n'avons pas mis à jour notre socket. Ainsi, notre connexion de couche socket n'existe pas après enregistrement ou après la connexion et ne vit pas lorsque nous rechargerons la page, cette connexion socket sera établie. Encore une fois, ce n'est évidemment pas correct et nous devons établir cette connexion après connexion ou après l'enregistrement. Et c'est extrêmement facile à faire. Ce que nous devons faire ici, nous pouvons simplement injecter à l'intérieur de notre constructeur une nouvelle propriété, et ce sera notre service de socket, qui est notre service de socket. Nous pouvons maintenant utiliser cette méthode. Ainsi, par exemple, après un certain jeton, nous pouvons écrire ces points point de service de socket. Et ici, nous avons une connexion socket SetTab ici bien qu'ils ont accès à un utilisateur actuel et nous la jetons simplement dans notre connexion socket d'installation. Et nous devons faire exactement la même chose lors de notre inscription. Donc, tout d'abord, nous injectons notre service de socket. service de socket privé est donc un service de socket. Et maintenant, après cela, nous pouvons utiliser cette méthode dans notre succès. Donc, après avoir défini le jeton, c'est le service de socket de points, la connexion de socket de configuration de point avec l'utilisateur actuel. Dans ce cas, cela fonctionnera correctement. Je veux supprimer la page de discussion, sauter ou me connecter et maintenant essayer de me connecter. Voici donc le plein sur gmail.com et notre mot de passe, je suis en train de dire méchant, puis je passe à la première partie. Et nous n'avons pas d'erreur pour le moment, car nous avons réussi à configurer notre connexion socket juste après le verrouillage. Mais nous ne faisons rien avec notre authentification dans les E/S du socket, et c'est exactement ce que nous voulons faire. Que se passe-t-il à l'intérieur de notre connexion socket d'installation ? Ici, nous sommes renvoyés à l'intérieur de notre jeton utilisateur actuel. C'est très bien. De face et de côté, nous avons fait tout ce dont nous avions besoin. Mais maintenant, nous devons sauter à l'intérieur d' un serveur et l'analyser en conséquence. Pour cela, Boom doit sauter à l'intérieur de nos niveaux de serveurs. Et voici votre propre lien. Et en fait, avant notre propre connexion, passez à écrire ici, utilisez le point. Ici, nous aurons notre fonction et ce sera notre middleware. Et après cela, nous avons notre propre connexion, qui signifie qu'elle est exactement la même, comme la façon dont notre intergiciel ici passe à authentifier notre demande et à savoir que nous sommes bloqués parce que notre connexion socket n'est disponible que pour les utilisateurs connectés. C'est ici que nous écrivons IOU et à l'intérieur nous devons fournir la fonction. Et ici, il s'agira d'une fonction asynchrone simplement parce que nous voulons récupérer notre CurrentUser dans la base de données. Et ici, nous obtenons d' abord notre socket, qui est socket, et nous obtenons, et la fonction suivante, parce que c'est une fonction synchrone que nous voulons écrire ici, essayez et attrapez. Donc tout d'abord, nous devons essayer directement et où, cuisine et erreur et ce que nous allons arriver à l'intérieur de la capture. Nous voulons simplement écrire ici et lancer une nouvelle ère avec, par exemple, notre erreur d'authentification. Et voici une chose très importante dont vous devez vous souvenir. Nous n'avons aucune erreur dans le socket. Ils n'y sont pas du tout. Nous ne propageons aucune erreur au client, ce qui signifie que si nous obtenons une erreur, par exemple sur le backend, nous voulons simplement envoyer un message au client spécifique. Nous pouvons envoyer un étroit que nous venons de jeter à l'intérieur d'un objet peut être un message d'erreur avec un code d'erreur ou tout ce que vous préférez. Et il est important de s'en souvenir. Socket Layer ne fonctionne donc pas exactement de la même manière, comment devrait-il s'agir d'erreurs ? Et maintenant, la première chose que nous voulons faire dans notre tentative est de nous faire parler de la demande. Et ici, nous pouvons écrire point, poignée de main, point, maison, jeton de point. Et ce sera exactement ce que nous avons vécu. Et en fait, ici, nous obtenons le jeton, c'est n'importe lequel, et ils ne veulent pas ça, parce qu'en fait, ici je veux obtenir une chaîne. C'est pourquoi je peux écrire ici crochets ronds et simplement écrire la souche S. Et si nous n'obtenons pas ce jeton, je veux utiliser ici une chaîne vide. Pourquoi est-ce que je fais ça ? Parce qu'ici, nous voulons utiliser Jason verify, pour vérifier notre jeton. Et dans ce cas, nous ne voulons pas qu'elle soit indéfinie. C'est. Nous pouvons le vérifier lorsqu'il s'agit d'une chaîne. C'est par ici. Nous pouvons maintenant essayer d'analyser les conversations en utilisant le jeton Web JSON. Donc, en haut, nous pouvons importer le GPS à partir de notre package JSON Web Token. Maintenant, nous pouvons revenir à notre code ici, l'utiliser. Nous aurons donc ici JWT point, et ici nous avons vérifié. Et maintenant, à l'intérieur, nous devons d' abord passer notre cible. Mais juste pour vous rappeler, l'intérieur d'un jeton, nous avons l'espace au porteur, puis notre jeton, c'est là que je veux le diviser par espace et prendre le deuxième argument. Et après cela, nous devons fournir ici un secret. Et juste pour vous rappeler quel est le secret qui vient de notre config. C'est ce que nous utilisons pour analyser notre jeton JSON. Et c'est ce que nous récupérons. Nous obtenons ici un lot de cordes ou de TVP. Mais ici, nous voulons vraiment dire ce que nous récupérons. Ici. Comme toujours, nous obtenons notre objet, nous disons D, qui est une chaîne. Et deuxièmement, nous recevons un e-mail qui est également une chaîne. Dans ce cas, nous obtenons des données correctes ici et nous pouvons maintenant obtenir un utilisateur comme nous l'avons fait dans notre middleware Auth. Et pour cela, nous devons saisir un utilisateur ici en haut. Nous utilisons donc maintenant un modèle utilisateur exactement comme nous le faisions auparavant. Nous utilisons donc simplement des modèles de barre oblique utilisateur de barre oblique. Et maintenant, nous pouvons faire une demande. Nous voulons donc récupérer notre utilisateur, et ici nous voulons faire une demande à la base de données avec l'utilisateur point. Et voici notre beau Bye. Ici, nous pouvons effectuer une recherche par ID car nous avons point de données NAD Insight. Et si nous n'avons pas notre utilisable, voulons lancer une erreur. Donc ici, si nous n'avons pas trouvé d'utilisateur, cela signifie que nous ne sommes pas bloqués ici. Nous lançons simplement return next et nous sommes jetés dans une erreur d'authentification new era, tout comme nous l'avons fait dans notre catch. Et après cela, nous voulons écrire cet utilisateur dans notre socket. En fait, socket est notre instance, et nous pouvons écrire dans les informations supplémentaires comme nous l'avons fait précédemment avec request. Dans ce cas, plus tard dans chaque contrôleur, nous pouvons accéder à cet utilisateur actuel. C'est ainsi que l'utilisateur point socket égal à l'utilisateur que nous avons trouvé. Et comme vous pouvez le voir ici, nous obtenons directement une propriété d'erreur que l'utilisateur n'existe pas sur le type socket et nous devons faire exactement la même chose que nous avons fait avec la requête SAML. Juste pour vous rappeler, nous avons créé une demande expresse dans laquelle nous avons étendu notre demande pour mettre l'utilisateur à l'intérieur. Et maintenant, nous voulons faire exactement la même chose, mais avec notre socket. C'est par ici. Créons une interface point point ds pour socket. Et ici, à l'intérieur, nous voulons créer une nouvelle interface, qui s'appelle socket. Et ici nous voulons utiliser extends from socket, socket. En fait, j'ai ici un nom assez étrange car ce n'est pas une entrée valide de la socket. C'est par ici. Je veux importer un socket en tant que socket ou votre socket. Et je fais ça depuis socket ou simplement parce que nous ne pouvons pas avoir exactement le même nom. Donc voici le Gabon pour exporter notre socket et voici un socket important, ce n'est pas valide. C'est là que nous voulons renommer notre entrée à partir de socket IO et ensuite étendre à partir de notre socket, socket. Et nous voulons ajouter ici notre utilisateur. Et ce n'est pas toujours fait cette façon ici il y a un point d'interrogation, et c'est un document utilisateur que nous devons également importer ici en haut depuis notre interface utilisateur, nos interfaces socket là-bas. Nous pouvons maintenant revenir à l'intérieur de notre serveur et l'utiliser au lieu du simple. Donc juste pour vous rappeler, nous avons ici un socket d'entrée de socket IO. Cela n'est plus valide. Voici Woburn pour inverser notre socket, et voici nos types de socket slash. Allons voir si ça fonctionne. Je fais défiler ici vers le bas, et nous n'avons plus d'erreur ici. L'utilisateur du socket est complètement valide et il s'agit d'un document utilisateur ou d'un document non défini. Voyons maintenant si notre code fonctionne. Donc je saute ici à l'intérieur de la console et nous n'avons aucune erreur, donc ça marche. Maintenant, ce que je veux faire, c'est sauter à l'intérieur de nos cartes contrôleurs. Ici, nous faisons partie du conseil d'administration. Donc ici au lieu de la carte de données AT, je peux connecter ici un utilisateur de maman, un socket. Et en fait, ici, l'utilisateur socket dot est évidemment invalide car ici nous n'avons pas utilisé l'interface correcte. C'est par ici en haut. Nous n'avons pas besoin d'utiliser socket from socket IO, mais nous devons importer notre interface socket que nous venons de créer à partir de notre interface de socket type slash. Ici, nous n'avons pas d'erreur. Allons dans la console et vérifions si elle fonctionne. Et pour cela, il suffit de recharger cette page et nous n'avons aucune erreur. Regardons maintenant à l'intérieur de la console. Vous pouvez voir qu'il n' y a pas de message ici, ce qui signifie que nous avons oublié quelque chose. Et ce que nous avons oublié, c'est à l'intérieur du sayo use to write next, qui signifie qu' après cette ligne, notre code ne va nulle part. C'est y ici, mais il faut écrire ensuite, et dans ce cas cela doit fonctionner. Allons vérifier à nouveau. Je suis en train de recharger la page. Nous allons sauter dans notre backend et comme vous pouvez le voir, voici nos informations. Donc Socket Layer pour rejoindre et nous obtenons ici notre utilisateur, et ici nous obtenons deux journaux de console parce que chaque fois que vous mettez à jour la page, nous obtenons cette E/S de socket à joindre parce que des abus se produisent. Nous vérifions notre utilisateur, nous l'obtenons à partir de la base de données. Il est maintenant disponible pour nous à l'intérieur de notre contrôleur. Donc, avec ce code, nous avons réussi à obtenir notre utilisateur à partir de la requête. Et maintenant, dans chaque action à l'intérieur du contrôleur via un circuit, un fil, nous avons cet utilisateur disponible rapidement. 31. Obtenir des colonnes: Dans cette vidéo, nous commençons par implémenter nos colonnes. Et je pense que c'est une bonne tâche que vous essayiez de la mettre en œuvre vous-même. Que voulons-nous mettre en œuvre ? Un top ? Nous avons notre conseil d'administration et nous sommes déjà cotés sur notre client et nous l'avons implémenté sur le backend et sur le client. Nous devons maintenant implémenter des colonnes. Pourquoi avons-nous besoin de colonnes ? Cela place vraiment à l'intérieur d' un tableau où nous stockerons les tâches et nos utilisateurs peuvent créer des colonnes à l'intérieur du tableau, ce qui signifie en fait que la colonne doit appartenir aux utilisateurs. Nous devons donc utiliser à l'intérieur la 3D mais aussi la carte AT, car notre colonne ne peut pas exister sans tableau et c'est y. Voici trois niveaux de difficultés pour vous. Tout d'abord, si vous voulez le niveau le plus difficile, mettez simplement la vidéo en pause maintenant et implémentez sur le festival backend un modèle pour la colonne, puis tapez pour la colonne, puis une méthode get pour obtenir une liste de les colonnes de notre tableau si vous voulez l'essayer au deuxième niveau. Avec mes conseils, voici quelques conseils car l'ensemble nos types de services doit créer, comme nous l'avons fait avec board. Nous devons créer ici la colonne et nous avons besoin ici d'une interface pour la colonne et également d'une interface pour le document de colonne. Ce sera donc super similaire à notre tableau. Ensuite, dans notre serveur, nous voulons créer une nouvelle route. Et ici, nous aurons des tableaux API apt-get, board AT comme ici, des colonnes slash. Et il s'agira d'une requête GET pour obtenir toutes les colonnes de ce port spécifique. Et nous avons vraiment besoin de cette quantité sur notre parcours. Dans d'autres cas, nous ne savons pas pour quel tableau nous devons obtenir nos colonnes. Pour cela, nous devons implémenter dans votre contrôleur, qui est le contrôleur de colonnes, et nous devons implémenter à l'intérieur de la méthode, get columns, comme nous l'avons ici à l'intérieur. Je m'ennuie. Et ils l'ont fait, c'est que nous voulons obtenir toutes nos colonnes ce stade AD de la base de données. Donc, si vous voulez essayer vous-même, mettez la vidéo en pause maintenant. Et maintenant, la variante la plus simple, nous allons l'implémenter ensemble. Et nous commençons ici. Tout d'abord, de nos types. Ici, nous voulons créer un nouveau type, qui sera column dot interface ab.js. Et en fait, je veux copier-coller complètement notre tableau car il sera super similaire. Nous avons donc ici notre interface et notre colonne de données. Et de quoi avons-nous besoin dans notre colonne ? Tout d'abord, nous avons besoin d'un nom, ce qui signifie que le titre est complètement valide, aura également ici créé et mis à jour à. Et nous avons ici UserID parce que c'est l'ensemble. Nous pouvons avoir besoin d'informations sur la personne qui a créé cette colonne spécifique. Ensuite, nous voulons avoir une référence à notre conseil d'administration. C'est là que nous avons un tableau AT. Et il s'agit du même type de schéma ID d'objet, tout comme nous l'avons ici en haut pour notre utilisateur. Et maintenant, au lieu de notre document de tableau, nous voulons créer notre document de colonne et nous sommes étendus ici document et notre interface de colonne que nous venons de créer. Et maintenant, il est temps de créer notre modèle. Nous avons donc ici le modèle de Bohr, maintenant nous avons besoin d'un modèle de colonne. Nous avons donc ici une planche qui déchire. Maintenant, nous devons créer ici la colonne Ts. Et en fait, je vais copier-coller tout ce qui se trouve notre tableau parce que c' est super similaire. Donc, ce que nous avons ici, nous construisons ici un schéma de colonne, et ici nous utilisons un document de tableau NADH, mais à la place un document de colonne que nous venons de créer ici, document de tableau en haut que nous pouvons supprimer. Ici, nous savons que nous avons notre titre, nous avons notre utilisation 3D, c'est obligatoire. Et le dernier ici sera notre ID de tableau, qui est un ID d'objet de type, et il est également requis, et c'est notre modèle de document de colonne de type et le nom est column. Et voici notre schéma de colonnes. Comme vous pouvez le voir, il est très similaire à notre tableau. Et en fait, de nombreux modèles que vous créerez dans vos futures applications ressembleront vraiment à ceci. Nous avons donc réussi à créer notre type et notre modèle. Maintenant, nous devons générer et utiliser à l'intérieur de nos niveaux de service. Et ici, je veux copier-coller cette ligne avec un ID de carte Pi. Et ici, nous avons une barre oblique get on exactement cette route parce que comme je l'ai dit, nous voulons obtenir nos colonnes pour ce point spécifique. Et ici, nous devons utiliser notre middleware car cette requête ne concerne que les utilisateurs connectés. Et ici, nous n'avons pas besoin d'utiliser contrôleur de notre carte qui voudrait un nouveau contrôleur ici, contrôleur de colonnes, et ici nous pouvons le nommer, par exemple, obtenir des colonnes, mais ne pas avoir de contrôleur de colonnes haut. Donc, ici, je veux copier coller le contrôleur de la carte ici en haut et le nommer contrôleur à deux colonnes De contrôleurs slash colonnes. Et notre dernière étape ici sera de créer un nouveau contrôleur, appelé colonnes. Et c'est le contrôleur qui gère toutes nos actions pour les colonnes. Nous sommes donc en train de créer nos colonnes points ts. Et ici, je veux juste copier-coller une méthode de nos tableaux car elle est super similaire et ce sont de bons tableaux. Revenons donc à l'intérieur escaliers de nos colonnes et collons cette méthode ici. Tout d'abord, ce n'est pas s'ennuyer, mais obtenir des colonnes. Et nous avons besoin ici d' une interface de demande exprimée car nous voulons vérifier l'utilisateur actuel. Et là, nous avons besoin de notre prochaine fonction. Et nous devons également entrer ici sur la réponse de l'express. Et ici, comme toujours, nous recherchons CurrentUser. Nous lançons pour 01 si ce n'est pas le cas. Mais maintenant, nous devons utiliser le modèle non ennuyé, mais plutôt la colonne du modèle. Nous allons donc entrer ici sur le modèle de colonne supérieure à partir duquel nous venons de créer. Et ici, nous écrivons des modèles slash column. Et maintenant, nous attendons de faire une demande de recherche de modèle de colonne. Mais au lieu de trouver nos colonnes, nous obtiendrons ici un tableau par ID utilisateur. Nous voulons les trouver auprès de notre conseil d'administration AD. Dans ce cas, nous obtiendrons colonnes malchanceuses pour ce tableau spécifique. Et nous obtenons ces informations à partir de request point, params point, et ici nous avons l'ID de la carte. Donc, ici, nous obtenons un tableau de nos colonnes et nous voulons simplement répondre au client avec ce tableau. Et en fait, c'est fini. Allons voir si ça fonctionne. Je passe au back-end. n'y a aucune erreur. Donc maintenant je veux faire une requête get, et ici j'ai notre API, mais au lieu de slash api slash boards, je veux avoir ici slash puis NAD. C'est pourquoi, depuis notre application, je souhaite copier le d de notre tableau pour le coller ici dans Postman. Nous faisons une requête GET et appuyons sur Envoyer. Comme vous pouvez le voir, où je reçois un message non autorisé, ce qui signifie tout d'abord, je dois me connecter. C'est mon utilisateur, je suis connecté et je reçois un jeton. Copiez-collez ce harcèlement et réessayez. Voici une requête GET pour un point sans base slushy. Voici AD et ils ont manqué ici des colonnes slash. Il s'agit d'une requête get, et voici notre en-tête. C'est de la bière. Et puis je mettrai mon jeton que je suis taper maintenant envoyer et nous recevons notre réponse, qui est un tableau vide. Et en fait, c'est tout à fait correct car nous n'avons créé aucune colonne dans notre base de données. Mais pour le rendre sûr et propre, créons-les à partir de la console afin que nous puissions vérifier si cela fonctionne vraiment pour les désactivés, sautez dans la console et essayez docker exec moins 18 MongoDB, Mongo , comme nous l'avons fait précédemment pour notre conseil d'administration. Nous devons maintenant utiliser notre base de données L Trello. Bande-annonce tellement utile et maintenant je veux insérer un enregistrement dans notre collection de colonnes. C'est pourquoi ici nous pouvons écrire des colonnes de points db, des insertions de points, et ici à l'intérieur nous voulons lancer tout d'abord au titre, par exemple, la première colonne. Donc ici, nous devons fournir un ID utilisateur, et ici nous devons écrire la date est un objet contenant une chaîne que nous devons prendre à partir de la requête. Et enfin, il y aura notre tableau AT, et c'est aussi un identifiant d'objet et à l'intérieur de la chaîne. Donc ennuyeux le D. Nous le savons déjà, nous pouvons simplement le prendre ici auprès du facteur et ils le mettront ici. Mais notre utilisateur AT, nous pouvons vérifier à l'intérieur de notre backend. Comme vous pouvez le voir ici, j'ai toujours ce journal de console avec notre utilisateur. Et voici le D de mon utilisateur avec lequel je suis enfermé. Ici, dans notre identifiant utilisateur, je vais coller le hachage de mon utilisateur. Appuyons sur Entrée. Et comme vous pouvez le voir où en est inséré un. Nous pouvons maintenant vérifier si c'est correct. Donc, db dot columns, dot find et juste des crochets ronds. Comme vous pouvez le constater, voici notre réponse. Voyons maintenant dans Postman, si cela fonctionne, je clique ici envoyer à nouveau, et nous entrons dans le tableau, un seul objet. Voici notre nom d'utilisateur et notre titre AD Boyd AD, ce qui signifie que nous avons créé avec succès notre modèle de colonne et la première demande pour obtenir toutes les colonnes pour cette liaison spécifique. 32. Créer une colonne avec des websockets: Dans la vidéo précédente, nous avons créé avec succès une méthode pour obtenir une liste de nos colonnes pour le tableau. Dans cette vidéo, nous allons nous concentrer sur la partie back-end de la création de notre chronique. Et nous ne le ferons pas de la manière habituelle car nous n'utiliserons pas ici HTTP. Nous allons le créer avec socket en devons-nous créer des colonnes avec socket ? Parce qu'en fait c'est le cas où Woburn avertit toutes les personnes qui consultent notre forum actuel de la création de la nouvelle colonne. Dans ce cas, tous les utilisateurs avec ce tableau ouvert unique verront directement notre partie nucléée. Alors, comment devons-nous faire cela ? Et nous commençons ici à l'intérieur d'un serveur source. En fait, ils savaient déjà comment nous faisons les choses. Nous avons ici votre propre connexion et voici notre prise. Ici, nous devons réfléchir dans votre prise. Pourquoi est-ce que c'est ? Parce qu'en fait, nous allons déclencher, créer suffisamment de colonne sur l'un des clients, ce qui signifie en fait à l'intérieur de l'application Angular. Dans la vidéo suivante, nous allons créer un pod frontal avec le formulaire pour créer une colonne. Ensuite, nous émettrons un événement pour notre socket IO. C'est pourquoi nous devons souscrire à cela au milieu. Notre première étape sera de créer ici un nouvel événement. Et en fait, ici, je veux créer trois événements pendant ce temps, parce que nous avons une opération asynchrone, nous commençons à créer une colonne, puis nous avons du succès et de l'échec. Et ils ont dit que nous ne pouvions pas vraiment obtenir d'erreurs à partir de l'E/S du socket. C'est pourquoi il est tout à fait logique d'organiser tous nos événements comme Start success and failure. Et dans le cas d'une adhésion au conseil d'administration, nous n'en avons pas besoin. Nous avons juste besoin d'un seul événement parce que ce n'est pas une opération synchrone avec succès ici, mais nous l'avons avec créer une autre colonne. C'est ici, appelons-le grade des colonnes. Et c'est une chaîne, et nous pouvons la nommer colonnes deux-points, puis la créer. Vous pouvez voir que j'utilise la même notation que ici en haut, nous avons une entité et elle est au pluriel, et puis notre verbe, ce que nous faisons maintenant ici nous pouvons copier-coller cette ligne deux fois parce que nous devons créer ici, les colonnes créent le succès et les colonnes créent l'échec. Ici sur la droite, nous aurons les colonnes créer un succès avec CamelCase et ici la colonne créer un échec. Nos événements sont donc prêts et nous pouvons maintenant ouvrir le sac de nos niveaux de serveurs. Et ici, nous voulons écrire un socket de plus. Donc ici, nous voulons réagir sur les événements de socket maintenant qu'ils ne le font pas. Et ici, nous avons la note des colonnes, et il y a un deuxième paramètre avec lequel nous obtenons des données avec lesquelles nous ne nous soucions même pas de ces données. Maintenant, à l'intérieur, nous voulons utiliser nos colonnes de contrôle et nous l'avons également créé, mais nous n'avions aucune information sur les sockets à l'intérieur. C'est ici que nous voulons créer une nouvelle méthode appelée Create column. Et nous passons exactement la même chose que nous avons fait ici à l'intérieur du live board, par exemple, c'est une donnée commune de votre socket coma, dans ce cas, dans tous les endroits où le code et tous les paramètres sont écrits dans de la même façon. C'est pourquoi il est plus facile de comprendre notre application. Il est maintenant temps de créer cette section dans le contrôleur. C'est ici que nous allons revenir dans les colonnes de nos contrôleurs. Ici, nous avons des colonnes. Et en fait, écrivons ici à partir de zéro notre nouvelle méthode. Nous avons donc ici notre constante et c'est créer une colonne. Et c'est une fonction asynchrone et à l'intérieur de laquelle obtient exactement tout ce que nous avions précédemment. Donc tout d'abord, c'est un fil et c'est du sérum. Deuxièmement, nous avons ici notre socket, le socket, et le dernier est data. La question est donc quelles données obtiendrons-nous pour créer une colonne ? Nous avons besoin de deux choses. Tout d'abord et le nom de la colonne. Et deuxièmement, notre carte d'identité. Ce sont les informations que nous avons déjà écrites dans notre modèle. C'est pourquoi nous avons ici le corps D et c'est une chaîne. Et deuxièmement, nous avons ici le titre. C'est également une chaîne. Et juste pour vous rappeler au moment où vous êtes nos deux entrées ici, socket, vous devez savoir comment l'entrer depuis l' interface de type socket, pas depuis le socket IO car nous devons utiliser une propriété utilisateur dans cette interface. Et maintenant, à l'intérieur, nous avons try-catch, comme toujours, parce que nous faisons ici une opération asynchrone et à l'intérieur de la cage, ce que nous voulons faire n'a pas accès au suivant, mais nous pouvons émettre quelque chose que vous, par exemple, ici je veux écrire socket Datta meet et nous sommes lancés à l'intérieur de nos événements de socket E et M point, et voici l'échec, donc les colonnes créent un échec. Et deuxièmement, je veux donner un message en retour. Mais le problème principal est que cette Sarah est inconnue et c'est tout à fait normal parce que nous sommes à l'intérieur, nous ne pouvons pas savoir ce qu'est Sarah. C'est pourquoi si nous avons besoin de lire un message d'erreur, nous devons essayer quelque chose comme ça. Nous voulons donc lire notre message d'erreur et vérifier que notre flèche doit être une instance d'une ère. Dans ce cas, nous pouvons lire ici le message d'erreur. Et dans un autre cas, nous voulons simplement stringifier notre erreur ici en tant que deuxième paramètre, nous pouvons fournir un aperçu de notre message d'erreur, qui sera une chaîne. Dans ce cas, il s'agit du meilleur parent possible et dites TypeScript. Vous pouvez travailler avec une erreur inconnue dans catch. Mais voici le problème. Nous écrirons cette seule ligne dans chaque action lorsque nous recevrons une erreur et que nous voulons lire un message et nous l'utiliserons dans chaque image à l'intérieur de catch. C'est pourquoi je souhaite déplacer ce code pour l'aider. Et nous n'avons pas encore nos assistants. C'est pourquoi Insights Source. Créons des helpers point ds et sauvegardons cette méthode à l'intérieur. Ici, je peux créer une nouvelle méthode qui est d'obtenir un message d'erreur. Et nous obtenons ici notre erreur et elle est inconnue. C'est exactement ce que nous obtenons dans le catch butt back. Nous voulons obtenir une ficelle. Maintenant, je peux copier-coller complètement cette ligne et la coller ici. Vous n'avez pas besoin d'un message constant ici. Nous pouvons simplement renvoyer cette seule ligne. Comme vous pouvez le voir, c'est comme ça que ça ressemble. Nous obtenons ici une erreur inconnue, où une instance d'erreur de poulet et un message d'erreur bien écrit ou une chaîne de caractères. Et maintenant, à l'intérieur de notre escalier à colonnes, nous pouvons importer cette méthode. C'est pourquoi nous pouvons ici déstructurer, obtenir un message d'erreur et cela provient de nos assistants. Et maintenant, au lieu de cette ligne, nous pouvons écrire ici, obtenir un message d'erreur et ont été fournis à l'intérieur de notre ère. Et maintenant, cet assistant est super utilisable rapidement. Maintenant, nous devons écrire notre code dans Tribe. Donc tout d'abord, nous devons vérifier si Burlington ou non. Nous le faisons uniquement pour TypeScript parce qu'ils étaient bloqués ici à cause des IOU et notre intergiciel que nous avons construit précédemment. Mais ici, nous devons vérifier si put n'a pas d'utilisateur point socket. Et juste pour vous rappeler que cette interface de socket doit être notre interface et non pas de socket ion. Ici, à l'intérieur, nous pouvons émettre exactement la même chose. Voici donc la prise et la viande et ont été fournis à l'intérieur d'une prise. colonnes ENM d'événements créent un échec. Ici, à l'intérieur, nous pouvons simplement écrire la chaîne que l'utilisateur n'est pas autorisé. Donc, ce que fait cette ligne, nous envoyons un message à notre socket, ce qui signifie que nous avons un client et que ce client envoie un message, veuillez créer une colonne. Et puis soit ici à l'intérieur de la cage, ici à l'intérieur du CIF n' émettra qu'à un seul client qui nous envoie un message, ce message en retour. Et ce client peut écouter ce message et faire quelque chose en conséquence. Et après notre rencontre, nous pouvons simplement appeler ici un retour sans vouloir faire quoi que ce soit. Mais si nous avons un utilisateur socket, nous pouvons créer notre colonne. Essayons donc d'avoir une nouvelle colonne et pour la créer, nous devons utiliser un nouveau modèle de colonne. En fait, le monde du modèle de colonne avec l'inverse ici en haut. Nous pouvons donc l'utiliser ici. Donc pour créer une colonne, le modèle, nous devons fournir un aperçu, tout d' abord, un titre et c'est le titre du point de données. Deuxièmement, nous voulons fournir ici ID du tableau et c'est le tableau à points thêta AT. Voici toutes les informations de notre événement. Enfin et surtout, notre nom d'utilisateur. Il s'agit d'une inflammation due à l'ID de point utilisateur socket point. Nous avons donc créé avec succès un nouveau numéro de colonne, nous devons l'enregistrer dans la base de données. C'est par ici. Revenons à notre chronique sauvegardée car nous voulons également arriver ici NAD. Et nous attendons notre nouvelle colonne qui a été créée dot save. Nous attendons de l'enregistrer dans la base de données. Et après cela, nous voulons envoyer ces informations non seulement à notre socket. Nous voulons informer toutes les personnes, tous nos clients qui sont abonnés à notre forum. qui signifie en fait que nous envoyons ce message, pas seulement une socket vectorielle, nous envoyons ce message à un grand nombre de personnes. Et nous pouvons écrire ce code avec socket ici comme ceci. Donc, ce n'est pas le point deux et k à l'intérieur, nous fournissons le point de données AD. Et juste pour vous rappeler ici avant l'intérieur des forums où nous avons écrit du code de jointure avec John Boyd, écrit ici, socket join, data, port ID. Ici. Nous avons maintenant une chambre avec un D de notre pension. Et maintenant, nous pouvons rencontrer quelques données pour tous les utilisateurs qui se trouvent dans cette pièce avec I2. Voici notre tableau de données AT point m meet et ont été fournis à l'intérieur de nos événements socket ENM, et dans ce cas, ce sera un succès. C'est la colonne y qui crée le succès. Ici, nous voulons également fournir toutes les informations de notre colonne enregistrée. Et en fait, c'est la même chose que l'utilisation de HTTP, mais ces informations seront propagées simultanément à tous nos utilisateurs s' ils sont abonnés à ce forum spécifique. Maintenant, ici, sans aucune logique client difficile, je veux tester que cela fonctionne. C'est ici, par exemple, après notre i2, je veux écrire une colonne enregistrée dans le journal de la console afin que nous puissions vérifier si nous venons ici. Maintenant, après cela, je veux sauter dans source de nos clients, l'application, le tableau, composants, le HTML du tableau ici, je veux juste pour tester pour créer un bouton a été cliqué. Nous allons donc cliquer sur le bouton, et nous avons ici une fonction de test. Maintenant, lorsque nous cliquons sur le bouton, je veux participer à cet événement. C'est ainsi que nous avons notre fonction de test et à l'intérieur je veux écrire ce point de service de socket et de viande et ont été fournis à l'intérieur de notre événement. Et dans notre cas, il s'agit de columns create et il y a un second paramètre que nous devons fournir ici un objet avec pour le thé, qui sera cet identifiant de tableau. Et deuxièmement, le titre, par exemple, pour cette seule ligne, doit indiquer à notre backend que nous voulons créer cette colonne spécifique pour cette partie. Nous pouvons maintenant passer au backend et vérifier s'il fonctionne. Comme vous pouvez le constater, nous n' avons aucune erreur dans l'API. Ouvrons maintenant un navigateur et rechargeons la page. Et nous sommes ici sur notre page de tableau unique. Ici, il y a un bouton. En fait, j'ai oublié d' écrire le texte à l'intérieur du bouton. Alors écrivons ici un test afin que nous puissions au moins voir un bouton puis cliquer une fois sur le bouton. Maintenant, sautons à l'intérieur, nous a fait signe. Et en fait, nous recevons la colonne du dernier message enregistré, ce qui signifie que notre backend a reçu notre requête. Et cela se produit dans nos niveaux de service avec ce code où nous sommes abonnés à la note de colonne. Et puis du côté où Colin, notre contrôleur de colonnes crée une colonne et à l'intérieur de cette fonction, nous vérifions d' abord que nous sommes verrouillés. Ensuite, nous générons une nouvelle colonne avec les données que nous avons obtenues lors de l'événement. Ensuite, nous avons enregistré cette colonne et nous envoyons le message à tous nos utilisateurs abonnés à ce stade. Nous allons tester ce code en profondeur dans la prochaine vidéo. Mais comme vous pouvez le voir, voici ma colonne enregistrée constamment verrouillée. Et c'est exactement ce que nous voyons ici dans le journal de la console, ce qui signifie en fait que nous avons implémenté avec succès notre travail entre le socket sur le client et le socket sur le backend. Et en ce qui concerne la création de nos colonnes. 33. Obtenir des colonnes: Dans la vidéo précédente, nous avons réussi à préparer le backend substantif, créer un hors de notre colonne. Mais avant d'implémenter formulaire en ligne pour créer une colonne sur le client, nous devons au moins créer notre page de tableaux car pour instant elle est complètement vide et affiche également nos colonnes. C'est pourquoi la première chose que je souhaite faire est créer sur notre client l' interface pour le cône, car nous ne l'avons pas encore. C'est pourquoi nous devons défendre les ensembles, sources et les types partagés d'applications. Et ici nous devons créer une interface de colonne Ts. Et parlons de notre nouvelle interface, qui est une interface en colonne. Et à l'intérieur, tout d'abord, nous obtenons NAD, qui est une chaîne. Deuxièmement, au titre, qui est une chaîne. Et enfin je l'ai créé, qui est une chaîne. Et en fait, nous obtenons ici une tête mise à jour, qui est aussi une chaîne. L'étape suivante consiste à créer un service avec la méthode permettant d'obtenir toutes les colonnes de ce tableau spécifique. Et en fait, nous n'avons pas un tel service ici. Nous avons juste le service Boards, qui est un service sans état avec une méthode comme obtenir des tableaux, s'ennuyer, créer un tableau et ainsi de suite. Nous devons faire exactement la même chose. Mais pour les colonnes, c' est pourquoi je veux créer ici des colonnes, des points de service. Et comme vous pouvez le voir où dans AP partagé et non dans le tableau. Maintenant voici, tout d'abord, trait de biomasse injectable et une deuxième boucle pour exporter notre classe, qui sera notre service de colonnes. Maintenant à l'intérieur, nous devons vous présenter le client car nous ferons des demandes pour obtenir une liste de nos colonnes. C'est par ici. Tout d'abord, nous devons écrire un constructeur. Et voici un HTTP, qui est un client HTTP. Cela suffit. Nobu doit créer la méthode get columns, qui nous livrera sous la forme de colonnes depuis le backend et sur le backend nous avons déjà créé cette méthode. C'est ici que, tout d' abord, nous devons obtenir ici un identifiant de tableau. Il s'agit d'un identifiant unique permettant d'obtenir une liste de colonnes pour ce tableau spécifique. Et de retour, nous obtenons un tableau de nos colonnes, évidemment en tant qu'observable, parce que c'est toujours à partir de HTTP où se trouvent les observables, c'est là que l'interface des colonnes est observable et n' oubliez pas qu'il s'agit d'un tableau. Maintenant, à l'intérieur, nous faisons exactement la même chose que nous l'avons fait à bord. Donc, si vous ne voulez pas tout retaper, vous pouvez simplement copier-coller, par exemple, vous ennuyer, et vous êtes prêt à partir. Le code est très similaire. Donc ici tout d'abord, nous voulons créer une URL, et ici nous voulons fusionner tout d'abord, notre barre oblique URL de l'API DOD de notre environnement. Ici, nous avons nos tableaux slash n. Ici, nous voulons injecter des colonnes slash ID de tableau. Et après cela, il suffit de faire une requête HTTP GET. C'est pourquoi je veux renvoyer ce http.get et nous devons le fournir là où obtenir notre tableau d' interface de colonne. Et ici, nous fournissons notre URL. Et avec ce code, nous obtiendrons nos colonnes pour un tableau spécifique. Il est maintenant temps d'utiliser le service intégré à notre composant. Mais pour cela, nous devons sauter à l'intérieur notre app board, board molecule. Et l'entrée ici à l'intérieur des fournisseurs se trouve dans votre service et ce sera notre service de colonnes. Maintenant, nous pouvons sauter à l'intérieur des composants, de la carte, du composant de la carte et récupérer ces données ici. Maintenant, dans nos données de récupération, nous voulons récupérer nos colonnes. Mais pour ce constructeur interne, nous devons injecter ce service. Et c'était le service de colonnes, qui est le service de colonnes que nous venons de créer. Maintenant, nous pouvons sauter dans nos données de récupération et utiliser ici les colonnes get du service this.com. C'est exactement la méthode que nous venons de créer. Et ici, à l'intérieur, nous fournissons maintenant, à ce stade, nous avons déjà cette information. Mais ici, nous voulons faire exactement la même chose, mais nous ne voulons pas enregistrer ces colonnes directement ici dans le composant. Nous avons déjà créé notre service de conseil d'administration pour cela. À l'intérieur, nous pouvons enregistrer toutes ces informations. C'est pourquoi nous pouvons écrire ici, Abonnez-vous et nous récupérons nos chroniques. Et ce que nous voulons faire avec les colonnes dont nous avons besoin ici dans votre méthode, ce service de carte, le DOD, par exemple, définit des colonnes. Et à l'intérieur, nous allons lancer notre liste de colonnes. Et maintenant, nous avons juste besoin d' implémenter cette méthode ensemble de colonnes. C'est ici que nous allons ouvrir Boards Services, notre service conseil d'administration. Et nous faisons exactement la même chose que nous l'avons fait ici. Nous avons dit « bord ». Voici donc des colonnes définies. Nous obtenons notre tableau de colonnes, qui est un tableau d' interface de colonnes. Ici, nous avons un grand vide et nous avons besoin d'un nouveau flux de données. C'est ici que je peux copier, coller notre flux de boss et le nommer flux de colonnes. Dans ce cas, chaque endroit de notre application, si nous utilisons ce forum, peut s'abonner et obtenir la liste des colonnes que nous avons actuellement. Et en fait, ce sera un sujet de comportement du tableau d' interface de colonne. Et nous n'avons pas besoin de fournir ici maintenant car par défaut, nous pouvons simplement fournir ici un tableau vide. Et maintenant, dans notre méthode set columns, nous pouvons simplement appeler ce point columns point suivant. Et nous fournissons des informations sur les colonnes qui ont été préchargées. Revenons maintenant à notre composant et arrêtons ce flux. C'est pourquoi ici, en haut, nous avons déjà ce tableau, dollar, qui est un flux. Et maintenant nous devons créer des colonnes. Dollar, qui est une chaîne pour nos colonnes, et c'est un observable pour le tableau d'interface de colonne. Et maintenant, nous pouvons écrire directement après ce point, ces colonnes de points. Et ici, nous utilisons ce point de service de carte. Et voici nos chroniques. Nous n'avons pas besoin ici d'un filtre booléen car il s' agit simplement d'un tableau. Il est vide ou plus ancien, le champ avec nos colonnes, l'idée principale est que nous n'avons pas de flux et que nous pouvons les utiliser directement dans le code HTML. Mais ici, je veux vous montrer une variante encore meilleure, car en fait, nous avons déjà deux flux plus tard. Nous en aurons une de plus pour les tâches, ce qui signifie que nous avons trois sources de données différentes et que nous voulons afficher notre page lorsque toutes les sources de données seront remplies. C'est pourquoi nous pouvons réécrire ce code un peu différemment. Nous pouvons écrire ici ces données par points avec plus grand. Et c'est une notation spéciale que j'utilise. Il s'agit d'une variante très populaire, vous permet de gérer vos données pour votre composant. En général, vous avez une page contenant de nombreuses sources de données et vous souhaitez les combiner en un seul flux. Ensuite, vous ne pouvez exécuter la page entière que lorsque vous remplissez tous les flux. Et nous remplirons le flux avec les données lorsque nous vous intégrerons dans vos données. C'est là que je veux écrire les derniers combinés et ont été fournis dans un tableau de streams et de festivals ici nous pouvons copier cette ligne avec le flux de planches et simplement la coller ici. Et après cela, nous prenons les colonnes de ce service de port et nous les collons également ici. Évidemment, nous devons directement ici virgule, car il s'agit de deux flux différents. L'idée principale est de combiner les flux. Et ici, nous voulons faire cela avec pipe et map, parce qu'en fait nous obtenons ceci sous forme tableau et nous voulons un objet ici, c'est y. Ici, à l'intérieur de map, nous pouvons directement la structure, tout d' abord, un tableau et ici l'ordre est important. Deuxièmement, nous avons ici des colonnes. Ensuite, nous voulons renvoyer les données dans un autre format en tant qu'objet. Et voilà que nous revenons tout d'abord à bord et ensuite, nos colonnes. Alors, qu'est-ce que ce truc fait pour nous ? Nous obtenons donc ici des données, ce qui signifie que nous n'avons pas besoin de deux flux ici. Nous pouvons maintenant créer ici et utiliser des données de flux. Et voici les données complètes de notre carte de composants. Nous disons ici qu'il s'agit d'un observable de l'objet. Et tout d'abord, nous avons ici un tableau, qui est une interface de tableau. Et deuxièmement, nous obtenons ici nos colonnes, qui sont un tableau d' interface de colonnes. Et maintenant nous pouvons supprimer le dollar du tableau et le dollar des colonnes, nous n'en avons plus besoin. Le point principal est que notre logique était de récupérer des données et ces données étaient définies à l'intérieur du service de mots. s'agit simplement d'une combinaison de deux flux pour cartographier ces données pour notre composant. La question est donc de savoir comment nous allons utiliser ces données dans notre code HTML. C'est là que je veux tout supprimer et supprimer également ici le test en bas. Nous n'en avons pas besoin du tout. Maintenant, je veux écrire un marqueur pour notre page. Tout d'abord, nous voulons afficher la barre supérieure de notre application. Il y est déjà. Après ça, dirigeons le tableau. Nous aurons donc ici un tableau de classe div, et voici une astuce que nous utilisons ici dans GE, mais nous fournissons des informations sur le dollar des données, c'est notre dernière synchronisation combinée en tant que données, et c'est tout. L'idée principale est que nous ne travaillons plus avec les flux internes. Nous utilisons les données en tant que propriété locale. Et cela créera pour nous une propriété locale juste à l'intérieur de cette div. Maintenant, tout d'abord, nous voulons créer notre conteneur d'en-tête de tableau. C'est là que se trouve le conteneur d'en-tête de tableau de classe div. Et fermons cette division. Mais nous allons lancer le dernier Insight est un formulaire en ligne pour mettre à jour notre tableau. C'est ici que je vais simplement écrire un lien de formulaire en ligne, afin que nous ne l'oubliions pas. Après cela, nous allons rendre notre div avec les colonnes de classe et à l'intérieur je veux faire et G pour la boucle pour chaque colonne. C'est y ici, class column puis G4. Et ici, nous pouvons écrire la colonne principale des colonnes de points de données. Comme vous pouvez le voir ici , nous n'avons pas besoin canaux asynchrones car nous résolvons notre propriété data et nous récupérons ces données à l'intérieur, et ces données seront automatiquement mises à jour si le Le flux de colonnes est également mis à jour. Ici, fermons notre colonne et ensuite nous voulons afficher le titre de la colonne de notre classe div. Maintenant, à l'intérieur, nous allons encore nous amuser. C'est ici sous forme de ligne pour la mise à jour de la colonne. Et après cette colonne, nous en aurons une autre sous forme de ligne. Nous aurons donc ici un formulaire en ligne pour créer une colonne. Il s'agit donc de notre balisage de base. En fait, nous n'avons pas beaucoup rendu ici, mais au moins nous affichons ici en colonnes, ce que nous obtenons à partir de nos données. Allons voir si ça fonctionne. Je vais accéder à la console et une erreur s'affiche. Epitope n'est pas disponible pour nous, nous devons donc l'importer dans notre module de carte. Donc, ici, dans les entrées, nous pouvons simplement ajouter un module de barre supérieure. Comme vous pouvez le voir maintenant, je n'ai pas d'erreur, alors rechargeons la page. En fait, elle est déjà là. Nous pouvons voir notre belle barre supérieure. Voici quelques espaces réservés et ce sont déjà nos colonnes. Et oui, nous n'avons pas fait de tendance au titre juste pour les tests, nous pouvons le faire très rapidement. Revenons à l'intérieur de notre tableau, et voici le titre de notre chronique. Donc au lieu d'un formulaire en ligne pour mettre à jour la colonne, nous pouvons simplement afficher ici le titre du point de la colonne. Je recharge la page ici, nous obtenons la première colonne et le formulaire. Il s'agit exactement de ces deux colonnes qui ont déjà été créées. Tout d'abord, dans la console de MongoDB. Et deuxièmement, dans la dernière conférence où nous avons créé avec l' événement, notre nouvelle chronique. Et ils vous recommandent vivement d'utiliser les dernières données combinées pour combiner de telles données dans toutes vos applications. Cela est extrêmement efficace et évolutif. 34. Créer un formulaire de colonne: Dans les vidéos précédentes, nous avons réussi les colonnes d'ID d'événement pour notre tableau et nous pouvons maintenant continuer avec Créer un formulaire pour notre colonne. Et juste pour vous rappeler, sur le back-end, nous avons déjà implémenté toute la logique pour créer une colonne en utilisant socket a yarn, et maintenant nous n'avons plus qu'à l' implémenter sur le client. Et tout d'abord, je voudrais commencer par un peu de HTML. Et en fait, nous sommes déjà préparés formulaire en ligne pour créer une colonne. C'est exactement là que nous voulons utiliser notre entreprise intérieure et nous l'avons déjà. Nous avons juste besoin de fournir des informations correctes. Fermons ici notre formulaire intérieur au lieu du message. Et maintenant, que devons-nous donner ici ? Tout d'abord, nous devons définir une classe. Et juste pour vous rappeler il s'agit d'une classe parente avec des styles que nous remplaçons pour notre formulaire en ligne Dans ce cas précis, notre classe sera un formulaire de création de colonne. Ensuite, nous voulons définir un texte par défaut. C'est ce que nous verrons par défaut, et c'est le texte, au moins ici, nous devons rendre un bouton pour soumettre ce formulaire. C'est pourquoi nous pouvons écrire ici que nous voulons sa propriété button. Et il est vrai qu'après cela, nous voulons fournir notre texte de bouton, et ce texte sera au moins. Nous voulons donc modifier notre espace réservé par défaut. C'est pourquoi nous pouvons écrire ici un espace réservé en entrée, et ici nous pouvons écrire un nom de colonne d' ajout. Et last but not least est bien sûr ici gérer submit. Et il s'agit d'un rappel où nous obtiendrons le titre de notre colonne que nous voulons créer. Donc, ici, je veux ajouter une nouvelle méthode qui s'appelle Créer une colonne, puis un site où obtenir notre titre via un événement. Et la dernière chose que nous devons faire, nous devons créer cette fonction de colonne de notes dans notre tableau. Ici, nous obtiendrons un titre en tant que souche de notre forum intérieur. Et voici vide à l'intérieur et ils veulent juste se connecter à la console ici, créer une colonne et voir un titre. Rechargeons la page et voyons comment elle fonctionne. Et en fait, nous recevons un message. Le formulaire en ligne n'est pas un élément connu de notre module. C'est là que nous devons revenir à l'intérieur de notre module de carte. Et ici, dans les entrées, nous voulons entrer notre module de formulaire en ligne. Comme vous pouvez le voir dans le navigateur , nous avons maintenant un nouveau bouton. Nous pouvons au moins cliquer sur ce bouton. Et nous voyons maintenant notre entrée qui est stylisée et notre bouton au moins. Et en fait, si vous vous demandez où viennent tous les styles, comme il vous l'a dit précédemment, nous stylons tous les éléments de formulaire en ligne avec notre cas parent et dynamique ici il a été créé sous forme de colonne. C'est ici que vous pouvez voir les styles créer un formulaire de colonne, puis la modification du conteneur de formulaire en ligne. C'est pourquoi notre formulaire est si partageable. Et maintenant vérifions-nous que nous pouvons ajouter une nouvelle colonne. Ici, je tape quelque chose, je frappe au moins. Et à l'intérieur de la console, nous pouvons voir notre colonne de crédit et notre titre de la colonne, ce qui signifie que maintenant nous pouvons émettre un événement pour notre socket, pour notre back-end, mais je veux vraiment le faire mieux. Je souhaite préciser notre contribution. C'est pourquoi ici, dans de tels types partagés, nous avons tableau et colonne, mais je veux créer une entrée. Qu'est-ce que cela signifie ? Tout comme nous avions à l'intérieur de nos types de hiboux, nous avions ici une demande de connexion et une demande enregistrée, qui est essentiellement un corps de notre demande. En général, nous voulons soit la nommer demande, soit vous voulez une entrée de mot. C'est ainsi que dans les types partagés, nous pouvons créer notre entrée de colonne ou vous pouvez également la nommer demande de colonne. Disons donc qu'il s' agit de l'interface d'entrée de colonne Ts, et que ce sont les données que nous devons fournir pour le back-end afin d'envoyer notre événement. Et ici nous voulons le spécifier dans une interface. Donc, dans l'ensemble de l'application, nous saurons comment nous créons votre colonne. C'est ici, appelons-le Interface d'entrée de colonne et les principales différences, ce n'est pas calmement l'interface, c'est une entrée. C'est pourquoi c'est un corps. Et voici notre titre, qui est une chaîne. C'est ce que nous devons fournir pour notre back-end. Et deuxièmement, un ID de tableau, qui est également une chaîne. Et maintenant, nous pouvons utiliser cette interface d'entrée dans notre composant de carte. Donc ici, au lieu du journal de la console, nous pouvons créer notre entrée de colonne et nous savons que le type est ici, entrée de colonne et ici nous devons maintenant fournir toutes les valeurs possibles. Dans notre cas, il ne s'agit que d'un titre. Et deuxièmement, le conseil, l'AD et le corps. Avons-nous à l'intérieur de ces ID de port de point ? Et comme vous pouvez le voir ici, nous avons un type correct, et maintenant nous devons le lancer dans notre socket IO. C'est ainsi que cette colonne service point crée une colonne. Et en fait, nous n' avons pas de méthode create column. C'est pourquoi nous devons le créer. Je souhaite accéder à nos colonnes sur les services partagés. Et ici, nous avons juste reçu la colonne. Ici, nous voulons créer un cône. Mais cette méthode ne fera rien avec ce GTP. Il utilisera notre socket IO, et c'est tout à fait normal, alors que le dernier, toutes ces méthodes dans nos services et nous appelons simplement nos services. C'est ici, créons une méthode de création de colonne et nous obtenons ici notre entrée de colonne. C'est vraiment sympa qu'on ait créé une interface ici. C'est là que nous pouvons le réutiliser et ce sera notre interface de saisie de colonne et nous serons annulés. Et juste pour vous le rappeler ici avec HTTP, récupérez toujours un observable. Mais en couche socket, cela ne fonctionnera pas comme ça. Avec socket, vous disposez d'un flux de données unique. C'est ici que la seule chose que nous voulons faire est de déclencher notre émission. Mais pour cela, nous devons injecter ici notre service de socket, et c'est notre service de socket que nous avons créé et nous pouvons maintenant l' utiliser dans cette méthode. Donc ce point, point de service socket et rencontre, et nous devons fournir ici un nom. Voyons d'abord si nous avons un tel nom dans nos types partagés, nous avons des événements de socket, et ici nous n'avons rien. Et en fait, nous pouvons ouvrir à l'intérieur du back-end cette énumération parce que les types internes ont également des événements de socket. Et ici, nous avons la création de colonne, succès et l'échec, et c'est exactement la même chose. C'est pourquoi je vais le copier-coller complètement. Et maintenant nous pouvons l'utiliser ici au lieu du nom de l'événement, nous pouvons écrire ici les événements de socket ENM ne se terminent pas ici. Nous voulons déclencher la notation de colonne, puis l'enregistrer en tant que paramètre. Nous voulons donner notre entrée dans notre colonne. Cela nous donne un avantage supplémentaire d'écrire notre code avec socket dans le service. Nous isolons ce code à l'intérieur d'un service. C'est pourquoi notre composant ne sait pas que nous utilisons ici socket layer par exemple, nous appelons simplement ici column service dot grade column, et nous sommes donnés dans notre entrée de colonne. Vérifions si cela fonctionne ici, nous pouvons essayer de créer une nouvelle colonne. Je clique sur Ajouter. Et maintenant, à l'intérieur de notre colonne appelée, nous pouvons voir la colonne sauvegardée. Et après avoir rechargé la page, vous pouvez voir ici que le cône est créé, ce qui signifie essentiellement qu'il fonctionne, mais nous ne mettons pas à jour notre page à la volée. Et évidemment, nous voulons mettre à jour cette page, d' abord pour notre utilisateur actuel, ensuite pour tous les autres utilisateurs également. Mais pour cela, nous devons améliorer notre service de socket. Pourquoi est-ce que c'est ? Parce qu'en fait, ce que nous devons faire à l'intérieur, nous devons souscrire de manière confortable à notre succès. Et juste pour vous rappeler, à l'intérieur de notre backend, ici, dans les colonnes du contrôleur, nous avons une rencontre et en fait sont vos deux amis qui enverront ce message à tous les utilisateurs abonnés dans cette pièce spécifique. C'est pourquoi nous devons agir. Nous voulons souscrire à cet événement spécifique, qui sera un succès de création de colonne, mais nous voulons le faire de manière inefficace. Et puis ladite couche de socket, elle n'est pas efficace. Nous voulons le faire de manière angulaire. C'est pourquoi nous devons ouvrir à l'intérieur notre service partagé, le service socket. Et ici, je veux créer après avoir rencontré une autre méthode et elle s' appelle Listen here. Tout d'abord, je veux l'écrire dedans. Et si vous ne savez pas comment utiliser les génériques, l'idée principale ici est que nous pouvons fournir importe quel type de données pour la liaison à l'intérieur de l'écoute, et ce sera ce que nous obtiendrons de la socket IO. Ici, nous fournissons t et ici le nom de l'événement sera une chaîne. Et de retour, je veux être observable. Et c'est essentiellement l'idée. Cette méthode nous redonnera un observable. Il n'est pas confortable de travailler avec Socket Layer à l'intérieur angulaire. C'est pourquoi nous voulons le convertir en observable ici. Tout d'abord, une bonne pour vérifier si nous avons des E/S de socket ou non. C'est pourquoi je peux copier cette condition ici, car si nous n'avons pas de socket et que vous êtes connecté, nous ne devrions rien faire. Après ça. Je veux retourner un nouvel observable. Et ici, à l'intérieur, nous devons fournir une fonction. Et ici, nous n'avons qu' un seul argument qui est un abonné. Et maintenant, à l'intérieur, on peut le sécher. Douille allumée. Ce n'est qu'un simple code de socket ion. Nous avons ici notre nom d'événement, ce qui signifie que nous souscrivons sur le client à ce nom d'événement que nous avons passé en paramètre. Voici notre deuxième paramètre : nous obtenons des données et ce que nous voulons faire, nous voulons émettre notre point d'abonné ensuite avec les données. Alors, que fait ce code ? Tout d'abord, ici nous devons essayer ceci et ceci, vous pouvez voir que nous obtenons une erreur. L'objet est peut-être indéfini. Et en fait c'est un problème de TypeScript parce qu'ici il ne peut pas comprendre que ce code avec Eve le couvre indéfini. Ce que nous pouvons faire à la place, nous pouvons écrire ici avec socket égal au socket. Et après cela, nous couvrons cette prise ici. Et puis au lieu de ce circuit en utilisant juste socket et dans ce cas quand ne pas l'obtenir dans le théorème TypeScript. Quelle est donc l'idée de cette fonction ? Nous allons l'utiliser comme ça. Voici donc l'écoute. Ensuite, nous fournissons un type de données, par exemple une chaîne. Et après cela, retirez et événement, par exemple, la création de colonne ou la colonne crée le succès. Dans notre cas, cette seule ligne, elle nous redonnera un observable. C'est pourquoi après cela, nous pouvons écrire, par exemple, abonner et ici, et nous obtiendrons ici nos données. Vous allez voir comment nous allons utiliser cette fonction dans un instant. L'idée principale est que cette fonction créera rapidement et observable. Nous nous abonnerons auprès Socket Layer à ce nom d'événement spécifique. Et lorsque cet événement sera déclenché, nous mettrons simplement à jour notre observable. C'est une façon angulaire vraiment confortable de faire les choses avec Socket Layer. Essayons maintenant d' utiliser cette fonction. Je veux revenir en arrière et dire que notre composant de carte, et ici nous avons nos auditeurs initialisés. Et voici un endroit vraiment sympa pour écouter les événements. C'est pourquoi je veux écrire cette leçon point service point socket. Et ici, nous devons fournir le type car il est obligatoire. Et ici, nous ne fournirons pas cela. Nous récupérons l'interface de notre colonne. C'est ce que nous obtenons après la création de la colonne. Et voici le nom de notre événement et nous voulons nous abonner ici à Socrative se termine dans une colonne à points qui crée succès parce que nous attendons le succès. Et là, après cela, nous pouvons écrire, il suffit de vous abonner et nous allons entrer dans une chronique. Et ici, nous pouvons simplement enregistrer cette colonne sur la console. Donc encore une fois, ce que fait cette ligne, elle crée pour nous un nouvel observable et nous pouvons simplement l'utiliser comme observable. Plus important encore, à l'intérieur où droite et prise allumée. Nous attendons donc notre émission. Voyons maintenant si cela fonctionne ici, je veux créer une nouvelle colonne et j'appuie au moins sur. Et Viola, comme vous pouvez le voir à l'intérieur de la console, nous recevons notre chronique. Et en fait, c'est ce code avec l'événement de succès. Et ici, nous obtenons exactement notre colonne qui a été enregistrée dans base de données, car comme vous pouvez le voir, voici un 80 de nos colonnes enregistrées. Et maintenant nous pouvons faire quelque chose sur le client pour mettre à jour la boucle est beaucoup ambulatoire notre tableau, mais il n'est pas grand comme vous pouvez le voir ici. J'ai ouvert le même onglet pour le même utilisateur. Mais la différence est que le socket ici est différent parce que chaque fois que nous ouvrons un nouvel onglet, mais que nous établissons une nouvelle connexion avec un autre socket ion. C'est pourquoi nous essaierons d'ajouter une liste. Et je suis juste en train de taper ici, au moins nous obtenons ici cette colonne journal de console. Mais en fait, nous obtenons également cette colonne journal de console car il s'agit de deux onglets distincts, deux utilisateurs distincts, ce qui signifie en fait que si deux clients différents seront connectés et ouvrez ce tableau, ils recevront simultanément notre événement concernant la création d'une nouvelle colonne. Et c'est essentiellement la fonctionnalité de base que nous voulons réaliser à l'intérieur du socket ion. Nous devons maintenant modifier une liste de nos colonnes. Et en fait, c'est ici. Je veux écrire ce service de tableaux à points et faire attention ici, pas pauvre, n'est pas notre service sans état avec fonctions, mais notre service de tableau pour le client. Ici, nous devons créer une nouvelle méthode appelée Add Column. Et nous pouvons simplement jeter à l'intérieur de notre colonne, ce qui signifie essentiellement que notre composant ne connaît rien à la logique métier, comment travailler avec les colonnes de notre service de conseil d'administration le sait. C'est pourquoi ici nous devons sauter dans notre service de tableau et nous pouvons créer ici une nouvelle fonction appelée colonne ABC. Et ici, nous arrivons à votre colonne de type, interface de colonne et retour, nous sommes annulés parce que nous ne nous soucions pas du retour. Nous avons simplement besoin de mettre à jour notre flux. Et juste pour vous rappeler qu'en haut, nous avons un flux de nos chroniques. Et maintenant, nous devons le mettre à jour. C'est pourquoi ce que nous pouvons écrire ici nous voulons tout d' abord mettre à jour nos colonnes. C'est y. Créons ici des colonnes mises à jour de propriétés. Ici, nous devons d'abord diffuser ce que nous avons maintenant. Et voici ce flux de colonnes. Et ici, nous avons une fonction getValue, et elle va simplement lire la valeur de notre flux que nous avons actuellement. Et à la fin, nous devons écrire sur votre chronique. Ce sera donc notre nouveau tableau de colonnes mis à jour. Comme vous pouvez le constater, le type est correct. C'est un tableau de colonnes et d'interfaces, et maintenant nous pouvons simplement le mettre à jour avec ces colonnes ensuite. Et ici, nous ajoutons des colonnes mises à jour sur le site. Nous créons simplement dans votre tableau et nous l'écrirons dans notre flux. Allons voir si ça fonctionne. Je recharge la page. Ici, à la fin, nous avons au moins un bouton et en fait il a l'air cassé parce qu'il est zoomé. Maintenant, créons une nouvelle colonne. Je clique sur Modifier la liste. Et comme vous pouvez le voir directement ici, nous voyons notre nouvelle colonne, qui signifie en fait que ce code met à jour notre flux et que notre composant est abonné au flux ici en haut avec ceci combinés au plus tard, ces colonnes sont mises à jour. Ensuite, nous renverrons automatiquement ce composant. Encore une fois, comment cela fonctionne-t-il ? Tout d'abord, nous arrivons ici à notre entreprise intérieure. Et cette entreprise de l'intérieur des terres ne produit que le titre pour nous. Ensuite, nous allons créer cet objet avec le titre et Boyd AD et le lancer dans notre service de colonne. Voici notre rubrique sur les crédits. Ici, nous rencontrons notre événement et nous jetons dans nos données après ce back-end ait reçu cet événement crée pour nous la colonne et les moyens à tous les utilisateurs de cette salle, dans ce forum, le message que nous avons créé notre colonne avec succès. Et après cela, chaque client est abonné avec ce code depuis le début de cette colonne. Une belle réussite. Et quand cela arrive, nous arrivons ici, notre colonne de crédit, et nous sommes deux points ici, mais service d'ajouter une colonne. Et cela va essentiellement mettre à jour un flux avec les colonnes. Et notre composant sera arriéré sur tous nos clients. 35. Créer une tâche de base: Dans la vidéo précédente, nous avons terminé avec succès la création de nos colonnes. Dans cette vidéo, nous commençons à travailler sur des tâches. Et en fait, nous devons implémenter la partie back-end de la création des tâches et l'obtention d'une liste de tâches pour notre conseil d'administration. Et pensez en fait que c'est une bonne possibilité pour vous d'essayer de l' implémenter vous-même. Parce qu'en fait, vous avez déjà fait petites fissures dans ce projet. Et maintenant tu es prête à faire quelque chose de plus grand. Et en fait, obtenir une liste de tâches et créer une tâche est très similaire à nos colonnes, ce qui signifie que vous pouvez utiliser toute la logique à partir de là. Alors, que devez-vous faire si vous souhaitez l'implémenter vous-même ? Tout d'abord, nous parlons ici de fait signe. Nous devons donc créer une nouvelle interface pour notre tâche, puis la méthode du contrôleur modèle pour obtenir ces tâches pour les garçons et méthode insérer le contrôle pour créer une tâche. La question est la suivante : de quels domaines avons-nous besoin dans notre tâche ? Et en fait, ici, je veux juste écrire les champs dont nous avons besoin. Tout d'abord, il s'agit d'un titre de notre description de tâche qui n'est pas obligatoire. Il peut être vide, puis utiliser 3D afin que nous sachions qui a créé cet ID de colonne de tâche. Nous savons donc dans quelle colonne de notre tableau nous devons tendre cette tâche et les autres à bord AT. Dans ce cas, il nous sera plus facile d'obtenir toutes nos tâches par ID de tableau spécifique. Le back-end, vous avez besoin d'une interface et d'un modèle, puis enregistrez-vous dans votre API pour intégrer ces tâches au tableau. Et la méthode pour obtenir cette liste de tâches par planche déchue. Vous devez également créer une nouvelle méthode create dans notre contrôleur. Et ce sera une méthode avec socket yacht car nous voulons informer tous nos utilisateurs qui sont abonnés à ce forum spécifique de cette nouvelle tâche. Et si vous voulez continuer par vous-même, vous pouvez simplement mettre la vidéo en pause et l'essayer. Mais si tu veux juste suivre, faisons-le ensemble. Et tout cela est dit. Ce sera super similaire à nos colonnes. C'est pourquoi je vais beaucoup copier-coller. Tout d'abord, ici, je veux entrer dans les types de sources de notre serveur. Et ici, nous allons avoir notre test d'interface de colonne. Et en fait, nous pouvons le copier-coller complètement et simplement créer notre interface Task Ts. Ici, à l'intérieur du muscle, il est exactement comme le plan. Tout d'abord, nous avons créé notre titre lors de sa mise à jour. Nous l'avons toujours fait, voici notre nom d'utilisateur et le tableau AT c'est tout à fait correct. Mais nous avons également besoin ici de créer une dame de colonne. Dans ce cas, quand non, où que ce soit la maîtrise de la tâche spécifique. Et nous avons également besoin d'une description, mais ce n'est pas obligatoire. C'est pourquoi j'ai mis ici un point d'interrogation. Notre interface est donc correcte. Maintenant, changeons le document que nous devons créer ici document de tâche, qui étend le document et notre tâche que nous avons créée. Et comme vous pouvez le voir ici, j'ai oublié de renommer notre colonne en tâche. Passons maintenant à la création de notre modèle. Ici, les modèles intérieurs étaient déjà en colonne. Je vais aussi tout copier, coller et simplement le mettre dans notre nouveau fichier, qui est task point ds. Ici, il faut tout changer. Festival Nous avons ici un autre schéma de colonne, mais un schéma de tâches. Et ici, pas le document de colonne, mais notre document de travail que nous venons de créer ici en haut, je peux supprimer le document de colonne en toute sécurité. Nous avons ici notre titre. C'est obligatoire. C'est très bien. Après cela, je vais coller à nouveau le titre et le renommer en description, mais c'est facultatif. C'est là où cela n'est pas nécessaire ici. Nous avons également ici notre ID utilisateur, ID de tableau, et ici je veux mettre un nouvel ID de colonne. Et c'est également nécessaire à coup sûr. Et type est l'ID de l'objet. Ça a l'air très bien. Maintenant, en bas, nous devons fournir ici notre document de travail. Et voici une tâche, qui est un schéma de tâches. Notre modèle est complètement prêt. Nous devons maintenant créer une nouvelle API dans notre serveur. C'est Y. Revenons aux niveaux de serveur source de service. Nous avons ici nos appels d'API. Et en fait, notre nouvel appel d'API sera très similaire à ce code. Ici, nous obtenons des colonnes par ID de tableau spécifique. En fait, nous voulons obtenir toutes nos tâches pour un port spécifique. C'est pourquoi je vais copier, coller cette ligne, la coller ici, et simplement la renommer. Ce seront des planches à tarte slushy. Board est un paramètre dynamique, et ici nous avons nos tâches et ici nous aurons également besoin de notre middleware. Et ici, nous avons besoin d'un nouveau contrôleur, qui sera contrôleur de tâches, car à l'intérieur nous voulons gérer nos tâches. Et ici, la méthode obtiendra des tâches, et cette méthode doit renvoyer toutes les tâches pour ce tableau spécifique. Il est maintenant temps de créer un contrôleur. C'est pourquoi je vais sauter et dit contrôleurs. Et je veux copier-coller toutes les colonnes du fichier simplement parce que c'est plus facile à modifier et qu'il sera super similaire. Je le colle donc ici et je renomme deux tâches, point ds. Ici, nous avons deux méthodes, create column et get column. Et en fait, ici, nous pouvons simplement renommer les colonnes get pour obtenir des tâches. Et ici, nous laissons tout tel quel, demandez une réponse. Ensuite, c'est très bien. poulet pour l' utilisateur est bien ici. Reprogrammez, tout est génial. Maintenant, nous n'avons pas besoin d'utiliser le modèle de colonne, mais nous devons utiliser le modèle de tâche here. C'est là qu'en haut je vais entrer le modèle de tâche. Depuis la tâche des modèles. Nous pouvons maintenant changer notre modèle de colonne en modèle de tâche. Ici, nous trouvons par bordure différents paramètres de requête, ID de carte, et c'est exactement ce dont nous avons besoin et c'est pourquoi nous avons un corps dans notre schéma. Dans ce cas, il suffit d' une seule ligne de travail trouver toutes nos tâches pour ce tableau spécifique. Nous récupérons donc notre liste de tâches, et ici nous pouvons simplement les renvoyer à notre API. Et avec cela, notre action pour obtenir la liste des tâches est entièrement prête. Maintenant, changeons la colonne directement cette création. Et comme vous pouvez le voir ici, nous parlons d'E/S de socket, et ce sera également très similaire. Tout d'abord, nous avons ici une méthode create task où obtenir votre socket et vos données. De quoi avons-nous besoin pour obtenir des données privilégiées ? Tout d'abord, nous nous ennuyons ou nous nous ennuyons, car nous devons avertir tous les utilisateurs de ce forum spécifique. C'est très bien. Maintenant, nous avons ici la chaîne de titre, et le dernier ici est l'id de la colonne. Et l'id de la colonne est également une chaîne et des tâches obligatoires. Et vous pouvez dire ici que nous ne fournissons pas de description à l'intérieur. Votre total est correct dans créer, recompter, modifier la description, description que nous ne pouvons fournir que dans Update. C'est pourquoi c' est très bien. Donc, ce que nous faisons ici, nous voulons tout d'abord créer un échec pour nos tâches. Mais pour cela, nous devons d'abord mettre à jour nos événements de socket. C'est pourquoi je vais sauter dans de tels types de sources. Et ici, nous avons nos événements de socket, et ici nous avons déjà des colonnes notation et ils veulent copier-coller les trois actions. Ici, nous pouvons le renommer de colonnes en tâches create, et ici c'est tasks create, puis Tasks, great success and tasks create, failing our socket events is ready. Nous pouvons revenir à l'intérieur de nos tâches et changer ici les événements de socket en tâches pointillées, créer des tâches plus pâles et elles ne changeront pas directement ici notre capture, et ici nous pouvons simplement fournir des tâches point créer échec. Maintenant, mettons à jour une partie interne . Nous n'avons pas de modèle de colonne, mais de modèle de tâche, nous sommes déjà entrés. Ici, nous recevons un titre à partir des données. C'est très bien. ID du tableau. Et ici, l'utilisateur de socket est prêt. cela est tout à fait correct, mais nous devons également fournir ici alcalinité de la colonne de points de données peut être. Et après cela, nous n'enregistrons pas une nouvelle colonne, mais une nouvelle tâche. Ici. Renommons la nouvelle tâche. Et ici, nous pouvons simplement appeler new task dot save et nous récupérons la tâche enregistrée. Avec cette ligne, nous voulons informer tous nos utilisateurs que nous avons créé une nouvelle tâche. C'est ainsi que nous émettons cet événement et que ces tâches créent le succès. Et ici, nous voulons redonner la tâche de sauvegarde. Et ici, nous pouvons supprimer ce journal de console. Nous n'en avons plus besoin et nous avons entièrement créé notre méthode Create Task. Et la dernière chose que nous devons faire, nous devons nous abonner pour commencer à créer la tâche à partir du client. C'est pourquoi nous devons retourner à l'intérieur de notre sororité S. Et ici, en bas, nous avons la prise en main. En fait, nous pouvons copier coller des colonnes Créer et simplement les changer sur notre socket, même les tâches CNN point créent. Et là, nous obtenons nos données et nous avons simplement besoin d'appeler notre contrôleur de tâches create column. Et ici, vous ne serez pas créé de colonne, mais créez une tâche. Et comme vous pouvez le voir ici, nous n'avons pas importé nos tâches de contrôle. C'est pourquoi en haut, je veux copier coller le contrôleur de colonnes et le renommer en notre nouveau fichier, qui est le contrôleur de tâches. D'après les tâches des contrôleurs, il semble que nous avons tout implémenté. Passons maintenant à l'intérieur de la console. Comme vous pouvez le voir, nous n'avons aucune erreur lors la connexion à MongoDB. Api est à l'écoute. C'est pourquoi en fait je veux juste copier-coller le tableau . J'ouvre Postman ici et essaie d'obtenir notre liste de tâches. C'est donc des sports de barre oblique qu'un collage ces tâches de barre oblique ID et les cachées ici envoient. Et comme vous pouvez le voir, je reçois un tableau vide, ce qui est très bien car nous n'avons pas encore créé de tâches, ce qui signifie que notre backend est entièrement préparé. Et maintenant, nous pouvons commencer par implémenter le côté client. 36. Obtenir des tâches: Dans la vidéo précédente, nous avons terminé avec succès la préparation nos modèles de tâches et l'intégration des tâches en backend. Dans cette vidéo, nous devons faire exactement la même chose sur le client. Et je vous recommande vivement de le faire vous-même car vous avez déjà tellement de connaissances. Que devez-vous faire si vous voulez le faire vous-même ? Tout d'abord, vous devez sauter et ladite source de clients, application partagée. Et ici nous avons nos types, nous avons ici Boyd et Column, et maintenant nous devons créer une nouvelle interface pour notre tâche. Après cela, nous devons créer un nouveau service pour travailler avec des tâches, qu' elles aient des tableaux, des colonnes. Maintenant, nous avons besoin d'un nouveau serveur appelé service de tâches. Ici, boop obtiendra les tâches exactement de la même manière, comme si nous obtenions ici des colonnes pour notre tableau, mais ce n'est pas tout. Vous devez également mettre à jour molécule d' initié dans tels services, tests de service de conseil. Parce que nous parlons ici flux pour tableau et de flux pour colonnes. Et nous devons également créer ici un flux pour nos tâches et une fonction supplémentaire qui mettra à jour le flux. Et après cela, vous devez simplement récupérer les données ici dans ce dernier combiné. Et ça y est. Si vous implémentez ce spot vous-même, vous êtes génial. Mais si vous voulez l' implémenter ensemble, faisons-le maintenant. Donc tout d'abord, je vais sauter dans ces types de clients source, application, partagés. Et ici, je veux créer un nouveau type pour notre interface Task Ts. Et nous devons avoir exactement les mêmes propriétés que celles que nous avions sur notre back-end. C'est pourquoi ici nous pouvons exporter notre nouvelle interface et c'est l' interface Task, à l'intérieur. Tout d'abord, nous avons notre identifiant, qui est une chaîne. Après cela, nous avons notre titre, qui est une chaîne. Nous aurons également ici une description, mais elle n'est pas obligatoire. C'est pourquoi Voici un point d'interrogation. C'est également une chaîne. Nous avons également besoin ici de notre colonne D, qui est la référence pour la colonne spécifique, notre parent. Et nous avons besoin ici de notre identifiant de tableau, et c'est aussi une chaîne. Et en fait, nous obtenons ici l'usure t, qui est aussi une chaîne. Notre interface de tâches est donc complètement prête. Nous pouvons maintenant revenir à l'intérieur des services partagés et créer ici dans votre service. Et en fait, ce que je veux faire, je veux copier coller le service de colonnes juste parce que ce sera super similaire. Renommons le service des colonnes en Tasks, service Ts et Comme vous pouvez le voir, c'est MenuService task service. Ce que nous voulons faire ici, est changer le nom. Nous avons donc ici des tâches, service où le constructeur vivant tel qu'il est, nous devons utiliser ici http et la dernière. Bon service. Et voici une méthode qui ne permet pas d' obtenir des colonnes, mais d'obtenir des tâches. Et ici, nous voulons obtenir nos tâches par board AT, parce que nous récupérons une seule fois toutes nos tâches pour un tableau spécifique. Et ici, nous obtenons Becker observable du tableau d' interface Task. Voici notre URL. Il s'agit de tâches de barre oblique ID de tableau de barre oblique. Voici le HTTP GET non pas la chirurgie de l'interface de colonne mais le tableau d'interface de tâche. Pour l'instant, je souhaite supprimer complètement la colonne de crédit car nous n'implémenterons pas de tâche de création dans cette vidéo. C'est pourquoi je peux supprimer ces trois entrées en haut. Nous n'en avons pas besoin pour l'instant. Il est maintenant temps de mettre à jour notre service de conseil d'administration. C'est pourquoi je vais ajouter Board Services, Board service. Et ici, nous devons créer une nouvelle chaîne. Je vais copier coller ici le flux de colonnes et le changer en flux de tâches. Et c'est un comportement qui fait l'objet d'un tableau d'interface de tâches. Et par défaut, nous avons un tableau vide, ce qui est très bien rapide. Maintenant, nous avons une méthode, envoyer des tableaux en colonnes. Nous devons créer une nouvelle méthode appelée set tasks. Et voici un argument. Nous obtenons nos tâches et c'est un tableau, donc c'est un tableau d'interface de tâches. Et maintenant, dans notre flux, les tâches avec un dollar, nous voulons définir nos nouvelles tâches afin que nous soyons presque terminés. Maintenant, la biomasse saute à l'intérieur de notre composant, panneau, composant de carte. Et voici notre dernière version combinée. Et juste pour vous rappeler qu' ici, disons data, nous combinons tous nos flux pour récupérer des données pour le forum. C'est ce que nous devons faire ici. Maintenant, nous devons ajouter ici ce service de forum, et voici les tâches de flux en cours d'utilisation. Et maintenant, dans map comme troisième argument, nous devons essayer de tâches et nous voulons les renvoyer ici. Dans ce cas, dans notre dollar de données, nous aurons non seulement un tableau et des colonnes, mais également des tâches. Et si vous avez tout fait vous-même ici, vous êtes vraiment génial et vous faites de bons progrès. Et maintenant, la seule chose que nous devons faire ici, nous devons les afficher dans le code HTML. Nous allons donc ouvrir le code HTML de nos composants de carte. Et ce que nous avons ici, c'est notre colonne pour boucle. Et à l'intérieur, nous avons un titre et nous n'avons rien d'autre. Et après ce titre, nous voulons en rendre un plus profond. Et voici ce dont nous avons besoin. Et, et G pour boucle pour nos tâches dans la colonne. Et en fait, nous ne pouvons pas le faire parce que nous avons juste ce flux pour nos tâches dans les données, mais nous n'avons pas de tâches pour cette colonne spécifique et nous devons filtrer ces données d'une manière ou d'une autre. C'est pourquoi ici je veux écrire en G4 et il sera dirigé par la tâche de, et ici je veux créer une nouvelle fonction. Par exemple, obtenez les tâches par colonne. Et puis, côté nous devons fournir tout d'abord l' identifiant de colonne et deuxièmement, toutes nos tâches, ce sont des tâches de points de données. Et juste pour vous rappeler ici, dans le flux de données, où nous entrons dans les colonnes et les tâches de notre tableau. C'est ici que dans cette fonction en tant qu'argument, nous pouvons simplement lancer des tâches de points de données, souvent G4, nous devons également ici une classe, ce sera tâche. Et ici à l'intérieur, nous voulons afficher le titre du point de la tâche. Et maintenant, nous avons juste besoin de créer cette tâche enfant par fonction de colonne. C'est ici dans le fichier OTS. Je vais créer cette fonction ici. Nous, tout d'abord, je reçois l'identifiant de la colonne, qui est notre chaîne. Et deuxièmement, les tâches, et c' est un tableau d'interface de tâches. Et là, nous obtenons notre tableau d'interface de tâches. Pourquoi est-ce que c'est ? Parce que nous voulons simplement obtenir notre tableau avec toutes les tâches et filtrer par cette colonne spécifique. C'est ici, le tableau d'interface de tâches est tout à fait correct. Et ce que nous voulons faire à l'intérieur, nous voulons filtrer nos tâches qui étaient Dieu, c'est pourquoi le filtre des tâches aura accès à chaque tâche. Et ici, nous pouvons vérifier que le point deux-points de la tâche égal à notre nom de colonne que nous avons fourni en argument, ce qui signifie que nous sommes Colin pour chaque colonne que nous affichons, cette fonction obtient tâches par colonne et nous allons rendre ici en énergie pour boucle nos tâches. Allons vérifier le son. Avons-nous des erreurs ? Oui, nous avons des tâches de propriété n'existent pas dans les colonnes du tableau de type, ce qui signifie essentiellement que nous n'avons pas mis à jour notre propriété de données. Et comme vous pouvez le voir ici en haut, nous définissons cela dans notre observable, nous venons d'acheter et des colonnes. Mais ici, nous avons également nos tâches, qui sont un tableau d'interface de tâches. Maintenant, nous n'avons aucune erreur dans notre serveur Web et nous pouvons aller à la page et voir toutes nos colonnes, mais nous ne voyons aucune tâche à l'intérieur de la raison pour laquelle cela se produit, car en fait nous n'avons pas appelé notre fetch. Et en fait, ici, dans notre constructeur, nous devons injecter notre service de tâches que nous venons de créer. Et c'est notre service de tâches qui est partagé. Et maintenant, nous devons accéder à nos données de récupération, comme nous l'avons fait ici. Nous pouvons copier, coller notre service de colonnes et le renommer en service de tâches. Et ici, il n'y aura pas de colonnes, mais des tâches et l'intérieur vaut la peine de jeter notre ID de tableau, qui est cette partie AD et retour, nous n'obtenons pas des colonnes, mais des tâches. Et ici, nous voulons appeler ce service de forum non pas définir des colonnes, mais définir des tâches. Et à l'intérieur, nous lançons des tâches que nous avons récupérées. C'est pourquoi avec ce code, nous avons mis à jour notre flux et le flux recevra de nouvelles données dans notre code HTML. Allons voir ça. Je vais recharger la page et un message d'erreur s'affiche. Comme vous pouvez le voir maintenant, nous sommes sur des tableaux slash. Et quand je passe à la première partie, nous obtenons une erreur que nous n'avons pas fournie pour le service des tâches parce qu'en fait, oui, nous devons l'injecter dans notre module de carte. C'est là qu'au sein des fournisseurs, nous devons ajouter en plus notre service de tâches. Rechargeons la page et comme vous pouvez le voir maintenant, nous n'avons aucune erreur. Et ici, au sein du réseau, nous devons avoir une demande pour nos tâches. Et voici une demande slushy pie slash boards slash ID slash tâches. Et voici un aperçu avec aucune tâche, ce qui est tout à fait correct. Nous ne les avons pas encore créés, mais nous voulons évidemment vérifier que notre code fonctionne. C'est pourquoi je veux faire ce que je veux faire dans la console. Je veux ouvrir notre Mongo, comme nous l'avons fait précédemment. Maintenant, je dois sélectionner notre base de données pour utiliser L trailer. Et ici, nous pouvons vérifier ce que nous avons. Par exemple ici maintenant nous pouvons écrire tableaux de points db, point find. Et avec cela, nous verrons tous les tableaux que nous avons. Nous n'avons qu'un seul tableau. Et de la même manière, nous pouvons écrire db point, columns, dot find, et où j'obtiens dans nos colonnes. Et ce que nous voulons faire maintenant, nous voulons insérer dans votre tâche l'une de ces colonnes. C'est pourquoi ici nous pouvons écrire db point et nous avons des tâches point, insert, et à l'intérieur nous lançons un objet. Donc, la première question, quoi avons-nous besoin pour fournir des informations ? Et pour cela, nous pouvons consulter notre interface Task. Donc tout d'abord, id sera généré à l'extérieur, nous devons fournir un titre. Voici donc le titre. Par exemple, ma première tâche après cette promesse fournit une description. Disons que la description est la mienne. Et après cela, nous devons fournir la colonne nécessiteuse. Et en fait, en haut, je vois déjà des colonnes. C'est là que je peux simplement prendre un AD ou FirstColumn et ils le lanceront ici. Ce sera donc l'identifiant de colonne. Et voici cette annonce. Et après cela, je dois également fournir un tableau AD Here. Nous aurons également une annonce de tableau ici en haut et nous pouvons la prendre. Et enfin, mais non des moindres, c'est qu' un utilisateur AT utilise réellement la 3D. Je ne vois pas ici en haut, mais je peux le prendre depuis le back-end. Et comme vous pouvez le voir ici dans notre backend, nous avons toujours un journal de console avec l' e-mail de notre utilisateur et l'identifiant de l'objet. C'est pourquoi je vais simplement copier-coller l'idée de comment un utilisateur et l'écrire ici. L'utilisation de re d est donc égale à cet identifiant d'objet. J'appuie sur Entrée, et voici notre premier enregistrement. Créons-en une autre, par exemple, ma deuxième tâche, et voici ma description. J'appuie sur Entrée et nous avons encore une tâche. Rechargeons maintenant la page et le navigateur. Comme vous pouvez le voir ici, nous avons deux tâches. La façon dont cela fonctionne ici est notre réseau et nous avons une demande avec des tâches PS à notre backend. Et ici, nous obtenons toutes les tâches filtrées par cet ID de forum spécifique. Ensuite, dans notre code, dans notre tableau, nous avons ce code que nous avons écrit pour filtrer nos données. Nous avons donc ici une fonction obtenir les tâches par colonne où à l'intérieur de laquelle filtrer toutes nos tâches par cette colonne spécifique AD. C'est ici que nous affichons uniquement les tâches qui sont liées à cette colonne, ce qui signifie que nous avons réussi à implémenter sur le front-end, obtenir nos tâches et rendre à l'intérieur de notre composant. 37. Créer un formulaire de tâche: Dans cette vidéo, nous pouvons enfin implémenter ou utiliser le formulaire intérieur pour créer une nouvelle tâche. Et en fait, nous avons déjà préparé tout ce dont nous avons besoin sur le backend. Nous avons juste besoin de l' implémenter sur le client. Commençons donc par notre forum. C'est ce qu'ils veulent faire. Je veux entrer dans le jeu, définir le code HTML de notre composant de carte. Ici, y a-t-il un diff à rendre à la tâche ? Et après cela, à la fin, nous voulons afficher notre formulaire en ligne. Nous allons suivre ici le composant de formulaire en ligne. Et terminons-le ici. Et maintenant, à l'intérieur, quand doit fournir certaines valeurs. Tout d'abord, c'est la classe. Il s'agit de notre classe de modèles qui remplace l'ensemble des styles et il s' agit de Create Task Form. Après cela, nous devons également fournir du texte par défaut. Il s'agira d'ajouter une carte, mais aussi d'avoir un bouton ici. Le bouton ici doit être vrai et nous devons fournir un texte. C'est là que se trouvera le texte du bouton et il est à l'heure actuelle. Nous voulons également fournir ici notre espace réservé d'entrée et c'est entrer un titre pour cette méthode actuelle et la dernière mais non moindre est notre méthode de soumission de handle que nous devons créer. Nommons-le, créons une tâche, comme nous l'avons fait avec notre chronique et les informations que nous voulons avant tout donner à n'importe quel événement. Ce sera le titre de la tâche créative, mais nous aurons également besoin ici de notre colonne, car notre backend doit savoir dans quelle colonne nous créons cette tâche. Et si vous voulez demander pourquoi nous sommes donnés ici juste chroniqués et non Boyd AD. Nous avons une carte 3D à l'intérieur de ce composant interne. C'est pourquoi nous n'avons pas besoin de le faire. Maintenant, créons cette méthode. Je vais accéder à notre conseil d'administration et en fait nous devons faire exactement la même chose. Ce que nous avons fait c'est créer une colonne. Mais voici une question. Nous avons ici une interface de saisie de colonne. Voici à quoi cela ressemble et nous devons maintenant créer notre interface de saisie de tâches. Ainsi, tous nos contenus sont écrits de la même manière et cela est évité que nous devions envoyer pour créer une tâche. C'est ici que nous pouvons également l'appeler interface de saisie de tâches Ts et que voulons-nous écrire dedans ? Il s'agit de notre interface, qui est une interface de saisie de tâches. Et à l'intérieur, tout d'abord, Boom doit fournir un titre. Il est obligatoire et il s'agit d'une chaîne. Deuxième boucle, nous fournissons ici notre ID de colonne, qui est également une chaîne. Et enfin, mais non des moindres, c'est notre AD bouilli, et c'est aussi une ficelle. Et maintenant, nous avons une bonne contribution et nous pouvons revenir en arrière dans notre tableau. Et maintenant je veux copier-coller cette colonne de création car ce sera exactement la même chose mais pour la tâche. Nous devons donc le renommer pour créer une tâche. Ici, nous obtenons non seulement le titre, mais également l'ID de notre colonne car nous l'avons fourni à partir de notre code HTML. Et maintenant, nous pouvons changer le nom de colonne en entrée de tâche. Et notre interface ici sera interface de saisie de tâches que nous venons de créer. Et comme vous pouvez voir où je manque ici, notre identifiant de colonne. C'est là que nous devons l' ajouter à partir de l'argument. Et ici, nous n'avons pas besoin d'appeler un service de cône. Nous devons assurer la cohérence de nos tâches. Et juste pour vous rappeler qu'il s'agit notre service sans état où nous écrivons notre requête HTTP et notre E/S de socket. Et cette méthode doit être nommée create task, et nous lançons dans notre entrée de tâche. Mais cette méthode n'existe pas encore. Nous devons le créer. C'est pourquoi revenons en arrière et disons qu'il s'agit de services partagés d'applications sources, et voici notre service de tâches. Mais ce qu'ils veulent faire, je veux copier-coller la méthode create column, car en fait ce sera exactement la même chose. Je copie la colonne de création collée et ils veulent la coller ici dans le service des tâches. Mais cette méthode sera appelée create task. Et nous obtenons comme argument notre entrée de tâche et savons bien que ce type sera interface de saisie de tâche. Ici, nous voulons également appeler une E/S de socket car elle fonctionne de la même manière. Nous avons une opération asynchrone et nous avons commencé à réussir et à échouer. Nous commençons donc à créer une tâche, avertirons avec la rencontre de notre back-end. Ensuite, Bacon crée une tâche facette, puis le backend avertit toutes les personnes qui sont inscrites à notre forum de la nouvelle tâche. C'est là que nous devons mettre à jour nos événements de socket. Je veux l'ouvrir ici à droite, et en plus, ouvrir l'enum à l'intérieur d'un serveur car nous sommes déjà écrits dans nos événements. Ces trois nouveaux événements, tâches créent le succès et l'échec. Et maintenant nous pouvons les coller ici pour les utiliser sur le client. Après cela, nous pouvons revenir dans notre service de tâches et changer le nom ici. Et ce seront les tâches du DOD créées. Et il y a un paramètre ici. Nous recevons une entrée de tâche, ce qui signifie en fait qu'après avoir rempli notre formulaire intérieur, nous enverrons notre socket, votre image à notre backend et notre bacon est déjà prêt à créer notre tâche et le succès de la viande à tous nos utilisateurs. Allons voir ça. Est-ce vraiment comme si nous pouvions sauter dans nos contrôleurs de source de serveur, et voici notre contrôleur de tâches. Et comme vous pouvez le voir, nous avons ici la méthode create task, et ici nous créons une nouvelle tâche, puis notifions avec cette ligne tous nos clients, qui signifie que nous devons simplement nous abonner à ces changements au sein de notre client. C'est là que je saute à l'intérieur de notre composant de carte ts. Et juste pour vous rappeler, nous avons ici nos auditeurs d'initialisation et ici nous avons un auditeur pour notre chronique qui crée du succès. Maintenant, nous faisons exactement la même chose pour notre tâche, un grand succès. Nous aurons donc ici notre interface Task, et ici le type sera DOD. Les tâches créent le succès. Et ce que fait cette interface de tâches de cette façon, nous récupérons l' interface des tâches car elle est générique. Et maintenant nous avons spécifié ou k, Cette leçon nous a redonné notre interface de tâche. C'est ici que nous devons créer une nouvelle méthode à la tâche dans le mot service. Et nous fournissons ici notre tâche que nous avons obtenue du backend. Et la dernière chose que nous voulons faire est ajouter cette méthode dans notre service. Ouvrons notre service de conseil. Et nous avons ici la colonne. Et comme vous avez tous fait le stent, je veux le copier-coller et faire exactement la même chose. Ici, nous avons une méthode de tâche et nous arrivons ici lorsque vous créez une tâche, et c'est une interface de tâche. Ici, nous devons créer un ensemble de tâches mises à jour. Donc, ici, nous obtenons ce qui n'est pas un flux de colonnes, mais un flux de tâches, puis nous obtenons de la valeur. Et ici, à la fin, nous voulons écrire notre nouvelle tâche. Et après cela, nous devons à nouveau mettre à jour notre variété. Voici le flux de tâches et voici les tâches mises à jour. Et avec ce code, nous mettrons à jour notre flux avec succès et tous nos composants abonnés à ce flux seront automatiquement fermés par lettre. Allons voir si ça fonctionne. Nous n'avons aucune erreur ici. Et maintenant je veux ouvrir deux onglets ici. Et ils veulent que les deux clients sautent dans le même tableau. Et comme vous pouvez le voir, voici le journal de notre console. Et ils veulent essayer la coupe ici. Voici donc notre formulaire en ligne et appelons-le, créé une fonction de tâche. Maintenant, j'appuie sur Entrée, et comme vous pouvez le voir directement dans cet onglet, cet élément apparaît. Donc, comment cela fonctionne, nous avons rempli notre entreprise intérieure. Nous lui envoyons notre image au back-end. Back-end, je l'ai obtenu, créé une nouvelle tâche et a informé toutes les personnes, tous nos clients qui sont abonnés à ce forum de ce changement. Et avec cette écoute, nous avons mis à jour notre éventail de tâches et ce composant a été mis à jour. partie la plus intéressante est ici un autre onglet et un autre utilisateur, c'est un autre client avec un autre socket AD. Comme vous pouvez le voir ici, nous avons également fonction Créer une tâche, car tous nos clients sont désormais synchronisés. Et vous pouvez dire, d'accord, mais votre destination, vous n'avez besoin que d'un seul navigateur. Ça n'a pas vraiment d'importance. Il s'agit simplement d' une connexion socket différente de votre serveur. Si vous n'avez que deux ordinateurs et votre projet est déployé en production, il fonctionnera exactement de la même manière. Par exemple, je peux simplement créer une nouvelle tâche. Par exemple, foo, je frappe ici à la carte et j'obtiens exactement les mêmes informations sans Pedro lot dans un autre onglet, ce qui signifie en fait que notre fonctionnalité créait des tâches est complètement terminé. 38. Mettre à jour le nom de la société: Dans cette vidéo, nous allons implémenter une autre fonctionnalité manquante : il s'agit d'une forme de mise à jour du nom de notre forum. Et comme vous pouvez le voir ici, nous avons un tableau de formulaire en ligne avec espace réservé, et ici nous devons utiliser notre formulaire intérieur. Et en fait, il s'agit de notre première vidéo laquelle nous allons implémenter l'ensemble du backend et du client en une seule vidéo. Et en fait, toute la logique sera exactement la même que nous l'avons déjà fait précédemment, parce que nous avons construit une belle architecture et nous pouvons maintenant créer facilement de nouvelles fonctionnalités. Donc, en quoi consiste cette fonctionnalité, nous aurons ici et ensuite la société minière et nous en tirons un titre. Plus important encore, tout d'abord, nous devons jeter notre titre du tableau en signant ce formulaire sur notre succès de mise à jour, mais nous ne voulons pas utiliser le GTP ici. Whoop, je veux utiliser Socket IO par là, parce que tous nos clients doivent être avertis si les urgences, à ce stade, nous avons changé le nom de la carte. C'est là que la prise ou votre viande comme toujours. Ensuite, sur notre backend, nous devons attraper cet événement et mettre à jour notre nom. Et en fait, nous pouvons créer une méthode pour mettre à jour l'ensemble du tableau, mais nous allons mettre à jour pour l' instant le titre du calque. Essayons donc de le faire maintenant. Pour cela, je veux entrer dans notre code et commencer. Tout d'abord, il y avait notre serveur. Et pour ce registre de masse de flèche et utiliser événement socket ici dans notre Socrative et Xenon. Et nous avons déjà ici des planches, des feuilles et des chaînes de ports et en fait nous voulons exactement la même chose que nous l'avons fait avec les colonnes. Et ici, nous avons des colonnes créées par exemple, et ils veulent copier-coller les trois. Parce qu'en fait ici par exemple, après la mise en ligne des tableaux, nous voulons écrire des tableaux et ici seront mis à jour. C'est ici que nous pouvons directement le changer en mise à jour du tableau, succès des mises à jour des tableaux et échec de mise à jour des Et maintenant, sur la droite, nous devons faire exactement la même chose. Voici les tableaux et les mises à jour. Après le succès de la mise à jour de ce forum et l'échec de la mise Notre événement de socket est donc créé avec succès et nous devons maintenant l' enregistrer dans notre E/S de socket. C'est par un retour à l'intérieur ou un service, oui. Et ici, en bas, nous avons notre prise de courant. Ici, nous devons enregistrer et utiliser socket ton. Pour cela, nous pouvons simplement copier-coller par exemple, créer une tâche et écrire ici, ne pas créer, mais réagir mise à jour des tableaux de points que nous venons de créer. Nous attendons donc la mise à jour des tableaux d'événements de la part de notre client. Et ici, nous ne voulons pas utiliser le contrôleur de tâches, mais le contrôleur de la carte ici ne crée pas de tâche, mais met à jour le tableau. Et en fait, à l'intérieur, nous transmettons les données de votre socket, comme nous le faisions précédemment. Maintenant, créons cette méthode de tableau de mise à jour pour ces paiements directement dans nos tableaux de contrôleurs. Et ici nous avons déjà cette méthode de création de planche, mais ce n'est pas ce que nous voulons car cette méthode est avec une chaussure TP. C'est pourquoi nous voulons quelque chose comme le live board par exemple. C'est pourquoi je vais copier-coller cette méthode car toutes les options seront similaires et nous pouvons nommer ce tableau de mise à jour de méthode. Et nous savons que nous recevons ici notre prise infrarouge, puis nos données. Et la question est quelles données avons-nous besoin pour mettre à jour un tableau Nous devons certainement connaître le titre du tableau que nous voulions fournir. Et deuxièmement, l'idée du tableau que nous voulons mettre à jour. C'est là que notre corps va parfaitement bien. Et en fait ici je ne veux pas écrire de titre, je veux écrire des champs. Et ici, nous allons passer la chaîne de titre. Pourquoi avons-nous une telle notation ? Dans ce cas, nous pouvons facilement ajouter un nouveau champ que nous voulons mettre à jour dans notre tableau. Par exemple, si plus tard nous aurons une description, nous pouvons simplement la lancer ici, mais pour l'instant nous n' avons qu'un titre. Maintenant, nous pouvons supprimer ce journal de console, nous n'en avons pas besoin et aussi socket leaf. La question est donc de savoir ce que nous allons écrire ici ? Tout d'abord, nous devons écrire ici try-catch juste parce que nous pouvons avoir une erreur. C'est par ici. Créons, essayons et attrapons. Et là, nous entrons à l'intérieur, attrapons une erreur. Et si nous avons une erreur, nous voulons juste écrire socket et meat. Et voici nos événements de socket en un point. Et nous avons déjà créé l'échec de la mise à jour de nos tableaux. Et ce que nous voulons fournir des informations, c'est notre message d'erreur get. Et juste pour te rappeler, c'est notre assistant qui transformera une flèche. C'est mon intérieur. Nous pouvons simplement indiquer notre erreur inconnue. Créons maintenant notre pneu. Alors Festival ici nous voulons vérifier si un utilisateur est valide, c'est y. Vérifions si nous n' avons pas d'utilisateur point socket, puis passons à émettre exactement la même erreur. Essayons donc le socket, les événements de socket, l'échec de la mise à jour des cartes ENM. Et ici, au lieu d' obtenir un message d'erreur, nous pouvons simplement écrire que l'utilisateur n'est pas autorisé. De plus, nous ne devons pas oublier ici d'écrire un retour. Dans ce cas, nous allons simplement arrêter de faire quoi que ce soit. Parce qu'après cela, si nous voulons écrire notre logique, agit d'une mise à jour du tableau. Et en fait c'est extrêmement facile, mais nous devons rendre cette méthode aussi synchrone parce que nous voulons l'utiliser au Koweït à l'intérieur. Maintenant, voici ce que je veux faire, je veux récupérer notre tableau mis à jour. Et pour mettre à jour un tableau, nous devons utiliser ici un poids et nous avons ici accédé à notre modèle de travail. Et nous pouvons utiliser la recherche par ID et la mise à jour. Et en fait, c'est une méthode incroyable de Mongoose. Dans ce cas, nous ne fournissons que NAT et dans notre cas, il s'agit de l'ID de tableau de points de données. Voici notre mise à jour. Et en fait, update est exactement ce que nous voulons mettre à jour au sein de notre entité. C'est ici que nous pouvons simplement essayer les champs de points du tableau et c'est un objet. Et le dernier concerne les options. Ici, je veux vous fournir une option. Cette option est vraiment importante car dans ce cas, nous récupérerons notre tableau mis à jour. De plus, comme vous pouvez le voir ici, j'ai fait une erreur. Il ne s'agit pas de champs de points de tableau, mais de champs de points de données. Nous n'avons plus aucune erreur et nous pouvons répondre avec ce port. Et pour cela, nous pouvons simplement utiliser socket and meet. Voici notre socket même vu. Et nous avons ici du succès. Les tableaux mettent donc à jour le succès Nous voulons fournir comme deuxième paramètre sont mis à jour le tableau. Dans ce cas, tous nos clients seront informés de cet événement après ce coupon afin d'informer tous nos clients abonnés à ce forum de notre changement. C'est ici que nous pouvons écrire ir point t2, et ici nous voulons avertir tous les clients à l'intérieur de notre chambre. C'est là que nous aurons des données, point d'identification du tableau de points, et nous nous rencontrerons comme nous l'avons écrit précédemment. Et ici, à l'intérieur, nous pouvons utiliser nos événements de socket dans m point. Et ici, nous avons un succès de mise à jour du tableau. Et il y a un deuxième paramètre que nous voulons écrire ici, le port mis à jour. Dans ce cas, les utilisateurs d'Oliver seront avertis que TO board a été mis à jour et ils sauront quels champs ils doivent modifier. Notre partie back-end est complètement prête. Nous devons maintenant implémenter une partie client. C'est ici que nous allons revenir à l'intérieur notre application source client. Et ici, je veux tout d' abord aller dans Shared Services, Board service. Pourquoi est-ce que c'est ? Parce qu'en fait, nous organisons nos événements pour le back-end. Et en fait, avant que nous écrivions ici, tout comme GTP cat et le difficile proposé. Mais dans notre cas, nous devons émettre un événement socket. C'est pourquoi ce que nous voulons créer ici est le tableau de mise à jour des méthodes. Nous voulons vous fournir ici. Tout d'abord, notre tableau AD, il s'agit d'une chaîne et deuxièmement, des champs que nous voulons mettre à jour. Comme vous pouvez le voir, nous avons des paramètres exactement comme sur le backend. Here fields est intitulé, qui est une chaîne, et retour avec pas besoin d'obtenir quoi que ce soit parce que nous utilisons simplement ici socket IO, mais pour l'utiliser ici, mais il faut l'injecter dans le constructeur. C'est ici que nous obtenons notre service de socket, qui est notre service de socket. Maintenant, dans notre tableau de mise à jour, nous pouvons utiliser ce service point socket, dot and meat. Et ici, nous devons fournir notre événement socket. Mais voici le problème. Nous ne l'avons pas encore enregistré chez notre client. Ici, nous n' avons pas de telles chaînes. C'est là qu'en bas, je veux y ouvrir nos événements de socket serveur. Et ici, je veux copier-coller ces pores, mettre à jour le succès et l'échec. Et maintenant, nous voulons juste les coller ici dans notre client. Nous n'avons donc pas dit à notre client les chaînes et nous pouvons les émettre. C'est pourquoi ici nous pouvons simplement écrire des événements de socket en m point et ici nous avons une mise à jour de la carte. C'est le début de notre mise à jour en signe de protestation. Et est-ce que le deuxième paramètre ici passe à fournir notre virgule ID du tableau, nos champs. Nous avons donc exactement le même lac de données que celui que nous avons préparé sur notre backend. Et maintenant, à partir de n'importe quelle partie de notre application, nous pouvons utiliser ce service de tableau partagé. Utilisez cette méthode du forum de mise à jour pour envoyer une rencontre. Il est maintenant temps d'ajouter notre formulaire, que nous n'avons pas encore créé. C'est pourquoi revenons à l'intérieur de notre application. Composants de la carte, carte, composants de la carte HTML. Et comme vous pouvez le voir ici sur le conteneur d'en-tête du tableau intérieur supérieur , nous avons ce tableau de formulaire en ligne avec espace réservé. Et exactement ici, nous voulons écrire un formulaire en ligne pour mettre à jour le titre de notre tableau. C'est ici, écrivons notre formulaire de tableau de bord en ligne que nous voulons utiliser, et fermons-le ici. Maintenant, tout d'abord, l'intérieur de l'utérus doit fournir la classe pour obtenir un style correct. Et dans ce cas ici, il sera ajouté forum du forum. Ensuite, nous allons également vouloir fournir notre texte par défaut. Et ici, nous aurons notre tableau de points de données, le titre des points. Pourquoi est-ce que c'est ? Parce qu'en fait, juste pour vous rappeler ici en haut, nous avons nos données, des données locales sur nous avons nos données, les propriétés, et à l'intérieur nous avons toutes nos colonnes, toutes nos tâches et un tableau. C'est pourquoi nous avons ici un accès direct au titre du tableau de données et nous voulons le rendre comme texte par défaut. Ensuite, nous voulons également fournir un titre, et c'est la valeur pour notre entreprise. Ici, nous allons également écrire titre du tableau de données et enfin, mais non des moindres, est géré soumettre. Il s'agit de notre événement et nous voulons créer une nouvelle méthode, par exemple, update board name et inside dollar event est une chaîne pour mettre à jour un tableau. Créons maintenant cette méthode. Je vais sauter dans le fichier RTS et quelque part en bas, nous pouvons ajouter le nom du tableau de mise à jour. Et nous savons que nous obtenons ici le nom de notre tableau, qui est une chaîne. Et de retour, nous voulons obtenir un vide parce que nous voulons simplement utiliser notre service. Et en fait, nous avons déjà accès à notre service de tableaux à points. Et c'est important, ne pas s'ennuyer mais les planches parsèment. Et voici notre tableau de mise à jour ici à l'intérieur. Tout d'abord, nous devons fournir notre ID de tableau, et c'est ce tableau à points AT. Et deuxièmement, nos champs. Dans notre cas, nous n'avons qu'un titre, qui est le nom de notre tableau que nous avons obtenu à partir de notre formulaire intérieur. Nous avons donc réussi à créer un flux unique. Nous avons donc créé notre intérieur à partir ici, nous avons mis à jour le nom de notre tableau et nous avons reçu un événement pour notre back-end. Vérifions si cette pièce fonctionne. Je n'ai aucune erreur sur le client ou sur le backend. Et maintenant, ouvrons un navigateur. Comme vous pouvez le voir ici, nous avons maintenant la première partie et je peux cliquer ici pour ouvrir un formulaire. Et voici notre première planche. Ils peuvent écrire quelque chose ici et appuyer sur Entrée. Et comme vous pouvez le constater, elle n'a pas été mise à jour car nous n'avons pas réagi à nos modifications depuis le backend. Et en fait, comme vous pouvez le voir ici, nous n' avons pas d'erreur et notre titre a probablement déjà été mis à jour, mais nous n'avons pas prévenu notre client. Et en fait, nous pouvons facilement le vérifier. Nous pouvons simplement recharger la page. Et comme vous pouvez le voir maintenant, nous recevons notre titre mis à jour, ce qui signifie que toute la logique fonctionne déjà et que notre backend a réussi à mettre à jour notre tableau. Mais le principal problème est que nous n'avons pas informé tous nos clients du changement. En fait, oui, nous l'avons fait en back-end, mais nous n'avons pas créé d'abonnement pour cet événement sur le client. C'est Y. Allons-y maintenant. Tout d'abord, nous devons revenir à l'intérieur de notre composant board. Et juste pour vous rappeler qu'en haut de la page, nous avons des abonnements pour différents événements. C'est pourquoi je souhaite ici copier-coller un abonnement et le modifier. Nous avons donc notre service this socket et nous sommes écoute de l'événement de mise à jour de notre carte, ce qui signifie en fait que nous recevons une nouvelle carte. C'est ici que nous avons une interface de carte et ici nous avons l'événement socket C num point. Et ici, nous sommes à l'écoute du succès. Nous avons ici des tableaux, des mises à jour, des succès. Et dans notre Abonnez-vous maintenant, nous recevons notre tableau mis à jour. Alors, que voulons-nous en faire ? En fait, je voudrais simplement appeler une méthode dans notre service de tableaux et cela mettra à jour notre flux de données. C'est pourquoi nous pouvons utiliser ici le service de tableau, tableau de mise à jour par points et la ligne de valeur. Et dans notre tableau mis à jour, super successful est inscrit à notre événement. Et nous avons juste besoin de créer cette fonction de mise à jour du tableau dans notre service de tableau. Passons donc à notre service de conseil d'administration. Et ici, en bas, nous pouvons le créer. Voici donc le point de mise à jour, et nous savons que nous obtenons ici un tableau mis à jour, qui est en fait une interface complète. Et ici, nous allons devenir large parce que nous voulons simplement mettre à jour notre flux. Mais ici, nous avons un problème. Par défaut, notre tableau est maintenant, c'est ici. Typescript criera que nous ne pouvons pas travailler avec. Maintenant, c'est ici que je veux vérifier si nous avons maintenant embarqué ou non. Donc, ici, je veux obtenir un tableau, et voici, est-ce que ces tableaux diffusent vers la valeur. Et après ça, je veux vérifier si c'est le cas maintenant. Donc, si nous n'avons pas notre tableau, alors je veux lancer une erreur. Donc, voici une nouvelle erreur parce que nous ne pouvons pas mettre à jour le tableau si nous n'en avons pas. Ici, disons que board n'est pas initialisé après cela si nous pouvons travailler avec part et nous voulons simplement mettre à jour notre flux. Donc ce tableau avec le point dollar suivant, et ici je veux fusionner tout le tableau que nous avons avec le titre parce que je veux juste mettre à jour le titre. Le titre est donc notre titre de point de tableau mis à jour. Et vous pourriez dire, d'accord, nous pouvons simplement prendre l'objet en entier. Oui, nous allons bien, mais je veux rester prudent et simplement implémenter une fonctionnalité que nous devons résoudre. Ce code devrait réussir à mettre à jour le flux et notre composant, il est abonné au flux, sera notifié et rétroactif. Allons voir si ça fonctionne. Nous n'avons aucune erreur ici. Rechargeons la page et voici le premier tableau. Changeons simplement votre titre et appuyez sur Entrée. Et comme vous pouvez le voir, voici directement mes modifications. Maintenant, dupliquons cet onglet et réessayons. Donc, dans le deuxième onglet, je vais juste essayer de syntoniser et d'appuyer sur Entrée. Et comme vous pouvez le voir ici sur le premier onglet, il a également été mis à jour, ce qui signifie que nous avons implémenté avec succès une fonctionnalité de mise à jour du titre d'un tableau du début à la fin. 39. Supprimer le tableau: Dans cette vidéo, nous allons implémenter la suppression du point. Et en fait, cette fonctionnalité sera super similaire à notre fonctionnalité précédente avec la mise à jour suffisante de notre tableau, c'est y. Implémentons-la vraiment vite comme toujours. Mettez-en un pour démarrer avec notre serveur. C'est y. Passons aux sources du serveur. Et ici, nous nous intéressons à nos événements sur les sockets. Et en fait, exactement comme cette mise à jour, nous avons besoin de trois nouveaux événements à supprimer. C'est par ici, créons trois nouveaux événements. Ce sont des cartes de suppression de port à son succès et à son échec. Et changeons sur la droite, notre chaîne deux tableaux suppriment. Les tableaux suppriment ensuite les succès et les tableaux suppriment les échecs Abonnez-vous maintenant à notre événement pour ce saut bonus à l'intérieur de notre serveur. Et ici, nous pouvons copier, coller le succès de notre tableau et le remplacer par nos tableaux. Supprimer. Ici, nous voulons utiliser une nouvelle méthode, pas mettre à jour le tableau mais supprimer le port. Passons maintenant à notre contrôleur et créons cette méthode dans le contrôleur de notre carte. Et en fait, pour cela, je veux copier-coller complètement notre méthode de mise à jour car une suppression sera super similaire. Tout d'abord, changeons le nom. C'est delete board et c' est une méthode asynchrone. Maintenant, au milieu de nos données, la seule chose dont nous avons besoin, ce n'est pas un identifiant de notre conseil d'administration. C'est là que j'ai acheté le D c'est assez ici, mais je n'ai pas besoin de fournir autre chose car nous supprimons simplement notre tableau par d. Et pour le back-end, c' est assez d'informations. Maintenant, à l'intérieur, nous avons try-catch comme toujours, et nous recherchons notre utilisateur de socket. Mais ici, en cas d'erreur, nous voulons lancer une autre erreur et ce sera l'échec de la suppression des cartes. Ici. Changeons également notre cage. Ce sera également l'échec de la suppression des cartes DOD. Et maintenant, nous devons changer notre modèle chuchoté logique, car ici nous avons fait une mise à jour. Maintenant, nous avons Azure move et en fait nous ne voulons rien récupérer, mais nous voulons simplement supprimer ce lien d'ici d. Et pour cela, nous pouvons utiliser différentes méthodes. Par exemple, nous pouvons utiliser find one et delete. C'est très bien. C'est exactement comme nous l'avons fait dans la mise à jour. Mais en fait, vous pouvez également utiliser directement sans sucre, en supprimer un. Et c'est une méthode juste pour que vous sachiez à l'intérieur de delete one, nous devons fournir un objet avec champs par lesquels nous voulons trouver le sensible. Et en fait, ici, nous pouvons simplement fournir un identifiant de soulignement égal et d Maintenant, dans le cas où il s'agit d'AD de tableau de points de données, et peu importe que vous utilisiez delete one ou find by the end delete, cela fonctionne exactement pareil. Cette ligne supprime donc avec succès pour nous notre tableau. Et après cela, nous voulons émettre notre succès de suppression. C'est ici que, pour tous nos utilisateurs à l'intérieur de ce port, nous voulons émettre des cartes, supprimer le succès. Et en fait, ici, nous n'avons pas besoin de fournir un identifiant de notre forum, car tous ces utilisateurs sont à l'intérieur de ce forum spécifique, ils savent quel forum a été supprimé et ils doivent être redirigés vers la page d'accueil. parce qu'ils ne peuvent pas rester sur le tableau que l'un des clients a supprimé. Notre logique de serveur est donc complètement prête. Revenons maintenant à notre client et exactement comme précédemment. Tout d'abord, nous voulons commencer par partagés et par nos événements socket. Et je vais copier-coller à partir de nos événements de socket, trois événements, le succès et l'échec de la suppression du tableau, et le coller ici en bas. Nous devons maintenant sauter dans nos services, board service, car ici nous voulons créer une nouvelle méthode pour supprimer un tableau. C'est ici que nous allons copier-coller notre tableau de mise à jour et le changer en point de suppression. Et la seule chose dont nous avons besoin est notre tableau AT, nous n'avons pas besoin de champs ici. Et ici, nous voulons émettre notre événement de suppression de tableau. Essayons-le ici. Acheté delete et à l'intérieur, nous fournirons un objet avec un seul champ. Indeed est l'identifiant de notre tableau. Maintenant, dans notre application, nous pouvons appeler ce tableau de suppression et cela lancera une fin corrective de la couche de socket. Nous allons maintenant mettre à jour notre composant. Je veux donc retourner dans notre tableau. Composants achetés en HTML. Nous avons ici notre formulaire en ligne. Et après ce formulaire en ligne, nous devons créer une icône qui supprimera le tableau. C'est ici que disons div class Delete Board. Et ici, nous aurons notre événement click et décliquerons Poupon pour supprimer notre point. Et en fait, nous n'avons pas besoin de fournir quoi que ce soit à l'intérieur car nous avons le NAD de notre carte dans notre fichier de test. Donc, ici, je veux fermer notre div et l'essayer dans le code Delete Board. Nous devons maintenant sauter dans notre fichier ts et créer cette méthode ici en bas. Et ce que nous voulons faire dans notre tableau de suppression, il suffit d' appeler notre service. Eh bien, ici, nous savons que c'est un vide et nous voulons appeler un service. Mais en plus, je veux écrire ici une confirmation car nous devons être sûrs que les utilisateurs veulent vraiment supprimer un forum. Essayons-le ici. Si vous confirmez et si vous ne savez pas ce qui est confirmé, s'agit d'une fenêtre contextuelle Javascript standard à l'intérieur du navigateur, qui vous montrera un oui ou un non. Nous voulons donc écrire quelque chose comme, êtes-vous sûr de vouloir supprimer le tableau ? Et si la réponse est oui, alors nous allons entrer dans ce tamis et nous appellerons ce service de conseil. Et ici, nous avons le point de suppression où nous pouvons fournir notre AD de tableau. Et maintenant, vous pourriez penser, d'accord, nous devons mettre à jour notre service de conseil. Mais nous n'avons pas besoin de le faire parce que c' est en fait beaucoup plus simple. Ce que nous voulons faire Poupon pour vous abonner ici à notre événement socket, qui sera supprimé avec succès. Faisons ça maintenant. Pour cela, nous voulons copier-coller notre service de socket, écouter et entendre boop vouloir écouter void parce que back whoop n' aura pas de tableau. Nous savons que c'est le succès de la suppression de notre tableau. C'est ici que l' événement sera acheté, supprimera le succès et reviendra lorsqu'il n'obtiendra rien. Et la question est ce que nous voulons faire à l'intérieur et nous voulons simplement rediriger l' utilisateur vers notre page d'accueil. Pourquoi est-ce que c'est ? Parce qu'en fait, nous avons un écouteur ici en haut de la navigation Démarrer, ce qui signifie en fait qu' au moment où notre utilisateur va sur une autre page, par exemple, sur la page d'accueil, nous gérera les flux en direct via notre service de conseil et nous supprimerons correctement tous les flux. C'est ainsi que nous voulons faire dans notre abonnement, vous écrivez simplement ce routeur point navigation par URL. Et ici, nous avons, par exemple, des tableaux slash, ce qui signifie en fait que le tableau n'existe pas. Nous devons afficher pour chaque client la liste des tableaux disponibles. Vérifions si ce code fonctionne. Comme vous pouvez le constater, nous n'avons aucune erreur sur le client. Nous n'avons pas d'erreurs sur le backend. Ouvrons-le maintenant dans le navigateur. Et comme vous pouvez le constater, notre page fonctionne toujours. Et maintenant, nous avons ce tableau de suppression. Mais en fait, je ne veux pas supprimer cette partie parce que nous avons construit pas mal de tests ici. Mais je veux faire, je veux revenir à l'intérieur de nos tableaux et créer un nouveau tableau, par exemple, à supprimer. Dans ce cas, nous pouvons tester cette fonctionnalité sur cette nouvelle barre vide. Mais nous voulons le faire maintenant, nous voulons dupliquer cet onglet juste pour vérifier s'il fonctionnera pour le deuxième utilisateur. Donc, ce que je veux faire maintenant, je veux cliquer sur Supprimer le point, et comme vous pouvez le voir, je vois une confirmation. Je vous assure que vous voulez supprimer un tableau là où il est masqué, d'accord ? Et là où il y a de la régularité a réagi à nos planches. Et comme vous pouvez le voir ici, nous n'avons pas notre tableau parce qu'il a réussi ou a été supprimé. Et comme vous pouvez le voir dans le deuxième onglet, où tous les chiffres sont dirigés vers notre barre oblique parce que tous nos clients dans cette salle ont été informés de la réussite de la suppression du tableau et ils doivent être rejeté sur notre page de tableaux. Comme vous pouvez le constater, notre architecture est tellement incroyable que nous pouvons créer de nouvelles fonctionnalités en quelques minutes. 40. Supprimer la colonne: Dans cette vidéo, nous devons implémenter la suppression de notre colonne. Et en fait, nous avons ici une colonne à l'intérieur de notre tableau et la masse près du titre montre l'icône pour supprimer une colonne. Et encore une fois, il doit être implémenté avec le socket IO. Nous informerons donc un autre utilisateur de notre suppression. Et je pense que c'est une fonctionnalité vraiment intéressante que vous pouvez implémenter vous-même car elle sera super similaire à supprimer dans un oiseau. Et voici de l'aide de ma part. Tout d'abord, comme toujours, nous devons sur le backend, implémenter de nouveaux événements et enregistrer l'événement use socket. Après cela, nous devons créer une nouvelle action de contrôleur qui est des colonnes. Par exemple, supprimez une colonne. Nous devons également avoir du sens uniquement pour le client. Tout d'abord, le registre et le nouvel événement. Ensuite, nous avons rassemblé une nouvelle méthode dans le service de colonne qui est partageable pour supprimer une colonne. Après cela, nous devons mettre à jour notre composant pour ajouter un bouton sur lequel nous supprimerons cette colonne spécifique à partir de ce point. Et en fait, il ne s'agit que d'une réunion de l'événement pour le back-end. Et nous devons également souscrire au succès pour supprimer cette colonne chez tous nos clients. Et voici le balisage du bouton. Vous savez donc ce que vous devez mettre en œuvre. Comme vous pouvez le voir ici, je suis à l'intérieur du composant HTML du tableau. Nous avons ici les titres de nos colonnes et juste après le titre, nous voulons écrire ici une image avec la source. Et ici, nous aurons des actifs de barre oblique, une barre oblique, un trait de soulignement, un point d' icône SVG. Et ici, nous pouvons fermer notre image, mais nous devons également fournir ici une classe qui sera l'icône de suppression de colonne. Allons voir ça. Je recharge la page et voilà que nous avons une belle croix. Et c'est exactement là que vous allez lier l'événement de clic. Mais si vous voulez juste suivre, mettons-nous en œuvre ensemble. Et en fait, comme je l'ai dit, ce sera super similaire à la suppression du tableau. C'est Y. Allons-y vite et furieusement. Tout d'abord, je veux commencer par notre backend et la biomasse sauter ici à l'intérieur de nos types de sources de serveur. Et voici nos événements de socket. Et encore une fois, nous avons ici supprimer les tableaux, je peux le copier-coller et le changer simplement en colonnes supprimer. C'est ici que sur la gauche, nous aurons des colonnes supprimées et sur la droite au lieu de tableaux écrirons des colonnes partout. Et nous devons également le changer en cas de succès et d'échec. Nos événements sont donc là. Maintenant, nous devons sauter à l'intérieur de nos niveaux de serveur ici et utiliser socket ici au lieu de supprimer les tableaux, je veux écrire des colonnes delete, que nous venons de créer. Ici. Au lieu d'un contrôleur de carte, nous devons utiliser notre contrôleur de colonnes. Ici, nous ne supprimerons pas de tableau, mais nous supprimerons notre colonne. Et maintenant, nous sommes la méthode de suppression de colonne moutarde dans notre contrôleur de colonnes. Mais je ne veux rien retaper parce que le code est exactement le même que la suppression du tableau. C'est là que nous pouvons copier, coller complètement ce tableau de suppression et le coller dans notre contrôleur de colonnes car il sera identique à 99%. Tout d'abord, la question est ce que nous devons obtenir ici en tant que paramètre ? Nous y sommes déjà, je reçois AD à bord et ils veulent aussi obtenir ici la colonne D, parce que nous avons besoin de savoir ce que nous supprimons. Et vous pourriez dire ici, d'accord, mais pourquoi avons-nous besoin de la pauvre dame ? Nous avons juste besoin d'une colonne et en fait pas parce que nous devons avertir tous ceux qui se abonnés à cette annonce de forum spécifique. C'est pourquoi nous devons fournir les deux valeurs ici. Après cela, nous vérifierons ici pour notre utilisateur et ici nous devons rencontrer un événement d'échec. Dans notre cas, ce sera l'échec de la suppression des colonnes. Ici, cet utilisateur n'est pas autorisé, et ici nous avons notre catch et nous pouvons utiliser ici les mêmes colonnes delete failure avec notre message d'erreur get. Ici. Au lieu du modèle de tableau, nous utiliserons notre modèle de colonne. Ici, nous supprimons un enregistrement par point de données, et voici l' ID de la colonne car nous devons supprimer notre colonne non née et ainsi rencontrer notre succès. Mais ici, nous allons essayer de réussir pour notre suppression de colonne, et voici le succès. Et en fait, nous sommes déjà prêts avec notre backend. Ce que je veux faire maintenant est de copier-coller ces événements de socket car nous allons l'utiliser sur le client. C'est ainsi que je vais copier-coller des colonnes, supprimer le succès et l'échec, et que le champion désactivé définit l'application source des clients. Et ici, nous avons des types partagés et voici nos événements de socket où nous pouvons coller des colonnes, les supprimer. Notre prochaine étape sera Data, Service, Insight shared services columns. Parce que nous voulons implémenter la suppression de colonne exactement ici. Nous pouvons écrire une nouvelle colonne de suppression de méthode, et nous savons que nous obtenons ici notre ID de tableau, qui est une chaîne, et également notre ID de colonne, qui est également une chaîne. Et nous obtenons un grand vide parce que nous voulons juste émettre notre événement socket. C'est pourquoi ici nous pouvons écrire ce service de socket et nous rencontrons, et nous utilisons ici nos événements de socket dans m colonnes de points delete. Et nous devons fournir comme second paramètre et un objet avec notre AD de tableau et également l'ID de colonne, que nous obtenons à partir des paramètres. Après cela, nous devons mettre à jour notre service de conseil. Et juste pour vous rappeler, ennuyez les services exactement là où nous stockons notre flux de colonnes. Ce qui signifie en fait que nous devons implémenter la suppression de la colonne. Donc, ici en bas, je peux créer une méthode de suppression de colonne. Et ici, nous avons juste besoin de notre colonne. Nous n'avons pas besoin ici d'idée de tableau car nous appellerons cette méthode uniquement depuis le composant pour mettre à jour notre flux. Nous connaissons donc ici l'ID de colonne que nous voulons supprimer et nous sommes annulés, et maintenant nous voulons mettre à jour la liste de nos colonnes. C'est par ici. Nous pouvons créer une propriété mise à jour des colonnes. Et ici, nous pouvons accéder à notre flux avec ces colonnes. Ici, nous obtenons notre valeur. Et après cela, nous voulons filtrer notre tableau. En fait, nous avons accès à chaque colonne et nous voulons rejeter cet identifiant de colonne spécifique. C'est pourquoi ici nous pouvons vérifier que ID de colonne n'est pas égal à nos noms de colonne, qui ont été passés en tant que paramètre. Dans ce cas, nous obtenons exactement la même liste de nos colonnes, mais sans cette colonne. Et après cela, nous devons simplement mettre à jour notre flux. Pour cela, nous pouvons écrire ces colonnes ensuite et nous les jetons à l'intérieur de nos colonnes mises à jour. Donc, en fait, cette méthode mettra à jour notre flux et supprimera une colonne du flux. L'étape suivante consiste à mettre à jour notre composant. Et en fait, nous avons déjà changé notre code HTML. Ici, nous avons maintenant une image, mais nous devons l'attacher, entendre un événement de clic. Et voici ce que je veux faire, je veux supprimer une colonne. C'est ainsi que nous pouvons fournir une colonne de suppression de méthode, et nous devons passer à l'intérieur de com point id. Et ici en haut, comme vous pouvez le voir, nous avons accès à notre colonne. Nous pouvons maintenant sauter dans notre composant et créer cette méthode. Donc, la colonne Dalit ne reçoit qu'un seul argument, qui est notre ID de colonne que nous voulons supprimer et la banque où elle devient nulle. Et maintenant, à l'intérieur, nous voulons simplement appeler notre service partagé. Voici donc ce monde de service de colonne ou Hérode. Maintenant, nous avons une colonne de suppression de méthode à l'intérieur. Nous devons fournir un AD de tableau, et en fait, il s'agit de l'AD du tableau et ensuite de l'ID de colonne. Cette ligne de code enverra donc un événement à notre backend pour supprimer cette colonne et avertir tous nos clients. Et maintenant, il suffit de s'inscrire dans notre abonnement ici en haut de la page pour mettre à jour notre liste de colonnes. C'est là qu'ici nous pouvons copier-coller quelque chose similaire et les colonnes soudées ici créent du succès. Je vais le copier, le coller et le coller ici en bas. Et ici, nous avons supprimé et effectivement supprimé avec ne pas l'avoir fait correctement. Je veux revenir à l'intérieur de nos colonnes de contrôleurs. Comme vous pouvez le voir ici, nous avons le tableau de données i2 qu'ils émettent, et ici je viens de changer le nom des colonnes supprimer le succès, mais ce n'est pas suffisant. Nous devons fournir ici quelques données car en fait tous nos clients doivent savoir quelle colonne nous devons supprimer. C'est là que, en tant que deuxième paramètre, je veux fournir une colonne de points de données. Et dans ce cas, nous recevons suffisamment d'informations à tous nos clients concernant notre suppression de colonne. Maintenant, nous pouvons revenir à l'intérieur du composant de la carte et voici notre écoute. Et en fait, nous écoutons nos chroniques, supprimez le succès. Et ici, ce que nous récupérons n'est pas une colonne, mais juste la chaîne que nous voulons supprimer. C'est pourquoi nous pouvons écrire ici qu'il s'agit d'un ID de colonne et il s'agit en fait d'informations suffisantes pour le client supprime une colonne. C'est pourquoi nous pouvons désormais appeler board service point. Et voici notre colonne de suppression. Et à l'intérieur, comme vous pouvez le voir, nous fournissons la colonne D, et c'est exactement ce que nous avons ici depuis notre back-end. En fait, nous avons tout implémenté pour notre fonctionnalité. Allons voir si ça fonctionne. Tout d'abord, vérifions le backend nous avons ici un problème. La colonne Supprimer n'existe pas sur le type et voici les colonnes. Allons voir ça. Je vais revenir à l'intérieur de nos manettes, et voici notre tableau de suppression. Voilà donc le problème. J'ai copié la méthode Delete Board collée, mais ils ne l'ont pas renommée. Il devrait s'agir d'une colonne de suppression. Vérifions-le encore une fois. Je l'enregistre et je saute dans la console. Et comme vous pouvez le constater, nous n'avons aucune erreur. Voyons maintenant notre client. Tout va bien. Passons donc à notre tableau. Comme vous pouvez le constater, nos pages fonctionnent. Et maintenant, je peux cliquer dessus pour supprimer, par exemple, cette colonne complète. Je clique dessus et comme vous pouvez le voir, il a complètement disparu. Et ce qui est plus intéressant, nous pouvons dupliquer l'onglet et essayer de supprimer la colonne suivante, F, d, d, etc. Je frappe ici croix et elle est supprimée non seulement ici, mais aussi dans cet onglet. Et tout est automatiquement mis à jour, ce qui signifie que nous avons réussi supprimer les colonnes de notre application. 41. Mettre à jour la colonne: Dans cette vidéo, nous devons implémenter l'une des dernières fonctionnalités de notre tableau, savoir la mise à jour de la colonne. Et comme vous pouvez déjà le comprendre, il sera très similaire de supprimer la colonne. La seule différence est que nous aurons un intérieur des terres par rapport à la mise à jour, mais beaucoup de choses resteront exactement les mêmes. une réunion, je suis un événement socket où l'obtenir sur le backend et quand nous définissons tous nos clients, c'est y. Implémentons-le ensemble maintenant, tout d'abord, je veux revenir à l'intérieur de notre serveur types de sources. Et ici, nous devons créer des événements de socket internes dans nouveaux types et une boule de poils à la note des colonnes de tête, je peux le copier-coller et renommer deux colonnes de mise à jour. Nous aurons donc ici les colonnes Mise à jour, mises à jour des colonnes, le succès et l'échec. Ici, sur la droite. Ensuite, nous pouvons le modifier pour le mettre à jour. Puis un succès de date de naissance et un échec de mise à jour après ce retour de lithium dans notre sororité S et ici et votre propre événement. Donc ici, je copie la suppression de colonne collée, et changeons-la pour la mise à jour de nos colonnes que nous venons de créer. Et ici, nous utilisons notre contrôleur de colonnes, mais ici nous n'obtenons pas une colonne de suppression mais une colonne de mise à jour. Maintenant, nous devons créer cette action, mais en fait nous pouvons la copier-coller depuis nos tableaux car ici nous avons déjà implémenté le tableau de mise à jour et il sera super similaire. C'est pourquoi je veux copier-coller complètement et coller en bas à l'intérieur de notre contrôleur de colonnes. Ici avec tout d'abord, il faut changer le nom. Nous avons donc ici notre colonne de mise à jour et en fait je veux garder exactement la même chose avec la pauvre dame et les champs. Nous avons donc exactement la même structure. C'est là que la seule chose dont nous avons besoin est l'ID de colonne, qui est une chaîne. Le seul champ que nous mettons à jour ici est notre titre. Changeons maintenant notre contenu. Ici, nous aurons des événements de socket dans m et ici ont été créés échec de mise à jour de colonne. Et changeons aussi notre piège ici sera également l'échec de la mise à jour de la colonne. Nous devons maintenant changer de logique. Au lieu du modèle de Bohr, nous aurons ici le modèle de colonne et nous le ferons affiner à la fin de la mise à jour. C'est très bien. Mais ici, nous voulons obtenir non pas un tableau, mais une colonne par un identifiant de colonne. Et ici, nous avons des champs de données. C'est tout à fait normal et la colonne mise à jour en arrière et le tableau non mis à jour. Maintenant, nous voulons émettre à tous nos clients notre événement, qui sera le succès de la mise à jour des colonnes. Et ici, nous devons fournir notre colonne mise à jour afin qu'ils puissent la modifier sur le client. Notre backend est un succès, il a changé. Nous devons maintenant mettre à jour notre client. Et tout d'abord, je veux copier/coller ces trois nouveaux événements, qui sont les colonnes mise à jour, succès et échec. Revenons maintenant à l'intérieur de l'application source de nos clients. Et ici, nous n'avons pas dit de perdre nos types d'événements socket. Et ici, en bas, j'ajouterai colonnes succès et échec de la mise à jour. Maintenant, nous voulons changer notre service de chemises, qui est responsable de faire des demandes à notre API. Voici les colonnes des services et nous avons déjà implémenté la colonne de suppression, mais nous devons maintenant faire notre nouvelle colonne de mise à jour de méthode. Ici, nous savons déjà ce que nous obtenons. Nous obtenons ici notre identifiant de tableau, qui est une chaîne. Après cela, nous obtenons notre ID de colonne, qui est également une chaîne. Enfin et surtout , nos champs, qui sont un objet avec un titre, qui est une chaîne. Et de retour, nous sommes annulés parce qu' ici, nous émettons simplement un événement. C'est là que se rencontrent les sockets service Datta et nous voulons utiliser ici socket même les voir point. Et ici, nous avons l'action de mise à jour de nos colonnes comme deuxième paramètre. Nous devons tout fournir. Tout d'abord conseil AT deuxième colonne nécessiteux. Enfin, les films. Et grâce à cela, notre service est complètement prêt. Nous devons maintenant mettre à jour notre service de conseil afin de pouvoir modifier notre composant. C'est pourquoi je vais sauter dans notre application, Board Services, Board service. Et ici, nous avons déjà créé un tableau de mise à jour des méthodes. C'est ici que nous allons créer notre méthode de colonne de mise à jour. Et nous savons que ce groupe souhaite mettre à jour un seul enregistrement dans notre tableau. Et ici, la seule chose que nous voulons obtenir est une colonne un peu datée. C'est ce que nous avons obtenu de notre back-end. Ici. Nous obtenons l'interface complète de la colonne et nous voulons être annulés. Maintenant, voici notre idée. Nous devons cartographier chaque colonne et mettre à jour cette colonne tous les jours. C'est ainsi que nous pouvons récupérer nos colonnes mises à jour. Et ici, nous voulons tout d'abord tirer la valeur de notre flux. Donc, ici, nos colonnes recevront la valeur et nous allons mapper à travers ce tableau. Voici donc la carte et nous avons accès à chaque colonne ici nous devons écrire notre logique. Donc, si notre identifiant de colonne que nous parcourons en boucle est égal à notre identifiant de point de colonne mis à jour, alors nous devons faire notre magie. Et si ce n'est pas le cas, nous voulons simplement retourner notre chronique sans mise à jour. Maintenant, que voulons-nous faire dans la boucle 1 pour mettre à jour cette colonne spécifique. C'est pourquoi je souhaite fusionner notre colonne avec le titre. Et ici, nous fournissons un titre de point de colonne mis à jour. Dans ce cas, nous ne mettons à jour qu'une seule veste lorsqu'elle correspond. Dans un autre cas, il suffit de renvoyer notre colonne. Après cela, il ne nous reste plus qu'à mettre à jour notre flux avec ces colonnes. Nous sommes fournis dans nos colonnes mises à jour, donc notre méthode est complètement prête. Il ne nous reste plus qu'à mettre à jour notre composant. Revenons donc à l'intérieur de notre composant de tableau, et nous avons ici le titre de notre colonne, mais au lieu d'un simple titre , nous devons suivre la tendance ici. Essayons-le en ligne, et fermons-le directement ici. Maintenant, tout d'abord, nous devons définir ici notre classe qui sera ajoutée sous forme de colonne. Ensuite, nous devons fournir le texte par défaut. Et ici nous voulons écrire le nom de notre colonne, qui sera colonne, le titre, mais doit également fournir ici une valeur. C'est y, voici le titre, qui est le titre de notre colonne. Et le dernier est notre rappel, qui est géré par soumission. Et en fait, cette méthode nous pouvons nommer, mettre à jour, le nom de la colonne, et à l'intérieur, nous obtenons Festival, notre événement, qui est en fait le nom de notre colonne. Et ici, nous devons également fournir l'ID de colonne car ce n'est pas le cas Groupon sait pour quelle colonne nous voulons mettre à jour cet écran spécifique. Maintenant, créons cette méthode dans notre composant. Donc, en bas, je veux ajouter le nom de la colonne de mise à jour. Et voici tout d' abord le nom de notre colonne, qui est la chaîne de notre amusement intérieur. Et deuxièmement, nous obtenons ici notre identifiant de colonne. Dans ce cas, nous savons ce que nous devons mettre à jour et ce que nous voulons faire ici. Nous voulons simplement appeler notre méthode à partir de shred columns. C'est y, ici, ce service de colonne, et voici notre colonne de mise à jour de méthode que nous venons de créer. Tout d'abord, nous devons fournir ici notre ID de tableau, ID de colonne, ainsi que nos champs. Dans notre cas, nous n' avons qu'un seul champ, qui sera notre titre, qui est le nom de notre colonne. Du côté client, tout est prêt, mais il faut s'abonner au succès d'une date de naissance dans la colonne. C'est pourquoi nous devons aller ici en haut, sur maintenant un service socket. Et en fait, nous avons déjà notre mise à jour du tableau, ce qui signifie en fait que je veux copier-coller lignes et les modifier. Parce que de retour, nous aurons interface de notre colonne après avoir mis à jour notre colonne. Et en fait, ici, nous voulons nous abonner pour les appeler succès de mise à jour. Et ici, nous ne recevons pas de tableau mis à jour, mais nous recevons un numéro de colonne mis à jour devons appeler une autre méthode de notre service de forum. Et cette méthode sera mise à jour de la colonne. Et à l'intérieur, nous fournissons notre colonne mise à jour, ce qui signifie qu' avec ce code, tous nos clients seront avertis et nous mettrons à jour cette colonne particulière. Voyons si cela fonctionne ici sur le backend, tout va bien. Ici, sur le client, nous n'avons aucune erreur. Passons au navigateur. Et comme vous pouvez le voir ici, j'ai ce joli nom et maintenant je peux cliquer dessus parce que c'est notre entreprise intérieure et pas seulement le titre. Maintenant, essayons-le ici, mis à jour et j'appuie sur Entrée. Et comme vous pouvez le voir, il a été mis à jour et reporté le chargement de la page, puis ce code est également taché, qui signifie en fait que nous avons réussi ce changement sur le backend et ils l'ont fait tous nos clients. Et ici, si je passe au deuxième onglet, il a exactement la même apparence car il a également été mis à jour et notifié via socket IO. Cela étant dit, nous avons implémenté avec succès notre fonctionnalité de mise à jour dans la colonne. 42. Se désabonner: Dans cette vidéo, je veux parler de désinscription parce qu' en fait, nous avons un problème. Regardons notre test des composants de la carte. Ici, nous avons nos auditeurs d'initialisation et nous utilisons point subscribe pas mal de fois. Et en fait, vous devez savoir que dans Angular chaque fois que vous écrivez le mot subscribe, vous êtes en danger parce que vous y créez un abonnement. Et cet abonnement sera là jusqu'au bout du monde. Ce qui signifie, par exemple, que nous quittons notre conseil d'administration et que nous passons à un autre tableau. Et tous ces abonnements sont déjà là et ils ne seront jamais détruits parce que tous les abonnements n'ont rien à voir avec notre composant et que l'angulaire ne le fait pas n'importe quoi à leur sujet. Mais ici, il est important de mentionner si nous parlons dans Angular de client HTTP, nous ne devons pas nous en désabonner. Ce n'est pas obligatoire car angular se désabonnera automatiquement, ce qui signifie en fait que lorsque nous utilisons ce routeur, abonnez-vous aux événements, c'est tout à fait correct. Ici, nous pouvons également consulter nos données de récupération et ici nous utilisons également abonnez-vous pour nous ennuyer. Et pour cela, nous devons ouvrir notre ennuyer et vérifier ce que nous avons ici. Et en fait c'est un très gros Gad, qui est un client HTTP, qui signifie que ce code est parfaitement correct et que nous ne devrions pas nous désinscrire. Mais en fait, je préfère me désinscrire partout, dans chaque application où un abonnement C, parce que vous ne savez jamais quelle est exactement cette méthode get board ? Est-ce vraiment un client HTTP ou est-ce juste un wrapper ? Et tu dois vraiment te désinscrire. Et la question est de savoir comment vous pouvez vous désinscrire dans votre application pour la rendre plus confortable. Et il existe de nombreuses façons de le faire. Et en fait, nous voulons toujours désabonner lorsque nous détruisons un composant. Et généralement, lorsque ce composant Turner, lorsque nous changeons, ce qui signifie en fait que nous pouvons écrire quelque chose comme cet abonnement au forum est égal. Et ici, nous obtenons le résultat de notre abonnement et le résultat de l'abonnement subscribe easy, qui signifie en fait créer cette propriété en masse , puis directement dans notre moteur, Détruire l'abonnement Boards point désabonnement. C'est tout à fait valide, mais ensuite nous allons créer de nombreuses propriétés et ce n'est pas très confortable. C'est pourquoi il existe de meilleurs moyens de le faire. Je voulais vous montrer une approche simple que vous pouvez utiliser. Ce que je veux faire dans mon composant de tableau, je veux créer une autre propriété et ils veulent nommer cette propriété se désinscrire. Et en fait, je veux mettre le dollar ici parce que ce sera un flux. Et ici, je veux assigner un nouveau sujet et en fait aussi le sujet comportemental des jeunes au sein de notre service de conseil. Mais ici, nous avons un nouveau sujet avec void, et je l'appelle simplement, la principale différence entre le sujet et le sujet comportemental est le sujet comportemental a toujours une valeur initiale et alors disons, sujet, nous n'avons aucune valeur initiale. Maintenant, nous voulons ajouter des outils sur destroy, ce qui signifie en fait que nous devons créer en G lors de la destruction. Et maintenant, nous parlons ici de l'Allemagne dedans. Et ici, nous pouvons écrire en juin destroy et ce que nous voulons faire à l'intérieur, nous voulons écrire ce point de désabonnement ensuite, donc nous allons colonne la valeur suivante. Et après cela, ce point de désabonnement est terminé, ce qui signifie qu'après avoir détruit ce composant, nous ne voulons pas obtenir de nouvelles valeurs dans ce désabonnement. Et maintenant, nous pouvons utiliser ce désabonnement partout pour ignorer les abonnements. À quoi ressemble-t-il ? En fait, ici, nous n'avons pas besoin de l'utiliser, mais nous devons l'utiliser dans le service socket car il s'agit d'un abonnement personnalisé. Et pour le faire avant de nous abonner, nous pouvons simplement l'essayer point pipe et à l'intérieur nous voulons utiliser la méthode take until et à l'intérieur ils veulent mettre ce désabonnement que nous venons de créer, ce qui signifie en fait que nous prenons, d'accord, nous devons prendre de nouvelles valeurs et avoir cet abonnement jusqu'à ce que ce désabonnement soit valide. Au moment où nous sommes Colin avec Bond, venez ici pour nous abonner. Ce qui signifie en fait que dans chaque cas, lorsque nous avons un abonnement, nous pouvons simplement l'essayer avant par adhésion jusqu'à ce désabonnement. Et nous sommes prêts à occuper de la destruction de nos composants . Ici, nous aurons terminé et cette logique ne se produira jamais. C'est vraiment une variante confortable et facile à mettre en œuvre, se désabonner. C'est pourquoi je souhaite copier-coller ce code et le mettre dans chaque leçon que nous écrivons ici juste avant de m'abonner. Dans ce cas , nous sommes du bon côté, et nous n'appellerons pas ce code après avoir détruit un composant. Maintenant, vous voulez certainement savoir si cela fonctionne vraiment comme ça. C'est pourquoi, pour le tester, nous pouvons simplement commenter les prises jusqu'à ce que, par exemple, dans les colonnes, les mises à jour d'accès. Mais en fait, cela ne fonctionnera pas comme ça parce que lorsque nous quittions le forum, Bacon arrête d'envoyer des événements pour demander, c'est pourquoi ce que nous pouvons faire juste pour les tests est défendu dans les colonnes des contrôleurs. Et voici notre colonne de mise à jour de méthode, et ici nous avons notre fonction sont vos deux. Et ici, nous devons trouver uniquement les clients qui se trouvent dans cette partie spécifique. Juste pour des raisons de test, je vais supprimer ici pour avertir tous les clients parce qu'ils veulent vous montrer que cet abonnement est toujours là quand nous quittons le forum. Alors maintenant, je veux juste essayer de me connecter à la console. Colonne mise à jour. Voici notre rubrique mise à jour. Allons voir ça. Je recharge la page, je passe à ce point et j'essaie de mettre à jour la colonne. Comme vous pouvez le voir, il s'agit de notre journal de console, et ici nous avons également le journal de la console. C'est très bien. Mais maintenant, nous retournons à nos planches, nous n'avons rien et notre composant a été détruit. Maintenant, dans le deuxième onglet, nous allons mettre à jour cette colonne. Et comme vous pouvez le voir ici, insérez la première étape. Nous avons cette colonne mise à jour et nous l'obtenons parce que cet abonnement est toujours suspendu avec ne pas désabonner de notre code et indiqué pour le faire, nous pouvons simplement décommenter jusqu'à ce que , Essayons ça. Maintenant, nous allons plonger dans notre application. Nous recevons une colonne mise à jour où le champion revient à nos tableaux. Et maintenant, nous pouvons essayer de mettre à jour notre chronique. Mais comme vous pouvez le voir dans la première étape, nous n'avons pas reçu de message car ici, il n'a pas été soumis à cette prise avant, est pourquoi il est si important de se désinscrire de tous nos abonnements. Maintenant, changeons ce code. Tout d'abord, nous n'avons pas besoin de ce journal de console. Et deuxièmement, je vais sauter dans les colonnes de notre contrôleur et changer le code en ID de base de données i2. Donc, dans la vraie application, je vous recommande vivement de vous désinscrire de tous vos abonnements. 43. Module de tâche et composant de base: Dans cette vidéo, nous commençons nouvelle fonctionnalité intéressante, puis parlons ici du modèle de tâche de fonctionnalité. Qu'est-ce que cela signifie ? En fait, comme vous pouvez le voir ici, où à l'intérieur du tableau et lorsque nous cliquons sur tâche spécifique à l'intérieur de ce point, en fait, nous devons ouvrir ici un modèle, mais ce n'est pas aussi simple que cela, parce que ce que nous voulons pour ce faire, nous voulons modifier notre itinéraire. Maintenant, nous avons le slash board slash board Id. Et en fait, lorsque nous ouvrons une tâche après le rechargement de la page, nous voulons voir la même tâche. Et le moyen le plus simple de l'implémenter est évidemment le routage. Nous voulons donc, au moment où nous sommes ouverts, une URL de tâche comme barre oblique ID du tableau barre oblique tâches slash KD de la tâche, ce qui signifie en fait que nous avons un itinéraire imbriqué à l'intérieur du tableau. Et en fait Angular nous permet de gérer très simplement les sécheresses des enfants. Pourquoi avons-nous besoin d' une sécheresse infantile ? Parce qu'ils sont ici, nous voulons tout d'abord rendre l'ensemble du tableau et en plus rendre ce modèle, qui signifie en fait que notre modèle, sera ici en haut et en dessous de notre modèle, nous verrons l'ensemble du conseil. Et c'est extrêmement important parce qu'en fait, même à l'intérieur du modèle, nous allons même à l'intérieur du modèle, récupérer le tableau complet. Et en fait, tout ce composant sera rendu tel qu'il est sans aucune modification. Et ce qui est également intéressant dans notre modèle de tâches, nous utiliserons ces informations du tableau, et c'est exactement ce que nous avons implémenté ici. Ici, dans notre source client, notre application, services de conseil, notre service Bot, nous avons trois flux. Notre colonne de tâches et, mais, et c'est incroyable parce que maintenant, dans notre modèle de tâche, nous pouvons lire toutes nos tâches, trouver la tâche nécessaire par cet ID dans l'URL que nous allons implémenter dans une seconde , puis Il suffit de rendre ces informations de la tâche sans demandes supplémentaires. Et dans cette vidéo, je veux commencer par les bases de ce modèle de tâches. Ici, nous voulons créer un composant de base et lier correctement notre route. Et pour cela, je veux revenir à l' intérieur de notre module de carte. Et voici notre itinéraire avec des tableaux slash, slash board Id. Et ici, nous voulons avoir une sécheresse infantile. C'est ici que nous pouvons écrire des enfants et c'est un tableau. Ici, nous avons également un objet avec un chemin, qui sera une barre oblique Tâches. Et voici l'ID de la tâche, ce qui signifie que nous prenons ici le chemin parent et le chemin enfant. Et ensemble, nous aurons notre chemin d'identification de tâche ici, mais nous devons également fournir un composant que nous créerons en une seconde. Il s'agit de notre composant de modèle de tâches. Mais nous n'avons pas non plus mis en œuvre de changement de route. Et pour cela, je veux sauter à l'intérieur de notre carte de composants. Et voici le composant HTML acheté. Et comme vous pouvez le voir ici, nous avons un lien vers notre mission. C'est cette tâche de classe div, et voici l'énergie pour la boucle. Et en fait, nous voulons écrire un événement click. Et voici ce que nous voulons faire, nous voulons ouvrir une tâche. Et pour cela, nous avons juste besoin de notre identifiant de point de tâche et ce que nous voulons faire dans cette méthode, c'est simplement changer de route. C'est par ici. Créons cette tâche ouverte dans le composant board. Et ici, nous obtenons notre ID de tâche, qui est une chaîne. Le dos devient vide. Et maintenant, nous pouvons simplement utiliser notre routeur pour changer de route. Ici, nous pouvons écrire ce routeur point navigate, et nous utilisons here navigate et non navigate by URL parce que nous voulons passer à l'intérieur d'un tableau. Ici. Tout d'abord, nous avons des tableaux, puis nous concaténons cette chaîne avec cet ID de tableau, puis une virgule. Et nous avons ici nos tâches, et ici nous aurons notre ID de tâche. Comme vous pouvez le voir, il est beaucoup plus simple d'écrire navigate avec array, puis de naviguer par URL, où nous devons concaténer cette chaîne nous-mêmes. Notre événement click est donc complètement prêt, et il ne nous reste plus qu'à créer ce nouveau composant. C'est pourquoi, à l'intérieur de notre carte, nous parlons toujours de composants d'insert de module de carte. Nous voulons créer notre nouveau composant et ce sera notre modèle de tâche. Maintenant à l'intérieur avec tout d'abord, besoin de créer un modèle de tâche Ts et aussi un composant point de modèle de tâche point HTML. Et maintenant, dans le code HTML, je veux directement ancrer l'ensemble du balisage de notre modèle sans aucune logique. Dans ce cas, nous pouvons voir directement que le terme modèle fonctionne et que le routeur fonctionne également. C'est ici que nous allons écrire l'ensemble du marché. Donc ici tout d'abord, nous avons notre conteneur de modèle de tâche de classe, et ici nous ne lierons aucune donnée pour le moment. Maintenant, à l'intérieur de cette div, nous devons l'essayer encore plus profondément, et ce sera notre en-tête modal de tâche. Fermons cette div et à l'intérieur, nous afficherons plus tard le titre de notre tâche sous forme de ligne. Et après notre forme intérieure, nous avons besoin de rendre une image. Et en fait, ici sera source slash assets slash fermer l'icône point SVG. Et ici, nous devons également fournir une classe qui sera une tâche. Modèle proche et en fait je ne l'ai pas écrit correctement. Cette image doit figurer après le titre de la tâche entreprise en ligne. Nous parlons donc ici de l'en-tête modal de la tâche. Et après l'en-tête modal du crépuscule, nous voulons créer la prochaine div, qui sera le corps modal Task. Fermons ici notre div et à l'intérieur nous voulons créer un motif car nous devons regrouper nos éléments. Donc, à l'intérieur de cette div, nous voulons créer notre formulaire plus tard. Vous pouvez vous demander, d'accord, mais pourquoi nous utilisons le cabinet Justin Lin et ici nous voulons créer un vrai cabinet parce que plus tard, nous aurons également besoin d'une sélection pour changer notre colonne. C'est pourquoi il est beaucoup plus facile à utiliser pour ce forum. C'est par ici. Créons un formulaire pour l'instant sans aucun groupe ferme, il suffit de fouetter le verre. Et ici, nous aurons notre conteneur de sélection de colonne. Fermons ce formulaire. Et dans notre formulaire plus tard, nous allons afficher ici une sélection, mais pour l'instant nous ne l'avons pas. C'est ici, il suffit de sélectionner la colonne. Et après cette entreprise voudra créer un motif où nous aurons notre description de modèle de tâche. Et ici, nous aurons notre div avec l'étiquette de description du modèle de tâche de classe. Et puis nous allons simplement écrire une description de mot. Après cette div, nous aurons un formulaire en ligne pour notre description. Voici donc la description du formulaire en ligne que nous allons créer ultérieurement. Et maintenant, après cette div que nous avons créée, il faudrait créer un motif. Et ici, nous aurons nos actions de modèle de tâche à l'intérieur avec tout d'abord, aurons besoin d'une classe supplémentaire et ce seront actions de modèle de tâche étiquetées et dans cette div, nous allons simplement écrire des actions. Et après cela, nous devons créer une autre div. Et à l'intérieur de cette div, nous allons emballer un motif avec classe, tâche, modèle, actions, action. Ici, fermons cette div et puis à l'intérieur nous pouvons rendre une image avec des acides slash source slash trash SVG. Et voici notre classe qui sera chargée de l'icône des actions de modèle. Et après la seconde, nous allons simplement rendre un mot supprimer. Et après tout le balisage à la fin, nous devons rendre une toile de fond, afin que l'ensemble de notre tableau soit un peu caché. C'est ici que nous devons créer div avec toile de fond du modèle de tâche de classe ici Fermons cette div afin que notre balisage soit complètement prêt. Il ne nous reste plus qu'à créer ce composant. Créons d'abord ici une classe qui sera notre composant modal de tâche. En haut, nous avons maîtrisé notre composant, et inscrivons-nous à l'intérieur. Tout d'abord, un sélecteur, il sera chargé modèle. Et après cela, une URL de modèle et soudée, plus il est lourd composant modal HTML, mais ce n'est pas tout. Nous devons fournir une classe supplémentaire pour l'ensemble de l'enveloppe de ce composant. Dans ce cas seulement, notre marché sera correct. Et ici, nous devons directement lier l'hôte. Et là, je donne un cours de perspicacité. Ici, nous pouvons écrire des classes égales au modèle de tâche. Et si vous n'avez jamais écrit quelque chose comme ça, nous utilisons une telle notation lorsque nous n'avons pas besoin d' appliquer cette classe au plus profond de ce composant, mais nous voulons exactement appliquer une classe sur notre élément composant. Nous avons donc créé quelques composants de base. Voyons maintenant si cela fonctionne. Alors Festival ici, nous avons beaucoup d'erreurs. Par exemple, ici dans le module de tableau ne peut pas trouver le composant modal de la tâche. Donc tout d'abord, nous devons sauter à l'intérieur de notre module de carte. Et ici, nous devons entrer notre composant de modèle de tâche. Et nous devons également le fournir ici dans la déclaration, il s' agit d'un composant de modèle de tâche. Vérifions-nous à nouveau avec ne pas avoir d'erreurs ici. Je vais recharger la page et ils ne voient aucune erreur dans la console maintenant. Mais ce que nous devons faire maintenant, nous devons cliquer sur l'une des tâches. Par exemple, voici ma première tâche et je ne fais que cliquer. Comme vous pouvez le voir, il ne s'est rien passé. Mais à l'intérieur de la sécheresse, nous pouvons voir maintenant slash boards, slash notre board ID, slash tasks et slash le d de notre tâche que nous venons d'ouvrir. Et maintenant, vous pouvez vous demander, d'accord, mais pourquoi nous ne voyons pas notre composant et en fait nous n'avons pas tendance à l'exutoire pour nos enfants, ce qui signifie en fait à l'intérieur de notre tableau, intérieur du code HTML du composant du tableau, quelque part dans notre balisage, par exemple, en bas, nous devons afficher Zhao Outlet comme nous l'avons fait dans notre composant d'application. Alors, fermons simplement la prise du routeur et maintenant cela doit fonctionner. Je vais recharger la page. Et comme vous pouvez le voir, nous voyons notre modèle par là parce qu'en fait c'est la route. Et maintenant, chaque fois que je recharge la page, nous voyons notre parent en arrière-plan. Et ici, nous voyons notre modèle et avons déjà un balisage de base pour ce modèle, qui signifie qu'il fonctionne pleinement. Mais maintenant je veux corriger un énorme écueil qui sera super difficile de déboguer ce dont je parle. Comme vous pouvez le voir ici à l'intérieur de notre composant de tableau, nous avons ici une vérification d'itinéraire et en fait ici, en haut, nous nous sommes abonnés aux étoiles de navigation de cet événement. Et ici, nous déclenchons la naissance vivante. Que fait le live board ? En fait, nous rencontrons un événement socket pour notre back-end, ce qui signifie que nous sommes en train de nous désinscrire dans ce socket actuel, notre utilisateur actuel de vous est allé sur ce point, qui en fait signifie que nous en étions là, slash board slash AD. Et maintenant, nous obtenons des événements. Tout va bien. Mais au moment où nous ouvrons notre modèle, nous avons changé de cap. Et en fait, cela signifie que nous sommes ici dans cette IV et que nous voyons ici en direct ce que nous pouvons facilement vérifier. Par exemple, ici je vais simplement l'essayer en direct, mais je recharge la page. Ça a l'air bien. Mais quand je saute nos tableaux et que je clique simplement sur ma première tâche. Comme vous pouvez le voir ici, nous allons quitter le conseil. Ceci est complètement redessiné car dans ce cas, nous ne recevrons aucune notification dans notre forum, mais nous avons déjà quitté le forum. C'est le comportement de Sean parce que nous ne voulons pas vivre une planche. Si nous ouvrons simplement le modèle, nous voulons toujours être sur cette page, mais nous pouvons le faire pour le réparer, nous avons juste besoin de vérifier notre itinéraire de barres obliques. Parce qu'en fait, si ici , au milieu de la sécheresse, nous avons des tableaux slash, cela signifie que nous restons toujours sur cette page. Parce que si nous revenons sur notre page de tableaux, avons ici que des tableaux à barres obliques et nous n' avons pas de barre oblique. Et puis c'est là que je peux écrire URL de point de fin et non d'événement. Et c'est l'URL complète que nous allons inclure, et nous vérifions que cette barre oblique d' URL spécifique , barre oblique de tableaux. Donc, ici, nous allons déclencher notre tableau de bord lorsque notre navigation a commencé. Et cette URL que nous allons utiliser n'inclut pas la barre oblique du port. Cette barre oblique est soit nos obligations simples, soit notre modèle de panneau unique était. Allons voir si ça fonctionne. Je clique ici sur ma première tâche et maintenant nous ne restons pas partie, qui signifie que tout fonctionnera bien. Et maintenant, mettons-nous en œuvre ensemble. Allez au tableau parce que ce n'est qu'une seule ligne que je veux faire. Je veux me lancer dans notre modèle de tâche. Et ici, en haut, nous avons cette image proche. Et en fait, ici , nous pouvons simplement créer un événement click et le nommer, aller au tableau. Maintenant, nous pouvons sauter directement dans notre modèle de tâche et créer cette méthode, allez dans Bond. Et que devons-nous savoir à l'intérieur cette composante pour accéder à notre tableau, nous devons lire cette année. Eh bien, tout d'abord, notre identifiant de tâche, nous en aurons besoin dans tous les cas. Et ici, surtout, board AD, ce qui signifie que nous allons écrire le même code que nous l'avons fait dans notre constructeur à l'intérieur de board. Alors inscrivons ici notre constructeur. Et à l'intérieur, nous devons d' abord obtenir notre conseil d'administration AT. Pour cela, nous devons utiliser route, ce qui signifie en fait que nous devons injecter notre route, qui est une route activée. Et maintenant, nous pouvons écrire cet instantané de point d'itinéraire, point, params, map, point, get. Et ici, nous essayons d' obtenir notre carte d'identité. Et comme vous pouvez le voir ici, nous sommes sous pression maintenant. C'est pourquoi il est très logique de vérifier si nous avons bien obtenu notre identifiant de tableau. Dans ce cas, nous pouvons enregistrer l'ID du tableau et l' AD de la tâche directement en tant que propriété dans notre composant. C'est ainsi que je veux tout d'abord créer notre tableau AD. C'est une chaîne. Et deuxièmement, tâche Katie, c'est aussi une chaîne. Maintenant, nous pouvons vérifier, accord, dupliquer un tableau. Si ce n'est pas le cas, nous devons lancer une erreur. C'est là que vous entendez une erreur. Et ici, nous pouvons dire impossible d' obtenir l'ID du forum à partir de l'URL. Et maintenant, nous devons faire exactement la même chose pour notre ID de tâche. C'est par ici. Essayons de charger AD et nous essayons d'obtenir une tâche différente. Et maintenant, nous voulons écrire une Eve de plus et vérifier ici pour la tâche AD. Nous pouvons donc écrire ici, impossible obtenir l'ID de la tâche à partir de l'URL. Mais en fait, ici, j'ai fait une énorme erreur c'est que vous pouvez voir que nous avons un identifiant de tableau et un identifiant de tâche, mais avec Taskade, c'est tout à fait correct. Il s'agit de cette carte de paramètres d' instantané d'itinéraire. Mais avec Boyd AD, ce n'est pas bien parce que nous voulons lire toutes ces informations de notre parent. C'est pourquoi ici nous devons essayer route point parent, et ici nous devons mettre un point d'interrogation puis mapper les programmes d' instantanés. Dans ce cas, nous le lirons directement auprès du parent. Et maintenant, après ces deux vérifications, nous pouvons simplement attribuer cette tâche AD, et c'est une chaîne maintenant, et ici nous avons également cet ID de tableau et c' est aussi une chaîne. Maintenant, nous pouvons implémenter la méthode go to board, mais pour cet utérus doit injecter ici. De plus, criez pour changer d'itinéraire. Nous avons donc notre routeur. Et maintenant, à l'intérieur de cette méthode, nous pouvons simplement écrire cet itinéraire et naviguer comme nous le faisions précédemment. Et ici, nous voulons monter à bord. Et comme deuxième paramètre, c'est cette carte. Dans ce cas, l'URL sera points obliques, une barre oblique ID de tableau. Allons voir ça. Je recharge la page ici. Je suis à l'intérieur de la tâche et je clique ici sur Cross. Et après avoir cliqué à l' endroit où ils sautent directement l'identifiant de la barre oblique et, surtout, nous n'avons pas eu de rechargement de page. Nous n'avons pas besoin de récupérer les données pour cette partie, car toutes les données sont là. Et maintenant, nous pouvons simplement ouvrir la deuxième tâche, la fermer, et c'est vraiment fluide et rapide car nous n'avons pas besoin de chercher des informations supplémentaires ici. 44. Obtenez des tâches et des colonnes: Dans ce coupon vidéo pour parler des flux de données au sein de notre modèle de tâches. C'est là que ce sera vraiment intéressant. Pourquoi est-ce que c'est ? Parce qu'ils disposaient déjà des données complètes pour chaque modèle dans notre tableau, nous avons juste besoin d'utiliser ces données et de les cartographier correctement dans le modèle de tâche. C'est là que la première chose que je veux faire est d'injecter ici notre service de conseil que nous avons déjà et non pas le service Boards pour ne pas travailler avec le gâteau, mais notre service de conseil avec l'État. Maintenant, ici, tout d'abord, je veux trouver la tâche. Et en fait ici par exemple, après cet identifiant de carte dans le constructeur, nous pouvons simplement écrire que cette tâche était plus grande et ce sera notre flux de la tâche en cours que nous avons ouverte. Et ici, nous pouvons simplement essayer ce service sportif. Et ici, nous avons notre flux avec toutes les tâches de notre conseil d'administration. Comme vous pouvez le constater, il est déjà disponible, mais nous n'avons pas besoin de l' ensemble de nos tâches. C'est ainsi que boop veut utiliser la carte. C'est ici que nous pouvons écrire par carte, puis citer où accéder à toutes nos tâches. Et maintenant, il ne nous reste plus qu'à trouver une tâche spécifique dont nous avons besoin pour ce modèle de tâche. Donc, ici, je veux simplement renvoyer les tâches, et à l'intérieur, nous aurons accès à chaque tâche. Et ici, nous obtenons simplement cette tâche par AD et nous la comparons à cette tâche AD qui se trouve en haut à l'intérieur du constructeur. Donc, en fait, cela transforme nos tâches de service de stream board. Et ici, nous ne faisons que cartographier la tâche unique et nous la récupérons. Mais ce n'est pas tout en fait après la carte. Je veux écrire un filtre et ici je veux fournir un booléen. Pourquoi faisons-nous ça ? Parce qu'en fait, il peut arriver qu'au début avec ne pas avoir de tâche parce que nous n'avons pas récupéré toutes ces tâches ici, ce qui signifie en fait où sauter dans le constructeur dans notre modèle, c'est notre flux. Tasks est simplement un tableau vide. Ici, nous avons essayé de le trouver et nous ne pouvons pas et nous obtenons un indéfini, mais indéfini qui ne l' intéresse pas rapidement. C'est là que j'ai écrit le filtre booléen et il va juste se débarrasser de chaque indéfini. Maintenant, dans ce cas, ce flux ne sera pas rempli tant que nous n'aurons pas trouvé une tâche. Essayons maintenant d'utiliser ce trim dans notre code HTML. Ici, en haut, nous devons créer un formulaire en ligne, le titre mis à jour de notre tâche. Et nous pouvons simplement écrire ici notre formulaire en ligne qui a déjà été utilisé des centaines de fois. Et puis côté tout d'abord, nous devons définir une classe, et ici nous aurons le modèle de tâche ajouté titre forum. Ensuite, nous voulons définir notre texte par défaut. Et en fait, nous devons fournir le titre de la tâche. Mais encore une fois, je veux l' écrire encore mieux. Nous pourrions utiliser ce flux dans notre code HTML. Mais comme je l'ai déjà dit précédemment, nous pouvons combiner différents flux de données au sein d'une même propriété, et c'est exactement ce que nous pouvons faire maintenant, ici, nous pouvons écrire ces données étaient plus grandes et nous pouvons les utiliser ici combiné dernier, tout comme nous l'avons utilisé précédemment et en fait plus tard, nous n'aurons pas ici juste une tâche au moins devra également obtenir ici une liste de nos colonnes par là, parce qu'en fait nous avons une sélection modifiez la colonne dans laquelle se trouve cette tâche. C'est par ici. Tout d'abord, nous aurons notre tâche et plus tard également élève ici, flux pour les colonnes. Et ici, nous devons mapper toutes ces données et nous voulons convertir notre tableau en objet. Ici. Tout d'abord, nous allons obtenir notre tâche. Ici. Nous avons juste besoin de retourner une tâche. Maintenant, nous devons créer ces données à l'intérieur de ce composant, cette façon ici en haut. Tout d'abord, nous devons changer le dollar des tâches en observable. Et ici, nous obtenons notre interface Task et jamais maintenant parce que nous l'avons vérifiée avec un filtre. Et maintenant, nous avons également besoin de données volées. Et ici, nous aurons également un observable de l'objet. Et nous avons ici notre tâche, qui est une interface de tâches. Maintenant, les données sont prêtes, en fait, dans le code HTML, nous pouvons utiliser ces données directement. C'est là que, sur notre division supérieure, je vais juste l'essayer. Et G, nous avons ici notre flux avec des données en tant que, et ici nous obtenons des données, ce qui signifie en fait que maintenant dans l'ensemble du fichier, nous pouvons simplement utiliser des données. Ceci est ici dans le texte par défaut, nous pouvons fournir une tâche de point de données, un titre de point. Et après cela, nous devons fournir un titre dans le formulaire, ce sera également le titre du point de la tâche de données. Et comme vous pouvez le voir, nous n'avons pas de flux ici, mais en fait, dans les données, nous avons créé une tâche Stream, qui est une chaîne basée sur notre flux où nous avons un tableau de tâches. Et la dernière chose est une sortie ici et ici nous avons notre handle submit, par exemple, update task name. Et ici, à l'intérieur , où organiser un événement. Et ils veulent simplement créer cette fonction à l'intérieur de notre composant. Je n'implémenterai rien ici. Nous obtenons donc le nom de notre tâche. Ce qui est une ficelle, le dos est vide. Et maintenant je veux juste écrire ici le journal de la console. Il s'agit du nom de la tâche de mise à jour, et nous obtenons ici notre nom de tâche. Vérifions-nous si cela fonctionne. Nous n'avons aucune erreur ici et ils vont simplement recharger la page. Et comme vous pouvez le voir directement ici, nous avons ma première mission. Comment fonctionne-t-il ? Ici, nous construisons notre tâche de flux, qui est basée sur nos tâches et après beaucoup de pages quand aucune erreur n'est générée. Et nous pourrions potentiellement l'obtenir. En fait, pas parce que nous avons ici à GE avec Chegg, mais c'est toujours agréable d'écrire un filtre booléen juste pour savoir que nous sommes du bon côté. Et voici notre première tâche à l'intérieur de ce flux de données. Ici, nous pouvons directement changer cela, ma première tâche et mise à jour. Comme vous pouvez le voir, il s' agit de notre journal de console. Évidemment, nous n'avons pas encore implémenté la mise à jour, mais nous sommes sur la bonne voie. Maintenant. Nous pouvons écrire exactement le même code avec la description de notre formulaire en ligne. C'est pourquoi je souhaite revenir en arrière dans notre code HTML. Voici notre description de l'intérieur des terres. Et en fait, ici, nous pouvons simplement l'essayer en ligne comme nous l'avons fait pour le titre. Et ici, nous avons déjà les données à l'intérieur du flux de données. C'est par ici. Tout d'abord, notre modèle de tâche de classe , édition, description, formulaire. Et après cela, tout d'abord, nous avons ici le texte par défaut. Ici, nous allons essayer la description de la tâche de données. Et ici, je veux écrire, ou parce qu'en fait, une description à l'intérieur de la tâche n' est pas obligatoire, ce qui signifie qu'à un moment donné, ce sera une chaîne vide. C'est ici, ajoutez une description plus détaillée. Après cela, nous voulons également définir notre titre. C'est pourquoi la description de la tâche data dot. Nous voulons également fournir ici à l'extérieur, et c'est notre première utilisation de textarea. C'est par ici. Le type d'entrée est la zone de texte a également la propriété Button doit être définie sur true. Et après ce bouton, le texte peut être défini pour enregistrer. Et nous devons également fournir ici que je gère la soumission. Ici, nommez-le, mettez à jour la description de la tâche. Ici, nous obtenons notre événement en fait. Ici, nous devons créer la fonction, mais ce sera exactement la même chose. C'est pourquoi je vais copier-coller, mettre à jour le nom de la tâche et simplement changer le nom et le journal de la console. Mais il ne s'agit évidemment pas d'un nom de tâche mais d'une description de tâche. Nous allons le modifier et le journal de la console et vérifier si cela fonctionne. Comme vous pouvez le voir ici, nous obtenons un type d'erreur non défini. Il n'est pas assignable au type string. En fait, c'est un point valide de TypeScript parce que notre From intérieur veut obtenir juste une chaîne et non une indéfinie ici. C'est pourquoi nous pouvons simplement l' essayer ou une chaîne vide. C'est très bien. Comme vous pouvez le constater, nous n'avons pas d'erreur. Nous obtenons maintenant ma description, qui est une vraie description de notre tâche. Nous pouvons le modifier et appuyer sur Entrée. Et en fait, ici c'est une zone de texte, donc Endo n'aide pas. Nous devons cliquer sur le bouton Enregistrer. Et ici, nous entrons dans la mise à jour de la console , la description de la tâche, ma description, ce qui signifie en fait que notre entreprise intérieure fonctionne et que notre flux fournit également des données rapidement. Et maintenant, parlons des colonnes. En fait, c'est encore plus facile. Nous devons simplement nous lancer , disons modèle de tâche. Et ici, nous avons besoin de ce flux pour les colonnes de notre tableau. Et en fait, nous n'avons même pas besoin de créer une propriété supplémentaire ici à l'intérieur du dernier combiné, je peux simplement écrire ce chien d'assistance de tableau. Et ici, nous avons un flux de colonnes et nous pouvons simplement compresser un tableau de colonnes ici dans ce composant, et c'est parti. Nous voici donc arrivés à notre tâche. Et deuxièmement, les colonnes présentes dans l'objet boop veulent renvoyer ce tableau de colonnes. Et maintenant, nous pouvons utiliser ces colonnes pour créer une sélection à l'intérieur de notre Markov. Donc, en fait, nous avons ici un formulaire et à l'intérieur, nous voulons écrire une sélection. Faisons ça maintenant. Tout d'abord, voici S Select et nous voulons écrire ici nom du contrôle de formulaire parce que nous devons le faire entrer dans Group. Pourquoi faisons-nous ça ? Parce qu' en fait, il est beaucoup plus facile de travailler avec des formulaires réactifs si vous avez, par exemple, un Select. C'est par ici. Créons un groupe de formulaires. Et ici, nous voulons créer, par exemple, un formulaire de colonne. Et ici, à l'intérieur de select, nous pouvons simplement emballer le nom du contrôle de formulaire, et ce sera notre ID de colonne. Et ici, nous devons également fournir la sélection de colonne de classe. Maintenant, dans select, nous voulons afficher toutes nos options et ce sera notre tableau de colonnes. C'est comme ça, option dans G4, nous le rendons ici avec juste une boucle dans nos colonnes parce que nous les avons dans des colonnes de points de données et nous n'avons pas besoin de nous embêter avec des flux ici. Ici aussi, nous voulons utiliser la valeur G et fournir la valeur à l'intérieur de l'option R. Ce sera un point de colonne AD parce que nous les parcourons en boucle. Fermons cette option et exécutons simplement l'intérieur de chaque option du titre. Ici, nous allons simplement lancer le titre du point de la colonne. Allons voir si ça fonctionne. Je saute ici et nous obtenons une erreur et la valeur G est inconnue. Et tout d'abord, nous devons créer notre forme. C'est pourquoi revenons en arrière et définissons notre composant. Et ici, en haut, nous devons créer un formulaire pour une seule propriété. Donc, ici, je vais essayer que nous ayons notre forme de colonne. Et c'est ce FB. Et en fait, nous n'avons pas fait d' injection ici si p. Alors faisons-le maintenant. Si B est comme toujours, juste un générateur de formulaire, et ici nous écrirons ce groupe F B et à l'intérieur nous passerons nos contrôles. Et ici, nous n'avons qu'un identifiant de colonne, mais nous n'avons besoin de rien d'autre. Et par défaut, ce sera le cas. Maintenant, nous avons toujours cette Sarah. Et en fait, parce que nous n'avons pas injecté formulaires réactifs dans notre module de tableau. Nous devons donc revenir en arrière et configurer notre module de carte. Et juste ici, dans le module de formulaires réactifs de saisie, comme vous pouvez le voir, nous obtenons une autre erreur dans notre code HTML. Et ici, nous obtenons des colonnes qui n'existent pas sur l'interface de type Task car en fait nous n'avons pas étendu notre interface. Ici, en haut, nous avons un flux de données et ici nous disons que nous avons juste une tâche et ce n'est pas vrai. Nous avons ici des colonnes, et ce n'est qu'un tableau de notre interface de colonnes, comme vous pouvez le voir maintenant dans notre console sans aucune erreur. Voyons donc ça. Maintenant, je recharge le patient ici, nous avons maintenant notre sélection impressionnante et nous ne voyons aucune valeur parce que nous n'avons pas fourni de valeur par défaut. Maintenant, nous pouvons ouvrir cette sélection et nous pouvons choisir entre différentes colonnes. Et comme vous pouvez le voir, c'est directement nos colonnes que nous avons à l'intérieur du tableau. Maintenant, la seule dernière chose que je veux implémenter, définir la valeur par défaut dans la sélection, car en fait, par défaut, nous avons une colonne et cette tâche est située dans une colonne. Et nous pouvons le faire facilement parce que nous avons des flux. Donc ici, nous pouvons simplement utiliser cette tâche qui a été volée parce que nous avons le flux. Et ici, nous savons que nous obtenons notre tâche et nous pouvons simplement écrire Subscribe ici et nous aurons accès à notre tâche. Et maintenant, nous devons mettre à jour notre formulaire. Nous avons donc ici accès à cette forme de colonne, à quelle valeur, et si vous ne savez pas ce que fait la valeur de hauteur, elle met à jour les propriétés dans le formulaire. Nous devons donc ici fournir un objet avec des champs. Et dans notre cas, il ne s'agit que d'un identifiant de colonne de champ unique. À l'intérieur, nous voulons fournir une colonne idéale pour cette tâche. C'est l'ID de colonne de points de tâche, ce qui signifie en fait à l'intérieur du constructeur lors initialisation où vous vous abonnez au flux de tâches. Et lorsque nous arrivons à notre tâche ici, nous corrigeons la valeur. Comme vous pouvez le voir maintenant navigateur, nous recevons notre première colonne. Mais ce que je n'aime pas ici, c'est que nous utilisons à nouveau subscribe sans se désinscrire. C'est pourquoi je veux faire exactement la même chose que nous avons fait au sein de notre conseil d'administration. Tout d'abord, nous devons créer notre désinscription. Et c'est un sujet d'utilisation où à l'intérieur nous fournissons du vide. Et maintenant, nous voulons créer en G sur la destruction. C'est par ici, des outils sur ce Troy. Et quelque part après constructeur, nous pouvons créer en juin, la grève et la perspicacité avec tout d'abord, je veux appeler ce désabonnement ensuite, puis terminer. Donc, ces désabonnements sont complets. Et après cela, nous ne devons pas oublier avant de vous abonner Write pipe. Et voici jusqu'à ce que nous leur fournissions ces désabonnements que nous venons de créer. Dans ce cas, nous sommes du bon côté surDétruire ce composant. Notre abonnement sera également détruit. 45. Mettre à jour la tâche: Dans cette vidéo, nous devons mettre en œuvre la mise à jour de notre tâche du début à la fin. Et en fait, à l'intérieur d'une tâche, nous avons trois choses différentes. Tout d'abord, nous avons ici un formulaire en ligne pour notre titre, pour toutes les mises en œuvre. Et nous obtenons ici le journal de la console. En fait, il s'agit d'une mise à jour partielle de notre tâche. Nous avons exactement la même logique avec la description. Ici, nous pouvons simplement le modifier et cliquer sur Enregistrer. Mais ici aussi, nous avons un changement de colonne et en fait nous ne l'avons pas du tout géré et nous devons le faire. Et il s'agit également d'une mise à jour de la tâche. Plus important encore, ce sont toutes des mises à jour partielles que nous devons respecter pour notre back-end car nous voulons informer tous nos clients de ce changement à l'intérieur de la tâche, qui signifie en fait que notre logique sera exactement comme précédemment dans la partie, nous émettons quelque chose sur le client, sur le backend, nous faisons quelque chose à notre base de données, par exemple, une tâche de données Web. Ensuite, nous informerons tous nos clients qui sont abonnés à ce forum spécifique. Et la première chose que nous devons faire est de créer de nouveaux événements de socket. Commençons cette fois par le client. Et dans nos types de shred d' application source, nous avons un événement socket. Et en fait, ici je vois des tâches Créer, et maintenant nous avons besoin exactement de la même chose avec la mise à jour des tâches PS. Et ici, nous avons du succès et de l'échec, comme toujours. Et ici, nous pouvons changer le nom en tâches, mise à jour, puis réussite de la mise à jour et échec de la mise à jour. Pour que notre événement soit prêt, Nobu doit implémenter une nouvelle méthode dans les tâches de service de nos chemises, car comme précédemment, nous voulons cacher notre socket à l'intérieur de cette méthode à l'intérieur des tâches de partage. C'est par ici. Créons notre méthode qui mettra à jour la tâche. Ici. Tout d'abord, nous obtenons notre identifiant de forum parce que nous devons savoir quels utilisateurs, nous devons avertir. C'est là que vous entendez anniversaire, cette chaîne aura également besoin d'un ID de tâche car nous devons savoir quelle tâche nous devons mettre à jour. Enfin, voici une liste de champs. Et ici, nous aurons un objet où tous nos champs ne seront pas obligatoires. C'est pourquoi je les écris avec un point d' interrogation afin que nous puissions mettre à jour notre titre. C'est une chaîne. Nous pouvons également mettre à jour notre description. Il est également facultatif et chaîne. Et ici, nous avons également notre colonne et notre dame de colonne est l'endroit où se situe notre tâche. Et ici, nous sommes en train de devenir nuls. La seule chose que nous devons faire ici, c'est socket meet. C'est pourquoi Socket Service Summit. Et ici, nous voulons utiliser notre nouvelle méthode, événements de socket en m point. Et nous avons ici nos mises à jour de tâches commencent ici en tant que deuxième paramètre, nous devons fournir un objet avec tous ces champs. Tout d'abord, il s'agit d'un rayon de bordure, puis d'un ID de colonne, puis de notre objet avec des champs. Comme vous pouvez le voir ici, j'ai fait une faute de frappe. Ce n'est pas une continuité mais un ID de tâche et cause de TypeScript avec voir directement une erreur. Nous pouvons donc maintenant revenir en arrière et définir notre composant et effectuer les modifications nécessaires. Et voici le nom de la tâche de mise à jour et la description de la date. Dans les deux cas, nous voulons appeler cette méthode de tâche de mise à jour. C'est ainsi ici au sommet avec tout d'abord, il faut injecter ces tâches service qui viennent d'être mises à jour. Et c'est un service de tâches. Après cela, nous pouvons simplement écrire ici ce service de tâches, et voici notre nouvelle tâche de mise à jour de méthode, puis la dire. Tout d'abord, nous devons choisir un tableau À cet ID de tableau ici est d' une tâche ou avons-nous ici l'ID de la tâche ? Oui, nous l'avons défini ici dans le constructeur. Donc ici nous pouvons également écrire ce point fait KD, et ici nous avons nos champs. Dans ce cas, il suffit de mettre à jour le titre. C'est ainsi que nous pouvons dire title, Task, Name, et comme vous pouvez le voir ici, nous obtenons un identifiant de colonne de propriété étrange qui manque dans le type, ce qui signifie en fait que j'ai fait quelque chose de mal. Et ils voient déjà le problème ici. La dame de colonne est également facultative. Il ne doit pas toujours y être. C'est ici qu'il en est. Vous pouvez voir maintenant que nous n'obtenons pas d'erreur car tous nos champs peuvent être indéfinis. Et ici, nous avons juste besoin de fournir un titre. Nous avons donc mis à jour le nom de notre tâche. Maintenant je peux copier-coller ce code et mettre à jour ici notre description. Ici, je vais simplement fournir une description, et c'est notre description de tâche à partir du paramètre et c'est maintenant la partie la plus intéressante. Nous devons gérer ce changement de sélection unique. Et en fait, c' est une forme réactive, ce qui est en fait une bonne chose parce que nous pouvons réagir aux changements de manière complètement réactive. Ce que je veux écrire ici est cette forme de colonne de points Gad. Et ici, nous pouvons obtenir notre identifiant de colonne, mais en fait ici nous voulons réagir aux valeur et les changements de valeur réels nous donneront un retour et seront observables, ce qui signifie en fait que nous pouvons écrire ici Souscrire. Mais comme vous pouvez le voir ici, nous recevons un avertissement de TypeScript indiquant que ce champ peut être présent, mais pas dans notre cas, parce que dans notre cas, il est toujours dit que c'est là que nous peut supprimer cet avertissement simplement en utilisant bank here. Dans ce cas, nous disons TypeScript, ne vous embêtez pas avec la vérification de la présence de cette propriété. Et comme vous pouvez le voir ici, les changements de valeur sont observables. C'est là que je peux maintenant simplement essayer, m'abonner, puis obtenir ce qu'il y a à l'intérieur cette dame de colonne après le changement, qui signifie en fait manger cette dame de colonne quand elle était mis à jour. Et maintenant j'ai juste besoin d' écrire le journal de la console d'insertion. ID de colonne modifié. Et ici, nous pouvons vérifier si cela fonctionne vraiment. Rechargeons la page. Comme vous pouvez le voir ici dans la console, je suis en train de changer de colonne D, et voici notre ID de colonne. Et en fait c'est un problème parce que ce que nous voulons faire maintenant dans cet abonnement, nous voulons déclencher un changement pour le back-end, comme nous l' avons fait ici avec la tâche de mise à jour. Mais cela n'a aucun sens de le déclencher au début lorsque nous avons le même identifiant de colonne, nous voulons vraiment trop délicat lorsque nous le modifions. C'est pourquoi nous pouvons écrire ici. Nous pouvons vérifier si la colonne a besoin, ce qui a été changé n'est pas la même chose que la moitié valide. Mais là aussi, le problème, nous avons ces informations uniquement dans notre flux de tâches, ce qui signifie en fait que nous devons combiner ces deux flux ensemble. C'est pourquoi nous pouvons utiliser ici lasers combinés comme nous le faisions auparavant. Et ici, nous pouvons fournir, tout d' abord, que cette tâche était plus grande. Et ici, après cela, ce flux que nous avons écrit ici en bas, je vais simplement le coller comme second paramètre. Et ce dernier combiné nous donne un tableau, qui signifie en fait que nous avons accès à notre tâche et ensuite ce qui signifie en fait que nous avons accès à notre tâche et ensuite à notre identifiant de colonne à partir du formulaire. Et ici, je peux maintenant les enregistrer sur console. Ici, je veux voir tout d'abord, la dame de colonne changée et deuxièmement ce que nous avons à l'intérieur de la tâche. Et en fait, ici, nous voulons vérifier l'identifiant de la colonne du lot de tâches . Je recharge la page et nous avons les deux années quatre-vingt. Et comme vous pouvez le voir, ils sont similaires, ce qui signifie que c'est exactement le cas lorsque nous n'avons rien à faire. Donc, ce que nous voulons écrire ici, si notre colonne de tâche D n'est pas égale à notre identifiant de colonne, alors nous devons faire une mise à jour. Ici, nous pouvons simplement écrire ce service de tâches comme nous l'avons fait pour la tâche de mise à jour du bas. Et ici, l'intérieur a été fourni. Et tout d'abord, cet identifiant de tableau, puis la tâche, avons-nous à l'intérieur de l'identifiant du point de la tâche, et voici nos champs. À l'intérieur des champs, nous avons juste notre propriété column id. Comme vous pouvez le voir, JS d' Eric nous aide vraiment à travailler ensemble avec des formulaires réactifs , des flux, nos propres flux ou un chemin extrêmement efficace. Nous pouvons maintenant supprimer ce code commenté. Nous n'en avons plus besoin. Mais ce qu'ils veulent faire ici, je veux écrire pris pour traiter les désabonnés dans ce cas ici, nous n'aurons pas d'abonnement arme de poing. C'est ici que nous devons prendre le tuyau droit jusqu'à ce que nous l'avons déjà fait ici. Et à l'intérieur de ces désabonnements et en fait, notre partie frontale du code est complètement prête. Nous devons maintenant essayer les éléments standard sur le back-end, ce qui signifie en fait que nous devons tout d'abord copier et coller les événements. Ensuite, nous devons créer un nouvel abonnement à cet événement, puis implémenter une nouvelle méthode dans contrôleur pour mettre à jour une tâche. Faisons ça maintenant. Tout d'abord, je veux sauter dans nos événements de socket et mettre à jour les tâches de copier-coller. Après cela, nous pouvons sauter à l'intérieur d'un type de source de serveur. Ici nous avons nos événements de socket et en bas je peux coller ces trois nouveaux événements. Maintenant, nous pouvons revenir à l'intérieur de la sororité S. Et ici, en bas, nous pouvons ajouter une nouvelle tonne de socket. Ici, nous voulons écouter nos événements de socket en m point. Et ici, nous avons nos tâches mises à jour ici avec ne pas vouloir appeler un contrôleur de colonnes, mais un contrôleur de tâches. Et ici, nous avons une nouvelle fonction, tâche de mise à jour, et nous devons fournir des informations sur votre socket et vos données. Il est maintenant temps de créer cette tâche de mise à jour. Et en fait, j'ai besoin de copier-coller à partir de la mise à jour des colonnes car ce sera super similaire comme vous pouvez le voir ici, nous avons la colonne de mise à Je vais copier, coller l'ensemble de la méthode et sauter et dire tâches, et le coller ici en bas. Maintenant, changeons-le ici. Nous avons d'abord notre tâche de mise à jour et nous obtenons ici les données. Alors, qu'avons-nous obtenu des données privilégiées ? C'était une carte d'identité. Ensuite, nous avons ici l'ID de la tâche, et à l'intérieur de nos champs, nous avons trois champs. Tout d'abord, le titre, il est facultatif. Ensuite, nous pouvons obtenir ici la description. Il s'agit également d'une chaîne facultative. Et enfin, notre colonne D, qui est également facultative. Maintenant, mettons à jour notre festival try and catch ici nous vérifions les colonnes mises à jour qui sont dessinées, nous devons le changer pour nos tâches. échec de mise à jour Ici, nous envoyons l'utilisateur n' est pas autorisé, nous devons également changer l' échec à l'intérieur de la cage. Donc, ici, nous aurons également des échecs de mise à jour des tâches. Et maintenant, nous devons changer de modèle. Le modèle de tâche rechercher par ID et mettre à jour fonctionne parfaitement. Et ici, nous avons notre point de données, et ici nous avons notre ID de tâche. Ici, nous jetons simplement tous les champs de données que nous avons à l'intérieur et ils seront simplement mis à jour avec ce que nous avons fourni. De retour, nous recevons une tâche mise à jour et nous voulons envoyer cette tâche mise à jour à notre client. Et ici, nous fournissons l'identifiant du tableau de données. C'est très bien et la demande ici est le succès de la mise à jour des tâches. Et ici, à l'intérieur, nous fournissons notre tâche mise à jour. Nous en avons donc complètement fini avec notre partie back-end, mais nous devons également écrire sur le client une écoute pour informer tous nos clients des modifications. Nous devons donc gérer le sommet sur le client. Et pour cela, il faut retourner dans l'application source de nos clients, Board Services, Board service par ici, parce qu'en fait, nous avons simplement besoin d'écrire une leçon à l'intérieur de nos composants de carte avec besoin d'écrire écouter à l'intérieur du modèle de carte parce que le modèle réellement acheté utilise simplement nos flux d'ici, ce qui signifie en fait qu'il suffit s'abonner à l'intérieur de notre composant de carte. Ici, nous appellerons une méthode pour mettre à jour la tâche dans notre flux de tâches. C'est pourquoi je veux juste regarder notre colonne de mise à jour car elle sera très similaire à notre tâche de mise à jour. Et en fait, nous pouvons le copier-coller complètement. Alors changeons-le maintenant. Nous avons ici notre tâche de mise à jour. Nous arrivons ici à une tâche mise à jour, qui est en fait à l'interface du crépuscule. Ici, nous devons faire exactement la même chose avec juste besoin mettre à jour une seule tâche à l'intérieur de notre tableau. Nous obtenons donc ici des tâches mises à jour et ici nous utilisons nos tâches de flux pour obtenir de la valeur et nous avons accès à chaque tâche. Maintenant, nous sommes en train de vérifier, d'accord, notre ID de tâche doit être égal à notre AD de tâche mis à jour. Dans ce cas, nous devons revenir, étalons cette tâche et nous voulons mettre à jour ici juste un titre. Et en fait, cela n'est pas valide car ici nous devons en revenir plus ici. Tout d'abord, la tâche mise à jour, le titre, mais aussi nous devons mettre à jour ici notre description car il peut arriver que nous l'ayons mise à jour. C'est là que vous entendez la description du point de la tâche mise à jour et le dernier ici sera notre colonne nécessiteuse, et il est également mis à jour l'ID de colonne de points de tâche. Il semble maintenant tout à fait beau. Et dans les autres cas, nous retournons simplement notre tâche. Et après cela, nous devons mettre à jour notre flux de tâches avec des tâches mises à jour afin que notre méthode soit entièrement prête. Il nous suffit maintenant de revenir arrière et de configurer notre carte de composants, notre composant de carte. Et ici, nous devons créer une leçon de plus, une conférence. Je veux retrouver ici notre succès de mise à jour du cône car il sera super similaire. C'est ici. Je vais simplement le copier-coller. Et ici, nous devons le changer. Tout d'abord, de retour, nous obtenons notre interface de tâches et voici succès de la mise à jour des tâches Socrative et C num point. Maintenant, nous avons notre désinscription et retour, nous recevons notre tâche mise à jour. Et maintenant, nous pouvons simplement appeler cette méthode que nous venons de créer, cette tâche de mise à jour. Et à l'intérieur, nous devons fournir notre tâche mise à jour que nous obtenons du backend. Dans ce cas, avec ce code, nous mettrons à jour le flux de tâches pour chaque client abonné à notre page. Voyons maintenant si suivre un code fonctionne ici. Nous n'avons aucune erreur dans le front-end, aucune erreur dans le back-end. Maintenant, ouvrons notre site web et je veux dupliquer l'onglet afin que nous puissions le vérifier avec un autre client. Voici donc ma première tâche et ils veulent juste mettre à jour un titre ici. Écrivons simplement en entier et appuyez sur Entrée. Et comme vous pouvez le voir, il a été directement mis à jour ici, ici sur le tableau. Et à l'étape suivante, il a également été mis à jour, il a également été mis à jour, ce qui signifie en fait que nous l'avons mis à jour avec succès sur le backend, que nous informerons les clients juridiques avec cet abonnement d'écoute lorsqu'il informerons les clients juridiques a été mis à jour le flux et maintenant tous les endroits qui sont abonnés aux flux de façon spectaculaire arrière. Cela fonctionne à merveille. Maintenant, vérifions-nous que nous pouvons modifier une colonne. Je veux donc sélectionner la deuxième colonne, mise à jour et un certain nombre. Et comme vous pouvez le voir directement, cette tâche a disparu de la première colonne, et maintenant elle est ici dans la deuxième colonne. Il a été mis à jour dans notre formulaire. Et ici, à l'étape suivante, nous voyons ma première tâche, qui est également mise à jour dans la colonne suivante. Ce qui signifie que nous avons mis en œuvre avec succès la mise à jour de notre tâche et son déplacement entre nos colonnes. 46. Supprimer la tâche: Dans cette vidéo, nous allons implémenter la dernière fonctionnalité de notre projet, savoir la suppression des tâches. Faisons ça maintenant. Tout d'abord, je veux partir de notre serveur ici, mais je dois sauter dans nos événements de socket de types source, et créer trois nouveaux événements de socket. Parce que nous voulons avertir tous les autres clients qui ont supprimé une tâche. C'est pourquoi nous le ferons via des événements de socket. C'est ici que je vais copier-coller les tâches mises à jour, il suffit de les changer en tâches, de les supprimer. Et ici, sur la droite, nous pouvons le changer en tâches, supprimer, tâches, succès de suppression et échec de suppression de tâches. Après cela, nous pouvons sauter à l'intérieur ces célébrités et de nouvelles tonnes de socket. Nous devons donc le nommer point, et ici nous avons nos tâches supprimer, ce qui est une norme. Et voici notre contrôleur de tâches où nous appelons notre tâche de suppression. Et maintenant, je veux copier-coller notre suppression de la colonne. Ce sera super similaire. Comme vous pouvez le voir ici en haut, nous avons la méthode delete column et ils vont simplement copier et la mettre dans nos tâches ici en bas. Et maintenant, changeons cette méthode. Tout d'abord, ne supprime pas la colonne mais supprime la tâche. Et ce que nous obtenons ici, nous nous ennuyons comme toujours, ils doivent avertir tous nos clients. Et ici, nous devons obtenir juste la tâche Katie, pour savoir ce que nous devons supprimer. Et ici, nous avons notre erreur et nous avons juste besoin d' appeler ici l'échec de la suppression des tâches. Et ici, à l'intérieur de notre cage, nous pouvons également appeler échec de suppression de tâches. Maintenant, au lieu du modèle de colonne, nous pouvons simplement utiliser un modèle de tâche supprimer un point, et nous supprimons simplement notre tâche par ID de tâche que nous avons fourni. Et après cela, nous ne définirons pas tous nos clients avec ces tâches de socket. Supprimez le succès ici Beckwith, il suffit de donner un D à une tâche car nous n'avons pas plus d'informations et ces informations sont suffisantes pour notre client comprenne quelle tâche doit être supprimée. Nous devons maintenant continuer avec le chemin client et pour cela il faut copier-coller ces trois événements de socket que nous venons de créer. Je vais revenir à l'intérieur de la source AB de nos clients, types partagés, des événements de socket. Et ici, en bas, nous pouvons les ajouter. Et maintenant, nous devons mettre à jour notre service pour travailler avec des tâches. Et ce que nous voulons faire ici, nous voulons créer une nouvelle méthode qui supprimera at task. C'est par ici. Créons une tâche de suppression. Et nous savons que nous fournissons simplement ici un identifiant de tableau, qui est une chaîne. Et nous avons également besoin ici de notre ID de tâche, et c'est aussi une chaîne. Et de retour, nous sommes ici nuls. Et maintenant, à l'intérieur, nous pouvons simplement appeler notre image point de service de circuits. Voici comment vous pouvez tâches point cinéma événement socket événement supprimer les tâches point cinéma événement socket événement comme deuxième paramètre. Nous fournissons nos options, qui sont tout d'abord board AT et deuxièmement, notre ID de tâche. Et grâce à cela, notre méthode API est complètement prête. Nous devons maintenant sauter à l'intérieur du module de carte et du service de carte. Et en fait, ici, nous avons besoin d'une nouvelle méthode, tout comme delete column, mais elle sera supprimée de la tâche et en fait le code sera super similaire parce qu'ici nous voulons juste filtrer un de notre tableau. C'est ici que nous allons le changer pour supprimer la tâche, et voici un argument que nous obtenons notre AD de tâche. C'est ici que nous voulons faire une boucle dans notre flux, qui est Task Stream obtenir la valeur ici où j'ai accès à chaque tâche. Et nous comparons notre tâche k, d avec l'identifiant de tâche que nous devons supprimer. Et voici les tâches mises à jour en arrière. Et maintenant, nous voulons mettre à jour notre flux, qui est notre réserve de flux de tâches et vous avez mis à jour le tableau des tâches. Nous avons donc créé avec succès notre tâche de suppression pour l'état du forum. Et maintenant, je veux également supprimer ce commentaire. Nous n'en avons plus besoin. Maintenant, nous devons créer du code HTML pour supprimer notre tâche. C'est là que nous devons revenir en arrière et a déclaré notre modèle de tâche de composants. Et ici, au bas de notre composant de modèle de tâche HTML, nous avons des actions, et ici nous avons une suppression avec une image. Et en fait maintenant sur cette div, nous pouvons simplement ajouter l'événement click et appeler ici une nouvelle méthode qui sera supprimée de la tâche. Créons maintenant cette tâche de suppression dans notre composant. Ici, nous n'avons besoin de rien, nous avons juste besoin de cet ID de tâche et de cet ID de tableau, et nous les avons déjà. C'est pourquoi nous pouvons simplement écrire ce service de tâches Dot Delete Task et nous les fournissons à l'intérieur. Voici donc ce point À cette tâche KD, donc nos clients ont réussi émettre cet événement vers le back-end. Le back-end a mis à jour notre tâche et a informé tous nos clients. Mais en fait, nous devons nous abonner à l'écoute dans différents endroits. Tout d'abord, nous voulons le faire ici dans notre modèle de tâches. Et deuxièmement, dans notre tableau, et en fait à l'intérieur du tableau, nous avons simplement besoin d'appeler cette méthode que nous avons créée Delete Task juste pour mettre à jour un flux. Mais ce que je veux faire ici, je ne veux pas directement à l'intérieur tâche de suppression pour accéder à notre page de tableau. En fait, cela a du sens, mais nous ne sommes pas sûrs d'avoir supprimé la tâche réussie. C'est pourquoi je ne veux pas écrire de code ici. Je veux vraiment écrire listen, par exemple, dans notre constructeur. Pour cela, nous devons injecter ici notre service socket. C'est là que nous entendons le service de circuit privé et nous obtenons ici notre service de socket. Et maintenant ici, dans le constructeur South par exemple, en bas, nous pouvons simplement écrire cette leçon de service de socket. Ici, il faut fournir cela en obtenant une tension dorsale. Et c'est la tâche k d que nous supprimons. Maintenant, nous pouvons utiliser les événements de socket dans m point et où l'abonnement à nos tâches supprime le succès. Et ici, je veux passer par pris jusqu'à ce que nous soyons du bon côté, puis donner un aperçu de ces désabonnements. Et après la pipe, nous pouvons utiliser notre abonnement et ne nous soucions pas du tout de Tuskegee. Nous voulons simplement aller trop loin et déjà créé une telle méthode. C'est ça, ça va à quoi ? Nous avons, cette méthode directement ici dans ce fichier, qui signifie en fait que lorsque nous aurons du succès et que notre modèle sera ouvert, ce code reviendra directement au tableau car nous pouvons afficher cette tâche supprimée. Et maintenant je veux copier-coller ce code complètement parce que nous allons écrire exactement la même chose à l'intérieur de notre tableau. Et comme vous vous en souvenez, nous écrivons tous ces appels à notre conseil d'administration. C'est là qu'il est tout à fait logique de mettre ce code ici. Et au lieu de cela, allez à bord, essayez-le ici, ce point de service de mot. Et ici, nous avons notre tâche de suppression laquelle nous fournissons l'ID de la tâche. Et dans ce cas, nous avons besoin cette tâche AD que nous obtenons du backend, et ils ont en fait été entièrement implémentés cette fonctionnalité. Maintenant, vérifions-nous si cela fonctionne, mais nous n'avons aucune erreur ici et aucune erreur dans le backend. Passons maintenant au navigateur. Ici, j'ai ma première tâche, alors supprimez-la maintenant, comme vous pouvez le voir dans les actions, nous avons cette suppression, puis appuyez sur Supprimer et cette tâche a complètement disparu avec ne pas la voir ici à l'intérieur du tableau, et nous ne le voyons pas dans le deuxième tableau. Et en fait, en cas de succès, nous avons été redirigés avec succès vers l'ID du tableau slash, qui signifie que nous avons implémenté avec succès cette fonctionnalité, Fool Live du début à la fin. 47. Déploiement: Nous avons terminé avec succès notre projet avec la création d'un clone Trello, et nous devons maintenant parler de déploiement. En général, le déploiement n'est pas une tâche facile et de nombreuses personnes se posent des questions. Comment le joueur devrait-il projeter, comment nous allons le gérer, quel service nous devons utiliser pour cela. Et c'est en fait un problème. Il existe des centaines d'entreprises différentes où vous pouvez payer de l'argent et elles se déploieront pour votre projet. Mais tout d'abord, vous devez comparer toutes ces entreprises, comprendre comment déployer leur projet, apprendre leurs outils en ligne, etc. Cela n'a pas beaucoup de sens. En fait, tous ces outils font exactement la même chose. Ils mettent en place votre projet en production sur un vrai serveur. En fait, la meilleure option pour apprendre la production et le déploiement est déployer notre projet par nous-mêmes sur notre propre serveur. C'est le fondement même du déploiement. C'est là qu'il est tout à fait logique d' apprendre à le faire. De plus, ce sera probablement la variante la moins chère, comment héberger votre projet. Oui, ce ne sera pas gratuit car vous devez payer pour le serveur, mais vous ne payez pas l'entreprise pour gérer un serveur et vous ne payez pas pour certains outils graphiques pour applaudir votre projet. C'est là que dans cette vidéo, nous devons louer un serveur ensemble, le configurer, puis déployer notre projet. Et en fait, si vous ne voulez pas payer pour le serveur, c'est très bien. Vous pouvez simplement laisser votre projet tel quel. Et en vérifiant la vidéo, comment je le fais et fait une société de serveurs, j'utilise moi-même hertz et c' est un fournisseur de serveur assez bon marché et fiable. Et en fait, vous pouvez choisir n'importe quel fournisseur de votre choix. Vous avez juste besoin d'accéder à un serveur privé virtuel. Mais j'aime bien Hatsune parce qu'il est fiable et pas si cher. Comme vous pouvez le voir ici, nous pouvons cliquer sur le Cloud et vérifier les prix ici en bas. Comme vous pouvez le voir, il existe de nombreux packages différents et le minimum est ici pour des années et 0,15$, ce qui est assez bon marché pour le mois de 20 téraoctets, tragique deux gigaoctets de RAM et de processeur processeur. Et en fait, j'utilise ce plus petit serveur pour deux projets en production, mais pas mal de monde vient. Et si vous optimisez le thriller de vos projets, c'est bien, alors vous êtes tout à fait d' accord avec un petit sirop. C'est pourquoi dans cette vidéo, nous louerons exactement le sirop. Maintenant, la première étape consiste à enregistrer juste l'intérieur de son fils un peigne ou tout autre fournisseur que vous souhaitez. J'ai déjà un compte ici et après inscription et confirmation de votre e-mail, vous verrez cette page. En fait, ici, ce service dans votre profil sera vide, mais c'est mon propre serveur web. Ici, je veux cliquer sur le serveur parce qu'ils veulent juste créer un nouveau serveur pour le bien de ce cours . Donc le premier ici est l'emplacement, peu importe. Nous pouvons choisir ici Helsinki ou ce que vous préférez. La blessure à l'image est parfaitement bonne. Nous n'avons pas besoin de choisir quoi que ce soit. Voici le type standard, tout à fait bien. Et ici, le niveau le plus petit, qui est pour vous, 0,15$. Nous n'avons pas besoin de changer quoi que ce soit. Nous n'avons pas besoin de volumes, de réseaux, de pare-feu, fonctionnalités supplémentaires, de clé SSH, et ici juste d'un nom. Nous pouvons le nommer ici, dans la bande-annonce, tout comme notre projet pour que nous sachions de quoi nous parlons. Et comme vous pouvez le voir ici, nous n'avons pas sélectionné notre clé SSH, ce qui signifie que nous recevrons un e-mail avec l'utilisateur root et le mot de passe, ce qui est très bien rapide. Je clique ici pour créer et maintenant, et notre serveur sera créé. Comme vous pouvez le voir, mon serveur est déjà vert et fonctionne. Et en fait, disons, l'e-mail, j'ai reçu mes informations d'identification où j'ai un utilisateur root et le mot de passe de notre serveur. Nous devons maintenant sauter dans la console et écrire SSH. Et voici tout d'abord, notre utilisateur root ajouter. Ensuite, l'adresse IP que nous avons ici, nous pouvons simplement cliquer dessus et elle sera copiée et ils devront la coller ici. Nous avons donc ici SSH, root at, et voici l'artiste AP. J'appuie sur Entrée et nous recevons le message. Je vous assure que vous voulez continuer. Où c'est ici, oui. Et en appuyant sur Entrée, comme vous pouvez le voir ici, nous recevons tout d'abord la question concernant notre mot de passe. Nous devons donc prendre un mot de passe de l'e-mail et le coller ici. Après cela, nous recevons de nombreuses informations concernant notre serveur. Et nous commençons le processus de modification du mot de passe root et en fait pour changer le mot de passe avec tout d'abord, devons fournir un mot de passe actuel. C'est pourquoi je le colle à nouveau et j'appuie sur Entrée. Et maintenant, nous devons fournir un nouveau mot de passe à notre utilisateur root. Et nous le faisons juste pour que Kasner ne connaisse pas notre mot de passe. Ici, je n'en fournirai que 123. Et encore une fois, 123. Comme vous pouvez le voir, nous recevons un message. Vous devez choisir un mot de passe plus long. Faisons en sorte que ce soit 12345678. Et encore une fois, et en fait, vous devez comprendre que pour le vrai projet de production, vous devez créer un mot de passe sécurisé et pas comme ça, c'est juste pour le test. Donc, si vous avez une telle sortie avec root en L, Trello et hachage ici, cela signifie que vous avez réussi, nous regardons à l'intérieur de l'observateur. Ici, nous pouvons faire quelque chose. Je voudrais mentionner ici quelque chose d'important. Dans ce cours, nous ne parlons pas de la façon de gérer les serveurs de manière efficace et sécurisée. Ce qui signifie en fait que je vais tout montrer, l'ensemble du déploiement avec notre utilisateur root. En général, dans un vrai projet de production, vous ne voulez pas tout faire avec l'utilisateur root. Vous souhaitez créer un autre utilisateur avec des autorisations limitées qui peut simplement déployer un projet. Encore une fois, utiliser route en production est une mauvaise chose, mais si vous le faites comme votre projet favori, c' est tout à fait correct. La prochaine étape consiste à intégrer notre projet dans le sirop. Et en fait, il existe de nombreuses possibilités pour cela et je veux utiliser le plus simple ici. Ce que nous pouvons faire, c'est simplement pousser notre projet vers GitHub ou GitLab, vous le souhaitez, puis cloner ce projet dans notre sirop. C'est très efficace car vous pouvez apporter certaines modifications à un projet. Vous pourrez certainement stocker et mettre à jour votre projet dans le référentiel Git, ce qui signifie que chaque fois que vous voulez mettre à jour votre projet, vous sautez simplement ici dans votre et dit Sarah, vous essayez simplement d'obtenir pool pour mettre en pool votre projet , puis vous le redémarrez. C'est ça. J'espère que vous ne saviez pas déjà comment déployer votre projet pour obtenir lab ou GitHub. Mais si vous n' entendez pas quelques étapes, je préfère utiliser MATLAB pour mes propres projets, mais c'est juste ma préférence personnelle. Ici, je me suis déjà connecté à GitHub et ils ont cliqué sur Créer un nouveau projet. Maintenant, il me suffit de cliquer sur Créer un projet vide. Et ici, nous pouvons écrire un nom. Par exemple, nous pouvons nommer la bande-annonce de notre projet L, et nous n'avons rien à changer ici. Et en fait, par défaut dans GitHub, nous devenons privés gratuitement, et c'est génial pour nos besoins. Maintenant, dans l'URL de notre projet, nous devons choisir notre espace de noms, et ils choisiront l' espace de noms de mon utilisateur. Maintenant, je clique sur Créer un projet ici et notre projet est créé. Et ici, nous allons voir comment nous devons amener ce projet à obtenir un laboratoire. Nous devons maintenant sauter dans la console de notre projet et écrire bien dans le besoin. Cela sera bien initialisé pour notre projet. Je clique ici et reçois un message indiquant que mon dossier est déjà un dépôt Git parce qu'ils ont déjà mon projet à l'intérieur, généralement vous ne recevrez pas un tel message, mais juste le message que nous avons initialisé avec succès. Bien dans ce dépôt, notre deuxième étape consiste à déployer tous nos fichiers dans MATLAB. Mais le point le plus important ici est que nous devons ajouter pour ignorer tous les modules de nœud dans les modules nœud client et les modules de nœud de serveur Insights. Nous n'avons pas besoin de télécharger toutes ces bibliothèques dans le dépôt Git. C'est pourquoi nous devons créer un fichier point gitignore à l'intérieur du serveur. Ils ont ici des modules de nœud dans ce client et également à l'intérieur du client. Ici, comme vous pouvez le voir, j'ai aussi dot gitignore, et ici nous avons plein de choses. Il a été créé automatiquement par angular sans qu'il soit nécessaire de changer quoi que ce soit ici. Ici, les modules de nœud ont été signalés et cela est ignoré, ce qui signifie que nous devons simplement changer de serveur. Et voici notre être ignoré. Après cela, nous devons sauter dans la console de jeu ici, non ? Git ajoute un point et il ajoutera tous nos fichiers au bon. Maintenant, nous devons créer notre premier commit pour cela, nous pouvons essayer de git commit am. Et ici, par exemple, projet terminé, comme vous pouvez le voir ici, je reçois un message, rien à valider, mais cela ne devrait pas être votre cas. Dans votre cas, vous obtiendrez des centaines de fichiers qui ont déjà été créés dans ce projet. Notre dernière étape ici est que vous pouvez voir est d'ajouter cette ligne, git remote, ajouter l'origine HTTPS, puis le chemin complet, je vais le coller maintenant ici. Et grâce à cela, nous avons réussi à lier get lip à ce dépôt. Et notre dernière étape ici sera cette git push moins uf origin main. Et en fait, comme vous pouvez le voir ici, c'est écrit en main. Mais pour moi, par défaut, j' ai un master de branche, ce qui est tout à fait correct. C'est pourquoi je souhaite renommer main en master. C'est bon. Push minus uf origin, master them hidden here, Enter, comme vous pouvez le voir ici, je dois tout d'abord fournir un nom d'utilisateur de mon utilisateur GitHub. Et deuxièmement, le mot de passe est, vous pouvez voir ici que je reçois un message est accès profondément refusé, ce qui signifie en fait que cela ne s'est pas produit. Mais ici, nous devons créer un jeton d'accès personnel avec dépôt de droit redéposé dans GitLab. Si vous utilisez GitHub par exemple, cela a peut-être fonctionné pour vous. Si ce n'est pas le cas, nous pouvons accéder à ce lien slash profile jetons d'accès personnels. Comme vous pouvez le voir, je l'ai ouvert ici et ici nous avons juste besoin créer un jeton d'accès pour pouvoir pousser vers GitHub. Et ici, par exemple, il peut créer un nom parlant en trello. Et ici, nous devons sélectionner des portées. Pour nous. Nous devons créer le bon dépôt et lire le référentiel. C'est le plus important. Je clique ici, crée un jeton d'accès, et ici nous arrivons au sommet de notre nouveau jeton d'accès. Et heureusement, nous devons à nouveau changer notre télécommande à cause de ce jeton d'accès pour cette table, n'est-ce pas ? Bon ashram ou région éloignée, qui supprimera cette origine que nous avons créée ici en haut avec cette ligne, et cela sera supprimé. Maintenant, je veux copier-coller cette ligne et voici comment nous le faisons avec le jeton d'accès dans GitHub. Comme vous pouvez le voir ici lors de l'écriture de git remote add origin HTTPS. Ici, nous devons tout d'abord fournir le nom du jeton d'accès. C'est pourquoi nous avons créé l trailer en guise de jeton. Je vais écrire ceci ici, ultra law, et maintenant nous avons deux points et notre jeton d'accès. Je vais également le copier-coller à partir de notre page où nous l'avons généré. Et après cela, nous avons exactement la même chose que nous avons ici en haut. Pour moi c'est https github com slash mon surnom slash L point. Bien. C'est ici que j' écrirai exactement la même chose. Et puis mon dépôt, je vais Trello, vérifions-le. Nous essayons de pousser à nouveau vers notre dépôt avec git push origin master, comme nous l'avons fait précédemment. Nous sommes en train de frapper ici. Et comme vous pouvez le voir, lorsque vous n'êtes pas interrogé sur notre nom d'utilisateur et notre mot de passe, parce que maintenant nous poussons avec notre jeton d'accès. Et comme vous pouvez le constater, nous n'avons pas d'erreur. Ici. Nous obtenons que tout est résolu et nous réussissons maintenant à booster la branche master dans Origin. Comme vous pouvez le voir maintenant , dans notre projet, nous avons une branche master, et voici toutes nos modifications. Nous avons ici deux dossiers, client et serveur. Et ici, à l'intérieur, nous pouvons voir l'ensemble du projet que nous construisons. Et maintenant, nous pouvons applaudir notre code à notre serveur. C'est pourquoi je veux revenir à l' intérieur de notre serveur que nous venons de créer. Et comme tu peux le voir, je suis dans le sirop. Tout d'abord, je veux créer un nouveau répertoire qui s' appelle projects. Maintenant, je veux sauter dans ce projet de répertoire et cloner ce projet ici. Et en fait, nous pouvons essayer d' utiliser avec le même jeton d'accès que celui que nous venons d'utiliser. Nous pouvons simplement écrire dans la console, obtenir la version chmod moins dans la console locale, pas dans le serveur. Et voici notre télécommande avec l'URL de ce jeton. Et en fait, nous pouvons simplement copier-coller cette URL et l'utiliser ici à l'intérieur sirop ici, je veux juste écrire git clone et puis cette URL que je frappe ici. Comme vous pouvez le constater, nous n'avons aucun problème d'autorisation. Et nous avons cloné notre projet avec succès ici dans projects. Et maintenant je peux écrire Ls. Et comme vous pouvez le voir, nous avons le trailer du dossier L, ce qui signifie que nous avons réussi notre projet à l'étranger sur notre serveur. Pour continuer, nous devons mettre à jour tous les packages de notre serveur. Et pour cela, nous pouvons simplement écrire apt-get update et appuyer sur Entrée. Comme vous pouvez le voir, tous nos paquets ont été mis à jour et maintenant je veux les installer, d' abord en jeans et ensuite MongoDB. Qu'est-ce qui porte malheur ? Il s'agit de notre futur serveur Web que nous utiliserons pour notre projet. C'est ici que nous pouvons écrire EPT avec style et malheur. Ici, nous devons cliquer sur Oui, pour installer ce package. Comme vous pouvez le constater, notre package a été correctement installé. Voyons si cela fonctionne ici, nous pouvons simplement écrire le statut du service et de la poisse. Comme vous pouvez le voir, j'appuie sur Entrée et nous obtenons beaucoup d'informations. Tout d'abord, ce qui est dans Jinx et ici, actif en cours d'exécution, ce qui signifie en fait qu'il a été installé avec succès et qu'il fonctionne maintenant. Notre prochaine étape est d'installer notre base de données, et c'était MongoDB. C'est ici, apt installe Mongo DB et nous devons le confirmer par yes. Voyons maintenant l'état de notre MongoDB pour ce week-end, à droite, le service puis le statut Mongo DB. Et comme vous pouvez le voir, il est également actif et en cours d'exécution, qui signifie que tout va bien. L'outil suivant que je veux installer s'appelle n. Et en fait, nous l'utiliserons pour gérer la version de notre nœud car il peut arriver que nous souhaitions mettre à jour le nœud et c'est beaucoup Il est plus facile de le faire en utilisant cet outil, en particulier si vous avez plusieurs projets et que vous devez basculer entre différentes versions de nœuds. C'est ici que je vais coller cette ligne dans la console. Donc c'est curl moins l et cette URL, c'est Gita, ton slash n dans style bash. J'appuie sur Entrée et un message d'erreur s'affiche. C'est pourquoi nous devons agir. Nous devons tout d'abord exécuter apt install. Et voici l'essentiel construit. J'appuie sur Entrée et nous devons le confirmer. Maintenant, comme vous pouvez le voir, il est installé afin que nous puissions essayer de l'installer. Et encore une fois, j'appuie sur Entrée et je mets. Je n'ai aucune erreur. Ici. Nous pouvons simplement écrire oui et procéder à l'installation. Comme vous pouvez le voir ici, par défaut, n installé pour moi, je sais, 16151. Et en fait, c'est exactement le même nœud qu'ils ont localement. Et ils vous recommandent vivement d'avoir la même version de nœud sur votre serveur de production et dans un environnement local. Dans ce cas, vous éviterez les tracas et la boîte magique. Et les deux derniers que nous voulons installer s'appellent PM2.5. C'est un gestionnaire spécial pour redémarrer nos processus de nœud et nous l' utiliserons pour démarrer notre appel. C'est ici que nous pouvons écrire npm install minus g, ce qui signifie globalement VM2. Et comme vous pouvez le voir ici, nous obtenons une commande d'erreur npm not found, et la même chose pour command node not found. Si je suis juste ici, nœud moins version. Et en fait, après l'installation de n, à la fois au niveau national et en obtenant Node et NPM. Mais nous devons redémarrer notre terminal. Nous devons donc nous déconnecter du serveur et nous reconnecter afin d'apporter une chance connue à l'intérieur du chemin. C'est là que nous pouvons simplement écrire exit, puis à nouveau, utiliser SSH root et notre adresse IP. Keaton ici Entrez et nous devons fournir notre nouveau mot de passe. Et comme vous pouvez le voir ici, je suis à l'intérieur et maintenant je peux écrire node minus fashion puis obtenir la version du nœud et la même chose avec la version NPM moins, ce qui signifie en fait que nous pouvons maintenant installer TM2 à nouveau avec npm install globalement VM2. Maintenant, nous n'avons plus d'erreur et notre PM two est en cours d'installation. Maintenant, nous devons installer tous nos packages pour le client et pour le serveur. Et pour cela, je dois sauter à nouveau dans le dossier des projets. Et comme vous pouvez le voir, j'ai notre projet Ultra Lab. Comme vous pouvez le voir ici, je suis à l'intérieur la bande-annonce et ils ont un client et un serveur. Tout d'abord, je veux sauter et dire serveur. Et ici, nous avons beaucoup de fichiers, donc nous pouvons simplement écrire et payer style et installer toutes les dépendances pour notre serveur. Comme vous pouvez le voir, tout est installé maintenant nous devons sauter dans notre client. J'écris donc un client de CD et après cette installation npm à nouveau, et nous installerons tous nos packages frontaux pour Angular. Tous nos paquets ont donc été installés avec succès et nous devons maintenant créer une configuration pour nginx pour notre projet. Et pour cela, nous pouvons écrire cd slash UTC et jinx Cohen's d. Et ici, à l'intérieur, nous devons créer un nouveau fichier. Et pour cela, nous pouvons écrire Tij puis L trailer point com.com. Et en fait, pour ouvrir et éditer un fichier, nous devons utiliser un éditeur depuis la console. Et je vais écrire ici nano puis le nom de notre dossier, qui est l'ancien trailer, calm, calm. Je frappe ici et voici à quoi ressemble cet éditeur. Ici, nous pouvons simplement taper quelque chose, puis plus tard en sécurité. Et en fait, ici, je veux déjà coller le conflit porte souvent la poisse au type préparé précédemment, et voici à quoi cela ressemble. Nous avons donc ici un blog sur le serveur. Maintenant, à l'intérieur, nous avons écouté AT, qui est une partie AT par défaut. Et c'est là que se trouve notre racine de frontend. Voici les projets de slash route slash où ils ont déjà été créés. Ici, le dossier est solide. Il s'agit en fait d' un dossier Ultra bas que nous venons de créer. Ensuite, slash client slash et slash app. Et en fait, nous devons également construire notre client plus tard après avoir installé les packages. Notre script de type sera donc converti en JavaScript, et il sera ici dans ce dossier, dans l'application slash. C'est pourquoi maintenant tout va bien. Ici, nous résolvons notre index.HTML et ici le nom du serveur, le nom de famille est vraiment important car il s'agit en fait de notre domaine. C'est L.com et www L Trello.com. Et en fait, nous n' avons aucun domaine. Et c'est très bien parce qu' en fait, nous pouvons, dans notre machine locale, dans le fichier hôte, écrire une adresse APR du serveur. Dans ce cas, nous n'avons pas besoin de nous embêter avec la stratégie bientôt en tant que domaine réel, et cela fonctionnera exactement comme avec le domaine. Après cela, nous avons l'emplacement. Nous essayons donc de toujours charger notre fichier index.HTML. Et ici, nous avons l'API de barre oblique d'emplacement. Et en fait, c'est important parce que nous disons, accord, quand nous sommes champions de l'API slash L Trello.com, alors nous devons envoyer notre requête par proxy à ce serveur Web et à ce serveur Web que nous utiliserons à l'intérieur de notre backend. Il s'agit d'un hôte local pour l'API barre oblique 1001. Après cela, nous avons exactement la même chose sauf pour les requêtes d'E/S de socket. Et ici nous avons http localhost 4,001, et ici nous avons quelques en-têtes. Et en fait, c' est toute la configuration dont nous avons besoin pour In Jinx. Maintenant, la question est de savoir comment enregistrer ce fichier ? Et pour cela, tout d'abord, nous voulons cliquer sur Control O. Et ici en bas, nous voyons filename pour écrire ys l Trello com conf, où il suffit d'appuyer sur Entrée. Et c'est très bien ainsi. Elle a été sauvée. Maintenant, je veux cliquer sur Control X, et maintenant nous sommes sortis, nous sommes de retour dans notre console. Et maintenant, si vous avez besoin de vérifier si tout a bien été enregistré, vous pouvez écrire cat, puis je vais Trello, j'appuie sur Entrée et nous entrons dans la console cette belle sortie avec le contenu de notre fichier, mais ce n'est pas tout ce que nous devons également changer d'utilisateur dans la configuration des gènes. C'est par ici. Je veux sortir de ce dossier ici, je veux écrire à nouveau nano, mais dans notre cas maintenant, ce sera dans jinx.com. Et en fait, c'est la configuration par défaut, souvent Jinx. Et ici, nous voulons modifier une seule ligne. Ici, en haut, nous avons une donnée utilisateur et nous voulons la changer en route utilisateur avec laquelle nous sommes bloqués ici, et nous devons enregistrer à nouveau ce fichier. Donc Control O Enter, puis Control X. Maintenant nous devons redémarrer In Jinx pour appliquer la configuration que nous avons faite. C'est pourquoi nous pouvons écrire service et jinx restart. J'appuie sur Entrée et nous n'avons aucune erreur. Et maintenant, nous ne devons pas oublier de construire notre façade. Et c'est pourquoi nous devons revenir à l'intérieur projets de slash route slash. Et voici notre trailer L et notre client. Et en fait, nous sommes clients internes. Et pour créer notre projet Angular, nous pouvons simplement exécuter npm, lancer build. Et comme vous pouvez le voir ici, nous appelons GI Bill, qui est la commande d'Angular, et qui construira pour nous ensemble du projet dans ce dossier, comme vous pouvez le voir ici, après avoir construit, Je reçois pas mal d' erreurs dans la console. Et en fait, le principal problème est qu'il s'agit d'une version de production et la paie n'existe pas sur le type booléen de production, ce qui signifie que nous n'avons pas mis à jour nos environnements, Config dans notre projet. C'est là que c'est réel et agréable que nous avons maintenant du bon, donc nous pouvons rapidement faire des ajustements. Ici, je souhaite revenir sur notre projet et nous nous intéressons à nos environnements de source de pièces client. Nous avons ici deux dossiers. L'environnement, oui. Et sur la droite, je vais ouvrir une manifestation environnementale. Ici. Comme vous pouvez le voir sur la gauche, nous avons fourni l'URL de l'API et l'URL des sockets, mais nous ne les avons pas fournies sur la droite. Et en fait, je vais simplement les copier de gauche à droite ici. Nous avons maintenant ces propriétés dans notre configuration. Après cette blessure doit déployer ces changements au bon saut pour handicapés dans le projet local, non ? Git add point, il ajoutera uniquement tous les fichiers localement et après ce commit. Donc git commit moins m et par exemple, environnement mis à jour. Je frappe ici, entrez nos navettes. Après cela, nous pouvons simplement écrire git push origin master et appuyer sur Entrée. Et nos modifications se trouvent déjà dans GitHub ou GitLab. Après cela, nous pouvons revenir à l'intérieur notre serveur, qui a été saisi. Et là, je veux sortir du client. Et me voici dans notre petit dossier de trailer. Maintenant, je viens d'essayer Git pool et nous apportons nos modifications comme vous pouvez le voir ici, protéase de l'environnement à l'intérieur de notre serveur. Et après cela, nous devons réessayer de lancer build, et c'est npm run build, mais nous ne devons pas oublier, nous devons sauter dans le client, comme vous pouvez le voir, aucun paquet de fichier ou de répertoire de ce type, Jason, parce que je ne suis pas un client interne. Donc, le client et ici npm lancent build. Comme vous pouvez le constater, nous n' avons aucune erreur et nous recevons un message indiquant que tout est terminé. Et en fait, nous devons vérifier ce que nous avons dans notre dossier dist. Il a donc diminué. Et comme vous pouvez le voir ici, nous avons tous les trailer et dans tous les Trello, nous avons tous ces fichiers. Tout d'abord, notre index.HTML, puis nos actifs, nos gestionnaires, etc. Mais en fait, cela signifie que nous avons un petit problème dans notre config l'intérieur et que nous avons un mauvais sort parce qu' il y a eu notre dossier racine, cette application slash. Et dans notre cas, nous avons une barre oblique réduite, je vais Trello, ce qui signifie que nous devons la mettre à jour maintenant. Nous devons donc essayer Nano slash, ETC. Et Jinx Cohen est mort. Et voici notre Comic-Con L Trello. J'appuie sur Entrée et j'ai de nouveau ouvert notre configuration. Et ici, à l'intérieur de la route, nous devons essayer ce slash l Trello. Maintenant, je clique sur Control O, Enter Control fuit et nous devons redémarrer et porter la poisse, donc le service et la poisse redémarrent. Donc maintenant notre interface est complètement prête et nous avons simplement besoin de lancer notre backend et nous n'avons pas besoin de démarrer notre fronted d'une manière ou d'une autre, car in jinx le fera rapidement. Mais pour commencer, ce ne sera pas cas parce qu'en fait, à l'intérieur de notre interface , il suffit d'avoir des fichiers statiques comme HTML, JavaScript et CSS. Mais à l'intérieur de notre backend, nous avons notre observable. C'est pourquoi je veux me lancer dans notre back-end. Voici donc le serveur de CD, et ici nous devons démarrer notre serveur avec PM2.5. Mais en fait, nous avons également un problème à l'intérieur de notre serveur. Nous avons TypeScript sans fichiers JavaScript et en fait womb doit convertir tout notre TypeScript JavaScript avant de commencer à l'exécuter sans PM2.5. Et en fait, pour cela, il faut créer dans votre commande. C'est pourquoi nous devons revenir dans notre projet et aller dans le package serveur, Jason. Et ici, nous avons un script pour démarrer, mais nous n'avons pas de script pour Build. C'est pourquoi ici nous pouvons simplement écrire build et ici le script sera TAC. Qu'est-ce que le TAC ? En fait, c'est un TypeScript et il transmettra simplement tout le code que nous avons à l'intérieur ce projet avec cette configuration ts. Comme vous pouvez le voir ici est la sortie, c'est le dossier dist. C'est très bien vite. Mais après cela, nous avons changé. Nous devons sauter dans set console et refaire exactement la même chose, d' abord, get head, puis git commit, puis git push. Avec ces commandes, nous apportons nos modifications dans get wrapper. Maintenant, nous revenons en arrière au lieu d'une enquête. Voilà, nous sortons et je retire à nouveau mon projet. Donc nous sommes prêts à y aller maintenant, nous pouvons revenir en arrière et dire, oh, dossier serveur. Et ici, nous pouvons essayer de construire notre back-end. C'est ici que je peux simplement écrire npm run build, et cela transmettra mon script de type à mon JavaScript. Comme vous pouvez le voir ici, c'est chose faite. Maintenant, nous pouvons simplement essayer un peu moins et vérifier ce que nous avons. Et comme vous pouvez le voir ici, nous voyons tous nos fichiers qui ont été créés, mais avec l'extension js, ce qui signifie en fait que c'est tout correct et que nous devons démarrer dist slash server.js et il lancez notre projet. Nous voulons utiliser les PM2,5. C'est là que nous pouvons simplement lancer PM l'espace, démarrer l'espace. Ici sera diminuée la recherche par barre oblique. Oui, j'appuie sur Entrée et nous obtenons beaucoup de résultats. Comme vous pouvez le voir ici, il s'agit de l'ensemble de la sortie de PM deux. Ce n'est pas grave, mais ici, en bas nous voyons des PM engendrer un démon. Il est diabolisé avec succès et nous commençons avec cette surtension en mode 4k, et c'est fait et voici notre serveur. Et en fait, pourquoi nous utilisons ici P M2, pas seulement un processus de note, nous pourrions écrire ici node et puis par exemple, la montée, oui, c' est tout à fait correct. Mais pm tubule, tout d'abord, les risques commencent pour nous, ce serveur web s'il est cassé pour une raison quelconque. Deuxièmement, le PM 2 est mieux adapté aux applications de production. Donc, ce que nous avons fait ici, tout d'abord, nous avons réussi à créer notre client et ensuite, nous avons lancé notre backend. Et la dernière étape que nous voulons faire est d'ouvrir un navigateur. Mais nous pouvons simplement ouvrir un navigateur car nous devons pointer notre domaine, L Trello.com, qui n'existe pas. Nous ne l'avons pas acheté depuis notre machine locale vers notre serveur. Et en fait, ici, je dois sauter dans la console localement. Et ouvrez le fichier hôte, par exemple, dans Linux et macOS, c'est une ligne dans une barre oblique, ETC slash hosts. Alors voici à quoi cela ressemble pour moi, si vous êtes sous Windows, voici votre chemin, c'est le disque C, le système Windows, donc les deux pilotes, ETC, hébergent et vous ouvrez ce fichier et C'est exactement comme dans mon dossier. Et comme vous pouvez le voir ici, j'ai déjà testé ce projet. C'est pourquoi j'ai cette ligne. J'ai donc ici un domaine, L Trello.com. C'est ce que nous sommes enregistrés, mais il s'agit de l'ancienne adresse API. Je n'en ai pas besoin. Je dois revenir à l'intérieur de mon panneau de SNA de tête et copier ce domaine et le coller ici, ce qui signifie en fait sur notre machine locale lorsque nous sautons à l'intérieur l'ultra faible dose venir quand ce n'est pas en regardant dans la table de recherche DNS, nous pointons simplement vers notre adresse IP du serveur. Maintenant, le moment de vérité, nous allons ouvrir notre projet. J'écris dans le navigateur L Trello.com. Et ça, tu peux voir que c'est notre projet. Cela fonctionne. Et en fait, je veux ouvrir la console ici afin que nous puissions vérifier si nous avons des erreurs. Et en fait, ici, nous avons un hôte local étroit pour 1001 utilisateurs de slushy ice lift d'origine, je vais Trello et en fait, comme vous pouvez le voir, réseau, c'est notre demande à l'API. Il s'agit de http localhost 4 001 paires slushy plus l'utilisateur. Et il est évident que c'est fort. Ce n'est pas ce que nous devons utiliser. C'est pourquoi nous devons revenir à l'intérieur de notre projet et aller à l'intérieur du client localement et le modifier. Voici donc la source, l' environnement et la protestation environnementale de notre client . Ici. Il est évident que cet hôte local n'existe pas. Ce que nous avons maintenant ici est une API barre oblique CTP L Trello.com et la même chose ici, http L Trello.com. Et puis nous n'avons pas besoin de fournir ici un port. Et maintenant, nous devons à nouveau valider ces changements. C'est pourquoi git add git commit puis git push. Maintenant, nous voulons accéder à notre serveur, sortir et dire dossier Trello et à droite, obtenir***. Mais après cela, nous devons reconstruire notre client parce que nous avons changé de client. Et pour ce faire, nous pouvons écrire un client c, d. Et maintenant, npm lance build et il va simplement générer des fichiers statiques rapides pour le frontend, notre projet est construit avec succès. Je recharge la page ici et il n'y a pas d'erreur. Nous avons ici pour 01, pour HTTP L trailer com slash APIs slash user. C'est très bien. Nous ne sommes pas enfermés. Essayons maintenant d'enregistrer l'utilisateur. Je suis donc en train d'écrire f2 sur gmail.com. Voici notre nom d'utilisateur et mot de passe 123 cachés ici s'inscrire. Et en fait, ça a marché. Et c'est important à vérifier car cela signifie que nous avons configuré MongoDB avec succès parce que cette requête post est entrée dans l'API et c' est notre réponse. Et ici, nous récupérons l'annonce de l'utilisateur enregistré et ici le jeton. Notre backend et notre DPI fonctionnent donc également. Maintenant, nous avons un tableau et ici je vais créer mon premier tableau. Appuyons sur Entrée et nous obtenons notre tableau, nous pouvons l'ouvrir. Et nous voici à l'intérieur du tableau. Voyons maintenant si notre socket IO fonctionne pour cela. Je veux dupliquer cette touche ici et essayer de créer une liste. Voici, par exemple, la première liste, je frappe ici au moins, et nous obtenons la liste. Et à l'étape suivante, nous obtenons exactement la même liste. Maintenant, au deuxième trimestre, nous pouvons créer une nouvelle carte. Par exemple, la première carte, je clique ici, ajoute et nous obtenons cette carte sur les deux pages. Maintenant, nous pouvons ouvrir notre modèle et il fonctionne comme prévu, ce qui signifie que nous avons déployé notre projet avec succès en production. Cela n'a pas été facile, mais c'est l'essentiel de tout projet que vous pouvez déployer. Peu importe la vue angulaire qui réagit. N'importe quel client que vous voulez, JavaScript brut ou n'importe quel backend, il sera toujours vraiment similaire. 48. Exercice: Toutes mes félicitations, vous avez terminé ce cours avec succès, et je pense vraiment que vous êtes géniale et que vous avez appris pas mal de choses. Maintenant, vous avez certainement appris à créer votre projet full stack avec Node.JS sur le backend et à l'exprimer en tant que service. De plus, vous pouvez certainement utiliser les E/S socket car nous l'avons beaucoup utilisé sur le client. Encore une fois, beaucoup d'expérience concernant n TypeScript plus cool, les interfaces et la création d'un bon état réactif. Mais ce n'est évidemment pas la fin. En tant que bon professeur, je dois vous donner des devoirs car si vous voulez améliorer vos compétences en tant que développeur, vous devez apprendre et créer vos propres projets. Et ici, vous avez deux possibilités. Vous pouvez créer votre propre projet à partir de zéro. C'est ce que je recommande vraiment, ou vous pouvez implémenter des fonctionnalités dans ce projet. Et en fait, les deux possibilités présentent des avantages . Si vous continuez à mettre en œuvre ce projet, vous disposez déjà d'une très bonne architecture et ce sera beaucoup plus facile pour vous. Et en fait, la quantité de fonctionnalités que vous pouvez implémenter dans ce projet est vraiment énorme. Tout d'abord, vous pouvez implémenter ici différents rôles. Par exemple, comme les administrateurs qui peuvent créer, par exemple, des équipes, ce qui signifie que vous commencez à organiser les personnes au sein de Teams, tout comme dans le vrai Trello également, par exemple, sur vous pouvez implémenter le glisser-déposer pour les tâches à l'intérieur du tableau. La variante la plus simple pour vous serait d'ouvrir l' application officielle de la bande-annonce regarder leur ensemble de fonctionnalités et simplement implémenter quelque chose qui vous intéresse. Et en fait, c' est très important et c'est lié à votre propre projet. Si vous envisagez de réaliser votre propre projet, je vous recommande vivement de mettre en œuvre quelque chose qui vous intéresse vraiment. Parce que si votre projet ne vous intéresse pas, vous ne le ferez pas sur une longue période. Et si vous êtes à la recherche d' idées pour vos propres projets, interrompez bon nombre d'entre eux. Par exemple, vous pouvez mettre en place un choc du commerce électronique, ou peut-être une librairie, un clone de Netflix ou une application financière pour gérer vos dépenses. J'espère vraiment que ce cours vous a plu et que vous avez beaucoup appris et que nous vous verrons dans mon prochain cours.