Como criar um aplicativo de voz no estilo “Magic 8-Ball” com Ruby

Vamos ser sinceros. Nossos dias estão sempre repletos de perguntas difíceis:

O que devo preparar para o jantar?
Será que essa é a melhor decisão para minha carreira?
Essa pizza estragou?
Devo responder a mensagem dele?

Ser adulto é difícil pra caramba, galera. E, sinceramente, é complicado lá fora ter que tomar decisões o tempo todo o tempo. Não seria ótimo se você pudesse simplesmente voltar aos dias da infância, quando um simples brinquedo resolvia todas as questões difíceis da vida? Mas melhor ainda: e se você mesmo o construísse?!

Neste tutorial, você vai criar um aplicativo de voz do Magic 8-Ball com Ruby. Esse aplicativo não vai tornar essas perguntas menos difíceis, mas vai facilitará o processo de tomada de decisão.

Pré-requisitos

Além disso, você precisará de:

• Ruby on Rails

• ngrok para tornar sua aplicação Rails acessível externamente

Crie um aplicativo de Voice do Magic 8-Ball

Como criar seu aplicativo:

1. Criar o aplicativo Rails

2. Configure as rotas e o controlador no aplicativo

3. Divulgue seu aplicativo externamente com ngrok

4. Adquira um número de telefone da Nexmo

5. Criar um aplicativo do Nexmo Voice

6. Conecte tudo

7. Execute seu aplicativo e responda a todas as perguntas difíceis da vida (aquelas que se respondem com sim ou não, claro)!

Este tutorial o orienta passo a passo pelo processo, desde o início. Se quiser ver o código final, você pode clonar o repositório Git deste projeto.

Criar a aplicação Rails

Para começar, inicialize um novo projeto de API do Rails.
Na linha de comando, execute o seguinte:

(Como não há dados persistentes para este aplicativo, adicionar a -api --skip-active-record ajuda a tornar seu aplicativo super leve!)

Vá até a pasta do seu novo aplicativo Rails cd magic8-ball-voice-app e abra-a no seu editor de código preferido.

O fluxo deste aplicativo

Vamos fazer uma breve pausa para falar sobre o fluxo desse aplicativo antes de mergulharmos no código.

O usuário acessa o aplicativo e é solicitado a fazer uma pergunta. Para demonstrar que está pronto para receber um conselho sábio, o usuário é solicitado a digitar o número 1 no teclado. Em seguida, o aplicativo seleciona aleatoriamente uma resposta para ler para o usuário.

Para conseguir esse fluxo, você precisará criar estas ações e rotas no seu aplicativo:

• #answer: para receber a ligação inicial

• #caller_input: responder à pergunta do interlocutor com uma resposta escolhida aleatoriamente e lidar com erros de entrada

• #event: receber o evento da API da Nexmo e exibi-lo no console

Agora que o fluxo do aplicativo está claro, vamos mergulhar na parte divertida e escrever as rotas e as ações do controlador!

Configure as rotas no aplicativo

Para que seu aplicativo saiba para onde direcionar a solicitação da Nexmo GET , você deve definir as rotas em routes.rb.
Para atender a chamada, processar a entrada do chamador e exibir os eventos no seu terminal, você precisará criar três rotas distintas.

Abrir /config/routes.rb para adicionar:

# routes.rb

get '/answer', to: 'responses#answer'

post '/caller_input', to: 'responses#caller_input'

post '/event', to: 'responses#event'

Configurar o controlador no aplicativo

No seu terminal, execute o comando: rails generate controller Responses.
Isso cria um novo Controller arquivo dentro da /app/controllers pasta.
É dentro desse arquivo que você criará suas ações:

# responses_controller.rb

class ResponsesController < ActionController::API

    # this URL is the one you use ngrok to create  
    NGROK_URL = "http://********.ngrok.io"

    # it’s up to you if there are more or less positive responses in your array
    POSSIBLE_RESPONSES = ["It is certain.", "It is decidedly so.", "Without a doubt.", "Yes, definitely.", "You may rely on it.", "As I see it, yes.", "Most likely.", "The outlook good.", "Yes.", "All signs point to yes.", "Sorry, but no.", "I really don’t think it will work out.", " Don't count on it.", "That my sources say no.", "It is very doubtful."]

    def answer
        render json:
        [
            {
                :action => 'talk',
                :text => 'Welcome to the Magic Eightball hotline. Ask your question and then press 1.',
                :bargeIn => true
            },
            {
                :action => 'input',
                :eventUrl => ["#{NGROK_URL}/caller_input"],
                :timeOut => '10'
            }
        ].to_json
    end

Em seguida, você precisará processar a entrada do chamador.
O Dual Tone Multi Frequency (DTMF) é uma forma de sinalização usada por sistemas telefônicos para transmitir os dígitos de 0 a 9 e os caracteres * e #. Usaremos 'dtmf' aqui para aceitar o número 1 como um sinal para o aplicativo de que o chamador está pronto para avançar para o próximo fluxo. Se o chamador pressionar qualquer outra tecla ou não digitar nada, o aplicativo pedirá que ele tente novamente.

Em seguida, vamos utilizar o .sample . Isso selecionará aleatoriamente uma resposta da Bola Mágica 8 a partir da POSSIBLE_RESPONSES array.

# responses_controller.rb continued

    def caller_input
        dtmf = params['dtmf'] || parsed_body['dtmf']

        if dtmf == '1'
            render json:
            [
                {
                    :action => 'talk',
                    :text => "My answer is: #{POSSIBLE_RESPONSES.sample}. I hope that helps. Thanks for calling the Magic 8-ball hotline. Please call again whenever you need help making a decision in life. Goodbye.",
                }
            ].to_json
        else
            render json:
            [{:action => 'talk', :text => 'I did not recognize your selection. Please call back and try again.'}].to_json
        end
    end

E, por fim, vamos exibir os detalhes do evento no seu terminal para fins de depuração.

# responses_controller.rb continued
    def event
        puts params
    end
end

Observação:
Há uma variável constante na linha 6 do responses_controller.rb arquivo que armazenará sua URL do ngrok. No momento, ela está em branco porque você ainda precisa criá-la.

Então, vamos criar isso agora, certo?

Divulgue seu aplicativo externamente com ngrok

O objetivo agora é tornar seu aplicativo acessível externamente para que o Nexmo possa se comunicar com ele. Como o aplicativo está rodando apenas localmente, ele não está disponível no computador de ninguém mais. Isso significa que precisamos, de alguma forma, tornar nosso servidor local acessível externamente para que o Nexmo possa acessá-lo.
Existem inúmeras maneiras diferentes de fazer isso, mas uma das mais simples é usando o ngrok. Você pode conferir este artigo para entender melhor como tudo isso funciona.

Mas o essencial é o seguinte:

• Baixe e instale ngrok

• Abra uma nova janela do terminal

• Execute o seguinte na linha de comando:

Aqui, o ngrok está apontando para a porta 3000, pois presume que seu servidor local esteja rodando na http://localhost:3000. Se você estiver usando uma porta diferente, certifique-se de ajustar o comando do ngrok.

Agora você deve ver uma interface de registro do ngrok na janela do seu terminal.

Perto da parte superior da interface, há uma linha que começa com Forwarding e contém dois URLs. O primeiro é o URL do ngrok acessível externamente, que termina com ngrok.io e aponta para o seu servidor local.

Copie e cole essa URL no seu responses_controller.rb arquivo e atualize o NGROK_URL = "http://********.ngrok.io" para essa URL (aquela que está sendo executada localmente no seu computador agora mesmo).

Observação: certifique-se de salvar seu ngrok.io URL em um local seguro! Você também vai precisar dele nas próximas etapas.

Em seguida, para que seu aplicativo de voz funcione, você deve vincular sua conta Nexmo, um número de telefone provisionado e um aplicativo de voz entre si.

Adquira um número de telefone da Nexmo

• No painel do Nexmo, clique no Numbers item de menu no lado esquerdo.

• Clique na Buy Numbers opção e você será direcionado a uma página onde poderá escolher um país, recursos, tipo e os quatro dígitos que deseja que o número tenha.

  

• Selecione o país em que você está no momento para que a ligação seja local. Para os recursos, selecione Voice e, quanto ao tipo, tanto celular quanto telefone fixo funcionam perfeitamente.

• Clique Search para ver uma lista dos números de telefone disponíveis.

• Selecione um número clicando no botão laranja Buy e, em seguida, no botão laranja Buy novamente assim que aparecer a janela de confirmação.

Agora você possui um número de telefone da Nexmo. O próximo passo é criar uma aplicação no painel de controle da Nexmo.

Criar uma aplicação Nexmo

• No menu à esquerda, clique no Voice item do menu.

• Selecione a Create an application opção. Você será direcionado para uma página onde poderá configurar um novo aplicativo Nexmo.

• Preencha o formulário com as seguintes informações:
  -Application name no campo de texto, digite magic8-ball-voice-app -Event URL no campo de texto, insira a URL do ngrok salva: https://[ngrok url here]/event -Answer URL campo de texto, digite novamente a URL do ngrok salva: https://[ngrok url here]/answer

• Depois de inserir tudo isso, clique no botão azul Create Application . [Video width="1042" height="814" mp4="https://www.nexmo.com/wp-content/uploads/2019/05/create-application.mp4"]

Conectar tudo entre si

Agora você já tem um número de voz da Nexmo e um aplicativo; só falta conectar os dois.

• Selecione a Numbers opção de menu no menu à esquerda e, em seguida, clique em Your numbers para ser direcionado a uma página que exibe o número de telefone que você acabou de adquirir.

• Clique no ícone de engrenagem no lado direito da página.

• Selecione Application na Forward to área.

• Selecione seu novo aplicativo Nexmo na lista suspensa abaixo da Application área.

• Aperte o botão azul Ok .

  

  Seu novo número de voz da Nexmo já está vinculado ao seu novo aplicativo da Nexmo e, com essa última etapa, você está pronto para experimentá-lo!

Execute seu aplicativo

Com o servidor ngrok ainda em execução em uma janela, execute rails s em outra janela do seu terminal.

Isso deve iniciar seu servidor Rails em http://localhost:3000. Não há visualizações em sua aplicação, portanto, a única maneira de interagir com ela é chamá-la.

Agora vem a parte divertida!

• Prepare a pergunta que você não conseguiu responder sozinho.

• Ligue para o seu novo número de telefone da Nexmo usando o seu próprio celular.

• Você deve ouvir seu aplicativo atender a chamada e apresentar a mensagem do #answer método do Controller.

Fique à vontade para experimentar diferentes opções e brincar com seu aplicativo Nexmo! Pense em adicionar algumas respostas engraçadas ao POSSIBLE_RESPONSES matriz ou incluir uma opção para obter uma resposta diferente caso o chamador não goste da primeira. Parabéns! Agora você tem um aplicativo de voz “Magic 8-Ball” usando o Rails e a Voice API do Nexmo.

Próximos passos

Se isso despertou seu interesse em explorar mais as possibilidades da Voice, aqui vão algumas ideias do que você pode experimentar a seguir:

• Confira esta excelente introdução tanto ao chamadas por SMS e Voice com a Nexmo.

• Dê uma olhada neste tutorial divertido sobre como organizar uma teleconferência com a Voice API da Nexmo, Ruby e Rails.

• Se você estiver querendo ter ainda mais clarividência na sua vida, não deixe de conferir este tutorial sobre como escrever biscoitos da sorte por SMS sem servidor com o Nexmo!