8/23/2020 Create fulfillment using webhook | Dialogflow Documentation Create fulllment using webhook In Dialogow, fulllment is a service, app, feed, conversation, or other logic that can resolve a user request. In our case, we need fulllment that can schedule an appointment for the bike shop given the time and date information provided by the intent Make Appointment. For this setup, we provide a webhook as a backend service that can receive the time and date parameters from the intent and create an event on Google Calendar using the API. To accomplish this, we need to perform two tasks: Obtain credentials for Google Calendar API. Create a new calendar and congure the code in the webhook. Create a webhook with the inline editor Dialogow has an inline editor in the console that allows you to directly write NodeJS code, which then can be deployed to run as a webhook on Firebase. To create a webhook using Dialogow's inline editor, follow these steps: 1. Click on the Make Appointment intent. 2. In the Fulllment section, toggle on the Enable Webhook call for this intent button. 3. Click SAVE. 4. Click the Fulllment tab on the navigation bar to go to the fulllment page. https://cloud.google.com/dialogflow/docs/tutorials/build-an-agent/create-fulfillment-using-webhook/ 1/15 8/23/2020 Create fulfillment using webhook | Dialogflow Documentation 5. Toggle the inline editor's button to ENABLED. 6. Delete the existing content in the package.json tab of the inline editor. 7. Copy and paste the JSON content below to the package.json tab of the inline editor: { "name": "DialogflowFirebaseWebhook", "description": "Firebase Webhook dependencies for a Dialogflow agent.", "version": "0.0.1", "private": true, "license": "Apache Version 2.0", "author": "Google Inc.", "engines": { "node": "6" }, "scripts": { https://cloud.google.com/dialogflow/docs/tutorials/build-an-agent/create-fulfillment-using-webhook/ 2/15 8/23/2020 Create fulfillment using webhook | Dialogflow Documentation "lint": "semistandard --fix \"**/*.js\"", "start": "firebase deploy --only functions", "deploy": "firebase deploy --only functions" }, "dependencies": { "firebase-functions": "^2.0.2", "firebase-admin": "^5.13.1", "googleapis": "^27.0.0", "actions-on-google": "2.2.0", "dialogflow-fulfillment": "0.5.0" } } 8. Delete the existing code in the index.js tab of the inline editor. 9. Copy and paste the code below to the index.js tab of the inline editor: /** * Copyright 2017 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ 'use strict'; const functions = require('firebase-functions'); const {google} = require('googleapis'); const {WebhookClient} = require('dialogflow-fulfillment'); // Enter your calendar ID and service account JSON below. https://cloud.google.com/dialogflow/docs/tutorials/build-an-agent/create-fulfillment-using-webhook/ 3/15 8/23/2020 Create fulfillment using webhook | Dialogflow Documentation const calendarId = '<INSERT CALENDAR ID HERE>'; // Example: 6ujc6j6rgfk02cp02vg const serviceAccount = {}; // The JSON object looks like: { "type": "service_ac // Set up Google Calendar service account credentials const serviceAccountAuth = new google.auth.JWT({ email: serviceAccount.client_email, key: serviceAccount.private_key, scopes: 'https://www.googleapis.com/auth/calendar' }); const calendar = google.calendar('v3'); process.env.DEBUG = 'dialogflow:*'; // It enables lib debugging statements const timeZone = 'America/Los_Angeles'; // Change it to your time zone const timeZoneOffset = '-07:00'; // Change it to your time zone offset exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, res const agent = new WebhookClient({ request, response }); function makeAppointment (agent) { // Use the Dialogflow's date and time parameters to create Javascript Date // which are used to specify the appointment's time. const appointmentDuration = 1;// Define the length of the appointment to be const dateTimeStart = convertParametersDate(agent.parameters.date, agent.pa const dateTimeEnd = addHours(dateTimeStart, appointmentDuration); const appointmentTimeString = getLocaleTimeString(dateTimeStart); const appointmentDateString = getLocaleDateString(dateTimeStart); // Check the availability of the time slot and set up an appointment if the return createCalendarEvent(dateTimeStart, dateTimeEnd).then(() => { agent.add(`Got it. I have your appointment scheduled on ${appointmentDate }).catch(() => { agent.add(`Sorry, we're booked on ${appointmentDateString} at ${appointme }); } let intentMap = new Map(); intentMap.set('Make Appointment', makeAppointment); // It maps the intent 'M agent.handleRequest(intentMap); }); function createCalendarEvent (dateTimeStart, dateTimeEnd) { return new Promise((resolve, reject) => { calendar.events.list({ // List all events in the specified time period auth: serviceAccountAuth, calendarId: calendarId, timeMin: dateTimeStart.toISOString(), https://cloud.google.com/dialogflow/docs/tutorials/build-an-agent/create-fulfillment-using-webhook/ 4/15 8/23/2020 Create fulfillment using webhook | Dialogflow Documentation timeMax: dateTimeEnd.toISOString() }, (err, calendarResponse) => { // Check if there exists any event on the calendar given the specified th if (err || calendarResponse.data.items.length > 0) { reject(err || new Error('Requested time conflicts with another appointm } else { // Create an event for the requested time period calendar.events.insert({ auth: serviceAccountAuth, calendarId: calendarId, resource: {summary: 'Bike Appointment', start: {dateTime: dateTimeStart}, end: {dateTime: dateTimeEnd}} }, (err, event) => { err ? reject(err) : resolve(event); } ); } }); }); } // A helper function that receives Dialogflow's 'date' and 'time' parameters an function convertParametersDate(date, time){ return new Date(Date.parse(date.split('T')[0] + 'T' + time.split('T')[1].spli } // A helper function that adds the integer value of 'hoursToAdd' to the Date in function addHours(dateObj, hoursToAdd){ return new Date(new Date(dateObj).setHours(dateObj.getHours() + hoursToAdd)); } // A helper function that converts the Date instance 'dateObj' into a string th function getLocaleTimeString(dateObj){ return dateObj.toLocaleTimeString('en-US', { hour: 'numeric', hour12: true, t } // A helper function that converts the Date instance 'dateObj' into a string th function getLocaleDateString(dateObj){ return dateObj.toLocaleDateString('en-US', { weekday: 'long', month: 'long', } 10. Click DEPLOY. https://cloud.google.com/dialogflow/docs/tutorials/build-an-agent/create-fulfillment-using-webhook/ 5/15 8/23/2020 Create fulfillment using webhook | Dialogflow Documentation Figure 7. Flowchart showing the connection to the webhook function makeAppointment(). We now have the intent Make Appointment connected to the function makeAppointment() in the webhook. Let's examine the following piece of code in the webhook: https://cloud.google.com/dialogflow/docs/tutorials/build-an-agent/create-fulfillment-using-webhook/ 6/15 8/23/2020 Create fulfillment using webhook | Dialogflow Documentation ts.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => st agent = new WebhookClient({ request, response }); ction makeAppointment (agent) { / Calculate appointment start and end datetimes (end = +1hr from start) onst dateTimeStart = convertParametersDate(agent.parameters.date, agent.parameters.t onst dateTimeEnd = addHours(dateTimeStart, 1); onst appointmentTimeString = getLocaleTimeString(dateTimeStart); onst appointmentDateString = getLocaleDateString(dateTimeStart); / Check the availability of the time, and make an appointment if there is time on th eturn createCalendarEvent(dateTimeStart, dateTimeEnd).then(() => { agent.add(`Got it. I have your appointment scheduled on ${appointmentDateString} at ).catch(() => { agent.add(`Sorry, we're booked on ${appointmentDateString} at ${appointmentTimeStri ); intentMap = new Map(); entMap.set('Make Appointment', makeAppointment); nt.handleRequest(intentMap); In the code above, notice the line, tMap.set('Make Appointment', makeAppointment); The function set()is called on a Map object, intentMap. This function links an intent to a specic function in the code. In this case, the call establishes the mapping between the intent Make Appointment and the function makeAppointment(). The function makeAppointment(agent){} reads the date and time parameter values from the input object agent via agent.parameters.date and agent.parameters.time. After parsing and formatting the date and time values, the function then calls a custom function createCalendarEvent(), which makes an API call to Google Calendar to create an event on the calendar. Lastly, the function agent.add()is used to deliver a customized string as a response to the user. Unlike using the Dialogow console to provide responses, with a webhook, we can use the logic of code to construct highly dynamic responses. For instance, when the agent schedules an appointment successfully, it replies with the following response: https://cloud.google.com/dialogflow/docs/tutorials/build-an-agent/create-fulfillment-using-webhook/