Comment créer une application de chat vidéo

L’autre jour, je suis tombé sur ce tutoriel Twilio de Phil Nash expliquant comment faire un chat vidéo en utilisant React Hooks, j’ai donc décidé de l’exécuter dans Back4app parce que c’est gratuit, c’est génial et peut être intégré avec Parse, donc je pourrais avoir un hébergement web gratuit (sous-domaine back4app gratuit inclus), héberger mon application et utiliser la livraison de données en temps réel pour inclure des fonctionnalités de chat à l’avenir.
Cet article est une présentation de ce que j’ai fait pour que cela fonctionne.

Tout d’abord

Je recommande vivement de lire l’article de Phil et de le faire fonctionner sur votre machine avant de le faire fonctionner en ligne.

Vous aurez besoin d’une connaissance minimale de NodeJS, React et Express pour continuer. Je vais expliquer les étapes que j’ai suivies et pourquoi, mais si vous n’êtes pas familier avec ces technologies, vous pourriez ne pas comprendre exactement pourquoi elles sont nécessaires.

Première étape – Ce dont vous aurez besoin

L’article de Phil indique que vous aurez besoin de Node.js et de NPM installés et fonctionnels. J’avais déjà cela dans mon système, alors assurez-vous que c’est aussi le cas pour vous.

Vous aurez également besoin d’un compte Twilio, alors créez-en un gratuitement et vous serez prêt à partir.

Deuxième étape – Démarrer

La toute première étape, le clonage du dépôt, n’a pas fonctionné pour moi. La commande Phil indique :

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

m’a donné quelques erreurs et, en fin de compte, c’est celui-ci qui a fonctionné pour moi :

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

Ceci étant dit, les autres commandes ont bien fonctionné :

cd twilio-video-react-hooks
npm install

Résultat :

Si vous travaillez en local, vous devez configurer votre fichier env comme décrit dans l’article de Phil, mais puisque l’objectif ici est de travailler avec Back4app, je vais sauter cette étape pour l’instant.
Nous aurons toujours besoin des valeurs TWILIO_API_KEY, TWILIO_API_SECRET et TWILIO_ACCOUNT_SID de votre compte Twilio, mais nous les utiliserons à un autre endroit.

Modifier légèrement le code

Comme notre architecture est différente, nous devrons modifier quelques éléments clés.

Le premier est le module NPM. La commande npm install ci-dessus installera les modules sur votre ordinateur, mais dans Back4app vous devez demander à Parse de les installer pour vous.

Nous avons un excellent tutoriel expliquant comment procéder, consultez-le ici.

Au final, mon fichier package.json se présente comme suit :

{ 
   "dépendances" : {
           "express-pino-logger" : "*",
           "twilio" : "*"  
   } 
}

Remarquez que j’installe le module Twilio dans sa dernière version (‘*’ signifie la plus récente). A ce stade, vous pouvez vous demander pourquoi je fais cela, puisque Parse a déjà un module Twilio intégré dans la pile :

Et la raison en est le versionnage. Pour des raisons de compatibilité, chaque version de Parse possède la pile de modules avec certaines versions, qui peuvent ou non fonctionner pour votre cas spécifique. Pour utiliser une version qui n’est pas listée dans la pile, nous pouvons nous assurer que Parse installe la bonne version en la spécifiant dans le fichier package.json.

Construisons-le

Afin de déployer, nous devons créer une version optimisée de notre code. Dans l’article de Phil, il indique que nous devrions exécuter :

npm run dev

ce qui fonctionnera pour un environnement local, mais dans notre cas, à partir du répertoire du projet, nous exécuterons :

npm run build

qui produira un nouveau dossier appelé build, contenant tous nos actifs :

Nous téléchargerons ensuite tout le contenu de notre dossier de construction dans notre dossier public dans la section Cloud Code.

Il y a différentes approches pour l’upload. Vous pouvez le faire manuellement depuis votre navigateur, mais je préfère le CLI de Back4app pour tout déployer pour moi. C’est beaucoup plus rapide et cela permet de s’assurer que tout est en place.

Au final, votre structure principale devrait ressembler à ceci :

Configuration de l’App.js

Il y a un fichier que vous devrez modifier manuellement : le fichier index.js dans le répertoire serveur du projet.

Parse est configuré pour exécuter un fichier nommé app.js, et non index.js, alors renommons ce fichier.

Vous pouvez créer une copie nommée app.js, renommer l’original en app.js, mais au final, il doit s’appeler app.js :

Nous devrons également apporter quelques modifications à ce fichier.

À la ligne 7, où il est dit

const app = express() ;

Parse a déjà chargé et instancié Express, ce qui entraînerait un conflit. Commentons cette ligne :

De même, les lignes 41 à 43, où l’on peut lire :

app.listen(3001, () =>
  console.log('Express server is running on localhost:3001')
) ;

Parse ne pourra pas ouvrir ce port pour des raisons de sécurité, alors commentons-le aussi :

Une autre chose est que, finalement, nous n’avons jamais utilisé le module express-pino-logger, donc commentons les lignes 4 et 10, où il est dit :

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

Il se présentera donc comme suit :

Maintenant, tout en haut du fichier, vous remarquerez que ce fichier invoque deux autres fichiers locaux : config et tokens :

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

Nous aurons besoin de ces fichiers locaux pour être téléchargés avec le fichier app.js, alors téléchargeons les trois fichiers dans le dossier Cloud.

La structure finale se présentera comme suit :

La partie codage est terminée

Notre code est maintenant déployé et tout est prêt à fonctionner. Il est temps de procéder à quelques configurations.

Vous vous souvenez que Phil a dit que nous devions définir le fichier .env avec les informations d’identification de Twilio ?
Dans Parse, nous avons une section pour cela dans le panneau Server Settings.
Ouvrez le panneau Environment Variables :

Et configurez-le comme vous le feriez dans le fichier .env :

N’oubliez pas que vous pouvez récupérer ces valeurs à partir de votre compte Twilio :

Configuration de l’hébergement web

Maintenant, dans le volet Paramètres du serveur, allez dans la section Hébergement Web et Live Query :

Activez l’hébergement Web et définissez un sous-domaine back4app.io pour votre application :

Sauvegardez-le et vous serez prêt à partir.

Essais

Il est maintenant temps de tester notre application.

Allez à l’URL que vous avez défini dans votre hébergement web à partir d’un navigateur. N’oubliez pas d’utiliser le protocole HTTPS.
Comme nous allons demander l’accès à votre caméra, il est obligatoire d’utiliser HTTPS, sinon vous obtiendrez une erreur. Rendez-vous donc à l’adresse suivante

https://Your_Domain_Name.back4app.io

Votre navigateur doit vous demander l’autorisation d’utiliser votre appareil photo et votre micro. Si vous lui donnez ces autorisations, vous devriez vous voir à l’écran :

Conclusion

Avoir votre projet React dans Back4app est facile, gratuit et génial. Avec juste un peu de travail, nous pourrions avoir le projet de Phil opérationnel.

Nous avons également bénéficié de tous les avantages de Parse et de Back4app : il est sécurisé, évolutif, tolérant aux pannes et dispose de sauvegardes déjà mises en place pour vous.

Vous pouvez même l’enrichir de fonctionnalités Parse telles que l’ouverture de session avec Google, l’ouverture de session avec Apple, l’ouverture de session avec LinkedIn, la livraison de données en temps réel et la relier à notre superbe Database Hub.

C’est beaucoup de puissance, beaucoup de fonctionnalités et le meilleur : tout cela est gratuit pour vous permettre d’exécuter de petites applications.