1. Introduction
Maintenant que vous avez créé un chatbot Dialogflow pour un TV Guide dans l'atelier de programmation précédent, nous allons vous montrer comment l'étendre à Google Chat. Vous apprendrez à créer des fiches dynamiques et interactives pour cette plate-forme et à disposer de plusieurs intégrations.
Objectif de cet atelier
Nous allons créer un chatbot Dialogflow capable de fournir des réponses personnalisables dans votre domaine Google Workspace.
Points abordés
- Déployer et configurer une application Google Chat
- Créer des fiches display dans Google Chat
- Créer des charges utiles personnalisées dans le fulfillment Dialogflow
Prérequis
- Suivez le premier atelier de programmation de cette série en deux parties.
- Un navigateur Web et une adresse e-mail pour se connecter à la console Dialogflow
- Chat activé dans votre domaine Google Workspace
2. Activer et configurer Google Chat
Nous allons commencer avec l'agent Dialogflow que vous avez créé dans les précédents ateliers de programmation.
- Dans la console Dialogflow, cliquez sur
. - Dans l'onglet General (Général), faites défiler la page jusqu'à Project ID (ID du projet), puis cliquez sur Google Cloud
.
- Dans la console Google Cloud, cliquez sur le menu de navigation ▾ > API et Services > Bibliothèque :
- Recherchez "API Google Chat" Cliquez ensuite sur Activer pour utiliser l'API dans votre projet Google Cloud.
- Nous allons maintenant configurer votre application Google Chat. Accédez à la page Configuration de l'API. Veuillez noter que chaque projet GCP ne peut avoir qu'une seule application Google Chat.
- Vous devriez voir les champs Dialogflow qui renseignent les options de configuration.
- Remplacez le champ de l'URL de l'avatar par cette image TV:
[https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png) - Activez votre application Google Chat pour les messages privés et les espaces
Cliquez sur Enregistrer et quittez Cloud Console.
Intégrations supplémentaires Dialogflow Google Chat est activé par défaut, mais si vous souhaitez desservir plusieurs plates-formes, vous pouvez accéder à la page Intégrations dans la console Dialogflow pour les activer.
3. Tester dans Google Chat
Maintenant que votre application Google Chat est configurée, ajoutons-la à un espace Chat et testons-la. Ouvrez Google Chat et créez un espace Chat de test. En haut à droite de l'espace, cliquez sur la liste déroulante et sélectionnez Ajouter des personnes et applications.
Recherchez tvguide et ajoutez l'application Google Chat à l'espace.
Vous pouvez désormais interagir avec l'application Google Chat que vous avez déjà intégrée à Google Chat en saisissant simplement @tvguide dans l'espace. Saisissez @tvguide hello pour le tester.
Nous allons maintenant utiliser les personnalisations de Google Chat pour enrichir les réponses.
4. Fiches Google Chat personnalisées
Avec Google Chat, vous pouvez faire en sorte que votre application renvoie à l'utilisateur une réponse textuelle de base ou une réponse sous forme de carte, qui vous offre une interface plus riche créée par différents widgets, y compris des images, des boutons, etc. Maintenant que nous avons connecté votre agent Dialogflow à une application Google Chat, il vous suffit de renvoyer le fichier JSON au format approprié pour l'afficher dans Google Chat dans votre code de fulfillment. Examinons quelques exemples JSON.
La réponse textuelle de base se présente comme suit:
{
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
Voici un exemple de réponse sous forme de fiche avec des widgets:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. Charges utiles personnalisées et fiches de chat
Dans Dialogflow, les charges utiles personnalisées permettent d'envoyer des messages de réponses enrichies spécifiques à une plate-forme. C'est ici que nous ajouterons nos fiches JSON Hangouts Chat, dans lesquelles l'agent les renverra à l'utilisateur.
Commençons par ajouter une fiche de base pour l'intent d'accueil. Dans la console Dialogflow, accédez à "Default Welcome Intent" (Intent d'accueil par défaut) et faites défiler la page jusqu'à la section des réponses.
Cliquez sur Google Chat et désélectionnez Utiliser les réponses de l'onglet PAR DÉFAUT comme premières réponses, puis AJOUTER DES RÉPONSES > Charge utile personnalisée
Un squelette JSON s'affiche.
Copiez et collez le code suivant ci-dessous. Nous avons configuré une fiche avec un widget TextParagraph.
{
"hangouts": {
"header": {
"title": "TV Guide App"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
}
]
}
]
}
}
Cliquez sur Enregistrer, puis accédez à votre espace Chat de test pour voir cette fiche s'afficher. Dans l'espace Chat, saisissez "@tvguide hello"
Nous allons ensuite ajouter une charge utile personnalisée au code de fulfillment afin de générer dynamiquement le contenu avec notre code.
Pour en savoir plus sur les cartes, consultez la documentation sur le format des messages. Dans la section suivante, nous allons ajouter des fiches.
6. Ajouter une carte dans Fulfillment
Nous allons maintenant créer une fiche avec des widgets pour afficher des programmes télévisés. Ajoutons une fonction appelée getGoogleCard, dans laquelle nous afficherons les informations obtenues. Nous allons utiliser des widgets "KeyValue" et "Button" pour construire la réponse de la fiche.
Ajoutez la fonction ci-dessous à votre code dans le fichier index.js, en bas de la page.
/**
* Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));
if(tvresults['Listings'][0]) {
let channelName = tvresults['Name'];
let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);
const cardHeader = {
title: channelName + ' Shows',
};
const currentWidget = {
keyValue: {
content: `${tvresults['Listings'][0]['Title']}`,
bottomLabel: `${currentlyPlayingTime}`,
}
};
const laterWidget = {
keyValue: {
content: `${tvresults['Listings'][1]['Title']}`,
bottomLabel: `${laterPlayingTime}`
}
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Full Listing',
onClick: {
openLink: {
url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
},
},
},
},
],
};
return {
'hangouts': {
header: cardHeader,
sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
}
};
} else {
const errorWidget = {
keyValue: {
content: 'No listings found',
bottomLabel: 'Please try again.'
}
};
return {
'hangouts': {
'sections': {widgets: [errorWidget]},
}
};
}
}
Nous devons maintenant appeler cette méthode pour que l'agent puisse obtenir la réponse à renvoyer à l'utilisateur. Dans la fonction channelHandler, remplacez le contenu de la fonction par le code ci-dessous.
function channelHandler(agent) {
console.log('in channel handler');
var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
var results = JSON.parse(jsonResponse);
var listItems = {};
textResults = getListings(results);
for (var i = 0; i < results['Listings'].length; i++) {
listItems[`SELECT_${i}`] = {
title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
description: `Channel: ${results['Name']}`
}
}
if (agent.requestSource === 'hangouts') {
const cardJSON = getGoogleCard(results);
const payload = new Payload(
'hangouts',
cardJSON,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
} else {
agent.add(textResults);
}
}
Notez le code en bas de l'écran où la réponse est ajoutée. Si la source de la requête de l'agent est identifiée comme étant cette plate-forme, nous construisons la charge utile JSON avec la balise "hangouts". Cela est important pour renvoyer correctement la charge utile dans le fulfillment.
Retournez maintenant dans votre espace Chat et faites un test. Tapez @tvguide What is on MTV?. Vous devriez obtenir une réponse semblable.
7. Félicitations
Vous avez créé votre premier bot Google Chat avec Dialogflow.
Et ensuite ?
Vous avez apprécié cet atelier de programmation ? Découvrez ces ateliers très utiles !