Como gerar imagens com HTML para Rich Card dinâmico

Um dos tipos mais eficientes e versáteis de conteúdo no RCS Business As mensagens são o rich card. Com um Rich Card, você pode enviar blocos de informações relacionadas em um único incluindo uma imagem ou vídeo, título, descrição e até quatro respostas ou ações sugeridas.

Rich Cards independentes e carrosséis de rich card são recursos poderosos que podem ajudam a criar experiências envolventes para os usuários. Eles funcionam muito bem, as imagens que você precisa compartilhar são estáticas, como um cupom ou produto. Mas o que acontece se você precisa enviar conteúdo dinâmico com base em informações sobre o usuário, como um cartão de embarque?

Neste documento, mostrarei como criar imagens instantaneamente com HTML e incorporar essas imagens aos rich cards enviados pelo agente. Veja como converter HTML em uma imagem.

Do HTML à imagem

O HTML é ótimo para dispor combinações de texto e mídia. Como desenvolvedores, se precisamos criar um produto para enviar ao usuário algo como um cartão de embarque, gráfico de uso ou qualquer outro tipo de informação específica do usuário, de maneira dinâmica, o HTML gerado provavelmente será a ferramenta que usaremos. No RCS Business Messaging, avançado Os cards aceitam apenas tipos de mídia de imagem e vídeo. Portanto, para usar o capacidade do HTML para a geração de conteúdo dinâmico, o HTML primeiro precisa ser convertida em imagem.

Felizmente, a maioria das linguagens de programação modernas tem suporte para bibliotecas capturas de tela de páginas da Web ou componentes que podem renderizar pelo menos HTML básico (por exemplo, JEditorPane) que você pode usar para gerar uma imagem.

Também há APIs disponíveis para tirar fotos de páginas da Web. Por exemplo: API Page Insights do Google pode gerar capturas de tela automaticamente a partir de um URL.

Exemplo:

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

A seguir, usamos um aplicativo Node.js Express para gerar um objeto específico de embarque com HTML, convertê-lo em uma imagem, fazer upload em um URL acessível e anexar a imagem em um rich card para enviar ao usuário.

Como criar um cartão de embarque dinâmico

Para começar, precisamos do HTML para gerar um cartão de embarque como o seguinte: imagem.

Há muitas maneiras de fazer isso, mas vamos definir um endpoint de URL em um app Node.js chamado /getTicket?msisdn=[phone], que renderiza o HTML para o cartão de embarque usando o mecanismo de visualização EJS.

Suponha que haja uma função com o nome getUserTicket que usa o número de telefone e retorna um objeto de ingresso que contém informações como horário de partida, assento, tipo de passagem e local de partida.

No roteador do app expresso, definimos o endpoint getTicket, chamamos o método getUserTicket e transmita o tíquete para o modelo de 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});
});

O modelo EJS de tíquete define o seguinte HTML para renderizar a amostra do Bonjour Bilhete de trem.

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

Como criar uma imagem com base em HTML

Definimos o HTML para construir o cartão de embarque, mas precisamos de uma maneira de convertê-lo em uma imagem.

Há muitos módulos Node.js de código aberto disponíveis para converter HTML bruto e URLs em imagens. Para este exemplo, vamos usar node-webshot que é um wrapper leve em torno de PhantomJS.

O PhantomJS é um navegador headless scriptável que pode renderizar HTML em imagens. Como o PhantomJS depende do WebKit para renderização, ele pode lidar com páginas complexas com imagens, CSS e JavaScript.

Depois de instalar o webshot do nó (npm install --save node-webshot), convertendo o HTML de uma imagem é simples.

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

Armazenar arquivos em um URL acessível publicamente

Para usar a imagem gerada pelo webshot, precisamos de uma imagem URL. Se a imagem estiver sendo gerada em um servidor da Web dedicado, para salvar o arquivo em uma pasta pública. Neste exemplo, faremos upload o arquivo no Google Cloud Storage.

A função a seguir usa o local de uma imagem local e faz upload dela para o Google Cloud Storage, retornando o link de mídia recém-criado.

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

Em seguida, precisamos substituir o TODO comentado de antes por uma chamada para usar esta função 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 um Rich Card com a imagem

Estamos quase lá. Conclua a etapa final definindo Função sendBoardingPass(imageUrl, msisdn), que cria um rich card do RBM usando a imagem criada na etapa anterior e a envia ao usuário.

Para enviar o Rich Card com o RBM, uso o mesmo SDK do Node.js disponível no First Agent Sample (Amostra do primeiro 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);
}

Confira a seguir uma captura de tela do resultado final.

Conclusão e resumo

A maneira mais simples de tornar os rich cards mais versáteis é usar HTML dinâmico e converter o HTML em imagens. A maioria das linguagens de programação modernas tem suporte ou APIs que ajudarão você a concluir a conversão. Talvez seja necessário testar o dimensionamento da imagem para adequá-la ao seu caso de uso, mas é uma abordagem fantástica para criar recursos visuais mais atraentes em seu agentes do RBM.

Boa sorte e boa programação!