Como fazer chamadas telefônicas na Web, no iOS e no Android com o Ionic

Esta postagem do blog apresenta um projeto que mostra como criar um aplicativo Ionic que permite fazer uma chamada em três plataformas usando o Vonage Client SDK. O projeto desta postagem utiliza React.

Pré-requisitos

• A conta do GitHub Account.

• Xcode 12, para compilar e executar o aplicativo em um simulador do iOS.

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

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

Configurar o Ionic

O Ionic pode ser instalado com o npm, mas requer Node.js. Certifique-se de que o Node.js esteja instalado antes de continuar. Instale o Ionic com o seguinte comando:

npm install -g @ionic/cli

Clonar o projeto

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

git clone git@github.com:nexmo-community/ionic-app-to-phone.git

Em seguida, mude para a nova pasta cd ionic-app-to-phone.

Agora que você clonou o projeto, pode instalar as dependências do projeto executando npm install. Esse comando instalará as dependências listadas no package.json arquivo. Observe que nexmo-client listado; trata-se do Client SDK.

O Ionic também precisa que algumas variáveis de ambiente sejam configuradas para o desenvolvimento no Android. Edite seu arquivo PATH com:

Quando terminar, carregue a configuração no shell atual usando o source comando. Você pode encontrar instruções mais detalhadas na documentação do Ionic.

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 “API Key” e “Secret” são a chave e o segredo da API encontrados nas página de configurações do Account .

Criar um NCCO

A Objeto de Controle de Chamadas da Nexmo (NCCO) é uma matriz JSON usada para controlar o fluxo de uma chamada da Voice API. O NCCO deve ser público e acessível pela internet. Para isso, você utilizará um GitHub Gist, que oferece uma maneira prática de hospedar a configuração.

Acesse https://gist.github.com/ e digite call.json na caixa “Nome do arquivo, incluindo extensão”. O conteúdo do gist será o seguinte JSON:

[
    {
        "action": "talk",
        "text": "Please wait while we connect you."
    },
    {
        "action": "connect",
        "endpoint": [
            {
                "type": "phone",
                "user": "447000000000"
            }
        ]
    }
]

Crie o gist e, em seguida, clique no botão “Raw” para obter uma URL do seu NCCO. Anote-a para a próxima etapa.

Criar uma aplicação da Vonage

Agora você precisa criar um aplicativo Vonage. Um aplicativo contém as informações de segurança e configuração necessárias para se conectar ao Vonage. No seu terminal, crie um aplicativo Vonage usando o comando a seguir, substituindo GIST_URL pela URL da etapa anterior:

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

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. Crie um usuário para o seu aplicativo; para isso, execute vonage apps:users:create Alice para criar uma usuária chamada Alice. Em seguida, crie um JWT para a usuária Alice executando o comando a seguir, substituindo APP_ID pelo ID do seu aplicativo definido anteriormente:

Executar o projeto

Agora que você configurou o aplicativo da Vonage, já pode fazer algumas chamadas.

Web

A primeira plataforma na qual você executará o projeto é a Web. Para isso, edite o Home.tsx arquivo (/ionic-app-to-phone/src/pages/Home.tsx) substituindo ALICE_JWT pelo JWT que você gerou anteriormente.

Quando terminar, execute o projeto a partir do seu terminal usando ionic serve. Esse comando iniciará um servidor local na sua máquina na porta 8100 e abrirá o aplicativo no seu navegador. Clique no botão de login, que usa o JWT para autenticar o Client SDK. Após o login, você poderá fazer uma chamada para o número de telefone especificado no NCCO.

iOS

Aplicações do Ionic o Capacitor para criar o aplicativo web que você acabou de usar para plataformas nativas. Mantenha o servidor de desenvolvimento do Ionic em execução no seu terminal e abra uma nova janela de terminal no mesmo diretório. Os aplicativos para iOS e Android exigem que o servidor de desenvolvimento esteja disponível via HTTPS; portanto, você pode usar o localtunnel para criar uma URL HTTPS. Digite o seguinte comando no seu terminal, substituindo SUBDOMAIN por uma sequência de caracteres exclusiva:

npx localtunnel --port 8100 --subdomain=SUBDOMAIN

Este comando abrirá um túnel para a porta 8100 do seu computador.

A compilação de um projeto nativo com o Capacitor ocorre em três etapas. Primeiro, o código da web é compilado. Em seguida, o código é copiado para cada plataforma e, então, ferramentas específicas de cada plataforma são utilizadas para compilar o aplicativo.
Abra uma nova janela de terminal no mesmo diretório. Você pode realizar a primeira e a segunda etapas com ionic capacitor sync ios. Em seguida, execute o projeto para iOS usando o Capacitor, substituindo SUBDOMAIN pela sua string exclusiva:

ionic capacitor run ios -l --external --livereload-url=https://SUBDOMAIN.loca.lt

Este comando abre o Xcode para você e habilita a atualização automática do código. Clique em “Compilar e Executar” (CMD + R) no Xcode e, quando o aplicativo estiver em execução no simulador ou dispositivo que você escolher, você poderá fazer login e realizar uma chamada, da mesma forma que na web.

Como o Ionic é baseado na web, o aplicativo para iOS pode usar a mesma dependência do Client SDK em JavaScript e funciona sem a necessidade de alterações no código específicas para a plataforma.

Android

O processo para o Android é muito semelhante ao do iOS. Na janela do terminal em que o projeto do iOS está sendo executado, encerre o processo com Ctrl+C e, em seguida, execute ionic capacitor sync android. Em seguida, execute o projeto para Android usando o Capacitor, substituindo SUBDOMAIN pela sua string exclusiva:

ionic capacitor run android -l --external --livereload-url=https://SUBDOMAIN.loca.lt

Este comando abrirá o Android Studio para você, onde poderá compilar e executar o aplicativo em um emulador ou dispositivo. Quando o aplicativo estiver em execução no emulador ou dispositivo que você escolher, poderá fazer login e realizar uma chamada, da mesma forma que na web e no iOS, sem precisar alterar o código.

E agora?

Você pode encontrar o projeto completo no GitHub. Você pode fazer muito mais com o Client SDK; saiba mais em developer.vonage.com.