https://a.storyblok.com/f/270183/65290/728927e5cd/uilicious-ai-studio_voice-alert.png

UIlicious & AI Studio: Alertas de Voice para testes com low-code

Publicado em October 26, 2023

Tempo de leitura: 3 minutos

UIlicious & AI Studio: Alertas de Voice para testes com low-code

Quem gosta de escrever testes de software? Ninguém! Mas, recentemente, descobri uma excelente plataforma de testes com pouca programação chamada UIlicious.

O Uilicious possui muitos recursos, mas não oferece alertas por telefone em caso de falha nos testes. Ainda bem que podemos criar uma solução totalmente baseada em low-code, integrando o Uilicious ao AI Studio. Neste artigo, você aprenderá a criar testes no Uilicious e a configurar alertas de Voice (por telefone) no AI Studio. E fará tudo isso com plataformas de interface do usuário (UI) de low-code fáceis de usar!

Pré-requisitos

Como criar testes no UIlicious

Escrever testes no desenvolvimento de software é notoriamente trabalhoso. É como ir ao dentista: todo mundo sabe que precisa fazer isso, mas ninguém quer. O UIlicious é uma excelente plataforma nova que facilita bastante a criação de testes automatizados.

Em primeiro lugar, você não precisa baixar nada, pois o UIlicious é hospedado no navegador. Assim, você pode escrever seus testes, executá-los, ver os resultados e até mesmo programar um monitoramento regular, tudo diretamente no navegador.

Em segundo lugar, escrever testes com o UIlicious não exige experiência em escrever testes nem mesmo em programação. A plataforma promete:

Basta escrever seus testes como se estivesse explicando ao seu pai, por telefone, como fazer login no Facebook.

Saiba mais sobre como realizar testes no UIlicious com o Editor no navegador.

Como escrever nossos testes

No UIlicious Studio, adicione um novo projeto. Crie uma nova pasta. Adicione um novo teste à sua pasta da seguinte maneira:

How to create a new test file in UIliciousHow to create a new test file in UIlicious

Como configurar alertas de voz en UIlicious

Missão: Queremos testar o site de documentação do UIlicious e garantir que haja informações sobre as integrações com a Vonage.

Para o nosso teste, queremos verificar se há alguma informação relacionada à Vonage no site de documentação. Para isso, nosso teste acessará o site da UIlicious, utilizará a busca global e, em seguida, verificará se a busca por “Vonage” não retorna nenhum resultado.

O resultado do teste parece incrivelmente semelhante à linguagem humana que acabei de escrever! Dê uma olhada:

// Start by going to the documentation, like this:
I.goTo("<https://uilicious.com/>")
I.see("Docs")
I.click("Docs")

// Perform a search for Vonage
I.see("Search")
I.click("Search")
I.fill("Search docs", "Vonage")

// Now we need to somehow evaluate that Vonage is not here. UIlicious allows us to write Javascript directly into our tests. We know that an empty search returns the words No results for "Vonage"', so we can use that to write a conditional:
if(I.see$('No results for "Vonage"')){ 
// Something will happen here
}

Como criar um agente do Voice AI Studio

Mas o que queremos que aconteça na nossa condição? Precisamos acionar nosso agente do AI Studio, que, por sua vez, fará a ligação. Portanto, precisamos acessar o Vonage Painel do Desenvolvedor da Vonage e criar um novo agente! Podemos seguir as instruções da documentação para criar nosso agente Voice. Há três opções importantes que devemos selecionar para o nosso agente Voice:

  • Tipo: Telefonia

  • Modelo: Começar do zero

  • Evento: Chamada de saída

Nosso fluxo será bem simples, já que vamos enviar apenas uma única mensagem de alerta. Vamos criar um parâmetro personalizado parâmetro chamado $TestingError. Em seguida, nosso único nó Speak enviará uma mensagem de áudio incluindo nosso $TestingError, que virá do UIlicious. O nó deve ficar assim:

Send Alert Node in AI StudioSend Alert Node in AI Studio

Como acionar um agente de voz do AI Studio a partir do UIlicious

Agora que nosso agente está pronto, vamos acioná-lo a partir do nosso teste. O UIlicious nos permite fazer chamadas de solicitações HTTP exatamente da maneira que AI Studio nos orienta a acionar um agente de saída. Dentro da nossa condição, precisamos adicionar o seguinte código:

if(I.see$('No results for "Vonage"')){
  let res = UI.httpPost("https://studio-api-eu.ai.vonage.com/telephony/make-call", {
    headers:{
      "X-Vgai-Key": "YOUR X-Vgai-Key"
    },
    // Instructions to send AI Studio
    data: { 
      "to": "TO_NUMBER", 
      "agent_id": "AGENT_ID", 
      "session_parameters": [{
        "name": "TestingError",
        "value": "Vonage not found in Global Search!"
      }]
    },
    // Expect the response to be JSON
    responseType: "json", 
  })
  //Log the response from the API
  TEST.log.info("Response from API is: " + JSON.stringify(res.data))
}

Você precisará atualizar o X-Vgai-Key, to, agent_id com seus valores.

  • Você pode encontrar a X-Vgai-Key no canto superior direito da sua tela. Clique no ícone “usuário” e, em seguida, em “Gerar chave de API”.

  • O to número é o destino para o qual os alertas serão enviados, provavelmente para quem estiver responsável pelo seu DevOps.

  • O agent_id podem ser encontrados na seção “Detalhes do agente”:

AI Studio Agent DetailsAI Studio Agent Details

O que esse código faz?

  • Ele envia uma solicitação ao AI Studio, o que aciona um agente.

  • Qual agente? O agente que agent_id em seguida usa o seu X-Vgai-Key para garantir que essa seja uma solicitação legítima.

  • Também informamos para onde a ligação deve ser encaminhada.

  • Nós fornecemos o valor para o $TestingError parâmetro, para que ele saiba o que informar ao usuário final.

  • E, por fim, processamos a resposta do AI Studio, que nos informa se a solicitação foi bem-sucedida ou não.

Participe da conversa

Você gostou deste artigo? Quais ferramentas você está usando para testes de software? Adoraria saber quais são suas ferramentas “no-code” e “low-code” preferidas. Confira mais de nossas posts do blog sobre low-code.

Você está usando o Voice para notificações ou outros canais? Acesse a Slack da Comunidade de Desenvolvedores da Vonage e conte para a gente o que você está desenvolvendo.

Adoraria saber o que você acha do AI Studio e do UIlicious. Manda um tweet no X, antes conhecido como Twitter. E dê um follow enquanto estiver por lá!

Compartilhar:

https://a.storyblok.com/f/270183/384x384/e4e7d1452e/benjamin-aronov.png
Benjamin AronovDeveloper Advocate

Benjamin Aronov is a developer advocate at Vonage. He is a proven community builder with a background in Ruby on Rails. Benjamin enjoys the beaches of Tel Aviv which he calls home. His Tel Aviv base allows him to meet and learn from some of the world's best startup founders. Outside of tech, Benjamin loves traveling the world in search of the perfect pain au chocolat.