Compartir:
){kind=small}
Amable educador tecnológico, padre de familia, defensor de la diversidad, probablemente discuta demasiado. Anteriormente ingeniero de backend. Háblame de JavaScript (frontend o backend), el increíble Vue.js, DevOps, DevSecOps, cualquier cosa JamStack. Escritor en DEV.to
Crear una interfaz de usuario de mensajería sencilla con Bootstrap
Tiempo de lectura: 28 minutos
Bootstraporiginalmente llamado Twitter Blueprint, fue desarrollado por @mdo (Mark Otto) y @fat (Jacob Thornton) mientras trabajaban en Twitter para fomentar la coherencia entre las herramientas. Ahora, es uno de los frameworks front-end y proyectos de código abierto más populares del mundo. Aunque muchos desarrolladores de front-end todavía lo consideran un atajo, ha desempeñado un papel importante a la hora de ofrecer una experiencia de usuario coherente y sencilla a todos los desarrolladores del mundo.
La web de diseño está inundada de todo tipo de ejemplos de interfaces de usuario de mensajería, pero los desarrolladores carecen de marcos de trabajo que les proporcionen interfaces de usuario de mensajería rápidas y fáciles de implementar, que se apoyen en algo tan sencillo como Bootstrapy que no utilicen mucho CSS o JavaScript personalizado. En puede encontrar interfaces de usuario de mensajería para Bootstrap en la naturaleza, pero ninguna de ellas parece facilitarte el uso de componentes estándar sencillos de la base de datos de Bootstrap de Bootstrap.
En esta guía, vas a mejorar una aplicación de chat existente con Bootstrap 4utilizando componentes estándar y una edición mínima de CSS.
La aplicación de demostración aplicación de demostración y un ejemplo terminado ya están disponibles en GitHub.
Para empezar, vas a necesitar Node y NPM instalados. Esta guía utiliza Node 8 y NPM 6. Comprueba que están instalados y actualizados.
Tanto Node como NPM necesitan estar instalados y en la versión correcta. Vaya a nodejs.org e instale la versión correcta si no la tiene.
Para configurar tu aplicación, necesitarás instalar Vonage CLI. Instálalo usando NPM en la terminal.
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
Regístrate para obtener una cuenta gratuita de Vonage y configura la CLI de Vonage con la clave API y el secreto que se encuentran en el panel.
La CLI de Vonage tiene complementos que, cuando se instalan, brindan capacidades adicionales. En este tutorial, trabajarás con Conversations, por lo que este es el comando para instalar su complemento:
Puede utilizar git para clonar la aplicación de demostración desde GitHub.
Para aquellos que no se sientan cómodos con los comandos git, no os preocupéis, os tengo cubiertos. Esta guía contiene instrucciones para descargar el proyecto como archivo ZIP.
Siga esta guía para instalar git.
La aplicación de demostración es simplemente una implementación básica de Conversation Client SDK de Vonage de Vonage, que es una biblioteca de JavaScript para implementar WebRTC rápida y fácilmente.
Para que esta guía sea fácil de seguir, clona la aplicación de demostración directamente desde GitHub.
Para quienes no se sientan cómodos con los comandos git, pueden descargar la aplicación de demostración como archivo zip y descomprimirlo localmente.
Una vez clonado o descomprimido, cambie al nuevo directorio de aplicaciones de demostración.
Instale las dependencias de npm.
Configure el puerto de la aplicación utilizando un archivo de entorno. Copie el archivo de ejemplo:
Ahora, edita el archivo de entorno .env y establece el puerto en 3000 (o el puerto que necesites).
Entre otros paquetes instalados por su último comando, hay un paquete llamado nodemonque permite recargar la aplicación si se edita algún archivo automáticamente.
Para iniciar la aplicación de la forma estándar, ejecute:
Para iniciar la aplicación, pero con nodemon en su lugar, ejecute:
Consejo: Si está ejecutando la aplicación con
nodemondurante el resto de este tutorial, siempre que te sugiera reiniciar la aplicación, no tendrás que hacerlo porquenodemonlo hace por ti. Sin embargo, si usted necesita volver a autenticarse con la aplicación, usted todavía tendrá que hacer eso, ya que la información de la sesión se almacena en la memoria y no está configurado para utilizar cualquier otro almacenamiento.
Sea cual sea la forma que elijas para ejecutar la aplicación, una vez en marcha, puedes probarla en tu navegador favorito, que debería ser capaz de encontrarla ejecutándose localmente: http://localhost:3000.
A blank, broken Chat application
Está casi todo en blanco, no puedes enviar mensajes a nadie y, si miras en la consola del navegador, encontrarás errores de la API de Vonage, porque es hora de configurar la aplicación.
Para conectarte a Vonage y enviar o recibir mensajes del servicio, debes configurar la aplicación de demostración.
En primer lugar, crea una aplicación de Vonage con capacidades de RTC (comunicación en tiempo real). La URL del evento será un registro en vivo de los eventos que ocurren en el servicio de Vonage, como usuarios que se unen/abandonan, envían mensajes, habilitan el audio (si tienes ganas de habilitarlo).
En segundo lugar, crea una Conversación de Vonage, que actúa como una sala de chat. O bien, un contenedor de mensajes y eventos.
Ahora, crea un usuario para ti.
Nota: En esta demostración, no chatearás entre dos usuarios. Otras guías muestran cómo crear conversaciones entre varios usuarios. Esta guía se centra en estilizar la interfaz de usuario de los mensajes de una forma sencilla pero atractiva.
A continuación, añade tu nuevo usuario a la conversación. Un usuario puede ser miembro de una aplicación, pero aún así tiene que unirse a la conversación.
Por último, genere un token para su nuevo usuario. Este token representa al usuario cuando accede a la aplicación. Este token de acceso lo identifica, por lo que cualquiera que lo utilice asumirá que es el usuario correcto.
En la práctica, configurará la aplicación con este token. En producción, estos deben ser guardados, mantenidos en secreto, y muy cuidadosamente expuestos a la aplicación cliente, si acaso.
Una vez generadas todas las partes que necesitarás, edita el archivo views/layout.hbs y encuentra el JavaScript que se muestra aquí:
<script>
var userName = '';
var displayName = '';
var conversationId = '';
var clientToken = '';
</script>Edita la configuración con los valores que has generado en los comandos anteriores.
<script>
var userName = 'luke'; // <USER_NAME>
var displayName = 'Luke Oliff'; // <DISPLAY_NAME>
var conversationId = 'CON-123...y6346'; // <CONVERSATION_ID>
var clientToken = 'eyJhbG9.eyJzdWIiO.Sfl5c'; // this will be much much longer
</script>Una vez configurada, reinicie la aplicación. Acceda a ella utilizando la misma URL de la aplicación.
Lo primero que verás es una línea que dice que te has unido a la conversación con tu usuario.
An almost blank, working Chat application
A continuación, puedes enviar algunos mensajes utilizando el formulario, donde podrás mensajearte a gusto.
Sending some messages to our working Chat application
Con su aplicación básica en funcionamiento, ahora puede darle estilo utilizando Bootstrap.
Cada paso de esta guía está confirmado individualmente en la rama rama de ejemplo terminada de este proyecto. Por lo tanto, si en algún momento se encuentra con un error en el proceso, puede referirse a los propios commits. También encontrarás enlaces al commit correspondiente a cada etapa.
Empezarás editando el archivo views/layout.hbs y modificando el diseño principal de la aplicación para incluir los recursos CSS y JavaScript de Bootstrap.
Siguiendo el Introducción a Bootstrap añade esta etiqueta <link> dentro de tu <head> antes de todas las demás hojas de estilo, para cargar los recursos CSS. La etiqueta <link> a continuación es un ejemplo, puede referirse a el commit en la aplicación de demostración, o utilizar la etiqueta <link> en la guía de inicio de Bootstrap.
<!-- views/layout.hbs -->
<!DOCTYPE html>
<html>
<head>
<!-- //... -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/..." integrity="..." crossorigin="anonymous">
<!-- //... -->
</head>
<!-- //... -->
Además, necesitará las bibliotecas recomendadas de Bootstrap y JavaScript. Estas, podría decirse, no son necesarias aquí. Pero, muchos de los componentes de Bootstrap requieren el uso de JavaScript para funcionar correctamente, apoyándose también en Popper.js y jQuery. De nuevo, puede consultar el commit de la aplicación de demostración o utilizar las etiquetas <script> en la guía de inicio de Bootstrap.
<!-- views/layout.hbs -->
<!-- //... -->
<!-- //... -->
<!-- //... -->
<script src="https://code.jquery.com/..." integrity="..." crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js..." integrity="..." crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/..." integrity="..." crossorigin="anonymous"></script>
</body>
</html>
Reinicie la aplicación y eche un vistazo de nuevo. Puedes ver que estos cambios han tenido un efecto mínimo.
Styled the working Chat application with Bootstrap
Con Bootstrap ahora incluido dentro de su aplicación, puede añadir su <nav> y el contenedor al diseño principal.
Siguiendo con la edición views/layout.hbsañade el siguiente código para envolver la expresión existente {{{body}}} existente.
<!-- views/layout.hbs -->
<!-- //... -->
<!-- //... -->
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">{{title}}</a>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-12">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Bootstrap Chat</h1>
</div>
{{{body}}}
</main>
</div>
</div>
<!-- //... -->
<!-- //... -->Si desea ver los cambios exactos en el archivo, puede echar un vistazo a el commit.
Ahora verás que has añadido una barra de navegación, pero el chat sigue sin estilo, lo que causa algunos problemas de visualización. Reinicie la aplicación para ver cómo se ve ahora.
Added navbar and container to Chat application
Dado que las interfaces de usuario de mensajería son una lista de mensajes, utilizará un elemento de lista <ul> semánticamente.
Edite views/index.hbs y cambie el elemento <div id="messageFeed"> por un elemento de lista desordenada (con viñetas) <ul> como se muestra. La clase list-unstyled es una clase de Bootstrap que elimina las viñetas y la sangría del estilo nativo de las listas.
<ul class="list-unstyled" id="messageFeed">
</ul>Utilizar el marcado semántico adecuado para las listas tiene la ventaja de mostrar la información correctamente en navegadores de texto y lectores de pantalla. Con el tiempo, sus mensajes también serán elementos de lista <li> de lista.
Durante la edición views/index.hbspuede hacer las siguientes sustituciones. Encuentre estos dos <input> elementos.
<input type="text" id="messageTextarea">
<input type="button" id="send" value="Send" />
Sustitúyalos por este código, que contiene un grupo de botones Bootstrap, un área de texto con estilo y un botón de envío.
<div class="input-group mb-3">
<input type="text" class="form-control" id="messageTextarea">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="send">Send</button>
</div>
</div>Eche un vistazo a el commit para ver exactamente cómo debe editarse el archivo.
Reinicie la aplicación y eche un vistazo de nuevo. Aunque ha cambiado cómo se añaden los mensajes, no ha cambiado mucho el estilo. Pero, al menos, el formulario está más cerca de lo que cabría esperar de una interfaz de usuario de mensajería.
Chat application now using list items and chat-style inputs
Una vez finalizados los cambios en el marcado, ocurren algunas cosas extrañas en el diseño.
Estos tres cambios de CSS están disponibles para su visualización en un único commit en public/stylesheets/style.css.
El primer cambio CSS es añadir padding-top al contenedor de contenido principal, permitiendo la altura de la barra de navegación (40px) y un espacio en blanco adecuado basado en el estilo por defecto de Bootstrap (8px).
/* ... */
[role="main"] {
padding-top: 48px; /* space for fixed navbar (40px) and margin (8px) */
}Reinicie la aplicación y inténtelo.
Fixed header margins in chat application
Este cambio messageFeed fija la altura del elemento que contiene los mensajes salientes en el 100% de la altura de la ventana gráfica menos las alturas de la barra de navegación (48px), la barra de título principal (71px) y el pie de página (aún sin estilo, a 53px).
/* ... */
#messageFeed {
height: calc(100vh - 172px); /* space for fixed navbar (48px), "main" title (71px), footer (53px) */
overflow-y: scroll; /* vertical scroll for the message feed */
}Reinicie la aplicación y inténtelo. Para ver el desplazamiento por desbordamiento del messageFeedtendrás que enviar algunos mensajes más.
Chat application message feed now scrollable
Este último cambio de CSS es para el botón <footer>que contiene la entrada de texto y el botón. Querrás fijarlos en la parte inferior de la ventana, a todo lo ancho. Establece la altura (53px), dale un color de fondo y añade un margen de borde estándar definido por el tema Bootstrap.
/* ... */
#messages footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%; /* 100% of page width */
padding: 0 15px 15px 15px; /* standard edge margin (15px) */
height: 53px; /* space for input height (38px) + bottom padding (15px) */
background-color: #fff;
}Reinicie la aplicación y inténtelo.
Chat application inputs now fixed to footer
Los últimos cambios que harás en la aplicación demo son en el JavaScript que viene con la demo. Todos estos cambios se realizan en el archivo public/javascripts/chat.js archivo.
Edite el archivo y busque la función memberJoined función Cámbiela para que devuelva un elemento de lista <li> como se muestra a continuación.
// public/javascripts/chat.js
//...
memberJoined(member, event) {
const date = new Date(Date.parse(event.timestamp));
return `<li class="my-2 text-center">` +
`<p>${member.display_name} joined the conversation <small>@ ${date.toLocaleString('en-GB')}</small></p>` +
`</li>`;
}
//...Para ver cómo se modifica la función JavaScript, echa un vistazo a la confirmación.
Reinicie la aplicación e inténtelo de nuevo utilizando la URL de la aplicación. Ahora verá que el mensaje al que se ha unido el usuario aparece centrado en el feed de mensajes.
Chat application events now using line items
En el mismo archivo, busque la función senderMessage función Edítala para que devuelva un elemento de lista <li> que sea un objeto Media. Los objetos multimedia son similares a los mensajes en el sentido de que tienen un título (para el autor y los metadatos), contenido (el mensaje) y una imagen opcional.
En este caso, tiene una condición que determina la salida:
Un objeto Media estándar si la corriente
user.namees igual al mensajeuser.name- De mí.Un objeto Media con el texto alineado a la derecha, si la corriente
user.nameno es igual al mensajeuser.name- To-Me.
// public/javascripts/chat.js
//...
senderMessage(user, sender, message) {
const date = new Date(Date.parse(message.timestamp))
var output = '';
if (user.name === sender.user.name) {
output = `<li class="media my-3">` +
`<div class="media-body">` +
`<h5 class="mt-0 mb-1">${sender.display_name} <small>@ ${date.toLocaleString('en-GB')}</small></h5>` +
message.body.text +
`</div>` +
`</li>`;
} else {
output = `<li class="media my-3">` +
`<div class="media-body text-right">` +
`<h5 class="mt-0 mb-1">${sender.display_name} <small>@ ${date.toLocaleString('en-GB')}</small></h5>` +
message.body.text +
`</div>` +
`</li>`;
}
return output;
}
//...Para ver cómo se modifica esta función JavaScript, echa un vistazo a la confirmación.
Reinicie la aplicación e inténtelo de nuevo utilizando la URL por defecto: http://localhost:3000. Ahora verás que tus mensajes tienen un estilo agradable.
Now using from-me and to-me message style in chat application
Sin perfiles de usuario en tu aplicación, la falta de avatares la deja un poco vacía. Así que, para completar el aspecto del objeto multimedia y darle el efecto de una aplicación de chat moderna, puedes utilizar un servicio de avatares de marcador de posición como adorable.io basado en la información del usuario.
Adorable tomará cualquier cadena como parte de una URL, https://api.adorable.io/avatars/64/my-string-here.png y devolverá una cara graciosa. Es una gran manera de añadir una imagen de marcador de posición que cambia entre los usuarios.
Así que, aún editando el mismo archivo, vuelve a la función senderMessage y añada esta línea después de la apertura de la partida <li> para los mensajes de-me.
// public/javascripts/chat.js
//...
`<img src="https://api.adorable.io/avatars/64/${btoa(sender.display_name)}.png" class="mr-3" alt="" />` +
//...
A continuación, añada esta línea en el campo a-me de la condición, justo antes del elemento de cierre de la partida </li> elemento.
// public/javascripts/chat.js
//...
`<img src="https://api.adorable.io/avatars/64/${btoa(sender.display_name)}.png" class="ml-3" alt="" />` +
//...
La diferencia crítica entre estas líneas es que una tiene la mr-3 y la otra tiene la clase ml-3 clase. Una es para una imagen alineada a la izquierda con un margen a la derecha. La otra es para una imagen alineada a la derecha con un margen a la izquierda. Confundirlas puede hacer que parezca un poco raro. Así que echa un vistazo a este commit para comprobar que lo has hecho bien.
Una vez que esté satisfecho con sus cambios, reinicie y echa un vistazo a la aplicación.
Adorable.io avatars in chat application
Las interfaces de mensajería convencionales tienen los mensajes más recientes en la parte inferior, y para ver los más antiguos hay que desplazarse hacia arriba. La aplicación de demostración también ordena los mensajes y eventos así. Así que, para mantenerte centrado en el contenido correcto, ahora puedes añadir el siguiente código. Este código desplazará el feed de mensajes hacia la parte inferior automáticamente cuando llegue un nuevo mensaje, sólo si el feed de mensajes ya estaba en la parte inferior. De esta forma, si te desplazas hacia arriba para ver mensajes anteriores, no hará nada.
Añade dos nuevas funciones al archivo chat.js archivo. La primera función devolverá un booleano, si messageFeed está en la parte inferior o no. La otra se desplazará messageFeed hasta el fondo.
// public/javascripts/chat.js
//...
isFeedAtBottom() {
return (this.messageFeed.offsetHeight+this.messageFeed.scrollTop)===this.messageFeed.scrollHeight;
}
scrollFeedToBottom() {
this.messageFeed.scrollTop = this.messageFeed.scrollHeight;
}
//...A continuación, modifica los escuchadores de eventos para los nuevos mensajes enviados y los nuevos miembros añadidos a la conversación. En ambos casos, registrarás la posición de desplazamiento de la fuente de mensajes antes de añadir la partida. A continuación, te desplazarás (o no) en función del contexto previo al cambio.
// public/javascripts/chat.js
//...
setupConversationEvents(conversation, user) {
//...
conversation.on('text', (sender, message) => {
var feedAtBottom = this.isFeedAtBottom();
// ...
if (feedAtBottom) {
this.scrollFeedToBottom();
}
})
conversation.on("member:joined", (member, event) => {
var feedAtBottom = this.isFeedAtBottom();
// ...
if (feedAtBottom) {
this.scrollFeedToBottom();
}
})
//...
}
//...
El último cambio en la aplicación de demostración es desplazar la fuente de mensajes a la parte inferior cuando se carga la página. Por lo tanto, después de la línea donde se añade el eventsHistory al feed de mensajes (this.messageFeed.innerHTML = eventsHistory + this.messageFeed.innerHTML), añade this.scrollFeedToBottom();.
// public/javascripts/chat.js
//...
showConversationHistory(conversation, user) {
// ...
// ...
this.messageFeed.innerHTML = eventsHistory + this.messageFeed.innerHTML;
this.scrollFeedToBottom();
// ...
// ...
}
//...Para asegurarte de que has aplicado correctamente este cambio, puedes ver la confirmación.
Una vez que esté satisfecho con sus cambios, reinicie y echa un vistazo a la aplicación.
Chat application message feed now scrolls to bottom
Si I estuviera construyendo una aplicación de chat, así es como me quiero que se vea.
Esperamos que esta guía para crear una interfaz de usuario de mensajería te resulte útil. Incluye lo básico, como De mí y Para mí desplazamiento automático a la parte inferior y marcadores de posición de avatar de usuario.
Ahora podrías aplicar estas técnicas de interfaz de usuario en algunos otros tutoriales de Vonage Conversation Client SDK, por ejemplo Cómo agregar funciones de voz a una aplicación de chat existente, Registrarse para chatear con Typeformy la Descripción general del Client SDK de JavaScript.
Algunas de nuestras otras guías incluyen el envío de mensajes entre varios usuarios. Te reto a que consigas que varios usuarios se envíen mensajes utilizando una interfaz de usuario de mensajería atractiva y compartas tus progresos.
Chat application using multiple users
Y no lo olvides, si tienes alguna pregunta, consejo o idea que quieras compartir con la comunidad en general, no dudes en acudir a nuestro canal de Slack de la comunidad o envíanos una respuesta 👇.
Compartir:
Amable educador tecnológico, padre de familia, defensor de la diversidad, probablemente discuta demasiado. Anteriormente ingeniero de backend. Háblame de JavaScript (frontend o backend), el increíble Vue.js, DevOps, DevSecOps, cualquier cosa JamStack. Escritor en DEV.to