Cara membuat gambar dari HTML untuk pembuatan kartu informasi dinamis

Salah satu jenis konten yang paling canggih dan serbaguna dalam RCS Business Fitur pesan adalah kartu informasi. Dengan kartu informasi, Anda dapat mengirim potongan informasi yang berkaitan dalam satu pesan, termasuk gambar atau video, judul, deskripsi, dan maksimal empat saran balasan atau tindakan.

Kartu informasi mandiri dan carousel kartu informasi adalah fitur canggih yang dapat membantu Anda menciptakan pengalaman yang menarik bagi pengguna. Semua itu akan berfungsi dengan baik, asalkan gambar yang perlu Anda bagikan adalah gambar statis seperti kupon atau produk. Tapi apa yang terjadi jika Anda perlu mengirim konten dinamis berdasarkan informasi tentang pengguna, seperti boarding pass?

Dalam dokumen ini, saya akan menunjukkan cara membuat gambar dengan cepat menggunakan HTML dan menyematkan gambar tersebut dalam kartu informasi yang dikirimkan agen Anda. Lihat cara mengonversi HTML menjadi gambar.

Dari HTML ke gambar

HTML sangat bagus untuk menata kombinasi teks dan media. Sebagai developer, jika kita perlu membuat produk untuk mengirimkan sesuatu seperti {i>boarding pass<i}, data ke pengguna diagram penggunaan, atau jenis informasi khusus pengguna lainnya, secara dinamis HTML yang dihasilkan adalah alat yang akan kita gunakan. Di RCS Business Messaging, lengkap kartu hanya mendukung jenis media gambar dan video, jadi untuk menggunakan kekuatan HTML untuk pembuatan konten dinamis, HTML terlebih dahulu harus dikonversi menjadi gambar.

Untungnya, sebagian besar bahasa pemrograman modern mendukung perpustakaan untuk mengambil tangkapan layar laman web atau komponen yang dapat merender setidaknya HTML dasar (untuk contoh, JEditorPane), yang dapat Anda gunakan untuk membuat gambar.

Ada juga API yang tersedia untuk mengambil gambar halaman web. Misalnya, Page Insights API Google dapat membuat screenshot dari URL secara otomatis.

Contoh:

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

Selanjutnya, kita menggunakan aplikasi Node.js express untuk menghasilkan dengan HTML, mengubahnya menjadi gambar, mengunggahnya ke yang dapat diakses, lalu lampirkan gambar dalam kartu informasi untuk dikirim kepada pengguna.

Membuat boarding pass dinamis

Untuk memulai, kita memerlukan HTML untuk membuat boarding pass seperti berikut gambar.

Contoh boarding pass

Ada banyak cara untuk melakukannya, tetapi kita akan menentukan endpoint URL di aplikasi Node.js yang disebut /getTicket?msisdn=+12223334444, yang merender HTML kita perlukan untuk boarding pass menggunakan mesin tampilan EJS.

Asumsikan ada fungsi bernama getUserTicket yang menggunakan nomor telepon dan mengembalikan objek tiket yang berisi informasi seperti waktu keberangkatan, tempat duduk, jenis tiket, dan lokasi awal.

Dalam router aplikasi ekspres, kita menentukan endpoint getTicket, memanggil getUserTicket, dan teruskan 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 Bonjour Tiket kereta.

<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

Kami telah menentukan HTML untuk membuat boarding pass, tetapi kami memerlukan cara untuk mengubahnya menjadi gambar.

Ada banyak modul Node.js open source yang tersedia untuk mengonversi baik HTML mentah dan URL menjadi gambar. Untuk tujuan contoh ini, kita akan menggunakan node-webshot, yang merupakan wrapper ringan di sekitar PhantomJS.

PhantomJS adalah browser headless yang dapat menjalankan skrip yang dapat merender HTML menjadi gambar. Karena PhantomJS bergantung pada WebKit untuk rendering, PhantomJS dapat menangani laman yang kompleks dengan gambar, CSS, dan JavaScript.

Setelah menginstal webshot node (npm install --save node-webshot), mengonversi Menggunakan HTML ke gambar dengan mudah.

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, kita memerlukan . Jika Anda membuat gambar di server web khusus, Anda mungkin dapat untuk menyimpan file ke folder publik, tetapi dalam contoh ini, kita akan mengunggah file ke Google Cloud Storage.

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

Selanjutnya, kita perlu mengganti TODO yang diberi komentar dari 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 yang berisi gambar

Kita hampir selesai. Selesaikan langkah terakhir dengan menentukan Fungsi sendBoardingPass(imageUrl, msisdn), yang membuat kartu informasi RBM menggunakan gambar yang dibuat di langkah sebelumnya dan mengirimkannya ke pengguna.

Untuk mengirim kartu informasi dengan RBM, saya menggunakan Node.js SDK yang sama 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);
}

Berikut adalah screenshot hasil akhir.

Gambar dinamis dalam kartu informasi

Penutup & ringkasan

Cara termudah untuk membuat kartu informasi lebih fleksibel adalah dengan menggunakan HTML dinamis dan mengubah HTML menjadi gambar. Sebagian besar bahasa pemrograman modern mendukung library atau API yang akan membantu Anda menyelesaikan konversi. Anda mungkin perlu mengutak-atik ukuran gambar agar terlihat sesuai dengan {i>use case<i} Anda, tapi itu adalah pendekatan yang fantastis untuk membuat visualisasi yang lebih menarik dalam Agen RBM.

Semoga berhasil dan selamat membuat kode!

Cara membuat gambar dari HTML untuk pembuatan kartu informasi dinamis Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.