This content originally appeared on Twilio Blog and was authored by Luís Leão
Introducción
Es increíble cómo en los últimos años, el procesamiento del lenguaje natural (NLP, por sus siglas en inglés) ha transformado la manera en que construimos interfaces conversacionales. En particular, más empresas están desarrollando bots de chat que interactúan con sus clientes en tiempo real. En mi tutorial anterior, escribí sobre cómo crear un bot de chat con Dialogflow. En este tutorial, vamos a crear un bot de chat con Twilio Autopilot y WhatsApp. Nuestro bot de chat permitirá a los usuarios reservar una cita y crear un evento en el calendario de Google.
En este tutorial, se requieren conocimientos básicos de Autopilot. Si necesita leer más información, hágalo en esta guía..
Requisitos del tutorial
- Un entorno de desarrollo PHP 7
- Instalación global de Composer
- Instalación global de ngrok
- Cuenta de Twilio
- Cuenta de Google
- Cuenta de WhatsApp
Creación de un proyecto de Google
Para empezar, debemos crear un proyecto de Google y habilitar la API de Google Calendar. En el panel de control de su proyecto, haga clic en la pestaña Credentials (Credenciales). Haga clic en el botón desplegable create credentials (Crear credenciales) y, a continuación, haga clic en service account key (Clave de cuenta de servicio). Brinde un nombre de cuenta de servicio, seleccione la función owner (propietario) y deje marcado el botón de opción JSON. Cuando haga clic en Create (Crear) se descargará un archivo JSON. Déjelo en la carpeta de descargas por ahora, lo utilizaremos más tarde.
Nota: Necesitamos una cuenta de servicio porque vamos a realizar interacciones de servidor a servidor. Puede encontrar más información sobre esto en la documentación.
Ahora, haga clic en el botón Create credentials (Crear credenciales) de nuevo. Seleccione la clave de API. Se generará una clave de API y la recibirá más tarde. Eso es todo lo que debemos hacer en nuestra consola de proyecto de Google.
Configuración de nuestro entorno de desarrollo
Desde el terminal, en la ubicación que elija, cree un nuevo directorio del proyecto. Llamé al mío Twilio-Autopilot. En el directorio, agregue dos archivos:
- webhook.php
- .env
Utilizaremos webhook.php para escuchar una solicitud POST de Autopilot (habrá más información sobre esto). El archivo .env se utiliza para almacenar credenciales confidenciales.
En el archivo .env, agregue las siguientes variables del entorno:
GOOGLE_API_KEY='ENTER THE API KEY WE CREATED IN THE PREVIOUS STEP'
GOOGLE_APPLICATION_CREDENTIALS=./credentials.json
Tenemos dos variables del entorno. El valor para GOOGLE_API_KEY es la clave de API que creamos en nuestro proyecto de Google. La segunda variable de entorno hace referencia a un archivo en el directorio raíz de nuestro proyecto llamado “credentials.json”. Como eso no existe aún, continuemos y creémoslo. Copie el archivo que se descargó cuando creamos una clave de cuenta de servicio en Google en el directorio raíz de nuestro proyecto. Asegúrese de cambiarle el nombre a “credentials.json”.
Nota: credentials.json es un archivo confidencial y no se debe enviar a un repositorio público.
Instalación de dependencias
Para nuestro proyecto, necesitaremos dos dependencias:
- PHP Dotenv, que nos permite cargar variables de entorno desde el archivo .env.
- Cliente API de Google para PHP, que nos permite trabajar con las API de Google. Para este tutorial, usaremos la API de Google Calendar.
Desde el terminal, en el directorio del proyecto, ejecute el siguiente comando:
$ composer require vlucas/phpdotenv google/apiclient
La estructura de su carpeta debe verse así:
Inicio de ngrok
Necesitamos que nuestro archivo webhook.php sea accesible a través de una URL pública. Para ello, utilizaremos ngrok. Desde el terminal ejecute el siguiente comando:
$ php -S localhost:3000
En una ventana de terminal nueva, ejecute el siguiente comando:
$ ./ngrok http 3000
Debe ver una salida similar en su terminal. Más adelante, utilizaremos la dirección URL de reenvío.
Configuración del asistente de Autopilot
Desde su cuenta de Twilio, vaya a la Autopilot console (Consola de Autopilot) y cree un nuevo asistente. Llamé al mío appointment-booking.
Sandbox de Twilio para WhatsApp
Debido a que usaremos WhatsApp como nuestro canal de Autopilot, tenemos que configurar nuestro sandbox de WhatsApp. A la izquierda, haga clic en Channels (Canales) y seleccione WhatsApp.
Debería ver la página a continuación. Siga las instrucciones que se ofrecen para configurar el sandbox.
Al finalizar, en la sección Autopilot, verá una notificación en la parte superior similar a esta:
Haga clic en “Build Model” (Crear modelo) y dele una versión v0.1. Una vez que se complete la creación, vaya a WhatsApp y escriba la palabra “Hola”. ¿Obtuvo una respuesta como esta?
La respuesta anterior se generó con la Task (Tarea) predeterminada, “hello_world”.
Las tareas son los bloques de creación para asistentes que le permiten utilizar la API de acciones de Autopilot para definir las capacidades y crear el script de su asistente.
Sigamos y modifiquemos la tarea hello_world. En la sección Autopilot, haga clic en Tasks (Tareas) y, en el lado derecho, de la tarea hello_world, haga clic en Program (Programa). Reemplace el contenido con el fragmento que se muestra a continuación:
{
"actions": [
{
"say": "Hey there! My name is X, I'm Charles' Scheduling assistant... Would you like to schedule and appointment?"
},
{
"listen": true
}
]
}
Agregamos una nueva acción llamada “listen” (escuchar). Esto le indica a Autopilot que mantenga abierta la conversación. De lo contrario, terminaría la conversación.
Guarde los cambios y vuelva a la página anterior. Esta vez haga clic en Train (Entrenar). Aquí escribimos frases de entrenamiento que activarán la tarea hello_world. Puede agregar cualquier frase que desee agregar. Estas son algunas frases que agregué yo:
Ahora que hemos realizado cambios, podemos continuar y probarlo. Antes de hacerlo, debemos crear un nuevo modelo. Después de crear el nuevo modelo, escriba cualquiera de las frases de entrenamiento que ingresó anteriormente. Ahora debería ver el nuevo mensaje.
Fantástico. Esto es emocionante. Sigamos adelante y creemos otras dos tareas. Una que se activa cuando el usuario indica interés en reservar una cita y otra cuando no lo hace.
Nombré a la primera tarea “yes_response”. Puede asignarle un nombre diferente si lo desea. En ella, vamos a copiar el siguiente fragmento:
{
"actions": [
{
"collect": {
"name": "user_details",
"questions": [
{
"question": "What is your first name?",
"name": "user_first_name",
"type": "Twilio.FIRST_NAME"
},
{
"question": "What is your last name?",
"name": "user_last_name",
"type": "Twilio.LAST_NAME"
},
{
"question": "What's your email?",
"name": "user_email",
"type": "Twilio.EMAIL"
},
{
"question": "On what date would you like to book your appointment?",
"name": "appointment_date",
"type": "Twilio.DATE"
},
{
"question": "At what time?",
"name": "appointment_time",
"type": "Twilio.TIME"
},
{
"question": "What is the purpose of you appointment? e.g check up",
"name": "appointment_purpose"
}
],
"on_complete": {
"redirect": "https://07714298.ngrok.io/webhook.php"
}
}
}
]
}
Nota: Asegúrese de reemplazar la URL de redirección con la URL de reenvío de ngrok.
El fragmento anterior le pide al usuario algunos detalles y los recopila. Algunas preguntas tienen el tipo especificado. Estos son tipos de campo incorporados y hacen cumplir el tipo de respuesta que se espera del usuario.
La acción on_complete puede redirigir los datos recopilados a otra tarea o a una dirección URL determinada. En nuestro caso, redireccionamos a nuestra URL de webhook.
Necesitamos agregar algunas frases de entrenamiento para esta tarea. Estas son algunas de las frases que agregué yo:
La siguiente tarea gestiona una respuesta negativa. Llamé a la mía “no_response”. Vamos a copiar el siguiente fragmento para programarla:
{
"actions": [
{
"say": "Bueno. ¡Qué tengas un lindo día!"
}
]
}
Esta es una acción simple que envía un mensaje al usuario y finaliza la conversación. Recuerde agregar frases de entrenamiento. Yo agregué estas:
Es hora de poner a prueba nuestras tareas recién agregadas. Siga adelante y cree un nuevo modelo y, a continuación, pruebe la experiencia conversacional en WhatsApp. Aquí tiene capturas de pantalla de mis respuestas:
Esto va muy bien. Ahora, debemos actualizar nuestro webhook para manejar la solicitud entrante desde Autopilot.
Configuración de webhook
Cliente de Google Calendar
Antes de que podamos trabajar en el webhook, necesitamos configurar el Cliente de Google Calendar. Con la guía de inicio rápido de API de Google Calendar, podemos crear un Cliente de Google Calendar. Cree un archivo y asígnele un nombre GoogleCalendarClient.php, y copie el siguiente código:
<?php
require __DIR__ . '/vendor/autoload.php';
$dotenv = Dotenv\Dotenv::create(__DIR__);
$dotenv->load();
/**
* Class GoogleCalendarClient makes API calls to Google API
*/
class GoogleCalendarClient
{
protected $service;
/**
* GoogleCalendarClient constructor
*/
public function __construct()
{
$apiKey = getenv( 'GOOGLE_API_KEY' );
$client = new Google_Client();
$client->setAccessType( 'offline' );
$client->useApplicationDefaultCredentials();
$client->setDeveloperKey( $apiKey );
$client->setScopes( [ 'https://www.googleapis.com/auth/calendar' ] );
$this->service = new Google_Service_Calendar( $client );
}
/**
* Creates an event
*
* @param array $eventDetails event details e.g summary, start, end, attendees, e.t.c
*
* @return array $user of a user
*/
public function createEvent( $eventDetails )
{
$event = new Google_Service_Calendar_Event( $eventDetails );
$optionalArguments = [ 'sendNotifications' => true ];
$calendarId = 'primary';
$event = $this->service->events
->insert( $calendarId, $event, $optionalArguments );
return $event;
}
}
Esta clase utiliza la clave de API en nuestro archivo .env, así como las credenciales.json para autenticar nuestras solicitudes. El método createEvent() crea un evento basado en los argumentos que se le pasan.
Webhook
Copie el siguiente código en el archivo webhook.php:
<?php
include_once( 'GoogleCalendarClient.php' );
if ( $_SERVER[ 'REQUEST_METHOD' ] === 'POST' ) {
$userDetails = $_REQUEST[ 'Memory' ];
$userDetails = json_decode( $userDetails );
$userDetails = $userDetails->twilio->collected_data->user_details->answers;
$firstName = $userDetails->user_first_name->answer;
$appointmentDate = $userDetails->appointment_date->answer;
$appointmentTime = $userDetails->appointment_time->answer;
$appointmentStartAndEndTime = formatAppointmentTime( $appointmentDate, $appointmentTime );
$eventDetails = array(
'summary' => $firstName.'\'s Appointment with Charles',
'location' => 'Plaza, Rabai Rd, Nairobi, Kenya',
'description' => $userDetails->appointment_purpose->answer,
'start' => array(
'dateTime' => $appointmentStartAndEndTime[0],
'timeZone' => 'Africa/Nairobi',
),
'end' => array(
'dateTime' => $appointmentStartAndEndTime[1],
'timeZone' => 'Africa/Nairobi',
),
'attendees' => array(
array( 'email' => 'odukjr@gmail.com' ),
array( 'email' => $userDetails->user_email->answer ),
),
'reminders' => array(
'useDefault' => FALSE,
'overrides' => array(
array( 'method' => 'email', 'minutes' => 24 * 60 ),
array( 'method' => 'popup', 'minutes' => 10 ),
),
),
);
$client = new GoogleCalendarClient();
$client->createEvent( $eventDetails );
$message = "Thanks $firstName, your appointment has been booked for $appointmentDate at $appointmentTime";
$response = array(
'actions' => array (
array(
'say' => $message
)
)
);
echo json_encode( $response );
}
/**
* Formats the date to the format 2015-05-28T09:00:00
* and adds 30 minutes to the start time. This works
* with the assumption that an appointment is 30 minutes.
*
* @param String $date
* @param String $time
*
* @return Array
*/
function formatAppointmentTime($date, $time) {
$appointmentTime = array();
$start = date( 'Y-m-d H:i:s', strtotime( $date.$time ) );
$end = date( 'Y-m-d H:i:s', strtotime( $start . '+30 minutes' ) );
$start = str_replace( ' ', 'T', $start );
$end = str_replace( ' ', 'T', $end );
array_push( $appointmentTime, $start, $end );
return $appointmentTime;
}
Este archivo utiliza el Cliente de Google Calendar. Recibe una solicitud de Autopilot, da formato los datos, crea un nuevo evento y envía una respuesta al usuario.
Prueba
Ahora que tenemos todo en marcha, ¡es hora de probarlo! En WhatsApp, complete la experiencia conversacional. Ahora debería tener un resultado como este a continuación:
Si ingresó una dirección de Gmail válida, también debe tener un evento de calendario en su Google Calendar:
Conclusión
¡Felicitaciones! Acaba de crear un bot de chat con Autopilot y WhatsApp. Solo hemos cubierto la superficie. Puede continuar y hacer que su experiencia de conversación sea más emocionante. Por ejemplo, nuestra aplicación nos permite reservar citas en cualquier momento y no maneja una situación en la que no hay un espacio libre.
Este artículo fue traducido del original "Create a WhatsApp Chatbot that Books Appointments in Google Calendar Using Autopilot and PHP". Mientras estamos en nuestros procesos de traducción, nos encantaría recibir sus comentarios en help@twilio.com - las contribuciones valiosas pueden generar regalos de Twilio.
This content originally appeared on Twilio Blog and was authored by Luís Leão
Luís Leão | Sciencx (2021-07-21T23:56:53+00:00) Cree un bot de chat de WhatsApp que reserva citas en Google Calendar mediante Autopilot y PHP. Retrieved from https://www.scien.cx/2021/07/21/cree-un-bot-de-chat-de-whatsapp-que-reserva-citas-en-google-calendar-mediante-autopilot-y-php/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.