Curso sobre cómo crear una aplicación vue desde cero
🗓 2 de agosto de 2020 - ⏱ 5 minutos
¿Un error 😱 ? Edita con una Pull Request



Después de unos cuantos directos en Twitch creando una aplicación para la gestión de nuestras plantas desde cero, he creado este post donde voy a dejar un listado explicando que se ha hecho en cada vídeo para que sea más fácil seguir el curso.
Primer paso
Suscríbete a mi canal de Youtube y Twitch para no perderte ningún video.
Segundo paso
Disfruta del curso y cualquier feedback será bienvenido ✌️.
¿Qué hemos usado para desarrollar la aplicación?
- ➡️ Vue
- ➡️ Tailwind
- ➡️ Firebase
- ➡️ Vuex
- ➡️ Vee Validate
- ➡️ Axios
- ➡️ Google Analytics
Parte 1 | Primeros pasos
Esta es la primera clase sobre cómo crear una aplicación Vue. En este episodio instalamos el proyecto con vue-cli, configuramos prettier + eslint, instalamos y configuramos tailwind, estuvimos organizando la estructura de carpetas a seguir y empezamos a crear la vista de añadir planta.
Parte 2 | Testear y configurar la aplicación
En esta clase configuramos el entorno de testing unitario y el coverage. Además estuvimos testeando los componentes desarrollados hasta ahora y creamos un formulario para añadir nuevas plantas en firebase.
Parte 3 | Crear proyecto en firebase y guardar datos
En esta clase terminamos de crear un componente autocomplete custom para buscar plantas en una api externa, configuramos axios para hacer peticiones a esa api, estuvimos creando el proyecto en firebase y guardamos nuestra primera planta.
Parte 4 | Abstracción de componentes
En esta clase solucionamos el error de CORS y estuvimos componentizando y abstrayendo componentes.
Parte 5 | Testing con Jest
Esta clase la dedicamos toda a realizar testing unitario con Jest.
Parte 6 | Validación de formulario y recuperar datos de firestore
En esta clase instalamos una fuente nueva con google fonts, añadimos validación al formulario con la nueva versión de vee validate y terminamos mostrando el listado de plantas almacenadas en firestore en la home.
Parte 7 | Crear una nueva vista e integrarla con firestore
En esta clase creamos la vista del detalle de una planta y la integramos con los datos almacenados en firestore.
Parte 8 | Configurar google analytics y desplegar en Netlify
En esta clase nos dió tiempo a muchas cosas. Primero configuramos google analytics, después desplegamos la aplicación usando Netlify, a continuación creamos la funcionalidad de registrar un día de riego en firestore.
Parte 9 | Integrando componentes externos
En esta clase integramos un componente externo para visualizar los días de riego registrados en la clase anterior.
Parte 10 | Crear login y registro con Firebase
En esta clase estuvimos creando la página del login con su formulario, también creamos la página del registro de usuario y creamos la funcionalidad tanto de hacer login con email y contraseña en firebase como de registrarse. Además, hicimos la funcionalidad de bloquear ciertas rutas si no estás logeado.
Parte 11 | Mejorando la aplicación
En esta clase hemos solucionado algunos bugs 🐛 visuales, hemos creado nueva lógica para que cada usuario tenga sus propias plantas y hemos actualizado el perfil del usuario en firebase para mostrar posteriormente su nombre en la home.