Eine der wirkungsvollsten und vielseitigsten Arten von Inhalten in RCS Business Messaging ist die Rich Card. Mit einer interaktiven Chat-Nachricht kannst du Abschnitte mit ähnlichen Informationen in einer einzigen Nachricht senden, darunter ein Bild oder Video, einen Titel, eine Beschreibung und bis zu vier vorgeschlagene Antworten oder Aktionen.
Eigenständige Rich-Karten und Rich-Karussell-Karten sind leistungsstarke Funktionen, mit denen Sie Nutzer begeistern können. Das funktioniert sehr gut, solange es sich bei den zu teilenden Bildern um statische Bilder wie einen Gutschein oder ein Produkt handelt. Aber was passiert, wenn Sie dynamische Inhalte basierend auf Nutzerinformationen senden müssen, z. B. eine Bordkarte?
In diesem Artikel zeige ich Ihnen, wie Sie im Handumdrehen Bilder mit HTML erstellen und die Bilder in die von Ihrem Agent gesendeten Rich-Karten einbetten. Sehen wir uns zuerst an, wie HTML in ein Bild konvertiert wird.
Von HTML zu Bild
HTML eignet sich hervorragend, um Text- und Medienkombinationen zu platzieren. Wenn wir als Entwickler ein Produkt erstellen müssen, um Nutzern beispielsweise eine Bordkarte, ein Diagramm zur Datennutzung oder andere nutzerspezifische Informationen zu senden, wird wahrscheinlich das dynamisch generierte HTML verwendet. In RCS Business Messaging unterstützen Rich Cards nur Bild- und Video-Medientypen. Um die Möglichkeiten von HTML für die Erstellung dynamischer Inhalte zu nutzen, muss der HTML-Code zuerst in ein Bild konvertiert werden.
Glücklicherweise unterstützen die meisten modernen Programmiersprachen Bibliotheken zum Aufnehmen von Screenshots von Webseiten oder Komponenten, die mindestens grundlegendes HTML rendern können, zum Beispiel JEditorPane. Damit können Sie ein Bild erstellen.
Es sind auch APIs zum Fotografieren von Webseiten verfügbar. So kann beispielsweise die 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 Bordkarte mit HTML zu generieren, in ein Bild umzuwandeln, dieses in eine öffentlich zugängliche URL hochzuladen und dann an eine Rich Card zu senden, um es an einen Nutzer zu senden.
Dynamische Bordkarte erstellen
Zuerst benötigen wir den HTML-Code, um eine Bordkarte wie auf dem Bild unten zu generieren.
Es gibt viele Möglichkeiten, dies zu erreichen. Wir definieren jedoch in der Node.js-App einen URL-Endpunkt mit dem Namen /getTicket?msisdn=+12223334444, der den erforderlichen HTML-Code für die Bordkarte mithilfe der EJS-Ansichts-Engine rendert.
Angenommen, es gibt eine Funktion namens getUserTicket, die die Telefonnummer des Nutzers verwendet und ein Ticketobjekt zurückgibt, das Informationen wie Abfahrtszeit, Sitzplatz, Tickettyp, Ausgangspunkt usw. enthält.
Innerhalb des Routers der Express-App definieren wir den Endpunkt getTicket, rufen die Funktion getUserTicket auf und übergeben 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 Tickets wird der folgende HTML-Code definiert, um das Beispielticket „Bonjour Rail“ zu rendern.
<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 definiert, um die Bordkarte zu erstellen, benötigen aber eine Möglichkeit, ihn in ein Bild umzuwandeln.
Es gibt viele Open-Source-Node.js-Module, mit denen sich Roh-HTML und -URLs in Bilder umwandeln lassen. Für dieses Beispiel verwenden wir node-webshot, einen leichten Wrapper um PhantomJS.
PhantomJS ist ein skriptfähiger browserloser Browser, der HTML in Bildern rendern kann. Da PhantomJS für das Rendering auf WebKit zurückgreift, kann es komplexe Seiten mit Bildern, CSS und JavaScript verarbeiten.
Nach der Installation des Knoten-Webshots (npm install --save node-webshot) ist die Konvertierung von HTML in ein Image 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
});
Dateien unter einer öffentlich zugänglichen URL speichern
Um das von Webshot generierte Bild verwenden zu können, benötigen wir eine öffentlich zugängliche URL. Wenn Sie das Image auf einem dedizierten Webserver generieren, können Sie die Datei möglicherweise einfach in einem öffentlichen Ordner speichern. In diesem Beispiel wird die Datei aber in Google Cloud Storage hochgeladen.
Die folgende Funktion lädt einen lokalen Image-Speicherort in Google 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 file name
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 müssen Sie den zuvor kommentierten TODO durch einen Aufruf ersetzen, um diese uploadImage-Funktion zu 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
});
});
Interaktive Chat-Nachricht mit dem Bild senden
Wir haben es fast geschafft. Zum Abschluss des letzten Schritts definieren Sie die Funktion sendBoardingPass(imageUrl, msisdn), mit der eine RBM-Rich-Karte anhand des im vorherigen Schritt erstellten Bilds erstellt und an den Nutzer gesendet wird.
Zum Senden der Rich Card mit RBM verwende ich dasselbe Node.js-SDK wie im Beispiel für den ersten Agent.
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);
}
Unten sehen Sie einen Screenshot des Endergebnisses.
Zusammenfassung und Zusammenfassung
Die einfachste Möglichkeit, vielseitige Karten zu erstellen, ist die Nutzung von dynamischem HTML und Umwandeln des HTML-Codes in Bilder. Die meisten modernen Programmiersprachen unterstützen Bibliotheken oder APIs, mit denen Sie die Umwandlung abschließen können. Möglicherweise müssen Sie mit der Bildgröße experimentieren, um die richtigen Elemente für Ihren Anwendungsfall zu finden. Aber es ist eine hervorragende Möglichkeit, ansprechendere Bilder in Ihren RBM-Agents zu erstellen.
Viel Erfolg und viel Spaß beim Programmieren!