Salah satu jenis konten yang paling andal dan serbaguna di RCS Business Messaging adalah kartu informasi. Dengan kartu informasi, Anda dapat mengirim potongan informasi terkait dalam satu pesan, termasuk gambar atau video, judul, deskripsi, dan hingga empat balasan atau tindakan yang disarankan.
Kartu informasi mandiri dan carousel kartu informasi adalah fitur canggih yang dapat membantu Anda menciptakan pengalaman yang menarik bagi pengguna. Semua ini berfungsi dengan baik selama gambar yang perlu Anda bagikan adalah gambar statis seperti kupon atau produk. Namun, apa yang terjadi jika Anda perlu mengirim konten dinamis berdasarkan informasi tentang pengguna, seperti boarding pass?
Dalam artikel ini, saya akan menunjukkan cara membuat gambar dengan cepat menggunakan HTML dan menyematkan gambar tersebut dalam kartu informasi yang dikirim agen Anda. Mari kita mulai dengan melihat cara mengonversi HTML menjadi gambar.
Dari HTML ke gambar
HTML cocok untuk menata letak kombinasi teks dan media. Sebagai developer, jika kita perlu membuat produk untuk mengirim sesuatu kepada pengguna seperti boarding pass, diagram penggunaan data, atau jenis informasi khusus pengguna lainnya, HTML yang dihasilkan secara dinamis kemungkinan adalah alat yang akan digunakan. Dalam RCS Business Messaging, kartu informasi hanya mendukung jenis media gambar dan video, sehingga untuk memanfaatkan kekuatan HTML untuk pembuatan konten dinamis, HTML terlebih dahulu perlu dikonversi menjadi gambar.
Untungnya, sebagian besar bahasa pemrograman modern mendukung library untuk mengambil screenshot halaman web atau komponen yang dapat merender setidaknya HTML dasar (misalnya JEditorPane), yang dapat Anda gunakan untuk menghasilkan gambar.
Tersedia juga API untuk mengambil gambar halaman web. Misalnya, Page Insights API Google dapat otomatis membuat screenshot dari URL.
Contoh:
https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=https://www.google.com&screenshot=true
Selanjutnya, kami menggunakan aplikasi ekspres Node.js untuk membuat boarding pass khusus pengguna dengan HTML, mengonversinya menjadi gambar, menguploadnya ke URL yang dapat diakses oleh publik, kemudian melampirkan gambar tersebut dalam kartu informasi untuk dikirim kepada pengguna.
Membuat boarding pass yang dinamis
Untuk memulai, kita memerlukan HTML untuk membuat boarding pass seperti gambar di bawah.
Ada banyak cara untuk melakukannya, tetapi kita akan menentukan endpoint URL di aplikasi Node.js yang disebut /getTicket?msisdn=+12223334444, yang merender HTML yang diperlukan untuk boarding pass menggunakan mesin tampilan EJS.
Anggaplah ada fungsi bernama getUserTicket yang mengambil nomor telepon pengguna dan menampilkan objek tiket yang berisi informasi seperti waktu keberangkatan, kursi, jenis tiket, lokasi awal, dll.
Dalam router aplikasi Express, kita menentukan endpoint getTicket, memanggil fungsi getUserTicket, dan meneruskan tiket ke template 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});
});
Template EJS tiket menentukan HTML berikut untuk merender contoh tiket 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>
Membuat gambar dari HTML
Kita telah menentukan HTML untuk membuat boarding pass, tetapi kita memerlukan cara untuk mengonversinya menjadi gambar.
Ada banyak modul Node.js open source yang tersedia untuk mengonversi HTML mentah dan URL menjadi gambar. Untuk tujuan contoh ini, kita akan menggunakan node-webshot, yang merupakan wrapper cahaya di sekitar PhantomJS.
PhantomJS adalah browser headless yang dapat dibuat skrip yang dapat merender HTML menjadi gambar. Karena PhantomJS mengandalkan WebKit untuk rendering, PhantomJS dapat menangani halaman yang kompleks dengan gambar, CSS, dan JavaScript.
Setelah menginstal node webshot (npm install --save node-webshot), mengonversi HTML menjadi gambar sangat mudah dilakukan.
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
});
Menyimpan file ke URL yang dapat diakses secara publik
Untuk memanfaatkan gambar yang dihasilkan oleh webshot, kami memerlukan URL yang dapat diakses secara publik. Jika Anda membuat gambar di server web khusus, Anda mungkin dapat menyimpan file ke folder publik, tetapi dalam contoh ini, kita akan mengupload file ke Google Cloud Storage.
Fungsi di bawah mengambil lokasi gambar lokal dan menguploadnya ke Google Cloud Storage, yang menampilkan link media yang baru dibuat.
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);
});
});
}
Selanjutnya, kita perlu mengganti TODO yang dikomentari sebelumnya dengan panggilan untuk menggunakan fungsi uploadImage ini.
// 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
});
});
Mengirim kartu informasi dengan gambar
Kita hampir selesai. Mari kita selesaikan langkah terakhir dengan menentukan fungsi sendBoardingPass(imageUrl, msisdn) yang akan membuat kartu informasi RBM menggunakan gambar yang dibuat pada langkah sebelumnya, lalu mengirimkannya kepada pengguna.
Untuk mengirim kartu informasi dengan RBM, saya menggunakan Node.js SDK yang sama dengan yang tersedia di Contoh Agen Pertama.
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);
}
Di bawah ini adalah screenshot dari hasil akhir.
Penutup & TL;DR
Cara paling sederhana untuk membuat kartu informasi lebih serbaguna adalah dengan memanfaatkan HTML dinamis dan mengonversi HTML menjadi gambar. Sebagian besar bahasa pemrograman modern mendukung library atau API yang akan membantu Anda menyelesaikan konversi. Anda mungkin perlu menyesuaikan ukuran gambar agar hasilnya sesuai dengan kasus penggunaan Anda. Namun, ini adalah pendekatan yang fantastis untuk membuat visual yang lebih menarik dalam agen RBM Anda.
Semoga berhasil dan selamat melakukan coding!