Aprenda a crear su propia aplicación de chat de escritorio con React y Electron, paso a paso

Este tutorial fue escrito en colaboración con el asombroso Christian Nwamba.

Cuando aprende a codificar, tiene muchos recursos a su disposición: libros, screencasts, tutoriales e incluso ejercicios. Pero para convertirse en un gran desarrollador, debe practicar lo que aprende con un proyecto.

Aprender haciendo es la motivación de este artículo. Comenzará de cero y creará una aplicación de chat completa, paso a paso.

Construirá el proyecto paso a paso y, para probar que lo comprende, incluimos algunos desafíos especiales adicionales al final. ¿Estás preparado para la prueba?

Esto es lo que construiremos:

Bastante genial, ¿verdad?

Cuando lo siga, aprenderá cómo crear un chat en tiempo real, una lista de "quién está en línea" y, en el camino, cómo estructurar una aplicación React. Para potenciar nuestro chat, usaremos un servicio que estoy ayudando a construir llamado Chatkit.

¿Suena bien? Sintonice la radio FreeCodeCamp para escuchar música de fondo suave y delicada para mantenerse concentrado y ¡vamos!

Lo que necesitas saber

En realidad, ¿una cosa más?:

Sería bueno si ya supiera algo de JavaScript básico, Node y React. Dicho esto, si no se siente cómodo con estas tecnologías, ¡pruébelo de todos modos!

Estructuramos intencionalmente este tutorial para dejar en claro dónde pegar el código para que pueda seguirlo. Si tienes preguntas, ¡déjalas aquí!

Muy bien, paso uno:

Configurar Electron

Para crear una aplicación de escritorio multiplataforma con tecnologías web, usaremos Electron.

Para despegar, hicimos una plantilla inicial mínima. Descargalo:

git clone //github.com/pusher/electron-desktop-starter-template electron-desktop-chat
cd electron-desktop-chat

E instale esas dependencias locales:

npm install

Crea una cuenta de Chatkit

No nos preocupa demasiado la creación de un back-end en este tutorial, así que usaremos Chatkit.

Para seguir adelante, cree una cuenta gratuita y una nueva instancia llamada "Chat de escritorio de Electron":

En la ventana de configuración, active el proveedor de tokens de prueba:

Anote el punto final del proveedor de tokens de prueba , el localizador de instancias y la clave secreta . Los necesitaremos en el siguiente paso.

Configurar el servidor de nodo

Chatkit tiene dos conceptos fundamentales: usuarios y salas.

Los usuarios pueden crear salas, unirse a ellas y charlar en ellas. Pero antes de que un usuario pueda interactuar con una habitación, debemos crear una.

Esto tiene que suceder en el servidor.

En electron-desktop-chat, ejecute:

npm install --save express cors body-parser pusher-chatkit-server

Y pegue esto en un nuevo archivo llamado server.js:

Recuerde reemplazar el localizador de instancias y la clave con los suyos, el localizador de instancias y la clave .

La mayor parte de este código es repetitivo, importa dependencias, configura Express, etc.

La parte importante es la ruta "/ usuarios" que maneja las solicitudes para crear un nuevo usuario.

Ejecute el servidor con node server.jsy verá que el servidor está "Ejecutando en el puerto 3001".

Crea el formulario de nombre de usuario

Cuando alguien carga nuestra aplicación, queremos pedirle un nombre de usuario y luego enviarlo a "/ users".

Instale algunos componentes de interfaz de usuario de aspecto nativo con:

npm install --save react-desktop

Y cree un componente de formulario llamado UsernameForm:

Puede leer más sobre los componentes del formulario React aquí. Por casualidad, la documentación usa una clase NameForm similar a la nuestra, ¡así que debería ser familiar!

A continuación, reemplace toda la aplicación con:

Y para probarlo, corre npm run dev. Verá que se muestra el formulario de nombre de usuario:

Asegúrese de que el servidor se esté ejecutando (recuerde, el comando es` node server.js), presione Enviar y verá que se crea un usuario:

Transición de pantallas sin biblioteca

Una vez que tenemos un usuario, podemos hacer la transición del formulario de nombre de usuario a la pantalla de chat real. Deberíamos definir eso ahora.

Cree un nuevo componente llamado Chat:

Y actualiza la aplicación:

Ejecute la aplicación, ingrese un nombre de usuario y pasará a la pantalla de chat:

Agrega chat en tiempo real con Chatkit

Las cosas realmente van bien, ¿no crees?

Para conectarse a Chatkit desde el cliente, debe instalar @ pusher / chatkit:

npm install --save add @pusher/chatkit

Y reemplace todo el chat con:

Recuerde reemplazar la tokenProviderUrly instanceLocatorlos valores con su prueba de emergencia Proveedor de punto final y la Instancia de localización .

Ejecute la aplicación, presione ⌘ + ⌥ + I (Control + Shift + I) y verá que se conectó a Chatkit.

Crear una sala de Chatkit

¡Tenemos un usuario pero ahora necesitamos una habitación!

Para crear uno, use el inspector de Chatkit:

Recuerde copiar la identificación de su habitación, la necesitaremos en el siguiente paso.

Crear un componente de sala de chat

Ahora que tenemos una sala, podemos suscribirnos a los nuevos mensajes enviados en esa sala.

Para representarlos, cree un componente MessageList:

Y actualiza Chat:

Como siempre, recuerde actualizar roomIdcon su ID de habitación real.

Ahora, cuando se envíen mensajes en nuestra habitación, onNewMessagese llamará. Desde aquí, podemos actualizar nuestro estado y, a su vez, nuestra interfaz de usuario.

En un segundo, dejaremos que los usuarios envíen sus propios mensajes. Por ahora, para probar la suscripción, use el inspector:

Enviando mensajes

Para permitir que los usuarios envíen sus propios mensajes, cree un componente SendMessageForm:

Y actualiza Chat:

Vuelve a cargar la aplicación con ⌘ + R (Control + Shift + R) y podrás enviar mensajes:

De hecho, ¿por qué no abrir dos aplicaciones una al lado de la otra y tener una conversación con usted mismo?

Qué momento para estar vivo ...

Estilo de la interfaz de usuario

Gracias a React Desktop, nuestra aplicación ya parece decente, pero podemos hacerlo mejor.

Hagamos algunos ajustes y definamos nuestro diseño para usarlo en el siguiente y último paso.

Reemplace todo index.css con:

Mostrar quién está en línea

Para finalizar nuestra aplicación de chat, agregaremos una lista de "quién está en línea" para mostrar, lo adivinó, ¡quién está en línea!

Cree un componente OnlineList:

Luego actualiza Chat:

¿Esperabas que fuera más difícil? ¡Definitivamente lo hice la primera vez que lo intenté!

Debido a que Chatkit actualiza la userspropiedad de forma dinámica, no tenemos que administrar ninguno de nuestros propios estados. Simplemente necesitamos decirle a React que vuelva a renderizar y, a su vez, reevalúe userscada vez que alguien se conecta ( onUserCameOnline), se desconecta ( onUserWentOffline) o se une a la sala ( onUserJoined).

Adelante, ejecute el servidor y el cliente y admire su magnífica nueva aplicación de chat:

Si has llegado hasta aquí, ¿podrías seguir adelante? Prueba estos desafíos adicionales ...

Desafío 1: muestre quién en la sala está escribiendo activamente

Vea si puede agregar indicadores de escritura a la aplicación. Por ejemplo, si estoy escribiendo, usted y todos los demás en la sala verán "Booker está escribiendo ...".

Si Chris y yo estuviéramos escribiendo, vería "Booker y Chris están escribiendo ..." y así sucesivamente.

Sugerencias:

  • Documentación del indicador de mecanografía de chatkit
  • Tutorial de clonación de Slack

Desafío 2: permitir que el usuario cree su propia habitación

En este tutorial, usamos el inspector para crear una habitación y luego codificamos el ID de la habitación. Ésta no es una buena práctica.

En la mayoría de las aplicaciones, querrá crear habitaciones dinámicamente con la función createRoom.

Cuando alguien carga la aplicación, pídele también el nombre de una habitación:

Si la sala existe, únete a ella; si no, créelo y únase a él.

Sugerencias:

  • documentación de createRoom

Conclusión

¡Eso fue divertido! Creamos una aplicación de chat genial en cuánto, ¿menos de una hora?

Una cosa que noté (y tal vez tú también lo hiciste) es que una vez que la base está en su lugar (plantilla, conexión de Chatkit, etc.), agregar nuevas funciones de chat es bastante simple.

Aparte de los desafíos, tendríamos curiosidad por ver dónde más puede llevar la solicitud. Algunas ideas:

  • Enviar archivos
  • Número de mensajes no leídos
  • Notificaciones
  • Leer cursores
  • Mensajería privada uno a uno

No dude en seguirnos en Twitter, @bookercodes y @codebeast.

Hasta la próxima, ciao.