https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-a-farewell-app-using-vonage-ai-studio-and-notion-as-a-database/farewell-app_ai-studio.png

Créer une application d'adieu en utilisant Vonage AI Studio et Notion comme base de données

Publié le December 19, 2023
#ai-studio
#low-code

Temps de lecture : 4 minutes

Recréer le S7E22 de The Office (édition Vonage)

Quelqu'un d'autre était-il pas bien après l'épisode 22 de la saison 7 de The Office ?

ALERTE SPOILER !

L'épisode "Goodbye, Michael" était à l'origine censé raconter comment Michael Scott s'est fait virer de Dunder Mifflin à cause d'une erreur professionnelle (ennuyeux !). Au lieu de cela, les scénaristes ont décidé de nous arracher le cœur avec cet épisode extrêmement doux où Michael finit par quitter l'entreprise pour s'installer dans le Colorado avec sa fiancée.

Avant de partir, il offre à chacun de ses employés un cadeau de départ spécial. Bien que je n'aie rien fait d'aussi épique lorsque j'ai quitté mon ancienne entreprise, j'ai créé une application qui permettait à mes anciens collègues d'envoyer leur nom à un numéro de téléphone virtuel et de recevoir un message personnalisé que j'avais écrit pour chacun d'entre eux. C'était une façon réfléchie de leur dire au revoir et de leur faire savoir à quel point j'avais apprécié leur aide cet été-là.

J'aimerais vous montrer comment vous pouvez recréer ce projet en utilisant AI Studio de Vonage et Notion. Plongeons dans ce projet et commençons !

Conditions préalables

  • a Compte de développeur Vonage

  • a Account Notion pour créer notre base de données

    Vonage API Account

    To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Configurer AI Studio de Vonage

Une fois que c'est fait, allez dans votre tableau de bord API et, sur le côté gauche, trouvez CONSTRUIRE & GÉRER > AI Studio > Allez à AI Studio > Créer un agent. Vous pouvez sélectionner n'importe quel type d'agent, mais pour notre exemple, nous allons le créer avec WhatsApp.

Remplissez toutes les informations demandées :

  • Région: Où votre agent sera-t-il généralement utilisé - aux États-Unis ou en Europe ?

  • Nom de l'agent: Donnez à votre agent un nom unique et significatif pour vous.

  • Langue: Sélectionnez la langue de votre agent.

  • Fuseau horaire: Choisissez le fuseau horaire dans lequel votre agent travaillera.

Pour les modèles, nous allons Partir de zéro.

Pour l'événement, il s'agira d'un appel entrant car c'est nous qui envoyons un SMS à notre agent.

Créer une base de données avec Notion

Dans le cadre des meilleures pratiques, nous stockerons les noms des collègues, les messages et les courriels des destinataires dans une base de données - pour cet exemple, nous utiliserons la base de données Notion!

  1. Aller à Notion.

  2. Cliquez sur le bouton (+) pour ajouter une page.

  3. Sur la nouvelle page sous DATABASE, cliquez sur "Table".

  4. Saisissez les différents éléments dont vous avez besoin dans chaque colonne et leurs propriétés correspondantes. Nous avons des colonnes intitulées Coworker, Message et Email.

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

Définir le flux de la conversation

Voici maintenant la partie amusante ! Grâce à l'interface conviviale de Vonage AI Studio, vous pouvez concevoir le flux conversationnel de votre chatbot. Il s'agit d'une configuration par glisser-déposer, ce qui signifie que vous n'avez pas besoin de compétences en codage pour commencer. Vous pouvez ajouter différents nœuds de dialogue et définir des réponses.

Notre flux devrait ressembler à ceci :

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

NODES > Conversation > Collecter des données L'agent virtuel pose une question à l'utilisateur.

  • Nom du nœud : ASK NAME.

  • Invitation : "Je déménage au Colorado pour commencer ma nouvelle vie avec Holly" Répondez avec votre nom pour recevoir votre message personnalisé.

  • Invitation à réessayer : Réessayons. Répondez avec votre nom.

  • Entrée attendue : Texte

NODES > Intégrations > Webhook

  • Méthode : POST

  • URL de la requête : https://api.notion.com/v1/databases/<database_id>/query_ Pour trouver l'ID d'une base de donnéesPour trouver l'ID d'une base de données, naviguez jusqu'à l'URL de la base de données dans votre espace de travail Notion. L'ID est la chaîne de caractères de l'URL qui se trouve entre la barre oblique suivant le nom de l'espace de travail (le cas échéant) et le point d'interrogation. L'ID est une chaîne alphanumérique de 32 caractères.

  • En-têtes (En-tête HTTP : Valeur)

    • Autorisation : Bearer $NOTION*ACCESS_TOKEN

    • Notion-Version : 2022-06-28

    • Content-Type : application/json* Pour trouver votre $NOTION_ACCESS_TOKENil faut passer par l'étape de l d'autorisation pour une interne interne sur Notion._ -Response Mapping Type de réponse : JSON Object path : Après avoir rempli les informations ci-dessus dans notre nœud webhook, assurez-vous que le webhook fonctionne en cliquant sur le bouton "Test request" en haut à droite. Sous Response, vous verrez qu'il renvoie toutes les données de notre table Notion. Utiliser la réponse, définissez le chemin d'accès à l'objet et l'associer à un paramètre.

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

Paramètre : Pour chaque chemin d'objet, créez un paramètre. Sélectionnez @sys.any pour l'entité de chacun d'eux.

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

NODES > Action > Envoyer un e-mail

  • A : $RETURNED_EMAIL

  • Objet : Au revoir de Michael Scott

  • Corps : $RETURNED_MESSAGE

NODES > Actions > Fin de la conversation

Exécuter l'application

En haut de Vonage AI Studio, cliquez sur "Tester" puis sur "Démarrer le chat". Tapez un nom dans votre base de données.

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

Vous devriez alors recevoir un courriel avec le contenu correspondant !

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

Construire son propre "bon vieux temps

Dire au revoir n'a pas besoin d'être ordinaire. Avec une touche de créativité et l'utilisation de Vonage AI Studio et de Notion comme base de données, vous pouvez rendre les adieux sincères et inoubliables. Alors, allez-y et répandez de la joie avec des messages personnalisés qui les feront sourire une dernière fois.

Dans la finale de The Office, Andy Bernard dit : "J'aimerais qu'il y ait un moyen de savoir que vous êtes dans le bon vieux temps avant de l'avoir vraiment quitté" Je dirais que nous sommes dans le bon vieux temps maintenant avec la technologie et les outils que nous pouvons utiliser pour créer des applications emblématiques cool comme celle-ci. N'hésitez pas à rejoindre notre "bureau" de développeurs sur Slack et suivez-nous sur Xanciennement connu sous le nom de Twitter. Si vous finissez par créer une application similaire, partagez-la et taguez-moi - Je serais ravi d'entendre parler de votre fin de saison.

Partager:

https://a.storyblok.com/f/270183/384x384/b68093ec17/diana-pham.png
Diana PhamDéfenseur des développeurs

Diana est défenseur des développeurs chez Vonage. Elle aime manger des huîtres fraîches.