https://a.storyblok.com/f/270183/131079/d9b7929f60/farewell-app_ai-studio.png

Crie um aplicativo de despedida usando o Vonage AI Studio e o Notion como banco de dados

Publicado em December 19, 2023
#ai-studio
#low-code

Tempo de leitura: 4 minutos

Recriando o episódio S7E22 de The Office (Edição Vonage)

Mais alguém não se sentiu bem depois do episódio 22 da 7ª temporada de The Office?

ALERTA DE SPOILER!

“Adeus, Michael” deveria, originalmente, ser sobre a demissão de Michael Scott da Dunder Mifflin por causa de um erro profissional (Que chatice!). Em vez disso, os roteiristas decidiram partir nossos corações com esse episódio extremamente fofo, em que Michael acaba deixando a empresa para se mudar para o Colorado e ficar com sua noiva.

Antes de partir, ele dá a cada um de seus funcionários um presente especial de despedida. Embora eu não tenha feito nada nem de longe tão épico quando saí da minha empresa anterior, criei um aplicativo que permitia que meus ex-colegas de trabalho enviassem seus nomes para um número de telefone virtual e recebessem uma mensagem personalizada que eu havia escrito para cada um deles. Foi uma maneira atenciosa de me despedir e mostrar a eles o quanto eu valorizei a ajuda que me deram naquele verão.

Adoraria mostrar a você como é possível recriar esse projeto usando o AI Studio e o Notion. Vamos lá, vamos começar!

Pré-requisitos

Configurar o Vonage AI Studio

Depois de fazer isso, acesse seu Painel da API e, no lado esquerdo, localize CRIAR E GERENCIAR > AI Studio > Acesse o AI Studio > Criar agente. Você pode selecionar qualquer tipo de agente, mas, para o nosso exemplo, vamos criá-lo com o WhatsApp.

Preencha todos os dados obrigatórios:

  • Região: Onde seu Agente será normalmente utilizado — nos EUA ou na Europa?

  • Nome do agente: Dê ao seu agente um nome exclusivo que seja significativo para você.

  • Idioma: Selecione o idioma do seu Agente.

  • Fuso horário: Escolha o fuso horário em que seu agente irá operar.

No que diz respeito aos modelos, vamos começar do zero.

No caso de um evento, esta será uma Chamada recebida , pois somos nós que estamos enviando uma mensagem de texto para o nosso agente.

Criar um banco de dados usando o Notion

Como prática recomendada, armazenaremos os nomes reais dos colegas de trabalho, as mensagens e os e-mails dos destinatários em um banco de dados — para este exemplo, usaremos Notion!

  1. Acesse Notion.

  2. Clique no botão (+) para adicionar uma página.

  3. Na nova página, na seção BANCO DE DADOS, clique em “Tabela”.

  4. Insira os diferentes itens necessários em cada coluna e suas respectivas propriedades. Temos colunas intituladas “Colega de trabalho”, “Mensagem” e “E-mail”.

Screenshot of a Notion table titled 'Goodbye, Michael' with three columns labeled 'Coworker,' 'Message,' and 'Email.' There are entries for three coworkers: Dwight, Kevin, and Darryl. Dwight's message is a humorous, self-praising speech; Kevin's is a short, reflective statement; and Darryl's message mentions giving the only copy of 'Somehow I Manage,' unfinished. Each entry includes a corresponding email address at dundermifflin.com.Database in Notion

Definir o fluxo da conversa

Agora vem a parte divertida! Com a interface fácil de usar do Vonage AI Studio, você pode criar o fluxo de conversação do seu chatbot. A configuração é feita por arrastar e soltar, o que significa que você não precisa ter conhecimentos de programação para começar. Você pode adicionar diferentes nós de diálogo e definir respostas.

Nosso fluxo deve ficar assim:

A flowchart of a conversational interface process. It starts with 'START,' then moves to a 'ASK NAME' step, which is a text input with a note 'Unexpected Input Type.' Next is 'Webhook 1' showing a '2XX' status but marked as 'Failed.' The flow then splits; one path goes to 'SEND EMAIL' with a variable '$RETURNED_EMAIL,' and the other path leads to 'END CONVERSA...' indicating the end of the conversation. The overall layout suggests a sequential process with a conditional branch for sending an email or ending the conversation.Conversation Flow

NÓS > Conversa > Coletar informações O agente virtual fará uma pergunta ao usuário.

  • Nome do nó: ASK NAME.

  • Mensagem: “Bem, vou me mudar para o Colorado para começar minha nova vida com a Holly.” Responda com seu nome para receber sua mensagem personalizada.

  • Mensagem de nova tentativa: Vamos tentar de novo. Responda com seu nome.

  • Entrada esperada: Texto

NODES > Integrações > Webhook

  • Método: POST

  • URL da solicitação: https://api.notion.com/v1/databases/<database_id>/query_ Para encontrar um ID de banco de dados, acesse a URL do banco de dados em seu espaço de trabalho do Notion. O ID é a sequência de caracteres na URL que fica entre a barra após o nome do espaço de trabalho (se houver) e o ponto de interrogação. O ID é uma sequência alfanumérica de 32 caracteres._

  • Cabeçalhos (Cabeçalho HTTP: Valor)

    • Autorização: Portador $NOTION*ACCESS_TOKEN

    • Versão do Notion: 28/06/2022

    • Content-Type: application/json* Para encontrar seu $NOTION_ACCESS_TOKEN, acesse a processo de autorização para uma integração integração no Notion._ - Mapeamento da resposta Tipo de resposta: JSON Caminho do objeto: Depois de preencher as informações acima em nosso nó de webhook, verifique se o webhook está funcionando clicando no botão “Testar solicitação”, no canto superior direito. Na seção Resposta, você verá que ele retorna todos os dados da nossa tabela do Notion. Usando a resposta, defina o caminho do objeto e mapeie-o a um parâmetro.

Screenshot of a 'Response Mapping' section from an application interface with a drop-down menu selecting 'JSON' as the response type. There are three object paths listed with corresponding parameters. The first is 'results[0].properties.Message.rich_text[0].text.content' mapped to a parameter '$RETURNED_MESSAGE'. The second is 'results[0].properties.Email.email' mapped to '$RETURNED_EMAIL'. The third is 'results[0].properties.Coworker.title[0].plain_text' mapped to '$RETURNED_COWORKER'. The layout is a structured table indicating how JSON response elements correspond to internal parameters of the system.Response Mapping

Parâmetro: Para cada caminho de objeto, crie um parâmetro. Selecione @sys.any como Entidade de cada um.

A screenshot showing the 'Custom Parameters' settings in the 'Webhook 1' configuration panel. There are four parameters listed: 'INPUT,' 'RETURNED_COWORK...,' 'RETURNED_EMAIL,' and 'RETURNED_MESSAGE.' Each has an associated entity designated as '@sys.any' and a field for entering a value. The list suggests placeholders for user input and returned data from the system, awaiting specific values to be entered or retrieved during operation.Parameters

NÓS > Ação > Enviar e-mail

  • Para: $RETURNED_EMAIL

  • Assunto: Adeus, de Michael Scott

  • Corpo: $RETURNED_MESSAGE

NÓS > Ações > Encerrar conversa

Execute o aplicativo

Na parte superior do Vonage AI Studio, clique em “Tester” e, em seguida, em “Iniciar bate-papo”. Digite um nome do seu banco de dados.

A screenshot of a chat interface in testing mode, labeled 'Tester' and 'Chat'. The conversation starts with an agent's message timed at 3:47 PM stating, 'Well, I'm moving to Colorado to start my new life with Holly.' prompting a reply with the user's name for a personalized message. The user responds with 'Darryl' at the same timestamp. Subsequent system messages indicate 'Webhook was executed successfully' and 'Email sent successfully,' followed by 'Conversation Ended.' The interface is designed to simulate a user interaction with an automated chatbot agent.Test Darryl

Você deverá receber, então, um e-mail com o conteúdo correspondente!

A screenshot of an email interface with the subject 'Goodbye from Michael Scott' in the inbox. The sender is 'dont-reply@ai.vonage.com'. The body of the email reads, 'I would like to give you the only copy of "Somehow I Manage", unfinished. If there's anybody here who can finish it, it's you.' Below the message, there are options to 'Reply' or 'Forward' the email.Email Received

Criando seus próprios “bons velhos tempos”

Dizer adeus não precisa ser algo comum. Com um toque de criatividade e o uso do Vonage AI Studio e do Notion como banco de dados, você pode tornar as despedidas sinceras e inesquecíveis. Então, vá em frente e espalhe um pouco de alegria com mensagens personalizadas que vão fazê-los sorrir uma última vez.

No episódio final de *The Office*, Andy Bernard diz: “Gostaria que houvesse uma maneira de saber que estamos vivendo os bons velhos tempos antes mesmo de deixá-los para trás”. Eu diria que estamos vivendo os bons velhos tempos agora, com a tecnologia e as ferramentas que podemos usar para criar aplicativos legais e icônicos como este. Fique à vontade para se juntar ao nosso “escritório” de desenvolvedores no Slack e nos seguir no X, antes conhecido como Twitter. Se você acabar criando uma aplicação semelhante, compartilhe-a e me marque — adoraria saber como foi o seu final de temporada.

Compartilhar:

https://a.storyblok.com/f/270183/384x384/b68093ec17/diana-pham.png
Diana PhamRepresentante de Desenvolvedores

Diana é defensora de desenvolvedores na Vonage. Ela gosta de comer ostras frescas.