Crea tu propio WhatsApp desde cero

Introducción2 clases

Resultado final de la app

Repositorio de la app

Entorno de desarrollo8 clases

Configurando Visual Studio Code

Instalando Node JS

Instalando YARN

Creando un nuevo proyecto

Virtualización de un iPhone

Virtualización de un Android

Ejecutando la app en teléfonos físicos

Instalando Insomnia REST

Inicializando app - BACKEND9 clases

Creando el proyecto de node

Creando el servidor de express y socket io

Definiendo las acciones de sockets

Conectando una base de datos MongoDB

Configurando Body Parser

Carpeta estatica

Configurando CORS

Configurando logger HTTP request

Configurando nodemon

Sistema de autenticación - BACKEND7 clases

Modelo del usuario

Estructura de endpoints

Endpoint registro de usuario

Endpoint para el login

Devolviendo JWT en el login

Refrescando AccessToken

Middleware de autenticación

Sistema de usuarios - BACKEND5 clases

Estructura de endpoints

Obtener datos del usuario logeado

Obtener todos los usuarios

Obtener un usuario por ID

Actualizar los datos del usuario

Sistema de chats - BACKEND6 clases

Modelo del chat

Creando estructura

Creando un nuevo chat

Obtener los chats

Eliminando chat

Obteniendo los datos de un chat

Sistema mensajes de chats - BACKEND8 clases

Modelo del mensaje del chat

Creando estructura

Enviando mensaje de texto

Enviar un mensaje de imagen

Obtener los mensajes del un chat

Obteniendo total de mensajes de un chat

Obtener el ultimo mensajes del chat

Añadiendo la fecha del ultimo mensaje en el chat

Sistema de grupos - BACKEND10 clases

Modelo del grupo

Creando estructura

Creación de un grupo

Obteniendo todos los grupos de un usuario

Obtener la información de un grupo

Actualizando grupo

Salir de un grupo

Añadiendo participantes a un grupo

Baneando participantes de un grupo

Obtener usuario que no participan en el grupo

Sistema mensajes de grupos - BACKEND8 clases

Modelo del mensaje del grupo

Creando estructura

Enviando mensaje de texto

Enviando mensaje de imagen

Obtener todos los mensajes de un grupo

Obteniendo el ultimo mensaje del grupo

Añadiendo la fecha del ultimo mensaje en el grupo

Inicializando app - FRONTEND3 clases

Creando la app

Instalando Native Base

Instalando React Navigation

Sistema de navigation - FRONTEND11 clases

Creando todas las screens

Definiendo nombres de las screens

Handler de navegación

AuthNavigation

Icono back para las screens

Estilos para los navigations

Creando el AppNavigation

Creando los stacks de Chats, Grupos y Ajustes

Creando BottomTabNavigation

Añadiendo iconos al menu

Añadiendo screen globales

Sistema de autenticación - FRONTEND16 clases

AuthContext

Custom hooks useAuth

AuthStartScreen

Formulario de registro

Controlando y validando formulario de registro

Registrando usuario

Formulario de login

Controlando y validando formulario

Iniciando sesión

Generando la sesión

Guardando los tokens en el AsyncStorage

Recuperando la sesión del usuario

Cerrando sesión

ReLogin y RefreshAccessToken

UpdateUser

Configurando Sockets - FRONTEND1 clases

Inicializando los sockets

Sistema de ajustes - FRONTEND10 clases

Información del usuario

Opciones de ajustes

Abriendo galeria del telefono

Actualizando avatar del usuario

Refrescando avatar

Abriendo formularios

Formulario para cambiar nombre

Validando y contorlando formulario

Actualizando nombre del usuario

Formulario para cambiar apellidos

Sistema de chats - FRONTEND20 clases

Botón para crear chats

Obteniendo usuarios

Listando usuarios

Añadiendo buscador de usuarios

Logica para buscar usuarios

Creando el chat

Obteniendo todos los chats

Loading screen

Renderizando la lista de chats

Estructura del chat

Información del usuario del chat

Ultimo mensaje enviado

Total de mensajes sin leer

Alerta para eliminar un chat

Eliminando un chat

Recibiendo mensajes por sockets

Ordenando chats por último mensaje recibido

Actualizando total de mensajes sin leer

Entrando en un chat

Buscador de chats

Sistema del chat - FRONTEND30 clases

Creando cabecera

Obteniendo los datos del chat

Mostrando información del usuario del chat

Alerta eliminar chat

Entrando en el perfil del usuario

Obteniendo datos del usuario

Pintando datos del usuario

Obteniendo mensajes

Marcando mensajes leidos

FIX: Marcado mensajes leidos

Marcar y desmarcar chat activo

Pintando mensajes

Mensajes de texto

Mensajes de imagen

Abriendo imagen del chat

Empezando el chat desde el ultimo mensaje

Obteniendo mensajes por sockets

Input para enviar mensajes

Moviendo teclado

Controlando y validando input

Enviando mensaje de texto al chat

ActionSheet para enviar multimedia

Opción de galeria

Enviando imagen al chat

Opción de camara

Abriendo y mostrando la camara

Diseñando cámara

Funcionalidad de los botones de la camara

Mostrando foto capturada

Enviando foto al chat

Sistema de grupos - FRONTEND20 clases

Botón para crear grupos

Obteniendo usuarios

Creando los steps

Renderizando los usuarios

Marcando usuarios

Buscador de usuario

Formulario de creación de grupos

Controlando y validando formulario

Seleccionando imagen del grupo

Creando el grupo

Obteniendo grupos en los que participo

Renderizando grupos

Pintando grupos

Obteniendo total de mensajes sin leer

Obteniendo el ultimo mensaje

Abriendo el grupo

Implementando sockets

Subiendo grupo arriba al recibir mensaje

Actualizando total de mensajes sin leer

Buscador de grupos

Sistema del grupo33 clases

Header del grupo

Obteniendo datos del grupo

Estructura del perfil de grupo

Salir del grupo

Información sobre el grupo

Actualizando imagen del grupo

Abriendo formulario para cambiar nombre

Controlando y validando formulario

Actualizando nombre del grupo

Listando participantes

Expulsando participantes

Añadiendo participantes a un grupo existente

Listado usuarios

Marcando nuevos participantes

Añadiendo nuevos participantes al grupo

Añadiendo buscador de usuarios

Marcando grupo activo

Obteniendo mensajes del grupo

Marcando mensajes leídos

Verificando el tipo de mensaje

Renderizando mensaje de texto

Renderizando mensaje de imagen

Auto scroll al entrar en el grupo

Input para enviar mensajes

Obteniendo mensajes en tiempo real

Controlando y validando formulario

Animando input al abrir el teclado

Enviando mensaje al grupo

Añadiendo el SendMedia

Opción de abrir galeria

Enviando imagen al grupo

Opción de abrir cámara

Enviando imagen de la camara al grupo

Deploy7 clases

Creando una cuenta en railway

Subiendo server a GitHub

Desplegando servidor de railway

Conectando app al servidor

Configuraciones previas

Generando el APK

Generando el IPA

Solución a posibles errores2 clases

Error intl de Luxon

Error while updating property 'flex'

Crea tu propio WhatsApp desde cero

Contenido del curso

Comentarios de los estudiantes

Valoraciones

Este curso incluye:

Instructor del curso