Come creare immagini da HTML per la creazione di schede interattive dinamiche

Uno dei tipi di contenuti più potenti e versatili in RCS Business I messaggi sono la scheda informativa. Con una scheda interattiva, puoi inviare blocchi di informazioni correlate in un unico messaggio, inclusi un'immagine o un video, un titolo, una descrizione e fino a quattro risposte o azioni suggerite.

Le schede interattive e i caroselli di schede interattive sono funzionalità potenti che ti consentono di a creare esperienze coinvolgenti per gli utenti. Questi funzionano benissimo purché le immagini che devi condividere sono immagini statiche, come ad esempio un coupon o un prodotto. Ma la cosa succede se devi inviare contenuti dinamici basati su informazioni sull'utente, come una carta d'imbarco.

In questo documento ti mostrerò come creare immagini "in tempo reale" con HTML Incorporare queste immagini nelle schede informative inviate dall'agente. Scopri come effettuare una conversione HTML in un'immagine.

Da HTML a immagine

L'HTML è ottimo per disporre combinazioni di testo e contenuti multimediali. Come sviluppatori, se dobbiamo creare un prodotto per inviare a un utente, ad esempio, una carta d'imbarco, di utilizzo o qualsiasi altro tipo di informazioni specifiche sull'utente, in modo dinamico, probabilmente l'HTML generato è lo strumento che utilizzeremo. In RCS Business Messaging, le schede supportano solo tipi di media immagine e video, quindi per utilizzare il potenza dell'HTML per la generazione di contenuti dinamici, l'HTML deve prima convertito in un'immagine.

Fortunatamente, i linguaggi di programmazione più moderni supportano le librerie per screenshot di pagine web o componenti in grado di visualizzare almeno HTML di base (ad ad esempio JEditorPane), che puoi utilizzare per generare un'immagine.

Sono disponibili anche API per scattare foto delle pagine web. Ad esempio: 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, viene utilizzata un'app Node.js express per generare un prompt specifico carta d'imbarco con HTML, convertirla in un'immagine, caricarla in un accessibile tramite un URL accessibile, quindi allega l'immagine in 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 la seguente dell'immagine.

Ci sono molti modi per farlo, ma definiremo un endpoint URL in un'app Node.js chiamata /getTicket?msisdn=[phone], che esegue il rendering dell'HTML necessaria per la carta d'imbarco utilizzando il motore di visualizzazione EJS.

Supponiamo che esista una funzione denominata getUserTicket che prende il comando numero di telefono e restituisce un oggetto ticket che contiene informazioni come orario di partenza, posto, tipo di biglietto e località di partenza.

All'interno del router dell'app express definiamo l'endpoint getTicket, chiamiamo getUserTicket e passare 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 ticket definisce il seguente codice HTML per eseguire il rendering del Bonjour di esempio Biglietto ferroviario.

<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 costruire la carta d'imbarco, ma abbiamo bisogno di un modo convertirlo in un'immagine.

Sono disponibili molti moduli Node.js open source per la conversione di file HTML non elaborati e URL in immagini. In questo esempio, utilizzeremo node-webshot, che è un wrapper chiaro intorno a PhantomJS.

PhantomJS è un browser headless con script in grado di eseguire il rendering del codice HTML nelle immagini. Poiché PhantomJS si affida a WebKit per il rendering, è in grado di gestire pagine complesse con immagini, CSS e JavaScript.

Dopo l'installazione del nodo webshot (npm install --save node-webshot), la conversione L'HTML a 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
});

Archiviazione di file in un URL accessibile pubblicamente.

Per utilizzare l'immagine generata da webshot, abbiamo bisogno di un accesso pubblico URL. Se generi l'immagine su un server web dedicato, potresti riuscire salvare il file in una cartella pubblica, ma in questo esempio caricheremo il file in Google Cloud Storage.

La seguente funzione prende la posizione di un'immagine locale e la carica su Google Cloud Storage, che 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 filename
    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);
            });
    });
}

Ora dobbiamo sostituire il TODO commentato di prima con una chiamata da 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 il 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 in 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 riepilogo

Il modo più semplice per rendere le schede informative più versatili è utilizzare l'HTML dinamico e convertire il codice HTML in immagini. Supporto dei linguaggi di programmazione più moderni librerie o API che ti aiuteranno a completare la conversione. Potresti dover prova le dimensioni delle immagini per fare in modo che le immagini siano adatte al tuo caso d'uso, ma è un approccio eccezionale per creare immagini più accattivanti all'interno Agenti RBM.

Buona fortuna e buona programmazione!