Udemy

Platform

Español

Language

Web Development

Category

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...

4.90 (395 reviews)

Students

16 hours

Content

Nov 2020

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive  SkillShare  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will 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


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 sockets

2. Rest endpoints a nuestro socket server

3. MongoDB

4. Autenticación mediante JWT

a. Rest API

b. Socket API

5. Conexión manual y automática a nuestro socket server

6. Git y Github

7. Postman y variables de entorno

8. Eventos de sockets

9. Salas

10. Comunicación 1 a 1

11. RXJS Subjects

12. Custom Hooks

13. Context API

14. Mapbox

15. Antdesign

16. Bootstrap

17. Templates HTML hacia aplicaciones de React

18. Detecciones de caídas del servidor

19. Detección de desconexiones y reconexiones de clientes

a. Con autenticación

b. Sin autenticación

20. Y mucho más


El 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.


Screenshots

React: Aplicaciones en tiempo real con Socket-io
React: Aplicaciones en tiempo real con Socket-io
React: Aplicaciones en tiempo real con Socket-io
React: Aplicaciones en tiempo real con Socket-io

Content

Introduction

Introducción al curso

¿Cómo funcionará el curso?

Instalaciones necesarias

Instalar nodemon

Configurar Git y Github

Introducción a los WebSockets y a Socket.io

Introducción a la sección

Temas puntuales de la sección

Introducción a los conceptos generales

Mi primer Socket Server

FrontEnd - MiniChat

Enviar y recibir eventos

Emitir del cliente al servidor

Estructura HTML de nuestro mini-chat

Enviar y recibir mensajes desde y hacia el servidor

Backend basado en clases

Configurar sockets en la clase Server

Crear variables de entorno

Desplegar nuestro backend server en Heroku

Probar el socket server en producción

Habilitar CORS

Respaldo a Github

Código fuente de la sección

BandNames App - Backend Server

Introducción a la sección

Temas puntuales de la sección

Demostración del objetivo final de la sección

Inicio del proyecto - BandNames socket server

Modelos para manejar nuestras bandas

Eventos de Sockets

Crear aplicación de React y los primeros componentes

Configurar socket.io en React

Mostrar las bandas actuales

Editar nombres en la tabla

Incrementar votos

Borrar banda

Cambiar nombre de la banda

Agregar una nueva banda

Código fuente de la sección

useSocket, SocketProvider, SocketContext y optimizaciones

Introducción a la sección

Temas puntuales de la sección

Continuación de proyecto - BandNames

useSocket - CustomHook

Problema del useSocket

SocketContext y SocketProvider

Uso del ContextAPI para estado de la conexión

Context para trabajar con sockets

Agregar Banda mediante el Context

Gráfica en tiempo real

Conectar gráfica con la data del servidor

Código fuente de la sección

TicketApp - Aplicación de colas

Introducción a la sección

Temas puntuales de la sección

Demostración del resultado final de la App

Inicio de proyecto

Crear componentes necesarios

Router entre pantallas

Pantalla de Ingresar

Pantalla de Escritorio

Pantalla para crear un ticket

Pantalla de Cola de tickets

UI Context y customHook para ocultar el menú

Mantener el Agente y Escritorio

Código fuente de la sección

TicketApp + SocketServer

Introducción a la sección

Temas puntuales de la sección

Continuación de proyecto - TicketApp

Clases para el manejo de los Tickets

Conectar la aplicación de React con nuestro socket server

Obtener un nuevo ticket

Asignar un ticket para trabajar

Actualizar la cola de tickets en tiempo real

Crear servicio REST para obtener los tickets actuales

Consumir el servicio REST con los últimos tickets

Código fuente de la sección

Mapas en tiempo real

Introducción a la sección

Temas puntuales de la sección

Demostración de la sección

Inicio de proyecto - MapasApp

Mostrar el mapa

Mantener la referencia de latitud, longitud y zoom del mapa

useRef en lugar de useState

CustomHook - useMapbox

Agregar Marcadores

Extraer callback para agregar marcadores

Obtener coordenadas al mover un marcador

RXJS - Subject - Emitir eventos

RXJS - Emitir movimientos de marcador

Código fuente de la sección

MapasApp + Sockets

Introducción a la sección

Temas puntuales de la sección

Continuación de proyecto - MapasApp

Modelos necesarios en el backend

Conectar React con nuestro Socket Server

Socket: Nuevo Marcador y Marcadores Activos

Mostrar marcadores existentes en el backend

Mostrar nuevos marcadores en tiempo real

Actualizar marcadores en tiempo real

Código fuente de la sección

Chat - Introducción

Introducción a la sección

Demostración del objetivo de la sección

Explicación del proyecto y materiales descargables

Chat - Backend

Introducción a la sección

Temas puntuales de la sección

Inicio de proyecto - ChatBackend

Preparando la base de datos - MongoAtlas

Conectar nuestro backend con MongoDB Atlas

Modelos necesarios - Usuario y Mensaje

Definición de rutas de autenticación

Controladores de nuestros API Endpoints

Express Validator

Middleware personalizado - ValidarCampos

Crear usuario en base de datos

Encriptar la contraseña

Generar JsonWebToken

Login de usuario

Verificar el JWT

Revalidar el JWT

Bonus: Guardar Token en Postman

Obtener todos los mensajes de chat

Definición de los eventos de sockets necesarios

Código fuente de la sección

Diseño y estructura en React - ChatApp

Introducción a la sección

Temas puntuales de la sección

Inicio de proyecto - ChatApp - React

Páginas y rutas

Rutas secundarias

Diseño de Login y Registro

Diseño del Chat y sus componentes

Diseño del Chat - Segunda Parte

Pantalla de selección de Chat

Código fuente de la sección

Autenticación de Chat

Introducción a la sección

Temas puntuales de la sección

Continuación de proyecto - Backend + Frontend

AuthProvider - AuthContext

Pantalla de Login

Bloquear botón y funcionalidad de recordar usuario

Login - Petición Http

Almacenar token y mensajes de error

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

Tarea: Pantalla de registro

Verificar estado de la autenticación

Rutas privadas y públicas

Cerrar sesión

Nota: Cambiar avatar y resumen

Inicio de autenticación de sockets

Conectar y desconectar sockets manualmente

Identificar persona conectada - Backend

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

Código fuente de la sección

Mensajería uno a uno

Introducción a la sección

Temas puntuales de la sección

Continuación de proyecto - ChatApp

Chat Context, Provider y Reducer

Obtener todos los usuarios del chat

Acción de cargar usuarios

Mostrar listado de los usuarios

Activar una sala de chat

Enviar un mensaje - Parte 1

Enviar un mensaje - Parte 2

Grabar chat en base de datos

Escuchar mensajes personales

Mostrar los mensajes enviados y recibidos

Fecha y hora de envío del mensaje

Cargar el historial del Chat

Scroll cuando llegan mensajes

Borrar el ChatState cuando cerramos sesión

Código fuente de la sección

Despedida del curso

Despedida del curso


Reviews

I
Ignacio22 December 2020

Todos los cursos que voy haciendo me ayudaron muchisimo! Estoy seguro que este también va a ser así aunque recién haya empezado

L
Lautaro17 December 2020

Estoy empezando la sección 6, hasta el momento esta muy bien el curso. Me parece muy correcta la forma en la que está estructurado, y los proyectos se ven geniales. Como comentario extra, les recomiendo que traten de hacer las cosas que quiere hacer Fernando antes que él. Actualización: Termine el curso, la verdad que la última aplicación (el chat) me parecio muy interesante, y sobre todo bien completa. Se nota muchisimo el esfuerzo que tiene este curso encima, ya que en todas las aplicaciones senti que estaba aprendiendo algo sobre sockets, e incluso mejorando en React. Muy recomendable el curso. Saludos!

J
Jose14 December 2020

La verdad es muy bueno este curso pues conocer tecnología para funcionamiento en tiempo real es muy útil, el curso como siempre bien explicado. Tome este curso para mejorar y tomares cada curso que este profesor publique he crecido profesionalmente. GRACIAS PROFESOR.

C
Cyberar11 December 2020

Muy satisfecho, el instructor explica claramente todos los aspectos de cada desarrollo, los videos estan muy bien editados y aprendi muchisimo. Muchas gracias.

F
Francisco25 November 2020

Feranando Herrera una vez mas consigue un gran curso, sube de nivel en React con este curso con sockets.io, relmente excelente

A
Alberto25 November 2020

Fernando es un excelente instructor, aporta mucho valor a sus cursos y este no ha sido la excepción, cada vez que tomo uno de sus cursos mi conocimiento se eleva exponencialmente. Muchas gracias por crear estos cursos Fernando, estoy muy agradecido

J
John21 November 2020

Muy buen curso!! Fernando cómo siempre con excelentes cursos y una forma muy buena de enseñar. He aprendido bastante, muchas gracias!

R
Roman20 November 2020

Super cool tomar otro curso del profe Fer y de react con socket, muy interesante clases tras clases lo que nos transmite Fernando

J
Jesus20 November 2020

Execelente curso para aprender aplicar conexiones en tiempo real, ademas de practicar el uso RXJS, del useCallback y autenticar con JWT en los socket.

A
Abelardo19 November 2020

Por poner un pero, y esto ayuda a que Fernando mejore, se echa en falta el uso de recursos visuales para entender la arquitectura, diseño y relación entre componentes, algo así como un programa que permita dibujar cajitas y flechas con el objetivo de expresar, visualmente, la relación entre los componentes, unidades funcionales, etc. A continuación sus puntos fuertes: Innova al aportar tips y mejoras sobre el código. Parte de un ejemplo sencillo para avanzar hacia algo más complejo. Metodología bottom-up bien conducida. Eficiente en sus clases y, además, estas son efectivas. La duración de cada vídeo, de 10 minutos, es excelente: ni se hace tan larga ni se hace tan corta. Agradable en su forma de impartir los conocimientos. Muy buenas dotes pedagógicas. Le encanta dar clases...y eso se demuestra. 100% altamente recomendable. Desde que le descubrí, no paro de pagar por sus cursos. Merecen la pena. Demuestra el dominio profesional que tiene sobre la materia.

R
Rafael18 November 2020

Excelente curso, justo los temas con los que estoy trabajando en mi proyecto, y pude mejorarlo gracias a Fernando, gracias.

J
Jose13 November 2020

Este Curso esta Increíble , se los recomiendo muchísimo si quieren aprender a desarrollar aplicaciones web en tiempo real.

R
Roberto13 November 2020

Genial! ya había escucado recomendaciones de Fernando y en verdad que es un crack por su manera de desarrollar los temas

M
Milthon13 November 2020

Muy buen curso, no debería agregar temas que no están relacionados, pero el curso esta muy bien elaborado.

F
Francisco12 November 2020

Todos los cursos que he realizado de Fernando Herrera son excelentes y este es muy bueno, estoy muy entusiasmado y contento por realizarlo =)


Coupons

DateDiscountStatus
11/12/202095% OFFExpired
3/15/202194% OFFExpired
4/16/202192% OFFExpired

3548798

Udemy ID

10/5/2020

Course created date

11/12/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram