React: Aplicaciones En Tiempo Real Con Socket-Io

Aplicaciones de Mapas, colas, tickets de trabajo, gráficas, chat, CRUD completo en tiempo real y más…

What you'll learn
Crear aplicaciones en tiempo real usando socket-io
Conectar React con un Socket-io backend server
Crear tu propio backend server que mezcla websockets con Rest endpoints
Modificar bases de datos basados en eventos sockets
Crear múltiples aplicaciones que utilizan sockets para comunicarse entre clientes
Requirements
Saber React basado en Hooks es necesario
Conocimiento de JavaScript es necesario
Comprender las bases del Context API y custom Hooks
Conocer el objetivo de un Reducer para generar nuevos estados
Description
React: Aplicaciones en tiempo real con Socket-io, es un curso enfocado en el manejo de ambas tecnologías para crear aplicaciones que interactúen entre si de manera simultánea e instantánea.Este curso te enseñará lo que necesitas sobre el manejo de Socket-io junto con React, pero NO es un curso para empezar React, este curso es para personas con conocimiento previo en React.Aquí crearemos varias aplicaciones que necesitan Websockets para poder resolverse, como por ejemplo gráficas en tiempo real, rastreo de marcadores en un mapa y sincronización de marcadores, aplicación de colas o tickets de trabajo y lógicamente un chat completo.Entre los temas dentro del curso están:1. CRUD utilizando sockets2. Rest endpoints a nuestro socket server3. MongoDB4. Autenticación mediante JWTa. Rest APIb. Socket API5. Conexión manual y automática a nuestro socket server6. Git y Github7. Postman y variables de entorno8. Eventos de sockets9. Salas10. Comunicación 1 a 111. RXJS Subjects12. Custom Hooks13. Context API14. Mapbox15. Antdesign16. Bootstrap17. Templates HTML hacia aplicaciones de React18. Detecciones de caídas del servidor19. Detección de desconexiones y reconexiones de clientesa. Con autenticaciónb. Sin autenticación20. Y mucho másEl curso te ayudará mucho a trabajar la parte de Hooks y reutilización de código creando tus propios Hooks, de tal manera de que nuestros componentes estén simplificados y la lógica centralizada.El objetivo principal del curso cuando lo termines, puedas crear soluciones que permitan la comunicación en tiempo real para tus aplicaciones sin tener que utilizar intérvalos u otro proceso para tener sincronizada la información entre todos los clientes que estén conectados en tu programa.

Overview

Section 1: Introduction

Lecture 1 Introducción al curso

Lecture 2 ¿Cómo funcionará el curso?

Lecture 3 Instalaciones necesarias

Lecture 4 Instalar nodemon

Lecture 5 Configurar Git y Github

Section 2: Introducción a los WebSockets y a Socket.io

Lecture 6 Introducción a la sección

Lecture 7 Temas puntuales de la sección

Lecture 8 Introducción a los conceptos generales

Lecture 9 Mi primer Socket Server

Lecture 10 FrontEnd - MiniChat

Lecture 11 Enviar y recibir eventos

Lecture 12 Emitir del cliente al servidor

Lecture 13 Estructura HTML de nuestro mini-chat

Lecture 14 Enviar y recibir mensajes desde y hacia el servidor

Lecture 15 Backend basado en clases

Lecture 16 Configurar sockets en la clase Server

Lecture 17 Crear variables de entorno

Lecture 18 Desplegar nuestro backend server en Heroku

Lecture 19 Probar el socket server en producción

Lecture 20 Habilitar CORS

Lecture 21 Respaldo a Github

Lecture 22 Código fuente de la sección

Section 3: BandNames App - Backend Server

Lecture 23 Introducción a la sección

Lecture 24 Temas puntuales de la sección

Lecture 25 Demostración del objetivo final de la sección

Lecture 26 Inicio del proyecto - BandNames socket server

Lecture 27 Modelos para manejar nuestras bandas

Lecture 28 Eventos de Sockets

Lecture 29 Crear aplicación de React y los primeros componentes

Lecture 30 Configurar socket.io en React

Lecture 31 Mostrar las bandas actuales

Lecture 32 Editar nombres en la tabla

Lecture 33 Incrementar votos

Lecture 34 Borrar banda

Lecture 35 Cambiar nombre de la banda

Lecture 36 Agregar una nueva banda

Lecture 37 Código fuente de la sección

Section 4: useSocket, SocketProvider, SocketContext y optimizaciones

Lecture 38 Introducción a la sección

Lecture 39 Temas puntuales de la sección

Lecture 40 Continuación de proyecto - BandNames

Lecture 41 useSocket - CustomHook

Lecture 42 Problema del useSocket

Lecture 43 SocketContext y SocketProvider

Lecture 44 Uso del ContextAPI para estado de la conexión

Lecture 45 Context para trabajar con sockets

Lecture 46 Agregar Banda mediante el Context

Lecture 47 Gráfica en tiempo real

Lecture 48 Conectar gráfica con la data del servidor

Lecture 49 Código fuente de la sección

Section 5: TicketApp - Aplicación de colas

Lecture 50 Introducción a la sección

Lecture 51 Temas puntuales de la sección

Lecture 52 Demostración del resultado final de la App

Lecture 53 Inicio de proyecto

Lecture 54 Crear componentes necesarios

Lecture 55 Router entre pantallas

Lecture 56 Pantalla de Ingresar

Lecture 57 Pantalla de Escritorio

Lecture 58 Pantalla para crear un ticket

Lecture 59 Pantalla de Cola de tickets

Lecture 60 UI Context y customHook para ocultar el menú

Lecture 61 Mantener el Agente y Escritorio

Lecture 62 Código fuente de la sección

Section 6: TicketApp + SocketServer

Lecture 63 Introducción a la sección

Lecture 64 Temas puntuales de la sección

Lecture 65 Continuación de proyecto - TicketApp

Lecture 66 Clases para el manejo de los Tickets

Lecture 67 Conectar la aplicación de React con nuestro socket server

Lecture 68 Obtener un nuevo ticket

Lecture 69 Asignar un ticket para trabajar

Lecture 70 Actualizar la cola de tickets en tiempo real

Lecture 71 Crear servicio REST para obtener los tickets actuales

Lecture 72 Consumir el servicio REST con los últimos tickets

Lecture 73 Código fuente de la sección

Section 7: Mapas en tiempo real

Lecture 74 Introducción a la sección

Lecture 75 Temas puntuales de la sección

Lecture 76 Demostración de la sección

Lecture 77 Inicio de proyecto - MapasApp

Lecture 78 Mostrar el mapa

Lecture 79 Mantener la referencia de latitud, longitud y zoom del mapa

Lecture 80 useRef en lugar de useState

Lecture 81 CustomHook - useMapbox

Lecture 82 Agregar Marcadores

Lecture 83 Extraer callback para agregar marcadores

Lecture 84 Obtener coordenadas al mover un marcador

Lecture 85 RXJS - Subject - Emitir eventos

Lecture 86 RXJS - Emitir movimientos de marcador

Lecture 87 Código fuente de la sección

Section 8: MapasApp + Sockets

Lecture 88 Introducción a la sección

Lecture 89 Temas puntuales de la sección

Lecture 90 Continuación de proyecto - MapasApp

Lecture 91 Modelos necesarios en el backend

Lecture 92 Conectar React con nuestro Socket Server

Lecture 93 Socket: Nuevo Marcador y Marcadores Activos

Lecture 94 Mostrar marcadores existentes en el backend

Lecture 95 Mostrar nuevos marcadores en tiempo real

Lecture 96 Actualizar marcadores en tiempo real

Lecture 97 Código fuente de la sección

Section 9: Chat - Introducción

Lecture 98 Introducción a la sección

Lecture 99 Demostración del objetivo de la sección

Lecture 100 Explicación del proyecto y materiales descargables

Section 10: Chat - Backend

Lecture 101 Introducción a la sección

Lecture 102 Temas puntuales de la sección

Lecture 103 Inicio de proyecto - ChatBackend

Lecture 104 Preparando la base de datos - MongoAtlas

Lecture 105 Conectar nuestro backend con MongoDB Atlas

Lecture 106 Modelos necesarios - Usuario y Mensaje

Lecture 107 Definición de rutas de autenticación

Lecture 108 Controladores de nuestros API Endpoints

Lecture 109 Express Validator

Lecture 110 Middleware personalizado - ValidarCampos

Lecture 111 Crear usuario en base de datos

Lecture 112 Encriptar la contraseña

Lecture 113 Generar JsonWebToken

Lecture 114 Login de usuario

Lecture 115 Verificar el JWT

Lecture 116 Revalidar el JWT

Lecture 117 Bonus: Guardar Token en Postman

Lecture 118 Obtener todos los mensajes de chat

Lecture 119 Definición de los eventos de sockets necesarios

Lecture 120 Código fuente de la sección

Section 11: Diseño y estructura en React - ChatApp

Lecture 121 Introducción a la sección

Lecture 122 Temas puntuales de la sección

Lecture 123 Inicio de proyecto - ChatApp - React

Lecture 124 Páginas y rutas

Lecture 125 Rutas secundarias

Lecture 126 Diseño de Login y Registro

Lecture 127 Diseño del Chat y sus componentes

Lecture 128 Diseño del Chat - Segunda Parte

Lecture 129 Pantalla de selección de Chat

Lecture 130 Código fuente de la sección

Section 12: Autenticación de Chat

Lecture 131 Introducción a la sección

Lecture 132 Temas puntuales de la sección

Lecture 133 Continuación de proyecto - Backend + Frontend

Lecture 134 AuthProvider - AuthContext

Lecture 135 Pantalla de Login

Lecture 136 Bloquear botón y funcionalidad de recordar usuario

Lecture 137 Login - Petición Http

Lecture 138 Almacenar token y mensajes de error

Lecture 139 Deshabilitar el botón si el formulario no está completo

Lecture 140 Tarea: Pantalla de registro

Lecture 141 Verificar estado de la autenticación

Lecture 142 Rutas privadas y públicas

Lecture 143 Cerrar sesión

Lecture 144 Nota: Cambiar avatar y resumen

Lecture 145 Inicio de autenticación de sockets

Lecture 146 Conectar y desconectar sockets manualmente

Lecture 147 Identificar persona conectada - Backend

Lecture 148 Actualizar base de datos en base a la conexión del usuario

Lecture 149 Código fuente de la sección

Section 13: Mensajería uno a uno

Lecture 150 Introducción a la sección

Lecture 151 Temas puntuales de la sección

Lecture 152 Continuación de proyecto - ChatApp

Lecture 153 Chat Context, Provider y Reducer

Lecture 154 Obtener todos los usuarios del chat

Lecture 155 Acción de cargar usuarios

Lecture 156 Mostrar listado de los usuarios

Lecture 157 Activar una sala de chat

Lecture 158 Enviar un mensaje - Parte 1

Lecture 159 Enviar un mensaje - Parte 2

Lecture 160 Grabar chat en base de datos

Lecture 161 Escuchar mensajes personales

Lecture 162 Mostrar los mensajes enviados y recibidos

Lecture 163 Fecha y hora de envío del mensaje

Lecture 164 Cargar el historial del Chat

Lecture 165 Scroll cuando llegan mensajes

Lecture 166 Borrar el ChatState cuando cerramos sesión

Lecture 167 Código fuente de la sección

Section 14: Despedida del curso

Lecture 168 Despedida del curso

Personas que sepan React y quieran crear aplicaciones en tiempo real,Personas que necesiten reaccionar cuando eventos sucedan en el servidor que necesiten notificar a los clientes,Personas que tengan que resolver problemas de interacción,Personas que necesiten crear aplicaciones que sigan movimientos en un mapa,Personas que quieran aprender a usar Socket-io