You are viewing the Portuguese (Brazil) site, but your language preference is set to English. Switch to English site →

Menu

Expand
Classifique esta página:

SDK de JavaScript do Voice: Vamos começar

Você está visualizando a documentação da versão 2.X do Voice JavaScript SDK. Consulte o Guia de migração para saber como migrar do 1.X para o 2.X ou veja a documentação específica do 1.x.

Pronto para adicionar comunicações de voz aos seus aplicativos Web front-end? Ao concluir um desses Inícios rápidos, você terá um aplicativo totalmente em execução que pode fazer e receber chamadas telefônicas de um navegador da Web.

Antes de começar a criar, você deve se familiarizar com o funcionamento do SDK de JavaScript.

Embora o SDK de JavaScript permita fazer chamadas a partir do seu navegador, você ainda precisa de algum tipo de servidor da Web de back-end para fornecer ao seu aplicativo Access Tokens (tokens de acesso) e para fornecer ao Twilio instruções do TwiML. Os repositórios de Início rápido listados abaixo incluem servidores da Web em uma variedade de estruturas/idiomas.

Escolha sua estrutura de back‐end preferida abaixo:

Um Início rápido deve servir como ponto de partida para a criação de seu aplicativo baseado no Twilio. Um aplicativo de Início rápido não se destina a fornecer um aplicativo pronto para produção, nem se destina a cobrir todos os casos de uso de negócios.

Para saber mais sobre o SDK de JavaScript do Voice, consulte a documentação:

Início rápido serverless (sem servidor)

Se você quiser ver o SDK de JavaScript do Voice em ação usando o ambiente serverless (sem servidor) do Twilio Runtime, siga as instruções abaixo.

1. Instale a ferramenta CLI da Twilio

A interface de linha de comando do Twilio, CLI, permite que você interaja com a API do Twilio em seu terminal. Ela permite que você gerencie e configure todas as suas ferramentas do Twilio, que é para o que vamos usá‐las em nosso caso.

A maneira sugerida para instalar o twilio-cli no macOS é usar o Homebrew. Se ainda não o tiver instalado, visite o site do Homebrew para obter instruções de instalação e, em seguida, retorne aqui.

Depois de instalar o Homebrew, execute o seguinte comando para instalar o twilio-cli:

brew tap twilio/brew && brew install twilio

A maneira sugerida para instalar o twilio-cli é usando Scoop, um instalador de linha de comando para Windows. Se ainda não o tiver instalado, visite o site do Scoop para obter instruções de instalação e, em seguida, retorne aqui.

Observação: o PowerShell precisará ser executado como administrador para evitar problemas comuns de permissão ao instalar pelo Scoop.

  1. Adicione o Bucket da twilio-cli:
    scoop bucket add twilio-scoop https://github.com/twilio/scoop-twilio-cli
  2. Instale o aplicativo:
    scoop install twilio​

O twilio-cli pode ser instalado usando a Advanced Package Tool (apt) na maioria das distribuições, como Debian, Ubuntu e Mint.

Para isso, execute os seguintes comandos no seu terminal:

wget -qO- https://twilio-cli-prod.s3.amazonaws.com/twilio_pub.asc \
  | sudo apt-key add -
sudo touch /etc/apt/sources.list.d/twilio.list
echo 'deb https://twilio-cli-prod.s3.amazonaws.com/apt/ /' \
  | sudo tee /etc/apt/sources.list.d/twilio.list
sudo apt update
sudo apt install -y twilio

Para outros métodos de instalação, consulte o início rápido Twilio CLI.

2. Instale o plug‐in serverless (sem servidor) da CLI da Twilio

A CLI da Twilio dá suporte a plug-ins, que oferecem controle e funcionalidade adicionais.

Vamos instalar o plug‐in serverless (sem servidor), que permite que você implante facilmente funções do seu computador local no Twilio Runtime, o ambiente serverless (sem servidor) da Twilio.

Execute o seguinte comando no seu terminal:

twilio plugins:install @twilio-labs/plugin-serverless

3. Crie seu aplicativo usando um Modelo Function

O plugin serverless (sem servidor) permite inicializar um aplicativo a partir de um modelo. O modelo que usaremos tem tudo o que precisamos, o que inclui o seguinte:

  • um aplicativo de front-end
  • um Twilio Function para gerar Access Tokens (tokens de acesso)
  • um Twilio Function para lidar com chamadas recebidas e encaminhá‐las para o navegador
  • uma seção de administrador para conectar sua conta

Vamos dar uma olhada em mais detalhes depois de colocar as coisas em funcionamento.

Crie seu aplicativo executando o seguinte comando em seu terminal:

twilio serverless:init quickstart-voice-javascript-sdk --template="voice-javascript-sdk"

Isso criará um novo diretório chamado quickstart-voice-javascript-sdk que conterá todo o seu código.

Altere os diretórios para esse novo diretório com o seguinte comando:

cd quickstart-voice-javascript-sdk

4. Implante seu aplicativo

O plug‐in serverless (sem servidor) permite que você implante código de seu computador local no Twilio Runtime. Depois que o aplicativo for implantado, você poderá acessar o aplicativo hospedado.

Para implantar seu aplicativo, execute o seguinte comando em seu terminal:

twilio serverless:deploy

Este comando criará um Serviço, que é um contêiner para suas Functions, Assets e ambientes dentro do Twilio Runtime.

O comando exibirá uma lista de Twilio Functions e Assets que foram implantados em seu ambiente de desenvolvimento.

Execute twilio serverless:deploy a qualquer momento em que desejar implantar alterações em seu aplicativo.

5. Inicialize seu ambiente

Quando você implantou seu aplicativo, foi apresentada uma lista de URLs. Anote o prefixo, que é personalizado para sua implementação.

  1. Abra a página de administração em seu navegador. É o URL que termina com /admin/index.html
  2. A senha é default (você pode alterar isso, faremos isso mais tarde)
  3. Clique no botão na página de administração para inicializar seu ambiente

O processo de inicialização criará e conectará todas as ferramentas necessárias para que as chamadas baseadas no navegador funcionem.

Esta página agora hospedará uma lista de verificação que validará se seu ambiente está funcionando corretamente. Ele também fornece links úteis para acessar os itens que foram inicializados automaticamente para você.

Você deve observar que há uma verificação com falha, e isso porque ainda não alteramos a senha padrão. Faremos isso aqui em breve, mas primeiro vamos explorar seu novo aplicativo.

6. Explore seu aplicativo

Seu aplicativo de exemplo está agora em funcionamento em /index.html. Abra‐o em seu navegador.

Você verá que um Access Token (Token de acesso) é solicitado e deverá ver uma notificação quando ele receber um. Ele indicará que seu "Twilio.Device está pronto!"

Vá em frente e use a interface para fazer uma chamada. Você deve receber uma solicitação para conceder acesso ao seu microfone e alto‐falantes.

Observe que o aplicativo de exemplo está usando o nome de usuário do_user_id. A Twilio Function que estamos usando para gerar o Access Token (Token de acesso) não está usando nenhum tipo de verificação de autenticação. Isso é algo que você precisará implementar com seu sistema de gerenciamento de usuários.

7. Modifique seu aplicativo

Definitivamente, devemos alterar essa senha de administrador. Na máquina local, edite o arquivo chamado .env.

Há uma entrada para ADMIN_PASSWORD, altere‐a para algo diferente do padrão.

ADMIN_PASSWORD=SOME-NEW-PASSWORD-HERE

Salve as alterações.

Implante as alterações usando o seguinte comando em seu terminal:

twilio serverless:deploy

E depois de ser implantado, reveja sua página /admin/index.html, use sua nova senha e você verá que suas verificações agora estão todas verdes. Você conseguiu!

Sempre que você fizer uma alteração em seu aplicativo de exemplo, lembre‐se de salvar e reimplantar.

8. Saiba mais

Agora que já viu os elementos funcionando, gostaríamos de convidá‐lo a explorar a maneira como funcionam.

Primeiro, vá para sua pasta local e dê uma olhada nos dois arquivos do lado do cliente assets/index.html e assets/quickstart.js. Observe que o arquivo index.html inclui a seguinte marca de script:

<script src="https://cdn.jsdelivr.net/npm/@twilio/voice-sdk@2.0.1/dist/twilio.min.js"></script>

Esta é a biblioteca do SDK de JavaScript do Voice.

No arquivo quickstart.js, você notará que o dispositivo foi inicializado com um token. Ele está apontando para uma Function serverless (sem servidor) que pode ser encontrada em /functions/voice-token.js. Esse arquivo produz um Access token (Token de acesso) para você com base em uma chave e segredo de API REST que foi gerado durante a inicialização. Você verá que ele também contém um VoiceGrant que permite chamadas de entrada e de saída por meio de um aplicativo TwizML específico. Este é o Twilio Voice JavaScript SDK e você pode vê‐lo em uso nos ativos altamente documentados assets/quickstart.js.

Se você voltar para a página de administração /admin/index.html, verá um link para um aplicativo TwizML que foi criado para você. Um aplicativo TwizML permite especificar o que acontece quando uma chamada é feita e quando uma é recebida. TwizML é a Twilio Markup Language que instrui o Twilio sobre o que fazer com sua chamada nesse momento.

Fornecemos esse TwizML por meio de uma Function que pode ser encontrada em suas functions/client-voice-twiml-app.js. Nós fizemos a conexão com seu aplicativo TwizML para executar essa função em chamadas de voz recebidas e enviadas. Essa função pode discar para um cliente no mesmo aplicativo ou para um número. Ao fazer a chamada de saída, ele usará o CALLER_ID.

Classifique esta página:

Precisa de ajuda?

Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.

        
        
        

        Obrigado pelo seu feedback!

        Selecione o(s) motivo(s) para seu feedback. As informações adicionais que você fornece nos ajudam a melhorar nossa documentação:

        Enviando seu feedback...
        🎉 Obrigado pelo seu feedback!
        Algo deu errado. Tente novamente.

        Obrigado pelo seu feedback!

        Indique‑nos e obtenha USD10 em 3 etapas simples!

        Etapa 1

        Obtenha o link

        Obtenha um link de indicação pessoal gratuito aqui

        Etapa 2

        Dê USD10

        Seu usuário se inscreve e faz a atualização usando o link

        Etapa 3

        Obtenha USD10

        1.250 mensagens SMS grátis
        OU 1.000 min de voz grátis
        OU 12.000 chats
        OU mais