Bilder aus HTML erstellen, um dynamische Rich Cards zu erstellen

Eine der leistungsstärksten und vielseitigsten Inhaltstypen in RCS Business Nachrichten sind die Rich Card. Mit einer Rich Card können Sie Blöcke mit zusammengehörigen Informationen in einem einzigen Nachricht, einschließlich Bild oder Video, Titel, Beschreibung und bis zu vier vorgeschlagene Antworten oder Aktionen.

Eigenständige Rich Cards und Rich Card-Karussells sind leistungsstarke Funktionen, können Sie ansprechende Erlebnisse für Nutzende schaffen. Diese funktionieren großartig, Bilder, die Sie teilen müssen, sind statische Bilder wie Gutscheine oder Produkte. Aber was ist wenn Sie dynamische Inhalte auf der Grundlage von Nutzerinformationen, wie eine Bordkarte?

In diesem Dokument zeige ich Ihnen, wie Sie Bilder im Handumdrehen mit HTML und und betten Sie diese Bilder in die Rich Cards ein, die Ihr Agent sendet. Anleitung zum Umwandeln HTML in ein Bild ein.

Von HTML in Bild

HTML eignet sich hervorragend zum Layouten von Kombinationen aus Text und Medien. Wenn Sie als Entwickler müssen wir ein Produkt entwickeln, das Nutzenden etwas wie eine Bordkarte, Daten Nutzungsdiagramm oder jede andere Art von nutzerspezifischen Informationen, verwenden wir wahrscheinlich unser Tool. RCS Business Messaging, umfassende Infokarten unterstützen nur Bild- und Videomedientypen. von HTML für die Generierung dynamischer Inhalte nutzen können, muss der HTML-Code zuerst in ein Bild konvertiert.

Glücklicherweise unterstützen die meisten modernen Programmiersprachen Bibliotheken für die Durchführung von Screenshots von Webseiten oder Komponenten, die mindestens einfaches HTML darstellen können (für Beispiel: JEditorPane), mit dem Sie ein Bild generieren können.

Es gibt auch APIs zum Aufnehmen von Bildern von Webseiten. Beispiel: Page Insights API von Google automatisch Screenshots aus einer URL generieren.

Beispiel:

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

Im Folgenden verwenden wir eine Node.js Express-App, um eine nutzerspezifische mit HTML, wandeln Sie die Bordkarte in ein Bild um und laden Sie sie zugängliche URL und füge dann das Bild in einer Rich Card an, die an einen Nutzer gesendet werden soll.

Dynamische Bordkarte erstellen

Zunächst benötigen wir den HTML-Code, um eine Bordkarte wie die folgende zu generieren: Bild.

Dafür gibt es mehrere Möglichkeiten. Wir definieren jedoch einen URL-Endpunkt, in einer Node.js-App namens /getTicket?msisdn=[phone], die den HTML-Code die wir für die Bordkarte benötigen.

Angenommen, es gibt eine Funktion namens getUserTicket, Telefonnummer und gibt ein Ticketobjekt zurück, das Informationen wie Abfahrtszeit, Sitzplatz, Tickettyp und Startort.

Innerhalb des Routers der Express-App definieren wir den getTicket-Endpunkt, rufen die getUserTicket und übergeben Sie das Ticket an die EJS-Vorlage.

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

In der EJS-Vorlage für das Ticket wird der folgende HTML-Code definiert, um das Bonjour-Beispiel zu rendern Zugfahrkarte

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

Bild aus HTML erstellen

Wir haben den HTML-Code zur Erstellung der Bordkarte definiert. in ein Bild konvertieren.

Es gibt viele Open-Source-Node.js-Module, um HTML-Rohdaten zu konvertieren. und URLs in Bilder umwandeln. Für dieses Beispiel verwenden wir node-webshot Dabei handelt es sich um einen Light-Wrapper um PhantomJS.

PhantomJS ist ein skriptfähiger monitorloser Browser, der HTML in Bilder rendern kann. Da PhantomJS beim Rendern auf WebKit angewiesen ist, können komplexe Seiten mit Bilder, CSS und JavaScript.

Nach der Installation von Knoten-Webshot (npm install --save node-webshot) wird die Konvertierung HTML in ein Bild ist ganz einfach.

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

Speichern von Dateien unter einer öffentlich zugänglichen URL

Damit wir das mit dem Webshot erzeugte Bild verwenden können, benötigen wir eine öffentlich zugängliche URL Wenn Sie das Image auf einem dedizierten Webserver generieren, die Datei in einem öffentlichen Ordner zu speichern. In diesem Beispiel laden wir die Datei in Google Cloud Storage.

Mit der folgenden Funktion wird ein lokaler Bildspeicherort in Google hochgeladen. Cloud Storage und gibt den neu erstellten Medienlink zurück.

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

Als Nächstes ersetzen wir den zuvor kommentierten TODO durch einen Aufruf zur Verwendung von uploadImage-Funktion verwenden.

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

Rich Card mit dem Bild senden

Wir haben es fast geschafft. Schließen Sie den letzten Schritt ab, indem Sie sendBoardingPass(imageUrl, msisdn)-Funktion, mit der eine RBM-Rich Card erstellt wird das im vorherigen Schritt erstellte Image verwendet und an den Nutzer gesendet.

Zum Senden der Rich Card mit RBM verwende ich dasselbe Node.js SDK wie im Erstes Agent-Beispiel.

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

Der folgende Screenshot zeigt das Endergebnis.

Zusammenfassung und Zusammenfassung

Die einfachste Möglichkeit, Rich Cards vielseitiger zu machen, ist die Verwendung von dynamischem HTML. und konvertieren Sie den HTML-Code in Bilder. Unterstützung der meisten modernen Programmiersprachen Bibliotheken oder APIs, die Ihnen bei der Konvertierung helfen. Möglicherweise musst du mit der Bildgröße experimentieren, damit das Bild für Ihren Anwendungsfall aber es ist ein großartiger Ansatz, um überzeugendere visuelle Elemente in Ihrem RBM-Mitarbeiter:

Viel Erfolg und viel Spaß beim Programmieren!