Cómo construir Fullstack Trello clone: WebSocket, Socket IO

1. Introducción: Bienvenido a mi curso full stack donde estamos construyendo proyecto ferroviario desde cero. Es tan genial tenerte aquí en este curso, implementaremos un proyecto real comenzando desde la carpeta vacía y hasta la aplicación de producción completamente funcional terminada la cual se desplegará en el riel implementaremos una característica que necesita el proyecto típico, como por ejemplo, autenticación, trabajar con el Pi, administrar y crear estado reactivo, trabajar con formularios y mucho, mucho más. En este curso, utilizaremos montones de herramientas diferentes en nuestro cliente. Usaremos Angular, que es la mejor solución para grandes aplicaciones de producción escalables. En backend vamos a utilizar ahora ajedrez se expresó para crear nuestra API para almacenar nuestros datos. Usaremos MongoDB, que es una solución muy popular para almacenar datos en su proyecto. Y también la gente usa Socket Layer para crear actualizaciones en tiempo real dentro de nuestra aplicación. Obviamente, escribiremos el mejor código posible que será seco, escalable y fácil de entender. Al finalizar este curso, podrás crear tus propios proyectos de cualquier complejidad utilizando estas herramientas. ¿ Quién soy yo? Mi nombre es Alexander cohesion y soy desarrollador web con más de diez años de experiencia, así como el instructor profesional con diversos cursos respecto a tecnologías web. Yo hice todo lo posible para poner todos mis conocimientos dentro este curso y ellos lo quieren decir contigo. Así que bienvenidos a bordo, y comencemos. 2. ¿Qué tecnologías usamos?: En este video, quiero hablar tecnologías que usaremos dentro de este curso. Y justo desde el principio quiero establecer expectativas realistas. Usaremos bastantes tecnologías aquí. Será Angular, Node.js Express, MongoDB, TypeScript y socket IO. Y esto es un montón de cosas que aprender. Y luego este curso, no te enseñaré todas las cosas de principio a fin. Simplemente no es posible. La cantidad de conocimiento en cada herramienta aquí es enorme. Es por ello que este curso está enfocado. Construyendo proyecto real de principio a fin. Sí, seguro que entenderás y aprenderás todas estas tecnologías en algún nivel. Pero aquí, en algunas tecnologías podrías requerir una comprensión básica de lo que estamos hablando en absoluto. Con eso dicho, saltemos a la lista. Y el primero de nuestra lista es Angular. Si no lo sabes, Angular es uno de los tres frameworks front-end más populares, y lo usaremos para construir front and side de nuestra aplicación. Angular es un marco muy estricto que se adapta a grandes empresas. Y tenemos ese TypeScript fuera de la caja, lo que significa que mediante el uso de Angular, podemos construir aplicaciones más grandes, hacerlas seguras debido las tipologías y escalarlas si es necesario. Si no conoces Angular tall, te recomiendo encarecidamente que mires lista sobre los conceptos básicos de Angular, cómo funcionan los componentes , cómo crear módulos , cómo agregar enrutamiento, etc. Después de entender estas cosas, será mucho más fácil para ti saltar en el curso. El siguiente en la lista hemos conocido ajedrez y en realidad NodeJS lo usaremos en el backend con Framework que se llama Express. Y si no lo expresa, el framework más popular para Node.js, es super pequeño, no es estricto, es realmente flexible y lo usaremos como una solución muy popular para construir back-end. Y en este proyecto, debemos construir no sólo conexiones de socket sino también administradas. El back-end, aquí es donde expresa una buena elección real aquí, pero no todo está dentro expresado por defecto, tenemos JavaScript. Por supuesto que no es el mejor enfoque. Realmente queremos usar TypeScript porque usaremos TypeScript en el cliente con angular. Esto es cuando el back-end con Express. También queremos usar TypeScript. ¿ Por qué es eso? Porque en realidad TypeScript trae a JavaScript estática aprieta. Esto hace que nuestro código sea mucho más seguro y vemos todos nuestros problemas, no en tiempo de ejecución, sino en el transpiler y el tiempo. Obviamente ahora un proyecto debemos almacenar nuestros datos en algún lugar, lo que en realidad significa que para nuestro back-end necesitamos una base de datos. Y la solución más popular aquí es MongoDB. Esta es realmente la base de datos más popular en el mundo donde podemos almacenar datos y encaja muy bien en nuestra pila con Angular en el cliente y NodeJS se expresó en el backend. Y por último pero no menos importante en la lista está Socket IO. Queremos en nuestra aplicación implementar WebSockets para notificar a otros usuarios cuando creamos tarea o columna de crédito cuando cambiemos parte, todos los usuarios dentro de esta partes deben ser notificados. Y la solución más popular para WebSockets dentro de la palabra justa conocida se llama socket IO. Es la biblioteca que nos ayuda a administrar WebSockets en el backend y simultáneamente en el cliente. Por eso es realmente una buena opción. Una vez más, si no estás familiarizado con algunas herramientas aquí, está totalmente bien. Empezaremos de cero, pero enfocaremos el aprendizaje de todas estas herramientas solo en las necesidades cotidianas. que en realidad significa que aprenderemos cosas básicas, cosas correctas y cosas que se necesitan para implementar este proyecto ferroviario. 3. Recursos descargables: En este video, quiero recordarles sobre el código fuente, porque en realidad dentro de este curso, en cada conferencia donde codificamos algo, se puede encontrar el código adjunto de esta conferencia específica, que en realidad significa que cada conferencia tiene un código fuente dentro. Y si solo quieres agarrar el código fuente de la conferencia, sin duda puedes hacerlo. Simplemente crece debajo del video y revisa el archivo que se adjunta al video. Y diversamente como siempre, si tienes algún problema con tu código, algo no está compilando o simplemente tienes una pregunta respecto al video o al curso en general, puedes simplemente escribir tus comentarios en ese video, y sin duda les responderé. 4. Instalación de nodos y angulares: En este video, instalaremos NodeJS Angular en su máquina. Como puedes ver aquí, estoy en la página oficial, Nodo js.org, donde puedes descargar ahora ajedrez en tu máquina. Si no lo tienes instalado, puedes comprobar si está instalado en tu máquina. Si solo escribes nodo menos versión dentro de tu consola, si estás obteniendo la versión como 16, está totalmente bien si tienes algo más antiguo, te recomiendo encarecidamente que actualices tu versión Node. Pero aquí está el punto importante, es que se puede ver que tenemos dos versiones. En primer lugar, 16 LTS y 17 actuales. Y se podría pensar, vale, necesito instalar actual. Y no pueden recomendarte instalar actual porque versión de soporte a largo plazo suele ser mucho más estable. Es por esto que para todos mis proyectos, sobre todo si están enviando en producción, estoy usando la versión de nodo LTS, lo que en realidad significa que si estás saltando a este sitio web y ves como la versión LTS pueden ser 17 o 18. Todavía te recomiendo descargar de Ts y no actual y no importa en qué sistema operativo estés trabajando. No, esto funciona en todas partes. Simplemente lo descargas aquí, lo instalas en tu máquina, y luego revisas dentro de la consola con nodo menos versión que se instala correctamente Node en tu máquina. También puede escribir aquí y Pm menos versión para comprobar que npm también está disponible para usted. Nuestro siguiente paso es instalar angular y realmente trabajar con entonces globo, estamos usando la herramienta que se llama Angular CLI, lo que en realidad significa que esta es la herramienta que nos ayuda en primer lugar a crear un Proyecto angular, luego generar diferentes módulos o componentes y hacer muchas cosas con Angular. Entonces cómo podemos instalar Angular CLI en tu máquina, como puedes ver aquí, estoy en la web oficial, Angular slash CLI, y aquí está el primer paso instalando angular CLI. Y podemos simplemente copiar este comando el cual instalará globalmente Angular CLI en su máquina. Y como pueden ver para esto, estamos usando npm, que tendrá después de la instalación de sillas conocidas. Aquí es donde aquí puedo simplemente tirar en pagos tau menos g Angular CLI. Y estoy instalando globalmente Angular CLI en mi máquina. Ahora debemos comprobar si nuestra CLI Angular se instaló con éxito. Esto lo podemos escribir en versión G menos y aquí hay alguna información importante. En primer lugar, podemos ver que Angular CLI es la versión 13, lo que en realidad significa que instalamos angular 13 aquí en nuestra máquina. En segundo lugar, esta es nuestra versión de nodo que se activa en su máquina. Esto es npm y esto es sistema operativo. Y algunas versiones del Angular que puedes ver aquí. Si ve dicha salida, significa que instaló con éxito Angular CLI en su máquina. El siguiente paso es generar frente y parte de nuestra aplicación. Como pueden ver aquí, yo estoy dentro de él se doblen. Y no crearon nuestro proyecto aquí, lo que en realidad significa que rara vez creamos todo desde cero. Entonces lo que quiero hacer aquí, sólo puedo probarlo MK deal y luego el nombre de nuestro proyecto, L Trello. Y en realidad en este proyecto estamos implementando el clon de trailer. Esto es y Aquí solo hay un nombre con un bonito prefijo y WSSE, puedes crear una carpeta no desde el terminal bud, solo en tu gestor de archivos. Ahora, quiero saltar dentro de nuestra carpeta ultra law. Y aquí debemos crear dos carpetas diferentes porque queremos separar nuestro backend de nuestro front-end. Y se podría preguntar, ¿por qué es eso? Y en realidad por diferentes razones. En primer lugar, es más fácil dividir tu front-end y back-end si quieres por alguna razón ponerlos más tarde en diferentes repositorios o tal vez incluso diferentes equipos. En segundo lugar, si los separamos a carpetas diferentes, entonces no es un monolito, lo que en realidad significa que seguro no inyectaremos algunas cosas del backend dentro de la carpeta front-end, y viceversa. Están realmente aislados y lo separan ya que necesitan estar en la aplicación real. Es por esto que aquí quiero crear dos carpetas. En primer lugar, será cliente, y en segundo lugar será servidor y cliente insight. Tendremos nuestra aplicación angular y luego dice servidor. Tendremos nuestros conocidos gs con Express, que será nuestra aplicación back-end. Ahora podemos generar nuestra aplicación angular, como se puede ver aquí en la documentación, simplemente ejecutamos en gene hue y el nombre de la carpeta. Entonces simplemente saltamos la carpeta e iniciamos nuestro servidor. Pero aquí tenemos un problema porque estamos directamente creados nuestra carpeta de cliente y podemos saltar ahora insertar carpeta cliente, lo que en realidad significa que no podemos crear nuestra aplicación angular con porque la carpeta ya existe. Para esto, podemos usar un comando muy bonito en gene you. Y luego aquí debemos proporcionar directorio de nombre de la aplicación, y aquí está dot slash, lo que en realidad significa que este comando creará para usted en usted aplicación de angular en su directorio existente. Como puedes ver aquí, estoy dentro de cliente donde exactamente queremos generar nuestra aplicación angular. Y pueden pegar este comando aquí en gene Hue nombre de la aplicación, directorio dot slash. Y obviamente no queremos nombrar el nombre de nuestra aplicación aplicación. Aquí es donde aquí podemos proporcionar ELL Trello, igual que nombramos nuestro proyecto después del mismo Enter oculto. E iniciamos nuestro proceso de generación de nuevo proyecto Angular. Y aquí nos llegan algunas preguntas de Angular CLI. ¿ Necesitamos enrutamiento angular? Por supuesto, sí, por esto estoy golpeando sí, aquí, qué hoja de estilo debemos usar. Y aquí voy a elegir un CSS. Después de esto, se generará nuestro proyecto. Como puedes ver aquí, todos los paquetes se instalaron correctamente, pero después estamos recibiendo un mensaje que podría ser confuso para ti. Aquí estamos recibiendo el mensaje de que ahora se creó el branch master como nuestra rama git predeterminada. Y podrían cambiar el nombre por nombre más adelante, pero aún no está ahí. Y en realidad no importa qué rama se generó para ti, maestro o principal, funcionará en todo caso. Por lo que solo puedes ignorar esta advertencia. Y el último paso que tenemos que hacer es iniciar nuestra aplicación cliente. Y como se puede ver aquí en la documentación, está en G servir. Por lo que simplemente insertamos cliente debemos probarlo y simplemente servirlo sin especificar nada. Como pueden ver aquí, estamos obteniendo salida verde. El mensaje de que ahora el servidor de desarrollo angular en vivo está escuchando en el host local para 1200. Por lo que ahora podemos simplemente abrir localhost 4,200. Y aquí vemos la página angular por defecto y ahora insertamos consola. Nuestro servidor web debe estar funcionando todo el tiempo mientras desarrollamos la aplicación. Ahora, echemos un vistazo a los archivos que se generaron rápido. Como pueden ver aquí, abrí mi editor, estoy en la carpeta L Trello, y tenemos aquí dos carpetas, servidor y cliente y insight client. Todos estos archivos se generaron con Angular CLI. Y la parte más interesante para nosotros es esta carpeta fuente. Y dentro de AB, tenemos nuestro componente de app. Esto es exactamente lo que vemos aquí en la pantalla. Este es el componente por defecto de angular. Aquí es donde aquí en primer lugar, quiero eliminar componente de aplicación, SCSS, especificación de componentes de la aplicación. Y aquí sólo tenemos estos cuatro expedientes. Ahora podemos saltar dentro del componente de App HTML, y realmente queremos eliminar todo excepto de esta última línea, salida del router. Esto es extremadamente importante rápido. Por lo que voy a quitar todo de este archivo y sólo vivir aquí sequía la salida. Y en la parte superior sólo podemos probarlo. Hola l Trello. Entonces sabemos que está funcionando. Después de esto, debemos saltar dentro nuestro componente de app, cambiarlo. Porque en realidad aquí estamos usando URLs de estilo del archivo, lo que alterará el eliminado. Aquí es donde simplemente podemos eliminar esta línea y solo usamos aquí una plantilla. Y ni siquiera necesitamos este tráiler de título L porque no lo estamos usando. Simplemente tenemos nuestro componente de app y es un componente vacío. Ahora cuando saltaré a la página dentro del navegador, puedo ver que todo se elimina. Nuestra página está completamente limpia y ahora tenemos solo hola pequeño mensaje de tráiler, lo que en realidad significa que preparamos con éxito la parte cliente de nuestra aplicación que implementará de buena voluntad más adelante. 5. Configuración de servidor: En este video, quiero preparar nuestra parte back-end de nuestro proyecto para iniciar la implementación. Como pueden ver aquí, está completamente vacío. Entonces lo que vamos a crear aquí, en realidad lo que debemos hacer, debemos inicializar el paquete archivo JSON con conocido. Entonces aquí podemos escribir npm en necesidad y nos creará un paquete archivo JSON. Aquí, debemos responder algunas preguntas. Normalmente solo golpeo Enter en todos ellos. No importa para nosotros. Y al final simplemente golpeamos Sí, y estamos listos. Ahora podemos saltar y dicho editor e ir fuera de nuestro cliente a nuestro servidor. Ahora aquí solo tenemos un archivo sencillo, Beckett Jason con nombre, descripción de la versión , guión principal, donde no tenemos nada en el autor vacío y la licencia. Ahora, debemos instalar dos paquetes que nos ayuden a crear nuestro proyecto back-end. Entonces aquí podemos escribir el estilo de las deficiencias. Y después de este no demonio menos d, ¿Qué significa? En primer lugar, ¿qué es ningún demonio? Que este es un paquete especial que nos ayudará a recargar cada vez que cambiemos algún archivo, nuestra aplicación back-end. Y esto es exactamente lo que Angular está haciendo rápido en el cliente. Pero dentro de nuestro proyecto de back-end con no tenemos algún servidor web que está haciendo esto rápido. Es por esto que cuando Stalin y un demonio, y como pueden ver aquí, usé la opción menos d, lo que en realidad significa en nuestro paquete Jason, no se instaló ningún demonio dentro de las dependencias dev. Y las dependencias dev son dependencias que estamos usando cuando estamos desarrollando un proyecto. No necesitamos ningún demonio en producción. Esto es sólo para el desarrollo. Y nuestro siguiente paquete se llama nodo Ts, y también es solo para desarrollo. Aquí es donde aquí estamos escribiendo npm install Ts node menos t, lo que significa que esta es una dependencia dev. Entonces, ¿qué está haciendo el nodo? Este es solo un proceso que transpira nuestro código TypeScript dentro del código JavaScript sobre la marcha, ejecutado al igual que el código JavaScript normal dentro del nodo. Esto es extremadamente eficiente porque queremos escribir código TypeScript. Es por esto que debemos transformarlo primero de TypeScript a JavaScript. Y este paquete ayuda a hacerlo de una manera realmente fácil. Ahora vamos a saltar y dijo Beckett json y comprobar lo que tenemos. Tenemos aquí para dev dependencias. Y aquí quiero crear un nuevo script, pero no necesito la prueba de guión. Queremos aquí iniciar nuestro servidor web. Esto es y, aquí hay un estilo de guión, y aquí podemos llamar a un demonio el camino a nuestro archivo. Y aquí quiero escribir fuente slash server.js. Y como pueden ver aquí, tenemos el server.js, que crearemos en un segundo. Entonces este es el archivo TypeScript y la parte más interesante aquí que no especificamos que estamos usando aquí nodo Ts dentro de ningún demonio. Daemon lo hace automáticamente fuera de la caja si instalamos el nivel nevado y especificamos aquí no archivo JavaScript sino el archivo TypeScript. Y lo último que debemos hacer es crear ts config file, que es un archivo de configuración para TypeScript. Esto es camino aquí dentro de una carpeta de servicio. Quiero crear un nuevo archivo, ts config dot json. Aquí voy a pegar tal conflicto y este es super típico conflicto para la aplicación Node.js con TypeScript. Entonces aquí estamos configurando las opciones del compilador. Así es exactamente como TypeScript traspasará nuestro código de TypeScript a JavaScript. Entonces el módulo CommonJS significa que estamos escribiendo nuestro TypeScript en el backend dentro del cofre sustantivo. Y nuestro objetivo es la óptica atmosférica, porque el nodo puede leer fácilmente en mi script seis código. Entonces nuestra resolución de modo es nodo porque estamos escribiendo dentro de sillas de sustantivo, muévanse en los mapas de origen. Aquí es donde el mapa de la fuente a través. Nuestro trato es directorio. generará salida. Aquí tenemos una carpeta dist, se creará automáticamente. También tenemos aquí estricto verdadero módulo NDS inter pop, y necesitamos esta opción sí módulo inter papa para convertir correctamente son entradas mecanografiadas para requerir dentro de jazz conocido. Por lo que creamos con éxito nuestra configuración de TypeScript, y ahora podemos crear nuestra carpeta fuente y dentro de este archivo, porque como puedes ver aquí, nuestro servidor vivirá dentro del servidor fuente Ts. Entonces estoy saltando en tal fuente y estoy creando un file server dot ts. Y no te olvides de Ts NodeJS. Ahora podemos saltar dentro y simplemente escribir servidor de registro de consola solo para probar si está funcionando. Ahora, saltaré dentro consola y aquí dentro de la carpeta del servidor, puedo escribir npm start, como puedes ver aquí, tenemos una salida de ningún demonio, que esta totalmente bien. Se está lavando archivos mecanografiados aquí y aquí. Ningún demonio inició nuestra prueba de servidor fuente de nodo Ts, lo que en realidad significa que simplemente usa el nodo Ts en su interior, pero reinicia nuestro servidor. Y este es el servidor de salida que escribimos dentro de este archivo. Y ahora Demon Bull reinicia nuestro servidor cada vez que hacemos algunos cambios. 6. Instalación de la base de datos: En este video, hablaremos de en base de datos de estilismo en su máquina. Y hay otra dimensión que usaremos MongoDB aquí. Entonces, ¿cuál fue la idea? Debemos instalar en nuestra base de datos de máquinas local para poder guardar allí y leer desde allí algunos datos que usaremos en nuestra aplicación. Estos datos estarán disponibles para nosotros en vivo localmente. En el momento en que queremos desplegar nuestro proyecto a producción, debemos configurar la base de datos sobre producción y lo haremos al final de este curso. Entonces ahora la pregunta es cómo podemos instalar MongoDB en su máquina específica y usted puede trabajar en diferentes sistemas operativos. Por lo que queremos algo que funcione en todas partes sin molestias. En realidad instalar la base siempre puede tener algunas dificultades. Aquí como puedes ver, ya abrí el sitio web oficial de MongoDB con la sección de instalar MongoDB. Esta es la URL para que puedas consultarla si te interesa, y se ve realmente fácil. Simplemente elegimos aquí un sistema operativo. Por lo que aquí estoy dando click en el enlace Centro de descargas de MongoDB. Y ahora estoy aquí en esta página web. Y en este punto ya no está realmente claro qué MongoDB debemos instalar. Existen diferentes versiones de la misma. Hay versiones gratuitas que queremos usar y las soluciones de pago rub que no necesitamos. Y en realidad aquí debemos gatear un poco y ver aquí el servidor de la comunidad MongoDB. En realidad esta comunidad MongoDB es el nombre de la versión gratuita de MongoDB que queremos usar. Entonces aquí a la derecha podemos elegir la versión actual está totalmente bien. Ahora aquí está su plataforma, tal vez Windows, y ahora simplemente la descarga e instala. Entonces solo estamos haciendo doble clic aquí e instalándolo. Pero después de esto, hay algunos pasos adicionales. Debemos configurar el directorio de datos. Aquí se puede ver que lo están haciendo dentro de la línea de comandos como esta. Y luego así, es por esto que puedes instalar MongoDB así. Esto está totalmente bien. Esta es la forma oficial, pero en realidad mis alumnos tuvieron muchos problemas al usar bases de datos con instalación oficial. ¿ Por qué es eso? Porque en realidad en cada sistema operativo, se pueden tener algunos problemas. Adicionalmente, debes crear una carpeta, luego debes especificar la ruta y así sucesivamente. Es más difícil. Es por esto que te recomiendo encarecidamente que busques la segunda posibilidad, cómo puedes instalar la base de datos en tu máquina. Y luego hablando aquí de DACA y de Docker Desktop. Entonces, ¿qué es Docker? Esta es una herramienta adicional específica que no debes aprender, pero simplemente puedes usarla. La idea principal es que Docker empaca todo dentro del contenedor. Está completamente aislado y no tiene nada que ver con tu sistema operativo. Docker funciona en todos los sistemas operativos y es gratis, lo que en realidad significa la idea aquí de que estamos instalando Docker, antes que nada en tu máquina. Y en segundo lugar, utilizamos la imagen oficial de Mongo de Docker. Como puedes ver aquí, el enlace para Mongo, que es soportado por el propio MongoDB. Por lo que esta no es alguna herramienta de terceros. Esto es super oficial y la idea principal es que este mongo esté empacado dentro de contenedor, lo que queda completamente aislado en tu máquina y simplemente obtienes del contenedor, el puerto donde puedes conectar y escribir datos a este contenedor. Y así es como se verá cuando empieces en ella. Como se puede ver aquí a la izquierda, debe ser de color verde. Y en este punto, ya sabes, vale, mi Docker se está ejecutando y para ti probablemente la lista aquí estará vacía. Esto está totalmente bien. La idea principal es que antes que nada, inicies Docker en tu máquina. Después de esto, simplemente saltamos a la consola y debemos ejecutar dicho comando como puedes ver aquí escribí docker run y después de instalar Docker desktop en tu máquina, puedes escribir Docker dentro del consola. Este es el nombre conocido, y aquí estamos escribiendo docker run luego menos d, lo que significa que este debe ser un proceso desapegado, lo que en realidad significa que no queremos ejecutarlo aquí dentro de este terminal. Sólo queremos despegarlo de la terminal. Aquí especificamos los puertos y después de esto estamos especificando nombre mongodb. Y aquí, Mongo, este nombre, mongodb es el nombre de contenedor en mi máquina. Y aquí lo que queremos descargar, esta es exactamente la imagen que usaremos. Aquí estamos usando Mongo 404. También puedes usar la versión posterior aquí puedes consultarla en la página oficial del Mongo o aquí dentro de Docker. Como puedes ver, puedes dar clic aquí etiquetas, desplázate un poco. Por ejemplo, puedes usar latest o simplemente comprobar la versión, como puedes ver aquí, la última versión es 507. En este momento, instalé en mi máquina para 0 para, pero eso no hace esa enorme diferencia. Las cosas que vamos a probar dentro MongoDB son las mismas en todas estas versiones. Ahora estoy golpeando aquí y, y Docker descargará esta imagen en mi máquina. Como puedes ver, no obtuve ninguna salida en absoluto excepto de un hash. Y esto se debe a que MongoDB ya está descargado por Docker en mi máquina. Entonces esto no es un problema, y esta línea simplemente arrancó Mongo DB de nuevo en mi máquina. Y en realidad si estoy abriendo ahora la herramienta Docker, puedes ver aquí contienen un MongoDB y es verde porque se está ejecutando en este momento y podemos hablar con él. Es por esto que, como puedes ver, no necesitas crear archivos adicionales. No es necesario que te preocupen algunos permisos o carpetas. Simplemente funciona. Y esta es una sola línea que se utilizan para una gran cantidad de proyectos. Ahora la pregunta es obviamente cómo podemos saltar dentro la consola de MongoDB cuando está dentro del contenedor. Y para ello tenemos un comando especial, docker exec, que significa ejecutar IT. Y aquí está el nombre de nuestro contenedor. En nuestro caso fue MongoDB. Y después de esto estamos escribiendo nuestro comando y queremos venir y Mongo aquí porque esto es lo que se instala dentro de contenedor. Dentro del contenedor se puede instalar lo que sea. En nuestro caso, esta imagen de Mongo simplemente tiene a Mongo dentro. Es por esto que estamos golpeando Enter. Estamos recibiendo aquí muchos mensajes de MongoDB. Y como pueden ver después de esto, ahora estoy aquí en la terminal de Mongo dentro de contenedor, y pueden escribir aquí algunos comandos de Mongo. Por ejemplo, mostrar bases de datos, punto y coma, estoy golpeando Enter, y se puede ver qué bases de datos tengo aquí dentro. Ahora bien, se podría decir, está bien, pero yo no usé Docker, instalé MongoDB solo con la forma oficial, ¿qué deberían hacer? Y en realidad debes hacer sólo una sola cosa. Si lo instalaste de manera oficial, entonces tienes dos comandos diferentes en tu consola. En primer lugar, será un comando de Dios, y esto comenzará exactamente igual que lo hicimos con el proceso de MongoDB ejecutar docker en su máquina, lo que en realidad significa que la base de datos será como un proceso quese ejecuta en su máquina. Y el segundo comando que quieres usar es Mongo. Este comando saltará directamente insertar consola, igual que hicimos con torque. Será exactamente lo mismo. Lo más importante en este curso que su base de datos Mongo debe estar funcionando directamente en su máquina durante el desarrollo del proyecto. Lo que en realidad significa que tienes realmente tres cosas. En primer lugar, tienes una base de datos estándar. En segundo lugar, han iniciado servidor web para el back-end. Y el último es el servidor web estático para el frontend. 7. ¿Utilizas un buen editor?: casi terminamos de submecanografiar todas nuestras herramientas. Y la última pregunta que quiero hacerte, ¿realmente usas el editor correcto? Porque en realidad vamos a escribir mucho TypeScript dentro de tu editor. Y el editor no soporta TypeScript tan bien, entonces podrías pensar en usar otro editor. Como pueden ver aquí, estoy dentro de mi editor, este es Vim, pero no se lo estoy sugiriendo. Yo sólo quiero mostrar de qué estoy hablando. Como puedes ver aquí donde insertamos componente dentro Angular y aquí tenemos entrada de nuestro componente. Normalmente cuando estamos escribiendo el código con no escribimos invertidos con solo escribir algo como agregar componente o tal vez simplemente agregar que comp. Y luego tenemos un autocompletado. Y esto se puede ver aquí podemos elegir un montón de cosas. En realidad queremos ingresar componente desde Angular. No sólo tendía aquí. Y antes que nada, fue autocompletarlo hasta el final. Y en segundo lugar, obtuve este componente de entrada externa de Angular com. Y es sumamente importante que tu editor pueda hacer esto. Realmente necesitas soporte de estas entradas externas cuando estás escribiendo código. Porque cada vez que debes escribir una entrada, si realmente lo vas a hacer con las manos como componente de entrada, y realmente no recuerdas de qué paquete debes ingresarlo. Esto no es eficiente. Simplemente pasas tiempo que puedes escribir código en las cosas de Ron. Realmente necesitamos esta característica de entrada externa. Y la segunda característica es obviamente que quieres tener un soporte de TypeScript dentro de tu editor, lo que en realidad significa cuando estamos escribiendo algo no correcto. Por ejemplo, no seleccionar aquí, sino simplemente seleccionar dónde llegar directamente aquí, un argumento de mensaje de tipo select no existe en el componente de tipo, lo que en realidad significa pero no gastar tiempo depurando algo de magia. Simplemente vemos nuestro typo ahí directamente dentro del editor. Puedes usar aquí cualquier editor que tenga soporte de TypeScript. Pero si no sabes qué editor usar, te recomiendo encarecidamente que busques VS Code. Este es un editor completamente gratuito, que funciona en cada sistema operativo. Simplemente lo instalas. Estás obteniendo dicho editor con soporte incorporado de TypeScript fuera de la caja, lo que en realidad significa que estás obteniendo todas estas características dentro de tu editor. Y en este caso, es mucho más suave para ti escribir código. 8. Configuración de la toma de corriente con Express: En este video, comenzamos con el desarrollo de nuestro proyecto. Y en realidad el objetivo de este video es configurar nuestro servidor back-end con Express, MongoDB y socket IO. Entonces empecemos. Aquí. Debemos instalar varios paquetes nuevos. En primer lugar, queremos expresar que esto es un marco. Es por esto que quiero saltar dentro de la consola. Y como se puede ver en donde dentro de la carpeta raíz se dibuja esto, no queremos instalar aquí paquetes porque primero debemos saltar dentro de nuestra carpeta del servidor aquí boop queremos instalar paquetes. Aquí es donde estoy justo en npm install express. En este caso, estamos instalando este framework como dependencia. Aquí puedes ver ahora tenemos una nueva dependencia, expresa esto como nuestro marco. Lo siguiente que queremos instalar es mangosta. Y si no sabes qué es Mangosta, este es el paquete más popular para trabajar con MongoDB dentro de sillas conocidas. Por qué es más popular, porque simplemente puedes configurar tu conexión al MongoDB con él, puedes crear tus modelos y trabajar con MongoDB de manera más correcta trabajando con modelos. lo que normalmente tienes algo así como una RAM y aprenderemos Mangosta más pronunciada en las próximas conferencias. Y lo último que queremos instalar aquí es Socket IO. Esta es la razón por la cual npm instala socket dot ion. Y esta es exactamente nuestra biblioteca para trabajar con WebSockets dentro de sillas conocidas. Entonces como puedes ver, todas nuestras dependencias están instaladas y ahora podemos saltar en set source, servidor Ts, y aquí no tenemos nada. Y podemos comenzar con la configuración de nuestro jarabe. Pero en realidad aquí está la pregunta. Es realmente fácil simplemente escribir tu código para Stratton express. Su entidad es realmente fácil de crear un servidor web para Socket IO, pero en realidad no es tan fácil configurar juntos MongoDB Express y socket IO. Porque lo que queremos de expresado, queremos rondas normales, igual que en la aplicación normal, pero también queremos enlazar a su socket IO para que podamos trabajar con WebSockets. Y además de todo esto, necesitamos de alguna manera iniciar nuestro MongoDB. Entonces como dije, no es fácil, pero esta es la producción lejos porque en realidad nadie necesita un solo paquete. Realmente queremos la aplicación completa lista para la producción. Por lo que antes que nada aquí entraré nuestro Express. Expreso. Y en realidad en este momento probablemente pienses, vale, lo que está haciendo. Ha intentado un inverso dentro de las sillas sustantivo. Y en realidad esto está totalmente bien porque aquí no estamos bien. Javascript, donde justo aquí, mecanografiado. Y se transpira con nuestra config. Y sólo para recordarte aquí tenemos nuestra ts config. Esto le sucedió a ECMO ScriptSig, que ya puede ser legible Jess. Pero lo más importante, más resolución es CommonJS y node. Aquí es donde se convertirá para requerir y funcionará como un encanto dentro ahora del jazz. Pero para nosotros es sumamente cómodo porque usar entradas es mucho mejor de lo que requiere la mano derecha. Y aquí tenemos un siguiente problema. Como pueden ver aquí, tengo un error. No se puede encontrar el archivo de declaración para el módulo expresado. ¿ Qué tiene un medio? Mecanografiado intenta ayudarnos con lo inverso. No puede hacerlo fuera de la caja porque TypeScript no sabe nada del paquete express. Y aquí hay una solución que debemos instalar con npm install save-dev, tipos express. Por lo que podemos instalar typings adicionales para el paquete express y luego escribir script puede ayudarnos a pequeños. Y esto es exactamente lo que queremos hacer. Tenemos que saltar y configurar consola y derecho y pagos tau. Y aquí está en los tipos slash Express, y aquí es importante menos la opción de simplemente instalarlo como una dependencia dev. No necesitamos esta biblioteca en la producción. Y como se puede ver después de la instalación, este error se ha ido. Y ahora TypeScript nos puede ayudar con Express. Por lo que aquí importamos con éxito nuestro paquete express y ahora podemos crear nuestra aplicación. Entonces simplemente puedo escribir aquí const ab iguales, y aquí estamos llamando a Express. Y como pueden ver ahora, si soy halita y expreso, se pueden ver todos los tipos de expresados de este paquete específico. Por ejemplo, podemos leer aquí que crea una aplicación expresa y esto es sumamente útil para fines de desarrollo. Lo segundo que queremos hacer, debemos crear un servidor HTTP y verás por qué en un segundo. Entonces aquí quiero deestructurar, crear servidor desde, y aquí estará http. Como puedes ver, estamos sacando ATP de la caja y también creamos servidor porque este es el paquete de nodos por defecto. Pero podría suceder que te falten typings para sillas conocidas. Aquí es donde podemos saltar directamente en la consola y escribir npm install types node menos t Y en este caso estamos instalando seguro todos los typings que son necesarios para las sillas de sustantivo. Por lo que aquí importamos crear servidor desde http. Ahora debemos usarlo. Por lo que después de la aplicación, podemos crear nuestro servidor HTTP. Y aquí queremos llamar a nuestro servidor de creación y proporcionar dentro de nuestra aplicación. Y sólo para recordarte, app, esta es una instancia de nuestro Express. Este es nuestro servidor express. Estamos creando aquí son servidor HTTP. Adicionalmente, lo siguiente que queremos introducir aquí es socket. Esto es y aquí, donde es importante Servidor con S grande del paquete IO del socket. Y ahora después de esto podemos crear directamente nuestro servidor socket. Entonces aquí const ion, y aquí nos estamos llamando servidor. Y por dentro estamos proporcionando nuestro servidor HTTP. Esta es exactamente la razón por la que creamos este servidor HTTP primero y antes se expresan. Entonces ahora en este expediente tenemos tres cosas diferentes. En primer lugar, tenemos nuestra app, por lo que podemos trabajar directamente con Express. En segundo lugar, tenemos nuestro servidor HTTP, el cual podemos comenzar con algún puerto. El tercero es nuestro IR, por lo que podemos hacer algunas solicitudes de WebSockets. Y solo para comprobar que todo está funcionando, quiero usar aquí nuestra app y simplemente probarla apt-get slash. Por lo que queremos crear nuestra nueva ruta en slash. Y aquí no necesitamos nada, pero solo quiero responder con alguna cuerda. Es por esto que aquí podemos escribir solicitud y respuesta. Y aquí dentro de rest dot send API está arriba. Si no estás familiarizado con Express, así es como creamos rutas de juego justo dentro de nuestro servidor backend. Entonces aquí estamos diciendo, ok, estamos creando ahora get route for slash, lo que significa para homepage. Y aquí está nuestro Kohlberg. Dentro de nuestro Kohlberg estaban recibiendo solicitud y respuesta. Y aquí podemos usar dot send para enviar la cuerda a esta ronda específica. Lo último que debemos hacer aquí es arrancar nuestro servidor. Por lo que aquí podemos escribir servidor HTTP. No escuches y escuches. Estamos proporcionando algún puerto, por ejemplo, para 1001. Después de esto, tenemos una devolución de llamada. El servidor web torre tiene tanto éxito como talentoso. Entonces podemos escribir dentro de algún log de consola, por ejemplo, que nuestra API está escuchando en el puerto. Y aquí estará nuestra parte. Y en realidad se habría aislado para poner el deporte en archivo de configuración adicional, pero por ahora también irá. Entonces vamos a comprobar si está funcionando. Tengo aquí una pestaña con servidor API abierto. Y como pueden ver aquí, ningún demonio reinició este servidor web una y otra vez. Y en algún momento ahora estamos recibiendo nuestra API de registro de consola está escuchando en el puerto 4,001, lo que en realidad significa incluso navegador, abriremos host local para 1001. Puedes ver aquí nuestro mensaje API está arriba, pero no es tolerable. También queremos comprobar si nuestra conexión de capa de socket está funcionando. Es por esto que aquí después de EB, podemos escribir ir dot y aquí tenemos encendido. Y como pueden ver, en primer lugar, estamos sacando todos los typings de la caja con Socket Layer. No necesitamos instalar ningún paquete adicional. En segundo lugar, se puede ver que en la función de escucha a nuestro socket IO, lo que en realidad significa que podemos escribir aquí en, y estamos proporcionando aquí como la primera conexión de parámetros. Y en realidad esta es la acción por defecto que puede ocurrir dentro del socket IO. Y aquí tenemos nuestra devolución de llamada. No queremos nada por ahora aquí, pero simplemente podemos escribir console.log conectado. Y realmente no podemos ver que la capa de socket esté funcionando para nosotros porque simplemente le configuramos una pestaña en el back-end, pero no en el cliente. Pero esta es una forma de cómo vamos a escribir nuestro código Socket Layer en el backend y estamos completamente preparados para ello. Entonces aquí zap, estamos trabajando con Express con un patio, estamos trabajando con Socket Layer y servidor HTTP que estamos usando para iniciar el servidor. Y lo último que debemos hacer aquí es configurar nuestra Mangosta. Y sólo para recordarte, mangosta el paquete para que funcione con MongoDB. Entonces aquí en la parte superior quiero entrar uno va de mangosta. Y ahora aquí hay un punto realmente importante. Nunca desea iniciar sus servidores web antes de iniciar la conexión a la base de datos. La idea principal es que dentro de usted tiene observador, va a hacer algunas solicitudes a la base de datos, y la base de datos no está listo todavía, entonces podemos hacer esta solicitud, lo que en realidad significa que cada vez queremos estar seguros de que MongoDB es, su conexión está establecida. Y sólo después de esto estamos iniciando nuestro servidor web. Esto es y aquí lo que quiero escribir después de nuestro socket IO, podemos escribir aquí Mangosta punto y tenemos aquí un método conectar. Y en realidad dentro queremos proporcionar nuestra URL mongodb. Entonces lo que quiero pegar aquí es este año, es MongoDB colon dos barras, host local 27017 puerto slash l Trello. Y en realidad esta parte de la izquierda es la ruta por defecto de MongoDB. Y en realidad no importa cómo instalaste Mongo DB con la forma oficial o con contenedor Docker, funcionará exactamente igual. O tiene un proceso MongoDB en ejecución en su máquina, en el deporte, o tiene un MongoDB corriendo dentro del contenedor con el deporte, que está disponible afuera en nuestra máquina local. Aquí después de slash, este es sólo el nombre de cómo una base de datos se puede escribir aquí, cualquier nombre y se creará. Acabo de escribir aquí l trailer, como el nombre de nuestro proyecto. Entonces esta línea es en realidad una promesa. Es por esto que aquí podemos escribir punto. Luego después de conectarnos con éxito a nuestra base de datos MongoDB, entonces se activará. Y ahora dentro podemos en primer lugar escribir que conectamos con éxito a nuestra base de datos. Para que pueda escribir aquí conectado a MongoDB. Y también quiero mover este oyente HTTP dentro. En este caso, en primer lugar, se establece nuestra conexión con MongoDB. Y después de esto, estamos iniciando nuestro servidor. Ahora quiero saltar dentro nuestro servidor web y comprobar si está funcionando. Como puedes ver ahora, estoy recibiendo mensaje conectado a MongoDB y después del semestre que nuestra API fue exitosa, el estándar, lo que en realidad significa que este es exactamente nuestro objetivo. En primer lugar, MongoDB. En segundo lugar, nuestro servidor web. En realidad, en este momento, podrías conseguir algo de Azure con respecto a la conexión aquí. Y el problema más popular que podrías tener, no iniciaste tu proceso de MongoDB en tu máquina. Si no se inicia, entonces no podemos conectarnos a una base de datos MongoDB. Entonces aquí probablemente obtendrá algún error, como no se puede conectar a Mongo DB o la conexión falló. Pero si ves en tu pantalla conectado a MongoDB y se inicia el pago, esto significa que configuraste todo con éxito. Y comenzamos nuestro servidor web en el backend con MongoDB y socket IO. 9. Creación de un modelo de usuario de Mongoose: En este video, hablaremos sobre creación de nuestro modelo de usuario. En realidad ahora arranque de la aplicación será usuarios registrados. Por lo que el usuario actual, podemos iniciar sesión con el usuario, lo que significa que necesitamos de alguna manera manejar a nuestros usuarios en el front-end, en el backend y dentro de la base de datos. Por lo que en este video, nos centraremos en mangansta y base de datos. Una vez más, lo que es mangosta ya estaban instalados este paquete en el paquete R JSON. Se puede ver Mangosta aquí, pero lo que esencialmente hace, este es el sitio web oficial de Mangosta. Se puede ver aquí el ejemplo. Entonces inyectamos bienes humanos y hacemos Mangoose dot connect. Y aquí hay una base de datos MongoDB. Después de esto podemos escribir mangosta módulo cat, y definimos que nuestro gato ha nombrado cadena, lo que en realidad significa gato es nuestra entidad. Y ahora podemos crear esta entidad justo dentro de JavaScript. Aquí es donde aquí estamos justo en Reino Unido ed, y proporcionamos dentro del nombre. Entonces aquí creamos un gatito, que es sólo un objeto. Pero ahora dentro de Katie tenemos un método de guardar. Y este método vuelve como una promesa, lo que en realidad significa que así es como vamos a guardar el registro dentro de MongoDB. Ahora podrías preguntar, vale, ¿para qué necesitamos mangoose? Por qué no podemos simplemente usar el controlador oficial MongoDB como mongodb dot save y tirar dentro de algún objeto que queremos guardar. Esto no es cómodo trabajar en el enorme proyecto, incluso en el proyecto medio, no es tan cómodo porque no se tiene ninguna abstracción. Estás escribiendo código de súper bajo nivel, cómo necesitas guardar datos en la base de datos, o cómo los leerás. En realidad, es por eso que preferimos usar rampas dentro de nuestros proyectos backend. Qué son Ram Dass rápido, definimos algo así como modelos, que son nuestras entidades dentro de nuestro proyecto. Por ejemplo, tenemos un usuario que tenemos tal vez tareas o tienes tableros si estamos hablando aplicación trail y demás. Y entonces podemos definir qué relaciones entre estos modelos. Y entonces todas estas relaciones se hacen de manera mucho más fácil. Podemos hacerlo nosotros mismos con MongoDB, lo que en realidad significa que simplemente escribimos menos código. Es por ello que en este video, queremos centrarnos en nuestro modelo de usuario. Y lo primero que quiero hacer dentro de fuente, quiero crear tipos carpeta. Y en realidad estamos justo aquí TypeScript, lo que significa que debemos aprovecharlo. Y esto es súper importante para invertir más tiempo en TypeScript que en escribir tu código. En este caso, será más fácil para ti desarrollar tu aplicación. Aquí es donde aquí en los tipos de fuente quiero crear interfaz de usuario dot ts. Y como pueden ver aquí, tengo esta notación donde tenemos un postfijo de qué es exactamente. El interior, quiero crear nuestra nueva interfaz de usuario. Y si no conoces muy bien TypeScript, esto es solo una definición del objeto que podemos usar en todas partes. En este caso aquí estamos usando la interfaz de Word, que es una palabra reservada dentro de TypeScript. Y aquí definimos un usuario de interfaz y podemos definir qué campos tenemos dentro de nuestro usuario. En primer lugar, debemos crear un correo electrónico, porque el correo electrónico es lo que estamos usando en la aplicación para registrar usuario, validar a este usuario, después enviar correo electrónico al usuario. Además, necesitamos aquí un nombre de usuario y se transmitirá y también se necesitará contraseña. Y obviamente debemos hash de una contraseña y nunca parar contraseñas al igual que una tensión de avión. Y por último pero no menos importante aquí se creará en, no necesitamos usar este campo, pero es realmente agradable tenerlo, antes que nada para propósitos de depuración. Y en segundo lugar, podemos obtenerlo de Mangosta justo fuera de la caja y será fecha. Entonces así es como se ve una interfaz de usuario. Ahora en toda nuestra aplicación, en nuestro lado back-end, podemos usar esta interfaz de usuario. Ahora a la derecha, quiero crear un modelo para este usuario. Es por esto que en fuente podemos crear nueva carpeta la cual se llama modelos. Y por dentro podemos registrar usuario dot ts, y este es nuestro modelo. Esto es exactamente algo para Mangosta. Entonces lo que quiero escribir aquí es nuestro esquema de usuario. Y lo que significa aquí definimos un esquema de nuestro modelo. Y para ello estamos usando nuevo esquema. Y como pueden ver, no tengo ningún autocompletado. Así que vamos a tratar de importar aquí esquema. Y como pueden ver, aquí no tengo una entrada correcta. Tengo otra entrada del inspector, y esto no es correcto. Por lo que voy a escribir aquí esquema de entrada de mangoose. Vamos a comprobar si tenemos un error. No tenemos un error, lo que significa que esto fue sólo un problema de mi editor. Aquí puedo inspeccionar el esquema, lo que significa que está realmente disponible con TypeScript dentro. Aquí estamos justo en tu esquema. Y ahora dentro de corchetes redondos, podemos definir nuestro objeto, pero el esquema no es lo que usaremos dentro de la aplicación. Debe ser un modelo. Es por esto que aquí podemos escribir que luego exportar modelo predeterminado. Y este modelo también viene de Mangosta. Entonces pongamos aquí modelo de coma. Y aquí modelo es una función donde proporcionamos nuestra cadena. Será usuario con gran matiz. Y hay un segundo argumento. Aquí proporcionamos un esquema de usuario. Es así como definimos un modelo dentro de Mangoose. Por lo que aquí podemos exportar el modelo por defecto que proporcionamos aquí y nombre y nuestro esquema. Y aquí debemos definir nuestro esquema. Pero estamos en lo cierto en Mecanografiado. Y en realidad no es la mejor manera de crear nuevo esquema. ¿ Por qué es eso? Aquí destacamos nuestro esquema y se puede ver mucho n está aquí y esto es malo. ¿ Por qué es eso? Porque no definimos ningún tipo de nuestro esquema. Por eso es lo que queremos hacer. Queremos crear una definición del esquema para un usuario. Por lo que quiero saltar aquí a la izquierda y crear aquí interfaz de expertos. Por lo que es una nueva interfaz para documento de usuario. Aquí hay una enorme diferente, tenemos aquí una interfaz para el usuario. Esto es solo usuario con los campos y esto es usar un documento. Esto es lo que estamos usando solo para mangoose. Y aquí quiero escribir x tans. Y si no sabes con qué se extiende, simplemente toma todos los campos de nuestro usuario aquí. Por lo que quiero escribir aquí extiende Usuario coma documento. Y en realidad este documento debe ser cargado desde Mangoose. Entonces aquí en la parte superior, necesito escribir documento de entrada de mangosta. Y en realidad por ahora no necesitamos proporcionar nada dentro. Y podrías preguntar ahora, vale, pero no tiene ningún sentido Lo que hizo fue aquí afuera. Creamos un documento de usuario de interfaz. Aquí simplemente estamos extendidos de usuario y documento. Y sí, tiene sentido porque en primer lugar, tenemos nuestra interfaz de usuario. Podemos usarlo en todas partes. Esta es nuestra parte, pero también la estamos mezclando con el documento. Y el documento viene de Mangosta. Esta es la definición del documento y la parte importante rápida es, por ejemplo, este AD, porque cada documento dentro de mongodb tiene NAD. Y en este caso aquí, no necesitamos especificar que el usuario tiene AD, viene del documento de mangosta. Y ahora podemos saltar aquí a la derecha y a menudo usar esquema. Podemos proporcionar en tanques un documento de usuario que acabamos de crear. Y ahora puedo ahora ingresarlo aquí en la parte superior. Por lo que es desde la interfaz de usuario de nuestros tipos. En este caso aquí estamos diciendo que nuestro documento de usuario es lo que necesitamos proporcionar dentro de nuestro esquema de usuarios. Y exactamente lo mismo que podemos hacer con nuestro modelo aquí podemos proporcionar nuestro documento de usuario. Y si no sabes lo que significa esta parte, esto es en realidad un genérico, lo que en realidad significa aquí que estamos proporcionando tipo genérico. Puede ser lo que por defecto fuera cualquiera. Pero si ahora inspeccionamos nuestro esquema, se puede ver que ya no lo es. Aquí tenemos nuestro documento de usuario, y esto es sumamente importante para nosotros y para la validación de TypeScript. Porque en realidad aquí, ahora dentro de lo que quiero hacer, quiero tirar algo que no existe dentro de usuario. Por ejemplo, digamos que tenemos dentro del formulario de propiedad del usuario. Y aquí dentro queremos proporcionar el tipo es cadena. Y estoy guardando esto y luego entrar aquí y acotar ese argumento de tipo foo no es asignable a parámetro de tipo. Y aquí podemos ver nuestro e-mail nombre de usuario, contraseña creada añadir guión bajo ID, que viene del documento y aquí para subrayar versión. que en realidad significa que si no probamos este documento de usuario aquí con no obtenemos ninguna validación de TypeScript. Esto es sumamente importante que lo estemos consiguiendo. Ahora dentro de la máscara proporcionan todos los campos. Presidente d'etre para nuestro usuario. Y comencemos con el e-mail. Entonces aquí nuestro campo es correo electrónico y luego dijo, Debemos proporcionar el tipo, es una cadena. En segundo lugar, aquí podemos decir propiedad requerida y como se puede ver, TypeScript nos ayuda y muestra qué propiedades podemos proporcionar información Mangosta. Así que en realidad dentro requerido, pero puede proporcionar una matriz con algunos datos válidos y mensaje. Porque en realidad queremos mostrar en el front-end y bonito mensaje cuando nuestro e-mail no es válido. Entonces no es sólo una cuerda. Este correo electrónico no es válido. Y para ello podemos ingresar aquí en el validador superior. Entonces aquí quiero ingresar datos válidos para John validador. Y como pueden ver, estamos recibiendo un módulo de error. Validador no está instalado, por lo que debemos saltar dentro de nuestro servidor. Aquí estoy deteniendo servidor web y van a escribir aquí impedimentos tau datos válidos, pero esto no es tolerable. También quieren obtener tipos para este paquete. Esto es y aquí en tipos slash datos válidos, pero debe ser instalado encendido en modo de desarrollo. Entonces aquí, no lo olvides, menos t Ahora podemos abrir a la derecha, están empaquetados JSON y como puedes ver aquí en dependencias dev tengo tipos validador e independencias validadas. Ahora aquí no tenemos ningún error para los datos válidos, por lo que podemos especificarlo dentro requerido. Y en realidad aquí, me equivoco un poco. Este no es un campo obligatorio porque en su lugar se requiere con simplemente proporcionar si es requerido o no. En nuestro caso, se requiere correo electrónico. Aquí como segundo parámetro, podemos proporcionar un mensaje de error si está vacío. Y aquí podemos proporcionar correo electrónico es requerido. Y después de esto tenemos nuestra validación. Aquí es donde aquí tenemos una propiedad validar, y aquí es exactamente donde queremos utilizar nuestro validador. Entonces aquí puedo escribir validador punto y estamos consiguiendo un buen auto-completar por los tipos. Y aquí voy a escribir es correo electrónico. Entonces aquí tenemos muchas validaciones. Y donde consigo una validación por correo electrónico fuera de la caja. Y hay un segundo argumento que podemos proporcionar aquí, el correo no válido. Por último pero no menos importante, quiero crear índices. Y en realidad si no sabes qué son los índices, Estas son cosas que pueden hacer que tus solicitudes de base de datos sean más rápidas. Y en segundo lugar, puede hacer, por ejemplo, que el campo de correo electrónico sea único. En este caso, quiero escribir crear índices. Y aquí como objeto, estoy proporcionando insight, único, verdadero lo que hace, lee nuestro correo electrónico es índice único en este caso, pero no puede salvar a dos personas con el mismo correo electrónico. Por lo que una vez más, dentro del esquema de mangosta, estamos proporcionando todos los campos que necesitamos para nuestro usuario. Y el primer campo fue un correo electrónico aquí, pero debe proporcionar un tipo en su interior. Y esta es exactamente la línea onload que necesitamos por defecto. Pero en realidad podemos proporcionar aquí requerido que podemos establecer en verdadero o falso aquí podemos proporcionar algunos validadores y podemos crear índices. Y en realidad podemos hacer todas estas cosas igual que esto dentro del avión conductor MongoDB. Por eso prefiero usar Mangosta porque es en un reino donde estamos sacando todas estas cosas de la caja. Nuestro siguiente campo es nuestro nombre de usuario. Por lo que aquí podemos proporcionar nuestro nombre de usuario y será más fácil. En primer lugar, el tipo será de cadena, y en segundo lugar, requerido debe ser verdadero. Y aquí también quiero proporcionar el error de validación. Es por esto que usaremos la misma notación con el array. Aquí es true y se requiere nombre de usuario. Ahora podemos copiar y pegar este usuario porque será el mismo. Y la última, lo que tenemos aquí es nuestra contraseña y nuestra contraseña es tipo cadena, y también se requiere, pero aquí se requiere contraseña. Y lo último que queremos hacer es seleccionar false. Y en realidad lo que select false está haciendo, nunca seleccionará este campo cuando estemos haciendo alguna petición. Por ejemplo, queremos obtener un usuario por ID de la base de datos. No recuperaremos este campo. Y esto es sumamente importante porque hace que nuestra aplicación ahorre. No importa qué consultas estemos escribiendo. Siempre sabemos que no recuperaremos una contraseña, lo que significa que estamos por defecto del lado seguro. último pero no menos importante, lo que quieren proporcionar aquí son las marcas de tiempo. Así que podemos proporcionar aquí dentro de un objeto y podemos escribir aquí marcas de tiempo, y aquí lo estamos configurando a true. En este caso, nuestra propiedad CreateDat será generada directamente por mangosta. Pero como puedes ver aquí, hay un error tipográfico. No necesitamos proporcionar el tema aquí. Es un segundo argumento después de nuestro objeto, lo que en realidad significa en el nuevo esquema como una función que estamos proporcionando en primer lugar, este objeto con todos nuestros campos, y en segundo lugar, el objeto con timestamps true. Entonces este es el segundo documento de cómo nuevo esquema. Por lo que estamos listos con la primera parte de nuestro modelo. Pero tenemos un problema realmente enorme aquí si sólo intentaremos usar a nuestro usuario así. Por ejemplo, aquí podemos escribir nuevo usuario y se proporcionaron dentro de un objeto con e-mail nombre de usuario contraseña. Y después de esto llamaremos seguro, entonces nuestro usuario guardará directamente esta contraseña como cadena simple. Esto está prohibido, esto está mal y nunca debemos hacer esto. Es por ello que debemos solucionar este tema. Qué podemos hacer al respecto, debemos hash nuestra contraseña antes de almacenarla en la base de datos. Y para ello, podemos utilizar una biblioteca muy bonita, que se llama la cripta. Y esta es la solución más popular. Hash la contraseña. Aquí es donde debemos saltar dentro de la consola e instalar este paquete. Por lo que npm instalado sea crypt jazz y también queremos instalar typings. Entonces aquí en tipos slash ser crypt jazz, pero obviamente debe ser ancho menos t Así que vamos a comprobar el sonido. Estoy saltando al paquete JSON. Y aquí veo Tipos sean cristianos en dependencias dev y sean independencias de criptas. Esto es completamente correcto. Ahora lo que podemos hacer aquí, podemos definir el esquema de usuario punto oración. Y esta es la posibilidad de ejecutar alguna función antes de algo. Aquí estamos interesados en proporcionar seguro, lo que en realidad significa que ejecutaremos nuestra función directamente antes de seguro. Entonces aquí quiero escribir una función sinc y dirán Por qué estoy usando aquí función y no función de flecha en un segundo. Es realmente importante escribirlo así. Y aquí estamos consiguiendo Next. Y ahora aquí tenemos unos brackets y podemos hacer algo dentro. La idea principal es que podamos hacer lo que queramos aquí con nuestro objeto. Y después de esto, cuando cambiemos de tema, por ejemplo, debemos llamar a siguiente y luego mangosta procederá con el guardado de nuestros datos. Y las preventas significa que se llamará a esta función, primer lugar después de Crear y en segundo lugar después de la actualización. Y esto es exactamente lo que queremos. Por ejemplo, queremos no sólo crear una contraseña para el usuario, sino que también se actualice posteriormente en forma de actualización. Y la primera condición que quiero escribir aquí es así. Si no, este punto se modifica. Y como se puede ver, tenemos una función se modifica y podemos proporcionar insight palabra, contraseña, y luego queremos simplemente no hacer nada y volver a continuación. Entonces lo que estamos haciendo aquí, estamos comprobando si nuestro campo de contraseña fue modificado. No es el caso fue creado porque ahí vamos a tener una contraseña, pero es el caso con la actualización si sugerencias usuario y no cambiamos la contraseña, entonces no tiene ningún sentido aplicar esta función. Este es camino aquí donde pollo, ok, si campo de contraseña no se modifica, entonces simplemente decimos para Mangosta, adelante. Ahora como puedes ver aquí, escribimos una función sinc y no una función de error. Y es importante aquí porque queremos usar aquí esta propiedad. Y para tener una correcta esta referencia, debemos escribirla como una función y no una función de flecha porque otro caso, esto se ejecutará y también usamos aquí una función sinc porque la operación de cripta será una sincrónica. Entonces después de esto, quiero escribir try-catch. Y en realidad si vamos a conseguir algún error, será cripta, entonces estamos entrando dentro de jaula. Aquí, estamos recibiendo nuestro error y queremos devolver esta Sarah adentro a continuación. Aquí estamos tirando dentro de Azure como error. Y podrías preguntar, está bien, pero ¿por qué es este extraño error de notación como era? En realidad, si vas a intentar simplemente escribir así, obtendremos un error. Argumento de tipo desconocido no es asignable a parámetro de tipo error de devolución de llamada o indefinido, lo que en realidad significa dentro de una jaula, cada Azure es desconocido, lo cual es obvio porque esto es boceto y no sabemos lo que pasó. Es por esto que estamos escribiendo catch, pero en realidad no podemos usar arrow como esta y podemos proporcionarla dentro de lo siguiente, es por esto que debemos convertir un tipo de nuestra era en algo significativo. En este caso, estoy usando S flecha y podemos proporcionar errores dentro de la siguiente función. Esto es exactamente lo que estamos haciendo aquí. Ahora debemos probarlo nuestra lógica para hash la contraseña. Y para esto quiero en la parte superior para introducir nuestro gran módulo js arrancado. Entonces estoy informando be crypt jazz de Big Rip jazz. Y ahora dentro de nuestro intento, primero podemos conseguir una sal. Y si no sabes Para ser cripta donde generamos y primero sal y luego proporcionamos en función de descifrar para hash la contraseña. Esto es camino aquí, necesitamos conseguir una sal. Y para ello estamos Colin ser engarzado js dot gen salt. Como se puede ver, esta es una función que son sincrónicamente genera sal rápida. Y aquí podemos proporcionar diez, por ejemplo. Y esta es una función asíncrona. Aquí es donde aquí debemos tratar de esperar, por lo que se va a conseguir sal rápida. Y ahora aquí debemos actualizar nuestra contraseña. Y en realidad esta función se llama antes de guardar este registro, lo que en realidad significa con esto, tenemos una referencia a todos los campos que estamos tratando de guardar. Y aquí escribiré esta contraseña de punto para cambiar nuestro campo que estamos tratando de guardar. Aquí queremos asignar un peso B creep chess dot hash y en realidad hash, como puedes ver aquí, tendremos nuestra contraseña y dentro primero debemos proporcionar nuestra contraseña, esta contraseña. Y en segundo lugar sal, en este caso, nuestra contraseña será hash y simplemente almacenaremos un hash dentro de nuestra base de datos. En este caso, después llamaremos a continuación y debemos hacerlo a ciencia cierta, esta contraseña se actualizará y guardaremos el registro limpio. Es por esto que en su interior queremos escribir return next y simplemente lo llamamos, esto activará el guardado para un registro a base de datos. Y la parte más importante que redibuja esta lógica dentro del modal vendió esta lógica con el ahorro está completamente aislada dentro del modelo. Y cuando escribiremos algún código que esté relacionado con el usuario, ni siquiera sabremos de esta lógica. Todo está dentro del modelo. No tiene nada que ver con encontrar un usuario o guardar al usuario. Es lo que está sucediendo dentro del modelo. Lo último que necesitamos para el futuro es la función validar contraseña. ¿ Por qué lo necesitamos? Porque en realidad cuando intentaremos iniciar sesión al usuario, queremos comparar no sólo el correo electrónico, sino también la contraseña proporcionada. Y tenemos una cosa muy bonita que se llama métodos dentro de Mangosta. Entonces aquí podemos escribir métodos de esquema de usuario, y aquí queremos crear un nuevo método, por ejemplo, validar contraseña. Y en realidad está funcionando exactamente de la misma manera, como por ejemplo, métodos dentro de clases. Por lo que podemos llamar a nuestra instancia de nuestro usuario. Este método valida contraseña. Y aquí debemos proporcionar la función. Y de nuevo, no estoy escribiendo aquí la función de flecha sino solo una función aquí perspicacia al obtener contraseña como parámetro. Porque en realidad cuando queremos comparar una contraseña, proporcionaremos algo que queremos comparar. Esta es y aquí contraseña es una cadena, y aquí dentro queremos comparar la contraseña proporcionada con nuestra contraseña dentro de nuestra instancia. Por lo que aquí podemos simplemente volver ser grip js dot compare. Y esta es una función para comparar, en primer lugar, una contraseña de avión que se proporciona desde fuera. Y en segundo lugar, nuestra cadena, y esta es esta contraseña de punto que estamos almacenando como un hash dentro de nuestro registro. Entonces nuestro último uso se verá así, donde justo aquí, por ejemplo, que tenemos un usuario y queremos guardarlo. Entonces aquí tenemos un nuevo usuario. Debemos proporcionar dentro de nuestro correo electrónico. Entonces debemos proporcionar aquí un nombre de usuario, y luego proporcionaremos aquí una contraseña. Después de esto, trataremos de salvar a un usuario. Por lo que aquí vamos a llamar uso. Sí ahorra. Y en realidad después de Colin esta delgada, se llamará a nuestra prensa Guardar y almacenaremos la contraseña correcta. Pero después de esta línea, también podemos escribir un usuario punto validar contraseña. Y aquí podemos proporcionar cualquier contraseña que queramos comparar. Esta función devolverá para nosotros verdadero o falso dependiendo de la exactitud de la contraseña. Y esto es totalmente correcto hacer todo esto dentro del modelo de usuario y no dentro de algunos controladores donde simplemente trabajamos con los usuarios. Porque en este caso nuestra lógica está completamente aislada dentro del usuario. Y ahora nos falta una sola línea aquí dentro de nuestra interfaz de usuario de tipos con documento de usuario definido. Pero en realidad debemos especificar dentro este documento de usuario que escribimos aquí un nuevo método, validar contraseña. Es por esto que lo que quiero hacer aquí, quiero crear un nuevo método dentro validar contraseña. Y sabemos que por dentro estamos recibiendo algún parámetro, podemos simplemente nombrarlo param1, y esto es una cadena, y sabemos que de vuelta estamos recibiendo una cadena. En este caso, utilizaré un documento completamente escrito correctamente y podemos usarlo más adelante dentro de TypeScript para llamar a este método validar contraseña y obtener autocompletar. 10. Agregar registro: En video anterior, creamos con éxito nuestro modelo de usuario. Y pueden entender que video anterior estaba realmente seco porque acabamos crear un modelo y no veías cómo usamos este modelo en una aplicación real. Es por ello que el objetivo de este video es crear nuestro método de registro, lo que significa que registraremos usuario, y así es exactamente como usaremos nuestro modelo de usuario. Entonces echemos un vistazo en nuestro código. Por ahora sólo tenemos un modelo dentro de los modelos fuente. Y lo que queremos construir es arquitectura MVC. ¿ Qué tiene un medio realmente en el interior expresado como marco. No tenemos ninguna arquitectura en expresado con simplemente definidas algunas rutas inician servidor web y estamos bien para ir. No tenemos muchas reglas que se definan dentro expresadas. Por eso debemos hacer algo por nuestra cuenta. Y la arquitectura muy popular que usa muy bien nuestro proyecto de back-end es MVC, que en realidad significa vista del modelo y controlador. Y en realidad el 90 por ciento de los casos, sólo usaremos modelos y controladores. No usaremos ninguna vista solo porque estamos trabajando y creando un EPI y no necesitamos renderizar vistas allí. Nosotros sólo respondemos con el chasten y esto es todo. Es por esto que mi idea es crear una nueva carpeta la cual se llama controladores. La idea principal es que aquí en su lugar hermandad S registre todas nuestras rutas. Por ejemplo, aquí tenemos una ruta para la página principal. La idea principal es que no estamos escribiendo la lógica de esta ruta aquí directamente como una devolución de llamada, escribiremos en un controlador específico del sitio, lo que en realidad significa que todas nuestras peticiones queremos dividir en diferentes controladores. Por ejemplo, tenemos un controlador de usuario y hubo disturbios en todas nuestras acciones con respecto al registro, inicio de sesión, obtención de inicio de sesión de usuario, etc. Entonces tenemos un controlador de placa donde escribiremos dentro de todo lo que esté relacionado con la placa. La parte más importante es que dentro del modelo definiría cómo estamos trabajando con la base de datos. Por lo que creamos nuestra entidad como usuario, pero dentro de la forma del controlador utilizando esta entidad. Y estamos construyendo algunas respuestas de nuestra API, lo que en realidad significa que estamos separando nuestra lógica. Todo era base de datos va a modelos, pero estamos usando modelos en tales controladores. Entonces esta era la teoría. Ahora vamos a crear nuestro primer controlador. Y para ello quiero inscribirme aquí en su ruta, y será una ruta para el registro. Es por esto que aquí tenemos post app y la URL será slushy pie slash usuarios. Aquí estará nuestro registro de puntos controlador de usuarios. Así que nuestra primera regla aquí es que todas nuestras URL, vamos a empezar con slash api, porque en realidad es muy agradable tener un espacio de nombres para nuestra API. En segundo lugar, como se puede ver donde no es importante, algo así como registrarse donde entra aquí todo el usuario está controlando y necesitamos tener algún buen naming. El nombre típico y para los controladores es siempre con activo que por ejemplo, un controlador de usuario y no controlador de usuario. Ahora vamos a importar estrella ya que los usuarios lo controlan. Y si no sabes lo que está haciendo esto, la idea principal es que por dentro tendremos un montón de funciones. Y esta vez como grupos, todas estas funciones dentro de este objeto. Y entonces podemos escribir algo así como usuarios controlador dot register. Entonces aquí queremos importarlo desde, y aquí tenemos nuestros controladores slash, y aquí vamos a crear usuarios de archivos. Y como se puede ver, no tiene ningún sentido nombrar a este archivo usuarios controladores, porque este archivo está situado directamente dentro de los controladores. Este es camino aquí, Vamos a saltar para que controladores. Y aquí está users.js. Y este es nuestro archivo que es un controlador. Y luego decir que estuvo bien, todas las acciones que están relacionadas con la entidad usuaria. Ahora a la derecha, quiero abrir nuestro servidor Ts. Y Como puedes ver, en realidad esta parte que puedes ver aquí es lo que estamos escribiendo dentro del controlador. Entonces esta es nuestra devolución de llamada. Y como se puede ver, esto es sólo una función simple con la respuesta de la solicitud. Y el tercer parámetro aquí puede ser el siguiente. Es por esto que lo que quiero hacer aquí, quiero crear una función que se llama registro. Y esta es una función asíncrona. Por qué necesitamos aquí en una función síncrona, porque trabajaremos con base de datos y esas solicitudes para nuestra base de datos o como síncronas. Y aquí estamos consiguiendo como argumento es ante todo petición, segundo lugar respuesta, y la última es la siguiente. Y esto es sólo una función. Entonces esto es exactamente lo mismo lo que estamos pegando aquí directamente, pero simplemente lo movimos afuera, dentro de nuestro controlador. Pero este código es malo. ¿ Por qué es eso? Porque en realidad aquí no escribimos nuestra respuesta de solicitud. Y a continuación, así que aquí puedo escribir colon, y aquí tenemos nuestra petición. Y esta es la parte más importante. Aquí tenemos solicitud que viene de Fetch API. No lo necesitamos, pero necesitamos es petición que viene de expresado. Esto es y aquí, solicitud de importación de express. Y como pueden ver ahora tenemos una definición completamente diferente. Tenemos aquí dentro vestido, cuerpo, solicitud cuerpo. Y esto es exactamente lo que necesitamos. Además, necesitamos aquí no sólo solicitud sino respuesta, y estoy en Gran Bretaña aquí también respuesta. Escriba aquí respuesta como respuesta. Y la última no es la siguiente, sino la siguiente función. Aquí, nuestra dos entrada es correcta. Es de expresado. Entonces así es como típicamente crearemos una nueva acción del controlador. No importa si es controlador de usuario o es algún controlador de artículo, siempre será el mismo. Ahora, directamente dentro quieren escribir try-catch. ¿Por qué es eso? Porque en realidad vamos a escribir un código síncrono con espera asincrónica dentro de esta función. Y queremos manejar todos los errores. Y la forma más fácil se expresó manejar un error es usando next, y ya lo usamos previamente dentro de nuestro modelo. Aquí está funcionando exactamente igual. Para que podamos escribir aquí, tratar y tenemos jaula y estamos recibiendo algún error. Lo que queremos hacer, el de llamar aquí a continuación y tirar dentro del error. Esto es en realidad, esta es una sola línea que propagará nuestro error para expresar, y luego express mostrará la Sarah en la pantalla. Ahora dentro queremos crear un usuario porque en realidad este es el registro y el registro significa simplemente crear un usuario. Es por esto que aquí quiero importar el modelo de usuario desde. Y aquí tenemos nuestros modelos slash user model que creamos previamente. Y como pueden ver aquí, no lo nombré usuario con U mayúscula, sino que usé el modelo. Esto es sólo para ser claro como el cristal dentro de nuestro código que estamos trabajando con el modelo. Y ahora podemos usar este modelo en su interior. Por lo que podemos escribir aquí const, y aquí está nuevo usuario, pues aquí queremos dar de alta a un nuevo usuario y estamos justo aquí en hue modelo de usuario. Y ahora dentro debemos pasar algunos datos. En nuestro caso, debemos pasar aquí en masculino que nombre de usuario y contraseña. Entonces aquí queremos escribir eso. Queremos establecer un correo electrónico, y esto es solicitud dot body dot email. Entonces queremos establecer aquí nombre de usuario, y esto es solicitud punto, punto nombre de usuario. Y el último es password, y es request dot body dot password. Pero aquí tenemos un problema enorme. Por defecto, express no puede funcionar con ebullición y por defecto express no le pasará un tau. Es por esto que lo que debemos hacer, debemos instalar paquete adicional para esto. Y este paquete se llama BodyParser. Es por esto que saltaré dentro la consola y estar al tanto aquí estoy dentro del servidor. Escribiré npm install. Y aquí queremos instalar BodyParser. Estoy golpeando Enter y el paquete está instalado. Ahora podemos volver a arrancar nuestro servidor y saltar de nuevo. Entonces la idea principal es que aquí en cambio hermandad S, importaré mi analizador corporal. Entonces aquí vamos a llamarlo BodyParser con CamelCase y lo estamos importando del paquete BodyParser. Ahora en algún lugar aquí antes de que estemos haciendo nuestras rutas, podemos escribir ab use y por dentro queremos probarlo BodyParser dot json. Y en realidad aquí puedes comprobar directamente lo que está haciendo BodyParser Jason y devuelve un middleware, el tono lip analiza JSON y esto es exactamente lo que queremos. Queremos pasar nuestro JSON, pero no es solo esto, sino que también queremos un analizador corporal IPOs más. Y aquí estará codificado con URL de puntos. Y por dentro estamos proporcionando extendido a través de lo que estas dos líneas están haciendo. primera línea solo buscará tipo de contenido de la aplicación json y luego los padres de un cuerpo en el JSON. Para que podamos trabajar con nuestro cuerpo como objeto y esto es sumamente fácil. La siguiente línea haremos exactamente lo mismo pero para cadenas codificadas con URL. Y entonces también conseguiremos nuestro cuerpo. Entonces con esta configuración en cada proyecto, puedes trabajar normalmente con la API donde tienes cuerpo como adyacente. Y esto es exactamente lo que estamos haciendo aquí. Estamos leyendo cuerpo de petición. Ahora quiero consola log aquí nuestro nuevo usuario para que podamos comprobar cómo se ve. Y después de esto, quiero intentar salvar al usuario. Por lo que aquí podemos probarlo guardado usuario, y aquí podemos llamar a un peso en su usuario dot save. Esta sola línea creará Francia nuevo usuario dentro de la base de datos. Es por esto que aquí quiero consola de registro usuario guardado, coma, usuario guardado. Ahora quiero usar dicha herramienta que se llama Cartero para hacer solicitud. Y si no tienes cartero en tu máquina, simplemente puedes saltar a Postman. No lo cargues aquí. Es completamente gratis. Tiene niveles pagados, pero no los necesitamos para nuestro curso. Aquí, parece. Y en realidad lo que queremos hacer, queremos hacer una solicitud de publicación a nuestra URL. Y aquí tenemos nuestro host local para 1001 usuarios de slash slash. Ahora aquí debemos saltar al cuerpo y seleccionar aquí mal. Y a la derecha podemos decir que esto es adyacente. Ahora lo que queremos pasar dentro es un objeto con tres campos. En primer lugar, tenemos aquí correo electrónico, por ejemplo, foo en gmail.com. Entonces tenemos nuestro campo de nombre de usuario, por ejemplo foo, y tenemos nuestro campo de contraseña, por ejemplo, 123. Ahora enviemos una solicitud y comprobemos si está funcionando. Como puedes ver, la solicitud se cuelga. Y esto es completamente normal porque en realidad aquí pero no llamó descanso Jason por ejemplo. Por eso es arma de mano. Pero ahora podemos saltar dentro la consola y esta es nuestra salida. En primer lugar, aquí podemos ver a nuestro nuevo usuario. Esto es antes de ahorrar. Entonces esto es lo que tenemos después de Colin, nuevo modelo de usuario, lo que en realidad significa que estamos lanzando dentro estos tres campos y estamos obteniendo usuario de un ganso. Y como pueden ver, la principal diferencia de nuestro objeto es que tenemos aquí NAD, que es un MongoDB AD, y se generó automáticamente rápido. Y en realidad después de esto, podemos usar este nuevo usuario y guardarlo, por ejemplo, a base de datos con el método dot save, que es extremadamente fácil. Y la parte más importante es aquí usuario guardado. Este es nuestro usuario guardado, que proviene de la base de datos. Cómo podemos decir que ya está guardado. En primer lugar, aquí vemos nuestra contraseña y en realidad nuestra contraseña aquí. Dimos como 123, pero aquí no lo guardamos como 123. Se trata de una contraseña hash. ¿ Por qué está sucediendo? Porqueen realidad definimos el modelo y aquí tenemos un método presiona Guardar. Y sólo para recordarles, aquí generamos un hash a partir de nuestra contraseña y guardamos este hash con la cripta en lugar de contraseña. Y este es un patrón sumamente importante. No queremos escribir aquí ninguna lógica con respecto a cambiar la contraseña al hash. No tiene ningún sentido porque queremos definir modelo con alguna lógica. Y entonces sucede mágicamente porque está definido. En este caso aquí guardamos, acabamos de cambiar nuestra contraseña y hash y dentro de nuestro controlador con no sabemos nada al respecto. Los mismos objetivos sobre estos campos creados en y actualizados en. Estos dos campos se añadieron para nosotros porque aquí definimos marcas de tiempo true. Por lo que nuestro usuario se guardó con éxito en MongoDB. Pero en realidad no podemos simplemente arrojar al usuario guardado como respuesta. Es que antes que nada, no necesitamos todos los campos y seguro, nunca debemos dar esta contraseña afuera. Y en realidad sólo para recordarle aquí, dentro de nuestros modelos usuario, dijimos que la contraseña no está seleccionada, se selecciona falsa. Pero en realidad después de que guardamos usuario aquí, esta contraseña se devuelve rápidamente. Y en realidad si estamos haciendo algún bien, no obtendremos el campo de contraseña. Pero después de guardar el usuario obviamente lo está consiguiendo. Es por ello que debemos crear una respuesta agradable que se ajuste a nuestras necesidades. Es por esto que aquí quiero crear una función adicional, normalizar usuario. Y aquí estamos consiguiendo usuario y sabemos que este es documento de usuario. Y como puede ver nuestro documento de usuario, podemos ingresar desde tipos de interfaz de usuario. Sólo para recordarte, usar un documento es justo como un objeto de usuario con ID y validar el método de contraseña. Y como se puede ver aquí, podemos inspeccionar nuevo usuario y podemos ver que esto es usar un documento y la propiedad, esto es exactamente lo que estamos pasando aquí y aquí dentro de esta función, queremos devolver el normalizado para el usuario API. Entonces, antes que nada, aquí tendremos un e-mail, este es user dot email. Entonces queremos nuestro nombre de usuario. Se usará nombre de usuario, y el último es 80, es ID de punto de usuario. Y sólo para recordarte, en MongoDB o damas se almacenan con ID de subrayado. Pero en realidad aquí dentro de Mangosta, podemos usarlos en ambos sentidos, como subrayado ID y como punto AD. Este método ya existe y es simplemente como referencias subrayado id Así que voy a normalizar el uso de una función está completamente listo y ahora podemos llamar aquí comer cuando respondamos con este usuario guardado. Entonces simplemente puedo escribir aquí como arena y por dentro estamos pasando usuario normalizado y aquí está nuestro usuario guardado. Vamos a comprobar si está funcionando. No tenemos ningún error aquí en servidor web. Abriré aquí Cartero y le pegaré de nuevo a Enviar. Y como se puede ver con éxito en normalizado nuestro usuario y no llegamos aquí, por ejemplo, contraseña de vuelta, lo cual es sumamente importante. Pero aquí hay algo que no me gusta de nuestras respuestas. En realidad, hicimos alguna validación dentro de un modelo. Pero si elimino aquí nombre de usuario y golpeo Enviar, estamos llegando aquí 500. Y esta es en realidad página HTML con alguna validación aquí. Esto no es lo que queremos, lo que podemos hacer aquí, podemos usar el boceto y leer mensajes de nuestra época. Pero el principal problema es que nuestro error no siempre es error de validación. Pueden ser, por ejemplo, 500, pero también podemos obtener errores de validación. Y la forma más correcta de comprobarlo dentro de TypeScript es así, donde justo aquí que están Azure es instancia de error de validación de Azure DOD. Pero aquí es importante introducir error correctamente porque queremos importar este error de Mangosta. Entonces aquí estoy ingresando nuestra era desde Mangosta. En este caso, se tratará correctamente porque en realidad aquí, era que el error de validación es una clase de mangosta. Y si conseguimos algún error de validación de Mangosta, podemos trabajar con ellos aquí. Ahora probémoslo dentro log de la consola y comprobemos lo que estamos consiguiendo aquí. Volveré a golpear Enviar. Y como se puede ver dentro de la consola, estamos recibiendo aquí errores. Y esto es un objeto. que en realidad significa que podemos leer mensajes del sujeto y mostrarlos en la pantalla. Aquí quiero crear un mensaje de propiedad. Y aquí podemos escribir valores de punto objeto, que leerán valores de nuestro objeto. Y por dentro estamos tirando errores de error. Esto es exactamente lo que estamos obteniendo de mangosta y queremos pasar por cada campo. Y aquí estamos recibiendo error y solo necesitamos mensaje de error. Por lo que esta será una matriz de cadenas. Ahora podemos simplemente escribir el estado de riesgo de retorno, por ejemplo, cuatro a dos, lo que significa entidad no procesable. Y aquí punto mensajes JSON, lo que en realidad significa aquí cuando estamos recibiendo cualquier mensaje de validación estaban respondiendo con este estado y estamos mostrando estos mensajes de error, no tenemos cualquier error en la consola. Entonces intentémoslo de nuevo. Estoy golpeando aquí arena y estamos recibiendo unos lindos mensajes de error. Se requiere nombre de usuario por que esto suceda porque aquí revisamos dentro de la jaula, por ejemplo, de la clase, normalizamos nuestros mensajes aquí y respondimos con ellos. Y en realidad tiene mucho sentido mover esta función más tarde a algún ayudante porque vamos a hacer exactamente las mismas cosas una y otra vez, donde tenemos uno va validación. Y aquí está el último paso que queremos dar. En realidad necesitamos que nuestro cliente proporcione un token, lo que en realidad significa que cuando nuestro usuario es logger tin, generamos un token único para hacer una autenticación DVT. ¿ Qué significa? Tenemosun token de cadena especial que estaban lanzando sobre el cliente. Y entonces el cliente puede adjuntar esto para ser t al encabezado. Y posteriormente comprobaremos si la solicitud está autenticada y se permite que el difusor haga algunos cambios. Pero en este video, simplemente necesitamos tirar dentro de nuestra respuesta, el token GBT que generaremos. Y para ello debemos instalar paquete adicional. Aquí escribiré npm install JSON web token. Y no es sólo que también querrá conseguir mecanografiando. Así que aquí estará en tipos slash JSON web token. Entonces instalamos dos paquetes y luego reiniciamos mi servidor web. Ahora volvamos a saltar. Aquí queremos importar ahora nuestro JSON Web Token, o simplemente DVT. Así que probémoslo aquí en productividad desde el token web JSON. Y ahora lo que queremos hacer aquí dentro normalizamos, y este es el mejor lugar para hacerlo, porque aquí tenemos a todo el usuario y estamos construyendo algo que no está relacionado con la base de datos. Por lo que queremos generar aquí nuestro objetivo. Y para esto solo somos Colin, puntos GBT firman el interior. Debemos proporcionar una carga útil y alguna clave secreta. Entonces, ¿qué mostramos aquí la carga útil insight? En primer lugar, queremos obtener un AD y este es el ID de punto de usuario y luego un correo electrónico. Es user.email. En realidad es suficiente para nosotros proporcionar sólo un ID para que podamos encontrar más adelante usarlo por ID. Pero el correo electrónico también es bueno tener para alguna validación y comprensión con Susan y lo que es secreto aquí. Es solo una cadena aleatoria que nos ayudará a decodificar y luego llamar a tokens. Entonces lo que queremos hacer en realidad queremos aquí dentro de esos servicios para crear un nuevo archivo. Por ejemplo, config dot ds. Aquí almacenaremos todas las propiedades necesarias como por ejemplo, secret. Entonces aquí solo quiero exportar, const, nuestra propiedad secreta y lo nombrarán secreta, obviamente por razones de producción se quiere tener aquí algo más seguro. A lo mejor algún hash largo como 12 símbolos lo son. Entonces ahora podemos usar el secreto aquí con solo invertir nuestro secreto para John. Y aquí tenemos nuestro archivo de configuración. Ahora, en lugar de esta clave secreta o privada, sólo escribiré un secreto. Entonces lo que hace esta línea, genera un token que es solo una cadena. Y ahora tenemos que sumar aquí a nuestra respuesta, ese token. Vamos a comprobar si está funcionando, pero no tengas ningún error. Saltemos adentro. Cartero, pegó a Enviar. Como pueden ver aquí, debo proporcionar mi nombre de usuario. Entonces por ejemplo, para, echemos un vistazo a esto. Aquí sacamos todos nuestros campos y también hablando. Y como puedes ver, nuestro token es solo una cadena única que adjuntaremos a todas tus solicitudes en el cliente y decodificaremos de nuevo en el backend, cual haremos en nuestros próximos videos. Por lo que implementamos exitosamente nuestro método de registro también con validación y con normalización para nuestra API. 11. Implementación de login: En videos anteriores, pero totalmente implementado nuestro método de registro en este video, queremos implementar el inicio de nuestro usuario, pero en realidad quiero que intentes y lo hagas tú mismo porque será super similar al registro y ya estamos preparados todo. Entonces, ¿qué necesitas para hacer un dedo del pie? En primer lugar, insights server.js, se desea crear una nueva ruta. Y en realidad aquí ya tenemos nuestra ruta para el registro. Ahora debemos crear uno para iniciar sesión. Por ejemplo, podemos crear una cadena slash api slash users slash login. Ahora aquí en tal controlable debe crear nuevo método de inicio de sesión. La pregunta es obviamente qué vamos a llegar allí y qué debe hacer este método. Y en realidad inserte Cartero, sólo podemos intentar usarlo. Por lo que aquí tendrás slash login y en lugar de e-mail, nombre de usuario, contraseña, simplemente tiramos a nuestra solicitud correo electrónico y contraseña. No tenemos nombre de usuario porque esto es login y email es único. Y aquí tienes dos posibles varianzas, cómo puedes implementarla. La primera variante es más fácil. Simplemente quieres leer un correo electrónico del cuerpo. Desea intentar encontrar al usuario dentro de la base de datos y devolver a este usuario de vuelta. Y en realidad no olvides usar usuario normalizado porque necesitamos esa charla. Y además, si quieres un enfoque más difícil, entonces también puedes intentar validar no solo el correo electrónico sino también la contraseña para este método de validación dentro de nuestro modelo. Pero aunque intentes dar el primer paso por tu cuenta, esto está totalmente bien. Si quieres implementar uno de ellos, solo pausa el video ahora, y ahora, hagámoslo juntos. Por lo que nuestro primer paso será saltar dentro o hermandades. Aquí queremos crear una nueva ruta. Por lo que tenemos aquí un post porque este es un post request siguiendo guineano. Y aquí tenemos el CPI slash users slash login. Y aquí está nuestro controlador de usuarios dot login method, que crearemos en un segundo. Ahora saltaré en save controllers user y no copiarán pegar nada porque queremos probar y escribirlo desde cero. Entonces aquí tenemos nuestro método de inicio de sesión y sabemos que este es un método asíncrono donde obtenemos nuestra solicitud, que es solicitud exactamente igual en la parte superior dentro del registro. En segundo lugar, tenemos aquí nuestra respuesta, que es tipo respuesta. El último es el siguiente, esta es la siguiente función. Y ahora aquí dentro de nuestra función, queremos escribir, tratar de atrapar. Entonces dentro de jaula aquí conseguiremos nuestra era y solo quieren propagarla a la próxima era. ¿Por qué es eso? Porque en realidad aquí no tendremos ninguna regla de validación, pero solo revisaremos, oh, validación dentro de nuestro try y no dentro de catch. ¿ Qué tenemos que hacer adentro? Aquí estamos recibiendo nuestro cuerpo de solicitud con correo electrónico y contraseña en su interior. Y nuestro primer paso es intentar meter a este usuario dentro de la base de datos. Aquí podemos escribir una K. Necesitamos a nuestro usuario y volver a intentarlo con un peso usuario modelo punto encontrar uno. Y como puedes ver aquí tenemos hallazgo por ID, encuentra y encuentra uno. Así que en realidad usando model.fit find intenta encontrar todos los documentos como una matriz por algún predicado. Por ejemplo, aquí podemos encontrar una lista por es campo activo. Aquí, encuentra uno. Haremos lo mismo pero bien, sólo un solo disco. Esto es lo que queremos usar y a veces necesitaremos encontrar un elemento por ID. Aquí tenemos un bonito multado por el método. Y como puedes ver aquí, también tenemos muchos otros métodos, como por ejemplo, encontrar uno y eliminar y actualizar y así sucesivamente. Pero por ahora usaremos encontrar uno y luego dijo Debemos dar un predicado como objeto. Y aquí tenemos nuestro correo electrónico y este es el cuerpo de solicitud e-mail. Por lo que en realidad este único trazador de líneas intentará encontrar nuestro registro dentro de la colección del usuario por este correo electrónico. Aquí como se puede ver de dónde conseguir documento de usuario. Pero en realidad esto no es cierto porque podemos llegar aquí ahora y no un documento porque tal vez la hembra no existe. Esto es camino aquí. Quiero comprobar si no conseguimos un usuario, entonces queremos arrojar un error. Y para ello simplemente podemos devolver nuestro estado de punto de respuesta. Aquí tenemos foto a status al igual que antes. Y aquí queremos tirar algo de JSON de vuelta. Y en realidad aquí con no tienen unas validaciones distintas. En cualquier caso, simplemente arrojamos login o password inválidos. Esto es camino aquí en la parte superior. Puedo crear y guardar al objeto nuestros errores. Entonces aquí quiero crear errores. Se trata de un objeto con campo, correo electrónico o contraseña, por ejemplo. Y aquí el valor es correo electrónico o contraseña incorrecta. Entonces el punto principal es que tenemos exactamente la misma estructura de nuestros errores, igual que tenemos en todos los demás lugares. Aquí, solo estamos devolviendo nuestros errores dentro de JSON. Si no tenemos usuario. Después de esto, podemos responder con nuestros usuarios. Entonces aquí está arena y aquí podemos llamar a nuestro usuario normalizado y se proporcionó insertar usuario que encontramos. Y en realidad, si escribiste este código aun sin este error, revisa tu dorado, porque trataste de hacer algo por ti mismo. Ahora vamos a comprobar si este código está funcionando. Por lo que no tenemos ningún error aquí dentro del servidor web. Abramos nuestro cartero y le pegamos a Enviar. Y como se puede ver aquí, en realidad ya está funcionando. Aquí está nuestro slash api slash users slash login. Esto es post request con nuestros dos campos. Aquí estamos consiguiendo banco al usuario correcto con el Tonkin. Y en realidad si aquí, nuestro correo electrónico no existe, oculto enviar y estamos recibiendo un objeto con correo electrónico y contraseña, correo electrónico incorrecto o contraseña, lo que en realidad significa que con éxito implementó nuestro pulmón keniano del usuario. Pero aquí nos falta solo una pequeña cosa, y esto está validado de la contraseña, pero esto es sumamente fácil de usar Solo porque ya preparamos todo dentro de nuestro modelo. Y solo para recordarte dentro nuestro modelo de usuario aquí en la parte inferior, tenemos este método de validación de contraseña y estamos usando aquí be crypt compare, donde estamos comparando la contraseña de el usuario con alguna cadena. Esto es exactamente lo que queremos hacer aquí. Sólo podemos crear una variable es la misma contraseña. Aquí queremos llamar al usuario dot validar contraseña. Y como pueden ver, tenemos aquí nuestro autocompletado del Mecanografiado. Y en realidad estamos recibiendo este autocompletar solo porque dentro de nuestro documento de interfaz de usuario, escribimos esta línea. Si no escribiste esta línea aquí, entonces no obtendrás estos autocompletados. Por lo que aquí tenemos nuestra contraseña de validación y en su interior queremos proporcionar una cadena para comprobar si es correcta. Y esta es la contraseña del cuerpo de solicitud. Y en realidad si estas contraseñas son iguales, entonces llegaremos aquí booleanas. Pero como pueden ver, estamos recibiendo una cuerda, lo que significa que algo anda mal. Revisemos nuestra interfaz. Validar contraseña devuelve una cadena, está mal, debería ser booleano aquí. Ahora es misma contraseña devuelve falso booleano. Y aquí podemos escribir alguna condición. Por ejemplo, si nada es la misma contraseña, entonces queremos lanzar exactamente el mismo error. Por lo que voy a copiar pegar aquí. Desde el estado de los dos errores JSON, Echemos un vistazo a esto. Yo estoy sentado aquí arena y estamos consiguiendo este agradable usuario. Pero, ¿qué pasará si tiramos aquí contraseña incorrecta? Yo estoy golpeando aquí mandan y estamos recibiendo un error. Entonces echemos un vistazo dentro de la consola. Aquí estamos recibiendo un mensaje bastante extraño, argumento ilegal, cadena indefinida it. Y como puede ver aquí en nuestro seguimiento de pila, viene de nuestro controlador y escuchar de nuestra línea de origen Model Ts por defecto. Entonces saltemos dentro de nuestro modelo Ts línea 44. Como pueden ver, esta es nuestra gran cripta comparar. La pregunta es, ¿cuál es el problema? Es por esto que lo que podemos escribir aquí es validar contraseña. Y aquí tenemos ante todo, nuestra contraseña y esta contraseña. Y en realidad solo quiero ver aquí esto, saber que estamos del lado seguro. Nuestro servidor se reinicia. Entonces comprobemos el sonido. Estoy golpeando mandan mirada interminable dentro de la consola. Y como pueden ver aquí, cuanto más fino vemos, primer lugar, validar contraseña. Esta es una cuerda y aquí está nuestro objeto. Pero como se puede ver en este asunto, con no tener contraseña, es por esto que no podemos comparar objeto con la contraseña porque no tenemos una contraseña. ¿ Por qué no lo tenemos? Porque en realidad aquí en la parte superior, dijimos para la contraseña, seleccionar false, lo cual es completamente correcto. En el 99 por ciento de los casos, no queremos seleccionar una contraseña porque esto es seguro. Pero en realidad en este caso específico, en este método de inicio de sesión, no podemos trabajar sin contraseña porque necesitamos comparar nuestra contraseña del usuario. Por eso lo que podemos hacer, debemos asumir este encontrar uno. Por lo que también obtiene una contraseña. Y para ello podemos escribir dot select. Aquí hay una cadena dentro que estamos escribiendo más contraseña. Y en realidad esta es una notación realmente agradable porque podemos usar aquí más contraseña, menos biografía y así sucesivamente. Si queremos eliminar o agregar campos específicos, en este caso, solo para esta solicitud específica, estamos obteniendo no solo todo el usuario, sino también el campo de contraseña. Y ahora si lo intentaremos de nuevo, estoy golpeando arena. Podemos revisar y dicha consola. Y ahora estamos recibiendo nuestro usuario con contraseña, que es hash, y luego no tenemos ningún error, pero no está funcionando correctamente porque aquí tengo una contraseña incorrecta y todavía estamos recibiendo usuario, por qué está sucediendo. Y en realidad, si aquí vamos a mirar en nuestro método de validación de contraseña que estamos usando aquí big crypt compare. La pregunta es qué estamos volviendo aquí dentro, podemos ver en los Taipings se estaban consiguiendo promesa booleana. Y esto es sumamente importante. Se trata de una operación asíncrona. No es sincrónico. Este es camino aquí debemos saltar de nuevo dentro de nuestra interfaz de usuario de tipos. Y aquí podemos decir que estamos consiguiendo el booleano. En realidad es Rami del booleano. Y ahora es completamente correcto porque ahora si vamos a saltar dentro de nuestro controlador aquí hemos utilizado la contraseña de validación. Vemos que estamos recuperando promesa Boolean Now is same password is promise Boolean, que no es lo que queremos. Aquí es donde aquí podemos escribir un peso y esto resolverá nuestra promesa. Y aquí conseguiremos nuestro booleano. Como puedes ver, TypeScript realmente nos ayuda mucho a entender las tipologías correctas. Y siempre podemos comprobar qué tipo tenemos. Aquí. Estamos recibiendo la misma contraseña y ahora debería funcionar. Echemos un vistazo dentro de Boltzmann. Estoy golpeando arena y estamos recibiendo un mensaje, correo electrónico una contraseña o no es correcto. Aquí con la contraseña correcta, 123, estamos recuperando a nuestro usuario y esto es exactamente se implementan solicitud de inicio de sesión. 12. Creación de un middleware: En este video, quiero hablar de middlewares. Entonces, ¿qué es Middleware? Por lo general, cuando estamos haciendo una solicitud del cliente al backend, simplemente lanzamos esta solicitud dentro de nuestra ruta. Y luego dentro del controlador, esto es exactamente lo que hicimos aquí dentro de nuestro servidor fuente. Así que aquí tenemos dos post request, register and login, y simplemente saltamos dentro de nuestro controlador, lo que en realidad significa aquí insertar controlador, estamos recibiendo solicitud y respuesta. Middleware es algo que se puede llamar antes de que lleguemos aquí, lo que en realidad significa que el middleware está aplicando en el back-end, pero antes de que nuestra solicitud sea dos puntos dentro de nuestro odentro de nuestra ruta, Kohlberg, haciéndolo middlewares en absoluto. Si necesita hacer algo con solicitud antes de que esta solicitud sea entrar en el controlador, esto es exactamente cuando necesita un middleware. Middleware, ¿ necesitamos en nuestro proyecto? Este es el middleware de autenticación. ¿ Por qué lo necesitamos? Imagínateque cada vez que necesitamos hacer algo con Strategist en user, necesitamos revisar su token, lo que en realidad significa en cada método, como por ejemplo aquí registrar, estamos recibiendo el token del usuario. Debemos pasar esta ficha. Debemos validar este token, y debemos encontrar al usuario actual con este token. Y no tiene ningún sentido escribir este código en cada acción de controlador. Es por ello que debemos crear un middleware que vamos a reutilizar en todas partes. Es por esto que quiero saltar aquí dentro carpeta fuente y crear aquí una nueva carpeta, que se llama middle. Mientras que aquí podemos almacenar todos nuestros middlewares. Y el primer middleware que estamos debemos crear es búhos dot ts. Y en realidad, ¿qué es Middleware? Esto es sólo una función. Es por esto que aquí quiero exportar por defecto y la función síncrona. Y se podría preguntar, está bien, Pero ¿por qué es un síncrono? Simplemente llegamos aquí nuestra petición y dentro hacemos algo con ella. Porque en realidad aquí queremos trabajar también con la base de datos. Si tenemos un token, este token es válido. Queremos leer una idea del usuario desde este token y obtener este usuario de la base de datos. Por lo que podemos utilizar este usuario que será preparado dentro de nuestro controlador más adelante. Es por ello que se trata de una función asíncrona. Aquí estamos recibiendo una respuesta de solicitud. Y a continuación, exactamente como lo hicimos anteriormente, aquí, Vamos a escribir nuestra petición, entonces tenemos nuestra respuesta. El último aquí será nuestra siguiente función, que será la siguiente función de R expresada. Y aquí voy a invertir en la parte superior nuestra solicitud y respuesta. Y esta función no devuelve nada. Es por ello que es una función nula. Y dentro de esta función queremos leer el token de nuestra solicitud, pero no voy a envolver directamente todo nuestro código con try catch. ¿ Por qué es eso? Porque trataremos de hacer alguna solicitud asíncrona a nuestra base de datos y podría fallar. Es por esto que aquí es un buen enfoque para escribir try-catch donde estamos consiguiendo nuestra flecha y luego la captura lateral. Nosotros sólo queremos hacer riesgos y estatus y aquí estará el 401. Podrías preguntar, está bien, pero ¿por qué no mostramos un error aquí? Porque en realidad no nos importa. Este es un middleware para comprobar nuestra autenticación. Si por alguna razón no podemos analizar la charla y hablar y escuchar, válido. No pudimos encontrar a este usuario en ningún caso, significa que nuestro usuario no está conectado. Aquí es donde aquí estamos directamente nuestro estado 401. Ahora aquí debemos leer nuestro status. Entonces aquí quiero crear nuestro encabezado y podemos obtener nuestro encabezado de request dot headers, dot autorización. En realidad esto significa que almacenaremos nuestro token dentro de nuestro encabezado de autorización. Y en realidad un enfoque típico, espero que implementemos nuestra autorización de deber es que tenemos aquí clave de autorización, este es nuestro encabezado y el valor aquí será token de espacio al portador. Por lo que aquí tendremos alguna corriente única. Es por ello que debemos dividir nuestro token en consecuencia. Pero antes que nada, aquí leemos nuestro encabezado y podría ser que no esté configurado. En este caso, simplemente podemos decir para 01, esto es y aquí. Si no tenemos nuestro, nuestro encabezado, simplemente podemos copiar pegar esta línea con los descansos y el estado para 01. Después de esto, realmente necesitamos analizar nuestro token. Así que aquí vamos a conseguir nuestra conversación y esta es nuestra división de cabecera, y esto es sólo una cadena que fue dividida por el espacio. Por lo que estamos consiguiendo array con dos elementos. Como se puede ver aquí. En la primera posición, tendremos mejor. Y en la segunda posición será nuestra cuerda. Lo que queremos conseguir, aquí es donde aquí tomaré el segundo elemento de la matriz y será nuestro token. Pero como puedes ver aquí, estamos recibiendo el mensaje del Mecanografiado. Ese objeto es posiblemente indefinido. Y por eso me gusta tanto TypeScript. Ayuda mucho durante el desarrollo. ¿ Cuál es el problema? En realidad aquí tenemos nuestra IV y vestido y estatus, lo que en realidad significa que no vendremos aquí. Pero TypeScript entiende que vendremos aquí porque en realidad no lo probamos aquí, regresa. Y es por esto que este código no es válido porque en este caso aquí, nuestro encabezado puede ser strain o indefinido it. Pero después de esta comprobación correcta con retorno, puede ser sólo una cadena válida. Entonces el siguiente paso que tenemos que hacer es verificar nuestro token. Al usar GBT, esto es camino aquí, quiero importar DVT desde JSON Web Token. Y sólo para recordarles, esta es una biblioteca que usamos para generar un token en el backend, y ahora necesitamos validarlo. Es por esto que aquí sólo podemos probarlo que estamos obteniendo algunos datos de nuestro token. Y aquí estará GBT verificando el interior. Bueno Python, en primer lugar , un token. En segundo lugar, nuestra clave secreta. Y sólo para recordarte aquí dentro de nuestra configuración, tenemos nuestro secreto. Es por esto que aquí sólo lo intentaré secreto y estará fuera de entrada desde nuestra configuración. Y no necesitamos proporcionar escuchar ninguna opción adicional. Pero si vamos a revisar aquí nuestra cepa de datos o lote de DVT PE, pero en realidad sabemos que esto no es correcto, esto no es lo que estamos empezando por dentro. Si vamos a mirar aquí, dentro de nuestros usuarios de controlador, aquí generamos nuestro token y dentro tenemos ID y correo electrónico, lo que en realidad significa que es válido aquí decir después de derivado verificar como. Y aquí podemos decir que estamos recuperando un objeto con una cadena D y también nuestro e-mail, que es una cadena, en este caso aquí ahora en datos estamos obteniendo base de datos correcta. Se trata de un objeto con un correo D y D. Entonces estamos consiguiendo aquí la idea del usuario y ahora podemos intentar traerla de la base de datos. Pero para ello necesitamos usar nuestro modelo. Esto es camino aquí en la parte superior. Podemos importar nuestro modelo de usuario desde nuestros modelos. Entonces aquí podemos saltar de nuevo dentro de nuestros modelos slash, y aquí tenemos a nuestro usuario. Ahora después de nuestros datos, podemos hacer una solicitud para recuperar a un usuario. Y en realidad aquí estamos usando un peso. Aquí habremos utilizado un punto modelo. Y aquí queremos encontrar usuario por AD, y tenemos esta función por defecto dentro de mangosta. Y aquí en lugar de un div, podemos escribir datos punto AD, y este usuario estará allí, o podría ser ahora, es donde también tendremos que comprobarlo. Si no tenemos un usuario de vuelta, entonces queremos decir también que el usuario no está conectado. Pero si todo está bien, entonces queremos establecer dentro de la solicitud de nuestro usuario. Por lo que en realidad la idea principal es que esta solicitud sea actualizada por nosotros aquí. Y luego más tarde cuando estemos llamando a continuación, esta solicitud llegará a nuestro controlador y luego tendremos acceso directo a este usuario. Este es camino aquí, quiero escribir solicitud usuario igual a usuario. Y este es este usuario que obtuvimos de la base de datos. Y después de este romance, solo llama a continuación. Y esta línea está diciendo que estamos listos con nuestro middleware y nuestra solicitud puede proceder a nuestro controlador. Pero aquí tenemos un problema, como se puede ver aquí, donde obtengo un error propiedad usuario no existe en solicitud de tipo y en realidad es completamente válido. Esta solicitud viene de expreso y dentro expresado no hay usuario de campo. Entonces lo que podemos hacer aquí, el enfoque de Ron será escribir aquí cualquiera y te recomiendo encarecidamente evites usar cualquiera en tus proyectos porque entonces TypeScript realmente no te puede ayudar. Simplemente tienes tu código con agujeros de JavaScript simple. Esto es y aquí, Ras como cualquiera, será un enfoque súper malo. ¿ Por qué es eso? Porque aquí simplemente decimos, nos importa lo que se trate de peticiones. Simplemente decimos que es cualquier usuario de punto y está funcionando. Este es el enfoque de principiante. No estamos escribiendo código como este. Aquí. Solicitar usuario está totalmente bien, pero esta solicitud no debe ser solicitudes de express. Debemos ampliarla. Y en realidad aquí dentro de los tipos, podemos crear un nuevo tipo y llamémoslo express request dot interface, dot ds. Ahora dentro puedo crear esta nueva interfaz. Y llamémoslo interfaz de solicitud expresa y en realidad debe extenderse. Por lo que aquí está extender solicitud. Y en realidad esta petición vendrá directamente de expresado. Por lo que aquí en la parte superior puedo escribir solicitud de importación de expresado. Entonces lo que estamos haciendo aquí, en realidad simplemente creamos una interfaz y extendimos todo lo que teníamos dentro de la solicitud a nuestra interfaz. Y ahora aquí simplemente podemos decir que tenemos un campo, el usuario, que podría estar indefinido él, y este es nuestro documento de usuario. Aquí se podría tarea o k, Pero por qué usuario puede ser indefinido aquí no tenemos un caso donde dentro de la solicitud de usuario está indefinido y tiene toda la razón, pero no estamos usando middleware concada solicitud. En ocasiones no tendremos usuario dentro de nuestra solicitud porque no todas las solicitudes deben ser autorizadas. Y ahora sólo podemos copiar pegar esta interfaz de solicitud expresa y saltando establecer nuestro middleware y ponerlo aquí en lugar de solicitud. Por lo que ahora necesito importar middleware express request. Ya no estamos usando solicitudes de express. Estamos utilizando la versión regular son extendida. Y ahora no tenemos ningún error. Y lo que estamos recibiendo aquí es solicitud completa de express más nuestro campo de usuario. Y este es exactamente el enfoque correcto para usar TypeScript. Por lo que creamos con éxito nuestro middleware. Ahora tenemos que usarlo. Y para ello quiero crear una nueva ruta. Bueno, vamos a conseguir usuario actual hablando. Así que vamos a saltar hacia atrás y decir servidor fuente. Y aquí tenemos dos rieles posteriores aquí. Ahora quiero crear apt-get y tenemos aquí slash API slash user. Esta es la ruta para buscar al usuario actual. Ahora después de esto con coma, quiero escribir middleware. Y en realidad en este archivo no declaramos cuál es nuestro middleware. Por lo que necesitamos ingresar aquí nuestro middleware desde nuestros middlewares. Entonces aquí tenemos horas de middlewares. Y esto es exactamente lo que haremos. Si estás escribiendo así, entonces aplicarás este middleware antes de que estemos aquí dos puntos controlador. Y aquí vamos a obtener nuestro controlador de usuarios punto, por ejemplo, la acción actual del usuario, que en realidad significa en primer lugar, en esta ruta, este middleware búhos se ejecutará si vamos a obtener una solicitud de usuario es entrar en el controlador, entonces donde campeón aquí. Y como se puede ver con express, it, bastante fácil de leer y entender. Ahora quiero saltar dentro o controlador de usuarios y crear este nuevo método. Entonces vamos en la parte inferior, crear nuestra nueva función, que será un usuario actual. Y aquí sabemos que estamos recibiendo solicitud y respuesta, pero importante, pero aquí no estamos usando peticiones de express, estamos usando nuestra versión extendida. Por lo que aquí voy a escribir de esa manera obtengo una interfaz de solicitud expresa. Y el siguiente parámetro aquí se levantará respuesta. Se está quedando igual como antes. Y aquí dentro de nuestra función debemos aplicar alguna lógica. Lo que queremos hacer aquí, en realidad dentro del usuario actual, podemos obtener directamente a este usuario de la solicitud. Aquí podemos decir vestir puntos y normalizar usuario, al igual que hicimos en la parte superior. Y aquí solicitaremos a ese usuario. Y en realidad funcionará mayormente porque lo que estamos haciendo aquí, estamos usando a nuestro usuario desde la solicitud con tirarlo dentro de usuario normalizado. Y sólo para recordarles, tenemos usuario normalizado aquí en la parte superior. Y esto es sólo un documento de usuario normal. Y generamos aquí hablando nuestra respuesta y la enviamos de vuelta. Pero en realidad aquí tenemos TypeScript. ¿Qué significa? Aquí estamos obteniendo un argumento de error de tipo documento de usuario o indefinido. No es asignable a utilizar un documento. Y esto es completamente válido porque dijimos que dentro de nuestra petición con no siempre tenemos un usuario. Y en realidad el punto es que esta lógica nunca sucederá porque dentro de nuestro servidor de aquí, rodaremos este middleware, lo que en realidad significa que si no tenemos usuario, entonces este middleware de la casa lo hará retorno para 01. Pero a TypeScript no le importa nuestro middleware porque simplemente lee nuestra función. Y si solo estoy buscando en nuestra función sin nuestro middleware, entonces nuestro código no es válido por eso, porque aquí estamos tratando de arrojarlo indefinido dentro de usuario normalizado. Y para manejar esto para TypeScript, debemos probarlo aquí. Con no tener usuario, entonces queremos lanzar 401. Por lo que aquí podemos escribir retorno, res, enviar estado, y aquí adentro para 01. En este caso, es completamente válido para TypeScript porque aquí en solicitud usuario, no puede estar indefinido con hizo esta comprobación aquí? Y en realidad este código es mucho mejor porque en este caso aquí tenemos esta sola función y podemos probar completamente de forma aislada, pero no me importa en esta función, lo que hicimos fuera con funciones adicionales, middleware sobre terror con nota más simple que esta función funcionará correctamente en cada caso, porque cubrimos todos los casos aquí, nuestra función debe ser implementada correctamente. Vamos a comprobar si está funcionando. Voy saltando al servidor y tenemos algún error. Vamos a revisar lo que tenemos. Y en realidad aquí se puede ver que fue la era de TypeScript y la última compilación fue exitosa. Empezamos el observador conectado a MongoDB y aquí está nuestra API. Por lo que podemos saltar directamente a Postman y tratar de hacer una solicitud GET. Pero dentro de nuestra solicitud, debemos proporcionar un token. Esto es camino aquí. Voy a copiar pegar para hablar en porque debemos usarlo. Y para esto crearé aquí GET request. Y esto es slash api slash user. Yo sólo estoy golpeando aquí enviado. Y como pueden ver, estamos llegando aquí sin autorización. ¿ Por qué es eso? Porque la autorización interna con no proporcionó un token válido. Pero si en vez de esta cuerda, pegaré nuestra hablando así Birra que espacio. Y luego tenemos nuestra cuerda, estoy golpeando aquí enviar, y mágicamente funcionó. Y aquí estamos consiguiendo a nuestro usuario normal con el Tonkin. Pero lo más importante es que no lo intentamos. Toda esta lógica con conseguir usuario actual aquí dentro de este método, está escrito dentro de middleware. Y ahora podemos usar nuestro middleware en cada lugar donde queramos comprobar si hay usuario actual o si necesitamos la información actual del usuario dentro de nuestro controlador. 13. Creación de un módulo de auth: En videos anteriores siempre se prepararán algunas peticiones de Pi para nuestro usuario registrado y el usuario actual de la puerta. Por lo que ahora no estaría bien empezar a implementar algo en el front-end. Es por esto que aquí quiero saltar dentro de nuestro cliente. Y aquí quiero empezar con nuestro módulo de usuario. Y lo que tendremos en nuestro módulo de usuario son dos páginas iniciando sesión y registrándose. Pero no basta con solo tener dos páginas para registrarse e iniciar sesión dentro de nuestro módulo, también necesitaremos un servicio para trabajar con el usuario actual. Por ejemplo, necesitamos registrar usuario, iniciar sesión usuario, obtener usuario actual, y así sucesivamente y subir este bucle, necesitamos una interfaz para nuestro usuario actual también, aquí es donde en este video, vamos a centrarnos en conceptos básicos de nuestro módulo de autenticación. Para esto, quiero saltar dentro de nuestra carpeta de aplicaciones de origen. Y aquí quiero crear una nueva carpeta. Aquí queremos aislar todo, que está hablando autenticación, el registro está comenzando. Nuestro primer paso aquí es crear un módulo. Y si no estás tan familiarizado con Angular, solo dos palabras sobre módulos dentro de Angular, dentro de los otros frameworks como por ejemplo, reaccionamos, simplemente usamos importaciones y exportaciones, Bot Insight angular, tenemosmucho más, tenemos inyecciones de dependencia, lo que en realidad significa que toda la aplicación se divide en diferentes módulos. Por ejemplo, en nuestro caso, estamos definiendo aquí y ahora módulo. Ahora podemos crear diferentes cosas dentro de este módulo y se aislarán dentro de este módulo. Y podemos definir lo que queremos exponer para usar afuera. Y si no exponíamos nada por usar afuera, entonces no podemos simplemente usar las cosas de este módulo. Y este es realmente un buen enfoque para aplicaciones enormes. Vamos a crear en primer lugar, nuestro, nuestro módulo. Para ello, necesitamos exportar nuestra clase, nuestro módulo. Ahora en la parte superior de esta clase queremos proporcionar un decorador de módulos NG. Y por dentro pasaremos cosas diferentes, pero por ahora no necesitamos registrar nada aquí todavía. Lo que quiero hacer ahora quiero volver a saltar dentro de nuestro módulo de app, porque en realidad debemos registrar este módulo dentro de nuestro módulo de app. En otro caso, este módulo no lo vincula a nuestra aplicación porque solo estamos cargando un módulo y debemos colocar todos los módulos infantiles también dentro de él. Aquí es donde aquí adentro en aves, simplemente podemos escribir nuestro módulo. Y con esta línea donde obtener una entrada automática aquí en la parte superior. Y ahora estamos seguros de que nuestro módulo está cargado. Nuestro siguiente paso aquí es crear una interfaz de usuario actual. Y desde mi punto de vista, es completamente ajeno al módulo de búhos. Por lo que aquí podemos crear una nueva carpeta tipos y registrarse aquí, interfaz de usuario actual punto ts. Y dentro de nuestro proyecto Express, no teníamos ninguna regla sobre el nombre de archivos porque ahí acabábamos expresar y todo lo que estamos escribiendo, simplemente escribimos con nuestras propias pautas en decir el angular, es muy recomendable nombrar todos nuestros nombres de archivo, Start y luego postfix de la entidad. Por ejemplo, aquí escribimos módulo punto porque es módulo anunciado. En este caso estamos justo aquí, interfaz de punto porque será una interfaz y exactamente lo mismo va sobre clases. Aquí no estamos escribiendo búhos de clase, sino nuestro módulo. Y aquí dentro de CurrentUser, estamos justo aquí, interfaz experta, y aquí tenemos nuestra interfaz de usuario actual. Ahora la pregunta es ¿qué vamos a meter dentro? Y es fácil responder que solo necesitamos mirar dentro de nuestro Cartero. Así que aquí estamos volviendo para nuestro usuario actual, correo electrónico, nombre de usuario, ID y token. Así que simplemente podemos escribir aquí que obtenemos un DStrem. Tenemos nuestro token, que es cadena. Tenemos el nombre de nuestro usuario. También es cadena, y el último es nuestro correo electrónico. Y con esto tenemos éxito con definido nuestra entidad de usuario actual en nuestro cliente. Y ahora en cada lugar donde estamos hablando del usuario actual, podemos usar esta interfaz. Nuestro siguiente paso aquí es crear una clase, porque en realidad antes empezaremos con creación de componentes para el registro y la leucemia, pero debemos crear un servicio que se comunicará con nuestra API. Y el servicio seguro pertenece dentro de nuestro módulo. Es por esto que aquí crearé una nueva carpeta, servicios, y quiero crear aquí fuera dot services.js. En realidad es realmente un buen naming si no sabes nombrar tu servicio. Si solo quieres empacar algunos métodos dentro de tu servicio dentro del módulo y realmente no sabes de qué se trata este Methods II. Simplemente puede nombrar el servicio como un módulo. En nuestro caso, tenemos aquí nuestro módulo y nuestro servicio. Pero si eres servicio en algún momento será demasiado grande. Siempre puedes dividirte. Puede ser en servicio de inicio de sesión, registro, servicio, Servicio de Usuario Actual, lo que prefiera. Por ahora, nuestro servicio está completamente bien. Aquí quiero exportar nuevo servicio de horario de clase. Ahora, es súper importante no olvidar escribir en la parte superior inyectable. Porque si quieres, prueba esta sola línea, será súper difícil depurar un problema. Sus entradas funcionarán, pero obtendrá algo de magia ocurre en la consola. Es por esto que nunca olvidar inyectable si estamos hablando de servicios, ahora debemos registrar el servicio dentro de un módulo. Y esto es exactamente, va en la dirección de inyecciones de dependencia y módulos dentro de Angular. Entonces lo que queremos hacer aquí, queremos crear un nuevo campo que se llama proveedores. Y aquí es una matriz y estamos escribiendo dentro de nuestro, nuestro servicio. Por lo que esta es exactamente la forma correcta de registrar todos los servicios dentro de nuestro módulo. Ahora queremos crear nuestro primer método aquí y se va a conseguir del usuario actual. Bueno, aquí podemos simplemente escribir que queremos crear, obtener la función de usuario actual y volverá rápidamente observable del usuario actual. Y en este punto, tengas preguntas que tengas preguntas si no conoces Angular tan profundo, y si no sabes cuáles son nuestros observables en absoluto y este delgado con genérico aquí podría ser confuso para usted. Entonces, ¿qué es observable? Esto es sólo una representación de la corriente. Entonces, ¿qué es stream? Esto es algo que ha cambiado con el tiempo, lo que en realidad significa que podemos suscribirnos a la corriente. Y cuando el cambio esté sucediendo en la corriente, entonces obtendremos nuevo valor. Entonces decir el angular, todo está trabajando en el amor con arroyos cuando no se usan promesas. Aquello que en realidad significa streams y observables, es un patrón específico, cómo vamos a escribir nuestro código. Entonces lo que estamos diciendo aquí que estamos recuperando un observable. Y aquí estamos proporcionando qué tipo de datos estamos recuperando. Y en nuestro caso, estamos diciendo aquí que esta función debe devolver una interfaz de usuario observable de tipo actual. La interfaz de usuario actual es exactamente nuestro objeto de usuario actual. Ahora dentro queremos buscar algunos datos, y para esto dentro de Angular tenemos HTTP. Es por esto que aquí voy a escribir constructor y dentro privado, http es igual al cliente HTTP. Entonces lo que esta línea está haciendo la parte superior, esta notación con constructor, luego privada alguna variable es igual a alguna clase es como estamos inyectando algunas dependencias dentro de un servicio. Y está totalmente bien si te da un poco de miedo ver dicho código, escribiremos exactamente el mismo código y otra vez en cada video. Por ahora, solo necesitas entender que debemos usar HTTP aquí dentro de nuestro servicio. Aquí es donde aquí debemos inyectar este cliente HTTP. Y ahora aquí en nuestros métodos, podemos usar este punto HTTP y dinámico es aquí queremos usar método GET para obtener nuestro usuario. Entonces lo que quiero hacer ahora quiero crear una URL. Y en realidad aquí podemos simplemente pegar http localhost 4,001 slash api slash user, y simplemente tiramos aquí nuestra URL. Y ahora necesitamos devolver esta URL HTTP GET. Pero aquí estamos recibiendo un error. tipo de objeto observable no es asignable al tipo de interfaz de usuario actual observable, ¿por qué está sucediendo? Debido a que en realidad HTTP GET volviendo por defecto observable fuera de objeto porque nuestro HTTP GET Cantril y saber qué datos estamos recuperando cuando no, sólo nosotros mismos en nuestra aplicación, pero aquí podemos hacer, hay que precisar lo que estamos recuperando. Y en este caso aquí estamos diciendo, ok, este HTTP GET específico por esta URL devolverá falsa interfaz de usuario actual y no solo algún objeto aleatorio. Es por esto que en este caso cuando no se obtiene ningún error, debido a que esta sola línea está regresando rápidamente observable de la interfaz de usuario actual. Y sólo hay que recordar que todo este HTTP volverá para nosotros siempre observable de algo. Ahora, lo siguiente que es realmente malo es esta línea. ¿Por qué es eso? En primer lugar, aquí directamente camino base aquí. Este es super mal enfoque. ¿Por qué es eso? Porque esta línea se romperá en la producción. Es apto sólo para el desarrollo. Y necesitamos escribir exactamente el mismo código una y otra vez en cada método, esto es malo. Para ello, tenemos variables de entorno dentro de Angular. Podemos saltar de nuevo dentro entornos fuente y aquí entorno, sí, aquí es exactamente donde debemos definir todas nuestras constantes en base a un entorno específico. Entonces, lo que debemos hacer aquí, podemos crear una nueva URL de API de propiedad, y solo podemos pegar nuestro stream aquí. Así host local para 1001 slash API. Y esto está totalmente bien porque aquí en nuestro entorno de desarrollo donde se establece en API URL también tendremos aquí entorno para producción. Y podemos definir diferentes URL de API allí. Esta es la forma más correcta de hacerlo. Ahora sólo podemos usar aquí entorno, y como se puede ver, estamos recibiendo una entrada externa punto API URL plus. Y aquí simplemente necesitamos usar slash user y nada más. En este caso, estamos reutilizando esta URL de entorno y está completamente aislada dentro de la variable de entorno, nuestros servicios totalmente listos. Pero lo que queremos hacer, queremos conseguir este usuario cada vez que carguemos nuestra aplicación angular. ¿ Por qué es eso? Porque en realidad fueron robados. Nuestro usuario actual normalmente en memoria y después de iniciar sesión o registrarse, simplemente estamos hablando dentro del almacenamiento local. Es por esto que cada vez que estamos saltando dentro de nuestra aplicación, necesitamos obtener usuario actual. Para ello, quiero volver a saltar dentro de nuestro componente de app. Y este es exactamente el componente que se cargará en cualquier página. Aquí podemos escribir implementar en init. Y si no sabes lo que no está en él, este es un método especial al que se llamará al inicializar nuestro componente. Aquí estoy justo en ingeniería en ello. Y luego dijo que podemos usar nuestro servicio, pero para poder usarlo, debemos inyectarlo aquí. Y aquí estamos escribiendo exactamente las mismas cosas como escribimos dentro o servicio. Privado, no HTTP como hicimos en el servicio, sino nuestro servicio que acabamos de crear. Y aquí debemos de entrada son nuestro servicio, que está dentro de nuestro módulo. Y ahora lo podemos usar aquí directamente dentro del motor en él. Por lo que este nuestro servicio y tenemos aquí obtener método de usuario actual. Pero lo que es más importante estos retornos para nosotros y observables. Y típicamente queremos hacer algo para escuchar los cambios de lo observable. Es por esto que aquí intentaremos dot subscribe. Y ahora dentro suscríbete aquí conseguiremos alguna información. Entonces aquí solo escribiré rads y consola log Ras para que podamos comprobar si está funcionando. Saltaré al navegador y recargaré la página. Y sólo para recordarte, tu servidor web cliente también debe estar iniciado. Aquí estamos recibiendo un error. Servicio de cliente Http, sin proveedor para cliente HTTP. ¿ Qué significa? Significaque usamos el cliente HTTP en nuestra aplicación, pero no inyectamos un módulo de cliente HTTP dentro de nuestra aplicación. Esta es la forma de arreglarlo. Debemos saltar dentro de un módulo, y aquí debemos importar el módulo cliente HTTP. En este caso, nuestro error será corregido. Recarguemos la página. Como puedes ver ahora, está funcionando, pero aquí ahora estamos recibiendo un error sobre solicitud de origen cruzado. Y en realidad esto es totalmente correcto porque no configuramos correctamente nuestra aplicación de back-end Express para que funcione con solicitudes de origen cruzado. Es por esto que simplemente podemos saltar de nuevo dentro de nuestro servidor. Y aquí los niveles de servidor de código abierto, nuestro siguiente paso será instalar paquete adicional. Es por esto que saltaré dentro de nuestro servidor. Y aquí mismo, npm install course and course es el paquete más popular para resolver problema del curso con la aplicación Express. Simplemente saltaré de nuevo dentro o hermandad S. Y aquí puedo escribir en el curso de entrada superior, cuerpo de tambores. Y ahora lo único que debemos hacer aquí es ante nuestro analizador corporal, por ejemplo, podemos escribir un banco y estamos proporcionando curso insight como una función. Como puedes ver, no tenemos ningún error ahora dentro del backend y podemos recargar nuestra página front-end. Como se puede ver ahora con no tenemos era del discurso y sólo nos estamos volviendo desautorizados. Vamos a revisar lo que tenemos dentro de la red. Tenemos esta solicitud para el usuario, y si la voy a hacer un poco más pequeña, podemos ver lo que estamos consiguiendo dentro de los encabezados de respuesta y estamos consiguiendo aquí control de acceso allow origin star. Y en realidad esta es la razón por la que está funcionando. Nuestro back-end, configurarlo correctamente. Estos permiten el acceso de origen. Es por esto que no estamos recibiendo un error del navegador. Pero como pueden ver aquí, estamos recibiendo 401 no autorizados. Y en realidad esto es completamente normal. No estamos conectados, en nuestra aplicación. Simplemente buscamos al usuario actual y obtuvimos un error. Esto está totalmente bien. Lo que no está bien con no reaccionó de ninguna manera por esta solicitud autorizada. Entonces lo que podemos hacer, podemos saltar de nuevo dentro nuestro componente de app donde escribimos este código. Y también podemos manejar un error. Y para ello podemos escribir dentro de Subscribe, no una función sino un objeto. Aquí dentro del objeto podemos tener dos campos. En primer lugar, a continuación, este es exactamente nuestro éxito. Y como pueden ver aquí, estoy dejando esta función tal como está. Pero después de lo siguiente podemos crear un error. Y en este caso, esto es lo que sucederá si tenemos un error. Entonces aquí podemos simplemente escribir error de registro de consola y tal vez queramos ver la Sarah, vamos a revisar lo que estamos consiguiendo. Estoy recargando la página y estamos recibiendo nuestro error, respuesta de error HTTP. Y aquí tenemos no autorizados y podemos reaccionar en esta época. Entonces lo que quiero hacer ahora, quiero crear set current user function. Y en realidad no tiene mucho sentido porque no tenemos suerte de estaño, pero aún necesitamos guardar información dentro de nuestra aplicación de que el usuario no está bloqueado. En este caso, toda la aplicación, cada componente puede comprobar, estamos encerrados de vez en cuando nuestro componente sabe cómo reaccionar ante esto. Es por ello que debemos saltar de nuevo dentro de nuestro, nuestro servicio. Y aquí quiero crear nuevo método conjunto usuario actual. Aquí dentro estamos recibiendo usuario actual, que es nuestra interfaz de usuario actual. Y devolverá un vacío porque en realidad solo cambiaremos datos en su interior y no devolveremos nada. Y en realidad no es del todo correcto. Aquí está la interfaz de usuario actual o null si no tenemos un usuario actual. Porque en realidad, si no estamos encerrados en Poupon para configurar usuario actual a ahora. Ahora la pregunta es ¿qué estaban metiendo dentro? Típicamente lo que verás en muchas aplicaciones. La gente simplemente define una propiedad local dentro de horas, como usuario. Y entonces aquí simplemente puedes escribir este usuario igual a usuario. Este no es el mejor enfoque con Angular. Y dentro del Angular, es súper cómodo y eficiente trabajar con arroyos porque es mucho más fácil reaccionar en arroyos y combinarlos. Es por ello que debemos utilizar un enfoque más difícil, pero es más adecuado para grandes aplicaciones. Es correcto. Aquí es donde quiero escribir que estamos llegando aquí, corriente de usuario actual. Aquí. Yo quiero crear un nuevo comportamiento un sujeto, y decía comportamiento un sujeto. Estoy diciendo que estamos llegando aquí interfaz de usuario actual o ahora, o indefinido ella. Y después de esta ronda de corchetes, y aquí estamos diciendo indefinido por defecto. Entonces lo que escribí aquí en absoluto y cómo lo usaremos. En realidad, ¿qué es sujeto de comportamiento? Esto es sólo una representación de arroyos. Esto es solo una corriente que tiene un valor predeterminado. En este caso, nuestro valor por defecto es indefinido, y también podemos establecer dentro de la secuencia tales tipos como interfaz de usuario actual ahora o undefined. Y ahora dentro del conjunto actual del usuario, podemos cambiar el stream. Podemos escribir aquí este punto usuario actual. Y para cambiar la secuencia estamos usando punto siguiente y te estamos proporcionando valor. En este caso aquí estamos proporcionando usuario actual y es completamente válido porque la interfaz de usuario actual es un tipo válido. El punto principal es aquí que una gran cantidad de componentes dentro nuestra aplicación pueden suscribirse a esta corriente de usuario actual, y serán saqueadores automáticos terminados en este momento aquí, cuando están cambiando el valor dentro del flujo de usuario actual. Y no te preocupes, si no lo estás consiguiendo por completo, verás cómo lo estamos usando en conferencias posteriores. Por lo que hemos creado con éxito nuestro conjunto de usuario actual. Ahora aquí dentro de nuestro componente de app, al menos por error, podemos hacer algo. Podemos configurar a nuestro usuario actual dos. Ahora, aquí voy a escribir este punto nuestro servicio dot set usuario actual. Y aquí adentro lo haré ahorita. Entonces lo que está pasando aquí en Inicializar de nuestra aplicación, estamos llegando aquí usuario actual. Si no obtuvimos el usuario actual, entonces lo estamos configurando en nulo. Y ahora quieres seguro preguntarme por qué escribí aquí ahora y definirlo y usuario actual, tiene cierto sentido establecer aquí usuario actual y ahora, pero no indefinido. Adicionalmente, lo hicieron con el propósito porque en realidad debemos manejar tres estados diferentes. En primer lugar, por defecto, tenemos indefinido, lo que en realidad significa para nosotros, aún no buscábamos al usuario actual. No está listo si estamos aquí sentados ahora, significa que buscamos al usuario actual, pero no tuvo éxito. No estamos encerrados. Entonces ahora aquí significa que no estamos encerrados. Y la interfaz de usuario actual obviamente significa que estamos encerrados. Por lo que creamos con éxito nuestro módulo, nuestro servicio, interfaz de usuario actual, y algunas funciones básicas que necesitaremos en las próximas conferencias. 14. Página de registro: marca + formulario: En video anterior, preparamos mucho personal respecto al usuario actual. En este video, quiero centrarme en crear nuestra página de registro porque el pastel para el registro ya estará implementado. Y para ello, en primer lugar debemos crear un nuevo componente. Es por esto que aquí estoy dentro de las horas de App aquí debemos crear una nueva carpeta la cual se llama componentes. El primer componente que podemos implementar es el registro. Y aquí hay una palabra importante. En realidad posteriormente implementaremos dos componentes, registro e inicio de sesión. Las diferencias entre estos dos componentes no son tan significativas. Tenemos en registro, campo adicional, nombre de usuario e login con, no tenemos este campo. Entonces tenemos diferente La goma de la llanta. Esto es todo. Todos. Otras cosas es quedarse igual. Es por ello que tenemos dos posibilidades. Podríamos crear un solo componente y simplemente administrarlo entre el inicio de sesión y el registro. O podemos crear dos componentes diferentes. Prefiero crear dos componentes diferentes solo porque es más fácil de mantener más tarde, incluso cuando duplicamos un poco el código. Entonces aquí vamos a crear una nueva carpeta y llamarla registro. Ahora dentro de esta carpeta, debemos crear archivo ts, un archivo HTML. Y aquí habremos registrado dot component dot ts y también registrado dot component dot HTML. Ahora dentro de nuestro componente, debemos experto nuestro nuevo componente de registro de clases y luego decir este componente debemos primer lugar proporcionar un selector. Aquí tienes una decisión importante. Puedes nombrar a todos tus selectores comenzando con el nombre de tu aplicación. Por ejemplo, se hace algún prefijo que es válido dentro de la aplicación. Por ejemplo, en nuestro caso, podemos llamarlo L Trello o simplemente L. Y entonces tienes una diferencia entre todas las bibliotecas que usas y los componentes de nuestro proyecto. Porque en realidad si estamos saltando dentro del HTML, aquí tenemos L register, entonces sabemos que esto es componente de nuestro proyecto. Si tienes aquí, por ejemplo, prefijo vacío y luego un botón, entiendes la k Esta es una biblioteca de materiales y no es nuestro proyecto. Este es el primer enfoque que es posible. Prefiero otro enfoque donde prefiero cada componente dentro del módulo, lo que en realidad significa que ahora estamos dentro de nuestro módulo. Aquí es donde aquí el selector estará por ahí registrado. Es mucho más fácil porque no usaremos librerías. Y en este caso podemos ver desde qué módulo estamos obteniendo este componente. Lo siguiente que debemos proporcionar dentro nuestro componente es nuestra URL de plantilla. Y esta es la URL para nuestro componente de registro HTML. Ahora, no debemos olvidar registrar nuestros componentes dentro de nuestro módulo. Aquí estamos saltando dentro de nuestro módulo Ts, y creamos aquí un campo de declaraciones. Y en el interior ya podemos escribir registro de componente y delta E importado de componentes registrados, registrados. Entonces nuestro componente está ahí. Ahora podemos escribir algún marcado para nuestro componente dentro de nuestro componente de registro, sí, y en realidad aquí me perdí letra S en el registro de palabras. Ahora vamos a ejecutarlo un marcador para nuestra página de registro. Y la primera clase que tenemos aquí es div con página de inicio de sesión de clase. Y podría ser confuso para usted, pero esto es sólo porque de nuestros estilos fueron escritos para página de inicio de sesión y es exactamente igual que la página de registro. Entonces aquí tenemos nuestra página de inicio de sesión div, y ahora dentro tendremos un enlace en la parte superior. Aquí tenemos un enlace router y aquí está slash. Por lo que esta ruta va a nuestra página de inicio. Dentro de nuestro enlace router, queremos una imagen. Por lo que aquí estará la fuente de imagen slash acids, slash Trello, logo dot SVG. Y después de esta clase, ley de hilos, logo principal. Y en este momento quieres Seguro que decir, vale, no tenemos ninguna imagen. Esto es por sobre todo para usted preparó todas las imágenes y las puso dentro de esta carpeta, dentro de activos. Y puedes tomar todas estas imágenes del archivo de esta lección específica en el cuadro de descripción a continuación, como puedes ver aquí, dentro de fuente, dentro de activos, tengo bastantes imágenes, así que no olvides para llevarlos a nuestro proyecto. Ahora volvamos a saltar dentro de nuestra aplicación, nuestros componentes se registran, registran HTML, y después de nuestra una etiqueta aquí en la parte superior, queremos crear div con contenedor firme de clase, y será nuestro contenedor para nuestro formulario. Ahora, dentro del contenedor, queremos en primer lugar escribir encabezado de inicio de sesión de clase def. Y de nuevo, tenemos la clase desde el login, pero no es gran cosa. Y aquí estamos escribiendo registro a Trello. Después de esto, escribiremos una clase para errores de validaciones. Y en realidad por ahora, no meteremos ningún error dentro de él, pero lo usaremos más adelante. Esto es y aquí, solo errores de clase div lo estaban cerrando. Está completamente vacío y no se renueva nada ahí todavía. Ahora después de esto tenemos nuestra forma. Entonces abramos y cerremos la etiqueta del formulario. Y dentro de nosotros tenemos campos específicos. Entonces, antes que nada, aquí tenemos un correo electrónico, así que entrada tipo e-mail. Y aquí queremos colocar correo electrónico titular. Y el último será entrada de inicio de sesión de clase. Ahora quiero copiar pegar esta línea dos veces porque necesitamos no solo correo electrónico, sino que también necesitamos aquí el nombre de nuestro usuario. Entonces aquí no necesitamos Tipo. marcador de posición será nombre de usuario y clase. Estaremos buscando entrada. Y después de esto escriba contraseña y coloque la contraseña del titular. Después de esto, podemos crear nuestro botón para registrar usuario. Aquí estaremos tipo de botón, submit, class, login, submit button. Y dentro de este botón, probémoslo para un registro. Después de nuestro formulario, queremos renderizar nuestros enlaces. Así que aquí tendremos div class bottom form links. Vamos a cerrar este div y dentro solo crear un único enlace a nuestra página de inicio de sesión. Por lo que aquí habrá un enlace de router. Nuevamente. Aquí tendremos página de inicio de sesión de barra y enlace de registro de clase. Aquí dentro de nuestra una etiqueta, simplemente ejecutaremos el inicio de sesión. Vamos a comprobar si algo está renderizado. En realidad, queremos saltar a slash página de registro y ver nuestra página, pero no funciona porque no registramos nuestra ruta. Registrados. Para ello, debemos saltar de nuevo dentro de nuestro módulo, nuestro módulo. Y aquí debemos registrar todas las rutas que queramos crear dentro de este módulo específico. Aquí es donde aquí en la parte superior podemos crear rutas array y podemos decir que esto es rondas, y en este caso no será solo array. Tendremos dentro la validación de cada ronda. Entonces aquí necesitamos agregar un objeto con nuestro camino el cual será registrado y nuestro componente que acabamos de crear. Y es componente de registro. En este caso, funcionará después de que agreguemos estas rutas a nuestros insumos. Aquí es donde aquí debemos rectos en pájaros y usar escuchar ruta módulo punto para niño. Y es importante usar aquí para niño y no fruncido porque queremos crear el Strauss dentro o un módulo hijo, no dentro del módulo de app. Aquí es donde aquí para rutas infantiles y rutas para este módulo específico. Ahora echemos un vistazo a esto. Recargaré la página y saltaré al registro de slash. Y como pueden ver en este caso, se rendió. Podemos ver nuestro teléfono sin ningún CSS, y aquí está nuestro archivo SVG que lo proporcionamos en la parte superior. Así que ahora tu pregunta es segura, mientras que es nuestro CSS y este es el punto. También preparé todo el CSS para nuestro proyecto. Por lo que estaremos totalmente enfocados solo en Angular y escribiremos en lógica empresarial. Es por esto que debes tomar el código fuente de nuestro proyecto bajo el video. Y luego dentro de la carpeta fuente, dentro de styles.css, debes copiar estas líneas. Y como puedes ver aquí, estos son todos en partes de estilos Nueva Carpeta, que también debes copiar. Por lo que necesita copiar dos cosas, carpeta de estilos de origen y los estilos de fuente, CSS, debe anular este archivo. Así que dentro de nuestros estilos fuente, tenemos muchos estilos diferentes. Como se puede ver aquí. Por ejemplo, crear tarea. Tenemos todo lo referente a crear tarea. Y todos estos estilos son globales y usaremos estilos más antiguos solo para estar completamente enfocados en la aplicación Angular. Además, quiero recordarles que nuestro archivo global, estilos de fuente, CSS, es usado automáticamente por Angular, lo que significa que si escribiste estos símbolos aquí, funcionará fuera de la caja. Y ahora si vamos a recargar la página, tenemos aquí, nuestro marcado. Por lo que tenemos aquí trello icono, y esto es en realidad un enlace a la página de inicio. Y tenemos nuestro formulario de registro con correo electrónico, nombre de usuario y contraseña. El único problema es aquí, hola l Trello que podemos ver en la esquina. Esto son solo algunas sobras dentro nuestra aplicación fuente, componente de aplicación HTML. Aquí podemos quitar esta línea y simplemente vivir aquí salida del router. Por lo que aquí hemos creado con éxito nuestro marcado para la página de registro. Ahora pasa a enlazar de alguna manera esta forma junto con Angular. Y en realidad dentro del Angular, tenemos formas reactivas. Y este es un módulo Angular adicional para trabajar con formularios a la manera de ajedrez de esta semana. Esto es y Vamos a saltar de nuevo dentro son nuestros componentes, registrar, registrar componente ts. Y aquí en primer lugar, quiero poner dentro de nuestro formulario, nuevo atributo form group. Y aquí lo probaré igual a forma. Y aquí también necesitamos NG Submit para enviar el formulario. Y aquí vamos a crear en Enviar. Ahora la pregunta es ¿qué es este grupo de formularios? Y en realidad dentro de las formas reactivas, podemos crear un grupo de formularios dentro de un componente. Y será una representación de nuestro formulario HTML. Y estará completamente unido a nuestros elementos HTML y funcionará de la caja. Lo que queremos hacer aquí dentro de nuestra clase, queremos crear nuestro formulario. Y esto es en realidad este punto si b grupo de puntos. Y no tenemos B dentro de nuestro componente en absoluto. Es por esto que debemos insertar constructor inyectado. Por lo que aquí voy a escribir privado si b, y esto es constructor de formularios. Y como pueden ver, se importaba de formas angulares. Ahora aquí en la parte superior tenemos acceso a este gran grupo y aquí está nuestra forma. Entonces, ¿qué campos tenemos? En primer lugar, tenemos un e-mail y en realidad aquí podemos decir como una matriz nuestros validadores, por lo que el valor inicial aquí está vacío y aquí podemos escribir validadores punto requerido, en este caso las formas reactivas. Verificaremos por defecto este campo para ver si hay vacío. Ahora podemos copiar pegar esta línea porque tenemos exactamente lo mismo. Tenemos aquí nuestro nombre de usuario, también campo vacío y validación requerida, y aquí está nuestra contraseña. También es campo vacío por defecto y se requiere por lo que nuestra firma ya tiene éxito. Y esta línea aquí para el formulario Firm Group está vinculando este formulario específico a nuestro HTML, pero no es todo. También debemos enlazar cada campo. Aquí en todas partes tenemos este aporte. Y en realidad lo que quiero hacer aquí, quiero poner un atributo de nombre de control de formulario. Aquí enlazaremos campo específico para cada entrada. Por lo que el primero aquí será nuestro correo electrónico. El segundo es nuestro nombre de usuario, y el último es contraseña. En este caso, cuando estemos cambiando estas entradas, se actualizarán dentro de nuestro grupo de formularios aquí. Y lo último que debemos crear es en método Submit. Entonces ya lo hemos creado dentro de nuestro HTML. Aquí podemos simplemente añadir en enviar y devuelve nulo. Y ahora dentro quiero solo consola iniciar sesión Enviar coma, este formulario valores de punto. Vamos a comprobar si está funcionando. Voy a recargar al paciente que estamos recibiendo un error no se puede enlazar a formar grupo ya que no se conoce elemento de la forma. ¿ Por qué está sucediendo? Porque no inyectamos módulo de formas reactivas dentro de nuestro módulo. Entonces volvamos a saltar dentro o hacia fuera del módulo. Y aquí dentro de las entradas debemos escribir módulo de foros reactivos. Y después de esta entrada, no deberíamos conseguir la Sarah. Recarguemos la página. Como puedes ver, no tenemos ningún error. Ahora puedo proporcionar algo dentro y solo presionar Register. Y como se puede ver aquí dentro consola donde conseguir onsubmit, e-mail, nombre de usuario y contraseña, lo que en realidad significa que todos nuestros campos fueron enlazados con éxito a nuestro componente angular. 15. Página de registro: servicio + validación: En videos anteriores, creamos mercado para la página de registro y también la firma, pero aún nos falta nuestra llamada API, que debemos implementar en este video. Es por esto que En primer lugar, quiero volver a saltar dentro de nuestros, nuestros servicios, nuestro servicio, porque en realidad aquí vamos a escribir todas nuestras llamadas API y ya tenemos aquí obtener usuario actual, que vamos a pulir más tarde. Pero por ahora quiero crear registro API coal. Es por esto que aquí simplemente podemos escribir registro. Y la pregunta es, ¿qué estamos consiguiendo aquí? En realidad estamos recibiendo nuestra forma, pero aún no la escribimos en absoluto. Es por esto que no es cómodo de usar. Y no queremos escribir aquí que estamos recibiendo alguno porque no tiene mucho sentido lo que quiere este método, quiere saber lo que se proporcionó dentro. Es por esto que quería saltar de nuevo dentro nuestros tipos y crear aquí un nuevo tipo. Y podemos nombrar a este tipo de interfaz de solicitud de registro. Y se podría preguntar, está bien, Pero ¿por qué nombre tan extraño? Y en realidad no es extraño. La idea principal es el post de tiempo arreglando todo lo que estamos escribiendo respecto a solicitud y respuesta con postfix específico en este caso aquí lo sé. De acuerdo. Esta es una solicitud de registro. Por lo que este es el cuerpo de la solicitud. Si estamos hablando de respuesta de nuestro registro si es necesario, entonces sería una prueba de interfaz de respuesta registrada. En este caso, es más fácil entender para qué está utilizando esta interfaz. Ahora vamos a crear esta interfaz. Por lo que aquí quiero exportar nuestra nueva interfaz y será solicitud de registro interfaz. Lo que tendremos dentro exactamente de todos nuestros campos que escribimos dentro de un formulario. Entonces aquí tendremos nuestro e-mail, es una cadena, nuestro nombre de usuario, será también cadena. Y la última es nuestra contraseña. Y la contraseña también es cadena. Y en realidad no se trata sólo de la forma. Si vamos a mirar dentro de nuestros controladores fuente del servidor, los usuarios ya se crearon aquí un método de registro. Y dentro de nuestro método de registro, esto es lo que buscamos dentro del cuerpo. Por lo que solicita e-mail cuerpo, nombre de usuario , contraseña, y esto es exactamente lo que estamos enviando desde el cliente. Por lo que nuestro registrado solicitó que podamos saltar nuevo dentro de nuestros servicios, nuestros niveles de servicio. Aquí dentro de registro, lo que estamos obteniendo como parámetro, es nuestra solicitud de registro y nuestro tipo es interfaz de solicitud registrada que acabamos de crear. Ahora la pregunta es, ¿qué me pongo atrás después del registro, estamos recuperando a nuestro usuario actual. Esta es la forma en que aquí podemos escribir exactamente como puede obtener el usuario actual observable de la interfaz de usuario actual. Ya lo tenemos. En este caso, todo dentro nuestro método está correctamente tipeado. Ahora necesitamos crear una propiedad URL. Así que aquí URL y estamos utilizando de nuevo entorno punto un reino pagador porque es la misma slash usuarios, porque se registraron solicitud es sólo para publicar para los usuarios de barras. Y aquí ahora quiero devolver este HTTP y tenemos acceso aquí al post HTTP y dentro estamos proporcionando URL del festival. Y segundo órgano, y nuestro cuerpo es nuestra solicitud de registro. Pero de nuevo, estamos recibiendo aquí un error porque nuestro tipo es observable del objeto y no observable de la interfaz de usuario actual. Porque obviamente por defecto, HTTP post no sabe lo que queremos proporcionar insight. Aquí es donde dentro de nuestro post HTTP, debemos proporcionar lo que estamos recuperando. Y es la interfaz de usuario actual, pero no es todo, también se debe crear un método adicional para establecer el token dentro del almacenamiento local. ¿ Qué significa? En realidad cuando estamos registrando un usuario o consiguiendo el usuario, estamos recibiendo también en campo token que preparamos en el backend. Y no debemos hacer nada con este campo en el cliente, sino que solo debemos guardarlo y dicho almacenamiento local y adjuntar a cada solicitud única. En este caso, nuestro backend puede entender cuándo se autoriza la solicitud y que proporcionamos el token correcto. Aquí es donde aquí quiero agregar un token de conjunto de métodos adicionales. Y en realidad dentro proporcionaremos al usuario actual porque o bien llamaremos a este método después de conseguir un usuario actual o después del registro o guineano. Entonces aquí el usuario actual es la interfaz de usuario actual y ahora volverá nula porque en su interior simplemente queremos usar almacenamiento local. Y aquí voy a escribir artículo de conjunto de puntos de almacenamiento local. Y por dentro quiero proporcionar campo hablando y estamos escribiendo dentro del token de punto de usuario actual. Por lo que este método más simple almacena dentro de LocalStorage nuestro token de usuario actual, y ahora estamos completamente listos para ajustar nuestro componente. Así que volvamos a saltar dentro nuestro componente de registro de componentes. Y aquí tenemos en someter, y obviamente aquí se dibuja este valor firme. Queremos utilizar nuestro servicio. Es por esto que aquí quiero inyectar nuestro servicio. Por lo que estamos escribiendo de nuevo privado y tenemos nuestro servicio, que es nuestra clase de servicio de auth. Y aquí ahora dentro en presentar, podemos escribir este servicio dot registro. Y como pueden ver, nos proporcionan dentro de una solicitud de registro, pero dentro de nuestro componente solo tenemos esta forma de punto, valor de punto. Y en realidad este valor firme, como pueden ver aquí, el tipo de ello es cualquiera, por eso nos va a funcionar y realmente no podemos mecanografiarlo de ninguna manera. Entonces, ¿qué retornos registrados rápido? Es un observable. Es por esto que aquí podemos volver a escribir Subscribe con so object dentro dentro de campos que serán siguientes si es correcto o será un error. Entonces dentro a continuación, pero obtendremos bolsa de usuario actual. Y aquí vamos a hacer alguna lógica. Y si vamos a tener un error aquí, entonces debemos especificar un aeródromo. Y aquí hay una función con Era. Y por dentro podemos simplemente consolar log y estrechar. Entonces antes que nada aquí quiero escribir error, error aquí dentro de la siguiente consola log nuestro usuario actual, coma, usuario actual. Ahora vamos a comprobar si está funcionando. Te proporcionaré algún correo electrónico el cual no existe dentro de nombre de usuario y contraseña y pulsa Register. Y como pueden ver aquí está nuestra red. Estamos llegando a solicitar. En primer lugar, estamos recibiendo solicitud de opciones. Y esto es completamente normal porque usamos curso. Y tenemos una solicitud entre dos hosts diferentes porque estamos alojando nuestras aplicaciones en diferentes partes. Por lo que verás estas opciones cada vez. Es completamente normal. Pero estamos interesados en nuestra solicitud de publicación, que es la publicación de usuarios sin caminos slushy. Y aquí está nuestra carga útil. La carga útil es completamente correcta y aquí está nuestra respuesta. Como puede ver, estamos recuperando nuestro token de ID de correo electrónico y nombre de usuario, que en realidad significa que todo está funcionando bien. Y aquí estamos recibiendo a nuestro usuario actual. Pero como se puede ver antes, estamos recibiendo error, respuesta de error HTTP. Y no debería molestarte porque este es el error de esta solicitud no autorizada y lo arreglaremos en el video posterior. No le hace nada a nuestro componente de registro. Entonces como puedes ver aquí en la consola, estamos recibiendo nuestro usuario actual, lo que significa que nuestro código aquí es completamente correcto. Entonces lo que podemos hacer ahora, podemos escribir este punto y aquí tenemos nuestro servicio y podemos llamar aquí a un conjunto de método token y proporcionar insertar usuario actual. Entonces esta línea, porque tenemos aquí el usuario actual guardará nuestro token de CurrentUser en el almacenamiento local, pero no es hold. También queremos guardar un usuario para toda la aplicación, y ya estamos preparados antes para el mismo método dot set currentUser. En el interior. Simplemente podemos proporcionar nuestro CurrentUser y escuchar este método. Simplemente establecerá este usuario actual en la corriente de usuarios actuales. Verás cómo usar el flujo de usuario actual en videos posteriores. Lo más importante, que ahora después del registro, lo establecimos en Target y nos sentamos en un CurrentUser dentro de nuestra aplicación. Y lo último que queremos implementar es nuestra validación. Porque en realidad si vamos a obtener un error, queremos mostrarlo. Poreso aquí. En primer lugar, quiero escribir nuestro error porque sabemos qué es. Es una respuesta de error HTTP. Y aquí estamos recibiendo nuestro error y podemos escribir aquí punto Azure por lo menos. Y sí, esta flecha será cualquiera, pero aún así es mejor que nada. Pero queremos hacer ahora queremos salvar nuestro error aquí. Ahora la pregunta es, en qué formato obtendremos nuestros errores. Y para este segundo abrir de nuevo, nuestros controladores, usuarios. Y como pueden ver aquí está nuestra captura. Y lo que estamos haciendo en esta línea, estamos mapeando a través de nuestros errores y estamos recibiendo mensajes como una matriz de cadenas, lo que en realidad significa que estamos seguros de que si estamos recibiendo un error, siempre es una matriz de cadenas. Es por esto que lo que podemos hacer en nuestro cliente dentro del componente de registro, podemos generar un mensaje de error y mostrarlo aquí. Esto es y Lo que quiero hacer aquí, quiero crear solo un solo error y será de tipo cadena encendido ahora. Y por defecto será ahora porque no tenemos ningún error. Ahora aquí dentro de nuestro error, podemos escribir esta era de puntos. Sabemos que aquí estamos recibiendo nuestro error dentro como una matriz. Es por esto que aquí podemos simplemente crear Azure dot dot join aquí se convertirá en un espacio, lo que en realidad significa que queremos unir todos nuestros errores con coma y espacio, y será solo un solo campo. Ahora, quiero saltar dentro de un componente de registro HTML aquí donde tenemos errores de clase div. Quiero escribir y GE y mostrar este campo solo cuando tenemos un error y dentro ellos simplemente pueden renderizar nuestro error. Ahora vamos a comprobar si está funcionando. Pero como puedes ver aquí, estamos recibiendo un error que no puede enlazar a G si no se conoce propiedad de div. Y está sucediendo cuando no inyectamos un módulo común dentro de nuestro módulo. Aquí es donde aquí dentro de las importaciones debemos ingresar módulo común desde Angular. Ahora como pueden ver, no estamos recibiendo ningún error. Y lo que quiero hacer, quiero proporcionar datos no válidos. Por ejemplo, dentro del correo electrónico, proporcionaré datos y no formato incorrecto. Ahora limpiemos todo y golpeemos Register. Y como pueden ver aquí, estamos recibiendo nuestro error. Y esta es una matriz con correo electrónico no válido. Y estamos renderizando este correo electrónico inválido aquí en la parte superior, lo que en realidad significa que correctamente se reacciona azure y Don éxito de registro de nuestro usuario. Ahora, vamos a comprobar si realmente estamos seguros hablando después del registro. Aquí es donde se Recargue la página y proporcione correo electrónico correcto, nombre de usuario, contraseña, y pulsa aquí registrarse. Como puedes ver, tenemos a nuestro usuario, lo que en realidad significa que empezamos en la memoria. Pero aquí cuando soy campeón dentro de la aplicación de almacenamiento local, se puede ver nuestro token y aquí hay un valor, lo que en realidad significa que implementamos con éxito el registro del usuario y almacenamos el token dentro de localStorage. 16. Página de inicio de sesión: En video anterior, terminamos con éxito nuestra página de registro. En este video, debemos implementar página de inicio de sesión. Y creo que esta es una idea increíble que intentes implementarla por tu cuenta. Entonces, ¿qué necesitamos implementar en esta página? En realidad página de inicio de sesión es simplemente URL slash login y vemos exactamente el mismo formulario como registro, pero formulario de inicio de sesión. Entonces en realidad solo tenemos un correo electrónico y contraseña y no tenemos nombre de usuario. Obviamente todos los textos son diferentes, pero esencialmente así es. También utilizaremos la otra solicitud seguir los juegos en slushy pie slash usuarios slash login. Y aquí tengo tres niveles de complejidad para ti. En primer lugar, puedes pausar este video ahora mismo e intentar implementarlo tú mismo. Segundo nivel es que estás recibiendo alguna orientación de mí antes de empezar a implementar. Entonces, ¿qué tenemos que hacer en absoluto? En primer lugar, como pueden ver aquí, componentes de adentro hacia afuera, tenemos un componente de registro. Y como dije antes, con no quiero compartir componente entre registro e inicio de sesión, lo que en realidad significa que podemos implementar el nuevo componente login con exactamente el mismo marcado, pero sin nuestro nombre de usuario y nuestro archivo ts será super similar. Necesitamos un formulario, necesitamos onsubmit y así sucesivamente. Pero la principal diferencia habrá en un servicio, no usaremos nuestro servicio que se registre, sino que debemos crear un método login, lo que en realidad significa que debemos en nuestro servicio aquí, crear una solicitud de inicio de sesión, que hará una llamada a la API. Y en realidad será súper similar a nuestro registro. Pero aquí estamos debemos crear solicitud no registrada, sino interfaz de solicitud de inicio de sesión. Y luego dentro debemos proporcionar una URL correcta si quieres probarla tú mismo. Ahora, solo pausa el video aquí. Y si no quieres probarlo por tu cuenta, Hagámoslo juntos. Y nuestro primer paso será crear la interfaz para nuestro servicio. Por lo que aquí tenemos nuestra interfaz de solicitud de registro. Y en realidad como puedes ver, aquí tenemos tres campos, así que no podemos reutilizarlo dentro de login. Pero quiero hacer aquí, quiero crear una nueva interfaz, interfaz solicitud de inicio de sesión. Saltemos dentro de este archivo y podemos copiar pegar completamente nuestra interfaz de solicitud de registro, solo porque será súper similar y no quieren escribir mucho. Por lo que aquí debemos crear nuestra interfaz, interfaz de solicitud de inicio de sesión. Y tenemos dentro de correo electrónico y contraseña, y no tenemos nuestro nombre de usuario. Por lo que creamos con éxito nuestra interfaz. Ahora podemos saltar de nuevo dentro nuestro servicio y podemos copiar pegar método de registro completamente porque voy a iniciar sesión método será super similar. Vamos a nombrar nuestro método de inicio de sesión. Y aquí no obtenemos solicitud de registro, sino nuestra solicitud de inicio de sesión, aquí necesitamos otra interfaz que acabamos de crear. Es interfaz de solicitud de inicio de sesión. Y de vuelta estamos recibiendo nuestro usuario, que significa que es correcta, interfaz de usuario actual observable. Ahora aquí está la URL. Tenemos aquí API URL slash users slash login. Y esta API ya estamos implementadas dentro de nuestro backend. de sesión es sin duda una solicitud de publicación, lo que significa que aquí debemos proporcionar una publicación con solicitud de inicio de sesión del cuerpo que establecemos como parámetro y nuestro servicio de inicio de sesión está completamente implementado. Nuestro siguiente paso será crear un componente aquí y en realidad tiene este conjunto de componentes de registro es super similar a nuestro componente de inicio de sesión. No tiene ningún sentido volver a escribir todo por su cuenta. Es por esto que quiero copiar toda la carpeta y pegarla aquí y renombrar la carpeta login. Ahora tenemos componente login. Debemos renombrar aquí páginas. Por lo que será login dot component dot HTML. Y aquí login dot component dot ts. Nova debe saltar dentro de nuestro HTML y cambiarlo un poco y no será tan diferente. En primer lugar, aquí, en lugar de registrarse a Trello, podemos escribir login al trailer. Ahora nos vamos de aquí error, igual que los teníamos. También hubo necesidad de presentar formulario y aquí tenemos correo electrónico, nombre de usuario. No necesitamos el alto, podemos quitarlo. Contamos con nuestra contraseña. Y ahora aquí está el botón de enviar, no con registro, sino que iniciamos sesión, por ejemplo, por último pero no menos importante es el enlace del router aquí en la parte inferior, debería ir a una página de registro. Aquí es donde aquí está el registro de slash. Y en lugar de este texto, podemos escribir en su interior apuntarse a una cuenta. Por lo que cambiamos con éxito nuestro HTML. Ahora saltemos a nuestro archivo TypeScript. En primer lugar, debemos cambiar nuestro selector. No está registrado, pero nuestro login y template es el componente login HTML. Ahora ClassName también es diferente. Es componente de inicio de sesión Live era tal y como es. Y aquí está nuestra forma. Necesitamos correo electrónico y contraseña, pero no un nombre de usuario. Así que vamos a eliminar nombre de usuario aquí. Nuestro constructor sigue siendo el mismo. Nuestro onsubmit se queda casi igual. Pero aquí no usaremos método de registro. Creamos un método de inicio de sesión donde dentro donde se proporciona el formulario completo. Y aquí tenemos subscribe y si somos exitosos login, entonces aquí tenemos el log de la consola y el usuario actual donde se establece en hablar y estamos configurados en el usuario actual, lo que en realidad significa que es 99% exactamente el mismo código como el registro interno. Y nuestro último paso aquí será registrar nuestros componentes. Por lo que debemos saltar dentro de nuestras lágrimas de módulo. Aquí dentro de declaraciones, debemos decir que tenemos un nuevo componente y es componente login. Y también estamos debemos crear aquí una nueva ruta. Por lo que voy a copiar pegar la ruta de registro y esa ruta login y componente será componente login. Vamos a comprobar si está funcionando. No tenemos flechas aquí dentro de observador. Recargaré la página e intentaré saltar aquí en la parte inferior, por ejemplo, en la página de inicio de sesión. Y como se puede ver en donde en slash login. Y aquí está nuestro formulario y podemos recargar la página donde mancha en esta página, todo está bien. Ahora intentemos si podemos iniciar sesión en absoluto. Entonces aquí, antes que nada, quiero escribir algo incorrecto. Aquí hay algún correo electrónico que no existe. Y luego alguna contraseña. Yo estoy golpeando aquí diciendo en, y estamos recibiendo un error, como se puede ver aquí antes, estamos consiguiendo foto a error con validaciones. Y dentro de nuestro error donde conseguir correo electrónico lleno o contraseña, correo electrónico incorrecto una contraseña. Y estamos haciendo esto en este caso porque no queremos notificar al usuario lo que exactamente no es correcto. No deberíamos decir algo como este correo electrónico ya está tomado. Simplemente decimos que es inválido. Es por ello que esta lógica dentro del componente login del trabajo óseo. Y sólo para recordarles aquí copiamos pegados en enviar y aquí dentro de un error con unidos nuestros errores, porque en el caso en página de Registro teníamos aquí una matriz de cadenas. Aquí no lo tenemos con ver directamente una flecha, correo electrónico, una contraseña, lo que en realidad significa aquí en lugar de la unión, podemos escribir era Dodd correo electrónico o contraseña. En este caso, lo aplicaremos correctamente área interior. Vamosa comprobar el sonido. Estoy recargando la página. Vamos a escribir aquí algún correo electrónico que no existe, alguna contraseña de inicio de sesión y estamos recibiendo correo electrónico incorrecto una contraseña, lo que significa que nuestra validación está funcionando correctamente. Ahora intentemos iniciar sesión con credenciales correctas. Por lo que aquí tengo lleno en gmail.com y aquí está nuestra contraseña 123. Yo estoy golpeando aquí, digamos mezquino, y estamos consiguiendo usuario actual. Pero el principal problema es que nos quedamos en esta página. Y en segundo lugar, no quitamos en absoluto esta zona. Y en realidad podemos hacer ambas cosas simultáneamente. En primer lugar, lo que quiero hacer aquí al presentar, podemos quitar la Sarah. Entonces aquí, este error del dólar lo podemos escribir dentro ya. Y en realidad puedo decir ahora que el nombre de la era no es el mejor porque en realidad el error es super genérico y les gustaría cambiar es super genérico y les gustaría cambiar este nombre aquí de era a mensaje era por ejemplo, en este caso, tenemos que cambiarlo aquí dentro siguiente y aquí dentro era. Y después de esto, debemos saltar a la plantilla y cambiarla allí también. Entonces aquí tenemos a Angie si error, debería ser mensaje de error. Aquí estamos renderizando nuestra era. Y creo que este enfoque es mucho más limpio porque nos da entender lo que estamos renderizado aquí. No es algún error genérico. Esto es realmente un mensaje de error. Ahora debemos aplicar exactamente lo mismo dentro de nuestro registro. Entonces volvamos a saltar dentro de nuestro registro. Y aquí en primer lugar, quiero escribir mensaje de error. Aquí también está el mensaje de error y luego decir archivo ts, quiero cambiar flecha dos mensaje de error aquí, mensaje de error correcto dentro de era, y queremos configurarlo ahora en nuestro éxito. Entonces aquí este mensaje de error equivale ahora, lo último que queremos hacer, queremos redirigir al usuario a otra página. No tiene ningún sentido que nos quedemos en esta página y lista, queremos saltar a la página de inicio después de iniciar sesión en un usuario. Para ello, debemos inyectar aquí nuestro router. Este es mi constructor de insertos. Puedo escribir router privado igual router. Y como se puede ver, este router viene de angular-ui-router. Y ahora aquí dentro del éxito, en la última línea, podemos escribir este punto, punto navegar por URL. Y estamos proporcionando aquí URL, por ejemplo, solo slash. Y ahora debemos hacer exactamente lo mismo dentro de nuestra página de inicio de sesión. Entonces estoy saltando dentro del componente de inicio de sesión aquí. En primer lugar, quiero inyectar router Zhao privado. Y después de esto, puedo pegar esta línea, esta ruta navegar por URL slash, lo que en realidad significa en ambos casos, con registro e inicio de sesión, queremos rechazar a nuestro usuario a la página principal. Vamos a comprobar si está funcionando. Estoy aquí en la página de inicio de sesión Estoy escribiendo aquí f2 en gmail.com, aquí 123. Estoy golpeando inicio de sesión y luego campeón a la página de inicio, lo que en realidad significa que implementamos con éxito nuestra página de inicio de sesión. 17. Página de inicio: En videos anteriores, terminamos nuestra página de inicio de sesión. En este video, implementaremos nuestra página principal para el proyecto. Y el punto principal es que esta página será solo marcado y ninguna lógica en absoluto. ¿ Por qué es eso? Porque en realidad esta página es solo para usuarios anónimos si estamos bloqueados pero nunca vemos esta página porque estamos directamente redirigidos página de tableros de insight. Entonces, antes que nada, implementemos en tu módulo. Y para esto dentro de la app, quiero crear un nuevo módulo que se llama Home, que en realidad significa que este es un módulo completamente separado. No tiene nada que ver con las horas, y solo hay un componente de página de inicio dentro del cual está aislado dentro de este módulo. Entonces vamos a saltar dentro de esta carpeta y crear nuevo archivo Inicio módulo Ts. Y muchos estudiantes me preguntan muy a menudo por qué no usan generadores junto con Angular. Y en realidad hay una razón para ello. Encuentro que lleva más tiempo usar un generador luego solo copiar pegar el módulo si es necesario hacerlo, y también para el proceso educativo, que lo recuerdes mejor. Lo estoy escribiendo desde cero. Esto es y Vamos a crear un módulo home una vez más desde cero. Y cada siguiente módulo sólo copiaremos y pegaremos. Esto es lo que queremos hacer aquí. Queremos crear una nueva clase y llamémoslo módulo home. Después de esto, debemos inyectar aquí un decorador en módulo GI. Y dentro debemos proporcionar nuestras dependencias, al menos aquí dentro de las entradas, debemos proporcionar módulo común porque lo necesitamos dentro de cada módulo individual. Por ejemplo, para bucles como en G4, ofreciendo G If ahora, vamos a crear nuestro componente de hogar para esta biomasa, crear un nuevo directorio de componentes. Y por dentro queremos crear una nueva carpeta home. Y sí, entiendo que solo tenemos un solo componente aquí y no tiene mucho sentido crear componentes de slash que la carpeta Home dentro. Pero sin embargo, es una buena estructura. Y si no necesitabas dividir esta página principal en diferentes componentes, seguro que puedes hacerlo. Así que vamos a saltar dentro de casa y crear aquí home component dot HTML y home component dot ds. Ahora saltemos dentro de la página HTML y simplemente vayamos a casa aquí, pero no necesitamos nada, solo algo para probar. Ahora saltemos dentro de nuestro archivo ts. Y aquí queremos crear nuestra clase y es componente casero. Después de esto, debemos registrar nuestros componentes. Entonces aquí queremos inyectar nuestro componente y por dentro debemos ante todo proporcionar un selector. Entonces aquí simplemente usaré un selector de casa porque no tiene mucho sentido prefijo nuestro componente de casa con nombre de módulo como home, home, simplemente no es necesario después de nuestro selectivo debemos proporcione aquí en la URL de la plantilla y luego diga URL de plantilla, tendremos HTML componente home. Y nuestro último paso aquí es agregar nuestro componente a nuestra declaración. Por lo que dentro de módulo de casa aquí, queremos crear declaraciones y poner dentro de nuestro componente de hogar. Todo se ve bien aquí, pero no creamos una ruta. Es por esto que aquí quiero crear una propiedad rutas. Y podemos decir que se trata de rutas de tipo y esto es una matriz con una sola clave. Y aquí estará nuestro camino. Esta es una cadena vacía, significa página de inicio, y aquí está nuestro componente, y nuestro componente será componente home. Después de esto, podemos registrar esta ruta dentro de las entradas. Por lo que aquí estará el módulo de ruta punto para rutas infantiles. Y ahora no debemos olvidar registrar nuestro módulo de casa dentro de nuestro módulo de aplicaciones. Es por esto que quiero volver a saltar dentro de nuestro módulo de aplicaciones. Aquí, insider en las aves, podemos agregar nuestro módulo de casa. Todo se ve bien. No veo ningún error dentro de observador. Entonces abramos un navegador y aquí está nuestra página de inicio. Como puede ver, aquí se representa la palabra home, lo que en realidad significa que creamos con éxito todo nuestro módulo y componente vacío. Y ahora simplemente debemos tratar de marcar para toda la página. Esta es mi, vamos a saltar de nuevo dentro de los componentes home, home, home component HTML. Aquí, empieza a escribir nuestro marcado. Nada especial aquí, solo un montón de elementos DOM. Por lo que aquí tenemos cabecera con cabecera de casa de vidrio. Y ahora vamos a cerrar este encabezado. Entonces lado queremos crear un enlace a nuestra página de inicio. Por lo que aquí habrá una slash de enlace de router. Y aquí tenemos clase a casa tenía un enlace a domicilio. Cerremos la venta y dentro del doble enlace para mostrar una imagen. Entonces aquí tendremos fuente de imagen slash, etc, slash Trello, el logo, el punto blanco SVG. Y vamos a cerrar esta imagen. Como se puede ver en el navegador, se aplica. Y aquí vemos nuestro encabezado y enlace a nuestra página principal. Ahora debemos proporcionar enlaces a la página de inicio de sesión y registro. Es por esto que después de una, podemos escribir div. Y dentro de div podemos escribir dos enlaces. En primer lugar, aquí, dentro de div tendrá un enlace de router a nuestro login de slash que acabamos de crear con clase WHO tenía un login, voy a cerrar la venta. Y justo dentro de login, ahora podemos copiar pegar este link y aquí tenemos slash register. Aquí está el registro de cabecera de la casa de clase, y también se registrará el texto en su interior. Vamos a comprobar si está funcionando, como puedes ver en el navegador aquí a la derecha, tenemos enlace de inicio de sesión y enlace de registro. Ahora, digamos el primer bloque de nuestra página. Por lo que aquí estará div, héroe de casa de clase. Vamos a cerrar este div y dentro queremos agregar un contenedor home class div. Vamos a cerrar este div. Y dentro de casa contenedor tenemos un div. Y dentro de este div estará la etiqueta H1. Y aquí tenemos clase a casa título Desh. Vamos a cerrar este H1 y dentro de cada uno quiero pegar. A pesar de que el texto preparado ayuda a los equipos a trabajar de manera más colaborativa y hacer más después de cada uno tenemos p tag. Esta es nuestra descripción. Aquí debe estar la descripción de la casa de cristal. Y dentro de esta p pegaré la descripción sobre tableros de Trello, listas, y actual. Después del primer div, tendremos un segundo div. Vamos a cerrarlo. En el interior. Debe ser una imagen. Porlo que aquí estará la fuente de imagen slash ácidos slash hero dot SVG. Y vamos a cerrar esta imagen y comprobar si está funcionando. Estamos saltando dentro del navegador. Y como pueden ver aquí, tenemos una primera sección de nuestra página principal. Aquí a la izquierda tenemos texto y bonita imagen a la derecha. Creo que se te hace una idea de cómo funciona la tasa y los blogs para la página principal. Como puedes ver, simplemente tenemos tal título de blog, descripción e imagen, lo que en realidad significa que quieres acelerar el proceso de creación de la inicio porque esto es solo un HTML sin ninguna lógica. Por lo que aquí quiero pegar el segundo blog home team. Si lo desea, simplemente puede pausar el video, volver a escribir todo, o simplemente puede tomar el HTML de la página principal del código fuente debajo del video. Entonces lo que tenemos aquí, tenemos equipo de casa, contenedor de equipo contenedores en casa dentro. Hemos trabajado con cualquier equipo, alguna descripción y una imagen. Vamos a comprobar cómo se ve. Aquí. Después de nuestro primer elemento, tenemos el segundo con texto y ahora la imagen. Vamos a crear ahora un bloque más aquí. Estoy pegando información del hogar. Mismas cosas aquí tenemos clases en imagen que H1 y p. Echemos un vistazo a esto. Estoy recargando la página y tenemos aquí en la parte inferior un bloque más con una imagen y textos. Y ahora peguemos nuestro último bloque. Como pueden ver, es un poco más grande. Tenemos aquí algo sobre flujo de trabajo y automatización. Aquí tenemos la descripción H1 y también la lista de viñetas. Y a la derecha tenemos una imagen como siempre, como pueden ver aquí a la derecha tenemos una imagen y a la izquierda tenemos en primer lugar una descripción del título y luego una lista de viñetas, que en realidad significa que hemos creado con éxito nuestra página de inicio. No era algo especial, sólo un marcador para usuario no iniciado sesión. 18. Interceptor de Auth: En video anterior, creamos con éxito nuestra página de inicio, pero ahora solo tenemos un solo problema. En realidad estamos implementados consiguiendo del usuario tras página mucho en solo para recordarle, dentro de nuestra aplicación de conocimiento del cliente, los componentes de la aplicación, estamos llamando a nuestro servicio obtener usuario actual. Y en realidad ahora siempre estamos recibiendo un error aquí y no autorizado. Y en realidad si voy a saltar a la página de registro y simplemente crear alguna cuenta que no existía anteriormente. Como se puede ver después del registro donde hay reaccionó a la página principal. Y dentro del almacenamiento local, tenemos este token. Esto es lo que lo configuramos desde el back-end para autenticar a nuestro cliente. Pero después recargar la página. Este token no se usa y estamos llegando aquí sin autorización. Y la idea es básicamente que el cliente de torre debe en cada solicitud, aplicar este token desde el almacenamiento local si lo tenemos, en este caso, nuestro backend sabe cuándo fueron autorizados, pero imagínense si rara vez necesitamos ir dentro de cada método, como por ejemplo, obtener usuario actual y que tiene algo de pelo de almacenamiento local. Esto no es deficiente, consume mucho tiempo, y realmente queremos simplemente agregar este token en cada solicitud. Para esto dentro del Angular, tenemos middlewares. Es por esto que ahora vamos a crear un middleware ahora. Entonces, ¿qué es Middleware? Esto es algo en el medio entre iniciar nuestra solicitud y, y, y en realidad aquí tenemos, por ejemplo, el HTTP GET y vamos a crear un middleware. Significa que después de que se inicie esta solicitud, pero no fue enviada aquí. Queremos aplicar middleware, así que queremos hacer algo. Por ejemplo, se necesita un encabezado allí. Es por esto que quiero saltar dentro nuestros servicios de casa y crear aquí en su horario de atención, interceptor, DOD servicio dot ts. Y será sólo una clase, igual que el servicio inyectable normal. Aquí tenemos expertos, horas de clase, interceptor, y aquí debemos decir implementa interceptor http. Entonces la idea principal es que este middleware en Angular se llame interceptivo porque intercepta nuestra petición. Y aquí estamos escribiendo implementa interceptor http para obtener un interceptor de casa de clase estrecha implementa incorrectamente la interfaz y falta intercepción de propiedad, y esto es exactamente lo que debemos crear con el fin de implementar este middleware. Es por esto que aquí vamos a crear un nuevo método que se llama interceptar. Y como pueden ver aquí, mi autocompletar ya recibió solicitud y siguiente, y devuelve el evento HTTP de oficina observable, lo que en realidad significa que tenemos un acceso completo a o solicitud aquí dentro de la propiedad request. Y llamaremos a continuación cuando estemos listos y terminemos todo lo que tenemos que hacer aquí. Es por esto que en primer lugar, lo que queremos hacer en el interior es obtener un token de nuestro almacenamiento local. Entonces escribamos aquí que tenemos un target y este es el almacenamiento local get item. Y por dentro estamos proporcionando token. Después de esto aquí quiero escribir solicitud iguala solicitud clon. Y aquí dentro estamos proporcionando un objeto con cabeceras de conjuntos de campos. La información de que los encabezados es un objeto que estamos proporcionando autorización equivale a hablar o cadena vacía. Y después de esto estamos llamando de vuelta al lado de la manija y nos proporcionaron dentro de nuestra solicitud. Entonces lo que este código está haciendo en absoluto, antes que nada, aquí tenemos un token de Google Search. Por lo que o bien es un indefinido o es un token válido. Ahora aquí estamos haciendo solicitud clon. ¿Por qué lo estamos haciendo? Debido a que la petición es inmutable, realmente no podemos cambiarla. Aquí es donde debemos colonia para poder poner algo. Aquí estamos usando propiedades set header para establecer un encabezado. El encabezado se llama autorización y en su interior estamos proporcionando nuestro token. Entonces si no tenemos un token, estamos diciendo aquí una cadena vacía. Y después de esto estamos llamando al siguiente handle, lo que esencialmente significa que debemos continuar nuestra solicitud y estamos proporcionando solicitud actualizada en su interior. Entonces así es como estamos creando middlewares o interceptores dentro de Angular. Pero ahora debemos inyectar este interceptor fuera dentro de nuestra aplicación. Pero lo principal pero queremos hacer para que uno inyecte hacia fuera interceptor, no módulo de adentro hacia afuera, sino dentro del módulo de aplicación porque queremos hacerlo a nivel global para inyectar interceptor, estamos usando proveedores aquí. Entonces, lo que queremos hacer dentro de esto proporciona un objeto con campo proporcionar, y aquí estamos usando interceptores HTTP. Viene de Angular también estaban justo aquí usan clase. Y esta es nuestra clase, nuestro interceptor, que acabamos de crear. Y el último se mueve a verdadero. Y así es exactamente como debemos proporcionar interceptores http dentro de Angular. Entonces aquí estamos diciendo que debemos registrarnos y tú proporcionaste y es un interceptor http y debemos usar nuestro interceptor de horas de clase. Ahora vamos a comprobar si está funcionando. Estoy recargando la página y revisemos dentro de la red, nuestro usuario de solicitud. En realidad aquí quiero desplazarme hasta el fondo. Aquí podemos ver autorización y nuestro token, que en realidad significa nuestra intercepción, está funcionando correctamente. Y aplicamos directamente este encabezado de autorización a cada solicitud, por ejemplo, para obtener un usuario actual. Pero todavía estamos recuperando nuestro error 401 y en realidad saben cuál es el problema. Si vamos a mirar dentro de almacenamiento local, podemos ver que token simplemente un objetivo, esto es sólo un valor. Pero si vamos a saltar de nuevo dentro de nuestro backend aquí, dentro de la fuente, middlewares, búhos. Y aquí es donde estamos revisando un token aquí como se puede ver donde haciendo dividido por un espacio. Porque como dije anteriormente estaban justo en cerveza y luego espacio hablando. Si estamos usando una autenticación DVT, este no es nuestro caso aquí. No tenemos aquí una palabra, cerveza, y este es exactamente nuestro problema. No lo implementamos, y debemos hacerlo cuando estamos devolviendo un token al cliente. Entonces aquí dentro de servidores fuente controladores, usuarios, cuando generamos torque aquí, dentro de usuarios normalizados, debemos escribir aquí espacio. Aquí tenemos tren de justicia, donde dentro, donde justo, y cerveza. Y aquí estamos inyectando nuestro token que generamos. Vamos a comprobar si está funcionando. Por lo que nuestro token no es válido, simplemente lo eliminarán y saltará a la página de registro. Ahora sólo quiero poner algunas credenciales aquí y golpear registro. Y ahora cuando estamos revisando nuestro almacén local, se puede ver que tenemos cerveza que espacio y estamos hablando. Es por esto que cuando recargo la página con don't get for 01 error más, estamos recibiendo aquí nuestra respuesta. Y en realidad aquí puedes ver que nuestro usuario de solicitud es 200 y nuestra respuesta es exactamente lo que esperábamos, cómo está funcionando. Una vez más, nos estamos registrando, por ejemplo, o iniciando sesión y configurando un token dentro del almacenamiento local. Así Birra espacio y el token luego cada vez que estamos haciendo una solicitud fuera interceptor dentro de Angular, se adjunta dentro de cabecera, este token de autorización. Y aquí tenemos oso y luego nuestro token y nuestro back-end comprueba a este usuario y nos da una respuesta aquí. Es por esto que cada vez que recargamos la página, estamos recuperando a nuestro usuario actual. Y esto es exactamente lo que queríamos lograr. Ahora aquí dentro de nuestros clientes fuente AB, AB componente, sí, quiero hacer una pequeña mejora porque en realidad aquí hemos anunciado servicio, pero no usamos este Ras y en realidad ahora estamos recibiendo un usuario por lo que podemos escribir aquí no trans, pero este es el usuario actual. Y en lugar de log de consola, queremos configurarlo con el método que ya estamos preparados. Entonces aquí tenemos esto, nuestro punto de servicio establece usuario actual, y en su interior estamos proporcionando a nuestro usuario actual. Por lo que ahora nuestro usuario se registra con éxito dentro de nuestra aplicación. 19. Guardia de la autora: En este video, quiero hablar de Gvd en nuestras URLs, lo que en realidad significa, por ejemplo, no debemos permitir que el usuario salte a la página principal. Si ya está encerrado, debe saltar directamente al tablero. Por ejemplo, si no estamos encerrados y estamos tratando de saltar a la página del tablero, entonces cuando no se permite dentro y debemos ser redirigidos a la página principal. Por lo que hay diferentes enfoques a este problema. Pero para cualquier caso de uso, te recomiendo encarecidamente que comiences por crear un observable de estaño islámico. Hagamos esto ahora. Por lo que en realidad quiero saltar dentro de nuestra aplicación, nuestros servicios, nuestro servicio aquí se creará corriente de usuarios actuales. Y como dijeron, esto está recortado que podemos usar desde cualquier lugar de nuestra aplicación. Y solo para recordarte, estamos usando aquí configurar usuario actual para cambiar la transmisión. Así que esencialmente lo que podemos hacer ahora por ejemplo, dentro de nuestro componente de aplicación en algún lugar aquí después en junio en él, podemos escribir este punto, nuestro servicio punto usuario actual aquí tenemos razón y subscribe board, y estamos recibiendo aquí nuestra respuesta. Y ahora solo quiero escribir aquí registro de consola. ¿ Entonces ves de lo que estoy hablando? Por lo que aquí nos suscribimos al stream desde nuestro servicio. Y ahora cada vez que cambiamos nuestro flujo, estamos recuperando estos datos dentro de ese componente. Vamos a comprobar en navegador ahora. Y estamos consiguiendo aquí dos bitácoras de consola. En primer lugar raza y definirlo, y luego Ras y la información sobre nuestro usuario, por qué está sucediendo así al principio de la corriente es indefinida porque no lo hicimos usuario pescado todavía. Pero después de algún tiempo cuando nuestra llamada CurrentUser esté terminada y sea exitosa, estamos configurando este CurrentUser dentro de este flujo. Es por esto que cada lugar donde nos suscribimos a este usuario actual puede obtener esta información. Y esta es exactamente esta información. Pero podemos hacerlo aún mejor porque esencialmente queremos comprobar si están encerrados o no. Esta es la razón por la que normalmente quieres tomar esta respuesta y quieres convertirla a booleana y comprobar si es verdadera. En este caso, estamos encerrados, pero no queremos escribir este código en cada lugar. Aquí es donde podemos dentro de nuestro, nuestro servicio crear flujo adicional basado en nuestro primer flujo. Entonces aquí está nuestro usuario actual de Stream. Pero ahora quiero crear una nueva corriente, que se llama es logger tin. Y ahora dentro de nuestra aplicación en cualquier lugar que podamos usar, nuevo stream es log team. Entonces, ¿qué hicieron ahí? Aquí estamos usando a este usuario actual y esto ya es un stream. Simplemente queremos transformarlo a otro valor. Aquí es donde estoy justo en tubería DOD, luego función Mapa del sitio. Y si no sabes este es el código de RIX JS. Entonces esencialmente estamos usando looks chess y le decimos a Angular para transformar nuestros streams. Y lo estamos usando de esta manera. Siempre estamos escribiendo dot pipe y luego la lista de nuestras transformaciones. Aquí es donde verás esa tubería por todas partes y aquí dentro donde usando mapa para mapear nuestros datos. Entonces sabemos que dentro de nuestro mapa podemos conseguir tres estados diferentes, indefinidos, falsos y verdaderos. Pero el punto principal es que nuestra aplicación no le importa indefinido. Fue relevante comprobar es login. Si tenemos esta información, si aún no tenemos esta información, entonces solo queremos esperar esta información. Esto es mucho antes de que quiera omitir este indefinido como propiedad. Aquí es donde aquí podemos usar filtro antes de nuestro mapa. Y el filtro también es una función. Así que esencialmente, en primer lugar, estamos usando filtro dentro de tubería y luego un mapa. Entonces, lo que estamos obteniendo filtro de penetración dentro del filtro al obtener nuestro usuario actual, y en realidad este usuario actual puede ser indefinido ahora o nuestro usuario actual. Y aquí no queremos venir al mapa si está indefinido lo, es por esto que aquí podemos escribir usuario actual no lo iguale indefinido. Entonces en este caso, vendremos aquí y aquí está nuestro mapa. Entonces lo que queremos hacer mapa de inserción, donde me meto aquí, usuario actual. Aquí queremos simplemente convertirlo a booleanos para que podamos escribir aquí booleano y luego usuario actual. En este caso, esta lógica nos traerá de vuelta verdadero o falso, y nos saltaremos esto, lo indefinido que no necesitamos y no usaremos dentro de nuestra aplicación. Pero podemos simplificar aún más este código. En lugar de vuelo y esta lógica puede establecer mapa, podemos simplemente escribir aquí booleano, y va a hacer exactamente lo mismo. Por lo que R es mirada en estaño es una nueva corriente basada en el usuario actual, que volverá para nosotros verdadero o falso. Vamos a comprobar si está funcionando. Volveré a saltar en el componente de configuración. Y aquí quiero escribir este punto o punto de servicio está encerrado. Aquí también podemos escribir Suscríbete y nuestras cabezas y nuestro descanso estará encerrado. Entonces echemos un vistazo a esto. Incluso podemos nombrarlo para que sea más comprensible, está conectado. Y aquí vamos a la consola log es log of tin, coma es propiedad login. Vamos a guardar esto y comprobar y navegador. Estoy recargando la página y aquí no vemos que el Islam se vuelva indefinido. Se. Simplemente vemos que aquí es baja consiguiendo pasar porque este es el primer estado donde tenemos verdadero o falso. Y esta es exactamente la forma en que podemos usar en cualquier lugar de nuestra aplicación, esta corriente para saber si el usuario está conectado o no. Entonces ahora quiero eliminar este código porque aquí no lo necesitamos. Fue sólo para probar. Y ahora quiero mostrarte la solución más fácil, cómo puedes redirigir usuario a otra página. Y simplemente podemos comenzar con nuestro componente home, porque esencialmente aquí queremos redirigir al usuario a la página del tablero si ya está bloqueado, cómo podemos hacerlo. En primer lugar, aquí, debemos inyectar dentro constructor nuestro, nuestro servicio. Por lo que aquí se anuncia el servicio de horario privado, servicio que ya tenemos. Ahora aquí queremos escribir implementos sobre necesarios, por lo que hemos inicializado. Ahora aquí vamos a utilizar la ingeniería en ella. Y dentro ahora podemos escribir exactamente esta lógica Lake Road dentro de nuestro componente de aplicación. Entonces aquí estará este punto, nuestro punto de servicio. Aquí tenemos está encerrado. Por lo que después de esto podemos escribir Suscríbete y podemos llegar aquí es log it in propiedad aquí dentro de esta suscríbete ya sea get true o obtenemos false. Y si entra aquí cierto, queremos redirigir al usuario a la página del tablero. Aquí es donde sólo podemos probarlo. Eva es como una lata. Entonces queremos redirigir al usuario. Y para intentar redirigir, podemos usar como usábamos anteriormente, router. Entonces aquí vamos a crear un nuevo router de propiedad privada. Y este router, ahora dentro de nuestra condición if, podemos escribir este punto, punto navegar por URL. Y aquí sólo podemos proporcionar tablas de barras. Y en realidad aún no implementamos estas tablas de corte, pero no importa. Simplemente lo hacemos como ejemplo, cómo puedes restringir el acceso a las URLs. Echemos un vistazo a esto. Y en realidad aquí ya nos sale un error, no puede igualar unas nuevas rutas. Y aquí están las tablas. Y esencialmente podemos comprobarlo, por ejemplo, con slash register. Para entender que está funcionando, voy a volver a cargar la página y como se puede ver en donde en slash registre, por qué está pasando donde saltando a la página principal, estoy golpeando Enter y ni siquiera vimos nuestra página de inicio donde se registran directamente dentro. Entonces esta es la forma más fácil de cómo se puede implementar en digamos, el redireccionamiento angular hacia otra ruta. Pero aquí hay un problema que usamos aquí, suscríbete desde un intercambio. Debes ser muy cauteloso con ello. Porque si estamos usando subscribe, también debemos escribir darse de baja. Si no intentamos darse de baja, entonces significa que tenemos una suscripción de pistola dentro de nuestra aplicación. En realidad, nuestra patología de componentes del hogar destruyó porque estamos dentro de la página de registro, pero esta suscripción sigue ahí porque no nos dimos de baja de ella. Aquí es donde siempre debemos recordar darse de baja de nuestras suscripciones. Para ello, simplemente debemos crear una suscripción aquí en la parte superior, por ejemplo, es log it in subscription, y el tipo es suscripción. Ahora aquí dentro de nuestro motor en él, podemos asignar esta está logada suscripción. El resultado de Subscribe será nuestra suscripción. Ahora aquí en la parte superior podemos sumar en destruir. Entonces cuando este componente será destruido, pero quería crear en G sobre destruir método. Y por dentro podemos simplemente escribir esto es como conseguir suscripción, DOD, darse de baja. Estoy guardando esto pero estamos recibiendo un error. No tenemos inicializador aquí porque hay low get in por defecto no está establecido, está indefinido, y es cierto. Es por esto que aquí podemos escribirlo o indefinirlo, porque no está establecido por defecto y simplemente lo configuramos en ingeniería en él. Pero este es mi código aquí, no es válido porque este objeto puede ser indefinido. Es, por eso aquí debemos poner un signo de interrogación. Entonces esta línea no hará nada si este es un it indefinido. Pero si tenemos una suscripción, tendremos éxito la baja cuando se destruya el componente. Pero ahora quiero mostrarte la segunda variante posible dentro y color para hacer redirecciones o para resguardar tus rutas. Y esta es exactamente la característica que se llama cuadrantes dentro de Angular. Y la idea es exactamente la misma que con los interceptores, estaban haciendo algo antes de que el trabajo estableciera el componente. Entonces esencialmente queremos hacer alguna comprobación, luego devolver verdadero o falso. Esto es camino aquí dentro de nuestras horas de módulo. Quiero crear servicio insights y tu archivo, y será nuestro servicio word dot. Por eso aquí quiero exportar nuestro nuevo servicio de palabras de horas de clase. Y aquí estamos escribiendo implementos pueden activarse. Y esto es exactamente lo mismo que hicimos con nuestros interceptores. Como se puede ver aquí, debemos definir, se puede activar para que este R-cuadrado funcione. Es por esto que aquí podemos escribir, podemos activar, y aquí estamos recibiendo un montón de cosas adentro. En realidad no necesitamos todas estas cosas. Podemos quitarlo y este retorno es demasiado verboso. Queremos regresar aquí. Queremos devolver un observable de Boolean, lo que en realidad significa que estamos devolviendo verdadero o falso. Pero como el arroyo, ahora dentro de aquí queremos usar nuestro, nuestro servicio. Es por esto que aquí debemos definir al constructor e inyectar aquí dentro de nuestro servicio de nuestro servicio de horario. Y la idea es que dentro de este método, debemos devolver un observable de Booleano. Esto es camino aquí directamente. Puedo escribir esto. Nuestro servicio. Dot es estaño de registro. Aquí quiero escribir pipe porque necesitamos hacer algunas cosas adentro. Esta es mi perspicacia. También agregaré MAB y estamos llegando aquí como argumento es propiedad login. Ahora aquí dentro quieren simplemente comprobar si tenemos es login, por lo que es cierto, entonces directamente quieren volver true. Pero si tenemos false, quiero redirigir al usuario a otra página. Aquí es donde aquí estamos también necesitamos un router. Entonces podemos inyectar aquí router privado, y este es nuestro router, y podemos usarlo aquí. Por lo que estamos escribiendo este punto router dot navegar por URL. Por ejemplo, con el detector, utilice el a la página de inicio. Si no están encerrados. Después de esto, debemos regresar falso. Es obligatorio porque esencialmente este es un observable de Booleano y no sólo debemos hacer algo aquí, sino también devolver falso. Y aquí quiero navegar por URL, no cadena vacía, sino solo una slash. Y se podría decir, pero por qué no regresamos, simplemente escucha esto, porque este encerrado es una corriente con verdadero o falso. Porque aquí queremos usar también ruta y navegar por URL, y podemos hacerlo si simplemente devolvemos true o false. Entonces ahora nuestro gouache está listo, pero debemos registrarnos correctamente. Este es mi interior de nuestro módulo. Aquí dentro de proveedores, debemos poner nuestro servicio de alambre de búhos que acabamos de crear. Ahora debemos revisar alguna ruta, nuestro cuadrante de ruta, aquí es donde aquí podemos, se puede activar. Y en el interior estamos proporcionando una matriz con nuestro servicio de autenticación, lo que en realidad significa que cuando estamos saltando para iniciar sesión, nuestro servicio externo comprobará si estamos bloqueados en un nodo con el uso de nuestra corriente. Y si devuelve false, entonces seremos redirigidos a la página principal. Echemos un vistazo a esto. Estoy recargando la página y estamos recibiendo un error. La clase, nuestro servicio de plaza no se puede crear porque no tiene decorador angular. Y en realidad aquí al revés al cuadrado, me olvidó escribir inyectable. No lo olvides. Estoes camino aquí. Pongamos brackets inyectables y redondos. Recarguemos la página, pero no tengamos ningún error. Ahora quiero intentar saltar a nuestra misma media. Yo estoy golpeando mismo medio. Y como pueden ver, puedo acceder a la página de inicio de sesión porque aquí escribimos podemos activar nuestro plantel. que en realidad significa que si aquí estamos pasando, entonces podemos acceder a esta página. que en realidad significa que si aquí dentro de nuestra aplicación, eliminaré nuestro token y ellos volverán a cargar la página de inicio de sesión. Seré redirigido a la página principal porque no tienen acceso a esta página específica debido a que se puede activar, lo que en realidad significa que implementamos con éxito estamos accediendo a las páginas en dos diferentes maneras. En primer lugar, mediante el uso de componentes y segundo lugar mediante el uso de la función angular que puede activar. Pero en realidad creamos este búho al cuadrado, no para iniciar sesión o registrarse, sino para futuros tableros y las páginas de puerto porque allí estaban haciendo muchas solicitudes solo para usuarios registrados. Aquí es donde aquí voy a quitar, se puede activar. Y también quieren cambiar nuestro código de vuelta dentro de home components home, porque aquí no debemos redirigir a slash register, sino a slash boards, que implementaremos en nuestro próximo video. 20. Cuadros de la obtención: En videos anteriores, terminamos de implementar nuestra página de inicio y ahora estamos iniciando una nueva sección. Y esto es un tablones de página. Entonces de qué se trata esta página, esta es una página donde podemos obtener la lista de tableros del usuario, los ejecutamos en la pantalla y crear un nuevo tablero. Aquí seguro quieres preguntar, está bien, pero tenemos socket IO. Usaremos sockets en los que estás exactamente en esta página? Y mi respuesta es no porque no necesitamos usar socket o tu por todas partes que tenemos para esto es a TP ayer, muchos casos donde necesitamos socket IO, pero seguro no para esta página. ¿ Por qué no? Porque en realidad esta es la página donde nosotros, para el usuario actual más simple lista aleatoria de palabras. No tenemos ningún otro usuario que necesite acceder a esta página específica. Aquí es donde no tiene ningún sentido usar aquí socket IO, pero no te preocupes, usaremos socket ion mucho más adelante en la página de una sola placa. Y en este video nos centraremos en crear nuestra placa en el backend y obtener la lista de tableros de la API. Es por esto que vamos a saltar de nuevo de nuestro cliente a nuestro servidor. Aquí dentro de nuestra carpeta fuente, dentro de tipos, queremos crear una nueva interfaz y vamos a nombrarla placa, interfaz de punto y punto ts. Por lo que junta es nuestra nueva entidad. En su interior registraremos nuestra interfaz de placa la cual utilizaremos en diferentes páginas. Por ejemplo, en la página con la lista de tableros y en la página de un solo tablero. Entonces aquí queremos exportar nuestra nueva interfaz y esta placa. Y la pregunta es, qué tendremos dentro, exactamente como hicimos dentro de nuestro usuario. Tendremos aquí interfaz para la placa como esta. Y tendremos aquí documento de tablero, cual extenderá el documento para obtener al menos una identificación. Entonces no necesitamos NAD aquí, pero necesitamos al menos un título. Por lo que cada puerto debe tener un título. En segundo lugar, aquí lo habremos creado, es fecha, y también será fecha. Y en realidad aquí en el lado derecho, usuario, como puedes ver, no creamos cabeza actualizada, pero está ahí por Mangosta, así que podemos escribirlo aquí también. El último campo que necesitamos aquí dentro de nuestra tabla. Nuestro tablero debe pertenecer a algún usuario. Aquí es donde aquí debemos guardar MAD del usuario que creó esta placa. Y para ello podemos escribir aquí ID de usuario, y no estamos escribiendo aquí cadena, sino tipos de puntos de esquema, ID de objeto de punto. Ahora debemos importar aquí en el esquema superior de Mangosta. Como puedes ver aquí, tenemos esta notación especial, tipos de esquema, ID de objeto punto. Y así es exactamente como estamos creando una d's dentro de Mangosta. Así que dentro de esto no es sólo una idea, esto es un ID de objeto, pero en el momento en que vamos a construir nuestra API, este ID de usuario será simplemente una cadena rápida, lo que podemos entender lo el usuario creó esta parte específica. Nuestro siguiente paso aquí es crear nuestro documento para el tablero. Aquí es donde aquí quiero interfaz experta y aquí tenemos documento de Word, exactamente como teníamos a la derecha. Aquí queremos usar documento de extensión y este documento nos viene de Mangosta, así que no debemos olvidarnos de agregarlo aquí arriba porque otro caso no va a funcionar. Aquí, simplemente ponemos corchetes y nada más. Entonces no tenemos aquí validar contraseña o algo parecido porque simplemente extendemos el documento y con desalentados nada nuevo. Por lo que creamos con éxito nuestra interfaz de placa. Ahora es el momento de crear nuestro modelo. Por lo que dentro de los modelos estamos creando una nueva placa de archivos dot ts. Y de nuevo, al igual que hicimos en el usuario, crearemos nuestro esquema de tablero. Entonces aquí a la derecha, abriré nuestro usuario para que podamos echar un vistazo. En primer lugar, aquí en la parte superior, voy a importar esquema y modelo. Y ahora queremos crear nuestro esquema de placa tal como lo hicimos para nuestro usuario. Y aquí estamos viendo nuevo esquema y este es esquema de mangosta. Y por dentro estamos proporcionando nuestro documento de tablero que acabamos de crear. Después de esto, tenemos unos corchetes redondos y en su interior debemos proporcionar todos los campos de nuestro documento de tablero. El primer campo aquí se titulará. Entonces, ¿qué es el título? Es una cuerda. Así que digamos aquí que nuestro tipo es cadena. Y en segundo lugar, se requiere porque no podemos crear nuestro tablero sin título. Es por esto que pusimos aquí requerido a través. Como pueden ver aquí, estamos recibiendo un error. Entonces argumento de tipo título no es asignable al parámetro, lo que en realidad significa que hicimos algo mal con nuestro documento de tablero. Y ver nuestro problema porque aquí se extendieron desde el documento, pero no extendimos desde nuestra Junta, lo que en realidad significa que todas estas propiedades no estaban disponibles rápidamente, como se puede ver ahora no tenemos ningún error. El título es que ahora solo necesitamos proporcionar ID de usuario. Y aquí dentro debemos establecer nuestro tipo y será exactamente el mismo esquema, tipos de puntos, ID de objeto de punto. Y el siguiente se requiere a través en este caso cuando no, Ok. El uso del rayo D también es obligatorio. Después de esto, debemos exportar nuestro modelo. Así que aquí estará el modelo por defecto experto y estamos proporcionando información como un documento genérico de nuestro tablero aquí ahora podemos abrir nuestros corchetes y hace el primer perímetro que estamos proporcionando aquí llamado tablero. Y hay un segundo parámetro, nuestro esquema de tablero. Por lo que como pueden ver, implementamos nuestro tablero exactamente de la misma manera como lo hicimos con el usuario. Pero placa es mucho más simple porque aquí no tenemos métodos adicionales y las validaciones adicionales. Ahora debemos crear un nuevo controlador de placa. Y el método para meter el interior de Albert. Es por esto que lo que quiero hacer, quiero saltar en tales niveles de servidor fuente de servicio. Aquí. En primer lugar, quiero registrar una nueva ruta y será app.get. Y tenemos aquí slash api slash boards. Y esta es la lista para obtener todos los tableros del usuario actual. Aquí es donde aquí queremos usar nuestro middleware del sistema operativo, porque si no estamos conectados, podemos obtener placas. Debemos tener un usuario. Y el último aquí será el controlador de nuestra placa. No lo tenemos aquí y aquí, punto, por ejemplo, consigue tablas. Por lo que debemos crear controlador de nuestra placa y aquí obtener el método de placa. Es por esto que en la parte superior. En primer lugar, quiero ingresar nuestra estrella como controlador de placa, Roma, y aquí estarán los controladores de ruta tablas de barras. Y aún no tenemos este archivo, así que vamos a crearlo ahora. Aquí dentro de los controladores, puedo crear tableros dot ts, y aquí debemos crear una nueva acción. Aquí lo haremos exactamente de la misma manera como lo hicimos dentro de nuestros usuarios Controller. Por lo que antes que nada, en la parte superior necesitamos ingresar nuestra respuesta de solicitud y siguiente función de express. Después de esto, podemos crear nuestra nueva función, obtener tableros, que será una función asíncrona. Y estamos llegando aquí en primer lugar, nuestra solicitud y este es tipo request, luego respuesta, es tipo respuesta. Y el último es siguiente de tipo, siguiente función. Y esto previamente queremos escribir aquí try-catch para que podamos manejar todo correctamente. Aquí estamos recibiendo nuestro error y simplemente podemos tirarlo dentro de nuestra próxima aquí será la próxima era. Ahora bien, dentro de nuestra tribu debemos tratar de permitir la lógica para esto. Debemos inyectar aquí nuestro modelo de placa que ya hemos creado. Por lo que aquí será importante modelo de Junta para Roma. Y aquí para bailar, estamos saltando dentro de los modelos slash board. Y ahora podemos intentar encontrar todos los tableros por ID de usuario específico. Por lo que aquí queremos conseguir nuestras juntas de propiedad. Y aquí estamos usando un peso Bohr modelo dot find. Y si no lo sabe, encontrará para nosotros registros antiguos por predicado específico. Por lo tanto, en el interior podemos proporcionar un objeto con usura alimentada t igual a solicitud de punto de usuario punto ID. Y como puedes ver aquí, obtenemos directamente una flecha de TypeScript que el usuario no existe dentro de la solicitud. Y esto es totalmente correcto. Solo para recordarte, aquí creamos nuestras propias peticiones personalizadas con uso de un campo en su interior. Aquí podemos escribir interfaz de solicitud expresa , y en este caso, funcionará correctamente, pero nuestro usuario de solicitud posiblemente puede estar indefinido y entonces este código no funcionará. Aquí es donde aquí debemos probarlo. Si no tenemos request dot user, entonces queremos tirar aquí para 01. Por lo que devolver dirección, enviar estado, y aquí estará 401, exactamente como lo hicimos anteriormente en ahora un controlador de usuario. Entonces aquí en la parte de abajo, hicimos exactamente lo mismo. Y ahora simplemente debemos responder con nuestras juntas directivas. Entonces aquí podemos escribir rest dot sand, y estamos enviando aquí tableros. Y la central, la lista de esta junta es sólo una matriz. Vamos a comprobar si está funcionando. Como puedes ver aquí, inserta servidor, esto está conectado y no tienen ningún error. Entonces saltemos dentro de cartero. Hagamos aquí una solicitud de tablas de corte de pastel slushy. Y como puedes ver aquí dentro de cabeceras, o ya tienes un token inyectado porque usamos esta solicitud previamente. Estoy golpeando aquí arena. Y como se puede ver de donde estoy recuperando una matriz vacía porque no tenemos ninguna placa. Entonces ahora la pregunta cómo podemos conseguir algunas tablas si aún no tenemos ningún pastel para crear un tablero. Y para ello simplemente podemos saltar dentro Mongo y crear este puerto por nuestra cuenta. Esto es camino aquí. Dentro de consola voy a escribir docker exec menos 80 MongoDB Mongo. Así que esencialmente queremos llamar al comando Mongo dentro de nuestro contenedor, MongoDB. Solo para recordarte si no usaste más oscuro aquí, sino que simplemente instalaste MongoDB en tu máquina. Entonces solo necesitas escribir MONGO insert console y funcionará. Yo estoy golpeando aquí, entrégalos aquí dentro de la consola de Mongo. Ahora aquí necesitamos usar nuestra base de datos. Es por esto que aquí estoy escribiendo uso espacio ultra largo. Y después de esto ponen punto y coma. Estoy golpeando Enter. Y como pueden ver aquí, cambiamos al tráiler dB HL. Ahora aquí podemos escribir mostrar colecciones punto y coma, y como pueden ver, estas son nuestras colecciones. Tenemos aquí tableros y tenemos a nuestros usuarios. Lo que queremos hacer ahora queremos insertar un nuevo disco dentro de nuestras placas. Para ello, podemos escribir db dot, ports, dot insert, y aquí tenemos una función, por lo que los corchetes redondos y dentro de un objeto. Y aquí debemos proporcionar lo que queremos insertar. En nuestro caso, será solo título, por ejemplo, primer tablero. Y debemos escribir aquí algún ID de usuario, pero aquí no debemos proporcionar la cadena VM debe proporcionar un ID de objeto. Aquí es donde aquí quiero escribir ID de usuario colon y luego objetar IED. Abrí aquí corchetes redondos y por dentro estoy pegar en nuestro arroyo. Como puedes ver, esto no es solo usura, el final de la cuerda. Estamos empezando aquí dentro ID de usuario e ID de objeto con la cadena. Y al final hay que poner un punto y coma. Estoy golpeando Enter y estamos consiguiendo el resultado correcto insertado uno. Y ahora aquí podemos intentar conseguir todos los registros dentro de esta colección específica. Por lo tanto, db dot boards, dot find y soportes redondos. Estoy golpeando Enter y estamos recibiendo sólo un objeto con ID. Y esta es la idea de nuestro tablero título primer tablero y el usuario AD es un ID de objeto correcto. Es por esto que ahora podemos saltar de nuevo dentro de nuestro cartero, elegir nuestra solicitud de tableros API y presionar Enviar. Como puedes ver ahora estamos consiguiendo nuestro ASHRAE con un objeto dentro. Aquí tenemos nuestro ID y aquí lo vemos como una cadena, título e ID de usuario, lo que en realidad significa que creamos con éxito nuestra primera placa desde la consola y tenemos la lista de nuestras placas. Pero aquí quiero mejorar último pequeño delgado, como pueden ver aquí, estamos recibiendo nuestros ID del backend con guión bajo. Y en realidad típicamente de la API estamos obteniendo un DES. Normalmente sin subrayado. Esto es justo lo de MongoDB, que significa que esto no es tan cómodo para obtener una, esto fue subrayado en el front-end y poner no quiero hacer eso. Y dentro de Mangosta, existe la posibilidad de afinar esto. Por eso quiero volver a saltar dentro nuestro código, dentro de hermandades. Y aquí, por ejemplo, después de nuestra configuración de abuso, podemos escribir aquí Mongoose dot set aquí como el primer parámetro que estamos proporcionando a Jason. Y como segundo parámetro estamos proporcionando un objeto. Y por dentro en primer lugar, estamos diciendo que estamos pasando por Charles. Y en segundo lugar, transformar. Y aquí adentro transformados tenemos dos argumentos. El primero será subrayado y segundo se convertirá. Y esta es la función. Y dentro de esta función queremos escribir delete convertido dot underscore ID. Entonces lo que estamos haciendo aquí en absoluto, aquí podemos cambiar al método JSON que está escrito dentro de uno va aquí estamos proporcionando transformación, así que estamos diciendo cómo lo transformaremos. Y en realidad dentro de Mangosta, recuperaremos NAD y subrayaremos ID. Y aquí vamos a eliminar sólo de JSON guión bajo ID, que en realidad significa dentro de Mangosta, todavía tenemos este guión bajo ID. Podemos usarlo de forma segura, pero no lo conseguiremos dentro de JSON, obtendremos un ID normal. Y es posible que también quieras saber qué es virtual fuerte y en realidad la incitación va dentro de los modelos. Podemos crear propiedades virtuales y por defecto dentro de Mongoose whoop no las recuperará. Y en realidad queremos recuperarlos. Aquí es donde aquí escribimos virtuales, cierto. Entonces vamos a comprobar si este código está funcionando. Estoy saltando de nuevo al cartero y le estoy golpeando a la arena. Y como pueden ver aquí, estamos recibiendo exactamente la misma respuesta, pero no tenemos ID de subrayado. Tenemos sólo una normalmente d, que es una cuerda. Y esto es igual que queremos usarlo dentro de front-end. 21. Frontend para gettings boards: En video anterior, implementamos con éxito conseguir nuestras placas en el back-end. Ahora debemos comenzar con nuestro festival de parte frontend. Para ello, debemos implementar nuestro módulo de placas. Pero sólo para recordarle aquí dentro de los clientes fuente, aplicación, componentes del hogar , casa, casa Ts, tenemos muy directo en las tablas de corte cuando estamos encerrados. Aquí es donde debemos ante todo, implementar nuestro módulo de placas y dentro de esta ruta, para que al menos nuestro código pueda funcionar con éxito. Aquí es donde aquí dentro de que queremos crear nuevas placas de módulos. Y este es un módulo separado para una sola página donde tenemos una lista de las placas y en realidad dentro también podríamos crear un componente para una sola placa. Pero realmente quiero separar estos dos módulos porque son dos diferentes. Este es mi interior de nuestro módulo de placas. Podemos crear tableros dot module.js. Y aquí no quiero escribir todo desde cero. Quiero copiar pegar todo el módulo completamente y simplemente cambiarlo. Entonces, ¿qué tenemos aquí? En primer lugar, nuestra clase será aburrido módulo. No vamos a tener aquí en declaraciones, componente de casa y necesitamos aquí y ustedes alrededor, pero aquí no necesitamos camino a casa, pero necesitamos tableros de ruta. Y este componente home no existe aquí, por lo que necesitamos cambiarlo a nuestro nuevo componente, el componente de placas. Aquí es donde en realidad lo que quiero hacer, quiero dentro de los componentes de casa para copiar completamente pegar este directorio home y pegarlo aquí dentro de las placas, dentro de la carpeta de componentes. Entonces en realidad puedes usar generadores Angular si quieres. De verdad solo quiero copiar el módulo de pegar. Es más rápido para mí. Entonces aquí quiero cambiar el nombre de estos componentes a placas, y este es nuestro componente raíz de placas de módulos. Y por dentro tenemos dos expedientes. En primer lugar, placas componente HTML. En segundo lugar, placas componente ts. Aquí dentro del HTML simplemente podemos quitar todo y simplemente escribir tableros para que podamos comprobar si está funcionando. Ahora, podemos saltar dentro de nuestro componente de placas. Y aquí en primer lugar, podemos cambiar nuestro selector y podemos escribir aquí tableros y nuestra URL de plantilla será importante componente HTML. Ahora aquí dentro tenemos nuestra clase, que es el componente de placas, y aquí debemos quitar los implementos. No lo necesitamos por ahora. Y eliminarán todo el código de nuestro componente de placas, y también podemos eliminar todas las entradas. Por lo que creamos con éxito nuestro nuevo componente de placa vacía y ahora podemos usarlo dentro de nuestro módulo de placas. Aquí podemos escribir placas de componente y hacer esto. Entrada automática aquí en la parte superior. Y ahora aquí tenemos una ruta para tablas de corte. Y aquí dentro de las declaraciones podemos definir nuestro componente de tableros. Y el último paso que no debemos olvidar es que debemos registrar el módulo de esta placa dentro de nuestro módulo de app. Por lo que aquí dentro de nuestras entradas, debemos agregar módulo de placas. Vamos a comprobar si está funcionando. No tengo ninguna flecha aquí dentro del servidor web. Ahora quiero saltar a nuestra página y recargar. Y como se puede ver en dónde en las palabras de corte aquí está nuestro texto. Si saltaré aquí en la página principal, estaré directamente al tablero porque estoy encerrado. Ahora, vamos a comprobar si vamos a ser redirigidos de nuevo. Si no estamos iniciando sesión. Para esto, por ejemplo, podemos simplemente eliminar token y recargar la página. Y como pueden ver aquí, nos estamos volviendo no autorizados, pero cuando no se redirigen de nuevo a la página principal. Y esencial para ello, creamos dentro de nuestra casa servicios r al cuadrado, y podemos usar este R-cuadrado ahora dentro de nuestro módulo de placas. Por lo que dentro de placas, dentro de placas módulo Ts aquí en la ruta que podemos adjuntar, se puede activar. Y aquí debemos proveer un array con Servicio Mundial que creamos previamente. Está totalmente bien usarlo así. No necesitamos registrarlo aquí. Como puedes ver aquí, no hay errores. Entonces vamos a recargar la página. Como puedes ver ahora, no podemos saltar a nuestros deportes de lodos y fueron redirigidos a la página principal. Lo que en realidad significa que r puede activarse, está funcionando correctamente. Y ahora solo con una sola línea aquí, podemos definir qué páginas están permitidas sólo para usuarios conectados. Por lo que creamos con éxito nuestro módulo de placas, y ahora quiero crear una interfaz de puerto. Y podríamos crearlo dentro del módulo de placas. Pero en realidad, quiero crear aquí dentro AB nueva carpeta y llamarla compartida. Porque en realidad quiero poner todos los tipos que estamos usando en todas partes dentro de esta carpeta compartida. Por ejemplo, tablero de columna de tareas. Estas son todas entidades compartidas que podemos usar a través de diferentes módulos. Lo mismo ocurre con los servicios o servicios que se comparten, como servicio de placa, servicio de placa única, servicio columna, servicio de tareas. Podríamos ponerlo en un módulo específico, pero realmente quiero poner todas estas cosas donde solo busquemos datos al servicio compartido. Es por esto que aquí tenemos AB compartido. Y aquí en primer lugar, quiero crear nuevos tipos de carpetas. Y ahora dentro de nuestros tipos de disparos de aplicaciones, podemos definir un nuevo tipo y es la interfaz de punto de placa. Ts. Y exportemos aquí nuestra nueva interfaz. Y esta será una interfaz de nuestra placa y debemos nombrarla interfaz de puerto. Y por dentro debemos definir exactamente los mismos campos como creamos en el backend. Y antes que nada, aquí está NAD, es una cuerda. En segundo lugar es título, también es cadena. También aquí hemos creado que esto está tenso y el último se actualiza. Es, también es cuerda. Y en realidad aquí adicionales estaban obteniendo ID de usuario, solo para recordarles aquí dentro nuestros modelos fuente de servidor y aquí tenemos nuestra placa. Tenemos UserID, lo que en realidad significa que aquí también obtendremos ID de usuario y es cadena. Nuestra interfaz para Boyd sencillo está completamente lista y podemos usarla en cualquier componente. Ahora quiero crear el Servicio para trabajar con tableros. Y en realidad cualquier solicitud como crear tablero, aburrirse, obtener tableros, borrar tablero irá dentro del servicio. Aquí es donde aquí dentro de compartido, quiero crear una nueva carpeta y nombrarlo servicios. Y luego dicho vamos a crear un nuevo servicio que se llama Boards service dot ds. Entonces aquí definamos ahora nuestra nueva clase. Entonces aquí tenemos servicio de Boards de clase, y debemos escribir en la parte superior del mismo inyectable para que podamos usarlo en todas partes. El primer método que queremos definir aquí es obtener tableros. Esto es exactamente lo que estamos preparados ya en el back-end. Entonces aquí está nuestro get boards y no necesitamos proporcionar ningún argumento aquí. Y vamos a conseguir de nuevo un observable con un rayo de nuestras tablas. Es por esto que aquí podemos escribir matriz de interfaz de puerto. Esto es exactamente lo que acabamos de definir. Ahora dentro de este get boards, queremos asegurarnos de que se solicite HTP. Es por ello que aquí debemos tratar de construir e inyectar. Aquí están el cliente HTTP y HTTP. Ahora, dentro de nuestros tableros, queremos obtener una URL exactamente como lo hacíamos anteriormente para el servicio de usuario. Entonces aquí tenemos nuestra URL y es entorno. No API URL a nosotros. Y aquí está la tabla de slash. Este es exactamente nuestro hijo. Ahora aquí podemos devolver este punto http.get, y queremos obtener nuestra URL sin ninguna opción. Y como pueden ver aquí, obviamente estamos recibiendo un error. El objeto observable no es asignable a la interfaz de placa observable. Aquí es donde aquí, como antes, debemos especificar que estamos volviendo en matriz de placas, lo que nuestros servicios están completamente listos y solo quieren probarlo. Es por esto que aquí quiero saltar de nuevo dentro de nuestro módulo de placas placas y primero debemos inyectar el servicio aquí dentro de los proveedores. Aquí podemos escribir que tenemos aquí el servicio de Boards, y está disponible rápido. Ahora se nos permite saltar dentro de nuestro componente aquí inyectado. Entonces antes que nada, quiero definir a nuestro constructor y sabemos que aquí tenemos servicio de Boards y este es nuestro servicio de tableros. Ahora, adicionalmente, quiero escribir aquí implementa encendido en él. Y ahora sin inicializar, quieren buscar esta lista de nuestros tableros. Entonces aquí tenemos nuestra energía encendida en ella y dentro pueden simplemente escribir este servicio de tablero, obtener tableros, suscribirse para que obtengamos el resultado. Aquí hay algún resultado. En realidad esto son tableros y solo quieren consola registrar lo que estamos recuperando. Entonces aquí estamos consiguiendo nuestras tablas, tablas de coma. Vamos a comprobar si está funcionando. Pero no tenga ninguna flecha aquí dentro del servidor web front-end. Y vamos a iniciar sesión ahora otra vez porque estamos bloqueados. Por lo que aquí proporcionaré nuestro foo en gmail.com. Ahora como se puede ver después de iniciar sesión, pero me meto en tablas de corte. Y aquí dentro de la consola podemos ver tableros. Y esta es una sola placa mientras la estamos consiguiendo porque en el video anterior se crearon dentro de la consola para probar el pastel este punto y esencialmente este sub boards para nuestro usuario actual. ¿ Por qué es eso? Porqueen realidad aquí está nuestra solicitud de back-end. Aquí estamos encontrando nuestras placas por ID de usuario, lo que significa que estamos encontrando todas las placas de esta solicitud ID de usuario desde donde obtenemos este ID de usuario de nuestra solicitud de red. Aquí está la solicitud de nuestra junta directiva, y aquí están nuestros encabezados. Y como puedes ver aquí en cabeceras en la parte inferior, tenemos esta autorización y aquí está nuestro token. Esta es exactamente la información que nuestro backend necesita para entregar rápidamente los datos correctos del usuario actual. Por lo que como se puede ver, están consiguiendo de las placas dentro del módulo funciona correctamente. Y preparamos con éxito nuestro servicio para obtener una lista de tableros en el cliente. 22. Forma en línea: En este video, quiero hablar un módulo adicional que normalmente en vivo queremos crear para nuestra aplicación. Y estoy hablando aquí de una forma inline. Echemos un vistazo al proyecto completamente terminado que estamos implementando. Como puedes ver aquí, estoy en la página de slash sports y aquí acabo de crear un usuario. Por lo que no tenemos tablas en absoluto. Y aquí tenemos crear tablero. Como pueden ver, esto es sólo un cuadrado con algunos textos. Pero cuando lo estoy golpeando, se puede ver aquí una entrada sin ningún marcador de posición, podemos escribir aquí, por ejemplo, foo board, y estamos golpeando enter. Y después de esto, nuestra junta se crea directamente. Aquí. Volvemos a ver esta tarjeta, y esto es esencialmente un ejemplo de una forma en línea. Entonces tenemos aquí algún cuadrado con el texto. Entonces estamos golpeando aquí y activamos un modo de edición donde solo teclea algo y estamos golpeando Enter. Por lo que la solución más fácil aquí sería simplemente crear este componente y tirarlo dentro de nuestras placas. Pero entonces saltaremos a un solo tablero. Aquí a la izquierda, tenemos exactamente lo mismo. Se puede ver aquí el título de nuestro tablero que estoy golpeando aquí y nos estamos poniendo en modo de edición. Aquí vemos el título de nuestro tablero, pero ahora podemos cambiarlo para poder actualizarlo y presionar Enter y fecha web, el título de nuestro tablero, exactamente lo mismo que tenemos aquí con la lista. Esto es sólo algunos textos tiempo escondido aquí y estamos llegando aquí no sólo una entrada, sino también un botón, al menos. Y como puedes ver, los estilos son diferentes en cada caso, pero no tiene mucho sentido crear componentes adicionales para cada caso, como crear una placa, actualizar el nombre del tablero, a continuación, crear una tarea, crear una columna, y así sucesivamente. Porque también dentro de nuestra columna podemos agregar la tarea y esta también es una firma inline. Esta es la razón por la que realmente enfoque sabio sería crear un solo componente que pueda cubrir todas nuestras necesidades. Entonces, ¿qué casos tenemos? En primer lugar, en todo caso, tenemos algún margen de beneficio. Entonces tenemos un estado de edición cuando simplemente hacemos clic en el elemento. Pero como puedes ver, el marcado puede ser completamente diferente. Pero lo que es diferente no es el marcado, es solo darle estilo en realidad, si vamos a revisar aquí, como puedes ver, esta es una fuente en línea que creé y simplemente adjuntamos aquí Crear formulario de tarea. La idea principal es que todas estas clases estén disponibles globalmente y solo podemos cambiarlas con CSS. En el interior se proporcionaban en diferentes cosas. Por ejemplo, en primer lugar podemos escribir algún texto que se mostrará aquí, como por ejemplo en la corriente. Pero también podemos mostrar aquí ese texto como el nombre de nuestra junta directiva. Ahora estamos ocultos aquí, Editar y podríamos querer propagar este texto en la forma de edición. Pero aquí con una tarea, no necesitamos hacer eso. Pero también aquí tenemos un caso donde tenemos en el botón Cart y no sólo una entrada. Por lo que todos estos casos deben estar dentro este solo componente para funcionar sin problemas. Entonces intentemos ahora crear este componente. Y este componente es super compartible. Es por esto que quiero empacarlo dentro de AB srand. Y aquí queremos crear los módulos de carpeta. Aquí podrías preguntar, vale, pero estamos hablando de componente. Sí, tienes toda la razón, pero no puedes usar componentes sin módulo. Puede registrar componente dentro de algún módulo o puede inyectar módulo y módulo de inyección es mucho mejor porque puede definir qué componentes desea permitir afuera y qué no es. Aquí es donde normalmente cuando queremos compartir un componente, te recomiendo encarecidamente que crees un módulo para esto. Aquí es donde aquí tenemos unos módulos y podemos crear una nueva carpeta la cual será de forma inline. Y esta es exactamente la forma para todos estos casos. Ahora vamos a saltar dentro y crear aquí inline form dot module.js. Y dentro de aquí debemos exportar nuestra clase, que es el módulo de formulario inline. Ahora en la parte superior de uno para inyectar nuestro módulo NG al igual que lo hicimos anteriormente. Y aquí queremos que las entradas internas agreguen nuestro módulo común. El siguiente paso es crear nuestros componentes. Entonces aquí tendremos carpeta de componentes, y aquí dentro tendremos nuestro formulario inline con dos archivos. En primer lugar, en el componente de punto de forma viva, punto ts, y en segundo lugar, en línea componente punto punto HTML. Ahora vamos a probarlo dentro de algunos textos, por ejemplo, en forma de línea. Y saltemos a nuestro interior desde aquí, experto, nuestro componente de forma en línea de clase. Ahora aquí en la parte superior debemos definir nuestro componente. El interior podemos proporcionar un selector, y esos selector será sólo en línea de forma. Y aquí también necesitaremos proporcionar una plantilla TRL. Este es el componente de formulario en línea HTML. Por lo que nuestro componente básico está listo cuando masa ahora se registra dentro del módulo. Entonces aquí en primer lugar, nuestras declaraciones, tendremos aquí componente de formulario inline. Y en segundo lugar, y es súper importante son los expertos porque aquí queremos permitir el uso de este componente afuera. Esta es la manera aquí que estamos agregando componente de formulario en línea dentro de la matriz de expertos. Ahora vamos a saltar de nuevo dentro de nuestro componente y definir algunas entradas como antes este conjunto. En primer lugar, queremos proporcionar un título para nuestro formulario en línea. Es por esto que aquí tenemos un título de entrada y esta es una cadena, y por defecto es una cadena vacía. Pero es importante distinguir entre el título de la forma. Esto es lo que queremos cambiar y sólo los textos que estamos mostrando porque necesitamos cosas diferentes en diferentes casos. Por ejemplo, quieres ejecutar el algún texto predeterminado, pero cuando estás oculto en nuestro teléfono, quieres renderizar otro texto. Y esto es esencialmente título, pero también ahora necesitamos aquí en texto por defecto, esto es lo que estamos renderizando cuando no estamos activados nuestra firma. Aquí, vamos a crear texto por defecto, y esto es una cadena. Y aquí quiero hacer un giro realmente bonito. Quiero escribir aquí, no definirlo. Y esto es esencialmente lo que te recomiendo hacer mucho si acabas de empezar a implementar algo o incluso para la producción, cuando no estás seguro de que tienes algunos datos, es mucho mejor establecer no lo definió que simplemente indefinido o simplemente cadena vacía. En este caso, la gente puede ver directamente que el valor no está ahí y no está roto. También tenemos un caso cuando queremos mostrar un botón, aquí es donde aquí debemos crear una entrada más, tiene botón y es booleano. Y por defecto será falso, lo que significa pero no renderizar botón. Si tenemos un botón, queremos cambiar el texto de este botón. Aquí es donde aquí estará nuestra entrada con texto de botón y es una cadena. Y por defecto quieren configurarlo para que se presente porque este es el tipo más popular del texto. Después de esto, también vamos a querer a veces para proporcionar un lugar titular para nuestra entrada. Aquí es donde aquí la entrada con el titular de lugar de entrada, y esta es una cadena, y por defecto será una cadena vacía. Y lo último que necesitamos es un tipo de entrada porque tenemos un caso donde somos tendencia masiva y no un input sino un textarea. Aquí es donde aquí quiero escribir entrada con tipo de entrada, y esto es solo una cadena. Podríamos crear una enum aquí, pero la dejaré como una cuerda. Por defecto, podemos escribir que esto es sólo una entrada de cadena. Y en el momento en que queramos escribir el área de texto, proporcionaremos aquí un área de texto de cadena. Ahora aquí estamos también hay que definir una salida. Estos son los valores que queremos propagar después de enviar un formulario. Esto es por aquí, Vamos a definir un nombre interminable de salida que maneja enviar. Y este es nuevo emisor de eventos. Y aquí hay un punto importante. Debemos ingresarlo desde el núcleo angular y no desde el nodo, y luego decir agregar nuevo emisor de eventos. Queremos proporcionar ese tipo de datos que queremos recuperar. Y será una cuerda porque el sustantivo forma, tenemos apenas una sola cuerda que queremos devolver. También aquí necesitamos que la propiedad local a manejar se edita por defecto, necesitamos es editar para establecer en false, y luego activamos la edición, configuramos a true. Esto es y aquí es la edición será un Booleano y por defecto será falso. Y por último pero no menos importante, aquí queremos crear una forma reactiva. Aquí es donde aquí quiero proporcionar insight constructor privado si b y este es form group y ya estamos creados de forma reactiva previamente para nuestro registro. Aquí es donde aquí usaremos exactamente lo mismo, pero solo crearemos aquí un formulario. Y aquí podemos escribir este punto FB grupo de puntos. Debemos proveer dentro de nuestros campos. Y en nuestro caso sólo tenemos un título. Y aquí podemos decir que esta es una cuerda vacía. Y en realidad aquí cometí un error. Si b no es grupo firme, en realidad es constructor de formularios. Entonces aquí necesitamos otra entrada. Ahora vamos a escribir un poco de mercado para que entiendas la lógica Beta. Entonces aquí quiero saltar dentro de HTML y no necesitamos este texto. Ahora aquí primero que nada, quiero crear un div, y este div será nuestro div predeterminado con algún marcado. Es por eso que aquí necesitamos una clase que podamos usarlas globalmente y otra vez, correcto, para nuestras necesidades. Por lo que aquí podemos escribir contenedor de formulario en línea. Una vez más, no estamos escribiendo ningún estilo para nuestro contenedor de formularios en línea. Cada caso de uso individual debe crear sus propios estilos. También aquí quiero crear otra clase también para estilizar si en modo edición, aquí es donde crearé en clase G. Y aquí estoy proporcionando un objeto, vaso de whisky en línea dash, contenedor dash. Entonces el mismo nombre, edición de guiones. Aquí estamos proporcionando el valor es la edición que acabamos de crear. La idea principal es que se nos dan suficientes clases para que otros desarrolladores usen este componente y lo diseñen correctamente para cada estado. Y lo último aquí es, por supuesto un click. Queremos activar nuestra edición. Entonces vamos a crear aquí una nueva función, activar la edición y con no es necesario proporcionar nada aquí. Ahora definamos esta función. Entonces dentro de nuestro archivo aquí en la parte inferior, podemos crear activar edición y lo que esta lo activó y lo está haciendo. En primer lugar, establecer este punto es la edición a true, pero no es todo. Tenemos un caso donde queremos ver el valor que queremos cambiar. Por ejemplo, tenemos un formulario de edición como divertido nombre del tablero. Y para ello proporcionamos dentro de este título de entrada. Pero como se puede ver en nuestra firma el título está vacío, lo cual es correcto. Pero en nuestro caso, cuando estamos saltando a la edición, queremos poner nuestro título. Es por ello que lo que podemos escribir aquí si tenemos un título. Entonces si tenemos esto.título, entonces queremos ponerlo dentro de nuestro formulario. Y para esto podemos escribir este valor de punto de forma de punto. Y por dentro se nos proporciona un objeto con título, este título. Entonces qué está haciendo esta línea, si la activamos en edición y le proporcionamos un título en su interior, entonces actualizaremos nuestro valor del formulario con el valor de pitch de función. Ahora volvamos a nuestro HTML. Entonces dentro de un div con Festival one para crear un div que mostraremos cuando no estemos en la etapa de edición. Y esto es sólo un texto con alguna clase que podemos estilizar. Esta es y aquí, clase div. Aquí estaremos el texto del formulario en línea. Y aquí queremos mostrarle a este DFF solo uno. No estamos en el editor y estado esto es camino aquí, NADH está editando. Después mostramos este div y dentro de uno para renderizar nuestro texto predeterminado que estamos recibiendo en la entrada. Y después de esto, estamos creando nuestro formulario, igual que hicimos dentro del registro. Por lo que es forma reactiva y bien definido nuestro grupo de forma. Por lo que aquí podemos proporcionar nuestro grupo de formulario. Este es nuestro formulario y también lo tendremos aquí NG Submit. Y debemos crear la función onsubmit. Pero terminemos con este formulario aquí. En primer lugar, queremos renderizar esta forma sólo una barra en la etapa de edición. Es por ello que en GE está editando. Y también vamos a querer proporcionar una clase para el estilo y sólo le nombramos forma en línea. Vamos a saltar de nuevo ahora dentro de este archivo y crear aquí nuestra función onsubmit. Y aquí está la parte engañosa. Podríamos abrir un formulario, no proporcionar un valor, y luego simplemente presionar enter. Y esto no es lo que queremos emitir. No tiene ningún sentido encontrarse con una cuerda vacía. Entonces aquí queremos comprobarlo. Si tenemos esta forma de punto, valor de punto, título , sólo, entonces queremos emitirlo. Y para una carne, tenemos este punto manejar presentar un medio, y en su interior estamos proporcionando este título de punto de valor firme, lo que en realidad significa que si estamos presentando este formulario y tenemos una entrada vacía, queremos inmediato lo que queremos hacer después de que queremos cerrar nuestros oídos editando estado, Es por esto que la edición es igual a falsa. Y también vamos a querer restablecer nuestra firma al estado inicial. Es por esto que este punto forma punto reset y esta funcionalidad que estamos recibiendo desde el Angular fuera de la caja. Ahora, volvamos a saltar a nuestro HTML. Aquí tenemos un formulario. Ahora debemos definir un input. Entonces aquí vamos a crear una entrada con un texto tipo. Y estamos llegando aquí dentro del nombre de control de formulario. Y cuando en esta forma reactiva de la flor, aquí tenemos nuestro título de nombre también querrán crear aquí una clase para estilizar. Así que aquí la entrada de la clase forma de entrada. También queremos proporcionar aquí nuestro marcador de posición y lo estamos obteniendo de la entrada. Por lo que es el lugar de entrada titular y queremos renderizar esta entrada. Sólo uno que proporcionó el tipo correcto en su interior. Aquí estará NG IV con tipo de entrada, donde nuestro tipo de entrada es igual a la entrada. Y ahora queremos hacer exactamente el mismo ancho textarea. Por lo que tenemos aquí en exterior y queremos cerrar directamente nuestra área de texto. Y ahora dentro queremos revisar este NG IV. Así que aquí nuestro tipo de entrada es igual a textarea, entonces vamos a randy. Pero también estamos debemos proporcionar aquí un nombre de control de formulario, y esto también será un título. Y también debemos proporcionar aquí una clase. Y en este caso, la clase será la misma entrada de formulario de entrada y después de cómo se extiende sobre la máscara, crea un botón para enviar. Aquí es donde aquí en botón y dentro tendremos nuestro texto, texto botón que estamos obteniendo de la entrada. Y queremos renderizar este botón sólo si tenemos una entrada adecuada. Entonces si tenemos un botón de entrada tiene, entonces lo rendiremos. Entonces aquí queremos tipo submit, y aquí queremos desactivarlo si no es válido, aquí es donde está deshabilitado y podemos usar form dot inválido. Y después de esto, también vamos a querer agregar una clase para darle estilo. Y aquí estará el botón de formulario en línea. Y en realidad con estos son forma de entrada está completamente lista. Entonces lo que estamos haciendo aquí, tenemos un div, tenemos aquí activar la edición. Tenemos aquí diferentes clases para cada elemento aquí se representaron en nuestro texto por defecto y aquí está nuestro formulario con input o textarea y botón si lo necesitamos. Por lo que en el siguiente video, trataremos de utilizar nuestra firma del interior en el caso de uso de la creación del tablero. 23. Implementación de la creación de una tabla: En video anterior, preparamos con éxito nuestra forma interior, pero no está claro cómo la usaremos con la recién creada con todos los valores posibles en su interior. En este video, vamos a querer usarlo, pero no tenemos nada dentro de nuestra página de tableros. Esta es la forma de poner dentro de nuestra forma interior. También debemos generar nuestra página de tableros. Y aquí tenemos mayormente marcado en línea porque ya tenemos acceso a nuestros tableros, porque ya creamos el método get board y nos suscribimos a él para obtener nuestros tableros. Entonces comencemos con nuestro marcado aquí podemos quitar el mundo deportivo. Y antes que nada, en la parte superior, quiero escribir top porque en realidad en este video, no vamos a implementar nuestra barra superior, pero no debemos olvidar que necesitamos implementarla más adelante. Y aquí podemos comenzar nuestro marcado. Entonces, antes que nada, tenemos aquí tableros, contenedor de páginas. Ahora vamos a cerrar este div y dentro tendremos un div más con la barra lateral izquierda de la casa de clase. Aquí estamos cerrando nuestro div. Y en realidad aquí estamos creando nuestra barra lateral la izquierda y dentro tendremos enlaces a nuestras diferentes páginas. Es por esto que aquí tenemos un enlace de enrutador y queremos proporcionar aquí un enlace en las placas de barra diagonal. Después de esto, también necesitaremos agregar una clase aquí, opción de menú lateral de tableros. También aquí queremos halite el link cuando sea ruta inactiva y un Angular para esto tenemos un atributo especial el cual se llama router link active. Y en realidad es una directiva. Y luego dicho, podemos proporcionar qué clase poner queremos conseguir. En nuestro caso, queremos obtener una opción de menú lateral de tableros de clase seleccionada. Cerremos nuestra a aquí y por dentro. Probemos textos. Es tableros también. Vamos a establecer aquí un enlace más que será el hogar. Es por esto que voy a copiar pegar completamente esto un enlace router aquí será recortado. Enlace de enrutador de la misma clase activo. Aquí podemos escribir no tableros sino home, pero también aquí queremos escribir router link opciones activas por eso, porque en realidad aquí hemos ruteado link slash y hemos slashed en cada link único router. Es por esto que este enlace router activo siempre resaltará este elemento que queremos evitar esto. Es por esto que debemos proporcionar opciones activas de enlace de enrutador. Y aquí dentro estamos proporcionando un objeto con campo exacto verdadero. En este caso, destacaremos este lean on loop y tenemos malla completa en barra. Y en realidad desde nuestra perspectiva, no tiene mucho sentido crear estos dos vínculos diferentes. Porque cuando estamos encerrados pero no podemos acceder a nuestra casa, lo que significa que seremos redirigidos directamente a nuestra página de tableros. Pero este es el margen que estamos obteniendo del proyecto. Por lo que simplemente implementamos lo que tenemos después de nuestra barra lateral. Debemos crear una parte principal con nuestro contenedor para los tableros, es donde aquí será div clase Boards sección contenedor. Ahora vamos a cerrar aquí div y dentro queremos crear un div más. Aquí tendremos div class mis tableros. Vamos a cerrar este div y dentro de él queremos crear una clase más con un encabezado. Este es camino aquí, div class, mi cabecera de sección Boards y dentro debemos crear una clase más. Y será el encabezado de página de tableros de vidrio, nombre, y por dentro lo probaremos. Mis tablas. Después de nuestro encabezado, queremos renderizar nuestra lista. Esto es camino aquí. Tendremos una lista de azulejos de tablero div porque tendremos aquí cada tablero como un azulejo. Aquí podemos cerrar nuestro div y dentro de este div, queremos renderizar nuestra forma inline. Lo terminaré en un segundo porque por ahora quiero terminar nuestro marcado. Y después formamos el grupo uno en línea para renderizar todos nuestros mosaicos, que son tableros. Y para ello escribiremos aquí nuestra gráfica, así que un enlace de router. Y aquí queremos proporcionar un enlace a cada placa individual. Aquí es donde aquí tenemos un parámetro dinámico. Por lo que aquí podemos proporcionar una matriz con tablas de barra. Y el segundo parámetro que nos ponen aquí, ID de punto de placa de coma. En este caso, generaremos el enlace correcto del router a cada placa individual. Pero para poder tener acceso al tablero aquí debemos escribir y G for loop. Esto es así aquí en G4 y estamos haciendo un bucle a través de nuestras tablas. Entonces aquí vamos a bordo de tableros, y aquí también vamos a faltar nuestra clase. Así que aquí deberíamos tener azulejo de tablero y vamos a cerrar esta a. ahora dentro de nuestro un enlace, queremos proporcionar un div con nombre de los detalles de la placa de clase. Cerremos este div y simplemente rendericemos dentro del nombre. Se aburrirá azulejo y van marcado está totalmente listo. Vamos a comprobar si está funcionando. En realidad tengo aquí una flecha porque usaron propiedad no correctamente. Aquí, deberíamos poner corchetes dobles y no corchetes simples. Vamosa revisar otra vez. Tenemos una narrativa que no tenemos tableros de propiedad, y esto es completamente válido dentro de nuestro script tipo. Estamos recibiendo nuestras placas, pero simplemente tenemos aquí el registro de consola con Dan, guárdalos. Y en realidad debemos hacerlo de esta manera aquí en la parte superior podemos crear tableros propiedad. Será nuestra interfaz de placa la que ya tenemos. Este es un array y por defecto tendremos una lista vacía de nuestros tableros. Ahora aquí en lugar de nuestro registro de consola, simplemente podemos asignar a esta placa, nuestras placas que estamos recibiendo de nuestro servicio. Vamos a revisar otra vez. Como puedes ver ahora no tenemos ningún error, pero tenemos un tablero de errores. El azulejo no existe. Y por eso me gusta tanto TypeScript. Simplemente fue un error tipográfico, pero no lo depuramos en tiempo de ejecución. Simplemente tenemos una validación de TypeScript. Entonces aquí debería estar título, y ahora no tenemos ningún error. No debes ser válido. Echemos un vistazo a esto. Estoy recargando la página y en realidad está buscando de alguna manera. Tenemos aquí nuestra app para bar. Todavía no lo implementamos. Aquí a la izquierda tenemos un enlace Boards y link home. Entonces los enlaces están ahí. Y aquí está nuestro contenido principal con mis tableros en landforms que crearemos un segundo y nuestro primer tablero con el enlace correcto. Y como puedes ver aquí en la parte inferior, es slash port, slash id, lo que significa que nuestra URL también está funcionando. Pero tengo un pequeño error tipográfico en marcado. Como se puede ver, nuestra barra lateral no se ve tan bien porque aquí dentro de una casa de clase div barra lateral izquierda, me perdí contenedor palabra, por lo que debe ser casa lado izquierdo, pero contenedor, como se puede ver ahora, nuestra barra lateral es mucho más grande y se ve mejor. Por lo que como puede ver, hemos conseguido con éxito nuestras placas con este código dentro de nuestro componente con nuestro servicio. Guardamos esta información en nuestra propiedad de juntas y se hizo nuestra lista de tableros. Y en realidad aquí dentro de nuestra red, podemos ver que tenemos una solicitud en el host local para 1001 tableros sin ruta slushy. Y estamos consiguiendo nuestra sola placa que tenemos. Y ahora es el momento de hablar de firma del interior. Entonces, cómo lo usaremos aquí dentro de nuestro HTML. Y para ello, quiero abrir nuestro formulario interior aquí a la derecha para que podamos entender lo que tenemos dentro de nuestro componente. Entonces aquí tenemos un montón de insumos. Entonces, lo que debemos proporcionar para este uso específico, realidad aquí estamos en lo cierto en que tenemos nuestra forma de guión en línea. Vamos a cerrarlo aquí. Y ahora antes que nada, por dentro, quiero dar una clase. Y la idea principal es que esta es la clase padre que podemos estilizar porque queremos aplicar estilos únicos a nuestro componente. Y sólo para recordarte aquí tenemos clases como tierra adentro desde contenedor, tierra adentro de texto y canción. La idea es que esta clase más esta clase anulará cualquier CSS. Y esta es exactamente la idea. Aquí es donde aquí estamos proporcionando alguna clase, por ejemplo, crear forma de tablero. Ahora todos estos clústeres dentro serán anidados más simples dentro de nuestro CSS. Lo segundo que necesitamos aquí es el texto por defecto. Y estos son los textos que veremos en la tarjeta de antemano. Y aquí tenemos nuestros textos por defecto, crear nuevo tablero. Y lo último que debemos proporcionar aquí es manejado someter. Esto es lo que estamos obteniendo de nuestro formulario. Aquí. Podemos escribir, por ejemplo, crear tablero y estamos llegando evento. Entonces, ¿qué hizo este evento, sólo para recordarles aquí, tenemos un mango presentar y es una cadena. Este es nuestro título y no necesitamos aquí tiene título del botón, texto del botón, marcador de posición, tipo de entrada, sólo porque esta es la principal firma de tierra por defecto. Ahora vamos a comprobar si está funcionando donde saltar aquí dentro de la consola y morir directamente tienen un error. No tenemos un método create board, así que vamos a crearlo ahora aquí. Este es un método donde estamos obteniendo una cadena. Entonces podemos decir que aquí estamos consiguiendo un título, es una cuerda y de vuelta volveremos vacío, lo que no significa nada. Y enlista aquí quiero consultar nuestro título, cuales fueron creados dentro de nuestro formulario interior. Ahora estamos llegando aquí y argumento estrecho de tipo evento no es asignable para permitir una cadena. Y en realidad podría ser súper complicado para ti depurar porque podrías pensar, vale, estoy proporcionando aquí algo diferente. Pero el problema no está en esto. El problema es que dentro de este módulo, no inyectamos dentro de nuestro módulo de formulario interior. Aquí es donde aquí dentro del módulo de placas, debemos importar nuestro módulo compartido y estará en línea para módulo. Y la idea principal es que estamos invertidos aquí en un módulo, pero por dentro tenemos un componente de id experto. Es por esto que ahora podemos usar este componente explotado forma interior aquí dentro de nuestro componente. Echemos un vistazo a esto. Como puedes ver, ya no tenemos ese error. Tenemos algo diferente y tenemos aquí no podemos enlazar para formar grupo ya que no es una propiedad conocida de la forma, por eso es lo que debemos hacer. Debemos poner formas reactivas dentro de nuestro módulo de formulario en línea. Es por esto que quiero saltar dentro del módulo de formulario en línea. Y aquí dentro de las entradas, quiero escribir módulo de formularios reactivos. Ahora no deberíamos obtener tal error. Echemos un vistazo a esto. Como pueden ver, todo está verde y ya estamos listos para irnos. Vamos a revisarlos en un navegador donde recargar la página y voila, este es nuestro elemento. Y podría ser súper difícil para ti ahora entender lo que está pasando aquí porque no escribimos ningún CSS y CSS ya estaba preparado rápido. Entonces inspeccionemos este elemento. ¿ Qué tenemos aquí? Como puedes ver, esta es una forma interior y esta es nuestra clase crea forma de tablero. Echemos un vistazo a esto. Lo que tenemos dentro de nuestro proyecto y nuestros estilos. No hemos dicho estilos Source y aquí muchos estilos y ahora estamos interesados en crear forma de tablero. Vamos a abrirlo, y este es nuestro CSS. Esto es exactamente lo que vemos aquí. Esto es crear forma de tablero. Este es nuestro padre. Lo más importante es que dentro de la forma interior, tenemos diferentes estilos. Por ejemplo, aquí está div class inline form container y cómo lo estamos diseñando, estamos usando aquí nuestra clase padre que tenemos justo aquí. Esto es crear forma de tablero y luego contenedor de forma en línea. Y esto es lo que se puede ver aquí. Prefijo siempre aquí, todo hacia el interior de las clases con create board form, que es nuestra forma padre, solo para este uso específico. Entonces así es como estamos haciendo nuestro interior desde súper flexible. Contiene 0 CSS dentro y simplemente definimos todo nuestro CSS afuera para cada caso. Es por esto que aquí definimos, ok, tenemos tierra adentro desde contenedor, debes tener display flex, alinear ítems y justificar contenido. Entonces si necesitamos estilizar en línea a partir de textos, por ejemplo, en este caso, no lo hicimos con estilo, pero también podríamos justo aquí, crear forma de tablero, forma en línea, texto, y darle estilo a este elemento. Así que así es como creamos nuestra impresionante forma interior, que es súper compartible para cada caso. Ahora vamos a comprobar si realmente está funcionando. Por lo que tenemos aquí nuestro texto por defecto crear nuevo tablero. Podemos dar clic en él, y ahora tenemos nuestro aporte y podemos escribir algo aquí. Y ya ven aquí un error. Como puede ver aquí, tenemos entrada con una entrada de formulario de entrada de clase, pero esto es lo que estamos estilo y donde el estilo entrada de formulario en línea, lo que en realidad significa que hicimos un errata allí. Volvamos a saltar dentro nuestro componente, componente de forma interior. Y aquí tenemos nuestra entrada y aquí necesitamos cambiar nuestra entrada de formulario de entrada a la entrada de formulario en línea. Y como pueden ver, estamos teniendo exactamente el mismo problema aquí en textarea. Debe ser entrada de forma en línea. Vamos a revisar otra vez. Estoy recargando la página donde se oculta en el botón, y ahora tenemos una entrada de estilo correcto. Ahora puedo pagar algo como foo y luego golpear Enter y nuestro formulario se cierra con éxito. Vemos crear nuevas tablas de nuevo. Y dentro de la consola, vemos que nuestro título para esto es exactamente nuestra salida dentro del componente de placa. Pero lo que nos falta aquí por completo es crear una placa en el cliente y en el servidor. Y ahora quiero hacer viceversa. Quiero empezar por el front-end y rematar con el Pi. Y entonces se puede ver cómo lo estamos haciendo en orden inverso. Por lo que Festival aquí tenemos nuestro componente Create board inside. Entonces la idea es que aquí usaremos nuestro servicio de tablero. Este es mi servicio dentro de nuestro tablero, debemos crear un nuevo método. Por ejemplo, llamémoslo crear punto. Entonces lo que estamos consiguiendo aquí, simplemente llegamos aquí en el título y es de cadena y vuelta obtendremos una interfaz observable con creado, lo que significa que será aburrida interfaz. Y ahora lo que tendremos dentro, en primer lugar, podemos copiar pegar la URL porque será exactamente la misma. Se trata de tablas de corte y estamos haciendo una solicitud de publicación. Aquí es donde aquí podemos decir que estamos devolviendo este HTTP y no get, sino post. Y por dentro. En primer lugar, debemos proporcionar una URL. Y en segundo lugar, proporcionaremos aquí un objeto con título de campo. Y en realidad este es nuestro cuerpo. Y para nuestra junta con sólo proporcionar el título. Porque en el backend con set sólo dos cosas. Este es el título y el ID de usuario. Y ID de usuario, nuestro backend debe entender por sí mismo porque estamos proporcionando un token con nuestra solicitud y estamos autenticados. El principal problema es aquí que nos estamos dando vueltas escribiendo. Debemos proporcionar insight o un post. Estamos recuperando nuestra interfaz de placa. Y en este caso, creamos con éxito el método Create Board. Y como puedes ver todos nuestros métodos API, buscaré exactamente lo mismo. Esto es simplemente URL y luego HTTP post obtener derrocamiento que necesitamos. Ahora usemos el método de servicio dentro de nuestro componente. Entonces volvamos a saltar. Y aquí está nuestro tablero Create. Y aquí queremos llamarlo esta palabra servicio punto. Y aquí Crear Punto. Y por dentro estamos proporcionando exactamente el título que conseguimos aquí de nuestra forma interior. Y después de esto estamos escribiendo dot subscribe y aquí estamos consiguiendo creado board back. ¿ Qué queremos hacer con este punto? Simplemente queremos cambiar nuestra, estas tarifas de tableros. Esta es manera aquí voy a escribir este punto tableros iguales. Y aquí estamos extendiendo nuestros thes dot boards y luego quieren poner nuestro tablero creado. Así que esencialmente estamos creando aquí en su matriz, donde dentro ponemos todos nuestros campos de la matriz antigua y luego se crean tablero. Por lo que nuestro frente y esto totalmente preparado. Ahora, debemos saltar al backend y crear todo ahí. En el backend. No es tan difícil porque todos estamos creados un modelo para el tablero y podemos usarlo. Sólo nos falta saltar y dijo hermandad S. Y aquí creando su solicitud API. Aquí podemos copiar, pegar , conseguir completamente, y será hasta post en tablas de barra. Aquí debemos usar middleware del sistema operativo porque se trata de una solicitud autenticada. Y aquí estamos usando el punto controlador de la placa, por ejemplo, crear placa. Y ahora debemos crear este método dentro de nuestro controlador. Entonces volvamos a saltar dentro del controlador de nuestra placa. Y aquí queremos crear exactamente lo mismo, pero será una post request para crear un registro. Es por esto que voy a copiar pegar esto por completo y simplemente cambiarle el nombre. Por lo que aquí tenemos nuestro tablero Create y estamos recibiendo aquí nuestra respuesta de solicitud. Y siguiente, y tenemos dentro tratar de atrapar aquí. En primer lugar, en el interior donde el pollo para solicitar uso que esta totalmente fino. Y después de esto, queremos crear un nuevo tablero. Aquí es donde eliminaré esta línea. Entonces aquí voy a escribir que estamos creando nuestra nueva placa y para ello te estamos usando modelo aburrido y luego dijimos Debemos proporcionar un objeto válido. Aquí. En primer lugar, estamos proporcionando un título del tablero de solicitud, el título de punto. Y segundo es el usuario AD y en realidad utilizar en relación con la toma masiva de nuestra solicitud, de nuestro middleware. Por lo que aquí tendremos solicitud punto USA, punto subrayado ID. Y en realidad podemos usar tanto guión bajo ID como una D, no importa. Tenemos a ambos disponibles. Por lo que esta línea no guardará nada en la base de datos. Simplemente creamos aquí una instancia de nuestro modelo. Y después de esto, queremos guardar este registro en la base de datos. Es por esto que aquí podemos probarlo tabla guardada y estamos usando aquí un peso aquí, y compraste dot save. En este caso, estamos guardando este disco y estamos recuperando nuestra pizarra guardada. Y como pueden ver, este es un documento de Word. Entonces después de esto podemos responder con nuestro tablero guardado. Por lo que una vez más, tenemos una solicitud de post, tenemos una acción Create Board aquí. Estamos comprobando que estamos encerrados. Después de esto, estamos usando nuestro modelo de placa para crear una nueva placa con el título que proporcionamos y usamos 3D que no proporcionamos. Pero Dios, de nuestro usuario encerrado y guardamos este nuevo punto dentro de la base de datos. Tenemos nuestra placa guardada de vuelta y estamos respondiendo con esta API. Vamos a comprobar si está funcionando. No tengo ningún error aquí dentro del back-end. Entonces vamos a saltar dentro de cliente aquí quiero golpear crear nueva placa y estoy escribiendo algo y estoy golpeando Enter. Y como pueden ver directamente aquí, tenemos nuestra nueva junta. Revisemos nuestra red. Y en realidad dentro de la red, tenemos la petición de nuestra junta. Y esta es una publicación sobre los puntos de barra de pastel slushy. Y lo que es más importante aquí dentro de avance, esta es nuestra respuesta. Este es un título User ID. Esto es exactamente lo que se guardó dentro de la base de datos, que en realidad significa que si recargo la página aquí, estamos recibiendo dos tableros ahora porque esta información es toda la guardada dentro de la base de datos. Y aquí dentro de nuestra red, estamos recibiendo nuestras placas. Y como pueden ver en la vista previa, estamos recibiendo ya dos tableros y no uno, lo que significa que estamos completamente terminados con nuestra página de tableros. En primer lugar, se renderizará aquí la barra lateral, pero no hicimos nada con ella. También se nos utiliza aquí nuestra forma interior, que es super compartible. Y creamos nuestro servicio, que está hablando con nuestra API, para crear una nueva placa desde esta página. 24. Agregar la barra de top y el inicio de sesión: En video anterior, terminamos nuestra página de tableros, pero nos olvidamos de implementar nuestra barra superior. Y en realidad, este es el TBA en cada página para un usuario conectado, lo que en realidad significa no sólo mi página de tableros, sino una sola página de tablero también, es por esto que debemos crearla como un módulo compartible. Por lo que quiero saltar a nuestra aplicación de fuente de cliente compartida. Y aquí tenemos nuestros módulos y firma interior. Y en realidad aquí quiero copiar pegar este formulario inline completamente y renombrarlo a nuestra lengua. Pero ahora dentro de la masa cambiarlo todo. En primer lugar, comencemos desde nuestro módulo. Entonces aquí tenemos un módulo de barra superior y dentro con no tenemos ningún módulo de formulario reactivo, simplemente tendremos algún marcado y el botón de cierre de sesión. Aquí podemos eliminar este input y debemos cambiar nuestro componente también. Pero antes que nada, cambiemos el nombre de la clase. Debe ser nuestro módulo de barra superior. Ahora saltemos dentro de nuestros componentes. Y aquí no tenemos firma del interior, tenemos nuestra barra superior y tenemos dos expedientes dentro. En primer lugar, será el componente de punto de barra superior punto HTML. Y aquí está nuestro componente de punto de barra superior dot ts. Ahora cambiemos el marcado. Quiero quitar todo en barra derecha más simple, superior. Ahora saltemos a nuestro archivo ts y eliminemos todo de nuestro componente. Ahora quiero cambiar el nombre de nuestro selector a la barra superior solo para dejar claro a dónde pertenece. En realidad, solo tenemos un solo Toba dentro de nuestra aplicación. Podríamos simplemente escribir aquí Tampa, pero como es compartible para nosotros, escribiré aquí arriba, pero justo en este solo lugar, aquí tenemos nuestra URL de plantilla. Esta es la barra superior y nuestro nombre de componente es el componente de litera superior. Ahora puedo quitar los símbolos y simplemente vivir aquí nuestra entrada de componente. Ahora volvamos a saltar dentro de un módulo. Ahora no tenemos este componente de formulario en línea, pero queremos declarar aquí nuestro componente de barra superior y componente experto de TBA porque queremos usarlo afuera. Por lo que nuestro módulo ahora está completamente listo. Sí, no implementamos ninguna lógica dentro, pero todavía no podemos vincularla realmente. Y queremos saltar y dicho módulo de placas y dentro de nuestras entradas podemos agregar aquí módulo de barra superior. Ahora aquí dentro de nuestras placas de componentes, placas, HTML en la parte superior. En lugar de este texto, podemos simplemente escribir barra superior AP y podemos cerrarla aquí. Vamos a comprobar si está funcionando. Aquí no tenemos ningún error. Recargaré la página. Y aquí en la parte superior se pueden ver textos barra superior, lo que en realidad significa que vinimos con éxito nuestro módulo y componente a nuestra página de tableros. Ahora intentemos comercializar nuestra barra de herramientas. Aquí es donde estoy saltando de nuevo dentro de nuestro componente Tombow HTML. Aquí, vamos a escribirlo. Así que en primer lugar, tenemos aquí div con placas navbar de clase. Vamos a cerrar este div adentro. Tendremos un div más, div, navbar, lado izquierdo. Vamos a cerrar este div y dentro en primer lugar, tendremos un enlace a nuestra casa. Esta es la razón por la cual un enlace de router. Aquí estará nuestra barra, y aquí estará el icono navbar de clase. Cerremos nuestra a y por dentro debemos proporcionar una nueva imagen. Por lo que aquí se imagina fuente slash assets slash home dot SVG. Después de esto, tendremos un enlace más al router. Es por esto que voy a copiar pegarlo por completo y va en tablas de barra. Y será Naropa eigenspace, navbar boards icon. Y dentro tenemos otro archivo SVG. Se trata de slash assets slash boards, como pueden ver ahora, cuando estoy recargando la página, tenemos dos bonitos iconos, uno al enlace de la página principal y otro a nuestros tableros. Pero como puedes ver esto aquí, los rieles no son válidos. No los tenemos para nada porque en realidad debemos saltar dentro de nuestro módulo de barra superior. Y aquí, módulo de ruta de importación. Guardemos esto y recarguemos la página. Y como puedes ver ahora, esto realmente enlaza, en primer lugar, homepage y aquí slash boards. Ahora continuemos con nuestro marcado. Después de nuestro lado izquierdo, tenemos nuestro lado derecho. Aquí. Queremos proporcionar nuestra imagen con ácidos de barra de origen, slash logo Trello, punto blanco SVG. Y aquí está nuestra navbar de clase. Más tiempo después de una imagen, tenemos un div con la clase navbar lado derecho. Llamemosa esto t. y por dentro queremos crear un link follow dress, esto es y. aquí estará div class, navbar icon, nav bar, logout icon. Y aquí dentro quiero simplemente escribir texto de gota de registro. Vamos a comprobar si está funcionando. Aquí tenemos nuestros enlaces a la izquierda, tenemos imagen del trailer en el centro, y tenemos un botón como enlace de cierre de sesión a la derecha. Pero aquí no adjuntamos ninguna lógica. Por lo que nuestra barra superior está esencialmente completamente lista. Implementamos todo, pero necesitamos ahora implementar nuestro logout. implementación de Logout es realmente simple. Solo necesitamos eliminar nuestro token del almacenamiento local, limpiar CurrentUser dentro de nuestra memoria y redirigirlo o usarlo a la página principal. Esto es lo que queremos hacer aquí. Queremos adjuntar un evento de clic. Así que aquí vamos a hacer clic derecho. Y lo que estamos haciendo, estamos llamando a nuestro método de cierre de sesión. Y el número debe crear este cierre de sesión dentro de nuestro componente. Entonces, ¿qué queremos hacer adentro? En realidad, quiero almacenar nuestra lógica de logos dentro de nuestro servicio porque esto está relacionado con la autenticación y no quieren escribir esta lógica directamente aquí. Esto es y Lo que debemos hacer, debemos inyectar nuestro servicio de horas, que es nuestro proveedor de servicios dentro de este componente. Y ahora aquí podemos usar nuestro este punto out dot out logout. Y en realidad no tenemos tal método. Debemos crearlo, pero no es todo, pero también después de éste para redirigir al usuario a la página principal porque ya no estamos conectados. Y para ello debemos inyectar aquí router. Por lo que puedo adherir router y será nuestra sequía. Después de colon son nuestro servicio. Podemos escribir aquí este router dot navegar por URL, y simplemente queremos redirigir al usuario a nuestra página principal. Entonces ya casi estamos listos. Solo necesitamos implementar nuestro método de cierre de sesión aquí dentro de nuestra clase de servicio. Por lo que aquí en la parte inferior, voy a escribir cerrar sesión con no necesito aquí nada. Simplemente queremos eliminar nuestro token. Por lo que aquí podemos escribir punto de almacenamiento local quitar artículo y se proporcionaron dentro del objetivo. Esto es suficiente, pero no nos limpiamos la memoria. Y en realidad este usuarios actuales todavía tiene un usuario actual válido. Esto no es bueno. Debemosfijarlo a ahora. Es por esto que este punto de usuario actual punto. A continuación, nos proporcionan dentro ahora y con este único forro, todos nuestros componentes serán notificados de que ya no estamos encerrados. Vamos a comprobar si está funcionando. No tengo ningún error aquí. No necesitamos implementar nada en el backend. Ahora simplemente vamos a golpear aquí cerrar sesión. Y como pueden ver, boom, estoy directamente en la página principal y podemos comprobar que no estamos encerrados. En realidad ha sido nombrado salto en aquí dentro de la aplicación de almacenamiento local. No tengo mi ficha. Es por esto que cuando estoy recargando la página, estoy recibiendo 401 Unauthorized, lo que en realidad significa que implementamos con éxito nuestra funcionalidad de barra superior y cierre de sesión. 25. Creación de módulo de tablero: En video anterior, terminamos exitosamente de implementar nuestra página de tableros. En este video, estamos empezando a implementar nuestra página de una sola placa. Y estamos enfocados aquí solo en crear nuestro módulo básico y componente. Es por esto que quiero saltar dentro del conjunto de fuentes. Y aquí quiero crear una nueva carpeta con nuevo módulo. Y en realidad se podría decir, De acuerdo, pero ¿por qué no empacamos nuestra placa de componentes dentro del módulo de placas y sí, puedes hacer eso, pero quiero dividirlo porque la lógica dentro de estos dos módulos es bastante diferentes. Todavía tenemos que pagar bastante dentro de nuestro módulo de placa. Esto es y Vamos a crear aquí una nueva carpeta que se llama tablero. Y por dentro queremos crear nuestro tablero dot module.js. Además, vamos a crear directamente aquí nuestra carpeta de componentes y la carpeta mu dentro de la cual se llama placa. Y aquí necesitamos dos nuevos expedientes. En primer lugar, el componente de punto de placa dot ts, y en segundo lugar el componente de punto de placa dot HTML. Ahora vamos a tendencia dentro de HTML, palabra hervida, y vamos a crear nuestro componente. Entonces aquí podemos exportar nuestra nueva clase, y se llama componente de placa. Y en la parte superior remasterizado un decorador de componentes. El interior queremos proporcionar nuestro selector y simplemente podemos decir aquí que hemos seleccionado la placa y también estamos debemos proporcionar aquí una URL de plantilla que se vierte componente HTML, nuestro componente de placa es totalmente preparado. Debemos saber crear nuestro módulo. Entonces aquí queremos exportar nueva clase, que se llama molécula de tablero. Y queremos agregar en la parte superior de decorador y módulo GI y proporcionar información, al menos la lista de entradas. Y aquí vamos a tener en primer lugar, módulo común también ahora podemos crear nuestras declaraciones y proporcionar insight, nuestros componentes de placa que acabamos de crear. Por lo que queremos inscribirnos aquí en tu ruta. Aquí es donde aquí en la parte superior podemos crear una nueva propiedad que se llama rutas. Y son nuestros gritos, que es una matriz. Y en su interior debemos proveer un nuevo objeto con trayectoria de campo. Y aquí tendremos la URL boards slash, y aquí tenemos el ID del tablero de colon. ¿ Qué significa esta identificación de placa? Significa que tenemos un parámetro dinámico, lo que significa que aquí tenemos un ID de placa y es diferente para cada placa individual. Después de esto, debemos proporcionar aquí un componente, y en nuestro caso será nuestro componente de placa. También aquí quiero usar la palabra servicio. Es por esto que aquí podemos escribir, podemos activar. Esta es una matriz, y aquí está nuestro servicio requerido. ¿ Por qué estamos haciendo eso? Debido a que esta URL es sólo para usuarios registrados. Si no estamos conectados, no queremos acceder a esta URL en absoluto. Y ahora debemos registrar estas rutas dentro de nuestros insumos. Así que aquí podemos poner el módulo de ruta punto para niño, y aquí estamos proporcionando información sobre nuestras rutas. Y por último pero no menos importante, debemos registrar este módulo dentro de nuestro módulo de app. Así que aquí dentro de nuestras entradas podemos simplemente escribir módulo de placa, y este es nuestro nuevo módulo, que se introduce aquí en la parte superior. Vamos a comprobar si está funcionando. Ya podemos saltar dentro de nuestro navegador, abrir nuestras herramientas de desarrollo. Aquí podemos dar click en nuestro primer tablero. Y como pueden ver ahora no tenemos ningún error. Vemos aquí en el tablero de palabras superior y luego la URL vemos tableros de slash, slash y ellos D de este tablero específico. Lo que tenemos que hacer ahora es conseguir una sola placa para esta página específica. ¿ Por qué es eso? Porque en realidad no saltamos siempre de la página de tableros a nuestra sola pizarra. Y se podría decir, De acuerdo, bueno, en la página de tableros tenemos todos nuestros tableros. Pero entonces de nuevo, cuando estamos en esta sola página y recargamos la página, no tenemos ninguna información importante, lo que significa que debemos obtener este AD de nuestra URL y obtener esta placa específica con el CD. También información adicional posteriormente, como columnas o tareas. Es por esto que quiero abrir nuestra aplicación, servicios compartidos, tableros, niveles de servicio, y la venta se establecerá previamente aquí estamos escribiendo todas nuestras solicitudes al tinte, que están relacionadas con nuestros tableros. Es por esto que aquí podemos crear un nuevo método que se llama aburrirse. Y luego lado para conseguir una placa, debemos proporcionar un ID de placa, que es una cadena, y de vuelta conseguiremos un observable con nuestra interfaz de placa. Ahora, aquí adentro debemos preparar nuestra URL. Por lo que aquí vamos a utilizar entorno Doherty Pi URL plus, y aquí queremos concatenar nuestros tableros más AD. Es por esto que tiene mucho sentido usar cadenas ECMO ScriptSig aquí e inyectar dentro de este entorno DPI URL. Entonces tenemos aquí slash, boards, slash, y aquí hay un AD como argumento. Y en realidad no es un AD, nace y AD. Entonces esta es la URL que queremos buscar del backend. Y ahora debemos devolver nuestra solicitud desde este punto http.get. Y estamos proporcionando información privilegiada obtener nuestro reino de orina que queremos buscar. Pero de nuevo aquí estamos volviendo observables de objetos y debemos especificar que estamos recuperando nuestra interfaz de placa. Ahora vamos a tratar de buscar esta URL. Es por esto que debemos volver dentro nuestro módulo de placa, componentes, componente de placa. Y aquí dentro quiero crear un nuevo método fetch data, y este método devolverá void. Y por dentro queremos usar este método que acabamos de crear para buscar nuestra placa por AD. Aquí es donde aquí estamos debemos proporcionar un constructor y aquí estará servicio de tableros privados que hemos terminado este servicio de Boards. Y dentro de nuestros datos de fetch podemos escribir este dot board service dot, aburrirnos. Estamos proporcionando ID de placa de información, pero aún no tenemos más que una D en este componente. Y en realidad debemos almacenar este ID de placa desde la URL en esto, porque lo usaremos mucho dentro de este componente. Pero si vamos a escribir aquí placa ID igual a cadena, entonces vamos a conseguir aquí una placa estrecha que cavan no tiene inicializador y no está definido en el constructor. Y en realidad, no queremos llegar aquí indefinido porque no será cómodo trabajar más tarde. Board AD es obligatorio para nuestro componente. Y para sacar el perímetro de nuestra URL, debemos inyectar aquí ruta. Por lo que aquí estará sudario privado. Aquí queremos usar ruta activada. Ahora aquí dentro queremos probar y leer esta sequía activada. Entonces aquí quiero obtener el ID de la placa como parámetro y estamos usando aquí este punto sudario, puntos, snapshot, dot params map get here will be board Id. Y así es como normalmente obtienes parámetros de la URL dentro de Angular. Pero como pueden ver, esto es lo que estamos recuperando. Estamos recibiendo tensión ahora, esto es totalmente razonable porque Angular puede estar seguro de que este parámetro siempre está ahí. Es por esto que lo que podemos escribir aquí, porque realmente queremos guardar sólo una cadena. Podemos comprobar y lanzar un error si no está ahí. Por eso aquí podemos escribir. Si no tenemos nuestro tablero AD, entonces lanzaremos una flecha. Aquí se lanzará nuevo error, por ejemplo, no se puede aburrir AD de URL. Y después de esto, simplemente escribimos este ID de placa es igual a ID de placa. Y como se puede ver en este caso donde se inicia sesión dentro de la cadena, porque aquí comprobamos para TypeScript que no es ahora. Y si es ahora, entonces estamos lanzando un error. Este es en realidad el mejor en el que podemos hacer con el fin de obtener una cadena en este componente. Porque no será cómodo revisar cada lugar en el que estamos obteniendo este parámetro. Y ahora aquí dentro de buena tabla, podemos proporcionar información. Este tablero de puntos AD. Después de esto podemos escribir dot subscribe y estamos recuperando nuestro tablero y podemos asignarlo y guardarlo en alguna parte. Pero al menos por ahora, solo quiero consola log nuestra placa Comma board, pero no llamamos a esto fetch data en alguna parte en absoluto. Es por esto que aquí debemos escribir implementos en él. Y ahora después de nuestro constructor, podemos en junio en él y dentro podemos llamar a esto fetch data. Y en realidad cada vez en cada componente donde necesito buscar algunos datos, prefiero crear un método adicional para esto, que se llama fetch data. Y no sólo tirar esta lógica dentro y unirse a ella sólo para hacerla más limpia. Como se puede ver cuando estamos saltando al navegador, estamos haciendo ahora solicitud en nuestra slash api slash, forward slash y este ID específico del parámetro momma, lo que en realidad significa que con éxito implementado en el cliente o cuando compró el módulo e incluso obtuvo nuestra placa desde el backend. Obviamente no implementamos una parte de back-end, y lo haremos en el siguiente video. 26. Conseguir una sola tabla: En video anterior, implementamos con éxito la parte front-end de nuestro componente de placa y módulo de puerto. Pero ahora en el backend, queremos implementar conseguir una sola placa. Esta es exactamente la petición que aquí se rompe. Y creo que implementamos muchas cosas juntos y tú ya no sabías cómo hacer eso. Es por esto que te recomiendo ampliamente que lo implementes por tu cuenta. Como siempre dicen, tienen tres niveles diferentes para EU nivel número uno, solo pausas el video aquí y hazlo tú mismo. Al final, debes llegar aquí nuestra pizarra desde el backend, nivel número dos, hablemos de ello. Entonces, ¿qué necesitamos implementar? En primer lugar, quiero abrir aquí nuestro servidor fuente servidor. Y aquí debemos proporcionar en su solicitud y va a engendrar en slash, api slash boards y luego Boyd AD, y debe ser un parámetro dinámico. Se debe proteger la sequía. Dentro de nuestro controlador de placas, debemos crear una nueva acción. Ahora estamos saltando aquí dentro de los controladores hervidos, y simplemente hacemos exactamente lo mismo como nos olvidamos de las tablas. Pero aquí Groupon para encontrar un solo tablero con la d de este tablero desde la URL. Entonces, si quieres hacer un nivel para simplemente pausar el video aquí, y si lo único que quieres es hacerlo juntos, Empecemos. En primer lugar, debemos saltar de nuevo dentro nuestros niveles de servidor aquí y crear una nueva URL de API. Por lo que aquí tendremos apt-get slushy pie slash boards y aquí riesgo colon board ID. Ahora queremos crear un nuevo método. Es por esto que saltaré dentro o controladores de puertos y aquí nos hemos aburrido. Ellos quieren copiarlos por completo porque serán súper similares. Entonces aquí copio pegado, me aburro, y quieren nombrar este método, se aburren. Y aquí estamos recibiendo respuesta de solicitud y siguiente, y estamos comprobando si estamos encerrados. Ahora aquí en lugar de buscar, todas las tablas, querrán usar find one para encontrar sólo una sola tabla. Y en realidad aún mejor podemos usar aquí buscar por ID. También es un método el cual es posible y el interior de vermis solo proporcionan una identificación de este deporte. Es por esto que podemos eliminar un objeto y más sencillo aquí mismo, solicitar puntos params dot board Id. Y de vuelta aquí estamos recibiendo nuestra placa y simplemente enviamos esta bolsa de cartón dentro de nuestra API. Ahora vamos a comprobar si usamos nuestro método correctamente aquí, y aquí está el controlador de la placa dot get boards. Esto no es correcto. Debería aburrirse. No tenemos ningún error aquí dentro de nuestra API e implementamos con éxito bajarnos del tablero. Echemos un vistazo a esto. Estoy recargando la página, pero no tengo un error. Aquí. Estamos recibiendo nuestra junta por d, y aquí está la información de la base de datos. Contamos con un título D y ID de usuario. 27. Agrega la corriente de tablero: En video anterior, implementamos con éxito la medición de nuestra placa única desde la API. En este video, quiero compartir mi idea cómo usaremos esta placa y la guardaremos. Y en realidad podría ser un poco complicado. ¿ Por qué es eso? Porque en realidad aquí dentro del cliente, tenemos nuestro componente de placa y simplemente podemos almacenarlo en una propiedad aquí. Esto está totalmente bien. Podemos hacer eso. Pero después tendremos un modelo y aquí es donde las cosas serán diferentes. Sólo por mencionar, tenemos aquí una página con el tablero y luego golpeamos en una tarea para abrir esta tarea dentro del modelo, el principal problema es cuando recargamos la página, queremos volver a esa tarea específica, lo que significa que queremos tener en nuestra URL slash board slash board ID tareas de slash task ID. Después recargamos la página y buscamos primero nuestro tablero, después tal vez todas las columnas, todas las tareas. Y queremos resolver esta tarea dentro del modelo, pero ¿tiene un medio? Estamos ahorrando, por ejemplo, nuestra placa aquí dentro del componente de placa, pero realmente no podemos usar esta información dentro de nuestro componente de tarea. ¿ Por qué es eso? Porque más adelante registraremos aquí nuestro componente de tarea como el componente hijo de este camino. Y realmente no podemos acceder de ninguna manera a algunos datos que se almacenaron dentro este componente de placa desde el niño. ¿ Cuál es la solución para este problema? Debemos utilizar un servicio. ¿ Cómo podemos hacer eso? En primer lugar, dentro de un tablero, quiero crear una nueva carpeta que se llama servicios. Y aquí podemos crear board dot service, dot ds. Aquí. No debemos mezclar nuestro servicio de placa aquí con nuestro servicio de tableros, que cuenta con tableros de servicios compartidos. Este servicio es solo para recuperar datos del backend. Si queremos conseguir nuestras tablas, usamos buenas tablas, aburrimos, creamos tablero y demás. Pero lo que estamos haciendo dentro del tablero, esto es una especie de estado para esta página específica, lo que en realidad significa que aquí vamos a almacenar nuestras columnas del tablero, tareas, todo lo que tenemos en esta página, y luego todos los componentes de esta página pueden usar el servicio para obtener esta información a través de streams. Es por esto que aquí queremos crear nuestra clase y se aburrirá el servicio. Y aquí en la parte superior no debemos olvidar usar un inyectable. Lo que quiero hacer ahora aquí, exactamente lo mismo que hicimos con nuestro usuario actual. Sólo para recordarles, teníamos aquí, nuestro servicio. Aquí en la parte superior, creamos este flujo de usuario actual que podemos usar en nuestra aplicación. Nosotros queremos hacer exactamente lo mismo. Ahora aquí, queremos crear aquí Tablero era más alto y esto es una corriente y esto está en su tema de comportamiento. Y estamos llegando aquí ya sea la interfaz de la placa encendida. Y aquí adentro estamos poniendo ahora sólo porque por defecto no tendremos tablero. Todavía no lo hemos traído. Y luego después de que busquemos esta placa, podemos configurarla y actualizar el stream. Este es camino aquí debemos crear un nuevo método, dicho tablero. Y dentro del útero debe proporcionar nuestra placa, que es nuestra interfaz de placa, y esto es vacío. Y aquí lo que queremos hacer, buena para llamar a este dardo Stoller punto siguiente porque queremos actualizar un arroyo y retirarnos dentro de nuestra pizarra. Ahora no debemos olvidar registrar nuestro servicio de placa dentro de un módulo. Entonces aquí debemos crear nuestros proveedores y estamos escribiendo nuestro servicio de tablero en su interior. Y ahora podemos usarlo directamente dentro de nuestra placa de componentes. Por lo que no queremos crear aquí tablero de la propiedad. En realidad queremos inyectar aquí dentro de nuestra nueva propiedad constructor. Y será aburrido servicio de servicio a bordo. Y como pueden ver, esta es la diferencia que tenemos aquí, tanto servicios, servicio de juntas y servicio a bordo. Y esta es una diferencia enorme. En primer lugar, este es servicio para trabajar con eBay. El segundo servicio es más como un estado. Y lo que podemos hacer ahora con obtener datos después de suscribirse, podemos escribir y dicho este servicio de placa, dot set board. Y nos proporcionan dentro de nuestro tablero. En este caso aquí estamos almacenando esto dentro de la corriente. Y ahora podemos usar esta información no sólo dentro de nuestro componente de placa, sino más tarde también dentro de nuestro componente de tareas. Y esto es extremadamente flexible y la mejor solución que me puedo imaginar para compartir datos entre dos rondas. Y sólo para comprobar que está funcionando, quiero crear aquí en la corriente superior para el tablero. Así que en realidad aquí tenemos una corriente de placa y sabemos que esta es una interfaz observable de placa. Entonces estamos mostrando aquí debemos conseguir un tablero. No hay otra posibilidad. Y para evitar este error de script de tipo sin inicializador, escribiremos este código directamente en constructor. Esto está totalmente bien. Entonces aquí podemos escribir este tablero de puntos con dólares iguales, y aquí queremos usar el servicio almacenado punto. Y aquí tenemos nuestra cuerda, que es tablero dólar. Y se podría decir: De acuerdo, ¿por qué no usamos esto directamente? Porque aquí dentro de las placas de corriente, podemos conseguir ahora dentro de nuestro componente con no necesita null en absoluto. Simplemente queremos trabajar con nuestro componente cuando la placa no está ahora, por eso lo que podemos escribir aquí, podemos escribir pipe y luego filtrar el resultado. Por lo que aquí sólo filtro Boolean eliminará. Ahora a partir de aquí, no llegaremos nada si es ahorita, solo actualizaremos nuestra pizarra. Si conseguimos un tablero, y ahora podemos saltar dentro de nuestro archivo HTML y renderizar aquí nuestro stream board solo para probar, es por esto que board dollar. Y aquí estamos usando una sola tubería para renderizar esta información. Echemos un vistazo a esto. Estoy recargando la página y estamos consiguiendo objeto, objeto porque esencialmente tenemos adyacente y debemos pasarlo con Jason pipe. Echemos un vistazo de nuevo a esto. Estamos llegando a nuestra junta directiva, y como pueden ver, esta es nuestra información de nuestra junta la que preobtuvimos. Esto es Título, usuario, ID de usuario. Entonces, esencialmente, la idea es que este servicio tenga información dentro de él, pero no necesitamos almacenar esta información alguna manera dentro de nuestro componente de placa. Simplemente usamos streams del servicio y los usamos dentro de cada componente donde necesitemos, por ejemplo, escribiremos exactamente el mismo código dentro nuestro componente de tarea si necesitamos el acceso para nuestro ave, por ejemplo. Lo que es más importante, podemos mapear datos como este, lo cual es realmente conveniente. 28. Creación de un servicio de socket: En este video, estamos iniciando una parte interesante de nuestra aplicación y está configurando nuestra conexión de capa de socket. Y sólo para recordarles, ya lo configuramos. Entonces Quetta, estás en el back-end. Por lo que aquí dentro de nuestro código podemos abrir el servicio de prueba de servidor fuente. Y aquí en la parte superior tenemos IR nuevo servidor, y luego aquí tenemos IR en conexión. Y aquí está nuestra consola log connect, lo que en realidad significa que lo configuramos con éxito. Entonces sube al back-end, y ahora debemos implementarlo en el cliente. Y para esto usaremos exactamente la misma biblioteca que estamos usando en el back-end. Sólo para recordarte aquí usamos socket. Esto es y aquí dentro de la consola, quiero saltar dentro de nuestra carpeta de cliente. Y aquí quiero instalar un nuevo paquete el cual se llama socket Datta su cliente dash. Y este es exactamente el mismo paquete del mismo equipo, pero es para configurar a nuestro cliente. Y este paquete no tiene nada que ver con angular. Esto es sólo un JavaScript simple. Entonces, ¿qué queremos hacer ahora en absoluto? En primer lugar, dentro de nuestra aplicación fuente de clientes , servicios Insight compartidos, quiero crear un nuevo servicio y será nuestro servicio para trabajar con socket. Esto es camino aquí. Nombremos su socket, servicio DOD dot ts. Y ahora dentro debemos crear nuestra clase que se llama servicio de socket. Y obviamente no debemos olvidar inyectable aquí en la parte superior. Entonces lo que queremos crear aquí, queremos crear una función que genere para nosotros una nueva conexión. Es por esto que aquí podemos escribir conexión de socket setTab. Y aquí estamos consiguiendo nuestro usuario actual. Por qué actual lo usan porque en realidad quieren enviar algunos datos privados a través de la conexión de socket. ¿ Por qué es eso? Porque en realidad usaremos socket. Estás en la página del tablero, lo que significa que nuestro usuario está registrado. Pero por dentro empaparnos en los yoguis, no tenemos tal sistema como GET, como lo usamos para la autenticación. No tenemos encabezados HTTP allí y no podemos adjuntar nuestro token a nuestro socket. Pero hay una manera de pasar nuestro token mediante el uso de socket. Esta es la forma de hacerlo posible. Queremos configurar esta conexión para nuestro usuario actual. Y luego podemos lanzar el token desde el CurrentUser dentro de nuestra conexión de socket con cada solicitud. Entonces como dije aquí, estamos recibiendo como argumento al usuario actual y esta interfaz de usuario actual. Y de vuelta nos estamos quedando vacíos. Ahora dentro de aquí queremos usar nuestro ion. Y en realidad debo entrar aquí en la parte superior o su tambor. Y aquí tenemos nuestro cliente IO socket. Ahora aquí dentro de la sala de emergencia, puedo proporcionar una URL donde queremos conectarnos. Y en realidad aquí sólo podemos intentar HTTP y nuestro puerto del servidor. No queremos usar eso porque para esto tenemos variables de entorno, lo que en realidad significa que queremos saltar dentro del entorno fuente de los clientes, sí, y aquí como tenemos nuestra API Euro, queremos crear socket una URL. Aquí es donde aquí podemos crear sockets URL, y este es el http localhost. Aquí tenemos 4,001 y no necesitamos poner aquí slash ocho pi porque configuramos nuestra conexión de capa de socket directamente en nuestro servidor. Y se podría decir, está bien, pero podríamos reutilizar esta API al igual que una sola propiedad para API URL y socket IO. Sí, Podríamos, pero te recomiendo ampliamente dividirlo en dos propiedades diferentes. En este caso, es más fácil dividirla más tarde si deseas mover tu capa de socket a otro servidor web. Ahora dentro de nuestro servicio de socket, podemos usar nuestro entorno. Esto es camino aquí, medio punto, tenemos sockets, URL. Esto es exactamente lo que debemos dar adentro hacia afuera o su conexión. Y excelente. Ahora, además, quiero proporcionar el token de nuestro usuario actual porque en realidad configuramos conexión de capa de socket solo para el usuario de inicio de sesión, lo que significa que nunca tenemos un caso de que no tengamos este token. Esto es camino aquí, podemos escribir horas de campo y luego lado estamos proporcionando hablando, que es el token de punto de usuario actual. Y en realidad aquí como segundo argumento, estamos proporcionando un objeto con nuestro campo y este outfield dentro del socket IO es exactamente para autenticar a un usuario. Y lo que estamos recuperando es que el resultado de nuestra AR es esta conexión de socket. Aquí es donde quiero escribir este socket es igual a IR. Y aquí debemos crear esta propiedad, ella dentro del socket. Y como pueden ver, esta es nuestra dos entrada. Esto no es correcto. Queremos importar el socket desde el cliente Socket Layer, o está indefinido porque por defecto no tenemos un socket. Y luego en algún momento lo configuramos mediante el uso de conexión de socket de configuración. Además de nuestra función de configuración, quiero crear la función de desconexión, lo que en realidad significa que en algún momento nuestro usuario estará bloqueado y queremos desconectarlo de nuestra conexión de enchufe. Aquí es donde aquí vamos a crear una función adicional de desconexión. Y esto es realmente sencillo. A lo que queremos llamar aquí, queremos escribir este socket punto. Y aquí tenemos un método que se llama desconexión. Y como se puede ver aquí, no me sale un autocompletar porque en realidad este socket posiblemente puede ser indefinido él. Y hay dos varianzas posibles de cómo podemos arreglarlo. En primer lugar, aquí sólo puedo poner signo de interrogación y ya termino. Pero no quiero escribir el código así. De verdad quiero notificar a un desarrollador que si no tenemos socket, tenemos un problema. Realmente no podemos usar desconexión antes de configurar nuestra conexión. Si no tenemos este socket de punto, entonces queremos lanzar y estrechar. Por lo que aquí se lanzará nuevo error. Y por ejemplo aquí no se establece la conexión de socket . Por lo que nuestro Servicio de sockets básicos se crea con éxito. Ahora debemos en algún momento implementar la configuración de la conexión de socket y realmente quieren hacerlo dentro de nuestro módulo de aplicación. ¿ Por qué es eso? Porque cada vez que estamos autenticados y Berlín, ahora que tenemos CurrentUser, querríamos configurar una conexión. Aquí es donde podemos saltar dentro de nuestro componente de aplicación. Y aquí tenemos un siguiente. Y sólo para recordarles, aquí estamos recibiendo usuario actual cada vez que iniciamos nuestra aplicación. Y aquí estamos configurando usuario actual y podemos, antes de aquí, configurar una conexión. Aquí es donde aquí podemos escribir privado y tenemos un servicio de socket, y este es nuestro servicio de socket. Ahora aquí antes podemos escribir que tenemos aquí estos puntos, servicio de socket, punto, conexión de socket de configuración. Y en realidad aquí estamos consiguiendo nuestro usuario actual y lo podemos dar por dentro. Vamos a guardar esto y comprobar si está funcionando, como puedes ver aquí con no tener ningún error y luego saltar al navegador. Y aquí está rojo, estamos recibiendo un error. Ningún proveedor para el servicio de socket terminó esto porque hemos creado nuestro servicio de socket, pero no inyectamos dentro de un módulo. Y aquí estamos usando el servicio de socket dentro de nuestro componente de aplicación, lo que significa que tiene sentido inyectar este módulo dentro de nuestros proveedores. Es por esto que aquí podemos escribir servicio de socket y estamos bien para ir. Echemos un vistazo a esto. Estoy recargando la página y estamos recibiendo otro error. Entonces sea lo que sea que estemos recibiendo, estamos haciendo esta solicitud en socket un hilo. Se puede ver aquí, pero estamos recibiendo un error. Tenemos un curso, que significa política de origen cruzado. Porque aquí con no tienen control de acceso permitir cabecera origen en el recurso solicitado. Y esto es en realidad completamente correcto y debemos unidad dentro de Serum por qué está sucediendo en absoluto, porque nuestro servidor no permite conexiones desde otro host y seguro usará aquí otro host, este es anfitrión local para 1200. Es por esto que debemos ir dentro de una fuente de servidor. Y aquí tenemos nuestros niveles de servidores, y aquí debemos configurar nuestro servidor IIS un poco diferente. Entonces aquí como segundo parámetro, podemos proporcionar algunas opciones y estamos buscando la opción que se llama núcleos. Y por dentro podemos establecer origen estrella y realmente empezar significa que estamos permitiendo conexiones desde cualquier host. Y en el proyecto ferroviario, es posible que desee escribir aquí solo un host de su dominio. Pero para nuestros propósitos, estrella de origen es completamente válida. Vamos a comprobar si está funcionando. Estoy encantada ahora la página y no tenemos ningún error. Ahora, podemos saltar dentro de la red, y aquí como pueden ver, tenemos conexiones WebSocket. Entonces aquí nos estamos metiendo en cientos. Y si puedes ver en tu navegador algo como esto, significa que tu petición de la conexión de socket es esa. Y en realidad ahora podemos saltar dentro de nuestra consola backend. Y aquí podemos ver conectar tres veces porque cada vez que recargo la página, hay una nueva conexión establecida, lo que en realidad significa que hemos creado con éxito una conexión socket en el cliente. Ahora la única pregunta es, ¿qué pasa con la desconexión? Creamos una desconexión pero no pudimos usarla donde queramos usarla. En realidad querría usarlo dentro del cierre de sesión. Aquí es donde podemos saltar dentro de nuestra app, Servicios de Salud y aquí resultados servicio. Y aquí tenemos nuestro logout. Y aquí en primer lugar quitamos nuestra conversación, luego cuando nula y nuestro usuario actual. Y aquí podemos usar socket para desconectar nuestra conexión porque sabemos cómo lo usamos ya no está bloqueado. No necesitamos esta conexión de toma. Esto es y aquí dentro del constructor, podemos inyectar nuestro nuevo servicio de socket, y este es nuestro servicio de socket. Ahora aquí en la parte inferior dentro de nuestro logout, podemos escribir este socket service dot desconectaremos, y desconectaremos nuestro usuario actual y cerraremos nuestra conexión de socket. 29. Cómo unirse y salir de la junta: En este video, quiero mostrarles cómo podemos usar tomas en el ejemplo de conectarnos a nuestra placa y desconectarlos a la placa. ¿ Qué significa alguna vez? En realidad inserte el socket IO. Tenemos tal delgada que se llama habitaciones, lo que en realidad significa cuando no solo notificar a nuestro backend con algún mensaje socket u otro cliente cuando definen todos los clientes que están conectados a habitación. Y en realidad cuando estamos hablando de tablas dentro de tráiler, mucho sentido. Realmente queremos notificar sólo a los usuarios que se unieron a este tablero específico. Lo que en realidad significa, por ejemplo, que tenemos dos usuarios diferentes. Un usuario abrió el tablero, lleno. Formulario de tablero abierto de segundo usuario. Ahora el primer usuario creó una tarea y debemos notificar a un segundo usuario sobre la creación de esta tarea porque está conectado a esta sala o a esta pizarra. Aquí es donde en este video implementaremos cómo podemos unirnos a nuestra junta y salir de nuestra junta. Y para ello, debemos crear un nuevo método dentro de nuestro servicio de socket. Es por esto que quiero abrir nuestros niveles de servicio de circuito aquí, crear un nuevo método que se llama emmet. Por qué necesitamos este método en absoluto, realidad insights socket sí mismo. Tenemos estos puntos, socket, dot and meet, y podemos proporcionar solo una cuerda como foo. Será nuestro mensaje de emitir. Y aquí podemos proporcionar alguna información, por ejemplo, cadena Ambar. Así es como normalmente podemos usar sockets dentro de nuestra aplicación, pero quiero envolverlo en un método adicional por dos razones. En primer lugar, queremos aislar una biblioteca y crear una envoltura. En este caso, siempre podemos tirar este uso, por ejemplo, socket a su cliente y usar alguna otra biblioteca. En segundo lugar, aquí quiero validar que estaban conectados para encastrar un hilo. Esta es manera, aquí está nuestra imagen y estamos llegando aquí, primer lugar, nuestro nombre de evento, es sólo una cadena. Y si no sabes dentro de socket IO, siempre estamos emitiendo solo con cadenas únicas, que estamos escuchando en otros clientes o dentro de nuestro backend. Y el segundo aquí será un mensaje aquí dentro escribiré cualquier desperdicio, cualquiera, porque es un mensaje podemos proporcionar una cadena y ningún objeto ni ningún dato que nos guste. Y aquí estamos consiguiendo un vacío, pero lo queremos hacer por dentro. En primer lugar, voy a copiar pegar esta línea para comprobar la conexión del socket. Porque si no tenemos una conexión de enchufe, no podemos usar una carne. Después de esto. Simplemente podemos usar este socket dot commit y se proporcionaron dentro de nuestro nombre de evento coma. Y aquí está nuestro mensaje. Por lo que nuestra función de imagen está lista y ahora podemos usarla. Y en realidad quiero usarlo directamente dentro de nuestros componentes de placa de aplicación, componente de placa, componente ts. Y aquí tenemos en junio método init. Y en realidad es un buen lugar para poner justo aquí uniéndose del usuario, lo que en realidad significa que cada vez que se carga este componente, significa que los usos saltaron a este específico ruta y debemos unirnos al usuario si cambió la ruta y queremos salir de esta sala o de esta tabla. Entonces con desconectar a un usuario de esa habitación específica. Por eso lo que aquí podemos escribir. En primer lugar, debemos inyectar aquí nuestro servicio de socket. Este es y, aquí estará el servicio de socket, y este es nuestro servicio de socket. Ahora aquí podemos usar este método y escribir este dot socket service dot. Y aquí tenemos nuestra imagen y debemos proporcionar información primero del nombre de nuestro evento y en segundo lugar algunos datos. Entonces esencialmente lo que queremos escribir aquí, algo así como tableros se unen. Y aquí nuestro mensaje será, por ejemplo, un objeto con tablero Id. Y aquí estamos proporcionando el ID del tablero de esta URL específica. Esta es la identificación de esta placa. Ya tenemos esta información. Por qué empacé esta información dentro del objeto. Porque desinflar, si por alguna razón queremos poner aquí más información con el objeto, podemos hacerlo directamente. Si tenemos aquí, una cadena debe reflejar todos estos lugares desde la cadena hasta el objeto. Y como pueden ver aquí, podemos emitir cualquier cepa. Podemos escribir aquí para. Está totalmente bien, pero tendremos muchos eventos de socket diferentes y queremos organizarlos de alguna manera. Es por esto que aquí prefiero usar tableros, que es un plural de alguna entidad, como tableros o tal vez columnas o tareas. Y aquí tenemos lo que pasó? Por ejemplo, nos hemos unido, esto es sólo un comienzo. Después podemos hacer algo así como éxito conjunto si está en un proceso sincrónico, lo que en realidad significa por ahora, las aves se unan está bien. Lo que no está bien es que estamos escribiendo aquí una cadena donde justo en TypeScript y debemos usar innumerable. Y en realidad innumerables son sólo algunas constantes dentro de una sola propiedad. Es por esto que aquí a la derecha, quiero abrir nuestra carpeta compartida, y aquí tenemos tipos en. Aquí. Quiero crear eventos de socket dot in m dot ts. Aquí. Ahora podemos exportar nuestra enum, que es el socket ENM de la ONU, y esto es sólo un objeto aquí podemos escribir tableros de campo unir iguales, y aquí estamos escribiendo tableros unirse. Entonces, antes que nada, aquí tenemos algún estilo de código. Segundo Luba no dibujado aquí, una cuerda. Justo aquí, eventos de socket en m dot boards chain, en este caso en cada lugar donde se usa la misma cadena, pero nunca lo escribiremos incorrectamente porque estamos usando aquí Justin unum, que es una variable y no una cadena simple. Entonces, lo que hace esta línea, emite para nuestro back-end en nuevo mensaje de E/S de socket. Aquí se proporcionaron alguna cadena y algunos datos. Por qué estamos proporcionando exactamente estos datos, porque queremos en el backend unirse a nuestro usuario actual. Por lo que nuestra conexión de toma de corriente a la placa específica. Y esto es suficiente para que nuestro backend reaccione por ello. Ahora, es el momento de implementarlo en el lado back-end, aquí es donde debemos abrir nuestra fuente de servidores. Y aquí tenemos nuestra prueba de servidor. Y aquí en el fondo tenemos nuestra propia conexión. Esto está totalmente bien. Ahora dentro podemos eliminar este log de consola y queremos reaccionar con nuestro punto de socket encendido, en algunos eventos y en realidad escuchar lo que estamos esperando. Estamos esperando juntas juntas juntas. Pero aquí tenemos exactamente el mismo problema donde dentro backend y no queremos escribir solo cadenas simples. También queremos organizarlos en la enum. Y en realidad vamos a duplicar exactamente todo el archivo de nuestros eventos socket en el cliente y en el jarabe. Y se podría decir, vale, esto no sirve de nada. Podemos crear un solo archivo. Podrías, pero potencialmente puedes dividir tu cliente y servidor en diferentes repositorios y luego puedes compartir cualquier cosa entre ellos. Es por esto que realmente quiero aislar a nuestro cliente y nuestro back-end. Entonces lo que queremos hacer aquí dentro de nuestros tipos, podemos crear exactamente lo mismo. Será que nuestros eventos socket no enum dot ts. Y ahora dentro se podrían colocar exactamente el mismo código que tenemos en el cliente. Lo que quiero hacer ahora aquí, en lugar de que los pájaros se unan, puedo escribir eventos de socket en m dot boards churn. Y como se puede ver que esta entrada es de tipos eventos socket. Entonces así es como nos suscribimos a nuestro evento desde el cliente con socket, la lengua, pero de donde estamos obteniendo nuestro socket, este es nuestro primer parámetro aquí. Como puedes ver, esto es socket y aquí tenemos socket dot on, pero aquí debemos proporcionar dos argumentos. En primer lugar, es nuestro evento, y en segundo lugar es nuestro Kohlberg. Entonces, lo que estamos consiguiendo aquí donde típicamente se obtiene en algunos datos, y estos son exactamente los datos que proporcionamos del cliente. Podríamos escribir aquí alguna lógica, pero no queremos, porque en realidad escribimos todo lo que está relacionado con nuestros tableros dentro de controlarlo. Y tiene mucho sentido escribir todo nuestro código IO socket también dentro del controlador. En realidad no nos importa si es Socket Layer o justice GTP. Podemos aislar todo este código dentro de nuestros controladores. Aquí es donde aquí podemos usar el punto controlador de nuestra placa, por ejemplo, unir placa. Esto es lo que queremos implementar. Y ahora dentro en primer lugar, quiero dar mayor que socket y luego datos. Y lo haremos en cada caso cuando estemos trabajando con Socket Layer y daremos esta información en su interior. Esto es súper similar a lo que estamos haciendo con nuestro Express. Aquí. Estamos usando control de la natalidad o crear tablero. Y en realidad así es como damos directamente dentro de la respuesta de solicitud. Y a continuación, por qué estamos haciendo eso. En realidad, cuando estamos proporcionando todo dentro, podemos usar lo que queramos. Si necesitamos un y'all, podemos usar un hilo cuando es ciclismo. Podemos utilizar esta información si necesitamos algunos datos del evento, también podemos usarla. Y ahora sólo nos falta poner en práctica nuestra articulación. Es por esto que quiero saltar dentro de nuestros deportes de controlador. Y aquí en la parte inferior debemos crear una nueva función. Aquí tenemos conos expertos, Joan board, y estamos llegando , antes que nada, Iowa, que es un servidor. En realidad tenemos aquí un montón de inversa. Es por esto que hay que ser cautelosos, pero necesitamos aquí debemos ingresar nuestro servidor desde socket IO. Esto es importante. Aquí es donde estamos consiguiendo un hilo y es nuestro servidor como tipo. Después de esto, tenemos nuestro zócalo. Y el socket también viene del socket IO. Y por último pero no menos importante aquí están nuestros datos. Y en realidad sabemos que dentro estamos proporcionando ID de placa, que es una cadena, y esta es suficiente información para nosotros. Entonces así es como se verá una función típica dentro del controlador cuando estamos trabajando con Socket Layer. Y ahora lo que queremos hacer en el interior, queremos simplemente escribir socket dot join. Aquí estamos proporcionando ID de placa de punto de datos. Y esto es todo, esto es sólo una sola línea. Entonces lo que hace este código, así que Wed se muestra en esta conexión de socket actual. Por lo que nuestro usuario actual a esta placa ID, y esto es sólo una cadena, nada más. Pero en realidad cuando estamos escribiendo join y algunos foo, simplemente le decimos a socket para unir socket actual a esta sala con este nombre, pero no tenemos habitaciones en nuestra aplicación, tenemos tableros, pero la idea es exactamente lo mismo, donde unirse a nuestros usuarios al tablero y luego recibirán nuestros mensajes a este tablero específico. Ahora hay algunos que quieren probar que nuestro código está funcionando. Es por esto que aquí solo quiero escribir consola log server, socket join. Y aquí escribiré coma data dot board AD en este caso. Pero ahora, cuando vemos este log de consola, significa que el emitido con éxito nuestro mensaje desde el cliente o el backend. Y nuestro backend reaccionó al mensaje y unió a nuestro usuario a esta sala. Esto es y aquí vamos a saltar dentro nuestro backend y recargar la página. Y como pueden ver, no tenemos ningún error. Y en realidad nuestro código con este componente de placa y esta imagen se activará porque nuestro componente fue renderizada. Y ahora podemos saltar dentro de la consola y puedes ver circuito de servicio o tu join. Y aquí está el d de nuestra junta. Aquí es donde nos estamos uniendo a nuestra toma de corriente. Y como se puede ver dentro del navegador, esta es exactamente la d de nuestro tablero. Y ahora queremos hacer exactamente lo mismo con vivir y comer. Y en realidad lo que querían hacer, quiero crear aquí método adicional, esto inicializar oyentes y en realidad todos mis oyentes como suscripciones, por ejemplo, siempre empaco en este método adicional. Este es el mismo nombre en como por ejemplo, fetch data. En este caso, no empacan mucha información insight en junio en ella. Aquí es donde quiero escribir, inicializar oyentes y suscribirme aquí para vivir en una página. Y en realidad podemos hacer esto si estamos usando una app de sequía y tenemos aquí una sequía, pero no un router. Este es camino aquí debemos usar router y es nuestro trabajo. Y ahora aquí podemos escribir suscripción para vivir en una página. Y aquí podemos escribir este punto router dot events. Y aquí nos hemos suscrito. Y en realidad nos suscribimos, vamos a conseguir aquí acceso a cada evento único que es disparado por un router. Y lo que queremos escribir aquí, si evento, instancia de aquí tenemos inicio de navegación. Y el inicio de navegación es el inicio del cambio en nuestra ruta. Y en realidad si esto está sucediendo, entonces aquí quiero consola log dejando una página. Entonces, una vez más, aquí estamos usando eventos de sequía para suscribirnos a todos los eventos de sequía. Y estamos recibiendo con Subscribe acceso a cada evento individual ahora aquí para verificar el evento específico donde se usa instancia de y estamos proporcionando aquí la pila de navegación. Y aquí está nuestro log de consola donde en realidad queremos emitir un mensaje socket y este mensaje estará en vivo en un tablero. Entonces necesitamos desconectar a un usuario de esta placa específica. Echemos un vistazo a esto. Estoy recargando la página y tenemos una estrecha se me olvidó poner una coma aquí en la parte superior. Entonces pongamos ahora y recarguemos la página. Y como pueden ver, no tenemos ningún error, pero realmente no podemos saltar a otra página donde puedan intentar hacer aquí. Yo sólo puedo devolver el golpe y nos vamos la página porque aquí estamos ahora en la página de tableros de barras. Y aquí está este registro de consola, lo que en realidad significa que este registro de consola se activará cada vez que estemos viviendo una página. Pero en realidad aquí no quiero usar sockets service summit. En cambio quiero escribir aquí este tablero de servicio de tablero de hoja de punto. Y en realidad podrías preguntar, pero por qué, por qué no sólo escribir aquí socket en medio de la respuesta aquí, no es en LinkedIn que queremos hacer dentro de un servicio de tablero cuando estamos saliendo de la página. Y en realidad aquí dentro del servicio por la borda, tenemos la corriente de la tabla y también estamos debemos ponerla a ahora cuando salimos de la pizarra, esto es camino aquí. Vamos a crear nuestro método de tablero de hojas y sólo tenemos aquí un vacío ahora dentro. En primer lugar, whoop, queremos poner este tablero al lado de ahora, lo que en realidad significa que ya no tenemos un tablero. Y después de esto, queremos cumplir con este mensaje que dejará la pizarra. Es por ello que debemos abrir nuestros tipos compartidos. Y aquí están los eventos socket. Aquí tenemos Boards churn. Ahora podemos copiar pegar este mensaje y nombrarlo tableros en vivo. Y esto simplemente se aburre. Váyase. Ahora voy a copiar pegar esta línea. Y ahora aquí podemos usar nuestro servicio de socket. Pero para esta VM hay que inyectarlo aquí dentro del constructor. Entonces aquí tenemos nuestro servicio de socket, y este es un servicio de socket y lo estamos usando exactamente como lo hicimos anteriormente. Lo que quiero escribir aquí es este servicio de puntos socket punto m it y se proporcionaron dentro de nuestro nombre de evento. Y en este caso serán nuestros eventos de socket E y M dot boards en vivo. Y en realidad aquí debemos proporcionar lo que la junta debemos vivir. Esto es y aquí nos falta un ID de placa, que debe ser una cadena, y debemos proporcionar de nuestro componente. Aquí quiero poner placa ID. Ahora debemos actualizar nuestro componente. Entonces aquí tenemos nuestro componente de placa, y aquí dentro de live board, escribiré este ID de puerto de punto. Entonces ahora solo necesitamos implementar exactamente lo mismo en el servidor que hicimos con la unión, pero necesitamos usar live. Aquí es donde volvamos a saltar en silos, servidores, fuente, server it, sí. Y aquí tenemos nuestra conexión y puertos gigante. Lo que tengo que hacer ahora, quiero actualizar los eventos de socket en ellos en el backend, y también serán ports leave. Y aquí estoy tableros en vivo. Ahora, aquí podemos copiar pegar estas líneas por completo y registrar un socket más encendido, no para tableros agitados, Pero para tableros de punto en vivo adivinando que tiene algunos datos. Y aquí queremos usar el controlador de puertos, no unirnos a placa, sino dejar placa. Y debemos crear ahora este pod en vivo dentro de nuestro controlador. Y en realidad aquí será exactamente lo mismo. Es por esto que voy a copiar pegar este método completamente y solo nombrelo vivo nacido aquí estamos obteniendo nuestro IR como previamente socket como previamente terminan dentro de los datos, tenemos nuestro ID de placa. Ahora aquí dentro de la consola de registro, podemos escribir nuestro patio para salir. Y aquí está el tablero de datos AD y en lugar de junta de socket, donde justo aquí, socket hoja oscura, y con esta sola línea donde estamos moviendo nuestra toma de corriente de esta sala específica, lo que significa que no conseguirá ningún evento de este tablero. Vamos a comprobar si está funcionando. Estoy recargando la página y estamos adentro. Ahora aquí estoy bolsa escondida y debemos despachar la sección para nuestro back-end. Echemos un vistazo a esto como puedes ver aquí. En primer lugar, tuvimos aquí socket colindante y con únete a esta sala específica. Y luego cuando me devuelva el golpe, tenemos una hoja de esta habitación. Y así es exactamente como un cliente y la mendicidad están trabajando juntos cuando estamos usando socket IO. 30. Autenticación en socket.io: En este video, debemos terminar de trabajar en la autenticación ahora un socket insights de usuario. Pero antes que nada, queremos arreglar un gran problema. Como pueden ver aquí, estoy conectado y estoy en la página del tablero. Pero, ¿qué pasará si me desconecto? Entonces simplemente quiero saltar dentro de la aplicación y eliminar nuestro token y recargar la página. Ahora estoy directamente en la página principal. Esto es totalmente válido. Pero entonces en algún momento quiero autenticarlo de nuevo. Estoy golpeando aquí login y luego pegar aquí f2 en gmail.com. Y nuestra contraseña, estoy golpeando aquí mismo medio. Y como pueden ver, no tenemos ningún error, pero después del mismo salto al primogénito y estamos recibiendo un error, conexión de socket no está establecida por qué está sucediendo. En realidad, tenemos nuestra conexión socket inicializar dentro de nuestra aplicación fuente, componente de aplicación ts, este código. Entonces después de la página Señor, estamos buscando al usuario actual y aquí estamos configurando la conexión de socket, pero no estamos encerrados al principio. Es por esto que vinimos aquí y configuramos a nuestro usuario actual ahora, luego nos encerramos con éxito. Y solo para recordarte, esto es lo que está sucediendo, donde dentro de nuestros componentes inicia sesión. Aquí está nuestro onsubmit aquí donde suscribirse al login y estamos sentados aquí hablando y usuario actual, esto está totalmente bien, pero no actualizamos nuestro socket. Por lo que nuestra conexión de capa de socket no existe después registro o después de iniciar sesión y no viven cuando vamos a recargar la página, se establecerá esta conexión de socket. Nuevamente, esto obviamente no es correcto y debemos establecer esta conexión después iniciar sesión o después del registro. Y esto es extremadamente fácil de hacer. Lo que debemos hacer aquí, simplemente podemos inyectar dentro de nuestro constructor nueva propiedad, y será nuestro servicio de socket, que es nuestro servicio de socket. Ahora aquí podemos usar este método. Entonces, por ejemplo, después de cierto token, podemos escribir estos puntos socket service dot. Y aquí tenemos conexión de socket setTab aquí bien que tienen acceso a un usuario actual y simplemente lo tiramos dentro de nuestra conexión de socket de configuración. Y debemos hacer exactamente lo mismo dentro de nuestro registro. Entonces aquí en primer lugar, estamos inyectando nuestro servicio de socket. Por lo que el servicio de socket privado es servicio de socket. Y ahora después de esto, podemos usar este método dentro de nuestro éxito. Así que después de establecer el token, es estos puntos de servicio de socket, conexión de socket de configuración de punto con el usuario actual. En este caso, funcionará correctamente. Quiero eliminar están hablando una vez más, saltó o página de inicio de sesión y ahora intenta iniciar sesión. Por lo que aquí está lleno en gmail.com y nuestra contraseña, estoy hittin decir media, y luego saltar a primera parte. Y no tenemos en este momento ningún error porque hemos configurado con éxito nuestra conexión de socket justo después de que nos encerramos. Pero no hacemos nada con nuestra autenticación dentro del socket IO, y esto es exactamente lo que queremos hacer. Entonces, ¿qué está sucediendo dentro de nuestra conexión de socket de configuración? Aquí nos arrojan dentro de nuestro token de usuario actual. Esto está totalmente bien. De frente y de lado, hicimos todo lo que necesitábamos. Pero ahora debemos saltar dentro de un servidor y analizar en consecuencia. Para esto, boom debe saltar dentro de nuestros niveles de servidores. Y aquí está tu propia conexión. Y en realidad antes de nuestra propia conexión, pasar a escribir aquí, punto uso. Aquí tendremos nuestra función y será nuestro middleware. Y después de esto, tenemos nuestra propia conexión, lo que en realidad significa que es exactamente lo mismo, como cómo nuestro middleware aquí pasar a autenticar nuestra solicitud y saber que estamos encerrados porque nuestra conexión de socket solo está disponible para usuarios que hayan iniciado sesión. Aquí es donde aquí estamos escribiendo pagarés y por dentro debemos proveer la función. Y aquí será una función asíncrona solo porque queremos buscar nuestro CurrentUser de la base de datos. Y aquí estamos en primer lugar obteniendo nuestro socket, que es socket, y estamos consiguiendo, y siguiente función, porque es una función síncrona que queremos escribir aquí, tratar de atrapar. Entonces antes que nada, debemos tratar directamente y dónde, cocina y error y lo que vamos a pasar dentro de la captura. Simplemente queremos escribir aquí a continuación y lanzar insight nueva era con, por ejemplo, nuestro error de autenticación. Y aquí hay una cosa súper importante que debes recordar. No tenemos ningún error dentro del socket. No están ahí en absoluto. No propagamos ningún error de nuevo al cliente, lo que en realidad significa que si estamos recibiendo algún error, por ejemplo, en el backend, simplemente queremos enviar un mensaje al cliente específico. Podemos enviar un estrecho que acaba de tirar dentro de un objeto puede ser un mensaje de error con algún código de error o lo que prefiera. Y es importante recordar. Entonces Socket Layer no funciona exactamente de la misma manera, como ¿cómo deberían ser errores? Y ahora lo primero que queremos hacer dentro nuestro intento es sacar nuestra conversación de la petición. Y aquí podemos escribir socket dot, handshake, dot, house, dot token. Y será exactamente lo que estamos pasados. Y en realidad aquí estamos consiguiendo el token es cualquiera, y no quieren esto, porque en realidad aquí quiero conseguir una cadena. Es por esto que aquí puedo escribir corchetes redondos y simplemente escribir S strain. Y si no obtenemos este token, entonces quiero usar aquí una cadena vacía. ¿ Por qué estoy haciendo esto? Porque aquí queremos usar Jason verifica, para verificar nuestro token. Y en este caso no queremos que sea indefinido. Se. Podemos verificarlo cuando es una cadena. Esto es camino aquí. Ahora podemos tratar de analizar estamos hablando mediante el uso de token web JSON. Por lo que aquí en la parte superior podemos importar GPS desde nuestro paquete JSON Web Token. Ahora podemos volver a nuestro código aquí, úsalo. Entonces aquí tendremos JWT dot, y aquí lo hemos verificado. Y ahora dentro debemos pasar en primer lugar, nuestro objetivo. Pero sólo para recordarles, dentro de un token, tenemos espacio al portador y luego nuestro token, aquí es donde quiero dividirlo por espacio y tomar el segundo argumento. Y después de esto, debemos proporcionar aquí un secreto. Y sólo para recordarte cuál es el secreto que viene de nuestra configuración. Y esto es lo que estamos usando para analizar nuestro token JSON. Y esto es lo que estamos recuperando. Estamos consiguiendo aquí un lote de cuerdas o DVT PE. Pero aquí realmente queremos contar lo que estamos recuperando. Aquí. Estamos consiguiendo como siempre, nuestro objeto, decimos D, que es cuerda. Y en segundo lugar, estamos recibiendo un correo electrónico que también es cadena. En este caso, estamos obteniendo datos correctos aquí y ahora podemos obtener un usuario al igual que hicimos dentro de nuestro middleware Auth. Y para ello debemos introducir un usuario aquí en la parte superior. Entonces estamos usando ahora un modelo de usuario exactamente como lo hicimos anteriormente. Por lo que sólo usamos los modelos de barra diagonal de usuario. Y ahora aquí podemos hacer una petición. Entonces aquí queremos recuperar a nuestro usuario, y aquí queremos hacer una solicitud a la base de datos con el usuario dot. Y aquí está nuestro fino Bye. Aquí podemos hacer find by ID porque tenemos NAD insight data dot ID. Y si no tenemos nuestra utilizable, queremos lanzar un error. Entonces aquí, si no encontramos un usuario, significa que no estamos encerrados aquí. Simplemente ejecutamos return next y estamos arrojados dentro del error de autenticación de nueva era, al igual que hicimos dentro de nuestra captura. Y después de esto, queremos anotar a este usuario dentro de nuestro socket. En realidad socket es nuestra instancia, y podemos escribir dentro la información adicional al igual que lo hicimos anteriormente con solicitud. En este caso, posteriormente en cada controlador, podemos acceder a este usuario actual. Este es el camino aquí, socket dot user igual al usuario que encontramos. Y como se puede ver aquí, directamente obtenemos un error propiedad usuario no existe en el tipo socket y debemos hacer exactamente lo mismo lo que hicimos con SAML request. Solo para recordarte, creamos solicitud expresa donde extendimos nuestra solicitud para poner usuario dentro. Y ahora queremos hacer exactamente lo mismo pero con nuestro socket. Esto es camino aquí. Vamos a crear socket dot interfaz dot ds. Y aquí dentro queremos crear una nueva interfaz, y se le llama socket. Y aquí queremos usar extiende desde socket, socket. En realidad aquí tengo un nombre bastante extraño porque esta no es una entrada válida del socket. Esto es camino aquí. Quieroimportar socket como socket o su socket. Y estoy haciendo esto desde socket o simplemente porque no podemos tener exactamente el mismo nombre. Por lo que aquí Gabón para exportar nuestro zócalo y aquí eran importantes socket, esto no es válido. Aquí es donde queremos cambiar el nombre de nuestra entrada de socket IO y después de esta manera extendido desde nuestro socket, socket. Y queremos agregar aquí a nuestro usuario. Y no siempre se hace esta manera aquí hay un signo de interrogación, y este es un documento de usuario que también debemos importar aquí en la parte superior desde nuestra interfaz de usuario, Nuestras interfaces de socket allá. Ahora podemos saltar de nuevo dentro de nuestro servidor y usarlo en lugar de lo simple. Entonces solo para recordarte, aquí tenemos un socket de entrada de socket IO. Esto ya no es válido. Aquí Woburn para invertir nuestro socket de, y aquí está nuestro tipo slash socket. Vamos a comprobar si está funcionando. Me estoy desplazando aquí al fondo, y ya no tenemos aquí un error. El usuario de socket es completamente válido y es documento de usuario o indefinido. Ahora vamos a comprobar si nuestro código está funcionando. Entonces estoy saltando aquí dentro la consola y no tenemos ningún error, así que está funcionando. Ahora lo que quiero hacer, quiero saltar dentro de nuestras placas controladoras. Aquí estamos haciendo join board. Entonces aquí en lugar de data board AT, puedo consola log aqui un usuario de mama, un socket. Y en realidad aquí socket dot user es obviamente inválido porque aquí no usamos la interfaz correcta. Esto es y aquí en la parte superior. No necesitamos usar socket desde socket IO, pero debemos importar nuestra interfaz de socket que acabamos crear a partir de nuestros tipos slash socket interface. Aquí no tenemos un error. Saltemos dentro de la consola y comprobemos si está funcionando. Y para ello, simplemente necesitamos recargar esta página y no tenemos ningún error. Ahora echemos un vistazo dentro de la consola. Esto se puede ver aquí no hay mensaje, lo que significa que olvidamos algo. Y lo que olvidamos está dentro del sayo usar para escribir a continuación, lo que en realidad significa que después de esta línea, nuestro código no está llegando a ninguna parte. Esto es y aquí, pero debe escribir a continuación, y en este caso debe funcionar. Vamos a revisar otra vez. Aquí estoy recargando la página. Saltaremos a nuestro backend y como pueden ver, aquí está nuestra información. Así que Socket Layer para unirse y estamos llegando aquí nuestro usuario, y aquí estamos recibiendo dos registros de consola porque cada vez que se actualiza la página, estamos consiguiendo este socket IO para unirse porque este abusosque suceden. Estamos revisando a nuestro usuario, lo estamos obteniendo de la base de datos. Ahora, está disponible para nosotros dentro de nuestro controlador. Entonces con este código, obtuvimos con éxito a nuestro usuario de la solicitud. Y ahora en cada acción dentro del controlador a través de un circuito, un hilo, tenemos a este usuario disponible rápidamente. 31. Obtención de columnas: En este video, comenzamos con la implementación de nuestras columnas. Y creo que es una linda tarea que intentes implementarla tú mismo. Entonces, ¿qué queremos implementar? ¿Un top? Tenemos nuestra junta y ya estamos cotizados en nuestro cliente y lo implementamos en el backend y en el cliente. Ahora debemos implementar columnas. ¿ Por qué necesitamos columnas? Esto realmente se coloca dentro de un tablero donde almacenaremos tareas y nuestros usuarios pueden crear columnas dentro del tablero, lo que en realidad significa que la columna debe pertenecer a los usuarios. Por lo que debemos tener dentro usar 3D pero también tablero AT, porque nuestra columna no puede existir sin un tablero y esto es y. aquí hay tres niveles de dificultades para ti. En primer lugar, si quieres el nivel más difícil, solo pausa el video ahora e implementa en el festival backend un modelo para la columna, luego en type para la columna, y luego un método get para obtener una lista de las columnas dentro de nuestro tablero si quieres probarlo en el segundo nivel. Con mi orientación, aquí hay algunos consejos ya que el conjunto dentro nuestros tipos de servicios debe crear al igual que lo hicimos con tablero. Debemos crear aquí columna y necesitamos aquí una interfaz para la columna y también una interfaz para el documento de columna. Por lo que será súper similar a nuestra junta. Después de esto, dentro de nuestro servidor, queremos crear una nueva ruta. Y aquí tendremos tableros API apt-get, tablero AT igual que aquí, columnas de slash. Y será una solicitud GET para obtener todas las columnas de este puerto específico. Y realmente necesitamos esta cantidad dentro de nuestra ruta. En otro caso, no sabemos para qué tablero debemos conseguir nuestras columnas. Para ello debemos implementar en su controlador, que es el controlador de columnas, y debemos implementar dentro del método, obtener columnas, al igual que tenemos aquí dentro. Aburrirse. Y lo hicieron, es que queremos sacar todas nuestras columnas por este punto AD de la base de datos. Entonces, si quieres probarlo tú mismo, solo pausa el video ahora. Y ahora la variante más fácil, Vamos a implementarlo juntos. Y estamos empezando aquí. En primer lugar, de nuestros tipos. Aquí queremos crear un nuevo tipo, que será columna dot interface ab.js. Y en realidad quiero copiar pegar completamente nuestro tablero porque va a ser super similar. Entonces aquí tenemos nuestra interfaz y columna de datos. ¿ Y qué necesitamos dentro de nuestra columna? En primer lugar, necesitamos algún nombre, lo que significa que el título es completamente válido, también tendremos aquí creado en y actualizado en. Y aquí tenemos UserID porque es el set. Es posible que necesitemos información sobre quién creó esta columna específica. Y después de esto, queremos tener una referencia a nuestra junta directiva. Aquí es donde aquí tenemos un tablero AT. Y es el mismo esquema tipos objeto ID, igual que tenemos aquí en la parte superior para nuestro usuario. Y ahora aquí en lugar de nuestro documento de tablero, queremos crear nuestro documento de columna y estamos extendidos aquí documento y nuestra interfaz de columna que acabamos de crear. Y ahora es el momento de crear nuestro modelo. Entonces aquí tenemos el modelo Bohr, ahora necesitamos un modelo de columna. Entonces aquí tenemos una tabla de lágrimas. Ahora necesitamos crear aquí la columna Ts. Y en realidad voy a copiar y pegar todo de nuestro tablero porque es super similar. Entonces lo que tenemos aquí, estamos construyendo aquí un esquema de columna, y aquí estamos usando documento de tablero NADH, pero en su lugar documento de columna que acabamos de crear aquí, documento de tablero en la parte superior podemos eliminar. Aquí, sabemos que tenemos nuestro título, tenemos nuestro uso 3D, se requiere. Y el último aquí será nuestro ID de placa, que es un ID de objeto de tipo, y también se requiere, y es nuestro modelo de documento de columna de tipo y el nombre es columna. Y aquí tenemos nuestro esquema de columnas. Por lo que como puedes ver, es súper similar a nuestra pizarra. Y en realidad muchos modelos que crearás en tus futuras aplicaciones se verán realmente así. Por lo que creamos con éxito nuestro tipo y nuestro modelo. Ahora, debemos generar y utilizar hacia fuera dentro de nuestros niveles de servicio. Y aquí quiero copiar pegar esta línea con un tablero de placas Pi Id. Y aquí tenemos un get en exactamente esta ruta slash columnas porque como dije, queremos conseguir nuestras columnas para este punto específico. Y aquí debemos usar nuestro middleware porque esta solicitud es sólo para usuarios registrados. Y aquí no necesitamos usar controlador de nuestra placa nos gustaría nuevo controlador aquí, controlador de columnas, y aquí podemos nombrarlo, por ejemplo, obtener columnas, pero no tenemos columnas controlador alto. Así que aquí quiero copiar pegar el controlador de la placa aquí en la parte superior y solo nombrelo controlador de dos columnas De controladores de slash columnas slash. Y nuestro último paso aquí será crear un nuevo controlador, que se llama columnas. Y este es controlador para gestionar todas nuestras acciones para las columnas. Entonces aquí estamos creando nuestras columnas dot ts. Y aquí solo quiero copiar pegar un método de nuestros tableros porque es super similar y es buenos tableros. Así que volvamos a saltar dentro nuestras columnas escaleras y pegar este método aquí. En primer lugar, no es aburrirse, sino conseguir columnas. Y necesitamos aquí se expresan interfaz de solicitud porque queremos comprobar para el usuario actual. Y aquí necesitamos nuestra siguiente función. Y también debemos insumo aquí en respuesta de express. Y aquí como siempre, estamos comprobando CurrentUser. Estamos lanzando para 01 si no está ahí. Pero ahora aquí debemos usar modelo no aburrido, sino columna el modelo. Así que vamos a entrar aquí en el modelo de columna superior que acabamos de crear. Y aquí estamos escribiendo los modelos de slash slash column. Y ahora aquí estamos esperando para hacer una solicitud de hallazgo de modelo de columna. Pero en lugar de encontrar nuestras columnas, y aquí obtendremos una matriz por ID de usuario. Queremos encontrarlos por nuestra junta AD. En este caso, obtendremos columnas de mala suerte para este tablero específico. Y obtenemos esta información de request dot, params dot, y aquí tenemos ID de placa. Así que de vuelta aquí estamos recibiendo una matriz de nuestras columnas y simplemente queremos responder al cliente con esta matriz. Y en realidad ya terminamos. Vamos a comprobar si está funcionando. Estoy saltando al back-end. No hay errores. Así que ahora quiero hacer una solicitud get, y aquí tengo nuestra API, pero en lugar de slash api slash boards, quiero tener aquí slash y luego NAD. Es por esto que desde nuestra aplicación, quiero copiar la d de nuestro tablero para pegar aquí dentro de cartero. Estamos haciendo una solicitud GET y vamos a golpear Enviar. Como pueden ver, de donde me sale un mensaje donde no está autorizado, lo que significa ante todo, debo iniciar sesión. Este es mi usuario, estoy login y aquí estoy recibiendo un token. Copiemos pegamos este acecho e intentemos una vez más. Aquí hay una solicitud GET para el punto sin fundamento slushy. Aquí está AD y se perdieron aquí columnas de corte. Esta es una solicitud get, y aquí está nuestro encabezado. Esto es cerveza. Y luego voy a poner mi token estoy golpeando ahora enviar y estamos recibiendo nuestra respuesta, que es una matriz vacía. Y en realidad es completamente correcto porque no creamos ninguna columna dentro de nuestra base de datos. Pero para que sea seguro y limpio, vamos a crearlos desde la consola para que podamos comprobar si realmente está funcionando para discapacitados saltar dentro de la consola y probar docker exec menos 18 MongoDB, Mongo , al igual que hicimos anteriormente para nuestra junta directiva. Ahora aquí debemos utilizar nuestra base de datos L Trello. Tan útil tráiler y ahora quiero insertar un registro dentro de nuestra colección de columnas. Es por esto que aquí podemos escribir columnas db dot, dot insert, y aquí dentro queremos lanzar primero de todo al título, por ejemplo, primera columna. Por lo que aquí debemos proporcionar un ID de usuario, y aquí debemos escribir la fecha es un objeto con alguna cadena dentro que debemos tomar de la solicitud. Y por último aquí será nuestro tablero AT, y también es un ID de objeto y dentro de la cadena. Entoncesaburrió el D. Ya lo sabemos, sólo podemos tomarlo aquí del cartero y lo van a poner aquí. Pero nuestro usuario AT, podemos comprobar dentro de nuestro backend. Como puedes ver aquí, todavía tengo este log de consola con nuestro usuario. Y aquí están la D de mi usuario con la que estoy encerrado. Aquí dentro de nuestro ID de usuario, voy a pegar el hash de mi usuario. Vamos a golpear Enter. Ycomo se puede ver donde se inserta uno. Ahora podemos comprobar si es correcto. Así db columnas de puntos, encontrar puntos y sólo los corchetes redondos. Y como pueden ver aquí está nuestra respuesta. Así que vamos a comprobar ahora en Cartero, si está funcionando, estoy golpeando aquí enviar de nuevo, y nos estamos metiendo dentro de la matriz, un solo objeto. Aquí está nuestro ID de usuario y título de AD Boyd AD, lo que en realidad significa que creamos con éxito nuestro modelo de columna y la primera solicitud para obtener todas las columnas para este enlace específico. 32. Crear columna con websockets: En video anterior, creamos con éxito un método para obtener una lista de nuestras columnas para el tablero. En este video, nos centraremos en la parte back-end de la creación de nuestra columna. Y lo haremos no de la manera típica porque no vamos a usar aquí HTTP. Lo crearemos con socket por ¿necesitamos crear columnas con socket? Porque en realidad este es el caso donde Woburn para notificar a todas las demás personas que están buscando en nuestro tablero actual sobre la creación de la nueva columna. En este caso, todos los usuarios con esta sola placa abierta verán directamente nuestra parte nucleada. Entonces, ¿cómo debemos hacer eso? Y estamos empezando aquí dentro de un servidor fuente. En realidad ya estaban saben cómo estamos haciendo las cosas. Tenemos aquí son su propia conexión y aquí están nuestra toma de corriente. Aquí debemos reflexionar en su zócalo. ¿Por qué es eso? Porque en realidad vamos a desencadenar, crear suficiente la columna en uno de los clientes, lo que en realidad significa dentro o aplicación angular. En el siguiente video, construiremos un pod frontend con el formulario para crear una columna. Y luego emitiremos un evento para nuestro socket IO. Por eso aquí debemos suscribirnos a esto en medio. Nuestro primer paso será crear aquí un nuevo evento. Y en realidad aquí quiero crear tres eventos mientras que eso, porque tenemos una operación asíncrona, empezamos a crear una columna, entonces tenemos éxito y fracaso. Y dijeron que realmente no podemos obtener errores del socket IO. Es por ello que tiene mucho sentido organizar todos nuestros eventos como Iniciar éxito y fracaso. Y en caso de que con board join, no lo necesitamos. Solo necesitamos un solo evento porque esencialmente esto no está en una operación sincrónica con no tener éxito aquí, pero lo tenemos con crear otra columna. Este es camino aquí, Vamos a nombrarlo columnas grado. Y esto es una cadena, y podemos nombrarlo columnas colon, y luego crear esto. Se puede ver que estoy usando la misma notación como aquí en la parte superior, tenemos una entidad y es plural, y luego nuestro verbo, lo que estamos haciendo ahora aquí podemos copiar pegar esta línea dos veces porque debemoscrear aquí, las columnas crean el éxito y las columnas crean el fracaso. Aquí a la derecha tendremos columnas crear éxito con CamelCase y aquí columna crear fracaso. Por lo que nuestros eventos están listos y ahora podemos abrir embolsar nuestros niveles de servidores. Y aquí queremos escribir un socket más encendido. Entonces aquí queremos reaccionar sobre ahora los eventos de socket en ellos no lo hacen. Y aquí tenemos columnas de grado, y hay un segundo parámetro estamos obteniendo algunos datos Con ni siquiera me importa lo que estos datos. Ahora aquí dentro queremos usar nuestras columnas controlando y también somos los creados, pero no teníamos ninguna información de socket dentro. Aquí es donde aquí queremos crear un nuevo método que se llama Crear columna. Y estamos pasando dentro exactamente lo mismo que hicimos aquí dentro de live board por ejemplo, es un socket de coma de datos comunes, en este caso, en todos los lugares donde escribir el código y todos los parámetros en de la misma manera. Es por ello que es más fácil entender nuestra aplicación. Ahora, es el momento de crear esta sección dentro del controlador. Aquí es donde volvamos a saltar dentro de nuestras columnas de controladores. Aquí tenemos las columnas get. Y en realidad vamos a escribir aquí desde cero nuestro nuevo método. Entonces aquí tenemos nuestra constante y es crear columna. Y esta es una función asíncrona y por dentro donde conseguir exactamente todas las cosas como obtuvimos previamente. Entonces, antes que nada, es un hilo y es suero. En segundo lugar, tenemos aquí nuestro socket, el socket, y el último es data. Entonces la pregunta es, ¿qué datos obtendremos para crear una columna? Y necesitamos dos cosas. En primer lugar y nombre de la columna. Y en segundo lugar, nuestra identificación de junta. Esta es la información que ya escribimos dentro de nuestro modelo. Es por esto que aquí tenemos el cuerpo D y es una cuerda. Y en segundo lugar, aquí tenemos título. También es una cuerda. Y sólo para recordarte en el momento en que eres nuestros dos de entrada aquí, socket, debes saber cómo ingresarlo desde tipos interfaz socket, no desde el socket IO porque debemos utilizar una propiedad de usuario dentro de esa interfaz. Y ahora dentro tenemos try-catch, como siempre, porque estamos haciendo aquí una operación asíncrona y dentro de la jaula, lo que queremos hacer con no tenemos acceso al siguiente, pero podemos emitir escuchar algo que, por ejemplo, aquí quiero escribir socket Datta meet y estamos arrojados dentro de nuestros eventos de socket E y M dot, y aquí está el fracaso, por lo que las columnas crean fallo. Y en segundo lugar aquí quiero devolver un mensaje. Pero el principal problema es que esta sarah es desconocida y esto es completamente normal porque estamos dentro de la captura, no podemos saber qué es la Sarah. Es por ello que si necesitamos leer un mensaje del error, debemos intentar algo como esto. Entonces aquí queremos leer nuestro mensaje de error y podemos comprobar que nuestra flecha debe ser una instancia de una época. En este caso, podemos leer aquí mensaje de error. Y otro caso que simplemente queremos stringificar nuestro error aquí como el segundo parámetro, podemos proporcionar insight nuestro mensaje de error, que será una cadena. En este caso, este es el mejor padre posible y decir TypeScript. Se puede trabajar con error desconocido dentro de catch. Pero aquí está el problema. Escribiremos esta sola línea en cada acción cuando estemos recibiendo un error y queremos leer un mensaje y lo usaremos dentro de cada imagen dentro de catch. Por eso quiero mover este código para ayudarla. Y aún no tenemos a nuestros ayudantes. Es por esto que la fuente de insights. Vamos a crear ayudantes dot ds y retrocedamos este método adentro. Aquí puedo crear un nuevo método que es obtener mensaje de error. Y estamos llegando aquí nuestro error y se desconoce. Entonces esto es exactamente lo que estamos consiguiendo en catch butt back. Queremos conseguir una cuerda. Ahora, puedo copiar pegar esta línea completamente y pegarla aquí. No hace falta aquí constante un mensaje. Simplemente podemos devolver esta sola línea. Es, como pueden ver, así es como se ve. Estamos llegando aquí error desconocido, donde pollo instancia de error y bien escrito ya sea mensaje de error o cadena era. Y ahora aquí dentro de nuestras escaleras de columna, podemos importar este método. Es por esto que aquí podemos deestructurar, obtener mensaje de error y es de nuestros ayudantes. Y ahora aquí en vez de esta línea podemos escribir aquí, obtener mensaje de error y se proporcionaron dentro de nuestra era. Y ahora este ayudante es súper utilizable rápido. Ahora necesitamos escribir nuestro código dentro de tribu. Entonces, antes que nada, debemos comprobar si burlington o no. Lo estamos haciendo solo para TypeScript porque en realidad estaban encerrados aquí por los IOU y nuestro middleware dentro que construimos anteriormente. Pero aquí debemos comprobar si put no tiene un usuario socket dot. Y sólo para recordarle esta interfaz de socket debe ser nuestra interfaz y no de socket ion. Aquí adentro podemos emitir exactamente lo mismo. Por lo que aquí está el zócalo y la carne y se proporcionaron dentro de un zócalo. Eventos Las columnas ENM crean fallas. En aquí dentro sólo podemos escribir la cadena que el usuario no está autorizado. Entonces lo que está haciendo esta línea, estamos emitiendo un mensaje a nuestro socket, lo que en realidad significa que tenemos un cliente y este cliente envía un mensaje, por favor cree una columna. Y entonces ya sea aquí dentro de jaula, aquí dentro del CIF emitirá sólo a un solo cliente que nos envíe un mensaje, este mensaje de vuelta. Y este cliente puede escuchar este mensaje y hacer algo en consecuencia. Y después de conocernos, simplemente podemos llamar aquí una vuelta con no quiero hacer nada. Pero si tenemos un usuario socket, entonces podemos crear nuestra columna. Entonces aquí intentemos que tengamos una nueva columna y para crearla, debemos usar nuevo modelo de columna. En realidad columna modelo mundo con el invertido aquí en la parte superior. Para que lo podamos usar aquí. Entonces para crear una columna, el modelo, debemos proporcionar insight, primer lugar, un título y es data dot title. En segundo lugar, queremos proporcionar aquí ID de la placa y es theta dot board AT. Esta es toda la información de nuestro evento. Y por último pero no menos importante es nuestro ID de usuario. Es inflamación de socket dot user dot ID. Por lo que aquí hemos creado con éxito un nuevo número de columna, hay que guardarlo en la base de datos. Esto es y aquí. Volvamos nuestra columna guardada porque queremos llegar aquí NAD también. Y estamos esperando nuestra nueva columna que se crearon dot save. Estamos a la espera de guardarlo en la base de datos. Y después de esto, queremos enviar esta información no sólo a nuestro socket. Queremos notificar a todas las personas, todos nuestros clientes que están suscritos a nuestro directorio. que en realidad significa que estamos enviando este mensaje, no solo socket vectorial, estamos enviando este mensaje a mucha gente. Y podemos escribir este código con socket aquí así. Por lo que no es socket dot two y k adentro estamos proporcionando datos punto punto AD. Y sólo para recordarles aquí antes dentro de tableros donde escribimos código de unión con John Boyd, escribió aquí, socket join, data, port ID. Aquí. Ahora tenemos una habitación con un d de nuestra junta. Y ahora aquí podemos conocer algunos datos a todos los usuarios que se encuentren dentro de esta sala con I2. Aquí está nuestra placa de datos AT punto m cumplir y fueron proporcionados dentro de nuestros eventos socket ENM, y en este caso, será un éxito. Esta es y columna crea éxito. Aquí queremos también proporcionar toda la información de nuestra columna guardada. Y en realidad esto es lo mismo que usar HTTP, pero esta información se propagará a todos nuestros usuarios simultáneamente si están suscritos a este tablero específico. Ahora aquí sin ninguna lógica de cliente difícil, quiero probar que está funcionando en absoluto. Esto es y aquí, por ejemplo, después de nuestro i2, quiero escribir la columna guardada de registro de la consola para que podamos comprobar si venimos aquí. Ahora después de esto, quiero saltar dentro nuestros clientes fuente, aplicación, placa, componentes, placa HTML aquí, solo quiero para probar para crear un botón se hizo clic. Por lo que vamos a dar clic en el botón, y aquí tenemos una función de prueba. Ahora, cuando estamos dando clic en el botón, quiero conocer este evento. Esta es manera aquí tenemos nuestra función de prueba y en su interior quiero escribir este servicio de socket punto y carne y se proporcionaron dentro de nuestro evento. Y en nuestro caso es columnas crear y hay un segundo parámetro que debemos proporcionar aquí un objeto con verter el té, que será esta placa ID. Y en segundo lugar, título, por ejemplo, para esta sola línea, debe decirle a nuestro backend que queremos crear esta columna específica para esta parte. Ahora podemos saltar al backend y comprobar si está funcionando. Como puedes ver, no tenemos ningún error en API. Ahora abramos un navegador y recarguemos la página. Y estamos aquí en nuestra página de un solo tablero. Aquí dentro hay un botón. Y en realidad se me olvidó escribir el texto dentro del botón. Así que vamos a escribir aquí prueba para que al menos podamos ver un botón y luego dar clic en el botón una vez. Ahora saltemos adentro, señas. Y en realidad aquí estamos recibiendo el último mensaje guardado columna, lo que en realidad significa que nuestro backend recibió nuestra solicitud. Y está sucediendo en nuestros niveles de servicio con este código donde estamos suscritos a la calificación de columna. Y luego lado donde Colin, nuestro controlador de columnas crear columna y dentro de esta función, en primer lugar, estamos comprobando que estamos encerrados. Después de esto, estamos generando una nueva columna con estos datos que obtuvimos del evento. Después guardamos esta columna y enviamos el mensaje a todos nuestros usuarios que están suscritos a este punto. Probaremos este código profundamente en el siguiente video. Pero como puedes ver aquí está mi constante bloqueada columna guardada. Y esto es exactamente lo que estamos viendo aquí dentro del registro de la consola, lo que en realidad significa que implementamos con éxito nuestro trabajo entre socket en el cliente y socket en el backend. Y respecto a la creación de nuestras columnas. 33. Obtención de columnas: En video anterior, preparamos con éxito el backend sustantivo, creamos una fuera de nuestra columna. Pero antes implementaremos formulario inline para crear una columna en el cliente, al menos debemos crear nuestra página de tableros porque por ahora está completamente vacía y también renderizar nuestras columnas. Por eso lo primero que quiero hacer es crear en nuestro cliente la interfaz para el cono, porque aún no la tenemos. Es por esto que debemos campeón de sets, fuente, tipos compartidos de aplicaciones. Y aquí debemos crear interfaz de columna Ts. Y vamos a experto aquí nuestra nueva interfaz, que es una interfaz de columna. Y el interior, en primer lugar, estamos consiguiendo NAD, que es una cadena. En segundo lugar, en el título, que es una cadena. Y por último lo creó, que es una cadena. Y en realidad también estamos llegando aquí cabeza actualizada, que también es una cadena. Nuestro siguiente paso es crear un servicio con el método para obtener todas las columnas para esta placa específica. Y en realidad aquí no tenemos ese servicio. Tenemos servicio de Boards, que es un servicio sin estado solo con método como conseguir tableros, aburrirse, crear tablero y así sucesivamente. Debemos hacer exactamente lo mismo. Pero para las columnas, es por esto que aquí quiero crear columnas, service dot ts. Y como se puede ver donde en AP compartió y no en el tablero. Ahora aquí, en primer lugar, rasgo de biomasa inyectable y segundo bucle uno para exportar nuestra clase, que será nuestro servicio de columnas. Ahora dentro debemos presentarte al cliente porque haremos peticiones para obtener una lista de nuestras columnas. Esto es camino aquí. En primer lugar, debemos escribir un constructor. Y aquí estamos consiguiendo un HTTP, que es un cliente HTTP. Esto es suficiente. Nobu debe crear el método get column, que entregará para nosotros en el camino de columnas desde el backend y en el backend ya estamos creados ese método. Aquí es donde aquí, antes que nada, debemos conseguir aquí una identificación de tablero. Este es un identificador único para obtener una lista de columnas para esta placa específica. Y de vuelta estamos recibiendo una matriz de nuestras columnas, obviamente como un observable, porque siempre es de HTTP donde conseguir observables, aquí es donde observable de la interfaz de columna y no se olvide que es una matriz. Ahora aquí adentro estamos haciendo exactamente lo mismo que hicimos a bordo. Entonces, si no quieres volver a escribir todo, simplemente puedes copiar y pegar, por ejemplo, aburrirte, y ya estás listo para ir. El código es súper similar. Así que aquí en primer lugar, queremos crear una URL, y aquí queremos fusionar en primer lugar, nuestro entorno DOD API URL slash. Aquí tenemos nuestras tablas slash n Aquí queremos inyectar tablas ID columnas de barra. Y después de esto, solo necesitamos hacer una solicitud HTTP GET. Es por esto que aquí quiero devolver este http.get y debemos proporcionar que de vuelta donde conseguir nuestra matriz de interfaz de columna. Y aquí dentro estamos proporcionando nuestra URL. Y con este código obtendremos nuestras columnas para tablero específico. Y ahora es el momento de utilizar el servicio dentro de nuestro componente. Pero para ello, debemos saltar dentro nuestro tablero de aplicaciones, molécula de tablero. Y la entrada aquí dentro de los proveedores están en su servicio y será nuestro servicio de columnas. Ahora aquí podemos saltar dentro de componentes, placa, componente de placa, y buscar estos datos aquí. Ahora aquí dentro de nuestros datos de fetch, queremos buscar nuestras columnas. Pero para este constructor interior, debemos inyectar este servicio. Y fue el servicio de columnas, que es el servicio de columnas que acabamos de crear. Ahora aquí podemos saltar dentro de nuestros datos de fetch y usar aquí this.com service get columnas. Este es exactamente el método que acabamos de crear. Y aquí adentro estamos proporcionando ahora en este punto, ya tenemos esta información. Pero aquí queremos hacer exactamente lo mismo, pero no queremos guardar estas columnas directamente aquí en el componente. Ya estamos creados nuestro servicio de tablero para esto. En el interior, podemos guardar toda esta información. Es por esto que aquí podemos escribir, Suscribirse y estamos recuperando nuestras columnas. Y lo que queremos hacer con las columnas necesitamos aquí en su método, este servicio de placa, DOD, por ejemplo, establecer columnas. Y por dentro tiraremos nuestra lista de columnas. Y ahora sólo falta implementar este método establece columnas. Aquí es donde aquí Abramos dentro de Boards Services, nuestro servicio de tableros. Y estamos haciendo exactamente lo mismo que hicimos aquí. Dijimos tablero. Por lo que aquí está establecido columnas. Estamos recibiendo nuestra matriz de columnas, que es una matriz de interfaz de columna. Aquí estamos consiguiendo gran vacío y necesitamos aquí un nuevo flujo de datos. Aquí es donde aquí puedo copiar, pegar nuestro stream boss y nombrarlo columna stream. En este caso, cada lugar de nuestra aplicación, si estamos usando este tablero, podemos suscribirnos y obtener la lista de las columnas que tenemos ahora. Y en realidad esto será un tema de comportamiento de matriz de interfaz de columna. Y no necesitamos proporcionar aquí ahora porque por defecto podemos simplemente proporcionar aquí una matriz vacía. Y ahora dentro de nuestro método de columnas de conjunto, simplemente podemos llamar a este punto columnas punto siguiente. Y estamos proporcionando insight son columnas que prefetched. Ahora saltemos de nuevo a nuestro componente y acabemos con esta corriente. Por eso aquí en la parte superior, ya tenemos esta pizarra, dólar, que es una corriente. Y ahora debemos crear columnas. Dollar, que es una cadena para nuestras columnas, y es una matriz observable para la interfaz de columna. Y ahora aquí podemos escribir directamente después de este punto, este punto columnas. Y aquí estamos usando este punto de servicio de placa. Y aquí tenemos nuestras columnas. No necesitamos aquí filtro de tubería booleano porque esto es simplemente una matriz. O está vacío o más antiguo, el campo con nuestras columnas, la idea principal es que no tenemos streams y podemos usarlos directamente dentro del HTML. Pero aquí quiero mostrarte aún mejor variante, porque en realidad aquí ya tenemos dos arroyos después. Tendremos una más para tareas, lo que en realidad significa que tenemos tres fuentes diferentes de datos y queremos renderizar nuestra página cuando se cumplan todas las fuentes de datos. Es por esto que podemos reescribir este código un poco diferente. Podemos escribir aquí este dato de punto con más alto. Y esta es una notación especial que estoy usando. Esta es una variante súper popular, cómo puedes administrar tus datos para tu componente. Normalmente tienes una página con muchas fuentes de datos y quieres combinarlas en una sola secuencia. Y entonces puedes ejecutar toda la página solo cuando cumples con todos los streams. Y cumpliremos el stream con los datos cuando te estemos metiendo en tus datos. Aquí es donde quiero escribir combinado más reciente y se proporcionaron dentro una matriz de streams y festival aquí podemos copiar esta línea con tableros stream y simplemente pegarlo aquí. Y después de esto estamos tomando las columnas de este servicio de puerto y también lo estamos pegando aquí. Obviamente debemos recta aquí coma, porque se trata de dos corrientes diferentes. La idea principal es que estamos combinando los arroyos. Y aquí queremos hacer esto con tubería y mapa, porque en realidad estamos consiguiendo esto como una matriz y morir queremos un objeto aquí, esto es y. aquí dentro del mapa, podemos directamente la estructura, primer lugar, una tabla y aquí el orden es importante. En segundo lugar, aquí tenemos columnas. Y después de esto, queremos devolver los datos en otro formato como objeto. Y aquí estamos regresando en primer a bordo y en segundo lugar, nuestras columnas. Entonces lo que esta cosa está haciendo por nosotros en absoluto. Entonces estamos consiguiendo aquí datos, lo que en realidad significa que no necesitamos dos streams aquí. Ahora podemos crear aquí y usar datos de flujo. Y estos son los datos completos para nuestra placa de componentes. Ahora estamos diciendo aquí que esto es un observable del objeto. Y antes que nada, tenemos aquí una placa, que es una interfaz de placa. Y en segundo lugar, estamos llegando aquí nuestras columnas, que es una matriz de interfaz de columna. Y ahora podemos quitar tablero dólar y columnas dólar, ya no los necesitamos. El punto principal es que nuestra lógica era ir a buscar datos y establecer en estos datos dentro de word service se está quedando allí. Esto es solo una combinación de dos flujos para mapear estos datos para nuestro componente. Entonces ahora la pregunta es cómo usaremos estos datos dentro de nuestro HTML. Aquí es donde quiero quitar todo y en realidad también eliminar aquí prueba en la parte inferior. No lo necesitamos para nada. Ahora quiero escribir marcador para nuestra página. En primer lugar, aquí queremos renderizar nuestra barra superior de aplicaciones. Ya está ahí. Después de esto, vamos a correr el tablero. Así que aquí tendremos tablero de clase div, y aquí hay un truco que estamos usando aquí en GE, pero estamos proporcionando información de información dólar, esta es nuestra última sincronización combinada como datos, y esto es todo. La idea principal es que ya no estamos trabajando con streams en su interior. Estamos trabajando con datos como propiedad local. Y esto creará para nosotros una propiedad local justo dentro de este div. Ahora aquí, en primer lugar, queremos crear nuestro contenedor de encabezado de placa. Aquí es donde aquí div class board header container. Y vamos a cerrar este div. Pero vamos a ejecutar el último Insight es un formulario en línea para actualizar nuestra placa. Aquí es donde aquí simplemente escribiré enlace de formulario en línea, así que no nos olvidaremos de ello. Después de esto, vamos a renderizar nuestro div con las columnas de clase y dentro quiero hacer y G para bucle para cada columna. Esta es y aquí, columna de clase y luego G4. Y aquí podemos escribir columna de plomo de columnas de puntos de datos. Como puedes ver aquí con no necesitamos ninguna tubería asíncrona porque estamos resolviendo nuestra propiedad de datos y estamos consiguiendo estos datos dentro, y estos datos se actualizarán automáticamente si el flujo de columnas también se actualiza. Aquí, vamos a cerrar nuestra columna y luego lado queremos renderizar nuestro título de columna de clase div. Ahora dentro nos divertiremos una más. Aquí es donde aquí en forma de línea para actualizar columna. Y después de esta columna tendremos una más en forma de línea. Entonces aquí tendremos forma inline para crear una columna. Entonces este es nuestro marcado básico. En realidad, no rendimos mucho aquí, pero al menos estamos renderizando aquí en columnas, que estamos obteniendo de nuestros datos. Vamos a comprobar si está funcionando. Estoy saltando a la consola y estamos recibiendo un error. Epitope no está disponible para nosotros, por lo que debemos importarlo dentro de nuestro módulo de placa. Entonces aquí dentro de las entradas simplemente podemos agregar el módulo de barra superior. Como puedes ver ahora no tengo ningún error, así que vamos a recargar la página. En realidad ya está ahí. Podemos ver nuestra bonita barra superior. Aquí hay algunos marcadores de posición y en realidad estos ya son nuestras columnas. Y sí, no tendimos tendencia en el título solo por pruebas, podemos hacerlo muy rápido. Volvamos a saltar dentro de nuestro tablero, y aquí estará el título de nuestra columna. Así que en lugar de la forma en línea para la actualización de la columna, podemos simplemente representar aquí columna título punto. Estoy recargando la página aquí, estamos obteniendo primera columna y forma. Se trata exactamente de estas dos columnas que ya se crearon. En primer lugar, dentro de la consola de MongoDB. Y en segundo lugar en la última conferencia donde creamos con el evento, nuestra nueva columna. Y te recomiendan encarecidamente que uses lo último combinado para combinar datos como este en todas tus aplicaciones. Esto es extremadamente eficiente y escalable. 34. Crear un formulario de columna: En videos anteriores, tuvimos éxito en las columnas de identificación de eventos para nuestro tablero y ahora podemos continuar con Crear formulario para nuestra columna. Y sólo para recordarles, en el back-end, ya implementamos toda la lógica para crear una columna mediante el uso de socket un hilo, y ahora solo necesitamos implementarlo en el cliente. Y antes que nada, quiero empezar con algo de HTML. Y en realidad aquí ya estamos preparados formulario inline para crear columna. Aquí es exactamente donde queremos utilizar nuestra firma del interior y ya la tenemos. Solo necesitamos proporcionar información correcta. Aquí vamos a cerrar nuestro formulario interior en lugar del mensaje. Y ahora, ¿qué necesitamos dar aquí? En primer lugar, debemos establecer una clase. Y sólo para recordarle, esta es una clase padre con estilos que estamos anulando para nuestro formulario en línea para este caso específico aquí, nuestra clase será crear forma de columna. Después de esto, queremos establecer un texto predeterminado. Esto es lo que veremos por defecto, y es el texto, al menos también aquí, debemos renderizar un botón para presentar este formulario. Es por esto que aquí podemos escribir que queremos su propiedad botón. Y es cierto después de esto, queremos proporcionar nuestro texto de botón, y este texto será por lo menos. Entonces aquí queremos cambiar nuestro marcador de posición predeterminado. Es por esto que aquí podemos escribir el titular del lugar de entrada, y aquí podemos escribir agregar nombre de columna. Y por último pero no menos importante es por supuesto aquí manejar presentar. Y esta es una devolución de llamada donde obtendremos un título de nuestra columna que queremos crear. Así que aquí quiero agregar nuevo método que se llama Crear columna y luego sitio donde conseguir nuestro título a través de evento. Y lo último que tenemos que hacer, necesitamos crear esta función de columna de grado dentro de nuestra placa. Aquí obtendremos un título como cepa de nuestro foro interior. Y aquí está vacío por dentro y solo quieren consola log aquí, crear columna y ver un título. Recarguemos la página y comprobemos cómo funciona. Y en realidad aquí estamos recibiendo un mensaje. La forma en línea no es un elemento conocido de nuestro módulo. Aquí es donde debemos saltar de nuevo dentro de nuestro módulo de placa. Y aquí dentro de las entradas, queremos ingresar nuestro módulo de formulario inline. Como puedes ver en navegador ahora tenemos un nuevo botón. Al menos podemos dar clic en este botón. Y vemos ahora nuestra entrada la cual es estilo y nuestro atleast botón. Y en realidad si te estás preguntando de dónde vienen todos los estilos, Tal como te dijo anteriormente, damos estilo a todos los elementos de forma en línea con nuestro caso padre y dinámico aquí fue crear forma de columna. Aquí es donde aquí se pueden ver los estilos crear forma de columna y luego la edición de contenedores de formularios en línea. Entonces es por esto que nuestra forma es tan compartible. Y ahora vamos a comprobar que podemos agregar una nueva columna. Aquí estoy escribiendo algo, estoy golpeando por lo menos. Y dentro de la consola podemos ver nuestra columna de crédito y nuestro título de la columna, que en realidad significa ahora aquí podemos lo que en realidad significa ahora aquí podemosemitir un evento para nuestro socket, para nuestro back-end, pero realmente quiero hacerlo mejor. Quiero especificar nuestro aporte. Es por esto que aquí en este tipo de tipos compartidos, tenemos tablero y columna, pero quiero crear una entrada. ¿ Qué significa? Al igual que teníamos dentro de nuestros tipos de búhos, teníamos aquí solicitud de inicio de sesión y solicitud registrada, que es esencialmente un cuerpo de nuestra solicitud. Por lo general queremos o bien nombrarlo solicitud o tal vez desee una entrada de palabra. Esto es así aquí en tipos compartidos, podemos crear nuestra entrada de columna o también puedes nombrarla solicitud de columna. Así que aquí digamos que esta es la interfaz de entrada de columna Ts, y estos son los datos que debemos proporcionar para el back-end con el fin de enviar nuestro evento. Y aquí queremos especificarlo dentro de una interfaz. Por lo que en toda la aplicación sabremos cómo creamos tu columna. Este es camino aquí, Vamos a nombrarlo Interfaz de entrada de columna y las principales diferencias, no es con calma interfaz, es entrada. Por eso es un cuerpo. Y aquí tenemos nuestro título, que es una cuerda. Esto es lo que debemos prever para nuestro back-end. Y en segundo lugar, un ID de placa, que también es cadena. Y ahora podemos usar esta interfaz de entrada dentro de nuestro componente de placa. Así que aquí en lugar de registro de consola, podemos crear nuestra entrada de columna y sabemos que el tipo está aquí, entrada de columna y aquí ahora estamos debemos proporcionar todos los valores posibles. En nuestro caso es justo título. Y en segundo lugar, tablero, AD y cuerpo. ¿ Tenemos dentro de estos ID de puerto de puntos? Y como pueden ver aquí, tenemos un tipo correcto, y ahora debemos tirarlo dentro de nuestro socket IO. Esto es camino aquí, este servicio de columna punto crear columna. Y en realidad aquí no tenemos método create column. Es por ello que debemos crearlo. Quiero saltar dentro de nuestras columnas de servicios compartidos. Y aquí acabamos de obtener columna. Aquí queremos hacer crear cono. Pero este método no hará nada con este GTP. Utilizará nuestro socket IO, y esto es completamente normal, mientras que el tardío, todos estos métodos dentro nuestros servicios y simplemente llamamos a nuestros servicios. Esta es la manera aquí, Vamos a hacer crear método de columna y estamos consiguiendo aquí nuestra entrada de columna. Esto es realmente bonito que se crearon una interfaz aquí. Aquí es donde podemos reutilizarlo y será nuestra interfaz de entrada de columna y de vuelta nos quedaremos anulados. Y sólo para recordarte aquí con HTTP, siempre vuelve un observable. Pero en capa de socket, no funcionará así. Con socket, tienes un solo flujo de datos. Aquí es donde aquí lo único que queremos hacer es detonar nuestro emit. Pero para esto, debemos inyectar aquí nuestro servicio de socket, y este es nuestro servicio de socket que creamos y ahora podemos usarlo dentro de este método. Por lo que este punto, el servicio de socket punto y cumplir, y debemos proporcionar aquí un nombre. Así que vamos a comprobar primero, si tenemos tal nombre dentro de nuestros tipos compartidos, tenemos eventos socket, y aquí no tenemos nada. Y en realidad podemos abrir dentro de back-end esta enum porque dentro de tipos pero también tienen eventos de socket. Y aquí tenemos columna crear, éxito y fracaso, y es exactamente lo mismo. Es por esto que voy a copiar y pegarlo por completo. Y ahora podemos usarlo aquí en lugar del nombre del evento, podemos escribir aquí los eventos de socket ENM no terminan aquí. Queremos activar la calificación de columna y luego guardarla como parámetro. Queremos dar nuestra entrada de columna. Nos da un beneficio más escribir nuestro código con socket dentro del servicio. Aislamos este código dentro de un servicio. Esta es la razón por la que nuestro componente no sabe que estamos usando aquí capa de socket por ejemplo, simplemente llamamos aquí columna de grado de punto de servicio de columna, y nos dan dentro de nuestra entrada de columna. Vamos a comprobar si está funcionando aquí, podemos intentar crear una nueva columna. Estoy golpeando Add. Y ahora dentro de nuestro señalizado, podemos ver columna guardada. Y después de recargar la página, puede ver aquí se crean cono, lo que esencialmente significa que está funcionando, pero no actualizamos nuestra página sobre la marcha. Y obviamente queremos actualizar esta página, primer lugar a nuestro usuario actual, segundo lugar a todos los demás usuarios también. Pero para ello, debemos mejorar nuestro servicio de socket. ¿ Por qué es eso? Porque en realidad lo que tenemos que hacer dentro de frente, debemos suscribirnos de manera cómoda a nuestro éxito. Y sólo para recordarle, dentro de nuestro backend aquí dentro de las columnas del controlador, tenemos un encuentro y en realidad estos son sus dos en medio emitirá este mensaje a todos los usuarios que están suscritos a esta sala específica. Por eso es lo que tenemos que hacer. Queremos suscribirnos a este evento específico, que será éxito de crear columna, pero queremos hacerlo de manera ineficiente. Y luego dijo capa de socket, no es eficiente. Queremos hacerlo de manera Angular. Es por ello que debemos abrir en su interior compartido nuestro servicio, servicio de socket. Y aquí quiero crear después de conocer un método más y se llama Escucha aquí. En primer lugar, quiero escribir t dentro. Y si no sabes cómo usar genéricos, La idea principal aquí es que podemos proporcionar cualquier tipo de datos para bond inside listen, y será lo que vamos a recuperar del socket IO. Entonces aquí estamos proporcionando t y aquí el nombre del evento será cadena. Y atrás quiero ponerme observable de t. y esta es esencialmente la idea. Este método nos devolverá un observable. No es cómodo trabajar con Socket Layer en el interior angular. Es por ello que queremos convertirlo a observable aquí. En primer lugar, buena para comprobar si tenemos socket IO o no. Es por esto que puedo copiar esto si condición aquí, porque si no tenemos socket y estás conectado, entonces no deberíamos hacer nada. Después de esto. Quiero regresar nuevo observable. Y aquí dentro debemos proporcionar una función. Y aquí sólo tenemos un solo argumento que es un suscriptor. Y ahora dentro podemos secarlo. Enchufe encendido. Esto es sólo un código simple de ion de socket. Aquí tenemos nuestro nombre de evento, lo que significa que estamos suscribiendo en el cliente a este nombre de evento que pasamos como parámetro. Aquí está nuestro segundo parámetro aquí estamos obteniendo algunos datos y lo que queremos hacer, queremos emitir nuestro punto de suscriptor a continuación con los datos. Entonces, ¿qué está haciendo este código en absoluto? En primer lugar, aquí debemos probar esto y esto, pueden ver que estamos recibiendo un error. Objeto es posiblemente indefinido él. Y en realidad este es un problema de TypeScript porque aquí no puede entender que este código con Eve lo cubra indefinido. Lo que podemos hacer en su lugar, podemos escribir aquí con socket es igual al socket. Y después de esto estamos cubriendo este zócalo aquí. Y luego en lugar de este circuito donde usar solo socket y en este caso cuando no lo consigo en teorema de TypeScript. Entonces, ¿cuál es la idea de esta función? Lo usaremos así. Entonces aquí está escuchar. Entonces estamos proporcionando algún tipo de datos, por ejemplo, una cadena. Y después de esto aquí retirar y evento, por ejemplo, columna crear o columna crea éxito. En nuestro caso, esta sola línea, nos devolverá un observable. Es por esto que después de esto podemos escribir, por ejemplo, suscribirnos y aquí, y vamos a conseguir aquí nuestros datos. Verás cómo usaremos esta función en un segundo. La idea principal es que esta función creará rápido y observable. Nos suscribiremos con Socket Layer a este nombre de evento específico. Y cuando se active este evento, simplemente actualizaremos nuestro observable. Esta es una forma angular realmente cómoda hacer las cosas con Socket Layer. Ahora vamos a tratar de usar esta función. Quiero saltar hacia atrás y decir que nuestro componente de placa, y aquí tenemos a nuestros oyentes inicializados. Y aquí es un lugar realmente agradable para escuchar los eventos. Es por esto que aquí quiero escribir esta lección de punto de servicio de socket punto. Y aquí debemos proporcionar el tipo porque es obligatorio. Y aquí no vamos a proporcionar eso. Estamos recuperando nuestra interfaz de columna. Esto es lo que estamos consiguiendo después de crear de la columna. Y aquí está el nombre de nuestro evento y queremos suscribirnos aquí a Socrative termina en una columna de puntos crea éxito porque estamos esperando el éxito. Y aquí, después de esto podemos escribir, solo suscríbete y estamos metiendo aquí dentro una columna. Y aquí sólo podemos consola registrar esta columna. Entonces, una vez más, lo que esta línea está haciendo, crea para nosotros un nuevo observable y simplemente podemos usarlo como observable. Lo más importante, dentro donde la derecha y el enchufe encendido. Entonces estamos esperando nuestro emit. Vamos a comprobar ahora si está funcionando aquí, quiero crear una nueva columna y estoy golpeando por lo menos. Y Viola, como pueden ver dentro de la consola, estamos recibiendo nuestra columna. Y en realidad este es este código con el evento de éxito. Y aquí estamos obteniendo exactamente nuestra columna la cual ha guardado base de datos porque como puedes ver aquí hay un 80 de nuestra columna guardada. Y ahora podemos hacer algo en el cliente para actualizar el bucle es ambulatorio mucho nuestra junta, pero no es alta como se puede ver aquí. Abrí la misma pestaña para el mismo usuario. Pero la diferencia es que el socket aquí es diferente porque cada vez que estamos abriendo una nueva pestaña, pero estableciendo una nueva conexión con otro socket ion. Es por esto que cuando aquí trataremos de agregar una lista. Y yo sólo estoy golpeando aquí, al menos estamos llegando aquí este registro de consola de columna. Pero en realidad aquí también obtenemos este registro de consola de columna porque estas son dos pestañas separadas, son dos usuarios separados, lo que en realidad significa que si dos clientes diferentes serán conectados y abiertos este tablero, recibirán simultáneamente nuestro evento respecto a la creación de nueva columna. Y esta es esencialmente la funcionalidad central que queremos lograr dentro del socket ion. Ahora debemos de alguna manera cambiar una lista de nuestras columnas. Y en realidad esto es camino aquí. Quiero escribir este servicio de dot boards y tener cuidado aquí, no pobre, no es nuestro servicio apátrida con funciones, sino nuestro servicio de tablero para el cliente. Aquí debemos crear un nuevo método que se llama Add Column. Y simplemente podemos tirar dentro de nuestra columna, lo que esencialmente significa que nuestro componente no sabe nada de lógica de negocio, cómo trabajar con columnas en nuestro servicio de placa lo sabe. Es por esto que aquí debemos saltar dentro de nuestro servicio de placa y podemos crear aquí una nueva función que se llama columna ABC. Y aquí estamos subiendo a tu columna de tipo, interfaz de columna y atrás nos estamos quedando anulados porque no nos importa el retorno. Simplemente necesitamos actualizar nuestro stream. Y sólo para recordarles aquí en la parte superior tenemos un arroyo de nuestras columnas. Y ahora aquí necesitamos actualizar esto de alguna manera. Es por esto que lo que podemos escribir aquí queremos, primer lugar, actualizar nuestras columnas. Esto es y Vamos a crear aquí propiedad columnas actualizadas. Aquí necesitamos ante todo, difundir lo que tenemos ahora. Y esta es esta corriente de columnas. Y aquí tenemos una función getValue, y se acaba de leer el valor de nuestro stream que tenemos actualmente. Y al final debemos escribir en su columna. Por lo que esta será nuestra nueva matriz de columnas actualizada. Como puedes ver, el tipo es correcto. Esto es array de columna e interfaz, y ahora solo podemos actualizarlo con estas columnas a continuación. Y aquí estamos tirando columnas actualizadas del sitio. Así que simplemente creamos en su matriz y lo escribiremos dentro de nuestro stream. Vamos a comprobar si está funcionando. Estoy recargando la página. Aquí al final, tenemos por lo menos botón y en realidad se ve un poco roto porque está zoom hacia fuera. Ahora aquí vamos a crear una nueva columna. Estoy golpeando lista de edición. Y como se puede ver directamente aquí, vemos nuestra nueva columna, lo que en realidad significa que este código actualiza nuestro flujo y luego nuestro componente está suscrito a la corriente aquí en la parte superior con este combinadomás reciente, estas columnas se está actualizando. Y luego volveremos a enviar este componente automáticamente. Una vez más, ¿cómo funciona todo esto? En primer lugar, estamos llegando aquí nuestra firma del interior. Y esta firma del interior produce para nosotros apenas el título. Después de esto, crearemos este objeto con title y Boyd AD y lo lanzaremos dentro de nuestro servicio de columnas. Aquí está nuestra columna de crédito. Aquí estamos cumpliendo con nuestro evento y estamos tirando dentro de nuestros datos después este back-end reciba este evento crea para nosotros la columna y los medios para todos los usuarios en esta sala, en esta pizarra, el mensaje que hemos creado con éxito nuestra columna. Y después de esto, cada cliente se suscribe con este código apenas desde el principio hasta esta columna. Gran éxito. Y cuando sucede, estamos llegando aquí, nuestra columna de crédito, y estamos dos puntos aquí, pero servicio para agregar una columna. Y esto esencialmente actualizará una secuencia con las columnas. Y nuestro componente será rear-ended en todos nuestros clientes. 35. Creación de una tarea básica: En video anterior, terminamos con éxito con la creación de nuestras columnas. En este video, estamos empezando a trabajar en tareas. Y en realidad debemos implementar la parte back-end de crear las tareas y obtener una lista de tareas para nuestro directorio. Y en realidad piensa que es una bonita posibilidad para que intentes implementarlo tú mismo. Porque en realidad ya hiciste pequeñas fisuras dentro de este proyecto. Y ahora estás listo para hacer algo más grande. Y en realidad conseguir una lista de tareas y crear una tarea es muy similar a nuestras columnas, lo que significa que puedes usar toda la lógica a partir de ahí. Entonces, ¿qué debes hacer si quieres implementarlo tú mismo? En primer lugar, aquí estamos hablando de señas. Por lo que debemos crear una nueva interfaz para nuestra tarea, luego el método del controlador modelo para obtener estas tareas para los chicos y método insertarlo controlarlo para crear una tarea. está la pregunta, ¿qué campos necesitamos dentro de nuestra tarea? Y en realidad aquí, solo quiero escribir qué campos necesitamos. En primer lugar, es un título de nuestra descripción de tareas que no es obligatorio. Puede estar vacío, luego usar 3D para que sepamos quién creó este ID de columna de tarea. Por lo que sabemos en qué columna de nuestra junta debemos tender esta tarea y el adicional a bordo AT. En este caso, será más fácil para nosotros obtener todas nuestras tareas por ID de tablero específico. El back-end, necesita una interfaz y un modelo, luego regístrese en su API para obtener estas tareas dentro de la placa. Y el método para obtener esta lista de tareas por tablero caído. Además, debes crear un nuevo método de creación también dentro de nuestro controlador. Y será un método con socket yacht porque queremos notificar a todos nuestros usuarios que están suscritos a esta junta específica respecto a esta nueva tarea. Y si quieres proceder por ti mismo, solo puedes pausar el video ahora y probarlo. Pero si solo quieres seguir adelante, Hagámoslo juntos. Y ahí está todo esto dicho. Será súper similar a nuestras columnas. Es por esto que voy a copiar pegar mucho. En primer lugar, aquí, quiero saltar dentro nuestros tipos de fuente de servidor. Y aquí tendremos nuestra prueba de interfaz de columna. Y en realidad podemos copiar pegarlo completamente y simplemente crear nuestra interfaz de Tarea Ts. Aquí dentro de lo musculoso se campos exactamente como el plan. En primer lugar, tenemos nuestro título creado al actualizarlo. Siempre lo hemos hecho, aquí está nuestra identificación de usuario y tablero AT esto esta totalmente bien. Pero también necesitamos aquí crear una dama columna. En este caso cuando no, dondequiera que dominen esa la tarea específica. Y también necesitamos aquí una descripción, pero no es obligatoria. Por eso pongo aquí un signo de interrogación. Entonces nuestra interfaz se ve bien. Ahora vamos a cambiar el documento que necesitamos para crear aquí documento de tarea, que es ampliar documento y nuestra tarea que creamos. Y como pueden ver aquí, olvidé cambiar el nombre de nuestra columna a la tarea. Ahora saltemos y creemos nuestro modelo. Aquí dentro de los modelos ya se tienen columna. También copiaré, pegaré todo y solo lo pondré en nuestro nuevo archivo, que es task dot ds. Aquí hay que cambiarlo todo. Festival Aquí tenemos otro esquema de columna, pero esquema de tareas. Y aquí no documento de columna, sino nuestro documento de tarea que acabamos de crear aquí en la parte superior, puedo eliminar con seguridad documento de columna. Aquí tenemos nuestro título. Se requiere. Esto está totalmente bien. Después de esto, volveré a pegar título y renombrarlo a descripción, pero es opcional. Aquí es donde se requiere a través no es necesario aquí. También tenemos aquí nuestro ID de usuario, ID de placa, y aquí quiero poner nuevo ID de columna. Y también se requiere a ciencia cierta. Y el tipo es el ID del objeto. Se ve totalmente bien. Ahora en la parte inferior, debemos proporcionar aquí nuestro documento de tareas. Y aquí es una tarea, que es un esquema de tareas. Nuestro modelo está completamente listo. Ahora debemos crear una nueva API dentro de nuestro servidor. Esto es y Volvamos a saltar dentro de los niveles del servidor fuente de servicio. Aquí tenemos nuestras llamadas API. Y en realidad nuestra nueva llamada API será súper similar a este código. Aquí estamos obteniendo columnas por placa específica Id. En realidad queremos conseguir todas nuestras tareas para puerto específico. Es por esto que voy a copiar, pegar esta línea, pegarla aquí, y simplemente renombrar. Serán tablas de corte de pastel slushy. Board es parámetro dinámico, y aquí tenemos nuestras tareas y aquí también necesitaremos nuestro middleware. Y aquí necesitamos un nuevo controlador, que será controlador de tareas, porque por dentro queremos administrar nuestras tareas. Y aquí el método obtendrá tareas, y este método debe devolver todas las tareas para este tablero específico. Ahora es el momento de crear un controlador. Es por esto que voy a saltar y dichos controladores. Y quiero copiar pegar las columnas enteras del archivo solo porque es más fácil cambiar y será súper similar. Entonces lo estoy pegando aquí y renombrando dos tareas, dot ds. Aquí dentro tenemos dos métodos, crear columna y obtener columna. Y en realidad aquí podemos simplemente renombrar get columnas para obtener tareas. Y aquí estamos dejando todo tal como está, solicita respuesta. A continuación, esto está totalmente bien. Pollo para el usuario está bien aquí. Reprograme, todo es impresionante. Ahora aquí no necesitamos usar modelo de columna, sino que necesitamos usar aquí el modelo de tareas. Aquí es donde aquí en la parte superior voy a introducir modelo de tarea. A partir de la tarea de modelos. Ahora aquí podemos cambiar nuestro modelo de columna a modelo de tareas. Aquí estamos haciendo encontrar por frontera diferentes parámetros de solicitud, ID de placa, y esto es exactamente lo que necesitamos y es por eso que tenemos cuerpo dentro de nuestro esquema. En este caso, con una sola línea de trabajo encontrando todas nuestras tareas para esta junta específica. Así que aquí de vuelta estamos recibiendo nuestra lista de tareas, y aquí simplemente podemos enviarlas de vuelta a nuestra API. Y con eso, nuestra acción para conseguir la lista de tareas está totalmente lista. Ahora vamos a cambiar el directamente esta columna de creación. Y como puedes ver aquí, estamos hablando de socket IO, y también será súper similar. En primer lugar, tenemos aquí un método crear tarea aquí donde obtener su socket y datos. Entonces, ¿qué necesitamos para obtener datos internos? En primer lugar, nos estamos aburriendo o ED, pues debemos notificar todos los usuarios dentro de esta placa específica. Esto está totalmente bien. Ahora tenemos aquí cadena de título, y la última aquí es id de columna Y id de columna también es cadena y deberes obligatorios. Y se puede decir aquí que no proporcionamos una descripción en su interior. Su total es correcto en crear, contar, cambiar descripción, descripción que podemos proporcionar sólo dentro de Actualización. Por eso esto está totalmente bien. Entonces lo que estamos haciendo aquí adentro, primero que nada queremos tener un fracaso para nuestras tareas crear. Pero para esto, primero debemos actualizar nuestros eventos socket. Es por esto que saltaré en tales tipos de fuentes. Y aquí tenemos nuestros eventos socket, y aquí ya tenemos columnas grade y quieren copiar pegar las tres acciones. Aquí podemos renombrarlo de columnas a tareas crear, y aquí está tareas crear, luego Tareas, gran éxito y tareas crean, fallando nuestros eventos socket está listo. Podemos saltar de nuevo dentro de nuestras tareas y cambiar aquí eventos socket en ellos para crear tareas de punto más pálidas y no van a cambiar directamente aquí nuestra captura, y aquí sólo podemos proporcionar tareas de punto crear fracaso. Ahora vamos a actualizar una parte interna aquí no tenemos modelo de columna, sino modelo de tarea, ya estamos ingresados. Aquí, nos estamos titulando a partir de los datos. Esto está bien. Id. de la placa. Y aquí el usuario de socket está listo. Todo esto está totalmente bien, pero también debemos proporcionar aquí alcalinidad de la columna de puntos de datos puede ser. Y después de esto aquí estamos guardando no nueva columna, sino nueva tarea. Aquí. Vamos a cambiarle el nombre a nueva tarea. Y aquí simplemente podemos llamar a nueva tarea dot save y estamos volviendo tarea guardada. Ahora con esta línea, queremos notificar a todos nuestros usuarios que creamos una nueva tarea. Así es como aquí estamos emitiendo este evento y hacer estas tareas crea éxito. Y aquí queremos devolver la tarea de guardar. Y aquí podemos eliminar este log de consola. Ya no lo necesitamos y estamos completamente creados con nuestro método Create Task. Y lo último que debemos hacer, debemos suscribirnos para empezar a crear la tarea desde el cliente. Por eso debemos saltar de nuevo dentro de nuestra hermandad S. Y aquí en la parte inferior tenemos el zócalo encendido. En realidad podemos copiar pegar columnas Crear y simplemente cambiarlo a nuestro socket, incluso crear tareas de punto CNN. Y aquí estamos obteniendo nuestros datos y simplemente necesitamos llamar a nuestra columna de creación de controlador de tareas. Y aquí no se creará columna, sino crear tarea. Y como puedes ver aquí con no importamos nuestras tareas controlando. Es por esto que en la parte superior, quiero copiar pegar columnas controlador y renombrarlo a nuestro nuevo archivo, que es controlador de tareas. Desde tareas de controladores, parece que implementamos todo. Ahora saltemos dentro de la consola. Como puedes ver, no tenemos ningún error al estar conectando a MongoDB. Api está escuchando. Es por esto que en realidad solo quiero copiar pegar el tablero Id abrir Postman aquí y tratar de obtener nuestra lista de tareas. Por lo que es slash sports que un pegar este ID slash tareas y ellos ocultos aquí enviar. Y como se puede ver de nuevo, estoy recibiendo una matriz vacía, que está totalmente bien porque aún no creamos ninguna tarea, lo que en realidad significa que nuestro backend está completamente preparado. Y ahora podemos comenzar con la implementación del lado del cliente. 36. Obtención de tareas: En video anterior, terminamos con éxito de preparar nuestros modelos de tareas y conseguir tareas en el backend. En este video, debemos hacer exactamente lo mismo en el cliente. Y te recomiendo mucho que también lo hagas tú mismo porque ya tienes tanto conocimiento. ¿ Qué tienes que hacer si quieres hacerlo tú solo? En primer lugar, es necesario saltar y dicha fuente de clientes, aplicación compartida. Y aquí tenemos nuestros tipos, tenemos aquí Boyd y columna, y ahora debemos crear una nueva interfaz para nuestra tarea. Después de esto, debemos crear un nuevo servicio para trabajar con tareas, ya sean que tengan tableros, columnas. Ahora, necesitamos un nuevo servidor que se llama servicio de tareas. Aquí boop obtendrá las tareas exactamente de la misma manera, como si estuviéramos consiguiendo aquí columnas para nuestro tablero, pero no es todo. También debe actualizar molécula de placa de información privilegiada en dichos servicios, pruebas de servicio de tablero. Porque aquí estamos hablando stream para tablero y stream para columnas. Y además debemos crear aquí stream para nuestras tareas y adicionalmente funcionar que actualizará el stream. Y después de esto, simplemente debes buscar datos aquí dentro de esta última combinada. Y esto es todo. Si vas a implementar este spot por tu cuenta, eres impresionante. Pero si quieres implementarlo juntos, hagámoslo ahora. Entonces, antes que nada, saltaré en este tipo de clientes fuente, app, tipos compartidos. Y aquí quiero crear un nuevo tipo para nuestra interfaz de Tarea Ts. Y debemos tener exactamente las mismas propiedades que teníamos en nuestro back-end. Es por esto que aquí podemos exportar nuestra nueva interfaz y es Interfaz de tareas, la interna. En primer lugar, tenemos nuestra identificación, que es una cadena. Después de esto tenemos nuestro título, que es una cuerda. También tendremos aquí descripción, pero no es obligatorio. Es por esto que Aquí está el signo de interrogación. También es una cuerda. También necesitamos aquí nuestra columna ellos D, que es la referencia para la columna específica, nuestro padre. Y necesitamos aquí nuestra identificación de placa, y también es una cuerda. Y en realidad estamos llegando aquí usura t, que también es una cuerda. Por lo que nuestra interfaz de tareas está completamente lista. Ahora podemos saltar de nuevo dentro de los servicios compartidos y crear aquí en su servicio. Y en realidad lo que quiero hacer, quiero copiar pegar columnas del servicio solo porque va a ser super similar. Vamos a cambiar el nombre del servicio de columnas a Tareas, servicio Ts, y Como se puede ver aquí es MenuService servicio de tareas. Lo que queremos hacer aquí, queremos cambiar el nombre. Entonces aquí tenemos tareas, servicio donde vive constructor tal como es, debemos usar aquí http y latest. Tan buen servicio. Y aquí hay un método no obtener columnas, sino obtener tareas. Y aquí queremos conseguir nuestras tareas por la junta AT, porque estamos buscando solo una sola vez todas nuestras tareas para tablero específico. Y aquí estamos consiguiendo Becker observable de matriz de interfaz de tareas. Y aquí está nuestra URL. Se trata de tareas de slash slash board ID slash. Aquí está el HTTP GET no cirugía de interfaz de columna sino matriz de interfaz de tareas. Por ahora quiero quitar la columna de crédito por completo porque no vamos a implementar crear tarea en este video. Es por esto que puedo eliminar estas tres entradas en la parte superior. No los necesitamos por ahora. Ahora es el momento de actualizar nuestro servicio de placa. Es por esto que voy a agregar Servicios de Junta, Servicio de Junta. Y aquí debemos crear una nueva cadena. Voy a copiar pegar aquí columna stream, y cambiarlo a Task Stream. Y este es un comportamiento un tema de matriz de interfaz de tareas. Y por defecto aquí tenemos una matriz vacía, que está totalmente bien rápido. Ahora aquí tenemos un método, enviar tableros en columnas. Debemos crear un nuevo método que se llame set tasks. Y aquí hay una discusión. Estamos recibiendo nuestras tareas y es una matriz, por lo que es Task interface array. Y ahora aquí dentro de nuestra corriente, tareas con dólar, queremos establecer nuestras nuevas tareas para que casi terminemos. Ahora la biomasa salta dentro de nuestro componente, placa, componente de placa. Y aquí está nuestro último combinado. Y solo para recordarles, aquí en say data, estamos combinando todos nuestros streams para buscar datos para la placa. Esto es lo que debemos hacer aquí. Ahora, debemos agregar aquí este servicio de placa, y aquí está en uso las tareas de flujo. Y ahora dentro del mapa como tercer argumento, hay que tratar de tareas y queremos devolverlas aquí. En este caso aquí dentro de nuestro dólar de datos, tendremos no sólo tablero y columnas, sino también tareas. Y si hiciste todo aquí por ti mismo, eres realmente increíble y estás haciendo un buen progreso. Y ahora lo único que debemos hacer aquí, debemos rendirlos dentro del HTML. Así que vamos a abrir nuestros componentes de placa HTML. Y lo que tenemos aquí es nuestra columna for loop. Y por dentro tenemos un título y no tenemos nada más. Y después de este título, queremos renderizar uno más profundo. Y aquí necesitamos. Y, y G para bucle para nuestras tareas dentro de la columna. Y en realidad no podemos hacerlo porque tenemos justo este flujo para nuestras tareas dentro de los datos, pero no tenemos tareas para esta columna específica y de alguna manera debemos filtrar estos datos. Es por esto que aquí quiero escribir en G4 y se llevará tarea de, y aquí quiero crear una nueva función. Por ejemplo, obtener tareas por columna. Y luego lado debemos proporcionar en primer lugar id de columna y en segundo lugar, todas nuestras tareas, son tareas de punto de datos. Y sólo para recordarles aquí dentro del flujo de datos, dónde nos metemos en las columnas y tareas de nuestro tablero. Esto es camino aquí dentro de esta función como argumento, simplemente podemos lanzar tareas de punto de datos, a menudo G4, también debemos aquí mismo una clase, será tarea. Y aquí dentro queremos renderizar tarea dot title. Y ahora solo falta crear este niño tareas por función de columna. Esto es y aquí dentro de archivo OTS. Voy a crear esta función aquí. Nosotros, en primer lugar, me meto en la columna id, que es nuestra cadena. Y en segundo lugar, tareas, y es una matriz de interfaz de tareas. Y aquí de vuelta estamos recibiendo nuestra matriz de interfaz de tareas. ¿Por qué es eso? Porque esencialmente simplemente queremos obtener nuestra matriz con todas las tareas y filtrar por esta específica columnada. Esto es camino aquí, la matriz de interfaz de tareas está totalmente bien. Y lo que queremos hacer en el interior, queremos filtrar nuestras tareas que fueron Dios, es por esto que el filtro de tareas obtendrá un acceso a cada una de las tareas. Y aquí podemos comprobar tarea punto dos puntos es igual a nuestro nombre de columna que proporcionamos como un argumento, lo que en realidad significa que estamos colin para cada columna que estamos renderizado, esta función obtiene tareas por columna y vamos a renderizar aquí en energía para bucle nuestras tareas. Vamos a comprobar el sonido. ¿Tenemos algún error? Sí, tenemos tareas de propiedad no existe en columnas de placa tipo, lo que esencialmente significa que no actualizamos nuestra propiedad de datos. Y como pueden ver aquí en la parte superior, estamos definiendo que dentro de nuestro observable, acabamos de comprar y columnas. Pero aquí también tenemos nuestras tareas, que es una matriz de interfaz Task. Ahora aquí no tenemos ningún error dentro de nuestro servidor web y podemos saltar a página y vemos todas nuestras columnas, pero no vemos ninguna tarea dentro de por qué está sucediendo, porque en realidad no llamamos a nuestro fetch. Y en realidad aquí dentro de nuestro constructor, debemos inyectar nuestro servicio de tareas que acabamos de crear. Y es nuestro servicio de tareas el que se comparte. Y ahora debemos saltar dentro de nuestros datos de fetch, tal como hicimos aquí. Podemos copiar, pegar nuestro servicio de columnas y renombrarlo a nuestro servicio de tareas. Y aquí no va a estar conseguir columnas, sino conseguir tareas y el interior vale la pena tirar nuestro tablero ID, que es esta parte AD y atrás, estamos consiguiendo no columnas, sino tareas. Y aquí queremos llamar a este servicio de tablero no establecer columnas, sino establecer tareas. Y por dentro estamos tirando a tareas que buscábamos. Es por esto que con este código, actualizamos nuestro stream y el stream obtendrá nuevos datos dentro de nuestro HTML. Echemos un vistazo a esto. Voy a volver a cargar la página y estamos recibiendo un error. Como puedes ver ahora estamos en tablas de corte. Y cuando estoy saltando a primera parte, estamos recibiendo un error que no hemos proporcionado para el servicio de tareas porque en realidad sí, debemos inyectarlo dentro de nuestro módulo de placa. Aquí es donde aquí dentro de los proveedores, debemos sumar adicionalmente nuestro servicio de tareas. Recarguemos la página y como puedes ver ahora, no tenemos ningún error. Y aquí dentro de red, debemos tener una solicitud para nuestras tareas. Y aquí está una solicitud slushy pie tablas de slash slash tareas de ID slash. Y aquí está la vista previa con no tener ninguna tarea, lo cual está totalmente bien. Todavía no los creamos, pero obviamente queremos comprobar que nuestro código está funcionando. Es por esto que lo que quiero hacer dentro de la consola. Quiero abrir nuestro Mongo, al igual que lo hicimos anteriormente. Ahora, necesito seleccionar nuestra base de datos por lo que usamos L trailer. Y aquí podemos comprobar lo que tenemos. Por ejemplo aquí ahora podemos escribir db dot boards, dot find. Y con esto veremos todas las tablas que tenemos. Nosotros sólo tenemos una sola placa. Y de la misma manera podemos escribir db dot, columnas, dot find, y donde llego en nuestras columnas. Y lo que queremos hacer ahora, queremos insertar en tu tarea dentro de una de estas columnas. Es por esto que aquí podemos escribir db dot y tenemos tareas dot, insert, y dentro estamos lanzando un objeto. Entonces, la primera pregunta, ¿ qué necesitamos para proporcionar información? Y para ello, podemos consultar nuestra interfaz de Tarea. Por lo que en primer lugar, id será generada externa, debemos proporcionar un título. Entonces aquí está el título. Por ejemplo, mi primera tarea después de esta promesa proporcionar una descripción. Entonces digamos que la descripción es mi descripción. Y después de esto, debemos proporcionar la columna necesitada. Y en realidad aquí en la parte superior, ya veo columnas. Aquí es donde solo puedo tomar un AD o FirstColumn y lo tirarán aquí. Entonces será id de columna Y aquí está este AD. Y después de esto, también debo proporcionar un tablero AD Aquí. También tendremos una tabla AD aquí en la parte superior y podemos llevarla. Y por último pero no menos importante es aunque un usuario AT y en realidad usa 3D. No veo aquí arriba, pero puedo tomarlo desde el back-end. Y como puedes ver aquí dentro de nuestro backend, todavía tenemos un registro de consola con correo electrónico de nuestro usuario y ID de objeto. Es por esto que solo copiaré pegaré la idea de cómo un usuario y la escribiré aquí. Así que use re d es igual a este ID de objeto. Estoy pegando a Enter, y aquí está nuestro primer disco. Vamos a crear una más, por ejemplo, mi segunda tarea, y aquí está mi descripción. Yo estoy golpeando Enter y estamos consiguiendo una tarea más. Recarguemos ahora la página y el navegador. Como pueden ver aquí, voila, tenemos nuestras dos tareas. Entonces, cómo está funcionando aquí es nuestra red y tenemos una solicitud con tareas PS a nuestro backend. Y aquí estamos recibiendo todas las tareas filtradas por esta placa específica Id. Y luego dentro de nuestro código, dentro de nuestro tablero, tenemos este código que escribimos para filtrar nuestros datos. Por lo que aquí tenemos una función obtener tareas por columna donde dentro donde filtrar todas nuestras tareas por esta columna específica AD. Aquí es donde aquí estamos renderizado sólo tareas que están relacionadas con esta columna, lo que en realidad significa que implementamos con éxito en el front-end, obteniendo nuestras tareas y renderizado dentro de nuestro componente. 37. Crear un formulario de tarea: En este video, podemos fin implementador o forma interior para crear una nueva tarea. Y en realidad ya estamos preparados todo lo que necesitamos en el backend. Solo necesitamos implementarlo en el cliente. Entonces comencemos con nuestro foro. Esto es por lo que quieren hacer. Quiero saltar, configurar nuestro componente de placa HTML. Aquí, ¿hay un diff para renderizar en la tarea? Y después de esto, al final, queremos renderizar nuestra forma inline. Vamos a tendencia aquí componente de forma en línea. Y vamos a cerrarlo aquí. Y ahora dentro cuando debe aportar algunos valores. En primer lugar es la clase. Esta es nuestra clase de patrón que anula todos los estilos y es Create Task Form. Después de esto, también estamos debemos proporcionar texto por defecto. Será agregar una tarjeta, pero también tener un botón aquí. Entonces aquí está el botón debe ser cierto y debemos proporcionar un texto. Aquí es donde aquí estará el texto del botón y está al corriente. También queremos proporcionar aquí nuestro titular de lugar de entrada y es introducir un título para esta corriente y por último pero no menos importante es nuestro método de envío de mango que debemos crear. Vamos a nombrarlo, crear tarea, igual que hicimos con nuestra columna y la perspicacia que queremos dar en primer lugar a cualquier evento. Este será el título de tarea creativa, pero también necesitaremos aquí nuestra columnada, porque nuestro backend debe saber en qué columna estamos creando esta tarea. Y si quieres preguntar por qué nos dan aquí solo columnados y no Boyd AD. Tenemos una placa 3D dentro de este componente interior. Por eso no necesitamos hacer eso. Ahora, vamos a crear este método. Saltaré a nuestra pizarra y en realidad debemos hacer exactamente lo mismo. Lo que hicimos fue crear columna. Pero aquí hay una pregunta. Tenemos aquí la interfaz de entrada de columna. Así es como se ve y ahora debemos crear nuestra interfaz de entrada de tareas. Entonces todas nuestras cosas están escritas de la misma manera y esto se evita que debemos enviar para poder crear una tarea. Aquí es donde aquí podemos nombrarlo también interfaz de entrada de tareas Ts y ¿qué queremos escribir dentro? Esta es nuestra interfaz, que es una interfaz de entrada de tareas. Y el interior, en primer lugar, boom debe proporcionar un título. Es obligatorio y es una cadena. Segundo bucle que estamos proporcionando aquí nuestro ID de columna, que también es una cadena. Y por último pero no menos importante es nuestro AD hervido, y también es una cuerda. Y ahora tenemos un buen aporte y podemos volver a saltar en nuestra pizarra. Y ahora quiero copiar pegar esta columna crear porque será exactamente lo mismo pero para tarea. Entonces aquí necesitamos renombrarlo para crear tarea. Aquí estamos recibiendo no solo título, sino también nuestro ID de columna porque lo proporcionamos desde nuestro HTML. Y ahora aquí podemos cambiar el nombre de Entrada de columna a entrada de tarea. Y nuestra interfaz aquí será Interfaz de entrada de tareas que acabamos de crear. Y como se puede ver donde me falta aquí, nuestra columna ID. Aquí es donde aquí debemos agregarlo del argumento. Y aquí no necesitamos llamar a un servicio de cono. Debemos coherir nuestro servicio de tareas. Y solo para recordarte que este es nuestro servicio sin estado donde estamos escribiendo nuestra solicitud HTTP y nuestro socket IO. Y este método debe llamarse create task, y estamos tirando dentro de nuestra entrada de tarea. Pero este método aún no existe. Debemos crearla. Es por esto que vamos a saltar hacia atrás y decir que es fuente de los servicios compartidos de la aplicación, y aquí está nuestro servicio de tareas. Pero lo que quieren hacer, quiero copiar pegar el método crear columna, porque en realidad esto será exactamente lo mismo. Copio pegado crear columna y quieren pegarla aquí dentro del servicio de tareas. Pero este método se llamará crear tarea. Y estamos recibiendo como argumento nuestra tarea de entrada y bien escrita sabemos que tipo será interfaz de entrada de tareas. Aquí también queremos llamar a un socket IO porque está funcionando de la misma manera. Tenemos una operación asíncrona y hemos comenzado el éxito y el fracaso. Por lo que empezamos a crear una tarea, lo notificaremos con el cumplir con nuestro back-end. Entonces Bacon crea tarea faceta, y luego backend notifica a todas las personas que están suscritas a nuestra junta con respecto a la nueva tarea. Aquí es donde en realidad debemos actualizar nuestros eventos socket en ellos. Quiero abrirlo aquí a la derecha, y adicionalmente, abrir la enum dentro de un servidor porque ya estamos escritos dentro de nuestros eventos. Estos tres nuevos eventos, tareas crean éxito y fracaso. Y ahora podemos pegarlos aquí para usarlos en el cliente. Después de esto, podemos saltar de nuevo dentro nuestro servicio de tareas y cambiar el nombre aquí. Y serán tareas del DOD crear. Y aquí hay un parámetro. Se nos da una entrada de tarea, lo que en realidad significa que después de llenar nuestro formulario interior aquí enviaremos nuestro socket, su imagen a nuestro backend y nuestro tocino ya está preparado para crear nuestra tarea y el éxito cárnico de vuelta a todos nuestros usuarios. Echemos un vistazo a esto. ¿ Es realmente así que podemos saltar en nuestros controladores fuente del servidor, y aquí está nuestro controlador de tareas. Y como pueden ver, aquí tenemos crear método de tarea, y aquí estamos creando una nueva tarea y luego notificando con esta línea a todos nuestros clientes, lo que en realidad significa que solo debemos suscribirnos a estos cambios dentro de nuestro cliente. Aquí es donde aquí estoy saltando de nuevo dentro de nuestro componente de placa ts. Y sólo para recordarles, aquí tenemos a nuestros oyentes inicializar y aquí tenemos un oyente para nuestra columna crea éxito. Ahora, hacemos exactamente lo mismo para nuestra tarea, gran éxito. Entonces aquí tendremos nuestra interfaz de Tarea, y aquí el tipo será DOD. Las tareas crean éxito. Y lo que esta interfaz de tareas está haciendo de esta manera aquí estamos recuperando Interfaz de tareas porque es genérica. Y ahora especificamos o k, Esta lección nos devuelve nuestra interfaz de Tarea. Aquí es donde aquí debemos crear un nuevo método en tarea dentro de la palabra servicio. Y estamos proporcionando aquí nuestra tarea que obtuvimos del backend. Y lo último que queremos hacer es agregar este método dentro de nuestro servicio. Abramos nuestro servicio de tablero. Y aquí tenemos en columna. Y como todos ustedes han hecho el stent, quiero copiar pegarlo y simplemente hacer exactamente lo mismo. Aquí tenemos un método de tarea y estamos llegando aquí cuando creas una tarea, y es una interfaz de Tarea. Aquí necesitamos hacer una serie de tareas actualizadas. Entonces aquí estamos recibiendo esto que no corriente de columnas, sino flujo de tareas, luego obtener valor. Y aquí al final, queremos escribir nuestra nueva tarea. Y después de esto, debemos actualizar de nuevo nuestra cepa. Aquí está el flujo de tareas y aquí está las tareas actualizadas. Y con este código, actualizaremos con éxito nuestro stream y todos nuestros componentes que estén suscritos a este stream serán letra automática terminada. Vamos a comprobar si está funcionando. Aquí no tenemos ningún error. Y ahora quiero abrir dos pestañas aquí. Y quieren con ambos clientes saltar dentro de la misma pizarra. Y como puedes ver aquí está nuestro log de consola. Y quieren probar el corte aquí. Así que aquí está nuestro formulario en línea y vamos a nombrarlo, creó una función de tarea. Ahora estoy golpeando Enter, y como puedes ver directamente aquí en esta pestaña, aparece este elemento. Entonces cómo está funcionando, en realidad llenamos nuestra firma del interior. Le enviamos nuestra imagen al back-end. Back-end, lo consiguió, creó una nueva tarea y notificó a todas las personas, todos nuestros clientes que están suscritos a esta junta respecto a este cambio. Y con esta escucha, actualizamos en declinó nuestra gama de tareas y este componente se terminó por atrás. La parte más interesante es aquí es otra pestaña y otro usuario, este es otro cliente con otro socket AD. Y como puedes ver aquí, también tenemos nuestra función Crear tarea porque ahora todos nuestros clientes están sincronizados. Y podrías decir, está bien, pero tu destino, solo necesitas un solo navegador. En realidad no importa. Es sólo una conexión de socket diferente a su servidor. Si solo tienes dos computadoras y tu proyecto está desplegado en la producción, funcionará exactamente de la misma manera. Por ejemplo, aquí sólo puedo crear una nueva tarea. Por ejemplo, foo, estoy golpeando aquí en la tarjeta y luego obteniendo exactamente la misma información sin Pedro mucho en otra pestaña, lo que en realidad significa que nuestra característica era crear tareas es completamente terminado. 38. Actualiza el nombre de la junta: En este video, implementaremos una característica más que falta y es una forma de actualización del nombre de nuestro tablero. Y como pueden ver aquí, tenemos un marcador de posición tablero de formulario en línea, y aquí debemos usar nuestro formulario interior. Y en realidad este es nuestro primer video donde juntos implementaremos toda la función backend y cliente en un solo video. Y en realidad toda la lógica será exactamente la misma como ya hicimos anteriormente, porque construimos una arquitectura agradable y ahora podemos crear fácilmente nuevas características. Entonces de qué se trata esta característica, tendremos aquí y luego firma mía y estamos sacando de ella un título. Lo más importante, en primer lugar, debemos tirar nuestro título del tablero en firmar este formulario en nuestro éxito de actualización, pero no queremos usar el GTP aquí. Wloop, queremos usar Socket IO por eso, porque todos nuestros clientes deben ser notificados si el ER, en este punto, cambiamos el nombre del tablero. Aquí es donde socket o tu carne como siempre. Y luego en nuestro backend, debemos coger este evento y actualizar nuestro nombre. Y en realidad podemos crear un método para actualizar todo el tablero, pero vamos a actualizar por ahora en el título de la capa. Entonces vamos a tratar de hacer esto ahora. Para esto, quiero saltar dentro de nuestro código y empezar. En primer lugar fue nuestro servidor. Y para este boom registro masivo y use socket evento aquí dentro de nuestro Socrativo y xenón. Y ya tenemos aquí tableros, hoja y cadena de puertos y en realidad poner quieren exactamente lo mismo como hicimos con columnas. Y aquí tenemos columnas crear por ejemplo, y quieren copiar pegar las tres. Porque en realidad aquí por ejemplo, después de tableros en vivo, queremos escribir tableros y aquí estará actualización. Aquí es donde aquí podemos cambiarlo directamente a placa de actualización de placas actualizaciones éxito y fallas de actualización de placas. Y ahora aquí a la derecha, debemos hacer exactamente lo mismo. Aquí habrá tableros y actualización. Después del éxito de actualización de esta placa y la falla de actualización de las placas. Por lo que nuestro evento socket se crea con éxito y ahora debemos registrarlo dentro de nuestro socket IO. Esto es por volvamos a saltar dentro o un servicio, sí. Y aquí en la parte inferior tenemos nuestro zócalo encendido. Aquí debemos registrar y usar socket ton. Para ello, podemos simplemente copiar pegar por ejemplo, tarea crear y escribir aquí, no crea, sino reaccionar en actualización de tableros de puntos que acabamos de crear. Por lo que estamos esperando la actualización de los tableros de eventos por parte de nuestro cliente. Y aquí no queremos usar el controlador de tareas, pero el controlador de la placa aquí no crear tarea, sino actualizar placa. Y en realidad dentro estamos pasando o sus datos de socket, igual que lo hicimos anteriormente. Ahora, vamos a crear este método de tarjeta de actualización para estos pagos saltan dentro de nuestras placas controladoras. Y aquí ya tenemos este método crear tablero, pero esto no es lo que queremos porque este método es con un zapato TP. Es por esto que en realidad queremos algo así como live board por ejemplo. Es por esto que voy a copiar pegar este método porque todas las opciones serán similares y podemos nombrar a este método placa de actualización. Y sabemos que aquí estamos obteniendo nuestro socket IR y luego nuestros datos. Y la pregunta es, ¿qué datos necesitamos para actualizar un tablero seguro debemos saber a título de la junta que queríamos proporcionar. Y en segundo lugar, la idea de la junta que queremos actualizar. Aquí es donde nuestro cuerpo está totalmente bien. Y en realidad aquí no quiero escribir un título, quiero escribir campos. Y aquí pasaremos cadena de título. ¿ Por qué tenemos tal notación? En este caso aquí, podemos agregar fácilmente nuevo campo que queremos actualizar dentro de nuestra placa. Por ejemplo, si después tendremos una descripción, podemos simplemente tirarla aquí, pero por ahora sólo tenemos un título. Ahora aquí podemos quitar este log de consola, no lo necesitamos y también socket leaf. Entonces la pregunta es ¿qué vamos a escribir aquí en absoluto? En primer lugar, debemos escribir aquí try-catch sólo porque podemos obtener un error. Este es camino aquí, Vamos a crear, tratar y atrapar. Y aquí estamos entrando, capta un error. Y si tenemos un error, solo queremos escribir socket y carne. Y aquí está nuestros eventos socket en un punto. Y ya estamos creados nuestra falla de actualización de tableros. Y lo que queremos proporcionar información es nuestro mensaje de error get. Y sólo para recordarles, este es nuestro ayudante el cual transformará una flecha. Este es mi interior. Simplemente podemos proporcionar nuestro error desconocido. Ahora vamos a crear nuestro trie. Entonces Festival aquí queremos comprobar si un usuario válido, esto es y Vamos a comprobar si no tenemos un usuario socket dot, luego pasar a emitir exactamente el mismo error. Entonces aquí probemos socket, los eventos de socket, falla de actualización de placas ENM. Y aquí en lugar de obtener mensaje de error, simplemente podemos escribir usuario no está autorizado. Además, no debemos olvidar aquí escribir una declaración. En este caso, simplemente dejaremos de hacer cualquier cosa. Porque después de esto, si queremos escribir nuestra lógica, esto es actualización del tablero. Y en realidad es sumamente fácil, pero debemos hacer que este método sea tan sincrónico porque queremos usar esto en Kuwait por dentro. Ahora aquí dentro de lo que quiero hacer, quiero recuperar nuestra pizarra actualizada. Y para actualizar una tabla, debemos usar aquí un peso y aquí hemos accedido o modelo de trabajo. Y podemos usar buscar por ID y actualización. Y en realidad este es un método increíble de Mangosta. En este caso aquí solo estamos proporcionando NAT y en nuestro caso es data dot board Id. Y aquí está nuestra actualización. Y en realidad actualizar es exactamente lo que queremos actualizar dentro de nuestra entidad. Aquí es donde aquí sólo podemos probar los campos de punto del tablero y esto es un objeto. Y la última son opciones. Aquí, quiero brindarte una opción a través de. Esta opción es realmente importante porque en este caso, recuperaremos nuestra placa actualizada. También, como pueden ver aquí, cometí un error. No es un tablero de campos de punto, son campos de punto de datos. Ahora no tenemos ningún error y podemos responder con este puerto. Y para esto podemos simplemente usar socket and meet. Aquí está nuestro zócalo incluso los visto. Y aquí tenemos el éxito. Por lo que las placas actualizan el éxito. Queremos proporcionar como segundo parámetro se actualizan placa. En este caso, todos nuestros clientes serán notificados sobre este evento después este cupón para notificar a todos nuestros clientes que estén suscritos a este tablero sobre nuestro cambio. Aquí es donde aquí podemos escribir ir dot t2, y aquí queremos notificar a todos los clientes dentro de nuestra habitación. Aquí es donde aquí tendremos datos, tablero de puntos Id dot, y conoceremos al igual que escribimos anteriormente. Y aquí dentro podemos usar nuestros eventos socket en m dot. Y aquí tenemos un éxito de actualización de la junta. Y hay un segundo parámetro que queremos escribir aquí, puerto actualizado. En este caso, los usuarios de Oliver serán notificados A bordo actualizó y sabrán qué campos necesitan cambiar. Nuestra parte de back-end está completamente lista. Ahora debemos implementar una parte del cliente. Aquí es donde volvamos a saltar dentro nuestra aplicación de fuente de cliente. Y aquí quiero ir en primer lugar dentro de Shared Services, Board service. ¿ Por qué es eso? Porque en realidad aquí estamos lanzando nuestros eventos para el back-end. Y en realidad antes escribimos aquí al igual que GTP cat y el apetecible propusieron. Pero en nuestro caso ahora, debemos emitir un evento socket. Es por esto que lo que queremos crear aquí es el tablero de actualización del método. Queremos proporcionar aquí. En primer lugar, nuestro tablero AD, esta es una cadena y en segundo lugar, campos que queremos actualizar. Como puedes ver, tenemos parámetros exactamente como en el backend. Aquí los campos se titula, que es una cadena, y de vuelta con no es necesario obtener nada porque simplemente usamos aquí socket IO, pero para usarlo aquí, pero debe inyectarse dentro del constructor. Este es y aquí estamos recibiendo nuestro servicio de socket, que es nuestro servicio de socket. Ahora dentro de nuestra placa de actualización, podemos usar este servicio de toma de punto, punto y carne. Y aquí debemos proporcionar nuestro evento socket. Pero aquí está el problema. Todavía no lo registramos dentro de nuestro cliente. Aquí, no tenemos tales cuerdas. Aquí es donde aquí en la parte inferior, quiero abrir nuestros eventos de socket de servidor en ellos. Y aquí quiero copiar pegar este poros, actualizar éxito y fracaso. Y ahora solo queremos pegarlos aquí dentro de nuestro cliente. Entonces ahora no le hemos dicho a nuestro cliente las cuerdas y podemos emitirlas. Es por esto que aquí simplemente podemos escribir eventos de socket en m dot y aquí tenemos una actualización de placa. Este es el inicio de nuestra actualización en protesta. Y el segundo parámetro aquí pasa a proporcionar nuestra coma ID de placa, nuestros campos. Entonces tenemos exactamente el mismo lago de datos que preparamos en nuestro backend. Y ahora desde cualquier parte de nuestra aplicación, podemos utilizar este servicio de placa compartida. Utilice este método de placa de actualización para enviar una reunión. Ahora es el momento de agregar nuestro formulario, que aún no creamos. Es por esto que volvamos a saltar dentro de nuestra app. Componentes de placa, placa, componentes de placa HTML. Y como puede ver aquí en la parte superior dentro del contenedor de encabezado de la placa, tenemos este marcador de posición en línea. Y exactamente aquí, queremos escribir un formulario en línea para actualizar el título de nuestro tablero. Este es camino aquí, Vamos a escribir nuestro formulario de guión en línea que queremos usar, y vamos a cerrarlo aquí. Ahora, en primer lugar, dentro del útero debe proporcionar la clase para obtener un estilo correcto. Y en este caso aquí, se agregará foro de tablero. Después de esto, también querremos proporcionar nuestro texto predeterminado. Y aquí tendremos nuestro data dot board, dot title. ¿Por qué es eso? Porque en realidad, sólo para recordarles aquí en la parte superior, tenemos nuestros datos, tiene un dato de propiedad local, y dentro tenemos todas nuestras columnas, todas nuestras tareas, y un tablero. Es por esto que aquí tenemos un acceso directo al título del tablero de datos y queremos rendirlo como texto predeterminado. Después de esto, también vamos a querer proporcionar un título, y este es el valor para nuestra firma. Aquí también escribiremos título del tablero de datos y por último pero no menos importante, se maneja presentar. Este es nuestro evento y queremos crear un nuevo método, por ejemplo, update board name y inside dollar event es una cadena para actualizar un tablero. Ahora vamos a crear este método. Voy a saltar en archivo RTS y en algún lugar de la parte inferior podemos agregar el nombre de la placa de actualización. Y sabemos que aquí estamos obteniendo el nombre de nuestro tablero, que es una cadena. Y de vuelta queremos conseguir un vacío porque aquí queremos simplemente usar nuestro servicio. Y en realidad aquí ya tenemos acceso a nuestro servicio de thes dot boards. Y esto es importante, no aburrido pero las tablas puntean. Y aquí tenemos nuestra tabla de actualización aquí dentro. En primer lugar, debemos proporcionar nuestro ID de placa, y este es este tablero de puntos AT. Y en segundo lugar, nuestros campos. En nuestro caso aquí sólo tenemos un título, que es el nombre de nuestra junta que obtuvimos de nuestro formulario interior. Por lo que creamos con éxito un solo flujo. Así que creamos nuestro interior desde aquí se actualizaron el nombre de nuestro tablero, y se emitieron un evento para nuestro back-end. Vamos a comprobar si esta parte está funcionando. No tengo ningún error en el cliente ni en el backend. Y ahora abramos un navegador. Como pueden ver aquí tenemos ahora primera parte y puedo golpear aquí para abrir un formulario. Y aquí vemos nuestra primera tabla. Pueden escribir algo aquí y presionar enter. Y como pueden ver, no se actualizó porque no reaccionamos a nuestros cambios desde el backend. Y en realidad, como se puede ver aquí dentro de señas, no tenemos ningún error y probablemente nuestro título ya estaba actualizado, pero no avisamos a nuestro cliente. Y en realidad podemos comprobarlo fácilmente. Simplemente podemos recargar la página. Y como pueden ver ahora estamos recibiendo nuestro título actualizado, lo que en realidad significa que toda la lógica ya está funcionando y nuestro backend con éxito actualizó nuestro tablero. Pero el principal problema es que no avisamos a todos nuestros clientes sobre el cambio. En realidad sí, lo hicimos en el back-end, pero no creamos una suscripción para este evento en el cliente. Esto es y Hagámoslo ya. Entonces, antes que nada, debemos saltar nuevo dentro de nuestro componente de placa. Y sólo para recordarte aquí en la parte superior, tenemos suscripciones para diferentes eventos. Es por esto que aquí quiero copiar pegar una suscripción y cambiarla. Entonces aquí tenemos nuestro servicio de este socket y estamos escuchando el evento de actualizar nuestra placa, lo que en realidad significa que de vuelta estamos recibiendo una nueva placa. Aquí es donde aquí tenemos una interfaz de placa y aquí tenemos socket event C num dot. Y aquí estamos escuchando el éxito. Aquí tenemos Tableros, actualizaciones, éxito. Y dentro de nuestro Subscribe Now estamos recibiendo nuestro tablero actualizado. Entonces, ¿qué queremos hacer con ella? En realidad solo querría llamar a un método dentro de nuestro servicio de placas y actualizará nuestro flujo de datos. Es por esto que aquí podemos usar servicio de placa, tablero actualización de punto y vale la fila. Y dentro de nuestro tablero actualizado, super exitoso está suscrito a nuestro evento. Y solo necesitamos crear esta función de placa de actualización dentro de nuestro servicio de placa. Entonces saltemos dentro de nuestro servicio de tablero. Y aquí en la parte inferior, podemos crearla. Entonces aquí está el punto de actualización, y sabemos que estamos llegando aquí placa actualizada, que en realidad es una interfaz de placa completa. Y aquí nos pondremos amplios porque simplemente queremos actualizar nuestro stream. Pero aquí tenemos un problema. Por defecto, nuestro tablero está ahora, esto es camino aquí. Mecanografiado gritará que no podemos trabajar con. Ahora bien, aquí es donde aquí quiero comprobar si tenemos ahora tablero interior o no. Entonces aquí quiero conseguir una tabla, y esto es, son estos tableros corriente hacia obtener valor. Y después de esto, quiero comprobar si es ahora. Entonces si no tenemos nuestra pizarra, entonces quiero lanzar un error. Entonces aquí arrojan nuevo error porque en realidad no podemos actualizar la placa si no tenemos una placa. Aquí, digamos que el tablero no se inicializa después de esto si podemos trabajar con parte y en realidad solo queremos actualizar nuestro stream. Entonces este tablero con punto dólar siguiente, y aquí quiero fusionar todo el tablero que tenemos con el título porque quiero sólo actualizar en el título. Por lo que el título es nuestro título de punto de tablero actualizado. Y se podría decir, está bien, podríamos simplemente tomar todo el objeto. Sí, estamos bien, pero quiero mantenerme del lado seguro y solo implementar una característica que necesitamos resolver. Este código debe actualizar correctamente la secuencia y nuestro componente, ya que está suscrito a la transmisión, será notificado y terminado por detrás. Vamos a comprobar si está funcionando. Aquí no tenemos ningún error. Recarguemos la página y aquí tenemos primer tablero. Solo cambiemos tu título y golpeemos Enter. Y como se puede ver aquí es directamente mis cambios. Ahora dupliquemos esta pestaña e inténtalo de nuevo. Por lo que aquí en la segunda pestaña, sólo intentaré afinar y presionar Enter. Y como puedes ver aquí en la primera pestaña, también se actualizó, que en realidad significa que implementamos con éxito una característica de actualizar un título de tablero de principio a fin. 39. Eliminar la tarjeta: En este video, implementaremos la eliminación del punto. Y en realidad esta característica será súper similar a nuestra característica anterior con la actualización suficiente de nuestra placa, esto es y. vamos a implementarlo realmente rápido como siempre. Poner uno para empezar con nuestro servidor. Esta es y Vamos a saltar dentro de la fuente del servidor. Y aquí nos interesan nuestros eventos socket. Y en realidad exactamente igual que esta actualización, necesitamos tres nuevos eventos para su eliminación. Esto es y aquí, vamos a crear tres nuevos eventos. Se trata de borra de puertos a su éxito y fracaso. Y vamos a cambiar a la derecha, nuestra cadena dos tableros borran. Entonces los tableros eliminan el éxito y los tableros eliminan el fracaso. Ahora suscribamos a nuestro evento para este salto de bonificación dentro de nuestro servidor. Y aquí podemos copiar, pegar el éxito de nuestro tablero y cambiarlo a nuestros tableros. Eliminar. Aquí queremos usar un nuevo método, no actualizar placa sino eliminar puerto. Ahora vamos a saltar a nuestro controlador y crear este método dentro del controlador de nuestra placa. Y en realidad para esto, quiero copiar completamente pegar nuestro método de placa de actualización debido a una eliminación será super similar. Entonces, antes que nada, cambiemos el nombre. Es delete board y es un método asíncrono. Ahora, dentro de nuestros datos, lo único que necesitamos no es un d de nuestra junta. Aquí es donde compré la D es suficiente aquí, pero no es necesario proporcionar nada más porque simplemente borramos nuestro tablero por d. y para back-end, es suficiente información. Ahora aquí dentro tenemos try-catch como siempre, y estamos comprobando nuestro usuario de socket. Pero aquí, en caso de un error, queremos arrojar otro error y será fallas de borrado de tableros. Aquí. Cambiemostambién nuestra jaula. También será que las placas DOD eliminen fallas. Y ahora tenemos que cambiar nuestra lógica susurró modelo, porque aquí hicimos una actualización. Ahora tenemos movimiento de Azure y en realidad no queremos recuperar nada, pero simplemente queremos eliminar este vínculo por d. y para esto, podemos usar diferentes métodos. Por ejemplo, podemos usar buscar uno y eliminar. Esto está totalmente bien. Esto es exactamente como lo hicimos dentro de la actualización. Pero en realidad también puedes usar directamente sin azúcar, elimina uno. Y este es método solo para que sepas dentro delete one, debemos proveer un objeto con campos por los cuales queremos encontrar lo sensible. Y en realidad aquí sólo podemos proporcionar guión bajo id iguales y d Ahora en caso de que se trata de datos punto tablero AD, y en realidad no importa si está utilizando eliminar uno o encontrar por el final eliminar, está funcionando exactamente lo mismo. Por lo que esta línea elimina con éxito para nosotros nuestro tablero. Y después de esto, queremos emitir nuestro éxito de eliminar. Aquí es donde aquí a todos nuestros usuarios dentro de este puerto, queremos emitir tableros, eliminar éxito. Y en realidad aquí no necesitamos proporcionar una identificación de nuestra placa porque todos estos usuarios están dentro de esta placa específica y saben qué placa se eliminó y deben ser redirigidos a la página principal porque no pueden permanecer en el tablero que uno de los clientes quitó. Por lo que nuestra lógica de servidores está completamente lista. Ahora volvamos a nuestro cliente y al exactamente igual que antes. En primer lugar, queremos empezar con eventos compartidos y con nuestros socket. Y voy a copiar pegar de nuestros eventos socket, tres eventos, borra el éxito y el fracaso del tablero, y lo pegaré aquí en la parte inferior. Ahora debemos saltar dentro de nuestros servicios, servicio a bordo, porque aquí queremos crear un nuevo método para quitar una placa. Aquí es donde aquí vamos a copiar pegamos nuestro tablero de actualización y cambiarlo a eliminar punto. Y lo único que necesitamos es nuestra junta AT, no necesitamos aquí ningún campo. Y aquí queremos emitir nuestro evento board delete. Entonces probémoslo aquí. Comprado eliminar y en su interior proporcionaremos un objeto con un solo campo. De hecho es nuestra identificación de la junta. Ahora dentro de nuestra aplicación podemos llamar a esta placa de eliminación y arrojará insight Socket Layer final correctivo. Ahora vamos a actualizar nuestro componente. Entonces quiero volver dentro de nuestra pizarra. Componentes comprados HTML. Aquí tenemos nuestra forma inline. Y después de esta forma inline, debemos crear un icono que eliminará tablero. Aquí es donde aquí digamos div clase Delete Board. Y aquí tendremos nuestro evento click y despincha Poupon para eliminar nuestro punto. Y en realidad no necesitamos proporcionar nada dentro porque tenemos NAD de nuestra placa dentro de nuestro archivo de prueba. Así que aquí quiero cerrar nuestro div y simplemente probarlo dentro del código de Delete Board. Ahora debemos saltar dentro de nuestro archivo ts y crear este método aquí en la parte inferior. Y lo que queremos hacer dentro de nuestro tablero de eliminación, simplemente necesitamos llamar a nuestro servicio. Bueno, aquí sabemos que es un vacío y queremos llamar a un servicio. Pero en realidad adicionalmente, quiero escribir aquí una confirmación porque debemos estar seguros de que los usuarios realmente quieren eliminar una placa. Entonces probémoslo aquí. Si confirmas y si no sabes lo que está confirmado, este es un popup estándar de Javascript dentro del navegador, que te mostrará un sí o no. Entonces aquí queremos escribir algo así como, ¿ estás seguro de que quieres eliminar el tablero? Y si la respuesta es sí, entonces vamos dentro de este tamiz y llamaremos a este servicio de mesa. Y aquí tenemos delete point donde dentro podemos proporcionar nuestra placa AD. Y ahora se podría pensar, vale, debemos actualizar ahora nuestro servicio de mesa directiva. Pero no necesitamos hacer esto en absoluto porque en realidad es mucho más sencillo. Lo que queremos hacer Poupon para suscribirte aquí a nuestro evento socket, cual será eliminado éxito. Hagamos esto ahora. Para ello queremos copiar pegar nuestro servicio de socket, escuchar y escuchar boop queremos escuchar void porque back whoop no conseguirá un tablero. Sabemos que esto es sólo el éxito de borrar de nuestra junta. Aquí es donde aquí se comprará el evento, eliminará el éxito, y de vuelta al no conseguir nada. Y la pregunta es, qué vamos a querer hacer dentro y en realidad simplemente queremos redirigir al usuario a nuestra página de inicio. ¿ Por qué es eso? Porque en realidad tenemos un oyente aquí en la parte superior de la navegación Inicio, lo que en realidad significa que en el momento nuestro usuario va a otra página, por ejemplo, a la página de inicio, la parte superior de la navegación Inicio, lo que en realidad significa que en el momentoen que nuestro usuario va a otra página, por ejemplo, a la página de inicio, manejará el vertido en vivo a través nuestro servicio de tablero y eliminaremos todos los arroyos correctamente. Esta es manera aquí lo que queremos hacer dentro de nuestra suscríbete, simplemente escribes este router dot navigate by URL. Y aquí tenemos, por ejemplo, tablas de corte, lo que en realidad significa que el tablero no existe. Debemos mostrar para cada cliente la lista de posibles placas disponibles. Vamos a comprobar si este código está funcionando. Como puedes ver, no tenemos ningún error en el cliente. No tenemos errores en el backend. Vamos a abrirlo ahora en navegador. Y como pueden ver, nuestra página sigue funcionando. Y ahora tenemos este tablero de eliminación. Pero en realidad, no quiero quitar esta parte porque construimos bastantes pruebas aquí. Pero quiero hacer, quiero volver a saltar dentro de nuestras tablas y crear una nueva tabla, por ejemplo, para quitar. En este caso, podemos probar esta funcionalidad en esta nueva barra vacía. Pero lo queremos hacer ahora, queremos duplicar esta pestaña solo para comprobar si funcionará para el segundo usuario. Entonces lo que quiero hacer ahora, quiero hacer clic en Eliminar punto, y como pueden ver, veo una confirmación. Te aseguro que quieres borrar una pizarra donde escondidas, ¿de acuerdo? Y donde hay regularidad reaccionó a nuestras tablas. Y como pueden ver aquí, no tenemos nuestra pizarra porque fue exitosa o eliminada. Y como se puede ver en la segunda pestaña, donde todos los dígitos dirigidos a nuestra parte de slash porque todos nuestros clientes dentro de esta sala fueron notificados sobre éxito en el retiro de la pizarra y deben ser rechazados a nuestra página de tableros. Y como pueden ver, nuestra arquitectura es tan increíble que podemos crear nuevas características en cuestión de minutos. 40. Eliminar columna: En este video, debemos implementar el borrado de nuestra columna. Y en realidad aquí tenemos una columna dentro de nuestro tablero y la masa cerca del título muestra el ícono para borrar una columna. Y nuevamente, debe implementarse con el socket IO. Por lo que avisaremos a otro usuario sobre nuestra eliminación. Y creo que es una característica realmente bonita que puedes implementar por tu cuenta porque será súper similar a borrar en un pájaro. Y aquí hay alguna ayuda de mi lado. En primer lugar, como siempre, debemos en el backend, implementar nuevos eventos y registrar use socket event. Después de esto, debemos crear una nueva acción de controlador que es columnas. Por ejemplo, eliminar columna. También debemos tener sentido solo en el cliente. En primer lugar, registro y nuevo evento. Luego reunimos nuevo método dentro del servicio de columna que es compartible para eliminar una columna. Después de esto, debemos actualizar nuestro componente para agregar un botón en el que eliminaremos esta columna específica de este punto. Y en realidad esto es sólo una reunión del evento para el back-end. Y también estamos debemos suscribirnos al éxito de eliminar esta columna en todos nuestros clientes. Y aquí está el marcado del botón. Para que sepas lo que necesitas implementar. Como puedes ver aquí, estoy dentro del componente de placa HTML. Aquí tenemos nuestros títulos de columna y directamente después del título, queremos escribir aquí una imagen con fuente. Y aquí tendremos activos de barra diagonal, slash close guión bajo, icono punto SVG. Y aquí podemos cerrar nuestra imagen, pero también estamos debemos proporcionar aquí una clase que será columna delete icon. Echemos un vistazo a esto. Estoyrecargando la página y aquí ahora tenemos una bonita cruz. Y aquí es exactamente donde vincularás el evento de click. Pero si solo quieres seguir adelante, vamos a implementar esto juntos. Y en realidad como dije, será súper similar a borrar de la pizarra. Esto es y Hagámoslo rápido y furioso. Entonces, antes que nada, quiero comenzar con nuestro backend y salto de biomasa aquí dentro de nuestros tipos de fuente de servidor. Y aquí tenemos nuestros eventos socket. Y otra vez tenemos aquí tableros borrar, puedo copiar pegarlo y simplemente cambiarlo a columnas eliminar. Esto es y aquí a la izquierda tendremos columnas eliminar y a la derecha en lugar de tableros escribiremos por todas partes columnas. Y también debemos cambiarlo en éxito y fracaso. Por lo que nuestros eventos están ahí. Ahora debemos saltar dentro de nuestros niveles de servidor que aquí y usar socket en aquí en lugar de boards delete, quiero escribir columnas delete, que acabamos de crear. Aquí. En lugar de controlador de placa, debemos usar nuestro controlador de columnas. Aquí no borraremos un tablero, pero borraremos nuestra columna. Y ahora estamos mostaza eliminar método columna dentro de nuestro controlador de columnas. Pero no quiero volver a escribir nada porque el código es exactamente el mismo borrado de pata de la placa. Aquí es donde podemos copiar, pegar completamente esta placa de borrado y pegarla dentro nuestro controlador de columnas porque será 99% igual. Entonces, en primer lugar, la pregunta es, ¿qué debemos conseguir aquí como parámetro? Aquí ya estamos, me meto en tablero AD y quieren también llegar aquí columna ellos D, porque necesitamos saber qué estamos borrando. Y se podría decir aquí, está bien, Pero, ¿para qué necesitamos a la pobre señora? Solo necesitamos un AD columnado y en realidad no porque estamos debemos notificar a todos los que se hayan suscrito a este tablero específico AD. Es por ello que aquí debemos aportar ambos valores. Después de esto, estamos revisando aquí para nuestro usuario y aquí debemos cumplir con un evento de falla. En nuestro caso será columnas eliminar fallo. Aquí este usuario no está autorizado, y aquí tenemos nuestro catch y podemos usar aquí las mismas columnas delete failure con nuestro mensaje de error get. Aquí. En lugar del modelo de placa, usaremos nuestro modelo de columna. Aquí estamos borrando un registro por punto de datos, y aquí habrá ID de columna porque debemos borrar nuestra columna no nacen y después de esta manera cumpliendo con nuestro éxito. Pero aquí vamos a tratar de éxito para nuestra columna eliminar, y aquí va a estar el éxito. Y en realidad ya estamos listos con nuestro backend. Lo que quiero hacer ahora es copiar pegar este socket events porque lo usaremos en el cliente. Esta es la forma en que aquí voy a copiar columnas de pegado, eliminar el éxito y el fracaso, y que el campeón deshabilitado establecer clientes fuente aplicación. Y aquí tenemos tipos compartidos y aquí están nuestros eventos de socket donde dentro podemos pegar columnas, eliminar. Nuestro siguiente arriba será tub Data, Service, Insight columnas de servicios compartidos. Porque queremos implementar eliminar columna exactamente aquí. Podemos escribir nuevo método delete column, y sabemos que estamos obteniendo aquí nuestro ID de placa, que es una cadena, y también nuestro ID de columna, que también es una cadena. Y nos estamos poniendo gran vacío porque solo queremos emitir nuestro evento socket. Es por esto que aquí podemos escribir este servicio de socket y conocer, y estamos usando aquí nuestros eventos de socket en m dot columnas delete. Y debemos proporcionar como segundo parámetro y un objeto con nuestra placa AD y también ID de columna, que estamos obteniendo de los parámetros. Después de esto, debemos actualizar nuestro servicio de placa. Y sólo para recordarles, aburren los servicios exactamente donde estamos almacenando nuestro flujo de columnas. Lo que en realidad significa aquí debemos implementar delete de la columna. Así que aquí en la parte inferior, puedo crear el método delete column. Y aquí sólo necesitamos nuestra columnada. No necesitamos aquí idea de Board en absoluto porque llamaremos a este método solo desde el componente para actualizar nuestro stream. Entonces aquí sabemos el ID de columna que queremos eliminar y de vuelta nos estamos quedando anulados, y ahora queremos actualizar la lista de nuestras columnas. Esto es camino aquí. Podemos crear una propiedad columnas actualizadas. Y aquí podemos acceder a nuestra corriente con estas columnas stream. Aquí estamos obteniendo nuestro valor. Y después de esto queremos filtrar nuestra matriz. Y en realidad aquí estamos obteniendo acceso a cada columna y queremos rechazar este id de columna específica.Es por esto que aquí podemos comprobar que ID de columna no es igual a nuestros nombres de columna, que se pasaron como parámetro. En este caso aquí estamos obteniendo exactamente la misma lista de nuestras columnas, pero sin esta columna. Y después de esto, sólo debemos actualizar nuestro stream. Para esto, podemos escribir estas columnas continuación y estamos tirando dentro de nuestras columnas actualizadas. Así que en realidad este método actualizará nuestro flujo y eliminará una columna de la corriente. El siguiente paso es actualizar nuestro componente. Y en realidad ya hemos cambiado nuestro HTML. Aquí ahora tenemos una imagen, pero debemos adjuntar, escuchar un evento de clic. Y aquí lo que quiero hacer, quiero borrar una columna. Esta es la forma en que aquí podemos proporcionar un método eliminar columna, y debemos pasar dentro com dot id Y aquí en la parte superior, como puedes ver, tenemos acceso a nuestra columna. Ahora podemos saltar dentro nuestro componente y crear este método. Así que la columna Dalit está recibiendo sólo un solo argumento, que es nuestro ID de columna que queremos eliminar y banco donde conseguir vacío. Y ahora dentro simplemente queremos llamar a nuestro servicio compartido. Entonces aquí estará esta columna mundo de servicio o el Herodes. Ahora aquí tenemos un método eliminar columna en su interior. Debemos proporcionar una placa AD, y en realidad son estos placa AD y luego columna ID. Por lo que esta línea de código emitirá un evento a nuestro backend para eliminar esta columna y notificar a todos nuestros clientes. Y ahora solo necesitamos suscribirnos dentro de nuestra suscripción aquí en la parte superior que queremos actualizar nuestra lista de columnas. Aquí es donde aquí en realidad podemos copiar pegar algo similar y soldado tenemos aquí columnas crea éxito. Lo copiaré, lo pegaré, y lo pegaré aquí en la parte inferior. Y aquí tenemos borrar y en realidad borrar con no lo hice correctamente. Quiero volver a saltar dentro de nuestras columnas de controlador. Como puedes ver aquí tenemos i2 data board que emiten, y aquí acabo de cambiar el nombre columnas eliminar éxito, pero no es suficiente. Debemos proporcionar aquí algunos datos porque en realidad todos nuestros clientes deben saber qué columna debemos eliminar. Aquí es donde aquí como segundo parámetro, quiero proporcionar datos de la columna de puntos que profundizan. Y en este caso se nos da suficiente información a todos nuestros clientes respecto a nuestra columna delete. Ahora podemos saltar de nuevo dentro del componente de placa y aquí está nuestra escucha. Y en realidad aquí estamos escuchando nuestras columnas, eliminar el éxito. Y aquí lo que estamos recuperando no es una columna, sino solo la cadena que queremos eliminar. Es por esto que aquí podemos escribir que esto es ID de columna y en realidad esta es suficiente información para que el cliente elimine una columna. Es por esto que aquí ahora podemos llamar al servicio de tablero dot. Y aquí tenemos nuestra columna delete. Y el interior, como pueden ver, estamos proporcionando la columna ellos D, y esto es exactamente lo que tenemos aquí de nuestro back-end. Entonces en realidad implementamos todo para nuestra característica. Vamos a comprobar si está funcionando. En primer lugar, revisemos el backend que tenemos aquí un problema. Eliminar columna no existe en el tipo y aquí hay columnas. Echemosun vistazo a esto. Volveremos a saltar dentro de nuestros controladores, y aquí tenemos nuestra placa de borrado. Entonces este es el problema. Copié pegado el método Delete Board, pero no le cambiaron el nombre. Debe ser eliminar columna. Deja que revises eso otra vez. Yo lo estoy guardando y brinco a la consola. Y como pueden ver ahora, no tenemos ningún error. Ahora vamos a revisar a nuestro cliente. Todo se ve bien. Entonces saltemos a nuestra pizarra. Como puedes ver, nuestras páginas funcionan. Y ahora aquí puedo dar clic a través para eliminar, por ejemplo, esta columna completa. Lo estoy haciendo clic y como pueden ver, se ha ido por completo. Y lo que es más interesante, podemos duplicar la pestaña e intentar eliminar esta siguiente columna, F, F, d, d, y así sucesivamente. Yo estoy golpeando aquí cruz y se quita no sólo aquí, sino también en esta pestaña. Y todo se actualiza automáticamente, que en realidad significa que implementamos con éxito eliminación de las columnas dentro de nuestra aplicación. 41. Actualizar columna: En este video, debemos implementar una de las últimas características respecto a nuestra placa, y esta es la actualización de la columna. Y como ya puedes entender, será súper similar borrar la columna. La única diferencia es que tendremos un interior desde el actualizado, pero un montón de cosas se quedarán exactamente igual. Donde una reunión, soy un evento socket donde ponerlo en el backend y cuando definimos a todos nuestros clientes, esto es y. vamos a implementarlo juntos ahora, antes que nada, quiero saltar de nuevo dentro de nuestro servidor tipos de fuentes. Y aquí debemos crear eventos de socket en el interior en nuevos tipos y hairball al grado de columnas de cabeza, puedo copiar pegarlo y renombrar dos columnas actualización. Por lo que aquí tendremos columnas Actualización, actualizaciones de columnas, éxito y fracaso. Aquí a la derecha. Entonces podemos cambiarlo para actualizarlo. Entonces un éxito de fecha de nacimiento y falla de actualización después de este litio de vuelta dentro nuestra hermandad S y aquí y tu propio evento. Así que aquí copio la columna pegada eliminar, y vamos a cambiarla a nuestra actualización de columnas que acabamos de crear. Y aquí estamos usando nuestro controlador de columnas, pero aquí estamos consiguiendo no eliminar columna sino actualizar columna. Ahora debemos crear esta acción, pero en realidad podemos copiarla pegarla de nuestros tableros porque aquí ya estamos implementados placa de actualización y será súper similar. Es por esto que quiero copiar pegado completamente y pegar en la parte inferior dentro de nuestro controlador de columnas. Aquí con en primer lugar, hay que cambiar el naming. Entonces aquí tenemos nuestra columna de actualización y en realidad quiero mantenerlo exactamente igual con pobre dama y campos. Entonces tenemos exactamente la misma estructura. Aquí es donde aquí lo único que necesitamos es ID de columna, que es una cadena. Y el único campo que estamos actualizando aquí es nuestro título. Ahora cambiemos nuestro contenido. Aquí tendremos eventos de socket en m y aquí se crearon falla de actualización de columna. Y vamos a cambiar también nuestra captura aquí será también la falla de actualización de Columna. Ahora debemos cambiar nuestra lógica. En lugar del modelo de Bohr, tendremos aquí el modelo de columna y estamos haciendo multados por la actualización final. Esto está totalmente bien. Pero aquí queremos obtener no un tablero, sino columna por columna id Y aquí tenemos campos de datos. Esto es completamente normal y hacia atrás consiguiendo columna actualizada y placa no actualizada. Ahora aquí queremos emitir a todos nuestros clientes nuestro evento, que será columna de actualización de éxito. Y aquí debemos proporcionar nuestra columna actualizada para que puedan cambiarla en el cliente. Nuestro backend es exitoso, cambió. Ahora debemos actualizar a nuestro cliente. Y antes que nada, quiero copiar pegar estos tres nuevos eventos, que son columnas actualización, éxito y fracaso. Ahora volvamos a saltar dentro de la aplicación de origen de nuestros clientes. Y aquí no hemos dicho arrojar nuestros tipos eventos socket. Y aquí en la parte inferior agregaré columnas actualización éxito y fracaso. Ahora queremos cambiar nuestro servicio de camisas, cual se encarga de realizar las solicitudes a nuestra API. Aquí están las columnas de servicios y aquí ya estamos implementados eliminar columna, pero tenemos que hacer ahora es nuestra nueva columna de actualización de método. Aquí ya sabemos lo que estamos consiguiendo. Estamos consiguiendo aquí nuestra identificación de la junta, que es una cadena. Después de esto estamos obteniendo nuestro ID de columna, que también es una cadena. Y por último pero no menos importante son nuestros campos, que es un objeto con un título, que es una cadena. Y de vuelta nos estamos quedando vacíos porque aquí simplemente emitimos un evento. Aquí es donde escuchan el servicio de sockets Datta se reúnen y queremos usar aquí socket incluso verlos punto. Y aquí tenemos nuestra acción de actualización de columnas como segundo parámetro. Debemos proporcionar todo. En primer lugar tablero AT segunda columna necesitada. Y último son las películas. Y con eso, nuestro servicio está completamente listo. Ahora debemos actualizar nuestro servicio de placa para poder cambiar nuestro componente. Es por esto que saltaré dentro de nuestra app, Servicios de tablero, Servicio de Junta. Y aquí ya estamos creados un tablero de actualización de métodos. Aquí es donde aquí vamos a crear nuestro método de columna de actualización. Y sabemos que ese grupo quiere actualizar un solo registro dentro de nuestra matriz. Y aquí lo único que queremos conseguir es una columna un poco anticuada. Esto es lo que obtuvimos de nuestro back-end. Aquí. Estamos recibiendo toda la interfaz de la columna y de vuelta queremos conseguir vacío. Ahora, aquí está nuestra idea. Necesitamos mapear a través cada columna y actualizar esta columna por dy. Esta es la forma en que aquí podemos recuperar nuestras columnas actualizadas. Y aquí queremos obtener en primer lugar, el valor de nuestra corriente. Así que aquí tendremos nuestras columnas obtener valor y estamos mapeando a través de esta matriz. Entonces aquí está el mapa y estamos obteniendo acceso a cada una de las columnas de aquí dentro debemos escribir nuestra lógica. Entonces, si nuestro ID de columna que estamos haciendo un bucle es igual a nuestro id de punto de columna actualizado, entonces debemos hacer nuestra magia. Y si no, entonces simplemente queremos devolver nuestra columna sin actualización. Ahora bien, ¿qué queremos hacer dentro del bucle uno para actualizar esta columna específica? Es por esto que quiero fusionar nuestra columna con el título. Y aquí estamos proporcionando título de punto de columna actualizado. En este caso aquí estamos actualizando apenas una sola chamarra cuando coincida. En otro caso, donde simplemente devolviendo nuestra columna. Después de esto, solo necesitamos actualizar nuestro stream con estas columnas a continuación. Nos proporcionan dentro de nuestras columnas actualizadas, por lo que nuestro método está completamente listo. Ahora solo necesitamos actualizar nuestro componente. Así que vamos a saltar de nuevo dentro de nuestro componente de placa, y aquí tenemos nuestro título de columna, pero en lugar de sólo un título, debemos tendencia aquí son forma en línea, esto es y aquí. Vamos a probarlo forma en línea, y vamos a cerrarlo aquí directamente. Ahora, en primer lugar, aquí debemos establecer nuestra clase a la que se le agregará forma de columna. Después de esto, debemos proporcionar texto por defecto. Y aquí queremos escribir el nombre de nuestra columna, que será columna, el título, pero también debe aportar aquí un valor. Esto es y, aquí estará el título, que es nuestro título de columna. Y el último es nuestra devolución de llamada, que se maneja presentar. Y en realidad este método podemos nombrar, actualizar, nombre de columna, y por dentro estamos recibiendo Festival, nuestro evento, que en realidad es nuestro nombre de columna. Y aquí también debemos proporcionar adicionalmente ID de columna porque no es el caso Groupon saber para qué columna queremos actualizar esta pantalla específica. Ahora, vamos a crear este método dentro de nuestro componente. Así que aquí en la parte inferior quiero agregar el nombre de la columna de actualización. Y aquí estamos consiguiendo en primer lugar, nuestro nombre de columna, que es la cuerda de nuestra diversión interior. Y en segundo lugar, estamos consiguiendo aquí nuestro ID de columna. En este caso, sabemos lo que necesitamos actualizar y lo que queremos hacer aquí. Solo queremos llamar a nuestro método desde columnas de tritura. Este es y, aquí, este servicio de columna, y aquí está nuestra columna de actualización de método que acabamos de crear. En primer lugar, debemos proporcionar aquí nuestro ID de placa, ID columna, y también nuestros campos. En nuestro caso aquí sólo tenemos un solo campo, que será nuestro título, que es el nombre de nuestra columna. Desde el lado del cliente, todo está listo, pero debemos suscribirnos al éxito de una fecha de nacimiento en la columna. Es por esto que debemos ir aquí en la parte superior, en ahora un socket servicios. Y en realidad aquí ya tenemos nuestra actualización del tablero, lo que en realidad significa que quiero copiar pegar estas líneas y simplemente cambiarlas. Porque aquí atrás, obtendremos nuestra interfaz de columna después de actualizar nuestra columna. Y en realidad aquí queremos suscribirnos para llamarlos éxito de actualización. Y aquí estamos recibiendo placa no actualizada, pero estamos recibiendo número de columna actualizado debemos llamar a otro método desde nuestro servicio de placa. Y este método será columna de actualización. Y dentro estamos proporcionando nuestra columna actualizada, lo que en realidad significa que con este código, todos nuestros clientes serán notificados y actualizaremos esta columna en particular. Vamos a comprobar si está funcionando aquí en el backend, todo se ve bien. Aquí en el cliente, no tenemos ningún error. Saltemos al navegador. Y como pueden ver aquí, tengo este bonito nombre y ahora puedo dar clic en él porque esta es nuestra firma del interior y no sólo el título. Ahora probémoslo aquí, actualizado y estoy golpeando Enter. Y como se puede ver, se actualizó y aplazó la carga de la página, entonces este código también es mancha, lo que en realidad significa que hicimos con éxito este cambio está en el backend y lo hicieron todos nuestros clientes. Y aquí, si estoy saltando a la segunda pestaña, se ve exactamente igual porque también fue actualizada y notificada a través del socket IO. Dicho esto, implementamos con éxito nuestra característica de actualización en la columna. 42. Cancelar la suscripción: En este video, quiero hablar de darse de baja porque en realidad tenemos un problema. Veamos en nuestra prueba de componentes de placa. Aquí tenemos a nuestros oyentes inicializar y estamos usando dot subscribe bastantes veces. Y en realidad debes saber que dentro de Angular cada vez que estás escribiendo la palabra subscribe, estás en peligro porque ahí estás creando una suscripción. Y esta suscripción lo hará Hank ahí hasta el fin del mundo. que en realidad significa, por ejemplo, que estamos dejando nuestra tabla y estamos saltando a otra tabla. Y todas estas suscripciones ya están ahí y nunca serán destruidas porque todas las suscripciones no tienen nada que ver con nuestro componente y el angular no hace cualquier cosa sobre ellos. Pero aquí es importante punto a mencionar, si estamos hablando dentro de Angular sobre cliente HTTP, entonces no debemos darse de baja de él. Esto no es obligatorio porque angular se dará de baja automáticamente, lo que en realidad significa aquí cuando estamos usando este router eventos suscribirse, Esto está totalmente bien. Aquí también podemos mirar en nuestros datos de fetch y aquí también estamos uso suscríbete a nuestro aburrirse. Y para ello debemos abrir nuestro aburrirnos y comprobar lo que tenemos aquí. Y en realidad este es un Gad bastante grande, que es un cliente HTTP, lo que en realidad significa que este código está totalmente bien y no debemos cancelar la suscripción. Pero en realidad, prefiero darse de baja en todas partes, en cada aplicación donde una suscripción C, porque nunca se sabe qué es exactamente este método get board? ¿ Es realmente cliente HTTP o es solo un envoltorio por ahí? Y realmente necesitas darte de baja. Y la pregunta es cómo puedes darte de baja en tu solicitud para que sea cómodo. Y hay muchas maneras de hacerlo. Y en realidad siempre queremos cancelar la suscripción cuando estamos destruyendo un componente. Y típicamente donde este componente turner, cuando estamos cambiando alrededor, lo que en realidad significa que aquí podemos escribir algo así como esta suscripción placa es igual. Y aquí estamos obteniendo el resultado de nuestra suscripción y el resultado de la suscripción fácil de suscribir, lo que en realidad significa por masa crear esta propiedad y luego justo dentro de nuestro motor, destruir Boards suscripción punto darse de baja. Esto es totalmente válido, pero luego vamos a crear un montón de propiedades y esto no es tan cómodo. Es por ello que hay mejores formas de hacerlo. Quería mostrarte un enfoque sencillo que puedas usar. Lo que quiero hacer dentro de mi componente de placa, quiero crear una propiedad más y quieren nombrar esta propiedad darse de baja. Y en realidad quiero poner aquí dólar porque va a ser un arroyo. Y aquí quiero asignar un nuevo tema y en realidad también el sujeto conductual juvenil dentro de nuestro servicio de junta directiva. Pero aquí tenemos un nuevo sujeto con vacío, y solo lo estoy llamando, la principal diferencia entre sujeto y sujeto conductual es el sujeto conductual siempre tiene un valor inicial y entonces diga, sujeto, no tenemos ningún valor inicial. Ahora aquí queremos agregar implementos sobre destruir, lo que en realidad significa que debemos crear en G al destruir. Y ahora aquí estamos hablando en Alemania en ella. Y aquí podemos escribir en junio destruir y lo que queremos hacer dentro, queremos escribir este punto de baja a continuación, así que somos columna el siguiente valor. Y después de esto, este punto de baja completo, lo que en realidad significa que después de que destruimos este componente, no queremos obtener nuevos valores dentro de este unsubscribe. Y ahora podemos usar esta darse de baja en todas partes para ignorar las suscripciones. ¿ Cómo se ve? En realidad aquí, no necesitamos usarlo, pero debemos usarlo dentro del servicio de socket porque es una suscripción personalizada. Y para poder hacer eso antes de nuestra suscrita, solo podemos probarlo dot pipe y dentro queremos usar método take hasta y dentro quieran poner este unsubscribe que acabamos de crear, lo que en realidad significa aquí que estamos tomando, ok, Debemos tomar nuevos valores y tener esta suscripción hasta que esta baja sea válida. En el momento en que estamos Colin completo con bono, ven aquí a nuestra suscríbete. que en realidad significa que en cada caso, cuando tenemos una suscripción, solo podemos probarlo antes por absorción hasta que este darse de baja. Y estamos bien para ir después de que nuestros componentes sean destruidos. Aquí vamos a tener completa y esta lógica nunca sucederá. Esta es realmente una variante cómoda y fácil implementar, darse de baja. Es por esto que quiero copiar pegar este código y ponerlo en cada lección que estamos escribiendo aquí justo antes de suscribirme. En este caso donde en el lado seguro, y no vamos a llamar a este código después de destruir un componente. Ahora seguro que quieres saber si realmente está funcionando así. Es por esto que para probarlo, podemos simplemente comentar sacado hasta por ejemplo, en columnas, acceso a actualizaciones. Pero en realidad no va a funcionar así porque cuando salíamos de la pizarra, Bacon deja de enviar eventos para preguntar, es por esto que lo que podemos hacer solo por pruebas se promueve dentro de las columnas de controladores. Y aquí está nuestra columna de actualización de método, y aquí tenemos nuestra función son sus dos. Y aquí necesitamos encontrar sólo clientes donde estén dentro de esta parte específica. Sólo por el bien de las pruebas, voy a quitar aquí para notificar a todos los clientes en absoluto porque quieren mostrarles que esta suscripción sigue ahí cuando estamos dejando el tablero. Por lo que ahora aquí quiero sólo tratar de registro de consola. Se actualizó la columna. Aquí está nuestra columna actualizada. Echemos un vistazo a esto. Estoy recargando la página, estoy saltando a este punto y estoy tratando de actualizar la columna. Como puedes ver, este es nuestro log de consola, y aquí también tenemos el log de la consola. Está totalmente bien. Pero ahora estamos saltando de nuevo a nuestras tablas y no tenemos nada y nuestro componente fue destruido. Ahora aquí en la segunda pestaña, actualizaremos esta columna. Y como puedes ver aquí, inserta el primer paso. Tenemos esta columna se actualizó y lo estamos consiguiendo porque esta suscripción sigue colgando con no darse de baja de nuestro código y denotado para hacer eso, solo podemos descomentar tomar hasta, Vamos a probar se. Ahora, aquí estamos saltando dentro de nuestra aplicación. Estamos consiguiendo, consiguió columna actualizada donde campeón de vuelta a nuestras tablas. Y ahora aquí podemos intentar actualizar nuestra columna. Pero como puedes ver ahora dentro del primer paso, no nos llegó un mensaje porque aquí no pasó por esta toma hasta, por eso es tan importante darse de baja de todas nuestras suscripciones. Ahora volvamos a cambiar este código. En primer lugar, no necesitamos este registro de consola. Y en segundo lugar, saltaré dentro de las columnas de nuestro controlador y cambiaré el código al ID de la base de datos i2. Por lo que en la aplicación real, le recomiendo ampliamente darse de baja de todas sus suscripciones. 43. Módulo de tareas y componente básico: En este video, comenzamos característica nueva e interesante y luego hablando aquí sobre el modelo de tarea de función. ¿ Qué tiene un medio? En realidad, como se puede ver aquí, donde dentro de tablero y cuando hacemos clic en tarea específica dentro de este punto, en realidad, debemos abrir aquí un modelo, pero no es tan sencillo como eso, porque lo que queremos para hacer, queremos cambiar nuestro enrutamiento. Por lo que ahora tenemos slash board slash board Id. Y en realidad cuando abrimos una tarea después de recargar la página, queremos ver la misma tarea. Y la forma más fácil de implementar esto es obviamente enrutar. Por lo que queremos, en el momento en que estamos abiertos una tarea URL como slash board slash board ID slash tasks slash task KD, lo que en realidad significa que tenemos una ruta anidada dentro del tablero. Y en realidad Angular nos permite realmente sencillo correr las sequías de los niños. ¿ Por qué necesitamos aquí una sequía infantil? Porque en realidad aquí queremos en primer lugar renderizar toda la placa y adicionalmente renderizar este modelo, que en realidad significa nuestro modelo, estará aquí en la parte superior y debajo de nuestro modelo, veremos toda la junta. Y esto es sumamente importante porque en realidad vamos, incluso dentro del modelo, a buscar toda la tabla. Y en realidad todo este componente se renderizará Tal como es sin ningún cambio. Y lo que también es interesante dentro de nuestro modelo de tareas, usaremos esta información del tablero, y esto es exactamente lo que implementamos aquí. Aquí dentro de nuestro cliente fuente, aplicación, servicios de placa, Bot Service, tenemos tres streams. Nuestra columna de tareas y, pero, y esto es increíble porque ahora dentro de nuestro modelo de tareas, podemos leer todas nuestras tareas, encontrar tarea necesaria por este ID dentro de URL que implementaremos en un segundo y luego solo renderizar esta información de la tarea sin solicitudes adicionales. Y en este video, quiero comenzar con los fundamentos de este modelo de tareas. Aquí queremos crear un componente básico y enlazar correctamente nuestra ruta. Y para esto, quiero volver a saltar dentro de nuestro módulo de placa. Y aquí tenemos nuestra ruta con tablas de slash, slash board Id. Y aquí queremos tener una sequía infantil. Aquí es donde aquí podemos escribir niños y esto es una matriz. Aquí también tenemos un objeto con path, que será Tasks slash. Y aquí está el ID de tarea, lo que en realidad significa que estamos tomando aquí camino de los padres y nuestro camino de los hijos. Y juntos tendremos nuestra ruta de ID de tarea aquí, pero también debemos proporcionar un componente que crearemos en un segundo. Y es nuestro componente de modelo de tareas. Pero tampoco implementamos el cambio de nuestra ruta. Y para ello, quiero saltar dentro de nuestra placa de componentes. Y aquí se compra el componente HTML. Y como pueden ver aquí, tenemos un enlace a nuestra tarea. Esta es esta tarea de clase div, y aquí está energy for loop. Y en realidad aquí queremos escribir un evento click. Y aquí lo que queremos hacer, queremos abrir tarea. Y para esto solo necesitamos nuestra tarea dot id Y lo que queremos hacer dentro este método es simplemente cambiar una ruta. Esto es camino aquí. Vamos a crear esta tarea abierta dentro del componente de placa. Y aquí estamos obteniendo nuestro ID de tarea, que es una cadena. El dorso nos está quedando vacío. Y ahora aquí simplemente podemos usar nuestro router para cambiar de ruta. Así que aquí podemos escribir este router dot navegar, y estamos usando aquí navegar y no navegar por URL porque queremos pasar dentro de una matriz. Aquí. En primer lugar, tenemos tableros, luego estamos concatenar esta cadena con este ID de placa, luego coma. Y aquí tenemos nuestras tareas, y aquí tendremos nuestra identificación de tareas. Como puedes ver, es mucho más sencillo escribir navegar con array, luego navegar por URL, donde debemos concatenar esta cadena nosotros mismos. Por lo que nuestro evento click está completamente listo, y ahora solo necesitamos crear este nuevo componente. Es por esto que dentro de nuestra placa y todavía estamos hablando de componentes de inserto de módulo de placa. Queremos crear nuestro nuevo componente y será nuestro modelo de tareas. Ahora dentro con en primer lugar, necesidad de crear una tarea Modelo Ts y también el modelo de tareas punto componente punto HTML. Y ahora aquí dentro del HTML, quiero pegarle directamente todo el marcado de nuestro modelo sin ninguna lógica. En este caso, podemos ver directamente el término modelo está funcionando y router también está funcionando. Aquí es donde aquí escribamos todo el mercado. Así que aquí en primer lugar, tenemos nuestro contenedor de modelo de tarea de clase, y aquí no vincularemos ningún dato todavía. Ahora dentro de este div, debemos probarlo uno más profundo, y será nuestro encabezado modal de tarea. Cerremos este div y dentro de él aquí renderizaremos más adelante nuestro título de tarea en forma de línea. Y después de nuestra forma interior, necesitamos aquí renderizar una imagen. Y en realidad aquí será fuente slash assets slash close icon dot SVG. Y aquí también necesitamos proporcionar una clase que será tarea. Modelo cerca y en realidad lo escribí no correctamente. Esta imagen debe ir después de nuestro título de tarea firma inline. Por lo que estamos hablando aquí de cabecera modal de tarea. Y después de la cabecera modal anochecer, queremos crear el siguiente div, que será Task modal body. Vamos a cerrar aquí nuestro div y por dentro queremos crear un motivo porque necesitamos agrupar nuestros elementos. Entonces dentro de este div, queremos crear nuestro formulario más adelante. Podrías preguntar, está bien, pero por qué aquí estamos usando la firma Justin Lin y aquí queremos crear una firma real porque en realidad aquí más tarde, también necesitaremos un selecto para cambiar nuestra columna. Es por ello que es mucho más fácil usar para este foro. Estoes y aquí. Creemos una forma por ahora sin ningún grupo firme, basta con batir el vaso. Y aquí tendremos nuestra columna seleccionar contenedor. Vamos a cerrar este formulario. Y dentro de nuestro formulario más adelante, renderizaremos aquí un selecto, pero por ahora no lo tenemos. Aquí es donde aquí, solo selecciona columna. Y después de esta firma querrán crear un motivo donde tendremos nuestra descripción del modelo de tarea. Y aquí tendremos nuestro div con la etiqueta de descripción del modelo de tarea de clase. Y luego lado simplemente escribiremos una palabra descripción. Después de este div, tendremos un formulario en línea para nuestra descripción. Entonces aquí está la descripción de forma en línea que crearemos tarde. Y ahora después de este div que creamos necesitaría crear un motivo. Y aquí tendremos nuestras acciones de modelo de tarea dentro con en primer lugar, necesitamos una clase adicional y serán acciones de modelo de tarea etiquetadas y dentro de este div, simplemente escribiremos acciones. Y después de esto, necesitamos crear un div más. Y dentro de este div, empacaremos un motivo con clase, tarea, modelo, acciones, acción. Aquí, vamos a cerrar este div y luego dentro podemos renderizar una imagen con ácidos slash source slash trash SVG. Y aquí está nuestra clase a la que se le asignará el icono de acciones de modelo. Y después del segundo, simplemente renderizaremos una palabra delete. Y después de todo el margen de beneficio al final, necesitamos renderizar un telón de fondo, por lo que toda nuestra pizarra estará un poco escondida. Aquí es donde aquí debemos crear div con telón de fondo del modelo de tarea de clase aquí Vamos a cerrar este div que nuestro marcado esté completamente listo. Ahora, solo necesitamos crear este componente. Primero que nada creamos aquí una clase y será nuestro componente modal de tarea. En la parte superior se dominaron nuestro componente, y vamos a registrarnos dentro. En primer lugar, un selector, se le asignará el modelo. Y después de esto, una plantilla URL y soldada, cuanto más pesada es tarea componente modal HTML, pero no es todo. Debemos proporcionar una clase más para toda la envoltura de este componente. Sólo en este caso, nuestro mercado será correcto. Y aquí debemos acoger directamente la encuadernación. Y aquí estoy proporcionando clase de insight. Aquí podemos escribir clases iguales modelo de tarea. Y si nunca escribiste algo como esto, estamos usando tal notación cuando no necesitamos aplicar esta clase a alguna profundidad dentro de este componente, pero queremos exactamente aplicar una clase en nuestro elemento componente. Entonces hicimos algunos componentes básicos. Vamos a comprobar ahora si está funcionando en absoluto. Entonces Festival aquí tenemos muchos errores. Por ejemplo, aquí en el módulo de placa no se puede encontrar tarea componente modal. Entonces, antes que nada, aquí debemos saltar dentro de nuestro módulo de placa. Y aquí necesitamos ingresar nuestro componente de modelo de tareas. Y también estamos debemos proporcionarla aquí dentro de declaración, este es componente de modelo de tarea. Vamos a comprobar de nuevo con no tener ningún error aquí. Recargaré la página y ya no ven ningún error dentro de la consola. Pero lo que debemos hacer ahora, debemos dar click en una de las tareas. Por ejemplo, aquí está mi primera tarea y solo estoy dando clic. Y como pueden ver, no pasó nada. Pero dentro de la sequía, podemos ver ahora rebaja tablas, slash nuestro ID de tablero, tareas de corte y slash la d de nuestra tarea que acabamos de abrir. Y ahora podrías preguntar, está bien, pero por qué no vemos nuestro componente y en realidad no tendimos tendencia a la salida para nuestros hijos, lo que en realidad significa dentro de nuestra placa, dentro del componente de la placa HTML, en algún lugar dentro de nuestro marcado, por ejemplo, en la parte inferior, debemos renderizar Zhao outlet igual que hicimos dentro de nuestro componente de aplicación. Entonces aquí sólo vamos a cerrar salida del router y ahora debe funcionar. Recargaré la página. Y como pueden ver, vemos nuestro modelo por eso porque en realidad esta es la ruta. Y ahora cada vez que estoy recargando la página, vemos a nuestro padre en segundo plano. Y aquí vemos nuestro modelo y en realidad ya tenemos algún marcado básico para este modelo, lo que significa que está funcionando a cabalidad. Pero ahora quiero arreglar un enorme escollo que será súper difícil depurar lo que estoy hablando. Como puedes ver aquí dentro de nuestro componente de placa, aquí tenemos un chequeo de ruta y en realidad aquí en la parte superior, nos suscribimos a este evento estrellas de navegación. Y aquí estamos disparando nacidos vivos. ¿ Qué hace el live board? En realidad aquí estamos cumpliendo con un evento socket para nuestro back-end, lo que en realidad significa que estamos dando de baja en este socket actual, nuestro usuario actual de usted fue en este punto, que en realidad significa aquí estábamos en este punto, slash board slash AD. Y ahora aquí estamos recibiendo eventos. Todo está bien. Pero en el momento en que abrimos nuestro modelo, cambiamos por ahí. Y en realidad significa que estamos aquí en este IV y aquí vemos en vivo lo que podemos comprobarlo fácilmente. Por ejemplo, aquí sólo lo probaré en vivo, pero estoy recargando la página. Se ve bien. Pero cuando estoy saltando a nuestras tablas y luego simplemente haga clic en mi primera tarea. Como pueden ver aquí, estamos recibiendo tablero de licencia. Esto está completamente redibujado porque en este caso no obtendremos ninguna notificación en nuestro tablero, pero ya salimos del tablero. Este es el comportamiento de Sean porque no queremos vivir un tablero. Si solo abrimos el modelo, todavía queremos estar en esta página, pero podemos hacer para arreglarlo, en realidad solo necesitamos verificar nuestra ruta de tablas de barras. Porque en realidad si aquí dentro de sequía tenemos tablas de slash slash, significa que todavía nos estamos quedando en esta página. Porque si estamos saltando de nuevo en nuestra página de tableros, entonces aquí tenemos solo tablas de barras y no tenemos una slash. Y entonces aquí es donde aquí puedo escribir end no event dot URL. Y esta es toda la URL donde vamos incluye, y estamos comprobando que esta URL específica slash, boards slash. Por lo que en realidad aquí vamos a detonar nuestras vidas bordo cuando nuestro inicio de navegación sucedió. Y esta URL que vamos no incluye slash port slash. Esta slash board slash es bien nuestros enlaces simples o nuestra placa única era modelo. Vamos a comprobar si está funcionando. Estoy pinchando aquí mi primera tarea y ahora no nos estamos quedando parte, que significa que todo va a funcionar bien. Y ahora implementemos juntos. Acude a la pizarra porque esta es sólo una sola línea que quiero hacer. Quiero saltar en nuestro modelo de tareas. Y aquí en la parte superior tenemos esta imagen cercana. Y en realidad aquí podemos adicionalmente simplemente crear un evento de clic y vamos a nombrarlo, ir a bordo. Ahora podemos saltar directamente dentro nuestro modelo de tareas y crear este método, ir a enlazar. Y qué necesitamos saber al interior este componente para poder saltar a nuestra pizarra, debemos leer a partir de este año. Bueno, antes que nada, nuestro ID de tarea, lo necesitaremos en todo caso. Y aquí lo más importante, tablero AD, que en realidad significa que vamos a escribir el mismo código como lo hicimos dentro de nuestro constructor dentro de la placa. Entonces aquí registremos a nuestro constructor. Y por dentro tenemos que conseguir en primer lugar, nuestra junta AT. Para ello, necesitamos usar ruta, lo que en realidad significa aquí que debemos inyectar nuestra ruta, que es una ruta activada. Y ahora aquí podemos escribir esta ruta punto snapshot, dot, params, map, dot, get. Y aquí estamos tratando de conseguir nuestra junta Id. Y como pueden ver aquí, nos estamos poniendo tensión ahora. Es por esto que tiene mucho sentido comprobar si realmente obtuvimos nuestra identificación de placa. En este caso, podemos guardar ID de placa y tarea AD directamente como una propiedad dentro de nuestro componente. Esta es la manera aquí en primer lugar quiero crear nuestro tablero AD. Es una cuerda. Y en segundo lugar, tarea Katie, también es una cuerda. Ahora aquí podemos comprobar, vale, duplicar una tabla. Si no, entonces tenemos que lanzar un error. Aquí es donde te escucho tirado error. Y aquí podemos decir que no se puede obtener ID de placa desde URL. Y ahora tenemos que hacer exactamente lo mismo para nuestro ID de tarea. Estoes camino aquí. Vamos a tratar de tarea AD y estamos tratando de conseguir tarea una ruta diferente. Y ahora aquí queremos escribir una Eva más y comprobar aquí para la tarea AD. Entonces aquí podemos escribir, no podemos obtener ID de tarea desde la URL. Pero en realidad aquí cometí un gran error es que se puede ver que tenemos un ID de tablero y tarea ID, pero con Taskade, Está totalmente bien. Es esta ruta snapshot params map. Pero con Boyd AD, no está bien porque queremos leer toda esta información de nuestro padre. Es por esto que aquí debemos probar route dot parent, y aquí debemos poner un signo de interrogación y luego mapear programas de snapshot. En este caso, lo leemos directamente del padre. Y ahora después de estas dos comprobaciones, sólo podemos asignar esta tarea AD, y esta es una cadena ahora, y aquí también tenemos esta placa ID y también es una cadena. Ahora aquí podemos implementar método ir a bordo, pero para este vientre hay que inyectar aquí. Adicionalmente, grita para cambiar tu ruta. Entonces aquí tenemos nuestro router. Y ahora dentro de este método, podemos simplemente escribir esta ruta y navegar al igual que lo hicimos anteriormente. Y aquí queremos ir a bordo. Y como segundo parámetro es esta placa. En este caso aquí, la URL será puntos recortados, ID de tablero de slash. Echemos un vistazo a esto. Estoy recargando página aquí. Yo estoy dentro de tarea y aquí estoy haciendo clic en Cruz. Y después de hacer clic donde saltan directamente insight slash forward slash id Y lo más importante, no teníamos una recarga de página. No necesitamos buscar datos para esta parte porque todos los datos están ahí. Y ahora podemos simplemente abrir la segunda tarea, cerrarla, y es realmente fluida y rápida porque no necesitamos buscar información adicional aquí. 44. Obtén tareas y columnas: En este video cupón para hablar de flujos de datos dentro de nuestro modelo de tareas. Aquí es donde será realmente interesante. ¿ Por qué es eso? Debido a que en realidad ya tenían los datos completos para cada modelo dentro de nuestra placa, solo necesitamos usar estos datos y mapearlos correctamente dentro del modelo de tarea. Aquí es donde lo primero que quiero hacer es inyectar aquí nuestro servicio de tablero que ya tenemos y no servicio de Boards no para trabajar con el pastel, sino nuestro servicio de junta con estado. Ahora aquí, en primer lugar, quiero encontrar la tarea. Y en realidad aquí por ejemplo, después de este ID de placa dentro del constructor, podemos simplemente escribir esta tarea fue más alta y será nuestra corriente de la tarea actual que abrimos. Y aquí en realidad podemos simplemente probar estos servicios deportivos. Y aquí tenemos nuestro stream con todas las tareas de nuestra junta directiva. Y como pueden ver, ya está disponible, pero no necesitamos toda la gama de nuestras tareas. Esta es la manera aquí boop quiere usar mapa. Esto es por aquí podemos escribir por mapa y luego citar donde conseguir acceso a todas nuestras tareas. Y ahora sólo falta encontrar una tarea específica que necesitamos para este modelo de tareas. Entonces aquí solo quiero regresar tareas encontrar, y aquí dentro, vamos a tener acceso a cada tarea. Y aquí solo obtenemos esta tarea por AD y la comparamos con esta tarea AD que aquí en la parte superior dentro del constructor. Entonces, en realidad, lo que esto hace, transforma nuestras tareas de servicio de placa de flujo. Y aquí solo estamos mapeando la tarea única y aquí la estamos recuperando. Pero no todo es en realidad después del mapa. Quiero escribir filtro y aquí dentro quiero proporcionar booleano. ¿ Por qué estamos haciendo eso? Porque en realidad podría suceder que al principio con no tener una tarea porque no obtuvimos todas estas tareas aquí, lo que en realidad significa dónde saltar al constructor dentro de nuestro modelo, esta es nuestra corriente. Tareas es simplemente una matriz vacía. Aquí tratamos de encontrarlo y no podemos y obtenemos un indefinido, pero indefinido no le interesa rápido. Aquí es donde aquí escribí filtro booleano y simplemente se deshará de cada indefinido que encendido. Ahora bien, en este caso aquí, esta corriente no se cumplirá hasta que encontremos una tarea. Así que ahora vamos a tratar de usar este recorte dentro de nuestro HTML. Aquí en la parte superior, debemos crear un formulario inline, el título actualizado de nuestra tarea. Y simplemente podemos escribir aquí nuestro formulario inline que puso ya usado cientos de veces. Y luego lado en primer lugar, debemos establecer una clase, y aquí tendremos modelo de tarea agregado título foro. Después de esto, queremos establecer nuestro texto predeterminado. Y en realidad aquí necesitamos proporcionar el título de la tarea. Pero de nuevo, quiero escribirlo aún mejor. Podríamos usar esta corriente dentro de nuestro HTML. Pero como ya hablé anteriormente, podemos combinar diferentes flujos de datos dentro de una sola propiedad, y esto es exactamente lo que podemos hacer ahora aquí podemos escribir estos datos era más alto y podemos usar aquí combinado último, igual que hemos utilizado anteriormente y en realidad más tarde, no vamos a tener aquí sólo una tarea por lo menos también debe conseguir aquí una lista de nuestras columnas por eso, porque en realidad tenemos un selecto para cambiar la columna donde se encuentra esta tarea. Esto es camino aquí. En primer lugar, tendremos nuestra esta tarea y posteriormente adicionalmente alumno aquí mismo, arroyo para las columnas. Y aquí necesitamos mapear todos estos datos y queremos convertir nuestra matriz al objeto. Aquí. En primer lugar, conseguiremos nuestra tarea. Aquí. Tenemos que devolver sólo una tarea. Ahora aquí debemos crear estos datos dentro de este componente, esta manera aquí en la parte superior. En primer lugar, debemos cambiar el dólar tarea a observable. Y aquí estamos consiguiendo nuestra interfaz Task y nunca ahora porque la revisamos con filtro. Y ahora aquí también necesitamos datos que robamos. Y aquí también tendremos un observable del objeto. Y aquí tenemos nuestra tarea, que es una interfaz de Tarea. Ahora, los datos están listos, en realidad dentro del HTML, podemos usar estos datos directamente. Aquí es donde aquí en nuestro div superior, simplemente lo probaré. Y G, Aquí tenemos nuestro stream con datos como, y aquí estamos obteniendo datos, lo que en realidad significa ahora en todo el archivo, solo podemos usar datos. Esto es y aquí dentro del texto predeterminado, podemos proporcionar datos punto tarea, título de punto. Y después de esto, tenemos que proporcionar un título dentro de forma, también será tarea de datos título punto. Y como puedes ver, no tenemos streams aquí, pero en realidad aquí dentro de los datos, creamos una tarea Stream, que es una cadena basada en nuestro stream donde tenemos una matriz de tareas. Y lo último es un output aquí y aquí tenemos nuestro handle submit, por ejemplo, update task name. Y aquí dentro donde conseguir un evento. Y solo quieren crear esta función dentro de nuestro componente. Aquí no voy a implementar nada. Entonces aquí estamos consiguiendo el nombre de nuestra tarea. Que es una cuerda, la espalda es nula. Y ahora solo quiero escribir aquí registro de consola. Este es el nombre de la tarea de actualización, y aquí estamos obteniendo nuestro nombre de tarea. Vamos a comprobar si está funcionando en absoluto. Aquí no tenemos ningún error y simplemente volverán a cargar la página. Y como pueden ver directamente aquí, estamos consiguiendo mi primera tarea. ¿ Cómo funciona? Aquí construimos nuestra tarea stream, que se basa en nuestras tareas y realidad después mucho de las páginas cuando no se obtiene un error. Y potencialmente podríamos conseguirlo. En realidad no porque tenemos aquí en GE con Chegg, pero siempre es bueno escribir filtro booleano solo para saber que estamos en el lado seguro. Y aquí estamos consiguiendo nuestra primera tarea dentro de este flujo de datos. Aquí podemos cambiar esto directamente, mi primera tarea y actualizada. Y como puedes ver, este es nuestro log de consola. Obviamente aún no implementamos actualización, pero vamos por el camino correcto. Ahora. Podemos escribir exactamente el mismo código con nuestra descripción de formulario en línea. Es por esto que quiero volver a saltar dentro de nuestro HTML. Aquí está nuestro interior a partir de la descripción. Y en realidad aquí sólo podemos probarlo en forma inline como hicimos para el título. Y aquí ya tenemos los datos dentro del flujo de datos. Esto es camino aquí. En primer lugar, nuestro modelo de tarea de clase , editar, descripción, formulario. Y después de esto, en primer lugar, tenemos aquí el texto por defecto. Aquí lo probaremos descripción de la tarea de datos. Y aquí quiero escribir, o porque en realidad una descripción dentro de la tarea no es obligatoria, lo que significa que en algún momento será una cadena vacía. Esto es camino aquí, agrega una descripción más detallada. Después de esto, también queremos establecer nuestro título. Esta es la razón por la descripción de la tarea data dot. También queremos proporcionar aquí en exterior, y este es nuestro primer uso de textarea. Esto es camino aquí. El tipo de entrada es área de texto también tiene la propiedad Button debe establecerse en true. Y después de este botón se puede configurar el texto para guardar. Y también necesitamos proporcionar aquí me ocupo de presentar. Aquí, nombremoslo, actualice la descripción de la tarea. Aquí estamos recibiendo nuestro evento en realidad. Aquí debemos crear la función, pero será exactamente la misma. Es por esto que voy a copiar pegar, actualizar el nombre de la tarea, y simplemente cambiar el nombre y el registro de la consola. Pero obviamente no es un nombre de tarea sino una descripción de tarea. Cambiémoslo y registro de consola y verifiquemos si está funcionando. Como puedes ver aquí, estamos recibiendo un tipo de error indefinido. No es asignable al tipo string. En realidad es un punto válido de TypeScript porque nuestro interior From quiere obtener solo una cadena y no una indefinida aquí. Es por esto que sólo podemos probarlo o cadena vacía. Esto está totalmente bien. Como puedes ver ahora no tenemos un error. Aquí estamos recibiendo ahora mi descripción, que es una descripción real de nuestra tarea. Podemos cambiarlo y darle a Enter. Y en realidad aquí este es un textarea, Así que Endo no ayuda. Debemos dar clic en el botón Guardar. Y aquí estamos recibiendo dentro de la actualización de la consola, descripción de la tarea, mi descripción, lo que en realidad significa que nuestra firma del interior está trabajando y nuestro stream también está proporcionando datos rápidamente. Y ahora hablemos de columnas. En realidad es aún más fácil. Simplemente debemos saltar adentro, digamos modelo de tareas. Y aquí necesitamos esta corriente para las columnas de nuestro tablero. Y en realidad no necesitamos ni siquiera para crear propiedad adicional aquí dentro combinado más reciente, simplemente puedo escribir este perro de servicio de tabla. Y aquí tenemos un flujo columnas y podemos simplemente paquete matriz de columnas aquí dentro de este componente, y estamos listos para ir. Entonces aquí estamos consiguiendo nuestra tarea. Y en segundo lugar, las columnas aquí dentro del objeto boop quieren devolver esta matriz de columnas. Y ahora aquí podemos usar estas columnas para construir un selecto dentro de nuestro Markov. Entonces en realidad aquí tenemos un formulario y dentro de él queremos escribir un selecto. Hagamos esto ahora. En primer lugar, aquí estará S Select y queremos escribir aquí nombre del control de formulario porque en realidad necesitamos hornearlo desde Grupo. ¿ Por qué lo estamos haciendo? Porque en realidad es mucho más fácil trabajar con formularios reactivos si tienes, por ejemplo, un Select. Esto es camino aquí. Vamos a crear un grupo de formularios. Y aquí queremos crear, por ejemplo, forma de columna. Y aquí dentro de select, solo podemos empacar el nombre del control de formulario, y será nuestro ID de columna. Y aquí también debemos proporcionar la columna class select. Ahora dentro de select, queremos renderizar todas nuestras opciones y será nuestro array de columnas. Esto es camino aquí, opción dentro de G4, lo estamos renderizando aquí con solo bucle a través de nuestras columnas porque las tenemos en columnas de puntos de datos y no necesitamos molestarnos con arroyos aquí. También aquí queremos usar en valor G y proporcionar el valor dentro de la opción R. Esta será la columna dot AD porque estamos haciendo un looping a través de ellos. Vamos a cerrar esta opción y simplemente ejecutamos el interior de cada una de las opciones en el título. Por lo que aquí sólo vamos a ejecutar la columna título de punto. Vamos a comprobar si está funcionando. Estoy saltando aquí y estamos recibiendo un error y se desconoce el valor G. Y antes que nada, debemos crear nuestra forma. Es por esto que vamos a saltar hacia atrás y establecer nuestro componente. Y aquí en la parte superior debemos crear un formulario para una sola propiedad. Entonces aquí voy a tratar de que tengamos nuestra forma de columna. Y es este FB. Y en realidad no nos inyectamos aquí si p. Así que vamos a hacer esto ahora. Si B es como siempre, solo constructor de formularios, y aquí escribiremos este grupo F B y dentro pasaremos nuestros controles. Y aquí solo tenemos una ID de columna, pero no necesitamos nada más. Y por defecto lo será. Ahora aquí todavía tenemos a esta Sarah. Y en realidad, porque no inyectamos formas reactivas dentro de nuestro módulo de placa. Por lo que debemos saltar hacia atrás y configurar nuestro módulo de placa. Y aquí mismo dentro del módulo de formularios reactivos de entrada, como puedes ver ahora estamos recibiendo otro error dentro de nuestro HTML. Y aquí estamos consiguiendo columnas no existe en la interfaz tipo Task porque en realidad no extendimos nuestra interfaz. Aquí en la parte superior tenemos flujo de datos y aquí decimos que solo tenemos una tarea y esto no es cierto. Tenemos aquí columnas, y esto es solo una matriz de nuestra interfaz de columnas, como puedes ver ahora dentro nuestra consola con no tener ningún error. Entonces vamos a revisar esto. Ahora estoy recargando al paciente aquí tenemos ahora nuestro increíble select y no vemos ningún valor porque no proporcionamos un valor predeterminado. Ahora aquí podemos abrir este select y podemos elegir entre diferentes columnas. Y como se puede ver esta una directamente nuestras columnas que tenemos dentro de tablero. Ahora lo único último que quiero implementar, establecer valor por defecto dentro del select, porque en realidad por defecto tenemos una columna y esta tarea está situada en alguna columna. Y esto lo podemos hacer fácilmente porque tenemos arroyos. Entonces aquí sólo podemos usar esta tarea fue robada porque tenemos el arroyo. Y aquí sabemos que estamos recibiendo nuestra tarea y solo podemos escribir Suscríbete aquí y estamos teniendo acceso a nuestra tarea. Y ahora necesitamos actualizar nuestro formulario. Entonces aquí tenemos acceso a esta forma de columna, qué valor, y si no sabes qué valor de tono está haciendo, actualiza las propiedades dentro de formulario. Entonces aquí debemos proveer un objeto con campos. Y en nuestro caso esto es solo un ID de columna de un solo campo. El interior queremos proporcionar un ideal para columna de esa tarea. Es el ID de columna de punto de tarea, lo que en realidad significa constructor interior en inicializar donde suscribirse al flujo de tareas. Y cuando estamos consiguiendo nuestra tarea aquí, estamos parcheando el valor. Como puedes ver ahora en su lugar navegador, estamos recibiendo nuestra primera columna. Pero lo que no me gusta aquí, estamos usando subscribe nuevamente sin darse de baja. Es por esto que quiero hacer exactamente lo mismo que hicimos dentro de nuestra pizarra. En primer lugar, aquí debemos crear nuestro darse de baja. Y esto está en uso sujeto donde por dentro estamos proporcionando vacío. Y ahora aquí queremos crear en G sobre destruir. Esto es camino aquí, implementos en esta Troya. Y en algún lugar después del constructor podemos crear en junio, la huelga y la perspicacia con en primer lugar, queremos llamar a esta cancelación de suscripción siguiente y luego completa. Por lo que estos darse de baja completa. Y después de esto no debemos olvidar antes de nuestro subscribe Write pipe. Y aquí toma hasta aquí les estamos proporcionando estos darse de baja que acabamos de crear. En este caso, estamos del lado seguro enDestroy de este componente. Nuestra suscripción también será destruida. 45. Actualización de la tarea: En este video, debemos implementar la actualización de nuestra tarea desde el principio hasta el final. Y en realidad dentro de una tarea tenemos tres cosas diferentes. En primer lugar, aquí tenemos un formulario inline para nuestro título, para todo lo implementado. Y estamos llegando aquí el log de la consola. En realidad esta es una actualización parcial de nuestra tarea. Tenemos exactamente la misma lógica con la descripción. Aquí sólo podemos cambiarlo y darle a Guardar. Pero también aquí tenemos un cambio de nuestra columna y en realidad no lo manejamos en absoluto y debemos hacerlo. Y esto también es una actualización de la tarea. Lo más importante es que todas estas son actualizaciones parciales que debemos cumplir para nuestro back-end porque queremos notificar a todos nuestros clientes sobre este cambio dentro de la tarea, lo que en realidad significa que nuestra lógica será exactamente lo mismo que antes dentro de la parte, estamos emitiendo algo en el cliente, en el backend, hacemos algo a nuestra base de datos, por ejemplo, tarea de datos web. Y después de esto, estamos notificando a todos nuestros clientes que están suscritos a esta junta específica. Y lo primero que tenemos que hacer es crear un nuevo socket events. Empecemos esta vez en el cliente. Y dentro de nuestra aplicación de origen tipos de trituración, tenemos un eventos socket. Y en realidad aquí veo tareas Crear, y ahora necesitamos exactamente lo mismo con la actualización de tareas PS. Y aquí tenemos el éxito y el fracaso como siempre. Y aquí podemos cambiar el nombre a las tareas, actualizar, luego actualizar el éxito, y la falla de actualización. Por lo que nuestro evento está listo, Nobu debe implementar un nuevo método dentro de nuestras tareas de servicio de camisetas, pues como antes, queremos ocultar nuestro socket dentro de este método dentro de tareas compartidas. Esto es camino aquí. Vamos a crear nuestro método que actualizará tarea. Aquí. En primer lugar, estamos obteniendo nuestra identificación de placa porque debemos saber qué usuarios, debemos notificar. Aquí es donde escuchar cumpleaños, esta cadena también necesitará un ID de tarea porque debemos saber qué tarea debemos actualizar. Y por último pero no menos importante, aquí hay una lista de campos. Y aquí tendremos un objeto donde todos nuestros campos no serán obligatorios. Es por esto que los estoy escribiendo con interrogación para que podamos actualizar nuestro título. Es una cuerda. También podemos actualizar nuestra descripción. También es opcional y de cadena. Y aquí también tenemos a nuestra columnada y nuestra señora columna es donde está situada nuestra tarea. Y aquí atrás nos estamos quedando vacíos. Lo único que debemos hacer aquí es socket meet. Esta es la razón por la cumbre de servicio de socket. Y aquí queremos usar nuestro nuevo método, eventos socket en m dot. Y tenemos aquí nuestras actualizaciones de tareas comienzan aquí como el segundo parámetro, debemos proporcionar un objeto con todos estos campos. En primer lugar, es un radio de borde, luego ID de columna, y luego nuestro objeto con campos. Y como pueden ver aquí, hice un error tipográfico. No es continuidad sino ID de tarea y debido a TypeScript con ver directamente un error. Por lo que ahora podemos saltar hacia atrás y establecer nuestro componente y hacer los cambios necesarios. Y aquí tenemos nuestro nombre de tarea de actualización y la descripción de la fecha. Aquí en ambos casos queremos llamar a este método de tarea de actualización. Esto es camino aquí en la parte superior con en primer lugar, debe inyectar estas tareas servicio que se acaban de actualizar. Y es servicio de tareas. Después de esto, simplemente podemos escribir aquí este servicio de tareas, y aquí está nuestra nueva tarea de actualización de método, y luego decirlo. En primer lugar, debemos escoger una tabla AT esta placa ID aquí es de una tarea o tenemos aquí ID de tarea? Sí, lo tenemos, lo pusimos aquí dentro del constructor. Entonces aquí también podemos escribir este punto hace KD, y aquí tenemos nuestros campos. En este caso solo nos falta actualizar el título. Esta es la manera aquí podemos decir título, Tarea, Nombre, y como puedes ver aquí, estamos recibiendo una extraña columna de propiedad ID falta en el tipo, lo que en realidad significa que hice algo mal. Y ya pueden ver el problema aquí. Columna dama también es opcional. No debe estar ahí siempre. Aquí es donde está aquí. puedes ver ahora no estamos recibiendo un error porque todos nuestros campos pueden estar indefinidos él. Y aquí sólo nos falta proporcionar un título. Por lo que aquí actualizamos el nombre de nuestra tarea. Ahora puedo copiar pegar este código y actualizar aquí nuestra descripción. Aquí sólo voy a proporcionar una descripción, y esta es nuestra descripción de la tarea desde el parámetro y ahora es la parte más interesante. Debemos manejar este cambio de este único selecto. Y en realidad esta es una forma reactiva, que en realidad es buena porque podemos reaccionar ante los cambios de manera completamente reaccionada. Lo que quiero escribir aquí es este formulario de columna de puntos Gad. Y aquí podemos obtener nuestro ID de columna, pero en realidad aquí queremos reaccionar a los cambios de valor y los cambios de valor reales nos darán vuelta y observable, lo que en realidad significa que podemos escribir aquí suscribirte. Pero como se puede ver aquí, estamos recibiendo una advertencia de TypeScript de que posiblemente este campo puede ser ahora, pero no en nuestro caso, porque en nuestro caso, siempre se dice aquí es donde en realidad aquí puede suprimir esta advertencia con solo usar el banco aquí. En este caso, estamos diciendo TypeScript, no te molestes con el cheque donde seguro que esta propiedad está ahí. Y como se puede ver ahora aquí, los cambios de valor es un observable. Aquí es donde aquí puedo ahora sólo probarlo suscribirse y luego llegar aquí lo que hay dentro esta columna señora después del cambio, lo que en realidad significa comer esta columna señora cuando era actualizado. Y ahora solo necesito escribir insertar registro de consola. Cambió id de columna Y aquí podemos comprobar si realmente está funcionando. Recarguemosla página. Como se puede ver aquí dentro de la consola, me estoy cambiando la columna que D, y aquí está nuestra columna ID. Y en realidad esto es un problema porque lo que queremos hacer ahora dentro de esta suscripción, queremos desencadenar un cambio para el back-end, como hicimos aquí con tarea de actualización. Pero no tiene ningún sentido activarlo al principio cuando tenemos el mismo id de columna, realmente queremos demasiado complicado cuando lo cambiamos. Por eso lo que aquí podemos escribir. Podemos comprobar si la columna necesitó, lo que se cambió no es lo mismo que la mitad válida. Pero aquí también, el problema, tenemos esta información sólo dentro de nuestra tarea Stream, lo que en realidad significa que debemos combinar estos dos flujos juntos. Es por esto que aquí podemos usar láseres combinados al igual que lo hicimos anteriormente. Y aquí podemos proporcionar, primer lugar, esta tarea fue más alta. Y aquí después de esto, esta corriente que escribimos aquí en la parte inferior, simplemente la pegaré como segundo parámetro. Y esta última combinada nos devuelve una matriz, lo que en realidad significa aquí tenemos acceso a nuestra tarea y después de esto a nuestra columna id desde el formulario. Y aquí ahora puedo consola registrarlos a los dos. Aquí quiero ver en primer lugar, señora columna cambiada y segundo lugar lo que tenemos dentro tarea. Y en realidad aquí queremos revisar el id de la columna del lote de tareas Vamos a ver esto. Estoy recargando la página y estamos consiguiendo los dos ochentas. Y como pueden ver, son similares, lo que en realidad significa que este es exactamente el caso cuando no necesitamos hacer nada. Entonces lo que queremos escribir aquí, si nuestra columna de tareas ellos D no es igual a nuestro id de columna, entonces necesitamos hacer una actualización. Aquí podemos simplemente escribir este servicio de tareas al igual que hicimos en la tarea de actualización inferior. Y aquí adentro se proporcionaron. Y en primer lugar, este ID de tablero, luego tarea, ¿tenemos dentro task dot id, y aquí están nuestros campos. Dentro de los campos, solo tenemos nuestra propiedad id de columna. Así que como se puede ver, JS de Eric realmente nos ayuda a trabajar juntos con formas reactivas, streams, nuestros propios streams, o un camino que es extremadamente eficiente. Ahora podemos eliminar este código comentado. Ya no lo necesitamos. Pero lo que quieren hacer aquí, quiero escribir tomado para tratar con dados de baja en este caso aquí, no vamos a tener una suscripción de pistola. Aquí es donde aquí debemos recta pipa tomada hasta tal como lo hicimos aquí ya. Y dentro de estos darse de baja y en realidad nuestra parte frontend del código está completamente lista. Ahora debemos probar las cosas estándar en el back-end, lo que en realidad significa que primero nada debemos copiar eventos de pegar. Entonces necesitamos crear una nueva suscripción a este evento y luego implementar un nuevo método dentro del controlador para actualizar una tarea. Hagamos esto ahora. En primer lugar, quiero saltar dentro nuestros eventos de socket y copiar la actualización de tareas de pegar. Después de esto, podemos saltar dentro de un tipo de fuente de servidor. Aquí tenemos nuestros eventos socket y en la parte inferior puedo pegar estos tres nuevos eventos. Ahora podemos saltar de nuevo dentro o hermandad S. Y aquí en la parte inferior podemos agregar nueva tonelada de socket. Aquí queremos escuchar nuestros eventos socket en m dot. Y aquí tenemos nuestras tareas de actualización aquí con no queremos llamar a un controlador de columnas, sino controlador de tareas. Y aquí tenemos una nueva función, tarea de actualización, y debemos proporcionar insight o su socket y datos. Ahora es el momento de crear esta tarea de actualización. Y en realidad necesito copiar pegar desde columnas actualizar porque va a ser super similar como puedes ver aquí tenemos columna de actualización. Copiaré, pegaré todo el método y saltaré y diré tareas, y lo pegaré aquí en la parte inferior. Ahora vamos a cambiarlo aquí. En primer lugar tenemos nuestra tarea de actualización y estamos consiguiendo aquí los datos. Entonces, ¿qué obtuvimos los datos internos? Era una identificación de la junta. Entonces tenemos aquí en la tarea ID, y dentro de nuestros campos, tenemos tres campos. En primer lugar, el título, es opcional. Entonces podríamos llegar aquí descripción. También es una cadena opcional. Y por último es nuestra columna ellos D, que también es opcional. Ahora vamos a actualizar nuestro festival try and catch aquí estamos comprobando si hay columnas actualizar esto se dibuja, necesitamos cambiarlo a nuestras tareas. Fallo de actualización. Aquí estamos enviando usuario no está autorizado, también se debe cambiar falla dentro de la jaula. Por lo que aquí tendremos también tareas de actualización de fallas. Y ahora aquí debemos cambiar nuestro modelo. El modelo de tarea buscar por ID y actualización está totalmente bien. Y aquí tenemos nuestro punto de datos, y aquí tenemos nuestro ID de tarea. Aquí simplemente tiramos todos los campos de datos que tenemos dentro y solo se actualizará con lo que hemos proporcionado. Aquí de vuelta, estamos recibiendo tarea actualizada y queremos enviar esta tarea actualizada a nuestro cliente. Y aquí estamos proporcionando ID de placa de datos. Esto está totalmente bien y la demanda aquí es el éxito de actualización de tareas. Y aquí dentro estamos brindando nuestra tarea actualizada. Por lo que estamos completamente terminados con nuestra parte back-end, pero debemos en el cliente, también escribir una escucha para notificar a todos nuestros clientes sobre los cambios. Por lo que debemos manejar la Cumbre sobre el cliente. Y para esto uno debe volver dentro de la aplicación de origen de nuestros clientes, servicios de placa, servicio de placa por aquí, porque en realidad simplemente necesitamos escribir una lección dentro de nuestros componentes de placa con no necesita escribir escuchar dentro del modelo de placa porque en realidad modelo comprado simplemente use nuestras transmisiones desde aquí, lo que en realidad significa con solo suscribirse dentro de nuestro componente de placa. Aquí llamaremos a un método para actualizar en tarea dentro de nuestro flujo de tareas. Es por esto que aquí solo quiero mirar nuestra columna de actualización porque será súper similar a nuestra tarea de actualización. Y en realidad podemos copiar pegarlo completamente. Entonces cambiémoslo ahora. Aquí tenemos nuestra tarea de actualización. Estamos llegando aquí son tarea actualizada, que en realidad es al atardecer interfaz. Aquí tenemos que hacer exactamente las mismas cosas con solo necesidad actualizar una sola tarea dentro de nuestra matriz. Así que aquí estamos recibiendo tareas actualizadas y aquí estamos usando nuestras tareas de flujo obtener valor y estamos obteniendo acceso a cada tarea. Ahora aquí estamos revisando, ok, nuestro ID de tarea debería igualar a nuestra tarea actualizada AD. En este caso aquí debemos regresar, se difunden esa tarea y queremos actualizar aquí sólo un título. Y en realidad esto no es válido porque aquí necesitamos regresar más aquí. En primer lugar, tarea actualizada, el título, pero también debemos actualizar aquí nuestra descripción porque podría suceder que la actualicemos. Aquí es donde escuchar la descripción actualizada del punto de la tarea y la última aquí será nuestra columna necesitada, y también se actualiza el ID de columna de punto de tarea. Se ve ahora totalmente bien. Y en otro caso, simplemente devolvemos nuestra tarea. Y después de esto, necesitamos actualizar nuestro flujo de tareas con algunas tareas actualizadas para que nuestro método esté completamente listo ahora solo necesitamos volver y configurar nuestra placa de componentes, componente de placa. Y aquí debemos crear una lección más, conferencia. Quiero encontrar aquí nuestro éxito de actualización de cono porque va a ser super similar. Aquí está. Sólo voy a copiar y pegarlo. Y aquí tenemos que cambiarlo. En primer lugar, de vuelta, estamos recibiendo nuestra interfaz de tareas y aquí está Socrative y C num dot task update success. Ahora aquí tenemos nuestra baja y vuelta estamos recibiendo nuestra tarea actualizada. Y ahora aquí sólo podemos llamar a este método que acabamos de crearlo, esta tarea de actualización. Y aquí dentro debemos proporcionar nuestra tarea actualizada que estamos obteniendo desde el backend. En este caso aquí con este código, actualizaremos el flujo de tareas para cada cliente que esté suscrito a nuestra página. Vamos a comprobar ahora si sigue un código está funcionando aquí. No tenemos ningún error dentro del front-end, no hay errores dentro del back-end. Ahora abramos nuestra página web y en realidad quiero duplicar la pestaña para que podamos consultarla con otro cliente. Entonces aquí estamos abiertos mi primera tarea y solo quieren actualizar un título aquí. Solo escribamos completo y golpeamos Enter. Y como pueden ver, se actualizó directamente aquí, aquí en el tablero. Y también en el siguiente paso, también se actualizó, lo realidad significa que lo actualizamos con éxito en el backend, se notificará a los clientes de ley con esta suscripción de escucha donde se actualizó la corriente y ahora todos los lugares que están suscritos a los arroyos fuera dramáticamente hacia atrás. Esto está funcionando increíble. Ahora comprobemos que podemos cambiar una columna. Entonces aquí quiero seleccionar la segunda columna, actualizada y algún número. Y como se puede ver directamente, esta tarea se ha ido de la primera columna, y ahora está aquí dentro de la segunda columna. Fue actualizado dentro de nuestro formulario. Y aquí en el siguiente paso Vemos mi primera tarea, que también se actualiza en la siguiente columna. que en realidad significa que implementamos con éxito la actualización de nuestra tarea y también moviéndola entre nuestras columnas. 46. Borrar la tarea: En este video, implementaremos la última característica dentro de nuestro proyecto, y esta es la eliminación de las tareas. Hagamos esto ahora. En primer lugar, quiero empezar desde nuestro servidor aquí, pero debo saltar dentro de nuestros tipos de fuente eventos socket, y crear tres nuevos eventos de socket. Porque en realidad queremos notificar a todos los demás clientes que se les quitó una tarea. Es por ello que lo haremos a través de eventos socket. Aquí es donde aquí voy a copiar pegar tareas actualizar, sólo cambiarlo a tareas, eliminar. Y aquí a la derecha podemos cambiarlo a tareas, eliminar, tareas, eliminar éxito, y tareas eliminar error. Después de eso, podemos saltar dentro esas celebridades y nuevo socket ton. Entonces aquí estamos debemos nombrarlo punto, y aquí tenemos nuestras tareas borrar, que es un estándar. Y aquí está nuestro controlador de tareas donde estamos llamando a nuestra tarea de eliminar. Y ahora en realidad quiero copiar pegar nuestro borrado de la columna. Será súper similar. Como puedes ver aquí en la parte superior, tenemos el método delete column y ellos solo lo copiarán y lo pondrán dentro de nuestras tareas aquí en la parte inferior. Y ahora cambiemos este método. En primer lugar, no elimina columna sino elimina tarea. Y lo que estamos consiguiendo aquí, nos estamos aburriendo como siempre, necesitan avisar a todos nuestros clientes. Y aquí debemos conseguir justo la tarea Katie, para saber lo que tenemos que quitar. Y aquí tenemos nuestro error y solo nos falta llamar aquí tareas eliminar error. Y aquí dentro de nuestra jaula, también podemos llamar a tareas eliminar fracaso. Ahora aquí en lugar de modelo de columna, sólo podemos usar un modelo de tarea dot delete one, y simplemente eliminamos nuestra tarea por ID de tarea que proporcionamos. Y después de esto, no estamos definiendo todos nuestros clientes con este socket tareas. Eliminar éxito en aquí Beckwith, solo hay que darle a una tarea una D porque no tenemos más información y esta información es suficiente para nuestro cliente entienda qué tarea se debe eliminar. Ahora debemos continuar con ruta del cliente y para éste debemos copiar pegar estos tres eventos de socket que acabamos de crear. Regresaré dentro de nuestros clientes fuente AB, tipos compartidos, eventos de socket. Y aquí en la parte inferior podemos agregarlos. Y ahora debemos actualizar o servicio para trabajar con tareas. Y lo que queremos hacer aquí, queremos crear un nuevo método que elimine en tarea. Esto es camino aquí. Vamos a crear tarea de eliminación. Y sabemos que simplemente proporcionamos aquí un ID de placa, que es una cadena. Y también necesitamos aquí nuestro ID de tarea, y también es una cadena. Y de vuelta estamos llegando aquí vacío. Y ahora dentro podemos simplemente llamar a nuestro servicio de circuitos dot image. Aquí te está mostrando evento socket event cinema dot tasks delete here como segundo parámetro. Estamos proporcionando nuestras opciones, que es en primer lugar tablero AT y en segundo lugar, nuestro ID de tarea. Y con eso, nuestro método API está completamente listo. Ahora debemos saltar dentro del módulo de placa y servicio de placa. Y en realidad aquí necesitamos un nuevo método al igual que eliminar columna, pero se eliminará tarea y en realidad el código será super similar porque aquí sólo queremos filtrar uno específico tarea de nuestra matriz. Aquí es donde aquí vamos a cambiarlo para eliminar tarea, y aquí está un argumento que estamos recibiendo nuestra tarea AD. Aquí es donde aquí queremos recorrer nuestro stream, que es Task Stream obtener valor aquí donde obtengo un acceso a cada tarea. Y estamos comparando nuestra tarea k, d con el id de tarea que necesitamos eliminar. Y aquí hacia atrás consiguiendo tareas actualizadas. Y ahora aquí queremos actualizar nuestro stream, que es nuestra Task Stream Reserve y usted actualizó la matriz de tareas. Por lo que creamos con éxito nuestra tarea de eliminación para el estado de la junta. Y ahora aquí también quiero eliminar este comentario. Ya no lo necesitamos. Ahora, debemos crear algo de HTML para eliminar nuestra tarea. Aquí es donde debemos saltar hacia atrás y dijo nuestro modelo de tareas de componentes. Y aquí en la parte inferior de nuestro componente de modelo de tareas HTML, tenemos acciones, y aquí tenemos un delete con una imagen. Y en realidad ahora en este div, simplemente podemos agregar el evento click y llamar aquí a un nuevo método que se eliminará tarea. Ahora vamos a crear esta tarea de eliminación dentro de nuestro componente. Aquí no necesitamos nada, solo necesitamos este ID de tarea y este ID de placa, y ya los tenemos. Es por esto que aquí simplemente podemos escribir este servicio de tareas Dot Delete Task y los estamos proporcionando en su interior. Así que aquí este punto EN esta tarea KD, por lo que nuestros clientes emitieron con éxito este evento al back-end. Back-end actualizó nuestra tarea y notificó a todos nuestros clientes. Pero en realidad debemos suscribirnos con la escucha en diferentes lugares. En primer lugar, queremos hacerlo aquí dentro de nuestro modelo de tareas. Y en segundo lugar en nuestro tablero, y en realidad dentro del tablero, simplemente necesitamos llamar a este método que creamos Delete Task solo para actualizar una secuencia. Pero lo que quiero hacer aquí, no quiero directamente dentro eliminar tarea para ir a nuestra página de tablero. En realidad, tiene sentido, pero no estamos seguros de que eliminamos éxito en la tarea. Es por esto que no quiero escribir código aquí. De verdad quiero escribir escucha, por ejemplo, dentro de nuestro constructor. Para ello, debemos inyectar aquí nuestro servicio de socket. Aquí es donde escuchamos el servicio de circuito privado y estamos consiguiendo aquí nuestro servicio de socket. Y ahora aquí en South constructor por ejemplo, en la parte inferior, sólo podemos escribir esta lección de servicio de socket. Aquí, debe proporcionar eso al recuperar la tensión. Y esta es la tarea k d que estamos quitando. Ahora aquí podemos usar eventos de socket en m dot y donde suscribirnos a nuestras tareas eliminar éxito. Y aquí quiero pasear por tomado hasta que estemos en el lado seguro y luego proporcionar información estos darse de baja. Y después de la pipa, podemos usar nuestra suscripción y en realidad no nos importa Tuskegee en absoluto. Simplemente queremos ir demasiado amplio y ya creado tal método. Esto es, esto va a qué? Tenemos, este método directamente aquí dentro de este archivo, lo que en realidad significa que cuando estamos teniendo éxito y nuestro modelo se abre, este código va a saltar directamente de nuevo al tablero porque podemos mostrar esta tarea eliminada más. Y ahora quiero copiar pegar este código completamente porque vamos a escribir exactamente lo mismo dentro de nuestro tablero. Y aquí como ustedes recuerdan, estamos escribiendo todas estas llamadas a nuestro servicio de mesa directiva. Aquí es donde tiene mucho sentido poner aquí este código. Y en lugar de esto ir a bordo, sólo inténtalo aquí, esta palabra servicio punto. Y aquí tenemos nuestra tarea de eliminar donde estamos proporcionando ID de tarea. Y en este caso aquí necesitamos esta tarea AD que estamos obteniendo del backend, y en realidad se implementaron completamente esta característica. Ahora vamos a comprobar si está funcionando, pero no tengas ningún error aquí y ningún error en el backend. Ahora, saltemos al navegador. Aquí tengo mi primera tarea, así que vamos a quitarla ahora, como puedes ver dentro de las acciones, tenemos este delete y luego golpeando aquí delete y esta tarea se ha ido por completo con no lo ves aquí dentro de la pizarra, y no lo vemos dentro de segunda tabla. Y en realidad en el éxito donde se redirigió con éxito a slash slash board ID, lo que en realidad significa que implementamos con éxito esta característica, Fool Live de principio a fin. 47. Implementación: Terminamos exitosamente nuestro proyecto con la creación del clon de Trello, y ahora debemos hablar de despliegue. Y típicamente el despliegue no es una tarea fácil y mucha gente tiene preguntas. Cómo debe proyectarse el jugador, cómo lo gestionaremos, qué servicio debemos utilizar para ello. Y esto en realidad es un problema. Hay cientos de empresas diferentes donde puedes pagar dinero y se desplegarán para tu proyecto. Pero antes que nada, hay que comparar todas estas empresas entender cómo desplegar su proyecto, aprender sus herramientas en línea, y así sucesivamente. No tiene mucho sentido. En realidad, todas estas herramientas para hacer exactamente lo mismo. Están configurando tu proyecto en producción en un servidor real. Y en realidad la mejor variante para aprender producción e implementación es desplegando nuestro proyecto por nosotros mismos en nuestro propio servidor. Estos son los huesos desnudos del despliegue. Aquí es donde tiene mucho sentido aprender a hacerlo. Además, será probablemente la variante más barata, cómo puedes hospedar tu proyecto. Sí, No será gratis porque debes pagar por el servidor, pero no pagas a la empresa para administrar un servidor y no pagas por algunas herramientas gráficas para aplaudirte tu proyecto. Aquí es donde en este video, debemos rentar un servidor juntos, configurándolo, y luego desplegar ese nuestro proyecto. Y en realidad, si no quieres pagar por el servidor, esto está totalmente bien. Simplemente puedes dejar tu proyecto tal como está. Y checando dijo el video, cómo lo estoy haciendo y hace una empresa de servidores, yo mismo uso hertz y este es proveedor de servidores bastante barato y confiable. Y en realidad puedes elegir cualquier proveedor que te guste. Solo necesitas acceso al servidor privado virtual. Pero me gusta hatsune porque es confiable y no tan caro. Como puedes ver aquí, podemos dar clic en la Nube y consultar los precios aquí en la parte inferior. Como se puede ver, hay un montón de paquetes diferentes y el mínimo está aquí por años y $0.15, que es bastante barato para el mes de 20 terabytes, trágicos dos gigabytes de RAM y CPU Processor. Y en realidad, estoy usando este servidor más pequeño para dos proyectos en producción, pero viene bastante gente. Y si optimizas tus proyectos thriller, bueno, entonces estás totalmente bien con un jarabe pequeño. Es por ello que en este video rentaremos exactamente el jarabe. Por lo que ahora el primer paso es registrar justo dentro de su hijo un peine o cualquier proveedor que te gustaría. Ya tengo aquí una cuenta y después del registro y confirmación de su correo electrónico, verá dicha página. En realidad aquí, este servicio en tu perfil estará vacío, pero este es mi propio servidor web. Aquí quiero dar click en servidor porque solo quieren por el bien de este curso, crear un nuevo servidor. Entonces el primero aquí es la ubicación, en realidad no importa. Podemos elegir aquí Helsinki o lo que prefieras. Herida de imagen está totalmente fina. No necesitamos elegir nada. Aquí está tipo estándar, totalmente bien. Y aquí, el nivel más pequeño, que es para el tuyo, $0.15. No necesitamos cambiar nada. No necesitamos volúmenes, redes, firewalls, características adicionales, clave SSH, y aquí solo un nombre. Podemos nombrarlo aquí, l trailer, igual que nuestro proyecto para que sepamos de qué estamos hablando. Y como puedes ver aquí con no seleccionamos nuestra clave SSH, lo que significa que obtendremos un e-mail con usuario root y la contraseña, que está totalmente bien rápido. Estoy golpeando aquí crear y por ahora, y nuestro servidor será creado. Como pueden ver, mi servidor ya está el verde y funcionando. Y en realidad en digamos, el correo electrónico, me dieron mis credenciales donde tengo un usuario root y la contraseña para nuestro servidor. Ahora debemos saltar dentro de la consola y escribir SSH. Y aquí estará en primer lugar, nuestro usuario root add. Entonces la dirección IP que tenemos aquí, solo podemos hacer clic en ella y se copiará y necesitan pegarla aquí. Entonces tenemos aquí SSH, root at, y aquí el artista AP. Estoy golpeando Enter y estamos recibiendo el mensaje. Te aseguro que quieres continuar. Donde justo aquí dentro, sí. Y pulsando Enter, como puedes ver aquí, estamos recibiendo, en primer lugar, la pregunta respecto a nuestra contraseña. Por lo que necesitamos tomar una contraseña del e-mail y pegar aquí. Y después de esto, estamos recibiendo mucha información respecto a nuestro servidor. Y comenzamos el proceso de cambiar la contraseña root y en realidad para cambiar la contraseña con antes que nada, debemos proporcionar una contraseña actual. Por eso lo estoy pegando de nuevo y golpeando Enter. Y ahora debemos proporcionar una nueva contraseña para nuestro usuario root. Y lo estamos haciendo solo para que Kasner no sepa nuestra contraseña. Aquí, proporcionaré apenas 123. Y una vez más, 123. Y como pueden ver, estamos recibiendo un mensaje. Debe elegir una contraseña más larga. Hagámoslo 12345678. Y una vez más, y en realidad debes entender que para el proyecto de producción real, debes hacer alguna contraseña segura y no así, esto es solo para las pruebas. Entonces si tienes tal salida con root en L, Trello y hash aquí, significa que has logrado, miramos dentro del observador. Aquí podemos hacer algo. Aquí quiero mencionar algo importante. No estamos hablando dentro de este curso de cómo administrar servidores de manera eficiente y segura. que en realidad significa que voy a mostrar todo, todo el despliegue con nuestro usuario root. Normalmente en un proyecto de producción real, no se quiere hacer todo con el usuario root. Desea crear otro usuario con permisos limitados que sólo pueda implementar un proyecto. Por lo que de nuevo, usar ruta en producción es malo, pero si lo haces como tu proyecto de mascota, esto está totalmente bien. Nuestro siguiente paso aquí es llevar nuestro proyecto dentro del jarabe. Y en realidad hay muchas posibilidades para esto y quiero usar la más fácil aquí. Lo que podemos hacer, podríamos simplemente empujar nuestro proyecto a GitHub o GitLab, lo que prefieras, y luego clonar este proyecto dentro de nuestro jarabe. Esto es realmente eficiente porque se pueden hacer algunos cambios a un proyecto. Seguro que tendrás uno para almacenar y actualizar tu proyecto dentro del repositorio de Git, lo que en realidad significa que cada vez que quieras actualizar tu proyecto, simplemente saltas aquí dentro de tu consola y dijo Sarah, solo intentas conseguir piscina en alberca tu proyecto y luego lo reinicias. Esto es todo. Espero que ya no supieras cómo desplegar tu proyecto para obtener lab o GitHub. Pero si no escuchas unos pasos cortos, prefiero que mis propios proyectos usen MATLAB, pero es sólo mi preferencia personal. Aquí ya me encerré dentro de GitHub y hicieron clic en Crear Nuevo Proyecto. Ahora aquí solo necesito hacer clic en Crear proyecto en blanco. Y aquí podemos escribir algún nombre. Por ejemplo, podemos nombrar nuestro proyecto L trailer, y no necesitamos cambiar nada aquí. Y en realidad por defecto en GitHub, nos estamos volviendo privados de forma gratuita, y esto es increíble para nuestras necesidades. Ahora aquí dentro de la URL de nuestro proyecto, debemos elegir nuestro espacio de nombres, y ellos elegirán el espacio de nombres de mi usuario. Ahora acabo de golpear Create Project aquí y se crea nuestro proyecto. Y aquí estamos consiguiendo algunos pasos cómo debemos llevar este proyecto para conseguir laboratorio. Ahora debemos saltar dentro de la consola de nuestro proyecto y escribir bien necesitado. Esto inicializará bien para nuestro proyecto. Estoy golpeando aquí y luego recibiendo un mensaje de que mi carpeta ya es un repositorio de Git porque ya tienen mi proyecto dentro bueno, normalmente no recibirás ese mensaje, sino solo el mensaje que inicializamos con éxito. Bueno dentro de este repositorio, Nuestro segundo paso aquí es desplegar todos nuestros archivos dentro de MATLAB. Pero el punto más importante aquí es que debemos agregar para obtener ignorar todos los módulos de nodo dentro de los módulos de nodo cliente y los insights de los módulos de nodo del servidor. No necesitamos subir todas estas bibliotecas dentro del repositorio Git. Es por esto que debemos crear archivo dot gitignore dentro del servidor. Tienen aquí módulos de nodo en este y también dentro del cliente. Aquí, como pueden ver, también tengo dot gitignore, y aquí tenemos un montón de cosas. Fue creado automáticamente por angular con no es necesario cambiar nada aquí. Aquí se señalan los módulos de nodo y esto se ignora, lo que significa que en realidad debemos cambiar solo servidor. Y aquí está nuestro ser ignorado. Después de esto, debemos saltar en la consola de set aquí, ¿verdad? Git agrega punto y agregará todos nuestros archivos a lo bueno. Ahora necesitamos crear nuestro primer commit para esto, podemos intentar git commit am. Y aquí, por ejemplo, proyecto terminado, como pueden ver aquí, estoy recibiendo un mensaje, nada que comprometer, pero no debe ser su caso. En tu caso, obtendrás como cientos de archivos aquí, que ya fueron creados en este proyecto. Nuestro último paso aquí es que puedes ver es agregar esta línea, git remote, agregar origen HTTPS, y luego la ruta completa, pegaré ahora aquí. Y con eso, con éxito enlazamos get lip a este repositorio. Y nuestro último paso aquí será este git push menos uf origin main. Y en realidad como se puede ver aquí, está escrito en principal. Pero para mí por defecto tengo un maestro de sucursal, que está totalmente bien. Es por esto que quiero cambiar el nombre de main a master. Es bueno. Push menos uf origen, maízalos ocultos aquí, Enter, como puedes ver aquí, debo proporcionar en primer lugar, un nombre de usuario de mi usuario de GitHub. Y en segundo lugar, la contraseña es, se puede ver aquí que estoy recibiendo un mensaje es a acceso profundamente básico denegado, lo que en realidad significa que no sucedió. Pero aquí estamos debemos crear un token de acceso personal con repositorio derecho redepositado dentro de GitLab. Si estás usando GitHub por ejemplo, tal vez funcionó para ti. Si no aquí podemos saltar a este enlace slash profile tokens de acceso personal. Como puedes ver, lo abrí aquí y aquí solo necesitamos crear un token de acceso para poder empujar a GitHub. Y aquí por ejemplo, puede crear trello nombre parlante. Y aquí debemos seleccionar alcances. Para nosotros. Debemos crear el repositorio correcto y el repositorio de lectura. Este es el más importante. Estoy golpeando aquí, crear token de acceso, y aquí estamos consiguiendo en la parte superior nuestro nuevo token de acceso. Y afortunadamente ahora debemos volver a cambiar nuestro remoto por este token de acceso para esta tabla, ¿no? Buen Ashram remoto o región, lo que eliminará este origen que creamos aquí en la parte superior con esta línea, y esto se eliminará. Ahora quiero copiar pegar esta línea y así es como lo estamos haciendo con token de acceso dentro de GitHub. Como puedes ver aquí al escribir git remote add origin HTTPS. Aquí debemos en primer lugar proporcionar el nombre del token de acceso. Es por esto que aquí creamos l trailer como nuestro token. Escribiré esto aquí, ultra ley, y ahora aquí tenemos colon y nuestro token de acceso. Voy a copiar pegarlo también de nuestra página donde lo generamos. Y después de esto tenemos exactamente lo mismo que tenemos aquí en la parte superior. Para mi es https github com slash mi nickname slash L dot. Bueno. Aquí es donde aquí escribiré exactamente lo mismo. Y entonces mi repositorio, voy a Trello, vamos a ver esto. Estamos tratando de empujar de nuevo a nuestro repositorio con git push origin master, igual que lo hicimos anteriormente. Estamos golpeando aquí. Y como pueden ver, cuando no se les cuestiona por nuestro nombre de usuario y contraseña, pues ahora estamos empujando con nuestro token de acceso. Y como pueden ver, no tenemos un error. Aquí. Estamos consiguiendo que todo esté resuelto y ahora tenemos éxito en impulso a la rama maestra dentro de origen. Como puedes ver ahora aquí dentro de nuestro proyecto tenemos una rama maestra, y aquí están todos nuestros cambios. Tenemos aquí dos carpetas, cliente y servidor. Y aquí dentro podemos ver todo el proyecto que construimos. Y ahora podemos aplaudir nuestro código a nuestro servidor. Es por esto que aquí quiero volver a saltar dentro de nuestro servidor que acabamos de crear. Y como pueden ver, estoy dentro del almíbar. Entonces antes que nada, aquí quiero crear un nuevo directorio que se llama proyectos. Ahora, quiero saltar dentro este proyecto de directorio y clonar este proyecto aquí. Y en realidad aquí podemos probar y usar con el mismo token de acceso que acabamos de usar. Podemos simplemente escribir dentro de la consola, obtener chmod menos versión dentro de la consola local, no dentro del servidor. Y aquí está nuestro remoto con esta URL de token. Y en realidad sólo podemos copiar pegar esta URL y usarla aquí dentro jarabe aquí solo quiero escribir git clone y luego esta URL que estoy golpeando aquí. Y como pueden ver, no tenemos ningún problema de permisos. Y clonamos con éxito nuestro proyecto aquí dentro de proyectos. Y aquí ahora puedo escribir Ls. Y como pueden ver, tenemos la carpeta L trailer, lo que en realidad significa que tenemos éxito en el extranjero nuestro proyecto a nuestro servidor. Ahora para proceder, debemos actualizar todos los paquetes dentro de nuestro servidor. Y para esto, simplemente podemos escribir apt-get update y presionar Enter. Como puedes ver, todos nuestros paquetes estaban actualizados y ahora quiero instalar, primero de todo en jeans y en segundo lugar MongoDB. Entonces, ¿qué hay en jinx? Este es nuestro futuro servidor web que utilizaremos para nuestro proyecto. Aquí es donde aquí podemos escribir EPT con estilo y jinx. Aquí estamos debemos golpear sí, para instalar este paquete. Como puede ver, nuestro paquete se instaló con éxito. Vamos a comprobar si está funcionando aquí, simplemente podemos escribir service y jinx status. Y como pueden ver, estoy golpeando Enter y estamos recibiendo bastante información. En primer lugar, lo que hay en Jinx y aquí, en ejecución activa, lo que en realidad significa que se instaló con éxito y se está ejecutando ahora nuestro siguiente paso es instalar nuestra base de datos, y fue MongoDB. Este es camino por aquí, apt instalar Mongo DB y estamos debemos confirmarlo con sí. Ahora vamos a revisar el estado de nuestro MongoDB para este fin de semana, correcto, servicio luego estado Mongo DB. Y como pueden ver, también está activo y funcionando, que significa que todo está bien. La siguiente herramienta que quiero instalar se llama n. y en realidad la usaremos para administrar nuestra versión de nodo porque en realidad podría suceder que queramos actualizar nodo y es mucho más fácil de hacerlo mediante el uso de esta herramienta, sobre todo si tienes varios proyectos y necesitas cambiar entre diferentes versiones de nodo. Aquí es donde pegaré esta línea dentro de la consola. Entonces es curl menos l y esta URL, es Gita, tu slash n en estilo bash. Estoy golpeando Enter y estamos recibiendo un error. Por eso es lo que debemos hacer. En primer lugar debemos ejecutar apt install. Y aquí se construye esencial. Estoy golpeando Enter y debemos confirmarlo. Ahora como puedes ver, está instalado para que podamos probar e instalar. Y otra vez, estoy golpeando Enter y pongo. No tengas ningún error. Aquí. Simplemente podemos escribir sí y proceder a instalarlo. Como se puede ver aquí, por defecto, n instalado para mí, saber, 16151. Y en realidad este es exactamente el mismo nodo que tienen localmente. Y siempre te recomiendan altamente tener la misma versión de nodo en tu servidor de producción y en entorno local. En este caso, evitarás molestias y caja mágica. Y los dos últimos que queremos instalar se llaman PM2.5. Este es un gestor especial para reiniciar nuestros procesos de nodo y lo usaremos para iniciar nuestro señalizado. Aquí es donde aquí podemos escribir npm install menos g, lo que significa globalmente VM2. Y como puedes ver aquí, estamos recibiendo un comando de error npm no encontrado, y lo mismo para el nodo de comando no encontrado. Si estoy justo aquí, nodo menos versión. Y en realidad después de la instalación de n, tanto a nivel nacional como consiguiendo Node y npm. Pero debemos reiniciar nuestra terminal. Por lo que debemos desconectarnos del servidor y volver a conectarnos con el fin de traer oportunidad conocida dentro de path. Aquí es donde simplemente podemos escribir exit y luego nuevamente, usar SSH root y nuestra dirección IP. Keaton aquí Entra y debemos proporcionar nuestra nueva contraseña. Y como se puede ver aquí, estoy dentro y ahora puedo escribir nodo menos moda y luego obtener la versión del nodo y lo mismo con NPM menos versión, lo que en realidad significa que ahora podemos instalar TM2 nuevo con npm instalar globalmente VM2. Ahora no tenemos un error y se está instalando nuestro PM dos. Ahora, debemos instalar todos nuestros paquetes para el cliente y para el servidor. Y para esto debo saltar de nuevo dentro de la carpeta de proyectos. Y aquí como pueden ver, tengo nuestro proyecto de ultra lab. Como pueden ver aquí, estoy dentro del tráiler y tienen cliente y servidor. En primer lugar, quiero saltar y decir servidor. Y aquí tenemos una gran cantidad de archivos, por lo que podemos simplemente escribir y estilo de pagos e instalará todas las dependencias para nuestro servidor. Como puedes ver, todo está instalado ahora debemos saltar dentro de nuestro cliente. Por lo que estoy escribiendo cliente de CD y después de este npm instalar de nuevo, e instalaremos todos nuestros paquetes front-end para Angular. Por lo que todos nuestros paquetes se instalaron con éxito y ahora debemos crear una configuración para nginx para nuestro proyecto. Y para ello podemos escribir cd slash UTC y jinx Cohen's d. y aquí dentro debemos crear un nuevo archivo. Y para ello podemos escribir Tij y luego L trailer dot com.com. Y en realidad aquí para abrir y editar archivo, debemos usar algún editor de la consola. Y voy a escribir aquí nano y luego el nombre de nuestro archivo, que es el viejo trailer, tranquilo, tranquilo. Estoy golpeando aquí y así es como se ve este editor. Entonces aquí podemos simplemente escribir algo y luego seguro. Y en realidad aquí quiero ya pegar el conflicto muchas veces jinx el tipo preparado previamente, y así es como se ve. Entonces aquí tenemos un blog del servidor. Ahora dentro hemos escuchado AT, que es una parte AT por defecto. Y aquí es donde miente nuestra raíz de frontend. Aquí está slash route slash projects donde ya lo creó. Aquí la carpeta es fuerte. En realidad es carpeta Ultra baja que acabamos de crear. A continuación, barra diagonal de cliente y aplicación de barra diagonal. Y en realidad debemos construir también más adelante nuestro cliente después de instalar paquetes. Por lo que nuestro script de tipo se convertirá a JavaScript, y estará aquí dentro de esta carpeta, dentro de la aplicación de barra diagonal. Por eso ahora está totalmente bien. Aquí estamos resolviendo nuestro index.HTML y aquí el nombre del servidor, el apellido es realmente importante porque en realidad este es nuestro dominio. Se trata de L.com y www L Trello.com. Y en realidad no tenemos un dominio en absoluto. Y esto está totalmente bien porque en realidad podemos dentro de nuestra máquina local, dentro del archivo host, simplemente escribir una dirección APR del servidor. En este caso, no necesitamos molestarnos con la estrategia pronto como dominio real, y funcionará exactamente igual que con el dominio. Después de esto tenemos ubicación. Por lo que estamos tratando siempre de cargar nuestro index.HTML. Y aquí tenemos API de barra diagonal de ubicación. Y en realidad esto es importante porque aquí estamos diciendo, ok, Cuando seamos campeones en L Trello.com slash api, entonces debemos proxy nuestra petición a este servidor web y este servidor web estaremos usando dentrode nuestro backend. Este es el host local para la API de barra diagonal 1001. Después de esto, tenemos exactamente lo mismo pero para las solicitudes de E/S de socket. Y aquí tenemos http localhost 4,001, y aquí tenemos algunos encabezados. Y en realidad esta es toda la configuración que necesitamos para In Jinx. Entonces ahora la pregunta es ¿cómo podemos guardar este archivo? Y para ello, en primer lugar, queremos dar click en Control O. y aquí en la parte inferior vemos nombre de archivo para escribir ys l Trello com conf, donde apenas golpeando enter. Y esto está totalmente bien. Se salvó. Ahora aquí quiero dar clic en Control X, y ahora estamos fuera, estamos de vuelta dentro de nuestra consola. Y ahora si necesitas comprobar si todo se guardó con éxito, puedes escribir cat y luego voy a Trello, estoy golpeando Enter y nos estamos metiendo dentro de la consola esta bonita salida con el contenido de nuestro archivo, pero no es todo eran también debe cambiar un usuario dentro de la configuración de genes. Esto es camino aquí. Quiero salir de esta carpeta de aquí quiero volver a escribir nano, pero en nuestro caso ahora será en jinx.com. Y en realidad esta es la configuración por defecto, muchas veces Jinx. Y aquí queremos cambiar sólo una sola línea. Aquí en la parte superior tenemos un dato de usuario y queremos cambiarlo a ruta de usuario con la que estamos encerrados aquí, y necesitamos volver a guardar este archivo. Entonces Control O Enter, luego Control X. Ahora debemos reiniciar En Jinx para aplicar la configuración que hicimos. Es por esto que podemos escribir servicio y jinx restart. Estoy golpeando Enter y no tenemos ningún error. Y ahora no debemos olvidar construir nuestro frente. Y es por esto que debemos saltar de nuevo dentro proyectos de slash route slash. Y aquí está nuestro L trailer y Cliente. Y en realidad estamos dentro de cliente. Y para construir nuestro proyecto Angular, simplemente podemos ejecutar npm, ejecutar build. Y como pueden ver aquí, estamos llamando en GI Bill, que es el comando de Angular, y construirá para nosotros todo el proyecto dentro de esta carpeta, como pueden ver aquí, después de construir, Estoy recibiendo bastantes errores dentro de la consola. Y en realidad el principal problema es que es una construcción de producción y la nómina no existe en el tipo de producción booleano, lo que en realidad significa que no actualizamos nuestros entornos, Config dentro de nuestro proyecto. Aquí es donde es real y agradable que tenemos ahora bueno, así que podemos hacer ajustes rápidamente. Aquí quiero volver a saltar dentro de nuestro proyecto y estamos interesados en nuestros entornos de origen parcial del cliente. Aquí tenemos dos expedientes. Medio ambiente, sí. Y a la derecha, abriré protesta de ambiente. Aquí. Como puedes ver a la izquierda, proporcionamos URL de API y URL de sockets, pero no los proporcionamos a la derecha. Y en realidad sólo los copiaré de izquierda a derecha aquí. Ahora, tenemos estas propiedades dentro de nuestra configuración. Después de esta herida deben desplegar estos cambios al salto bueno para discapacitados en el proyecto local, ¿no? Git add dot, agregará sólo todos los archivos localmente y después de esta confirmación. Entonces git commit menos m y por ejemplo, entorno actualizado. Yo estoy golpeando aquí, entra a nuestros conmutados ellos. Después de esto podemos simplemente escribir git push origin master y presionar Enter. Y nuestros cambios ya están dentro de GitHub o GitLab. Después de esto, podemos saltar de nuevo dentro nuestro servidor, el cual fue ingresado. Y aquí quiero salir del cliente. Y aquí estoy dentro de nuestra pequeña carpeta de tráiler. Ahora acabo de probar Git pool y estamos trayendo nuestros cambios como puedes ver aquí, proteasa de ambiente dentro de nuestro servidor. Y después de esto, debemos volver a intentar ejecutar build, y es npm run build, pero no debemos olvidar, debemos saltar dentro del cliente, como puedes ver, no hay tal archivo o paquete de directorio, Jason, porque no soy cliente interno. Por lo que el cliente y aquí npm ejecutar construir. Ahora como pueden ver, no tenemos ningún error y estamos recibiendo un mensaje de que todo estaba terminado. Y en realidad aquí debemos revisar lo que tenemos dentro de nuestra carpeta dist. Por lo que ls disminuyó. Y como pueden ver aquí, tenemos todo trailer y dentro de todo Trello, tenemos todos estos archivos. En primer lugar, nuestro index.HTML, y luego nuestros activos, pesebres y demás. Pero en realidad significa que tenemos un pequeño problema dentro de nuestra configuración interior y jinx porque no se rodó nuestra carpeta raíz, esta aplicación de barra diagonal. Y en nuestro caso aquí tenemos una barra disminuida, voy a Trello, lo que en realidad significa que debemos actualizarla ahora. Por lo que debemos probar Nano slash, ETC. Y jinx Cohen's d. y aquí tenemos nuestra L Trello Comic-Con. Estoy golpeando Enter y de nuevo abrí nuestra configuración. Y aquí dentro de ruta debemos probar esta slash l Trello. Ahora estoy golpeando Control O, Entrar Controlar fugas y debemos reiniciar y jinx, así servicio y jinx reiniciar. Así que ahora nuestro frontend está completamente listo y simplemente necesitamos ejecutar nuestro backend y no necesitamos comenzar de alguna manera nuestro fronted porque en jinx lo haremos rápido. Pero para empezar, no lo hará porque en realidad dentro de nuestro front-end con solo tener unos archivos estáticos como HTML, JavaScript y CSS. Pero dentro de nuestro backend tenemos nuestro observable. Por eso quiero saltar dentro de nuestro back-end. Entonces aquí servidor de CD, y aquí necesitamos arrancar nuestro servidor con PM2.5. Pero en realidad aquí también tenemos un problema dentro de nuestro servidor. Tenemos TypeScript con no tener archivos JavaScript y en realidad womb debe convertir todo nuestro TypeScript a JavaScript antes de que empecemos a ejecutarlo sin PM2.5. Y en realidad para esto se debe crear en su comando. Es por esto que debemos saltar de nuevo dentro de nuestro proyecto e ir dentro del paquete del servidor, Jason. Y aquí tenemos un guión para empezar, pero no tenemos un guión para Build. Es por esto que aquí podemos simplemente escribir build y aquí el script será TAC. Entonces, ¿qué es TAC? En realidad es un TypeScript y simplemente traspasará todo el código que tenemos dentro este proyecto con este ts config. Como puedes ver aquí es la salida, es la carpeta dist. Esto está completamente bien rápido. Pero después de que hicimos esto cambia. Debemos saltar en set console y hacer exactamente las mismas cosas otra vez, antes que nada, obtener cabeza, luego git commit, y luego git push. Entonces con estos comandos, estamos trayendo nuestros cambios dentro get wrapper. Ahora estamos saltando hacia atrás en lugar de una encuesta. Aquí vamos a salir y estoy jalando de nuevo mi proyecto. Entonces estamos bien para irnos ahora, podemos saltar hacia atrás y dicho, oh, carpeta del servidor. Y aquí podemos intentar construir nuestro back-end. Aquí es donde aquí puedo simplemente escribir npm run build, y transpira mi script type a mi JavaScript. Como pueden ver aquí, ya está hecho. Ahora sólo podemos probarlo un dist menos y comprobar lo que tenemos. Y como puedes ver aquí, vemos todos nuestros archivos que fueron creados, pero con la extensión js, lo que en realidad significa que esto está totalmente bien y estamos debemos comenzar dist slash server.js y lo hará iniciar nuestro proyecto. Queremos usar PM2.5. Aquí, aquí es donde simplemente podemos ejecutar PM al espacio, iniciar espacio. Aquí se disminuirá la búsqueda de barra diagonal. Sí, estoy golpeando Enter y estamos recibiendo mucha salida. Como puedes ver aquí, esta es toda la salida de PM dos. No importa, pero aquí en el fondo vemos desovar PM a demonio. Se satanizó con éxito y estamos empezando con esta oleada en modo 4k, y ya está hecho y aquí está nuestro servidor. Y en realidad por qué estamos usando aquí P M2, no solo nota proceso podríamos escribir aquí nodo y luego por ejemplo, la oleada, sí, esto está totalmente bien. Pero pm túbulo, en primer lugar, los riesgos comienzan para nosotros, este servidor web si está roto por alguna razón. En segundo lugar, PM dos es más adecuado para las aplicaciones de producción. Entonces lo que hicimos aquí, en primer lugar, construimos con éxito a nuestro cliente y en segundo lugar, iniciamos nuestro backend. Y el último paso que queremos hacer es abrir un navegador. Pero simplemente podemos abrir un navegador porque debemos apuntar nuestro dominio, L Trello.com, que no existe. No lo compramos de nuestra máquina local a nuestro servidor. Y en realidad aquí debo saltar dentro de la consola localmente. Y abrir archivo host, por ejemplo, dentro de Linux y macOS, es line in slash, hosts de barra ETC. Entonces aquí cómo se ve para mí, si estás en Windows, aquí está tu ruta, es el Disco C, sistema Windows, por lo que los dos drivers, ETC, host y estás abriendo este archivo y esto es exactamente como mi archivo aquí. Y como pueden ver aquí, ya probé este proyecto. Por eso tengo esta línea. Entonces aquí tengo un dominio, L Trello.com. Esto es lo que estamos registrados, pero esta es la antigua dirección API. No lo necesito. Debo saltar de nuevo dentro de mi panel de cabeza SNA y copiar este dominio y simplemente pegarlo aquí, que en realidad significa en nuestra máquina local cuando estamos saltando dentro la ultra baja dosis vienen cuando no buscando en la tabla de búsqueda DNS, solo estamos apuntando a nuestra dirección IP del servidor. Entonces ahora el momento de la verdad, Abramos nuestro proyecto. Estoy escribiendo dentro del navegador L Trello.com. Y esto, pueden ver que este es nuestro proyecto. Está funcionando. Y en realidad quiero abrir aquí consola para que podamos comprobar si tenemos algunos errores. Y en realidad aquí tenemos un estrecho en host local para 1001 usuarios de elevación de hielo slushy de origen, voy a Trello y en realidad como se puede ver, red, esta es nuestra petición a API. Esto es http localhost 4,001 pares slushy plus user. Y obviamente esto es fuerte. Esto no es lo que necesitamos usar. Es por ello que debemos saltar de nuevo dentro de nuestro proyecto e ir dentro del cliente localmente y cambiarlo. Por lo que aquí está la fuente de nuestro cliente, medio ambiente y medio ambiente protesta. Aquí. Obviamente este anfitrión local no existe. Lo que tenemos ahora aquí es un CTP L Trello.com slash API y lo mismo aquí, http L Trello.com. Y entonces no necesitamos proveer aquí un puerto. Y ahora debemos volver a cometer estos cambios. Es por esto que git add git commit y luego git push. Ahora queremos saltar a nuestro servidor, salir y decir carpeta Trello y correcto, obtener ***. Pero después de esto, debemos construir nuevo a nuestro cliente porque cambiamos a nuestro cliente. Y para hacer esto, podemos escribir c, d cliente. Y ahora de nuevo, npm ejecuta build y simplemente generará archivos estáticos rápidos para el frontend, nuestro proyecto se construye con éxito. Estoy recargando la página aquí y no tenemos ningún error. Tenemos aquí para 01, para HTTP L trailer com slash APIs slash user. Esto está totalmente bien. No estamos encerrados. Ahora intentemos registrar usuario. Entonces aquí estoy escribiendo f2 en gmail.com. Aquí está nuestro nombre de usuario y contraseña 123 ocultos aquí registrarse. Y en realidad funcionó. Y esto es importante comprobarlo porque significa que aquí configuramos con éxito MongoDB porque esta solicitud de post es entrar en la API y esta es nuestra respuesta. Y aquí estamos recuperando la a d de usuario guardado y aquí el token. Por lo que nuestro backend y DPI también funcionan. Ahora aquí tenemos un tablero y aquí crearé mi primer tablero. Vamos a darle a Enter y estamos consiguiendo nuestro tablero, podemos abrirlo. Y aquí estamos dentro de la pizarra. Ahora vamos a comprobar si nuestro socket IO está funcionando para esto. Quiero duplicar ese toque aquí e intentar crear una lista. Entonces aquí por ejemplo, primera lista, estoy golpeando aquí por lo menos, y estamos consiguiendo la lista. Y también en el siguiente paso, estamos obteniendo exactamente la misma lista. Ahora aquí en el segundo mandato, podemos crear una nueva tarjeta. Por ejemplo, primera carta, estoy golpeando aquí, agrega y estamos recibiendo esta tarjeta en ambas páginas. Ahora aquí podemos abrir nuestro modelo y está funcionando como se pretendía, lo que en realidad significa que implementamos con éxito nuestro proyecto a la producción. No fue fácil, pero esto es un hueso desnudo de cualquier proyecto que puedas desplegar. No importa qué vista angular reaccione. Cualquier cliente que quieras, JavaScript simple o cualquier backend, siempre será muy similar. 48. Proyecto: Enhorabuena, has terminado con éxito este curso, y realmente creo que eres increíble y aprendiste bastantes cosas. Ahora seguro aprendiste a crear tu proyecto full-stack con Node.JS en el backend y expresarte a crear tu proyecto full-stack como un servicio. Además, seguro que puedes usar fácilmente socket IO porque lo usamos bastante en el cliente. De nuevo, mucha experiencia respecto a n cooler TypeScript, genial e interfaces y creando un buen estado reactivo. Pero obviamente no es el final. Como buen profesor, debo darte tarea porque en realidad si quieres mejorar tus habilidades como desarrollador, debes aprender y crear tus propios proyectos. Y aquí tienes dos posibilidades. Puedes crear tu propio proyecto desde cero. Esto es lo que realmente recomiendo, o puedes implementar funcionalidades en este proyecto. Y en realidad hay beneficios en ambas posibilidades. Si sigues implementando este proyecto, ya tienes una arquitectura realmente buena y te será mucho más fácil. Y en realidad la cantidad de característica que puedes implementar en este proyecto es realmente tremenda. En primer lugar, puedes implementar aquí diferentes roles. Por ejemplo, al igual que los usuarios administradores que pueden crear, por ejemplo, equipos, lo que en realidad significa que comienzas a organizar a las personas dentro de Teams, igual que en el Trello real también, por ejemplo, en el , puede implementar arrastrar y soltar para tareas dentro de la placa. La variante más fácil para ti sería abrir la aplicación oficial de tráiler y solo mirar su conjunto de características y simplemente implementar algo que sea interesante para ti. Y en realidad, esto es súper importante y está relacionado con tu propio proyecto. Si planeas hacer tu propio proyecto, te recomiendo encarecidamente que implementes algo que realmente te interese. Porque si tu proyecto no es interesante para ti, no lo harás largo periodo de tiempo. Y si estás buscando ideas para tus propios proyectos, interrumpla en muchos de ellos. Por ejemplo, puedes implementar un shock de comercio electrónico, o tal vez una librería, un clon de netflix, o una aplicación financiera para administrar tus gastos. De verdad espero que te haya gustado este curso y hayas aprendido mucho y te veremos en mi próximo curso.