Como fazer chamadas telefônicas usando Android e React Native

Esta postagem do blog apresentará um projeto que mostrará como usar o Vonage Client SDK para desenvolver um aplicativo React Native que ligará para um número de telefone. Se você quiser explorar o uso do Client SDK com o iOS, confira esta post no blog.

Pré-requisitos

• Android Studio, com o JDK 8 ou mais recente para compilar e executar o aplicativo em um emulador.

• A conta do GitHub Account.

• Nossa interface de linha de comando, que você pode instalar com npm install @vonage/cli -g.

• Homebrew para instalar as dependências do React Native.

Configurar o React Native

Para compilar e executar um aplicativo React Native, primeiro é preciso instalar as dependências: o Node e o Watchman. Você pode fazer isso usando o Homebrew. No terminal, execute:

Se você já tiver o Node instalado, certifique-se de que seja a versão 12 ou mais recente. Você pode encontrar mais informações sobre como configurar seu ambiente na documentação do React Native.

Clonar o projeto

Você pode clonar o projeto para o seu computador local executando o seguinte comando no terminal:

Em seguida, no Terminal, mude para a nova pasta usando o seguinte comando:

Agora que o projeto foi clonado, você pode instalar as dependências do projeto. Você pode instalar as dependências específicas do React Native executando npm install. Esse comando instalará as dependências listadas no package.json arquivo. Uma dependência que você deve observar é react-native-permissions, um projeto de código aberto que oferece uma maneira unificada de solicitar permissões tanto no iOS quanto no Android. Você pode verificar as dependências do iOS consultando o Podfile.

O aplicativo da Vonage

Para criar o aplicativo, usaremos nossa interface de linha de comando. Se você ainda não configurou a CLI, faça isso executando o comando vonage config:set --apiKey=API_KEY --apiSecret=API_SECRET no seu terminal, onde a chave da API e o segredo são a chave da API e o segredo encontrados nas página de configurações do Account .

Compre um número da Vonage

Precisaremos de um número da Vonage para o aplicativo; você pode adquirir um usando a CLI da Vonage. O comando a seguir procura um número disponível nos EUA. Especifique um código de país alternativo de dois caracteres para procurar um número em outro país.

vonage numbers:search US

Depois de encontrar um número, use este comando para comprá-lo:

vonage numbers:buy $NUMBER US

Criar um servidor de webhooks

Quando uma chamada recebida é atendida, a Vonage envia uma solicitação para uma URL de acesso público de sua escolha — chamamos isso de answer_url. Você precisa criar um servidor de webhook capaz de receber essa solicitação e retornar um NCCO contendo uma connect ação que encaminhará a chamada para o número de telefone PSTN. Para isso, extraia o número de destino do to parâmetro de consulta e retornando-o em sua resposta.

Crie uma nova pasta:

mkdir vonageapp

cd vonageapp

Instale as dependências:

npm init -y

npm install express localtunnel --save

Crie um arquivo chamado server.js contendo o seguinte código:

'use strict';

const subdomain = 'SUBDOMAIN';
const vonageNumber = 'NUMBER';

const express = require('express');
const app = express();
app.use(express.json());

app.get('/voice/answer', (req, res) => {
  console.log('NCCO request:');
  console.log(`  - callee: ${req.query.to}`);
  console.log('---');
  res.json([ 
    { 
      "action": "talk", 
      "text": "Please wait while we connect you."
    },
    { 
      "action": "connect",
      "from": vonageNumber,
      "endpoint": [ 
        { "type": "phone", "number": req.query.to } 
      ]
    }
  ]);
});

app.all('/voice/event', (req, res) => {
  console.log('EVENT:');
  console.dir(req.body);
  console.log('---');
  res.sendStatus(200);
});

if(vonageNumber == "NUMBER") {
  console.log('\n\t🚨🚨🚨 Please change the NUMBER value');
  return false;
}

if(subdomain == "SUBDOMAIN") {
  console.log('\n\t🚨🚨🚨 Please change the SUBDOMAIN value');
  return false;
}
app.listen(3000);

const localtunnel = require('localtunnel');
(async () => {
  const tunnel = await localtunnel({ 
      subdomain: subdomain, 
      port: 3000
    });
  console.log(`App available at: ${tunnel.url}`);
})();

Certifique-se de substituir NUMBER pelo seu número da Vonage (no formato E.164), bem como SUBDOMAIN por um valor real. O SUBDOMAIN valor utilizado fará parte das URLs que você definirá como webhooks na próxima etapa. Em seguida, inicie o servidor:

node server.js

O terminal exibirá a URL do seu servidor, por exemplo:

App available at: https://SUBDOMAIN.loca.lt

Criar uma aplicação da Vonage

Em seguida, você criará um Vonage Aplicativo da Vonage copiando e colando o comando abaixo no terminal. Certifique-se de alterar os valores de --voice_answer_url e --voice_event_url argumentos, substituindo SUBDOMAIN pelo valor real usado na etapa anterior:

Um arquivo chamado vonage_app.json é criado no diretório do seu projeto e contém o ID de aplicativo da Vonage recém-criado e a chave privada. Um arquivo de chave privada chamado vonage_tutorial.key também é criado.

Por fim, vincule o número que você comprou anteriormente ao seu aplicativo da Vonage:

vonage apps:link APPLICATION_ID --number=YOUR_VONAGE_NUMBER

Criar um JWT

O Client SDK utiliza JWTs para autenticação. O JWT identifica o nome de usuário, o ID do aplicativo associado e as permissões concedidas ao usuário. Ele é assinado com sua chave privada para comprovar que se trata de um token válido. Para criar um usuário para o seu aplicativo, execute o seguinte comando no Terminal: vonage apps:users:create Alice para criar uma usuária chamada Alice. Em seguida, crie um JWT para a usuária Alice executando o seguinte comando, substituindo APP_ID pelo ID do seu aplicativo, definido anteriormente:

Executar o projeto

Primeiro, você precisará preparar um dispositivo Android para executar o projeto. Abra o android no Android Studio. O projeto começará a carregar e baixará as dependências, incluindo o Client SDK, por meio do Gradle Sync. Você pode visualizar as dependências no arquivo build.gradle (android/app/build.gradle). Na barra de ferramentas na parte superior, procure o botão AVD Manager:

Se você já tiver um emulador configurado, execute-o. Caso contrário, clique no Criar dispositivo virtual e siga as etapas do assistente. Certifique-se de criar um dispositivo com nível de API 29 ou mais recente, conforme exigido pelo React Native.

Com todas as dependências instaladas e o emulador em execução, agora você pode executar o projeto. Inicie o Metro com npx react-native start. Com ele em execução, abra uma nova janela de terminal no mesmo diretório e execute npx react-native run-android. Esse comando irá compilar e executar o projeto Android no emulador que você preparou. O aplicativo consiste em um rótulo que mostra o status da conexão, um rótulo que mostra o status da chamada e um botão de ação.

Se você abrir a App.tsx pasta, você pode dar uma olhada em como isso está implementado na render função:

render() {
    return (
      <SafeAreaView>
        <View style={styles.status}>
          <Text>
            {this.state.status}
          </Text>

          <View style={styles.container}>
            <Text style={styles.callState}>
              Call Status: {this.state.callState}
            </Text>
            <Pressable
              style={styles.button}
              onPress={this.state.callAction}>
              <Text style={styles.buttonText}>{this.state.button}</Text>
            </Pressable>
          </View>
        </View>
      </SafeAreaView>
    );
}

Se você já usou o React antes, essa sintaxe lhe parecerá familiar. Um Text componente é usado para os rótulos, um Pressable componente para o botão, juntamente com o CSS de estilo na parte superior. Todos os três componentes utilizam estado. Os dados de estado são parâmetros dos componentes que mudam ao longo do tempo. O estado é inicializado no início da App classe, no construtor, com informações padrão. Você pode colar o JWT criado na etapa anterior e salvar o arquivo (CMD + S). O simulador será recarregado e, agora, ao clicar no botão de login, o Client SDK se conectará. Agora você poderá fazer uma ligação telefônica.

Como se comunicar com o código nativo

Permissões

Conforme mencionado anteriormente, o projeto utiliza a react-native-permissions biblioteca para facilitar o trabalho com permissões em diferentes plataformas. Na componentDidMount função, é possível ver a extensão do código necessário em JavaScript para solicitar permissões, além de adicionar a permissão ao AndroidManifest.xml arquivo. :

if (Platform.OS === 'ios') {
  request(PERMISSIONS.IOS.MICROPHONE);
} else if (Platform.OS === 'android') {
  requestMultiple([PERMISSIONS.ANDROID.RECORD_AUDIO, PERMISSIONS.ANDROID.READ_PHONE_STATE]);
}

O Client SDK

O Client SDK é uma dependência nativa; portanto, é necessário que haja uma forma de comunicação entre o código JavaScript App.tsx e o código nativo do Android. Existem duas maneiras de fazer isso, dependendo da direção da informação. NativeModules expor classes nativas ao JavaScript para permitir a execução de código nativo. A NativeEventEmitter API permite que o código nativo envie sinais para o código JavaScript. Veja a componentDidMount função na App classe. Você pode ver que o código JavaScript está aguardando dois sinais diferentes, onStatusChange e onCallStateChange, que atualizarão a interface do usuário e a ação executada pelo botão.

eventEmitter.addListener('onStatusChange', (data) => {
...
});

eventEmitter.addListener('onCallStateChange', (data) => {
...
});

Se você abrir o android diretório do projeto, você verá uma classe chamada EventEmitter (android/app/src/main/java/com/rnapptophone/EventEmitter.java). A EventEmitter classe possui uma função que envia os sinais para o código JavaScript.

public void sendEvent(String eventName, @Nullable WritableMap params) {
    this.context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
}

Essas funções são chamadas a partir da ClientManager classe (android/app/src/main/java/com/rnapptophone/ClientManager.java). A ClientManager classe é um wrapper em torno do Client SDK. Ambas as classes estendem a ReactContextBaseJavaModule classe, o que exige que ambas as subclasses retornem um nome como uma String, que é usada como o NativeModules nome. ClientManager.java utiliza uma anotação, ReactMethod. Essa anotação marca o método para ser exposto ao JavaScript. Por exemplo, aqui está a função de login que você teria usado anteriormente:

@ReactMethod
public void login(String jwt) {
    client.createSession(jwt, null, (error, sessionId) -> {
        if (error != null) {
            this.sendEvent("onStatusChange", "status", "Error");
        }
        if (sessionId != null) {
            this.sendEvent("onStatusChange", "status", "Connected");
        }
        return null;
    });
}

É assim que se chamaria em JavaScript:

ClientManager.login("ALICE_JWT")

E agora?

Neste tutorial, aprendemos a criar um aplicativo para Android com o framework React Native. Também adicionamos uma funcionalidade para fazer uma ligação para um número de telefone físico. Você pode encontrar o projeto completo no GitHub, e a versão para iOS deste blog em learn.vonage.com.

Abaixo estão alguns outros tutoriais ou documentos que fazem referência ao Client SDK:

• Referência NCCO

• Client SDK

Como sempre, se você tiver alguma dúvida, sugestão ou ideia que gostaria de compartilhar com a comunidade, sinta-se à vontade para participar do nosso espaço de trabalho da Comunidade no Slack. Adoraria saber como foi sua experiência com este tutorial e como está o andamento do seu projeto.