Resumen del Proyecto
¿Qué es?
ChitChat es una aplicación móvil nativa desarrollada con React Native. Es un servicio de mensajería similar a WhatsApp, que permite a los usuarios enviar y recibir mensajes de texto, fotos tomadas con la cámara del teléfono, imágenes de la galería y compartir su ubicación.
¿Cuál fue el objetivo?
Desarrollar una app de chat para dispositivos móviles usando React Native y Expo.io, como parte del curso de Desarrollo Web de CareerFoundry.
¿Qué herramientas se usaron?
Historias de Usuario
- Como nuevo usuario, quiero poder ingresar fácilmente a una sala de chat para comenzar a hablar con mis amigos y familiares rápidamente.
- Como usuario, quiero poder enviar mensajes para intercambiar noticias.
- Como usuario, quiero enviar imágenes a mis amigos para mostrarles lo que estoy haciendo.
- Como usuario, quiero compartir mi ubicación para mostrar dónde estoy.
- Como usuario, quiero poder leer mis mensajes sin conexión para repasar las conversaciones cuando quiera.
- Como usuario con discapacidad visual, quiero usar una app de chat compatible con lectores de pantalla para poder interactuar con la interfaz.
Características Clave
- Pantalla donde el usuario ingresa su nombre y elige el color de fondo antes de iniciar el chat.
- Pantalla que muestra la conversación, con campo de entrada y botón para enviar.
- La app permite enviar imágenes y datos de ubicación.
- Los datos se almacenan tanto en línea como sin conexión.
Diseño UI y Recursos
Especificaciones de Diseño:
- Espaciado vertical y horizontal: distribuido uniformemente.
- Título de la app: tamaño de fuente 45, peso 600, color #FFFFFF.
- “Tu nombre”: tamaño 16, peso 300, color #757083, opacidad 50%.
- “Elige color de fondo”: tamaño 16, peso 300, color #757083, opacidad 100%.
- Códigos HEX de colores: #090C08; #474056; #8A95A5; #B9C6AE.
- Botón “Comenzar chat”: tamaño 16, peso 600, color #FFFFFF, color del botón #757083.
Construcción de la App
Requisitos técnicos:
- La app debe estar desarrollada con React Native.
- Debe utilizar Expo.io.
- La app debe seguir el diseño dado en Figma.
- Las conversaciones deben almacenarse en Google Firestore.
- Los usuarios deben autenticarse de forma anónima con Firebase.
- Las conversaciones deben guardarse localmente también.
- Los usuarios pueden elegir y enviar imágenes desde la galería.
- Los usuarios pueden tomar fotos con la cámara del dispositivo y enviarlas.
- Las imágenes se almacenan en Firebase Cloud Storage.
- La app puede acceder a la ubicación del usuario.
- Los datos de ubicación se envían en el chat como vista de mapa.
- La interfaz de chat se implementa usando la biblioteca Gifted Chat.
- El proyecto incluye documentación técnica.
- Todo el código se somete a linting según los requisitos.
Producto Final
El código fuente está alojado en GitHub, una plataforma colaborativa para control de versiones y gestión de proyectos. Puedes acceder al código aquí.
Retos Enfrentados
Este proyecto marcó mi primera experiencia con React Native, y tuvo una curva de aprendizaje pronunciada. Sin embargo, mi base sólida en React me ayudó a adaptarme rápidamente. Uno de los mayores retos fue mantener la paciencia al trabajar con Expo, un iPhone, y un emulador Android lento y pesado. Descubrí que la funcionalidad en iOS no siempre se trasladaba perfectamente a Android, lo que requería pruebas constantes en ambos sistemas. En el proceso, realmente comprendí el significado de “la paciencia es una virtud”.