ESAT Online - Vue.js profesional en proyectos reales

INTRODUCCIÓN

Veamos qué es Vue y cómo aprender sus fundamentos para poder desarrollar proyectos con él.

VUE ESENCIAL

¿Qué es Vue y para qué sirve? Para poder explicarte lo que es Vue y entiendas los motivos por los que es una gran idea que dediques tiempo a dominarlo, primero tengo que mostrarte lo que no es Vue. Hagamos juntos un ejercicio para dejarlo claro.

Vue Devtools. Dentro del ecosistema Vue encontramos Vue Devtools, un complemento para las herramientas de desarrollo de tu navegador que mejora la experiencia de desarrollo con Vue.js. Veamos cómo funcionan.

Atributos dinámicos. Todos los atributos HTML que conoces son estáticos. Hasta ahora. ¿Qué te parecería poder convertirlos en dinámicos, para que en lugar de ver una simple string pudiesen evaluar ese texto como una expresión e interpolar su valor?

Renderizado de listas. Una de las directivas Vue más útiles es v-for. La vimos en la primera lección y es difícil no encontrársela en cualquier proyecto Vue. Permite atravesar una colección iterando sobre ella. Veamos cómo funciona.

Propiedades computadas. Con las propiedades computadas podemos realizar todo tipo de operaciones con el modelo, dentro de la instancia Vue, e interpolar el resultado haciendo referencia al identificador de la propiedad computada.

Eventos en Vue.js. Con Vue se acabó el tener que manipular el DOM directamente para enlazar elementos, eventos y métodos. Con un API muy sencilla y la directiva v-on tienes todo lo que necesitas para manejar eventos de forma expresiva y preocupándote sólo del modelo.

La instancia Vue. Ahora que seguro ya tienes una idea un poco más clara de lo que es Vue, vamos a dedicar unos minutos a conocer su instancia y cómo interactuar con ella.

Vue Watchers. Las propiedades computadas nos permiten componer datos usando otros datos (propiedades del modelo). Aunque en la mayoría de los casos es la estructura más utilizada, en otras ocasiones necesitamos algo 100% personalizado. Es ahí cuando los watchers entran en acción.

Renderizado condicional. Igual que la estructura de control if nos sirve para tomar decisones en base a una condición, con Vue podemos renderizar contenido en base a una condición o respuesta a una pregunta.

Filtros. Los filtros de Vue.js se utilizan (sobre todo) para alterar o transformar texto. Aceptan un valor y lo devuelven transformado de alguna forma. Usan el operador pipe (a la Unix) para poder concatenar varios filtros.

Ajax con Axios. Vue no incorpora funcionalidad para realizar peticiones HTTP a través de Ajax en la propia librería, ya que existen otras alternativas y no es necesario re-iventar la rueda. Una de esas alternativas es Axios. Veamos cómo funciona.

Data binding con estilos y clases. La directiva v-bind tiene un comportamiento especial con atributos de estilo (clase, sobre todo), lo cual nos permite aplicar de forma reactiva estilos CSS a nuestro proyecto.

Data binding en formularios. Si has tenido que desarrollar formularios complejos por tu cuenta sabrás que crear un sistema de validación puede resultar muy tedioso. Afortunadamente Vue funciona genial con los formularios. Su directiva v-model se adapta de forma reactiva y especial a cada uno de los elementos de UI de un formulario.

Introducción a componentes. Los componentes permiten crear elementos personalizados como un slider, un proyecto o un usuario para luego reutilizarlos en diferentes escenarios. Son el siguiente paso en tu camino de aprendizaje Vue.

VUE COMPONENTES

¿Qué son los componentes? Los componentes son instancias Vue reutilizables. Permiten agrupar y encapsular funcionalidad de cualquier tipo. Desde un botón hasta una tabla pasando por una sección entera de una Web. Veamos cómo definirlos.

Propiedades dinámicas. A través de las propiedades podemos crear componentes Vue.js que comparten la misma estructura (template) pero muestran diferente información (propiedades).

Componentes globales y locales. Veamos cuáles son las diferencias principales entre componentes Vue globales y locales y cómo utilizar ambos tipos de forma conjunta.

Plantillas de componentes. Hasta ahora conocemos una única forma de especificar un template para nuestro componente: inline. Veamos en qué situaciones los template inline se quedan cortos y qué otras opciones utilizar.

Eventos personalizados.Si con las propiedades pasamos información desde la instancia principal hacia el componente/s, ¿cómo comunicamos el componente con su instancia madre? Los componentes Vue pueden emitir eventos que son interceptados, lo que nos permite reaccionar con nuestra propia lógica.

Componentes dentro de componentes. Veamos cómo crear e instanciar componentes dentro de otros componentes y que estos se comuniquen vía eventos personalizados (con un payload específico), además de cómo acceder a la instancia principal u otros componentes gracias a las propiedades que Vue expone.

Distribuye contenido con slots. Los slots Vue son elementos que hacen de placeholder, lo que permite pasar al componente contenido de diferente naturaleza en cada instancia. En unos casos puede ser un párrafo, en otros una imagen y un enlace. No hay límite.

Cómo utilizar v-model en componentes. Aunque la directiva v-model no es más que “syntactic sugar” para utilizar v-bind y v-on a la vez sobre el evento input, es la forma más útil y conveniente de utilizar data binding en los dos sentidos. Veamos cómo utilizar toda la potencia de v-model en tus componentes.

Componentes dinámicos. En ocasiones es necesario disponer de varios componentes Vue pero renderizar sólo uno, es decir, utilizar componentes de forma dinámica. En esta lección daremos nuestros primeros pasos.

PROYECTO 1: VUEFILOS

Introducción. El primer proyecto del curso consiste en una herramienta para catalogar, comentar, votar y compartir recursos Vue. Todo ello en tiempo real. Hagamos un recorrido por todas las partes del proyecto.

Creación del proyecto. Usando Vue CLI vamos a crear las bases del Vuefilos con vue-router, Vuex, SASS y ESLint.

Componentes y Bulma. Definamos los componentes (vistas) de nuestra App. De paso instalaremos Bulma y haremos uso de este super-framework CSS.

Navegación. Vamos a extraer el layout de la barra de navegación a su propio componente.

Layout portada. Usando los componentes y clases Bulma podemos crear los bloques necesarios para listar y crear recursos Vue.

Firebase y route guards. Firebase es la base de datos NOSQL que vamos a utilizar para persistir los recursos de Vuefilos.

Configuración inicial Vuex. Vuex es el manager central de toda nuestra App. Veámos cómo configurarlo.

Login. Usando Firebase Authentication vamos a crear el layout y la lógica para hacer login en Vuefilos.

Logout. De igual forma, vamos a añadir la función para desconectar de Vuefilos.

Registro. Con login/out listo, vamos a permitir utilizar Firebase para registrar un usuario utilizando correo-e y contraseña.

Recuperar contraseña. Por supuesto, debemos activar alguna forma para que el usuario reinicie su contraseña.

Componentes auxiliares de éxito y error. Sería muy útil tener componentes re-utilizables para mostrar posibles errores y el estado de operaciones al usuario.

Añadir recursos. Vamos a crear la lógica para agregar recursos a Cloud Firestore.

Listar y eliminar mis recursos. Ahora que podemos añadir, tenemos que crear la lógica y funcionalidad para listar los recursos que se añaden.

Cargar otros recursos. En Vuefilos hacemos diferencia entre los recursos que añadimos nosotros y los que añaden el resto de usuarios.

Listar otros recursos. Cuando otros usuarios agreguen recursos, debemos proceder de forma especial si entorpecer la experiencia y solicitando al usuario, en tiempo real, que los añada a su stream.

Ver recursos. Utilizando el modal de Bulma, podemos visualizar un recurso y utilizar todas sus opciones.

Votar recursos. Cada usuario autentificado puede votar una vez un recurso.

Comentar recursos. Además de votar, podemos añadir comentarios en tiempo real.

Ver comentarios de recursos. Teniendo acceso al stream de comentarios, vamos a crear una vista para listar los comentarios.

Perfil de usuario. Desde el perfil permitimos al usuario modificar sus datos personales, correo-e y contraseña.

TOP recursos. Podemos crear un widget en nuestra App que liste los 5 recursos más votados.

Reglas Firestore y deploy. Debemos configurar Cloud Firestore para que cualquiera pueda leer, pero sólo los autentificados puedan escribir. Además, publicaremos nuestra App en Firebase Hosting.

PROYECTO 2: INSTAVUE

¿Qué vamos a construir? En esta primera lección del segundo proyecto veremos qué vamos a construir y de qué forma. Contamos con una base ya creada (usando los conocimientos adquiridos) para centrarnos en nuevas funciones y mécanicas.

Usando datos ficticios. Como paso intermedio antes de cargar la información desde Firebase, vamos a utilizar una colección de fotos (el modelo principal de nuestra App).

MomentJS. Para procesar las fechas de cada imagen (timestamp) vamos a utilizar la famosa librería MomentJS.

Conectando con Firebase. Como paso previo a utilizar datos “reales”, debemos conectar nuestra aplicación al servicio BaaS Google Firebase.

Configurando Vuex. Ahora que tenemos conexión con Firebase es momento de ajustar nuestro almacén de datos Vuex para comenzar a trabajar con usuarios, fotos y demás.

Registrando usuarios. Vamos a crear la lógica y estructura para permitir crear nuevos usuarios a través de Firebase Auth.

Login de usuarios. De igual forma, tenemos que permitir la opción de login de usuarios que ya tienen credenciales.

Recuperar contraseña. Debemos permitir a los usuarios que se han registrado recuperar sus credenciales.

Logout de usuarios. Para finalizar las acciones de autentificación de usuario, vamos a crear la función que permite salir del sistema a los usuarios autentificados.

Redirigir a home y catch all. Ahora que disponemos de varias vistas en nuestro enrutado, hagamos que el logo de nuestra App siempre nos lleve a la portada.

Mantener estado de usuario. Aunque nuestra App ya permite autentificar usuarios, si cambiamos de ruta o recargamos la App, ésta se pierde. Vamos a solucionarlo.

Route guards. Vamos a catalogar nuestras rutas en base a si son privadas o públicas para, en consecuencia, permitir o denegar el acceso a usuarios registrados o anónimos.

Agregar desde galería. Como primera opción para agregar contenido a nuestra App vamos a crear la funcionalidad para adjuntar desde la galería.

Revisar imagen antes de subir. Vamos a crear un componente para revisar el contenido que vamos a subir y, en un futuro, agregar filtros y captio.

Subir a Cloud Storage. Cada imagen gestionada con la App será subida al servicio Cloud Storage de Firebase. Veamos cómo.

Guardar en Cloud Firestore. Con la imagen guardada, es momento de crear un enlace a la misma en Cloud Firestore.

Cancelar el modal. Un breve paso para poder cancelar el modal de subida si cambiamos de opinión usando Vuex. También no permitir cancelar mientras se esté realizando la subida.

Escuchar el stream de fotos. Ahora que tenemos imágenes subidas a Firebase es el momento de hacer que nuestra aplicación las muestre en lugar de las locales.

Proteger captura con login. No debemos permitir que usuarios anónimos puedan acceder a añadir imágenes desde la App.

ScrollTop tras añadir. Vamos a aplicar un elegante efecto de “scroll up” cuando añadamos nuevas imágenes al stream principal.

Agregar caption. Las imágenes deben ir acompañadas de una descripción. Es hora de proveer un mecanismo para que el usuario pueda adjuntarla.

Aplicando filtros. Vamos a añadir la funcionalidad de aplicar filtros a nuestras capturas con la librería CSSGram.

Dos botones en footer. Hay que hacer sitio al botón de capturar en vivo, por lo que debemos añadir un segundo botón en el footer de nuestra App.

Capturar en vivo. Con la librería WebcamJS podemos usar nuestra webcam para capturar una instantánea y usarla en nuestra App.

Like fotos. Es el momento de crear la función que nos permita apreciar (like) el contenido que subamos con la App.

Eliminar imágenes. Cada usuario debe tener la posibilidad de eliminar sus propias subidas.

Perfil de usuario. Vamos a completar la vista de perfil donde el usuario puede cambiar sus datos personales, correo electrónico y contraseña.

Publicar en Firebase Hosting. Como paso final, usemos el hospedaje de Firebase para publicar nuestra App.