1. Introduction
Maintenant que vous avez créé un chatbot Dialogflow pour un guide TV 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 à effectuer plusieurs intégrations.
Objectif de cet atelier
Nous allons créer un chatbot Dialogflow capable de répondre dans votre domaine Google Workspace avec des réponses personnalisables.
Points abordés
- Déployer et configurer une application Google Chat
- Créer des cartes d'affichage dans Google Chat
- Créer des charges utiles personnalisées dans le fulfillment Dialogflow
Prérequis
- Terminez 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 est activé dans votre domaine Google Workspace.
2. Activer et configurer Google Chat
Nous allons commencer par l'agent Dialogflow que vous avez créé dans les ateliers de programmation précédents.
- Dans la console Dialogflow, cliquez sur
. - Dans l'onglet Général, faites défiler la page jusqu'à ID du projet, puis cliquez sur Google Cloud
.
- Dans la console Google Cloud, cliquez sur Menu de navigation ☰ > API et services > Bibliothèque.
- Recherchez "API Google Chat", puis cliquez 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 comporter qu'une seule application Google Chat.
- Les champs Dialogflow devraient s'afficher dans les options de configuration.
- Remplacez le champ "URL de l'avatar" par l'image de téléviseur suivante :
[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, puis quittez la console Cloud.
Intégrations Dialogflow Google Chat est activé par défaut. Toutefois, si vous souhaitez diffuser votre agent sur plusieurs plates-formes, vous pouvez accéder à la page Intégrations de la console Dialogflow pour les activer.
3. Tester dans Google Chat
Maintenant que votre application Google Chat est configurée, ajoutons-la à un espace de discussion et testons-la. Ouvrez Google Chat et créez un espace de discussion test. En haut à droite de l'espace, cliquez sur le menu déroulant, puis sélectionnez Ajouter des personnes et des 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à créée dans Google Chat en saisissant simplement @tvguide dans l'espace. Saisissez @tvguide hello pour l'essayer.
Nous allons ensuite utiliser les personnalisations dans Google Chat pour ajouter des réponses plus riches.
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 fiche, qui vous permet de créer une interface plus riche à l'aide de différents widgets (images, boutons, etc.). Maintenant que vous avez associé votre agent Dialogflow à une application Google Chat, il vous suffit de renvoyer le code JSON au format approprié pour l'afficher dans Google Chat dans votre code de traitement. 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. Charge utile personnalisée et cartes de chat
Les charges utiles personnalisées dans Dialogflow permettent d'envoyer des messages de réponses enrichies spécifiques à une plate-forme. C'est ici que nous ajouterons nos cartes JSON Hangouts Chat, qui seront renvoyées à l'utilisateur par l'agent.
Commençons par ajouter une fiche de base pour l'intention d'accueil. Dans la console Dialogflow, accédez à l'intent d'accueil par défaut et faites défiler la page jusqu'à la section des réponses.
Cliquez sur Google Chat, décochez Utiliser les réponses de l'onglet "PAR DÉFAUT" en tant que premières réponses, puis cliquez sur AJOUTER DES RÉPONSES > Charge utile personnalisée.
Un squelette JSON s'affiche.
Copiez et collez le code 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 de discussion de test pour voir si la carte s'affiche. Dans l'espace de discussion, saisissez "@tvguide hello".
Nous allons ensuite ajouter une charge utile personnalisée dans le code d'exécution pour pouvoir 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 cartes.
6. Ajouter une carte dans Fulfillment
Nous allons maintenant créer une fiche avec des widgets pour afficher les programmes TV. Ajoutons une fonction appelée getGoogleCard, dans laquelle nous allons afficher les informations de la fiche. Nous utiliserons les widgets keyValue et button pour construire la réponse de la carte.
Ajoutez la fonction ci-dessous à votre code dans index.js en bas.
/**
* 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 le tag "hangouts". Cela est important pour renvoyer correctement la charge utile dans l'exécution.
Revenez maintenant à votre espace de discussion et testez-le. 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 ?
Cet atelier de programmation vous a plu ? Découvrez ces excellents ateliers !