LoRa Chat WebApp

¿Cómo crear una interfaz de usuario amigable para la aplicación web?

El desarrollo de interfaces de usuario puede parecer desafiante, pero es esencial para lograr una aplicación amistosa y funcional. Nuestro enfoque aquí es editar el archivo HTML del proyecto final para crear una interfaz amena, que gestione las peticiones HTTP al intercambiar mensajes. Descargaremos un archivo de recursos del curso para reemplazar el HTML original y, para ver cómo evoluciona el código, siempre puedes consultar versiones anteriores en el repositorio. Esto te ayudará a ejecutar y verificar el funcionamiento correcto de cada etapa.

En Visual Studio Code, comenzamos ajustando el idioma de la aplicación, un paso simple pero significativo. El título se mantiene como "LoraChat". La aplicación en sí comprende un formulario estilizado mediante clases e identificadores, dentro del cual hay un encabezado para el logo de Platzi. Además, hay una sección de mensajes que diferencia visualmente entre mensajes entrantes y salientes a través de estilos HTML. Igualmente, se crea un campo de entrada tipo textarea para escribir mensajes y un botón de envío que usa el evento submit del formulario, sin necesidad de añadir acciones en JavaScript.

¿Cómo estilizamos nuestra aplicación web con CSS?

El CSS permite caracterizar visualmente una página web. En esta aplicación, un esquema de dos colores nos ayudará a diferenciar los elementos, usando principalmente un color verde para textos y bordes. Eliminamos márgenes adicionales en el HTML y el body, le asignamos un color de fondo y establecemos estilos para las letras.

El formulario se adapta a la pantalla completa mediante flex. En el encabezado, también usando flex, centramos el contenido y ajustamos su ancho al 100%. Para la sección de mensajes, el flex-direction se establece con column-reverse, logrando que los mensajes más nuevos aparezcan al final y que el desplazamiento vertical sea posible en caso de muchos mensajes gracias a overflow: scroll. Además, los bordes de cada mensaje distinguen entre mensajes enviados y recibidos.

Para el input del texto, se definen colores y fondos, mientras que para el botón de submit, se opta por un verde resaltante con texto en negro.

¿Cómo gestionar la lógica de intercambio de mensajes en JavaScript?

En JavaScript, capturamos el formulario para escuchar el evento submit, así como el área de mensajes y el campo de entrada. Creamos una función auxiliar realizando peticiones HTTP, transformando respuestas como JSON o mostrando mensajes de error en caso necesario.

Luego, resetMessages limpia mensajes recientes e integra un primer elemento vacío en el contenedor, actuando como ancla para elementos futuros. La función addMessage gestiona la incorporación de mensajes: asigna clases según origen y lo inserta en la lista principal, con un sistema de scroll automático al mensaje más reciente.

Al enviar un mensaje, se lee desde el input de texto, se limpia el formulario y, si hay contenido, se codifica y envía como URL, también agregándose al historial de mensajes visualizables. El proceso se repite cada vez que un submit activa la función.

Para recibir mensajes recientes cada tres segundos, otra función solicita nuevos mensajes, los decodifica y visualiza si es mensaje válido. Los mensajes propios ostentan un estilo específico, asegurando diferenciación.

Finalmente, al subir el código a las tarjetas de desarrollo y conectarte a las IPs correspondientes, puedes probar el funcionamiento enviando y recibiendo mensajes. Cambiar el color primario puede distinguir diferentes instancias de la aplicación.

Debes sentirte orgulloso del avance logrado y te animo a experimentar y compartir tus resultados en la comunidad. También descubre en la próxima clase el flujo final del proyecto, integrando celulares y tarjetas de desarrollo. ¡Sigue adelante!