Créer des images à partir d'un code HTML pour créer des cartes enrichies dynamiques

L'un des types de contenu les plus puissants et les plus polyvalents de RCS Business Les messages correspondent à la carte enrichie. Avec une carte enrichie, vous pouvez envoyer des blocs d'informations similaires en une seule incluant une image ou une vidéo, un titre, une description et jusqu'à quatre des réponses ou des actions suggérées.

Les cartes enrichies et les carrousels de cartes enrichies autonomes sont des fonctionnalités puissantes qui peuvent vous aident à créer des expériences attrayantes pour les utilisateurs. Ils fonctionnent très bien tant que les images que vous devez partager sont des images statiques comme un bon de réduction ou un produit. Mais que si vous devez envoyer du contenu dynamique basé sur des informations sur l'utilisateur, comme une carte d'embarquement ?

Dans ce document, je vais vous montrer comment créer des images à la volée avec HTML et intégrez ces images dans les cartes enrichies envoyées par votre agent. Voir comment effectuer une conversion HTML dans une image.

Du code HTML à l'image

Le HTML est idéal pour mettre en page des combinaisons de texte et d'éléments multimédias. En tant que développeurs, si nous devons créer un produit pour envoyer à l'utilisateur quelque chose comme une carte d'embarquement, des données graphique d'utilisation ou tout autre type d'informations spécifiques à l'utilisateur, de manière dynamique HTML généré est probablement l'outil que nous utiliserons. Avec RCS Business Messaging, Les fiches ne sont compatibles qu'avec les types de support image et vidéo. Pour utiliser la puissance du HTML pour la génération de contenu dynamique, le HTML doit d'abord être convertir en image.

Heureusement, la plupart des langages de programmation modernes prennent en charge les bibliothèques pour prendre des captures d'écran de pages Web ou de composants dont l'affichage est au minimum au format HTML simplifié (par (JEditorPane, par exemple), que vous pouvez utiliser pour générer une image.

Des API permettant de prendre des photos de pages Web sont également disponibles. Par exemple : API Page Insights de Google peuvent générer automatiquement des captures d'écran à partir d'une URL.

Exemple :

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=https://www.google.com&screenshot=true

Dans ce qui suit, nous allons utiliser une application Express Node.js pour générer une image spécifique à l'utilisateur. en HTML, la convertir en image et l'importer dans une URL accessible, puis joignez l'image à une carte enrichie pour l'envoyer à un utilisateur.

Créer une carte d'embarquement dynamique

Pour commencer, nous avons besoin du code HTML afin de générer une carte d'embarquement semblable à celle-ci : l'image.

Il existe de nombreuses façons de procéder, mais nous allons définir un point de terminaison d'URL dans une application Node.js appelée /getTicket?msisdn=[phone], qui affiche le code HTML dont nous avons besoin pour la carte d'embarquement à l'aide du moteur de vue EJS.

Supposons qu'il existe une fonction appelée getUserTicket qui récupère les données numéro de téléphone et renvoie un objet "ticket" contenant des informations telles que l'heure de départ, le siège, le type de billet et le lieu de départ.

Dans le routeur de l'application Express, nous définissons le point de terminaison getTicket, appelons getUserTicket, puis transmettez le ticket au modèle 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});
});

Le modèle EJS du ticket définit le code HTML suivant pour afficher l'exemple Bonjour Billet de train.

<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>

Créer une image à partir d'un code HTML

Nous avons défini le code HTML pour créer la carte d'embarquement, mais nous avons besoin d'un moyen le convertir en image.

De nombreux modules Node.js Open Source sont disponibles pour convertir les fichiers HTML bruts et les URL en images. Pour les besoins de cet exemple, node-webshot, qui est un wrapper léger pour PhantomJS.

PhantomJS est un navigateur headless qui permet de rédiger des scripts qui peut générer du code HTML sous forme d'images. Étant donné que PhantomJS s'appuie sur WebKit pour le rendu, il peut gérer des pages complexes avec images, CSS et JavaScript.

Après l'installation du capture d'écran du nœud (npm install --save node-webshot), la conversion du code HTML à une image est simple.

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
});

Stocker des fichiers sur une URL accessible publiquement

Pour utiliser l'image générée par le Web, nous avons besoin d'un fichier URL. Si vous générez l'image sur un serveur Web dédié, vous pouvez pour enregistrer le fichier dans un dossier public, mais dans cet exemple, nous allons importer le fichier dans Google Cloud Storage.

La fonction suivante prend une image locale et l'importe dans Google Cloud Storage, qui renvoie le lien multimédia que vous venez de créer.

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);
            });
    });
}

Nous devons ensuite remplacer le TODO commenté précédemment par un appel à utiliser cette fonction 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
      });
});

Envoyer une carte enrichie avec l'image

Nous y sommes presque. Terminez la dernière étape en définissant sendBoardingPass(imageUrl, msisdn), qui crée une carte enrichie RBM à l'aide de l'image créée à l'étape précédente et l'envoie à l'utilisateur.

Pour envoyer la carte enrichie avec RBM, j'utilise le même SDK Node.js que celui disponible dans le Exemple Premier agent.

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);
}

Voici une capture d'écran du résultat final.

Synthèse et résumé

Le moyen le plus simple de rendre les cartes enrichies plus polyvalentes consiste à utiliser du code HTML dynamique et convertir le code HTML en images. La plupart des langages de programmation modernes ou des API qui vous aideront à effectuer la conversion. Vous devrez peut-être jouer avec le dimensionnement de l'image pour obtenir une image adaptée à votre cas d'utilisation, mais c'est une approche fantastique pour créer des visuels plus attrayants dans votre Agents RBM.

Bonne chance pour le codage !