Bản cập nhật: Kiểm tra ghi chú phát hành để biết thông tin về các tính năng mới và bản cập nhật sản phẩm.

Trang này được dịch bởi Cloud Translation API.

Cách tạo hình ảnh từ HTML để tạo thẻ thông tin linh động

Một trong những loại nội dung hiệu quả và linh hoạt nhất trong RCS Business Nhắn tin là thẻ thông tin chi tiết. Với thẻ thông tin chi tiết, bạn có thể gửi các phần thông tin có liên quan trong một thẻ thông báo, bao gồm hình ảnh hoặc video, tiêu đề, nội dung mô tả và tối đa bốn câu trả lời hoặc hành động đề xuất.

Thẻ thông tin chi tiết độc lập và băng chuyền thẻ thông tin là các tính năng mạnh mẽ có thể giúp bạn tạo trải nghiệm hấp dẫn cho người dùng. Các định dạng này hoạt động hiệu quả miễn là hình ảnh bạn cần chia sẻ là hình ảnh tĩnh như phiếu giảm giá hoặc sản phẩm. Nhưng gì xảy ra nếu bạn cần gửi nội dung động dựa trên thông tin về người dùng, như một thẻ lên máy bay?

Trong tài liệu này, tôi sẽ hướng dẫn bạn cách tạo nhanh hình ảnh bằng HTML và đã nhúng những hình ảnh đó vào thẻ thông tin chi tiết mà nhân viên hỗ trợ của bạn gửi. Xem cách chuyển đổi Tiếp theo, HTML vào hình ảnh.

Từ HTML đến hình ảnh

HTML là công cụ tuyệt vời để trình bày sự kết hợp giữa văn bản và nội dung đa phương tiện. Là nhà phát triển, nếu chúng tôi cần tạo một sản phẩm để gửi cho người dùng thứ gì đó như thẻ lên máy bay, dữ liệu biểu đồ mức sử dụng hoặc bất kỳ loại thông tin cụ thể nào khác về người dùng, linh động có thể là công cụ mà chúng ta sẽ sử dụng. Trong RCS Business Messaging, chỉ hỗ trợ loại phương tiện hình ảnh và video, vì vậy để sử dụng sức mạnh của HTML để tạo nội dung động thì trước tiên HTML cần được được chuyển đổi thành hình ảnh.

Thật may là hầu hết các ngôn ngữ lập trình hiện đại đều hỗ trợ các thư viện để ảnh chụp màn hình của các trang web hoặc thành phần có thể hiển thị ít nhất một HTML cơ bản (cho ví dụ: JEditorPane), mà bạn có thể dùng để tạo hình ảnh.

Ngoài ra còn có các API để chụp ảnh trang web. Ví dụ: API Thông tin chi tiết về trang của Google có thể tự động tạo ảnh chụp màn hình từ URL.

Ví dụ:

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

Theo sau, chúng tôi sử dụng ứng dụng Node.js express để tạo một ứng dụng dành riêng cho người dùng Thẻ lên máy bay bằng HTML, chuyển đổi thẻ thành hình ảnh, tải thẻ lên một URL có thể truy cập, rồi đính kèm hình ảnh trong thẻ thông tin để gửi cho người dùng.

Tạo thẻ lên máy bay linh động

Để bắt đầu, chúng tôi cần HTML để tạo thẻ lên máy bay như sau hình ảnh.

Mẫu thẻ lên máy bay

Có nhiều cách để thực hiện việc này, nhưng chúng ta sẽ xác định điểm cuối URL trong ứng dụng Node.js có tên là /getTicket?msisdn=+12223334444. Ứng dụng này sẽ hiển thị HTML chúng tôi cần về thẻ lên máy bay bằng công cụ xem EJS.

Giả sử có một hàm tên là getUserTicket lấy thông tin số điện thoại và trả về đối tượng vé chứa thông tin như thời gian khởi hành, chỗ ngồi, loại vé và vị trí xuất phát.

Trong bộ định tuyến của ứng dụng express, chúng ta xác định điểm cuối getTicket, gọi phương thức getUserTicket và chuyển vé vào mẫu 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});
});

Mẫu EJS vé xác định HTML sau để hiển thị Bonjour mẫu Vé tàu.

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

Tạo hình ảnh từ HTML

Chúng tôi đã xác định HTML để tạo thẻ lên máy bay nhưng chúng tôi cần một cách để hãy chuyển đổi biểu đồ đó thành hình ảnh.

Có nhiều mô-đun Node.js nguồn mở có sẵn để chuyển đổi cả HTML thô và URL vào hình ảnh. Với mục đích của ví dụ này, chúng tôi sẽ sử dụng ảnh chụp web nút, là một trình bao bọc sáng xung quanh PhantomJS.

PhantomJS là một trình duyệt không có giao diện người dùng có thể kết xuất HTML thành hình ảnh. Vì PhantomJS dựa vào WebKit để kết xuất nên nó có thể xử lý các trang phức tạp bằng hình ảnh, CSS và JavaScript.

Sau khi cài đặt ảnh chụp web của nút (npm install --save node-webshot), chuyển đổi HTML cho một hình ảnh phải đơn giản.

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

Lưu trữ tệp vào một URL có thể truy cập công khai

Để sử dụng hình ảnh được tạo bởi ảnh chụp web, chúng tôi cần một hình ảnh có thể truy cập công khai URL. Nếu bạn đang tạo hình ảnh trên một máy chủ web chuyên dụng, bạn có thể lưu tệp vào thư mục công khai, nhưng trong ví dụ này, chúng ta sẽ tải lên tệp vào Google Cloud Storage.

Hàm sau đây lấy thông tin vị trí của hình ảnh tại địa phương rồi tải hình ảnh đó lên Google Cloud Storage, trả về đường liên kết đến nội dung nghe nhìn mới tạo.

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

Tiếp theo, chúng ta cần thay thế TODO được nhận xét ở trước bằng một lệnh gọi để sử dụng hàm uploadImage này.

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

Gửi thẻ thông tin chi tiết có hình ảnh

Chúng ta sắp hoàn tất rồi. Hoàn thành bước cuối cùng bằng cách xác định Hàm sendBoardingPass(imageUrl, msisdn) tạo thẻ thông tin chi tiết RBM bằng cách sử dụng hình ảnh được tạo ở bước trước đó rồi gửi hình ảnh đó cho người dùng.

Để gửi thẻ thông tin chi tiết bằng RBM, tôi sử dụng cùng một SDK Node.js có sẵn trong Mẫu dành cho nhân viên hỗ trợ đầu tiên.

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

Sau đây là ảnh chụp màn hình của kết quả cuối cùng.

Hình ảnh linh hoạt trong thẻ thông tin chi tiết

Tổng kết và tóm tắt

Cách đơn giản nhất để làm cho thẻ thông tin linh hoạt hơn là sử dụng HTML động và chuyển đổi HTML thành hình ảnh. Hầu hết các ngôn ngữ lập trình hiện đại đều hỗ trợ hoặc API sẽ giúp bạn hoàn tất chuyển đổi. Bạn có thể phải thử thay đổi kích thước hình ảnh để có được thứ phù hợp với trường hợp sử dụng của bạn, nhưng đó là một phương pháp tuyệt vời để tạo hình ảnh hấp dẫn hơn trong Nhân viên hỗ trợ RBM.

Chúc bạn may mắn và lập trình vui vẻ!

Cách tạo hình ảnh từ HTML để tạo thẻ thông tin linh động Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.