Come costruire un’app di video chat

Proprio l’altro giorno mi sono imbattuto in questo fantastico tutorial di Phil Nash su Twilio che spiega come creare una video chat utilizzando React Hooks, così ho deciso di eseguirla in Back4app perché è gratuito, è fantastico e può essere integrato con Parse, in modo da poter avere un web hosting gratuito (sottodominio gratuito di Back4app incluso), ospitare la mia app e utilizzare la consegna dei dati in tempo reale per includere funzioni di chat in futuro.
Questo post è una descrizione di ciò che ho fatto per farlo funzionare.

Prima le cose da fare

Raccomando vivamente di leggere l’articolo di Phil e di farlo funzionare sulla vostra macchina prima di farlo funzionare online.

Per procedere è necessaria una conoscenza minima di NodeJS, React ed Express. Vi spiegherò i passi che ho fatto e perché, ma se non avete familiarità con queste tecnologie, potreste non capire esattamente perché sono necessarie.

Primo passo – Cosa vi serve

L’articolo di Phil afferma che è necessario che Node.js e NPM siano installati e funzionanti. Io li avevo già nel mio sistema, quindi assicuratevi di averli anche voi.

Inoltre, avrete bisogno di un account Twilio, quindi createne uno gratuito e sarete pronti a partire.

Secondo passo – Iniziare

Il primo passo, la clonazione del repository, non ha funzionato per me. Il comando Phil afferma:

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

mi ha dato alcuni errori e, alla fine, quello che ha funzionato per me è stato questo:

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

Tolto questo, gli altri comandi sono stati eseguiti bene:

cd twilio-video-react-hooks
installare npm

Risultato:

Se si esegue in locale, è necessario impostare il file env come descritto nell’articolo di Phil, ma poiché in questo caso l’obiettivo è l’esecuzione in Back4app, per ora non lo farò.
Avremo comunque bisogno dei valori TWILIO_API_KEY, TWILIO_API_SECRET e TWILIO_ACCOUNT_SID del vostro account Twilio, ma li useremo in un altro posto.

Modificare leggermente il codice

Poiché la nostra architettura è diversa, dovremo cambiare alcune cose fondamentali.

Il primo è quello dei moduli NPM. Il comando npm install di cui sopra installerà i moduli sul vostro computer, ma in Back4app dovete dire a Parse di installarli per voi.

Abbiamo un’ottima guida che spiega come fare, consultatela qui.

Alla fine, il mio file package.json era così:

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

Notate che sto installando il modulo Twilio nella sua ultima versione (‘*’ significa l’ultima). A questo punto ci si potrebbe chiedere perché lo faccio, visto che Parse ha già un modulo Twilio integrato nello stack:

Il motivo è il versioning. Per compatibilità, ogni versione di Parse ha uno stack di moduli con determinate versioni, che potrebbero funzionare o meno per il vostro caso specifico. Per utilizzare qualsiasi versione non elencata nello stack, possiamo assicurarci che Parse installi la versione corretta specificandola nel file package.json.

Costruiamolo

Per distribuire, dobbiamo creare una versione ottimizzata per il runtime del nostro codice. Nell’articolo di Phil, si afferma che dovremmo eseguire:

npm run dev

che funzionerà in un ambiente locale, ma nel nostro caso, dall’interno della cartella del progetto, verrà eseguito:

npm run build

che produrrà una nuova cartella chiamata build, contenente tutte le risorse:

Quindi caricheremo tutto il contenuto della nostra cartella di build nella nostra cartella Public nella sezione Cloud Code.

Esistono diversi approcci al caricamento. È possibile farlo manualmente dal browser, ma io preferisco che Back4app CLI distribuisca tutto per me. È molto più veloce e garantisce che tutto sia al suo posto.

Alla fine, la struttura principale dovrebbe assomigliare a questa:

Configurazione di App.js

C’è un file che dovrete modificare manualmente: il file index.js all’interno della cartella server del progetto.

Parse è configurato per eseguire un file chiamato app.js, non index.js, quindi rinominiamo il file.

È possibile creare una copia denominata app.js, rinominare l’originale in app.js, ma alla fine deve essere denominata app.js:

Sarà inoltre necessario apportare alcune modifiche a questo file.

Alla riga 7, dove si dice

const app = express();

Parse ha già Express caricato e istanziato, quindi andrebbe in conflitto. Commentiamo questa riga:

Inoltre, le righe da 41 a 43, dove si dice:

app.listen(3001, () =>
  console.log('Il server Express è in esecuzione su localhost:3001')
);

Parse non sarà in grado di aprire questa porta per motivi di sicurezza, quindi commentiamo anche questa:

Un’altra cosa è che, alla fine, non abbiamo mai usato il modulo express-pino-logger, quindi commentiamo le righe 4 e 10, dove si dice:

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

Quindi il risultato sarà questo:

Ora, nella parte superiore del file, si noterà che questo file richiama altri due file locali: config e tokens:

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

Questi file locali devono essere caricati insieme al file app.js, quindi carichiamo tutti e tre i file nella cartella Cloud.

La struttura finale sarà così composta:

Parte di codifica eseguita

Ora il nostro codice è distribuito e tutto è pronto. È il momento di effettuare alcune configurazioni.

Ricordate che Phil ha detto che dobbiamo impostare il file .env con le credenziali di Twilio?
In Parse, abbiamo una sezione apposita nel pannello delle impostazioni del server.
Aprire il pannello Variabili d’ambiente:

E impostarlo come nel file .env:

Ricordate che potete recuperare questi valori dal vostro account Twilio:

Configurazione dell’hosting web

A questo punto, nel riquadro Impostazioni del server, andare alla sezione Web Hosting e Live Query:

Attivare l’hosting Web e impostare un sottodominio back4app.io per l’applicazione:

Salvatelo e sarete pronti a partire.

Test

Ora è il momento di testare la nostra applicazione.

Andate all’URL impostato nel vostro hosting web da un browser. Ricordatevi di utilizzare il protocollo HTTPS.
Poiché chiederemo l’accesso alla vostra fotocamera, è obbligatorio utilizzare HTTPS, altrimenti si otterrà un errore. Andate quindi a:

https://Your_Domain_Name.back4app.io

Il browser dovrebbe chiedere il permesso di utilizzare la fotocamera e il microfono. Se si concede l’autorizzazione, ci si dovrebbe vedere sullo schermo:

Conclusione

Avere un progetto React in Back4app è facile, gratuito e fantastico. Con un po’ di lavoro, potremmo avere il progetto di Phil pronto e funzionante.

Abbiamo anche tutti i vantaggi di Parse e Back4app: è sicuro, scalabile, tollerante ai guasti e ha backup già impostati per voi.

È possibile anche aumentare le funzionalità di Parse, come l’accesso con Google, l’accesso con Apple, l’accesso con LinkedIn, l’invio di dati in tempo reale e il collegamento con il nostro fantastico Database Hub.

Si tratta di una grande potenza, di un gran numero di funzioni e di un’ottima cosa: è tutto gratuito per l’esecuzione di piccole applicazioni.