Cómo crear una aplicación de chat de vídeo

Justo el otro día me encontré con este impresionante tutorial Twilio por Phil Nash explicando cómo hacer un Video Chat usando React Hooks, así que decidí ejecutarlo en Back4app porque es gratis, es impresionante y se puede integrar con Parse, así que podría tener alojamiento web gratuito (subdominio back4app libre incluido), alojar mi App y utilizar la entrega de datos en tiempo real para incluir funciones de chat en el futuro.
Este post es un tutorial de lo que hice para conseguir que funcione.

Lo primero es lo primero

Recomiendo encarecidamente la lectura a través del artículo de Phil y conseguir que funcione en su máquina antes de conseguir que funcione en línea.

Necesitarás unos conocimientos mínimos de NodeJS, React y Express para poder continuar. Explicaré los pasos que seguí y por qué, pero si no estás familiarizado con esas tecnologías, puede que no entiendas exactamente por qué son necesarias.

Primer paso: lo que necesita

El artículo de Phil dice que necesitarás Node.js y NPM instalados y funcionando. Yo ya lo tenía en mi sistema, así que asegúrate de tenerlo también.

Además, necesitarás una cuenta Twilio, así que crea una gratuita y listo.

Segundo paso – Puesta en marcha

El primer paso, clonar el repositorio, no me ha funcionado. El comando Phil dice:

git clone -b twilio [email protected]:philnash/react-express-starter.git twilio-video-react-hooks

me dio algunos errores y, al final, lo que me funcionó fue esto:

git clone https://github.com/philnash/twilio-video-react-hooks.git

Con eso fuera del camino, los otros comandos se ejecutaron bien:

cd twilio-video-react-hooks
npm install

Resultado:

Si está ejecutando localmente, debe configurar su archivo env como se describe en el artículo de Phil, pero ya que el enfoque aquí es ejecutarlo en Back4app, me saltaré eso por ahora.
Todavía necesitaremos los valores TWILIO_API_KEY, TWILIO_API_SECRET y TWILIO_ACCOUNT_SID de tu cuenta Twilio, pero los usaremos en un lugar diferente.

Cambiando un poco el código

Como nuestra arquitectura es diferente, tendremos que cambiar algunas cosas clave.

El primero son los módulos NPM. El comando npm install de arriba instalará los módulos en tu ordenador, pero en Back4app necesitas decirle a Parse que los instale por ti.

Tenemos un gran tutorial que explica cómo hacerlo, así que échale un vistazo aquí.

Al final, mi archivo package.json terminó así:

{ 
   "dependencias": {
           "express-pino-logger": "*",
           "twilio": "*"  
   } 
}

Observa que estoy instalando el módulo Twilio en su última versión (‘*’ significa la última). En este punto usted podría preguntarse por qué lo estoy haciendo, como Parse ya tiene un módulo de Twilio construido en la pila:

Y la razón es el versionado. Por compatibilidad, cada versión de Parse tiene la pila de módulos con determinadas versiones, que pueden o no funcionar para tu caso concreto. Para usar cualquier versión que no esté listada en la pila, podemos asegurarnos de que Parse instala la versión correcta especificándola en el archivo package.json.

Construyámoslo

Con el fin de desplegar, debemos crear una versión optimizada en tiempo de ejecución de nuestro código. En el artículo de Phil, afirma que debemos ejecutar:

npm run dev

que funcionará para un entorno local, pero en nuestro caso, desde dentro del directorio del proyecto, ejecutaremos:

npm run build

que producirá una nueva carpeta llamada build, conteniendo todos nuestros assets:

A continuación, subiremos todo el contenido de nuestra carpeta de compilación a nuestra carpeta pública en la sección Cloud Code.

Hay diferentes enfoques para subir. Usted puede hacerlo manualmente desde su navegador, pero yo prefiero el Back4app CLI para desplegar todo para mí. Es mucho más rápido y se asegurará de que todo está en su lugar.

Al final, tu estructura principal debería tener este aspecto:

Configuración de App.js

Hay un archivo que tendrás que cambiar manualmente: el archivo index.js dentro del directorio del servidor del proyecto.

Parse está configurado para ejecutar un archivo llamado app.js, no index.js, así que vamos a cambiar el nombre de ese archivo.

Puedes crear una copia llamada app.js, renombrar el original a app.js, pero al final, tiene que llamarse app.js:

También tendremos que hacer algunos cambios en ese archivo.

En la línea 7, donde dice

const app = express();

Parse ya tiene Express cargado e instanciado, por lo que entraría en conflicto. Vamos a comentar esa línea:

También, líneas 41 a 43, donde dice:

app.listen(3001, () =>
  console.log('El servidor Express se está ejecutando en localhost:3001')
);

Parse no podrá abrir ese puerto por razones de seguridad, así que comentémoslo también:

Otra cosa es que, al final, nunca usamos el módulo express-pino-logger, así que comentemos las líneas 4 y 10, donde dice:

const pino = require('express-pino-logger')();
...
app.use(pino);

Así que se verá así:

Ahora, en la parte superior del archivo, te darás cuenta de que este archivo invoca otros dos archivos locales: config y tokens:

const config = require('./config');
...
const { videoToken } = require('./tokens');

Necesitaremos que esos archivos locales se suban junto con el archivo app.js, así que subamos los tres archivos a la carpeta Cloud.

La estructura final será la siguiente:

Parte de codificación terminada

Ahora nuestro código está desplegado y todo está listo para funcionar. Es hora de realizar algunas configuraciones.

¿Recuerdas que Phil dijo que debemos configurar el archivo .env con las credenciales de Twilio?
En Parse, tenemos una sección para eso en el panel de Configuración del Servidor.
Abre el panel de Variables de Entorno:

Y configúralo como lo harías en el archivo .env:

Recuerda que puedes recuperar esos valores desde tu cuenta Twilio:

Configuración del alojamiento web

Ahora, en el panel Configuración del servidor, vaya a la sección Alojamiento web y consulta en directo:

Habilite Web Hosting y establezca un subdominio back4app.io para su Aplicación:

Guárdalo y listo.

Pruebas

Ahora es el momento de probar nuestra aplicación.

Ve a la URL que estableciste en tu alojamiento web desde un navegador. Recuerda utilizar HTTPS como protocolo.
Como te vamos a pedir acceso a tu cámara, es obligatorio que utilices HTTPS, de lo contrario, te dará error. Así que dirígete a:

https://Your_Domain_Name.back4app.io

Tu navegador debería pedirte permiso para utilizar tu cámara y tu micrófono. Si le das esos permisos, deberías verte en la pantalla:

Conclusión

Tener tu proyecto React en Back4app es fácil, gratis y genial. Con sólo un poco de retoque, podríamos tener el proyecto de Phil funcionando.

También tenemos todos los beneficios de Parse y Back4app: es seguro, escalable, tolerante a fallos y tiene copias de seguridad ya configuradas para ti.

Incluso puedes ampliarlo con las funciones de Parse, como Iniciar sesión con Google, Iniciar sesión con Apple, Iniciar sesión con LinkedIn, entrega de datos en tiempo real y vincularlo con nuestro increíble centro de bases de datos.

Es mucha potencia, muchas prestaciones y lo mejor: es todo gratis para que ejecutes pequeñas aplicaciones.