Una delle tipologie di contenuti più potenti e versatili di RCS Business Messaging è la scheda interattiva. Con una scheda interattiva, puoi inviare blocchi di informazioni correlate in un singolo messaggio, inclusi un'immagine o un video, un titolo, una descrizione e fino a quattro risposte o azioni suggerite.
Le schede interattive e le schede interattive avanzate sono potenti funzionalità che possono aiutarti a creare esperienze coinvolgenti per gli utenti. Funzionano a condizione che le immagini che devi condividere siano statiche, come un coupon o un prodotto. Ma cosa succede se è necessario inviare contenuti dinamici sulla base delle informazioni dell'utente, ad esempio una carta d'imbarco?
In questo articolo, ti insegnerò come creare immagini all'istante con il codice HTML e incorporarle nelle schede interattive inviate dall'agente. Iniziamo dando un'occhiata a come convertire l'HTML in un'immagine.
Dall'HTML all'immagine
L'HTML è ideale per disporre combinazioni di testo e contenuti multimediali. In qualità di sviluppatori, probabilmente dobbiamo utilizzare un prodotto per inviare all'utente una carta d'imbarco, un grafico sull'utilizzo dei dati o qualsiasi altro tipo di informazioni specifiche per l'utente. In RCS Business Messaging, le schede interattive supportano solo tipi di contenuti multimediali immagine e video, quindi per sfruttare la potenza dell'HTML per la generazione di contenuti dinamici, l'HTML deve prima essere convertito in un'immagine.
Fortunatamente, la maggior parte dei linguaggi di programmazione moderni supportano le librerie per l'acquisizione di screenshot di pagine web o componenti in grado di eseguire il rendering di codice HTML di base (ad esempio JEditorPane), che puoi utilizzare per generare un'immagine.
Sono inoltre disponibili API per scattare foto di pagine web. Ad esempio, l'API Page Insights di Google può generare automaticamente screenshot da un URL.
Esempio:
https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=https://www.google.com&screenshot=true
Di seguito, utilizziamo un'app Node.js express per generare una carta d'imbarco specifica dell'utente con codice HTML, convertirla in un'immagine, caricarla in un URL pubblicamente accessibile, quindi allegare l'immagine all'interno di una scheda interattiva da inviare a un utente.
Creazione di una carta d'imbarco dinamica
Per iniziare, abbiamo bisogno del codice HTML per generare una carta d'imbarco come nell'immagine di seguito.
Esistono diversi modi per raggiungere questo obiettivo, ma intendiamo definire un endpoint URL in un'app Node.js denominata /getTicket?msisdn=+12223334444, che esegue il rendering del codice HTML necessario per la carta d'imbarco utilizzando il motore di visualizzazione EJS.
Supponiamo che esista una funzione chiamata getUserTicket che accetta il numero di telefono dell'utente e restituisce un oggetto ticket che contiene informazioni, come ora di partenza, posto a sedere, tipo di biglietto, luogo di partenza e così via.
All'interno del router dell'app Express, definiamo l'endpoint getTicket, chiamiamo la funzione getUserTicket e trasmettiamo il ticket al modello EJS.
router.get('/getTicket', function(req, res, next) {
// Get the passed in phone number
let msisdn = req.body.msisdn;
// Get the ticket object for this user
let ticket = getUserTicket(msisdn);
// Render the ticket in HTML using an EJS template
res.render('ticket', {ticket: ticket});
});
Il modello EJS del biglietto definisce il seguente HTML per eseguire il rendering del biglietto Bonjour Rail di esempio.
<div>
<div>
<div class="left"><img width="200" src="/images/bonjour-rail-logo.png" /></div>
<div class="right muted-text"><%= ticket.dateOfDeparture; %></div>
<div class="cl"></div>
</div>
<div>
<div class="left highlighted-text-color"><h2><%= ticket.startingLocation.city %></h2><br/><%= ticket.startingLocation.station %></div>
<div class="right highlighted-text-color"><h2><%= ticket.endingLocation.city %></h2><br/><%= ticket.endingLocation.station %></div>
<div class="cl"></div>
</div>
<div>
<div class="left">
<h3>PLATFORM <%= ticket.platform %></h3>
<div>
<div class="left">
<div><h4>DEPART</h4></div>
<div><%= ticket.departureTime %></div>
</div>
<div class="left">
<div><h4>ARRIVE</h4></div>
<div><%= ticket.arrivalTime %></div>
</div>
<div class="cl"></div>
</div>
<div>
<div class="left">
<div><h4>TICKET TYPE</h4></div>
<div><%= ticket.ticketType %></div>
</div>
<div class="left">
<div><h4>SEAT</h4></div>
<div><%= ticket.seat %></div>
</div>
<div class="cl"></div>
</div>
</div>
<div class="right">
<img src="<%= ticket.qrCode %>" width="170" />
</div>
<div class="cl"></div>
</div>
</div>
Creazione di un'immagine da HTML
Abbiamo definito il codice HTML per creare la carta d'imbarco, ma abbiamo bisogno di un modo per convertirla in un'immagine.
Sono disponibili molti moduli Node.js open source per convertire sia gli URL HTML non elaborati che gli URL in immagini. Ai fini di questo esempio utilizzeremo un node-webshot, che è un wrapper leggero attorno a PhantomJS.
PhantomJS è un browser headless script che può eseguire il rendering del codice HTML in immagini. Poiché PhantomJS si basa su WebKit per il rendering, è in grado di gestire pagine complesse con immagini, CSS e JavaScript.
Dopo aver installato il webshot del nodo (npm install --save node-webshot), convertire il codice HTML in un'immagine è semplice.
var webshot = require('node-webshot');
let url = '/getTicket?msisdn=' + msisdn;
let htmlAsImageFileLocation = 'ticket.png';
// Define screenshot options
var options = {
screenSize: {
width: 550,
height: 450
},
shotSize: {
width: 550,
height: 450
},
userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g'
};
// Save html as an image
webshot(url, htmlAsImageFileLocation, options, function(err) {
// TODO: Upload image to a publicly accessible URL
});
Archiviare i file in un URL accessibile pubblicamente
Per utilizzare l'immagine generata dalla webshot, è necessario un URL pubblicamente accessibile. Se generi l'immagine su un server web dedicato, puoi semplicemente salvare il file in una cartella pubblica, ma in questo esempio lo caricheremo su Google Cloud Storage.
La funzione riportata di seguito acquisisce una posizione dell'immagine locale e la carica in Google Cloud Storage, restituisce il link multimediale appena creato.
function uploadImage(imageLocation) {
const {Storage} = require('@google-cloud/storage');
// Creates a client
const storage = new Storage();
// Define the Cloud storage location and file name
const bucketName = 'sample-image-uploads';
const yourFileDestination = 'uploaded-image.png';
// Set the options for the upload to be readable by anyone
const options = {
destination: yourFileDestination,
predefinedAcl: 'publicRead'
};
// Return a promise that includes the storage upload
return new Promise(function(resolve, reject) {
// Uploads a local file to the bucket
storage.bucket(bucketName).upload(imageLocation, options)
.then(results => {
// Return the image URL
resolve(results[0].metadata.mediaLink);
}).catch(error => {
reject(error);
});
});
}
A questo punto, dobbiamo sostituire il commento TODO indicato in precedenza con una chiamata per poter utilizzare questa funzione uploadImage.
// Save html as image
webshot(url, htmlAsImageFileLocation, options, function(err) {
let uploadRequest = uploadImage(filename);
uploadRequest.then(function(imageUrl) {
// TODO: Use the imageUrl in a rich card to send to the user
});
});
Invio di una scheda interattiva con l'immagine.
Ci siamo quasi. Completa il passaggio finale definendo la funzione sendBoardingPass(imageUrl, msisdn), che crea una scheda interattiva RBM utilizzando l'immagine creata nel passaggio precedente e la invia all'utente.
Per inviare la scheda interattiva con RBM, utilizzo lo stesso SDK Node.js disponibile nell'esempio di primo agente.
function sendBoardingPass(imageUrl, msisdn) {
let title = 'Here is your boarding pass.';
let suggestions = [
{
reply: {
text: 'See more options',
postbackData: 'more_options',
}
},
];
let params = {
messageText: title,
msisdn: msisdn,
imageUrl: imageUrl,
suggestions: suggestions,
height: 'TALL',
};
// Send the boarding pass
rbmApiHelper.sendRichCard(params);
}
Di seguito è riportato uno screenshot del risultato finale.
Conclusione e TL;DR
Il modo più semplice per rendere le schede interattive più versatili consiste nell'utilizzare il codice HTML dinamico e convertire il codice HTML in immagini. I linguaggi di programmazione più moderni supportano librerie o API che ti aiuteranno a completare la conversione. Potresti dover sperimentare con le dimensioni delle immagini per ottenere l'aspetto più adatto al tuo caso d'uso, ma è un approccio fantastico per creare immagini più accattivanti all'interno dei tuoi agenti RBM.
Buona fortuna e buona programmazione!