Última actualización: 6 abril, 2023
¿Qué vamos a construir?
Vamos a construir una app de chat con sincronización en tiempo real, es decir, si dos personas están chateando, lo que escriba una y le envíe a la otra podrá ser visto por la otra prácticamente en el mismo momento de haber enviado el mensaje. Además, como usuario también podrás unirte a distintos canales de chat.
Otra de las características será el poder cambiar tu nombre de usuario cuando quieras.
Consideraciones previas y pre-requesitos
Para poder seguir este proyecto sin ir más perdido/a que un pulpo en un garaje, deberás tener conocimientos de:
Estructura inicial del proyecto
En cuanto a los scripts, app.js se encargará de conectar ui.js y chat.js entre sí para poder lanzar nuestra app.
Vamos a configurar el index.html.
1. Añadimos los scripts al final, en este orden: chat.js, ui.js y app.js.
2. Añadimos bootstrap y nuestro propio CSS.
Vamos a encargarnos ahora de crear nuestro esqueleto HTML en el <body>.
4. Usamos un container gigante que abarque toda la página y añadimos comentarios en el HTML a modo aclaratorio.
En la sección de chat window es donde se mostrará una conversación entera, diferenciando quién ha dicho qué. Cada vez que un usuario escriba un mensaje y lo mande, lo colocaremos en un <li> dentro del <ul>. Pero eso no lo vamos a escribir de manera estática (en adelante, harcoded) sino dinámica en nuestro código JavaScript (en adelante, JS).
La sección new chat form será la parte donde el usuario escriba su mensaje y se envíe a la base de datos (en inglés, database) que vamos a crear después.
Utilizamos tanto clases de bootstrap como clases propias.
Al final de la sección update name form tenemos un <div> que se encargará de darle al usuario un comentario sobre la acción que acabe de hacer. Vamos, de darle feedback.
Nuestra app debería tener una pinta como esta:
Vamos a darle un poco de vidilla con CSS, en el archivo styles.css.
.container { max-width: 750px; } .btn { background-color: rgb(11, 165, 192); color: #fff; } .btn:hover, .btn:active { background-color: rgb(15, 132, 153); color: #fff; transition: all 0.2s; } .btn:focus { box-shadow: none; }
El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.
THE END!
¡Y hasta aquí la primera parte de este proyecto de construcción de un chat en tiempo real! Espero que hayas aprendido algo nuevo
Si quieres seguir aprendiendo, nos vemos en la parte #2.
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Otros artículos que pueden interesarte