Flutter Avanzado: Tu conocimiento al siguiente nivel 2023
sockets, bloc, provider, cubit, jwt, mongo, express, GPS, rutas en mapa, tráfico, ApplePay, GooglePay y mucho más
Lo que serás capaz de hacer
Nota Legacy: Después de varios años desde el lanzamiento inicial de este curso, queremos informarte que el mismo ha pasado a ser versión legacy. Esto implica que su contenido no recibirá actualizaciones adicionales y nuestro equipo de Co-instructores no continuará proporcionando soporte a preguntas relacionadas a este curso. Sin embargo, queremos que sigas aprendiendo con confianza. Por eso, te invitamos a unirte a nuestra comunidad en Discord, donde podrás conectar con otros estudiantes, compartir conocimientos y recibir apoyo de nuestra comunidad. ¡Gracias por tu comprensión y por ser parte de nuestra comunidad de aprendizaje! Este es un curso cargado de información importante que nos ayudará a crear mejores aplicaciones con este increíble SDK de Google, pero aunque todo parezca increíble, este no es un curso para personas que están iniciando en esta tecnología. Por favor revisen los requisitos del curso antes de inscribirse. Entre los temas que aquí tratamos están: Google y Apple Sign-in ApplePay y GooglePay Direcciones en mapas Trazar rutas en mapas Marcadores personalizados Widgets como marcadores Sockets tanto en el Frontend (Flutter) y nuestro Backend Diferentes gestores de estado Flutter BLoC, Cubits, Provider... RealTime Chat sin Firebase Gráficas en tiempo real Manejo de tokens Pantallas de carga Permisos y detectar cambios en servicios Re-conexión en caso de caídas del socket server Identificación y autenticación de clientes conectados por sockets Node MongoDB y MongoAtlas JWT Autenticación propia Autenticación con Google y Apple Sign-in tanto en el Frontend y Backend Despliegues en la nube Git, Github y ramas Y mucho más… El curso cuenta con estructuras robustas tanto en el Frontend (Flutter) y en el Backend (Node principalmente), las cuales nos ayudarán a crear toda todas las aplicaciones y manejar la información centralizada, también cuenta con despliegues de nuestras APIS y Socket Server para realizar las pruebas reales en dispositivos y tener todo el control de la autenticación mediante redes sociales. Otro objetivo del curso es ayudarte a perder el miedo a patrones como BLoC de manera que podamos apreciar el potencial y su poder sin perder el control del estado en ningún momento. Al finalizar el curso, habrás creado aplicaciones de seguimiento en tiempo real, chats, cobros, autenticaciones, backend, dominar BLoC y otros gestores de estado, encriptaciones de contraseña, manejo de sesiones de usuario, Apple y Google sign-in y muchas cosas más que llegarás a necesitar cuando quieras crear una aplicación que requiera una o todas esas tecnologías.
- Profundizar tu conocimiento de Flutter
- Realizar cobros en tu aplicación
- Hacer seguimiento y dibujar en mapas
- Marcadores personalizados tipo Uber
- Comunicación en tiempo real SIN Firebase
- Crear varios backend capaz de manejar y mantener nuestras aplicaciones
Temario
UNIDAD 1 - Introducción · 6 leccionesUNIDAD 1 - Introducción
UNIDAD 1 - Introducción
- Curso Legacy
- Introducción
- ¿Cómo funcionará el curso?
- ¿Cómo hacer preguntas?
- Instalaciones necesarias
- ¡Únete a Nuestra Comunidad de DevTalles en Discord!
UNIDAD 2 - BandNameApp - Socket.io - Aplicación en tiempo real · 10 leccionesUNIDAD 2 - BandNameApp - Socket.io - Aplicación en tiempo real
UNIDAD 2 - BandNameApp - Socket.io - Aplicación en tiempo real
- Introducción a la sección
- Temas puntuales de la sección
- Demostración al final de lo que nos espera a continuación
- Inicio de proyecto - BandNamesApp
- Crear un modelo para el manejo de Bandas
- Interfaz básica de nuestro HomePage
- InputDialog y CupertinoDialog - Añadir a la lista
- Borrar una banda - Dismissible
- Realizar respaldo de nuestro proyecto a Github
- Código fuente de la sección
UNIDAD 3 - BandNames - Socket Server - Express - Backend · 10 leccionesUNIDAD 3 - BandNames - Socket Server - Express - Backend
UNIDAD 3 - BandNames - Socket Server - Express - Backend
- Introducción a la sección
- Temas puntuales de la sección
- Inicio de proyecto - BandNames Socket Server
- Crear un directorio público
- Variables de entorno y Scripts
- Socket.io - Configuración inicial
- Emitir y Escuchar eventos
- Archivo independiente de la configuración de sockets
- Realizar respaldo de nuestro backend a Github
- Código fuente de la sección
UNIDAD 4 - BandNames Flutter + Socket Backend · 18 leccionesUNIDAD 4 - BandNames Flutter + Socket Backend
UNIDAD 4 - BandNames Flutter + Socket Backend
- Introducción a la sección
- Temas puntuales de la sección
- Continuación de proyecto - BandNames
- Socket Service - Conectar nuestra App con el Socket Server
- Mostrar el Status del Servidor de Sockets
- Escuchar eventos del servidor de sockets
- Emitir evento de sockets desde Flutter
- Indicador visual si hay conexión con el Socket Server
- Backend: Lógica para el manejo de las votaciones
- Socket: Emitir bandas registradas
- Flutter: Escuchar evento 'active-bands'
- Socket: Votar por una Banda
- Socket: Agregar una nueva Banda
- Socket: Borrar Banda
- Pequeñas optimizaciones
- Gráfica en tiempo real
- Respaldo de nuestra aplicación a Github
- Código fuente de la sección
UNIDAD 5 - Desplegar Socket Server en la nube · 4 leccionesUNIDAD 5 - Desplegar Socket Server en la nube
UNIDAD 5 - Desplegar Socket Server en la nube
- Introducción a la sección
- Temas puntuales de la sección
- Desplegar SocketServer en la nube
- Correr la aplicación en múltiples dispositivos
UNIDAD 6 - RealTime Chat - Socket.io - Mongo - Express - JWT - Login y Registro · 12 leccionesUNIDAD 6 - RealTime Chat - Socket.io - Mongo - Express - JWT - Login y Registro
UNIDAD 6 - RealTime Chat - Socket.io - Mongo - Express - JWT - Login y Registro
- Introducción a la sección
- Temas puntuales de la sección
- Demostración del objetivo final de la sección
- Inicio de la aplicación - RealTime Chat
- Diseño del LoginPage
- CustomInputField
- Argumentos a nuestro CustomInput
- Botón Azul
- SingleChildScrollView
- Registro y Navegar entre las pantallas
- Respaldo de nuestra aplicación a Github
- Código de la sección
UNIDAD 7 - Continuación de RealTime Chat - Usuarios y Mensajes · 12 leccionesUNIDAD 7 - Continuación de RealTime Chat - Usuarios y Mensajes
UNIDAD 7 - Continuación de RealTime Chat - Usuarios y Mensajes
- Introducción a la sección
- Temas puntuales de la sección
- Continuación de nuestra aplicación
- Pull to refresh
- ChatPage - Inicio
- Caja de texto de nuestro chat
- Detalles de nuestro ChatPage
- Mensajes de burbujas
- Animaciones de los mensajes
- Limpieza al cerrar el ChatPage
- Respaldo de la sección a GitHub
- Código fuente de la sección
UNIDAD 8 - ChatApp - Backend · 17 leccionesUNIDAD 8 - ChatApp - Backend
UNIDAD 8 - ChatApp - Backend
- Introducción a la sección
- Temas puntuales de la sección
- Inicio de sección - ChatApp Backend
- MongoAtlas - Base de datos en la nube
- Conectar Node con Mongo Atlas
- Crear nuestro primer Rest endpoint - Crear Usuario
- Express Validator
- Middleware personalizado - ValidarCampos
- Crear usuario en base de datos
- Validar que no exista el email
- Encriptar la contraseña
- Generar JWT
- Login de Usuario
- Renovar el JWT
- Generar un nuevo JWT y retornar información del usuario
- Respaldo de nuestra aplicación a Github
- Código fuente de la sección
UNIDAD 9 - ChatApp - Autenticando contra nuestro backend · 14 leccionesUNIDAD 9 - ChatApp - Autenticando contra nuestro backend
UNIDAD 9 - ChatApp - Autenticando contra nuestro backend
- Introducción a la sección
- Temas puntuales de la sección
- Nota de actualización
- Continuación de proyectos - Backend y FrontEnd - Autenticación
- Petición HTTP.POST al login
- Mapear respuesta de un login
- Bloquear botón mientras se realiza la autenticación
- Mostrar alerta si las credenciales no son correctas
- Guardar JWT en el Storage (Keychain IOS, KeyStore Android)
- Pantalla de Registro
- Mantener la pantalla de usuarios si tenemos un token válido
- Logout de nuestra aplicación
- Respaldo de nuestra aplicación a Github
- Código fuente de la sección
UNIDAD 10 - Socket.io en nuestra aplicación de Chat · 20 leccionesUNIDAD 10 - Socket.io en nuestra aplicación de Chat
UNIDAD 10 - Socket.io en nuestra aplicación de Chat
- Introducción a la sección
- Temas puntuales de la sección
- Nota importante
- Continuación de proyectos
- Conectar al Socket Server después de un inicio de sesión
- Tarea - Cambiar ícono cuando hay conexión con el Socket Server
- Autenticando el cliente conectado por sockets
- Actualizar base de datos cuando un usuario se conecta
- Servicio para retornar los usuarios
- Mostrar lista de usuarios en nuestra App
- Usuario seleccionado para el chat
- Teoría sobre el envío de mensajes privados
- Emitir un mensaje del chat al servidor
- Escuchar mensajes del servidor en Flutter
- Backend - Modelo de Mensajes
- Guardar Mensaje en Base de Datos
- Backend - Servicio para obtener los mensajes de chat
- Cargar historial de chat en Flutter
- Respaldo del código a GitHub
- Código fuente de la sección
UNIDAD 11 - Manejadores de Estado - Singleton · 10 leccionesUNIDAD 11 - Manejadores de Estado - Singleton
UNIDAD 11 - Manejadores de Estado - Singleton
- Introducción a la sección
- Temas puntuales de la sección
- Inicio de proyecto - Manejar Estado
- Diseño de ambas pantallas
- Preparar repositorio y ramas
- Singleton
- Singleton - Establecer el usuario
- Singleton - Re-dibujar Widgets cuando hay cambios en el servicio
- Singleton - Varios listeners
- Código fuente de la sección
UNIDAD 12 - Provider - Como manejador de estado · 10 leccionesUNIDAD 12 - Provider - Como manejador de estado
UNIDAD 12 - Provider - Como manejador de estado
- Introducción a la sección
- Temas puntuales de la sección
- Nota de actualización
- Continuación de proyecto - EstadosApp
- Provider - Configuración inicial
- Provider - Establecer información del usuario
- Provider - Cambiar edad mediante un método
- Provider - Manejo de las profesiones
- Guardar cambios en Git y cambiar ramas
- Código fuente de la sección
UNIDAD 13 - Cubit - Manejador de estado · 13 leccionesUNIDAD 13 - Cubit - Manejador de estado
UNIDAD 13 - Cubit - Manejador de estado
- Introducción a la sección
- Temas puntuales de la sección
- Nota de actualización
- Introducción al Cubit
- Continuación de proyecto - Cubit
- Creando nuestro primer Cubit
- Cambiando el UI en base al estado del cubit
- Nota de actualización
- Cambiar a un nuevo estado
- Mostrar información del usuario
- Cambiar la edad del usuario dentro del Cubit
- Añadir profesión
- Código fuente de la sección
UNIDAD 14 - Patrón BLoC · 13 leccionesUNIDAD 14 - Patrón BLoC
UNIDAD 14 - Patrón BLoC
- Inicio de la sección
- Temas puntuales de la sección
- Nota de actualización
- Continuación del proyecto - BLoC
- Configurando el BLoC
- Configurando el BLoC - Segunda Parte
- Mostrar Widgets condicionalmente basados en el estado del BLoC
- Disparar eventos - Asignar un usuario al estado
- Mostrar información del usuario
- Copiar el estado anterior
- Añadir una nueva profesión al State
- Borrar el usuario
- Código fuente de la sección
UNIDAD 15 - GetX · 8 leccionesUNIDAD 15 - GetX
UNIDAD 15 - GetX
- Enlaces y materiales de esta sección
- Continuación de proyecto
- Navegación con GetX
- Gestor de estado - GetxController
- Utilizar el usuario y cambiar la edad
- Manejo de las profesiones del usuario
- Otras funcionalidades de GetX
- Código fuente de la sección
UNIDAD 16 - Bonus: Calculadora con GetX · 3 leccionesUNIDAD 16 - Bonus: Calculadora con GetX
UNIDAD 16 - Bonus: Calculadora con GetX
- Nota antes de empezar
- Bonus: Calculadora utilizando GetX
- Código fuente de la calculadora
UNIDAD 17 - RutasApp - GoogleMaps + Mapbox Places · 16 leccionesUNIDAD 17 - RutasApp - GoogleMaps + Mapbox Places
UNIDAD 17 - RutasApp - GoogleMaps + Mapbox Places
- Introducción a la sección
- Temas puntuales de la sección
- Demostración de la sección
- Inicio proyecto mapas_app
- Pantallas y estructura de directorios
- Pantalla de permiso de GPS
- GPS Bloc
- GPS Bloc - Eventos, Bloc y Estado
- GPS Bloc Eventos y nuevo estado
- Geolocator - Android
- Permisos en IOS
- Cambiar el estado basado en el estado del servicio
- Permission_handler - Android e IOS
- Solicitar acceso al GPS
- Revisar privilegios previamente otorgados
- Código fuente de la sección
UNIDAD 18 - Mi ubicación y mapas · 18 leccionesUNIDAD 18 - Mi ubicación y mapas
UNIDAD 18 - Mi ubicación y mapas
- Introducción a la sección
- Temas puntuales de la sección
- Continuación del proyecto - Location Bloc
- Android Emulator - Simular recorrido
- Seguir la ubicación del usuario
- Limpiar subscripciones
- Cambiar estado del bloc
- Mostrar las coordenadas
- Configurar Api Key de Google
- Configurar GoogleMaps - Android
- Configurar GoogleMaps - IOS
- Diseño de la pantalla del mapa
- Bloc para controlar el mapa
- Obtener el controlador del mapa
- Cambiar estilo del mapa
- Mover el mapa a la ubicación central del usuario
- Snackbar personalizado
- Código fuente de la sección
UNIDAD 19 - Trazar ruta dentro del mapa · 11 leccionesUNIDAD 19 - Trazar ruta dentro del mapa
UNIDAD 19 - Trazar ruta dentro del mapa
- Introducción a la sección
- Temas puntuales de la sección
- Continuación del proyecto
- Seguir al usuario con el mapa
- Botón para seguir al usuario
- Resolución de la tarea - Eventos del mapa
- Polylines - Trazando el camino recorrido
- Mostrar la polyline en el mapa
- Mostrar/Ocultar Polylines
- Cierre de la sección
- Código fuente de la sección
UNIDAD 20 - Direcciones hasta un punto específico · 22 leccionesUNIDAD 20 - Direcciones hasta un punto específico
UNIDAD 20 - Direcciones hasta un punto específico
- Introducción a la sección
- Temas puntuales de la sección
- Continuación del proyecto e introducción al API
- Diseño de la barra de búsqueda
- SearchDelegate - Buscador de lugares
- Terminar de construir nuestro SearchDelegate
- Modelo SearchResult - Retorno del SearchDelegate
- Diseño: Marcador central y opciones
- Finalizar diseño del marcador manual
- SearchBloc - Bloc para controlar las búsquedas
- Mostrar y ocultar elementos del UI basado en la búsqueda manual
- Ocultar marcador manual
- Animación adicional
- Direcciones de navegación - Mapbox API
- TrafficService con Dio - Servicio para disparar peticiones HTTP
- Saber el punto central del mapa
- Dio Interceptors
- Mapear la respuesta de Mapbox
- Decodificar geometry
- Dibujar la ruta en el mapa
- Mostrar mensaje de espera
- Código fuente de la sección
UNIDAD 21 - Direcciones en el mapa · 12 leccionesUNIDAD 21 - Direcciones en el mapa
UNIDAD 21 - Direcciones en el mapa
- Inicio de sección
- Temas puntuales de la sección
- Continuación de la sección - RutasApp
- Consumir el servicio de GeoCoding de Mapbox
- Modelos y serializar respuesta
- Obtener los resultados del MapboxPlaces
- Almacenar los resultados en el SearchState
- Mostrar los resultados en el SearchDelegate
- Trazar ruta destino
- Historial de búsquedas
- Resolución de la tarea
- Código fuente de la sección
UNIDAD 22 - Marcadores en el Mapa · 18 leccionesUNIDAD 22 - Marcadores en el Mapa
UNIDAD 22 - Marcadores en el Mapa
- Introducción a la sección
- Temas puntuales de la sección
- Continuación del proyecto - RutasApp
- Colocar marcadores en el inicio de la ruta
- Tarea: Marcador de fin de la ruta
- InfoWindow de marcadores
- Mostrar duración del viaje y distancia
- Reverse Geocoding - Información de coordenadas
- Imagen del marcador desde Assets y desde Network
- Marcador basado en una imagen por URL
- Custom Marker basado en un Widget - Diseño
- Sombra y rectángulo del custom marker
- Textos en el CustomPainter
- Información del destino
- Marcador del destino
- CustomPainter hacia imagen y BitmapDescriptor
- Tarea - Colocar el marcador del destino
- Código fuente de la sección
UNIDAD 23 - Pagos con Stripe, tarjetas de crédito, GooglePay y ApplePay · 9 leccionesUNIDAD 23 - Pagos con Stripe, tarjetas de crédito, GooglePay y ApplePay
UNIDAD 23 - Pagos con Stripe, tarjetas de crédito, GooglePay y ApplePay
- Introducción a la sección
- Temas puntuales de la sección
- Demostración de la sección
- Inicio de proyecto - StripeApp
- Diseño de la pantalla Home
- Monto a pagar y botón de pago
- Pantalla de tarjeta seleccionada
- Pantalla de pago completo y alertas
- Código fuente de la sección
UNIDAD 24 - StripeApi y Estado de nuestra aplicación - BLoC · 15 leccionesUNIDAD 24 - StripeApi y Estado de nuestra aplicación - BLoC
UNIDAD 24 - StripeApi y Estado de nuestra aplicación - BLoC
- Introducción a la sección
- Temas puntuales de la sección
- Continuación del proyecto - Configuración del BLoC
- Tarea: Activar y desactivar tarjeta
- Resolución: Activar y desactivar tarjeta
- Explicación de la lógica de cobros a seguir
- Paquetes adicionales para usar Stripe
- StripeService - Métodos globales que necesitaremos
- Crear método de pago con una nueva tarjeta
- Crear un intento de pago - PaymentIntent
- Realizar cobro/pago - Confirmar intento
- Pagar con una tarjeta existente
- ApplePay y GooglePay
- GooglePay retoques finales
- Código fuente de la sección
UNIDAD 25 - Pub.dev - Crear tu propio paquete · 16 leccionesUNIDAD 25 - Pub.dev - Crear tu propio paquete
UNIDAD 25 - Pub.dev - Crear tu propio paquete
- Introducción a la sección
- Temas puntuales de la sección
- Demostración de la sección
- Inicio de proyecto - CustomTransitionPackage
- Diseño básico de mi aplicación de transiciones
- Route Transitions
- FadeIn Transition
- Replacement o Push
- Crear nuestro primer paquete para Pub.dev
- Subir el paquete a Pub.dev
- Utilizar nuestro paquete en nuestra app de Flutter
- Actualizando el paquete
- Crear un ejemplo en Pub.dev
- Marcar como obsoleto o deprecared alguna característica
- Nota final
- Código fuente de la sección
UNIDAD 26 - Autenticación con Google - Backend y Frontend · 10 leccionesUNIDAD 26 - Autenticación con Google - Backend y Frontend
UNIDAD 26 - Autenticación con Google - Backend y Frontend
- Introducción a la sección
- Temas puntuales de la sección
- Inicio de proyecto - AuthApp
- Diseño básico de la aplicación
- Configuración de Google SignIn
- Agregar y configurar la aplicación de Android
- SignIn y SignOut de Google - Android
- Agregar y configurar la aplicación de IOS
- Obtener el ID Token de la sesión
- Código fuente de la sección
UNIDAD 27 - Google Sign-in - Backend para validar el ID Token · 8 leccionesUNIDAD 27 - Google Sign-in - Backend para validar el ID Token
UNIDAD 27 - Google Sign-in - Backend para validar el ID Token
- Introducción a la sección
- Temas puntuales de la sección
- Continuación y nuevo proyecto - Auth Backend Server
- Ruta y controlador de la autenticación de Google
- Validar ID Token en nuestro backend
- Desplegar backend server en Heroku
- Obtener respuesta de autenticación de nuestro backend
- Código fuente de la sección
UNIDAD 28 - Apple Sign-in · 10 leccionesUNIDAD 28 - Apple Sign-in
UNIDAD 28 - Apple Sign-in
- Introducción a la sección
- Temas puntuales de la sección
- Continuación de proyecto y recursos
- Implementar botón de Apple Sign-in y Servicio de autenticación
- Configuraciones en el portal de developers de Apple
- Identificadores necesarios para nuestro backend
- Configurar nuestro backend para aceptar las peticiones de Apple Sign-in
- Desplegar y configurar URLs de retorno
- Iniciar sesión en nuestro servidor
- Apple Sign-in en Android
UNIDAD 29 - Cierre del curso · 1 leccionesUNIDAD 29 - Cierre del curso
UNIDAD 29 - Cierre del curso
- Despedida del curso
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
29 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Fernando Herrera.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 29 unidades · 346 lecciones · 60 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Fernando Herrera; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.


