Jak tworzyć obrazy na podstawie kodu HTML na potrzeby dynamicznego tworzenia kart informacyjnych

Jeden z najpotężniejszych i najbardziej wszechstronnych rodzajów treści w RCS Business Wiadomości to karta informacyjna. Dzięki karcie informacyjnej możesz wysyłać pojedyncze fragmenty powiązanych informacji wiadomość, w tym obraz lub film, tytuł, opis – maksymalnie 4 sugerowane odpowiedzi lub działania.

Samodzielne karty informacyjne i karuzele kart informacyjnych to zaawansowane funkcje, które mogą pomagają tworzyć atrakcyjne treści dla użytkowników. Działają one świetnie, pod warunkiem że Obrazy, które musisz udostępnić, to statyczne obrazy, np. kupon lub produkt. Ale co gdy trzeba wysyłać treści dynamiczne na podstawie informacji o użytkowniku, np. kartę pokładową?

W tym dokumencie pokażę, jak tworzyć obrazy na bieżąco, korzystając z kodu HTML umieścić te obrazy na kartach rozszerzonych wysyłanych przez agenta. Zobacz, jak skonwertować HTML na obraz.

Z kodu HTML do obrazu

HTML świetnie nadaje się do układania kombinacji tekstu i multimediów. Jeśli jesteś deweloperem musimy stworzyć usługę, która wysyła do użytkownika coś w rodzaju karty pokładowej, danych statystyk użytkowania i innych rodzajów informacji dotyczących użytkownika, dynamicznie ale prawdopodobnie użyjemy wygenerowanego kodu HTML. W RCS Business Messaging obsługują tylko materiały graficzne i wideo, więc aby użyć funkcji HTML na potrzeby generowania treści dynamicznych, musi najpierw mieć kod HTML w obrazie.

Na szczęście większość współczesnych języków programowania obsługuje biblioteki zrzuty ekranu ze stronami internetowymi lub komponentami, które mogą renderować co najmniej podstawowy kod HTML (na np. JEditorPane), który służy do wygenerowania obrazu.

Dostępne są także interfejsy API do robienia zdjęć stron internetowych. Przykład: Interfejs Google Page Insights API może automatycznie generować zrzuty ekranu z adresu URL.

Przykład:

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

Poniżej używamy aplikacji Node.js Express do generowania karty pokładowej w formacie HTML, przekonwertuj ją na obraz i prześlij do publicznego dostępny adres URL, a następnie załączyć go na karcie informacyjnej w celu wysłania użytkownikowi.

Tworzenie dynamicznej karty pokładowej

Na początek potrzebujesz pliku HTML do wygenerowania karty pokładowej, jak poniżej .

Można to osiągnąć na wiele sposobów, ale zdefiniujemy punkt końcowy adresu URL w aplikacji Node.js o nazwie /getTicket?msisdn=[phone], która renderuje kod HTML potrzebne do wyświetlenia karty pokładowej, korzystając z silnika widoku EJS.

Załóżmy, że istnieje funkcja o nazwie getUserTicket, która pobiera dane użytkownika telefonu i zwraca obiekt biletu, który zawiera takie informacje jak czas odjazdu, miejsce, rodzaj biletu i lokalizację początkową.

W routerze aplikacji ekspresowej definiujemy punkt końcowy getTicket, wywołujemy funkcję getUserTicket i przekazać zgłoszenie do szablonu 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});
});

Szablon EJS biletu definiuje poniższy kod HTML do renderowania przykładowego dokumentu Bonjour Bilet kolejowy.

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

Tworzenie obrazu na podstawie kodu HTML

Zdefiniowaliśmy kod HTML do utworzenia karty pokładowej, ale potrzebujemy sposobu przekształcenia go w obraz.

Dostępnych jest wiele modułów Node.js typu open source do konwersji surowego kodu HTML a adresy URL – na obrazy. W tym przykładzie użyjemy atrybutu node-webshot, który jest delikatną otoką wokół PhantomJS.

PhantomJS to przeglądarka bez interfejsu graficznego z obsługą skryptów, która renderuje kod HTML na obrazach. Ponieważ PhantomJS wykorzystuje do renderowania komponenty WebKit, może obsługiwać złożone strony grafiki, CSS i JavaScript.

Po zainstalowaniu zrzutu internetowego węzła (npm install --save node-webshot), konwersja kod HTML do obrazu jest bardzo prosty.

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

Przechowywanie plików pod publicznie dostępnym adresem URL

Aby użyć obrazu wygenerowanego za pomocą zrzutu ekranu, potrzebujemy publicznie dostępnej Adres URL. Jeśli generujesz obraz na dedykowanym serwerze WWW, możesz mieć możliwość i zapisać go w folderze publicznym. W tym przykładzie przesyłamy plik do Google Cloud Storage.

Poniższa funkcja pobiera lokalną lokalizację obrazu i przesyła ją do Google. Cloud Storage zwraca link do nowo utworzonego multimediów.

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

Następnie musimy zastąpić skomentowany fragment „TODO” wcześniej wywołaniem, aby użyć tę funkcję 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
      });
});

Wysyłanie karty informacyjnej z obrazem

To już prawie wszystko. Ostatni krok to określenie Funkcja sendBoardingPass(imageUrl, msisdn), która tworzy kartę informacyjną RBM używając obrazu utworzonego w poprzednim kroku i wyśle go użytkownikowi.

Aby przesłać kartę informacyjną za pomocą RBM, używam tego samego pakietu SDK Node.js, który jest dostępny First Agent Sample (Pierwsza próbka agenta).

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

Poniżej znajduje się zrzut ekranu z końcowym efektem.

Podsumowanie i podsumowanie

Najprostszym sposobem na zwiększenie uniwersalności kart informacyjnych jest użycie dynamicznego kodu HTML i konwertujemy kod HTML na obrazy. Obsługa większości nowoczesnych języków programowania biblioteki lub interfejsy API, które pomogą Ci w dokonaniu konwersji. Może być konieczne Eksperymentuj z rozmiarami obrazów, aby wyglądały dobrze w Twoim przypadku. ale to fantastyczne podejście do tworzenia atrakcyjniejszych elementów wizualnych agentów RBM.

Powodzenia i udanego kodowania!