วิธีสร้างรูปภาพจาก HTML เพื่อสร้าง Rich Card แบบไดนามิก

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

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

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

จาก HTML ไปยังรูปภาพ

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

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

ในการเริ่มต้น เราต้องใช้ 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 ลงในรูปภาพ สำหรับตัวอย่างนี้ เราจะใช้ เว็บสแนปชอตของโหนด ซึ่งเป็น 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 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);
            });
    });
}

ต่อไป เราจะต้องแทนที่ 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
      });
});

การส่ง Rich Card พร้อมรูปภาพ

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

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

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

สรุปและ สรุป

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

ขอให้โชคดีและสนุกกับการเขียนโค้ด!