วิธีสร้างรูปภาพจาก HTML สําหรับการสร้างการ์ดริชมีเดียแบบไดนามิก

หนึ่งในเนื้อหาที่มีประสิทธิภาพและอเนกประสงค์มากที่สุดในการรับส่งข้อความทางธุรกิจแบบ RCS คือการ์ดสื่อสมบูรณ์ คุณสามารถใช้การ์ดริชมีเดียส่งข้อมูลที่เกี่ยวข้องจํานวนมากในข้อความเดียว รวมถึงรูปภาพหรือวิดีโอ ชื่อ คําอธิบาย และการตอบกลับหรือการดําเนินการที่แนะนําได้สูงสุด 4 รายการ

การ์ดริชมีเดียแบบสแตนด์อโลนและภาพสไลด์แบบริชมีเดียเป็นฟีเจอร์ที่มีประสิทธิภาพซึ่งจะช่วยให้คุณสร้างประสบการณ์การใช้งานที่น่าสนใจสําหรับผู้ใช้ รูปภาพเหล่านี้จะทํางานได้นานตราบใดที่รูปภาพที่คุณต้องการแชร์คือภาพนิ่ง เช่น คูปองหรือผลิตภัณฑ์ แต่จะเกิดอะไรขึ้นหากคุณต้องส่งเนื้อหาแบบไดนามิกโดยอิงตามข้อมูลเกี่ยวกับผู้ใช้ เช่น บอร์ดดิ้งพาส

ในบทความนี้ เราจะแสดงวิธีสร้างรูปภาพในทันทีด้วย HTML และฝังรูปภาพเหล่านั้นลงในการ์ดสื่อสมบูรณ์ที่ตัวแทนของคุณส่ง เรามาเริ่มจากการแปลง HTML เป็นรูปภาพ

จาก HTML เป็นรูปภาพ

HTML เหมาะสําหรับการวางข้อความและสื่อต่างๆ ในฐานะนักพัฒนาซอฟต์แวร์ หากเราต้องสร้างผลิตภัณฑ์เพื่อส่งผู้ใช้ เช่น บอร์ดดิ้งพาส แผนภูมิการใช้ข้อมูล หรือข้อมูลเฉพาะของผู้ใช้ประเภทอื่นๆ HTML ที่สร้างขึ้นแบบไดนามิกน่าจะเป็นเครื่องมือที่เราจะใช้ ในการรับส่งข้อความทางธุรกิจแบบ RCS การ์ดริชมีเดียรองรับประเภทสื่อรูปภาพและวิดีโอเท่านั้น ดังนั้นเพื่อใช้ประโยชน์จาก HTML ในการสร้างเนื้อหาแบบไดนามิก จะต้องแปลง HTML เป็นรูปภาพก่อน

โชคดีที่ภาษาโปรแกรมสมัยใหม่ส่วนใหญ่สนับสนุนไลบรารีสําหรับการถ่ายภาพหน้าจอของหน้าเว็บหรือคอมโพเนนต์ที่แสดง HTML พื้นฐานได้เป็นอย่างน้อย (เช่น JEditorPane ) ซึ่งคุณสามารถใช้ในการสร้างอิมเมจได้

นอกจากนี้ยังมี API ที่ช่วยในการถ่ายภาพหน้าเว็บ ตัวอย่างเช่น Page Insights API ของ Google จะสร้างภาพหน้าจอจาก URL โดยอัตโนมัติได้

ตัวอย่าง

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

หลังจากนี้เราจะใช้แอป Node.js express เพื่อสร้างบอร์ดดิ้งพาสเฉพาะผู้ใช้ที่มี HTML แปลงเป็นรูปภาพ อัปโหลดไปยัง URL ที่สามารถเข้าถึงได้แบบสาธารณะ แล้วแนบรูปภาพภายในการ์ดสื่อสมบูรณ์เพื่อส่งให้ผู้ใช้

การสร้างบอร์ดดิ้งพาสแบบไดนามิก

ในการเริ่มต้น เราต้องใช้ HTML เพื่อสร้างบอร์ดดิ้งพาสอย่างเช่นรูปภาพด้านล่าง

การดําเนินการดังกล่าวมีหลายวิธี แต่เราจะกําหนดปลายทาง URL ในแอป Node.js ที่ชื่อว่า /getTicket?msisdn=[phone] ซึ่งจะแสดงผล HTML ที่จําเป็นสําหรับบอร์ดดิ้งพาสโดยใช้เครื่องมือมุมมอง EJS

สมมติว่ามีฟังก์ชันชื่อ getUserTicket ที่ใช้หมายเลขโทรศัพท์ของผู้ใช้และส่งคืนออบเจ็กต์ตั๋วที่มีข้อมูล เช่น เวลาออกเดินทาง ที่นั่ง ประเภทตั๋ว สถานที่เริ่มต้น ฯลฯ

ภายในเราเตอร์ของแอป Express เรากําหนดปลายทาง getTicket เรียกใช้ฟังก์ชัน getUserTicket และส่งผ่านตั๋วไปยังเทมเพลต 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});
});

เทมเพลตตั๋ว EJS กําหนด HTML ต่อไปนี้เพื่อแสดงตัวอย่างตั๋วรถไฟ Bonjour

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

การสร้างรูปภาพจาก HTML

เราได้กําหนด HTML เพื่อสร้างบอร์ดดิ้งพาส แต่เราต้องหาวิธีแปลงเนื้อหาดังกล่าวเป็นรูปภาพ

มีโมดูล Node.js แบบโอเพนซอร์สมากมายที่พร้อมแปลงทั้ง HTML ดิบและ URL เป็นรูปภาพ สําหรับจุดประสงค์ของตัวอย่างนี้ เราจะใช้ node-webshot ซึ่งเป็น Wrapper น้ําหนักรอบ PhantomJS

PhantomJS เป็นเบราว์เซอร์แบบไม่มีสคริปต์ที่สามารถแสดงผล HTML เป็นรูปภาพได้ เนื่องจาก PhantomJS อาศัย WebKit ในการแสดงผล จึงสามารถจัดการหน้าที่ซับซ้อนโดยใช้รูปภาพ, CSS และ JavaScript

หลังจากติดตั้ง webshot ของโหนด (npm install --save node-webshot) แล้ว การแปลง HTML ให้เป็นอิมเมจจะไม่ซับซ้อน

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

การจัดเก็บไฟล์เป็น URL ที่เข้าถึงได้แบบสาธารณะ

เราต้องใช้ URL ที่เข้าถึงได้แบบสาธารณะ เพื่อใช้รูปภาพที่สร้างโดยภาพจากเว็บ หากสร้างภาพในเว็บเซิร์ฟเวอร์เฉพาะ คุณอาจบันทึกไฟล์ไว้ในโฟลเดอร์สาธารณะได้ง่ายๆ แต่ในตัวอย่างนี้ เราจะอัปโหลดไฟล์ไว้ใน Google Cloud Storage

ฟังก์ชันด้านล่างใช้ตําแหน่งที่ตั้งของรูปภาพในเครื่องและอัปโหลดไปยัง Google Cloud Storage ซึ่งจะแสดงลิงก์สื่อที่สร้างขึ้นใหม่

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

ขั้นต่อไป เราจะแทนที่ TODO ตามความคิดเห็นก่อนหน้านี้ด้วยการโทรเพื่อใช้ฟังก์ชัน uploadImage นี้

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

การส่งการ์ดริชมีเดียพร้อมด้วยรูปภาพ

ใกล้เสร็จแล้ว มาทําขั้นตอนสุดท้ายให้เสร็จโดยกําหนดฟังก์ชัน sendBoardingPass(imageUrl, msisdn) ซึ่งจะสร้างการ์ด RBM Rich โดยใช้รูปภาพที่สร้างขึ้นในขั้นตอนก่อนหน้าแล้วส่งให้ผู้ใช้

ในการส่งการ์ดสื่อสมบูรณ์ด้วย RBM ฉันใช้ SDK ของ Node.js เดียวกันกับที่มีอยู่ในตัวอย่าง 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);
}

ด้านล่างนี้เป็นภาพหน้าจอของผลลัพธ์สุดท้าย

สรุปและ TL;DR

วิธีที่ง่ายที่สุดในการทําให้การ์ดสื่อสมบูรณ์มีประโยชน์มากขึ้นคือใช้ประโยชน์จาก HTML แบบไดนามิกและแปลง HTML เป็นรูปภาพ ภาษาโปรแกรมสมัยใหม่ส่วนใหญ่สนับสนุนไลบรารีหรือ API ที่จะช่วยคุณในการทํา Conversion ให้เสร็จสมบูรณ์ คุณอาจต้องลองปรับขนาดภาพเพื่อให้ได้สิ่งต่างๆ ที่เหมาะกับกรณีการใช้งานของคุณ แต่ภาพนี้เป็นวิธีการที่ยอดเยี่ยมในการสร้างภาพที่ดึงดูดใจยิ่งขึ้นภายในตัวแทน RBM

ขอให้สนุกและเขียนโค้ดให้สนุกนะ