Recapitulación & Despedida

Si estás viendo este vídeo, quiere decir que has culminado el curso exitosamente. Te felicito por llegar hasta el final y te agradezco por haber seguido el curso conmigo. A modo de recapitulación, veamos todo lo que has aprendido en este curso. En este curso has aprendido como crear un proyecto de Vue3. Has aprendido como instalar sobre este proyecto de Vue3 tres un “vue-router” para trabajar las rutas con "vue". Cómo instalar "vuetify" también en su versión tres para usar los componentes que nos ofrece este framework de componentes. Hemos visto como leer la documentación de "vue", de “vue-router”, de “vuetify”, y luego hemos trabajado también con "pinia" para la gestión del estado de nuestro proyecto. Finalmente, como persistir los datos de nuestro "store" a través del “localStorage”. Esto es a nivel de dependencias. A nivel de proyecto hemos visto cual es la diferencia entre la carpeta "source", “public” y “dist”. Hemos trabajado el código de nuestro proyecto en la carpeta "source". Hemos publicado datos a través de la carpeta “public” y sabemos que “assets” se compilan en la carpeta “dist” En "source", hemos organizado nuestro código de tal manera que tenemos varios componentes. Tenemos los componentes asociados al carrito en una carpeta, los del menú de la izquierda en una carpeta y entendemos cuál es la responsabilidad de cada uno de estos componentes. Hemos hecho refactorización de nuestro código para organizar nuestros componentes en más componentes y así mismo hemos visto cómo crear funciones que pueden ser reutilizadas entre ellos. En un inicio creamos una carpeta de ejemplos en la que creamos un componente contador y vimos como escribir el código usando Composition API, pero también usando el estilo de Options API. Para que estés preparado ante ambos estilos de código. Luego hemos creado nuestros tipos, ya que estamos usando TypeScript en este proyecto. Hemos definido tres tipos para representar a nuestros productos, nuestras categorías y los detalles agregados al carrito de compras. Tenemos una carpeta “router” donde hemos definido nuestras rutas. Hemos visto cómo crear rutas y cómo cargar los componentes asociados a cada ruta de manera dinámica. Respecto a las rutas, tenemos rutas simples como “home”, como “cart”, como “about”, pero también hemos visto como trabajar con parámetros de ruta. Por ejemplo, para las categorías Tenemos una carpeta de “stores” en la que hemos empezado definiendo un solo "store" para nuestro carrito. Este "store" finalmente ha sido conectado con el “local storage” para que nuestros datos persistan, incluso si la página se recarga. Incluso si cierras la pestaña y te vuelves a abrir o si cierras el navegador completamente y lo vuelves a abrir. También hemos creado un “store” para nuestras categorías y un “store” para nuestros productos. Hemos visto como cargar la data usando la directiva “import”, pero también como cargar la data a través de peticiones “fetch”, ya que esa es la manera normal en que se consumiría una API. Hemos visto que los “stores” presentan un estado, presentan “getters” para valores calculados y presentan “actions” para manipular el estado. Hemos visto como podemos mostrar también un indicador de progreso, definiendo un valor booleano “loading” que condiciona nuestros componentes para actualizar nuestra interfaz de usuario usando este valor. Y hemos visto como definir nuestras vistas, que son componentes generales y que representan a páginas de nuestro sitio. También hemos visto cómo es que nuestro componente app, que es nuestro componente principal, engloba a todo el contenido de nuestro sitio. Y cómo es que podemos trabajar con "vue-router” En “TopBar” nosotros definimos enlaces a través de etiquetas router link y mostramos el contenido en esta etiqueta “RouterVue". Pero también hemos visto a través de código cómo podemos manipular la navegación usando “router.push”. Finalmente hemos visto también como es que podemos importar todas nuestras dependencias en este archivo main, ya que aquí tenemos por ejemplo la importación de vuetify, de pinia, de vue-router e incluso iconos de la biblioteca Material Design Icons. Hemos visto como crear una instancia de vuetify como crear una instancia de "vue" y cómo asociar nuestra aplicación "vue" con vuetifyn con vue-router y con pinia. Finalmente, cómo montamos todo nuestro proyecto de "vue" sobre un elemento que tiene como id app. Este elemento se encuentra definido en nuestro HTML. También hemos visto cómo usar la pestaña Network de la DevTools de Chrome para entender cómo es que todos los assets se descargan y en qué orden. De modo que tú puedas analizar como ocurre la carga de tu sitio en conexiones lentas y cómo mejorar dicha situación. Espero que este curso taller sido de ayuda y que hayas aprendido bastante. Además, que te haya gustado tanto como a mí. Todo lo que hemos visto sobre cómo filtrar por categorías y como ordenar productos a través de criterios son situaciones con las que tú te encuentras en el día a día trabajando como desarrollador frontend y lo que no hemos explorado en el curso es más bien con relación a un tema backend y el desarrollo de APIs. Si estás interesado en ello, coméntame para recomendarte material relacionado. Si te interesa aprender más sobre backend. Te comento que también tengo cursos de Laravel, que es un framework para backend, así como Vue es un framework para frontend. Laravel es un framework para backend. Así que una vez más, gracias por completar este curso. Te felicito por haber llegado hasta el final y cualquier duda que tengas, sin importar cuál sea la lección del curso, envíame tus preguntas para poder ayudarte, que lo haré de manera gustosa. Gracias y nos vemos en una próxima ocasión.

Crea una cuenta y continúa aprendiendo 🚀

Recapitulación & Despedida

Felicitaciones por completar el curso

Recapitulación de lo aprendido

Proyecto y dependencias

Estructura del proyecto

Organización del código

Composition API y Options API

Uso de TypeScript

Manejo de rutas

Stores

Vistas y componentes

Archivo main

Análisis de rendimiento

Cierre

¿Interesado en backend?

Preguntas en esta lección

Modales