Cómo crear imágenes a partir de HTML para crear tarjetas enriquecidas dinámicas

Uno de los tipos de contenido más potentes y versátiles de RCS Business La mensajería es la tarjeta enriquecida. Con una tarjeta enriquecida, puedes enviar información relacionada en un solo mensaje, incluidos una imagen o un video, un título, una descripción y hasta cuatro respuestas o acciones sugeridas.

Las tarjetas enriquecidas independientes y los carruseles de tarjetas enriquecidas son funciones potentes que pueden: te ayudan a crear experiencias atractivas para los usuarios. Funcionan muy bien siempre que que debes compartir son imágenes estáticas, como un cupón o un producto. Pero lo que si debes enviar contenido dinámico basado en información sobre el usuario como una tarjeta de embarque?

En este documento, te mostraré cómo crear imágenes al instante con HTML y Incorpora esas imágenes en las tarjetas enriquecidas que envía tu agente. Ver cómo convertir HTML en una imagen.

De HTML a imagen

HTML es ideal para diseñar combinaciones de texto y medios. Como desarrolladores, si necesitamos crear un producto para enviarle a un usuario algo como una tarjeta de embarque, datos gráfico de uso o cualquier otro tipo de información específica del usuario, es probable que el HTML generado sea la herramienta que utilizaremos. En RCS Business Messaging, enriquecida las tarjetas solo admiten tipos de medios de imagen y video, así que para usar el el poder del HTML para la generación de contenido dinámico, el HTML primero debe estar se convierten en imágenes.

Afortunadamente, la mayoría de los lenguajes de programación modernos admiten bibliotecas para llevar capturas de pantalla de páginas web o componentes que pueden renderizar al menos HTML básico (para ejemplo, JEditorPane), que puedes usar para generar una imagen.

También hay APIs disponibles para tomar fotos de páginas web. Por ejemplo: API de Page Insights de Google pueden generar capturas de pantalla automáticamente a partir de una URL.

Ejemplo:

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

A continuación, usaremos una app exprés de Node.js para generar una red tarjeta de embarque con HTML, conviértela en una imagen y súbela a una URL accesible y, luego, adjunta la imagen en una tarjeta enriquecida para enviarla a un usuario.

Cómo crear una tarjeta de embarque dinámica

Para comenzar, necesitamos el código HTML para generar una tarjeta de embarque como la siguiente imagen.

Existen muchas formas de hacerlo, pero vamos a definir un extremo de URL. en una app de Node.js llamada /getTicket?msisdn=[phone], que renderiza el HTML que necesitamos para la tarjeta de embarque con el motor de vistas EJS.

Supongamos que hay una función llamada getUserTicket que toma el número de teléfono y devuelve un objeto ticket que contiene información como la hora de salida, el asiento, el tipo de boleto y la ubicación de partida.

Dentro del router de la app Express, definimos el extremo getTicket, llamamos al getUserTicket y pasa el ticket a la plantilla 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});
});

La plantilla EJS del ticket define el siguiente HTML para renderizar el Bonjour de muestra Boleto de tren.

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

Cómo crear una imagen a partir de HTML

Definimos el código HTML para construir la tarjeta de embarque, pero necesitamos una manera de convertirlo en una imagen.

Existen muchos módulos Node.js de código abierto disponibles para convertir HTML sin procesar. y URLs en imágenes. Para este ejemplo, usaremos node-webshot que es un wrapper ligero alrededor de PhantomJS.

PhantomJS es un navegador sin interfaz gráfica que admite secuencias de comandos y que puede convertir HTML en imágenes. Como PhantomJS se basa en WebKit para la renderización, puede manejar páginas complejas con imágenes, CSS y JavaScript.

Después de instalar el webhook del nodo (npm install --save node-webshot), convierte HTML a una imagen es sencillo.

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

Almacena archivos en una URL de acceso público

Para usar la imagen que generó webshot, necesitamos una imagen de acceso público URL. Si generas la imagen en un servidor web dedicado, tal vez puedas para guardar el archivo en una carpeta pública, pero, en este ejemplo, vamos a subir a Google Cloud Storage.

La siguiente función toma una ubicación de imagen local y la sube a Google Cloud Storage, que muestra el vínculo de medios recién creado.

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

A continuación, debemos reemplazar el comentario TODO anterior por una llamada a usar esta función 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
      });
});

Enviar una tarjeta enriquecida con la imagen

Ya casi terminamos. Para completar el paso final, define la Función sendBoardingPass(imageUrl, msisdn), que crea una tarjeta enriquecida de RBM con la imagen creada en el paso anterior y se la envía al usuario.

Para enviar la tarjeta enriquecida con RBM, uso el mismo SDK de Node.js que está disponible en Ejemplo del primer 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);
}

A continuación, se incluye una captura de pantalla del resultado final.

Actividad de cierre y resumen

La forma más sencilla de hacer que las tarjetas enriquecidas sean más versátiles es usar HTML dinámico y convertir el HTML en imágenes. La mayoría de los lenguajes de programación modernos son compatibles bibliotecas o APIs que te ayudarán a completar la conversión. Es posible que debas jueguen con el tamaño de las imágenes a fin de que se vean bien para su caso de uso pero es un enfoque fantástico para crear elementos visuales más atractivos Agentes de RBM.

Buena suerte y ¡feliz programación!