Vue. js 3 y Firebase para principiantes

1. ¡Te damos la bienvenida a la clase!: [MUSIC] Vue.js es un marco front-end increíble y fácil para construir aplicaciones web. En este curso, lo vamos a utilizar para construir una aplicación de pizzería repleta de características. Descubriremos todas las nuevas características de Vue Versión 3 mientras construimos este proyecto. Además, vincularemos nuestro proyecto a Firebase, para aplicar un back-end a nuestra app. Esto nos brinda una base de datos en tiempo real para almacenar a nuestros usuarios, nuestros pedidos y pizzas del menú. También se utilizará para proporcionar cuentas de usuario y autenticación, incluidos los usuarios administrativos y regulares. El proyecto tiene muchas características como un menú y una canasta, agregar artículos también y la capacidad de hacer pedidos. Contamos con un área de administración donde los usuarios autorizados pueden agregar y eliminar pizzas del menú. Tus pedidos se pueden mostrar y también eliminar, junto con la posibilidad de establecer otras cosas como lo hacen los administradores. Todos estos datos son impulsados de nuestra base de datos. Hola. Soy Chris y soy un desarrollador web con experiencia. También he enseñado a más de 100 mil alumnos, tanto en línea como en persona también. Si quieres construir increíbles aplicaciones front-end con Vue Versión 3 y también hacer uso de Firebase Database and Authentication, entonces esta es la clase para ti. Espero verte en la primera lección. 2. Qué necesitarás: Para este cluster no hay compras adicionales que necesitarías hacer. Todos estos programas que vamos a utilizar serán gratuitos y de código abierto. Entonces solo hay de hecho algunas cosas que vamos a necesitar. Pero antes de hacerlo, echemos ahora un vistazo a los requisitos para que no nos abrumes demasiado. Dado que esta es una clase de desarrollo web, al menos deberías conocer los conceptos básicos y se asumirá que conoces bastante bien HTML y CSS y además cómodo usando JavaScript. No necesitas ser un experto, pero al menos necesitas conocer lo básico. Tengo clases disponibles en cada uno de estos si necesitas repasar primero. Además, si tienes experiencia de otros frameworks de JavaScript o bibliotecas como Angular o React, o incluso Vue Versión uno o 2, esto será un gran beneficio, pero no esencial. Además, estaremos haciendo un uso menor de la terminal, pero si no lo has usado en el pasado, no te preocupes por ello. Sólo vamos a hacer uso de unos sencillos comandos. Visual Studio Code, será el editor de texto que voy a utilizar a lo largo de este curso. Actualmente es muy popular en el mundo del desarrollo web, pero puedes usar cualquier otro editor que prefieras. Si lo necesitas, el enlace de descarga está aquí para seguir, y también es completamente gratuito. Otro beneficio es que viene con un terminal incorporado, que usaremos para configurar nuestro proyecto e instalar los paquetes que pueda necesitar. Pero también si te sientes cómodo con la terminal y tal vez tengas tus propios externos como Item, esto también está completamente bien de usar. Con esto en mente, pasemos al siguiente video donde veremos cómo podemos configurar nuestro proyecto usando Vite. 3. Configuración de herramientas con Vite: Para comenzar nuestro proyecto, comenzaremos con una configuración local. Podemos ejecutar Vue.js en nuestro propio equipo. Para ello, haremos uso de una herramienta de compilación llamada Vite. De hecho, Vite fue creado por Evan You quien también creó Vue.js. Esta herramienta de compilación nos permitirá hacer uso de componentes de archivo único de vista, que es cuando escribimos una parte de nuestro sitio web llamada los componentes en un solo archivo. Esto mantendrá las cosas bien y organizadas para nosotros cuando estemos creando nuestro proyecto. Pero también significa que necesitamos una herramienta de compilación para tomar todas estas piezas separadas de componentes y agruparlas para hacer nuestra aplicación. Vites también nos brinda muchos otros beneficios, como un servidor de desarrollo, reemplazo de módulo caliente, que actualizará instantáneamente el proyecto en el navegador sin necesidad de actualizar la página, haremos un cambio. También hay muchas otras ventajas. Necesitarás instalar Node.js Si aún no lo has hecho. Puedes hacer esto desde nodejs.org. Sigue adelante y descarga la última versión para tu sistema operativo. Estoy usando un libro para Mac si estás usando Windows, debería detectarlo automáticamente para. Si no, simplemente haga clic en la otra descarga. Esta descarga también incluirá npm, que usaremos para configurar nuestro proyecto y también agregar paquetes a medida que los necesitemos. A continuación, pasa al terminal, que puedes usar un terminal independiente si lo prefieres. O puedes usar el integrado en Visual Studio Code. La sencillez, ésta es la que voy a utilizar. Entra en el código de Visual Studio, en las opciones, terminal, y luego nuevo terminal. Ahora vamos a tener este terminal en la parte inferior, que podemos usar para escribir comandos. Si eres nuevo en la terminal, no es nada de qué preocuparnos solo necesitamos unos simples comandos. Puedes usar un terminal para navegar por los archivos y carpetas de tu computadora, igual que puedes hacer con el mouse haciendo clic dentro de una ventana. Aquí, sin embargo, usamos comandos pero tendremos que navegar hacia donde queremos agregar nuestro proyecto. Quiero que sea sencillo y agregarlo al escritorio para facilitar el acceso. Actualmente estoy en el directorio home para mi usuario. Podemos usar el comando LS para listar todos los archivos y carpetas dentro de este directorio. Entonces podemos usar el comando cd para cambiar a cualquiera de estos directorios que desee. Para mi va al escritorio, que podemos ver listado aquí. cd para cambiar en ella al escritorio. Esto también distingue entre mayúsculas y minúsculas. Golpe's “Enter”. Ahora podemos ver que estamos dentro del directorio de Escritorio. Pero si quieres, puedes cambiar a cualquier otro directorio que quieras. Pero justo antes de crear el proyecto, necesitamos volver a verificar que tenemos los nodos y npm correctamente instalados. Para ello, vamos a escribir nodo dash v, que significa versión. Veremos devuelto el número de versión que está instalado. Mi versión actual es la Número 18. Necesitarás al menos el nodo Versión 15 para continuar. Obviamente, cualquier número de versión superior a 15, estarás bien para ir. Pero si ve un mensaje de error o una advertencia, deberá regresar y asegurarse de que el nodo esté correctamente instalado. A continuación, podemos volver a verificar npm, entonces npm dash v. No vemos ningún problema aquí. Para crear un proyecto de vista JS usando Vite, necesitamos ejecutarlo con este comando. Esto es npm en él. Ver. A más tardar. Su entrar. Nos está pidiendo instalar los siguientes paquetes, que es Create View. Esto está bien. Presiona “Y” o presiona “Enter”. Entonces hicimos una serie de preguntas. En primer lugar, el nombre del proyecto, mío será pizza planet. Puedes cambiar esto si queremos. No vamos a hacer uso de TypeScript. Vamos a golpear No, no necesitamos soporte de JSX, así que vamos a ir por, No. ¿Quieres agregar el router de vista? Sí, lo hacemos. Pronto echaremos un vistazo a esto. Si queremos administración estatal, vamos a seleccionar No ya que usamos una administración estatal dentro de archivos componibles. También echaremos un vistazo a cómo hacer esto a lo largo de la clase. No vamos a estar cubriendo el intestino, así que golpearemos No y No. Sí. Largo. Eso puede ser sí. Depende de ti. Más guapa? Sí. Bien, y ya estamos todos hechos. Recuerda, que antes usamos el comando cd para cambiarnos al directorio de escritorio bien ahora hemos creado un nuevo directorio llamado pizza planet, y esto ahora está dentro de nuestro escritorio. Lo que tenemos que hacer, como dice aquí, ahora necesitamos cambiarnos al directorio pizza planet, así cd, pizza dash planet o el nombre del proyecto de su elección. Luego necesitamos ejecutar npm install, que instalará todos los paquetes necesitamos para nuestros proyectos Vue. Bien, los paquetes ya están todos instalados. Para poner en marcha nuestro servidor de desarrollo, necesitamos ejecutar npm, ejecutar dev. Es Enter. Esto luego nos dará una dirección web para abrir dentro del navegador. Podemos copiar esto o clic de Comando o Control, que lo abrirá dentro del navegador. Este es nuestro iniciador de proyectos, lo que significa que todo está funcionando correctamente. Desde que configuramos el router de vista, que vamos a hablar un poco más adelante. También veremos un enlace Inicio y un Acerca para cambiar entre. 4. Imágenes de proyectos: A lo largo de este proyecto, utilizaremos algunas imágenes del proyecto. Puedes descargar los tuyos si lo prefieres, o puedes usar exactamente los mismos que estoy usando. Si quieres seguir y usar los mismos, dentro de GitHub, tengo este repositorio que está disponible en github.com/, mi nombre de usuario, que es chrisdixon161/pizza-planet-v3-images con un guión entre cada palabra. Se trata de un repositorio sencillo. Todo lo que tenemos dentro es esta carpeta de imágenes con las seis imágenes que vamos a agregar a nuestro proyecto. Si quieres usar estos, solo tienes que hacer clic en el botón Código. Descarga el archivo zip. Una vez terminado esto, puedes hacer clic en esto para abrirla. Entonces tenemos que agregar esto a nuestro proyecto. En primer lugar, ve a Visual Studio Code o a tu editor de texto. Lo que tenemos que hacer es abrir nuestro proyecto dentro de aquí. Arrastre sobre la carpeta del proyecto que creamos en el video anterior. El mío se almacena en el escritorio. Arrastre esto al código de Visual Studio. Ahora vemos todos los archivos y carpetas de nuestro proyecto V dentro de la barra lateral. También es posible que necesitemos reabrir la terminal. El Terminal y luego ir a Nuevo. Actualmente estamos dentro de un proyecto pizza-planeta. Podemos ejecutar npm, run dev, que volverá a abrir esto con este enlace. Comando o control clic. Bueno. Todo está bien. Entonces si entramos en nuestras imágenes, y luego en nuestra carpeta de proyectos, que acabamos de abrir en Visual Studio, vamos a la carpeta fuente, a los assets, y luego podremos arrastrar la carpeta images dentro de aquí. Sostén esto abajo. También podemos verlos en una barra lateral si abrimos la fuente, en los activos, y ahí nuestras imágenes que vamos a usar para este proyecto. Nuevamente, si quieres usar tus propias imágenes, puedes agregarlas a una carpeta de imágenes dentro de aquí y usarlas a medida que avanzamos en el proyecto. Pero ahora con estos disponibles para usar, vamos a pasar a la sección de enrutamiento, donde echaremos un vistazo a cómo podemos cambiar entre páginas. 5. ¿Vistas O Componentes?: En esta sección echaremos un vistazo a algunas rutas básicas para permitirnos cambiar entre diferentes páginas dentro de nuestra aplicación. Pero justo antes de hacer esto, así que quiero echar un vistazo rápido a dos archivos diferentes que vamos a estar usando. Estas son vistas y componentes. Veamos cuál es la diferencia entre estos dos. En primer lugar, tenemos la idea de los puntos de vista. Se trata de archivos que contienen el contenido de cada página de visualización. Una aplicación o sitio web típico usaría enlaces como Home, About Us y Contact Us y cada uno de estos enlazará a una nueva página. Es así como vamos a hacer uso de las vistas. Al lado de los componentes, y los componentes son generalmente piezas más pequeñas de nuestra aplicación, que pueden ser un elemento independiente o se pueden reutilizar en varias páginas de vistas. Un componente podría ser cualquier bloque de contenido como un mapa de ubicación, un producto en una tienda de comercio electrónico, o incluso un simple bloque de texto. Los componentes también se pueden reutilizar repitiendo el contenido varias páginas o pasando datos dinámicos de un componente. Los archivos de componentes y los archivos de vista son los mismos. También tienen el mismo contenido y estructura ya que ambos son componentes de vista. Pero tenerlos en diferentes carpetas mantiene las cosas organizadas. Para recapitular, una vista es una página que podemos usar para alternar en nuestra aplicación. Generalmente, un componente es una pieza más pequeña, a menudo más reutilizable de nuestra página. Generalmente los almacenamos en sus propias carpetas llamadas vistas y componentes para hacerlas más organizadas. Esto es lo que vamos a estar echando un vistazo a continuación. 6. Vistas y rutas: Dentro del navegador, tenemos nuestro proyecto abierto. Hemos mirado brevemente este Hogar y los enlaces Acerca de que se proporcionan. Cambiamos entre estas dos páginas o estas dos vistas que acabamos de conocer. Podemos ver estos dos archivos de vista dentro del Editor. Saltar al código de Visual Studio con el proyecto abierto dentro de la carpeta fuente donde escribiremos todo nuestro código. Tenemos esta carpeta llamada views. Esto tiene el About y el HomeView que acabamos de cambiar entre dentro del proyecto. Dentro de estos archivos te resultará bastante familiar si has usado Vue.js en el pasado. Son solo archivos componentes donde tenemos la sección de script, donde escribimos todo nuestro código JavaScript e importamos cualquier archivo que pueda necesitar. Entonces también un área de plantilla justo aquí. Esta es la zona donde escribimos nuestro HTML. También podemos tener una sección de estilo que podemos ver si vamos a la AboutView. Encima de esto dentro de la carpeta fuente, tenemos esta carpeta router con una página index.js. Tenemos esto ya que elegimos instalar el paquete de enrutadores Vue cuando configuramos por primera vez este proyecto. La clave aquí está en la parte superior del archivo donde importamos cualquiera de nuestras vistas. Aquí podemos ver que estamos importando el HomeView desde la carpeta views. Entonces abajo dentro de CreateRouter tendrá esta matriz de rutas. Cada una de estas rutas es un objeto como vemos aquí. Vemos la ruta del archivo, que es slash hacia adelante. Este es el directorio home. Podemos darle el nombre de este router, que nos referiremos durante nuestro proyecto. Luego vincula esto a un componente particular de vista que acabamos de importar. Después de esto, también tenemos la sección Acerca de. Quizás se esté preguntando por qué no hemos importado el AboutView arriba en la parte superior junto con el HomeView. Bueno, muchas veces haríamos esto y también importante el AboutView, al igual que hicimos con los componentes Home. Pero en cambio, esto está demostrando un enfoque ligeramente diferente donde usamos algo llamado carga perezosa. Cargamos perezoso la página para descargar solo el contenido de la página cuando el usuario realmente los necesita. Esta descripción general de la página del enrutador, ahora vamos a crear las vistas que necesitamos para nuestro proyecto entonces podemos volver y agregar esto a nuestra matriz. En la fuente, en la carpeta views, todavía podemos hacer uso de HomeView y AboutView para nuestros proyectos. Solo aclaremos el contenido del interior para que no necesitemos los componentes de bienvenida. Ya que hemos eliminado esto, también podemos eliminar la referencia a ella justo aquí. En lugar de colocar un encabezado de Nivel 3 tal vez envíe un mensaje de texto a una casa. Volveremos y agregaremos contenido a estas vistas pero por ahora, podemos usar el encabezado Level 3 para ver qué página estamos cambiando entre. El AboutView, quita el estilo. No tenemos una sección de guiones. Tenemos el envoltorio, H3, y el texto de aproximadamente. Dentro de las vistas, necesitamos dos archivos más. Haga clic en el icono “Archivo” justo sobre la parte superior. También necesitamos el AdminView, que usa la extenación.vue. Crea una plantilla, un encabezado. Esto es para el Admin. Presentamos la vista final que vamos a usar es el MenuView. Esta será utilizada para mostrar todas las pizzas que tenemos de nuestra base de datos y también una cesta de compras también. Otra plantilla, el encabezado del menú. Entonces podemos cerrarlos e importarlos dentro de nuestro router, así el índice del router. Todos estos están en el mismo directorio que un HomeView. Copiemos y peguemos esto tres veces más. El Menú y el MenuView. El siguiente es el Admin del AdminView y el último es el Acerca de. Como los hemos importado en la parte superior de nuestro archivo, básicamente podemos duplicar la sección Inicio. Justo debajo de esto, crea un nuevo objeto separarlo por una coma. El camino que queremos usar es una cadena y esto va a ser el menú de slash hacia adelante. Esto significa que si entramos en nuestro proyecto y al final, escribiendo el menú de barras inclinadas hacia adelante, veremos la vista de menú dentro del navegador. A continuación, el nombre, que es el enlace del menú. usaremos pronto en nuestro proyecto. El componente que queremos mostrar es el menú que importamos justo arriba. A continuación, tenemos el Admin, escribimos nuevo objeto y lo separamos con una coma. Este quiere acceder dentro del navegador con el administrador de slash forward, el nombre del enlace admin y los componentes admin. Bueno. El último que necesitamos es Acerca de. El camino hacia adelante y el orden que colocamos esto no hace ninguna diferencia en nuestro proyecto. El nombre de este enlace, el enlace Acerca de y finalmente los componentes. Bueno. Todo esto está hecho. Asegúrate de tener una coma entre cada una de estas rutas. Dale un ahorro a esto. Si ahora pasamos al navegador, actualice. En el menú de slash hacia adelante, tenemos los textos del menú de nuestros componentes. También contamos con Admin. Ves el texto de administración, Acerca de, luego la diagonal hacia adelante para el directorio de inicio. Actualmente, todavía vemos el contenido de nuestras cuatro vistas junto con el contenido existente a la izquierda. ¿Cómo sabe nuestra app dónde queremos que se muestren estas vistas? Bueno, la respuesta a esto se encuentra dentro del RouterView, que vamos a ver a continuación junto con agregar estas nuevas vistas a nuestros enlaces de navegación. 7. RouterLink y RouterView: Dentro de nuestra carpeta fuente en el proyecto, abre la App.vue. Dentro de este archivo, aquí hay dos cosas principales a tener en cuenta. Uno de ellos es que tenemos esta área de navegación, y esta contiene dos enlaces de enrutador. Esto tiene el texto de home y también sobre, y estos son los dos enlaces que vemos dentro de nuestro proyecto. Lo primero aquí es estos enlaces no son los ocho elementos habituales, que veremos en HTML regular. En cambio, están rodeados dentro de este enlace de enrutador. Así es como el router de vista maneja los enlaces a otras páginas o componentes. Utiliza estos en lugar de los elementos a para que el router pueda cambiar las URL de la página sin recargar la página. También podemos controlar la URL que estamos enlazando para incluir rutas dinámicas, que pueden incluir variables, en lugar de simplemente tener los textos simples como los que tenemos aquí, también podemos insertar variables también. Además, verá este componente de vista de enrutador abajo en la parte inferior. Este es el outlet que muestra el contenido de nuestra página, que tenemos dentro de las vistas. Aquí es donde se muestra el contenido de nuestra página, dándonos un control total en lugar de simplemente reemplazar el contenido de la página completa. Aquí vemos que este componente de vista de enrutador se coloca junto al encabezado. Es por ello que los vemos lado a lado dentro del navegador. Además, observa que si sube a la parte superior del archivo, tanto el enlace del enrutador la vista del enrutador se importan desde el paquete view router. Con este conocimiento, podemos eliminar el código estándar de aquí y crear nuestros propios enlaces dentro de los componentes de encabezado. Vamos a limpiar esta app.vue. Sacaremos nuestro enlace de enrutador, ya no necesitamos esto. También elimina este contenido de encabezado también. No necesitamos este ejemplo de HelloWorld dentro de nuestro proyecto, pero podemos reutilizar este archivo y convertirlo para que sea el componente header. Llamaremos a esto el encabezado de la aplicación, renombraremos el archivo AppHeader.vue. Entonces dentro de la plantilla podemos colocar este AppHeader exactamente donde queremos que esté esto. Dado que este archivo App.vue es el componente principal de nuestro proyecto, podemos usar esto para darle alguna estructura a esto. Dentro de nuestros proyectos siempre queremos que esta vista de router renderice la página. Pero justo por encima de esto, también podemos colocar en el AppHeader. Esto significa que en cada página nuestro proyecto tendrá el encabezado en la parte superior, seguido del contenido de la página. A continuación, recuerde que hemos cambiado este nombre de archivo para que sea AppHeader.vue. Esto está dentro de la carpeta de componentes. Salta dentro de aquí. Después renombrar el ejemplo de HelloWorld para que sea AppHeader. También podemos eliminar estos iconos. [inaudible] creó el proyecto. No necesitamos esto para nuestro proyecto. Vamos a saltar a este archivo AppHeader.vue. Despejamos todos los contenidos. Actualmente no necesitamos un guión. Vamos a quitar esto. Elimina todos los estilos predeterminados. Tenemos todos los contenidos entre las plantillas. Voy a reemplazar esto con un encabezado HTML. Encabezado de fila coloca esto dentro de un elemento de Nivel 1 con el título de subrayado de vista de qoute de clase. En lugar de simplemente agregar el texto de pizza planet para el título de nuestro sitio, también podemos colocarlo dentro del enlace del enrutador. Este tiene una etiqueta de apertura y cierre. Después dentro de los iconos de Tilder, el texto de pizza planet. Se puede ver que tenemos este subyacente qué datos es un error con este componente. Esto se debe a que necesitamos agregar los dos prop como atributo. Dado que este es el título del sitio, esto solo va a enlazar de nuevo a la página principal, que es slash hacia adelante. El siguiente una sección de navegación con nuestros enlaces de navegación. Estos enlaces de navegación van a enlazar a nuestros puntos de vista. Vamos a lugares justo debajo de nuestro rubro Nivel 1 . Los elementos de navegación. Se trata de una serie de vínculos relativos. La clase de enlace que enlazaremos a nuestro CSS muy pronto. Los dos atributos. Este será el enlace de inicio, por lo que podemos vincular a la barra diagonal hacia adelante y el texto de visualización de inicio. Duplica esto tres veces más. El siguiente es para el menú, que enlaza a /menú. El último es vincular al administrador debajo de la navegación y colocar el encabezado Nivel 2 con el texto del lugar Número 1 para pizza Vamos a guardar y verificar esto. Todo está funcionando. Ahora tenemos el encabezado de la aplicación en la parte superior y luego deberíamos ver el contenido de la vista del enrutador justo debajo. Refrescar. Ahí está nuestro nivel uno rumbo. Tenemos nuestros enlaces, tenemos el encabezado Nivel 2, pero aún tenemos el contenido de esta página al lado. El contenido en el que queremos que se muestre, pero no tenemos lo requerido en el estilo. Esto sucede debido al estilo que se establece en nuestro proyecto VP por defecto. Podríamos eliminar esto y usar el nuestro propio.. En la barra lateral. Salta a la carpeta de activos, varias hojas de estilo dentro de aquí. Vamos a eliminar el base.css. También podemos eliminar el logo, pero no podemos hacer uso de este archivo CSS principal, sino que limpiaremos el contenido y agregaremos el nuestro propio. Seleccione todos los contenidos y elimine este archivo. Se guarda en el navegador. Esta es nuestra sección de cabecera. Ahora en la parte superior. Ahora tengo el contenido de la página justo debajo o también podemos cambiar entre el contenido de esta página con estos enlaces de encabezado. 8. Rutas con nombre: Como acabamos de descubrir dentro del enlace del enrutador, vinculamos a varias páginas con estos dos atributos. Luego dentro de él, se coloca en una URL codificada para enlazarla. Esto funciona completamente bien, pero también tenemos disponible algo llamado rutas de nombre. El nombre de la ruta puede ser un beneficio si usamos el mismo enlace varias veces. Imagina dentro de nuestro proyecto teníamos muchos enlaces a esta página de menú, pero en cambio en el futuro si tal vez quisiéramos cambiar esta URL del menú de slash hacia adelante para que fuera algo hacia adelante slash pizzas, necesitamos cambiar todos estos enlaces manualmente. Alternativamente, podemos enlazar al nombre, que le dimos dentro del archivo del router, así saltando al router en el index.js. Recuerda que cada uno de estos enlaces tiene un nombre específico. Podemos pasar esto como un objeto, en lugar de la diagonal hacia adelante, colocando las llaves para crear un objeto. El nombre propiedad, que es igual a casa. Al igual que cualquier otro atributo de vista Js, si estamos colocando en datos dinámicos dentro de aquí, como nuestro nombre, también necesitamos colocar en los dos puntos, que es v bind para hacer esto dinámico. Esto le dice a un router de vista, que esto no es para ser leído como una cadena de texto, sino que en su lugar echarle un vistazo este nombre que tenemos en nuestro archivo de router. También podemos hacer esto con el resto de los enlaces. Copia esto y podemos colocarlo en la parte superior de nuestro título. El segundo. Esto fue para nuestro MnuLink, que coincide con el nombre dentro de nuestro archivo de enrutador. El número tres. Este fue el AboutLink. Luego, por último, el AdminLink. Guarde esto y diríjase a nuestro proyecto y debería actualizarse automáticamente ya que estamos usando vite para nuestro servidor de desarrollo. Da clic en todos los enlaces y ahora todo sigue funcionando igual que antes, pero ahora lo que estamos usando son estas rutas de nombre. 9. Rutas anidadas: Nuestra configuración actual permite una estructura de enrutador como esta. Tenemos nuestros RouterLinks en el encabezado, y luego reemplazamos el contenido de estas vistas donde lo queríamos usando el RouterView. Esto lleva a una estructura de URL bastante simple. Tendríamos nuestra URL principal y cada vista agregaría al final el nombre de admin, menu, o sobre, por ejemplo. Pero a veces, nuestra estructura puede necesitar ir aún más profunda. Una de estas vistas también puede necesitar enlaces y un lugar para mostrar el contenido. Un ejemplo de esto está en nuestra página de proyectos Acerca de Nosotros. A la izquierda está la vista Acerca de nosotros, y podemos colocar en cualquier contenido que queramos. Además, también podemos proporcionar enlaces adicionales como vemos aquí con el historial, entrega y las ubicaciones. la derecha, tenemos la estructura deseada que sería la vista Acerca de Nosotros y luego los enlaces anidados de historia, entrega y ubicaciones siguientes. Para estructurar esto, nuevamente necesitamos hacer uso del enrutador view usando los routerLinks y el routerView para colocar el contenido en la página Acerca de nosotros exactamente donde queremos que esté. Vamos a adentrarnos en el proyecto y podemos comenzar a configurar las cosas. Estos historial, ubicaciones y secciones de entrega que acabamos de ver serán componentes entre los que podemos cambiar. Vamos a configurarlos en la carpeta de componentes. Ya tenemos esta configuración, así que crea un nuevo archivo, y este va a ser delivery.vue. El siguiente, esto va a ser historia.Vue. Entonces la siguiente son las ubicaciones, todas con la extensión de.vue, y también podemos eliminar los componentes que no necesitas, que es elWelcome.vue, mover este, y también WelcomeItem. Bueno. Ahora vamos a entrar en nuestros tres nuevos componentes, y podemos agregar alguna estructura básica. Necesitamos la plantilla y cada uno de estos tres componentes va a ser bastante simple. Simplemente crearemos un envoltorio. Vamos a añadir un título en la parte superior, una imagen, y también un poco de texto aleatorio. El div, mira la clase C de info_block. Esto se sumará a los tres nuevos componentes, h3. Voy a hacer uso de los iconos de tilde y esto es Delivery Info. Después de esto una fuente de imagen. Vamos a entrar en la carpeta assets donde se ubicará nuestra carpeta de imágenes y luego en la imagen que quieres es el box.jpg. De nuevo, puedes usar tus propias imágenes si lo prefieres. Simplemente reemplace cualquiera de estos que desee. El texto alt, pizza en caja. Después también una clase de info_img. Justo después de la imagen, agregaremos algo de texto en los elementos p, y puedes reemplazarlo con cualquier texto que quieras. Pero por simplicidad, solo voy a agregar algo de texto lorem ipsum aleatorio. Si estás usando Visual Studio, simplemente puedes escribir la palabra lorem y luego pulsar “Enter”. Esto nos dará algún texto ficticio que podemos colocar en nuestro proyecto. Para mantener las cosas consistentes, copiemos todos estos contenidos y luego entremos en la historia. Pega esto y todo lo que tenemos que hacer aquí es cambiar el título de entrega a ser historia. La imagen, esta es la chef image.jpg. El texto alt del chef haciendo pizza. Dale un ahorro a esto. El siguiente fueron localizaciones. Nuevamente pega en los contenidos y cambia el título. La imagen para esta son las tablas. También cambia el texto alt. Se trata de las mesas al aire libre. Bueno. Estos son los tres componentes que usaremos para cambiar entre en la vista sobre y esto es lo que vamos a estar viendo a continuación. 10. La vista sobre y los componentes para niños: Ahora vamos a la página de vista Acerca de donde ahora podemos usar un router para cambiar entre nuestros tres nuevos componentes. También necesitamos algo de estructura y contenido en esta página junto con los enlaces del enrutador y la vista del enrutador. Eliminemos el encabezado Nivel 3 y coloquemos en un div con la clase de aproximadamente. Esta será la envoltura para estos componentes y luego lo colocaremos en varias secciones. La sección superior, si vamos al acerca, ésta se va a colocar en dos zonas. Si pasamos a la vista acerca, ésta se va a colocar en dos secciones. La sección superior será una introducción sobre esta página donde tendremos algunos textos sobre la pizza, la historia, colocaremos en una imagen, y luego debajo de esta agregaremos una segunda sección que contendrá nuestros enlaces de enrutador para cambiar entre nuestros componentes de libertad. La primera sección con la clase de introducción, y anidada dentro tendremos dos cosas. En primer lugar es un div, y el segundo de todo es la imagen. El div va a contener el texto y luego agregaremos la imagen justo debajo, y luego agregaremos una nueva sección abajo en la parte inferior, y esta contendrá nuestros enlaces. Comencemos con este primer div dándole a esto una clase de info envoltorio de texto subrayado es entre cada palabra. Nivel 3 rumbo con el título de pizza de calidad desde hace 30 años. Vamos a ver esto. Ahí está nuestro título, y luego por debajo de nuestro encabezado Nivel 3, colocar en un p elementos con el texto de nada más que los ingredientes de la mejor calidad con un ambiente agradable. Ahí vamos, colocados en una clase para que podamos agregar algo de CSS más tarde de info text. A continuación, la imagen. En primer lugar, una clase nuevamente para el estilo de info_image o img. El origen salta a la carpeta assets donde está contenida nuestra carpeta images, y esta va a la calzone.jpg. El viejo texto calzone imagen de primer plano. Ahí vamos. Esta es la sección superior ahora completa. Por supuesto que pronto vamos a hacer que se vea un poco mejor con un poco de estilo, pero por ahora, saltemos a nuestra segunda sección, que va a ser para nuestros enlaces. Esto necesita una clase de envoltorio de más información, un título de Nivel 3, y esto va a decir haga clic en los enlaces a continuación para obtener más información. Entonces podemos comenzar a construir nuestros enlaces lugares en los elementos HTML nav, lista desordenada. Cada uno de estos enlaces se va a colocar dentro del enlace del enrutador. Cada uno tendrá la clase de link, pero nuestro estilo. Usamos los dos puntos porque vamos a hacer dinámicos los dos atributos colocándolos en un objeto, y este objeto va a apuntar al nombre, que vamos a suponer dar a cada uno de estos componentes. Este primero será el enlace de historia y el texto de visualización de nuestra historia. Duplicemos esto dos veces más. El segundo va a ser para el enlace de entrega. Un texto de entrega. El número 3 va a ser el enlace de ubicaciones. Cualquier texto de ubicaciones. Bueno. Esto es todo lo que necesitamos, ahora tenemos nuestros enlaces gratuitos ubicados debajo de toda nuestra información en la parte superior. Vamos a ver esto. En la página Acerca de. Los contenidos desaparecen, esto puede ser solo porque no tenemos coincidencia para nuestros nombres, porque aún no lo hemos creado. Vamos a saltar a la consola y ya podemos comprobar esto. No tenemos ninguna coincidencia para nuestro nombre así que vayamos al router y hagamos esto ahora. El router index.js. Primero necesitamos importar nuestros tres componentes, que es historia, ubicaciones y entrega. La parte superior, import delivery esta vez en la carpeta de componentes el componente es delivery.vue. Duplica esto dos veces más. El siguiente es para la historia. El último es para ubicaciones. Al igual que con todas nuestras otras rutas, necesitamos agregar estos tres componentes en un camino. Pero recuerda, el camino para estos va a ser anidado dentro del link about así que lo que queremos. De hecho, sólo podemos eliminar el segundo sobre. Tenemos el nombre del componente, eso es así que simplemente podemos eliminar el que se colocó en por defecto. Tenemos este enlace Acerca y lo que queremos es el camino a tratar, y luego hacia adelante slash, queremos las ubicaciones, la entrega, y también la historia. ¿Cómo vamos con esto? Bueno, actualmente la barra diagonal hacia adelante sobre el enlace solo apunta a un solo componente. También podemos anidar dentro múltiples componentes agregando la propiedad children. Para la propiedad children ya que estamos enlazando a múltiples componentes, esto necesita ser colocado dentro de una matriz. Cada matriz contiene un objeto que está estructurado exactamente igual que cada una de estas rutas, por lo que insertaremos la ruta, el nombre y también los componentes. Para que el primero se vincule a la historia colocamos en el camino de historia, el nombre del componente. Este nombre de componente debe coincidir con el exacto que colocamos dentro de nuestros enlaces de enrutador. Tengo enlace de historial, enlace de entrega y enlace de ubicaciones. Este es para el vínculo histórico. Después los componentes de la historia. Separar estos con una coma. Cierra esto. Sepárelos con una coma y colóquelos en su propia línea separada. Duplicemos esto, copiemos y peguemos esto en dos ocasiones más. El segundo es para entrega, enlace a enlace de entrega en el componente de entrega. Siguiente, ubicaciones. Vamos a probar esto. Tenemos que saltar a la página Acerca de nosotros y luego podemos ver exactamente cómo se verá esto. Actualmente estamos en slash forward about, probemos nuestros enlaces en la parte inferior, tenemos historia. Ahora estamos sobre el historial de slash hacia adelante, la entrega, esto se agrega al final y también lo mismo para las ubicaciones. Una cosa que puede estar pensando es actualmente tenemos una diagonal hacia adelante sobre la cual hemos colocado dentro de este camino aquí, luego también tenemos ubicaciones de slash hacia adelante. Primero, cuando configuramos las rutas secundarias, no hemos agregado una diagonal hacia adelante antes de cada una de estas rutas. Bueno, si lo hicimos, se tratará como un camino raíz. Echemos un vistazo a exactamente lo que queremos decir con esto. Si agregamos la barra hacia adelante a cada uno de estos y luego entramos en el Acerca de. Ahora, en lugar de tener una diagonal hacia adelante sobre, si hacemos clic en uno de nuestros enlaces, la URL completa será reemplazada por este historial de entrega o enlace de ubicaciones. Pero como queremos agregarlos al final del enlace Acerca de, podemos simplemente usarlos sin la diagonal hacia adelante. Por último, para ver realmente el contenido a continuación de cada uno de estos componentes, necesitamos seguir adelante y agregar una vista de enrutador. Vaya a la vista Acerca de y luego justo debajo la navegación y colocando la vista del enrutador. Esto y vamos a ver esto. Tenemos la sección superior y luego el área de ubicaciones en la parte inferior, el historial, y también la entrega también. 11. Vistas con nombre: Esta página Acerca de Nosotros tiene tres componentes entre los que podemos cambiar. Como sabemos, podemos hacer clic en el historial, las ubicaciones y también los componentes de entrega. Como también hemos visto anteriormente, podemos hacer uso de componentes y reutilizarlos en cualquier archivo que desee. Por ejemplo, en la app.vue, podemos ir por el camino tradicional importando un componente y luego renderizando esto dentro de la plantilla. Una forma alternativa de renderizar un componente es hacer uso del Enrutador Vue. Hasta ahora hemos usado el RouterViews para mostrar la página como esta que acaba de aquí. También lo mismo en la vista anterior que acabamos de agregar en el video anterior hicimos uso del RouterView. Esto podría mostrar ya sea la página de nivel superior o cualquier componente hijo, tal como lo hacemos aquí con la página acerca de. También podemos insertar tantas más RouterViews como queramos y cada RouterViews adicional actuará como tomacorrientes con varios componentes. Si tuvieras que insertar más RouterViews, también necesitamos darles nombres para que el router sepa qué componentes mostrar en cada uno. Digamos que queríamos mostrar alguna información adicional en la parte inferior de la página de inicio, como los componentes de entrega e historial. Aquí tenemos un desarrollador. La clave aquí es que tenemos dos RouterViews adicionales. Cada uno de estos tiene atributos de nombre que serán importantes en un momento. Observe que el RouterView en la parte superior no tiene nombre. Esta es una ubicación predeterminada. Este valor predeterminado, junto con los dos nombres se establecen dentro de la página de índice de enrutadores. La izquierda muestra lo que actualmente tenemos configurado para la página de inicio utilizando un solo componente. Sin embargo, cuando tenemos múltiples routerViews con nombres, necesitamos modificarlo para usar un objeto components, tal como vemos a la derecha. Primero es la ubicación predeterminada, que es el RouterView sin nombre. Entonces los siguientes dos nombres coincidirán con los dos nombres que le dimos al RouterViews. Acudir al proyecto y ya podemos configurarlo. Salta al componente principal de nivel superior, que es el app.vue y luego justo debajo del routerView lo colocaremos en un div. Este div, el estilo y el diseño tendrán la clase de envoltorio de bloque de información. Entonces dentro de aquí podemos colocar un routerViews adicional para mostrar cualquiera de nuestros componentes. Para este ejemplo, voy a mostrar la entrega y también los componentes del historial dentro de esta página principal. Colocando un RouterView, los atributos de nombre, que va a ser igual a la entrega. Copia y pega esto. El segundo va a ser para la historia. Solo queremos que estos dos componentes se muestren en la página principal. Para ello, pasemos a la página de índice de routers y subamos a la sección home. Actualmente el enrutador doméstico solo muestra el componente único de la vista doméstica. Pero para mostrar múltiples componentes, podemos cambiar de componente para tener una s al final. Quitar esto, pasar en un objeto. Así como hemos visto con las diapositivas, necesitamos agregar la vista predeterminada, que es la que se muestra dentro de la vista del enrutador sin nombre. Esta es la vista de casa, el nombre de la entrega. Esto mostrará los componentes de entrega y el siguiente es para historia. Solo para recapitular, tenemos el componente predeterminado, que es la vista de inicio dentro de la aplicación. Esto se mostrará en la vista del enrutador, que no tiene nombre. A continuación, tenemos los componentes de entrega e historial, que coincidirán con el nombre de nuestras dos vistas adicionales de enrutador. Ahora, view router sabe qué componentes mostrar en cada ubicación. Ya tenemos estos dos componentes de entrega en historia importados en la parte superior por lo que a estas alturas ya debería estar bien para ir. Guarde este archivo, a la página de inicio. Desde lo más alto tenemos este nivel 3 rumbo de casa, que podemos ver dentro de nuestra vista. Lo que tenemos aquí es este título y luego a continuación tenemos nuestros componentes de entrega y el historial. Solo para confirmar estos solo se muestran en la página de inicio, podemos entrar en los enlaces adicionales y no deberíamos ver estos componentes mostrados. Para terminar las cosas, volvamos a nuestra app.vue y agreguemos un poco de estilo para que estos aparezcan uno al lado del otro en la vista más grande y luego apilados verticalmente en la pantalla más pequeña. App.vue. Tenemos esta clase de envoltorio de bloques de información. Vamos a copiar esto a la sección de estilo. El tipo de pantalla de flex. Comenzaremos con la vista de pantalla pequeña, lo que significa que necesitamos cambiar la dirección de flexión para ser columna. Esto mantendrá nuestro contenido apilado verticalmente en la pantalla más pequeña. Para que este cambio esté uno al lado del otro, necesitamos cambiar la dirección del flex para ser fila en la pantalla más grande. Podemos hacer esto agregando una consulta de medios. De hecho, también podemos eliminar todo el resto del estilo. No necesito nada de esto. Configura todas las consultas de medios con nuestros medios. Queremos que esto apunte a pantallas con el ancho mínimo de 900 píxeles. Tomemos nuestro envoltorio de bloque de información. Modificaremos la dirección del flex para que sea igual a fila. En las pantallas más grandes de 900, estas en fila y luego esta cae sobre la pantalla más pequeña. Esta es una forma alternativa de usar componentes en lugar de la forma tradicional de importar un componente a otro archivo para mostrarlo. También podemos permitir que el enrutador Vue los coloque en una vista de enrutador. 12. Proyecto UI- Sección Intro: Esta nueva sección se trata de introducir contenido en nuestra aplicación. Crearemos toda la estructura que necesitamos creando varias páginas y componentes. Más adelante, en las próximas secciones, las haremos más dinámicas insertando diversas piezas de información de una base de datos, como nuestros pedidos, nuestros usuarios y nuestras pizzas. Pero a continuación, comenzaremos por crear los componentes del menú. 13. La interfaz de menú: La página de vista de menú, que ahora vamos a crear se dividirá en dos secciones. A la izquierda, vamos a incluir el menú, que incluirá todas las pizzas en una lista. Luego, en la próxima sección, crearemos la sección de canasta a la derecha, que enumerará todos los contenidos que el usuario agrega a la canasta. Saltemos a nuestros componentes de vista de menú y comencemos a trabajar en esto En las vistas en la vista de menú. Vamos a mover el rumbo de Nivel 3 por ahora y luego crear un div, que va a ser un wrapper para nuestras dos secciones. Esta es la clase de envoltorio de subrayado de menú. Después dos divs más, que se van a anidar en su interior. El primero va a ser para los contenidos del lado izquierdo, que será nuestro menú. Le dará a esto la clase de menú, para luego crear un segundo div, que va a ser para nuestra canasta. Danos la clase de canasta. Luego salta a la sección del menú y coloca en un encabezado de Nivel 3. Hacer uso de las utilas cualquier texto de auténtica pizza hecha a mano. Para nuestro segundo div, que es la canasta. Nuevamente, un Nivel 3 encabezando las utilas. Este es para la canasta. Como se mencionó anteriormente, por ahora, sólo vamos a trabajar en esta sección de menú, que va a ser una tabla HTML. Esta mesa sólo contendrá una sola pizza por ahora. Pero volveremos a esto cuando empecemos a trabajar con la base de datos de firebase para que podamos recorrer todas las pizzas que están almacenadas y luego mostrarlas en esta tabla. Por ahora, configuraremos nuestra plantilla de cómo va a verse esto dentro del cuerpo de la mesa. Luego en el elemento TR para nuestra primera fila de mesa. Todo nuestro contenido de pizza irá dentro de esta fila de una sola tabla. Las celdas ingresan algunos datos de tabla. Esto va a ser por el nombre de la pizza. El nombre de la pizza colocará dentro de las etiquetas fuertes y se colocará en cualquier nombre de pizza, como Margarita. Debajo de esta primera fila de tabla, agregaremos en una segunda fila. Este contendrá la descripción dentro de los datos de la tabla. Las pequeñas etiquetas y la descripción de una deliciosa pizza de pasta de tomate cubierta con mozzarella. Desplázate hacia abajo y solo sopla esta fila de tabla agregará una tercera fila. Esta va a ser para las opciones disponibles. Para cada pizza, vamos a crear dos tamaños diferentes, que serán uno de nueve pulgadas y otro de 12 pulgadas. Más adelante durante esta clase, recorreremos esto y haremos esto tanto para la pizza de 12 como para la de nueve pulgadas pero por ahora, ya que solo estamos creando nuestra estructura y agregando algunos datos de muestra, solo colocaré en una sola talla, que será para la de nueve pulgadas. A esto le seguirá el precio. Entonces la tercera sección será un botón que se utilizará para agregar la pizza a la canasta. Colocar en un botón HTML dentro de aquí. El tipo de botón. Entonces para salir símbolo más se hará uso de una entidad HTML, que es el código de los ampersands, el hash 43, y un punto y coma. El navegador vamos a ver cómo se ve esto. Tenemos nuestra primera fila, que es el título, la segunda fila, que es una descripción y la tercera sección va a ser nuestra opción. Como se mencionó anteriormente, recorreremos esta tercera sección, que nos dará nuestras diversas opciones. Esta es nuestra mesa para nuestra pizza ahora configurada y luego próximo video pasaremos a la siguiente sección, que es la canasta. 14. La interfaz de usuario: Siguiendo el video anterior, donde agregamos la sección de menú de la izquierda, ahora vamos a bajar al área de canastas. Esta canasta también será una tabla en la que se muestran las pizzas que el usuario seleccione haciendo clic en el botón Agregar justo aquí. Seguido de un pedido, sección total y un botón para después seguir adelante y hacer el pedido. En el futuro, este botón de pedido se vinculará a nuestro JavaScript para luego empujar este pedido a nuestra base de datos. Para la tabla, las secciones contendrán una sola fila. Esta fila tendrá la cantidad y un botón ambos lados para aumentar o disminuir la cantidad. Tendrás el nombre de la pizza seleccionada y también el precio también. Debajo de nuestro nivel 3 rumbo a las canastas, crea un div. Este div contendrá la estructura para todas las canastas, que será una mesa en la parte superior, luego el texto, que va a ser el total del pedido. Pero ahora solo coloca en cualquier valor que quieras. Esto se actualizará y calculará con JavaScript. A continuación, un botón que posteriormente se encargará de realizar el pedido. Algún texto está bien por ahora. Veamos cómo se ve esto. Ahí está uno de nuestros contenidos. Ahora podemos pasar a la sección de mesa. La tabla contendrá una sola fila de tabla. En la primera tabla la celda de datos va a haber dos botones y también la cantidad. Tendremos la cantidad en el centro, y luego un botón de disminución a la izquierda y un botón de aumento a la derecha. El primer botón con la clase de quantity_button, el tipo, que también es botón, y luego la entidad HTML, que son los ampersands, el hash 8722 seguido del punto y coma. Esto nos dará el símbolo negativo y luego agregaremos la cantidad y luego a la derecha un botón con el símbolo más. Para la cantidad que se sentará en el medio, colocar en cualquier cantidad por ahora. Copia nuestro botón y pega esto en la parte inferior y simplemente cambia el número de código para que sea 43. Las fechas en estos botones se utilizarán para aumentar y disminuir este valor. Antes de agregar esto a la canasta, también actualizaremos el total del pedido medida que cambiemos las cosas también. Ese es nuestro primer dato de tabla. El segundo va a ser para el nombre de la pizza y también el tamaño de la opción y el tercero. Este es el precio de la pizza. Guardar y otra vez en el navegador. Esta es toda la información que ahora necesitamos para la canasta y con todo este contenido ahora en su lugar, a continuación veremos agregar un poco de estilo para que se vea un poco mejor y también mejorar el diseño. 15. Fuentes y estilos base: Dentro de nuestro proyecto, tenemos este archivo main.js. Este es el archivo que se encarga de crear nuestra aplicación. Importamos esto de la biblioteca vue. También importamos los componentes principales de la aplicación, que es este que acaba de llegar. Este es el componente principal de entrada y todo lo demás va a ser anidado en su interior. Pasamos este archivo para crear app, y luego montamos la aplicación al DOM con el id de app. esto, también incluye una importación en la parte superior con un archivo main.css, que se encuentra dentro de esta carpeta de activos. La forma en que estructuramos nuestro estilo depende completamente de nosotros cuando se trata de una aplicación vue. Pero, voy a estar usando esto como una especie de archivo de estilo general que contiene estilos base como fuentes y reinicios. Todavía podemos agregar componentes específicos o estilo de página en componentes individuales de archivos vue. Primero, sin embargo, tenemos que elegir nuestras fuentes, que vamos a usar para el proyecto. Para ello, voy a hacer uso de fuentes de Google. Así que dirígete a fonts.google.com. Voy a hacer uso de dos fuentes separadas. Uno de ellos va a ser para nuestros rubros y título, y el otro para el texto general. Así que haz clic en Buscar. El primero se llama guión de Marck y este es M-A-R-C-K, y este es el de nuestros rubros y título. Entonces selecciona esto. Desplácese hacia abajo. Éste sólo tiene los textos regulares lo cual está bien. Haga clic en el icono más para agregar esto a nuestras familias seleccionadas, así como esto. Busquemos nuestro segundo. Volver a la búsqueda. Para el texto general, voy a estar usando Roboto. Este es el que necesitamos aquí. Vamos por una selección de fuentes. Entonces 300, que es un texto ligero, el 400, que es de peso regular, y también un 500. Agregue los tres a la familia. Haga clic en estas familias seleccionadas y tenemos la información que necesitamos para importar a nuestro proyecto. Entonces tenemos un enlace que podemos usar o podemos usar la sintaxis import. Para importar esto, pasemos a la carpeta Activos y al main.css. Esto actualmente está vacío. Podemos agregar esta regla de importación. Así que copia todo dentro de las etiquetas de estilo. Pega esto en. Como hemos visto antes en el archivo principal dot js, tenemos el id de app, que podemos seleccionar como el wrapper principal para nuestro proyecto. Entonces selecciona esto con el hash. Dentro de aquí, podemos configurar la familia de fuentes para que sea Roboto copiando esta segunda línea justo aquí. Este sería nuestro texto general y lo anularemos con el guión de Marck cuando lo necesitemos. Entra al cuerpo. Solo estamos agregando estilos generales dentro de aquí, ¿recuerdas? Entonces agregaremos algún margen para centrar nuestro proyecto, estableciendo esto como cero en la parte superior e inferior, y también a la izquierda y a la derecha. El texto de la fila de color de RGB, colocando un valor rojo, verde y azul de 76. Justo después del cuerpo, apuntaremos a los encabezamientos h1, h2, h3, h4, h5 y h6. Recuerda, la familia de fuentes que vamos a usar para esta es la otra que obtenemos de las fuentes de Google. Así que copia esta sección, pega. Elimine cualquier margen predeterminado que se aplique a cualquiera de nuestros encabezados con el navegador. Estoy colocando el color, que es un valor RGB de 76,76,76. Entonces esto nos da nuestros estilos generales de rumbo, pero haremos uso del encabezado de nivel tres en múltiples lugares. Entonces lo estaremos usando con encabezados de página y componentes. Entonces estableceremos el tamaño de fuente para que sea un tamaño mayor de 2.2 rems. Además, coloca algún margen en la parte superior e inferior de un rem y cero a la izquierda y a la derecha. A continuación, la lista desordenada, los elementos ul. Restablecer cualquier espacio en el que se aplique por el navegador, lo que el margen predeterminado se puede eliminar a cero, y también el relleno para que se restaure de nuevo a cero también. Los elementos de la lista, y de hecho, también los enlaces también con los elementos a heredarán el color. Esto eliminará ese color púrpura del enlace, que tenemos por defecto dentro del navegador. Además, restablece el texto-decoración para que no sea ninguno, y también el estilo de lista. Esto asegurará que ninguno de nuestros enlaces o ninguno de nuestros elementos de la lista tenga subrayados, y también cualquiera de las viñetas al costado del enlace también. Entonces algunos estilos más generales, saltaremos a nuestros elementos de imagen, y nos aseguraremos de que el ancho máximo de cualquier imagen no supere el 100%. Entonces, al lado de nuestras clases para nuestros enlaces de enrutador, si recuerdas desde el principio, tenemos estos enlaces en la parte superior y ya puedes comenzar a ver nuestro estilo teniendo lugar. Tenemos estos enlaces de menú arriba en la parte superior, que puedes ver si entramos en los componentes y luego en el encabezado de la app. Cada uno de estos enlaces de enrutador tiene esta clase de enlace. Vamos a agarrar esto, un punto ya que es una clase, un margen de un rem para darle a esto algo de espaciado, ahí vamos, y también nos aseguraremos que cada uno de estos cambie color cuando pasemos el cursor sobre ellos. Entonces para hacer esto, apuntaremos a nuestro enlace una vez más. Usaremos el selector de libración, cambiaremos el color del texto para que sea un valor RGB de 161. Entonces el rojo, verde de 132, y 132 también para el azul. Finalmente, para cualquier botón que tenga en nuestro sitio, también estableceremos el estilo predeterminado para cada uno de estos. Entonces el botón, eliminará el fondo, el color predeterminado, configurando este para que sea ninguno. Un borde muy fino de 0.5 píxeles, una línea continua, y el color de esta línea va a ser un valor RGB de 202 para cada uno de estos. Algún radio de frontera de 0.3 rems, algo de relleno para hacer el botón un poco más grande. Entonces medio rem en la parte superior e inferior y un rem a la izquierda y a la derecha. Necesito avisar al usuario que puede hacer clic en estos botones cambiará el cursor para que sea un puntero. Entonces, si pasamos a nuestro proyecto, podemos ver que algunos de estos han entrado en vigencia. Pero recuerda, estos son solo estilos generales para nuestro proyecto, y agregaremos estilos más específicos a cada una de nuestras páginas y componentes individuales. 16. Estilo de menú y cesta: A continuación vamos a dirigirnos al Menú Ver Archivo y agregar cualquier estilo específico a los componentes de esta vista . Abre esto. Después justo debajo de las plantillas, agregaremos el estilo y agregaremos estos atributos de ámbito. Si no has usado antes el atributo scoped, esto significa que todos los estilos solo se aplicarán a estos componentes, es decir, a las plantillas que creamos anteriormente. Para verlas en acción, saltaremos a la sección del menú. Haz esto un poco más pequeño. En la parte superior tenemos un encabezado de nivel 3, que es este que acaba de llegar. Vamos a agarrar esto y establecer el text-align para que esté en el centro. Esto también aplica a nuestra canasta. Tanto esta sección superior como esta sección inferior pronto se aplicarán a la izquierda y a la derecha en la vista más grande. Pero primero comenzaremos con el diseño móvil, que es la pantalla pequeña. Vamos justo debajo de nuestro h3 y digamos el diseño móvil. Para cambiar entre nuestros dos diseños, vamos a hacer uso del flexbox. Si vamos a la parte superior, puedes ver que este div tiene la clase de menu wrapper. Esta será la que se encargue de controlar la dirección de nuestro menú y también de nuestra canasta. Estos dos divs son los elementos hijos de menu wrapper. Si bajamos y seleccionamos esto, podemos hacer uso del flexbox. Envoltura de menú. El display será el flex. Puede ver la dirección de flexión predeterminada al usar los flexboxes en una fila. Estos se colocarán uno al lado del otro en la página. Este es el diseño que desea en la vista más amplia. Pero para la vista más pequeña, necesitamos anular esta para que sea la dirección de flexión de la columna. También, el color. El color de la fuente será un valor RGB de 80, 96 y 112. A continuación tenemos las dos secciones que estaban dentro de las cuales acabamos de mirar, que es la sección de menú arriba en la parte superior y luego la sección de canasta. Cada uno de estos tiene su propia clase correspondiente. Tenemos.menú y también.cesta. Establecimos el fondo para cada una de estas secciones para que sea de color hexadecimal. El que voy a ir por es faf1e2. El radio de borde para cada una de estas secciones, pequeño valor de tres píxeles. La altura, por si acaso no tenemos mucho contenido, nos aseguraremos de que cada una de estas secciones sea un mínimo del 100 por ciento de la altura de la vista. Después un poco de relleno en el interior de estos elementos para darte un poco de espaciado desde el borde de la pantalla. Esta es la dirección que tenemos para la vista móvil. Si estiramos esto para que sea un poco más ancho, queremos darle la vuelta a esto para que la dirección de flexión sea una fila. Podemos hacer esto dentro de una media query, donde quiero que la pantalla tenga un ancho mínimo de 900 píxeles. Por favor, surta efecto. Ahora, lo que haremos es agarrar la sección del envoltorio del menú, copiar esto, pegar esto dentro. Ya hemos configurado el tipo de pantalla para que sea flexible. Vamos a quitar esto. Ya he establecido el color. Vamos a quitar esto. Todo lo que tenemos que hacer aquí es establecer la dirección de flexión para que esté en fila. Agrega algo de espacio entre con justificar el contenido. Entonces tenemos que decidir cuánto espacio va a ocupar cada una de estas secciones . La sección de pizza probablemente necesitará un poco más de espacio. Podemos hacer uso de la dirección flex para darnos más espacio que la canasta. Para la vista más grande, vamos a tomar la sección de menú, establecer el valor de flexión en dos. Entonces para nuestra canasta, estableceremos que el valor flex sea uno. Esto significa que esto intentará ocupar el doble del espacio disponible que la sección de canasta. Puedes ver que esto se refleja dentro del navegador. Podemos notar la diferencia entre estas dos secciones. Añadiremos un borde a la derecha de este menú para agregar una línea vertical hacia abajo por el centro. Dentro del menú, establece el borde a la derecha de un píxel, una línea continua y el color RGB de 202 para cada valor. Ahí vamos. Ya casi terminamos para esta sección, pero lo que voy a hacer por estos dos botones aquí es quitar el borde, hacerlos un poco más pequeños. Si subimos a la sección, vemos que cada uno de estos botones tiene la clase de quantity_button. Esto lo podemos hacer en la sección general, justo arriba de la media query. Cantidad_ btn. Retire el borde. Vamos a establecer el relleno para que sea un valor de 0.4 rems. Esto ahora reduce el relleno ahora para ambos botones de cantidad. A continuación, continuaremos con el tema del estilismo. Vamos a añadir un poco de estilo a nuestra sección de encabezado. 17. Peinado de cabecera: Seguramente vamos a pasar a agregar algunos componentes nuevos y también algunos artículos nuevos a nuestro sitio. Pero rápidamente, justo antes de hacer esto vamos a aplicar un poco de estilo en ella a esta sección de encabezado. Abramos la barra lateral, saltemos a nuestros Componentes y luego al AppHeader. El AppHeader necesita la sección de estilo en la parte inferior, y la sección de estilo va a ser alcanzada a estos componentes particulares. Echemos un vistazo a lo que tenemos. Tenemos la clase de título del sitio en la parte superior. Empecemos con esto. Sitio_título. Comience con el tamaño de fuente para el título de nuestro sitio e iremos por 3.6 rems. Hazlo bastante grande. El color de Alice azul. No lo podemos ver demasiado por el momento pero muy pronto vamos a agregar un color de fondo a esta sección de encabezado para que destaque aún más. Añadiremos una transformación para hacer que esta gire a un cierto valor agregando la función rotate. Pasa la cantidad de grados por los que quieres rotar esto, y esto puede ser un número positivo o negativo. Ocho grados. Se puede ver que esto ahora tiene una inclinación y se puede aumentar o disminuir este valor. Para darle algo de espacio desde el contenido de abajo, agregue algo de margen en la parte inferior de los elementos. Vamos por dos rems. Entonces podemos agarrar nuestro encabezado que es el envoltorio para esta sección completa. El encabezado va a hacer uso del CSS Flexbox para diseñar las cosas. Tanto para las vistas de pantalla más pequeñas como para las más grandes, estos contenidos se colocarán verticalmente en la dirección flexible de la columna. Establezca el tipo de visualización. Recuerde que la dirección de flexión predeterminada es la fila que se encuentra de izquierda a derecha en toda la página. Podemos cambiar esto para usar la columna. Para colocar el contenido en el centro, use la propiedad flex de align-items. Podemos ver que el contenido es más o menos contra la parte superior y también la parte inferior de la cabecera. Añadiremos algo de espacio con un valor de relleno de un rem en la parte superior e inferior y cero a la izquierda y a la derecha. Para los enlaces del menú, coincidiremos con el color del azul Alice y luego lo colocaremos en la imagen de fondo. Para la imagen de fondo apuntará a una URL que se almacena dentro de nuestro proyecto. Vamos a la carpeta assets, a las Images, y luego dentro de aquí tenemos una imagen llamada main-bg. Esto es dot dot slash, salta a la carpeta assets, imágenes, fondo principal. También queremos establecer esto para que no se repita. Como hemos agregado un fondo, también queremos agregar a la propiedad height y establecer esto para que sea un valor fijo de 650 píxeles. El tamaño del fondo, configuraremos esto para cubrir. Entonces si echamos un vistazo a esta imagen dentro de la carpeta imagenes, la principal-bg, podemos ver que esta imagen no esta centrada, esta cortada en el lado derecho. Arreglemos esto y volvamos a nuestro CSS. Hacer uso de la propiedad llamada Posición de Fondo. Establecer esto estar en el centro. Esta imagen ahora siempre estará centrada en diferentes tamaños de pantalla. Siguiente pequeña sombra tecnológica a cada uno de estos personajes de un píxel, un píxel, tres píxeles, y el color a aplicar para esta sombra tecnológica va a ser un valor RGB de 20, 20, 20. Lo siguiente que hay que hacer es este nivel a rumbo que es el texto del lugar Número 1 para pizza. Podemos agarrar esto con el selector h2 y agregar algo de espaciado. Una propiedad de margen de dos rems en la parte superior e inferior y cero a la izquierda y a la derecha. Un color de texto de blanco antiguo y el tamaño de fuente de dos rems. Bueno. Este es nuestro estilo ahora completo para el encabezado. Nuestro sitio se ve un poco más agradable. A continuación, vamos a pasar a la página Admin y crear una nueva forma de pizza. 18. Administración: agrega una nueva forma de pizza: Dentro de nuestra vista de administración, muy pronto esto se va a dividir en múltiples áreas. Tiene sentido organizar todas estas áreas en diferentes componentes, y también colocar estos componentes en una carpeta de administración. Vamos a saltar a la barra lateral. En los componentes, y dentro de aquí. Crea una nueva carpeta con este nuevo icono de carpeta llamado admin, y agruparemos todos los componentes relacionados con admin. Dentro de aquí, cree un nuevo archivo. Este va a ser el primer componente para nuestro administrador, que será una forma para crear una nueva pizza. esto lo llamaremos Newpizza.vue. Crear la plantilla que necesitamos para esta sección y el envoltorio de sección. Este tendrá la clase de admin_section. Esto se dividirá para tener una sección de encabezado con un título y también el formulario para agregar nuestra nueva pizza. El encabezado para esta sección, la clase de admin_section_header, h3. Texto de agregar pizza nueva. Antes de ir más lejos con más contenido, vamos a comprobar cómo se ve esto dentro del navegador, pero primero tenemos que importarlo a nuestro administrador. Salta a las vistas y a la vista de administración. En la parte superior, coloque en nuestro script para importar nuestro archivo. Lo que vamos a hacer aquí es agregar un atributo llamado setup. Volveremos a esta configuración muy pronto en este curso, pero por ahora vamos a importar el componente que creamos, que se va a llamar pizza nueva. Voy a importar esto del directorio que es @ para llevarnos a la ruta, la carpeta de componentes, admin, y el nombre de archivo de pizza nueva. Tenemos nivel tres rumbo por ahora podemos importar nuestros componentes, y colocarlo a continuación. Al instante, en cuanto guardemos, veremos que esto se agrega a la sección de administración, así que entra en el enlace de administración y este es el título que agregamos en los nuevos componentes de pizza. Continuando con y por debajo del título, cree nuestro formulario. Eliminaremos la acción ya que se alimentó manejando todos los JavaScript necesarios. Cada una de nuestras secciones, como el nombre de la pizza, la descripción y las diversas opciones estaban rodeadas dentro de un estilo div. Este div tendrá la clase de form_group. Entonces esto tendrá una etiqueta y una entrada. La etiqueta, el texto del nombre, la entrada. El primero para el nombre de la pizza tendrá el tipo de texto y la identificación del nombre que coincidirá con nuestra etiqueta. Vamos a copiar esta sección div. Duplicaremos esto y lo pegaremos abajo. El segundo va a ser para la descripción. Para esta, no necesitamos una entrada, vamos a usar un área de texto, así podríamos tener múltiples líneas de texto o una descripción larga. Vamos a mover todo su contenido dentro de aquí. Limpiemos esto, y agregaremos las filas que necesitamos. Vamos a establecer el valor predeterminado en cinco y también un ID de descripción, que coincidirá con la etiqueta justo arriba. Guarda esto, y ya podemos ver que nuestras entradas están apareciendo ahora en la pantalla. A continuación, vamos a crear dos nuevas secciones, que van a ser para nuestra primera y nuestra segunda opciones de pizza. Esto nos va a dar dos opciones distintas para el tamaño de la pizza. El texto dentro de los elementos P los creará como elementos fuertes para hacerlos más audaces. Opción 1. Entonces podemos continuar con nuestros elementos de forma. Copiaremos el grupo de fuentes de antes, el de arriba, escribiremos esto, y este va a ser para el tamaño. Esto va a estar en pulgadas. La etiqueta de talla uno. El tipo de texto está completamente bien, y también vamos a hacer coincidir su identificación con la etiqueta. Debajo de esto, también necesitamos crear un nuevo grupo de formularios, y este sigue relacionado con la Opción 1, y este es el precio de este tamaño en particular. El texto del precio, la etiqueta para el Precio 1, el ID coincidente. Después duplicaremos cuidadosamente esta sección así el precio, el tamaño, y también el texto. Copia esto. Pegue en él a continuación para crear una segunda sección. Este es para la Opción 2. Cambiemos los nombres de propiedad de cada uno de estos atributos para que sean Tamaño 2. Lo mismo para el precio. Guarde esto, y otra vez en el navegador. Ahora tenemos dos secciones para rellenar los tamaños. La sección final va a ser para un botón para enviar este formulario. Nuevamente, coloca esto dentro de un div con la clase de form group. Esto mantendrá el estilo consistente. Agregar un botón con el texto de agregar. Ahora agregarás nuevo formulario de pizza ahora completo. Volveremos a esto más adelante y mejoraremos el estilo. Pero a continuación pasaremos a otros componentes de administración, que es exhibir las pizzas. 19. Admin: Componente de Pizzas: Así que tenemos el agregar nuevos componentes de pizza dentro del administrador. El siguiente componente de administración que crearemos es un componente de pizzas, que mostrará todas las pizzas disponibles en el menú. Saltaré a la barra lateral y crearé un nuevo archivo Vue.js nuevamente dentro del administrador para mantener esto organizado. Esto será simplemente pizzas.vue. Como siempre, cierra la barra lateral hacia abajo y crea una plantilla para almacenar nuestro código HTML. Una sección, que va a tener la clase de admin_section. También eche un vistazo al nuevo componente de pizza que creamos anteriormente. Esto también coincide con esta misma sección. Así podemos aplicar el mismo estilo CSS. Esto también tendrá un encabezado. Nuevamente, empareja en este encabezado justo aquí con el mismo nombre de clase. Entonces la clase era admin_section_header. Esto nos dará un estilo consistente para todos nuestros bloques de administración, encabezado Nivel 3 con el texto del menú. Entonces esto es todo lo que necesitamos para la sección de encabezado. Vamos a saltar por debajo del encabezado y crear nuestra tabla, que enumerará todas las pizzas disponibles del menú. La sección thead, o el encabezado de la tabla, colocan en una fila, y el elemento th para crear nuestros dos encabezados. Entonces vamos a mantener esto bastante simple. Todo lo que hacemos es agregar un nombre de pizza a la izquierda, y luego a la derecha de la mesa, agregaremos un botón para eliminar esta pizza del menú. Entonces el encabezado de pizza y el segundo va a ser el texto de eliminar del menú. Voy a configurar una función más adelante para hacer esto. Debajo de la cabeza, crea la sección tbody. La primera fila, que se sentará por debajo de nuestros rubros. Entonces, lo primero dentro de aquí es el nombre de la pizza dentro de los elementos de datos de la tabla, y solo agregaremos un texto de muestra dentro de aquí para nuestro nombre de pizza y lo vincularemos a nuestra base de datos más adelante. A continuación, la siguiente celda dentro de los datos de la tabla es un botón que va a quitar la pizza del menú. El botón tiene el tipo de botón y también una clase para nuestro estilo de btn_remove. Después dentro de una entidad HTML, que va a ser la cruz. Se trata del ampersand, la palabra de los tiempos, seguido de un punto y coma. Este es todo el contenido que necesitamos por ahora y más adelante crearemos un bucle for para recorrer todas las pizzas disponibles y duplicar cada una de estas filas. También al igual que con los nuevos componentes de pizza, necesitamos importar esto a la vista de administración, aquí. Duplica esto y esta va a ser para todas las pizzas. Esto está en la misma carpeta de administración. Entonces cambiamos el nombre, y voy a poner esto en la parte inferior del archivo en el navegador. Ahí está nuestra mesa con nuestra sola fila y nuestra pizza individual. A continuación, crearemos los componentes finales de administración para enumerar todos los pedidos de los clientes. 20. Admin: Componente de pedidos: Los componentes finales de administración que necesitamos se utilizarán para enumerar los pedidos actuales. Nuevamente, solo tengo estos componentes dentro de la carpeta admin para mantener esto organizado. Crea un nuevo archivo y éste va a ser el orders.vue. Esto también seguirá un patrón similar a los anteriores donde creamos una plantilla, creamos una sección con la clase de sección admin, creamos un encabezado, y luego una tabla para listar todos los pedidos. Empecemos con la plantilla y la sección en la parte superior. Este es nuestro envoltorio. La sección también necesita tener una clase de encabezado de sección admin. Nuevamente, esto coincide con los componentes de administración anteriores que creamos, igual que el encabezado en la parte superior, la clase, y si pudiera usar el incorrecto en la parte superior. Vamos a copiar esto. Este debe ser encabezado de sección admin y la sección debe ser la clase de sección admin. Bueno. Ahora estamos de vuelta en el camino y podemos crear dentro del encabezado, nuestro encabezado de Nivel 3 con el texto de los pedidos actuales. También al igual que los componentes de la pizza que acabamos de crear, más adelante cuando vinculemos esto a Firebase, toda nuestra información será extraída de nuestra base de datos. Es decir, será dinámico. Por ahora, solo colocaremos algunos datos fictitos y agregaremos cinco pedidos actuales y esto subirá y bajará dependiendo cuántos pedidos tengamos realmente en nuestra base de datos. A continuación, la sección de tabla, la fila de la tabla, las etiquetas th para el encabezado. Los pedidos van a enumerar el artículo, que será el nombre de la pizza. Recuerda que cada pizza tiene dos tamaños diferentes, por lo que también necesitamos enumerar esto. Necesitamos saber la cantidad y también el precio. Añadiremos dentro de los corchetes la palabra de total porque este será el valor total, que será el número de pizzas multiplicado por el precio. Entonces debajo de nuestra primera fila de tabla, agregue en la segunda fila, y por ahora, colocaremos en un orden de muestra. La primera celda dentro del elemento de datos de tabla va a ser para el número de orden. Esta celda también contendrá dos piezas de información. Primero está el número de pedido real, y este subirá dependiendo de cuántos pedidos tengamos, y también agregaremos un botón para eliminar este pedido de la base de datos, que será útil una vez que se complete el pedido. Dentro de las etiquetas fuertes, agregaremos el número de pedido. Coloquemos en el número 1 por ahora. El botón, la entidad HTML, que será el ampersand y times, seguido de un punto y coma, y esto será un poco cruzado para eliminar esto de nuestra base de datos, la clase para nuestro estilo de btn_remove, y también el tipo de botón. Este número de pedido y este botón Eliminar estarán en su propia fila independiente y luego la tercera fila, que agregaremos justo debajo, va a ser todos los valores debajo de nuestros encabezados. Por lo tanto, el primer dato de tabla que necesitamos es el ítem. Este va a ser el nombre de la pizza, seguido del tamaño, la cantidad. Cualquier valor está bien por ahora dentro de aquí. El último que necesitamos es el precio. Para ver esto, salta a nuestra vista de administración. Ahora podemos importar esto en la parte superior de nuestro archivo. Esta son las órdenes. Voy a colocar esto en la parte inferior de la plantilla. Desplácese hacia abajo. Bueno. Tenemos gran parte de la interfaz de usuario, por lo que la sección de administración ya está en su lugar, y ahora todo está listo para agregar algunos datos dinámicos de nuestra base de datos. Pero lo siguiente lo que vamos a hacer es saltar a otro de nuestros puntos de vista, que es la vista de inicio, y comenzar a agregar nuestro contenido. 21. Vista de casa: A continuación nos pondremos a trabajar en esta vista de casa, que va a ser componentes nuevos, y se va a cambiar con el router de vista. Recuerda, tenemos esta sección de encabezado en la parte superior. Entonces en la parte inferior ya tenemos dos salidas separadas colocadas a través del RouterView. Tenemos las secciones de entrega e historial, y siempre va a estar contenido en la parte inferior de nuestra plantilla. Recuerda justo encima de esto tendremos nuestro RouterView, que va a mostrar cualquier componente dentro de nuestra carpeta views. Tenemos nuestra vista de casa ya configurada. Tenemos una plantilla sencilla con el texto de home. Podemos ver esto justo aquí. Recuerde que nuestros dos componentes en la parte inferior los cuales se colocan con el RouterView, solo van a mostrarse en esta página principal, ya que si entramos en el router y la página de índice, los hemos configurado como los componentes de entrega y el historial y el predeterminado, que será la vista de inicio. Esta será esta sección arriba en la parte superior. Vamos a saltar a la vista de casa ahora mismo. Entonces podemos ponernos a trabajar agregando algo de contenido para nuestro estilo. Podemos configurar la clase de hot, y luego justo debajo de esta, crear una nueva sección div, y esta va a tener la clase de hot_text. Subir, un rumbo de Nivel 3. Esto tendrá el texto de caliente fuera del horno. Ahí vamos. Una sección para esta página de inicio también va a tener algo de texto y también contará con una hot_pizza vegetariana, y también una imagen que tenemos dentro de la carpeta images, que está dentro de los assets. Necesitamos este fire.jpg. Primero el texto debajo del encabezado Nivel 3, agrega un elemento p para nuestro texto. Este tendrá la clase de hot_pizza_name. El nombre de la pizza es vegetariana caliente. Texto pequeño. Este tendrá la clase de hot_pizza_description. Entonces el texto de nuestra firma vegetariana, pero con una patada. Entonces debajo de este texto podemos colocar en un enlace de enrutador, que va a enlazar a nuestro menú. El componente RouterLink, el texto de let's order. Entonces como siempre, con nuestro RouterLink, necesitamos pasar los dos atributos con los dos puntos, ya que esto va a contener un dato dinámico, pasar en nuestros objetos dinámicos donde vincularemos al nombre de MnuLink. Este MnuLink es el mismo que configuramos en el archivo del router, que podemos ver en el router, y luego en el index.js. Estos son los nombres únicos que agregamos a cada uno de estos caminos. Casi ahí. Ahora tenemos esta sección div y luego justo debajo de esta colocaremos en nuestra imagen. Voy a señalar la imagen que acabamos de ver, que estaba en la carpeta assets. Usaremos../para saltar un nivel en nuestro directorio a los activos, imágenes y el fire.jpg. El estilo de clase puede ser hot_img, y luego también el texto alt también. Ahí está todo nuestro contenido en su lugar. Vamos a comprobar que este enlace funciona. Esto salta a nuestra sección de menú, lo cual es bueno. Podemos saltar por debajo nuestra plantilla y agregar la sección de estilo. Esto quiere ser esculpido a este componente. Comenzaremos con la sección principal con la clase de hot, y esta es la envoltura para esta sección completa. Esto será responsable de cambiar el diseño en la vista de pantalla pequeña y grande. Para ello, haremos uso del tipo de display de flex. Como comenzaremos con la primera vista móvil, podemos reducir el navegador, y luego cambia para ser una dirección de columna en la pantalla más pequeña. Flex-direction es igual a la columna. Esto colocará nuestro contenido verticalmente. Luego dentro de una consulta de medios en la pantalla más grande, cambiaremos esto para hacer uso de la fila. Esto lo haremos ahora con @media, donde apuntaremos al ancho mínimo de pantalla de 900 píxeles. Nuevamente, agarraremos la clase de hot y cambiaremos la dirección flexible para que sea igual a la fila. La pequeña pantalla, lo hace más grande, y ahora aparecen dos elementos uno al lado del otro. El primer elemento fue este div, y el segundo es nuestra imagen. Coloquemos esto en el centro con alinear elementos. De hecho, esto solo quiere entrar en la primera sección móvil, así que suministros para la pantalla pequeña. Fuera de la media query, iremos por el hot_image, y también el hot_text. Esta es una clase la colocarán en los puntos. Tenemos la clase de hot_text y también nuestra imagen, que son nuestras dos secciones principales. Esto va a apuntar a nuestras dos áreas de contenido, y las haremos del mismo tamaño configurando el flex para que sea un valor de dos rems. Luego el texto-align del centro. A continuación tenemos el encabezado, y esto no tiene una clase, así que podemos apuntar a un encabezado de Nivel 3, que es un hijo del hot_text. El envoltorio de hot_text seleccionará el h3, que está anidado en su interior, y establecerá el color para que sea un valor hexadecimal de bb2118. Lo que nos da este bonito color rojo, que podemos ver aquí. Entonces el hot_pizza_name, que es el hot_pizza vegetariana. Haz esto un poco más grande estableciendo el tamaño de fuente. Intentemos 2.2 rems. Un poco más pequeño también. 1.8. Siguiente para el siguiente fragmento de texto, este tiene la clase de hot_pizza_description. Copia esto. Coloca esto en. El estilo de fuente para ser cursiva, el font-weight para ser un poco más ligero, vamos por 300. Comprobemos esto también en la pantalla más grande. Esto está bien. Por ahora, podemos seguir adelante y hacer algunos ajustes para que se adapten a tu gusto si quieres. Pero a continuación voy a pasar a continuar con el estilismo para este proyecto. En particular, agregaremos algunos estilos a nuestras mesas, y también a nuestras entradas de formulario. 22. Estilo de formulario y tabla: Para redondear esta sección, ahora vamos a saltar al archivo main.CSS, donde podemos empezar a aplicar algunos estilos compartidos entre nuestros formularios y nuestras tablas, y también algunos estilos CSS generales también. A partir de aquí, particularmente dentro del admin, tenemos algunas áreas que incluyen algunas clases compartidas. Por ejemplo, si entramos en los componentes y en la carpeta admin, tenemos esta nueva pizza. Esto tiene el envoltorio de sección de la sección admin, entonces tenemos esta sección de encabezado consistente con la misma clase en los tres de estos componentes. Lo tenemos aquí en la parte superior de los pedidos y también en la parte superior de las pizzas también. También tenemos un formulario aquí al que agregaremos un poco de estilo. Tenemos varias mesas para el menú y los pedidos actuales, y también tenemos una mesa dentro de la vista de menú. Tenemos varios estilos que se comparten entre múltiples componentes. En lugar de colocar en componentes individuales, lo que vamos a hacer es entrar en el archivo main.CSS y agregar el código compartido dentro de ahí. los envoltorios principales y también los formularios y tablas, también tenemos algunos pequeños detalles como el botón de quitar que tenemos en el menú, y también en los pedidos actuales. Le hemos dado a esto una clase de btn_remove. Ahora agregaremos todos estos a nuestra hoja de estilo. Entra en la fuente, en los activos, y tendremos este archivo CSS principal. Ya agregamos algo de contenido dentro de aquí, así que vamos a ir al fondo debajo del botón, y continuaremos desde este botón e iremos justo debajo y agregaremos la clase de btn_remove, que acabamos de buscar antes. Ya que vamos a eliminar algo con esto, probablemente nos gustaría agregar un color rojo. El tono al que voy a ir es un valor rgb de 180 fila, 67 y 67. Puedes ver instantáneamente tan pronto como guardes ambos botones abajo en la parte inferior y ahora cambias de color. También podemos eliminar este borde configurando esto como ninguno, y hacerlo un poco más visible aumentando el tamaño de fuente a 1.2 rems. Esta sección de menú y también los pedidos actuales están contenidos dentro de una tabla HTML. Para el elemento de la tabla principal, agreguemos un poco de estilo. Podemos colocar en un radio fronterizo, solo un radio de borde sutil de 0.3 rems. Veremos esto más claramente cuando agreguemos algunos colores diferentes. También podemos establecer el texto align para que quede a la izquierda. Esto empujará todo el texto a la izquierda de cada una de las celdas individuales. Un ancho del 100 por ciento muestra el ancho completo disponible. Luego bajaremos a las celdas individuales que están contenidas dentro de la th, para el encabezado de nuestra tabla y también td para los datos de nuestra tabla. Al espaciado agregaremos algún relleno o algún espaciado en el interior del elemento de 0.6 rems. A continuación trabajaremos en este formulario para la sección de agregar nueva pizza. Agarra el envoltorio principal del formulario, algún relleno de cero en la parte superior e inferior y 1 rem a la izquierda y a la derecha. También coincidiremos con el radio de borde de la tabla agregando esto también al formulario. Nuevamente, veremos esto más claramente más adelante. Dentro de la nueva pizza, veremos que cada uno de estos elementos de formulario como el nombre y la descripción está envuelto en este div con la clase de form group. Esto es consistente para cada una de estas secciones. Agarra esto. Entonces esto es form_group. Algún espacio de relleno hacia fuera cada uno de estos grupos y agregaremos un rem verticalmente en la parte superior e inferior y cero a la izquierda y a la derecha. Hacer uso de la caja flex con el display de flex. Alinearemos los artículos en el centro. Alinear los elementos al centro como puede ver le dará esta alineación vertical para que el texto permanezca en el medio de cada una de estas secciones. Si no tenemos esto, se puede ver que el texto está alineado a la parte superior de este elemento. Añadiremos un borde al fondo de 0.5 rems para el grosor, una línea continua y el color de la línea será un valor rgb de 202 para cada uno de los colores. Vaya, ahí es un poco demasiado grueso. Esto solo quiere ser de 0.5 píxeles. Después eliminaremos el subrayado de la sección inferior. Nuevamente, toma nuestro form_group, selecciona el último de tipo que es la última ocurrencia, que es nuestro botón, y luego eliminaremos el borde inferior configurando esto en none. A continuación les daremos a estas etiquetas y también a nuestras entradas un tamaño consistente usando la caja flexible. La etiqueta les dará un valor de flexión consistente de 1 para que todos permanezcan iguales. Entonces, como queremos que la entrada sea un poco más grande, podemos apuntar a todas las entradas y también al área de texto y darles un valor flex de 3.Esto significa que todas nuestras entradas en el área de texto intentarán ocupar tres veces el espacio disponible como nuestras etiquetas. Trabajemos ahora con las fronteras para cada uno de nuestros insumos. Justo por debajo del valor flex de 3, configura el borde. Esto tomará el mismo valor que nuestro fondo fronterizo. Podemos copiar esto, pegar esto en. Esto solo nos da un borde más ligero, más sutil para cada una de nuestras entradas. Algún radio de borde de 0.3 rems, algo de relleno para hacerlos un poco más grandes de 0.6 rems. Por defecto, con entradas de formulario HTML y áreas de texto, no hereda la fuente y el color por defecto así que tenemos que hacer es configurarlos manualmente configurando la familia de fuentes para heredar del padre y también lo mismo para el color. Como hemos visto antes, cada uno de estos componentes admin como la nueva pizza, tiene esta clase de sección admin, y luego tenemos esta cabecera de sección admin. Déjate entrar en nuestro estilo y podemos apuntar a estos. Primero, el envoltorio principal que es la sección admin. Margen de 1 rem y esto espaciará todos nuestros componentes. El color de fondo, que es un valor hexadecimal de faf1e2, y también finalmente para esta sección un radio de borde de 0.3 rems. A continuación, la sección de encabezado para cada uno de estos componentes y recuerde que estos tienen la clase de admin_section_header. Establezca el tipo de pantalla para que sea flexible. Dale un ahorro a esto. Este se ve bien y al igual que este, vamos a tener un pequeño problema pero Agregar nueva pizza. Esto no debería estar uno al lado del otro. Tenemos pizza nueva, tenemos el envoltorio, tenemos el encabezado, el formulario. Y de hecho solo necesitamos asegurarnos de que este encabezado esté cerrado así que corta el cierre de una etiqueta para el encabezado y pega esto justo después de nuestro h3. Eso ahora se ve mejor y esto ahora nos mantiene más consistentes con el resto de estas secciones. De vuelta al estilismo. Y tal vez se esté preguntando por qué exactamente hemos configurado la caja flexible cuando solo tenemos un solo elemento dentro de aquí. Bueno, esto es porque más adelante también vamos a agregar un pequeño icono sobre la derecha para doblar cada una de estas secciones fuera de vista si no lo necesitamos. Por lo tanto, como vamos a tener múltiples secciones, podemos agregar contenido de justificación para agregar espacio entre cada una de estas. Además, para mantenerlos alineados verticalmente, alinee los elementos en el centro. Después, por último, algún relleno de 1 rem que jugará en todos los lados de este título. Estamos llegando a algún lado ahora con el estilo. Esto también debería aplicarse a nuestra sección de menú. Luego, la sección final a la que agregaremos algo de estilo en este video dentro de la sección de inicio es cada uno de estos bloques de Información hasta la parte inferior. Estos tienen la clase de info_block, que puedes ver si entramos en los componentes principales, que es el App.vue. Esto está renderizando nuestra entrega y nuestros componentes históricos, así que salta a la entrega. Esto tiene la clase de bloque de información al igual que el componente de historial. Volver a nuestro info_block de estilo. El tipo de visualización de flex, la dirección flex de la columna, alinea elementos en el centro, agrega algo de relleno a cada uno de un rem, y también un color de fondo diferente para cada uno de nuestros bloques y el valor hexadecimal de faf1e2. Guardemos esto y veamos cómo se ve esto. Al navegador, podemos ver en la vista más pequeña estos se apilan verticalmente uno encima del otro. Los estiraremos más anchos. Los dos componentes están uno al lado del otro y tenemos esta dirección de flexión de columna para cada uno. Tenemos el contenido alineado en el centro, un poco de relleno y el color de fondo. Todavía hay algún otro estilo para aplicar a los componentes individuales pero agregaremos esto a medida que avanzamos por el curso. Pero ahora tenemos mucho contenido en su lugar. En la siguiente sección, agregaremos algo de JavaScript y echaremos un vistazo al uso de la API de composición VueJS. 23. Opciones O Composición?: La API de Opciones es algo con lo que puede estar familiarizado si ha construido con Vue.js en el pasado, en Vue Versión 1 o Vue Versión 2. La buena noticia está en Vue Versión 3, la API de Opciones todavía está aquí para quedarse. Pero alternativamente, tenemos un enfoque diferente que también podemos usar, que se llama la API de composición. La API de Opciones es algo con lo que puede estar familiarizado si ha construido con Vue Versión 1 o 2 en el pasado. Es una forma tradicional de construir aplicaciones Vue.js. La buena noticia está en Vue 3, no se ha ido a ningún lado. La API de Opciones se ve así. Dentro del script y export default, teníamos varias secciones como una sección de datos. Esto contenía cualquier dato de componente o estado, que se puede considerar como variables. También hay métodos. Aquí es donde podemos agregar nuestras funciones JavaScript y podemos llamarlas como las necesitemos. De las secciones que no se muestran aquí incluyen ganchos de ciclo de vida calculados, relojes y accesorios. Nuevamente, todos siguen siendo válidos para usar en Vue 3. No obstante, para este proyecto, voy a estar usando la API de composición de Vue 3. La API de composición nos permite escribir código más como JavaScript normal. Esto es como una variable regular de JavaScript, un tiempo de espera y también una función. Esto ahora se puede escribir dentro de las aplicaciones Vue.js, reemplace esto al igual que la API de opciones dentro de un valor predeterminado de exportación y luego en una función de configuración, que se resalta aquí. Cosas aquí como variables y funciones se pueden poner a disposición de la plantilla devolviéndolas abajo en la parte inferior. También vale la pena señalar que podemos usar la función de configuración junto con la API de Opciones existente. Aquí tendremos la sección de datos aprobada, pero también se puede agregar cualquier otra sección de la API de Opciones. Eso también es mucho más, como podemos organizar el código en archivos separados, y reutilizar la ruta donde sea necesario, y muchas otras cosas que usaremos según las necesitemos. Junto a JavaScript regular, también podemos hacer uso de la reactividad de Vue. Aquí importamos una ref del paquete Vue y envolvemos el valor de todas las variables con él. utiliza una ref para convertir el contenido en un objeto reactivo. decir, cualquier parte de nuestra aplicación que se base en ella cambiará si los datos internos cambian. Básicamente significa que ningún componente se mantiene actualizado con ningún cambio de datos. También volveremos a éste muy pronto. Junto con ref, también podemos importar desde el paquete Vue cosas como propiedades de computadora y también relojes, que están disponibles con la API de Opciones. Finalmente, también tenemos una forma más corta de escribir código de composición, que es la configuración del script. la izquierda está el ejemplo similar al anterior, donde tenemos una sección de configuración y devolvemos cualquier Vue que queramos usar en la plantilla o HTML. Entonces a la derecha es exactamente lo mismo usando la configuración de scripts. Agrega un atributo de configuración a nuestras etiquetas de script para acortar el código. Además, fíjate aquí que no necesitamos la sección de devoluciones porque todos los datos que queremos usar en la plantilla están disponibles automáticamente. La configuración del script será el enfoque que usemos en este proyecto de clase ya que es más limpio, más corto y además tiene un mejor rendimiento internamente. 24. El objeto y la vinculación de datos: Ahora vamos a entrar en el Newpizza.viewfile. Podemos comenzar a agregar algunos JavaScripts haciendo uso de la configuración de scripts que acabamos de ver. Podemos agregar un nuevoObjetos de pizza, que serán la estructura para todas nuestras pizzas en nuestra aplicación. Justo encima de la plantilla agregue en el lugar de etiquetas de script en los atributos de configuración. Entonces como acabamos de ver, necesitamos importar nuestra ref, e importamos esto desde el paquete view, que está en los módulos de nodo. Entonces podremos crear nuestros nuevosobjetos Pizza, los cuales se envuelven en esta ref. Esta ref va a crear un objeto reactivo que podamos usar a lo largo de nuestra aplicación y el estado se mantenga actualizado. Comencemos esto dentro de una constante o una variable llamada NewPizza, configura nuestra ref como el envoltorio. Entonces dentro podemos pasar en cualquier tipo de datos que queramos. Esto podría ser una cadena, podría ser una matriz. Pero para nuestro caso de uso, necesitamos crear un objeto que tenga todas las propiedades de Pizza. Estas propiedades consisten en el nombre Pizza, podemos decir Margherita. Pero solo por esto, voy a poner en Eg. La razón de esto es que este va a ser el estado inicial de nuestra forma. Voy a entrar en nuestro administrador, vamos a echar un vistazo y vemos este nombre. Esto va a estar vinculado a nuestro objeto. La propiedad name aquí usando V-model se vinculará a nuestro nombre. También vincularemos la descripción a la siguiente propiedad. Cuando registremos por primera vez este formulario, el texto dentro de aquí reflejará lo que vemos justo aquí. Esto solo le da al usuario un prompt exactamente lo que necesita escribir para crear nuestro NewPizza. A continuación, una descripción. Nuevamente, daremos un ejemplo de una deliciosa pizza a base de tomate cubierta con mozzarella. Separar por coma, entonces podemos agregar nuestras opciones, que va a ser una matriz. Colocar estos en una matriz nos permitirá crear diferentes opciones, como nuestro tamaño. Cada uno va a ser un objeto. Vamos a tener dos objetos, así como esto uno al lado del otro. Cada uno de estos va a tener el tamaño de la propiedad, digamos nueve pulgadas para la primera, y también un precio. Lo mismo para nuestro segundo objeto, pero este va a ser para una pizza de 12 pulgadas y también un precio. Recuerda que todos estos valores son solo valores iniciales. Todos estos valores de objeto pueden ser reemplazados por los valores de esta nueva forma de pizza. Se actualizarán antes de que los agreguemos a la base de datos. Para vincular nuestras entradas de formulario con nuestras propiedades de objeto, vamos a hacer uso del modelo. El modelo nos permite crear algo llamado enlace de datos bidireccional, que como se mencionó, significa que los valores de nuestro objeto se mostrarán dentro de las entradas del formulario. En cualquier entrada de formulario que escribamos, entonces podemos actualizar para anular estas entradas de formulario. Esto se reflejará dentro de nuestro objeto. Para ello, comencemos con el nombre. Bajar a nuestras entradas de formulario, donde escribimos el nombre en. Podemos hacer uso de v-model pasando esto como un atributo. Queremos vincular esto a nuestro objeto, que se llama NewPizza, y podemos acceder a la propiedad name, por lo que NewPizza.name. Vamos a copiar esto. Bajar al área de texto, y podemos vincularlo a la descripción. Después de la descripción, entonces tenemos opciones, y necesitamos vincularlas a cada uno de estos valores de matriz. Recuerde, las matrices comienzan en la posición cero del número de índice. Este será cero, y este será el índice número 1. Bajemos y podemos agregar estas opciones. Tenemos la talla número 1, pega esto en, newpizza.Opciones. Seleccione el primer valor con el número de índice de cero en la propiedad llamada tamaño. Copiemos esto, peguemos esto en el que tenga el ID del precio número 1, los cambios para ser precio. Entonces bajando a nuestra opción 2 en el tamaño, este es el índice número 1. Nuevamente, índice número 1 por el precio y también cambiar la propiedad objeto para que sea precio 2. Ahora bien, si guardamos esto en nuestro formulario, podemos ver todos los datos iniciales dentro de cada uno de estos y se puede ver también tenemos la opción establecida correctamente. Tenemos las nueve pulgadas de tamaño y también las 12 pulgadas también. También vea el enlace de datos bidireccional y verifique que el objeto esté actualizado desde este formulario. Ahora podemos entrar en nuestras plantillas. En cualquier lugar dentro de aquí, podemos generar el valor de NewPizza. Podemos ver esto en la parte superior. Eliminemos cualquier cosa de estas entradas. Esto ya está actualizado. Lo mismo para la descripción que esto funciona. Intentemos actualizar el precio. También nuestra segunda opción está vinculada a. Ahora podemos eliminar esto de manera segura y pasar al siguiente video. Echaremos un vistazo a los refs con más detalle y cómo podemos agregar artículos a la canasta. 25. Ref’s & agrega a la cesta: Anteriormente dentro de este nuevo componente de pizza, vimos brevemente algo llamado ref. Una ref es una envoltura para un valor. En nuestro caso, el valor es la pizza. En el próximo video, también usaremos una referencia como envoltorio o canasta, que un usuario puede agregar pizzas antes de comprar. Lo hace convirtiendo el valor en un objeto reactivo y el beneficio es que cada vez que se actualice este objeto reactivo, también se actualizarán todos los componentes que dependen todos los componentes que dependen de estos datos. Vamos a entrar en la vista de menú para comenzar a trabajar con estos y echar un vistazo a los refs con más detalle. La vista de menú fuera de la plantilla, crea nuestro script con el atributo setup. Crea nuestra importación, tal como vimos anteriormente, donde importaremos la ref desde el paquete Vue.js. También necesitamos crear una constante o una variable para nuestra canasta. Envuelva esto dentro de una balsa para hacer que el contenido reactivo y establezca el valor inicial de una matriz vacía. También necesitamos crear una función que vaya a actualizar la canasta. Llamemos a esto AddToBasket. Como mencionamos anteriormente, cuando hagamos uso de la configuración de script, esto nos permitirá acceder directamente a cualquiera de estas variables o funciones dentro de nuestra plantilla. Bajemos a nuestra plantilla y localicemos nuestro botón Agregar, asegurándonos de que estamos dentro del lado del menú. Podemos enumerar ahora para el clic usando @click y configurarlo para activar nuestra función que se llamaba AddToBasket. Comprueba que esto está funcionando. colocaremos en un registro de consola. Cualquier cadena de texto está bien. Salta a la consola. Haga clic en el botón y nuestro texto ya está actualizado. Justo antes de agregar un poco más de código a nuestra función, rápidamente quiero volver a nuestra ref y ver cómo funciona esto con más detalle. Para esto, voy a crear un objeto simple llamado user con la propiedad name y también una propiedad likes también. Quizás se esté preguntando por qué acabo de escribir un objeto de usuario no relacionado dentro de aquí. Pues bien, los contenidos de este objeto no son importantes. Lo importante a tener en cuenta aquí es que los objetos JavaScript tienen propiedades. En nuestro caso, tenemos la propiedad llamada name y la propiedad llamada likes. Recuerden antes cuando dije cuando hacemos uso de una ref, Vue.js detrás de escena convierte el contenido en su interior en un objeto reactivo. Como acabamos de ver, cualquier tipo de objeto tiene estas propiedades. Dado que nuestra canasta se convierte en un objeto detrás de escena, también se le da una propiedad de valor y esta propiedad de valor es como podemos actualizar o leer el contenido dentro. Vamos a escribir esto rápidamente y te voy a mostrar exactamente a qué nos referimos. Por ahora, solo comentaremos nuestra canasta. Vamos a crear unas canastas sabias, que no va a hacer uso de un ref. Esto sólo va a ser un objeto sencillo. Nuevamente, solo para reforzar esto, detrás de escena nuestra canasta se convierte en un objeto así y luego se le da una propiedad de valor por lo que a la hora de actualizar una ref, igual que nuestra canasta, no solo la actualizamos por el nombre de la variable como basket, también necesitamos actualizar el valor anidado en su interior. Como ejemplo, cuando llamamos a nuestra función AddToBasket, primero accedemos a nuestro nombre de variable o constante, luego al valor dentro. O podríamos usar algo como el método push para empujar un nuevo objeto. El nombre, cualquier contenido está bien, el precio. Todo esto es solo código de ejemplo, no importa tamaño de 12. Como se trata de una canasta, también necesitamos conocer la cantidad también. Para comprobar que esto funciona, comprueba que estamos actualizando el valor interior, podemos bajar a nuestra plantilla y sacar el valor de nuestra canasta. Vamos a guardar esto. A la carta. Podemos ver que tenemos la propiedad de valor que está vacía. Da click en “Plus” y no vemos que esto esté actualizado. No obstante, si actualizamos esto para hacer uso de una ref , descomente esto. Haga clic en el botón. Podemos ver que este objeto ahora es reactivo y cualquier actualización de nuestra canasta ahora se empuja a nuestra plantilla. Un punto clave a tener en cuenta aquí es cuando estamos haciendo uso de la canasta dentro de la plantilla, igual que estamos aquí, no necesitamos acceder a basket.value. Esto se hace automáticamente por nosotros. Sin embargo, como podemos ver dentro de nuestro script, cuando accedemos o actualizamos cualquiera de nuestros refs, necesitamos hacer uso de la propiedad value para actualizar o leer los datos anidados dentro. Por supuesto que no queremos sacar la canasta así. Lo que queremos hacer es bajar a nuestra sección de canasta y sacar el contenido dentro de nuestra tabla sin nuestra fila de mesa. Podemos agregar dentro del cuerpo de la mesa, colocar esto de nuevo dentro y luego podemos hacer un bucle sobre nuestra canasta con un bucle Vue.js V4. Dentro de los corchetes podemos acceder al nombre de la variable del ítem y también al número de índice en cada bucle. Esto está en canasta, y luego Vue.js, cuando el bucle también necesita una clave única. Ahora no tenemos ninguna gran clave única que podamos usar. Pero como medida temporal, podemos pasar en el número de índice. Más adelante, cuando tengamos la pizza almacenada dentro de la base de datos, actualizaremos esta clave para hacer uso del ID único para cada valor. Ahora, cada pizza dentro de la canasta se almacena dentro de la variable item. Podemos actualizar la cantidad, así item.quantity, el nombre de la pizza, este es item.name, el tamaño, item.size, y también el precio abajo en la parte inferior. Si quisiéramos, lo que simplemente podríamos hacer es agregar artículo.precio. Pero como podemos pedir varias pizzas, vamos a multiplicar este precio por la cantidad del artículo para mostrar un total por cada línea. Guardar. Haz un poco más de espacio. Ahora cada vez que agregamos una pizza nueva, la canasta se actualiza y se muestra dentro de nuestra mesa. A continuación, mejoraremos esto haciendo un bucle sobre las pizzas y agregando el nombre exacto de la pizza a la canasta, en lugar de los datos de muestra que tenemos actualmente. 26. Aplastarse de pizzas: Actualmente, como sabemos, aún no tenemos nuestra base de datos establecida para almacenar nuestras pizzas. Por ahora, como medida temporal, crearemos una ref, a la que podremos empujar nuestras pizzas. Esto nos permitirá entonces recorrer estas pizzas y mostrarlas dentro de una mesa. Para ello, entra en el archivo MenuView, y luego arriba en la parte superior crearemos una nueva constante llamada AllPizzas. AllPizzas va a estar rodeado dentro de un ref. Bueno, el valor inicial será una matriz vacía. Luego pasa a los nuevos componentes pizza.view, que se encuentra dentro del admin. Ahorra un poco de tiempo. Lo que vamos a hacer aquí es seleccionar el objeto completo de pizza. Este es el objeto demo justo aquí dentro de la ref. Copia todo, incluyendo las llaves. Estamos copiando esto porque esto nos va a dar la estructura consistente, que necesitamos para agregar nuevas pizzas a la base de datos. De vuelta a la vista del menú y dentro de la antigua matriz de pizzas, péguelas dos veces. Asegúrese de que cada uno esté separado con una coma. Vamos a cambiar esto un poco. Eliminaremos el Eg. Margherita. El segundo Pepperoni, quita el Eg. Diremos cubierto con mozzarella y pepperoni. Solo aumenta el precio para que esto sea un poco diferente. Ahora, esto se puede recorrer en bucle en la tabla del menú. Exhiben cada una de las pizzas. Ahora a la plantilla. Tener este menú y luego la mesa anidada dentro del cuerpo de la mesa. Haremos exactamente lo mismo que hicimos para la canasta donde crearemos un bucle v-for y colocaremos en los datos donde lo necesitemos. Volver a la sección de menú cuerpo de mesa v-for. Dentro de los soportes, podemos seleccionar la pizza y también el número de índice. Esto está en nuestra vieja variedad de pizzas. Entonces colocar en una clave, que va a ser el número de índice por ahora. Al igual que dijimos con la canasta, también volveremos a esto más adelante y haremos uso de la clave única que proporcionará la base de datos. Genial. Ahora, tenemos acceso a todas las pizzas y en lugar de mostrar el nombre de la pizza codificado, abre las llaves dobles y podemos acceder a nuestros objetos, que es pizza.name. La descripción, pizza.description. Digamos esto y otra vez al menú. Ahí están nuestras dos pizzas. Tenemos nuestra Margherita y el pepperoni, que coincide con nuestro ref de nuestra sección de guiones. embargo, todavía no hemos terminado con esta, porque también necesitamos agregar las opciones de pizza. Tenemos que hacer que el tamaño de la pizza y también el precio sean más dinámicos en gran parte de las opciones que tendrán para cada una de estas pizzas. Para ello, nuevamente necesitamos bajar a nuestra mesa. Aquí tenemos esta fila de tabla, que es para cada una de nuestras opciones. Necesitamos crear un bucle adicional dentro de aquí para recorrer nuestras dos opciones, así que v-for. El valor variable de opción y también lo tomaremos en el índice. Tenemos que recorrer nuestro objeto de pizza, que es el del bucle inicial. Tendremos que acceder a nuestras opciones. La clave para esta opción de paso único. Después dentro de los corchetes, podemos seleccionar el primer o el segundo valor con el número de índice. Para el primer bucle, esta seleccionará la primera opción, y el segundo bucle seleccionará la segunda opción. Para el tamaño de la opción, llaves dobles, la opción y la propiedad size incluso en el símbolo de moneda, la opción.precio. Probemos esto en el navegador. Ahora tenemos nuestro bucle creando nuestras dos opciones, y cada una tiene el tamaño único y también el precio. Bueno. Estamos haciendo buenos avances aquí, pero ahora, cuando queremos agregar cada una de estas pizzas a la canasta, también necesitamos pasar esta información de pizza a la función. Este botón que tienes aquí no solo necesitamos llamar a AddToBasket, también necesitamos agregar los corchetes y pasar en la pizza y también la opción hasta la función, donde podemos recibir estos valores, así el ítem y la opción. Ahora, en lugar de tener el nombre como cadena, podemos pasarlo en la variable name de item.name. El precio, que se almacena en la opción, esta es opción.precio. El tamaño, opción.tamaño. Probemos esto. Probemos la Margherita de nueve pulgadas. Esto se ve bien. Un Pepperoni de 12 pulgadas, todo esto parece que está funcionando perfectamente bien. A continuación, nos encargaremos de actualizar la cantidad dentro de esta canasta si se selecciona la misma pizza varias veces. 27. Comprueba si hay artículos de cesta: Por el momento, agregaremos una nueva pizza a nuestra canasta. Todo funciona bien pero empezamos a tener un problema si agregamos el mismo valor varias veces. Por ejemplo, si tratamos de agregar la pizza de nueve pulgadas más de una vez, ya tenemos esto en la parte superior lugar de aumentar la cantidad a ser dos, obtenemos una nueva línea de pedido abajo en la parte inferior. Esto es lo mismo para cualquiera de nuestras pizzas. En cambio, lo que queremos hacer en lugar de agregar una nueva línea de pedido es aumentar la cantidad cada vez. Para ello, antes de empujar nuestra nueva pizza a la canasta, primero tenemos que verificar si la nueva pizza ya existe dentro de esta canasta. Para hacer esto en la parte superior de nuestra función, podemos acceder a nuestra canasta, el valor ya que se trata de una ref, y hacer uso del método de búsqueda de JavaScript. El método find ejecutará una función para cada valor dentro de nuestra canasta. Si hay alguna pizza existente dentro de la canasta, almacenaremos esto dentro de una variable llamada pizza y luego podremos trabajar con cada pizza individualmente. Lo que queremos hacer aquí es que queremos comprobar si tanto el nombre de la pizza como el tamaño de la pizza coinciden. Recuerda que si entramos en nuestro menú como la Margherita, podemos agregar dos tamaños diferentes. Podemos tener dos nombres de pizza separados, pero estos no coinciden. También necesitamos verificar el nombre de la pizza y también el valor de la opción también. El método de búsqueda de JavaScript devolverá el primer valor, en nuestro caso, la pizza, que coincide con una determinada condición. Queremos que se vuelva verdadero si se cumple una determinada condición. En nuestro caso, queremos comprobar si el pizza.name es igual al item.name. Esto es verificar si la pizza que se encuentra actualmente en la canasta, tiene un nombre, que es igual al nombre de la pizza, que estamos tratando de agregar. Debe haber un triple igual y usando el doble ampersand también necesitamos proporcionar una segunda verificación. El segundo cheque es para averiguar si la pizza.size, esta es la pizza otra vez, que se guarda dentro de la canasta. Queremos saber si esto es igual a la opción.tamaño. Nuevamente, este es el tamaño de opción de la pizza que estamos tratando de agregar. Si ambos son un partido, esta afirmación es cierta y este método de hallazgo luego devolverá la pizza, que encontramos en la canasta. Podemos almacenar esto dentro de una constante o existe pizza y antes de ir más lejos, comprobaremos iniciando sesión esto en la consola. Registrar el valor de nuestra pizza constante existe guardar y otra vez en el navegador. Salta a la consola para que no tengamos ningún compinche de pizzas dentro del aquí, además, esto no está definido, valores diferentes también es indefinido. Pero si tratamos de hacer clic en una pizza por segunda vez, nos devuelven en la pizza, que es un partido para la canasta. Vemos que esta es una pizza de nueve pulgadas probemos con la 12, esta también funciona también vamos a probar el pepperoni. La primera vez es indefinida y si ya tenemos esto en la canasta, luego devolverá la pizza que encuentre. Con esta información, lo que podemos hacer ahora es colocar una declaración if y podemos comprobar si nuestra pizza se encuentra con esta constante. Si quiere hacer es acceder a la pizza, seleccionar la propiedad de cantidad, y aumentarla por el valor de una. Además, si esto es cierto, queremos regresar, alterar esta función ya que no queremos agregar una pizza adicional a nuestra canasta. Ahora probemos esto. Dale una recarga a esto. Nuestra primera Margherita nuestra segunda Margherita ahora aumenta la cantidad. Probemos el pepperoni. Dos líneas nuevas y un duplicado y cada vez que hago clic en un duplicado, la cantidad se incrementa por el valor de uno. A continuación, también volveremos a nuestra canasta y nos quedaremos con la cantidad sujeta al cableado nuestros botones de aumento y disminución, junto con una función para sacar una pizza de la canasta también. 28. Quitar y cambiar la cantidad: Como descubrimos en el video anterior, cuando agregamos cualquiera de nuestras pizzas a la canasta, ahora tenemos todas nuestras pizzas mostradas a la derecha. También vemos la cantidad que es el valor por defecto de uno. También tenemos estos botones para aumentar y disminuir la cantidad. Esto es con lo que vamos a trabajar ahora. Dirígete a la vista de menú y salta la sección de plantillas y desplázate hacia abajo hasta el área de la canasta. Dentro de las canastas, tenemos nuestro cuerpo de mesa, que está creando nuestro lazo para todas las pizzas. Aquí, dentro del bucle tenemos acceso al artículo por el que quieres cambiar la cantidad. Entonces aquí tenemos nuestros botones para aumentar y también disminuir los valores. Para el primero, que es la disminución, podemos agregar un oyente de clic, que luego activará una función. Pasaremos este artículo a la función y luego cambiaremos la cantidad. Dentro del botón de abrir, @click, y llamaremos a esta función disminución de la cantidad. Pasa el ítem para que sepamos qué ítem reducir y luego bajamos al segundo botón, que es aumentar. esto le llamaremos IncrementoEquidad. Nuevamente, esto también necesita acceso al ítem que queremos cambiar. Empezaremos con esta función IncrementeQuantity. Me desplazaré hacia arriba. Recuerda, si echamos un vistazo a este método de empuje aquí, podemos ver la estructura de nuestras canastas. Todo lo que tenemos que hacer es aumentar la propiedad de cantidad en el objeto. Crea una función, IncrementeQuantity, toma el ítem que se le pasa, selecciona el ítem. Solo queremos trabajar con el campo de cantidad, e incrementaremos esto por el valor de uno. A continuación, la función para disminuir la cantidad. También toma en el artículo, artículo.cantidad. Deduciré esto por el valor de uno. Esto es lo primero que tenemos que hacer para la función de disminución. Lo segundo es verificar si la cantidad es cero. Si es así, no queremos que se muestre una línea de pedido dentro la canasta con la cantidad de cero. En cambio, queremos sacar esto de la canasta. De esto podemos colocar en una sección F para comprobar si el artículo.cantidad es igual al valor de cero. Si es así, queremos sacar esto de la canasta. Si quisiéramos, podríamos colocarnos en el código dentro de aquí para hacer esto. Pero en cambio voy a subcontratar esto a una función independiente que se va a llamar RemoveFromBasket. También tendremos que tomar en el elemento que queremos eliminar y luego crear este abajo en la parte inferior, la función removeFromBasket, pasar en un el elemento que desea eliminar. Primero, necesitamos acceder a nuestras canastas completas y como se trata de un Ref, accedemos a la propiedad de valor. Entonces podemos usar el método de empalme JavaScript. Splice va a eliminar un artículo de nuestra matriz por primera persona en la posición inicial. Entonces tenemos que agarrar el número de índice de este ítem. Hagamos esto accediendo a la canasta.valor. Esta es la canasta llena. Entonces podemos agarrar el número de índice con indexof. Necesitamos conocer el número de índice de nuestro artículo. Esto es solo JavaScript normal. No tiene nada que ver con Vue js. Encontramos la posición del índice de nuestro ítem particular dentro de esta matriz separada por una coma. Solo queremos eliminar un solo artículo. Ahora, vamos a guardar esto y comprobemos que esto está funcionando. Haga clic en cualquier pizza. Si seguimos aumentándolo el valor también aumentará. Vamos a probar plus. Funciona bien. Negativo, esto bajará. Entonces una vez que lleguemos a cero, este artículo debe ser eliminado. Esta es una buena funcionalidad que se ha creado con funciones bastante pequeñas. A continuación, vamos a quedarnos dentro esta canasta y ponernos a trabajar con la actualización del total del pedido usando propiedades calculadas. 29. Propiedades computadas: Si has usado vista vestido en el pasado y has hecho uso de propiedades calculadas, la buena noticia es que están aquí para quedarse. Siguen siendo totalmente compatibles en view free, tanto al usar la API de composición también la API de opciones. Serán un caso de uso ideal para que calculemos el costo de todas las pizzas dentro de las canastas. En la parte inferior de la canasta, actualmente tenemos este valor codificado, que está disponible dentro de la vista de menú. Desplazémonos hacia abajo y encontremos esto. Esto está cerca de la parte inferior de nuestra plantilla. Podríamos usar funciones regulares para calcular el costo dentro de esta canasta, pero el problema con una función es que solo se ejecutará una vez cada vez que la llamamos. Si en cambio escribimos este cálculo dentro de una propiedad calculada, en cualquier momento los datos dentro de los cambios, en nuestro caso las cestas, su valor será recalculado para nosotros. Para ello, vaya a la parte superior del archivo. Necesitamos importar computado desde el paquete de vista. Computado actúa como envoltorio. Si desglosamos las cosas, primero podemos crear una función anónima para calcular el nivel de nuestras canastas. Abajo en la parte inferior de nuestro guión. Primero crearemos una función que no necesita un nombre en esta etapa. Lo que vamos a hacer es crear una variable llamada costo total que inicialmente estará en cero, y luego podremos recorrer todas las canastas y empujar el campo de cantidad de cada una de nuestras pizzas. Ese es el costo total. Canastas, de nuevo, esto es un let, así que usamos el bucle de valor sobre con para cada uno. Para cada uno, ejecutaremos una función para cada valor dentro las canastas y almacenaremos cada una dentro del artículo. Entonces podemos agarrar nuestra variable vacía llamada costo total. Utilice el operador plus equals para agregar un nuevo valor a nuestro costo total en cada bucle. No solo queremos simplemente agarrar el artículo.precio y empujar esto al total porque a veces podemos tener varias pizzas. Para ello, necesitamos multiplicar el artículo.cantidad por el precio. Podemos acceder a este costo total fuera de la función. Tenemos que devolver esto. Y luego fuera de la función crea una variable o constante para almacenar nuestro valor calculado. A éste le llamaremos el total. Como se mencionó, computado actuará como un envoltorio, por lo que necesitamos colocarlo dentro de nuestra función. Corta esto, pega esto dentro de computado. Ahora, como hemos calculado como envoltorio, cada vez que se actualice la cesta o cualquier otro dato dentro, esta función volverá a ejecutar y se actualizará la variable total. Este total ahora se puede usar dentro de nuestra plantilla. Salta hasta el fondo. Usted agrega el costo total en, agrega un artículo tanto como el precio ya que solo tenemos uno. Incrementar la cantidad. también ahora se duplica ya que dentro de nuestro valor calculado multiplicamos la cantidad del artículo por el precio. Todo esto ahora parece estar funcionando correctamente. Posteriormente mejoraremos esto creando un filtro de moneda reutilizable para asegurarnos de que los números se redondean correctamente. 30. Archivos Composable: En la sección de guiones de nuestro MenuView en el que hemos estado trabajando recientemente, si echamos un vistazo de arriba a abajo, esta sección está empezando a ser bastante grande. Para ayudar con esto, podemos mover los contenidos a archivos separados, podemos usar tantos de estos archivos como queramos, lo que mantendrá las cosas realmente organizadas. Estos son referidos como archivos componibles. Para mantenerlos organizados, vamos a crear una nueva carpeta llamada componibles para mantenerlos adentro. Estos vivirán directamente dentro de la fuente e irán junto a cosas como nuestros activos y nuestros componentes. Da click en la Fuente, una Nueva Carpeta, Nombre De Composables, y si quieres, podemos cambiar el nombre de esta carpeta, no necesita ser componibles, esto es solo una convención de nomenclatura. Otra convención de nomenclatura son los archivos que están dentro. Estos suelen tener el prefijo de uso, pero nuevamente, esto es completamente opcional. Para aquellos no relacionados con nuestro contenido, tendríamos archivos como UseBasket, UsePizza y UseOrders, que son todos archivos JavaScript regulares. Empecemos con un archivo llamado UseBasket. Coloca esto dentro del archivo composables, useBasket, y este tiene la extensión JavaScript. Este archivo va a exportar una función, así que export default, una función llamada useBasket. El contenido dentro de esta función será toda la funcionalidad relacionada con la canasta dentro de nuestro MenuView o cualquier otro archivo para el caso. De vuelta al MenuView, echemos un vistazo a todas las funcionalidades relacionadas con la canasta. Necesitamos la canasta, cortemos esto, peguemos esto dentro de nuestro nuevo archivo. No necesitamos las pizzas, esto va a entrar en un archivo diferente, función addToBasket, podemos tomar esto. También necesitamos el aumentoQuantity, decremento, removeFromBasket, y también el total de la canasta, que es su valor calculado, cortar todo esto y debemos simplemente dejarnos con nuestras pizzas, pegar esto en nuestro archivo componible, asegurándonos de que todo esté envuelto dentro de esta función. Como no estamos haciendo uso de nuestra ref y nuestra sección calculada dentro de aquí, también podemos traer las importaciones o copiar esto. Podemos ver que todavía estamos haciendo uso de nuestra ref dentro de este archivo, pero no pudimos eliminar computado. Luego, importa estos en la parte superior de nuestro archivo, justo fuera de la función. Ahora para hacer uso de cualquier función o cualquiera de estas variables en diferentes archivos, primero necesitamos devolver esto de esta función hacia abajo. Aún dentro de la etiqueta de cierre de nuestra función, crea nuestra sección de devoluciones y esto necesita devolver cualquiera de nuestras funciones o variables que queramos usar en otros archivos. Efectivamente necesitamos todo de aquí, necesitamos la canasta, necesitamos la función llamada addToBasket, necesitamos las dos funciones para aumentar y también disminuir los valores, necesitamos el total. Pero una cosa que en realidad no necesitamos en esta etapa es eliminarla de Basket. Esto se debe a que el único lugar al que se llama está dentro de esta función decreaseQuantity, por lo que no necesitamos llamar a esto desde ninguno de los archivos. Esto ahora agrupa todas las funciones y variables relacionadas. Recuerde, exportamos una función aquí llamada useBasket. Para acceder a los contenidos del interior, podemos ir a nuestro MenuView e importarlo a nuestro archivo. Importar, UseBasket. Usando el símbolo add, podemos saltar al nivel superior de nuestra fuente y luego saltar la carpeta componible y luego al nombre de archivo llamado useBasket. A continuación, usando la desestructuración de JavaScript, podemos almacenar todos los valores devueltos de estas funciones en variables. La canasta, las funciones de IncrementoQuantity, DecreaseQuantity, necesitamos addToBasket, y también el total. Estaba seleccionando estos de nuestra función useBasket, que importamos justo arriba. Todas estas constantes ya están disponibles para usar dentro de nuestra plantilla. Todo lo que queda por hacer es ahora guardar esto, volver a nuestro proyecto y comprobar que todo sigue funcionando correctamente. De hecho, justo antes de hacer esto, necesitamos llamar realmente a esta función para que estas estén disponibles. Por encima del proyecto, agréguelas a nuestras canastas, las funciones de aumento y disminución funcionando. Podemos eliminar estos, y también nuestro total está funcionando también. 31. ¿Qué es Firebase?: Entonces, ¿qué es exactamente Firebase y cómo podemos usarlo? Bueno, Firebase es un servicio que brinda Google para sitios web, aplicaciones y también juegos. Muchos de estos necesitan servicios como autenticación, almacenamiento, alojamiento, y también una base de datos para. Firebase proporciona todos estos en una sola aplicación. Voy a hacer uso de algunos de estos dentro de nuestro proyecto. Haremos uso de algunos de estos, incluido el Cloud Firestore, que será nuestra base de datos, que almacena nuestras pizzas y nuestros pedidos. La nube Firestore es una base de datos en tiempo real, es decir, cuando cambia alguno de nuestros datos almacenados, se notifica a la aplicación. Un caso de uso para esto podría ser si el administrador fuera a quitar una pizza, y luego el menú también se actualizaría también. Además, si tienes varias aplicaciones, tal vez tu sitio web y aplicación móvil, la base de datos podría compartirse y mantenerse sincronizada. También podemos establecer reglas y roles por razones de seguridad. Pero más sobre esto más adelante. También proporcionará nuestro sistema de autenticación, proporcionando inicio de sesión, inicio de sesión, flujo de contraseña olvidada, junto con múltiples formas para que los usuarios puedan iniciar sesión. Haremos uso de un correo electrónico y contraseña de inicio de sesión. Porque hay otros servicios disponibles como Google, Twitter, o Facebook login. Además, también hay muchos otros servicios de Firebase que agregarán como análisis, funciones en la nube y almacenamiento. Así que adelante y regístrate para obtener una cuenta si aún no lo has hecho. La cuenta gratuita es todo lo que necesitamos para probar y construir nuestro proyecto, y al siguiente, configuraremos esto y vincularemos a nuestro proyecto. 32. Configuración de Firebase: Una vez que hayas creado una cuenta y hayas iniciado sesión en Firebase, dirígete al área de la consola y verás algo que se ve así. A partir de aquí, podemos crear nuestro nuevo proyecto. Tenemos que darle el nombre a este proyecto, bueno, será Pizza Planets. Puedes llamar al tuyo solo Pizza Planet si quieres, pero esta es la tercera versión de esta clase así que voy a llamar al mío V3. Haga clic en la casilla de verificación y luego continúe. Google Analytics, voy a decir que no para este proyecto. Entonces dale a esto unos momentos para completar. Mi proyecto ya está configurado. Sigamos adelante y entonces esto nos llevará dentro de nuestro proyecto. Desde aquí podemos obtener las instrucciones para agregar Firebase a nuestra app ya sea para iOS, Android. Pero en nuestro caso, haremos clic en el enlace web. Si las cosas se ven un poco diferentes en esta etapa, no se preocupe, estos sitios web tienen la costumbre de cambiar, pero debería ser un proceso de configuración similar. Ahora necesitamos registrar nuestra app dándole un apodo a esta. Simplemente lo voy a mantener de la misma manera Pizza Planets Versión 3. No voy a configurar ningún Firebase Hosting por ahora. Registrar. Entonces una vez que esto haya terminado, nos dará algunas instrucciones para configurarlo. Lo primero que hay que hacer es que podamos usar npm para instalar esto como un paquete de módulos de nodo. Vamos a copiar este enlace, que es npm install Firebase. Cerremos el servidor. Pega esto en. Ahora tenemos algunas razones por las que hoy ha sido muy lento. Podemos simplemente cerrar esto y también reiniciar el servidor con npm run dev. Podemos confirmar que esto ha sido instalado saltando al paquete.json. Tendrán Firebase como nuestra dependencia. Volver al sitio web de Firebase. La siguiente etapa después de la instalación, es copiar algunas instrucciones. Simplemente voy a copiar esto de nuevo y echaremos un vistazo a lo que hace cada etapa en tan solo un momento. Esto nos mantendrá organizados al colocar esto en una nueva carpeta JavaScript, que se encuentra directamente dentro la carpeta fuente, crea un nuevo archivo. El Firebase.js. Pega esto en. Lo primero que hacemos es importar e inicializar las funciones de la App, que es proporcionada por Firebase. Luego tenemos el objeto de configuración de Firebase, que se llena convenientemente con toda la información de nuestra aplicación. Entonces en la parte inferior, hacemos uso de esta inicialización de las funciones de la App justo aquí. Después pasarle los detalles de configuración, lo que luego nos da una referencia a nuestra aplicación. Ahora tenemos la referencia de la app. También necesitamos una referencia a nuestra base de datos Firestore para que podamos agregar y eliminar registros. A partir de esto, también necesitamos importar algo de la biblioteca de Firebase. Arriba en la parte superior, crearemos un segundo importante donde vamos a importar algo del paquete, que es Firebase. Pero esta vez, en lugar de la aplicación de slash hacia adelante, necesitamos importar esto desde la sección de Firestore. La función que desea importar desde esta sección se llama GetFireStore. GetFirestore ahora se puede utilizar para obtener una referencia a nuestra base de datos. Para ello, pasamos en nuestra variable app. Sólo éste de aquí. Esto dentro de una constante llamada Db, que es la abreviatura de base de datos, llamada GetFireStore. Pase en nuestra app. Cuando se trabaja con una tienda de bomberos, agrupa nuestros datos en colecciones. En nuestro caso, tendremos una colección para pizzas, tendremos una colección para pedidos, y también podremos tener una para los usuarios también. Para trabajar con Colecciones será necesario importarlo también desde el paquete Firestore. Volver al principio, obtén paquete Firestore, colección de importación. Podemos usar esto para hacer referencia a nuestras colecciones pasando en dos cosas. El primero, necesitamos pasar la referencia de base de datos que haya almacenado justo arriba dentro de esta constante. Segundo, va a ser el nombre de nuestra colección, que actualmente no hemos creado todavía. A éste se le va a llamar Pizzas. Esto nos da ahora una referencia a una colección única que podemos usar para leer documentos y también agregar nuevos deseos también. Para que esto esté disponible en otros componentes, vamos a exportar esto como una constante. El nombre de la constante será DPPizza&Ref. Vamos a copiar y pegar esto en. Esta segunda referencia va a ser para nuestros pedidos. DBorder&ref. Esto hará uso de la misma base de datos, pero el nombre de colección de los pedidos. Esto nos permitirá importar estas referencias en cualquier otro componente que sean archivos. Podríamos hacer cosas como leer el contenido o agregar nuevos datos. Vamos a ver esto a continuación. El paso final para este video es decirle a Firebase que queremos usar la nube Firestore y también la autenticación. Vamos a entrar en la sección de descripción general del proyecto dentro del navegador. Podemos continuar hasta la consola. No necesitamos más datos de esta vista. Esto nos da la oportunidad de agregar varios productos a Firestore. Podemos hacer cosas como hacer un seguimiento del rendimiento. Podemos agregar análisis para nuestro caso de uso en este momento todo lo que necesitamos es autenticación y la base de datos Firestore en la nube. Empecemos con la autenticación. Empezar. Esto nos va a permitir iniciar sesión con diversos proveedores como Google y Facebook. Pero voy a hacer un sistema de correo electrónico y contraseña. Haga clic en esto habilitará el correo electrónico y la contraseña. Ahora no voy a habilitar el enlace de correo electrónico, solo lo mantendremos como un correo electrónico directo y contraseña. Esto es todo lo que tenemos que hacer por ahora. Esto está actualmente habilitado. Volver a nuestro resumen del proyecto. Se puede ver que tenemos el atajo ahora a la autenticación. A continuación agregaremos el Cloud Firestore, también aparece en la barra lateral. Crea nuestra base de datos. Comenzaremos en modo de prueba y veremos las reglas de seguridad más adelante. Pero por ahora esto nos dará acceso completo para leer y escribir en nuestra base de datos. Esta característica solo se debe permitir para pruebas, y veremos cómo podemos mejorarla más adelante. Haga clic en Siguiente. Elija una ubicación si lo desea y habilite la base de datos. Más adelante habilitaremos algunas reglas de seguridad para mantener nuestra base de datos más segura. Bueno. Ahora tenemos una configuración del modo de autenticación y también tenemos una base de datos vacía. Con esto en su lugar, a continuación, echaremos un vistazo a cómo podemos agregar algunas pizzas nuevas a esta base de datos vacía. 33. Agregación de pizzas a la base de datos: Ahora tenemos el trabajo de configuración de la manera, podemos usar el DBPizzzasRef que previamente configuró junto con nuestra referencia de pedido para trabajar con nuestra base de datos. Comenzaremos agregando las nuevas pizzas a la base de datos en los nuevos componentes de pizza. Para ello, necesitamos importar dos cosas. Así que vamos a saltar al nuevo componente de pizza, que se encuentra en la carpeta Componentes y el Admin. En la parte superior, crea nuestras declaraciones de importación donde importaremos algo llamado AddDoc, que es del nombre del paquete, que es Firebase/Firestore, lo cual tiene sentido porque se trata de una función relacionada con la base de datos. El segundo que necesitamos importar es nuestro DBPizzaRef. La ruta del archivo ha sido convenientemente poblada para nosotros. Ambos serán utilizados dentro de una nueva función para agregar nuestra pizza. Bajemos al fondo de nuestros guiones. Esto va a ser asíncrono, crea la función llamada Add. Como estamos trabajando con una base de datos y podríamos hacer que las cosas salgan mal, necesitamos colocarlo en una sección try and a catch. Catch toma en el error, que podemos almacenarlo en la variable e. Por ahora trabajaremos dentro de la sección try. Desde aquí, podemos llamar a nuestra función, que acabamos de importar llamada AddDoc. Dentro de aquí, tenemos que pasar en dos cosas. La primera es la colección a la que quieres agregar, que se almacena en nuestro DBPizzaRef. Recuerda, esto hará referencia a una colección llamada pizzas. El ítem que quieres agregar a la base de datos va a ser nuestro NewPizza, que es este objeto justo arriba. Ya que esta se almacena en una ref, necesitamos acceder al valor. Ahora podemos llamar a esta función add cuando hacemos clic en el botón Agregar. Recuerda dentro de la aplicación y la sección admin, tenemos este botón Agregar. Salta a la plantilla. Aquí estamos. Escucharemos ahora para un click. El nombre de la función add evitará el comportamiento predeterminado, lo que impedirá que la página se vuelva a cargar y pierda todos los datos o formulario y además, ya que no sabemos cuánto tiempo va a llevar esto, ya que estamos empujando algunos datos a un servidor externo, vamos a agregar wait ya que podemos esperar a que los datos vuelvan antes de pasar a la siguiente etapa. Y podemos usar esto ya que hemos marcado nuestra función como asíncrona. Justo antes de seguir adelante y probar esto y asegurarnos de que esto empuja nuestra NewPizza a la base de datos, agregaremos algún manejo de errores y también un mensaje para mostrar dentro del navegador. Este mensaje se puede almacenar dentro de una constante. Justo encima de nuestro nuevoPizza, const mensaje, guarda esto dentro de un ref, ya que estaremos actualizando esto. Inicializar esto como una cadena vacía, y volver a nuestra función add donde actualizaremos el valor de este mensaje. Como estamos haciendo uso de asincrónico, wait, cualquier código que se ejecute a continuación solo sucederá una vez que obtengamos la información de nuestra base de datos. En esta siguiente línea, sabremos si esto ha sido un éxito o si ha habido un fracaso. Como hemos envuelto esto en una sección try, sabremos que este código solo se ejecutará si hay éxito. Añadiremos el código de falla dentro del área de captura. A continuación, accede a nuestro mensaje.value, que será todo un éxito. Abre los backticks y diremos Pizza, lugar en un nombre de variable. Vamos a colocar en una variable para que podamos acceder a nuestra nueva pizza y el nombre, Newpizza.value.name ha sido agregado. Y luego si ha habido un error, salta al área de captura, accederemos a nuestro mensaje.value y pondremos esto una cadena donde hubo un error, agregue en la pizza. A continuación tenemos que dar salida a este mensaje dentro de nuestra plantilla. Voy a hacer esto en la parte inferior, justo debajo de este botón, dentro de un lapso. Pondré nuestro mensaje y lo último que hay que hacer es probar esto en el navegador. Recuerda que nuestra base de datos está actualmente vacía. Dentro de Admin, seguiremos adelante y agregaremos una Margherita. Vamos a mover el código de ejemplo. Haga clic en el botón Agregar para activar nuestra función. Ahí estamos, las cosas empiezan a quedar bien. Tenemos Pizza Margherita se ha agregado a la base de datos y se actualiza. Esto se ve prometedor. Tenemos nuestra colección de pizzas, que creamos dentro de nuestra configuración de Firebase, que es esta que acaba de estar aquí. Luego hemos hecho uso dentro NewPizza de un método llamado AddDoc, y su método AddDoc luego hizo referencia a nuestra colección, que es Pizzas, y el valor que es NewPizza.value. la base de datos, esta colección de Pizzas tiene una identificación de documento que es única y luego todo el contenido de nuestra nueva pizza. Probemos uno más, Pepperoni. Agrega esto. Ahí vamos. Sabemos documentar referencias y si damos click en esta, esta ahora es el Pepperoni. ¿Por qué no? Añadiremos una vuelta más a nuestra nueva forma de pizza. Vegetariano. Decir mozzarella, pimientos, cebollas, champiñones. Realmente no importa en esta etapa. Actualizaremos el precio, digamos ocho y 14. Agrega esto. Entonces también, hemos logrado nuestro objetivo para este video, que es empujar una nueva pizza a nuestra base de datos. Pero solo cae envolver las cosas si echamos un vistazo, este texto justo aquí, también necesitamos un poco de espacio a la izquierda del mensaje. En el archivo NewPizza, baje al fondo. Agrega una sección de estilo. Le daremos a esto una clase o span, una clase de mensaje, accederemos a esto y estableceremos algún margen a la izquierda, 1rem debería estar bien. Tenemos que añadir una pizza nueva para que podamos ver esto. Iremos por banquete de carne. Cambiar la descripción, pepperoni, salami, carne de res y jamón. Cambiar el precio. Ahí vamos. A continuación veremos cómo podemos recuperar estas pizzas la base de datos y mostrarlas dentro de nuestro menú. 34. Conseguir pizzas: Para recuperar pizzas de nuestra base de datos Firestore, Firebase proporciona una función llamada GetDocs. También como queremos hacer uso de estas pizzas tanto en el menú como en la sección admin, podemos crear un archivo composable compartido para ello. Vamos a crear un nuevo archivo en la barra lateral. En los componibles, crearemos un nuevo archivo llamado usePizzas.js. Esto seguirá un patrón similar al otro componible que creamos. Vamos a exportar una función que podemos importar a cualquier otro archivo. Exportar función predeterminada llamada usePizzas y crear el cuerpo de la función que va a contener todo el código que desea poner a disposición. En el exterior, podemos agregar nuestras importaciones en la parte superior del archivo. Necesitamos importar el ref de vue. La razón por la que necesitamos esto es porque necesitamos una constante que va a contener todas las pizzas a nivel local. Const AllPizzas es igual a un ref y esta será una variedad de todas las pizzas. Ahora para conseguir realmente las pizzas, necesitamos importar algunos artículos de Firebase. El primer paquete que necesitamos es uno mencionamos antes y que es GetDocs. Este es de firebase/firestore. Entonces también necesitamos importar la referencia que creamos en el archivo de Firebase para tener acceso a esta colección de pizzas por lo que necesitamos importar el dbPizzaRef de este archivo de Firebase. Importe el DBPizzaRef desde esta ruta de archivo. Entonces justo debajo donde todas las pizzas son constantes, crearemos una función, que va a ser la encargada recuperar nuestras pizzas de la base de datos. Esta función se marcará como asíncrona ya que tenemos que esperar a que los datos de pizza regresen antes de que podamos usar esta función llamada GetPizzas. Entonces podemos llamar a nuestro método desde arriba el cual acabamos de importar llamado getDocs, pasarlo en nuestra referencia de colección, que es dbPizzaRef. Vamos a almacenar el valor de retorno en una constante llamada docs y también esperaremos que regresen estos datos. Luego ejecuta esta función y realmente obtén la pizza de la base de datos. Tenemos un par de opciones diferentes. Podríamos activar esto manualmente llamando a GetPizzas o podemos activarlo cuando un componente se monta usando el gancho de ciclo de vida OnMounted. Desde el paquete vue, haremos esto con OnMounted. Entonces tan pronto como este código o este componente esté montado en el DOM, se llamará a OnMounted, que luego llamará a nuestra función llamada GetPizzas. Esto evita la necesidad de llamar a esta función manualmente y significa que lo hará automáticamente detrás escena tan pronto como el componente se haya cargado. Si pasamos al proyecto y saltamos a la consola, podemos probarlo haciendo un registro de consola para el valor devuelto dentro de los docs. Actualiza y aún no vemos nada dentro la consola porque este código no se importa actualmente a los componentes. El gancho de ciclo de vida OnMounted no se llama. Entonces hagamos esto pero primero, devolveremos los valores que necesitamos importar. Todo lo que necesitamos actualmente es esta referencia a AllPizzas. Comenzaremos importando esto a nuestro MenuView que está en la sección de vista. Entonces al igual que hicimos con el composable useBasket, primero necesitamos importar esto, así que importaremos usePizzas desde nuestro archivo componible, y luego usando esta estructuración importaremos nuestra referencia AllPizzas desde esta función. Const AllPizzas es igual al valor de retorno de UsePizzas. Ahora hemos visto un error ya que estamos duplicando esta referencia de AllPizzas, estamos importando esto de nuestro componible. También tenemos este código de ejemplo justo aquí. Ya no necesitamos nada de esto. Podemos eliminar esta sección. Siendo este el único código que hace uso de ref, también podemos eliminarlo del script. Si recargamos, todavía no vemos nada registrado en la consola. Esto se debe a que para que esto realmente se monte y llame a nuestra función, necesitamos entrar en el componente de menú. Seleccionamos esto, luego vemos un registro dentro de la consola. Abre este objeto y hay mucha información que se devuelve de la base de datos. Mucha de esta información en realidad no necesitamos en esta etapa, pero una cosa que nos interesa es esta propiedad doc. Abre esto, y en el interior hay una matriz que contiene cada uno de los documentos de pizza que hemos creado. Echemos un vistazo al interior. De nuevo, aquí hay mucha información. Podemos ver el documento ID. Podemos entrar en documentos y datos y desglosar los valores de los datos, incluyendo el nombre, las opciones y la descripción. Lo que podemos hacer ahora es recorrer todos los valores dentro de los docs. Desafortunadamente, no necesitamos desglosar todos estos niveles de nuestro objeto. En cambio, podemos llamar a docs como una función. Esto extraerá todos los campos que necesitamos y los hará accesibles dentro de nuestro script. Salta de nuevo a nuestro componible. Podemos mover el registro, acceder a nuestros documentos devueltos y llamarlo para cada bucle. Para cada uno, ejecutaremos una función para cada uno de nuestros valores. En mi caso, actualmente tengo cuatro pizzas almacenadas. Entonces para filtrar todos estos datos innecesarios, voy a crear un nuevo objeto con una estructura más simple, así que const pizza. Dentro de aquí podemos estructurar este nuevo objeto con solo los datos que necesitamos. Como hemos visto, cada uno de estos tiene una identificación única. Podemos ver esto si cerramos esto abajo, este ID, así que establecemos el ID. Para acceder a la información de pizza en cada bucle, también necesitamos pasar una variable a nuestra función. En el primer bucle, doc será igual a nuestra primera pizza. En el segundo bucle, esta será nuestra segunda pizza, y así sucesivamente. Accedemos a esto y seleccionamos la propiedad de identificación. Entonces necesitamos pasar los datos que habrían visto, que se almacenan dentro de los documentos, .data.value. Ahora necesitamos el acceso a todos estos campos. Como se mencionó, no necesitamos desglosar todos estos campos en su lugar, lo que podemos hacer es acceder a nuestros documentos y llamar a la función de datos. Usando el operador de propagación de JavaScript, también podemos extraer los valores que necesitamos en lugares directamente dentro de nuestro objeto de pizza junto con nuestro ID. Por último, en cada bucle, queremos llevar el valor de esta pizza a nuestra referencia de AllPizzas. Simplemente sopla este objeto, accede a AllPizzas.value, y luego usa el método JavaScript push para empujar cada una de nuestras pizzas. Esto es todo lo que ahora necesitamos. Volver a nuestro archivo de menú. Recuerda que hemos importado todas las pizzas de nuestro componible. Además, este nombre de variable también es el mismo que hemos estado usando anteriormente. Ahora si guardamos esto y recargamos, la tabla ahora está poblada con las pizzas de nuestra base de datos. Otra cosa que podemos hacer ahora ya que tenemos acceso a un ID único para cada una de nuestras pizzas es cambiar la clave única para cada valor dentro de este bucle. En lugar de hacer uso del índice, podemos acceder a nuestra pizza.id Ya no necesitamos este índice, así que solo podemos hacer referencia a nuestra pizza. Lo mismo para las opciones. Las opciones tienen que constar de dos cosas. La primera, nuevamente es la pizza.id y como la pizza tiene dos opciones, también agregaremos esto a nuestra opción.tamaño. Nuevamente, podemos mover el índice y ahí vamos, ya todo está completo. A continuación, continuaremos con un tema similar haciendo uso también de estas pizzas dentro de la sección de administración y también descubriremos cómo podemos eliminar estas pizzas de nuestra base de datos. 35. Listado de pizzas en Admin: Como descubrimos en el video anterior, si entramos en este enlace de administración, también tenemos estos componentes de menú que creamos anteriormente. Como también hicimos con el menú en el video anterior, ahora necesitamos sacar nuestros artículos de pizza de la base de datos y mostrarlos dentro del admin. Además, nos aseguraremos de que esta cruz roja, que hemos enumerado junto a cada una de nuestras pizzas, también elimine este ítem de la base de datos. Vamos a saltar a nuestro uso pizzas.jsfile. Este es el componible que configuramos en el video anterior. Necesitamos importar dos cosas adicionales desde firebase, en particular, el paquete firestore. Lo que necesitamos es algo llamado delete doc, que como suena, va a eliminar un ítem de una colección y también el doc y vamos a usar doc referirnos a cualquier documento en particular que queramos seleccionar. Entonces esto se pasa para eliminar doc para eliminarlo realmente. Vamos a crear una nueva función dentro de este objeto justo debajo de onmontado, esto será asincrónico llamado delete pizza. A esta función delete-pizza también se le va a pasar el ID de llamada. Porque claro, necesitamos saber qué pizza queremos quitar y luego podemos acceder a este doc que acabamos de importar de Firestore. Doc va a tomar en dos cosas. El primero es la base de datos de referencia de colección, que todavía tenemos almacenada dentro de DB pizzas ref y luego necesita tomar en la idea de la pizza real que queremos eliminar. Esto no es realmente responsable eliminar cualquier pizza, todo lo que estamos haciendo aquí es obtener una referencia a documentos en particular. Estrecharemos en esta localidad por colección y luego la estrechamos por la identificación. Entonces podemos usar esta referencia para pasar, para eliminar doc. A pases, podemos almacenar esto dentro de una constante, digamos pizza, y luego pasar esto para eliminar doc. Vamos a esperar esto. Esperaremos a que se complete esta operación. Entonces llamaremos a nuestro método anterior llamar get pizzas. La razón por la que queremos llamar a get pizzas una vez que se complete esto es porque necesitamos actualizar nuestra aplicación. Estamos borrando un artículo, luego llamamos get pizzas, que está justo aquí. Esto entonces va a llamar a todas las pizzas que almacenaste dentro de la base de datos, menos una que hemos eliminado. Esto luego actualizará todas las pizzas, que es nuestro ref aquí en la parte superior. Luego se devuelven todas las pizzas, documento es componible, y esto luego actualizará nuestro menú, que hemos creado a la izquierda aquí, y también actualizará el menú dentro del admin. Para usar esta función, necesitamos devolverla también de nuestra componible delete pizza, luego vamos a de nuestra componible delete pizza, abrir la barra lateral, saltar a los componentes, la sección admin, y dentro de aquí tenemos esta pizzas.vue, que es responsable de esta sección. Pizzeras.vue necesita importar las secciones que necesitamos para colocar una etiqueta de script en la configuración e importar nuestro componible, que era usar pizzas. Use pizzas devolvió ambos valores, los cuales podemos desestructurar y almacenar dentro de constantes por lo que necesitamos todas las pizzas. Eliminar pizza, que podemos recuperar llamando a la función UsePizzas. Abajo a nuestra sección de tabla donde tenemos algunos datos ficticios. Tenemos nuestra margarita en su lugar y ahora podemos usar la sección del cuerpo de la mesa para recorrer todas nuestras pizzas. V para pizza en todas las pizzas, pase en clave y ahora tenemos el ID de pizza único de la base de datos para que podamos acceder a esta. La margarita puede ser reemplazada por el nombre dinámico de pizza así pizza.name. Siendo esta la sección de administración, no necesitamos toda la información adicional como la descripción y los precios, todo lo que necesitamos ver es una referencia a cada pizza. Podemos ver esto ahora por encima de la izquierda. Cada una de estas cruces para eliminar la pizza de la base de datos se almacena dentro de este botón para que podamos agregar un oyente de clic y luego hacer referencia a nuestra función que es eliminar pizza. Esto también necesita pasar la identificación de pizza que queremos eliminar. Ahora podemos acceder a esto con pizza.id Vamos a probar esto. Vamos a quitar el banquete de carne. En cuanto hacemos esto, vemos un pequeño problema. Si echamos un vistazo a las cuatro pizzas originales que teníamos, esto está bien, las cuatro originales de nuestra base de datos pero luego si vamos a nuestro componible, hemos eliminado esto de la base de datos, pero luego hemos llamado a get pizza una vez más, que luego es obtener nuestras pizzas existentes gratuitas de la base de datos y también agregarlas a todas las pizzas. Básicamente, en lugar de reemplazar todas las pizzas, conservamos las existentes y agregamos los tres artículos adicionales. Efectivamente, esto no es algo malo el momento porque podemos ver que los tres artículos adicionales no incluyen el banquete de carne, que hemos eliminado. Eso parece estar funcionando bien. Para solucionar esto, esto es bastante simple, todo lo que tenemos que hacer justo antes de obtener nuestras nuevas pizzas es tomar nuestra referencia de todas las pizzas, su valor y restablecer esto a una matriz vacía antes de obtener nuestros nuevos documentos. Probemos esto. Refresca la página. Aquí están nuestras tres pizzas, quítate cualquiera de estas, y ahora todo esto está funcionando correctamente. En la mejora final que podemos hacer es agregar un mensaje de error si hubo un error o un problema, eliminar en la pizza, o incluso obtener las pizzas de la base de datos. Para ello, podemos crear una nueva referencia de mensaje en el archivo all pizzas. Justo debajo de todas las pizzas creamos una nueva constante para almacenar nuestro mensaje. Esta será una ref y por defecto una cadena vacía. Después dentro de las pizzas get, podemos agregar algún manejo de errores con un try y un área de captura. Coloquemos esto en la parte superior en la sección try y atrapemos. Catch tomará un error. Entonces necesitamos mover todo nuestro código dentro de la sección try. Si localizas el final de esta función, agarra todo hasta todas las pizzas.value. Corta esto dejando solo el try y el área de captura dentro de aquí y luego dentro de la sección try, pega esto de nuevo y este es el código que quieres ejecutar e intenta tener éxito. Pero si hay un error, entonces podemos entrar al área de captura y actualizar nuestro mensaje. El mensaje.value es igual a una cadena y diremos que hubo un error al buscar pizzas. Por favor, vuelva a cargar la página. Al igual que hicimos con las pizzas, también podemos actualizar el mensaje y restablecerlo para que sea una cadena vacía cada vez que ejecutemos esto. El mensaje.value vuelve a una cadena vacía. También lo mismo para nuestra segunda función que es eliminar pizza. El try-block, el bloque catch, que toma el error, recorta el código existente, corta estos y reemplaza coloca esto en el bloque try. Restablecer el mensaje, ha sido una cadena vacía, y luego actualizar el mensaje dentro del bloque catch. Es cadena b, entonces si quisieras, también podrías incluir el mensaje de error, que te devolveremos. Pero por nuestra sencillez, solo voy a crear una cadena que dice que hubo un error al eliminar la pizza. Entonces por favor inténtalo de nuevo. A continuación, para que podamos usar este mensaje dentro de nuestros componentes podemos devolver esto, volver saltar a los componentes pizzas.view, importar esto, y luego justo debajo de la sección de encabezado, crear un nuevo elemento p para mostrar nuestro mensaje dentro de las llaves dobles. Agregar clase para estilo de error. Lo que también hará como medida temporal es agregar también algún texto dentro de aquí. Cualquier texto está bien esto es solo para que podamos agregar un poco de estilo y ver cómo se ve esto sin tener un mensaje de error real. Abajo a la sección de estilo, donde podemos agregar algunos estilos a esta clase de error. En primer lugar, un color que estará en valor RGB de uno a cero para el rojo, 67, y 67, lo que nos dará este color rojo. Un borde de un píxel, una línea sólida redondea las esquinas con algún radio de borde, y luego algo de espaciado dentro y fuera con relleno y margen. Relleno 1rem y también 1rem de margen en el exterior, guardar, probar esto. Así se mostrará nuestro mensaje de error dentro de los componentes pero si fuéramos a eliminar el texto y luego dejar esto como un elemento p vacío puedo ver aquí. Al eliminar este texto de error se seguirá mostrando el borde rojo porque el elemento p siempre está ahí independientemente de si tiene algún mensaje dentro o no. Para eliminar esto, podemos agregar una instrucción v If para mostrar únicamente estos elementos si el mensaje existe. Si tenemos un mensaje y sus elementos se mostrarán, si no, se eliminará del dom y ya no veremos este borde rojo. 36. Creación de pedidos: Para crear un pedido sigue un patrón similar para crear en una nueva pizza. Vamos a entrar en la cesta composable usada, que está dentro de una carpeta componible. Abre esto y primero tenemos que importar dos cosas. Lo primero, necesitamos importar AddDoc desde el paquete Firestore, así que este es de Firebase/Firestore. Después la referencia a la colección de pedidos reales, a la que quieres empujar esto así que vamos a importar esto desde nuestro archivo de Firebase. Lo que tenemos que hacer es importar este DB órdenes ref. Ya tenemos el contenido de la canasta dentro de la matriz de canastas y esto se empuja a cuando agregamos algo de la sección de menú. A la derecha aquí está la canasta. Ahora necesitamos crear una nueva función para agregar colección más antigua dentro de la base de datos. Justo debajo de esta función aquí, vuelta a esta flecha en la parte inferior, realmente no importa. Esto será asíncrono, el nombre de la función de agregar nuevo orden y luego, lo que tenemos que hacer dentro es envolver esto en un bloque try y un catch para que pueda manejar cualquier error, pasar en el error. Lo primero que debemos considerar es que esta canasta arriba en la parte superior , esta actualmente se almacena como una matriz. Pero Firebase requiere un objeto, por lo que podemos usar el operador spread para fusionar los elementos actuales en un objeto. Vamos a entrar en la sección try y reestructuraremos nuestro orden creando un nuevo objeto. La primera propiedad a agregar se va a llamar CreatedAt, y esto hará un seguimiento del orden en el que se realizan nuestros pedidos y por lo tanto, podemos tratarlos o mostrarlos en el orden correcto en el administrador. Pero esto solo creará una nueva fecha de JavaScript, instálelo dentro de la base de datos. Entonces como se mencionó anteriormente, para tomar los contenidos de nuestra matriz, emerger estos en nuestro orden para crear una propiedad de pizza, que a su vez será un objeto donde vamos a fusionar en las propiedades de nuestra canasta y como esta es una referencia, necesitamos acceder al valor justo después del pedido. Aquí es ahora donde vamos a hacer uso del método AddDoc de Firestore para empujar a una colección en particular. Una colección es nuestra referencia de pedidos DB que acabamos de importar. Llame al método AddDoc, que toma en el primer parámetro de referencia de auditoría DB, que es una referencia a nuestra colección más antigua y luego vamos empujar este orden en particular a esta colección. Una vez que esto se haya hecho con éxito, esperaremos que termine esta operación y luego podremos restablecer el valor de nuestra canasta para que sea una matriz vacía. Esto limpiará cualquier pizza de la canasta, para que el usuario pueda comenzar de nuevo. Esto es todo lo que necesitamos ahora para la sección try y mantener al usuario actualizado, crearemos una nueva variable para mantener un mensaje. El mensaje predeterminado va a ser algo así como que tu cesta está vacía, así que podemos ver esto o no tenemos pizzas encima en el lado derecho, así que const el texto de la cesta, envuelve esto en una ref, con el texto de tu cesta está vacío. Este será el valor predeterminado y podemos actualizarlo dependiendo de si el pedido se agregó correctamente o no, bajar a la función. Vamos a entrar en la sección try y en la parte inferior accederemos a la cesta text.value, y actualizaremos esto para que sean nuevas cadenas, algo así como gracias, tu pedido ha sido realizado. la otra sección, y al igual que hemos visto anteriormente, también puedes incorporar el mensaje de error si quieres, pero por simplicidad, solo voy a actualizar el texto de la cesta para que sea una nueva cadena, que será igual a que hubo un error al hacer tu pedido. Voy a decir por favor inténtalo de nuevo. Podemos llamar a esto desde nuestros componentes. Necesitamos devolver nuestra llamada a la función y también necesitamos devolver el texto de la cesta que podamos mostrarlo dentro de los componentes. medida que ordena el texto la cesta y la canasta se muestra dentro de la vista del menú, así que dirígete aquí, y ahora podemos importarlas desde nuestro componible. Aquí ya tenemos una referencia a nuestra cesta de uso composable, por lo que podemos saltar entre corchetes y también importar texto de cesta a lo largo de lado agregar nuevo pedido. Empecemos con agregar nuevo orden, que podemos activar desde nuestro botón. Bajar al div de canasta, y abajo en la parte inferior tenemos este botón de orden de lugar, esto ahora para un click, lo que activará nuestra función. Ahora el paso final es agregar el texto de la cesta y recordar por defecto dice que tu cesta está vacía, así que no queremos mostrar esto si ya son nuestros artículos dentro la canasta y para esta misma renderización condicional nos ayudará. Vamos a saltar hasta la parte superior de la sección de canasta, justo debajo del encabezado. Vamos a crear secciones div que contengan esto y dentro haremos uso de v-if, para agregar nuestro renderizado condicional donde queremos verificar si la canasta, la longitud es mayor que cero, es decir, tenemos algunos artículos dentro de la canasta, así que si esto es cierto cortaremos la sección div de cierre y luego bajaremos hasta el final, justo debajo de nuestros botones hacen orden, cerraremos esto. Ya puedes ver si vas a la sección de canasta, no tenemos ninguno de estos botones ni el total del pedido. Pero todo esto creará un nuevo div, que es la sección v-else y esta sección solo se mostrará dentro del navegador si no hay elementos dentro de la canasta, que es el estado actual. Pero esto colocará dentro de las llaves dobles, hecho pondremos un elemento p para empezar. Voy a poner el texto de la cesta y estamos viendo errores vamos a echar un vistazo lo que es esto. No tenemos v-if adyacente así esta es la sección v-l y esta debería ser la v-if. Solo tenemos esta sección div extra la cual podemos eliminar, asegúrate de que esto sea correcto. Tenemos este div, la etiqueta de apertura, todos los contenidos, la sección de cierre, v-else. También necesitamos mover este div de cierre de antes de esto todo se ve bien ahora solo se asegura de que después de la sección v-l, tenemos dos divs de cierre adicionales, así que libres en una fila. Luego arriba en la parte superior del h3, el div, y luego la mesa. Ahora deberíamos ver dentro del navegador tenemos el texto predeterminado de tu cesta está vacío, clic en cualquier artículo y ahora la longitud de la cesta es mayor que cero. Por lo tanto, podemos exhibir nuestra mesa. Ahora agreguemos algunos artículos más a nuestras canastas y podemos probar haciendo clic en el botón “Realizar pedido” , esto se ve bien. Tenemos el mensaje funky, pasa a la consola de Firebase. Esto es Console.firebase.google.com. My Pizza Planet V3 en la base de datos. Ahora tenemos la colección más antigua, tendríamos una identificación de pedido, esto se ve bien. Tenemos una Margherita de 9 pulgadas y dos de 12 pulgadas. Probemos uno más de 12 pulgadas de Pepperoni y Margherita, haga su pedido. Bien, todo está funcionando correctamente y siguiente, vamos a buscar estos pedidos de la base de datos y mostrarlos dentro del admin. 37. Pedidos de búsqueda: Ahora podemos realizar pedidos con éxito y agregarlos a nuestra base de datos. Ahora tenemos la tarea de recuperar estos pedidos de la base de datos para que podamos utilizarlos dentro de nuestro proyecto, y en particular la sección admin. Anteriormente, creamos una sección de órdenes actuales abajo en la parte inferior. Vamos a recuperar estos de la base de datos, bucle sobre estos y colocarlos dentro de esta tabla. Para mantener las cosas organizadas, crea un nuevo componible dentro de la carpeta Composables. Este se va a llamar UseOrders. Como siempre, necesitamos exportar una función predeterminada, useOrders y colocar el código dentro de allí. Para comenzar, necesitamos tener una constante para almacenar todos nuestros pedidos dentro. esto lo llamaremos AllOrders. También haremos uso de ref que va a rodear nuestra matriz. Inicializaremos esto como una matriz vacía y luego necesitamos importar esta ref desde el paquete view. También necesitamos una función que va a recuperar estos elementos la base de datos y empujarlos a nuestro AllOrders ref. Crearemos una nueva función asíncrona, All GetOrders. Podríamos hacer algo similar que hemos usado en el pasado. Si echamos un vistazo, nuestro componible, que se usóPizzas. Dentro de aquí, lo que hemos hecho en el pasado es que hemos recuperado nuestros documentos con GetDocs. Tenemos esta función llamada GetPizzas. Este es un poco más sencillo porque todo lo que hacemos debemos llamar a nuestro método GetDocs, y pasar en una referencia a toda la colección de pizzas. Si quisiéramos, podríamos hacer exactamente lo mismo pasando una referencia a nuestras órdenes. Pero para este caso de uso, recuerda que en el video anterior, también empujamos un nuevo orden a la base de datos, que incluía una propiedad llamada CreateDat. Cuando nos tiran en las pizzas de colección AllPizzas que no estaban en ningún orden en particular. Aquí es donde esto funciona un poco diferente a AllPizzas. Queremos asegurarnos de que estamos sacando las órdenes en un orden particular basado en los datos en los que fueron creados. Volver a UseOrders. Para ello, necesitamos hacer uso de algo llamado query. Tenemos que importar esto. Consulta de importación. Esto es del paquete firebase slash firestore. Desde nuestro archivo firebase.js también será necesario importar esta referencia a AllOrders. Ahora volvemos a nuestra función GetOrders, vamos a hacer uso de esta consulta que acabamos de importar. Consulta. Lo que tenemos que hacer aquí es que tenemos que pasarlo en tres cosas. El primero es una referencia a nuestra colección, que es dBordersRef. Entonces también podemos pasar parámetros de búsqueda adicionales. En nuestro caso va a ser ordenadoPor. ORDerby. Este es también un método firebase que va a ordenar los contenidos que estamos sacando de nuestra base de datos por un campo en particular. Si todo lo que podemos usar esto, también necesitamos importarlo. Después pasamos dentro del nombre del campo, por el cual quieres ordenar esto. En nuestro caso, como podemos ver cuando creamos un nuevo orden, esta propiedad se llama CreateDat. Agarremos esto, peguemos esto y luego almacenemos esta referencia dentro de una constante llamada QueryData. De aquí en adelante, lo que hacemos es bastante parecido a cuando recuperamos las pizzas. Necesitamos hacer uso de GetDocs. Necesitamos luego recorrer estos documentos, y luego empujarlos a nuestras constantes. Con esto en mente, copiaremos toda esta sección. Justo encima del bloque catch copiará los corchetes. Estos son los corchetes para cada bucle hasta nuestros documentos. Copia esto, pega esto justo debajo de nuestros datos de consulta. Nuevamente, podemos hacer uso de muchos de estos datos. Podemos mantener este nombre constante. Podemos buscar nuestros GetDocs. Todo lo que necesitamos hacer en lugar de buscar directamente AllPizzas o AllOrdersRef, vamos a pasar nuestros QueryData filtrados, luego recorreremos cada uno de estos documentos en lugar de crear una pizza estructuraremos un nuevo pedido. El id es accesible exactamente de la misma manera ya que cualquiera de estos documentos regresa de firebase con la misma estructura. También podemos fusionar en los datos del documento, que son todos los campos de AllOrder, como AllPizzas, y nuestras fechas CreateAt. La diferencia final es esta línea aquí, en lugar de empujar a AllPizzas, empujamos a AllOrders. Empujaremos AllOrder en lugar de la pizza. Le daremos una prueba antes de colocarlo dentro de nuestros componentes, justo debajo de nuestros corchetes de cierre for loop, colocar en un registro de consola o AllOrders, sin valor. Pero este registro de consola para ejecutar realmente, necesitamos importar este componible en los componentes requeridos. Esta será la vista de puntos AllOrders, que está dentro de los componentes. Después dentro de la carpeta admin, abre AllOrders. Actualmente no tenemos guión. Crear un script, configurar, importar nuestro componible, que es useOrders. Luego usando la estructuración podemos importar nuestros AllOrders, que no estoy seguro de que hayamos regresado realmente, así que echaremos un vistazo a eso en solo un segundo. Llame a nuestra función UseOrders. Tan solo regresa. Necesitamos devolver todos los pedidos para hacer uso de este botón dentro de nuestra función. Devolver TodosPedidos. Ahora deberían ejecutar nuestro registro de consola. Entra en la sección de administración. Abre la consola. Actualmente no vemos nada dentro de aquí ya que no hemos llamado a nuestra función GetOrders. Lo que haremos, simplemente soplaremos nuestra función es que también la importaremos o montaremos. Ejecutaremos nuestra función llamada getOrders tan pronto como se monte este componente. Esto también necesita ser importado en la parte superior. También necesitamos importar GetDocs desde Firestore. Vamos a darle otra oportunidad a esto. Abre el registro de la consola en el destino donde podemos ver que tenemos una matriz con dos órdenes separadas. Estos están estructurados exactamente como nosotros creamos. Dentro de este orden aquí tenemos el id. luego fusionamos en el resto de los datos del documento, que era el objeto pizzas y también creadoAT. Ya casi terminamos con este video, lo siguiente que vamos a hacer solo para redondear las cosas, es envolver nuestro código dentro de un bloque try and a catch. Salta a la función GetOrders. Toma el contenido completo del registro de la consola de datos totales de consulta. Colóquelo, intente y también atrapar. La captura toma por error. Después pegando el contenido dentro de la sección try. Sabemos que esto está funcionando así que también podemos eliminar este registro de la consola. Dejaremos éste ahí. aparecer en el siguiente video, continuaremos con nuestros pedidos y recorremos estos y los colocaremos dentro de la vista de administración. 38. Colocar sobre pedidos: Ahora sabemos que podemos recuperar con éxito los pedidos de Firebase y almacenarlos dentro de nuestra variable AllOrders. Los hemos importado dentro del archivo orders.view, y podemos hacer uso de estos para recorrer y mostrar esto dentro de la tabla. Esta es la tabla que ves dentro la vista de administración abajo en la parte inferior. Al igual que hicimos con las pizzas anteriores, podemos recorrer todos estos datos y mostrar los valores correctos. Lo primero dentro de los pedidos actuales, necesitamos cambiar este valor codificado duro de cinco. Podemos obtener el valor real con AllOrders.length. Actualmente sabemos que tenemos dos pedidos, así que esto se ve bien. Después tener los encabezamientos de la mesa. No necesitamos hacer un bucle en esta sección porque no queremos encabezados duplicados, pero lo que sí tenemos que hacer es crear un bucle para ambas siguientes dos filas adicionales. La primera fila con el número de pedido, y la segunda fila con los detalles de la pizza. Para ello, crearemos un envoltorio adicional llamado template. Recorta ambas filas de la tabla. Podemos pasar en un elemento llamado template, pegarlos de nuevo, y ahora podemos hacer uso de esta plantilla para agregar el bucle dos. La plantilla agregará un envoltorio a esta sección, pero no agregará ningún HTML adicional, por lo que efectivamente es un envoltorio invisible. Colocar en bucle con v-for, ordenar en AllOrders. Necesitamos una llave. Sabemos que tenemos una clave única para cada pedido almacenado dentro del ID. Esto es order.id También podemos hacer uso de este order.id en lugar de este número de pedido. Entonces podemos bajar a nuestra información de pizza que se almacena dentro de esta fila. Sin embargo, recuerda que para cada pedido no solo tenemos una sola pizza, por lo que necesitamos crear un bucle adicional para recorrer cada una de las pizzas dentro de nuestro pedido. Por ejemplo, actualmente estamos recorriendo este primer pedido aquí. Luego necesitamos recorrer orders.pizzas para acceder a todos los valores dentro y mostrarlos como datos de tabla. v-for, y diremos el artículo del pedido en orden. pedido es el OrderItem completo, que tienes desde el primer bucle, pero queremos acceder a las pizzas. Podemos ver si pasamos a la consola y saltamos a las pizzas, no tenemos la identificación de pizza guardada para cada una de estas. Pero cada nombre y tamaño de pizza también es único, por lo que podemos crear una clave a partir de esto. Diremos el orderItem.name. Veremos OderItem.size. Podemos acceder al OrderItem en las propiedades de la pizza como nombre, tamaño, cantidad y precio. El primero es el nombre, el segundo es el tamaño, así que orderItem.Size, cantidad. Depende de ti cómo quieres manejar este precio para exhibirlo dentro de la tabla de administración. Si quisieras, antes que nada podrías intentar dar salida al pedido.Precio. Si entramos en el admin y luego refrescamos, podremos ver nuestra estructura. Tenemos el número de pedido, el nombre de la pizza, el tamaño, la cantidad y el precio se mostrará como un solo precio de una pizza. Si quisieras, tal como hemos descrito aquí donde dijimos que este es el total. Voy a multiplicar el precio por la cantidad. Multipliquemos con la estrella por el pedido.Cantidad. Este es ahora el total para cada una de estas líneas. A continuación, lo que vamos a hacer es volver a estos pedidos, y veremos cómo podemos eliminar elementos nuestra base de datos usando esta cruz roja. 39. Eliminar pedidos: A continuación nos centraremos en cómo eliminar los pedidos. Si pasamos al archivo componible UsePizzas, este utiliza el mismo proceso que usamos antes cuando eliminamos las pizzas. Teníamos esta función llamada delete pizza, que tomó un id, borramos cualquier mensaje de error existente, luego almacenamos una referencia de documento accediendo a nuestra colección, y también el id. Llamamos a un método llamado deleteDoc que tomó en la pizza que acabamos de hacer referencia, y luego finalmente llamamos getPizzas, que tiró todas las demás pizzas que todavía estaban disponibles. Así que para mantener las cosas bonitas y simples, copiaremos sobre toda esta función y luego entraremos en el archivo de uso más antiguo y lo pegaremos. Por supuesto, necesitamos hacer un par de pequeños cambios que llamaremos a esta orden de eliminación. Nuevamente, esto seguirá necesitando que se le pase una identificación de pedido. También aclararemos cualquier mensaje existente. Esto será const order, este será el dBordersRef, y eliminaremos este orden. GetOrders y en la llamada de función este debe coincidir con el que tienes justo arriba aquí. Entonces podemos cambiar el mensaje, hubo un error al eliminar el pedido. Entonces esto también necesitará alguna importación adicional, necesitamos tirar en nuestro doc. Necesitamos sacar DeleteDoc, y también tendremos que crear este mensaje también, así que saltemos a nuestras importaciones, y desde Firestore, necesitamos hacer referencia a nuestro documento, y también eliminar doc. Ya que estamos tratando con nuestras órdenes, ya tenemos el impulso de órdenes justo aquí, así que eso está completamente bien. Entonces tenemos el mensaje. Necesitamos entonces crear esto como un mensaje ref, const es igual a una ref, que inicialmente configuraremos para que sea una cadena vacía. Ya tenemos esto importado, así que esto está bien. Entonces necesitamos devolver algunos valores de vuelta de este componible hacia abajo a la sección de retorno. Volveremos de nuevo, eliminaría todo el método y también el mensaje para mostrar dentro de los componentes. Luego vamos a ir a nuestros componentes a la carpeta admin y a los pedidos, el orders.view, donde luego podemos crear algunas importaciones. Ya estamos importando nuestro archivo de pedidos de uso, por lo que luego podemos desestructurar, eliminar pedido y también nuestro mensaje. En primer lugar, llamaremos a eliminar orden si echamos un vistazo a la sección de administración y luego bajamos. Entonces todos sí recordamos que cada uno de estos números de orden tiene esta pequeña cruz, que es un botón, y esto va a llamar a nuestro método, al que podemos pasar el id de pedido. Este es el botón justo aquí. La clase de btn remove. Escuchamos ahora un click, al que llamaremos delete order, y delete order va a tomar en el id de orden, que vamos a pasar a esta función. Voy a necesitar tomar esto de nuestro bucle así que tenemos orden el id que ya has usado. Podemos simplemente poner esto dentro de los corchetes, y esto se pasará a nuestra función. Vamos a darle una oportunidad a esto. En el proyecto. Actualmente solo tenemos dos pedidos dentro de aquí. Intentaremos eliminar esta. Vemos que esto salta a ser tres órdenes ahora, pero necesitamos actualizarnos actualmente para luego ver alguna actualización. Pero esto está bien por ahora, volveremos a esto en el futuro y mejoraremos esto agregando nuestra funcionalidad en tiempo real de nuestra base de datos. Esto significará que en cuanto ocurran cambios en la base de datos, nuestra aplicación se actualiza con los nuevos valores. Por último, recuerda que también importamos este mensaje en la parte superior. Lo que podemos hacer es mostrar esto justo debajo nuestro encabezado dentro del elemento P. No solo necesitamos generar el mensaje dentro de aquí, sino que también necesitamos agregar algo de renderizado condicional. No queremos que este mensaje se muestre siempre ni ocupe ningún espacio que se encuentre actualmente. Si echamos un vistazo y eliminamos esto y guardamos, puedes ver si comentamos esto y presionamos “Guardar”, esta sección ocupará algo de espacio independientemente de si hay un mensaje o no. Entonces, qué haremos para mostrar esto solo si hay un mensaje, colocando la sección v if para mostrar solo si hay un mensaje en su lugar, y para el estilo, también agregaremos la clase de error. 40. Muestra y oculta bloques de administración: Dentro de la vista de administración puede verse bien en este momento pero imagina si nuestra aplicación era mucho más grande y teníamos muchas más pizzas en el menú o muchos pedidos. Esta página podría llegar a ser muy larga. Para ayudar con esto, lo que ahora vamos a hacer es mostrar y ocultar cada una de estas secciones. Hace que la página sea mucho más pequeña y no necesitamos leer toda esta información. Para ello, lo que vamos a hacer es crear una variable local en cada uno de estos componentes de administración gratuitos, que luego se alternará con el texto de mostrar y ocultar. Para comenzar salta a la barra lateral. Los componentes, el administrador y la nueva pizza. Bueno, crearemos una nueva constante local llamada show NewPizza. Establece esto igual a ref y configura nuestra ref, que será igual al valor de true. Mostraremos esto por defecto. Esto será visible dentro del administrador y luego una vez que un usuario haga clic en esto, esto se alternará para que sea falso. Esto lo haremos dentro de nuestras plantillas y en la sección de encabezado justo debajo de nuestro título, coloca dentro de los pequeños elementos. Dentro de aquí queremos mostrarte el texto de mostrar u ocultar. También podemos renderizar condicionalmente esta sección dentro de las llaves dobles. Lo que podemos hacer es que podemos decir si mostrar nuevoPizza es igual a dos, mostramos el texto de ocultar. Si no es vamos a decir show. Actualmente, esto se establece en true así que veremos el texto de hide up en la parte superior. Podemos agregar la clase de TogkleBtn. Escuche un clic cuando haga clic. Todo lo que queremos hacer dentro de aquí es buscar su NuevoPizza sea igual a opuesto de lo que es el valor actual . Probemos esto. Haga clic en ocultar. Esto ahora alternará y luego podremos usar nuestra variable show NewPizza para mostrar y ocultar esta sección completa. La sección que queremos mostrar y ocultar es la forma. Todavía podemos mantener la cabeza en su lugar, que tiene el botón y también el título. Dentro del formulario, agrega v-show que solo mostrará estos contenidos si el valor de show newPizza es igual a dos. Actualmente no está alternando hacia atrás. Intentemos refrescarnos. Eso parece funcionar bien. No estoy muy seguro de lo que pasó ahí. Ahora podemos replicar esta sección en los pedidos y también en el menú. Vamos a saltar a las órdenes. Importa nuestra ref vue. Crear una variable local. Este puede ser órdenes de espectáculo. El valor inicial de true. De hecho, lo que acabaremos de hacer aquí es copiar sobre la sección NewPizza que creamos, así que la pequeña sección completa. Trae esto para que sea consistente. Coloca esto justo debajo de nuestros pedidos actuales, encabezado Nivel 3, esta misma clase. Esta vez, todo lo que queremos hacer es cambiar esto para que sea mostrar órdenes. Cambia esto en todas las demás secciones. Entonces queremos mostrar y escondernos. Nuestra mesa se mostraría igual a mostrar órdenes. Vamos a darle una oportunidad a esto. Se puede ocultar. Esto se ha ido. Entonces show revela esta sección. Por último, la sección del menú, que está en las pizzas o vue. También necesitamos importar ref vue. Nuestra variable local llamada ShowMenu, el valor inicial de true, y luego al igual que antes, debajo de nuestro encabezado Nivel 3, necesitamos volver a copiar esta pequeña sección, pegarla y luego reemplazar todas nuestras variables con ShowMenu. Por último, agrega v-show a nuestra mesa. Probemos esto. El menú, ocultar y mostrar. Tan solo como un toque final rápido. Si pasamos el cursor sobre este botón, podemos alternar este para que sea un puntero. Tenemos una clase de TogkleBtn para cada una de estas secciones. Como usamos esto en múltiples componentes, entra en nuestros activos y la clase main.css de TogkleBTN. Estableceremos el cursor para que sea un puntero. Ahí vamos. Esto ahora funciona para nuestras tres secciones. 41. La función de registro: Este proyecto va a utilizar la autenticación de Firebase para administrar cuentas de usuario y permitirles registrarse e iniciar sesión. Si entramos en la consola de Firebase y en la sección Visión general del proyecto, deberías ver justo debajo tenemos nuestra autenticación y nuestra configuración de accesos directos de Firestore Database. Esto se debe a que en los primeros videos ya los habilitamos en nuestro proyecto. Pero si actualmente no tienes configuración de autenticación, todo lo que necesitas hacer es bajar a la sección de todos los productos y agregarla con este enlace de autenticación. Como el mío ya está habilitado, voy a volver al proyecto para configurar esto. Mantengamos las cosas organizadas. Vamos a crear un nuevo componible dentro de la carpeta componibles, un nuevo archivo. Este va a ser useAuth.js. Luego, al igual que con todos los demás componibles, exportaremos una función predeterminada. Este es UseAuth. Después agregaremos una declaración de retorno abajo en la parte inferior antes de que nos olvidemos. Dado que actualmente no tenemos ningún usuario en nuestro proyecto, tendría sentido que la primera función que agreguemos sea crear un nuevo usuario. Para ello, necesitamos importar algunas funciones del paquete de autenticación Firebase de Firestore. Por encima de nuestra función, vamos a hacer estas importaciones ahora. Lo que necesitamos importar es algo que se llama GetAuth. También para crear un nuevo usuario, necesitamos importar un método llamado create user con correo electrónico y contraseña. Todo esto es caso de camello. Después de la primera palabra se asegura de que cada palabra siguiente comience con una letra mayúscula. Vamos a importar esto desde Firebase/Auth. A continuación haremos uso de esta importación de GetAuth, que va a inicializar la autenticación de Firebase. Entonces comenzaremos a hacer referencia a esto dentro de una variable. Salta a nuestra función. Llama a esta auth, que es igual a GetAuth. Dado que este es nuestro método, necesitamos llamar a esto con los corchetes, la siguiente función de autenticación, que va a crear un nuevo usuario. Esto va a ser asincrónico llamado registro. Cuando nos registramos, ya que estamos creando un usuario con correo electrónico y contraseña, también necesitamos pases a esta función cuando la llamamos. Vamos a echar un vistazo a cómo hacer esto pronto dentro del cuerpo de la función o manejo de errores. Crea un try y un área de captura, pasando el error. Entonces dentro de la sección try es donde vamos a llamar a la función create user with email and password, que acabamos de importar. Esperemos el valor de retorno. Crear usuario con correo electrónico y contraseña. Esto va a tomar en tres cosas separadas. El primero es una referencia a la corriente de instancia, que es la que configuramos en la parte superior. También necesita tomar en el correo electrónico y también la contraseña. Aquí estamos. También para almacenar cualquier mensaje de error, podemos crear una nueva variable reactiva. Para esto, primero necesitamos importar ref desde vista y crear nuestra constante justo debajo de dentro la función llamada errorMessage. Entonces configura nuestro ref, que va a ser inicialmente una cadena vacía. Ahí estamos. Si esta sección es ahora exitosa, si el área de prueba está funcionando bien, entonces podemos borrar cualquier mensaje existente. Reiniciaremos el ErrorMessage.value para que vuelva a ser una cadena vacía. Entonces dentro de la sección de error, también podemos actualizar este mensaje de error también. Si estamos haciendo algo como registrar a un usuario, no solo queremos devolver un mensaje de error genérico, como “hubo un error, hubo un problema al iniciar sesión ” o algo así. Tendría sentido ser un poco más descriptivo sobre cuál es el error. Es posible que no escriba una contraseña que sea lo suficientemente larga, puede que no tenga los caracteres correctos, es posible que el correo electrónico ya esté en uso. Para ello, necesitamos acceder a nuestro error, que se pasa al área de captura. Tenemos una propiedad llamada código. Este código es una cadena de texto que es igual a un mensaje de error, y dos comunes que Firebase proporciona es una cadena llamada auth/email ya en uso. Se ve así. Es autor/correo electrónico ya en uso, con guiones entre cada una de estas palabras. Además, otro útil es auth/weak-password. Estos serán mensajes útiles para pasar de nuevo al usuario. Pero primero, tenemos que asegurarnos de que podemos detectar cuál de estos se está generando dentro de nuestro error. Esto lo podemos colocar en una sentencia if-else, podemos colocar en una sentencia switch, lo que prefieras. Voy a ir por el interruptor. Podemos agregar a esto más adelante si queremos acceder al error, que se pasa a nuestro objeto catch, entonces podemos acceder al código. Entonces podemos comenzar a construir nuestros casos individuales. El primero, comprobaremos esta cadena justo aquí. Pega esto en. Si esto es cierto, si se trata de una coincidencia, queremos establecer el errorMessage.value. Para ser un poco más descriptivo, diremos algo así como un usuario con ese correo electrónico ya existe, por favor ingresa. Si esto es cierto, entonces podemos romper con estas declaraciones de cambio. No necesitamos ir más abajo otro código. El segundo caso es igual a nuestra segunda cadena, que teníamos abajo aquí abajo. Vamos a mover esto. Pega esto como nuestro caso. Si el usuario ingresa una contraseña débil, esta será un errorMessage.Value. Actualizaremos esta variable para decir que la contraseña debe tener al menos seis caracteres de longitud. Entonces salimos de esto de esto si éste es cierto. Por último, con la sentencia switch, también deberíamos agregar un mensaje predeterminado abajo en la parte inferior. Esto es para si alguno de los casos anteriores no coincide, entonces vuelva a la sección predeterminada, que volverá a actualizar el errorMessage.value. Este puede ser un poco más genérico. Vamos a decir, perdón, hubo un error inesperado. Esto es todo lo que necesitamos en nuestra función de registro por ahora. Lo último que hay que hacer es devolver nuestra función de registro y también nuestro mensaje de error. Ambos ahora van a estar disponibles para llamar desde nuestros componentes. Lo haremos a continuación cuando creamos el formulario de inicio de sesión. 42. Creación de la forma de inicio de sesión: Genial con nuestra funcionalidad de registro ahora funcionando, también necesitamos un formulario para capturar la información del usuario. Para ello, esta forma va a ser de doble propósito. Permitirá al usuario iniciar sesión y también registrarse para crear un nuevo usuario. Para ello saltemos a nuestra barra lateral y podremos crear nuestros nuevos componentes. Salta a los componentes, y este es signin.vue. Primero, crearemos la sección de script que hará uso de la configuración. En la parte superior, importaremos nuestro uso de composable, que creamos en el video anterior y configuraremos este igual a @, que es la raíz de nuestra fuente, composable useAuth. Agarra nuestras variables que exportamos en la primera es registrarse. También necesitamos nuestro mensaje de error. Agarra estos de lo anterior, función useAuth. Esto solo tiene que ser de, ahí vamos. También una variable de datos de formulario para almacenar el correo electrónico y la contraseña que ingresa el usuario. vincularemos a nuestro formulario usando v-bind. A este se le llama los datos del usuario. También necesitaremos importar el ref del paquete vue. Configura esto como un objeto, que simplemente va a contener el correo electrónico y también la contraseña. Por defecto, ambos estarán vacíos ya que el usuario no ha ingresado ningún valor. Luego importa nuestro ref de vue. Abajo al área de plantilla para crear el formulario. Dado que este va a ser un modal emergente que podamos mostrar y ocultar usando CSS, sí necesitamos crear un par de envoltorios para habilitarlo. El primero será un div con la clase de modal, que es el wrapper principal. Entonces también anidado dentro creará un segundo div con la clase de modal_content. Este modal se cambiará dentro de la cabecera. Lo que haremos pronto es crear dentro del encabezado un enlace sobre la parte superior, que luego aparecerá nuestro modal de todos estos contenidos. Después dentro del modal, también queremos crear una pequeña cruz en la esquina, que luego cerrará este modelo. El cierre será un lapso y la clase para nuestro estilo de close_modal. El cierre será una entidad HTML, que es el ampersand, el hash. Después 10060 y un punto y coma. Un elemento p abajo, este va a ser para el texto así que favor de iniciar sesión para continuar. Agrega una clase para nuestro estilo de modal_text. Luego, debajo de esto crearemos un formulario para que el usuario inicie sesión. No necesitamos una acción, nos encargaremos de esto con futuro sí. Todo lo que necesitamos dentro de aquí es una entrada para nuestro correo electrónico, una entrada para la contraseña. También vamos a crear dos botones. Comencemos con nuestra sección de correo electrónico, que será un div como una clase contenedora de form_group. La etiqueta del formulario de la dirección de correo electrónico. La entrada para este, ya que este es un correo electrónico, le daremos a este el tipo de correo electrónico, el ID de correo electrónico, el texto de marcador de posición de enter email. Entonces también podemos usar v model para vincular el valor de esta entrada a nuestros datos de usuario justo arriba. Necesitamos acceder a UserData.email. Ahí estamos. Esta entrada también tiene el ID de correo electrónico. Podemos vincular esto a nuestra etiqueta y luego copiar nuestra sección div. Este es para la contraseña. Pégalo justo debajo. La etiqueta para contraseña y para la entrada, el tipo para esta también es contraseña, el ID es el mismo. El marcador de posición de enter password. Esto necesita vincularlo a UserData.Password. Entonces nuestros dos botones abajo por la parte inferior, justo debajo de nuestro div. El primero es el inicio de sesión. Coloca en un botón con el tipo de botón, el texto de inicio de sesión. Duplica esto o copia y pega. Ahora lo que tenemos que hacer es cambiar este texto para que se inscriba. Posteriormente esto le dará al usuario la opción de iniciar sesión o registrarse utilizando el mismo formulario modal. Ahí estamos. Hemos creado nuevos componentes modales de inicio de sesión. Para ver esto, necesitamos importarlo exactamente donde lo queremos en nuestro proyecto. Como se mencionó anteriormente, esto estará dentro del encabezado para que podamos ver el texto arriba en la parte superior. Vamos al encabezado hasta la sección de guiones. De hecho, no tenemos guión, así que vamos a crear esto ahora. Configuración de script. Importaremos nuestros componentes, que es el inicio de sesión. La ruta del archivo, ya que estamos dentro de los componentes es simplemente. /signin.vue. Luego colóquelo en los componentes en la parte superior de la sección de encabezado. Quizás se esté preguntando por qué agregamos un formulario de inicio de sesión a esta área de encabezado, pero esto se volverá más claro muy pronto. Pero colocando esto dentro del encabezado por ahora, mantendremos a este grupo junto con los botones de inicio de sesión y registro, que se mostrarán en la parte superior del encabezado muy pronto. Haremos clic en un botón, esto luego aparecerá el formulario y luego podremos cerrarlo con esta cruz en la parte superior. También se ve un poco desordenado por el momento, pero lo arreglaremos más adelante con nuestro estilo. Por ahora, concentrémonos en el formulario y registremos a un usuario. Volver a los componentes de inicio de sesión que acabamos de crear. Como hemos creado la función de registro dentro de nuestro componible, trabajaremos con este botón de registro abajo en la parte inferior, y lo vincularemos a la función con un oyente de clics. Podemos evitar el comportamiento predeterminado, que es refrescar la página, llamar a nuestra función de registro, que va a tomar en el correo electrónico y la contraseña como configuramos dentro de nuestro componible. Ambos están disponibles dentro del guión. Tenemos el UserData.email y contraseña. Pasemos en ambos valores. Primero está el UserData.email, luego el UserData.password. Debería ser todo lo que necesitamos para la función de registro. Recuerda, también importamos el mensaje de error. Mostremos esto justo debajo nuestros elementos p con el texto de favor inicie sesión para continuar. Colócala dentro de un span con la clase de error_message. Dentro de las llaves dobles pasan en nuestro mensaje de error. Lo hicimos bastante ahí. Ojalá esto funcione todo. Vamos a saltar al proyecto, nos da una salvada. Crearemos un nuevo usuario para continuar. Es un poco difícil de ver, pero lo arreglaremos en el CSS muy pronto. Colocar en una dirección de correo electrónico, y también una contraseña. Solo ve esto, si pongo el cursor por encima, da clic en el botón “Inscribirse”. Por el momento, no vemos ningún comentario, por lo que actualmente no tenemos un mensaje de error, lo cual es una buena señal. También cerraremos este formulario automáticamente después de iniciar sesión y registrarse. Pero por ahora saltar de nuevo a la consola a la sección de autenticación, pero deberíamos ver al usuario, que acabaría de registrarse. 43. Estilo modal: [ANTECEDENTES] Actualmente tenemos este modal no tan atractivo que tiene los componentes de inicio de sesión. En la vista de inicio de sesión, podemos comenzar a agregar un poco de estilo apuntando a todas estas clases. El div principal que rodea todo el modal tiene esta clase de modal. Entonces tenemos el contenido modal que está contenido en su interior. Estos ahora se pueden usar para darle estilo a nuestro modal y también hacerlo aparecer sobre el resto del contenido. Saltamos hasta el fondo, creamos la sección de estilo, que va a ser alcanzada a este componente. Como hemos visto, el envoltorio principal que rodea todo este div tiene la clase de modal. Lo que vamos a hacer aquí es que apuntaremos a este modal, que es el envoltorio completo. Estiraremos este envoltorio para que sea el ancho completo y el alto completo de la página. Entonces podemos establecer un color de fondo más oscuro no podamos ver tanto el contenido detrás. Luego en el siguiente div, que se anida en su interior, que es el contenido modal. Esto será un poco más pequeño. También tendrá un color de fondo blanco para que este destaque sobre todo el contenido detrás. En primer lugar, la sección modal. El modal tendrá una posición fija y todo destacará sobre todo el resto del contenido por índice [inaudible] para ser un número alto, como el 999. Esto asegurará que este fondo completo aparezca sobre todo el contenido existente. Para que este modal destaque, también necesitamos establecer el ancho para que sea 100vw. El ancho completo del view-port. La altura, 100vh, que es el 100 por ciento de la altura del puerto de visión. El fondo, este sería un color RGBA. Lo que haremos por el rojo, el verde y el azul es poner esto como cero, que es el color negro oscuro. Estableceremos la opacidad en 0.9. Es ligeramente transparente. Este es el efecto que vamos por. Es el color de fondo más oscuro que es ligeramente transparente. También podemos posicionar esto para estar arriba en la esquina superior izquierda, así no tenemos esta brecha arriba en la parte superior. También podemos hacer uso del flexbox para centrar todo el contenido. En primer lugar, la cima es cero. Haremos lo mismo por la izquierda. Asegúrate de que no tengamos ningún hueco alrededor del borde. El tipo de pantalla de flex. Luego nos aseguraremos de que todo el contenido esté alineado vertical y horizontalmente estableciendo la propiedad justify-content como centro. También lo mismo para alinear elementos. Ahora debería ser todo lo que necesitamos. Tenemos este modal ahora en el centro. Todo su contenido en el centro se va a colocar sobre un fondo blanco para que sea más visible. Esto tiene una clase si volvemos a subir de contenido modal. Seleccione esto, el fondo puede ser de cualquier color que desee. Voy a usar humo blanco. También necesita un poco de espaciado, acolchado. Estableceremos el ancho de la misma, estableceremos el border-radius, y también centraremos todos los contenidos usando el flexbox. Estableceremos la propiedad width en 80vw. Uno recuerda el acolchado en todos los lados para darle a esto algo de espaciamiento en el interior , un pequeño radio de borde. Digamos tres pixeles. Además, estableceremos el tipo de pantalla para que sea flexible. La razón por la que vamos a estar haciendo esto es porque vamos a establecer, si volvemos a subir a la cima, vamos a usar este flexbox debido particularmente a este botón modal cerrado. Queremos que esto termine a la derecha y también el texto que está justo debajo. Pero volveremos a esto en un momento. Pero ahora necesitamos que la dirección flex esté en una columna, que restablecerá el contenido para que sea vertical. El color y el valor RGB de 76, 76, 76. También puedes ver en este texto que hemos heredado esta sombra tecnológica. Podemos anular de esta manera a la propiedad text-shadow estableciendo esto como non. Ahora bajemos a nuestros botones. Podemos seleccionar el contenido modal. Dentro de aquí, tenemos nuestros dos botones. Podríamos agregar un clúster individual, cada uno de estos si quisieras, o en su lugar, podríamos usar CSS para seleccionar el contenido modal y el botón que sigue, que es el primero de tipo. Esto va a seleccionar el primer botón dentro de nuestro contenido modal, que es nuestro inicio de sesión. Podemos usar estos dos espacios fuera con algún margen a la derecha. También haremos que esto se vea un poco diferente configurando el color de fondo para que sea un valor RGB de 163, 204, 163. Como puede ver, esto ha seleccionado la primera aparición de este botón. Establecemos el color de fondo y también agregamos algo de espacio en él al lado derecho. A continuación, para el estado estacionario se sumará una pequeña transformación a esto. Nuevamente, tomaremos el contenido modal, seleccionaremos todos los botones dentro. Solo aplica esto cuando el mouse se cierne sobre él. Transformar. Haz esto un poco más grande. Podemos hacer uso de la báscula. El valor de escala de uno es exactamente lo que es actualmente. Para hacerlo un poco más grande, podemos establecer esto en 1.03, dándonos una agradable transformación el cursor sobre cada uno de estos botones. A continuación, subamos a la cima donde tenemos esta sección modal cercana. Este es el lapso que acabamos de tener aquí. Recuerda que establecemos el contenido modal para hacer uso del flexbox. Por lo tanto, dado que modal cerrado es un elemento hijo de este, entonces podemos usar ciertas propiedades flex. Para ello, salta hasta el fondo, agarra todo cerca modal. La propiedad flex de align-self y el valor de flex-end. Lo que esto va a hacer, esto sólo se aplicará a este elemento actual. Por encima de la izquierda, este será el arranque flex. Por encima a la derecha está el extremo flexible. Acabamos de ser un botón y podemos configurar el cursor para que sea un puntero. Esto ya está hecho. ¿Qué queda? Tenemos el texto. Justo aquí, podemos colocar esto en el centro. Este, si echamos un vistazo, tiene la clase de texto de subrayado modal, agarra esto, establece align-self para que sea igual al centro. Ahora mantiene nuestros textos en el centro mismo de la página. Vamos a reducir esto. El ancho de esta sección está bien para la vista móvil. Pero si extendemos esto a la vista más grande que hemos visto, probablemente queremos que este modal sea un poco más estrecho. Vamos a saltar a una media query, y podemos hacer esto @media y solo aplicaremos esto cuando el tamaño de la pantalla sea de 900 píxeles o más ancho. Seleccione el contenido modal. Voy a ir a, establecer esto para que sea 40vw. Probemos esto por debajo de los 900 píxeles. Entonces más de 900 píxeles reducirían el tamaño. Casi ahí ahora, lo último que tenemos que cuidar es este lapso con la clase de mensaje de error. Para esto, simplemente voy a agregar algo de texto de muestra. Esto lo podemos ver. Establezca el color para que sea rojo y también algo de espacio en el exterior de la consulta de medios. Coge nuestro error_message. El color de 255, 104, 104. Este es el color rojo y también solo necesita un poco de espaciado a la izquierda. Agreguemos un margen solo a la izquierda. Esto se ve bastante bien. Ahora sólo podemos volver al mensaje de error. Elimino el contenido de la muestra de aquí. Aquí estamos. Este es ahora nuestro estilo terminado para el modal. A continuación, echaremos un vistazo a cómo podemos cerrar este modal cuando hagamos clic en esta X. 44. Modal Toggle: Este modal ahora se ve mucho mejor. También necesitaremos una forma de abrirla y cerrarla. Para ello, saltemos a nuestro componible, que es useAuth.js. Luego dentro de aquí, vamos a crear una nueva variable que va a mantener el estado abierto actual. Este será un valor booleano, que configuraremos para que sea un valor inicial de false. Esto se llamará signinModalOpen, se envolverá dentro de una ref y el valor inicial de false y luego a continuación se creará una nueva función que va a alternar esto para que sea true o false. Función ToggleModal. Todo lo que tenemos que hacer dentro de aquí es agarrar nuestro nombre de variable, que es signinModalOpen, establecer el valor para que sea igual al contrario con el signo de exclamación, así signinModalOpen.value. Si esto es falso, esto devolverá entonces esto a ser cierto y si esto es cierto, esto entonces fijará esto para que sea lo contrario, que es falso. Devolver ambos de este archivo de manera que el SignInModalOpen, ToggleModal y luego saltar a un componente que es iniciar sesión. Necesito importar ambos de UseAuth ToggleModal y SignInModalOpen. La constante SignInModalOpen controlará si el usuario puede ver este formulario, por lo que necesitamos agregar esto a nuestro wrapper dentro este div con la clase de modal at v if declaraciones, que es igual a este valor. Ahora bien, si guardamos esto, porque el valor inicial es falso, ahora se elimina este. Luego de vuelta a nuestra plantilla, donde tenemos este lapso, que es cerrar el modal. Podemos escuchar por un clic, lo que activará nuestra función llamada ToggleModal. Como sabemos lo que esta constante SignInModalOpen se establece el valor inicial de false así que para ver realmente este modal, necesitamos crear un botón, que va a cambiar esto para que sea cierto. Sin embargo, el problema que tenemos actualmente es que todo este contenido dentro del modal está oculto por defecto. Por lo tanto, para ver realmente este botón, necesitamos crear un botón fuera de este div principal con el texto de inicio de sesión. Esto también necesita escuchar por un clic, que va a ToggleModal. El estilo para la clase de sign_in_btn. Guarde esto y ya podemos probarlo dentro del navegador. Ahí está nuestro botón Iniciar sesión. Haga clic en esto. Esto ahora alternará esto para que sea cierto por lo tanto mostrando el modal. Haga clic en la cruz, que luego ocultará esto a la vista. Sólo para terminar las cosas, vamos a mover este botón a la esquina superior derecha y también podemos quitar este borde. Esa es la parte inferior dentro de nuestra sección de estilo. Tomemos nuestro botón Iniciar sesión, así sign_in_btn, todo separado con guiones bajos. Quitar el borde con el valor de ninguno. Luego usando el flexbox, podemos hacer uso de una línea auto. Ponemos esto para que sea flex-end. Ahora empuja esto hacia el lado derecho. Para que esto sea más visible, podemos anular el color heredando este color más claro de nuestro padre. Finalmente, también accederemos a nuestro botón Iniciar sesión con un estado de desplazamiento, y le daremos un pequeño cambio de color a este. rgb 161,132, 132. Veamos cómo se ve esto. Ahí estamos. Ahora nuestro modal alternará abierto y cerrado, lo que está funcionando muy bien. Los siguientes pasos serán realmente iniciar sesión al usuario y también cerrarlo también. 45. Acceso y salida: Nuestro formulario de inicio de sesión está diseñado para ser de doble propósito. Ya lo hemos usado para iniciar sesión en nuevos usuarios, pero a continuación también lo usaremos para iniciar sesión a cualquier usuario existente y mantener las cosas bien y organizadas. Colocaremos esta función de inicio de sesión dentro de nuestro uso de composable. Luego en usar off, tenemos nuestra función SignUp así que agreguemos también a esto una función de inicio de sesión. Antes de hacer esto, también podemos importar un método desde Firebase. Antes teníamos que crearUserWithEmailAndPassword, pero ahora lo que necesitamos es signinWithEmailAndPassword. Asegúrate de que todo esto sea un caso de coma para que cada palabra comience con una letra mayúscula después de la primera. Este será el responsable iniciar sesión en cualquier usuario existente. Vamos a crear una función a la que vamos a llamar esto dentro de. Una vez que el usuario pulsa el botón “Iniciar sesión” dentro de este modelo. Gran parte del código será similar a la función de registro tenemos el bloque try-catch, luego llamaremos a nuestro método particular de Firebase, y también necesitamos manejar cualquier mensaje de error también. Lo que haremos es copiar toda esta sección de registro, voy a usar esto como punto de partida. Pega esto justo debajo. La función, la llamaremos login. En lugar de crear usuario cambiaremos esto para que se inicie sesión. Inicie sesión con correo electrónico y contraseña, luego borraremos cualquier mensaje de error, lo cual está bien. Después de iniciar sesión, también queremos cerrar este modelo, por lo que haremos clic en “Abrir”. Ingresaremos nuestros datos. Si el proceso de inicio de sesión está bien, haremos clic en esto y luego esto se cerrará. Podemos hacer esto configurando el modal de inicio de sesión abierto para que sea igual a false. Iniciar sesión modal open es algo que ya hemos configurado en la parte superior y esto controla la visibilidad del modal. De vuelta a nuestra función y bajando al área de captura. No necesitamos el primer caso de correo electrónico ya en uso porque si iniciamos sesión, en el usuario, el correo electrónico ya debería estar registrado. Lo que haremos es agarrar el mensaje de contraseña incorrecta. Al igual que con la función de inicio de sesión, estos son todos los mensajes que se devuelven desde Firebase. Para este, diremos contraseña incorrecta. Número 2 no se encontró el usuario. Diremos que no se encontró ningún usuario con ese correo electrónico. Voy a mantener el mensaje predeterminado si es algún otro error. Justo antes de llamar a la sección try, colocaremos en declaraciones condicionales. De hecho, colocaremos en dos y verificaremos si no hay correo electrónico o contraseña. Si falta alguno de estos, regresaremos de esta función y enviaremos un mensaje de vuelta al usuario. Si no hay correo electrónico, devolveremos una declaración que dice mensaje de error. Ese valor. ¿Es igual ingresar un correo electrónico válido? Duplicar esto. El segundo probará si la contraseña no está presente. Por favor ingrese una contraseña válida. Esto simplemente detendrá un método innecesario llamado Firebase si no tenemos toda la información que necesitamos. Ahora tendremos la función de crear nuevo usuario, para también iniciar sesión en un usuario existente. A continuación, nos vamos a centrar en cerrar sesión a un usuario. Para ello, Firebase proporciona un método llamado cierre de sesión. Importa esto. Entonces también crearemos una nueva función, que va a llamar a esto. Solo un botón encima de nuestros estados de cuenta de devolución. Crear una función llamada logout. Llamaremos a nuestro método de registro, que también toma el objeto off para que sepamos a qué usuario cerrar sesión. De hecho, también envolveremos esto en un área de prueba y captura así que tenemos algún manejo de errores. lugares en la sección try detectarán cualquier error, y luego enviarán un mensaje de error al usuario con el valor igual a error.message. Accederá al objeto de error que se pasa al área de captura, y luego accederá a la propiedad del mensaje. Ambas de estas dos nuevas funciones también necesitan ser devueltas. El primero de iniciar sesión, luego cerrar sesión. Ambos deben ser accedidos dentro de los componentes de inicio de sesión. Agregue a eso, componentes, signin.vue. Importe estos en la parte superior, así que inicie sesión y cierre sesión. La función de inicio de sesión, necesitamos colocarlo abajo dentro del formulario, lo vincularemos al botón de inicio de sesión. Ya tenemos el registro que se está llamando. Tenemos el inicio de sesión justo arriba. Escuchamos el click con este, evitamos cualquier comportamiento predeterminado, y llamaremos a login. Y luego, al igual que con la función de registro, también necesitamos pasar el correo electrónico y la contraseña que tenemos almacenados en el objeto de datos de usuario arriba en la parte superior, que está justo aquí. Y esto está ligado a nuestro para formar insumos. Entonces el correo electrónico, la contraseña, haremos clic en “Iniciar sesión”. Nuestra función se llamará entonces pase en el correo electrónico y también la contraseña. Pero, ¿qué pasa con la función de cierre de sesión? ¿De dónde vamos a llamar a esto? Bueno, actualmente no tenemos ningún botón de cierre de sesión dentro del modal o también dentro del encabezado. Pero sí tenemos el botón de inicio de sesión en la esquina. Será bueno alternar el texto aquí y solo decir iniciar sesión cuando el usuario está realmente cerrado la sesión. Y también lo contrario, cuando necesitamos usarlo para cerrar sesión. Así que hagamos esto en la parte superior de la plantilla, nuevo en los componentes de inicio de sesión, y hasta la parte superior de la plantilla, tenemos el botón Iniciar sesión. Duplicemos esto. Hago clic, digamos cerrar sesión, cambiar el texto para cerrar sesión. Volveremos a estos botones muy pronto y solo mostraremos uno de ellos a la vez. Pero ahora podemos ver nuestros botones de inicio de sesión y cierre de sesión en la parte superior. Pero justo antes de seguir adelante y probar esto, ¿cómo podemos saber si incluso iniciamos sesión en primer lugar? Bueno, una forma es conseguir que el objeto de usuario nos devuelva después de que llamemos a la función de inicio de sesión. Si volvemos a nuestro uso de composable, la forma en que podemos acceder a esto dentro de nuestra función de inicio de sesión es almacenando el valor de retorno del método de inicio de sesión con correo electrónico y contraseña. Vimos que esto está dentro de una constante llamada usuario, y luego justo debajo, podemos darle a esto una prueba con un registro de consola. Colocar en el usuario, en el navegador y abrir las herramientas del desarrollador. Salta a la consola, inicia sesión, ingresa el correo electrónico con el que te registraste. Esta vez vamos a golpear Iniciar sesión. Vemos un error. Lo sentimos, fue un error inesperado, pero parece que estamos recuperando las credenciales de usuario. Echemos un vistazo. Tenemos el usuario, tenemos el correo electrónico, el token de acceso. Todo esto parece estar bien, pero todavía estamos recibiendo un mensaje de error dentro de aquí. Entonces echemos un vistazo. Este es el mensaje dentro de las instrucciones switch. Hagamos un poco de depuración dentro de la sección predeterminada, coloque en un registro de consola. Y aquí sacaremos el objeto de error completo, y veremos si podemos tener una mejor idea de lo que está pasando. Vuelve a iniciar sesión. Iniciar sesión. Entonces obtenemos el error, tenemos las credenciales de usuario y ahí está nuestro error. Las asignaciones son constantes dentro del uso de so sign in modal open. Ese es el problema. Esto necesita ser.valor. Probemos esto una vez más. Hacemos la actualización para asegurarnos de que se borren los errores. Iniciar sesión, genial, el mensaje se ha aclarado todo. Todavía tenemos nuestro objeto de usuario y el modal se cierra ya que hemos establecido esto para que sea igual a false. Quitemos los registros de la consola. No necesitamos ninguno de estos. Al regresar este objeto de usuario funciona completamente bien y esta es una forma de detectar si el usuario ha iniciado sesión o no. También podemos acceder a las propiedades del usuario como el correo electrónico y el ID. Pero esta es solo una forma de hacer las cosas. Otra forma posiblemente mejor de hacer las cosas es hacer uso de un método proporcionado por Firebase, que vamos a echar un vistazo en el siguiente video, y esto escuchará cualquier cambio en nuestro usuario que haya iniciado sesión. 46. Detección de cambios en la espera: Como se mencionó en el video anterior, cuando llamamos a este método que es iniciar sesión con correo electrónico y contraseña, este devolverá un valor. Si tiene éxito este valor será el contenido del objeto usuario, que contiene toda la información que necesitamos, como el ID de usuario y también el correo electrónico del usuario. Esto está bien, pero Firebase también proporciona un observador, que es una forma recomendada no solo de conseguir al usuario, sino también de notificarnos si hay algún cambio como que un usuario cierre sesión. Este observador va a ser importado en nuestro uso de archivo así que salta a la parte superior y dentro de la importación off, también importaremos on/off estado cambiado. Para llamar a esto saltaremos al fondo de nuestro expediente, justo encima de la declaración de devolución y llamaremos a esto en la parte inferior. En este método de pintura, también necesitamos colocarlo entre corchetes. También necesitamos pasar en dos parámetros. Primero es la ocurrencia de instancia, tenemos acceso a esto. Tendríamos nuestras constantes de apagado separadas por coma. El siguiente parámetro va a ser una función a llamar si ha detectado un cambio en los usuarios de Estado es decir, llamará a esta función si el usuario inicia sesión o cierra la sesión. Pasar una función como segundo parámetro y su función también va a tomar en el usuario actual. Abre esto. Ahora vamos a tener acceso al usuario actual conectado, queremos conocer nuestro lugar en unas declaraciones condicionales. Podemos verificar si el usuario existe. Si lo hace, entonces configuraremos al usuario. Si no existe, entonces configuraremos al usuario para que sea igual a nulo y donde vamos a establecer esto, bueno, vamos a crear una ref arriba en la parte superior de nuestro archivo. Justo debajo del resto decimos const. Los datos de usuario son iguales a una ref. Por defecto, estableceremos esto para que sea igual a nulo. De vuelta a nuestro observador, podemos colocar en unas declaraciones condicionales y verificar si el usuario existe. Se trata de un usuario que pasará a nuestra función. Si están conectados, estableceremos valor de los datos del usuario para que sea igual al de este usuario. De lo contrario el usuario no está logueado así que por lo tanto, podemos devolver los datos del usuario para que sean iguales a nulos. Luego devolvamos estos datos de usuario de nuestro componible. Esto va a ser utilizado en diversos componentes. Uno de ellos pueden ser los componentes de inicio de sesión para asegurarnos de que solo mostramos el botón relevante en la parte superior. Salta al inicio de sesión, importa esto en la parte superior y luego baja a nuestros dos primeros botones que vemos aquí. Solo queremos mostrar el botón de inicio de sesión si no hay presencia de datos de usuario. Pasando VF dirá si no hay datos de usuario. Si no tenemos un usuario, ofreceremos la oportunidad de iniciar sesión, si no pasa VL donde el usuario está actualmente conectado y tienen la opción de cerrar sesión. Ahora esto nos dará la oportunidad de probar esto correctamente. Pero justo antes de que realmente sigamos adelante y probemos esto, ahora tenemos un choque sin dos nombres de variables. Sólo voy a cambiar este para que sea datos de formulario. Copiemos esto y lo usaremos dentro de nuestro formulario. Formar datos punto correo electrónico, lo mismo para la contraseña y también cambios en nuestras funciones de inicio de sesión y registro. Creo que esto está en todas partes. Vamos a verificar esos datos de usuario y solo tenemos esto en nuestras dos ubicaciones. Bien, ahora podemos seguir adelante y probar esto poniendo al usuario en la parte superior de la plantilla dentro de las llaves decimos datos del usuario, el correo electrónico pero recuerda a veces no vamos a tener acceso a este correo porque los datos del usuario serán iguales a nulos. Frente al signo de interrogación para que esto falle silenciosamente si tenemos algún error. Si no está familiarizado con este signo de interrogación, este es el encadenamiento opcional de JavaScript. Esto detendrá que aparecer un error si no hay correo electrónico presente, que será el caso si el usuario se desconecta. Digamos que esto vaya al navegador. Vemos que actualmente estamos conectados, el correo electrónico es sobre el clic superior Cerrar sesión. Esta n se elimina así que intentemos iniciar sesión una vez más. Ahí está nuestro correo electrónico ahora devuelto. Entonces, para eliminar esta salida de la plantilla y ahora todo parece estar funcionando correctamente. Este es ahora el final de la sección de autenticación. Enhorabuena por llegar a esta etapa. Aún no hemos terminado, aunque tenemos muchas más características para agregar a nuestro proyecto, que se agregarán en las próximas secciones. 47. Estilizar la vista sobre: Próximamente tenemos algunos toques finales a nuestro proyecto. Vamos a comenzar con algunos estilos CSS para esto acerca de la vista. el momento, no se ve muy bien debajo del encabezado. Pasemos a esta sección, que está en las vistas, sobre la vista, seleccionamos la vista anterior, y luego podemos crear una sección de estilo en la parte inferior. Echemos un vistazo a qué clases tenemos. Eso es todo lo que tenemos este envoltorio que envuelve todo nuestro contenido con la clase de aproximadamente. Después tenga la sección de introducción, y esta sección incluye nuestro título y nuestra imagen. Es básicamente todo lo que está por encima de esta área de enlaces. Empecemos con esta clase de aproximadamente. Comenzaremos configurando el tipo de visualización para que sea flexible, y nos aseguraremos de que esto esté en una dirección vertical configurando la dirección de flexión para que esté en una columna. El uso del flexbox y esta dirección vertical nos permitirá entonces alinear los artículos en el centro. Alinee los elementos en el centro, lo que luego empujará el contenido al centro de la página. Este es el envoltorio de página completa. A continuación tenemos la sección de introducción. La sección de introducción, como acabamos de descubrir, es todo hasta esta imagen, que es imagen y las dos líneas de texto anteriores, así que también estableceremos la dirección flex para que sea columna en esta. La pantalla, o dirección de flexión de la columna. Actualmente, no verás ninguna diferencia si pasamos al navegador. Esto se debe a que vamos a hacer uso de una media query muy pronto, y hacer que esto aparezca en fila en la pantalla más grande. Actualmente, esto se aplicará a la pantalla pequeña, y luego en la vista de pantalla más grande, configuraremos esto para que sea una dirección flexible de fila. Coloca dentro de la regla de medios artísticos donde apuntaremos que el ancho mínimo sea de 900 píxeles, y luego podemos anular nuestra sección de introducción estableciendo la dirección de flexión para que sea una fila. Estos aparecen en una fila. Entonces por debajo de 900 píxeles, esto volverá a la dirección de la columna. Ahora saltemos de nuevo a la sección de introducción. Si nos desplazamos hacia arriba hasta la sección completa dentro de aquí, tenemos este div con la clase de envoltorio de texto info junto a la imagen. Efectivamente, solo tenemos dos secciones con las que debemos trabajar. De nuevo podemos hacer uso del flexbox para establecer tanto la izquierda como la derecha para que sean del mismo tamaño. También necesitamos agregar algo de espaciado y alineación, y lo haremos justo fuera de nuestra consulta de medios. Primero, la imagen era info underscore image también capturará nuestro envoltorio de texto info, info IMG, y también envoltorio de texto info. Dado que los padres de intro tienen el tipo display de flex, los elementos hijos pueden hacer uso de flex, y configuraremos ambos para tratar de tomar exactamente el mismo valor. Algún relleno para dar ambos de estos algún espaciado de una RAM. Alinee el texto con text-align en el centro, y luego para establecer la alineación vertical. También podemos hacer uso de align self. Alinearse en el centro. Nuevamente, esto funciona porque los padres de intro tienen este tipo de display de flex, y align self funcionará porque este es un elemento hijo del flexbox. Esto se encarga de esta sección. Vamos a desplazarnos hacia arriba. El siguiente es el envoltorio más info. Esta es la sección de todos nuestros enlaces y este título justo aquí. Volvamos a apuntar a esta sección fuera de la consulta de medios. Más info envoltorio en exhibición. Nuevamente, haremos uso del flexbox. Estableceremos la dirección de flexión para que esté en una línea de texto de columna hacia el centro. Podemos hacer que esto se destaque agregando algo de color de fondo. Haz esto un poco diferente del color blanco actual. Vamos por doble F, doble E, D2. Actualmente, este fondo solo rodeará el contenido, por lo que para hacer de este el ancho completo para la página, podemos cambiar el ancho para que sea 100 VW. Ahí vamos. Para darle a esto algo de espaciado, solo agrega un poco de relleno de una RAM. También podemos cambiar demasiado el fondo de esta sección, así que copiemos esto. Si volvemos a la fuente, los activos, el main.css. De hecho, solo podemos eliminar el fondo para el bloque de información y esto ahora coincidirá con el resto del contenido. Intentemos sobre las secciones y también la página de inicio, y asegúrate de que no tendrás problemas. De hecho aquí, sí necesitamos agregar el fondo. Pega esto en. Ahí vamos. Esto ahora funciona para nuestros dos puntos de vista. 48. Completar la vista de administrador: Continuemos con nuestros toques finales dentro de la sección de administración. Aquí dentro, vamos a hacer uso de la caja flexible y colocar en la nueva pizza en los componentes del menú uno al lado del otro en la vista más grande. Vamos a entrar en la vista admin, que se encuentra en la carpeta views. Por el momento no tenemos mucho contenido, solo mostramos el encabezado de nivel tres y los tres componentes, así que esa es la sección de nuestra nueva pizza y también el componente pizzas. Corta esto, envuélvalos dentro de un div, pégalo de nuevo y dale a este div la clase de fila. En la parte inferior, crea la sección de estilo. También alcanzaremos esto a nuestros componentes. Seleccione la fila. En la sección inicial aquí, estableceremos el tipo de visualización para que sea flex, una nueva flex-direction para ser columna. Esto funcionará en la vista de pantalla pequeña. Yo encogería esto y podemos verlas en la dirección de la columna. Luego configura una consulta de medios con la regla de medios artísticos donde aplicaremos todos los estilos dentro de aquí sobre 900 píxeles. Seleccione nuestra fila, o puede anular la dirección flexible para que sea una fila. Las pantallas más pequeñas tendrán una columna. El estiramiento debe ser superior a 900 píxeles. Estos ahora están uno al lado del otro. También necesitamos que ambos componentes sean un poco más anchos, para que abarquen el tamaño completo de la página. Podemos entrar en la nueva pizza y también pizzas dentro de los componentes bajo Admin. Este tiene la clase de sección admin. Si vamos a pizzas, podemos ver que ésta también lo hace. Vamos a entrar en la carpeta assets, en main.css. Haz una búsqueda y ya tenemos la referencia de la sección admin justo aquí. Establezca el valor de flex para que sea igual a uno. Todas estas secciones intentarán ocupar el mismo espacio disponible. Siendo esta un área de administración, también queremos introducir algunas medidas para asegurarnos de que solo las personas correctas puedan ver esta página. Por ahora, nos aseguraremos de que hayan iniciado sesión importando primero al usuario. Volver a la vista de administración, en el guión. Necesitamos importar nuestro uso de composable donde podamos extraer y almacenar dentro de una constante nuestros datos de usuario. Recuerde, los datos del usuario son iguales a nuestro objeto que contiene toda la información del usuario o son iguales a nulos. Utilizamos Auth para llamar a nuestra función. Por lo tanto, los datos de usuario se pueden usar con alguna representación condicional para mostrar y ocultar el contenido de la página. Vamos a agarrar todo lo que hay dentro de nuestra plantilla, coloquemos en un div como envoltorio, agreguemos los contenidos de nuevo dentro, luego hagamos uso de renderizado condicional con v-if, donde podemos verificar si los datos del usuario están presentes. Si hemos iniciado sesión, deberíamos poder ver toda la sección de administración. Si no, crea un elemento p, que será para la sección v-else, con el mensaje de ti debe ser admin para ver esta área. Ahí está nuestro mensaje. Antes de iniciar sesión, solo agregaremos un poco de estilo a esta sección agregando una clase de warning_msg. Vamos a darle estilo a esto en solo un segundo. Pero antes de hacer eso, también podemos agregar un mensaje de bienvenida si el usuario está conectado. Justo por encima del encabezado de nivel 3, agrega algo de texto con la clase de user_email. Los textos son, bienvenidos. Luego dentro de las llaves dobles, podemos acceder a nuestros datos de usuario.email. Recuerda que los datos del usuario no siempre van a ser un objeto, veces pueden ser nulos. Por lo tanto, podemos hacer uso del encadenamiento opcional de JavaScript con un signo de interrogación para mostrar solo este correo electrónico si está configurado. Por último, el estilo para nuestro correo electrónico de usuario y el mensaje de advertencia van fuera de la media query, por lo que user_email y también el warning_msg. Margen de un rem simplemente empuja esto fuera de la esquina. Intentemos iniciar sesión. Todo el mundo, el contenido ya es visible y también podemos ver un mensaje de bienvenida en la parte superior. También solo para empujar sobre el encabezado nivel 3, también podemos aplicar la misma cantidad de margen. Añadir el H3. Bien, esto se ve mucho mejor ahora. Pasemos a nuestro botón de registro y hagamos clic en este. Esto ahora entra en vigor y elimina nuestra sección de administración de la vista. 49. Restringir nuevas pizzas: Otra comprobación que podemos hacer es ver si nuestro usuario está conectado antes de que pueda agregar una nueva pizza a la base de datos. Actualmente, no tenemos ninguna forma de verificar si el usuario es un usuario habitual o un administrador. Pero volveremos a esto más tarde, y la razón por la que haremos esto es una vez más importar nuestros datos de usuario a nuestros nuevos componentes de pizza. Componentes, Admin, Pizza nueva. Coloque una importación en la parte superior de nuestro componible. Importar, useAuth desde nuestro archivo componible. Entonces podemos extraer los datos del usuario. Si nos desplazamos hacia abajo, podemos ver que tenemos esto Agregar funciones en nuestra nueva pizza a la base de datos. Antes de agregar esto, podemos verificar si el usuario está conectado. Diremos si no hay datos de usuario, y como estamos dentro del script, también necesitamos acceder al valor. Si esto es falso, es decir, esto será igual a nulo si el usuario no está conectado. Ahora podemos regresar de esta función antes de agregar nuestra pizza a la base de datos. En las circunstancias actuales, va a ser bastante difícil probar esto. Porque si nos cerraron la sesión, actualmente no podemos ver el componente Agregar nueva pizza para darle una oportunidad a esto. Lo que podemos hacer como medida temporal es desactivar el renderizado condicional dentro del admin. Salta a la vista de administración. Luego dentro de las plantillas comentaremos las declaraciones if, el div de cierre, y también tendremos que hacer el área v-else. Esto ahora nos da acceso a la sección de administración cuando actualmente no estamos registrados. Vamos a agregar, y ahora cada vez que intentamos agregar una pizza nueva, no vemos el mensaje para decir que esto ha sido agregado, y tampoco vemos esto agregado en la sección de menú. Bueno. Con todo esto funcionando, ahora podemos restablecer el renderizado condicional dentro de la vista admin. No hemos iniciado sesión, así que todo el contenido debería desaparecer. A continuación, nos quedaremos con este tema del objeto usuario agregándolo a nuestros pedidos. 50. Agregación del usuario: Los próximos pasos están todos relacionados con todos los pedidos. Lo que vamos a hacer es asegurarnos de que el objeto de usuario se coloca en nuestro pedido antes de empujar a la base de datos. También nos aseguraremos de que el usuario haya iniciado sesión antes de crear un nuevo pedido, y para ello saltaremos a la cesta de uso composable y en parte de un usuario. Composables, useBaskets, y este archivo contiene la función AddNeWorder. Pero antes de que podamos probar si el usuario está conectado, también necesitamos importar los datos del usuario de nuestro composable off. Así que cualquier componible se puede importar dentro de otro componible, y esto hace que estos archivos sean realmente flexibles. Al igual que hacemos en cualquiera de los componentes, podemos importar nuestro componible. Esto es UseAuth, y esto es. /, useAuthF ya que esto está en el mismo directorio y luego en nuestra función, podemos extraer nuestros datos de usuario de nuestra función useAuth. El ID aquí es que verificaremos si hay un usuario conectado. Si hay, los agregaremos al pedido, si no, agregaremos algo de buck un mensaje de usuario para iniciar sesión. Y necesitamos almacenar este mensaje dentro de una variable o una constante. Entonces const, signInMessage es igual a una ref con una cadena vacía como el valor inicial hasta la función addNeWorder y primero podemos verificar si el usuario está conectado. Dentro de la sección try, diremos if, userData.value, abre las llaves. Si esto es cierto, queremos ejecutar algún código dentro de aquí, si no lo es, crearemos una sección L. La sección L actualizará el SignInMesage, por lo que esto devolverá al usuario un mensaje de favor inicie sesión para realizar un pedido. Entonces, en nuestra sección if, podemos copiar o recortar la sección de pedido hasta el texto de nuestra cesta sin el contenido original. Luego coloca esto dentro de la sección if, así esto solo se ejecutará si el usuario está conectado. Esto es todo lo que tenemos que hacer por ahora dentro de la función, luego podemos devolver nuestro SignInMesage, que luego se puede importar dentro de nuestra vista de menú. La parte superior, ya tenemos acceso para usar la canasta así que solo podemos ingresar al final nuestro mensaje de inicio de sesión fue. Entonces, renderiza este mensaje dentro de nuestra plantilla, así que desplázate hacia abajo hasta el botón de orden, que está en la sección de cesta, busca este botón con el botón de texto de lugar, y luego justo encima de este, agrega un nuevo elemento P, salidas, nuestro SignInMesage. Ahora podemos probar esto cuando iniciamos sesión y desconectamos. Como se nos ha pedido que iniciemos sesión, actualmente no estamos conectados. Podemos confirmarlo con el administrador. Intentemos hacer un pedido, haga clic en algunos artículos. Ahí vamos. Por favor, inicie sesión para realizar un pedido, haga clic en nuestro modelo y podemos iniciar sesión. Inicia sesión, haz clic en “Realizar pedido” una vez más y esto ya está todo trabajado. Si trabajó, sin embargo, cierre sesión y borre la página y luego agregue las pizzas nuevas a pedido. Nuevamente, si intentamos hacer un pedido, todavía veremos nuestro mensaje justo aquí. Es posible que hayas notado desde antes que tan pronto como iniciemos sesión a través del modal, este mensaje seguirá intacto. Solo demostrémoslo. Si iniciamos sesión una vez más, haga clic en “Iniciar sesión” manteniendo intacto este mensaje puede causar cierta confusión al usuario. Pueden pensar que aún necesitan iniciar sesión. Todo esto significa algún error con el proceso de inicio de sesión. Para aclarar esto lo que podemos hacer es, view proporciona un método watch que activará una función de devolución si hay algún cambio a un estado reactivo como es nuestro usuario. Lo que esto significa en la práctica es que si volvemos a nuestra cesta de uso componible en la parte superior, entonces podemos ver nuestros datos de usuario y tan pronto como ocurra algún cambio, podemos ejecutar una función de devolución de llamada. El vigilante se ha importado automáticamente desde el paquete de visualización. Si el tuyo no sucedió automáticamente, asegúrate de agregar esto en. Entonces cada vez que ocurre un cambio a otros datos de usuario, la función se ejecutará donde podremos borrar nuestro signinMessage.value estableciendo esto igual a una cadena vacía. Volvamos a nuestro menú y refresquemos. Podemos ver que todo esto entró en vigor en cualquier nueva pizza. Hacer un pedido. Esto está bien porque hemos iniciado sesión, cerrar sesión, hacer un pedido cuando se desconecta y vemos nuestro mensaje de error. Ahora, si intentamos iniciar sesión una vez más, inicia sesión. Tan pronto como esto sucede, luego eliminamos el mensaje de error para que el usuario ahora sea libre de hacer su pedido. Bien, esto ahora nos deja con la tarea final de sumar al usuario al pedido. Volvamos a la cesta de uso composable y luego bajemos a la función AddneWorder. Justo dentro de la sección if, recuerda que los datos del usuario, que recuperamos de firebase, contienen mucha información y muchas de las propiedades que no necesitamos. Por simplicidad, voy a crear un nuevo objeto de usuario y solo colocando el ID del usuario y el correo electrónico, la propiedad ID, podemos obtener de UserData.Value.UID y correo electrónico del usuario. Este es del UserData.Value.email. Entonces a continuación, cuando creamos nuestro pedido, también podemos pasar en el usuario. Ahora vamos a guardar esto. Intentemos hacer un nuevo pedido. Haz nuestro pedido, entra en la consola, en nuestra base de datos de Firestore y consulta los pedidos. Si nos desplazamos hacia abajo, podemos ver que el último pedido que acabamos colocar también tiene nuestro objeto de usuario adjunto. 51. Filtros y propiedades globales: Te das cuenta si entramos en la sección del menú, comienzas a agregar algunas pizzas a nuestra canasta. Si empezamos a aumentar la cantidad, aumentemos esto hasta seis y veamos que tenemos algún formato inconsistente. El primero se reduce a un decimal, el segundo es de dos decimales y el total del orden está todo desordenado. Si has usado Vue versión 2 en el pasado, es posible que hayas usado algo llamado filtro. Un filtro estaba disponible para proporcionar formato de texto simple y era ideal para crear cosas como filtros de moneda. Sin embargo, aunque en Vue versión 3, los filtros ya no están disponibles. Pueden ser reemplazados por algo así como un método o una propiedad computada dentro de un componente. Sin embargo, si quieres que esto esté disponible globalmente para que podamos reutilizarlo también podemos hacer uso de un filtro como setup en Vue 3 accediendo a algo llamado propiedades globales. Propiedades globales es un objeto al que podemos agregar, que está disponible en todos nuestros componentes para que podamos reutilizar. Sin embargo, ten cuidado de no exagerar las cosas y hacer que todo sea accesible a nivel mundial. Pero un filtro de moneda que podamos usar múltiples componentes es un buen caso de uso. Pasemos al main.js y configuremos esto. Así que justo debajo donde creamos nuestra aplicación, manera de hacer esto es llamar a app.cong.global.properties y luego podemos darle a esta propiedad nombre como dark.mode y vamos a establecer esto igual a true. Ahora podemos acceder dentro de cualquiera de nuestras plantillas es propiedad DarkMode por lo que actúa como una variable. Pasemos a la vista de menú y en cualquier lugar dentro de esta plantilla está bien. Sacamos esto dentro de las llaves dobles, ahora vemos esto arriba en la parte superior. Este es un muy buen caso de uso para cadenas simples o booleanos así y podemos acceder a estos en cualquier componente. También podríamos configurar tantos de estos como quisiéramos, podríamos simplemente duplicar esto y podríamos crear diferentes variables. O también podríamos agregar múltiples propiedades dentro de un objeto. Así que mantengamos esta sección pero eliminemos la variable, y lo que haremos es crear un objeto llamado filters y luego dentro las llaves podemos agregar tantos filtros como quisiéramos. Para nuestro caso de uso crearemos una función llamada FormatMoney. FormatMoney necesita tomar el valor que desea formatear y luego podemos devolver el nuevo valor que está formateado. Una forma sencilla de hacer esto es llamar a value.ToFixed y esto arreglará esto a dos decimales. También como se mencionó, ya que este es un objeto también podemos agregar múltiples propiedades dentro de aquí. Pero aunque FormatMoney es todo lo que necesitamos así que volvamos a nuestra vista de menú y podemos reemplazar los precios con nuestro filtro. Si quisieras podrías agregar esto a la sección del menú pero actualmente nuestros números ya están agregados a la base de datos por lo que esto siempre debería mostrarse bien. El problema ocurre cuando agregamos varias pizzas y comenzamos a multiplicar números. Lo que podemos hacer es bajar a la sección de canasta, tenemos el total del pedido, tenemos este precio justo aquí, así que en cambio, lo que queremos hacer es cortar esta multiplicación , acceder a nuestros filtros.FormatMoney. FormatMoney era una función que toma un valor para formatear así que tenemos que pasar también esto en el que está la multiplicación que acabamos de cortar. Estos son los totales de línea y también necesitamos hacer el total del pedido. Así que corta esto entonces accederemos a filtros.ForfMatMoney, pega esto de nuevo en. Probemos esto. Suba la cantidad y se puede ver cuando pasamos seis cual era el problema antes, todos estos correctamente formateados a dos decimales. Dado que nuestro filtro es un objeto global también podemos usar en otros componentes donde mostramos valores monetarios. Vamos a saltar a los componentes, al administrador y al orders.view. Salta a nuestra mesa, igual que en la canasta también estamos multiplicando el precio por la cantidad, así podemos hacer lo mismo aquí podemos decir filtros.FormatMoney. Vuelve a pasar esto, probemos esto en la sección de administración. Esto también se ve bien si miramos todos los totales por encima de la derecha. Esta es una forma realmente simple pero útil de repetir tareas simples a lo largo de nuestra aplicación. el formato de moneda es un poco Sin embargo, el formato de moneda es un poco básico y podemos mejorar esto usando el objeto JavaScript Intl. Esta es la API de internacionalización de JavaScript que proporciona formato de número, hora y fecha basado en el idioma , entre otras características. Mejoremos esto volviendo a nuestro main.js. Podemos reemplazar nuestro ejemplo actual justo después la sentencia return y declararemos que queremos un nuevo Intl.NumberFormat. NumberFormat es uno de los muchos métodos que están disponibles en los objetos Intl y este NumberFormat permite el formato numérico sensible al idioma , lo cual es excelente para la moneda. A continuación, dentro de la cadena al final el método de formato que toma en el valor que desea formatear. En nuestro caso, todavía estamos haciendo uso de este valor que se pasa a la función y además de esto el método de formato numérico también tomará algunos argumentos para especificar qué configuración regional estamos usando y también algunas opciones. Primero, la configuración regional del usuario final que establece el estilo de formato de la moneda. La razón por la que queremos hacer esto es porque la moneda se muestra y se formatea de manera diferente en diferentes partes del mundo. Por ejemplo, algunos países utilizan decimales o comas como separadores. Digamos que 10,000 podrían verse así o esto y también algunos países usan símbolos especiales también. Si actualmente guardamos esto y pasamos al navegador, actualicemos. Podemos ver sin agregar ninguna opción diferente dentro de aquí por defecto mi moneda es a dos decimales y usa el punto decimal en el medio. Pero si agregamos por ejemplo, una configuración regional alemana que es un valor de cadena de guión sobre caso DE, tan pronto como guarde esto, esto se actualiza y se separa con una coma en su lugar. Mi caso de uso voy a cambiar esto para que sea inglés, guión GB, que debería revertir esto de nuevo al decimal. Después separados por una coma también podemos agregar un objeto options. Dentro de este objeto podemos pasar en varias cosas como el estilo y las opciones de moneda. El estilo va a ser igual a la cadena de moneda y luego también necesitamos pasar en la moneda que quieras formatear. Esta puede ser cualquier moneda como Euros, EUR, podemos ver esto justo aquí, también eliminar este símbolo $ en solo un momento, puede ser $, creo USD. Ver EU justo aquí, pero el mío va a estar en libras. Además de la moneda esto también se puede utilizar para otras cosas también. Podemos incluir unidades de medida y también porcentajes, pero estas opciones son excelentes para nuestro caso de uso y también siéntase libre de configurarlas con su moneda preferida. Solo para terminar las cosas volvamos a la vista de puntos de pedidos. Vamos a mover el símbolo de moneda que tenemos codificado en su lugar por el menú, también tenemos que hacer lo mismo aquí y también aquí. La vista de menú, elimine esto. Casi ahí ahora solo tenemos la sección de menú que está justo arriba. Esta es la opción sin precio, podemos mover el símbolo de moneda apagar esto, acceder a nuestros filtros, tenemos FormatMoney , pegar esto de nuevo. Ahora nuestro formato de número ya ha entrado en vigor. 52. Actualizaciones de Pizza en tiempo real: Cuando actualizamos nuestro sitio, algunas cosas se actualizan de inmediato y algunas cosas no. Por ejemplo, si vamos a nuestro Admin e intentamos agregar una pizza nueva, solo toda la información ficticio por ahora. Haga clic en “Agregar”. Entonces esta nueva pizza no se actualiza automáticamente en el menú hasta que pulsamos “Refrescar”. Pero si eliminamos una pizza haciendo clic en esta X, el ítem se elimina del Admin. ¿Por qué crees que sucede esto? Bueno, para ver esto, necesitamos echar un vistazo a algunos archivos con más detalle. Primero, si saltamos a la sección admin de los componentes y luego abrimos Newpizza.vue, dentro de aquí tenemos esta función para agregar una nueva pizza a nuestra base de datos. Todo lo que hacemos aquí es proporcionar algunas comprobaciones y luego agregamos nuestro documento a nuestra base de datos, actualizamos el mensaje. Entonces si esto tiene éxito, todo está bien. La pizza se almacena en la base de datos, pero nuestra aplicación no es notificada desde Firebase de ninguna adición. Sin embargo, sin embargo, si pasamos a lo que usamos pizzas componibles y echamos un vistazo a nuestra función GetPizzas. Actualmente lo que tenemos que hacer después de haber agregado nuestra pizza es refrescar la página porque esto volverá a la página porque esto volverá llamar a nuestra función GetPizzas, por lo tanto actualizando el menú de la derecha. Éste, parece tener sentido, pero recuerda cuando borramos una pizza, la aplicación se actualizó con los cambios. La diferencia entre estas dos situaciones es que si entramos en nuestro usePizzas componibles y echamos un vistazo a DeletePizza, la diferencia clave aquí es que tan pronto como hayamos eliminado la pizza, luego una vez más llamamos a nuestra función GetPizzas que luego pasará la información correcta a nuestros componentes del menú. Si quisiéramos, cuando añadimos una pizza nueva, también podríamos volver a llamar a nuestra función GetPizzas. Pero también hay una mejor manera de hacer las cosas y esto es usar una funcionalidad en tiempo real de Firebase. Lo que esto significa es que tan pronto como realizamos algún cambio en nuestra base de datos, la aplicación es notificada de estos cambios. Por ejemplo, cuando pasamos al Admin y agregamos una pizza nueva, hacemos clic en el botón Agregar y esto luego se empuja a nuestra base de datos. Tan pronto como esto haya sido exitoso, Firebase comunicará a nuestra aplicación por persona la información actualizada. Entonces nuestro menú se actualizará automáticamente. Esto lo hacemos con un método llamado on snapshot. Pasemos a todos los usosComposable de pizza. Podemos importar esto desde nuestro firestore, así que onSnapshot, voy a hacer esto dentro de GetPizzas. Lo que haremos ahora es comentaremos todo el código existente que usamos para tomar nuestras pizzas de el código existente que usamos para tomar la base de datos y lo reemplazaremos con el método OnSnapshot. Al pasar instantáneas y onSnapshot también se incluye la referencia de la colección de pizza que se almacena en DBPizzaRef. esto le sigue una función que vamos a ejecutar cada vez que haya un cambio dentro de la base de datos. La función va a tomar en los docs que se nos devuelve. Como tenemos un nombre coincidente de docs justo aquí con los docs que estamos recorriendo desde antes, ahora podemos descomentar esta sección, poner esto y luego pegar esto dentro de nuestra función. Esto es hacer exactamente la misma acción que antes. Estamos recuperando los documentos. Estamos recorriendo cada uno, estamos creando nuevos objetos de pizza. Luego debajo para AllPizzas ref. Tan pronto como se actualice, actualizará todas las vistas o componentes que se basan en estos datos. Así que vamos a darle una oportunidad a esto en el admin. Entonces saltaremos a Agregar nueva pizza, dar clic en “Agregar”, y en cuanto hagamos esto, nuestra aplicación se actualiza, pero sí vemos un pequeño problema. No solo obtenemos las pizzas gratuitas que se devuelven de la base de datos, sino que estas también se suman a las dos existentes que ya tenemos. Una forma sencilla de hacer esto es limpiarlo nuestro arreglo AllPizzas antes de recuperar la información. Si entramos en la sección try, podemos ver que ya hemos limpiado el valor existente y ciertamente ha sido una matriz vacía. Todo lo que tenemos que hacer es mover esto dentro de nuestra instantánea. Guardemos esto y refresquemos como nuestras pizzas existentes gratuitas. Agreguemos uno más. Haga clic en “Agregar” y ahora nuestra aplicación ya está notificada de cualquier cambio. Con esto en mente, también podemos volver a nuestra función DeletePizza donde podríamos eliminar el manual, llamada GetPizzas. Voy a echar un vistazo a nuestra función DeletePizza. Ya no necesitamos llamar manualmente a GetPizzas, esto se hace por nosotros. Ahora si también eliminamos pizza y nuestro administrador ahora todavía está actualizado cuando eliminemos una pizza y viniendo a continuación también repetirá este proceso para nuestros pedidos actuales. 53. Actualizaciones de pedidos en tiempo real: Para actualizar los pedidos en tiempo real, sigue el mismo patrón que hicimos con las pizzas. Primero, pasamos a usar orders.js dentro del Composable. En la parte superior, necesitamos importar nuestro propio método de instantánea. Entonces podemos reemplazar el método get docs existente que haríamos en snapshot. Bajaremos a conseguirpedidos, que está justo aquí. Todavía necesitamos esta QueryData, que está en la cima. Pero comentaremos todo después, desde obtener documentos hasta el final de nuestra sección de prueba. Llamaremos a onSnapshot, que va a tomar en nuestro QueryData. Después una función para ejecutar después de cada cambio. Nuevamente, para mantener las cosas consistentes y reutilizar nuestros datos, llamaremos a los datos disponibles dentro de los documentos. Entonces nuestro código existente, podemos descomentar, poner esto fuera de lugar, colocar esto dentro de nuestra función. Ya no necesitamos estos documentos. Podemos cortarlos ya que estamos obteniendo estos automáticamente pasados a nuestra función. Entonces para evitar el mismo problema que tuvimos con nuestras pizzas, si recuerdas de nuevo en el archivo use pizzas, nos desplazamos hacia abajo para abusar de la función de pizza. Dentro de aquí, tuvimos que restablecer el valor de todas las pizzas para que fueran una matriz vacía, ya que teníamos las pizzas existentes. Después de cada actualización, el conjunto completo de pizzas se agregaron luego a nuestros valores existentes, en lugar de reemplazar. Haz lo mismo sobre las órdenes en uso, salta al OnSnapshot donde podemos acceder a allorders.value. Esto equivale a una matriz vacía. Para probar esto, necesitamos abrir nuestro proyecto en dos pestañas separadas. Los colocaremos uno al lado del otro. La razón por la que hacemos esto es porque nuestros pedidos se colocan dentro de los componentes del menú, pero los vemos dentro de los componentes admin. Si tuviéramos que simplemente agregar un nuevo pedido, luego hacer clic en el “Administrador”, esto luego extraería automáticamente los pedidos actuales. No veríamos la funcionalidad en tiempo real, pero podemos ver esto si entramos en el menú, creamos un nuevo orden. Tenemos cinco pedidos, haga clic en “Colocar”. Se puede ver de inmediato que esto salta hasta seis nuevos pedidos. Probemos uno más. Esto salta hasta siete, y nuestro último pedido ahora está abajo en la parte inferior. 54. Cancelar la suscripción a las actualizaciones: Al usar OnSnapshot, el proceso de escuchar nuestras actualizaciones es continuo. Sin embargo, es posible que ya no necesitemos actualizaciones. Sí necesitamos una manera de desacoplar a este oyente para liberar todos los recursos. Hacer esto es relativamente sencillo. Cuando usamos en OnSnapshot, volverá a ser un método de cancelación de suscripción, que luego podremos llamar dentro de nuestra aplicación. Un caso de uso para esto podría estar dentro del administrador, por ejemplo si bajamos al fondo, actualmente estamos escuchando cualquiera de nuestros pedidos actuales. Pero en cuanto salgamos esta página y vayamos a visitar una nueva, ya no necesitamos escuchar nuevos pedidos. Podemos desacoplar a este oyente y liberar cualquier recurso del navegador. Para ello, vaya a usar el archivo orders.js, donde podemos almacenar la función de cancelación de suscripción en una variable. Como se mencionó, onsnapshot devolverá una función de cancelación de suscripción, que podremos almacenar dentro de una variable o constante. Actualmente el problema es que esta constante de cancelación de suscripción se encuentra dentro de esta función. Necesitamos una forma de acceder a esto afuera. Una forma de hacer esto es crear un nuevo ref justo afuera de aquí. Diremos const, darse de baja de los pedidos. Por defecto esta será una ref vacía. Podemos actualizar esto con el valor de darse de baja. Vamos a saltar a obtener órdenes. En la parte inferior de la sección de bandeja, justo encima del bloque catch, podemos agarrar nuestro ref, que se da de baja de todas las demás y establecer el valor para que sea igual a darse de baja. Ahora tenemos una función dessuscrita de la más antigua, que podemos llamar cuando ya no necesitemos escuchar ningún pedido. Podemos hacer esto dentro de un gancho de ciclo llamado desmontado. Necesitamos importar esto de la biblioteca vue. Ya tenemos OnMounted, que se ejecuta en cuanto el componente se monta en el DOM y luego OnUnMounted en cuanto salimos. Colocaremos esto en OnUnMounted. Esto va a ejecutar una función. Podemos probar esto con un registro de consola solo permite que el conocimiento funcione y diremos desmontado. Entonces accede a nuestro ref, que se da de baja del valor del punto de los pedidos. esto lo llamaremos como una función. Ahorra más para el administrador y abriremos herramientas del desarrollador en la consola. Entonces si desmontamos este componente moviéndonos a una página diferente, vemos nuestro registro de consola. Esto también debería llamar nuestra función de cancelación de suscripción. 55. Agregación de nuevos usuarios: Nuestra aplicación actualmente tiene la capacidad de dar de alta a nuevos usuarios. Pero cualquier nuevo usuario que se inscriba puede acceder a nuestro sitio completo. Esto incluye cualquiera de nuestras páginas y, lo que es más importante, la sección de administración. Necesitamos una forma de configurar a nuestros usuarios para permitir que solo los usuarios administradores autorizados entren en esta sección. Firebase tiene una solución para controlar el acceso de los usuarios mediante notificaciones personalizadas. Si estás usando una aplicación de producción, esta es una excelente manera de hacerlo y puedes encontrar más información con este enlace justo aquí. reclamos personalizados necesitan configurar en el lado del servidor para mayor seguridad. Podemos configurarlos usando Firebase Cloud Functions. Pero desafortunadamente, las funciones de Cloud requieren una actualización a un plan pago. Por esta razón, estaremos usando un enfoque diferente. Esto implicará configurar dentro de nuestra base de datos una colección de usuarios. Cada uno de estos documentos estará vinculado a un usuario dentro de nuestra sección de autenticación, usaremos este ID de usuario como ID del documento, tal como tenemos aquí con nuestros pedidos. Pero esto también significa que podemos crear un nuevo registro de usuario que contendrá alguna información adicional. Una de estas piezas de información será el rol del usuario. En el pasado, hemos creado nuestras pizzas y nuestros pedidos en el archivo firebase.js. Hemos creado referencia a cada una de estas colecciones. Entonces los hemos usado para crear nuestros nuevos documentos. Por ejemplo, use cestas y creamos un nuevo orden con la función AddNeWorder. Hemos utilizado el método AddDoc. Esto es empujado a esta referencia, un nuevo orden. Pero la parte clave a notar aquí al usar AddDoc es que no empujamos una nueva identificación para los documentos. Cada uno de estos documentos tiene un ID generado de forma única. Pero en cambio, queremos que la colección de nuestro usuario tenga el ID del documento que coincida con nuestro usuario dentro de la sección de autenticación, que es esta que acaba de estar aquí. En lugar de usar el método AddDoc, vamos a usar algo llamado SetDoc. Esto nos permitirá empujar algunos datos nuevos a una colección también establecer nuestro propio ID que queremos usar. Para hacer esto dentro de nuestro archivo firebase.js, exportamos nuestra base de datos, que ahora podemos usar en el archivo use of.js. Salta a este componible. Ahora podemos importar los artículos que necesitamos. El primero, necesitamos importar el Doc desde Firebase. Además, el método del que acabamos hablar que fue SetDoc. Esto está disponible en firebase/firestore. También necesitamos importar esta referencia a nuestra base de datos. Importar DB desde nuestro archivo Firebase personalizado. Este será el método que usaremos para crear nuestros nuevos documentos. Pero también necesitamos una forma de acceder al ID actual del usuario que ha iniciado sesión. Bajemos a la función de registro, que está justo aquí. Cuando creamos un nuevo usuario con este método justo aquí, devuelve un objeto. Podemos desestructurar la propiedad del usuario para acceder a los datos que necesitamos. Entonces podemos usar estos datos justo debajo para construir un nuevo objeto de usuario. Const, UseObject. Podemos agregar alguna información adicional a nuestro usuario, cual será almacenada dentro de la base de datos. Primero, una propiedad llamada CreatedAt, que es igual a un nuevo dato de JavaScript. En realidad no necesitamos esta fecha para nuestro proyecto, pero siempre es útil agregarla en caso de que la necesitemos en el futuro. También podemos almacenar el correo electrónico del usuario, que podemos acceder a nuestro userobject.email. Entonces la parte clave es una nueva propiedad llamada isAdmin. Para comenzar, estableceremos que todos los usuarios nuevos tengan la propiedad isAdmin igual a false. También aún dentro de esta sección try tan pronto como el usuario se haya registrado y esto haya sido exitoso, también cerraremos el modal estableciendo el valor de apertura modal de inicio de sesión sea falso. Procesamiento. Accede al valor y establece esto igual a false. Justo debajo de nuestro objeto de usuario, podemos crear una nueva constante llamada NewDoc. Este será el nuevo documento que vamos a empujar a Firebase usando el método doc. El método Doc necesita tomarlo en una referencia a nuestra base de datos, que es una que acabamos de importar. Después separados por coma, el nombre de colección de los usuarios. El tercer valor va a ser el ID de usuario que quieres usar al crear estos documentos. Esto es accesible desde nuestro usuario. Acceder a la propiedad UID. Entonces para empujar esto a Firebase, podemos esperar a SetDoc. Los documentos, esta es una referencia que creamos justo aquí. Pase esto como primer valor. Entonces el segundo valor son los datos de nuestro registro, que se almacenan dentro del objeto de usuario. Solo para aclarar lo que estamos haciendo aquí, cuando un nuevo usuario se registre, este nuevo usuario se creará primero dentro de esta sección de autenticación. Entonces vamos a construir un nuevo objeto de usuario usando este ID. Instale esta información adicional dentro de la base de datos. Pero justo antes de probar esto, dado que ya tenemos algunos usuarios registrados en la sección de autenticación, que no está vinculada a nuestra base de datos, primero necesitamos borrar a estos usuarios. Dejemos esta cuenta. También este. Borrar cualquier usuario existente. Esto no debería ser todo lo que necesitamos. Tenemos el nuevo objeto de usuario. Tenemos nuestros documentos se fijó en el doc. Deberíamos tener toda nuestra base de datos de importaciones. Solo tenemos que asegurarnos de que esto también se explote. Volvamos a nuestro proyecto. Crea un nuevo usuario , haz clic en Regístrate. A Firebase y a la sección de autenticación, tenemos nuestro nuevo usuario. Aviso ID de usuario, que comienza con 08. El tuyo será diferente, claro. Saltar a la base de datos como colección del usuario, que comienza con la misma referencia de documento. Esto va a ser útil porque cuando autenticamos por primera vez a nuestro usuario, podemos tener acceso al ID de usuario. Entonces también podemos acceder a la propiedad isAdmin. Para empezar, lo que vamos a hacer es que vamos a hacer clic en el campo isAdmin. Cambios iguales para ser verdad. Tenemos al menos un usuario administrador. Luego crearemos un segundo usuario con el valor isAdmin establecido para que sea falso. Vuelve a iniciar sesión, crear una nueva cuenta. Regístrate este, ahí está nuestra segunda cuenta con isAdmin configurado para ser falso. Ahora tenemos dos usuarios con diferentes niveles de acceso. Usaremos esto en nuestra aplicación para permitir que solo los usuarios admin ingresen a nuestra sección de administración. 56. Recuperación de usuarios de administradores: El primer paso para permitir solo un acceso de administrador dentro de nuestra aplicación es recuperar al usuario actual de nuestra base de datos y verificar si hay propiedad isAdmin está establecida en true. Ya que estaremos recuperando usuarios, podemos crear una referencia a la colección de base de datos dentro de nuestro archivo Firebase. Al igual que hicimos con pizzas y pedidos, crearemos DBUSersRef, que apuntará a la colección de nuestros usuarios. Di esto, y luego en el archivo useAuth.js. Este tip nuestra importación, y vamos a hacer uso de esto muy pronto. Luego dentro de nuestra función, crearemos una nueva ref llamada userIsAdmin, que inicialmente se establecerá en el valor de false. Este valor predeterminado de false se actualizará después de que creamos nuestra función. Esta función va a tomar nuestros datos de usuario, tomará el ID del usuario registrado , recuperará el registro de nuestra base de y verificará si la propiedad isAdmin está establecida en true. Vamos a crear una función, esta será asíncrona, llamada CheckAdminRole. Primero creamos una sentencia is donde podamos verificar si nuestros datos de usuario, que es este justo aquí, .value, podemos verificar si este tiene el uid. También agregaremos el signo de interrogación porque a veces este valor será nulo. Luego dentro podemos recuperar los datos actuales del usuario de la base de datos. Podemos hacer esto creando un documento con la función doc a la que queremos acceder. Primero, accederemos al DBBusersRef, que es nuestra colección, luego podremos acceder a un registro en particular por el ID. Este ID se puede recuperar de nuestro UserData.value.uid. Copia, pega esto en. Se encuentra dentro de una constante llamada DocRef. Entonces para llamar realmente para esta información, podemos esperar una función llamada getDoc. Pasaremos en nuestro documento la referencia esto dentro de una constante llamada usuario. Entonces necesitamos formar dos cheques dentro de una declaración is. En primer lugar, accede a nuestro user.exists, este método existe está disponible en el usuario, y verificar si se encuentra un documento, y luego usando el doble ampersand, también realizaremos una segunda comprobación, y esto es para verificar si el campo isAdmin está configurado para ser verdadero. También podemos hacer esto en el objeto user, que tiene un método llamado data, que nos dará acceso a cualquiera de estas propiedades, por lo que data.isAdmin. Si ambas condiciones son verdaderas, entonces podemos actualizar nuestro userIsAdmin.value para que sea igual a true. Si no, dentro de una sentencia else, estableceremos el userIsAdmin para que sea igual a false, así que pega esto en. Establezca esto en false. También necesitaremos importar el método getDoc desde Firestore. Nuestro valor UserIsAdmin se utilizará en otros archivos y componentes para verificar si se permite el acceso. No hace falta que devolvamos esto abajo en la parte inferior. Recuerda aunque todo lo que hemos hecho aquí es crear una nueva función. Aún no lo hemos llamado para ejecutar el código dentro. El lugar para ejecutar este código va a estar dentro del AuthObserver. Desplázate hacia abajo hasta onAuthStateChanged y el código dentro de aquí se ejecutará cada vez se detecte un cambio de usuario. Si tengo acceso a un usuario, si alguien ha iniciado sesión, entonces comprobaremos el rol de administrador. Sin embargo, si el usuario sale de la sesión, queremos actualizar UserIsAdmin.value para que sea igual a false. Con esto ahora todo en su lugar, pasemos a nuestra vista de administración. Podemos acceder a UserIsAdmin, y recuerda, esta comprobación actual para nuestra sección de administración solo está comprobando si el usuario está conectado. En realidad no es verificar si tienen acceso a esta página. Podemos mejorar esto cambiando esto para que sea UserIsAdmin . Probemos esto. En la sección de administración, vamos a iniciar sesión. En primer lugar, este es el correo electrónico que se ingresa, que no es un administrador. Agrega el correo electrónico y la contraseña, inicia sesión. Bueno. Esto no nos está dando acceso a la sección de administración. Cerrar sesión e iniciar sesión con el usuario administrador. Inicia sesión y en cuanto esto suceda, verificamos el rol de administrador, que actualmente es cierto. Esto luego actualizará nuestro valor variable de userIsAdmin, que nos da acceso. Podemos hacer clic en Cerrar sesión. Tan pronto como esto suceda, se ejecutará la función authStateChanged, configurará nuestro userIsAdmin para que sea igual a false, ocultando nuestra sección admin de la vista. 57. Actualización de los usuarios regulares: Cuando tenemos este proyecto terminado, lo entregamos al cliente. Lo último que queremos hacer es hacer que el cliente en nuestra base de datos y actualice esta propiedad de administración cada vez que agregue un nuevo usuario o eliminar el acceso de administrador si un empleado abandona la empresa. Lo que vamos a hacer para mejorar esto es crear una nueva sección en el admin, que permitirá a un usuario administrador existente actualizar esto. Este proceso implicará la creación un nuevo componente de administración, donde el usuario administrador puede ingresar una dirección de correo electrónico del usuario que queremos actualizar. Dado que esto también se colocará en esta sección de administración, también significa que solo los usuarios administradores pueden realizar esta actualización. Una vez que busquemos al usuario por correo electrónico, éste mostrará un mensaje para decir si actualmente el usuario es administrador o no. Finalmente, tendremos un botón que luego alternará este rol de administrador para que sea verdadero o falso. Primero, vamos a crear nuestro nuevo componente en el directorio de componentes y en el administrador, nuevo archivo. Vamos a nombrar a este Toggleadmin.vue. Entonces crearemos nuestra estructura básica. Nuestra estructura básica va a ser similar a los otros componentes de administración. Podemos entrar en cualquiera de estas otras secciones de administración y bajar a la plantilla. Copiemos las secciones de esta plantilla, danos la misma estructura. Pega esto en nuestro Togkle.Admin. Vamos a simplificar esto. Podemos mover el formulario, así que recorta todo, desde el formulario de cierre hasta la etiqueta de formulario de apertura. Mantendremos estas mismas clases para el estilo, pero solo el nivel 3 se dirige a ser Toggle Admin Privileges. También necesitamos actualizar este nombre de variable. Todavía no hemos creado esto, pero este se llamará ShowToggleAdmin. Haz este estuche de camello. También usaremos esto en las otras ubicaciones y lo crearemos en el subíndice de la sección de script. Esto también utilizará la configuración del script. Necesidad de importar ref desde vista y crear nuestra constante que es ShowToggleAdmin. Envuelva esto en una ref con un valor predeterminado de true. Esto significa que, por defecto, podremos ver la sección dentro del admin, y luego podremos hacer clic en el botón Ocultar cuando no necesitemos ver esta sección. A las vistas y en la vista de administración para importar esto. Duplicemos este. Esto es ToggleAdmin. Esto también es ToggleAdmin. Coloca esto justo debajo de nuestros pedidos. Ir a la página Admin, abajo a la parte inferior donde podemos ver otros componentes. De vuelta a este Toggleadmin.vue. Lo que vamos a hacer es crear dos nuevas secciones. Primero será un formulario donde podremos encontrar un usuario ingresando el correo electrónico del usuario. Necesitamos una constante para mantener este correo electrónico. Esto podría ser ref, por lo que const email, y el valor inicial será una cadena. Solo queremos mostrar este contenido que vamos a colocar ahora si ShowToggleAdmin es igual a true. Debajo del encabezado, crea un nuevo div. Podemos hacer uso de renderizado condicional con el if. Solo mostraremos esta sección si ShowToggleAdmin es igual a true. Colocar ahora formulario. Esta forma será bastante sencilla. Crearemos un div, la clase de form_group. Luego dentro de aquí, agregaremos una etiqueta y también una entrada de correo electrónico para que el usuario pueda buscar por correo electrónico. Primero, la etiqueta o correo electrónico con un texto para encontrar usuario por correo electrónico. La entrada. Este tendrá el tipo de ID de correo electrónico. También envíe por correo electrónico un valor de texto de marcador de posición de enter email. Entonces podemos usar V-model, que va a vincular el valor a nuestro correo electrónico arriba en la parte superior. A continuación, justo debajo de esta sección div, también colocaremos en un botón el cual va a enviar este formulario. El tipo de botón, esto luego activará una función para encontrar a nuestro usuario. Todavía no hemos creado esta función, pero la agregaremos por ahora. [inaudible] click evitará el comportamiento predeterminado y esto activará la función off, que pronto creará la llamada, FindUser. FindUser también necesita tomar esta dirección de correo electrónico que hemos almacenado aquí arriba. Introduce un texto de buscar usuario. Entonces toda la funcionalidad para esto habrá terminado y voy a usar off componible. En la parte superior, lo primero que haremos es crear dos constantes más. El primero va a ser para un mensaje. Llamaremos a esto el ToggLeadMinMessage, que hará uso de ref y una cadena vacía para empezar, y una segunda constante llamada selectedUser. Este será un contenedor para contener a un usuario que busquemos. Estableceremos esto igual a ref y el valor inicial de null. Este ToggleadMinMessage contendrá el valor, que diremos si el usuario es administrador o no, o si no se puede encontrar con el correo electrónico proporcionado. Vamos a crear nuestra función, así asincrónica llamada findUser. Vamos a usar más allá del correo electrónico del usuario que queremos buscar. Colocar una sección try y un catch como error. Entonces podemos ponernos a trabajar dentro de la sección try. Lo primero que haremos dentro de aquí es borrar cualquier mensaje que podamos tener previamente. Esto se almacena en ToggleadMinMessage.Value. Establezca esto en una cadena vacía. Entonces también crearemos una sentencia condicional y esto comprobará si el usuario es admin. Recuerde que actualmente tenemos esta propiedad establecida aquí. Si esto es igual a false, entonces al usuario no se le permite actualizar la propiedad admin, por lo que volveremos fuera de esta función. Recuerda esas cosas que realmente llamamos sobre esto desde la sección de administración. Esta sección ya debería estar protegida de todos modos, pero esto es solo un cheque adicional por si acaso. A continuación, usaremos el método de consulta de Firebase. Esto nos permitirá buscar un registro en particular si una sola persona es la colección del usuario que se almacena en DBUSersRef. Después filtraremos esto usando el método where. Queremos verificar la propiedad de correo electrónico y verificar si esto es igual a una dirección de correo electrónico en particular. Esta dirección de correo electrónico que queremos verificar es la que se pasa a todas las funciones en este extremo, y esto verificará a todos nuestros usuarios contra la propiedad de correo electrónico y verificará si es la que se pasa de nuestro formulario. Lo que hay dentro de una constante llamada datos de consulta. Entonces podemos hacer una solicitud a esto desde Firebase esperando GetDocs. Analizar los datos de consulta y luego almacenarlos dentro de una constante llamada usuario. Este usuario será el valor devuelto por Firebase. Usando este objeto de usuario, podemos construir un nuevo objeto de usuario que contenga solo las propiedades que necesitamos. Recuerda cuando hemos mirado estos objetos, que recuperamos de Firebase en el pasado, recuperamos mucha información, y la mayor parte, no necesitamos. Creamos un nuevo objeto de usuario, lo colocamos en el ID, que podemos obtener de nuestro usuario, los docs, y GetDocs va a devolver múltiples documentos, pero solo deberíamos tener usuario con un correo electrónico único. Por esta razón, podemos seleccionar el primer documento con el número de índice 0. Seleccione el ID y luego dupliquemos esto dos veces. El segundo inmueble es el correo electrónico. Cambiar ambos de estos. La tercera propiedad que necesitamos será isAdmin. Incluso como un objeto de usuario más simple que contiene solo las propiedades que necesitamos. Entonces podemos establecer nuestro usuario seleccionado para que sea igual a este objeto. Recordar.Valor. Este es el caso si todo esto tiene éxito. Si no, podemos actualizar el SelectedUser.value para que sea igual a nulo. Luego también actualice nuestro valor ToggleadMinMessage para que sea igual a una cadena. Puedes colocar en cualquier mensaje que quieras dentro de aquí, pero voy a decir que ningún usuario encontró con ese correo electrónico. También necesitamos importar estos métodos desde Firebase, que solo usaremos. Tenemos la consulta, tenemos donde, tenemos GetDocs. De hecho, justo antes de hacer esto, necesitamos llamar también al método de datos antes del correo electrónico. Lo mismo antes de IsAdmin. Esta función extraerá las propiedades que necesitamos de cada documento, así que sobre estas importaciones arriba en la parte superior de nuestro Firestore, tenemos getDocs, la consulta, y también dónde. Entonces finalmente, abajo en la parte inferior la sentencia return, podemos devolver nuestra función que era FindUser, el valor selectedUser y también el mensaje que era ToggLeadMinMessage. Ahí estamos. Guarde este archivo y acabamos de terminar. A continuación, los importaremos y los usaremos en el ToggleAdminComponents. 58. Actualización de los usuarios regulares a la parte 2: Anteriormente creamos una función para encontrar un usuario por su correo electrónico, y luego almacenamos este valor en esta constante de usuario seleccionada. Ahora nos dirigiremos al componente Toggleadmin.vue para importarlos en la parte superior. Importaremos useAuth, y esto es desde la ruta del archivo de @/Composable/useAuth. Luego extraeremos y almacenaremos estos valores de retorno dentro de una constante. Entonces necesitamos encontrar, necesitamos el selectedUser, y también toggleAdminMessage es igual a useAuth, llamar a esta función, luego desplazarse hacia abajo. Justo debajo de esta sección del formulario, crearemos una segunda sección que mostrará al usuario si se ha encontrado alguno. También tendrá un mensaje para mostrar si un usuario es actualmente administrador o no, luego un botón para activar una función para alternar la propiedad admin. Así que crea div para esta sección. Queremos usar el if para mostrar solo esta sección si el selectedUser es igual a una clase de selected_user. Al elemento p donde pueda dar salida al mensaje admin. Esto fue ToggLeadMinMessage y luego un segundo elemento p justo debajo. Este va a tener una cadena de texto donde el valor del usuario está configurado actualmente como administrador o no administrador. Vamos a decir usuario, y luego pasarlo en el selectedUser.email actualmente está configurado como, y luego queremos establecer dinámicamente si esto es o falso. La forma en que podemos hacer esto es seleccionando nuestro SelectedUser.isAdmin. Usando el operador ternario de JavaScript, podemos mostrar el texto de admin si esto es cierto. Si no, un texto de no admin. El elemento final para entrar dentro de esta sección es un botón. Este botón es ahora para un clic, evitar el valor predeterminado. Esto activará una función que aún no hemos creado llamada ToggleAdmin. Volveremos a esta función en un momento, pero por ahora, el texto de click aquí para alternar la configuración de admin. Guarda esto y luego podremos volver a nuestro uso de componible, donde podremos crear esta función ToggleAdmin. Asincrónico, ToggleAdmin, crea el bloque try y catch. Al igual que hemos hecho anteriormente, comenzaremos con una declaración if para verificar si el usuario es el valor de administrador. Si no, volveremos fuera de esta función porque no están autorizados. Esto se encuentra en UserIsAdmin.value. Esto es falso, devolveremos esta función antes de realizar cualquier cambio. Ahora necesitamos crear una referencia a un documento en particular que queremos actualizar, almacenar esto dentro de una constante llamada DocRef. Entonces podemos construir esto con este método doc de Firebase. Toma en una referencia a nuestra base de datos queremos referirnos a la colección del usuario. Entonces finalmente, queremos encontrar un documento por el DNI. Podemos hacer esto agarrando nuestro SelectedUser y accediendo a la propiedad ID. Así que SelectedUser.Value.id Recuerda que lo que queremos hacer con este documento es actualizar la propiedad isAdmin para que sea contrario de lo que es actualmente. Para ello, podemos escribir un método de Firebase llamado UpdateDoc. Pasaremos en el documento de referencia anterior. Entonces como objeto, podemos establecer exactamente qué propiedades queremos actualizar. Solo queremos actualizar la propiedad isAdmin para que sea lo contrario de lo que es actualmente. Podríamos hacer esto accediendo a nuestra propiedad selectedUser.value.isAdmin y establecer esto para que sea lo contrario de lo que es actualmente. Una vez que hayamos actualizado nuestro documento de Firebase, volveremos a llamar a FindUser, que luego recuperará y configurará nuestros datos de usuario y actualizará cualquier componente. También necesitamos pasar esto, el correo electrónico del usuario, que tendrá en SelectedUser.Value.email. Simplemente lo colocaremos en un simple registro de consola en la sección de errores. También como hemos usado el método UpdateDoc de Firebase, necesitamos importar esto en la parte superior y luego devolver la función ToggleAdmin abajo en la parte inferior. Volver al ToggleAdmin.view donde realmente llamamos a esta función desde nuestro botón, que está justo aquí, pero aún necesitamos importar esto desde nuestro componible. Esto debería ser todo ahora en su lugar. Pasemos al administrador. Es la dirección de correo electrónico es actualmente el administrador, pero la otra está establecida para ser falsa. Vamos a alternar esto ahora. Haga clic en “Buscar usuario”. Este usuario no está recuperado. Podemos ver que la propiedad de isAdmin está establecida para ser falsa. Haga clic en “Toggle”. Esto luego se actualiza para ser un usuario administrador, que también se puede ver dentro de la consola. Esto no es cierto. Luego reinstalaremos esto de nuevo para que sea falso, lo que también podemos ver actualizado en la base de datos. 59. Reglas de Firebase: Esta ahora va a ser la parte donde aumentemos la seguridad para nuestra aplicación en el lado de la base de datos. Qué haremos dentro de la consola de Firebase si vas a la base de datos de Firestore, y luego tenemos esta opción llamada reglas. Esto nos permitirá agregar algunas reglas de seguridad a nuestra base de datos para determinar quién puede hacer qué. Podemos establecer quién quiere crear, leer, actualizar y eliminar datos de nuestra base de datos, y podemos ser más específicos sobre a qué documentos o colecciones se aplicarán estas reglas. Por el momento, nuestras reglas de base de datos no son seguras. Si echamos un vistazo, tenemos esta cantidad aquí que coincide con cierta colección de documentos en nuestra base de datos. Por el momento, esto apunta al punto de entrada exterior de nuestra base de datos. Luego anidadas dentro podemos agregar coincidencias adicionales para ser más específicos sobre qué documentos o colecciones se aplicarán las reglas dentro. Esta configuración actual de documento es igual a estrella estrella coincidirá con todos los documentos de toda nuestra base de datos. Nuestra base de datos no es segura ya que permite el acceso completo de lectura y escritura siempre y cuando estemos dentro un mes a partir de la creación de la base de datos. Esta regla de solo un mes es una característica de seguridad, así que no olvides apagar el acceso completo. Esto volverá a proteger nuestra base de datos si olvidamos volver y ajustar estas reglas. Para agregar nuestras propias reglas, lo que haremos es eliminar esta coincidencia interna y comenzar a escribir nuestras propias reglas. Eliminaré esto y dejaré la coincidencia externa, que nuevamente apunta a nuestra base de datos completa. Entonces podemos crear una coincidencia anidada. Empezaremos con nuestra colección de pizzas, así que /slash pizzas, y luego también tenemos los pedidos y también los usuarios. También podemos agregar estas reglas. Entonces recuerda, cualquiera de estos documentos de pizza se almacena en una identificación de documentos únicos. Podemos colocar en una variable y darle a esto un nombre de doc Id. Esto nos permitirá acceder al documento ID dentro de esta sección. Para las pizzas, comenzaremos diciendo permitir leer. Permitimos leer porque estamos bien con cualquiera que lea los elementos del menú. Sin embargo, a la hora de crear, actualizar o eliminar pizzas, estas necesitan ser controladas. También podemos agrupar estas operaciones juntas. Podemos decir permitir, crear, actualizar, y también eliminar. Mientras se cumplan ciertas condiciones, solo queremos permitir estas tres operaciones si una determinada condición es cierta. Esta condición es que son un usuario administrador. Lo primero que hay que hacer es verificar si el usuario está realmente autenticado. Podemos pasar una sentencia if donde podemos acceder al objeto request donde podemos acceder a la propiedad off y podemos verificar si esto no es igual a null. Esto significa que el usuario que está haciendo la solicitud de estos documentos en particular dentro de nuestras pizzas está actualmente autenticado. Este es el primer paso. Tenemos un usuario autenticado, o también necesitamos acceder a la propiedad de un usuario de is admin dentro de la base de datos. Podemos hacer esto usando un doble ampersand, la cadena en un cheque adicional. Podemos acceder a una función get proporcionada por Firebase, que nos permitirá agregar una ruta de archivo a un documento en particular. Dentro de aquí tenemos que comenzar desde el camino raíz. La coincidencia muy externa, que está apuntando a nuestra base de datos. Podemos copiar esta sección y pegarla en. Entonces tal como lo hemos hecho aquí, podemos agregar el nombre de nuestra colección. Queremos apuntar a /usuarios, y luego a un ID de usuario en particular. Podemos acceder al Id de usuario actual desde este objeto request.auth. Justo después de /users, podemos insertar una variable con el símbolo del dólar, abrir los corchetes, solicitar personalmente .auth, y luego podemos acceder al uid. Esto nos lleva al documento particular que desea acceder. Luego justo después de estos corchetes, accedemos a los datos y luego a la propiedad que es isAdmin, mayúscula A. Una vez que accedamos a esta propiedad isAdmin, también querremos verificar si esto es igual a true. Sólo para aclarar, estamos haciendo en dos cheques aquí. Estamos comprobando si antes que nada, el usuario está realmente autenticado, lo que significa que ha iniciado sesión correctamente. La segunda comprobación es saltar a la colección del usuario y luego verificar si la propiedad isAdmin también está establecida en true. Antes de ir más lejos, probemos estas reglas dentro del patio de juego de reglas. Podemos ampliar esto y podemos crear diferentes tipos de simulación para obtener nuestros datos, para crear nuevos datos, para actualizar y también eliminar también. La ubicación. Este es el camino que estamos comprobando actualmente. Es /pizzas /docid. Queremos probar esto con un usuario autenticado. Nuestro proveedor de autenticación es la contraseña, luego el UID de Firebase. Este es el ID de usuario que está realizando la solicitud. Voy a agarrar esto. Sin moverme con esta página, voy a hacer clic derecho y abrir la autenticación en una nueva pestaña. Vamos a copiar. De hecho, entraremos en la base de datos, en los usuarios. Este es un ID único. Vamos a copiar esto y este usuario es el administrador. Voy a pegar esto. Da clic en Ejecutar y hacemos una solicitud de obtención. Aquí podemos ver esto se destaca en la colección de pizzas. Cualquiera puede leer estos datos. Esperaríamos que esto estuviera bien. Pero las restricciones se encuentran cuando creamos, actualizamos y eliminamos datos. Para crear datos, optimista nos dio un error. Vamos a ver esto. Esto apunta a nuestra coincidencia de base de datos. La base de datos es, una base de datos, documentos y creo que esto solo necesita un símbolo de dólar ya que es una variable. Despedir. También solo necesitamos los corchetes regulares para que coincidan con este de aquí para insertar la variable. Intentaremos esto una vez más. Ejecute este ancho en el Create. Esto está bien. Actualización. Esto está bien. Recuerda que somos un usuario de IsAdmin. También la eliminación funciona bien. Cambiemos esto para que sea el usuario que no esté autenticado, por lo que isAdmin es igual a false. Copia esto, pega esto en. Estamos ejecutando una solicitud de eliminación. Esto se niega ya que no somos administradores, pero aún así deberíamos poder obtener nuestros datos ya que a cualquiera se le permite leer nuestras pizzas. Crear, debería haber un fracaso. Por último la actualización 2. Bien, entonces ahora sabemos que esto está funcionando. Podemos repetirlo para otras colecciones. Pero nuestras órdenes, queremos que cualquiera pueda crear un pedido. Pero cualquiera de las otras tres operaciones solo debe ser realizada por un usuario administrador. Vamos a copiar este partido. Después pega esto justo debajo. Este es para nuestras órdenes. También puedes cambiar el nombre de esta variable si quieres. Por aquí, vamos a permitir que cualquiera cree un pedido. Queremos agregar algunas restricciones cuando estamos leyendo, actualizando o eliminando. Se aplican las mismas reglas. Queremos verificar si el usuario está conectado y autenticado. También obtendremos la propiedad isAdmin de la colección del usuario. Todo esto puede seguir siendo el mismo. Prueba esto. Esto son órdenes. Eso está bien. Iremos a Crear. Recuerda que cualquiera puede crear un nuevo pedido y seguimos con el usuario, que no es un administrador. Debería estar bien. Ahora podemos probar las otras tres operaciones. Obtener, esto es un fracaso como se esperaba. Actualización. Eliminar. Entonces solo para confirmar, saltaremos a la colección de nuestro usuario, y tomaremos el ID para el usuario, que es un administrador. Elegimos uno. Iré al usuario que es administrador, puede hacer una eliminación, una actualización, una creación, y también una lectura. El último que tenemos que hacer es hacer coincidir la colección de nuestro usuario. Deben permitir que cualquiera cree una cuenta para empezar. Crearemos una coincidencia o /usuarios, pasaremos en la variable de DocID. Entonces queremos permitir que cualquiera cree una nueva cuenta, y también queremos que los usuarios lean sus propios datos. Vamos a permitir la lectura. Pero también vamos a restringir esto. También comprobaremos si el usuario está autenticado. Pega esto en. También para permitir que el usuario solo acceda a sus propios datos, lo que vamos a hacer es verificar si el usuario; que está disponible en el objeto request es igual al mismo ID de usuario, que se pasa a esta variable. El doble ampersand forman un segundo cheque. Solicitud de acceso para auth el uid. Esta es la identificación de la persona que realmente está haciendo la solicitud. Queremos verificar si esto es igual al ID del documento. Por lo tanto, si ambos coinciden, el usuario está leyendo sus propios datos, pero además de los usuarios que leen sus propios datos, también queremos permitir que un usuario pueda leer los datos de cualquier usuario además. de esto, también queremos envolver esto dentro de los corchetes, para luego realizar una segunda comprobación. Entonces también permita que esto sea cierto si el usuario es administrador. Ya sabemos cómo obtener esta información, y esto es con esta función get justo arriba. Copia todo, desde llegar directo hasta el final donde comprobamos si el administrador es igual a true, y luego ten cuidado de pegar esto dentro de los corchetes. Esto ahora siempre comprobará si el usuario está autenticado, y luego o bien comprobará si el usuario es administrador o si está accediendo a sus propios datos. De hecho, este necesita ser el operador JavaScript OR en lugar del AND, lo que significa que cualquiera de estos lados puede ser cierto. El último en verificar es permitir la actualización, y eliminar funciones si un usuario administrador. Vamos a permitir. Combínalas en actualización y elimina secciones. Añadiremos las mismas condiciones que cualquiera de estas anteriores. Comprobaremos si el usuario está conectado, y si también es administrador. Copia esta línea, pega esto, y esto es ahora todas las reglas en su lugar. Esto también podría extenderse para permitir a los usuarios actualizar su propia información también pero esto está bien por ahora. Pero también incluye mucho código duplicado donde comprobamos si el usuario es un administrador con la función get. Podemos mejorar esto creando funciones reutilizables. Crearemos dos funciones. Una sería verificar si el usuario es administrador, y luego otra para verificar si el usuario está accediendo a su propia información. pondremos todo dentro de la cerilla exterior. Poner algo de espacio. Luego crearemos una función tal como lo haremos en JavaScript, entonces isAdmin, y luego una segunda función llamada isAccounTowner. IsAdmin, este es el que ahora usamos bastantes veces. Queremos copiar la solicitud de auth no es igual a null. Todo el camino hasta el final de la función get, copia esto. Entra en la función isAdmin, y luego queremos devolver este valor, así que pega esto en. Esto significará que nuestra función devolverá un valor verdadero o falso. Entonces isAccountowner, esto también necesita verificar si el usuario está autenticado, por lo que devolveremos las solicitudes de auth no es igual a null. Entonces al igual que hicimos en la parte inferior con los usuarios, también queremos verificar si la identificación de la persona que realiza la solicitud es igual a la identificación del documento, así que copia esto. Encadena esto con los dobles ampersands, pégalo en. Pero recuerda aquí estamos accediendo a la identificación del documento. El ID de este documento solo está disponible dentro de esta sección, así que lo que tenemos que hacer es pasar la función, el ID, y luego reemplazaremos esta. Añadiremos en el ID de este documento cuando llamemos a esta función. Ya casi estamos ahí. Lo que tenemos que hacer es eliminar todo este código de cubículo, y reemplazarlos con nuestras dos funciones. El primero es IsAdmin. Esto es verificar que el usuario esté autenticado, y también si es administrador para que podamos eliminar todo el código de la coincidencia de nuestras pizzas. Justo después de estas declaraciones, elimine toda esta línea, reemplace esta con nuestra función exactamente igual para nuestros pedidos. Estamos comprobando lo mismo. Corta todo esto fuera de lugar. Poner función en. La última etapa son nuestros usuarios, y esto va a utilizar ambas funciones. Para la lectura, recortaremos todo después de la declaración if. Esto va a hacer uso de ambas funciones. Si esAccountowner, la identificación será la identificación del documento anterior. Todo es admin. Esto realizará las mismas dos comprobaciones que teníamos antes, y para la solicitud de eliminación, vamos a mover todo después de las sentencias if, y simplemente pasar la función isAdmin. Esto ahora se ve mucho más limpio, y mucho más fácil de leer. Lo último es probar nuestras condiciones de usuario dentro del patio de recreo. En primer lugar, la ubicación estamos probando la ruta del usuario. Comenzaremos copiando el ID de usuario del usuario administrador. IsAdmin es igual a true, pégalo en. Este debería estar permitido ya que somos el usuario administrador. También realizaremos la segunda verificación para ver si el dueño de la cuenta está haciendo esta solicitud. A pesar de que no somos el administrador, copiemos al usuario no administrador. Pégalo en, en el código. Ahora se niega esta simulación. La razón por la que esto se niega es porque aunque somos dueños de una cuenta, no estamos accediendo a nuestros propios documentos. Simplemente estamos accediendo a cualquier documento genérico dentro de la colección del usuario. Para probar un acceso a nuestros propios documentos, vamos a mover la variable, y pegar en el mismo ID de usuario que tenemos a continuación. Ejecuta esto. Esto ahora funciona ya que somos el dueño de la cuenta de los documentos que estamos comprobando. Crear. Probemos esto. Esto funciona. También podemos reemplazar la variable. Debería funcionar para cualquier documento. Intentaremos con uno más. Intentaremos una eliminación. Ejecute esto como el usuario no administrador, y esto debería ser un error. Se conmuta hacia fuera. Copiar el usuario administrador. Pega esto en, y este está permitido ya que somos un usuario admin. Ahí vamos. Esto parece que todo está funcionando bien con nuestras reglas de seguridad, y también puedes actualizar o jugar con estas reglas si quieres. Pero por ahora, nuestra app es mucho más segura, y publicaremos estos cambios.