Как создавать изображения из HTML для создания динамических расширенных карточек

Одним из наиболее мощных и универсальных типов контента в RCS Business Messaging является расширенная карточка . С помощью расширенной карточки вы можете отправлять фрагменты связанной информации в одном сообщении, включая изображение или видео, заголовок, описание и до четырех предлагаемых ответов или действий.

Автономные расширенные карточки и карусели с расширенными карточками — это мощные функции, которые помогут вам создать привлекательный опыт для пользователей. Они отлично работают, если изображения, которыми вы хотите поделиться, являются статическими изображениями, такими как купон или продукт. Но что произойдет, если вам нужно отправить динамический контент на основе информации о пользователе, например, посадочного талона?

В этом документе я покажу вам, как создавать изображения «на лету» с помощью HTML и вставлять эти изображения в расширенные карточки, которые отправляет ваш агент. Узнайте, как конвертировать HTML в изображение далее.

От HTML к изображению

HTML отлично подходит для размещения комбинаций текста и мультимедиа. Как разработчикам, если нам нужно создать продукт для отправки пользователю чего-то вроде посадочного талона, диаграммы использования данных или любого другого типа информации, специфичной для пользователя, мы, вероятно, будем использовать динамически генерируемый HTML-код. В RCS Business Messaging расширенные карточки поддерживают только типы изображений и видео, поэтому, чтобы использовать возможности HTML для создания динамического контента, HTML сначала необходимо преобразовать в изображение.

К счастью, большинство современных языков программирования поддерживают библиотеки для создания снимков экрана веб-страниц или компоненты, которые могут отображать хотя бы базовый HTML (например, JEditorPane ), который вы можете использовать для создания изображения.

Существуют также API-интерфейсы для фотографирования веб-страниц. Например, API Page Insights от Google может автоматически создавать снимки экрана по URL-адресу.

Пример:

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

Далее мы используем экспресс-приложение Node.js для создания индивидуального посадочного талона пользователя с помощью HTML, преобразуем его в изображение, загружаем на общедоступный URL-адрес, а затем прикрепляем изображение к расширенной карточке для отправки на пользователь.

Создание динамического посадочного талона

Для начала нам нужен HTML для создания посадочного талона, как показано на следующем изображении.

Есть много способов сделать это, но мы собираемся определить конечную точку URL-адреса в приложении Node.js под названием /getTicket?msisdn=[phone] , которое отображает HTML, необходимый нам для посадочного талона, с помощью механизма представления EJS.

Предположим, что существует функция getUserTicket , которая берет номер телефона пользователя и возвращает объект билета, содержащий такую ​​информацию, как время отправления, место, тип билета и место отправления.

В маршрутизаторе экспресс-приложения мы определяем конечную точку getTicket , вызываем функцию getUserTicket и передаем билет в шаблон 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});
});

Шаблон EJS билета определяет следующий HTML-код для отображения образца билета Bonjour Rail.

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

Создание изображения из HTML

Мы определили HTML-код для создания посадочного талона, но нам нужен способ преобразовать его в изображение.

Существует множество модулей Node.js с открытым исходным кодом, позволяющих конвертировать как необработанный HTML, так и URL-адреса в изображения. В этом примере мы собираемся использовать node-webshot , который представляет собой легкую оболочку PhantomJS .

PhantomJS — это автономный браузер с поддержкой сценариев, который может отображать HTML в изображения. Поскольку PhantomJS использует WebKit для рендеринга, он может обрабатывать сложные страницы с изображениями, CSS и JavaScript.

После установки node webshot ( npm install --save node-webshot ) конвертировать HTML в изображение очень просто.

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

Хранение файлов на общедоступном URL-адресе

Чтобы использовать изображение, созданное с помощью Webshot, нам нужен общедоступный URL-адрес. Если вы создаете изображение на выделенном веб-сервере, вы можете сохранить файл в общедоступной папке, но в этом примере мы собираемся загрузить файл в Google Cloud Storage .

Следующая функция берет локальное местоположение изображения и загружает его в Google Cloud Storage, возвращая вновь созданную медиа-ссылку.

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

Далее нам нужно заменить прокомментированный TODO вызовом функции 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
      });
});

Отправка расширенной открытки с изображением

Мы почти у цели. Завершите последний шаг, определив функцию sendBoardingPass(imageUrl, msisdn) , которая создает расширенную карту RBM с использованием изображения, созданного на предыдущем шаге, и отправляет ее пользователю.

Чтобы отправить расширенную карту с помощью RBM, я использую тот же Node.js SDK, который доступен в первом примере агента .

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

Ниже приведен скриншот окончательного результата.

Подведение итогов и резюме

Самый простой способ сделать расширенные карточки более универсальными — использовать динамический HTML и преобразовать HTML в изображения. Большинство современных языков программирования поддерживают библиотеки или API, которые помогут вам выполнить преобразование. Возможно, вам придется поиграть с размером изображения, чтобы все выглядело правильно для вашего варианта использования, но это фантастический подход к созданию более привлекательных визуальных эффектов в ваших агентах RBM.

Удачи и приятного кодирования!