Introducción
Introducción
¿Cómo funciona el curso?
¿Cómo hacer preguntas?
Instalaciones recomendadas y obligatorias
Reforzamiento de JavaScript
Introducción a la sección
Temas puntuales de la sección
Inicio de proyecto - Bases de JavaScript
Let vs Var vs Const
Template literals
Object literal
Arrays
Functions
Functions - Segunda Parte
Desestructuración de objectos
Desestructuración de Arreglos
Importaciones y exportaciones
Exportar funciones - Tarea
Promesas
Argumentos a las promesas
Fetch API
Axios
Async - Await
Async - Await - Aplicado
Ternarios y null check
Código fuente de la sección
Introducción a Vue.js
Introducción a la sección
Temas puntuales de la sección
Breve introducción sobre Vue.js
Puntos interesantes de Vue.js
Hola Mundo - Vue.js
Representación declarativa
Estado del componente - Data
Introducción a los eventos
Directiva v-for
Indices y desestructuración dentro de v-for
Directiva v-model
Modificadores de eventos
Directivas v-if y v-show
Recapitulación de la sección
Código fuente de la sección
Vue CLI - Primera aplicación real
Introducción a la sección
Temas puntuales de la sección
Bonus: Atajos de Vue.js
Inicio de proyecto - FundamentosApp
Estructura de directorios generada por defecto
Estructura básica del directorio SRC
Mi primer componente
Estado del componente y Vue DevTools
Propiedades computadas - Computed Properties
Incrementar y Decrementar
Properties - Props
Diferentes formas de definir las props
Validación de los props
Código fuente
IndecisionApp - Continuación
Introducción a la sección
Temas puntuales de la sección
Demostración del objetivo final
Continuación de proyecto - FundamentosApp
Indecision Component
Watch - Observar cambios en una propiedad reactiva
Realizar petición HTTP a un backend
Pulir detalles de nuestra aplicación
Código fuente de la sección
Introducción a las pruebas unitarias y de integración
Introducción a la sección
Temas puntuales de la sección
Introducción a las pruebas unitarias y de integración
Mi primera prueba
Expect
Snapshot
Verificar valor en una etiqueta HTML
FindAll vs Find
Simular eventos
Optimización de código
Leer props desde pruebas
Enviar Props y evaluarlas
Pruebas iniciales en el Indecision component
Definir las pruebas a realizar
Spy y Mocks
Spy con la instancia de Vue
Tarea: Probar que el getAnswer fue llamado
Pruebas sobre Fetch Api
Simular un fallo en el API
Código fuente de la sección
Pokemon Game
Introducción a la sección
Temas puntuales de la sección
Demostración del objetivo al final de la sección
Inicio de proyecto - Pokémon Game
Estructura del proyecto y componentes
Diseño de los componentes
Funcionalidad de PokemonPicture
Lógica de los nombres de los pokémons
Obtener nombres de los 4 pokémons
Mostrar las opciones posibles
Seleccionar un pokémon aleatoriamente
Emit - Emitir eventos
Resultado y reinicio de juego
Desplegar nuestro juego en producción
Código fuente de la sección
Pokemon Game - Unit Test
Introducción a la sección
Temas puntuales de la sección
Pruebas con Axios
Pruebas en helpers
getPokemonNames y getPokemonOptions
Pruebas en PokemonPicture
PokemonPicture - Segunda Parte
Pruebas en PokemonOptions
Pruebas con emisiones
Pruebas en PokemonPage
Snapshot con data y stubs
Tarea: Pruebas de que los componentes existan
Pruebas las propiedades reactivas del componente
Código fuente de la sección
Vue Router y Ciclo de vida de los componentes - Options Api
Introducción a la sección
Temas puntuales de la sección
Concepto de SPA
Inicio de proyecto - Rutas y Ciclo de Vida
Creación de páginas necesarias
Configuración manual del Vue Router
No page found
LazyLoad de páginas
Navegar entre páginas - RouterLink
RouterLink Active
Lifecycle Hooks - Ciclo de vida de un componente
Disparar métodos del ciclo de vida
Segmentos del URL y QuueryParameters
Recibir Props por URL
Petición HTTP y redirecciones
Redirección desde el router
RouterLink Personalizado
Multiples Router-View - Rutas Hijas
Segundo Layout
Arreglar nuestro NavBar personalizado
Guard - Protección de rutas ( Global )
Guard global asíncrono
Guard específico para rutas
Código fuente de la sección
Introducción a Vuex
Introducción a la sección
Temas puntuales de la sección
Introducción a Vuex
Inicio de proyecto - Bases Vuex
Instalación manual de Vuex
Leer el state reactivo
Mutations
Actions
mapActions
Bloquear botón mientras una acción trabaja
Getters
Modules
Actions, Getters, Mutations, State desde un módulo
Separar módulo en archivos independientes
Código fuente de la sección
Journal App - Options Api + Vuex
Introducción a la sección
Temas puntuales de la sección
Inicio de proyecto - Journal
Usar SASS en nuestro proyecto
Cambiar los colores por defecto del bootstrap
Estructura modular
Estructura del DaybookLayout
Componentes EntryList y Entry
Componente NoEntrySelected
EntryView
Mini tarea - Fab Icon
Instalar Vuex y crear un módulo reutilizable
Journal - Vuex Module
Entradas ficticias y punto de restauración
mapGetters - getEntriesByTerm
EntryComponent - Información al componente
GetEntryById - Obtener una entrada por el id
Mostrar entrada en pantalla o redireccionar al usuario
Cargar entrada cuando cambia el url
Configurar RestAPI en Firebase
Resumen de la sección
Código fuente de la sección
CRUD - Vuex
Introducción a la sección
Temas puntuales de la sección
Demostración de la sección
Continuación de la sección anterior
Cargar entradas desde el backend
Realizar el commit de una mutación
Tarea - Mostrar un loading mientras cargamos las entradas
FAB - Emitir acción
CRUD - Actualizar entrada
Preparar el camino para la inserción de registros
CRUD - Crear una nueva entrada
CRUD - Borrar una entrada
Mostrar mensajes de confirmación y espera
Seleccionar y mostrar una imagen local
Referencias locales
Cloudinary
Subir archivo desde JavaScript
Código fuente de la sección
Testing Vuex
Introducción a la sección
Temas puntuales de la sección
Continuación de proyecto - JournalApp - Testing
Pruebas en el AboutComponent
Primeras pruebas con el router
Tarea - Pruebas en el FAB Component
Daybook Router
Comprobar que las rutas carguen los componentes esperados
Probar función de mapeo de ruta
Pruebas con carga de archivos
Borrar archivos subidos en las pruebas
Vuex - Probar el estado inicial del Journal
Mutation - setEntries
Mutation - updateEntry
Mutation - addEntry y deleteEntry
Getters - getEntriesByTerm y getEntryById
Actions - loadEntries
Actions - updateEntry
Actions - createEntry y deleteEntry
Pruebas en el componente Entry
Solución de la tarea - EntryComponent
Pruebas en el componente EntryList
EntryList - Segunda parte de pruebas
Pruebas en el EntryView Component
Pruebas con el método de borrar y salir
Escuchar el dispatch en un método
Código fuente de la sección
Composition API - Bases
Introducción a la sección
Temas puntuales de la sección
Introducción al Composition API
Ejemplo del Composition API
Bonus - Guía de atajos Composition API
Inicio de proyecto - Bases CompositionAPI
Counter usando composition API
Mi primer composable - useCounter
Vue DevTools - Composition API
Ref vs Reactive
Composition API - Lifecyle Hooks
Router keep-alive
Peticiones http
Mostrar los usuarios y conectar la paginación
Tarea - Creación de un nuevo composable
Uso del router dentro del setup
Leer parametros y segmentos de URL desde el setup
Composable usePokemon
Watch - Observar cambios en objetos reactivos
Bloquear la salida de una ruta
Código fuente de la sección
Vuex con el composition API
Introducción a la sección
Temas puntuales de la sección
Continuación de la sección
Diseño del State
Vuex Getters - Composition API
Tarea - Crear y usar getters
Diseño de la lista de tareas
Getters como función
Commit Mutations - Composition API
Composable - useTodo
Introducción a los Slots
Slots y NamedSlots
Funcionalidad básica de nuestro modal
Scoped Slots
Tarea - Crear nueva tarea usando el modal
Scoped Slots aplicado
Código fuente de la sección
Autenticación - Vuex - Composition API
Introducción a la sección
Temas puntuales de la sección
Continuación de la sección
Diseño del Layout de autenticación
Rutas de Login y Register
Vuex - Auth Module
Manejo del formulario y useAuth composable
Obtener token de acceso de Firebase
Actualizar el displayName del usuario
Mutation - LoginUser
Mensaje de error o navegación
Actions - Login de usuario
Actualizar el displayName de Firebase
Comprobar el estado del idToken
Recargar el estado de la autenticación
AuthGuard
Logout y nombre de usuario conectado
Interceptores
Código fuente de la sección
Composition API Testing
Introducción a la sección
Temas puntuales de la sección
Testing autenticado
Pruebas en Vuex Crear MockStore
AuthModule - Vuex Module
Mutations - loginUser
Mutations - logout
Getters - username currentState
Actions - createUser - Error usuario ya existe
Action - createUser - Crea el usuario en Firebase
Action - checkAuthentication - POSITIVA
Action - checkAuthentication - NEGATIVA
Pruebas en composable functions
Probar una petición fallida de creación de usuario
Login exitoso y login fallido
Pruebas en el logout
Pruebas en propiedades computadas del composable function
Pruebas en el Navbar
Pruebas con el Router en composition API
Mantener pruebas con ambos routers
Pruebas en el login component
Formulario incorrecto, retorna error de autenticación
Formulario con credenciales correctas
Código fuente de la sección
Cierre del curso
Despedida del curso