Transcripciones
1. Qué vamos a hacer: Construirás una gran aplicación la cual es una plataforma de comercio electrónico. Y con esta plataforma de comercio electrónico, podrás hacer algunas animaciones. Tendrás banner, puedes controlarlos. Tendrás una categorías para tus productos y
tendrás un banners de productos destacados y además, cuando vayas a una categoría específica como esta, verás solo los productos que están bajo esa categoría. Y además, podrás ver el producto destacado aquí, el cual podrás controlar en el panel de administración como te mostraré y además, cuando vayas al detalle del producto, verás todo el detalle sobre su producto que como ves con nombre o título y la calificación del producto, esa cantidad. Y puedes añadirlo a tu carrito y verás la descripción completa, cual podemos estar justo en el panel de administración. Y además tendrás una galería del producto. Por lo que podrás construir esta galería de tu mano. No vamos a hacer esta galería usando alguna biblioteca. No, lo vamos a hacer a mano. Aprenderás a usar la realidad de los componentes en Angular. Y además, veremos cómo ir a su carrito y agregar artículos a su carrito. Y verás también las notificaciones y las notificaciones de Toast. Y podrás ir al carrito. Puedes administrar tu carrito, puedes eliminar artículos de la tarjeta. También puedes cambiar la cantidad y todo se
calculará inmediatamente después de actualizar la cantidad. Todo se observa. Por lo que vamos a utilizar nuestro x js para observar nuestro carrito y se actualiza inmediatamente cada vez que el usuario está actualizando o agregando un producto al carrito. Además, tendremos una página de pago donde el usuario podrá ingresar sus datos y realizar un pedido. Y también puede hacer conseguir el pedido y obtener una página de agradecimiento. Y además, trabajaremos con el panel de administración. Panel de administración contendrá todo el tablero que necesita. Cuántos pedidos, cuántos productos provienen todos de la base de datos, de datos de rayón, nada está codificado. Y además, aprenderás a hacer el panel de productos para que puedas administrar el producto, eliminarlos o editarlos, o incluso agregar nuevo producto. Al agregar nuevos productos, también
podrás usar un gran componente, como estos botones de interruptor desplegable de grados. Utilizarás también un gran editor. Por lo que reflejará para ti toda la información en el front end. Por lo que no tendrás dolor de cabeza para peinar el componente o la descripción del producto, pero verás cómo puedes dejar el usuario estile con un editor fácil de usar como ves aquí. Y además, aprenderás a subir imágenes a tu servidor. Y luego podrás usar todas esas imágenes y luego crear una galería para tu aplicación y para tu producto también. Algo diferente con categorías, usaremos los iconos. Usaremos también algunos filtros en la mesa o clasificación. Y además, usarás también un recolector de color, como ves aquí. También podemos utilizar este gran componente para recoger colores y actualizar también las categorías. Todo el trabajo es con datos reales, nada es falso, nada está codificado. Vamos a aprender realmente como un práctico. Y sobre eso, aprenderás una gran estructura con Angular. Cómo puedes estructurar tus archivos, cómo puedes construir un estilo compartido, y cómo puedes construir unos módulos y componentes reutilizables, que se pueden construir como cualquier gran empresa. También, hay órdenes. Podrás gestionar los pedidos y luego podrás cambiar el estado de
los pedidos y también se reflejará en el panel de administración. Y verás también el detalle del pedido. Tomaremos complicada estructura de datos de la base de datos utilizando nuestra API con NodeJS y también el cliente M4 y conectando la información del cliente con el pedido. Y además, haremos una gestión para el usuario. Podremos ver toda la gestión de los nuestros usuarios. Y podremos asignar el rol de los usuarios si es administrador o no. Por lo que podrá buscar en nuestra página o en la página de administración o no. Y además proporcionaremos con como un gran look en, usaremos el login, la autenticación, los Web Tokens para
autenticar al usuario y especificar si el usuario es administrador o no. Todo eso. Lo aprenderás a través de Angular, a través de un repo X Mono. Y aprenderás también a construir una gran aplicación como esta aplicación, aprenderás muchas cosas. Aprenderás estilo. Aprenderás a estructurar el proyecto. Verás cómo las grandes empresas están codificando, como cómo están creando módulos compartidos. Y podrán desarrollar más rápido, más y más aplicaciones. Al final de este curso, aprenderás muchas cosas, NodeJS, MongoDB, y también angular, y luego un X Mono repo y RX y también los observables RX JS. Los entenderás en la práctica. Entonces, ¿estás listo? Empecemos por ello.
2. Qué es la pila de MEAN Stack: De acuerdo, en esta conferencia sabremos qué es la pila de medios. Pero primero, permítanme presentarles ¿qué es una pila tecnológica en general? Un stack tecnológico es una lista de todas las tecnologías y servicios que
regresaron que se utilizan para construir y ejecutar una sola aplicación. Por ejemplo, el lado social, Facebook, está compuesto por combinación de marcos de codificación y lenguajes, incluyendo JavaScript, HTML, PHP, y React js. Y esta es la pila de tecnología de Facebook. Por ejemplo, he enumerado aquí una media stat, que es MongoDB Express Angular Node.js, como vamos a explicar más adelante, lamp está usando las tecnologías sistema operativo Linux, servidor Apache, base de datos
MySQL, y como Will PHP lenguaje de programación también. Casado es MongoDB, Expresar, reaccionar o Reaccionar Nativo y NodeJs. Entonces, ¿qué es el medio stat significa que la pila está usando para las tecnologías. Entonces para base de datos donde voy a almacenar mis datos, estoy usando MongoDB. Mongodb es una base de datos muy escasa, que me está brindando muchas funciones que puedo recuperar y filtrar mis datos fácilmente. Express se utiliza para construir API web donde estoy obteniendo y creando o borrando datos de mi base de datos. Y NodeJS es el famoso marco para construir un back-end aplicaciones y ejecutar servidores web. Y por último, Angular. Angular es un propósito principal de nuestro curso. Vamos a aprender mucho sobre Angular. Angular es un framework front-end proporcionado por Google para construir principalmente aplicaciones web y también aplicaciones multiplataforma para construir su aplicación en la web o en dispositivos móviles. Proporcionarle una gran estructura para diseñar su aplicación y hacer que sea fácil combinarse completo utilizando unas grandes herramientas y además proporcionando un rendimiento muy rápido y construcciones de producción seguras. Aprendizaje. Todas esas tecnologías por sí solas no cumplirán con su experiencia para aprender cómo estas tecnologías pueden trabajar juntas. Porque si no haces ningún trabajo práctico o un proyecto del mundo real, no los aprenderás en real. Simplemente verás cursos que solo están leyendo documentación de cada tecnología. Pero aquí en este curso, nos ocurrió la idea de traer un sitio web de comercio electrónico completo funcional. Y con este sitio web, usarás el MongoDB y conectarás con Express. Y express se conectará con Angular y todos ellos interactuando usando Node.JS. Toda tecnología tiene responsabilidad. Y vamos a ver en detalles cómo implementar esta responsabilidad en una aplicación funcional del mundo real. De lo contrario, estoy seguro de que no lo aprenderás. Necesitas un curso de aplicación del mundo real para aprender eso.
3. Quién puede tomar este curso: De acuerdo, en esta conferencia, quiero explicar quién puede tomar este curso. ¿ Cuáles son los requisitos del curso? Entonces para mí, diría que si ya me dieron un pequeño Angular básico llama sobre como un conocimiento básico de Angular, entonces este curso me conviene. Al igual que necesitas un Angular muy, muy básico. Al igual que necesitas saber qué es componente, qué es el servicio, ¿qué es el módulo? Incluso yo los explico también rápidamente. Pero cuando hagas algo práctico, los
entenderás. Lo hice de alguna manera, como al principio. Se los explico con mucho detalle. Y luego por el tiempo, porque vamos a crear múltiples componentes, múltiples servicios y múltiples módulos, te acostumbrarás a ellos. Es necesario conocer también un conocimiento básico con TypeScript. Entonces en este caso, conocimiento
básico con TypeScript y JavaScript es realmente suficiente para inscribirse e ir a este curso. También. Necesitamos un estilo y plantillas. También se requiere conocimiento de Html y CSS. Entonces entenderás el código CSS que estoy escribiendo, incluso lo estoy explicando punto por punto y te
estoy mostrando cómo si estoy poniendo padding top, ¿qué pasará? Cómo si cambio el color de la fuente, cómo hago una caja-sombra, cómo hago borde para el botón, etcétera. Por lo que toda esta información tres que debes conocer antes de inscribirte al curso. De no ser así, preferiría que siguieran este curso muy lentamente, porque incluso eso, les expliqué todos los puntos que aquí se mencionan. Pero prefiero estudiantes que tengan un conocimiento muy básico sobre angular. Y además quisiera mencionar que este curso se hace de manera principiante. No lo hice muy complicado. Por ejemplo, no estoy usando una estructura de gafas muy complicada y también gusta cómo puedo hacer que las relaciones entre clases tengan mucha extensión y herencia. No, yo no hice eso. Lo hice con un conocimiento básico. Entonces, ¿quién está recién terminado Curso angular, teóricamente o práctico? También puede ver cómo se pueden implementar las cosas y ampliará tus conocimientos sobre Angular para construir más y más aplicaciones y sabes estructurarlas también. Esta plática se aplica en la parte back-end sobre NodeJS. Y NodeJS, vamos a empezar de cero y ya
verás lo que estoy significando con cada palabra que estoy haciendo ahí. Entonces eso es todo. Si tienes algún conocimiento, también, este curso es bueno para ti. Pero yo, como les dije, hay
que seguirlo muy despacio. Es necesario repetir personal múltiple. Necesitas repetir una y otra vez algunos videos. Entonces obtendrás la información y entenderás que viene Ailey más fácil para ti después de eso.
4. Instalación de Nodejs: Para iniciar el desarrollo, siempre necesitamos la gestión de paquetes. El manejo de paquetes viene con la aplicación NodeJS. Por lo que para instalarlo solo juega en Google NodeJS y ve a Descargar. Y verás la descarga para todos los sistemas operativos. Por ejemplo, tengo aquí para Windows y también tengo para Mac OS. Existen dos tipos como LTS, que se recomienda para la mayoría de los usuarios, y el actual, que son las últimas características. Mejor conseguir siempre una versión estable, la cual se recomienda para la mayoría de los usuarios. Aquí, puede elegir su instalación en función de su sistema operativo. Y será simplemente una aplicación, como cualquier aplicación que puedas instalar. Entonces después de eso, puedes descargar esta aplicación y ejecutarla. Y será como cualquier instalación normal de aplicación. Entonces para estar seguro, después de eso terminas todos estos pasos. Necesitas ejecutar algunos comentarios de MPM. Por lo que para ejecutar comandos mpm, podemos usar Visual Studio Code. Después de abrir el código de Visual Studio, verás aquí los últimos proyectos que tienes. Pero por ejemplo, necesitamos abrir el terminal del código de Visual Studio. Entonces iré aquí a decir Control y J. Y entonces tendré abierta la terminal. Y en terminal, podemos, por ejemplo, colocar un comentario NodeJS. Por lo que podemos decir, por ejemplo, la versión del NPM. Y obtendríamos el detalle completo virgen sobre el Node.js instalado. Después de eso, podremos utilizar la administración de paquetes NodeJS, donde hay muchas bibliotecas que podemos utilizar en nuestra aplicación y desarrollos.
5. Configura MongoDB Atlas: Para nuestra tienda electrónica, necesitamos tener una base de datos. Y la base de datos, no necesitamos instalar ningún software. Usaremos MongoDB, Atlas. Mongodb ofreciendo ahora un almacenamiento de base de datos en línea, lo que significa que la base de datos ya está en la Nube. Lo que necesitamos hacer sólo para ir a la URL que adjunté con esta conferencia y crear una cuenta aquí y registrarnos y luego buscar en tu cuenta. Después de iniciar sesión, verás esta pantalla que necesitas para crear un proyecto. Por lo que antes que nada, necesitas crear un proyecto para nuestra tienda electrónica. Entonces vas aquí y dices, quiero un proyecto que es, por ejemplo, cada hub. Y doy clic en Siguiente. Y luego creando el proyecto. Después de eso, el proyecto requiere un clúster. Por lo que necesitamos construir un cluster donde ofrecemos nuestra base de datos. Entonces aquí, hay clústeres compartidos, que es de forma gratuita. Puedes usarlo y elegir el servidor más cercano a tu país. Por ejemplo, usaré este, el predeterminado. Y luego después de crear el clúster, estamos listos para crear nuestra base de datos. El banco de datos en MongoDB llamado colección. Por lo que necesitas acudir a las colecciones y crear una nueva en base a tu necesidad. Ya tenemos uno que creamos para el curso en el proyecto 0. Aquí hay colecciones en creé múltiples bases de datos. Por lo que tu parte es solo crear una cuenta y crear cluster y crear tu propia colección, que usaremos en el curso. Veremos más adelante cómo hacer la conexión entre nuestro código back-end y el MongoDB en la Nube.
6. Instalación de PostMan para probar las aplicaciones de nuestra API: Cuando estamos creando API, necesitamos probarlas. Puedes probar tus API con una aplicación front-end como React o Angular o Vue js. Pero vamos en este curso a empezar primero con el backend. Por lo que la mejor manera de hacer eso y probar las API es instalar una herramienta llamada Cartero. Vayamos a Google. Vas a la descarga Cartero. Y aquí lo encontrarás en base a tu sistema operativo. Por lo que aquí elegirás descargar la aplicación. Y después de que se descargue, será una configuración normal como cualquier aplicación. Después de abrir el archivo descargado, recibirás una notificación si estás usando Mac OS. Y te pedirá que muevas esta aplicación a la carpeta de aplicaciones. Y después de eso, verás que esta aplicación se encuentra en tu carpeta de aplicaciones. Lo mismo para Windows. Es normal instalar como cualquier aplicación pequeña. Después de abrir la aplicación, podrás probar API. Vamos a probar uno. Cuando vayas a Google y tecleas JSON placeholder, verás que el primer enlace es algunas API falsas. Por lo que puedes probar un GET solicitudes o publicar solicitudes. Entonces probemos este. Aquí lo dice. A modo de solicitud GET, voy al Cartero y luego abro una nueva pestaña con la solicitud GET y coloco el enlace que copié del placeholder JSON y presiono Enviar, obtendré una respuesta. Esta respuesta viene como un JSON. Y de la misma manera, vamos a construir nuestras API.
7. Comenzar con el fondo: Bienvenido a la tercera sección de este curso. Vamos a tener introducción sobre empezar con el back-end. ¿ Qué es un backend? En ingeniería de software, los términos front-end y back-end hacían referencia a una separación de preocupaciones entre la capa de presentación y la capa de acceso a datos. Por lo que cualquier aplicación web y aplicación móvil se considera como un front-end. backend es la parte donde estoy sosteniendo datos. De nuevo, una base de datos o un servidor de archivos. Y el servidor en sí puede ser considerado como un back-end. Entonces vamos a tenerlo así. El front end está mostrando los datos y el backend está sosteniendo estos datos en algún lugar seguro llamado servidor. Necesitamos de alguna manera manejar estos datos que se almacenan en el servidor y servirlos al cliente. Y usando algunos lenguajes de programación como Java, SQL, y también no GS, que vamos a hacer en este curso, para enviar estos datos al cliente de una manera hermosa, para renderizar en HTML, CSS, y Bibliotecas JavaScript. Por lo que en la próxima conferencia, veremos cómo el front end puede comunicarse con el backend para agarrar estos datos, que se llaman API RESTful.
8. Descripción de nuestra API cuento: Echemos un vistazo a nuestra API RESTful para ver cómo intercambiar datos entre el cliente y el servidor. ¿ Cuál es la arquitectura de RESTful API? Tenemos el cliente y tenemos un servidor, y están intercambiando datos a través del protocolo HTTP. Este es el concepto básico de RESTful API. También hay operaciones de inclusión para crear datos, leer datos, actualizar datos, y eliminarlos. Sus operaciones se pueden realizar a través del protocolo HTTP. Existen métodos específicos de protocolo HTTP que hacen estas operaciones, que estamos llamando operaciones al principio, ¿cuál es la diferencia entre RESTful API y la ruta front end? El RESTful API está trayendo datos. El front end sequía está mostrando los datos o renderizando una página específica. Al abrir su navegador y poner enlace RESTful API, si tiene acceso para obtener estos datos, entonces obtendrá una cadena que consta de archivo JSON o XML. El protocolo Http es capaz de renderizar una página con HTML CSS y traer sus datos. Por lo que los métodos HTTP en general, son GET, post, PUT, y delete, que son las operaciones crudas. Pero en los métodos HTTP, se
les llama así. Por lo que estoy enviando una solicitud a la base de datos o
al back-end en general para obtener a través de rest API algunos datos. Por ejemplo, obtener una lista de productos a través de la API, me dará matriz de lista de productos. Obteniendo un solo producto, pasando por alto el ID de este producto, me
va a dar archivo JSON con todo detalle del producto. Cuando quiero actualizar un producto, envío una solicitud PUT con la idea del producto y ademas adjuntando los nuevos datos. Y la respuesta será el mismo producto, pero con un dato diferente. Y eliminar un producto es simplemente pasar el ID del producto con solicitud de eliminación. Creando un producto, necesidad de publicar un nuevo producto. Por lo que estoy usando la ruta principal de la API de los productos y luego estoy pasando cualquier dato nuevo, los datos que por ejemplo, nombre de su producto y la imagen, y eso es estanques, será un nuevo ID con el nuevo nombre del producto y por supuesto, la imagen. Esas son nuestras solicitudes API para obtener los datos o publicar o eliminar o actualizar datos en el servidor. Y estoy usando api slash v1, que significa la versión uno. Entonces cuando quieras actualizar tu API en el futuro, agregas una nueva versión. Por lo que los usuarios siguen siendo capaces de utilizar las versiones anteriores de su API. Lo mismo para los pedidos y los usuarios. Entonces en este caso, tienes toda la misma secuencia, pero solo necesitas planear tus datos, ¿verdad? Crear un servidor web con NodeJS es muy sencillo. Veamos eso en la próxima conferencia.
9. Crear el servidor de Backend con Express: Empecemos a crear nuestro servidor back-end, o digamos nuestro servidor web, donde llamaremos nuestras API al cliente. Después de haber abierto nuestro Visual Studio Code a la carpeta back end, como la estructuramos antes, ejecutamos un comando npm init en MPM en
ella, nos pedirá un nombre de paquete. Puse e-shop, una virgen. Presiono Entrar descripción, digamos algunos back-end para la e-shop por ejemplo. Y luego el punto de entrada como donde empezará la aplicación, pongo app.js y luego algunos, otro comentario. Seguimos presionando Enter y luego nos preguntará todo está bien. Presionamos Enter. Entonces veremos que se crea un paquete Jason. Entonces vamos a crear ahora nuestro archivo up js, donde vamos a iniciar nuestro punto de entrada de nuestra aplicación. Entonces pondré aquí, por ejemplo, console.log, Hola Mundo. Y luego imprimirá Hello World cuando esté ejecutando esta aplicación. Pero cómo vamos a ejecutar esta aplicación, aconsejo utilizar una biblioteca llamada NADH Monde, que es una utilidad que monitoreará cualquier cambio de nuestro código fuente cuando presionemos Control S o guardemos esta aplicación JS, lo hará reiniciar la aplicación de nuevo automáticamente. Entonces después de instalar esta biblioteca, vemos que está en independencia en un paquete JSON como script personalizado, podemos agregarlo aquí, como si fuera un comentario para iniciar la aplicación usando Node monitor. Por lo que puedo decir iniciar monitor de nodo o gemido de nodo. App dot JS. En este caso, tendré la aplicación iniciada con el archivo de punto de entrada app.js. Probémoslo ahora. Guardemos ab.js y luego escribamos npm start. Y después de que empecé la aplicación, voy a ver Hello World. Y la aplicación sigue en ejecución. Por lo que está detectando cualquier cambio que haga en la aplicación. Entonces digo helloworld con el cambio fue signo de exclamación, y veo que ha cambiado. Cambiemos el mundo E-sharp. Ya veremos hola e-shop. Eso es genial. Entonces hasta ahora sólo tenemos una aplicación en ejecución, pero aún no tenemos ningún servidor. Entonces para crear un servidor web, vamos a instalar Express, que es una famosa biblioteca de Node.JS para alojar un servidor. Por lo que después de hacer esta instalación, voy a ver también en dependencias. Pero eliminemos este registro de consola y cree una constante, llámenlo express y llame a la biblioteca express usando la palabra clave require express. Lo llamará automáticamente desde módulos de nodo. Y vamos a crear una constante que se llama app. Y esta app con call una función llamada Express, que mencionamos o definimos antes. Este servidor web requiere escuchar un puerto específico. Entonces digo que arriba escuche. Y especifico, por ejemplo, 3 mil como puerto. Y hay una devolución de llamada. Callback nos dará, todos
seremos ejecutados cuando haya una creación exitosa del servidor. Por lo que en la devolución de llamada, puedo imprimir cualquier mensaje en la consola. Por ejemplo, diré que el servidor se inicia ahora o que el servidor se está ejecutando ahora en el host local de enlace con puerto 3000. Entonces ahora vamos a ejecutar de nuevo la aplicación. Diré npm start. Y vamos a obtener algún error porque ya estoy ejecutando el servidor. Entonces empecemos y lo vuelvo a ejecutar. Veré host local o el servidor se está ejecutando en localhost 3000. Cuando abro el navegador y visito esta URL, localhost 3000, veamos qué tendremos. Lo pongo aquí y veo que subir, conseguir, no se puede conseguir porque no especificé ninguna ruta inicial para la aplicación. Creamos. Ahora la ruta inicial o la raíz, podemos decir app dot get. Veremos que Express nos está proporcionando todas las solicitudes HTTP. Por ejemplo, PUT, eliminar, y también publicar. Entonces olvídate. Aceptará dos parámetros. El primero es la ruta misma. Por ejemplo, diré la ruta inicial o la raíz. Por lo que en este caso, pediré una devolución de llamada. El callback tendrá la respuesta que
enviaré al cliente cuando llame a esta ruta. Entonces digo en la respuesta de devolución de llamada, dot sand, por ejemplo, digamos un mensaje, podemos llamarlo hola o API, no Hello World. Entonces ahora tenemos esta API. Guardemos, y ahora podemos volver a ejecutar la aplicación en el navegador. El aplicativo llamará a un getMethod y obtendremos como respuesta, este hola API. Entonces como recapitulación, vimos cómo creamos nuestro propio servidor o servidor web con express. Y estábamos viendo nuestros cambios con el nodo Monitor y cómo llamamos a esta aplicación llegar a inicializar una ruta. Y ejecutamos el servidor bajo un puerto específico que vimos antes. Necesitamos tener una API y una versión en la URL de ese fuera. Entonces veamos cómo podemos crear eso con variables de entorno en la próxima conferencia.
10. Variables de entorno de lección: De acuerdo, así que empecemos con variables de entorno. Normalmente, las variables de entorno se utilizan como variable pública, las
cuales se utilizan entre la aplicación. Entonces, por ejemplo, quiero una variable pública para API URL. Por lo que esta URL API, cual será precedida por cada ruta que use para mi aplicación o para mi API. Entonces como vimos antes que cada API que teníamos,
tiene el prefijo de algo como slash, api slash versión uno. Y esto significa que cada API en mi aplicación tendrá esta URL. Y luego API versión uno. Y entonces digo, por ejemplo, productos. Y luego puedo publicar, eliminar o crear algunos datos a esta API. Entonces ahora veamos cómo podemos leer este prefijo. Entonces no quiero repetir en mi API siempre es la cadena. Por lo que puedo arreglarlo en alguna constante que es legible desde todas partes. Y entonces puedo pasárselo al micrófono, a mis rutas de cuerdas, y entonces sería legible en esa ruta. Entonces para hacer eso, primero, normalmente, en no el Node.JS, normalmente tenemos una variable de entorno llamada dot n o archivo de entorno. Y qué ejemplo paso un nombre de variable que lo quiero, cualquier nombre que pueda, por ejemplo, API URL. Y entonces puedo decir la cadena que quiero pasar, que es api slash v1. Y en este caso, tendré esta URL API está definida en todas partes de la aplicación. Pero primero, cómo podemos leer esta variable de este archivo en nuestra aplicación, hay una biblioteca, podemos instalarla desde paquetes MPM. Y se llama EMF punto-punto. Por lo que no podemos decir npm instalar dot EMF. Y esta biblioteca normalmente está disponible siempre. Y podemos usarlo en la aplicación JS en la ruta en la raíz, No hay problema. Por lo que podemos decir definir o podemos decir requerir esta biblioteca. Por lo tanto, EMF no recorta el conflicto. Y normalmente esto debería estar en una cuerda. Entonces cuando digo requerir esta biblioteca, entonces podré usar alguna constante específica para obtener estos valores del archivo M. Entonces iré aquí y definiré una constante. Vamos a llamarlo por ejemplo, API. Y entonces podemos decir punto de proceso, punto, luego el nombre de la variable que creé aquí. Por lo que puedo decir API en la URL de puntuación. Entonces vamos a guardar todo. Y ahora intentemos imprimir esta variable para ver si realmente está leyendo de este archivo o no. Entonces hagámoslo de inicio cuando iniciamos el servidor. Por lo que voy a decir console.log, la API para constante. Entonces arrancaré mi servidor, mpm start. Y aquí está, ya lo hemos definido. Entonces en cada ruta que tengo, puedo definir o pasar esta variable API más la ruta que quiero, por ejemplo, productos. Por lo que en este caso, tendré el prefijo API version one plus products. Veremos eso con más detalle en las próximas conferencias para ver cómo crear la ruta y cómo construirla y cómo llamarla. Lo más importante que debes saber ahora que podemos crear las variables públicas en este archivo y leerlas en cualquier parte de la aplicación. Entonces en este caso, quiero almacenar,
por ejemplo, la cadena de base de datos o cadena de conexión. Puedo guardarlo aquí en este archivo y también, por ejemplo, algún secreto para la autenticación, también lo
puedo almacenar aquí. Y cuando quiera desplegar la aplicación al servidor de producción, voy a cambiar estas variables. Entonces tendremos también otro archivo, por ejemplo dot EMF, pero para servidor de producción, veremos eso por supuesto en la conferencia donde desplegaremos la aplicación Node.JS. Entonces ahora pasemos a la siguiente conferencia donde crearemos la API real y cómo enviaremos datos JSON a través de ella porque necesitamos datos JSON para que nuestra e-shop intercambie con el front end la información sobre los productos y el pedido y etcétera.
11. Crea la primera llamada y analizado de llamada en la API y los datos Json: Ahora vamos a ver cómo intercambiar datos entre front-end y back-end. Anteriormente vimos cómo intercambiar datos con el front-end con la solicitud GET. Por lo que enviamos Hola API. Pero lo que hicimos es sólo intercambiar una cadena, que es hola API. Por lo que necesitamos intercambiar datos JSON. Por ejemplo, el producto es un objeto, consta de ID, nombre, imagen, y el precio. Entonces ahora simulemos la API de productos. Entonces al principio, Vamos a tener el prefijo bonito como antes. Entonces voy a usar las garrapatas traseras, que son muy útiles para combinar entre constantes y cadenas sin usar este plus. Entonces ahora, vamos a quitar esta parte y crear un backticks. Y con un signo de dólar y corchetes curvos. Haré API. Y entonces digamos productos. Quitemos esta parte de aquí. Y también este. Y voy a crear una constante. Digamos producto. Y este producto es objeto, contiene ID, digamos uno, y nombre, digamos pelo, aparador. E imagen con, por ejemplo, alguna URL. Por lo que tienes opción aquí para seleccionar cotizaciones dobles o cotización simple. Pero con JavaScript, Es mejor usar siempre citas simples en esa respuesta. Enviemos este producto al front end. Y vamos a ejecutar la aplicación. Ahora tenemos la aplicación en ejecución. Vayamos a Cartero. Cartero es aplicación como hablamos antes y vimos cómo instalarlo. Entonces no puedo llamar a API como con los métodos GET, post, PUT, etc. Así que vamos a tener aquí nuestra API 3000 y luego api slash versión one slash productos. Y hago clic en Enviar. Entonces eso es pons es el objeto que ya creé. Por lo que suponemos que estamos construyendo este objeto obteniendo
los datos del producto en la base de datos o desde la base de datos, luego enviarlos al front end con un getMethod. Entonces, ¿qué pasa si el usuario o el administrador de la aplicación del tema arriba, enviaremos, o, por ejemplo, crearemos un nuevo producto. Por lo que el nuevo producto necesita un dato que será enviado desde el front end. Entonces ahora cambiemos este método muscular de llegar a post. Qué ejemplo lo copiaré y diré post. El puesto solicita también datos. Estos datos vendrán del front end. Entonces cómo obtengo estos datos desde el front end, es muy sencillo usando request dot body. Por lo que después de publicar los datos del cuerpo, los
voy a enviar de vuelta al frente. Entonces vamos a crear una constante, digamos nuevo producto. Y este nuevo producto se solicitará cuerpo de punto. Entonces hagámoslo así. Consola. Lograr el nuevo producto. Entonces vamos a Cartero. Cartero cambiamos este método de llegar a post. Y el cuerpo de la solicitud será,
por ejemplo, en la fila JSON, que es JSON. Y entonces puedo pasar, por ejemplo, este objeto. Y cuando hago clic en Enviar, vemos que regresamos uno. Y en el registro de la consola me quedé indefinido. Entonces el problema es que el cuerpo no está bien analizado. Entonces necesitamos algo llamado middleware. El middleware es una función que tiene control de solicitud y la respuesta de cualquier API. Entonces cuando el frente termina y el objeto JSON, necesitamos el back-end para entender que esto es adyacente. Por lo que por favor analízalo y úsalo en el back-end. Entonces para hacer eso, necesitamos solo usar una cosa de express JS. Por lo que necesitamos usar ese JSON. Por lo que el Express aceptará datos JSON. Y la cosa es muy sencilla. Como ya les dije anteriormente, necesitamos tener un middleware. Y este middleware se puede hacer mediante el uso de aplicaciones. Y luego decimos Express dot JSON. Y este método, haremos que nuestros datos sean comprensibles por Express, los
cuales se envían desde el front end. Y podemos teclear aquí como middleware. Y en el futuro, veremos que vamos a poner todo middleware. En este apartado. Anteriormente, se usaba algo llamado BodyParser, y este cuerpo-analizador se duplicó. Por lo que ahora en adelante estamos usando Express JSON. Entonces si ves en las próximas conferencias que estamos usando BodyParser, sólo tienes que reemplazarlo por expresado o JSON. Por lo que de esta manera, garantizas que tu aplicación se ejecutará de la manera correcta. Por lo que ahora somos capaces de hacer un get y también post de los datos. Yo, por ejemplo,
cambiaré aquí peluquero a y lo enviaré. Y voy a recuperar el peluquero dos. Por lo que ahora nuestra API está lista. Ahora estamos empezando a construir esta estructura API para pedidos de productos y 40 usuarios, como hablamos antes en la sección anterior. En la próxima conferencia, veremos cómo realizar el registro de estos eventos de API. Por ejemplo, cuando alguien publique datos o buenos datos, los
bloquearemos en la consola de nuestra aplicación.
12. Registrar las peticiones de API: Es culpa muy útil que el desarrollador sepa lo que está pasando en su servidor. Para que podamos conocer y anotar las solicitudes HTTP que vienen del front end, como posts, get o put o delete. Para ello, hay muy buena biblioteca llamada Morgan, por lo que podemos usarla para log nuestras solicitudes HTTP las cuales vienen desde el front end. Entonces vamos a instalar esta biblioteca. Paro el servidor, digamos m, Pm instalo Morgan. Y después de instalar esta biblioteca, podemos llamarla también con require. Entonces le costó a Morgan. Requerir. Morgan. Dijimos que esta biblioteca es una biblioteca de middleware, así que tenemos que ponerla en app dot use Morgan. Y hay algunas opciones por defecto, que se llama Tiny. Esto es bueno en caso de mostrar las solicitudes de registro en un formato específico. Por ejemplo, vamos a ejecutar el servidor de nuevo. Inicio Mpm. Entonces tenemos aquí que un servidor se está ejecutando con Cartero. Hagamos algunas peticiones. Por ejemplo, voy a enviar de nuevo el post. De acuerdo, de vuelta a la aplicación o al código. Veremos que obtuvimos una solicitud de post sobre la API y con su número de estado específico. Hagamos un GET. También. Aquí un get, Enviar y volver a la aplicación. Y veo que he iniciado sesión también, ellos GAN solicitudes. Existen muchas opciones para esta biblioteca, por lo que puedes dar formato a tus registros como quieras. Pero no vamos a hacer eso. Vamos a usar sólo diminuta. Y por supuesto se puede decir con este logs en algunos archivos, todo esto
es, se muestra aquí en la documentación de esta biblioteca. Ahora estábamos usando sólo un dato falso del producto. Empecemos a vincular estos datos a la base de datos. Entonces vamos en la próxima conferencia para hacer la conexión con el MongoDB usando Atlas.
13. Instalación de mongoose y conectar a la base de datos MondoDB: Anteriormente vimos cómo falsificar un dato
del producto para almacenarlos y mostrarlos en nuestra aplicación. Ahora lo que necesitamos es almacenar los datos en la base de datos. Y en este curso estamos usando MongoDB. Y como vimos antes, no
necesitamos instalar ningún software especial para MongoDB. Solo necesitamos iniciar sesión en la nube de MongoDB. Y luego creamos nuestra base de datos y conectamos nuestra aplicación a esa base de datos en la Nube. Entonces, en primer lugar, cómo podemos conectar nuestra aplicación a la base de datos en la nube. Por lo que primero necesitamos instalar una biblioteca llamada Mangosta. Mangoose es responsable de todo el funcionamiento de la base de datos
MongoDB en la aplicación o una aplicación Node.js. Entonces vamos a instalar esta biblioteca que se llama Mangosta. Voy a escribir aquí npm instalar mangosta. Y como cada biblioteca necesitamos crear una constante. Llamémoslo mangosta. Y este Mongo, podemos decir que se requiere de mongoles. Podemos suponer que esta cosa de aquí es como la importación. Por lo que estamos importando cada biblioteca y la almacenamos en una constante. Normalmente, agregamos la conexión a la base de datos antes de iniciar el servidor. Por lo que aquí voy a decir Mangosta, punto conectar y desconectar. Es pedir URI. Uris o cadena de conexión. Puedo obtenerlo de MongoDB Cloud. Anteriormente vimos cómo conectarnos a la nube de MongoDB y crear nuestra aplicación y clústeres y nuestro proyecto. Y vimos que tenemos múltiples colecciones, o podemos decir bases de datos. Y esas bases de datos, tendremos acceso a ellas a través de nuestra aplicación. Entonces veamos cómo podemos conectarnos a esas bases de datos en clústeres. Si vuelvo a los clústeres, veo aquí un botón que dice Conectar. Cuando digo conectar, puedo usar múltiples opciones de MongoDB. Por ejemplo, lo que necesitamos es conectar su aplicación. Por lo que necesitamos usar una cadena de conexión para obtenerla desde aquí y pegarla en nuestro método de conexión con de Mangoose. Por lo que al hacer clic en esta opción, obtendremos una cadena de conexión. Vamos a copiarlo y tenerlo en nuestra aplicación. Por lo que traigo cotizaciones aquí y copio esta cadena de conexión. Pero no podemos ver que dice que estas cadenas de conexión deben contener un nombre de usuario y contraseña y nombre de base de datos. Pero de donde no puedo obtener esta información es simplemente en MongoDB Cloud. Podemos utilizar un usuario específico para conectarnos a estas bases de datos. Solo necesitamos ir al acceso a la base de datos y crear un nuevo usuario. Y este usuario podemos conectarnos A base de datos en la Nube. Así que vamos a dar clic aquí, añadir un nuevo usuario de base de datos. Y vamos a darle un nombre de usuario, E usuario agudo y la contraseña, tienes libertad para seleccionar cualquier contraseña. Por ejemplo, pongo de uno a siete. Dijo que se proporciona contraseña es muy débil. Entonces vamos a agregarle algunas letras. Y luego agregó con éxito al usuario. Volviendo a nuestra cadena de conexión, necesitamos reemplazar estos datos aquí. Entonces primero, pondré aquí el nombre de usuario, el usuario de e-Sharp, y la contraseña que tenía antes, y el nombre de la base de datos. De acuerdo, aún no tenemos esa base. Entonces vamos a sumar uno. Volvemos a los clústeres. Y entonces podemos ver aquí nuestras colecciones. Y en esta lista de colecciones que tengo anteriormente, puedo crear una nueva base de datos. Entonces le voy a dar un nombre E-sharp, que la base y el mismo nombre para la colección. Atrás tomó esa cadena de conexión. Podemos agregar ahora un nombre de base de datos. Entonces ahora tenemos la cadena de conexión completa. Hablamos antes de variables de entorno. Entonces vamos a almacenar esta cadena en las variables de entorno, así que la copio. Y luego creo, por ejemplo, una variable, lo
llamo cadena de conexión. Y luego le doy este valor, que es la cadena que obtuve de la nube de base de datos. Y aquí solo digo proceso punto variable de
entorno, punto, conexión, cadena. Entonces ahora cómo podemos comprobar que estamos conectados a la base de datos o no. Si comprobamos este método Connect, notaremos que está devolviendo una promesa. Normalmente se está ejecutando la promesa y está devolviendo dos métodos. Uno es entonces cuando sus éxitos y otro con el error cuando es fracaso. Entonces aquí voy a poner entonces. Y luego si la
función de flecha y la consola registro algún mensaje, esa conexión de base de datos está lista. Y cuando falla en catch. Y también es método de flecha. Podemos decir consola log el error. Intentemos iniciar nuestro servidor. Por lo que ahora npm inicio. Y vemos que hay algunas notificaciones diciendo esa advertencia de deprecación. Está diciendo que el analizador de cadenas URL actual está en desuso. Por lo que necesitamos usar alguna variable específica. Por lo que necesitamos usar una opción específica como verdadera para hacer desaparecer esta deprecación. Pero cómo podemos usarlo, vemos que este método de conexión tiene otro parámetro llamado opciones. Entonces con estas opciones es un objeto donde puedo pasar las opciones que quiero. Entonces vamos a copiar este. Agregado como opción. También nos dieron otra advertencia de deprecación que es usar topología unificada. Esto se utiliza también para buscar los servidores. Entonces, sumémoslo aquí. Y vamos a ahorrar. Seguimos recibiendo error. En realidad el error que necesitamos pasar también el nombre de la base de datos en las opciones. Entonces puedo decir que es alguna palabra reservada, se llama nombre DB. Y con este nombre TB, puedo pasar el nombre de la base de datos. Nombramos nuestra base de datos en la Nube como e-shop que la base. Y después de guardar y tratar de volver a conectar, vemos de nuevo que se ha fallado la autenticación. En MongoDB Atlas, es necesario dar un eje de red. Por lo que este acceso a la red, necesitas tener una lista blanca de IPs que puedan acceder a tu base de datos. Entonces ya tengo dos IPs. Puedo agregar otra IP yendo, por ejemplo, a Google y simplemente teclear cuál es mi IP. Y en el primer resultado de búsqueda, obtendré mi IP directamente. Entonces voy aquí, copio esta IP, y luego digo agregar la nueva IP. Por lo que se agrega esta IP, puedo decir mi oficina en casa. Y luego hago clic en Confirmar. Por lo que volver a la aplicación. Podemos ver si somos capaces de conectarnos o no. Por lo que solo podemos presionar Guardar de nuevo. Y vemos aquí el servidor se está ejecutando, pero aún no obtuvimos respuesta alguna del servidor de base de datos. Y vemos que la conexión de base de datos está lista. Entonces de esta manera, conectamos el tema de la aplicación back end a la base de datos en la Nube. En la siguiente parte, veremos cómo escribir datos esta base de datos utilizando nuestras API que creamos antes.
14. Uso MongoDB Atlas: Por supuesto, también hay unas herramientas locales para navegar por la base de datos de MongoDB. No tienes que usar nuestra clase en línea. También puedes descargar alguna herramienta la cual tiene más, más funcionalidad como veremos más adelante, como exportar e importar datos. Porque quiero darles los archivos y los datos y la base de datos que
he creado para no ser molestado en llenar sus datos o base de datos por su cuenta. Tendrás los archivos listos. Por lo que puedes utilizar esta herramienta para importar como las bases de datos y las tablas y los documentos a tu base de datos también. Con esta conferencia, hay un enlace adjunto para y algo llamado MongoDB Compass. Y esta es una muy gran herramienta para navegar por la base de datos MongoDB. Y está disponible para todas las versiones de sistemas operativos. También, como para Windows, para un Ponto, y también para Mac OS. Por lo que después de descargar este enlace, te dará una aplicación que puedes usar. Y esta aplicación puedes instalarla en tus aplicaciones y luego la puedes abrir. De acuerdo, vamos a abrir la aplicación instalada. Como muestro aquí, lo tengo aquí en mi lista de aplicaciones, en mi sistema Mac. Y va a anexar para mí la Brújula MongoDB. Como ven aquí, lo estamos inicializando. Entonces se está inicializando. Y déjame acercar un poco como Dalo para que sea más grande. Entonces ahora me está pidiendo que agregue una cadena de conexión, que hemos creado en la conferencia anterior para que pueda ir y copiar mi cadena de conexión y luego pegarlo aquí y luego haga clic en Conectar. Ya expliqué cómo obtener el nombre de usuario,
contraseña, y también el nombre de la base de datos. Por lo que ya lo he hecho. Entonces es en reciente. Tengo aquí el usuario de e-shop y también MongoDB y toda esta información entre ella. Por lo que ahora tenemos que dar click en Conectar. Y luego se va a conectar a mi base de datos. Como ven, he enumerado todo mi clúster, que son los que tengo en el atlas. Por lo que tenemos todas las bases de datos que creé previamente. Y así la base de datos con la que vamos a trabajar. Por lo que tienes dos opciones. Tal vez puedas usar MongoDB Atlas o MongoDB Compass, compuestos MongoDB. No necesitabas buscar en el navegador y buscar en la página web de MongoDB Atlas. Pero se puede escuchar el uso localmente. Simplemente abre una aplicación, agrega tu cadena de conexión, y se guardará aquí siempre. En este curso voy a utilizar MongoDB Atlas. Y cuando vayamos por el despliegue, voy a usar MongoDB Compass porque necesitamos importar y exportar datos. Y también. En la próxima conferencia más adelante, te
mostraré cómo importar y sembrar tu base de datos. No tienes que llenar toda esta información manualmente, como la base de datos. Por lo que tendrás ya base de datos que puedes importar a tu colección y luego podrás usarla. Al igual que dar seguimiento con su curso.
15. Lectura de datos de escritura para la base de datos utilizando la API: Perfecto, Así que estoy tan contenta ahora que tenemos una conexión exitosa con la base de datos, ahora
tratemos de publicar algunos datos en la base de datos para que podamos verlos en la Nube de MongoDB. En la base de datos relacional. Anteriormente, vimos que la relación entre las tablas, pero aquí en MongoDB está adquiriendo diferente. Podemos considerar que la tabla de nombres es una colección. Entonces como vemos aquí, ya
tenemos una base de datos. En el interior de esta base de datos, hay una colección. Por lo que podemos decir que la colección es una tabla en base de datos relacional. Borré la base de datos que creamos antes. Voy a crear uno nuevo con la mesa, llamémoslo productos. Entonces por ejemplo, dijimos que el nombre de nuestra base de datos es e-shop. Base de datos. Productos es el nombre de la colección. Entonces tengo la base de datos. Cada base de datos y dentro de eso hay una tabla o una colección. Podemos llamarlo un producto. Está bien, genial. Entonces ahora tenemos, digamos esta colección, vamos a publicar datos a esta colección. Entonces en Cartero, como vimos antes, tenemos aquí a este objeto, empujémoslo a esta base de datos. Pero primero, lo que necesitamos hacer en la aplicación Node.JS, necesitamos crear un modelo con Mangoose. El modelo es lo mismo que una colección. Entonces podemos decir en MongoDB, se llama colección y en Node.JS, se llama modelo. Por lo que necesitamos crear un modelo de producto. Este modelo contendrá las columnas que necesitábamos para el producto. Por ejemplo, el nombre o la imagen, o por ejemplo, la cantidad del producto en el almacenamiento en Mangosta. A esto se le llama esquema. Y si vamos allá a la documentación, vemos que Mangoose tiene mucha flexibilidad aquí. Para que podamos crear esquemas. Por ejemplo, esquema de bloque como vemos aquí. Y podemos poner el título del campo, autor, cuerpo, y hay tipo de éste, y cada campo tiene algunas opciones. Por lo que se puede especificar, por ejemplo, fecha punto. Ahora, por ejemplo, estamos en este registro o se crea este documento, entonces veremos que toma automáticamente la fecha de hora de la hora actual. Entonces empecemos de manera sencilla. Entonces, primero creemos el modelo de producto. Voy a la aplicación y después, digamos usar y antes de las API. Yo creo, por ejemplo, en constante, lo
llamo esquema de producto. Y este esquema de producto utilizará biblioteca y esquema de Mangoose. Y el esquema aceptando un objeto y este objeto tomará los campos como vimos aquí en la documentación. Por lo que tenemos un nuevo esquema y aquí podemos enumerar nuestros campos. Entonces vamos a sumar nuestros campos que teníamos antes. Entonces digo que necesito el nombre. Escribimos es cadena. Y por ejemplo, necesito también imagen. Qué tipo también cadena. Contendría la URL de la imagen. Y agreguemos también algo así como contar en stock. Contar en stock. Y este conteo en stock será un número. Hay muchos tipos. Podrás consultar la documentación de mangosta y veremos en el curso los diferentes tipos que utilizaremos para nuestra aplicación de tienda online. Después de tener este esquema, necesitamos crear el modelo. Entonces digo producto constante. Normalmente los modelos empiezan con mayúscula. Entonces podemos decir producto, que es modelo de punto de mangosta. Y el modelo llamado, o la colección se llama producto. Y usando el esquema de producto que teníamos antes aquí. Entonces digo esquema de producto, y presiono Guardar. Ahora tenemos el esquema de producto y el modelo de producto ya definido. Entonces ahora necesitamos,
por ejemplo, con las solicitudes de publicación, necesitamos recibir estos datos de post desde el front end, que es podemos decir cartero o cualquier otra aplicación como Angular o React. Y luego necesitamos recibir estos datos por el back-end,
analizarlos, y empujarlos a la base de datos. Para ello, necesitamos primero, necesitamos crear un nuevo producto, por ejemplo, de ese modelo. Entonces hagámoslo. Podemos decir producto const. Y este producto es nuevo producto que teníamos antes. Pero, ¿cuáles son los campos de este producto? Entonces el producto es este modelo que teníamos antes. Y vamos a sumar los campos de ese producto, como el nombre. Y la imagen y el conteo en stock. Por lo que iré aquí y recibiré esa solicitud, que me dieron. Con esta solicitud, consigo el cuerpo. Y con el cuerpo dentro del cuerpo, estoy enviando aquí id, nombre, imagen, y puedo mandar también contar en stock. Será exactamente el mismo nombre aquí, que viene del front end. Por lo que el front end y el back end deben ponerse de acuerdo en el mismo nombre para los campos y el objeto que se envían al backend. Entonces aquí digo el nombre es solicitar cuerpo de punto, nombre de punto. Imagen es solicitud cuerpo de punto, imagen de punto. recuento en stock también es de la solicitud dot body dot count en stock. Ahora tenemos listo el modelo, por lo que solo necesitamos guardarlo en la base de datos. Entonces para hacer eso, podemos decir punto de producto. Y tiene un método llamado Guardar. Guardar. Significa que lo guarden en la base de datos. Si comprobamos este método de guardar, es devolver una promesa, promesa con el documento. Entonces podemos decir, entonces está devolviendo una promesa. Por lo que podemos decir producto creado. Por lo que este es el producto después de que se creó en la base de datos. Entonces es nuestro propio método. Entonces podemos decir aquí, estado de punto de respuesta, que es conexión exitosa o creación exitosa de la base de datos del documento. Por lo que puedo decir aquí dot JSON. Por lo que quiero devolver de nuevo el producto creado para verlo en el front end. Y en caso de error o cualquier cosa puede suceder, podemos decir atrapar el error. Y este error, podemos decir estado de punto de respuesta. Por ejemplo, 500. Es el código de respuesta para errores en el http dot JSON. Yo creo, por ejemplo, mi propio objeto. Yo digo que el error es el error que obtuve. Y por ejemplo, digo si su éxito o no, tal vez pueda usar esta variable en el front end. Por ejemplo, para terminar alguna carga o volver a la página de inicio. Si hay algún fracaso. Ya enviamos ese producto. Entonces eliminemos esta parte aquí e iniciemos nuestro backend MPM, empecemos. Ya lo tenemos listo y la conexión está lista. Vamos a publicar aquí algunos datos. Agradable. Está presumida, tenemos identificación, nombre, imagen. Entonces si vamos a la nuestra colección en MongoDB, Vamos a presionar Refrescar aquí. Aquí tenemos los mismos datos. Vamos a intentarlo de nuevo agregando conteo en stock. Diga por ejemplo, 500 piezas en mi stock. Yo lo envío. Creé un nuevo producto con el mismo nombre, y está devolviendo el ID del producto creado. Volviendo a MongoDB, refresca de nuevo. Agradable. También tengo dos productos ya publicados a través de mi API en el back-end. Y aquí notamos que está bloqueado y exitoso. Hagamos un error. Por ejemplo, para hacer un error, hagamos este campo como sea necesario. Por lo que la base de datos reconocerá que este conteo en Stoke es campo requerido. Por lo que responderá con error que no enviaste, por ejemplo, el conteo en stock. Para ello, volvemos al esquema y cambiamos esto a un objeto. El tipo de este objeto es número y requerido es verdadero. Entonces vamos a guardarlo y ejecutar nuestro, nuevo nuestra API pero sin contar en stock. Y si validamos el JSON y
enviamos de nuevo, veremos que recibimos un error, error y exitoso, falso o fallido. Por lo que en este caso, diría que el error es validar o se requiere el conteo de ruta de error en stock. Por lo que la base de datos me respondió que se requiere este campo. Cuando lo vuelvo a hacer, su éxito. Por lo que ahora hemos publicado un dato al back-end. Vamos a crear una solicitud get. Por lo que quiero obtener estos datos, mostrar la información de su producto en el front end, por ejemplo. Entonces para hacer eso, necesitamos crear una solicitud get. Por lo que crear una solicitud GET simplemente cambiamos esto para obtener. Y necesitamos especificar la lista de productos. Entonces vamos, por ejemplo, a obtener la antigua lista de productos. Y si envío la solicitud, estoy recibiendo la antigua API que teníamos antes. Entonces cambiémoslo para tenerlo de la base de datos. Para ello, vamos a la solicitud get y luego sustituimos esta constante y la llamamos, por ejemplo, esa lista. Y llamo justo al modelo mismo que creamos antes y encontramos. Eso es todo. Por lo que digo const lista de productos y la respuesta va a conseguir nuestro, envíame la lista de productos. Probemos eso. Nosotros sí ascendemos. Nos damos cuenta de que aquí tenemos un error. El error es porque ese método de hallazgo está devolviendo una promesa. Y aquí, cuando estoy enviando la respuesta, tal vez esta lista de productos aún no esté lista y aún no lo conseguí. Por lo que necesito esperar hasta que esta lista de productos esté lista y luego puedo enviarlo con la respuesta. Hay otra manera que hacer, por ejemplo, punto entonces y no atrapar. Eso es algo que podemos hacer con la palabra clave await. Y en la palabra clave await requiere siempre método asíncrona. Entonces pongo este método aquí y es asíncrona, y tengo un peso aquí. Entonces en este caso, cuando llame a la lista de productos, entonces va a esperar, se llenará, y luego envío la respuesta al front end. Entonces hagámoslo otra vez. Ahora. Yo estoy ahorrando y luego enviando esa solicitud, vemos que aquí tenemos los datos. Ya no obtuvimos el error. Entonces esto es por eso que regresamos una promesa. Deberíamos esperar a que la base de datos nos envíe su respuesta, y entonces esperaremos en el frente. Entonces tal vez me pregunten cómo puedo detectar el problema o los problemas. Es muy sencillo. Puedo decir si una lista de productos o ninguna lista de productos, si no hay lista de productos, entonces puedo decir estado de punto de respuesta 500. Y por ejemplo, con JSON, puedo decir error o éxito falso. Entonces si hay algún error ocurrido, por ejemplo, conexión o algo así, simplemente
puedo devolver el error con un éxito si esta lista está vacía. Por lo que tenemos dos formas diferentes de expresar y atrapar errores de la base de datos. Entonces puedo decir aquí, encontrar, puedo poner un peso y
asíncrono, o puedo hacerlo con promesas normales. Al igual que por ejemplo, digo Guardar, puntar entonces y atrapar. Por supuesto que esto es más ahorro de código. Esto lo hicimos sólo en dos líneas, y eso es muy bueno. Por lo que a partir de ahora, usaremos siempre asíncrona y esperaremos. Eso es todo por ahora es mangosta. Hagamos un poco de refactorización. Es muy bonito tener las rutas en algunos archivos y los modelos en otro archivo. Por lo que podemos tener más organización de nuestro código, del backend.
16. Analizar la base de datos de datos de la tienda E: Bienvenido de nuevo. He cambiado de opinión aquí, así que no vamos a hacer refactorización. Analicemos primero la base de datos de e-shop. Entonces de esta manera podemos saber qué rutas y qué esquemas podemos construir y crear los archivos en el back-end. Entonces aquí tenemos menos de las tablas o documentos o colecciones que necesitamos en nuestra base de datos. Toda tienda tiene productos, pedidos, categorías, usuarios, y artículos de pedido. Esta es la tienda electrónica más simple. Entonces cuando quieres crecer más, necesitas tener más tablas como unas reseñas o por ejemplo, algunas categorías nuevas son categorías más grandes. Por lo que empezamos simple y vamos a construir nuestra tienda electrónica para ser más grande lentamente. En primer lugar, los productos, por ejemplo, tiene ID, que es el ID del producto. Y este ID se genera cuando publicamos cualquier ID en la base de datos automáticamente por MongoDB. El nombre del producto, y también la descripción. Y la descripción llega scription se usa
para, por ejemplo, quiero almacenar algún código HTML. En ocasiones la gente está utilizando como descripción de los productos con imágenes y títulos y algunos textos de alcance complicado. Entonces veremos cómo tendremos editor en el front end. Para HTML. Necesitamos también la imagen principal del producto. Y es una cadena, cadena, que almacenará la URL a esa imagen. También, necesitamos una galería de, una galería tendrá algunas imágenes y array de cuerdas, de URLs donde tenemos una galería del producto, más detalle sobre el producto. Y entonces tendremos una marca y también precio,
precio de la categoría de producto. Será la categoría de tipo. En MongoDB. Aquí tendremos algo llamado referencias. No es como las bases de datos relacionales, pero aquí podemos definir el tipo de la tabla directamente. Por lo que como veremos en el futuro, veremos que esta categoría es un tipo de categoría o tiene una referencia a la tabla de categorías. Y cuente en stock cuántos artículos de este producto están en el almacén. También valoración basada en opiniones y si este producto se presenta o no. Por lo que para verlo en la página de inicio de inmediato como producto destacado. Y luego veremos que lo que ellos, este producto se crea cuatro categorías. Sólo necesitamos un nombre, tal vez algunos datos adicionales. Por ejemplo, lo que necesito en el front end, a veces color, por lo que puedo colorear cada categoría en base a algún color específico y también icono o imagen. Para los pedidos, necesitamos artículos de pedido, que es matriz de artículo de pedido. Y el artículo de pedido es una tabla donde está contiene el producto y la cantidad. Por lo que cada pedido tendrá un producto y la cantidad. Entonces tal vez tendré 10 productos. Yo los ordené en un solo pedido. Y entonces cada producto tendrá alguna cantidad. El envío dirección uno y dirección dos. Y ciudad, código postal, país, número
telefónico del estado del usuario para ver si esta orden de nacimiento es, por ejemplo, doblada, enviada o entregada. Y también el precio total. Veremos cómo calcular el precio total en base a artículos
del pedido y al usuario que encargó este pedido. Porque tendremos lookin para cada usuario que quiera pedir algo. Y luego la fecha de la orden. Para los usuarios. Necesitamos un nombre de identificación, correo electrónico, donde el usuario iniciará sesión con su correo electrónico y el hash de contraseña. La contraseña debe almacenarse hash en la base de datos. No puedo almacenarlo como texto plano. Calle, Departamento, ciudad y código postal. Y también país con número telefónico. Y también saber si este usuario es admin. Para que pueda iniciar sesión en el, por ejemplo, panel de administración o no. A lo mejor alguien pregunte por qué separé aquí la dirección del usuario. Al igual que por ejemplo, puedo tener mesa extra como dirección aquí. Entonces puedo poner este campo en esa mesa. Y puedo relacionar usuario y órdenes con esa tabla de direcciones. En realidad, la mayoría de Aesop tiene un problema que a veces usuario, después de
que pidió algo, cambió de dirección. Pero el pedido ya está enviado. Por lo que necesitamos almacenar el pedido como un avión con una dirección de envío, cómo lo colocó el usuario, no relacionado con la dirección de usuario. Usaremos esta dirección solo para rellenar automáticamente dirección
del pedido cuando el usuario esté ordenando algo después de que él bloquee. De esta manera, tomamos un resumen sobre nuestra base de datos en MongoDB. Ahora iremos al backend y crearemos los archivos y refactoraremos un poco nuestro código para basarnos en esta estructura de base de datos.
17. Crea las rutas de API de Backend y esquemas: Bienvenido de nuevo. Me estoy imaginando ahora que si colocamos todos los esquemas aquí en este archivo App.js, sería muy grande. Y creo que aquí tendremos miles de líneas. Por lo que normalmente en Node.JS, las personas o los codificadores en general, están poniendo estas rutas, por ejemplo, las rutas API, y también los esquemas en archivos separados. A, hagámoslo ahora y veremos cómo organizar el proyecto de manera más mejor. Por lo que suceden esquemas. Vamos a crear una carpeta aquí. Nosotros lo llamamos modelos. Y dentro modal, crearemos un archivo para cada modelo que tengamos, por ejemplo, productos o producto dot js. En productos COMO colocaré este esquema. Entonces vamos a copiar esta parte y colocarla aquí. La mangosta no está definida en este archivo, por lo que también necesitamos copiar esta parte donde const mangosta requiere
mangosta porque este archivo no puede ver la Mangosta importada en el app.js. Por lo que tenemos aquí const Mangosta y esquema de mangosta. Y por cierto, consigamos también el mogul. A pesar de que lo cortamos y lo colocamos aquí. Ahora, cómo ArcJS usará este modelo en Node.JS. Si queremos exportar una constante o por ejemplo, una clase u objeto, sólo
decimos que tenemos que hacerlo de esta manera. Exporta producto de punto y luego el modelo. Por lo que aquí, en este caso, producto se verá en cualquier otro archivo. Y puedo importarlo con método requiero. Entonces yendo al archivo ab.js y digo const producto, que viene de requiriéndolo de este archivo donde tenemos el modelo, por ejemplo, modelos slash producto. En este caso, conseguimos el producto y podemos usarlo como modelo para nuestra API. Hagamos más refactorización. Vemos que tenemos todas las API, get post, GET post. Entonces si hacemos eso para todos los esquemas, sería archivo muy grande. Hay una forma en Node.JS que también se pueden almacenar las rutas o las API en archivo separado. Te mostraré cómo hacerlo. Entonces primero vamos a crear una carpeta Word, routers de sequía. Y dentro del router, creo también productos, los js. Entonces para cada modelo, tal vez haya routers. En Express. Hay algo llamado router, y este router sólo es responsable de crear API, estancar las API e importarlas y exportarlas entre los archivos. Entonces, ¿cómo hacer eso? En primer lugar, necesitamos importar el Express. Requerir Express. Y el router será parte de Express. Por lo que podemos decir Express dot router. Entonces este router, cuando lo importe en ArcJS, puedo usarlo aquí. Y este router, se puede utilizar como middleware, por lo que puedo usarlo con uso de app. Entonces primero, vamos a movernos, a
ver cómo mover estos routers. Entonces primero, vamos a copiar todas las API que teníamos y colocarlas aquí. En lugar de app. Yo sólo digo router. Eso es muy sencillo. Y también los elimino desde aquí. Y como dijimos hasta el 2s
es, puede usar también ese exterior. Por lo que podemos tomar la ruta principal API de los productos y colocarlo aquí, por ejemplo, router de productos. Pero de donde vendrán estos productos router
, vendrá de aquí. Por lo que no puedo decir que quiero exportar también el router. Por lo que puedo ir aquí y decir modulo dot export es router. Por lo que tenemos aquí diferente manera de exportar. Aquí estamos exportando el producto en sí, y aquí estamos exportando un módulo. Entonces de esta manera, puedo decir productos router es una constante. Entonces podemos decir aquí, constante. Productos router que provienen de, requieren, de routers. Y luego productos. Por lo que veremos aquí que esta aplicación está utilizando estas rutas de rutas que vienen de productos router. Entonces aquí tenemos que hacer algo. No podemos usar la API así, porque de lo contrario lo será, podemos considerar esto como los niños. Entonces por ejemplo, aquí, necesito colocar solo la slash poder considerarla cuando digo localhost 3000 productos slash, entonces puedo llegar a este, obtener. Y lo mismo para el puesto. Si quiero algo en el futuro como contar, lo pongo así, entonces la API será http 3000 productos slash count. Entonces esta es la mejor manera en que podemos manejar eso outs en archivo separado. Pero primero tenemos aquí el producto modelo. Por lo que también necesitamos importar este modelo. Entonces digo const, producto se requiere de modelos el producto. Ahora tenemos las rutas terminadas. Por lo que tenemos todo get post y veremos cómo agregar el delete y update. Guardemos este archivo y también lo guardemos aquí. Haz un poco más de organización del código aquí para que ya no lo necesitemos. Para que podamos escuchar, digamos routers. Y aquí, el router de producto, podemos tenerlo aquí importado. Veamos ahora si todo funciona bien, podemos decir MPM, empezar. Todo está conectado y todo está funcionando como humo. Lo mismo. Vamos también por las otras colecciones de bases de datos. Por ejemplo, tendré aquí pedidos GS y también usuario y también la categoría. También lo mismo para esos autores. Tendré los mismos expedientes. Entonces estoy seguro de que no te interesa ver todo el proceso porque es exactamente el mismo. Voy a agregarlas. Y luego veremos después de eso cómo se ven al final, nuestra aplicación se ve así. En app.js. Tenemos los middlewares, rutas, y también la conexión de base de datos y el vendedor. En las rutas. Creé rutas para cada tipo o, o para cada colección que teníamos en nuestra aplicación. Entonces voy aquí y creé eso exactamente como los productos. Tenemos, los usuarios órdenes, categorías. Y lo mismo para los esquemas. Cada esquema tiene su propio ahora. Por lo que en este caso, ahora
tenemos todo listo para crear nuestras API. Actualmente, utilizo solo get en cada tipo. Yo sólo quiero mencionar una cosa. Cuando exportamos el modelo de las exportaciones punto-producto de esta manera, no de esta manera. Cuando lo
importamos, necesitamos importarlo como un objeto. Entonces aquí, cuando voy a los productos, lo importo así. En ES6, tenemos esta destrucción de objetos. Por lo que este modelo está devolviendo un objeto. Por lo que necesito crear un nuevo objeto y asignar todos los campos de ese objeto a éste. Por lo que en este caso, puedo usarlo en todas partes seguro que no hay ningún problema si se utiliza de esta manera. El modo de exportar el módulo directamente. Probemos nuestro LPI. Ahora. Yo voy aquí y digo get, tengo lista de productos. Eso es todo por ahora. Para las próximas conferencias, veremos cómo llenar estos esquemas y cómo conectarlo a las estructuras de nuestra base de datos. Y veremos cómo seguir construyendo nuestra tienda electrónica de una mejor manera.
18. Facilitar la CORS y por qué lo necesitamos: Si estás haciendo un front end y el back-end en su mismo tiempo. Seguro que viste este error. Este error llamado Intercambio de recursos de origen cruzado, lo que significa en un lenguaje humano que aplicación
Node.JS no puede confiar en ninguna otra aplicación. Entonces cuando estoy enviando solicitudes desde mi front end hasta el back-end, entonces el back-end cuando Lot me responde lo mismo que quiero porque está prohibido. Está usando puerto diferente, que es totalmente un dominio diferente. Entonces en mi aplicación front-end, cuando crea un servicio para llamar a las API, entonces obtendré ese error. Y en Mozilla org, están explicando todos los datos o todos los detalles sobre este curso. Por lo que de alguna manera en la app NodeJS, necesitamos habilitar esos curso. Cómo podemos permitir que cualquier aplicación solicite API de mi servidor. Se cuenta con una biblioteca llamada curso. Podemos usarlo para permitir el curso para cualquier aplicación. Por lo que paro el servidor y digo npm instalar curso. Después de instalarlo, necesitamos requerirlo e importarlo. Entonces aquí estamos importando todo en ArcJS. Entonces digo const curso, requiero curso. Y para habilitar el curso, es muy sencillo antes de que todo, antes de que comience la aplicación, antes de usar cualquier servicio en la aplicación, necesitamos hacer arriba, no usar núcleos. Y opciones de app dot. Con estrella, como todo. Usando el curso. Esta app dot opciones. Significa que es algún tipo de solicitudes HTTP, como GET y publicar y poner y eliminar. Pero, ¿qué es? Cuando Google opciones http, vemos que la opción HTTP es un método solicita opciones de comunicación
permitidas para una URL determinada al servidor. Entonces cuando digo, quiero una estrella, así que estoy permitiendo todo con el uso de este curso. Por lo que en este caso, estoy permitiendo que todas las demás solicitudes HTTP sean pasadas desde cualquier otro origen. Por lo que es muy importante utilizar este curso y habilitarlos para evitar este error. Por último, después de terminar este módulo o esta sección, diría que este proyecto es la startup para nosotros por crear el tema del back-end. Por lo que lo pondré como archivo zip para que lo descargues y empieces desde aquí. Se puede ver este proyecto en recursos con esta conferencia. En los siguientes módulos, veremos cómo construir todos los esquemas y las API para cada parte de la aplicación.
19. Backend : productos y categorías: Bienvenido a la tercera sección de este curso. Vamos a tener introducción sobre empezar con el back-end. ¿ Qué es un backend? En ingeniería de software, los términos front-end y back-end hacían referencia a una separación de preocupaciones entre la capa de presentación y la capa de acceso a datos. Por lo que cualquier aplicación web y aplicación móvil se considera como un front-end. backend es la parte donde estoy sosteniendo datos. De nuevo, una base de datos o un servidor de archivos. Y el servidor en sí puede ser considerado como un back-end. Entonces vamos a tenerlo así. El front end está mostrando los datos y el backend está sosteniendo estos datos en algún lugar seguro llamado servidor. Necesitamos de alguna manera manejar estos datos que se almacenan en el servidor y servirlos al cliente. Y usando algunos lenguajes de programación como Java, SQL, y también no GS, que vamos a hacer en este curso, para enviar estos datos al cliente de una manera hermosa, para renderizar en HTML, CSS, y Bibliotecas JavaScript. Por lo que en la próxima conferencia, veremos cómo el front end puede comunicarse con el backend para agarrar estos datos, que se llaman API RESTful.
20. Esquema de modelos de productos: Bienvenido de nuevo. En esta conferencia, veremos cómo construir el modelo de producto o el esquema de producto. Todo en Mangosta comienza con esquema. Cada esquema se asigna a una colección MongoDB y define la forma del documento dentro de esa colección. Entonces en base al modelo que se ve a la derecha de la pantalla, vamos a construir el mismo esquema que lo construimos antes en ese modelo. Por lo que los campos del producto pueden ser como empezar aquí, digo que el tipo de este campo es una cadena. Y hay opciones de esquema o Opciones de tipo de esquema. Este tipo de esquema opciones, las puedes ver en la documentación de Mangosta. Por lo que voy aquí a documentación de Mangosta. Voy a tipos de esquema. Y en los tipos de esquema, podemos ver que hay muchos tipos. Por ejemplo, string, number, date, y hay algo llamado opciones, como vemos aquí en este ejemplo. Entonces voy, por ejemplo, al Tipo de Esquema, y veo que hay ruta y opciones en la documentación de Opciones de Tipo de Esquema, puedo ver todas las opciones que necesito para construir mi esquema. Lo que necesitamos en realidad para nuestro curso, creo que necesitamos ese campo requerido y también algo llamado href para hacer referencia a otra tabla y default, que es un valor predeterminado cuando se crea el objeto del producto. Por lo que siempre se requiere el nombre del producto. Yo lo puse a la verdad. El siguiente campo es la descripción, que será una breve descripción del producto. Y también será una cuerda. ¿Se requiere? Yo diría que en nuestro caso se requerirá la breve descripción. Y luego vayamos a la rica descripción. En la descripción rica también se tiene una cadena de tipo. Pero yo diría que no se requiere. Y podemos ponerle un valor por defecto cuando se crea. Por ejemplo, digo cadena vacía. Lo mismo vale para la imagen. Entonces pongo decir aquí también, la imagen es una cadena y tiene un valor por defecto como vacío. Ahora vamos a las imágenes. Imágenes. Siempre son array de cuerdas. Por lo que podemos ponerlo simplemente como esta matriz. Y el tipo de cada elemento de esta matriz es una cadena. Tenemos también marca, que es va a ser lo mismo. Cadena y precio. Por lo que el precio será en la forma tipo es número. Y el valor por defecto. Podemos decir que es 0. El siguiente paso ahora necesitamos agregar la categoría. Entonces es simple. Decimos que la categoría es tipo de ID de categoría. Entonces aquí en el producto, cuando quiero agregar un producto, utilizo la ID de categoría, no toda la categoría. Por lo que digo que el vínculo entre la tabla y
del producto y la tabla de categoría es el ID de la categoría. Por lo que el tipo de este campo será esquema de punto de mangosta, tipos de
puntos, ID de objeto de punto. Entonces en este caso, necesito pasar siempre el id. Y cómo diría que este ID está conectado a la tabla de categorías o esquema de categorías. Yo sólo hago eso. Yo digo que una referencia es esquema de categoría. Por lo que en este caso, esta ID estará conectada al esquema de categoría. Entonces cuando agrego producto, es búsqueda en categorías y recojo ID específico. Y entonces digo que este producto tiene categoría, por ejemplo, belleza y salud. ¿ Se requiere eso? Sí, agregémoslo según sea necesario. El siguiente campo que hacemos Ya tenemos es contar en stock. Cuenta en stock, Normalmente es un número y requerido. Por lo que es necesario especificar cuánto de este producto tienes en tu almacén. También hay otra propiedad podemos poner max y Min. Por ejemplo, digo mínimo tiene 0 y máximo. Tiene 255, por ejemplo. Entonces digo aquí que cuando publique un producto con menos número de conteo en stock, entonces obtendré error porque mangosta, cuando se volvió hacia mí y me diga que, no, esto está mal. Es necesario poner el número entre 0 y 255. Lo mismo va, por ejemplo, para la calificación y también una serie de revisiones. Son números. Por lo que los agregué aquí. Y el campo se destaca es tipo booleano. Por lo que el valor predeterminado de la misma es falso. Por lo que esto es para mostrar el producto en la página de inicio como producto destacado. También, tengo la fecha de campo creada. Por lo que los datos creados es una fecha de tipo y el valor predeterminado de la misma es fecha punto ahora, por lo que es muy simple. Entonces cuando llegue el producto o esta solicitud, entonces tomará la hora actual. Ahora tenemos todo el esquema están listos para su producto y
veremos más adelante cómo agregar producto en las solicitudes de post y cómo obtenerlo.
21. Categorías Modelo y esquema: Anteriormente, creamos el esquema de categoría. Y como ven aquí en el modelo a la derecha de la pantalla, necesitamos crear esos campos. Entonces, empecemos con el nombre. Es exactamente lo mismo que hicimos para el producto. Por lo que digo tipo string requerido a través. Entonces para no tomar tanto tiempo en escribir, voy a agregar los otros campos porque también están teniendo el tipo de cadena. Por lo que aquí tenemos icono y color. El icono será el nombre del icono por ejemplo, estamos usando algunos iconos de fuentes o iconos de material de Google. Por lo que puedo decir sólo el nombre del icono. Y también digo aquí el color, ese color será un hash, cadena
hash, como algo así como puedo decir 000 000 000, que es negro. Por lo que de esta manera, puedo almacenar el color de la categoría que necesito mostrar en el front end. Entonces, empecemos ahora con la creación de la API de la categoría. En la próxima conferencia, veremos cómo agregar categoría y borrado.
22. Agregar y eliminar las categorías: Genial. Por lo que de vuelta al mundo real. Ahora vamos a tener la categoría API. Por lo que en esta conferencia, sabremos agregar una categoría y quitar una categoría. Empecé simple aquí porque la categoría API es la más simple que veremos en el futuro. Cómo crear API más complicadas, como los productos y los pedidos. Entonces como recuerdas antes de crear las rutas y rutas, estamos agregando nuestras API. Tenemos aquí un GET, lo
editaremos para hacer mejor manera o podemos mantenerlo para obtener lista de productos. Ahora, vamos a añadir una categoría. Por lo que mediante la creación de router punto post. Entonces voy a agregar una categoría, así por slash y luego asíncrona, solicitud y respuesta. Entonces haré aquí la adición a la base de datos usando Mangoose y agregando una nueva categoría. Vimos antes que la solicitud siempre obteniendo la información desde el front end, cómo el usuario está enviando la información. Y luego los leeremos y los publicaremos en la base de datos. Vamos a crear, por ejemplo, una constante, podemos llamarla o dejar categoría. Y este será un nuevo modelo de categoría. Por lo que esta categoría, la hemos importado ya aquí. Y tendremos el objeto de esta categoría será nombre y también icono y color, exactamente igual que el esquema. Entonces, ¿cómo obtendría estos datos? Por lo que solicita punto, cuerpo, nombre de punto. Por lo que el front end me debe mandar exactamente este nombre. Entonces también va lo mismo para solicitar punto, icono, punto o perdón,
punto, cuerpo, icono de punto. También para el color. Agregamos aquí. El color. Si recuerdas, cuando publicamos un producto aquí, teníamos algo como guardar. Entonces digo el modelo dot save, y entonces este save me devolverá una promesa. Y luego vuelvo con el estado que creó los productos. Y hablamos antes también de esperar y asíncrona. Entonces hagámoslo ahora con un peso y asíncrona. Entonces usando un peso y un fregadero, digo categoría, que lo creé antes. Puedo decir que nuestro peso de categoría, que creé dot save. Entonces en este caso, estoy esperando hasta que esto se guarde. Y esta guardar me devolverá una promesa con documento o la categoría misma que se crea. Y luego reviso si no hay categoría, como ninguna categoría creada. Entonces digo error de retorno. Por lo que el estado de punto de respuesta dirá 400 cuatro. Por ejemplo, los puntos terminan. Que no se pueda crear la respuesta por ejemplo, o la categoría. Por ejemplo. Y luego si hay categoría, entonces digo que los puntos de respuesta terminan la categoría. Eso es muy sencillo. A modo de recapitulación, creo un nuevo modelo de categoría y luego lo llené de datos. Lo guardé usando Mongos y luego estaba esperando aquí hasta que esta categoría esté lista. Y luego reviso si hay categoría, hay datos dentro de esta categoría, luego lo envío. Pero si no, estoy devolviendo un error. Empecemos nuestro servidor ahora. Mpm inicio conectado a base de datos. Todo está bien. Y uso Cartero. Cartero por ejemplo, creé esta categoría. Dije nombre es salud e ícono es salud icono y algún color. Lo envío y veo que está publicado con éxito. Y obtuve una nueva identificación de esta categoría para comprobar si realmente está funcionando. Volvemos a ir a Atlas y comprobarlo en la base de datos. Yo voy aquí y ya lo encontré. Entonces vamos a crear otra categoría. Por ejemplo, como las computadoras. Y esta computadora tiene computadora de icono y algún color específico en front end puedes crear una camioneta de color. Pickup de color. Te asignaremos el código del color. Por ejemplo, digo 444, y lo envío y creé uno nuevo. Voy a Atlas. Y decir refrescar. Y veremos que esa categoría también se suma aquí. Por lo que tenemos computadoras y salud. Ahora eliminemos una categoría. Eliminar una categoría es lo mismo. Por lo que no podemos decir router dot, delete, no post. Y digo eso fuera lo que quiero asignar por borrar una categoría. Y luego digo solicitud y respuesta como devolución de llamada. Y usaría esta solicitud y respuesta. Hagámoslo aquí con manera promesa. Lo hicimos antes con un peso y asíncrona. Hagámoslo aquí con una manera promisoria. Entonces primero, llamo a la modelo, digo categoría punto. Hay método llamado find by ID and remove. Por lo que encontramos un ID por y lo eliminamos igual con find by ID y eliminamos. Entonces aquí necesito encontrar la categoría que quiero eliminar. Por lo que por DNI. Entonces de donde obtendré el ID, obtendré el ID del usuario o del cliente. Por lo que el cliente me enviará el ID alguna manera y luego lo encontraré en la base de datos y borrado. Entonces, ¿cómo puedo obtener el DNI del cliente? Hay una manera, Es muy buena manera. Es a través de la URL. Entonces no puedo decir aquí por dos puntos y luego puedo decir por DNI. Por lo que este ID, puedes ponerlo como quieras, como cualquier nombre que quieras. Entonces la URL se verá como api slash v1 slash el ID, que quiero eliminar de la categoría. Entonces aquí, cómo voy a obtener este ID de la URL. Es muy sencillo. Digo solicitar punto params dot ID. Entonces aquí este nombre es el mismo que, como asigné aquí. Entonces por ejemplo, digo categoría id. Yo, entonces debo poner aquí ID de categoría. Entonces antes de ver que pedimos el cuerpo. El cuerpo es cuando enviamos la solicitud dentro del cuerpo. Por lo que aquí tenemos cuerpo y estamos enviando en el cuerpo de la solicitud, los datos. Pero ahora los enviaremos o enviaremos el DNI por la URL. Entonces como vemos aquí, que este método nos devolverá una promesa. Entonces diré entonces y luego la promesa me devolverá un documento y el documento que es la categoría eliminada. Entonces digo aquí, si hay categoría, como si la encuentras,
entonces devuelve un punto de respuesta,
status dot o lo siento, 200 y dot JSON. Y puedo crear mi propio objeto. Puedo decir que el éxito es cierto y algún mensaje para el usuario. Por lo que no puedo decirle que se borra la categoría. Y luego si no hay categoría, cuando no encuentro esa categoría más,
digo regresar, estado de punto de respuesta. El código no encontrado es 404. Y el JSON, digo éxito, falso. Por lo que no encontré esa categoría y no se elimina nada. Por lo que puedo decir en la categoría de mensaje no encontrado. Pero ¿y si ocurre algún error en el servidor? Por ejemplo, no sobre no encontrar esa categoría, sino algún error, como error de conexión o si compro los datos equivocados, ID incorrecta. Entonces no puedo decir eso con el error catch. Digo que por favor encuéntrame o envíame un mensaje de que hay error ocurrido en el servidor. En general, no se trata de categoría encontrada o categoría no encontrada. Entonces aquí digo respuesta de retorno, estado de punto. El error en general es de 400. Por lo que JSON. Y entonces digo que el éxito es falso. Y luego puedo enviar el error al front-end al usuario. Entonces ahora probemos esta API, la eliminación de la categoría. Creemos uno y eliminemos iniciando de nuevo el servidor. Inicio Mpm. Estamos conectados a esa base de datos. Entonces vamos a crear, por ejemplo, nueva computadora de categoría por ejemplo. Sí, este nombre, lo mantenemos igual. Y copio esta categoría. Y luego cambio este método para eliminar. Entonces aquí digo después de categorías, digo el ID de la categoría que quiero eliminar. Y luego presiono Enviar. Bonita categoría se borra. Si volvemos a obtener la lista de categorías, si quieres, puedes ver aquí la historia de lo que hiciste antes. Entonces vamos a conseguir una lista de categorías. Todavía tenemos la vieja categoría que mala salud que borró también. Por lo que puedo ir aquí y decir borrar este DNI. Y luego si vuelvo a conseguir, obtendría matriz vacía. Por lo que no tenemos ninguna categoría. Ahora, intentemos eliminar ID no encontrada. Por ejemplo, puedo decir 444 aquí. Entonces cuando lo envío, obtengo éxito categoría falsa no encontrada. Eso es bueno. Es exactamente el mensaje que queríamos. Y además, cometamos un error. Normalmente, si quieres cometer error al eliminar el ID de categoría similar u objeto ID tiene este formato en MongoDB. Cambiemos estos formatos. Por ejemplo, lo hago corto así. Entonces cuando envío, me llega aquí el error. Entonces el error es 400 y luego digo que el éxito cae y ocurrió el error. Se trata de ID de objeto porque tiene un formato incorrecto. Tienes aquí esa opción que hacer entre métodos asíncrona y esperar o con entonces. Entonces las promesas, pueden ser en ambos sentidos. No tienes ninguna diferencia. Pero aquí también es más guiado y aquí hay código más corto. En la próxima conferencia, veremos cómo obtener lista de categorías y también una sola categoría.
23. Obtener categorías y detalles de las categorías: En esta conferencia, vamos a obtener lista de categorías y categorías detalle. Por lo que primero haremos la lista de categorías. Ya lo hicimos antes en las conferencias anteriores. Entonces aquí estoy usando getMethod y luego estoy usando find. Con el uso de este método, obtendré la lista Categorías. Y si hay lista de categorías, entonces voy a conseguir, lo
enviaré por respuesta. Y si no hay nada, entonces enviaré error. Vamos a editar, editar aquí. Y podemos decir estado 2s 200 que encontramos la lista de categorías. Ahora vamos a conseguir una categoría por ID. Entonces voy a decir aquí o alterar. También es solicitud GET. Por lo que este get aceptará la misma API pero con parámetro como vimos antes. Por lo que usaría aquí método asíncrona, solicitud, respuesta, función de rol. Y entonces voy a hacer una categoría constante. Y aquí usaría método await. Por lo que voy a hacer aquí llamado la categoría. Y hay método llamado find by ID. Por lo que usando este método, pediré el id de la solicitud params dot ID. Y voy a comprobar si no hay categoría, luego enviar la respuesta equivocada o error. Si hay categoría, Entonces la enviaré con esa respuesta. Entonces aquí lo hice rápidamente. Si no hay categoría, entonces enviar respuesta 500. El mensaje al usuario diciendo que no se encontró la categoría con el ID dado. Y si hay categoría, Entonces lo enviaré con esa respuesta. Vamos a probar esto con Cartero. Por lo que la lista de categorías es la versión de API una slash categorías y una solicitud de get que envío, pero no tengo ninguna categoría. Añadamos uno. Tengo aquí la solicitud de post, y tengo el cuerpo ya en esta. Y añadamos otro como la salud. Salud. Eso es fin. Por lo que tenemos que volver ahora a la solicitud GET. Llámalo de nuevo, tengo dos solicitudes o dos categorías. Vamos a obtener esta categoría sólo por ID. Por lo que pasaré sólo el ID después de la URL. Daré clic en enviar. Y obtuve la categoría detallada aquí en mi solicitud API.
24. Actualizar la categoría: Bienvenido de nuevo. Por lo que ahora actualicemos la categoría. Actualizar categoría significa que vamos a actualizar ya sea el nombre o el color o el icono. El HTTP solicita para hacer eso se llama Realtor dot put. Por lo que hemos puesto, puedo actualizar los datos en la base de datos. Pero aquí es mezcla entre conseguir los params y conseguir el cuerpo, los params. Lo utilizaremos para obtener el ID del producto o la categoría que queremos actualizar. Y luego en esa respuesta o en el órgano de solicitud, Haremos eso. Obtendremos los datos los cuales se actualicen. Entonces de la misma manera aquí, solicitud
asíncrona y la respuesta será un método ROM. Y entonces voy a constante la categoría en alguna variable. Y entonces voy a decir esperar por categoría y encontrar por identificación y actualización. Para que pueda encontrar el producto y luego nuestra categoría, y luego lo actualizo. Por lo que el primer parámetro de este método es solicitar dot powerapps dot ID. Entonces tengo que pasar el ID, que obtuve del usuario. Y el segundo parámetro es el objeto donde contiene los datos actualizados. Por lo que la categoría tiene un nombre e icono y color. Por lo que obtenerlos de petición cuerpo de punto, nombre de punto. Lo mismo, exactamente como publicamos una nueva categoría. Entonces lo haré aquí. Entonces si consigo categoría, entonces todo está bien y todo se actualizó. Si no, entonces hay error. Entonces voy a implementar esta lógica. Es exactamente lo mismo como lo tenemos en el post. Por lo que copiaré lo mismo y lo pondré aquí. Entonces guardaría conectado a la base de datos, y ese es el estado con Cartero. Por lo que aquí tenemos la lista de categorías que creamos antes. Ahora tomemos este ID y cambiemos este método a un puesto. Y luego paso el DNI que me dieron. Y el cuerpo será diferente. Por ejemplo, aquí lo tenemos computadora elefante computadoras 11. Cambiémoslo, por ejemplo, para elegir
a través de la fonética. Y el ícono será el mismo electrónico, y el color es 55 cuando envíe. Entonces lo que tengo aquí son los datos antiguos en Node.JS. Existe opción si quieres recuperar los datos antiguos que envías, o por ejemplo, que era la categoría original o los datos actuales que lo actualizas. Porque si vamos aquí y presionamos en get, veremos en nuestra lista los datos actualizados. Tendremos aquí, la electrónica. Pero aquí en la solicitud PUT, devolvimos los datos antiguos. Entonces en este caso, en Node.JS, necesario pasar un parámetro al hallazgo por ID y actualización, que se llama es objeto por supuesto, y se puede decir un nuevo a través. Entonces aquí significa que quiero devolver los nuevos datos actualizados. Guardémoslo e intentémoslo de nuevo. Entonces vamos al puerto. Vamos, por ejemplo, a cambiarlo por otra cosa, por ejemplo, belleza. Y aquí dije Belleza. Y hago click, luego obtuve los datos actualizados. Si vuelvo a decir aquí con la lista, me dieron los todos los datos actualizados.
25. Publica un nuevo API REST de productos: Por lo que en esta conferencia veremos cómo publicar un nuevo producto. Al igual que trabajar con categorías. También vamos a publicar un nuevo producto. Por lo que sólo necesitamos recoger los campos, los mismos campos que se envían desde el front end. Y luego agréguelos como modelo de producto y luego guárdalos en la base de datos. Anteriormente, hicimos esta parte. Entonces vamos a refactorizarlo y hacerlo con nuestro modelo y con nuestra base de datos. Entonces vamos a crear nuestra copia los campos que teníamos en el modelo. Entonces aquí ya siento los campos para no tomar tanto tiempo en llenarlos. Todos son iguales. Todos vienen del cuerpo. Vamos a reducir también aquí el código para que podamos usar asíncrono y esperar. Por lo que aquí voy a añadir asíncrono. Y luego vayamos hacia abajo. Y decimos, tenemos, por ejemplo, producto es igual a esperar y el producto que creamos el modelo de producto dot save. Por lo que tenemos aquí ahora se crea el nuevo producto después de guardarlo. Entonces, eliminemos esta parte. Y aquí decimos, si no hay producto, luego devuelto como respuesta, elcódigo de
estado es 400 o 500,
que es como un código de
estado es 400 o 500, error interno del servidor. Y luego enviar un mensaje de que el producto no se puede crear. Y si todo va bien, entonces devuelve el producto. Entonces, ¿qué es especial aquí? El especial aquí que puedes publicar el producto fácilmente, pero ¿qué pasa si el usuario o el frente y el centro en la categoría equivocada? Entonces por ejemplo, si tengo algún ID de categoría y el usuario creó ID de él mismo, y este id de la categoría no existe en ninguna parte de la base de datos. Entonces vamos primero a validar si hay categoría existe o saber. Para hacer eso. Podemos lo mismo, podemos hacer, const categoría. Y en esta categoría decimos esperar un nuevo modelo de categoría. Y encontrar por DNI. Ya vimos esto antes. Por lo que digo solicito cuerpo de punto, categoría de puntos. Por lo que el front end en
la categoría enviará el ID de la categoría que quiero agregar al producto. Entonces aquí, si no hay categoría, entonces devuelve estado de punto de respuesta, por ejemplo,
400, que el usuario cometió un error y está enviando categoría inválida. Por lo que en general, tenemos todos los campos y el usuario debe enviar la categoría. Si todo es válido, continuará y agregando su producto con normalidad. Probemos eso con Cartero. Entonces voy a Cartero y creo una nueva API. Y el enlace será el mismo. Http y categorías, no categorías. Necesitamos productos. Entonces pluma creo que ahora podemos agregar el cuerpo aquí. Y este amigo será el tipo de fila. Y esta fila no es texto, es JSON. Por lo que el front end enviará bloque adyacente al back-end. Por lo que ya lo tengo preparado para no perder tiempo en escribir esto. Por lo que tengo el nombre, la descripción y leer descripción, imagen, marca, precio, categoría, y la categoría. Obtuve la cadena de la lista de categorías. Entonces si recuerdas, tenemos dos categorías. Copié uno y lo agregué aquí. Y el stock de conteo es de 10. Calificación es para no tanto buen producto. Y críticas. El número de opiniones es 22. ¿ Y se presenta? Sí, es cierto. Por lo que ahora cuando envíe el producto, obtendré respuesta del producto y con una nueva identificación del producto. Vamos a revisar la base de datos Atlas. Aquí está Atlas y tenemos aquí MongoDB, recrear una actualización. Entonces vemos aquí que el producto ya está publicado. Y notamos que la categoría tiene ID de objeto. Ahora intentemos enviar categoría inválida. Entonces Vamos a quitar, por ejemplo esto y que sea 80. Por ejemplo. Enviar Tengo categoría inválida. Y eso es huesos es 400 mala petición. Entonces lo especial en publicar un producto es sólo cómo lo vinculamos a la categoría. Por lo que debes validar cada categoría que ya existe en la base de datos y luego enviarla al puesto con la publicación del producto. De esta manera, tendrás un producto válido el cual realmente está vinculado a una categoría.
26. Consigue un producto y lista de productos REST API API: Cuando estábamos preparando nuestra API, hicimos una solicitud get para una lista de productos. Entonces como vemos aquí, la lista de productos se guarda con find. Y entonces lo estamos devolviendo al frente eso. Entonces intentemos eso con nuestros cambios. Con Cartero. Veo aquí el producto, cambio el post para conseguir. Y vemos que tenemos array y lista de productos. Eso es muy sencillo. Vamos a crear una solicitud GET sólo para un producto. Será exactamente lo mismo que obtener lista de productos, como vimos antes. Sólo necesitamos aquí para agregar el parámetro ID. Y cambiemos este nombre por producto. Y ahora si hay un producto, entonces si no hay producto, lo siento. Por lo que devuelves un error. Si hay producto, entonces envíelo de nuevo al front-end o a la API. Pero lo que necesitamos cambiar aquí no está bien, sino encontrar por identificación. Y el ID, como vimos antes, viene de solicitud mirada por el o, lo siento params dot porque tenemos los params en la URL dot ID. Guardemos y probemos. Ahora. Copia, por ejemplo, una de las ID que tengo aquí para los productos, y la pongo aquí después del producto. Entonces tengo la identificación aquí. Y digo, lo consigo, entonces me dieron los detalles del producto exactamente como aquí. Yo quisiera mencionar aquí que, por ejemplo, en la lista de productos, a veces si tengo una gran lista de productos, no
tengo que enviar todos los datos. Por ejemplo, si quiero en el front end mostrar sólo el nombre del producto y la imagen. Por lo que me manivela crear una API específica que devolviendo sólo lista de nombres e imágenes de los productos. Probemos eso ahora. Entonces siempre, después de haber encontrado aquí, encontrar método, si hago clic en punto, entonces encontraré un método llamado seleccionar. Entonces es exactamente como seleccionar una consulta. Entonces puedo pasar aquí qué campos quiero mostrar. Entonces digo por ejemplo, sólo
necesito el nombre. Entonces digamos aquí nombre ahí dentro, revolviendo y guardarlo. Entonces aquí vamos a quitar el producto solo uno y obtenemos una lista. Y vemos aquí tenemos lista de productos y sólo los nombres si queremos, por ejemplo, nombre e imagen. Entonces voy a esta cadena y añado solo espacio. Y luego el campo que quiero mostrar, por ejemplo, digo imagen, y luego guardo. Vamos a Cartero y obtendríamos imagen y nombre. Aquí notamos que hay identificación, por lo que también podemos excluir este DNI. Cómo podemos hacer eso. Vamos también a la misma cadena, y tenemos el ID en este caso. Por lo que puedo decir menos el DNI. Por lo que cuando presiono Guardar, voy a Cartero, envío esa solicitud. Tengo ahora selección limpia. Por lo que de esta manera, puedes crear tus API con más rendimiento y más eficientes. Por lo que no tienes ningún obstáculo en las memorias para cargarle al cliente. Necesitas una lista de producto. Entonces solo manda lo que necesites. Para que puedas crear una API especial para eso. Para que puedas enviar lo que quieras a través de esta API.
27. Mostrar detalles de la categoría en el producto Populado: Entonces como vimos anteriormente, que estamos consiguiendo un solo producto de esta manera. Entonces, pero el campo de categoría es sólo el ID. Si quiero, por ejemplo, mostrar el producto con el nombre de la categoría. Entonces tengo, por ejemplo, el detalle del producto, pero también quiero mostrar su nombre. Entonces no es agradable ir y obtener otra solicitud para la categoría y luego fusionar estas dos solicitudes juntas y mostrar en el front end lo que necesito. Hay una manera muy bonita de hacerlo en MongoDB y Mangosta. Entonces después de encontrar por método ID, cuando presiono punto, los
veo MSO hay poblado. Rellenar significa que cualquier ID o
campo conectado a otra tabla se mostrará como detalle en este campo. Entonces qué campo es tiene, por ejemplo, ID, que está vinculado a otra tabla, como vimos antes en el esquema que tenemos aquí, creamos la categoría es ID de objeto y la categoría de referencia. Por lo que esta categoría en realidad es ID como vimos antes. Entonces digo un agitado poblado. Categoría. Voy a Cartero y luego hago clic en Enviar. Veo que obtuve los detalles de la categoría. Entonces aquí de esta manera, cuando creo una solicitud GET para un solo producto, asumo que estoy en una página de producto. Envio una solicitud para obtener el detalle del producto, y luego obtengo también el detalle de la categoría para poder mostrarlos también en la página del producto. Funciona también con la solicitud GET. Por lo que se ponen en general. Entonces si quiero aquí tener toda la lista poblada, así que solo digo poblar categoría de todas las listas de producto. Presiono Guardar, ve a Cartero. Obtengo lista de productos y IC los ya poblados. Algunos de ellos, no están conectados a una categoría. Ellos son previamente los creamos. Entonces aquí, por ejemplo, este producto, tiene una categoría y está conectado a alguna categoría en base de datos. Entonces como recapitulación, si alguien te pregunta cómo puedo conectar tablas MongoDB juntas como base de datos relacional, solo
creo un campo en la tabla original. Y entonces digo en este campo que quiero un ID de objeto y se hace referencia al esquema que creé para la otra tabla. Y luego cuando estoy creando una solicitud GET, digo poblar este campo. Por lo que este campo debe ser un ID y luego poblará lo que está relacionado con esa tabla.
28. Actualizar una API API REST: Por lo que ahora actualicemos nuestro producto. Actualizar un producto es exactamente de la misma manera en que actualizamos una categoría. Pero como vimos en el post, sólo
necesitamos validar la categoría. A pesar de que ir a categorías, vamos a copiar toda la solicitud PUT sería exactamente la misma. Y luego voy al producto, agrego la nueva ruta. Y aquí tenemos producto o puesto ID. Y luego haremos lo mismo, lo que hicimos para categoría. Entonces cambiemos esto por producto. Aquí está producto, modelo de producto. Encuentra por DNI y actualización. Contamos con los perímetros solicitados params ID y voy a conseguir los campos desde aquí. Vamos a copiarlos igual y pegarlos aquí. Por lo que tenemos todos los campos del producto, nuevos. Sí, queremos devolver el nuevo producto. Si no hay ningún producto, entonces envíe una solicitud incorrecta o un error interno del servidor y luego diga, el producto no puede ser positivo. Y además, si todo está bien, entonces envía de vuelta el nuevo producto. Sólo ahora nos falta la parte donde necesitaríamos validar la categoría. Entonces otra vez aquí obtenemos lo mismo aquí. Y luego digo pega categoría costo, y luego estoy pidiendo categoría. Y si eso no es categoría, entonces envía categoría inválida al usuario. Entonces probémoslo ahora con el Cartero. Yo voy a Cartero, vamos a copiar o tenemos los campos ya aquí. Entonces podemos cambiar esto, ponernos. Y aquí paso la idea que quiero cambiar. Entonces digo aquí, por ejemplo, este DNI. Y luego cambiémoslo a producto uno en nuevo. Y aquí también describirás tú y Ford ejemplo. Actualicemos el precio 32. Y eso es todo. Enviamos la solicitud de post y nos llegó un error aquí que es de categoría inválida. Entonces hagamos la categoría correcta. Por lo que vamos aquí a las categorías API y recogemos la correcta y actualizada aquí. Y ellos mandan, nos dieron de nuevo el nuevo producto. Por lo que vemos u escuchamos el producto nuevo y la descripción está en U y con el nuevo precio. Entonces lo único que hicimos aquí que también, validamos la categoría. Entonces en el front end, como veremos más adelante, que tendremos Foro del producto. Entonces cuando hago clic en Editar, entonces veo los campos ya llenos. Por lo que solo actualizo los campos que necesito y luego vuelvo a mandar esa solicitud. Comprobemos también la base de datos si todo está actualizado. Y luego consigo la lista de productos. Y veo aquí el producto tiene una nueva descripción y un nuevo nombre. Y por supuesto también entonces tu precio.
29. Borrar una API REST de productos: También eliminar un producto es de la misma forma en que eliminamos una categoría. Pero aquí quiero mencionar algún punto que es muy importante para validar nuestra API. Primero copiemos también que eliminemos solicitudes de categorías. Tomaré éste y luego lo pegaré aquí en la API de Producto o rutas de producto. Reemplazamos todo al producto. Todo se reemplaza. Entonces tenemos ahora a todos los estados. Y probémoslo ahora. Consigamos una lista de productos. Conseguirá que tengamos todos estos productos. Quitemos los viejos porque están vacíos. Para que podamos seleccionar uno de los ID, cambiar esto para eliminar, y enviar esa solicitud. Ahora saxes a través y se elimina el producto. Lo que quiero mencionar aquí es cosa muy importante. Entonces, ¿y si envío una mala identificación como esta? Veré que obtendré error de que el ID de objeto no es válido. Por lo que también necesitamos validar el ID de objeto en todas las solicitudes. Entonces en este caso, captamos un error. Pero aquí en la solicitud PUT, esa solicitud no hay ninguna captando el error. Solo estamos comprobando si estamos consiguiendo un producto o no. Pero aquí está revisando la identificación, por lo que se colgará de alguna manera. Entonces cambiemos eso a la solicitud PUT y hagamos un problema en el, en el ID. Por ejemplo, elimino éste y luego envío una solicitud y veo que el backend está colgado. Por eso prefiero más de esta manera, la forma prometida. Entonces puedo decir siempre lo que puedo ver, lo que puedo conseguir y lo que puedo atrapar. Pero si quieres seguir así, por lo que tampoco podemos validar sólo la categoría. Podemos validar el DNI. ¿ Cómo podemos hacer eso? El ID debe ser el tipo de ID de objeto que se almacena en Mangoose. Por lo que aquí empezaré primero a hacer una constante. Requerir mangosta. Esta mangosta constante. Tiene un método donde puedo usarlo en la solicitud PUT. Por lo que no puedo decir que el punto de mangosta es válido ID de objeto, así que puedo pasar entonces el punto de solicitud params dot ID. Entonces si esto es válido, entonces continúo. Si no, entonces devuelvo una respuesta sobre el error. Entonces como vemos aquí, esto es devolviendo un booleano. Entonces pongámoslo dentro de un if. Entonces digo aquí si Mangosta. Por lo que enviaré también una mala solicitud de esta manera y digo ID de producto inválido. Y en este caso, el producto o la API devolverá por mí error cuando esté pasando por ID. Probémoslo ahora. Tenemos identificación equivocada. Veo que no devolví ningún error. Esto se debe a que dije si es válido entonces devolver error, por lo que no debería haber válido, así que agrego no. Entonces volvamos de nuevo y enviemos de nuevo la solicitud. Y obtengo error ID de producto inválido.
30. Contar de productos para fines de propósito de estadísticas: Bienvenido de nuevo. En ocasiones en el panel de administración, quiero mostrarle al administrador cuántos productos tengo en la base de datos. Entonces en este caso, quiero ver una API que me esté devolviendo todos los productos o cuántos productos tengo en la base de datos. Por lo que devolverá sólo un número. La mangosta tiene muchos métodos. Por lo que en base a esos métodos, puedes devolver cualquier consulta que quieras con una API. Por ejemplo, en Mangoose, puedes tener desde el producto modelo cualquier método que quieras devolver. Para que puedas crear tu propia API en base a lo que te proporciona Mangoose. No contaré de los productos. Deseo precio total total de mis productos. Quiero, por ejemplo, total o precio de los pedidos, ventas totales, cualquier estadística que quiera tener en mi front end, por ejemplo, quiero tener panel admin. En el futuro. Te voy a mostrar eso con algunas estadísticas. Entonces para eso, necesitas crear API, que es conseguir normalmente para obtener lo que quieres de la base de datos. Entonces agreguemos uno nuevo aquí, como router dot get. Sería getMethod por supuesto. Y luego decir, por ejemplo, obtener conteo de slash. Por lo que la API será después de que los productos obtengan la cuenta. Por lo que el segundo parámetro, será el mismo que getMethod. Entonces vamos a copiar este de la misma manera y sólo cambiemos el camino ahí. Por lo que digo conseguir conteo, tengo respuesta asíncrona y aquí necesito cambiar en base a lo que Mangoose me da. Por lo que creamos una constante, lo
llamamos recuento de productos. Y aquí eliminaría hasta el final y diría por ejemplo, hay un método conjunto de documentos de recuento. Entonces quiero ver cuántos documentos hay en este modelo o en esta tabla. Entonces cuente documentos y luego devolverá el conteo o como devolución de llamada. Y entonces digo que sólo devuelva el conteo. Entonces consigo el conteo y lo devuelvo. Y luego me devolvieron los documentos de conteo, el recuento de productos. Entonces aquí digo, si no hay conteo de productos y luego devolver un error al usuario, de
lo contrario, enviar el conteo de productos. Eso es todo. Normalmente regresamos un JSON. Entonces por ejemplo, digo aquí, productos es un recuento de productos, o por ejemplo, digo que solo conteo es conteo de productos. Tienes libertad aquí para elegir cualquier nombre. Prefiero éste. Vamos a probar que suponíamos hombre, voy a Cartero y luego digo productos método GET, conseguir contar. Y ejecutamos esto. Y vemos que el recuento de productos es de tres, así que realmente son tres. Comprobemos eso. Sí, tengo primero 1, segundo, 1, tercero 1. Eso es genial. Por lo que ahora podemos mostrarle al administrador qué productos o cuántos productos tiene en su charla.
31. Obtener productos destacados: Otra solicitud de estadísticas puede ser, por ejemplo, quiero los productos destacados, como cómo vemos aquí en la página de inicio de este sitio web. Estamos viendo algunos productos destacados los cuales se muestran siempre en la página de inicio. Por lo que anteriormente en el modelo de productos, teníamos algo o algún campo llamado se presenta. Es destacado tiene un valor booleano como verdadero o falso. Esto significa que este producto debe mostrarse en la página de inicio o no. Ahora hagamos una API para obtener solo los productos destacados. Y para hacerlo más complejo, podemos tener cuenta. Entonces, por ejemplo, puedo conseguir tres productos destacados
o los últimos tres productos destacados o los últimos seis productos destacados. Hagámoslo ahora. Por lo que cualquier solicitud GET es como comenzar con router.get. Entonces vamos a copiar este y construir nuestra API destacada. O en lugar de conseguir contar, diremos conseguir productos
destacados, destacados, por ejemplo. Por lo que en Mangoose, necesitamos encontrar los productos destacados. Sólo, no todos los productos, sólo el destacado. Entonces digo aquí, productos dot find. Y como recuerdas antes, tuvimos algo de filtración. Acabamos de hablar de ello, pero veremos cómo construir unos filtros con el producto. Entonces de todos modos, así que ahora me parece que está aceptando como objeto y luego puedes definir qué campos se requieren para ser el valor. Entonces por ejemplo, digo que se presenta debe ser una verdadera. Por lo que todos los productos que ha destacado a través, entonces los conseguiré. Por lo que aquí todo se queda igual es de hecho sólo el objeto. Por lo que ISA aquí acaba de devolver para mí los productos. Entonces digo aquí productos, productos, productos. Ahora vamos a revisar eso con Cartero. Yo voy aquí, digo Get feature. Por lo que enviamos y
solo obtuvimos un producto destacado porque solo tenemos un producto destacado en nuestra API, por lo que en nuestra base de datos. Entonces si lo revisamos aquí, así que el primero tiene, es falso. El segundo también es falso, pero el último aparece. De acuerdo, así que ahora no quiero sentir mi página de inicio cual producto destacado por ejemplo, tengo como esta página por ejemplo, tengo 200 características productos. Por lo que no sólo voy a, por ejemplo, cinco productos. Para ello, podemos merecer también alguna limitación a nuestra API en base a lo que el usuario está enviando. Por ejemplo, puedo agregar aquí, como vimos antes, podemos agregar cualquier parámetro como antes, agregamos un ID. Pero aquí podemos agregar conteo por ejemplo. Y entonces aquí voy a conseguir este conteo. El recuento es igual a solicitar los params porque su parámetro y recuento. Entonces si hay solicitud de conteo de puntos o solicita un par params dot count, si el usuario pasa algo, entonces consíguelo. De no ser así, entonces devuelve 0. Entonces esto como si aquí. Entonces si hay conteo pasado con la API, entonces consíguelo. De no ser así, entonces devuelve 0. Por lo que este recuento puede ser este valor o este valor. Es exactamente como la declaración IF. Entonces, ¿cómo usaremos este conteo? Es muy sencillo. Después de encontrar lo que quiero, solo el producto destacado, digo conteo límite. Entonces probemos eso con Cartero. Decimos que te ofrezcas. Y luego el conteo que quiero por ejemplo tres, entonces enviaré esa solicitud. No lo haremos es que esté colgando. Entonces hay error. Comprobemos cuál es el error. El error está diciendo aquí que el campo incapaz de analizarse encontrar productos se presenta a través del límite de rechazo tres, Return key false. Entonces, ¿por qué está pasando esto? campo límite debe ser numérico, pero aquí lo tenemos numérico. Porque eso, porque aquí, esta solicitud dot powerapps dot count está devolviendo, como ves aquí, una cadena. Y esto también será una cuerda. Entonces tenemos aquí un valor de cadena, no un número, porque límite es pedir un número. Por lo que para cambiarlo fácilmente a un número, solo coloca un plus detrás de esta bebida. Por lo que ahora, después de guardar y reiniciar, el servidor, pide nuestra API. Obtendremos el producto destacado.
32. Filtrar y obtener productos por categoría: Continuando con el filtrado, Vamos a tener también filtrado por categorías. Por lo que cuando el usuario seleccione algunas categorías específicas, obtendrá aquellos productos que están en esa categoría. Y este es el filtrado normal en cada taller. Por lo que necesitamos de alguna manera ajustar la solicitud GET u obtener solicitud de lista de
productos para tener filtrado por categoría. Pero primero, necesito hablar de algo que hemos vivido antes. Dos tipos de parámetros que podemos enviar al backend. En primer lugar es el parámetro URL. Por lo que el usuario puede enviar cualquier ID después de que ellos, estás enfermo o en el parámetro corporal. Entonces tenemos cuerpo. Y dentro de este cuerpo hay algunos parámetros, y también con la URL. Por lo que tenemos otro tipo de valores de paso al backend, que se llama parámetros de consulta. Los parámetros de consulta se utilizan siempre. En este caso, por ejemplo, tengo API de URL, URL localhost, y luego paso el parámetro de consulta. El parámetro API se pasa así, por lo que puedo pasar aquí número, pero el parámetro de consulta va siempre después de un signo de interrogación. Por lo que no puedo decir siempre que necesito aquí unas categorías. Entonces como vimos antes eso también podemos filtrar en el método de hallazgo. Entonces después de pasar el modelo y luego encontrar, podemos pasar objeto como lo hacíamos antes. Me gusta se presenta como uno de los campos debe tener este valor. Pero ahora hagámoslo como categoría. Por lo que este Find debemos tener categoría y con un ID específico el cual es pasado por el usuario. Pero cómo podemos hacerlo múltiples valores, porque aquí sólo puedo tener un solo valor. Es muy sencillo. Simplemente puedes pasar una matriz y automáticamente mangosta se dará cuenta de que todos estos valores deben estar en esa categoría. Y entonces esto devolverá los productos adecuados que tenga esas mejores categorías. Por lo que no puedo decir aquí algo como esto, primera categoría y segunda categoría ID. Entonces hagámoslo aquí como algo diferente. Por lo que para ser más diferente. Entonces ahora necesitamos tomar de alguna manera este param de consulta y dividirlo en una matriz y luego pasarlo a este hallazgo. Entonces es muy sencillo. Digo si hay categorías request dot, jquery dot, que es éste, entonces vamos a guardarlo en alguna constante. Const, por ejemplo, filtro. Y este filtro, tendremos las categorías de consulta de punto de solicitud de valor. Y vamos a dividir este valor. Entonces lo dividimos por coma. Entonces decimos dividir, dividir la cadena basada en coma, y luego volverá para mí a los elementos de la matriz, que es una cadena y la otra. Simplemente, podemos colocar esta variable aquí porque la conseguimos dividida como array. Pero debido al alcance en JavaScript, no
podemos asignar este valor o usar valor fuera de este si, porque otros campos no lo pueden ver. Por lo tanto, es mejor crear la variable aquí y darle como matriz vacía. Y esta variable, le asigno la división, y luego la estoy usando aquí. Probemos eso con Cartero. Entonces voy aquí y traté de conseguir el producto. No obtengo nada porque eso estoy obligando a la API a tener categoría. Entonces cuando no hay nada, entonces debe tener una categoría. Entonces vamos a tener como forma más dinámica. Hago eso como objeto vacío. Y este objeto vacío será asignado y tiene valor cuando haya params y o parámetros de consulta. Entonces digo que la categoría es ésta. Y luego este filtro, elimino todo este objeto y luego se pasará a la multa. Entonces cuando está vacío, no hay nada. Por lo que obtendré toda la lista del producto. Y cuando haya parámetros de consulta, se llenaría de categoría, que es nuestra condición, y tendrá este valor por parte del usuario. Intentemos eso otra vez. Ahora. Yo mando esa solicitud, agradable. Conseguí todos los productos previamente. Creé algunos productos, por ejemplo, producto 1 y producto 2 y producto 3. Y tienen de diferentes categorías, por ejemplo, esta categoría y esta categoría. Entonces digo aquí, categorías de interrogación. Y el valor de estas categorías. Tomemos la primera categoría. Por ejemplo, éste. Y envío, y luego me dieron dos categorías o dos productos. Por lo que esos dos productos, pertenecen a esta categoría. Añadamos otro. Por ejemplo, el segundo, dividiéndolos con una coma. Entonces digo aquí. Entonces conseguimos 123. El primer producto es de la segunda categoría, y los otros dos productos, son de la primera categoría. Y cuando no pase nada, entonces funcionará normalmente para conseguir toda la lista de los productos. Entonces aquí el usuario tiene la opción de pasar los parámetros de consulta o no. Por lo que ahora en mi página de inicio, puedo tener, por ejemplo, algunos banners que están mostrando algunos productos específicos de categorías y también el usuario cuando va a la página de producto, también
puedes filtrar estos productos por categoría. Por ejemplo, será algo así como casillas de verificación o por ejemplo, algunas pastillas. Para que pueda hacer click sobre ellos y seleccionar las categorías para las que desea mostrar los productos.
33. Cambiar la clave "_id" al "id": más fácil de usar: Cuando estoy obteniendo un producto o lista de productos, Mangoose o MongoDB está enviando el campo con el derecho como los hice. Pero el DNI, tiene algún pequeño problema. Tiene este subrayado. Yo quiero que el ID sea solo ID como clave, por lo que puedo usarlo en todas partes de mis aplicaciones, no sólo, por ejemplo, para la aplicación que estamos haciendo en este curso. Por lo que puedo usar este backend con otras aplicaciones que
normalmente están aceptando mayoritariamente el ID solo como clave. De alguna manera. Mangosta, también podemos copiar este ID y crear un campo llamado ID solo sin guión bajo. Entonces, ¿cómo hacer eso? Se llama virtuales. Entonces con este esquema de producto, que creamos antes, siempre
podemos crear un ID Virtual. Y este Virtual ID tendrá un get. Y este get será de la ID que se pasa en el esquema del producto. Por lo que esta es una forma de hacerlo y de hexa string porque tenemos cadenas hexa para el ID, que se llama ID de objeto. Y luego necesitamos habilitar alguna opción para el esquema del producto. Y decir que cuando quiero enviar algún valor al front end o a la API, habilitamos los virtuales porque este es un campo virtual. Entonces en cada esquema, podemos agregar esas dos o cuatro líneas o dos métodos. Y entonces tendremos el DNI. Entonces si lo probamos ahora con el Cartero, puedo mandar. Y voy a decir que voy a tener el DNI original y el DNI que quiero. Así centro comercial front end amigable, puedo usar este ID directamente sin este subrayado molesto.
34. Usuarios y autenticación: Bienvenido a un nuevo módulo. En este módulo, vamos a aprender a hacer la autenticación y crear la API de usuarios. Vamos a obtener una información rápida de cómo crear todo este proceso y cómo asegurar nuestro backend. El concepto que se sigue en cada servidor o servidor de autenticación es el siguiente. En primer lugar, el usuario está iniciando sesión usando su DNI o correo electrónico y contraseña. Y entonces el servidor de autenticación le responderá con autenticado. Si tiene las credenciales correctas. Y gt, que se llama JSON Web Token. Y este token será devuelto al usuario. Por lo que el usuario puede usarlo para obtener las otras API como productos y pedidos. Y por supuesto, el usuario no tiene todos los derechos para hacer lo que quiera con el back-end. Por lo que podemos diferenciar entre los administradores y los usuarios, pero están en la misma tabla. Por lo que algunos usuarios tendrán una habilidad especial para hacer algunos productos
creando, creando pedidos, quitando o cambiando el estado del producto, etcétera. Entonces cuando el usuario tiene este token, puede pasarlo con cualquier llamada API, por ejemplo, creando un producto al servidor y a la API que creamos previamente. Y entonces el servidor dirá, Sí, estás verificado y puedes hacer la llamada API. Por lo que usuarios aquí o el servidor aquí, somos respuesta ya sea con autenticado, lo eres. Está bien. Obtienes la respuesta, obtienes lo que hiciste. Y además, si no hay autenticación, el servidor está respondiendo como si no fueras usuario autenticado para hacer esta llamada API. Por lo que en las próximas conferencias, veremos los pasos principales como los siguientes. Entonces primero echaremos un vistazo al modelo y esquema de usuario. Por lo que podemos crear exactamente el esquema que necesitamos para los usuarios. Exactamente cómo lo hicimos antes con los productos. Y luego vamos a publicar todos registrar un nuevo usuario con una API de descanso. Entonces cuando tengamos un usuario en nuestro e-sharp, así lo vamos a registrar y luego puede hacer sus pedidos. Hashing la contraseña del usuario. Por supuesto, no vamos a guardar la contraseña en la base de datos exactamente en ¿verdad? Por lo que tenemos que hacer que la contraseña de alguna manera sea hashed. Entonces si hay algún ataque y alguien le dijo a una base de datos, entonces no volverán a utilizar la contraseña de usuario en nuestra tienda online. A continuación, veremos cómo conseguir usuario y lista para obtener lista de usuarios, pero estamos excluyendo la contraseña. Por lo que vamos a aprender a excluir partes de nuestras API para luego actualizar los datos del usuario con y sin contraseña. Por lo que a veces un usuario quiere actualizar su perfil. Entonces solo quiero cambiarme el nombre, ¿verdad? Quiero cambiar mi dirección. Entonces solo digo que quiero actualizar estos datos, pero no quiero actualizar mi contraseña. Pero también cuando he olvidado mi contraseña, puedo restablecerla. Y luego en este caso vamos a actualizar los datos del usuario con la contraseña. Después iremos a la parte importante donde vamos a proteger las API. Entonces, por ejemplo, no cualquier usuario es capaz de crear un producto. Sólo el administrador. Además, no cualquier usuario es capaz de cambiar el estado del orden, sólo los elementos. Por lo que vamos a ver cómo proteger estas API. Por lo que el usuario no puede enviar ninguna solicitud sólo si lo es, está autenticado. Y luego ver cómo buscar en el usuario después de que creamos este usuario. Por lo que la persona puede iniciar sesión en la tienda y obtener un token para que pueda usarlo para obtener un producto o hacer un pedido. Además, como hablamos antes, tal vez el servidor pueda responder con error de autenticación. Entonces cuando estás solicitando una API y no estás autenticado, entonces obtendrás un error. Veremos cómo manejar eso. Además, sólo somos factura para agregar más información secreta al usuario, por
lo que a través del token. Por lo que también podemos especificar o diferenciar entre los usuarios y los administradores. Entonces podemos decir algo así como es admin, pero donde puedo ocultar esta información. Porque si lo pongo como avión, entonces todos pueden cambiar los datos y decir, yo soy administrador y él no puede tener acceso. Pero aquí vamos a ocultar el token de es admin dentro del token. También al final para las estadísticas, como siempre lo hacemos, obtenemos el recuento de usuarios o cuántos clientes tenemos en nuestra tienda online. Eso es todo por ahora. Entonces vamos y empecemos con el esquema de usuario.
35. Modelo y esquema de usuarios: Como teníamos en nuestro modelo de usuario antes, vemos que necesitamos un nombre y correo electrónico y contraseña, etc. Así que construyamos nuestro esquema de usuarios exactamente cómo lo tenemos en este modelo. A la derecha. Ya los escribí para que podamos repasarlos rápidamente. Y luego se puede implementar desde el código que voy a subir a los recursos. En primer lugar, el nombre del usuario es una cadena y se requiere. En segundo lugar, el correo electrónico es una cadena y también verdadero requerido. Y también el hash de contraseña. Dijimos que guardaremos la contraseña hashed en la base de datos. Será una cuerda y se requiere. El número de teléfono del usuario también será una cadena o un número. Y con lo verdadero y se requiere. Aquí, identificaremos al usuario si es administrador en la tienda o no. Por lo que será un booleano y el valor predeterminado es falso. El domicilio que se utilizará para el envío del pedido del usuario. Entonces podemos usar una calle como una cadena, y el valor predeterminado es el valor vacío. Apartamento también es String. Zipcode es una cadena, ciudad y país. Y al final tenemos un esquema de usuario, como lo hicimos anteriormente con los productos, creamos un ID virtual. Entonces obtendríamos identificación de esa manera, no de esa manera. Por lo que es más amigable para el usuario o front-end. Por lo que podemos usarlo en el front-end como un ID normal para buscar datos de usuario o identificar a un usuario. Y aquí habilitamos los virtuales para el esquema. Y aquí la exportación normal del módulo y el esquema. Entonces todo esto se trata del esquema de usuario. Nos moveremos ahora para crear un usuario o usuario registrado en nuestra tienda online.
36. Registrar una nueva API REST de usuarios: En esta conferencia, veremos cómo registrar o publicar un nuevo usuario como cualquier solicitud de post. También podemos publicar los datos del usuario en el cuerpo de la solicitud y luego enviarlos a la base de datos. Entonces para que sea rápido, Vamos a copiar una de las solicitudes de post que tenemos antes, por ejemplo, la categoría. Entonces vamos a copiar este y luego pegarlo en nuestro módulo de rutas de usuario y empezar a agregar las solicitudes de cuerpo en base al modelo que teníamos antes para el usuario. Entonces, sentiremos todos estos campos como si los tuviéramos desde el front end como normales y pegarlos aquí en nuestra solicitud. Por lo que antes que nada, ajustaré esto para ser usuario. Y aquí usaríamos modelo de usuario. Y luego esperaré para guardar al usuario. Y luego si no hay usuario, entonces responde con el error de que el usuario no puede ser creado o registrado. Entonces vamos a sumar los campos que necesitamos ahora. Por lo que separaré estas dos pantallas y luego añadiré mis campos aquí. Entonces nombre, el mismo nombre. Y el correo electrónico será correo electrónico. Y aquí el cuerpo de correo electrónico. Hagámoslo rápido por el resto. Ahora, nuestro nuevo modelo de usuario se verá así. Entonces puse todas las llaves o todos los campos, que las obtuve del esquema. Y ahí asumí que estoy sacando eso del cuerpo de la solicitud. Por lo que este amigo y solicitud vendrán del cartero o del front end. Cómo veremos a continuación. Probemos eso con un cartero ahora. Entonces vamos a crear un objeto, por ejemplo, y voy a asignar un usuario y un hash de contraseña y toda esta información en ese objeto. Entonces, ¿cuál será la ruta completa para eso? Será la ruta API y luego los usuarios. ¿Por qué? Porque en el app.js, teníamos antes, aquí se definen todas las rutas de API. Entonces estoy diciendo productos AP US y luego asigno las rutas de productos. Y entonces aquí tendremos usuarios. Por lo que en nuestra API, usaremos usuarios. Entonces yendo al front end, Vamos a copiar una de las API que teníamos antes y pegarla aquí. Y aquí. En lugar de productos, diremos usuarios. Eso es perfecto. Entonces vamos a añadir un post. Y luego en el cuerpo, vamos a sumar una fila. Y el tipo de esta fila es JSON, porque el usuario enviará los datos en formato JSON. Y entonces vamos a crear aquí nuestro objeto. Entonces yo diría el nombre, y le asigno cualquier nombre, por ejemplo, James, y lo mismo para el resto. Entonces, vamos a sentirlas. Entonces tenemos aquí el hash de contraseña, el número de teléfono, el administrador, Sí o no, departamento, código postal, ciudad y país. Por lo que en este caso, tendremos un usuario el cual tiene estas propiedades. No debemos poner la contraseña así. Entonces tenemos que hachearlo, como veremos en la próxima conferencia. Por lo que ahora planteo los datos y obtengo toda esta información. Por lo que tenemos aquí nombre que nombre de usuario, y los datos y toda la información que ingresamos. Y también la API respondió con ID y subrayado ID. Por lo que el usuario ha creado en la base de datos. Vamos a revisar nuestra base de datos sobre Atlas. Entonces cuando vayamos a nuestro clúster y luego colecciones, accederé a nuestra base de datos, que es de usuarios o base de datos de e-shop y los usuarios de mesa. Y veremos que aquí se crea el usuario. Creo que me perdí un campo el cual no se envía con la API, así que tenemos que agregarlo. Entonces sumémoslo aquí, que es calle. Entonces le ponemos tres también, y son 3s. Por ejemplo, 100. Voy a añadir diferentes usuarios con diferentes nombres para sentir nuestra base de datos. Entonces diré James, por ejemplo, yo diría Tom y Tom aquí. Y la misma contraseña, Asumamos que tiene 777 aquí y la misma dirección por ejemplo. Y vamos a enviar, enviar. Tendremos también lo mismo que también otro usuario como Mike. Tendremos aquí, Mike pequeño m. y también la misma información como digamos aquí 88. Y el número de calle, por ejemplo, cinco, el piso es 4. Entonces en este caso, en nuestra base de datos teníamos tres usuarios. Como veremos aquí. Estoy refrescando la página. Y veremos aquí que tenemos tres usuarios.
37. Hashing la contraseña de usuario: Guardar la contraseña, en este caso como texto plano no es seguro porque si alguien consiguió de alguna manera nuestra base de datos, verá la lista de todas las contraseñas de todos los usuarios en nuestra base de datos. Por lo que es mejor de alguna manera hash o codificar alguna manera para que nadie pueda entender qué es esto, la verdadera contraseña detrás de este hashing o está codificando. Para ello, hay una biblioteca,
es proporcionada por NodeJS. Se llama descifrar el js. Podemos instalarlo aquí en una nueva ventana. Por lo que MPM instalar ser agarrado JS. Y voy a instalar esta biblioteca y luego importarla en mi aplicación. Por lo que yo diría causado, ser agarrado y requerir descifrar JS. Entonces, ¿cómo vamos a utilizar esta biblioteca? Por lo que no le pediré al usuario ni al front-end un hash de contraseña. Pediré una contraseña normal, pero internamente en mi back-end, encriptaré esta contraseña. Por lo que aquí voy a decir ser crypt dot, hash sync. Y luego Hash Sync pedirá una cuerda y también algo llamado sal. El sal es, por ejemplo, como información extra, extra secreta para que cualquier persona no pueda descifrar este hash. Entonces por ejemplo, añadiré aquí mi secreto. Se puede agregar cualquier secreto. Por ejemplo, se puede decir mi cigarrillo. Se puede agregar cualquier cosa. Añadiré aquí, por ejemplo, número, es 10. Y no le pediré al usuario un hash de contraseña, pero le pediré simplemente una contraseña. Probemos eso ahora y veamos qué nos responderá
el servidor o el backend después de cifrar la contraseña. Entonces aquí, vamos a crear otra contraseña de usuario, no hash de contraseña. Por lo que será de uno a seis también. Y tiene alguna información como antes teníamos. No lo hagamos admin por ejemplo. Y voy a enviar, y vamos a ver aquí el hash de contraseña así. Entonces no es exactamente lo que envió el usuario. Por lo que usaremos de alguna manera cuando
iniciemos sesión, vamos a comparar este hash con la contraseña que usó el usuario cuando se bloqueó. Esto también se hará por librería de descifrar. Por lo que ahora tenemos un back-end seguro u objeto seguro
del usuario para que nadie pueda resolver o descifrar esta información.
38. Obtener usuario y lista de los usuarios excluidos: Como vimos antes, que creamos solicitud GET para obtener lista de usuarios. Y también podemos crear lo mismo para conseguir un solo usuario. Por lo que copiarlo de categorías también. Y voy a cambiar esta categoría usuario. Entonces de esta manera, tenemos una lista de usuarios y obtenemos un solo usuario. Probemos eso con un Cartero. Yo voy aquí y no voy a conseguir un usuario que tenga su DNI. Ahí está así y no voy a lista de usuarios. Entonces los consigo así. Tenemos un tema de seguridad aquí. No quiero enviar la lista de usuarios con su hash de contraseña. Por lo que es mejor enviar la API o los campos API sin Password Hash. ¿ Cómo podemos hacer eso? Anteriormente, vimos que podemos excluir algunas partes de nuestra API o algunos campos. Cómo hacemos eso después de llamar al método find, ponemos Select y luego presiono Menos, y luego con menos, puedo especificar qué campo se debe excluir. Por ejemplo, aquí en este caso, diré hash de contraseña. Y luego cuando llame a la API, voy a ver que tengo campos sin hash de contraseña. Hagamos eso también para el único usuario. Pondré aquí selecto, o podemos copiar esto directamente. Funciona también con hallazgo por ID, como con hallazgo y ancho, encontrar por ID. Guárdalo. Pruébalo. Y vamos a conseguir, por ejemplo, este usuario con este ID que publiqué aquí. Y vemos que conseguimos a ese usuario sin ningún hash de contraseña. También podemos, al obtener lista de usuarios, por ejemplo, en el panel de administración de mi aplicación, solo
quiero mostrar el nombre del usuario y por ejemplo, número de
teléfono y correo electrónico. Por lo que en este caso, se
puede crear una API que sólo tenga estos campos. Por lo que puedes seleccionar no con menos, pero puedes decir nombre, teléfono, correo electrónico. Entonces obtendrás solo estos campos con esta solicitud de esta API. Entonces vamos a por ellos. Recibimos nombre, correo electrónico, y teléfono solamente. Esto es muy útil cuando quieres, por ejemplo, cuando tienes una lista de picos y luego esta gran lista, quieres reducirla. Por lo que solo desea seleccionar unos campos específicos que desea utilizar en el front-end. Volvamos a ponerlo al hash de contraseña. Por lo que solo quiero excluir el hash de contraseña y obtener lista de usuarios con todos sus detalles.
39. Inicia una API de REST de usuario y crear un tode token: En esta conferencia, veremos cómo el usuario puede iniciar sesión y utilizar las API. Por lo que se le requiere tener su correo electrónico o ID y contraseña para luego enviarlos de alguna manera con API al servidor de autenticación. Y el servidor de autenticación responderá con GW t, que es JSON Web Token, y dirá que el usuario está autenticado y es capaz de utilizar las API que están aseguradas. Empecemos a hacer la primera parte. Por lo que necesitamos crear una solicitud de post donde la persona pueda enviar su nombre de usuario y contraseña al servidor. Entonces, primero creemos una solicitud de post en nuestra API de usuarios. Por lo que diré router dot post, y luego la ruta será login. Y luego vamos a guardar un método asíncrona, la solicitud y la respuesta. Y tendremos aquí la devolución de llamada. Hagamos el login por correo electrónico. Por lo que esperaremos en su respuesta por el correo electrónico y la contraseña. Entonces primero, necesitamos saber si este usuario existe. Realmente tengo un usuario con este correo electrónico. Entonces primero, voy a crear constante, darle usuario. Y este usuario tendrá un método de peso, exactamente como lo hicimos antes de usuario y encontrar uno. Deseo encontrar usuario por correo electrónico. Entonces voy a decir aquí, encuentra uno, y entonces será objeto. Puedo asignar por qué campo quiero buscar al usuario. Por ejemplo, quiero buscar por correo electrónico. Por lo que aquí diré correo electrónico. Y ese correo electrónico vendrá de la solicitud dot body dot email. Entonces aquí tengo el usuario ya los cuales se envían a bloquear por el correo electrónico. Entonces si consigo un usuario o si no consigo un usuario, enviaré error. Por lo que vamos a hacer ese
usuario de retorno o estado de punto de respuesta para 100 puntos final. Y luego diremos que el usuario no encontró. De lo contrario, enviaré en la respuesta que se encuentre al usuario. Y será en el objeto de arena como usuario. Probemos eso para asegurarnos de que esto está funcionando. Entonces aquí necesito una solicitud de post, elimino esto, y aquí tendremos un login. Y entonces no necesitamos todo esto. Sólo necesitamos el correo electrónico, como dijimos, y la contraseña del usuario. Por lo que aquí voy a tener contraseña. Por ejemplo, digamos 1, 2, 3, 4, envíalo. Y entonces vamos a conseguir que este usuario realmente exista con este correo electrónico. Cometamos error en el correo electrónico. Haces dos, por ejemplo, voy a conseguir que el usuario no se encuentre. Por lo que ahora estamos en el camino correcto. Por lo que encontramos al usuario al que queremos iniciar sesión. Para iniciar sesión a un usuario, necesitamos comparar la contraseña que
ingresó y con la contraseña que ya existe en la base de datos. Pero ya tenemos una contraseña hashed. Por lo que necesitamos de alguna manera descontento o decodificar esta contraseña y luego compararla con la contraseña que envió el usuario. Y entonces digo, está bien, tienes razón, estás autenticado. Entonces después de estar seguro de que tengo un usuario en mi base de datos con ese email, quiero comprobar que si hay usuario que tenemos antes y descifrar Con compare cantar, no
puedo comparar dos contraseñas con el hash. Por lo que diré esa petición dot body dot password, que es enviada por el usuario y luego compararla con el hash de contraseña de punto de usuario, como el usuario, que encontré con su hash de contraseña. Entonces si este éxito de compresión, diré, por ejemplo, enviado al backend o al front end. Diremos, por ejemplo, estado de punto de
respuesta, por ejemplo, a un usuario de envío de 100 puntos. De lo contrario. Eliminamos esta parte. Y decimos, por ejemplo, con 400 y decimos que la contraseña está mal. Probemos eso. Y aquí, por ejemplo, tengo esta contraseña, nombre de usuario. Yo diría que la contraseña está mal, pero ¿recuerdas que tenemos la contraseña de esta manera de una a seis y el usuario se autenticó. Entonces cuando la contraseña es incorrecta, obtenemos la contraseña es incorrecta. Por lo que ahora llegamos a la parte importante. Por lo que vimos antes que el servidor responderá con token web JSON. Entonces desde donde obtendré token web JSON en el back-end. En Node.JS, hay una biblioteca llamada JSON Web Token. Por lo que necesitamos instalar esta biblioteca. Entonces voy a la otra ventana que tenía cuatro para la instalación, diría npm I. Y luego JSON Web Token. Instalar esta biblioteca me dará la capacidad de utilizar JSON Web Tokens. Entonces vamos a tenerlo en nuestras constantes o importaciones podemos decir, vale, universidad AVT requiere JSON web token. Por lo que puedo usar esta variable ahora o constante para generar el JSON Web Token. ¿ Cómo hacer eso? Entonces cuando el usuario está autenticado y todo va bien. Por lo que diré const token. Y luego usaría esta biblioteca JSON Web Token, ese signo hay un método ahí. Y este método aceptando el objeto, objeto con una carga útil y secreto, que es secreto o clave privada. Hablaremos del secreto. Entonces este JVP, esos letreros como vimos
antes, está pidiendo objeto. Y este objeto tendrá, por ejemplo, no se puede pasar nada. Puedo decir, por ejemplo, ID de usuario. Y el ID de usuario tendrá, por ejemplo, ID de punto de
usuario, el usuario que llegué aquí, y con su ID. Por lo que aquí puedes pasar los datos que quieras con el token. Veremos cómo resolver el token en el front end. Y también cómo podemos comparar el token en la API de autenticación. Y aquí en el segundo parámetro, necesitamos pasar un secreto. Secret es algo así como, por ejemplo, una contraseña que se usa para crear tus tokens. Por lo que puede ser cualquier cadena. Por ejemplo, diré, por ejemplo, cigarrillo. Y después de eso hay opciones. Y en estas opciones, podemos agregar algunas opciones al token, como fecha de caducidad, que veremos más adelante. Y en su solicitud enviando succes, enviaremos al usuario con su token. Por lo que diré enviar usuario y usuario, por ejemplo, correo electrónico que envíe sólo el correo electrónico y el token. Por lo que de esta manera, el usuario obtendrá el token en el front-end y podrá usarlo para acceder a la API. Vamos a probar eso. Entonces voy a Cartero. Voy a utilizar iniciar sesión. De nuevo, tenemos la contraseña equivocada. Pongamos la contraseña correcta. Y luego me dieron el e-mail y un token. Por lo que esta ficha es creada por el secreto que tenemos aquí. Para que puedas hacer lo que quieras. Y este secreto, nadie lo sabe. Por lo que no puede nadie crear un token como con los mismos tokens que se utilizan en tu tienda online. Entonces en este caso, ningún usuario envía con la API, por ejemplo, cualquier token, y entonces tendrá la respuesta, respuesta
correcta porque no tiene el Secreto. Veremos cómo resolver el token con el secreto que
creamos para que el usuario pueda obtener la respuesta correcta. Entonces si recuerdas, tenemos aquí las variables de entorno. Entonces aquí podemos poner nuestro secreto. Por ejemplo, puedo decir aquí secreto. Mi perro es agradable. Entonces digo aquí secreto. Y lo usaremos aquí. Diremos constante. Y entonces digamos que el secreto es proceso, lote, variables de entorno, punto secreto, que creé aquí. Entonces pasemos este secreto en lugar de la cuerda codificada. Volvamos a revisar de nuevo para asegurarnos de que todo está funcionando bien. Entonces conseguimos un nuevo doc. Por lo que a veces ves que cuando estás bloqueado en un sitio web al día siguiente, automáticamente estás desconectado. Esto sucede porque este token se ha caducado. Por lo que el servidor tiene algún tiempo de caducidad. Entonces cuando intentes usar este token, de nuevo, el servidor te responderá,
lo siento, este token está caducado. ¿ Cómo establecer el tiempo de caducidad? El tercer parámetro de este sinusoide, tiene opciones. Y estas opciones pueden ser una de ellas. Por ejemplo, caducar en, caducar en, puede especificar un día, una semana, un mes. Yo quiero un día. Digo una d. Si quiero una semana, digo 1 w. Así que normalmente, veamos, por ejemplo, para nuestro taller, tenemos el token para un día. Cuando vengo de nuevo después de un día para usar cualquier API y estoy cargando el token caducado, entonces el servidor dirá, lo siento, no
puedes usar esta API porque ha caducado. Vamos a guardarlo. Y veremos en la próxima conferencia cómo proteger nuestras API. Por lo que el usuario no puede usar ningún IBI solo si tiene un token.
40. Proteger la API y la intermedios de autenticación JWT: Vimos antes cómo el usuario ahora tiene el token. Ahora puede usarlo para acceder a los datos o a nuestras API, pero cómo podemos hacer que nuestro servidor esté protegido. Por lo que nadie puede usar la API sin un token. Como vimos antes en nuestro app.js, teníamos un middleware. Y el middleware está revisando todo, yendo al servidor antes de que se ejecute. Entonces aquí en este punto, quiero comprobar si el usuario está autenticado o no. El secuenciamiento. Para hacer eso, normalmente, creo en mi, por ejemplo, quiero crear alguna carpeta auxiliar. Y en carpeta ayudantes, crearé un nuevo archivo, llámalo por ejemplo, GBT dot js. Y hay y hay una biblioteca llamada Express JWT, que se utiliza normalmente para asegurar las API en nuestro servidor. Entonces vamos a instalar esta biblioteca, MPM express JWT. Y vamos a pedirlo. Por lo que diré constante expreso JWT. Y entonces requerirá de JWT express. Y la función de protección será como la siguiente. Por lo que voy a crear una función, llamarla Autenticación o nuestro JWT. Y este método devolverá DWT expresado como una función. Y esta función, tiene opciones. Hablamos antes del secreto. El secreto se basa en alguna cadena donde podemos crear nuestro token. Entonces cuando alguien pasa cualquier token a nuestro, por ejemplo, backend, necesitamos compararlo con el cigarrillo. Entonces si el token se genera en base a ese secreto, entonces tendrá acceso a la API. Pero cuando su token basado en secreto diferente, entonces la API no funcionará. Y como recuerdan, hemos importado este secreto o lo hemos puesto en las variables de entorno. Entonces aquí volveré a decir const secret y luego procesar el medio ambiente dot secret. Otra opción que necesitamos pasar también es el algoritmo está generando este token. Si vamos a la página web de JWT io, veremos que el token se puede generar en base a muchos algoritmos. Éstos son los más utilizados. Por ejemplo, estoy usando HS 256, que también biblioteca JSON Web Token está usando. Entonces podemos tener, por ejemplo, algoritmos es array HS 256. Ahora exploramos este método con el módulo, así que decimos modulo dot exportaciones es nuestro JWT. Por lo que de esta manera podremos usarlo en nuestro app.js. Entonces aquí voy a decir arriba, no usar nuestro JWT
proveniente de constante de DWT, que se requiere. Ayudantes JWT. Por lo que ahora se usa el middleware. Ahora nuestro servidor está asegurado en base al token. Entonces cualquier solicitud que
vengamos, se nos pedirá autenticación JWT. Y luego vamos aquí o expresamos JWT donde giró para nosotros. Si es posible que el usuario pueda usar esta API o no en base a su token. Entonces vamos a comprobar ahora si nuestra API está protegida o no. Por lo que pediré un get de lista de productos. Yo voy aquí, envío esa solicitud y luego veo ese error no autorizado. Por lo que no se encontró ninguna ficha de autorización. Express JWT me devolvió este error. Por lo que necesito de alguna manera manejar este error y enviado al usuario que requirió datos. Pero primero, cómo podemos agregar un token a la solicitud. Normalmente agregando un token con una solicitud vienen con autorización en Cartero. Y también en el front end, necesitas usar, por ejemplo, un token al portador. Y ficha al portador. Tendremos que pasar el token por el que obtuviste después de iniciar sesión con el usuario. Aquí hay diferentes tipos de autenticación que usaremos, la más grande. Entonces antes teníamos también aquí el token después de que nos encerramos con un usuario de Thomas. Y aquí pasaremos esta ficha. Por lo que la autorización aquí que viene para esta API cargada con este token. Por lo que después de enviar la solicitud, llegaré ahí i datos. Si elimino ese token, no lo haré. No tengo ninguna autorización al frente y veremos cómo cargar token sobre la solicitud en los encabezados. Entonces ahora estamos seguros de que nuestro token está funcionando. Entonces hagamos un cambio aquí. Hacer error. Veremos que en el error autorizado, token inválido. Por lo que aquí tenemos diferentes errores. Por lo que necesitamos manejar este error de alguna manera. Eso veremos en la próxima conferencia.
41. Gestión de errores de autenticación: Vimos previamente que obtuvimos algunos errores en nuestra API. Por lo que necesitamos manejar esos errores para que se muestren manera más bella para el usuario o el front-end. error de manejo en RGS se puede hacer simplemente de esta manera. Vamos al middleware y decimos AP US. Y creamos una función que contendría error como respuesta de solicitud de devolución de llamada. Y a continuación, en este caso, este método se ejecutará cada vez que haya un error en nuestra API. Por lo que aquí puedes comprobar si hay error. Entonces puedes ascender, por ejemplo, response.status. Al igual que por ejemplo, digamos 500 y el JSON. Y en este JSON USA por ejemplo, un mensaje y este mensaje diciendo error en el servidor. Por lo que cualquier error puede ocurrir en el back-end se llamará con este mensaje. Probemos eso con el error que obtuvimos con autorización. Por lo que cometeré un error aquí en este token. Entonces veremos aquí que obtuvimos error en el servidor porque tenemos un problema en el token, pero no sabemos cuál es el error exactamente. Por lo que podemos clasificar estos errores en función del tipo. Porque si imprimimos este error de alguna manera, digamos en lugar del mensaje, el sprint ,
este error, un error aquí y luego intentarlo, veremos que el error tiene nombre. Con base en el nombre. A lo mejor puedo clasificar los errores o podemos mantenerlo así. Depende de ti, pero podemos hacerlo más hermoso de la forma actual. Pero primero, para tener un app.js limpio, Vamos a mover este método a nuestros ayudantes. Entonces vamos a crear archivo aquí, llámalo manejador de errores a JS. Y creamos una función, lo
llamamos manejador de errores. Y tendrá los mismos parámetros, error, solicitud, respuesta, y siguiente. Y entonces podemos manejar lo que tenemos aquí. Entonces podemos tomar esto si lo pegamos aquí. Y de esta manera, podemos mantenernos al día J lo más limpio posible. Entonces aquí tenemos que decir manejador de errores. Y manejador de errores es constante. Se requiere error y aprender de los ayudantes y manejador de errores. Por lo que en base al tipo o el nombre del error, podemos clasificar nuestros errores. Por ejemplo, digamos si error nombre de punto, vimos previamente que tenemos un nombre, un error autorizado. Por lo que regresaré aquí estado 401, y el error será como un mensaje. Podemos decir que el mensaje es, por ejemplo, el usuario no lo es. Como veremos también en el futuro, tendremos tipo de los errores que se denomina error de validación. Ya veremos eso más adelante cuando vayamos a subir fotos. O decimos error nombre de punto será, por ejemplo, error de validación. Entonces la respuesta será la misma que ésta. Pero por ejemplo, vamos a ser suficientes. Ahora con el solo error, cambiaremos este mensaje cuando hagamos la subida de las imágenes y los archivos. Y para errores generales, es mejor manejar eso también. Por lo que aquí hemos devuelto estado de punto de respuesta. Y cuando hay algún general, podemos decir que es un error de servidor, así que son 500. Y luego en el JSON, envío el mensaje como error. O bien puede enviar el error directamente sin un mensaje. Aquí, nos pondremos de vuelta y regresaremos aquí también. Por lo que ahora tenemos un manejador de errores para nuestra autorización y validación. Entonces ahora en el front end, cuando hago alguna sincronización no autorizada. Entonces cuando pido una API sin ningún token, entonces obtendré este error. Y si lo hago, Por ejemplo, subo un PDF y no se me permite subir un PDF a nuestro Thurber, así que obtendré el error de validación. Y también si aquí no hay error clasificado, entonces obtendremos el error en general como mensaje en el JSON. Es agradable tener algunos comentarios siempre en el código. Por lo que puedes jugar algunos comentarios para explicar qué tipo de error es este.
42. Excluding las rutas de la API REST de la autenticación: Bienvenido de nuevo. Ahora tenemos una API totalmente segura, por lo que nadie puede usarla sin autenticación. Por lo que en este caso, el usuario, cuando quiso mirar dentro, debe estar autorizado. Entonces esto no es lógico para nosotros. Por lo que el usuario puede ser capaz de usar un login para obtener un token. Entonces en este caso, necesitamos excluir de alguna manera esta API de para ser autenticada. Entonces aquí en Express JWT, no
puedo decir a menos. Y en esto a menos que tenga objeto donde pueda localizar empático es todo el API que quiero excluir. Por ejemplo, excluyamos el inicio de sesión. Haz eso. Necesito especificar todas las API que quiero que sean excluidas. Por lo que puedo decir aquí, api slash, v1 slash usuarios y login. Por lo que quiero que este sea ejecutado. Probemos que ahora es Cartero. Y aún no estamos autorizados. Esto se debe a que necesito agregar otra tira aquí. Entonces vamos de nuevo a Cartero. Lo intentamos y tenemos el token de nuevo. Por lo que hay que tener cuidado de que hay que tener el listón aquí. Por lo que también podemos agregar el padrón. Ya agregué que sólo la API, que es exactamente igual que la publicación. Entonces aquí en los usuarios, tengo el registro de puestos, que es exactamente lo mismo que post. Por lo que el usuario también puede registrar una cuenta en la tienda online. Y aquí se usa para el administrador que quiere eliminar o agregar usuarios. ¿ Qué pasa con los productos? Productos Además, necesito de alguna manera obtener el producto de forma gratuita sin autenticación. Por lo que no necesito que el usuario sea autenticado para obtener el producto, porque no quiero que la gente inicie sesión. Entonces podrán ver mi tienda web. Los necesito para obtener la lista de productos sin ninguna autenticación. Entonces cómo podemos hacer eso, necesitamos especificar el método, el método HTTP. Por lo que puedo decir imprimirme solo que GET solicita, pero no permitas post. De lo contrario la gente podrá publicar productos en mi tienda web. Entonces para hacer eso, este método de ruta aceptando Un objeto y este objeto tiene un primer campo como URL. Y segundo campo son los métodos. Y URL, puedo especificar la URL como la tenemos aquí. Pero en lugar de eso, usaré productos. Y los métodos serán conseguir, por ejemplo, y opciones. Y esos serán una matriz. Entonces vemos aquí especificamos la URL de la API, y luego especificamos los métodos. Probemos eso. Iré aquí a obtener lista de productos. Sin autenticación. Funciona perfecto. Y cuando quite eso, no va a funcionar. Por lo que es mejor tenerlo así para que el usuario pueda obtener la lista de productos en el front-end. Yo refactoricé aquí el código, por lo que se ve más hermoso. Entonces aquí tenemos la variable API, que es que la obtenemos de la variable de entorno. Y aquí estoy usando backticks para inyectar la variable dentro de la fuerza. Pero ahora tenemos un tema. ¿ Te acuerdas? Teníamos antes en las API para productos, creamos métodos como por ejemplo, obtener destacados y obtener destacados. Necesitábamos también ser públicos porque quiero mostrar el producto de características en mi front-end sin autenticación de usuario. Entonces aquí, si quiero probarlo, voy a Cartero publicado aquí y digo tres productos destacados. No voy a estar autorizado. En este caso, necesitamos especificar también esta URL aquí. Pero entonces tendremos muy larga lista de API, sobre todo para el momento en que tengamos tienda web muy grande. Porque necesitamos muchas API. No sólo diciendo, por ejemplo, dame el producto de la función o dame el recuento de productos. Entonces lo bonito aquí que puedo usar cadena STD así, puedo usar expresiones regulares. Las expresiones regulares me están dando la capacidad de especificar todo después de los productos, por ejemplo. Entonces aquí con esta cadena, puedo poder usar esta. Entonces porque aquí tenemos tengo esta estrella. Entonces cualquier cosa después de los productos funciona. Entonces ahora después construí mis rechazos, así que aquí digo API slash, v1 slash productos. Aquí se escapa de slash. Por lo que no va a hacer ningún conflicto con el listón que tenemos que definir. Este tema trata de expresiones regulares. Por lo que necesitas saber más sobre estas expresiones regulares. Estoy usando probador siempre rechaza, que siempre se encuentra en línea. Esa es una hermosa página web llamada regex 101. Y aquí puedes probar tus expresiones regulares. Entonces aquí me llevaré éste y lo probaré en ese sitio web. Entonces digo aquí, algo así se va a permitir, Pero si cometí un error aquí, entonces no se permitirá. Entonces es exactamente esta fórmula. Entonces aquí es mejor usar expresiones siempre regulares para especificar más las API y tener menos código. Entonces probémoslo ahora. Y tenemos nuestros productos destacados. Hagamos también lo mismo, cuatro categorías. Por lo que tenemos aquí 1 y categorías. Para que podamos conseguirlos. Y por ejemplo, no podemos hacer comerlos ni publicarlos. Entonces en el futuro, cuando agrego más API, necesitamos agregar algunas exclusiones aquí, siempre en esta matriz de ruta.
43. Añade más información del usuario más secreto a tode: Vimos antes cuando teníamos un login que no podemos especificar algunos datos dentro de esa respuesta o dentro del token. En este caso, también puedo pasar algunos datos secretos, que quiero ser solo viene con el token. Entonces si el usuario no tiene esta información en el token, no le permitiré que haga algo. Una de las informaciones secretas que puedo pasar aquí es admin. Así es admin, puedo decir que este usuario es admin en la tienda online o no. Entonces en este caso, puedo permitirle que busque en el panel de administración de la tienda web o no. Por lo que el usuario normal no puede iniciar sesión, pero el administrador, que tiene admin, cierto, siguió buscando. Y por supuesto, en este caso, es mejor separar las tablas. Por lo que puedo tener usuarios y clientes, por ejemplo, o usuarios y admins. Por lo que esto lo veremos en la próxima conferencia con más detalle. Ahora tenemos el usuario y luego comprobaré usuario es admin. Entonces en este campo, en este token, puedo enviar al usuario si es administrador o no. A lo mejor me dirás por qué no puedes hacer eso en el front end, como comprobar si el usuario es administrador o no. En este caso, el usuario podrá, por ejemplo, algún hacker que tenga experiencia en programación, podrá desde front-end para iniciar sesión al panel de administración. Ni siquiera él tiene esta habilidad. Simplemente puede crear un dato falso que es administrador. Y luego se puede poner como en el JSON es admin es cierto. Y entonces puede mirar adentro. Y este caso, no es bueno en nuestra tienda online, así que es mejor tenerlo asegurado aquí. Entonces si el usuario no tiene ese yo token, que tiene es admin, entonces no podrá buscar en el panel de administración. Probemos eso y veamos nuestro token si está validado, correcto, iré a Cartero y presionaré Enviar. Eso es bueno. Tenemos ahora el token. Por lo que comprobamos este token en DWT dot io. Ve aquí, pruébalo. Diré también este admin y tiempo de caducidad. Entonces en este caso, la persona no puede construir una ficha así porque no, no tiene el secreto. Y si recuerdas, siempre la API está comprobando este token. Si se construyó con ese cigarrillo, que especificamos en nuestro backend.
44. Usuarios y administradores: Como vimos antes, que excluimos algunas solicitudes de API para no ser autenticadas. Por ejemplo, aquí los productos como Git y opciones no deben autenticarse porque estarán en público. Para que cualquier usuario público pueda navegar por los productos en mi e-shop. Por lo que el usuario de inicio de sesión que
encerró en la tienda electrónica, puede publicar productos o actualizar a productos, productos de élite. Pero en nuestro caso ahora los usuarios, nuestros clientes. Entonces si soy cliente y me metí en el tema, entonces en este caso, podré eliminar productos. Y en los primeros segundos que publique este sitio web en línea, se va a destruir. Si recuerdas, creamos en el modelo un campo que dice es admin. Por lo que aquí especificamos al usuario si es administrador o no. En nuestro e-sharp, tendremos también panel de administración. Y este panel de administración no está permitido que los usuarios normales ingresen solo a los admins. Por lo que tenemos aquí en la tabla de usuarios, algunos roles de usuario. Tenemos un cliente y tenemos admin, y ambos están en la tabla de usuarios. Tienes libertad aquí para hacer, por ejemplo, tablas separadas en este caso. Pero aquí quería mencionar los roles de usuario. Por lo que también puedes hacerlos en una misma tabla pero con diferentes roles. Hay muchas formas de hacer roles de usuario en Node.JS, pero voy con la forma más sencilla que necesitamos para nuestra e-shop. Si recuerdas, después de que el usuario consiguió iniciar sesión en la aplicación, se le
asignó un token. Y este token está sobrecargado con ID de usuario y es admin. Y aquí sabemos dentro del token si el usuario es admin o no. Y cuando el usuario envía una solicitud, la biblioteca JWT está desensamblando este token con el código secreto que se proporciona en nuestra API o en nuestro servidor. Y verá que si realmente se genera a partir de este servidor o no. Por lo que podemos identificar al usuario si tiene token de nuestra e-shop o no. Hasta ahora todo está bien. Entonces supongamos que tengo una ficha correcta. Y también quiero buscar en mi trabajo como administrador. Dejar de esta manera nos mantendrá no seguros porque el usuario, en este caso es capaz de eliminar o agregar productos. Por lo que el JWT express tiene un gran método que está revisando, por ejemplo, o revocando el token bajo algunas condiciones específicas. Para ello, hay un campo se revoca, y esto se revoca es una función. Por lo que también podemos, en la devolución de llamada, podemos especificar si el usuario es administrador o no. Por lo que creo aquí, por ejemplo, se revoca
otro método. Y esto se revoque será una función, función asíncrona. Y tendrá solicitud, carga útil. Y Don. ¿ Cuáles son esos parámetros? Solicitud es cuando quiero usar los parámetros de solicitud o el cuerpo de solicitud, quiero saber algo lo que está enviando al usuario. El carga útil contiene los datos que están dentro del token. Por ejemplo, quiero obtener es admin desde el token que está firmado con el usuario. Y este usuario me lo está enviando con los encabezados de solicitud. Entonces aquí en este caso, puedo decir si no el punto de carga útil es admin. Porque ahora tengo acceso a esto, es admin a la carga útil de ese token. Entonces voy a volver que hecho es nulo y verdadero. Entonces en este caso, estamos diciendo que rechaza el token. Entonces si alguna API autorizada llamó y nuestro usuario no es admin, entonces será rechazada. Y de lo contrario, si es administrador, podemos decir que hecho sin ningún parámetro. Como dijimos antes, sólo
tenemos dos tipos de usuario en nuestro número. Por lo que tenemos admin y usuarios. Si tienes más roles, puedes escuchar, clasificarlos. Y aquí se define lo que está en evocado o lo que se permite. Ahora, intentemos eso con cartero. Si recuerdas, aquí tenemos un usuario, Thomas Jackson, que no es administrador en la tienda. Y estos son sus datos. Entonces vemos aquí que es admin es falso. Y cuando traté de publicar un producto en nuestra API y nuevo producto, conseguiré que el usuario no esté autorizado. Cambiemos el token para estar con admin a través. Bueno, vayamos a la base de datos manualmente y cambiemos a este usuario para que sea administrador. Por lo que voy a decir aquí admin a través y luego hago clic en actualizar. Si trato ahora de usar enviar, también
me voy a quedar no autorizado. ¿ Por qué? Porque estoy usando el token con el que se carga es admin false. Por lo que necesitamos volver a mirar para conseguir un nuevo token. Por lo que voy a la API de inicio de sesión, tengo el usuario y la contraseña. Yo envío esa solicitud, me dieron una nueva ficha. Y usémoslo en nuestras solicitudes de post. Sobre la autorización. Yo juego, lo
sustituyo aquí y lo intento de nuevo. Y se ha publicado con éxito el producto gracias a expresar JWT que tiene este método. Por lo que fue capaz y nos hizo capaces de hacer, por ejemplo, este rol de usuario. Ahora nuestra aplicación es totalmente segura y nadie puede
usarla ni acceder a ella sin ninguna autorización ni ningún rol de administrador.
45. Obtener el contento de usuarios de REST: En ocasiones el administrador del taller quiere saber cuántos usuarios o clientes tiene en su taller. Entonces en este caso, necesita una API para conseguir el recuento de usuarios. Eso lo hicimos previamente con los productos. Teníamos una API, sobre todo por conseguir cuántos productos tenemos en nuestro número. Entonces vamos a copiarlo e ir a la API del usuario. Después de iniciar sesión y registrarse, podemos usarlo aquí. Y decimos lo mismo getCount, pero usuario. Y aquí decimos cuenta de usuarios. Si no cuenta de usuarios, entonces devuelve 500 y luego tu devolución para mí cuenta de usuarios. Entonces salvemos intentó a su Cartero. Vamos por ejemplo, aquí, digo usuarios y obtenemos conteo. Pruébalo. Tenemos un error porque estoy haciendo un post. Necesitamos hacer un GET. Lo intentamos de nuevo. Tenemos cuenta de usuarios para, realmente
tenemos cuatro usuarios. No hicimos también una solicitud de eliminación. Entonces, también lo copiemos de, por ejemplo, las categorías o productos. Podemos hacerlo desde aquí y conseguir éste. Y luego ponemos una solicitud de eliminación y sustituyo usuario, usuario. Y todo lo demás es usuario. Entonces como ven aquí, es exactamente igual como lo hicimos con los productos. Lo guardamos, y ahora estamos totalmente terminados con los usuarios. Estoy tan contenta de que termines este módulo y verás el código donde llegamos en la carpeta de recursos. Para que puedas descargarlo y luego probar cosas, cambiar cosas, probarlo tú mismo e intentar comparar tu código con el código que subí.
46. Backend: pedidos: Bienvenido a una nueva sección. En este apartado se relaciona totalmente con los pedidos. Por lo que hemos creado sus productos y también los usuarios. Y ahora vamos a construir las órdenes. Al igual que cada e-shop, el usuario va a tener una llena su tarjeta y luego va a revisar para enviar un pedido. Este pedido vendrá con la dirección de la persona y también las opciones de envío y cómo pagará este pedido. Y veremos también después de que el usuario se haya conectado, cómo obtendríamos también los datos del usuario y llenaríamos los datos del pedido automáticamente. Entonces sin dejar que el usuario vuelva a sentir la dirección de facturación. Por lo que vamos a dejar que los datos provengan de la información del usuario que creamos antes. Y también en este apartado, veremos cómo vincular el producto con el pedido. Por lo que veremos que el pedido contiene muchos productos. Por lo que a veces
añado, por ejemplo, camiseta y pantalón. Por lo que veremos cómo vincular el pedido con los productos. Y en el back-end o en el back office donde el administrador puede iniciar sesión y controlar los pedidos. Veremos cómo podremos cambiar el estado del orden. Por lo que será de entregado o por ejemplo, enviado, o incluso está en espera o cancelado. Por lo que aquí todo estará relacionado totalmente con el backend. No vamos a trabajar en el front end. Entonces trabajaremos con Cartero. Estudiante puede entender cómo funciona este backend aislado del front end. Espero que disfruten de esta sección. Esta sección, como les dije, no
está repitiendo las secciones anteriores. No tiene cosas nuevas. Cómo vincularemos los productos como array de artículos de pedido y también lo vincularemos a la orden se prepara. Y empecemos.
47. Modelo y esquema de artículos de orden: Bienvenido de nuevo. Ahora vamos a implementar el esquema de pedidos y pedir el esquema de artículos. Previamente, implementamos la base de datos o planeamos la base de datos en base a lo que necesitamos para la e-shop. Como ves a la derecha de la pantalla, tenemos la tabla ya de pedidos y artículos de pedido. Al igual que en la base de datos relacional, vemos la conexión entre el orden y los artículos del pedido. Empecemos primero con los pedidos, como vimos antes, con los productos y la relación con las categorías. También habíamos implementado que la categoría tiene un tipo de ID de objeto y la referencia es a tabla de categorías. Entonces hagamos lo mismo entre el pedido y el artículo de pedido. Por lo que copiaré esta parte. Iré a la orden y pondré aquí artículos de pedido. Y aquí tendremos el ID de objeto y la tabla de artículo de pedido y requerido sí, a través. Pero la diferencia aquí de que tenemos tal vez múltiples artículos de pedido, no sólo uno. Entonces en Mangoose podemos implementar eso alineando esto dentro de una matriz. Por lo que en este caso, necesitamos pasar o tener la matriz
de elementos de pedido de ID de artículos de pedido que están existentes en la base de datos. Por lo que en este caso, necesitamos crear tabla de artículos de pedido. Entonces vamos a tener un archivo aquí. Llámalo orden ítem dot js. Y tendrá el mismo esquema, Mangosta toda esta información. El asunto aquí vamos a tener artículo y aquí están los artículos que no tenemos esto. Tendremos cantidad, que es tipo número. Y se requiere. Sí, cierto. Y como vemos también que tenemos un producto. Por lo que necesitamos vincular este artículo de pedido al producto. Por lo que voy a decir aquí que voy a tener ID o tipo de ID de objeto. Tipos de esquema de mangosta que objeto ID. Y eso es referencia de este artículo de pedido será producto. Y vamos a exportar como artículo de pedido y tenerlo como artículo de pedido. Y aquí hemos ordenado esquema de ítem. Por lo que nuestro artículo de pedido está listo, el cual hemos importado aquí. Y nos referenciamos con ID de objeto en tabla de orden. Entonces la cosa aquí que tenemos muchas relaciones. Por lo que el pedido se refiere a todos los demás artículos y el artículo del pedido es relativo o se refiere al producto. Por lo que en mi solicitud, cuando pida un pedido, obtendré todos los demás artículos incluyendo sus productos y poblaré estos productos. Por ejemplo, necesito el nombre y la categoría también. Aquí agregué rápidamente los otros campos que necesitamos, la dirección de envío, 12, ciudad, código postal, país, estado
telefónico, que diremos que un valor predeterminado anexando. Entonces, cuando la persona presente una orden, entonces estará pendiente el valor por defecto o el primer estado de la orden. Y aquí tenemos también el precio total. Cómo veremos que lo calcularíamos internamente cuando creemos la orden. Y aquí, otra referencia con ID de objeto a la tabla de usuarios. Sabemos qué usuario o su desorden y la fecha ordenada entonces aquí, que el usuario no tiene que enviarlo al back-end. Se creará automáticamente con el punto ahora. Por lo que creará la hora en la que se envíe la solicitud de post. Y como recuerdas antes, teníamos aquí alguna ID virtual. Por lo que para no tener este ID de subrayado, podemos tener también ID normal. Vamos a copiarlo también y tenerlo de la misma manera. Entonces aquí dije esquema de orden, crea para mí un campo de ID virtual en lugar de ID de subrayado. Por lo que ahora estamos listos para trabajar con estas mesas. Por ejemplo, aquí tenemos orden y orden ítem, por lo que se logra esa relación entre estas dos tablas. Y ahora estamos listos para crear nuestra API con pedidos.
48. Array de la ejemplo de Refs de orden de los artículos a los productos: Por lo que el orden está vinculado a los elementos de orden por matriz. Entonces veamos y leamos ejemplo cómo el front end enviará estos datos al back-end que creé aquí y objeto de, por ejemplo, cómo el usuario enviará los datos al back-end. Entonces, en primer lugar, imaginemos que el usuario tiene un carrito y seleccionó dos productos, producto 1 y el producto 2. Y tienen diferentes identificaciones. Por lo que los artículos de pedido serán array de dos productos, y cada producto tendrá una cantidad. Entonces de esta manera, tengo matriz de artículo de pedido o su artículo tiene una cantidad y el producto. Y el resto será igual. Excepto aquí veremos que el usuario enviará el nombre de usuario, pero enviamos el ID de usuario creando el pedido. Aquí lo mismo. No enviamos el nombre de su producto, pero enviamos el ID del producto. Por lo que así es como se vincula el ID del producto
al artículo del pedido y cómo se vinculan los artículos del pedido al pedido.
49. Nuevo orden y crear artículos de orden para publicar un nuevo orden: Colocar un pedido en nuestra base de datos se requieren datos del usuario. Como vimos antes, tenemos estos datos JSON donde usuarios después de hacer la caja, él colocará el pedido en nuestra base de datos. Entonces lo que necesitamos primero para crear una solicitud de post en pedidos API, ya
tenemos una solicitud GET. Tenemos que crear ahora una solicitud de post para no repetir el mismo proceso que hacíamos antes. Copiemos la solicitud de post más simple que creamos en categorías. Y vamos aquí dos categorías, publicamos solicitud y lo copiamos, y lo pegamos en nuestros pedidos. Entonces lo que se requiere de nosotros, necesitamos crear un modelo de orden y los campos del orden que éramos, teníamos antes y creamos el esquema. Entonces supongamos el caso más simple ya que el usuario enviará esos datos. Entonces aquí obtenemos los datos. Los pego rápidamente para no repetir el mismo proceso. Por lo que tenemos del usuario los artículos de pedido todos vienen con el cuerpo de la solicitud, que es éste de aquí. Por lo que tenemos todos los demás elementos y todos los datos que son enviados por el usuario desde el front end. Arreglemos esto aquí. Yo estoy enseñando cue de esa manera cómo llamarlo rápido, así que no tenemos que volver a escribir todo respecto al pedido porque, ya sabes, siempre tenemos post request, siempre
hemos delete request. Por lo que es mejor copiarlo de solicitud básica y cambiar el, por ejemplo, el nombre cosas a caber en nuestra nueva API. Por lo que aquí hemos pedido todo ahora orden y enviado de vuelta la orden creada. Pero si recuerdas, hemos creado tabla de artículos de pedido. Por lo que el usuario no sabe en el front-end que los elementos de orden que se almacenan en la base de datos. Por lo que aquí solo enviarás estos datos. Él quiere tres veces de este producto y dos veces de este producto. Pero para buscar estos datos y almacenarlos para el administrador, esto será como por ejemplo, podemos decir un obstáculo,
un pequeño obstáculo para volver a obtenerlos de la base de datos. Pero vamos a resolver eso con Mangoose durante esta relación entre artículos de orden y pedido. Por lo que cuando se envía o crea el usuario o la solicitud de correo, tenemos que crear los ítems de pedido primero en su base de datos y luego adjuntarlos o relacionarlos con la solicitud de orden que tenemos aquí. Y como vimos anteriormente, que ordenar artículos, es matriz de identificadores de la tabla de artículos de pedido. Entonces en este caso, necesitamos array de identificadores,
identificadores que están en la base de datos de esos artículos de nuestro pedido. Entonces primero, necesitamos crear esas identificaciones o cómo Mangoose las va a crear para mí. Y luego los guardaré con la orden o los relacionaré con esa orden. Entonces aquí, no vamos a obtener del usuario directamente el artículo de pedido que está conteniendo el producto y la cantidad saber, necesitamos sólo array de identificadores. Por lo que podemos decir pedidos de artículos ID. Y este ítem de pedido los identificadores vendrán de nuestros artículos de pedido creados en la base de datos, que haremos aquí. Por lo que tenemos esta constante const ID de artículo de pedido, que los obtendremos después de la creación del artículo de pedido en la base de datos. Por lo que necesitamos de alguna manera primero dos bucle dentro de los elementos de orden los cuales se envían desde el usuario. Por lo que voy a decir solicitud de cuerpo de
punto, elementos de orden de punto para bucle siempre usamos mapa porque sabemos que el usuario enviará array, array de elementos de orden. Y aquí tendremos o su artículo, un artículo de pedido. Y luego dentro de este artículo de pedido, creamos let new order item, new order item model. Por lo ordenado modelo de artículo. Necesitamos tenerlo de nuestros modelos o de su artículo. Es exactamente como estamos creando una nueva categoría o un nuevo producto, o es como una solicitud de post. Entonces digo aquí, o el ítem, ¿cuáles son los campos en el ítem de pedido? Contamos con cantidad y un producto. Entonces voy aquí, digo cantidad. Por lo que ya tenemos un elemento de pedido de la lista de los ítems de orden que ellos usuarios. Y así digo aquí, pide cantidad de punto artículo y también producto, que contendrá el ID del producto. Entonces desde el artículo de pedido punto-producto, entonces necesitamos guardar este artículo en la base de datos. Entonces digo let o el nuevo ítem de orden, la misma variable podemos usarlo. Esperar un nuevo artículo de pedido que creamos previamente o el modelo, y no seguro. Entonces aquí estamos guardando el artículo de pedido en la base de datos. Entonces cuando hacemos un bucle en los artículos de orden, por
lo que por cada elemento de pedido, lo
guardaré en la base de datos. Pero quiero que este mapa me devuelva sólo las identificaciones. Entonces aquí digo devolver no el nuevo artículo de pedido, sino el nuevo ítem de pedido ID de punto. Por lo que en este caso, obtendremos sólo los IDs en una matriz. Por lo que creamos los ID de pedido y los adjuntamos a la orden, y vamos a guardar el pedido. No lo guardemos ahora en la base de datos, solo
enviemos la orden se crea o el
modelo de orden al front-end al usuario después de que publique la solicitud. Entonces probemos eso con Cartero. Voy al cartero y lo sustituyo por pedidos basados en nuestra API, cómo lo creamos. Y entonces pondré aquí los datos. Primero revisemos el token de autenticación y luego el cuerpo, lo que tenemos este JSON por ejemplo, ya
estoy obteniendo estos ID de nuestra base de datos. Por lo que ya debemos tener estos identificadores en la base de datos. Enviemos la solicitud de post. Vemos que nos dieron un error. Viene el error, Veamos en la consola de nuestro servidor de prueba o de nuestro servidor, veremos que aquí tenemos un peso. Esto se debe a que tenemos aquí un peso, pero Esto requiere una función asíncrona. Quiero decir aquí. Entonces aquí tenemos un peso y esto requiere una función asíncrona. Entonces en este caso, no
podemos hacer esperar dentro de una función normal. Necesitamos colocar una función asíncrona básicamente es ésta. Por lo que diría aquí asincrónico y guardar e intentarlo de nuevo. Y veremos que se crea la solicitud o se enfría la orden, pero los elementos del pedido están vacíos. Hagamos un seguimiento de estos artículos de pedido para ver por qué no se crean. Para rastrearlos. Podemos hacer registro de consola de orden, artículos, IDs. Y veamos en la consola qué nos va a devolver. Por lo que aquí salvé. Y luego intentémoslo de nuevo. Comprobemos la consola. Veremos que hemos vuelto a las promesas. Por lo que no estamos regresando realmente el DNI, estamos regresando unas promesas. Esto porque tenemos aquí función asíncrona y esperamos, y estamos regresando con esperar una promesa. Entonces de alguna manera necesitamos resolver esas promesas. Debido a que el usuario está enviando matriz de artículos de pedido, no sólo uno. Entonces tenemos que combinar esas promesas juntas. Entonces aquí tenemos una matriz de promesas para combinarlas, uso promise dot all. Entonces aquí en este caso, tendré una promesa de retorno o una promesa, que se resolverá después de eso aquí, antes de que creemos el orden. Entonces tratemos de consolidar. Otra vez. Vemos que conseguimos una promesa, no a promesas como antes. Por lo que necesitamos resolver esta promesa. Cómo podemos resolverlo, podemos crear una nueva constante. Llámalo El ID de pedido es sólo o pedir artículos. Ids, por ejemplo, resueltos. Porque esto es una promesa. Entonces puedo decir aquí, uh, esperar a que esto se resuelva y luego imprimirme los para mí. Y luego sustituyo este ID de artículos de pedido por los identificadores de artículos de pedido resueltos. Vamos a intentarlo de nuevo. Eso es genial. Llegamos a ellos otra vez. Y en el registro de la consola, tenemos los dos ID que se crean de nuestros artículos de pedido. Comprobemos eso en la base de datos. Después de iniciar sesión, veo aquí orden artículos se crea la tabla. No creé que reserven atlas es muy inteligente. Entonces basado en el modelo que creé en mi base de datos o en mi código, es crear la tabla para mí. Entonces aquí si voy a pedir artículos, voy a ver para pedir artículos los cuales se crean en base al cartero y tienen el mismo ID que están en la base de datos. Por lo que ahora estamos listos para crear nuestro pedido. Entonces aquí no tenemos nada, así que no tenemos mesa de pedidos. Eso es porque comentamos este ahorro. Entonces aquí, después de que se cree o guarde la orden, entonces la reenviaré de nuevo. Quitemos este registro de consola para no tener nuestro registro lleno de datos innecesarios. Entonces aquí iré ahora al cartero. Hacer un pedido. Genial. Ahora hemos creado un pedido, y tenemos aquí, se crea
el nuevo ID de la orden. Por lo que si vuelvo a ir a Atlas, voy a refrescar. Y veremos que la tabla de pedidos se crea automáticamente porque tenemos modelo de pedidos. Entonces lo que le pedí a Mangoose que creara para mí este modelo de orden, entonces él creó la tabla. Entonces aquí tenemos otros artículos, ID de
objeto de los nuevos artículos de pedido que se crean de nuevo aquí. Por lo que cada vez que hago el pedido, creo un nuevo pedido artículos. En la próxima conferencia, veremos cómo obtener artículos de pedido o el pedido en sí de manera más detallada. Por lo que no vamos a obtener solo identificaciones, vamos a obtener más detallados. Veremos el artículo del pedido, lo que contiene, y también todo. Por ejemplo, qué usuario lo creó, no sólo IDs.
50. Consigue el detalle de tu orden y rellenar los productos en artículos de pedido y los datos del usuario: De acuerdo, ahora vamos a conseguir una lista de órdenes ya que ahora tenemos un pedido en la base de datos. Ya hemos creado una solicitud GET para una lista de pedidos. Entonces probémoslo ahora con un Cartero. Iré aquí, crearé lo mismo que post request, pero será un GET y la autorización porque siempre cuando crea una nueva API, debo tenerla autenticada. O excluimos esta API de la autenticación como vimos anteriormente. Por lo que ahora usaré este token get list ratones, tenemos lista de órdenes. Por lo que ahora sólo tenemos un pedido en la base de datos. Y lo estamos consiguiendo con la solicitud GET porque es una matriz. Vamos a poblar al usuario para que podamos ver los detalles del usuario dentro de esta solicitud. Porque por ejemplo, quiero ver en el panel de administración, en la tabla de órdenes, quiero ver a los usuarios que los ordenaron. Entonces aquí vamos en el código y sólo decimos punto poblar. Qué poblar al usuario. Guardar. Inténtalo de nuevo con Cartero. Obtenemos ahora el detalle del usuario, todo su detalle. Pero para mí como usuario o como administrador, no
necesito toda la información del usuario. Entonces sólo quiero, por ejemplo, su nombre. Para hacer eso. Acabamos de poner después de la población del usuario, ponemos los campos que queremos poblar. Entonces todo lo que tengo, por ejemplo, el nombre y en Cartero, cuando envío esa solicitud, me da sólo el nombre. Vamos a publicar otro pedido con un dato diferente. Por ejemplo, diré aquí en lugar de país, República
Checa, pondré a USA. Entonces aquí voy a ir allá y
decir, no uso un y un número diferente. Ejemplo, 1, 2, 3, 4, 5, 7. Por lo que aquí publicaré otra solicitud u otro pedido. Por lo que en este caso, voy a entrar ahí menos dos órdenes. Por lo que también podemos ordenar los pedidos por fecha. Entonces porque ya tenemos ese campo ordenado fecha, así que tenemos la fecha aquí por el punto. Ahora, también podemos ordenar esto por fecha. Para ello, Es muy sencillo. Simplemente voy aquí y después de la población del usuario, digo ordenar basado en la fecha de la columna ordenada. Entonces aquí tenemos, recuerdas una fecha ordenada. Y en base a esta columna, quiero ordenar mi salida. Entonces vamos aquí, Cartero, intentamos volver a conseguir la lista, y vemos que los conseguimos ordenados por fecha. Como pueden ver, el orden aquí es de más antiguo a más nuevo. Por lo que anteriormente tenemos este el 23 de diciembre en este momento. Y ahora tenemos éste. Por lo que podemos pedir de los más nuevos a los más antiguos. Y creo que esto que interesa al usuario para hacerlo. Simplemente alineamos esto en un objeto y luego decimos que este objeto igual a menos uno. Entonces cuando digo en el método de ordenación, este caso, entonces significa que ordenarlos de los más nuevos a los más antiguos. Entonces si me refresco y voy a Cartero de inmediato, y veremos que tenemos el 1 más nuevo primero y luego el más antiguo. Se puede consultar la documentación del método de ordenación. Tiene muchas características. Por lo que puedes utilizarlos para ordenar tus salidas en función algún campo específico o en algún orden específico. Ahora obtengamos un detalle de solicitud o un detalle de pedido. Entonces lo mismo está aquí. Publico o consigo esta solicitud pegada aquí. Y entonces en lugar de tener el tipo y población, tenemos hallazgo por identificación. Y aquí especificamos el DNI. Y el DNI se solicitará params de punto. Debido a que sus parámetros tomaron ID. Y nos renombraron esto para ordenar sólo en lugar de lista ordenada. Aquí tenemos orden, orden, orden. Voy ahora al front end y consigo, por ejemplo, este. Después de eso, pongo este DNI del pedido y envío esa solicitud. Y voy a conseguir sólo este orden con población del usuario. Llegamos ahora al punto importante. Tenemos aquí, los artículos de pedido sólo como IDs. Queremos ver los productos están dentro de estos artículos y la cantidad que, limpiemos un poco nuestro código. Entonces tenemos aquí poblar. Y también habremos enseñado poblado de otro campo que es artículos de orden. Eso lo probamos ahora. Veremos que conseguimos el producto y la cantidad. Pero y si también quiero poblar este producto de
una manera que veamos el detalle del producto dentro o los artículos. Entonces como vimos aquí, el usuario, nos dieron todos sus detalles. La diferencia aquí que tenemos array de ellos. Por lo que necesitamos saber cómo poblar el producto dentro de esta matriz de artículos de pedido. Para ello, tenemos aquí una forma diferente de poblar. Entonces, en lugar de hacer esto, el método poblado será un objeto que aceptará una ruta. Y aquí pongo artículo de pedido o pedido artículos. Y dentro de este objeto, digo también poblar para mí el campo, que se llama producto. Entonces lo pondré aquí y lo intentaré de nuevo. Ya veremos como una magia. Obtuvimos toda la información sobre los artículos del pedido. Y en nuestra base de datos, el orden se ve así. Entonces si actualizamos, tenemos nuestro pedido solo con ID y los artículos de pedido son solo ID. Entonces de esta manera, estamos manteniendo un tamaño pequeño los documentos de la base de datos, y estamos haciendo las relaciones usando la flexibilidad de Mangosta. Si vemos también aquí que el producto tiene la categoría y la categoría también es id Si quiero poblar también la categoría, no podemos hacer eso. No hay problema. Podemos decir también esto es poblado. Este es un camino que se llama producto y luego poblar categoría que está dentro de este producto. Entonces si vamos de nuevo, manda esta solicitud, veremos que la categoría también está poblada para todo el pedido. Entonces para hacerlo más limpio, no
podemos tener aquí este camino, así podemos entender la forma en que se construyó. Entonces aquí tengo decir aquí, éste. Ahora tengo el código limpio. Entonces esta es la forma de hacer población de la relación entre las tablas en la base de datos. Vemos en el futuro. Ahora cómo eliminamos estos pedidos y cómo actualizamos el estado de este orden, que será en la próxima conferencia.
51. Actualizar el estado de tu orden: Después de que hicimos la solicitud GET y post solicitud de pedido, Hagamos la solicitud de actualización como los requisitos de mi emisión arriba. El administrador de la A-Sharp sólo quiere cambiar el estado de la orden. Por lo que cuando algún cliente hace un pedido a la tienda electrónica, el dueño de la tienda quiere procesar este más viejo. Por lo que de esta manera, la orden será trasladada de flexión y luego a tramitar y luego por ejemplo, a turno y luego a estado entregado. Por lo que necesitamos sólo actualizar el estado de la orden. Vimos previamente cómo estamos actualizando, por ejemplo, el producto. Estábamos actualizando todos los campos para que el usuario o el front-end me manden de nuevo todos los campos. Pero aquí en las órdenes, sólo
necesitamos actualizar un campo, que es el estado, que es éste. Para hacer eso, hagámoslo rápidamente. Copiamos una de las solicitudes, por ejemplo, de las categorías. Conseguimos este. Lo copiamos a los pedidos. Ese puesto externo ID. Necesitamos el DNI. Y entonces diré aquí que tengo la orden. Aquí. Pido el modelo de pedido. Y aquí no pasamos nada, sólo el estatus. Por lo que el estado vendrá de requisito o solicitud de cuerpo de punto, estado de punto. De esa manera, si no hay un pedido asignado con este ID, entonces estoy enviando error. De lo contrario, estoy enviando de vuelta el pedido actualizado. Por supuesto puedes agregar todos los campos que quieras actualizar. Pero los requisitos para esta e-shop, solo
necesito actualizar el estado. Guardémoslo y probémoslo con cartero. Por lo que ya tenemos este orden, Vamos a actualizar. Entonces tendré una fila y el tipo de eso o es JSON. Por lo que aquí diré estatus será, por ejemplo, enviado. Por lo que puse aquí enviado. Y también tenemos que cambiar esta petición por poner. Y lo enviamos. Y obtuvimos el mismo orden que un turno. Entonces volvamos a conseguir la orden. Tenemos un llegar aquí, checa. Ya vemos el detalle del pedido y tenemos el estado del pedido será enviado. Eliminar la orden será la misma. Vamos a copiarlo también la orden Eliminar de la categoría. Y aquí vamos a agregar orden, encontrar por ID, y luego me va a devolver orden. Si hay o ahí, entonces regresa el verdadero éxito. De lo contrario enviar error o no encontrado nuestro algún error en el servidor. Entonces intentemos eso con Cartero también. Voy a cambiar esto de llegar a borrar. Eliminamos y obtenemos el éxito. Se suprime esa categoría. Tenemos que arreglar esto porque no es categoría. Tenemos que hacerlo como orden. Y aquí también orden. Entonces ahora si quiero conseguir una lista de las órdenes, nuevo, tendremos sólo un pedido, que es el que llamó a USA. Y ahora sólo teníamos uno. A lo mejor alguien preguntará ¿Qué pasa con los artículos del pedido? ¿ Están borrados o no. Comprobemos eso en la base de datos. En nuestra base de datos teníamos artículos de pedido y deberíamos tener dos pedidos solo para pedir artículos, pero vemos que los artículos de pedido siguen aquí. Entonces tenemos un tema aquí. También necesitamos eliminar los elementos de orden del pedido que se borra. Por lo que voy a dejar esto como un ejercicio para ustedes. Por lo que el ejercicio será solo para eliminar los artículos ordenados también después de que eliminemos el pedido. Y luego los veré en el siguiente video para ver la solución, cómo implementamos la eliminación de artículos de pedido después de eliminar el pedido.
52. Cálculo de un orden con mongoose: Enviar el precio total desde el front end no es una buena práctica. Por ejemplo, si algún hacker pudo enviar un pedido con un precio total falso de alguna manera, entonces se almacenará en mi base de datos con un precio total falso. Entonces tal vez alguien tiene orden era de cien, diez cientos dólares, pero lo fingió y lo hizo con 2 dólares. Cuando tenga una tienda online muy ocupada, no la
detectaré. Por lo que es mejor después de que el usuario esté enviando los artículos del pedido, ID, o los artículos del pedido en general al backend. Calculamos eso internamente en el back-end en base a lo que tenemos en la base de datos. Por lo que la fuente de la verdad es una base de datos. Entonces lo que necesito hacer es recorrer
los artículos de pedido que obtuve del usuario o del front-end. Y luego resuelvo esos artículos de pedido. Obtengo el producto relacionado con el producto. Y con la cantidad, multiplico eso y calculo el precio total. Entonces todo viene de la base de datos. Entonces intentemos hacer eso. Aquí. Tenemos los identificadores de artículo de pedido resueltos. Entonces de alguna manera necesitamos reemplazar esto por una variable que calculamos internamente. Entonces llamémoslo un precio total. Y este precio total vendrá de una constante donde vamos a resolver estos artículos de pedido. Entonces de la misma manera, hacemos clic Crear una constante, llamarla un precio total. Porque vamos a bucle en los artículos de pedido exactamente de la misma manera aquí. Entonces lo haremos como promesa punto todo. Por lo que aquí voy a obtener los ítems del pedido identificaciones resueltas y mapa sobre ellos. Y me van a pedir ID de artículo. Voy a recuperar el elemento de pedido de
la base de datos porque está almacenado aquí ya en la base de datos. Entonces exactamente como aquí, diga asíncrona para nuestro artículo de pedido. Y obtenemos el artículo del pedido a través de espera. Y obtenemos también el modelo de artículo de pedido. Y encuentra por DNI, el DNI que llegué aquí del mapa. Y luego dentro de este artículo de pedido, obtendremos solo el ID del producto y la cantidad. Por lo que también necesitamos poblar el producto. Y para hacerlo más rápido, sólo
podemos pedir el precio. Por lo que aquí me van a devolver pedido artículo con el campo de producto dentro de él, sólo el precio. Y luego iré a Create Constant precio total, solo uno. Y diré el artículo de pedido que obtuve de la base de datos, punto-producto, precio de punto, porque tenemos el precio poblado ya multiplicado por la cantidad de punto del artículo de pedido. En este caso, obtendré también la cantidad multiplicada por el precio. Obtendré el precio total de un artículo. Entonces mapeo sobre toda esta matriz, me gustaría después de eso, volver, sólo el precio total. Entonces aquí tendré matriz de precios totales para cada artículo de pedido. Así que vamos a tratar de consola log esta matriz de precios totales para asegurarnos de que todo va a funcionar bien. Y voy a publicar una nueva solicitud o un nuevo pedido. Tengo un error aquí porque soy consola log una promesa. Entonces aquí, como lo hicimos antes antes, que tenemos aquí sólo una promesa, devuelta, prometida en absoluto, toda promesa combinada, ponemos un peso. Entonces es simplemente que también podemos poner un peso aquí, como el peso y resolver esta promesa después de que todo se haga por dentro. Vamos a intentarlo de nuevo. Reinicia nuestro servidor. Intenta publicar. Veremos aquí que tenemos matriz de dos artículos o pedir artículos con su precio total. Por lo que necesitamos hacer fusionar o resumir estos dos precios a uno. Para ello, no podemos simplemente hacer precio total constante. Y esta matriz de precios totales, lo
reduciré. Y es método reducido. Es una forma famosa de obtener la suma de todos los números dentro de la matriz. Entonces tengo a y b, regresa para mí un plus B. Y aquí agregamos un 0. Entonces el valor inicial es 0 y luego combinar a y B, o combinar cada elemento de esta matriz. Entonces aquí, después de obtener el precio total, podemos colocarlo aquí, reiniciar nuestro servidor, hacer una solicitud, y veremos que creamos una solicitud de post con el pedido. Y el precio total es 146, que se combina de dos artículos de pedido. Vamos a obtener también este detalle del pedido. Vamos aquí, lo ponemos en la solicitud GET para obtener los detalles. Entonces veremos primer producto, tenemos un 32 y la cantidad es de tres. Y también el segundo producto es la cantidad 2, y el precio es de 25. El precio total será de 146. De esta manera, garantizamos que el precio total viene solo de nuestra base de datos, no del front-end. Entonces, en primer lugar, creamos los artículos de pedido como vimos antes. Después nos dieron el precio, precio total de cada artículo de pedido, y luego los combinamos o los resumimos en un solo número. Y luego creamos el pedido con el precio total, que viene totalmente de la base de datos.
53. Obtener ventas de la tienda de E venta de la tienda completo usando $sum: Como siempre. Y al final de cada módulo, hacemos siempre alguna solicitud post o GET de algunos datos estadísticos. De lo que me vino a la mente aquí que por ejemplo, quiero mostrar en el tablero del panel de administración de la aplicación cuánto totales colinas tengo en toda mi e-shop. Por lo que el dueño de la tienda, cuando se
encerró en el panel de administración, ve las ventas totales y estará contento. Entonces como siempre, vamos a crear una solicitud get. Y la ruta será get y ventas totales. Y aquí vamos a, después de que pasemos esta API, después de los pedidos, obtendremos el total de ventas. Por lo que aquí tenemos asíncrona, solicitud y respuesta. Y será un método ROM. Y definimos una variable, lo
llamamos ventas totales. Y obtendremos el total de ventas directamente de MongoDB. Entonces mediante el uso de Mangoose, aquí, tengo aguardado, el modelo de orden. Entonces uso un método llamado agregado. Y el agregado, puedo agrupar como unirse, podemos decir en base de datos relacional, todas las tablas o todos los documentos dentro de esa tabla a uno. Y luego consigo uno de estos campos en esa tabla y uso uno de los métodos de Mangosta, como por ejemplo, algunos en ese campo. Por lo que me devolverá la suma de todo el campo, que nombre, Precio total. Si recuerdas, tenemos un precio total calculado ya, cómo vimos en la conferencia anterior en cada orden. Por lo que necesitamos sumar todos estos precios totales en uno usando algunos. Entonces para hacer eso, tenemos aquí un objeto. Estamos agrupando la mesa. Y aquí en el método, decimos que el ID es nulo. Es así. Y nombramos el campo que queremos devolver en nuestra API. Entonces digo que las ventas totales son la suma. Esta es una palabra reservada en Mangosta de precio total. El precio total es un campo en el orden, y lo hemos calculado aquí mientras estamos creando el pedido. Entonces obtendré el total de ventas resumiendo todos los precios totales. Entonces comprobamos si no hay ventas totales, luego devuelto por mí, error response.status. Y luego por ejemplo, decimos 400. No enviar, el pedido, las ventas no se pueden generar. De lo contrario decimos respuesta dot enviar. Las ventas totales son ventas totales. Probemos eso ahora con Cartero, voy aquí, digo conseguir ventas totales. Enviamos una solicitud. Vemos que conseguimos array con ID nulo y ventas totales. Entonces vimos que conseguimos exactamente lo que hemos construido en el grupo. Entonces si elimino este ID nulo, obtendré error porque Mangoose no puede devolver ningún objeto sin ID o ID de objeto 2, como vemos aquí en este error, dice
que una especificación de grupo debe incluir un ID. Por lo que es mejor volver a ponerlo. O también puedes dar ID usando especificaciones de Mangosta, Es mejor ponerlo como nulo. Entonces vimos aquí que conseguimos una matriz. También podemos BOP directamente esta matriz y tomar sólo las ventas totales. Entonces podemos decir aquí, devuelto para mí ventas totales punto pop porque es una matriz. Y luego ventas totales. Entonces en este caso, obtuve el primer elemento de esta matriz, o el elemento ligero porque está devolviendo solo una matriz con un elemento. Entonces digo, dame este artículo y el total de ventas que especificé aquí. Lo intentamos de nuevo. Enviamos esa solicitud, obtendremos ventas totales es de 290 a esto porque tenemos aquí, si obtenemos la solicitud, tenemos pedidos. Por lo que el primer orden tiene 146 y el segundo orden tiene también 146. También podemos obtener cuántos pedidos se crean o se colocan en mi tienda antes de cómo hacemos un recuento total de los productos. Por lo que aquí podemos copiar esto desde la API de Producto y colocarlo en pedidos. Y decimos aquí o allá, contar nuestro recuento bajo o el conteo del titular de la cuenta y aquí ordenar. Y con documentos de conteo, obtendremos el conteo y regresaremos a nuestro conteo de pedidos, y luego lo obtendremos. Probemos eso de nuevo en nuestro Cartero. Entonces aquí digo getCount. Y veremos que tenemos tres órdenes. Por lo que ahora se completa nuestra API para los pedidos. Ya estamos listos para utilizar toda la API relacionada con los pedidos en el front end. Y en el siguiente apartado, volveremos al producto para subir las imágenes. Te acuerdas, tenemos aquí imagen e imágenes. El imagen será la imagen principal de su producto, y las imágenes contendrán las imágenes de galería de su producto. Espero que hayas disfrutado de esta sección y te veo en la siguiente.
54. Obtener pedidos de usuarios: En el front end, cuando el usuario ingresa, necesita saber qué órdenes ordenó en el historial. Por lo que necesitamos tener algo al menos de historial de pedidos. Entonces de esta manera, esta API será exactamente como conseguir menos pedidos, algo así, pero se especificará solo para un usuario específico. Entonces tomemos estas solicitudes GET y lo copiemos a la última. Y aquí diremos que quiero conseguir,
por ejemplo, usuarios mayores o pedidos de usuarios. Y necesitamos especificar como un, por ejemplo, como parámetro, el ID de usuario. Por lo que aquí decimos ID de usuario. Entonces cuando estoy enviando una solicitud desde el front-end o desde nuestra API, necesitamos especificar el ID de usuario para el cual quiero obtener los pedidos. Y como condición para el hallazgo, decimos objeto, campo de
usuario debe ser request dot params dot. El mismo paradigma que tengo aquí, ID de usuario. Y tal vez no necesitamos poblar al propio usuario. Necesitamos poblar los productos dentro de este pedido. Entonces es exactamente como lo hicimos aquí en el detalle del pedido, cómo estábamos poblando los artículos del pedido y los productos y la categoría. Copiamos ese mismo y lo pasamos aquí. Por lo que en este caso, veremos que los artículos del pedido se han poblado con los productos y ordenaron de los más nuevos a los más antiguos Para no tener nombres confusos. Vamos a renombrar esto. Por ejemplo, podemos decir usuario o su lista. Y aquí lista de pedidos de usuarios aquí también usuario ordenado. Ejecutemos el servidor. Pm inicio. El servidor está ejecutando la conexión de base de datos lista? Eso lo intentamos en Cartero. Entonces tengo aquí órdenes, obtengo órdenes de usuario, y paso el ID del usuario, cual quiero tener sus órdenes. Entonces paso éste y me dieron otros artículos. Se ven así. Y otro pedido, tiene también artículos de pedido. Por lo que tenemos los tres pedidos para este usuario. Veremos aquí el mismo nombre de usuario son el mismo ID de usuario. Siempre es n igual a 4, 4. Y aquí otro. Por lo que al final de esta sección, verás que eres capaz de crear cualquier solicitud o
cualquier API que necesites en base a lo que las necesidades en el front end. Entonces por ejemplo, llegamos aquí los pedidos del usuario y también nos dieron, por ejemplo, cuántos pedidos tengo en mi emisión. Eso es todo acerca de las API. En la siguiente sección, aprenderemos a subir archivos a nuestro servidor, como imágenes o algunos archivos adjuntos en general. En esta conferencia, hay apego
del código de recursos donde llegamos en estos ordenes. Y puedes descargarlo e intentar por ti mismo
hacer algunas cosas diferentes con las API en función de tus necesidades.
55. Backend: imagen y carga de la galería: Ahora llegamos al último módulo, que relacionado con la espalda y el desarrollo. Ahora necesitamos subir las imágenes con nuestro producto, como vimos antes, el producto contiene dos campos. Una de ellas es una imagen principal y el segundo campo son las imágenes. Entonces, ¿dónde estará más descripción sobre el producto como imágenes de una galería? Por lo que en este módulo, verá el paso principal es instalar biblioteca Walter. Biblioteca es una famosa biblioteca utilizada para subir archivos al servidor usando Node.JS. Y en el segundo paso, encontraremos la mejor configuración para nuestro e-Sharp porque necesitamos configurar esta biblioteca para usar y subir los archivos a nuestro servidor. El tercero, veremos cómo utilizar el destino y subieron los nombres de archivo. Siempre cuando el administrador suba un archivo o una imagen, debe especificar el nombre del archivo. Pero no, no podemos hacer eso por el administrador ni por el usuario. No tenemos que dejar que le ponga nombre al expediente. Podrás subir cualquier archivo y será codificado en nuestro servidor. Usar Cartero también es muy importante para nuestro caso aquí para probar la subida de imagen, veremos cómo probar la carga de imagen con un cartero usando subir un archivo o varios archivos. Y no permitiremos que el usuario cargue nada. Necesitamos que suba solo tipos específicos de imágenes, como con extensión PNG para J Beck. Y por supuesto, todo esto hecho por un solo archivo. Ahora necesitamos ampliar la biblioteca para que sea posible subir múltiples archivos. Y se necesitan múltiples archivos para que subamos muchas imágenes para la galería de productos. Y por último, veremos cómo buscar este producto con las imágenes y
las imágenes de la galería para verlas en el front end. Por supuesto, vamos a buscar sólo la URL de la imagen. Espero que disfruten de este módulo y nos vemos en la próxima conferencia donde empezaremos a instalar biblioteca de mortero.
56. Configura la carga lado del servidor: De acuerdo, entonces primero necesitamos configurar el back-end para aceptar subir los archivos. Para ello, necesitamos instalar una biblioteca llamada Walter. Al igual que cualquier biblioteca, hacemos npm instalamos Walter. Y con esto, instalaremos la biblioteca y la usaremos para subir archivos a nuestro servidor. Y como siempre, hacemos constante, Walter y requerimos mortero. Veamos la documentación de esta biblioteca. Si vas a Google y tecleas motor, verás los paquetes MPM, el sitio web de npm, donde tenemos todo el uso de esta biblioteca. Para ver un uso más detallado o un uso actualizado, puede ir a la página principal de la biblioteca. Por lo que aquí hago clic en él y me llevaría a la página de inicio de biblioteca de morteros. Entonces el uso más simple de esta biblioteca será como el siguiente, cómo está en la documentación. Entonces, en primer lugar, necesitamos un formulario y este formulario será proporcionado por el cartero, como veremos más adelante. Y el primer uso aquí que podemos llamar a la biblioteca molto y luego configurarla con un destino en nuestro servidor de la carpeta. Por lo que cuando el usuario cargue cualquier archivo a través del formulario, se almacenará en la carpeta de cargas, que estará en la raíz de la aplicación back-end. Y después de eso, en cada solicitud de post, por ejemplo, tenemos un post de producto necesitamos pasar también no sólo la URL y la función de solicitud y respuesta, necesitamos también pasar la subida,
me refiero a la subida configuración de Walter. Entonces aquí podemos pasar la subida y decimos una sola, pasamos el nombre del campo, que se ve desde el front end. Entonces como ven aquí, el nombre del campo se llama Avatar, y aquí se pasa en la solicitud. Pero aquí el archivo subido será exactamente el mismo nombre donde lo subieron el usuario. Por lo que tendremos un problema cuando un cliente, o lo siento, el administrador subirá el archivo. Tendrá, por ejemplo, otro expediente con el mismo nombre. Entonces este archivo reemplazará al archivo antiguo. Y en este caso tenemos un problema entre los productos puede ser voy a perder algunos nombres de productos o algunas imágenes de productos. Por lo que la mejor manera que necesitamos tener más control en nombrar los archivos y nombrar el destino. Entonces, por ejemplo, necesitamos, cada vez que se cargue el archivo subido, necesitamos cambiarlo de alguna manera a algunos, un nombre único y luego almacenarlo en nuestro servidor. Para ello en biblioteca múltiple, existe otra opción de tener un control completo sobre el nombre de los archivos, que se denomina almacenamiento en disco. Y con este ejemplo, vamos a construir nuestra API de subida. Por lo que usaremos esta parte. Tomémoslo exactamente igual y copiarlo a nuestra aplicación. Y diremos que el almacenamiento es el almacenamiento en disco Walter, que tiene dos campos, el control del destino y el control del nombre del archivo. El destino será una función donde tenga la solicitud en sí y el archivo y la devolución de llamada. Se devolverá la devolución de llamada si hay un error en la carga y asignamos el destino en ella. Entonces aquí, pongamos nuestro destino de subida. Podemos llamarlo público y sube. Por lo que aquí, tendremos una carpeta llamada cargas públicas. Podemos crear esta carpeta. Entonces podemos decir aquí en el back-end, podemos decir subidas. Y dentro de ella, o lo siento, podríamos tener público primero. Público. Y es público estará en el nivel raíz. Por lo que tendrá, por ejemplo aquí. Y el público, la carpeta de cargas estará dentro de ella. Por lo que aquí ahora tenemos subidas públicas. Por lo que en un futuro, cuando
subamos el archivo, lo veremos aquí ubicado directamente en las cargas públicas. En el nombre del archivo. Será lo mismo. Contendrá la petición de roca y el archivo. Y necesitamos de alguna manera cambiar el nombre del archivo para que se ajuste a nuestras necesidades y cómo se ubicará en las cargas. Por lo que hay otra forma como él está creando aquí. Por ejemplo, el, algunas matemáticas aleatorias para tener un nombre aleatorio de la aplicación o sobre el archivo. Y luego puso el nombre del archivo original con guión y el sufijo único que creó antes. Hagamos de otra manera. Por lo que crearía una constante. Vamos a llamarlo nombre fino. Y este nombre de archivo será el propio archivo que obtuvimos ese nombre original. Ya está definido. Y entonces decimos, alguna manera para reemplazar los espacios, no
es agradable tener espacios en la nomenclatura de los archivos en el servidor. Porque cuando tengas la URL, tendrás URL fea donde reemplazará como por ampersand t2 para los espacios. Pero aquí podemos tener exactamente nuestros reemplazados los espacios con split. Por lo que estoy dividiendo el nombre de archivo en función del espacio y el reemplazo o unión. Nuevamente este espacio con un guión. También puedes usar otra forma, que es por ejemplo, dot reemplazar cada espacio con un guión. Ambos caminos están bien. Por lo que también podemos agregar algún prefijo o sufijo a este nombre. Por lo que aquí podemos decir el nombre del archivo. Y por ejemplo, podemos decir lote de fecha ahora. Entonces aquí DataNode ahora método, si lo vemos, devolverá el número del día. Para que podamos probarlo con la consola del Google Chrome. Ya puedes decir fecha. Y verás que tienes el número de la fecha y la hora ahora. Por lo que este es un gran número único para crear nuestros archivos. Entonces después de eso, hemos creado una constante. Hagámoslo como una constante, no como un VAR. Y esta constante se llama subir. Nuevamente, llámalo, por ejemplo, opciones de subida. Y esta opciones de subida, necesitamos pasarlo a nuestra solicitud de post donde estamos creando el producto exactamente de la misma manera como se describe en la biblioteca de Malta. Entonces si vemos aquí que tenemos también el sencillo de subida y Avatar y el nombre del campo. Nombre de campo, necesitamos enviarlo desde el front end. Entonces aquí decimos opciones de subida, punto, sencillo, y el nombre del campo donde quiero enviar desde el front end. Entonces digo, por ejemplo, imagen. Pero aquí cuando estamos creando el producto, estamos analizando solicitud de imagen de punto cuerpo dot. Esto está mal. Necesitamos editar este campo para tener la ruta completa de la imagen. Por lo que soy Walter ya nos envió con esta solicitud, el expediente. Por lo que no podemos decir por ejemplo, constante filename es request dot file, dot filename. Y este nombre de archivo viniendo de aquí donde configuramos el nombre de archivo del archivo subido. Entonces tendremos el nombre exactamente como lo tenemos de esta manera. Al igual que el nombre original del archivo, reemplazado por guiones y luego guión, no lo saben. Hagámoslo de esta manera. Tenemos un nombre de archivo y luego ponemos el nombre del archivo aquí. Pero cuando quiero buscar estos datos en el front end, y quiero ver el, O por ejemplo, mostrar la imagen en el front end. Tendré tema eso. Voy a obtener sólo el nombre del archivo. Por ejemplo, obtendría imagen 300, 300 punto J Beck. Y esto es un problema para nosotros porque en el front end no conoce la ruta original del archivo. Necesitamos de alguna manera tener la ruta completa con la URL también del backend. Por lo que diré http, localhost 3000 y la carpeta de carga. Y luego la imagen con el nombre y la extensión. Sentimos que también llegó aquí para agregar la extensión. Por lo que tenemos el nombre del archivo solo así. También necesitamos editar las opciones de nombre de archivo aquí. Tener también con la extensión. Veremos eso cuando estemos validando el expediente en las próximas conferencias. Pero ahora centrémonos en esta parte de que necesitamos la URL completa, no sólo el nombre del archivo. Para eso, necesitamos construir de alguna manera esta cuerda. Por lo que podemos decir constante. Podemos decir ruta base, como la ruta base fuera de su aplicación. Y lo podemos hacer con backticks de alguna manera, como punto de solicitud. Tiene algún campo llamado protocolo. Y este protocolo me devolverá el HTTP. Y luego veremos que tenemos barras de dos puntos y necesitamos pasar al huésped. Por lo que también podemos hacerlo de la misma manera. Podemos decir request dot get,
obteniendo un campo específico llamado host. Esta es una forma de cómo obtener al anfitrión de la solicitud. Por lo que ahora construimos nuestro camino base. Vamos a sumar cuatro. También la parte donde estamos diciendo la carpeta donde se sube. Por lo que tenemos que sumar también esta parte. Por lo que podemos decirlo así. Y luego agregamos sólo el nombre del archivo. Entonces podemos decir aquí, después de eso tenemos backticks, ruta
base, y el nombre del archivo. De esta manera, construimos nuestra URL API o URL de archivo subido. De esa manera, tenemos la ruta base es esta parte y el nombre del archivo, que es esta parte. Probemos eso ahora con el cartero. Y prueba si todo está funcionando bien.
57. Prueba subiendo con carde de Postman: Ahora vamos a probar nuestros cambios con Cartero. Te acuerdas, creamos aquí el campo de imagen, cual tendrá la ruta y el nombre de archivo que se carga. Ir a Cartero. Necesitamos crear una solicitud de post sobre la API del producto y agregamos la autorización con el token de barrera que obtuvimos antes. Y tenemos el token aquí para recordarles, conseguimos ese token después de que tengamos un usuario conectado. Entonces aquí voy. Y luego busco a un usuario con su correo electrónico y contraseña, luego obtendré el token. Esto. Si no sabes cómo obtener este token, qué explicamos eso en el capítulo del usuario. De acuerdo, pero ahora cómo podemos probar a Cartero para subir archivos. Recuerda que estábamos enviando en el cuerpo de la solicitud como JSON, y estábamos creando el JSON aquí y estábamos poniendo el nombre
del producto o la descripción del producto o la descripción y el precio. Pero aquí será un poco diferente. En el front end, será algo así como una forma. Forma era campos como como se ve ahí dentro a la derecha de la pantalla. Entonces aquí tenemos unos campos donde lo llenaremos y los enviaremos al backend. Y el campo de archivo donde el usuario puede subir un archivo. Esto se llenará con un dato de archivo, y los datos del archivo se enviarán al backend a través de un dato de formulario. Por lo que necesitamos crear algo así como un dato de formulario y hombre en relieve. Si desea simular un formulario, puede crear un dato de formulario y cada campo se nombrará aquí con su valor. Por ejemplo, tendré aquí el nombre del producto. Y por ejemplo, el producto que quiero publicar será el producto seis. Y quiero también, por ejemplo, descripción del producto. Y aquí estará producto busca descripción. Entonces necesitamos de alguna manera poner todos los campos que queríamos como vimos previamente, el modelo de productos que tenemos aquí. lee la descripción, la descripción, las imágenes y todo aquí. Entonces necesitamos tener el campo de imagen, déjame sentir los campos aquí en el Cartero. Y luego hablaremos de las imágenes. Por lo que aquí hemos llenado todos los campos de formulario que necesitábamos enviar al backend y con su valor. Entonces para la imagen aquí, se valorará, no serán, por ejemplo, textos como aquí, o un valor, o un número o un booleano. Será un archivo. Entonces, ¿cómo podemos hacer eso como archivo? Es muy sencillo. Tenemos cartero, Hay un truco que cuando pones el ratón, el campo, ¿dónde quieres cambiar? Puede seleccionar que el tipo de este campo pueda ser un archivo. Cuando pongas el archivo, tendrás tu capacidad para seleccionar un archivo de tu PC. Exactamente igual como estás subiendo un archivo en el formulario web. Entonces, vamos a seleccionar una imagen. Tengo aquí, muchas imágenes, por ejemplo, esta. Y subiremos y enviemos la solicitud de post. Veremos que la solicitud de post se crea exactamente cómo lo hicimos en el back-end. Y tenemos la imagen como URL completa. Y el archivo de imagen con la misma extensión aquí. Pero si ven aquí que tenemos una extensión y luego la nomenclatura, entonces tenemos un problema aquí. Por lo que necesitamos de alguna manera excluir esta extensión y poner este punto fecha ahora después, y luego ponemos la extinción al final. Hagámoslo rápidamente. Cambiaremos su configuración aquí del nombre de archivo en Walter para obtener el nombre de archivo derivado con la extensión. Entonces cambiemos esta parte con los backticks será más agradable en el código. Entonces podemos tener el nombre de archivo dash, esta fecha doc ahora. Y necesitamos aquí agregar de alguna manera la extensión para que podamos decir punto y aquí será la extensión de donde voy a obtener la extensión. En la siguiente conferencia, veremos cómo validar estos archivos que están llegando al back-end. Por lo que necesitamos que el usuario cargue solo tipo específico de imágenes. Necesitamos que suba solo JPEG y PNG. Por lo que no podemos dejar que aplauda, por ejemplo, un archivo PDF o por ejemplo, un archivo XML. Por lo que necesitamos de alguna manera el back-end para rechazar una solicitud cuando no hay una imagen. Esto lo haremos en la próxima conferencia.
58. Validar tipos de archivos repelidos: De acuerdo, Ahora necesitamos crear nuestra extensión. Pero primero dijimos que necesitamos validar los archivos cargados del usuario. Para ello, necesitamos crear una lista de archivos a los que se les permite que acepte ese backend completo. Por lo que podemos definir una constante. Decimos mapa tipo archivo. Y este mapa de tipo de archivo contendrá una lista de extensiones que se permiten subir a mi back-end. El primer campo será la imagen PNG. Y luego PNG. Por qué lo hice de esa manera. Entonces aquí tenemos la clave como un punto de imagen PNG y el valor es un PNG. Esto necesitamos eso por el tipo mimo. Tipo mimo. Si lo Google, es de tipo inmediato y conocido como extensiones de correo de internet
multipropósito o tipo mime. Y este es un estándar que indica la naturaleza y el formato de un archivo de documento. Toda solicitud se envía al backend. Y el archivo que está conteniendo el archivo de datos o los datos de archivo, tiene también un tipo mime. Un tipo mime tiene un formato como este. Por lo que consigo y PNG documento dxdy. Entonces de esta manera, puedo definir cuál es el tipo de archivo que está llegando al backend. Los tres tipos más importantes que necesitamos en nuestro back-end son éste,
PNG, JPEG, y JPEG. Entonces aquí tendremos esos tipos. Y en Walter, cuando quiero configurar el nombre del archivo, aquí
puedo encontrar algo llamado tipo mime. Por lo que el tipo mime incluirá la información o la información del archivo con la estación de tinta del tipo mime aquí. Entonces para tener la extinción adecuada, lo
haremos de esta manera. Extensión const igual al laboratorio
de tipo de archivo y obtener el valor de Tipo mime de lote de archivo. Entonces aquí irá a esta matriz y tomará el tipo mime, que viene uno de estos, luego asignar la extensión como valor. Y aquí voy a obtener el valor o la extensión al nombre de mi archivo. De acuerdo, hablamos de validación del expediente. Por lo que necesitamos de alguna manera validar el archivo si se permite subir o no. En la devolución de llamada de destino, se
puede definir el error. Entonces cuando hay un error, la devolución de llamada la tirará aquí. Entonces primero podemos hacer una constante es válido archivo por ejemplo. Y usaremos el mismo concepto aquí. Por lo que obtendrá el tipo mimo y lo comprobará si se encuentra en el mapa que asigné en mi back-end. Y en Node.JS, podemos definir un error. Por lo que puedo decir aquí, dejar subir error es igual a nuevo error. Y podemos decir que el error es de tipo de imagen inválido. Y entonces podemos comprobar si hay, es válido. Entonces haz este error de subida como monja. Y luego usa error de subida en la devolución de llamada. Entonces si el archivo es válido, no
hay error y se ejecutará la devolución de llamada. Por lo que recuerdas, subimos con Cartero un archivo y tiene este nombre. Entonces ahora no vamos a tener este JPEG aquí. Lo tendremos al final. A lo mejor se quedará aquí, pero tendremos al menos extensión al final. Vamos a probar eso con un cartero. Ahora, con nuestro formulario, tengo los mismos datos, misma imagen que he subido. Envía esa solicitud, me dieron imagen subida. Y vamos a revisar la extensión. Veremos que tiene la extensión al final y el nombre del archivo. Y aquí está la imagen funcionando bien. Intentemos ahora subir un archivo, pero no la imagen. Podemos decir, por ejemplo, un PDF. Por lo que tengo aquí un PDF de prueba. Yo lo subiré. Y nos dieron el error. Entonces obtuvimos el error, ese tipo de imagen inválida, que creamos aquí. Entonces aquí en el front end, vimos que cuando subimos PDF, nos dieron el tema. Pero lo que por ejemplo, J peg, envíe esa solicitud. No tenemos ningún tema. Tenemos el camino completo y tenemos también la extensión. Y cada vez que hago una solicitud de subida, obtengo un nuevo dato y nueva fecha y el archivo, es el mismo, pero se sube de nuevo con un nombre diferente. ir a nuestra base de datos en Atlas, podemos consultar el archivo o el producto que se crea. Veremos que el producto tiene la imagen y tiene una URL completa. Por lo que esto será accesible desde cualquier lugar de nuestra aplicación. Pero debemos tener algo así como excluido de la autenticación. Porque si recuerdas, toda la API está autenticada. Por lo que no podemos hacer nada sin autenticarnos. Pero necesitamos que eso sea público, lo cual veremos en las próximas conferencias. En la próxima conferencia, veremos si realmente existe el expediente. Entonces si no hay un archivo o imagen para el producto, necesitamos rechazar la solicitud.
59. Subir imagen con la solicitud de publicación de productos: ¿ Y si el front end me envía su solicitud sin archivo? Entonces ese campo requerido de imagen sería negado a manejar eso. Primero comprobemos si tenemos un archivo en nuestra solicitud. Entonces voy aquí y creo una constante, lo
llamo archivo y le doy a esta constante el valor del archivo de punto de solicitud. Y exactamente con la categoría, podemos hacerlo igual con el archivo. Entonces digo que si no hay archivo, entonces devuelva un error al usuario de que no hay ningún archivo. De esta manera, estaremos seguros de que nuestra solicitud no pasará sin expediente. Cuando vayamos a Cartero y enviemos la solicitud sin archivo, vamos a conseguir que no haya imagen ahí solicitudes. En la siguiente conferencia, veremos cómo utilizar imágenes para subir múltiples imágenes, las cuales serán, por ejemplo, una galería sobre el producto. Por lo que en una solicitud, el usuario enviará múltiples archivos, no sólo un archivo. Y esto sucederá en el campo de las imágenes.
60. Subir imagen con la petición de Pinto de productos: Cuando vamos a actualizar un producto, también, necesitamos preocuparnos por la imagen. Entonces, ¿qué pasa si el usuario quiere subir una nueva imagen a su producto, como si quisiera actualizar la imagen misma. Para eso, haremos los mismos pasos que hicimos para el puesto. Por lo que necesitamos agregar las opciones de subida también a la solicitud PUT. Entonces lo agregamos aquí y luego vamos a hacer algunos cambios aquí. Entonces primero, si el usuario no sube ninguna imagen, entonces quiero mantener la imagen antigua que está en la base de datos. Pero si sube alguna imagen, entonces necesito enviar y subir de nuevo la imagen a
los archivos y luego agregar la nueva URL a la base de datos. Hagamos que este perro se haga eco. Entonces, en primer lugar, quiero encontrar el producto. Entonces agrego aquí una constante llamada un producto y el producto encontrar por ID, solicito dot powerapps dot ID, y luego reviso si no hay producto, luego devuelto para mí status 400, que es producto inválido, bien, Ahora todo está bien. Entonces garantizamos que el usuario realmente está entrando en un producto específico y llegado. Otra cosa, entonces vamos a conseguir el archivo en sí. Por lo que yo diría const archivo y este archivo, hemos venido con su archivo de punto de solicitud como lo hicimos exactamente con una solicitud de post. Y luego definiré un camino que se llama ruta de imagen. Y esta ruta de imagen está vacía. Voy a usarlo para llenar el camino de la imagen. O será la antigua que ya está en la base de datos, o luego archivas ruta si el usuario subió una nueva imagen ahí solicitud PUT. Entonces como lógica, diré si archiva, entonces exactamente cómo lo hacemos con la solicitud de post. Definiré un nombre de archivo y luego de ruta base. Y diré que el nombre del archivo o la ruta de la imagen será exactamente igual como lo tenemos aquí. Por lo que tendremos la ruta base y también el nombre de archivo juntos como botón Imagen. Y de lo contrario, si no hay baño de imagen o si hay Archivo, entonces yo diría que la ruta de la imagen es la misma la ruta de la imagen antigua que se definió previamente cuando se creó el producto. Entonces yo diría producto, esa imagen, la vieja porque me dieron el año productivo y te garantizo que el producto realmente existe. Por lo que no le estoy lanzando un error al usuario. Entonces seguro que el producto tiene un valor aquí. Y entonces diré que si son cinco, entonces sube el archivo y dame el pasado a ella. De lo contrario, dar la ruta de la imagen será la imagen del producto, que fue anterior. Y entonces aquí diré que la imagen será la ruta de la imagen con los datos actualizados. Pero aquí vamos a renombrar ese producto. Por lo que podemos decir un producto aquí por conseguir el producto. Y podemos decir aquí, producto
actualizado y el producto actualizado, lo
encuentro y luego lo reviso y luego mandar esa solicitud de vuelta con los datos actualizados. Por lo que esos son los cambios requeridos para la solicitud PUT. En este caso, no obtendrás ningún error y vas a tener algún problema cuando vuelvas a subir la imagen o cuando no subas la imagen. Por lo que el usuario aquí tiene opción, puede subir imagen o no en la alberca, solicitar.
61. Subir múltiples imágenes de imagen de galería de productos: De acuerdo, aquí teníamos un solo archivo, así que cargamos solo un archivo a la API. Pero aquí necesitamos un múltiples archivos para la galería de productos. De la misma manera, podemos cambiar esta solicitud de post para aceptar también un múltiplo de archivos. Pero hagámoslo un poco más complicado tener un ejemplo práctico real. Normalmente cuando estás actualizando un producto o agregando un producto, lo segundo que haces es subir la galería de imágenes. Y esto sucede normalmente en las tiendas web. Después de crear un producto, todo está bien. Después vas y editas nuevamente el producto para abollar la galería de imágenes. Entonces vamos a crear una API específica solo para subir la galería de su producto. Esta API será solicitud de actualización, no una solicitud de post. Por lo que necesitamos la solicitud de post. Por lo que copio esta solicitud de post. Vayamos al final y sumémoslo aquí. Y más allá, podemos mantener el ID del producto y también podemos agregar su duda donde actualizaremos solo las imágenes de la galería. Por lo que aquí podemos agregar imágenes de galería. Y luego el ID del producto. Como vimos antes en la solicitud de post del producto, agregamos también la opción Subir imagen única. También podemos agregarla a la solicitud PUT. Por lo que podemos agregar aquí opciones de subida, pero no solo. Diremos array. Entonces esperaremos del front end nuestra matriz de archivos, llamémoslo emite. Y si notan aquí que el método de matriz me está dando también un recuento máximo. Por lo que puedes permitir el tamaño máximo de carga de archivos. Entonces por ejemplo, yo diría máximo, necesito 10 archivos o 20 archivos en una sola solicitud. Entonces pongámoslo como 10. Moriremos más nuestro código. Entonces vamos a tener esto en una nueva línea. Entonces no podemos decir que éste está aquí. Y aquí, el método asíncrona. Y aquí tenemos el puerto y tenemos aquí el contenido de nuestra solicitud PUT. Por lo que la solicitud de actualización de su producto se actualizará exactamente estos datos, pero tendremos sólo las imágenes, no todos los datos. Entonces podemos hacer lo mismo que hicimos aquí. Es copiar esta parte para ver si el usuario está pasando la identificación exacta o la correcta. No necesitamos consultar su categoría porque no la estamos actualizados. Entonces vamos a tener este también. Pero como dijimos, teníamos todos los datos. Necesitamos actualizar sólo la imagen. Por lo que campo de imagen será matriz de imágenes. Entonces como vimos aquí, matriz de cadenas de imagen o camino de la imagen. Por lo que necesitamos aquí de alguna manera para construir array de cuerdas. Para que podamos escuchar, digamos, búferes de imagen. Y este observador de imágenes sería un valioso como array de cuerdas. Entonces, ¿cómo vamos a construir esta matriz primero en esa solicitud, como vimos antes, que podemos tener archivo de punto de solicitud. O si ves que tenemos un expediente también no sólo archivo. Por lo que podemos decir que los archivos serán archivos constantes. Y exactamente como antes, podemos comprobar si hay archivos. Entonces voy a bucle dentro de estos archivos y construir las imágenes molesta matriz. Por lo que aquí voy a mover esto hacia arriba y decir archivos mapa de puntos. Y esto tendrá expediente. Y dentro de este método de archivo, podemos decir La ruta de la imagen es puntopush, el nombre de archivo de punto fino. Pero no tenemos que empujar sólo el nombre del archivo. Tenemos que empujar también la URL base y también con la extensión. Entonces si recuerdas, creamos aquí la URL base, que construimos para las solicitudes de post. Por lo que podemos copiar esta parte también e ir
al método put y decir aquí la URL base o la ruta base. Y empujamos la ruta base con el nombre del archivo. Y aquí podemos devolver el producto. Entonces exactamente igual que la solicitud
PUT, podemos comprobar si hay producto, entonces eso es estanques sean los datos del producto. De lo contrario será un error. Por lo que copiamos esta parte y la colocamos aquí. Vamos a probar eso con Cartero en lo que tenemos que ver con cartero, que colocamos aquí múltiples archivos. Entonces vamos a crear un campo, llamarlo, por ejemplo, imagen. Y esta imagen será un archivo. Y seleccionamos dos o imagen por ejemplo. Y no olvidamos eso para cambiar la API. Por lo que aquí estará Galería imagen y se pone la solicitud. Y necesitamos también la identificación del producto. Exactamente éste. Consigamos nuestro producto, o el producto es el producto seis, que creamos antes. Y ahora vamos a sumar la identificación aquí. Y enviaremos esa solicitud. Tenemos nuestro error, me olvidé aquí agregar productos. Entonces tendremos el camino correcto. Ahora lo probamos. Y luego veremos que el producto se actualizó. Y tenemos dos imágenes en la galería y la imagen principal, Todavía está ahí. Vamos a revisar nuestra carpeta de subidas. Veremos que tenemos dos imágenes, ésta y ésta. Por lo que en el front end, siempre actualizaremos nuestra galería o actualizaremos un producto y le agregaremos las imágenes de la galería. De eso se trata todo de esta sección. En el siguiente apartado, veremos cómo recuperar la URL de la imagen, que la veamos en el navegador y en el front-end, porque ahora está bloqueado y no tenemos acceso a ella porque está protegida con nuestra API autenticación.
62. Eliminar subiendo cartas de la autenticación: Ahora intentemos obtener esta URL y ponerla en el navegador, la URL de la imagen. Por lo que lo ponemos en el navegador y veremos que el usuario no está autorizado. Esto porque si recuerdas, en nuestro JWT, estábamos definiendo el baño es cuáles están permitidos para público. Por lo que necesitamos agregar la ruta de la carpeta de subida a permitir para que cualquiera pueda ver estas imágenes. De lo contrario, tendremos un tema. Por lo que la tienda electrónica no mostrará las imágenes del producto. Entonces vamos a copiar este. Será exactamente el mismo Git y opciones. También necesitamos reemplazar este por la ruta de la carpeta de cargas. La expresión regular para esto es ésta. Tengo slash, público slash subidas en todo viene después de ello. Vamos a guardarlo. Y vayamos a nuestro navegador. Refrescar. Veremos error de que no podemos obtener imagen de subida pública. Por qué esto porque es una carpeta estática. Tenemos que definir estas cargas públicas como una carpeta estática en el middleware de nuestra aplicación. Entonces para hacer eso, necesitamos ir a nuestro app.js. Entonces vamos aquí y decimos arriba uso. Y luego definimos el camino que necesitamos para hacerlo estático. Por lo que público slash sube. Y luego en Express, hay método para decir que esta es una carpeta estática y una palabra clave reservada, que es nombre nefasto devolver para mí la ruta raíz o la ruta raíz de la aplicación. Y más el camino que quería hacerlo como estático. Por lo que ahora esta ruta, cualquier archivo puede ser subido a ella. No será como API. Será como una ruta estática que está sirviendo los archivos. Por lo que de vuelta al navegador y hacemos una actualización. Seguimos obteniendo el error. Esto porque necesito agregar slash detrás del público. Actúa con nuestro navegador y refresca. Veremos la imagen que ya teníamos en el front end sin ninguna autenticación directamente por la URL. Ahora nuestro backend está listo. Hemos creado las rutas, cuatro categorías, pedidos, productos y usuarios, que necesitamos exactamente para nuestra e-shop. Pasaremos ahora a la parte front end y verás más que cosas nuevas y cómo nos reconectamos a este backend y creamos nuestra interfaz de tienda online.
63. Estructura de página de página de aplicación de que comercio de E: De acuerdo, en esta conferencia vamos a ver cuál es el diseño o la estructura de páginas de nuestra e-shop. El cliente me dio un archivo XD. Xd se puede abrir con Adobe XD, y esta aplicación puede utilizar para hacer un wireframes. Y como ven aquí, el diseñador me dio este diseño y puedo mover componentes, tomar algunos diseños, algunos colorantes. Por lo que puedo usarlo también para mi estilo y para mi CSS. Pero la estructura de página en general, como ven aquí, que tenemos como algún encabezado. Tenemos, por ejemplo, algún banner. Y también tenemos lista de categorías y algunos productos destacados. Y cuando haga clic en uno de los productos, tendrá los detalles del producto. Y tendrás también agregar al carrito o ir a su carrito. Tendremos múltiples páginas. Por lo que tendremos la página de inicio y una página de contacto y la lista de productos. Entonces veremos cómo estructuraremos la aplicación en Angular y cómo lo haremos con NX. Entonces si cambiamos, por ejemplo, a una vista de programación o desarrollo de vista, podemos dividir nuestra aplicación en componentes. Llamo a esta aplicación como tienda NG, como corte angular. Entonces si vamos a la siguiente diapositiva, veremos la estructura de páginas que necesitaremos para esta aplicación o esta tienda de comercio electrónico, necesitamos dos aplicaciones. En primer lugar, necesitaremos una e-shop, que mostrará el front end o cómo veremos que el producto sale de la página del carrito, etcétera. Y también el panel de administración, el panel de administración, que controlará todos estos front-end. Por lo que tendremos algunas herramientas y tablas, editar, eliminar. Por lo que podemos tener toda la funcionalidad que reflejará el front-end. Por lo que el administrador del tema
, puede echar un vistazo a sus órdenes. Puede echar un vistazo a un producto. En lo que va de NX, veremos que cada solicitud de empleo necesita una página de inicio. Necesitamos una página de lista de productos, necesitamos una página de detalles del producto, carrito de compra. Y además necesitamos una página de inicio de sesión para que el usuario pueda iniciar sesión y guardar sus datos y sus pedidos también.
64. Crear la carpeta de proyectos y instalar angular: De acuerdo, ahora hagamos algo de trabajo práctico. En primer lugar, estoy abriendo Visual Studio Code y voy a instalar Angular CLI. CLI angular, significa interfaz de línea de comandos. Por lo que podemos ejecutar comentarios de Angular, como ejecutar aplicación o aplicación de servicio o probarlo, o generar componentes y módulos, como veremos más adelante. Entonces si vamos a Google y tecleamos Angular CLI, veremos en el primer enlace la CLI Angular. Por lo que la instalación de Angular CLI, se hará con like Node paquete install globalmente. Por lo que dash menos g o dash g se está instalando globalmente de Angular CLI. Probemos eso en nuestro código de Visual Studio. Entonces voy primero y abro la terminal. ¿ Cómo podemos abrir la terminal? Es muy sencillo. No se puede decir Control Shift y J, o Comando Shift J. Y se abrirá para ti la terminal. Y en algunos casos puede ser solo Control J. Así que aquí tendrás abierta la terminal. Podemos instalar la CLI Angular. Por lo que copiaré ese comando, que es npm install menos globalmente en la CLI de barras angulares. Y aquí empieza a instalar globalmente el paquete. Por lo que podré ejecutar comandos angulares en todas partes de mi PC. Si estás usando Mac, tal vez llegarás al error. Por lo que verás que no estás teniendo permisos para instalar algunas bibliotecas globales. Entonces, ¿qué haces normalmente puedes decir pseudo antes del comentario de madera. Por lo que voy a decir sudo password y luego vuelve a iniciar la instalación. Y verás que Angular CLI se instaló con éxito. Si estás usando Windows, no
tendrás ese error. Y si lo tienes, puedes abrir Visual Studio Code como administrador. Entonces probemos algunos comandos angulares. Podemos decir mg ayuda. Y verás aquí que obtendrás ayuda de comentarios angulares. Por ejemplo, hay algunos análisis de anuncios, alguna documentación y linting y publicación. Y como ven aquí en la documentación de la CLI, pueden
consultar todos los comentarios. Por lo que hay que agregar y construir NG config y se despliega, etcétera. Pero no nos interesa este curso sobre Mando angular. Necesitamos tener un comando X. Como veremos más adelante, que NX es una biblioteca global también, que se encuentra sobre comentarios angulares. Entonces, en realidad, cuando estamos ejecutando y comando X, estamos ejecutando comandos angulares internamente. El más importante ahora que tenemos angular instalado globalmente y podemos crear una carpeta, por ejemplo, mi escritorio. Yo diría CD esta parte superior. Y voy a hacer directorio nefasto. Por lo que lo llamaré, por ejemplo, con el nombre de mi empresa. Diré, por ejemplo, mi empresa, ¿de acuerdo? Y podemos acceder a mi empresa. Y aquí tendremos nuestra aplicación todo lo tendremos nuestro repositorio de espacio de trabajo, cual contendrá todas las aplicaciones y bibliotecas en Angular y en NX.
65. Componentes, módulos y servicios en Angular: Porque este es un curso práctico y estamos haciendo ejemplo del mundo real. Si eres principiante en Angular, tal vez necesites saber cuáles son nuestros componentes, módulos, servicios. Y como ves aquí, que puedas imaginar conmigo que vas a construir alguna aplicación en Angular. No quiero ir a decir qué es módulo, ¿qué es componente con el servicio? Parte muy teórica. No, Haremos eso en la práctica. Solo quiero que se imaginen conmigo que el módulo es contenedor de componentes y servicios. Por lo que el componente en Angular tiene algunas partes donde se
puede definir la plantilla HTML y el estilo de la misma, como CSS. Y para codificar el script que se comunicará con el servicio y el servicio en sí. Se va a conectar al backend de tu aplicación. Y luego el back-end, agarraremos datos de la base de datos. Por lo que estás obteniendo los datos a través del backend hasta el front end. Por lo que tenemos muchos módulos también en Angular, que
puedan conectarse entre sí. Por lo que puedes usar algunos componentes de este módulo en ese módulo. Y también tal vez los componentes lo harán, pueden contener o llamar a algunos otros componentes, como veremos más adelante. Por lo que esta imaginación, te ayudará mucho en este curso. Para que no tengas que saber cuál es cada detalle de estas partes. Por lo que solo necesitas saber que módulo es contenedor de componentes y servicios. Y los componentes se comunican con los servicios. Y tal vez otros módulos puedan conectarse a este módulo. Veamos algún ejemplo práctico. Tengo el módulo de producto en mi e-shop. Y tengo dos componentes, que son podemos decir componente de lista de productos donde estoy listando todos los productos. Y otro componente donde veo el detalle
del producto al hacer click en uno de los artículos aquí, dentro de este componente, iré a la página donde veré el detalle del producto. Y cuando quiero ver cuáles son los datos de esto,
por ejemplo, lista de productos, necesito tener un servicio en el front-end y llamar desde el backend a la base de datos. El dato que quiero mostrar. Aquí va lo mismo. Cuando vaya a esta página, pediré el servicio que me traiga datos a través del backend desde la base de datos para mostrar el detalle del producto, como el precio, imagen, o nombre o descripción. Por lo que en este caso, se pueden crear aplicaciones Angulares. Por lo que las aplicaciones angulares en realidad son módulos. Y los módulos pueden comunicarse entre sí para construir toda la aplicación. En las próximas conferencias, veremos cómo construir esos módulos y
hacerles comunicativos juntos para construir todas las aplicaciones. Y al final, verás que la aplicación está construida de esta manera. Por lo que tenemos usuarios órdenes de
módulos, módulo, módulo de producto, y todos
ellos, tienen sus propios servicios y sus propios componentes comunicándose con el mismo backend y misma base de datos.
66. ¿Qué es NX y MonoRepo?: Bienvenidos a la primera conferencia de esta sección. Vamos a saber qué es n-x y qué es mono REPL. Empecemos primero con Manzana Monod. El significado de Manet rapport como Premios se divide en dos palabras. En primer lugar, modelo, que significa informe solo o único, que es repositorio. Al igual que un repositorio de GitHub donde estamos almacenando nuestro código. Y Mano ripple es una estrategia de desarrollo de software donde el código para muchos proyectos es un almacenado en el mismo repositorio. Entonces como ven aquí, tenemos aquí App 12 y hasta tres. Y esas aplicaciones están todas en el mismo repositorio, que está bajo el nombre de la empresa. Además, vemos que estas aplicaciones están compartiendo algunas bibliotecas. Por lo que Mano ripple es un repositorio, múltiples proyectos y bibliotecas compartidas. Y por supuesto, cada aplicación tiene sus propios componentes o módulos propios. Esta es la definición general del informe mauna. De acuerdo, ¿quién está usando Mono rapport en general? Las empresas más famosas como Google, Microsoft, Facebook, Uber, y Airbnb, y Twitter están utilizando hoy en día informe mono, por ejemplo, informe mauna de
Google es considerado como el más grande del mundo. Y también se le llama como el sistema de ultra gran escala y debe ser manejado por decenas de miles de contribuciones cada día en el repositorio con el tamaño de más de 80 terabytes. De acuerdo, ¿por qué uno o época? ¿ Por qué es tan importante eso? ¿ Cuáles son las ventajas del mono ripple? En primer lugar, facilidad de reutilización del código. Como veremos más adelante en nuestro ejemplo del mundo real, veremos cómo estamos usando módulos de nuevo en múltiples aplicaciones. Otra característica es la administración simplificada de dependencias, que se encuentra en un entorno de repositorio múltiple donde múltiples proyectos dependen de la dependencia de terceros. Esa dependencia podría descargarse o construirse varias veces. Por lo que necesito descargar la biblioteca para cada proyecto. Pero en Ammán, Alepo construido puede optimizarse fácilmente. Por lo que podemos ver que la referencia o las bibliotecas externas se pueden descargar una vez para múltiples proyectos, como veremos en los siguientes puntos. El tercer rasgo del hipopótamo manana son los commits atómicos. Compromiso atómico, que significa sincronización entre las dependencias. Entonces cuando llegue alguna actualización para una de la biblioteca, todos los proyectos serán notificados y obtendrán esa actualización. Y también colaboraciones a través de los equipos. Entonces estamos hablando aquí de múltiples proyectos. Contamos con múltiples equipos. Y la calibración a través de múltiples equipos se mejorará más cuando
vayan todos de la misma manera mediante el uso de las mismas bibliotecas o sus mismas bibliotecas compartidas. Y la parte más importante, política JSON de paquete
único. Entonces, por ejemplo, cuando estás usando el sistema de administración de empaques npm o Node, entonces tendrás un solo paquete, JSON. Por lo que no tienes para cada proyecto como carpeta de módulos de nodo separados. Y de esa manera, estás ahorrando mucho espacio, vale,
después de ver las ventajas, pasemos a los contras. Entonces, por supuesto, cada tecnología o cada método de desarrollo de software tiene algunos contras. En primer lugar es mantener las configuraciones. Por lo que siempre cuando tengamos múltiples proyectos con configuración diferente, tendremos un problema cuando algunas columnas de Actualización. Por lo que necesitamos mantener todas las configuraciones después de cada actualización bibliotecaria que se comparte entre los proyectos. En segundo lugar, coordinar un proceso de liberación. Lo mismo, ese proceso de liberación puede complicarse ya el conocimiento de qué componentes deben ser liberados depende del equipo de desarrollo. El tercer inconveniente es configurar todo el proyecto. Configurar el proyecto localmente podría tardar mucho tiempo para que cada componente tenga su propia léame y tiene múltiples variaciones. Entonces cuando tenemos un nuevo proyecto configurado, necesitamos de nuevo vincular todas las dependencias a ese proyecto. Por lo que nos sentiremos como más tiempo para configurar todo el proyecto. De acuerdo, Después de eso, vamos a ver ¿qué es una X? Y X es una manzana menorah y es un DevTools. Y no podemos decir que sea mono basado en TypeScript o herramienta EPA, que se construye encima de Angular, chico
sordo, CLI y esquemas. También, funciona también con otras tecnologías, como veremos más adelante. También proporciona un espacio de trabajo, CLI, y un almacenamiento en caché de computación basado en la nube, y un gran soporte de IDE de nivel de lenguaje. Y x fue creado por el equipo Angular en Google. Y entonces los miembros del núcleo decidieron iniciar una nueva empresa llamada novela, proporcionando una x toolchain. Por lo que cuando consultes la página web de NX, verás que es proporcionada por Norval. De nuevo, veamos Y y X es bueno. O por qué necesitamos n-x y x proporcionar herramientas para darte los beneficios de una ondulación mono. Sin eso, las bolsas de fila de símbolo llamadas co-ubicación. Por lo que no necesito configurar la menorah ni manualmente. Hay herramientas o comentarios que me ayudaron en NX a crear todos los proyectos configurados sin hacer ningún archivo de creación a mano. También n huevos Proporcionando una ejecución de comentarios más rápida, como les dije. Y x es una estructura de archivos. Por lo que no necesito crear los archivos manualmente. No quiero crear componente en Angular manualmente. Entonces por un comentario, hago una ejecución de comentarios más rápida para generar el componente y su archivo de deudas y los estilos. Y también se controla llamado silla. Entonces cuando estoy creando una biblioteca, es compartida y controlada por todos los que son miembros de los proyectos dentro de las aplicaciones NX proporcionando diagrama de arquitectura preciso. Y este diagrama te muestra esa dependencia entre las bibliotecas y las aplicaciones y dependencia
circular si las tienes y arreglando todos los bucles que están llevando a circular. Y tiene también mucho i, lo
veremos en las próximas conferencias. Y la característica más importante de que cuando estás construyendo un proyecto o
probándolo, no te tomará tanto tiempo porque probará solo lo que se cambia. Por lo que probará sólo los archivos afectados que cambiaste. Por lo que esto también es bueno para el desarrollo. No necesitarás tener Hall construido de nuevo o prueba completa. Otra vez. Tendrás acceso al repositorio de Git por NX y hará por ti solo los archivos afectados o cambiados. Por último, veamos qué es el anexo de apoyo. Las siguientes tecnologías como Angular, React y NodeJS son los frameworks donde soporta una X. Por lo que puedes usar y x con Angular, React y NodeJS, puedes tener también un proyecto o repositorio que todos estos frameworks compartiendo una biblioteca o varias bibliotecas. En la próxima conferencia, veremos un ejemplo del mundo real sobre NX.
67. Descripción de la ejemplo del mundo real: Bueno, pasemos ahora a un ejemplo del mundo real. En realidad, no entiendo las ideas sólo cuando veo un ejemplo del mundo real. Por eso el objetivo de este curso no es leer una documentación, pero vamos a tener ejemplo del mundo real de mi trabajo. En realidad, estoy trabajando en una empresa y quiero mostrarles cómo estamos trabajando, cómo estamos compartiendo los recursos y bibliotecas usando NX. Entonces sigamos adelante. Asumo aquí que tengo en mi empresa, que es repositorio de proyectos en la parte superior. Por lo que en un repositorio, estoy colocando tres aplicaciones. El primero es aplicación de tienda electrónica, y el segundo es aplicación de blog interna. Y hablemos más tarde del panel de administración. Esta aplicación e-shop cuenta con componentes propios. Por lo que estos componentes no se comparten con las otras aplicaciones. Entonces como vemos aquí, tenemos componente de casa E-sharp, que es la página de inicio y también destacados productos banner. Entonces donde mostraré los productos destacados y también categorías, cómo enumeraré las categorías de mi e-shop y componente de lista de productos, donde enumeraré todos los productos y usaré algún filtrado para que el usuario o el cliente puedan ingresar a el tema, filtrar por categoría, por ejemplo, y ver la lista de productos. Además, contaremos con un componente de detalle de producto el cual mostrará el detalle
del producto y también componente donde el usuario podrá iniciar sesión y ver su historial de pedidos. Y por último, echa un vistazo y los componentes de la tarjeta. El checkout donde la persona está ingresando sus datos o dirección de envío para que pueda realizar su pedido. El carrito está abriendo la página del carrito para ver qué hay dentro del carrito. De lo que compramos ahí. De acuerdo, esta aplicación de tienda electrónica no comparte estos componentes con ninguna otra aplicación porque a las demás obligaciones no les interesan esos componentes. Por ejemplo, la aplicación de blog interna no está interesada en mostrar el componente de lista de productos porque es un blog. Por lo que la aplicación de blog tendrá la suya propia, por lo que tendrá la página de inicio y también la lista de publicaciones y también un servicio de post. Ese post services es algo donde puedo agarrar datos de la base de datos. Puedo agarrar mis publicaciones de la base de datos. De acuerdo, estas dos aplicaciones están compartiendo algunas acciones. Empecemos primero con su inicio de sesión. Entonces cuando quiero crear una aplicación como e-shop, necesito una página de inicio de sesión y también la misma para la aplicación de blog. Necesito también un login. Normalmente, si estás trabajando normal Angular con aplicación independiente, volverás a crear el inicio de sesión aquí. Y lo mismo que harás por la e-shop. Y cuando surja alguna actualización, necesitas actualizar login aquí e iniciar sesión aquí. Esta es la aplicación del trabajo, la aplicación del trabajo en equipo. Entonces en eso es positivo 3, podemos crear una biblioteca, como veremos en la NX. Y como hablamos antes, que tendremos unas bibliotecas. Y esta biblioteca contendrá un componente de inicio de sesión, componente de
página
y registro, y servicios de usuario donde pueda agarrar usuarios y también ver cómo agregar usuario, usuario registrado, etc. Y también servicios de autenticación para que el usuario puede buscar o cerrar sesión u otros servicios como proteger las API. Y cuando el usuario ha iniciado sesión, necesitamos cuando actualicemos la aplicación o cuando el usuario visita la aplicación. Otra vez del tema, por ejemplo, necesitamos que se quede conectado, por ejemplo, por un día. Entonces para eso, vamos a usar User State Store y también para las sesiones. Por lo que estas dos aplicaciones están compartiendo todas estas características. Por lo que necesitamos tener una biblioteca que sea compartida para ambos. Lo mismo. Aquí va, por ejemplo, para algunos componentes de la interfaz de usuario, como por ejemplo, necesito un banner. Banner tendrá algunos servicios para agarrar datos de la base de datos. Y veremos que e-shop tiene un banner en su propia página. Y lo mismo para bloque interno, también slider y Carrusel. De acuerdo, Sigamos ahora al panel de administración. Esas dos aplicaciones necesitan panel de administración. Entonces primero, empecemos con esta biblioteca. Por qué el panel de administración compartiendo esta biblioteca es compartirla por los servicios. Necesito usar esos servicios. Por lo que necesito agarrar pancartas de la base de datos y por ejemplo, publicar banners ese contenido a la base de datos. Y como ven aquí, tenemos banner y slider contenido edit. Por lo que el administrador buscará, cambiará ese banner y luego se mostrará en la aplicación de e-shop. Además, la aplicación admin necesita log n, Así que necesitamos asegurar el panel de administración también. Por lo que necesitamos tener un componente de inicio de sesión. Pero por ejemplo, no necesito el componente de registro. Pero debido a que el componente de registro se comparte entre estas dos aplicaciones, entonces necesito colocarlo aquí. Y lo bonito,
cuando no estoy usando el componente de registro en aplicación de panel de administración en construcción de producción, no
voy a ver este componente de registro. Aunque esté usando esta biblioteca. Por lo que NX proporciona automáticamente caliente para mí exactamente lo que utilicé de las bibliotecas y que reflejará el tamaño de la aplicación o el tamaño del paquete. De acuerdo, ¿Qué pasa con los productos? Los productos que estamos agarrando aquí de
la base de datos y los exhiben como producto menos detalle del producto. Necesitamos los servicios. Por lo que estos servicios se pueden ubicar en una tienda. Pero ahora porque panel de administración tiene también agregar formulario de categoría de
producto y también listado de una tabla de productos. Por lo que necesitamos tener un servicio compartido entre la aplicación del panel de administración y la aplicación de e-shop. Ves así de manera correcta, cómo estamos compartiendo los recursos. Eso mismo para las órdenes. Veremos que los pedidos, solo
necesito los servicios y estoy compartiendo entre la aplicación Admin y la aplicación e-shop. Pero el blog interno no tiene órdenes. Por lo que en el panel de administración, necesito editar el formulario de pedido y enumerar la tabla de pedidos. Y lo mismo aquí. Necesito hacer orden como agregar orden como de los usuarios cuando hacen la caja. Y también necesito ver el historial de pedidos del usuario. Por lo que necesito un servicio para agarrar información para mí de la base de datos. Al mismo tiempo, necesitamos tener una tienda estatal para el carrito. Entonces donde pueda colocar la tienda estatal, puedo colocarla en la biblioteca, o puedo colocarla aquí. No hay problema. Pero prefiero tenerlo aquí, incluso solo lo usa el tema de la aplicación. Y por supuesto, tienes la opción de colocar aquí la tienda estatal. No, cualquier problema. De acuerdo, para entender más la idea, me gustaría hacer otra aplicación o cuarta aplicación, que también es una toma. Por lo que estoy en una empresa, construimos tres aplicaciones y ahora viene un nuevo cliente. Él quiere un diseño diferente y un diseño diferente para su edición. No te mostraré la imagen diferente, pero te mostraré cómo categorizaré los componentes. Vamos a seguir adelante. Entonces solo un consejo para ti, cómo construyo este diagrama, cómo lo dibujo, estoy usando una herramienta llamada el draw dot io. Esta es una herramienta muy grande, por lo que puedes construir tus propios diagramas. Te proporciona muchas formas, lo que te ayudará a construir diagramas de explicación. Entonces sigamos adelante y creemos nuestra propia aplicación, u otra aplicación de la e-sharp. Entonces me mudaré aquí y haré que esto sea un poco más grande, y tendremos un espacio para otra aplicación. Entonces imaginemos que realmente estamos codificando en Angular. Por lo que tendré aquí una y otra aplicación. Yo lo crearé aquí. Llamemos, esto es e-shop up uno o cliente 1. Y esta es la app de e-shop al cliente, por lo que podemos copiar a este cliente a. De acuerdo, también, tendrá su propia página e-sharp. Puede ser destacado banner puede ser, por ejemplo, categorias lista banner. Entonces vamos a copiar todos estos artículos y colocarlos aquí. Mantengámoslo así por ejemplo ahora. Entonces como ven aquí que tenemos muchos componentes compartidos. Tenemos que colocar estos componentes en lugares donde se puedan compartir. No tengo componentes duplicados solo si
estoy creando un nuevo componente que no existe en otro número. Por ejemplo, la página principal será diferente entre estos dos puntiagudos. Por lo que me quedaría aquí este componente, página de inicio de la tienda electrónica, que es diferente a este y destacado banner de producto. Puedo colocarlo en la biblioteca compartida. Y también categorías listan banner. Puedo colocarlo en la biblioteca compartida también. Componente de lista de productos, componente de detalle del producto, y también historial de pedidos del usuario. Entonces veo que todo se puede compartir. Por lo que los colocamos todos aquí y eliminamos todos estos componentes de aquí. Por lo que la única diferencia entre este E tiendas a cada OBS es solo este componente, que es la página de inicio. Y están compartiendo todos estos componentes. Entonces es mejor ponerlos aquí. A lo mejor alguien pregunte, ¿y si estos componentes tienen diferentes estilos entre dos Aesop? Te mostraré en el ejemplo práctico cómo podemos crear un CSS especial para cada e-sharp en el repositorio de NX y usar el correcto que quieras. Por ejemplo, yo diría crear un tema, tema de CSS. El diseño será el mismo, pero el CSS será diferente y el estilo. Entonces espero que entiendas la forma en que estamos estructurando nuestro proyecto en el mundo real. Por lo que veremos en las próximas conferencias cómo
vamos a construir esta estructura con Angular. Usaremos todo un comando X para construir todo este repositorio.
68. Instalación NX: Para crear nuestra estructura, que hablamos antes, necesitamos una x CLI. Es exactamente algo así como Angular CLI. Por lo que iré a Google y teclearé en ECS CLI. Y en el primer resultado, iré a este enlace. Y voy a ver que en Excel I es una herramienta de interfaz de línea de comandos que te ayuda a desarrollar, construir y mantener aplicaciones. Por lo que veremos cómo generar aplicaciones. Veremos también cómo ejecutar un servidores web. Y también podemos generar gráfico de dependencia, como veremos más adelante, y etcétera. Entonces vamos a instalar primero NX, y se instalará globalmente. Entonces primero, volvemos a ir a nuestro Visual Studio Code, y teclearemos el mismo comando cuando instalemos el angular. Tan bueno, voy a decir aquí sudo npm instalar no Angular CLI, sino NX. De nuevo, me pedirá una contraseña y luego
comenzará a instalar la línea de comandos de NX para mí. Me va a dar error porque tengo ese NX ya instalado. Por lo que solo ejecutar este comando, te ayudará a instalar NX para estar seguro de que todo está instalado, solo
te sumerjas en x. Y cuando obtienes esto, entonces significa que tienes una X. Por ahora, esto es suficiente. Sólo necesitamos estar seguros de que hemos instalado NX para pasar a las próximas conferencias para ver cómo podemos trabajar con ella.
69. Instalación de extensiones para codificar: En esta conferencia, te voy a mostrar algunas extensiones que te ayudarán para la codificación rápida. Primera extensión se llama servicio de lenguaje angular. Por lo que esta extensión te ayudará para auto completar algunos comandos en Angular. Entonces como ves aquí en este Give, te ayudará a autocompletar lo que hay dentro del guión. Entonces tenemos una plantilla, como vimos antes, que tenemos plantilla HTML. Y en plantilla HTML a veces necesitamos
acceder a algunas variables que están en el script. Por lo que esta biblioteca te ayudará a acceder a estas variables o métodos que se encuentran en el archivo de script. Otra extensión que necesitamos también es una más bonita. Hablamos previamente sobre más bonita y cómo instalarla. Creé video especial para más guapa porque necesita algo de configuración. Entonces si no sabías de más bonita, será en las extensiones de Visual Studio Code. Por lo que puedes llamarlo aquí y configurarlo. Otra extensión increíble que siempre estoy usando se llama bracket pera polarizer. Por lo que podemos decir soporte polarizador pera. Por lo que esta extensión te ayudará también a colorear los corchetes por grupo. Entonces de esta manera, sabrás cuál es el principio y el final de tus corchetes, sobre todo si tienes unos objetos anidados muy grandes, honestos y cierres. Entonces aquí se ve cómo es colorear basado en el principio y el final. Funciona para soportes curvos y soportes normales. Otra gran extensión que estoy usando se llama navegación CSS. Y esta extensión te ayudará a acceder a cualquier clase directamente yendo a la definición. Entonces como ves aquí en este dar, cuando hagas click en alguna clase en el CSS, irás a esa clase, o cuando presiones Control y pinches en la clase. Entonces como ven aquí, estábamos en archivo HTML. Saltamos al archivo CSS de la app, donde está el cristal. De acuerdo, si no quieres instalar esas extensiones manualmente, adjunté con esta conferencia algún archivo JSON el cual puedes ubicar como el siguiente. Por lo que vas a la carpeta de tu proyecto. Abrí aquí Mi Proyecto de Carpeta. Entonces decimos que fue en el escritorio, mi empresa. Y aquí abro el proyecto y creo una carpeta, lo
llamo dot VS Code. Y dentro de este código VS, localizaré un archivo que se llama extensiones. Entonces aquí creo un archivo, lo
llamo extender conchas que JSON. Y aquí dentro extensión a JSON, te
daré el archivo que necesitas copiar. Por lo que se enumerará en las recomendaciones. Y verás aquí todas las extensiones que necesitas para este curso. Y después de guardar este archivo y vas a las extensiones otra vez y escribe recomendado. Por lo que cuando pongas en recomendado, obtendrás menos de las extensiones recomendadas, cuales se enumeran aquí en este archivo. Por lo que solo necesitas instalarlos todos y luego ya estás listo para codificar.
70. Crear espacio de trabajo Nx para tu equipo o empresa: De acuerdo, Ahora empezaremos una codificación real y trabajando con un ejemplo real con proyecto del mundo real, como hablamos anteriormente, que tenemos este repositorio que vamos a implementar en este curso. Por lo que necesitamos primero crear un espacio de trabajo o repositorio de trabajo. Y en este repositorio de trabajo, vamos a darle un nombre. Normalmente, el nombre en las empresas, toma el nombre de la empresa. Por lo que la empresa está creando sus propias bibliotecas y aplicaciones propias, y todas ellas se comparten juntas o la empresa es muy grande, puedes dividir repositorios basados en Teams. Por ejemplo, yo diría equipo de e-shop, por ejemplo. Y por ejemplo, equipo de aprendizaje automático y por ejemplo, otro tema para el desarrollo móvil. Entonces en este caso, puedo dividir por el nombre del equipo. Por lo que asumiré en este curso que vamos a crear repositorio para nuestra empresa. Volvemos a Visual Studio Code, cerramos todo. Y también cerramos esta carpeta para luego volver a anexar la terminal. Y aquí escribiremos creando un nuevo espacio de trabajo usando NX. Entonces si vamos a un dev x-dot, verás en la página de inicio y px crear un espacio de trabajo de ECS. Entonces cuando vayamos a empezar, veremos el primer comando para crear un espacio de trabajo. Copiemos este comando y volvamos a nuestro código de Visual Studio en la terminal. Pega aquí. Y tenemos un preset, angular porque soporte NX y otros frameworks como React y también no JS. Por lo que MPI x, que es un comentario empaquetado con MPM, se trabaja para crear un espacio de trabajo o aplicaciones. Por lo que cuando presionemos Enter, nos dará una notificación. ¿ Cuál es el nombre del espacio de trabajo? Esto es lo que dije antes. Será el nombre de la empresa o el nombre del tema. Entonces para mí, me gusta el nombre Blue Bits. ¿ Y cuál es el primer nombre de la aplicación? Como vimos antes que tenemos múltiples aplicaciones por lo que podemos crear o escribir el nombre de la primera aplicación en este repositorio o en este espacio de trabajo. Por lo que será tienda NG. ¿ Y qué es un estilo se utiliza dentro de este N G agudo o en esta aplicación? Prefiero sas. ¿ Y qué hay de pelar ES LND o el Estlund? La moderna herramienta de pelado ahora es capa ES, que arreglará para ti todos los errores que pueden ocurrir durante la codificación. Y te dará errores. Por lo que encontrará y solucionará todos los problemas en su código JavaScript como veremos más adelante. Por lo que seleccionaré ES pelusa porque TS aterriza, como se ve aquí en la notificación que utiliza Angular CLI. Y quedó en desuso y usar NX Cloud. Es como algo para construir el proyecto y ejecutar algunos detalles e integración de GitHub. Entonces decimos que no. Y veremos que ahora está creando el espacio de trabajo. Empezaremos a instalar algunos paquetes usando MPM install, todo se hace automáticamente. Y como ven aquí, el paquete se instaló con éxito. Agregar, instalar más paquetes que se requieren para este proyecto se sigue creando aplicaciones. Y compras como ves aquí y todos los archivos requeridos. Y esta tienda ND es proyecto Angular. Por lo que estamos listos y tenemos todos los archivos requeridos para nuestro proyecto. Entonces, abramos ese proyecto. Nosotros vamos al archivo o podemos dar click en esta carpeta o en este ícono, y hacemos clic en Abrir carpeta. Y iré a donde instalé mi empresa como recuerdan. Entonces aquí y yo veremos su nombre, Blue Bits. Entraré dentro de esta carpeta y haré clic en Abrir. Por lo que me abrirá todo el proyecto. Y ahora hablaremos de esos expedientes. Pero primero, veremos que también está recomendando otras extinciones que necesitaban para el desarrollo. Demos click en instalar. Por ejemplo, esa es la extensión llamada jest runner, que es una herramienta para pruebas unitarias. Entonces volvemos a nuestra solicitud y revisemos esos archivos. Entonces como ven aquí, tenemos una carpeta apps. Por lo que en esta app, se ubicará mis aplicaciones como tienda de dulces y también el panel de administración. Por lo que aquí tendremos dos aplicaciones. ¿ Y qué es esto? N G agudo, E a E. Esto es pruebas de extremo a extremo. Por lo que necesitas tener también aplicación para eso, para pruebas de extremo a extremo. Y en la carpeta de labios, veremos que aquí estamos localizando nuestras bibliotecas. Actualmente está vacío, pero veremos más adelante cómo crear esas bibliotecas. Por ejemplo, la biblioteca de UI como hablamos antes, y también productos biblioteca o hace biblioteca, etcétera. Entonces creo que aquí todas las aplicaciones están usando la misma carpeta de módulo de nodo. Por lo que para cada aplicación que instale aquí o cree aquí, no
necesita crear otra carpeta de módulo de nodo. Lo mismo que tienes aquí, un paquete JSON. Por lo que tendrá las mismas bibliotecas las cuales se utilizan todas entre estas aplicaciones. Y el paquete Jason es creado automáticamente por NX para cumplir con toda la información requerida que se necesitan para crear o construir aplicaciones y servirlas. Veremos todos estos comandos más adelante y esas bibliotecas también. Y en este archivo JSON anexo, verá los proyectos enumerados y las bibliotecas que vamos a crear. No lo haremos también sobre estas etiquetas más adelante. Entonces aquí, toda la información sobre este espacio de trabajo. Para nosotros lo importante es esta parte, como verán en las próximas conferencias. Y angular JSON, como saben, las aplicaciones
angulares vienen siempre con algunas configuraciones. Por ejemplo, es necesario incluir algunos estilos específicos que están dentro de la aplicación. Entonces como ven aquí que tenemos aquí todas las aplicaciones listadas bajo proyectos. Por lo que tenemos aquí cualquier tienda. Y cuando creemos otra aplicación,
tendremos, por ejemplo, aplicación de panel de administración. Por lo que en este caso, verá toda la configuración relacionada con esta aplicación Angular. Es como si estuvieras trabajando en una aplicación independiente, pero bajo el espacio de trabajo pico. Entonces cuando quiero crear un estilo específico de estilo, por ejemplo, tengo aquí estilo CSS, que es el predeterminado,
que vienen con Angular. Entonces si vamos aquí, abs y G-sharp, SARC, y veremos aquí estilos, CSS, carpeta de
activos donde estás localizando las imágenes o algunos formularios. Por lo que puedes ubicar en carpeta de activos y debes declarar que para la aplicación principal ts es el punto de entrada para nuestra aplicación donde estamos bootstrapping todas las bibliotecas y todo el código TS que estamos escribiendo en un índice HTML, será el punto de entrada para nuestra plantilla. Entonces como ven aquí, tenemos aquí la cabeza y el cuerpo, y dentro de él hay raíces de remolacha azul. Por lo que en esta ruta, llamaremos a este componente, que es punto de entrada para nuestra aplicación. Por lo que ya tiene una plantilla por defecto. Creo que lo vamos a aclarar. Pero primero, vamos a ejecutar esta aplicación para ver cómo podemos ejecutarla. Y luego eliminaremos todo este contenido para iniciar nuestro tema. Si recuerdas, te dije anteriormente que cada aplicación contiene componentes y módulos y servicios. Entonces aquí hay un módulo que contiene un componente actualmente, que se llama componente de aplicación. Puedes crear tanto como quieras componentes. Veremos que también más adelante, cómo comunicarse y trabajar con estos componentes. Y lo bonito aquí y ocho serpientes que viene también con una configuración más bonita. que puedas configurar tu más bonita como quieras. Entonces vamos a agregar de nuevo nuestra configuración para más bonita como lo configuramos antes, para que podamos llevarlos, copiarlos. Los tengo copiados. Vuelvo a ponerlos aquí. Por lo que tenemos top width cuatro e imprimir tweets 160. Y alguna otra configuración que llevaste en la cotización de más bonita ES Linde es también configuración para la pelusa, como veremos también más adelante. Y la bonita característica aquí que cuando veas algún archivo de configuración, por ejemplo, ES pelusa RC, verás uno global y uno específico para la aplicación. Y cuando quieras hacer algo así como un específico para esta aplicación, o especialmente LinkedIn para esta aplicación, puedes agregar tu configuración aquí. Pero para advertir que desea una configuración global, puede agregarla. Carpeta global ahí. Lo mismo para el café TypeScript. Aquí verás que tienes una configuración general para el TypeScript. Y dentro de T es aplicación de tos. En el nivel de aplicación, verás una especialidad es conflicto para cada aplicación, no
iremos tanto en detalles, nuestro objetivo de construir nuestra aplicación. Y veremos siempre que necesitemos usar esos archivos y necesitamos configurarlo. Así que ahora intentemos ejecutar esta aplicación. Será aplicación angular, que se llama tienda ND, y lo vamos a ejecutar. Por lo que vuelvo a abrir mi terminal. Y es muy sencillo. Simplemente escribo x, muero de hambre y luego el nombre de la aplicación. Por lo que voy a decir NG tienda. Por lo que aquí empezará a servir esta aplicación. Para que lo pueda ver en mi navegador. Por lo que ahora la aplicación se compila con éxito. Abrámoslo en nuestro navegador. Por lo que iré aquí a mi navegador y teclearé localhost 4200, y veremos que la aplicación se está ejecutando. Entonces cuando vuelva a la aplicación, a la página de inicio de esta aplicación, elimine todo. Y voy a poner H1 y voy a decir E sharp o NG e-shop. Y guárdalo y abre de nuevo el navegador que veremos y G-sharp. Entonces de esta manera, estamos atendiendo la aplicación. Ponemos NX servir y el nombre de la aplicación.
71. Crear las aplicaciones (aplicación de panel Admin Panel Panel): De acuerdo, En esta conferencia, les voy a mostrar cómo agregar más aplicación para su espacio de trabajo. Entonces si recuerdas, tenemos que crear dos aplicaciones. En primer lugar es la propia e-shop, donde los clientes van a entrar y navegar por nuestros productos. Y la segunda aplicación será el panel de administración para esta e-shop. Y en el panel de administración, voy a ver cómo puedo editar mis productos, editar usuarios, y editar pedidos. Entonces vamos a crear ahora la aplicación Admin. Por lo que aquí en el panel, usaré esto para mantener sirviendo de la aplicación NDA. Puede abrir múltiples ventanas de terminal haciendo clic en este plus. Y aquí tendrás otra ventana terminal. Por lo que ahora puedes crear una nueva aplicación. Por lo que necesitamos ejecutar algunos NX. Y este comando NX será un generar. Y en novela está el nombre de la empresa que creó cualquier repo X Mono. Y entonces cuál es el tipo de aplicación que tengo es angular. Y entonces voy a decir app, crear para mí aplicación. Y luego nombré la aplicación que quiero. Por lo que voy a decir aquí admin. Entonces Admin app, o admin, o admin E sharp, cualquier nombre que sea libre de seleccionar. Entonces crearé un admin y luego veremos cómo está creando la aplicación. Me preguntará primero ¿qué es un sistema de estilismo que necesito para esta aplicación? Estoy usando siempre SAS. Tienes libertad para seleccionar cuál quieres. Voy a usar SAS. Y luego me hará otra pregunta sobre si voy a usar el enrutamiento en esta aplicación. En realidad, va a generar un nuevo módulo para mi encaminamiento. Eso ya veremos más adelante. Entonces no te preocupes por ello. Simplemente haz que sí, y hablaremos de eso más adelante. Entonces en este caso, creando la aplicación. Y veremos ahora en nuestro explorador de archivos, veremos que tenemos admin y N G sharp, y cada aplicación tiene prueba de extremo a extremo. Por lo que ahora intentemos servir con esta aplicación. Por lo que podemos ejecutar esta aplicación en la otra ventana. Tenemos un terminal aquí que ya estamos ejecutando nuestra aplicación, que es NGA e-shop. Pero ahora también podemos correr hasta la aplicación juntos. Entonces, dejemos claro. Y luego veremos a NX servir como vimos anteriormente, que sí servimos. Y luego el nombre de la aplicación. Por lo que será admin. Y como ven aquí, es muy inteligente. Me está diciendo que este puerto ya está en uso porque estoy usando este puerto para la aplicación anterior, que es N G sharp. Entonces aquí me está preguntando, ¿quieres usar otro puerto? Diré que sí. Entonces seleccionará puerto aleatorio para mí. Y luego lo puedo abrir en el navegador con este puerto. Si quieres seleccionar un informe personalizado, no
dejas que un extra genere para ti el puerto. Simplemente puedes poner menos puerto Minos y luego el número del puerto que quieras. Por lo que estoy eligiendo 4,100 y ejecuto este comando. Y entonces tendremos que nuestra aplicación se está ejecutando en ese puerto. Entonces si vamos de nuevo y al navegador y navegamos al anfitrión local, tenemos 4,200 se utiliza para tienda de energía. Abramos otra pestaña. Y vamos a tratar de decir anfitrión local 4,100. Y vamos a llegar aquí el admin, que es aplicación admin. Por lo que al volver a la ruta de aplicación o ruta de aplicación, como vimos anteriormente, ya
tenemos este código personalizado. Vamos a quitarlo y luego tratar de hacer cada uno. Y diremos, por ejemplo, panel de administración. Lo guardaremos, volveremos a nuestro navegador, y veremos que se actualizó al panel de administración. Entonces en este caso, estamos corriendo ahora a aplicaciones juntas.
72. Crear componentes de niveles de aplicación: Anteriormente, hemos visto cómo crear la estructura para la aplicación. Y de manera teórica, dijimos que algunas aplicaciones tienen componentes propios. Por ejemplo, como puede ver aquí, que la aplicación e-shop tiene componente de página de inicio e-sharp y también banner y categoría y componente de lista de productos. Debido a que estos componentes no se utilizan en otras aplicaciones. Por lo que los ponemos en el nivel de aplicación. Entonces este es el significado de los componentes de nivel de aplicación, pero los componentes de nivel de biblioteca, son los componentes que se encuentran en las bibliotecas o en sus bibliotecas compartidas, como el componente de inicio de sesión y el componente de registro. Y en esta conferencia, veremos cuáles son los comentarios que crea para mí los componentes en el nivel de aplicación. Por lo que crearemos primero un componente de homepage. Y dentro de ese componente de homepage, tendremos encabezado y pie de página. Hagamos eso práctico y saltemos de la teoría. De acuerdo, Entonces estamos aquí ahora. Vamos a crear componentes, especialmente para aplicación de tienda NG. Entonces no vamos a hacer por el administrador. Eso veremos en el siguiente paso. Entonces, en primer lugar, vamos a utilizar también la línea de comandos para crear componentes. Por lo que como viste anteriormente, ya
tenemos un componente predeterminado, que se llama componente de aplicación. Este componente de app es el punto de entrada para nuestra aplicación, y esto es exactamente lo que vemos en el navegador o el punto de entrada de la aplicación en general. Entonces como vimos anteriormente, que este componente puede llamar también a otros componentes. Entonces podemos crear otro componente, y llamémoslo aquí en el componente de la app. Por lo que en primer lugar, abrimos una nueva terminal y crear un componente con n x será de la misma manera. ¿ Cómo estamos creando aplicación, pero en su mayoría es similar a Angular. Por lo que vamos a tener un componente x generar. Si estás acostumbrado a Angular, puedes decir que el mg genera componente. Pero aquí estamos diciendo un x, g, que es un atajo para Generar y luego componente. Y luego puedes especificar el nombre de tu componente. Por ejemplo, quiero decir página principal, por ejemplo. Y luego debido a que estás usando un espacio de trabajo X, necesitas especificar el proyecto. Por lo que necesitamos especificar la aplicación. Por lo que la aplicación que tenemos aquí es N G afilada. Por lo que voy a poner proyecto minus-menos igual a tienda NG. Entonces aquí en este caso, tendré el componente creado en el choque NG para estar seguro de que tu componente se crea de la manera correcta, puedes secar ejecutar tu comando para que no ejecutes nada. Simplemente verás lo que hizo su común. Por lo que no verá ningún cambio de la estructura aquí. Simplemente verás aquí en la línea común lo que hizo en realidad. Por lo que podemos decir menos, menos una carrera en seco. Entonces ejecuta este comando en el mando a distancia, no hagas nada. Presionemos entrar. Ya veremos que nos dieron error, creo que porque tengo espacio aquí entre proyecto y N G agudo. Entonces tratemos de quitar este espacio. Y luego inténtalo de nuevo. Veremos que realmente está funcionando. Entonces cuando obtienes ese error, tú que tienes que tener cuidado con el comando para no tener espacios entre el comando y el valor. Y si preguntas cómo estoy regresando a los comentarios anteriores, estoy usando flechas arriba y abajo en el teclado. Para entonces puedes ir en la historia de tus comentarios. Entonces como ven aquí, yo uso esto como el último. Veremos que el componente se crea en apps. You shop, source, app, homepage, y homepage componente. Y como ven aquí, debería ubicarse aquí. Entonces apps y compras componente fuente y luego aquí. Pero normalmente estamos localizando las páginas dentro de algunas carpetas. Estamos ubicando los componentes dentro también algunas carpetas que expresan su funcionalidad como veremos más adelante. Entonces porque esto es una página, crearía una carpeta, lo llamaría páginas. Y dentro de estas páginas, pondré la página de inicio. Entonces, ¿cómo podemos hacer eso? Podemos hacerlo de manera muy sencilla. Simplemente decimos páginas slash y luego puedes pasar el nombre de tu componente. Entonces cuando presionamos enter con una corrida seca, veremos que el componente se crea en carpeta de
aplicaciones Páginas, página de inicio, componente de página principal. Entonces como ven aquí que hemos creado una carpeta dentro de la aplicación. Entonces intentemos ejecutar este comando sin correr en seco para ver qué es exactamente lo que está haciendo. Por lo que cuando haga clic en Entrar sin correr en seco, voy a ver que he creado un componente o una carpeta con mi componente. Entonces de la misma manera, Vamos a crear otro componente para la página de listas de productos. Entonces podemos decir lo mismo. Digo páginas. Lista de productos y luego nombre del proyecto y G-sharp. Por lo que presionaré Enter, y luego voy a ver que creé otro componente dentro de las páginas. Por lo que ahora tengo dos componentes. Y cada componente o cada carpeta de componentes contendrá la plantilla HTML donde escribiré mi HTML y el archivo de estilo, y también el archivo de prueba, y también el archivo TypeScript donde agarraré datos al front-end. También lo puedes estructurar de manera diferente. Se puede decir páginas y luego decir, por ejemplo, básico. Y luego en básico pones Homepage Contáctenos, por ejemplo, sobre nosotros, etcétera. Y otra carpeta dentro de las páginas, se
puede decir, quiero crear una carpeta de producto. Y dentro de esa carpeta de productos, pones la lista de productos, detalle
del producto, pedidos de productos, etcétera. Y si ves en la línea común, verás que se crean estos archivos y se actualizan algunos archivos. ¿ Qué archivo se actualiza? Es el módulo de aplicación dentro de esta aplicación. Como recuerdan, hemos definido previamente que el módulo contiene múltiples componentes, por lo que su contenedor de componentes de mi aplicación. Entonces aquí estoy diciendo que este módulo contendrá múltiples componentes, que es el componente AB, el básico, y luego el componente de la página de inicio y el componente de lista de productos. Y luego podemos intentar comprobar cómo funcionan estos componentes. Por lo que tenemos aquí, por ejemplo, componente de página principal. Cuenta con párrafo PIE y funciona la página de inicio. Por lo tanto, nos referimos a este componente, referimos nuestra aplicación para utilizar este componente. Por lo que en el nivel de componente de la app, escribiré la etiqueta de este componente. Entonces cómo sabemos esa etiqueta de este componente, puedes ir a su componente ts y verás algo llamado selector. Y en este selector, verás que está creado por el nombre de nuestra empresa y el nombre del componente. Por lo que podemos copiar este, el nombre de la empresa Previamente hemos definido cuando definimos el espacio de trabajo. Y por supuesto puedes cambiarlo como quieras. Entonces por ejemplo, diré aquí, página de inicio de la tienda electrónica. Por lo que necesitamos hacer eso. Por lo que puedo hacer aquí. Y luego copio éste y lo pego aquí como elemento o como selector. Y presiono Guardar, y presiono a para éste. Y hemos previamente que nuestros proyectos se están ejecutando. Por lo que se compila con éxito. Y volviendo al navegador, veremos que esta aplicación ya se está ejecutando y tenemos componente corriendo ahí. Añadamos también el otro componente debajo de él. Por lo que volvemos a nuestra aplicación y usaremos también el selector del componente. Por lo que presionaré aquí crecía pedacitos. Podemos quedárnoslo y por supuesto puedes cambiar el nombre como quieras, pero hay reglas. Veremos esas reglas más adelante. Entonces aquí tenemos creando ese segundo componente. Yo guardo, está compilado con éxito. Vuelvo al navegador, veo que esos dos componentes están funcionando. Por lo que esta es una forma de crear componentes con la línea de comandos NX. Y veremos más adelante cómo estructurar mejor y mejor.
73. Dirigir a los componentes de nivel de aplicación: Bienvenido de nuevo. En esta conferencia vamos a hablar de enrutamiento, enrutamiento de los componentes. Por lo que quiero tener algunas URL para referirme exactamente a mi componente. Entonces quiero, por ejemplo, la página para una lista de productos. Por lo que tendré un enlace donde dirá localhost 4000 a unos productos de 100 slash. Y entonces me llevará al producto menos componente. Y me gustaría también tener el componente homepage sin ningún sufijo o sin ninguna ruta, como será la ruta predeterminada. Por lo que tendré aquí un componente de homepage para la ruta predeterminada y para la lista de productos, tendré localhost slash productos. Entonces hagámoslo y veamos cómo podemos generar las rutas. Las rutas básicamente están relacionadas con el nivel de aplicación. Por lo que es necesario especificar que outs en la aplicación. También, puedes tener rutas especificadas en la biblioteca, como veremos más adelante. Pero ahora hagamos el enrutamiento a nivel de aplicación. Por lo que iré al módulo de aplicación aquí. Y en la importación, voy aquí y digo módulo router. Llame por mí módulo router. Ves esta extensión, cómo es muy grande. Es auto importando los componentes que quiero, todos los módulos que quiero. Por lo que no necesito escribir módulo de enrutador de importación desde Angular externo. Acabo de sumergirme en la clase y luego realmente importó automáticamente cuando está disponible. Por lo que para agregar una ruta específica, es necesario tener el router módulo dot para root. Y aquí vas a especificar tus rutas. Entonces aquí tenemos el primer parámetro, ¿Está fuera? Por lo que en primer lugar, necesitamos una ruta para la página de inicio y una ruta para la página de lista de productos. Y esta ruta es normalmente un conjunto de rutas. Entonces necesitamos, en primer lugar array y dentro de esta matriz tenemos los objetos de eso fuera. Cada objeto de eso hacia fuera, es necesario
especificar la ruta que desea definir. Por ejemplo, quiero definir el camino por defecto y el componente que este baño está creciendo para referir. Por lo que diré que ese componente será el componente de la página de inicio. Y también tendré otro camino,
que es, por ejemplo, la ruta de lista de productos. Por lo que voy a decir aquí productos de baño. Y dentro de este camino, diré que componente es componente de lista de productos. Y luego cuando vayamos al navegador, veremos que cuando vaya a localhost que aún tengo trabajo de Homepage, producto menos trabajo. ¿ Por qué? Porque necesito especificar su salida externa, que se basa en el componente de aplicación o en el componente raíz. Entonces para hacer eso, vamos al componente de la aplicación y luego necesitamos
quitarlos y decir salida del router. Necesitamos especificar esta etiqueta o este selector para especificar la salida del router. Por lo que esta toma de enrutador me guiará hasta el componente correcto en función del enlace que brindo. Entonces cuando guardo y vuelvo al navegador, se compila con éxito. Y entonces voy a ver sólo en la ruta que el componente de la página de inicio. Y luego cuando quiera agregar una lista de productos, diré productos como especificé en eso outs, voy a ver que funciona esa lista de productos. Entonces así es como estamos definiendo las rutas internas que se refiere a otros componentes. Pero primero, me gustaría tener un código limpio. Entonces hagamos algo de refactorización. Podemos poner esta matriz en una variable para que podamos tener una limpia para escribió. Entonces defino aquí una constante, llámala rutas. Y estas rutas tiene un tipo rutas y que también se importa automáticamente. Y esto es igual a mi matriz. Entonces hagamos como un poco de mejor formato aquí. Por lo que tenemos aquí el camino, primer camino y también el componente. Y luego paso estas rutas constante 2, 4 raíz, y la guardo. Entonces tendremos nuestras rutas aquí. En nivel más avanzado, algunas personas están creando un módulo especial para sus rutas. Pero también puedes hacerlo de esa manera. Pero no hay problema, no podemos mantenerlo de esa manera. Y veremos más adelante cuando estemos refactorizando nuestra aplicación, cómo crearíamos un módulo especial para el enrutamiento. Por ahora, esto es lo que necesitamos exactamente. Tenemos ahora rutas internas. Tenemos el camino que es el predeterminado,
se va al componente de la página de inicio y también el producto que va al componente de lista de productos.
74. Página principal con encabezado y pie de pie: De acuerdo, en esta conferencia vamos a hacer un encabezado y pie de página para nuestra aplicación en el G-sharp. Y por supuesto vamos a saber cómo crear una página maestra. Por lo que cada página de nuestra aplicación tendrá encabezado y pie de página. Entonces si recuerdas la creación de componentes en Angular o en NX estaba en este comentario como creamos antes de la lista de productos, estamos especificando el nombre del proyecto. Entonces aquí voy a reemplazar este tipo. Entonces tendré aquí, por ejemplo, una carpeta compartida, compartida, que es como componentes compartidos. Y voy a llamar primero uno es cabecera y dentro y tú compras. Y por supuesto, quiero tener también otro que se llama pie de página. Y ahora como ven aquí, tenemos una carpeta compartida con pie de página y encabezado. Entonces llamemos a estos componentes en nuestra página de inicio. Entonces podemos decir aquí, llámame el primer componente. Vamos al archivo ts para encontrar el selector. Pondré éste. Y también lo mismo para el pie de página. Agrega cuando guardamos y ve a nuestro navegador. Ahora estamos en la página de lista de productos. Entonces vamos a la página de inicio. Veré que tengo cabecera, homepage en sí y pie de página. ¿ Qué pasa si ves antes de eso el producto no tiene encabezado y pie de página. Por lo que necesitamos agregarlos también ahí. Entonces la mejor manera de hacerlo,
necesitamos hacer que el encabezado y el pie de página como algo así como compartido. Para que podamos volver aquí y cancelar este llamado. Vamos a componente app. Y dentro de este componente de app, colocaremos el componente de cabecera y el componente de pie de página y la salida donde estamos renderizando los componentes, estará en el medio. Entonces si vuelvo de nuevo ahora a mi navegador después de eliminar esto de la página de inicio. Entonces ya no los necesitamos. Los tenemos ahora en componente app. Voy al navegador que la lista de productos tiene también Encabezado y Pie de página. Por lo que voy de nuevo a la página de inicio. Veré que la página principal también tiene encabezado y pie de página. De esta manera, garantizo que tengo una página maestra la cual contiene siempre encabezado y pie de página y el contenido está cambiando en función de la ruta que estoy especificando. Y estructura de archivos falsa. Nuevamente, podemos decir que tenemos unos componentes y páginas compartidos. Y páginas. Contamos con la página de inicio basada en producto y también los componentes compartidos pie de página y encabezado. Y también el módulo app se actualizó con el nuevo componente que ya hemos agregado. Por lo que tenemos aquí componente de cabecera y componente Pie de página. Veremos más adelante cómo hacer los estilos y estructurados los encabezados y también los todos los componentes y el componente de la página principal, exactamente cómo lo conseguimos como diseño.
75. Nombrar las reglas de selector componente con ESLint: Aquí quisiera mencionar sobre la convención de nomenclatura de nuestros componentes. Como ven aquí, empieza siempre con el nombre de
la empresa o el nombre del espacio de trabajo que estamos creados. Por lo que es mejor tener un nombre especial que se base en la aplicación cuando estás usando componentes solo relacionados con esa aplicación. Entonces diría que tal vez podamos renombrar esto por ejemplo, para terminar tu tienda por ejemplo, cabecera. Y será de esa manera, lo
tenemos como componente específico para el disparo energético. Entonces lo mismo que haré para el pie de página, y luego necesitamos especificar la nomenclatura también en los propios componentes. Por lo que necesitamos cambiar los selectores. Por lo que sustituimos esto por la tienda NG. Y también para el encabezado, vamos a cambiar este nombre a comprar. Entonces después de guardar estos archivos, necesitamos también algún lugar para cambiarlo en el carril ES. El terreno de las orejas es una herramienta donde está especificando la pelusa para mi aplicación. Por lo que arreglará mis errores cuando voy a construir mi aplicación o cuando voy a desplegar la aplicación. Entonces aquí, cuando esté ejecutando la pelusa ES, entonces me dirá, no, tienes un problema en el nombre de tu selector. Entonces por favor cámbialo en base a la regla que está en la pelusa ES. Entonces cuando vaya al archivo RC de Eastland donde tengamos la configuración, veremos en una de las líneas de esta configuración sobre Eastland. A ver que tenemos lo que es el selector de directiva y cuáles son los componentes del vector. Por lo que el prefijo siempre es bits azules porque hemos nombrado nuestro espacio de nombres o el espacio de trabajo basado en esa empresa. Por lo que necesitamos simplemente cambiarlo para terminar tu tienda, entonces no tendremos problemas de alargamiento de orejas. Y además, se puede especificar cuál es el estilo de la convención de nomenclatura. Entonces puedes decir, tengo un caso K-Pop, que será como lo tenemos aquí. Y compras menos pie de página, o puedes especificar un caso de camello. Viene así un caso de camello, así que no tenemos menos, tenemos una capitalización. Normalmente en Angular, tenemos la directiva con CamelCase y sus componentes vienen electores como un caso K-Pop. Y recuerda, estamos editando el archivo ES pelusa, que se encuentra dentro de la aplicación. No estamos editando el archivo principal está vinculado porque como recuerdas, tenemos archivo ES pelusa, uno general, y luego tenemos un archivo ES pelusa específico de aplicación. Entonces aquí tenemos que poner nuestra migración, que están relacionadas exactamente con esta aplicación.
76. Permitir el legado de codificación en vivo: En la conferencia anterior, vimos que necesitamos algo llamado linting y vimos que estamos modificando el archivo de pelusa ES. Y dijimos que la pelusa ES nos está ayudando a solucionar problemas en nuestro código. Pero cómo puedo ver esta poderosa pelusa ES que ayudándome a arreglar mi código en vivo. Al igual que cuando estoy escribiendo algún código, quiero ver qué errores estoy haciendo de esta manera después de la instalación de las extensiones, de las extensiones recomendadas que tenemos antes, y también las extensiones recomendadas que viene con el NX. Vemos que aún no está habilitada la tierra ES. Por lo que necesitas en el código VS, debes hacer clic aquí en ES pelusa para habilitar el préstamo en vivo de tu código. Al hacer clic en él, te pedirá que la extensión de pelusa ES utilice el módulo Node Eastland para su validación, cual se instala localmente. Entonces, ¿quieres habilitar eso? ¿ Quieres permitir eso? Entonces solo dirías un bajo en todas partes. Cuando permites eso, entonces ES pelusa viene activa. Y entonces empezarás a obtener errores y errores de tu código. Como ven aquí, llegué aquí y error rojo. ¿ Por qué? Porque está diciendo, por ejemplo, que no puedo tener un constructor vacío. O por ejemplo, subo tener función vacía. Esto son reglas de pelusa. Y por supuesto, puedes modificar estas reglas de préstamo como quieras en tu archivo EMS Lane. Otro ejemplo aquí de que obtuve un error al nombrar el selector de este componente. Porque antes dijimos que pusimos una regla de que cada componente debe tener el prefijo N D agudo, E agudo. Entonces aquí funciona bien. No tenemos ningún error y ningún problema porque especificamos que en el archivo ES pelusa, dijimos que todo o cada componente debe estar prefijado con tienda NG. Entonces cuando vuelvo de nuevo a ese componente que me
causó y un problema y puse tienda NG. Veré directamente que me dieron eso es todo está bien. En ocasiones estos errores son molestos, por lo que también puedes excluirlos. Por lo que necesitamos también alguna regla para agregarla a este archivo ES pelusa. Por lo que no podemos decir que no verifique para mí sobre las funciones de núcleo vacías. Por lo que tienes muchas reglas que puedes modificar. Entonces puedes construir tu entorno como quieras en el camino para ayudarte a codificar de la mejor manera que quieras. Entonces a veces es molesto ver estos errores, incluso tú no estás haciendo grandes errores. Por lo que puedes desactivar algunos de estos errores que te están molestando. Entonces, cuando pongas el mouse en el error
, te pedirá un constructor vacío inesperado. Por lo que necesitas tener que arreglar esto. Entonces, ¿cómo arreglar eso? Conocerás la regla desde este enlace. Por lo que al hacer clic en este enlace, te pedirá que lo abras en el navegador. Y cuando vayamos a ocho, veremos que este rol, puedas agregar a tu archivo ES pelusa estas reglas para que puedas desactivarlo. Entonces si quieres hacer eso, solo
copiamos esto y volvemos a nuestro código. Y en el archivo ES pelusa donde estoy colocando mis reglas ES pelusa donde escribimos esta tienda NG. Podemos agregar una nueva regla haciendo coma, y copiamos estas dos reglas. Por lo que no hay función vacía desactivada. Y también quiero desactivar la función vacía para longitud TypeScript ES. Por lo que solo podemos quitar también esta parte. No decimos que me den error. Decimos simplemente apagarlo. Entonces cuando apague esta regla, veré que este error se ha ido. Y también tenemos aquí otro error. Veremos que su método de ciclo de vida on, en él no debe estar vacío. También es angular ES pelusa amplia. Por lo que también hacer esta regla, giro de esta regla, te ayudará también a apagar este error. Pero para mí, me gustaría quedármelo. Hay muchos roles que puedes configurar en tu terreno EMS. Por lo que también puedes configurarlos en base a la documentación de ES librería. Si vas a la página web, si vas a Google, encontrarás esta biblioteca. Se llama Eastland. Eastland tiene muchos papeles. Entonces tienes, por ejemplo, reglas, prueba
unitaria, pero te interesan las reglas. Podrás consultar en la documentación, todas las reglas que te interesen. Creo que lo que tenemos ahora es suficiente. De nuevo, un recordatorio, no es necesario configurar esta regla solo en el nivel de aplicación. Porque si recuerdas, tenemos archivo vinculado ES en el nivel de aplicación y también uno global. Se puede configurar en el global. Entonces de esta manera, no obtendrás ningún error entre todas las aplicaciones y bibliotecas que vas a crear. Entonces agregué aquí, guárdalo, y lo guardamos aquí. Lo quitamos de una regla de aplicación específica.
77. Extensión NX VSCode: En las conferencias anteriores, vimos cómo estamos creando componentes a través de la línea de comandos utilizando una CLI EQ. Pero NX hizo la vida más fácil mediante la creación y extensiones, lo que hará una velocidad para nuestra codificación y generación de componentes, módulos, servicios, etcétera. Cuando configuras un espacio de trabajo, el proyecto viene siempre con la recomendación de extensiones, como vimos anteriormente, novedosa consola angular. Y esta extensión ya está disponible en las extensiones buscando NX o en la consola ECS. Por lo que puedes iniciar esta extensión haciendo click aquí. Y siempre puedes usar la línea común de NX, pero en alguna interfaz gráfica de usuario GUI. Entonces, por ejemplo, me gustaría generar un componente. Por lo que voy aquí a NX y doy clic en Generar. Y luego conseguiré una lista de artículos de voluntad generador en Angular. Ya vimos anteriormente esa línea de comandos cómo estamos creando aplicación. Vimos también cómo estamos creando un componente, como vemos aquí. También podemos generar directivas. En guardias armados, una gran cantidad de tipos de elementos que son proporcionados por angular. Se pueden crear aquí. Vamos, por ejemplo, a crear un componente. Nuevamente, como vimos anteriormente. Voy a obtener alguna información que tengo que poner el nombre del componente, el nombre del proyecto, y también módulo. Si quiero algún módulo específico y el estilo que se utiliza para este componente, puedes, por ejemplo, CSS o SCSS es depender de tu elección y muchas otras opciones como ves aquí. Entonces si recuerdas que aquí tenemos dos proyectos. Por lo que tenemos admin y tienda ND, y vamos a trabajar en este curso en ambos. Entonces generemos, por ejemplo, una página para el panel de administración. Entonces podemos decir que quiero componente, llámalo un dashboard. Y el nombre del proyecto es admin. Y como ven aquí, cada vez que estoy escribiendo algo, está ejecutando aquí, el comando, pero con la bandera de carrera seca. Entonces como ves, creo un dashboard en el proyecto admin y luego lo conseguí. Dashboard admin project. Pero yo quería en una carpeta específica. Por lo que voy a decir páginas slash dashboard. Y volverá a correr como carrera en seco y lo vamos a conseguir aquí. Entonces como ves que tenemos toda capacidad igual que una línea de comando. Entonces voy a llenar este campo. Por lo que tenemos aquí páginas slash dashboard. El proyecto es admin. Si quiero algún módulo específico, ni quiero mantenerlo en el módulo de la app como ven aquí. Y también usan un estilo es SCSS, prefiero eso, y también la estrategia de detección de cambios. Y podemos mantenerlo como predeterminado por ahora. Y hay otra, y hay otras opciones que realmente,
por ejemplo, no son tan importantes para nosotros ahora, pero las necesitaremos más adelante como veamos. Pero aquí también necesitamos un selector. Se puede especificar algún selector personalizado, como vimos anteriormente para los componentes. Por lo que puedo decir admin dashboard. Por lo que aquí tenemos admin dashboard y luego podemos haber omitido la prueba. Por ejemplo, no quiero generar la spec TS, que es ésta, que se utiliza siempre para pruebas unitarias. Por lo que también puedes saltarte eso. Por lo que todo eso es puede ser posible dentro de esta interfaz de usuario. Entonces cuando haga clic en Ejecutar, entonces se ejecutará el comando. Entonces intentemos eso ahora. Doy clic en correr y veo que el comentario se ejecuta, por
supuesto, sin la carrera en seco, así que realmente se está ejecutando. Entonces veo aquí el componente de tablero se crea aquí y el módulo de aplicación está actualizado. Entonces tienes dos opciones aquí. Puedes usar siempre una x para generar, también ejecutar proyectos, y también hacer una prueba y construirlos, que es como una GUI para facilitarte todo para no escribir en la línea de comandos. Entonces, por ejemplo, quiero ejecutar el administrador del proyecto. Entonces voy aquí a correr. Entonces selecciono servir o construir. Por lo que seleccionaré Centro de administración, y luego haré clic en Ejecutar. Y entonces también me hará la celda. Por lo que una herramienta seleccione algún puerto y puedo ejecutarlo en el navegador. Entonces como ven aquí, dice
que el proyecto se está ejecutando en el navegador, en el puerto 400, 4200. Entonces si vamos aquí, vuelve a
ir al proyecto, ejecútalo, y luego tendremos el panel de administración. Entonces como ves, eso es todo es posible a través de la GUI, pero depende de ti si quieres usar la línea común o esta GUI.
78. Crear bibliotecas compartidas a través de la línea de comandos: De acuerdo, Ahora vamos a un nuevo paso. Vamos a construir unas bibliotecas compartidas. Como hablamos anteriormente, vimos que esas aplicaciones están compartiendo algunas bibliotecas para unos objetivos específicos. Una de ellas, por ejemplo, u i bibliotecas y también tú ahí y biblioteca de autenticación. Otra biblioteca es biblioteca de producto y categoría. Y ya hablamos antes por qué necesitamos hacer eso. Y como recordatorio rápido, diría que la razón fue porque
vamos a compartir los mismos componentes entre estas aplicaciones. Por lo que necesito tener un componente de inicio de sesión para el panel de administración y el tema de la
aplicación en el mismo tiempo que vimos previamente cómo creamos componentes para aplicación específica. Ahora vamos a ver cómo crear bibliotecas
y crear componentes dentro de esas bibliotecas. Ahora voy a hacerlo con la línea común. Y en la próxima conferencia, lo
haremos con un x2. Tiré la extensión en código VS. Entonces volvemos a nuestro proyecto y voy a abrir una nueva terminal. Por lo que haciendo click en este plus aquí. Y luego voy a ejecutar el comando para crear una biblioteca. Ese comando que se utiliza para crear biblioteca es NP x y x generate. Y luego novela, que es el nombre de la empresa que creó en x. y entonces diré espacio de trabajo. Y el tipo de espacio de trabajo será lib, que significa que es biblioteca. Y luego puedes pasar el nombre de la biblioteca que quieras. Por ejemplo, comenzaría con la primera biblioteca, que se llama UI. Y tratemos también de hacerlo en modo seco. Entonces con la carrera en seco, me aseguro de que no se creará biblioteca de leyes, pero solo voy a ver qué está haciendo el comando. Entonces vamos a presionar Enter. Y como ves aquí, que la biblioteca se crea específicamente en este path lips UI y con sus propias fuentes de configuración y código ts propias. Y por supuesto, otros archivos podrían actualizarlo como el ts config. Veremos por qué y también Angular JSON, NX paquete JSON, etcétera. Entonces lo que veremos más adelante que esta biblioteca se crea en labios porque tenemos labios código fuente UI. Y como ven aquí, tenemos bibliotecas de aplicaciones que se comparten entre esas aplicaciones. Entonces intentemos ejecutar este comando sin la carrera en seco. Como ven aquí, se creó la biblioteca. Y estamos viendo aquí en el Explorador de Archivos, vemos que tiene su propia biblioteca o módulos propios. Entonces ven aquí que la UI tiene una fuente y salto y esta pierna aquí. Y se puede tener archivo índice para exportaciones, como veremos más adelante por llamar a esas bibliotecas. Dicho yo creo aquí también que se puede especificar un leerme para esta biblioteca. Por ejemplo, puedes decir UI, y puedes dar, por ejemplo, descripción para esta biblioteca. Yo diría que esta biblioteca contiene los componentes de UI que se utilizan en la empresa, por ejemplo. Y qué componentes, por ejemplo, tenemos componente banner, tenemos slider. Tenemos, por ejemplo, otra cosa como stepper, etc. Así que como ven aquí, tenemos todo descrito para esta biblioteca y tiene su propio archivo README. De acuerdo, vamos a cavar más en los archivos. Entonces vemos que aquí se crea la biblioteca. Entonces en este nivel, no después de la fuente y en el labio, voy a crear mis componentes. Por lo que veremos cómo crear componentes más adelante. Y ahora tenemos esta UI, tú o TS, que en el ejemplo de archivo, solo por mostrarte cómo exportar funciones, exportar métodos, exportar módulos, como veremos más adelante. Y también tenemos index.js. Este índice ts se utiliza para exportar todo desde esta biblioteca. Por ejemplo, voy a exportar módulo. Voy a exportar, por ejemplo, servicio de componentes. Por lo que necesitamos enumerar aquí todas las exportaciones que necesitamos exportar. Y luego los podemos usar en otros lugares, como en aplicaciones o en otras bibliotecas, como veremos más adelante, no
tenemos que cavar ahora en este archivo índice, veremos poco práctico cómo podemos usar. Y de nuevo, necesitamos también especialmente configuración Estlund para esta biblioteca. Si desea especificar algo no general y específico para esta biblioteca, puede agregar las reglas aquí. Por lo que en este caso, sólo esta biblioteca será sensible para el linting ES basado en estas reglas de configuración solo se utiliza para pruebas y pruebas unitarias. Veremos también cómo usar o cómo hacer una prueba
unitaria dentro de las bibliotecas en otras secciones si quieres también alguna configuración especial de TypeScript en lugar de cuáles están en la general. Porque como ven aquí, tenemos ts config dot pace, que es el principal ts config que se crea aquí. Y también hay un ts config o TypeScript config específico. Nuevamente, para esta biblioteca, lo que hizo la diferencia entre esos archivos es solo sobre cómo crear unas referencias. Es sólo un ordenando los archivos. Por lo que no necesitas preocuparte tanto por eso. Entonces si quieres hacer cambios, como veremos más adelante, puedes especificarlos en la biblioteca ts config dot, que está extendiendo el main ts config, que se encuentra en la misma carpeta. De acuerdo, lo que los archivos se ponen actualizados como vemos aquí, ts config Bayes, JSON se actualiza. Entonces, ¿por qué se actualizó? Se actualizó porque agregó un nuevo camino para esta biblioteca. Veremos cómo usar esta ruta cuando vamos a
llamar a esta biblioteca o cuando vamos a usar componente en esta biblioteca. Entonces aquí vamos a salvar este camino de alguna manera. Y veremos más adelante a quién no vas a utilizar esta ruta para importar componentes o importar módulos o servicios. Pero para usar este atajo o esta parte corta, angular JSON también que actualizado, podemos ver por qué, porque sabes que en Angular, debes especificar y definir cada proyecto que se crea en tu o en tu antiguo proyecto. Entonces como vemos aquí, tenemos aplicaciones, y luego tenemos nuestra biblioteca. Y vemos la raíz de esta biblioteca. Vemos la ruta de origen y toda la configuración que se necesitan para configurar Angular para que esta biblioteca funcione de buena manera. Y x JSON también se actualiza porque agregamos una nueva biblioteca. Por lo que también tiene UI y etiquetas. Veremos el uso de estas etiquetas más adelante. Está bien, genial. Entonces, ¿qué es importante para nosotros ahora que creamos una biblioteca? Veremos más adelante cómo volver a crear la biblioteca, pero con, no con línea común, sino con esta extensión. Por lo que utilizaríamos esta extensión generar o NX para generar una biblioteca que vamos a implementar y utilizar estas bibliotecas en nuestra aplicación.
79. Crear bibliotecas compartidas a través de la extensión NX: De acuerdo, Anteriormente creamos las bibliotecas usando la línea común. Ahora vamos a utilizar la extensión,
la extensión que les mostré antes en las conferencias anteriores, la cual descargamos al código de Visual Studio. Entonces en esta conferencia, vamos a crear todas las bibliotecas de descanso las cuales necesitamos para construir nuestro proyecto. Anteriormente creamos la biblioteca UI. Ahora vamos a construir usuarios y biblioteca de autenticación, productos y biblioteca de categorías y todas esas bibliotecas. Por lo que volvemos a Visual Studio Code, hacemos click en la extensión NX y luego vamos a Generar. Y para generar vamos a seleccionar una biblioteca. Entonces aquí tenemos que poner el nombre de la biblioteca, por lo que llamaremos productos de TI. Entonces porque tenemos previamente UI y ahora tenemos los productos y creamos posteriormente los usuarios y el directorio. Si deseas especificar algún directorio específico que no necesitamos, queremos colocarlo en los labios, como ves aquí. Aquí tenemos labios y queremos colocarlo aquí. Entonces todo va bien. Y vamos a dar click Ejecutar. Y después de ejecutar este comando, veremos ese laboratorio apenas me crearon aquí. Y veremos que ahora tenemos UI y productos. Ahora pasemos a la segunda biblioteca, que es usuarios y autenticación. Nosotros lo llamamos usuarios es suficiente. Y entonces creará también una carrera en seco. Y vamos a cavar más sobre los comentarios o parámetros de esta biblioteca. primer parámetro es el estilo o el sistema de estilo que se utiliza dentro de los componentes de esta biblioteca. Yo usaría siempre scss. Por supuesto, tienes libertad para seleccionar qué sistema te gusta. Además, si quieres tener un directorio específico para crear esta biblioteca, puedes definir no solo elipse, sino que puedes definir otro directorio. Por lo que puede especificar el directorio aquí, pero cuando lo deje vacío, se creará dentro de la carpeta de labios y agregará especificaciones de módulo, que es un módulo que se crea aquí. Y este módulo tiene un archivo de prueba. Entonces cuando habilite este archivo de prueba o cuando habilite esta opción, entonces tendrá un archivo de prueba de unidad testfile, Algo así como esos. Entonces si no mencionas eso, entonces no vas a tener este archivo de especificaciones, pero es fácil y puedes crearlo manualmente más adelante. Construible se genera una biblioteca edificable. Por supuesto, siempre necesitamos construir todas aquellas bibliotecas que necesitamos para nuestra producción. Pero por defecto, esta biblioteca generar construible se puede ejecutar cuando se va a ejecutar comando build para esta biblioteca, como veremos más adelante, enable IVY es para habilitar para una librerías, entonces, usarías estas método de compilación en Angular. Angular tiene muchas formas de compilación. Uno de ellos es IVY. Ivy es una reescritura completa del motor de renderizado angular. Si sabes más de esto, tienes un o t y también eso es IVY. Ivy promete enormes mejoras para tu aplicación. Con IVY, también se pueden compilar componentes de forma más independiente el uno del otro. Por lo que puedes habilitar eso para esta biblioteca y no hay problema. Por lo que obtuve un error aquí que habilita IVY solo debe usarse con buildable. Por lo que necesitamos habilitar también este para este pase de importación de biblioteca. Vimos previamente que en los ts config que tenemos alguna ruta específica la cual se genera. Por lo que puedes escuchar también especificar a tus socios en función de lo que necesites. Por ejemplo, los productos han generado con nombre de empresa Linda, con AD, y luego el nombre de la biblioteca. Y lo mismo. Si quieres algún nombre específico, no así, entonces puedes especificarlo ahí. Pero quiero tener los mismos módulos de carga perezosos se utiliza también para no cargar el módulo directamente. Cuando esté ejecutando la aplicación, utilizará estos módulos o bibliotecas sólo cuando los necesite. Como veremos más adelante, usaremos los dos tipos. Usaremos los módulos de carga perezosos y la molécula inmediata. Entonces a su vez, como vimos anteriormente, lo que es un invierno se utiliza para esta biblioteca. Prefiero siempre usar ES pelusa. Cuando se especifica el módulo de carga perezoso, es necesario
especificar el módulo piloto. qué módulo llamaremos a este módulo. Normalmente, será el módulo de aplicación, como veremos también más adelante. Si quieres algún prefijo específico para los componentes o directivas de la biblioteca, como vimos anteriormente, entonces puedes especificarlo aquí, por lo que no es necesario ir a editar el archivo ASM. Por ejemplo, usaría también aquí, usuarios publicables. Creo que no, no necesitamos esa biblioteca publicable. Enrutándolo de la misma manera como vimos rutas en nivel de aplicación. Además, podemos tener enrutamiento para el nivel de biblioteca, por lo que podemos configurar eso también. Y también hay otras opciones como archivos de formato omitidos para, por ejemplo,
para más bonitos y también saltar paquete JSON para no agregar dependencia al backend JSON también para omitir ts config, que es no actualizar ts config para el desarrollo experiencia. No, necesitamos todas estas cosas y etiquetas. Hablaremos de ello más adelante cuando vayamos a llamar a estas bibliotecas en nuestras aplicaciones. Corredor de pruebas unitarias también es para pruebas unitarias que
vamos a utilizar tal y como veremos también en el futuro. Entonces corremos y ejecutemos este comando. Y veremos que todo el comando se escribió aquí con todos los parámetros que necesito. Por lo que no tenemos que canalizar en la línea de comando. Por lo que sólo necesitamos hacer algunos clics solo para generar esos comentarios. Y como vemos que tenemos ahora la biblioteca
del usuario se creó la diferencia aquí que seleccionamos más justo, que lo configuramos con un router. Por lo que ya tenemos el módulo router, pero por ejemplo, la biblioteca de productos no tiene un módulo de enrutador. Y también hablamos de algún prefijo específico para directiva y componentes. Veremos que también lo tenemos aquí. Entonces tenemos usuarios, no el nombre de la empresa. Por lo que tenemos CamelCase para directivas y caso K-Pop para componentes, y el prefijo es siempre deben ser usuarios. Ahora vamos a crear la última biblioteca que necesitamos, que se llama órdenes. Por lo que ya productos usuarios de UI. Vamos a crear también la biblioteca de órdenes. Por lo que sustituiré esto por órdenes. Todo igual. Tenemos aquí, ningún directorio, todo ya está definido. Y sustituimos el prefijo y toda la demás información que ya están definidas. Por lo que hacemos clic en correr y generamos esta biblioteca, y se ubicará cerca de las otras bibliotecas. Si volvemos a ir ahora a la base ts config que esas librerías todos crearon aquí.
80. Crear componentes dentro de las bibliotecas y utilizarlos en las aplicaciones: De acuerdo, en esta conferencia, vamos a saber cómo crear un componente dentro de la biblioteca. Por ejemplo, el componente banner, que está dentro de la biblioteca de UI. Y veremos también cómo podemos usar este componente en el nivel de aplicación. Por ejemplo, en la aplicación N G sharp también aquí podemos utilizar la línea de comandos para crear el componente o la extensión NX. Yo voy a hacer eso en ambos sentidos. Por lo que anteriormente hemos creado esas bibliotecas, productos de
interfaz de usuario, usuarios, y pedidos. Entonces vamos a crear primero el componente usando la extensión NX. Voy a ir a extensión de anexo, clic en él, y luego generar. Y usaría el Generar de esquemas de Angular porque una x no tiene esta generación para los componentes. Entonces usaríamos este, esquemáticos componente angular, que está creando un componente angular. Vamos a dar click en él. Y luego te podemos dar su nombre para su componente que quiero crear. Por ejemplo, yo lo daría, como vimos antes que tenemos banner y el proyecto. El proyecto es el nombre de la biblioteca donde quiero crear este componente. Como vimos anteriormente, tenemos muchas bibliotecas. Uno de ellos es la biblioteca UI. Y luego voy a usar las otras opciones. Vamos rápido por encima de ellos. Entonces iremos primero que veamos ese módulo. ¿ Para qué es un módulo para el que quieres definir este componente? Como les dije anteriormente, tenemos el módulo que contiene múltiples componentes y cada componente debe estar relacionado con nuestro módulo. Podemos mantener este módulo vacío, entonces utilizará el módulo predeterminado de esa biblioteca. Porque como vemos aquí, esos productos, por ejemplo, tienen un módulo por defecto llamado Módulo Productos, entonces el componente se colocará aquí o la declaración del componente se colocará aquí. Por lo que vuelvo de nuevo a nuestro generador. Seleccionaré el sistema de estilo. Cuál es el Style System que quiero usar es SCSS, como acordamos desde el principio en este proyecto. Además, necesitamos saber acerca de la estrategia de detección de cambios. Esta estrategia está definiendo cómo se está actualizando el componente. Entonces, por ejemplo, tengo un componente que contiene el texto, por ejemplo, el propio banner. Por lo que quiero actualizar el texto de ese componente, de ese banner desde fuera, desde otro componente. Por lo que aquí puedo elegir la estrategia, cómo se actualizará. Por defecto es siempre el componente, está escuchando los cambios en push significa que cada vez que digo Por favor, actualízate, entonces se actualizará. Pero si empujo un nuevo texto al componente sin informar al componente de que viene alguna actualización, entonces no pasará nada. Por lo que siempre puedes elegir las estrategias. Eso lo explicaré durante la explicación del mundo real de nuestro proyecto. Por ahora, vamos a mantenerlo como un defecto. Algunas personas prefieren tener un bloque de visualización en el nivel host, igual que el componente en sí tendrá un bloque de visualización. Para mí. Lo guardo vacío porque no lo necesito. Componente de entrada, este es método en desuso. Ya no lo necesitamos. Exportar, necesitas siempre, a
veces exportar el componente si quieres usarlo en otros módulos. Entonces si quiero tener este componente banner para ser usado en otros módulos, necesito exportarlo. Entonces por ahora, vamos a mantenerlo así o puedes definir esto como un componente exportado. Plano significa que queremos crear estos archivos de este componente en el nivel raíz de ese proyecto. Por ejemplo, cuando crea este componente, se creará aquí y él con su propio archivo, no dentro de una carpeta. Entonces para mí, lo guardaría dentro de una carpeta y la usaría dentro de esta biblioteca. Entonces es mejor no revisar este piso en estilo de vida si quiero incluir estilos en línea dentro de ese componente, como sabes en Plantilla en línea angular que
no quiero tener archivo separado para la plantilla. Por lo que este componente contendrá dentro el código HTML o puedes ponerlo en archivo separado. Al comprobar esto, entonces el componente se creará con su propia plantilla, sin ningún archivo HTML. Porque cada componente en Angular debe contener un archivo JavaScript, archivo
HTML, y el archivo de estilo, que puede ser CSS o SCSS. Pero para mí los guardaría archivos separados. Arreglo de pelusa, esto está en desuso. Ya no se usa. El camino, si quieres que se definan unos hechos específicos en tu componente, puedes definirlo aquí. Se puede decir la carpeta donde se desea crear este componente. Pero para mí, lo guardo vacío, entonces se creará dentro de la biblioteca, a la que apunto. Prefijo, como vimos anteriormente, que tenemos cada componente tiene selector. Entonces necesitamos definir cuál es el prefijo de ese selector. Entonces para mí, diría siempre, cada componente dentro de la biblioteca de UI tendrá prefijo UI. Y también aquí el selector, te preguntará ¿cuál es el selector? El selector debe crearse aquí. Por lo que yo diría banner, saltar importación. Significa que no coloquen un componente dentro del módulo, como vimos anteriormente, que el módulo contiene múltiples componentes. Entonces necesito no ponerlo aquí. Saltar Selector especifica si el componente debe tener un selector o no. Ahora necesitamos un selector. Omitir pruebas, entonces no generará los archivos de prueba que necesitamos para pruebas unitarias, que está terminando con SPECT de Ts. Y al final, necesitamos saber cuál es el tipo de ese componente o el tipo de este ítem. Puede ser directiva o componente. Lo guardamos como componente el cual se encuentra ubicado en la ley de nomenclatura. Por lo que tendremos como banner.com dot ts view encapsulation es la estrategia de encapsulación de vista para usar en este componente. Por lo que puedes mantener eso vacío por ahora. Entonces cuando ejecute este comando, voy a ver que siempre estoy obteniendo error. No se puede encontrar el módulo NG utiliza la opción de mantener la importación para omitir importar un módulo. No, necesitamos eso en módulo porque lo vamos a utilizar en otro componente o en el nivel de aplicación como vimos antes. Entonces para eso, necesitamos un módulo. ¿ Por qué estamos recibiendo este error? Este error viene porque tú, ya sea biblioteca no tiene módulo y porque lo hemos creado a través de la línea de comentarios usando MPI x como vimos anteriormente. Pero los otros componentes o las demás bibliotecas que tenemos ahí, que creamos con extensión NX. Tienen módulo, pero la biblioteca de UI no tiene ningún módulo. Entonces vamos a crear también eso. Puedes crear ese módulo manualmente como los demás, o si quieres, también puedes usar el generador NX. Con un generador x, también
se pueden crear módulos, como se ve por ejemplo, aquí tenemos esquemas, módulo angular, y luego se especifica la biblioteca y se especifica la ruta. Y eso es todo. Exactamente como lo hacemos con sus componentes. Por ahora. Mantengámoslo, por ejemplo, hagamos algún trabajo profesional para hacerlo manualmente. Por lo que antes que nada, voy a crear un nuevo archivo. Lo llamaré UI dot module dot ts. Y cada módulo en Angular debe comenzar con el módulo de anotación ONG. Entonces como vemos aquí en el módulo de productos el cual se genera previamente, tenemos ese módulo NG y las importaciones y luego el nombre como clase de ese módulo. Vamos a copiar este y usarlo en nuestro módulo de interfaz de usuario. Simplemente necesitamos cambiar el nombre de los productos a la interfaz de usuario. Y en este caso, tendré listo mi generador o mi módulo para ser utilizado por el generador. Entonces, intentémoslo de nuevo y vamos a ejecutarlo. Y veremos que se crea o genera el comentario. Vemos que n degenerate schematics nombre de componente angular banner proyecto UI estilo es CSS o SCSS y luego exportar. Y si voy al módulo mismo, voy a ver que hay declaración y exportaciones del módulo o del componente que creé. Y aquí está el componente. Tenemos plantilla HTML, tenemos el CSS, también
tenemos el archivo desk y el archivo TypeScript. Entonces generemos otro componente usando la línea común. Como vimos anteriormente, podemos ejecutar con una extensión o con la línea común. algunas personas no le gusta la extensión, por lo que les gusta hacer algunas líneas comunes. La línea común que tenemos aquí es Andy genera esquemas, componente
angular, y luego se especifican algunas propiedades que queremos. Entonces voy a copiar este y abrir una nueva terminal. Y luego lo pegaré, y luego renombraré el banner para que sea, por ejemplo, slider. Por lo que tendremos slider y aquí también así como slider. Por lo que a través de la línea común, hacemos estos comentarios. Entonces lo que necesito cambiar no es mg, será una x porque estamos ejecutando NX comentario. Entonces aquí diré que NX genera esquemáticos componente angular, y luego especifico las propiedades. Y luego si lo
ejecutamos, veremos que se genera exactamente con los mismos valores que yo quería. Y estará cerca de su hermano, que se llama bandera. De acuerdo, ahora veamos cómo podemos usar esos componentes en mi aplicación. Porque ahora estamos en una biblioteca, no
estamos en el nivel de aplicación. Entonces como vemos, tenemos aplicaciones y bibliotecas. Y en la aplicación, quiero usar estos componentes. Entonces, por ejemplo, vamos a conseguir este banner 1. Podemos crear, por ejemplo, cualquier cosa dentro de ella, como podemos decir que funciona un banner de párrafo. Y usaríamos este componente en esa biblioteca. Entonces cómo estamos usando un componente en general, solo
voy y elijo el selector. Diré, por ejemplo, que debería ser como este banner de UI. Y este selector. Voy a tomarlo y colocarlo en mi solicitud. Por lo que diré aquí componente AB. Y voy a decir, por ejemplo, que podemos ponerlo aquí dentro. Y quiero decir este, el banner de la
interfaz de usuario es banner de la interfaz de usuario. Pero tenemos problema aquí que u i banner no se conoce elemento y porque no se conoce como un módulo dentro de esta biblioteca o dentro de esta aplicación. Por lo que necesito tomar el módulo de la UI e importado aquí. Entonces la aplicación sabrá que hay un componente llamado banner de interfaz de usuario. Puedo usarlo desde la biblioteca, que se llama UI. Cómo podemos importar el módulo UI o la biblioteca UI. Es muy sencillo. Voy al módulo de la aplicación. Entonces escribo aquí UI, como vimos anteriormente, módulo. Y luego este módulo de interfaz de usuario, se importará de la ruta. Entonces diré importar módulo de interfaz de usuario desde, y luego especificaré la ruta aunque. Tenemos el nombre de la organización y luego la UI. Entonces con eso, tendré acceso al módulo de interfaz de usuario dentro de la biblioteca de UI. Entonces como vimos anteriormente cuando creamos la biblioteca, la config ts se cambia para definir para nosotros algunos socios que necesitaba usar de otras bibliotecas. Pero todavía me estoy equivocando aquí. ¿ Por qué? Debido a que el módulo UI no se encuentra en esta ruta. Así elipse IU fuente index.js. Navegemos a éste. Voy a ir a comprobarlo, y voy a ver que no tengo exportación del módulo. Entonces lo que tenemos que hacer es solo exportar estrella a partir de entonces diré lib y luego el módulo en sí. Y cuando guarde y vaya al módulo de aplicación, y luego veremos que todo está bien y está definido. Y si voy al componente app, de nuevo, voy a ver que no voy a tener ningún adulto aquí Porque tú, yo banner es conocido por la aplicación porque importé el módulo de módulo de UI. Entonces, ahora ejecutemos la aplicación y probemos eso. Entonces primero vamos a guardar todo y puedes ejecutar tu aplicación usando la línea de comandos como vimos anteriormente. O también puedes usar la extensión NX. Entonces solo dices NX servir, y luego especificarías qué aplicación quieres. Entonces nuestra aplicación se está ejecutando ahora, y como vemos aquí, que se está ejecutando bajo el host local 4200, el puerto. Entonces voy al navegador y luego voy a ver que tenemos éste. Y luego refresco la página, y luego veo que el banner está dentro de este nivel de aplicación. Por lo que estamos usando realmente el componente que se crea dentro de la interfaz de usuario de la biblioteca, dentro del nivel de aplicación.
81. Cómo llamar a las patas de consultar bibliotecas: De acuerdo, Ahora todo está bien. Hemos especificado nuestro componente, lo
importamos de la biblioteca y lo usamos en la aplicación. Entonces vamos a quitarlo de aquí ahora porque lo vamos a usar en otros lugares, no aquí como veremos más adelante. Ahora voy a repetir la misma idea sólo para confirmarla y arreglarla para ti. Entonces cuando quiero importar un módulo, puedo usar siempre el camino. El camino se define en el archivo ts config. Y dentro del archivo config, siempre
podemos modificar esta ruta es como queremos. Entonces vemos que esta ruta se refiere a este archivo y siempre en Angular o en TypeScript en general, cuando se quiere exportar algunos módulos o clases o por ejemplo, modelos, siempre se puede utilizar este concepto. Por lo que tengo un archivo de índice donde siempre estoy listando todos mis componentes los cuales quiero exportar o módulos o servicios. Entonces por ejemplo, tengo en la interfaz de usuario el servicio para agarrar datos de la base de datos. Entonces necesito colocarlo aquí en este archivo. Entonces diré, por ejemplo, exportar, luego todo desde el archivo, por ejemplo, que se llama Biblioteca. Y dentro de este archivo, por ejemplo, existe este servicio. Por lo que todo lo que quieras usar fuera de esta biblioteca, necesitas exportarlo. Y luego usarás ese baño, que se especifica en la base o en los ts config Bayes para usarlo en cualquier aplicación o incluso en cualquier otra biblioteca. Por ejemplo, en el producto quiero usar también la interfaz de usuario. Entonces voy aquí, entonces digo que quiero usar el módulo de interfaz de usuario dentro de estos módulos de productos. Entonces de la misma manera siempre. Entonces esto, ahorramos ese tiempo o encontrando la ruta donde queremos ubicar el módulo, o queremos ubicar lo que queremos importar. Entonces en este caso, tenemos ruta unificada y se define en todas partes, toda la aplicación y todo su espacio de trabajo, véalo. Entonces. No voy a tener ningún problema con definir el camino de la manera correcta.
82. ¿Qué hay de archivos de estilo compartidos: De acuerdo, como vimos anteriormente que creamos un componente, y esos componentes viene con un archivo de estilo. Y en este pequeño archivo, se pueden
especificar los estilos específicamente sólo para este componente. Por lo que no puedes usar estos estilos fuera de este componente. Por lo que diría por ejemplo, voy a dar a esto un ejemplo de clase. Se lo voy a dar como color rojo. Y dentro del estilo o del archivo CSS, diré color. Daré clase, llámenlo color rojo. Y el color será, por ejemplo, rojo. Y cuando vaya al navegador y lo reviso, y luego voy a ver que el componente
no se está mostrando aquí porque quitamos la llamada para ello. Entonces volvamos a llamarlo de nuevo. Y volvemos a ir al componente app. Yo digo que tú, yo estandarte. Lo vamos a quitar de nuevo. Es sólo para las pruebas. Veo que este color está funcionando aquí. Entonces cuando use esta clase en otro componente, entonces veremos que esta clase no está dando ningún efecto porque estamos usando fuera de ese componente. Entonces volvamos al componente de la página principal, e intentemos usar esa clase. Por lo que aquí tenemos esta clase color rojo. Estamos en componente Banner. Iré ahora al componente de la página de inicio que creamos antes. Entonces iré aquí y diré color rojo. Vuelve a mi página. Y voy a ver que no hay ningún color porque este es el estilo es específico para este componente. No se puede utilizar fuera de este componente. Entonces esta es vista por ejemplo, para mí, no
es tanto bueno porque me gustaría tener todo es compartido porque estoy usando una biblioteca compartida. Por lo que estoy usando un espacio de trabajo compartido. Por lo que me gustaría tener también los estilos se compartan entre toda la aplicación. Esta es una de las razones. Entonces mi idea para evitar eso, que podamos crear una carpeta cerca de esas carpetas para que podamos hacer dentro de ella los estilos y todos dentro de estas aplicaciones y bibliotecas puedan usar estos estilos. Entonces intentemos eso con esta clase y veremos los resultados. Por lo que antes que nada, abriré una nueva terminal. Y entonces estoy dentro de mi, por ejemplo, organización, el espacio de trabajo. Voy a crear un directorio, lo
llamo estilos. Y luego veremos que aquí se crea este estilo. Vamos a crear un archivo dentro de los estilos. Llámenlo, por ejemplo, style.css. De acuerdo, y ahora podemos usar este dial SCSS dentro de cualquier aplicación. Entonces por ejemplo, lo voy a usar por dentro y tú compras. En cualquier tienda, ya tenemos un archivo de estilos. Y dentro de este archivo de estilos, puedes importar lo que quieras desde fuera de esta biblioteca. Por lo que puedo importar ese archivo que creé afuera, dentro de este archivo. Por lo que el archivo de entrada para el estilo de
esta aplicación es este archivo porque está especificado en configuración Angular. Si voy aquí al archivo de configuración angular. Por lo que voy a ver en los activos o los estilos que está usando este archivo. Por lo que las apps y compras estilos de fuente, SCSS. Por lo que sabré que mi proyecto está usando sólo estos estilos archivo como estilo de entrada. Entonces vayamos de nuevo a ese archivo e importemos el archivo externo que creé previamente. Entonces abriré aquí cotización, e iré paso a paso fuera de esta carpeta, fuera del nivel de aplicación. Por lo que sobre más. Y también más entonces estoy aquí. Puedo ver, por ejemplo, apps, labios. Entonces no puedo ver tal vez los estilos aquí, los estilos de carpeta, y luego usar el estilo CSS. Entonces aquí cuando importe este archivo, entonces todos los componentes dentro de esta aplicación usarán este estilo. Entonces cuando vuelva al componente y diré, por ejemplo, en sus labios, voy aquí al componente, corte, el estilo. Vamos a cortarlo. Ya no lo necesitamos aquí. Por lo que necesitamos colocarlo dentro del estilo público o del archivo de estilo camisa. Entonces lo coloco aquí y recordamos que llamamos a esta clase aquí dentro de este componente. Y también en el componente de la página de inicio donde quería colorear también funciona la página de inicio. Por lo que veremos al final que estos dos componentes compartieron un tipo de clase o lo pausaron de solo interno clasificado. Entonces como ven aquí, tenemos trabajo de Homepage y trabajos de banner, y están de color rojo. Por lo que ambas clases o esos componentes compartieron una clase. Por lo que podemos usar todos estos, por ejemplo, clases
compartidas en toda aplicación y todas las bibliotecas que queremos. Por lo que es mejor siempre crear una carpeta separada para tus estilos y compartir todas las clases dentro de esos mosaicos. También puedes importar bibliotecas, como veremos más adelante. También puedes, por ejemplo, definir algún material. Se pueden definir algunas variables. El otro beneficio también de extraer los estilos fuera de la aplicación o componentes específicos es que podemos utilizar las variables compartidas. Entonces, por ejemplo, si estoy definiendo una variable en mi componente de suma, tampoco
puedo usarla en otro componente. Por lo que sabes que en SAS se puede definir una variable. Entonces por ejemplo, yo diría primaria, por ejemplo, color para mi empresa. Por ejemplo, el color y el color primario para mi empresa es el verde. Por lo que quiero usar este valioso en todas partes de mi aplicación. Pero si lo defino dentro del componente, no
puedo usar estos valiosos. Entonces en este caso, puedo usar este valioso en todas partes donde pueda crear los archivos de estilos dentro de esta carpeta o de la carpeta compartida. Entonces tal vez diría que podemos deshacernos de todos estos componentes internos porque tampoco tenemos un buen beneficio aquí que
no podemos ver las variables que están disponibles dentro de esta carpeta compartida. Porque cada vez que quiero usar el color primario, valioso, entonces no, necesito volver a importar los estilos. Por lo que siempre necesito decir que importar dentro este componente todos los estilos o el estilo que quería crear aquí. Entonces cuando hago eso, entonces puedo volver a ver el color primario verde. Entonces de lo contrario, será un dolor de cabeza para mí porque cada vez que importe este archivo en este componente, entonces será mucha importación y terminaremos con una estructura muy complicada. Entonces para mí, yo diría tratar de evitar estilos de componentes para que podamos eliminar este archivo En los componentes y también en cada estilo de componente podemos eliminar el totalmente, podemos crear una bonita estructura en el estilo o el estilo público. Por lo que podemos especificar esto es para el banner, esto es para la página de inicio del panel de administración o por ejemplo, esta es la página de inicio de la e-shop. Por lo que en este caso, podrás tener más control sobre todas tus variables y también sobre todos tus estilos. Así que recuerda, después de eliminar los estilos, también
necesitas eliminar del archivo ts. Por lo que verás que obtienes error aquí porque eliminaste el estilo de los componentes de aquí. Por lo que también tenemos que tener cuidado con eso. Por lo que después, veremos cómo podemos estructurar lentamente estos archivos o esta carpeta o la carpeta de estilos externos en base a nuestra necesidad, en
base a la aplicación o en base a la biblioteca, la más importante para ti ahora que creamos un carpeta pública, esta carpeta pública contiene un estilo público. Y este estilo público, puedes usarlo dentro del archivo de entrada para el estilo en la aplicación. Entonces aquí lo podemos definir aquí. Y luego podemos usar las clases que están disponibles dentro de esta carpeta o dentro de este diales.
83. Estructurar archivos de estilos para aplicaciones (NgShop + Admin): De acuerdo, ahora estructuremos los archivos en base a lo práctico de construir el Ayesha, como ves aquí, que si te imaginas conmigo que la estructura, la ves frente a ti, tú, tenemos, por ejemplo, un encabezado. Tenemos el pie de página, y también tenemos algunos componentes entre. Por lo que ya podemos definir nuestra estructura en base a eso. Por ejemplo, tendría un estilo de archivo, especialmente para el banner, para donde se escribe los mejores productos. Por lo que aquí este banner tendrá sus propias categorías de archivos de estilo así como ves, también
podemos definir sus propios estilos y su propio componente. Y también estos componentes que se definen para productos de características, también se
pueden utilizar como un archivo de estilo separado. Pero como ustedes saben también, tenemos un panel de administración. Y panel de administración también está usando algunas características del producto. O por ejemplo, tendremos otra tienda electrónica pero con estilo diferente. Entonces de esta manera, tenemos que definir nuestra estructura de estilo en base a esa necesidad. Hay muchas maneras diferentes de estructurar los archivos de estilo, pero puedes elegir lo que es exactamente necesario para ti. No quiere decir que lo que estoy haciendo aquí está ahí. Creo que es justo lo que me gusta, la estructura que me gusta. Por lo que también puedes hacer tu propia estructura. Te mostraré cómo hice la estructura para e-shop, que está combinando el panel de administración y la propia tienda, y tal vez para otra tienda futura. Por lo que volviendo a nuestro proyecto, estamos viendo aquí que hemos estructurado algunos archivos. Cerremos los labios de las apps y se va al estilo. En, en los Estilos, vamos a definir la siguiente estructura. En primer lugar, voy a tener un expediente específico para cada aplicación. Entonces, por ejemplo, voy a renombrar este estilo CSS como admin CSS. Y voy a crear otro archivo, lo
llamaré, y tú compras dot SCSS. Entonces en este caso, voy a tener un estilo específico para cada aplicación, bien, en primer lugar, antes de todo, cada aplicación necesita alguna configuración. Configuración de estilo. Por ejemplo, necesitas definir cuáles son los colores, qué es una fuente, y cómo se ve, o qué bibliotecas vas a usar como externas para tu, por ejemplo, aplicación. Al igual que por ejemplo, material angular, horrible ejemplo Bootstrap o end u-prime, como vamos a hacer en este curso. Entonces en mi punto de vista, primero, crearé una carpeta, la llamaré dentro de los estilos, llamaré base. Y dentro de esta base, combinaré todos los archivos que
siempre se necesitan para cada aplicación y cada biblioteca. Te voy a dar un ejemplo. Entonces primero podemos crear un archivo, llamarlo colores. Pero SCSS en el interior de estos colores, vamos a definir los colores que se van a utilizar dentro de las aplicaciones. Por ejemplo, el color primario de mi aplicación será el naranja o el color de la marca. Entonces aquí voy a definir dos variables llamadas ellas una, color primario. Y este color primario será, por ejemplo, FF tres a 000, que es por ejemplo el naranja. Y entonces tal vez necesite otro color, color
primario pero de manera oscura. Por ejemplo, cuando estoy rondando sobre un botón, quiero mostrarlo como un más oscuro. Por lo que aquí podemos llamarlo oscuro. Y entonces podemos definir nuestro propio color, por ejemplo, 29 000. Entonces esta es una naranja más oscura, un poco más oscura. Entonces estas dos variables que voy a usar en todas las aplicaciones. ¿ De acuerdo? Se necesita otro archivo. Por ejemplo, necesito tener alguna configuración o conflicto. Entonces en esta configuración, voy a definir qué es un cuerpo, cómo se veía, y también los, por ejemplo, los enlaces y por ejemplo, las fuentes. Entonces empecemos, por ejemplo, configurar el cuerpo. Entonces en el cuerpo, quiero usar una familia de fuentes. Digamos Open Sans. También, por ejemplo, siempre el navegador predeterminado me está enviando los enlaces con subyacente. Quiero eliminar esto subrayado por defecto. Por lo que diré decoración de texto de la a o del enlace en sí. Será, por ejemplo, ninguno. Normalmente viene subrayado, pero tenemos que hacerlo como no. Entonces aquí pongo la configuración básica que
necesito para mi aplicación o para todas mis aplicaciones. De acuerdo, tal vez también, necesitaré definir las fuentes que
voy a usar en la aplicación como ya sabes, font-face. Entonces, por ejemplo, voy a crear otro archivo. Llámala fuentes. Tienes libertad. Se pueden poner todos estos archivos en un solo archivo. Por ejemplo, se pueden poner los colores y las fuentes, todo en el archivo de configuración. Pero estoy definiendo o dividiendo eso en base a archivos o en base a la funcionalidad que necesito. Por lo que en Google, hay algunas fuentes que se pueden utilizar directamente. Podemos llamarles caras de fuentes. Por lo que si quieres usar uno de ellos, solo
tienes que ir al navegador y buscar Google Fonts y Google Fonts. En el primer enlace, encontrarás muchas fuentes que deseas utilizar. Por ejemplo, necesitamos usar sonidos abiertos, como vimos anteriormente. Por lo que en base a nuestro diseño, el diseñador me dijo que debo usar esta fuente. Entonces lo voy a tener. Por lo que antes que nada, puedes seleccionar el estilo que deseas usar. Qué ejemplo voy a usar este. Y quiero tener el estilo también. Entonces necesito tomar el CSS, que se necesita para eso. Por lo que tienes aquí dos opciones. Enlace en general, puedes vincularlo exactamente en tu archivo HTML o importar. Para mí, voy a usar esta importación. Entonces podemos usar este e ir a la aplicación y pegarlo aquí. Entonces aquí tendremos importar este archivo o este archivo CSS. Algunas personas lo están haciendo de esa manera. Entonces por ejemplo, copian este archivo o este enlace, van al navegador. Y luego por ejemplo, lo
basaron en la URL. Y entonces obtendrán esta lista. Algunas personas están usando o copiando esta lista y usándola en la aplicación. Porque en las fuentes de Google, puedes definir qué tipo de fuente necesitas. Por ejemplo, se puede tener luz 300, cursiva regular. Puedes combinarlos todos en un solo estilo. Por lo que de esta manera, puedes importarlos todos en un solo enlace. Entonces para mí, prefiero usar de esta manera. Entonces antes que nada, voy a quitar esas, por ejemplo, estas formas en cursiva. Por lo que podemos tener como tres pesos. Entonces de esa manera, podemos tener esta importación, podemos tomarla, copiarla sin estas etiquetas de estilo porque las etiquetas de estilo se utilizarán en el HTML. Pero aquí estamos usando la importación dentro de un archivo CSS. Para que podamos copiar esta Importación, volver a nuestra aplicación, y luego pegarla aquí. Por lo que aquí verás que hemos importado toda esta fuente a nuestra aplicación. De acuerdo, así que ahora intentemos probar esto. Esa es la estructura. Por ejemplo, quiero ver que realmente estoy usando esa fuente en mi aplicación. En primer lugar, ven aquí que tenemos un error, y este error dice que estamos usando una hoja de estilo equivocada porque si recuerdas, teníamos el archivo aquí se llama estilo SESS. Entonces lo que tenemos que hacer, tenemos que ir a los estilos de esa aplicación, por ejemplo. Y estamos ejecutando el taller de motores como recuerdan. Entonces voy aquí al archivo de estilos de esa aplicación en el nivel de aplicación. Entonces aquí voy. Y luego Estilos y renombrar esto a su archivo, que yo estaba creando en los estilos o estilos públicos. Entonces si ven aquí que tenemos admin y tienda NG, entonces llamaré tienda ND. De acuerdo, entonces ahora no tenemos ningún error. Intentemos ver cómo podemos usar este archivo. Porque si voy ahora al frente, no
voy a ver nada. No voy a ver esa fuente que quería usar porque
no importamos los archivos que se necesitan a la aplicación. Entonces el primer paso que tenemos que hacer, tenemos que ir a ese estilo específico de esa aplicación. Por ejemplo, este extremo te pones de compras. Y necesitamos importar esos archivos, ese color, configuración y fuente. Entonces empecemos primero con, por ejemplo, los colores. Iré aquí bahías en colores. Voy a importar este archivo. Y también puedo importar otro archivo, que es la configuración. Y luego puedo importar también las fuentes. Entonces como ven aquí, importé todos estos archivos y luego este archivo se usan aquí. Entonces cuando guardo, la aplicación se vuelve a compilar,
engañaría al navegador. Todavía voy a ver tal vez ya no se usa, esta fuente. ¿ Por qué? Porque si abre la herramienta inspect, puede usar el elemento inspect usando Chrome o Safari. No importa. Vamos a usar Chrome en este curso, pero para este nivel, te
voy a mostrar es Safari. Entonces aquí tenemos esto, inspeccionamos este elemento. Y si vamos, vemos que no estamos usando esta fuente porque hay algo que anula a dos sans serif. Entonces cómo sucede esto, esto sucedió porque si vamos a la aplicación, nivel de
aplicación, vemos que tenemos los estilos, bien, todo está bien, pero Tenemos aquí componente de aplicación tiene algunos estilos específicos que viene con el índice por defecto. Entonces vamos a eliminar totalmente este archivo CSS. No lo necesitamos. Entonces voy primero al componente y quitarle eso. Este archivo es no tiene ningún estilo porque vamos a usar el estilo público. Y luego uso o elimino este archivo y luego guardo el componente. Y volvemos a la aplicación. Otra vez. Veremos todo realmente que tenemos usando la fuente o la fuente correcta y tenemos sets abiertos. Yo quisiera mencionar algo aquí que el orden de esta importación es muy importante. Por ejemplo, si pones el color después de la configuración, entonces el archivo de configuración no verá lo que hay dentro de los colores. Por lo que el orden de este expediente es muy importante. Entonces diría que tal vez necesito importar primero las fuentes. Está funcionando porque es, por ejemplo, un estilo, estilo que el cuerpo está usando esta fuente. Entonces cuando se cargue, entonces se usará. Pero es muy importante mantener así el orden. Por lo que tenemos, por ejemplo, color, fuentes y configuración. Y de esa manera, podemos estructurar ese archivo. Copiemos lo mismo para estar en el archivo admin. Por lo que tenemos aplicación también llamada admin, que será el panel de administración. Entonces de la misma manera, vamos a usar eso para el estilo. Entonces en los estilos, no
usaré el archivo de estilismo de tienda, pero usaré el de base. Entonces diré aquí que retroceden un nivel y otro nivel y luego Estilos y luego usar el administrador CSS. Entonces aquí esta aplicación admin usará el CSS admin, que se encuentra en los estilos de archivo público, y lo mismo. Eliminemos también el componente a partir de aquí. Por lo que podemos eliminar el estilo de ese componente, que es componente de aplicación o ese componente antiguo. De acuerdo, volviendo a nuestra estructura de hallazgos, también
puedes incluir otras cosas aquí. Por ejemplo, puedes incluir algo que me gusta también mantenerlos en archivo separado que se llama mixins. Y si conoces SPSS o SAS, estás usando mixins. mixins son funciones que se utilizan para estar en todas partes de la aplicación. Para que no tengas que crear un montón de código. Puedes usar este montón de estilos dentro con una sola línea. Quiero crear un Mixin. Vamos a llamarlo, por ejemplo, lista de restablecimiento. Y esta lista de reinicio. Por ejemplo, tendrá un margen 0. Y por ejemplo, en ciernes es 0, y también por ejemplo, estilo de lista no será ninguno. Entonces estoy hablando del componente UL que u l aquí. Entonces cómo puedo usarlo, Vamos a usarlo,
por ejemplo, use este mixin dentro del archivo de configuración. Entonces antes que nada, voy a importarlo y decir aquí bahías y luego tener sentido. Entonces aquí ya lo he importado y lo voy a utilizar en la configuración. Pero ten cuidado aquí tendremos problema, esa configuración no verá mixins. Necesitarás primero poner esta configuración bajo este mixins. Entonces de esta manera, la configuración, veremos esas mezclas. Por lo que voy a ir aquí a la configuración y luego diré UL, incluir lista de restablecimiento. Y cuando guarde, voy a ver que sigo recibiendo error porque creo que porque no guardé este archivo. Entonces cuando lo guardo y guardo esto, nuevo, la configuración, todo podría ir. Está bien, así que vamos a ver cómo si volteo este pedido. Entonces cuando los volteo, pongo la configuración antes de los mixins y guardo este archivo. Ya verás que me dieron el error. Dice porque no puedo ver, por ejemplo, hay al menos mixin. Entonces de esta manera, es muy importante saber que el pedido es muy importante para tu abrigo. Por lo que tenemos que volver a ponerlo, guardar y veremos que la aplicación se está ejecutando con éxito. De acuerdo, continuando con la estructura de lo que necesitamos para nuestros estilos públicos. Echemos un vistazo a nuestras aplicaciones. Por ejemplo, vamos al final que compras. Veremos que tenemos homepage y tenemos por ejemplo, encabezado de pie de página y también alguna lista de productos. Y todos ellos, todavía tienen sus propios estilos. Tenemos que eliminar eso. Tenemos que ponerlos al estilo público para que podamos ver todo ahí. Entonces todo será, por ejemplo, compartido y podemos usarlo en todas partes en otro número o en otra aplicación adicional. Entonces mi idea, Es mi, mi idea. Podrás crear tu propia estructura la que quieras. A lo mejor no te gustará esta estructura, pero te estoy dando la idea. Y luego puedes decidir en base a la estructura de tu proyecto. Por lo que diré aquí tengo los estilos que crearía, por ejemplo, carpeta de aplicaciones. Y dentro de esta carpeta de aplicaciones, crearé una carpeta para cada aplicación que tenga en mi espacio de trabajo. Por lo que voy a decir aquí tienda en general. Y luego crearé otra carpeta para el panel de administración. Por lo que usaré estas carpetas para tener los estilos de aplicaciones específicas, componentes, los componentes que realmente están relacionados con esa aplicación. No está relacionado con la biblioteca ni con una configuración pública. Entonces recrear aquí otra carpeta, llámalo admin. Y por ejemplo, dentro de esta tienda, teníamos, por ejemplo, el encabezado y pie de página dentro de lo compartido, puedes seguir la misma estructura aquí para no perderte. O también
puedes, crear tu propia estructura en función de tu necesidad no duplicar un código o duplicar algunos estilos. Entonces aquí crearía una carpeta, lo llamaré páginas. Y otra carpeta la llamaré compartida. Exactamente como tenemos en las apps. Y dentro de lo compartido, voy a crear un archivo tour dot SCSS y otro archivo el cual será encabezado dot SCSS. Y si realmente necesitas un estilo para esas páginas, puedes crear un archivo, archivo estilo para esa página. Entonces en mi caso, voy a usar una biblioteca. Voy a usar, por ejemplo, el Bootstrap. Entonces no necesitaré tener un archivo de estructura o estilo para la página porque usaré esa biblioteca para organizar la cuadrícula y los componentes que necesito. Entonces por ejemplo, como ves en este archivo XD, voy a tener todo como componente. Tendré componente de navegación. Tendré, por ejemplo, no navegación. Podemos tener un encabezado y un pie de página. Y por ejemplo, esos serán componentes sólo lo que
necesito para la esta página o la página de inicio es la cuadrícula. Y la cuadrícula vendrá de la biblioteca, que voy a utilizar. Pero de todos modos, vamos a crear ahora el archivo. Y si no lo necesitamos en el futuro, podemos eliminarlo. Entonces digamos en la página dot SCSS y luego productos menos página dot SCSS. Y aquí tengo ahora dos expedientes y o cuatro expedientes. Y luego esos archivos, debo importarlos a tienda NDI, pero esos archivos no se van a usar. Por lo que no necesito importarlos ahí. Entonces hagámoslo. De lo que yo copiaría este, o llamemos aplicaciones de importación, páginas
afiladas, y luego página de inicio. Y otro para la lista de productos. Entonces diré aquí que la lista de productos, así que tenemos, podemos llamar a esto es la base. Podemos llamar a esto
como páginas de ejemplo y veremos otras secciones como veremos más adelante. Y también habremos compartido. Y los compartidos serán, por ejemplo, la importación para el encabezado y el pie de página. Por lo que tenemos aquí el
encabezado compartido de tienda y otro para el pie de página. Entonces todo lo que escribo dentro de estos archivos reflejará ¿qué? Reflexionará el final que compres porque los estoy importando aquí. Y este archivo se utiliza en el nivel de aplicación de N D sharp. Entonces en este caso, no necesito este marcado para esos componentes. Entonces, eliminémoslos. Entonces primero voy aquí, borro este archivo. Yo estoy haciendo una limpieza aquí arriba. Y también eliminamos este. Por lo que eliminamos también el estilo y el encabezado, el mismo pie de página, el mismo. Por lo que no necesitamos mantener nada relacionado con los estilos en esos componentes. ¿ Lo ideal es, éste, lo hice, el estilo de componente de cabecera, y también este. Entonces ahora todo está funcionando sin problemas. De acuerdo, de vuelta a nuestra estructura de archivos, como vemos aquí, que hemos creado la estructura en base a nuestra necesidad. Por lo que ahora tenemos unos archivos de aplicación específicos y también la base. ¿ Qué pasa con las bibliotecas? También podemos seguir de la misma manera. Por ejemplo, quiero crear algo para la IU. Quiero crear un estilo para el banner. Entonces vamos allá. Crea una nueva carpeta. Podemos llamarlo labios. Y dentro de esta libs o bibliotecas, podemos crear exactamente la misma estructura aquí. Por lo que podemos tener un componente de interfaz de usuario. Y dentro de esta carpeta de interfaz de usuario, podemos crear un banner dot SCSS, exactamente igual que el componente que estoy usando dentro de la interfaz de usuario. Puedo crear así como slider. Entonces dentro de esta
UI, voy a crear slider dot SCSS. También, puedo incluir otras bibliotecas, por ejemplo, productos. Y dentro de estos productos, debe ser dentro de las bibliotecas. Voy a tener, por ejemplo, podemos llamar a otro componente que aún no creamos. Es sólo por ejemplo, es producto artículo SCSS. Es exactamente el artículo estará mostrando un producto. Entonces si voy a usar estos componentes o este azulejo está en el front-end también, necesito importarlos. Entonces voy aquí, digo labios, aquí está la Sección 4 elipse. También voy a importar esos saltos componente. Entonces tenemos aquí U, i, tenemos un banner, tenemos deslizador aquí. Debo poner un punto y coma aquí también. Y entonces tenemos estos expedientes aquí. Pero imagina si estamos importando todos los estilos de bibliotecas aquí, tendremos aquí un archivo muy enorme. Entonces lo que prefiero que cree un archivo en cada biblioteca. Por ejemplo, llamo a este UI dot SCSS, que incluirá los estilos para ambos. Para que yo pueda copiar este. Puedo decir que no tú, pero exactamente directamente en la carpeta. Por lo que tenemos aquí el deslizador CSS y banner CSS. Y en mi tienda de ND, en lugar de usar el componente en sí, puedo usar directamente la biblioteca de UI. Entonces voy a decir aquí, no las apps, pero decimos labios UI y usamos la UI SCSS de esta manera, si voy haciendo clic en control a este archivo, voy a ver que también se importan estos archivos. En este caso estoy usando el banner y el deslizador. Pero si quieres usar solo el deslizador, claro que puedes importarlo aquí. No tienes que importar todo para ti desde la UI para reducir el tamaño del archivo
del CSS de compilación porque sabes que SCSS se
convertirá a CSS para ser adecuado para el navegador, entonces este archivo no contendrá, por ejemplo, el deslizador porque no lo usaste en la tienda. Por lo que en este caso se puede importar sólo la forma. No tienes que importar todo. Pero para mí en este caso, quiero importar todo. Entonces puse UI, CSS, y esta UX css de UI ya está aquí. Entonces vamos a crear carpetas para las otras bibliotecas. Por lo que tenemos usuarios que utilicen contendrá, por ejemplo, el componente de inicio de sesión y el componente de registro, también órdenes. Y todos ellos tendrán su propio componente, todos estilizados, ya que veremos cómo vamos a construir esta aplicación. Está bien, así que vimos que la tienda de energía tiene sus propios estilos en las importaciones, y también el admin tiene sus propias importaciones. Entonces en la aplicación que tengo aquí, el admin, tengo aquí la tienda en sí, los componentes específicos para los componentes específicos para el admin. Y aquí estoy importando los estilos para ellos. Por lo que en las próximas conferencias, vamos a construir toda esta estructura. Nosotros lo vamos a construir despacio. Y verás cómo voy a usar cada archivo en aplicación específica y cómo decidiré que en qué ubicación estará este estilo de componentes. Entonces, por ejemplo, quiero crear un componente de artículo de producto. Yo lo puse aquí. Si quiero un crear, por ejemplo, una página de pago, lo
pondré por ejemplo, en la página de aplicación específica de la tienda. Como te dije, repito de nuevo, tienes totalmente una gran libertad para construir tu estructura a tu manera como quieras. Pero aquí, la estructura es muy importante para mí y muy fácil de usar o desarrollador amigable. Porque como desarrollador Angular, voy a usar SCSS y usar estos archivos en
base a lo que necesito para construir diferentes aplicaciones usando una X. En la siguiente conferencia, vamos a ver cómo usar bibliotecas externas como Bootstrap, end u-prime, e importar los archivos aquí. Y veremos las grandes características de usar un estilo público. La importancia de poner estos archivos en una carpeta pública en la raíz de nuestro espacio de trabajo.
84. PrimeNG Instalación de las bibliotecas de materiales de 3 Party y incluye estilos: De acuerdo, en esta conferencia vamos a aprender a incluir bibliotecas externas, como Bootstrap o prime end D, que usaremos en este curso en nuestro proyecto. Entonces primero, a veces necesitas tener algunos componentes externos ya de estilo que puedes usar dentro de tu proyecto. Entonces voy a otras bibliotecas externas como Bootstrap y luego lo instalo, y luego construyo mi proyecto en base a eso. Y en esta conferencia, quiero mostrarles cómo incluir bibliotecas externas dentro de nuestros archivos de estilo. Entonces, antes que nada, vamos a instalar una biblioteca. Vayamos, por ejemplo, a Bootstrap. Bootstrap es sólo biblioteca de estilo. No contiene, por ejemplo, los componentes angulares como prime end g. Así que vamos, por ejemplo, a bootstrap. Te lo estoy recordando, no lo vamos a usar en este curso. Entonces es sólo un ejemplo. Por lo que iría y seleccionaría un bootstrap, iría al sitio web de Bootstrap, y luego voy a empezar. Y aquí verás múltiples opciones para instalar la biblioteca. La primera forma de usar o incluir una biblioteca es usar el CDN directo, que es una URL que puedes proporcionar dentro de tu proyecto, y luego usas ese estilo. Por ejemplo, la forma más sencilla para eso, puedo copiar este enlace, que es proporcionado por Bootstrap. Y luego voy al proyecto. Por lo que voy a un lugar de mi archivo CSS donde estoy incluyendo los principales archivos CSS como vimos anteriormente. Y escriba URL de importación. Y aquí incluimos la URL que copiaste. Entonces lo pegamos aquí. Y luego cargamos el proyecto. Todo está bien. El proyecto ya se está ejecutando. Y probemos uno de esos módulos que se incluyen con Bootstrap. Por ejemplo, selecciono un botón. Copiemos esta parte. Uno de los botones que estoy ejecutando ahora, el taller de motores del proyecto. Entonces voy hasta el final, tú compras, por ejemplo, homepage y app basado en este botón aquí. Entonces lo intentamos, lo ejecutamos, y veo que tenemos aquí el botón está de estilo, así que importamos directamente en línea la biblioteca Bootstrap a nuestro proyecto. Pero en este caso, debes tener una conexión a Internet. Entonces cuando desconectas Internet, no
puedes trabajar sin conexión y luego no puedes ver los estilos. No puedes cargar los estilos desde la Nube. Hay otra forma en que podemos garantizar que estamos trabajando fuera de línea, que como vemos aquí, que al empezar tenemos una descarga. Puedes descargar los archivos por sí mismos e incluirlos en el proyecto, o puedes usar la gestión de paquetes npm. Entonces cuando ejecutas este comando en nuestro proyecto, así abro una nueva pestaña aquí para ejecutar el comando, lo
pego aquí, y ejecuto el npm install Bootstrap. Por lo que me instalará la biblioteca localmente para que pueda trabajar fuera de línea porque como vimos aquí que tenemos aquí el enlace remoto. Entonces cómo podemos incluir lo que instalamos dentro de la Biblioteca de Derecho. Por lo que es muy sencillo. Por lo que normalmente la biblioteca viene con un nombre. Por lo que este es el nombre donde la biblioteca tiene una carpeta en módulo MPM. Por lo que tienes opción. Por lo que puedes incluir la biblioteca navegando a los módulos MPM. Entonces voy aquí y subo un nivel, voy a módulos de nodo, busco Bootstrap, y luego esto, y luego el CSS. Y aquí tienes los archivos CSS. O de otra forma que puedes hacerlo es muy simple que solo tienes que usar este letrero. Y luego llamas a la carpeta de la biblioteca que quieres. Entonces digo boot strap y luego quieres saber a qué archivo CSS quieres incluir. Por lo que normalmente está escrito en la documentación de la biblioteca. Entonces te dice que voy a esta carpeta para tener el paquete e instalarlo o incluirlo en mi proyecto. Pero si no lo encuentras, como cómo tenemos aquí en Bootstrap, no puedes navegar por ti mismo en la carpeta del módulo Node. Y luego puedes navegar al CSS que quieras. Te estoy mostrando esta forma de tener más conocimientos sobre cómo jugar dentro de los módulos de nodo. Entonces voy a módulos de nodo y luego encuentro el Bootstrap, y luego veremos normalmente cada biblioteca viene con una compilación de destino. Entonces cuando ves a estos titular, entonces significa que esta es una versión de compilación. Entonces esto lo que quieres usar normalmente, o tienes un SAS Virgin lo tiene ver aquí en Bootstrap. Por lo que el Bootstrap tiene archivo Sass y también tiene el archivo CSS. Y este es archivo CSS como minificado también. Entonces el camino para nosotros es menos CSS y luego Bootstrap CSS min, o tenemos otro camino que es SCSS. Y luego navega hasta el archivo SCSS de bootstrap, donde está incluyendo todos los archivos que necesitamos aquí. También puedes incluir solo algunos archivos específicos. No tienes que incluir todo como quieres usar una cuadrícula y no quieres usar todas las demás cosas. Por lo que puedes incluir lo que quieras dentro. Por lo que para mí, incluiré este archivo bootstrap. Por lo que iré aquí después de este signo bootstrap, i-type SCSS como me mostró una carpeta. Y luego pongo Bootstrap SCSS. Es exactamente el mismo camino en módulos antiguos. Entonces en módulos Node, tenemos una carpeta bootstrap, que es ésta, y luego SCSS. Y luego voy directamente a Bootstrap SCSS para incluirlo. De esta manera, incluí todo de Bootstrap. Guardemos y probemos de nuevo en nuestro navegador. Entonces veremos que el botón está funcionando aunque estés desconectado a Internet porque la biblioteca ya está instalada en tu máquina. Por lo que de vuelta al navegador, verás que el botón está aquí y empezarás. Hay otra forma de incluir estilos dentro de tu proyecto. Normalmente en Angular. Usando Angular JSON. Angular JSON es un archivo donde se puede configurar su proyecto con unos archivos que
se pueden incluir por defecto con el proyecto cuando se está construyendo o combinando el proyecto. Entonces cuando voy a Angular JSON, veo que cada proyecto tiene alguna configuración específica. Por lo que una de esta configuración es un Styles. Styles es una matriz donde puedes incluir cualquier cosa que quieras para tu estilo el proyecto? Entonces si quiero incluir el bootstrap, usaría la misma cadena y agregaría entrada para esta matriz, pero la ruta será un módulo de nodo. En estos módulos tenemos Bootstrap y luego como vimos previamente que tenemos un css y luego bootstrap otro SCSS. Por lo que aquí incluimos el CSS en nuestro proyecto. Recuerda que necesitas reiniciar tu proyecto después de este cambio, porque este cambio es un cambio de configuración, necesitas reiniciar el proyecto nuevamente. Entonces vamos a quitarlo del archivo SCSS y luego reiniciar el proyecto. Entonces para detener el compilador, Control C en el compilador. Y luego lo vuelvo a ejecutar. Se compiló con éxito y corrió de nuevo a la actualización del proyecto. Ya ves que realmente movió la biblioteca del archivo SCSS, pero la tenemos incluida en archivo Angular JSON donde puedo incluir los estilos. Lo que prefiero, de qué manera prefiero el camino donde estamos incluyendo los archivos aquí. Porque de esta manera cuando se incluye especialmente archivo SCSS, se
puede tener acceso a algunas variables de esa biblioteca. Como saben, en SPSS, se
puede definir una variable. Y esas variables pueden ayudarte a ajustar esta biblioteca para que quepa exactamente en tu proyecto. Por ejemplo, si volvemos a bootstrap y vamos al sistema de grid. Y en el sistema de grid, como ustedes saben, tenemos algunas variables o valores predefinidos para tamaños cuales pueden ser utilizados para móvil o para computadora o para una tableta. Pero como les dije antes, el beneficio de incluir el archivo SAS es que
podemos usar algunas características de esa biblioteca, de esa cuadrícula. Podemos ajustarlo. lo que tenemos, por ejemplo aquí los archivos SAS o las variables SAS como columnas de cuadrícula o ancho de canalón acordado. Entonces cada vez que vaya aquí y cambie esta variable en base a lo que necesito en mi proyecto, entonces todo el Bootstrap se comportará en base a ese cambio de la variable. Lo mismo. Por ejemplo, hay algunos mixins. También los puedo usar. Veremos que profundamente después de que estemos construyendo el proyecto, cómo usaremos esas variables, cómo usaremos esos mixins de esta biblioteca o de cualquier biblioteca para construir nuestra tienda electrónica de la manera correcta.
85. Instalación de PrimeNG: De acuerdo, Como lo decidimos previamente, te
voy a mostrar cómo instalar biblioteca
prime N D en tu proyecto para correr y caminar con ella. En primer lugar, tenemos que ir a su página web de prime NGA, que es prime faces.org. Y luego haces click en prime NG y luego demo. Y aquí estarás especializado para componente angular bajo Prime NG. Entonces si vas a demo, verás todos los componentes que necesitamos para nuestra biblioteca. Veremos todos los componentes más adelante cuando estemos trabajando con el proyecto. Pero ahora instalemos la biblioteca a nuestro proyecto. Y en la próxima conferencia, les
mostraré cómo trabajar con estos componentes de esta biblioteca. Entonces, antes que nada, necesitas ir para empezar. Y empieza, verás dos cosas que tienes que instalar. En primer lugar, el NG prime y luego los iconos primos. Debido a que m prime NG biblioteca y componentes, hay iconos y esos iconos deben instalarse por separado. Entonces hagámoslo en nuestro proyecto. Primero, instalemos Prime NG y luego los iconos primos. Volviendo a nuestro código, abrimos una nueva terminal para su instalación. Y tecleamos npm install, y luego prime end y save flag para guardarlo en profundidad entramos dependencias y lo vamos a tener instalado en nuestra máquina. Otra biblioteca que necesitamos instalar, se llama iconos primos. Entonces vamos a instalarlo también. Vamos a npm instalar iconos prime, y luego Guardar, está bien, Ahora tenemos todo instalado e instalado con éxito. Por lo que anteriormente hicimos alguna actualización en Angular JSON que agregamos biblioteca bootstrap. Vamos a eliminarlo para no tener conflictos con la biblioteca Prime NG. Por lo que debes estar seguro de que no estás instalando múltiples bibliotecas para no juntar conflictos, sobre todo si están usando a veces la misma nomenclatura de clases de CSS. Entonces guardamos el JSON angular y luego reiniciamos el proyecto como aquí, lo tenemos funcionando, luego necesitamos detenerlo. Y luego vuelve a ejecutarlo. Y después de eso, voy a ir al final ustedes
compran e importan la biblioteca prime N G. Voy a utilizar la forma en que voy a importar los archivos de prime end a mis principales tiendas de motores, SEMS. Por lo que aquí podemos crear una sección denominada bibliotecas. Y aquí tenemos que importar. Y luego ponemos el letrero que acordamos antes. Y ponemos prime N G. Pero no sé qué archivo. Tienes dos formas de saber qué archivo. Se puede ir a módulos de nodo como vimos anteriormente. O puedes ir aquí en la documentación para ver qué archivo tienes que incluir. Por lo que aquí dice que hay que incluir esos expedientes. Entonces vamos a incluir este que estamos contenidos por iconos, que necesitamos, como vimos anteriormente. Y el segundo es tema. Necesitamos instalar un tema. El bonito con la energía Prime, viene con múltiples temas. Para poder seleccionar el tema adecuado para tu proyecto. Por ejemplo, vamos a seleccionar este. Ahí hay un morado, cambiará de inmediato en esta vista. Por lo que tienes un tema oscuro, tienes múltiples temas que puedes usar. Para este curso, voy a usar saga azul. Entonces así como esto, tienes que copiar esta parte. O puedes copiar aquí uno de esos temas. Entonces voy a usar saga azul como acordamos. Entonces aquí tendré otra importación y firma, y luego aquí voy a incluir la cosa. Lo último que tenemos que incluir es la propia biblioteca. Entonces copiamos este. Y luego hacemos otra importación. Otra vez. Ponemos el archivo CSS de esta biblioteca. Por lo que aquí hemos incluido todo respecto a esta biblioteca. Ahorramos que vemos todo compilado con éxito. No tenemos ningún problema porque estamos en el camino correcto. Aquí no teníamos ninguna flecha. En la próxima conferencia, les voy a mostrar cómo
utilizar uno de esos componentes en esta biblioteca. Entonces es muy fácil. No tenemos que hacer mucho trabajo. Es exactamente como se implementa aquí. La energía prime está muy bien documentada, como veremos en la próxima conferencia.
86. Usar los componentes PrimeNG en nuestro proyecto: De acuerdo, ahora como se prometió, les
mostraré cómo usar uno de esos componentes de esta biblioteca. Por lo que en primer lugar, vamos a esta biblioteca. Echemos un paseo por algunos componentes. Por ejemplo, tenemos el acordeón prime NG viene con muy buena documentación para cada componente y te muestra cómo usar cada componente. Por lo que en primer lugar, podemos acudir a la documentación de este componente. Necesitamos importar el módulo de acordeón a nuestro módulo de aplicación. Entonces vamos a copiar esta línea y vamos a nuestro proyecto. Y veremos que tenemos dos aplicaciones. Y cada aplicación tiene módulo de aplicación. Por supuesto tal vez tendremos múltiples módulos como veremos más adelante, pero ahora sólo tenemos un módulo de aplicación. Entonces trabajemos aquí. Entonces voy a importar primero este módulo de acordeón. Y vamos a las importaciones aquí para incluirlo dentro de nuestro módulo NG de módulo de aplicación. Y luego veamos esa documentación. Lo que nos está diciendo uno de estos ejemplos nos
está mostrando que tenemos que copiar este código HTML. Por lo que este HTML será pegado en la página donde vamos a utilizar este componente. Por ejemplo, vamos a la página de inicio. Entonces si vamos aquí en nuestra aplicación, tenemos páginas. Una de estas páginas es la página de inicio. Podemos quitar este botón que creamos previamente. Y luego pegamos este código aquí. De acuerdo, ejecutamos el proyecto, se salvó. Vamos otra vez. Y luego tenemos dos anfitriones locales, 4200, el puerto. Y veremos que tenemos el acordeón, pero aún nos falta algo. Hay un problema porque no estamos usando las animaciones. Si vamos a empezar de nuevo en esta biblioteca, tú, necesitamos instalar las animaciones. Todo lo que necesitamos para importar módulo de animación. Por lo que tenemos que importar este módulo, que ya está instalado con Angular. Volvemos a ir a nuestro módulo de código. Y luego lo ponemos normalmente después de su módulo de navegador. Y aquí importamos. Entonces hemos importado la animación porque esta biblioteca está usando este módulo. Entonces si volvemos al navegador, volvemos a nuestro proyecto, veremos que el acordeón está funcionando mayormente de la misma manera que lo haces para todos los componentes. Está muy bien documentado. Puedes hacer lo que quieras. Usaremos la mayoría de esos componentes que están en esta biblioteca cuando vamos a construir nuestro proyecto.
87. Overrride PrimeNG: Quisiera además mencionar que
después de que estamos instalando los componentes nk prime, notamos que está anulando las fuentes. El tipo de letra, que es nosotros, por ejemplo, estábamos planeando utilizar Open Sans, que hemos instalado previamente, pero me gustaría, por ejemplo, instalar o usar eso en el motor prime. El problema es que Para Prime NG hay algún caso específico. No es el único dicho de que queremos cuerpo y luego usamos Open Sans. Pero también hay que decir después de importar, por
supuesto la energía prime, hay
que decir componente B, como esta clase, componente P dash. Y luego puedes seguir trabajando. Por lo que en este caso, componente
p es el punto de entrada para las fuentes de energía prime. Por lo que el cuerpo no es suficiente, sino también p componentes. En este caso, dejarás que tu aplicación y los componentes de prime NG usen la fuente que especificaste aquí. Entonces para eso, el nivel de aplicación, cuando voy aquí, por ejemplo, a tienda de NG, pongo la configuración no aquí al principio, sino después de usar el NG prime e importar todas las bibliotecas de prime NG. Entonces después de que lo conseguimos todo de la energía Prime, voy y actualizo la configuración del componente pico y el cuerpo para usar esa fuente. Solo por mencionar este punto para ti en caso de que no veas tu fuente sea aplicable en tus aplicaciones.
88. Instalación del sistema de cuadrícula: De acuerdo, sé que estás muy motivado para
empezar a codificar y para iniciar el proyecto del mundo real. Pero lo último, por favor perdóname que quiero mostrarte cómo instalar una rejilla. En cada aplicación, necesitamos un sistema de cuadrícula. Un sistema de cuadrícula que está mostrando la estructura de la aplicación. Quieres saber a qué me refiero. Si vas a una biblioteca, verás algo llamado flex prime. Y este flex prime es un sistema que te está mostrando la cuadrícula para disponer tus componentes basados en esa cuadrícula. Y tiene una funcionalidad muy hermosa y es muy dinámica. Para que puedas usarlo y encajar tu aplicación en cada plataforma, como un móvil o tableta o un escritorio. Si no sabes nada del sistema de grid, veremos que más adelante en detalle, cómo construir nuestra aplicación basada en el sistema de grid. Pero primero, si vamos a este sistema de rejilla, tiene su propia configuración. Entonces, en primer lugar, necesitamos pasar por la configuración. Necesitamos de nuevo instalar una biblioteca, Biblioteca del Vino. Se llama prime flex. Exactamente algo así como iconos primos o NG primo en sí. Por lo que en primer lugar, necesitamos ir a nuestro proyecto e instalar prime flex. Por lo que abrimos una nueva terminal. Y luego vamos aquí, decimos npm install prime flex, y luego decimos, OK, ahora se instala este flex prime. Veamos cómo podemos usarlo. Tomemos un ejemplo de la propia biblioteca. Entonces vemos aquí que prime flux tiene sistema de red múltiple. Uno de ellos es el sistema de rejilla y flexbox. Entonces vamos a utilizar en este curso ese sistema de red. Ese sistema de rejilla es muy dinámico, que se ajustará a nuestra aplicación en tabletas móviles o escritorios. Entonces como ven aquí, hay múltiples ejemplos. Tomemos uno de esos ejemplos. Por lo que tenemos aquí primero esto sea grilla. Pero antes de que veamos que tenemos aquí una clase. Pero esta clase viene de donde necesitamos usarla. Entonces, en primer lugar, necesitamos incluir este archivo en nuestra biblioteca, exactamente de la misma manera como lo hicimos anteriormente con otras bibliotecas. Por lo que copiamos este camino. Vamos al proyecto. Otra vez en tienda de energía dot SCSS. Importamos esta biblioteca usando este signo y la tenemos ahora como CSS. Entonces cuando guardamos, vemos que el proyecto se está ejecutando con éxito. Ahora somos capaces de recoger un ejemplo. Volviendo al sistema de cuadrícula bibliotecaria que está recogiendo uno de esos ejemplos. Al igual que por ejemplo, podemos decir éste. Vuelve a nuestro código, vamos a la página de inicio y luego pegamos este código aquí. Vamos al navegador. A nuestro proyecto, veremos que este sistema de red está funcionando. Porque si desactivo esta biblioteca, Vamos a comentar esta biblioteca. Vuelve a nuestro proyecto. Veremos que están alineados uno debajo del otro porque por defecto ese div etiqueta todo el espacio. Entonces con un sistema de rejilla que
instalamos, tendremos el sistema que es apto para nuestra aplicación y lo necesitamos para móvil, escritorio y tablet. Como les dije más adelante, usaremos toda la funcionalidad de este sistema de cuadrícula. Ahora estamos listos. Hemos construido la estructura de los estilos. Contamos con estructura de los archivos y las carpetas. Ahora estamos listos para comenzar a codificar y construir la aplicación. Voy primero a empezar con el panel de administración. El panel de administración donde estamos agregando productos, usuarios, pedidos, y también categorías y hacemos todas las operaciones crudas sobre ellos.
89. Introducción: descripción del panel de Admin: Bienvenido a una nueva sección. Aquí vamos a construir la aplicación del panel de administración. El panel de administración donde vamos a controlar órdenes. Vamos a controlar productos, categorías, y todas las operaciones en ellas, como agregar, editar, y eliminar. Entonces como resumen, voy a tener una pantalla de inicio de sesión. Voy a iniciar sesión en mi usando mi cuenta aquí. Por lo que usaré, por ejemplo, esta cuenta. Yo soy administrador, por supuesto, los usuarios normales tampoco pueden mirar adentro. Por lo que sólo podemos como admins buscando, tendremos un dashboard como ven aquí. Cuántos pedidos tengo, cuántos productos,
cuántos usuarios en mi tienda, y cuántas ventas totales hice para mi tienda. Por lo que también, tendremos una visión general de los productos. Por lo que se pueden también productos ayudados. Puedes eliminarlos. Verás cómo también puedes hacer como conformación. Son troncos y puedes editar y productos. Por ejemplo, actualizaré este. Puedes hacer click en actualizar y recibirías todas esas notificaciones. Y además, podemos trabajar con categorías. Veremos cómo usaríamos también el recolector de color. Añadiríamos como formularios básicos como ven aquí. Y usaremos los iconos y por supuesto, los pedidos donde tendremos el estado de los pedidos que se está doblando o tramitando. Y el usuario o el administrador pueden cambiar el estado del envío o el pedido. Para que pueda tener como enviado o entregado. Y en base a eso, los datos se actualizarán aquí también. Vamos a tener como algún control sobre los usuarios o sus clientes. Ya veremos quién es administrador, quién no. Tendremos como lista de países, cómo podemos saber de qué país es. Y vamos a agregar la información, usar una contraseña, y luego estamos enviando esos datos al back-end de
la manera correcta para la funcionalidad del panel de administración sin que falte nada, veremos también cómo podemos subir imágenes y nosotros tienen que usar los editores de alcance. Veremos toda la información que realmente necesitamos para construir unas aplicaciones del mundo real y agarrar datos de la base de datos también. Utilizará el botón de cierre de sesión para que el usuario pueda cerrar sesión y volver de nuevo a la página de inicio de sesión. Veremos cómo proteger nuestro camino es para que el usuario
no pueda ir a ninguna página hasta que se autorice. Veremos cómo agregaremos un token, cómo agarraremos ese token a nuestro almacenamiento local y lo usaremos. Cómo podemos obtenerlo de la base de datos o del backend y usarlo en el front-end para saber si el usuario es administrador o no. Todo esto será en los siguientes apartados. Y vamos a construir ese paso a paso usando Prime NG y también otras tecnologías que necesitamos para eso.
90. Construir el concha: De acuerdo, Ahora vamos a construir el caparazón. A lo que me refiero con el caparazón, como ves en esta foto, que tenemos una barra lateral y tenemos un contenido a la derecha. Por lo que esta zona blanca estará llena del contenido al que voy a navegar. Por lo que cuando haga clic en productos, voy a ver tabla de productos, o por ejemplo, voy a ver tabla de categorías. Veré Editor para el producto. Entonces en este caso, necesito el caparazón. Yo lo estoy llamando shell porque contenía como un lado fijo donde es barra lateral es fija. No necesito actualizar la barra lateral cada vez que estoy navegando a una página nueva, pero solo necesito actualizar el contenido. Entonces como ven aquí, necesitamos dos componentes. Un componente es el propio shell, como la página donde ubicaré el dashboard y los elementos y también la barra lateral. El barra lateral, también es su propio componente, contendrá el logotipo y sus propios enlaces. Entonces hagámoslo en el código y veremos qué necesitaremos para eso. De acuerdo, ahora, como primera cosa que tenemos que hacer, tenemos que configurar la aplicación correcta. Como recuerdan, hemos creado dos aplicaciones. Entonces primero es la obligación admin y el segundo es tienda ND. Entonces para eso, vamos a trabajar en la aplicación admin porque estamos construyendo ahora el panel de administración. Entonces vamos a configurarlo. Bueno, entonces antes que nada, necesitamos importar los estilos, que está en los estilos públicos, y eso lo hicimos previamente. Segundo, quiero configurar Eastland. Eastland como recordamos, es arreglar nuestro código cuando estamos haciendo algunos errores, extraño cuando estamos importando algunas bibliotecas innecesarias, etc. Así que para eso, necesitamos primero arreglar el prefijo de las directivas y el componentes en Angular. Como recuerdan, creamos un componente que este componente tiene un selector y el seleccionado debe seguir alguna regla, como un prefijo. Por lo que necesitamos tener un prefijo admin para cada componente. Por supuesto, no tienes que seguir esta regla. Puedes nombrar tus componentes como quieras. Pero para cosas organizacionales, es mejor tenerlo así. Por lo que iría a ES pelusa. Y aquí en esta parte, el atributo de esta directiva de electrodos será el prefijo como admin y también el componente sería el prefijo como admin. Por lo que en este caso, cada componente debe tener el prefijo admin. Además, el componente App debe tener el prefijo admin. Pero como recuerdan, en Angular, tenemos componente N3, que es componente app, que se llama archivo HTML índice del proyecto. Por lo que estoy en el nivel del proyecto arriba. Y aquí tengo índice. Y a este índice estamos llamando el HTML básico que se necesita para el proyecto. Entonces para eso, tenemos aquí también admin. Y aquí también, admin para una etiqueta de cierre. Ahora estamos listos y nuestra aplicación siguiendo las reglas de ES pelusa. Por supuesto que puedes agregar más reglas en función de tus necesidades. No los voy a tener todos. Yo solo quiero mostrarles que hay algún archivo llamado Eastland que están siguiendo algunas reglas que deben hacer para su código. Entonces como hablamos anteriormente, necesitamos crear un shell. Shell contendrá una barra lateral y el contenido. Entonces para eso, necesitamos generar dos componentes. Una es shell y la otra es una barra lateral. Podemos hacerlo a través de una consola x. Hacemos click en Generar y buscamos un componente. Hacemos clic en eso y le damos un nombre, por ejemplo, shell. Y el proyecto es admin. Hablamos previamente de todas las demás opciones. Por lo que voy a dar esto a un CSS y luego voy a dar click en Ejecutar. Pero primero, necesito tener una estructura para los archivos y los componentes. Por lo que sería mejor si lo estamos poniendo dentro de una carpeta. Por ejemplo, tenemos aquí algo para las páginas y podemos crear otra carpeta. Nosotros lo llamamos compartido porque el shell se comparte entre toda la aplicación. Para que podamos revisar el camino. Vemos eso, vale, hasta shell compartido y luego se crea el componente. Vamos a ejecutarlo. Y tendremos el archivo o aquí se crea el componente. Agradable. Entonces vamos a hacer algo de limpieza. Al igual que por ejemplo, necesitamos hacer el prefijo admin y también necesitamos quitar el CSS porque tendremos el CSS en el estado público. Entonces, eliminemos este archivo. Y el objetivo para ese archivo, lo
haremos por cada componente que estemos creando. Otro componente que necesito tener es la barra lateral misma. Por lo que vamos de nuevo a generar componente. Seleccionamos este y decimos compartido y luego barra lateral y en el administrador del proyecto y todo igual. Entonces ejecutamos este comando. Tendremos en nuestra estructura de archivos, nuevamente una barra lateral. Lo limpiamos y hacemos este prefijo como administrador de barra lateral y realmente movemos el archivo SCSS. Ahorramos y veremos que los componentes ya se importan en el módulo. Volvamos a nuestro compilador. Estamos ejecutando ya esa aplicación y D-sharp, necesitamos ejecutar la aplicación Admin para que podamos ir de nuevo y x servir. Pero decimos que el nombre de la aplicación es admin. Entonces lo estamos ejecutando ahora para comprobar si todo está funcionando bien. Estamos recibiendo algunas flechas aquí porque no
actualizamos el archivo de estilos de esa aplicación Admin. Entonces si recuerdas, estamos trabajando solo en tienda ND, no en el admin. Entonces vamos a copiar las mismas cosas que teníamos en G sharp y pegarlas en el admin, excepto la parte que es realmente, realmente específica para la aplicación. Por lo que tenemos aquí Tienda de Apps. No, no necesitamos eso en el admin. Necesitamos sólo algo específico para el administrador de la aplicación. Por lo que podemos quitar esta parte y volver a
ejecutar el proyecto y comprobar si todo está funcionando bien. Volvemos al estilo CSS, donde llamamos al admin. En el nivel de aplicación de estilo, volvemos a presionar Guardar, y veremos que todo se compiló con éxito. Ahora como estructura de componentes, estamos listos para ir al siguiente paso donde vamos a llamar a esos componentes como el shell y la barra lateral para mostrarlos en la aplicación. Para eso, necesitamos configurar rutas. Y esto lo veremos en la próxima conferencia.
91. Crear las rutas: De acuerdo, Hablamos previamente de las rutas. Ahora vamos a importar o construir algunas rutas para el panel de administración. En primer lugar, necesitamos tener que llenar esta matriz. Por lo que necesitamos, como hablamos anteriormente, definir un camino es, y esos pases se referirán a los componentes. Pero cómo lo haremos en el camino, cómo construimos la aplicación. Entonces según se requirió, creé la matriz de la ruta. El array de esta ruta, que tendrá componentes u objetos, y cada objeto tendrá la ruta y el componente al que se refiere este paso. Entonces, por ejemplo, el predeterminado se referirá al componente shell. Cuando guardemos eso y probemos nuestra aplicación, veremos que aún tenemos panel de administración porque tenemos el componente app, aún tenemos este título. Por lo que necesitamos decir a este componente de la app, a la feria y al usuario fuera cómo podemos hacer eso. Simplemente decimos salida de enrutador y cerramos como una toma de enrutador de etiqueta. Entonces cuando ejecutemos esto, veremos que se refiere exactamente al shell porque la ruta predeterminada se refiere al componente shell. De acuerdo, como hablamos anteriormente, necesitamos dividir el caparazón en dos partes, una barra lateral y una de contenido. Haz eso. Por lo que voy a ir al componente shell, quitar esta parte, voy a crear un div, llámalo admin wrapper. Depende de ti. Puedes construir el código HTML basado en cómo te guste. Y dentro de esa goma, quiero llamar a la barra lateral de administración, que creamos previamente. Y cerca de la barra lateral, necesitamos crear el contenido. Entonces digo administrador en vivo, por ejemplo, contenido. Y lo que habrá dentro de aquí será dentro de él, el contenido. Entonces, ¿cómo podemos referir eso? En primer lugar, veamos si todo sigue funcionando. Vamos de nuevo al navegador, está bien, la barra lateral funciona. Necesitamos aquí para sentir el contenido. Por ejemplo, necesitamos el panel, como vimos anteriormente, que la forma de barra lateral contenga muchos enlaces como productos, dashboard, y pedidos. Por lo que el contenido será siempre diferente. Por lo que en este caso, necesitamos crear contenido dinámico. Podemos hacerlo también a través de sus rutas. Por lo que diré que este camino tiene el componente cizallamiento y estos caminos tienen un hijos y los niños también serán rutas. Por lo que los niños también serán array y contendrá objetos y cada objeto, tendremos un camino. Podemos llamarlo, por ejemplo, dashboard y también componente. Por lo que necesitamos referirnos al componente de tablero, que creamos también previamente. Entonces cuando guardo y luego voy al navegador, aún
veo todo vacío. Cuando navegue directamente al dashboard, veremos que no pasó nada porque el tablero, está bien, estamos en el camino correcto, pero no podemos ver nada en el contenido. Entonces, ¿cómo podemos arreglar eso? Vamos a ir al componente shell y decir que este niño o este componente también tiene salida de router. Por lo que cuando se desea mostrar los hijos de este componente o sus trayectorias hijos de este componente, necesita colocar también una toma de enrutador. Eso lo guardamos de nuevo en el navegador. Veremos que tenemos trabajos de barra lateral y trabajos de dashboard. Y cuando creas otro camino aquí, por ejemplo, lo llamamos para productos. Entonces te referirás al componente de productos, y se llamará y renderizará dentro del shell. Entonces en este caso, no estoy actualizando cada vez que la barra lateral, estoy actualizando solo esta parte. Y así como manejamos el camino está en nuestra aplicación y veremos en el futuro el beneficio de eso, que podamos resguardar todas estas rutas, como proteger todas estas pasadas para que nadie pueda acceder también a sus hijos. En la siguiente conferencia, vamos a diseñar admin wrapper y admin content para tener el diseño objetivo que les mostré previamente.
92. Sidebar de navegación con panel de Admin: De acuerdo, empecemos con lo primero. En primer lugar, quiero crear esta barra lateral. Como ven aquí, que tenemos el logo y tenemos algunos botones de navegación. Dentro de estos botones de navegación, tenemos iconos. Entonces vamos a crear eso. De acuerdo, como vimos anteriormente, que creamos un envoltorio de administración. Entonces tenemos la barra lateral. Vamos a la plantilla de barra lateral. Vamos a hacer el div. Div es barra lateral o barra lateral de administración. Y luego quiero definir dentro de la barra lateral primero, como vemos anteriormente, que tenemos un logo en la parte superior. Y también quiero definir los enlaces, los enlaces que viene debajo del logo. Entonces aquí necesito también importar una imagen. Ya está la imagen, tengo en mi carpeta de activos. Y si vas a la carpeta Activos, lo
recojo del diseño y luego lo pongo en esta ubicación de la carpeta. Por lo que los activos es el nivel de aplicación. Entonces volvamos atrás y creemos los enlaces. Eso enlaza como normal, necesitamos crear lista sin clasificar. Y esta lista sin clasificar tendrá lista dentro un elemento de lista y cada elemento de lista tendrá un enlace. Y dentro de este enlace defino mis cuerdas que necesitaba. Por ejemplo, necesito un tablero de instrumentos. Yo también necesito, por ejemplo, los productos y los pedidos, etcétera. Como recuerdan, teníamos un ícono antes del texto. Entonces después del texto tenemos un ícono. Vamos al prime end la biblioteca, porque ya instalamos esta biblioteca, copiamos estas dos líneas de código o esta sola línea de código para importar el ícono. Entonces, en primer lugar,
voy de nuevo al tablero o a mi barra lateral, y pegué aquí. Por lo que para todos los demás enlaces, podemos crear otra lista. Y luego podemos renombrar esos artículos como productos. Y renombramos, por ejemplo, categorías. Y también necesitamos órdenes. Y también al final, necesito usuarios. Y por supuesto necesitamos un enlace que se llama cerrar sesión, donde el usuario cierre sesión desde el panel de administración. Pero primero pongamos los iconos correctos porque tenemos aquí pi check, para que puedas encontrar los iconos yo también en la biblioteca de iconos. Entonces tenemos aquí todos los iconos. Entonces solo coges el nombre y lo pegas. Entonces por ejemplo, para dashboard, necesito casa, para productos, necesito un maletín, cuatro categorías. Necesito una lista y para pedidos, necesito, por ejemplo, carrito de compras. Y por ejemplo, para los usuarios, necesito icono de usuarios. Por lo que cada ícono necesita el nombre que pueda recoger de la biblioteca. Y para el cierre de sesión, tengo algo llamado cerrar sesión. Ahorremos y vayamos a la aplicación y veamos si todo está funcionando bien. De acuerdo, Tenemos todo está bien, pero sin ningún estilo. Entonces vamos a darle estilo a la barra lateral en nuestra carpeta de estilos públicos. Por lo que antes que nada, iré a los estilos públicos. Y aquí ya he definido la carpeta admin. Entonces dentro de esta carpeta admin, necesitamos tener algo llamado shell, shell dot SCSS, y luego importamos en el admin. Entonces aquí tengo un compartido Y digo importar de, por ejemplo, hay apps y luego Admin, y luego Shell. Entonces necesito importar esa. Entonces después de aquí necesitamos escribir nuestros estilizados aquí. Entonces en primer lugar, necesito tener, por
ejemplo, su envoltorio, el envoltorio y el principal, que nuestra parte superior tenga toda clase de barra lateral dentro de ella. Entonces vamos a tener su superior primero. Por lo que dentro del shell creo clase admin. Y esta clase admin tendrá un rapero. Y dentro de esta envoltura,
por ejemplo, tengo una altura 100%. Y por ejemplo, tengo un bateo 0 solo para inicializarlo. Y entonces un margen tendrá un 0. Solo estoy inicializando todo el gotero. Y luego necesitamos crear la clase de barra lateral y la clase de barra lateral, como vimos anteriormente, que está dentro y tiene el prefijo de admin. Entonces por eso uso esta barra lateral ampersand menos. Se arreglará la posición de la barra lateral porque no
quiero desplazarme por la barra lateral como te mostraré más adelante. Y el ancho será de 175. Así como lo obtuve del diseño y el color de fondo. Por ejemplo, tengo un negro y también tenemos una altura. Podemos darle 100%, por lo que puede ser pies en toda la página. Entonces, ¿qué pasa con el contenido principal? El contenido principal que se acercará a la barra lateral. Entonces aquí necesito tener también ampersand main. Y dentro de esta principal tendré un ancho. Cuál es el ancho será un cálculo del 100% menos 175 pixel porque la barra lateral tiene 175 pixel. Por lo que aquí tengo también un margen. Necesito empujar este contenido principal mayormente a la derecha. Por lo que diré margen a la izquierda, serán 175 píxeles. Entonces si vamos aquí, veremos que tenemos la barra lateral y también tenemos el contenido aquí. Y como recuerdan, teníamos la ruta del salpicadero. Por lo que la ruta del dashboard, vemos que es realmente son y en su contenido. Y podemos estar seguros de que mi apertura la tienen herramientas y luego revisamos el admin main o el admin wrapper en sí para ver que todo está bien. Entonces hagamos más estilismo. En primer lugar, necesito tener el logo de manera más bonita. Por lo que voy a tener un logo, y este logo tendrá un relleno como 20 pixel, y luego tendrá un ancho alrededor del 100%. Por lo que puede caber exactamente en la barra lateral, dentro del contenido principal de la barra lateral. En el interior del logo, notamos que tenemos una imagen y dentro de esta imagen, le
daré max-width 100% para no salir de su contenido. Entonces todo está bien en la barra lateral y la imagen. Vamos a empatar ahora son enlaces, que enlaces también tienen su propia clase que se llama enlaces. Y luego necesito darle estilo a cada elemento de los enlaces. Entonces tendré los enlaces de clase a un lado, esta clase tengo URL, y la URL se inicializará con margen 0 y relleno 0, porque a veces viene con algunos valores, por lo que necesitamos inicializarlos. Y lo menos, tendremos un bloque de display para mostrarlo como un div. Y el menos estilo será non tutti, más de estos puntos cerca del elemento de lista, y también el ancho sería 100% de su contacto. Y como recuerdan, dentro de este ítem de lista, tenemos un enlace y este enlace vamos ahora a darle estilo. Entonces en primer lugar, damos una clase, y esta clase tiene un color, y este color puede ser un blanco. Y podemos dar estos enlaces bateando. Por lo que puede ser más espacios entre estos enlaces. Pero primero sobre el color, quiero mostrarte un truco. Como recuerdan, hablé de algunas, algunas variables definidas de colores las cuales se definen en su biblioteca de Prime NG. Y esas variables, no las puedes ver en las herramientas de desarrollo. Entonces como ves en esta lista, ya
hay CS definidos como variables para sus colores. Para que puedas recoger el color que te guste y en su mayoría son utilizables porque puedes usarlos en cualquier lugar de tu estilo, que viene con ese tema. Entonces para usar ese color, necesitas decir var y pones el nombre de la variable, y luego tendrá el color. Y si lo comprobamos, vemos que realmente está teniendo este color. De acuerdo, entonces ahora todo está listo. Necesitamos contar con un bloque de visualización para el a link que
puedan tener ancho efectivo y también remantes efectivos. Y como vemos aquí, que todo está funcionando bien. Pero primero necesitamos darle algún color flotante, como cuando ponga el ratón en un enlace, tendré un color. Entonces, en primer lugar, tengo, por ejemplo, un trasfondo. Recogemos algún color de nuestra lista aquí. Por lo que voy a enchufar el azul 500 o 600 y 700 en cualquier momento lo que sea. Por lo que se puede poner, por ejemplo, var y esto vía azul 700. Y entonces qué ángulo? Pero tenemos un navegador. Yo navego y IC que el titular está funcionando bien. Entonces vamos a darle más estilo a esos iconos para que podamos dar como más espacios. Entonces si recuerdas que tenemos yo elemento dentro del enlace, como ves aquí. Entonces tenemos el yo, necesitamos darle estilo. Y esto voy a tener, por ejemplo, un margen, margen, ¿verdad? Al igual que quiero alejarlo del texto. Yo le doy el octavo píxel. Y también si quieres, puedes dar como algún margen superior. Podemos darle como un 0 para inicializarlo si tiene algún margen antes. Y también podemos dar un flotador a la izquierda, por lo que se puede empujar a la izquierda mayormente. Entonces ahorramos y vemos que todo está funcionando bien. Ahora vamos a darle algún cuarto de estilo especial su botón Alt logo. Entonces diré aquí clase que tiene alguna clase específica la cual se llama logout. Y esta clase la definiré aquí dentro de la a. y el botón de cierre de sesión tendrá un color, que es, por ejemplo, podemos darle un color más claro, como un azul. Podemos decir 500. Y en este caso, veremos que tiene un color realmente diferente. Como ves aquí, hay algunos espacios en blanco como la barra lateral no encaja directamente en los bordes de la página. Esto porque el componente HTML o elemento HTML no es mundo inicializado. Para inicializar los elementos, aconsejaría usar una biblioteca llamada normalizar dot css. Y esta biblioteca inicializará tu página web o código HTML desde el principio, y luego podrás trabajar con ella de la manera correcta. Por lo que está haciendo algunas inicializaciones para la aplicación o el HTML antes de empezar a codificar. Entonces por eso lo voy a poner en la parte superior de mi archivo CSS. Entonces aquí lo llamaré, y sería de la misma forma como estamos llamando a cada biblioteca MPM. Porque si vas dentro de esta biblioteca, cuando presionas control y a esta biblioteca que verás que tenemos inicializaciones de todo, como barra lateral HTML progresa todo. Entonces aquí tenemos la inicialización y veremos que realmente está funcionando bien. Pero aún tenemos este espacio en la parte superior. Esto porque quiero inicializar también la barra lateral para estar en la parte superior. Como recuerdan, puse este dial en fijo. Entonces cuando lo pongo fijo, necesito hacer que la parte superior sea 0. Entonces volvemos a nuestro código y decimos top 0. Entonces por eso no quiero tener un desplazamiento en el contenido porque tendrá un fijo. Entonces cuando desplace el contenido, la barra lateral permanecerá fija a la derecha y no se desplazará. También quiero darle algo de color en lugar de negro a la barra lateral para ser más agradable y encajar con el diseño. Entonces como ven aquí, que todo está funcionando bien. Por lo que ahora necesito navegar entre estos iconos o estos enlaces. Por lo que cuando hago clic en ellos, me dirijo a la página. Entonces si recuerdas en Angular tenemos algo llamado enlace
router y puedes agregarlo al elemento HTML, como un enlace o un. Y entonces puedes navegar a un lugar específico. Por lo que voy a agregar cada enlace basado en la ruta que se define en el módulo como vimos en la conferencia anterior. Entonces tendré aquí, por ejemplo, un dashboard y productos y otras cosas como las categorías. Y como recuerdan, tenemos todo definido en el módulo. Por ahora sólo tenemos el tablero, pero voy a sumar por el resto. Por lo que me saltaré este video para hacerlo rápido. Ahora tenemos todo dentro que altera, pero solo ten cuidado. Yo lo moví de la a o del ojo a la a porque si tú, si lo pones dentro del ojo, entonces la navegación funcionará sólo cuando hagas clic en el icono. Probemos eso. Y veremos que estamos navegando, ¿no? Pero cuando hago clic en productos, obtengo error. Esto se debe a que la navegación del producto no existe en el módulo de la aplicación. Por lo que tenemos que sumar ahí afuera, como veremos más adelante.
93. Autenticación de fondo desactiva para el propósito de la API para el propósito de la persona de la persona de la persona de Fronten.: De acuerdo, de vuelta al backend. Como recuerdan, que hemos creado la autenticación para nuestras API. Y esas API están protegidas ahora. Por lo que no podemos hacer nada sin iniciar sesión para crear la aplicación del panel de control. Yo quiero desactivar esta autenticación porque la autenticación vendrá después de que preparemos todo como las golosinas, productos, alisos, y también los usuarios. Entonces cuando venga el sujeto de autenticación para el front end, entonces podemos habilitarlos de nuevo. Entonces para desactivar la autenticación, vamos al archivo JWT, JS en nuestro backend. Entonces voy a comentar todos estos a menos que, y luego en a menos que vaya a permitir todo. Entonces agregaré una línea aquí, llamaré URL, y luego aceptará una regex. Y esto rechaza será exactamente lo mismo que aquí, pero excepto este prefijo. Por lo que de esta manera, voy a permitir que todas las URL sean llamadas
al back-end sin ninguna autenticación ni autorización. Esto es temporalmente. Entonces solo comenta esta parte y agrega esta parte porque la
vamos a eliminar después de activar realmente el back-end. Pero por ahora, quiero usar esas API sin autenticación. Y en un video posterior, después de que terminamos en el backend totalmente y el front end, entonces te diré cómo activarlos y
probamos nuestras aplicaciones con autenticación.
94. Servicio de categorías obtener datos desde el fondo: De acuerdo, ahora llenemos nuestra mesa con los datos reales, los datos, que provienen del back-end. Para eso, necesitamos crear un servicio que se llama servicio de categoría. Y como vemos en esta gráfica, tenemos el servicio de categoría ubicado en la biblioteca de productos. Entonces de esta manera, necesitamos crearlo ahí y vincularlo al panel de administración hacia arriba. Entonces hagámoslo prácticamente y veremos cómo podemos agarrar eso a la mesa. Por lo que tenemos nuestra tabla lista y necesitamos, por ejemplo, llenar esta matriz
a partir de datos no codificados, sino del back-end. Entonces, empecemos a hacer eso. En primer lugar, como dijimos anteriormente, que contamos con el servicio ubicado en la biblioteca de productos. Por lo que no vamos a tener el servicio en el nivel de aplicación porque el servicio se comparte también con la otra aplicación. Por lo que necesitamos ponerlo en algún lugar donde se pueda compartir para todas las aplicaciones aquí. Entonces cuando vamos a la biblioteca de productos, que es carpeta de elipse, así que vamos a cerrar todo como aplicaciones. Tenemos elipse y dentro de los bucles, vamos a tener En productos, nuestra superficie. Por lo que podemos crear servicio usando una consola ECS. Por lo que podemos usar ir allá y generar y buscar servicio. Y aquí tenemos la primera opción. Y sólo tenemos que poner el nombre del servicio. Por lo que quiero tenerlo en una carpeta, servicios y luego categorías. Esto, aún tenemos el nombre y siempre observamos lo que está pasando aquí con una corrida seca porque te está mostrando dónde se está generando el archivo. Proyecto serán productos, que es biblioteca de productos. Y quiero saltarme esas pruebas. Entonces, ¿cuándo generas y haces clic en Ejecutar? Ve que se genere esta biblioteca. No se puede controlar y dar clic en este enlace. Verás esto que saltamos directamente a este servicio. Por lo que aquí tenemos servicio de contigüidad. Vamos a agarrar datos aquí, vale, como recuerdas en un cartero que tenemos
del servicio backend o localhost 3000 API Versión 1 categorías. Por lo que cuando envío una solicitud, obtengo los datos del backend. Por lo que quiero ver esos datos en el front end dentro de nuestra mesa, que vemos aquí. Entonces, en primer lugar, tengamos la solicitud HTTP porque podemos solicitar los datos a través del protocolo HTTP. Por lo que en primer lugar, necesitamos importar cliente HTTP, que ya se encuentra en biblioteca Angular. Entonces primero necesito llamar a Import. Y luego cliente HTTP desde estará en angular y luego comando slash, barra inclinada HTTP. Entonces desde esta biblioteca, puedo agarrar a todos los clientes HTTP, así puedo hacer llamadas HTTP. Entonces cómo podemos usar esta biblioteca o este servicio, porque esto también es servicio. Entonces aquí voy al constructor del servicio de categoría servicio. Y digo privada, defino una variable que es el tipo de ella es cliente HTTP. Y de esta manera, puedo crear un HTTP,
GET , eliminar, publicar solicitudes PUT. Entonces hagámoslo ahora nuestro primer gol. Por lo que tenemos un método que podemos llamarlo Obtener categorías. Y este método dentro me devolverá datos que provienen de este servicio HTTP. Por lo que voy a decir este punto http dot get, quiero obtener algunos datos. Y estos datos llegarán a través de la URL, que asigné aquí. Por lo que copiaré esta URL y luego volveré a mi código. Y voy a decir, dame estos datos de esta URL. Entonces después de eso, tendremos todos estos datos. Pero en TypeScript, quiero que tengas el mecanografiado. Por lo que quiero especificar tipos para cada tipo de datos que obtengo. Entonces para eso, necesitamos crear tipos. En primer lugar, lo que este regresando para mí, está regresando para mí al menos de categorías. Y esta categoría puede ser un modelo. Por lo que este modelo se puede crear aquí. Y digo que quiero matriz de categorías. Entonces vamos a crear un archivo aquí. Puedes usar también en consola ECS o puedes usar también lo normal como manual. Por lo que creo aquí una carpeta, llamo modelos, porque en un futuro, ubicaremos también el modelo de productos. Entonces primero necesitamos tener modelo de categoría, exactamente como lo hicimos en el back-end. Por lo que el modelo de contigüidad también será tipo Ts y decimos exportación. Estamos creando un tipo. Tienes opción, puedes crearla como interfaz o puedes crearla como clase. Entonces para mí lo voy a crear como clase. Y esta clase llamada categoría. Y esta categoría tendrá identificación. Exactamente los mismos datos que teníamos antes. Y este ID tiene una cadena de tipo. Y también tenemos un nombre el cual tiene un tipo también cadena. Estoy poniendo este signo de interrogación para hacerlos opcionales. Entonces cada vez que crea una categoría o por ejemplo, alguna categoría, entonces no me va a decir o te falta el ID. Entonces si me falta el yodo o tientas, solo
quiero tener mi front end estable. Entonces aquí no estamos creando objeto, estamos creando variables, nombre e icono, como vimos front-end. Entonces aquí tenemos ahora el modelo. Y quiero que este GetCategories regrese para mí array de categorías. Entonces diré aquí que puedo regresar, o este método lo hemos devuelto para mí array de categoría. Pero tenemos un problema aquí porque la solicitud GET o getMethod del servicio HTTP no está devolviendo los datos exactamente como queremos. Se los está devolviendo bajo algo llamado observable. Y este observable es algo así como te puedes imaginar conmigo que este servicio está esperando que el back-end conteste y luego Está observando los datos hasta que vienen y dicen:
Vale, ahora tengo los datos, puedes agarrarlos. Este tema es para nuestro x js, voy a ir más profundo cuando vamos a usar NG RX, comprenderás más lo observable por ahora. Y el front end está esperando los datos y la espera que viene por observables. Por lo que no va a volver para mí categoria array, volverá para mí observable. Y dentro de esta observable se encuentra categorias array. Entonces, en primer lugar, necesitamos tener aquí 0 servibles. Y cuando no sabes cómo importarlo, solo tienes que controlar y espacio en Windows o controlar el punto en Mac. Por lo que te dirá importar Observable automáticamente. Entonces lo ven aquí, y nosotros vemos que aquí es importante. Entonces, y luego quiero especificar un tipo. Entonces digo que el tipo de aquello que viene dentro de este observable es categoría. Y necesitamos también importar
esta categoría que creamos previamente a partir del modelo de categoría. Pero también de esa manera, tenemos que decir, para conseguir que devolverá array de categoría. No puede ser así. Entonces tenemos que decir que GET, ten cuidado de que vamos a devolver un dato que son array de categoría. Por lo que podemos decir también al getMethod. Entonces no tendremos este error porque aquí es mejor especificar el tipo de datos que viene del intestino. Por lo que esta solicitud GET sabrá que devolverá matriz de categorías. Y tengo el enlace al final y todo está bien ahora. Por lo que ahorramos. Y luego vamos a utilizar este servicio en nuestra agregación. Por lo que veremos cómo importaremos este servicio de categoría y lo
usaremos dentro de la aplicación de categorías o admin. Y aquí veremos cómo lo utilizaríamos en esta
lista de categorías para reemplazar este dato codificado duro por un dato back-end.
95. Utilizar el servicio de categorías en la componente de categorías: De acuerdo, entonces por ahora vamos a utilizar el método
categories o getCategories en categoria servicio dentro de la lista de categorías. Entonces como les dije antes que hemos importado un cliente HTTP de Servicio de la misma manera que vamos a hacer en componentes de lista de categorías. Por lo que quiero importar el servicio en el constructor. Entonces defino una variable. Podemos definir una instancia de ese servicio. Entonces digo el servicio de categoría privada. Y dentro de estas categorías o el tipo de esta categoría el servicio estará categorías servicio. Pero desde donde agarraré este servicio de categoría de la biblioteca de productos. Entonces si voy aquí e ISA, como vimos anteriormente, importar el bien o servicio desde. Y entonces diré en Blue Bits y el nombre de la empresa y los productos, notaré que no tiene ningún tipo. Todavía tengo el módulo de error. Producto no ha exportado miembro, por lo que necesitamos exportarlo de alguna manera. Entonces volviendo a la biblioteca, nuevo, veremos que tenemos aquí index.js. Por lo que necesito exportar desde servicios que se encuentran dentro de la biblioteca. Por lo que iré aquí servicio y luego diré categoría servicio. Y también necesitamos exportar el modelo que creamos. Entonces porque ahí lo vamos a usar. Entonces digo también en vivo y luego modelos y luego categoría. Por lo que ahora todo se exporta. Veremos que ya no tenemos este error. Por lo que aquí voy a ver que el servicio de categoría, lo
puedo usar ahora. Entonces ya no necesito este dato codificado porque vamos a llenar esta matriz desde el back-end. Pero podemos decir que estas categorías tienen una categoría de tipo que proviene de estos productos biblioteca también. Lo importamos. Entonces, y aquí será matriz, y luego será matriz vacía al principio. Y después de que este componente se inicializara, vamos a sentir esta matriz. Entonces, ¿cómo podemos hacer eso? Digo que este punto obteniendo un buen servicio, use el método GetCategories. Y entonces si recuerdas que tenemos un observable y te dije que el front end está a la espera de cualquier acción viene de este observable, por lo que de cualquier movimiento de cualquier cambio de datos. Entonces primero, necesito decir que quiero suscribirme y observar estos datos. Entonces cuando sean algún cambio, entonces cogerlo y usemos los datos. Por lo que quiero usar o suscribirme a este observable el cual se devuelve de GetCategories. Porque recuerdas que está regresando para mí observable qué tipo de categoría. Entonces aquí tenemos en la suscripción y luego especificamos en la devolución de llamada y en su devolución de llamada obtendremos la respuesta de los datos. Entonces para mí, los llamaré gatos, por ejemplo, categorías. Y luego callback será un método. Y en este método digo estas categorías de puntos, la variable que definí aquí serán los gatos. Y luego guardo. Aquí vemos que en el compilador no tenemos ningún problema. Pero aquí creo que tenemos tema. Abramos la consola y comprobémosla. Vemos que tenemos un error detectado dependencia circular y la flecha de inyector nulo. Esto viene porque el módulo de aplicación no importó el módulo HTTP. Entonces cada vez que quiero usar una biblioteca, como vimos anteriormente, que necesitamos importar ese módulo. Utilizamos en categoría servicio, el cliente HTTP. Por lo que también necesitamos adjuntar el módulo. Tienes opción de usar ese módulo dentro del módulo de producto, o lo usas en el propio módulo de aplicación. Prefiero usarlo en el módulo de aplicación porque vamos a importar biblioteca múltiple. Entonces si importamos en cada biblioteca, entonces se duplicará. Tendremos como módulo HDTP importado muchas veces. Entonces para hacer eso, vamos al módulo de la aplicación. Entonces aquí decimos en las importaciones de módulos, decimos que me dan módulo cliente HTTP. Y esto se importará automáticamente porque estás usando el plugin y lo tenemos aquí. también me gusta organizar un poco el código. Entonces tengo las importaciones,
las importaciones básicas aquí, y luego los componentes, y luego los componentes UX o módulos lyse, todo está funcionando bien. Voy de nuevo categorías protegidas y voy a ver los cabezales mydata juegos con éxito. En ocasiones, tal vez obtendrás error que no hay proveedor. Servicio de cuatro categorías. Por lo que es mejor también en el módulo de aplicación, digamos que quiero brindar este servicio para ser utilizado en esta aplicación. Entonces porque estamos usando este servicio dentro del componente que se encuentra dentro de la aplicación. Por lo que tengo que importarlo también. Por lo que podemos importar este servicio. Podemos decir directamente que los proveedores me brindan servicio de categorías. Y este servicio de categoría se brindaría aquí. Y ahorramos y aseguramos que todo va a estar funcionando bien. Entonces como ven aquí, tenemos los datos que vienen del backend, exactamente cómo lo tenemos en el Cartero. A modo de recapitulación rápida, como recuerdan, importamos el servicio, importamos el modelo, y luego utilizamos estas categorías. Quitamos los codificados rígidos, y luego los usamos en esta tabla. Y esta tabla está representando los datos en función de lo que provienen del backend. Y como ven aquí, tenemos en los datos o en las solicitudes de red HTTP, tenemos nuestra solicitud, que viene con las categorías que aquí se encuentran. Vemos exactamente los mismos datos que provienen del backend.
96. Añade las categorías de usar las formas de PrimeNG: De acuerdo, ahora tenemos nuestra mesa lista o datos provenientes del back-end. Añadamos categorías. Como recuerdan, hemos deshabilitado previamente la autenticación para el back-end. Por lo que ahora podemos agregar categorías sin haber sido autenticadas. activaremos nuevamente cuando tengamos el login y los usuarios. Por ahora, voy a añadir una nueva categoría, cómo vamos a hacer eso. Por lo que normalmente el comportamiento del usuario irá a un nuevo y luego voy a añadir otro componente. Y voy a ver otro componente aquí para agregar el nombre de la categoría y el icono. Y luego presiono Guardar. Muestro notificación al usuario que la categoría gut agregó con éxito. Y tenemos que volver de nuevo a la mesa y ver nuestra categoría añadida a la base de datos y hacer esta tabla. Entonces dije que vamos a una nueva página cuando hago click en Nuevo, así que necesito un nuevo componente. Entonces generemos este componente. Necesito generar un nuevo componente que
estará en la aplicación admin bajo categorías. Entonces primero vamos al componente generar NX, y luego este componente estará bajo Getty y el nombre
del componente será la forma de categoría. Y entonces el proyecto será admin. Y de nuevo, hacemos las otras cosas que hicimos anteriormente, peinando y saltando pruebas. Y entonces estamos seguros de que todo está bien por
lo que se suma a este camino. Está bien, perfecto. Hacemos clic en Ejecutar y luego vemos que se creó el formulario de categorías. Entonces aquí el componente está listo, solo
necesitamos agregar también la navegación a 84 categorías menos recuerdas creamos el link del router y este link del router, le
daré, por ejemplo, forma. Y luego en el módulo, necesitamos agregar un nuevo camino. Y este camino tendrá la misma estructura y le damos antiquidades forma de barra. Y aquí vamos a llamar a las categorías formulario componente que guardamos. Volvamos aquí. Hacemos click en ti. Vemos que estamos navegando al módulo de formulario o componente de formulario. Entonces ahora vamos a tener la estructura aquí. Aquí vamos a tener la forma. Por lo que me gustaría tener lo mismo que su estructura como tenemos esta tarjeta y también subtítulo de título, y entonces el contenido con controles viene aquí. Entonces vamos a copiar lo mismo que hicimos en la lista de categorías. Entonces copiamos todo y lo pegamos aquí. Quitamos esa mesa que ya teníamos, así que ya no la necesitamos en este componente y entonces estamos listos para eso. Entonces aquí ya no necesitamos y nuevo, necesitamos también hacerlo como AD. Entonces, por ejemplo, crear. Entonces ahorramos, vamos a Nuevo, vemos que tenemos un crear. Entonces cambiemos el texto aquí. Por ejemplo, podemos decir Agregar Categoría. Y aquí también, podemos decir aquí. Por lo que ahora tenemos el título y se han creado los subtítulos. Y también necesitamos, por ejemplo, usuario está acostumbrado a tener los controles aquí. Por ejemplo, crear y un consejo. Entonces vamos a crear otro botón cerca de él. Y también podemos cambiar esto para ver la lechería Khan y también estos dos primarios. Y aquí tenemos crear y esto lo llamamos no crear, sino cancelar. Y después de eso tenemos todo creado. Pero como vemos aquí que tenemos como el arte pegándose unos a otros, estos botones, esto porque necesitamos aportar algún margen, ¿verdad? Pero entonces creo que en Prime NG, no
necesitas tener que crear una cláusula de clase Michelle e ir al estilo y luego agregar
este margen y no es Prime NG
proporcionándote dentro de la grilla algo así como clases listas, que se denominan espaciamientos. Y esos espaciados, como se ve aquí en este ejemplo, se
puede espaciar entre el componente entre hojas, entre columnas. Por lo que puedes usarlo de la forma que quieras. Entonces, ¿cómo podemos usar eso? Dijo aquí que necesitamos tener un B primero b menos y la propiedad como margen, por ejemplo, o relleno. Y luego se puede decir posición arriba, derecha, izquierda por ejemplo. Y luego el valor, y el valor puede ser de 0 a seis, y depende del espacio. Por lo que podemos usar, por ejemplo, para este botón. Podemos decir que para mí, este botón, B menos margen, derecha serán cuatro, por ejemplo. Entonces si voy y voy a ver que espacios aquí. Entonces hagámoslo más pequeño. Podemos hacerlo dos, y tenemos esta base aquí. Entonces necesito poner esos botones a la derecha, para que no podamos hacer eso como vimos anteriormente. Sólo tenemos que cambiar esto a la derecha. Pero no vemos ningún cambio porque esto, necesitas también para componente de barra de herramientas, necesitas especificar también la izquierda. Entonces hasta está vacío, así que solo hazlo así y lo tendrás a la derecha. Entonces cambiemos también el ícono para que ya no lo necesitemos. Necesitamos icono como volver atrás o salir. Por lo que ya tengo el ícono listo. Entonces se llama flecha. Ve. Izquierda. Aquí guardamos y tenemos, el ícono ya está aquí. De acuerdo, ahora volvamos a nuestro formulario. Entonces lo que necesito hacer es solo hacer algo de limpieza. Necesitamos eliminar este enlace de router porque no estamos dando click en Crear. Por lo que aquí cuando hacemos click en Crear, necesitamos esto para guardar como formulario en la base de datos. Entonces primero necesitamos crear la forma. Echemos un vistazo. Dos prime end. Vaya, cómo está usando el formulario para mí, necesito cuadro de texto 14 al nombre de la categoría y uno para el icono de la categoría. Entonces, en primer lugar, vamos a Prime NG y comprobamos cómo estamos usando la entrada. Por ejemplo, aquí se ven muchos tipos de entrada que son de entrada, la máscara de entrada del grupo, interruptor
de entrada, y también texto de entrada. Y como ven aquí, tenemos este texto de entrada. Pero si quiero usar este, necesito seguir la documentación. Por lo que necesito importar también módulo de texto y luego puedo usarlo. Entonces hagámoslo. Importo el módulo de texto a mis módulos. Si recuerdas, aquí tenemos módulo U xs. Por lo que lo importo aquí. Otra vez, ponlo aquí. Por lo que tenemos el módulo de texto de entrada listo, para que pueda usar su componente. Entonces empecemos básico. Yo quiero usar este. Yo tengo aquí. Y voy al formulario, o por ejemplo, aquí creo un formulario. Y esta forma, por ejemplo, estará vacía. Y dentro de esta forma, voy a usar otra vez una grilla. Por lo que volveré a dar una grilla div dot py porque quiero ponerlos cerca uno del otro. Entonces tengo aquí div llamado, por ejemplo, para y también para no faltar aquí el p. Y también otro para otro texto. Entonces aquí, 12, lo guardamos, volvemos a la aplicación, vemos que están cerca uno del otro. Entonces agreguemos algún margen aquí en el espacio entre la barra de herramientas y la forma misma. Entonces como recuerdan, tenemos aquí la propiedad em, margen o por ejemplo, ser margen inferior. Necesito precisar, por ejemplo, cinco. Entonces veremos aquí que nos da algo de espacio, pero aquí necesitamos unas etiquetas. Entonces vamos a agregar también algunas etiquetas, o ejemplo C en el NG prime. Por lo que tenemos aquí múltiples etiquetas. Pero todo el mundo está sufriendo cómo alinear esos texto de entrada y por ejemplo, una casilla de verificación o cómo alineamos esos ícono con los libros de texto o cerca del botón, siempre
es un sufrir con una forma. Pero prime N G resolver este problema creando pactado, sobre todo para la forma. Es muy genial. Entonces si vas al sistema de cuadrícula O prime flex, hay algo llamado diseño de forma. Y en el diseño del formulario, puedes seleccionar la disposición que quieres insensatez reforma. Entonces como ven aquí, esto lo que necesitamos exactamente vertical y una cuadrícula. Entonces podemos ir aquí y ver esto, el código de esta forma. Entonces vamos aquí otra vez abajo a vertical y desengrasado. Vemos que está usando alguna clase llamada Floyd. Y también está usando la cuadrícula de forma y la cuadrícula. Entonces vamos a copiar esta parte y pegarla en nuestra aplicación. Por lo que dentro del formulario, tengo una cuadrícula, elimino aquí todo y pegado voy a la aplicación. Otra vez. Voy a ver eso muy bonito y guiado para. Entonces vamos a renombrar las cosas para que podamos hacer esto como un nombre. Y también aquí nombre, la etiqueta se nombra como nombre de categoría y todo está bien. Y luego icono. Y necesito aquí también icono. Y aquí hago clic en Guardar. Tenemos ahora todo está funcionando a la perfección. En la siguiente conferencia, vamos a ver, al dar click en Crear, vamos a leer los datos del formulario y crear la categoría en la base de datos.
97. Añadir datos de forma Bind forma de forma de los formas de forma: De acuerdo, En esta conferencia les voy a mostrar cómo vincular datos del nombre, un icono de la categoría cuando estamos dando click en Crear. Entonces, en primer lugar, no vamos a agregar nada a la base de datos. Sólo necesitamos vincular los datos. Entonces necesito, por ejemplo, cuando haga clic en Crear, verán aquí en la consola los datos que pongo aquí. Entonces para eso necesitamos usar forma reactiva y también necesitamos usar para módulo. Entonces para hacer eso, Empecemos paso a paso. En primer lugar, iré al formulario Categorías. Yo lo tengo todo aquí. Por lo que necesito crear una forma, forma interactiva, que pueda interactuar con Angular. Puedo leer los datos cuando entrego el formulario o cuando hago clic en cualquier botón. Por el momento que en Angular tenemos algo llamado formar un grupo. Por lo que cada forma tiene una forma un grupo. Y este grupo de formularios contiene todos los controles como este nombre e icono. Entonces para eso, necesitamos definir que nuestra forma es un grupo de formulario. Por lo que no podemos tener especificando esta entrada o propiedad. Y decimos que vamos a utilizar esta valiosa forma en mi edificio, esta forma. Entonces vemos que tenemos error no se puede vincular grupo de
formulario ya que no se conoce propiedad de forma. ¿ Por qué? Porque necesitamos importar para módulo. Por lo que necesitamos importar dos cosas. En primer lugar, el módulo foro, que proviene de Angular. Y también hay algo llamado módulo de formas reactivas. Por lo que aquí tenemos dos componentes o dos módulos que necesitamos importar a nuestro módulo de aplicación. Entonces veremos que esta directiva funcionará en su mayoría. Por lo que guardamos módulo de aplicación y necesitamos saber cómo construir este formulario. Entonces en ese archivo TypeScript o el archivo de código de este componente, voy aquí y necesito definir forma valiosa. Entonces como saben, en Angular, todo lo definido aquí, después de definir una propiedad o directiva o la entrada, necesito tener una variable. Esta variable está disponible o debe estar disponible en el archivo TypeScript. Entonces podemos hacer eso y decir que la forma para mí es un tipo de grupo de formulario. Y este grupo de formularios, como ves, es importante automáticamente a partir de formas angulares para construir una forma reactiva en Angular, necesitamos usar un servicio, este servicio llamado constructor de formularios. Y para llamar a este servicio o a cualquier servicio, utilizamos constructor de formularios privados. Damos un nombre y yo importo éste, constructor de
formularios y también viene de biblioteca angular a partir de formularios formularios. Entonces como ven aquí, tenemos ahora el constructor de formularios. Y sobre la inicialización de este componente, necesito definir cuáles son los miembros del grupo de este componente, toda esta forma. Entonces necesito construir la forma de alguna manera. Entonces digo que esta forma de puntos es igual a ésta. El constructor de formularios de servicio. Dame un ex grupo o un grupo. Y este grupo contendrá de múltiples miembros, que son controles. Y los controles que vimos en el archivo HTML. Ellos son el nombre y el icono, y aquí se controlan. Entonces tenemos que definirlos también aquí. Te diré por qué después porque necesitamos usar el validador para eso. Por lo que angular interactuará con esta forma para detectar cada error que el usuario pueda portar. Entonces voy aquí y digo ese nombre. Por lo que necesito especificar exactamente como las entradas que tengo para esta fuente. Entonces tengo aquí nombre, como nombre de esa categoría, y será array. Y esta matriz, por ejemplo, ahora el valor predeterminado de la misma está vacío y luego defino el icono y también. Está vacío en la inicialización de esta fuente. Y además, necesitamos alguna propiedad que se llama color. Te mostraré más adelante cómo usar el recolector de color hasta para recoger un color e implementado e insertado en la base de datos. Porque como recuerdas, nuestra categoría también tiene un color. Pero ahora solo estoy empezando lo más simple posible. Por lo que dejamos solo nombre e ícono. Por lo que ahora esta forma, esperando que tenga nombre e icono en su interior. Y esto puede estar en la plantilla HTML. Pero cómo podemos decir, vale, tú, este control, estás relacionado con este grupo de formularios. Podemos especificar eso por una propiedad que se llama nombre de Control de formularios. Y este nombre de control de formulario tendrá el mismo nombre que especifiqué en el grupo de formularios. Por lo que aquí debo tener también el nombre. Entonces aquí digo que, que esta entrada y este campo es exactamente seguir el nombre de la categoría. Lo mismo que hago también por el ícono. Por lo que especifico aquí otra vez icono. Entonces de esta manera, conecté el formulario. Con forma reactiva, que está aquí. De acuerdo, ¿por qué estamos haciendo todo esto? Ahora veamos cómo vincular los datos y leer de las entradas. Ahora que todos nuestros botones crean, que es viene ahora. Por lo que necesitamos vincular alguna función a este botón. Cuando hago clic en él. Cómo hacemos eso es muy sencillo. Voy a la plantilla HTML, voy al botón, y luego digo que una camarilla. Y luego digo en Enviar por ejemplo, este cualquier método que puedas definir, cualquier método que quieras para este botón y no podemos probar este método. Entonces voy aquí y hago el archivo TypeScript que definí fuera de energía en él. Defino un método que se llama onsubmit. Vamos a la consola log algo como por ejemplo, algo así como yo soy el botón. Entonces aquí tenemos el botón que se hace clic y se va a consola iniciar sesión para mí en la consola soy botón. Cuando hago clic en él, necesitamos sólido para guardar también la plantilla. Entonces cuando hago clic en él, tengo, soy el botón. De acuerdo, vamos a vincular los datos ahora. Entonces necesitamos tener una forma de que leamos los datos que ingreso aquí. Y luego los puse en la consola. ¿ Cómo podemos hacer eso? En primer lugar, tenemos que ir a la TA está archivada y onsubmit método, steve de ion en la parte inferior digo esta forma de punto, que construimos ya, controles de punto. Y luego especifico el campo, por ejemplo, nombre. Y entonces digo valor. Por lo que necesito tener el valor de este campo. Lo mismo que hago también por el ícono. Entonces voy aquí, guardo, y luego creo, y veo que tengo vacío porque no especificé nada. Aquí especifico. Y voy a ver que me dieron los datos. Por lo que voy a decir categoría es salud. Y también el icono es, por ejemplo, la salud del icono. Por lo que cuando guarde o haga clic, veré que obtuve los datos. Por lo que ahora necesitamos leer estos datos y ponerlos en la base de datos. Pero primero, hagamos algo de validación. Por ejemplo, como usted vio aquí, que cuando pongo valor vacío, veo que no obtuve ningún error y se envían los datos. Por lo que necesito mostrarle al usuario que no puede enviar, por ejemplo, nombre Mt e icono vacío. Entonces hagámoslo. Es muy sencillo que cuando estamos creando el grupo de formularios o el constructor de formularios, necesitamos especificar que este campo es requerido. Y cómo hacemos eso. Hacemos de una manera que llamamos a una biblioteca llamada validadores. Y este validadores tiene una propiedad la cual se llama requerida. Y además tiene otra propiedad como max o max length o e-mail, etc Por ahora lo que necesito es solo un requerido. Por lo que se requerirá este campo. Por lo que no puedo presentar el formulario sólo cuando esté lleno. Entonces cuando sólo cuando el usuario ponga datos dentro de este cuadro de texto, Ok, ahora si
hago clic, veo que todavía puedo enviar. Por ejemplo, hagámoslo de una manera que si el formulario no es válido, entonces no registremos nada en consola. Pero cuando sea válido, entonces consola registra para mí el nombre y el icono. Entonces cómo podemos hacer eso, Es muy sencillo. Digo si este formulario de punto es válido o inválido, entonces no hagas nada al hacer clic en el botón. Por lo que sólo regresa. De lo contrario, la consola registra y realiza el nombre y el icono. Porque si sabes que cuando haga clic en regresar o cuando he escrito aquí, todo después no se ejecutará. Por lo que aquí guardo. Y luego veo que no consigo ninguna línea vacía. Pero cuando pongo datos, vemos que conseguimos los datos. Por lo que a partir de aquí, garantizamos que el formulario es realmente válido o no. Pero, ¿qué pasa con mostrar un mensaje al usuario? Al igual que aquí, por ejemplo, decimos que se requiere su nombre cuando está enviando datos vacíos. Por lo que no podemos hacer eso muy fácil. Simplemente vamos a la plantilla y después de la entrada, no
podemos tener otro elemento que se llama pequeño. Y este pequeño tiene vidrio, que se llama ser inválido. Y esta clase viene con Prime NG. Y dentro de esto, podemos definir cuál será el método para el usuario. Por ejemplo, se requiere nombre. Yo guardo. Y veremos que esto siempre se muestra. Y que es un problema para mí. Necesito justo cuando no haya nada en este campo, quiero mostrar este mensaje. Pero primero vemos que no está ahí en el, porque creo que la clase está equivocada. Podemos cambiarlo a error. Y veremos que está hablando. Sí. Por lo que ahora lo tenemos una lectura. Basado en la clase de error, P, Clase Error. Por lo que aquí tenemos que especificar cuándo se mostrará. Entonces como saben en Angular, hay energía si es así en ng-si digo cuando el formulario dot controla el nombre del punto no es válido, entonces mostrar este mensaje. Forma dot controla nombre de punto, punto inválido. A continuación, muestra este mensaje. Entonces ahora la tenemos inválida, pero cuando pongo texto, veo que ha desaparecido. Entonces ahora como ven aquí, mostrando y escondiendo cosas. Pero el tema aquí que cuando voy a Categoría voy sabía que veo directamente que se requiere el nombre. No quiero sorprender directamente al usuario con errores. Yo solo quiero mostrarle el error cuando haga clic en Crear y tiene campo vacío. Entonces cómo podemos ocultarlo primero. Entonces necesitamos comprobar si el usuario hizo clic en el botón o saber cómo podemos hacer eso es muy sencillo que vaya a aquí al archivo ts y digo que se envía es una variable donde puedo definir siempre colocar sus variables, siempre en la parte superior antes del constructor, luego el constructor, y luego la inicialización. Y les hablaré también de los métodos privados. Por lo que aquí se envía tipo Boolean, y tiene un valor predeterminado que es falso. Por lo que al inicio, aún no se presenta el foro. Aquí tengo un error tipográfico o he presentado. Y entonces ahora podemos ir al botón en enviar e IC primero, este punto se envía es cierto. Por lo que aquí tenemos el presentado es cierto. Entonces puedo decir ahora que cuando este error es ng-if inválido y se envía el formulario, entonces muéstrame el error, pero no envíes nada, entonces no lo muestres. Entonces aquí al principio, no
tenemos nada. No tenemos ninguna flecha. Pero cuando tengo esto, vale, no tengo ningún error. Yo puedo presentar. Pero cuando lo vacio, lo veo de nuevo. Volvamos otra vez. Dos categorías lo volverán a escuchar de consola. Entonces aquí decimos que cuando me someto, me sale este error. Se requiere nombre. Entonces debo sentir algunos datos aquí. Entonces de esta manera, muestro que esto es ajeno requerido. Hagamos un poco de refactorización rápida. Entonces en primer lugar, no quiero tener en mi plantilla HTML nombre muy largo. Entonces puedo hacer eso y puedo hacer este tipo aquí en una variable. Por lo que es muy fácil. Puedes usar set y get. Entonces cómo podemos hacer eso, podemos definir, por ejemplo, obtener formulario de categoría será un método y me va a devolver este punto forma controles. Entonces cuando quiero acceder a los contornos de este formulario, solo
digo este nombre de punto o esta forma de categoría, icono, etc. Así que de esta manera puedo acceder y reemplazar también esta. Por lo que puedo decir aquí, no controles de forma sino Categoría 4. Entonces lo guardo, pruebo todo. Tenemos todo funcionando bien. Por lo que ahora necesitamos también ponerlo para el ícono voy aquí. También tenemos que copiar lo mismo. Yo digo que se requiere ese icono. Y aquí en vez de nombre, digo el ícono. Por lo que ahora tenemos el icono y se requieren los campos de nombre y somos capaces de vincular los datos y verlos en el registro de la consola. En la próxima conferencia, les voy a mostrar cómo enviar estos datos a
la base de datos para que no los podamos ver también en nuestra tabla de categorías. Lo que agregamos aquí.
98. Añade formulario de forma de forma de enviar datos al fondo: Ahora vamos a enviar los datos al back-end. Por lo que tengo aquí un nombre y un icono, y voy a crear categoría en el back-end. Entonces, ¿cómo podemos hacer eso? En primer lugar, tenemos todo recogido. Entonces tenemos aquí los datos, recogimos, el objeto, recogimos el nombre y el icono. Por lo que ahora necesitamos tener un servicio también. Si recuerdas, teníamos un servicio para conseguir las categorías. Ahora necesitamos el servicio para sumar las categorías. Entonces lo que necesitamos es importar servicio de categoría y agregar las categorías add category method. Entonces primero vamos a importarlo servicio de categoría privada. Y entonces digo categorías servicio. Por lo que será importante automáticamente, como vemos aquí por los productos. Y tenemos que ir allá y también definir nuestro método. Entonces aquí, de alguna manera diré que si no es válido, entonces regresa, de lo contrario, usa el servicio y encuentra agregar categorías. Pero ahora no lo definimos todavía. Vámonos y hagámoslo. Para entrar rápido, dentro de estos archivos es que es tan fácil manera solo tienes que presionar Control y p. Y entonces se abrirá para ti todos los archivos. Puedes servirlos por nombre y luego puedes decir categorías, servicio, y luego saltarás al archivo directamente. Entonces esto es como Te dará más productividad. No busque el archivo en la lista de los archivos. Por lo que quiero que tengas crear la gloria y ellos creen categoría. También necesitamos enviar los datos. Por lo que necesitamos enviar los datos de la categoría. Por lo que tengo que decir que la categoría tiene una categoría tipo. Por lo que quiero enviar categoría en sí al backend por este método. Y este método devolverá esto aunque la publicación de punto de solicitud HTTP, porque estamos publicando datos. Y estos datos tendrán primero la URL. Como ya sabéis anteriormente, aquí
tenemos esa URL. Por lo que tenemos la misma URL para publicar la otra como vimos en el back-end. Y también necesitamos especificar los datos. Entonces los datos, los tengo de aquí, digo, poner Sígueme esa categoría, eso es todo. Por lo que ahora tenemos crear categoría. Vuelvo al formulario y luego veré que en el producto o categoría servicios hemos creado categoría lo que necesito para pasar nuestros datos. Por lo que necesitamos primero crear una constante, llámala categoría. Esta categoría tiene una categoría de tipo, y esta categoría tendrá el nombre de la propiedad de donde
proviene, del formulario de categoría, nombre de
punto, valor de punto, como vimos anteriormente. Y consola de registro de ellos e icono. Por lo que esta categoría forma el icono, ese valor. Entonces de esta manera, creé un objeto. Aquí. No es punto y coma, pero es coma porque estoy creando un objeto y luego voy a enviar esta categoría a este servicio. Entonces intentemos eso. Ahora. Voy a Crear. Añado, por ejemplo, salud y contemplado para el icono, hago clic en Crear. Y veo que no pasa nada porque también si voy a la red, veo que el front end no está enviando ninguna solicitud. Por eso porque les dije que necesitamos suscribirnos a todo lo observable del servidor de datos me está enviando de vuelta. Como recuerdan al escucharlo, que este bien está regresando para mí observable. Lo mismo, jefe también está regresando observable. Y como vimos anteriormente en el back-end, que el back-end me está enviando, por ejemplo, cuando creo una categoría, está enviando para mí que la categoría se añada con éxito. Entonces para eso, solo necesitamos suscribirnos a estos datos para que no pueda usar el servicio como está aquí. Por lo que sólo necesito decir suscríbase. Entonces cuando nos suscribimos y de esta manera significa que realmente me dan un ejecuto de datos. Entonces aquí tengo salud y luego salud P. Y yo estoy observando aquí la red. Al hacer clic en Crear, veo que se crea y agrega la categoría. Y cuando vaya a su lista de categorías, veré que aquí se agrega. Entonces solo recuerda que siempre necesitas suscribirte, porque si no te suscribes, Es como si llamaras al método, pero no hiciste nada. Por lo que esta solicitud HTTP presume no se ejecutará sólo cuando se suscriba a ella. De acuerdo, me di cuenta cuando agregué esto, no le
mostré al usuario, bien, Esto se agrega con éxito, o recibió error o algo así. Tenemos que interactuar con el usuario de alguna manera. Necesito agregar, por ejemplo, una notificación dice que,
vale, La categoría se agrega con éxito y volver de forma automática. Dos categorías, tabla en prime end tú, hay un módulo llamado tostadas. Y este brindis, siempre se puede mostrar la notificación al usuario, algo así. Por lo que siempre puedes mostrar alguna notificación
al usuario y desaparecen automáticamente después de algún tiempo. Por lo que necesitamos implementar eso. Por lo que primero necesitamos importar el módulo. Como siempre lo estamos haciendo. Entonces aquí necesitamos el módulo. Voy a la UX de los módulos. Uno de ellos aquí, como dijimos anteriormente, Pongamos primero los módulos centrales en la parte superior. Por lo que para no tener ningún tema. Y entonces tenemos también los módulos UX se agrupan juntos. Por lo que aquí tenemos un módulo de tostadas. Está bien, bien. Todo es importado. No hay ningún problema si obtienes este error de alguna manera que necesitas reiniciar el front end. Entonces cuando recibas ese error, solo
necesitas reiniciar el frente y otra vez, y desaparecerá. Y para usar esta notificación, solo
tienes que llamar a P. brindis. Entonces cuando vamos aquí y copiamos esta etiqueta HTML y vamos al formulario agregado a la parte superior antes del formulario, digo Pete perdió. Entonces lo guardo aquí, y luego necesitamos disparar este brindis. Entonces como dijimos, cuando haga clic en Crear y todo exitoso, entonces dispararé esta notificación de tostadas. Entonces, ¿cómo hacemos eso? Si continuamos en la documentación, necesitamos llamar a un servicio que se llama Servicio de Mensajes. Y estos servidores de mensajes tendrán ADD. Y luego especificarías su color, que es el éxito, y el mensaje de servicio de resumen y el detalle del mensaje. Entonces vamos a importar el servicio. Voy servicio de mensajes privados. También voy aquí al formulario. Y también tenemos aquí muchos métodos privados. Por lo que aquí tenemos también el servicio de mensajes. Por lo que solo necesitas importarlo desde API de prime end. Después de eso, todo está funcionando bien. Por lo que necesito saber después de que se
añada su categoría en impuestos para quiero mostrar un mensaje de éxito. Y cuando hay algún error ocurrió, entonces fui un mensaje fallido. Entonces como recuerdan, dijimos que crear categoría será observable y me devolverá algunos datos. Entonces como ven aquí, que este servicio presumir está regresando observable con los datos. Entonces lo que este dato, sería la categoría en sí, cómo hemos creado en el back-end. Por lo que la nueva categoría. Por lo que aquí voy a tener un post observable. Entonces aquí tendré un tipo de retorno es observable pero no observable array, será una categoría única categoría, no array. Entonces volviendo al componente en sí del formulario, veo que si recibo una respuesta,
entonces muestro un mensaje de éxito. Y si no veo ninguna respuesta o recibo error de la parte de atrás y luego muestro un mensaje de error. Entonces cómo podemos hacer eso, la respuesta, lo pillo. Y entonces diré aquí que muestran esta severidad del servicio de mensajes. Y entonces diré éxito y el resumen del mensaje y el detalle del mismo. Entonces aquí diré que tengo primero el mensaje de éxito y el tipo es Ejemplo, éxito o el resumen es éxito. Y eso puedo decir categoría o como mensaje para la gente o para el usuario, se crea categoría. Y también tenemos, cuando obtenemos error, entonces tenemos que mostrar un mensaje de error. Entonces cómo podemos hacer eso después de este corchete, tenemos una coma y decimos ese error, y este error será una función. Me devolverá el mensaje de error que veo en mis datos. Entonces haré lo mismo aquí. Conseguiré éste. Diré this.me dot add cyber t es error. Y entonces mostraré, por ejemplo, nuestra categoría no se crea. Pero primero tenemos que añadir algo que es muy importante. Esa es la plantilla, la plantilla del propio anfitrión. Por lo que tenemos aquí la plantilla HTML. Vamos a mirar normalmente agregarlos a la parte superior de la plantilla. Por lo que ahorramos, volvemos a nuestra aplicación y vamos a Nuevo. Seguimos recibiendo error. Este es un error de inyector porque estamos usando servicio de
mensajes y no se proporciona en mi módulo de aplicación. Entonces primero volvemos al módulo de la app. Y en los proveedores, como hablamos anteriormente, necesitamos agregar aquí el servicio de mensajes. Y entonces tenemos que importarlo. Y ahorramos, y vemos que tenemos, todo está funcionando bien. Entonces ahora agreguemos alguna categoría y vemos si obtenemos el mensaje tostado o no, que se llama, por ejemplo, computadoras. Y entonces el icono será, por ejemplo, podemos seleccionar cualquier icono, PCI, PCI, por ejemplo. No sé si existe, pero no podemos ver eso más tarde. Entonces como vemos aquí que nos dieron otro error. Esto porque no incluimos el módulo de animación del navegador. Si recuerdas, en tienda NGI agregamos este módulo, pero aquí no lo agregamos. Entonces vamos a añadirlo de nuevo a nuestro módulo. Entonces si recuerdas, tenemos aquí un módulo de navegador. Por lo que necesitamos importar el, también el módulo de animación del navegador. Y esto será importante. Aquí. Decimos módulo de navegador, módulo de
animación de Angular, y luego navegador de plataforma. Y después del navegador de plataforma, decimos animaciones. Por lo que aquí importamos el módulo de animación. Entonces vamos a crear de nuevo esa categoría. Tenemos que decir computadora y podemos decir PCI, PCI por ejemplo. Y creamos, y vemos que se crea esa categoría. Y vamos a revisar nuestra mesa. Vemos que realmente está creado y esto creado aquí porque está creado y luego no nos dieron el mensaje. Entonces por eso se crea aquí dos veces. Entonces cometamos un error para ver si el error realmente está funcionando. Entonces voy a su servicio, que creamos. Cometamos un error en el ABI por ejemplo, podemos decir con alguna letra como esta. Entonces cuando agregamos una categoría, volvemos a ir a nuevo. Yo diría otra vez computadora. Y decimos PI BC que creo, y luego obtengo categoría de error no se crea porque la espalda y responder a 4.4 no se encuentra. Entonces volvamos a ponerlo y todo está funcionando bien. Y tenemos la categoría creada. Luchemos el ejemplo. Poner al usuario de nuevo en la tabla de categorías automáticamente después de crear la categoría con éxito. Entonces, ¿cómo podemos hacer eso? Vuelvo a ir al componente de forma categorías. Después del éxito, exhibo el mensaje. Pondré un temporizador y este tiempo de espera una vez hecho,
después volvemos a categorías. Entonces primero necesitamos tener un tiempo de espera, tiempo de espera o puedes usarlo desde nota, nuestro x js. Y puedes, dentro de este dímero especificar cuántos milisegundos quieres ejecutarlo. Y luego digo a prometer. Entonces diplomas, como después de que se ejecutara, después de dos segundos, entonces lo que quieres hacer, digamos, por ejemplo, hecho. Por lo que para volver a las categorías, necesitamos utilizar otro servicio que se llama ubicación. Y esta ubicación es un servicio. Puedes importarlo fácilmente. Por lo que aquí tenemos también otro servicio. Podemos llamarlo así privado y lo llamamos ubicación. Y esta ubicación es tipo off location, esa ubicación desde Angular common. De acuerdo, Entonces como vemos aquí, tenemos módulos de nodo, angular común. Entonces importamos y vemos que realmente es de Angular common. Por lo que aquí utilizamos también estos métodos o este servicio. Decimos esta ubicación de punto y luego me inclino hacia atrás. Entonces sólo quiero volver a donde estaba antes. Guardamos todo como un estilo. Otra vez. Agregamos, por ejemplo, otro con say por ejemplo, quiero agregar electrónica. Y entonces el icono será PI electrónico. Este es un íconos son simplemente aleatorios, necesitamos arreglarlos más adelante. Por lo que presiono Crear. Y después de dos segundos, volvimos automáticamente. Entonces como vemos aquí, que todo está funcionando bien. Tenemos eso esos dos, tenemos los mensajes y también hemos creado categorías. En la siguiente conferencia, vamos a ver cómo eliminar una categoría y cómo editar la categoría.
99. Borrar una categoría con el diálogo de confirmación: De acuerdo, En esta conferencia, voy a mostrar cómo eliminar una categoría y diálogo de
confirmación para el usuario cuando quería eliminar una categoría. En primer lugar, volvemos a nuestra tabla de categorías. Tenemos que añadir aquí algunos botones de acción para cada categoría, como un botón para eliminar y botton para editar. Por lo que volvemos a nuestra tabla de listas de categorías. Y si recuerdas, tenemos aquí el encabezado de la tabla y los campos. Entonces necesito aquí primero tener otro encabezado u otra columna en el encabezado. Vamos a mantenerlo vacío. Y aquí quiero agregar dos botones, uno para edición y otro para la eliminación. Entonces en lugar de este ícono de categoría, lo
eliminamos y agregamos aquí dos botones. El primero es un botón que copié desde arriba. Tendrá un camino o peligro. Podemos llamarlo como depender de lo que la clase vamos a usar etiqueta. No necesitamos etiqueta. Podemos simplemente eliminarlo porque necesitamos solo icono para este botón y el nombre del ícono, no
sea plus será PI, aftas y esta basura. Para mí que hay un enlace de eliminación de enrutador. No queremos un enlace de router, pero necesitaremos un click. Agregaremos eso cuando estemos listos para ello. Tenemos que añadir otro botón. Y este botón será para edición. Entonces tenemos aquí otro botón, pero no va a tener una basura, tendrá un ícono llamado lápiz. Y como ven aquí, tenemos lápiz PI y luego guardamos. Y veremos que nuestra aplicación se actualizó. Pero aquí necesitamos agregar más distancia entre estos botones. Añadiré aquí una clase. Diré p margen menos, ¿verdad? Entonces para agregar guardamos y tendrá este espaciado. Entonces vamos a comprobar cómo podemos colorear los botones. Si recuerdas, si vamos a Prime NG, volvemos a ir a los botones y al botón que tenemos unos colores diferentes. Por lo que estos colores se llaman, por ejemplo, un peligro. Si quieres ver todo el código, solo
tienes que ir a la fuente y verás todos los colores aquí, todo el código que ahí está escrito. Entonces usemos dos colores. En primer lugar, podemos usar un peligro para eliminar o eliminar. Y también podemos usar, por ejemplo, succes con un verde, que es para edición. Entonces ahorramos, volvemos a la aplicación, mentiras, tenemos todo está bien aquí. Entonces vamos a tener un evento click en este botón. Entonces, en primer lugar, podemos sumar método aquí, que se llama onclick o click. Entonces aquí tenemos, por ejemplo, Eliminar categoría. Y quiero pasar también el ID de categoría que quiero eliminar, por lo que puedo decir Category dot ID. Por lo que de esta manera, garantizo que estoy borrando el DNI correcto. Este método se declarará en el archivo TypeScript. Voy al archivo TypeScript de la lista de categorías, y agrego un nuevo método después de ONGs en él. Llamo a este método categoría DDD, y tiene ID de categoría como parámetro, que es una cadena. Entonces para eso, necesitamos usar categoría servicio de contigüidad servicio eliminará para mí una categoría a través del back-end. Entonces para eso, necesitamos crear el servicio que está borrando para mí una categoría. Por lo que vamos a nuestro servicio. Dije categoría servicio. Y añadí aquí en la categoría lead, que está aceptando ID de categoría como cadena. Y está regresando observable tal vez de la categoría líder o tal vez por ejemplo, sólo algún objeto sin especificar nada. Y también se eliminará la solicitud HTTP. Entonces aquí también hemos devuelto objeto porque si recuerdas en el back-end, estoy pasando el ID a la URL y luego se eliminará. Entonces como ven aquí, tenemos aquí los backticks y también la URL. Y luego usé el ID de categoría, que se pasa a través de este método. Nos ahorramos de nuevo a nuestro componente. Usaríamos el servicio de categoría. Por lo que decimos esto sin embargo, categoría servicio Dot Eliminar categoría. Y luego paso ID de categoría, que obtuve de la plantilla HTML. Pero como ustedes saben, esta eliminación no se ejecutará. Entonces voy aquí, digo suscribirse, y luego fui por respuesta. Y esta respuesta, puedo mostrar un mensaje de éxito o un mensaje fallido. Entonces para eso, necesitamos tener el servicio de mensajes que teníamos anteriormente, y también el mensaje de brindis. Entonces tenemos aquí el brindis, lo
copiamos del formulario. Y también agregamos aquí a la parte superior de la lista en la lista de componentes. Entonces aquí tenemos éste y volveremos a llamar al servicio de mensajes. Entonces, ¿cuál es éste? Lo copiaremos de nuevo a nuestro componente o componente de lista de categorías ,
y lo llamamos , y decimos exactamente los mismos mensajes que queríamos mostrar al usuario. Entonces quiero cuando haya algún éxito ISA que el éxito y la categoría se eliminaron. Por lo que digo aquí mensajes o servicio de mensajes succes categoría se elimina. Y también cuando hay un error, quiero mostrarle al usuario que hay un problema. No podemos eliminar la categoría. Entonces igual que aquí, los corchetes después, antes de terminar la suscripción, agrego el error ISA, la categoría no se elimina. Entonces ahorramos, tenemos todo está funcionando bien ahora. Y cuando trato de eliminar, por ejemplo, eliminemos el que se encuentra doblemente ubicado. Y luego vemos que se borra esa categoría. Pero no se elimina de la lista sólo cuando voy a otra página, por ejemplo, al tablero y vuelvo a categoría, entonces veré que realmente se necesitan categorías. Entonces cuando quiero eliminar algo, quiero refrescar esta tabla. Por lo que es muy sencillo. Simplemente volvemos a llamar al servicio. Entonces sobre succes de la eliminación, podemos decir también otra vez me llamó esto. Entonces pongamos el servicio de categoría de conseguir categorías de nuevo en un método. Llamamos a este método, por ejemplo, privado porque solo está dentro de este archivo ts, no se usa en ningún otro lugar. Por lo que podemos decir Obtener categorías. Es un método. Dentro de este método, estoy llamando a este servicio. Entonces primero llamo al método en ONG en Editar llamando a este punto getCategories. Y también voy tras un mensaje exitoso o una respuesta exitosa. Yo quiero tener esta buenas categorías otra vez. Entonces ahorramos, volvemos a ir al front end, intentamos borrar algo. Agradable. Tenemos refresco que lo harán, y tenemos los nuevos datos como Eliminar de nuevo. Agradable, está borrado y tenemos datos actualizados. Pero para mí como experiencia de usuario, me temo que cuando hago clic por error en esto y se borre. Por lo que quiero mostrar un diálogo de confirmación al usuario. Entonces cuando quería borrar algo, entonces obtiene la confirmación. Si realmente confirma la eliminación o no. Prime N G tiene también un componente llamado diálogo confirmado. Y cuando vas a confirmar diálogo y probarlo, por ejemplo, éste, hay un mensaje de confirmación con algún icono y algún texto. Sí y no. Esto es exactamente lo que necesitamos para la reunión y confirmación para nuestra supresión de la categoría. Entonces cómo podemos usar este componente, podemos ir primero a la documentación y veremos que tenemos que importar dos módulos, o un módulo y un servicio. Por lo que el primer módulo se confirma módulo de diálogo. Podemos copiar este e ir al módulo de aplicación donde estamos importando el módulo o el módulo UX. Y luego lo agregamos a nuestros módulos UX. Y necesitamos también importar un servicio de confirmación. Y este servicio, lo vamos a utilizar en nuestras categorías, menos componente. Pero primero, necesitamos usar también algún HTML. Por lo que también necesito copiar este código. Diré que tenemos aquí confirmación e icono y también un diálogo confirmado. O es mejor usar también el ejemplo exactamente que está aquí, porque tiene más propiedades, porque como ustedes saben, cada componente tiene muchas propiedades. Entonces cuando encuentres la propiedad que quieres o el ejemplo que quieres, solo úsalo igual. Entonces cuando quieras ver el ejemplo de esto, confirma, solo tienes que ir a fuente y verás aquí el ejemplo exacto. Entonces como vemos aquí, que en lo básico, utilizó este cuadro de diálogo de confirmación de etiqueta HTML p, y le dio algo de estilo y también bahías Z, índice y algún estilo para el botón. Para que podamos copiar este. Ve a la lista Categorías, y lo ponemos, por ejemplo aquí al final. Y ahora necesitamos tener el servicio, entonces cómo está usando el servicio de confirmación de servicio. Entonces ya veremos que se fue,
él da click en el botón, ejecuta un método de confirmar uno. Y este método tendrá estas propiedades. Por lo que este servicio de confirmación tiene una confirmación y tiene algunas opciones como un mensaje,
encabezado, icono, y también cuando se acepta y cuando se rechaza. Por lo que cuando
acepto, elimino la categoría y exhibo un mensaje de éxito. Pero cuando rechazo, simplemente no hago nada. Para que podamos copiar esta parte, todo. Y vamos a nuestra lista de categorías. Por lo que cuando el usuario haga clic en la categoría de necesidad , en
primer lugar, queremos mostrarle un diálogo. Y este diálogo será exactamente desde el servicio de confirmación. Pero primero, necesitamos importar el servicio de confirmación, como vimos anteriormente. Por lo que necesitamos contar con su servicio de confirmación, cual se importa de la energía prime. Por lo que tenemos aquí Servicio de Mensajes y también servicio de confirmación. Y cuando presionas el espacio de control o el punto de control, obtendrías el Auto Import. Ahora volvamos al método, veremos eso, que tenemos el mensaje de confirmación. Entonces podemos reemplazar eso por algo como, ¿quieres eliminar esta categoría? Y también el encabezado será Eliminar categoría. Entonces es como un título de este diálogo de confirmación. Y damos triángulo de exclamación como icono para demostrar que es peligro. Entonces movemos este gráfico de barras, ¿dónde está este servicio de categoría? Y lo copiamos todo con la flecha misma, y lo colocamos dentro del aceptar. Agradable. Entonces ahora tenemos el diálogo de
confirmación, servicio de diálogo de confirmación, y luego tenemos el error y los mensajes. Pero al rechazar, no voy a hacer nada. Simplemente lo mantendré así para que no tengamos que hacer nada con él. Ahorramos. Y como te dije, tal vez veas este error. Simplemente reinicia el front end y te desharás de él de nuevo al front end. Nosotros lo probamos. Veremos que no se proporciona servicio de confirmación. Por lo que vamos al módulo de la aplicación, y nuevamente, necesitamos proporcionar el servicio de confirmación como vimos con el servicio de mensajes. Por lo que volvemos al front end y tratamos de eliminar alguna categoría. Yo digo borrar este, vale, Tenemos la categoría de plomo. ¿ Quieres conseguirlo esta categoría? Y luego cuando hago clic en Sí, veo que se borró. Y también mesa se refresca y recibí un mensaje. Pero cuando hago clic ahora, no pasa nada.
100. Editar una categoría: De acuerdo, en esta conferencia, les
voy a mostrar cómo editar una categoría. Anteriormente realizamos el Eliminar. Ahora queremos hacer la edición. Por lo que queremos que esta categoría de edición funcional de botón sea exactamente la misma forma para una nueva categoría. Apenas la diferencia de que estamos llenando los datos de categoría ya aquí. Y también necesitamos cambiar este título para ser categoría de
edición y también este botón para ser, por ejemplo, actualizar. Entonces, empecemos desde el principio. Demos una función que tenemos 20. Haga clic en esto, vamos al componente de lo nuevo. Entonces, en primer lugar, necesitamos crear estos métodos. Entonces vamos de nuevo, dos categorías, lista componente. Aquí hay categorías menos componente. Y en la actualización de botón que teníamos aquí, eliminar, y también teníamos una actualización o edición. Tenemos que añadir una función. Entonces será exactamente igual como lo hicimos con la eliminación. Por lo que necesito tener un click, y este click será categoría de actualización. Y yo también quiero pasar. Ellos categorizan ID porque necesito el ID para agarrar los datos de la categoría. Por lo que aquí escribimos categoría ID. Volvemos al archivo TypeScript, vamos a la lista Categorías, y agregamos un nuevo método. Lo estamos llamando Categoría de actualización. Entonces aquí actualizar categoría, y luego tengo ID de categoría, que es una cadena. Y este método me va a navegar a la forma de categoría. Por lo que navegará para mí dos categorías para, así que de esa manera, necesitamos un navegante. Por lo que necesitamos una forma de que cuando hacemos click en eso, sea que nos navegue a ese componente. Por supuesto que lo puedes hacer y lejos también en la plantilla HTML, no
tienes que tener un evento click, pero también puedes hacerlo directamente como enlace router, lo hicimos previamente con unos enlaces normales. Pero quiero mostrarte también cómo navegar cuando necesites eso. El archivo TypeScript en Angular, hay una clase que se llama router. También podemos importarlo en el router constructor. Y es router, y viene del router angular. Y cuando queremos usar este router, volvemos a ir a actualizar categoría. Y digo este punto router dot navegar por URL. Y aquí especifico la URL que me llevará el router. Por lo que será para el nuevo componente, que es el componente de forma. Y aquí decimos, tenemos backticks. Nosotros, decimos forma de categoría. Y luego puedo especificar el ID que quiero pasar a este enlace. Y entonces decimos aquí que la categoría ID es esta ID de categoría. Por lo que quiero ir a este enlace como formulario de categorías ISA, y luego paso el ID donde quiero navegar. Pero el tema aquí que no tenemos ese enlace, sólo
tenemos como el foro. Entonces cuando haga clic en Nuevo, me llevará al foro, pero no tengo algo con la ID. Entonces agreguemos eso al módulo de la aplicación. Vamos al archivo del módulo de aplicación, y luego tenemos aquí las rutas. Tendremos una nueva ruta, que será exactamente la misma que la nueva. Pero tenemos que añadir aquí alguna identificación. Entonces cuando asignes esto con ID o cualquier clave que quieras usar, entonces tendrá como un parámetro, como una variable. Por lo que puedes usar eso como parámetro y leer el valor de la misma en ángulo. Y queremos referirnos a la forma de categorías también. Entonces vamos a comprobar si todo está funcionando bien. Voy a guardar todos, así se guardarán todos los cambios. Volvemos a nuestra aplicación, se actualiza automáticamente. Hacemos click en editar, vemos que todo está bien. Hemos navegado a la URL correcta. Y también tenemos aquí el Id, el Id de su categoría, en el que hice clic. Por lo que cuando haga clic en este,
tendré una identificación diferente. Al hacer clic en este, también
tengo identificación diferente. Por lo que en base a ese ID, especificaré que este foro es para edición o es para agregar una nueva categoría. Entonces para eso, voy a formar sus categorías y definir una variable. Lo llamamos modo de edición. Y este modo de edición obtendrá un valor al principio, o como predeterminado será falso. Entonces no es modo de edición por defecto, pero tenemos que hacerlo como modo de edición cuando estamos navegando para editar una categoría. De acuerdo, Entonces cómo puedo saber que este formulario está en modo de edición o no, esto se sabrá por si hay parámetro después de este enlace, entonces estoy en modo de edición. Y si no tengo este parámetro, entonces no estoy en modo de edición. Entonces cómo podemos saber que primero crearía un método sobre energía en edición. Yo lo llamo, por ejemplo, estos puntos. Podemos llamar a este método check edit mode. Entonces de esta manera, comprobaré dentro de este método si estoy en modo de edición o no. Entonces definamos este método. Bajen. Y si te diste cuenta, estoy mostrando los métodos internos. Estoy usando guión bajo detrás de ellos y una bandera ellos con un privado. Entonces necesito una forma de leer parámetros desde su enlace, desde la URL. Necesito saber si hay ID 3D o no, cómo podemos hacer eso. Si recuerdas, usamos algo llamado ruta. Pero aquí en otoño hay algo llamado ruta activada. Y esto, podemos usarlo desde Angular para saber si tenemos un parámetro en la URL o no. Entonces llamémoslo. Contamos con un particular o router. Y este router, se llama ruta activada. Y esta ruta activada viene también del router angular, o es mejor, Llamémosle solo una ruta. Volvemos a nuestro método que es el modo de edición de cheques. Vamos aquí y decimos estos puntos, punto de ruta, params, como los parámetros, comprueba para mí los parámetros que están en la URL actual y luego suscribirme. Por lo que quiero suscribirme para ver y observar el enlace cuando vaya a este componente. Por lo que recuerdan, estamos suscribiendo a observable. Y observable siempre nos está dando un nuevo valor. Es como un latido del corazón, te puedes imaginar cada vez que viene con un nuevo valor. Por lo que desperdiciar en el abusador lo que está haciendo clic al hacer clic en Agregar ven a este componente y tiene ID o parámetros en general en su enlace, entonces el suscrito sería despedido. Y luego puedo leer los parámetros que vienen con la URL. Entonces para leer estos parámetros, la devolución de suscripción para mí, armas de fuego, por ejemplo, se puede definir una variable aquí. Después tenemos la función de flecha abierta y la función de flecha dentro de ella. Puedo manejar lo que quiero hacer. Entonces por ejemplo, si hay params, ID, si hay ID dentro de esos params, y éste será exactamente el mismo que definí en un módulo. Entonces aquí, cuando digo ID, entonces debo buscar también ID. Pero si lo llamo, por ejemplo, ID de categoría, entonces debo aquí buscar también ID de categoría. Entonces si hay un ID como el usuario hizo clic en el modo de
edición y hay param ID en el enlace. Después haz el modo de edición como verdadero. De acuerdo, entonces ahora estamos en modo edición, estamos seguros de que el usuario hizo clic en el botón Editar y estamos leyendo los valores que provienen de esta ID de categoría. Perfecto, Ahorremos ahora y veamos si nos puede gustar un inicio más débil simple. Podemos decir por ejemplo, vamos a cambiar este texto para ser anuncio es TD edit cuando estoy agregando una nueva categoría. Y también editar es Td de anuncio, donde estoy editando categoría aire. Y también este botón tendrá aquí actualización cuando esté actualizando la categoría, cuando esté en modo edición o crear cuando esté creando uno nuevo. Entonces hagámoslo es muy sencillo. Entonces vamos a la plantilla, plantilla HTML, y si conoces condiciones ternarias, Es como en línea. Si es así, cuando defina esta entrada como enlace bidireccional, entonces podré leer los valores aquí. Entonces, por ejemplo, puedo ver variables. Puedo tomar el modo de edición si es posible cambiarlo o no, o leer en él basado en eso. Entonces de esta manera, puedo ser capaz de leer el modo de edición valioso. Entonces digo como definitivamente se condicionó la condición en línea si, digo Editar modo. Cuando tengo modo de edición. Entonces para mí aquí, poner para mí aquí, editar categoría. Pero cuando no tengo modo de edición, entonces hazlo como agregar categoría como antes. Por lo que aquí hemos especificado en base al valor del modo de edición. Si es cierto, entonces es el modo de edición. Pero cuando es falso, entonces es categoría o agregando un nuevo modo de categoría. Guardémoslo e intentémoslo de nuevo. Veremos que tenemos categoría ADT, pero cuando regrese a categorías, hago click en Nuevo, veré que tengo categoría de agregar. Pero cuando vaya aquí y haga clic en este lápiz, voy a ver que tengo categoría de edición. Entonces lo mismo que voy a hacer es con este botón. Entonces cuando es el modo Editar, entonces hazlo como crear, pero si no lo haces como editar. Entonces el botón ya está en la barra de herramientas y ¿está aquí? Por lo que lo tenemos aquí como Create. Por lo que decimos que la etiqueta estará disponible en función del modo de edición. Entonces cuando sea el modo Editar, entonces dame como actualización. Y cuando no sea modo de edición, hazlo como crea o cuando
guardamos, vemos que tiene una actualización porque yo soy o tengo ID aquí. Entonces cuando vuelvo a la categoría. ¿ No tienes, que es Crear. Vuelve a las categorías, edita, luego es actualización. Por lo que ahora hicimos como cambio táctico. Entonces sólo tenemos ese intercambio basado si tengo aquí un DNI o no. Entonces ahora vamos a sentir los datos que vienen con este formulario. Entonces necesitamos una API o la Ecole que me agarrará esa contigüidad con esa ID. Entonces siento los datos de esa categoría dentro de estos campos de esa forma. Y por supuesto, todo eso estará en el modo de edición. Entonces cuando volvemos a nuestra función que creamos aquí, necesitamos comprobar si tenemos una categoría con ese ID o no. Por lo que ya tenemos estos params ID. Por lo que estoy leyendo el DNI aquí. Por lo que necesito un servicio para obtener una categoría por identificación. Y eso lo hemos creado ya en el backend. Si recuerdas, cuando voy a categoría y lo llamo por ID, sigue por ejemplo, yo llamo a éste. Y pongo identificación tras su enlace. Y cuando envíe, obtendré esa categoría de la base de datos, que es exactamente con el detalle como nombre, icono, y color. Entonces también, necesitamos un servicio. Entonces cuando volvemos a nuestro servicio, que es de categoría servicio, necesitamos tener una categoría gets, categorías, pero una categoría, por lo que será igual. Pero aquí estoy pasando la ID de categoría, que será una cadena. Y también los observables fueron devueltos para mí sólo una categoría, no múltiples categorías. Por lo que voy a conseguir sólo una. Y al final, tendré aquí la identificación de categoría. Por lo que tendré aquí como plus categoría ID. O si lo desea, puede usar la función backticks. Entonces podemos tener aquí atrás tick y también escuchar nuevo tick y ese signo de dólar y luego Isaac ID de categoría. Por lo que en este caso, tenemos la identificación de categoría. Lo conseguimos exactamente con ese servicio, pero necesitamos renombrar esto y lo tenemos como buena categoría. Entonces volvamos de nuevo a nuestra forma. Para que podamos ir aquí, se forman dos categorías. Y luego diré esta categoría punto, punto
de servicio get category. Y esta categoría aceptará la categoría ID, que está en los parámetros. Por lo que voy a decir params dot ID y luego suscribirme como siempre. Entonces me pondré, de acuerdo, Entonces indagación. Y entonces haré algo. Quiero establecer los campos de la categoría para estar en el formulario con esa categoría que obtuve del back-end. Por lo que si recuerdas, podemos llegar a estos controles mediante el uso de este formulario de categoría. Por lo que decimos esta forma de categoría de
puntos, nombre de punto, valor de conjunto de puntos. Por lo que quiero establecer valor para esto. Por lo que he establecido valor categoría nombre de punto. Entonces estoy llegando aquí esa categoría y estoy usando el nombre de la misma, que obtuve del backend para establecer el valor del campo, que está en este control. Por lo que es muy sencillo. Entonces aquí tenemos éste y también otro para el ícono. Por lo que diré aunque icono punto valor conjunto y luego icono de punto de categoría. Entonces vamos a guardar eso, pruébalo. De acuerdo, Tenemos cosa pesadamente está bien. Entonces tenemos, de nuevo, volvemos a las categorías. Tenemos aquí una belleza y tenemos salud. Cuando hago clic en salud, entonces llegaría aquí salud, salud. Y también cuando hago clic en belleza, tengo aquí belleza, belleza. Y cada vez que hago clic, llamo al back-end para obtener la categoría de la categoría visitada actual o ID visitado. De acuerdo, entonces lo que necesitamos ahora es cuando cambio esos campos y luego hago clic en Actualizar, entonces realmente se actualiza en la base de datos. Entonces lo que necesitamos, hay que repetir conmigo primero, un servicio que se está actualizando para nosotros en la base de datos. Y también necesitamos definir la lógica. Al hacer clic en el botón, enviará solicitud de actualización, no cualquier solicitud, porque si recuerdas, este formulario se hace sólo para crear una nueva categoría, necesitamos revisar también el modo de edición, y entonces decidimos si es actualización o si está creando una nueva categoría. Entonces hagamos primero la lógica del botón. Cuando hago clic en este botón Actualizar, como recuerdan, es sólo un botón. Sólo estamos cambiando el texto. Entonces aquí sólo tenemos actualizar o crear, y luego tenemos el método en enviar y enviar. Estoy comprobando si este formulario es válido o no, y luego estoy creando una nueva categoría. Entonces tal vez después de recolectar los datos de su categoría, como sabemos lo que el usuario ingresó en el formulario. Podemos revisar el Modo Editar. Si estos puntos, modo de edición. Entonces actualiza para mí esa categoría. De lo contrario. Entonces hazlo por mí, creo categoría. Entonces para eso podemos definir un método. Podemos llamarlo esta categoría de actualización de puntos. Sería un método privado. Y este método aceptará para mí una categoría. Por lo que enviaré esa categoría datos los cuales se recopilan del usuario, y luego los enviaré a este método. De lo contrario. Entonces diré también otro método, solo para hacer nuestro código más limpio y más legible, podemos decir Agregar o Crear categoría. Y luego vuelvo a pasar esos datos de categoría. Por lo que necesitamos definir dos métodos. Por lo que este método ya está definido aquí, lo
tenemos ya aquí. Por lo que solo decimos privada agregar categoría, y esta categoría aceptará datos de categoría. Por lo que podemos decir que tenemos aquí también categoría. Y luego podemos cortar esta parte del código aquí y luego pegarlo en categoría. Por lo que tenemos agregar categoría dentro de este método. Por lo que necesitamos agregar categoría de actualización. Será lo mismo. Por lo que tenemos aquí categoría de actualización privada y luego será una categoría y también será tipo de categoría. Siempre trato de mostrarte eso para agregar siempre tipos. Por lo que sería mejor para ti. Y más código amigable o amigo desarrollador. Vamos a hacer algunas refactorías más adelante con base en las reglas. Por ejemplo, no estoy usando engranaje esa respuesta para poder deshacerme de este parámetro. Eso ya veremos más adelante. Entonces quiero que veas el video que quiero hacer sobre refactorización. Nosotros refactorizamos todo este código, revisamos nuestros problemas. Todo se limpia para entregarlo de manera muy limpia. Entonces, ¿cuál es la diferencia entre crear categoría y actualizar categoría? La diferencia que la categoría crear, no
necesito pasar un ID de su categoría el cual quiero actualizar o crear. Pero en categoría de actualización, necesito pasar los nuevos datos de categoría y también el ID de la categoría que quiero actualizar, que es ésta. Entonces para eso, supongo que todo este método será exactamente el mismo que agregar categoría, excepto que necesitamos tener también el ID. Entonces diré aquí que podemos copiar aquí todo y pegarlo aquí. Pero aquí no tenemos crear categoría, pero necesitamos una categoría de actualización. Entonces actualizando una categoría con el uso de la categoría que quiero actualizar. Pero como les dije anteriormente, necesitamos también el DNI. Entonces vamos a crear este servicio. En primer lugar, volvemos a dos categorías, servicio, creamos el servicio y luego discutiremos sobre el ID, cómo podemos obtenerlo. Entonces en primer lugar, tenemos aquí crear categoría, será exactamente lo mismo. Sólo tenemos que reemplazar este también, categoría de fecha. Y luego leemos esa categoría. Regresará para nosotros una nueva categoría que está anticuada. Pero aquí en lugar de post, necesitamos agregar put. Y con esta solicitud PUT, podemos actualizar la categoría. Y también escuchamos, como recuerdan, al actualizar la solicitud, tenemos que ir a poner, necesitamos pasar todo. Por lo que el ID de la categoría con un nuevo dato. Por lo que no sólo se trata de conseguir y enviar un nuevo dato, sino que también necesitamos pasar también el DNI. Entonces necesitamos aquí de alguna manera, como decimos, más ID de punto de categoría. ¿ De acuerdo? Pero esto vendrá indefinido, supongo, porque no especificamos en esta categoría que también tenemos ID. Entonces cómo podemos hacer eso, volvemos a nuestra forma aquí. Entonces decimos eso, vale, tengo aquí categoría de actualización. Pero si recuerdas esa categoría que se pasa aquí en el método, solo tiene nombre, un icono, pero no tiene el ID de categoría. De acuerdo, si recuerdas, obtuvimos el ID de categoría de donde cuando estábamos revisando el modo de edición. Por lo que en el modo de edición, puedo definir también una variable global como cerca de este modo de edición, lo
llamo ID de categoría actual. Por lo que digo ID de categoría actual. Y esto será, por ejemplo, una cuerda. Y al principio no es así porque no tiene ningún valor al principio. Entonces cuando volvamos de nuevo al modo de edición, necesitamos tener este modo de edición de cheques. Y luego después de asignar el modo de edición, digo que este punto ID de categoría actual será params dot ID, porque si hay ID, entonces asígnelo a ID actual. Entonces cuando ahorramos, creo que aquí tenemos un problema. Nos falta el final de la suscripción. Bracket, por lo que necesitamos agregarlo aquí. Así que solo ten cuidado cuando copiamos pegar algún personal para no perderte algunos corchetes. Revisamos nuestra terminal. Si aquí no tenemos ningún tema, entonces vemos que, acuerdo, nos falta que la categoría no esté definida. Esto se debe a que no guardé su servicio de categoría. Entonces lo guardamos de nuevo. Doy click en categorías. Quiero actualizar también la belleza del icono, así que no, no eliminar ni actualizar. Entonces diré aquí una belleza por ejemplo, solucionamos este problema y eliminamos este ícono. Y luego hacemos click en actualizar. Vemos que estamos recibiendo error y nuestro backend dice que está indefinido. Esto indefinido. ¿Por qué? Porque leí el ID de categoría, pero no se lo pasé al servicio. Tenemos aquí la categoría actual ID. Por lo que sólo necesitamos construir el objeto de su categoría cual estoy pasando para actualizar o eliminar o lo siento, agregar con una ID. Por lo que voy a decir ID será esta categoría actual ID. Entonces cuando hay un ID dentro del modo de edición, entonces lo envío al modo de edición. Pero cuando no hay, entonces lo envío incluso No hay porque la idea
se crearía en la base de datos cuando creara cualquier categoría. Entonces, vamos a guardar eso. Intentado de nuevo, eliminamos este ícono y agregamos aquí belleza nuevamente y aquí otra vez una belleza, y hacemos clic en Actualizar. Vemos que la categoría se actualizó y
volvimos a la lista esto porque copiamos el mismo código, que es 4 add category. Entonces, sólo vamos a escoger los textos. Todo lo que necesitamos aquí, conseguir bueno está actualizado. La categoría no se actualiza cuando hay algún error. Entonces cuando ahorremos, intenta editar este. Por lo que podemos ver aquí ser actualización de salud, piojos, conseguir un bien se actualiza y automáticamente se volvió atrás. Y tenemos aquí la categoría actualizada. Entonces como resumen y rápido, por lo que necesitamos especificar si estamos editando o tenemos NU. Estamos usando la misma forma porque no necesitamos duplicar el código. No quiero crear otros cuatro para crear o editar una categoría. Por lo que podemos usar el mismo componente pero en diferentes condiciones. Entonces, en primer lugar, cuando tengo un nuevo, solo
creo un componente, sin problema ni categoría. Y cuando tengo edición, paso el ID de su categoría clicada. Y en base a este ID, definí mis cosas, definí mi lógica. Yo digo que esto es editar, esto es actualización o no. Y también siento los datos de la categoría. Y cómo lo hicimos, vimos que estamos leyendo este valor de los params. Y por los params, vuelvo a enviar la función basada en el Modo Editar. Si estoy en Modo Editar o no. Y luego actualizo esa categoría o agrego categoría Eliyahu en función de la condición de modo de edición. Y por supuesto, por cada movimiento donde quiero hacer, necesitaba servicios un servicio que me está agarrando la categoría seleccionada de la base de datos. Y también cuando quiero actualizar categoría, creé servicio de categoría de actualización, que también se encuentra en el servicio para actualizar las cosas de la base de datos a través del backend, que estamos usando aquí la API.
101. Añade selector de colores para el color de la categoría: Bienvenido de nuevo. En esta conferencia, les voy a mostrar cómo crear un recolector de color. Porque como recuerdas que nuestra categoría también viene con una propiedad que se llama color prime. Ng también viene con un control selector de color. Para que puedas recoger un color y usar el valor y almacenarlo en la base de datos. ¿ Cómo podemos usar este recolector de color? En primer lugar, necesitamos importar el módulo Color Picker y luego usarlo en nuestro módulo de aplicación como lo hice aquí. Por lo que tengo aquí el módulo de selección de color y lo importo a nuestra exposición USTED. A continuación, necesitamos usar algún componente que se llama picker de color de guisante. Entonces vamos a copiar ese e ir a nuestro formulario. Por lo que me gustaría también colocarlo cerca del icono y del nombre. Por lo que podemos tener también aquí una propiedad de color. Te estoy mostrando esto porque quiero que sepas agregar otras propiedades para que no tengamos solo nombre e icono en categoría por supuesto puede ser vamos a tener color, vamos a tener imagen, vamos a tener múltiples cosas. Por lo que puedes agregar tus propias propiedades en función de tu necesidad. Por lo que les estoy mostrando esta conferencia especialmente solo para
mostrarles cómo agregar otras propiedades para ser más prácticos. Entonces volvemos a nuestra forma y encontramos el campo. Por lo que aquí hemos creado un campo como tenemos un nombre e icono. Vamos a crear otro campo. Yo digo div. Yo le doy una clase que es campo B, y también otra clase que se llama llamada P. Entonces cuando presione tab, voy a ver que están asignados a un div como clase. Por lo que necesitamos también una etiqueta. Por lo que podemos tener esta etiqueta para el color. Y dentro de esta etiqueta estará el color del texto. Y luego vamos a colocar aquí nuestro componente. Por lo que tenemos aquí picker de color y tú modelo de color. Pero como ven aquí, no
estamos usando el modelo NG. Estamos usando el nombre de Control de formularios. Por supuesto, este recolector de color, estoy seguro en la documentación que mencionaron al respecto. Por lo que podemos ver que en foros impulsados por modelos o en formas reactivas, recolector de
color también se puede utilizar en una forma impulsada por modelos. Cómo podemos hacer eso, simplemente le damos un nombre de control de formulario de propiedad, que es bastante simple. Entonces quitamos esa parte. Nosotros decimos, Ok, Nombre de Control de Forma. Pero como recuerdan, dijimos que cada nombre de control debe estar dentro de nuestro grupo de formularios, cual construimos en el archivo ts o en el archivo de código. Entonces voy de nuevo a mi constructor de formularios y a un grupo, y luego agrego la propiedad de color. Entonces digo aquí, agrega para mí color. Y el valor predeterminado, por ejemplo, puede ser FFF. Por lo que este color, el ancho, que será un valor predeterminado cuando no haya valor proviene de la base de datos. Entonces vamos a guardar todo para ver si todo está funcionando bien. Volviendo a nuestra aplicación, vemos genial que tengamos el color aquí. Entonces lo tenemos todo. Tenemos un recolector de color y lo que nos falta ahora que necesitamos, cuando estamos actualizando el color, necesitamos enviarlo al back-end. Entonces, en primer lugar, como recuerdan, cuando agrego una categoría, necesitamos recoger un color. Y también cuando vamos a actualizar categoría. Entonces primero agreguemos una categoría. Entonces cuando estoy agregando una categoría y presionando el botón Crear, si recuerdas, estamos creando el objeto de categoría. Estamos teniendo ID, nombre, e ícono, que recogemos del propio formulario. Y luego los estoy enviando en base si estoy en modo edición y todo si estoy en modo Agregar. Por lo que hablamos de eso anteriormente. Por lo que necesito también enviar el color. Por lo que sería exactamente de la misma manera. Por lo que voy a decir también, color será esta forma de categoría de puntos porque definimos la forma en la que tenemos un color también. Por lo que diré valor de punto de color. Pero aquí todavía estamos teniendo un problema. Estamos teniendo problema diciendo que el color no es asignable a categoría, como el color no existe en el tipo de categoría. Entonces cuando vaya a esa categoría, voy a ver que ya no tengo esta propiedad, por lo que no podemos agregarla y también añadirla como opcional porque a veces no la necesito y también es opcional. Entonces después de eso, cuando lo agregué, el error, estos aparecen. Entonces ahora intentemos agregar categoría en base a lo que hemos hecho aquí. Por lo que voy a nuestra aplicación, le doy un nombre, por ejemplo, juegos de PC. Y el ícono será un PC. Y entonces voy a dar un color. Por ejemplo, este rojo. O vamos a darle así para que sea como reconocible. Y luego hago clic en Crear, solo ten cuidado con tu red lo que estamos enviando al back-end. Entonces cuando hago clic en Crear, veo que se crea una GUI. Y el color que envié es exactamente ese color que seleccioné. Y cuando vuelva a editar esta categoría, voy a ver que el color se vuelve atrás para pegar esto porque eso no estamos inicializando. Además, cuando hago clic en el modo de edición, como recuerdan, estamos inicializando esos campos, esos valores. Entonces lo que necesitamos también para inicializar el color. Hacer eso es bastante sencillo. Simplemente vamos de nuevo a nuestro formulario de categorías. Si recuerdas, estamos haciendo el modo de edición de cheques e inyectar modo de edición. Cuando tengo modo de edición, entonces estoy configurando los valores de esos campos en valor inicial que obtengo de la base de datos. Por lo que sólo vamos a necesitar agregar esta categoría forma color punto y luego establecer valor del color para que sea color de punto de categoría, que obtuve del back-end, que obtuve de la base de datos. Porque si recuerdas, también, nuestro backend nos está enviando el color porque lo guardamos en el back-end. Entonces cuando hago clic en Guardar, está bien, vuelve a la aplicación. Vemos que el color se inicializa y que es una gran cosa. Entonces aquí tengo ese color. A veces no tengo nada. Entonces porque se está poniendo un negro o algo así como ancho. Por lo que esto ya tiene un color en la base de datos. Entonces cuando vaya a Categorías y quiera editar,
voy a ver el color original. Pero como ves, no me gusta tenerlo así. Está en la misma línea de su sello. Por lo que necesitamos sólo poner este icono o este color para estar en la misma línea con esas entradas. Por lo que tener la etiqueta en la parte superior y debajo de ella es un color. Aquí es muy sencillo. Yo lo voy a hacer es muy rápido. Simplemente voy a añadir un BR. Br es una línea de ruptura. Entonces cuando guarde, voy a ver que tengo aquí una línea de ruptura y tengo ese color, que puedo recoger y actualizar mi categoría en base a eso. Entonces agreguemos también esa columna a la lista de la tabla. Por lo que podemos tener aquí id, nombre, icono, y un color. Entonces para ello, también podemos ir a la lista. Tengo aquí otro td, que es categoría ese color. Y también tengo un encabezado. Por lo que tendremos un encabezado de la tabla que se llamará color. Por lo que podemos tenerlo como color. Y también el valor o el TD sea ese color punto categoría. Entonces cuando guardemos esta forma o esta tabla, veremos que tenemos el color. En la próxima conferencia, les voy a mostrar cómo embellecer esta mesa. Queremos que el usuario sea más amigable con la interfaz de usuario. Al igual que quiero que vea el ícono en sí y también quiero mostrarle el lote Recolor, textos y códigos como este. Por lo que queremos mostrar al usuario lo real o la realidad de la categoría, cómo se verá.
102. Refactoring Code y de las categorías de Refactoring con más características: De acuerdo, en esta conferencia, quiero mostrarles cómo podemos mostrar el color y el icono en la tabla lista de categorías. Entonces, en primer lugar, como recuerdas que estamos usando Icon Library, que se proporciona por prime end. Y esta Biblioteca de iconos vienen siempre con una Clase II y luego BI, que es un atajo para el icono de Prime. Y luego especificas el nombre del icono. Por supuesto, tienes la opción de no usar esta biblioteca de iconos. Hay muchas bibliotecas de iconos. Puedes usarlos solo necesitas reemplazar el archivo de estilo que teníamos anteriormente y que creamos en los archivos públicos. Entonces solo tienes que ir aquí y decir que no quiero usar, por ejemplo, iconos primos. Quiero usar, por ejemplo, iconos de material de Google. Entonces en este ejemplo, estamos mostrando cómo usar iconos primos. Entonces si recuerdas en nuestra base de datos que solo estamos almacenando el nombre del icono. Entonces, por ejemplo, si quiero usar uno de esos ícono, por ejemplo, quiero una brújula. Yo sólo voy aquí y digo que el icono de esta categoría será una brújula. Y luego hago clic en actualizar. Tienes dos opciones aquí. Puedes almacenar todo el nombre del ícono, como ícono PI, y luego guardarlo aquí. O también puedes, solo
pones este prefijo y hardcode, este prefijo que necesitamos aquí en la tabla en el código HTML. Esto depende si vas a usar esta biblioteca de iconos o no. Entonces si quieres usar diferente biblioteca de iconos, entonces te consejo que guardes todo el nombre del ícono que está en este campo. O si voy a usar sólo iconos primos N G como voy a hacer aquí. Entonces guardo sólo el sufijo de este ícono, que es el nombre del ícono. Y aquí en el código, voy al campo donde estoy sacando el nombre del icono. Yo exactamente cómo estamos usando el icono. Y este icono tendrá una clase que se llama icono P y luego el prefijo en sí. Pero lo hacemos de manera diferente. Entonces decimos ng-class será exactamente igual,
por ejemplo, lo ponemos también entre paréntesis para que podamos usar unas variables dentro de la clase NG. Por lo que la clase ng-en este caso será el prefijo en sí, como PI plus category dot icon. Entonces digo aquí que no quiero tener un prefijo o sufijo, pero quiero usar ese icono de categoría, pero todo está aquí codificado. Entonces cuando ahorremos, podemos ver que vamos a conseguir el ícono en la tabla. Entonces aquí tenemos la, por ejemplo, la brújula. Yo también quiero cambiar esto, por ejemplo, la salud. Podemos darle otro ícono como por ejemplo, podemos tener este corazón, por lo que podemos ir aquí y reemplazar esto. Decimos actualizar, vale, dámelo como corazón. Y también podemos cambiar esto a algo como En el ícono, algo así, th large. Por lo que podemos tener éste así como un ícono que actualicé. Y entonces todos ellos se colocarán exactamente como los prefijo en la tabla. De lo contrario, si el nombre es incorrecto o no existe en la biblioteca de iconos, entonces estará vacío aquí. También puedes cambiar el tamaño de este ícono y hacerlo más grande. También está escrito en la documentación que solo necesitas agregar. También font-style, que viene aquí. Entonces estilo, tamaño de fuente, le das, por ejemplo, a R, m. Así podemos tenerlo así. Entonces aquí tengo yo y luego lo doy como tiempo. Este estilo se guardará a nuestro EM. Y luego veremos que el ícono se hizo realmente más grande como usuario o usuario front-end, no
me interesa el ID porque es tan largo y no me interesa cómo se muestra este ID. Entonces tal vez podamos quitar esta columna de identificación de aquí, así que ya no necesitamos eso. Entonces solo lo quitamos y podemos tener solo el nombre y luego el ícono y ese color. Entonces como ven aquí, tendremos una nueva mesa y luego tenemos el color para el color. Te acondico también que reemplaces esto para ser el mismo que el color. Y será una tarea para ti. Voy a crear una tarea después de esta conferencia, quiero que me muestres cómo reemplazar estos hashCode por el color rojo. Entonces quiero, por ejemplo aquí un div, que mostrará, por ejemplo, el color de este hashCode. De acuerdo, ¿Qué tal agregar una función de ordenación para la mesa? Entonces, por ejemplo, si hago clic en los encabezados, puedo ordenar estas columnas. Por lo que puedo ordenar por nombre en este caso. Entonces activemos eso. Voy a la mesa final prime y compruebo cómo podemos activar el sort. Entonces como ven aquí, tenemos una mesa y luego tenemos aquí una especie. Y este ejemplo nos está mostrando cómo está ordenando en base a lo que haga clic en la columna. Para mí, sólo quiero una columna para activar la fuente basada en. Entonces si vamos a la documentación, veremos que está adjuntando un atributo al encabezado de la tabla. Entonces donde quiere mostrar todo ordenar la tabla en base. Entonces quiero, por ejemplo, ordenar en base
a la columna que se llama código. O puedo ordenar en base a una columna que se nombra nombre. Por lo que podemos hacer eso también para nuestra mesa. Por lo que puedo ir aquí y copiar esta parte donde corresponda columna. Entonces voy aquí y voy al campo de nombre o su nombre Encabezado donde quiero ordenar por nombre y colocarlo aquí. Entonces tendremos una especie de nombre de columna. Y cuando guarde y vuelva a nuestra aplicación, entonces veremos que se puede hacer clic y se está ordenando. Pero no me está mostrando el ícono donde quiero ordenar como, por ejemplo, de una a Zed o de Z a a. entonces quiero agregar también otro campo que se llama icono fuente P. Y este es un componente el cual se puede utilizar para mostrar el icono del tipo. Y como ven aquí que colocó después de su nombre, será después del nombre que creamos aquí, el texto en sí. Por lo que mostrará el icono que queremos en nuestra aplicación. Entonces cuando volvamos y veamos el ícono, entonces sabré que como estoy ordenando. Hay más características que se pueden agregar a la tabla. Pero ahora lo mantengamos así para la categoría. Porque como dijimos, comenzamos simple, pero en las próximas conferencias para productos y usuarios, vamos a agregar algunos filtros como buscar producto o por ejemplo, toggle o por ejemplo, redimensionar las columnas. Eso es lo que tenemos que hacer, lo cual está todo documentado aquí por ahora. Ya que veo que tenemos una hermosa mesa. A menos que cuando hagas esto y muestres el color, lo
añadiré también a su código de esta conferencia. Pero primero, quiero que lo hagas como tarea y publiques tu asignación en el repositorio de códigos o en la base
de código de la tarea que adjuntaré después de esta conferencia.
103. ESLint de ESLint: De acuerdo, En esta sección, creamos mucho código y escribimos muchas cosas. Entonces estoy seguro de que también hicimos muchos errores. Entonces vamos a arreglarlos usando Eastland. Eastland, como recuerdan, es una extensión que instalamos en Visual Studio Code y que viene por configuración predeterminada con el NX. Entonces aquí, como recuerdas, tenemos un prefijo como admin y también algunas otras reglas que puedes especificar. Entonces vamos a pasar por lo que creamos. En primer lugar, tenemos la forma de categorías. Estamos viendo que estamos recibiendo un error aquí, que esto debería ser prefijos como admin. Entonces arreglemos eso. Entonces primero tenemos esto fijo, tengo otra flecha que tenemos aquí ese tipo booleano es booleano. Aquí definimos un booleano y volvimos a decir que es booleano, no
es buena manera. Entonces en ES pelusa es decir solo dices que si es booleano o hazlo igual a un valor booleano. Entonces aquí tenemos ahora que sólo falso, entonces el código o el compilador sabrán automáticamente que esta es una variable booleana. Entonces vamos a revisar aquí el otro código, como ven aquí, que tenemos también algunos errores como se declara esta respuesta pero nunca se lee. Entonces no quiero usar una respuesta cuando creo una categoría, a menos que, si digo, por ejemplo, categoría y luego nombre se cree. Entonces, por ejemplo, puedo usar esta respuesta. Por ejemplo, le renombro como una categoría porque cuando creamos una categoría, está respondiendo para mí el back-end con esa categoría. Entonces de esta manera, tengo que decir, por ejemplo, ese tipo de esa categoría. Y entonces digo que tenía categoría, me quito esta parte, uso backticks por aquí, lo
sustituyo por backticks. Y digo esa categoría, crea
este nombre de punto de categoría. Entonces cuando reemplace eso y vaya al código, cree una nueva categoría. Digo, por ejemplo, PlayStation. Y entonces el icono es, por ejemplo, el juego o algo más. Entonces en selecciono un color, entonces veré que la notificación diría categoría PlayStation se crea. Entonces exactamente de la forma en que quieres aquí. Y también por ejemplo aquí no uso la variable, así que simplemente puedes quitarla para mantener tu cosa de carril más fácil está clara en tu código está claro. También la flecha si no quieres mencionar el error,
vale, Así que solo borra eso. No te necesitamos. Lo mismo para eso es porque también puedes con la categoría de actualización, puedes hacer lo mismo aquí. Por ejemplo, lo eliminaré. Y también aquí, no necesito que se haga eso. Por lo que no lo necesitamos también el error. Entonces como ves ahora tenemos un código limpio, cuatro categorías, cuatro componentes en el HTML. No creo que tengamos ningún tema. Todo está claro y encuentra en la lista de categorías también. Tenemos también algo en el HTML. No, no tenemos, tenemos en cuenta su lista. De acuerdo, tenemos aquí algún error de que este prefijo debería ser admin, debería ser bits azules. Y también, de nuevo, necesitamos eliminar estas variables no utilizadas. Por ejemplo, aquí, el diálogo de confirmación dice que bien, cuando
acepto, hago algo, cuando rechazo, entonces no hago a nada, así que es mejor quitarlo. De acuerdo, Lo que creamos también en el módulo de la app, veamos si tenemos algún problema. De acuerdo, aquí no tenemos ningún problema. Además, trabajamos en la categoría de servicio como recuerdas. Entonces aquí también habíamos creado algún personal, como veremos en la próxima conferencia, necesitamos reemplazar esto por 100 variable, porque como ves, estamos repitiendo la misma URL en cada núcleo. Entonces aquí también necesitamos refactorizar eso. Aquí me está dando un objeto es decir, no uses objeto como tipo. Entonces cometí un error aquí porque objeto significa cualquier valor no de conocimiento. Entonces en este caso, yo diría por ejemplo, vamos a borrarlo. Por ejemplo, Eliminar categoría
, me dará un objeto a cambio. Entonces digo cualquiera, para que pueda especificar cualquiera para ese tipo. Por lo que puedes esperar cualquier respuesta del backend. Entonces, ¿por qué guardamos eso? De acuerdo, no tenemos ningún problema de pelaje, así que todo está funcionando bien ahora. Tenemos un código limpio. No tenemos que molestarnos con errores en el editor. En la próxima conferencia, les voy a mostrar cómo utilizar las variables de entorno. Te acuerdas que Angular viene siempre con variables de entorno, como veremos en la próxima conferencia.
104. Tabla de lista de productos: De acuerdo, ahora en esta conferencia vamos a construir la tabla de productos. Entonces como recuerdan, estamos creando el componente y luego estamos llenando la plantilla, y luego llamamos a los servicios. Entonces, primero creemos dos componentes. Uno para la lista de productos y el otro para los productos para. Entonces como lo hacemos siempre, vamos a generar en la consola NX y buscamos componente como siempre. Y entonces le daré un nombre. Dónde está la ruta es Páginas y luego productos, y luego lista de productos. Y el proyecto es admin. Y de nuevo, no necesitamos ningún estilo con él porque tenemos estilo público. Y también tenemos que importar o omitir esas pruebas. Entonces eso es todo. Y comprobamos si todo está bien. De acuerdo, Se va Admin, páginas de aplicaciones, productos, lista de
productos, y el componente. Nosotros lo ejecutamos. ¿ Y creamos otro componente para qué? Para la forma. Por lo que tenemos foro y lista exactamente como las categorías. Por lo que hacemos click en correr. Y veremos en nuestra lista de archivos que tenemos dos componentes en ti, que forman nuestros productos y lista de productos. Y están listados bajo las páginas. Entonces como les dije al inicio de esta sección en el artículo, escribí que voy a hacer lo mismo con las categorías, por lo que no tenemos que repetir el mismo código. Trae la mesa exactamente cómo lo hicimos con las categorías. Podemos simplemente copiarlo y luego puedes ajustar esta tabla para que quepa en el producto. Por ejemplo, vamos a la lista de categorías y copiamos el contenido de la misma. Entonces los traeré a todos aquí. Y luego pegaré eso en el componente de lista de productos donde está vacío ahora porque está en ti. Y entonces obtendríamos algunos errores. Podemos arreglarlos en base a nuestra necesidad, y luego podemos mostrar los datos de los productos. Esta sería una forma más rápida. Quiero mostrarte cómo reutilizar el código y cómo puedes implementar cosas reutilizables. Y como les dije al inicio de esta sección, vamos a implementar las cosas nuevas como las categorías. Cómo podemos hacer unas categorías selectas, y también cómo subir imágenes del producto. Y también cómo podemos tener un editor HTML de cuadro de texto alcance para la descripción del producto. Entonces podemos enfocarnos en las cosas nuevas y las cosas anteriores que hicimos antes. Sólo podemos copiar pegarlos. Entonces como ven aquí que tenemos que empezar en el brindis, vale, que esos dos se mantengan igual, que es mostrar mensajes de confirmación sobre borrar o editar. Y aquí necesitamos tener el título para ser un producto. Y aquí lista de todos los productos. Y de nuevo, tenemos que sustituir. Tenemos un botón que es un nuevo, vale, no necesitamos nada aquí. Y también necesitamos reemplazar estas categorías variable, que se definiría en el constructor antes que el constructor aquí. Entonces puedo decir una variable que se llama producto, y este producto es solo una matriz vacía por ahora. Entonces podemos ahorrar eso. Y volvemos a ir a la plantilla HTML y luego necesitamos reemplazar esas columnas. Entonces por ejemplo, al principio tenemos el nombre del producto, si recuerdas. Y necesitamos también una imagen si recuerdas eso en nuestro back-end. Y entonces necesitamos tener también precio para que sea ordenable también. Por lo que necesito también ordenar por precio. Por lo que necesito tener un campo ordenable aquí. Y también necesitamos tener un stock, como cuántos de este producto en mi stock interno o en mi stock. Por lo que también podemos reemplazar aquellos con stock. Entonces necesitamos una columna también para esa categoría. Por lo que necesitamos aquí tener una categoría a la que pertenecen estos productos. Por lo que podemos tener una categoría y veremos cómo podemos conectar categorías con los productos como lo hicimos en el back-end. Y ahora necesitábamos aquí en el front end para mostrar el nombre de la categoría. Si recuerdas, se llenó el backend el cual se muestra cuando se crea este producto. Por lo que podemos decir creado en, por lo que sabemos que este producto en el que se crea el tiempo. Y también podemos ordenar en base a eso. No necesitamos ordenar por imagen y este campo o esta columna será seguir la acción como los botones de editar y eliminar. De acuerdo, pasemos al cuerpo. Entonces aquí tengo un producto. Te mostraré cómo podemos reducir este código al final de esta sección como opcional. Por lo que depende de ti si quieres refactorizar este HTML y reducido en este código. Por lo que no puedes dejar que así codificara duro la mesa. A algunas personas no le gusta. A ellos les gusta usar un bucles aquí. Por lo que pueden bucle en alguna constante o algunas columnas las cuales ya están configuradas EHR. Y luego pueden reemplazar o colocar sus columnas en base a esa matriz. Entonces lo que aquí ahora estamos difíciles de codificar las cosas. En el futuro, veremos cómo podemos refactorizar eso como opcional. Entonces, por ahora, puedo duplicar todo esto. Necesito aquí nombre del producto. Por lo que podemos tener aquí nombre del producto, producto, como dijimos imagen. Podemos tener así un producto, precio del producto. Por lo que tenemos aquí también precio. Y podemos tener un stock, cuánto en el contenido o contar en stock. Entonces recuerda, este campo debe ser exactamente el mismo que creamos en la base de datos. Entonces si vamos al cartero, si te acuerdas, si voy aquí y quiero mostrarte cuando enumere los productos, así que consigo los productos aquí. Tenemos aquí una rica descripción, imagen y la marca y también valoraciones de precio se presenta, descripción
del nombre, ¿te acuerdas? Por lo que aquí tenemos también algunos conteos en stock. Entonces esto lo que necesitamos que se llama conteo es dock. Por lo que estos campos deben ser exactamente los mismos que estamos usando en el front end. Entonces para no tener un conflicto de código, puedes usar un nombre diferente, pero mantengamos las cosas consistentes y más estables entre el front-end y el back-end. Entonces necesito un conteo en stock y también necesitamos la contigüidad. Y aquí tendremos también tema. Lo mostraremos más adelante porque como ven aquí que estamos bien consiguiendo esa categoría. Pero la categoría es objeto. Por lo que dentro de eso podemos decir categoría luego nombre. Pero quiero mantenerlo así ahora solo para enfocarme en ello y
mostrarles cómo realmente viene exactamente de la base de datos. Por lo que ahora necesitamos una categoría de producto y al final necesitamos una columna para creado en. Por lo que tenemos decir aquí, creado en. Y debe ser exactamente el mismo campo, exactamente cómo está aquí. Por lo que no se crea en su fecha, se crea. Entonces tenemos que poner lo mismo aquí, otras cosas que no necesitamos para poder eliminarlas. También tenemos que eliminar esta parte. No necesitamos color, pero los botones, necesitamos mantenerlos solo reemplazamos los métodos para poder decir un producto, lo
hizo producto, y además, necesitamos tener producto de actualización. Y aquí ya no tenemos ID de categoría, pero tenemos aquí un ID de producto. Otras cosas son exactamente las mismas. No tenemos que hacer nada. Vamos a revisar nuestra aplicación a menos que tengamos que ir al módulo app, te mostraré por qué. Por lo que acudimos nuevamente a nuestra aplicación y hacemos clic en los productos. Vemos que no tenemos ninguna ruta que coincida con los productos, por lo que necesitamos agregar rutas de la misma manera. Contamos con tres rutas, cuatro categorías, categorías categorías formulario categorías, ID de formulario para editar el producto o la categoría. Exactamente lo mismo. Tenemos que hacer lo mismo, pero tenemos que llamar productos de TI. Y aquí se forman productos. Y de nuevo, una forma de productos. Y el componente aquí que se
importa automáticamente es componente de lista de productos y forma de productos. Vamos a moverlas hacia arriba para estar con esa parte componente. Y luego podemos usarlos en la aplicación abajo. Por lo que no podemos tener aquí lista de productos. Y también necesitamos tener aquí categorías o productos de forma componente. Por lo que tenemos aquí productos de forma componente. Todo está bien. Ahorramos, vamos a la aplicación, no
tenemos ningún error. Verificamos aquí productos, vale, tenemos ahora todo y todas las columnas. Pero tenemos datos vacíos porque teníamos matriz vacía. Entonces lo que tenemos que hacer ahora es solo comprobar y agarrar los datos que vimos previamente en el Cartero y colocarlos en nuestra mesa y ver cómo podemos crear el servicio Exactamente. También como las golosinas y crear el modelo del producto.
105. Servicio y obtener productos de la base de datos: De acuerdo, en esta conferencia vamos a llenar la mesa que construimos en la conferencia anterior con los datos. Entonces como vemos aquí que tenemos los datos provienen de la base de datos y también del backend con algunos campos para todos los productos, como lista de productos. Y esta es la API que ya teníamos. Entonces, en primer lugar, necesitamos llenar esta matriz de productos, exactamente cómo lo hicimos con las categorías. Entonces primero necesitamos tener un servicio. Creo que el servicio, también lo
podemos colocar en la biblioteca de productos como lo hicimos con las categorías, por lo que podemos escuchar lo mismo. También podemos tener el servicio de categoría, pero podemos reemplazarlo y renombrarlo a servicio de producto. Por lo que tenemos aquí productos. Y entonces tendré aquí el archivo que se llama producto services.js. Y luego quiero tener que exportarlo a los módulos o al propio módulo de la biblioteca. Por lo que podemos tener aquí unos productos y necesitamos también tener un modelo. Por lo que el modelo será exactamente como los campos del producto. Entonces los voy a llenar rápido para no perder algún tiempo. Por lo que podemos tener aquí un archivo de producto. Podemos llamar a esto también un producto. Y voy a llenar toda esta información exactamente cómo las tenemos en el backend. Por lo que me gustaría también mantener este mismo nombre de los campos que viene
del back-end para mantener todo consistente y no tener conflicto con su desarrollador back-end. Entonces tenemos aquí el nombre, como una descripción de cadena es una cadena. Descripción también es cadena, como vimos en el backend, imagen, será una cadena la cual será la imagen principal del producto. Imágenes, que serán la menor de las imágenes del producto, que son como por ejemplo, las
usaremos para una galería como veremos en el futuro. También una marca que será de nuevo cadena. Y el precio es, debería estar aquí. Un número, no como una cuerda. Categoría será tipo de categoría. Por lo que importé aquí esa categoría de la categoría modelo y coloqué esta categoría como categoría. Por lo que contar en parada será un número y también una calificación será número. presenta el número de opiniones. Por lo que podemos mostrar el producto en la página principal o no, y será un Booleano. Y luego la fecha creada, que será una fecha de cadena. Y también aquí necesitamos importarlo o exportarlo. Por lo que necesitamos exportar este modelo para poder verlo en otros lugares de nuestro proyecto. Por lo que podemos levantar también productos. Por lo que tendremos producto y así categoría. Pero aquí tenemos que renombrarlo no productos, sino producto porque estamos dando una clase solo para un producto. Por lo que tendremos aquí un producto y categoría. Por lo que ahora iremos al servicio y renombraremos todo. Entonces primero necesitamos tener productos aquí. Y además, será la misma URL porque estamos diciendo la misma URL para el back-end. Y también aquí tendremos un producto para el prefijo o sufijo de esta URL. Y luego comentemos todas las cosas para que podamos empezar una por una. Entonces lo que necesitamos ahora, tenemos productos, así que hagamos, obtengamos productos. Y será exactamente lo mismo, pero lo que se le devolvió matriz de productos que no
iban a devolver para nosotros sólo categorías, sino que va a devolver un productos. Por lo que tenemos aquí un producto y el producto. Y entonces no necesitamos estas categorías para
poder eliminarlo porque ya no se usa. De acuerdo, entonces ahora nuestro servicio está listo. Simplemente necesitamos ir al nivel de aplicación y luego podemos usar este servicio. Por lo que iré aquí a la aplicación, a la lista de productos. Y como recuerdan, lo
hicimos también en categorías. Entonces hagámoslo rápidamente. En primer lugar, necesito llamar al servicio de producto. Entonces diré aquí producto o servicio de producto privado, que será de tipo productos servicio, como ves, ya se sabe, entonces y se importa del espacio de trabajo y el nombre que tenemos aquí un problema, Es ES pelusa tema, por lo que necesitamos llamar a esto como admin y luego creamos un método. Podemos llamarlo este punto obtener productos. Y vamos a implementar este método. Entonces voy abajo, digamos privado, subrayado obtener productos. Y en este buen producto, voy a decir este punto servicio de producto que obtiene productos como vimos anteriormente, después suscribirse a esta biblioteca o a esta observable como vimos. Y luego los productos regresarán en la devolución de llamada de la suscripción. Y entonces puedo decir este punto productos, la variable que definí aquí será también de productos. Por lo que estoy a un lado tinta, este producto a los productos que regresaron del backend. Entonces después de eso, Vamos a guardarlo y tratamos de actualizar nuestra aplicación. Y vemos que tenemos todos los datos que necesitamos. De acuerdo, no todo es perfecto, pero vamos uno por uno. Está bien, El nombre está bien. El de la imagen, necesitamos reemplazar la imagen. Como veremos en la próxima conferencia, el precio está bien, bien. Stock, el número en stock está bien. Ambas categorías son objeto. Entonces necesitamos encontrar una forma de por qué viene así. Entonces si quieres saber qué está regresando del back-end, en el front end, no
tienes capacidad de usar cartero, entonces puedes ir a la red y revisar tus llamadas. Entonces por ejemplo, aquí he llamado a la categoría o productos. Entonces productos, conseguí todos los productos. Aquí. Vuelvo aquí, y veo que la categoría es, objeto, no es como un campo. Y esta categoría, como
recordamos, hicimos población para ésta. Entonces aquí tenemos categoría y luego su nombre. Por lo que en el HTML de nuestra aplicación o de la plantilla misma, tenemos que decir que no vamos a tener la categoría única sino nombre de punto de categoría. Entonces por eso te estoy diciendo que mantengas esta misma tipeando. Ahora bien, no puedo ver categoría nombre de punto y no tengo ningún error ni ningún error. Y como vemos aquí, esa categoría vino exactamente como queremos. De acuerdo, ¿qué pasa con la fecha? La fecha, como vemos aquí, está formateada a partir del formato que proviene de la base de datos. Para arreglar este formato, podemos usar algo en Angular llamado la tubería. Y esta pipa, si la usas, nuestra búsqueda de ella en biblioteca Angular, verás cómo la usamos. Entonces si bajas, puedes ver las opciones o el ejemplo cómo podemos usar eso. Tienes que proporcionar una cadena de fecha y luego u objeto. Y luego dices Este signo y luego fecha, y luego especificas la opción. Hay muchas opciones para formatear las fechas en Angular, por lo que todas se enumeran aquí. O también puedes usar uno de estos formatos 3D como día largo, día
completo, tiempo corto, tiempo medio. Hay muchas opciones para mí. Voy a usar este que se llama gráfico. Entonces, ¿cómo podemos usar eso? Entonces podemos ir aquí y luego ponemos esta columna y luego podemos decir, y quiero tener una fecha con formato corto. Y después guardamos y probamos eso en nuestra aplicación, vale, los juegos de formato de fecha, realmente perfectos. De acuerdo, entonces de esa manera, hemos formateado la fecha. La próxima conferencia. Será, como les dije,
mostraremos la imagen que viene aquí desde el back-end. Entonces nos vemos en la próxima conferencia cómo implementar esta imagen.
106. Muestra la imagen del producto en la imagen en la tabla: Es muy útil que el usuario pueda ver también la imagen de su producto en la tabla. Entonces es muy sencillo cómo podemos hacer eso. Si vamos a los campos, recuerdas que tenemos la imagen del encabezado y luego estamos agarrando los datos de la imagen. Y la imagen viene como tú eres L, ya que vimos cómo viene del backend. Y si queremos tener una imagen aquí, sólo
reemplazamos esta parte aquí por imagen. Y esta imagen tendrá fuente y también alternancia cuando no pueda visualizarse. Entonces si queremos usar la imagen del producto, solo
necesitamos hacer eso y colocar aquí la imagen del producto. Por lo que va a funcionar. Pero prefiero siempre dos cadenas que para que no necesites usar esos corchetes aquí. Por lo que no necesitas usar esos corchetes, por lo que puedes reemplazar eso por corchetes como este. Por lo que esto será como el enlace de forma o enlace de dos vías en Angular. Por lo que dirá que la entrada de la imagen o la imagen será una fuente y aceptará variables. Por lo que aceptará variables angulares, no, por ejemplo, fortalezas, como sabemos en el HTML normal. Por lo que aquí tenemos la imagen del producto. Cuando ahorremos, entonces veremos que obtenemos las imágenes. Pero como vemos aquí, son muy grandes porque no están estilizados de la manera correcta. Entonces lo que podemos hacer, también
puedes crear algunas uñas. Para que puedas subir imágenes pequeñas. Por lo que necesitas en el back-end para crear un campo que se llama miniatura. O puedes hacer también aquí, redimensionar por estilo. Entonces sólo tienes que ir aquí y decir estilo. Por ejemplo, tendrá un ancho que será del 100%. Entonces voy con esta manera, que es una muy sencilla, por supuesto. También puedes subir unas pequeñas imágenes donde hay unos clavos con unos tamaños fijos y los verás cómo se veía aquí mismo. Entonces por ejemplo, tengo este producto con muy alto, Así que necesito mantenerlo de esa manera. Pero también se puede crear unas imágenes cuadradas. Entonces esto es sólo un ejemplo para ti. Puedes hacer lo que sientas y perfecto para ti, para tu pantalla de mesa.
107. Construir la plantilla de formas de productos: De acuerdo, en esta conferencia vamos a ver cómo
podemos crear la forma para agregar un producto. Entonces si recuerdas que teníamos la misma categoría, estamos dando click en ti, entonces vamos a la forma de categorías y que estarán aquí formulario para agregar un producto. Entonces no podemos usar lo mismo. Podemos empezar como plantilla desde el formulario de categorías. Por lo que podemos copiar este,
las categorías se forman y se pegan en forma de productos también. Pero necesitaremos un campo diferente. Arreglaremos todos los errores que lleguemos aquí. Y además utilizaremos un nuevo control como un interruptor,
como un cuadro de texto enriquecido, área de
texto y selector. Así es exactamente como viste en la demo al inicio de las secciones del panel de administración. Por lo que tendríamos el mismo brindis que será la conformación para agregar producto o actualizar un producto. Y así aquí vamos a tener un guardia. Y el guardia tendrá un encabezado, y este encabezado estará aquí, producto. Y así aquí nuestro producto. Y aquí tenemos productos también. Entonces lo voy a hacer como un rápido porque hemos explicado todo en las categorías. Por lo que teníamos aquí también el modo de edición. Por lo que necesitamos definir una variable que se llama Modo Editar. Y este modo de edición tendrá, por ejemplo, al principio del valor falso, tenemos una barra de herramientas y la barra de herramientas tendrá también, izquierda y derecha. Tendrá así el modo de edición, actualizar o crear un botón para onsubmit y un botón para on cancel. Exactamente igual como lo hicimos con las categorías. De acuerdo, venimos ahora al trabajo serio. ¿ Dónde está, por ejemplo, el grupo de formulario? Por lo que necesito definir también, un ex grupo en este componente, como lo hicimos con las categorías. En este caso, necesitamos definir otra variable u otro miembro de la clase, que se llama forma. Y esta forma tendrá un tipo de grupo de formularios. Y para construir este grupo de formularios, necesitamos usar un servicio que se llama constructor de formularios. Por lo que tendremos un privado aquí, y privado será un constructor de formularios. Y este constructor de formularios es del constructor de formularios tipo. Y aquí podemos tener un método privado. Podemos definirlo. Entonces podemos ver estos puntos en forma por ejemplo, no
hicimos eso en la categoría, pero les estoy mostrando cómo avanzar paso a paso. Entonces aquí estamos poniendo todo en y g en cualquiera, como al inicializar el componente. Cuando haga clic en Agregar nuevo, entonces se inicializará este componente. Entonces estoy haciendo aquí la forma, pero ahora lo estoy haciendo más comprensible. Por lo que lo agruparé en un método y lo pondré que se llama en él la forma. Entonces tenemos que definir un método privado al cual se llama en su forma. Y dentro de esta forma init, necesitamos tener que construir la forma misma. Por lo que yo diría este grupo de puntos constructor de forma punto. Y entonces comenzaremos a construir nuestro grupo. Entonces tenemos aquí para decir que esta forma es igual al grupo que vamos a construir ahora. Por lo que este grupo integrantes serán exactamente los mismos de los campos del producto en sí. Entonces como recuerdan, teníamos un nombre, tenemos el precio, teníamos, por ejemplo, categoría, también teníamos, imagen e imágenes. Yo los voy a enumerar, todos ellos aquí y luego los vamos a explicar rápido. Entonces no quiero teclear para no tener tiempo para ti. De acuerdo, así que como ven aquí, tenemos el nombre que se requiere y también marca también se requiere. También el precio también se requiere cosa categoría en sí, que estará viniendo también del backend o cómo podemos publicarlo en el back-end. Y será un selector, como una lista que puedes seleccionar a través de ella y buscar una categoría, como veremos más adelante. Y contar en la descripción de stock, descripción
rica la cual no se requiere imagen. Creo que podemos hacerlo ahora para como autor requerido y también se presenta. Podemos ponerlo también, no requerido. Entonces, al mismo tiempo, necesitamos construir esos elementos o controles de este formulario en la plantilla. Entonces de la categoría ya teníamos nombre, por ejemplo, pero no necesitamos icono, no necesitamos color. Tenemos que reemplazarlos por los componentes adecuados. Entonces por ejemplo, nombre sería permanecer igual y también marca. Será así como una entrada de texto y podemos reemplazar eso también. Entonces podemos decir marca aquí y también una marca aquí. Y así podemos tener aquí todo como marca. Y aquí necesitamos crear como, por ejemplo, el atajo tal como lo hablamos anteriormente. Entonces podemos hacer eso así. Decimos obtener forma de producto y este punto forma de puntos controles. Y entonces vamos a tener aquí, no ponerse bien son cuatro, pero forman productos. Entonces esto es como nuestra plantilla, así que tenemos que usar esa plantilla cada vez que creamos. Y uniforme. Te expliqué todo a detalle, cómo creamos cada paso de esa forma en la sección de categorías, bien, colocamos esto con una marca y además, necesitamos un precio. Por lo que permitirse precio, no será un cuadro de texto, será un número importante. Entonces un número de entrada, como ves aquí, podemos usar algo llamado número de entrada. Y este número de entrada de Prime NG es tan grande. Te está dando muchas, muchas, muchas opciones. Voy a usar este que se llama sin agrupar. Entonces primero necesitamos importar el módulo. Como siempre, voy al módulo de aplicación, importo el módulo de número de entrada, y luego lo vuelvo a colocar aquí en nuestros módulos u x. Y entonces podemos usar o usar ejemplos, por lo que podemos decir fuente. Y si vamos a ordenar, vamos a ver sin una agrupación, por lo que necesitamos usar esta. Por lo que volver a nuestra plantilla. No vamos a necesitar un color, pero vamos a necesitar aquí un precio. Entonces, y como acordamos antes, ¿no vamos a usar ng-model como enlace de
dos vías como entrada y salida al mismo tiempo? No, porque tenemos aquí un control de formulario y entonces éste será un nombre de control de formularios ya que será un precio y la etiqueta será un precio aquí. Bueno aquí precio y necesitamos también precio aquí. Entonces cuando vayamos a comprobarlo, veremos que todo está correcto. Y tiene aquí algo llamado ID de entrada. Podemos copiarlo y hacerlo como precio también. Y se requiere este campo. Por lo que también necesitamos agregar algún aviso de validación
al usuario cuando pone o no pone ningún valor dentro de él. Por lo que diremos este producto formulario dot price inválido y se envía, entonces muéstrame error que se requiere precio. También esto se presenta variable. Podemos definirlo también en el componente. Por lo que decimos aquí se somete al principio es un falso. Entonces veamos ahora qué tenemos en el front end. Entonces después de guardar todo, voy al frente y de nuevo, voy a ver ese producto publicitario. Tengo que crear botón, Botón Cancelar. Contamos con nombre-marca y precio. Y como ven aquí, el usuario no puede poner ninguna letra, pero sólo puede poner un número. Por lo que aquí necesitamos tener una categoría, categoría. Prefiero usar la lista, como te mostraré más adelante, un desplegable y este desplegable, También viene como filtro de componentes, como veremos en la próxima conferencia. Sentimos los simples. Por lo que voy a añadir también el conteo es tok y descripción. Por lo que contar en stock volverá a ser un número. Y este número será lei, no cerca de ellos. Será en una nueva línea. Por lo que pongo romance también para crear una nueva grilla que estará bajo esta parte. Entonces como ven aquí, los
tenemos todos agrupados en esta cuadrícula. Pero ahora podemos crear una nueva, como una nueva fila. Y esta fila, porque esta forma campos. Por lo que podemos copiar esa misma oferta, el precio y decimos el conteo en stock. Por lo que los sustituí aquí. Por lo que ahora tenemos contar en stock para todo, y todo se define como número de entrada. Entonces cuando nos
refresquemos, veremos que nuestro componente se refresca con un culto en stock, pero está lleno. Por lo que también podemos definir un forro pequeño, pequeño. Por lo que podemos decir aquí sólo quiero la columna 4. Por lo que necesito tener esto como columnas de formulario como vemos aquí. Pero además, se puede definir un fideo de manera diferente. que no tengas que crear una cuadrícula, pero también puedes decir que yo también puedo tener una columna, pero va a estar en riqueza. Aquí puedes tener cuatro y 12, pero cuando no quepa, irá automáticamente a una nueva línea. Usted ve aquí. Y es como si definiéramos una nueva fila. Entonces esto lo que voy a hacer con una descripción. Entonces tendremos aquí 12 columnas, cuatro columnas para el culto es hablar. Y además, tendremos aquí cerca para las categorías. Por lo que podemos sentir eso también, pero no usaremos el número de entrada cuatro categorías. Usaríamos el desplegable como veremos en la próxima conferencia. Por lo que podemos renombrar esta parte como categoría y dejarla tan vacía como ven aquí, sustituí todo como categoría. Pondríamos aquí la entrada de la categoría o el desplegable en celda, como veremos en la próxima conferencia. Y así aquí tengo una descripción y descripción será un área de texto, y podemos agregar también eso. Entonces, vamos a estar seguros de que todo está bien. Tenemos tu nombre, el conteo de premios de marca sigue siendo categoría vacía. Nos sentiremos con su categoría y después tenemos una descripción. Y la descripción será un área de texto. Y esta área de texto, también la
podemos encontrar. Entonces cuando vaya al área de texto de entrada, veremos módulo de área de texto de entrada. Podemos importarlo también y colocarlo aquí con nuestros módulos. Y tenemos aquí los módulos UX también, y lo importamos. Y luego veremos las opciones de. Por lo que aquí tenemos una etiqueta de flujo. No, no necesitamos eso, aunque el tamaño, podemos usar el predeterminado. Entonces puedo decir que tal vez podamos usar este. Vuelve a nuestra plantilla y coloca aquí la descripción. Y le damos un nombre como un nombre de control de formularios, como lo hacemos siempre para no perdernos eso. Por lo que tenemos aquí el nombre de control de forma de área de texto será la descripción en sí. Entonces guardamos eso, acude a nuestra aplicación. Veremos que tenemos una descripción. Aquí tenemos la descripción. También puedes definir la altura para ello. Por ejemplo, esto es como pequeño. Puedes hacerlo más grande. Creo que Prime NG proporcionan que como ven aquí, tenemos unas filas y columnas. Por lo que también puedes definir eso. Por lo que podemos agregar que dos filas y descripción que podemos hacer crece como siete. Por lo que ahorramos. Y volveremos a la solicitud. Agradable. Tenemos aquí las filas, y después de eso tendremos una descripción de alcance. Alcanzar descripción, vamos a explicar también termina conferencia separada porque es un pico. Podemos agregar aquí también está el campo destacado. Por lo que si recuerdas, podemos usar es bandera destacada. Por lo que podemos usar también un interruptor, y esto se encuentra aquí se llama interruptor de entrada. Por lo que podemos definir nuestro producto si está destacado o no. Por lo que también podemos importar ese módulo. Ve aquí, importa el módulo también, y ve a importar interruptor. Entonces podemos colocar esto aquí. Y entonces podemos usar las entradas del interruptor de entrada, que serán exactamente las mismas y ésta. Por lo que tendremos una nueva fila. Podemos añadirlo tras categoría, como cerca de su categoría. Por lo que podemos agregarla aquí. Por lo que tenemos aquí esa categoría tenemos también otra columnas peform. Tenemos aquí, cuatro columnas y reemplazamos todo por sus características. Por lo que necesitamos especificar que se presenta se requiere para que no necesitemos la validación. Bastará así. Y entonces tenemos el control en sí. Podemos copiarlo y luego colocarlo aquí. Por lo que tenemos aquí el interruptor de entrada, y podemos quitar este modelo NG porque estamos usando el nombre del control de formulario. Siempre, hay que comprobar si este apoyo eso. Entonces exactamente su nombre de control de formulario de soporte para nuestro componente porque tenemos construyendo estos controles dentro de un grupo y no puedes usar ng-model dentro del grupo de formularios, lo contrario obtendrás error. Por lo que es mejor usar un nombre de control de formularios en este caso para formularios reactivos o directivos. Entonces vamos a comprobar que f es todo queriendo. Agradable. Tenemos aquí se destaca nombre, marca, y descripción. En la próxima conferencia, les mostraré cómo podemos agarrar categorías y cómo agarraremos los datos de la base de datos también. Por lo que veremos aquí las categorías reales que aquí se enumeran.
108. Desactivo para las categorías de productos con filtro: De acuerdo, en esta conferencia vamos a ver cómo
crear el menú desplegable de categoría con un filtro. Por lo que puedo filtrar y seleccionar las categorías que quiero y que se almacenan en mi base de datos. En primer lugar, necesitamos tener un componente desplegable. Está disponible también en NG prime como un prop down si lo ves aquí. Y entonces tendrás muchos ejemplos. Seleccionemos el ejemplo más simple. Pero primero necesitamos importar primero el módulo de bajado. Entonces vamos aquí e importamos el módulo desplegable y luego lo agregamos a nuestro código. Ya lo he hecho para que podamos seguir adelante e ir al ejemplo. Por lo que tenemos aquí una p opciones desplegables. Y algunas ciudades, como ciudades vendrán como del backend. Y nuestro backend serán sus propias categorías. Entonces vamos a copiar esta parte y vamos aquí y pegarla dentro de nuestra etiqueta. Entonces aquí hemos creado ya esa categoría, y tenemos aquí su categoría se requiere y luego la pegamos aquí, pero no tenemos aquí opciones ni ciudades. Contamos con categorías. Por lo que esa lista de categorías se colocará en la entrada, que se denomina opciones. Por lo que ese desplegable acepta entrada llamadas opciones, que serán los datos los cuales se llenarán en el abandonado. Y también el modelo. No necesitamos modelo NG, como dijimos anteriormente, sólo
necesitamos tener nombre de Control de Formulario. Este nombre de control de formulario será categoría. Entonces como vemos aquí en este ejemplo que definió una variable llamada ciudades. Y las ciudades tienen array, nuestra matriz que es nombre y código. Y por supuesto puedes definir cualquier objeto o cualquier estructural que desees. Entonces vamos a hacer eso primero. Definamos la categoría que será categorías array. Definamos categorías que serán una matriz. Entonces por ahora será una matriz vacía. Y como lo hizo aquí, tenemos en ciudades como un array codificado duro, pero lo agarraremos de la base de datos. Para eso, necesitamos el servicio de categoría que creamos previamente, y ahí tenemos un método que se llama GetCategories. Entonces primero, después de eso, después de reinicializar la forma, decimos este punto obtener categorías. Por lo que obtendremos todas las categorías de la base de datos y las
mostraremos para que el usuario vea cuál es la adecuada para él. Entonces tenemos aquí un método privado. Nosotros lo llamamos getCategories. Y aquí vamos a utilizar el servicio de categoría. Por lo que necesitamos también llamar al servicio de categoría. Por lo que decimos aquí servicio de categorías privadas. Y este servicio de categoría será tipo de categorías servicio, que ya se define aquí. Por lo que podemos importarlo automáticamente. Entonces aquí tenemos servicio de categoría, y luego diremos este punto categoría de servicio punto obtiene categorías. Y luego como recuerdan, tenemos aquí como suscriptor, por lo que podemos suscribirnos a él. Y luego vamos a conseguir en la devolución de llamada las categorías. Y luego abrimos y una función. Y entonces decimos que estas categorías de puntos serán categorías. Entonces cargamos la matriz de categorías aquí. Entonces diremos que categorías array consiguió campo. Entonces vamos a guardar todo y a probar eso. Ya veremos eso realmente, tenemos toda la lista. Entonces todo está bien, está funcionando Perfecto. Entonces tenemos aquí ahora las categorías que ya creamos, y luego las tenemos cuando creamos una nueva categoría para que el usuario pueda seleccionar entre ellas. Pero agreguemos más característica como podemos agregar un filtro para que el usuario, si tiene una lista larga aquí, no tenga que buscarla manualmente, puede escribir algo y obtendrá los datos filtrados. Entonces no podemos hacer eso muy fácilmente como vemos en el ejemplo que tiene aquí, algo así como para filtrar. Y una de ellas es el icono filtrante y claro. Entonces la diferencia de esto que agregó opción y otra entrada para ese filtrado, que se llama filtro a través. Y dijo que filtró por entonces filtrar por nombre. Para que también pueda filtrar por algo. Se puede filtrar por nombre, por ID. Por lo que el usuario, cuando tecleó algo, los datos serán filtrados por ese valor. Y además, ha creado un tenedor de plaza. También podemos copiarlo. Por lo que primero podemos copiar esta parte e ir a nuestro formulario de productos y agregar estas propiedades. Por lo que tenemos aquí subastas nombre de control de formulario y se filtra es a través de filtro por nombre y luego mostrar claro a través de marcador de posición seleccionar categoría. Entonces vamos a guardar eso, pruébalo. Y luego abrimos, bonito, tenemos el filtro listo. Entonces tenemos aquí para móvil, quiero autos. Entonces ven que obtenemos los resultados de inmediato.
109. Editor de HTML para descripción detallada del producto: En ocasiones necesitamos mostrarle al usuario algún detalle y libertad para crear su detalle de producto. Como vemos aquí que también podemos con Prime NG, entérate de algún editor que se llama editor de caja de ductos alcanzada. Esto llegó al editor de Xbox. También puedes darle estilo a tu texto. Entonces, por ejemplo, quiero tener encabezados. Yo también quiero tener texto subyacente para que podamos darle
al usuario la capacidad de colorear y hacer muchas cosas en el texto y la descripción detallada del producto. De lo contrario, terminaremos en Agregar Campo por cada parte especial o masticar que el usuario tenga que ingresar. Pero ahora podemos darle la libertad al usuario con este gran cuadro de texto de alcance. Entonces, agregémoslo a nuestro formulario de producto y veamos cómo trabajar con él. Entonces cuando vamos a la documentación de este editor, también
nos desplazamos hacia abajo. Necesitamos tener un módulo de editor. Y este módulo editor vamos e importamos en módulo de
aplicación como lo hacemos siempre para cada módulo en energía prime. Y luego después de hacer eso, necesitamos importar o usar un componente que se llama editor. Y aquí el texto, que será como HTML y un estilo si tienes algún estilo específico para ello. Y luego devuelves ese texto en tu backend o a tu API cuando envías un nuevo producto. Pero el que queremos no es con ningún modelo, sino con nombre de control de forma, como les dije, estamos usando formas reactivas. Por lo que vamos aquí de nuevo a nuestra forma. Crearemos un nuevo campo y nuevo en vivo. Le daremos una clase. Y esta clase será también 12 columnas con etiqueta y será el editor dentro de ella. Por lo que creé eso ya aquí. Por lo que tenemos aquí una rica descripción como exactamente cómo la hemos definido aquí en el formulario. Y también tenemos el propio editor y se alcanzará el nombre de Form Control descripción. Y creé una etiqueta que se llama detalles del producto. Entonces cuando guardemos eso y vamos a nuestra aplicación y veremos que
nos falta algo porque veremos que esta parte no está funcionando para nuestra aplicación. En primer lugar, tiene una dependencia a la que se le llama una plumilla. Y aquí hay una gran oportunidad para que veamos cómo podemos incluir bibliotecas externas, bibliotecas JavaScript a aplicación Angular. Entonces si bajas aquí a la documentación al final, verás que esto es una dependencia. Quill editor es un editor el cual puedes instalar con npm install, y luego necesitas importarlo. Entonces primero vamos a instalar esta parte. Entonces vamos, abrimos una nueva terminal y luego decimos npm instalamos Quill safe. Y después de que se hubiera instalado con éxito, necesitamos importar las bibliotecas. Por lo que primero necesitamos importar script en archivo Angular JSON. Si recuerdas, tenemos un archivo JSON angular el cual estamos configurando las aplicaciones dentro de él. Entonces vamos a configurar la obligación admin, no otras aplicaciones, sino sólo aplicación admin en scripts. Podemos sumar esta línea. No tenemos que ir a dar un paso adelante porque tenemos el módulo nodo en el mismo nivel de Angular JSON. Por lo que no tenemos que subir un nivel ni dentro de alguna carpeta. Y además, hay dos estilos archivo que necesitamos también para importarlos. Entonces aquí, después de que tengamos los estilos, después de eso estilos, podemos importar este núcleo CSS y así el otro que se llama Snow CSS. Entonces después de haber guardado todas las cosas que los cambios no surgieron efecto hasta que reinicies tu aplicación. Tenemos que reiniciar el servidor porque tenemos JSON angular cambiado. Y aquí voy a reiniciar mi aplicación. Está bien, se reinició pero sigue quejándose de algunas flechas que no arreglamos previamente. Entonces, arreglémoslos y hagamos que todo funcione. Entonces tenemos un problema de que esto onsubmit y onCreate o consejero propio no están definidos, por lo que necesitamos definirlos. Por lo que voy a copiar esta parte, ir al componente en sí, código de componente. Y voy a decir en presentar uno. Y así tenemos en cancel. Por lo que definimos ambos métodos. Ya no tenemos errores. Después volvemos a nuestra solicitud. Verificamos cómo tenemos, cómo son cada editor. Es muy grandioso. Tenemos ahora todo. Puedes teclear, todo lo que quieras. Por lo que puedes tener que está estilizado en su front-end ya como usuario, exactamente tenerlo al front end. Por lo que veremos más adelante cómo podemos mostrar este HTML en la aplicación front end en cualquier tienda. Por lo que el usuario tiene libertad para escribir lo que quiere aquí. Y luego veremos más adelante cómo podemos mostrar este HTML que aquí se muestra, o que el usuario utilizó en el detalle del producto.
110. Subir campo de la imagen del producto con visualización en miniaturas: En este curso, y para el producto, tenemos dos tipos de imágenes. En primer lugar, la imagen principal, donde mostrará la imagen del producto. Y además, tenemos una galería. En la galería donde los usuarios cuando va al detalle del producto, no puede ver múltiples imágenes del producto. Entonces primero vamos a crear ahora la imagen principal. Y no sólo esto, veremos también una pantalla. Cuando el usuario cargue una imagen
, dirá una pequeña pantalla. El imagen que subió para asegurarse de que todo se suba bien para la subida de la imagen, no
vamos a usar nada específico. Vamos a utilizar HTML estándar. Entonces antes que nada, voy a tener un div como este. Será bajo la descripción también. Y aquí, dentro de esto tendré también una etiqueta y la daré, por ejemplo, como nombre, imagen principal. Y entonces tendríamos una entrada, y esta entrada será tipo de archivo. Por lo que tendremos aquí un tipo que se llama archivo. Por lo que puedo subir archivos a través de esta entrada. Y para peinarlo, veremos cómo podemos hacerlo más hermoso. Agregaremos alguna clase y luego diremos que este tipo de archivo, es HTML estándar, está aceptando toda la imagen. Por lo que no podemos aceptar ningún otro archivo. Aceptaremos solo imágenes. De acuerdo, bueno, ahorremos y probemos lo que tenemos aquí. Por lo que después de que se actualice la aplicación, veremos que aquí tenemos un campo. Pero mira, es feo. No tiene estas imagen principal y ya sabes, como la etiqueta no está en la parte superior y la carga de archivos estará aquí. Por lo que te aconsejo que agregues una clase para esa entrada, que se llama texto de entrada. Eso lo obtuve al inspeccionar las entradas Prime M y G. Y me dieron esta clase. Por lo que aquí tenemos p texto de entrada cuando guardes, tendrá más estilo de vida. Estaría ubicado exactamente debajo de la etiqueta y todo saldrá bien. Está bien, bien. Por lo que vamos a implementar la subida. Entonces cuando selecciono alguna imagen de mi computadora, entonces necesito tener alguna pantalla aquí que después de subir la imagen, se mostraría aquí. Entonces cómo podemos hacer eso, vale, en primer lugar, necesitamos detectar la imagen o el archivo que se sube. Entonces diré aquí que cuando cambie este,
este campo GF cambie, entonces tendré un método al cual se llama en la subida de imágenes, por ejemplo. Y esta subida de imagen pasará para mí los datos
del archivo que subí a través de una valiosa variable add específica, cual se llama evento. Y hay que dejar atrás a estos dólares. Entonces obtendrías los datos de la manera correcta de la imagen. Por lo que podemos implementar este método. Vamos al archivo TypeScript y luego diremos que aquí
tenemos en subida de imagen y esto tendrá evento como vimos. Y entonces vamos a tener el propio archivo y exhibido en el velo ASAM, la miniatura misma. Será bajo esto, por ejemplo, bajo esta entrada, tendremos como un div, como siempre como div pequeño. Este div tendrá dentro y la imagen. Entonces podemos tener aquí un div, y dentro de este div tenemos imagen. Y la fuente de esta imagen será la imagen que subimos. Por lo que necesitamos llenar una variable que se llama visualización de imagen por ejemplo. Y esto será como entrada para la imagen. Por lo que debemos ponerlo entre paréntesis. Por lo que necesitamos definir una variable que se llama visualización de imagen, cual tomará los datos del archivo que cargamos y los colocamos dentro de esta imagen. Entonces hagámoslo. Definimos una variable, y esta variable puede ser una cadena o un tipo que se llama buffer array. Y te diré más tarde qué es el buffer de matriz y por qué tenemos eso. Por cierto, vamos a arreglar esta pelusa que tenemos aquí debe tenerla como admin porque no podemos nombrarlo así. Por lo que tenemos admin products form. De acuerdo, y luego en la subida de imágenes cuando ocurriera este evento, recibiría un archivo del evento, y este archivo se definirá. Yo lo conseguiré del evento. Entonces aquí tenemos, por ejemplo, evento. Pero vamos a ver primero qué evento está regresando para mí. Entonces cuando vaya aquí, puedo consola log. Yo siempre quiero rastrear las cosas que necesito para entender por qué voy a hacer las cosas. Entonces vamos a guardar eso e ir a nuestra aplicación e intentar subir una imagen. Entonces tenemos aquí una imagen, la tengo en mi PC, y luego voy a ver ese evento viene con un montón de propiedades. Y esas propiedades que necesito exactamente es Dios bueno. Y luego algo llamado archivos. Y estos archivos contendrían mi archivo el cual subí. Entonces volvamos atrás. Podemos quitar esto. Ya no lo necesitamos. Podemos entonces definir una constante como vimos un archivo. Y esta constante tendrá objetivo de punto de evento. Y luego estos blanco, ya que vimos que también tiene dentro de él archivos. Y estos archivos, necesitamos agarrar sólo el primer elemento porque viene siempre con array. Y necesitamos agarrar sólo el primer elemento de esa matriz, como vimos aquí. Entonces aquí tiene un rayo y sólo necesitamos el primer elemento. Entonces como siempre, si hay algo dentro del archivo, entonces necesitamos hacer algo. Si no, entonces no hacemos nada. Entonces tenemos que asegurarnos de que el expediente, lo
tenemos bien. Entonces necesitamos poner el contenido del archivo dentro de nuestra variable, que se llama vista previa de imagen como un dato. Entonces cómo podemos leer estos datos en JavaScript, hay algo llamado FileReader. Y este lector de archivos, podemos leer datos a través de él. Por lo que podemos crear una nueva clase de FileReader. Y este lector de archivos a través de él, puedo leer siempre los datos que quiero. Entonces cómo podemos leer, podemos decir lector de archivos, leer como URL de datos, y luego pasas el archivo que quieres. Por lo que aquí hemos subido el archivo, lo tenemos. Después creamos un FileReader y encontramos lector ha leído como URL de datos, el archivo en sí. Ahora tengo ese archivo en sí como un dato dentro del lector de archivos. Cómo podemos decir algo como esta vista previa de imagen de punto o visualización de imagen tendrá los datos en sí. Por lo que este FileReader vienen siempre con un método que se llama onload. Entonces cuando cargamos nuestros datos a este lector de archivos, hagamos algo y esto, podemos definirlo. Tiene una devolución de llamada, pero de diferente manera, tiene un método. Y luego esta devolución de llamada, lo llamas así. Y dentro de este método, puedes hacer lo que quieras. Es evento. Por lo que no podemos hacer esta visualización de imagen de punto y luego el resultado de punto de FileReader. Y dentro de este resultado tendremos nuestros datos de archivo. Entonces con esta forma, siempre se
puede leer el archivo como un dato, ponerlos en alguna variable y pasarlos a la entrada de imagen o a la etiqueta HTML de imagen. En ocasiones si pones esto después de
leer los datos o el FileReader, no funcionará. Por lo que es mejor ponerlo ante él. Entonces el evento se ejecutará después leer los datos porque sabrá que hay
algo en lote porque es evento y debe definirse antes de leer los datos. Entonces vamos a guardar eso y probarlo. Quizás podamos intentar ahora subir algún archivo. Por lo que voy aquí otra vez a mi expediente. Selecciono un archivo que ya tengo. Como ven aquí, tengo 0 es indefinido. ¿ Por qué? Porque tengo aquí tema. Es archivo no archivo. Por lo que debe ser archivado como recuerdas, nuestra matriz. Entonces tuve un error aquí y lo arreglé. Volvamos a subir el archivo. Volvemos aquí, ya veremos, genial, tenemos la imagen se sube. Entonces como recapitulación, recapitulación
rápida, subí el archivo. Creé un FileReader, que viene JavaScript estándar. Vamos a la aplicación web leer el contenido de los archivos. Entonces aquí cargué el archivo, que subí al FileReader y luego lo asigno a la pantalla de imagen. Pero como ves, es una gran imagen. Entonces tal vez si subo imagen más grande, tomará más grande que el espacio. Entonces limitemos esta imagen. Entonces iría aquí, tal vez pueda hacer algunas cosas usando mi experiencia en energía prime. Yo le daré, por ejemplo, a esto una clase. Y esta clase se llamará columna P, por ejemplo, a dos columnas. Y esta imagen tendrá estilo, que será como ancho 100%. Por lo que sería el 100% de su padre. Entonces, vamos a guardar eso. Vuelve de nuevo a nuestra aplicación. Y luego tratamos de subir su archivo. Otra vez. Nosotros vamos por aquí. Chicos, tenemos un muy bonito, así que pongamos un poco de espacio entre la imagen y el InputField porque es feo así. Según recuerdas el, nuestras clases, clases prime end, podemos tener margen, inferior, margen, superior. Para que podamos hacer lo que queramos del margen. Por lo que quiero poner margen top dos. Y también si notan que hay, porque usamos esta columna, tiene algo de relleno. Por lo que podemos hacer también P relleno izquierda 0 por ejemplo. Entonces aquí lo podemos guardar y luego lo probamos de nuevo. Subimos un archivo y vemos si todo funcionó bien. Perfecto. Tenemos ahora con el archivo y estamos listos para enviar este archivo al back-end, y luego se subirá a través de nuestra API back-end. En la próxima conferencia, veremos cómo enviar todos estos datos para crear un producto en la base de datos.
111. Presentar un nuevo producto como Product: De acuerdo, en esta conferencia, vamos a ver cómo publicar un nuevo producto o agregar un producto a la base de datos. Entonces si recuerdas, hemos creado el formulario, entonces vamos a hacer un Create. Aquí las cosas son un poco diferentes de la categoría. ¿ Por qué? Porque no vamos a publicar los datos como JSON. Vamos a publicarlos como datos de formulario, como veremos ahora, esto es porque tenemos un archivo que es la imagen. Por lo que debemos publicar los datos como un tipo de datos de formulario, no como un JSON. Porque si recuerdas, cuando estábamos trabajando en el backend, te
estaba mostrando que estamos publicando o poniendo un producto en la base de datos, pero con forma que el formato no con el JSON como los demás. Por lo que de esa manera, podrás subir imágenes con los datos de tu formulario. Entonces sigamos adelante. Entonces. Cuando creamos, cuando hacemos clic en este Crear, vamos a construir nuestros datos de formulario. Entonces vamos aquí y ya tenemos el método, lo
definimos, que es onsubmit. Voy a ver si tengo primero el formulario válido. Entonces digo si esta forma de punto, como el grupo de formularios que tengo no es válida, entonces regresa. No hagas nada de otra manera. Después de este retorno, vamos a construir los datos del formulario, pero antes de eso, necesitamos validar el campo. Entonces después de eso, si recuerdas, habíamos creado estas notificaciones para que el usuario vea si tiene algunos errores o errores en los campos. Por lo que en base a estos campos requeridos que definimos aquí, construimos nuestras notificaciones aquí. Por lo que necesitamos activar esos, no vacaciones. Entonces, en primer lugar, hay que decir que se presenta es cierto. Por lo que cuando hago click en Enviar, tengo que decir que el formulario enviado es cierto. Entonces sí, se somete. Entonces exactamente como lo hicimos con categoría. Entonces después de guardar eso, intentamos de nuevo y luego nosotros, traté de dar click en Crear. Entonces después de eso, obtendré los errores de validación como ven aquí. Ahora tenemos, sentiremos estos datos y los recibiremos y los enviaremos al back-end. Entonces, ¿cómo podemos recibir con estos datos como datos de formulario? En primer lugar, necesitamos definir una constante que se llama datos de forma de producto y se un tipo que forma encías de datos con un JavaScript básico en el navegador. Entonces no es una biblioteca. No tenemos que importar nada. Está dentro del JavaScript que estamos usando ahora, luego estos datos de formulario, los
vamos a pasar al servicio, que estará en un producto, y luego lo enviaremos al back-end. Pero cómo podemos llenar este formulario que nuestra primera, Así que necesito mover los datos que ingreso aquí en los insumos a los productos de forma de datos. Simplemente decimos producto formulario datos punto anexar. Entonces especifico la clave que quiero anexar, y luego el valor de la misma. Por ejemplo, diré nombre y luego diré el nombre de control. Por lo que voy a decir esta forma de productos de punto, que ya es que ya hemos visto es este consiguió controles de forma nombre de punto, valor de punto. Por lo que en este caso, he especificado un nombre anexado a este valor. Recuerda que este nombre debe ser exactamente como especificamos en el back-end. Entonces exactamente los campos que especificamos aquí también. Y haces lo mismo por todos los campos. Entonces así, hay que hacer una marca y categoría y etcétera. Pero creo que es mejor hacerlo en bucle, sobre todo si tenemos múltiples campos. Entonces diría aquí tal vez pueda decir por cada control que tengo aquí, hacer esta clave y el valor de la misma, sólo
decimos teclas de punto de objeto. Significa como darme las llaves, no los valores de esto. Forman los productos. Forma de producto tiene múltiples controles y quiero tomar las llaves de los mismos. Y entonces me dijeron, mapearlos, como pasar por todos ellos. Y entonces yo 2 me devolveré la llave. Entonces como dijimos, porque vamos por encima de las llaves, que estamos aquí. Entonces después de que consiga la clave, podemos hacer lo que este apéndice para eso. Pero primero, vamos a iniciar sesión en la consola para ver qué está pasando aquí para dejarlo claro para ti. Por lo que voy a decir consola log la clave en sí, y luego consola log para mí este formulario de producto punto. Y luego especifico la clave que quiero, y luego obtengo el valor de la misma. Es exactamente como dijimos aquí, como esta forma de producto punto-, nombre de
punto, valor de punto, exactamente igual. Entonces aquí tiene una matriz y luego los voy a leer. Entonces debe imprimir para mí ahora esa clave, como el nombre y el valor, y todas ellas. Por lo que a diferencia de por categoría, para marca ,
etc, vuelvo a la aplicación. Siento algunos que son como producto uno podemos decir. Y entonces la marca es Brian Guan. Y el precio es, por ejemplo, 500 y el conteo en stock es de 20. Y la categoría será, por ejemplo, la belleza se destaca No. Y entonces tenemos, por ejemplo, alguna descripción y otra descripción detallada, y tenemos una imagen. Entonces voy a subir una imagen al azar. Lo tenemos aquí. Entonces voy a dar clic en crear. Cuando hago clic en eso y vemos que obtuvimos los datos exactamente. Por lo que he llamado Producto 1 y luego marca, marca uno. El precio es 500, la categoría es la categoría todo esto porque estamos devolviendo el objeto todo de ello y así contar en stock 20. Entonces es exactamente como necesitábamos. Entonces cómo podemos anexar a aquellos que simplemente pasan por, decimos forma de producto, punto de datos anexar. Y entonces decimos esa llave. Por lo que necesito una llave, como dijimos anteriormente. Y luego estos punto-producto forma. Y entonces digo la clave en sí, valor de punto. Entonces ir por todos los productos de forma y luego presentar el valor del campo. Entonces decimos este punto, podemos definir un método que se llama agregar un producto. Exactamente cómo lo hicimos con la categoría, pero estos aceptarán,
aceptarán los datos del formulario de productos después de que nos levantaran todo dentro de ella. Entonces definamos este método. Sería exactamente la misma que definimos cuatro categorías. Será exactamente igual que usaremos servicio de producto, producto de
anuncio, y luego usaré toda esta propiedad. Me gusta el servicio de mensajes. Entonces hagámoslo rápidamente. Definí en un producto tanto impar, así que lo tenemos como agregar categoría, pero necesitamos en un producto y este producto de anuncio aceptará no producto en sí, no el producto como archivo JSON, pero aceptaremos datos de formulario. Por lo que tenemos que decir aquí, los datos de
producto serán tipo de datos de formulario y luego utilizaré un servicio de producto. Por lo que necesitamos utilizar también el servicio del producto para agregar el servicio que está creando un producto. Y luego le paso los datos del producto. Por lo que primero necesitamos llamar al servicio del producto. Por lo que lo tenemos aquí para que podamos decir servicio privado, servicio de producto. Bajamos nuevamente a nuestra adición de un producto. Entonces crea producto. Tenemos que definir este método. Por lo que voy de nuevo a nuestro servicio de producto. Entonces lo tenemos aquí. Entonces después de ir eso, así que aquí ponemos de nuevo este método y sin comentarios y decimos crear producto, no categoría. Y aquí tenemos datos de producto. Y aquí aceptará datos de formulario. Y entonces volverá para mí observable de
un modelo de producto porque voy a conseguir el producto en sí. Y aquí también un producto, y será una solicitud de post, pero aquí será la URL para los productos. Aquí tenemos las categorías que necesitamos para arreglar eso. Entonces tenemos aquí para ese producto. Y luego paso los datos del producto a la solicitud de post. Es exactamente como lo hicimos con un hombre de correos. Ahora, estoy construyendo un dato telefónico y los envío al back-end con la solicitud de post HTTP. Entonces vamos a guardarlo. Y luego seguimos en nuestro front end aquí
tenemos la categoría ni me va a devolver un producto. Y este producto, será un producto. Y luego tenemos el modelo de producto. Tenemos que importarlo de nuevo. Y aquí necesitamos un servicio de mensajes. Y el servicio de mensajes, si recuerdas, también
es de Prime NG. Lo hemos utilizado para mostrar mensajes como Notification Service, que se encuentra en prime NG. Y entonces tenemos ahora todo está bien. Ahora tenemos que definir eso. El necesito mostrar el nombre del producto y luego tengo un temporizador para volver. Después de sumar con éxito el producto, importamos esto, que es de Rx2. Sí, especificas el tiempo y luego esperas hasta que se ejecute o pasado, luego vuelves a la lista de productos. Y entonces necesitamos tener aquí algunas correcciones como producto, como en el texto de los mensajes. Aquí tenemos producto no se crea cuando obtenemos error y ahora solo nos falta la ubicación. Entonces volvemos aquí y llamamos método privado o servicio privado, que se llama ubicación. Y esta ubicación vendrá de ubicación en Angular. Entonces intentemos eso. Y luego voy a llenar de nuevo mis datos aquí. Tengo marca, tengo marca uno. Y siempre mantén el ojo en la red aquí, así que usaremos eso siempre. Entonces cuando quieras saber qué está enviando o qué estás enviando al front end o al backend. Es mejor usar la red porque verás claramente lo que estás enviando al backend aquí,
500, 23, y luego elegimos categoría y se presenta. Sí, podemos ponerlo como se presenta. Y aquí descripción y aquí descripción detallada. Y luego envío una imagen. Entonces después de eso, nos sometemos , de
acuerdo, está doblando y doblando otra vez. Entonces estamos obteniendo error en la parte posterior y supongo, y aquí abro la bolsa y otra vez para que te muestres el error, es decir cast object ID field value, object, Object, Path ID category. Porque si recuerdas, imprimimos en el registro de la consola esa categoría y nos da una categoría como objeto. Por lo que necesito pasar solo categoría dot ID. No quiero pasar toda la categoría. Podemos arreglar ese tema muy fácilmente. Por lo que no sólo podemos enviar la categoría en sí al front end o al backend, todo ello. Podemos enviar sólo un valor específico o un campo específico. Porque si vamos a la documentación De bajado, el propio desplegable, porque sabes que estamos leyendo el valor aquí desde el desplegable. Por lo que el valor de la categoría en el desplegable está dando todo
el objeto de categoría que incluye ID, nombre, color, icono. Ahora, sólo necesitamos el DNI. Entonces necesitamos decir de alguna manera que por favor este control y dame solo el ID que aquí se especifica, no todo objeto. Si vas a la documentación desplegable en Prime NG, vemos que tenemos algo de entrada con esas entradas, que se llama valor de opción. Por lo que se puede definir un valor de opción o una clave de la subasta. Entonces no puedes decir eso, dame sólo estas llaves aquí. Por lo que no podemos usar ese también valor de opción y especificarlo como etiqueta opcional aquí. Por ejemplo, la opción etiquetada, dije, elige del objeto de categoría, solo
el nombre, y muéstralo aquí. Pero cuál será el valor, el valor de esta opción. Por lo que no puedo decir que el valor de opción será
el ID, el ID de esa categoría que estoy recibiendo con categorías. Entonces después de guardar eso y cuando estemos publicando datos al back-end, entonces veremos que la categoría ya no es objeto. Será así ID. Entonces cuando selecciono algo aquí, estoy especificando solo ID, no la categoría de objetos, todo ello. Yo estoy detallando este punto solo para evitar, si obtienes algún error como este, entonces puedes saber resolverlo. Entonces vamos a llenar de nuevo este formulario y vamos a dar click en Enviar. Entonces ya siento esos datos. Voy a presionar sobre crear. Cuando presiono grado, digo que el producto no se crea porque obtuve un error. Vamos a revisar la red aquí. Entonces ven que estamos enviando todo bien. Yo voy aquí y veo los encabezados. Los encabezados de la solicitud serán un dato de formulario y todo me parece bien. Tengo el nombre, precio de marca, categoría. Mira, esa categoría viene también sólo como ID count es talk description, hit description, todo está bien pero el campo de imagen está vacío. Y la respuesta está diciendo, ninguna imagen ahí dentro solicita. Por lo que necesitamos tener de alguna manera la imagen también en los datos del formulario. Entonces por eso estamos usando datos formados. Por eso. Necesito decir para formar ese apéndice para carne también imagen, pero el uding de la imagen es diferente manera de anexar campos normales. No es así. No es como digo, anexa la clave y el valor de la misma. Por lo que el valor de su imagen clave está vacío de alguna manera, incluso lo hemos definido aquí. Pero el problema usando la imagen de Control de Forma aquí, no me va a dar los datos reales. Me dará sólo el camino de los datos. Porque si someto, nuevo con este cambio, por ejemplo, tengo aquí nombre de control de formulario, entonces verán que los datos vienen sólo la ruta de la misma. Entonces no estoy enviando el camino. Quería enviar los datos exactamente cómo los conseguimos y cómo
los construimos con el FileReader previamente. Entonces si recuerdas, cuando cargamos imágenes, cuando hago clic en subir imágenes, entonces creé un lector de archivos como vimos en la conferencia anterior. Por lo que necesitamos pasar el archivo en sí. Entonces, ¿cómo hacemos eso? Es muy sencillo. Vamos a subir imagen. Y digo que no tomes el valor de nombre de control de formulario, así que quita eso. Pero vamos aquí y decimos que el valor de nombre de Control de formularios será el propio archivo. Por lo que no será la ruta del archivo, pero será el propio archivo. Entonces, ¿cómo podemos hacer eso? Si este archivo, si hay un archivo, entonces esto sí forma la forma que estamos construyendo en el grupo de puntos. Decimos valor de parche, como agregar un valor, valor en una clave que se llama imagen, y luego pegar el archivo. Como recuerdan, aquí hemos definido la imagen, pero está vacía. Pero ahora necesitamos definirlo y parchear este valor a la forma misma. Y otra cosa como necesitamos validar eso porque estamos publicando un archivo que es sólo imagen. Por lo que tenemos que decir que para esta forma de punto punto punto obtener la imagen misma. Y luego decimos actualizar valor y validez. Entonces aquí tenemos que usar este método solo para confirmar que todo está funcionando bien. Estamos actualizando el valor porque después de parchearlo, necesitamos actualizar el formulario en sí. Por lo que sólo obtenemos este valor y actualizado como un archivo el cual reventamos. He llenado de nuevo los datos y también tengo imagen aquí. Entonces cuando haga clic en Crear, veré que también está pendiente. Estoy recibiendo otro error porque está diciendo que se destaca la validación de producto, gas a valor sintió booleano, está vacío. Por lo que necesitamos hacer que esta característica por defecto sea falsa o verdadera. Entonces cuando es así, entonces no lo hacemos, no podemos enviar un valor vacío. Necesitamos enviar un valor falso. Por lo que se presenta debe ser por defecto como falso. Y luego cuando lo cambiamos, entonces leemos el valor de la misma. Intentemos eso otra vez. Después de dar un valor predeterminado a las características del ISB, luego hacemos clic en Crear. Veremos que el producto se crea con éxito. Y si vamos a nuestra lista de productos, veremos que la imagen del producto fue cargada y ya está en el servidor. Por lo que está en el lado del servidor, se subió con éxito. Entonces como recapitulación, hicimos exactamente cómo hacemos con las categorías que solo estamos haciendo se envía, cheque al formulario no es válido. No hacemos nada cuando no es válido, entonces estamos enviando los datos como datos de formulario, no como JSON, cómo lo hicimos con categoría. Y entonces estamos construyendo esos datos de forma. Y entonces estamos anexando estos datos. Dos productos forman datos. Y entonces estamos creando un método que se llama agregar un producto, que está usando el servicio de producto, crear un producto. Y luego en base a
eso, me dará un mensaje de éxito o mensaje de fracaso. El tema principal que nos enfrentamos aquí que el campo de imagen no puede ser utilizado como nombre de control de formulario porque me va a devolver aquí sólo la ruta. No devuelve el archivo en sí. Entonces lo que hicimos para resolver eso, dijimos en subida de imagen cuando lo hicimos en la conferencia anterior, dijimos parche un valor a la forma que se llama imagen. Y el valor de la misma de este control de formulario será el propio archivo. No será el camino. Después para hacer que las cosas se activen, necesitamos volver a llamar a este campo y luego decir Actualizar valor y validez. Y además, tenemos que tener cuidado con los valores por defecto aquí porque a veces cuando no envías nada al backend, impar cuando envías un tipo incorrecto, por ejemplo, se presenta estaba vacío aquí, así que estaba usando cadena vacía. Y para el backend es un problema porque el backend espera un valor booleano. Entonces el valor predeterminado de esto es Richard será falso a menos que lo estemos cambiando. Entonces cuando vaya aquí y lo cambie, leerá el valor como booleano porque estamos leyendo los valores de onsubmit cuando esté presentando un método. Entonces hagamos ahora una refactorización rápida. Simplemente necesitamos eliminar esos registros de consola que no tengamos que tener un registro de consola y nuestro código, y tenemos nuestro producto creado ya en la lista de productos.
112. Editar un producto: En esta conferencia, vamos a ver cómo podemos editar un producto. Exactamente como lo hicimos con categoría. Si recuerdas, estamos dando click en uno de editar a categoría y luego podemos editar y actualizar. Podemos hacer lo mismo con el producto. Por lo que cuando hago clic en este botón de edición, puedo ir de nuevo al formulario y sentir los datos. Entonces, ¿cómo podemos hacer eso? Es exactamente igual que en categorías. Fui a la lista de productos. Si recuerdas, tenemos el botón para la edición y solo decimos actualizar un producto y estoy pasando el ID del producto que quiero. Y luego implementación de este producto de actualización, serán estos router navegar por URL al formulario de productos y luego al ID del producto, porque ya hemos definido esta ruta como vimos aquí anteriormente. Por lo que ahora cuando hagamos click en el Editar, entonces iremos a Añadir producto. Pero el problema de que tenemos datos vacíos, no
conseguimos el producto en sí llenado ya en esos campos. Por lo que de nuevo, necesitamos especificar el modo de edición. Y luego decimos cuando tengo ID, luego preparo el modo de edición y luego cojo los datos del producto de
la base de datos y luego los colocamos en los campos como hicimos con las categorías. Entonces hagámoslo rápidamente. Como recordáis en la plantilla hemos definido y editado variable de modo, y esta variable se define aquí. Por lo que necesitamos especificar y comprobar el modo de edición como lo hicimos anteriormente. Entonces, en primer lugar, necesitamos crear un método que se llama Jack edit mode y hacer clic en Edit mode. Será un método privado. Entonces donde puedo comprobar el modo de edición y leer el ID desde la URL, exactamente cómo lo hicimos con las categorías. Entonces necesitamos la ruta en sí, ese servicio fuera. Podemos agarrarlo y ponerlo en nuestras llamadas de servicios. Entonces aquí tenemos la ruta la cual se activa ruta y se escucha desde la ruta. No puedo saber cuáles son los parámetros que se pasan en la URL si hay un ID el cual se pasa como lo hicimos anteriormente, entonces dijo el modo de edición a true. Y luego vamos a fijar los campos de
los productos por el producto que obtuvimos del back-end. Por lo que primero necesitamos definir también un ID de producto actual. Entonces porque necesitamos eso, como recuerdas, entonces tenemos un ID de producto actual que se define aquí, será una cadena, y luego necesitamos crear una superficie para obtener un solo producto. Entonces si volvemos a ir a los servicios, vamos al servicio del producto, necesitamos crear un método que se llama obtener un producto. Y como lo hicimos exactamente otra vez con una categoría, podemos definir ese método. Por lo que solo podemos decir que tenemos un buen producto, ID de
producto, producto aquí para llamar al modelo de producto. Y así aquí voy a conseguir el producto. Y aquí necesitamos la URL de la API, y luego pasaré el ID del producto. Por lo que aquí el servicio está listo. Volvemos a nuestro formulario y luego para comprobar el modo de edición, necesitamos llamar al servicio del producto. Entonces digo este servicio de producto punto y luego obtener un producto, solo producto, y luego suscribirse al producto en sí. Y luego obtendré el producto del backend. Y luego para cada campo de esos campos de producto, necesitamos especificar el valor que obtuvimos del back-end. Por lo que podemos eliminar esta parte. Por lo que necesitamos decir de alguna manera como esta forma punto-producto que ya tenemos. Y luego voy campo por nombre de campo y el valor establecido. Y luego puse el valor con el producto que obtuve del backend y el nombre. Entonces hagámoslo por todos los campos rápidamente. Entonces voy aquí primero a la categoría, y luego pongo el valor de la categoría que obtuve del producto. Y además, tengo esa marca. Y entonces el precio en stock se destaca descripción y rica descripción. Ahorremos en el trie que vamos a nuestro front end, seleccionamos un producto, por ejemplo, este. Y entonces voy a ver que todos los campos se llenan perfectamente, pero excepto el campo de la imagen que aquí no tenemos una imagen principal, no podemos verla. Esto se debe a que la vista de lástima de la imagen, como recuerdas, se almacena en una variable que se llama visualización de imagen. Y en la visualización de la imagen, puedo especificar el valor de la URL de la imagen, que estoy obteniendo del back-end. Por lo que podemos hacer eso de manera muy sencilla. Podemos decir esta URL de imagen de punto o la visualización de imagen. Será el producto en sí, esa imagen. Por lo que aquí tenemos un camino ya viene del backend y con la visualización de la imagen. Actualicemos eso y comprobémoslo. De acuerdo, vemos que tenemos la imagen ya está seleccionada y se muestra aquí. Y también si vemos que nos falta la categoría, la categoría no está seleccionada porque sigue siendo por defecto. El problema que si recuerdas, hemos especificado la categoría por ID. Y cuando voy a la red y compruebo lo que estoy recibiendo categoría, lo
estoy consiguiendo como objeto porque un backend me está enviando toda la categoría con el producto. Tenemos que especificar también el DNI. Por lo que diré categoría dot ID. Entonces aquí voy y digo set product, category dot id en sí. Lo intentamos de nuevo y veremos que la categoría ya está seleccionada. Entonces ves paso a paso, tienes que comprobar que todo está funcionando bien. Y luego vamos a hacer el Presente de la actualización por mí. Por ejemplo, cuando cambio el precio, quiero enviar la actualización del precio al back-end. Por lo que el botón de Enviar ya estaba definido como vimos aquí, pero sólo tenemos añadir un producto. Por lo que necesitamos de alguna manera hacer de la misma manera como lo hicimos con las categorías forma. Tenemos que comprobar el modo de edición. Es realmente es modo. Entonces haz actualizar producto, no un producto publicitario. Y si no lo es, entonces agregamos el producto. Entonces tengo aquí si este modo de edición de puntos, y luego me iré y digo eso, vale, Haz por mí la actualización, lo contrario, haz por mí producto de anuncio. Por lo que necesitamos definir otro método que se llama Editar producto o actualizar producto. Por lo que también será un método privado. Se actualizará producto y luego pedirá los productos de forma que otra vez. Por lo que actualiza producto, estará en la parte superior aquí lo tenemos como subrayado
privado, producto de actualización. Y luego pasaré los datos del formulario del producto, que tiene también bucear fuera de la forma del producto o de los datos del formulario en sí. Entonces aquí necesitamos pasar también a la actualización, un formulario que porque y si el usuario ha actualizado la imagen. Entonces exactamente cómo lo hicimos con la categoría de actualización. Como recuerdan, hemos creado el servicio de categoría de actualización y después creamos un mensaje y un temporizador para volver a la lista de productos. Y luego si hay un fallo, mostramos un mensaje de falla. Añadamos también el método de actualización, que también estará en este servicio de producto. Por lo que vamos de nuevo al servicio de producto. Entonces así tenemos la actualización del producto y luego tenemos los datos del producto en sí observables. Me va a devolver el del producto actualizado y además, tenemos que pasar el ID, pero aquí están las cosas un poco diferentes. Tenemos que pasar el DNI y los tenemos dentro de un dato de formulario. También puedes obtener nuestro agarrar el ID en sí a partir de los datos del producto. Pero en mi opinión, es mejor agregar otro parámetro para actualizar producto, que es será el ID del producto. Por lo que añadiré aquí también un ID de producto, que será teclear una cadena. Y luego voy de nuevo a la forma de producto. Y en el método de actualización, añadiré, si recuerdas, este punto ID de producto actual, que definimos previamente, y lo agarramos inyectado en el modo de edición. Entonces si recuerdas, tenemos aquí esa comprobación del modo de edición y hemos asignado el Id actual de su producto al ID actual del producto. Entonces ahora tenemos todo el método está funcionando bien. Necesitamos solo presentar los datos. Guardemos eso. Si vamos a uno de nuestros productos, como los que creamos previamente, voy a ver aquí que, vale, tengo el nombre del producto, marca de producto uno. Yo actualizo por ejemplo, se presenta. Y en la descripción digo descripción actualizada solo para estar seguro de que todo está bien. Y luego estamos dando click en actualizar. Entonces actualicemos eso. Veremos que el producto está actualizado y volvimos de nuevo y
veremos que el producto realmente se actualizó con la descripción actualizada. De acuerdo, intentemos cambiar la imagen también. Entonces voy a ver aquí que por ejemplo, tengo una de la imagen como esta por ejemplo, actualizo y veremos que también se ha actualizado como vemos aquí.
113. No se necesita el campo de imagen de imagen de Validation: Entonces por eso hice el
campo de la imagen principal no es obligatorio al principio porque estoy aquí mostrando solo vista previa de imagen, pero no estoy cargando la imagen nuevamente en el archivo de entrada aquí. Entonces cuando entrego una actualización, y como vieron en el back-end, ya
hicimos que estamos revisando la imagen. Si se imagina con esa solicitud, entonces está bien, úsalo. Pero si no, entonces quédate con la vieja imagen. Si el usuario no subió ninguna imagen aquí. Entonces así como lo hicimos en el back-end y cómo lo estamos manejando en el front end. Pero tenemos tema aquí que si el producto, cuando hago clic en ti, creo un nuevo producto. No le estoy mostrando al usuario ningún error de validación aquí. igual que por ejemplo, cuando hago clic en Crear, solo
estoy mostrando que el producto no está creado, pero no estoy mostrando ningún error de validación aquí necesitamos apuntalar algún error de validación. Pero al actualizarse, no debe aparecer esta validación. En otras palabras, quiero en modo de edición, este campo no es obligatorio, pero onCreate, quería ser un campo requerido. ¿ Cómo podemos hacer eso? En primer lugar, hagamos este campo como sea necesario. Y en la plantilla misma, copiamos una de estas pequeñas descripciones o las pequeñas etiquetas Tenemos aquí, la imagen, subir imagen y después de la imagen aquí, podemos, por ejemplo, poner un error de validación. Entonces yo diría que ese formulario de producto, como si el usuario no parcheara ninguna imagen, entonces inválido y se envía, entonces mostrar el error, digamos que se requiere imagen. Pero esto se mostrará sólo cuando haya error y no haya ninguna imagen cargada antes. Por lo que queremos mostrarlo como te dije en Create. Por lo que volvemos a la forma misma y luego hacemos estos campo de imagen según se requiera. Por lo que vamos aquí, esto puso al validador para que sea un requerido. Entonces cuando voy al front end, hago clic en Crear, voy a ver, está
bien, Se requiere la imagen. Y este caso, no puedo enviar ningún producto solo cuando tengo imagen dentro de él. Entonces intentemos eso rápidamente. He creado aquí un producto. Siento ya la forma y también subí la imagen. Por lo que cuando haga clic en Crear, voy a ver que el producto está realmente creado. Pero cuando no hay imagen, entonces obtendré un error. Esa imagen se requiere como vimos anteriormente. Pero lo que quiero ahora cuando voy al modo Editar, no
quiero tener este campo requerido cuando el usuario está actualizando un producto. Por ejemplo, estoy actualizando este. Haga clic en Actualizar, obtendré error. Se requiere imagen porque el usuario no quiere cambiar la imagen. Por lo que no subió nada, pero el campo en sí está vacío. El modo de arreglar eso, que no vuelva a
sentir el campo de imagen para que no se requiera porque de lo contrario cuando actualice, volveré a enviar el archivo y el archivo se volverá a subir. Y tendré archivos replicados en el back-end ahí. Buena manera que en el modo de edición, puedo eliminar estas regla de validación. Entonces puedo decir cuando hay DNI y este DNI, cuando consigo el producto, todo está bien. Yo voy aquí y digo este producto de punto para esa imagen misma. Y luego decimos configurar validadores de nuevo, y los validadores serán nulos, como dijimos aquí, tenemos validadores bien, pero estos validadores ahora no son nada matriz vacía. Y para que esto funcione, si recuerdas, cuando hicimos un lote de un valor de la imagen, necesitamos verificar el valor y la validez de la actualización. Por lo que podemos volver a llamar a eso para actualizar y actualizar este campo de formulario para tomar todos los cambios que ha hecho ahí, podemos este producto dot forma imagen y luego volver a actualizar valor y validez. Entonces cuando digamos éste, entonces veremos que se refrescó y luego el validador ya no estará activo. Entonces cuando voy aquí digo año 2002, y no tengo nada en este campo y
no es válido porque aquí no tengo ningún expediente. Pero cuando haga clic en actualizar, funcionaría y actualizará el archivo. Pero cuando vaya a un nuevo producto, entonces se requerirá este campo. No puedo crear un producto sólo cuando siento el campo aquí. Por lo que en el modo de edición, hemos requerido y no vamos a editar el modo, no es necesario. Se puede hacer lo mismo para todos los campos. Esta imagen era sólo un ejemplo.
114. Añade la página de la tabla de productos: En esta conferencia vamos a ver cómo agregar originador a la tabla de lista de productos. Agregar paginarla en Prime NG es muy fácil. Es solo una propiedad, puedes agregarla y luego la variable tendrá una paginación. Entonces cuando vamos a Prime NG y luego vamos a la mesa, hay una categoría llamada página. Y aquí verás cómo puedes usar la paginada es solo propiedad adicional, que se llama paginada o a través. Y luego puedes ver cuántas filas puedes mostrar en cada página puedes mostrar también un reporte sobre la página. Por ejemplo, esto muestra de una a diez de un 100 entradas y no puedes tener una plantilla para ello. Por lo que puede especificar un texto que desea mostrar dentro de este informe. Y también filas por opción de página, que es ésta. También puedes mostrar opciones de cuántas filas quieres mostrar en una página. Añadamos eso a nuestra mesa. Voy a añadir el paginado a nuestra mesa. Entonces voy aquí y digo que paginate es a través de las filas son 10. Entonces guardamos eso. Volvemos a ir a nuestra aplicación. Está cargada de nuevo. Y veremos que tenemos al originador. Se pueden agregar las otras plantillas como shore informe actual o si se desea tener la opción de filas por página. Entonces depende de ti. Para mí. Estoy sintiendo Es hermoso así.
115. Tabla de la lista de usuarios y servicios de usuarios: De acuerdo, como acordamos en este curso, que no vamos a repetir las cosas una y otra vez. Por lo que anteriormente hicimos la tabla de categorías y será para los usuarios igual. Entonces para eso, creo un componente que se llama Lista de usuarios. Y el componente de lista de este usuario tiene exactamente lo mismo que teníamos en categorías como el propio brindis, cómo tenemos conformación sobre operaciones. Y también página de administración, voy sólo a reemplazar esos para ser usuarios y también aquí usuarios. Y luego tenemos de nuevo el botón Nuevo para agregar un nuevo usuario. Y también tenemos la tabla que valorarán, serán los usuarios y también sus campos, que sabemos todo sobre los usuarios y cómo los conseguimos del backend. Para mí, mostraré en la tabla sólo el nombre, correo electrónico y si es administrador o no, y el país. Y podemos hacer también esas tablas o esas columnas como ordenables o no. Y para eso, tenemos al usuario, y el usuario tiene un nombre. El correo electrónico es admin y country. Y tenemos el botón Eliminar Usuario y actualizar usuario. Y para eso, hemos creado la ruta que ya están definidas previamente, lo hemos
hecho categorías y productos. Tenemos los usuarios, que se refiere al componente de lista del usuario y la forma que es usted fallando a los usuarios desde componente. Por lo que para agarrar los datos de la base de datos también, hemos creado los servicios para el usuario. Por lo que el componente de usuario, tengo el servicio de usuario y el servicio de usuario. Si vamos a ello, tendrá usuarios conseguir usuario, crear un usuario, actualizar y eliminar exactamente cómo lo hicimos anteriormente con categorías. Y la URL de la API será para los usuarios. Y pongo el servicio exactamente en la biblioteca del usuario, no en la biblioteca de productos porque estamos usando ahora la biblioteca del usuario. Por lo que la biblioteca del usuario tendría una carpeta que se llama servicios. Y dentro de los servicios contaremos con servicios de usuario. Y además, creé un modelo del usuario exactamente cómo lo tenemos en el back-end,
como ID, nombre, contraseña, correo electrónico, teléfono, y token. Si tiene una ficha, como veremos más adelante, es admin, Calle, Departamento, código
postal, ciudad y país. Y volvemos al componente de lista de usuarios. Como siempre, cuando NG en él, digo get not categories, sino get users. Y estos usuarios, los tenemos ya en el back-end. Por lo que tenemos aquí en los usuarios y también obtenemos usuarios. Y luego usaré los servicios de usuario para conseguir a los usuarios y a sus usuarios suscritos. Y esto.UserID es serán los usuarios que hemos definido como una clase miembro, que es array de usuarios. Y luego lo uso en esa tabla como valor. Y revisamos el front-end, veremos que la lista del usuario vino así. Entonces tenemos aquí el nombre de usuario, el correo electrónico es admin, y el país, está vacío aquí porque en la base de datos ese país también está vacío. Los actualizaremos cuando hagamos la edición en el mismo tiempo que lo hice también, esa eliminación, que será también diálogo de confirmación, como ¿quieres eliminar al usuario? Y entonces el usuario puede seleccionar sí o no, y luego ejecutará la decisión correcta. Entonces aquí tenemos también eliminar al usuario y estamos ejecutando este código cuando el usuario está haciendo clic en Eliminar botón add, cuando voy a la lista del usuario, estamos llamando de nuevo al servicio de confirmación. Por lo que necesitamos confirmar si los usuarios deben ser borrados o no. Y luego cuando los usuarios acepten eso, luego Servicio de Usuario, estaremos llamando a un usuario delete con el ID de usuario seleccionado. Y luego refresco la lista de nuevo consiguiendo a los usuarios. Y luego se elimina el servicio de mensajes, que me mostrará el usuario o se eliminó el usuario. Y recuerda que importamos el usuario, el modelo de usuario, y los usuarios del uso de la biblioteca. Me gustaría agregar una cosa aquí que no quiero mostrar es admin true o false? Podemos, por ejemplo, mostrar un icono o podemos mostrar algo en el uso de prime end se llama etiqueta. Y tag, podemos usar una de esas etiquetas en base al estado si es administrador o no. Entonces, por ejemplo, mostraré esta etiqueta cuando el usuario sea admin, y mostraré este DAG con este icono cuando el usuario no sea admin. Entonces hagámoslo. También podemos importar el módulo de etiquetas a nuestro módulo de aplicación. Y cuando vamos aquí, lo
usamos en nuestro módulo UX. Y podemos usar el ejemplo que viene con iconos. Por lo que lo usó de una manera como si vamos a la fuente, veremos iconos que usó etiqueta p. Y luego especificó algún margen y luego seleccionó el ícono y luego la severidad será el éxito y el valor será el éxito. No estamos teniendo un valor aquí, por lo que tendremos sólo icono. Por lo que podemos usar este dag e ir a nuestro componente de lista de usuarios. Y aquí está, admin. No vamos a comprobar eso, pero diremos que use este DAG y ng-if mostrará esta etiqueta o no basada si el usuario es admin o no. Por lo que yo diría que el usuario es admin. Entonces si el usuario es admin, así que haz o muestra esta insignia o esta etiqueta. Y como dijimos aquí, no necesitamos el valor. Para que podamos guardarlo y comprobarlo en los piojos frontales, veremos que ya tenemos esta etiqueta y también
podemos usar los apelaciones como si estuviera a su alrededor. Por lo que no podemos decir que redondeado sea cierto. Podemos establecer esta etiqueta como bordes redondeados, por lo que podemos añadirla aquí. Tenemos un redondeado a través, por lo que tiene entrada que se llama redondeado. Entonces ahorramos. Y de nuevo, cuando no sea admin, entonces mostraré el peligro. Y digo que el usuario no es admin. Entonces aquí tenemos otra etiqueta P y digo MET ng-si no admin, y entonces el icono será otro ícono y severidad será peligro, como rojo y redondeado a través. Entonces cuando volvemos a ir y revisamos el ícono del ícono para que sean tiempos, así podemos tomarlo y colocarlo aquí. Guardamos la aplicación y comprobamos si todo está funcionando bien. Entonces como ven aquí, tenemos entonces el admin viniendo con verdadero o falso flujo de aquí, no
lo haré si el admin tiene este ícono, por lo que es admin. Si no, entonces no se le agrega. Entonces te estoy mostrando esto porque quiero ver cómo podemos renderizar los valores dentro de eso todo exactamente como queremos. Entonces cuando querías jugar ícono, puedes mostrarlo. Si quieres imagen, puedes mostrar la imagen como vimos en el producto. Y si quieres mostrar algo más como un componente, puedes hacerlo tan bien como vemos aquí en Admin.
116. Formas de usuarios añadir y editar: De acuerdo, en esta conferencia, estoy pasando por el formulario de usuario. El formulario de usuario que he creado exactamente también como categorías, como les dije, porque las categorías serán nuestra referencia. Y a partir de eso tendremos una plantilla y usaremos esa plantilla en todas partes donde queramos. Iré rápido a no repetir las mismas cosas. Pero si quieres todo a detalle, cómo creamos este formulario, vas a revisar las categorías para. Por lo que se forman las categorías. Expliqué todo a detalle cómo estamos construyendo esta forma. Entonces exactamente cómo lo hicimos con las categorías. Ya sabes que el modelo de usuario que hemos creado previamente, necesita un nombre, contraseña, correo electrónico, y otras cosas. Y en base a eso, creé los cuatro. Entonces todo es igual. Tenemos un brindis por los mensajes de confirmación y también
el encabezado, la barra de herramientas que contienen el onsubmit y cancel si quieres verlo aquí más en detalle, te mostré. Entonces como ves aquí, tenemos la actualización y cancelar y está cambiando cuando te estoy dando click en función del modo de edición. Y ahora tenemos el nombre, correo electrónico, y también el teléfono. Y además, tenemos aquí el admin es admin y la calle, departamento y otras cosas. Por supuesto, hay cosas nuevas que voy a mostrarles cómo hacerlas. Por ejemplo, necesitamos, por ejemplo, mostrar cómo validar el correo electrónico, que es algo nuevo, y también cómo podemos agarrar que los países a los países caigan. Ahora lo tengo vacío. Quiero mostrarles cómo podemos agarrar los países a nuestro desplegable desde una biblioteca. Y en el componente mismo, voy de energía en él. Estoy diciendo init, teléfono de
usuario, y de hecho formulario de usuario. Al igual que cada forma que estamos usando constructor de formularios, tenemos el nombre que se requiere. También se requiere la contraseña, pero al actualizarse no se requiere porque como recuerdas en el backend, cómo lo
hicimos, lo hicimos de una manera que si el usuario no pone ninguna contraseña en la actualización de un usuario, entonces mantendrá la contraseña anterior, que ya tiene. Pero cuando puso algo aquí, entonces actualizará la contraseña en base a eso. Entonces exactamente cómo lo hicimos con la imagen del producto, si recuerdas, lo mismo exactamente, vamos a hacer con el usuario por una contraseña se
requerirá cuando voy a tener el nuevo formulario. Pero no se requerirá cuando esté editando un usuario. Entonces aquí debemos hacer y manejar la cosa con contraseña. Entonces como vemos aquí, lo
tenemos requerido por defecto, y luego iremos a revisar el modo de edición como vemos anteriormente. Y luego diré este formulario de usuario de punto, la contraseña cuando estoy en modo de edición. Entonces o es MOD es a través de validadores de conjunto, será como matriz vacía de validadores. Y luego decimos esta contraseña de punto, valor de
actualización y validez. Entonces como vemos aquí, hemos actualizado este campo después de que estamos revisando el modo. Entonces cuando vuelvo y lo pruebo, así que vamos a los usuarios o sabíamos que se requeriría. Y en Edit, no se requerirá. Por lo que podemos actualizar si no es necesario. Entonces en base a eso, yo también he creado la forma. Vamos a tener el correo electrónico. También se requiere el propio correo electrónico. Pero no sólo se requiere. ¿ Y si el usuario pone algo mal? Al igual que si se pone así, entonces tenemos que decirle que no, está mal. Correo electrónico. Eso lo podemos hacer muy fácilmente. También es que es otro validador, que se llama correo electrónico. Entonces tenemos que poner una nueva matriz, como si tuviéramos múltiples validadores. Por lo que voy a decir requerido y también validador dot email. Por lo que en este caso tendremos dos validadores. Pero cuando volvamos a nuestro formulario de nuevo e intentamos hacer click en ti, entonces di, por ejemplo, un correo electrónico inválido, algo así. No es correo electrónico. Cuando haga clic en Crear, diré que voy a ver que hay correo electrónico se requiere. No quiero tener correo electrónico se requiere. Yo quiero decir que el correo electrónico no es válido, pero cuando está vacío, yo diría, está bien, se requiere correo electrónico. Entonces cómo podemos diferenciar entre dos mensajes. Entonces como ves aquí, tenemos ng-if email de usuario inválido y se envía el formulario, luego muéstrame un mensaje. Aquí podemos tener dos tipos de mensajes. Entonces podemos dividir este mensaje, podemos ponerlo dentro de un lapso y tenemos otro mensaje en otro lapso. Por lo que podemos tener aquí dos tramos. Se requiere uno para el correo electrónico y otro, el correo electrónico no es válido. Pero aquí también necesitamos comprobar ng-if, ¿cuál es el tipo del error? Por lo que voy a decir aquí también en ng-if para correo electrónico se requiere, voy a decir usuario form dot errors. Es un requerido. Entonces muéstrame este mensaje. Pero si el error es el correo electrónico, entonces muéstrame el otro mensaje. Por lo que podemos poner eso también aquí y decir, en lugar de errores dot requerido, decimos error dot email. Entonces guardamos eso y lo intentamos de nuevo. Y veremos cuándo pondré un correo electrónico equivocado, diré que el correo no es válido, pero cuando ponga vacío,
voy a ver que se requiere correo electrónico. Por lo que de esta manera, se puede diferenciar entre los validadores dentro de su correo electrónico, volviendo a nuestros componentes. Por lo que tenemos aquí dos validadores. Y para el teléfono, también se requiere para el extranjero como IC aquí, utilicé un nuevo control que se llama Input Mask. Y esta máscara de entrada, si vas a Prime NG, verás que usé este componente. Este componente es solo para mostrarte y ayudar al usuario a ingresar ese número de una manera correcta. Entonces como ven aquí, he puesto un número y lo está enmascarando. Entonces usar esto es exactamente lo mismo. Yo importé el módulo al módulo de aplicación y luego utilicé uno de esos ejemplos se usan, por ejemplo, el que la fuente. Pero cómo puedes especificar la máscara que quieras, puedes especificarla poniendo 99 de esta manera. Entonces cuando quite esta parte también de la máscara, entonces debo tener la máscara de esta manera. Entonces es un enmascaramiento. Por lo que el usuario siempre pondrá eso ahí dentro, de manera correcta. Entonces ven aquí tengo el enmascaramiento exactamente como lo definí aquí es admin es un interruptor. Habíamos visto que ya en el producto cuando se presenta o no. Calle es un departamento de caja de texto, ciudad de código postal. Y luego tenemos a los países. En la próxima conferencia, les voy a mostrar cómo enumerar sus países dentro de esta lista usando alguna biblioteca externa. Pero ahora, como vemos aquí en nuestro componente, que somos capaces de hacer lo mismo como hicimos con las categorías y el producto. Entonces cuando voy primero, reviso el modo de edición y verifico si tengo parámetros sobre el usuario. Entonces cuando tengo parámetro, por ejemplo aquí, que es ID de usuario, entonces estoy en modo de edición. Y en modo edición estoy mostrando alguna información la cual crecí desde el backend. Por lo que uso el servicio de usuario para obtener un usuario por ID y suscribirme a ese valor. Y luego puse los controles en base a los valores que obtuve del back-end. Pero cuando estoy en un Nuevo, entonces voy a tener agregar un productor. Y este Add user creará un usuario para mí. Y luego mostrará mensaje de éxito y retrocederá cuando estén vacías. Y la ubicación, volvemos a la lista del usuario y si hay falla, me dirá
que el usuario no está creado. Hablamos de todo esto en videos anteriores de categorías y productos. Los puedes ver más en detalle y repetirlos si no entiendes algo. Te estoy explicando aquí sólo las cosas nuevas que son realmente importantes para ti, que no hicimos previamente en el curso y en la siguiente conferencia, Vamos a ver cómo podemos llenar sus países con base en alguna biblioteca externa. Como ya les dije anteriormente.
117. Retrieving países para deslocalizar con países i18n iso: Está bien, genial. Ahora en esta conferencia les voy a mostrar cómo sentir la lista de países. Por supuesto, no vamos a tener una serie de todos los países del mundo. No, pero vamos a utilizar una biblioteca que siempre se está actualizando con el código de los países y los nombres. Y esta biblioteca se llama IAT EN, países ISO. Y lo puedes encontrar como paquetes MPM y lo puedes instalar a través de este comentario. Por lo que voy a nuestro componente de formulario de usuarios y voy a tener la lista del país llena aquí. Por lo que ahora tenemos matriz vacía porque lo estamos usando para el desplegable como lo hicimos exactamente con las categorías en el producto. Por lo que antes que nada, necesitamos instalar la biblioteca que detenga nuestro compilador y luego pegar el comando de MPM install. Y luego veremos cómo podemos llamar a esta biblioteca y llamar a la lista de los países. De acuerdo, como ven aquí, lo
tengo instalado ya tenía. Ahora si vamos al formulario del usuario, necesitamos tener el campo del país, exactamente cómo lo hicimos con las categorías. Podemos definir un método que se llama, por ejemplo, obtener países. Y esto dan a los países, voy a inicializar un país y sacarlos de esa biblioteca. Por lo que definimos un nuevo método. Lo estamos llamando países de Git privados, y aquí se definirá. De acuerdo, vamos a la documentación de esa biblioteca. Iré aquí a revisar. Dice que tengo que definir una variable que se llama países, y luego haré un requerimiento. De acuerdo, aquí está usando un JavaScript, pero en TypeScript, si quieres importar una de las bibliotecas, tienes que hacer lo siguiente. Tienes que ir aquí. Y después de instalar la propia biblioteca, dices Importar y luego artístico o estrella. Y luego dices, como definas, por ejemplo, una constante que vas a usar para esa biblioteca. Es como digo, importa para mí todo y ponlo en una constante, llámenlo países por ejemplo, lista o labio como biblioteca. Y entonces decimos desde. Y luego se define el camino que aquí se define. Por lo que dices, quiero importarlo de esta biblioteca. ¿ De acuerdo? Eso lo hemos definido. Lo ponemos aquí y veremos que todo sigue bien. Todavía no tenemos ningún error. De acuerdo, volvemos a nuestros países GET. Tenemos que registrar la asignación y leer la lista del país. De esta forma lo dijo. Por lo que no podemos copiar también esta línea. Digamos que los países registran locale y tenemos que hacer eso, pero no tenemos países. Tenemos algo llamado labio de país. Por lo que voy a decir aquí países Lib luego registrar locale y luego requerir. Y esto requerido pedirá a la biblioteca traer el archivo JSON inglés el cual se encuentra y tiene toda la lista del país. También puedes usar la solicitud HTTP para obtener este JSON. Pero te mostraré un camino más fácil. Es muy sencillo para hacerlo funcionar. Se puede hacer como declaración y se puede decir declarar y luego causado, requerir. Y en ese caso, funcionará esperemos. Entonces como ven aquí, ahora tenemos en adquirir y todo está funcionando bien. Y tengo aquí la biblioteca. De acuerdo, veamos un ejemplo para sacar a todos los países. Entonces como ven aquí, dijo definir países y luego
hizo el requerimiento y que dijo consola log con los países, obtener nombres en inglés y seleccionar oficial. Entonces hagámoslo de esa manera e intentemos ver qué tenemos en nuestro registro de consola para mapear las cosas exactamente como queremos para nuestro menú desplegable. Por lo que voy a poner este código aquí. Reemplazo el labio de este país por éste. Y luego podemos ver qué va a teclear para nosotros. Después de guardar, voy de nuevo al panel de administración, pero necesitamos ejecutar el proyecto. Entonces como vemos aquí, ese proyecto se está ejecutando con éxito. Nos refrescamos aquí para ver qué vamos a conseguir en la consola. De acuerdo, En la consola yo, tengo objeto. Y este objeto tiene código de su país y luego el nombre del mismo. De acuerdo, Pero la forma en que es, no
podemos aceptarlo así. Tenemos que tener a los países como lista porque nuestros países cayeron, aceptan a los países como una matriz. Por lo que podemos usar o encontrar una manera de mapear las cosas que están dentro de este método como array. Entonces, ¿cómo podemos hacer eso? Entonces lo haré primero, me desharé de este registro de consola. Lo usaremos para otra cosa. Entonces diré que los países viven, me
dan los nombres en inglés, y luego necesitamos mapear en ello. Por lo que no podemos mapear en objeto mediante el uso de un método que se llama entradas de punto de objeto. Y en este método
, me permitirá recorrer todas las entradas como si fueran una matriz. Para explicártelo más claro, voy a hacer, asumiré que estas entradas como array y voy a decir mapa, vale, rezo a aceptar ese mapa y este mapa ha sido devuelto para mí entrada por entrada. Para hacer alguna operación con ella. Entonces, por ejemplo, consola registre esta entrada. Entonces voy a decir aquí, vale, consola de registro para mí esa entrada. Actualicemos e intentemos eso de nuevo y veremos qué tendremos en el candado de consola. Entonces como ven aquí, se actualiza y tenemos todos los miembros de la matriz. Por lo que el objeto siempre viene como primer número es la clave, y el segundo miembro es la España. Entonces y tenemos todas las matrices así. Por lo que podemos entonces con mapa volver como exactamente lo que queremos. Por lo que en forma de usuarios, necesitamos la opción etiquetada como nombre y el valor de opción como ID. Por lo que podemos mapear en base a eso. Entonces podemos decir aquí, este punto países serán entradas de objetos sobre todos los países que están en esta biblioteca y mapear sobre ellos. Y en lugar de devolver el objeto en sí, la entrada misma regresó para mí y el objeto donde el ID es la entrada 0, como el índice 0. Por lo que tenemos aquí el DNI y el nombre será entrada y uno. Por lo que tendremos la identificación como entrada 0 y el nombre de su país será la entrada uno para la segunda entrada. Entonces después de eso, vamos a la consola a registrar los países. Por lo que voy a decir aquí, consola dot log de nuevo estos países. Entonces después de guardar eso, nos
refrescamos, vamos a nuestra aplicación y veremos que devolvimos una lista o matriz de todos los países con el código ID y nombre. Y si voy aquí a los países, porque como recuerdan tenemos este países es array, array vacío. Y esta matriz se usa para opciones de este desplegable. Entonces cuando vaya aquí, veré que tengo todos los países. Y lo bonito que puedo buscar a través de ellos para poder decir España, vale, tengo España y todo está funcionando perfectamente. Y por supuesto, entonces puedo actualizar a mi usuario. Entonces yo diría actualizar aquí y luego me va a recuperar y voy a llegar aquí ese país y es dolor. Entonces esto se debe a que lo que estamos almacenando en la base de datos, mapeando de nuevo al Rename, entonces hay que hacer también el mapeo aquí en esa lista. Por lo que tenemos que hacer una función en la lista de su país. Y luego irá a buscar España para luego recuperar el nombre del país. Y este método se proporciona aquí. Entonces puedes decir su biblioteca, dame el nombre del código nosotros, y te dará el nombre del país, que es Estados Unidos de América. Como tarea para ti o como tarea que quiero que hagas por mí en la próxima conferencia, la tarea que obtenemos aquí en la lista, el nombre real del país, pero no el nombre ni el código del país. Por lo que tu trabajo se basará exactamente en la lista Usuarios. Por lo que necesitas de nuevo utilizar esta biblioteca en los usuarios, este componente. Y luego hay que mapear o averiguar el nombre donde estamos mapeando ese campo. Entonces en lugar de este usuario ese país, necesitas hacer algo aquí. Esta solución también se proporciona con la asignación y además la adjuntaré al código. De esa manera, hemos hecho todo respecto al usuario. Por lo que tenemos todo nombre, el correo electrónico es admin y country. Y como acordamos antes, que el usuario para nosotros es el mismo que cliente. Y si quieres hacerlo más grande o más complicado, no
puedes separar a los usuarios del sitio web sobre los clientes porque estamos usando aquí al usuario como cliente. Y puede ser admin o no, pero será exactamente de la misma manera como hicimos con los usuarios para adjuntar a clientes.
118. Retrieving la solución de países: De acuerdo, Como ven aquí, recuperé con éxito el nombre completo del país. ¿ Cómo hice eso? En primer lugar, para el país en la lista de países de los usuarios, creé un método llamado get country name, y luego paso al usuario ese país. Y porque estamos guardando el ID del país en la base de datos. Entonces vamos a revisar este nombre de país. Como ven aquí, reviso si hay una clave de país pasada al método, luego devuelto para mí, Servicio de
Usuarios hace buen país. De acuerdo, así que definí un método se llama buen país en el servicio al usuario. Entonces como ven aquí, obtienen country está usando el labio del país o su biblioteca de países, que usamos anteriormente en el video anterior. Y luego conseguir nombre y luego iPads la clave de país, y luego el idioma que quiero conseguir esto. Si recuerdas, había algo para el registro de esta biblioteca, como ves aquí, si queremos usarla, tenemos que registrarlos están ubicados. Entonces cómo hice que me quitara ese registro y lo puse en el constructor de este servicio, de servicio al usuario. Por lo que se llamará una sola vez. Por lo que ya he ajustado dislocar solo una vez porque servicio de
usuario se llama Solo una vez cuando estoy inicializando la aplicación, elimino eso de los usuarios para lo eliminé de aquí. Por lo que no tenemos de nuevo esta convocatoria de la biblioteca ni registro. Tenemos sólo el mismo método get countries. Y luego dije que estos países utilizan el servicio de usuario y luego obtener. Por lo que iré aquí para conseguir países. Y como ven aquí, estoy devolviendo las mismas entradas de objeto de código. Y luego uso la biblioteca que inicialicé aquí en el servicio de usuario. Entonces de esa manera, lo
estamos usando sólo una vez. Lo estamos llamando una vez, y no estamos teniendo una duplicación de registro de la locale como vimos anteriormente. Por lo que siempre cuando tengas alguna duplicación, lanza las cosas al servicio. Además, sí escuché un error porque estoy usando países dentro de User Service. ¿ Y si quiero usar Git country y country en otras bibliotecas, como por ejemplo, en pedidos o en productos. En este caso, elimino todo esto y
creo un servicio que se llama, por ejemplo, utilidades. Estas utilidades me darán, por ejemplo, países, ciudades, por ejemplo, para la transformación de textos o para formatear números. Por lo que podemos usar estas utilidades en todas partes entre nuestra aplicación o espacio de trabajo. Veremos eso más adelante cuando necesitemos conseguir países y conseguir país en nuestro proyecto paso a paso.
119. Crear que elijas componentes y servicios: De acuerdo, Ahora estamos aquí, vamos a crear la lista de pedidos y la página de detalles del pedido. Entonces para eso también, necesitamos hacer dos componentes. En primer lugar, o esas listas donde voy a ver la tabla del pedido y también el detalle del pedido donde voy a ver los detalles del pedido como lo
estamos haciendo siempre, vamos a crear dos componentes. Por supuesto que estoy usando una consola ECS. Como siempre, nombré un nuevo componente, que se llama lista de órdenes, y se creará una aplicación o un administrador. Y entonces tengo un estilo de vida para no generar archivo CSS porque no lo necesitamos. Tenemos estilos públicos. Y además creé un selector el cual será admin o hay lista, y luego me salté esas pruebas. Vamos a ejecutar esta parte. Y luego veremos el siguiente,
que es el detalle del pedido. Aquí no tendremos forma, tendremos en los detalles y en detalles mostraré el pedido y luego podré cambiar el estado del pedido como siempre lo hacemos con cualquier tema. Por lo que aquí llamaré al artículo como detalle de órdenes admin. Entonces, ¿cuál será el selector? Y serán exactamente las mismas opciones que elegimos para lista de pedidos. De acuerdo, volvamos a nuestra estructura de código para ver si todo está creado. De acuerdo, ya lo tenemos, todo está creado. Tenemos ahora componente vacío. Hagamos primero la lista de órdenes, la lista de órdenes. Por lo que será exactamente igual que las categorías así como les dije, tenemos las categorías como plantilla. Y si recuerdas, hemos definido siempre la plantilla de la tabla, que utilizamos cuatro categorías. Entonces no he ido también a usar lo mismo aquí. Entonces voy a copiar esta parte, volver de nuevo a la lista de pedidos, y luego vamos a hacer algunas cosas aquí. Por supuesto que no será exactamente lo mismo. Por ejemplo, sólo tendremos borrar viejo, pero no tendremos, por ejemplo, actualizar todo eso. Diremos Orden seguro. Al igual que vamos a ver el detalle de los pedidos porque no vamos a editarlo. Entonces voy a renombrar esas cosas rápidamente. Entonces, como ves, le renombré todo. Tenemos ahora órdenes, lista de órdenes, y luego le renombré se hunde aquí. Por supuesto, el pedido no vendrá con ninguna nueva, como cómo tenemos aquí con categoría, porque el pedido será colocado por el usuario en la propia tienda. Por lo que el usuario realizará el pedido. No podemos crear aquí un nuevo orden. Entonces en ese caso, podemos quitar esta parte. Entonces por supuesto todavía se puede crear un nuevo orden. Solo tienes que volver a hacer la forma y seguir lo que hicimos anteriormente. Pero ahora para los detalles, quiero mostrarles cosas diferentes para no ser lo mismo que hicimos anteriormente en partes anteriores. Entonces me voy a deshacer de toda esta barra de herramientas que se utiliza para crear o un nuevo orden para que podamos deshacernos de él como vemos aquí. Y ahora tendremos mesa más simple. Entonces como recuerdan, el orden tiene algunos campos que definimos previamente en el back-end. Entonces ahora vamos a hacer también otra vez, el mismo modelo que tenemos para el front end. Y si recuerdas, hemos creado una biblioteca que se llama órdenes. Entonces en órdenes, vamos a colocar también nuestro modelo. Entonces lo haré rápidamente. Entonces como ven aquí, creé el modelo de pedidos. El modelo de pedido contiene algo llamado artículo de pedido. Y el elemento de orden
, también debería ser otro modelo. Por lo que también podemos crear ese modelo. Por lo que tenemos aquí otro archivo que se llama elemento de orden. Entonces con este artículo de pedido, voy a colocar una nueva clase que se llama artículo de pedido. Y luego tenemos este artículo de pedido el cual tendrá ID de Producto y la cantidad. Por lo que volveremos al artículo del pedido e importaremos este artículo del pedido. Por lo que tendremos aquí o el artículo que se importa del artículo de pedido. También tenemos que recordar que necesitamos exportar esos modelos en el archivo índice. Por lo que tenemos aquí también, estrella de
exportación del modelo en sí. Y luego orden. Entonces tenemos aquí el pedido y así necesitamos exportar el artículo de pedido por lo que guardamos todo está funcionando bien como ves aquí
tenemos aquí el módulo de pedidos que creamos previamente. Posteriormente. También vamos a crear los servicios. Entonces vamos a crear ahora carpeta, Llamémoslo servicios, que colocaremos dentro de ella, el servicio de pedidos. Entonces vuelve a nuestra solicitud. Definiremos otra variable u otro miembro de la clase, que se llama órdenes. Y los trastornos tendrán un orden de tipo. Y este orden que hemos creado previamente, y será matriz vacía al principio. A veces se obtiene este error como el elemento de orden de propiedad falta en tipo indefinido. Entonces es mejor tener como siempre los campos. Opcional como siempre. Entonces si tienes este campo como opcional, no te molestará tanto el Eastland que te está mostrando. Sí. Está bien. Esto no está definido. Te refieres a que necesitas definirlo y luego creas elemento de orden, etc. Así que cuando definas solo una matriz, es mejor simplemente convertirla en un opcional. Y aquí ya no tendrás ningún tema. Y agregamos esos también para no tener un tema aquí. Por lo que tendremos las órdenes, órdenes array y array ordenado está vacío. Por lo que volvemos a nuestra plantilla y vamos
a agregar esos módulos o estos campos de miembros aquí. Por lo que agregué esas columnas como el precio total del usuario, y luego la fecha ordenada y el estado. Y aquí tendremos la columna sólo para acciones. Por lo que como ves aquí, puedes agregar las columnas que quieras en base a lo que quieras mostrar. Entonces aquí solo necesito esto, pero claro que tienes libertad para agregar más cosas para ti. Entonces ahora volvemos a ir a la plantilla aquí, a los valores donde estamos mostrando los valores del orden. Y vamos a quitar todas estas cosas. Simplemente guardamos los botones de acción y
mostraremos sólo como los valores que están en esos campos. De acuerdo, agrega, agregué todos esos campos. Veremos más adelante cómo podemos hacer un mal para su estatus. Al igual que mostraremos un color del orden basado en el estado del mismo. También quisiera agregar algunos pedidos para que no podamos tener orden por su nombre, lo siento por el usuario, por el premio. Y también se puede por fecha y se puede pedir también el estado. Entonces hagámoslo rápidamente. Entonces como ven aquí, he definido a todo el personal para que sea ordenable como necesitamos. Echemos un vistazo si no tenemos ningún problema ahí. Por lo que iré a la mesa de órdenes. Ves que tengo error de que no definí el orden de la ruta. Por lo que necesitamos ir al módulo de la app y luego necesitamos
definir el orden tan bien como vimos anteriormente. Entonces primero necesito tener el orden, por ejemplo, lista. Por lo que serán órdenes, lista componente, y tendremos aquí órdenes. Y también necesitamos definir una identificación. Entonces vamos a ser suficiente, por ejemplo, Con sólo órdenes. Y entonces voy a decir para mí la identificación sin, por ejemplo, la, la forma en sí porque ya no nos hemos formado aquí. Por lo que aquí diremos detalle y ahorramos. Por lo que volviendo de nuevo a la aplicación, y después de que se esté cargando, veremos que podemos ir a la orden y ver a los usuarios y el estado y el orden de fecha. Pero no tenemos datos. Necesitamos crear un servicio para agarrar los datos al front-end. Exactamente como dijimos. Nuevamente con categoría, también podemos copiar ese servicio de categoría y reemplazar las cosas aquí. Entonces hagámoslo también rápidamente. Y por supuesto se puede utilizar la capacidad de reemplazo. Por lo que tenemos aquí categoría y no puedes igualar el caso. Para que pueda igualar el caso, este caso o casos. Por lo que diré reemplazar categoría por orden. Por lo que todo será reemplazado de inmediato. Y además, si quieres tener una letra mayúscula, como algunos casos como esta categoría tiene una letra mayúscula. También puedes reemplazarlo por orden de letras mayúsculas. Entonces como ven aquí, yo también he sustituido todo para ser como orden. Está bien, es muy sencillo. Tenemos también categorías, por lo que también puedes reemplazar eso. Entonces decimos categorías es órdenes. Bueno aquí tenemos que reemplazarlo. Como ven, todavía tenemos categorías, pero con mayúscula. Entonces tenemos aquí órdenes y también con mayúscula, y los sustituimos a todos. Como ven ahora, tenemos todos los pedidos, está listo o el servicio está listo. No tenemos que hacer y sufrir tanto con ello. Entonces lo guardamos y luego exportamos como lo hicimos anteriormente en otras bibliotecas. Entonces voy a ver aquí Servicios que, acuerdo, ahora volvemos a nuestra aplicación. Vamos al componente de lista y veremos cómo podemos sumar todos estos pedidos. Es muy sencillo, igual exactamente como lo hicimos con las categorías. Sólo tenemos que hacer en él que necesitamos inicializar u obtener los pedidos. Por lo que yo diría este punto, conseguir titulares y conseguir todos esos será un método que voy a definir ahora. Entonces será aquí, obtengo categorías u obtengo órdenes. Y esto aquí consigue órdenes. Pedirá el servicio de pedidos. Por lo que necesitamos también importar el servicio de pedidos. Entonces como ven aquí, lo hice rápidamente porque ya lo hemos hecho en categorías. Y también podemos hacer con aquí. Entonces después de eso, voy a agarrar los datos también aquí, como ves, ya
tenemos las órdenes, pero como ves, tenemos al usuario viniendo como objeto, objeto. Pero este no es el objetivo que queremos tenerlo porque necesitamos tener sólo el nombre o el correo electrónico. Porque si vamos a la red y comprobamos nuestro ejemplo, esa solicitud que creamos cuatro órdenes como lo vemos aquí. Después veremos que los artículos de orden juegos en la forma en que se poblan. Por ejemplo, el usuario está poblado totalmente. Entonces lo que necesito es sólo el nombre, exactamente como lo hicimos en el back-end. Por lo que en ese caso, se
puede mostrar el nombre o se puede mostrar, por ejemplo, el correo electrónico. Entonces voy a mostrar sólo el nombre. Entonces diré aquí ese nombre. Pero si recuerdas, hemos definido al usuario en el modelo como una cadena. Por lo que es mejor definirlo como usuario. Por lo que aquí obtendríamos al usuario de otra biblioteca, que se llama Usuario de importación. Y este usuario será de usuarios. Y como ven aquí, conseguiremos al usuario y lo colocaremos aquí. Y entonces tendremos todo está bien, para que podamos conseguir el nombre de la manera correcta. Entonces vamos a guardar eso de nuevo y chequeemos nuestro front end. Está bien, ya veo que tengo mi nombre aquí. Tengo el precio total y tengo la fecha en la que hice el pedido, pero necesita formatear y el estado es 0. Entonces lo que significa 0. Para mí, me gustaría tener algo como nombrar, como pendiente, envío o envío o entrega. Por lo que quiero mostrar el estado del orden que vamos a editar aquí. Por lo que el usuario o el administrador de la tienda
, puede actualizar el estado del pedido. Entonces para eso, es mejor hacer algún mapeo. Y esto, lo que veremos en la próxima conferencia.
120. Estado de orden: De acuerdo, en esta conferencia vamos a ver cómo podemos definir un estatus para el dueño. Y este estado, voy a utilizar las etiquetas que utilizamos anteriormente. Entonces puedo mostrar en algún color como entregado, o es un envío, o está en proceso, o es, por ejemplo, recibido, etcétera. Entonces te mostraré cómo definiré esas constantes y luego cómo pondremos esta etiqueta dentro de nuestra mesa. Entonces antes que nada, ya hemos importado ese módulo a nuestro módulo de aplicación. Por lo que sólo necesitamos tener o definir la etiqueta en sí. Entonces voy a tomar este DAG y luego colocarlo en mi código donde estoy recuperando el estado del pedido. Entonces aquí vamos a colocar esa etiqueta. Vamos a refrescarnos para ver si todo está funcionando bien. Y luego veremos que se recargue la aplicación. Perfecto. Tenemos ahora aquí en ti, Ok, vamos ahora a ver el color. Vamos a ver cómo ajustar el texto. Como recuerdas, puedes definir tu propio mapeo para el orden donde puedes definir eso. No tienes que hacer eso en el back-end. back-end es solo lugar para almacenar datos. No tienes que manejar cuáles son los tipos de las órdenes. Entonces la solución más simple para eso, voy a tener algo como el texto de orden
o el texto de estado más antiguo y también el estado de orden en sí, como cómo se coloreará. Entonces para eso podemos definir una constante. lo que podemos llamar a esta constante, por ejemplo, estado de orden, y podemos definir constante aquí, o puedes hacerlo también en archivo externo. Te mostraré cuándo vamos a refactorizar esto. Entonces primero necesitamos tener una constante. Podemos llamar a este orden constante y luego estado. Y este estado de orden será el objeto y el objeto será, por ejemplo, múltiples objetos. Y esos objetos estarán definiendo la etiqueta que será como pendiente o procesada o enviada, y también el color, el color que se basará en estos valores. Entonces antes que nada, pondré el valor como aquí, así, como objeto como este. Por supuesto que puedes hacerlo como array o puedes hacerlo como objeto. También puedes escuchar definir claves como quieras. Entonces como depende cómo se está almacenando o cómo
se va a almacenar el estado en la base de datos. Para mí, por ejemplo, el primero se etiquetará, voy a llamarlo, por ejemplo, pendiente, que será el primer estado y el color. Por lo que el color de la insignia será el color de esa misma etiqueta. Entonces como ven aquí en este ejemplo, tiene múltiples colores, así que voy a usar los mismos colores. Entonces podemos tener esto también. Vemos que está usando info de éxito, advirtiendo colores. Entonces depende de ti. Entonces si quieres algunos colores especiales, puedes definir eso en CSS. Pero para mí esos colores son suficientes. Entonces como primer estado, ese color será un color primario como se define aquí. Por lo que tenemos aquí éxito primario, info, advertencia y peligro. Entonces vamos a usar esos colores. Entonces primero, usaré este color y luego definiría otro estado, que será, por ejemplo, el procesado y procesado tendrá el color como naranja, que será de advertencia, color de advertencia. Y por supuesto, voy a definir otro color
u otro estado el cual será enviado y barato para tener también color de advertencia como estamos en proceso y vamos a tener otro estatus el cual se llamaría entregado. Y esto entregado tendrá color de éxito. Y entonces tendremos como un rechazado o por ejemplo, cancelado o fallado. Podemos llamarlo. Por lo que podemos hacer otro campo al que se llamará fallido. Entonces cuando el usuario para hacer un pago o por ejemplo, cuando el usuario pide el reembolso. Entonces podemos hacer, por ejemplo, de este color un peligro. De acuerdo, ahora tenemos estado de pedidos. Y este estado de orden, lo
vamos a almacenar en una variable que
recordamos o el estado porque lo vamos a utilizar en la plantilla. Entonces diré que el estado de orden es igual al estado de orden, la constante. Entonces cuando voy aquí, tengo ese DAG aquí. Por lo que yo diría que el valor de este DAG, es necesario
definir el enlace. Entonces vamos a enlazar aquí una variable. No vamos a usar una cadena estática porque ya tenemos la cadena. Por lo que no podemos decir que el estado del pedido será el estado del pedido en sí. Y se ordenará la clave esos estatus porque como recuerdan, hemos definido claves para los estados y en base a lo que estoy guardando en base de datos, como veremos en el front end en cualquier tienda cuando esté
enviando el pedido y cómo lo haríamos actualizar el estado del pedido, veremos cómo estamos almacenando eso en la base de datos y luego el estado del
pedido después con el nombre del punto qi. Y aquí voy a obtener el nombre del estado o la etiqueta del estado. Aquí debemos tener una etiqueta, no el nombre. Y entonces necesitamos definir el color. Pero veamos primero, si todo está funcionando bien, estoy guardando todo. recargó la aplicación, Vale, tenemos aquí pendiente y veremos cómo vamos a cambiar el estado y luego veremos cómo se reflejará en esta tabla. Entonces ahora tenemos lo pendiente y necesitamos ahora la coloración. Entonces para colorear estas etiquetas, necesitamos definir algo llamado severidad. Y la severidad será exactamente del mismo color que definí en nuestra constante. Entonces iré aquí. Diré como esta severidad y también será como un enlace variable. No vamos a usar un texto estático. No vamos a decir como un peligro o nuestra cuerda aquí. No, porque estamos usando una variable y será lo mismo. También será estado de orden y luego más viejo ese código de estado, que provienen del back-end y luego será el color. Y cuando guardemos eso, veremos que estamos devolviendo el color correcto. Entonces cuando vaya aquí, voy a ver que si está funcionando bien. Entonces cambiemos, por ejemplo, el estado pendiente de orden. Podemos cambiarlo, por ejemplo, a peligro, por ejemplo, para ver si todo está funcionando bien. Entonces estoy guardando eso. Yo voy aquí, voy a ver que se puso rojo. Entonces estamos en el camino correcto, no
tenemos ningún problema. Entonces como les dije, definimos una constante en el componente de lista de órdenes. Y en orden componente Grecia, utilicé también una variable o un miembro de la clase porque lo voy a usar en la plantilla. Y luego si recuerdas este valor del estado del pedido devuelto como 0, y esto se guardará en la base de datos para el estado del pedido. Por lo que 0 para lo pendiente. Uno es para procesamiento, tres es para envío, para cuatro entregados. Y aquí definimos todo este gráfico o diccionario. Y también usamos el elemento de etiqueta porque este módulo tipo o componente tecnológico pidió
también para colorear y hicimos los colores exactamente para cómo esta etiqueta está funcionando. Fecha de fórmula, como ven aquí, está formateada como del formato que viene de la base de datos. También podemos formatear la fecha usando las tuberías, cómo lo hicimos previamente con el producto. Si recuerdas, hemos hecho o hacemos el creado en en este formato. Por lo que podemos hacer eso también por la orden. Entonces volvemos a ir al campo. No tenemos etiqueta, no tenemos esto. Podemos tener orden de fecha y colocar el formato de tubería corta para la fecha. Y todo funciona perfecto. Entonces tenemos aquí la fecha y el estatus. En la siguiente conferencia, vamos a crear el detalle de este pedido para que podamos ver más detalle sobre este orden de como los artículos y también el producto. ¿ Cuáles son los productos y el precio de cada elemento de un producto? Por lo que veremos todos estos detalles en la próxima conferencia.
121. Componente de detalles de orden: De acuerdo, vimos previamente cómo creamos la lista de órdenes, y vimos cómo creamos la insignia de estado para la orden. Ahora en esta conferencia vamos a ver cómo hacer los detalles de la orden. Entonces, ¿cuál es el requisito para eso? Los requisitos son para mí son solo quiero ver los detalles del pedido y cambiar el estado. Ellos usuario no va aquí a crear órdenes o por ejemplo, actualizar todos los datos del pedido. Pero será en el front end, el front end, el usuario o el cliente va a crear los datos o el pedido en nuestro número. Por lo que sugeriría algún diseño que ya he hecho. Al igual que por ejemplo, podemos tener todo el detalle. Podemos tener ID de pedido, fecha de pedido, y estado del pedido, los cuales pueden ser actualizables. Y también el precio total del pedido y los artículos del pedido. Podemos enumerar artículos de pedido aquí y luego la dirección del pedido y alguna información sobre el cliente. Entonces hagamos esta estructura exactamente como se hace aquí. Entonces vamos de nuevo a admin. Entonces quiero cambiar aquí el icono para ser lote editar, pero será como una vista. Por lo que podemos cambiar el icono en base a iconos en energía prime. Tenemos aquí icono en el uso de prime end se llama Pi I, por lo que podemos usar este. Entonces voy de nuevo a mi lista de pedidos y luego
voy a cambiar el icono aquí de lápiz a I. Y luego ahorramos, vamos a ver que todo está funcionando bien en nuestra aplicación. De acuerdo, aquí tenemos el ícono. Por lo que ahora necesitamos ver los detalles del pedido. Por lo que cuando hago click aquí, quiero ir al detalle de los pedidos. En primer lugar necesitamos una ruta y que ya creamos, después hacer referencia a esta ruta. Entonces primero necesitamos definir la función que se llama Mostrar orden. Vamos a ir aquí otra vez y luego vamos a definir un método que se llama Mostrar hombro Orden aquí. Y estoy consiguiendo aquí el ID de pedido desde el front end. Y vamos a usar el router. Y el router, como dijimos anteriormente, es un servicio o una clase que podemos utilizar. Entonces voy a tener aquí el router en sí, diría router privado. Y este será tipo de router. Y podemos importarlo también Angular. Hacemos esto como letra pequeña para ser utilizable. Y luego vamos aquí y decimos este punto router dot navegar por URL. Y luego especifico la URL a donde voy a ir desde aquí. Por lo que quiero ir a la ruta donde especifiqué en nuestro módulo. Entonces si recuerdas, tenemos aquí múltiples rutas. Dijimos que todos esos serán después de que sea ID. Después iré al componente de detalle. Entonces vamos aquí otra vez y decimos navega por mí, órdenes slash y luego el ID del ID del pedido. Entonces podemos combinar eso con backticks y decir órdenes, y luego decimos ID de orden. De esta manera, navegamos por URL a nuestro componente. Entonces intentemos eso. Vamos aquí, está bien, tenemos trabajos de detalle de orden año, pero como ves aquí, no
vamos a tener, por ejemplo, estructura de foros. Queremos tener algo así como detalles, ya
sabes, por lo que necesitas tener como texto estático. No tenemos un formulario, por lo que no vamos a usar el formulario aquí. Sólo aquí cuando voy a cambiar el estado, lo
voy a cambiar en base al evento onchange, que está regresando del desplegable aquí. Por lo que en realidad no necesitamos un formulario. Sólo necesitamos mostrar un dato. Y podemos usar también este acordeón. Por lo que podemos ir allá y revisar Prime NG para algo que se llama set de campo. Entonces en el conjunto de campos, como ven aquí, podemos usarlo y mostrar contenido dentro de esos conjuntos de campos. Pero primero, vamos a tener el título y otras cosas como cómo tenemos en categoría. Tenemos aquí el subtítulo de título, y luego tenemos una barra de herramientas. No necesitamos barra de herramientas aquí, pero solo necesitamos mostrar como alguna información al respecto. Estamos en orden detalle. Entonces hagámoslo como hicimos exactamente en forma de categorías. Usamos algo así como la llamada tarjeta. Y dentro de la tarjeta tenemos una barra de herramientas. No necesitamos la barra de herramientas. Sólo necesitamos, Por ejemplo, la página de administración y brindis para la actualización. No se puede copiar sólo esta parte al principio. Y entonces podemos sumar nuestra cuadrícula y dentro de ella, los conjuntos de campo. Entonces primero voy a cortar para copiar sólo esa tarjeta y luego la página de administración y el propio anfitrión para que podamos copiarlos y volver a ir al detalle de nuestros pedidos. Quitaremos esta parte y la colocaremos con nuestra postal. Cerramos de nuevo el PKa para estar todo está bien y también eso. Por lo que dentro del Picart vamos a colocar nuestros datos. Entonces primero no necesitamos modo de edición, solo
tenemos una vista órdenes, por lo que necesitamos quitar toda esta parte. Nosotros decimos que sólo tenemos una vista ordenada. Por lo que diría aquí Ver orden y aquí. Podemos decir que aquí puedes editar el estado del pedido. Por lo que sólo podemos tener esta información. Por lo que ahora aquí podemos usar nuestro set de campo. Usar set de campo es muy sencillo, es solo que tienes que copiar esta parte e importar el módulo. Entonces vamos a importar el módulo en sí como lo hicimos anteriormente en nuestro módulo de aplicación. Entonces vamos aquí, tenemos importación de este módulo, módulo conjunto de
campo, y luego lo colocamos aquí. Entonces por supuesto, como les dije, tenemos muchos módulos. También puedes separar los módulos como lo haremos más adelante. Te mostraré en parte refactorización. Vamos, haremos un módulo especial solo para que la UX no tenga módulo muy grande. Pero vamos aquí en el curso paso a paso. Guardamos esta parte y luego comprobamos cuál es el HTML requerido para eso. Entonces podemos decir eso, Vale, quiero el que se duplica. Es muy sencillo. Toggle template es éste. Entonces podemos copiar esta parte y luego la colocamos aquí. Y aquí tendremos nuestro contenido y podemos definir nuestros encabezados. Por ejemplo, quiero toggle header para más detalles y luego pedir artículos y luego la dirección del pedido. Por lo que necesitamos aquí detalles del pedido y otro para artículos de pedido. Y también necesitamos otro para dirección de pedido. Entonces aquí guardamos y luego todo aquí está alineando y formateando para nosotros. Consulta los pedidos. Vamos aquí otra vez, comprobarlo. Está bien, todo está bien. Pero como ven aquí, se
están pegando el uno al otro. Tenemos clases listas para margen y relleno para poder usarlas también aquí. Pero solo quiero mencionar por 1 que aquí en el conjunto de campo o cualquier componente que sea de prime y g, no
podemos usar como clase así y luego darle una clase como un HTML. Hay algunas claves especiales para eso, lo que hay que revisar siempre en la documentación, ¿qué es una clave para dar una clase específica para ese componente? Por ejemplo, aquí en nuestro caso, se llama clase de estilo. Por lo que en clase de estilo, puedo usarlo como clase. Por lo que podemos definir la clase que queremos para este panel alterado. Entonces quiero tener una clase que se llama P margen inferior, por ejemplo para y la misma para la otra. Entonces vamos a guardar eso e intentarlo para ver si está funcionando. De acuerdo, Como ves, tenemos aquí un espacio. Entonces hagámoslo otra vez por los demás. Entonces necesito aquí para clase de estilo también, y aquí clase de estilo también. Entonces tenemos aquí tres clases de estilo y está funcionando bien. Y creo que también es objetivo. Entonces vamos a colocar nuestro contenido, lo que vamos a tener. Por ejemplo, aquí tenemos el ID de pedido, fecha del
pedido y el estado del pedido, y el precio total del pedido. Obtenemos todo esto desde el backend. Entonces tienes que repetir detrás de mí, ¿qué tenemos que hacer? Necesitamos tener un servicio. Y el servicio está agarrando el detalle del pedido y en el front-end o en el componente o el detalle del artículo o pedido. Voy a utilizar este servicio para agarrar los datos. Pero hagamos primero este layout, este layout, creo que es bastante simple. Tenemos, como ven aquí, de acuerdo? Y esta rejilla es de tres partes, tres partes iguales, y aquí la cuarta parte. Entonces como ves, necesitamos tener una cuadrícula y columna 444 y dentro de todos ellos algún contenido de datos. Entonces podemos hacer eso de manera sencilla. Vamos primero a los detalles de nuestros pedidos y diremos que necesitamos tener una cuadrícula. Entonces definiré un div que es una clase llamada cuadrícula p. Y luego dentro de esta cuadrícula p, tendré componentes o ítems donde definirán tres columnas. Entonces decimos div dot py call. Por ejemplo, se define una columna para que no pueda tener columna p para, así que por ejemplo, tenemos que haber puesto aquí primero, segundo, tercero, cuarto. Por lo que veremos que están alineados uno debajo del otro en nuestra plantilla, exactamente. Entonces tenemos todo bien aquí. Entonces, vamos a sentir estos datos. Para llenar estos datos, necesitamos, por ejemplo, una etiqueta como un título, y luego los datos dentro de él que estoy obteniendo de la base de datos. Por lo que iría aquí por un título como con H5. Y luego en H5, digo Orden ID, como un texto codificado. Y luego un párrafo donde pueda poner el propio DNI. Por lo que tendremos aquí alguna ID, y esta ID será reemplazada, que tenemos de la base de datos. Y ves que este ID de pedido se ve así. Lo que necesitamos también, necesitamos fecha de pedido y estado del pedido. Por lo que tenemos aquí también otro h5. Por lo que tendré aquí orden, que será fecha. Y así tendremos como alguna fecha aquí,
vale, que vendrá de la base de datos también. Y también necesitamos aquí otra cosa que se llama estado de orden. Por lo que tendrás aquí estado de pedido, pero este estado, no será, por ejemplo, un texto, será un desplegable. Por lo que usaré P caído como se define, IsPrime NG. Y este bloqueo tendrá opciones y veremos más adelante cómo lo vamos a llenar con los datos. Lo último que necesitamos también es el precio total de la orden, como hablamos anteriormente. Por lo que necesito aquí otro F5 y que voy a decir orden precio total. Vi que su usuario puede saber cuál es el precio total del pedido. Y luego dentro de ella, tendré como algún precio. Entonces, vamos a guardar eso. Vamos aquí, vale, tenemos ese desplegable, tenemos los datos, tenemos la fecha, así que solo necesitamos llenar los datos. Entonces primero hagamos o agarremos datos de la base de datos. Como recuerdan, hemos definido un servicio y este servicio contienen obtener detalle del pedido. Entonces si vamos a la biblioteca de pedidos y tenemos aquí Servicios y servicio de pedidos, tenemos algo llamado envejecer. Por lo que en nuestro componente de detalle de pedidos, necesitamos utilizar el servicio de pedidos. Entonces primero tengo que decir privado o el servicio. Y luego tendremos un tipo que se llama servicio de pedidos. Y este servicio de pedidos se importa automáticamente desde mi espacio de trabajo. Y entonces las órdenes en se define como vimos previamente, un método que se llama este punto obtener lo llamado, es muy sencillo. Sólo necesitamos llamar a este método. Y entonces estos métodos se implementarán como privados. Y entonces decimos que envejecer y obtener orden nos
dará la orden a una variable o a un miembro de la clase, que se llama orden y tiene una orden de tipo como previamente definimos el modelo de orden. Entonces aquí vamos. Perdemos un servicio. Decimos este servicio de pedidos de puntos, dot get order, y luego envejecer con vienen con la orden que viene de los parámetros que obtuve por la URL. Por lo que necesitamos también utilizar el servicio que utilizamos previamente, que se llama ruta activada. Por lo que tenemos aquí ruta activada importada. Y esta ruta, voy a observar el parámetro esto, la trucha y luego los params. Y luego voy a ver suscribirse, y luego voy a conseguir params y luego voy a suscribirme a ellos. Y como ves previamente que en el módulo de app definimos nuestro param como ID. Por lo que tenemos aquí ID. Entonces cuando tienes algún otro cerdo, tienes que usarlo. Por lo que necesitamos usar ID por ejemplo. Y voy a decir aquí, si params dot ID, y entonces voy a llamar al servicio get order. Y usaremos ese servicio, este DNI, porque en los params ID, como recuerdan, estamos recibiendo el DNI del pedido. Entonces voy a conseguir orden con esa identificación. Y entonces decimos que tenemos la orden y la orden será igual al orden. Entonces este orden, que definimos como miembro de la clase, que será igual que orden. Entonces aquí lo guardamos todo y luego vamos a nuestro front end y comprobamos si todo está funcionando bien. Por lo que no obtenemos ningún error. Sólo estamos obteniendo error aquí. Necesitan orden. Por lo que sólo necesitamos definirlo de alguna manera para no tener este error en la consola para decir ID de orden. Y esta será tu tarea por hacerlo, la orden dirigente como verás en las próximas conferencias. Por lo que guardamos esta parte. No tenemos ningún error solo como ES pelusa error de que este método no puede estar vacío, no hay problema. Y luego vamos a llenar el detalle de datos del pedido. Entonces, por ejemplo, hemos definido la clase miembro que se llama orden. Y este pedido lo voy a reemplazar por orden dot ID. Entonces voy a conseguir que este ID de pedido entre estos corchetes se defina como una variable y así aquí necesitamos tener la orden de fecha ordenada, fecha ordenada, y el desplegable lo dejaremos caer. La próxima conferencia y orden premio total será de la misma manera que lo hicimos aquí. Por lo que tendremos pedido el precio total. Entonces ahorramos y comprobamos eso, vale, todo funciona bien. Es mejor siempre cuando estamos consiguiendo datos al front end, es mejor ver que si estos datos están listos o no. En ocasiones en servidores lentos, cuando no
obtienes orden, obtendrás errores en la consola y esto estará causando un problema y no se mostrarán datos. Por lo que es mejor esperar a que esta orden esté lista, como esta variable para estar lista porque como ves, tenemos muchos tiempos de espera. Por lo que necesitamos suscribirnos a params y luego esperar el servicio hasta este pedido, Garfield. Por lo que es mejor usar siempre ng-if para este ritmo. Por lo que diría en el nivel de la página de administración, usaré ng-if. Entonces, en ng-si diré si hay orden, entonces muestra el contenido dentro. De lo contrario, mostrar página vacía hasta que lleguen los datos. Entonces hasta que lleguen los datos significa que no voy a obtener errores cuando voy a decir, por ejemplo, ordenar punto algo, porque si esto no se define, entonces obtendré error en la consola. Dirá que no podemos obtener orden de fecha de variable indefinida. Entonces es mejor aquí tener ng-if en GF, significa que si hay pedido, como si hay orden definido, hay datos dentro de este orden. Entonces un agarrar para mí los datos y mostrar la página de lo contrario, mostrar página vacía. De acuerdo, Ahora así tenemos el orden aquí. Hagamos un poco de estilo o purificación para esos datos. Por ejemplo, tenemos aquí la fecha es fea, no está formateada, y también el precio más antiguo no viene como moneda. Entonces como hablamos antes, ese Angular viene con algo llamado pipas. Y en esa tubería puedes definir lo que quieras dar formato a tus datos. Por ejemplo, voy a usar la fecha aquí, que es para usar la fecha. Y esta fecha será de formato corto como vimos anteriormente, exactamente. Y el premio, hay algo llamado moneda. Entonces si quieres ver todas las tuberías que quieres, solo
haces esto y todas ellas se colocarán y se mostrarán aquí. que puedas tener, por ejemplo, fecha, puedes tener número,
persona, y también rebanar. Y si también quieres mostrar datos JSON, toda esta tubería está disponible para mostrar tus datos de la manera correcta. Entonces por ejemplo, aquí voy a usar moneda. Entonces vamos a ahorrar y comprobar que el hielo que tenemos aquí que moneda es muy hermosa y también la fecha está formateada.
122. Mostrar los artículos de orden con precios subtotales: Entonces vamos a comprobar ahora qué estamos obteniendo del backend para mostrar los artículos del pedido. Entonces lo que voy aquí y abro la red y las Herramientas de Dev, entonces voy a ver que estoy consiguiendo aquí algunas peticiones. Por lo que tienes dos opciones. Una de las opciones de las que puedes consola log el ID de pedido de después de obtenerlo. Por ejemplo, cuando voy aquí a detalle, y luego puedes hacer un registro de consola y luego este orden de puntos para estar seguro de qué datos vienen del backend. O de lo contrario, puedes ir directamente a la pestaña Authentic torque y luego encontrar la solicitud que hemos llamado previamente para obtener el detalle del pedido. Por lo que lo consola, mira en el registro de la consola. Veremos que tenemos artículos de pedido y este ítems de orden es array. Por ejemplo, en nuestro caso aquí está vacío. Probemos otro pedido que tengo aquí o allá con algunos artículos. De acuerdo, tenemos otra. Podemos eliminar, ralentizar este, ir aquí o allá artículos. De acuerdo, aquí tengo dos artículos. Y como ven en cada pedido artículos, tengo ese producto y la cantidad. Por lo que tengo aquí para pedir artículos. Cada uno de ellos es a productos con una cantidad y para mostrarlos. Si revisamos aquí nuestra plantilla, tenemos tu nombre, categoría de marca, subtotal, y tenemos aquí precio total y cómo está contando todo eso. Tienes dos opciones. Una de las opciones se puede crear una tabla y mostrar estos datos o de lo contrario se puede hacer eso manualmente. Podemos hacerlo de forma manual y fácil haciendo también la estructura de campo o una cuadrícula, una cuadrícula dentro de este campo. Por lo que podemos decir también aquí que dentro de este conjunto de campos, necesitamos definir no el contenido, sino otra cuadrícula. Y esta rejilla tendrá la misma estructura que vimos anteriormente. Yo los voy a llenar. Entonces como ven aquí dentro de este conjunto de campos, definí un gran anuncio dentro de esta cuadrícula, hay columnas de dos, así que hasta que tengan igual a 12, porque tenemos 12 columnas disponibles. Por lo que necesitamos seis de esas columnas y todos estos datos e inflamación. Si vamos a revisar nuestro artículo de pedido, está bien, los tenemos exactamente como necesitamos. Por lo que ahora necesitamos agarrar los artículos de pedido desde aquí y luego poner la información en esa tabla. Es muy sencillo. También podemos hacer otra grilla debajo de ella. Por lo que será exactamente igual a esta cuadrícula. Pero vamos a sustituir estos datos de texto por el orden o los datos de pedidos. Pero esta cuadrícula se repita porque necesitamos múltiples elementos de pedido, necesitamos múltiples roles. Por lo que puedes considerar que esto es una fila y cada roca se
repetirá en base a los datos que vienen por elementos de orden. Entonces como vemos aquí, tenemos MD4. Md4, voy a poner dentro de él cada artículo de pedido. Por lo que voy a decir dejar de pedir artículo fuera, pedir que los artículos de orden. Entonces tendremos aquí, o los artículos que creo que tenemos aquí un error en el modelo. Dice que el artículo de pedido no está definido. Entonces creo que tenemos que volver al modelo para comprobar si todo está funcionando bien aquí. Tenemos aquí orden y luego el campo se llama artículos antiguos deben ser alterados artículos. Entonces volvemos de nuevo, vemos que el error está arreglado. Por lo que aquí no tenemos ningún tema. Y luego voy a reemplazar el artículo del pedido por estos datos. Por lo que primero necesitamos producto de artículo de pedido. Por lo que tenemos aquí artículo de primer pedido, y dentro de este artículo de pedido que es un producto, y dentro de este producto hay detalles del producto. Entonces antes que nada,
diré artículo de pedido, artículo primer orden
forzado, que obtuve de la LC4. Por lo que yo diría que pide producto punto artículo y luego me da el nombre del producto. Entonces así como se debe hacer. Entonces como vemos aquí, tenemos toda la información que conseguimos con este MD4. Y luego
lo mismo, será exactamente para su marca. Voy a revisar aquí, ir al producto, y el producto también será la marca. Necesitamos esa categoría. Pero veamos cómo se implementa esa categoría. Entonces vamos aquí y comprobamos si esa categoría también pobló. Por lo que necesitamos nombre de categoría. Por lo tanto nombre de punto categoría. Y también necesitamos el precio. Por lo que necesitamos revisar también esto. Por lo que tenemos dicho pedido artículo punto-producto. Esa cantidad de precio viene directamente con el artículo del pedido. Por lo que tenemos aquí el producto y la cantidad. Por lo que elegiríamos eso. Por lo que decimos ordenar artículo cantidad de punto. Y después de eso, el subtotal, veremos cómo podemos arreglarlo. Entonces tenemos aquí ojos de orden, tenemos cantidad tres, premiar computadoras y marca, y todo está funcionando perfecto. Por lo que necesitamos justo ahora el subtotal. El subtotal, necesitamos tenerlo así calculado. Por lo que podemos calcular multiplicando el precio con la cantidad. Es muy sencillo. Por lo que voy a ir aquí a copiar este y decir precio multiplicado por la cantidad. Tenemos aquí todo multiplicado. Entonces volvemos a revisar, vale, También
tenemos el precio viene calculando precio multiplicado por 3. Entonces llegamos aquí 750 y lo mismo para aquí. Podemos darle también, uh, banderas aquí como moneda y así por el precio que podemos dar aquí también una bandera o una moneda pipa. Entonces y entonces se mostrará así. Demos algo de espacio entre esas rejillas. Por ejemplo, tenemos aquí un poco pegajoso y así podemos hacerlo con más espacios. Por lo que puedo decir también esta grilla dar para mí margen inferior serán cinco. Y el mismo para la misma grilla. Por lo que se generará cada cuadrícula, tendrá el botón de margen cinco. Entonces como vemos aquí, todo es perfecto. Por lo que también podemos hacer esos tan audaces depende de ti. Prime NG también viene con algunas clases, son clases listas para hacer cosas audaces. Entonces si vas aquí a los copos Prime y verás algo llamado texto. Y en este texto tienes algunos estilos para que
puedas alinear el texto y así darle algo de estilo. Entonces por ejemplo, quiero dar esta encuesta de texto p. Entonces podemos ir aquí y luego podemos definir cada columna como una p, texto negrita. Por lo que tenemos todos ellos va a ser audaz. Entonces cuando
ahorramos, vamos aquí, tenemos todo es calvo. Por lo que ahora hemos definido todos estos rubros y también tenemos aquí subtotal. Necesitamos tener también aquí ese total,
para que el usuario pueda ver el subtotal y luego el precio total de todo el pedido. Al igual que como vimos anteriormente, cómo calculamos el precio total en el back-end. Para ello, también podemos definir otra cuadrícula para eso. Para que podamos tener otro div. Y este div tendrá una clase de grilla de pico. Y esta gran cuadrícula con contenían dos columnas. Una es para el título o la etiqueta del precio total y luego el precio total en sí. Entonces tendremos un div con P, llame a dos, y otro, tendremos p igual a, y aquí escribiré un precio total. Y aquí también, voy a definir ese premio total, que obtengo de la orden misma. Por lo que aquí voy a decir dame el precio total del pedido. Por lo que ordena el precio total de punto, guarde eso. Nos probamos. Veremos que nos dieron precio total. Es este precio la suma de los subtotales. Pero vamos a darle algo de desplazamiento para estar exactamente debajo de esas líneas como vemos aquí. Por lo que también podemos hacer eso definiendo algo llamado offset. Entonces cuando uses offset para esto, entonces empujará las columnas, algunos espacios, tirarlo obtendría el lugar correcto. Entonces quiero empujar a esos como por ejemplo, tenemos estos 2222, así que necesitamos compensar ocho, así 1234. Entonces aquí tendré las dos columnas. Por lo que compensaré columnas y le daré un descanso, de cuatro a dos. Entonces podemos hacer eso también. Es muy sencillo. Se acaba de decir que la primera columna tendrá offset de ocho. Y cuando digamos, veremos que se compensó debajo de ellos en el octavo lugar. Hagámoslos tan bien calvos como vimos anteriormente. Entonces podemos darle a éste, por ejemplo aquí, clase audaz. Entonces tengo p texto negrita, y otro tendrá perno PTX. Y también puedes darles algo de estilo como el color. Por lo que podemos dar a todo el contenido de la cuadrícula para que sea de color, por ejemplo, verde. Por lo que diría estilo y en ya que estilo diré color, y luego se puede definir un color verde. Entonces después de que guardes eso, veremos que todo consiguió el verde en esta grilla. Y esta cuadrícula tiene un texto en negrita, que tiene precio y el precio total. Démosle también algo de moneda como lo hicimos anteriormente, para tener formato de moneda. Está bien, Bonito. Ahora tenemos nuestra tabla de pedidos con esa divisa. Como te dije antes, tienes opción de usar una tabla, pero usamos tabla muchas veces. Yo quería usar algunos específicos con una cuadrícula para que puedas acostumbrarte a las rejillas.
123. Dirección de tu pedido y información del cliente: Por lo que por ahora terminamos los detalles del pedido y pedidos de artículos. Haremos lo mismo para la dirección de pedido en su dirección es exactamente lo mismo como viene con una información de usuario y también con el detalle del pedido. Entonces sabré qué usuario lo ordenó y además, conozco la dirección, y eso es todo. Entonces podemos ir aquí y luego definir otro conjunto de campos. No podemos tener otra grilla o div, podemos decir una grilla de pico. Y dentro de este vaso de precipitados, y voy a tener unas columnas. Por lo que tendré un tres columnas y cada una de ellas contendrá algunos datos específicos. Entonces voy a decir H5, dame otra dirección o dirección del cliente depende de ti cómo quieres ponerle nombre. Y luego dentro de este B, obtendré los detalles del pedido que vienen del back-end. Entonces lo que queremos aquí para mostrar toda esta información para ahorrar tiempo. Ya lo tengo definido. Entonces tenemos aquí el pedido cualquiera de las direcciones se ordenará esa dirección de envío, y luego me salté una línea y luego la dirección de envío ISA dos, y luego el zip y luego la ciudad cerca uno del otro. Entonces BreakLine donde tendré el país de la orden. De acuerdo, vamos a revisar esos cambios, cómo se convertirá en el front end. Podemos volver a ir aquí. De acuerdo, tengo aquí la dirección, calle
Flower, 13, Praga, República Checa. De acuerdo, necesitamos mostrar también el nombre del cliente. Entonces en la siguiente columna, diré aquí h5. Y como recuerdas que la información del cliente viene con una clase de usuario. Y dentro de esta clase de usuario tendré el nombre. Por lo que podemos tener también aquí información sobre el usuario. Entonces escucharé decir eso, dame la orden de ese usuario, y luego después de eso, es mejor tener el nombre. Entonces guardamos eso. Está bien. Yo también tengo mi nombre. También puedes en esa otra información como correo electrónico o por ejemplo, número de teléfono. Por lo que podemos tener aquí otro h5, podemos decir info de contacto. O definiré, por ejemplo, el teléfono. Por lo que voy a decir aquí Orden y no al usuario, pero va a estar viniendo exactamente en el nivel de orden. Entonces llegaremos aquí o allá y luego formaremos. Entonces guardamos eso. Vamos otra vez. De acuerdo, hemos llenado nuestro detalle de pedido, así que todo está funcionando bien. Ahora, tengo aquí dos pedidos, pero puedes agregar más pedidos si quieres. Entonces aquí mi orden está bien. Tenemos de todo. Tenemos fecha ordenada, estado del
pedido, vamos a ver en la siguiente conferencia, usamos la moneda que usamos, cómo usamos la cuadrícula, y también utilizamos la información sobre los datos de captura del pedido y los artículos de pedido.
124. Actualizar el estado de tu orden: De acuerdo, en esta conferencia vamos a ver cómo podemos actualizar el estado del pedido. Como recuerdan, tenemos algún estatus específico para los mayores. Y ahora vamos a hacer nuestro llenar esta lista y luego tendremos todo el estado del orden. Y cuando seleccionemos uno de estos estatus, entonces obtendrá, por ejemplo, nitrificación para nosotros por actualizar el estado de la orden. Entonces como primer paso, llenemos esta lista o este desplegable. Como ustedes saben aquí no estamos usando un formulario, por lo que podemos usar el modelo NG, que es un enlace bidireccional para leer e insertar datos a la lista desplegable. Entonces si vamos al prime end, no
podemos ver en el desplegable que tenemos el básico. Vamos a utilizar este básico. Entonces el básico contendrá, por ejemplo, pedirá un rayo del estado y luego puedo usar el modelo NG como se menciona aquí. Por lo que necesitamos definir las opciones y el modelo NG. Entonces, antes que nada, tengamos las opciones. Y como vemos aquí, las opciones vienen como array. Entonces tomemos esta parte y luego la coloquemos en nuestro componente de detalle de pedidos. Por lo que podemos ir aquí donde hemos definido el estado del pedido. Entonces tenemos aquí el desplegable, y luego tenemos opciones. Serán estados de orden, como si tuviéramos múltiples estados dentro de este orden o esta matriz, y tenemos un estado seleccionado. Entonces, en primer lugar, necesitamos llenar el desplegable, el desplegable. Como recuerdan, hemos definido previamente en el ítem de la lista ordenada, alguna matriz de estado de pedidos. Y esta matriz de estado de orden, contendrá todos los estados que pueden venir del front-end. Pero como vemos, no es array, array, sino diccionario. Y vamos a mapear este diccionario a y cambiarlo a array. Pero primero, podemos poner esta constante en archivo adicional o archivo
externo para que podamos leer de ella y luego podamos usarla en los ambos componentes. Por lo que aquí en nivel ordenado, puedo definir un nuevo archivo. No podemos decir constantes de puntos más antiguas. Podemos llamarlo así. Y luego dentro de esta constante más antigua, voy a poner este estado de pedido y exportado para poder usarlo en otros lugares. Yo diría aquí, exportación estado de orden const. Y este estado de orden será array o el diccionario de adherir a mantener. Todo está funcionando bien. Vamos a importar este estado de orden desde el archivo de constante. Entonces subimos un nivel y obtenemos la constante de orden. Entonces, asegurémonos de que todo esté funcionando bien por ahora en nuestra lista de pedidos. De acuerdo, todo está funcionando y el mapeo está funcionando bien. De acuerdo, Ahora vamos a usar esta constante en los componentes de detalle de orden. Por lo que vamos a ir al componente y tomar también de nuevo importar también el estado
de la orden desde y luego también un paso arriba y luego me dan la constante. De acuerdo, pero como recuerdas que dijimos que bajó excepto solo array. Por lo que necesitamos mapear esta matriz o este diccionario para que sea como una matriz, entonces podemos usarlo también. Por lo que definimos aquí el estado de orden es, por lo que podemos usarlo también. Podemos definir eso. Entonces podemos decir aquí estados de orden, que es por ejemplo, matriz
vacía por ahora. Por lo que necesitamos definir eso. Entonces en Anki on init, podemos decir este estado de punto. Por lo que necesitamos mapear el estado del pedido y es mejor llamarlo antes de obtener el pedido para que el desplegable esté listo y luego obtendremos el pedido. Entonces el método que definí aquí, y luego voy a ver cómo podemos mapear estos estados antiguos a array de orden. Entonces lo que necesitamos para el desplegable, en realidad, necesitamos opciones, y esas opciones están consistentes como vimos anteriormente desde ID y nombre. Por lo que cada subasta tendrá ID y un nombre, nombre para mostrar e id 4 usando y enviando a la base de datos. Entonces si recuerdas, hemos utilizado una función que se llama teclas de punto de objeto. Entonces puedo pasar por un diccionario para todos los objetos dentro de un diccionario. Entonces cuando digo aquí, objeto.Crear de este objeto, entonces me dará 0, 1, 2, 3, 4. Probemos eso. Por lo que yo diría teclas de punto de objeto del estado de orden. Y podemos hacer un registro de consola para ello. Entonces para estar seguro de que todo está funcionando perfecto, quiero que entiendas por qué estoy haciendo esto. Entonces primero, necesitamos consola log object dot keys de estado de orden. Entonces vamos a una de las órdenes. De acuerdo, tengo 0, 1, 2, 3, 4. Está bien. Pero no tenemos ningún valor. No tenemos ningún nombre de este estatus. Cómo podemos hacer eso cuando creo otro registro de consola. Y entonces tendré aquí otro log de consola. Y digo, por ejemplo, dame el estado de la orden y luego digo 0. Entonces voy aquí, diré que 0 está doblando y el color es primario. Entonces cuando quiero llegar a uno de los estados del pedido, tengo que especificar la clave y estoy obteniendo estas claves a través de claves de objeto. Y como recuerdas, conseguimos una matriz. Entonces a través de bucles, a través de esta matriz, puedo hacer algo con él. Entonces vamos de nuevo aquí, objeto de status dot map. Por lo que voy a recorrer o pasar por todos estos elementos, generar una nueva matriz en diferente estilo que se ajuste a mi desplegable. Entonces cuando hago mapa, paso por todas las llaves. Entonces diré clave, por lo que volverá para mí clave por clave. Vamos a mover este registro de consola aquí y colocarlo aquí. Y en lugar del 0, diré
que me des una consola para mí el estado de orden de la clave que se devuelve de esta matriz. Entonces cuando ahorramos, notamos que consigo todo el estatus con tanta facilidad. Podemos mapear todos estos elementos y hacerlos como array de ID y etiqueta o ID y nombre. Y como saben, ese mapa es sólo para cambiar el estilo de diccionario o estilo de matriz. Para que podamos hacer algo diferente. Podemos construir nuestro propio array. Entonces diré aquí, devuelto para mí, por cada clave por la que estás pasando, esta matriz de objeto se devuelve para mí ID. Y esta identificación será la clave en sí. Y entonces el nombre será estado de orden y no estado de orden en sí, la clave. Y dentro tenemos no sólo el estado del pedido, tenemos color y etiqueta. Entonces voy a usar la etiqueta porque necesito el nombre. Quiero mostrar este nombre en nuestro desplegable, así que diré etiqueta, vale, guardamos para ver el resultado de todo este mapeo, entonces necesitamos asignarlo a constante. Entonces diré que este estado de orden de puntos es igual a claves de objeto y todo este mapeo. Por lo que no podemos guardar eso e ir de nuevo a nuestra aplicación. Ya veremos que GOT el desplegable de objeto, objeto. De acuerdo, veamos cuál es el problema, por qué tenemos esto. Entonces podemos consola log yo siempre, por ejemplo, cuando no sé qué está pasando o cuando obtengo este
objeto, array de objetos, consola registro las cosas. Entonces si recuerdas, hemos asignado al desplegable esta esteatosis más antigua y voy a consola logarla. Entonces quiero ver qué hay ahí. Entonces como ven aquí, tenemos, tenemos una matriz, vale, está bien. Tenemos ID y luego nombre doblando el problema aquí, ese m prime energy que necesitas especificar qué etiqueta quieres mostrar dentro de tu matriz. Entonces si quieres mostrar el nombre, entonces tienes que decir opción etiquetada, entonces nombre. Como ven aquí, definió nombre y código. Para que pueda decir que puede mostrar ese acorde o puede mostrar el nombre. Por lo que tenemos que hacer también lo mismo. Por lo que necesitamos decir en nuestro desplegable, no por ejemplo, me
muestres el estado del pedido como objeto, pero muéstrame el nombre del mismo. Y la etiqueta de opción será el nombre. De acuerdo, vuelve a nuestra solicitud. Veremos que obtuvimos el nombre mostrado exactamente cómo definimos en nuestra constante. De acuerdo, ¿Qué tal ahora modelo NG? Y tú modelas, me devolverá ese
elemento seleccionado y además le puedo asignar un elemento seleccionado. Así que el estado seleccionado, será el elemento seleccionado de este desplegable, por lo que necesitamos definirlo. Y podemos decir aquí también estado seleccionado, será cualquiera. De acuerdo, veamos cómo podemos obtener el valor. Por ejemplo, quiero cambiar cuando cambie de aquí a esto, y esto a esto, quiero ver los cambios. Quiero consola de registro. ¿ Cuál es el resultado de este cambio? Entonces es muy sencillo. En desplegable, solo puedes definir un método, método de salida en tu desplegable, que se llama cambio. Y cuando cambiamos algo, puedes crear un método,
por ejemplo, sobre el cambio de estado. Y en este cambio, puedes pasar una palabra clave que se llama evento, y guardamos esta. Volvemos a ir a nuestra aplicación, definimos el método y decimos sobre cambio de estado y este evento podemos decir por ejemplo, puede
ser evento como este. Y vamos a la consola registrar este evento para que podamos ver qué está pasando aquí. Por lo que podemos decir aquí, evento de registro de consola, es mejor también eliminar todos los registros de consola, que hemos definido previamente para tener una consola clara. Por lo que tenemos aquí registro de consola del evento cuando voy a cambiar este estado. Entonces voy a cambiar. Pero no estoy recibiendo nada esto porque eso no podemos usar el cambio. Es exactamente como te dije antes sobre el estilo. No se puede usar una clase en estos miembros. Tienes algunas claves específicas que tienes que seguir. Por lo que siempre te animo a leer la
documentación del componente cuando quieras hacer algo. Entonces cuando vaya aquí, quiero ver cuando cambie lo que va a pasar. Por lo que también podemos enterarnos de todo esto. Ya ves, tienes muchos métodos. Por ejemplo, hay onclick, onchange on filter. Entonces hay muchas cosas. Entonces lo que necesitamos exactamente no cambia. Entonces cuando reemplace este cambio por cambio, entonces veré esos resultados. No es como un desplegable estándar. No es como un botón estándar. Por lo que tienes que leer la documentación y ver lo que necesitas aquí. Entonces, intentémoslo de nuevo. Está bien, bien. Tenemos evento original y hay valor y el valor es uno. Por lo que el valor devuelto como objeto. primer campo es el id, y el segundo es el nombre del estado. Entonces por ejemplo, he fallado aquí, entonces tendré objeto, que es valor e ID y nombre. Entonces es mejor de alguna manera también podemos devolver solo el ID porque vamos a usar solo el ID para almacenarlo en la base de datos o cargar el estado del pedido en base a eso. Por lo que podemos ver también en la documentación que tenemos también, no etiqueta opcional sino valor de opción. Por lo que el valor de opción se utilizará para este campo o para este perro abajo, sería el ID. Por lo que anteriormente hablamos muchas veces sobre eso. Y solo quiero que sepas cómo
especificar exactamente las cosas y las entradas para el componente de Prime NG. Volvemos a cambiar, Vale, tenemos aquí, de nuevo, tenemos el valor dos, así que estamos obteniendo sólo el valor. Entonces sobre cambio de estado, voy a actualizar el estado de la orden en base a cómo lo conseguimos en el back-end, cómo lo hicimos en el back-end. Entonces como recuerdas, estaba creando un método de poner mal escrito y luego post. Simplemente estoy enviando el estado al orden específico en la API de nuestros pedidos. Por lo que cuando envíe esta solicitud, obtendré el estado actualizado y luego volveré a obtener el pedido. Por lo que sólo necesitamos pasar el estatus. No necesitamos pasar todos los datos del pedido como lo hicimos anteriormente con el producto y categoría. Entonces para eso, necesitamos un servicio. Este servicio será orden de actualización. Y como recuerdan, hemos definido todos los servicios que necesitamos para actualizar el pedido. Por lo que después de actualizar el pedido, no
voy a enviar el pedido en sí. Voy a mandar sólo el estatus. Por lo que voy a decir aquí status. Y como recuerdan, en el JSON, estamos enviando el status así, status
JSON y dos, por lo que también puedes enviar el status, dique eso o definir tu propio tipo. Entonces voy a tener estatus. Y el estatus será una cuerda y lo que obtendré en orden. Por lo que con el fin conseguiré el pedido en sí después de actualizar mi pedido. Y además, necesitamos pasar el ID de pedido, que también será cadena. Por lo que necesitamos aquí también, o su DNI. Y luego enviaré el estado del pedido. Entonces aquí es diferente, pero por supuesto puedes volver a enviar el pedido y lo hará automáticamente, el back-end obtendrá sólo el estado como vimos en la parte back-end. Por lo que aquí tenemos orden de actualización. Volvamos a nuestro componente y creemos o llamemos al servicio de actualización. Por lo que iría a pedir detalles de nuevo y onChange, llamaré no evento, pero diré este punto Servicio de Pedidos, Actualizar orden. Y orden de actualización. Voy a empanar el estado como ven aquí, tenemos cadena de estado, enviaré un objeto tendrá estado, y el estado será valor de punto de evento, como vimos previamente en el registro de consola. Y además, necesitamos enviar también el ID de pedido. Por lo que necesitamos también aquí, cuando reciba el pedido, necesito decir esto, el ID de pedido. Entonces aquí tenemos todo está bien. Y así como platicamos anteriormente, dijimos que no se ejecutará hasta que se suscriba a ella. Por lo que tenemos aquí orden y tal vez podamos, por ejemplo, consola de registro el actualizado más antiguo. Entonces vamos a guardar y volver a ir a nuestro front end y comprobar para que podamos decir enviado, está
bien, Se ha actualizado y tenemos el nuevo estado. Entonces tenemos estatus para, vale, hagamos otro fallido. Entonces podemos ir aquí y veremos que el estatus es para,
vale, así que por ejemplo, esto falló. Volvemos a ir a las órdenes. Veremos que también cambió el estatus. Por lo que vamos de nuevo, actualizamos entregamos. Nosotros vamos aquí y el estado que se ha actualizado. Por lo que es muy agradable tener como alguna notificación para el usuario. Como siempre lo hicimos, que todo está bien. Entonces cuando haga clic aquí, entonces obtendrá una notificación que está bien, el mensaje o el otro, el pedido se actualizó para eso. Si recuerdas, hemos creado o llamado al Servicio de Mensajes y el método que los terroristas harán por mí lo que yo quiera. Para que podamos copiar esta parte y luego ir de nuevo a nuestra lista de detalles de pedidos. Y decimos que después de este eje, está bien, Show Message Service saxos, y luego decir que el orden se actualiza. De lo contrario, cuando haya un error, mostraremos el error. Pero primero, llamemos al servicio de mensajes. Entonces vamos aquí a nuestro constructor y luego llamamos servicio de mensajes privados, que será Message Service, que viene de la energía Prime. Y luego salvamos, lo intentamos de nuevo. Está bien, todo está funcionando bien. Por lo que se actualizó el pedido. Y si volvemos a ir aquí, está bien, está funcionando bien. Entonces cuando volvamos a ir y comprobar si hay error, entonces muéstrame el error. Entonces aquí después de la suscripción, puedo decir también que si hay error en general, entonces hazme por mí un mensaje de error y decir que el pedido no está actualizado. Pero claro que el Estlund se está quejando aquí de que no usamos este error, por lo que puedes eliminarlo o también puedes imprimirlo en los detalles. Pero para mí ahora, solo mostraré orden no está actualizado y así aquí necesitamos eliminar el pedido por lo que no estamos usando esos. No solo estamos mostrando mensajes después de la suscripción, falla o éxito, bien, como ves aquí, tenemos ahora todo está actualizado y nuestro estado de pedido está actualizado. Una última cosa es que cuando voy a pedidos, por ejemplo, tengo aquí una entregada, pero cuando voy aquí, todavía lo veo como pendiente. Esto es carne de res provocada que cuando estamos cargando el pedido, no
estamos actualizando el estado seleccionado en el desplegable. Así que simplemente sólo tienes que ir aquí y decir que estos puntos estado seleccionado se ordenará estado de punto. Entonces eso es todo. Solo necesitas hacer eso para asegurarte de que estás entrando en el estado correcto. Por lo que como ven aquí, tenemos una entregada y se puede actualizar fácilmente.
125. Crear página de inicio de sesión: Muy bien, ahora vamos a ver cómo podemos crear el componente de inicio de sesión. Pero primero, echemos un vistazo a nuestra gráfica sobre la estructura de nuestro proyecto. Como recuerdan, que hemos creado una biblioteca que se llama usuarios y biblioteca de autenticación. Y en esta biblioteca, se compartirá entre todas las aplicaciones. Porque no necesito repetir el componente de inicio de sesión en cada aplicación. O la página de inicio de sesión, que contendrá correo electrónico y contraseña. Voy a crear esos componentes para que también se compartan en la biblioteca del usuario. Entonces como ven aquí, tendremos un componente de inicio de sesión y un componente de registro. Y además de eso, contaremos también con los servicios que me
van a ayudar a iniciar sesión y registrar un nuevo usuario. Como leíste en el artículo anterior, necesitamos hacer muchas cosas con respecto a las autenticaciones. Tenemos muchas conferencias y muchas características para implementar dentro de esas conferencias en esta sección. Entonces, en primer lugar, les voy a mostrar cómo crear el componente de inicio de sesión para ser compartido entre todas las aplicaciones. Empezaría primero a ser, por ejemplo, sólo templando. Entonces tendremos solo HTML,
CSS, tendremos bonita página de inicio de sesión, y luego vamos a ver cómo conectarla a la aplicación,
que es aplicación de panel de administración. Y luego más tarde cuando vamos a trabajar cuando el tema de la obligación, también
estábamos conectados ahí. De acuerdo, como lo hacemos siempre, vamos a crear un componente que se llama login. Por lo que estoy usando una consola ECS para crear un componente. Entonces aquí lo voy a poner dentro de la carpeta Pages, y entonces el nombre del componente será un login. Y también tenemos aquí donde es un proyecto. Entonces no estamos usando admin, estamos usando la biblioteca del usuario y además, voy a saltarme el estilo. Por lo que ya tenemos estilo público y así necesitamos un selector. Por lo que pondré usuarios login como selector porque tengo usuarios, estoy dentro de la biblioteca del usuario, por lo que el prefijo serán usuarios y luego saltando las pruebas. Entonces ejecutamos este componente o este comentario, y veremos que el componente se crea dentro de la biblioteca del usuario. Entonces tenemos aquí múltiples bibliotecas, si recuerdas, una de ellas es usuarios, y tenemos aquí páginas. Uno de ellos es una página de inicio de sesión. La página de inicio de sesión que estoy planeando hacer es ésta. Por lo que tenemos aquí como alguna imagen y también como alguna tienda de bienvenida admin, nombre de usuario o correo electrónico, contraseña y enviar. Y entonces tenemos aquí el espacio vacío. Entonces vamos a crear el diseño para eso. Vamos a utilizar el sistema de red de energía prime para crear todo este diseño. Pero primero, déjame hablar de las rutas. Aquí tenemos rutas. Entonces también cuando vamos a tener un login, necesitamos una ruta para iniciar sesión. Entonces cómo podemos hacer eso, como recuerdas en la aplicación admin, en el módulo app, tenemos sus propias rutas porque esos componentes se encuentran dentro de este módulo también, o dentro de esta categoría también. Por lo que tenemos aquí los componentes y que las rutas se ubican aquí. Pero como recuerdas que los creamos componente de inicio de sesión dentro de la biblioteca del usuario. Y para eso, voy a poner aquí la ruta para que los usuarios tengan su propia ruta. No debe entrar en conflicto con esas rutas porque este módulo se utilizará también en el módulo admin, por lo que no tendremos ningún problema. Entonces vamos a crear primero la ruta. Como recuerdan, hemos creado constante que la llaman rutas. Esta ruta tiene un tipo que también se llama rutas. Y estas rutas serán una matriz de objetos donde pondré mis rutas. Por lo que primer objeto tendrá una ruta que se llama login. Entonces cuando ponga en mi aplicación slash login, entonces iré a este componente, que es el componente login, ok, ahora he creado aquí la ruta, y veamos si estamos trabajando bien. Entonces mi asumo que cuando ponga aquí login, entonces obtendré la página de inicio de sesión. Pero como ven aquí, tenemos un error que no existe porque módulo de
usuarios ya no se usa dentro del módulo de aplicación, que se llama módulo. Entonces aquí tenemos el módulo de aplicación. Tenemos que llamar también al módulo del usuario. Por lo que aquí tendremos una adición de estos módulos. Tendremos algo más que se llama Molécula Usuarios. Por lo que tendremos aquí módulo de usuarios, que viene de los usuarios de la biblioteca y volver a comprobar
eso, que se importa automáticamente. Estará aquí como módulo de usuario desde mi espacio de trabajo. Entonces organicemos un poco este código y lo pongamos aquí. Está bien, Niza. Vamos a revisar de nuevo si vamos a trabajar bien. Entonces diré login, ok, Aún así, estoy obteniendo error de que esta ruta no existe. ¿ Por qué? Porque si recuerdas cuando creamos las rutas aquí. El módulo de aplicación, dijimos algo así como módulo router, llamamos sequía y módulo. Y luego dijimos para root, y luego llamamos a la ruta, que tiene analizadores y componente. Debemos hacer lo mismo en el módulo del usuario. Por lo que aquí también, en módulo de usuarios, llamaré al módulo de ruta. Y este módulo router no habrá luchado root porque la raíz es aplicación. Por lo que la aplicación tendrá una raíz. Y el módulo de este usuario es hijo de este módulo. Por lo que estamos llamando a los usuarios módulo dentro de nuestro módulo de aplicación. Entonces de esta manera, este módulo es un niño y quiero usar a los autores de este niño dentro de mi ruta de aplicación. Por lo que voy a decir para niño, y luego voy a especificar que rutas constantes, que he definido aquí. Guardemos eso y comprobemos si todo está funcionando bien. Iré aquí otra vez y diré, Mira en mi inicio de sesión funciona. Por lo que ahora estamos llegando al un componente que hemos creado previamente, que se llama login component future, voy a hablar de módulo de carga perezoso. Entonces tenemos aquí cargado el módulo totalmente, Exactamente. Por lo que hablaremos más adelante sobre la carga perezosa, que está haciendo que el tamaño del paquete para la carga perezosa sea el más pequeño, ya que veremos eso más adelante. En primer lugar, vamos a empezar a templar los componentes de inicio de sesión. Entonces antes que nada, voy a tener el, este gris, el fondo gris. Entonces voy a tener un contenedor de inicio de sesión. Entonces tendré, por ejemplo, div, y voy a usar este bloqueo y también en forma de registro. Por lo que tendremos login register y login register div contendrá también el panel, el panel el cual contendrá esta área blanca. Entonces tenemos aquí todas las inscripciones y aquí tenemos un panel. Entonces vamos a crear eso. Por lo que voy a crear otro div y lo voy a dar Login Register panel. Y luego voy a jugar con equidad. Pero primero, recuerdas que hemos creado el estilo público. Por lo que podemos usar también este estilo o esta clases en nuestro estilo público. Entonces en primer lugar, voy a tener aquí la biblioteca del usuario, si recuerdas, hemos creado un registro de inicio de sesión y se llama a los usuarios y usuarios en el nivel de aplicación, pero aquí no lo estamos llamando, por lo que necesitamos llamar a los usuarios como bien. Entonces aquí podemos decir clips y luego importar el estilo que quiero importar, que es labios, usuarios y usuario SCSS, porque tenemos aquí llamando a todos los componentes. Pero aquí eliminemos éste porque vamos a hacer sólo uno, por ejemplo, para un login y registro. Por lo que podemos llamarlo iniciar sesión y registrarse. Por lo que de primera clase de este registro de inicio de sesión será éste. Y luego dentro de eso voy a tener panel. Entonces como ven aquí, tenemos aquí como algún gradiente, Va de negro a gris. Existen muchas herramientas para crear gradiente. No tienes que hacerlo manualmente, puedes copiarlos. Entonces voy a hacer eso que se llama generador CSS y generador CSS3, puedes elegir lo que quieras. Por ejemplo, desea un degradado y luego puede especificar el degradado que desea crear. Y luego puedes copiar todo el CSS y luego usarlo allí. Para mí, he recogido algún gradiente, que es exactamente para nuestro caso. Por lo que tendré aquí el gradiente de gris a negro. Como ven aquí. Eso ya lo hemos definido y lo guardamos todo. Nosotros todavía, tenemos error. Dice que el archivo no coincide con el estilo porque aquí
hemos dicho que mira solo por lo que necesitamos que inicie sesión y se registre. Y lo hicieron porque ya no lo necesitamos. Entonces, vamos a guardar eso. Y luego veremos que no hay fondo gris porque debemos definir una altura. Por lo que tenemos que decir que la altura de esta página o este div será del 100%, o puedes usar VH, por lo que decimos 100 de una altura de vista. Entonces en este caso, tendremos la altura exactamente como queremos. Tenemos aquí el gradiente, y luego como ven aquí, tenemos un panel blanco. Entonces vamos a crear este panel. Entonces voy a hacer, quiero tener un ancho de este panel. Por lo que tendrá, por ejemplo, 650 píxeles. Y así tendrá una altura que es de 525 pixel, es como lo he medido, y el color de fondo será blanco. Tienes también la opción de usar en un NG primo muchos colores, y esos colores se definen así aquí. Entonces si solo inspeccionas en algún elemento, los
verás aquí abajo. Para que puedas usar todos esos colores. Por ejemplo, el blanco es suface a. Así que usaría este color es mejor para hacer unificado todo el código. Entonces voy a decir aquí var, así que fase a, está bien, vamos a comprobar eso. De acuerdo, tenemos aquí se crea el espacio en blanco, pero necesitamos ponerlo en el medio. Entonces cómo podemos hacer las cosas en medio. Entonces tendré aquí posición absoluta, y entonces puedo posicionarla como. Dejado estar 50 por ciento, como en el medio. Y también desde arriba será del 50 por ciento también. Pero necesitamos dar márgenes. Entonces como ven aquí que tiene algún margen,
vale, bajó, pero es demasiado porque como saben, cuando se pone algo en el medio, hay
que medir menos medio tamaño del panel. Entonces podemos decir, por ejemplo, que se puede hacer así. Se puede decir Calc 2 por ciento menos la mitad de 650 es de 325 pixel. Y entonces será en medio. Y también necesitábamos en medio de este verde desde arriba. Entonces podemos decir también, Calc 50% menos 525, digamos por ejemplo, son 260 píxeles. Entonces de esta manera, podemos decir que esto puede ser en medio, como ven aquí. Y cuando redimensiones la pantalla desde la altura y el ancho, se quedará en el centro siempre, bien, dentro de este panel ahora vamos a tener media imagen y la mitad del contenido donde tengo que poner mi teléfono, it sintió así que necesitamos una nota. Entonces la cuadrícula tendrá columna, ya
sabes, que esa cuadrícula tiene un 12 columnas. Por lo que la rejilla se ubicaría dentro del panel. Entonces diremos que me den todo esto como cuadrícula y
me den seis columnas para la imagen y seis columnas el contenido. Entonces vamos a hacer eso. Dentro del panel, voy a dar div, que es tiene cuadrícula p. Y dentro de la cuadrícula tendré también otro div, que tendrá P columna menos y seis, porque tenemos seis columnas para la imagen. Y dentro de eso, voy a poner la imagen misma. Por lo que he imaginado definido y lo copié en la carpeta evaluada, pero carpeta Assets de la aplicación. Porque aquí no tenemos carpeta de activos. Por lo que es necesario especificar la aplicación que obtendría de la imagen. Por lo que en la aplicación admin, vamos a colocar en la carpeta de activos nuestra imagen, tenemos imágenes. Y luego voy a colocar aquí la foto de inicio de sesión. Entonces aquí tenemos que decir que la fuente de imagen estará exactamente en la carpeta de activos. Por lo que los activos, automáticamente tomará la aplicación, están ejecutando la carpeta de activos de la aplicación, imágenes. Y entonces podemos decir login. Y eso lo guardamos. Nosotros lo revisamos. Ya vemos, vale, La imagen se coloca exactamente en ese lugar. Entonces ahora hacemos la segunda columna que contendrá nuestra propia forma. Por lo que diría div dot de nuevo la columna 6. Y luego dentro de la columna 6, voy a tener, como ven aquí, que tenemos un título y luego la propia forma. Por lo que no podemos simplemente decir que quiero tener h3 para el título. Diré bienvenido. Y también quiero tener H2,
por ejemplo, página de inicio de sesión. Y entonces tenemos que ahorrar eso. Y luego veremos que tenemos aquí página de bienvenida y de inicio de sesión. Y debajo de ellos, como vimos que necesitamos crear la forma. Entonces aquí tenemos que crear un formulario. Por lo que definiría otra cuadrícula. Podemos decir así, no se
puede considerar la cuadrícula como una fila. Entonces aquí de nuevo, podemos decir que div se llame 12 o sí, porque los necesitamos uno debajo del otro. Y aquí colocaré el primer componente, que es como el componente de correo electrónico. Y además, estoy aquí, vamos a colocar la contraseña. Tenemos que colocar ese botón enviar, pero trineo hacer algo. Puedes, por ejemplo, si recuerdas, en la biblioteca de NG prime tenemos componentes como este. Tenemos este ícono y luego el usuario. Por lo que sería genial si hacemos lo mismo para usar también este componente. Entonces tenemos aquí grupo de entrada, y tiene usuario y nombre de usuario, por lo que podemos copiar lo mismo para eso, o podemos nombrarlo como correo electrónico. Por lo que tenemos aquí usuario, lugar holder será correo electrónico y lo mismo será para input-group, pero vamos a poner contraseña y el ícono de contraseña, como yo sé, está bloqueado. Por lo que este grupo tiene un lapso para el ícono y así la entrada en sí. Vamos a revisar nuestra página. De acuerdo, lo tenemos todo, pero no está estilizado porque creo que no nos dieron los estilos de Prime NC. Yo les diría por qué. Porque estamos aquí en un nuevo módulo y
estamos trabajando en un componente que no está en el módulo de aplicación. Por lo que este módulo no puede ver los módulos de prime y G que importamos en el nivel de aplicación, en la aplicación admin, como esos. Porque necesitamos importarlos ahí también. Posteriormente cuando hagamos refactorización, veremos cómo crear un módulo para eso. Y entonces podemos llamar a este módulo para todos los módulos de NG prime. Por lo que no podemos ser usados tan bien en todas partes. Entonces creo que este está usando módulo de texto de entrada para que podamos usarlo también en nuestro módulo de usuarios. Entonces volvemos a nuestro módulo de usuarios y luego importamos ese módulo también. Entonces diríamos aquí, módulo
de texto de entrada, bueno para mí. Como vemos aquí, lo estamos importando desde el texto de entrada de energía Prime. Volvemos a revisar nuestra aplicación y vemos que todo está funcionando bien. Entonces, pero tenemos como aquí algunos, está marcando totalmente al panel. Tengamos algo de relleno. Entonces tal vez podamos dar por esta columna, ese contenedor del lado derecho, más relleno. Por lo que podemos decir que el relleno en general será, por ejemplo cinco. Entonces cuando ahorremos y comprobemos eso, acuerdo, tenemos ahora un p-adic más agradable. Y para la cuadrícula que está conteniendo los controles o las entradas, podemos darle también un margen superior como cuatro, para que podamos hacer espacio entre los títulos y también la forma misma. También puede hacerlo más grande. Podemos tenerlo como seis, vale, ahora está mejorando. Entonces aquí tenemos ahora el título, los insumos. Aquí todavía lo tenemos como texto. Por lo que necesitamos cambiar el tipo de esta contraseña de entrada para que sea contraseña. Y luego necesitamos llamar a un botón. Y aquí el botón que ya hemos creado o lo
hemos visto ya en su biblioteca prime y g. Por lo que tenemos aquí múltiples botones. Por lo que también necesitamos importar el módulo moderno, que es el módulo de usuarios finales. Por lo que podemos tenerlo aquí también. Puedes crear tu propia constante para módulo UX, pero creo que en el módulo de usuarios no vamos a usar tanto tú siguiente módulo, tendremos aquí en el módulo inferior y módulo de texto. Por lo que de nuevo vamos aquí otra vez y usamos uno de los botones. Por ejemplo, usemos este, el estándar. No lo vamos a complicar. Lo llamaré enviar o iniciar sesión depende de usted. Entonces cuando ahorremos, vamos aquí otra vez, veremos que tenemos el botón de enviar. Puedes especificar las clases que deseas también para los botones, unos cuantos, recuerda, por lo que queremos hacer este botón con ancho completo en el contenido Así podemos hacer también. Como recuerdan, en la descripción o en las propiedades, tenemos algo llamado clase de estilo. Por lo que podemos darle una clase también. Por lo que podemos decir aquí, botones tipo clase será full btn por ejemplo. Y luego tenemos que usar esta será la clase y darle unas propiedades,
por ejemplo, en el registro de inicio de sesión. Y aquí podemos decir el btn completo, tendremos un trigo que es del 100%. Entonces cuando guardemos y volveremos a ir a la aplicación, veremos que tenemos botón de ancho completo. De acuerdo, vamos a añadir también algo de validación. Si recuerdas, cuando queremos agregar validación, necesitamos usar un grupo de formularios y el grupo anterior, vamos a usar el generador de formularios para eso. Entonces primero, necesitamos combinar esta forma y usar algo llamado form-grupo. Y el primer grupo tendrá una valiosa o la constante que se crea en el archivo ts, que tendrá la forma misma exactamente como lo hicimos con categorías, con productos, con pedidos. Todo esto, ya lo hicimos y ya lo explicamos. Por lo que voy a dar aquí un nombre que se llama login form group. Pero aquí se está quejando de que no hay entrada para el reagrupamiento foráneo porque necesitamos importar también algunos módulos, como cuatro módulos. Y así módulo de forma reactiva. Y esos módulos se definen en formas angulares como vimos anteriormente y hablamos demasiado de ello. Entonces volviendo al archivo ts, lo
hice rápidamente. Tenemos aquí el grupo de formulario de inicio de sesión, cual hemos definido como un grupo formal. Usé el servicio de constructor de formularios para construir un formulario. Y tengo método aquí se llama cualquier formulario de inicio de sesión. Y el formulario de inicio de sesión será como correo electrónico y contraseña. Y el correo electrónico cuenta con dos validadores, que se requiere y correo electrónico, como vimos anteriormente, y también se requiere la contraseña. Volvamos al HTML y demos validación. Entonces primero, necesitamos dar por este componente para nombre de control, como recuerdan. Por lo que este nombre de un controlador será correo electrónico y el mensaje de error, estará exactamente bajo este grupo. Por lo que tendremos también un formulario de inicio de sesión para definirlo. Entonces si recuerdas, hemos definido un formulario de inicio de sesión para hacer frío corto. Por lo que podemos decir obtener formulario de inicio de sesión. Y este formulario de inicio de sesión me devolverá que este grupo de formulario de puntos o
grupo de formulario de inicio de sesión que controla para no tener toda la oración en la plantilla HTML. Por lo que sólo podemos usar un formulario de inicio de sesión. Entonces un formulario de inicio de sesión si el correo electrónico no es válido y se envía el formulario, entonces elija uno de dos errores, como vimos anteriormente. El correo electrónico requerido, luego mostrar el correo electrónico requerido cuando el correo electrónico es, por ejemplo, inválido, luego mostrar que el correo no es válido. Vamos a definir se envía forma también o variable. Entonces como se envía por defecto es falso, Lo mismo va para la contraseña. Tenemos que definir nombre de control extranjero y fuente. Fuente o nombre tendrá contraseña. Y entonces voy a tener el mensaje de error también. Por lo que el botón Enviar, no
hacemos click porque estamos usando el componente prime n j, decimos onclick. Entonces si recuerdas que prime NG tiene su propia implementación para el click de sus componentes. Por lo que podemos decir aquí en Submit se define también, el método onsubmit. Entonces iremos aquí y volveremos a decir que onsubmit se presenta, es cierto. Entonces vamos a guardar todo y a probar eso. De acuerdo, recibimos los mensajes de error, vale, la AML también es inválida cuando pongo correo no válido, pero ahora es válido. Por lo que ahora tenemos el formulario de inicio de sesión. Por lo que ahora tenemos nuestra página de inicio de sesión. Veremos cómo podemos redirigir al usuario a la página de inicio de sesión cuando no está iniciando sesión, siempre que vaya a intentar poner, por ejemplo aquí productos o por ejemplo, cuando está tratando de ir al panel de administración en general, lo vamos a redirigir a la página de inicio de sesión en base a la regla, si está conectado o no. A continuación, crearemos el servicio de inicio de sesión y
vamos a enviar al usuario para tomar el token del backend.
126. de de inicio y repaso de token: De acuerdo, después de haber creado nuestro componente de inicio de sesión y panel de inicio de sesión y los controles, vamos a crear
el servicio, el servicio, el cual viene cuando estoy dando click en Enviar, luego enviaré un usuario con correo electrónico y contraseña y devolveré el token. Ese token, que voy a usar para validar
al usuario si está bloqueado en todo no en mi aplicación. Por lo que como ven aquí en Método Submit, vamos a llamar a un servicio. Y este servicio, se puede utilizar ya sea Servicio de Usuario en sí y se puede definir un método. Puedes llamarlo, por ejemplo, login, o puedes crear un nuevo archivo y un nuevo servicio, y lo llamas usuarios o servicio de autenticación. Para mí, voy a crear un nuevo servicio. Por lo que voy a dar clic en generador NX y luego buscaré servicio y luego daré el nombre para este servicio, como autenticación de autenticación. O bien puedes dar el nombre completo y el proyecto serán usuarios. Y si recuerdas que tenemos estructura de archivos ahí para que podamos ponerlo dentro carpeta de
servicios y también podemos saltarnos pruebas para que podamos comprobar ahora escuchar eso, vale, el servicio se crea dentro de los servicios bajo el nombre de services.js. De acuerdo, vamos a crear este archivo y luego vamos allá. Veremos que se genera y lo vamos a utilizar. En primer lugar, como hicimos con los usuarios, necesitamos configurar la URL de inicio de sesión o la URL de la API. Entonces vamos a copiar este, luego pegarlo aquí y definir una nueva variable. Llamamos, por ejemplo, API URL boca. Y será lo mismo, serían usuarios. Para que podamos mantener el mismo nombre también. Entonces como recuerdas en el back-end, hemos creado API que se llama usuarios. Y estos usuarios contenían también el método de inicio de sesión. Entonces no vamos a usar la misma API. Importemos también esa variable de entorno porque vamos a usar esta variable de entorno también aquí. Entonces primer servicio que vamos a utilizar, que se llama login. Y este inicio de sesión tendrá un nombre de usuario, y aceptará correo electrónico, que será una cadena, y así contraseña, que será así como encogerse. Y volverá para mí observable de qué de usuario, porque vamos a conseguir al usuario con un token de este observable. Por lo que necesitamos importar también el modelo de usuario, y luego necesitamos usar el cliente HTTP para que
así podamos usarlo en el constructor o llamarlo en el constructor, luego importarlo también desde la biblioteca HTTP en Angular. Y aquí decimos volver para mí un post HTTP de este punto. Y en primer lugar, publicamos la URL y los datos como vimos en el cartero previamente, será correo electrónico y contraseña. Por lo que también podemos pasar aquí el correo electrónico será el correo electrónico y el propio correo electrónico. Entonces tenemos objeto, la clave es el correo electrónico, y ese correo electrónico es un valor que se pasa aquí. Y además, tenemos una palabra de moda la cual será también contraseña. Si tienes el mismo nombre de las claves y el objeto que llevas mueve también la definición de clave. Simplemente puedes decir correo electrónico y contraseña, y será conocido automáticamente por el cliente HTTP post. Y aquí seguimos recibiendo error porque tenemos que poner el tipo de retorno esperado, que será, por ejemplo, el usuario. Porque aquí definimos que estamos esperando usuario. Y aquí también, tenemos que decir que estamos esperando usuario. Y en el cartero es, si viste previamente, nos dieron también al usuario, que es el correo electrónico y el token. Vamos a reemplazar esta URL de API por usuarios. Y ahora tenemos el servicio de inicio de sesión está listo. Entonces usemos eso y tratemos de consola de log lo que estamos obteniendo del back-end en el front end. Por lo que volveré a ir aquí a nuestro componente de inicio de sesión y luego voy a pedir el servicio de la casa. Entonces en el constructor, voy a decir un borde para mí, el servicio OSS. Por lo que diría aquí privado de y luego aquí será nuestro cuarto servicio. Y se mostraría automáticamente e importante automáticamente en base a lo que definimos aquí. Entonces tenemos aquí eso fuera. Y entonces voy a decir onsubmit, haz eso directamente. Podemos decir este punto auth, como nuestro, nuestro perro de servicio login. Y luego podemos pasar el nombre de usuario y la contraseña. Por lo que necesitamos crear aquí un objeto que esté conteniendo nombre de usuario y contraseña. Vamos a llamarlo, por ejemplo, datos de inicio de sesión. Y estos datos de inicio de sesión tendrán el correo electrónico. Cual será este dot login form dot email porque esto estará buscando grupo de
formulario que controla y luego email dot value y la contraseña será exactamente la misma. Por lo que podemos definir otro miembro que se llama también contraseña. Por lo que podemos decir también dame el campo de contraseña desde el formulario y dado para mí el valor de la misma. Entonces como vemos aquí que hemos creado los datos de inicio de sesión. Por lo que podemos decir aquí, login data dot email y login data dot password. Por supuesto que puedes hacer eso directamente. Se puede decir como quiero enviar directamente los datos del formulario como este. Y así sin enviar ningún objeto. Por lo que podemos hacer eso directamente. Por lo que no necesitas ese objeto total. Entonces hagámoslo muy sencillo. Pero primero, necesitamos comprobar también si el formulario es válido, como si no tenemos ningún error de validación. Si este formulario de inicio de sesión grupo punto no válido, entonces sólo decimos retorno. Entonces no necesitamos hacer nada de otra manera, seguir y hacer para mí que están buscando. Por lo que como dijimos anteriormente, este login volverá para mí y observable. Observará los datos. Cuando se avecina datos, entonces se ejecutará. Por lo que necesitamos que sea ejecutable. Tenemos que suscribirnos a ella. Entonces esperamos los datos del usuario. Y dentro de este usuario, vamos a consola eso en nuestro registro, así decimos usuario de registro de consola. Entonces probemos eso. Vemos que si todo está funcionando bien. Entonces asumo que cuando estoy tratando de mirar adentro, voy a obtener datos en el frente que así aquí está mi consola. Y voy a tener, por ejemplo, mi correo electrónico. Y entonces tendré la contraseña. Daré click en Enviar. Veré que estoy consiguiendo aquí los datos con un nuevo token, exactamente como lo hicimos con el back-end. Pero si voy a poner como contraseña larga, voy a conseguir aquí error, tal vez la mala petición, que es la palabra de moda, está equivocada. Por lo que también necesitamos demostrar que aquí que su contraseña está equivocada porque no estamos viendo nada aquí en el front end. Por lo que necesitamos mostrarle al usuario que algo está pasando mal. Entonces, ¿cómo podemos hacer eso? Como recuerdan, después de la suscripción, podemos definir y editar. Este error puede llegar a ser así. Y luego decimos que si hay error y dentro de este error, podemos decir registro de consola para mí, el error en sí. Entonces podemos hacer eso también. Probemos el nombre de usuario y la contraseña incorrectos para que podamos usarlo así. Y voy a poner algún nombre aleatorio. De acuerdo, me dieron un error y tengo el tipo de error aquí. Entonces ahora vamos a mostrar algún mensaje al usuario. Por ejemplo aquí que hay error o el nombre de usuario o contraseña mal. Por lo que podemos mostrar eso exactamente aquí. Por lo que podemos ir nuevamente al formulario de inicio de sesión y podemos colocar otra columna. Por ejemplo, aquí podemos definir otra columna con k, digamos div, la llamada P y 12 también. Y dentro de esta p igual 12, podemos definir un pequeño. Y esta pequeña tendremos una clase que se llama error P. Y esto sea flechado. correo electrónico o la contraseña están equivocados. Pero como vemos aquí que siempre estamos viendo este error porque lo
hemos definido como un lapso sin definir ninguna condición sobre la apariencia. Entonces podemos poner también aquí ng-if. Entonces, podemos decir ng-si se presenta el formulario. Y además, podemos definir otra variable que se llama error, como error de autenticación. Entonces podemos ir aquí y definir éste. Y por defecto tendrá un valor cae. Y entonces cuando vamos a obtener error aquí, podemos decir auth flechado es cierto, así que lo guardamos todo. Vuelve a nuestra solicitud. De acuerdo, no vemos el mensaje de error. Entonces cuando pondré mi e-mail y contraseña luego ratones, no
obtuve ningún error porque me dieron el usuario y el token. Pero cuando cometo error, por ejemplo, en la contraseña, obtengo error y recibí correo electrónico o contraseña mal. Pero y si consigo, por ejemplo, un error de flechas pero lo que no de autenticación. Al igual que algunos, algún error que viene como con el error del servidor porque el servidor no está conectado. Por lo que necesitamos especificar el estado del error. Si recuerdas, hemos definido en el estado back-end del error, pero si hay error de servidor en general, entonces me dará 500. Por lo que en base al estado del error, puedo mostrar aquí diferentes mensajes. Entonces aquí, en lugar de tener este mensaje, podemos definir también una variable. Podemos llamarlo, por ejemplo, mensaje de casa. Y este mensaje será sustituido por la frase que hemos creado previamente. Entonces tendremos aquí, por ejemplo, nuestro mensaje. Y este mensaje por defecto es el correo electrónico o la contraseña incorrecta. Pero aquí podemos cambiarlo en base al error. Por lo que puedo comprobar aquí que el estado de error. Por lo que no podemos decir respuesta de error HTTP. Por lo que tenemos aquí la respuesta de error HTTP viene con un tipo o estado. Entonces cuando voy aquí y reviso el error, si recuerdas, tenemos aquí respuesta de error ese tipo, y luego tenemos aquí, ok, false, y luego estado 2s es 400. Entonces de cualquier manera vamos a mostrar el error si hay algún error ocurrido. Y luego diré si el estado de error es igual a 400 o no igual a 400, entonces este punto mensaje OK será error en el servidor. Por lo que no podemos decirle eso al usuario que sabe que hay un problema en la autenticación en nuestro servidor. Por lo que podemos decir error en el cerebral. Por favor inténtalo de nuevo. Posteriormente. En ese caso, rodeamos todos los errores o errores impares posibles al usuario. Por lo que no va a ser ningún problema para nosotros cuando estamos mostrando las flechas para el usuario. Y de la misma manera, tenemos que decir que este punto de la flecha, cuando todo está bien, entonces tenemos que ocultarlo. Entonces decimos que el error juramento no se ve, es falso. Por lo que podemos ir aquí otra vez y podemos recargar nuestra aplicación y volver a intentarlo. Entonces diré, por ejemplo, que se encuentra en tu gmail.com, y luego cometeré, por ejemplo, un error. De acuerdo, me dieron el error y luego entraré en hacerlo bien, para que podamos hacer esto. Entonces está bien, el error desapareció. Por lo que ahora voy a hacer error en el servidor. Error no sobre nombre de usuario o contraseña son incorrectos, pero adulto en su servidor cuando el usuario sabrá que
hay error en el servidor y verá este mensaje. Entonces podemos ir aquí al servicio de usuario y tal vez podamos o al servicio de autenticación, y podemos cometer algún error aquí, por ejemplo. Por lo que vamos de nuevo a nuestra aplicación e intentamos volver a iniciar sesión. Y luego voy a dar clic en enviar. Agradable porque me dieron diferente error, que no es 400. Tengo 404. Y esto me dio este mensaje. Por lo que ahora rodeamos al usuario con todas las posibilidades de las flechas. En la siguiente conferencia, vamos a ver qué hacer con este usuario y el token. Y podemos almacenarlo y tomar algunas decisiones en nuestra aplicación basadas en ese token.
127. Crea servicio de almacenamiento local y tode toques de almacenamiento y tienda: De acuerdo, tal vez estamos preguntando ahora por qué estamos haciendo su login o por qué necesitamos la autenticación. La autenticación normalmente va cuando se quiere evitar que el usuario vaya
a algunas páginas específicas o haga algunas solicitudes al servidor. Por ejemplo, si alguien viene a mi aplicación y luego dijo navegar directamente a los productos, entonces verá sus productos, pero quiero evitar que el usuario haga eso. Por lo que será redirigido directamente a la página de inicio de sesión y luego le dejaré entrar. Y por supuesto, cuando vamos a navegar cuando el usuario está navegando, necesitamos siempre a ella verificar que se le permita navegar a través de mi aplicación o no. Para eso, no es justo hacer un token nuevo o generar el token cada vez que quiero navegar a algún lugar. Entonces cada vez le preguntaré al usuario si tiene el token o no, y luego le preguntaré el backend validado y luego lo enviaré de vuelta
al frente y luego le permito navegar a otro lugar. No es justo y es muy agotador para el servidor. Entonces para eso, vamos a almacenar el token que obtuvimos cuando nos encerramos en el almacén local. Si nuestra aplicación, cualquier sitio web y cualquier aplicación ha escuchado algo llamado almacenamiento o almacenamiento local. Y en el almacenamiento local, puedes usarlo para almacenar un dato de tu aplicación, que siempre debes usar
para verificar al usuario, por ejemplo, o si quieres almacenar su carrito como vemos aquí, o si quieres configurar el configuración regional actual de la aplicación, por ejemplo, algún usuario la tiene en inglés y lo configuró, por ejemplo en francés. Y luego cuando volvió a la página web, no
volvería a ver inglés, pero verá a los franceses, al francés que inició. Por lo que esos valores siempre se almacenan aquí. Y en base a eso, luego usuarios cuando volvió a visitar el sitio web, todo cuando navega en otro lugar, utilizará toda esta información la cual se utiliza en el almacenamiento local. Por lo que el almacenamiento local, abres DevTools y luego vas a la aplicación y verás el LocalStorage. También están las cookies que es así el almacenamiento de sesión. Pero vamos a utilizar en este curso, el almacenamiento local. Entonces lo que voy a hacer ahora primero, voy a guardar ese token en mi almacenamiento local. Entonces cuando inicie sesión y tenga un login exitoso, entonces almacenaré ese token en mi almacenamiento local. Entonces, eliminemos toda esta información de datos. Puedes eliminar todos los datos del sitio web fácilmente cuando vas a una pestaña de almacenamiento aquí en Google Chrome, y luego dices datos laterales claros. Entonces cuando limpies todo, entonces verás que tu almacenamiento local está vacío. Ahora, vamos, cuando iniciamos sesión, ponemos el token en el almacenamiento local. Para eso, diría también que puedo hacer otro servicio que aquí se llama un servicio de almacenamiento local. Entonces generemos eso también. Entonces iré aquí, generaré, y luego diré servicio como lo hicimos anteriormente. Y el servicio se repetiría en servicios. Y el nombre del mismo será almacenamiento local y el nombre del proyecto serán usuarios. Y además, vamos a saltarnos esas pruebas. Nosotros lo ejecutamos. Creamos el servicio como vemos aquí, y vamos a hacer el servicio de almacenamiento local. Entonces cómo podemos trabajar con motor de almacenamiento local y todo lo que te mostré. Podemos hacerlo muy fácilmente, hacer con JavaScript estándar y Luke y almacenamiento si Google para ello en el navegador y vas aquí a MD y web docs, verás que tenemos algo llamado almacenamiento local. Y estos almacenamiento local, tiene algunos métodos como set item y get item y remove item y clear en general. Entonces, vamos a tener un ejemplo. Voy a crear un método de servicio. Podemos llamarlo, por ejemplo, aquí, después del constructor, podemos decir set item. Y set item pedirá por mí un dato. Y entonces no puedo decir exactamente directamente el elemento de conjunto de puntos de almacenamiento local. Y luego puedo especificar la clave. Entonces por ejemplo, puedo decir token y luego daré los datos como valor. Entonces podemos usar este servicio de almacenamiento local en cualquier lugar. Entonces, usémoslo después de que tengamos un login o éxito encerrado. Entonces por ejemplo, después de hacer un login, entonces iré aquí y llamaré a su servicio de almacenamiento local desde aquí. Por lo que podemos decir aquí, servicio de almacenamiento local
privado. Y entonces tendrá un servicio de almacenamiento local tipo. Y entonces podemos usar este servicio de almacenamiento local aquí. Por lo que diremos que después de eso, este servicio de almacenamiento local puso set item. Y voy a especificar los datos. Por ejemplo, almacenaré el token de punto del usuario, está bien, guardamos, y luego intentemos iniciar sesión y revisar nuestro almacenamiento. Entonces vamos aquí y voy a tener mi email y contraseña. Entonces después de dar clic en Enviar donde voy a bloquear y llamar al servicio de registro, entonces debo él aquí la llave set del token. Estar con un valor del token. Entonces cuando hago clic en Enviar, ya que veo que tengo red exitosa y luego tengo nombre de escritura y contraseña, y luego recuperé ese token. Por lo que a partir de ahora, vamos a utilizar este token para verificar la navegación del usuario sin pedir datos de inicio de sesión una y otra vez, cada vez que el usuario navega por alguna parte, quiero ver si se le permite ordinal de lo que pediré una nueva ficha. Ahora, podemos preguntar siempre el token de almacenamiento local. Y como recuerdas, este token tiene tiempo de caducidad. Entonces cuando haya caducado, entonces el usuario no podrá navegar de nuevo en la aplicación solo cuando vuelva a iniciar sesión y solicite un nuevo token. Entonces lo que realmente necesitamos aquí, necesitamos un elemento conjunto y así obtener artículo, como necesitamos recuperar el token. Entonces podemos decir que el valor de retorno será una cadena y
luego nos devolverá el punto de almacenamiento local get item, y será qué? El token, y podemos hacer también agregar eliminar elemento. Entonces elimina el elemento, lo vamos a usar o
eliminamos el token cuando el usuario cierre la sesión también. Aquí voy a decir almacenamiento local punto eliminar artículo, y aquí no es devolución es solo método normal donde va a quitar para mí el artículo. Es mejor que renombrar aquellos no set item sino setosa porque estamos usando solo una clave que es token, y específicamente para la autenticación. Entonces voy aquí a decir ese set token y así aquí y obtener token. Y aquí, quita token. Entonces es mejor así. Por lo que podemos utilizar este servicio fuera y en cualquier lugar de nuestra aplicación. Y siempre es agradable definir una constante para cuerdas repetidas. Entonces por ejemplo, diré aquí const, por ejemplo, será token. Y este token tendrá un nombre JWT token. Y aquí, que sería siempre, las constantes serán mayúsculas. Y aquí podemos reemplazar este token. Entonces para no repetir la misma cadena, podemos decir siempre una constante y podemos usar esta constante y renombrarla. ¿ O queremos siempre que queramos cambiar el nombre de esta clave? Entonces vamos a guardar eso e intentarlo de nuevo. Todavía tenemos el token. Y si tengo que volver a poner mi correo electrónico, voy a ver que me dieron error porque aquí necesitamos llamar no set item, pero diremos set token. Y luego guardamos nuevamente el correo electrónico, enviamos, y luego tendremos aquí ese token JWT. Por lo que también tenemos que eliminar este. Entonces hagamos un comienzo claro para que podamos volver a borrar los datos. Y entonces no tendremos nada en nuestro almacén local. Entonces intentemos de nuevo presentarnos. De acuerdo, bonito, tenemos token JWT y de esta manera vamos a usar este token para resguardar y proteger las URL. Y eso equivale al backend.
128. Crea la ruta de la persona de panel de administración: De acuerdo, en esta conferencia vamos a ver cómo resguardar el panel de administración. Al igual que tenemos que proteger el panel de administración de usuarios que no están autorizados o autenticados para iniciar sesión. Pero antes que nada,
normalmente después de poner el nombre de usuario y la contraseña y luego hacemos clic en enviar, nos estamos redirigiendo al panel de administración si todo está bien y nuestro nombre de usuario y contraseña, ¿no? Por lo que no podemos hacer eso después del botón Enviar o hacer clic en Enviar, entonces podemos redirigir al usuario a la aplicación o a la aplicación del panel de administración. Entonces cómo podemos hacer eso, podemos ir aquí al componente de inicio de sesión. Y vemos que hemos creado previamente la autenticación de inicio de sesión. Y después de que el usuario se está poniendo en abierto. Por lo que podemos llamar al router, al router, que está dejando que v navegue a una nueva página o a la página de inicio de nuestra aplicación. Por lo que no podemos llamar aquí al router privado. Y este router tendrá un router y se importará desde Angular. Y luego vamos aquí donde tenemos un login exitoso. Entonces decimos esto, el router, y luego puedo decir navegar, y luego especifico la URL en la matriz. Por lo que necesitamos, por ejemplo, la página de inicio. No necesitamos ir a ninguna sub-páginas. Por lo que vamos a la página de inicio cuando estamos iniciando sesión en la aplicación. Entonces intentemos eso y luego vayamos aquí. Podemos decir, por ejemplo, correo electrónico, pondré mi correo electrónico y la contraseña, y luego haré clic en Enviar. Por lo que hacemos clic en Enviar y luego vemos que nos
redirigen a la aplicación o al panel de administración. Tenemos aquí espacios en blanco por las rutas. Nosotros vamos a organizar nuestras rutas más adelante para hacer que se vaya directamente al tablero de instrumentos. Por lo que como ven aquí, ahora
podemos navegar por la aplicación. Tenemos problema aquí. Voy a eliminar el token del almacenamiento local, por lo que se nos considerará como no encerrados. Por lo que cuando
navego, aún puedo navegar por la aplicación. Ni siquiera yo tengo una ficha. O por ejemplo, déjame volver a cargar la aplicación, ir de nuevo a la página de inicio de sesión. Y luego como ven aquí, estamos en la página de inicio de sesión. Entonces si voy a U R, L y digo órdenes, entonces iré a la página de dueños. Entonces esto está mal. Necesitamos iniciar sesión primero y ver que el usuario está realmente encerrado. Entonces le permitimos ir a pedidos o dos productos o a otras páginas. Entonces para eso, necesitamos crear algo que se llama guardia. Y guardia en realidad es un servicio. Puedes pasarlo a los routers o a las rutas que creaste. Y luego puedes decir proteger esta ruta hasta que el usuario haya aprobado algo o que el usuario haya hecho algo. Por lo que podemos hacer eso muy fácilmente. Entonces cuando vamos al módulo de aplicación aquí, así como recuerdas, tenemos aquí las rutas. Entonces no puedo decir esa ruta,
ruta, digo que pueda activarse. Y luego especifico algo llamado guardia. Y el guardia es en realidad un servicio y el servicio que está observando siempre los routers y ver si se permite
ingresar a esta ruta o permanecer en su lugar sin moverse a una nueva ruta. Entonces mantengamos esto como vacío y vamos a crear nuestra guardia. Por lo que en primer lugar, iré a crear los guardias en los servicios en la biblioteca de usuarios. Entonces aquí vamos a crear un nuevo servicio. Entonces voy al módulo NX y luego digo generar para mí un nuevo servicio. Y este servicio se ubicará en carpeta de servicios y se llamará protector bucal. Por lo que llamamos a este servicio como nuestro protector bucal. Y luego especifico que proyecto serán usuarios porque lo estamos poniendo dentro de la biblioteca del usuario y eso es todo. Por lo que también podemos omitir esas pruebas. Por lo que cuando haga clic en Ejecutar, veré que el servicio se crea aquí como antiguo servicio de guardia. Se puede quitar este sufijo. Por ejemplo, se puede decir solo como desprevenido sin servicio de Asgard, se
puede decir solo desprevenido. Y estos son el guardia implementará algo de Angular, que se llama puede activar. Y esto es de enrutador angular. Entonces esto se puede activar es un método que
siempre está observando para mí el router y devolver true, entonces permitimos que vayamos a una nueva ruta, o es falso, dos 4-bit yendo a esa ruta. Para entenderlo más de mí, voy a crear esto se puede activar. Entonces por ejemplo aquí está diciendo que el error que la clase está desprevenido está implementando puede activar, lo que puede activar método falta. Entonces vamos a crear este método porque cuando quieres
implementar alguna clase o extender algo desde la clase, también
necesitas hacer los mismos métodos que son. Creado en esa clase. Entonces cuando voy aquí para no puedo activar, presiono Control. Veo que tiene interfaz y esta interfaz tiene un método que se llama puede activar, y este método aceptará ruta la cual se activará snapshot y también el estado. Y volverá para mí observable de
booleano o de una promesa o de la misma booleana, lo cual es claro. Por lo que también podemos copiar este método. Podemos tomarlo aquí e ir a nuestro protector bucal, luego pegarlo aquí y abrir la implementación para este método. Por lo que necesitamos importar algunas cosas. Por ejemplo, activado escribió instantánea, eso es importante. Controlamos el espacio de puntos o contornos en Windows, y luego veríamos que aquí se importa automáticamente. Y otra que necesitamos también para importarla. De acuerdo, me está dando un error porque este método está devolviendo un booleano u observable de booleano o una promesa de booleano. Por lo que podemos regresar como simplemente como falso. Y luego necesitamos exportar este método para poder usarlo en el nivel de aplicación. Entonces vamos aquí y decimos que exportar desde los servicios de Lip. Y luego la guardia que he creado, salvamos y voy ahora a nuestro módulo de aplicación. Y entonces yo diría, usa el protector bucal que creé. Entonces aquí tenemos el Asgard y se importaría automáticamente desde la biblioteca de usuarios. Entonces vayamos hacia abajo y veremos que hemos protegido este camino, al
igual que la ruta sumar a sus hijos por lo que no podemos acceder a ningún niño porque este desprevenido siempre está regresando falso. A ver eso. Entonces como ves aquí, tenemos una pagina blanca porque
no soy capaz de acceder a nada mas que por ejemplo, login, ok, no puedo acceder login. Pero si pongo, por ejemplo, algo que es niños de esta ruta, porque aquí tenemos categorías, pedidos, productos, etcétera. Entonces voy a poner uno de ellos porque aquí tenemos productos. Y entonces voy a conseguir amplia pagina porque no se me permite ahora entrar porque se puede activar es por pujarme para entrar porque está devolviendo una fuerza. Entonces cuando lo envíe de vuelta a true y luego guarde e inténtelo de nuevo, veremos que podemos iniciar sesión y ver el panel de administración. Pero cuando lo ponga en falso, no se
me permitirá entrar ahí y obtendré una página en blanco. Por lo que estamos muy cerca. Por lo que ahora se nos permite ir a la página de inicio de sesión porque no lo incluimos en la guardia. Porque si recuerdas que la página de inicio de sesión se encuentra en el módulo de usuarios aquí. Por lo que tenemos la ruta de inicio de sesión fuera de la jardinería, por lo que no necesitamos protegerla ni protegerla. Por lo que quiero de alguna manera no ser dirigido a una página en blanco o a alguna página que no está definida. Por lo que quiero ser redirigido a su logueado cuando no se me permita entrar a esa ruta. Entonces cuando pongo aquí algo así como producto o el usuario está tratando de acceder directamente a través de URL. Yo quiero enviarlo a la página de inicio de sesión de nuevo. Entonces exactamente lo mismo. Usamos este guardia exactamente para hacer lo que queremos. Entonces cuando el usuario está tratando de hacer algo con sus enlaces, estamos gestionando. Cuál es el resultado de eso. Por lo que podemos hacer eso muy fácilmente. Por lo que podemos decir que también, necesitamos redirigir al usuario usando el router a la página de inicio de sesión. Lo que voy a hacer aquí que voy a importar de nuevo un router privado. Y este router viene de nuevo por angular como lo hicimos directamente en el inicio de sesión. Y además, voy a decir que navega para que yo pueda iniciar sesión. Entonces cuando digo éste y luego me voy otra vez y trato de entrar, por ejemplo, dos órdenes. Entonces voy a conseguir tres dirigidos a la página de inicio porque no se me permite entrar a ese salario. Está bien. Cuando se me permite entrar, se
me permite entrar cuando tengo un token con un tiempo de caducidad válido, y luego puedo permitir que el usuario entre a esa página. En este caso, quiero obtener el token aquí de alguna manera y luego
devolveré falso o verdadero que puede activarse en base a los datos del token. Entonces si recuerdas, hemos almacenado el token en el almacenamiento local. Por lo que podemos usar de nuevo aquí nuestro servicio de almacenamiento local. Entonces digo token de almacenamiento local privado, trayendo para mí de nuevo ese servicio de almacenamiento local. Y aquí voy delante de todo. Yo quiero conseguir el token. Entonces diré const token y luego este punto servicio de almacenamiento local y luego obtener el token. Entonces aquí tenemos el token. Entonces voy a comprobar si hay token en su almacenamiento local, como si no está vacío,
entonces permita que yo, entonces permita que yo, el usuario acceda a esa página y la envíe a través de dos puede activar método. Por lo que voy a decir aquí, devolver verdadero, lo contrario router dot navegar a la página de inicio de sesión y devolver falso. Entonces intentemos guardar eso e intentarlo de nuevo. Entonces estamos aquí, me voy, tengo aquí esa ficha. Entonces cuando trato de ir a productos, debo poder ver los productos. Porque tenemos ficha aquí. Diré aquí productos. Y luego, bien, perfecto, Tenemos el eje. De acuerdo, intentemos eliminar el token e ir de nuevo a nuestra página de inicio de sesión. Y luego borré el token. Entonces cuando lea el token, no
tendré nada. Entonces renombrará el me directo y devolverá falso. Por lo que voy a decir aquí productos. De acuerdo, volví con Logan. Entonces así es como estamos protegiendo la ruta. Por lo que la ruta en sí está protegida en la aplicación del módulo de aplicación, como recuerdan, tenemos aquí con el protector bucal. Por lo que todas esas rutas están protegidas
en base pueden activar lo que me va a devolver, verdadero o falso. Entonces cuando voy aquí, reviso si hay token, y luego digo, ok, login. Pero ahora en este caso que si alguien viene aquí, me siento como algún token de DVT, exactamente igual que la llave y pongo cualquier cosa, entonces podré ir a la página de productos. Porque dije que si hay token, no
vi el valor de ese token si se me permite o no, si soy administrador o no. Y esto lo veremos en la próxima conferencia, necesitamos leer este token y analizarlo. Y en base a eso, permitimos que el usuario entre a esa página o lo leemos directamente a la página de inicio de sesión.
129. Los datos de Token es Admin y expiración: De acuerdo, en esta conferencia vamos a ver cómo podemos verificar si el usuario es administrador o no. Como les dije aquí anteriormente, que no estamos haciendo aquí una seguridad de usuario, no
estamos haciendo seguridad de aplicaciones. El seguridad en sí va cuando estamos interceptando las solicitudes HTTP, como obtener producto u obtener pedidos o publicar productos o publicar pedidos solo con un token. Por lo que normalmente cualquier cliente puede acceder a mi API sin token. Hablaremos de esto más adelante. Pero ahora lo que estamos haciendo es solo una experiencia de usuario. Por lo que solo estoy dirigiendo al usuario si está conectado o no. Y si está encerrado, puede ver el panel de administración. De no ser así, será redirigido a la página de inicio de sesión. Entonces analicemos ese token que obtuvimos de aquí. Entonces si recuerdas, creamos este token JWT y en el back-end, incrustamos algunos datos como el ID de usuario y también si es administrador o no. Entonces cuando vayamos a JWT dot io y luego ponemos nuestro token aquí, veremos que llegamos aquí el ID de usuario y si es admin y también tiempo de caducidad. Por lo que necesitamos de alguna manera decodificar este token en el front end. Y luego nos enteramos si el usuario conectado es admin odd lot. Entonces intentemos eso ahora. Entonces, en primer lugar, voy a usar un método que se llama AT o B. Esto es como para decodificar las cadenas de datos que
se han codificado en base a la codificación base-64. Entonces veamos qué podemos conseguir aquí. Entonces, en primer lugar, quiero decodificar este token. Entonces si hay un token, entonces haz para mí una constante, llámalo decodificación de tokens. Y luego vamos a usar ese método es el método Javascript, por lo que podemos usarlo directamente sin llamar a ninguna biblioteca. Entonces diré aquí token, y luego veremos qué obtenemos como resultado. Entonces vamos a la consola log también, este token decodificar para ver qué tenemos en la consola y qué eso, o qué token decodificado regresará para mí. Por lo que ahorramos y vamos a nuestra aplicación y comprobamos nuestra consola. Entonces si recuerdas, ya hemos ingresado aquí que pueda ir directamente a pedidos por ejemplo. Y entonces voy a llegar aquí algo vamos a ver que estamos recibiendo error se llama error de carácter inválido. Esto debido a que el token se compone de tres partes. Primera parte se llama los encabezados, que es especificar qué tipo de token y también qué es lo que el algoritmo se escribe o genera este token. Y la segunda parte contendrá los datos, como ven aquí, el color está coincidiendo. Por lo que tenemos aquí también los datos que viene dentro del token. Y la tercera parte es para verificar el token cifrado o firma del token. Nos interesa la segunda parte. Por lo que necesitamos dividir este token basado en el punto. Entonces después de que lo
dividimos, obtenemos la segunda parte. Entonces, en primer lugar, necesitamos dividirnos. Decimos token dot split. Y luego basado en el punto. Y como recuerdan, la división volverá para mí matriz de tres artículos. Entonces primera parte y segunda parte, que está conteniendo nuestros datos. Entonces vamos a contar de 0 a dos. Por lo que queremos la segunda parte. Entonces aquí ya hemos dividido la matriz y vamos
a tomar la parte y decodificar y leer ese token de esa manera. Por lo que después de la codificación y volver a la aplicación, veremos que
estamos obteniendo también ID de usuario del objeto es admin y también tiempo de inicialización y tiempo de caducidad del token. Entonces exactamente cómo llegamos aquí. Entonces la primera parte es para los encabezados, y la segunda parte es para los datos del token. Y la tercera parte es para la firma y verificación de la firma. Entonces conseguimos en realidad esos datos, que nos interesan. Por lo que ahora estamos listos. Estamos leyendo el token como un JSON. Por lo que podemos tomar también esta parte, todo como un JSON. Por lo que podemos decir JSON dot parse. Y luego puedo leer todo esto como un objeto JSON. Entonces podré leer el contenido de este token. Entonces no podemos decir si token decode dot es admin, como el usuario es admin exactamente cómo lo enviamos desde el back-end y luego devolvemos un verdadero. Entonces en este caso, si el usuario es realmente administrador, entonces puede acceder al panel de administración. De no ser así, no podrá acceder a ella. Entonces quitemos esta parte y comprobemos si todo está funcionando bien para nosotros. Por lo que iré a probar nuestro token después de que guarde. Por lo que iré aquí al inicio de sesión. Y entonces, está bien, tenemos aquí todo. Y voy a cerrar sesión quitando este token por lo menos, y voy a volver a iniciar sesión. Por lo que diré mi correo electrónico. Y como ves, pongo aquí mi email y contraseña y voy a dar clic en Enviar. De acuerdo, Estamos realmente dirigidos porque soy administrador. Voy a probar otro usuario. Por lo que tendremos un usuario que no es admin. Por lo que volveré a ir a la página de inicio de sesión. Por lo que iré directamente a la base de datos y luego me cambiaré para no ser admin, pero seré como False de admin. Y luego voy a dar clic en actualizar esta fila. Entonces después de eso me
actualizé, intentaré de nuevo iniciar sesión. A ver qué vamos a tener. Por lo que pondré mi correo electrónico y contraseña y luego daría clic en Enviar. Eso lo vemos, vale, tengo ese token, pero no soy capaz de iniciar sesión como ves aquí, porque no soy admin, porque es admin no viene con ese token. Entonces para estar seguro, quiero mostrarles para que podamos copiar este token y ponerlo aquí. Y veremos que es admin es falso. Por lo que en este caso, ya no
soy capaz de iniciar sesión. Entonces volvamos a ponerlo como verdadero Para poder siempre iniciar sesión. Por lo que en este caso, distingo entre los clientes y no las personas clientes. A lo mejor venga alguien y me diga, vale, puedo crear un ID de usuario y es admin. Y como creo un token como este, exactamente. Y pegué en mi almacén local y trato de pasar por el link, te lo diré, sí, claro que puedes hacer eso, pero no podrás enviar solicitudes. No puedes tomar producto, lo
harás, irás al panel
de administración , por supuesto, pero no podrás ver ningún dato. No podrá enviar ninguna solicitud al servidor. Porque como veremos más adelante, vamos a interceptar esos y proteger API con un token. Entonces como recuerdan en Cartero, cómo siempre estábamos cargando el token en
el cuerpo de la solicitud para poder enviar esa solicitud al backend. Entonces como ven aquí, siempre
estamos cargando un token con cada solicitud que yo estaba haciendo. Entonces en este caso, estamos protegiendo al back-end. Lo que estamos haciendo aquí en realidad es solo experiencia de usuario. Por lo que el usuario no podrá ver fácilmente el back-end o el panel de administración si no es admin. Por lo que me pongo a mí mismo como administrador otra vez y soy capaz de bloquear y recuperar datos para que así podamos usar el tiempo de caducidad. Por lo que un usuario es capaz de iniciar sesión en cualquier momento a nuestra aplicación, en cualquier momento durante el día. Entonces si recuerdas, tenemos un día de exploración, lo
ponemos en el back-end. Por supuesto, puedes configurar el token en el back-end tanto como quieras como vimos anteriormente. Entonces aquí voy a revisar también el token si ha caducado o no. Por lo que diremos aquí admin. Y también voy a tener un método que me comprobará el tiempo de caducidad del token, un método privado, será token caducado. Entonces aquí sabré que si el token está caducado o no, entonces, y entonces diremos enviar el token decode y EXP, porque si recuerdas, caducidad viene en el campo x. Entonces voy a crear este método. Te mostraré rápidamente. Por lo que tenemos aquí al método que se llama token caducado, y tendrá tiempo de caducidad. Volverá para mí Booleano. Por lo que para comprobar el tiempo de caducidad de algo, ya
sabes que viene el momento para nosotros como impresión o como marca de tiempo. Y esta marca de tiempo, podemos analizarla haciendo este método. Por lo que puedo comprobar si piso luego obtener tiempo. Entonces todo esto, como estoy consiguiendo el tiempo ahora, si es más grande que esta exploración, entonces el token es válido. De no ser así, entonces la caducidad del token ha terminado, por lo que ese token ha caducado. Por lo que de esta manera se puede comprobar el token si ha caducado o no. Por supuesto, también hay otras formas como tú las puedes buscar en Google. Podrás encontrarlos como usar woman JS o por ejemplo, usar otra biblioteca que está tomando, revisando el token y enviarte de vuelta toda la información que quieras. Aquí. Lo hicimos con JavaScript vainilla. Entonces intentemos eso ahora ahorramos y ahora tenemos el token. Por supuesto que no puedo hacer que caduque ahora porque no soy como yo creé el token ahora, pero ahora configuramos todo y somos capaces de usar ese token y somos usuarios válidos como admin, para mirar en el panel de administración. Como les dije, esta es la forma más sencilla de codificar ese token, hay formas más complicadas. En la próxima conferencia, como les dije, vamos a hacer más seguridad y así no podremos
ver ningún dato si no contamos con un token válido.
130. Activar la autenticación en fondo para la API: Si recuerdas al principio de trabajar con el panel de administración, hemos deshabilitado en el back-end la autenticación de nuestras API. Entonces cómo hicimos eso, si recuerdas que comentamos toda la autenticación y dijimos que lo permitimos todo. Entonces en el archivo JWT, en el Acme, en el back-end, desactivé todo y dije:
Vale, un bajo para mí. Todo lo que sois estar a menos que habláramos de eso previamente. Entonces, vamos a retroceder. Cómo están aseguradas todas las API excepto aquellas. Por lo que necesitamos también asegurar todas las API. Por lo que no podremos publicar un producto. No vamos a poder publicar usuario o no somos capaces de conseguir a los usuarios. Entonces después de la activación, Intentemos, por ejemplo, ir en nuestro panel de administración a los usuarios porque aquí los usuarios no están incluidos. Entonces vamos a comprobar eso. Iré aquí otra vez y chequearé a los usuarios. Veré que me quedé vacío y me dieron error en la consola de que estoy no autorizado. Entonces necesitamos hacer algo exactamente como lo hicimos con el cartero. Si recuerdas, estábamos cargando un token en la solicitud y luego enviamos esa solicitud. En este caso, obtenemos lo que queremos, todo sin problemas. Por lo que aquí también vamos a cargar este token, que conseguimos después de haber iniciado sesión en esta solicitud. Por lo que el backend me autorizará a obtener los datos de la base de datos. Entonces aquí lo que vamos a hacer en la próxima conferencia.
131. Interceptar las peticiones de HTTP con tode tode: De acuerdo, Como les dije anteriormente, que necesitamos cargar ese token sobre su solicitud. Si recuerdan, estábamos cargando el token sobre su solicitud en Cartero, y estábamos pasando ese token en los encabezados de la solicitud. Eso fue muy fácil como carteros, sólo
íbamos aquí a seleccionar autorización. Y luego decimos token de barrera, y luego estábamos desperdiciando nuestra ficha aquí. Entonces de la misma manera que vamos a hacer aquí, pero con Angular. En Angular, ese concepto de esto se llama interceptores. El interceptor es algo que está observando todas las solicitudes que están saliendo desde el front end y luego comprobando si esta solicitud va al backend es API, entonces cargo un token sobre él. Porque como ves anteriormente que el back-end ahora está hecho, permitanos enviar cualquier solicitud sin ese token porque ya no estamos autorizados. Entonces, ¿cómo podemos hacerlo fácilmente? Como recuerdas, estábamos usando siempre herramientas NX. Yo voy aquí a generar un nuevo módulo y hay algo llamado interceptor. Y el interceptor es algo que se cargará sobre el servicio HTTP y luego cargará el token sobre él. Entonces la forma de hacerlo, vamos y le damos un nombre, por
ejemplo, GW t. Y luego lo podemos pasar también en la carpeta de servicios, que se encuentra en los usuarios del proyecto porque vamos a usar eso en el aplicación. Y luego saltemos esto por ahora. Entonces podemos hacer click en omitir esto, luego ejecutamos esto, y luego vamos a nuestra aplicación y veremos que tenemos interceptor JWT. De acuerdo, veamos qué es interceptor. Interceptor está implementando una clase o interfaz que se llama interceptor http. Y dentro de este interceptor http, hay un método que se llama intercepción. Y esta intercepta recibiendo una solicitud y luego siguiente para manejo, y luego devolverá el evento HTTP. Entonces por ahora, es así. Por lo que necesitamos cargar sobre los encabezados de solicitud HTTP como carteros haciendo a la solicitud HTTP con el token. Porque siempre ponemos datos extra dentro de los encabezados. Toda solicitud que va en su aplicación va por encima de los encabezados. Entonces token de autenticación se cargará sobre los encabezados de la solicitud, como ven aquí, tenemos aquí por ejemplo, la solicitud de encabezados y tengo portador de autorización y luego el token. Esto es exactamente lo que está haciendo el cartero. Entonces hagamos lo mismo exactamente con nuestras aplicaciones. Por lo que podremos ver a los usuarios porque ahora no se nos permite ver a los usuarios ni pedidos porque no estamos autorizados. Entonces primero que nada, iré aquí dentro de este método y luego recibiré ese token y también la URL. Por lo que el token, como recuerdas, se almacena en el almacenamiento local. Por lo que antes que nada, voy a definir una constante. Lo llamaré token, y usaré el servicio de almacenamiento local. Por lo que el servicio de almacenamiento local que utilizamos anteriormente, que también se encuentra en el mismo repositorio, todo en la misma carpeta del servicio de este usuario. Por lo que diré aquí token de almacenamiento local privado. Y entonces este token de almacenamiento local vendrá del servicio de almacenamiento local. Y entonces la voy a usar. Entonces diré aquí este punto LocalStorage oscurecerá y luego getToken. Entonces eso es todo. Entonces tenemos ese token que almacenamos en el almacén local aquí dentro de esta constante. El siguiente paso es la solicitud. Esa solicitud es cada solicitud que va desde la solicitud HTTP front-end. Porque si recuerdas, en nuestros servicios estamos usando solicitudes HTTP. Entonces siempre estamos usando HTTP post HTTP, reporte
GET HTTP, etc. Así que como ven aquí, estamos usando protocolo HTTP para enviar nuestras solicitudes al backend, por lo que queremos interceptarlas. Por lo que la u r l estará dentro de esta solicitud. Entonces cuando digo dame los datos del usuario, entonces iré y pondré la solicitud. Y dentro de esta solicitud hay URL, y esta URL será nuestra URL API. Aquí podemos decir const es API URL. Y entonces diré que me dé esa petición, que se pasa aquí. Y luego eres L y luego empieza con, así que si la URL empieza con mi API, si recuerdas que almacenamos la API dentro de nuestras variables de entorno, que se encuentra en el archivo de entorno. Entonces también podemos aquí decimos que me den el medio ambiente. Se importará de ambientes, medio ambiente. Y luego estableceré la URL de la API. Entonces si mi URL API empieza con esta URL. Entonces lo interceptaré. Por lo que significa que es una URL de back-end. De acuerdo, Como les dije anteriormente, tenemos que poner eso en los encabezados, cómo podemos hacerlo. Entonces cuando tenemos un token, así digo cuándo, si token y también cuando tengo es API URL, entonces voy a agregar los encabezados a esa solicitud. Por lo que diré solicitud será la misma solicitud, pero clonarla como clonar la solicitud actual y ajustar lo siguiente. Por lo que necesitamos ajustar esta solicitud para tener cabeceras establecidas. Como recuerdan, les dije que necesitamos poner el token en los encabezados de la solicitud. Y entonces diría autorización. Y luego si recuerdas que estamos usando autorización de cerveza, así que aquí voy a tener arroyo llamado amargo y luego espacio. Te acuerdas que tienes que poner espacio. Y entonces pondré la ficha después. Entonces de esa manera, voy a pasar el token con una amarga autorización en los encabezados de cualquier solicitud. Y mantenemos esta siguiente solicitud de manejo de punto. Entonces está bien, guardamos eso y revisamos nuestra consola si todo está funcionando bien, bien, todo está funcionando bien. Pero ahora necesitamos exportar este interceptor como cualquier servicio que hicimos antes, para poder usarlo fuera de nuestra biblioteca, de nuestra biblioteca de usuarios. Entonces vamos aquí a indexar y voy a decir Exportar, y luego de servicios lib y luego interceptor JWT. Entonces después de eso ahorramos y luego necesitamos
usar este interceptor donde estamos usando el interceptor. Tienes opción. Puedes usarlo aquí en módulo de usuarios porque estamos usando así al usuario como módulo en módulo de app. O puedes usarlo directamente en módulo de aplicación. Entonces, ¿cómo podemos usar eso? Iré también aquí y revisaré los proveedores que estoy teniendo, declaración de módulo
NG o importación. Y hay algo llamado proveedores. Entonces improvisadores, estoy brindando servicio. Estoy aportando algún token. Estoy brindando alguna variable a un servicio para poder usarlo. El modo de usar eso es que decimos que ponemos
aquí una coma y luego abrimos un objeto y decimos proporcionar. Y luego interceptores HTTP. Y como ven aquí, los interceptores
http provienen de HTTP en Angular. Entonces usamos éste. Y luego vamos a decir use class como por defecto. Vamos a utilizar la clase cuál es el interceptor JWT, que creé en la biblioteca del usuario. Entonces cuando vaya aquí, veré que se importa automáticamente como ven aquí. Por ejemplo, si subimos, veremos que el interceptor JWT se importa de la biblioteca de usuarios. Nosotros decimos que Multi es cierto. Entonces después de guardar y luego vamos a nuestro front end, veremos que somos capaces de ver a sus usuarios. Entonces también, puedo ver los pedidos porque aquí tengo un token y luego estoy cargando la solicitud con el token. Entonces como ven aquí, si vamos a una de esas peticiones, saben que tenemos aquí en la red. De acuerdo, tengo éste. Voy a revisar los encabezados que tengo aquí, conseguir, y voy a ver que, vale, portador de
autorización es mi ficha, vale, tal vez alguien me lo diga. Ajá, bien, entonces puedo generar cualquier token y luego
lo puedo enviar con los encabezados de mis solicitudes y tendones a través Cartero y luego puedo destruir su sitio web. No, esto no es posible porque si recuerdas, en el back-end, teníamos un secreto. Si recuerdas, hice un archivo secreto que se llama, por ejemplo, secreto. Lo agregas al token, y luego en base a eso, tienes una firma de token JWT, y luego generará para ti ese token basado en ese secreto. Entonces de esa manera, verás que también estás enviando este token y se analizará en base a esa cadena secreta que creaste. Si recuerdas, pongo, amo a mi perro, por ejemplo, como un secreto en el back-end. Entonces ahora si esto será analizado por Birkbeck y aceptado por esta clave secreta, entonces diabético y tu respuesta conmigo con un dato. De lo contrario, si envío algún token, no será aceptado porque no tendrá el mismo secreto que
creé al firmar ese token en el back-end y enviarlo al front end. Así que ten cuidado tienes que guardar este secreto, realmente secreto para que no puedas usarlo en ningún otro lugar o dárselo a nadie porque está asegurando totalmente tu aplicación. Entonces si recuerdas, estábamos usando el secreto, si recuerdas, y este secreto está en archivo de entorno y
lo estaba usando como mi perro es lindo o amo a mi perro es depender. Por lo que puedes poner aquí cualquier cuerda. Y en base a eso, todas tus peticiones en el back-end, usaremos ese secreto y luego analizaremos. Toda solicitud viene con ese secreto, luego sobre el token, y luego responderá por ti si es correcto o no. De acuerdo, Ahora tenemos, todo está bien. Hemos cargado nuestro token sobre la solicitud HTTP. Estamos recibiendo y asegurando nuestra aplicación admin totalmente sin ningún problema. Entonces ahora tengo el recapitulación. Si recuerdas, hicimos una seguridad y ponemos ese token en la aplicación, en el almacenamiento local. Y estamos usando este token para enviar esa solicitud y también redirigir al usuario a la página de inicio de sesión si no están bloqueados. En la siguiente conferencia, vamos a hacer el cierre de sesión, que sólo es eliminar este token JWT. Y luego estaremos fuera de sesión.
132. Usuario de sesión de sesión: Está bien, genial. Ahora vamos a ver cómo podemos cerrar sesión un usuario. Entonces si hago clic en este botón, voy a cerrar la sesión del usuario. Cuando queremos mirar al usuario, simplemente
eliminamos este token del almacenamiento local y luego redirigimos al usuario a la página de inicio de sesión. Por lo que al hacer clic en este botón, vamos a llamar a un servicio llamado bloqueo. Entonces podemos hacer eso de manera muy sencilla. Simplemente vamos a la biblioteca Usuarios donde estábamos creando nuestro servicio o servicios de autenticación. Tenemos login aquí. Nosotros vamos a tener también el logout. Por lo que voy a ir aquí y decir, dame una función de logout. No tendrá ningún parámetro. Simplemente miraremos al usuario. Entonces para eso vamos a utilizar también el servicio de almacenamiento local. Por lo que necesitamos también aquí para llamar al servicio de almacenamiento local. Entonces iré aquí a decir privado. Podemos decir token o token service, y luego podemos llamar al servicio de almacenamiento local. Y este servicio de almacenamiento local, lo
voy a utilizar aquí. Y luego este token de punto y luego quitar token. Entonces eso es todo. Y luego vamos en el front end a mirar al usuario o puedes mirarlo aquí afuera. Entonces en ese caso, necesitamos también un router. Por lo que llamaría aquí privado y luego router. Y luego vuelvo a recordar el router. Y entonces tengo, después de borrar el token, diré estos puntos, router, punto, navegar. Y luego seleccionaré la página de inicio de sesión. Por lo que voy a decir aquí login y luego guardamos. Y luego necesitamos llamar al servicio cada vez que haga clic en el botón de la barra lateral. Entonces si recuerdas, tenemos eso en su aplicación compartida en Admin. Tengo en la barra lateral también el botón que se llama bloqueo. Y voy a ir aquí y decir click. Al igual que cuando hago clic en este botón de este enlace, voy a mirar hacia fuera al usuario. ¿ Y qué decimos aquí? Cuida usuario. Y luego implementamos este método. Entonces vamos a la barra lateral también aquí en el componente. Y luego necesito llamar al servicio de autenticación porque se usa en el, O se crea en la biblioteca del usuario. Entonces diré aquí, servicio de autenticación privada y luego llamarme fuera de servicio desde la biblioteca del usuario. Y veremos que aquí se importa automáticamente. Pero a veces te equivocarás con la Auto Import que verás que está devolviendo el camino completo. No es hacerlo como con el atajo como hablamos anteriormente. Entonces a veces como debería ser como, como estos usuarios. Pero como ven aquí, tenemos un problema. Tenemos un error porque creo que eso es todo el servicio no se exporta. Entonces para comprobarlo, volvemos a ir a nuestra biblioteca de usuarios y comprobamos si hemos exportado el servicio de autenticación. Veremos que no se exporta. Por lo que tenemos que hacer también aquí, Export. Y luego de. Y luego seleccionaré la biblioteca y luego los servicios, y luego nuestro servicio. Por lo que aquí podremos ver eso en nuestro componente de barra lateral. Por lo que es mejor siempre para linting tener esta ruta de acceso directo. Entonces tenemos ahora el servicio de autenticación. Voy a crear otro método, que es que aquí creamos. Por lo que se llama usuario de bloqueo. Y este usuario de logout se ubicará en el TS. Bien. Definiré este método aquí y luego diré este punto servicio AVS. Entonces mira hacia fuera. Es así de sencillo. Y luego el vigía, si voy a
ello, me quitará ese token y luego me navegaría a la página de inicio de sesión. Guardémoslo todo y luego probaremos eso. Entonces como ven aquí, mi token está caducado. Entonces por eso grabé este video después de un día. Entonces como ves aquí, cuando haya caducado, tengo el token II ya se leyó dirigido a la página de inicio de sesión. Entonces veamos de nuevo. Por lo que iré aquí y pondré mi correo electrónico y contraseña. Ahora voy a iniciar sesión. De acuerdo, me
metí, estoy aquí, lo veo todo. Veo los pedidos usuarios, ese token es válido. Ahora voy a dar click en el Cerrar sesión. Por lo que cuando haga clic en el logotipo aquí fuera, se
le redirigirá a la página de inicio o a la página de inicio de sesión. Y verás que el almacenamiento local ya no tiene el token. Entonces así es como estamos cerrando sesión al usuario. Todo está funcionando bien. Puedes volver a iniciar sesión y luego ir a tu aplicación de panel de administración. De esa manera, terminamos todo lo relativo a la autenticación. Entonces ahora vamos a ver cómo podemos organizar más nuestro código. Vamos a hacer algunas refactorías y esto lo veremos en el siguiente apartado.
133. Estilo de Darte Dashboard: De acuerdo, después de que
terminemos la autenticación, vamos a decorar nuestro tablero. Si recuerdas, aquí tenemos la página del tablero. Nosotros vamos a hacer algo así. Entonces veremos que los pedidos totales y cuántos clientes tenemos, y cuántos productos y el total de ventas. Si recuerdas en el back end, implementamos todas esas API. Para que los pueda sacar también de la base de datos. Entonces hagámoslo. En primer lugar, voy a mi aplicación original donde tenemos un avance ahí. Entonces me voy a encerrar. Después iríamos al salpicadero de agua del baño cuenta con trabajos de tablero. Todavía no hicimos nada ahí. Por lo que vamos de nuevo a nuestras páginas en nuestra aplicación de administración, y luego vamos al panel de control. El tablero, si recuerdas, hemos creado componente como este, por lo que necesitamos refactorarlo. Primero eliminamos el estilo. No necesitamos el estilo porque vamos a usar los estilos públicos, que son carpeta de nuestros estilos aquí. Entonces, en primer lugar, vamos a plantillas este panel. Entonces como cada página de administración, vamos a hacer lo mismo. Entonces antes que nada, tendré un div y tendrá página de administración. Y esta clase de página de administración ya está implementada. Por lo que vamos a tener tan bien aquí nuestra tarjeta como lo hicimos anteriormente. Por lo que podemos tener aquí un dashboard como título y un subencabezado. Podemos tener como últimas actualizaciones. Entonces vamos a quitar así, como a no hacerlo como entrada. Podemos hacer que solo apareciera cadena y entrada pura. Entonces tenemos aquí el tablero. Entonces voy a haber acordado, si te acuerdas, aquí
tenemos cuatro rectángulos. Entonces necesitamos exactamente una grilla. Entonces vamos a hacer ahí. Y decimos div dot py grid. Y dentro tendré la llamada de py de punto UV y luego tres. Entonces necesitamos cuatro de esto. Y de nuevo, voy a usar esa tarjeta dentro. Por lo que tendremos también aquí otra tarjeta. Y dentro de esta guardia, estamos poniendo nuestro artículo. Por lo que el ítem que tendrá exactamente lo mismo, que tendrá icono, y algún título y algún número. Entonces hagamos lo mismo. Entonces también voy a definir un div. Y este div como un nombre, podemos llamarlo el ítem, como elemento de tablero. Y luego dentro de este artículo, tendré otro div. Pondré primero el icono. Entonces, por ejemplo, vamos a tener icono del carrito de compras, como cuatro pedidos. Y de nuevo, un lapso donde vamos a poner el nombre. Entonces tenemos aquí el lapso que se llama órdenes. Y entonces tendremos también otro lapso el cual contendrá número. Entonces podemos decir como código duro un número que es como 25 por ejemplo. Entonces veamos si nos va bien. De acuerdo, tenemos ahora esta tarjeta, tenemos el ícono, tenemos el texto y el número. Entonces vamos a atarlos. En primer lugar, voy a tener un fondo Estoy usando algún sitio web se llama un gradiente dot io. Y te dará muchos gradientes muy grandes. Puedes usarlos y solo puedes copiar el CSS del gradiente que quieras, luego usarlo en tu aplicación. Entonces antes que nada, voy a hacer un gradiente, éste. Entonces vamos aquí y vamos a darle estilo a nuestra aplicación. Entonces, en primer lugar, necesitamos tener un archivo de estilo para el tablero. Entonces si vamos, si te acuerdas, tenemos todos, todos los estilos aquí. Entonces la app de estilos, y esto es dashboard, que se utiliza sólo en el panel de administración. Por lo que podemos ponerlo dentro de la aplicación admin. Por lo que no podemos decir aquí el dashboard dot SCSS. Y luego también necesitamos importar este panel en el admin porque estamos usando este archivo. Y este archivo contiene todos los archivos que aquí nos utilizan, y lo estamos usando en la aplicación. Entonces si recuerdas, tenemos aquí también carpeta Estilos en el nivel de aplicación. Por lo que voy a ir y usar el archivo admin SCSS. Por lo que necesitamos de alguna manera importar también el archivo del dashboard. Recuerda que tenemos el caparazón. Ahora vamos a importar también el tablero. Por lo que simplemente reemplazamos esto por tablero. De acuerdo, Vayamos ahora a nuestro panel de control. Hagamos cláusula otras. Entonces no tenemos nada aquí. Podemos tener sólo el CSS y el archivo de dashboard, por lo que sólo necesitamos esos dos archivos. Trabajaremos con eso. Entonces, en primer lugar, quiero darle estilo al elemento del tablero. Por lo que el elemento de dashboard, estaremos en mi opinión como un flex para que podamos alinear las cosas dentro de este Flexbox. Y también que necesitamos alinear cada texto para ser centrado. Por lo que será todo el texto dentro de esto se centrará. De acuerdo, vamos a darle a toda sierra un gradiente. Entonces podemos, por ejemplo, copiar este gradiente aquí. Y voy a mi CSS y acabo de pegar y obtendría exactamente el estilo CSS que se asigna aquí. Entonces cargamos nuestra aplicación y vemos que solo es estilo dentro del div, pero quiero toda la tarjeta. Si recuerdas, el carrito siempre viene con algo llamado estilo de clase o clase de estilo. Por lo que la tarjeta en sí necesita tener algún estilo. Por lo que podemos escuchar tener clase de estilo. Y esta clase de tiempo será diferente de tarjeta a tarjeta, como ven aquí, porque las tenemos diferentes. Por lo que necesitamos un gradiente para cada carta. Para que podamos darle como un nombre. Entonces podemos decir las órdenes. Por ejemplo, voy a tener una clase especial para esto, que se llama las órdenes. Entonces aquí vuelvo al CSS y luego creo esta clase, y luego le doy un nombre, y luego muevo estos ingredientes aquí. Entonces lo pondré aquí y luego ahorraré. Y veremos que toda la tarjeta está coloreada. Y esto es exactamente lo que queremos. Por lo que ahora queremos que todo dentro del auto sea blanco. Por lo que en el artículo voy a decir color. Y si recuerdas, estábamos usando vars. Y si recuerdas que tenemos una variable que se llama encuestas, o puedes usar simplemente el color blanco. Entonces estoy usando los vars, cuales hablé muchas veces de ellos anteriormente. Por lo que tenemos aquí el color de la superficie será blanco. Y además, necesitamos tener que justifique el contenido entre esos elementos dentro de ese elemento o elemento de tablero para tener espacio entre ellos. Entonces como ven aquí que tenemos diferentes tamaños o fuentes, o tenemos esta grande, por ejemplo, esta talla y esta talla. Entonces démosles a todos en clase. Entonces yo, dimos, nuestro ojo usará una clase de esto y voy a dar para esto como por ejemplo, un nombre. Y voy a dar para esta clase la podemos llamar en número general. Entonces aquí vamos a darle estilo a esos. Entonces en primer lugar, quiero darle estilo al ícono dentro de que el ítem le daré el PI y luego diré tamaño de fuente, mucho antes de EM. Y luego lo damos como un margin-bottom solo para
empujar el contenido por debajo de ocho, como 15 pixel. Y además, voy a dar una talla para el nombre. Por lo que el tamaño de fuente de su nombre será, por ejemplo, 1.4 AM. Y el número será un poco grande. Por lo que lo voy a dar como por ejemplo, tamaño de
fuente será 3M. Por ejemplo, podemos darle un 3M. Y así lo vamos a hacer flotar, ¿verdad? Entonces podemos poner el texto a la derecha, pero está bien, no lo hagamos ahora. Te lo mostraré más tarde. Entonces salvamos éste. Verificamos que todo sea como redimensionado, vale, pero como vemos aquí que no tenemos el color, no
sé por qué tenemos color, traje, cara. Olvidé un litro. Entonces tendremos el color blanco, esperemos. De acuerdo, tenemos ahora el color blanco. Pero como ven aquí que no conseguimos ningún efecto. Entonces tal vez pueda agrupar estos dos elementos como el icono y el nombre en un div. Entonces esto será como por ejemplo, en un div, puedo quitar este y ponerlo y hacer este lapso solo. Entonces veremos que el flujo se dividirá entre este lapso y este div. Por lo que se dividirá entre ellos. Entonces como ven aquí, que el flex me dio la capacidad de tener aquí las órdenes y aquí el número. Para simplificar el modo de código como no tener este div y este div y ponerlos dentro de un div para estar en nuevas líneas, solo
podemos usar un HTML simple como fin de semana, digamos un BR aquí. Al igual que podemos poner una línea de freno aquí. Entonces solo lo estoy haciendo muy sencillo. Por supuesto que puedes hacerlo de una manera que quieras. Yo solo quiero mostrarles cómo podemos peinarlo rápidamente. Vemos también entonces este número es como un poco alto. Podemos bajarlo como un poquito. Por lo que podemos darle margen superior a este número. Entonces podemos decir aquí, ese número le da un margen superior alrededor de 50 pixel. Entonces veremos ahora que tenemos nuestro primer artículo. Por lo que solo necesitamos duplicar esos artículos para tener otros cuatro, como los productos del usuario y las ventas totales. Y luego les damos diferentes gradientes. Entonces lo hacemos rápidamente. Por lo que en primer lugar, voy a duplicar esta columna porque aquí tenemos la columna tres y
otra, otra otra y otra. Entonces necesitamos tener cuatro. Entonces primero, serán productos, ¿de acuerdo? Tiene un número. Y también los productos serán, por ejemplo, un caso breve. Y si recuerdas, queremos dar un gradiente diferente. Por lo que necesitamos poner aquí también un producto. Por lo que la tarjeta tendrá una clase diferente a la otra. Entonces así aquí hacemos lo mismo por los usuarios y hacemos lo mismo también. Al igual que le damos el icono serán los usuarios. Y también aquí los usuarios del elemento de tablero. Y además, necesitamos tener aquí ventas totales. Y podemos dar aquí, como podemos decir que el icono es dólar. Estoy recibiendo los iconos de Prime NG como vimos anteriormente. Por lo que ponemos aquí ventas totales. Y además, necesitamos aquí tener un número pero en dólar, por lo que podemos usar también las tuberías de las que hablamos anteriormente. Entonces tendré aquí una cuerda como 120, y luego usaré la pipa de moneda. Entonces lo guardamos todo. Y volvemos a ir a nuestra aplicación. Veremos que tenemos las cartas, pero no tenemos suficiente ni el gradiente. Entonces vamos a copiar los mismos gradientes que he creado aquí. Por lo que para hacerlo rápidamente, también
seleccioné algún gradiente, como les dije anteriormente, de la página web. Por lo que podemos guardar eso e ir de nuevo a nuestra aplicación. Y veremos que tenemos aquí los colores como asignamos aquí. Como veo aquí, que la fuente es un poco grande, por lo que podemos hacerla más pequeña. Entonces para el número, así podemos hacer que este número tenga, por ejemplo, 2.5. Sería mejor, supongo. De acuerdo, ahora tenemos todo está bien. Hemos decorado nuestra primera página en nuestro tablero de instrumentos. Por lo que también necesitamos reemplazar estos números por los datos reales que provienen del back-end. Y esto lo veremos en la próxima conferencia.
134. Servicios de estadísticas de Dashboard: De acuerdo, Como ven aquí, agarré todos los datos de la base de datos en base a nuestros servicios. Entonces cómo hice eso, pero la solución, lo adjunté, el código con esta tarea y lo voy a explicar rápidamente. Entonces, en primer lugar, si vamos al componente dashboard, he llamado a múltiples servicios, uno para conseguir el recuento de pedidos, los productos cuentan, y los usuarios cuentan, y el total de ventas. Y entonces no dije como por separado, como bien, este punto suscríbete y dame el conteo de pedidos y luego producto dot suscríbete y dame el conteo de productos, como lo hicimos anteriormente con muchos lugares aquí en el foros o con la lista de categorías, por ejemplo, como ven aquí que me estaba suscribiendo a este resultado de este GetCategories. Y luego estoy asignando dos categorías para mostrarlas en la plantilla. Conoce aquí es un poco diferente. Usé una función en R x js que se llama combine último. Y estos últimos combinados, Es tan gran manera de combinar múltiples observables. Entonces cuando todos ellos listos, como es, estos son observables. Cuando estén listos, entonces me suscribo a ellos y obtendré array de los valores exactamente el mismo orden de esta matriz. Por lo que aquí me pondré en el primer miembro de este valor, obtendré el conteo de pedidos. Y en el segundo recuento de productos, recuento de
usuarios y ventas totales. Y si cambia eso, como por ejemplo, si mueve esto hacia arriba, entonces los valores serán diferentes. Entonces como ves aquí, los valores, será una matriz. Como vemos aquí. Será conteo de pedidos, conteo productos, recuento de usuarios, y ventas totales. ¿ De acuerdo? Y luego asigno estos valores. Miembro de la clase, que se llama estadística, que es una matriz. Y esta matriz, lo usé en la plantilla. Yo fui aquí y digo: Ok, estadísticas, dame la primera, porque como recuerdas,
tenemos aquí, primero es el conteo de pedidos. Entonces dame el primero. Y luego conteo de pedidos de puntos. Hablaré de este conteo de usuarios de punto-producto contrarrestado más adelante. Entonces ahora tenemos exactamente cómo obtenemos los valores del back-end. Por lo que las estadísticas primero serán el recuento de productos, exactamente el mismo orden que aquí. Y así para todo ese usuario cool y también el total de ventas. Sólo una cosa, como recordar tener aquí, ng-si que si los sticks estáticos está lleno o me refiero a que tiene longitud, entonces mostrar el componente en sí de toda la página del tablero porque de lo contrario
obtendrás error cuando esos los valores aún no están listos. De acuerdo, vamos a las superficies. Por lo que sus servicios, como ven aquí, que se les llama de diferentes bibliotecas. Por lo que utilicé aquí servicio de usuario, producto, servicio, servicio de pedidos. Depende de dónde cada función relacionada, por ejemplo, con el servicio de pedidos. Fui a los servicios de pedidos aquí en la biblioteca de pedidos. Entonces dije, dame el conteo de órdenes y volverá para mí observable. Y el tipo de la misma será el número de recuento de pedidos. ¿ Por qué tengo esto? Exactamente esto porque nuestra API,
si recuerdas, me devolverá un objeto, y será de esa manera, no me devolverá el número directamente. Se devolverá en un objeto. Por lo que debo igualar exactamente los mismos ingresos que provienen del backend y lo pongo en el front end. Por lo que esperaré campo de recuento de pedidos con un valor que será el número. Por lo que el retorno observable tendrá esta forma y también que get estará esperando esta forma. Entonces lo mismo que hice también para todos los demás servicios. Por lo que tenemos aquí dashboard y tenemos también el recuento de productos. El recuento de productos, como ven, vendrá igual de la misma manera porque estoy recibiendo del backend de esta manera. También puedes ajustar que te mostraré más tarde y así para los usuarios y el total de ventas, el total de ventas está en los pedidos. Por lo que lo tenemos también en la biblioteca ordenada. Entonces como ven aquí, obtenemos también el total de ventas como número. Por eso en el tablero, en la plantilla, dije:
Está bien, dame estadísticas. El primer valor. Y entonces el valor será objeto porque aquí las estadísticas tendrán múltiples valores los cuales vienen de esos observables. Y todo observable está regresando para mí objeto. Por lo que quiero usar valor o estadística miembro de la matriz estática. Y entonces diré que me des el conteo de órdenes del mismo. Si no quieres de esa manera. Al igual que si quieres hacerlo de esa manera, solo. Te estoy explicando eso solo para mostrarte cómo
hacer todos estos cambios fácilmente en tu código. Entonces digamos que estamos esperando los valores. Directamente, como voy a llegar aquí, no objetos, sino el valor directamente. Entonces, ¿cómo podemos hacer eso? En primer lugar, voy al recuento de órdenes get por ejemplo, y esperaría conteo no ordenado, pero esperaría solo número. Y así, yo esperaría aquí sólo número. Pero como saben, la API devolverá para mí el objeto, objeto en sí. Entonces esto está mal para mí. Por lo que no voy a conseguir un número, voy a obtener objeto. Por lo que puedo mapear su retorno, que viene de la API. Puedo cambiarlo para que sea sólo un número. Por lo que puedo hacer esto sólo como un número. Entonces, ¿cómo voy a hacer eso? Yo puedo conseguir esto y poner pipa después de todo, todos estos se ponen. Y luego digo mapa. Y voy a importar este mapa de nuestros operadores x js. Y esto es un mapeo espacial, no como el mapa de matriz. Es mapeo de nuestro operador XJ AS el cual viene de nuestra biblioteca x js. Por lo que me va a devolver ese mapeo y puedo mapear el valor como quiera. Entonces esperaré aquí al objeto, que viene así. Entonces aquí o el conteo vendrá como objeto. Y quiero mapearlo una manera de ser solo un número. Entonces cómo puedo hacer eso, diré que tengo aquí valor objeto por ejemplo. Y entonces no devolveré el valor del objeto. Voy a devolver el valor del objeto punto. Y entonces elegiré éste, el recuento de pedidos. Entonces digo eso,
que este valor de objeto será el recuento de pedidos. Entonces de esa manera, necesito decir que este valor de objeto puede ser cualquier orden. Se puede especificar el tipo directamente cómo lo especificamos antes. Entonces como recapitulación, utilicé el mapa de nuestra x j como operadores. Y entonces esperaba objeto que vendría de la API. Y entonces dije, no me des el objeto en sí, sino dame campo de este objeto, que se ordenará contar. Lo mismo que vamos a hacer por las otras partes. Entonces por ejemplo, vamos a hacer para los usuarios, Vamos aquí. Y aceptaríamos, esperamos que no tengamos conteo de usuarios, pero tendremos número. Y así aquí no cuenta de usuarios, pero tendremos también número. Y entonces diré pipa de punto. Y entonces el valor del objeto no será el objeto en sí, sino la cuenta de usuario. Me gusta porque como recuerdas, la API devolverá para mí el recuento de usuarios en objeto. Entonces esto es mapeo de su valor de retorno, que proviene de lo observable. Entonces de esa manera, garantizaré que obtendré el número porque el objeto de forma backend es así. Vamos a importar también este mapa aquí de nuestra x j s. así que
tenemos aquí observable y así el mapa de RX j como operadores. Recuerda, este mapa no es mapeo de array, es mapeo de nuestro x js. Por lo que hay que ponerlo dentro de una pipa fuera observable. Entonces lo mismo que vamos a hacer también por el total de ventas. Entonces no esperamos ventas totales como esta, pero podemos esperar mapa y este mapa fueron devueltos para mí así, exactamente de la misma manera. No estamos haciendo ningún cambio excepto este campo ya que viene del back-end. Por lo que voy a decir aquí total. Entonces lo guardamos todo. Y luego tratamos también de hacer eso para los productos. Yo lo voy a hacer rápidamente. Por lo que tendremos aquí número y así aquí tendremos un número. Y entonces usaría e importaría ese mapa de nuestro x js. Entonces podemos tener aquí mapa y luego lo voy a utilizar aquí importado. Entonces para cada servicio, tenemos que hacer de la misma manera y colocar aquí el valor de pipa y objeto. Y no será conteo de pedidos, pero sería producto Dios. Entonces guardamos todo y comprobamos que todo esté funcionando bien. Todos estos pasos, que hice ahora es sólo porque no quiero ver aquí como punto y luego pedir el conteo y luego contar el producto. Ahora sólo podemos tener las estadísticas y los valores de inundación que vienen del backend. Por lo que aquí podemos intentar volver al navegador. Y comprobaremos que estamos consiguiendo los valores de la manera correcta. Como vemos que no estamos recibiendo el total de ventas. Vamos a revisar la API. Veamos cómo dice el total un retorno. Entonces tal vez tengamos algunos tipográficos, así que podemos tener aquí ventas totales. De acuerdo, vamos a revisar nuestra API. Volvemos a ir a pedir servicio. Entonces, ¿dónde está el servicio de pedidos? Está aquí. Y entonces diré que obtener ventas totales son, sigue siendo cuenta de pedidos. Por lo que podemos poner ventas totales así. Y entonces tenemos también la API. Todo está funcionando bien. Recargamos y vamos al navegador y comprobamos si vuelve a funcionar. Agradable, está funcionando de nuevo. Entonces como ves que hemos mapeado los valores que
vienen del backend a un solo valor después de leer ese objeto. Por lo que tienes control total en el front end. Solo tienes que emparejarte con un backend y todo te va a funcionar bien. La parte más importante de esta conferencia que, o esta solución de la tarea es usar este último combinado. Por lo que no tienes que suscribirte a uno por uno. Tenemos código muy corto. Nos suscribimos a todo y ponemos los valores en estadística y los usamos en el front end o en la plantilla.
135. Refactoring de rutas: De acuerdo, en esta conferencia vamos a hacer alguna refactorización a nuestro código. Entonces, antes que nada, hagamos algo de refactorización para la ruta. Por lo que la ruta, como recuerdas, los
hemos creado en el nivel de aplicación. Entonces como ven aquí que tenemos en el módulo app, tenemos todas nuestras rutas están ubicadas aquí. En primer lugar, lo que vamos a hacer, vamos a crear un módulo especial para las rutas y luego hacer que el tablero funcione bien. Y también las otras páginas. Porque por ejemplo, cuando vaya aquí a la ruta y vaya a la página principal, voy a ver que me estoy quedando página vacía. Entonces lo que espero que deba tener el tablero directamente. Entonces no quiero tener una ruta que se llama dashboard aquí. Hacer eso es muy sencillo. Sólo tenemos que decir eso, vale, tengo el padre es grosero y tengo el shell que está conteniendo el contenido y la barra lateral siempre. Y luego quiero tener el tablero no en URL separada, pero será exactamente lo mismo que ruta aparente. Por lo que sólo podemos quitar este camino de aquí y luego decimos Guardar. Y luego veremos que nuestra aplicación se carga directamente en la página del tablero. Por lo que siempre que vaya al Dashboard, voy a ver que el dashboard estará en la página de inicio. Entonces como ves que hemos configurado previamente en la barra lateral que el tablero tendrá panel de barra inclinada. Por lo que tenemos que quitar eso también. Entonces vamos aquí a lo compartido y luego a la barra lateral. Y en la barra lateral, diría que el enlace del router será sólo la página de inicio. Por lo que no tenemos que especificar la página de esa manera. Entonces voy aquí a los productos, vuelvo al dashboard, todo está funcionando bien. De acuerdo, el segundo paso, voy a refactorizar el módulo de aplicación y poner las rutas en módulo de ruta separada. Porque como vemos aquí que tenemos un archivo muy grande para app module. Por lo que normalmente podemos poner las rutas en módulo separado. Entonces hagámoslo. Como saben, que podemos tener múltiples módulos en aplicación
Angular y esas moléculas pueden contener múltiples componentes en sí también. El módulo no tiene que contener múltiples componentes. Se puede utilizar para importar algunas bibliotecas como módulo UX también. Puede estar sosteniendo las rutas en sí. Por lo que podemos hacer eso con una X. Puedes generar un módulo o simplemente puedes usar fragmentos angulares. Yo solo quiero mostrarles que son de cualquier manera diferente para generar componentes y módulos en Angular. Por lo que en primer lugar, puedes usar Generar y luego puedes encontrar módulo. Y aquí encontrará esquemas, módulo angular. Y aquí especificas las propiedades de tu módulo como vimos anteriormente. Pero hay otra forma en que puedo instalar también extensión, que se llama fragmentos angulares. Y este fragmento angular, siempre
está siguiendo la versión angular, por lo que siempre está siguiendo la versión actual en la que estás. Entonces aquí tenemos fragmentos angulares. Puedes instalarlo y te dará capacidad para generar componentes directamente en vivo en el código, como ves aquí. Por ejemplo, necesitamos un módulo. Por lo que después de instalar esta extensión, podemos usarla. Entonces, en primer lugar, voy a crear un nuevo archivo en el nivel de la app, así que cerca del módulo de app y llamarlo módulo de enrutamiento dot ts. Y dentro de este enrutamiento de aplicaciones, voy a usar los fragmentos. Entonces sólo tengo que poner un menos. Y entonces enumerará para mí algunas opciones de los fragmentos. Entonces voy a decir Aquí módulo, como ven aquí. Y luego cobro Enter o presiono Enter. Y cuando presione enter, va a generar para mí todos estos artículos. Y va a generar para mí el naming y especificado para que pueda dar un nombre directamente. Por lo que yo diría módulo de enrutamiento de aplicaciones. Y es por defecto importando algún componente que no necesito. Por lo que podemos quitar esta importación de componentes, ya no
necesitamos eso. Y ahora tenemos el módulo de enrutamiento de aplicaciones. Por lo que podemos copiar todas las rutas aquí que tenemos. Entonces podemos copiarlos todos o cortarlos y luego pegarlos en módulo NG detrás del módulo AND porque es una constante y la voy a usar. Y de la misma manera, necesitamos importar todos esos componentes. Por lo que para importarlos rápidamente, solo
necesitas presionar el espacio de control o el punto de control y luego obtendrás todos ellos. Entonces lo voy a hacer rápido. Como vemos que automáticamente importamos todo y necesitamos también el, nuestro protector bucal, que hemos especificado de los usuarios Biblioteca. Y además, necesitamos importar el tipo de rutas que viene de Angular. Por lo que ahora tenemos las rutas importadas. Voy a hacer exactamente lo mismo como lo hicimos en el módulo. Por lo que necesitamos copiar también esta línea o cortar la diapositiva. Entonces vamos aquí y lo llevamos. Y luego vamos al módulo de aplicación y vamos a la importación, porque está en la importación, voy a importar módulo router. Y luego vamos a utilizar este módulo de enrutamiento en módulo de aplicación. También necesitamos importar nuestro módulo de proteínas en nuestro módulo de aplicación. Por lo que en ese caso, tendremos las rutas automáticamente dentro de nuestra aplicación. Nuevamente, controlar el espacio para importar automáticamente. Y entonces tendremos todas estas bibliotecas ya no son necesarias. Entonces cuando ahorres, veremos que estamos encanecidos. Por lo que eso significa que no se usan en ninguna parte. Por lo que también podemos quitar la importación no utilizada. Si recibes tal error en la consola que está bien, salida
del router no está definida. Esto se debe a que ese módulo de la aplicación ya no tiene el módulo del router. Debido a eso, también puede realizar una exportación del módulo router en el módulo de enrutamiento ARP. Por lo que solo necesitas tener en exportaciones módulo router nuevamente. Por lo que entonces sabrá que el módulo de aplicación está usando el módulo router, que se utiliza en el módulo de enrutamiento AP. Y podemos revisar de nuevo nuestra navegación. Vemos que todo está funcionando sin problemas. Y además, necesitamos especificar si el usuario, por ejemplo, fue a página indefinida, algo así. Entonces, ¿qué va a pasar? No quiero que vea un amplio debate. Yo quería, por ejemplo, ser redirigido a la página de inicio. Entonces cómo podemos hacer este redireccionamiento a la página principal, Es muy sencillo así como ustedes ven aquí que tenemos múltiples socios y el camino raíz, pero no vamos a utilizar estos caminos de ruta. Vamos a crear otro pase. Y es muy importante estar al final este camino. Por lo que este camino será como dos estrellas. Y luego podemos decir redirigir a la página que quieras. En nuestro caso, queremos ser directos a la página de inicio. Y luego necesitas, después de tener todo como Directorio directo a, necesitas tener partido de baño y luego lleno como yo quiero igualar exactamente este camino que fuera. Entonces podemos tener aquí exactamente eso fuera. Entonces tenemos todo,
todo lo que aquí no está definido, luego redirigido a la página de inicio. Tienes que estar seguro siempre de que esto viene al final. De lo contrario, si lo pones antes, entonces todo será redirigido a la página de inicio. Entonces, intentémoslo de nuevo y hagamos algún problema aquí. Y por ejemplo, veremos que nos dieron tres dirigidos a la página principal. Entonces de esa manera, hemos refactorizado nuestro módulo de enrutamiento para tener módulo aplicación
más estable y más limpio. Y además, vamos a hacer otra refactorización que están relacionadas con el desempeño, como veremos más adelante.
136. Suscripción para el rendimiento: Una de las historias importantes que el usuario o el desarrollador siempre está cayendo en esa fuga de memoria. El escape de memoria es muy dolor de cabeza para la aplicación, especialmente en Angular. Tendrás que tener y estar seguro de que no tienes fugas de memoria en tu aplicación. Entonces, ¿cuál es el significado de la fuga de memoria? Una fuga de memoria es como algo que estás creando, por ejemplo, un objeto. Y este objeto se está creando una y otra vez y otra vez cada vez que visitas, por ejemplo, alguna página específica. Entonces por ejemplo, voy aquí dos categorías. Abro nuevo objeto, y este objeto se está quedando en su memoria. Voy y vuelvo de nuevo, abro un nuevo objeto, y el viejo objeto se está quedando en la memoria. Esto es que estoy hablando de objeto. Pero en nuestro caso aquí, la única fuga de memoria que tenemos son las suscripciones. Si recuerdas, estábamos usando suscripciones para agarrar los datos de los servicios, del back-end. Y esos servicios siempre están brindando observables. Y esos observables, los estábamos
usando tú diciendo como Queremos suscribirnos a algo. Por ejemplo, tengo lista de categorías. Y si quieres en el componente de lista de categorías, puedes ver cómo estamos abriendo una suscripción. Y si recuerdas que la suscripción significa que estoy observando los valores no lo harían cuando están listos a partir de este observable, que es el método GET, método HTTP. Y entonces me estoy suscribiendo a ella para obtener los datos de ella. Por lo que cada vez que estoy visitando este componente, estoy abriendo una nueva suscripción. Y esas suscripciones deben ser cerradas. Hay múltiples formas de hacer como suscripción o terminar la suscripción. Uno de ellos es hacer como punto, darse de baja, como inmediatamente después de suscribirse a él. Entonces obtengo los datos y luego me di de baja. De lo contrario, se puede tener, otra forma usaría KMS y más eficiente desde nuestro XJ como lo hacemos se llama tomar hasta. Y aquí se puede especificar una Biblia. Y dentro de esta pipa es como si estuviéramos filtrando los datos que vienen de ese observable. Digo tomar hasta y tomar hasta siempre de los operadores de nuestro x js. Recoger hasta está esperando algo que se llama sujeto. Y este tema, cuando lo utilices o termines, entonces se terminará la suscripción. Para explicar más, como estoy diciendo, big data, big data hasta que algo suceda. Entonces lo que este algo, algo que se llama RX JS, llamado sujeto. Por lo que puedes definir y utilizar objetos muy fácilmente. Digamos que podemos darle un nombre a este tema. Por lo que podemos decir, y subs N suscripciones. Y siempre una suscripciones que están dando como sufijo con un signo de dólar. Y este signo de dólar de esa manera, significará que tengo aquí sujeto u observable. Y este n subs tendrá un tipo de tema. Y el tema también de nuestros x js. Y siempre, cuando creas un tema, necesitas decir un nuevo tema. Y yo siempre, este tema necesita especificar un tipo, como ven aquí, un tipo genérico. Por lo que necesitas esperar algo dentro de ese tipo. Por lo que podemos decir por ahora cualquiera. Entonces en este caso tenemos n subs. Por lo que n subs empezarán a ejecutarse cada vez que visito este componente, que es por ejemplo, lista de categorías. Entonces abro ahora y ustedes las piscinas de sujeto, se llama termina ups. Por lo que quiero tomar esta suscripción de datos hasta que n subs termine. Entonces cuando termina acabado escaneado o cómo puedo terminar termina ups y subsecuente ser terminado de esta manera. Por lo que no se puede decir que esto termina arriba y luego se puede decir completa. Entonces en este caso, digo que termina terminado. Entonces toma hasta termina ups como n suscripción, que está sucediendo aquí. Entonces cuando ahorremos, intentemos eso. Veremos que estamos, vale, estamos obteniendo los datos. Entonces después de que
conseguimos las categorías, terminamos los extremos y estamos consiguiendo aquí los, por ejemplo, los datos. Pero como ves que hemos terminado su suscripción el n, en n, que no es tanto buena práctica porque en NDI, en Editar, si hay algún retraso desde el backend, entonces esto se ejecutará antes de esto. Y luego obtenemos las categorías, y luego habrá retraso y se terminará la suscripción antes de que empiece. Entonces para ti, para eso, estamos usando OnDestroy. Entonces cuando se destruye el componente, lo que quiero decir, entonces cuando salí de cualquier componente en Angular, por ejemplo, cuando salgo de la lista de categorías y voy a productos, obtendré NG onDestroy de categorías componente, lo que significa que estoy destruyendo el componente directamente. Ya no lo necesito, sólo cuando lo vuelvo a visitar. Por lo que ejecuto el NG en él. Otra vez. Este es el ciclo de vida de los componentes en Angular. Por lo que quiero agregar suscripción cuando el componente se destruyó. Entonces, ¿me entiendes? Yo creo. Entonces aquí necesitamos usar en destruir también. Por lo que este componente se implementará en init y en destruir. Entonces para eso, necesitamos crear un método que se llama NG OnDestroy. Y esta energía sobre destruir hará por mí el trabajo que quiero. Entonces digo aquí, n subs completos. Entonces para estar seguros podemos consola log algo aquí para ver que cómo se ejecuta o imprime algo que categorías destruidas. Entonces si quieres, puedes guardar eso. Y luego vamos a Categorías y salimos de ella. Entonces aquí mi aplicación se está volviendo a cargar. Salgo ahora de categorías. Veré que las categorías se destruyen, por lo que se retira de la memoria. No tenemos nada ahí. Entonces para eso, cuando la energía y se destruye se completa y no tengo toma hasta aquí. Las suscripciones permanecerán abiertas. Y cada vez que visito la página de categorías, te
abriré suscríbete, suscríbete, suscríbete, lo que me causará una fuga de memoria. Por lo que es mejor decir tomar hasta y destruir esta suscripción cuando n subs se complete, lo que en realidad está sucediendo cuando Nk de la constante no será destruido. Entonces como ven aquí, que después de destruir este componente, estamos terminando las suscripciones para tenerlo más eficiente. A veces las personas que dicen hacen eso también, como tomar el siguiente valor, asegúrese de que tiene el siguiente. Y luego hacer, por ejemplo, ese fin de suscripción o completo de su suscripción. Entonces en ese caso, necesitas hacer eso para todas las suscripciones que estás abriendo en tu aplicación para evitar todas las fugas de memoria que tienes. Para eso, necesitamos hacer todo esto por nuestros,
nuestros componentes, lo que hicimos. Y a partir de ahora, siempre
vamos a usar esto termina ups para completar siempre el tema y terminar las suscripciones. En este video, voy a hacer lo mismo para todos los componentes que hemos creado o para todas las suscripciones que hemos abierto para no hacerlo video lento para ti. Y al final verás el código de sección, que es a eso con todo con NG OnDestroy y así con Suscribirse tomar hasta.
137. Arquitectura de los componentes en el repositorio: Genial. Ahora vamos a empezar con nuestra tienda ND. Ahora tienda donde entrarán sus clientes y productos C y ordenarán algunos productos. Entonces si recuerdas, hemos creado el repositorio del proyecto de esa manera que tenemos una tienda y por ejemplo, una aplicación de blog interna y la aplicación de panel de administración. Hemos terminado la aplicación del panel de administración y vamos a empezar con la aplicación de e-shop, pero no voy a usar ese concepto que tengo una sola e-shop, voy a asumir que tengo múltiples clientes ya que estoy desarrollando empresa, por ejemplo, soy empresa de software. Y quiero brindar mi e-Sharp a múltiples clientes. Entonces para no repetir ese código una y otra vez, puedo obtener el beneficio de usar las bibliotecas. Entonces, por ejemplo, quiero, por ejemplo, a utilizar el componente de inicio de sesión y volver
a utilizar el componente de inicio de sesión yel componente de
registro en otro cliente o en otra tienda. Por supuesto, puedo cambiar el estilo del login y luego
no repetiré el mismo código cada vez que tenga un nuevo cliente. Entonces voy a usar este enfoque. Entonces como ven aquí que tenemos NGI tienda uno y choque energético también. Y moví todos los componentes del extremo G-sharp uno para ser proporcionados por las bibliotecas como productos y pedidos. Por ejemplo, tendremos el componente de lista de categorías, banner y detalle del
producto y el componente de lista de productos que estará todo en la biblioteca de productos. Entonces en ese caso, cuando yo creo y tú compras, puedo usar los mismos componentes que se encuentran en esa biblioteca. Por lo que no quiero volver a repetir la codificación en cada tienda de NG. Y esto será todo bajo un solo repositorio, que se llama repositorio Blue Bits. Y obtendríamos el beneficio de compartir el código entre nuestra organización. Déjame explicarlo más. Entonces, por ejemplo, Google tiene el mismo inicio de sesión para todos sus servicios, como Google Drive, Google AdSense, Google Analytics, verás siempre que se utiliza el mismo componente de inicio de sesión. Y esto lo que voy a hacer aquí, voy a usar los mismos componentes o la misma biblioteca con diferentes servicios. Yo estoy proveyendo para eso. Volver a nuestro diseño. Veremos que estamos usando esas categorías, por ejemplo, lista de productos arrendados y destacados. Y esos se ubicarán exactamente en la Biblioteca de productos. Y además, el inicio de sesión será el mismo inicio de sesión que usábamos para el panel de administración anteriormente. Entonces de esa manera, estamos reutilizando componentes. Cada e-sharp que estamos creando.
138. Preparación de estructuras y estilos: De acuerdo, bienvenido de nuevo. Ahora vamos a ejecutar la aplicación que necesitamos para cualquier tienda. Si recuerdas, tenemos dos aplicaciones. Uno es el administrador, y el segundo es inicialmente, tienes dos formas de ejecutar cualquier aplicación. Sólo se puede escribir en x serve, y luego se puede escribir el nombre de la aplicación. Por ejemplo, tengo cualquier tienda o puedes usar también la consola NX, lo hicimos anteriormente, como un servicio. Y luego puedes especificar la tienda que quieres. Entonces para mí, voy a usar una línea de comentarios e iniciar nuestra aplicación. Aquí. En lugar de tener la aplicación del panel de administración, tendremos el front-end o el end you shop application. De acuerdo, su aplicación se está ejecutando con éxito. Vayamos aquí a refrescar nuestra página y veremos que tenemos lo que hicimos anteriormente cuando les estaba explicando sobre la energía prime. Entonces, en primer lugar, necesitamos configurar los estilos de suma. Tenemos que preparar nuestro front end. Entonces si volvemos al diseño, como ves aquí en la foto, verás que el sitio web en sí está en un contenedor. Por lo que ese contenedor tiene un ancho específico. Y vamos a poner toda la aplicación dentro de ese contenedor. Por lo que la aplicación no será una aplicación de ancho completo. Entonces para hacer eso, vamos aquí a nuestro fin aplicación de tienda. Y así tenemos aquí aplicación. Y aquí en el componente app, no
vamos a tener directamente el encabezado y el pie de página, pero los vamos a contener en algún contenedor. Entonces podemos crear un div, darle una clase, podemos llamarlo contenedor. Y dentro de este contenedor, vamos a poner todos esos componentes que estamos llamando para nuestra aplicación. Y este contenedor, podemos configurarlo para que podamos ir a los estilos de nuestra aplicación. Si recuerdas, tenemos estilos públicos y tenemos aquí y tu compras en tienda NDI está usando algunos otros estilos. Entonces, por ejemplo, podemos usar alguna clase que podamos colocarla aquí. Entonces aquí no tienes que importar solo, pero también puedes escribir clases. Entonces, por ejemplo, se puede decir que el contenedor tendrá anchos. Por ejemplo, 1, 0, 0, 0, 0, 0, 0 a 100 pixel. Y así podemos darle un relleno, como por ejemplo, 15 pixel. Entonces de arriba y abajo. Por lo que tendrá algún ancho específico y algún relleno. Entonces si vamos aquí, veremos que el contenido se mueve un
poco en base a la configuración que dimos. Entonces como ven aquí que el contenedor div tiene este ancho y además, tiene algo de relleno. Pongámoslo en el medio. Por lo que podemos decir que este contenedor tendrá margen 0 fuera todo. Entonces de esta manera, podemos poner el contenido en el medio, como ven aquí. Por supuesto, depende del ancho que obtuvieras del diseñador. Puedes preguntarle audio puede abrir el archivo XD y comprobar el ancho que ahí se proporciona. El archivo XD para el diseño se adjunta con esta conferencia para que puedas usarlo también. Y como recuerdan en el diseño, como ven aquí, que tenemos un fondo gris, ese fondo gris del contenido. Podemos volver a usar el mismo fondo gris. Por lo que podemos usar uno de esos colores, que son proporcionados por prime NG porque ya lo hemos importado. Entonces podemos tener uno de esos grises, por ejemplo, vamos a recoger este gris. Entonces voy a decir que me den aquí también. Será valioso un color de fondo y esta variable será la superficie 100. Entonces pondré eso y conseguiría este fondo gris. Pero como ven aquí que no tenemos el, por ejemplo, el DV no se está pegando exactamente en el navegador de página porque no lo hemos normalizado. Si recuerdas, en la aplicación admin, hemos utilizado una biblioteca que se llama normalizar. Entonces, usémoslo también aquí. Por lo que podemos ponerlo en la parte superior de nuestra aplicación. Y entonces podemos tener como un gran dimensionamiento
del contenedor e inicializados paddings para la configuración de la aplicación. Si recuerdas, tenemos archivo de configuración. Hemos especificado la fuente y el tamaño de la fuente y también algunos inicializando en esos enlaces. Prefiero poner esto también bajo la
importación de las bibliotecas porque prime N G está anulando a algún personal, está anulando la fuente. Está anulando alguna configuración que hemos hecho. Por lo que podemos empezar aquí claro. Después de importar todo, entonces podemos inicializar nuestra aplicación con fuente específica, y luego podemos inicializar o empezar a peinar en base a esas configuraciones aquí. Entonces guardamos eso. Y veremos que ahora tenemos mejores fuentes. Tenemos el tamaño de fuente predeterminado será 14. Y en base a eso, vamos a construir nuestra aplicación. Entonces vamos a limpiar un poco. Entonces tenemos aquí cabecera y tenemos aquí el contenido. Por lo que también podemos aunque aquí. Y tenemos el router en las páginas, tenemos el componente homepage. Entonces en el componente de la página principal, ya no
necesitamos eso, por lo que podemos simplemente quitarlo y guardarlo. Por lo que en la próxima conferencia, vamos a empezar a darle estilo al encabezado. Entonces como ven aquí, tenemos el encabezado y vamos a darle estilo exactamente como lo tenemos en su diseño.
139. Styling el encabezado de cabeza: De acuerdo, en esta conferencia vamos a darle estilo al encabezado, al encabezado que contendrá logo, cert, y algunos enlaces. Entonces, antes que nada, hagamos algo de limpieza. No estamos usando la dieta de componentes porque
tenemos el archivo que estamos ubicando en los estilos públicos. Entonces tenemos aquí en la tienda algo llamado cabecera. Entonces vamos a usar ese hasta el momento que necesitamos borrar el que creamos previamente. Por lo que ahora podemos empezar con el encabezado. Entonces si volvemos al diseño, como ven aquí, que podemos tener el logo aquí y la búsqueda aquí, y también la navegación y algunos iconos para autos y la cuenta de usuario. Pero cómo se localizó esto, cómo podemos localizar esas cosas. Si recuerdas que estábamos usando una cuadrícula en prime end. Y puedes estar de acuerdo con un diseñador para proporcionarte un diseño guiado por cuadrícula. Entonces, ¿cómo podemos hacer eso? Si lo deseas, solo puedes ir a View y luego puedes decir seguramente fuera grilla en XD o Adobe XD. Y luego verás esos grilla. Tendremos un 12 columnas y todas esas columnas se
usarán exactamente como las tenemos en prime end. Entonces si mantienes más ojos, puedes ver que la búsqueda está usando cuatro columnas. Y también hay aquí espacio una columna, y luego la navegación tiene tres columnas, y ésta sólo tiene una columna. El banner está usando todo el espacio. Por ejemplo, categorías. Cada elemento está usando dos columnas. Y aquí también, lo
mismo para su artículo de producto. Veremos que tenemos tres columnas por cada ítem. Entonces de esa manera, puedes tener un buen diseñador y el diseñador te dará el diseño del sistema de cuadrícula, lo que te hará fácil el dimensionamiento. Entonces supongo que necesitamos una línea de cuadrícula que tendrá tres columnas y cuatro columnas, y una columna de espacio que tendrá desplazamiento de ésta. Por lo que tendremos tres columnas con offset 11 columna al final para esos iconos. Entonces hagamos exactamente lo mismo. Iré aquí primero y abriré una etiqueta. Normalmente el encabezado viene con una etiqueta llamada cabecera, que es etiqueta HTML. Y entonces tendré un div y le daré una grilla de clase P. Y este grado B tendrá múltiples columnas, como hablamos anteriormente. Entonces, en primer lugar, tendremos un div con un tres columnas, así p llamado tres. Y veremos cómo hablaremos de la capacidad de respuesta al final de este curso. Entonces éste tendrá, por ejemplo, col md como tamaños medianos para tres, pero usaremos ahora la general, que será sólo de tres columnas. Y además, necesitamos otro div, que tendrá para la barra de búsqueda, que tendrá llamada P, y cuatro columnas, y otras tres con offset uno para empujarlo. Por lo que para el menú, tendremos div P call tres. Y entonces tendremos también una clase que es offset uno. Por lo que diremos p offset y especificamos cuánto. Por lo que podemos compensar sólo una. Por lo que podemos tener offset y luego uno. Entonces en ese caso tendremos una línea empujada. Entonces pongamos como algunas palabras aquí. Por ejemplo, aquí pongo logo, y aquí voy a poner, por ejemplo, buscar. Y aquí voy a poner, por ejemplo, el menú. Y al final tenemos una columna para los iconos, que tendrá llamada P y una. Y aquí vamos a poner iconos. Guardemos eso y verifiquemos nuestra aplicación. Nuevamente veremos que no podemos resolver el componente de cabecera SCSS, sí, porque lo eliminamos. Vamos al archivo ts del componente y eliminamos esta línea porque ya no la estamos usando. Por lo que volvemos de nuevo a nuestra aplicación. Veremos que tenemos logo, búsqueda, menú, e iconos. Entonces exactamente cómo especificamos esos espacios. Ahora, llenemos esos espacios. En primer lugar, voy a llenar el logotipo. Entonces el logo, ya lo he usado en la aplicación admin. Entonces si recuerdas que cada aplicación tiene sus propios activos. Por lo que necesitamos utilizar también el logotipo, que se encuentra en la carpeta de activos y ponerlo en la aplicación de Andy shop. Entonces voy a ir aquí, copiar el archivo o la carpeta todo y decir tienda ND. Y luego iré a la carpeta Activos y luego pegaré las imágenes aquí. Por lo que tendré un logo y la foto de inicio de sesión que necesitamos también para la página de inicio de sesión. Entonces aquí tenemos el logo y lo voy a usar en el encabezado. Por lo que el logotipo simplemente podemos ponerlo dentro, por ejemplo, un div. Podemos darle una clase, podemos llamarlo logo. Y dentro del logo voy a colocar la imagen. Por lo que tendré aquí imagen y luego tendrá como alguna fuente, que será la carpeta Activos. Y luego imágenes, y luego logo. Y olvidé el nombre. Será logo dot. Pg. Por lo que tendremos aquí logo dot PNG y la alternancia será local. Y entonces podemos ahorrar eso. Y veremos que aquí tenemos el logo, pero debemos tener algunas tallas específicas. Entonces para darle estilo a eso, podemos ir a nuestro estilo de aplicación. Por ejemplo, puede brillar este y no necesitamos el componente. Podemos ir aquí y especificar que tenemos el encabezado. Y el encabezado contendrá qué logotipo. Por lo que podemos poner aquí logo y dentro del logo tendremos imagen. Y esta imagen tendrá como algún tamaño específico. Por lo que en base al diseño, podemos dar unas anchuras, por ejemplo, 160 pixel para el logotipo. Para que podamos ir aquí y comprobarlo. Veremos que tenemos el tamaño del logo así. Entonces de esa manera, hemos preparado nuestro logo y luego vamos a hacer esta barra de búsqueda. La barra de búsqueda se ubicará dentro de este artículo o de esta columna. Por lo que tendremos aquí un insumo. Y también puedes hacer un componente de TI separado para eso. Por ejemplo, puede llamarlo una búsqueda de productos. Pero lo voy a mantener así por ahora porque
vamos a reemplazarlo por un componente como veremos más adelante. Por lo que ahora podemos mantenerlo así. Entonces vamos a hacer el menú. También podemos el menú, no localizar todos los elementos del menú aquí para no tener cabecera grande. Pero también podemos crear un componente. Podemos llamarlo EV. El nombre puede ser N, G agudo, NADPH. Y este NG tienda nav será un componente donde sostenga mis artículos de navegación. Entonces vamos a crear este componente. Para crear el componente podemos utilizar también la consola NX. Por lo que iré aquí a generar un nuevo componente, y buscaré componente. Y este componente tendrá un nombre nav. Y los proyectos serán terminar tu tienda. Y el estilo. De acuerdo, ignoro el estilo y también, necesitamos un estilo de vida. Y así, el selector será N G sharp nav. Y tenemos que saltarnos las pruebas. Y donde se ubicaría. No se ubicará en la raíz de la aplicación, pero lo será,
se ubicará en un compartido y luego nav cerca del encabezado y el pie de página. Por lo que podemos guardar eso y comprobar nuestra aplicación. Veremos que aquí hemos creado el componente nav, y se importa automáticamente en el módulo de la app. Por lo que ahora podemos usar este componente. Entonces vamos a guardar y comprobar si el componente realmente está balanceando bien,
vale, tiene Navisworks para que podamos crear o plantilla la navegación ahora, que son normalmente su navegación viene en lista sin clasificar. Y esta lista sin clasificar, podemos darle una clase que se llama nav. Y luego podemos tener LI y necesitaremos tres artículos de lista. Y dentro del ítem de lista tendremos un enlace. Por lo que cuando hagas clic en Tab, lo tendrás así. Por lo que primero tendremos H ref. No los necesitamos porque los vamos a reemplazar con el enlace del router, como vimos en la aplicación admin. Y aquí podemos tener, por ejemplo, casa y tendremos aquí productos, y tendremos contacto. Entonces también, vamos a crear un estilo. Aquí también puedes usar el encabezado, o puedes crear un archivo separado para el estilo. Entonces de esa manera, voy a crear otro archivo el cual se llama nav ul dot SCSS. Y este nav CSS se importará en mi aplicación. Por lo que iré aquí a tienda MD. Y luego después del encabezado y el pie de página, voy a llamar al archivo NAV. Entonces después de eso ahorramos y vamos a la lucha suficiente para darle estilo a nuestra navegación. Por lo que tendré aquí nav. Y como recuerdan, dentro del amor, tendremos LI. El estilo de lista de ese LI será ninguno para no tener estos puntos cerca de cada elemento de la lista y la pantalla será inline-block, por lo que pueden estar cerca uno del otro, no debajo del otro como una lista. Y entonces voy a dar margen escribir alrededor de 15 pixel para alejar los elementos el uno del otro. Entonces vamos a guardar y revisar nuestra aplicación. Veremos que tendremos todos esos elementos de navegación. Por lo que ahora podemos darle estilo a los enlaces para que un enlace
tenga color y el color sea como un gris oscuro. Entonces voy a usar una variable que se llama superficie. 500. Y luego sobre quien sea, voy a usar diferentes colores. Entonces cuando ponga el ratón en el enlace, voy a usar un color diferente. Entonces por ejemplo, podemos tener aquí sobre la a, y la a tendrá un color, que será el color primario. Si recuerdas, hemos definido un color primario en la configuración y este color lo podemos usar aquí. Por lo que el color primario lo vamos a utilizar siempre en nuestra aplicación cuando se quiera cambiar la temación o la coloración o el color base de la aplicación. Por lo que el color se encuentra aquí. Entonces si ahorro, vamos aquí, vamos a ver eso, vale, tenemos la navegación así. Todavía tenemos un problema que necesitamos. igual que de alguna manera cuando ponemos el ratón, no
parece que tenga un texto. De lo que queremos tenerlo como enlace. Por lo que puedes cambiar el comportamiento del ratón aquí. Se puede decir que más grueso será un puntero, por lo que se puede hacer así. Y entonces el ratón sería como un puntero. Y para los enlaces del router, necesitamos agregarlos para que podamos ir de nuevo a la navegación aquí. Y luego podemos decir sobre esto, vamos al enlace del router, que será la página de inicio. Entonces no será nada. Y para los productos vamos a utilizar el enlace del router, que se llama productos. Y para el contacto vamos a utilizar el enlace del router, que se llama contacto. lo guardamos. Y entonces no podemos comprobar que tenemos la lista de productos y la página de inicio. Por último, como vimos en el diseño, tenemos dos iconos aquí aunque. Vamos a reemplazarlos por los iconos de la navegación. Entonces aquí podemos tener el encabezado y dentro tenemos los iconos. Voy a utilizar una primera ONG iconos. Tengo dos iconos. Uno es usuario, uno es un carrito de compras. Pero también, esos componentes o esos iconos serán reemplazados por los componentes. Por ejemplo, el carrito de compras. Quiero mostrar cuántos artículos hay en el carrito de compras. Por lo que necesitamos reemplazarlo de alguna manera por su componente, como veremos más adelante cuando vamos a trabajar con su carrito. Pero por ahora, vamos a darle un estilo así. Entonces también, necesitamos tener los estilings o todos ellos deben ser como una línea de alguna manera, porque se ve aquí no están alineados juntos. Por lo que podemos dar una clase por cada artículo. Entonces por ejemplo, tenemos aquí nuestro logo, y aquí podemos dar un vaso llamado oleada. Y aquí podemos dar una clase como por ejemplo, navegación. Y aquí podemos dar un vaso, podemos llamarlo Herramientas o acciones. Para que lo podamos dar como herramientas. Y luego podemos poner como algún margen top, algunos remantes de margen. Entonces para alinearlos todos juntos, para mí, la navegación está bien así si la reviso. Entonces bien, está bien para mí así. Por lo que podemos simplemente mover esas herramientas como dar editado con alguna parte superior de relleno para que podamos tenerlo alineado con el artículo. Por lo que podemos decir que este div tendrá relleno, relleno superior, podemos decir que sería de 15 pixel o más hasta que estén alineados juntos. Por lo que podemos tener esto como 22 pixel. Por lo que íbamos al estilo de cabecera. Entonces vamos a nuestro encabezado SCSS, y luego podemos ir aquí y abrir una nueva etiqueta. Podemos llamarlo herramientas. Y estas herramientas tendrán, la parte superior de bandas será de 22 pixel. Y como ven aquí, está alineado. Alejemos un poco de espacio el uno del otro de esos iconos. Entonces como ven aquí que hemos creado los iconos cerca uno del otro. Por lo que puedo acceder a esta clase Desde las herramientas. Entonces, todo lo que BI Insight Tools le da margen, ¿verdad? Al igual que por ejemplo, cinco píxeles o 10 píxeles. Entonces podemos decir aquí punto py y luego margen, ¿verdad? Por ejemplo, 10 pixel. Entonces podemos hacerlo así. Y veremos que ahora están lejos el uno del otro. Eso es muy grandioso. Por lo que ahora el encabezado para nosotros está listo excepto la búsqueda. Vamos a crear un componente, especialmente para el oleaje, y lo vamos a utilizar y ponerlo en la biblioteca de productos. Por lo que desde la biblioteca de productos, vamos a utilizar el componente set para buscar en sus productos.
140. Componente de búsqueda de productos: De acuerdo, vamos en esta conferencia a hacer la entrada de búsqueda. Por lo que la persona que puede buscar un producto cuando puso algún texto dentro de esta entrada. Pero una cosa diferente aquí que lo vamos a poner dentro del encabezado, pero vamos a proporcionar este componente en su biblioteca de productos. Por supuesto, puedes mantenerlo también en el componente de cabecera y puedes usarlo con normalidad. Pero lo voy a hacer aquí como un componente separado el cual puede ser localizado y reutilizable en otro lugar. Entonces, en primer lugar, vamos a nuestro código. En primer lugar, vamos a reemplazar esto por algo así como un componente que se ubicará en su biblioteca de productos. Algo así como tenemos cualquier afilado pero cualquier tienda nav se encuentra dentro de la propia aplicación, cerca del encabezado y el pie de página. Pero este componente se ubicará en la biblioteca de productos. Entonces, ¿cómo podemos hacer eso? En primer lugar, vamos a crear el componente. Entonces primero voy a la generación NX, y luego usaré ese generador, busco componente. Y luego voy a crear en la carpeta de componentes y un componente que se llama Búsqueda de productos. Y este proyecto serán productos. Y luego vamos a saltarnos el estilo y saltarnos las pruebas. Todo como somos nosotros como lo estamos haciendo siempre con cada componente y podemos dar su selector como productos. Buscar. Esa es también una opción que se llama Exportar. No voy a ponerlo ahora, pero voy a mostrarles la diferencia mínimamente. Entonces vamos a crear este componente y luego ejecutar esta aplicación o esta línea común. Y este comando se ejecutará en su biblioteca de productos. Como ven aquí que hemos creado carpeta de componentes. Y dentro de esta carpeta de componentes, hay un componente llamado búsqueda o búsqueda de productos. Simplemente, voy a decir a mi aplicación que usan este componente de alguna manera. Y voy a ir aquí al encabezado, y luego voy a sustituir esto por el componente que he creado. Entonces estamos llamando al componente de esa manera. Pero como ven aquí, que aún está indefinido porque dice que el producto cert es elemento desconocido. ¿ De acuerdo? Para eso, vamos a utilizar el módulo de producto o la biblioteca de productos. Entonces aquí la biblioteca de productos tiene un módulo y está sosteniendo componentes. Para que el encabezado o la aplicación vea esos componentes, necesitamos importar el módulo de productos. De acuerdo, Vamos aquí y luego a nuestra aplicación, como ven aquí, tenemos en módulo en el nivel de aplicación y tenemos aquí importando los módulos. Pero el problema aquí que tenemos el módulo de producto es importado e incluso que no somos capaces de ver el componente de búsqueda de producto. Esto se debe a que no revisamos el algo que se llama exportación. Por lo que es necesario exportar el componente en módulo de ONG. Entonces, ¿cómo hacemos eso? Volvemos a ir a nuestro módulo de productos. Por lo que buscaré módulo de productos, que se encuentra en la biblioteca de productos. Y luego como ven aquí, tenemos una declaración. Y dentro de la declaración estamos colocando el componente. Pero además, tenemos que decir que este componente es exportable, por lo que se puede utilizar en otros componentes fuera de este módulo. Entonces cuando guardemos todo y volvamos a nuestro encabezado, veremos que, genial, se define
la búsqueda de productos. Entonces cuando vamos al navegador y comprobamos que vemos trabajo de búsqueda de productos. Así que recuerda, siempre cuando estás creando un componente de arma fuera de la aplicación, como por ejemplo, en la biblioteca de productos, necesitas exportar este componente, no solo declararlo. Y para hacer eso cuando estás generando un componente, sólo tienes que revisar este en la consola NX. Por lo que sólo dirías exportar también en el módulo, este componente. De acuerdo, Así que vamos a darle estilo a este componente. Iré a su componente y colocaré aquí. En lugar de tener trabajo de búsqueda de productos, vamos a crear un div. Y este div tendrá una búsqueda de productos de clase. Y luego como diseño tenemos icono y cerca de él un cuadro de texto. Por lo que primero necesitamos tener definido el icono y el icono como vimos anteriormente, se definirá como PI. Y luego especifico el icono PI, que se buscará. De acuerdo, tenemos el ícono y ahora necesitamos tener entrada. Y entrada tendrá un tipo de texto, y luego con el nombre se puede buscar. Y el DNI también será búsqueda. Veremos cómo usaremos esta búsqueda más adelante. Un tenedor de lugar para eso podemos utilizar encontrar productos. Y podemos darle una clase que puede ser, por ejemplo, búsqueda de
productos, como la misma patente. Y entonces podemos decir insumo. Entonces de esa manera podemos acceder fácilmente a esa entrada en nuestros estilos. Entonces para eso, vamos a darle estilo a este componente. Llamemos a todo lo demás. Al igual que no los necesitamos todos. Simplemente necesitamos este componente y vamos a volver a ir a estilos públicos. Pero no estamos en la tienda, sino en sus labios porque hemos creado el componente en la biblioteca. Entonces como regla para mí mismo, voy a crear
los componentes de búsqueda de productos marcación estará dentro de la biblioteca de productos. Voy a crear un nuevo archivo y voy a decir búsqueda de producto dot SCSS. Y luego voy a colocar ese vaso aquí y ahorrar. Entonces vamos a nuestra aplicación para ver si todo está funcionando bien. Genial. Tenemos aquí el icono y la entrada de texto. Entonces en primer lugar, necesitamos poner la frontera, como vimos en el diseño previamente,
que tenemos aquí, como alguna zona gris y dentro de ella hay ícono y luego la entrada de texto. Por lo que el usuario pensará que todo esto es una entrada de texto. Entonces hacer eso es muy sencillo. Es sólo una jugada con el SES. Entonces, en primer lugar, me gusta usar siempre el flex. Por lo que display flex. Dejamos que los elementos como el icono y la entrada estén cerca uno del otro. Y voy a darle un color de fondo, que es de los objetos de valor de Prime NG. Y pronto será fase. Y por ejemplo, 200 más oscuros que el fondo del contenedor. Y tiene un radio de borde como unos 10 píxeles. Y podemos darle un ancho como inicialmente podemos decir 275 pixel como diseño y podemos darle una altura para decir, por ejemplo, 35 pixel. Puedes darle más. Ahorramos, revisamos de nuevo todo. Vemos que no estamos viendo los cambios. ¿ Por qué? Porque no usamos este archivo de estilo. Entonces, en primer lugar, necesitamos importar el archivo de estilo. Entonces tengo que decir Importar, y luego diré la búsqueda de productos. Por lo que en ese caso, los productos se importan en anti tienda como se ve aquí. Y entonces podré ver esta dieta como ven aquí, tenemos la caja gris. Por lo que ahora necesitamos tener un ícono naranja. Por lo que volveré a ir aquí a mi búsqueda de productos. Accederemos al ícono, como siempre lo hacemos con PI porque tiene una clase llamada PI. Y le daré un ancho que será de 25 pixel. Y por ejemplo, podemos, tamaño de la
fuente puede ser un icono más grande, un poco más grande. Por lo que podemos darle 1.3 AM. Y entonces podemos darle un color, que será nuestro color primario. Entonces ahorramos, comprobamos eso, vale, tenemos el ícono coloreado, pero necesitamos darle algún margen y relleno como estar más en el espacio. Entonces podemos dar por margen examinado, top 10 pixel, y margen derecha o izquierda, luego pixel. Y ahorramos. Volvemos a intentarlo. Está bien, Está ubicado en ese lugar. Por supuesto, siempre puedes usar las herramientas de desarrollo para administrar o medir cuánto tienes aquí. Espacios como por ejemplo, puedes usar con ok, lo que te guste. Puedes colocarlo a tu estilo. De acuerdo, ahora vamos a darle estilo a esta entrada. Por lo que esta entrada tiene como fondo y frontera. Vamos a quitarlos. Entonces lo diré aquí como lo llamé. Por lo que tengo aquí la Búsqueda de Productos menos entrada. Diré aquí menos entrada. Por lo que estoy dentro de la búsqueda de productos con SAS. Me da la habilidad con este ampersand, puedo dar entrada menos y luego le daré altura
será exactamente la misma altura que dimos para el contenedor. Y el color de fondo será transparente. Al igual que no tenemos un color de fondo y color del texto en sí. Será var, variable, que es de superficie y 600, como sería más oscuro un poco como color de fuente y borde, por ejemplo, podemos quitarlo totalmente. No necesitamos frontera, así que voy a dar frontera 0. Y luego ahorramos, probarlo. Y diríamos: Genial, tenemos aquí todo. Pero como ven aquí que cuando le pongo el ratón encima, veo algún borde. Quitemos también esta frontera. Cómo podemos hacer eso dentro de la entrada, puedo decir ampersand focus. Y también soy por ciento activo para eso. En ese caso o en esa situación cuando me estoy centrando en la entrada, se
puede poner el borde es ninguno o 0 y el contorno es ninguno. Entonces en ese caso, garantizamos que no tenemos nada cuando nos enfocamos, como ven aquí. Ahora lo tenemos estilo totalmente. Tenemos todo el componente se crea. Lo que vamos a hacer en el futuro que cuando ponga algo de texto aquí, voy a encontrar alguna lista de productos sugeridos donde se encontró en la base de datos. Pero ahora vamos a empujarlo un poco desde arriba. Entonces si recuerdas, tenemos en el encabezado, así que cuando voy al NG, aparezco al encabezado, hemos dado una clase que se llama búsqueda. Por lo que iré al archivo CSS y diré que este encabezado
tendrá en la parte superior recuerdas que tenemos herramientas y también tenemos búsqueda. Y tendrá parte superior acolchada. Podemos decir 25 pixel por ejemplo. Entonces en ese caso necesitamos alinear también todo. Por lo que podemos tener aquí también, esta navegación puede tener como más, más espacio en la parte superior. Por lo que podemos entonces la navegación darle la parte superior acolchada también. Y podemos medirlo como 25 píxel para que se pueda alinear. Y además, necesitamos darle más espacio a las herramientas en la parte superior, para que también podamos darle así. Entonces para la navegación necesitamos 23 pixel, alrededor de 23 pixel, y las herramientas que necesitamos alrededor de 38 pixel. Por lo que para las herramientas necesitamos 38 pixel. Y la parte superior de relleno de navegación será de 25 pixel. Entonces lo guardamos todo. Guardamos todo el estilo. Vemos que tenemos el encabezado está listo.
141. Componentes de banner: De acuerdo, entonces ahora hemos terminado el encabezado, el encabezado que contiene el logotipo y alguna barra de búsqueda. Y además, tenemos algunos iconos y el menú. Ahora nos estamos moviendo a la página principal. Volvamos a nuestro diseño. Como recuerdan, en nuestro diseño tenemos un banner y luego una lista de categorías, y luego tenemos lista de productos destacados. Entonces vamos a crear componente por componente. Por lo que en mi opinión, voy a hacer un componente para la página de inicio. Por lo que en nuestro código, hemos creado previamente una página de inicio en la aplicación y usted compra. Nos mudamos aquí y dijimos homepage. Y dijimos entonces componente de la página de inicio contendrá algo a y B. Esto cuando te estaba enseñando sobre la grilla. Entonces para mí, me imaginaré que la página de inicio contendrá lo siguiente. En primer lugar, algo así como se llama banner de UI. Y esto será un componente. Y entonces tal vez tendré lista de categorías o categorías Banner también. Podemos llamarlo categorías Banner, no hay problema. Y así hemos destacado producto. Entonces de esta manera, tendremos tres componentes uno debajo del otro y ellos aparecerán en mi página de inicio. Pero, ¿dónde está la ubicación de esos componentes? Entonces, en primer lugar, banner de la interfaz de usuario, supongo que puede ser en la biblioteca de la interfaz de usuario, que creamos previamente en los labios. Y tenemos pedidos,
productos, UI y usuarios. Tenemos la UI. Entonces supongo que aquí vamos a crear el componente del banner de la interfaz de usuario. Para ello, quiero mostrarles primero cómo eliminar una biblioteca. Por ejemplo, si quiero eliminar esta biblioteca porque se generó de alguna manera mal con nosotros. Cometí este error a propósito cuando estamos creando esta biblioteca en la línea de comandos, si te acuerdas. Por lo que quiero eliminar ahora esta biblioteca. Cómo podemos eliminar una biblioteca. En primer lugar, sólo tienes que ir aquí y decir que quiero eliminar totalmente esta carpeta. Pero eso no es suficiente. También desea eliminarlo del index.js JSON, que se encuentra en la raíz del proyecto. Por lo que también necesitas quitar la interfaz de usuario aquí también. Necesitas eliminarlo de ts config base, si recuerdas, estábamos definiendo la ruta está aquí, por lo que necesitas eliminar eso también. No olvides quitar la biblioteca también de la JSON Angular porque en Angular Jason, estoy definiendo mis proyectos. Si recuerdas, hemos definido la interfaz de usuario, se jugará como se genera aquí automáticamente. Por lo que necesitamos quitar esta parte también. Por lo que desde cuatro lugares. Primero la config NX y luego angular JSON, y luego la carpeta que está conteniendo la biblioteca. Y luego puedes generar una nueva biblioteca fácilmente usando una consola ECS. Entonces vamos a guardar todo ahora. A ver si nuestro proyecto sigue funcionando bien. De acuerdo, tenemos el proyecto todavía funcionando bien. Aquí no tenemos ningún tema. Y ahora vamos a crear una nueva biblioteca. Así que vamos a cerrar todas estas pestañas. Ya no los necesitamos. Tan solo necesitamos crear un generar. Y entonces podemos decir biblioteca, que está aquí. Y luego podemos definir el nombre de la biblioteca. Diré UI, la biblioteca llamada UI. Voy a localizar mis componentes de UI como una galería, banners, etcétera. Y luego solo presionas en la carrera esas opciones. Podrás echarles un vistazo. Hablamos mayormente de ellos en las primeras conferencias cuando estábamos creando la biblioteca. Por lo que primero hacemos click en correr. Y luego veremos que la biblioteca se generó de nuevo. Vayamos aquí a los labios. Y luego veremos, bien, genial, tenemos la biblioteca otra vez aquí definida y todo está bien. Ahora generemos un componente que será el componente de interfaz de usuario, el banner de interfaz de usuario. Si recuerdas, dije que lo voy a poner en la biblioteca de UI. Por lo que abrimos de nuevo el mismo tipo de generar. Por lo que necesitamos cerrar esto porque estábamos generando una biblioteca. Tenemos que generar algo nuevo que se llama componente. Entonces, así voy a ir aquí, click en Generar componente, y este componente tendrá un nombre. En primer lugar, lo pondremos dentro de carpeta para estar más organizados dentro de la biblioteca. Por lo que recuerdo esta carpeta componentes como siempre. Y entonces le daré el nombre, que es estandarte. Y entonces el proyecto aparecerá con es UI. Y luego haremos el resto de las cosas que hemos hecho anteriormente. Por lo que lo más importante es la exportación. Recuerda, hablamos de eso previamente, por lo que podemos usarlo en otros lugares. Y entonces no tenemos nada más en un estilo de vida. Un lector que es muy importante, tenemos que llamarlo banner de UI. Y entonces tenemos que decir salta eso si no te interesa crear pruebas unitarias ahora. Entonces vamos a dar click en Ejecutar y luego llamar a nuestros archivos y comprobar si el componente se ha generado. Vamos a revisar. De acuerdo, vamos a CUI fuente labios componentes y tenemos el componente banner y tiene su archivo ts con el elector correcto. Y además, ya se ha importado en el módulo y además se ha exportado. Entonces solo necesito hacer una cosa, al menos. Entonces aquí en módulo, necesito usar ese componente. Entonces en su, en su página de inicio, como ves, todavía me
está dando error que tú, yo banner no es elemento o elemento conocido. Entonces lo que tenemos que hacer es simplemente volver al módulo de la aplicación, y luego importaremos el módulo de la interfaz de usuario. Por lo que voy a ir a la importación y decir módulo UI. Entonces si a veces, no sabe que se ha creado, sobre todo cuando se crea esta biblioteca recientemente. Entonces hay que decir que el módulo de UI lo escriba así. Y luego haces clic en Control Space o punto de control en Mac para solo ver si sus autos completan eso o no. Entonces vemos que no es auto completando. Vamos y lo importamos manualmente. Por lo que voy a ir aquí y decir Importar. Y luego tú módulo TIC de, y luego diré que agregaré bits azules,
UI, el nombre de la organización, y luego la UI. Porque si recuerdas, el ts config ya definió para mí un baño, que se refiere a la biblioteca de UI. Entonces y luego guardamos, y vemos que el banner de la interfaz de usuario ya no tiene el error. Vamos a comentar esas. Entonces comentamos esta parte y guardamos, y luego vamos a la aplicación. Veremos muy bien que funcione la pancarta. Entonces ahora vamos a darle estilo. Está bien para darle estilo a la manera, me gustaría echar un vistazo al diseño. Entonces, en primer lugar, vamos al diseño. Veremos que hemos dividido, por ejemplo, ese banner a dos columnas como puedo imaginar. Entonces si continuas, también
puedes habilitar la cuadrícula de diseño para que puedas ver cómo está pasando el diseño aquí. Entonces, en primer lugar, me gustaría tener, por ejemplo, cinco columnas aquí y luego Offset una columna. Por lo que tengo un 1, 2, 3, 4, 5 para este título y el botón, y otra columna para la imagen, que serán seis columnas. Entonces, en primer lugar, necesitamos crear un div que
contendrá el banner y le damos este color del fondo. Y además, haremos una rejilla que está dentro de ella, estas dos columnas. Entonces iré aquí y daré div, y llamaré a este banner div en general. Y entonces crearé un div y le daré como grilla de pico. Y luego dentro de este pico leer, tendré dos columnas. Primero uno será P call, y luego cinco, como vimos en el diseño. Y el segundo tendrá sólo seis. Aquí tendremos seis, pero éste tendrá b offset y luego uno. Entonces podemos empujar ese contenido una columna a la derecha. Entonces como vemos dentro del diseño que tenemos dos partes, como dos textos, los mejores productos de cada categoría. Por lo que necesitamos tener dos textos. Entonces pondría, por ejemplo, los primeros textos en H1, y diré los mejores productos. Y además otro filo, por ejemplo, será H2 y estaría en cada categoría. Entonces aquí tenemos dos textos y luego tendremos un botón. Entonces el botón, podemos agarrarlo de la energía Prime. Como saben que tenemos una biblioteca de botones, pero cómo podemos usar este botón. Entonces vayamos aquí y vayamos a su biblioteca principal de NG. No podemos comprobarlo. Entonces podemos tener aquí, tenemos los iconos. Vayamos a los botones. Entonces aquí tenemos los botones. Quiero un botón que contendrá texto y luego icono. Por lo que necesitamos usar el que está en las fuentes. Creo que necesitamos usar este porque tiene composición de ojos está a la derecha. Podemos copiar esta parte. Y luego vamos a nuestro código y colocamos este botón aquí. Pero como ves, tenemos un problema de que el botón no está definido porque necesitamos importar el módulo de botones, pero hacer cada módulo tenemos que importarlo a ti o al nivel de aplicación, diría a la UI porque en la UI tiene estos componentes. Y esos componentes no ve ningún otro componente que esté fuera de este módulo o fuera de esta biblioteca. Por lo que necesitamos volver a importar el módulo de botones aquí. Por lo que voy a ir aquí y decir Importar. Botón, módulo de y luego voy a decir prime end g slash button. Entonces como ves, ya está definido aquí. Y luego lo ponemos en la importación
del módulo y veremos que nuestro botón ha sido definido. Por lo que la etiqueta de este botón será ver más. Y el ícono será, como vimos, tenemos ter, hijos, ¿verdad? Y luego ahorramos. Verificamos si tenemos todo está funcionando bien, tenemos todo funcionando bien, pero el botón no se muestra porque el módulo no se guarda. Volvemos a ir a nuestra aplicación. Otra vez no apareciendo. Puedes volver a guardar su componente. Está bien, se está mostrando. Por lo que a veces necesitas ahorrar varias veces para que las cosas funcionen o aparezcan en su front-end. Entonces ahora necesitamos darle estilo a eso. En primer lugar, necesitamos crear un archivo de estilo para el banner. Entonces si recuerdas, tenemos estilos públicos y creamos saltos. Y dentro de estos bucles tenemos carpeta para cada biblioteca. Entonces voy a crear una biblioteca de UI o lo hago yo carpeta. Y dentro de esta carpeta de UI, tendremos ese banner dot SCSS. Y entonces vamos a darle estilo aquí. Por lo que antes que nada, iré rápido a peinarlo. Por lo que tenemos escondite será como un diseño a un 180 pixel. Y así tenemos un ancho, será del 100%. Y un color de fondo, que será así, como un color ligeramente azul. Entonces como vemos aquí en el diseño, tenemos una diapositiva, un color azul. Entonces si voy aquí y entonces podemos ocultar el diseño, veremos este azul claro. Se puede copiar el color que es el mismo que aquí. Puedes copiarlo, o puedes usar algo de la superficie. El orden definido, los colores definidos que están en primer motor, pero seguiría exactamente al diseñador. Por lo que aquí voy a tener como este color de fondo banner. Y luego necesitamos un radio de frontera porque tiene algunos bordes con curvas. Por lo que necesitamos tener radio de frontera y sería de 15 pixel. Vamos a comprobar si estamos en el camino correcto. Ahora no vemos nada del estilo porque
no estamos importando banner SCSS a nuestra aplicación. Por lo que necesitamos importar Banner CSS a nuestra aplicación. Pero como lo hacemos siempre, ponemos un archivo que está importando todo, todos los componentes, y luego importamos este archivo en nuestra aplicación. Entonces en este caso, ahorraremos menos líneas. Entonces voy aquí a crear otro archivo. Yo lo llamaré BWI dot SCSS. Y dentro de esta UI SCSS, tendré importación para ser así. Y entonces esta importación importará para mí ese banner o CSS. Y en mi tienda voy aquí y voy a decir importar para mí toda Biblioteca, que está conteniendo como este salto. Y luego tenemos la UI y luego su banner o lo siento, la UI scss. Entonces en este caso, TE importé ES CSS el cual contenía el banner. Entonces vamos a guardar todo. Acude de nuevo a nuestra aplicación. De acuerdo, tenemos ese color, tenemos todo bien. Entonces vamos a empujar un poco el estandarte desde arriba. Por lo que podemos hacer ya sea margen inferior del encabezado o margen superior del banner, diría por ejemplo, margen superior del encabezado. También puedes poner margen superior o superior del banner. Entonces vamos aquí y ¿dónde están nuestros estilos de cabecera? Contamos con apps. Y luego agudo encabezado compartido. Voy a darle, por ejemplo, botón de
margen al encabezado, empujar todo debajo del encabezado, unos 25 pixel, digamos todo lo que puedas medirlo con un diseño. Entonces lo tenemos así ahora. Y ahora vamos a hacer un poco de estilo. En primer lugar, vamos a darle estilo a esos títulos. Vuelvo a pasar por su estandarte. Y entonces diré, Tal vez pueda dar una clase para todos estos grupos para poder darle como un texto. Cancelamos un banner textos. Entonces voy aquí y hago definido aquí algo así como banner. Y luego texto. Y todos estos textos pueden ser peinados. Por lo que en primer lugar, tendrá un color. Ya tengo ese color, que será variable, fase de traje. Y luego 700. Y luego margen superior. Podemos darle como para empujar el texto desde la parte superior alrededor de 50 pixel. Y luego empezamos a darle estilo a los títulos para que título primero uno, H1, tenga como por ejemplo, margen top 0 o margen en general 0 para no tener estos espacios alrededor, podemos inicializarlo. Y entonces el tamaño formado serán tres AM y un font-weight. Podemos darle como algo de peso pesado, algo así como 400. Y así H2. Y entonces también podemos darle un margen 0. Y entonces también podemos dar un tamaño de fuente y un peso de fuente. Por lo que podemos decir aquí el tamaño de fuente será de 20 AM y el font-weight 300. Soy rápido en el estilo porque nuestro curso no se trata de estilo, se trata de mostrar la estructura angular y cómo vamos a estructurar nuestra aplicación. Entonces por eso soy tan rápido en explicar el CSS. Entonces vamos a guardar cheque. De acuerdo, estamos muy cerca de nuestro diseño. Ahora tenemos el botón aquí. Tenemos que apretar su código o presionar un poco el botón. Eso se puede hacer a través del estilo. Si recuerdas, damos estilo, no clase directamente, sino clase de estilo. Y luego se pueden utilizar los márgenes y paddings predefinidos, que están en el NG primo. Entonces diría margen top, y luego le daré, por ejemplo, tres o cuatro. Entonces podemos poner eso y veremos que se empuja automáticamente. Está bien, bien. Necesitamos también ahora un lugar para nuestra imagen. Tengo, por ejemplo, la imagen ya definida. Ya lo tengo en mi carpeta de activos. Se llama imagen de banner. Entonces es SVG. Puedes recolectar cualquier imagen que quieras y la
colocas en la carpeta de activos del nivel de aplicación. Entonces tenemos aquí los activos de la app, y luego ponemos imágenes como vimos previamente con el logo. Y luego dentro de esta columna, diré imagen. Y la fuente de imagen será carpeta Activos y después de activos, imágenes. Y después de imágenes, banner, imagen, punto SVG. Entonces también podemos importar SVG, vale, tenemos nuestra imagen aquí. Tenemos que empujarlo un poco hacia la izquierda o hacia la derecha. Pero quiero mostrarles algo que es animación. Estoy usando alguna biblioteca que se llama Cualquier hecho SCSS animate o CSS animate. Te mostraré cómo podemos, por ejemplo, cuando el usuario abra esta página o este sitio web, esto vendrá como de izquierda a derecha a como deslizamiento. Este carrito se desliza de izquierda a derecha. Te lo mostraré en la próxima conferencia.
142. Animar el Banner: De acuerdo, Antes de empezar con la conferencia sobre animar la manera que quiero mencionar sobre el tema de la fuente. Por lo que previamente hemos platicado al inicio del curso sobre las fuentes, las fuentes que hemos instalado previamente, pero no surten efecto sólo cuando se configura algo en clase NG cebado, que se llama pico componente. Así que solo asegúrate de que has configurado esto y
asegúrate de que en tu llamada de tus bibliotecas y otros componentes, que pongas la configuración después de las llamadas Prime NG. Entonces después de eso, tenemos ese archivo de configuración. El archivo de configuración se llama aquí y tiene un componente pico para la fuente. Ahora vamos a ver cómo podemos animar la pancarta. El estandarte. Creo que el mejor caso aquí que podemos deslizar esta imagen de derecha o de izquierda a derecha. Para eso, estoy usando una biblioteca que se llama animate CSS. Si vas a su página web, que se llama Animate dot style, entonces encontrarás esta biblioteca. Esta biblioteca es muy grande para la animación. Tiene muchas animaciones como puedes usar para tus divs, para tus imágenes, por ejemplo, textos. Puedes hacer lo que quieras, css y muy ligero y muy ligero para el navegador sin usar JavaScript y estas cosas complicadas. Por lo que son animación CSS es muy ligera y también amigable con el navegador. Entonces lo que necesitamos realmente aquí que queremos deslizar la imagen de izquierda a derecha. Por lo que podemos usar esta animación. Pero primero veamos cómo podemos instalar esta biblioteca. En primer lugar, necesitamos ejecutar este comando npm instalar cualquier main.css menos menos guardar. Por lo que voy a abrir una nueva terminal y luego instalaré esta biblioteca. Por lo que la instalación de esta biblioteca puede llevar algún tiempo. Voy a saltarme. Entonces aquí tengo la biblioteca se instaló, agregó un paquete, como ven aquí. Ahora lo vamos a sumar a nuestro estilo. Entonces si recuerdas, estábamos usando aquí en tienda ND, SCSS, no en admin en ninguna tienda. Esto es especializado para su tienda que estamos agregando bibliotecas aquí. Por lo que queremos añadir aquí el CSS animado. Entonces, ¿cómo podemos hacer eso? En primer lugar, te dije con este signo, puedes llegar a todas las bibliotecas que están en módulo npm o en carpeta de módulos de nodo. Aquí tenemos la carpeta de módulos de nodo. Lo que queremos en realidad tenemos instalado ya es animate CSS. Por lo que NMAC como S se encuentra aquí y queremos incluir el archivo animate dot CSS. Entonces eso es todo. Entonces antes que nada, voy a hacer importación. Y entonces usaré este letrero. Y luego diría cualquier css de punto hecho y luego slash porque si ves que el nombre de la carpeta tiene CSS animado. Y luego entraremos el cristal o el archivo que se llama de nuevo animar el CSS. Entonces en este caso, hemos importado la biblioteca. Por lo que ahora es importante para nuestra aplicación. Vamos a usar una de esas animaciones, entonces cómo podemos usarla. Entonces, en primer lugar, hay que decir que estoy diciendo que este H1 o este div o esta imagen es animada. Cómo podemos hacer eso diciendo cualquier compañero animado. Por lo que podemos copiar esta clase. Y luego vamos a nuestra pancarta. Por lo que hemos creado el banner en la biblioteca, que se llama biblioteca UI, y luego tenemos el banner aquí. Entonces lo que quiero animar en realidad no es sólo la imagen, podemos animar todo el div. Por lo que puedo poner aquí en el contenedor div de la imagen. Para que ese contenedor de esta imagen aquí, lo
puedo poner dentro de un div y luego podemos animarlo. Por lo que tenemos Cualquier hecho animado. Entonces ahora es, estamos diciendo que esta cosa es animada, pero ¿cuál es la animación? Por lo que la animación será deslizada a la izquierda. Por lo que aquí podemos copiarlo. Tienes botón aquí para copiarlo. Y luego vamos aquí otra vez a nuestra clase y ponemos espacio que tenemos otra clase, que se llama limo en izquierda. Por lo que ahorramos, vamos a nuestra aplicación y nos refrescamos. Y veremos ese deslizamiento de esa manera. Es muy buena manera de hacer eso. Entonces lo que voy a hacer ahora sólo para poner esta imagen al final aquí, como algo así como el diseño, porque el diseño está mostrando que esto mayormente va a la derecha. Entonces hagámoslo. Entonces primero podemos dar el contenedor div de la imagen, algo así como imagen de banner. Por lo que tenemos aquí esa imagen de banner. Entonces después de eso tenemos texto de banner y ahora imagen de banner. Entonces vamos al estilo de la pancarta. Entonces lo tenemos ya en los estilos, labios de estilo público. Y luego voy aquí a la pancarta, y luego elegiré aquí, no texto, pero abriré una nueva etiqueta, que será imagen. Por lo que aquí será imagen. Y esta imagen la podemos dar, por ejemplo, texto alinear centro, como las cosas dentro de esta imagen se centrarán. Volvamos al navegador. Veremos que sigue ahí porque no guardé esta parte aquí. Entonces si volvemos de nuevo veremos que está más a la derecha, por lo que está centrado. Pero cuando pones, por ejemplo, la imagen misma, texto se alinea más a la derecha, entonces será empujado totalmente a la derecha como ves aquí. Pero necesitamos aquí otra vez algo de relleno para que podamos darle a esta imagen como tenemos que empujarla un poco desde arriba y desde la derecha. Por lo que podemos darle al propio contenedor algún relleno. Por lo que no podemos decir que el relleno será de ese top alrededor de 15 pixel. Y luego de derecha será como de nuevo 15 pixel. Y de abajo será 0, y de izquierda será 0. Entonces después de eso, veremos que conseguimos exactamente lo que queremos. Entonces tenemos aquí la animación, y eso comprobamos en la consola. Entonces tal vez necesitamos más remates como de la izquierda para que podamos darle como más empujando hacia la izquierda, algo así como 50 pixel. Creo que no fui suficiente con eso. Entonces tengo que poner aquí 50 pixel. Por lo que ahorramos. Vamos otra vez. Vemos que la animación va muy bien. Por supuesto, si no usas embolsado, solo
puedes decir acolchado top. Y luego puedes, por ejemplo, poner todos estos valores a 0. Y entonces solo puedes decir texto alinear centro. Por lo que será en el centro del div, que hemos precisado año. Prefiero siempre centro. Entonces así es como estamos animando las cosas con CSS. Usando esta gran biblioteca que se llama animate CSS. Por supuesto se puede utilizar también la animación de CSS o angular animate. Pero prefiero usar siempre cosas simples que puedan afectar el rendimiento de mi aplicación. Por lo que estoy usando mayormente más CSS y HTML amigable sin usar algunas bibliotecas extra complicadas o bibliotecas JavaScript.
143. Estilo de botones PrimeNG: En esta conferencia, les voy a mostrar cómo anular el botón de Prime NG a un estilo específico que quieren. Si recuerdas, hemos importado el botón de Prime energy y vino como un estilo estándar, que es azul. Pero queríamos como en el diseño, cómo lo tenemos aquí. Por lo que podemos hacer eso fácilmente anulando el estilo del NG prime. Entonces hagámoslo ahora. Por lo que antes que nada, volveré a ir al componente banner que he creado previamente. Y luego en la clase de estilo, puedo agregar una nueva clase. Podemos darle botón o botón de banner. Y aquí el botón de banner tendrá un estilo en Banner, CSS. Entonces vayamos aquí y creemos otra etiqueta, que volverá a ser prefijada con banner y luego botón. Entonces si quieres anular este botón, hemos especificado clase para ello. Entonces vamos a darle, por ejemplo, algunas propiedades. Entonces lo que quiero primero es un fondo para ser blanco. Por lo que voy a poner color de fondo será var, y luego traje fase 0. Y entonces podemos tener un fondo blanco, y entonces ese color será un color primario, que he definido previamente para nuestra aplicación. Y ya hablamos de eso antes. Y así frontera o intentémoslo ahora sin peinar más para ver si vamos a progresar. Bueno, bien, Como ven aquí, tenemos ahora la frontera sigue siendo azul. Y en Hoover todavía lo tenemos de azul. Entonces vamos primero, quitemos la frontera. Voy a quitar la frontera como bordeado 0. En este momento ahorramos. De acuerdo, Quitemos ahora el hover. Entonces, ¿cómo podemos hacer eso? ¿En primer lugar? Si quieres pasar el mouse o quitar el hover, Es muy sencillo. Al igual que como ves aquí en CSS, el que se opone estará en su camino como yo estoy dentro de la clase de botón. Y entonces digo esto y otra vez. Por lo que ampersand hover. Por lo que significa como el botón. Y entonces tengo este atributo que se llama hover, y luego puedo quitar el fondo también. Por lo que también puedo hacer las mismas propiedades aquí. Por lo que podemos ahorrar y notaremos que no va a tener ningún efecto. Tan prime end, Es peinar algunos botones de manera diferente. Entonces si quieres anular algunos estilos de Prime NG, no solo botón, la única forma de hacerlo bien, es inspeccionar. Para que puedas abrir las herramientas de desarrollo. Puede hacer clic derecho en el botón y luego inspeccionar. Y luego verás el, por ejemplo, el estilo aquí. Entonces no quiero el estilo del lapso del texto dentro de él. Yo quiero el botón en sí. Y no sólo el botón, quiero el botón B, como este azulejo, cómo yo, donde aquí el estilo de botón banner. Entonces como ven aquí que tenemos toda la información viniendo aquí. Pero aún tenemos tema que no vemos nuestras clases las cuales hemos especificado. Están en el botón y aquí están nuestras propiedades. Como ves, ese botón de banner, la clase que definimos está aquí y también en el propio botón. Por lo que prime ND está haciendo todo por ti es a través de la clase de estilo. Entonces lo que voy a hacer ahora para comprobar toda la razón por la que no está funcionando. Por lo que para habilitar el estilo de desplazamiento, puedes hacer clic en esto sobre este toggle. Y luego puedes seleccionar qué actividad puede hacer como en lugar de ti, como si no tuvieras que hacer la actividad del ratón tú mismo. Se puede decir, yo quiero más. Entonces, vale, ahora está en el estado de Harvard el botón. Entonces como ves que no tenemos más directamente, se ha habilitado y luego se pasa el cursor. Entonces tenemos que hacer lo mismo porque mira, está anulando nuestros cambios porque esto viene más importante que nuestros cambios. Entonces en ese caso, debo hacerlo exactamente igual como lo estoy haciendo aquí. Por lo que podemos tomar este habilitar Hover y luego vamos de nuevo a nuestro código. Por lo que voy a ir aquí y decir, no sólo hover, sino habilitar también, habilitado. Y luego veremos que aquí tenemos los cambios yendo mayormente. Entonces intentemos o reiniciemos la página. Y nosotros vamos aquí. Y veremos que normalmente tiene el efecto hover. Entonces ya no tenemos ese tema. Entonces de esa manera, se
puede anular no sólo el botón, sino todo en NG prime. A veces se necesita eso. Necesitas anular algún estilo de componente como acordeón o algunos libros de texto o por ejemplo, algún botón de encendido. Por lo que necesitas hacer eso para cada parte de Prime NG basado en tu diseño. Por lo que es la forma más fácil de anular. Y este es el objetivo de tener los estilos públicos. Porque sin tener estilos públicos, no
verás los cambios en tu componente. Porque si tengo este dial en el componente, entonces el extremo primo donde renderizar también basado en componente. En ese caso, no podré acceder al estilo del, por ejemplo, este botón solo con algo llamado host y, o por ejemplo, host deep. Y esto se utiliza en Angular para acceder dentro de algunos componentes o componentes
hijo los cuales se definen dentro del componente principal o el principal. Entonces en ese caso, garantizamos en el camino con los estilos
públicos que todo sea público y abierto para nosotros. Simplemente podemos pasar y luego diseñamos como queramos en base a lo que inspeccionamos aquí. Entonces por eso uso siempre los estilos públicos. No estoy usando los estilos de componentes. Por supuesto que depende de ti. Se puede utilizar también, el estilo de los componentes. Entonces volvamos a revisar el diseño, veremos que tenemos aquí como más radio de frontera. Por lo que podemos decir como son 13. Entonces pongamos el mismo radio fronterizo que un diseño. Entonces volvamos de nuevo a nuestro código. Y entonces diremos aquí que el botón tiene border-radius será de 13 pixels. Guardemos, revisen de nuevo en nuestro navegador. Y veremos que también lo tenemos de esa manera. Notamos que el botón tiene más altura. Por lo que también puedes darle una altura que quieres como aquí, tiene 48 o tal vez vamos a hacerlo, por ejemplo, 50 para tener como algún número constante. Entonces aquí vamos otra vez y decimos, vale, la altura del botón será de 50. Entonces va aquí, Pixel, 50 pixel. Entonces de nuevo, vamos al navegador, comprobamos eso, vale, tenemos el botón con 50 pixel. Entonces esta es una forma de cómo implementamos las cosas y cómo anulamos esto muere de Prime NG.
144. Categorías Banner de banner: De acuerdo, de vuelta a nuestro diseño, vamos a hacer ahora el componente de categorías o categorías banner. Por lo que estas categorías tendrán un título y la lista de categorías. Y cada elemento de categoría tendrá el icono que
hemos especificado en el back-end y el nombre de la categoría. Y cuando haga clic en una categoría, iría a la página de lista de productos y
mostraré los productos que están bajo esa categoría. Entonces hagámoslo rápidamente y lo vamos a implementar de la misma manera como implementamos ese banner. Entonces, antes que nada, necesito ir aquí. Ya podemos cerrar todo. Entonces no necesitamos hacer nada más aquí. Por lo que sólo vamos a crear un nuevo componente que se llama categorías bateador. Y donde esto podría ser bueno se creará estandarte del IS. Te sugiero para mí ahora puedo crearlo en biblioteca de productos. Por lo que tenemos productos de labios, y aquí podemos definir componentes que habíamos hecho con la búsqueda de productos. Podemos agregar también las categorías banner. Entonces podemos ir aquí y generar, y luego damos un nuevo componente. Y este componente esquemáticos. Y lo voy a dar aquí componentes. Y no sería el objetivo es planar. Y entonces el nombre del proyecto serán los productos. Y luego voy aquí en la lista como siempre lo hacemos, le
doy exportación porque la voy a utilizar en la página principal y el camino y de metas. Tenemos que dar un selector, el selector, como dijimos, definimos eso, que le damos al producto el nombre de la biblioteca como por regla general. Y luego definimos lo que queremos. Por lo que podemos decir productos, categorías, banner. Y aquí tenemos ese selector. Omita textos y necesitamos especificar no hay necesidad de estilo para que podamos poner en línea el estilo. Entonces en ese caso, tendremos las categorías banner generadas de esa manera. Entonces vamos a dar click en Ejecutar. Y luego volvemos a ir a nuestros archivos. Veremos que tenemos categorías banner. Entonces como cada categoría o como cada componente
necesitamos div y podemos darle a este div categorías de calidad banner. Y este banner categorías contendrá un título, como vimos en el diseño. Se llamaría aquí categorías. Entonces le doy H3, puedes dar cualquier edad que quieras para mí, yo doy el H3 porque es el tercer nivel de la página. Entonces aquí tenemos ahora categorías y luego definimos, de acuerdo, por lo que p grid, porque si recuerdas en el diseño que esas categorías están bajo métrica, de acuerdo. Entonces en cada grilla tendrá dos columnas porque tenemos seis categorías ahí en absoluto. Entonces damos este div y luego llamamos y dos. Por lo que en ese caso, tendremos las categorías ubicadas aquí. Entonces lo que queremos primero necesitamos un div que contendrá la categoría en sí o elemento de categoría. Y luego dentro de este ítem de categoría, tendremos un fondo y luego el ícono y el nombre. Por lo que voy a dar aquí div. Y entonces diría, por ejemplo aquí div, un ícono de categoría o será, sí, vale, Son ícono de categoría porque necesito aquí el ícono primero. Por lo que tenemos aquí icono de categoría y otro div donde voy a poner el nombre de la categoría para que podamos decir div dot category, dash name. Y aquí vamos a poner un icono. El ícono que leemos usándolo era de prime y g, Si recuerdas, estábamos usando la etiqueta que se llama I y luego icono P, y luego doy el ícono que quiero, por ejemplo, PI check. Entonces aquí tenemos el icono y el nombre será, por ejemplo, el nombre de la categoría será, por ejemplo, jardín. Por lo que vamos a sustituir más adelante todo este componente o este texto sólido o texto
codificado por la categoría que viene del back-end. Por lo que ahora estamos estructurados nuestra página. Vayamos de nuevo a la página de inicio. Entonces tenemos todo está funcionando bien, pero no tenemos ese banner porque no lo llamamos en la página de inicio. Entonces antes que nada, necesito ir a la aplicación y tú compras, como recuerdas, tenemos las páginas y aquí la página de inicio. Y el segundo componente en el que estamos trabajando es que categorías componente o categorías banner. Por lo que aquí lo llamamos como productos. De acuerdo, creo o IS banner y también tenemos que cerrarlo también,
así que no tenemos aquí ningún tema. Por lo que en este caso, tendré como las categorías banner se llamará desde la biblioteca de productos. Entonces si recuerdas, ya
hemos importado el módulo de productos. Por lo que el módulo de productos, dentro del módulo de producto, ya
tengo las categorías banner, que en consola ECS lo hizo en la exportación y puso este componente, que en las bibliotecas producto o la biblioteca de productos. Entonces aquí lo tenemos todo. Probemos eso. Ya veremos, genial. Contamos con categorías. Y el ícono y el jardín. Entonces lo que necesitamos, en realidad necesitamos primero para darle estilo a este banner. Entonces vamos también a nuestros estilos públicos. Tenemos labios. Si, si recuerdas, hemos definido la misma estructura. Por lo que voy a crear un nuevo archivo dentro de la biblioteca Productos y darle como categorías banner. Y este banner categorías tendrá, será un CSS. Y entonces vamos a darle estilo aquí. Pero primero necesitamos importarlo también en nuestros productos, que se importa en nuestro estilo de aplicación. Entonces tenemos aquí también, no
tenemos los productos, tenemos categorías, banner. Entonces en ese caso, puedo ver los estilos en mi aplicación. Entonces como vemos en el diseño, tenemos como algún espacio aquí. Entonces o puedes dar banner o por ejemplo, aquí, margen inferior, o aquí das margen top para mí, voy a dar margen top para las categorías. Entonces tal vez podamos ir aquí dos categorías, banner y antes que nada, necesitamos llamar a esta clase. Por lo que tenemos aquí la clase de categorías, banner en categorías mamífero fino, archivo CSS. Entonces voy a dar aquí Ferraris como margen pero droga o sí, droga, no podemos decir 75 pixel. Y también vamos a darle estilo al H3, que está dentro. Por lo que podemos darle, por ejemplo, botón de margen. Por lo que podemos empujar el ícono de la categoría debajo de él, alrededor de 20 pixel. Por lo que podemos guardar esto para comprobar si realmente estamos importando esta vez. De acuerdo, Vemos que tenemos, el estilo es importado. Está bien, Bonito. Y vamos a colorear esto igual que el color que aquí se define. No es totalmente negro, pero es como la luz en gris. Por lo que podemos utilizar los grises que están en la superficie y definidos en el, en la energía prime. Entonces como ven aquí, tenemos muchas variables para los colores, por lo que podemos pegarnos a esos. Entonces podemos tomar, por ejemplo, este más oscuro. Para que podamos tomar este tobogán. Podemos tomar por ejemplo, encuestas 500 por ejemplo. Entonces vamos aquí, le damos un color a este H1 o H2, H3. Y decimos lejos, por lo que la fase 500. Por lo que ahora hemos especificado el color del título. Volvemos a ir y vamos a ver que tiene ese color. A lo mejor puedes usar más oscuro, por lo que sólo tienes que aumentar el número que se especifica aquí. Por lo que le daré, por ejemplo, 700. Entonces vamos aquí, le damos 700. O en función del diseño, puedes definir tus propios colores, nuestras propias variables. Y luego puedes utilizarlos en tu aplicación en
base al diseño que es proporcionado por el diseñador. Entonces aquí tenemos estilo, el H3, lo que necesitamos también para darle estilo a esa categoría misma. Por lo que dentro de categorías banner, definimos un div que se llama categoría o elemento de categoría. Podemos llamarlo como, lo estoy llamando aquí, categoría. Y dentro de esa categoría voy a tener algunos valores como. Al igual que por ejemplo, tenemos altura mínima para ello, como si tuviera algo de altura, podemos darle 100 pixel. Yo soy copia esos o conozco esta información del diseño, por lo que podemos copiar también. El radio fronterizo dos será de cinco píxeles. Y entonces tenemos texto alineado. Nosotros le damos un centro. Por lo que todo dentro de ella estaría en el centro. Y esto se mostrará como un flex. Te diré por qué, Porque también queremos justificar su contenido para estar en el centro. Entonces primero lo podemos dar así. Yo solo quiero dar un color de fondo, color de fondo aleatorio, solo para ver cómo van mis cambios porque ahora todo es transparente. Por lo que también podemos ser, por ejemplo, aleatoriamente este color. Por supuesto, lo vamos a reemplazar por sus categorías color, que también hemos definido en el back-end. Entonces tenemos este jardín aquí, tenemos esta pancarta. Por lo que quiero justificar su contenido. Entonces si recuerdas, definimos esto como flujo. Por lo que no puedes decir simplemente justificar contenido y luego dirás centrar y luego alinear elementos. Se lo puede dar, por ejemplo, también centro. Por lo que estará exactamente en el centro de este div. Entonces dos cosas, justificar contenido y alinear elementos. Entonces démoslo aquí. Entonces como vemos justificar contenido, decimos centrar y alinear elementos. Será así, Centro. Por lo que todo estará centrado en su interior. Pero como ves, están cerca uno del otro, como el icono y así el nombre, están cerca uno del otro porque dijimos display flex. Entonces para ponerlos uno debajo del otro hay agradable creo que en flex se puede decir dirección flex. No estará encendido, todos son como no una horizontal, pero será columna y también columna reversa. Aquí tienes múltiples opciones. Se puede cambiar entre todas esas cosas. Entonces ya ves, hacer las cosas es realmente importante aprender. Como ves, no puedes hacer las cosas sólo cuando estás aprendiendo algo práctico. Entonces por eso estoy haciendo ese tipo de cursos. Cursos que vienen con experiencia práctica. No sólo estoy dirigiendo algún documento y luego está bien, puedes aplicarlo. No, lo ves frente a ti. Ya ves cómo realmente necesitamos, por ejemplo, dirección flex. A lo mejor viste dirección flex. Está bien. ¿ No sabes qué es? Nunca has experimentado por qué lo estamos usando, pero ahora puedes ver cómo se usa. Por lo que este es un gran valor de hacer las cosas prácticamente. Entonces aquí tenemos ahora esa categoría. Entonces lo que necesitamos en base al diseño para darle al ícono como poco de tamaño más grande y también el texto para ser un poco más grande. Entonces hagámoslo en el código. Vete, yo voy aquí. Por lo que diré que si recuerdas, hemos especificado icono, categoría, icono. Por lo que iré aquí y diré que soy por ciento de categoría o icono porque soy por ciento me va a dar categoría punto. Y luego pongo icono de guión. Hará para mí en ese ícono de categoría. Entonces aquí tendremos la clase, y dentro de esta clase estamos usando el icono. Por lo que podemos usar esta clase también. Entonces aquí puedo decir PI, será tamaño de fuente. Podemos darle como por ejemplo, 40 pixel. Todo lo que puedes utilizar las unidades EM, puedes decir a EM. Por lo que podemos tenerlo como un texto grande. Entonces de vuelta al navegador, ya
veremos, vale, lo tenemos así. Yo, ignoro los cambios porque no guardamos eso. Por lo que tenemos que volver a poner, dirección
flex será columna. De acuerdo, tenemos ahora todo está bien, así que está recargado. Y lo tenemos así. También tal vez ese texto, podemos darle un poco más grande. Por lo que alinearé también otra clase que se llama texto o nombre. No, lo que llamamos el vaso aquí. Nosotros lo tenemos como nombre. Entonces voy a ir aquí nombre, y luego el nombre tamaño de fuente será como un poco más grande. Podemos darle 1.2 AM. Entonces este 1.2 E m, lo que significa, como, multiplicaré 1.2 por 14 pixel y luego te dará el tamaño en pixel. Entonces así es como se calcula porque tenemos el cuerpo especificado previamente en su configuración, que tenemos. El tamaño del cuerpo de la fuente será de 14 píxeles. Entonces después de eso, podemos ahorrar e ir de nuevo. Y veremos que tenemos un poquito más grande aquí. Demos también un poco de espacio aquí debajo del ícono. Para que podamos ir aquí al ícono mismo. Y podemos ir de nuevo aquí y decir, por ejemplo, al ojo mismo o al PI, podemos dar margin-fondo como 10 pixel. Por lo que podemos usar también esta clase aquí. Y decimos como, quiero un margen inferior será de 10 píxeles. Por lo que para empujar un poco el texto lejos del ícono. Entonces ahorramos, recargamos, Vale, todo ahora está bien. Entonces revisemos al menos el radio fronterizo. Creo que es más grande. Cuenta con 14. Por lo que podemos dar también un radio de frontera más grande. Por lo que podemos dar aquí 14 pixel. Y luego volvemos a ir a nuestro diseño. Y veremos que tenemos una categoría específica. Entonces ahora lo que vamos a hacer es solo repetir esas categorías que están en la base de datos, que obtenemos de Cartero y lo resolvemos anteriormente en la aplicación del panel de administración y las colocamos aquí. Entonces, en primer lugar, necesitamos llamar a ese servicio de categoría. Entonces como ven aquí, hemos peinado todo. En primer lugar, necesitamos tener como array de categorías. Por lo que podemos definir aquí en las categorías de archivos ts por qué será como array. Y esta matriz será tipo de modelo de categoría. Si recuerdas, también hemos definido este modelo. Por lo que estará inicialmente vacío porque lo vamos a conseguir del back-end. Y qué, cómo o cómo puedo usar u obtener las categorías. Podemos conseguirlos a través del servicio si recuerdas, que creamos en la categoría servicio. Y tenemos toda esta lista para que podamos conseguir categorías. Por lo que iré aquí a mi archivo TypeScript en el banner de categorías, y llamaré a ese servicio de categoría. Diré servicio de categorías privadas. Serán categorías de servicio como ven aquí. Entonces si quieres, puedes usar este. Y luego en ONG en Edit, podemos llamar de nuevo a ese servicio de categoría. Y entonces podemos sentir estas categorías. Entonces hagámoslo. Podemos decir este servicio de categoría punto, luego getCategories. Y si recuerdas, tenemos que
suscribirnos, tenemos que esperar un valor que viene
del backend y luego lo empujamos a la matriz. Por lo que tenemos aquí dot subscribe porque es petición HTTP. Y entonces conseguiré sus categorías en el retorno de la suscripción. Por lo que aquí tenemos categorías. Y entonces diré estas categorías, como la variable que definí aquí, serán las categorías que regresen, o las categorías de respuesta que regresaron del backend. Y si recuerdas, necesitamos también hacer darse de baja, necesitamos hacerlo. Por ejemplo, toma hasta que si te acuerdas, hemos hecho eso es solo para que el desempeño no haga temas. Por lo que esta suscripción no permanecerá abierta. Entonces tenemos que hacer también. Y subs, si recuerdas, y lo hemos definido y hablamos de eso en la refactorización del panel de administración. Por lo que n subs será una variable que será tan bien definida aquí. Por lo que podemos llamar a este n subs, lo siento. Por lo que n subs también con dólar. Por lo que tendrá un tipo que se llama sujeto. Y el tema viene de nuestro x js y el tipo de éste será cualquiera. Y luego nosotros como inicialización, cuando visito este componente, digo nuevo tema. Entonces esto termina arriba, bueno, va a terminar, como estoy diciendo aquí, toma hasta, Vale, estoy tomando hasta este subs. Y así cuando termine,
Terminaremos cuando destruya este componente. Cuando destruyo este componente, cuando navego lejos de la página principal, cuando ya no veo este componente. Entonces por eso necesitamos también llamar a algo sobre destruir. Por lo que este OnDestroy es parte del ciclo de vida angular de los componentes. Y entonces podemos usarlo, por lo que se ejecutará cuando se destruya el componente. Entonces aquí implementamos onDestroy y luego digo NG onDestroy, y luego especificaré qué va a hacer. Por lo que quiero que este final subs se completen. Entonces como dije poco, obviamente necesitamos hacerlo de esta manera. Decimos Siguiente, como ir siguiente paso y luego terminado. Por lo que cuando este componente se completara, se terminará la suscripción y no tendremos ninguna fuga de memoria. Por lo que ahorramos. Y ahora tenemos la categoría Eso es por ejemplo aquí, hacer un registro de consola para estar seguros de que estamos recibiendo las categorías del back-end. Por supuesto, hay que estar seguro de que está ejecutando el back-end. Entonces volvemos a guardar y vamos a la consola. Y veremos que tal vez haya un error. Eso es un error aquí. Dice que son tres error inyector. El servicio de categoría está usando cliente HTTP y no hay proveedor para el cliente HTTP. Por lo que necesitamos hacer o llamar también. Si recuerdas, hicimos eso en el panel de administración, necesitamos llamar también al final de la aplicación de compra, el módulo cliente HTTP. Por lo que grabo aquí de nuevo, módulo cliente
HTTP como lo hicimos anteriormente en la obligación admin. Entonces aquí ya hemos llamado, vale, obtengo cinco categorías como ven aquí. Pero en el front end, aún no
hacemos nada porque no agregamos eso a la plantilla. Por lo que volvemos de nuevo a nuestras categorías banner aquí. Por lo que hemos usado array. Por supuesto que eliminarías su registro de consola siempre porque está afectando el rendimiento de la aplicación. No hagas muchos logs de consola y mantenerlos en producción. Por lo que es mejor quitarlos. Entonces aquí, como ven, tenemos categoría y tenemos columna dos. Por lo que necesitamos recorrer estas dos columnas o dos cada categoría. Y entonces va a generar para mí esas categorías,
que se proporciona a partir de la matriz de categorías. Por lo que diría aquí en la columna dos, G4. Y luego al final usted para, yo diré dejar categoría será fuera categorías, categorías. Eso ya lo definimos y está lleno. Por lo que ahora tenemos la categoría aquí. Diré que reemplace para mí el nombre de la categoría. Entonces podemos hacerlo de esa manera. Digo categoría nombre de punto y luego anchos comprueban eso para ver si todo está funcionando bien. Agradable, los tenemos a todos así. Entonces vamos a reemplazar el color de fondo. Hacer eso es muy sencillo. Si recuerdas, tenemos el color sobre la categoría, así que lo tenemos en el CSS aquí. Por lo que tenemos aquí el color de fondo en categorías clase o componente de categoría. Por lo que aquí categoría div. Entonces aquí vamos y decimos que tenemos una entrada para los devs o el cualquier elemento HTML que viene de Angular, acabamos de llamar estilo NG. Y en cualquier estilo tenemos especificar que entre paréntesis. Entonces es una entrada. Por lo que necesitamos hacer dentro de esta entrada algún código angular. Y dentro abrimos un objeto, y este objeto contendrá la propiedad de estilo, el fondo, propiedad de estilo, lo
definimos así. Antecedentes. Color. Por lo que tendrá como este color de fondo. Y luego diré categoría, la categoría que obtuve del MD4, y luego color. Entonces aquí, este div tendrá este color de fondo, que será color de punto de categoría. Por lo que ahorramos. Y luego vamos a la aplicación. Veremos que tenemos el color que hemos definido antes en el panel de administración, si recuerdas. Entonces de esa manera tenemos ese color. El estilo energético es hacer el trabajo por ti. Por lo que también puedes usar otras propiedades, como, por ejemplo, el color. Entonces ven aquí que el color también cambiará en base a eso. Por lo que es muy sencillo. Se puede que dentro del NG cuatro y así el ícono, si recuerdas, aquí tenemos ícono especificado para su categoría, por lo que podemos usarlo también. Tienes dos opciones. Una de ellas es solo hacer esto y luego dices icono de punto de categoría. Porque si recuerdas, estábamos especificando el icono sólo el nombre del icono, que es de Prime NG. Por lo que necesitamos conectarlo para ser pi y luego menos, y luego especificar el nombre del icono. Y entonces podemos conseguirlo aquí. Es exactamente como lo hicimos con el panel de administración. Por eso voy rápido aquí. Entonces como ves, tenemos todo está definido. Creo que la fuente de texto es un poco grande. Hagámoslo más pequeño. Iré aquí otra vez a las categorías banner y luego haré el nombre a ser. Lo mantenemos como uno. Entonces no tenemos que hacer nada ni ningún cambio aquí. Entonces podemos simplemente mantenerlo así. Y ya veremos, vale, tenemos el texto y los iconos son muy bonitos. Tenemos cinco categorías solo porque hemos definido cinco categorías en el back-end, puedes agregar otra categoría. Yo lo voy a agregar para la próxima conferencia. Puedes usar la aplicación del panel de administración para agregar categoría, y se agregará aquí con el icono de la derecha. Por supuesto, lo último que quiero mencionar es cuando hago click en una de estas categorías, quiero ir a lista de productos y luego a la categoría de ese producto. Por lo que quiero ver los productos de esa categoría, de la categoría en la que hice clic. Entonces para hacer eso, tenemos que hacer en el propio banner. Aquí, la categoría. No podemos decir enlace de router si recuerdas. Entonces no puedo decir eso aquí. Puede ser un enlace de enrutador. Entonces el enlace del router, lo que será, será un producto. Por lo que podemos poner aquí en doble comilla porque defino este insumo. Entonces aquí estoy escribiendo un código TypeScript o JavaScript, digamos, o código angular. Entonces aquí estoy especificando al jefe. Serán productos. Y entonces estoy creando, por ejemplo, el mismo componente que lo estoy llamando, pero sería como bajo categoría. Entonces voy a una categoría específica y luego paso esa ID de categoría porque voy a usar en este router o en este enlace, voy a usar un componente el cual está leyendo su ID de categoría. Y entonces me va a devolver esa categoría que yo quiero. Entonces aquí puedo decir plus, por
supuesto ponemos esto en comilla simple porque es cadena. Y voy a combinar con ella categoría dot ID. Por lo que leeré el ID, entonces será con este enlace de router. Pero todavía estamos llegando aquí error. ¿ Por qué? Debido a que no usamos el módulo del router en el módulo de productos, es necesario
utilizar este módulo del router dentro del módulo del producto. Entonces usemos eso. Por supuesto, volveremos a este módulo router con más detalle cuando definamos los productos están fuera. Por lo que necesitamos solo llamar al módulo del router así. Y entonces tenemos un especificado nuestra categoría, cómo se comportará, exactamente lo que queremos. Entonces si hago click ahora en ellos, tal vez consiga errores porque no puedo ir a esa categoría porque no tenemos ruta para eso. Entonces si quieres que funcione, necesitamos crear un componente. Y luego crearemos la lista de productos basada en filtrados, en
base a esas categorías, como veremos más adelante en las próximas conferencias. Entonces como ven aquí, estoy dando click, estoy obteniendo error porque no puedo acceder o ir a este componente. Entonces para mí, ya estaré aquí suficiente. Simplemente quiero mencionar que podemos hacer algún gran comportamiento o un comportamiento más libre y amigable. Que cuando ponga el ratón, será como un puntero. Por lo que podemos hacer eso en estilo de categoría. Entonces si hago clic en Control, si ves hago clic en Control, luego dar click en la clase y me llevará a la clase especificada. Por lo que puedo decir aquí puntero cursor. Y luego ahorramos. Y volvemos a ir a nuestra aplicación en el front end, verás que tenemos ahora toda la categoría es clicable. Entonces podemos, si hago clic aquí, está bien, obtengo error en la consola porque están fuera todavía no está definido. Por lo que en la próxima conferencia, veremos cómo hacer más grande esta aplicación. Iremos a lista de productos y filtraremos por categoría. Como verás más adelante, paso a paso.
145. Artículo de producto: De acuerdo, ahora estamos todavía en la página de inicio. Vamos a crear los productos destacados. Los productos destacados tendrán algún artículo de productos. Cómo lo hicimos exactamente en el back-end, si recuerdas, tenemos galing que destacaron productos API. Por lo que podemos tener sólo los productos destacados aquí. Si recuerdas, estábamos marcando cada producto con bandera que se llama aparece y lo configuramos en verdadero o falso. Y en base a eso, estamos llevando el producto destacado al front end. Pero antes que nada, me gustaría darle estilo al artículo de trabajo o al artículo de producto. Este artículo de producto lo vamos a utilizar también en su lista de productos y también en otros lugares como productos sugeridos o por ejemplo, en la página de inicio de nuevo, o en algún otro lugar de la propia página de producto. Entonces en ese caso aquí necesitamos dos tipos de componentes. En primer lugar, el contenedor de todos estos productos artículo, que se llama productos destacados y el artículo del producto en sí. Por lo que también puedes hacer productos destacados y poner artículo de producto. Pero en este caso, el artículo del producto no será reutilizable en otro lugar. Entonces, en primer lugar, vamos a crear dos componentes. Primer componente se ubicará en la biblioteca de productos, como lo hicimos con categorías, banner, y búsqueda de productos, vamos a localizar esos productos destacados y el artículo del producto para que podamos usar también la consola. Eso lo voy a hacer rápido. Entonces como ven aquí ahora tenemos dos componentes. En primer lugar, llamó productos destacados, y también el artículo del producto. Me equivoqué aquí que puse el, por ejemplo, que guardé cuando estaba generando el artículo, estaba usando la misma herramienta de generación. Entonces sí me equivoqué eso. Pongo todavía tengo los productos o el selector se quedó producto producto producto. Por lo que tenemos que hacer eso también. Entonces tenemos que arreglar eso. Entonces, ¿cómo podemos arreglarlo? Si cometes algún error, solo
puedes volver a ir al componente y puedes editarlo directamente aquí. Entonces tenemos el selector, luego quiero productos y diré productos destacados también. Entonces en este caso, nada va a cambiar, solo este selector. Entonces cuando quiero llamar a este componente, quiero usar el selector. Y estoy usando productos como prefijo. Porque si sabes que tenemos una regla en ES pelusa que tenemos productos como atributo como prefijo. Por lo que siempre necesitamos prefijar nuestros selectores con productos como el nombre de la biblioteca. Y luego pongo el nombre del componente que quiero. Entonces también, tenemos aquí el artículo de producto que hemos creado previamente. Entonces ahora podemos hacer primero el contenedor, podemos decir por ejemplo, tenemos div, que contienen los productos de la característica y el título. Entonces crearé aquí un div y le daré una clase que se llama productos destacados. Y además, voy a dar un título que son realmente, realmente como H3. Y este h3 tendrá productos destacados también. Y luego necesito tener una cuadrícula porque vamos a
poner los artículos en la cuadrícula, el artículo de producto. Por lo que necesitamos tener una cuadrícula también, exactamente cómo la tenemos en el diseño, en el diseño, si recuerdas, tenemos cuatro columnas, por lo que necesitamos 34 por cada artículo de producto. Entonces si volvemos al código, podemos definir un div o una cuadrícula. Podemos llamarlo grilla. Y luego dentro de este div, vamos a definir las columnas. Entonces diré div dot columna P, porque aquí estoy usando el sistema de cuadrícula de Prime NG. Y entonces diré tres. Tenemos 12 columnas, así que necesito cuatro columnas. En este caso, necesito dividirlo por tres. Por lo que 4 multiplicado por 3 es 12. Por lo que aquí tendremos cuatro columnas. Y dentro de eso vamos a utilizar el artículo de productos. Por lo que voy a decir aquí, productos, artículo de producto. Entonces tenemos aquí ese componente definido ya. Entonces en este caso, voy a guardar, guardar todo, y luego vamos a utilizar el componente de producto de función en la aplicación de tienda. En la página principal, como recuerdas. Por lo que tenemos en la página de inicio, este DAG también. Tenemos el banner, tenemos las categorías, y ahora vamos a utilizar el producto en sí o los productos de la función. Entonces comentemos esta parte y luego decimos que tenemos la nueva etiqueta que se define previamente. Por lo que los productos y luego productos destacados. Entonces de esta manera, hemos llamado al componente, que se llama producto de la característica. Y dentro de esta característica productos, estoy llamando al artículo de productos. Por lo que en este caso, debo tener en el producto front end funciona por tiempo. Entonces vayamos aquí y comprobemos. De acuerdo, Contamos con artículos de producto, funciona. Tenemos a la vez porque lo estamos llamando sólo una vez. No tenemos aquí un for loop para cada producto. Entonces por ahora vamos a crear el artículo de producto. Y en la próxima conferencia, vamos a llamar a los productos de la función y poner esto en bucle. Por lo que tendrás el artículo de todos los productos. Entonces, antes que nada, hagamos el peinado del artículo de productos. Entonces en el artículo del producto, si recuerdas, en el diseño, tenemos en la imagen superior, título, precio, y luego botón, botón, que se llama Agregar al carrito. Por lo que necesitamos crear un div, div. Y entonces yo diría Clase de este div será artículo de producto. Necesitamos crear un archivo de estilo para eso, como veremos más adelante. Y dentro de este div, voy a tener algo envoltorio de producto o envoltorio de artículos de producto. ¿Por qué necesito eso? Porque si ves en el diseño, tenemos aquí un fondo gris. Entonces esta será la envoltura y fuera de ella, como si estuviera sacando la imagen. Por lo que aquí tendremos también la imagen. Entonces me pregunto Arbor para ser coloreado así. Y luego voy a poner la imagen y el texto y el premio dentro de ella. Y dentro del envoltorio de artículos de producto, vamos a tener la imagen. Y la imagen tendrá como una fuente, que será la imagen del producto en sí. Y también tendremos una clase para esta imagen. Nosotros lo llamamos Imagen, y luego alternancia. Podemos mantenerlo vacío por ahora, Todos reemplazan el nombre del producto dentro. Y además, necesitamos un título el cual tendrá un vaso también, que será el nombre, el nombre del producto, y dentro de él tendrá el nombre del producto. Y también necesitamos tener un precio. Entonces tenemos aquí un precio. Lo ponemos en H5 y dentro o su clase será precio. Y dentro de ella tendremos el precio del producto. Y al final necesitamos un botón. Y este botón será exactamente como hicimos el botón del banner. Por lo que será botón P y clase de estilo. Le daré una clase la cual se llama Agregar al carrito. Y la etiqueta se agregará al carrito, y el icono será un carrito de compras. Pero aquí tenemos un problema que no estamos llamando al módulo de productos ni al módulo de botones, lo siento. Por lo que necesitamos llamar también a ese módulo de botón en el módulo o módulo de productos. Porque si recuerdas que cada módulo está totalmente separado, que es no ve los otros componentes ni los demás módulos que se llaman en la aplicación o en otra biblioteca. Por lo que necesitamos volver a llamar al módulo de botones, dentro de esta biblioteca de productos, Vamos a guardar todo de nuevo para que podamos tener un guardado y luego vamos a la aplicación. Todavía no vemos nada porque, vale, aquí está vacío. Tenemos sólo como son botón y aquí deberíamos tener como algún nombre, imagen, etc. Pero ahora los tenemos vacíos porque no especificamos eso. Entonces qué puede ser aquí, está bien. Si vuelvo a ir al artículo de productos o a los productos de función, la característica de los productos vendrá del backend. Y aquí en este caso, quiero pasar esos productos al artículo de producto. Y entonces el artículo de producto se renderizará en base a qué? Por lo que se inserta dentro de ella. Por lo que necesitamos algo llamado entrada. Y este insumo se puede definir de esa manera. Si recuerdas, estuvimos usando entradas siempre como propiedades. Por lo que especificamos como alguna entrada la cual puede hacer algo exactamente igual a cómo tenemos entrada. Por ejemplo, fuente de la imagen. Por lo que es entrada, también clase de estilo es entrada. Por lo que podemos especificar entrada que se llama producto, el producto en sí. Y entonces aquí pasaré el producto que estoy teniendo del backend o lista de productos, que lo tengo del back-end. Por lo que veremos en la próxima conferencia. Pero ahora voy a definir este ítem o este insumo. Entonces hagámoslo. Podemos volver a poner todo e ir al artículo del producto. Entonces en este caso, puedo ver cada entrada que viene a este componente y puedo renderizarlo aquí. Entonces vamos al TypeScript de este componente o al archivo de clase de este componente. Y luego vamos a sumar una entrada. La entrada es algo que puedes definir en Angular, y este será elemento inyectable, por lo que será como esta entrada. Y luego puedes definir el nombre de la entrada que quieras. Por ejemplo, quiero un producto. Esto lo voy a tener también en el producto o productos de características, lo
pasaré aquí. Diré que producto de entrada será el producto que viene del back-end. Entonces aquí tengo un producto y el tipo, si quieres definir un dipolo. Por lo que sería más fácil para ti acceder a esta entrada. Por ejemplo, quiero acceder fácilmente a su nombre de premio. Entonces podemos llamar a ese producto moderno porque estoy pasando un producto y el insumo se importará desde el núcleo angular. Por lo que aquí tenemos angular o importación desde núcleo angular. Entonces en este caso tenemos ahora la entrada. Ahora estoy dentro de este componente. Puedo usar este producto por dentro, como tengo los productos que obtuve
del backend y puedo usarlo aquí o usar sus propiedades aquí. Entonces, en primer lugar, puedo usar, por ejemplo, la imagen. Entonces tendré aquí la entrada fuente, como ven aquí, es entrada. Por lo que no puedo decir imagen de punto de producto. Por lo que tendremos la imagen del producto. Y aquí en el Alt, se
puede especificar también el nombre. Por lo que también puedes pasar el nombre del producto. Y así aquí, se puede especificar el nombre del producto el cual se titulará en el nombre. Por lo que tenemos aquí nombre del producto. Y además, podemos definir que un precio. Entonces tenemos aquí también, producto, qué precio. Y entonces también se puede pasar o hacer una pipa que es, será una moneda. Entonces si recuerdas, estábamos poniendo el precio en una pipa para moneda lo peinara y pusiese letrero de dólar detrás de ella. Entonces, vamos a guardar eso. Notaríamos que no veremos nada porque este componente aún no tiene entrada. Por lo que aquí no tenemos ningún dato. Por lo que es mejor decir siempre que cuando hay un producto, como cuando esto se define, hay que el interior del mismo luego mostrar este componente. Siempre estoy haciendo eso para evitar tener error. Entonces cómo podemos hacer eso, solo
puedes decir ng-si dentro de este ng-si solo dices producto. Entonces si hay producto entrante a este componente con nuestros datos, entonces esta placa, si no,
no muestra nada, para que podamos guardarlo y comprobarlo de nuevo. Veremos que no tenemos nada porque no estamos pasando ningún producto a artículo de producto de productos futuros. Entonces lo que vamos a hacer a continuación es hacer que los productos de la característica. Nosotros los vamos a llamar. Y luego vamos a pasar al artículo de producto o al artículo de productos. El producto en sí, que viene del backend de los productos de características.
146. Boceto de productos destacados: Si recuerdas en Cartero o en el back-end, estábamos obteniendo los productos de la función en base a algún conteo. Como recuerdan, hemos creado API en el back-end, que dice producto get y luego destacado. Y luego especificas cuántos productos quieres mostrar en el front end o mostrar, o para conseguir hacer tu front end. Entonces, en primer lugar, quiero mostrarles cómo puedo llamar a esta API. Entonces lo puse en Cartero, como recuerdan, ahora
tenemos tres productos los cuales se
presentan como la bandera de Oriente destacado es verdad en todo el camino. Entonces como lo hicimos siempre con cada producto o con cada servicio que podemos llamar a los productos de la función. Por lo que podemos llamar a los productos de la función dentro del componente, que creamos cuatro productos destacados. Entonces, en primer lugar, necesito crear este servicio. Entonces, en primer lugar, voy al servicio de producto y luego creamos una nueva función. Podemos llamarlo obtener producto destacado. Y entonces esos productos o esta función volverán para mí observable. Y esta observable será matriz de productos, como si obtuviera múltiples productos, no sólo uno. Y entonces esto regresará para mí solicitud HTTP y luego obtener. Y luego podemos especificar de nuevo que queremos matriz de productos. Por lo que lo tendré aquí también. Y luego podemos especificar qué es una URL. Será exactamente lo mismo que tú eres L aquí. Entonces podemos tener toda esta parte y luego vamos a sustituir lo que tenemos en el back-end o cómo lo tenemos en el back-end. Entonces tenemos aquí la URL, y luego decimos que necesitamos conseguir y luego productos destacados. Y luego especificamos cuenta. Y esta cuenta, puedes hacerlo dinámico. Puedes pasarlo a la misma función, para que puedas usarlo de nuevo en otro lugar. Por lo que voy a decir aquí número de cuenta. Por lo que pasaré el número dos cuando llame a esta función. Por lo que voy a decir aquí que he destacado y luego especificar para mí el conteo. Por lo que necesitaré aquí contar. Por lo que en este caso, hemos llamado a esta función alguna cuenta específica de productos, como necesito tres productos destacados. Y entonces me llamará esta API. Por lo que guardamos eso y vamos de nuevo a nuestro componente de producto de función. Y necesitamos llamar al servicio del producto. Por lo que tenemos que decir aquí, servicio de producto
privado, o por ejemplo, servicio de prod. Puedes especificar el nombre que deseas aquí en función de tu capacidad para leer el código. Y entonces diría servicio de productos, que viene de servicios, servicio de producto. Y luego al final te en edit, puedo especificar un método al que se llamará también, como un privado, podemos decir obtener productos destacados. Y luego especifico conteo, como dijimos anteriormente. Por lo que puede especificar la cuenta aquí o puede definir una directamente cuando estamos creando este método. Entonces aquí voy a crear este método y voy decir privado y luego especificar el método. Y luego diré este servicio de producto dot y luego obtendré productos destacados. Y entonces esto volverá para mí, por ejemplo, suscriptor. Pero primero necesito especificar cuántos productos de función quiero. Por ejemplo, en mi caso, quiero cuatro porque tengo cuatro productos en una línea. Y entonces podemos decir suscríbete como cuando su valor esté listo, Dámelo dentro de unos productos. Y entonces llegaré aquí y necesito especificar la variable del producto como siempre lo hacemos. Por lo que necesito a miembro de clase aquí, que se llama productos. Se puede llamar también productos futuros, que serán un tipo de producto y luego será array. Y dentro de eso sería una matriz vacía. Por lo que se llenarán estos productos. Lo vamos a utilizar en la plantilla y luego cómo se llenará, podemos decir en este punto, producto es igual a productos que viene de suscribirse. Si estás confundido, puedes cambiar el nombre de esto, puedes llamarlo como productos bien destacados. Vamos a renombrarlo así para no confundirnos. Por lo que tenemos futuros productos. Y entonces esto, que los productos de la característica es un producto que vienen de esta API o de esta convocatoria. Y luego vamos a utilizar esta característica productos en el front end. Entonces necesito ir a la plantilla y luego voy a decir en la función productos, traer para mí cada columna un producto y pasarlo a un artículo de producto. Entonces aquí voy a decir MD4 y luego dejar que el producto, como un producto de productos destacados, como que voy a pasar por todos los productos que están llegando a través de esta característica productos. Y entonces diré que pase por mí. Si recuerdas en la conferencia anterior, creamos un insumo que se llama producto. Y entonces voy a pasar este producto a ese insumo o a ese componente. Por lo que en este caso, este componente recibirá este producto cada vez, y esto se ejecutaría cuatro veces porque tenemos cuatro productos provenientes del back-end. Y entonces se renderizará de esa manera. Por lo que voy a ir a su componente. Y aquí la plantilla se renderizará exactamente cómo recibimos el producto. Por lo que en realidad, vamos a tener cuatro componentes se llaman aquí porque tenemos productos predicadores para productos. Entonces vamos a guardar todo y comprobar si todo está funcionando bien. Doy click en Guardar todo. Y luego vamos al front end y veremos,
vale, genial, tenemos todos esos productos,
pero no es de estilo y vamos a darle estilo a cada artículo de producto en la próxima conferencia, como los veremos más adelante. Pero antes que nada, recuerda que hacer siempre el acabado de la suscripción subscapular. Por lo que aquí tenemos una suscripción. Y como recuerdan que cuando salgo con este componente, necesito terminar la suscripción. De lo contrario, tendré fuga de memoria en el futuro. Entonces para hacer eso, tenemos que ir y hacer exactamente cómo lo hicimos con cada suscripción previamente, lo
que hablé muchas veces. Entonces voy a hacer eso rápido.
147. Artículo del producto de diseño: De acuerdo, aquí le peiné el artículo del producto. Te voy a mostrar el estilo rápidamente,
como el CSS, porque te dije que nos estamos centrando aquí en Angular. Por lo que la parte de estilismo para nosotros es como solo parte secundaria. Por lo que puedo explicarlo rápidamente si ya tienes experiencia con CSS. lo que nuestro curso aquí solo se está enfocando en Angular y cómo podemos estructurar nuestro proyecto de la manera correcta. Pero claro, puedo mostrarte rápidamente el CSS para no hacer el abordaje del curso y más largo. Por lo que puedo compartir con ustedes el código directamente del CSS. Entonces, en primer lugar,
tengo aquí un componente de elemento de producto o archivo de estilo, que creé en nuestra carpeta de estilo público, como acordamos anteriormente, que tenemos el estilo público en las bibliotecas. Y esta biblioteca es que cada biblioteca tenía su propio estilo público para cada componente que está dentro de esta biblioteca. Entonces aquí tenemos el artículo de producto que creé. Y como recuerdas en la plantilla de artículo de producto, si vuelves al artículo de producto otra vez, tenemos aquí Artículo y luego envoltorio de artículo de producto, y dentro de ella tengo imagen y luego nombre, precio, y etcétera. Entonces voy al estilo otra vez, así te mostraré que tengo el envoltorio. Yo le doy un color de fondo para dar este fondo gris aquí. Y también doy una frontera porque si te das cuenta, tenemos un poco de frontera aquí. Y además, le di flex de pantalla de radio fronteriza porque quiero alinear estos artículos en el centro uno debajo del otro. Por lo que tenemos un flex, todos ellos centrados, justifican también su contenido. Centro, como estar todos ellos en el centro, en medio de la caja. Y como va dirección flex es columna como no los quiero cerca uno del otro, pero las quiero de columnas de arriba a abajo. Entonces como ven aquí, también
tenemos altura mínima para darles a todos la misma altura, como esta caja tendrá toda la misma altura. Y luego margen superior, empujo un poco el código, o ese componente desde la parte superior, un poco, unos 85 píxeles. De acuerdo, la imagen en sí, tenemos como ancho. Aquí. Tenemos como 60% de su parte superior porque está dentro de la envoltura. Por lo que no vamos a tener ancho completo de la imagen, pero tenemos el 60 por ciento de su parte superior aquí. Entonces será así y en el medio porque
aquí hemos especificado justify-content center y el margen superior es menos 85. ¿ Por qué hice eso? Porque quiero sacarlo de la envoltura. Por lo que le di una parte superior de margen, al
igual que la parte superior del margen de imagen, empujarla fuera del subpixel 85 más riper. El nombre que le di un poco como margen, arriba y abajo. Por lo que será de 10 pixel para estar lejos del bit editor de imágenes y lejos del precio también. Y ellos luego el precio. Yo le di un color primario, que nuestra variable de color primario definimos previamente, algún tamaño de fuente y como marcaremos 0 porque viene inicialmente este H1 o h5, inicialmente con algunos márgenes. Entonces los hago 0. Y al final, tengo el botón, como ven aquí, lo anulo el botón con el archivo de estilo o que la clase de estilo que tenemos aquí, clase de
estilo del botón y tengo Añadir al carrito. Entonces lo anulamos eso. Y luego fuimos aquí y dimos como el estilo. Fui al estilo y le di color de fondo será color primario. Es como si lo anula el color y luego el borde y le doy 0. No quiero frontera y le doy más radio fronterizo basado en el diseño, cómo lo tengo. Y luego exporté o importé este archivo en productos SCSS. Y luego este archivo producto SCSS, que contienen todos los estilos, lo
importé en y tú compras, que lo hemos importado ya en la importación para labios. Y luego veremos que el estilo se verá así. Por lo que el estilo es bastante simple. No tenemos que complicarlo. Estamos siguiendo el diseño tal como está. Y luego haremos el botón Agregar al carrito cuando vayamos a trabajar con el carrito.
148. Artículo del producto de diseño: Hola y bienvenidos de nuevo. Ahora en esta sección vamos a crear el componente de lista de productos o la página de productos. Por lo que
cuando el usuario, cuando esté en la página de inicio y vaya a los productos, verá esta lista de productos. Y como ves que estamos usando algunos componentes que creamos previamente. Utilizamos el que creamos para futuros productos, que se llama producto item, y lo vamos a utilizar dentro de la lista de productos. Adicionalmente, vamos a hacer algún filtrado para los productos. Si recuerdas, tenemos categorías y esas categorías podemos seleccionar qué categoría quiero mostrar. Y en este caso, mis productos, se
van a filtrar. Entonces, empecemos a hacer eso. Como ves que tenemos dos columnas, una para las categorías, y una columna será para la lista de productos. Y dentro de la lista de productos, hay tres columnas. Hagámoslo y empecemos con esta lista. Y vamos a presentar primero todos los productos que tenemos en la tienda. Y pasaremos después de eso a filtrar por categorías.
149. Reutilización de la página de productos: De acuerdo, entonces como recuerdan, hemos creado el enlace que se refiere a la lista de productos. Y este listado de productos se encuentra dentro de nuestra aplicación. Tenemos aquí en las fuentes, tenemos algunas páginas y esas páginas, nuestra página de inicio y creamos lista de productos. Pero en base a la nueva arquitectura que
sugerí que vamos a construir múltiples empleos, entonces necesitamos mover esta lista de productos a la biblioteca de productos. Entonces no lo vamos a usar solo para esto y tú compras, tal vez tendré tienda ND también. Por lo que volveré a utilizar el componente de lista de productos. Por lo que en ese caso, estaré teniendo la aplicación en mi código. Es mejor trasladar su lista de productos a la biblioteca de productos, como vemos aquí, que tenemos biblioteca de productos y estamos localizando aquí todos los componentes compartidos. Por lo que también podemos crear aquí un más frío que se llama páginas. Y dentro de esta carpeta Páginas, vamos a poner la página de lista de productos. Entonces, eliminemos primero este componente. Yo me voy a deshacer de él. Por lo que ahora hemos eliminado el componente y no olvides eliminarlo
también del módulo de aplicación donde habremos llamado a este componente. Por lo que siempre estamos retirando los componentes del módulo relacionado. Por lo que lo quitamos. Y además, vamos a quitar este camino. Y vamos a utilizar esos buffers infantiles como lo hicimos con la página de inicio de sesión. Entonces vamos a quitar eso también. Y vamos a quitar la importación porque ya no existe. Por lo que ahora estamos limpios y listos para empezar a trabajar. Entonces primero, generemos un nuevo componente el cual se ubicará en su biblioteca de productos. Entonces primero, voy a buscar componente. Y entonces este componente se ubicará en una carpeta que se denomina páginas. Y dentro de estas páginas, llamaré, por ejemplo, a la lista de productos. Por lo que yo diría productos Lista, perdón, lista. Y entonces pondré dentro del proyecto o de la biblioteca que se llama productos. Y vamos a, en primer lugar, exportar porque también lo vamos a utilizar en la aplicación. O y luego vamos a tener estilo en línea para no tener como CSS embebido. Entonces tenemos también que saltarnos esas pruebas como siempre lo hicimos. Entonces tenemos aquí saltando eso, esto y el selector también está. Vamos a utilizar o elegir el selectivo en base a nuestras reglas en Islandia, y lo llamamos directamente lista de productos. Entonces en este caso, podemos ejecutar este comando e ir a nuestra biblioteca de componentes o a biblioteca que es biblioteca de productos. Y veremos que aquí se crearon las páginas, que es lista de productos. Ahora bien, si saben que si voy aquí, tendré error en la consola porque no puedo esto ni ver más esta ruta. Entonces, ¿cómo podemos resolver eso? Si recuerdas, hicimos lo mismo exactamente con el inicio de sesión. Si recuerdas, tenemos el componente login. Y en el módulo del usuario, me refería esta página de inicio de sesión y uso rutas para niño como lo hicimos exactamente con el inicio de sesión. Entonces hagamos lo mismo también con el producto. Entonces, en primer lugar, tengo que estar seguro de que estoy importando módulo de producto, que estará en el módulo de aplicación en el taller de motores. Entonces tenemos que comprobar eso, vale, no
tenemos los productos, lo tenemos aquí. Contamos con módulo de productos. Ahora, en módulo de productos, voy a crear rutas. De acuerdo, vamos al módulo de productos. Y en el módulo de productos, vamos a crear una constante, nuevo, como lo hicimos anteriormente. Entonces lo llamamos rutas. Y estas rutas tendrán un tipo de rutas. Y entonces estas rutas tendrán el valor de array. Y cada matriz o cada miembro de esta matriz será un objeto. Y el primer objeto que vamos a tener es el camino que se llama productos. Entonces cuando estoy llamando a este módulo, y luego voy en mi página dos productos, entonces aquí se redirigirá porque estoy llamando a este módulo en el módulo de aplicación. Por lo que todas las rutas que aquí se agregan se definirán también en la aplicación. Entonces hagámoslo. Tenemos aquí productos y vamos a tener el mapeo como niños si quieres o
puedes hacer el camino es tan exactamente como quieres aquí. Entonces, por ejemplo, se puede decir componente y luego
se puede importar el componente de lista de productos. Entonces, dejémoslo así por ahora. Y voy a usar a los niños más tarde cuando
vamos a tener las categorías página Garth y echa un vistazo, etcétera. Entonces, antes que nada, hagámoslo así. Entonces cuando voy a los productos, debo ver ese cebo o artículo de lista de productos que creé, pero en la biblioteca de productos. Entonces, en primer lugar, necesitamos también utilizar esta ruta, cómo la vamos a utilizar. Entonces si recuerdas, estamos llamando a un módulo router, pero a lo largo de nuestro módulo se utiliza puramente aquí, pero necesitamos darle una propiedad que se llama para niño, y este niño tendrá aceptando las rutas. Entonces en este caso, estoy diciendo que este módulo de productos es hijo del módulo de aplicación y puede usarlo rutas. Entonces cuando voy ahora a mi aplicación y hago clic en productos, está bien, tengo lista de productos trabajo el cual se encuentra en su biblioteca de productos. Entonces en mi aplicación, sólo
tengo una ruta, que es, por ejemplo, la página de inicio. Y ahí dentro mi módulo de productos, tengo su ruta para los productos. Por lo que todos los productos listan. Por lo que aquí tenemos productos. Nos vamos a esta ruta productos. Y luego voy a ver que realmente estoy dirigido al componente de lista de productos. Entonces ahora marquemos este componente y hagamos que funcione. Por lo que tendremos a la derecha, como la lista de productos, y a la izquierda tendremos la lista de categorías. Por lo que necesitamos llamar a servicios, categorías y productos. Y esos ambos los hicimos ya. Entonces vayamos aquí y definamos nuestros componentes. Entonces, antes que nada, voy a usar esa cuadrícula para que podamos envolver todo dentro de un div y darle un nombre. Podemos decir lista de productos o página de productos. Para que podamos, depende de ti y podemos darle como un nombre como este. Y entonces vamos a tener el div, que se llama cuadrícula B por tener como una fila de cuadrículas. Y entonces vamos a tener dos columnas. Por lo que una tendrá tres columnas. Por lo que tenemos aquí P, llame tres, que contendrá las categorías. Por lo que podemos decir aquí categorías. Y además, vamos a tener otro div para el artículo de productos en sí. Por lo que tenemos aquí div y P call en ello sería el resto. 12 menos tres serán nueve. Entonces vamos a poner los productos aquí. Entonces vamos a Guardar para estar seguros de que todo está funcionando. Por lo que voy aquí a mi aplicación perfecta, tengo aquí categoría y tengo aquí los productos. Entonces, empecemos con los productos. Si recuerdas, hemos creado en nuestros productos algo así como un componente que se llama artículo de producto. Y este artículo de producto, lo
estábamos llamando en todas partes, por ejemplo, en productos destacados. Entonces voy a usar lo mismo. Entonces podemos hacer exactamente lo mismo que hicimos. Entonces tenemos aquí como artículo de producto, pero primero, vamos a dividirlo. Por lo que tenemos dentro de este div, tendremos otra grilla. Así div dot grid o cuadrícula p. Y dentro de este grado B vamos a tener múltiples columnas. Por lo que par fila, serán tres. Por lo que tendré P call for. Entonces dentro de esto, así tendremos tres columnas. 12 divididos por 4 serán tres columnas. Por lo que vamos aquí a utilizar nuestro artículo de producto. Por lo que tenemos aquí el artículo de producto. Pero primero, tenemos que pasar por eso, los productos. Por lo que necesitamos llamar de nuevo al servicio del producto, no contar con producto, pero vamos a utilizar el servicio del producto, todo ello. Y entonces podemos ser capaces de recorrer los productos y obtener productos. Y aquí se repetirá varias veces y hará una lista de mi producto. Entonces hagámoslo. Por lo que voy aquí a llamar a mi servicio de producto. Por lo que diría aquí, servicio de producto privado. Y aquí volveremos a tener servicio de producto. Y vamos a definir un miembro de la clase que se llama productos. Por lo que contendrá mi producto antiguo, será tipo de producto y será array, y al principio estará vacío. Entonces aquí vamos a tener método que se llama, podemos decir conseguir productos y vamos a implementar este método. Entonces primero, voy a tener aquí como unos buenos productos privados. Y esto consigue que los productos usarán el servicio del producto. Por lo que voy a decir este servicio de producto dot, dot get productos. Ya hemos definido este método cuando creamos la aplicación Admin. Por lo que podemos volver a usarlo aquí. Por lo que tendré aquí suscribirse. Y luego después de la suscripción, conseguiría los productos. Ellos mismos desde el backend. Y luego esos productos, voy a asignar a los productos o al miembro de
la clase que he definido previamente. Por lo que puedo llegar diciendo este producto y luego usar los productos de respuesta que pueda dar un nombre como productos de riesgo solo para que no se confundan entre nombres. Entonces vamos a asignar eso a esta matriz. Entonces después de eso, vamos a ir a la plantilla. Y luego en la plantilla diremos MD4. Es exactamente como hacíamos las cosas antes. Lo estábamos explicando con mucho detalle. Por lo que decimos dejar producto fuera de los productos, que he definido en mi aplicación o como miembro de la clase, luego pasarlo por encima y mostrar para mí el artículo del producto. Entonces vamos a guardar eso e ir a la aplicación. Y vamos a ver que no tenemos nada porque creo que no guardé la plantilla o no, tal vez no le asigné el producto. Por lo que tengo aquí entrada de producto como ves. Y luego necesito asignar su producto, que he obtenido del bucle for. Entonces aquí tengo producto, y luego voy a asignar esos productos aquí. Entonces cuando vayamos de nuevo a la aplicación y veremos que hemos enumerado todos nuestros productos y utilizando el artículo de producto que hemos creado previamente. Para evitar a veces el error puede ser los productos no van a estar listos. Por lo que es mejor no mostrarlos hasta que los productos estén realmente listos. Entonces tenemos que decir aquí, productos ng-if. Entonces si hay productos listos, entonces se creará esta rejilla. Y luego vamos a recorrer los productos para cada artículo de producto, como vemos aquí. Ahora tenemos lista toda nuestra lista de productos, vamos a crear ahora las categorías. Por lo que las categorías serán exactamente las mismas. Voy a llamar al servicio de categoría. Por lo que diría aquí privado. Y entonces diré categoría servicio. Y entonces se llamará servicio de categoría. Y aquí vamos a decir también, esto sin embargo, GetCategories. Por lo que no vamos a conseguir sólo productos, vamos a conseguir categorías también. Entonces aquí estamos llamando a este método. Vamos a crear de nuevo este método. Por lo que tenemos aquí getCategories privadas y luego getCategories. Y los getCategories, vamos a utilizar un servicio gatt y este servicio de categoría. Se me devolvieron todas las categorías. Y luego nos suscribimos. Y entonces vamos a tener las categorías de respuesta. Por ejemplo, se obtiene una respuesta. Y luego vamos a definir una variable o un miembro de la clase. Lo estamos llamando categorías. Tendrá una categoría de tipo y será array tan bien inicializado como una matriz vacía. Y luego vamos a asignar estas categorías variables a nuestras categorías de respuesta. Por lo que tenemos aquí la respuesta se pone. Entonces después de eso lo vamos a usar en el front end. Si recuerdas, tenemos la columna cuatro categorías. Entonces voy aquí a tener, por ejemplo, H4, y voy a decir aquí categorías. Para que puedas darle un título en la parte superior. Y luego voy a usar el prime end la casilla de verificación. Como ven aquí, tenemos componente NG primo, que está usando como casilla de verificación. Entonces podemos usar eso también. Entonces usemos ese básico como éste. Por lo que en primer lugar, podemos copiar esta parte en las fuentes. Podemos tener aquí un div, y esto tendrá un campo, y tendrá un ID de entrada de modelo NG. Y voy a ver cómo podemos preparar eso. Entonces vamos a tener aquí en el campo mismo. Pero la casilla de verificación P no es importante porque necesitamos importar el módulo de casilla de verificación a nuestro módulo de productos, no al módulo de aplicación porque tenemos ese componente dentro del módulo de productos. Entonces vamos a importar eso también. Al final de sus importaciones, voy a decir como módulo de casilla de verificación. Y este módulo de casilla de verificación con vienen de la casilla de verificación Prime NG. Por lo que también podemos importar aquí, Importar y decir módulo
de casilla de verificación de prime y g slash checkbox. Por lo que estamos teniendo ahora ese módulo checkbox. Y si vamos a la aplicación, veremos que aquí ya no tenemos el error. Entonces ahora vamos a usar esta casilla de verificación y vamos a recorrer las categorías. Por lo que de nuevo, necesitamos tener aquí NG cuatro, voy a decir n 24 y esta categoría líder MD4. Entonces voy a recorrer todas las categorías. Por lo que yo diría que categorías de categorías que he definido previamente. Entonces primero, diré que esta casilla de verificación tendrá, será binaria, como verdadera o falsa. Y lo hará, o lo será el ID, podemos ponerlo como entrada. Por lo que podemos poner aquí categoría dot ID. Por lo que tendré, la entrada tendrá este ID, y luego podemos dar como etiqueta no comprobada, pero podemos dar nombre de punto de categoría por ejemplo. Por lo que en este caso tendremos este nombre de punto de categoría mostrado como una casilla de verificación. Y aquí para, estaba aquí para binario. Por lo que necesitamos cambiarlo a la categoría ID. Entonces en ese caso, tendremos aquí NO id de entrada como lo era antes binario. Será la categoría ID. Por lo que los cuatro, por lo que al hacer clic en la etiqueta, se marcará o desmarcará la casilla de verificación. Entonces aquí tenemos que decir también, dame la identificación de categoría. Entonces después de guardar eso, vamos a la aplicación y veremos si tenemos todo bonito. Tenemos ahora las categorías listadas como casillas de verificación. Entonces de esta manera, vamos a crear nuestro filtro, que veremos en la próxima conferencia.
150. Filtrar productos por categoría: De acuerdo, ahora en esta conferencia vamos a filtrar por categoría. Entonces si voy a mi demo que ya he preparado, quiero mostrarte cómo voy a filtrar, como ves aquí, cuando hago click en Más, mientras veo solo móvil, pero cuando hago clic así en belleza, entonces voy a tener una belleza y un móvil juntos. Entonces en este caso, necesitamos algo como combinar todas estas categorías ID, y enviarlas al back-end. Y el backend responderá conmigo con esas categorías ID para esos productos. Por lo que volviendo a nuestra aplicación, vamos a implementar primero algo. Cuando haga clic en esta casilla de verificación, algo sucederá. Entonces hagámoslo. Entonces en primer lugar, vamos a la plantilla y veremos que tenemos aquí casilla de verificación y tenemos aquí algún error. Este es el modelo NG no se conoce propiedad de checkbox pico. ¿ Por qué? Porque necesitamos importar también formas Módulo, foros módulo incluyendo el, por
supuesto el modelo NG. Por lo que tenemos aquí formularios módulo. Y en ese caso el error desaparecerá. De acuerdo, ahora ya tenemos esa multa. Entonces lo que vamos a hacer es en cambio. Entonces cuando cambie esta casilla de verificación, dice, entonces vamos a filtrar. Entonces voy a tener aquí un método que se llama onchange. Y se viene como propiedad o propiedad de salida de esta casilla de verificación. Entonces vamos a bajar esto. Ya no lo necesitamos así para tener más espacio. Y ahora voy a decir onchange, vale, filtro de categoría. Por lo que tenemos aquí filtro de categoría. Y voy a definir este método. Entonces vamos al archivo TypeScript. Y vamos a tener aquí público o directamente método, que se llama filtro de categoría. Y ahora tenemos que consola log como algo. Por ejemplo, digamos console.log filtro de categoría, por ejemplo. Para estar seguros de que todo está funcionando bien. Por lo que tengo aquí filtro de categoría. Voy a mi aplicación, abro de nuevo la consola y verifico si estamos teniendo perfecto. Por lo que tenemos filtro de categoría. Como ven después de agregar el modelo NG, estamos viendo que todos se revisan. Uno, tengo un cheque. Esto se debe a que he definido una variable para cualquier modelo. Entonces esto, cuando esta variable sea verdadera, todos ellos pasarán, como todas estas casillas de verificación que se generan en este bucle MD4 están siguiendo esta variable. Entonces necesitamos algo separado. Tenemos que especificar eso para cada categoría. Entonces para eso, necesito crear para cada categoría algún campo que se llama comprobado. Entonces si este campo está comprobado o no. Entonces podemos hacer eso también cuando vamos al modelo de categoría o cuando digo,
por ejemplo, punto de categoría comprobado. Pero voy a obtener un error aquí porque no hay campo en categoría llamado comprobado, por lo que tenemos que añadir eso. Pero en este caso, veo que estos comprobados serán para cada categoría verdadero o falso. Entonces para explicarlo más, hagámoslo. Entonces, en primer lugar, voy a definir este cheque. Voy a ir a los modelos que hemos definido previamente. Por lo que tenemos aquí categoría y en esa categoría voy a tener comprobado. Y será opcional con un valor booleano. Entonces cuando vayamos aquí, ya no tendremos este error. Y luego en la categoría pie de página, voy a mostrar las categorías. Entonces en general, Así voy a decir aquí, consola log esta tercera categorías. Por lo que tenemos aquí a esta carga categorías. Entonces no quiero sólo ver que todas las categorías en cada click de casilla de verificación que tengo aquí. Entonces vamos a cerrar esto también. Y ahora cuando hago clic en cheque, veo que todos están revisados porque no guardé. Siempre me olvido de ahorrar. Entonces volvemos de nuevo a la aplicación, se vuelve a cargar. Entonces cuando haga clic en el móvil, por ejemplo, iré aquí a este registro de consola y comprobaré más mientras y lo abriré. Y voy a ver comprobado a través. Esto es muy bueno. Pero aquí, si voy a esta categoría que se llama la belleza, no
tengo ese campo comprobado totalmente. Y ahora eliminemos todo, cerremos esta parte o quitemos la consola y desmarquemos el móvil. Entonces cuando los reviso quieren mientras y luego voy aquí, voy a ver checado es falso y los demás lo son, no tiene nada. Entonces de esa manera, no
puedo decir que yo o yo podamos filtrar en función de qué lista o qué categorías se comprueban. Y luego puedo conseguir sus ideas y luego enviarlas al backend para conseguir los productos filtrados. Entonces tenemos que traducir a este perro. Entonces, en primer lugar, necesito obtener sólo las categorías filtradas o seleccionadas. Cómo puedo hacer eso. Por lo que voy a categoría filtro. Vamos por aquí, volveré a llamar que consiga productos, pero con algunos filtros. Entonces con ideas de categorías que quiero pasar al back-end. Pero antes de eso, hagamos, por ejemplo, una lista de identificadores de categorías seleccionadas. Por lo que podemos tener lista de categorías IDs. Entonces en el filtro de categoría, voy a tener una constante. Por ejemplo, yo lo llamo categorías seleccionadas, por ejemplo. Y en estas categorías seleccionadas
, serán estas categorías de puntos. Por lo que no se dan cuenta de cada clic cuando haga clic en Filtro de categoría, esto se ejecutará. Por lo que las categorías seleccionadas, voy a filtrar, filtrar categorías. Entonces, cómo voy a filtrar esto es filtrar matriz o vamos a filtrar la matriz. Entonces en ese caso, va a filtrar y devolver para mí sólo las categorías que se revisan, que ha sentido campo comprobado a través. Entonces, ¿cómo podemos hacer eso? Por lo que voy a decir aquí filtro y este filtro, me
va a volver o puedo obtener de él categoría, Categoría uno por uno. Y con método de flecha directamente, diré volver para mí categoría, que se comprueba. Entonces cuando son categoría se comprueba, luego devolverlo y luego ponerlo en categorías seleccionadas. Entonces después de hacer eso, vamos a la consola registremos las categorías seleccionadas para ver si realmente estamos consiguiendo solo las categorías seleccionadas. Entonces vamos aquí, registro de consola. Me gusta usar registro de consola. También puedo usar un depurador, pero me gusta el registro de consola porque no puedo ver los resultados en vivo frente a mí. Entonces si quieres, entonces puedes usar el depurador también. Entonces, pero ahora tenemos aquí las categorías seleccionadas. Ahora voy a dar click en móvil. ¿ De acuerdo? Yo sólo tengo el móvil. Eso es muy grandioso. Entonces vamos a limpiar de nuevo, haga clic en belleza y computadoras. Tendré tres artículos revisados. Pero no conseguí todas las categorías, lo cual es tan bueno. Y si revisas aquí, los
verás revisados a todos. Y cada vez que hago clic en cheque, he reducido de nuevo las categorías. Por lo que ahora son dos. Tengo móviles y computadoras solo comprobadas. Eso es muy bueno. Por lo que ahora necesitamos no sólo categorías seleccionadas que veas aquí, estoy regresando toda categoría. Yo quiero devolver sólo el DNI. Entonces en ese caso, tenemos aquí, el filtro está regresando para mí array. Entonces, como ves, estamos devolviendo array aquí. Por lo que puedo mapear a través de esta matriz y darle de nuevo como alguna forma nueva. Por lo que voy a decir como de nuevo categoría, pero no categoría en sí o devuelto para mí, pero regresaré para mí solo la categoría y la identificación. Por lo que en ese caso, obtendría sólo las identificaciones de categorías en categorías seleccionadas. Entonces intentemos eso otra vez. Entonces iré aquí, móvil. Entonces tengo esa idea de computadoras de categoría móvil, vale, tengo dos identificaciones. Casa, linda, tengo tres identificaciones. Por lo que en ese caso, estamos seleccionando o recogiendo las ideas de categorías seleccionadas. Ahora necesitamos pasarlos a la API y
devolver los productos que se asignan con esas categorías. Y si vamos al cartero, si recuerdas, pasábamos al backend las categorías como params de consulta. Entonces cuando envíe una solicitud con para conseguir que sus productos eran y cuando esta solicitud tenga categorías o categorías ideas, entonces se filtrará para mí en base a las IDs que se pasan en esa solicitud. Por lo que podemos hacer eso fácilmente. Entonces puedo tener aquí en el hombre, las categorías o podemos tener su clave, que se llama categorías. Si te acuerdas, hemos creado eso. Y los valores serán las categorías separadas por coma. Por lo que podemos tener esas categorías también. Entonces podemos ir aquí, por ejemplo, podemos recoger el primero e ir de nuevo al Cartero. Y podemos pasar, por ejemplo, vamos a conseguir uno ahora. Entonces tendré los productos, no todos ellos. Tendré sólo los productos que tengan esta categoría. Entonces cuando haga clic, voy a conseguir, consiguiendo goodie de los teléfonos. Entonces tendré productos o dos productos que son teléfonos exactamente como lo tenemos en el front end en la demo. Entonces si paso otra categoría, como por ejemplo, si pongo coma y luego vamos a conseguir la categoría de otra. Por lo que podemos ir aquí de nuevo a Cartero y luego pasar con coma, otra categoría. Entonces conseguiré dos o muchos productos perfectos en base a categorías seleccionadas. Por lo que en ese caso, necesitamos ajustar nuestro servicio de producto para obtener también o categorías pasadas a través de él al backend. Entonces cómo podemos hacer eso en el front end. Por lo que después de filtrar o filtro de categoría, necesito volver a obtener los productos. Quiero volver a llamar a esto, y luego actualizaré el producto en sí. Entonces, ¿cómo podemos hacer eso? En primer lugar, eliminemos este registro de consola. Y entonces diré aquí que me llaman este producto de punto u obtener productos, pero con categorías filtro o categorías seleccionadas. Entonces aquí ya tenemos array de categorías seleccionadas, array de identificadores, y lo vamos a pasar aquí. Por lo que necesito agregar también a este parámetro de método, que serán categorías, por ejemplo, categorías
seleccionadas, o podemos llamarlo categoría es filtro. Por lo que podemos tener aquí categorías. Filtrar. Y esta categoría es filtro tendrá, por ejemplo, opcional y será string, array de cadenas porque hemos filtrado nuestras categorías y estamos devolviendo sólo el ID, como recuerdan. Por lo que ahora tenemos el filtro de categorías. Necesitamos ahora pasarlo a nuestro servicio de productos. Por lo que necesitamos ir a buscar productos y luego a este filtro y luego enviarlo al backend. Por lo que el filtro de categorías es indefinido en este método. Por lo que necesitamos acudir a este método en nuestro servicio de producto y ajustados para aceptar también obtener el filtro de golosinas. Y este filtro de categorías será array de cadenas. Por lo que podemos tener también opción de no destruir esos buenos productos que creamos en la aplicación del panel de administración. Por lo que aquí lo tenemos opcional. Entonces cuando pases algunas categorías, entonces, de acuerdo, te dará los productos filtrados. Pero si no pasas nada, entonces te dará producto entero. Por lo que el tipo de este campo será cadena, y sería array de cadena. Por lo que ahora vamos a pasar esta solicitud HTTP. ¿ Cómo podemos hacer eso? En primer lugar, necesitamos definir, por ejemplo, variable que se llama params. Aquí estoy usando plomo, no const porque voy a cambiarlo en las siguientes líneas de su código. Por lo que este será un nuevo params HTTP o HTTPS letra pequeña. Por lo que se trata de bombas provenientes de Angular y esas que puedes llamarlas desde biblioteca angular de núcleo o biblioteca HTTP. Entonces este params, los vamos a pasar a su petición, exactamente cómo lo hicimos con Cartero, cómo estoy busing aquí, consulta params. Y en el front end, cómo podemos pasar eso, estamos usando params HTTP. De acuerdo, aquí tenemos las palmas están separadas por coma. Por lo que necesitamos hacer lo mismo también. Entonces vamos a comprobar si hay filtros de categorías. Entonces podemos decir si las categorías filtran como tenemos categorías filtro pasado para no destruir así que te dije la aplicación del panel de administración. Entonces diré que los params serán params dot la banda. Aquí es necesario anexar un parámetro que se llama categorías. Exactamente como lo hicimos con un Cartero. Entonces aquí tenemos categorías. Y entonces estas categorías serán ¿qué? Serán categorías filtro, que obtuve del front-end o del usuario, o de las casillas de verificación. Estará conteniendo las categorías ID, pero es array. Por lo que necesitamos unirnos a esta matriz para ser una,
como por ejemplo , así, para ser ID o ID de categoría coma otra, coma otra. Entonces es muy sencillo. Puedes unirte a una matriz de cadenas diciendo esta matriz dot join. Y luego puedes especificar a qué quieres unirte en base a coma, en
base a punto o en base a cotización. Entonces sólo tienes que decir coma. Por lo que en ese caso, esas categorías tendrán la forma de esto. Entonces guardamos eso y guardamos también aquí. Entonces vamos a comprobar si realmente estamos haciendo las cosas correctas. Entonces quiero, por ejemplo, que, por
ejemplo, la consola registren los params. Entonces podemos tener aquí consola dot log, y luego podemos pasar los params. Entonces, y ahora voy a la casilla de verificación de la aplicación, una categoría ,
vale, tengo aquí actualizar un param de matriz, y tenemos un patrón. Entonces si vas a aquí encuentro encoder, tenemos el param ya está definido. Entonces de nuevo, si hago click, obtendré también el parche HTTP. Están delimitados dentro de los params HTTP, los cuales se enviarán sobre su solicitud. Te mostraré cómo puedes ver la solicitud es Br cosas o indicaciones o no. Pero por ahora, vamos por el camino correcto. Entonces seguro que estamos pasando las categorías o
las categorías ID para conseguir productos y lo estamos pasando para obtener servicio de producto. Y este buen producto por servicio devuelto para mí, los productos. Pero ahora la petición como ven aquí. Entonces si hago clic en, por ejemplo, aquí, hago clic si voy de nuevo a la red. Entonces, intentémoslo de nuevo. Limpiemos esta red. Doy click aquí, estoy enviando como recuerdas, una solicitud. Entonces no estoy viendo nada. Tienes que estar seguro de que no sólo tienes como un tipo. Estás filtrando por un tipo. Quiero filtrar todo para poder ver todas las solicitudes. Entonces hago click en Más vino, vale, llego a productos como ves aquí. Y este producto solicita primero, que está pasando por el backend y no cargado con ningún parámetro. Por lo que necesitamos cargar algunos parámetros o patrones de consulta a esta solicitud. Entonces aquí tendremos un signo de interrogación categorías, y luego las categorías estarían separadas por coma. Bueno, podemos hacerlo de manera muy sencilla cuando volvamos a la solicitud GET. Y entonces voy a pasar objeto. Recuerda no los params directamente, como no puedes decir, Vale, jefe para mí los params lo sepan o no, tenedor funciona para ti. Necesitas pasar objeto y este objeto, la única clave del mismo se llamará params. Y luego pasas la variable de params, que creamos aquí. Entonces eliminemos este registro de consola y volvamos a nuestra aplicación, recargada. Y luego vamos a, por ejemplo, la limpia esta consola limpiar todo. Voy a tener más bilis. De acuerdo, tengo categorías. Como ves en esa solicitud. Tengo aquí categorías y su contigüidad que seleccioné. Y además, si voy aquí, belleza, Vale, tenemos otra petición y buscarla. Es categorías de productos, de acuerdo, Niza. Tenemos aquí las categorías de productos y están separadas por coma. Entonces en ese caso, ahora el filtro está funcionando enviando al backend alguna solicitud con params de consulta. Y el back-end me está enviando de vuelta los productos que están bajo esas categorías. En cada click, hago clic aquí, estoy filtrando. Te estoy pidiendo el back-end, envíame de vuelta los productos que están teniendo esta categoría. Por lo que en este caso, hemos filtrado nuestra página de productos. Por lo que contamos con productos de filtros. Y en la siguiente conferencia, quiero mostrarles cuando haga clic en una de esas categorías en la página de inicio. Y salto aquí a la página de productos. Mostraré sólo los productos que están bajo esa categoría. Entonces no vamos a tener, no
vamos a ser redirigidos a la página de productos, pero vamos a estar bien usando el producto es componente, pero vamos a mostrar sólo la categoría en la que hemos clicado en su portada.
151. Página de la categoría: De acuerdo, en esta conferencia vamos a ver qué pasa si hago click en una de esas categorías y luego en qué va a pasar. Entonces para mí, diría que tal vez tú, cuando haga clic en una de ellas, iré también a su página de productos. Y entonces voy a mostrar sólo los productos que están bajo esa categoría en la que hice clic. Y por supuesto podemos hacer cosa adicional para que podamos ocultar esta barra lateral y también solo mostrar sus productos. Por lo que podemos hacer eso fácilmente. Yo les voy a mostrar eso en esta conferencia. Entonces, en primer lugar, necesitamos especificar una nueva ruta. Entonces en módulo de productos, si recuerdas, tenemos algunas rutas múltiples y una de esas rutas también será de cuatro categorías. Por lo que no podemos tener un nuevo camino aquí también. Por lo que podemos decir, podemos llamarlo categoría. Y esta categoría tendrá como parámetro como vimos anteriormente, que tenemos ID de categoría también. Por lo que tendremos la identificación de categoría aprobada con esta categoría. Por lo que en ese caso, también
vamos al componente de lista de productos. Pero en producto este componente, voy a comprobar si estoy recibiendo mi click de productos que viene de la navegación en la parte superior o de la categoría en el hogar. Entonces para eso, necesitamos ir al componente de lista de productos. Y luego vamos a tener la ruta activada. Por lo que también necesitamos suscribirnos a la ruta actual. Por lo que necesitamos saber en qué ruta estoy, por ejemplo, en productos o en categoría. Por lo que en este caso, voy a utilizar otro servicio que se llama sequía activada. Por lo que podemos llamarlo, llamar a este servicio como ruta, y luego llamar a ruta activada desde Angular. Y aquí voy a NDI en ello. Diré, chequea por mí, ya están fuera. Entonces aquí voy a decir esto sin embargo, trucha, a la que he llamado como servicio, luego params, luego suscribirme a esos params y luego comprobar qué biomas tengo. Entonces tenemos aquí params y luego voy a revisar y manejar esos. Quizás si hay en sus params categoría ID. Como especificamos en la definición de ruta, entonces traiga para mí los productos usando esa ID de categoría, que se pasa en esa URL. Por lo que podemos hacer eso fácilmente. Por lo que diré esta categoría de puntos o buenos productos, exactamente como lo hicimos anteriormente. Por lo que necesitamos cancelar este o eliminarlo totalmente. Vamos a quitarlo. Entonces no tengo nada aquí. Voy a conseguir los productos en base a su categoría la cual se pasa en la URL. Pero no puedo pasarlo como directamente. No puedo decir params dot categoría ID. Porque estoy pasando a este método. Buen producto, estoy pasando array, array de cuerdas. Entonces necesitamos poner esto dentro de matriz, así de simple. Por lo que sólo dirías array de params categoría ID. Por lo que será un ID de categoría, que dentro de una matriz, que se pasará para obtener productos. Y esto será como filtro de categoría. Y luego se agarrará los datos de productos de la categoría. Entonces en ese caso, vamos a tener sólo los productos que están bajo esas categorías, que hice clic. Entonces ya sabes, esto está en línea. Si, así, si hay esta cosa o esta variable, entonces haz eso. De lo contrario, basta con obtener productos sin ningún filtro, como conseguir todos los productos como lo hicimos anteriormente. Entonces aquí decimos este punto, consigue productos sin ningún filtro. Entonces en ese caso, estoy obteniendo los productos del backend en base a esa categoría. Agradable. Entonces, guardemos eso y probemos eso. Por lo que voy a volver a la página de inicio para que podamos dar click Inicio. Haga clic en móvil. De acuerdo, vemos que no está funcionando. Vamos a revisar nuestra consola. Notaremos que creo que no tenemos esa ruta hasta el momento que tenemos definida categoría de productos y luego ponemos la categoría ID. Entonces para eso en la página de inicio, si recuerdas, ponemos o en categorías banner, dijimos eso, vale, quiero ir primero dos productos y luego iré a categoría. Por lo que podemos definir esto como un niño de este camino. Podemos definir la categoría vasto como hijo de ruta de productos. O simplemente puedes ajustar las categorías Banner, como vimos aquí, para no tener categoría de productos de link router, podemos tener directamente esa categoría. Entonces cuando haces clic en Guardar, así ya no tengo productos. Por lo que cuando hacemos clic en Guardar, ve de nuevo a nuestra aplicación, voy a dar clic en una de esas. De acuerdo, sigo recibiendo error porque esto no está definido porque no guardé, nuevo su módulo de productos. Siempre está pasando conmigo. Por lo que necesito guardar el módulo de productos. Vuelvo a ir aquí, móvil, bonito. Tengo aquí dos productos solamente y con esa ID. Pero cuando voy a la página de productos, estoy recibiendo todos los productos. Pero cuando hago clic en una de esas categorías, obtengo sólo las categorías que están por debajo, estoy obteniendo sólo los productos,
lo siento, que están por debajo de esa categoría. Pero todavía tengo aquí esa barra lateral de categoría, que no es agradable, como de lo contrario necesitas hacerlo como comprobado. De lo contrario puedes u otra solución que puedes, por ejemplo, ocultarla totalmente. Hagamos como alguna cosa práctica con el escondite. Hacer que este componente sea dinámico como para aprender más. Entonces antes que nada, voy primero a no mostrar esta barra lateral totalmente. Entonces en ese caso, tenemos en la lista de productos, también
necesitamos comprobar si estoy en la página de categorías o no. Por lo que podemos definir a otro miembro de la clase. No podemos decir que es categoría. Por ejemplo, ordinate de página. Entonces no puedo decir como booleano, puedo definir eso como booleano. Y luego voy aquí a los params donde estaba leyendo los parámetros de la URL. Por lo que tengo ID de categoría de parámetro o no. No puedo hacer lo mismo. Por lo que podemos decir que ticker es un ID de punto estéril, luego establece esta categoría o cada página de categoría en true. Por lo que realmente estoy en su página de categoría. De lo contrario, ponlo en falso. Entonces, bien, ¿por qué estoy haciendo eso? Entonces voy a usar esta variable en la plantilla. Entonces aquí en la plantilla, cuando voy a la plantilla HTML, primero
quiero ocultar sus categorías. Por lo que diré aquí para su lista de categorías, que son casillas de verificación, que está en la columna 3 como la definimos previamente. Por lo que yo diría ng-if Es página de categoría. Entonces si tiene página agouti, entonces muéstrala. Pero no necesitamos es página de categoría. Tenemos que ocultarlo. Entonces no va a ir a la página entonces. Está bien. Yo lo hice. Será falso porque no va a demostrar eso. Pero cuando se trata de una página de categoría, entonces ocultará este componente. Por lo que ocultará aquí esta columna, que contiene las casillas de verificación para su categoría. Y aquí también, si ahorramos, intentemos eso. Y vamos aquí al frente. De acuerdo, Tenemos aquí las categorías. Entonces tenemos aquí el producto, lo siento, así que cuando vamos a la página de inicio, tengo aquí móvil. Está bien. Tengo dos artículos y cuando vaya a productos o voy a conseguir la barra lateral con los productos que los tengo aquí. Entonces es exactamente el mismo componente, pero se está comportando en base a la ruta que está aquí. Pero me gustaría mencionar también sobre el caso. ¿ Y si tenemos más de tres productos aquí en la línea? Yo quiero mostrarles lo que pasó. Es un bicho. Entonces necesitamos, por ejemplo, vamos a, por ejemplo, dos computadoras. De acuerdo, tenemos tres productos. Vayamos al panel de administración y volvamos a nuestros productos. Y hagamos un producto para ser como una computadora. Por lo que voy aquí a la computadora, tom con esto más salvaje y lo pongo como categoría de computadora. Actualiza eso, y vuelve a ir a nuestra aplicación en el front end. De acuerdo, y doy clic en computadora. Y como ves eso, vale, tengo producto extra aquí, pero está graficado hacia abajo, como tengo 123 y luego se fue un fideo. Porque aquí está vacío. Y esto está sucediendo cuando tengo esta columna sigue siendo con nueve columnas. Entonces inspeccionemos eso. Por lo que quiero mostrarles que hemos definido esto como nueve columnas. Ahora esa barra lateral de categoría está oculta, por lo que se empuja su contenido hacia la izquierda. Por lo que tenemos ahora esta cuadrícula de contenido. Tiene sólo nueve columna. Por lo que necesitamos también hacerlo dinámico. Entonces nosotros, terminamos, queremos hacerlo así como 12. Entonces cuando haga clic aquí o voy aquí, tendré esto como una columna de 12, por lo que estará totalmente en la pantalla. Por lo que podemos utilizar el mismo valioso que hemos definido previamente para cada página de categoría. Pero voy a usar clases diferentes aquí. En lugar de nueve columnas, voy a usar 12 columnas. Entonces, ¿cómo podemos hacer eso? Entonces solo dices aquí clase NG por esto, y lo defines como entrada para este div. Y aquí vas a definir un objeto. Y este objeto habrá beat call nueve cuando esté fuera de la página de categoría. Entonces cuando no es página de categoría,
así es la página de contigüidad no lo es. De lo contrario, puedes definir cualquier clase nueva. Podemos llamarlo. Se llamará 12. Y cuándo es la página de categoría. Entonces guardamos eso y vemos que cuando no va a ir a página serán nueve. Entonces como ven aquí, no es contigüidad. Es página de categoría, lo siento, y es 12. Entonces lo tenemos aquí, 12 columnas. Pero cuando voy a productos, todos los productos, lo tengo como tres columnas. Entonces lo tenemos como nueve columnas. Y aquí tenemos la columna de barra lateral existe, por lo que será como un nueve. Entonces en ese caso, también
tengo definición dinámica de clases aquí. Por lo que puedo jugar en la plantilla en el mismo componente basado en lo que vengo. Por lo que cuando vengo de esta página o de estas categorías, tendré ésta. Y cuando vengo de productos como aquí en alegación fundamental, no
tengo ningún parámetro aquí, ninguna categoría. Entonces voy a exhibir éste. Entonces pero tenemos pequeño tema aquí. Entonces si vuelvo a las computadoras, vemos que son una muy amplia, quiero mantenerlas, por ejemplo, en la línea
para que podamos usar lo mismo que hicimos con ng-class aquí. Por lo que podemos poner así es categoría, es página de categoría o no. En el, por ejemplo, éste donde estamos definiendo el ancho del artículo del producto. Por lo que también podemos quitar aquí esta clase
ng-o esta clase y decir cuando no es página de categoría, entonces hacerlo como por ejemplo, el 3, cómo era antes o cuatro. Pero cuando sea página de categoría, entonces hazlo como un tres. Entonces tendremos aquí cuatro columnas, porque 12 divididas por 3
, serán cuatro. Entonces vamos a guardar eso y refrescar para mí la aplicación automáticamente. Y veremos que aquí tendremos cuatro productos. Y cuando voy, porque aquí estoy en Categoría proyecto o ruta de categoría. Cuando vaya al producto, los
tendré aquí como tres también. Para que veas que tienes un área
dinámica, dinámica para jugar con tu componente usando de donde vienes. Por lo que utilizamos el mismo componente, lo cual es muy bonito tener que listar los productos en base a eso. Por lo que ahora tenemos más libertad para que el usuario se mueva dentro de mi aplicación.
152. Página Página de detalles de productos: De acuerdo, en esta conferencia vamos a ver cómo construir la página de detalles del producto. Entonces vamos a crear un componente el cual nos referiremos a un producto específico, sobre todo cuando estoy dando click en uno de los productos. Por lo que iré aquí y veré el detalle del producto en todos los detalles. Por lo que en primer lugar, necesitamos tener como algún título y alguna descripción que tendremos también. Están calificando. Vendrá de estrellas que van a utilizar del precio Prime NG. Y podemos agregar como alguna oferta falsa. Y además, vamos a sumar esta cantidad para que puedas seleccionar cuánto quieres comprar de este producto. Y entonces vamos a tener dos botones. Y además, vamos a tener la descripción que hemos creado como HTML en el editor aquí. Por lo que se renderizará igual exactamente como lo tenemos aquí en el front end también. Veremos cómo renderizar el HTML, que está escrito en el panel de administración, y también estará en el front-end. Vamos a crear una galería, así que no voy a usar algún componente listo. Vamos a aprender a construir una galería de nuestra mano. Y con esto, que te veremos en la próxima conferencia. Y quiero mostrarles que construir la galería IS o construir un componente de interfaz de usuario en general también es posible. Para que puedas usarlo en todas partes de tus aplicaciones. Por lo que podemos construir nuestros propios componentes como un ejemplo de galería y vol, calificación de
estrellas o por ejemplo, algún deslizador. Puedes construirlo por tu cuenta y ubicado en tus bibliotecas en tu proyecto. Entonces empecemos a construir esta parte aquí. Y en la próxima conferencia vamos a construir la galería. Entonces, antes que nada, echemos un vistazo aquí. Por lo que necesitamos una descripción del título, calificación, y luego algún precio y cantidad. Entonces, en primer lugar, quiero crear un componente que estará dentro de la biblioteca Productos, dentro de las páginas. Por lo que tenemos una página especialmente para detalle del producto. Por lo que voy a dar clic en Generar y luego tendré un componente aquí, y se ubicará también en páginas. Y entonces podemos llamarlo página del producto o detalle del producto. Entonces depende de ti. Entonces lo voy a llamar página de producto. Y la página del producto se ubicará en los productos del proyecto. Y además, vamos a utilizar las mismas opciones que estamos usando siempre. Entonces aquí tenemos selector de prefijos, tendremos aquí productos. Y por supuesto será la página del producto. Por supuesto que no vamos a usar selector porque vamos a leer directo, directamente el router a este componente. Y vamos a decir “saltar pruebas”. Y entonces vamos a generar este componente. Estamos seguros de que está en la biblioteca de productos. Perfecto. Vamos aquí otra vez y veremos que aquí se crea esta página o página de producto. Entonces lo que vamos a hacer, vamos, cuando haga clic en algún producto aquí en mi front end, entonces me redirigiré al detalle del producto. Entonces digamos, por ejemplo, que hacemos click en la imagen. Entonces si recuerdas, hemos creado artículo, producto, artículo. Este artículo de producto, tiene imagen, y vamos a poner el enlace sobre la imagen. Entonces cuando haga clic en la imagen, entonces me redirigirá al detalle del producto. Por lo que tenemos aquí el router. Entonces, ¿qué Router? Vamos a utilizar el enlace del router. Y entonces voy a usar el producto en sí. Por lo que vamos a tener aquí algún código como el producto en sí, ID de producto. Pero antes de eso podemos decir, por ejemplo, que quiero los productos. Al igual que podemos ponerlo dentro de una cuerda para que podamos poner producto slash. Entonces llévame a su página de productos. Y después de eso, agrégueme el ID, el ID del producto. Por lo que tendré aquí ID de punto de producto. Por lo que el producto entrante al artículo del producto, obtendré su ID y lo cortaré con sus productos. Entonces vamos a crear esta ruta en módulo de producto. Por lo que en el módulo de producto, hemos creado previamente categoría de producto y vamos a crear otro camino que se llama productos y luego el ID de producto. Por lo que tenemos aquí ID de producto. Por lo que en ese caso, cada ID vendrá después de la página del producto. Se renderizará en un componente de página de producto, no lista de productos, sino componente de página de producto. Por lo que hemos creado este componente de página de producto para este objetivo. Entonces vamos a probar eso. Entonces como ven aquí tenemos aquí toda la aplicación. Al hacer clic en la imagen, obtengo trabajos de página del producto. Entonces esto es exactamente lo que queremos y tenemos aquí el ID de su producto. Entonces vamos de nuevo a nuestro código y vamos a plantillas de este producto o de esta página de producto. Entonces vayamos a aquí y cerremos todas las demás páginas. Nos vamos a quedar aquí. Y por cierto, vamos a crear un archivo de estilo. Entonces si recuerdas, tenemos a los Estilos públicos en sus vidas. Producto que podemos crear también aquí, algún archivo para la página de productos. Entonces démosle un nombre producto Page, SCSS. Y luego en los productos, quiero importarlo también,
exactamente como lo hacemos siempre. Entonces tenemos dos página de producto, SCSS, entonces cada estilo que escribiré aquí, aquí, se importará a mi aplicación y la aplicación lo podrá ver. Entonces, en primer lugar, vamos a tener una grilla como siempre. Por lo que podemos envolver esta rejilla primero en un producto. Podemos llamarlo página de producto. Por lo que tenemos aquí página de producto. En el interior de esta página de producto, tendré una cuadrícula, así div, p grid. Y dentro de esta rejilla, tendré dos columnas. El primero será seis y el otro también seis. Por lo que tenemos columnas iguales. Entonces tenemos aquí P llamado busca, y vamos a tener otra que también se llame seis. Entonces tenemos ahora la grilla aquí. Vamos a localizar como algún componente de galería de UI y lo vamos a localizar más adelante. Por lo que comentaré esto. Y estamos poniendo aquí esos detalles del producto. Entonces, en primer lugar, voy a tener, por ejemplo, podemos poner aquí una clase. Podemos darle, llamarlo producto. Y este producto vamos a poner su detalle. Entonces, en primer lugar, quiero el título del producto, que vendrá de un nombre de producto. Por lo que veremos más adelante cómo vamos a conseguir su producto. Entonces para eso, necesitamos tener un archivo valioso en TypeScript para obtener el detalle del producto, si lo recuerdas. Entonces creamos ese servicio y lo vamos a agarrar de nuevo y lo vamos a utilizar aquí. Entonces tenemos aquí el nombre del punto del producto, y luego vamos a tener la descripción del producto. Por lo que lo pondré dentro de párrafo y le daré una clase, por ejemplo, producto. Y será descripción, por ejemplo, disco. Y luego vamos a poner la descripción del producto. Por lo que aquí vamos a llamar a toda la información sobre el producto. Entonces y bueno, tenemos que ir para ir por una calificación y otros componentes. Pero primero importemos el producto para que podamos traer el producto desde el back end y luego podemos usarlo aquí. Entonces, en primer lugar, voy a esa página de producto. Voy a llamar a ese producto servicio. Por lo que tenemos aquí orgulloso servicio de nuevo. Por lo que contamos con servicio de producto, que estará aquí. Y también vamos a usar un router porque vamos a obtener el ID de la URL. Por lo que tenemos aquí también, privada y ruta. Y voy a tener ruta activada, que me agarré, de la URL. Voy a agarrar los datos de la URL. Entonces diremos aquí, esta ruta de puntos, y luego me dan los params, que vienen desde el back end o a través de la URL. Y este params nos vamos a suscribir a ellos porque cada vez que cambiemos el ID, necesitamos suscribirnos y atrapar lo que está cambiando el ID para ver el producto correcto. Entonces podemos decir aquí params, nos dieron los fondos también en la suscripción. Y luego vamos a utilizar este params para usarlo en servicio de producto. Entonces tendremos aquí este punto. O vamos a hacer como si primero params dot ID de producto. Al igual que si tenemos un parámetro que se llama ID de producto, entonces vamos a utilizar este servicio de punto-producto. Todo lo que podemos decir en función separada, conseguir el producto en general como organizar solo nuestro código para ser más agradable y podemos pasar el ID del producto aquí. Entonces después de eso, vamos a otra línea y abrimos un nuevo método. Nosotros lo llamamos así obtener producto. Entonces como ven aquí, obtenemos producto y este producto recibirá el ID del producto. Por lo que podemos decir ID, será una cadena. Y luego vamos a utilizar este servicio de punto-producto y luego llegar al producto. Y consigue producto, si recuerdas es pedir ID de producto. Por lo que voy a dar el ID del producto y luego me suscribiré a él, y luego obtendré un producto de respuesta. Por ejemplo, aquí podemos darle este nombre y este producto de respuesta. Voy a usarlo para asignarlo a un miembro de la clase, que se llamará producto y tiene un tipo. Producto. Entonces vamos a definir a un miembro de la clase. Nosotros lo llamamos producto. Y esto tendrá clase que es tipo producto. Y volvemos a ir aquí y decimos este producto de punto. Será el producto de respuesta. Entonces eso es todo. Por lo que en este caso, estamos obteniendo el producto del backend. Vimos previamente cómo creamos esto en la aplicación del panel de administración. Por lo que recuerda siempre terminar la suscripción. Entonces si recuerdas, siempre te
estoy diciendo que estas toman hasta, y vamos a decir estos subs finales, como dos extremos y la suscripción y n subs será un tema. Por lo que podemos definirlo aquí también. Y será sujeto y tipo cualquiera. Y el tema igualará a un nuevo tema, que viene también de nuestro x js. Y luego necesitamos llamar a OnDestroy. Entonces tenemos aquí en la clase, necesitamos implementar también en este Troya. Y necesitamos, entonces nos dará error que
no estamos implementando el método NG sobre destruir. Por lo que también necesitas llamar a este método. Entonces cuando se destruye este componente, estos puntos n subs, lo siento, este punto. Y lo siento, necesito poner aquí los corchetes y luego este punto n subs, luego siguiente. Y entonces esto termina subiendo lo completo. Entonces en ese caso, cuando esto termine ayuda a completar, cuando se destruya el componente, esta suscripción estará terminada y no tendremos fuga de memoria. Perfecto, Ahora tenemos ese producto. Aquí. Tenemos todo lo que vamos a revisar. Al igual que si tenemos un producto, entonces mostrar para mí el detalle del producto para no tener ningún problema. Entonces aquí vamos a tener producto ng-if. Entonces si tengo producto, entonces mostrar la información del producto por mí. Entonces vamos a guardar eso e ir a ese frente. Veremos que conseguimos el producto en el que hicimos clic. Entonces si voy a otro producto, vería que también tengo este producto. Entonces vamos a continuar y darle estilo a las cosas exactamente como lo hicimos en su demo. Entonces voy aquí, como ven, voy a sumar ahora la calificación, la calificación, me gusta usar algo que viene de la energía Prime. Por lo que puedes buscarlo. Se llama componente de tasa. Y como ves tiene muchos usos. Para mí, voy a usar el discapacitado. Entonces, en primer lugar, necesitamos importar el módulo como lo hacemos siempre con cada UI o cada componente z prime. Por lo que quiero el módulo de calificación y luego lo importaré a mis módulos. Entonces no podemos poner aquí módulos, módulo de calificación, y luego vamos a averiguar cuál es bueno para nosotros. Entonces vamos a caer ejemplo, conseguir el que se llama NO cancela este y luego podemos desactivarlo. Entonces si vamos a la fuente aquí, se pueden
ver todos esos ejemplos. Entonces vamos a recoger este. Por ejemplo, podemos decir calificación, modelo y esta cosa. Entonces volvemos a ir a nuestra página de producto, y después de eso abrimos un div y podemos darle un nombre que llamamos como calificación de producto. Y luego colocamos este componente aquí. Por lo que la calificación que viene del backend será la calificación de punto de producto. Entonces podemos tener aquí la calificación de punto de producto, y luego lo vamos a usar. Entonces primero, no necesitamos esta cancelación. Tenemos que tener a los discapacitados. Entonces si recuerdas, hemos deshabilitado y luego lo ponemos a verdad como
sé que hay esta deshabilitada porque revisé la documentación. Entonces si vas aquí, verás ese ejemplo con discapacidad y sin discapacidad. A él le gustaba algo así como discapacitado. Él lo puso en verdad para que podamos hacer lo mismo. Por lo que el número de estrellas predeterminado será de cinco. Entonces r nada tema aquí, estamos en condiciones de continuar. Entonces tomemos eso en nuestra solicitud. Por lo que volvemos a ir a nuestra página o producto. Bonito, tenemos aquí. Están comiendo. Quitémosle éste. Veamos cómo podemos quitarlo. Por lo que tenemos aquí cancelar falso. Para que podamos dar canceles caídas. Lo volvemos a poner. Por lo que he puesto aquí formularios de Consejo y revisar de nuevo la solicitud. Perfecto. Nosotros lo tenemos así. Y ahora vamos a sumar otras cosas, que es el precio del producto. Entonces vamos a sumar el precio. Por lo que tendré aquí también vivo, que se llama precio del producto. Y este precio del producto contendrá lo siguiente. En primer lugar, vamos a tener el producto y que será como con una moneda. Entonces vamos a tener aquí producto. Precio de punto. Y vamos a tener esta pipa, que se llama moneda. Entonces vamos a exhibir el producto como un dinero. Por lo que en forma monetaria. Y entonces tendremos otro lapso que hacer como alguna oferta. Por lo que podemos tener clase y podemos decir precio antes. Podemos llamarlo el precio antes. Y esto podemos, por ejemplo, hacerla figurada. Por ejemplo, podemos decir producto de precio más 18 y será así moneda. Por lo que cada producto vendrá con un precio como este, precio
original y más 18, que se dejará así. Y podemos, después de eso, vamos a darle estilo para que podamos hacer esto grande y podamos hacer esto como una línea a través para que se pueda bajar como este es un precio antes. Y ahora vamos a tener la cantidad. Entonces la cantidad, como recuerdan, la tenemos aquí. Por lo que tenemos una entrada numérica en prime end. Voy a usar este número de entrada. Y como ven, aquí lo tenemos. Por lo que también es una buena manera de usarlo también. Tenemos que importar ese módulo numérica. Iré al módulo de producto,
importaré ese módulo numérico, y luego usaré este módulo de número de entrada en mis módulos. Y luego podemos comprobar este componente cómo se veía. Entonces este que se llama MAX significa límites, vamos y lo revisamos. Y tenemos éste, que será como con un botón para que podamos copiar toda esta línea. Y luego vamos aquí a la página del producto y podemos decir div dot product. Podemos darle como una cantidad. Podemos dar esta clase. Y entonces estamos colocando aquí estos número de entrada. Y también aquí vamos a no tener algo número. Vamos a tener variable de cantidad. Y esta variable de cantidad, debemos definirlo como miembro de la clase para leer el valor de la misma. Y luego lo vamos a utilizar para agregar el producto
al carrito con una cantidad específica la cual se agrega aquí. Entonces aquí será este UML seguro, botones. Podemos dar aquí nombre, cantidad y max Min. Y vamos a tener aquí también cantidad, mayúscula. Y entonces estamos colocando esto para que sea una cantidad. Por lo que cuando haga clic en la etiqueta, me enfocaré automáticamente en esta. Por lo que cuando haga clic aquí, estaré enfocado en la importación también. Entonces aquí funciona bien. Por supuesto que necesitamos más estilo como veremos más adelante. Entonces lo último que vamos a añadir son los botones. Y vamos a tener aquí otro div. Entonces tenemos aquí div, y lo llamamos como productos. Acciones. Y estas acciones, tendremos dos botones. primer botón será cuatro por ahora, y el segundo botón será cuatro To Cart y Add to Cart, voy a llamar método que se llama ad product to cart. Por lo que necesitamos implementar también el método aquí. Por lo que tenemos otro método en producto a carrito y lo tenemos vacío por ahora. No lo vamos a implementar. Ahora. Nosotros lo vamos a implementar cuando tengamos un carrito. Por lo que aquí hemos usado el botón, que viene también de prime end. Por lo que utilicé el módulo de botones, que llamábamos previamente para otros fines. Por lo que tenemos ahora aquí la etiqueta de botón y todos se usan también, la redondeada. Entonces si vas aquí a los botones, Tenemos aquí múltiples botones. Por lo que tenemos aquí también, redondeados. Por lo que no necesitas peinarlo y hacer algún redondeo. Se puede usar eso directamente. Entonces si vas a la fuente, verás aquí este botón redondeado. Entonces usé exactamente este. Por lo que así, pongo aquí el botón para Agregar al carrito. Entonces vamos a revisar eso en la aplicación, está bien, tenemos dos botones. Todo está funcionando bien y aprecio este botón y se ocupó de su hermano porque recuerdas que estamos usando esas gafas para empujar cosas entre sí, como Bim NG, margen, ¿verdad? Dos, entonces lo empujará de la derecha. Ahora vamos a darle estilo a esto. Por lo que hemos creado un archivo de estilo. Por lo que voy a peinarlo rápidamente. Tenemos, en primer lugar, necesitamos tener la clase de página de producto o la clase de producto. Por lo que tenemos aquí ese producto, como ves en nuestra página de productos. Si lo volvemos a abrir, tenemos aquí el producto. Por lo que necesitamos tener nombre del producto, descripción del producto. Por lo que olvidé dar dar clase aquí. Por lo que podemos escuchar dar un nombre también. Por lo que vamos a ir a nuestra descripción del nombre del producto, calificaciones, cantidad del premio, etcétera. Entonces vamos a darle estilo a todo esto. Entonces primero empecemos con el nombre. Para que ese nombre sea como No podemos darle tamaño de fuente
será como dos EM como podemos hacerlo de doble tamaño, será grande. Y entonces vamos a tener la descripción. Descripción será tan bien como el tamaño de fuente será como 1.4 EM. Y además, estamos teniendo su calificación. Por lo que están calificando va a estar en la forma en que ellos, lo
empujamos de arriba y abajo. Por lo que podemos decir margen 15 pixel 0. Entonces de arriba y abajo, dale mod 15 pixel de arriba y abajo. Y entonces vamos a tener el precio. Entonces primero, el precio será así. Por lo que tenemos precio del producto, ya
tenemos la clase, tamaño de fuente. Le damos, por ejemplo, 1, herramienta EM también, y font-weight, podemos hacerlo audaz. Por lo que podemos darle como botón de borde de
600 font-weight para todo el contenedor del precio. Por lo que podemos tener una línea debajo de ella para separarnos de los botones de acción, así sucesivamente y la cantidad. Para que podamos tener botón Borde, le
damos un píxel y sólido. Y entonces podemos dar una variable. Y esta variable tendrá una fase de alcantarillado, que los colores que estoy recogiendo de Prime NG 300, que será un gris. Y luego embolsando, vamos a estar dando algún relleno 25 pixel de arriba y abajo para empujar el contenido lejos de él. Entonces vamos a ahorrar y a ver qué está pasando y qué está pasando aquí. Entonces voy a la página, Vale, tengo aquí el título, la descripción, tengo aquí, la calificación. Y vamos a darle estilo a esta parte. Entonces aquí tenemos, si recuerdas, definido una clase y esta clase, que estaba aquí por precio antes. Entonces voy a darle estilo a esa también. Por lo que dentro del precio, vamos a tener el precio de clase antes. Será tamaño de fuente. Nosotros lo damos como un EM, como si fuera un poco más pequeño. Y luego margin-izquierda, por ejemplo,
para empujar un poco el contenido de la izquierda, podemos darle 10 pixel para no estar pegados el uno al otro. Y podemos dar un font-weight será como un 100 para que sea más ligero. Y podemos darle como un color más claro. Podemos decir var, como Seguro, fase. Será como gris, grisáceo. Por lo pronto la fase 500 es buena. Y luego por ejemplo, decoración de
texto como tener como decir línea a través. Por lo que podemos dar línea a través de esto como el precio anterior. Entonces podemos comprobar que si está funcionando bien. Ya ves, ahora tenemos una línea a través y tenemos el precio del producto. Yo diría que hagámoslo un poco más grande. Por ejemplo, aquí podemos tener, el precio puede ser 1.4 y podemos revisarlo de nuevo. Ya veremos, vale, tenemos precio más débil y luego tenemos el tamaño de fuente para esto no está tomando ningún efecto SI sé por qué, porque aquí tenemos 1 para EM, vale, Cuando pongo aquí también E M 1 M, entonces esto significa que será del tamaño del padre. Entonces aquí puedo decir que las Patentes son, o el tamaño o tamaño de fuente de esta clase será un EM, como exactamente el mismo de este tamaño. Entonces cuando lo pongo como 0 o 0, por ejemplo siete, entonces se hará más pequeño. Entonces porque EM es como un cómo decir que está relacionado, Está relacionado con su padre. Entonces cuando digo relacionado, entonces será del mismo tamaño si lo pongo una EM, del mismo tamaño de su patente. Entonces en ese caso, lo
vamos a hacer más pequeño y lo ponemos 0.7. Entonces si hago este más grande, como si se lo pusiera a, por ejemplo, esto también, nos hacemos más grandes pero con porcentaje que es más pequeño que el padre, porque lo tengo aquí también, 0.7. Entonces estas son las unidades EM, cómo están funcionando. Entonces ahora lo tenemos todo. Ahora vamos a darle estilo a esta cantidad. Entonces en primer lugar, se empuja un poco a la derecha y a la izquierda porque tenemos aquí con su clase, si recuerdas, tenemos algo así como una llamada P 12 PM D3. Por lo que podemos dar a esta clase, y esta clase es, vienen por defecto con relleno. Podemos darle también, ropa de cama 0. Entonces inicialicemos esto para ser relleno 0 y luego se empujaría exactamente. Entonces ahora vamos a tener la cantidad también. Entonces voy a tener esta clase. Entonces tenemos aquí después del precio, abrimos una nueva etiqueta y decimos esa cantidad, volvemos a dar, como margen arriba o margen derecha y abajo. Por lo que podemos tener margen 25 pixel y 0. Y entonces podemos darle la etiqueta que está dentro de esta fuente más grande, mayor tamaño de fuente. Por lo que podemos decir aquí a la etiqueta tendrá algo sólido etiqueta está mal. El sello tendría tamaño de fuente, que será para examen 1.2 M. Así que no podemos decir tan bien aquí 1 a EM. Entonces veremos que se hizo más grande exactamente como queríamos. Pero como ves, quiero esta naranja, como mis botones, tengo por todas partes botones con naranja. Entonces podemos tener también eso, para poder anular aquí los botones, que vienen de Prime NG. Entonces si inspeccionas este botón, verás que es un botón normal. Y este botón normal tiene una clase que se llama botón PI. Entonces, vamos a desplazarnos hasta que detectemos el color. Entonces si bajamos más, veremos el botón y tiene este color, por lo que podemos cambiar este fondo. Entonces vamos a atrapar a esta clase. Este es el beneficio de tener estilos públicos. De lo contrario no podremos cambiarlo fácilmente dentro del componente. Porque si este componente de brillo, entonces no podemos cambiar eso. Entonces decimos, como el color de fondo de este botón será el color primario, que he definido mi color primario. Y entonces frontera será 0 para no tener esta frontera azul. Y ahora será, supongo, naranja como ven aquí. Entonces es muy agradable. Ahora vamos a peinar también esos botones es muy sencillo. Simplemente estamos teniendo aquí, no cantidad, pero hemos definido una clase que se llama acciones. Para que pueda ir aquí y defino acciones. Y dentro de estas acciones tenemos también botón PI. Podemos copiar lo mismo aquí. Por lo que podemos tener también el color de fondo para ser naranja de este botón. Entonces no estoy seguro si tengo el nombre correcto de la clase. Por lo que podemos tener aquí cantidad. Y aquí hay una especie de acción no es acciones. Entonces tengo que poner S. Y ahora será, creo que naranja como ven aquí. Agradable. Entonces todo lo que tenemos ahora todo me acabo de perder una cosa, que es la descripción del producto. Entonces vamos a tener una nueva grilla. Por lo que una nueva rejilla en el mismo nivel. Entonces porque está consiguiendo todo el espacio bajo la galería de productos y la página del producto. Por lo que nuestra total falta de detalle. Entonces tenemos aquí otra grilla de pico y luego
vamos a dar un div ser llamado y luego 12, como se va a engañar. Y dentro de este div, voy a agarrar los datos de los datos HTML que vienen para el producto. Si recuerdas, tenemos aquí en el admin definir éste y se viene o guarda en la base de datos como HTML. Entonces, ¿cómo podemos agarrar eso? Entonces porque si voy aquí y digo, vale, imprime para mí producto que alcance descripción porque lo almacenamos en alcance descripción como recuerdas. Entonces aquí voy a ver que voy a conseguir código HTML, lo cual es horrible. Entonces necesitamos hacer algo por eso. Entonces la forma más fácil de hacer eso es definir un div. Y este div, puedes usar algún DAG, que viene con Angular llamado HTML interno. Y dentro de este HTML interno, la entrada, puedes decir dame producto punto alcance descripción de esa manera. Por lo que todo el contenido de este div se renderizará como HTML como se ve aquí. Entonces necesitamos como un poco más de estilo porque está anulado por los estilos de Prime NG o de mi aplicación. Por lo que podemos dar, por ejemplo aquí, también
me gusta algo así como producto y alcance descripción por ejemplo. Entonces, y vamos a usar esta clase también para que podamos escuchar sus acciones. Y vamos a tener afuera aquí porque no está dentro del producto. Entonces lo vamos a tener afuera aquí. Tendré producto y luego llegar a descripción. Y entonces voy a tener line-height, por ejemplo, será 1.6. Entonces en ese caso, voy a tener como algunos espacios entre todos estos artículos. Entonces vamos a Guardar también el HTML porque no lo guardé. Por lo que veremos que nos pusimos como algunos más bellos lines-altura aquí. Entonces de esa manera, tenemos la descripción de la descripción detallada del producto. Ahora lo que nos falta es una galería. Voy en la siguiente conferencia, crear un componente para la galería. Y luego vamos a agarrar los datos aquí y ponerlos o las imágenes y ponerlos dentro de esa galería. Pero antes de irnos, veo que tenemos error en la consola. Entonces si ves esa descripción lee de indefinido, así que quiero mencionar que por eso te dije que tienes que poner el producto ng-if. Entonces si hay un producto, entonces vamos a exhibir ese producto. Por lo que prefiero mover este a la parte superior, como a su contenedor div Como todo esto estará contenido aquí. Entonces si hay un producto, entonces mostrarlo. Si no, entonces no hagas nada. Entonces en ese caso, no estás recibiendo ese error aquí. Entonces todo esto se trata del producto. Como les dije, vamos a crear la galería en la próxima conferencia.
153. Componente de imagen de galería de productos: De acuerdo, Ahora vamos a continuar con nuestra página de producto y vamos a implementar la galería, las imágenes de galería del producto. Entonces si recuerdas que hemos
venido previamente con la solicitud de ley bala con todas las imágenes, que se llama campo de imágenes. Y tenemos la imagen principal donde estamos mostrando el producto en sí como ven aquí. Y también esa imagen de galería donde se almacenan las o las imágenes, donde se almacenan las imágenes de su galería. Entonces si quieres trabajar en este componente, vamos a no usar algo de Prime NG. Por supuesto prime NG también proporcionando algo de artillería, como por ejemplo aquí, este, si lo revisas, Se llama gonorrea y tiene una
documentación muy agradable como y puedes agregar imágenes y eliminarlas dinámicamente. Pero voy a usar en esta conferencia mi propio componente porque quiero mostrarte cómo crear componente de interfaz de usuario también y usarlos dentro de tu aplicación. Entonces, antes que nada, vamos a crear ese componente de galería en tu biblioteca de ojos. Si recuerdas, si vamos a elipse, tenemos una biblioteca de UI donde colocamos nuestros componentes de banner. Por lo que vamos a crear un nuevo componente, que se llama galería. Lo vamos a llamar galería de UI. Entonces primero, voy a generar un nuevo usuario de componente usando esta consola NX. Y luego lo vamos a llamar dentro de la carpeta de componentes. Voy a darle un nombre que se llama galería. Por lo que será como imágenes de galería. El proyecto será UI. Y lo mismo para todas las demás opciones que llevamos usando aquí. Entonces por eso te lo dije al inicio del curso, solo ten paciencia. sabrás todo, por qué está pasando, por qué estamos marcando esas casillas de verificación. Entonces ahora los conoces a todos. Por lo que el selector será Galería, como, así. Y porque está empezando con el nombre de la biblioteca, como dijimos, todos están en el ES vinculado. Entonces ahora vamos a crear este componente y ejecutarlo. De acuerdo, se creó su componente. Vamos a comprobarlo. Veremos que tenemos galería aquí y también se coloca en tu módulo y además, Está usando eso. También se exporta. De acuerdo, ahora vamos a seguir. Como ven en mi demo que ya he preparado, tengo la imagen principal y luego dos imágenes, y estoy dando click sobre ellas y esta imagen está cambiando. Entonces necesitamos algo como div, main, div donde estoy mostrando la imagen principal y aquí como alguna lista donde voy a mostrar múltiples imágenes. Entonces vamos allá, hagamos el trabajo de galería, y luego vamos a implementar eso. Pero primero, llamémoslo en nuestro componente. Entonces si recuerdas, aquí tenemos espacio vacío. Por lo que vamos a llamar a esta galería dentro de nuestros productos. Entonces vayamos a ese producto y páginas, página de producto. Y si recuerdas, comenté aquí afuera, la galería de UI. Entonces aquí ustedes, yo galería, lo
vamos a llamar. Y vemos que sigue dando error porque aquí no estamos usando el módulo UI. Entonces vamos a usar el módulo UI aquí. Módulo donde voy a exportar o importar. Se importará de la biblioteca UI. Entonces vamos a tener importación. Y luego tu módulo de ojo de. Y luego pondré el nombre de la organización, luego te diré, i. Y en este caso, voy a ver que mi producto aquí o Galería de UI, el error esta app todavía. Así que vamos a guardar todo y comprobar si nuestro componente está colocado ahí. Entonces vamos aquí. De acuerdo, obras de galería. Entonces vamos a llenar esta zona. Entonces vamos al componente de galería. Como recordé o como te dije anteriormente, presionas Control P y luego puedes saltar a cualquier componente que quieras escribiendo el nombre del componente. Entonces tengo aquí componente de galería, bonito, estoy aquí. Entonces es mejor como no buscar aquí. Por lo que ahora tenemos trabajo de galerías. Entonces vamos a crear ahora la plantilla. De acuerdo, para eso, voy a crear un div y darle una galería de nombres. Y esta galería contendrá imagen destacada, por ejemplo, o imagen principal del similar que tenemos en la parte superior. Para que dv esté dentro de ella, una imagen, y esta imagen tendrá una fuente la cual será la imagen seleccionada en la que estoy dando click. Y también las otras imágenes estarán debajo de él, como podemos tener aquí div. Y podemos llamarlo imágenes. Y esas imágenes, como les dije, una herramienta B lista para que pueda usar. El UL y LI. Entonces en ese caso, puedo decir UL y LI y dentro de eso después de presionar tab, si ves que estamos usando Emmet, entonces es auto completando mi código HTML. Y aquí no voy a usar para poner imagen como de esa manera, como aquí, imagen algo. Quiero mostrarte una forma diferente de poner imagen como fondo. Por lo que podemos poner un fondo de estilo de la imagen y luego se mostrará como la imagen este LI. Pero ahora pongamos como algo sólo para asegurarnos de que todo está funcionando. Podemos decir imagen. Y aquí tenemos una fuente y podemos, por ejemplo, llamar, lo llamamos imagen seleccionada. Y esta será una variable. Entonces vamos a tener esto como insumo. Por lo que necesitamos definir la variable o esta imagen seleccionada miembro de la clase dentro del archivo ts. Entonces puedo ir aquí y definir un miembro de la clase y llamarlo imagen seleccionada, y será una cadena. Entonces aquí vamos a usar eso. Guardemos todo para ver si nos va bien, como así tenemos ahora que no estamos haciendo ningún error, Así que no tenemos problemas en su código. Y debemos ver aquí, Ok imagen, pero no tengo imagen principal. Entonces hagamos una imagen estática. Por lo que volveré a pasar por aquí por el archivo ts y daré esto como algunas imágenes. Imagen. Por ejemplo, voy a la carpeta Activos de mi aplicación y luego llamaré a una imagen. Por supuesto, puedes llamar a cualquier imagen en Google. Entonces por ejemplo, voy a poner URL de alguna imagen aquí. Por ejemplo, estoy buscando imágenes se llama producto. Voy a ir a esta imagen por ejemplo, y voy a decir copiar dirección de imagen. Entonces si voy aquí y luego pongo la imagen, está bien, tengo la dirección de imagen aquí. Entonces vamos allá y colocarlo en nuestra imagen seleccionada valiosa. Entonces aquí hemos seleccionado imagen, y luego vamos a tener la imagen seleccionada, creo, en nuestra aplicación. Entonces después de guardar eso, vamos a nuestra aplicación, veremos que esta imagen se coloca aquí. Entonces si sabes que obtenemos entrada cuando estás usando como entrada, entonces tendrás fuente repentina como entrada, que viene de variable, que se define en el archivo ts. De lo contrario, será sólo una cadena y no te dará ninguna entrada aquí. Por lo que es mejor siempre o no mejor. Tienes que ponerlo como en este corchetes para decir que esto es entrada y voy a usar valioso, que se define en el archivo ts de componente de galería aquí. Entonces después de guardar eso, estamos seguros de que estamos obteniendo la imagen. Ahora vamos a recibir las imágenes, lista de las imágenes, cómo puedo recibir lista de imágenes. Entonces si recuerdas, trabajamos con los insumos. Entonces esta galería, creo que tendremos una entrada que se quita. Esta parte aquí. Nosotros decimos aquí, nada, simplemente realmente lo hacen vacío. Y si recuerdas, hablé de los insumos. Entonces input es algo donde voy a definir input para este componente. Por lo que este componente aceptará esa entrada y la usará para renderizarse en la plantilla. Por lo que podemos decir imágenes. Podemos decir que es array de string. Podemos tener una serie de socios, como no vamos a tener un solo camino. Tendremos múltiples imágenes, múltiples fiestas. ¿ Por qué? Porque quiero mostrar esta parte aquí, lista de las imágenes. Entonces vamos a usar estas imágenes aquí. Entonces después de eso, vamos en esta
LI, les dije que vamos a usar otra manera. Por lo que aquí voy a decir, lo
voy a dar como MD4. Entonces tenemos aquí NG cuatro. Entonces deja imagen como una imagen de imágenes, las imágenes cuál es la entrada que ya he definido. Entonces ahora después de eso, vamos a decir que podemos dar a la imagen como estilo atrevido. Como les dije, esta es otra forma de dar la imagen. Entonces les diré por qué estoy haciendo esto. Es solo para dimensionar. Por lo que quiero mantener tamaños fijos para que todas las imágenes sean iguales. Por lo que los estoy poniendo como un color de fondo o una imagen de fondo. Por lo que aquí podemos tener imagen de fondo. Por lo que puedes definir como esa imagen de fondo. Y entonces esta imagen de fondo tendrá URL como esta. Porque ya sabes, en CSS, estoy diciendo la imagen, imagen fondo como URL. Entonces en ese caso tenemos aquí URL. Y luego pondré otra doble cotización y plus, plus. Y en medio de esta clase, pondría la imagen que obtuve de las imágenes. Entonces por cada bucle, voy a tener una imagen y colocarla aquí para que la URL sea reemplazada o colocada aquí dentro de esta URL de imagen de fondo. Entonces en ese caso, tendremos nuestra imagen. Pero claro. Todavía necesitamos estilismo. Entonces vamos a darle estilo a eso primero para que podamos ver o qué está pasando. Entonces primero, como ven aquí, no
tenemos nada. Por lo que podemos tener aquí también guardado para no tener error. Entonces lo guardamos todo. De nuevo, no tenemos nada. Entonces ahora vamos a utilizar este componente,
este u i galería para ponerlo donde en la página del producto,
en la página del producto y dar esta entrada de galería, que se llama imágenes. Y estas imágenes serán las imágenes del producto. Pero primero, hagámoslo. Por lo que quiero mostrarles que esta solicitud, cómo viene del back end. Por lo que quiero aquí red, iré a DevTools y redes abiertas. Y vamos a refrescar la página y buscar solicitud, que está terminando con este ID porque yo, la solicitud está terminando siempre con nuestro ID de producto. Entonces como ven aquí, tengo éste. Entonces si voy a Preview, cuando haga clic en él, veré que tengo marca o todo sobre el producto. Ahora vamos a tener las imágenes. Si ves tenemos imagen que es imagen principal y luego imágenes, aquí están
múltiples imágenes, las
cuales vienen del back-end. Por lo que vamos a utilizar esas imágenes en nuestra galería. Por lo que necesitamos sólo decir producto, como el insumo que ya definimos. Decimos que las imágenes serán producto, como ese producto que estoy usando imágenes. Entonces como ves, ahora tenemos entrada el, nuestra galería dentro, como esta página de producto. Y estamos pasando las imágenes a esa entrada. Y la entrada o el componente, lo
estamos renderizando de esta manera aquí. Entonces vayamos aquí a brillar que veremos. De acuerdo, tenemos algunas cosas de las que oíste. Están totalmente desestilizados. Vamos a darle estilo. Entonces, antes que nada, vamos a crear un archivo de estilo. Entonces en los estilos públicos, tenemos biblioteca y luego tú, yo, y vamos a tener como galería también. Dot SCSS, lo siento, es CSS, así que tenemos que ponerlo como S, S, S, OK. Y ahora tenemos que importar eso. Por lo que decimos también importación para mí galería. Por lo que tenemos de esa manera y esta UI es importante también en cualquier tienda. Entonces cuando compras no puedes ver eso. Entonces ahora vamos a usar o darle estilo a esa Ghana. Por lo que puedes usar también a mi manera, yo voy siempre de esa manera. Por lo que separo aquí la pantalla para que aquí pueda ver qué clases usé. Por lo que voy a empezar con galería. Y esta galería contiene imagen principal. Y como ven aquí, y la imagen principal, por ejemplo, vamos a mantenerlo como por ahora vacío. Voy a tener también el estilo de las imágenes. Por lo que tenemos aquí imágenes. Y esas imágenes, como recuerdan, las
hemos definido como U L. Así que este UL será un flex. Por lo que tenemos que hacer un flex de pantalla para que se alinee uno cerca del otro, esos elementos o de esos aliados. Y lo inicializamos con margen 0 y cama 0
porque viene con unos valores por defecto del navegador o de la biblioteca. Entonces ahora tenemos este flex, y vamos a comprobar si realmente estamos poniendo cerca uno del otro, poniéndolos cerca uno del otro. Entonces ahorramos, vale, todavía no tenemos nada porque necesitamos decir el estilo de la LI también. Por lo que ahorramos y luego seguimos con el LI dentro de esta UL, tenemos un LI y estamos teniendo, por ejemplo, tamaño de fondo. Recuerda tenemos la imagen de fondo que ahí se define, por lo que la ponemos en portada. Por lo que cubrirá toda la zona que tiene un ancho de 100 y píxel, como si le voy a dar 100 píxeles de ancho y 100 de píxeles de altura. Y siempre elementos LI, necesitamos darles un bloque de visualización porque de lo contrario se mostrarán como un texto, textos en
línea, estarán cerca uno del otro. Entonces cuando les des bloque de display, se
lo dará o le dará un comportamiento como ese. Ahorremos y luego comprobemos que lo que está pasando en el front end. De acuerdo, sus dados, ahora los tenemos a todos cerca uno del otro. Entonces vamos a tener de nuevo, más al estilo. Estamos peinando las imágenes. No le dimos estilo, la imagen principal. Entonces tenemos que dar como algo margen, ¿verdad? Me gusta ponerlos lejos un poco. Demos 15 pixel. Por lo que podemos tener en ellos como separados. Ahora, es muy bonito. Ahora vamos a darle estilo a la imagen principal, cómo podemos hacerlo. En primer lugar, necesitamos darle un valor a esta variable. Entonces vamos a cláusula y luego vamos aquí otra vez. Y voy a darle un valor a esta variable. Por lo que esta variable debe ser, como recuerdas, alguna URL que viene del back-end. Entonces lo que tenemos aquí, sólo las imágenes. Entonces en ese caso, puedo mostrar las primeras imágenes o imagen del array de imágenes que viene de la página de productos. Entonces en ese caso, no puedo decir en mi energía on, en ella, esta seleccionada la imagen será este punto imágenes como estas imágenes, y tomar primer miembro de la matriz. Por lo que para ser más agradable, puedes comprobar si hay imágenes. Y estas imágenes tienen longitud, como si hubiera elementos dentro de esta imagen, entonces se le puede dar la imagen seleccionada. Y además, necesitamos revisar la galería como veremos más adelante si hay imágenes o no. Por lo que ahora tenemos estas imágenes seleccionadas se coloca aquí. Ya ves, tenemos ahora la imagen principal se coloca. Y entonces tenemos también esa galería imágenes debajo de ella. Entonces vamos a darle estilo a esto un poco. Vamos a usar un poco de estilo en él. Vamos al archivo de estilo para que div de la imagen principal aquí contendrá la imagen misma. Por lo que puedo alinear todo dentro de él al centro para que podamos dar texto alinear centro. Me gustaría hacerlo en el medio sólo para hacerlo un poco en el medio de la, de esta página o este div. Entonces después de eso, vamos a tener algunos valores para ello. Al igual que podemos empujar el contenido debajo de él, alrededor de 15 pixel. Y además, podemos hacer una altura, le
damos el escondite como 600 pixel máximo para no ser muy grande. Y entonces podemos darle estilo a la imagen dentro de ella. Por lo que recuerdas, tenemos la imagen principal en el div y dentro de ella hay imagen. Por lo que puedo acceder a eso directamente. Yo puedo decir que no, Oh Dios mío. Digo que la imagen EMG tendrá ancho máximo será del 100%. Entonces no quiero poner la imagen más que el tamaño. De lo contrario, se empujará dentro de este contenido. Por lo que quería tener máximo el 100% del contenedor padre, que es éste. Por lo que estamos teniendo un ancho máximo 100% y le damos altura 100%. Por lo que tener la altura de la patente como 600 pixel. Entonces vamos a guardar eso e intentar comprobar si lo estamos haciendo bien. Refresca, Niza. Tenemos todos los artículos son de estilo. Tenemos este 600 pixel y tenemos aquí esa galería imágenes. Entonces hagamos ahora los que están en el centro. Cómo hacemos las cosas en el centro, si recuerdas, estamos usando flex para que podamos decir justificar el contenido de su contenedor, que es la URL al centro. Entonces después de eso, veremos que después de cargar, tendremos centrados esos artículos. Entonces mira, tenemos muy gran galería y se selecciona la primera imagen, como esta esta esta seleccionada. Entonces hagamos ahora el click. Por lo que cuando haga clic en una de estas imágenes, voy a cambiar esta imagen. Por lo que es muy sencillo. Seguro que estás pensando igual que yo. Entonces aquí voy a hacer un evento. Podemos decir click. Este click tendrá como por ejemplo, cambiar imagen seleccionada. Entonces de esta manera, puedo poder cambiar la imagen para que no podamos
pasar tan bien la imagen que estoy seleccionando aquí. Entonces vayamos ahora y comprobemos eso. Y podemos crear este método. Simplemente puedo decir aquí en el archivo ts, definir aquí un nuevo método, que es el mismo que estamos llamando, y tiene imagen y será cadena porque estamos usando URL de imagen. Y entonces tenemos aquí que estos dos seleccionados la imagen será la imagen que obtuve del front end. Entonces vamos a renombrar eso a URL de imagen. Es mejor como tener más porque la imagen se está expresando como un dato. Entonces podemos hacerlo así. Por lo que la URL de la imagen aquí también. Para que podamos tener. Imagen seleccionada URL de imagen, seleccionó la URL de imagen. Aquí tenemos otra. Y entonces aquí tenemos imágenes sintácticamente. Y podemos decir también esta URL de imagen. Entonces para no tener nomenclatura confusa porque no estamos pasando la imagen misma, sólo
estamos pasando la celda, la URL de la misma. Entonces aquí estamos guardando eso, Guardar también, este componente aquí, y vamos a comprobar eso. Entonces marcamos no va a usar el constructor. Te mostraré que aquí tenemos flechas. Nosotros los vamos a arreglar a todos. Estamos usando una X, como verá más adelante. Entonces tenemos un dos, por ejemplo aquí se está quejando de eso. No tengo método dentro de esto porque está vacío, así que es mejor que lo elimines si no
tienes o si no vas a usar este método. Por lo que ahorramos y ahora estamos limpios de errores como errores gramaticales rotos. Entonces cuando hago clic, como ves, estoy dando click en la imagen y la imagen es este cambio. Es muy bonito. Y además, vamos a comprobar si tenemos entrada de imágenes. Por lo que es necesario comprobar si hay entrada de imágenes. Por lo que es mejor hacer eso muy fácilmente. Por lo que no se puede decir que get es su método como se puede definir un getter y decir tiene imágenes. Por lo que de esta manera, se puede definir este método como una variable que se puede utilizar como variable o miembro de la clase y usarlo en la plantilla. Y voy a decir volver para mí este punto imágenes de punto longitud. Por lo que quiero comprobar si tiene longitud más de 0. Entonces tengo imágenes en el componente. Por lo que tengo imágenes desde el front end o desde la página del producto. De lo contrario, me va a dar falso, entonces no voy a mostrar nada. Entonces es la forma en que hacemos eso. Entonces aquí tenemos ng-if. Entonces, si hay una galería, así podemos decir aquí tiene imagen. Entonces si tiene imagen, entonces mostrar todo el componente. De lo contrario, no muestres nada porque en ese caso, voy a romper a todo el personal porque estoy usando aquí imágenes, enlaces, y múltiples u otras cosas aquí. Entonces de esa manera, es mejor usar siempre este valioso. Entonces diré aquí, si este punto tiene imagen, entonces, y también, cuando esto venga como indefinido, entonces me va a dar un problema. Te mostraré así. Entonces vámonos aquí y voy a guardarlo todo. Entonces quiero mostrarles que cuando no tengamos imágenes en la matriz,
en la entrada, solo para ser un poco cuidadosos con las entradas, porque en ese caso tal vez provocarás componentes
rotos y dará errores de consola. Por lo que es mejor siempre estar seguro de que la entrada es realmente tiene datos o no. Y luego, sobre todo si se trata de una matriz y estás buceando en esa matriz y haciendo algunas cosas en la plantilla. Por lo que es mejor estar seguro de que tienes imágenes 3D y luego mostrar la plantilla. Bueno aquí. Porque ahora estoy preguntando si hay imágenes y luego si las imágenes están indefinidas, obtendré error. La longitud es indefinida o estás llamando longitudes de algo que está indefinido. Entonces en ese caso, obtendríamos un error. Entonces es mejor resolver esto como te mostraré ahora. Entonces vayamos aquí y demos matriz vacía de imágenes. No voy a dar nada. Por lo que no podemos decir nulo aquí o indefinido. Para que podamos ahorrar. Y entonces por supuesto no vamos a conseguir nada en la galería. Pero vamos a obtener un error en la consola. Estamos diciendo longitud de nulo, como se ve aquí en la galería componente ts T2 y T4. Entonces si vamos a esta galería componente ts 24, como ven aquí, estoy diciendo, Ok, hay un error aquí. Entonces por eso te dije que es mejor
revisar cada línea de código cuando estás usando, especialmente las entradas. Por lo que TypeScript te está dando la capacidad de comprobar eso poniendo un signo de interrogación. Y luego si esta indefinida, entonces te devolverá algún valor. Entonces intentemos eso otra vez. Ahorramos cuando esta imagen tiene valor nulo, entonces no continuará aquí y devolverá indefinido en general. Entonces ahora ya no me sale este error como ven aquí. Y también mi galería está vacía. Entonces garantizo que con este signo de interrogación, dije que, bien, si hay este indefinido, no continúen su condición, solo regresen indefinido. Y aquí, cuando esto es indefinido, entonces no se mostrará toda la galería. Para que veas, ten siempre cuidado con tus insumos. Entonces por eso estamos haciendo aquí cosas prácticas. De lo contrario, vas a estar en problemas. Tenemos mucho error en la consola y no sabrás de dónde vienen. El último arreglo que quiero agregar aquí que tenemos aquí tu galería está dando error, deseleccionar o debe ser prefijado por uno de los prefijos, bits azules. Entonces porque aquí en el archivo de pelusa ES dentro de la interfaz de usuario de la biblioteca, lo defino. De acuerdo, quiero ese atributo como bit azul específico a sus bits azules. Entonces arreglemos eso también. Nosotros lo hacemos como usted ve aquí. Y además, el elemento o el selector se prefijará como UI. Entonces cuando guardamos eso, volvemos a ir a nuestra galería. Por supuesto que tomará a veces gustarle algún tiempo para ser arreglado o se puede arreglar de inmediato como se ve aquí. Y así tenemos aquí el banner, tú yo banner también arreglé ese error. Entonces de esta manera, no estamos teniendo ningún error aquí. Estamos limpios. Pero de todos modos, los vamos a arreglar todos al final,
como les mostraré más adelante con una excelentemente. Entonces eso está todo por encima de la galería. Ahora, volvamos a poner el error, que orden son error que cometí aquí para que podamos tener las imágenes del producto. Por lo que ahora hemos visto toda la galería y terminamos totalmente la página del producto. que pueda ver cualquier imagen de producto, por ejemplo ,
ésta, y también cualquier otro producto que desee ver. Entonces en ese caso, es muy bonito. Hemos implementado plenamente la página del producto. Vamos a trabajar siguiente sección con su carrito. Vamos a agregar al carrito, agregamos esa cantidad y vamos a trabajar con la ONG RX para guardar los artículos del carrito. Y veremos cómo está cambiando aquí de inmediato.
154. Servicio de carrito en LocalStorage: De acuerdo, así que volvamos a nuestra estructura de diagramas. Necesitamos crear el componente de checkout, el componente tarjeta, y el componente de historial de usuarios, como vimos en el resumen. Entonces ahora lo que necesitamos primero para crear el componente de tarjeta, pero también el componente de tarjeta necesita un servicio de carrito. Y este servicio de carrito, puedes crear una biblioteca para eso. O puedes colocar también todas las cosas en la biblioteca de pedidos, que ves a la derecha. Por lo que a la derecha, la biblioteca más antigua será la responsable del carrito de caja y también como todos los usuarios ordenan y así tal vez podamos gestionar el pago. Entonces, antes que nada, empecemos con el carro. El carrito, voy a crear un servicio que se llama servicio de carrito, y se ubicará en la biblioteca de pedidos. Y para semana observada, el carro vamos a usar bien algas, los observables o NDR x. Así que les voy a mostrar los dos caminos. Voy a empezar con la fácil,
que es como observables. Por lo que podemos observar en el encabezado como se ve aquí, algo así como podemos ver siempre actualización en vivo en el carrito. Entonces por ejemplo, cuando hago clic en Agregar al carrito Aquí, Ok, se agrega también. Cuando vuelvo a hacer clic en, por ejemplo, vamos a la página de productos y hago clic a este producto. Veo que como ves está actualizado para que podamos ver cómo esta tarjeta se está actualizando en vivo. Entonces voy a usar ambas vías y DRX y observables. Pero ahora empecemos con fácil, que es observables. Por lo que volvamos a nuestro proyecto y código. Vamos a crear un nuevo servicio, que se llama servicio de carrito. Y se ubicará en orden servicio o biblioteca de pedidos. Por lo que podemos ir aquí y otra vez a la consola NX generar y tenemos servicio, y vamos a nombrar este servicio dentro una carpeta llamada servicios dentro de la biblioteca de pedidos. Por lo que podemos tener aquí Carrito de servicios. El nombre del proyecto será órdenes, y tenemos que saltarnos esa prueba. Actualmente no los necesitamos. Entonces después de eso creamos este servicio de guardia y vamos a sentir nuestro código ahí. Así que vamos a cerrar todo va dos labios y otra vez, órdenes
bajas y luego labios y servicios. Y aquí estamos en nuestro servicio de carrito. Por lo que el servicio de carrito tendrá, en primer lugar, como algunos, por ejemplo, inicialización para el carrito. Por lo que para la tarjeta, voy a usar el almacenamiento local. ¿ Por qué el almacenamiento local? Por lo que cuando el usuario vuelva a la tienda después de recargar la aplicación, quiero conservar siempre la tarjeta que llenó previamente. Por lo que quiero guardar todos los datos de los guardias que siente P4 para no perderlos. Entonces por ejemplo, cuando me muevo especialmente de página a página, o por ejemplo, cuando dejo la aplicación yendo a otro lugar, quiero mantener los datos de guardia igual aquí. El mejor modo es, como ven aquí, que podamos utilizar el almacenamiento local. El almacenamiento local tendrá, por ejemplo, el carro. Y recuerda que guardamos también el token JWT aquí. Y ahora vamos a salvar a ese Cartier también. Por lo que el carrito tendrá artículos y cada artículo tendrá ID de Producto y una cantidad de ese artículo. Por lo que en ese caso, puedo guardar el producto que se utiliza y también la cantidad del mismo. Y así, cuando quiera agregar algo a su carrito, de nuevo, veré que este carrito corte actualizado y tenemos la cantidad para el mismo producto. Por lo que no tengo que volver a agregar el producto, pero solo incremento su cantidad cuando el usuario haga clic en Agregar al carrito varias veces. Entonces en este caso, necesitamos tener algo así como almacenamiento local. Entonces cuando refresco mi página, voy aquí, refresco. Y aún veo mis artículos de carrito los cuales se encuentran en la página de su carrito. Y también estamos teniendo los en el almacén local. Algunas personas también usan la base de datos, están estancando la guardia de los usuarios en la base de datos. Pero aquí aún no estamos logueados, así que solo estamos perdiendo usando el almacenamiento local, que es como para público, para todos, cualquier usuario, solo
está ahorrando bajo el dominio, que es host local, o para ejemplo, mi e-shop dot com. Y esto podría each.com, tendremos almacenamiento local como ven aquí. Y este almacén local tendrá un carrito. Por lo que siempre que el usuario vuelva a la tienda, verá
que su tarjeta sigue ahí y no perdió los artículos del carrito. Entonces aquí no estamos obligando al usuario a iniciar sesión, Es solo público. No tenemos ningún forzamiento para el inicio de sesión. Entonces por eso lo estamos almacenando en el almacenamiento local, no en la base de datos. En ese caso, vamos a crear ese servicio basado en el almacenamiento local. Entonces, en primer lugar, ya que sé que todo o cada almacenamiento local necesitan inicialización. Necesitamos inicializar nuestro almacenamiento local con su carrito, como artículos de carrito vacíos. Por lo que podemos usar init, almacenamiento local. Podemos hacer un método que está en su almacenamiento local. Y entonces decimos como constante, podemos dar carro inicial, como podemos llamarlo carro inicial. Y esta tarjeta inicial tendrá, será como objeto, que contiene dos cosas, o una cosa que se llama ítems. Y esos artículos serán los artículos que quiero ubicar como de costumbre como vimos anteriormente, ID
del producto y la cantidad. Por lo que por ahora los artículos o la tarjeta de la NHL, el principio estará totalmente vacío. Y aquí diremos almacenamiento local en general, porque esto es JavaScript. Ahora estamos escribiendo, decimos set item y luego pongo el ítem de esa manera, digo guardia, o podemos decir como carro normal, que será el k, La llave aquí tenemos aquí c0. Y luego ponemos el valor, y el valor será tarjeta inicial. Está bien, bien. Estamos recibiendo un error aquí porque no es asignable al parámetro de cadena, porque no podemos asignar objetos para ser una cadena dentro de set item. El elemento requeriría que esto sea una cadena. Entonces, ¿cómo podemos hacer eso, como ven aquí, que estamos almacenando los datos, ¿de acuerdo? Array de objetos y todos estos datos. Podemos cambiarlos a cadena mediante el uso de JSON stringify. Entonces esto es como un método que se llama JSON stringify. Cambiará para mí este objeto a cadena y lo almacenará en el almacenamiento local como una cadena. Por lo que podemos hacer eso fácilmente. Entonces es como si tuviéramos un rayo que es o cadena JSON, y estamos almacenando los datos dentro de él. Entonces podemos decir constante, otra vez, otra constante. Podemos decir tarjeta inicial, mismo, pero no será carro inicial como objeto, será JSON. Y este guardia tendrá, usará esta clase o esta biblioteca, que está internamente en JavaScript. Y decimos JSON dot stringify. Así que haz este objeto como una cuerda y luego guárdelo en la guardia inicial aquí. Entonces después de guardar eso, vemos que, bien, todo está bien. No obtenemos ningún error. Pero la pregunta aquí, ¿quién va a llamar a esta función? Al igual que necesitamos llamarlo Sólo la primera vez cuando entré a mi tienda. Al igual que yo quiero aquí, ve el cliente al que va a entrar a mi tienda. Pero necesito de alguna manera inicializar un auto a un artículo vacío. Por lo que necesito inicializar su tarjeta con artículos vacíos al principio para un nuevo visitante que llegó al inicio a mi tienda por primera vez. Por lo que necesitamos llamarlo como primera vez y sólo una vez. No sólo como cada vez que voy a una página, necesito llamar inicializar, inicializar. De lo contrario afectará el desempeño. Entonces es mejor llamarlo de alguna manera, en algún momento una vez. Por lo que tienes una de dos opciones. Entonces si sabes que tenemos módulos y
vamos a utilizar el módulo de pedidos en el módulo de aplicación aquí. Entonces llamemos al módulo de órdenes en el módulo de aplicación de tienda de energía. Entonces iré a una tienda y luego módulo app aquí, que es como el componente raíz que podemos decir, o el módulo de ruta. Es el inicio de mi aplicación, el contenedor principal. Entonces digo aquí agregar módulo y luego llamo bien, o al módulo. Por lo que el orden es módulo se importará del nombre de la organización y el orden
es, depende de la biblioteca cómo especificamos el nombre ahí. Entonces ahora el módulo de órdenes, que es éste, se llama en mi módulo de aplicación. Guardemos eso aquí. Y ahora comprobamos. Por lo que necesitamos saber que cuando se llame a esto, entonces se puede inicializar el carrito. Por lo que esto se llamará por una sola vez,
sólo con una primera vez donde voy a utilizar el módulo ordenado. Entonces en ese caso, hay que estar seguro de que todos esos modulo realmente se llama Solo una vez. En el módulo de órdenes, puedo definir un constructor. Y cuando esto es oro o se crea este módulo de órdenes, puedo llamar al servicio de orden o Carter. Por lo que podemos decir servicio de carrito dentro del módulo que ves como
también puedes usar los servicios dentro del constructor de módulos. Entonces, y luego digo carrito de servicio punto inicializar tarjeta de almacenamiento local. Entonces como ven aquí tenemos aquí este método. Y voy a llamar al constructor de nuestro módulo el método que se llama carrito inicializado almacenamiento local. Entonces cuando guardemos, entonces se recargará mi aplicación y llamará al módulo de órdenes. Es decir, módulo se construirá como al principio porque es una clase. Entonces cada clase, cuando lo llamas internamente, Angular está llamando a este módulo de órdenes y crear un nuevo objeto del mismo. Y luego llamará automáticamente al constructor. El constructor tiene este método que está dentro del servicio de tarjetas. Entonces cuando vayamos a nuestra aplicación y
actualicemos, veremos que se crea el carrito. Entonces vamos a quitar este token de nuevo o como este almacenamiento local o todo el mismo. Entonces vamos a, por ejemplo, a la página de inicio. Entonces ahora no tenemos nada porque lo borré porque tenía su prueba que no estoy llamando al módulo de órdenes múltiples tipos. Entonces cuando vuelva a cargar la página, como cuando estoy llamando a mi aplicación por primera vez, entonces se creará el artículo del carrito con su valor en su almacenamiento local. Por lo que aquí garantizamos que estamos usando o creando la tarjeta sólo una vez. Y no se crea varias veces cuando navego dentro de mi aplicación. Pero también a veces tal vez usarías módulo de
órdenes en otros lugares como lo vas a usar. Por ejemplo, en tu aplicación, tienes páginas o por ejemplo, tienes otro módulo y vas a usar módulo de
pedidos porque necesitas algunos componentes de ahí, como vimos anteriormente. Y en este caso, te
hará un problema que esto se llame varias veces. Entonces en ese caso, es mejor llamarlo y encontrar algún lugar donde se llame o las cosas se puedan llamar solo una vez. Por ejemplo, te sugiero, el encabezado, como recuerdas al encabezado en mi aplicación se llama Sólo una vez. Por lo que tenemos aquí en la app más componente, tenemos cabecera ND Shoppe. Y este encabezado de Shoppe energético se llama Sólo una vez. Entonces para demostrarlo, te
mostraré como tendré aquí registro de consola. Por ejemplo, en el encabezado podemos decir. Y luego veremos que cada vez que navegue dentro de mi aplicación, voy a ver que, vale, cualquier encabezado se llama Sólo una vez. Ya ves que se llama Solo el tiempo donde he definido el encabezado porque está en la raíz de mi aplicación en su componente principal de la aplicación. Por lo que se llamaría sólo una vez, independientemente de que fuera o de los socios que estoy visitando. Esta es de una manera, otra forma que te mostré que puedes usar un constructor del módulo de Arthur si no estás seguro de que no vas a usar el módulo de órdenes varias veces. Por lo que aquí tenemos la inicialización de su carrito. Ahora vamos a llenar este guardia y ver cómo podemos poner artículos a este carrito. Cómo veremos en la próxima conferencia.
155. Añade productos al carrito de Añade al carrito de carrito: Bienvenido de nuevo. Ahora vamos a añadir artículos al carrito. Entonces si hago clic en este botón, Agregar al carrito, voy a agregar este producto con su id y cuántas o cantidad a la matriz de artículos, que se define en el almacenamiento local en su carrito. Entonces para eso, necesitamos agregar un nuevo método el cual también se agrega al servicio de carrito. Yo lo llamo set guard item y estará aceptando un artículo de carrito como lo definimos más adelante. Y este artículo de carrito será un modelo y me va a devolver
la tarjeta que me gusta siempre dar mecanografiados para todo lo que estoy usando, como string, number o incluso creo mi propio tipo. Entonces para eso voy a crear el carrito y el artículo del carrito. Por lo que vamos simplemente a los modelos que tenemos aquí o al artículo o podemos como bien definido carrito. Y como ven aquí, lo
definimos como una clase, por lo que podemos decir clase de exportación. Y esta clase se nombrará como carrito al principio, y tendrá artículos, y esos artículos serán tipo de elemento de guardia y matriz de artículo de Garth. Entonces en este caso, necesito definir también esta clase, diré clase artículo Garth. Y este artículo de Garth tendrá primero el producto en sí. O podemos decir ID de producto, que será más sencillo. Por lo que podemos darle este nombre y será una cuerda. Y entonces podemos definir la cantidad. Por lo que la cantidad de este producto dentro del auto. Por lo que será un número. Entonces para eso, Es mejor siempre dar esos artículos como opcionales. Entonces, cuando creas un nuevo objeto de esta clase, no te dará error donde no pases, por ejemplo, cantidad. Entonces en el mismo archivo, tengo dos tipos, carro y artículo Garth. Voy a usar estos tipos aquí. Por lo que solo presionamos el espacio de control e importamos el artículo del carrito y también el espacio de contorno o punto, me
va a dar el carro en sí. Por lo que ahora cuando pongo un artículo de carrito, quiero devolver el carrito en sí. Por lo que en primer lugar, necesitamos agregar artículo al carrito en el almacenamiento local. Hagamos eso. Entonces, en primer lugar, puedo decir que puedo conseguir el guardia actual que está dentro del almacén local porque voy a usar esos artículos y añadirles más artículos. Entonces, en primer lugar, necesito obtener la tarjeta actual. Entonces qué guardia tengo actualmente en el almacén local tal vez porque previamente he agregado algunos artículos, así que necesito conseguir el guardia actual. Y luego empujo a los artículos de esta guardia, el nuevo producto. Por lo que podemos hacer eso fácilmente. Por lo que en primer lugar, podemos conseguir esa tarjeta const de guardia, y esta tarjeta será tipo de guardia. Y luego podemos decir almacenamiento local, dot get u get item. Exactamente. Y ahora estamos definiendo o consiguiendo la cola que ponemos aquí. Por lo que quiero conseguir esta guardia. Entonces si ves que cuando usas varias veces esta constante es mejor definirla en la parte superior aquí. Por lo que se puede decir exportación, y podemos llamarlo como Guardia, artículo o llave de tarjeta. Podemos decir así. Y es mejor que la constante pueda ser mayúscula. Nos hundimos y decimos guardia y llave. Y este carro y llave estarán en el camino llamado como carro. Entonces de esa manera, estamos definiendo esta constante y que vamos a utilizar en toda nuestra clase aquí o en todo nuestro servicio. Entonces en este caso es mejor tener esta llave de tarjeta y corcel de ésta y en lugar de ésta. Entonces en ese caso no tendrás cadena codificada, que no es hermosa. Entonces es como si tuviera todo el carrito y como estos artículos. Y dentro voy a tener aquí empuje como el artículo de guardia al carrito. Por lo que podemos hacer eso fácilmente. Entonces, en primer lugar, tenemos que conseguir la tarjeta también. Si recuerdas, lo ponemos como un JSON o cadena de JSON. Por lo que tenemos que devolverlo para ser como objeto. Entonces en ese caso, no
bastamos para hacer eso. No es suficiente porque esto me devolverá una cuerda y esto
me dará un error porque está aquí diciendo que la tarjeta será como una cuerda, pero tiene una tarjeta. Por lo que estamos devolviendo una cadena y estamos definiendo que esta tarjeta tiene tipo de tarjeta, lo
cual está mal hasta ahora que es mejor que se analice este JSON. Por lo que yo diría JSON dot Parts. Aquí estamos regresando de cuerda a objeto, así que no tenemos que estringificarlo porque cuando ponemos elemento en ese Garth, lo stringificamos. Pero cuando queremos obtener el elemento del almacenamiento local, vamos a tener analizarlo como de cadena a JSON. Entonces en ese caso lo tengo como objeto y luego puedo acceder a elementos o a todos los miembros de la clase dentro de este JSON. Entonces aquí solo voy y tarjeta ISA puntos artículos que empujarían. Por lo que estoy empujando un nuevo artículo al carrito y le doy artículo de carrito. Entonces aquí tenemos nuestro artículo de carrito definido y empujado a sus artículos de carrito. Pero me está dando un error porque no le devolví la tarjeta. Otra vez. Yo quiero devolver la guardia actualizada. Por lo que podemos decir aquí, devolver el carrito el cual se actualiza con un artículo nuevo aquí. Entonces, en primer lugar, necesitamos llamar a este método como podemos llamarlo. Como dijimos, que vamos a dar click en este botón y añadir este artículo al carrito aquí. Entonces cómo podemos hacer eso, podemos ir a nuestro artículo de producto si recuerdas este componente que hemos definido previamente, para
que podamos buscarlo y decimos artículo de producto. Y aquí está. Por lo que podemos decir componente de artículo del producto. Y si recuerdas dentro de este componente de artículo de producto, tenemos botón. Por lo que podemos decir este botón onclick. Y podemos decir Añadir producto al carrito. Por lo que aquí, en ese caso, podemos agregar este producto al carrito. Por lo que necesitamos definir también este método. Entonces vamos a ese TypeScript de este artículo de producto y
decimos que el anuncio producto a carrito estará llamando al servicio de carrito. Por lo que necesitamos también llamar al servicio de carrito. Diré servicio de guardia privada. Y este servicio se importará del servicio de carrito. Pero como ven aquí, viene como el camino completo. Necesitamos algo así como un atajo, como tenemos que decir, como add. Y luego pongo nombre de organización y
diría qué biblioteca he creado el servicio, pero todavía me está dando error porque no exportamos los pedidos ni el servicio de carrito en el pedido su biblioteca. Entonces vamos al archivo de índice aquí. Por lo que hago clic en el archivo de índice dentro o en la biblioteca. Y digo exportación para mí también, no o su servicio, sino también el servicio de guardias. Por lo que podemos tener aquí servicio de carrito. Entonces aquí, cuando vaya al artículo de producto, no
tendré problema cuando esté importando ese servicio de guardia porque se definirá. Entonces ahora tenemos, cuando usamos este servicio de guardia, si voy aquí y uso ese servicio de tarjetas dentro de mi producto, no
tendré ningún problema aquí. Sigo recibiendo error porque debería ser o no hay orden. Y ahora vamos a nuestro método, nuevo, agregamos producto al carrito. Y luego decimos este producto o servicio de punto. Y luego habremos puesto artículo de guardia. Pero aquí necesitamos un artículo de carrito. ¿ Cómo podemos crear un artículo de carrito? Podemos crear un objeto, podemos decir const, y luego lo llamamos artículo Garth. Y este artículo tendrá un tipo de artículo de guardia, pero este artículo de guardia también creo que no se exporta. Por lo que necesitamos también ir a nuestro archivo de índice. Y con el fin de bibliotecar. Y entonces digo exportación, partimos de no superficies, pero necesitamos modelos. Tenemos que importar o exportar un nuevo modelo, que será el modelo GARCH que hemos creado. Por lo que en este caso, artículo de producto, biblioteca de
productos puede ver este artículo de carrito. Entonces podemos pasarlo aquí y borrar esta línea. Entonces en ese caso aquí se definirá mi artículo de carrito. Necesito crear un nuevo elemento de guardia. Entonces tienes artículo será ID del producto. Y este ID de producto será este punto-product dot ID porque tengo aquí producto de entrada, si recuerdas, estábamos pasando el producto o conteo a este artículo de producto y luego lo estoy recuperando. Y así puedo obtener todos los detalles del producto, incluyendo el ID y luego cantidad. Por lo que estamos en el artículo del producto, por lo que el usuario, cuando haga clic una vez en el producto o en el botón Agregar al carrito en el artículo del producto, vamos a agregar solo uno al carrito. Y luego pasamos este guardia punto dos. Artículo de salvaguardia, y todos estamos bien. Entonces vamos a guardar todo y recargar la aplicación. Espero que no consigamos ningún error. De acuerdo, aquí vamos. Entonces ahora tengo aquí el artículo de producto, si recuerdas, usamos el artículo de producto en productos de características y también lo usamos también en lista de productos. Entonces voy a añadir esto al carrito. Entonces cuando hago clic aquí, veo que el carrito aquí no se está actualizando. ¿ Por qué? Porque así en el servicio, cuando vas a su servicio de carrito, no
eres suficiente para empujar artículos aquí. También es necesario empujarlos de nuevo al almacenamiento local. En ese caso, necesitas de nuevo estringificarlo todo, como si tuvieras que volver a hacer estas líneas. Por lo que después de empujar esta tarjeta, se
puede decir como guardia inicial JSON o se puede decir guardia JSON. Y esto se estringificará a esta guardia después de que le empujemos este artículo. Y luego vamos a empujar a este guardia JSON usando esta llave de guardia para su almacenamiento local. Entonces hagámoslo. Por supuesto que vamos a refactorizar este método. Sólo te estoy mostrando los pasos, cómo podemos hacer eso. Por lo que voy de nuevo a la aplicación y luego Agregar al carrito. Veo que aquí se agrega el artículo. Vuelve a hacer clic, veo que se agrega el ítem. Doy click en IC, tengo ahora tres ítems. Entonces hagamos algo de refactorización. Entonces, primero pongamos esto en un nuevo método. Al igual que todos estos como barras JSON, LocalStorage, obtener artículo como el propio carrito. Pongámoslo en un método que podamos llamarlo conseguir guardia. Por lo que podemos decir conseguir carrito como en general. Y esto me devolverá el carro en sí, como carro como objeto, no guardia como por ejemplo, que datos JSON. Entonces en primer lugar, podemos decir, dame el like y de esa manera diría card json.Parse, pero podemos decir de esa manera, como yo quiero hacerlo más detallado, solo tú lo puedes entender. Entonces por supuesto puedes mantenerlo como lo hicimos antes, pero quiero detallar, así que podemos decir aquí guardar datos JSON, o podemos llamarlo auto cadena JSON porque necesitamos stringificar esta. Y luego defino constante, lo llamo de nuevo tarjeta. Y esta tarjeta, también será de tipo de guardia. Por lo que aquí no será tarjeta, será cadena. Por lo que obtenemos el artículo del almacén local. Me devolverá la cadena que está en el almacenamiento local con esa llave. Y luego lo consigo. Y entonces diré aquí, partes de punto
JSON, y luego resguardo cuerda JSON. Y aquí tendré los datos del carrito también. Y al final diré que regrese por mí esta guardia como objeto. Entonces aquí no tenemos que molestarnos. Simplemente decimos aquí, sólo dame una constante será Guardia. Y este carrito tendrá este punto get card. Entonces eso es simple. Guardamos todas esas líneas porque vamos a utilizar
así conseguir Garth varias veces en otros métodos como veremos más adelante. Entonces después de eso, empuja los artículos y luego resguarda de nuevo a JSON stringify. Y luego pongo el artículo dentro del almacén local y vuelvo a devolver el guardia. De acuerdo, después de eso, volvamos a nuestra aplicación y comprobemos si todo está funcionando bien. Está bien. Estamos agregando artículos a su carrito. Está bien. Pero con la adición, tenemos un problema que tú si ves que cuando estoy dando click en este artículo Añadir al carrito, es agregar el producto una y otra vez y otra vez. Tendré id de producto y se agrega varias veces. Necesitamos justo cuando haga clic en Agregar al carrito. Y si este producto ya en su carrito, entonces necesito agregar la cantidad, aumentar la cantidad solamente, no agregar un nuevo artículo de producto. De lo contrario, nuestra guardia tendrá problemas de que duplicará el producto en sí. Por lo que necesitamos comprobar si el ID del producto o el producto ya existe en su carrito. Simplemente aumenta la cantidad y no hagas ninguna adición a esta matriz de artículos hasta el momento que necesitamos comprobar si el producto está dentro o dentro de la tarjeta ya. Entonces estoy recibiendo la tarjeta, entonces puedo crear una constante, podemos crear, llamarla guardia. El artículo existe. Podemos decir que el artículo de Garth existe, este artículo del carrito existe. Iteraremos a través del carrito artículos y comprobaremos si hay artículo de Garth pasado ya en este carrito. Por lo que podemos decir carta para encontrar o elementos de punto sólido primero, punto encontrar porque lo tenemos como una matriz. Y voy a comprobar si hay artículo de
producto o ID de producto similar al artículo del carrito que se pasa aquí, entonces existe el artículo del carrito. Por lo que voy a decir encontrar. Y luego punto, ya sabes que podemos usar esta multa de esa manera. Y podemos especificar un valor de retorno booleano o como un valor de retorno booleano, que definirá para mí este ítem existe o no. Por lo tanto, para cada elemento dentro de esta matriz, comprueba el ID. Si es exactamente el mismo de artículo de guardia en el que estoy haciendo clic o agregando a su carrito, entonces devuélvela por mí. En el carrito existe artículo. Por lo que aquí voy a comprobar si existe artículo de Garth. A continuación, aumenta la cantidad más, empuja el nuevo artículo actual a la guardia, y luego regresa ese guardia de nuevo. Entonces así como lo vamos a hacer. Por lo que vamos a aumentar la cantidad para el producto que llamamos que encontramos o el artículo que encontramos. Hasta el momento que si tengo múltiples productos, necesito encontrar uno. Al igual que ir a través de toda la matriz, todo el artículo, y comprobar cuando encuentre uno, luego aumentar la cantidad de la misma. Por lo que la mejor manera de recorrer esos elementos es usar el mapa. Entonces cuando voy aquí y vuelvo a decir artículos de carta, y luego punto mapa. Y entonces podemos decir aquí artículo de guardia o como artículo, así como esto. Y este artículo, lo estará revisando. Entonces si el artículo es igual a, lo siento, producto de punto de artículo, es exactamente como encontramos el artículo de Garth. Por lo que voy a decir aquí, si artículo que ID de producto es igual a artículo de Garth, que estoy pasando en este conjunto aquí, guardia artículo dot ID de producto. Entonces necesitamos tener este rubro, esa cantidad aumentó. Por lo que sólo decimos item.quantity igual al artículo esa cantidad que teníamos antes como antes, más la cantidad que se pasa con el artículo de Garth. Por lo que voy a decir aquí carrito artículo cantidad punto. Entonces después de eso ahorramos y comprobamos si realmente estamos aumentando la cantidad. Por lo que aquí se inicializa de nuevo mi guardia. Doy clic en Aceptar, agrego, ya ves, tenemos aumentando la cantidad en base a su artículo de guardia si existe o no. Entonces cuando hago clic en otro producto, está bien, tengo aquí sólo un producto. Cuando haga clic en otro, no encontrará ese producto, por lo que agregará un nuevo artículo, como ven aquí. Cuando vuelva a hacer clic, veremos que este artículo aumenta la cantidad. Tercer producto. Tenemos aquí, tres productos. Nuevamente, aumentará su cantidad. Entonces sólo tenemos un producto, pero la cantidad es diferente en base a ese clics. Es mejor siempre en algunos casos, dentro del mapeo, devuelves el elemento actualizado. Entonces sólo dices aquí otra vez que me devuelven el artículo. Por supuesto que estamos usando las referencias de array, pero también es mejor devolver el elemento al mapa para que los elementos se puedan actualizar como de una manera agradable. Entonces después de que ahorremos, intentemos eso otra vez. Hemos inicializado, de nuevo nuestro artículo de carrito. Doy clic en Aceptar. Estoy aumentando la cantidad y agrego un nuevo producto con la nueva cantidad. Volví a hacer clic aquí. Y veo que tenemos también esa cantidad. Por supuesto, como tarea para ustedes, agregaré al siguiente apartado. Cuando quiero agregar a sus tarjetas en artículo, quiero que le muestres un barco a la altura del usuario que pueda, que se añada el elemento de guardia porque cuando puede tomar a veces y no es buena experiencia de usuario como no podemos ver qué pasó. Al igual que, por supuesto, el usuario no verá este registro de consola, pero solo hará clic, pero no ve nada si su artículo de carrito está agregado o no. Por supuesto que más adelante vamos a actualizar este gráfico aquí para mostrar que, está
bien, esto, hay un nuevo artículo de carrito agregado aquí, pero es mejor también agregar algún diálogo de confirmación o confirmar que este carrito o este artículo se agrega al carrito con éxito. Por lo que este es nuestro método set guard item. Es sencillo, hemos definido y conseguir Guardia también. Por lo que vamos a utilizar este artículo get cart. Como ven aquí, que cuando recarguemos la aplicación, estamos inicializando nuevamente el almacenamiento local. Por lo que no estamos obteniendo ningún beneficio del almacenamiento local porque es si, si el cliente o el usuario salen del sitio web y regresan, perderá su artículo de carrito. Por lo que necesitamos mantenerlos en su tienda local de alguna manera. Y esto será lo que veremos en la próxima conferencia, paso a paso.
156. Restore carrito de compras en Reload: De acuerdo, así que como ven aquí, cuando estamos recargando nuevamente la aplicación, estamos perdiendo los artículos del carrito. Entonces cuando agrego algún carrito dos artículos a su historia de carrito, entonces volverás a cargar la aplicación y
estamos perdiendo los artículos y los artículos se inicializan de nuevo. Entonces en este caso, necesitamos de alguna manera obtener el beneficio del almacenamiento local porque dijimos que el cliente está saliendo de la página web y regresando de nuevo, queremos mantener su carrito lleno,
entonces, ¿cómo podemos hacer eso? Por lo que en primer lugar, me gustaría ir a mi inicialización de carrito de almacenamiento local. Entonces antes de inicializar el Garth, podemos comprobar si hay guardias en el almacén local o no. Por lo que también podemos definir el cono, que se llama carro. Y esto cuesta o será tipo de guardia. Y entonces podemos decir este punto get guard, el método que definió en la conferencia anterior. Entonces aquí veo si tengo carrito o no. Entonces si hay un carrito o si no hay tarjeta, entonces
podemos crear inicialización del carrito. Y luego podemos usar la tarjeta inicial para añadirla a nuestro almacenamiento local. Entonces podemos entonces usar toda esta parte del código aquí. No hay tarjeta inicializada previamente. Entonces en realidad sólo estamos inicializando el carrito. De lo contrario, no hagas nada más porque si ya estamos teniendo el carrito, entonces no lo vamos a inicializar. Otra vez. Sólo estamos llamando a esta parte solamente. No tenemos guardia que viene de la propia tarjeta, que es del almacén local. Entonces vamos a guardar eso y las rejillas intenten aquí. Y veremos que cuando recarguemos la aplicación después de agregar algunos artículos a su carrito, todavía los tendremos. Entonces aquí por ejemplo, tengo dos artículos, cantidad 2 y 1. Voy a recargar la aplicación. Entonces mi código es verificar si hay una tarjeta en el almacenamiento local o no, si no hay una tarjeta de almacenamiento local, entonces inicializa una. De lo contrario, guárdelo. No hagas nada, no vuelvas a inicializar nada. Entonces de esa manera, estamos obteniendo el beneficio de volver a la página web después de agregar algunos artículos a su carrito. Por lo que el usuario podrá volver a ver su carrito cuando no tenga tiempo de comprar ahora. que pueda volver a la página web en cualquier momento otra vez, y luego no puede ver su tarjeta aún está llena. Ahí.
157. Observar la Badge Count en el listado de carritos en el encabezado: De acuerdo, ahora en esta conferencia vamos a observar el carrito. Entonces aquí, cuando el usuario está agregando algo a su carrito, entonces vamos a agregar aquí algunos malos para mostrar cuántos artículos en su carrito tenemos aquí. Entonces, en primer lugar, me gustaría crear un componente para esto. Entonces podemos usar cuántos artículos de carrito tenemos aquí. Entonces hagámoslo paso a paso. En primer lugar, vamos al encabezado de nuestra aplicación. Como recuerdan, hemos creado este icono en el encabezado, por lo que hemos compartido el encabezado y en el encabezado como recuerdan, hemos colocado su icono de carrito de compras. En lugar de eso, voy a usar un componente que puede
llamarlo como por ejemplo, órdenes y órdenes. Podemos darle compras, o podemos decir solo guardia. Y puedo, por ejemplo, así. Entonces definamos estos componentes en orden biblioteca. Entonces podemos ver que un huevo genera y luego quiero generar un componente. Y este componente se colocará en el proyecto que se denomina órdenes. Y aquí podemos decir que en los componentes, definimos icono de carrito o carrito malo. Quién puede decir que depende de ti. Por lo que podemos tener aquí el ícono de Garth, que estará en el encabezado. Y luego hacemos todo el personal que estamos haciendo siempre no quiero estilo en línea, no
quiero así pruebas. Por lo que también podemos utilizar un selector, que definimos previamente. Podemos decir carrito y luego icono. Y aquí podemos saltarnos pruebas. Y luego ejecutamos ese componente. Hicimos este comentario muchas veces. Por lo que ya no tenemos que explicarlo en cualquier momento. Por lo que tenemos ahora aquí el componente que se crea, que es icono de carro. Y dentro de este ícono del carrito, voy a colocar mi icono del carrito de compras, cual he definido en el encabezado. Y entonces necesitamos también guardar todo y comprobar si nuestro componente realmente está funcionando bien. Entonces porque no revisé la exportación, lo
tenemos todo esto. Veo que sigo recibiendo el error aquí o hay artículo de carrito no se desconoce. Sí. Está bien. Tengo aquí errores tipográficos, así que vamos a guardar eso. Seguro tendremos ahora el ícono perfecto. Ahora esto no es icono, icono plano. Se trata de un componente al que llamamos en el encabezado de nuestra aplicación aquí. Entonces usemos este componente para observar esa tarjeta actual. En primer lugar, quiero mostrar aquí cuánto tiempo o cuánto guardia tenemos aquí. Por lo que en primer lugar, sobre la inicialización de este componente, podemos utilizar también el servicio de tarjetas. Entonces diré servicio privado y luego de guardia, que ya hemos definido en nuestro módulo de órdenes. Por lo que podemos decir servicio de carrito y los errores de guardias o en Orangi on Edit, podemos decir este servicio de guardia y luego podemos decir conseguir carrito, como ves aquí. Para que podamos obtener la tarjeta actual la cual se carga a nuestra aplicación. Entonces, en primer lugar, necesitamos definir una variable a la que se llama, por ejemplo, podemos decir conteo de cartas. Y este recuento de tarjetas quizá tenga un número. Y este número tal vez pueda inicializarse como 0. Por lo que podemos decir que el recuento se inicializará como 0. Y entonces podemos decir que después de conseguir esta guardia, porque este carro regresará como tarjeta. Por lo que podemos decir que este recuento de tarjetas. Quiero que te muestres cómo todo puede estar en una línea después de conseguir el carrito, podemos decir que los artículos porque esto regresará para mí guardia. Y entonces digo longitudes. Por lo que este recuento de carritos de empuje será longitud de los artículos que se encuentran dentro de esta guardia. Entonces vamos a guardar eso y vamos a la plantilla y mostramos este carrito de compras o este número cerca de ese ícono para que podamos quedarnos pequeños, dag. Y definimos como podemos decir conteo de guardia. Entonces sin estilo, solo para ver cómo estamos teniendo el conteo de tarjetas en el encabezado de ese componente. Por lo que recargamos la aplicación. Entonces, a veces después de que no veas estos cambios, solo
necesitas guardar tal vez el encabezado otra vez, entonces verás esos cambios. Entonces como ven aquí, tenemos tres artículos porque en nuestro almacenamiento local, agregamos tres productos. De acuerdo, que ahora tenemos el número de los iconos o, o artículos que están en nuestras tarjetas. Cada vez que vuelva a cargar la aplicación, tendré los artículos o cuántos artículos en su carrito tengo aquí. Entonces, en primer lugar, necesitamos también darle estilo. Entonces hagámoslo como una insignia ser algún icono rojo aquí. Demostrará que aquí tenemos tres artículos. Entonces para hacer eso, prime end también proporcionándote algo llamado insignia. También puedes usar directamente el icono con esta insignia, o de lo contrario puedes usar solo la insignia y colocarla de alguna manera y dilatar en tu camino. Entonces usemos el básico. Voy a usar estos números. Entonces voy a usar este. Entonces si vamos a sus fuentes, veremos que ésta,
que se llama Peligro, por lo que éste tendrá tres y luego tendrá color actual, que se llama peligro. Entonces lo que necesitamos primero para importar el módulo, que se llama módulo de insignia. Pero en este caso, en el lugar donde creamos su componente, o en el lugar donde vamos a llamar a esta insignia. Por lo que en nuestro caso será en módulo de pedidos. Entonces en el módulo de pedidos, voy a importar eso. Por lo que tenemos aquí módulo de insignia de importación. Y el módulo de insignia estará en la matriz de importaciones de ese módulo. Ahorramos y volvemos a ir al icono de nuestro carrito. Obtenemos la plantilla de esta insignia roja. Entonces vamos aquí, decimos insignia P. Y en lugar de este pequeño lo que hemos definido aquí, sólo lo
colocamos y el recuento de guardia sería como d dt de esta teoría, el número codificado duro. Por lo que podemos decir que el recuento de Garth será el valor de esa insignia. Y quitamos el viejo que tenemos, y recargamos la aplicación y vemos si tenemos el lote, bonito, lo tenemos aquí encendido también. ¿ Tienes otra opción para usar una que viene también con icono? Por lo que puedes usar este. Por lo que también podemos ir aquí y ver en las fuentes, por ejemplo, hemos posicionado insignia y será la que sea. Podemos tomar, el medio, por ejemplo. De acuerdo, copia toda esta parte. Y luego eliminamos todo esto porque viene por defecto con icono. Entonces tenemos aquí lo parecido, es poner de nuevo o la zona. Por lo que ahora tenemos su color y el conteo o el valor de este artículo o artículo de carrito será conteo de tarjetas, que hemos definido previamente. Y tenemos algo de tamaño de fuente, tenemos algo de estilo. Y aquí están los dientes del icono calendario PI. Vamos a usar ese icono, que se llama carrito de compras. Entonces después de guardar eso, vuelve a
ir a nuestra aplicación en el front end. Veremos que aquí tenemos el carrito de compras. De acuerdo, Parece grande, pero sí, podemos, puedes peinarlo como quieras. Aquí puedes dar una fuente más pequeña como ves, porque especificó algún tamaño de fuente en el estilo de este ojo para que podamos hacerla más pequeña como 1.5. Será como más claro y agradable y visto a los usuarios todos ellos. Aquí tenemos el artículo de guardia el cual se actualiza con el número actual de artículos de mi carrito en mi almacén local. Entonces tal vez en ese caso, vamos también a darle estilo a este ícono para que puedan ser lo mismo, podemos darle misma propiedad, que podamos dar la misma coloración, como tenemos aquí, una clase P textos secundarios. Por lo que podemos volver a ir a nuestro componente de cabecera, y podemos darle este estilo a esta clase, al icono del usuario. Por lo que para no tener diferentes estilos en todas partes. Y además, tenemos que dar el estilo de color son tamaño, tamaño fuente del icono. Por lo que puede ser igual de lo mismo que podemos dar aquí Estilo e ir a componente de cabecera. Y entonces decimos aquí, tamaño
de la fuente será de 1.5 gramo. Por supuesto, esto también será un componente en el futuro cuando vamos a ver los pedidos del usuario, cuando estamos dando clic en este icono. Por lo que vamos a reemplazar como esto siempre así con el componente como lo hicimos con el icono del carrito de pedidos. Entonces vamos a guardar todo ahora y comprobar si tenemos que yo estilizaría, no
tenemos ningún problema. Bonito. Tenemos ahora el carrito y los iconos de usuario lucen igual. Pero ahora tengo un problema como cuando quiero agregar artículo a este guardia, por ejemplo, agreguemos este. Veo que no se está actualizando. Entonces sólo cuando me refresco. Está bien. Veo que el artículo se agrega a mi carrito. Por lo que necesitamos de alguna manera observar, como hacer esta variable suma y esta variable está observando su almacenamiento local, está viendo el almacenamiento local está viendo mis artículos de carro siempre. Entonces cuando el cambio de Ellie suceda en la aplicación respecto a su carrito, entonces esto sentirá el cambio y luego se lo reportará y me lo mostrará aquí. Entonces vamos a utilizar para eso los observables. Por lo que para entender observador será más, lo verás aquí. Entonces vamos a hacer alguna variable en su servicio que se llama sujeto, y este sujeto es observable. Por lo que podemos suscribirnos a este observable como yo puedo, esto, este conteo de guardia variable. Cuándo es vamos a ver siempre esa tarjeta como el carrito siempre se está actualizando. Entonces cada vez que haga clic en algún lugar para agregar al carrito, quitar algunas tarjetas, entonces esto escuchará eso y dirá, está bien, estoy actualizando, tengo alguna actualización. Hagamos eso. Entonces paso a paso, hagamos lo observable. Cómo podemos hacer un público observable. Público observable para mí, lo puedo hacer dentro del servicio de tarjetas. Por lo que podemos definir un observable simplemente llamando a algo llamado sujeto. Si recuerdas, usamos el tema también en cualquier shell o terminando la suscripción como viste anteriormente. Por lo que podemos usar un tema también aquí. Pero en lugar de eso, decíamos así, podemos definir guardia y este carro, como les dije,
siempre, los observables son sufijo con este signo de dólar. Y no podemos decir que esta tarjeta tenga un tipo o tema y el sujeto tendrá un tipo que previamente pusimos alguno, si recuerdas, cuando estábamos terminando suscripciones. Pero ahora vamos a decir que este tema contendrá el carro. Y este tema, estamos haciendo un nuevo tema. Nosotros lo inicializamos así de rápido. Creamos objeto. De acuerdo, Entonces en ese caso, cuando vaya a mi componente aquí, como por ejemplo, digamos icono de carro, entonces no voy a usar get Guard solamente. Get guard sólo está regresando para mí ese guardia actual cuando cargue la aplicación. No, de alguna manera quiero observarlo. Por lo que podemos decir también aquí, este servicio de tarjeta de punto. Entonces tenemos aquí definir su servicio de carrito y luego el carrito, este artículo o esta variable que definí. Y entonces digo suscribirse. Por lo que voy a suscribirme a esta tarjeta, que me devolverá el carrito en sí. Y luego la propia tarjeta. Puedo obtener la longitud y asignarla a su cuenta de carrito. Por lo que no podemos decir aquí este recuento de cartas será el guardia. Este sería carrito. Buenos artículos longitud de punto. Por lo que en ese caso, tendremos siempre observado el carrito. Por lo que cada cambio le suceda a su carrito será observado por su conteo de carros. De acuerdo, Ahora, vamos a quitar esta línea. Entonces ahora si voy a la aplicación, estoy llegando aquí 0, vale, quiero agregar algo a su carrito. Todavía no se observa. Entonces un estado de cambio, como aquí estamos diciendo que el cambio no se siente como este artículo o este artículo de almacenamiento local de tarjeta no está sintiendo los cambios. Y también no podemos observar eso también. Por lo que tenemos que decir a este tema que te actualizas. Para que todos los que te suscriban puedan sentir este cambio. Entonces, ¿cómo podemos hacer eso? Si vamos al servicio de guardias. Al final de este método, diré después de inicializar todo, yo, antes de decir devolver el auto, no
puedo decir esta tarjeta de punto, el tema que he creado. Y luego siguiente. Entonces en lugar de devolver la tarjeta, puedo decir también siguiente, actualizar el carrito. Entonces en ese caso, todos los que están agregando, cuando agrego algo a su carrito, todos los que se suscriban a este valioso, sentirán el cambio porque entonces esto
se
actualizó a sí mismo y con el guardia más nuevo después de que le agrego artículos. Y luego todos los que se suscriban a ella, dirá, vale, eso es una actualización. Voy a conseguir esa actualización y mostrársela al usuario. Entonces para eso, quiero mostrarles un registro de consola. Entonces ven que este registro de consola se ejecutará cada vez que tenga, por ejemplo, alguna actualización en el carrito que está agregando artículos a su carrito. Entonces vamos a guardar eso e ir a nuestra aplicación. Otra vez. Se volverá a cargar. De acuerdo, ahora todavía tenemos el Euro porque no
inicializamos esa suscripción o suscriptor. Por lo que voy a añadir algunos artículos a su producto. Entonces, por ejemplo, voy a añadir este. Al hacer clic, veo que esto tiene un 5 porque se actualizó. El carro que tenemos o el observable que ahí hemos definido. Y esto observable. Siempre observando, o este artículo siempre está observando lo que le estamos haciendo a su carrito. Entonces glucosa, tengo aquí como el registro de consola que te mostré. Entonces cuando haga clic en Agregar al carrito, el ícono aquí en la parte superior sentirá el cambio y la consola. Entonces aquí podemos decir, por ejemplo, click, veo que te mires, eso son artículos que se actualizó el guardia. Y por esto siguiente, que tenemos aquí, entonces la guardia observable o guardas objeto, actualizará Intel y dirá a todos los que se suscriban a ella, como en nuestro caso, este icono del carrito que bien, estoy actualizado. Por favor, actualízate y haz el código lo que estabas haciendo dentro de la suscripción. Entonces en ese caso, estoy consolando log y actualizando el conteo de guardias, que es lo que aquí definí. Y lo usé en el valor de esta insignia, así que veo el número aquí. Pero ahora cuando recargo la aplicación, sigo obteniendo 0 y no consiguiendo que el conteo actual o el anterior de mi guardia donde tengo previamente en mi almacenamiento local porque Europa ese almacenamiento ocre está bien, todo está bien. Tenemos cinco artículos, pero aquí no podemos ver la actualización. Porque también cuando inicializamos el ejemplo completo que custodian, si recuerdas, estábamos diciendo si no hay tarjeta, entonces bien, actualiza o crea un nuevo guardia en ese almacén. De lo contrario, si no hay tarjeta, entonces podemos decir aquí también, este se llevó sujeto guardia será o aquel siguiente actualizado con la tarjeta actual que tienes aquí. Entonces, por ejemplo, puedo decir éste. Entonces en ese caso, puedo decir otra cosa, si hay carro entonces actualizado para mí con la tarjeta actual. Entonces cuando no hay tarjeta, inicializa una nueva tarjeta y agréguela al almacenamiento local. De lo contrario, solo actualiza ese sujeto gerunds, que estoy observando con el guardia que encontraste en el almacén local. Entonces vamos a guardar eso e ir de nuevo a la aplicación. Verás que esto no está funcionando de nuevo. Entonces esto es porque estamos usando tema. Es mejor también usar algo es similar al sujeto, pero se llama sujeto de comportamiento. Se puede, en lugar de eso, se
puede usar sujeto de comportamiento. Entonces está haciendo exactamente lo mismo. Pero nosotros, porque vamos, estamos llamando a esto en el instructor del constructor de módulos del módulo, entonces esto no estará listo. El sujeto aún no está listo, por lo que no será ejecutado y no obtendrá el siguiente. Entonces esto se está ejecutando y terminando antes de que se inicialice este tema. Por lo que es mejor usar para ese sujeto de comportamiento. Tenemos tu tema, Es exactamente lo mismo. La diferencia aquí que necesitas decir comportamientos objeto debe inicializarse con algo así como dentro de tu carrito. Entonces no podemos decir simplemente aquí, este punto get cart. Entonces consigo su carrito el cual está en el almacén local, y luego creo mi sujeto de comportamiento. Y en este caso, no
necesitamos esto más. Entonces después de eso, tenemos el carro inicializado con el guardia actual, cual se almacena en el almacenamiento local. Entonces de esta manera, llegaré aquí cinco cada vez que recargue mi aplicación. Por lo que ahora cuando esté agregando un nuevo producto a mi almacenamiento local, tendré, por ejemplo, este. Podemos tener Agregar al Carrito y llegamos aquí, seis se pone aumentando y observando ese conteo. Y cuando recargo la aplicación, todavía
tengo seis aquí. De acuerdo, Vamos a tratar de quitar todo el carro que está en el almacén local. Tan totalmente y ver por el usuario que viene por primera vez a nuestra tienda. Por lo que voy a eliminar seleccionados. Borré el guardia. Ahora voy a la página de inicio otra vez y soy nuevo cliente llegando a la tienda. Yo quiero abrir la consola. Quiero ver si estoy obteniendo algún error. Por lo que recargamos la aplicación. Entonces digo aquí, recargar. En primer lugar, obtengo el error. No se pueden leer elementos de propiedad de null donde obtengo este error en el componente de icono del carrito. De acuerdo, tenemos que ir a este componente porque vimos que estos ítems no están definidos porque el guardia aún no está inicializado. Entonces, eliminemos este registro de consola. Y luego decimos si la tarjeta tiene artículo o ese guardia que obtuve está definido, entonces dame la longitud de la misma. Entonces en ese caso, tenemos este signo de interrogación. De lo contrario, en TypeScript se puede decir a signo de interrogación cuando este indefinido. Entonces guarda Cuenta, dale como 0. Entonces es como si de lo contrario, así que el recuento de Guardia será éste. Pero cuando éste es indefinido por este signo de interrogación, para evitar el error en la consola como vimos anteriormente, luego volver como 0. Entonces guardamos eso otra vez, recargar la aplicación. No tenemos nada ahora en su guardia, así que está bien, no tenemos el error, pero para probarlo más, necesitamos quitar, de
nuevo, volver a cargar la aplicación, ir a su consola. Agradable, no tenemos ningún error. Ahora voy a añadir artículo a este Karp. Doy click mentiras, tengo 123. Sí, Como ves. Entonces cuando hago clic u otro producto, veo que no se agrega porque estoy obteniendo solo los artículos cuentan. Por lo que se repiten producto no se contará aquí. Por lo que sólo tenemos los diferentes productos. Y veremos cuando vayamos al detalle de guardia, veremos cuántos artículos conseguimos y cuántas veces el usuario haga clic en Agregar al carrito para ti en la siguiente conferencia como tarea, quiero que añadas un pop up como verás, y lo explico en la tarea. Por lo que cuando hago click en Añadir al carrito y todo es éxito, quiero que muestres un pop up como el artículo se agrega con éxito a su carrito. Por lo que en este caso, el usuario no hará clic muchas veces y eso no lo sabe. Él, de acuerdo, se le suma al almacenamiento local todo porque correcto. Pero no estamos teniendo ninguna notificación para el usuario, lo cual no es agradable experiencia. Como última pregunta, ¿necesitamos terminar aquí las suscripciones? No, no necesitamos eso porque siempre estamos suscribiéndonos a su carrito. No necesitamos tener n suscripción porque no me voy primero. Y este componente, este encabezado siempre existe. Este componente siempre creado solo por una vez y no se está creando varias veces. Entonces no estoy creando multicolor de múltiples suscripciones. Pero aquí sólo tenemos una vez y es todo el tiempo, todo el tiempo cuando estoy de visita o navegando en mi aplicación, tengo este artículo suscrito y está observando el carrito siempre. Entonces en ese caso, a modo de resumen, hemos creado en su servicio de carrito algo llamado sujeto de comportamiento, que es observable y este observable se observará y no desafiar a todas las personas ni a todos los artículos o sus componentes que son suscribirse a este comportamiento a sobre sus cambios. Entonces cuando digo card dot siguiente, por ejemplo, en este caso aquí tenemos uno de ellos. Aquí tenemos punto siguiente. Entonces estoy actualizando este tema de comportamiento. Por lo que icono del carrito escuchará este cambio y ejecutará el código que estará dentro de la suscripción en base a su guardia cual se devuelve de ese sujeto de comportamiento. Entonces esta es la forma más fácil de observar las cosas en mi aplicación. De lo contrario, podemos usar NG RX, lo cual es más complicado. Y para eso, no lo veo como una calidez
usar MDR x o que es gestión estatal sólo para este sencillo caso, que sólo tenemos cuatro esa tarjeta. Voy, por supuesto al final de esta sección, explicar cómo agregar a la tienda estatal RX usando esquemas NX. Y así vamos a implementar ese carrito como en la tienda estatal, no como tenemos aquí con observables. Y tienes opcional si quieres seguir la vía MDR x, o puedes seguir esta manera sencilla y agradable aquí.
158. Añade producto al carrito con cantidad: Muy bien, ahora vamos en esta conferencia a agregar producto al carrito, pero con la cantidad, si recuerdas, estábamos agregando aquí sólo un artículo de este producto. Por lo que ahora vamos al detalle del producto y vamos a seleccionar Cantidad. Y luego haré clic en Agregar al carrito. Es exactamente lo mismo como lo hicimos con el componente de artículo del producto. Vamos a hacer con el componente detalle del producto. Entonces antes que nada, voy a tener ese artículo de producto aquí. Si recuerdas, también estuvimos usando el servicio de carrito. Y en el servicio de carrito estábamos usando producto de anuncio al carrito. Entonces la principal diferencia aquí, vamos a utilizar el en las páginas, página de producto. Tenemos que utilizar esta cantidad la cual estamos obteniendo de la cantidad de entrada o el número de entrada y luego colocarla o pasarla cuando estamos creando el artículo del producto. Entonces en el componente de página de producto, iré al archivo TypeScript y luego
voy a tener el producto o servicio de nuevo. Y luego vamos a utilizar este servicio de carrito cuando voy a agregar producto al carrito. Entonces, en primer lugar, podemos conseguir esa cantidad. Por lo que hemos definido previamente la variable que se llama cantidad. Entonces por como hacer algún prefijo, podemos inicializar este ítem con uno y min puede ser uno a 100, no tienen 0. Y también podemos inicializarlo cantidad con el número uno. Entonces podemos decir aquí en lugar de número, se
puede decir también, éste puede ser uno. Pero por supuesto que se ESL y se quejan cuando se define el tipo y luego el valor, porque el valor es uno. Por lo que se sabe que es un número. Por lo que automáticamente, TypeScript dirá que se trata de un número. Entonces decimos que esta cantidad se inicializó y luego vamos y lo guardamos todo. Eso lo probamos después de actualizar nuestra aplicación. Entonces vemos que no se inicializa. Creo que tengo un dipolo, sí, vale, necesitamos tener aquí igual, no escribiendo. Por lo que podemos tener aquí cantidad es igual a uno. Y como vemos que se inicializa con uno y no puedo ir a 0. Ahora cuando hago clic en Agregar al carrito, necesito agregar este artículo al carrito. Entonces, en primer lugar, puedo disparar para llamar al servicio de guardia exactamente como lo hicimos con ese artículo o en el artículo de producto que habíamos definido previamente. Por lo que en primer lugar, tendré creación de artículo de carrito. Por lo que yo diría const artículo carrito. Y este artículo de Garth será tipo de artículo de carrito. Y será igual a como el artículo en sí, que será ID del producto, será el ID del producto donde estoy ahora. Entonces si recuerdas, tenemos aquí el producto que consiguiendo, así que no podemos decir después de eso obtenemos este punto-producto porque no hemos definido aquí. Y llenamos a nuestra variable o miembro de clase con el producto que obtuvimos del back end aquí. Por lo que podemos decir que este dot producto dot ID. Por lo que estoy sintiendo que ID de producto de Garth artículo sería este dot product dot ID y una cantidad será esta cantidad de punto. Entonces como una cantidad se va a cambiar en base mis cambios aquí porque estoy usando el modelo NG, cual tendrá encuadernación bidireccional. Y reflejará que siempre o reflejará siempre la página o el número de entrada, que estoy cambiando aquí desde el usuario. Y entonces pondrá eso en la variable que se llama cantidad. Y lo definí aquí como una clase miembro como ven aquí. Entonces ahora vamos de nuevo y agregamos este artículo de carrito a nuestro carrito. Por lo que voy a decir esto sin embargo, servicio de
guardia, punto, agregar o establecer artículo de corte. Y luego paso el artículo del carrito, que quiero. Entonces cuando guardamos eso y lo intentamos en nuestra aplicación, así voy a guardar aquí, y yo elegiría cinco o seis y luego agregaría al carrito. Y entonces este artículo será agregado a mi carrito. Entonces vamos a comprobar si lo tenemos como realmente en nuestro almacén local. Por lo que tenemos aquí dos artículos. Veo aquí que no se agrega. Entonces tal vez este botón no está funcionando. Entonces volvamos de nuevo a nuestra solicitud y comprobemos. De acuerdo, tenemos aquí botón. No tenemos un botón PI, así que podemos usar solo Glick, como no vamos a usar el onclick que viene solo con botón PI de Prime NG saber que estamos teniendo un botón. Entonces el, aún más el botón para disparar que este evento podemos usar solo click, pero cuando usas la energía prime en la documentación dijeron que tienes que usar onclick. Entonces en ese caso, sólo
tenemos botón. Vamos a cambiarlo para hacer click. Entonces vamos a ahorrar y volver a ir a nuestra aplicación. Y luego comprobamos eso. Por lo que seleccionamos cuatro. Agregamos, está bien, tarjeta actualizada. Tenemos ahora el artículo que tiene cantidad cinco, como porque lo tenemos previamente en el carrito.
159. Página de carrito: De acuerdo, en esta conferencia vamos a plantilla esa página de guardia, esa página actual. Va a tener todos los artículos del carrito donde voy a presentar para pedido y luego puedo revisar mi carrito y ICU lo que pedí. Y siempre puedo cambiar la cantidad, cuánto o cuántos artículos he pedido. Y por supuesto vamos a enumerar como algo así como mi carrito tiene tres artículo y
tenemos algún botón como volver a la tienda otra vez y así algo de información. Y también vamos a implementar la eliminación de un artículo de la tarjeta. Entonces antes que nada, vamos a hacer esta plantilla que te estoy mostrando aquí. Entonces primero, vamos a crear un componente que se llama página de guardia, y será en la página Órdenes. Por lo que voy a ir a una consola ECS y luego hacer clic en Generar y luego componente. Y entonces tendré aquí las páginas en las páginas dentro de la biblioteca de pedidos. Por lo que tendré aquí páginas y luego página de carrito. Y luego vamos a seleccionar el proyecto que serán órdenes, porque tenemos que hacerlo en la biblioteca de pedidos. Y lo mismo para otros componentes. Entonces tenemos un estilo de vida. Tenemos también, saltando la prueba. Entonces aquí tenemos todo esto y también el selector puede ser pedidos y página de carrito. Por lo que en este caso tendremos un componente creado. Tan sólo necesitamos ahora referir este componente a sus rutas. Entonces si recuerdas cómo hemos creado rutas en el módulo de la app. Por lo que tenemos aquí en el módulo app de tienda de energía, hemos creado algunas rutas y solo tenemos la ruta principal. Pero en el módulo de productos, estamos definiendo también los módulos infantiles. Haremos lo mismo como hicimos exactamente con el módulo de pedidos o cómo lo hicimos en los productos. Entonces hagámoslo. Por lo que primero iré a la biblioteca de órdenes. Cerremos todo y volvamos a los labios. Y por supuesto que hemos importado ya el pedido es módulo en nuestro módulo de aplicación, por lo que no tendremos ningún problema. Por lo que cerramos todo y nos trasladamos a nuestras bibliotecas y tenemos aquí órdenes. Y voy a implementar las rutas en el módulo de órdenes. Por lo que definimos una constante que se llama rutas. Y tendrá un tipo de rutas. Por lo que tenemos aquí rutas y tendrá tipo de ruta y la ruta la estamos importando desde Angular. Y esto será array, y esta matriz serán objetos array, y los objetos serán Bath. Y por ejemplo, puedo definir el primer camino, que puede ser carro. Y el componente de esta ruta será el componente que he creado, que es componente de página de guardia. Entonces ahora estamos listos para eso y sólo vamos a rutas de nuevo o al módulo router. Y decir eso para niño como hicimos exactamente con los productos y luego paso las rutas que he creado. Entonces ahora tenemos que comprobar si todo está funcionando bien. Voy a mi solicitud, le estoy mostrando esta. Si ves que es puerto indiferente, tengo demo, ya lo preparé, así que para mostrarte lo que vamos a hacer y luego implementamos eso fácilmente. Por lo que en primer lugar, quiero cuando haga clic en este ícono, voy a la página de su carrito. Por lo que hemos creado el componente para el icono del carrito y solo necesitamos agregar algo que se llama router, enlace del router. Y es link router me llevará a la página del carrito. Así de simple. Por lo que solo guardamos, vamos de nuevo a la aplicación y recargamos y hacemos click en esa tarjeta. Tengo aquí un error, necesito quitarlo. Y luego volvemos a su carrito de nuevo o a la página otra vez. Y veremos que somos capaces de ir a la página del carrito funciona. Entonces esto lo que vamos a plantilla. Entonces vamos al componente que se llama página de carrito. Y en la página del carrito así como en cada componente, lo
definimos primero con la página del carrito o el nombre del componente. Y luego decimos div p grid, y vamos a usar la grilla aquí también. Y como ven, tenemos en la plantilla que tenemos aquí ocho columnas, porque aquí voy a poner el resumen de los pedidos como el precio total y si hay impuestos y barcos o algo así. Por lo que en primer lugar, podemos tener la cuadrícula y tendrá ocho columnas. Entonces pondré div call y,
o, lo siento P call. Y 8 primer div tendrá como un botón y podemos darle así. Y esto tendrá un botón PI, por lo que podemos usar el botón también. Entonces el botón, puedo tomarlo de la energía Prime. Por lo que podemos usar exactamente el mismo botón como lo hicimos anteriormente muchas veces. No tengo que repetirlo. Entonces lo único que falta aquí es que necesito importar nuevamente el módulo del botón. Por lo que sólo necesitamos tener aquí módulo de botón. Por lo que tenemos que añadir módulo de botón, que viene de la energía Prime también. Título. Entonces en el título tendremos algo como mi tarjeta para que podamos crear otro div. Y este div tendrá también H4 y H4. Tendré un texto que se llama mi carrito. Y entonces como puedo poner la información, por ejemplo, podemos decir conteo de cartas. Entonces podemos poner aquí como el conteo del carro, cómo lo vamos a llevar también. Eso ya lo hicimos con navegación, pero podemos hacerlo de nuevo aquí para arreglar la información. Entonces tenemos aquí H4 y así podemos agregar después de eso alguna frase como como tenemos aquí como envío después del pago, tiempo de
entrega, sí, algo así. Por lo que también podemos agregar esta inflamación. Por lo que voy a añadir otro div. Y dentro de este div, le
puedo dar una clase también. Y este vaso, podemos darle un guardia de envío, por ejemplo, info, para que podamos colorearlo. Y entonces podemos poner el texto aquí. Entonces por supuesto, este texto puede ser dinámico en función los métodos de envío si implementas eso en el back-end. Entonces vamos a guardar y darle estilo a esta parte. Seguro que no funcionará directamente. Tenemos que hacer un poco de estilo. Por lo que primero necesitamos tener una bolsa para mostrar botón. Entonces nosotros solo todos podemos quitar este botón o podemos dejarlo así. Por lo que podemos tener otro método para ello aquí en el script del componente. Para que podamos tener de vuelta a la tienda. Y luego dentro de eso vamos a tener el botón donde me llevaría de vuelta a la tienda. Entonces necesito en el constructor, necesito llamar al router. Por lo que yo diría aquí router privado. Y luego necesitamos un router. Y dentro de este router, vamos a haber ordenado el botón Atrás. Diremos este router dot navigate. Y luego especificamos la navegación cuáles serán los productos. Por lo que pondré o volveré a la página que se llama productos de esa manera. Y veremos que nos metimos base en nuestra página. Entonces si voy a dar click atrás a tienda me gusta, entonces volveré a la tienda como era, quién eres como te mostré con ese exterior y aquí tenemos mi tarjeta, este número, la vamos a remplazar por la tarjeta actual. Recuento de artículos. Y aquí, el envío vamos a darle estilo. Por lo que sólo necesitamos agregar esta clase de alguna manera. Entonces, en primer lugar, necesito definir una clase o un archivo o archivo de estilo, que se basará en los labios exactamente en la biblioteca donde hemos creado. Por lo que no daría ningún conflicto o no nos confundirá para ver dónde está. Por lo que voy a dar esta tarjeta ese CSS, creo un nuevo archivo y este archivo, voy a importarlo en los pedidos. Entonces aquí tenemos que decir Importar, no URL, sino sólo importar ese enlace que queremos importar, que es tarjeta dot SCSS. Entonces después de eso tenemos que estar seguros que es también pedidos es importante en cualquier tienda. Tenemos que comprobar eso, de acuerdo. Es importado, así que estamos trabajando bien aquí. Por lo que como viste anteriormente, hemos creado una clase que se llama página de guardia, como podemos decir página de carrito. Y estas tarjetas página podemos darle, por ejemplo, la altura media. Me gusta dar alguna altura mínima para el carrito aquí. Entonces podemos tener aquí algún espacio vacío para dejarnos trabajar bien. Y por supuesto que voy a implementar más adelante cuando no tengamos ningún elemento en su carrito. Por lo que podemos mostrar como tu carrito está vacío. Por lo que tenemos que implementar eso también. Y después de eso vamos a tener ese artículo de carrito o
teníamos dijimos que necesitamos crear el artículo de Garth. Por lo que podemos decir tarjeta de punto. Y dentro de estas tarjetas de punto, podemos tener ese envío, perdón, envío. Y podemos dar a este envío como color verde. Y podemos empujar el contexto un poco con 15 pixel o podemos dar como no hay necesidad de eso. Podemos simplemente empujarlo usando las clases que están listas en nuestro extremo principal. Entonces podemos decir como aquí, B o margen fondo, que será como podemos tomar cinco. Y así podemos hacer eso por cada div que hemos creado. Por lo que para dar algunos espacios entre todas esas hojas para no estar pegados el uno al otro. Y lo guardamos todo. Y entonces estamos listos con las primeras líneas. Marquemos ahora el elemento de guardia, que es éste. Por lo que el artículo del carrito también estará dentro de un div. Por lo que tenemos aquí algo como div y podemos darle un nombre que se llama artículo de carrito. Y dentro de este artículo de guardia, vamos a tener otra rejilla porque quiero tener como división de la cuadrícula. Por lo que podemos tener aquí dos columnas para la imagen. Ejemplo 9 columna para la inflamación y el nombre, y también tres columnas para el botón aquí. Entonces por supuesto que no se puede, ya sabes cómo, hay que saber que cuando estoy creando cuadrícula dentro de un aquí, así que dentro de ocho columnas, entonces también tengo aquí otra vez un 12 columnas. Por lo que estará relacionado con el padre de familia. Entonces estoy dentro de qué? Yo estoy dentro de P llame ocho. No estoy dentro del como todo ancho de la página porque aquí si quieres ver tenemos b, lo siento, recuerda. Y entonces podemos decir 12 menos 8 es 4. Y aquí vamos a poner resumen de orden, podemos llamarlo. Entonces aquí en esa zona, en este espacio, voy a poner el resumen de pedidos. Por el momento, la templación del artículo del carrito, como dijimos, creamos una nueva cuadrícula. Podemos dar una grilla. Y dentro de estos ser gran fin de semana, otro vivo para columna que contendrá la imagen. Por lo que podemos decir herramienta de llamada P y ella dentro tendremos imagen de artículo de carrito. Por lo que podemos decir directamente la imagen tendrá la fuente. No puedo recoger ninguna imagen de Google. Copié alguna imagen. Yo lo voy a publicar aquí. Pero claro que vamos a cambiar eso también. Por lo que no podemos decir que este div tendrá clase. Podemos decir carrito, artículo e imagen. Por lo que siempre es mejor prefijo así. Por lo que podemos utilizar ese beneficio del SES. Entonces podemos prefijar siempre con un padre, digo gap item y luego paso esa cosa que quiero el estilo. Y después de eso, necesitamos también la columna, la segunda columna que estará cerca de ella donde
tendré la información de su producto. Entonces nos pueden haber llamado, por ejemplo, sí, podemos darle ocho o siete también. Por lo que podemos tener ahora nueve columnas. Por lo que podemos dar el nombre del producto. Por lo que podemos dar div y tendrá nombre del artículo del carrito. Por lo que tendremos el nombre del artículo del carrito, que será como codificado duro. Ahora sólo podemos codificar duro las cosas que podemos decir Sólo nombre del producto. Podemos tener también un div y que tendrá carrito, artículo y luego precio. Y podemos dar también algo de precio codificado duro y usar la bandera de moneda. Por lo que podemos dar moneda como la pipa que hemos creado previamente, todo lo que conocemos o hablamos de ello previamente. Y después de ellos vamos a tener el botón Eliminar. Entonces si ves que quiero eliminar también el botón de o eliminar el producto del carrito. Por supuesto, el botón en prime end. Hay muchos de ellos. Una de ellas es solo con ícono, por lo que puedes tener un botón sobre mí con ícono. Por lo que puedes usar eso también. Por lo que también podemos crear un div. Podemos darle clase, que se llama guardia Artículo quitar. Por lo que hemos quitado el elemento de guardia y será un botón PI también, y tiene algunos onclick en él. Entonces tenemos botón P y este botón B tendrá papelera de iconos, exactamente cómo lo conseguimos de ONGs Privadas y luego eliminar elemento de guardia. Entonces necesito saltar al archivo y crear el método que se llama elemento CreateCars. Podemos dejarlo vacío por ahora. Entonces después de eso hemos creado el primer lado. Entonces vamos a comprobar si tenemos todo está bien. Por lo que después de cargar la aplicación, vemos que nada tiene estilo. Tenemos que darle estilo a eso. Así que vamos a saltar ahora al archivo de estilo. Voy a tener aquí, otra vez el estilo. Por lo que necesitamos darle estilo a todos los artículos que hemos creado. Entonces escondo este panel. También podemos cerrar todo lo que tenemos previamente para poder ver qué vamos a empezar. Entonces, en primer lugar, necesitamos tener el artículo, como ven aquí. Tenemos algunos un fondo blanco y fue frontera y radio fronterizo. Por lo que tendré aquí en la tarjeta. En primer lugar, saltaré adentro y diré que quiero artículo. Este artículo tendrá un color de fondo de como un ancho y así algún borde, que será como un gris más claro. Y también le podemos dar algo de relleno para que podamos empujar el contenido dentro de 15 pixel y podemos dar también ese border-radius, que les dije que tenemos algunas radios en la frontera. Y entonces podemos decir que la imagen que hemos definido aquí, así podemos, que tenemos IR, imagen de artículo de
Garth y dentro de ella alguna imagen también podemos llamarla y darle dentro de este artículo que tenemos aquí también, imagen. Por lo que la imagen dentro de ella hay etiqueta de imagen y tendrá alto a 120 y ancho máximo 100%. Entonces cuando el sitio web va a ser receptivo, es mejor darle como ancho máximo, que es 100. Por lo que el contenido de la imagen no saldrá
del contenedor principal o de su contenedor padre para no tener un problema en el estilo. Entonces guardamos y vamos a la aplicación, está bien, Ahora tenemos los artículos de esa manera. Por lo que ahora necesitamos hacer algún estilo por su nombre y también el precio y este botón, que ya está aquí, solo necesitamos cambiar el color como te mostraré más adelante. Entonces, en primer lugar, necesitamos darle estilo al nombre que daré aquí. Styling o una clase que se llama nombre. Entonces como les dije, esto es un beneficio de tener a Garth y luego ítem y luego nombre y esto lo que estamos haciendo como podemos dar este prefijo y luego nombrar como ven aquí. Por lo que podemos obtener beneficio del SCSS aquí. Por lo que el font-weight de este texto será de 600 y el tamaño de fuente puede ser de 1 a EM. Por lo que podemos darle un tamaño un poco más grande. Y podemos empujar ese contenido debajo de él unos 15 píxeles porque como ves, se pega el uno al otro. Y por el precio, vamos a dar las mismas propiedades que están aquí, excepto que vamos a colorearlo con naranja o nuestro color primario. Entonces aquí el color será el color primario, que he definido en mis archivos SAS. Y veremos que aquí tenemos el estilo fino. Te mostraré más tarde cómo colorear todos los botones con nuestro color naranja con un color primario. Pero primero sigamos adelante y vamos a implementar, lo que dije antes que necesitamos implementar el,
el conteo o lo que se llama cantidad. Y así el subtotal, si recuerdas, lo
hicimos ya en esa página de producto de tarjeta y
tenemos aquí la página de detalles del producto que tenemos este artículo de cantidad, por lo que podemos usarlo igual como lo usamos desde prime end. Para que podamos copiarlo. Y primero, pero hay que crear otra columna porque hemos terminado dos columnas para la imagen y siete columnas para su contenido y botón eliminar. Ahora necesitamos crear otra columna, que son el resto. Por lo que podemos decir p call, y luego tendrá cuatro o ordenado3. Por lo que tenemos 12 columnas en total. Y dentro de esas 12 columnas en total, vamos a tener ese número P o el número de entrada que hemos definido en nuestra página de productos. Entonces si vamos a la página de detalles del producto, para que puedas ir rápido, saltó a ella. Podemos decir producto. Y página, como ven aquí, salté directamente a este componente. Y tenemos en este componente al que llamamos el botón de cantidad, que es éste. Por lo que podemos copiar todo esto. Será exactamente lo mismo. Por lo que necesitamos volver a nuestro componente que está aquí. Entonces definimos el que está también aquí. Por lo que no necesitamos, por ejemplo, toda esta información. Basta con tener guardia, por ejemplo, artículo y le damos cantidad. Entonces en ese caso podemos darle estilo y darle algo de clase. Y tenemos la etiqueta no necesita como vemos en el diseño para poder retirarla. Y el número de entrada p no es importante. Tenemos que importar también. Verificamos cómo lo tenemos en energía salmuera. Por lo que podemos tener aquí entradas, entradas múltiples. Uno de ellos es el número de entrada, por lo que debería ser éste. Se puede copiar, bien, módulo de número de entrada. Por lo que necesitamos importar este a nuestro módulo de pedidos. Lo mismo como lo hicimos con el botón y otras cosas. Por lo que sólo ponemos aquí módulo de número de entrada. Por lo que volver a nuestra plantilla para ver si todo está funcionando bien. De acuerdo, tenemos, no necesitamos usar modelo NG. Te mostraré más tarde cómo podemos obtener el valor de eso. Y el modo será este UML, mostrar botones a través de la cantidad ID de entrada, y tendrá. Por lo que ahora tenemos este número de entrada. Vamos a recargar la página. De acuerdo, vemos como algún problema aquí que está saliendo de nuestro módulo. Esto es, no quiero que te expliques tanto esto porque tenemos que añadir también otra clase para este componente que se llama P Floyd, que es será para esa grilla. Por lo que tenemos que poner en la rejilla el artículo de fuera de guardia también, p Floyd, por lo que en ese caso, o fluido. Por lo que en este caso tendremos la clase correcta fijada aquí porque el fluido P está discontinua con. Plantillas o los componentes de formulario de prime end g. Y necesitas usarlo cada vez que vas a usar componentes de formulario dentro de alguna cuadrícula. Lo último que quiero tener aquí, sólo sumando subtotal. Y cuánto es el subtotal de este artículo de producto subtotal, quiero decir, con ello, como necesito saber cuánto nuestro conjunto muchos son Homero a este precio de este producto multiplicado por la cantidad. Entonces en este caso, puedo usar también el concepto subtotal. Por lo que tenemos aquí también artículos de carta, subtotal y subtotal. Tenemos span aquí porque le voy a dar otro color, que será verde y será duro codificado a un $100. Y podemos darle estilo a esos artículos o a aquellos componentes que agregamos ahora. Entonces, en primer lugar, necesito darle estilo a esa cantidad. Por lo que tenemos aquí P o la cantidad de artículo del carrito. Por lo que el carrito de la clase de cantidad de artículo que
hemos creado aquí y dentro del número de entrada. Entonces podemos dar algunos márgenes, como margen. Podemos decir, podemos dar dos cuando t, como 20 pixel o 15 pixel en general, como podemos, y darle así de arriba y abajo y de izquierda y derecha, nada podemos mantenerlo como 0. Y también podemos para el subtotal, podemos decir sub total clase, podemos dar font-weight, que puede ser 600, como un poco audaz. Y también el valor dentro de este subtotal, como definí aquí, tengo artículos de guardia subtotal, y luego artículos de guardia subtotal y luego valor. Por lo que puedo usar ese beneficio de así, y le doy un color verde. Guardemos todo y veamos si estamos haciendo bien. Agradable Ahora tenemos nuestra inicialización de guardia está lista para los botones que están aquí. Tenemos que colorearlos con nuestro color primario, que también es naranja. Por lo que puedes hacer eso fácilmente yendo a la página del carrito y decir que quiero darle
estilo a todos los botones y darles color de fondo como lo hicimos anteriormente. Entonces si recuerdas, dimos color de fondo, colores
primarios y bordes es 0. Entonces puedes ponerlo aquí, o si sientes que estás usando eso siempre, puedes ponerlo en el archivo raíz en aquí tienda NG. Puedes, si recuerdas, agregamos aquí unas gafas y así puedes decir que solo todos los botones les dan color de fondo. El color primario será así, y el borde será 0. Para que puedas hacer eso. Todo lo que puedes hacer de esa manera. Para que podamos ver los cambios. Y vemos que todos los botones consiguieron este color primario, el cual tenemos. En la próxima conferencia, vamos a ver cómo sentir esos datos de un producto real. Por lo que ahora sólo tenemos el producto. En ese caso, necesitamos sentir que el carrito con datos reales de los productos de la base de datos que el usuario seleccionó y agregó a su tarjeta.
160. Conecta el carrito con productos: De acuerdo, en esta conferencia vamos a conectar el carrito con los productos. Como ven aquí, tengo dos artículos en mi carrito, pero no puedo mostrarlos aquí. Entonces vamos a conectar este carrito, que tenemos ahora la página del carrito con unos productos reales que están dentro de él. Entonces la mejor manera de hacerlo, vamos a agarrar los servicios del producto. Entonces antes que nada, vayamos a su página de carrito como lo hicimos anteriormente. Y ahora vamos a implementar aquí los datos codificados duros que ingresamos aquí con los datos reales. Entonces en primer lugar, voy a tener como algún módulo donde tendré el artículo del carrito con sus detalles. Por lo que al principio aquí podemos empezar a utilizar ese servicio de guardia o como vimos anteriormente. Por lo que iré aquí servicio de guardia privada. Y luego importaré el servicio de carrito. Después de eso. En la inicialización de esta página, voy a tener otro método el cual me
dará la inicialización de su página de carrito. Entonces en NG en él, usaré un método como lo podemos llamar, por ejemplo, obtener detalles del carrito por ejemplo. Y luego definimos los detalles de esta tarjeta. Por lo que de nuevo, tenemos aquí obtener detalles de tarjeta y lo voy a dar como detalles de tarjeta Git privada. Y dentro de eso voy a usar ese servicio de tarjetas. Por lo que el servicio de carrito, observaré la tarjeta actual, que hemos definido previamente y hemos observado, así que diré aquí carrito. Y luego conseguimos pipa, hacemos una pipa. Y entonces hay que recordar que para hacer toma hasta como cuando salga de esta página, voy a destruir la suscripción, que
podamos hacerlo más tarde. Ahora vamos a mantenerlo como por jugar esto y luego suscribirnos. Y luego conseguiría la, por ejemplo, la tarjeta de respuesta que podemos llamarla. Y en esa tarjeta de respuesta, voy a dar, por ejemplo, como artículos de una tarjeta de respuesta. Y luego los pasaré por encima porque recuerdas que hemos creado todos los artículos del carrito y haremos algún bucle por dentro. Entonces como ven aquí, tenemos para cada uno, lo que para cada artículo dentro del carrito artículo, así que por ahora tengo dos artículos y se almacenan en el almacén local y en mi carrito. Entonces iré aquí,
recorreré cada artículo y obtendré el producto, y obtendré la cantidad hasta el momento que necesitamos también para repasar el servicio del producto. Entonces decimos aquí como artículo Garth. Por lo que vamos a volver aquí cada artículo del carrito y voy a recorrer sobre ellos. Entonces vamos a la consola log, como estar seguros de que estamos haciendo todo está bien. Entonces voy a decir aquí, consola log para mí ese artículo de carrito donde estoy bucle. Entonces después de eso, la aplicación se vuelve a cargar. Abrimos de nuevo la consola y veremos que nos dieron dos objetos, uno con ID de producto y cantidad, y otro con ID de producto y cantidad. Pero el id, como ves, no
es suficiente porque necesito el nombre del producto, el precio, la imagen, y también esta hasta hija, la cantidad, tanta información sobre el producto. Por lo que necesito usar el servicio de producto. Entonces para eso, podemos usar también ese servicio de producto. Pero estoy seguro, como tú no tienes que seguir esto porque yo lo soy, quiero mostrarte un error que diremos cara ahora, y seguiremos arreglando ese error en la próxima conferencia. Entonces aquí tengo un servicio de producto. Yo lo usé para que podamos conseguirlo producto o servicio. Y será proveniente del nombre de la organización de productos. Entonces podemos ir aquí y decir servicio de productos de importación de pero ¿de dónde? De la biblioteca de productos. Por lo que podemos tener aquí bits azules y luego productos biblioteca. De acuerdo, ahora todo sigue bien. No tenemos ningún tema. Voy aquí a por cada artículo de carrito, si recuerdas, tenemos ID de Producto para obtener el producto. Entonces hagámoslo. Por lo que voy a decir este punto servicio de producto, punto, lo siento, el servicio de producto que definimos dot get product. Y luego carrito artículo, que me dieron aquí en el bucle, dot id producto. Porque si recuerdas, un buen producto está funcionando con una buena ID de producto como lo hicimos en las secciones del panel de administración. Entonces aquí tenemos ese buen producto y vamos, por ejemplo, a suscribirlo. Y podemos decir producto como este. Al igual que obtendríamos el producto en su respuesta y vamos a mantenerlo vacío. Cuando guarde, obtendré error en la consola y también en la aplicación. Te diré por qué. Esto se debe a que estamos teniendo llamadas de recursos o dependencia circular, que se llama mencionada aquí. Porque como sabemos previamente que usamos ese servicio de guardia en la biblioteca de productos donde lo usamos en el admin o lo siento, en el artículo de producto, como recordamos aquí. Entonces si voy al artículo de producto en la biblioteca de productos, tenemos aquí la lista de productos de la página del producto, y uno de ellos es componente llamado producto item. Y si recuerdas, utilizamos el servicio de tarjetas. Entonces este es un, un gran problema para mí aquí porque ese servicio de producto o biblioteca de productos está usando la biblioteca de pedidos. Y al mismo tiempo, biblioteca
ordenada está usando la biblioteca de productos. Entonces de esa manera, tendremos bucle entre pedidos y productos. Entonces como ves aquí, utilicé de productos Biblioteca y aquí usé en el,
en los productos que usé de la biblioteca de pedidos. Entonces esta es la razón por la que estamos recibiendo un error aquí. Y dará algunos no pueden leer propiedad o el de indefinido, que es error indefinido por esta dependencia circular. Cómo podemos resolver eso, vamos a resolverlo con la solución más simple. Como te mostraré nuestra, EU, te mostraré en la próxima conferencia. Porque tenemos múltiples soluciones para eso. Una de ellas es duplicar algún código en la biblioteca de pedidos en lo que respecta a obtener el producto. O vamos a hacer una clase padre que está sosteniendo dos bibliotecas que hace referencia.
161. Eliminar las dependas cirulares entre las bibliotecas: De acuerdo, como vimos previamente que nos dieron un problema en dependencia circular. Entonces, en otras palabras, vimos que la biblioteca de productos depende de la biblioteca de pedidos. Y también la biblioteca de pedidos está dependiendo de la biblioteca de productos. Y este concepto en x en general o en angular en general es molesto Angular. Por lo que angular no le gusta tener dependencia
circular porque no se trata de implementación probada. Cuando se va a implementar una biblioteca. La biblioteca debe ser totalmente independiente y no depende ninguna otra biblioteca que se encuentre en el mismo repositorio o en el mismo proyecto. Especialmente si quieres deshacerte de la biblioteca de productos, no
vas a tener temas que entonces necesito sacarme a través de ella también de la Biblioteca Arbutus. Entonces una de dos soluciones que vamos a hacer. En primer lugar, voy a hacer una solución fácil. Entonces que es, yo voy aquí, por ejemplo, en su página de producto o página de carrito. Voy a crear en el servicio de pedidos algo llamado get product, que es exactamente el buen servicio de producto, que viene del servicio de producto. Entonces aquí como solución, voy a decir que, bien, buen producto, y este producto se implementará, por ejemplo, en los servicios de pedidos. Por lo que ya no vamos a usar ese servicio de producto. Entonces la otra solución es hacer una biblioteca base, como se ve aquí. Entonces tenemos, por ejemplo, una dependencia que se llama biblioteca base. Yo creo una tercera biblioteca. Y entonces esta tercera biblioteca contendrá modales como pedido de producto, tarjeta, producto I, artículo de pedido, y dos también, como modelos múltiples, todos los modelos de mi proyecto. Y entonces tendré servicios abstractos. Por lo que no voy a tener la implementación de estas áreas como
no voy a tener obtener ventas totales y la implementación de la misma, no, voy a tener abstracto. Y entonces la biblioteca de productos implementará este servicio abstracto. Por lo que en ese caso, toda esa biblioteca no dependerá de la biblioteca de productos, dependerá de la biblioteca base. Por lo que en cualquier cambio que quieras hacer en la biblioteca de pedidos, necesitas hacerlo también en la biblioteca base. O en otras palabras, siempre se
necesita implementar algún personal que se crea en la biblioteca base. Por lo que necesitas implementar siempre todo en la biblioteca de pedidos cuando tienes, por ejemplo, método de obtener órdenes en la biblioteca base. Por lo que en la sección de refactorización, en la siguiente sección de esta sección, vamos a hacer una refactorización y hacer esta biblioteca base. No lo voy a hacer ahora porque ahora nos estamos centrando en el lado de la tarjeta. Veremos más adelante cómo podemos refactorizar nuestro proyecto y usar una biblioteca base, entonces no tendremos dependencia circular como vemos aquí. Entonces hagámoslo. En primer lugar. Voy a tener en lugar de servicio de producto, que importé de la biblioteca de productos, tendré servicio de pedidos. Por lo que podemos usar aquí servicio de pedidos. Y en lugar de ésa, decimos Servicio de Pedidos y servicio de pedidos. Yo lo voy a importar desde. Es mejor cuando estás en la misma biblioteca no importar del camino. Se puede importar desde ruta relativa. Entonces que es más fácil y limpio. Por lo que ahora eliminamos esta parte y utilizamos el servicio de pedidos. El servicio de pedidos en ese caso debe contar con un buen método de producto. Por lo que actualmente tendremos duplicación de código, lo cual no es un gran problema para nosotros ahora porque lo vamos a refactorizar más adelante. Entonces por ahora, voy a ir al servicio de producto. Aquí. ¿Dónde está? ¿ Aquí? Contamos con servicio de producto. Y yo sólo quiero conseguir producto. Por lo que copiamos este. Y luego vamos al servicio de pedidos y creamos aquí este método. Por lo que el servicio de pedidos verá ese servicio de producto también. Entonces en ese caso no tendremos dependencia circular. Pero mira, tenemos aquí un producto, también el modelo con códigos para mí, una dependencia circular. Entonces tal vez puedas mover el modelo aquí también, hacer un duplicado del mismo, o simplemente ponerlo ahora como cualquiera. Y vamos a refactorizar que todo lo ponemos ahora cualquiera, como voy a conseguir el producto por supuesto objeto producto, pero voy a utilizar cualquiera por ahora. Y para la URL de la API, tendremos otra URL de API aquí. Entonces que se llama. Productos, por lo que podemos llamar a eso uno productos. Y aquí tendremos productos también. Entonces en este caso, estamos teniendo la aplicación del código, pero no es cuestión porque lo vamos a refactorizar. Entonces solo ten paciencia conmigo porque vamos en este curso paso a paso. Entonces ahora puedo ver que el buen producto está funcionando bien aquí, que es exactamente el servicio de producto que creamos en la biblioteca de productos. Por lo que ahora voy a tratar de ver si realmente estoy consiguiendo esos productos detallados de mi artículo de carrito. Console log el producto que obtuvimos del servicio que hemos creado. Entonces vamos a guardar todo e ir a nuestra aplicación. Se recarga, y ya no tenemos esa dependencia circular. Entonces como ven aquí. Por lo que necesitamos también en el futuro eliminar esta dependencia que hemos creado sobre el servicio de carrito, porque se utiliza un servicio de autos en la biblioteca de productos. Por lo que también necesitamos implementar eso. Por lo que ahora tenemos todo el detalle del producto. Entonces como ven, tengo dos productos en la guardia. Tengo los detalles de ellos. Entonces vamos a crear o vamos a crear plantillas o reemplazar esta cosas codificadas duro con nuestros artículos de carrito. Entonces voy primero a crear como array. Podemos llamarlo como artículo Garth detallado. Por lo que podemos decir artículos de carta detallados como este serán la cola del artículo del carrito como no tener solo el ID del producto, sino que tendrá el producto en sí. Por lo que podemos dar a este producto detallado exactamente del mismo tipo. Nosotros también lo podemos dar. El carrito artículos detallados. Entonces en ese caso, necesitamos crear ese modelo. Por lo que este guardia también, tendremos no sólo el identificador del producto del artículo de guardia, como tenemos artículos de carta, producto detallado solamente. Y este producto tendrá o será tipo cualquiera por ahora porque de lo contrario tendremos otra dependencia circular. Entonces usémoslo así ahora como cualquiera. Pero por supuesto, lo vamos a reemplazar por un modelo de producto, que está en la biblioteca de productos. Y eso lo vamos a hacer en la refactorización. Entonces aquí no se tiene artículos, es un artículo. Por lo que necesitamos aquí un artículo y será array de esos detalles del artículo del carrito. Por lo que necesitamos importar eso también de nuestro modelo de carrito. Aquí lo hemos definido y tenemos también la cantidad que vamos a sumar también otros campos, como veremos más adelante. Entonces volviendo a este detalle de artículo de carrito, recuerda inicializar siempre eso con matriz vacía porque vamos a llenar esta matriz dentro de este bucle. Por lo que decimos este carrito artículos detallados, no
puedo llamarlo de nuevo. Sí, artículos de carrito detallados porque tenemos múltiples aquí, punt push. Nosotros vamos a empujar el producto. Por lo que podemos crear aquí objeto. Y este objeto será el producto, y obtenemos el producto el cual tenemos una respuesta aquí. Por lo que podemos tener aquí no productos, podemos decir producto de respuesta. Por lo que para diferenciar entre esos productos y producto de respuesta. Por lo que en ese caso tendremos producto. El producto de respuesta y la cantidad será Garth item dot quantity. Entonces lo guardamos todo. Está bien, bien. No tenemos ningún error. Ahora saltemos a esa plantilla. Por lo que como ves, hemos creado en elemento de guardia. Por lo que necesito recorrer este artículo del carrito varias veces para crear múltiples artículos del carrito aquí. Entonces sólo tenemos uno ahora. Pero si pongo aquí MD4 y en este MD4, voy a decir dejar artículo de carrito fuera de guardia artículos detallados. Por lo que necesitamos tener artículo de carrito de Dios artículoDetalle uno por 1. En primer lugar, vamos a reemplazar la imagen. Entonces diría aquí, no la única fuente, como tendríamos SRC. Y entonces diré artículo producto punto, imagen de punto. Como ven aquí, no estamos consiguiendo autocompletar porque definimos el producto como cualquiera. Pero vamos a conseguir campo de imagen después de que vamos a hacer eso. Si factoring. El Alt, por supuesto también podemos poner el nombre del producto. Entonces para Aren no se puede hacer esto. Solo tienes que hacer ATTR como atributo dot alt. Y luego puedes usar de nuevo carrito artículo producto punto, nombre de punto. Y aquí lo vamos a reemplazar por nombre
del producto para que no digamos nombre del producto codificado duro. Decimos carrito artículo punto producto, nombre de punto. Exactamente cómo está en el modelo, cómo lo estamos consiguiendo desde el back-end. Entonces aquí vamos a decir producto punto, precio punto. Y aquí tenemos el artículo moviendo el carrito. Eso lo vamos a hacer en la próxima conferencia. Entonces tenemos también la cantidad también vamos a trabajar con su cantidad en la próxima conferencia. Aquí, el subtotal es, será como un carrito artículo precio de punto
o precio de punto de producto multiplicado por o más. Se multiplica por la cantidad de punto del artículo del carrito. Por lo que tendremos múltiples artículos de carrito. Cada artículo del carrito tiene su cantidad. Y entonces lo multiplicamos por el precio y obtendré el subtotal. De acuerdo, como ven aquí, tenemos que resguardar artículos que son exactamente dos aquí. Y estamos los estamos teniendo con todos sus detalles como el premio y el nombre, imagen y escritura subtotal. Entonces tenemos aquí a veces advirtiendo, es decir como encontraron dos elementos con la misma identificación. Porque aquí, si recuerdas con la cantidad que dije necesito entrada ID será cantidad. Entonces es mejor como si pudiéramos cambiar esto. Podemos poner, por ejemplo, el identificador de punto del producto por ejemplo. Por lo que será único y no tendremos esa aplicación en cada bucle porque este artículo de guardia está sucediendo dos veces en función mi número o recuento de artículos de mi carrito en su carrito. Entonces después de eso, se ve que dos de estos se crean. Entonces si vamos a Inspect, veremos que tenemos que cargarnos artículos como ven aquí. Hagamos más como un estilo pequeño. Al igual que podemos empujar este margen al fondo. Podemos darle 15 píxeles, como si se separaran así. Podemos hacer eso directamente en la plantilla. Podemos usar prime end, como herramientas de marginación. Por lo que podemos decir p margen botón cinco. Por lo que le dará algún espacio debajo de él, que ya está definido en el NG primo. Entonces, como ven, los tenemos separados. Entonces intentemos agregarle algo a la guardia. Voy a seguir comprando. Yo quiero agregar esta laptop. Por lo que añado al carrito, carrito actualizado. Tenemos aquí tres artículos en el carrito. Entonces vamos a cerrar esto e ir a nuestro carrito. Agradable. Tenemos tres artículos en su carrito ahora. Por lo que en la siguiente conferencia vamos a trabajar con borrar el artículo del carrito, y vamos a trabajar con la cantidad, actualizando la cantidad desde el almacenamiento local. A modo de recapitulación, recuerdan, hemos refactorizado nuestro servicio de pedidos. Agregamos el producto para obtener producto En orden de servicio, lo cual es en mi opinión erróneo porque tenemos la aplicación en el código entre la biblioteca de productos y la biblioteca. Pero como les dije, vamos a arreglar eso en la parte de refactorización. Quiero que lo pruebes de tu mano para ver realmente la diferencia entre tener como esta duplicación o cómo vamos a crear una biblioteca base en, heredar de ella todos los métodos abstractos e implementarlos en la biblioteca. En ese caso, no tendremos ninguna dependencia circular entre bibliotecas y la tendremos exactamente de esta manera.
162. Eliminar los productos del carrito del carrito: Bienvenido de nuevo. Ahora vamos en esta conferencia a eliminar elemento de la tarjeta. Entonces como recuerdan, hemos creado múltiples artículos y ahora voy a eliminarlos de mi carrito. Entonces si el usuario cambió de opinión y quiere filtrar algunos elementos, no
quiere, por ejemplo, a Y este. Por lo que puede hacer clic en este botón y luego se puede eliminar. Entonces si recuerdas en nuestro código en la plantilla, tenemos un método al dar click en este ícono que tenemos borrar elemento de guardia. Entonces pasemos también. El artículo Garth, que tenemos aquí al final te FOR loop es de auto los artículos detallados. Entonces y luego voy al archivo ts y luego recibo este artículo del carrito. Por supuesto, este tipo de artículo del carrito será artículo del carrito detallado. Y luego vamos a llamar a un servicio desde el carrito. Y este servicio lo podemos crear aquí. Por lo que es exactamente algo así como set cart item. Estamos recibiendo un artículo de Garth y luego lo estamos empujando de nuevo a nuestro almacenamiento local y actualizamos nuestro observable de su carrito. Debidamente definido que tenemos un nuevo dato de guardia. Entonces hagámoslo. Entonces voy a crear un método. Podemos llamarlo borrar elemento de guardia. Necesitan artículo de carrito. Basta con obtener solo el ID del producto,
ID, que está dentro de este artículo de guardia. Por lo que podemos tener el ID del producto como una cadena. Y luego volvemos a hacer una recepción de su carrito. Entonces tenemos que volver a conseguir su carrito porque vamos a actualizar esta guardia. Y entonces estamos teniendo un filtro. Por lo que vamos a filtrar los artículos del carrito para recibir todo de nuevo, excepto el ID del producto o el artículo del carrito con este ID del producto. Entonces lo que tengo que hacer, voy a crear una constante, llamaré en tu carrito. Y esta una nueva tarjeta será Dios, los artículos. Y luego los voy a filtrar. Si recuerdas, tenemos como método de filtro donde está devolviendo para mí artículos bajo alguna condición. Entonces si todo el pedido, el ID del producto no es igual al artículo que tengo recibiendo aquí. Entonces me devolverá todos los demás artículos que no tengan el ID del producto. Por lo que en ese caso, conseguiré un carrito nuevo excepto este artículo de guardia el cual tiene este ID de producto. Por lo que voy a decir item dot product ID, no
igual, como dame todo lo que no es igual a la ID del producto que he recibido del artículo del carrito. Entonces después de eso, tenemos un recibir esta constante. Y simplemente decimos que este carrito o carrito que creamos puntos artículos, dale de nuevo, luego te atrapaste. Por lo que nuestra guardia se actualizó. Ahora lo vamos a actualizar en el almacén local. Entonces exactamente igual como lo hicimos aquí. Necesitamos crear esa cadena JSON. Entonces podemos llamar a este JSON, podemos llamarlo como cadena de guardias y, o por ejemplo, podemos decir cadena JSON. Y luego fue 10 Guifei it. Por lo que puedo ser capaz de configurarlo en el almacenamiento local como una cadena. Y por supuesto, no olvidamos al final actualizar que se hizo observable. Por lo que veremos las actualizaciones en el front end también. Si por cada artículo o por cada componente que esté observando esta guardia observable. Entonces vamos a guardarlo todo y probarlo en nuestro front end. Por lo que veremos que tenemos dos artículos. Eliminemos uno de ellos. Entonces cuando borro uno de ellos, veo que no pasa nada porque no vuelvo a llamar al servicio. Entonces vamos de nuevo a nuestra página de carrito y tenemos que recibir este servicio de carrito de puntos que borran artículo de Garth, pero lo que tengo que pasar el ID del producto, así que voy a obtener el carrito artículo punto-producto, dot ID. Entonces intentemos eso ahora voy a dar click en Eliminar. Agradable. No pasó nada, pero su tarjeta se actualizó. Y aquí tengo artículo extra que es algo malo. Te diré por qué. Porque si lo sabes, tenemos un guardia observable y este guardia el observable está disparando todo dentro de la suscripción otra vez cuando hay actualización que viene en su carrito. Entonces en ese caso, tengo también, nuevo un guardia de respuesta artículos para cada uno. Y luego vuelvo a obtener el producto y los empujo al carrito artículo detallado de nuevo. Por lo que los detalles del artículo de guardia antiguo tendrán artículos. Y también cuando elimine y esto se
actualizó, volverá a agregar ítems, que aún están. Su carrito en el almacén local. Por lo que la mejor manera de resolver este problema, podemos inicializar siempre ese elemento de guardia detallado con matriz vacía. Entonces cuando hay actualización llega al carrito, entonces simplemente vacíe ese artículo del carrito donde estamos bucle aquí. Por lo que de esa manera se vaciará y se llenará de nuevo. Entonces después de eso, voy a ver que mi carrito se está poniendo al día. Entonces vamos a guardar esto e intentarlo de nuevo en nuestra parte delantera. De acuerdo, ahora sólo tenemos un artículo. Entonces sumemos, por ejemplo, éste y éste, y volvamos a su carrito. De acuerdo, tenemos tres. Entonces cuando borre este, veré que se actualizó de nuevo. Está bien, se ha actualizado. Cuando añado un florecimiento de la página, todavía
tengo este artículo de carrito aquí. Por lo que en ese caso, garantizamos que estamos borrando siempre ese tipo de artículo del almacenamiento local. Y también de nuestra guardia observable, que está enviando cada comentario o cada cambio a los suscriptores, como por ejemplo, este icono porque se está suscribiendo a la cuenta. Y así para otras páginas donde se están suscribiendo al carrito. Entonces ahora tenemos aquí un tema. Vamos a arreglarlo rápido. Yo quiero obtener el conteo de cartas para que podamos hacerlo fácilmente haciendo otra variable que se llama cuenta de guardia aquí. Y esto al principio será 0. Entonces por ejemplo, lo tendremos como un 0. Eso lo hicimos anteriormente exactamente aquí en el icono del carrito. Por lo que el conteo de tarjetas tendrá el después de suscribirse al carrito observable, voy a ver artículos de carta enlaces me dan la longitud o me dan 0, y así aquí, no se olvide de poner este signo de interrogación en caso de que no haya artículos o totalmente. Por lo que vamos de nuevo a la página del carrito. Y dentro de esta suscripción de esta tarjeta, vamos aquí y decimos como no antes para cada uno tenemos que decir este punto o por ejemplo, tarjeta de
respuesta aquí en ese caso. Entonces decimos guardia Conde, dame el conteo de cartas aquí, actualizado con esa respuesta, que viene del jardín observable o sujeto de comportamiento. Y aquí necesitamos reemplazarlo con conteo de tarjetas porque si recuerdas, lo
tenemos aquí como hardcoded. Ahora, lo tendremos como un número real de cuantos artículos dentro del carrito. Entonces, vamos a guardar eso, guardar este. Y luego vamos a la aplicación. Veremos que tenemos también los artículos correctos que estamos agregando aquí. Entonces exactamente cómo lo hicimos con esta insignia o icono. Entonces podemos revisar ahora, ya vemos, vale, son tres. Nosotros sí comimos. Está cambiando a dos. Por lo que todo se observa y está al día. Entonces lo último, solo quiero agregar que necesitamos siempre cuando visito esta página de guardia, necesitamos terminar la suscripción. Entonces también, tenemos que hacer tomar hasta como siempre lo hacemos. Y luego este punto n subs. Recuerda, lo hemos definido varias veces. Y cada componente que se necesita para ingresar a la suscripción.
163. Widget resumen de orden: De acuerdo, en esta conferencia vamos a hacer este resumen de orden. Y esta orden a alguien. Es exactamente como lo hicimos y cómo observamos los artículos del carrito y llamamos al producto e hicimos el cálculo del subtotal. Yo voy a hacer lo mismo aquí. Entonces vamos a crear el componente. Eso ya lo he creado. Entonces el componente, utilicé la consola un x, y luego he creado un componente y le doy un nombre, resumen de pedidos. Y este componente se ubicará en los componentes dentro de la biblioteca de pedidos, y se importará automáticamente al módulo de pedidos, por lo que podremos utilizarlo en otras páginas. Entonces, ¿por qué lo hice como componente? Porque lo voy a utilizar en su página de carrito, como ven aquí, lo llamé en nuestra página de carrito como lo hicimos anteriormente. Y además, lo voy a llamar en la página de pago. Entonces cuando vamos a reemplazar este contenido aquí por la dirección del usuario. Por lo que también vamos a mantener este resumen de orden como cualquier e-sharp formal. Entonces ahora lo que hice exactamente es solo dar como algo de plantilla. Dé como h3. Hacer este resumen del pedido. Voy rápido porque lo hicimos varias veces. Te adjuntaré el código para que puedas continuar con el curso. Ahora, tenemos el precio sumario también. Y yo estoy haciendo aquí algún cálculo para el precio total, que estará en el script de componentes como veremos más adelante. Y además, estamos haciendo algo de inflamación como empacar y enviar. Es información codificada de forma dura. Yo lo doy como algún estilo, que se llama precio sumario o envío sumario. Y luego vuelvo a mostrar el precio total, que será como el precio total será el mismo aquí. Entonces es igual que algunos datos aleatorios de declaración. Yo sólo lo estoy haciendo como en un caso como ser lucir como verdadera e-shop. Por lo que tenemos aquí el vendedor Artículo y
será exactamente cuando agrego un nuevo artículo a calcular aquí. Entonces veremos cómo hicimos eso. Por lo que estoy teniendo aquí como alguna plantilla, lo peiné. Añadí este archivo de marcado a nuestros estilos públicos, que estarán dentro de estilos, labios, y luego órdenes. Y tengo aquí Resumen de Pedidos. Y este pedido alguien le doy al contenedor de la misma como fondo de color
blanco y algún borde para mantener el mismo estilo, algún relleno. Entonces di el flex display de precio, que será como este div aquí. Por lo que tendrá dos columnas. Una columna será la info o su etiqueta, y luego el valor de la etiqueta. Otra vez aquí tenemos algo como tenemos otro como precios de artículo. Y entonces tenemos aquí span, dos tramos como ellos se muestran como Flex y se alinearán uno cerca del otro. Y le doy a este flex de diamante que son como bloque. Porque si no los exhibes como bloque, los tramos, se
pegarán entre sí y no se les considerará
como, como un div, podemos decir. Por lo que tenemos aquí bloque de exhibición que abarcan, como ven, tenemos dos tramos aquí. Primer ban y segundo lapso, digamos el primer lapso y el segundo en cada fila. Entonces, ¿qué, cómo hice estilo? Acabo de leer directamente a esta banda. Yo le di al primero con 80%. Entonces como ven aquí, tiene 80%. Por supuesto también puedes usar la cuadrícula. Simplemente lo hice como de manera diferente solo para mostrarte que
tampoco puedes tener que depender de la en la grilla siempre. Y luego dije, último hijo, último gigante del contenedor como alguien precio tiene lapso. Y último hijo de este lapso tendrá 20 por ciento font-weight 600. Entonces tengo esas bandas. Este es primer hijo, y este es el último gigante del contenedor, que se llama precio sumario. Entonces como ven aquí, tenemos este 80% y este será del 20 por ciento. Y después de eso tengo otra fila y luego tenemos un botón para el checkout. Por lo que este botón me llevará a la página de pago como veremos más adelante. Entonces ahora tenemos ese estilo. Como ves, ponemos algo de información, es muy fácil. Añado que también el estilo con esta conferencia. Por lo que agrego ese componente. Para que no lo hagas, no tienes que volver a escribir conmigo o detener el video. Simplemente puedes agarrar el componente. Tengo la plantilla, tengo el guión, y he puesto el estilo también en el apego o a los recursos de esta conferencia. Entonces ahora vamos a hacer por eso, el cálculo del precio total. Entonces por ejemplo, tengo que ir aquí a añadir otro producto y otro producto. Vuelvo a ir a la guardia para comprobarlo. De acuerdo, Tenemos aquí el precio calculado automáticamente, que será resumen de todos estos precios aquí. Entonces cómo se puede hacer esto. Por lo que es muy sencillo. Acabo de suscribirme de nuevo a su carrito como lo hicimos exactamente con esa página de guardia. Y luego inicializé en cada cambio de este carrito. Entonces inicializo algo llamado precio total. Se trata de una variable fija o miembro de clase, que se llamará precio total, que sería un número. Y luego fui otra vez al jardín. Aquí, revisé si tengo un guardia regresando de esta suscripción, lo
estamos observando. Y luego miré los artículos de este carrito y luego
llamé al producto por cada artículo de la tarjeta. Toma uno. Aquí. Yo sí tomé uno porque lo estamos llamando una vez. Entonces cuando haces una suscripción para eso, entonces te daría capacidad de darte de baja fácilmente para que no tengas que hacer toma hasta como n subs hasta que el componente se destruyera tan fácilmente que puedes hacer eso. Simplemente dices que toma uno, yo tomo uno y termino la suscripción automáticamente. Por lo que agarrará uno y luego terminará la suscripción. Entonces aquí no te importa la fuga de memoria. Este bistec viene también de nuestro x j como operadores, por lo que puedes usarlos también. Y luego nos suscribimos a su producto. Y entonces digo que el precio total, que inicializé en cada cambio de su guardia, será el precio del producto multiplicado cantidad de artículo. Pero más igual. Esto significa que quiero hacer algo así. Por lo que el precio total por cada artículo solo se acumuló con como precio total anterior. Y luego con este precio en absoluto, Como por ejemplo, la hija de la cena. Entonces con un subtotal que calculamos aquí. Entonces en ese caso, puedes hacerlo más pequeño. Simplemente dices más igual. E igual te dará un producto del precio, como artículo.quantity. Y se acumulará a este precio total. Sólo cuando llega un cambio, entonces se inicializará a 0. Por lo que en ese caso, somos capaces de recorrer
los artículos y calcular el precio total que estamos agregando, agregando, agregando. Y entonces se calculará de la manera correcta. Entonces eso es todo. No hay nada complicado. Por lo que ahora hemos definido también subs. Por lo que será en la ONG onDestroy. Yo no agregué eso. Por lo que necesitamos agregar energía onDestroy también para evitar. Y luego veremos que estos dos extremos serán los próximos. Y también este nodo n subs estará completo. Por lo que cuando deje este componente, terminaré la suscripción al guardia, suscriptor o sujeto de comportamiento. Entonces en ese caso, estoy cada vez actualizando el carrito. Aquí, el resumen del pedido se calculará automáticamente. Entonces voy aquí, voy otra vez, añado al carrito, podemos agregar más artículos. Vuelvo a mi carrito. Eso lo voy a ver aquí. Está bien. Tengo más artículos y me está calculando el resumen de orden correcto, el último azulejo que me gustaría hacer, tal vez podamos hacer este botón completo, como ser botón grande y mostrado bien, atraerá la mirada de el usuario. Por lo que podemos hacer eso simplemente en este archivo de marcado. Voy al resumen del pedido. Si recuerdas, tenemos aquí pedir a alguien que creé botón check out dentro del resumen del pedido para que podamos escuchar. Pedimos que alguien vaya y abrimos una nueva clase. Lo llamamos botón check out y el botón dentro del resumen tendrá ancho 100%. Y comprobamos que recarguemos la aplicación, está bien, tenemos ancho completo del botón Checkout. Y cuando hacemos click en el Check out, debemos pasar a la página de checkout. Como veremos más adelante.
164. Actualizar la cantidad del artículo: De acuerdo, en esta conferencia vamos a ver cómo podemos actualizar la cantidad del artículo de guardia. Por lo que en ese caso, necesitamos actualizar esta cantidad de artículo de guardia de la forma en que actualicemos también el subtotal y el resumen de la tarjeta. Entonces, en primer lugar, empecemos con inicializar nuestra cantidad cuando la cantidad que el usuario ordenó. Entonces, por ejemplo, cuando vaya, nuevo, actualicemos esta página. No tengo nada aquí. Entonces inicialicemos con el número de artículos dentro de esa cantidad. Entonces, en primer lugar, tenemos que ir a nuestro número de entrada que hemos creado. Está doblado este. Y este número de entrada tiene como cantidad mínima, máxima. Vamos a agregar algo como en la documentación de la energía delictiva. Por lo que siempre siga la documentación. Entonces como ves, tenemos aquí modelo NG y modelo NG, se
puede especificar valor, así que simplemente, se puede decir, bien, y modelar, y luego al final se modela, decimos item dot quantity, ok, pero estamos todavía obteniendo error. Es como no puede atar modelo NG. Siempre cuando se obtiene este error, como no se puede vincular el modelo NG ya que no se conoce el número de entrada de propiedad. Esto se debe a que necesitamos importar un módulo que se llama módulo de fuerza o módulo de formas. Entonces donde tenemos que importar este módulo, importamos previamente en múltiples módulos, como productos y también como en la propia aplicación. Entonces lo que podemos importarlo aquí también. En la biblioteca de pedidos, tenemos módulo de órdenes. Decimos que nuestros componentes también usando formularios módulo cuatro como módulo contienen todos estos ítems los cuales necesitamos para la forma. Por lo que en ese caso, vamos a tener que nuestra aplicación y se actualizó con la última cantidad las cuales se definen dentro del carrito. Y vemos aquí que hemos inicializado con su cantidad. Voy a añadir al carrito otro también de este artículo. Por lo que iría al producto e iría a este producto. Añadiré cuatro, por ejemplo. Está bien, me actualizé. Voy a mi carrito. Veré que tengo cinco porque antes tenía uno. Por lo que ahora tenemos cinco de este ítem. Y también el resumen del orden está funcionando bien. Pero ahora, vale, esto está funcionando bien. Le gusta un subtotal, como ves aquí, porque viene por cálculo entre la cantidad del artículo y el precio del producto. Por lo que es fácil de calcular y se actualiza automáticamente. Pero lo que necesitamos actualizar también es resumen de pedidos. Entonces cómo podemos actualizar resumen de pedidos o así cuando recarguemos la página, ves tengo aquí de nuevo cinco, pero quiero guardarlo. Yo quiero mantener siempre este cambio. Entonces la mejor manera de hacerlo es actualizando el propio carrito. Cómo hacemos actualización en el propio carrito. En primer lugar, vamos a tener un evento. Cuando cambie esto, leeré el valor y haré algo con ese valor. Entonces, en primer lugar, vuelve a la documentación. Quiero algún evento el cual se dispara cuando cambié el valor de este número de entrada. Sigue siempre la documentación. Volverás a ir a prime, al final del número de entrada. Y ves en la documentación que tienes propiedades como como lo vimos aquí, que tenemos Mostrar botones, ID de
entrada, etcétera. Y además, tenemos también eventos. Y esos eventos, se están comportando con base en la interacción del usuario sobre ese componente. Entonces aquí tengo algo que se llama en entrada. Entonces cuando se ingresa el valor, cuando el usuario ponga un valor dentro de esta entrada, entonces se activará un evento. Entonces, ¿cómo podemos disparar o llamar al evento? Simplemente vamos aquí al componente. Y es como como tenemos con OnClick o por ejemplo, como este o por ejemplo, en enfocarnos en algo onclick, onmouseover. Lo mismo que tienes que hacer aquí Que solo dices en entrada, porque ya está definida como una propiedad de ese componente, que se llama número de entrada p. Por lo que oninput, crearé un método, lo
llamaré actualización, guardia cantidad de artículo. De acuerdo, entonces, ¿cuáles son los parámetros de este método? El parámetro será primero es evento, porque quiero leer el valor de esta entrada. Cuánto es ahora el valor que se metió en valor como aquí. De acuerdo, yo lo cambio, necesito conseguir cuatro. Entonces necesito leer ese valor. Entonces para hacer eso, pasamos algo llamado evento. Debe estar prefijado con este signo de dólar. Por supuesto, es evento el cual se puede disparar para cada tipo de salidas. Esto se llama salida, y esto se llama entrada. Entonces en componentes de angular, defines salidas e entradas para cada componente. Entonces ahora tenemos esto definido aquí, y también necesitamos pasar el artículo del carrito en sí. Entonces vamos a crear este método. Iremos al archivo TypeScript y luego creamos este método, el parámetro, como dijimos, será parejo, no
tienes que poner prefijo con signo, signo dólar y solo ponemos evento y también el artículo de carrito. El artículo del carrito será el artículo de guardia detallado porque estamos agarrando del bucle for. Por lo que será guardia el artículo detallado. Si recuerdas, cuando estábamos configurando un artículo de carrito, estaba llamando a este servicio de carrito de puntos y luego establecer artículo de carrito, ese artículo de carrito, necesitamos pasar el artículo del carrito en sí. Entonces como ven aquí, necesitamos pasar el artículo de Garth y luego se establecerá. Pero este caso, cuando estoy agregando un nuevo artículo de carrito al carrito. Entonces para eso vamos a comprobar si ya
tenemos el artículo del carrito y estamos aumentando la cantidad. De lo contrario, empujamos el artículo del carrito recientemente y en Europa tal como está. Entonces aquí no pasamos el artículo del carrito, pero pasamos lo siguiente. En primer lugar, necesitamos tener id del producto para el artículo del carrito, que vendrá del carrito artículo producto punto, ID de punto. Y también necesitamos pasar una cantidad, esa cantidad que estamos leyendo de este evento. Entonces vamos a comprobar qué es este evento me está devolviendo y cómo podemos leer el valor. Entonces comentemos esta parte. Lo estoy haciendo con Control slash y va a comentar para mí o las partes o las líneas que seleccioné. Entonces tenemos aquí evento console.log, así como así. Entonces cuando actualice la cantidad, quiero ver algo. Entonces abrimos la consola y luego voy a actualizar la cantidad. ¿ De acuerdo? Estoy obteniendo objeto, que se llama evento original, como el evento que se hace, que es clic con el ratón, y el valor. Entonces lo que nos importa es el valor. Por lo que tenemos que decir aquí, valor de punto de evento. Volvemos a ir a nuestro front end. Nosotros lo intentamos. Cambiamos este valor. Vemos que estamos consiguiendo ahora que agrego valor, eso es genial. Por lo que necesitamos para su artículo de carrito aquí, esa cantidad será el evento que valore. Por lo que aquí tenemos valor de punto de evento. Entonces si voy ahora al frente y pruebo eso. De acuerdo, vemos que estamos aumentando pero equivocados. Ya ves que es como
duplicado varias veces porque hay algún cálculo equivocado sucediendo. Mira, realmente se está equivocando y equivocando más. Entonces lo que podemos hacer en ese caso, tenemos que revisar nuestro artículo de carrito conjunto. Entonces si recuerdas, cuando existe el artículo del carrito, estoy enviando el artículo del carrito con la nueva cantidad y entonces estoy aumentando la cantidad. Entonces estoy calculando si su artículo de carrito ya existe, estoy aumentando la cantidad con la cantidad anterior. Entonces en ese caso, estamos obteniendo una acumulación equivocada. Por lo que sólo estamos aumentando cada vez más. Por lo que tengo, ahora cuando haga clic en 525, se sumará 525. Entonces será lo que haya en sus autos antes, y luego tendrá más acumulación como ven aquí. Entonces en ese caso, tenemos que decir para establecer artículo de carrito para actualizar la cantidad, no por ejemplo, agregar a la cantidad. Entonces porque antes de aquí hicimos eso porque vamos a decir que si canchas, si el usuario viene aquí y él da click en Agregar al carrito, otro agregar al carrito, entonces si el artículo existe ya en su guardia, aumentamos la cantidad. Pero ahora nuestro caso aquí estamos actualizando totalmente esa cantidad. Por lo que necesitamos leer este valor y eliminar la cantidad antigua y actualizada con el número que se encuentra aquí. Entonces para eso, voy a agregar otro parámetro para establecer servicio de artículo de carrito, que se llama artículo de carrito de actualización, como justo esto y este artículo de guardia de actualización será opcional, como no ser requerido cuando llame set cart item, porque a veces solo estamos enviando el artículo de guardia para actualizar o agregar la cantidad o empujar un nuevo artículo de carrito. Por lo que este no será requerido. No vamos a obtener ningún error en los otros objetivos de este artículo de carrito conjunto. Y luego comprobamos si hay artículo de guardia de actualización, luego actualizamos la cantidad totalmente. O si no, entonces solo toma la cantidad antigua y agrega un artículo nuevo o una nueva cantidad al artículo del producto y actualiza su carrito. Entonces donde se tiene que hacer esto. Por lo que comprobaré aquí. Diré si actualizar elemento de guardia, como si este chicle como cierto, entonces significa que estoy viniendo aquí y estoy dando click en esto. Entonces ese caso, tenemos que decir que la cantidad del artículo solo es igual a la cantidad del artículo del carrito. No tenemos que hacer ninguna acumulación ni sumar toda la cantidad a la nueva. De lo contrario, si es falso, entonces, o si es desconocido, indefinido, o falso, entonces tenemos que hacer esta acumulación. Entonces vamos a guardar eso y necesitamos actualizar nuestro componente de página de artículo de carrito aquí que tenemos el artículo de guardia establecido, vale, primer parámetro es este artículo de guardia. Y luego decimos a través porque necesitamos actualizar el elemento de la tarjeta, no agregar a Descartes. Y digamos más de como algunos artículos que realmente se hicieron grandes. Por lo que sólo podemos tener este. Por lo que voy a aumentar la cantidad como
ven cuando estoy actualizando esa tarjeta se está actualizando. Y también el resumen porque todos en esta aplicación están observando el carrito, porque como recuerdan, tenemos este carrito observable. Y en el servicio del carrito, cada vez que estoy poniendo un artículo del carrito, estoy diciendo al observable, actualice el guardia y notifique a todos. Entonces en ese caso, hemos actualizado la cantidad de artículos de jardín, lo que me ayudará a seguir siempre el resumen del pedido y que Dios se quedará igual siempre incluso añades otro artículo, por ejemplo, aquí, y vas a el jardín otra vez. Verás aquí el artículo. Por ejemplo, voy a añadir este ítem. Nuevamente, éste será siete. Entonces tenemos que ir a encontrarlo. Es ésta la que agregué. Acude a su carrito. Veremos que tiene siete. Entonces de esta manera, estamos seguros de que nuestros datos son fijos, nuestro carrito es fijo. Aquí no tenemos ningún tema. Y estamos listos para ir a la caja.
165. Página Hoja de salida: De acuerdo, Después de tener nuestra página de carrito, vamos a pasar a la página de pago. Entonces para eso necesitamos crear también un nuevo componente que lo estamos llamando página de checkout, como lo hicimos con su página de autos. Entonces vayamos a la siguiente consola, generemos. Y entonces tendremos componente. Y este componente tendrá un nombre que está bajo componente o páginas. Será bajo páginas. Y luego tendrá página de check out. El nombre del proyecto será órdenes porque estamos poniendo en las órdenes. Y luego hacemos lo mismo, lo que hicimos por cada componente. Y nos quedamos con las pruebas. Y además hay que añadir un selector que será pedidos check out page. Entonces aquí que ya tenemos listo para nosotros el componente. Presionamos Ejecutar. Vamos a las páginas de nuestra biblioteca de pedidos. Por lo que debemos tener aquí y se echa un vistazo a la página. Entonces comprobamos eso. Vemos que tenemos página de checkout aquí y tenemos el componente también. Entonces lo que necesitamos, tenemos que añadir una ruta en orden biblioteca, exactamente cómo lo hicimos con la guardia. Tendré aquí checkout. Y veremos más adelante cómo vamos a autorizar esta página. Por lo que vamos a obligar
al usuario a, a buscar y luego puede poner su dirección y luego puede colocar una mayor. Pero ahora vamos a hacer una formulación para chequear. Pero como invitado, como no tenemos. Por ejemplo, el usuario lector está iniciando sesión. Eso lo vas a hacer en el siguiente apartado. Pero ahora solo estamos haciendo orden de colocación normal con una cuenta de usuario existente que se llama invitados. Y luego necesitamos hacer un check out o ir a la página de check out cuando hacemos clic en este botón en su carrito. Entonces, ¿cómo podemos hacer eso? Es muy sencillo. Hacemos lo mismo, cómo hacemos con la navegación normal. Por lo que diremos como router dot navigate y luego vamos a una página específica. O puedes decir un enlace de router en la página de pago y das así en el resumen de pedidos. Por lo que tenemos que ir a pedir componente alguien porque el botón de Checkout existe en el componente de resumen de pedidos. Por lo que aquí vamos a dar onclick. Y este onclick, le daremos como navegar para checar. Y entonces tenemos que crear este método. Entonces volvemos al resumen de pedidos, y luego creamos este método. Decimos navegar para checar, necesitamos importar también el servicio del router. Entonces decimos aquí router privado, y luego será router. Y este router vendrá de núcleo angular, como sabemos siempre. Por lo que vamos a utilizar este servicio de enrutador. Decimos este router punto, dot navigate. Y entonces abrimos array. Decimos dentro de esta matriz que navega por mí para revisar la página. Entonces eso es todo. Entonces vamos a guardar todo e intentarlo si realmente
estamos navegando a nuestra página de pago, que hemos creado previamente. Pero sigo en la página de caja porque cometí un error. Aquí vamos al módulo de órdenes y tenemos que decir
que ese componente será componente checkout,
no componente de página de guardia. Por lo que de esta manera, garantizas que vas a la página de pago. Entonces volvamos otra vez. Acude a nuestra guardia, da click en Check out. Está bien, perfecto. Contamos con pagina de pago funciona. Por lo que la página de checkout, será exactamente igual que la página de guardia. Por lo que tendrá en la parte superior Algo así como volver a su carrito, como botón. Cómo tenemos como volver a su carrito aquí y todo, por ejemplo, volver a comprar. Y además, tendrá una forma. Y la forma será exactamente como hemos construido en el panel de administración. Si recuerdas, voy a mirar adentro y como ves aquí en los usuarios, hemos creado un formulario que nos está dando nombre, correo electrónico,
contraseña, y toda la demás información sobre el usuario. Usaremos el mismo formulario para que podamos copiarlo exactamente igual. Y tenemos que quitar es admin y la contraseña y la otra información podemos usarlos. Por lo que ya expliqué sobre esta forma, cómo conseguimos los países, cómo conseguimos siempre la validación. Entonces cuando se quiere crear un usuario sin validación, la única diferencia que necesitamos para validar esos campos cuando estamos haciendo eso en su página de pago. Entonces en ese caso, vamos a usar lo mismo exactamente extraño que usamos en el panel backend. Usaremos exactamente los mismos componentes como esta entrada. Entonces primero hagamos esa plantilla para la página de pago. Entonces lo que necesito también para tener como una página de pago aquí, como exactamente como tenemos con su guardia. Entonces tenemos. Pagina de pago y tendremos botón lo llamamos de vuelta a su carrito, no de vuelta a la tienda. Y hacemos un botón aquí el cual está de vuelta a su carrito. Por lo que tenemos que añadir también este método. Por lo que tenemos de vuelta a su carrito. Usaríamos también el módulo router. Decimos privada y el router. Y el router. Y este router vendrá de Angular. Y decimos, este router dot navega. Y quiero navegar a la página de su carrito. Entonces es exactamente como estamos navegando siempre. Entonces lo guardamos, lo guardamos. Y vamos a nuestra página de carrito en el front end. Por lo que tenemos aquí echa un vistazo. De acuerdo, ahora tenemos el botón de vuelta a su carrito. Por lo que cuando el usuario quiera cambiar algo en sus autos antes de
salir, puede volver a su carrito. Ahora vamos a añadir el formulario. Por lo que la forma estará también dentro de una cuadrícula. Por lo que lo voy a dar como un puntería gran grilla. Y tendrá un nombre el cual se llama como check out form. Entonces exactamente lo mismo. Entonces dimos forma. Y luego necesitamos usar el formulario que usamos en los usuarios para forma en la parte de atrás y todo en el panel de administración. Entonces vamos a usar exactamente el mismo. Entonces ya he preparado este código porque hemos repetido todo como hablamos de cómo creamos nombre de control de formulario, cómo usar cada componente, cómo usamos el switch, cómo usamos el desplegable, cómo conseguimos los países. Si no sabes hacer eso, solo
tienes que ir a la conferencia donde hemos creado al usuario en el panel de administración. Por lo que aquí puedes usar el mismo concepto. Vamos a usar lo mismo, lo usaremos también. Misma inicialización para la forma como aquí. Vamos a utilizar la misma presentación. Tendremos también que los mismos validadores que utilizamos anteriormente así se requiere, esto no es necesario. Y después de eso, usaremos el mismo modelo de plantilla de pedidos
exactamente y luego haremos el pedido. Entonces déjame importar ahora este código. Entonces tenemos todo el código aquí en la cuadrícula. Por lo que ya he preparado eso. Doy click aquí y tenemos ahora las cosas se importan. Por lo que necesitamos importar algunos controles. Al igual que por ejemplo, necesitamos importar el módulo de modelo de texto de entrada y necesitamos
usar una máscara de entrada y también las otras entradas como el desplegable. Por lo que podemos hacer eso también en módulo de pedidos. Por lo que importamos todos ellos módulo de texto de
entrada, módulo de máscara de entrada, todos ellos a nuestros módulos los cuales se encuentran aquí. Por lo que tenemos una máscara de entrada y tenemos también el desplegable de entrada. Por lo que no tendremos ningún problema en la plantilla. Por lo que la plantilla debería funcionar bien después de eso. Entonces guardamos y no deberíamos ver estos errores sólo porque seguimos viendo este error
porque este nombre de control de formulario no está definido porque
necesitamos también importar algo que se llama módulo reactivo. Módulo de formas tan reactivas, que hemos utilizado también en el panel de administración y hablamos de ello previamente. Entonces aquí, ahora no tenemos ningún error. Entonces si recuerdas en el usuario es forma, tenemos que inicializar un formulario y también conseguir los países. Por lo que necesitamos también usar el mismo código que tenemos aquí. Por lo que he preparado eso también para no conseguir tanto tiempo de ustedes en la conferencia. Por lo que no necesito volver a explicar eso porque
explicamos que ya en las conferencias de los usuarios. Entonces aquí está el formulario que dije en un NG en él, tengo cualquier formulario de checkout y cualquier check out warm tenemos estos checkout form, group, form builder y group. Y enumeré los campos que quiero usar. Y además, solía conseguir países, conseguir países. Lo obtuvimos del servicio al usuario, si recuerdas cómo lo usamos. Y el formulario de checkout, que me devuelven los controles también. Y entonces tenemos se envía el formulario de checkout grupo o sus ítems porque necesitamos leer pedidos ítem para realizar el pedido, como veremos más adelante, el ID de usuario que se utiliza, necesitamos usar también el ID de usuario. Entonces, y tenemos la lista del país la cual se enumerará en el desplegable. Entonces es exactamente este código ahora, actualmente es exactamente como lo tenemos en la forma del usuario. Para que no tengas que escribirlo. Otra vez. Yo lo voy a adjuntar a esta conferencia. Simplemente utilizas esos códigos para tus componentes. Adjuntaré componente de página de pago, el HTML y el TypeScript. También. No hay que olvidar importar esos módulos, que hablé anteriormente en el módulo de pedidos. Entonces ahora necesitamos solo darle estilo. Pero primero vamos a ahorrar para comprobar. Tenemos ahora todo está bien porque necesitamos también darle estilo a la página de checkout. Entonces voy a la caja. De acuerdo, ya tenemos todo. Pero aún tenemos este botón check out porque está en orden alguien componentes. Por lo que necesitamos comprobar si estamos en la página de pago, ocultar este botón. Y ahora tenemos aquí todo, pero también los botones son azules. Entonces vamos a crear primero un archivo de estilo. Tenemos que sumar aquí. Y no sólo los pedidos, necesitamos agregar una nueva carpeta o archivo, lo
llamamos check out. Al igual que podemos simplemente decir check out, SCSS e inyectar o en los pedidos que necesitamos para importarlo. Entonces de esa manera, éste también sería importante. Entonces tenemos que poner aquí, echa un vistazo. Entonces después de importarlos, estamos poniendo el estilo para eso. Entonces lo que hice en el estilo es
exactamente como lo hicimos con la página del carrito, si recuerdas. Entonces aquí tengo la página de pago. Yo le doy min-altura para darle como alguna altura mínima para no ser como muy, muy delgada. Y también los botones que les di color primario borde 0, como lo hicimos anteriormente. Y echa un vistazo al formulario. Yo lo doy como un poco de margen top de aquí para estar lejos del botón. Y también el bot colocando orden. Será de ancho completo porque aquí tenemos también botón Hacer Pedido. Lo pondremos con los fluidos. Se coloreará también a partir de estas clases que definimos aquí con naranja. Y luego vemos que tenemos todo como ellos checan de vuelta al carrito y el pedido del lugar. Pero como les dije, necesitamos esconder estos checkout. Entonces no puedo decir en orden alguien componente, si estoy en pagina de checkout, escondeme este botón, ¿cómo podemos hacer eso? Podemos hacer eso de manera sencilla. Pasamos al resumen del pedido. Nosotros lo llamamos ya ese componente del router, si recuerdas, o servicio del router, necesitamos revisar este router si contiene página de salida o no. Entonces en el método constructor decimos este router, esa URL, como la URL actual del router. Eso incluye. Por lo que no se puede decir incluye para cualquier cadena para buscar una cadena específica dentro de la cadena. Por lo que aquí la URL regresará para mí esta URL. Entonces comprobaré si esta URL contiene palabra la cual se llama check out, luego me esconderé como el chick out o el botón Checkout, que está en el resumen de pedidos. Entonces no podemos decir si está contenido, echa un vistazo. Podemos usar end line. Si es así lo tenemos aquí, podemos dar como una variable o un miembro de clase lo llamamos es checkout. Entonces para saber que tenemos la página de pago y la damos al principio como falso. Por lo que inicialmente será un falso. Si tenemos una página de pago, entonces decimos que esto es check out es a través. De lo contrario, como si no, será falso. Estos check out, será falso. Entonces ahora con esta variable que hemos creado, pasamos por la plantilla de orden alguien y decimos que éste, este botón se ocultará totalmente. Entonces podemos decir ng-si la expresión es check out. Entonces cuando no es check out, entonces muestra el botón. Pero cuando esté comprobado, entonces esconde el botón. Entonces ahorramos, guardamos esto también. Vamos a la plantilla. Entonces como ven aquí, el botón está oculto en la página de pago porque he checado botón aquí o cadena de comida para llevar. Pero cuando vaya a su carrito, voy a tener check out aparece aquí. Entonces, como ves, revisé el router. Yo lo hice en el constructor, por
supuesto que se puede hacer eso en ONGs en él, no hay problema. Pero lo hice en el constructor, que es como antes de ONG en él antes de inicializar componente. Cuando construimos esta clase, entonces llamará router, URL incluye checkout, luego es checkout a través o check out false. Entonces usamos eso en el ng-if para mostrar u ocultar este botón. Entonces lo que tenemos que hacer, la única diferencia que queremos que esta forma sea validada. Por lo que necesitamos validar todos estos campos porque cuando los copiamos del formulario de usuarios, esos no son requeridos. Por lo que necesitamos hacer esos tan bien como se requiere. Entonces hagámoslo rápidamente. Tendré aquí como ciudad, ¿se requiere código postal de país? Todos ellos son requeridos. En esa plantilla, necesitamos tener, por ejemplo, correo electrónico, está bien, tenemos validación. Para foránea, tenemos validación, pero calle no tenemos. Entonces tenemos que cambiar todos esos para que no se formen, pero será Calle. Por lo que se requiere una calle. Entonces ahí misma cosa. Tengo que copiar esta parte y ponerla para departamento. Creo que no se requiere. Comprobemos eso en nuestra forma. Está bien. Se requiere también, es importante cuando entregues un envío, el remitente debe conocer el departamento. Por lo que decimos también, aquí, se requiere
departamento y departamento. Lo mismo que hacemos por el código postal. Por lo que tenemos que añadir también ese código postal aquí. Por lo que tenemos zip. Y luego la ciudad. Ya ves, es exactamente lo mismo como lo hicimos con la forma de los usuarios. Para que no tengas que gustarte, dime si tú, si no entiendes esta conferencia, sólo tienes que volver al formulario de usuarios. Entenderás todo este punto. Entonces por eso al inicio de este curso, prefiero que no te saltes ninguna parte de este curso porque todas ellas son, puedes considerarlas, están obligadas a asistir en el caso que quieras seguirme. Pero estoy mencionando en cada conferencia donde explico esto, para que no tengas que preocuparte por ese punto. Por lo que ahora tengo todo está validado. Por lo que necesitamos agregar, bueno, agregar un botón para hacer orden. Decimos como jugar onclick. Tenemos aquí el botón onclick de Prime NG. Por lo que diré Place Order. Por lo que este método de orden de lugar, tengo que implementarlo. Entonces, en primer lugar, necesito hacer el pedido. Entonces diré aquí,
si esto, como, si te acuerdas, tenemos este formulario de punto,
como el formulario de pago no es válido, entonces regresa y no haz nada porque no logramos esas condiciones de validación. Entonces en este caso volvemos atrás. Entonces cuando enviamos el formulario, necesitamos establecer la variable que hemos creado, que se llama se somete a true, como para habilitar la validación. Entonces cuando el usuario haga clic en Place, Order, significa como él presentó, pero tiene un problema en la validación. Y luego próxima conferencia veremos cómo podemos hacer
el pedido que necesitamos para recolectar los datos y hacer el modelo de pedido. Entonces de esta manera, hemos terminado esta conferencia. Por lo que ves aquí tenemos la plantilla, hemos definido el botón Place Order, y tenemos el formulario listo para armar o hacer el pedido. Y como ven aquí, cuando hice clic en orden de lugar, todos esos campos son obligatorios.
166. Orden de colocación: De acuerdo, lo que vamos a hacer ahora necesitamos hacer el pedido. Si vamos a la página de pago y hacemos clic en Hacer Pedido, entonces el pedido se realizará después de validar los datos del formulario del usuario. Como les dije, vamos a hacer un pedido como invitado, no
vamos a implementar el login ahora. Eso haremos en el siguiente apartado. Entonces, en primer lugar, tenemos que intentar la colocación del pedido paso a paso. Y luego pasamos al inicio de sesión y agarramos los datos del usuario de la base de datos. Pero ahora tenemos que hacer el pedido con normalidad. Entonces vamos a recoger los datos del formulario. Como recuerdan, tenemos en la biblioteca de órdenes y modelo que se llama ordenada. Entonces en la biblioteca de órdenes vamos aquí y vemos aquí orden. Y en el orden tenemos como ID, artículos de
pedido, envío, dirección, un envío en este también, y toda la información que necesitábamos para realizar un pedido. Por lo que necesitamos recolectar esos datos y colocarlos exactamente igual a sus espaldas. Y si recuerdas con el Cartero, estábamos publicando el pedido como te mostré anteriormente en la parte back-end. Si no ves el video, tienes que ir a ver el video de crear un pedido en la base de datos. Entonces vamos a copiar estos datos y vamos a nuestra página de pago. En el método Place Order, cuando hago clic en este botón, que está aquí para realizar el pedido, tengo enviar y luego estoy comprobando si el formulario es válido. Aquí necesitamos crear el modelo de pedido. Por lo que necesitamos crear orden const, y será tipo de orden. Por lo que el pedido vendrá de los modelos. Y entonces esto será igual a mis campos, que necesito sentir aquí. Pero primero necesitamos reemplazar esas cadenas por valor, el ID. No lo necesitamos porque al hacer el pedido, vendrá automáticamente con el ID de la base de datos. Mongodb hará eso por mí. Y luego pedir artículos. Necesitamos recoger los artículos del pedido. Por ahora, definamos a un miembro de la clase. Nosotros lo llamamos estos artículos de orden. Y este orden de artículos, podemos definirlo aquí como un miembro de la clase, como se ve aquí, que será matriz de elemento de orden. Por lo que tenemos un artículo de pedido y será una matriz. Al principio, será matriz inicial. Por lo que también necesitamos eliminar esta pregunta mientras todavía tenemos un tema aquí, porque necesitamos poner una coma. Tenemos aquí error porque está diciendo que el tipo de elemento de orden es array, pero está en el modelo, es sólo uno o el derecho. Comprobemos el pedido. Si recuerdas, hemos hecho, creo que me olvidé de poner aquí una matriz, así que tenemos que arreglarlo. Creo que la aplicación de paquete admin no se verá afectada por eso. Entonces revisemos el panel de administración para asegurarnos de que aquí no tenemos ningún problema. Está bien. Todo sigue bien. No tenemos ningún problema. Está bien. Volver a la aplicación front-end. Al final compras. Ahora tenemos los artículos de pedido para hacer ahora la dirección, por lo que son dirección de envío uno. Podemos decir que este formulario de check out de punto. Te acuerdas que estábamos accediendo a los controles del grupo de formularios así. Dot. Podemos poner ahora la calle por ejemplo, ese valor. Entonces con esto, tenemos accediendo al campo de calle y
decimos que tenemos el valor del mismo en la dirección de envío uno, debemos coincidir exactamente con el modelo. Por lo que no hay que olvidar que tal vez la
dirección de envío dos puede ser también como la no la calle, pero podemos usar el departamento. Por lo que tenemos aquí departamento punto valor y también la ciudad será la misma. Entonces necesitamos copiar esto, ponerlo aquí, quitar este signo de interrogación y decimos la ciudad, ese código postal igual. Tenemos que añadir también el código postal aquí también. Entonces tenemos que poner aquí coma, coma y aquí país. De nuevo, tenemos que hacer lo mismo. Voy a hacerlo rápido. Por lo que tenemos que sumar todos así. Y tendremos problema con un usuario. Se lo explicaré más tarde. Entonces, en primer lugar, necesitamos tener como todos los valores para tener razón. Tenemos país que quita este signo de interrogación. Vamos a ir aquí, teléfono country, tenemos que poner también. El teléfono aquí estado 2s, precio
total, precio total. También necesitamos. Además de calcularlo de alguna manera. Usuario y ellos ordenaron. Entonces tenemos también aquí. Ordenaron o puede ser fecha punto. Ahora, eliminemos esos signos de interrogación y vamos a comprobar si todo está bien. Por lo que tenemos la ciudad, estado
del país, el precio total, y el usuario. Por lo que el usuario no tenemos en la forma algo llamado usuario. Por lo que vamos a usar algo llamado ID de usuario. Y este ID de usuario vendrá de como un ID estático o un usuario estático, que voy a usar como invitado. Por lo que vamos a la aplicación de empaque admin. Podemos crear un usuario como usuario aleatorio. Le damos un nombre como invitado, y podemos llenar el correo electrónico. Por ejemplo, si su organización podemos decir y podemos
darle una contraseña como y toda la demás información. A lo mejor podemos darles así. Podemos poner cualquier número aquí. Y hacemos click en Crear, creado, ese invitado. Entonces, ¿qué necesitamos hacer? Vamos a la base de datos y el agarrar el ID del usuario. Por lo que fui a la base de datos, cloud mongodb.com y entro con mi cuenta y luego veo a todos los usuarios, que tengo aquí. Yo he creado este invitado. Entonces tomamos esto, para que podamos dar click en editar. A lo mejor podemos copiar esta parte aquí e ir a nuestra solicitud. Tenemos que reemplazar también. Se echa un vistazo a la página, tenemos que añadir eso a este usuario, pero se puede hacer, por defecto, este usuario será el invitado. Por supuesto, vamos a mostrar o reemplazar eso cuando el usuario consiga el lock-in. Por lo que necesitamos agregar esta cadena aquí. Por lo que no necesitábamos el tiempo para no obtener un error. Por lo que el ID de usuario para mí será esta cadena. Entonces guardamos eso. Y luego necesitamos pasar al usuario. Y vemos que todavía tenemos un tema aquí. ¿ Por qué? Porque cometí este error por morados solo para mostrarte como cuando recibes un peticiones diferentes. Por ejemplo, en el panel de administración, estábamos obteniendo al usuario como un objeto el cual contendrá el tipo de usuario, el usuario que tiene un nombre de ID, contraseña al back-end estaba devolviendo para mí este objeto, no todo. Era sólo nombre, tal vez un e-mail, y alguna otra información. Entonces en ese caso, cuando tienes conflicto entre la solicitud a post y la solicitud GET, entonces es mejor en el front end definir esto como cualquiera. Porque ahí dentro solicitud GET, estamos consiguiendo esto como un objeto de usuario. Pero cuando publicamos una solicitud, necesitamos enviar sólo el DNI. Entonces es mejor resolver este tema, ese conflicto entre la aplicación. Simplemente dices que este campo es n. Entonces en ese caso, podrás usar el formulario que hemos creado aquí como cadena también para publicar un pedido en la base de datos o en el back-end. Porque si recuerdas el backend con cables consiguiendo al usuario como una cadena de su ID para la fecha ordenada, solo
necesitamos también poner fecha. Entonces es punto mayúscula ahora. Entonces cuando el usuario publique este pedido con éxito, entonces ponemos el punto ahora. Entonces si vamos al orden de fecha, entonces necesitamos tener esta fecha ahora y se puede encapsular eso como una cadena. Por lo que puedes usar un murciélago cerdos y tomar esto como una cuerda porque lo está pidiendo como una cuerda. Entonces como ven aquí, así vamos al orden que diga que quiero eso como una cuerda. Entonces podemos agarrar eso entre nosotros, pensar garrapatas. Y ahora necesitamos obtener los artículos del pedido. Por lo que queremos publicar un pedido. Necesitamos enviar los artículos del pedido. Por lo que cada artículo de pedido, como recordamos, contenía producto y la cantidad. Por lo que tenemos que volver a suscribirnos a su carrito. Entonces si recuerdas, hemos creado un servicio de guardia y descarta servicio. Puedo recuperar todos los artículos del carrito. Entonces vamos aquí y decimos privado. Y entonces tenemos que conseguir como servicio de carrito. Y será tipo de servicio de carro. Y utilizamos este servicio de guardia para conseguir los artículos de jardín. Yo he creado aquí. Miembro de la clase, que se llama elementos de orden. Por lo que un MD encendido en él después de forma de intializador, podemos decir esto y luego obtener artículos de carta. Entonces en ese caso, tenemos que definir un método después de inicializar el formulario, podemos decir artículos privados del carrito de Git. Y este conseguir artículos de guardia estarán usando ese servicio de tarjetas. Por lo que tenemos que decir este servicio de tarjeta de punto y luego observar a nuestra guardia. O puedes usar también conseguir guardia porque no tenemos que usar directamente. El carrito artículos, que tenemos, como todos observan esa guardia porque no estamos haciendo ninguna cadena. Por lo que cada vez que
visitamos el componente, obtenemos esa tarjeta de nuestro almacenamiento local y luego leemos los datos. Por lo que se puede decir como un carro constante. Y por supuesto se puede utilizar la tarjeta que hemos creado lo observable. Por lo que este carrito tendrá un tipo que se llama tarjeta, y esta tarjeta se importará de los modelos. Ahora necesitamos conseguir artículos a la carta. Por lo que tengo que decir este punto de orden artículos, que hemos definido previamente, diríamos artículos de punto de tarjeta. Pero aquí tendremos un problema también. Porque si vamos al carrito artículos, ellos tienen carrito item id producto. Pero en el artículo de orden de vamos al modelo, tenemos sólo producto. Entonces tenemos una de dos opciones. A lo mejor tenemos que cambiar esto a ID de producto también. O podemos mapear unos artículos nuevos para caber en este pedido artículos. Por lo que puedo decir aquí que este guardia ordenan ítems mapa de puntos. Y luego en este mapa puedo decir artículo. Y cada artículo será como retorno para mí un objeto. Y será producto, y este producto será item.name, id
del producto, y luego la cantidad será la misma cantidad de punto del artículo. Entonces de esta manera, estoy mapeando todos esos artículos para tener un ID de producto pero producto. Por lo que recorrerá todos los artículos dentro, guardará artículo, artículo por artículo, y lo cambiará para que tenga producto no ID de producto leyendo el ítem dot ID del producto. Y esto se devolvieron para mí array, como ves aquí, de artículo de pedido. Por lo que en ese caso, hemos llenado nuestros artículos de pedido. Entonces para asegurarnos de que tenemos todo está bien, solo
podemos buscar en el registro de la consola estos ítems de orden para estar seguros de que realmente lo estamos haciendo bien. Por lo que no podemos decir que la consola registra estos artículos de tercer orden después de que hicimos este mapeo aquí. Por lo que me refrescaré y luego abriré la consola. Y veremos que tenemos array, producto y cantidad. Y será un producto no ID de producto, que encajan exactamente con los artículos del pedido. Y luego cuando esté enviando un nuevo pedido, digo que éste u otros artículos serán artículos más antiguos que hemos llenado aquí. ¿ Necesitamos calcular el precio total? No, porque estamos si enviamos el precio total a la parte de atrás y entonces cualquier usuario puede publicar el precio total en. En ese caso, me hará un tema que como voy a colocar. Por ejemplo, hackear su sitio web y enviar un pedido con un precio total falso. Al igual que puedo poner 41, $1000, puedo poner $2 y lo puedo enviar a la API. Entonces el backend no está recibiendo el precio total, pero lo estamos calculando internamente y pegado hacer la base de datos, por lo que no tenemos que enviar ese precio total, el precio total en el modelo lo usamos porque nosotros quería usarlo en la aplicación del panel de administración. Si recuerdas, fuimos a pedidos y nosotros, estamos consiguiendo el precio total aquí. Entonces en ese caso, garantizamos que todo está sucediendo en el backend. No enviamos nada al frente. Entonces siempre cuando estamos haciendo este cálculo, cuando hacemos orden, todo debe volverse desde el back-end. De lo contrario, si envías desde front end así aquí como una cadena, por ejemplo, lo envías al back-end, entonces no es buena práctica porque cualquiera puede fingir este precio y enviarlo al back-end y para hacerte un problema en la tienda electrónica. Entonces después de eso, hemos hecho el check out. Hemos creado el modelo de pedidos. Si recuerdas, hemos creado un servicio que se llama crear orden. Y esta orden de creación publicará un pedido para mí a la base de datos. Entonces llamemos al servicio de pedidos. Volvemos aquí a nuestra página de pago. Pedimos el servicio de pedidos. Por lo que tenemos aquí servicio de carrito. Necesitamos servicio de pedidos privados. Y sería tipo de servicio de pedidos. Entonces este servicio de pedidos, necesitamos usarlo para crear un pedido. Entonces volveré a ir aquí. Y entonces diría que este servicio de pedidos de puntos, punto crear orden. Y voy a mandar este pedido, hacer el back-end. Pero como recuerdan, esto no se ejecutará hasta que me suscriba. Entonces cuando podemos hacer la suscripción, y luego podemos decir orden aquí o simplemente podemos mantenerlo y vacío, como vacío. Y luego podemos redirigir al usuario a una página de agradecimiento, como veremos en la próxima conferencia. Para que podamos hablar de oídas. Directo también. Página de Gracias. Y como veremos más adelante, lo voy a agregar pronto a su curso. Al igual que después de
ti, vale, miras en este curso, te inscribiste, pero no ves ese pago. Voy a añadir este máximo de pago después de dos semanas de crear este curso. Entonces nosotros aquí, lo hacemos tal vez no demasiado, gracias, pero también tal vez al pago. Por lo que pagina de pago. Por lo que veremos en el pago que no vamos a pegar ningún pedido
ni ningún pedido a la base de datos hasta que el pago tenga acceso. Y lo haremos con pasarela de pago sprite. Pero qué pasa con el estatus, si recuerdas, teníamos un estatus también para el pedido y ya sabes que el pedido viene siempre como flexión inicialmente. Entonces el estado de la orden, no lo sentimos porque no tenemos un miembro de cuatro que se llama status aquí. Entonces si recuerdas, hemos creado una constante en el panel de administración, que se llama status. Por lo que el estado para la orden inicialmente debe ser como flexión, como el estado inicial de la orden. Entonces cuando vamos a la aplicación Admin y luego a la orden, tenemos orden constante y tenemos estado de orden. Por lo que es mejor aquí usar este estado de orden igual, que usamos en el back-end. Entonces en ese caso, podemos leer en el backend los mismos datos que se pegan o ambos a través de su front-end. Entonces aquí diría que tal vez podamos mover esta constante de orden, como de aquí, lo cortamos y lo trasladamos a la biblioteca de órdenes. Entonces vamos aquí y podemos escuchar pegado cerca de los servicios del modelo de componentes. No podemos basarnos directamente en la biblioteca, por lo que estará cerca del módulo. Y luego en la aplicación admin obtendremos error porque faltará este archivo. Entonces sobre todo cuando estoy liderando el detalle del pedido y también la lista de pedidos. Entonces como ves, el estado del pedido ya no existirá y me dará error. Entonces primero necesitamos importarlo de este, de órdenes
de Blue Bits. Entonces conseguimos éste y pegamos aquí, Vale, y quita esta parte y guarda esta. Y también en los detalles del pedido, tenemos esto aquí y pegamos en el orden como lo voy a conseguir de la biblioteca de pedidos, pero todavía estamos recibiendo el error. Por lo que el estado del pedido aquí no se exporta desde la biblioteca de pedidos. Por lo que necesitamos ir al índice y decir Exportar para mí, partir de. Y luego decimos labio. Y este labio lo hará, voy a importar o exportar la constante de orden. Por lo que en ese caso, los detalles del pedido en la aplicación del panel de administración y también en la lista de órdenes. Veremos esto como la constante de estado de orden. Entonces de esa manera podemos ser capaces de usarlo
también en el front-end o en cualquier aplicación de tienda, o en la propia biblioteca donde hemos creado el pedido o publicando el pedido. Por lo que el estado inicial para cualquier pedido, no será como procesado o enviado. Será flexión. Por lo que cuando vaya a la aplicación del panel de administración, voy al detalle del pedido aquí el usuario obtendrá
el pedido, el administrador obtendrá siempre el estado inicial del pedido para nuevas órdenes como anexar. Entonces de esta manera, estaremos seguros de que siempre nos estamos inicializando esa flexión. Y entonces el administrador puede cambiar el estado aquí como vemos aquí. Entonces ahora volvamos a nuestra página de pago. Entonces vamos a importar aquí la constante de estado de orden de estado, que hemos utilizado aquí. Por lo que podemos importarlo también a nuestra página de pago. Entonces iré aquí. Y entonces yo diría importar para mí la constante de estado de orden de. Y luego seleccionamos el camino actual o la patente porque estamos en la misma biblioteca, por lo que no tenemos que preocuparnos por eso. Entonces después de eso decimos que el estado del pedido inicialmente será estado del pedido. Y luego si necesitamos ir y comprobar el estado del pedido. Por lo que el estado de orden en el almacenado en el back-end como sigue, como recuerda o en la base de datos. Si vamos a las órdenes y veremos entonces el estado se almacena como un número. Por lo que también necesitamos conseguir la llave, que no tengamos que usar la etiqueta ni su color. Tenemos que sacar la llave hasta el momento que yo diría que tal vez podamos ir, volviendo a nuestra página de pago. Por lo que tenemos aquí la constante que tenemos pagina de checkout. Diré aquí teclas de punto objeto. Entonces saben que esto me va a devolver las llaves de este objeto que estoy pasando aquí. Por lo que necesitamos obtener las claves del primer objeto. Entonces si consigo las claves, entonces obtendríamos array de las claves, que es 0, 1, 2, 3. Entonces lo que necesito es el primero. Entonces tenemos como este 0, todo lo que se puede directamente sin nada que solo diga yo quiero el estado 0, que se almacenará en la base de datos, exactamente cómo tenemos un definido nuestro mapeo de estado, que también está en la constante como ven aquí, tenemos el 0 por pendiente. Por lo que quiero el estado 0 y se almacenará en la base de datos como estado 0. Y en el panel de administración, aparecerá inicialmente como flexión, que es el estado 0 0. Entonces iré primero. Podemos hacer como aquí un registro de consola. A lo mejor podemos confirmar que es éxito. Por lo que voy a decir console.log, como se agregó con éxito. Por supuesto, como les dije, vamos a sustituir para agradecer página o dirección o con el pago como veremos más adelante. Entonces vamos a ahorrar. Voy a llenar estos datos rápidamente. Entonces siento esos datos, voy a hacer el pedido, pero abramos la consola para que podamos ver nuestro mensaje si aparece después de realizar este pedido. Entonces cuando hago click en Hacer Pedido, está bien, agregado con éxito. Entonces vamos a revisar su base de datos si realmente estamos agregando este orden con éxito. Entonces vamos a cerrar de nuevo estos y luego refrescamos nuestra base de datos. Y veremos que si estamos recibiendo el pedido, bonito, tenemos el orden aquí. Entonces tenemos estado de orden y escuchamos todo lo que está relacionado conmigo. Y como ves que tenemos al usuario es ese invitado. Por lo que no tenemos, como vamos a escuchar, el nombre y el correo electrónico porque no estamos dejando que el usuario inicie sesión. Porque como
dijimos, vamos a obligar al usuario a iniciar sesión en la página de pago para que podamos obtener su información sin, por ejemplo, poner toda esa información en la base de datos. Entonces, en realidad, podemos deshacernos de nombre y correo electrónico aquí porque no lo necesitamos, porque vamos a preguntar al usuario cuando se registre en el futuro, cuándo vamos a hacer la autenticación para ingresar su nombre y correo electrónico al registrarse. Entonces simplemente hacemos, por ejemplo, estas son variables de sólo lectura o campos de sólo lectura. Y toda esta información es editable para que pueda hacer orden con su correo electrónico y el nombre con el que se registró. Entonces vamos al panel de administración, vemos si realmente tenemos ese orden. Está bien, Niza. Tengo aquí la orden doblada para poder ver el pedido y viene del invitado. Por supuesto, como les dije, vamos a sustituir eso por un usuario, como veremos en el siguiente apartado. Pero ahora estamos publicando el pedido como invitado. Y más adelante vamos a utilizar el login y la autenticación en el front end para obtener la idea real usando la biblioteca compartida. Entonces como ven aquí, vamos a ver cómo podemos usar el componente de inicio de sesión, que también utilizamos en la aplicación del panel de administración. Entonces el mismo candado de entrada, lo
vamos a usar también en el front-end para iniciar sesión en ese cliente y dejarle hacer pedidos. En la siguiente conferencia, veremos cómo realmente podemos dirigir al usuario a una página de agradecimiento tras éxito de realizar el pedido. Y una última cosa que quiero mostrarles, si vamos al detalle de este pedido, veremos que obtenemos la misma cantidad, exactamente las cosas que teníamos en su carrito.
167. Página de you: Después de una colocación exitosa del pedido a nuestra tienda electrónica, vamos a redirigir al usuario a una página de agradecimiento, como no podemos decírselo. Está bien. Gracias por su pedido. Nosotros vamos a enviar su paquete en los próximos tres días, por ejemplo. Por lo que podemos eliminar este registro de consola que hemos creado aquí. Y luego vamos a leer, dirigir al usuario a un nuevo componente. Ya he creado ese componente el cual se llama
gracias y página de gracias será como alguna página de pago. Será lo mismo en la página de checkout. Y dentro hay un div que se llama página de Gracias. Pongo H2 como primer título, como gracias por estar con nosotros. Y otro h3 que hemos recibido aquí tengo error. Por lo que su pedido y luego se entregará en los próximos tres días también. Tengo un botón el cual estará de vuelta a la tienda. Pero aquí no usé navigate y onClick. Utilicé link router, como si me llevara a la página de inicio de la aplicación. Entonces ahora intentemos eso. Entonces yo, por supuesto, después de sumar todo esto, agregué la ruta para la página de éxito. Yo lo llamé éxito. Y el componente será Componente Gracias. Y por supuesto, esto también se autenticará como veremos más adelante. Por lo que en mi componente de página de check out, simplemente
volveré a usar el router. Por lo que tenemos que decir este libro de enrutador navega a nuestra navegación. Y entonces será una matriz. Y será lo dirigido como al éxito. Por lo que en ese caso, tendremos como la redirección de su éxito
después de que nos aseguremos de que suscriban como Successed. Pero si no, también se puede mostrar un mensaje de error al usuario. Puedes tenerlo como tarea para ti. Por lo que solo puedes decir que hay error. Por ejemplo, puedes mostrar algún mensaje al usuario como te dije. Por lo que sólo podemos decir así. Entonces después de la suscripción, tenemos aquí, la suscripción, esos corchetes. Después de estos corchetes, pones una coma, luego te responderá con el error. Entonces si hay error en esta suscripción, entonces se ejecutará aquí, por lo que no navegará. Entonces tal vez podamos decir mostrar algún mensaje, por ejemplo, al usuario. Por lo que puedes hacer esto como tarea para ti. Entonces ahora intentemos eso. Nos vamos a gustar navegar para ver si estamos navegando. Después de hacer el check out, voy a la página de checkout, siento esos datos. Y luego vamos a hacer el pedido y cuando su éxito, me redirigirá a la página de agradecimiento. Por lo que hacemos el pedido. Perfecto. Tenemos gracias por comprar con nosotros. Hemos recibido su pedido y se entregará en tres días. Y luego puedes hacer click en volver a comprar y volverás a ir a la página de inicio. Entonces eso es genial. Por lo que hemos colocado el pedido con éxito y ahora tenemos totalmente e-Sharp, como podemos decir, funcional, solo
necesitamos agregar esos puntos, cuales te dije sobre la autenticación, que necesitamos forzar al usuario a iniciar sesión antes de que pueda checar . Otro punto, necesito mencionar, ya ves que nuestra guardia sigue cayendo. Por lo que tenemos aquí como sigue siendo dos artículos después de hacer el pedido para que podamos inicializar así el almacenamiento local con autos vacíos porque después de éxito off check out, quiero tener este guardia tan vacío cuando vaya a la parte de atrás a la página web o a la tienda, no
tengo tarjetas porque ya pedí eso. Entonces para hacer eso, también
podemos ir a nuestro como aquí donde estamos creando con éxito el orden. Llamaríamos a ese servicio de tarjetas. Por lo que se pusieron servicio de guardia. Necesitamos no llamar a init card local storage porque en cualquier almacenamiento local actual, como recuerdas, tenemos comprobando que si estamos teniendo tarjeta nueva, inicializada y nueva, entonces bien, haz una tarjeta nueva. De no ser así, entonces utilice su tarjeta en nuestro almacén local. Entonces necesitamos algo que se llama vacío ese carro. Por lo que también podemos hacer carro vacío. Por lo que podemos tener este método también. Y aquí podemos copiar lo mismo. Para que podamos crear tarjeta inicial, podemos darle una constante. Y luego podemos decir checa como local storage dot set item y luego con carro inicial. Entonces después de eso podemos llamar a este método. Yo voy aquí. Y luego iba a colocar este método a nuestra página. Todavía tenemos error aquí porque también necesitamos cambiarlo
a JSON porque de lo contrario no funcionará. Entonces tenemos aquí tarjeta inicial y voy a pasar cualquier playera Tarjeta JSON. Entonces de esta manera, tenemos carro vacío de nuevo. Entonces vayamos aquí y digamos vaciar ese carro. Entonces después de navegar, por lo que es mejor hacerlo antes de la navegación. Por lo que vaciamos su carrito y navegamos a la página de éxito. Entonces intentemos eso. Entonces siento la forma. Yo voy a hacer el pedido. Está bien. Volvemos a la tienda. Y como vemos que todavía tenemos a estos dos aquí porque éste está observando, como ustedes recuerdan, es observar el carro. Entonces de alguna manera tenemos que decirle al observador que consiga tarjeta inicial, no
tenemos que tener como la guardia observable que ya guardamos. Entonces para eso, voy al servicio de su carrito y digo que este punto guardia observable punto siguiente y luego le damos el carro inicial. Entonces después de vaciar la carta aquí, no
podemos decir estas dos cartas punto siguiente y luego tripa inicial. Entonces en ese caso, la persona que está iniciando sesión en la aplicación después, si se quedó en la página, por ejemplo, entonces volvería a la página de inicio y verá que ese directorio de guardia vacío. Entonces intentemos eso otra vez. Voy a agregar dos artículos a este guardia y luego ir a mi carrito, echa un vistazo, llena de nuevo el formulario. Por lo que te diré más tarde que no vuelvas a llenar el formulario, otra vez para el desarrollo, te
diré cómo inicializar esos campos con valores iniciales. Para que no tengas que sentir esa forma cada vez que pruebes algo. Entonces tengo aquí, nuevo el campo de formulario, por lo que sustituyo un pedido. Como ves, de acuerdo, de vuelta a la tienda. Tenemos aquí ese Garth vacío. Volvemos a ir y vemos que tenemos, nuestro carrito ya está vacío. Por lo que cuando voy al producto, agrego algún artículo. Ya ves que tenemos el artículo de nuevo. Por lo que de esa manera, garantizamos que tenemos carrito vacío para el usuario. No tendrá ningún problema cuando quiso volver para ir de compras desde mi e-shop. Solo quiero mencionar para ti algo en caso de que para fines de
desarrollo como quieres desarrollarte. No tienes que sentir cada vez que este formulario cuando quieras, por ejemplo, probar el check out, estoy seguro que tratarás de probar siempre el checkout cuando estés desarrollando. Y entonces necesitas sentir siempre esta forma para hacerte una solución fácil. Si recuerdas, tenemos aquí alguna cadena que está vacía cuando estamos creando el grupo de formularios. Por lo que puedes dar aquí unos valores por defecto. Por lo que puedes decir aquí nombre uno, por ejemplo, correo electrónico. Puedes dar algún correo electrónico, email.com. Y cuando estés recargando la aplicación, verás que todos estos datos se llenan automáticamente, lo que serán por defecto con esos valores. Como ven aquí, recargué y veo esos valores por defecto. Entonces en ese caso, no tendrás que preocuparte por llenar esta aplicación o este formulario cada vez que estés refrescando tu código y luego vuelvas, será un muy duro para ti. Por lo que acabas de configurar algunos valores por defecto. Y luego después de terminar el desarrollo, estás seguro de que todo está bien. Entonces puedes reemplazar, eliminar todos estos valores predeterminados. Por lo que estará vacío por defecto para el usuario en público o en producción.
168. Activar la sesión en la hora de hacer la sesión: En el apartado anterior, vimos cómo pudimos realizar un pedido como usuario invitado. Pero ahora vamos a hacer la colocación del pedido en base a los datos del usuario. Entonces de esa manera, como cada tienda le vamos a pedir
al usuario que inicie sesión cuando esté presionando el botón Checkout. Entonces, ¿cómo podemos hacer eso fácilmente? Entonces, en primer lugar, si recuerdas, hemos creado guardias, y esos guardias, están creados especialmente para proteger páginas. Y utilizamos nuestro componente de inicio de sesión, que hemos creado previamente en la aplicación admin. Entonces yendo a los labios, si recuerdas, tenemos órdenes y esas órdenes, si recuerdas, tenemos módulo de pedidos. Y en el módulo de orden definí mi hipótesis. Pero cómo podemos crear o proteger la página de check out, página de checkout, vamos a usar algo como, por ejemplo, el guardia que creamos para la página de admin. Volviendo a la aplicación Admin, si recuerdas Ir a sus rutas, veremos que tenemos en el módulo de enrutamiento de aplicaciones aquí que hemos creado puede activar fuera guardia. Y el out guard proveniente de la biblioteca del usuario, que creamos antes, que está revisando los enlaces y el token. Y luego en base a
eso, te dirigirá a la página de inicio de sesión o te dirá, vale, eres bienvenido. Se puede entrar y regresar, verdadero. Eso lo explicamos todo antes. Por lo que de esa manera podemos usar también el protector bucal para proteger la página de checkout. Por lo que la página de checkout, si recuerdas, hemos definido el aire fuera de ella, el módulo de órdenes. Entonces de esa manera, no puedo decir después de que el baño pueda activarse. Y luego decimos usar nuestro protector bucal. Y de dónde vienen los Asgard? De la biblioteca de usuarios. Entonces si ves que aquí se importa automáticamente. Y no te olvides de la coma. Pero aquí tenemos un problema porque tenemos que decir que esto es una matriz. Por lo que hay que ponerlo dentro de una matriz. Por lo que array fuera de guardia para evitar tener algún error. Entonces ahora si volvemos a ir a nuestra aplicación, yendo por ejemplo, al carrito de compras, y voy a la página de caja y luego digo aquí, echa un vistazo, no soy capaz de hacer nada. Entonces abramos la consola y veamos cuál es el problema. Veremos que no se puede igualar ninguna ruta URL segmento login, ok, Así que estoy realmente leída dirigida a su login, pero no puedo ir allí porque una mirada en ruta no está definida. Si recuerdas, la ruta definida en la biblioteca del usuario o en el usuario es módulo. Si voy al módulo del usuario, vería
que aquí se define el inicio de sesión de ruta. Entonces de esa manera, necesito incluir el módulo de usuarios en mi aplicación. Entonces si recuerdas, hemos incluido también el módulo del usuario,
en el módulo de enrutamiento de aplicaciones o en el módulo de aplicación de la aplicación admin para
definirse para todas las rutas que se incluyen en esa biblioteca, como ves aquí. Por lo que necesitamos hacer lo mismo también para el taller de motores. Por lo que voy a ir al final usted compra aplicación y luego decir en el módulo de la app, importar para mí el módulo del usuario. Entonces de esa manera, lo voy a usar aquí. Y entonces utilizaría la posibilidad de Auto Import Todo lo que puedas usarlo o importarlo tú mismo manualmente. Por lo que presionando Control dot o control de espacio, entonces podrás ver el Método Auto Import. Entonces de esa manera, veremos que el módulo se importó. De acuerdo, Vamos a guardar ahora y nuestra aplicación se volverá a cargar e intentaré hacer clic de nuevo en la página de Checkout o en el botón Checkout. Doy click. Como ven aquí, nos hemos trasladado a la página de inicio de sesión de la tienda I-N-G. Entonces el logotipo en él es exactamente el mismo estilo como
hemos creado antes con el fondo gris y también, por ejemplo, la imagen y también el texto. Por lo que está usando el mismo componente que hemos usado previamente en la página de administración. Pero como ves, todo se guarda aquí. Por ejemplo, el encabezado y también el pie de página, por lo que sólo en el contenedor. Entonces ahora si miro como usuario, como mi usuario el cual está registrado en su base de datos, entonces podré ver la página de pago. De lo contrario, no puedo ver o no puedo checar solo si puedo o si miro a su tienda. Entonces voy a intentar iniciar sesión. Por lo que pondré aquí mi correo electrónico el cual tengo. Por lo que voy a poner aquí el e-mail y luego tengo la contraseña. Como ven aquí, estoy redirigido a la página de inicio. Ahora, volveré a ir a la pagina de check out y voy a ver bien, que pueda acceder a la pagina de checkout. Por lo que en las próximas conferencias, voy a llenar mis datos automáticamente. Ya sabes que tengo, mi usuario ya tiene datos en la base de datos. Entonces de esa manera, si no tengo eso al principio, puedo colocar o llenar el formulario, hacer el pedido, y mis datos se guardarán en la base de datos. Pero cómo cargaré los datos del usuario, así veremos en la próxima conferencia, vamos a usar NGINX para guardar todos los datos del usuario en alguna tienda donde podamos ser utilizados en todas partes de la aplicación. Entonces por ejemplo, aquí en los productos, como ven, no
puedo ver un producto, pero no puedo hacer una reseña sólo si estoy encerrado. Entonces porque aquí vamos a agregar alguna sección de revisión la cual no aparecerá sólo si el usuario está conectado. Cómo puedo saber que el usuario está conectado a la aplicación que usaríamos para ese MDR x con el actual, usamos los observables como ves antes. Pero ahora vamos a utilizar el MDR para hacer una gestión estatal del estado de usuario o la sesión de usuario en su tienda.
169. Qué es NGRX: De acuerdo, en esta conferencia vamos a saber qué es MGR x, y Necesitamos NGINX. Por lo que NDR x en general es una gestión escénica. De acuerdo, no me entendiste,
pero te lo explicaré de una manera que es práctica para ti. Muchos cursos están cubriendo y DRX
como biblioteca y se puede utilizar para la gestión de escenarios. Pero, ¿qué es la gestión estatal? Si recuerdas antes creamos Añadir al carrito. Entonces cuando estoy agregando algo a su carrito, veo que el número aquí va en aumento. Entonces es como si tuviera una variable pública que toda aplicación tenga acceso a esa variable. Se puede aumentar desde cualquier lugar o desde cualquier componente. Entonces cuando voy aquí o cuando voy por ejemplo a la página del producto, hago clic en Agregar al carrito. Veré que este número va aumentando directamente desde cualquier componente que esté usando estos, por ejemplo, que el estado. Entonces de esa manera lo hicimos, usamos observables, pero ahora vamos a usar eso usando NGINX. Por lo que NGINX en realidad es una tienda que sostiene las variables públicas que se utilizan entre la aplicación. Entonces para mí, tengo una variable que es pública. Puedo acceder a ella desde cualquier componente. Y este es exactamente el objetivo de x. Por
supuesto, también tiene más capacidades, como veremos más adelante, como tener efectos o es buscar datos de la base de datos, etc. Así que el uso es para variables públicas que pueden tener r can ser accedido desde cualquier componente. Entonces como un estructurado aquí, tengo una tienda de variables. Entonces tienda o variable tiene, por ejemplo, acceso a algo llamado efectos reductores y el servicio de descanso y componente inteligente. Entonces tenemos, por ejemplo, nuestro componente inteligente, que será en nuestro caso como éste. Por lo que tengo aquí nuestro componente inteligente, que será el producto en sí. Doy clic en un botón y luego hago una acción. Entonces esta acción me está dando la capacidad de acceder a esa variable en el carrito. Por lo que el componente inteligente de esa manera o cualquier componente en Angular, está observando o suscribiéndose a ese almacén de las variables y leyendo datos del mismo. Por supuesto, que también ahí, por ejemplo, el componente inteligente puede crear una acción. Por lo que toma una acción para cambiar alguna variable en su tienda. Entonces por ejemplo, tengo una acción que es como Agregar al carrito. Y este Añadir al carrito se va a buscar alguna acción se llama Añadir al carrito para cambiar el valor de la variable de número de tarjeta o cuenta de carrito cuántos productos en el carrito se incrementarán en la tienda. Por lo que aumentar que en la tienda es usar algo un reductor. Por lo que el reductor se utiliza para filtrar los datos o actualizar el estado de esa variable. Se moverá, por ejemplo, como vimos aquí, de tres a cuatro cuando haga clic en Agregar al carrito. Por lo que de esa manera, la aplicación o cualquier variable se puede ver desde todos los componentes. Entonces no tengo, por ejemplo, cómo decir que no podemos tener unas variables privadas para cada componente. Entonces de esa manera, muchas personas se están preguntando cómo puedo definir una variable pública a la que se puede acceder nuestros datos de transferencia de componente a componente. Esta es la forma en que NDR x o usando epsilon observables como vimos antes. Entonces ahora, como ven aquí en la documentación de NGINX, está diciendo que es un marco para administrar el estado global y local. Te voy a mostrar también un ejemplo de uso de MDR x en algo así como un dato en tiempo real. Entonces quiero, por ejemplo, tengo una aplicación de trading. Y en esta aplicación de trading, tengo múltiples componentes y los precios se están cambiando muy rápido basado en WebSocket. Entonces por ejemplo, este sitio web, se llama hetero. No sé si lo sabes. Y es observar los precios de todas las acciones similares, por ejemplo el petróleo o por ejemplo, que Bitcoin aquí como ves el Bitcoin, por ejemplo, este componente se está incrementando o disminuyendo en base a alguna conexión WebSocket. Y el estado de este componente se está actualizando, siempre como los números aquí se están actualizando. Cómo está pasando esto, cómo se está actualizando esto, el tiempo. A esto se le llama estado. Por lo que el estado de este componente, que se llama Bitcoin, y este número se está actualizando siempre en función los datos de WebSocket que vienen en tiempo real desde base de datos o desde un servidor específico. Pero los demás componentes no se están actualizando porque
no hay ninguna acción estatal se menciona o se va a esos componentes. Entonces sólo ese componente. Entonces tengo que asumir que tengo,
por ejemplo, una variable que se llama Bitcoin en la tienda estatal. Y esta variable sólo se está actualizando, pero las otras como el oro o el euro-USD no se están actualizando. Entonces lo mismo que hacemos aquí. Utilizamos sólo una variable en nuestra tienda estatal, por lo que usamos sólo el carrito. Entonces como ves, hay múltiples. Entonces aquí sólo tenemos la variable guardia, por lo que se puede acceder desde todos los componentes de la aplicación. Por lo que esta es la idea principal de MGR x en general, veremos a detalle cómo vamos a implementar y la r x para observar la sesión de usuario. Entonces de esa manera, cuando voy a checar, he almacenado una variable, variable pública, que se llama usuario autenticado. Entonces este usuario, cuando tenga datos, entonces va a llenar estos datos aquí. Y también, por ejemplo, lo
voy a usar como te ves más tarde, que tendremos aquí alguna revisión y comentario. Entonces el usuario, si está bloqueado o si esta variable está definida en la tienda estatal, entonces vamos a tener aquí algo así como un campo de revisión y comentario. Por lo que el usuario podrá ver que si no está conectado, sólo
verá esta página. Si no está encerrado.
170. Hagamos una tienda de NGRX estado en la biblioteca de usuarios: Pasando por la documentación de los huevos NDR, si vas directamente a algo llamado arquitectura o empezar en el sitio web de NDR x dot au. Entonces verá este diagrama. Y en este diagrama te está explicando más lo que hablé antes. Entonces como ven aquí, tenemos un componente es siempre hacer una acción. Y entonces esta acción puede ser, usará datos para obtener algunos datos de la base de datos o no. Entonces por eso está punteado. Por lo que esta acción va a utilizar el reductor para cambiar un estado o una variable en la tienda estatal o en la propia tienda. Entonces aquí tenemos algo llamado selector. Es como, por ejemplo, tengo aquí 20 variables y quiero que mi componente seleccione sólo una variable o suscribirse a ella para observar siempre el estado de ese valioso en la puerta de Estados. Entonces de esa manera, todos los demás componentes, como si tengo aquí otro componente, veremos los cambios también de esa variable en ese punto de estado. Por lo que usar selector también es algo que veremos ahora en acción. Entonces si imaginas conmigo que en la arquitectura de MDR x hay algo llamado acciones reductores, selectores, ¿Qué son? Son expedientes y todos esos expedientes, son clases. Y contienen algunas funciones para lograr este diagrama. Entonces para ver cómo crear esos archivos, poco práctico, te
voy a mostrar un camino con NX aquí en la consola NX. Si recuerdas, estábamos creando componentes. Estábamos creando personal múltiple usando esta consola. Y nos ha ayudado a generar también algún boilerplate de n DRX. Por lo que cuando haga clic en Generar aquí, tendré una lista. Y en esta lista voy a ver que voy a tener novela angular y DRX. Entonces de esa manera, vamos a generar los archivos que se requieren para Angie RX o la tienda estatal usando esta consola. Entonces cuando hago clic en
él, me está pidiendo que defina un nombre para esa característica. Entonces si recuerdas, nuestra aplicación se divide dos características o bibliotecas. Contamos con pedidos, productos, UI y también usuarios. Por lo que necesitamos tener el estado de usuario o la sesión de usuario en nuestra aplicación. Por lo que todos los componentes de la aplicación o en la tienda pueden acceder a esa variable para buscar datos de
usuario en todas partes de la aplicación y observar los cambios si el usuario está autenticado, bloqueado o no. De esa manera, muestro alguna información sobre la aplicación o no en esos componentes. Entonces antes que nada, es pedir un nombre. Por lo que este nombre es será siempre el mismo nombre de la característica. Entonces por ejemplo, aquí tengo usuarios. Todo lo puedes definir cualquier nombre, pero aquí en este caso, llamaré también a los usuarios y también al módulo. El módulo aquí es necesario especificar la ruta exactamente cómo está aquí. Entonces, antes
que nada, hay que decir labios. Y luego después de vidas tenemos SRC slash SRC. Y luego pondremos lib, y luego especificaremos el módulo. Qué es un módulo como vimos aquí, su módulo de usuarios. Entonces aquí este archivo se va a cambiar en base a generación como de la tienda estatal porque va a agregar algunas bibliotecas y algunas importaciones donde está usando la tienda estatal. Entonces aquí tenemos que definir el archivo, diré el módulo users.js que tiene exactamente el mismo nombre del archivo aquí. De acuerdo, ¿Qué es ese diccionario o directorio que se definirá? Normalmente lo están nombrando así. Se llama estado. Pero por ejemplo, para nosotros, podemos quitar este plus y definirlo de esa manera. Además, como ves, el comentario se está ejecutando y te está diciendo qué errores pueden suceder. Entonces por ejemplo, aquí es un pasado no existe. He hecho aquí error, sobre todo para mostrarte cuando obtienes algún tipo de error, tienes que ver cuál es el problema. Entonces como ven aquí, tengo aquí faltante S. Así será después de la adición la S debe estar bien. De acuerdo, todavía tenemos el error. El pase no existe y Vamos a comprobar por qué. Entonces por ejemplo, tenemos aquí los labios, como ves, hemos definido desde los labios superiores y luego nos olvidamos el nombre de la biblioteca. Entonces tengo que poner labios, usuarios y luego SRC y luego lib, y luego usuarios. Entonces después de eso, debería estar bien. Entonces, como ves, te está mostrando lo que va a pasar. Todavía no sucedió. Se ha creado un archivo que está en esta ruta. Se llama efecto, exactamente como te dije, modelar y también reductor de usuario y luego selector y así algunos la actualización en el módulo del usuario y index.js. Entonces de esa manera, también
tengo múltiples opciones donde puedo definir también, algún comportamiento específico de esta tienda estatal. Entonces por ejemplo, puedo generar FSH. Esto es para Sayed. Se utiliza para usar algunas funciones donde puedo acceder a la tienda estatal y hacer mi código más organizado y más hermoso cuando quiero algo de la tienda estatal como veremos más adelante. Así que comprueba esto también. Nos ayudará tan bien como vemos aquí que está generando algunos modelos. Y si recuerdas, tenemos modelos ya definidos en nuestra aplicación. Por lo que no hay necesidad de crear como modelo. Por lo que vamos a quitar este después de que se cree el puesto estatal. Por lo que ahora estamos listos para ejecutar este comando. De esa manera podremos utilizar la tienda estatal. Entonces nombra módulo que pase por el módulo, el correcto, el nombre del directorio. Y aquí hay algunas opciones. Puedes usarlos o puedes cavar sobre ellos. Por ejemplo, aquí verás que estos barriles van a crear para ti la importación o exportación de los componentes para que puedas importarlos a la vez. Pero quiero mostrarles el estado puro sólo lo que realmente se necesita, por ejemplo, aquí para ensayado y también la suma mínima replicada. Aquí están más comentarios. Por lo que no es necesario usarlos. Configuración de ruta, ruta para la gestión del estado de entidad con MDR x No
necesitas hacer eso porque lo vamos a hacer manualmente. Es más seguro para mantener nuestra aplicación de la manera correcta. Entonces aquí, hay mucha información como por ejemplo, saltar hacia atrás un JSON. Es Nuestro va a agregar las dependencias NDR x para instalar y la biblioteca DRX a nuestros módulos de nodo. Por lo que de esa manera puedes saltarte si ya lo tienes instalado. Pero si no lo tienes instalado, no revises este. Y también la ciencia TX y RX puedes definir, como puedes ver en la documentación o como veremos más adelante, dos estilos de creación del NDR al lado. Gafas y creadores. Por ejemplo, aquí te mostraré la acción. Voy a crear acción. Y esta acción se puede crear de esta manera. Entonces algo así como inicio de sesión constante crear acción, y esta acción tiene algunas propiedades. También hay otra forma creando unas clases, pero prefiero el camino de los creadores. Es mejor y te va a dar una más dinámica en mecanografias para el TypeScript. Por lo que antes de terminar este video, por favor revise lo que tiene aquí para tener exactamente como yo tengo. Y luego haga clic en Ejecutar, y luego verá el estado del archivo o el estado posterior lo
consiguió creado aquí con los archivos de prueba también. De esa manera, veremos en las próximas conferencias, cuáles son las acciones FX para saids, etcétera, que nos ayudarán a crear nuestra tienda estatal de la sesión del usuario en nuestra tienda.
171. Diagram de la sesión de usuarios: Muy bien, al principio, me gustaría explicar como un diagrama cómo será el proceso cuando vamos a conseguir al usuario o construir la sesión de usuario. Entonces como recordatorio, el objetivo principal que quiero, cada componente de mi aplicación como detalle del producto, componente de
bomba, y también echa un vistazo componente de página. Obtén algunos datos de la tienda los cuales se comparten entre toda la aplicación. Entonces por ejemplo, definí aquí dos variables. Uno es usuario. Contendrá los datos de usuario del usuario actual conectado. Y también sostendrá también, está autenticado, es como, por ejemplo, es una variable booleana. Puede ser cierto o falso, lo que es decir eso, vale, Ahora la tienda o el sitio web tiene usuario autenticado o no. Y en base a eso, Como les dije, podemos mostrar, por ejemplo, algunas partes de la aplicación como la revisión del producto y así los datos del usuario. Me ayudará a hacer un componente de página de pago y también un agarrar los datos del usuario actual conectado a mi check out for. Entonces cómo será el proceso, el proceso en realidad que necesitamos actuar, para hacer una acción como ustedes recuerdan. Por lo que algún componente está disparando una acción y luego
nos va a disparar para que obtengamos datos de
la base de datos del usuario en base al token y cómo hablamos antes. Por lo que iré primero con el proceso fácil. Por ejemplo, tenemos aquí una página de inicio de sesión, y cuando hago clic en Iniciar sesión, estoy creando un token que viene de la base de datos o del servidor. Y luego le pediré a la tienda estatal que despida por mí y acción, que se llama Build user session. Por supuesto, esto es después de un inicio de sesión exitoso. Entonces de esa manera, después de construir la sesión de usuario, le
diría a la tienda, bien, el usuario es datos de usuario, los cuales obtengo de la base de datos y también se autentifica, es cierto porque tengo login exitoso . Por lo que el propio inicio de sesión
disparó los datos o disparó esta acción y cambiar los datos en sus estados. Perro las dos variables que tengo, que son usuario y también se autenticó. También otra acción puede, por ejemplo, u otro componente u otro evento puede cambiar para mí, la tienda estatal, vale, el usuario ya está conectado. Regresó, por ejemplo, después de dos horas, volvió a abrir la solicitud. Ahora, como recuerdan, estamos leyendo ese token desde el almacenamiento local para ver si este usuario está autenticado o no. Entonces de esa manera, juzgaré si es como un token válido, entonces estamos construyendo una nueva sesión de usuario, vale, digamos al efecto y también el reductor, como veremos más adelante en detalle, para establecer eso es autenticado a true y también obtener los datos del usuario de
la base de datos y pasarlos a la variable de usuario en el doc de Estados. Si no, lo cual es posible, como entonces tenemos, por ejemplo, el token no es válido, entonces diré, vale, en ella sesión de usuario a sesión, o por ejemplo, restablecer la sesión del usuario. Por lo que restablecer una sesión de usuario es establecer, se autentifica a caídas y los datos de usuario serán nulos en la tienda. Y quién está viendo fue lo que está pasando en la tienda. Esos componentes. Entonces no sólo pagina de checkout o detalle del producto, tal vez otro componente así en mi aplicación. Por lo que esta es la idea principal de NGINX o de la gestión estatal. Por supuesto, hay muchos usos. También puedes tener toda tu tienda de estado de datos. Pero estoy especificando aquí un caso donde realmente se necesita el MDR x Así que de esa manera, aprende a construir una acción, cómo dispararla, y luego crear efecto y reductor para cambiar el estado del variable en la tienda estatal. Y luego veremos cómo podemos leer todas esas variables en los componentes que necesito para construir mi aplicación para mostrar u ocultar cosas. Te invito a echar un vistazo a este diagrama. Otra vez. Lo guardamos en tu cerebro. Nos ayudará en las próximas conferencias construir nuestra tienda estatal respecto al usuario y la autenticación.
172. Servicio de sesión de usuario Init: Ahora sigamos creando nuestra lógica,
lógica para la inicialización de la sesión de usuario. vamos a hacer esta lógica. Entonces a partir de cargar la app, voy a leer un gesto de token si es válido. Y luego voy a hacer con una acción adecuada para establecer algunas variables en la tienda estatal. Entonces, en primer lugar, necesitamos un servicio que se llama init user service. Entonces, ¿cómo podemos llamar a este servicio? No podemos llamar al servicio en realidad en nuestra inicialización de la aplicación. Por lo que volviendo al final, compras el punto de entrada de la aplicación en está en el componente app. Por lo que podemos escuchar, tener en la inicialización de la app, podemos llamar a un servicio en sesión de aplicación de TI. Entonces para eso, voy a llamar al servicio de usuario. Entonces tenemos aquí en el constructor como siempre, cómo estamos llamando a servicios en los componentes. Por lo que voy a decir aquí un privado y luego voy a decir servicio de usuarios. El servicio al usuario vendrá del servicio de usuarios, que hemos definido en la biblioteca del usuario. Entonces dentro de este constructor, vamos a inicializar la, por ejemplo, la sesión de aplicación. Pero también se puede hacer en, en él. Por lo que puedes tener aquí como en la inicialización de componente de aplicación, como nuestra aplicación va a llamar al servicio que se llama sesión de aplicación init. Entonces vamos a tener aquí en ella, implementa en ella. Entonces de esa manera, necesitamos llamar a algo llamado NG en función init. Y esta función se ejecutará cuando vayamos a llamar
a la aplicación o cuando iniciemos nuestro final te compres. Entonces de esa manera voy a decir este servicio de usuario de punto, y luego voy a llamar al servicio que quiero. Entonces vamos al servicio de usuario haciendo clic en control y el click del mouse, te llevará directamente al servicio de usuario. Y en el servicio al usuario, si recuerdas, teníamos muchos servicios que creamos para nuestros usuarios,
creando, editando, y agregando. Entonces al final aquí podemos tener como algún servicio, lo
llamamos cualquier sesión de app. Y en esta sesión de aplicación init, vamos a llamar a algo o alguna acción que vendrá de la tienda estatal. Entonces de esta manera, aquí vamos a iniciar nuestra inicialización de la sesión en la acción estatal. A ver si todo está funcionando bien. Entonces voy a salvar a éste. Por lo que también necesitamos llamarlo aquí. Entonces después de que lo tengamos en ella, obsesión, vale, Lo hemos llamado. Y luego salvamos, y salvamos éste. Y nuestra aplicación se está ejecutando sin ningún error. Entonces revisemos el navegador. De acuerdo, tenemos un problema que tenemos módulo de aplicación, módulo funciones de
tienda, pero reducir su manager, reducer manager, reducir y gerente. Esto sucede porque estamos creando una tienda estatal en una biblioteca. Entonces aquí los usuarios es una biblioteca, pero la aplicación no sabe nada de esta tienda estatal. Por lo que para inicializar la tienda estatal en general, necesitamos crear o llamar a algunos métodos en el módulo de aplicación. Entonces en la aplicación y compras o en la aplicación que vas a crear, necesitas iniciar la tienda estatal de alguna manera cómo puede ser la inicialización. Tenemos que llamar a dos módulos. Por lo que esos dos módulos serán primero un módulo de tienda. Así es esta puerta donde va a inicializar mi tienda. Entonces módulo de tienda, hay que estar seguro de que se importa de MDR x biblioteca. Y luego presionas punto y luego tienes cuatro raíz. Y esta raíz de cuatro, llamará a un objeto vacío. Por lo que aquí estamos inicializando nuestra tienda con objeto vacío también. Vamos a usar efectos, efectos. Sabremos para qué se utilizan más adelante. Por lo que tenemos aquí afecta módulo. Entonces, y luego podemos llamar de nuevo para root y lo inicializamos con objeto vacío o no, lo
inicializamos con matriz vacía. Entonces de esa manera, podemos ser capaces de inicializar nuestra tienda. Y vamos a guardar y ver si el error se ha ido. De acuerdo, ahora nuestra aplicación sabe que hay una tienda estatal. Por lo que de esa manera, soy capaz de empezar a trabajar con mi tienda estatal en la biblioteca del usuario.
173. Crear acción de sesión de usuario: De acuerdo, Nuestra tienda estatal se inicializó módulo de tienda afecta módulo en el nivel de aplicación. Veamos qué pasó en el módulo del usuario porque si recuerdas, dijimos que se actualizó. Entonces aquí dice que también está llamando al propio módulo. La biblioteca, al igual que el módulo de biblioteca del usuario está llamando a la tienda estatal. Pero por característica, porque los usuarios se destaca en la aplicación. Entonces de esa manera, no estoy llamando por ruta, pero estoy grabando una característica. Por lo que esto de usuario, los usuarios cuentan con D. Así que necesitas para la característica dos parámetros, uno, ese nombre de entidad, y luego también el reductor. Reductor, que se va a utilizar en la tienda estatal para cambiar los estados y cambiar las variables dentro del estado almacenado. Entonces aquí necesitamos un nombre y también el reductor. Reductor provienen de reductores archivo. Entonces si vas aquí a los usuarios de la carretera, verás que hemos inicializado algo con los reductores. De acuerdo, vamos a trabajar con esto. Vamos a eliminar algún código que se inicializa automáticamente por el plug-in de una consola ECS. Pero antes que nada, vamos a crear una acción. ¿ De acuerdo? En la acción se va a comprobar o construir la sesión de usuario en base a algún token. Y este token se manejará si es válido o no dentro de los efectos. Y en el reductor, voy a cambiar las variables en base a eso. Entonces veamos cómo este ejemplo o esta inicialización de estados puerta tripa llamando a la acción. Entonces si vas a los usuarios por ensayarlo diciendo aquí como es, claro que es un servicio. Entonces como ven aquí, sus usuarios para ensayados. Y este usuario ensayado contiene algunas variables, Vamos a ver más adelante. Y también constructor que tiene una tienda y luego en ella, y en este
init, está diciendo esta tienda de puntos esta accion del usuario de insignia en ella. Por lo que hay acción en las acciones del usuario, que se llama terminarlo. Vayamos a la acción del usuario, ¿de acuerdo? En las acciones del usuario, hay acciones se inicializan con nuestra creación de esa tienda estatal. Por lo que podemos crear ahora nuestras propias acciones. Entonces pongamos aquí un poco de espacio. Por supuesto que vamos a eliminar esas cosas más adelante, pero vamos a crear nuestra acción. Entonces, en primer lugar, necesito crear la acción que se llama Build user session. Por lo que inicializarías constante y esto se llamará build user session. Y de esta manera, tendré un método de creación de acción el cual se llama desde la tienda estatal. Entonces aquí, como ves aquí, crear acción se importa de biblioteca almacenada y GR x. Así que de esa manera, es necesario dar un nombre para esta acción. Entonces el nombre normalmente se llama de esa manera, define el nombre de la característica, se
puede decir usuarios, y luego se puede definir lo que esta acción está haciendo. En nuestro caso, se llama Build user session. Entonces de esa manera, hemos creado nuestra primera acción. Por supuesto, hay más acciones que vendrán más tarde, como sobre el éxito o el fracaso, como desmarcar el token, repelido o no. Entonces esto lo que vamos a hacer después. Entonces ahora, Ok, volveré a mi identificación de la FSA. Limpiemos algo aquí. Entonces vamos a quitar todas estas cosas. No necesitamos que se inicialicen. Y también podemos eliminar este comentario aquí, y podemos decir construir método de sesión de usuario. Por lo que aquí tenemos build user session también. Y me va a despachar una acción desde la acción que hemos creado antes, que se llama Build user session. De esa manera, estoy despachando la acción. Entonces necesitamos llamar a esto de alguna manera donde lo vamos a llamar. Lo vamos a llamar en el servicio que hemos creado antes. Por lo que de esa manera, iré al Servicio de Usuario. Y luego en el constructor, necesito llamar al ID de FSA, si recuerdas. Por lo que aquí voy a decir usuarios privados para Sayed. Y luego llamaremos al usuario primeros auxilios desde la tienda estatal. Por lo que voy a decir aquí usuarios faceta. Entonces de esa manera se importó automáticamente y puedo usarlo y usar los métodos dentro de él. Es un servicio. Es como si estuviéramos llamando a un servicio dentro del servicio. Por lo que yo diría aquí, estos puntos usuarios para ensayados. Y luego iré a construir sesión de usuario de esa manera, este proyecto de ley, por lo que la sesión de usuario, enviará una acción para mí que se llama Build user session. Y en base a eso, la acción enviará notificación al efecto para hacer algo, como veremos en la próxima conferencia. Ahorremos ahora todo para ver si todo sigue funcionando bien. No tenemos errores. Por lo que volvemos a nuestro navegador. De acuerdo, no tenemos error. El aplicativo sigue funcionando bien.
174. Crear crear el UsersState: De acuerdo, Hagamos ahora la tienda, la tienda de los usuarios. Por lo que en la tienda, tendré dos campos. Uno es un usuario el cual me guardará los datos de usuario como nombre, dirección, correo electrónico, etcétera, y también si se autentica, si el usuario está autenticado o no. Entonces ahora vamos a crear ese estado. Eso se crean estados en los reductores. Entonces en eso usuario, tendremos alguna clase o interfaz la cual tendrá los campos o las variables que necesito usar en mi tienda, como el usuario, y se autentica de esta manera aquí, como ves, hay algunos inicialización ya realizada. Nosotros no lo vamos a usar. Te lo voy a explicar y creado frente a ti paso a paso para no tener un problema o malentendido. Entonces, en primer lugar, podemos quedarnos con todas estas importaciones. Vamos a quitar lo que no vamos a necesitar en las próximas conferencias o en esa refactorización. Entonces primero, necesito crear un estado. Para crear un estado, necesitamos tener Export y luego definimos interfaz. Como ven aquí, creó ya finca, pero le voy a dar un nombre, estado del
usuario, que es mejor nombre y más claro para no tener un nombres duplicados fechas entre la biblioteca. Si quieres tener otra tienda estatal en otra biblioteca. Por lo que no necesitas tan bien tener aquí Entidad, estado o entidad de usuarios. Hablaremos de eso más adelante en temas más avanzados. Entonces necesito crear una interfaz pura que se llama estado de usuario. Y este estado de usuario tendrá dos campos. uno se le llama usuario. Tendrá un tipo, se llama usuario. El modelo de usuario, que hemos creado a partir de usuario en el modelo el cual contendrá correo electrónico, contraseña, etc. Así que toda esa información, estarán en ese campo. Y además, vamos a crear una variable que se llama es nuestra autenticada. Entonces de esa manera, podemos saber si el usuario está autenticado o no. Por lo que tendrá un tipo booleano. De acuerdo, Entonces para eso podemos quitar este original el cual es creado por la consola NX. Y ahora hay interfaz que se llama usuarios estado parcial. Por lo que sólo necesitamos reemplazar a los usuarios estado parcial. Normalmente no lo necesitamos por ahora, pero también lo necesitaremos en materia más avanzada. Pero vamos a tener el tipo de esta clave de características de usuarios, que se llama usuarios. Y entonces tendrá un tipo de estado de usuario. De acuerdo, este adaptador no necesitamos. Ahora después de eso necesitamos tener estado inicial. Por lo que el estado o el estado de inicio de mi aplicación, normalmente el usuario es nulo al principio y también autenticado es falso. Por lo que necesitamos tener estado inicial también. Por lo que llamaré aquí constante de exportación también. Se llamará estado inicial. Por lo que voy a tener aquí los usuarios iniciales estado para tener como nombres más convenientes. Y luego en este estado de usuario inicial, tendrá un tipo de estado de usuario, y será igual a un objeto. Por lo que este objeto tendrá un usuario vacío como null al principio como dijimos, y se autentica será falso al principio. Entonces tenemos estado inicial así. Entonces de esta manera, creamos nuestro estado. Entonces ahora vamos a crear el reductor, cómo sentirá la acción. Entonces diré cuando ocurrió alguna acción como Build session state, voy a llamar a algo. Si no hay nada, entonces no hará nada ni ningún cambio en su tienda estatal. Entonces primero voy a quitar todo esto como ya tenemos estado inicial. Por lo que ahora creamos un reductor. Se llamaría así usuarios reductor. Será del mismo nombre de la tienda estatal, como siempre usuarios, usuarios, es plural. Por lo que ahora creamos un reductor crea método reductor provienen de DRX estados puerta. Entonces aquí tenemos crear reductor y nos pedirá estado inicial. ¿ Cuál es nuestro estado inicial? ¿ Es éste? ¿Estado inicial del usuario? ¿ Y cuál es el otro o cuáles son los otros parámetros? Otros parámetros serán, por ejemplo, los tipos de reductores. Entonces vamos a tener más código organizado. Podemos bajar esto y así poner esto aquí y vamos a poner coma, nuestro primer o segundo parámetro estará encendido. Esto en también se importa de los reductores o de MDR x. Así que como ven aquí, tenemos aquí en se importa. Entonces adelante. Entonces diré qué acción sobre la acción, que es a partir de las acciones del usuario. Como ves aquí, es estrella importada como acción de usuarios, como importar todo desde la acción de los usuarios y luego puedes usarlos. Por lo que tenemos aquí también cargar acceso de usuarios, o tenemos aquí construir sesión de usuario. Y esto sobre método
, tendrá dos parámetros. En primer lugar es la, por ejemplo, la propia acción, como qué acción va a suceder. Por lo que tendré aquí la compilación de punto de acción del usuario, sesión de usuario. De acuerdo, ¿Qué pasará? Entonces aquí el segundo parámetro, vamos a cambiar el estado. Por lo que tendré también una función de devolución de llamada que tendrá como estado de parámetro. Y va a hacer algunas cosas por mí o cambiar el estado en sí. Por ahora. Sólo podemos hacer como un cambio en el estado, como copiar como es. No vamos a actualizar el estado. Por lo que tengo aquí también otros corchetes. Entonces voy a decir aquí, sólo copia el estado, así que no le hagas nada, sólo clónalo. Entonces de esa manera, nuestro estado no cambió, no le pasó nada. De acuerdo, De esa manera, sabemos que nuestro reductor ejecutará algo basado en esta acción y cambiará ese estado. Haremos más cambios en la próxima conferencia cuando vayamos a trabajar con el efecto. Pero primero, eliminemos este código que no es necesario porque ya lo creamos. Por lo que ahora tenemos aquí el reductor de funciones, que se exporta y se utiliza en el módulo del usuario, si recuerdas. Entonces tenemos aquí el estado, será del estado del tipo usuario y, o indefinido y la acción. Y aquí se creó el reductor del usuario y se importa y se usa aquí. Entonces de esta manera, nuestra tienda estatal está lista desde el estado un punto de vista. Entonces de esta manera, puedo llamar a todas las acciones que necesito y cambiar el estado con base en eso. Seguimos teniendo algunos errores en la consola. Puedes ignorarlos por ahora porque están en los selectores y los vamos a arreglar en las próximas conferencias.
175. Crear acciones efectivas si el tode en Token es válido o no: Después de tener la comprensión de las acciones y también reductor y la tienda estatal, voy a hacer una actualización a nuestro diagrama. Entonces si recuerdas, hemos creado acción que se llama cinturón de usuario sesión. Entonces de esta manera, tendremos dos opciones basadas en el token. Entonces el token, si es válido, dirá que, de
acuerdo, construir la sesión de acción del usuario es un éxito. Y además, si no, se va a fallar y ahí va a cambiar. O ordenará al reductor que haga algo a la tienda estatal, como la configuración se autentica a false y el usuario a null. Y de la manera contraria, sucederá cuando el token sea válido. Por lo que la sesión de usuario de compilación de acción disparará efecto. Este efecto validará ese token que se almacena en nuestro almacenamiento local para obtener los datos del usuario de la base de datos si es válido establecer con los datos del usuario. De lo contrario, lo vamos a establecer en null en caso de que haya un error en la API o en el caso cuando haya un token no válido. Entonces de esa manera, vamos a crear dos acciones las cuales
decidirán que la sesión de usuario se construya con éxito o no lo es. Y el efecto va a llamar a esas acciones con base en la validación del token. De acuerdo, primero, vamos a crear esas dos acciones. Y voy a tener dos acciones que ya están en julio. Por lo que podemos eliminar este que se llama init porque tenemos build user session. Y de la misma forma que estamos teniendo una gran acción. Y también tendrá nombre. Por lo que aquí puedo reemplazar todo este texto. Podemos decir que los usuarios construyen el éxito de la sesión de usuario, como cómo tenemos aquí. Y también podemos renombrar este para que podamos, en lugar de construir o permitir usuarios, podemos decir construir el éxito de la sesión de usuario y también construir sesión de usuario falló. Entonces podemos tener aquí en lugar de fracasar. Entonces de esta manera, podemos tener la acción, acuerdo, ¿cuáles son las propiedades de esta acción? Por lo que las propiedades serán los datos que se carguen. Por lo que vamos a tener los datos se autentica a través y los datos de usuario son, por ejemplo, el propio usuario, el objeto de usuario. Por lo que de esta manera, bastaré con cargar solo los datos del usuario. Entonces de esta manera, podemos tener aquí apoyos o la propiedad que se llamará usuario. Y el tipo de ella será modelo de usuario, que hemos creado antes. Por lo que no hay necesidad de utilizar toda esta entidad de usuario aquí. Y así en el fracaso, tendrá también lo mismo, como si tuviera la misma cadena. Y también me hará alguna acción basada en eso. Se cargará un error o se puede cargar, por ejemplo, como algún mensaje de que el token no es válido o algo así, vamos a bastar en crear la acción solo sin apoyos solo por ahora. Por lo que ahora tendré 2, tres acciones. Una, construir sesión de usuario, que es
ésta, se le llamará y disparar el efecto. Y el efecto será decidir cuál es la acción correcta a tomar cuando su éxito, cuando el token sea válido y los datos del usuario estén listos, o si se falló y el reductor se comportará de manera específica, muchacho, en base a esas acciones. Entonces aquí sólo tenemos que no olvidar que tenemos aquí la sentencia fallida para no tener confusiones del nombre o denominación de sus acciones. Por lo que ahora podemos sumar más reductores. Entonces de esta manera podemos ir aquí y decir que,
vale, en la acción del usuario Construir estado de sesión, hacer algo. También puedes hacer otro en. Tenemos aquí otra coma y decimos en como usuarios acción también. Y podemos seleccionar sobre el éxito. Por lo que el estado estará, o se actualizará con base en lo que ingresemos de esa acción o de ese efecto. Entonces de esa manera, tendremos esta fecha. Se actualizará con un clon de esta fecha. Es muy importante, ésta, y esta línea es muy importante. Al igual que vamos a actualizar el estado, no vamos a cambiar todo el estado. A esto se le llama inmutable. Tienes que realizar un seguimiento de todas las acciones u ordenar cambios en tu tienda estatal. Entonces como te mostraré en las herramientas de desarrollo más adelante, cuando creemos unas herramientas de desarrollo, veremos cómo el estado está cambiando paso a paso en cada llamada de las acciones. Entonces ahora tenemos el estado y voy a actualizar ahora mis datos en esa tienda estatal. Entonces cuando definas un objeto de esa manera y pones coma aquí, y agregas los campos que se van a actualizar de esa manera estás diciendo, vale, toma el mismo estado, pero actualiza solo dos campos, que son realmente esos, se
puede actualizar sólo un campo, por ejemplo, usuario, y luego se actualiza el usuario lleno con los datos de usuario. Cómo puedo obtener los datos de usuario que se pasan a este éxito de sesión de usuario de compilación. Es decir, éste, esta propiedad la cual vendrá del efecto como les dije. Entonces de esa manera, también se
puede agregar un parámetro aquí que se llama acción. Y esta acción, tendrá los campos de esa acción. Por lo que tenemos aquí en este caso usuario, por lo que el usuario sea usuario de punto de acción. Y debido a que la sesión obtuvo éxitos, podemos actualizar también se autentica para ser verdad. Por lo que de esa manera, tendremos dos campos actualizados en esta tienda estatal. Pero cuando falló la acción o la sesión de usuario de compilación falló, entonces vamos a hacer que el usuario sea nulo y ethos indicado es falso. Entonces podemos hacer lo mismo. O vamos a copiar esta parte aquí. Podemos decir esto, ponemos coma y simplemente cambiamos la acción. Por lo que aquí tendremos fallada la sesión del usuario construido. Y así la acción estatal de todos modos. Solo tenemos que actualizar al usuario para que sea nulo porque falló y eso está autenticado será falso. Entonces de esta manera, hemos creado las acciones basadas en validación del token y el impacto en los reductores. Pero aún no manejamos esta parte, como esta parte que es de afecto y token válido. Todavía no trabajamos con él. Por lo que ahora nuestra tienda estatal se actualiza con base en el comportamiento de esas acciones. En la próxima conferencia, vamos a manejar el efecto donde se decidirá realizar esta acción o esta acción.
176. Crear efecto de sesión de sesión de construcción: Creando un efecto. Es un sencillo tranquilo. Siempre viene con la acción. Por lo que la acción va a disparar el efecto. Y el efecto decidirá en base a lo que por el éxito o el hecho de que la estructura creada de MDR X
nos permitió tener acciones también nos permiten tener efectos. También las ayudas FES y también reductores y selectores. Hablamos de los reductores, también acciones y también hablamos del paso,
pasemos a los usuarios afecta dot ds. Entonces en el efecto aquí, también
está usando algo llamado Crear efecto. Crear efecto es una función que viene de MDR x biblioteca. Entonces por los cambios que hicimos en las acciones aquí, perdimos el init y las funciones por defecto que se crean antes por la consola NX. Entonces hagamos una limpieza aquí arriba. Entonces como lo hicimos antes, voy a empezar de cero. Tenemos aquí efecto usuarios, que se utiliza también en el módulo de usuarios. Entonces vamos a eliminar todo esto. Ahora vamos a crear un efecto. Por lo que la mejor fuente para tener como crear efectos es una documentación de n DRX. Entonces como ven aquí, tenemos la documentación interna, algo llamado efectos NDR x. Y te está mostrando aquí un ejemplo de cómo crear de los efectos. Hay alguna explicación sobre plantilla
Angular y también cómo utilizar un servicio para el que las películas. Y luego aquí está recuperando las películas y luego escribiendo efectos en su sección de efectos de escritura, se
puede ver ejemplo de creación de ese efecto. Entonces exactamente igual que la documentación, voy a tener un nombre para mi efecto. Por lo que el nombre de nuestro efecto es construir sesión de usuario. Y siempre los efectos son sufijo con el signo del dólar, como se ve aquí. Por lo que ahora podemos crear nuestro efecto usando el método create effect. El parámetro de crear efecto será una función la cual está observando siempre las acciones van en la aplicación. Entonces por ejemplo, tendré aquí primero una función de devolución de llamada, y esta función de devolución de llamada me devolverá estas acciones, la tubería. Por lo que estoy aquí observando las acciones que se están ejecutando en la aplicación. Este es servicio el cual es proporcionado por n DRX para observar las acciones que van en la aplicación. Entonces aquí en la tubería, cuando tenga la acción que se llama Build user session, entonces haré algo así adelante que hay que decir de tipo, como cuando esa función o cuando la acción tiene un tipo de la, por ejemplo, la sesión de usuario de compilación, entonces simplemente vamos a oscurecernos y buscar los datos. Entonces si recuerdas, hemos importado la acción del usuario aquí. Entonces lo usaré, y diré punto de acción del usuario Construir sesión o construir sesión de usuario de esta manera, cuando este sea el tipo, entonces voy a hacer algo con él. Entonces pones una coma aquí para agregar otra tubería, que es mapa concat o mapa de fusión. Este es un RTX para nosotros poder mapear, es
decir, enlaces de todo esto observable a un nuevo tipo a una nueva acción. Por lo que de esa manera se puede tener un mapa concat. Y este mapa concat así con tienen también como parámetro, una función de devolución de llamada. Y esta función de devolución de llamada, podemos hacer dentro de ella lo que vamos a hacer por el token. Entonces como el dibujo, voy a comprobar si el token es válido o no. Entonces si recuerdas, hemos creado un servicio de almacenamiento local,
y este servicio de almacenamiento local contenía para mí todo lo relativo al token de autenticación. Entonces para eso, voy a agregar también otro método aquí con el servicio de almacenamiento local, que será, es token válido. Por lo que aquí podemos tener es válida plática Y función. Y esta función validará para mí ese token, que ahora está en el almacenamiento local. Y luego devolverá false o true en
base a la validación y el tiempo de caducidad del token. Entonces la implementación de este método en almacenamiento local, este servicio que vamos a tener aquí primero causado token, y voy a agarrar el token de este punto, obtener token. Es como si estuviera llamando a este método para obtener el token del almacenamiento local. Y luego comprobaré si hay token o si realmente hay token como está definido, como tenemos token en la tienda estatal o en el almacenamiento local, entonces lo vamos a revisar. Por lo que necesitamos decodificarlo. Si recuerdas, estábamos haciendo una decodificación para esa ficha en la guardia. Entonces aquí tendré decodificación de token y luego tendré que el guardia o copiaré el método que estaba en la guardia aquí. Si recuerdas que estábamos analizando ese token a algunas partes y entonces estamos obteniendo la exploración o también algunos campos como es admin y también el ID de usuario, si recuerdas. Entonces ahora voy a copiar esta parte y luego volver a la función de almacenamiento local. Y entonces aquí tendremos, y luego cerramos el soporte. Ahora tenemos el token. Por lo que ahora necesitamos conseguir la x por arreglado a tiempo y validar ese token. Si recuerdas también, tenemos en la vieja guardia alguna manera para la validación, que era token caducado y estábamos haciendo algún cálculo. Volverá para mí a través de todo falso si esto, como por ejemplo, el token quedó caducado. Por lo que copiaré el mismo método que haremos más adelante, alguna refactorización. Por lo que lo tendré aquí también. Será un método privado. Y además, voy a decir que aquí, si el token no está caducado, entonces regresó para mí a través, porque aquí estoy diciendo es token válido. Entonces si es válido, entonces se me devolvieron a través. Entonces aquí tendré si no ha caducado, porque aquí token
caducado, volverá para mí verdadero o falso. True si ha caducado. False si no ha caducado. Y aquí quiero no está caducado como es token válido, así que no ha caducado. Por lo que también para cerrar todos los vacíos de esta función, por lo que también necesitamos añadir más. Entonces cuando no hay token totalmente, entonces regresa por mí falso, como si no tuvieras un token válido. Entonces podemos tener aquí devolver falso, vale, es token válido ahora se puede usar en el efecto, cómo podemos usarlo. También podemos importar ese servicio. Por lo que podemos decir aquí servicio de almacenamiento local. Y luego este servicio de almacenamiento local, podemos llamarlo desde exactamente cómo lo tenemos. Aquí. Contamos con servicio de almacenamiento local, y nuestro servicio de almacenamiento local comprobará si el token está caducado o no. Entonces tendré aquí, si este servicio de almacenamiento local de punto que es token válido, entonces haré algo que es acción para succes. De lo contrario voy a hacer o agarrar la acción de fallar como vimos en nuestro diagrama. Entonces aquí tengo exactamente el punto donde llegué aquí. Entonces tenemos aquí, sí, vamos a agarrar la acción del éxito y construir la sesión de usuario. De lo contrario, también tenemos que agarrar la acción que está fallando o no hay token o token caducado, y construir el estado vacío, lo
que estará reflejando que tenemos
conjunto vacío o no hay ningún usuario conectado ya a nuestra tienda. En la próxima conferencia, vamos a construir o a ver cómo podemos hacer esos pasos. Como mencioné antes.
177. Llamar acción en token invente: Entonces el comportamiento aquí que cuando es token inválido, vamos a llamar a esta acción. Entonces de esa manera, voy a hacer la fácil aquí. Es un poco más difícil porque somos una necesidad de
agarrar algunos datos de la base de datos utilizando nuestras API. Por lo que haré primero la parte fácil. Entonces ahora en lo demás, cuando el token no es válido, Llamemos a una acción. Llamando a una acción en el efecto. Estará en el camino como retorno off, como off se importará de RX JS. Volverá para mí y observable fuera de alguna acción. Entonces de esta manera, puedo decir que las acciones del usuario puntan y luego construir sesión de usuario fallan, pero hay que llamarlo como una función. Entonces esto es lo importante a notar, no perderse eso. Entonces aquí no lo llamamos como una función porque es un tipo. Entonces estamos pidiendo el tipo de esta acción, pero aquí vamos a ejecutar esta acción. Y esta acción no se ejecuta como cuando el token no es válido, entonces vamos a tener en nuestro reductor algún comportamiento. Y este comportamiento estará configurando al usuario en nulo y se autentica en falso. Entonces de esa manera, los componentes notarán que quienes están observando esas variables o esos campos, entonces sabrán que el usuario es nulo y se autentica es falso. Entonces no muestres algo ni escondas algo al usuario global. Entonces ahora la parte, si vamos a tener aquí, como si hay token válido, entonces necesitamos revisar o agarrar los datos del usuario y luego agregarlos a otro reductor y llamar a la acción, que es Serán verdaderos los éxitos de sesión, los
cuales tendrán los datos de la acción, cuales serán usuario y agregarán a la variable del estado, almacenarán el usuario y el objeto de usuario y se autentica. Entonces de donde obtendré estos datos de usuario,
los datos de usuario vendrán del servicio, el servicio que hemos creado antes, que se llama usuario de Git. Y necesitamos para eso, el ID de usuario. Entonces por eso en el back-end, almacenamos también en el token, el ID de usuario. Por lo que tenemos ración caducada, tenemos es admin o no, y también tenemos el ID de usuario. Entonces como sugiero, podemos crear también una función que se llama Obtener ID de usuario del token. ¿ Por qué necesitamos eso? Porque voy a llamar en el efecto al servicio de usuario. Por lo que aquí también, también
estamos en necesidad de conseguir el servicio al usuario. Tendré aquí servicio privado y luego usuarios. Y esto aquí usuarios tipo de servicio. Entonces tenemos aquí el servicio al usuario, para que podamos usarlo ahora. Pero primero, después de eso. Por lo que este servicio de usuario
dot, dot get user está en necesidad de ID de usuario. Entonces aquí necesito definir un ID de usuario que sea constante, y podemos llamarlo ID de usuario así. Y llamaremos a este punto servicio de almacenamiento local. Y entonces tendré una función que es buena, diciendo Get User ID de token por ejemplo. De esta manera, tendremos el ID de usuario del token. Hagamos esta función. Entonces copiaré esta parte para tener el mismo nombre, y luego tendré esa dopamina aquí o la función aquí. Será exactamente lo mismo. Nosotros vamos a decodificar y hacer lo mismo. Y no vamos a obtener la caducidad, pero vamos a obtener el ID de usuario, cual fue almacenado con el token. Entonces exactamente lo mismo. Tendré aquí token getToken y luego comprobaré ese token. Yo lo decodificaré. En primer lugar, tendré que devolver el ID de usuario de token dot. Entonces de esta manera podemos eliminar esta parte. Y diré decodificación de token y luego ID de usuario porque sé y estoy seguro de que hay ID de usuario en este token después de decodificarlo, contrario, devuelve para mí null. Entonces cuando no hay token, entonces regresó para mí nulo. Entonces de esa manera, obtendremos el ID de usuario del token para que sea más seguro, como no tener errores o problemas en caso de que no haya ID de usuario, entonces podemos tener también si aquí. Entonces puedo agregar aquí, si decodificar token, como tengo aquí algún token, pero por ejemplo, no es posible dividirlo. Entonces de esta manera, descodificación de tokens, nos pondremos indefinidos. Entonces de esa manera, puedo tener si, OK, y el código, como si realmente obtengo una decodificación de token, luego regresó para mí, ese token decodifica ese ID de usuario. De lo contrario, regresa para mí también, nulo. Entonces de esta manera, estamos cubriendo todas las posibilidades que pueden suceder respecto al ID de usuario desde el token. Entonces aquí estoy obteniendo el ID de usuario del Docker. Ahora somos capaces de utilizar este ID de usuario dentro de ese servicio. Pero también es mejor aquí porque tenemos posibilidad de que User ID pueda ser nulo, por lo que es mejor tener si aquí también. Entonces si hay ID de usuario, entonces vamos a regresar también,
el retorno de datos del servicio y la acción. Entonces esto será así. Por lo que tendré regreso. Yo quiero volver de esta acción o de éxito de la acción, pero necesito llamar al servicio. Por lo que en el servicio, cuando llamo al servicio, puedo agregar también una tubería y mapearla a otro tipo, que será un éxito de sesión de usuario de compilación. Entonces para explicarlo, puedo tener aquí este servicio de usuario punto que getUser y luego paso el ID de usuario que quiero aquí. Por lo que seguimos dando error, obteniendo error porque son los tipos no están coincidentes juntos. Por lo que necesitamos gestionar este tipo para ser exactamente el mismo de los tipos de acciones. Porque Crear efecto, espere por mí. Acciones no, por ejemplo, como observables de datos. Entonces de esa manera, tendremos aquí también pipa. Por lo que necesitamos mapear estos datos a un nuevo tipo. Por lo que el mapa debería venir de nuestros x js como ves aquí. Por lo que aquí tendremos un mapa. Y luego este mapa, obtendríamos los datos del usuario de él. Y este mapeo, o vamos a regresar como no por ejemplo, los datos del usuario en sí, sino acción, acción de éxito. Por lo que podemos tener aquí retorno después de la acción del usuario mapeo y luego construir sesión de usuario succes. Pero este éxito de sesión de usuario necesita un prompts y esas sondas son usuarios. Entonces de esa manera, tendré aquí, este prompts será el usuario. Por lo que el usuario será los datos de usuario, que tengo aquí. Entonces de esa manera, estoy diciendo cuando hay un token válido, entonces encuéntrame el ID de usuario de ese token. Y luego si su ID de usuario es válido, entonces agarra para mí los datos de usuario del backend, y luego cambia los datos de retorno para que sean como una acción de construir sección de usuario o éxito de sesión usando los datos de usuario. Entonces de esta manera, estoy diciendo ese fuego para mí esta acción. Y yendo al reductor de esta acción, notaremos que me estoy metiendo en la acción desde la acción, los datos
del usuario y los pongo en el campo de usuario, en la tienda estatal y también se autentica. Yo lo estoy haciendo como un verdadero. Entonces de esa manera, he creado el efecto. Pero ahora nos faltan algunos puntos. Te lo dije siempre cuando tenemos simios, cubra
siempre todas las posibilidades, ¿de acuerdo? Si no escucho tener token válido, entonces regresó para mí acción, ok, sesión falló. Aquí por ejemplo, si hay error con la API. Entonces cuando estoy agarrando los datos del usuario del servicio de usuario y hay un error. Cómo podemos enviar,
por ejemplo, la sesión de usuario de compilación falló. Aquí, puede agregar la coma después de la asignación dentro del método de tubería. Entonces de esa manera, se
puede decir catch error. Y este error catch tendrá para ti un error o una función de devolución de llamada donde llevas giro exactamente igual aquí. Por lo que también puede retorno de usuarios sesión de cinturón de acción falló. Por lo que esto se llamará cuando haya una falla en la API y luego se inicializará la decisión y se autentica será falsa. Pero también un año tenemos un if, si no hay ID de usuario, necesitamos también atraparlo. Por lo que tenemos también que añadir aquí más para el ID de usuario. Entonces si no hay token válido y de lo contrario, si no hay ID de usuario y de lo contrario falló, si hay ID de usuario, entonces haz tu trabajo, agarra esos datos y campo para mí la tienda estatal, como vemos aquí en el reductor y como lo discutimos antes. Por lo que ahora terminamos también esta parte. Por lo que ahora tenemos acción cuando falló y también acción cuando es éxito. Cargamos los estados contados usando el reductor con los datos y los datos están fuera de la tienda, se está actualizando siempre en base a toda esta fecha. Ahora necesitamos de alguna manera leer todas esas variables en componentes. Por ejemplo, lo voy a leer en la página de check out y llenar el formulario de
datos de check out y decir que el formulario se llenará automáticamente cuando inicie sesión en la página de checkout. Por lo que no tengo que sentir mis datos como mi nombre, e-mail, dirección, etc.
178. Observar campos de la tienda del estado utilizando los electores: Por lo que ahora vamos a agarrar un dato a nuestros componentes. Por lo que quiero que mis componentes vean los datos de la tienda estatal. Pero primero necesitamos crear selectores. Los selectores son en realidad para agarrar los datos de la tienda estatal. Entonces si recuerdas que nuestra estructura está creada para nosotros, un selector de usuario. Y en este selectores de usuario, estamos recibiendo un error aquí porque es, cambiamos los tipos, cambiamos las acciones. Por lo que voy a quitar todo desde aquí, que se crea automáticamente, y también eliminar todos esos errores que se definen en la importación y comienzan desde cero. Pero voy a mantener esta parte es buscar el estado de la función de usuario administrado por NGINX. Entonces aquí es como si estuviera consiguiendo el estado de usuario. Yo estoy consiguiendo toda la tienda aquí. Entonces con esta tienda, puedo hacer algunas cosas. Por lo que puedo seleccionar los datos de usuario y también el usuario autenticado o está autenticado o no. Entonces aquí sólo tenemos un error es un estado, necesitamos reemplazarlo por el estado de los usuarios. Si recuerdas, hemos creado estados de usuario en el reductor. Por lo que tenemos aquí importar estado de usuario desde ahí haces reductor. Por lo que esta constante está obteniendo el estado del usuario está usando create feature selector. Entonces seleccione para mí todo el estado del usuario usando la clave de función de los usuarios, que se llama usuarios. Porque aquí, nuestra aplicación, si creamos otra biblioteca o en otra tienda estatal, por ejemplo ,
sus productos, necesitamos diferenciar entre esas puertas de todos esos estados que tengo aquí. Por lo que la clave característica de los usuarios o el nombre de estado que se utiliza en el módulo de usuarios, que es éste para característica se llama para característica Llamo Usuarios característica Qj se llama usuarios deben ser diferentes de biblioteca a biblioteca, o de biblioteca, o de función a la función. Entonces aquí voy a crear también un selector. Sé que no entiendes qué selector, pero pronto verás el uso de la misma y lo entenderás. Por lo que crearía aquí una constante, lo llamaré Get User. Entonces desde la tienda estatal, Sólo dame el campo de usuario. Entonces aquí llamaré a algo que se llama crea un lector, y esto crea un vector es de MDR x. Y entonces usaré el estado GetUser aquí. Y entonces diré desde ese estado, que tengo aquí, entonces lo puedo usar para devolver algunos campos específicos de él. Por lo que diré aquí desde ese estado, luego regresé por mí, usuario de punto del estado. Por lo que el usuario o el usuario llenó dentro eso estados puerta donde estará con datos o será nulo en base a la decisión aquí, entonces puedo obtener los datos del usuario exactamente lo mismo que podemos hacer también para autenticados. Por lo que podemos crear otra constante que también será selector. Por lo que podemos decir que get user está autenticado. Por ejemplo, todo es nuestro ser más corto. Por lo que crea un elector es el nuestro también estará recibiendo del estado de usuario. Y entonces usaré exactamente lo mismo aquí. Pero en lugar de campo de usuario, usaré es campo autenticado. Por lo que aquí estoy consiguiendo se autentica. De acuerdo, yo creé este electrón, todo bien. Ahora qué puedo hacer con él, cómo podemos usar esos selectores. Si recuerdas, te dije que tenemos la fachada es para hacer y embellecer más nuestro código. No vamos a tener grandes llamadas en los componentes. Podemos tener solo llamadas cortas cuando quiera llamar
al usuario get o cuando quiera tener los datos de usuario de la tienda estatal. Entonces vayamos a la usaid. Y aquí podemos crear algo que se llama como observable, podemos decir. Y esta observable será una variable del usuario para ensayado. Y tendrá actual, por ejemplo, podemos darle un usuario actual. Entonces este es un nombre y sería observable como yo, lo van a hacer. Las variables observables son siempre sufijos con signo de dólar. Y aquí tenemos esta puerta de puntos. Y luego tomó pipa aquí cómo podemos llamar a un selector. Entonces si recuerdas, aquí estamos llamando a una acción. Ahora podemos llamar aquí a un selector. Entonces diré que este punto almacenó la tubería, y luego diré usuarios selectos, selectores, usuario seleccionado, ¿qué es? Está aquí. Es importar todo para mí desde selectores de usuarios. Tan importante para mí,
todo, lo que se exporta aquí. Entonces exporta para mí esto, esto y esto. Entonces ahora tenemos en la faceta, exportar o selecciona para mí selector de usuario, que será, por ejemplo, GetUser. Y además vamos a crear otra u
otra variable a la que se llamará se autentica. Y esto está autenticado, también
será observable porque esta pipa volverá para mí observable y seleccionará para mí un dato específico de la tienda. Por lo que yo diría aquí tienda dot py pz también, y luego seleccionar, y luego selectores de usuario. Y luego seleccionaré Git, usuario está fuera. Entonces de esa manera, tengo aquí dos variables en la usaid del usuario. Puedo utilizarlos y pipa datos de la tienda y observar esos datos que se almacenan en la tienda estatal. No necesitamos esta importación por lo que podemos quitarla. Por lo que en la próxima conferencia, voy a mostrar cómo también podemos llamar a todos esos observables. Por lo que pasaremos al nivel de componentes, por ejemplo, en producto, y llamaremos al servicio de usuario y llamaremos, por ejemplo, esto obtenga usuario actual. Por lo que usuario actual, recuperará los datos del usuario de la tienda estatal si está autenticado o no.
179. Página de compra de relleno automático: De acuerdo, ahora tenemos almacenadas esas dos variables o dos campos
del estado que están observando para mí al usuario actual, y si el usuario está autenticado o no. Sólo quiero volver a mencionar que hicimos esta parte. Por lo que cargando la aplicación desde el principio, suponemos que ya tenemos un token de almacenamiento local. Por lo que hemos encerrado antes de alguna manera y tenemos el token ya en su tienda estatal y estamos comprobando si es válido o no. No hicimos esta parte. Y esta parte vendrá más tarde después de esta conferencia o esta suma de conferencias después de que
terminemos completamente esta parte y observemos o llenemos la página de pago en base al usuario conectado y conectado. Entonces ahora tenemos esas variables. Podemos entonces utilizar usuarios para Sayed directamente en cualquier componente de nuestra biblioteca, por ejemplo, en órdenes. O bien podemos llamarlos o llamarlos a eso a través de los servicios. Porque dijimos que las bibliotecas se están comunicando entre sí a través de los servicios de esas bibliotecas. Por lo que podemos tener aquí también algún servicio que se nos puede llamar observar, entrar en usuario. Por lo que puedo agregar aquí un servicio también, que se observaría, o puede tener su pequeña letra observar usuario actual. Entonces aquí tenemos un usuario actual. Asumimos que nos encerramos y tenemos al usuario actual. Entonces de esta manera, llamaré a ese rápido Sayed, que es usuarios para Sayed. Por lo que con los usuarios para Sayed, tendrá dos campos. Uno de ellos es usuario actual. Entonces de esta manera podemos devolver esto. Entonces éste regresará por mí y observable. Y estos observables contendrán al usuario actual. Y también podemos crear o se autentica el usuario actual? ¿ Se autentica el usuario actual? Y de esta manera, también podemos llamar o devolver ese observable, que serían estos, aunque
el usuario primeros auxilios, está autenticado. Por lo que de esa manera podemos ir de nuevo a nuestra biblioteca de pedidos o a la página de componentes de check out o checkout. Y tenemos aquí en la página de checkout, podemos llamar a Servicio al Usuario. Ya lo hemos llamado. Por lo que ahora, en base a eso, podemos obtener los datos de su usuario actual y sentir ese formulario de check out. Podemos agregar aquí un método que puede ser este dot auto Feel usuario. Eso. Por lo que de esta manera, podemos tener los datos del usuario ya rellenados en el formulario cuando hacemos un checkout. Entonces quiero decir, aquí en esta página, cuando vaya aquí a la guardia y luego haga clic en Checkout, tendré aquí mis datos basados en mi token después de iniciar sesión. Porque si recuerdas, hemos activado el logueado aquí. Por lo que necesitamos iniciar sesión y luego tendremos aquí esta página o acceso a esta página. Entonces vayamos aquí otra vez y digamos en privado. Definimos un método y lo llamamos autofill datos de usuario. Y este autofill datos de usuario con oro para mí, este punto observar usuario actual. Por lo que necesitamos observar el estado actual del usuario. Podemos ver si está conectado o no. Y luego podemos obtener también los datos del usuario. No tenemos que comprobar aquí si el usuario está conectado o no porque esta página ya está protegida por la ruta, si recuerdas. Pero hablaremos de observar que el usuario está conectado cuando sí escuchemos la revisión del producto. Pero aquí ya está protegido. Por lo que no tienes que comprobar si el usuario está autenticado o no. Solo necesitas obtener los datos de usuario o de usuario actual. Por lo tanto, observe los datos actuales del usuario. Yo me suscribiré a ella. Podemos en cambio tener gleich esta pipa y tomar hasta y todas estas cosas. No se puede agregar también una tubería que se llama toma, y se tomará una. Y sólo se puede tomar un valor de la tienda estatal. Al igual que no tienes que tomar el valor siempre, siempre, siempre, y observarlo. No, solo tomas una y automáticamente su suscripción, como hablamos
antes, estará terminada. Entonces de esa manera, no tendrás ninguna fuga de memoria. Entonces aquí tengo una pipa, toma una, está bien, suscríbete, y luego tendré usuario. Entonces aquí este usuario me devolverá los datos del usuario. Entonces si comprobamos aquí ese tipo, como ves, será tipo usuario. Por lo que necesitamos también para volver, Es una función de devolución de llamada. Y notaremos que este parámetro tiene usuario, tipo de usuario. Guardo su auto formateado. Vuelvo a abrir estos corchetes, y luego vamos a llenar el formulario. Entonces cómo estábamos fallando antes el foro, sólo
íbamos campo por campo. Entonces diré aquí, esto, el checkout form dot seti dot set value. Entonces de esta manera, tendré aquí esto sin embargo, checkout form dot, por ejemplo, nombre. Será un valor de conjunto de puntos, si recuerdas. Y luego estableceré el valor desde nombre de punto de usuario. Por lo que en ese caso, tendremos el nombre de usuario automáticamente en el checkout. Entonces vamos otra vez y probemos eso. Por lo que volveré a ir aquí, echa un vistazo. Y notaremos que no conseguimos nada. De acuerdo, vamos a revisar la consola por qué no tenemos datos y estoy seguro de que tenemos algún error. Está bien, bien. Ya hay algún error aquí. Tenemos que comprobarlo. Por lo que este error diciendo que no se pudo cargar un recurso, el enlace sin servidor con estado para 01, no autorizado para que la API consiguiendo usuario. Entonces realmente estamos consiguiendo al usuario, pero estamos no autorizados. ¿ Por qué? Porque si recuerdas, no
hicimos ninguna intercepción, ninguna intercepción HTTP para nuestra aplicación en una tienda de dulces. Lo hicimos solo por el administrador. Si recuerdas, tenemos aquí en el módulo de aplicación, proporcionamos algo llamado proporcionar interceptor http, y luego llamamos interceptor JWT y multi es cierto. Entonces de esta manera, podemos cargar cada solicitud HTTP con nuestro token. De esta manera, el servidor nos autorizará a utilizar esa API. Entonces ahora tenemos aquí en el admin, pero no lo tenemos al final usted compra. Entonces iré aquí a la aplicación, al módulo, y luego a sus proveedores. Y luego usaría aquí que proporcionen punto de control interceptor http a Auto Import. Y también tengo aquí interceptor JWT de usuario de Blue Bits, y entonces lo tendremos ya aquí. De acuerdo, Vayamos ahora de nuevo a nuestra página de inicio. Y entonces vamos a ahorrar de nuevo. Quitemos este punto de ruptura. Y luego iremos a echar un vistazo. Notaremos que ahora tenemos el nombre rellenado ya en ese campo. Por lo que para continuar aquí, también
puedes sentir todos estos datos basados en datos de usuario o bloqueados en usuario. Por lo que ahora voy a ir de nuevo y voy a llenar todo este conjunto de valor nombre de usuario. Por lo que es mejor también aquí comprobar si tenemos usuario para evitar tener error. En ocasiones no tendremos un usuario si te acuerdas, y me devolverá nulo porque la tienda estatal dijo que el usuario puede ser nulo. Entonces de esta manera podemos tener si aquí es mejor. Por lo que podemos decir aquí este formulario DO check out. Y luego, y seguiremos por todos esos campos. Por lo que iré rápido sobre ellos. Por supuesto, los puedes sentir tú mismo también y terminar esta conferencia llenando los datos del formulario. Entonces aquí siento todos los datos adquiridos por el usuario en su página de pago. Entonces cuando vuelva a ir aquí, como ven, que tenemos toda la información. Entonces ahora tenemos aquí casa y voy a la caja. Entonces vamos a quitar esta parte y luego voy a dar clic en Checkout. Y veré que mis datos rellenaron automáticamente ese cada campo que tengo aquí. Y también puedo hacer un pedido. Pero aún ahora, si recuerdas que hacer el pedido se basa en el usuario ID de invitado, Mao, vamos a tener el ID de usuario el cual está bloqueado. Por lo que harás eso y harás muchas refactorías en las próximas conferencias.
180. Refactoring + el orden de lugar con el usuario actual: De acuerdo, en esta conferencia, arreglemos algunos errores y también localicemos un orden basado en el usuario conectado. Entonces antes que nada, voy a tener un bicho aquí, que es yo, como les dije, es tomar uno. Entonces aquí tenemos la Q1 y cuando guardes la página y la aplicación se recargue en esa página de check out, entonces verás que no hay datos. Esto se debe a que cuando estás tomando sólo uno, tal vez este usuario sea nulo. Y tenemos aquí, si el usuario es nulo, entonces no somos capaces de establecer los valores del usuario a la forma. Entonces la mejor manera cuando te estás suscribiendo desde tienda estatal, siempre tomar hasta que terminen
la suscripción o cuando el componente quedó destruido. Entonces exactamente como lo hicimos anteriormente en el curso, estamos creando una, una variable que se llama suscripciones finales, o podemos llamarla darse de baja. Por lo que aquí tendré una darse de baja y esto tendrá un tema de cualquiera, y tendrá un nuevo tema. Por lo que podemos tener el tipo, lo siento, aquí tenemos un tipo y también será un tema nuevo. Entonces de esa manera, puedo definir mi nuevo tema y puedo inicializarlo, luego terminarlo cuando este componente se destruyera. Entonces aquí en destruir, puedo llamar a esto darse de baja. Será como siguiente y luego completo. Por lo que cuando se destruya el componente, se hará
esta suscripción. Entonces aquí tendremos esto y luego conflicto. Y no olvides siempre cuando estás usando NDI on destroy para implementar también el componente con destroy. Entonces tendremos aquí en ella y también onDestroy como vimos antes. Por lo que ahora tenemos que terminar esta suscripción de copa, tomar hasta este suscribirse. Entonces de esa manera, nuestra suscripción funcionará. Y cuando actualice la página, voy a ver que mis datos siguen ahí. Entonces aquí tengo un problema. Debo reemplazar esto por correo electrónico. Y tendremos todos los datos están bien y viniendo de la base de datos. De acuerdo, ahora hagamos otra refactorización, que es exactamente hacer el pedido basado en el ID de usuario, que quien está conectado. Entonces en lugar de este ID de usuario, puedo hacerlo sin nada. Al igual que podemos decir que sólo es una cuerda. Y entonces podemos decir, después de que tengamos al usuario, este ID de usuario es el ID de punto de usuario, que viene de la base de datos. Entonces de esa manera, tendremos el DNI de la manera correcta. Y cuando esté colocando el pedido, voy a ver el orden en el backend basado en el usuario conectado. Ejecutemos la aplicación Admin para ver si nuestros pedidos realmente van al back-end para probar eso. Por lo que estoy abriendo un nuevo puerto para abrir la aplicación al mismo tiempo. Por lo que tendremos abriendo el front end y el panel de administración o la tienda y el panel de administración, al mismo tiempo. De acuerdo, se está ejecutando con éxito. Podemos ir por ejemplo, a esto y decimos anfitrión local. Y ponemos el puerto que he especificado en el NX o en el comentario. Por lo que tendrá aquí la aplicación Admin en ejecución. Pero como ven aquí, estamos recibiendo el mismo error que obtuvimos cuando estábamos creando la tienda estatal. Por lo que también necesitamos inicializar la aplicación Admin para su tienda estatal. Por lo que necesitamos copiar ambas líneas módulo de tienda y también afectar módulo para ejecutar la aplicación Admin con éxito sin ningún problema. Por lo que ahora voy a ir aquí y luego voy a conseguir las importaciones. Y en la importación después del cliente HTTP,
decimos, bien, módulo almacenado, Auto Import y también afecta módulo será Auto Import y guardar y nuestra aplicación debería ejecutarse normalmente. Por lo que ahora tenemos la página de inicio de sesión sin ningún problema, voy a iniciar sesión y luego dar clic en Enviar. Y tendremos nuestra obligación o nuestro backend funcionando. Iré a las órdenes. Tengo aquí, las órdenes. Entonces tratemos de hacer un pedido en el front end o en la tienda. Por lo que un año ya he hecho un pedido. Voy a dar click en Hacer Pedido. Está bien. Mi pedido que agregó con éxito y tengo aquí botón para volver a la tienda. Vayamos al panel de administración y volvamos a las órdenes. Y veremos que los pedidos o el orden que he realizado está aquí. Entonces y también va con mi nombre porque me bloqueé con mi nombre como usuario. Y ha llegado con éxito aquí. Y también puedo verlo y ver todos los detalles sobre el pedido. Por lo que me gustaría asesorarte siempre sí checa esta gráfica o esta gráfica, cómo hemos construido todo el proceso de la tienda estatal para agarrar datos de la tienda estatal y también utilizarlos en nuestros componentes.
181. Pasarela de pagos de Stripe: En esta sección, vamos a agregar el método de pago para el usuario después de que esté haciendo el check-out. Por lo que después de hacer un check out, se me pide correo electrónico y contraseña para iniciar sesión. Y luego después de eso, cuando haga el check out o haga un pedido, debo tener una pasarela de pago para poder pagar y luego puedo hacer mi
pedido y luego la tienda lo manejará y me entregará mi producto. Por lo que en esta página cuando estoy dando click en hacer pedido, no
voy a hacer el pedido directamente. Voy a ser redirigido a alguna página de pago. Esta página de pago decidirá si hago el pedido o no. Pero cómo podemos agregar esa página. No vamos a crear un componente que lo hace Angular. Entonces si recuerdas, estábamos creando un componente para la página y luego estamos agregando algunos campos para el pago con tarjeta y luego estamos colocando el pedido. No. Ahora, de esta manera, vamos a agregar alguna pasarela diferente la cual vendrá también con el formulario y todo lo referente a ingresar los datos del carrito. Entonces para eso, necesitamos una pasarela de pago. Y esta pasarela de pago, te sugeriría que uses algo llamado raya. Stripe.com tiene capacidad para proporcionarte una API donde puedes hacer
un pedido y pagar por ti mismo o a tu tienda para personas que puedan colocar o aquellas en tu tienda. Y además tendrá capacidad de que realice un seguimiento de los pagos no solo en su tienda, sino también en algún dashboard el cual se crea por raya. Por lo que antes que nada, necesitas registrarte. Entonces tengo aquí como iniciar sesión, pero necesitas registrarte primero. Por lo que el registro es haciendo click aquí en inscribirte como ves aquí. Y luego cuando haga clic en él, tendrá alguna información. Por lo que tienes que llenar tu correo electrónico, nombre
completo y país y contraseña. Y por supuesto, habrá más información sobre cuál es su negocio y cómo está consciente como su dirección y cómo está localizando o cuáles son los productos de su tienda que desea alinear la puerta de banda con su tienda. Por supuesto todo, Es información sencilla. No tienes que conseguir tanto tiempo al registrarte. Es igual que el correo electrónico, nombre completo, y alguna información sobre tu negocio que puedes llenarlos fácilmente. Después de eso, puedes iniciar sesión y tendrás como algún dashboard. Por supuesto, también hay alguna autenticación. Necesitas proporcionar tu número de teléfono para que te envíen algún código. Es por más seguridad. Entonces tengo el código en mi teléfono, así que voy a ponerlo. Y entonces estoy llegando a estar conectado a mi cuenta. Entonces después de eso, tenemos como la forma de salpicadero. Y en el tablero puedes saber cómo estás manejando los pagos de tu tienda. Entonces por ejemplo, tengo algún pago hecho antes y tengo algunos, por ejemplo, pago que puede ser, por ejemplo, vivo y pagos que pueden ser con test, con modo test, con el cual vamos a trabajar. Este, solo necesitas encender el modo de prueba. Modo de prueba, como ves, tengo aquí algunos pagos para poder colocar, Hay tanto como pueda para desplegar mi aplicación o desarrollar mi aplicación y trabajar con la raya. Así que asegúrate de tener activado el modo de prueba. Y vamos a continuar en la próxima conferencia cómo conectamos usando la API. Y también vamos a crear como por ejemplo, las Herramientas de Desarrollador, que es como para crear las claves de API, como veremos más adelante. Además, no se olvide de acudir a la documentación de raya. Por lo que no puedes escribir documentos de desarrollador de Stripe. Y en la documentación verán la información de la que voy a hablar en las próximas conferencias. Voy a adjuntar todos esos enlaces en esta conferencia.
182. Instalación de bibliotecas necesarias: En la documentación de rayas se apoyan todos los lenguajes de programación que necesitamos para nuestra pasarela de pago. Para empezar con la documentación podemos dar click en Get Start. Y aquí tenemos múltiples operaciones para pagos. Una de ellas que vamos a hacer es aceptar pagos en línea porque también hay alguna facturación de suscripción y manejo fiscal que no vamos a cubrir en este curso. Necesitamos solo hacer aceptar pago en línea o un solo pago. Por lo que si hace clic en Aceptar pago en línea, tendrá un ejemplo completo de cómo implementar el pago o aplicación. Para aquí tenemos HTML reaccionar, y Next JS como front end y también fall back end. Todos los lenguajes de programación incluyen nodo. Entonces el problema aquí que no tenemos un ejemplo para Angular. Entonces si el lenguaje de programación del front end no está listado aquí, puede hacer clic aquí, no codificar, obtener ayuda de nuestros socios. Por lo que cuando haga clic en él, tendrá alguna recomendación de raya, que se llama raya SGX. Y se extrae es una biblioteca. Podemos usarlo con Angular para construir la pasarela de pago en el front end. Entonces como ves aquí, si tecleas Angular y entonces verás esta raya NC. Es una especie de elogiado por la página web de Stripe. Para que podamos empezar con esta raya NC iniciando aquí. Y entonces nos llevaría al repositorio Git de banda MDX. Pero para una mejor vista de documentación, se
puede ver también sitio docs. Por lo que hay documentación para la raya MDX, que también voy a agregar que el enlace con esta conferencia. Entonces cuando pinchemos en docs y luego verás esta introducción. Veremos cómo instalar la biblioteca, y luego vamos a utilizar los servicios de esta biblioteca. Entonces empecemos primero para instalar la biblioteca y la tribu gx y también la raya, que es originaria de raya. Entonces copiaré este código y luego iré a nuestro proyecto. Abriremos una nueva terminal, que ya tengo. Entonces podemos tener aquí, nota que todo está de vuelta y podemos abrir uno nuevo. Seleccionamos una bash, y luego nos abrirá una nueva terminal. Por supuesto, puedes usar cualquier terminal que quieras. Pero para mí uso, por ejemplo, zed como H o Bash. Aquí basamos el comentario. Y si notas que hay signo de dólar al principio, solo
necesitas quitarlo. Y luego vamos a instalar a biblioteca NC raya y la raya JS. Por lo que al presionar enter, se agregará a las bibliotecas o al back-end JSON, donde tenemos instalando o agregando nuestras bibliotecas para su desarrollo. Entonces si comprobamos aquí nuestras dependencias, veremos que tenemos dos bibliotecas. Uno de ellos es de raya y el otro es de raya SGX. Por lo que también hay una documentación para esta biblioteca que podemos utilizar para construir nuestro pago. Voy en este curso con el más simple. Por supuesto que hay fin de semana de opción múltiple hacer. Pero elegiré el que es exactamente para nuestra tienda.
183. Flujo de pago de pago: Es mejor siempre explicar el flujo, cómo vamos a implementar el pago. Entonces cuando voy a codificar ahora, puedes entender lo que estoy haciendo. En primer lugar, como se ve en este diagrama, que el usuario va a hacer clic en el botón, que se llama Place Order tiene, lo
tenemos en el front-end. Y luego vamos a crear algo llamado Crear sesión de check out. Y esta solicitud se va a manejar en el backend después de que estemos enviando los artículos de pedido al backend. Y en base a eso, esto va a calcular el precio total del pedido. Y luego va a crear algo llamado ID de sesión. Y este ID de sesión viene de sprite API, que vamos a utilizar en el back-end. Y después de crear el ID de sesión, vamos a redirigir al usuario a una página exitosa, como una página de agradecimiento o a una página de falla. Al igual que no pudimos crear el ID de sesión porque por ejemplo, conexión
a internet o él tiene algún problema de red. Pero ahora estamos asumiendo que vamos a crear un éxito de ID de sesión. Por lo que vamos a enviar que direccionen información al usuario en el front end. Y la aplicación front end leerá directamente a la página de pago. La página de pago sería proporcionada por raya. Tendrá alguna forma específica para que puedas poner tu número de tarjeta y luego algunos, otro detalle que vamos a ver. Y usaremos algunos datos de tarjeta de prueba, por lo que no usaremos el pago real. Usaremos algún guardia de escritorio, como veremos más adelante. Y luego después de manejar el pago a través del frente y después de redirigir a API o a la página de pago desde Stripe, vamos a tener redirección para asignar página
Q la cual hemos creado antes o a una página de falla. Por lo que cuando leamos dirigido a la página de Gracias, crearemos un mensaje de éxito y recrearemos el pedido con estado pendiente. Pero cuando se crea como o si hay falla en el pago, entonces redireccionaremos al usuario a una página fallida y crearemos el pedido como estado fallido. Por lo que necesitamos mantener el seguimiento de cada orden que se crea, si es acceso o si falló. Por lo que el cliente o el usuario o el propietario de la e-shop pueden saber cuáles son los problemas pueden pasar en su ego.
184. Crear la sesión de sesión de compra: Implementemos ahora este diagrama con codificación. Por lo que en primer lugar, hacemos click en el portador del lugar, que implementamos ya en el front end. Y luego vamos a crear una sesión de check-out. Pero la sesión de tick out requirió alguna API, que se llama Crear API de sesión de check out. Y vamos a enviar los artículos de pedido a esa API. Por lo que volviendo a la aplicación back-end que creamos antes con NodeJS, iré a la página Pedidos. Y luego en los routers de órdenes, si recuerdas, hemos creado múltiples API y una de ellas, ésta, que es jactancia y orden. Pero ahora necesitamos antes de publicar y ordenar, necesitamos pedir una sesión de check-out. Entonces para eso, necesitamos tener un router también. Y este router tendrá una solicitud de post. Y llamaríamos a esta API como sesión de check-out o crearíamos sesión de check out. Entonces de esa manera, tendremos la API lista con una solicitud y la respuesta como lo hicimos siempre con nuestras API. Por lo que tendré aquí solicitud y luego una respuesta. Y en base a eso, hemos devuelto la devolución de llamada que vamos a utilizar. Por lo que el check out Crear Sesión, como ves, dijimos que vamos a enviar los artículos del pedido. Por lo que voy a crear aquí una constante llamarlo elementos de orden. Y este pedido artículos, los
vamos a recibir del cuerpo de punto de solicitud. Por lo que de esa manera, podremos manejar los artículos del pedido y obtener el ID del producto y construir nuestra sesión. Hay ejemplo en la documentación, cómo estamos creciendo para crear un pago por eso, necesitamos instalar primero una biblioteca que se llama Stripe. Y vamos a usar este esfuerzo para crear nuestro token de sesión. Por lo que abriré aquí una nueva terminal. Voy a instalar raya. Entonces voy a tener NPM instalar raya. Eso es todo. Entonces esto está seco. Lo vamos a utilizar en nuestra API aquí para generar la sesión. Por lo que definiré aquí una constante que se llama Stripe. Y esta unidad, va a requerir la raya que hemos instalado antes. Por lo que tienes que asegurarte de tener instalación de raya en tus bibliotecas, como ves aquí, ya la tenemos. Y para eso, necesitamos proporcionar la clave, esa clave de prueba que hemos creado antes. Te mostré eso como obtenemos la llave. Pero yo de nuevo, puedo mostrártelo por ti. Entonces volvemos a ir a nuestro panel de control, cómo estábamos creando nuestros pagos y cómo creamos una cuenta de Stripe. Si vas a desarrolladores, conseguirás aquí algo llamado claves API. Y esto aquí tendrás clave publicable donde podrás usar para, por ejemplo, usar o crear un pago en tu aplicación. En nuestro caso, al crear la API, no
necesitamos la clave publicable, pero necesitamos esa clave secreta. Entonces tienes que hacer una llave secreta de revelación y luego la copias. Y tienes que asegurarte de que estás en el modo de prueba. Y de nuevo, vas al código y después de requerir raya, colocas otra llamada que sostendrá la llave misma. Por lo que tenemos aquí nuestra llave de prueba. Por favor, intenta usar tu propia clave para no intentar usar la misma. Para que puedas tener resultados en tu cuenta. Entonces tengo aquí esa cuenta de Stripe, tengo aquí la clave. Y luego voy a crear la sesión. Cómo podemos crear la sesión. Entonces si recuerdas, hemos creado la orden. Por lo que ahora podemos usar una biblioteca rayada para crear nuestra sesión. Por lo que definiré aquí una constante en nuestra API. Lo llamaré como sesión. Y esta sesión tendrá una función de peso como vamos a esperar hasta obtener alguna respuesta de Stripe dot check out. Exactamente así. Se llama esfuerzo por checar. Y luego tienes que decir sesiones con S. Y luego tienes que decir Crear. Y con este Create, es un método donde puedes pasar un objeto y este objeto tendrá algunos parámetros específicos. Por lo que primero tenemos que definir que tenemos algo llamado tipos de métodos de pago. Y entonces tenemos que decir ese tipo de pago. Ahora vamos a usar la guardia como MasterCard o tarjeta Visa. Nuevamente, necesitamos tener las líneas de pedido, pero las líneas de pedido deben formatearse de una manera específica. Podemos decir como podemos definir nuestras propias líneas de pedido. Por lo que podemos definir aquí, podemos decir artículos de línea de costo. Y como veremos más adelante, les
mostraré cómo lo vamos a definir. Por lo que usaría aquí artículos de línea, array. Tenemos que pasar agregar soldadura alguna opción que se llama modo. Y el modo es el pago. Por lo que podemos decir para crear una sesión de pago. Y luego tenemos algo llamado URL de éxito. Entonces, ¿por qué tenemos esta URL de éxito? Eso lo explicaré más adelante. Pero por ahora, podemos poner la URL localhost y luego 4200. El puerto 4200 se utiliza en nuestra aplicación angular en el front-end. Entonces si tienes un puerto diferente, entonces tienes que usarlo. Pero para mí, voy a usar el 4200 para mi aplicación front end como ven aquí. Por lo que después del pago, llegaré a leer dirigido a solicitud nuevamente, que es, por ejemplo, pase, digo éxito, que es nuestra página de agradecimiento, si recuerdas. Y luego tenemos algo llamado cancelar URL. Y con esta URL de cancelación, podrás redirigir al usuario a una página de falla si no es capaz de pagar. Entonces podemos tener en lugar de esto, podemos tener como alguna página, podemos llamarla, por ejemplo, error. Para que podamos crear esta página en el front end. Y después de eso tenemos la sesión aquí. Vamos a enviar de vuelta al usuario, al front-end, como vimos en nuestro diagrama, que enviaré el ID de sesión y leerá NFO directo. Entonces de esta manera, tengo que enviar de vuelta al ID de sesión front end
para poder redirigir A sesión o página de pago o a la página donde voy a poner los datos de mi tarjeta. Entonces yo diría aquí, Vamos a bonos que JSON y luego vamos a poner como identificación. Podemos poner sesión, que tenemos aquí, dot ID. Entonces de esa manera, porque esta sesión o esta sesión de check-out volvería para mí como asiático y tiene un miembro que se llama ID. Puedo obtener entonces el ID de sesión. Ahora nos queda un tema, que son las líneas de pedido. Ahora las líneas de pedido deben ser mapeadas de una manera específica. Entonces si vamos a la documentación de Stripe y vemos, por ejemplo, aceptamos un ejemplo de pago el cual es documentación rayada. Ya veremos en el Node.JS, hay como algún ejemplo que podemos usar. Y este ejemplo, como recuerdas, hemos puesto tipos de método de pago y hay partidas de línea. Los ítems de línea es array, que tienen una matriz específica de objetos. Y este objeto tiene datos de Bryce, moneda, y datos de producto, etcétera. Entonces pusimos toda esta información, pero no creamos ésta. Entonces para eso, necesitamos construir esta matriz de ese objeto donde tenga datos de precio,
moneda, datos de producto, y luego cantidad unitaria. Si recuerdas, tenemos una línea de pedido o artículo de pedido el cual solo tiene ID de producto, y entonces tenemos también la cantidad. Entonces de esa manera, necesitamos crear también este objeto de esa manera,
es algo así como mapeo. Nuevamente, leeremos mapa, el otro ítem para tener esta forma. Entonces exactamente cómo lo hicimos antes con la publicación y mayores, si recuerdas, leemos los artículos del pedido, los
volcamos sobre ellos. Después conseguimos el detalle del producto después eso para obtener el precio de cada producto y el nombre del mismo, y luego para calcular el precio total. Pero aquí lo vamos a volver a hacer, pero al frente, como por ejemplo, de manera diferente. Entonces antes que nada, voy a comprobar si realmente estoy recibiendo un pedido de artículos desde el front end. Entonces si no hay artículos de pedido desde el frente y luego enviados directamente y error, diré aquí devolver una respuesta y luego estado podemos decir, y serán 400. Y luego enviamos como un error, por ejemplo, al usuario. puede crear la sesión de check out, comprueba los elementos del pedido. Por lo que podemos, de esta manera tener algún mensaje de error en la consola para nosotros. Después de eso, vamos a comprobar si realmente hay artículos de pedido. Haremos un bucle sobre ellos y mapearemos las líneas de pedido en base a lo que vimos en la documentación. Entonces exactamente como lo hicimos antes con los artículos de pedido que estábamos creando como o bucle sobre ellos para obtener el detalle del producto porque necesitamos el detalle del producto como el nombre. Y también tenemos el monto unitario, que es el precio. Entonces de esa manera necesitamos tener un detalle del producto. Y para eso, si recuerdas, estábamos en bucle pero creando una promesa, todos vamos a obtener una matriz de productos o
líneas de pedido los cuales se pasan a través del ID de pedido o los artículos del pedido. Por lo que voy a ir aquí y luego otra vez bucle para pedir artículo. Entonces diremos u, que los artículos de línea tendrán, prométeme que todo de nuevo, si recuerdas, les expliqué todos esos pasos. Así que prometen que todos manejaron para mí los artículos de pedido donde puedo devolver múltiples artículos de pedido o múltiples productos haciendo bucle en artículos de pedido. Por lo que siempre dice, o su ítem punto mapa. Y entonces vamos a volver o realmente dar forma a esta matriz. cual tiene solo ID de producto y la cantidad a otra forma la cual tendrá la forma que se define en nuestro array o en la documentación de Stripe. Por lo que al final tendremos retorno de ese objeto como una matriz. Entonces, en primer lugar, necesitamos tener mapa. Y si recuerdas, porque estamos obteniendo los datos de nuestros productos de la base de datos, necesitamos poner asíncrona, por lo que necesitamos esperar a veces a que venga cada producto y luego podemos continuar nuestro bucle o nuestro mapeo si tengo múltiples artículos de pedido. Entonces después de eso, tenemos la hoja de artículos de pedido aquí se debe pedir artículo como uno, porque estoy bucle ahora uno por uno. Y definiré aquí un producto. Y este producto tendrá, mantendrá los datos del detalle del producto donde vamos a obtener los artículos de pedido. Por lo que causó producto lejos. Y luego usaremos el modelo de producto si lo tienes, como si lo importaras. Por lo que se debe utilizar el modelo de producto. Como ven aquí, no tenemos modelo de producto, necesitamos importarlo. Entonces después de pedir artículos, tendré aquí como costo, importación para mí, modelo de producto. Y luego diremos que requieren de los modelos donde definimos nuestro modelo de producto, si recuerdas antes en la sesión de backend. Por lo que ahora podemos usar el modelo de producto. Entonces diré aquí punto producto, y luego diremos encontrar por ID porque vamos a conseguir el pedido o el producto por ID. Y luego aquí, el ID que se pasa viene del front-end u otros artículos, ID de
punto o punto-producto. Si recuerdas, hemos mapeado el front-end para decir que los demás artículos contienen el producto y también la cantidad que el producto retendrá, el ID del producto. De acuerdo, El objetivo del mapeo ahora para remodelar la matriz de elementos de orden a otra forma que llamaremos líneas de ítems. Por lo que aquí tendré un retorno. Entonces regresaré y en forma de U, que será éste exactamente. Para que podamos copiarlo e ir de nuevo a nuestro código. Y decimos retorno para mí objeto, que se llama datos de precio. La moneda es el dólar y los datos del producto. El nombre no será la camisa, pero será el ID del producto o el nombre del producto. Si recuerdas, estábamos llamando al producto y tiene campo llamado nombre. Y así, la cantidad unitaria aquí es de 2 mil o se calcula por sentido. Por lo que necesitas tener también ese sentido, sorpresa. Por lo que podemos tener aquí precio de punto de producto y multiplicado por 100 porque cada $1 es de $0.100. Y la cantidad en ese caso será aquella cantidad que viene por el artículo del pedido. Por lo que tendré aquí pedido artículo, artículo, no Artículos y aquí también artículo o artículos para evitar el problema. Entonces aquí tendremos algo llamado cantidad. Entonces después de eso, podemos pasar leyes líneas de pedido
también a estas líneas de pedido porque ahora tenemos una nueva forma de esa matriz. Pero aquí hay que recordar siempre, lo
hice por arcos comprados para no olvidar, esperar, porque esperar aquí estamos regresando una promesa. Por lo que tenemos que esperar hasta que todo este acabado y vamos a conseguir las líneas de pedido porque aquí tenemos un producto que
viene de la base de datos y tiene un peso también. Entonces volvamos a nuestra terminal para ver si tenemos algunos problemas. Como ven aquí, tenemos algún problema. Dice inválido, intializador de propiedad de cabeza corta. Entonces tenemos aquí algún tema con el nombre. Entonces necesitamos tener aquí no igual sino colon, así que de esa manera, vale, No
tenemos ningún problema y la conexión de base de datos está lista. Y ahora podemos llamar a esta API, que se llama crea una sesión de check-out para obtener la sesión de check-out desde el back-end.
185. Crear servicio de sesión de sesión de verificación de pago de Frontend: Volvamos ahora al frente y al frente donde estamos manejando nuestros pedidos. Por lo que vamos a hacer un pedido y ser redirigidos a un pago pagado, como explicamos antes en el diagrama. Entonces, en primer lugar, necesitamos crear un servicio que esté solicitando el token de sesión de check-out. Entonces para eso, no vamos a hacer un pedido cuando haga clic en Hacer Pedido. Pero voy a llamar a un servicio donde me devuelva el ID de sesión para que realmente pueda dirigir al usuario al pago primero. Y luego con base en el pago, si es éxito o no, creé el pedido basado en el estado si está doblando o falló. Entonces en primer lugar, si volvemos a ir a nuestras bibliotecas, habíamos creado un orden es biblioteca. Y en la biblioteca de pedidos tenemos un servicio y contamos servicio
especial para tarjetas y tenemos también para los pedidos. Por lo que en el servicio de pedidos, voy a crear un servicio donde también
leerá direccionarme a la página de pago después de obtener el ID de sesión. Haz eso, podemos hacer un Create. Por ejemplo, podemos dar un nuevo nombre de método. Podemos llamarlo un check out creando sesión. Y de esa manera, la sesión de check-out pedirá artículos de pedido. Pedir artículos, porque necesitamos enviarlos al backend, como vimos antes para calcular que todo el precio y también el detalle del pavimento. Entonces tenemos aquí o la matriz de elementos, se enviaría al servicio, y luego se devolverá una solicitud HTTP, exactamente como lo hicimos antes con los otros servicios, como como se ve aquí en la parte superior. Y la solicitud será post request. Por lo que publicaremos un dato de solicitud. Y dónde tenemos la misma URL que la hemos basado antes de los pedidos. Y luego algún camino que hemos especificado previamente, como crear sesión de check-out de la API. Por lo que tenemos aquí crear sesión de check out. Esta es nuestra API, cómo definimos en la espalda y antes. Y los datos de envío con la solicitud de post serán los ítems de orden que pasamos en la función. Entonces podemos tener aquí o los artículos que los estamos analizando aquí. Entonces vamos a guardar y ver si esta flecha es, realmente
está creando para mí ID de sesión y no tenemos ningún problema en el back-end. Probemos y probemos eso. Iré primero a ver si tenemos algunos errores. En ocasiones tienes como el modelo de artículo de pedido se importan como una ruta relativa. Pero, o por ejemplo, el camino más temprano, como vimos con cualquier x. Pero es mejor si estamos en la misma biblioteca usar una ruta relativa es. Entonces uso aquí, lo voy a cambiar para que sea como este modelo y pedir artículo. Al igual que estoy llegando al elemento de orden de archivo utilizado el bus relativo. Ahora quiero, cuando haga clic en el botón Hacer Pedido, obtendré un ID de sesión. Podemos usarlo como para ponerlo en el registro de la consola por ahora. Por lo que será el trabajo en la página de checkout, componente de página de
checkout donde estoy creando o colocando el pedido. Entonces coloque la función de orden, que se ejecutará cuando esté haciendo clic en ese botón como vimos antes, que cómo creamos. Por lo que ahora voy a haber hecho el pedido. Y luego colocar el pedido no será crear un pedido, pero llamará al servicio, que es Crear sesión de check out. Entonces en lugar de esto, podemos comentar esto por ahora. Apenas por ahora, y luego vamos a volver a ella cuando lo necesitemos. Por lo que diría año este servicio de pedidos y luego
me crearía fuera sesión y pasaremos los artículos de orden. Por lo que podemos decir aquí, esto los artículos de pedido porque los hemos recogido del almacén local como se ve aquí antes. Entonces ahora después de eso estoy creando el almacenamiento local o la, lo siento, la sesión de bromas o llamando a ese servicio. Voy a conseguir una sesión y podemos imprimirla en el registro. Por lo que voy a decir aquí, registro de
consola directamente y nos echaríamos un vistazo o imprimiríamos esta sesión. Entonces vamos a guardar eso e ir de nuevo a nuestra aplicación. Y luego abriremos la consola. Por lo que ahora voy a tratar de hacer un pedido. Entonces digamos OK, haga orden. No voy a conseguir nada en la consola. Entonces vamos a revisar la pestaña Red donde estamos enviando solicitudes desde nuestra aplicación. Entonces como ven aquí, hay una solicitud de envío, pero no tiene contenido. Por lo que volvió sin ningún contenido. Entonces eso es seguro. Tenemos, por ejemplo, que en el back end, algún error. Vamos a revisar de nuevo nuestro código back-end. Entonces iré aquí y revisaré el back-end. Ya veremos esa consola del backend que tenemos un error, como les dije, dice un año que reciben parámetro desconocido cancel URL. Entonces tengo aquí un error tipográfico. Por eso quiero que siempre te asegures de tener los errores tipográficos, ¿verdad? Por lo que no lo hará, no tienen ningún error tipográfico en su código. Entonces aquí tengo que poner, no cancelar así. Tengo que decirlo así. Nos ahorramos de nuevo. Verificamos si nuestra aplicación se está ejecutando. Por lo que se está reiniciando debido a cambios. De acuerdo, la conexión a base de datos está lista. Por lo que ahora intentaré volver a hacer un pedido. Entonces actualicemos y luego eliminemos toda la consola. Y nuevamente ponemos la pestaña Consola y luego la colocamos. De acuerdo, Tenemos una solicitud y si revisamos la vista previa, bonito, tengo el ID de sesión. Entonces como ven aquí, obtengo una identificación, que es un ID de sesión que envié desde el backend. Y ahora tenemos el ID de sesión. Ahora necesitamos redirigir al usuario a la página de pago. Para ello, tenemos múltiples formas de hacerlo. En primer lugar, necesitamos usar un servicio de stripe,
algo llamado servicio de Stripe. Entonces, antes que nada, tenemos que ir al constructor
aquí e importar el servicio de franjas desde Stripe. Por lo que diré aquí servicio de raya privada. Y entonces se llamará servicio de Stripe. Y este servicio de raya se importará de nx dry. Porque si recuerdas, hemos instalado nx raya librería. Entonces lo voy a usar aquí. Entonces diré Import y luego Stripe service, exactamente como lo tengo aquí mecanografiado. Y luego de lo llamaríamos la biblioteca, que se llama banda SGX, que instalamos antes. De acuerdo, ahora somos capaces de usar el servicio de rayas, de acuerdo, Así que después de que estoy recibiendo la sesión o el ID de sesión, entonces puedo usar ese token o ese ID de sesión para redirigir al usuario a la página de pago. Por lo que simplemente, tengo que hacer aquí este servicio de rayas y luego leer directo para checar. Entonces tengo que usar un ID de sesión de objeto, como esto es ID de sesión. Ya está definido como lo has visto aquí. Y este ID de sesión vendrá de esta sesión que he creado. Y me metió dentro un DNI, porque si te acuerdas, tenemos un objeto y dentro de él ID. Entonces lo tengo exactamente de la misma manera. Identificador de punto de sesión. Si te equivocas aquí, esto es por los Taipings. Entonces es mejor siempre refinar o definir tus mecanografías en base a lo que el servicio estás usando? Por ejemplo, crear página de pago, si recuerdas, la hemos utilizado para devolver algunos datos. Y esos datos podemos decir que va a regresar para mí tipo cualquiera. Por lo que puedo decir aquí, la solicitud de post tendrá una sesión y esta sesión tendrá tipo cualquiera. Entonces podemos ponerlo también, como observable aquí porque me va a volver observable desde tipo cualquiera. Entonces de esa manera, no voy a tener ese error donde no
está regresando porque esta sesión es desconocida para mí. O puedes escribirlo. Por lo que puedes decir que necesito tener como el tipo de retorno será ID, que tendrá tipo string. Entonces de esa manera, si vuelves a ir aquí, verás que el error es este apareció y tienes un definido porque tienes el ID ya definido. Y también aquí necesitas solucionar algún problema, que es el tipo esperado, que es devuelto por la solicitud. Entonces diré año, el tipo de retorno será objeto, que tiene ID y la cadena, porque aquí tengo ID y una cadena. Entonces esos scripts de mecanografía, están en o como, por ejemplo, trucos, tienes que hacerlos usando TypeScript. Por lo que tienes que asegurarte siempre de que tengas un mecanografiado válido. No tienes ningún error o error entre las funciones y los servicios. Entonces después de eso, necesitamos suscribirnos a este redireccionamiento para checar. Entonces tengo que decir aquí, suscríbase también, y luego necesito encontrar la UC como la veas. Está regresando para mí error de raya, este error. Voy a suscribirme a él y comprobar si recibo un error cuando el usuario no es capaz de pagar o si el usuario no es capaz de llegar a la página de pago debido,
por ejemplo, error de red o conexión, conexión a internet. Pero como ves aquí, es muy malo tener Suscribirse dentro suscribirse, como anidar suscribirse en general. Nuestro x js y también en Angular es muy mal comportamiento, así sucesivamente que podemos hacer otra manera que podamos llamar a estos servicios después de devolver un tipo específico de esta crear sesión de check-out, como cambiamos el resultado de esta sesión y entonces podemos usarlo de nuevo de una manera diferente. Entonces voy aquí al servicio de pedidos. Voy bien para tener todo este regreso. Tengo solicitud de publicación HTTP. Quitemos esta tipación por ahora que se volvió picos de troquel. No los necesitamos. Como les expliqué, necesitamos ir directamente y cambiar el tipo de devolución de este post. Ya sabes, está regresando para mí la sesión y dentro de ella ID. Pero ahora quiero hacer algo antes de suscribirme a ella, cómo podemos hacerlo. Entonces si sabes que hay algo llamado pipa, y esta pipa es como una pipa donde estás cambiando los datos de retorno de un observable o de un servicio. Entonces por ejemplo, hemos regresado aquí una sesión y sesión.Obtener IID. Pero no, quiero hacer otra cosa antes de devolver este ID de sesión, por
supuesto, usando ese ID de sesión. Entonces iré aquí a pipa. Yo diría, bien, cambiar para mí el valor de retorno de alguna manera o antes de un mecanizarlo al usuario o al suscriptor, cambiarlo y luego enviarlo al suscriptor. Por lo que diría aquí algo llamado mapa de interruptores. Y este mapa de cambio, significa que voy a cambiar eso, que como se ve, que regresan a otra forma. Es exactamente como mapa. Estamos haciendo con la matriz, como si estuviéramos teniendo una matriz. Nosotros mapeamos sobre él para cambiar esa matriz de alguna manera a otra entradas de datos para cambiar el, la forma de la misma. Por lo que este mapa de interruptores es importado de nuestros x js. Por lo que tienes que asegurarte de que tienes este mapa de interruptores importado de nuestro x j como operadores, como ves aquí. Entonces ahora voy a cambiar eso. Al igual que la salida de la suscripción, como que tengo consiguiendo el ID de sesión. Por lo que espero conseguir aquí el ID de sesión. Por lo que tendré aquí sesión. Y el tipo de esa sesión. Es exactamente del mismo tipo que hemos definido antes. Por lo que no observable, pero tendrá el tipo ID y una cadena. Por lo que necesitamos quitar eso. Y luego decir aquí que tengo esta sesión. Contendrá id el cual tiene tipo string. Por lo que esta será una función de devolución de llamada está cambiando la emisión de ese observable o de esa suscripción. Entonces para eso, tendremos de nuevo un retorno, como retorno para esta función, otra forma de la sesión. Por lo que tendremos aquí devolver este servicio de rayas de puntos. Por lo que aquí llamaremos a servicio de franjas no en el componente. Entonces voy a quitar todo esto y lo llamaremos o lo usaremos aquí. Entonces en el servicio, así no lo vamos a utilizar en el componente mismo. Entonces vamos a copiar o GOCIR esta parte e ir al constructor del servicio. Y voy a decir aquí que, vale, necesito llamar al servicio de rayas. Y así puedes usar auto import directamente
presionando Control dot y tendrás raya nx importante. Y ahora diremos que este servicio de rayas de puntos y luego leeremos directamente para checar usando el ID de sesión el cual se devuelve de la tubería. Entonces diré aquí, directo a checar, y luego abriré un objeto y me dirá que ID de
sesión es sesión la cual se devuelve ID de punto. Por qué estoy consiguiendo aquí ID de punto porque defino el tipo esperado que regresa de ese servicio, que se crea fuera sesión. Entonces tengo aquí el tipo esperado aquí. Entonces si revisas este método, está devolviendo observable de error. Entonces de esa manera, estoy regresando no el ID de sesión, estoy regresando y cambiando el comportamiento de esta solicitud post a otra observable. Por lo que aquí tendré observable de error. Entonces, como ves, se cambia automáticamente. Tiene el tipo de retorno error observable, error de raya. Por lo que ahora soy capaz de usar ese método. Y aquí automáticamente me redirigirá a una página de pago usando el ID de sesión, que se devuelve desde el back-end. Por lo que ahora voy a ir aquí y voy a decir
suscribirse directamente a este servicio crear pagina de pago. Y esta suscripción regresará para mí solo error. Por lo que usaré eso solo para saber si el usuario tiene algún problema con la conexión o no. Entonces diré aquí, si. Hay algún error. Entonces podemos decir como error de registro de consola en redireccionamiento al pago. Entonces así como esto, podemos tenerlo de esa manera. Y aquí tenemos algunos problemas, así que sólo necesitamos quitar todos esos. Entonces tenemos ahora, ¿verdad? Por lo que el servicio crea sesión de check-out. Yo me he suscrito y luego me van a redirigir a esa página. Y aquí en el servicio, ya se hace de esta manera. De acuerdo, Ahora intentemos eso y veamos si nuestro servicio está funcionando bien y tenemos una redirección. Entonces volveré a ir al carrito y luego iré a ver que tengo algún error. Esto dice que el servicio de órdenes de servicio de unidad, ningún proveedor para el servicio de Stripe. Por lo que necesitamos brindar el servicio de raya. Pero antes de eso, tenemos que decir algo en configuración para ese servicio. Porque si vamos a la documentación de MDX raya y vemos algún paso que se llama instalación. Hay algo siguiente que se llama aplicación de configuración. Y la aplicación de sentarse requiere que importes raya
NGINX Módulo 4 root y pones la clave publicable, así que no la clave secreta de Stripe, pero hay que poner la clave publicable. Por lo que necesitamos importar esa parte. Por lo que necesitamos tener módulo de raya NX de importación. Entonces donde en el nivel de aplicación. Entonces tengo aquí y tú compras, iré al módulo app. Y luego aquí en las importaciones del módulo, voy a importar mi módulo que se llama MDX raya módulo de NC. Y luego voy a usar el módulo de raya MDX y decir para root. Y en la ruta cuatro, se
te pide tener clave publicable. Por lo que de esa manera, necesitas usar la clave publicable a partir de tus datos. Entonces como ven aquí, tenemos clave publicable y clave secreta. Por lo que voy a dar clic en esto para que me copien, y luego pondré mi clave publicable como cadena aquí. Entonces vamos a guardar y luego ver nuestra aplicación si aún tiene el error. Entonces voy de nuevo a la guardia. Como ven, ya no estamos teniendo el error porque MDX stripe module ya nos ha proporcionado el servicio, por lo que no necesitamos brindarlo manualmente. Eso significa que podemos ser capaces de utilizar ese o ese servicio, que se llama servicio de Stripe y directamente en cualquier módulo de nuestra aplicación. Por lo que ahora voy a dar clic en check out y luego hacer pedido. Y ya verás conseguimos tres dirigidos a otra página la cual tendrá el pago. Y como ven aquí, tengo los precios los cuales se devuelven de los artículos que construí antes, si recuerdan en el back-end porque envío los artículos de pedido al back-end. Y de esa manera, podré poner los datos de mi tarjeta y realizar un pago. Probemos eso. Por lo que aceptando un pago es necesario utilizar algunos datos de prueba. Entonces en la documentación de Stripe, eso es un pago y hay ejemplo que mostré que llamaste acepta un pago. Y aquí hay unos guardias donde nuestro falso como tú solo
puede usarlos y luego puedes colocar un pago. Entonces, por ejemplo, voy a usar este. Entonces volvemos a ir a la tienda. Colocaría aquí mi e-mail y también pondré como el número de la tarjeta o puedes poner cualquier fecha aquí. Entonces pondré aquí cinco, veintiuno, veintiuno, digamos 25, y algún número y también nombre. Podemos simplemente poner cualquier nombre y luego arrastrar País del pago y luego puedes pagar. Y después de eso, si notas que después de un pago exitoso, vas a ser redirigido a una página exitosa. Pero si vamos a nuestra aplicación admin, no
tenemos ningún pedido realizado. Por lo que no podemos rastrear los pedidos donde los hemos colocado desde el back-end porque si recuerdas, hemos cancelado la colocación del servicio de pedidos aquí. En la próxima conferencia, veremos cómo vamos a poner orden. Tenemos el pago exitoso y enviarlo al backend y guardarlo en la base de datos. Pero después, antes de eso, lo
siento, necesito mostrarte cómo puedes ver los pagos directamente en tu dashboard en raya. Entonces como ven aquí, tengo aquí un pago que hice usando esta clave descriptiva y también este email. Y también puedes hacer clic en él y ver más detalles sobre desde qué ubicación y también cuáles son los artículos de ese producto y todo lo que se pasa al backend, cómo lo creamos exitosamente.
186. Colocar el orden después del pago exitoso: Por lo que en la conferencia anterior, vimos que pudimos manejar el pago y también poner los datos de nuestra tarjeta y presionar Bay. Y luego nos dieron tres dirigidos a una página de agradecimiento, que creamos en nuestra aplicación. Pero nos falta la parte que está creando el orden. Por lo que no estamos creando el orden en realidad en la base de datos. Entonces cuando vaya a la aplicación Admin y vaya a las órdenes, claro, me gustaría recordarles que también es necesario agregar el módulo app del admin para agregar el módulo de stripe MDX. Porque tal vez necesitarás también manejar algún pago en el panel de administración. Y también la aplicación no funcionará porque usamos el servicio de franjas en el servicio de pedidos y la aplicación no funcionará sin él. Es decir, la aplicación Admin. Por lo que ahora tenemos toda esta información. Como ven, no estoy haciendo ningún pedido. No tengo mi pedido realizado después de realizar el pago. Entonces para eso, necesitamos colocar el pedido en la base de datos también. Dónde en la página de agradecimientos. Es decir, después de un pago realmente exitoso, no cuando estoy dando click aquí en Hacer Pedido. Cuando hago el pedido, pago y vuelvo a la página de agradecimiento en la página de Gracias, voy a tener el pedido creado. Por lo que volviendo a la página de check out, si recuerdas, hemos creado un objeto de orden. Y estos objeto ordenado, estamos conteniendo la información sobre el usuario o sobre la entrada o el usuario, o aproximadamente exactamente la misma información que proviene del usuario que ingresa la información en el formulario. Entonces para eso, necesitamos usar el servicio de pedidos, pero no estamos aquí en sino en la página de agradecimiento. Por lo que iré aquí a la página de Gracias. Yo volvería a crear el pedido y lo colocaría aquí. Entonces en la página de agradecimiento, no
tenemos esa información. No tenemos después de que nos estamos redirigiendo a la página de pago, que está directamente fuera de nuestra aplicación y volver a la página de agradecimiento. Usaríamos los datos ordenados. O sea, esa información, los
vamos a perder. Por lo que necesitamos de alguna manera para cobrarlos. Por ejemplo, en nuestra aplicación, podemos decir que la forma más fácil es el almacenamiento local. Puedo almacenar en caché toda esa información en el almacenamiento local de mi aplicación, y luego puedo utilizarlos de nuevo en la página de agradecimiento para realizar el pedido. Entonces para eso, voy a crear dos servicios. El primer servicio se llama pedido en efectivo. Por ejemplo, en nuestra aplicación, que se ubicará en sus servicios y servicio de pedidos. Entonces diré aquí, después de crear el token de checkout, crearía un servicio que se llama orden en efectivo o por ejemplo, datos de pedido en efectivo. Entonces de esa manera, pasaré orden que ha muerto o allá también. Y este diodo utilizará el almacenamiento local, o este servicio utilizará el almacenamiento local para almacenar en caché los datos del pedido. Por lo que voy a decir aquí simplemente local de almacenamiento punto set artículo. Y le daremos un nombre a este ítem como datos ordenados. Y estos datos de orden se pasarán la orden en sí o el objeto el cual se pasará desde el front end o desde el componente de la página de checkout. Pero aquí necesitamos como una cuerda. Entonces no podemos decir JSON dot stringify, como lo agregaríamos como una cadena y diremos, vale, stringify este orden. De acuerdo, Entonces después de almacenar en caché los datos ordenados, para luego
poder recuperarlos en la página
de agradecimiento del almacenamiento local y usarlos para crear el pedido. Entonces aquí voy. Después de realizar el pedido, cuando el usuario haga clic en el botón, Hacer Pedido, recojo toda la información del pedido. Y luego usaré este punto Order Service caja bóveda o los datos, y pasaré ese pedido. Entonces de esta manera, lo estoy almacenando en caché en el almacenamiento local. Por lo que no necesitamos este servicio ahora. Lo necesitamos en la página de agradecimiento. Es decir, creación de la orden, orden
real se hará. El agradecimiento. Página. Entonces vamos otra vez y conseguimos esta parte o quitarla totalmente y vamos de nuevo a nuestra página de agradecimiento. Entonces todo está bien hasta ahora, pero la creación de la sesión de check-out debe hacerse después de recoger la información y cobrar los datos del pedido. De lo contrario, me redirigirán a la página de pago y perderé los datos del pedido. Por lo que es mejor mover esta parte para estar al final después de que almacenemos en caché los datos del pedido. Así que vamos a asegurarnos de que realmente tenemos la información se almacena en caché. Por lo que también necesito guardar el servicio. Entonces todo está funcionando bien. Agradable. Entonces hagamos el pedido y comprobemos nuestra aplicación y almacenamiento local. Almacenamiento de sesión, me llevaría el almacenamiento local. Por lo que en el almacenamiento local tenemos el carrito y también tenemos el token. Entonces cuando coloco o cuando presiono sobre orden de lugar, debo tener también el podemos decir los datos ordenados. De acuerdo, voy a dar click en él. Yo he ordenado eso como ves, pero ahora lo perdí totalmente porque realmente me dirigía a otro dominio, que se llama checkout strive.com. Por lo que ahora aquí pondré mi información y la guardia y luego haré el pedido. Por lo que ahora voy a ser redirigido a una página de agradecimiento. Por lo que ahí Gracias. Page me redirigirá a la aplicación donde tengo localhost 4200 puerto. Entonces, cuando haga clic en Aceptar, presione. Entonces aquí en ese momento necesito hacer el pedido, así localhost 4200, y entonces tendré exactamente los datos del pedido que
necesito para poder recuperarlos en la página de Gracias y hacer mi pedido. Esto lo veremos en la próxima conferencia.
187. Colocar el orden en la página de la página de agradecimiento: Por lo que volviendo al componente de página de agradecimiento, veremos que tenemos componente vacío. Tiene solo como Gracias por comprar con nosotros. Hemos recibido su pedido, pero antes de mostrar esta información, necesitamos realizar el pedido. Entonces, en primer lugar, tenemos, si recuerdas, quitamos de aquí la colocación del servicio de pedidos. Por lo que solo estamos guardando en caché los datos del pedido. Por lo que necesitamos hacer otro servicio que no sea el almacenamiento en caché ni los datos, sino obtener los datos del pedido. Por lo que podemos tener otro servicio lo podemos llamar como por ejemplo, recuperar u obtener o el, o obtener datos de pedidos en caché. Quedate destrozado. Me gusta no tener confusión entre buen orden y obtener como orden que está en el almacén local. Entonces voy a decir aquí, sólo consigue artículo y este get item, no sólo lo
usaré
así, así que podemos tener sólo la clave get item nos está requiriendo sólo la clave la cual se ordena datos. Y este servicio debería devolverme un pedido. Por lo que diría aquí, el tipo de devolución es orden. Entonces de esa manera, necesitamos tener también un tipo de devolución el cual se ordena. Entonces tenemos que poner aquí regreso. Pero estos get item está regresando para nosotros como cadena. Entonces de esa manera, necesitamos hacer Json.Parse. Por lo que estamos analizando de cadena a objeto adyacente o dos los cuales tendrán nuestro orden. Entonces después de eso, estamos recibiendo el Json.Parse como orden y obtenemos esa orden. Por supuesto, este método no necesita ningún parámetro, por lo que solo usamos orden getCacheDir, devolver orden desde el almacenamiento local después de analizarlo. Por lo que volviendo de nuevo a nuestra página de agradecimiento, componentes. Entonces vamos a cerrar todos esos. No los necesitamos. De acuerdo, salvamos éste. Vuelve a nuestra página de agradecimiento. Tenemos que implementar de nuevo en G on en ella. Por lo que implementar en ella. Y entonces tenemos que llamar en ella y g en cualquier método. Y en la India sobre el método init, voy a recuperar los datos del pedido usando el servicio, tan privado o el servicio. Y luego llamamos servicio de pedidos o lo siento, no módulo de pedidos ni el servicio y servicio de pedidos vendrá del servicio que hemos creado aquí. Por lo que tenemos que eliminar esto como ruta de alias. Nuevamente, no sé por qué lo tengo así, pero siempre puedes arreglarlo manualmente. Tendría e-services y luego pediría servicio. Entonces en ONGs en ella, voy a usar o llamar a ese servicio. Entonces yo diría aquí, constante, podemos decir orden eso. Y este orden que será igual a este punto o
su punto de servicio se gashed datos ordenados. Por lo que tenemos GetCacheDir datos ordenados aquí. Entonces hagamos un registro de consola de datos ordenados para asegurarnos de que realmente estamos obteniendo los datos correctos del pedido y del pedido almacenado en caché y repetir de nuevo nuestro método de pago. Por lo que volveré a ir a nuestra solicitud, ir de nuevo a la tarjeta, echa un vistazo. Entonces voy a hacer el pedido y me redirigiré al pago. Pondré mis datos de pago. Y vamos a comprobar si realmente tenemos los datos del pedido. Entonces los tenemos porque no podemos verlos, nosotros se va ahora agregamos otra página. Por lo que pagaré ahora y me redirigirán a una página de agradecimiento ahora. Tan bien. Nos dieron tres dirigidos. Tenemos los datos del pedido en el almacenamiento local, y también tenemos el artículo de pedidos. Entonces de esa manera, tengo los datos ordenados en la página de agradecimiento. Tengo toda mi información, mi dirección, y toda esa información la cual se almacena en caché y envía desde el componente de la página de check out. Por lo que ahora somos capaces de hacer el pedido. Por lo que podemos decir aquí directamente, este servicio de pedidos sin embargo, crear orden. Y esta orden de creación pedirá datos de pedido porque
estamos pasando un pedido a estos datos para luego suscribirnos. Y luego puedo obtener los resultados como notificación o algo así como mostrar para el usuario. No necesitamos. En ese caso, tenemos que hacerlo detrás de escena porque ya recibió esta notificación de que ha ordenado consiguió colocar lodo exitosamente sobre el éxito. Necesitamos tener una cosa que es quitar los artículos del carrito, como inicializarlo de nuevo, si recuerdas, hicimos eso antes y así, podemos,
por ejemplo, hacer un redireccionamiento a la página principal después de cinco segundos. Pero podemos tener, devuélveme esto al botón show donde el usuario pueda volver a la tienda. Entonces después de suscribirme, tendré un método de éxito como una devolución de llamada, y luego volveré a utilizar un servicio de tarjetas aquí, si recuerdas, necesitamos usar el servicio de tarjetas. Entonces servicio de guardia. Y luego servicio de guardia otra vez aquí. Por lo que necesitamos como fin de semana llamarlo directamente como un servicio, pero no desde alias, sino desde una ruta relativa para no volver a tener el problema. Entonces aquí tengo el servicio de tarjetas, y yo diría aquí, después de este eje, estos puntos de servicio de guardia punto vacian su carrito. Ya no necesitamos que el auto esté lleno. Entonces volvamos de nuevo, prueba nuestra aplicación. De acuerdo, Ahora tenemos tarjetas vacías porque refresqué la página de agradecimiento. Entonces vamos a colocar ahora al autor. Por lo que voy a quitar, voy a cerrar la consola para tenerla más clara para ver. Colocaré o añadiré al carrito este artículo y también este artículo. Por lo que ahora iremos al auto 2. Tenemos dos artículos y ahora voy a hacer un check out. Por lo que mi precio total es de $2200. Y tengo esa información en mi orden. Y ahora voy a dar click en hacer el pedido. Seré redirigido a la página de pago. Volveré a poner en formación del pago. Como te dije, también puedes usar algún otro tipo de tarjetas. Entonces como ven aquí en la documentación, hay guardias que siempre es un pago exitoso, como una prueba. Esto es 3D seguro. La autenticación debe completarla para un pago exitoso. Y también hay esto siempre fallan. Por lo que dice fondos insuficientes. Y de esta manera puedes usar este guardia para probar tu tienda de manera más o ineficiente. Así que tenemos estos ahora el que se llama prueba, que tiene éxito siempre. Y se detecta como tarjeta Visa que voy a hacer mi pedido 2200€. Tengo dos artículos, como ven aquí. Toda esta corrupción viene exactamente como implementamos antes. Por lo que sustituyo a PE. Ahora me redirigirán a la tienda. Está bien. El auto que se actualiza porque consiguió mt volviendo de nuevo al panel de administración para ver si se hizo mi pedido. Por lo que tenemos que hacer para refrescar de nuevo. Como ven aquí, tenemos mi orden. Tengo mi pedido realizado. Puedo verlo y ver todos los datos de ese orden como ven aquí. Por lo que se nos coloca exitosamente el pedido de la manera correcta para que luego pueda cambiarlo a entregado o fallado o doblado es depender del estado de mi tienda y administración de mi e-shop. También, después del éxito de realizar un pedido, Es mejor también eliminar el pedido almacenado en caché, que está en el almacenamiento local del almacenamiento local. Por el momento que también podemos eliminar esos datos de pedidos porque ya no los necesitamos. Por lo que no es agradable tener los datos ordenados siempre en mi almacenamiento local. Por lo que en primer lugar, podemos crear otro servicio que se llama Crear o eliminar los datos ordenados en caché. Por lo que iría al servicio de pedidos. Será algo así como quitar, almacenar en caché o los datos. Y de esa manera no devolverá nada porque es vacío. Simplemente diremos almacenamiento local, punto remove item, y tenemos que especificar el nombre del elemento. El nombre del artículo en nuestro caso fue orden que. Por lo que ahora puedo llamar a este método que se llama eliminar orden
almacenado en caché en el exitoso después de la colocación del pedido, y eliminar el elemento de pedido de los datos ordenados. Por lo que podemos tener aquí este punto, como por ejemplo, punto de servicio de pedidos de
autos, quitar la caché o los datos también. Por lo que de esta manera, elimino vacío el guardia y también elimino los datos de orden almacenados en caché. Pero ahora tenemos un bicho muy, muy peligroso. ¿ Y si una persona como fuera capaz de ir a la página de sexos? Entonces por ejemplo, puedo hacer así en la URL. Puedo ir al cebo de éxito, vale. Pero no tengo ningún pedido y estoy colocando pedidos vacíos a mi, él está colocando pedidos vacíos a mi base de datos. Entonces de esa manera, este es un problema muy peligroso. De esa manera, tenemos que arreglarlo. Por lo que se puede resolver una cosa
de seguridad obteniendo el ID de sesión que creamos para el pago. Y asegúrate de que realmente el usuario hizo un pago cuando llegó a esta página y valide su pago y di, bien, ahora puedes hacer el pedido a la base de datos. Por lo que no permitimos ninguna colocación de la llamada de pedido hasta que obtuviéramos la información exitosa del usuario que realmente pagó y realmente tenga un ID de sesión para hacer el pedido. Esto lo vamos a ver en la próxima conferencia.
188. Proyecto de Linting con NX Lint Lint: De acuerdo, en esta conferencia, vamos a hacer la pelusa para nuestro proyecto. Si recuerdas, siempre tengo algunos errores en mi código que tengo, como se mencionan en rojo a veces, y a veces tenemos algunas advertencias como cuando se mencionan en amarillo. Entonces guardé esos errores porque quiero
mostrarles cómo podemos arreglarlos para todo el proyecto. Por lo que tenemos algunos comentarios que se proporcionan de NX, que nos ayudarán a hacer linting para nuestro proyecto o para nuestro propio espacio de trabajo aquí. Entonces por eso durante el curso que estás viendo a veces
estoy ignorando esos errores porque quiero mostrarte cómo averiguar y arreglar todos esos errores cuando vamos a hacer la pelusa. Por eso tenemos en cada proyecto algo llamado ES pelusa. Entonces la configuración de pelusa ES, que aquí se mencionan, son reglas las cuales las tenemos para todo el proyecto o el repositorio para solucionarnos los problemas que pueden estar en TypeScript o en HTML, o en JavaScript, o en los archivos JSON. Por lo que de esta manera, aseguramos que se nos entrega en producción el proyecto correcto sin ningún problema ni ningún error. Si vamos al paquete archivo JSON, que está aquí, vemos que ya tenemos scripts y esos scripts los podemos ejecutar para hacer algunas funciones. Empezaré con el Linde. Linde es lo que necesitamos por ahora, necesitamos averiguar cuáles son los errores y errores que hemos hecho en nuestro código basado en reglas y correcciones inclinadas de ES. Entonces para hacer eso, sólo podemos ir a la consola. Podemos ir a una nueva terminal como por ejemplo, podemos cerrar todo esto. Tenemos, por ejemplo, sí, esta terminal por ejemplo. Entonces tenemos ahora podemos decir limpio o claro. Por lo que despejará la interfaz para mí. Entonces tengo aquí que entonces Manila. Ejecutaré el comando que se llama MPM ejecutar pelusa dentro de mi proyecto. Entonces, como ves, tengo longitud de ejecución NPM, así que voy a ejecutar este comando, por lo que será devuelto en x longitud del espacio de trabajo. Por lo que este comentario en realidad es un comando anexo que se ejecutará al lado de la Lint NG, que es para también para alargar el código. Entonces ejecutemos este comando y veamos qué errores tendremos aquí. Entonces ya está funcionando. Ahora prestamos en tienda, terminará en proyecto por proyecto como por ejemplo, tenemos dos aplicación, admin y cualquier afilada, y tiene también bibliotecas. Entonces todos ellos, Son proyectos. ¿ De acuerdo? Entonces tenemos aquí, por ejemplo,
primer error, que es decir que la página principal, método
inesperado del ciclo de vida del constructor vacío no debería estar vacío. Método vacío inesperado en junio en el mismo. Por lo que para ir allí directamente, solo
puedes decir cmd y dar click con un ratón. O bien puedes controlar y hacer clic en el ratón siguiendo esos. Entonces vamos allá. De acuerdo, Nos llevó directamente a ese componente. Como ven, esa es regla en Eastland que no puedo tener funciones vacías, así que es mejor eliminarlas. No necesito tan bien el constructor. Por lo que también podemos eliminar la implementación de energía sobre en ella. Y también eliminamos esta biblioteca. Por lo que ahora tenemos un componente limpio sin ningún problema aquí. Entonces vamos a revisar también los otros errores. Por lo que hemos terminado esta página de inicio. Tenemos aquí también error. Entonces lo que dice, este electrodo debe ser prefijado con uno de prefijos, bits azules. Entonces si recuerdas, en la aplicación, hemos creado esto con cualquier tienda. Por lo que el selector debe ser bits azules. Ahora queremos mantenerlo con tienda NDI porque estamos en aplicación de tienda MD. Entonces necesitamos ir a la configuración inclinada del ETS, no esa la global, sino la que está dentro del proyecto. Por lo que tenemos uno global el cual se aplicará para todo el espacio de trabajo o sus repositorios o las bibliotecas y aplicaciones. Y también tenemos dentro de cada aplicación, tenemos algo específico para ES pelusa, que anulan primero la global que extendimos y luego hacemos y ajustamos las horas. Por lo que aquí tenemos en la aplicación inicial tenemos este atributo neto debe estar prefijado con un bit azul. Ahora queremos prefijarlo con tienda de energía. Entonces en ese caso, ya no tendremos ese error. Entonces cuando vamos al pie de página, tenemos que comprobar eso. De acuerdo, todavía tenemos error de nuevo con un constructor y g en cualquier 20 para eliminarlos. Por lo que es mejor también mantener limpios nuestros componentes sin ningún problema. Entonces como ves aquí, tenemos error en la página de inicio también. Tenemos que reemplazar eso. Con tienda NG. Por lo que decimos NG tienda como prefijo. Entonces vamos a revisar otros errores también. Entonces iré aquí a Footer. Ok, arreglamos el encabezado del pie de página. Tenemos que arreglar el encabezado también. Entonces vamos de nuevo aquí, vamos a ver que usamos servicio de carrito, pero nos llaman cárteles, pero no lo usamos. Tenemos que borrarlo. También necesitamos limpiar y geon en ella y el constructor. Por lo que ES pelusa tiene muchas reglas. Puedes agregarlas a tu código. Entonces, por ejemplo, no quieres tener funciones vacías. Se puede acudir a la documentación de ES pelusa. Como ven aquí. Estoy en la página web formal de ES lane.org. Por lo que Eastland tiene muchas propiedades y reglas que puedes configurar para tu aplicación. Por ejemplo, los códigos deben ser dobles, no individuales. Por ejemplo, tenemos aquí a veces usando comillas simples, pero puedes configurarlo para darte comillas simples. Por lo que siempre hay reglas viniendo con este Eastland. Y entonces creo que NX ya cuando creaste este proyecto, viene siempre con unas reglas específicas y similares las cuales están predefinidas ya en una X. Así que no necesitas ajustarlo tanto. Entonces sólo lo haces. Lo siguiente que les mostré sobre prefijar el componente y las directivas. Entonces si vas a la Guía del Usuario y luego vas a unas reglas, verás que hay muchas reglas y aquí se describen, todas ellas. Entonces por ejemplo aquí, esto permite puntos y comas innecesarios. Por lo que siempre te está mostrando que cuando no es necesario el punto y coma, por lo que te dará error al habilitar este y no tienes punto y coma. Entonces por supuesto que hay muchos papeles. los puede ver ir uno por uno a ellos. Y luego descubrirás que son realmente beneficiosas para ti cuando estás construyendo tu proyecto. Y no permites que los desarrolladores publiquen ningún código ni comprometan ningún código sin arreglar todos esos temas ni las reglas que pones para tu proyecto. Por lo que volviendo a nuestro Eastland, de
nuevo, queremos arreglar otros temas. Entonces tenemos aquí cabecera, lo arreglamos. Tenemos aquí en mensajes, y aquí tenemos algunos temas. Por lo que uno de los temas en los mensajeros, el selector debe tener el prefijo con uno de estos prefijos. Por lo que también necesitamos arreglar ese que está aquí, necesitamos tener algún afilado por lo que ya arreglamos eso. Agregamos el prefijo de tienda NG a la pelusa ES, bien, por lo que no tendremos ningún error. Entonces vamos a ejecutar de nuevo el comando que podemos decir claro y luego ejecutar pelusa. Y vemos si nos estamos volviendo a dar un nuevo error, así que para estar seguros de que estamos arreglando las flechas correctas. De acuerdo, el último error que tenemos aquí es también que componente de la
app debe estar prefijado con como tienda de dulces. Por lo que tenemos aquí debe ser siempre y usted compra de componente. Entonces ahora tenemos todo es limitado pero solo para aplicación de tienda
ND porque es la aplicación primaria que creamos cuando creamos finales. Entonces vamos a enlazar también la aplicación admin. Por lo que voy a ejecutar aquí un comentario, también MPM ejecutar pelusa pero para aplicación admin. Por lo que se puede especificar el administrador. Por lo que correrá para ti también la pelusa para el proyecto admin. Entonces de esa manera, también vamos a conseguir algunos errores. Tenemos que arreglarlo. Entonces, por ejemplo, tenemos algunas advertencias de que usamos cualquiera aquí. Entonces como ven, tenemos como alguna advertencia de que estamos usando el cualquiera. También se puede desactivar esta regla porque a veces se necesita especificar como cualquiera, como vimos anteriormente. Por lo que podemos buscar la desactivación de este error. Por lo que podemos ir inesperados cualquier especificar diferente tipo. Por lo que no se puede subir en sus roles aquí. Y si no encuentras nada, también
puedes usar la herramienta de búsqueda aquí. Entonces cuando no puedes encontrar nada, la mejor manera es usar Google. Entonces si vamos aquí, inesperado cualquier especificar y se puede decir Deshabilitar. Entonces vamos a Google, comprobamos que el rol de plug-in de TypeScript deshabilitado, Eastland. Entonces como ves en el desbordamiento de la pila, tenemos a Google el error y hay alguna solución. Dijo, solo agrega esta regla para que podamos copiar esta e ir a nuestro archivo Eastland. Es mejor ponerlo en el global porque se aplicará para todo el proyecto. Entonces tenemos también esas reglas. Entonces podemos poner esa regla, por ejemplo, aquí. Por lo que se aplicará en todos los archivos, su mayoría T, SDS, x, y JavaScript. Por lo que podemos añadir esta regla también aquí. Por lo que podemos. Ve, como ves aquí, no
tenemos ninguna función vacía y tampoco explícita ninguna. Entonces guardamos eso y vamos de nuevo y ejecutamos nuestro mando. Podemos decir claro aquí otra vez. Y luego en npm ejecutar pelusa admin. Entonces, como ven, seguimos recibiendo este error. Eso toda advertencia, podemos decir inesperado cualquiera. Esto porque cuando vamos a la, nuevo a las reglas, ponemos aquí esta regla. Entonces no debería estar aquí. Debe ser en eso como la extensión de la biblioteca TypeScript. Por lo que puede agregar esta regla aquí, que se aplicará en los roles de TypeScript. Entonces necesitamos mover éste y también éste, y ponerlo dentro de las reglas que tenemos para el TypeScript. Como ves TypeScript, entonces aquí sería el prefijo TypeScript. Por lo que toda esta información, hay que tener cuidado con ella y puedes agregar tus reglas de escritura para que funcionen. Entonces vamos a ahorrar de nuevo e intentar ejecutar nuestro comando. Por lo que volveré a ir a mi línea de comando aquí. Y no podemos decir claro. Y luego podemos ir npm, ejecutar pelusa admin. Otra vez. Te estoy mostrando lentamente paso a paso para saber cómo solucionar esos problemas y advertencias. Entonces, como ven, ya no tenemos este error. Por lo que no tenemos la advertencia o que es decir que cualquiera es como no preferir ser utilizado. Por lo que sólo tenemos esos errores en la aplicación admin. Entonces vamos a arreglarlos. Entonces aquí dice que el NG, o por ejemplo, aquí en esta aplicación, NG OnDestroy debe implementarse porque aquí no tengo implementos en este dibujo. Tenemos que llamar también a destruir. Entonces este es uno de los errores. También tenemos otro error aquí también. Necesitamos tener que implementar el onDestroy. Entonces no implementamos eso. Por lo que necesitas importarlo e implementarlo así qué errores tenemos, tenemos en la lista de productos,
arreglamos, tenemos también en la lista del usuario. Entonces tenemos que arreglar eso también. Tendré aquí sobre destruir otro error, que es lo mismo que hicimos anteriormente. Las ONG en ella no deben estar vacías. Por lo que sólo podemos eliminar el plomo, implementación sobre las ONGs en el mismo. Ya no necesitamos y también el aporte de energía en él. Lo mismo va a la barra lateral. Arreglamos este error también. Entonces de esa manera, haces todo lo mismo para todas las bibliotecas. Y así ahora terminé con el admin. Entonces quieres hacer por la biblioteca, que se llama, por ejemplo UI. Entonces solo tienes que ir aquí, MPM Linde y dices UI. Entonces de esa manera, vinculará la biblioteca tú, por lo que debes especificar siempre el nombre de la biblioteca. Entonces como ven, tenemos error en el banner y encendido y no debe estar vacío. Por lo que tenemos aquí también, necesitamos quitar la implementación de la misma. Entonces lo guardamos todo. Y vamos a la aplicación para comprobar si todo está funcionando bien. Entonces estaremos seguros de que no tenemos ningún error en nuestra aplicación. Y como ven aquí, obtuve un error y ustedes muestran pruebas no coincidieron con ninguno de los elementos. Entonces podemos ir al selector aquí. Podemos comprobar por qué tenemos este tema. Entonces en la aplicación y compras si vamos a como índice, Es preguntando raíz bits azules porque este módulo de aplicación que creamos o componente de aplicación, cambiamos este show de NG demostró que era raíz de bits azules. Por lo que en el índice HTML de la aplicación y compras, solo
necesitas cambiar el nombre de esto porque este es el punto de entrada para nuestra aplicación. Entonces vamos aquí, respondemos y recargamos la aplicación. Todo está funcionando bien. Entonces eso es todo para arreglar los temas de pelusa. Como te dije, solo tienes que ejecutar NPM o mpm run pelusa y especificas el nombre del proyecto y te resolverá
o te mostrará los errores después de lo que especificaste en la pelusa ES basada en las raíces lean ALS o reglas que ahí hemos especificado. Entonces para eso, voy a arreglar todos estos errores de lente para todas las bibliotecas, que serán lo mismo. No lo voy a hacer como frente a ti no tomarte tanto tiempo. Y añadiré que el código del proyecto al final de esta sección. Y solo quiero recordarles que cuando arregles todos esos problemas, por ejemplo, arreglé las órdenes al final, obtendrás todos los archivos más allá de las pelusas. Entonces de esa manera no tienes ningún error.
189. NX Migrar actualizar el proyecto a la versión más: De acuerdo, en esta sección vamos a hablar de
actualizaciones de versión Angular y biblioteca NX. Por lo que sabes que siempre Angular proporcionando las nuevas versiones cada cuatro meses o cada seis meses. Y así en X está siguiendo que para mantener siempre interactuar con Angular. Entonces por ejemplo, he trabajado en este curso con Angular 11. Y luego surgió una actualización, que es angular 12. Por lo que vamos a actualizar nuestro proyecto a Angular 12. Ahora, lo genial con la novela Angular o NX, Es proporcionarte una herramienta para actualizar. No tienes que hacer nada. No tienes que hacer eso manualmente y averiguar de espaldas un JSON, cuáles son las bibliotecas que usaste y luego actualizarlas. Hombre, que ya sabe que NX te está proporcionando todas esas cosas. Pero primero, tenemos que revisar nuestros cambios. Entonces, en primer lugar, me gustaría instalar un programa que se llama GitHub Desktop. Es aplicación. Puedes descargarlo desde desktop.gov dot com. Puedes instalarlo para Mac OS y Windows. Después de la instalación de esto, como el escritorio de GitHub, puedes conectar tu proyecto a él y ver los cambios que se hacen en el proyecto cuando tienes repositorio dot git. Entonces cuando vamos aquí a nuestra aplicación o a la consola o dos, son como el Explorador de archivos. Veremos que siempre tenemos un archivo que se llama la puerta. No se puede ver aquí. Pero si vas al Finder o al Explorador de Windows, verás una carpeta que se llama kid. Eso significa que este proyecto está conectado a un buen proyecto o conectado a un repositorio de Git por defecto. Y x está proporcionando a este chico y está conectado de alguna manera, haz un repositorio de Git. Entonces lo que tienes que hacer es que tal vez puedas quitar esta parte o puedes mantenerla para hacer un seguimiento de tus cambios. Entonces para mí ahora, voy a quedármelo. Pero si no tienes este archivo duplicado te
voy a mostrar cómo crear uno nuevo. Entonces, en primer lugar, voy a GitHub Desktop, que tengo instalado. Como ven aquí. Tengo todos mis proyectos que hice antes. Y ahora podemos empezar a hacer lo siguiente. En primer lugar, necesitamos crear un nuevo repositorio a partir del disco duro. Para que puedas, si no tienes este archivo dot git, puedes hacer click en esto y luego puedes especificar la carpeta que vas a implementar tu proyecto. Por ejemplo, tengo, mi proyecto está aquí, voy a dar click en abrir, pero dice que este directorio parece tener un repositorio Git porque tengo dot get file como te mostré aquí. Entonces para eso, no tenemos que usar esta opción. De lo contrario puedes usarlo creando un nombre de repositorio y también se inicializará para ti nuevo archivo. Entonces en ese caso, vamos a agregar un repositorio existente desde un disco duro porque ya tenemos eso. Tenemos esa carpeta dot git. Entonces voy a navegar a mi proyecto, al espacio de trabajo que he creado. Y como abrir este proyecto que el espacio de trabajo donde ese punto get carpeta está ahí. Por lo que lo abrimos y decimos Agregar repositorio. Y como ven aquí, voy a ver todos los cambios fue que he hecho desde el momento en que he instalado en x y hasta ahora hasta el momento que quiero que den click en el commit. Puedes escribir un mensaje de confirmación para que podamos conseguir todo esto como comprometido y confirmado. Por lo que no se puede decir como terminar. Podemos porque podemos decir que hemos terminado el curso o la tienda. Por lo que podemos decir terminar la tienda electrónica. Entonces eso es todo. Entonces puedes decir comprometerte a dominar. Ahora no tenemos ningún cambio. Entonces, pero cuando vaya a mi archivo o en el Explorador de archivos en el editor, lo voy a ver cuando haga cambio. Entonces hagámoslo aquí cambiar, por ejemplo, guárdelo, vayamos de nuevo, y veremos que tenemos, y este cambio está aquí. Eran 11, ahora son 12. Entonces para eso, quiero hacer eso porque vamos a actualizar nuestro proyecto. Entonces en ese caso, podremos ver qué cambios se hacen. Uno, ¿qué me hizo por actualizar mi proyecto? Por lo que para actualizar el proyecto, podemos ir al navegador. Te voy a mandar un enlace, o tienes un enlace el cual se adjunta con esta conferencia. Está mostrando su documentación de actualización de una X en el sitio web normal de NX. Por lo que necesitamos usar la terminal para eso. Por lo que es muy fácil y muy sencillo, lo cual es muy grande que ver con n-x. Por eso animo a la gente a hacer los proyectos de ancho angular NX porque te está brindando las herramientas que son realmente geniales para actualizar y migrar tu proyecto. Por supuesto, se puede utilizar también NG, actualización. Pero será parcialmente actualizando. No actualizará las otras bibliotecas como por ejemplo, NDR x, o por ejemplo, si estás usando TypeScript, etc. Entonces para eso vamos a abrir la terminal y usar este comentario. Entonces vamos aquí, abrimos de nuevo la terminal de nuestro proyecto como vemos anteriormente. Para que podamos ir a este nodo aquí estamos. Se puede detener el proyecto es mejor. Por lo que es mejor detener este. Y voy a parar también la aplicación del panel de administración. Por lo que aquí vamos a pegar el comentario de las terminales NX migrar último. Entonces cuando ejecutemos este comando, veremos que NX empieza a hacer algo que está actualizando el paquete JSON, por lo que es mejor cerrarlo y también crear un archivo que se llama migración. Esto tomará un tiempo. Se trata de cinco a diez minutos. Voy a saltarme nuestra velocidad este video. Y lo harás, volveré a ti después de que esto esté listo. Entonces como ves ahora que la migración está lista. Por lo que el paquete JSON, dijo, asegúrese de que los paquetes y los cambios tengan sentido y luego ejecute npm install. Vamos a revisar nuestro paquete Jason. Ya veremos que, vale, todo se actualizó a la versión 12, como ven aquí. Por lo que tenemos también angular y todo se actualizó a la última versión de Angular. Entonces de esa manera, nos ponemos al día nuestros paquetes y bibliotecas y todas las dependencias fácilmente. Ahora vamos a revisar la actualización o cómo podemos instalar esas actualizaciones. Dijo, asegúrese de que el paquete JSON cambie, tenga
sentido, y luego ejecute npm install. Pero también puedes comprobar los cambios revisando el GitHub y ves todos esos cambios que se hacen aquí. Y además creó un archivo de migración el cual se utilizará para la migración. Entonces, vamos a ejecutar de nuevo la instalación de npm. Por lo que podemos decir npm instalar en nuestro proyecto. Y instalará todas las bibliotecas actualizadas. Otra vez. También, tomará algún tiempo. Y voy a hacer que este video sea rápido. De acuerdo, Ahora, después de instalar MPM, como vemos aquí, que instaló y compiló toda la biblioteca y todo se puso con éxito. Entonces si volvemos a revisar nuestros cambios es solo el paquete.json, que es un archivo temporal para confirmar todas las bibliotecas y sus dependencias y sus enlaces y tokens. Entonces por ahora, vamos a ejecutar el último comando después de esta actualización. Entonces si nos desplazamos hasta las instrucciones, de nuevo, vemos que aquí npm instalado y después de eso, tenemos que hacer ONNX migrar alrededor de las migraciones. Entonces aquí vamos a ejecutar este comando y luego actualizará nuestro proyecto. Y podemos volver a ejecutarlo y vemos si se actualizó. Por lo que aquí vamos de nuevo a la línea común. Yo copio esa. Veo aquí como en base a su mando. Y entonces yo también ejecuto esa migración. Tardará un rato, pero voy a agilizar el video. Agradable como ven aquí, el gran gradiente ha terminado. Hizo un montón de cosas como quitar algunas cosas en desuso y también actualizar fueron trabajadores pobres, rutas activadas por
migración, snapshot o actualizaciones que se hacen o en Angular en esta nueva versión. Entonces el NX hizo eso por mí. Entonces, ahora ejecutemos el proyecto y veamos si realmente lo estamos haciendo. Todo está bien. Por lo que voy a decir en x serve
y usted compra, y en la otra terminal, quiero ejecutar también la aplicación admin. Entonces vamos aquí, ejecutamos esas dos aplicaciones para ver si todo está funcionando bien. Durante eso, podemos comprobar también nuestro bien. Como ves, suceden muchos cambios. Por lo que mi consejo para
ti, tienes que comprobar siempre se hacen cambios de trabajo, sobre
todo si has actualizado algunas reglas en ES lean por ejemplo, sobre todo si tienes como algunas aplicaciones donde tienes algunas, hiciste alguna core ajustes. Por lo que siempre hay que revisar todos esos cambios. Y luego puedes migrar e iniciar tu aplicación o fusionar o el código que se ha actualizado a tu proyecto. Entonces no voy a hablar a detalle de cada actualización que ocurrió aquí, pero en su mayoría está sucediendo. Me gusta en la configuración de archivos de del proyecto como ES pelusa, como testing, tools, like just, y también las variables de entorno que hemos creado previamente, y también los campos de poli, etc. Así todos estos archivos se actualizan, también el NX JSON. Por lo que muchas cosas puede NX hacer por ti sin tener un esfuerzo para hacerlo manualmente, cual es tan grande. No tienes que preocuparte por todo esto pueden ser mitos,
alguna biblioteca, tú, tal vez te perdiste alguna actualización importante. Por lo que NX hace todo eso por ti, que es gracias, grande, gracias por este equipo que está desarrollando toda esta biblioteca y mantenerla en marcha para las últimas actualizaciones de Angular. Entonces como vemos aquí que hemos compilado con éxito el proyecto de cualquier tienda y así el admin. Entonces vayamos a nuestro navegador y comprobemos si tenemos todo está bien. Entonces primero voy al taller de motores. Entonces aquí necesito refrescarme. Por lo que tenemos aquí la Refresca. De acuerdo, parece que todo está funcionando bien. Como ves la página del producto, producto
adicto, Agregar al carrito. Agradable. Todo está funcionando bien. El checkout page. Perfecto. Por lo que no tenemos ningún problema en la aplicación admin o front-end. Vayamos a la aplicación del panel de administración. Por lo que voy al admin también. Volvamos a refrescarnos también. Está bien. Contamos con productos, tenemos categorías, todos ellos funcionando bien. Hemos realizado algunos pedidos y también usuarios. Todo es perfecto. No tuvimos ningún problema. Después de eso. Se puede crear un mensaje. Se puede llamar como núcleo, actualización o actualización, se puede decir. Y entonces puedes comprometerte a dominar. Y todos esos cambios serán empujados y comprometidos con su repositorio. Todo lo que tienes que hacer es empujar eso a un repositorio al que te has conectado. Ya ves, es muy fácil. Nos llevó como unos 15 minutos solo hacer actualización a las últimas bibliotecas de nuestro proyecto.
190. Instalación de Heroku y preparación Git: De acuerdo, En esta sección vamos a desplegar nuestro backend o nuestra Web API a Heroku. Heroku es una de las herramientas que se utiliza para desplegar el proyecto o API web. Y pueden ser públicos y podemos usarlos en tus proyectos. Por lo que no tendrás tu API basada solo en localhost 3000 como vimos, pero lo vamos a poner en alguna URL y podemos conectar nuestras aplicaciones front-end a ella. El primer paso que tenemos que hacer, tenemos que ir a un sitio web llamado Heroku.com y luego se nos pide que nos encerren. Por supuesto, si son unos pocos no tienen cuenta
aquí, también pueden inscribirse. El apuntarse es muy sencillo. Sólo tienes que proporcionar FirstName, apellido, dirección de correo electrónico. ¿ Y cuál es tu papel? ¿ País? Y además, hay que poner algo de lenguaje de desarrollo de dinero Brian. Tenemos que poner NodeJs en nuestro caso y tienes
que verificar que no eres un spam y luego puedes conseguir una cuenta. Después de iniciar sesión, vas a ver un panel como este. Por lo que este dashboard, necesitamos crear una aplicación que la vamos a hacer pública para nuestra API. Por lo que antes que nada, necesitas tener crear una nueva app. Y esta creación de una nueva app, puedes dar cualquier nombre para tu aplicación. En mi caso, le daría un nombre como e-shop, backend por ejemplo. Y tal vez este nombre no pueda estar disponible, por lo que es necesario especificar algún nombre específico. A lo mejor puedes dar como cualquier sufijo aleatorio. Por ejemplo, puedes poner tu apellido. Por ejemplo, pondré mi apellido o el nombre de mi empresa. Ya voy a ver, diría como un pedacitos azules. Entonces en ese caso, tendré e-shop back y bits azules. Y luego eliges tu región es mejor usar la región más cercana donde está más cerca para tus clientes objetivo. Entonces es mejor para mí en este caso, estoy viviendo en Europa. Por lo que voy a poner Europa y luego tienes que hacer clic en crear una app. Por lo que ahora hemos creado una obligación. Hay alguna instrucción que tenemos que hacer primero. En primer lugar necesitamos descargar e instalar Heroku CLI. Vamos a este enlace y comprobarlo. Por lo que en este enlace se pueden ver múltiples opciones para instalar Heroku. Entonces por ejemplo, tienes forma de macOS, puedes usar comentario si tienes Homebrew y también si tienes Windows, puedes instalar un instalador. Y también para abrir A esa manera, que me gusta usar siempre es usar NPM, NPM global instalado. Por lo que puedes hacer npm instalar dash global, Heroku. Entonces vayamos a París y hagamos eso. Entonces iré aquí y abriré mi terminal. Usaré el botón Control J como vimos anteriormente. Y entonces diré npm instalado menos g. Así que de esta manera, instalaré dispositivo de dominio Heroku público, para poder usar comandos de Heroku en mi máquina. Pero lo primero que tengo que hacer es quizá necesitamos tener unos permisos. Entonces los permisos, tal vez no te permitirá instalar público o globalmente. Necesitas prefijar este comentario con sudo. Entonces como ven aquí, no
soy r No
tengo permisos para hacer eso, así que necesito prefijo este comando con sudo. Entonces podemos decir sudo nmap, pero en Windows, creo que no tendrás ningún problema. Y entonces me pedirá mi contraseña. Y luego pondré la contraseña y se instalará con éxito. Ahora, como ven, se instaló, tenemos ahora comando Heroku. que puedas, por ejemplo, poner a Heroku así y obtendrías un comando como opciones que tienes, algunas opciones que puedes usar para tus comentarios de Heroku. Así que vuelve a nuestro navegador. Después de la instalación, volvemos a nuestra aplicación y tenemos que hacer una buena edición. Y además, tenemos que conectar nuestro proyecto Heroku o nuestro proyecto back-end con Heroku git. Pero antes que nada, más importante porque antes de hacer este paso, tienes por supuesto, para crear un archivo gitignore. Entonces, por ejemplo, en Heroku, no
voy a desplegar este archivo final. Este archivo m contiene mi cadena de conexión a base de datos es mi secreto y también URL API. No voy a empujar eso al repositorio de git de Heroku. Entonces de esta manera, necesitamos agregar un archivo que se llama git ignore. Entonces cuando uso un buen comentario de Heroku, entonces no va a empujar esos archivos que especifico. Por lo que también, no tienes que empujar módulos de nodo. Los módulos de Monod vienen normalmente un archivo muy enorme, casi 200 megabytes, porque estamos instalando bibliotecas y sus dependencias. No tienes que usar los módulos Node también. Por lo que crear archivo get ignorado, Es muy sencillo. Basta con crear un archivo en la raíz del proyecto. Por lo que hay que decir git ignore antes de hacer cualquier paso que se menciona ahí. Por lo que primero, es necesario ignorar carpeta de módulos de nodo. Por lo que decimos slash node underscore módulos. Y además tenemos que ignorar el archivo m-y también otros archivos de desarrollo como guapa RC, como ven aquí, tenemos este archivo para que podamos ignorarlo también. Entonces en ese caso, tenemos, estamos,
estamos listos para conectar nuestro proyecto con el repositorio de Heroku. Entonces volvemos a las instrucciones y tenemos que decir mete en ello. Porque si no hemos inicializado nuestro proyecto previamente ya que vimos que no tenemos un bien, No lo conectamos a ningún bien. Entonces en ese caso, tenemos que decir conseguir cualquiera, vale, Después de que sí te
metes en él, verás que hay un archivo creado en este repositorio el cual va o
se llama como punto kid. Y si lo quieres ver, puedes ir aquí a la carpeta backend y verás que esta carpeta y se creó. Por lo que la siguiente instrucción necesitamos conectar Heroku git remote. Pero primero necesitamos usar el login de Heroku. Entonces, primero veamos a Heroku. Entonces usaré el login de Heroku y luego me preguntará, ¿quieres abrir el navegador y puedes iniciar sesión entonces. Por lo que no podemos decir que sí, podemos presionar cualquier tecla y luego se abrirá automáticamente el navegador. Entonces como ven aquí, tengo otra página. Está diciendo mirar a Heroku CLI. Diré buscar y luego iniciar sesión porque estoy previamente conectado en el mismo navegador. Por lo que cuando regrese a la terminal, sabrá
que ya se ha conectado y luego podrá utilizar los comandos de Heroku, como se menciona en la documentación. Después de eso, necesitamos conectar nuestro Heroku o nuestro proyecto al repositorio de git de Heroku. Entonces necesitamos usar este comando, todos estos comandos, puedes usarlos como ves, digamos Heroku, git remote, y luego agregar E sharp back y blue bits. Por lo que es exactamente el mismo nombre de la aplicación. Entonces hagámoslo. Y luego basamos aquí este comentario. Y luego, como veremos eso, está bien, el repositorio de Git está configurado en este camino. Entonces ahora cuando vamos a desplegar nuestro proyecto o subir nuestro código para manejar cool, entonces Heroku obtendrá o leerá todos sus archivos y el código que hemos subido de esta ruta. En la próxima conferencia, vamos a ver cómo podemos crear también una base de datos de producción. No tenemos que usar la misma base de datos que vemos porque tal vez esta base de datos podemos diferenciar entre desarrollo y producción. Como veremos en la próxima conferencia.
191. Creación de datos de producción opcional: De acuerdo, en esta conferencia vamos a hablar de crear una base de datos de producción. Entonces cuando estás haciendo un desarrollo o cuando haces alguna aplicación, normalmente tienes una base de datos espacial para ti, para solo desarrollar y probar cosas y hacer un progreso para tu aplicación. Pero después de desplegar el proyecto para vivir, entonces hay que crear una base de datos de producción. En este curso, esto es opcional para que usted cree base de datos en vivo, base datos de
producción o no. Entonces en esta sección o en esta conferencia, vamos a hacer eso. Si recuerdas, hemos instalado MongoDB Compass y esta aplicación MongoDB Compass, podemos ser capaces de crear bases de datos y también podemos importar y exportar datos a ella. Entonces en nuestro curso estábamos usando esta base de datos, que se llama base de datos de e-shop. Ahora vamos a crear uno nuevo. Podemos llamarlo E agudo también, base de datos. Y sería una producción amplia. Entonces podemos tener eso y podemos crear la primera colección, que se llamará, por ejemplo, categorías. Y luego hacemos, creamos para la base de datos, y se crea la base de datos. Entonces como ven aquí, pero sólo tenemos una mesa. Entonces si recuerdas, te adjunto al inicio del curso, algunos archivos, puedes usarlos como datos predeterminados. Es como los datos que estamos insertando hacen la base de datos. Es como sembrar. Por lo que podemos usar también la siembra que así aquí. Entonces lo haré rápidamente. Entonces, ¿cómo importar datos usando una brújula? Solo tienes que ir aquí, click en categorías, por ejemplo, en el nombre de la colección. Y luego se puede decir datos de importación. Y luego navega hasta el archivo donde te di. Entonces te di, por ejemplo, categorías o los ítems y otras tablas. Entonces para eso, puedes usar para estas categorías y tienes que especificar aquí que tienes JSON. Y ahora estamos haciendo importación. Y esta importación se completó. Y veremos que nuestros datos se encuentran aquí. Por lo que haremos lo mismo para todas las mesas. Voy a hacer eso rápidamente frente a ti. Por lo que creé aquí una nueva tabla. Yo lo llamo usuario, o usuarios. Y estos usuarios, voy a importar esos datos también. Entonces tenemos que hacer lo mismo para todas las demás mesas. Por lo que ahora mi producción de base de datos está llena. Entonces vamos a utilizar esta base de datos, pero sólo estamos para su aplicación de producto
o esa aplicación desarrollada en el desarrollo local de Heroku, seguimos usando el tema de la base de datos. Entonces cómo podemos hacer eso dinámicamente, como cuando implemento ISA a la aplicación utiliza base de datos. Pero cuando estoy desarrollando, quiero decirle a la aplicación,
vale, usa esta base de datos. Entonces es bastante simple. Vamos a configurar esas variables de entorno las cuales son preferidas para Heroku porque vamos a usar estas variables y las usamos dentro de la aplicación. Y en el desarrollo, podemos mantener, por ejemplo, esta cadena de conexión. Pero en producción vamos a tener otra cadena de conexión. Pero aquí como ves ese archivo de entorno no se despliega porque agregamos a git ignore. Entonces esto no estará en el despliegue en Heroku porque Heroku no sabrá que tenemos archivo de entorno aquí.
192. Ajustar las variables del entorno del desarrollo y el entorno de productos: De acuerdo, ahora cómo podemos decirle a la aplicación que use esa base de datos de producción, no la base de datos del desarrollo. En primer lugar, si recuerdas, agregamos el archivo m-y en el archivo final lo estábamos usando para conectarnos a la base de datos que hemos creado en MongoDB Atlas. Por lo que la cadena de conexión se almacena en el archivo m como se ve aquí, y ya hablamos de eso anteriormente. Por lo que ahora vamos a tener una cadena de conexión diferente para la producción. Entonces en ese caso, de acuerdo, estamos usando esta cadena de conexión aquí en conexiones de proceso para hacer. Pero como les dije que cuando vamos a desplegar esta aplicación, este módulo m-file, más bonito, IC y Node, no se
subirán al servidor. Entonces desde donde se implementó la aplicación sabrá qué cadena de conexión usar. Porque en ese caso cuando
implementa, no sabrá qué cadena de conexión usar porque aquí estará indefinida. Y entonces tendremos un error de conexión. Entonces para eso, cambiemos primero todo lo que tenemos, como dos o en nuestro app.js, todo lo que necesitamos cambiar para estar en producción. Por ejemplo, este nombre, voy a usar una base de datos pero en el extranjero, no esta. Por lo que tenemos que cambiar eso también. También tenemos que usar alguna, otra variable, que podemos llamarla dB nombre, por ejemplo. Y podemos dar este nombre DB en el archivo. Entonces podemos, después de que esa fue una línea, podemos decir nombre DP. Y luego para local, tendré que usar esta base de datos de e-shop. Pero en producción vamos a usar una diferente. De acuerdo, ¿qué más? Por lo que la aplicación también está usando un puerto específico. Entonces cuando inicias la aplicación en producción, como ves aquí, cuando vamos al navegador a nuestra aplicación y usamos,
decimos, por ejemplo, abrir la app aquí en la parte superior. Entonces tendremos una nueva app. Como ven aquí, tenemos el enlace, pero no contiene ningún puerto ni como por ejemplo, 3000 o algo así. Porque antes teníamos como anfitrión local como este y 3000. Entonces no tenemos la pizarra aquí. Entonces cómo también podemos hacer que el tablero sea dinámico. Por lo que necesitamos hacer eso también porque en la producción usará un puerto diferente. Entonces así aquí tenemos que definir una variable. Podemos darle como una constante y decimos puerto. Y este puerto vendrá también de variables de entorno. Y se le llamará puerto. Si no hay puerto, entonces use 3000. Entonces por si acaso si esta parte no viene o viene con indefinido. Entonces entonces usamos esta pizarra aquí. Y en mi archivo puedo definir ese puerto. Por lo que podemos decir también aquí, usar el puerto, podemos decir que el puerto será 3000. Pero recuerda, esto es sólo para el desarrollo local. No tenemos para eso para la producción. Producción lo sustituirá por otro puerto. Pero la palabra clave para eso se comprará así. Por lo que Heroku encontrará o creará un puerto por su cuenta. Normalmente, es el puerto 80, que es el puerto predeterminado para el HTTP. Ok, ahora tenemos un problema. Entonces cómo la producción sin variable de cadena de conexión. Entonces cómo podemos crear eso. Por lo que vamos de nuevo al navegador donde hemos creado nuestra aplicación. Y luego encontraremos en la parte superior algo llamado actividad o ajustes. Y en su configuración encontrarás un revelador config vars. Por lo que esos son los vars de conflicto que se utilizarán en la producción. Entonces en ese caso, necesito decirle a mi aplicación aquí, usa la cadena de conexión, pero somos uno de producción. Por lo que volveré a ir al navegador y luego crear una nueva cadena de conexión clave será lo que será. El enlace se está quedando igual pero con base de datos diferente. Entonces usaré el mismo. Y entonces diré que no use base de datos de e-shop, pero cada uno de eso obedece en el extranjero. Y además, necesitamos también crear otra cosa que se llama nombre DP. Vamos a usar ese nombre agudo, que la base, así que aquí también, e-sharp, que obedece a amplio también. Entonces en ese caso, la aplicación sabrá que hay una cadena de conexión y la leería desde aquí. Entonces no tenemos que preocuparnos por eso. Por lo que también es mejor agregar todas las variables de entorno a la conexión porque de lo contrario nuestra aplicación fallará. De lo que tenemos que usar aquí, API URL, que será lo mismo que teníamos ahí. Será api slash v1 y lo estamos agregando secreto. El mismo. También debe ser las mismas letras mayúsculas o minúsculas porque es sensible a mayúsculas y minúsculas. Y vamos a tener aquí el secreto o puedes usar otro secreto. Entonces cuando despliegue mi aplicación, entonces buscará proceso. Pero nuestro error local no se despliega porque lo tenemos en el buen ignorar. Por lo que no estará en el servidor para que Heroku no sepa por trabajo para conseguirlo. Irá a los vars de conflicto y luego leerá esos valores. Por lo que en este caso, tenemos una base de datos diferente a la producción y una base de datos para el desarrollo local. En la próxima conferencia, vamos a ver cómo podemos usar eso y cómo podemos desplegar la aplicación al servidor.
193. Despliegue la aplicación y prueba: Ahora volvamos a la instrucción de desplegar la aplicación. Entonces aquí si volvemos a la aplicación y hacemos click en Desplegar, y volveremos a ver nuestra instrucción. Entonces ya hicimos esa conexión y hemos desplegado o hacemos el enlace entre la aplicación y el repositorio Git de Heroku. Ahora vamos a ejecutar esos comentarios. En primer lugar, necesitamos agregar el código al bien, por lo que necesitamos comprometerlo. Entonces si no sabes qué es,
Es como si estuvieras dando información, como en qué código estás comprometiendo con tu repositorio. Entonces cuando hago cambio, entonces digo, vale, cambié este, elimino eso. Por lo que diría en el mensaje de commit que quitar el manejador de errores. Por lo que de esa manera haces un seguimiento de tus cambios en el proyecto. Entonces aquí podemos hacer eso también con Heroku. Entonces tenemos que hacer git add dot y luego git commit dash am, hacerlo mejor o cualquier mensaje. Entonces, antes que nada, hagamos el bien. Significa esto que estamos agregando todos los archivos del proyecto al repositorio
de Git para prepararlos para subirlos al servidor. Y luego después de eso, tenemos que hacer el git commit y luego guiar m. Y luego puedes especificar un mensaje. Entonces, por ejemplo, desplegar primero, morir. Por lo que también podemos agregar este mensaje de compromiso. Después de eso, necesitamos empujar el código a la cetera. Nosotros somos como hacemos eso con este común git push heroku master. Entonces iré a la terminal y luego pegaré aquí este comando. Y luego va a subir toda la información o todo el código que especifiqué, excepto los archivos o los archivos y carpetas que especificé en git ignoran. Entonces en ese caso, tendremos todos nuestros archivos de desarrollo están ahí. Entonces como ves aquí, es
dardo, no despliegues la aplicación, los archivos terminados, it, empiezan a construirla. Y ahora está mostrando todo el progreso instalando bibliotecas. Hace así npm instalar para la
instalación los paquetes que utilizamos para nuestra aplicación. Y entonces tendrá módulos Node, pero en el servidor, no éste. Entonces después de eso comprimirá la aplicación para un uso más rápido. Y también hay que recordar subir las imágenes que están en la carpeta de carga para que podamos ver las imágenes también en el, en el servidor. Entonces de lo contrario, si no tienes esas imágenes que adjunté para ti también, porque están en la base de datos también, los enlaces a esos mensajes o imágenes. Necesitas subirlas también a tu servidor. Por lo que ese despliegue terminó, verificando despliegue, hecho. De acuerdo, Volvamos al navegador y vayamos a la aplicación y actualicemos aquí. Agradable. Tenemos mensaje, el usuario no está autorizado. Eso es genial porque si recuerdas, hemos autorizado nuestra API. Entonces si recuerdas en las rutas o en los ayudantes, dijimos JWT que vamos a excluir algunas rutas de la autenticación, por ejemplo, en conseguir un producto o conseguir unas categorías. Entonces tratemos de conseguir un producto en el navegador. Entonces diré aquí exactamente si recuerdas cómo lo estábamos haciendo con host
local y 3000 y luego pongo API v1, y luego pongo productos por ejemplo. Entonces esto es como una solicitud de get cuando lo intentas, Vale, Tenemos todos los datos de nuestra base de datos. No puedes probar eso tan bien como Cartero, si recuerdas, tenemos estuvimos trabajando mucho con el cartero y estuvimos probando nuestra API en Cartero. Entonces aquí abriré una nueva pestaña para una nueva solicitud GET, y luego pondré este enlace. Por lo que el enlace de mi aplicación API, producto v1. Entonces será exactamente como lo estoy haciendo de anfitrión local. Por lo que se ve que toda esta información se almacena y estamos usando la base de datos de producción. No estamos usando la base de datos que teníamos para local. Entonces para demostrar eso, Hagamos un cambio en la base de datos usando brújula. Por lo que iré a mi solicitud,
seguiré a la base de datos de producción. Daré click en esto y abriré los productos. Y voy a ir al que empieza con, me acuerdo como mol, algo así. Entonces aquí lo pequeño, se ve aquí lo pequeño y esto es. Entonces cambiemos eso. Podemos decir cambiar esta frase. Vamos a la, por lo que hacemos click en la pequeña aquí y podemos decir, por ejemplo, en el extranjero. Entonces podemos hacer esto más grande y decir producción. Por lo que aquí no podemos agregar esta palabra producción. Entonces después de actualizar, y luego vamos a Cartero, y luego hacemos click en Enviar. De acuerdo, tenemos aquí producción. Entonces esta es la prueba de que estoy usando la amplia base de datos, pero en mi host local, Vamos a tratar de ejecutar la aplicación en local. Entonces podemos decir npm start como estábamos ejecutando la aplicación localmente, ok, El localhost 3000, todo está bien. Ahora vamos a solicitud GET, pero en el anfitrión local. Por lo que tenemos aquí, por ejemplo, localhost 3000 productos API. Y luego si lo llamamos, veremos que
estamos llamando a la base de datos, que está en el host local. Y si lo revisamos, esta base de datos, iré aquí. Y voy a revisar este número de base de datos. Acude a productos. Tendré una gran cantidad de productos
ficticio que estuvimos utilizando durante el desarrollo. Entonces en ese caso, estamos diferenciando cada vez que despliegué a mi aplicación cosa pulgar, ¿
puede entonces va a utilizar una base de datos de su producción. Por ejemplo, voy a cambiar algo aquí. Voy a añadir un registro de consola. Qué ejemplo de registro de consola. Al igual que usar, estamos usando. Por ejemplo, puedes poner adicional y luego puedes usar el nombre de DB aquí. Entonces cuando guarde, vale, en mi local, diré que estamos usando base de datos de e-shop, pero necesitamos desplegar eso. Entonces aquí, nuestro anfitrión local, local, tenemos base de datos de e-shop, como sabemos para el desarrollo. Pero si desplegamos esto, obtendríamos, estamos usando el tema de base de datos traído té o producto. Entonces de esta manera, cómo podemos empujar cambios, de nuevo, necesitamos poner git add y luego agregamos un mensaje. Entonces por ejemplo, comentarios, podemos decir cambio, y luego presionamos enter, y luego usamos nuevamente push common. Entonces git, empuja heroku master, se desplegará de nuevo. Entonces, como ven aquí, se está desplegando de nuevo. El mismo proceso que vimos en el primer paso. Ahora está terminado el despliegue. Cómo podemos ver que, por ejemplo, este mensaje que estamos usando, como la base de datos, usted, me refiero a cómo podemos ver el registro de la consola o los errores que vemos en el desarrollo. Para ver que puedes ir fácil Dos más aquí, y puedes consultar aquí un registro de vista. Por lo que cuando haga clic en él, verá todos los registros como se están desarrollando localmente. Entonces decimos aquí, estamos usando base de datos de e-shop en el extranjero. Entonces eso muy grandioso y exactamente cómo estábamos teniendo la aplicación en local y así, hará como el monitoreo para nuestra API. Entonces cuando llamo a esta API, entonces voy a los registros. Ya lo veré, vale, tenemos información Obtener productos API v1 y alguna otra información sobre la solicitud y devolución y cuánto tiempo tardó. Pero si vamos a la base de datos, necesitamos, por ejemplo, revisar una imagen. Por lo que iré aquí y voy a ir a la base de datos y tengo productos. Tendremos un problema con las imágenes. Entonces si recuerdas, hemos subido algunas imágenes con nuestro e-sharp. Entonces cuando vaya aquí, veré que en el producto, aún
tienen este localhost 3000. Desafortunadamente, esto no es posible reemplazarlo. Por lo que necesita reemplazar todas esas cadenas que están relacionadas con el host local. Es necesario reemplazarlos anualmente con el enlace que se proporciona para su solicitud. Entonces en ese caso, voy a ir aquí a mi solicitud y luego copiar esta parte que es de aquí to.com. Por lo que copiaré todo esto. Y luego volveré al campus y sustituiré de HTTP a localhost. También el puerto no es necesario y luego añadiré actualizar o actualizar esta parte aquí. Por lo que hacemos click en Actualizar y luego se actualizará. Entonces cuando vaya ahora a la aplicación y pegue la URL de la imagen, entonces podré ver la imagen con éxito. De lo contrario, todas las imágenes, desafortunadamente, siguen en localhost 3000. Entonces para eso, en base a tu nombre de tu aplicación, necesitas reemplazar todo esto para la base de datos. Por supuesto, después de usar esta base de datos, por ejemplo, en algún front-end o cuando lo estemos,
vas a usar Postman, por ejemplo, cuando voy a publicar un producto usando esta URL API, subirá la imagen basada en en esa URL, por lo que se almacenará en la base de datos así. Pero debido a que estábamos usando esta base de datos en desarrollo, hay
que hacerlo manualmente. Porque también, estábamos usando cuando estamos publicando un producto. Si recuerdas, si vamos a publicar el producto y en el post producto estábamos haciendo como la imagen usando el host. Obtengo el host actual y luego pongo el resto aquí para almacenar la ruta de la imagen. Por lo que el host será tomado del host que está utilizando y llamando a la API desde. Entonces en ese caso, no tienes que preocuparte por los enlaces que queremos subir para los archivos subidos. Por lo que ahora tenemos una API totalmente funcional en el servidor. Se desplegó la aplicación. Por supuesto, si quieres eliminar este Heroku.com y crear tu propio dominio, no
es de forma gratuita. Tienes que pagar por eso. Y por supuesto, puedes tenerlo bajo tu propio dominio. Entonces en la aplicación front-end o cualquier aplicación front-end, cuando vas a implementar su aplicación front-end, no su Web API. Se puede decir que para mi aplicación en el front end en producción, use esta URL API para todos como la aplicación. Y luego cuando se implementara tu aplicación, se conectará a esta API y agarrará los datos desde ahí.
194. Preparar las páginas de Git y Github: Cuando estamos desplegando el back-end, te
dije que instalaras la aplicación, que se llama GitHub Desktop. Pondré de nuevo el enlace con esta conferencia para ver dónde se encuentra la instalación de esta aplicación. Github está proporcionando con muy gran herramienta para desplegar aplicaciones, las cuales están conteniendo JavaScript, CSS y HTML. Y puedes desplegar tus aplicaciones ahí y las puedes ver en el navegador. Para que puedas tener un dominio y luego puedes ver tu aplicación publicada en el navegador. Por lo que vamos en este curso a mostrar cómo podemos desplegar la aplicación en GitHub Pages. Y si quieres ver otras formas, como si quieres ver cómo podemos implementar eso vía FTP a nuestro propio dominio. Además, puedo hacer un video sobre el curso. Simplemente agarra un mensaje si quieres que haga eso. Entonces, en primer lugar, vamos a tener esta publicación de GitHub Pages. Entonces para eso, necesitamos conectar nuestro repositorio actual,
nuestro proyecto actual que hemos creado con Git, aplicación de escritorio
GitHub para conectarnos a tu repositorio. Porque vamos a crear repositorio en nuestra cuenta de GitHub. Entonces, antes que nada, necesitas hacer del clon un repositorio desde internet. Por lo que este te pedirá que asignes a tu cuenta en tu GitHub. Por lo que para ello, solo tienes que dar click en Iniciar sesión. Y luego te pedirá que abras el navegador donde has iniciado sesión ya en GitHub en el navegador. Entonces cuando haga clic en continuar como navegador, y luego se mostrará para mí abra la aplicación GitHub Desktop. Y luego cuando haga clic en Abrir aplicación GitHub Desktop, me conectaré a mis repositorios, cuales estoy iniciando en el navegador. Y entonces los tendré aquí para poder clonarlos o hacer cualquier cosa con ellos. Pero cuando se crea un proyecto de Angular con NX, el proyecto viene por defecto. Como ves aquí están los archivos del proyecto que estábamos trabajando como aquí, Apps, labios o todo esto. Y tenemos aquí las aplicaciones. Como ves, tenemos un archivo dot git y esta carpeta dot get, lo siento, tenemos que quitarlo porque está conectado a otro repositorio el cual es creado por una X. Hasta ahora que es mejor mover esta carpeta. Y también esto para quiero mencionar que esta carpeta se puede ocultar en el sistema Mac por defecto. Entonces lo que tienes que hacer es solo presionar Comando y Mayús
y punto, y luego te dará la capacidad de verlos. Entonces voy a ver Cambio de Comando
y punto, y como ven aquí, estoy mostrando y escondiendo. En Windows. Verás la carpeta despejada y la verás, y podrás eliminarla directamente. Pero para la seguridad está encendida, Mac está escondiendo esos archivos que empiezan con un punto. Entonces vamos a eliminar la carpeta dot get, que ya es creada por una x. Y voy a dar clic en Mover para ganar. Por supuesto, si estás conectado, tu proyecto está conectado a algún repositorio. No tienes que hacer este paso y no tienes que quitarlo de los archivos. Ahora volvemos a la aplicación de escritorio GitHub para crear un nuevo repositorio, pero desde el disco duro. Entonces lo que tengo que hacer aquí es simplemente crear un nuevo repositorio. Y luego le daré un nombre del mismo nombre de la carpeta donde está ahí esa fuente de código. Entonces si voy aquí uno arriba de nivel, veo que tengo aquí pedacitos azules. Y en bits azules tengo los archivos fuente que trabajé y creé con n-x para crear mi aplicación Angular. Tan lejos que vamos un nivel arriba, como en la forma en que vemos la carpeta de su fuente. Y luego hacemos click en abrir. Y entonces aquí tenemos que poner el mismo nombre de la carpeta, que contiene el código fuente. Entonces en mi caso aquí, voy a decir unos bits azules y luego voy a dar clic en crear un repositorio. Entonces en ese caso, tendré el repositorio existente, que ya tengo. Y se inicializará con una carpeta GitHub o GitHub. Entonces como ves aquí, tenemos la carpeta Git está de vuelta de nuevo, pero inicializada localmente. Todavía no lo conectamos a nuestro repositorio en GitHub. Entonces, ¿cómo podemos conectar eso a nuestro repositorio de GitHub? En primer lugar, es necesario hacer clic en este botón. Usted dice Publicar repositorio. Por supuesto, ya has iniciado sesión en tu cuenta en GitHub, en el escritorio de GitHub. Y además, vamos a crear un repositorio para eso. Entonces, antes que nada, necesitas darle un nombre. Entonces no es necesario aquí tienes libertad para dar el nombre que quieras. Por ejemplo, crearía e-shop ahí así. Y entonces siempre es cuando se quiere usar las páginas de GitHub, no se
debe mantener privado este código. Tienes que hacerlo como público. Para hacerlo es privado. Y con las páginas de GitHub, hay
que pagar. Pero para eso, es gratis. Simplemente puedes hacerlo como público y luego haces click en Publicar repositorio. Entonces en ese caso, después de que estés seguro de que la carpeta dot get se volvió atrás, Es como X creado aquí, no aquí. Por lo que necesitas saber que realmente está dentro del código fuente de tu aplicación. Por lo que necesitas tener esta carpeta dot get antes de crear un repositorio. De acuerdo, voy a mi cuenta de GitHub para estar seguro de que si es realmente, se crea
el repositorio. Entonces como ven aquí, si voy a repositorios, tengo mi repositorio el cual se crea aquí, inicializado con las cosas que tengo por defecto creado por una documentación x. Entonces como ven aquí, tenemos todos los archivos y los archivos fuente aquí. De acuerdo, Entonces lo que tenemos que hacer a continuación es construir la aplicación y luego publicarla en GitHub Pages. Y esto, lo que vamos a ver en la próxima conferencia. Por ahora, estamos listos. Solo necesitamos publicar la compilación de las aplicaciones como
la tienda de motores y el administrador a nuestras Páginas GitHub.
195. Construir aplicaciones de Frontend: De acuerdo, ahora hemos publicado nuestro repositorio a GitHub. Ahora necesitamos construir la aplicación y lo será, o podremos ver los cambios y podremos acceder al sitio web de nuestro número. Entonces de esta manera, tenemos que ir a ese código. Y si recuerdas, estábamos abriendo el proyecto, que es proyecto front-end. Y como ven, vamos aquí a la raíz. No tenemos que hacer nada. Cerremos todo el mando o las terminales que no son necesarias. Ahora abrimos una nueva terminal. Nuevamente, el Build significa que quiero construir mi aplicación. No tengo que subir todos estos archivos. Yo quiero que los archivos que angulares me dan sean publicables y se puedan utilizar en producción. Por lo que no tengo que subir todos esos archivos fuente, archivos y ver cómo funciona mi aplicación ahí. Porque de lo contrario estoy subiendo los archivos fuente. No, angular tiene una propiedad que le está dando la capacidad de construir la aplicación que comprimirá todos los archivos. En algunos pocos archivos, tu proyecto, todo estará en esos archivos como veremos más adelante. Entonces si vamos al paquete JSON, veremos en el script múltiples scripts. Entonces como ves que tenemos script de construcción, que es decir mg construido. Pero si recuerdas, dijimos que Angular o NX se construye sobre angular de alguna manera. Para que puedas hacer los mismos comentarios con una x, como lo mismo como lo haces con energía o comentarios angulares. Hasta el momento que construir cualquier aplicación, si tienes una instalada, solo dices NX build y luego especificas la aplicación que quieres usar. Ejemplo, quiero admin o quiero y tú compras por ahora. Yo quiero n G-sharp. Entonces no podemos decir construir Angie, comprar de esa manera. Por lo que al presionar Enter, la aplicación se facturará y se especificará en alguna carpeta se llama Oriente. Por lo que en esta carpeta dist, en las apps, verás tu aplicación aquí. Entonces como ves esa compilación terminada y solo tenemos pocos archivos en la carpeta dist. Por lo que no tenemos toda la fuente del proyecto y esta carpeta que vamos a subir a nuestro GitHub. O bien puedes subirlo a tu servidor. Entonces se puede ver. O puedes ver la aplicación que
ya estábamos construyendo y puedes navegar por ella en la página web, en público. Pero si queremos desplegar este proyecto en GitHub Pages, GitHub Pages tiene algunas condiciones que tenemos que seguir. En primer lugar, hacemos lo mismo. Nosotros hacemos NX construir cualquier tienda, pero necesitamos especificar alguna carpeta que se llama baño de salida. Y aquí nosotros en esta ruta de salida, especificas alguna ruta específica que le gusta a GitHub, que se llama docs. Y luego hay una palabra clave que se llama Bayes HRF. Y aquí especificamos HRF o el enlace que se generará en el archivo índice, como se ve aquí. Porque aquí dirá base H ref es slash. Pero necesitamos que nuestra base de HRF sea el mismo nombre del proyecto que hemos creado en GitHub, el mismo nombre del repositorio. Si recuerdas, tengo ese nombre del repositorio que se llama e-shop. Entonces tenemos que poner el mismo nombre porque GitHub no ve ningún otro nombre, sólo el nombre del repositorio. Entonces tenemos que decir aquí, slash, es muy importante poner slash. No lo olvides. Tienes que decir e-shop, el mismo nombre exactamente del repositorio y luego otra slash. Por lo que en ese caso, construiremos nuestra aplicación bajo esas condiciones. Entonces vamos a presionar Enter y ver qué va a construir. Agradable, esa construcción terminada. Pero por supuesto
que no en la carpeta dist, estará en esa carpeta docs, como ves aquí, Tooele sea exactamente la misma compilación que tenemos en la carpeta dist, pero estará en otra carpeta también. Y la base H ref será e-sharp como especificamos en el comentario. Entonces esas son las condiciones básicas que tienes que hacer para construir tu aplicación. Por supuesto, no estamos terminados. Estamos construyendo ahora el entorno de desarrollo. No estamos construyendo su producción. Pero sólo quiero mostrarles paso a paso para que sean claros para ustedes cada vez más. En la próxima conferencia, veremos cómo construir o desplegar todo este proyecto o esos archivos para poder navegar por la página web que creamos para N D sharp.
196. Deploying aplicaciones de Frontend en las páginas de Github: De acuerdo, ahora después de eso, hemos creado la carpeta de despliegue en perros y
vamos a implementar eso al servidor, a menudo páginas de GitHub. Entonces, ¿cómo podemos hacer eso? En primer lugar, iré a GitHub Desktop. Nuevamente, como ven aquí, tenemos múltiples archivos creados recientemente. Es mejor siempre crear una nueva sucursal en GitHub, que será como el nombre de la sucursal donde siempre vas
a desplegar tu aplicación en GitHub Pages. Entonces podemos decir esto. Brian puede ser GH y luego podemos decir páginas como esta. Y luego creamos una nueva sucursal. Y luego hacemos click en crear una sucursal. Entonces cambiamos esa marca. Pero aquí tenemos que decir traer mis cambios a GitHub Pages porque hemos creado esta compilación. Por lo que también necesitamos mover esos archivos, los nuevos archivos, como ves aquí, todos ellos en ti. Tenemos que moverlos también. Entonces te ramificas. Entonces digo parpadear mis cambios a las páginas. Entonces cuando podamos ir y hacer clic en Switch branch, todos se moverán aquí. Después de eso, el paso es publicar la sucursal. Tenemos que poner esta sucursal en la página de GitHub y también a nuestro repositorio de GitHub. Por lo que ahora todo está publicado. Pero primero tenemos que comprometer este mensaje. Por lo que necesitamos comentar esos archivos también. Tenemos que decir eso, vale, esos archivos son nuevos. Tenemos que comprometerlos y empujarlos al servidor. Entonces tenemos que decir a GitHub. Entonces para eso podemos crear un mensaje. Podemos decir GitHub Pages, predecir oso, por ejemplo. Y luego ponemos todos los que podemos decir comprometer debido a la sucursal GH Pages. Está empeñada. Y entonces tenemos que empujar de nuevo. Entonces volvemos a empujar nuestros cambios que hemos creado aquí. Ahora no tenemos ningún cambio para archivar. Vayamos de nuevo a nuestra página de GitHub. Y voy al repositorio que he creado, que se llama E sharp. Entonces recuerda que vas al mismo repositorio y después de eso, vamos a Configuración, que se encuentra aquí dentro del repositorio. Y luego hacemos clic en Configuración y contestamos cosas. Verás como múltiples opciones. Una de ellas es páginas. Y por defecto, la aplicación se publicará barro en la carpeta raíz, necesitamos dar la carpeta específica. Tenemos que dar los archivos que hemos creado por la compilación, que están dentro de los docs. No necesitamos construir todo esto. Esto está mal porque para no trabajar. Pero para eso, necesitamos especificar una carpeta. Simplemente le voy a dar unos tontos. Aparecerá aquí. Entonces diré que me des la carpeta de los docs y luego Guardar. Y como ves, dice tu lado publicado en este enlace. Al hacer click en este enlace, veremos que tenemos alguna página por defecto, que fue el ReadMe. Lleva algún tiempo porque tenemos
que esperar en algún momento cuando estés cambiando entre las carpetas. Por lo que hay que esperar un poco hasta que se desplegó. Por lo que después de algún tiempo se desplegará. Y además, se puede comprobar ese dominio. Entonces como ven aquí, se desplegó. Tan agradable. Por lo que tenemos todo este enlace y tenemos nuestro fin. Usted compra aquí. Pero hay un problema que no hay datos. No hay conexión a base de datos. Y si revisas aquí, la consola de dentro, obtendríamos muchos errores. ¿ Cuáles son esos errores? Eso es decir que localhost 3000. Por lo que todavía estamos en el anfitrión local. El back end, sigue conectándose con el anfitrión local, pidiendo categorías y pidiendo productos. Por lo que necesitamos cambiar este enlace, localhost 3000 a nuestra aplicación Heroku, que hemos creado. Y esta aplicación será E-sharp back y bits azules aplicación Heroku. Y aquí podemos acceder a las API como vimos en la compilación del back-end. Entonces cómo podemos arreglar eso. Entonces como ves aquí que está diciendo que tu sitio está publicado. Por lo que siempre cuando haces algunos cambios, necesitas esperar un poco hasta ver los cambios que aquí se publican. Por lo que lleva un poco de tiempo. Por lo que ahora, después de que
hayamos publicado, necesitamos cambiar este enlace. Entonces si recuerdas, en aplicación cuando estábamos creando la aplicación, teníamos carpeta entornos. Y les dije que tenemos dos tipos de ambientes donde vamos a usar. Una es para la producción, y aquí estábamos colocando nuestra URL API y otra para el desarrollo local. Y ponemos cuatro en ese tiempo para ambos, lo mismo, si
acaso vamos a construir la producción. Pero ahora llegamos a ese momento. Tenemos que sustituir. El enlace que se crea para host local aquí. Pero en el archivo prod ambiental, necesitamos cambiarlo a nuestro enlace Heroku. Por lo que aquí sustituiré http localhost 3000 por el enlace que tenía de la aplicación Heroku. Entonces tendremos éste y esta será mi producción. Entonces cuando guardemos eso, se guardará para todas nuestras aplicaciones. Tenemos que volver a construir el proyecto. Pero aquí, después de construir nuevamente el proyecto, necesitamos usar una bandera que se llama amplia. Al igual que construir, acción amplia. Necesito la producción más allá. No quiero la construcción normal, el desarrollo más allá porque aquí tenemos acero, el desarrollo construido. No tenemos la de producción. Como ven, aquí tenemos deshacer en ella. Y todo el código fuente está disponible aquí porque esto es desarrollo, construir no es producción. Y el tamaño del paquete de esto, es muy grande porque no está comprimido. Para que la producción se cultiva hueso presionando para mí todos los archivos. Y se minificará y será más rápido, sobre todo para conexiones de internet débiles. Entonces para eso, tenemos que abanderar aquí nuestro mando con una amplia, no
tenemos que usar un expulsado en un trabajo. Sólo lo que necesitamos también para banderla con el extranjero. Es exactamente el mismo comentario. Entonces después de eso, ejecutamos el comando. Y como ves que NX empieza a ejecutar cualquier producción de construcción de tienda. Ya ves que el Gorman se cambia. Tenemos ahora la producción y va a usar el entorno, los archivos. Por lo que ahora nuestra construcción está hecha. Y como ven aquí, si vamos a docs, tenemos unos nuevos archivos y siempre son algunos hashing por prevenir su dinero en efectivo. Y además, tenemos el índice HTML se actualizó y así los archivos anteriores donde se eliminó. Entonces para eso necesitamos empujar esos archivos. Así que vamos de nuevo a nuestro GitHub Desktop después de que hicimos todos esos cambios. Y luego como ves, se hacen múltiples cambios. Algunos archivos se eliminaron, que son de la antigua compilación, y hemos creado un nuevo archivo. Por lo que necesitamos crear un nuevo mensaje. Podemos darle un nombre como el cambio a la construcción de producción. Entonces en este caso tendremos el cambio a la construcción de producción y lo empujamos a GH Pages, y luego empujamos ese código aquí. En ocasiones recibes este mensaje que necesitas buscar. El remoto cambia. Entonces solo dices tirar de nuevo y luego simplemente puedes empujar de nuevo. Entonces porque a veces GitHub está agregando algunas variables o algunos archivos basados en la compilación con GitHub Pages. Entonces después de eso, hemos desplegado todo. Volvemos a ir a nuestras Páginas de GitHub y nos refrescamos. Tenemos que esperar un rato porque aquí está diciendo que su sitio está listo para ser publicado. Tenemos que esperar un rato hasta que se publique aquí al dominio. De acuerdo, aquí dice que mi sitio web fue publicado. Por lo que voy de nuevo a nuestra tienda de dulces, refresco. De acuerdo, todavía tenemos este problema. Todavía no vemos ni siquiera los archivos se publicaron como se ve aquí en la fuente, todavía
tenemos ese problema. Por lo que necesitamos de alguna manera resolver este problema. Entonces como ves, si recuerdas que estábamos usando en Angular decente archivo para cada proyecto, por ejemplo, tengo aplicación Admin. Estaba viendo cuando se quiere construir la aplicación solo para reemplazar los archivos que se llaman entorno Ts con entorno broad dot ds, UC. Estamos sustituyendo esos expedientes. Y esos expedientes, si recuerdas, hemos editado. Uno es para la producción y otro para el desarrollo. Pero el caso ocurrió sólo para la aplicación admin. También necesitamos hacer lo mismo para la aplicación de tienda NG. Por lo que necesito ir a y tu aplicación de tienda. Yo me desplazaré hasta aquí. Contamos con N D aplicación afilada. Y luego sigue usando la configuración antigua porque no las actualizamos. Entonces cometí este error
por, a propósito solo para mostrarte que si no
tienes porque me dieron un montón de preguntas al respecto anteriormente. Entonces solo asegúrate de que estás reemplazando esto, el viejo. Si vuelves a la conferencia de variables de entorno, debes estar seguro de que tampoco usas el entorno específico de la aplicación, pero usas el que es público y compartido. Entonces tenemos éste aquí. Y luego necesitamos volver a ejecutar el comentario de construcción. Por lo que hay que tener cuidado de que tengamos esto como en el extranjero y luego ejecutar el comentario de producción. Por lo que aquí están construidas terminadas. De nuevo, tenemos que comprometer los cambios, que no tenemos de nuevo. De tal manera que, necesitamos, nuevo, tenemos que hacer un mensaje de compromiso. Podemos decir cambiar archivos, así que podemos decir aquí. Y luego nos comprometemos a GitHub Pages. Empujamos, y tenemos que esperar de nuevo el despliegue de nuestra aplicación. Entonces cuando vaya a GitHub Pages, refresque y voy a ver que se va a construir. Cambiará esto a verde cuando la construcción esté lista. De acuerdo, como ven aquí, se desplegó la aplicación. Vamos de nuevo al enlace de nuestra tienda ND en línea en páginas de GitHub. Nos refrescamos, vemos que no obtenemos ningún error. Por último, así vamos aquí, cerramos la consola, y aquí está nuestra aplicación. Entonces si volvemos a ir al back end o a su red otra vez y
actualizamos, veremos que nuestra red está pidiendo desde aquí o enfriando. Entonces tenemos aquí lo de Heroku arriba. Entonces a partir de esa API, estamos consumiendo nuestros datos. Entonces así es como es muy agradable. Ahora, tenemos toda la aplicación está funcionando. Tengo Agregar al carrito, Agregar al carrito. Voy a mi carrito. Y como ves, la velocidad es muy grande. Es como si estuviera dirigiendo el proyecto en local. Es muy rápido y consume muy buena y formando muy buena. Por lo que de esta manera, construimos la aplicación a las páginas de GitHub para que puedas enviar este enlace a cualquier persona que quieras visitar para tu aplicación. Entonces la pregunta es, yo también quiero construir la aplicación Admin, cómo puedo construirla. Por lo que necesitamos construir la aplicación de la tienda NDI y también la aplicación del panel de administración, que hemos creado previamente. Desafortunadamente, que GitHub Pages está vinculado sólo con un repositorio. Entonces podemos, no podemos crear aquí múltiples páginas bajo un solo repositorio. Entonces para eso, necesitas crear otro repositorio, que puedes llamarlo e-sharp admin. Y en ese caso, podrás desplegar allí tus cambios. O bien puede administrar su implementación de una manera que el GitHub vaya
a utilizar los búferes que se implementan desde su entorno. No tienes que desplegar todo el código, todo el código fuente. Simplemente puedes empujar el código que es generado por los perros. Y esto, lo que podemos ver en la próxima conferencia, lo
voy a hacer frente a ustedes rápidamente.
197. Construir múltiples apP de APP, crear guiones: De acuerdo, en esta conferencia vamos a hacer un proyecto de ley para múltiples aplicaciones. Entonces si quieres primero que no tienes que subir tu código fuente a GitHub. Sólo se puede subir la compilación, producción de su carpeta de proyecto que como les dije, vamos a crear dos repositorios para uno es tienda ND y uno para la aplicación del panel de administración. Entonces, pero primero, necesitamos especificar una ruta que no está dentro del repositorio que he creado dentro de nuestro, como nuestro código fuente, lo
estamos haciendo fuera de nuestro código fuente. Por lo que podemos especificar la ruta en el comentario así. Podemos ir un paso arriba así. Entonces podemos decir salir de la carpeta actual, que ahora es bits azules, esa organización el archivo fuente y crear una aplicación que se llama tienda NG por ejemplo. Por lo que podemos crear este como N G agudo. Y podemos base de baño, que también puede ser tienda NG. Entonces en ese caso, tenemos que estar seguros de crear un repositorio exactamente con este nombre. ¿ Recuerdas eso? Por lo que presionamos Enter y nuestra aplicación se va a construir por sí misma hasta el final de compilación. Aquí ven que estoy dentro de mi carpeta de organización. Entonces necesito ir un paso arriba. Al igual que fuera de nuestro repositorio, no
tienes que ponerlo dentro del mismo de ese repositorio. Entonces, después de que terminara la factura, necesitamos también ir a nuestras carpetas aquí como vemos, e ir un paso arriba. Y veremos que aquí tenemos N D afilado. Por lo que tengo ahora mis producciones de archivos están aquí. Por lo que no necesito tener nuestro subir el código fuente. Entonces éste será, van a crear un repositorio para ello. Por lo que podemos usar GitHub Pages para desplegar este. Entonces, ¿cómo podemos hacer eso? Nuevamente, haremos los mismos pasos que hicimos anteriormente. No vamos a utilizar este repositorio, pero vamos a utilizar uno nuevo. Diremos crear un nuevo repositorio. Por lo que hacemos click en crear un nuevo repositorio. Y este nombre del repositorio será exactamente el mismo nombre de nuestra carpeta. Entonces tenemos aquí N D afilado, como les dije anteriormente, y donde tenemos que elegir el camino, será exactamente en la misma ruta aquí. Entonces en un paso arriba de nuestro archivo fuente donde se despliega por lo que no puedo ver la carpeta. Yo no entro por dentro. No, no puedo ver la carpeta en sí aquí. Por lo que hago clic en Abrir, mismo nombre aquí, hago clic en Crear Repositorio. Y en ese caso, tendremos creado nuestro repositorio. Y entonces sólo tenemos que decir Publicar repositorio. Mantenemos el mismo nombre. Y además, decimos Publicar repositorio, pero necesitamos hacerlo público. En ese caso, te mostraré que si voy ahora a mi cuenta de GitHub, no
tendré el código fuente en esa categoría. Por lo que puedo guardar mi código anterior de la fuente como este que creamos para la e-shop. Podemos mantener este como privado. No hay que ponerlo en público, sino un nuevo repositorio el cual se crea, como ven aquí vamos a repositorios. Y entonces tendré N D afilado aquí. Entonces, como ven, sólo tengo esos archivos fuente aquí. No lo siento, los archivos de producción. Aquí no tendremos el código fuente y es público. Entonces no me importa porque están hashed y se minimizan como ves aquí, lo cual no es fácil para normal o para los usuarios volver a recuperar mi código fuente. Entonces de esta manera, voy a la sesión y luego voy a las páginas. Y entonces diremos que la fuente será como Directorio, puede decir principal, y luego la raíz misma. que no tengas que usar la carpeta docs, puedes decir ruta porque construimos directamente en la raíz de ese proyecto. Por lo que solo necesitas especificar el camino y así la rama. Entonces lo guardo en la sucursal principal porque solo tenemos una marca, claro que puedes crear otra planta, pero en este caso no necesitamos porque solo tenemos los archivos de producción. Y después de eso, esperamos hasta que se publique su página web. Nosotros decimos, está bien, tu sitio está publicado. Vuelvo a ir aquí a la página web y lo voy a ver producido previamente. Y aquí el camino que es tienda ND. que pueda volver a nuestro repositorio, que tenía para el final usted compra y puedo cerrarlo, puedo hacerlo privado. Por lo que tenemos sodio para la prueba anterior que hicimos antes. Entonces la E afilada, voy a hacerlo como privado para que no puedas volver a Ajustes. Se puede decir que aquí seguridad o administrar el acceso. Y luego vuelves a poner tu contraseña. Tengo aquí confirmar contraseña. Y luego cambiaré el repositorio de acceso para no ser público, pero quiero ponerlo como privado. Iré aquí para cambiar la visibilidad del repositorio. Lo pondré como privado. Y entonces entiendo este cambio. Simplemente copiamos esta parte. Entonces en ese caso, nadie verá mi Por
ejemplo, el código fuente, porque ya tengo repositorio para el público o
el código de producción que se publica para página publicada o páginas de GitHub. Entonces hagamos lo mismo otra vez para la aplicación admin. Entonces, en primer lugar, necesitamos volver a usar el mismo comentario, pero no con tienda NDI. Lo vamos a hacer con la aplicación Admin. Pero déjame mostrarte un truco. No necesariamente siempre es hacer este comando. Siempre, siempre. Podemos hacer un peso como podemos guardar este comentario en paquete JSON dentro de mi proyecto. Al igual que podemos crear una nueva construcción para aquí. Entonces podemos decir, por ejemplo, creo un nuevo script en el paquete JSON. Digo, por ejemplo, construir amplio, por ejemplo, de esa manera, como admin. Por lo que podemos decir panel de administración, aplicación de panel de administración. Y el comentario para eso será exactamente el comentario que usamos aquí. Pero necesitamos reemplazar eso por admin y así aquí con admin también. Y digo que NX construya la aplicación Admin, no el producto o la aplicación. Lo mismo que podemos hacer también por nuestra M construida a partir de una tienda N D en sí. Para que no tengas que guardar este comentario de alguna manera. Se puede decir, trajo construir un administrador orgulloso toda barba en el extranjero. El aplicativo que es N G agudo por ejemplo. Entonces en ese caso no tienes que escribir todas estas líneas no son un comentario. Entonces arreglamos eso. Elegimos aquí otra coma. Lo guardamos todo. Y ahora voy a ejecutar el comando que tengo para como la producción construida para el admin. Entonces, ¿cómo podemos hacer eso? Simplemente digo npm run y especifico el comando que quiero ejecutar. Diré construir, pero impar. Y luego admin. Y luego veremos que se va a ejecutar este comentario, que es tan grande para mí. Entonces después de eso, se construyó la aplicación, pero la administradora. Entonces vamos de nuevo a nuestro escritorio GitHub y creamos un nuevo repositorio. Los mismos pasos que hicimos con la tienda NDI. Entonces iré aquí. Veré todos mis repositorios. Este contiene mi código fuente, éste contiene la tienda NG, pero la factura de producción. Y voy a añadir otro para la construcción de producción admin. Entonces aquí tenemos que crear otro nombre, admin, exactamente los mismos nombres, cómo los construimos previamente. Comprueba el camino. Creo que ya está construido. Tenemos aquí el admin build. Y de nuevo, vamos a crear el repositorio. Y vemos que se creó nuestro repositorio. Publicamos el repositorio y luego necesitamos hacerlo como público. No tenemos que mantenerlo como privado. Entonces creamos o publicamos el repositorio que queremos. Y luego vamos a nuestra cuenta de GitHub y vamos a nuestros repositorios. Volveremos a ver el repositorio de administración aquí. Por lo que voy a dar clic en él. Veré eso construido para eso. Iré por la configuración, iré a las páginas. Y luego en las páginas elegiré la rama principal y luego la carpeta raíz. Y luego voy a dar click en Guardar. Después de eso, el sitio web se está preparando para ser construido. Y luego lo revisaremos en la aplicación admin cuando esté lista. Por lo que el sitio se publica en este enlace, hacemos clic en él. De acuerdo, Tenemos el admin y todo está bien. Intentemos iniciar sesión. Tendré aquí mis credenciales. Por lo que tenemos aquí mi contraseña, doy clic en Enviar. Agradable, tengo aquí el admin, exactamente cómo lo tenemos en nuestra aplicación cuando lo estábamos desarrollando. Y todo está funcionando a la perfección y sin problemas. Entonces todo esto se trata de la construcción de producción. Si quieres que haga para ti la aplicación para que se ejecute en servidor personalizado usando FTP. Creo que esto es va a ser fácil para ti. Si quieres que haga un video, puedes enviarme un mensaje o puedes agregar alguna pregunta en QA. Y voy a añadir un video para la carga FTP para que veas cómo podemos construir nuestra aplicación en servidor personalizado, no en GitHub Pages. Yo también voy a adjuntar este paquete de archivos JSON, cómo se actualizó con esos comentarios. Por lo que puedes usar esos comentarios también para construir tu aplicación.
Alex Bakker, Web, A.I. and Mobile Development
