Como criar um aplicativo de bate-papo por vídeo

Outro dia me deparei com este incrível tutorial do Twilio, escrito por Phil Nash, explicando como criar um bate-papo por vídeo usando o React Hooks. Decidi, então, executá-lo no Back4app porque ele é gratuito, é incrível e pode ser integrado ao Parse, de modo que eu poderia ter hospedagem gratuita na Web (subdomínio gratuito do Back4app incluído), hospedar meu aplicativo e usar a entrega de dados em tempo real para incluir recursos de bate-papo no futuro.
Esta postagem é um passo a passo do que fiz para fazê-lo funcionar.

Primeiro as coisas mais importantes

Recomendo enfaticamente a leitura do artigo de Phil e que o faça funcionar em seu computador antes de fazê-lo funcionar on-line.

Você precisará de conhecimentos mínimos de NodeJS, React e Express para prosseguir. Explicarei as etapas que segui e por quê, mas se você não estiver familiarizado com essas tecnologias, talvez não entenda exatamente por que elas são necessárias.

Primeira etapa – O que você precisará

O artigo de Phil afirma que você precisará do Node.js e do NPM instalados e funcionando. Eu já tinha isso em meu sistema, portanto, verifique se você também tem.

Além disso, você precisará de uma conta Twilio, portanto, crie uma conta gratuita e pronto.

Segunda etapa – Introdução

A primeira etapa, clonar o repositório, não funcionou para mim. O comando Phil afirma:

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

me deu alguns erros e, no final, o que funcionou para mim foi este:

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

Com isso fora do caminho, os outros comandos foram bem executados:

cd twilio-video-react-hooks
npm install

Resultado:

Se estiver executando localmente, você deverá definir seu arquivo env conforme descrito no artigo do Phil, mas como o foco aqui é executá-lo no Back4app, vou pular essa parte por enquanto.
Ainda precisaremos dos valores TWILIO_API_KEY, TWILIO_API_SECRET e TWILIO_ACCOUNT_SID da sua conta Twilio, mas os usaremos em um local diferente.

Alterar um pouco o código

Como nossa arquitetura é diferente, precisaremos mudar algumas coisas importantes.

O primeiro são os módulos NPM. O comando npm install acima instalará os módulos no seu computador, mas no Back4app você precisa dizer ao Parse para instalá-los para você.

Temos um ótimo tutorial que explica como fazer isso, portanto, dê uma olhada aqui.

No final, meu arquivo package.json ficou assim:

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

Observe que estou instalando o módulo Twilio em sua versão mais recente (“*” significa a mais recente). Neste ponto, você pode se perguntar por que estou fazendo isso, já que o Parse já tem um módulo Twilio integrado à pilha:

E o motivo é o controle de versão. Para fins de compatibilidade, cada versão do Parse tem a pilha de módulos com determinadas versões, que podem ou não funcionar para o seu caso específico. Para usar qualquer versão que não esteja listada na pilha, podemos garantir que o Parse instale a versão correta especificando-a no arquivo package.json.

Vamos construí-lo

Para implantar, precisamos criar uma versão otimizada para o tempo de execução do nosso código. No artigo de Phil, ele afirma que devemos executar:

npm run dev

que funcionará em um ambiente local, mas, no nosso caso, de dentro do diretório do projeto, executaremos:

npm run build

que produzirá uma nova pasta chamada build, contendo todos os nossos ativos:

Em seguida, faremos upload de todo o conteúdo dentro da pasta de compilação para a pasta Pública na seção Cloud Code.

Há diferentes abordagens para o upload. Você pode fazer isso manualmente no navegador, mas eu prefiro que a CLI do Back4app implemente tudo para mim. É muito mais rápido e garantirá que tudo esteja no lugar.

No final, sua estrutura principal deve ter a seguinte aparência:

Configurando o App.js

Há um arquivo que você terá de alterar manualmente: o arquivo index.js dentro do diretório do servidor do projeto.

O Parse está configurado para executar um arquivo chamado app.js, não index.js, portanto, vamos renomear esse arquivo.

Você pode criar uma cópia chamada app.js, renomear o original para app.js, mas, no final, ele precisa ser chamado de app.js:

Também precisaremos fazer algumas alterações nesse arquivo.

Na linha 7, onde está escrito

const app = express();

O Parse já tem o Express carregado e instanciado, portanto, isso entraria em conflito. Vamos comentar essa linha:

Além disso, nas linhas 41 a 43, onde está escrito:

app.listen(3001, () =>
  console.log('O servidor Express está sendo executado em localhost:3001')
);

O Parse não poderá abrir essa porta por motivos de segurança, portanto, vamos comentá-la também:

Outra coisa é que, no final, nunca usamos o módulo express-pino-logger, então vamos comentar as linhas 4 e 10, onde está escrito:

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

Portanto, ele terá a seguinte aparência:

Agora, na parte superior do arquivo, você notará que esse arquivo invoca dois outros arquivos locais: config e tokens:

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

Precisaremos que esses arquivos locais sejam carregados junto com o arquivo app.js, portanto, vamos carregar todos os três arquivos na pasta Cloud.

A estrutura final terá a seguinte aparência:

Parte da codificação concluída

Agora nosso código está implantado e tudo está pronto para funcionar. É hora de fazer algumas configurações.

Lembra-se de quando Phil disse que devemos definir o arquivo .env com as credenciais do Twilio?
No Parse, temos uma seção para isso no painel Server Settings (Configurações do servidor).
Abra o painel Environment Variables (Variáveis de ambiente):

E configure-o da mesma forma que você faria no arquivo .env:

Lembre-se de que você pode recuperar esses valores de sua conta Twilio:

Configuração de hospedagem na Web

Agora, no painel Configurações do servidor, vá para a seção Hospedagem na Web e Live Query:

Ative a hospedagem na Web e defina um subdomínio back4app.io para seu aplicativo:

Salve-o e você estará pronto para começar.

Testes

Agora é hora de testar nosso aplicativo.

Acesse o URL que você definiu em sua hospedagem na Web em um navegador. Lembre-se apenas de usar HTTPS como protocolo.
Como solicitaremos acesso à sua câmera, é obrigatório usar HTTPS, caso contrário, você receberá um erro. Portanto, vá para:

https://Your_Domain_Name.back4app.io

O navegador deve pedir permissão para usar a câmera e o microfone. Se você conceder essas permissões, deverá se ver na tela:

Conclusão

Ter seu projeto React no Back4app é fácil, gratuito e incrível. Com apenas um pouco de retrabalho, poderíamos ter o projeto do Phil em funcionamento.

Também obtivemos todos os benefícios do Parse e do Back4app: ele é seguro, dimensionável, tolerante a falhas e tem backups já configurados para você.

Você pode até mesmo incrementá-lo com os recursos do Parse, como login com o Google, login com a Apple, login com o LinkedIn, fornecimento de dados em tempo real e vinculá-lo ao nosso incrível Database Hub.

É muita potência, muitos recursos e o melhor: tudo isso é gratuito para você executar pequenos aplicativos.