Vue. js: Crea una aplicación de pila completa con Firebase, Vuex y Vue Router

1. ¡Te damos la bienvenida al curso!: Bienvenido a este curso. Es genial tenerte aquí. Mi nombre es Chris. Soy desarrollador web y creador de cursos online impartiendo clases a miles de estudiantes de todo el mundo. He creado este curso para llevar a todos ustedes habilidades de JavaScript al siguiente nivel. Aquí en este curso, vamos a construir una aplicación de pila completa utilizando Vue.js, uno de los frameworks front end más populares disponibles en la actualidad. Estaremos construyendo una aplicación de pizzería donde un usuario puede realizar pedidos desde nuestro menú de restaurante. Además, tendremos las facilidades para que el dueño del restaurante ingrese a una sección de administración. Esta sección nos permitirá agregar o quitar artículos de nuestro menú, ver cualquier pedido actual, y también eliminar pedidos cuando se completen. En este proyecto se utilizará el último Cloud Firestore de Firebase para el back-end de nuestra aplicación, que se utilizará para almacenar todos los elementos del menú junto con cualquier pedido. También aprovecharemos Firebase para la autenticación. esto sólo permitirá a los usuarios autorizados entrar en nuestra sección de administración, junto con ciertas reglas de seguridad también. También mantendremos sincronizada una tienda Vuex local con Firebase para administrar el estado de nuestra aplicación. Esto nos permitirá acceder y gestionar toda la información que necesitamos fácilmente en un solo lugar central. También aprenderás sobre el Vue Router, que se utiliza para administrar la navegación entre páginas en nuestra app. Aquí, aprenderás muchos conceptos como agregar guardias de navegación y definir el comportamiento de desplazamiento por nombrar algunos. Incluso pasamos a algunos conceptos más avanzados, como la carga perezosa y la separación de código, para hacer que la aplicación se cargue de manera más eficiente. El estudiante ideal para este curso será alguien cómodo construyendo sitios web con un poco de conocimiento de JavaScript, experiencia de Vue.js, o incluso otro framework o biblioteca como React será una ventaja, aunque intentaré dejar las cosas lo más claras posible para las personas nuevas en Vue.js. Este curso es ideal para estudiantes que buscan ver cómo encaja todo en una aplicación telefónica real. Al final de este curso, te convertirás en aplicaciones full stack usando Vue.js y Firebase. Date de alta ya y espero verte en el curso. Lleva tus habilidades Vue al siguiente nivel. 2. Lo que necesitarás para este curso: Para este curso, solo hay unas cuantas cosas que necesitarás, y todas son gratuitas de usar y descargar. Probablemente ya tengas la mayoría de ellos ya. En primer lugar es el acceso a una terminal. Si estás usando un Mac, puedes usar un terminal integrado. Para acceder a esto puede utilizar la búsqueda de focos pulsando juntos el comando y la tecla de espacio. Después busca escribiendo en la terminal. Si estás usando Windows, puedes usar un programa como el PowerShell, que viene enviado con Windows. Esto se puede encontrar escribiendo PowerShell en la barra de búsqueda de Windows. No te preocupes si no estás familiarizado con la terminal. Sólo necesitamos unos cuantos comandos y los haremos juntos cuando lo necesitemos. También necesitarás un buen editor de texto web. Para este curso, estaré usando el Código de Visual Studio. Esto también cuenta con un terminal incorporado, lo que nos facilitará aún más las cosas. Ya que usaremos bastante una terminal durante el proyecto. Pero claro, siéntete libre de elegir cualquiera que prefieras. También necesitaremos Node.js y npm instalados también. Estos fueron descargados de nodejs.org. Ya tengo Node.js instalado. Si no lo haces, sigue adelante y haz clic en la última versión y descarga para tu sistema operativo en particular. Download Node también instala la última versión de npm2, que es un gestor de paquetes de nodos utilizado para descargar paquetes JavaScript, que utilizaremos a lo largo de este curso. Siguiente arriba es el Vue CLI. Si vas a github.com/vuejs/vue-cli. Podrás encontrar alguna información más sobre lo que es la CLI Vue. Deberá descargar Nodes antes de hacer esto, ya que Node es un requisito para la CLI de Vue. El Vue CLI o interfaz de línea de comandos, es una herramienta que nos permite andamiar rápidamente aplicaciones Vue js con un comando de terminal rápido. Cuenta con varias plantillas las cuales podemos utilizar para crear aplicaciones a partir de una sola página HTML, a la derecha frutas complejas configuraciones de paquetes web. Estaremos usando una versión de paquete web simple cuando un venga a este episodio. Cubriremos la instalación de la CLI Vue pronto al iniciar este proyecto. No obstante, si quieres leer a través de esta guía para conocer más sobre las plantillas, o incluso seguir adelante e instalar. Siéntase libre de hacer esto ahora, si no, continúe, y pronto lo instalaremos. 3. Configuración de proyectos con Vue-CLI: Voy a estar creando este proyecto usando una vista CLI para crear rápidamente nuestra nueva aplicación. Si no has utilizado la vista CLI antes, Es una gran herramienta para andamiar rápidamente fuera de la aplicación y ponerte en marcha con view project realmente rápido. Incluye todo lo que necesitamos para ejecutar aplicaciones de vista, incluyendo esto a enlaces como paquete web, y nos da opciones para instalar otros plug-ins como bubble y Linda. Si ya tienes esto instalado, eso es genial y continúa. De lo contrario, deberá ejecutar un comando en la terminal para configurarlo. Voy a estar usando el terminal incorporado con código Visual Studio, y por supuesto puedes usar un terminal independiente si lo prefieres. Dirígete al código de Visual Studio. Ya tengo la terminal abierta en la parte inferior. Si no haces clic en las Opciones en la parte superior de la pantalla, ve a terminal y luego nueva terminal. Voy a instalar una vista CLI globalmente, por lo que está disponible para todos los proyectos y usando npm. El comando que necesita es npm tengo install dash g flag, por lo que esto se instala globalmente. Entonces el paquete que necesitas es @ vue /cli dio a esto unos momentos para instalarlo, y luego te veré cuando esto se haga. Con el vue cli ahora instalado podemos usar esto para crear nuestro nuevo proyecto dentro de la terminal de nuevo, actualmente estoy dentro del directorio root user. Voy a usar el comando cd para cambiar al escritorio. Aquí es donde voy a añadir el proyecto. Por supuesto, puedes usar cualquier ubicación de tu elección para frenar este proyecto. Podemos entonces inicializar el proyecto en una terminal usando la vista de comandos crear. Entonces el nombre de nuestro proyecto, que voy a llamar la pizza - planeta. Entró para crear nuestros proyectos. Voy a empezar con la burbuja por defecto y sí lente, hit” enter”. Esto aprenderá instalar los plugins que se requieren, así que una vez más, volveré una vez que esto se haga. Con esto ya terminado, ahora deberías tener la carpeta del proyecto en el escritorio aquí. Voy a seguir adelante y arrastrar esto hacia Visual Studio Code, que detectará automáticamente las nuevas fotos de ruta de archivo y agregará esto dentro de la terminal. Significa que no necesitamos cambiar directorios a esta nueva carpeta y una vez más, voy a abrir la terminal ya que esto se ha reiniciado, nosotros en la carpeta pizza planet. Todo lo que necesitamos hacer ahora es comenzar nuestro servidor de desarrollo usando el comando npm, ejecutar servir. Empecemos esto. También voy a abrir el navegador donde podemos acceder a esto usando nuestro host local. Podemos ver aquí nuestro host local se está ejecutando en el puerto 8080, así que voy a comando o controlar click en esto, luego abre esto dentro del navegador. Esta es la vista predeterminada que vemos al usar view CLI y si ves esta página, todo está funcionando bien. Voy a entrar al directorio fuente donde se almacenen los archivos vue, luego entrar a la app principal vue y solo hacer un poco de trabajo de limpieza con este archivo. Voy a quitar la imagen y los componentes de HelloWorld. También podemos quitar este componente Helloworld ya que estaremos creando el nuestro propio y también la referencia HelloWorld de nuestra instancia vue. Este div dentro de nuestra plantilla es donde podemos agregar cualquier contenido que quieras aparecer dentro de nuestra app. Empecemos agregando elementos “p”. Entonces dentro de aquí simplemente podemos saludar, guardar este archivo y dirigirnos al navegador y cualquier cambio se actualiza automáticamente. A continuación, voy a agregar las imágenes a nuestra carpeta de activos, por lo que estas ya cuando las necesitamos. Se han proporcionado las imágenes con este curso, y las tengo disponibles en el escritorio. Puedes, por supuesto, usar un conjunto diferente de imágenes si lo prefieres, o seguir junto con las exactas que estoy usando. Abramos la barra lateral y nos dirigamos a nuestros activos, que están dentro de la fuente. Podemos agarrar la carpeta de imágenes y arrastrar esto por aquí dentro, y todas nuestras imágenes ya están disponibles cuando las necesitamos. Por supuesto necesitamos una carpeta de componentes para y esto ahora se crea automáticamente fotos al usar la CLI vue. Para empezar, voy a agregar algunos componentes los cuales van a ser un solo archivo. Vamos a hacer clic en los componentes, añadir un nuevo archivo, y el primero va a ser el hogar.vue. El segundo va a ser foto header.vue. También podemos eliminar el ejemplo de HelloWorld por la eliminación. Ya que no necesitamos esto para nuestro proyecto, tenemos esto en su lugar. Pasemos al siguiente video, donde comenzaremos a agregar algún contenido a estos nuevos componentes. 4. El componente del encabezado: Voy a empezar con los componentes de encabezado que creamos en el último video, cuales tendrán nuestro logotipo, nuestro título de sitio, junto con algunos enlaces a otras páginas. Dentro de este encabezado.vue, empecemos por crear nuestra plantilla, que va a contener un elemento de encabezado. En la parte superior de nuestro encabezado vamos a tener un div, que va a ser un logo de burbuja de rapero, además, nuestro título de sitio. Podemos agregar una clase a nuestro div. Podemos enlazar esto con el CSS en tan solo un momento de logo de cabecera. Dentro de aquí, lo primero que voy a hacer es agregar nuestra imagen y la imagen que se está incluyendo dentro de los activos en la carpeta de imágenes, va a ser para el planet.jpg, así que voy a vincular esto. Esto es de los activos../barra inclinada, la carpeta de imágenes y el nombre de planet.jpg. A medida que el texto antiguo voy a añadir un icono de planeta pizza, seguido de un encabezado de nivel uno, que va a enlazar a nuestra página de inicio. Podemos agregar el href como barra hacia adelante y luego el título de PIZZA PLANET. Justo después de nuestro div circundante con nuestro logotipo, podemos entonces agregar nuestros enlaces a diferentes áreas o diferentes componentes de nuestra aplicación. Añadamos estos dentro de un elemento nav. Para empezar, voy a codificar otra lista hasta que estemos al frente y enrutar más adelante en el curso usando el router de vista. El listado desordenado, el primer elemento de lista, que también va a ser un enlace, va a enlazar a una ruta Inicio de barra inclinada hacia delante. El nombre del enlace del hogar. cada enlace, voy a añadir un elemento span con el icono de Tilda para separar cada uno. Al siguiente voy a copiar el span y también el ítem de lista. Pega esto en. Este es un enlace a nuestros componentes de menú, que es hacia adelante/menú. El siguiente es para la página de contacto. El href es simplemente adelante/contacto. El último es para el sobre este enlace. Añadamos esto en. Esto no necesita el lapso. Vamos a mover esto. El texto de sobre nosotros. El href simplemente se adelante/acerca. Lo siguiente que necesitamos para nuestro encabezado es agregar los scripts. El único que necesitamos agregar por ahora es el nombre de nuestros componentes. El nombre va a ser el encabezado de la aplicación. Lo siguiente que quería hacer después de la plantilla y el script es agregar también la sección Estilo donde podemos agregar estos estilos para el encabezado. También incluya estas palabras clave con alcance, lo que significa que los estilos solo se aplicarán a estos componentes únicos y no para el resto del sitio. Empecemos seleccionando nuestro encabezado de nivel 1, que es para el título del sitio. Podemos hacer que el tamaño de la fuente sea un poco más grande. Yo quiero que el mío sea 1.3 ms. Cuando creamos nuestra plantilla justo arriba, rodee un subtítulo interior y también nuestro logotipo. Tenemos este div con la clase de logo de cabecera. Voy a usar esta clase para agregar un gradiente lineal, que va a conformar algunas rayas como imagen de fondo. Vamos a agarrar esto. Justo debajo de nuestra H1. Podemos tomar esto como una clase configurando la imagen de fondo. El fondo de la imagen va a ser un gradientes lineales. Para configurar nuestras franjas en un ángulo de 45 grados separarlo por coma, ahora también necesitamos agregar las etapas en las que van a aparecer los colores. Voy a cambiar entre dos colores para crear los efectos de raya. En el primer color, que voy a agregar es un valor x de d85226 y luego 25 por ciento. Esto básicamente significa que el inicio del gradiente de cero hasta 25 por ciento consistirá en este color. Podemos entonces agregar nuestro segundo color, que va a ser el valor de f79e38. Este color se va a aplicar del 25 por ciento al 50 por ciento. El segundo cuarto del gradiente, para el tercer trimestre, vamos a cambiar de nuevo a nuestro color original. Añadamos lo mismo. Esto va a ser del 50 por ciento hasta el 75 por ciento. Para el último cuarto del gradiente, vamos a cambiar de nuevo a nuestro color más claro. Añadamos esto en. Esto lo vamos a ejecutar desde 75 por ciento en adelante. Podemos entonces rematar nuestro gradiente con el mismo color. Esto correrá hasta el final de los gradientes, que es del 100 por ciento. Podemos entonces especificar el tamaño con la propiedad de tamaño de fondo, que voy a establecer en un valor de 80 píxeles. Después 80 pixeles. El tipo de pantalla va a ser flex. Por lo que en esto, el flex nos permitirá agregar la dirección del flex a ser columna, lo que permitirá que nuestros artículos se apilen uno encima del otro. Obtenemos el logo del sitio encima del título del sitio. También podemos agregar la propiedad align items, establecerlos en el sensor. Entonces finalmente termina las cosas con un poco de relleno en la parte superior de algunos píxeles. Mantén esto alejado de la parte superior del navegador. Pero agregamos más estilos. Añadamos esto a nuestra app.vue. Por lo que podemos ver esto dentro del navegador. Recuerde, todos los archivos que creamos son componentes independientes de un solo archivo. Lo que significa decirle a una vista exactamente dónde queremos que esto aparezca dentro de nuestros proyectos. El app.vue es nuestros principales componentes y podemos usar esto como envoltorio para todos nuestros componentes. Para comenzar por la parte superior de nuestros scripts, necesitamos agregar una importación donde importamos nuestro encabezado desde la ruta de archivo componentes de barra de puntos y ese encabezado. Necesitamos una propiedad de componentes que ya tenemos del contenido proporcionado cuando creamos esto con la vista CLI. Entonces dentro de aquí podemos agregar el encabezado de la aplicación, que va a ser igual al encabezado que acabamos de importar. Por lo que al registrar componentes dentro de un vue, no debemos usar un nombre de elemento reservado como encabezado. Entonces lo que estamos haciendo aquí es configurar el componente del encabezado para que sea un alias del encabezado de la aplicación. Por lo tanto podemos referencias arriba tenían un bucle en nuestras plantillas donde queremos que esto aparezca en la pantalla. Por lo que podemos mover esto y agregar dentro de minúsculas el encabezado de la aplicación con una apertura y un elemento de cierre. Alternativamente, podemos usar una etiqueta de cierre automático así como esta. Esto también funcionará. Estoy teniendo error apareciendo aquí, y es la ruta del archivo desde el encabezado. Sólo arreglemos esto. Se supone que este es PNG. Entonces guarde esto. Ahora podemos ir al navegador. Ahora vemos aparecer nuestro logotipo con los gradientes lineales de fondo. También tenemos el título del sitio y también nuestros enlaces de navegación justo aquí. Tan solo para terminar este video apagado, agreguemos un poco de estilo al resto de estos enlaces y también podemos hacer que el logo sea un poco más pequeño. Por lo que de vuelta al header.vue. Podemos desplazarnos hacia abajo a nuestros estilos. Empecemos por apuntar a la imagen del logotipo del encabezado. Por lo que tenía un logotipo, podemos agarrar el elemento de imagen y luego establecer el valor p máximo de ancho de 25 vw, que es el 25 por ciento del ancho del puerto de vista. Siguiente Estoy estilizando para todos los enlaces en la parte inferior, podemos agarrar la lista desordenada. Establece el relleno para que sea un valor de 10 píxeles en la parte superior e inferior, cero en la izquierda y la derecha. También podemos seleccionar los elementos de la lista y también establecer la pantalla para que sea inline-block. Guarda esto. También vamos a agregar finalmente una consulta de medios, que va a hacer que esta imagen sea un poco más pequeña cuando lleguemos a 900 píxeles en adelante. Añadamos esto justo después de nuestro ítem de lista. En medios, vamos a apuntar a estas pantallas que tienen un ancho mínimo de 900 píxeles. Entonces podemos apuntar a nuestra imagen de logotipo de cabecera, que acaba de tener aquí. Podemos sumar esto dentro y bajar esto a un valor de 20 vw. Por lo que ahora en una pantalla más pequeña, este es un cuerpo de 25 por ciento. Podemos aumentar a 900 píxeles. Después vemos que la imagen cae para hacerla un poco más pequeña. Esto es todo. Ahora para nuestro encabezado, volveremos a estos componentes más adelante cuando agreguemos un enrutamiento front-end. Pero por ahora pasemos a nuestra página de inicio. 5. Componente de la página de inicio: Ahora es el momento de agregar los contenidos al archivo de componentes de la página de inicio. Como podemos ver aquí a partir de esta versión final terminada, estará agregando la sección Bienvenida, que es esta sección justo aquí. Esto enlazará a nuestro Menú cuando el usuario haga clic en el botón “Pedimos”. Si retrocedemos, justo debajo de esta sección podemos tener también tres secciones separadas, que es el pedido, la información de entrega y la sección de historial. Estos bloques de información son en realidad componentes separados y esto nos permitirá reutilizarlos más adelante. Podemos cambiar entre ellos, cuando configuramos el router de vista. Entonces por ahora vamos a dejar fuera estos tres componentes, y solo concentrarnos en esta sección justo aquí. Vayamos al home.vue, que es componente que ya hemos configurado. Podemos empezar por crear en nuestra plantilla familiar y luego anidados dentro aquí, voy a agregar dos divs. Entonces el primer div va a ser el envoltorio. Esta va a ser la envoltura de fondo, que va a ser el contenedor circundante, donde podemos agregar una imagen usando CSS, anidada aquí adentro vamos a tener un envoltorio de superposición de fondo, que va a ser para la caja en el centro. Entonces este primero. Añadamos la clase de fondo esto es para la imagen. El segundo div, esto es para la caja con la clase de superposición de fondo. Por lo que dentro de la superposición de fondo, vamos a empezar con el encabezado de nivel dos, que es el texto de Welcome to Pizza Planet. Después de esto, agregamos nuestra imagen, que es la imagen de rodillo que acabamos de tener aquí. Añadamos la imagen dentro de aquí, que es la fuente de../. Esta es la carpeta Activos en las imágenes y el roller.png. También podemos agregar las etiquetas alt de roller y luego seguidas del encabezado nivel tres, que es el texto de, “¿Te sientes hambriento?” Pero ahora solo vamos a agregar un botón simple, este botón se conectará más adelante cuando agreguemos el router vue. Entonces por ahora sólo vamos a añadir un botón h. Podemos agregar una clase para peinar de orden- btn y el texto “¡Vamos a ordenar!” Por lo que este es todo el contenido para nuestras plantillas. Justo antes de seguir adelante, también podemos agregar nuestro script y dentro del script todo lo que vamos a hacer es agregar un nombre para nuestros componentes dentro de los valores predeterminados de exportación con el texto de home. Guarda este archivo. Al igual que hicimos con el encabezado, podemos anidar está dentro del archivo app.vue y registrar este componente Home. Ve a la app.vue, bajemos. También podemos importar casa, de nuestros componentes, que es./ Componentes y luego a casa. Entonces necesitamos registrar esto agregando esto a los objetos componentes. Podemos agregar un componente igual que hicimos aquí, donde lo importamos por un nombre como encabezado u otra forma de hacerlo es usar el nombre que usamos al importar, así que solo a casa y esto está bien si no hay conflictos de nomenclatura con HTML elementos. igual que al principio cuando lo hicimos con el encabezado, este es un nombre de elemento HTML, por lo tanto tuvimos que dar este alias de cabecera de aplicación. Entonces ahora tenemos esto importado. Podemos subir a la parte superior, justo debajo del encabezado de la app, podemos agregar nuestro hogar dentro de aquí. H, guarde este archivo. Voy a revisar esto se está mostrando dentro del navegador, dice que tengo un componente ahora mostrado en la página de inicio. Iremos y agregaremos un poco de estilo en tan solo un momento. Por ahora sin embargo, voy a quitar el espacio en blanco que está en la parte superior de la app.vue, así que vamos a desplazarnos hacia abajo. Podríamos eliminar el estilo predeterminado que se proporciona donde dice sobre los proyectos. Esto ahora empuja el encabezado de nuevo a la parte superior y ahora podemos ir todos al hogar.Vue, podemos configurar nuestras etiquetas de estilo. Voy a quitar la bandera de alcance y luego comenzar con nuestros encabezamientos. Nos desplazamos hacia arriba, tenemos un nivel dos y también un nivel tres rumbo. Empecemos con estos y tecleemos el h2 y también el h3 y sumemos algún margen de dos por ciento. Justo después de esto, podemos entonces apuntar al fondo, que es el contenedor principal. Aquí es donde vamos a agregar la imagen de fondo, que va a ser, y vamos a echar un vistazo a la versión final, esta imagen, como vemos aquí. Seleccionemos el fondo. En primer lugar, queremos establecer la imagen, que podemos hacer con la propiedad de fondo, estableciendo la URL y luego pasando en una ruta de archivo. El camino final que queremos es. /, esta es la carpeta Activos Imágenes, y luego la imagen que quieres es dough.jpg también podemos centrar esto. A continuación, establezca el tamaño de fondo para cubrir. Si guardamos esto y pasamos al navegador, ahora tenemos la imagen de fondo. Voy a establecer la altura para ser, 30vh. Que es el 30 por ciento del puerto vue o la altura del navegador. Establezca el tipo de visualización para utilizar el flexbox. Podemos alinear el texto en el centro. Entonces, finalmente, también podemos alinear nuestra caja en el centro también y vamos a alinear esto verticalmente usando alinear elementos, esta es una propiedad flexbox y queremos establecer el valor para estar en el centro. Por lo que ahora podemos pasar a la superposición de fondo real, que es el texto y también la imagen y el botón. Justo debajo del fondo. Esta es la superposición de fondo. Donde también queremos hacer uso del tipo display de flex. Podemos establecer la dirección del flex para que sea columna, para abastecerlos verticalmente. También necesitamos un fondo, por lo que esto es más visible sobre la imagen de fondo. Voy a usar un valor de f1e6da. Por lo que todavía se puede ver la imagen de fondo. También voy a sumar el valor positivo de 0.8, para que esto sea ligeramente transparente. Podemos ver esto justo aquí. Podemos controlar el ancho. Voy a usar un valor del 50 por ciento. Centra esto con margen cero auto. Algún relleno en el interior de cinco píxeles. Mantengamos el texto alejado del borde interior. De acuerdo, así que todo está centrado en norrow. Necesitamos reducir el tamaño de esta imagen en rollo. Por lo que vamos a entrar de nuevo dentro de la superposición de fondo, seleccionar la imagen y podemos decir que el ancho máximo sea un valor de 15 por ciento. Apenas ahora necesitamos empujar esto de nuevo al centro. Podemos hacer esto con el flexbox back up en la superposición de fondo. Pongo en alinear elementos, para estar en el centro. Ahí vamos, y luego finalmente vamos a apuntar al botón Orden y darle a esto un color de fondo diferente y también algo de relleno. Entonces justo al final de nuestras hojas de estilo. Le dimos a este botón la clase de orden cuando esta llama a nuestro btn, que es esta clase justo aquí. Entonces vamos a agarrar esto, sumar esto en. Empecemos primero con el color de fondo, que va a ser f79f38, un radio de borde y queremos mantener este pequeño, por lo que un valor de tres píxeles está bien, algún margen en la parte inferior de 10 píxeles. Algún relleno para hacer el balón en un poco más grande de 10 píxeles. Después podemos seleccionar el cursor para que sea un puntero. Entonces guarde esto y diríjase a los proyectos. Ahora tenemos el color de fondo, el borde radio y nuestro cursor ahora está cambiando a un puntero. Por lo que esta es ahora nuestra configuración básica de la página de inicio y se muestra en el navegador. En la siguiente sección, nos enfocaremos en conseguir nuestro menú y nuestra cesta de la compra toda la configuración para recibir datos de Firebase. 6. Creación del componente del menú: Cuando creamos nuestros componentes de encabezado, agregamos un enlace al menú. Este componente de menú en el que vamos a empezar ahora a trabajar, eventualmente será donde jalemos todos los elementos de menú de nuestra base de datos. Si echamos un vistazo a la versión final y nos dirigimos al menú, estos ítems se enumerarán en el lado izquierdo, los cuales el usuario podrá seleccionar qué piezas desea pedir. Posteriormente se sumarán a la canasta de en el lado derecho, que también puede aumentar o disminuir la cantidad y luego finalmente hacer el pedido. Este pedido también será empujado a Firebase y también estará disponible desde nuestro administrador. Tanto los elementos del menú como también los pedidos se mantendrán sincronizados con una tienda central dos dentro de nuestra aplicación, que le echaremos un vistazo más adelante. Ahora agreguemos los componentes menu.vue dentro de nuestra carpeta de componentes. Entremos a la salsa, dentro de los componentes. El menu.vue. La primera parte es crear nuestra plantilla, que sólo será una tabla HTML para mostrar nuestros datos. Esta mesa será utilizada para exhibir nuestras pizzas con los nombres y opciones disponibles. Esta solo será información estática por ahora hasta que podamos trabajar con Firebase más adelante. Para empezar, agregamos nuestras plantillas, luego dentro podemos agregar un div, que va a tener la clase de menú en el envoltorio del cielo. Dentro de este div, esto va a tener nuestro menú y también las canastas. Por ahora voy a tener un comentario del menú para que podamos ver claramente qué sección es esta. Podemos entonces añadir un div con una clase de menú. Dentro de aquí vamos a tener un encabezado de nivel tres, que será el texto de la auténtica pizza hecha a mano, entonces pondremos nuestra mesa, que tendrá algunos datos de muestra en por ahora. Nivel tres rumbo, voy a rodear esto dentro de la tilde's, tan auténtica pizza hecha a mano. Entonces podemos configurar nuestra mesa justo debajo. No vamos a tener un encabezado de tabla, así que sólo voy a saltar directamente al cuerpo de la mesa. Dentro del cuerpo de la mesa, vamos a configurar filas de mesa libres. El primero va a ser para el título de pizza, una segunda fila para la descripción, y luego una tercera fila que va a ser para las opciones. Dentro de la primera fila de tabla, podemos agregar nuestros datos de tabla. Entonces dentro de los datos de la tabla, voy a agregar estas etiquetas fuertes para hacer esto audaz, y luego un nombre de pizza dentro de la tilde. Voy a añadir pepperoni, seguido de una tilde al final también. Esta es nuestra primera fila. El segundo va a ser para la descripción. Agrega una nueva fila justo debajo los datos de la tabla y luego estas van a ser las pequeñas etiquetas para hacer esto un poco más pequeño, voy a añadir algo de Lorem Ipsum. Si estás usando Visual Studio Code, puedes escribir la palabra Lorem y luego presionar Tab, o puedes agregar cualquier dato de muestra que quieras, realmente no importa ya que esto se extraerá de Firebase muy pronto. Después de esta fila de tabla, vamos a crear una más, que va a ser para nuestras opciones. Nuestros datos de mesa que comienza con una pizza de nueve pulgadas. Justo debajo, también podemos agregar el precio. Voy a agregar 695 seguido de un botón, así que td, y luego dentro de aquí podemos agregar nuestro botón, que será el símbolo más para agregar esto a nuestras cestas. El botón necesita un tipo de botón y también una clase para el CSS, que alguna vez llamamos btn subrayado verde, un símbolo derecho más. Por el momento no tenemos forma de decir vista que queremos que estos componentes se muestren cuando hacemos clic en las rutas del menú de la slash hacia delante. Dado que todavía no tenemos una configuración de router, como medida temporal, podemos añadirlo al archivo app.view, para que podamos ver que está dentro del navegador. Empecemos importando esto, justo debajo de los componentes del hogar. Queremos nuestro menú, nuestro menú desde aquí. También podemos registrar esto justo debajo de la casa, y luego agregar esto arriba dentro de nuestra plantilla. Echemos un vistazo a esto. Por dentro del navegador, así que allá vamos así tenemos nuestro título, tenemos nuestro título de pizza, nuestra descripción y también la opción justo debajo. Esta opción será un bucle, por lo que más adelante cuando utilicemos la base de datos, revisaremos las opciones disponibles y mostraremos los diferentes tamaños y precios. Simplemente corregiré el error ortográfico dentro del menú. Ahí vamos. Con esto ahora en su lugar, ahora podemos agregar algo de estilo a nuestros componentes de menú. Gira la cabeza hacia el menu.vue. Entonces podemos desplazarnos hacia abajo hasta la parte inferior. Podemos configurar nuestras etiquetas de estilo. Voy a dejar esto como ámbito para este componente, lo que esto sólo aplica a este único archivo más bien en el resto del proyecto. Empecemos con nuestro encabezamiento de nivel tres, que es el auténtico título de pizza hecha a mano. Todo lo que necesitamos hacer aquí es establecer el text-align, su ser en el centro. Siguiente abierto ido al objetivo, la envoltura de menú. Recuerda que el contenedor de menús va a ser el contenedor principal. Subiría a la cima. Esto va a rodear nuestro menú y también las cestas. Si echamos un vistazo a la versión final, esto va a significar si nos desplazamos esto hacia abajo, que el menú y también la canasta se apilarán verticalmente en una pantalla más pequeña, entonces vamos a agregar una consulta de medios, para que estos aparezcan lado a lado. Bajemos y empecemos esto ahora. Para ello, podemos cambiar el tipo de visualización para que sea flexbox, y luego en la pantalla más pequeña podemos establecer la dirección del flex para que sea columna. Agregaremos una consulta de medios cambia de nuevo a fila muy pronto. Vamos también apuntar al menú, que es el lado izquierdo. Voy a establecer el color de fondo para que sea un valor de F1, E6, DA, un radio de borde, que va a ser de tres píxeles. También podemos hacer de esto la altura completa del navegador enviándolo a ser un 100 vh. Por el momento, se ve bastante pequeño porque queremos conseguir un elemento, pero podemos hacer que esto vea altura completa al navegador incluso sin el contenido. Esta tiene que ser propiedad de altura para ser de 100 vh, algún margen de diez píxeles, agregar algo de espaciado, y también algún relleno de diez píxeles, el interior del menú. Guarda esto, desplázate hacia abajo y ahí está nuestro menú. Ahora solo necesitamos agregar una consulta de medios para hacer de esto una fila en los greens más grandes. Todavía dentro de las etiquetas de estilo, podemos agregar la consulta de medios, que va a apuntar a las pantallas que tienen un ancho mínimo de 900 píxeles. Entonces todo lo que queremos hacer aquí es agarrar la envoltura de menú, que tenemos aquí. Después cambio la dirección del flujo a abajo y también agrego algo de espacio en el medio, por lo que la dirección del flex cambia a fila. Entonces también podemos justificar que los contenidos sean espacio entre. Esto también significa que más adelante cuando también tengamos nuestras cestas, también tendremos algo de espacio entre el menú y las secciones de canasta. En esta pantalla más grande, también necesitamos configurar el menú para que tenga un cierto ancho para que no abarque el ancho completo del navegador. Podemos hacer esto apuntando a la clase de menú y luego establecer el ancho para que sea un valor de 65 Vw. Tengo de vuelta a nuestros proyectos. Ahora vemos que tenemos algo de espacio sobre el lado derecho para todas las cestas. Si reducimos esto hacia abajo, este será ahora el ancho completo del navegador. Entonces esta y también la canasta más adelante se apilarán verticalmente. De acuerdo, entonces esta tabla se ve ahora como queremos que lo haga, pero sí necesitamos configurar las cosas para recorrer un menú con múltiples elementos. Lo haremos en el siguiente video donde agregaremos un objeto para mostrar más elementos en nuestra tabla. 7. Recorrer en bucle los elementos del menú: Toda nuestra información de pizza eventualmente se almacenará dentro de una base de datos real. Pero por ahora voy a agregar algunos elementos de menú a nuestra propiedad de datos para trabajar. Voy a hacer esto dentro del componente de vista de puntos de menú. Tenemos que añadir una etiqueta de script solo a continuación nuestra plantilla. Podemos entonces agregar nuestro familiar default de exportación donde podemos agregar nuestra propiedad de datos para almacenar todas las pizzas. Dentro de la declaración de retorno, voy a crear un objeto para almacenar estos en elementos llamados get menu. Por ahora solo configuraremos esto como un objeto vacío. Proporcionado con este curso se encuentra un archivo de texto llamado pizza object el cual contendrá todos los datos que necesitamos. Tener esto disponible en el escritorio. Voy a abrir esto. Entonces podemos agarrar todos los contenidos y pegarlos dentro de nuestros datos. Seleccionemos todos, copiemos estos. Después pega esto dentro de los elementos de menú get. Todo lo que tenemos aquí son varios objetos. El primero es un objeto el cual contiene una margarita. Tenemos una descripción y luego dentro aquí tenemos un array de Opciones. Contamos con nuestras dos tallas. Tenemos una pizza de nueve pulgadas y también una de 12 pulgadas con el precio correspondiente. Después ten un segundo elemento, que es un pepperoni, también con la descripción y las dos opciones. Con esta propiedad de datos ahora disponible, podemos hacer uso de vistas v para directiva. Para mirar a través de nuestros datos podemos hacer esto arriba dentro de la tabla donde agregamos todos los datos estáticos en el último video. Para comenzar sobre los elementos de la mesa circundante, voy a hacer uso de la v para directiva para mirar a través. Podemos agregar v para. Entonces decimos ítem en get menu items. Obtener elementos de menú es el objeto que se agrega a nuestra propiedad de datos. Después almacenamos cada pizza individual dentro de esta variable de artículo para que podamos acceder está dentro de nuestra mesa. Vamos a empezar por quitar el valor codificado de pepperoni dentro de las llaves dobles. Podemos entonces acceder al nombre del punto del elemento. Con todo esto dentro de los pequeños tiempos podemos quitar el Lorem Ipsum. En realidad podemos doblar llaves a menos que quiera acceder a la descripción del punto del artículo. Guarda esto en el navegador y podemos ver si esto está funcionando. Vemos que tenemos un pequeño problema. Al usar Vue.js y también esto es lo mismo al usar React to si ya has agotado antes. Tenemos que añadir una clave a cada elemento. Vemos la vista está esperando la directiva v bind con una clave única. Para arreglar es cuando se usa un bucle. También podemos ver que tenemos el subrayado rojo en el editor de texto. También podemos vincular una propiedad de clave dinámica con el colon y luego clave. Para cada elemento individual, necesitamos agregar esta clave única. Esto es todo vista ven mejor, realiza un seguimiento de cada elemento cuando estamos agregando, eliminando o actualizando elementos de una lista. Por el momento, nuestro objeto de pizza contiene nombres únicos de pizza. Podemos simplemente usar arriba. Podemos decir item.name. Podemos ver al instante al guardar esos son nuestros elementos de menú y ahora agregados. No obstante, un mejor valor para una clave sería un ID Único. Al utilizar nuestra base de datos posteriormente se generará un ID Único para cada ítem de la base de datos. Podemos volver y cambiar esta clave más adelante. Pero ahora nuestros artículos gratuitos que tienes dentro de nuestros datos. El siguiente paso a hacer es crear un segundo bucle, que va a recorrer todas las opciones. Por el momento sólo tenemos el valor codificado de la pizza de nueve pulgadas. Si bajamos a nuestra propiedad de datos, tenemos dos opciones. Tenemos los dos valores de nueve y 12 pulgadas lo que significa que podemos agregar un segundo bucle para pasar por estos. Si localizamos la fila de la tabla con el dimensionamiento dentro de los elementos de apertura, podemos agregar un segundo bucle sería de cuatro. Dentro de aquí vamos a recorrer nuestras opciones individuales. Recuerda que tenemos nuestras pizzas individuales almacenadas dentro de esta variable de artículo. Podemos acceder al artículo. Opciones, y luego podemos almacenar cada opción individual en una variable llamada Opción. Podemos entonces configurar nuestros datos dinámicos. En lugar de los valores codificados, podemos preguntar las llaves dobles. Esto puede ser opción.tamaño con la comilla doble justo después para señalar esto es en pulgadas. Podemos entonces quitar el precio, establecer las llaves dobles para que sean opción.precio. Una vez que guardamos esto, volvemos a ver que tenemos un problema con la directiva v bind. También necesitamos agregar esto a nuestro segundo bucle dos. Añadamos una clave. También necesitamos agregar un valor único a estos dos. Solo tenemos dos artículos dentro de nuestro array de opciones. Por lo tanto, podemos usar el número de índice de matrices como una clave única. Podemos agarrar esto agregando un segundo valor 12 antes de bucle. En lugar de simplemente agregar la variable de opción, podemos agregar a los corchetes y luego agregar un segundo valor que es para nuestro número de índice. Dado que se trata de una matriz, esta será la opción cero. Entonces opción uno y así sucesivamente. Al pasar la clave como opción con el número de índice. Guarda esto y ahora dentro del navegador vemos nuestras opciones de nueve y 12 pulgadas. Bien hecho si puedes ver los tres elementos en la pantalla. Si no, no te preocupes solo vuelve a pasar. Consulta el código e inténtalo de nuevo hasta que lleguen al escenario. Acompáñame en el siguiente video donde continuaremos con los componentes del menú y empujaremos las pizzas seleccionadas a las cestas de compras. 8. Envío de órdenes a una matriz: En el último video, agregamos con éxito los elementos de menú a estas rutas de menú. Se puede ver desde la versión final, si te diriges hacia allá y luego pasas a nuestros componentes de menú, que aún necesitamos añadir la canasta en el lado derecho de la página. Cuando el usuario haga clic en una “Pizza”, haga clic en el “ Símbolo más ”, el elemento aparecerá en el lado derecho en la cesta. También se quema la casa de canasta para cambiar la cantidad y el precio total también se actualiza. En este video, daremos el primer paso hacia la creación de esto agregando la matriz de cestas para almacenar las pizzas que el usuario agrega a las cestas. Si aún no estás ahí, selecciona los componentes del menú desde Visual Studio Code. Lo primero que voy a hacer es agregar una propiedad de datos llamada canasta, que será una matriz. Abajo a nuestros guiones, dentro de nuestros datos. Añadamos justo arriba obtener elementos de menú. Podemos inicializar nuestra canasta como una matriz vacía, luego agregar una coma justo después. Esta matriz se utilizará para almacenar las pizzas, que es seleccionada por el usuario. Las otras piezas a esta matriz, necesitamos agregar un método al botón agregar a la cesta. Vamos a desplazarnos hasta nuestro botón. Dentro de la etiqueta de apertura de botones, voy a agregar un clic en “Controlador de eventos” con un clic y establecer esto igual a un nuevo método que aún no has creado llamado AddToBasket. AddToBasket va a tomar dos cosas. El primero es el ítem, y luego el segundo es la opción. El artículo es el elemento individual de nuestro bucle, como una Margherita. El opción es la opción de qué tamaño de pizza se ha seleccionado, modo que la versión de nueve o 12 pulgadas. Desplazándose hacia abajo, ahora podemos agregar el método AddToBasket. Justo después de nuestra propiedad de datos, está bien, es el corsé rizado de cierre y una coma. Cómo podemos configurar nuestros métodos objeto así como este. Voy a configurar esto como asíncrona, que podamos hacer uso de un nombre de método async/await de JavaScript fue AddToBasket, que toma en el ítem en la opción que se pasa cuando llama. ¿ Qué quieres que este método pueda hacer? Bueno, no diremos que se añada pizza a nuestra canasta. Queremos empujar un nuevo artículo a nuestra matriz de canastas. Podemos usar el método de matriz JavaScript llamado push para hacer esto. Entonces digamos el jabón, podemos seleccionar nuestras cestas. Con esto.canastas, podemos usar el método push JavaScript. El artículo que queremos empujar es un nuevo objeto de pizza. Podemos configurar esto. Podemos agarrar el nombre de nuestro artículo, el cual se está pasando. Se trata de los objetos de pizza completos. Para que podamos soltar el elemento y luego seleccionar el nombre individual. También podemos hacer lo mismo por el precio. Podemos agarrar un artículo, seleccionar el precio de la pizza. También el tamaño. El tamaño está disponible dentro de las opciones. Agarramos la opción de ese tamaño. Por último, también queremos establecer la cantidad para que sea un valor inicial de uno. Ahora con esto en su lugar, podemos darle a esto una prueba. Si nos desplazamos hasta nuestras plantillas, podemos tratar de dar salida al valor de la canasta y comprobar que esto se actualice con cada nueva pizza. Puede tener esto en cualquier lugar dentro de nuestra plantilla que simplemente emita el valor de las cestas. Dirígete a nuestros proyectos y al menú. Vamos a tratar de dar click en uno de estos. Esta es la Margherita de 12 pulgadas. Tienes el nombre y también el tamaño dentro de aquí. Probemos un nueve en jamón y piña. Esto ha sido agregado a nuestra cesta a. Si seguimos adelante sin embargo y agregamos la misma pizza, una vez más. Siempre que la piña de nueve pulgadas, podemos ver el interior de nuestra matriz, ahora tenemos tres artículos individuales en lugar de la cantidad que se está incrementando. Podemos mejorar aún más esto comprobando primero si un artículo ya está dentro de las cestas. Si no, agregaremos la nueva pizza. Si ya está en la canasta, aumentará la cantidad en una. Volvamos a nuestro método dentro de aquí. Antes de empujar nuestra pizza a la matriz, primero comprobemos el contenido de la matriz. Podemos crear una constante llamada PizzaExists. Dentro de aquí, vamos a esperar esto.cestas para luego hacer uso del método JavaScript find. Encontrar no es nada específico para ver js. En realidad es un método de matriz JavaScript, que devuelve un valor del primer elemento que coincide con la condición que estamos a punto de proporcionar. El acondicionamiento es para comprobar si el nombre de la pizza y el tamaño ya se han agregado a las cestas. Dentro de aquí, dijimos que por función, queremos agregar una función de flecha en línea. Aquí estamos buscando a través de nuestra matriz y cada elemento que se encuentra se almacena dentro de esta variable pieza con cheque no deseado. Si el pizza.name es igual a item.name. Esta es la pizza recordar que se había pasado a nuestro método. También queremos rastrear dos si la pizza.size es igual a nuestra opción.size también. Si el tamaño de la pizza y también el nombre de la pizza, ambos se encuentran dentro de nuestra canasta. Esto significa que esto va a ser cierto. Podemos configurar una declaración if. Podemos decir que si existe pizza, entonces queremos aumentar la cantidad en una. Podemos hacer esto con PizzaExists.Quantity++. Lo que quiero devolver de nuestra función ya que no necesitamos hacer el método push justo debajo. Guarda este archivo, y ahora vamos al navegador. Podemos probar al final un pepperoni de 12 pulgadas, un nueve pulgadas. Los límites son de un segundo 12 pulgadas, y la cantidad se ha incrementado a 2, 3, y 4. Probémoslo por una más. Digamos jamón y piña. Ahora se está incrementando la cantidad con cada artículo que se ha agregado con esto ahora en su lugar nuestras cestas ahora están funcionando correctamente. No se ve muy bien en un momento. Pero nuestros datos están ahí en su lugar para el próximo video. 9. Añadir la cesta de la compra: Hicimos un gran paso hacia nuestra cesta de la compra en funcionamiento en el último video empujando nuestros artículos añadidos a una matriz. Ahora podemos crear una tabla para mostrar los elementos antiguos haciendo un bucle a través de esta matriz. Volvamos a los componentes de la vista de puntos del menú. Bueno, voy a añadir esta canasta al final, justo encima de nuestro div de cierre para el menú. Desplázate hasta las plantillas, y recuerda que creamos nuestra sección de menús con la clase de menú. Localicemos el final de nuestro menú. En lugar de nuestra canasta justo aquí, asegúrate de que aún tenemos el div de cierre al final para nuestra envoltura principal. Empecemos agregando un comentario. Esta es para nuestra cesta de la compra, nuestra cesta de la compra necesita un div, y le voy a dar a esta una clase de canasta. Podemos usar esto en el CSS muy pronto, ahora vamos a añadir un nivel de encabezamiento gratis en la parte superior. Quiero agregar una tilde a cualquiera de los lados, con el texto todas las cestas. Empecemos a construir nuestra tabla para todos nuestros datos de canasta. La mesa va a tener el cuerpo de la mesa y luego nuestra primera fila de tabla. El fila de tabla necesita algunos datos de tabla con los elementos TD y esta primera pieza de datos va a ser para los botones de aumento y disminución. Si miras la versión terminada, estos van a ser los botones más y menos y también la cantidad en el centro, luego agregaremos una segunda pieza de datos de mesa, que es para nuestra pizza, incluyendo tamaño y luego finalmente el precio al final. El primer elemento va a incluir nuestro botón. Esto va a tener la h pequeña entidad, que va a ser un ampersand, el hash, luego el valor de 8,722 con punto y coma. Esto nos dará nuestro símbolo negativo para deducirlo de la cantidad. También puedes agregar una clase, este va a ser el valor del btn subrayado verde. Pero nuestro CSS, voy a duplicar esto. Esto es para el botón más, que es una h pequeña entidad del ampersand, el hash y luego el valor de 43. Entre aquí también queremos agregar un elemento span, que es para la cantidad. Voy a añadir esto todo esto en como un valor de 2. Debajo de nuestro td, podemos agregar nuestro segundo conjunto de datos, que es para el nombre de la pizza y también el tamaño seguido por pieza alfa de datos para esta fila, que es para el precio, y cualquier precio está bien. Volveremos y haremos esta dinámica muy pronto. Se puede decir esto y ver cómo está mirando esto en los proyectos. Contamos con nuestros botones, nuestra cantidad, y también la información de pizza, junto con el precio, definición de nuestras plantillas. Pasando a la versión final, también necesitamos agregar este total de pedidos justo debajo de nuestra tabla. Yo solo quiero escuchar podemos agregar un p elementos con las etiquetas de todo el total y un colon y luego podemos agregar un botón para encontrar el lugar de orden. Este botón también puede tener una clase para que coincida con el resto con el nombre de clase de btn verde, guardar y refrescar. Tan solo para terminar este video apagado, también voy a añadir algo de CSS a esta canasta, tanto como el menú del lado izquierdo. Desplazémonos hacia abajo en nuestras etiquetas de estilo, hacia abajo en la parte inferior. Vamos a compartir algún estilo común con el menú. También podemos sumar las cestas. Esta es una clase. Esto nos dará el mismo fondo color y radio de borde que aquí vemos y también para que sea el ancho completo del espacio disponible. Vamos a desplazarnos hacia abajo a nuestra consulta de medios. El menú ha retomado 65 por ciento. Podemos sumar al ancho de la canasta, retomemos el resto del contenido, que es 35vw, y ahí vamos. Es así como ahora se muestran nuestras cestas de compras con algunos datos estáticos. Pasemos ahora al siguiente video donde recorreremos datos de nuestra cesta y mostraremos dentro de esta tabla. 10. Cómo hacer la cesta de compras dinámica: Ahora tenemos una tabla de cesta de la compra en la pantalla del menú que muestra algunos datos estáticos. Para hacer que nuestros datos sean dinámicos podemos recorrer el contenido de la matriz de canastas, igual que hicimos con el menú del lado izquierdo. Ya sabemos que la matriz de canastas tiene toda la información que necesitamos. Añadamos esto for loop a nuestra mesa, iré a los componentes del menú. Desplazemos hacia arriba hasta nuestra mesa de cestas, y localicemos la etiqueta de la tabla int de apertura. Dentro de aquí tenemos nuestro cuerpo de mesa donde podemos agregar nuestro v para un bucle. El artículo que queremos recorrer es la canasta. Queremos almacenar cada artículo de canasta individual en la variable ítem y también podemos agregar como segundo valor nuestra posición de índice, cual podemos usar como clave. Combinamos nuestra clave dinámica y ajustamos esto a nuestro índice. El siguiente que hay que hacer es bajar a nuestros datos estáticos. El primer pedazo es la cantidad del artículo por lo que, dentro de las llaves dobles, podemos acceder a nuestro artículo y agarrar la cantidad de nuestro objeto. Desplazarse por la siguiente pieza es la pizza dentro de aquí y también del tamaño. En primer lugar, tomemos el item.name y luego como un segundo valor dentro de un segundo conjunto de llaves, también puedes agregar el item.size. Debajo de esto, también tenemos el precio así que vamos a cambiar el 695 para que sea el item.price y su respuesta para ser ítem, digamos esto y ahora obviamente navegador vamos a agregar algunos ítems en el lado derecho. Veré que la cantidad se ha incrementado con cada artículo de Júpiter un nuevo artículo se agrega a una nueva línea ahora solo nos falta el precio del final. Echemos un vistazo tenemos el item.price. Vamos a revisar nuestro método hacia abajo en la parte inferior. Esto es solo de la opción así que vamos a cambiar esto y ahora de nuevo. Podemos intentar sumar esto una vez más, y vemos el precio. No obstante, si subimos la cantidad de alguno de estos artículos, vemos que la cantidad se incrementa pero el precio total no lo es. Esto es algo que fácilmente podemos arreglar vamos a dar salida al precio. Vamos a desplazarnos hacia arriba, podemos multiplicar el precio por el artículo.quantity. Esto nos dará un precio total, por lo que vemos esto ha sido actualizado. Podemos agregar uno más y el precio se actualiza con cada click. Bien así que ahora si le damos una actualización al navegador, queremos ocultar el texto y también el botón de orden cuando no se ha agregado pizzas. Podemos ocultar nuestras cestas usando renderizado condicional y solo mostrar si la matriz de canastas tiene una longitud mayor que cero. Volver a nuestra canasta, que es el div circundante justo aquí, voy a rodear esta mesa con un segundo div donde podemos mostrar y ocultar su contenido. Agrega un div dentro aquí y luego podemos agregar av if directiva para comprobar si nuestra canast.length es mayor que cero. Este div solo mostrará si se ha agregado algún artículo a nuestra matriz. Podemos cortar la etiqueta de cierre y luego desplazarnos hacia abajo hasta el final de nuestra mesa. En el div de cierre, justo después de nuestro botón de pedido de lugar. Justo debajo, podemos agregar otra condición dentro de un div separado. Podemos decir v else por lo que el contenido dentro de aquí será un mensaje dentro de los elementos p. Voy a hacer que este mensaje sea dinámico y establecer esto en una variable llamada texto de canasta. Dentro del sub justo debajo en la propiedad date configura nuestro texto de cesta donde podemos mostrar un mensaje al usuario de tu canasta está vacío. Guarda esto, recarga y ahí está nuestro texto de tu canasta está vacío, usando renderizado condicional y ahora si agregamos un artículo a nuestra matriz, esto ahora se está eliminando y vemos los artículos dentro de nuestra canasta. Te puede estar preguntando, ¿por qué configuramos nuestro mensaje es uno aquí como una propiedad de fecha, en lugar de simplemente agregar el texto dentro de nuestros elementos p. Bueno, esto es porque más adelante después de hacer nuestro pedido también obtendremos este mensaje para ser un mensaje funky. Será más útil más adelante, continuación añadiremos pequeños métodos a nuestra cesta de la compra. Vamos a cablear nuestros botones de aumento y disminución dentro de aquí, junto con quitar artículos de la canasta también 11. Métodos de la cesta de compra: Ahora tenemos una cesta de la compra mostrando las pizzas que el usuario selecciona. Hay alguna funcionalidad extra y quiero agregarla para mejorar esto. En primer lugar podemos conseguir que funcionen los botones más y menos, para que podamos cambiar la cantidad de cada artículo. También relacionado con esto, cuando la cantidad se reduzca a cero, queremos que este artículo sea retirado de la canasta. Empecemos configurando los métodos para volver a cambiar la cantidad en el menú de los componentes. Tenemos que empezar agregando algunos manejadores de clics a estos dos botones. Desplazemos hacia arriba y echemos un vistazo a nuestros dos botones, que es esta sección justo aquí. El primero que tenemos que hacer es agregar un manejador de clics para el botón menos. Por lo que podemos agregar @click y establecer esto igual a un método llamado disminución de cantidad. Al disminuir esta cantidad, también necesitamos saber qué artículo estamos reduciendo para poder pasar en el artículo. El botón más justo debajo. Esto va a funcionar de manera similar. Esto lleva un manejador de clics donde vamos a aumentar la cantidad. Pasando también en el ítem queremos aumentar. Ahora vamos a desplazarnos hacia abajo a nuestro guión donde podemos crear nuestros métodos. Entonces echemos un vistazo a estos. Justo debajo de nuestros datos, localiza el final de nuestro método add to basket, que es ella. Al primero le voy a agregar IncrementeQuantity, cual vamos a recibir el artículo pasado a él. Aumentar el artículo es bastante sencillo. Todo lo que queremos hacer es seleccionar el artículo.cantidad e incrementar el valor por uno con plus, plus. Voy a copiar esto en una coma donde se puede configurar disminuir cantidad. Todo lo que tenemos que hacer para esto es cambiar a negativo, y entonces estamos bien para ir. Guarda y luego pasa al navegador. Añadamos algunos artículos dentro de un aquí. Entonces, antes que nada, tenemos un pepperoni. Podemos aumentar esto y la cantidad se incrementa junto con el precio. Intentemos deducir esto y luego tomar este cero. Si seguimos adelante, obtenemos un valor negativo. Por supuesto, esto no es algo que queremos. Por lo que podemos arreglar esto creando un método para eliminar el artículo cuando la cantidad es cero. Entonces, dirígete a nuestros métodos. Voy a crear un nuevo método dentro de aquí llamado RemoveFromBasket. Esto también va a tomar en el artículo que se desea quitar. Podemos utilizar el método de empalme de JavaScript para eliminar el elemento de nuestra matriz. Podemos seleccionar esto.basket, que es nuestra matriz. Podemos llamar al método de empalme de JavaScript. Dentro de los paréntesis, podemos agregar dos parámetros. El primero es la posición de índice del ítem que queremos eliminar. Por lo que podemos agarrar esto con esto.Cestas.Indexde donde vamos a pasar en nuestro artículo. Por lo que esto encontrará la posición de índice de nuestro ítem en la matriz. El segundo parámetro es el número de ítems que queremos eliminar. Nosotros sólo queremos quitar uno. Para estos métodos funcionan. En primer lugar, tenemos que llamarlo cuando la cantidad del artículo es cero. Debajo de esto se puede agregar en necesidad disminución de cantidad método. Vamos a bajar. Podemos establecer para comprar si declaración para comprobar si el artículo.quantity es igual a cero. Si lo es, queremos llamar a nuestro método remove from basket, que toma en el artículo individual. Dale esto para ahorrar al navegador y podemos añadir algunos ítems. Empieza por quitar el pepperoni, el jamón y la piña. Todo esto ahora está funcionando bien. Todavía tenemos el lugar todo el botón al por qué grupo dos, que está abajo en la parte inferior. Pero podemos mirar esto más adelante cuando empecemos a trabajar con Firebase y data stores. 12. Estructuración de la sección de administración: Bienvenido de nuevo, el componente Admin va a ser una gran parte de esta aplicación con bastante funcionalidad para trabajar. Para empezar, protegemos la página con el formulario de inicio de sesión, como podemos ver aquí en la versión final. Sólo los usuarios autorizados pueden ver la sección de administración. Si iniciamos sesión, el resto del administrador, entonces se hace visible. En la parte superior tenemos al usuario actual conectado y también un logo inferior, seguido de una nueva sección de pizza, y también sus propios componentes para permitir que el usuario conectado agregue nuevas pizzas al menú, y a continuación podemos ver todos los ítems que son actualmente en el menú, y de nuevo, podemos eliminar elementos de nuestro menú y también una base de datos a. Abajo en la parte inferior tenemos una lista de órdenes actuales, y estos también se pueden eliminar cuando se completen. Empezamos de nuevo mi creación de su propio componente llamado Admin W, y luego podemos agregar alguna estructura básica. Encima a nuestra barra lateral en los componentes, la w no tripulada. adentro aquí, podemos agregar nuestras plantillas donde vamos a agregar un div como envoltorio con la clase de admin. En este envoltorio de llamadas. Este será el envoltorio principal para nuestro administrador. Esto va a tener dentro Free diferentes divs. El primero va a ser para el usuario actual, éste va a ser sus propios componentes. Vamos a tener el envoltorio de menús, y luego abajo en la parte inferior, el envoltorio de pedidos. Añadamos estos divs ahora. El primero va a ser un div con la clase de envoltorio de usuario actual. Después de esto se creará un nuevo div, que también va a tener la clase de envoltura de menús, y el último va a ser el envoltorio de pedidos, que se sentará en la parte inferior. Tenemos que añadir nuestro script justo debajo de esto, le damos un nombre a nuestros componentes. El valor predeterminado de exportación. Agregaremos el nombre del componente, y vamos a llamar al mío, el administrador. Guarda este archivo, y podemos ver esto dentro del navegador. Podemos sumar esto en la app w. En primer lugar, podemos importar esto. Voy a llamar a este admin, y esto es de la ruta del archivo de dot slash Components, y luego el admin. También necesitamos registrar estos componentes abajo en la instancia de vista. Esto está disponible para su uso dentro de las plantillas. Sube a las plantillas. Ya no necesitamos este menú por aquí. Voy a cambiar esto para ser admin. Volver al admin, plantillas. Justo en la parte superior tenemos este envoltorio de usuario actual, que voy a volver más tarde cuando tengamos usuarios registrados. Por ahora podemos bajar al envoltorio de menús justo debajo y crear nuestra tabla. Eso nos da un rumbo de nivel tres con el título de Menú. Debajo de esto, podemos construir nuestra mesa. Añadamos el cabezal de mesa en la parte superior con la primera fila de mesa. Esta fila de tabla va a tener dos encabezamientos. Si vamos a la versión final, estos dos encabezamientos van a ser para el ítem y también el texto off remove from item. Podemos agregar estos en, dentro de las etiquetas TH, el ítem, y luego justo debajo de esto, también podemos agregar remove del menú. Debajo de la cabeza de mesa. Podemos entonces agregar el cuerpo de la mesa en una fila, y esto va a ser para nuestro nombre de Pizza y también el potencial de quitar. La primera celda dentro de los datos de la tabla va a ser para el nombre de la pizza. Voy a añadir a Margarita aquí dentro. Esto se leerá de una base de datos más adelante. Pero por ahora solo podemos estudiar valor codificado duro seguido de un botón. Este botón va a ser para quitar el elemento de menú de la base de datos. Alguien le da a este tipo de botón una clase de btn_reds, y luego para la cruz, usamos el código HTML, que son los tiempos ampersand, y luego el punto y coma. Guarda este archivo y luego pasa al navegador, tenemos unos componentes de menú pero no usados más en la App. Selecciona solo comentar esto hacia fuera. Si bien ver instancia. También podemos comentar el impulso. Ahora, estoy viendo una mesa muy básica con nuestros elementos de menú abajo en la parte inferior. Ahora la mesa está en su lugar, y volveremos a esto más adelante para recorrer todos nuestros elementos del menú, igual que lo hemos hecho dentro de los componentes del menú. Te veré ahora en el siguiente video donde nos quedaremos con nuestros componentes admin y empezaremos a trabajar con los pedidos actuales. 13. Listado de pedidos en curso: Podemos ver la versión final de en los componentes admin. En el último video. Creamos la tabla a partir de su sección de menú, y agregamos en un elemento de muestra. En este video, vamos a pasar a la siguiente div, que es para los pedidos actuales. Esta también va a ser una mesa dos donde vamos a tener un título en la parte superior. Vamos a tener un encabezado de tabla con el artículo, tamaño, cantidad, y precio, y voy a construir nuestros pedidos justo debajo y también con el botón para quitar cada artículo. Ahora estamos creando muchos componentes, y cosas como tablas. Con los datos estáticos no es lo más emocionante de hacer, pero apegarse a ello, es una buena práctica y llegaremos a la sección de base de datos muy pronto. Por lo que volver a los componentes admin, que es el admin.view. Ahora quiero bajar a este envoltorio de órdenes, sólo cambiemos esto, y luego dentro de aquí podemos construir nuestro rubro de nivel tres, con el título de órdenes corrientes. Entonces dentro de los corchetes, vamos a codificar duro en un valor. Por lo que ahorraremos 5 pedidos. Entonces justo debajo de esto, podemos crear nuestra mesa. El cuadro comenzará con los cabezales de mesa, que serán los encabezamientos de artículo, tamaño, cantidad y precio. Vamos a sumar estos en su propia fila, y luego cada uno irá dentro de un encabezamiento de tabla elementos. El primero es para un artículo. Vamos a duplicar esto tres veces más. El siguiente es para el tamaño, el tercero para la cantidad, y el último va a ser por el precio. Desplazándose hacia abajo por debajo de nuestra sección de cabecera, vamos a agregar el cuerpo de la tabla, con los elementos tbody. Nidar dentro de nuestra primera fila, y esta primera fila va a ser para nuestro otro número. Voy a añadir una clase de orden y se llama número. Es sección de número de orden, echar un vistazo al sitio final va a ser esta fila que vemos aquí. Tendrás un número de pedido y también un botón para eliminar esto de la base de datos. La mayoría va a convertir esto en una celda dos, al hacer de este lapso las cuatro columnas. Por lo que dentro aquí podemos agregar un encabezado de mesa. Podemos hacer el lapso todo para nosotros mismos, con travesaño para ser igual a cuatro. Nuestro número de pedido, voy a añadir en las etiquetas fuertes. Por lo que el número de orden. Voy a establecer cualquier valor dentro de aquí seguido de nuestro botón el cual tomará en el tipo de botón, y también una clase para nuestro CSS, hacer este rojo. Tenemos la clase de botón de btn_red. Al ser el valor, podemos agregar una entidad HTML de ampersands, tiempos, y luego un punto y coma. Guarda esto y ahora queremos ver nuestros proyectos y desplazarnos hacia abajo. Tenemos nuestro; encabezamiento de mesa, el número de orden, y también el botón. El siguiente que hay que hacer es agregar una nueva fila, que va a mostrar el nombre de la pizza como; vegetariano, el tamaño, la cantidad, y también el precio. Una nueva fila dentro de aquí. El primer pedazo de datos de tabla es para el nombre. Voy a añadir margarita. El segundo es para el tamaño de la pizza. El tercero es por la cantidad, estos están demasiado dentro de ahí. El cuarto va a ser por el precio. Ahorra y echemos un vistazo a esto. Bien. Ahora tenemos nuestros contenidos de tabla ahí, y ahora podemos agregar un poco de estilo dentro de la sección CSS, dentro del admin para ver los componentes. Desplácese hacia abajo abajo guiones. Podrás tener los elementos de estilo. Esto también puede ser objeto de alcance a estos componentes, donde vamos a empezar apuntando al admin_wrapper, que es el envoltorio principal. Todo lo que voy a hacer es agregar algún margen de 10 píxeles anidados por dentro. Voy a apuntar a nuestras secciones gratuitas; así que la primera fue current_user_wrapper, la segunda fue la orders_wrapper, y la tercera es para el menu_wrapper. Podemos apuntar todas estas tres secciones juntas para mantener el estilo consistente. Algún margen para dar algo de espacio en el exterior del div, 10 píxeles en la parte superior e inferior y cero en la izquierda y la derecha. Algún relleno dentro de los divs de 10 pixels. Un borde que rodea a cada uno con una línea sólida de un píxel, y el color a ser f79e38. Al lado de nuestros elementos de tabla, podemos configurar el text-align para que esté a la izquierda. Podemos hacer el ancho. Yo quiero que esto sea 70vw, que sea el 70 por ciento del ancho del mirador. A continuación, podemos apuntar la acción del número de orden, y el encabezado de la tabla, para darle a esto un color de fondo, que va a ser gris claro. Este es valor de ddd. Por último, una vez más el número de orden, pero esta vez vamos a apuntar al botón. Por lo que el botón de número de orden, que es el para quitar el elemento de la base de datos. Simplemente voy a agregar algún margen de cero en la parte superior e inferior. Agrega 10 píxeles a la izquierda y a la derecha. Dale a esto un guardado y más al navegador. Recargar. Esta es la sección de pedidos actual completada por ahora. Si el tuyo se ve así, felicidades. Ya estás listo para pasar ahora a añadir unos nuevos elementos de menú, y lo añadiremos en el siguiente video. 14. Añadir nuevo componente de pizza: Por encima en el menú sólo versión terminada, estos no son nueva sección de pizza, es básicamente forma para agregar un nuevo elemento a la base de datos. Voy a crear una sección en sus propios componentes, llamada Newpizza.vue. Se podría argumentar que esto podría ir en el archivo admin 2, lo que también estaría bien. No obstante, es un poco de código HTML. Por lo que el componente admin lo hace un poco hinchada. Como de costumbre, vamos a la carpeta de componentes, y podemos crear nuestros nuevos componentes, aquí dentro. Por lo que esta va a ser la extensión newpizza.vue. Dentro de aquí, podemos agregar nuestra plantilla [inaudible] y podemos tener alguna estructura básica a nuestra forma. Por lo que la forma que tiene las etiquetas de apertura y cierre dentro del nivel rubro libre. 15. Enlaces de entrada de formularios: Con la nueva forma de pizza ya, necesitamos una forma de agregar los datos de los usuarios y almacenarlo a nuestra incidencia de vista. Podemos hacer esto fácilmente usando V-model, que crea enlace de datos bidireccional, y esto significa que los valores de las entradas del formulario se facturarán a la propiedad de datos hasta que voluminosos se mantengan sincronizados. Empecemos por crear un nuevo objeto de pizza dentro de la sección de datos. A nuestro nuevo archivo de menú de pizza, no subiría a nuestra sección de guiones, donde vamos a agregar la propiedad de datos justo después del nombre del componente. Podemos devolver nuestros objetos donde vamos a añadir nuestros nuevos objetos de pizza. Este nuevo objeto de pizza formará una estructura de cómo se guardará nuestra pizza en la base de datos. Este objeto seguirá la misma estructura que lo que utilizamos en el menú componentes W. Vayamos a nuestro menu.view. Podemos bajar para conseguir elementos de menú dentro de nuestros guiones. Voy a copiar todo el contenido de uno de estos objetos, para que no necesitemos las llaves circundantes. Agarremos la etiqueta de cierre de matriz hasta el nombre de nuestra pizza. Podemos copiar esto y luego en este interior de nuestros nuevos objetos de pizza. Aquí la idea es usar esto como plantilla. Voy a añadir EG al inicio del nombre y también EG al inicio de la descripción. El motivo de esto se debe al enlace bidireccional de datos. Mencionamos antes el enlace bidireccional de datos y cómo estos datos se vincularán a nuestros insumos de formulario. Mi lista de enlaces está bien formada, en realidad es, veremos dentro de estas entradas de formulario serán EG margarita y también EG seguida de una descripción que le preguntará al usuario qué está escribiendo. Entonces, ya que esto es de dos vías, cuando el usuario escribe algo en estas entradas, entonces reemplazará los valores dentro de este objeto. Entonces podemos seguir adelante y empujar esta nueva pizza en la base de datos. Primero configuremos esto usando V-model. Podemos utilizar este formulario campos de entrada bucle dentro de nuestro formulario. Vamos arriba. Empezaremos con el nombre. Podemos añadir modelo V. Entonces combinamos esto con nuestros nuevos objetos de pizza. Entonces el nombre de campo del nombre, voy a copiar esta sección y luego bajar a la descripción. Dentro del área de texto, peguemos esto en, y asumiendo nueva pizza.description. Aquí también voy a fijar la rosa inicial para que sea un valor de cinco. Cuando X tenga la opción una sección y en el tamaño. Si entramos en los insumos, podemos pegar esto en. Pero esta vez queremos acceder a la nueva pizza. Queremos acceder a las opciones, que es una matriz. El primer valor de matriz es 0, y podemos acceder al tamaño. Siguiente cuesta arriba en opción 1, tenemos el precio. Tantas pizza, las opciones todavía en el número índice de cero y en esta ocasión queremos acceder al precio. Para la opción 2, comenzamos con el tamaño. Se trata de opciones, pero este es el primer elemento de la matriz. Tan solo confirma si bajamos dentro de nuestra matriz, el primer elemento es la posición 0 y el segundo elemento es la posición 1. Posición1.Tamaño. Entonces por el precio, opciones nacidas y luego precio. Servicio, nuevos componentes de pizza y podemos revisar el silencio en el navegador. Verá el texto de EG margarita, la descripción y también el tamaño y precios que aparecen en los campos de formulario a. Todo esto parece bien. Para comprobar que el enlace está funcionando correctamente, podemos agregar un oyente de clics al botón abajo en la parte inferior, que va a desencadenar un método. Abajo a nuestro fondo, podemos agregar un oyente de clics sin click y configurar un método que voy a llamar abajo a toda instancia de vista. Después de la propiedad de datos, aquí podemos configurar todos los métodos. El nombre del método era impar. Dentro de aquí por ahora podemos ejecutar una alerta, solo con el mensaje de método activado y así podremos ver los resultados de nuestro objeto siendo actualizados en tiempo real. Si vamos dentro de toda forma, también podemos dar salida a nuestra nueva pizza dentro de las llaves dobles con este punto nueva pizza. Pasado al navegador. Ahora podemos ver nuestro objeto inicial de pizza hacia abajo en la parte inferior. Podemos entonces hacer cualquier cambio dentro de aquí, y los vemos reflejados de inmediato dentro de nuestros datos. También podemos obtener la descripción. Podemos obtener el tamaño. Intentemos actualizar ambos en el tamaño correspondiente y el precio también cambia. Bien, ¿qué es ahora todo en su lugar? Pasemos ahora a la siguiente sección donde empezaremos a trabajar con nuestra base de datos Firebase. 16. Configuración de nuestra base de datos Firebase: Con los datos de NewPizza ahora siendo capturados con éxito, ahora necesitamos configurar nuestra base de datos para almacenar esta información. Voy a estar usando Firebase para el backend del proyecto, y en particular la última base de datos Firestall. breve también haremos uso de un paquete llamado Vivax fire, para mantener sincronizados los datos de nuestros proyectos con esta base de datos también. También más adelante en el curso, también podemos usar la facilidad de autenticación de Firebase, para asegurarnos de que solo los usuarios de administrador de inicio de sesión puedan acceder a ciertos datos. Empecemos de cabeza a firebase.google.com. Si no tienes una cuenta, tendrás que registrarte y luego dirigirte a la consola. Dentro de la consola, ahora podemos crear un nuevo proyecto. Voy a añadir un nuevo proyecto aquí, y llamar a la mía Pizza Planet. Haga clic en “Continuar”. Actualmente no voy a habilitar Google Analytics, así que voy a crear un nuevo proyecto, y solo darle a esto unos momentos para seguir adelante y crear. Una vez hecho, da click en “Continuar” y debes ser llevado a una página que se vea similar a ésta. Vamos a estar usando el Cloud Firestore como nuestro back-end. Puede hacer clic en esta sección aquí para crear la base de datos, o hacer clic en la opción del menú. Esto nos va a hacer empezar con una nueva base de datos a nuestro proyecto Pizza Planet. Haga clic en “Crear”. Antes de crear esto, tenemos dos opciones. Tenemos el modo de producción, donde los datos son más seguros, pero podemos iniciar en el modo de prueba, lo que permitirá que nuestra base de datos se mantenga abierta para leer y escribir datos. Volveremos a esto más tarde y cambiaremos nuestras reglas de seguridad. A continuación, haga clic en “Siguiente” dentro del modo de prueba. Podemos completar esto y finalizar nuestro almacén de datos. Una vez hecho esto, luego lo llevamos a nuestra sección de inicio de base de datos, y muy pronto aquí es donde aparecerán todos nuestros datos en nuestra base de datos. También podemos agregar manualmente una colección también si queríamos. Una recopilación es un grupo de datos, que serán nuestros pedidos y también nuestro menú. Voy a dar clic en “Cancelar” ya que vamos a estar empujando datos de nuestro proyecto en lugar de agregar esto manualmente. Para agregar esta base de datos a nuestro proyecto, necesitamos acceder a nuestra configuración de Firebase, que tomamos de la barra lateral, y luego resumen del proyecto. Por supuesto estamos usando Firebase en un proyecto web, así que haz clic en el icono web justo aquí. Podemos entonces registrar nuestra app. Yo quiero llamar a la mía Pizza Planet. Podemos inscribirnos. Esto nos dará acceso a nuestros ajustes de configuración, que hay que sumar a nuestro proyecto. Voy a copiar todas las preocupaciones de la opción config, por lo que la clave API, hasta el ID de la App. Agarremos esto, pasemos al proyecto. Dentro de la terminal vamos a empezar cerrando esto e instalando en Firebase como paquete NPM. Podemos hacer esto con NPM I, en el nombre del paquete Firebase. Si bien esto se está configurando, entonces podemos crear un nuevo archivo en la raíz de nuestra fuente. Vamos al interior de la fuente, dentro de la barra lateral, crear un nuevo archivo. Esto se puede llamar firebase.js, y va a estar dentro de este archivo donde podemos agregar nuestra configuración. Empecemos importando nuestro paquete Firebase desde firebase/app. Como segunda importación, también vamos a estar importando nuestro firestore, que está disponible a partir de firebase/firestore. Si has usado Firebase en el pasado y simplemente importaste Firebase, las versiones más modernas de Firebase, sí te permiten seleccionar varios paquetes, como el firestore, también más adelante estarán importando el autenticación. Todos estos se dividen en módulos separados. Hagamos que estos tamaños de archivo sean más pequeños. Entonces podemos configurar nuestras constantes, para nuestra opción de configuración. Este va a ser un objeto, donde podemos pegar en estos ajustes, que acabamos de agarrar de Firebase. Justo después de esto, podemos agarrar nuestra variable Firebase, y luego usar un método que se llama inicializar App. Para inicializar nuestra App, también necesitamos pasar en las opciones de configuración. Después de esto, también podemos crear una segunda constante, que se llama DB, y esto va a ser un atajo a nuestra firebase.firestore. Con la necesidad de crear una referencia de base de datos, voy a exportar esta referencia, que podamos usarla en otro lugar. Podemos exportar una constante llamada, DBMenuEf. Esto va a ser una referencia o un atajo a toda la colección de menús dentro de toda la base de datos. El atajo va a ser un vinculado a nuestra base de datos, luego pasar en el nombre de la colección, que va a ser de menú. Esta carpeta de menús se creará para nosotros al agregar la primera pizza, si aún no existe. Por lo que no necesitamos ir a Firebase y agregar esto manualmente dentro de la consola. Ahora todo lo que necesitamos hacer dentro de cualquier componente, es importar este dbMenuEf. Entonces podemos llamar a cualquiera de los métodos Firebase que necesitamos, para guardar el elemento de menú, eliminar, actualizar, o eliminar. Guarda este archivo y volvamos al archivo Newpizza.vue. Necesitamos importar esta referencia dentro de nuestros guiones. Voy a hacer esto dentro de las llaves, ya que se trata de una exportación con nombre. Por lo que DBMenuEf. Podemos importar esto desde la ruta del archivo de.. /, y nuestro archivo firebase. Por el momento, si pasamos a nuestro proyecto, cuando hacemos clic en el botón “Agregar”, activamos una alerta dentro del navegador. Pero en cambio ahora podemos usar esta referencia de menú y usar un método Firebase llamado arte para empujar nuestra NewPizza a Firebase. Desplazémonos hacia abajo y sustituyamos nuestras alertas, accediendo al dbMenuEf. Accede al método de agregar Firebase, donde vamos a empujar esto.NewPizza. Necesitamos reiniciar nuestro servidor, con NPM run serve. Pasar al administrador dentro de nuestro proyecto, y cambiar el nombre. Voy a añadir un Pepperoni. También podemos cambiar la descripción, [inaudible] mozzarella y pepperoni. También alteremos los precios, así que siete, y hagamos este 11. Haga clic en el botón “Agregar”, sobre nuestra base de datos y se dirige al enlace de base de datos. Ahora vemos nuestra colección de menús se ha creado automáticamente para nosotros. Dentro de aquí tenemos un documento. Este es el DNI del documento, y luego toda la información de nuestro formulario. Contamos con nuestras dos opciones como array, con el nombre y descripción actualizados. Ojalá todo esto haya funcionado para ti también. De no ser así, vuelve atrás y comprueba el código, suele ser algo tan sencillo como un error de mecanografía. Si puedes ver esto en la base de datos sin embargo, ahora estás bien para pasar al siguiente video. 17. Añadir el componente de inicio de sesión: El apartado de administración de la app necesita estar en el área, a que solo pueden acceder los usuarios registrados. No queremos que ningún visitante pueda agregar o quitar pizzas de nuestro menú ni acceder a alguno de los pedidos actuales. Por lo tanto, necesitamos agregar autenticación de uso a nuestra aplicación, y podemos hacerlo mediante el uso de los proyectos de Firebase existentes. En primer lugar, necesitamos agregar un componente de inicio de sesión, que podemos colocar dentro del Administrador, y lo vamos a hacer con un nuevo componente llamado login.View. Dirígete a los Componentes, crea login.View, donde podemos empezar a construir nuestras plantillas de la manera habitual. Voy a añadir un envoltorio. Añadamos un div con la clase de login_wrapper. Anidados por dentro, podemos tener una forma. Esta forma va a tener dos secciones. Vamos a estar iniciando sesión usando la combinación de correo electrónico y contraseña, así que vamos a crear un wrapper div en primer lugar, para el correo electrónico. El correo electrónico necesita una etiqueta, así que esto es para el correo electrónico, y luego dentro de aquí podemos tener el texto de la dirección de correo electrónico. Después, necesitamos nuestros insumos de formulario. El tipo de entrada va a ser para correo electrónico, el id del correo electrónico también, y luego el valor de positor, que se va a introducir correo electrónico. Después de esta sección, podemos entonces agregar un segundo div todavía dentro del formulario. Esta va a ser por nuestra contraseña. El rótulo para contraseña, el texto de contraseña, la entrada va a tener el tipo de contraseña junto con el id, y una vez más, el positor de contraseña. Para terminar este formulario, solo necesitamos agregar un botón justo antes de la etiqueta de cierre del formulario, y éste va a ser el tipo de botón, la clase de btn_green, y luego el texto de inicio de sesión. Este componente ahora tendrá que ser importado y registrado para que podamos usar esto más en el archivo admin. Por lo que me dirijo al admin.View, abajo a nuestro script donde podemos importar nuestros componentes de inicio de sesión, la ruta del archivo. Esto también está en el archivo de componentes por lo que la ruta del archivo es simplemente. /Inicio de sesión. Después registre nuestros componentes, y luego hasta nuestras plantillas donde podamos agregar esto en. Voy a agregar esto cerca de la parte inferior, así que justo encima del div de cierre para nuestra envoltura, agreguemos nuestros componentes de inicio de sesión. Guarda este archivo y luego ve al Administrador en el navegador donde vemos nuestro nuevo formulario abajo en la parte inferior para el correo electrónico y la contraseña. El posicionamiento de este componente no es realmente importante en esta etapa ya que más adelante en el curso, cuando tengamos acceso a los estados ingresados del usuario, vamos a renderizar condicionalmente estos componentes, por lo que este es el único cosa que el usuario ve en la página. En el siguiente video, regresaremos a Firebase y nos pondremos a trabajar con nuestra autenticación de usuarios. 18. Habilitar la autenticación de Firebase: En el último video, agregamos un formulario de inicio de sesión de usuario el cual tenemos abajo en la parte inferior de nuestro administrador. Esto se utilizará para pasar datos a Firebase y comprobar si el usuario tiene permiso para acceder a esta pantalla de administración. Firebase hace que la autenticación de complementos sea fácil de seguir para dirigirse a la consola de Firebase. Vemos la opción de autenticación en el menú del lado izquierdo. Después podemos seleccionar un método de registro donde podemos configurar la autenticación utilizando diversos proveedores. Podemos hacer uso de redes sociales como Facebook o Twitter o podemos usar una combinación de correo electrónico y contraseña, que voy a dar clic y luego activar. Una vez hecho esto golpea Guardar. Entonces verás el estado habilitado justo en el medio aquí. Haga clic en un usuario y ahora podemos agregar un usuario a Firebase. Haga clic en “Agregar Usuario” donde podemos agregar un correo electrónico y también contraseña. Voy a agregar probarlos en y luego Agregar usuario. Por supuesto, se requiere una contraseña más fuerte si se usa esto en producción. También hay una forma de registrar usuarios desde dentro de la app también y esto lo muestra en la documentación si te interesaría. Se cuenta con diversos métodos como firmar con correo electrónico y contraseña. Pero esto es más adecuado para aplicaciones donde los usuarios públicos pueden registrarse en lugar de nuestro caso de uso, donde simplemente tenemos un administrador que puede iniciar sesión en el back end. Ahora tenemos un usuario registrado, necesitamos configurar nuestra autenticación en nuestra configuración de Firebase, así que vuelve a nuestro proyecto y luego al archivo Firebase.js. Podemos entonces importar nuestro módulo off desde Firebase igual que hicimos con el cinco estrellas justo arriba. Podemos seleccionar Firebase forward slash auth entonces en la parte inferior podemos crear una referencia a nuestro servicio de autenticación Firebase. Voy a exportar esto como una constante, por lo que está disponible en otros archivos. Voy a llamar a esta constante por una autenticación base y establecer esto igual a Firebase y acceder al método auth. Dentro de los archivos auth, igual que hicimos con la referencia de menú, podemos acceder a nuestros métodos de autenticación utilizando la autenticación de Firebase como básicamente un atajo. Después podemos ir a los componentes de la vista de inicio y ahora podemos importar esta referencia de auth desde el archivo config. Volaré nuestras plantillas. Vamos a crear nuestros guiones. Esta es una exportación con nombre, así que voy a importar esto usando las llaves, por lo que el nombre era Firebase auth y esto es de la ruta del archivo, que es de punto slash y luego Firebase y vamos a hacer uso de esta servicio de autenticación para crear la funcionalidad de inicio de sesión y cierre de sesión. Empecemos con el inicio de sesión agregando un manejador de clics a nuestro botón de inicio de sesión ajustable. En tan solo esta línea aquí podemos crear un manejador de clics use dot prevent para evitar el comportamiento predeterminado de una actualización del navegador configurar esto para ser igual a un método llamado inicio de sesión y este método ahora podemos crear bajo dentro de nuestro script. En primer lugar, dentro de nuestra exportación, podemos agregar el nombre de nuestro componente que es login. También necesitamos configurar nuestros métodos y el único en este momento es el inicio de sesión. Dentro de aquí podemos acceder a todos los métodos de autenticación disponibles a los que podemos acceder usando la autenticación de Firebase y esto es lo que comenzaremos a ver en el siguiente video. 19. Inicio y finalización de sesión: Habilitamos nuestra autenticación con correo electrónico y contraseña en el último video. Esto significa que necesitamos una forma de capturar el correo electrónico y la contraseña que ingresa el usuario, y podemos hacerlo fácilmente usando V-model. El primer paso, es agregar correo electrónico y contraseña como propiedad de datos. Por lo que haremos esto dentro de nuestra exportación, configuraremos los datos, y dentro devolveremos nuestros datos como un objeto sin una coma utilizada después de los datos. Podemos configurar el correo electrónico inicialmente para que sea una cadena vacía y también el mismo con la contraseña. Podemos entonces usar V-model para sincronizar esto con nuestros datos de formulario. Primero vamos a iniciar sesión a nuestro correo electrónico. Dentro de la entrada de formulario, podemos agregar V-model y establecer esto igual a nuestra propiedad de datos la cual va a ser correo electrónico. Haremos lo mismo. Justo debajo dentro de la entrada de contraseña, V-model y esta vez la propiedad de datos va a ser la contraseña. Después podemos desplazarnos hacia abajo y para terminar el método de inicio de sesión, que iniciamos en el último video. En primer lugar, voy a marcar esto como una función asíncrona. Podemos usar async await. También podemos agregar try y catch. Podemos agregar manejo de errores, pasando el error que trataremos en tan solo un momento. Empecemos en la sección try donde vamos a iniciar sesión y almacenar los datos de los usuarios devueltos. En primer lugar, agarremos nuestra referencia a nuestra autenticación firebase. Por lo tanto, se puede acceder a todos los métodos disponibles que necesitamos. El método que vamos a utilizar es un método Firebase llamado inicio de sesión con correo electrónico y contraseña. Dentro de este método simplemente pasamos nuestro correo electrónico y contraseña. Tenemos esto disponible en la instancia de vista. Todos podemos acceder a esto.email y esta.contraseña. También podemos esperar a que regresen los datos. Esto es todo lo que necesitamos hacer para la sección try, bajemos al área de captura para recolectar cualquier error. Vamos a acceder al objeto de error y almacenar los datos dentro de todas las variables tan. El primero va a ser el código de error que está disponible a partir de error.code. La segunda constante va a ser para el mensaje de error, y el mensaje de error está disponible desde error.message. Después de esto vamos a mostrar algunas alertas, que va a ser para los mensajes de error. Para empezar, voy a comprobar si el usuario ha introducido una contraseña incorrecta. Podemos hacer esto comprobando si el código de error va a ser igual a una cadena que es autor/ contraseña incorrecta. Si lo es podemos crear un error personalizado. Entonces vamos a crear una alerta con la pantalla de contraseña incorrecta. Si la contraseña es correcta, entonces podemos crear una sección L la cual va a captar todos los mensajes de error, así que agreguemos una segunda alerta con el mensaje de error o con el navegador, ahora podemos darle una prueba a esto. Desplázate hacia abajo hasta la parte inferior del administrador, y abramos la consola. Podemos comenzar agregando una contraseña incorrecta. Añadamos test @test, en la contraseña como prueba, inicie sesión. Recibiremos el mensaje de error diciéndonos que no se ha encontrado ningún usuario. Probemos la correcta, que agregamos dentro de una Firebase y una contraseña incorrecta, inicie sesión. Recibimos el mensaje de contraseña incorrecta el cual configuramos. Probemos la contraseña correcta. Entonces pruébalos. Ahora hemos utilizado el correo electrónico y la contraseña correctos, no vemos ningún error. Posteriormente este componente de inicio de sesión se ocultará para revelar al administrador para que el usuario sepa que fue un éxito junto con mostrar el correo electrónico del usuario conectado y también un botón de registro. Este método de registro es un poco más sencillo y esto irá dentro del componente admin. Vamos a sumar a la admin.view. Mira la parte superior de nuestra plantilla ya hemos creado un div para el área de usuario, que es el envoltorio de usuario actual. En su interior se verá así. Si abrimos esto, crea el span, que va a ser el texto de login as, seguido de colon. A continuación hay un botón con el texto de cerrar sesión. Esto también necesita algunos atributos dentro de la etiqueta de apertura. Este es un tipo de botón, una clase, BTN rojo. Podemos agregar un manejador de clics donde vamos a evitar el comportamiento predeterminado. El método que estamos a punto de crear va a ser cerrar sesión. Ahora necesitamos acceder a un nuevo método Firebase/ desplazarse hacia abajo a nuestro script donde podemos importar y vamos a salir del módulo o impulso dentro de las llaves ya que esta era una exportación con nombre. Podemos importar Firebase fuera y esta ruta de archivo esta vez es../y luego Firebase. Después de nuestros componentes, podemos entonces crear nuestro método. Entonces configura nuestros métodos, y luego dentro de aquí, podemos crear una función asíncrona llamada cerrar sesión. Configurar un try y una sección de captura. Pasando el error. Registrarse con Firebase es bastante sencillo. Todo lo que vamos a hacer es esperar, Firebase apagado. El método al que necesitamos acceder es cerrar sesión. Eso es todo lo que necesitamos hacer dentro de la sección try. Después podemos captar cualquier error alertando un mensaje al usuario. Voy a agregar esto dentro de la [inaudible] Para que puedas insertar una variable. Error, cerrar sesión seguido de una coma, e insertar nuestra variable de error. Vamos a probar esto en el navegador. Recarguemos y despejemos la consola. Probemos todos nuestros mensajes de error. En primer lugar, un correo electrónico y una contraseña equivocados. Obtenemos el mensaje del usuario puede haber sido eliminado. Podemos agregar el correo electrónico correcto y la contraseña incorrecta, y obtenemos el mensaje incorrecto. Probemos la contraseña correcta, inicia sesión, no obtenemos mensajes de error. Desplácese hacia arriba hasta la parte superior. Ahora estamos logueados, da click en cerrar sesión. No vemos ningún mensaje de error. Entonces eso parece estar funcionando bien. Posteriormente en el curso, agregaremos algunos comentarios al usuario, mostraremos una nueva dirección de correo electrónico al iniciar sesión, pero por ahora todo parece estar funcionando bien. 20. Componentes finales: Estamos haciendo buenos avances con esta aplicación hasta el momento. Antes de pasar a la siguiente sección, que será para mirar el enrutamiento, solo quiero agregar primero los componentes restantes necesarios para este proyecto. Van a ser componentes bastante simples como una página Acerca de Nosotros y Contáctenos. Pero serán útiles en la siguiente sección donde veremos cómo podemos usar el enrutamiento para cambiar entre ellos. Uno de los componentes finales que necesitamos son los componentes About Us así que vamos abrir la barra lateral y crear un nuevo archivo llamado about.View. Esto va a ser bastante sencillo donde creamos unas plantillas pero ahora voy a añadir un div vacío. También crea nuestra sección de script y el nombre del componente que va a ser sobre guardar esto, y de nuevo en los componentes podemos crear nuestro segundo archivo, cual va a ser contacto.Ver para la página Contáctenos. Crea nuestra plantilla dentro de aquí, así que esto va a tener un div con la clase de contact_ wrapper, un nivel para encabezar con el título de Contacto. Después de esto, vamos a añadir nuestra dirección para la sección de contacto. En la parte superior vamos a añadir el nombre de Pizza Planet dentro de las etiquetas fuertes. Entonces podemos conformar una dirección ficticia separada por etiquetas de ruptura, añadirlas a nuevas líneas. Simplemente hagamos algo de la dirección 1, Copiar y Pegar esto en unas cuantas veces más, y también un número de teléfono y también inventar esto. Siempre hay un segundo conjunto de etiquetas de direcciones y solo va a ser para nuestro correo electrónico. Dentro de estas etiquetas fuertes agreguemos el título del correo electrónico, seguido de una etiqueta de ruptura y luego una dirección de correo electrónico dentro de los elementos P. Ahora podemos agregar cualquier dirección de correo electrónico dentro de aquí para que contacte en pizzaplanets.com. Una etiqueta de script, justo debajo de esta y única etiqueta de script necesita es un nombre de los componentes, que es el contacto y luego podemos agregar nuestros estilos justo debajo. Solo voy a agregar algunos estilos básicos para nuestro envoltorio de contactos, que se añadieron como nuestro div circundante. Esta es una clase, lo que los fondos quiero agregar un valor hexadecimal de f1e6da, una altura a los componentes del 100 por ciento de la altura de la ventanilla, voy a aplicar por algún margen y relleno, lo que 10 pixels y también lo mismo para nuestro relleno. El siguiente componente va a ser para el Delivery Info por lo que esta es Entrega.Ver. Comienza con la plantilla como de costumbre, un div circundante, que va a tener la clase de info_block. Un título de Delivery Info y voy a añadir las tildes a cualquiera de los lados. Un segundo div después de esto con la clase de contenido de bloque info. Sólo para que podamos apuntar a esto dentro del CSS. Podemos agregar algún texto de muestra dentro del elemento P así que voy a teclear lorem, golpear Tab para obtener algunos datos de muestra. Después de esto, podemos agregar en una imagen. Para la fuente de imagen, podemos agarrar esto de nuestra carpeta de imágenes. Esto está dentro de activos/imágenes, y luego el nombre de delivery.png, los textos alt de la imagen de entrega. Entonces todo lo que necesitamos hacer después de días es agregar nuestro script, que va a tener el nombre de nuestros componentes, que va a ser entrega. Los siguientes dos componentes de historia y guía de pedidos van a ser bastante similares. Voy a copiar todos los contenidos de este archivo, crear un Nuevo archivo y esto va a ser Historia.Ver, Pegar en los contenidos. Todo lo que tenemos que hacer aquí es cambiar el título de la historia, la imagen es planets.png, el texto alt de la imagen del planeta. Entonces el nombre del componente de la historia, guarde esto y el último que necesitamos crear es para la guía de pedidos, basada en los mismos datos, y podemos hacer uso de esto. El texto de cómo ordenar la fuente de imagen en lugar de entrega va a ser order.png, el texto alt de toda la imagen y luego finalmente el título de guía de pedidos. Esto es ahora para nuestros componentes y la mayor parte del proyecto está ahora configurado. No necesitamos registrar ninguno de estos componentes porque los estaremos mostrando usando enrutamiento en la siguiente sección. 21. Instalación y configuración del router: Bienvenido de nuevo a esta nueva sección. Aquí, vamos a dar una inmersión en el Vue Router. El Vue Router nos permitirá crear rutas, para navegar a diferentes partes de nuestra aplicación. Por el momento, sin el router, solo agregamos en un componente en el que estamos trabajando en el archivo app.js. Podemos ver en la pantalla, un router nos permitirá cambiar entre componentes para diferentes URL o páginas. Esta aplicación se construye como una aplicación de una sola página. Esto es bastante común para los proyectos JavaScript. Utilizamos webpack para agrupar todos nuestros componentes y dependencias todos juntos en un solo archivo de paquete principal. Esto significa que cuando visitemos por primera vez nuestra aplicación, solicitaremos este paquete al servidor. El servidor generalmente devolverá sólo la página de índice en todos los casos, y luego JavaScript maneja el cambio entre las páginas. Todos nuestros componentes dentro del navegador sin tiempo para hacer otra solicitud al servidor. De ahí el nombre aplicaciones de una sola página. Esto da como resultado que nuestra aplicación funcione realmente rápido ya que este JavaScript es mucho más rápido que un viaje de ida y vuelta al servidor para buscar una página cuando la necesitamos. Para empezar con el Vue Router, primero necesitamos instalarlo. Podemos hacerlo usando el enlace CDN, que está disponible en el sitio router.vuejs.org. Si te diriges a la instalación, puedes agarrar el enlace CDN desde aquí, o podemos instalar el módulo usando npm, y esto es lo que vamos a estar haciendo ahora. Encima en los proyectos en Visual Studio Code, dirígete a la terminal. Voy a instalar esto con npm i, y el nombre del paquete de Vue Router. Una vez que esto haya terminado de instalar, podemos pasar al main.js, y empezar a configurar esto. El archivo está ayudando a crear e importar. está tirando de nuestro módulo de nodo. Por lo que necesitamos importar el Vue Router. y el nombre del paquete era vue-router. Además, ya que utilizamos módulos o archivos separados que webpack agrupa juntos, podemos declarar que queremos usar este router en todos nuestros archivos agregando view.use. Dentro de la vista.use pasamos luego nuestro router de vista. Esto está disponible en todos los archivos, lo que significa que no necesitamos agregar la declaración de importación en la parte superior de cada archivo. Después necesitamos configurar la nueva instancia de Vue Router, que tomará un objeto. Justo debajo de esto, podemos configurar nuestras constantes llamadas Router. Esto hasta ser una nueva instancia de Vue Router. Objetos personales. Estaremos sumando a este objeto para toda esta sección, comenzando en el siguiente video, donde realmente configuraremos nuestras rutas. Entonces podemos inyectar nuestro router en la instancia de vista simplemente soplar agregando en este nombre constante de router. Dentro de la nueva instancia vista, pasando nuestro router. Con esto ahora en su lugar, nuestro router está configurado, y listo para agregar algunas rutas para cambiar entre componentes. Esto es a lo que llegaremos en el próximo video. 22. Creación de nuestras rutas: Tenemos nuestro router ahora instalado. Es hora de agregar algunas rutas que nos permitan cambiar entre páginas o componentes llamando al archivo main.js, que agregamos nuestra ruta a instancia en el último video. Podemos o agregar nuestras rutas directamente dentro de aquí, o para mantener las cosas bonitas y limpias. Voy a configurar una nueva constante llamada rutas y crear una nueva matriz justo encima de los routers y array, que podemos agregar un objeto, comer rutas. Dentro de este objeto, necesitamos definir un camino. Empecemos por crear nuestros objetos. Podemos pasar en la propiedad camino. Después agregamos la ruta a la que quieres navegar. El camino Inicio es la vara hacia adelante. O por ejemplo, si agregamos menú de slash forward, estas serán nuestras URL que son como pizzaplanet.com/menu. Empecemos con las rutas domiciliarias. Entonces necesitamos declarar qué componentes queremos renderizar cuando el usuario visita la ruta de la varilla delantera. Voy a navegar a los componentes del hogar. También necesitaremos importar este componente en tan solo un momento. Las segundas rutas que voy a añadir son para el menú. Nuevamente, como cadena hacia adelante menú de slash, que se va a mapear a un componente, con el nombre de mi nuevo. Entonces arriba en la parte superior de este archivo como siempre, podemos importar nuestros módulos, todos nuestros componentes. Importación, el componente de casa. Esto es de nuestro directorio de componentes, que es. /componentes/hogar. Estos otros comandos van a ser nuestro menú, el mismo archivo path componentes/menu. Ahora tenemos nuestras dos rutas configuradas cuando X necesita, pasarlas a nuestra incidencia de router. Desplázate hacia abajo, es mientras que las rutas una constante, todo lo que necesitamos hacer es simplemente pasar nuestras rutas desde arriba y asegurarnos de que se trata de rutas para permitirnos cambiar entre estas rutas, necesitamos modificar los enlaces de navegación de encabezado. Pasemos al encabezado W. Necesitamos usar un componente de enlace de router, navegar entre estas rutas. Para empezar, voy a comentar el enlace existente. Vamos a comentar el a link, el menú de inicio, también los contactos y también sobre nosotros, cualquier lugar podamos agregar un link router. El enlace del router simplemente se parece a cualquier otro elemento HTML. Enlace de guion de router, esto tiene una abertura y también una etiqueta de cierre. Tenemos que cerrar esto. Dentro de la etiqueta de apertura, después podemos agregar la propiedad To y luego agregar una tira inclinada hacia adelante. Estas propiedades To que acabamos de agregar es la ruta a la que se desea enlazar y es mucho es una de las rutas que acabamos de configurar en el main.js, se renderizarán los componentes correspondientes. Dentro de nuestro enlace router, podemos volver a pasar nuestro enlace usando los elementos a, el nombre del enlace de casa, y luego cerrar nuestro enlace teniendo cuidado de no agregar la propiedad href dentro de aquí, ya que usamos el router de vista para manejar todo esto. Voy a copiar nuestro enlace router, desplácese hacia abajo hasta nuestro Menú. A continuación, puede cambiar el enlace del enrutador para que sea la ruta del menú de la línea inclinada hacia adelante. El título de menú baja a Contratistas. El camino es hacia delante contactos de slash y luego finalmente el mismo para aproximadamente. Ahora el router de vista sabe exactamente qué componentes queremos renderizar para cada ruta. Pero también necesitamos decirle al router de vista exactamente dónde queremos que se muestren en nuestros proyectos sobre en el archivo app.view. El paso final es agregar los componentes de la vista del router. Por el momento tenemos el admin y el home exhibiendo al mismo tiempo en su lugar, podemos agregar la vista del router. Esto tiene una abertura y también una etiqueta de cierre y esta será la ubicación donde se mostrará el componente renderizado. Esto básicamente actúa como una salida para el componente que se seleccione del menú. Esto significa que ahora podemos eliminar todos los componentes de nuestro script a continuación, aún necesitamos el encabezado de la aplicación para que podamos dejar este en o podríamos quitar el menú Admin y home. Ya no necesitamos estos. También podemos limpiar nuestros componentes, dejando solo el encabezado de la aplicación. Con todo esto ahora en su lugar, podemos poner en marcha nuestro servidor de desarrollo con npm run serve. Dirígete al navegador y podemos abrir esto en nuestra olla, que es localhost 8080. Contamos con nuestro componente de hogar. Vamos a dar click en esto. Podemos entonces ir a nuestro enlace de menú y decimos que esto se renderiza justo debajo. De vuelta al hogar. Recuerda en el main.js, solo configuramos el Inicio en las rutas del menú. Si hacemos click en el contacto y sobre nosotros, aún no tenemos ningún contenido. Ahora está en su lugar. Pasemos ahora al siguiente video, donde echaremos un vistazo a los componentes de enlace del router con más detalle. 23. Enlace del router con más detalle: En el último video, agregamos con éxito el enlace del router. El vínculo entre caminos dentro de nuestra aplicación. Si nos dirigimos al navegador y luego vamos a hacer clic derecho e inspeccionar, podemos abrir las herramientas de desarrollador y echar un vistazo más de cerca a la salida el código. Si buscamos nuestra sección de cabecera, abre esto hacia arriba y luego hacia abajo en nuestro enlace de navegación, vemos que tenemos nuestra lista desordenada. Dentro de nuestra lista desordenada, tenemos nuestros ítems de lista donde tenemos nuestro enlace renderizado aquí dentro. No obstante, si ahora abrimos el enlace, vemos un segundo un elemento anidado por dentro. Sí sabemos si vamos al encabezado, al archivo de vista, que deberíamos tener un solo enlace a porque agregamos esto en el último video. ¿ Por qué vimos dos enlaces en su lugar? Bueno, esto se debe a que por defecto, el componente de enlace del router renderiza una etiqueta. Podemos cambiar esto agregando un never prop llamado tag, lo que nos permitirá configurar el link del router para que sea un tipo diferente de elemento. Voy a pasar a la cabecera. Dentro de nuestro enlace de enrutador, justo después de los dos prop, podemos agregar una segunda sonda llamada Tag y configurar esto para que sea un elemento de lista. Esto también significa que ahora podemos quitar las etiquetas li circundantes ya que no las necesitamos. Elimina esto y también la de abajo. También podemos eliminar los comentarios. Esto está en nuestras boutons. Podemos hacer lo mismo justo arriba. Podemos quitar el último elemento, configurar una etiqueta para que vuelva a ser un elemento de lista y hacer lo mismo para los dos primeros. El menú quitar el elemento de lista, etiqueta de li y finalmente lo mismo para los componentes de casa. Dale a esto un Guardar y volver a las herramientas de desarrollador. Si le damos a esto un Refresh, ahora podemos volver a nuestro encabezado, a la navegación, a la lista desordenada y abrir uno de nuestros ítems de lista. En el interior vemos un solo enlace se renderiza y aún tenemos el elemento de lista circundante. Enlace se parece más a que debería ser. También verás que hay algunas clases agregadas al elemento de la lista circundante. Hay enlace de enrutador, exacto activo, enlace de enrutador activo dos. Enlace del router exacto significa que la ruta debe ser una coincidencia exacta. A modo de ejemplo, al usar la ruta de inicio, tenemos la barra delantera por sí misma. En otra ruta, como barra hacia adelante mi nuevo, esto también comienza con una barra inclinada hacia adelante dos. Sin esta clase exacta, predeterminados exuberantes serían mucho para todas las rutas. En la clase exacta significa que la totalidad de la ruta debe ser una coincidencia exacta en lugar de simplemente mirar la barra inclinada hacia adelante al principio. La segunda clase añadida es el enlace de router activo. View router agrega automáticamente esta clase al enlace activo actual. Podemos ver esto en acción cuando hacemos click en los enlaces anteriores. Si vamos a Contáctanos, vemos que esto ahora se está retirando. enlace del router activo ahora se está colocando en el nuevo enlace de contacto. También podemos aprovechar esta clase para agregar algunos CSS personalizados. Es posible que también te estés preguntando por qué usar el enlace del router en absoluto. Después de todo, ya teníamos una etiqueta donde solo podíamos añadir un enlace también. Bueno, hay algunas razones por las que usar el enlace del router es un mejor enfoque. En aplicaciones de una sola página, la idea es que hagas una solicitud al servidor para cada página de inicio. Cada página después es entonces conmutada por el router dentro del navegador por lo que no necesitamos seguir haciendo solicitudes al servidor. uso del enlace del router intercepta el evento click para que el navegador no intente volver a cargar cada página. En cambio, simplemente cambia entre los componentes. Esta es una de las razones por las que no atribuimos nuestro el odio el un enlace porque esto hará una nueva solicitud al servidor. También, pronto estaremos viendo diferentes modos llamados Historia y duro y los repasaremos pronto. Poner link router también nos permite cambiar entre estos modos, sin hacer ningún cambio extra. Esto es solo algunos detalles extra para hacer que el enlace del router renderice exactamente como queríamos. 24. Rutas vinculantes y dinámicas: En ocasiones cuando creamos rutas, tenemos que tener en cuenta que los caminos a ciertas páginas también pueden cambiar. Por ejemplo, dentro de nuestra URL, podríamos ir a las rutas de inicio y luego tener usuario de slash forward y luego reenviar slash algún nombre de usuario. Esta sección de nombre de usuario será por supuesto diferente para cada usuario. Por lo que puede que queramos utilizar los mismos componentes para cada usuario conectado o el menú podemos tener algunas secciones diferentes. Podemos tener menú de slash forward y luego por ejemplo, podemos tomar bebidas, o podemos comer. Es posible que deseemos mostrar los mismos componentes del menú, pero simplemente salte a diferentes secciones de nuestro menú. No obstante, esto será difícil debido a las rutas para el router, como ya hemos aprendido, necesita ser una coincidencia exacta. Para este caso de uso, podemos usar la coincidencia de ruta dinámica en, que implica decirle al router de vista, qué partes de la URL pueden cambiar y podemos hacerlo en las rutas sobre en el punto principal js. Pasemos a este archivo y podemos configurar el segmento dinámico agregando dos puntos seguidos del nombre de nuestra elección. Por lo que dentro del menú, podemos agregar una barras inclinadas hacia adelante y luego usar los dos puntos para declarar que esta sección será una parte dinámica de la URL. Al agregar esto, los componentes del menú se mostrarán cada vez la URL termine con el menú de barras inclinadas hacia adelante y luego reenviar cualquier nombre dentro de aquí. El segmento dinámico también puede ser cualquier parte de la URL dependiendo de la necesidad particular. Por ejemplo, podríamos tener una sección dinámica y luego una barras inclinadas hacia adelante y luego una sección codificada. Esto es útil para cosas como las secciones de administración, donde podemos tener una barras inclinadas hacia adelante, un ID de usuario y luego por ejemplo, órdenes de barras inclinadas hacia adelante. Otra cosa a destacar también, que este nombre que le dimos a la sección dinámica, también actúa como variable. Podemos acceder a los datos dentro de nuestros componentes mediante el uso de este nombre de variable. Entonces si pasamos a los componentes del menú, vista de puntos del menú, y luego nos desplazamos hasta la parte superior de nuestras plantillas justo encima de nuestra sección de menús aquí. Dentro de las llaves dobles, podemos utilizar $ symbol route para acceder a toda la información de nuestra ruta. Queremos acceder a los parámetros desde params de punto y luego el nombre variable de los ítems. Dale a este archivo un guardado y más al navegador dentro de la URL. Podemos entonces acceder a nuestro enlace. Entonces vamos por el menú de barras hacia adelante y luego nuestra sección dinámica, que puede ser cualquier palabra que elijamos, voy a agregar bebidas hit Enter. Ahora vemos que nuestros componentes de menú se han renderizado y esto también se extrae los parámetros de URL y voy a poner esto a la pantalla. Esta es alguna funcionalidad que no necesitamos en nuestra aplicación, así que voy a eliminar esto y restaurar el menú de vuelta al menú de barras inclinadas hacia adelante. Pero esto es algo realmente útil saber cuando se usa el enrutador de vista. También en el menú, puedes cambiar esto para que sea menú de barras inclinadas hacia adelante. Si bien también desea someter las secciones dinámicas, las rutas reales en el componente de enlace del router también pueden ser dinámicas. Por ejemplo, si pasamos a la vista de punto del encabezado dentro de nuestro enlace del router, las dos indicaciones que sí teníamos un valor codificado duro de menú de barras inclinadas hacia delante, contacto y sobre. También podemos hacer que estos sean dinámicos también agregándolos a nuestra instancia de vista. Por lo que bajo el nombre podemos agregar una propiedad de datos. Nosotros también vamos a devolver un objeto. Dentro de aquí voy a sumar cuatro valores de datos. El primero va a ser el enlace de inicio. Configura esto como nuestra cadena de barras inclinadas hacia adelante, el enlace de menú dos, que es menú de barras hacia adelante, el enlace de contacto del contacto de slash hacia adelante y luego finalmente el enlace sobre en la parte inferior de la slash hacia adelante sobre. Después podemos usar estos nombres de datos arriba en el enlace del router, con el prefijo de dos puntos para indicar que esto es dinámico. En lugar de este valor de cadena codificado, podemos agregar al colon justo antes y podemos configurar esto para que sea home link. Lo mismo para el menú. Este va a ser enlace de menú. Podemos agregar el colon a esto y haremos lo mismo y justo debajo para nuestros dos enlaces finales, agregar el colon. Este es enlace de contacto y la sección sobre, este es el enlace sobre. Di esto, y dirígete al navegador y vayamos al hogar. Se ve la varilla hacia adelante al final, el menú hacia adelante contacto de barras inclinadas y finalmente sobre. Esto es tal vez algo que no necesitarás usar mucho. No obstante, es bueno saber que esto está disponible si tenemos un caso de uso para ello como si necesitamos crear dinámicamente una URL e insertar cualquier variable en ella. Después podemos agregar estos a nuestra propiedad de datos y luego actualizar la URL en consecuencia. Entonces esto es todo ahora para el enrutamiento dinámico. En el siguiente video, vamos a echar un vistazo a exactamente qué es este hash dentro de la URL echando un vistazo al historial en modos hash que proporciona el router. 25. Historia y modos de hash: Es posible que ya hayas notado que desde que empezamos a usar el router de vista, se ha agregado un hash al final de la URL. Esto se debe a que de forma predeterminada, el router está configurado en modo hash y la razón por la que se agrega este hash es para evitar una recarga de página cuando cambia una ruta. Antes mencioné que al usar aplicaciones de una sola página, solo queremos enviar la solicitud al servidor para la página principal de índice solamente. Después las rutas se hacen cargo desde allí y conmutan entre componentes sin enviar solicitudes de servidor. Este modo es útil para nuestras aplicaciones de una sola página, pero generalmente, no queremos tener un hash dentro de la URL, ya que se vería mucho más bonito sin uno. Para eliminar el hash podemos cambiar el modo hash al modo historial y podemos hacerlo de nuevo en el archivo main.js. Vayamos a allá y podemos agregar el modo de historial a nuestros objetos de router. Justo debajo de nuestro objeto router donde agregamos nuestras rutas, podemos agregar el ajuste de modo y cambiarlo para que sea una cadena llamada Historia. El modo Historial aprovecha la API de historial HTML5, que nos permite cambiar una URL en particular sin necesidad de refrescar. No necesitábamos agregar el modo hash antes a nuestra instancia de router de vista porque esto es predeterminado. Ahora si guardamos este archivo y pasamos a nuestra aplicación, click en el enlace Inicio. Ahora vemos que el hash se ha eliminado y lo mismo si hacemos clic en nuestros enlaces sobre. Esto ahora se ve mejor, pero también crea un pequeño problema que necesitamos solucionar. También necesitamos configurar nuestro servidor para manejar esta nueva configuración. Nuestro servidor necesita devolver el índice o HTML en todos los casos, incluyendo cualquier error 404. Una vez que esto ha sido devuelto, el router toma el control y maneja la conmutación entre los componentes en el front-end. Si lo haces en una aplicación de producción real, encontrarás algunos ejemplos de configuración del servidor en la documentación del router vue. Si vas a la documentación del router vue y dentro de nuestra opción de modo historial HTML5. Aquí, si nos desplazamos hacia abajo, podríamos encontrar algunas configuraciones de servidor de ejemplo donde podemos ver estos ejemplos para diferentes tipos de servidor y esto es algo a lo que volveremos más adelante cuando se trate de hosting pero por ahora, aquí es donde se pueden encontrar algunos ejemplos de configuraciones si se utiliza un servidor diferente. El último que hay que cuidar ahora es la página index.html, que siempre se devuelve del servidor por lo que no obtenemos ningún error 404 reportado por el servidor cuando no se encuentra una URL. Si vamos a nuestro proyecto y escribimos una URL no reconocida, no obtenemos ningún componente que aparezca en la pantalla porque no tenemos ninguna configuración de rutas que coincidan por lo que necesitamos una manera de manejar este caso y echaremos un vistazo en esto en el siguiente video. 26. Captura de todas las rutas y redireccionamiento: Terminamos en el último video mencionando que desde que hemos cambiado nuestro modo de router, necesitamos una forma de manejar cualquier seguimiento por errores cuando no se encuentra una URL. Esta es una solución bastante simple. Todo lo que necesitamos hacer es agregar una ruta catch-all a estos casos y podemos hacer esto de nuevo en el punto principal js-file. Podemos crear una nueva ruta la cual la va a manejar hasta en nuestra matriz de rutas. Justo después del menú, podemos agregar unos nuevos objetos, donde el camino va a ser igual a una estrella. El star como ruta URL nos cubrirá para cualquier ruta que no se empareje arriba. Al igual que nuestras otras rutas, podemos agregar un componente para mostrar si la ruta no está emparejada. Por ejemplo, aquí podríamos agregar un componente como el siguiente de cuatro páginas. Alternativamente, también podemos agregar un redireccionamiento, que va a redirigir a cualquier página que elijamos, como la ruta de inicio. Si decimos esto y nos damos una oportunidad en el navegador, podemos agregar una URL no reconocida. Es entrar, y nos redirigimos a la ruta de inicio. Estas son algunas opciones para cubrirnos para URL no reconocidas. Podemos o bien redirigir a una página diferente o configurar unos componentes personalizados con algunas instrucciones al usuario. Este redireccionamiento también se puede utilizar en cualquier otra ruta también, no está reservado solo para la ruta catch-all. partir del siguiente video, seguiremos en el tema del enrutamiento y veremos cómo podemos agregar rutas anidadas a nuestra aplicación. 27. Rutas anidadas: Las rutas que hemos estado utilizando hasta ahora han sido bastante sencillas. Contamos con todos nuestros artículos de menú. Estás aquí en el mismo nivel sin artículos infantiles. El router nos facilita agregar rutas anidadas, agrupar rutas que se relacionan con la cantidad. Configuramos componentes en la última sección. Apenas la guía de contacto y pedidos, que se puede ver en su interior aquí. Esta idea para que agrupemos juntos como componentes hijos o anidados del enlace sobre nosotros de nuevo dentro de este archivo main.js. Podemos comenzar esto igual que cualquier otra ruta agregando nuestro objeto a nuestra matriz de rutas, podemos agregar un camino. Esta vez estamos lidiando con el enlace sobre, así que esto es barra hacia adelante sobre. Justo después de esto, también queremos renderizar un componente. Se trata de los componentes principales cuando se hace clic en. Entonces para agregar cualquier ruta hijo anidada, todo lo que necesitamos hacer es separarla por una coma. Podemos agregar la propiedad child y luego configurar esto como una matriz. Dentro de aquí, vamos a sumar algunas opciones, más o menos igual que hicimos con nuestras rutas de primer nivel. Vamos a montar un objeto donde montamos un camino. El primer camino es para la historia de barra hacia adelante. Al igual que arriba. Después renderizamos un componente. Voy a darle al componente un nombre de historia, que importará en tan solo un momento. Separado por una coma, voy a copiar y duplicar esto dos veces más. El segundo va a ser para entrega y el componente también va a ser entrega. Justo al final, vamos a reemplazar esto por la Guía de Pedidos y también la ruta que está ordenando guía de guiones. Una de las cosas a tener cuidado al anidar rutas de canal es el camino a la ruta. Al escribir rutas hijo dentro de esta matriz, también es importante la forma en que escribimos el camino. Si agregamos una barra inclinada hacia adelante al principio, el camino será tratado como una ruta raíz. Voy a agregar un ejemplo justo debajo, lo que el historial de barra hacia adelante nos dejaría con nuestra URL como pizza planets.com, forward slash history. Alternativamente, si no tuviéramos la barra delantera antes de la historia, podríamos haber escrito simplemente la historia dentro de nuestro camino. Esto será pizza planets.com. Esto tomaría en cuenta el camino del padre de barra hacia delante alrededor, luego seguido de la historia justo después. Se trata de dos enfoques diferentes todos dependientes de la barra inclinada hacia delante dentro de la ruta, dependiendo de la forma en que desee construir las URL. Sólo voy a quitar estos dos ejemplos dentro de aquí. Entonces también son una coma para separar esto sobre enlace. También podemos agregar nuestro enlace de contacto dos, pero éste está a nivel raíz junto con nuestro menú en casa. Voy a añadir esto como nuestro tercer artículo. Un camino es el contacto de barra inclinada hacia adelante y los componentes es para contactos. Cámara al final. Entonces también nuestro admin dos. Esto no está controlado por un enlace de menú, pero todavía podemos acceder a esto usando el administrador de barra inclinada hacia delante dentro de nuestra URL. Después los componentes de admin y una coma al final. Después necesitamos importar nuestros componentes los cuales desea utilizar, que son los componentes hijo y admin y contacto. Vamos a duplicar esto un par de veces más. El menú que cambia para ser admin. También necesitamos importar la página Acerca, también necesitamos contacto. También necesitamos guía de historial, entrega y pedidos. Entrega y finalmente al final necesitamos la guía de pedidos. Una vez hecho esto, dale a este archivo un guardado y dirígete al navegador. Echemos un vistazo a nuestras rutas domiciliarias. Tenemos nuestro menú todavía funcionando, el contacto-nosotros. Podemos probar nuestra barra delantera Admin. Todo esto también está funcionando. Entonces finalmente tenemos el enlace sobre nosotros el cual tiene un componente infantil. Si hacemos clic en esto, ninguno de los componentes hijo es visible. Esto se debe a que el componente de vista del router, que tenemos, si abre la app.view. Este es el componente de vista del router que tenemos actualmente. Esto renderiza el componente a la pantalla. Pero solo renderiza las rutas de nivel superior. Para mostrar un componente de ruta HL, necesitamos agregar un segundo componente de vista de enrutador anidado. Te mostraré cómo hacer esto en el siguiente video. 28. Vista del router anidado: Como descubrimos en el último video cuando hacemos clic en el enlace Acerca de Nosotros dentro de nuestro menú vemos solo el componente vacío About Us y ninguno de los componentes hijo se muestra. Esto tiene sentido porque este es el componente principal, y queremos tener control sobre cómo se muestran las rutas hijas. Para cambiar entre las rutas infantiles, necesitamos ir a los componentes sobre y luego hacer dos cosas. En primer lugar, necesitamos agregar algunos enlaces de menú para cambiar entre los componentes secundarios. Entonces para mostrar realmente estos componentes, el componente about también necesitará su propio componente de vista de router, que podemos agregar debajo del menú. Empecemos dentro de nuestro div, dentro de las plantillas principales. Queremos comenzar con un nivel tres rumbo con una tilde a ambos lados. Después el texto de, “Haga clic en los enlaces de abajo para más información.” Las etiquetas de navegación, que se va a anidar dentro de una lista en orden. Esto en lista de pedidos va a contener nuestros enlaces. Para esto, en lugar de los elementos de la lista, utilizaremos el enlace del router, asegurándonos de que se cierre justo debajo. Dentro de la etiqueta de apertura, podemos sumar nuestros dos prop, y su va a enlazar con la ruta de la historia de adelante-barra. Podemos agregar nuestra etiqueta que va a ser un elemento de lista, y luego anidada dentro de un enlace. No necesitamos el href ya que el router view va a manejar nuestro enrutamiento. En cambio, sólo vamos a añadir una clase que va a ser nav link. El texto al interior de nuestra historia y esta son nuestras primeras rutas infantiles. Voy a copiar esto. Recuerda que teníamos tres enlaces. El segundo va a ser para la guía de pedidos. Esto va a enlazar con la guía de pedidos. Entonces el texto de la guía de pedidos también. Todo lo demás está bien. El tercer y último enlace va a ser para entrega. Cambia el texto y también los dos prop, guarda este archivo y vamos a dar click en el enlace About Us en el adelante-aguanieve sobre rutas. Ahora vemos nuestro encabezado de nivel tres y nuestros enlaces de menú a continuación. El estilo también necesita un poco de trabajo, pero volveremos a esto. Si hacemos clic en los enlaces de historia, guía de pedidos, y entrega, vemos que la URL se cambia hacia arriba en los dos primeros. Estos enlaces están cambiando la URL, pero aún no vemos ningún componente que se muestre. Para verlos, como mencionamos antes, también necesitamos agregar una vista de enrutador para mostrar el enlace seleccionado justo debajo del menú. Justo después de nuestro nav, podemos agregar dentro de una vista de router. Cierra esto. Guarda esto. Ahí vamos. Ahí está nuestra información de entrega, la guía de pedidos y los componentes del historial. Por último, podemos terminar esto agregando un poco de estilo en. En primer lugar, podemos centrar el nivel tres rumbo arriba en la parte superior. Volvamos al sobre.vue. Debajo del guión podemos agregar las etiquetas de estilo, etiqueta es la h3. El texto va a ser centro y esto ahora empuja esto hacia el medio. Además, los enlaces necesitan algo de trabajo también. En lugar de repetir el estilo para estos enlaces y también el encabezado principal, voy a agregar estos como estilos globales. Voy a colocar estos en la App.vue sin la palabra clave alcance. Esta es solo mi elección personal para agregarlas aquí en este archivo. También funcionará en cualquiera de nuestros archivos sin la etiqueta de alcance. Empecemos con el cuerpo. Voy a configurar la fuente firmemente del texto Carmesí. Con un respaldo setit llano. El margen se puede restablecer a cero. También, el tamaño de fuente del cuerpo para ser 1.5em. Siguiente arriba los enlaces. El texto-decoración para ser ninguno. El color que vamos a heredar debajo de esto, podemos apuntar a la lista en orden. Voy a configurar el tipo de pantalla para hacer uso del flexbox, para que podamos justificar los contenidos en al centro. Podemos restablecer cualquier margen para ser cero. También, algunos relleno para nuestra lista de pedidos de 10 píxeles en la parte superior e inferior y cero en la izquierda y derecha. Un color de fondo. Voy a usar el valor hash de f1e6da. También necesitamos retirar las balas de nuestros artículos de la lista. Podemos hacer esto con el estilo de lista estableciendo que esto sea ninguno. Guarda esto. Pasado al navegador. También necesitamos agregar algo de espaciado entre estos enlaces. Aquí utilizamos una tilde dentro de un elemento span. Voy a agregar algún margen alrededor esto y también usar el mismo icono de tilde y justo debajo también. Volvamos al about.vue y abrimos dentro de nuestra plantilla. Justo después de cada enlace del router, podemos agregar un span, el icono de tilde, y copiar esto, pegarlo justo después de nuestra guía de pedidos. Estoy trabajando en estos como estilos globales de vuelta en la App.vue. Justo después de nuestro elemento de lista, podemos etiquetar el span y establecer el margen de cero en la parte superior e inferior y cinco píxeles en la izquierda y la derecha. Pasado al navegador. Ahí vamos. Todavía hay un estilo pequeño que añadir a nuestro proyecto pero volveremos a esto más adelante en el curso. Con nuestras rutas anidadas ahora funcionando, veré la próxima vez donde cubriremos usando rutas de nombre. 29. Añadir nombres a las rutas: Si regresamos a nuestro main.js, donde hemos declarado todas nuestras rutas para nuestra aplicación. Todas las rutas que hemos creado hasta el momento han utilizado una cadena para especificar la ruta de la URL a la que desea navegar. Tales como barra inclinada hacia adelante, menú barra de ruta, contactos de barra de ruta y también sobre. Esto funciona perfectamente bien y no hay nada de malo en usar este enfoque. Existe una alternativa, sin embargo, que puede ser más conveniente, sobre todo para caminos más largos. Esta alternativa es agregar un nombre a la ruta. Podemos hacer esto dentro de los objetos de rutas, o necesitamos hacer es agregar la opción de nombre. Entonces dentro aquí podemos especificar como una cadena y nombre el cual quieres darle a esto. Voy a añadir al enlace de inicio y luego una coma justo después. Estos nombres son totalmente de ti. Simplemente ve con algo que mejor describa la ruta dispuesta a consumir. También podemos agregar esto a todos nuestros objetos sobre también, pegarlo en. El segundo va a ser para el enlace de menú. El siguiente, éste es para el enlace de contacto. Entonces el enlace admin. También podemos sumar esto a nuestras rutas canalizadas a, esto no es solo para nuestras rutas de primer nivel. Podemos agregar esto para nuestro enlace de historia, la entrega, y también para nuestra guía de pedidos también. Ahora todo lo que tenemos que hacer es guardar este archivo. Voy a hacer uso de estos dentro de nuestros menús, empezando por el header.view. Dentro de nuestro router, ya tenemos alguna forma de rutas de nombre, cual se configuró a principios de la sección. Cada uno de estos nombres se vincula dinámicamente a nuestra propiedad de fechas. Para hacer uso de los nombres acabamos de configurar en un router. Dentro de nuestras cotizaciones, necesitamos pasar esto como objeto, pasando en el nombre donde el valor es el nombre de nuestro enlace. A continuación, podemos hacer lo mismo para todos los objetos de enlace de menú que pasan y establecer el nombre como una cadena. Entonces podríamos hacer lo mismo para el enlace de contacto y también sobre. Estos también necesitan el colon dinámico para atar esto igual que antes. Pero ahora podemos eliminar la propiedad date entre esas etiquetas de script ya que ya no necesitamos esto. Limpiemos esto. Entonces podemos ir al about.view, donde también tenemos un menú a estos no son actualmente dinámicos. Tenemos que sumar al colon, para atar esto. Podríamos eliminar esto y fuera de los objetos con la propiedad de nombre y el valor de nombre, que va a ser enlace de historia. Lo mismo para la guía de pedidos, justo debajo. Sujetar nuestro objeto con el nombre. Esto era ordenar enlace guía. El parto en el colon, abroche nuestros objetos. Este era enlace de entrega. Esto ahora debería ser cuidado de todos nuestros enlaces. Todo lo que tenemos que hacer ahora es probar nuestros enlaces, sigue funcionando en el navegador. Vamos a pasar. Tenemos el hogar, el menú, contacto, y navegadores. El enlace sobre está funcionando. Vamos a echar un vistazo a esto en el encabezado, esto sólo tiene que ser sobre, di esto. El enlace sobre ahora está funcionando. Podemos probar las rutas anidadas. Historia, guía de pedidos y entrega. Nuestra URL se actualiza con la URL correcta. A pesar de que ahora hacemos referencia a esto por un nombre. Es así como podemos agregar nombres a nuestras rutas, y a continuación veremos cambiar rutas sin necesidad hacer clic en enlaces usando router.push. 30. Métodos de navegación del router: Todas las navegaciones que hemos realizado hasta el momento, han sido resultado de utilizar el componente de enlace del router para llevarnos al camino que especificamos. También existe una forma alternativa de hacerlo, sin embargo, mediante el uso de código para navegar programáticamente. Si pasamos a los componentes home.vue, dentro de la carpeta de componentes, agregamos un botón en la línea siete aquí para llevar al usuario al menú. Aún no hemos agregado ningún enlace a este botón. Pero también podemos usar el router para empujar a cualquier ubicación. Voy a empezar agregando un oyente de clics a este botón dentro de la etiqueta de apertura. Entonces use [inaudible] click. Ahora voy a usar esto para figurar un método al que voy a llamar Ir al Menú. Desplázate hacia abajo hasta nuestro guión. Entonces podemos configurar esto justo después de nuestra propiedad de nombre. Podemos configurar nuestros métodos y nuestro nombre de método de Ir a Menú. Podemos acceder a cualquier método que se haya proporcionado con el router vue dentro de esta instancia vue usando este router. $. Recuerda cualquier prefijo con este $ indica que esto es nativo de vue.js, o en este caso el paquete del router en lugar de un método personalizado que hemos creado nosotros mismos. Aquí podemos echar un vistazo a algunos de los métodos de navegación proporcionados por el router. router Vue nos da la opción de navegar hacia atrás o hacia adelante accediendo al historial del navegador. Hace este extraño router.go, y este es el primer método que vamos a ver. Esto toma un solo argumento para declarar cuántas páginas queremos mover. Los números positivos moverán las páginas hacia adelante en el historial del navegador. Números negativos, retrocederán una página en el navegador. Podemos probar esto yendo a nuestra aplicación. Entonces dale a esto un ahorro. Vamos a dar click en el “Menú”, y vamos a dar click en “Inicio”. Ahora si hacemos click en el botón del lado izquierdo, debería llevarnos de vuelta una página que era al menú. Probemos este más. Si vamos al enlace sobre y luego a casa, haga clic en este botón nos debe llevar de vuelta a la página Acerca de. Este número también puede ser más de uno también, si tienes un caso de uso para esto. Otro método que está disponible en el router es router.replace. Esto se utiliza para reemplazar la URL actual por la que agregamos dentro de estos corchetes. Entonces si quisiéramos ir al menú, podríamos agregar una cadena de menú de barras inclinadas hacia adelante, hacia el navegador. Vayamos al Contáctenos, luego a “Inicio”. Haga clic en el botón. Esto luego nos empuja a la página del menú. O justo como lo vimos en el último video. También podríamos pasar en un objeto y usando rutas con nombre pasando la propiedad de nombre. Entonces nuestro enlace de menú, que configuramos. Vamos a darle una oportunidad a esto. Contactos, casa y esto aún nos empuja al menú. No obstante, existe un inconveniente potencial al usar este método de reemplazo. Te lo mostraré ahora. Si vamos por ejemplo, a la página Acerca de y luego hacemos clic en “Inicio”, haga clic en el botón “Pedimos”. Si luego navegamos de nuevo usando el botón Atrás del navegador, esto luego nos lleva de vuelta a la Página Acerca de Nosotros en lugar de a la página de inicio que era los componentes anteriores. El motivo por el que esto sucede es como su nombre indica, se sustituye el historial de navegación en lugar de agregarse a. Si queremos este enlace, vamos a ser agregados al historial del navegador para que podamos utilizar los botones Atrás de esta manera. Hay otro método disponible para nosotros llamado router.push. Esto también se utiliza para navegar a una URL diferente. Pero la diferencia son las rutas y son empujadas al historial de navegación en lugar de reemplazadas. Vamos a darle una oportunidad a esto. Cambios a empujar. Haremos lo mismo que antes, iremos a Acerca de, a Inicio, haga clic en el botón, que nos lleva al menú. Ahora si volvemos atrás, ahora estamos tomando en el componente de casa en lugar del About Page. Ambas formas están bien de usar, pero claro, depende del comportamiento que quieras lograr dentro de tu app. 31. Protectores de navegación global: En ocasiones al navegar entre rutas, queremos realizar una acción incluso antes de que la ruta sea navegada también, o justo después. A modo de ejemplo, estaremos configurando alerta abierta para que se cargue justo antes de que la página de administración sea navegada también, lo que le dirá al usuario que se trata de un área restringida, y primero necesitarán iniciar sesión. Además, al salir del administrador, también aparecerá una alerta, que le dirá al usuario que estarán automáticamente desconectado al salir de esta zona de administración. Esto es por razones de seguridad. Los peligros de VueRouter cubrieron este caso de uso al proporcionarnos guardias de navegación, como los ganchos de instancia de Vue. Los guardias de navegación nos permiten engancharnos a ciertas etapas de la navegación. Además, podemos añadirlos ya sea globalmente para toda nuestra app o aplicarlos localmente a ciertas rutas. Empecemos echando un vistazo a lo global antes-cada guardias. Esto lo estoy viendo en el main.js. Después de nuestro router aquí, podemos acceder a nuestras rutas disponibles y luego acceder a él antes de cada gancho. Esto va a tomar en una función, y también toma tres argumentos, que vamos a echar un vistazo en un momento. Además, al tratarse de un gancho global, el código que agrega se ejecuta cada vez que se activa cualquier acción de enrutamiento. Por ejemplo, mira agrega una alerta que detecta desactivada la navegación disparada. Si ahora guardamos esto y pasamos al navegador, vemos las alertas que aparecen de inmediato, y también para cada enlace de navegación en el que hacemos clic. Esto funciona bien, pero note que no hay componentes de página en la pantalla. Esto se debe a que la acción de enrutamiento no se completará hasta que llamemos a una función llamada siguiente. A continuación se presenta uno de los tres argumentos a los que podemos pasar antes de cada uno. El primero es a, y esta es la ruta en la que navegamos. El segundo es de, y esta es la ruta que nos vamos. Entonces finalmente tenemos la siguiente función, y es esta siguiente función la que puedes pasar para completar la navegación y cargar los componentes de página. Si ahora vamos por encima, haga clic en la alerta, se completa la acción de enrutamiento. Después pasamos a los componentes de página en los que hemos hecho clic. Esta siguiente función le dirá al router Vue que pase al siguiente gancho de navegación, si hay uno disponible. Si no hay más ganchos disponibles, entonces como hemos visto aquí, la navegación no está confirmada. También podemos detener esta navegación si tenemos un caso de uso para esto, al pasar un valor booleano de false. Esto evitará entonces que los componentes de la página se carguen. Esto será lo mismo para cada ruta de navegación. Ya mencionamos antes también tenemos acceso a los datos de ida y de origen, que también pasamos como argumentos. Para ver estos, podemos pasar en un registro de consola, tomando el valor a, y podemos ver exactamente qué datos se proporcionan aquí. Entonces hagámoslo al navegador y haga clic con el botón derecho en Inspeccionar, y luego haga clic en la consola. También, como nota al margen, si se reduce de nuevo, no hay mensaje de error de consola en el navegador. Este es un escenario en EsLint. ESLint se proporciona al configurar la CLI de Vue. Esto se utiliza para comprobar el código en busca de errores. En ocasiones por defecto, al usar ESLint, los mensajes de la consola proporcionarán un error. Entonces si necesitas deshabilitar esto, dirígete al package.js en el archivo, abre esto, y dentro de aquí tendremos un ES llamado config objects. Dentro de este objeto, si nos desplazamos hacia abajo, dentro de los objetos reglas, necesitamos agregar un valor de nombre par de ninguna consola y apagado. Si agrega esto, guarde el archivo y luego reinicie el servidor de desarrollo. Entonces no debes tener problemas para ver la consola, incapaz de continuar con el resto del curso. También, de nuevo, con ESLint, puede que tengamos que eliminar cualquier variable no utilizada slash remove de un siguiente, y echar un vistazo al objeto dentro de la consola. Vamos, por ejemplo, dar clic en el menú y abrir este objeto que se proporciona de antes de cada uno. Entonces este es el camino en el que navegamos. Vamos al menú. Este es el nombre del router. Podemos ver si se ha pasado algún parámetro, y tenemos acceso a alguna de estas propiedades dentro de nuestro código. lo tanto, en lugar de usar el registro de la consola, por ejemplo, podría agregar una sentencia if para comprobar si para y acceder a la ruta va a ser igual a la pantalla o al menú de la slash hacia adelante. Si lo es, vamos a seguir por las rutas y diremos otra cosa. Siguiente va a ser igual a falso. Esto ahora permitirá que el router sólo vaya a los componentes del menú y cualquiera de las páginas será bloqueada. Ya que ahora hacemos uso de lo siguiente, también podemos pasar en el resto de nuestros argumentos. Entonces, a partir de ahora, digamos que incluso diríjase al navegador. Entonces ahora si hacemos click en las rutas de inicio, no vemos ningún componente. Si hacemos click en el menú, hemos permitido que estos se carguen ya que la ruta es igual al menú. Probemos contactos y esto está bloqueado. Lo mismo con de nosotros, y también regresar de vuelta a casa junto con antes de cada uno. También tenemos disponible el after-each guardia global para. Como sugiere el nombre, esto se llama después de que se confirme cada navegación. Esto no puede afectar a la navegación porque se realiza una vez completada la navegación. Por lo tanto, no recibe la siguiente función como argumento. Por lo que llamar en la siguiente función no es necesario también. Podemos volver a ver esto pasando en alerta, y cualquier texto dentro de aquí, diremos después de cada uno, guardar y pasar al navegador. Nuevamente, puede que no utilicemos necesidad de argumentar, por lo que puede que tengamos que eliminarlos. Vemos la alerta, dar click en Ok, contáctanos, y esto está cargado bien también. Entonces como se puede ver, incluso sin la siguiente llamada, componentes de las páginas todavía se renderizan, y vemos la alerta mostrada como se esperaba. Este es un gancho nunca útil el cual puede ser necesario si necesitamos realizar una acción después de que la ruta haya terminado de realizarse. Nuevamente, estos son dos guardias globales que se van a utilizar para cada ruta. En el siguiente video, vamos a echar un vistazo a los guardias de componentes, que sólo afectarán a los componentes que estamos navegando hacia y desde. 32. Protectores de los componentes: En el último video, miramos a los guardias de navegación globales, lo que afectará a toda nuestra aplicación. Una alternativa a esto es agregar sólo una guardia dentro de un componente. De esta manera, sólo los componentes que se naveguen hacia y desde se verán afectados por la guardia. Lo primero que voy a hacer es quitar la guardia global del último video dentro del main.js para que, la alerta no se presente para cada navegación. Entonces voy a dirigirme a los componentes admin.view y comenzar con la carpeta de componentes. Voy a añadir una guardia dentro de estos componentes. Voy a empezar con el antes de la ruta entrar guardia, y sumémoslo justo después de nuestros componentes. Esto se puede agregar en cualquier lugar de la instancia de vista, y el nombre va a ser antes de sensor de ruta, que de nuevo va a tomar en y también siguiente como argumentos, añadir una coma para separar esto de los métodos animales para agregar [inaudible] propiedad justo arriba para trabajar con. Podemos devolver algunos datos. Añadamos un nombre, propiedad y añadamos tu nombre dentro de aquí. Antes de la ruta entrar se llama antes de la ruta, que cuando es componente se confirma. Aquí voy a crear una alerta la cual va a decir hola al usuario. Tenemos el nombre del usuario justo arriba dentro de la propiedad dates. Voy a agregar esto como una cadena de plantilla dentro de las garrapatas traseras. Se puede agregar dentro de nuestra variable, que va a ser este nombre. Descartar está dentro del componente admin solamente. Vamos a darle a esto un guardado y diríjase al administrador vinculado para ver esta acción. También es posible que necesitemos eliminar nuestros argumentos libres para que esto funcione. Hacemos click en cualquiera de estos enlaces, no vemos la alerta. Intentemos salir a las rutas de administración de slash localhost. No vemos la alerta que se acabaría de configurar. Vayamos a la consola y echemos un vistazo. Vemos un mensaje de error rojo no puede leer el nombre de propiedad de indefinido. Esto puede no ser inmediatamente obvio cuál es el problema aquí. De hecho, no hay nada malo en cómo configuramos la propiedad de nombre. De hecho, el problema ocurrirá si tratamos de acceder a algo desde nuestra vista incidencia. El motivo detrás de esta zona es porque se llama al guardia antes de que se haya creado el componente. Es por ello que no tenemos acceso a los datos sobre nuestra incidencia de vista. Si necesitamos agregar nuestros datos de instancia de vista dentro de este gancho, necesitamos agregar un trabajo alrededor. Para ello, necesitamos pasar una llamada de vuelta a la siguiente función. Tenemos de nuevo que sumar a partir de también siguiente. Podemos pasar en la siguiente función, que va a agregar una función de devolución de llamada, que se ejecutará una vez que se haya creado un componente. Dice sobre la función dentro de aquí, que voy a agregar como una función estrecha que pasa en VM, que es la abreviatura de modelo de vista. VM puede ser cualquier nombre de su elección. Pero al usar view, es bastante tradicional usar VM como nombre dentro de esta devolución de llamada. Aquí tenemos acceso a la misma instancia de vista usando VM en el lugar donde usualmente usamos esto. Ahora podemos agarrar nuestra alerta. Podemos bajar esto a nuestra función de devolución de llamada. Entonces podemos reemplazar esto por VM, y esto ahora debería funcionar. Lo que estamos haciendo aquí es básicamente crear una función de devolución de llamada. Una vez que se confirma la navegación y se ha creado nuestro componente. Una vez creado el componente, entonces tenemos acceso a nuestros datos de incidencia de vista y ahora podemos acceder está dentro de esta función de devolución de llamada. Todo lo que necesitamos hacer es reemplazar la palabra clave esta por VM. Guardemos esto y diríjase al navegador. Vamos a recargar. Ahora vemos el mensaje de Hola, Chris. Si vas a alguna otra ruta, esto no funcionará ya que solo lo hemos dicho en los componentes admin. Ahora tenemos esto funcionando y podemos pasar al siguiente video donde echaremos un vistazo a las rutas individuales de los guardianes. 33. Protección de las rutas individuales: El último tipo de guardia que quiero mostrarles es el antes enter guard, cual se puede agregar directamente a donde definimos nuestras rutas en el main.js. Antes de crear esto, voy a eliminar cualquier código innecesario para nuestra aplicación. Por lo que en el admin del último video, podemos eliminar antes de entrar ruta, y también la propiedad de datos que configuramos para esto. Guarda este archivo y pasa a la main.js. Voy a añadir este nuevo guardia de navegación a las rutas de administración. Entonces para que esto sea más legible, voy a agregar estos en dos líneas separadas, separadas por una coma justo después de nuestros componentes podemos agregar el antes enter, guard BeforeEnter funciona igual que el global antes de entrar guardia y también toma los mismos argumentos libres de dos de nuestro próximo. Dijimos el servidor como una función. Voy a agregar una alerta aquí dentro, cual va a enviar una cadena de texto al usuario para decir que esta área es sólo para usuarios autorizados. Por favor, inicie sesión para continuar. Después de nuestras alertas, también necesitamos pasar en la siguiente función para completar la navegación. Digamos que esto es ahora si pasamos al navegador, y en primer lugar, podemos probar las rutas individuales dentro del encabezado y no vemos ninguna alerta para estos cuatro enlaces. Si ahora vamos a reenviar slash Admin, donde aplicaremos estos guardias de navegación. Vemos que nuestra alerta ahora ha estallado. Por supuesto que solo aparecer una alerta no es seguro propio. Pero más adelante ocultaremos el área de administración y solo se mostrará a los usuarios que han iniciado sesión. También lo haremos más adelante, ¿son antes de ruta dejar dios, dentro de los componentes admin para al salir del área admin. Decir automáticamente iniciar sesión al usuario cuando se navega lejos del administrador. 34. Definir el comportamiento del desplazamiento: Cuando todos sintonizamos, quizá queramos preservar la posición de desplazamiento. Les preguntaremos al volver a visitar una página, o alternativamente, es posible que deseemos desplazarnos a una subposición en la página al navegar por ella, aunque solo esté en la parte superior de la página. Usando view router, tenemos control total sobre el comportamiento de desplazamiento. Esto también depende de que el modo de enrutador se establezca en los modos de historial. Ya tenemos habilitado el modo de historial en el main.js, por lo que podemos aprovechar esto. Lo primero que hay que hacer en el main.js, es agregar la función de comportamiento de desplazamiento a la instancia del router. Echemos un vistazo, dentro de nuestro router aquí, voy a agregar el comportamiento de desplazamiento. Dentro de los corchetes o los paréntesis. Al igual que los dioses que miramos, sólo se necesita para y desde objetos de ruta. También un argumento pasamos en un frío, digamos posición, que es la posición, digamos por el navegador cuando se han utilizado los botones de atrás o adelante. Decir posición. Dentro de esta función, podríamos definir nuestro comportamiento de desplazamiento. Probablemente la forma más sencilla de hacer esto es devolver un objeto. Estoy pasando la posición x e y, a la que quieres desplazarte al navegar a una página. Podemos devolver nuestros objetos. Podemos establecer la exposición para que sea cero y luego establecer la y para que sea cero también. Usando esta configuración, cada vez que naveguemos a una ruta, la página será desplazada hasta la parte superior. Ves este patrón en acción. Cambiemos el eje y para que sea 200. Esto cargará una nueva página, 200 píxeles de la parte superior. Guardemos esto y por supuesto necesitamos eliminar nuestros argumentos libres para que no tengas ningún problema de Linton ya que no los estamos usando. Vayamos a casa. No tenemos suficiente contenido en esta página para desplazarnos hacia abajo. Probemos el menú y puedes ver estamos a 200 píxeles de la parte superior. Alternativamente, podemos pasar en un selector CSS en lugar de coordenadas. Vamos por un selector y abramos los componentes del menú. Podemos establecer el comportamiento de desplazamiento para desplazarse hacia abajo a cualquiera de nuestros selectores CSS. Podemos elegir un botón, podemos elegir una clase. Podemos elegir cualquier ID o simplemente un elemento por su nombre. Voy a ir por la cesta de la compra. Vamos por la clase de cestas. Dentro del main.js. Podemos conservar nuestro objeto. Lo que reemplaza con un selector, que va a ser una cadena. Dado que esta es una clase, podemos apuntar a esto con el punto y el nombre es canastas. Danos una caja fuerte. Vayamos a casa. Después de volver a nuestro menú. Ahora puedes ver que el navegador se ha desplazado hacia abajo hasta la ubicación de la cesta. Esto funciona para cualquier dos seleccionados solo [inaudible] al usar CSS. Recuerda mencionamos el parámetro de posición segura en el que pasaste. Esto guarda la posición de desplazamiento cuando se utilizan los navegadores hacia adelante y los backbones. Echemos ahora un vistazo a cómo podemos usar esto. Pasemos una vez más nuestros argumentos, que era a, de y una posición segura. Entonces voy a añadir una declaración if. El comunicado if va a comprobar primero si hay una posición guardada. Si la posición guardada es verdadera, vamos a devolver la posición guardada. Tenemos uno disponible, vamos a desplazarnos a esta posición. De lo contrario, vamos a agregar la condición else donde simplemente vamos a devolver un objeto donde configuramos la posición x e y para que sea cero, tal y como miramos antes. Entonces para ver esto en acción, necesitamos ir al navegador y navegar entre unas pocas páginas. Entonces, en primer lugar, vamos al menú y luego desplázate hacia abajo hasta el fondo. Podemos entonces usar el botón Atrás y luego el botón Seguir para volver al menú. Soy una oposición justo al final de la página. Si lo intentamos de nuevo, si nos desplazamos un poco hacia arriba, solo para que podamos ver algún espacio en blanco en el menú. Si intentamos ir hacia atrás y luego reenvía el navegador, posición guardada, nos devuelve exactamente al punto donde estábamos en el menú. El último que quiero mostrarles mantiene la posición guardada, igual que ésta que acabamos de ver. No obstante, funciona al cambiar entre componentes utilizando enlaces de menú, en lugar de simplemente usar los botones de retroceso o adelante en el navegador. Podemos volver a usar una declaración if. Pero en lugar de la posición guardada, vamos a utilizar los dos argumentos y seleccionar los duros, y esto primero comprobará si la ruta en la que navegamos tiene guardado un hash de ubicación. Si lo hace, vamos a establecer el seleccionado para que sea igual al valor de este hash. Podemos regresar dentro de los tirantes rizados, un selector igual que miraba hacia arriba antes. En el selector que vamos a añadir es de.áspero. También necesitaremos eliminar los parámetros no utilizados para que no veamos ningún error. Esta noción, sí necesitamos agregar más contenido a una de las otras páginas. Voy a ir al contacto y simplemente copiar todo el contenido del rapero de contacto. Siendo brotes, mantén el div circundante, y pega esto en un par de veces más solo para darnos algo más de contenido dentro de contactos donde podamos desplazarnos hacia arriba y hacia abajo. Cerramos la barra lateral de nuevo en la principal. También podemos quitar la sección L aquí, este archivo guardar y pasar al navegador. Ahora si tenemos el contacto y el menú con algún contenido donde podemos desplazarnos hacia abajo, me voy a desplazar hacia abajo hasta justo encima de la bandera. Tenemos esto como punto de referencia. Pase a la página de contacto. Vemos que la posición del navegador se ha guardado de nuevo al menú. Esto mantendrá la posición guardada entre los componentes. No va a funcionar si vas al Hogar, por ejemplo, o el sobre nosotros porque no tenemos suficiente contenido. Desplázate hacia abajo también. Pero esto te da la idea de cómo funciona de todos modos. Esto es ahora para este video. Tan solo para terminar esto, voy a reinstalar la página de contacto solo para cosechar contenido una sola vez. Dale esto para guardar y restaurar esto de vuelta a la normalidad. Estas son las opciones disponibles para controlar el comportamiento de desplazamiento. A continuación, refactoraremos nuestras rutas moviéndolas a su propio archivo. 35. Refactorización de nuestras rutas: Dentro de nuestro main.js donde hemos creado nuestras rutas. Esta matriz de rutas es bastante manejable en este momento. No tenemos demasiadas configuraciones. Pero se puede ver cómo realmente puede desbaratar nuestro archivo main.js especialmente si se agregan más guardias de navegación o componentes infantiles. Podemos sacar todas estas rutas al main.js y colocarlas ahí dentro en archivo, lo que arreglará las cosas y lo hará más organizado. Hacer esto es una configuración bastante fácil. En primer lugar, voy a agregar un Nuevo Archivo a la Carpeta de Origen. Voy a agregar esto a la raíz de la fuente y llamar a esto el routes.js, luego volver al main.js. Todo lo que necesitamos hacer es agarrar la matriz de rutas completa. Desde el corchete cuadrado de cierre, todo el camino hasta nuestra constante, voy a cortar esto. Todo a nuestras rutas, ahora podemos pegar esto en ya que es router. Si nos referimos a componentes, también necesitamos importar estos también. Podemos agarrar estos, y Visual Studio Code hará de este un color diferente. Podemos ver que ya no usamos estos. Voy a cortar todos estos componentes que ya no necesitan, colocarlos en nuestro routes.js. A continuación, necesitamos exportar este objeto también. Dado que esto ahora está en su propio archivo independiente, también necesitamos exportar este archivo, que podamos importarlo de nuevo en nuestro main.js. Con un nombre coincidente de rutas, que le dimos justo aquí. El lugar como una cadena es barra de puntos y luego rutas. Esto es todo lo que ahora tenemos que hacer. Ahora podemos ir a nuestra app y probar si las rutas siguen funcionando bien. Probemos los contactos del menú, el sobre, y también nuestras rutas infantiles también están funcionando. Esto es algo que no es necesario en aplicaciones pequeñas, pero es algo que puede mantener una aplicación más grande o en crecimiento más organizada, y también es algo que es bastante sencillo de hacer. 36. Vistas del router con nombre: Si volvemos a la app principal el archivo Vue. Dentro de un aquí tenemos un router-view. Hasta ahora hemos mirado el uso de esta vista de enrutador para cambiar entre componentes. También, cómo podemos usar los componentes de vista de enrutador para mostrar rutas secundarias dentro de los componentes anteriores. También podemos utilizar múltiples componentes de rutas de visualización dentro de nuestra aplicación. Esto es para que podamos mostrar múltiples vistas en la misma página, lugar de simplemente cambiar entre componentes individuales. Por ejemplo, dentro de esta app el archivo Vue, tenemos este componente de router-view para cambiar entre los contenidos principales. No estamos restringidos aunque a un solo outlet, podemos agregar tantas vistas de routers como queramos dándoles un nombre. Ya hemos configurado algunos componentes de información que utilizamos en el sobre. Contamos con la guía de pedidos, la información de entrega, y el historial. Esto también sería ideal para mostrar en la página de inicio también mediante el uso de una nueva vista de enrutador. Vamos a configurar esto justo debajo de nuestra vista del enrutador actual. Voy a usar esto para mostrar estos tres componentes. Vamos a configurar un div con la clase de info_block_wrapper. Ahora, para mostrar nuestros componentes de información gratuitos, podemos agregar más router-views, pero esta vez con el atributo name. El router-view con la apertura y la etiqueta de cierre. Dentro de la etiqueta de apertura, podemos entonces agregar el nombre y queremos configurar este nombre para que sea guía de pedidos. Después duplicar esto dos veces más. El segundo va a ser para entregar, y el tercero va a ser para la historia. Guarda esto. Si volvemos al navegador y hacemos clic en nuestro enlace “Inicio”. No vemos ningún componente mostrado actualmente en la pantalla, esto se debe a que primero necesitamos agregarlos a nuestras rutas. Entonces, vayamos a nuestro nuevo archivo routes.js. Dado que nuestros enlaces de inicio ahora estarán mostrando múltiples componentes, necesitamos cambiar el componente de propiedad justo aquí, tener un s en el extremo para hacer estos componentes. Quitar el enlace de inicio. Esto ahora va a tomar en un objeto donde podemos agregar los componentes como pares de valores clave, igual que lo hacemos al registrar un componente dentro de la instancia de vista. En primer lugar, agregamos unos componentes por defecto, que va a ser el hogar. Este es el componente renderizado en la vista del enrutador sin nombre. Este es el original que acabamos de tener en la cima aquí. Esto lo mantendrá tal como lo teníamos antes con los componentes del hogar. Entonces podemos configurar nuestras vistas gratuitas de enrutadores justo debajo de todo con nombres coincidentes. El primero fue la guía de pedidos. Queremos mapear esto a forma componentes llamados guía de pedidos. El siguiente fue para entrega. Queremos mapear esto a forma componentes llamados entrega. El tercero fue para la historia. Vamos a ver esto en el navegador. Volver a la página principal. Nuestros componentes libres ahora ocuparon el lugar de nuestros router-views nombrados. También los componentes de inicio predeterminados están tomando el lugar del router-view, que no tiene nombre. Esto también necesita un poco de trabajo con estos estilos también cuando creamos la guía de pedidos, entrega y los componentes del historial. Si echamos un vistazo a estos, podemos abrir cualquiera de estos. Dentro de la plantilla, agregamos una clase de info_block como envoltorio, y también una clase de info_block_contents, que es para el título y también la imagen. Si volvemos a la app.vue. También rodeamos estos componentes libres en una clase llamada info_block_wrapper. Podemos apuntar a estas clases en el CSS, empezando por la vista de pantalla más pequeña. Abajo en la parte inferior, podemos apuntar al info_block_wrapper. Este es un envoltorio para nuestros puntos de venta gratuitos. Voy a configurar el tipo de pantalla para que sea flex. Podemos establecer la dirección del flex para que sea columna en las pantallas más pequeñas. Por lo que estos están apilados. Siguiente arriba el info_block individual. Este es el envoltorio para cada componente. Yo quiero darle a esto un color de fondo, que va a tener el valor de f1e6da. Tan margen, así 10 píxeles en la parte superior e inferior para agregar algo de espacio en y cero en la izquierda y la derecha, algún relleno en el interior del div de 10 píxeles. El número puede apuntar a los bloques de información y al rumbo de nivel 3. Si volvemos a la guía de pedidos, este es el título en la parte superior de cada bloque. Info_block, podemos apuntar a los encabezados de nivel 3. Todo lo que voy a hacer aquí es fijar la línea de texto para que esté en el centro. También podemos apuntar al info_blocks_content. Esta es la sección justo debajo del título, detectaría hijo también la imagen. Una vez que configuras esto para que sea un tipo de visualización o flex, para que podamos alinear los elementos en el centro. Entonces por fin para las pantallas pequeñas, voy a establecer la imagen info_block. Todo lo que quiero hacer aquí es restringir el ancho para ser del 30 por ciento. Echemos un vistazo a esto en el navegador. Podemos reducir esto a la vista más pequeña. Esto se ve un poco mejor en dispositivos móviles ahora. Si estiramos el navegador hacia fuera al tamaño del escritorio. Ahora necesitamos agregar una consulta de medios para apuntar a esto. Voy a configurar el objetivo de consulta de medios el ancho mínimo de 900 píxeles. Nuestra pantalla de medios. También el ancho mínimo será de 900 píxeles. Empecemos con el info_block. Establecer el ancho para ser 100 por ciento. El info_block_wrapper, que es el envoltorio principal para todos, libre de todos los componentes. Podemos establecer la dirección del flex o anular la dirección del flex de la columna para ser fila para que todos estos se alinea. A continuación, si echamos un vistazo dentro del navegador, ahora tenemos estas configuraciones a través de la fila usando el flex box. Pero queremos un poco de espaciado entre cada uno. Para ello, voy a seleccionar este “Info_block” en el medio. Podemos apuntar a este usando el nth-child. Volver al CSS y apuntar al info_block, y luego los dos puntos. Podemos apuntar al nth-child, que seleccionará cualquiera de estos que pasemos. Queremos seleccionar el segundo que está en el medio. Entonces todo lo que vamos a hacer es establecer algún margen para que sea de 10 píxeles. Dale a esto un ahorro. Ahora, a esto se le agrega un espaciado de 10 píxeles alrededor de estos componentes. A continuación dentro de estos tres componentes, vamos a tener el texto en la imagen apilado verticalmente. Podemos hacer esto estableciendo la dirección del flex para que sea columna y también alinearlos en el centro. Vamos por el info_block_contents. Podemos establecer la dirección del flex para que esté en una columna y también alinear los elementos en el centro. Guarda esto. A continuación la imagen. Voy a darle a esto un ancho máximo de un 100 por ciento. El info_block imagen, el ancho máximo, va a restringir al 100 por ciento. Por último, voy a usar el flex box para restablecer el orden fuente. Por lo que estos se alternan moviendo la imagen por encima del texto sobre el segundo hijo. Usemos el mismo selector que usamos antes de usar el nth-child. Podemos añadir esto en. Pero esta vez también queremos apuntar a la imagen. Podemos restablecer el orden fuente estableciendo el orden de la imagen para que sea negativo. Guarda esto. Nuestros componentes libres y ahora alternados en la pantalla más grande. Si nos encogemos de nuevo a la vista móvil, orden de la fuente se mantiene exactamente como estaba ya que esto se establece dentro de una consulta de medios. Este es ahora el final de nuestra sección de ruteo. Se puede ver que hay mucho más en el enrutamiento que simplemente cambiar entre páginas. Espero que este apartado les haya dado una buena idea de lo que está disponible. En la siguiente sección, vamos a pasar a mantener la gestión usando View x. 37. ¿Qué es Vuex?: Al trabajar con proyectos Vue.js, podemos administrar el estado de la aplicación de varias maneras. Al compartir un estado de paso entre componentes, hay múltiples maneras en que podemos lograr esto. Los datos se pueden pasar de un componente hijo a un padre mediante Eventos personalizados, y desde el padre, el hijo pasando apoyos. También podemos mejorar en esto agregando un Bus de Eventos. Este Event Bus actúa como una sola tienda central, dijo a nuestros estados y es básicamente un archivo separado que contiene una instancia de vista, que podemos tener nuestro estado para, e importar a cada componente cuando sea necesario. Es una gran solución para aplicaciones de menor a mediano tamaño. Pero un solo archivo como este sin embargo, rápidamente puede llegar a ser realmente grande y más difícil de mantener para grandes proyectos. Esto nos lleva al tema de esta sección, que es la UX. UX es un patrón de gestión estatal más biblioteca para gestionar nuestros estados, siendo el estado básicamente los datos que se mantienen en nuestros componentes. Es ideal para gestionar grandes proyectos, y es escrito por el Vue.js call Team, lo que se integra perfectamente en tus proyectos Vue.js. Al igual que el Bus de Eventos, también actúa como un solo puesto central para nuestro estado, pero tiene algunos beneficios sobre el Bus de Eventos. Por ejemplo, permitirle acceder a una sola fuente para nuestros estados. Todavía podemos dividirlo en diferentes archivos en módulos para organizar nuestro código, y pronto echaremos un vistazo a esto. No utilizamos utilería y eventos con Vue.ux. Utilizamos diferentes métodos que también cubrirán estos métodos dedicados, facilitarán el seguimiento y la gestión de los cambios realizados en nuestros estados. Utilice un Bus de eventos si varios componentes siguen realizando cambios en el puesto mediante eventos personalizados, estos cambios pueden ser difíciles de rastrear. Es posible que no sepamos qué componente hizo qué cambio, y esto puede ocasionar problemas de actualización. También, como veremos en esta sección, no sólo Vue.ux actúa como una única fuente de datos para nuestro estado de aplicación, también se puede utilizar para recopilar datos requeridos de otras fuentes. Lo estaremos utilizando para mantener nuestros estados componentes junto con nuestros datos de Firebase. Esto hace que nuestra tienda sea un solo lugar conveniente para acceder a todos los datos que necesitamos. Con todo esto siendo dicho sin embargo, si construyes en una aplicación más pequeña o de tamaño mediano, Vue.ux no siempre es la mejor solución. A menudo puede ser un caso de agregarlo cuando sientes que es necesario o cuando otras soluciones están causando problemas. Ahora sabemos qué es Vue.ux, vamos a trabajar en añadirlo a nuestro proyecto. 38. Instalación y estructura de archivos: Si quieres leer más sobre Vuex, puedes dirigirte a la página de inicio, que es vuex dot vuejs dot org. Pero voy a saltar directamente a meter esta configuración dentro de nuestros proyectos. Obtener la configuración de Vuex dentro de nuestra aplicación no es demasiado difícil. Si vamos a la instalación, igual que cuando instalamos el router, los enlaces CDN disponibles si lo prefiere pero como utilizamos un NPM, voy a instalar esto por dentro de la terminal. Vamos a abrir código de Visual Studio, quiere cerrar el servidor y luego instalar el comando que es npm i, y luego el nombre del paquete, que es Vuex. Y luego dar algún momento para instalar. Una vez hecho esto, podemos reiniciar el servidor de desarrollo con npm run serve. Podemos agregar esto a nuestros archivos y carpetas. Ahora, quieren decir de inmediato que Vuex no hace cumplir ninguna estructura determinada a todos los archivos y carpetas. Somos libres de manejarlo exactamente como queremos. Es nodos comunes tienen una carpeta principal para nuestros estados dentro de la carpeta fuente llamada tienda. Hagámoslo ahora. Vayamos a la fuente, creamos una nueva carpeta, nombra esta tienda. Entonces dentro de aquí necesitamos un archivo JavaScript principal, que voy a llamar a la tienda dot js. Este será el archivo principal de nuestra tienda, y puede ser cualquier nombre que desee. También puede ver comúnmente esto llamado índice dot js. Voy a llamar a mi nueva tienda para distinguirlo de cualquier otro archivo de índice. Entonces dentro de nuestro archivo de tienda, necesitamos importar tanto Vue como también los módulos Vuex, por lo que importar Vue desde Vue y también importar Vuex desde Vuex. Entonces al igual que cuando instalamos el router, podemos agregar Vue dot use para que Vuex esté disponible en todos nuestros archivos o módulos. Esta siguiente sección también debería parecer familiar, desde cuando agregamos el router. Tenemos que añadir una nueva tienda Vuex, y también exportar esta para que esté disponible en nuestros archivos, así que exporta const store y configura esto en una nueva tienda Vuex dot, mayúscula S. Dentro de aquí pasamos en un objeto y está dentro de este objeto donde podemos establecer cualquier estado inicial. Por ejemplo, si tuvieras un juego en el que actualizáramos la puntuación del jugador, podríamos añadir aquí una propiedad estatal para el marcador e inicialmente ponerla en cero. Entonces uno o más componentes podrían actualizar el marcador durante el juego. El otro archivo que quiero agregar también es el punto principal js, así que abramos esto. Necesitamos actualizar esto en nuestro archivo principal, igual que hicimos con el router. En primer lugar necesitamos importar la tienda. Esto se denomina exportación y la ruta del archivo es una slash de puntos en la tienda. Entonces el nombre del archivo que se almacena también. Desplázate hacia abajo, entonces podemos registrar nuestra tienda dentro de nuestra instancia de vista. Justo debajo del router. Voy a añadir esto aquí, seguido de una coma. Y esta es nuestra tienda ahora registrada con Vue, volver a instalar dot js. Voy a configurar las cosas agregando un objeto de estado inicial. En el interior aquí. Todo el objeto de estado funciona un poco como la propiedad view data, donde podemos configurar nuestras variables y actualizarlas desde nuestros archivos. Con esto ahora todo listo, voy a dejar aquí este video. A medida que pasamos por este apartado. Habrá muchos más archivos y carpetas agregados y los bajos más agregados al puesto. Pero por ahora, esta es la configuración de inicio y registrada para ser utilizada y comenzará a acceder a datos de nuestra tienda en el siguiente video. 39. Estado inicial y acceso al almacenamiento: Con nuestra nueva tienda Vuex ahora configurada, es hora de agregar algún estado a nuestra tienda y ver cómo podemos acceder a ella desde dentro de nuestros componentes. Justo antes de hacer esto, tenemos un error abajo en la consola, y esto se debe a que nuestro Vuex necesita una V mayúscula para marcar tu importación en la parte superior. Ahora comenzamos con la recuperación de datos de pizza de nuestra base de datos Firebase junto con nuestros pedidos de clientes. Hasta que hagamos esto, sin embargo, voy a simular esto. Si pasamos a los componentes menu.vue, dentro de aquí, si bajamos a nuestra propiedad de datos, tenemos aquí nuestros datos de muestra, que es obtener ítems de menú. Voy a cortar toda esta sección de nuestros componentes y luego trasladar esto a nuestra tienda. Asegúrate de agarrar la sección correcta. Obtén artículos de menú, dejando solo las cestas y también el texto de la canasta en nuestra tienda. Ahora podemos pegar esto en nuestro objeto estatal. Entonces solo voy a cambiar el nombre para que sean simplemente ítems de menú. Esto significa que ahora nuestros datos se sacan a los componentes y se colocan dentro de una tienda central para que cualquier componente tenga acceso. Como era de esperar, si vamos al navegador y luego pasamos a los componentes del menú, haga clic en el enlace del menú aquí, falta el menú porque eliminamos los datos y los colocamos en un archivo diferente. ¿ Cómo accedemos a estas tiendas desde el interior de estos componentes? Bueno, si volvemos a nuestros componentes menu.vue, ahora podemos tener acceso a nuestra tienda dentro del valor computado. Voy a llamar a esto get menu items, igual que teníamos antes. Dentro de aquí, vamos a devolver esta tienda de símbolos de punto $. Entonces desde nuestro archivo de la tienda vamos a acceder a los objetos del estado, y al estado de la pizza, que llamamos elementos de menú. Este nombre de get menu items, también coincide con nuestro bucle. Si desplazamos nuestro bucle, nos deslizamos por encima de la canasta, y aquí estamos, dentro del menú, tenemos obtener ítems de menú. Solo necesitamos agregar una coma después de los valores calculados. Diga esto, y vuelva a nuestro menú. Ahora tenemos los datos del menú ahora en su lugar. A estos datos se accede ahora desde nuestra tienda central, en lugar de restringirlos a un solo componente. Cuando los datos instalen actualizaciones, este componente y cualesquiera otros, que accedan en este menú los datos también se actualizarán o renderizarán de nuevo. Si hacemos un cambio rápido a un nombre de pizza de nuevo en el store.js, bajemos y cambiemos el nombre de esto, le da a esto un guardado, de vuelta a nuestro menú. Ahora vemos que esto se actualiza de inmediato. Por último, también accedemos a los mismos elementos de menú desde dentro de la pantalla de administración también. Vayamos al admin.vue. Podemos configurar un valor computado, igual que lo hicimos dentro del menú. Configura nuestro objeto y agrega la coma justo después. El nombre de nuevo va a ser el mismo de conseguir elementos de menú y vamos a devolver nuestra tienda porque acceda a esta tienda de símbolos de punto $, nuestros objetos de estado, luego de nuevo, elementos de menú. Desplázalo hacia arriba. Ahora podemos usar esto para crear nuestros datos dinámicos dentro de la tabla de menús, pero desde arriba, justo debajo del título del menú, si buscamos el cuerpo de la tabla, podemos crear un V for loop. Vamos a recorrer los elementos del menú get. Por lo que elemento en obtener elementos de menú. También podemos enlazar una clave y la clave va a ser igual al ID de punto del ítem. Ahora podemos usar este ítem para reemplazar el valor codificado de la margarita. Dentro de las llaves dobles, podemos acceder al item.name y ahora deben repetirse ya que es un bucle para los tres de nuestros artículos, dentro de nuestra tienda. Pasado al administrador. Vamos a desplazarnos hacia abajo a nuestro menú. Ahora veremos nuestros artículos gratuitos sacados de nuestra tienda central. Esta es una forma de acceder a los datos de nuestra tienda. A continuación veremos otra forma posiblemente mejorada, que es mediante el uso de getters. 40. Mejorar el acceso a la tienda con getters: En el último video, accedimos a nuestra tienda central directamente usando una $ tienda.state.MenuItems, igual que usted ve aquí. Hay una mejor manera de hacerlo, sin embargo, y esto es agregando getters a nuestra tienda. Como sugiere este nombre, los usamos también para crecer datos de nuestra tienda central. Pero quizá ya estés pensando que ya estamos obteniendo datos de nuestra tienda. Entonces, ¿por qué estamos usando un getter? El motivo es que se puede hacer mucho más con getters, cuando accedemos al estado antes de usar directamente $ tienda, sí nos dieron los datos que queríamos volver, pero como ejemplo. ¿ Y si quisiéramos hacer algo un poco más complejo, como las órdenes de facción desde la tienda y luego filtrar estas órdenes para sólo mostrar las órdenes que se completan. Para ello, después de que recuperemos los datos, necesitaríamos realizar esta acción de filtro dentro de la propiedad computada de componentes. Si solo uno de los componentes quisiera realizar este filtro. Esto no es un gran problema. No obstante, si múltiples componentes accederían a los mismos datos filtrados, estaremos teniendo código duplicado a través de nuestra App. Para solucionar esto, utilizamos un getter para buscar los datos que necesitamos de la tienda, luego realizamos cualquier acción que queramos, como un filtro o cálculo. Entonces los componentes recibirán los datos finales o exactos que necesite. Creo que un getter es tan simple como agregar estado a nuestra llaga. Si nos dirigimos a este store.js, justo después de nuestros objetos de estado y nos desplazamos hacia abajo hasta el fondo, agregamos una coma y configuramos nuestro objeto getters, igual que yo nuestro estado. Después agregamos el nombre de nuestro getter y voy a llamar a esto “GetMenuItems”. Esta va a ser una función que recibe al estado como argumento. Después utilizamos el estado para acceder a cualquier pieza de información que queramos. Por lo que queremos agarrar el estado.MenuItems desde justo arriba. Podemos entonces usar este getMenuItems getter dentro de los componentes del menú, vamos a ir hacia ahí “menu.vue”. Entonces todo lo que necesitamos hacer, en lugar de acceder a nuestro estado, vamos a acceder a nuestros objetos getters y el nombre era GetMenuItems. El otro getter que necesitamos es obtener el número de órdenes que tenemos. Para esto, necesitamos una matriz de pedidos dentro de nuestro estado, así que de vuelta aquí para almacenar, justo en la parte inferior, justo después de que nuestros objetos agreguen una esquina. Vamos a establecer inicialmente nuestra matriz de órdenes para que esté vacía. Esto está vacío por el momento, pero más adelante en el curso sincronizaremos esta información con firebase, para jalar los pedidos de nuestra base de datos. Usando esto, ahora podemos configurar un segundo getter, llamado Número de órdenes. Esta configuró igual que arriba. Toma en el estado como argumento de nuestra función y podemos acceder al estado.órdenes. Ya que queremos que conozcan el número de pedidos en lugar de los contenidos, podemos acceder a él con la propiedad del terreno. El número de pedidos forma parte de nuestra pantalla de administración. Por lo tanto, necesitamos agregar esto a los componentes admin. Vamos a allá, a la propiedad de la computadora. Después de que consiga los ítems de menú, podemos sumar nuestro número de pedidos donde vamos a devolver esto. $ tienda.getters.numberooForders. También mientras estamos aquí, también podemos cambiar los elementos de menú get arriba para usar también el getter. Por lo que getters.getMenuItems. Ahora podemos usar una serie de pedidos arriba en nuestras plantillas. Si buscaremos los pedidos actuales, tenemos un valor codificado duro de cinco. Dentro de las llaves dobles, podemos acceder a nuestro número de pedidos. Dale a esto un guardado y apagado en el admin, recarga el navegador. Ahora vemos que las órdenes corrientes se establecen en cero. Como mencionamos al inicio de este video, al usar un getter, podemos hacer prácticamente cualquier cosa que queramos a los datos antes de pasarlo a nuestros componentes. Por ejemplo, podríamos hacer algo sencillo, como el terreno más extraño más 10, y esto se actualiza dentro de nuestro componente. O podemos hacer algo mucho más complejo, como formatear o validar datos incluso antes de que llegue a nuestros componentes. Sabemos acceder al estado desde nuestra tienda. Ahora es un buen momento para pasar a mirar mutaciones que cambian el estado dentro de nuestra tienda. 41. Cambio de estado con mutaciones: Al tratar con el estado hasta ahora en esta sección, hemos analizado cómo recuperar el estado de nuestra tienda central, tanto directamente como mediante el uso de getters. Cuando quiero pasar a cambiar el estado dentro de la tienda, y la forma correcta de hacerlo es cometiendo una mutación. Las mutaciones simplemente cambian los datos dentro de nuestra tienda. Trabajan de manera similar a cuando omitimos un evento. Pero en lugar de emitir datos a un componente, podemos hacer cambios en la tienda en su lugar. Además, las mutaciones siguen vistas reglas de reactividad. Esto significa que una vez que usamos una mutación para cambiar los estados, todos los componentes que vigilan el estado se actualizarán automáticamente también. Dentro del menú en la “Canasta”, tenemos este botón de “Hacer Pedido”, y también tenemos la matriz de pedidos vacíos dentro de nuestra tienda central. Este sería un buen caso de uso para que una mutación pueda mutar la tienda central empujando el contenido de la orden. Cuando hacemos clic en el botón a esta matriz de órdenes. Al igual que getters, montamos nuestras mutaciones dentro de la tienda. Entonces voy a agregar esto como un objeto separado por una coma. Entonces se trata de mutaciones. Entonces podemos añadir el nombre de la mutación. Esta mutación agregará un orden. Entonces simplemente voy a llamar a esto “addorder”. En la mutación se aceptan los estados que se le pasaron como primer argumento, igual que lo hace cuando se colan getters. Después modificamos el estado como lo queremos dentro de esta función de flecha. A modo de ejemplo, si nuestras órdenes fueran una serie de órdenes así, si pusiéramos esto como uno, podríamos entonces establecer el estado, aunque las órdenes sean una más con ++. Ahora para llamar a esta mutación, necesitamos ir a nuestros “componentes del menú” y agregar un nuevo método. Entonces nos dirigimos al “menu.view” y voy a llamar a este método “agregar nuevo orden”. Si echamos un vistazo al botón “Hacer orden” dentro de la etiqueta de apertura y quiere agregar un oyente de “click” y configurar el sub para que sea nuestro método llamado “AddNew order” desplácese hacia abajo y podemos crear está justo debajo. Dentro de nuestros métodos, tenemos bastantes. Por lo que justo después de disminuir cantidad, podemos agregar nuevo pedido. Entonces lo primero que tenemos que hacer es acceder realmente a la tienda. Al igual que antes podemos hacer esto con esto. $ tienda. Entonces necesitamos comprometer el cambio usando el método commit. El cambio que cometemos es el nombre de la mutación que acabamos de crear en la tienda, que se llamaba “addorder”. Pasamos esto como una cadena, y luego después de agregar el orden, tendría sentido despejar la canasta dentro de nuestros componentes configurando la canasta para que sea una matriz vacía. Esta canasta está justo arriba dentro de la propiedad de fechas, que esta matriz justo aquí. Por lo que necesitamos despejar esto una vez que se haya realizado el pedido. Podemos hacer esto simplemente con esto.cestas equivale a una matriz vacía. Por último, también podemos agregar un mensaje para decir que se ha realizado nuestro pedido. Ya tenemos una fecha propiedad de texto de canasta. Simplemente sopla esta canasta, que actualmente nos dice que la canasta está vacía antes de que un usuario agregue una pizza. Todo lo que tenemos que hacer ahora es cambiar estos datos con un nuevo mensaje. Por lo que este texto de la cesta de stop va a ser igual a “Gracias, se ha realizado su pedido”. Lo siguiente que hay que hacer es comprobar realmente si el valor de los pedidos dentro de nuestra tienda se ha incrementado en cada clic. Ahora podemos poner esto dentro de la plantilla de menú. Entonces solo voy a desplazarme hasta el final, y podemos agregar esto en cualquier lugar dentro de las llaves dobles para que pueda acceder a nuestra tienda, esta.tienda. Tenemos que acceder al estado, a las órdenes, o a otros proyectos, y dentro del menú, vemos el valor de uno. Vamos a crear un nuevo orden. Hacer pedido, obtendremos el valor de dos. Probemos uno más y el valor de tres. Esta es la forma más sencilla de cometer una mutación. No obstante, queremos mejorar en esto empujando contenido completo de la canasta a nuestra matriz de pedidos, en lugar de simplemente incrementar el número. Para ello, agregamos lo que se llama carga útil. Una carga útil es un argumento adicional que pasamos por la mutación, que contiene los datos que queremos comprometer. Se puede pensar en esto como agregar argumentos a una función, pero pasaremos alguna información adicional. Podemos hacer esto de nuevo en el método “addneworder”. Vamos a desplazarnos hacia abajo a esto, y justo después de “addorder”, agregas una coma y luego podemos agregar la carga útil, que es el contenido de “this.basket”. Después, en el store.js, pasamos esta carga útil a la mutación como segundo argumento. Entonces ahora en lugar de usar solo el estado, necesitamos rodear esto dentro de los corchetes. Pase en las órdenes, el nombre de esta carga útil es “hacia arriba”, pero claro, lo mejor es ser lo más descriptivo posible sobre los datos que contendrá. Ahora, en lugar de incrementar las órdenes, ahora podemos empujar las nuevas órdenes a la matriz. Podemos entonces usar el método push de JavaScript, donde vamos a empujar las órdenes, y también necesitamos cambiar esto a una matriz. Nos da un ahorro y esto ahora debería ser un trabajo de mutación en. Si nos dirigimos al navegador y al menú, vemos una matriz vacía. Intentemos agregar algunos elementos de menú y hacer un pedido, y ahí vamos. Ahí está nuestra margarita y nuestra pepperoni. ¿ Cuál de los dos artículos que agregamos? Probemos uno nuevo. Coloca el pedido, y vemos que la tercera pizza se ha agregado a nuestra matriz. Tan genial. Ya podemos ver que la tienda se ha actualizado con los contenidos de nuestra canasta. No se ve demasiado bonito por el momento, pero esto se arregla fácilmente más adelante en el curso. Lo principal por ahora es que ahora sabes cómo acceder con éxito a la tienda central y también comprometer cambios de nuevo a ella. 42. ¿Qué son las acciones?: Hasta el momento, hemos mirado el uso de getters para recuperar estado desde dentro de nuestra tienda central. Además, las mutaciones, que acabamos de observar, comprometen cambios a nuestro puesto. Las mutaciones hacen su trabajo perfectamente bien, pero para tener una cosa que tener en cuenta, las mutaciones deben ser sincrónicas. No podemos agregar ningún código asíncrono dentro de una mutación. Si no estás seguro de lo que esto significa, con código sincrónico, tenemos que esperar a que termine la tarea antes de pasar a la siguiente. Tenemos una tarea asíncrona, no tenemos que esperar a que una tarea anterior termine primero. Estos pueden correr uno al lado del otro. Tiene sentido que las mutaciones se ejecuten sincrónicamente. No obstante, si suceden múltiples mutaciones al mismo tiempo, no vamos a poder rastrear cuál es el más responsable de cada cambio de estados. Si estuviéramos ejecutando un código asíncrono, no podemos decir cuánto tiempo tomará este proceso. Por lo tanto, una mutación que se inició primero puede no necesariamente terminar primero. Tener una mutación que se ejecuta sincrónicamente significa que necesita terminar completamente primero antes de que comiencen las siguientes, y esto hace que el seguimiento de los cambios sea más predecible. Aquí es donde entran las acciones. Las acciones pueden contener código asíncrono y son un poco como mutaciones. obstante, las acciones no mutan directamente al estado, sino que cometen una mutación. Esto significa que tendrá las necesidades de ejecutar código asíncrono, como solicitar datos de un servidor. utilizará una acción sobre una mutación. Podemos usar acciones ya sean asíncronas o no, e incluso puedes mantener las cosas más consistentes pasando siempre por una acción si lo prefieres, así que esta es la teoría detrás de las acciones. A continuación, pondremos esto en práctica dentro de nuestra aplicación. 43. Cómo configurar el usuario con acciones: Ahora voy a configurar una acción para establecer el usuario conectado actual. Este usuario será almacenado dentro de nuestros estados. Añadamos la propiedad de usuario actual para empezar. Dentro del store.js, justo debajo de nuestra matriz de órdenes. El usuario actual, que vamos a establecer inicialmente como nulo. Esto se establecerá inicialmente en null hasta que un usuario inicie sesión, y luego esto será reemplazado por un objeto que contenga los detalles del usuario. Todavía voy a realizar el cambio de estado como mutación. Pero como mencionamos en el último video, estaremos usando una acción para cometer esta mutación. Vamos a configurar primero nuestro usuario acaba de soplar orden de agregar, que vamos a llamar el UserStatus, y queremos pasar en los estados y también el usuario, que será nuestro pasado de carga útil cuando cometamos esta mutación. Como función de flecha, esta carga útil de usuario será o bien los detalles del usuario conectado, si no el usuario será nulo. Aquí podemos agregar un comunicado if para comprobar si el usuario está conectado. Si es cierto, vamos a actualizar este estado.CurrentUser con el valor de usuario. Si el usuario cierre la sesión, también podemos actualizar al usuario actual también. Pero esta vez queremos que el usuario vuelva a ser nulo. Esta es una forma de configurar esto con una sentencia if... else o alternativamente, podemos usar el operador ternario JavaScript para comprobar si el usuario es igual a null. Si lo es, podemos proporcionar una condición donde establecemos esta fecha.CurrentUser para ser nulo. De lo contrario, la alternativa es que configuramos al usuario actual para que sea igual al usuario pasado desde la carga útil. De cualquier manera es completamente válida y esta es nuestra mutación ahora completa. Ahora tenemos que armar la acción que va a llamar a esto. Agregamos la propiedad de acciones en lo que almacenamos. Al igual que hicimos con las mutaciones de canaletas. Nosotros configuramos esto como un objeto. Podemos llamar a las mutaciones de estado del usuario, tanto al iniciar sesión como también al cerrar sesión. Empecemos con el signo en acción, que tomará dos argumentos. Esta función va a ser una sincronización y este primer argumento en el que se pasa es el objeto de contexto, y el segundo es el usuario. Configurar nuestra función de flecha. El objeto de contexto tiene un método commit. Podemos usar esto en tan solo un momento para desencadenar nuestra mutación. Bueno, primero, si entramos al archivo login.vue y a nuestros métodos, ya tenemos esta funcionalidad de inicio de sesión justo aquí. Voy a trasladar esto a nuestra tienda central. Si ponemos todo el contenido entre iniciar sesión, la sección catch y también intentamos hacer menos. Simplemente dejamos estos tirantes rizados en el exterior. Si volvemos a nuestra tienda, ahora podemos pegar esto en nuestro registro de entrada. Si nos desplazamos hacia arriba cuando usamos el método de inicio de sesión y contraseña, que es de firebase, necesitamos pasar en el correo electrónico y también la contraseña. Cuando llamemos a esta acción pronto, la carga útil del usuario contendrá el correo electrónico y contraseña por lo que necesitamos cambiarle esto al usuario. Contendrá los datos del usuario. Esto va a contener nuestra información de usuario. Podemos almacenar esto dentro de una constante llamada datos de usuario. Esto se va a almacenar en el valor de retorno de firebase y podemos usar estos para cometer nuestra mutación justo arriba. Ahora tengo estos datos de usuario almacenados contigo volver de firebase. Ahora podemos acceder a nuestro objeto de contexto, lo que nos permitirá acceder a cualquiera de los métodos y propiedades en la instancia de la tienda. Por ejemplo, podemos acceder a nuestro estado con el context.state, o podemos acceder a cualquiera de los getters anteriores, simplemente así. Queremos usar el método commit, pero también podemos simplificar esto mediante el uso de la destrucción del argumento ES6. En lugar de agarrar el contexto completo, todo lo que queremos hacer es tirar del método commit, lo que significa que podríamos acceder a esto directamente por nombre. ¿ Qué es exactamente lo que queremos comprometer? Donde queremos cometer una mutación por el nombre del estado de usuario. Vamos a pasar esto como una cuerda. El segundo argumento va a ser la información del usuario, que tenemos de vuelta de firebase, que hemos almacenado en datos de usuario y podemos acceder a nuestros objetos de usuario. También usamos esta referencia FireBaseAuth aquí también. Necesitamos importar esto también en la parte superior del archivo. Necesitamos importar esto como importación de nombre. FireBaseAuth déjame la ubicación del paquete es de../y luego firebase. Ahora sé que esto puede parecer un montón de pasos a dar solo para poner al usuario en nuestro estado. Pero recuerda que se agrega este paso de acción, por lo que no tenemos restricciones en el uso de código asincrónico con esta acción. Todo ahora configuración, lo último que hay que hacer es darle una oportunidad. Hacemos esto despachando la acción de nuestros componentes y esto es lo que veremos hacer a continuación. 44. Acciones de despacho: En el último video, moveremos el código de inicio de sesión de los componentes login.view a nuestra tienda central. Ahora la acción está completa. Necesitamos enviarlo desde nuestros componentes de inicio de sesión, pasando el correo electrónico y la contraseña del usuario para que funcione. Me dirijo al componente login.view y luego desplácese hacia abajo hasta nuestro método de inicio de sesión. Actualmente el método de registro está vacío y vamos a empezar a trabajar en esto ahora. Podemos comenzar por eliminar la palabra clave asíncrona. Esto se debe a que la función está marcada como asíncrona en la tienda central y luego dentro de aquí, vamos a empezar por crear un objeto de usuario cual va a almacenar nuestro correo electrónico y contraseña. Vamos a configurar el correo electrónico desde la propiedad de datos, que se puede acceder con el correo electrónico de la tienda y también la contraseña está disponible desde la propiedad de datos también. El siguiente paso a hacer justo después de nuestro objeto de usuario es despachar en acción, pasando los detalles como carga útil. Entonces acceda a mi tienda la cual vamos a importar en tan solo un minuto. Entonces necesitamos llamar al método de despacho, que va a tomar en nombre de la acción. El nombre de la acción es SignIn, y luego pasamos la carga útil que es nuestro objeto de usuario. es bueno ya no necesitamos nuestra referencia firebase, ya que has movido esto a un archivo diferente. Poner en su lugar, necesitamos importar nuestra tienda. La ruta del archivo como una cadena es../. Tenemos que entrar a nuestra tienda, y luego el nombre del archivo es nuestra tienda. Ahora tenemos que comprobar esto es trabajar mostrando el valor de CurrentUser en nuestra app. Recordar CurrentUser era el nombre de una pieza de estado, que pusimos en el store.js. Se trata de un CurrentUser el cual se establece en null como predeterminado y sabemos desde antes en la sección, que para obtener los contenidos de nuestros estados. Necesitamos usar getters. Vamos a configurar el servidor para nuestro CurrentUser. Dentro del getter hay objetos separados por una coma. Voy a llamar a esto el CurrenUser y pasar en nuestra función, que agarra al CurrentUser del estado. Ahora tendremos a nuestro getter. Voy a agregar esto a una propiedad de computadora de en los componentes admin.view, así que desplácese hacia abajo a JavaScript. Ahora puedes agregar esto dentro de la sección calculada. El nombre de CurrentUser. Vamos a devolver el valor, que es de esto. $ tienda, accede al objeto getters, y al CurrentUser. Entonces dentro de nuestra plantilla, podemos generar el valor en cualquier lugar de nuestro código como prueba. Voy a subir a la sección de inicio de sesión como, y solo salida esto dentro de las llaves dobles. Ver este contexter funciona iniciando sesión y viendo nuestros objetos de usuario. Pasemos a nuestro administrador donde podamos iniciar sesión. Desplázate hacia abajo, actualmente no estamos ingresados como nadie. Inicie sesión, utilizando nuestro correo electrónico y contraseña que se configuró dentro de una firebase, inicie sesión. Ahora si nos desplazamos hacia arriba, vemos todos los detalles del usuario que se mantiene para nuestro CurrentUser dentro de una firebase, pero no necesitamos toda esta información dentro de nuestra aplicación. Voy a filtrar esta información de uso hacia abajo para solo mostrar el correo electrónico del usuario conectado actual. Podemos ver dentro de este objeto hay una clave de email dentro de aquí y para solo devolver esta dirección de correo electrónico, podemos hacer un pequeño cambio a nuestra mutación dentro de nuestro store.js. Todo lo que vas a hacer es establecer el CurrentUser dentro del UserStatus. Vamos a configurar el usuario actual para que sea igual a usuario.email. Esto tomará la dirección de correo electrónico de los objetos de usuario. Bajemos e iniciemos sesión una vez más, haga clic en “Iniciar sesión”, desplácese hacia arriba, y ahora solo tenemos la dirección de correo electrónico iniciada sesión. También necesitamos pasar por encima del método de cierre de sesión a la tienda también, dentro del admin.view donde tenemos nuestro método de cierre de sesión. Podemos cortar los contenidos y trasladar esto a nuestra tienda. Por lo que han suscrito sesión, describen todos los contenidos. Podemos llevar esto a nuestro store.js, que va a ser una acción. Podemos agregar esto para llenar el SignIn, lo que separados por una coma, esto se llama SignOut, que voy a agregar como una función asíncrona. Una vez más, podemos desestructurar nuestro método de commit y configurar el resto de nuestra función para luego pegar en los contenidos. Volverá a estar usando esta acción para comprometer el método de estado del usuario y como estamos saliendo de sesión, queremos que el usuario sea nulo. Entonces justo después de la sección de corte, vamos a comprometer el nombre de nuestra mutación, que es el UserStatus, y establecer que la carga útil sea nula. Entonces ahora tenemos nuestra acción SignOut todo ahora configurada, ahora podemos despachar esto en el admin.view. Vayamos a nuestro método de registro donde pudimos los contenidos fuera antes. Dentro de aquí vamos a acceder a la estrella que importará en tan solo un momento. Podemos llamar a despacho. En el nombre de la acción que queremos despachar es SignOut. Podemos entonces reemplazar nuestro impulso firebase justo arriba con nuestra tienda y la ruta del archivo es../. Podemos acceder a la carpeta de la tienda y luego al archivo de la tienda. Guarda esto bajo los proyectos. No vemos ningún detalle, así que iniciemos sesión. Desplázate hacia arriba y tenemos el email del usuario conectado, click en “Cerrar sesión”. Ahora vemos estos movimientos el correo electrónico del usuario desde la pantalla. Por lo que nuestro método de registro ahora sigue siendo un trabajo en, pero esta vez se coloca en nuestra tienda central. Estamos haciendo buenos avances con Vue X y también nuestro proyecto. Vue X puede parecer un poco confuso al principio. Es sólo algo que se vuelve más claro con la práctica. Ya has visto la mayoría de los conceptos básicos de Vue X. Así que no hay mucho extra que aprender. Mucho de lo que cubrimos para el resto de esta sección está enfocado en simplificar nuestro código y hacerlo más organizado. 45. Mapeo de los getters: Ahora sabemos usar getters para acceder al estado desde nuestro puesto. Después agregamos estos getters como propiedades computadas al igual que aquí dentro de los componentes admin, para permitirnos mantenerlos actualizados si cambia el estado. Esto funciona completamente bien, pero hay una manera de que podamos simplificar este código, que será de utilidad si tenemos mucho más getters que quieres configurar. Podemos hacerlo mediante el uso de MapGetters, que es un ayudante proporcionado por Vuex. Para usar esto primero necesitamos importar esto desde nuestra biblioteca Vuex. Arriba en la parte superior de nuestros scripts, podemos importar como mapGetters de importación con nombre, que es del módulo vuex por lo que no necesitamos la ruta del archivo. Después podemos agregar MapGetters a nuestros objetos de propiedades computadas. interior de aquí podemos utilizar los tres puntos, que es el operador de spread ES6, que nos permite mezclar estos getters con cualquier propiedad de computadora existente que ya tengas. MapGetters toma en una matriz en la que agregamos los nombres de los getters que desea utilizar. A continuación se enumeran los getters que desea utilizar. Tenemos; obtener elementos de menú los cuales fueron agregados como una cadena separada por una coma, también tenemos número de órdenes y el tercero es el usuario actual. Ahora podemos eliminar las propiedades computadas existentes. Dale esto para guardar y pasar al navegador. Podemos probar si esto está funcionando bien. Vamos a desplazarnos hacia abajo a nuestro menú. Tenemos los ítems del menú, así que obtener ítems del menú sigue funcionando. Podemos probar que el usuario actual está funcionando también iniciando sesión. Desplázate hacia arriba y vemos el correo justo ahí, lo que significa que ahora todo está funcionando bien. No hace mucho tiempo solíamos recibir un mensaje de error al usar el operador spread y necesitábamos agregar un plugin de Babel adicional. Este ya no es el caso con la última versión de la CLI Vue. Para terminar esto ahora podemos volver a Visual Studio Code, y repetir esto en los componentes del menú. Podemos importar el ayudante de Vuex en la parte superior de nuestro script, que era MapGetters de vuex y desplazarse hacia abajo a nuestro compute su acción. Podríamos eliminar elementos de menú get, y reemplazar esto por MapGetters. Recuerde que esto toma en una matriz y el nombre de cadena fue obtener elementos de menú. También podemos agregar más getters en el futuro si nos gusta, pero por ahora vamos a guardar esto y pasar al menú. Haga clic en el enlace de menú, y nuestro menú ahora todavía funciona. Si como yo, se te veía actualmente una matriz vacía dentro de las cestas, cuando está vacía, también podemos quitar este código de antes. Si vas al menu.view, podemos desplazarnos hasta nuestra plantilla, y no voy a quitar esto de justo debajo de nuestro texto de cesta donde lo pondré. estado. órdenes. Debería quitar esto, y nuestra canasta ya está actualizada. Usar el ayudante de MapGetters es una forma útil de organizar nuestro código y los beneficios se vuelven aún más grandes a medida que agregamos más getters a nuestra aplicación. 46. Dividir nuestra tienda en archivos separados: Tener todos nuestros estados, tanto desde la aplicación como desde fuentes externas, como Firebase dentro de nuestra única tienda central puede ser conveniente. Además, como cabría esperar, puede ponerse bastante lleno a medida que nuestra aplicación crece con todas las acciones, mutaciones y los getters en un solo lugar. Por suerte, Vuex no restringe la forma en que estructuramos nuestra tienda. Podemos dividirlo en múltiples archivos para hacer nuestro código más organizado y mantenible. En este video y también en el siguiente, te voy a mostrar algunas formas diferentes de organizar tu tienda y también cómo usar los módulos. Por supuesto, también puede que se te ocurra tu propia manera preferida también. El primer modo que voy a cubrir es la división de nuestras acciones, getters y mutaciones en sus propios archivos separados. Estos tres nuevos archivos también vivirán en la carpeta de la tienda. Vayamos a nuestra tienda dentro de la barra lateral. Y podemos crear un nuevo archivo para cada uno de estos. El primero es actions.js, el siguiente es para el getters.js, y el tercero es para las mutaciones. Voy a empezar citando nuestras acciones del archivo principal store.js, luego pegarlas dentro de nuestro nuevo archivo de acciones. Por lo que dentro aquí, busquemos nuestras acciones y podemos quitar todo lo que hay dentro del corsé rizado circundante. Firmaré la sesión y también firmaré, dejando sólo los tirantes rizados que rodean esto. Saca estos y luego dirígete al actions.js. Podemos pegarlos en, y también necesitamos exportarlos como una constante. Por lo que podemos importar estos dentro de nuestra tienda principal. Entonces el primero de inicio de sesión, podemos exportar esto como una constante. Dado que ahora ya no forma parte del objeto del método, también necesitamos convertir esto en una función independiente. Podemos agregar un igual después del nombre de la función. Podemos repetir esto también para el cierre de sesión justo debajo. Por lo que exporta const, reemplaza el colon por los iguales. También necesitamos importar nuestro FireBaseAuth también, arriba en la parte superior. Se trata de una exportación de nombre. Por lo que FireBaseAuth y esto es de la ruta del archivo de punto-dot slash y luego firebase. Si nos desplazamos hacia abajo, ya que estas también ahora funciones independientes, solo necesitamos eliminar la coma que separa el inicio de sesión y cerrar sesión. Podemos hacer exactamente lo mismo si tienes más acciones, y más adelante añadiremos más acciones en este proyecto. Por ahora sin embargo, necesitamos importar esto de nuevo a nuestro store.js, donde acabamos de eliminar estos de. Empecemos en la parte superior. Podemos eliminar nuestras importaciones de firebase, y en su lugar podríamos reemplazar esto por una estrella, que utilizamos para importar todo el contenido de nuestro nuevo archivo en lugar de un solo miembro. Esto importará todas nuestras acciones desde nuestro archivo de acciones. Este nombre de acciones depende de nosotros, pero este es simplemente el nombre que usamos para referirnos al objeto importado. Algunas acciones tienen sentido. Esto está en la misma carpeta, así que simplemente barra de puntos y luego acciones. Después podemos bajar al fondo del archivo donde tenemos nuestras acciones objeto. Podemos quitar el colon y los tirantes rizados, dejando una referencia a las acciones que acabamos de importar. Ahora podemos probar esta acción sigue funcionando iniciando sesión y saliendo. Por lo que aún vemos el correo electrónico del usuario en el admin. Vamos a reenviar admin slash, desplácese hacia abajo hasta la parte inferior, inicie sesión. Pulsa el botón “Iniciar sesión”. Entonces si nos desplazamos hacia arriba, vemos el correo electrónico del usuario firmado. Haga clic en “Cerrar sesión” y ambas funciones de archivo ahora siguen funcionando. Por lo que sólo necesitamos hacer exactamente lo mismo para nuestros getters y mutaciones. Este es definitivamente un reto que creo que puedes hacer tú mismo. Basta con seguir el mismo proceso, moviendo las mutaciones y los getters a su propio archivo, tal y como hemos hecho con las acciones. Así que pausa el video y dale una oportunidad si te sientes seguro al hacerlo. Voy a empezar de nuevo en los getters. Dirígete al store.js. Podemos agarrar a los tres de nuestros getters, a nuestro nuevo archivo, pegarlos en, exportar const, los tres. Recuerda, como ahora estas son funciones independientes, necesitamos reemplazar el colon por un igual, ya que éstas ya no forman parte de un objeto. También necesitamos eliminar las comas que separan cada una y luego podemos importarlas de nuevo a nuestro store.js. Al igual que antes podemos quitar el objeto que apunta a una referencia getters, que ahora podemos importar en la parte superior, reemplazar a los getters, y luego lo mismo para las mutaciones. Aquí tenemos el AddOrder y el UserStatus. Quitemos ambos. También podemos eliminar un objeto mientras estamos aquí en el nuevo archivo de mutaciones. Asumamos estos en, exportamos const, sumamos los iguales. También lo mismo para el segundo, añadir los iguales en y también eliminar la coma. Si aún tienes algún código comentado, también podemos eliminar este. Esto ya no es necesario. Volver a nuestra tienda. Podemos importar esto. Estas fueron las mutaciones. También cambie la ruta del archivo. Entonces esto lo. Ahora le da a esto un “Guardar” y pasa a los proyectos. Todo sigue funcionando como normal. Vamos a probar el administrador. Todo se ve bien. Entonces esta es solo una forma de estructurar nuestro código Vuex. Bueno, ya se puede ver cómo esto nos podría beneficiar a medida que crece la aplicación. A continuación, vamos a cubrir módulos, que es otra forma útil de organizar el código dentro de nuestra Tienda Vuex. 47. Uso de módulos: Vuex también nos permite organizar nuestro código en módulos. Descubrimos separar nuestras acciones, getters, nuestras mutaciones en los propios archivos, lo cual fue una mejora. Pero podemos mejorar las cosas aún más agrupando funcionalidad relacionada. Por ejemplo, todo lo que actualmente se encuentra en nuestra tienda se puede dividir en tres grupos. Incluso está relacionado con nuestro menú, los pedidos, o nuestros usuarios. Para que podamos organizar nuestro código en estos módulos gratuitos. Voy a hacer esto de nuevo en la carpeta de estilo. Dentro de aquí podemos crear una carpeta de módulos, para almacenar nuestros nuevos archivos gratuitos. Esto también va a ser archivos JavaScript. Entonces el primero es para la funcionalidad del menú. Todavía dentro de los módulos creamos el orders.js, y finalmente los usuarios. Asegúrate de que todos estos anidados dentro de la carpeta de nuevos módulos y luego podemos empezar con nuestro menú. Dentro de aquí podemos sumar todos los getters estatales, mutaciones, y acciones que están relacionadas con nuestro menú y almacenarlas dentro de una constante. Para que podamos configurar el estado como un objeto. Podemos hacer nuestros getters, las mutaciones. Entonces, por último, las acciones. Voy a empezar en este archivo agregando nuestros ítems de menú de estados, que actualmente tenemos un bonito tall.js. interior aquí, el estado tiene nuestros ítems de menú, que es un objeto. Localicemos el corsé rizado de cierre. Voy a mover todo aquí dentro. Dejar las órdenes son y también el usuario actual. Pega estos en él a nuestro menu.js dentro de nuestros objetos estados. Había dos piezas de estado en nuestra tienda están relacionadas con los pedidos y el usuario. Entonces agrega estos al módulo propio pronto. A continuación voy a agarrar los elementos de menú get, que es un getter de nuestro archivo guesses.js. Cortemos esta línea otra vez. Más de dos están relacionados con los más de dos módulos. Podemos simplemente agarrar el primero. Bajar a los getters es enfrentar esto en. Esta función también está ahora en nuestros getters objeto dos. Tenemos que devolver esto a un método cambiando iguales a dos puntos. Coma también puede quitar la x-box. No tenemos ninguna mutación que añadir, y agregaremos algunas acciones a este archivo más adelante. Cuando x necesita exportar todas estas constantes, así podemos usarlas en nuestros archivos. Tenemos nuestros estados, tenemos nuestros getters, mutaciones, y acciones. Por lo que no podemos exportar por defecto, un objeto que contendrá estas cuatro variables. Entonces estado, mutaciones, getters, y finalmente, las acciones. Al igual que en el último video, te animaría a completar los pedidos en los módulos del usuario por sí mismo. Sí importa si estropeas las cosas. Voy a seguir adelante hasta esto ahora. Siempre podemos comparar el código al final. Recuerda dos por cada copia funcional sobre nuestros módulos, necesitamos reemplazar los iguales por dos puntos, tal y como hemos mirado aquí. Pasemos ahora a las órdenes. Este nuevo módulo. Podemos crear una constante de estados. Podemos crear nuestras mutaciones, los getters, las acciones, y luego finalmente exportar valores predeterminados de objetos para estas cuatro variables. El inalámbrico está vacío, acaba de cambiar esto. Voy a seleccionar todo y copiar y pegar esto por dentro del users.js. Entonces podemos empezar a trabajar con nuestras órdenes. En primer lugar, dentro de los estados, podemos agarrar cualquier estado que relacionado con órdenes del store.js. Nuestros pedidos se inicializan como una matriz vacía. Quitemos esto, esto son interestatales. Tenemos mutaciones o mutaciones carpeta, que es nuestra adición a orden. Eliminar esta base es igual, recuerda quitar las exportaciones y también poner esto de nuevo para que sea dos puntos. También tenemos un getter, que es el número de órdenes. Retira esto y pega esto en nuestro módulo. Actualmente no tenemos ninguna acción. Entonces por ahora podemos guardar este archivo y también los getters. Podemos empezar a trabajar en el módulo users.js. El muy top para el estado tenemos al usuario actual el cual puedes agarrar de nuestro puesto, que actualmente está configurado para conocer. Podemos agregar este final siguiente paso para las mutaciones, tenemos el estado de usuario. El mutations.js, agarra todo el contenido y pega esto en un objeto de pared, quita nuestra exportación, configuración, nuestro colon, y abajo a nuestros getters. Hay un getters que necesitamos para este archivo, y esto es para obtener al usuario actual de nuestro archivo getters.js. Quitemos esto, eliminemos nuestras exportaciones y los dos puntos, y abajo a las acciones por las acciones relacionadas con el usuario, tenemos el método de inicio de sesión. Vamos a agarrar esto de nuestro actions.js. También podemos agarrar el letrero mientras aquí también. Agarremos ambas fases en ella. Entonces usaré módulo como siempre. Podemos quitar las exportaciones a un colon. También necesitaremos separar a estos dos con una coma. El mismo diseño en, esta acción también utiliza la base de fuego off. Tenemos que agarrar esto también de nuestro archivo de acciones y añadirlo a nuestro módulo de usuarios. Asegúrate de que ahora todos nuestros archivos estén guardados. Conozco el archivo Thom Mayne store.js. Ahora necesitamos importar nuestros nuevos módulos gratuitos. También podemos quitar a nuestros getters, mutaciones, y acciones. Voy a importar nuestro módulo muchos de la ruta del archivo de./ a la carpeta de módulos y al menú. Esa es nuestra decisión a más veces. Este es para las órdenes, ambos /ordenes. Entonces el último fue para los usuarios, desplácese hacia abajo hasta nuestros objetos de la tienda. Podemos quitar nuestros estados. De hecho, podemos quitar todo desde adentro aquí y luego reemplazarlos por nuestros módulos, que es un objeto, pero vamos a pasar en las órdenes de menú y también a los usuarios. También sólo para limpiar las cosas, voy a quitar nuestras acciones, getters, nuestros archivos de mutaciones. Ya no necesitamos estos dentro de nuestros proyectos. Pero puedes necesitar estos en como referencia si lo prefieres. De hecho, puede ser mejor utilizarlos para estado no relacionado que no pertenece a un módulo propio. Ahora vamos a guardar este archivo y nos dirigimos a nuestra aplicación. Cuánto ha cambiado la ruta del archivo. Voy a utilizar este archivo, que sólo significa cambios a un doble../sobre a los proyectos. Probemos los elementos del menú para comenzar. Todo esto se muestra en la pantalla. Podemos intentar iniciar sesión. El administrador hacia abajo abajo donde podemos agregar nuestro correo electrónico y contraseña. Todavía podemos iniciar sesión y también cerrar sesión. Esto parece estar todo funcionando, pero esta vez usando módulos. También volveremos a estos módulos en la siguiente sección y los agregaremos a medida que aprendemos a mantener los datos de una tienda sincronizados con Firebase. 48. Vinculación de Vuex a Firebase: Voy a comenzar esta sección agregando fijaciones Firebase a Vuex. Ahora que tenemos Vuex agregado a nuestra aplicación, ahora tenemos un lugar centralizado para todos nuestros datos y nuestro estado. En este apartado, también estaremos atando nuestra puerta Vuex a Firebase. Si bien Vuex puede ser una ubicación central conveniente para empujar y recuperar nuestros datos, no es una tienda de datos persistente. Esto significa que si recargamos la app, entonces se pierden los cambios realizados en la tienda. Para solucionarlo y asegurarme de que nuestros artículos de menú y pedidos estén almacenados de forma permanente, voy a mantener sincronizada la tienda Vuex con Firebase. Esto lo haremos con un paquete llamado Vuexfire, y este paquete lo mantiene el equipo de call VJS, y permitirá que nuestra tienda central Vuex se mantenga sincronizada con nuestros datos de Firebase. Hace esto escuchando nuestra base de datos Firebase y luego comunicando mutaciones para cambiar nuestro estado para que coincida. Por el momento, si vamos dentro de nuestro admin, podemos agregar una nueva pizza por dentro aquí. Podemos agregar esto, y podemos ver que esto no se agrega a nuestro menú, o si pasamos a los componentes del menú, tampoco lo vemos agregado ahí. Esto se debe a que si pasamos a nuestros módulos de tienda. Entonces vamos a entrar en el menu.js, y luego hasta nuestro estado. En el interior de aquí sólo tenemos nuestros datos ficticio. Por lo que ahora será un buen momento para eliminar esto y reemplazar esto por una matriz vacía. Entonces voy a eliminar todos los contenidos del interior de nuestros estados, podemos dejar el nombre de los ítems del menú, pero esta vez voy a establecer esto igual a una matriz vacía. Esto pronto se mantendrá sincronizado con Firebase. Por lo que todos los datos que tenemos dentro de nuestra base de datos se reflejarán entonces dentro del estado. Significa que todavía podemos usar nuestro getter de artículos de menú get para agarrar nuestro estado y empujarlo a nuestros componentes. Entonces ahora instalemos el paquete que necesitamos, que se llama Vuexfire. Voy a hacer esto vía npm, con el comando i en el nombre del paquete es Vuexfire, y esto sólo debería tomar unos momentos para instalarlo. Genial, con esto ahora, podemos verificar que esto está instalado dentro del paquete.json, podemos subir a dependencias y recibir Vuexfire está instalado aquí, y el siguiente paso es agregar nuestras mutaciones Firebase. Se agrega al almacén raíz y estos en mutaciones, necesitamos mutar nuestro estado cada vez que cambian los datos dentro de la Firebase. Entonces vamos a pasar a la raíz store.js dentro de nuestra carpeta de puestos. Probablemente hablaré, primero necesitamos importar estos de Vuexfire. Esto se va a llamar importación. Por lo que dentro de los tirantes rizados, mutaciones Vuexfire, en el paquete está Vuexfire. Esto nos permitirá entonces inyectar estas mutaciones en la raíz de nuestra tienda. Por lo que podemos agregar las mutaciones con el nombre coincidente desde arriba. Ahora tengo esto, el siguiente paso es potenciar nuestras acciones. Esto toma nuestras acciones normales que tenemos en nuestra tienda, luego agregar algunos parámetros adicionales para vincular o desvincular nuestro estado a una referencia Firebase. Entonces en nuestro caso, combinamos nuestro menú Firebase con la colección más antigua, y veremos cómo hacerlo ahora. Vamos a configurar esto de nuevo en el módulo de menú, primero, necesitamos importar la acción Firebase, al igual que acabamos de hacer con las mutaciones de Firebase en la parte superior. De acuerdo, esto se llama exportación, por lo que agregamos esto dentro de las llaves, el nombre es acción Firebase. Una vez más, desde nuestro paquete Vuexfire, también vamos a estar lidiando con nuestra referencia de menú, por lo que también podemos importar esto desde nuestro propio archivo Firebase. Se llamará el menú DB ref. La ruta de acceso del archivo es punto, slash de puntos, dot, slash y el nombre de archivo de Firebase. Por lo que ahora dentro de este módulo de menú, ya tenemos nuestra configuración de objetos de acciones. Dentro de aquí vamos a utilizar la acción de la Tormenta de Fuego que acabamos de importar, en lugar de usar una acción regular. Esto terminará nuestra acción para que podamos usar Vuexfire para mantener nuestros datos sincronizados con Firebase, y voy a llamar a este nuevo menú de acción ref. Podemos entonces acceder a la acción de cinco estrellas, que acabamos de importar, instalar acción también toma en nuestro contexto objetos igual que lo hace una acción regular, pero como mencionamos antes, pero como mencionamos antes,también la mejora con algunas nuevas funciones para ayudar a vincularlo a Firebase. Vamos a configurar esto como una función. El primero que hay que hacer dentro de nuestro cuerpo de función es devolver el contexto y luego acceder a una de las funciones extra proporcionadas llamada bind fire store ref. Pero, ¿qué es exactamente lo que queremos vincular a Firebase? Si nos desplazamos hacia arriba, ya tenemos dentro de este archivo plomo dos cosas que queremos enlazar. Tenemos una referencia a nuestra base de datos la cual apunta a nuestra colección de menús dentro de nuestros estados. Justo debajo, tenemos nuestros artículos de menú local. Por lo que estas son las dos referencias que quieres mantener sincronizadas. Combinamos estos juntos y nos aseguramos de que los datos sean exactamente los mismos. Entonces, antes que nada, pasemos en nuestro estado de los elementos del menú. Y entonces el segundo argumento va a ser nuestro menú db ref. Si ahora pasamos a nuestra aplicación, que determinó con esto, esto ha sido agregado automáticamente por el editor de texto. Entonces esto solo necesita ser una acción viable, volver a la aplicación, ves que ahora hemos perdido nuestros elementos de menú. Esto es porque nos falta una cosa importante. Hemos creado nuestra acción en el módulo, pero en realidad no la hemos despachado. Esta acción en particular no cambia nuestro estado, más bien, se vincula a Firebase en su lugar. Por lo tanto, queremos enviarlo tan pronto como se cargue la aplicación. Un buen lugar para hacer esto sería dentro del gancho creado en el archivo principal app.view. Vayamos a la app.view y bajemos a nuestro guión. Podemos añadir el gancho creado justo después de nuestros componentes. Nosotros despachamos esto igual que con cualquier acción, podemos acceder a este despacho dot star dot. El primero es pasar acción fácil la cual se llama set menu ref. El segundo argumento es la carga útil, que es DB menu ref, que apunta hacia la recolección de menús en nuestra base de datos. Ahora hemos incluido el DB menu ref, también necesitamos importar esto en la parte superior de nuestros scripts desde nuestro archivo Firebase, que se encuentra en la slash de puntos, y luego Firebase. De repente, dentro del gancho creado, enviaremos la acción una vez creada la app. Esto asegurará que nuestra tienda esté ligada a Firebase de inmediato. Ahora esperemos que si guardamos este archivo y luego nos dirigimos a nuestro proyecto, ahora vemos dentro del menú tenemos nuestra pizza pepperoni, que ahora se extrae de nuestra base de datos. Pasemos a las rutas de administración. Podemos comprobar que esto se está visualizando correctamente aquí también. Vemos la pizza de pepperoni también aquí. Vamos a intentar agregar uno más. Podemos agregar esto con un dato por defecto. Ahora ver la margarita ha sido empujada a nuestra base de datos y también reflejada dentro de nuestro menú. Entonces este es realmente buen progreso y algo que es realmente importante para nuestra aplicación. A continuación también vamos a hacer lo mismo con nuestros pedidos y sincronizarlos con Firebase. 49. Sincronizar pedidos con Firebase: Si bien estamos en el tema de mantener sincronizados nuestros elementos de menú con Firebase, también podemos hacer lo mismo con nuestros pedidos. Para empezar, voy a dirigirme al archivo de configuración de Firebase, que es un firebase.js. Ya tenemos una base de datos de referencia a nuestro menú. También tenemos que hacer lo mismo para nuestro pedido también. Voy a duplicar esto y cambié la referencia dBorders, que vamos a señalar a nuestra colección de pedidos. Recuerda, está bien no tenemos un objeto llamado órdenes aún dentro de la Firebase. La primera vez que empujemos un nuevo orden, se creará para nosotros. Entonces podemos pasar a los componentes app.vue. Entonces dentro de aquí, también necesitamos importar esta referencia. Contamos con la referencia del menú, por lo que también podemos agarrar nuestra nueva referencia de pedidos. Después desplazándonos hacia abajo dentro del gancho creativo, podemos duplicar esto y hacer lo mismo con nuestros pedidos. Esto va a mantener sincronizada nuestra referencia de pedidos, que creará en tan solo un momento con nuestra referencia de Firebase. Este set ordena referencia es una acción que no hemos creado, así que vamos a repasar y hacer esto ahora. Esto va a ser similar a set menu ref, que creamos en el último video. Copiemos esto de nuestro menú. Menú está dentro de los módulos. Agarra esto de las acciones y luego podemos ir a nuestro orders.Js pegarlo en como acción, y todo lo que tenemos que hacer es cambiar cualquier referencia de nuestro menú para que sean órdenes. El nombre, las órdenes ref, esto es simplemente órdenes, que es el nombre de nuestro estado justo arriba, que se dice que es una matriz vacía. Recuerda, para que esto funcione, también necesitamos importar nuestra acción Firebase y nuestra referencia de pedidos. Podemos subir a la parte superior del expediente por encima de nuestros estados. Importar primero nuestra acción Firestore de nuestro paquete, que es vuexfire. En segundo lugar, vamos a importar nuestro DBordersRef, que acabamos de crear en nuestro archivo Firebase. por lo que.. /base de fuego. Al igual que con el menú, esto va a agregar una acción, que une nuestros pedidos, que es el nombre de nuestro estado dentro de este módulo con todos nuestros OrdersRef, que apunta a nuestra colección dentro de Firebase. Con esto ahora en su lugar, podemos configurar un getter justo debajo, que va a sacar nuestras órdenes desde Firebase. Voy a llamar a esto GetOrders. Esto va a tomar en nuestros estados dentro de nuestra función para luego devolver a nuestro estado las órdenes. Es posible que empiece a ver un patrón aquí ya que mucho de lo que estamos haciendo es justo lo mismo que hicimos para los elementos del menú. Configuramos un enlace entre local, estatal, y Firebase luego creamos un getter para agarrar estos datos, que puedes usar dentro de nuestros componentes. Usaremos este getter en el siguiente video para mostrar nuestros pedidos dentro del admin. 50. Mostrar pedidos en la sección de administración: Ahora tenemos nuestros conjuntos de fijaciones Firebase de nuestras órdenes, donde creamos nuestra antigua referencia dentro de nuestras acciones. También creamos un getter para tirar de nuestros artículos desde el estado. Ahora usemos este getter dentro del componente admin para mostrar los pedidos y también para cambiar nuestra cesta de la compra para empujar nuevos pedidos a Firebase en lugar de directamente a toda vista Expo. Voy a empezar empujando estas órdenes a Firebase dentro de los componentes de la vista de puntos del menú. Abajo en la parte inferior. Dentro de todos los métodos tenemos AddneWorder, que actualmente está cometiendo una nueva mutación llamada AddOrder. Dentro de los pedidos, esta es la mutación AddOrder y esto está empujando directamente a nuestra tienda. Ahora voy a comentar esto hacia fuera y en su lugar, voy a añadir una nueva acción hacia abajo en la parte inferior, que en su lugar va a empujar nuestros nuevos pedidos Firebase. Esta acción se va a llamar AddneWorder, y esto es ser responsable de empujar nuestros nuevos pedidos a Firebase. Voy a marcar esto como asíncrono, para que podamos usar un peso dentro de nuestro código. Podemos pasar en cualquier contexto y también el orden que va a ser la carga útil pasada a esta acción. Podemos configurar nuestra función con una sección try y una catch para cualquier manejo de errores. Tomando en el error, y para cualquier error, vamos a pasar en una alerta con la cadena, “Lo sentimos, hubo un problema al hacer su pedido, por favor inténtelo de nuevo”. El transacción va a ser bastante simple, todo lo que necesitamos hacer es acceder a nuestro dBorderReference, y luego llamar al método add, que va a empujar la carga útil de orden. Vamos a camino esto y esta es ahora nuestra acción completa. Aviso dentro de esta acción no cometemos mutación, ya que no necesitamos actualizar nuestra propia tienda. En cambio [inaudible] va a manejar tirar de nuestros datos desde Firebase, que luego actualizará demasiado nuestro estado local. Ahora podemos llamar a esta acción desde nuestros componentes de menú al hacer un nuevo pedido. En primer lugar, voy a crear una nueva constantes la cual va a contener nuestros datos de auditoría como objeto, podemos pasar en desorden AP, que son las pizzas que contenían dentro de nuestro orden, que podemos agarrar de este cesta de la tienda. No obstante, por el momento esto nos causaría un problema, nuestra cesta de la compra es un tipo de array dentro de la propiedad de datos. No obstante, Firebase esperará un objeto, por lo que necesitamos convertir esta canasta para que sea un tipo de objetos agregando las llaves. Entonces podemos usar los tres puntos, que es el operador spread, y esto se fusionará en los elementos de matriz en nuestros objetos. Además, voy a agregar una propiedad CreateDat, que va a ser igual a una nueva fecha JavaScript. Lo cual nos va a permitir jalar en nuestras órdenes en orden de fecha, ya no cometemos una mutación, así que voy a comentar esto. Ahora voy a despachar nuestra nueva acción e ir a acceder a estos almacenados directamente, resolviendo polities en tan solo un momento, llame a nuestro despacho, pasando en nombre de nuestra acción, que es nuestro nuevo orden. Entonces la carga útil, que es nuestro viejo objeto desde arriba. Desplácese hacia arriba. Ahora podemos importar nuestro puesto en la parte superior de nuestros guiones. Desde la ruta del archivo de la slash de puntos, voy a estancar carpeta, y luego voy a estancar el archivo. Pasado al navegador, ahora podemos probar esto agregando un nuevo pedido, así que solo voy a pedir unos pepperonis hacer tu pedido. Ahora, si vamos a la consola Firebase, nos da una recarga, ahora vemos nuestra colección más antigua con nuestras pizzas que creamos antes. Probemos una más, dos de Margherita, esto ahora se ha añadido dentro de una Firebase. No obstante, si pasamos a los componentes admin, así adelante/admin, desplácese hacia abajo hasta nuestros pedidos. Sólo vemos el único valor codificado duro que agregamos antes, por lo que ahora podemos eliminar estos valores codificados duros y hacer que esto sea dinámico. Recuerda en el archivo de orden [inaudible], creamos un getter get orders, que puedes tirar en nuestras órdenes. Ahora, vamos a admin dot view y actualizamos nuestros componentes. Dentro de la sección computada, ya tenemos nuestro getter el cual actualmente mapeamos. Podemos agregar uno más, que es obtener órdenes. Entonces en la plantilla podemos recorrer y mostrar los pedidos. Busquemos la sección de pedidos. Dentro del cuerpo de la mesa, podemos agregar un V for loop. Vamos a almacenar cada elemento dentro de la variable auto, también vamos a grabar el índice en GetOrders, también necesitamos agregar una clave dinámica. Para combinar esto, toma el valor clave del ID de punto de orden. Lo primero que podemos hacer es numerar las órdenes individuales, en lugar del valor codificado duro antes. Dentro de las llaves dobles, podemos acceder a nuestro número de índice, y voy a agregar un valor de uno. Esto se debe a que los índices comienzan en la posición cero, queremos que se use el primer orden, y luego así uno. Ahora, tenemos nuestro pedido individual, ahora vamos a crear un segundo V for loop en la siguiente fila. Este bucle va a ser para todas las pizzas dentro de la orden, podemos almacenarlas dentro de una variable llamada OrderItem. Vamos a recorrer nuestro pedido y agarrar todas las piezas individuales. Después podemos agregar una clave dinámica para nuestra lista, y la clave puede ser OrderItem y recortar el ID. Entonces podemos usar el OrderItem para reemplazar nuestros valores codificados duros para nuestra pizza. Dentro de las llaves dobles, podemos acceder al nombre del punto OrderItem, podemos acceder al precio, la cantidad y también al precio a la baja en la parte inferior. También voy a eliminar el símbolo de moneda, ya que también estaremos agregando algo de formato a todos los precios más adelante, y esto se añadirá automáticamente en cuatro filas. Guarda esto, y ahora podemos ir a los componentes admin, desplázate hacia abajo y como nuestras dos órdenes que ahora sacarán de Firebase. Si puedes ver estos pedidos en tu pantalla, has sacado con éxito los pedidos de la tienda central, que se mantiene sincronizada con Firebase. De momento tenemos dos dueños, pero tendremos mucho más. No hay garantía de que cuando guardemos en orden o lo recuperemos de Firebase, vaya a volver en cualquier orden en particular. Recuerda desde antes cuando creamos nuestros objetos de órdenes abajo en AddneWorder, también agregamos un creado nuestro inmueble, que ahora podemos usar para tirar en nuestros pedidos desde Firebase en orden de fecha ordenada. Podemos hacer esto sobre cualquier orden dot JS dentro de nuestra acción donde establecemos la referencia de cinco tienda. Accedemos a nuestro dBorderReference y vemos donde también podemos agregar el OrderByMethod, que es proporcionado por Firebase, pasando en una cadena. El string va a ser el nombre de los campos que queremos comprar siempre, esto se crea aquello. Si ahora guardamos esto y pasamos al navegador, seguimos viendo nuestros dos pedidos de Pepperoni y luego de nuestros Margherita, que están en orden ascendente. Si queremos invertir en orden descendente, también podemos pasar en un segundo argumentos separados por una coma del ESC, que es abreviatura de descender hacia el admin y agradable y ahora invertido. No obstante, voy a mantener esto como orden ascendente, ya que es más práctico para nuestra aplicación. Pero esta es una característica útil si quieres revertir el orden de cualquier cosa que entre desde Firebase. 51. Mover añadir nueva pizza a la tienda central: Dentro de este newPizza.View componentes, utilizamos esto dentro del admin para agregar nuevos elementos al menú. Por el momento, todo funciona completamente bien y como se esperaba, empujamos directamente unos nuevos objetos de pizza a Firebase, usamos DBMenuEf, y luego de nuevo en el módulo menu.js, tenemos una configuración de acción, que es un jalón de fijaciones cualquier pizzas nuevas y después guárdalas en nuestra tienda. Lo que vamos a hacer ahora es sólo un refactor. Vamos a mover la funcionalidad de agregar una nueva pizza a nuestra tienda. Dentro de este menu.js, voy a configurar esto como una nueva acción justo debajo de SetMenureF. Esto mantendrá unida toda nuestra funcionalidad relacionada y más organizada. En primer lugar podemos crear esta acción la cual voy a llamar AddMenuItem. Esto va a ser asíncrona como en el contexto. Entonces como segundo argumento, vamos a pasar en la pizza como la carga útil, que pasará cuando despachemos esta acción desde nuestros componentes. Podemos configurar el resto de la función, podemos agregar manejo de errores, por lo que podemos agregar try y catch pasando en cualquier error. Entonces a partir de ahora, voy a agregar una alerta dentro de las garrapatas traseras, para que podamos insertar una variable de error, crear una nueva pizza, pasando en nuestro error como variable. Dentro de la sección try, esto de nuevo va a ser bastante sencillo al igual que con las órdenes que llamamos nuestro DBMenuReference. Sólo agregue método, pasando en la pizza como la carga útil. Esperanza en la parte superior, ya importamos nuestra referencia de menú, así que esto está bien. Ahora podemos dirigirnos a los nuevos componentes de pizza donde ahora podemos despachar esta acción. Primero necesitamos imponer nuestra tienda dentro del script VO. El camino final para nuestra tienda es dot dot slash en la carpeta de la tienda y luego nuestro archivo de la tienda, vuelta hacia abajo a nuestro método add. Voy a comentar esto fuera, acceda a nuestra tienda y luego podremos despachar nuestra acción. El primer argumento es el nombre de la acción de AddMenuItem. Entonces la segunda es la carga útil de la pizza, que podemos acceder con esto.NewPizza. Todo lo que necesito hacer ahora es darle a esto un Guardar y dirígete al administrador dentro del navegador. Ya no usamos DBMenuReference por lo que podemos desplazarnos hacia arriba y también eliminar esto también. Volver al navegador y al administrador. Actualmente en la base de datos, sólo tenemos el pepperoni y margarita. Probemos una más. Eso no es vegetariano. Simplemente voy a considerar usar la descripción y el resto de las opciones. Haga clic en “Agregar”. Ahí vamos, tenemos una nueva pizza vegetariana dentro de nuestro menú. También podemos revisar dentro de los componentes del menú y esto también se está agregando. Esto es sólo un pequeño refactor pero mantiene toda la funcionalidad unida y más organizada. 52. Eliminar elementos de la base de datos: Nos hemos centrado hasta ahora en añadir nuevas imágenes y nuevos pedidos, pero ahora vamos a desplazar nuestra atención a eliminar cosas de la base de datos. Si pasas a Visual Studio Code y te diriges a los componentes de la vista de puntos admin, dentro de la plantilla, ya tenemos algunos botones HTML configurados. Hemos querido eliminar cualquier elemento de menú y abajo dentro del bucle de órdenes. También tenemos un botón para eliminar cualquier pedido. Voy a empezar en primera persona, que es eliminar cualquier elemento de menú agregando un manejador de Click para nuestro botón de borrar. Justo después de la clase podemos agregar un click y luego configurarlo para que sea Remove menu item, cual queremos configurar como un método justo debajo. Esto necesita tomar en el ítem dot ID, por lo que sabemos cuál eliminar de la base de datos. Este manejador de clics va a despachar una acción desde nuestra tienda, que vamos a crear muy pronto. Ya tenemos nuestra tienda importada, por lo que ahora podemos desplazarnos hacia abajo y agregar esto como método. Justo después de cerrar sesión, podemos agregar Eliminar elemento de menú, que toma en los argumentos del ID que le pasas. Tenemos que despachar esta acción a la que vamos a llamar Eliminar elemento de menú accediendo a nuestro despacho de punto de tienda. El nombre de la acción, al que queremos llamar Eliminar elemento de menú y también el ID como carga útil. Entérate en el menú dot js que es el módulo de la tienda, podemos crear esta acción. Justo después de agregar elemento de menú, agrega una coma. Podemos configurar esto que fue Eliminar elemento de menú. Esto va a ser asíncrono. Podemos analizar en cualquier contexto y también la carga útil que fue el ID, establece sobre la función y también nuestro manejo de errores. Prueba catch, pasando los errores, y podemos alertar cualquier error al usuario dentro de los backticks. Error al eliminar el elemento de menú y luego pasar la variable que es nuestro error. Dentro de nuestra sección de capacitación, dentro de aquí queremos esperar nuestros documentos los cuales podemos agarrar de nuestro DB menu ref, y los documentos que queremos agarrar es el ID el cual se pasa como carga útil. Podemos almacenar esto dentro de una constante a la que voy a llamar elemento. Para este ítem, podemos llamar al método de eliminación de Firebase, que va a eliminar esto de la base de datos. Vamos a probar esto en la sección de administración, desplácese hacia abajo hasta nuestros botones dentro del menú. Podemos hacer click en uno de estos. Esto ahora se está retirando de nuestra base de datos. Solo comprobemos dos veces. Si vamos al menú, ahora queremos ver la margarita y el pepperoni. Ahora se retira de nuestra base de datos. Nuestros hallazgos de Firebase también están manteniendo esto sincronizado con nuestro estado local, lo que significa que nuestro admin y también menú es exactamente lo mismo que nuestra base de datos. Ahora podemos hacer lo mismo por eliminar nuestros pedidos en la pantalla de administración dos. Vuelve a la vista de punto admin. Si vamos a nuestro bucle de órdenes, dentro de nuestro botón también podemos agregar un manejador de clics dentro de aquí. Este manejador de clics va a ser Quitar orden. Esto también necesita tomar en el ID, que podemos agarrar del ID de punto de pedido. Desplácese hacia abajo. También podemos crear un método para esto, cosas que eliminen elemento de menú. Esto es orden de eliminación, tomando en el DNI. Podemos entonces despachar una acción que vamos a crear en tan solo un momento, que se va a llamar orden de eliminación. Pasando el ID como carga útil, esta vez vamos a crear esta acción dentro de nuestro módulo de órdenes dot js. Vamos a ir hacia ahí dentro de la tienda, dentro de nuestras acciones objeto que se encuentra al final de en nuevo orden. Podemos establecer para Eliminar orden, más o menos igual que lo hicimos antes. Esto va a ser asíncrono. Pasando en cualquier contexto, el ID como carga útil. Intentaría y nuestra sección de corte para manejo de errores pasando en el error y alertando al usuario. De nuevo dentro de los backticks, el texto lo siento, hubo un problema, quitando el orden, pasando en error como nuestra variable. Al igual que el elemento de menú, también vamos a aprovechar el método de eliminación de Firebase. En primer lugar vamos a encontrar nuestros documentos esperando el DB o este ref accediendo a los documentos individuales con la carga útil del DNI. Podemos almacenar esto dentro de una constante llamada orden y luego llamar orden dot delete. Ahora podemos probar esto de nuevo en el admin. Comprobemos primero cuántos pedidos tenemos. Dentro de aquí tenemos dos órdenes separadas, por lo que ahora podemos eliminar uno de estos. Borro el segundo encendido a la consola y refresco. Ya que hemos eliminado ambos pedidos, ya no tenemos la recaudación de pedidos. Todo esto está funcionando bien, lo que significa que todos nuestros botones de quitar ya están completos. Voy a dejar este video ahí, y a continuación podemos hacer que el administrador sea más seguro ocultándolo de usuarios no autorizados. 53. Ocultar el administrador a los usuarios no autorizados: Ahora vamos a hacer algún trabajo más en los componentes admin. Haz que estas secciones de administración se vean y se comporten exactamente como queremos que lo hagan. Por el momento, incluso cuando un usuario no está conectado, aún tenemos acceso a la información sensible como los ítems de menú, los pedidos, aún podemos eliminar elementos, y podemos añadir pizzas extra incluso cuando no se ha iniciado sesión. Lo que queremos hacer es agregar algún renderizado condicional usando v-if. Cuando un usuario no está conectado, simplemente queremos mostrar los componentes de inicio de sesión. Cuando estén conectados, queremos cambiarlo y ocultar estos componentes, dejando el resto de la sección de administración. Si seguimos adelante e iniciamos sesión, podemos ver por nuestro correo electrónico arriba en la parte superior, ese es nuestro admin view components tiene acceso a nuestros estados ingresados. Tiene acceso a esto por un getter dentro del Admin.Vue llamado “CurrentUser”. Voy a hacer uso de esto ahora para ocultar y mostrar los contenidos. Vayamos a buscar nuestras plantillas de administración y anotemos en la parte inferior. Tendremos un componente de inicio de sesión justo aquí, entonces todo por encima de esto dentro de nuestra plantilla es información sensible, que solo queremos mostrar al iniciar sesión. Para ello, voy a envolver todo lo demás en una nueva sección. Todo por encima del inicio de sesión. Vamos a desplazarnos hasta la parte superior, justo debajo del envoltorio de administración, podemos crear una nueva sección, y luego agregar un poco de renderizado condicional usando v-if. Podemos comprobar si el usuario actual no es igual a nulo. Desplázate hacia abajo, ahora podemos cerrar el resto de la sección, justo encima de nuestro inicio de sesión. Ahora, todo aparte de la sección de inicio de sesión solo se mostrará si el usuario está conectado con el propio componente de inicio de sesión. Podemos hacer lo contrario dentro de nuestras declaraciones v-if. Podemos comprobar si el usuario actual es igual a nulo. Si esto es cierto, esto significa que el usuario actual no ha iniciado sesión, y luego renderizaremos los componentes de inicio de sesión, le daremos un guardado y luego nos dirigimos al navegador. No pudimos iniciar sesión. Significa que vemos toda la sección de administración. Si nos desplazamos hacia abajo hasta la parte inferior, nuestro componente de inicio de sesión ahora está oculto. Intentemos cerrar sesión. Ahora, esto elimina toda la información de administrador sensible, dejando un formulario de inicio de sesión. Vamos a comprobar si esto también está funcionando después de iniciar sesión. Una vez más, vemos la sección admin, y si vamos al fondo, ahora se elimina el componente de inicio de sesión. Ahora tenemos la pantalla de administración mostrando correctamente, dependiendo de si el usuario está conectado, o cerrado sesión. 54. Cálculo del total de la cesta: Pero momentos dentro de nuestra sección de menú, podemos agregar con éxito artículos para cestas de compras. También podemos aumentar y disminuir la cantidad para cada línea de pedido. Como puedes ver aquí, el número aún no está formateado a un valor de divisa, pero lo haremos en el siguiente video con un filtro. En la parte inferior, tenemos el texto del total del pedido, pero no tenemos ninguna visualización del precio total en solo todavía. Pero esto es lo que vamos a hacer en este video configurando una propiedad computada, que va a recalcular nuestro total. Pasemos a nuestros componentes de vista de puntos de menú, y ahora desplázate hacia abajo hasta nuestro script. Dentro de aquí, parece que nuestra cesta es actualmente una matriz, podemos usar el método del mapa para dejar a través de todos los artículos de la canasta, probablemente sea precio y cantidad el cual va a recalcular nuestro total. Ahora, podemos hacer esto dentro de la sección computada, justo después de donde mapeamos a nuestros getters, y una coma, y voy a llamar a esto el total. Al comenzar inicializando una variable llamada el costo total, que podemos obtener muy pronto y por lo que estos dos agregan valor inicial de cero. Después para obtener esto, vamos a recorrer nuestro canasta, poder acceder a esta cesta hecha, luego vamos a utilizar el método de mapa JavaScript, pasando la variable item, que es el cada ítem dentro de nuestro cestas. Dentro de aquí, la forma en que vamos a agarrar el valor, va a ser accediendo al elemento individual. Tenemos que multiplicar la cantidad de cada artículo por el precio de punto del artículo. Esto nos dará la cantidad total para cada partida de línea, por lo que la primera en el bucle, el momento serán las dos margheritas. Después tendremos las tres margheritas en el siguiente bucle. Puedo almacenar esto en nuestra variable de costo total, y luego agregar al valor con plus igual. Después de esto, entonces vamos a devolver el valor del costo total. Esto está disponible cuando llamamos a nuestra propiedad computada. Ahora podemos poner el valor del total, después de nuestro total de pedidos aquí dentro de las llaves dobles. Danos un guardado y dirígete al navegador. Dentro de nuestro menú, ahora podemos agregar algunas pizzas. Ahora vemos con una de cada cantidad, ahora se está actualizando el total del pedido. Intentemos aumentar el valor. De nuevo, y también deduciendo un artículo y esto se actualiza con cada ítem adicional. Ahora nuestro costo total de canasta ahora está mostrando. En el siguiente video, voy a ver cómo podemos agregar un filtro global al precio para que se muestre en formato de moneda. 55. Filtro de moneda global: En el último video, creamos un costo total al fondo de nuestra canasta, luego sacar esto usando una propiedad de computadora. Si agregamos a la canasta cantidades, notarás que de vez en cuando obtenemos muchos decimales, por lo que necesitamos agregar algún formato en ella a esta moneda. Cada línea de pedido tiene un símbolo de moneda codificado, pero no tenemos uno para el total del pedido. Para solucionar esto, voy a usar un paquete npm llamado accounting-js, que va a agregar algo de análisis y formateo de divisas a nuestros números. También funciona bien como un filtro vue.js. Instalar esto es sencillo, podemos utilizar el comando npm i dentro de la terminal. Abramos esto, luego use npm i y el nombre del paquete es accounting-js. Mientras esto se está ejecutando, voy a volver a nuestro servidor y luego al archivo main.js donde podemos importar esto arriba en la parte superior. Queremos importar esto como contabilidad y el nombre del paquete es accounting-js. Entonces podemos configurar esto como un filtro vue accediendo a la instancia vue y luego a un nombre de método que se llama filtro. Esto configurará un filtro global para que esté disponible para su uso en todos nuestros componentes. Nuestro filtro toma dos argumentos. El primer argumento es el nombre que le vamos a dar a nuestro filtro. Voy a llamar a esta moneda. Entonces el segundo va a ser una función. Se va a tomar una función en el valor que le pasamos. Este va a ser el precio que necesitamos formatear, por lo que el precio de cada pizza individual sobre el total del pedido. Después queremos devolver un nuevo valor de nuestro paquete de conteo. Entonces vamos a acceder a un método que se llama formato dinero y formato que el dinero toma en nuestro valor para procesar. También podemos llevar esto a su propia línea eliminando las declaraciones de retorno y también las llaves, solo tienes que hacer nuestro código un poco más corto, y también asegurarnos de que esto también esté escrito correctamente, así que cambia esto. Ya mencionamos antes que esto crea un filtro global, por lo que podemos usarlo al instante en cualquiera de nuestros componentes. Necesitamos usar esto más en el menú de componentes vue. Podemos comenzar dentro de nuestro total de pedidos. Para utilizar nuestro filtro, todo lo que necesitamos hacer dentro de las llaves dobles, es usar el símbolo de tubería y luego pasar en nuestro nombre de filtro, que era moneda. Esto no tiene un símbolo de dólar codificado, pero esto se agrega desde nuestro paquete de divisas. Justo arriba, tenemos el precio individual para cada línea. Podemos quitar el símbolo del dólar codificado duro, luego también agregar en nuestro filtro de divisas. También tenemos una más si guardamos esto y volvemos a nuestro menú. También tenemos los precios para cada pizza individual. Vamos a desplazarnos hacia arriba a nuestra sección de menús. El opción.precio, añadir en la pipa y nuestro filtro de moneda, quitar cualquier símbolo de dólar codificado duro, dar a este Archivo un Guardar y otra vez al navegador. Dentro de nuestro menú todavía vemos el símbolo de moneda a pesar de que hemos eliminado el valor codificado duro. Añadamos algunos artículos a nuestra cesta. Vemos también los símbolos del dólar dentro de aquí, e intentemos aumentar el valor. Ahora parece estar mostrando correctamente la moneda. El último lugar donde necesitamos agregar este filtro es en los componentes admin, donde mostramos nuestros pedidos. Hagámoslo ahora. Dentro de los componentes admin, necesitamos buscar nuestro bucle, nuestros artículos de pedido, y luego cuando empecemos el precio, podemos agregar nuestro filtro, tal y como lo hicimos antes. Pasado al navegador y podemos probar esto. Empecemos colocando un nuevo pedido. Enviar está apagado y dirígete a nuestro administrador donde puede que también necesitemos iniciar sesión. Agregar en los detalles del usuario. Desplázate hacia abajo hasta nuestros pedidos, y ahora tenemos algún formato para nuestro precio. También tenemos un error aquí con nuestra talla, así que solo necesitamos cambiar esto para ser OrderItem.Size, y ahí vamos. Este es ahora nuestro filtro todo trabajando con el formato de moneda en. símbolo de dólar es el predeterminado al usar accounting-js. Esto se puede cambiar fácilmente, sin embargo, si lo prefieres, y luego agrega algunos pasos sencillos de seguir si te diriges a la documentación. Por ahora sin embargo, los veré en el siguiente video donde vamos a sumar algunos toques finales a nuestro proyecto. 56. Retoques finales: Hemos hecho mucho trabajo para llegar a esta etapa del proyecto, tan bien hecho por llegar hasta aquí. Solo quería agregar algunos toques finales en este video, comenzando dentro de los componentes de inicio de sesión. Por el momento, si cerramos sesión, puede ser obvio para algunos que se trata de una sección de inicio de sesión, pero también podemos agregar algún texto para decirle al usuario que necesita para iniciar sesión. Sobre cualquier componente de vista de inicio de sesión, vayamos a la parte superior de las plantillas. Encontraremos nuestro formulario y también nuestro envoltorio de inicio de sesión. Dentro de aquí, voy a añadir un “p” elementos con algún texto. Por favor, inicie sesión para continuar. Guarda esto y vuelve al navegador. Ahora veremos nuestro texto aquí, instruir a nuevo usuario para iniciar sesión. Lo siguiente que voy a hacer es agregar un guardia de navegación a este administrador. Si el usuario está conectado, recuerda, podemos ver información sensible y cualquiera que tenga acceso puede ver los pedidos y también eliminar cualquier pedido o pizzas. Para proteger a este administrador si el usuario fuera a navegar sin cerrar sesión, podemos agregar un guardia de navegación, que va a alertar al usuario y también cerrar sesión automáticamente. Hagamos esto en los componentes admin.view. Podemos agregar nuestro guardia de navegación dentro de nuestros guiones. Justo después de nuestros métodos, voy a sumar la guardia todo BeforeRouteleave. Como miramos antes, esto toma dos de y también siguiente. El primero que queremos hacer es agregar un comunicado if donde podamos agregar un cuadro de confirmación. Esto alertará al usuario de que se cerrará la sesión si continúa navegando lejos del área de administración, por lo que podemos tener una cadena de “Se cerrará la sesión al salir de admin”. Esta es una pregunta. Si esto es cierto, si siguen navegando lejos, a lo que voy a acceder a nuestra tienda, entonces podemos llamar a despacho y el nombre de la acción que queremos despachar es cerrar sesión. Esto cerrará automáticamente la sesión del usuario al salir del administrador. Si fueran a cancelar esta conformación, podemos agregar esto en un enunciado else. Todo lo que queremos hacer aquí dentro es permanecer en las mismas rutas. Podríamos hacer esto pasando falso al siguiente. Digamos esto bajo el administrador, necesitamos iniciar sesión. Ahora, estamos dentro de los componentes admin. Vamos a tratar de pasar al menú. Recibimos una alerta. Si cancelamos esto, nos quedamos en la misma página. Volver al menú. Haga clic en “Ok”. Ya ves que cerramos la sesión pero seguimos en la página de administración. Para continuar con los componentes del menú o cualquiera sobre, entonces también necesitas llamar al siguiente dentro de aquí. Podemos probar esto una vez más. Ya estamos logueados. Probemos el sobre. Podemos cancelar y seguimos dentro del admin. Vamos a intentarlo una vez más bien y ahora tomamos en nuestras rutas sobre. El último aspecto es un CSS menor, que voy a añadir a la vista principal abajo en la sección Estilo. El primero que voy a hacer es apuntar nuestros insumos y nuestro área de texto para nuestra nueva entrada de Pizzas, así que input, textarea. Todo lo que voy a hacer aquí es aumentar el tamaño de la fuente para ser 1.1 rems. A continuación, queremos agregar algo de estilo general a los botones para que no podamos eliminar el borde estableciendo en null y también aumentar el tamaño de fuente para que sea 1.1 rems también. Dentro de nuestra app, también tenemos algunas clases de btn_green y también btn_red. A esto también le faltan actualmente nuestros estilos. Empecemos con verde. Todo lo que necesitas hacer es establecer el color de fondo y establecer es ser un valor rgb de 101,168, y luego 101. A continuación, el btn_red. El color de fondo, este también va a ser un valor rgb de 241, 70, y también 70 dándonos el color rojo. Pasado al navegador, tenemos colores verdes dentro aquí y también aquí también. Probemos la sección admin, donde también tenemos nuestros botones rojos. Tenemos las señas rojas. También, donde retiramos los pedidos en pizzas, también tenemos nuestros botones rojos. Si quisiéramos, podríamos ir aún más lejos con el estilo en, pero voy a liderar este proyecto aquí ya que este es un view JS Course. A continuación, vamos a pasar a una nueva sección en la que podrás cubrir un nuevo tema, que será la carga perezosa y cómo dividir nuestra aplicación en paquetes más pequeños. 57. ¿Qué es la división del código y la carga diferida?: Antes de sumergirnos en la división de código y la carga perezosa, primero, echemos un vistazo rápido a por qué es posible que lo necesitemos. El primero que hay que señalar es que el Vue CLI utiliza el parque web detrás de bambalinas. Se abstrae toda la configuración para que podamos enfocarnos en desarrollos o en las versiones de la CLI Vue, usted sostiene un archivo de configuración de paquete web disponible para aquellos en nuestro directorio de proyectos el cual podríamos inspeccionar y modificar. Esta nueva versión que estamos utilizando en este curso no la tiene disponible pero aún podemos ver el contenido de este archivo utilizando el comando output de la CLI Vue. Podemos hacer esto si bajamos a la terminal y abrimos una nueva pestaña para que el servidor siga funcionando y el comando que podemos usar es view inspect. El mayor que la flecha. El archivo que queremos seleccionar es el JS de salida. Entra y esto generará un archivo JS de salida sigue dentro de nuestro proyecto. Una vez que se está generando, podemos entrar en nuestra barra lateral y en nuestro proyecto. Aquí está nuestro archivo output.js, que acabamos de generar. Ahora si nos desplazamos hacia arriba y hacia abajo por el archivo, aquí está pasando mucho pero podemos usar la facilidad de búsqueda de editores de texto con comando o control F. No quiero buscar entrada. entrada nos llevará a cerca de la parte inferior del archivo y apuntará al punto de entrada principal de nuestra aplicación que se encuentra en el archivo main.js. Este archivo es el nivel superior de nuestra aplicación y contiene todo para todos los proyectos. Web empaca los paquetes juntos todo dentro de estos proyectos incluyen todos los archivos, todos nuestros activos y luego pondré algunos en un solo archivo. Que se llama el build.js. También podemos ver esta ubicación de salida por la unión de investigación para salidas y esto apuntará a una ruta de archivo, que es nuestro directorio de proyectos. Entonces se generará una carpeta de disco sigue. Ahora sabemos de esta entrada y salida. Voy a eliminar nuestro archivo output.js ya que no es necesario dentro de nuestra aplicación. Este único archivo bundled.js, que se almacena en nuestra carpeta de disco, que vamos a crear próximamente, se descarga del servidor la primera vez que un usuario visita nuestro sitio web o aplicación. Esto está completamente bien si lo construyen relativamente pequeño. Pero en algunas aplicaciones que incluyen mucho código y activos, este archivo puede volverse realmente grande y tardar mucho tiempo en descargarse del servidor, particularmente en dispositivos móviles. Esto puede llevar a una mala experiencia de usuario. Esto nos lleva al tema de la división de código. ¿ Cuál es el proceso de dividir estos archivos agrupados o nuestra aplicación en paquetes más pequeños que luego solo podemos descargar como en cuando los necesitemos. Tenemos que decidir cuál es el contenido mínimo o más importante desnudo que el usuario necesita descargar inicialmente para mantener el paquete lo más pequeño posible. Entonces podemos dividir el resto de la aplicación para que solo se descargue cuando sea necesario como cualquier enlace de menú adicional que no se utilice comúnmente, y solo descargar unas bonitas partes extra cuando sea necesario. Es lo que se llama carga perezosa. Si entramos en el navegador y nos dirigimos a la página de inicio de nuestra aplicación. Cuando el usuario visita por primera vez nuestra app, necesitamos incluir esta página de inicio porque estos los principales puntos de entrada y también los enlaces en la parte superior para que el usuario pueda navegar. No necesitamos incluir los componentes ni el contenido de estos enlaces. No obstante, podrían ser un paquete separado para descargar solo si un usuario hace clic en ellos. Otro ejemplo para ahorrar en el tamaño de descarga inicial es descargar los componentes de la página de inicio, pero sólo los contenidos al pliegue de página. El pliegue es la parte inferior del área visible del navegador por lo que sólo pudimos descargar el contenido que podemos ver antes de que el usuario se desplace. Aplicaciones como Twitter, haremos algo muy parecido solo cargando tweets. A medida que se desplaza hacia abajo por la página, lo que acelerará las cosas. También hay mucha más forma de dividir nuestro código también y la carga depende del diseño de su aplicación. Por ejemplo, podemos querer excluir el contenido de un pop up o incluso el contenido de una sección en una página que fue renderizada por una sentencia if. Como puedes ver, hay muchas formas de pensar y vamos a cubrir algunas de estas en esta sección. 58. Carga diferida con el router Vue: Podemos aplicar la división de código y la carga de letras cuando se utiliza el enrutador de vista. Esto es relativamente fácil de implementar ya que nuestras páginas ya están en sus propios archivos separados. Esto significa que podemos separar los componentes de esta página y solo cargarlos cuando un usuario visita ese enlace. Por ejemplo, en la página de inicio, posible que sólo deseemos cargar este hogar componentes nada menú, contacto, y sobre nosotros componentes hasta que un usuario haga clic en ellos. En primer lugar, vamos a pasar a las herramientas del desarrollador hará clic con el botón derecho e inspeccionaremos. Un incidente conectó en red se recarga y asegúrate de que se haga clic en el botón JavaScript para que solo veamos nuestros archivos JavaScript. Dentro de aquí vemos nuestro archivo app dot JS el cual contiene todo nuestro JavaScript para todos los proyectos. Podemos ver que si hacemos clic en algún enlace de menú adicional, se descargan los archivos normales lo que significa que actualmente tenemos todas las aplicaciones JavaScript dentro de un solo archivo. Esto es importante recordar que aquí no se han cargado otros archivos y esto quedará más claro muy pronto. Si quieres dividir nuestros proyectos y solo cargar estos componentes dentro del menú cuando un usuario hace clic en ellos, necesitamos hacer un cambio a nuestro archivo de rutas dot JS. Podemos aprovechar la sintaxis de división de código de paquetes web mediante el uso de una importación dinámica que es un reemplazo para nuestra importación de componentes originales listados sobre nuestro archivo route dot JS dentro del editor de texto. Vamos a ahorrar importamos nuestros componentes normales. Vamos a reemplazarlos por una función que va a ser una importación dinámica, y esta función se encarga de importar nuestros componentes como y cuando se les llama. En primer lugar, vamos a reemplazar el enlace del menú. Voy a comentar esto, y luego configurar una función llamada menu, que va a utilizar paquetes web dinámicos importaciones sintaxis para importar el menú desde la misma ruta de archivo que arriba. Copiamos esto como una cadena, pegamos esto en nuestra importación y luego podemos hacer exactamente lo mismo para nuestro contacto y sobre esos enlaces. Comentarios fuera el sobre crea una función sobre. Dónde vamos a crear una importación y la ruta del archivo es exactamente la misma que la anterior. Copia este enlace y pega esto en, y luego finalmente tenemos contacto dos comentan esto fuera. Podemos hacer exactamente lo mismo crear nuestra función y agarrar nuestra ruta de archivo para el contacto. Esto ahora significa que no importamos inmediatamente cada componente cuando se carga la aplicación. En cambio, ahora son funciones y solo se importan cuando es necesario llamando a esta función, todo esto se cuida detrás de bambalinas por paquete web. Ahora si volvemos a las herramientas de desarrollador del navegador, guardamos este archivo, recargamos el navegador, podemos borrar nuestro historial y luego recargar. Una vez más, vemos nuestras aplicaciones iniciales porque estamos en los componentes de casa. Demos click en el menú y veremos que se ha importado un nuevo archivo JavaScript con el contenido de estos componentes. Probemos los contactos y el sobre y renovaremos los archivos que se están generando. Estos se han cargado bajo demanda desde el servidor, lo que significa que el código de estos tres componentes ya no está en nuestras aplicaciones originales, lo que significa que tenemos un tamaño de paquete más pequeño cuando se carga la aplicación por primera vez. Si volvemos a hacer clic en todos nuestros componentes, vemos que estos archivos no están duplicados ya los hemos descargado y esta es una forma eficiente de separar nuestro paquete en archivos más pequeños y solo cargarlos cuando requerido. En el siguiente video, veremos cómo usar trozos con nombre para agrupar nuestros componentes. 59. Agrupación de componentes en el mismo fragmento: Ahora sabemos cómo dividir el paquete y elevar un poco de componentes cuando se requiera. A veces aunque quizá queramos agrupar ciertos componentes relacionados para ser descargados juntos, y estos grupos se llaman trozos. Por ejemplo, cuando un usuario hace clic en cualquiera de estos enlaces en el menú, posible que también deseemos obtener todos los demás componentes del menú. Esto es útil si nuestros componentes de menú son pequeños y queremos que estén listos para el usuario. Empecemos de nuevo en el archivo routes.js. Actualmente nuestros enlaces de menú, que es el menú sobre y contacto. Como sabemos por el último video, todos se importaron de forma independiente cuando el usuario hace clic en ellos. Ahora voy a agrupar el contacto y sobre sus componentes, lo cual es sencillo de hacer. Todo lo que necesitamos hacer, dentro de nuestra importación, es agregar un comentario de web pack chunk name, y luego darle a este grupo un nombre de nuestra elección. Por lo que creamos un comentario con la barra delantera y la estrella. Cuando se cierra con el reverso, que es la estrella y la barra delantera. Dentro de aquí, agregamos los comentarios de web pack chunk name, todo en caso común. Entonces después del colon, podemos agregar un nombre que quieres proveer para nuestro grupo, y vamos a llamar a esto el grupo de menús. Podemos entonces agarrar a este grupo. Voy a copiar esto y también añadir esto a nuestro contacto. Pegue esta imagen en nuestra importación, guarde el archivo, y luego en el navegador. Podemos recargar y despejar la consola. Entonces de nuevo, vemos nuestro app.js. Si hacemos click en el “Menú”, se carga nuestro paquete independiente para nuestro menú. Ahora, deberíamos ver que el sobre y el contacto se descargarán en el mismo archivo. Por lo que tenemos el grupo de menús. Probemos el sobre. Ahora, se descargan páginas adicionales para estos dos componentes ya que contienen en nuestro grupo. Entonces así es como podemos agrupar componentes relacionados, y realmente podemos afinar cómo queremos que nuestra página se cargue para nuestra aplicación. 60. Carga diferida con procesamiento condicional: Dentro de nuestra pantalla de administración, mostramos y ocultamos cierta información al usuario, dependiendo de si está autorizado a verla o no. También podemos aplicar carga perezosa aquí también. Lo cual nos permitirá descargar únicamente las secciones ocultas después de que el usuario inicie sesión correctamente. Voy a empezar por eliminar todas las importaciones dinámicas del routes.js, dejando nuestra pestaña de red más clara para este video. Entonces voy a reinstaurar el menú original. Comentar la importación dinámica. Lo mismo para Acerca y también para nuestro contacto. Agregando en todos los componentes originales. Por lo que el proceso de solo descargar el contenido después iniciar sesión no es más difícil que lo que hemos hecho hasta ahora. Básicamente implica mover el contenido oculto a un componente separado y luego podemos usar una importación dinámica para reintroducir el contenido de nuevo en el admin. Podemos empezar haciendo un nuevo componente o un nuevo archivo llamado AdminContent.vue. Entonces hagámoslo como siempre dentro de la carpeta de componentes. Por lo que AdminContent. Por lo que como siempre, también agregamos nuestra plantilla. También podemos crear nuestras etiquetas de script. Entonces finalmente nuestros estilos abajo en la parte inferior. Ahora si volvemos a nuestro admin.vue original. Dentro de aquí vamos a empezar por pasar sobre algún contenido, a nuestros nuevos componentes. El contenido que vamos a mover es esta sección. Si dejamos en los componentes originales de inicio de sesión y agarramos la sección de cierre, y vamos todo el camino hasta la parte superior de nuestra plantilla. Saca esto, dejando nuestro admin_wrapper div y también nuestros componentes de inicio de sesión a AdminContent. Pegamos esto ahora en nuestra nueva plantilla. Desplázalo hasta la parte superior. También podemos eliminar nuestras declaraciones If. Comprueba si el usuario actual no es igual a nulo, manejaremos esta funcionalidad en tan solo un momento. También necesitamos volver a nuestro administrador y pasar por encima del contenido del guión. Todas nuestras importaciones, también podemos copiar nuestros datos, computados, nuestros métodos, y todo el camino hasta la etiqueta de script de cierre. Vamos a cerrar todo esto. Después pega esto dentro de nuestro script AdminContent, que creamos antes. Mover los predeterminados de exportación y pegar esto en nuestros tanques de script vacíos. Dado que ahora estamos en un componente diferente, necesitamos cambiar el nombre de nuestro componente. Esta vez lo vamos a llamar el AdminContent. Agrega contenido al final de este. Este nuevo componente vue está relacionado con el contenido real en lugar del inicio de sesión. Voy a eliminar las importaciones de inicio de sesión y si nos desplazamos hacia abajo también podemos eliminar los componentes de inicio de sesión. Esto ahora debería ser toda nuestra funcionalidad oculta movida a sus propios componentes. Todo lo que tenemos que hacer ahora es pasar por encima de algunos estilos desde el admin.vue. Vamos a desplazarnos hacia abajo a nuestra sección de estilo. El estilo que necesitamos quitar es básicamente todo después de nuestro admin_wrapper. El admin_wrapper está relacionado con este componente admin. Tenemos que agarrar todo el resto de los estilos que están relacionados con el contenido. Entonces apaguen todo, dejando el admin_wrapper sobre el adminContent y podemos pegarlos dentro de nuestras etiquetas de estilo. Dale un guardado a este archivo y ahora podemos volver al Admin.vue y podemos trabajar en el área de guiones. Antes retiramos los componentes de inicio de sesión y el registro del AdminContent. Estos son parte del Admin.vue original, por lo que podemos añadir estos de nuevo dentro de aquí. Importar inicio de sesión desde la ruta del archivo que es. /Inicio de sesión. También vamos a estar usando la propiedad computada del usuario actual dentro de este componente. Podemos renderizar condicionalmente nuestro contenido. Para ello, también necesitamos importar MapGetters que hemos usado antes. Esto es de nuestro paquete vuex. Podemos entonces agregar en nuestros preajustes de exportación. El nombre del componente, que era admin. Podemos entonces al registrar nuestros componentes y el único componente que necesitamos es nuestro login, cual acabamos de importar, separado por una coma. Después necesitamos agregar nuestra sección computada, que es para nuestros Getters, que podamos extendernos en MapGetters. Dentro de nuestra matriz, el Getter que necesitamos es el usuario actual. Por lo que este Admin.vue va a ser un componente padre con el contenido anidado dentro. Esto nos permite renderizar condicionalmente nuestro contenido, y también podemos importar dinámicamente, igual que hicimos con cualquiera de nuestras rutas antes en este apartado. Hacemos esto exactamente igual que nuestro routes.js. Vamos a crear una función para nuestro AdminContent y queremos configurarla como una función de flecha en línea, donde sumamos nuestras importaciones dinámicas, que apunta a nuestros nuevos componentes de AdminContent. También necesitamos registrar este componente para que funcione también. Entonces justo después de nuestro inicio de sesión, agreguemos nuestro AdminContent. Por último, podemos agregar el componente a nuestra plantilla justo arriba. También usando el renderizado condicional que eliminamos antes. Por lo que en la parte superior de nuestro componente de inicio de sesión, vamos a agregar en nuestro AdminContent. Esto va a usar el if, comprueba si el usuario actual no es igual a null. Entonces esto básicamente está haciendo lo contrario de nuestro componente de inicio de sesión. Si el usuario aquí es igual a null vamos a renderizar un componente de inicio de sesión. Si el usuario está conectado, por lo tanto no es igual a null. En lugar de esto, vamos a mostrar el contenido. Así que asegúrate de que ambos archivos estén guardados y dirígete al navegador en el componente admin. Por lo que no estamos ingresados en este momento, lo que significa que vemos el componente Login para que podamos agregar nuestro correo electrónico y contraseña. Una vez que iniciamos sesión, nos llevan al contenido. También podemos probar la carga perezosa. Podemos abrir la consola y dirigirnos a la pestaña Red. Voy a cerrar sesión y luego recargar. Por el momento sólo tenemos la importación dinámica a cargo, que es para nuestro contenido. Por lo tanto, sólo vemos el archivo app.js. Si ahora tratamos de iniciar sesión. Entonces vemos que se ha descargado un segundo paquete del servidor, que es para nuestro contenido oculto. Por lo que este tipo de cosas es un buen caso de uso para si no esperamos que muchos admins estén iniciando sesión en el sistema, por lo tanto evitando cualquier código innecesario que se descargue para el usuario final. Y este es solo otro ángulo a considerar al usar carga perezosa. 61. Reglas de Firebase: Hemos configurado la autenticación para permitir que solo los usuarios que han iniciado sesión accedan a nuestro administrador. Pero también queremos asegurarnos de que también tenemos nuestra seguridad de back end. En caso de que alguien pase por alto nuestra seguridad. Podemos hacer esto con Firebase agregando reglas. Si nos dirigimos a nuestra consola Firebase, y luego arriba en la parte superior tenemos la pestaña de reglas dentro de nuestra base de datos. Si abrimos esto, por el momento, nuestro back end no es seguro. Podemos ver aquí tenemos una coincidencia para todos nuestros documentos dentro de nuestra base de datos. Entonces estamos permitiendo privilegios de lectura y escritura a cualquiera que acceda a nuestro sitio. Podemos hacer esto más seguro agregando en nuestros propios reales personalizados. Voy a empezar por quitar el partido interno a todos nuestros documentos, dejando este automatch justo aquí. Este automatch con la ruta del archivo aquí, básicamente apunta a nuestros puntos de entrada de base de datos. Podemos entonces crear dentro reglas separadas para nuestro menú y todas sus colecciones si así lo deseamos. Voy a empezar con la colección de menús. De la forma de hacerlo, podemos agregar match y luego una ruta de archivo a nuestra colección, que es menú. Dentro de nuestro menú tenemos nuestros documentos separados. Podemos instalar estos dentro de una variable llamada el doc ID que está dentro de las llaves. Aquí adentro, podemos entonces configurar cualquier regla separada, o incluso podemos combinar reglas para leer, escribir, actualizar o eliminar acciones. Dentro de aquí voy a permitir el acceso a derecho a nuestra base de datos, actualizar en nuestra base de datos, y también eliminar dentro de la misma regla. Dentro de aquí solo queremos permitir que los usuarios escriban, actualicen y eliminen entradas de una base de datos si están actualmente registradas. Podemos hacer esto comprobando si request dot auth dot UID no es igual a null. Aquí básicamente estamos comprobando si el objeto de solicitud, que se proporciona cuando hacemos una solicitud a Firebase, tiene un identificador único para el usuario actual. Si lo hace, entonces les permitimos realizar acciones en nuestra base de datos, lo que significa que están registrados y autorizados para hacerlo. De no ser Firebase aterrizará en la cuadra esta solicitud. Después de esto, también vamos a permitir las reglas de lectura. Esto se debe a que queremos permitir que todos los usuarios lean los ítems del menú. Podemos entonces agregar algunas reglas para nuestros más antiguos también. Justo debajo de esto, podemos entonces crear una segunda marcha. Esta vez queremos apuntar a nuestra colección más antigua. Podemos volver a utilizar el ID del documento, que es una variable utilizada para acceder a cualquiera de los pedidos individuales dentro de esta colección. Comienza dentro de aquí con las reglas de lectura. Ya que estos son los pedidos y los pedidos sólo está disponible dentro del admin. Queremos permitir que los usuarios solo lean nuestros pedidos si están conectados. Dado que ambos podemos acceder a los objetos de autenticación de punto de solicitud, podemos comprobar si el usuario tiene un ID único no igual a null. Por lo tanto, están registrados e ingresados. Después podrán leer las órdenes. Siguiente paso, vamos a permitir las reglas de escritura. Esto va a ser para cualquiera. Ya que queremos permitir que cualquier usuario entre en todo el sitio y crea un pedido sin necesidad de registrarse. Los pedidos son un poco más complejos en este tipo de proyectos. Aquí sólo escribimos en algunas reglas básicas. Pero podríamos ir mucho más allá permitiendo que sólo el creador de una orden obtuviera, por ejemplo. Lo que esto significa que necesitaríamos extender nuestro proyecto para incluir el ID de usuario dentro de nuestro pedido. Pero esto definitivamente es algo que vas adelante y haces como reto, si quieres agregar esto al proyecto. Ahora está en su lugar, podemos golpear a publicar para hacer estos cambios en vivo. Ahora en el siguiente video, pasaremos a construir nuestra aplicación para la producción. 62. Despliegue a Netlify: El primer paso hacia el despliegue de nuestra aplicación en la web es construir nuestro proyecto para la producción. Recuerda, en la última sección inspeccionamos nuestro archivo de configuración de paquete web y miramos cómo se genera nuestro paquete en una nueva carpeta llamada disco. Podemos crear este paquete para producción usando el comando build, que podemos ver si vamos al paquete.jason. Actualmente para desarrollo estamos utilizando los subíndices. Pero ahora podemos seguir moviéndonos en nuestros guiones de construcción dentro de la terminal. Bajemos al fondo, y dentro de la terminal vamos a cerrar nuestro servidor con Command o Control C. Entonces podemos ejecutar npm run build, Nos da unos momentos para construir nuestra aplicación para producción. También creará una nueva carpeta de disco y una vez hecho esto, volveré a verte en tan solo un momento. Una vez que esto esté terminado dentro de la barra lateral, cuando tendré la carpeta del disco, que contendrá una versión lista de producción de nuestra app, que contiene todo nuestro CSS, todos nuestros activos como imágenes, y también nuestro JavaScript. Estos archivos están minificados y optimizados para la producción, junto con eliminar cosas como cualquier mensaje de error y advertencia de asedio durante desarrollos. Ahora podemos tomar esta carpeta y usarla para desplegarla en Netlify. Si te diriges a netlify.com, hay muchos proveedores de hosting por ahí, pero este es uno realmente popular y fácil de usar, lo que nos hará ir en pocos minutos. También tiene una opción gratuita a la que solías hacer. Podemos conseguir rápidamente nuestro sitio en línea utilizando una CLI Netlify, que nos dará un conjunto de comandos para empujar nuestra aplicación a la producción. Si volvemos a la terminal dentro de Visual Studio Code, podemos instalar esto vía npm. Vamos a estar instalando esto globalmente, por lo que si estás en un Mac, es posible que necesites usar la pseudo palabra clave como prefijo. Si eres Windows, esto no será necesario, todo lo que tenemos que hacer es instalar el Netlify-CLI con la bandera dash g para hacer esto global. Ya tengo esto instalado, así que no voy a seguir adelante y hacer esto. Pero si no lo haces, sigue adelante y ejecuta este comando y luego dale unos momentos para instalarlo. Una vez instalado esto, el primer comando que necesitamos ejecutar es Netlify deploy. Esto también puede abrirse en el navegador donde es posible que tengas que iniciar sesión o crear una cuenta si aún no tienes una. Una vez que te hayas inscrito y verifiques tu dirección de correo electrónico, entonces serás llevado al área de cuenta donde podrás crear un nuevo proyecto. No hace falta hacer esto dentro del navegador ya que lo vamos a estar haciendo aquí dentro de la terminal. También se le puede pedir que autorice el Netlify CLI 2 en el primer uso. Ya estoy logueado ya que he usado estas muchas veces antes. De vuelta a la terminal, necesitamos responder algunas preguntas simples y estamos listos para irnos. El primero que tenemos que hacer es usar las teclas de flecha de nuestro teclado para bajar a crear y configurar un nuevo sitio. Solo tengo un nombre de equipo, así que voy a seleccionar este. También podemos ingresar un nombre de sitio opcional. Voy a dejar esto vacío y permitir que Netlify genere un nombre aleatorio. Hit Enter. A continuación necesitamos decirle a Netlify dónde se encuentra nuestra carpeta de compilación en nuestros proyectos y esto es simplemente disco. Antes de poner este sitio web disponible para que el resto del mundo lo vea, Netlify nos da un borrador de URL, que podemos usar para básicamente probar nuestro sitio, ver si todo está funcionando bien primero. Quiero copiar esto y abrir un servidor dentro del navegador. A primera vista, todo parece funcionar bien, tenemos la página de inicio, tenemos el menú, tenemos nuestro contacto y también nuestro sobre enlaces a continuación. No obstante, si tecleamos algo más al final de nuestra URL, si esto es falso slash admin o cualquier otra ruta, no funcionará. Esto se debe a que no tenemos ninguna página, no tenemos una ruta de administración de búsqueda completa para hacer una solicitud y obtener del servidor. Ya que confiamos en el router para cambiar entre nuestras páginas son componentes, la solución a éste usando una aplicación de una sola página es decirle al servidor que siempre queremos devolver la página principal independientemente de cualquier URL que se introduzca en la barra de navegación. Esto significa que siempre recuperamos la página de inicio y luego podemos usar el router en el front-end para cambiar entre páginas. Esto es bastante sencillo de hacer. Si volvemos al editor de texto, simplemente agregamos un archivo de redireccionamiento de subrayado dentro de nuestro directorio de discos. Abre nuestro disco y dentro de la ruta podemos crear un nuevo archivo, el cual es redireccionamiento de subrayado. Entonces todo lo que necesitamos hacer es escribir una simple línea de código donde una barra inclinada hacia adelante y una estrella. Entonces necesitamos decirle a Netlify que solo siempre devuelva el index.html en todos los casos con un código de estado del servidor de 200. Entonces, danos un ahorro. Ahora si volvemos a la terminal, podemos volver a correr, Netlify desplegar. El camino una vez más es la carpeta del disco. Podemos agarrar nuestro borrador de URL. Copia estos, pégalo en, todos los enlaces regulares están bien. Esta vez podemos teclear la ruta de administración de barra inclinada hacia adelante. Ahora diré que esto está funcionando. Podemos solo verificar dos veces iniciando sesión. Esto también está trabajando con nuestra base de datos. Podemos ver nuestros elementos actuales del menú y también los pedidos. Una vez estamos contentos de que todo esté funcionando bien y finalmente podamos desplegar nuestra aplicación. Podemos hacer esto simplemente con un nuevo comando. Por última vez vamos a ejecutar Netlify deploy, pero esta vez vamos a añadir dash, dash prod al final para la producción. Significa que ahora estamos contentos con nuestros lados de prueba y queremos construir esto para nuestra producción. El camino de despliegue una vez más es disco, danos unos segundos para construir nuestros sitios. Ahora deberíamos ver el mensaje de deploy es live con una URL en vivo, que ahora podemos agarrar y abrir dentro del navegador. Si llegas hasta aquí, felicitaciones, esta es ahora tu página web, despliéguela a producción. También tienes un enlace en vivo que puedes compartir con otros también. 63. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare, y también sígueme para cualquier actualización y también para estar informado de cualquier clase nueva a medida que estén disponibles. Gracias una vez más, buena suerte, y ojalá, te veré de nuevo en una futura clase.