In questo dialogflow tutorial creiamo un semplice chatbot per iscrivere l’utente alla nostra mail list, attraverso le mailchimp api usando google dialogflow.
Dialogflow
Abbiamo accennato a dialogflow esaminando alcuni chatbot case studies: compagnie aeree come KLM: Royal Dutch Airlines, e società come Ticketmaster usano questo sistema per i loro chatbot intelligenti.
Dialogflow è una piattaforma per la creazione rapida di sistemi HCI (Human Computer Interaction), campo multidisciplinare focalizzato nello studio dei migliori approcci per far interagire uomini e computers.
Sfruttando modelli di Natural Language Processing, è possibile creare chatbot automatizzati attraverso una GUI (Graphical User Interface) semplice e funzionale.
In questo dialogflow tutorial andremo a realizzare un chatbot per iscrivere l’utente alla nostra mail list usando mailchimp api!
Procediamo con un approccio Top-Down.
Ipotizzando di avere il nostro chatbot funzionante, cosa abbiamo bisogno per registrare un nuovo utente su Mailchimp?
Mailchimp | TL;DR
Mailchimp è un servizio gratuito, con opzioni premium, di creazione e gestione di mail list. Offre sistemi avanzati di marketing attraverso campagne email aventi l’obiettivo di far crescere il tuo business.
È il sistema che utilizziamo su questo sito per gestire l’ingresso nel Team d’Elite.
Uno dei punti di forza di questo servizio è la presenza di una relativamente ricca collezione di endpoint RESTfull: sono le mailchimp api.
La documentazione spiega dettagliatamente come procedere all’integrazione delle chiamate nei propri progetti.
Sostanzialmente abbiamo bisogno di tre cose per procedere:
- Un base url.
- Il sistema di autenticazione
- L’end-point per aggiungere un utente alla mail list.
API Endpoint
Alcune note che possono tornarci utili.
Il base url è il seguente: https://<dc>.api.mailchimp.com/3.0/ con il placeholder <dc> da sostituire inserendo il nostro datacenter di riferimento.
Occorre seguire un semplice passaggio per individuarlo.
Authentication
Accedendo alla pagina personale, sezione Extras > API, puoi consultare l’elenco delle API Key generate. Questo è doppiamente utile:
- Le ultime lettere di ogni API key contengono il data center di appartenenza (nel nostro caso us-20)
- L’API KEy è fondamentale per autorizzare ogni chiamata
Nello specifico il sistema di autenticazione che offre Mailchimp è duplice, ma per semplicità passiamo un Authorization: apikey <your_api_key> negli headers della chiamata.
List Endpoint
Le mail list di Mailchimp per quanto mi è dato capire, funzionano in questo modo. Creata una nuova lista, attraverso le chiamate o tramite GUI, è generato un id univoco.
Per aggiungere un nuovo utente alla mail list occorre eseguire una POST con il seguente payload:
// POST /lists/<your_list_id>/members
payload = {
"email": "<your_future_member_email>",
"status":"subscribed",
"merge_fields": {
"FNAME": name
}
}Email e Status sono richiesti, merge_fileds sono opzionali.Puoi trovare una lista complte dei parametri a questo link.
Dialogflow Tutorial: Flow Elements
Prima di sporcarci le mani con la creazione del bot, e della relativa chat, occorre prendere dimestichezza con alcuni termini tecnici.
Ti consiglio di avviare un progetto su Dialogflow, collegandolo al tuo account Google Cloud, così da inquadrare efficacemente le sezioni e la loro utilità.
Agent
Definiamo Agente il modulo, interno a dialogflow, che incorporando modelli di Natural Language Processing è capace di comprendere il messaggio dell’utente e identificare la corretta operazione da intraprendere.
Operativamente, l’agente trasforma un messaggio di testo o vocale in dati strutturati da utilizzare successivamente.
Intent
L’Intento è la tipologia di supporto o servizio richiesta dall’utente sulla base dell’identificazione compiuta dall’Agente.
Nella GUI di Dialogflow, gli intenti sono configurabili attraverso una molteplicità di sezioni. Vediamole insieme.
Contexts
Rappresentano il ponte di collegamento tra più intenti per i parametri identificati dall’agente nella richiesta, o risposta, dell’utente.
Immagina di avere due intenti:
- intento 1: Flight Booking
- intento 2: Hotel Room Booking
L’utente richiede la prenotazione di un volo, e impostiamo il bot affinché chieda che sia riservata anche una stanza d’Hotel.
Evitiamo la ridondanza di specificare due volte la stessa data, passando il parametro al secondo intento attraverso un contesto, collegando intento 1 e intento 2.
Events
Sezione opzionale che consente di triggerare (perdona l’inglesismo) l’intento senza una richiesta specifica dell’utente.
In questo modo avviando il bot, sarà subito richiesta la prima domanda collegata al parametro obbligatorio configurato (a breve ci arriviamo).
Possiamo crearne uno o sfruttare quelli preimpostati.
Training phrases
Le frasi che attivano l’intento (qualora non avessimo impostato un evento) e che indicano all’agente in quali situazioni estrarre il parametro che abbiamo settato.
Action and Parameters
La lista di parametri che definiscono la nostra azione. Nel caso del chatbot per l’iscrizione alla newsletter sono due: email e nome.
Li definiamo, quindi indichiamo al sistema che tipologia di entità rappresentano.
Il valore lo settiamo attraverso una corrispondenza con gli elementi all’interno della frase di allenamento.
Infine indichiamo un promts cioè la domanda fatta dal sistema all’utente per l’inserimento del parametro.
Responses
La risposta inviata dall’agente al termine dell’intento, quando cioè la procedura si è conclusa. Può includere i parametri estratti dal sistema.
Fullfillment
Possiamo decidere se attivare o meno un webhook per l’intento.
Rappresenta il codice rilasciato attraverso un web service pe inviarre i dati all’utente.
Il codice è però configurato in una sezione separata.
Fulfillment
Il codice, nudo e crudo. In questa sezione del bot è possibile creare funzioni specifiche che inbviino i dati del bot a risorse esterne.
Il tutto è gestito da un Webhook, un sistema informatico che, ridotto all’osso, instaura una comunicazione bidirezionale tra due dispositivi, come in una chat.
Occhio alle modifiche che esegui: sono lente ad essere rilasciate.
Dialogflow Tutorial: fullfillment code
Qui arrivano le mazzate.
Ho realizzato un primo codice, mal funzionante, che ha portato alla luce diverse problematiche.
Quindi, ecco cosa sappiamo.
- La versione gratuita di Google Cloud Firebase (il sistema per la gestione delle funzioni) è limitato e magari il mal funzionamento potrebbe dipende da questo.
- La Firebase Console ci informa che l’errore è un EAI_AGAIN, problema di configurazione DNS probabilmente dovuto allo schifo di chiamata che facciamo usando la libreria https
Come risolviamo tutto questo?
Dialogflow Tutorial: Troubleshooting
Allora, a quanto pare Google Firebase blocca le connessioni in uscita perché non abbiamo settato un billing account.
Billing account not configured. External network is not accessible and quotas are severely limited. Configure billing account to remove these restrictions
Credo sia un modo carino e coccoloso per dirci che siamo poveri.
Ma noi siamo ricchi.
Configuriamolo!
Scegliamo il piano Blaze.
Google sa tutto di me, si è premurato di effettuare ogni sorta di pagamento.
Cosa niente privacy, è così premuroso…
Ora il codice da inserire nell’Inline Editor della sezione Fullfillment dopo averlo opportunamente attivato: (ahimè niente ECMA script)
// index.js
// See https://github.com/dialogflow/dialogflow-fulfillment-nodejs
// for Dialogflow fulfillment library docs, samples, and to report issues
'use strict';
const axios = require ('axios');
const functions = require('firebase-functions');
const DialogFlowApp = require('actions-on-google').DialogFlowApp;
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
// set the action
let action = request.body.queryResult.intent.displayName;
console.log('This is the action: ', action);
response.setHeader('Content-Type','applicaiton/json');
const parameters = request.body.queryResult.parameters;
const name = parameters.nome;
const email = parameters.email;
subscribe(name,email, response);
});
function subscribe(name,email, mainResponse){
console.log("Subscribe");
console.log("Name:", name);
console.log("email",email);
const listID = "*****";
const subscribe_path = "/lists/"+listID+"/members";
const auth = "apikey *****-us20";
const payload ={
"email_address": email,
"status": "subscribed",
"merge_fields": {
"FNAME": name
}
};
const https = axios.create({
baseURL: "https://us20.api.mailchimp.com/3.0",
headers: {
'Authorization': auth
}
});
https.post(subscribe_path, payload)
.then(res=>{
//console.log(res);
const response_text = `Ottimo ${name}, ho correttamente registrato ${email}.`;
mainResponse.setHeader('Content-Type','applicaiton/json');
mainResponse.send(JSON.stringify({"fulfillmentText": response_text}));
})
.catch(err=>{
console.log(err);
});
}Per le chiamate esterne ho usato una libreria chiamata axios, che puoi installare spostandoti nella sezione package.json e aggiungendo all’oggetto dependencies:
{
...
"dependencies": {
...
"axios": "^0.19.0"
}
}Ora avviamo il DEPLOY.
Una volta terminato, spostiamoci su Integration e qui possiamo vedere una folta lista di sistemi su cui integrare il nostro fantastico boot.
Per il momento concentriamoci su Web Demo, quindi abilitiamo l’opzione.
Ed ecco il link al nostro bot: Mailchimp Subscriber Bot
Puoi altrimenti chattare con lui qui sotto (inizia con un voglio iscrivermi alla newletter, è ancora acerbo lo so)
Un caldo Abbraccio, Andrea.
P.S. : Per contatti commerciali, scrivimi pure su linkedin.
