ডায়নামিক রিচ কার্ড তৈরির জন্য HTML থেকে কীভাবে ছবি তৈরি করবেন

RCS বিজনেস মেসেজিং-এর সবচেয়ে শক্তিশালী এবং বহুমুখী কন্টেন্টের মধ্যে একটি হল রিচ কার্ড । একটি সমৃদ্ধ কার্ডের মাধ্যমে, আপনি একটি ছবি বা ভিডিও, শিরোনাম, বিবরণ এবং চারটি পর্যন্ত প্রস্তাবিত উত্তর বা ক্রিয়া সহ একটি একক বার্তায় সম্পর্কিত তথ্যের অংশগুলি পাঠাতে পারেন৷

স্বতন্ত্র রিচ কার্ড এবং রিচ কার্ড ক্যারোসেলগুলি শক্তিশালী বৈশিষ্ট্য যা আপনাকে ব্যবহারকারীদের জন্য আকর্ষক অভিজ্ঞতা তৈরি করতে সাহায্য করতে পারে। কুপন বা পণ্যের মতো স্ট্যাটিক ইমেজগুলিকে আপনার শেয়ার করতে হবে ততক্ষণ পর্যন্ত এইগুলি দুর্দান্ত কাজ করে৷ কিন্তু বোর্ডিং পাসের মতো ব্যবহারকারীর তথ্যের উপর ভিত্তি করে ডায়নামিক কন্টেন্ট পাঠাতে হলে কী হবে?

এই নিবন্ধে, আমি আপনাকে দেখাব কিভাবে এইচটিএমএল দিয়ে ফ্লাইতে ছবি তৈরি করা যায় এবং সেই ছবিগুলিকে আপনার এজেন্ট যে রিচ কার্ড পাঠায় তার মধ্যে এম্বেড করতে হয়। চলুন শুরু করা যাক কিভাবে HTML কে ইমেজে রূপান্তর করা যায়।

এইচটিএমএল থেকে ইমেজ পর্যন্ত

এইচটিএমএল পাঠ্য এবং মিডিয়ার সমন্বয় তৈরি করার জন্য দুর্দান্ত। বিকাশকারী হিসাবে, যদি আমাদের একটি পণ্য তৈরি করতে হয় যাতে কোনও ব্যবহারকারীকে বোর্ডিং পাস, ডেটা ব্যবহারের চার্ট বা অন্য কোনও ধরণের ব্যবহারকারী-নির্দিষ্ট তথ্য পাঠাতে হয়, তবে গতিশীলভাবে জেনারেট করা HTML সম্ভবত আমরা ব্যবহার করব এমন সরঞ্জাম। RCS বিজনেস মেসেজিং-এ, রিচ কার্ড শুধুমাত্র ইমেজ এবং ভিডিও মিডিয়ার ধরন সমর্থন করে, তাই ডায়নামিক কন্টেন্ট জেনারেশনের জন্য HTML-এর শক্তিকে কাজে লাগানোর জন্য প্রথমে HTML-কে একটি ছবিতে রূপান্তর করতে হবে।

সৌভাগ্যবশত, বেশিরভাগ আধুনিক প্রোগ্রামিং ভাষাগুলি ওয়েবপেজ বা উপাদানগুলির স্ক্রিনশট নেওয়ার জন্য লাইব্রেরিগুলিকে সমর্থন করে যা কমপক্ষে মৌলিক HTML (যেমন JEditorPane ) রেন্ডার করতে পারে, যা আপনি একটি চিত্র তৈরি করতে ব্যবহার করতে পারেন।

ওয়েবপেজের ছবি তোলার জন্য এপিআইও রয়েছে। উদাহরণস্বরূপ, Google এর পৃষ্ঠা অন্তর্দৃষ্টি API স্বয়ংক্রিয়ভাবে একটি URL থেকে স্ক্রিনশট তৈরি করতে পারে।

উদাহরণ:

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

এর পরে, আমরা একটি Node.js এক্সপ্রেস অ্যাপ ব্যবহার করে HTML-এর সাথে একটি ব্যবহারকারী-নির্দিষ্ট বোর্ডিং পাস তৈরি করি, এটিকে একটি ছবিতে রূপান্তর করি, এটি একটি সর্বজনীনভাবে অ্যাক্সেসযোগ্য URL-এ আপলোড করি এবং তারপরে একটি রিচ কার্ডের মধ্যে ছবিটি সংযুক্ত করি ব্যবহারকারী

একটি গতিশীল বোর্ডিং পাস তৈরি করা

শুরু করার জন্য, নীচের ছবির মতো একটি বোর্ডিং পাস তৈরি করতে আমাদের HTML প্রয়োজন।

এটি সম্পন্ন করার অনেক উপায় আছে, কিন্তু আমরা /getTicket?msisdn=[phone] নামক একটি Node.js অ্যাপে একটি URL এন্ডপয়েন্ট নির্ধারণ করতে যাচ্ছি, যা EJS ভিউ ইঞ্জিন ব্যবহার করে বোর্ডিং পাসের জন্য আমাদের প্রয়োজনীয় HTML রেন্ডার করে।

ধরা যাক getUserTicket নামে একটি ফাংশন রয়েছে যা ব্যবহারকারীর ফোন নম্বর নেয় এবং একটি টিকিট অবজেক্ট ফেরত দেয় যাতে প্রস্থানের সময়, আসন, টিকিটের ধরণ, শুরুর অবস্থান ইত্যাদির মতো তথ্য থাকে।

এক্সপ্রেস অ্যাপের রাউটারের মধ্যে, আমরা 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 টেমপ্লেট নমুনা Bonjour Rail টিকিট রেন্ডার করতে নিম্নলিখিত HTML সংজ্ঞায়িত করে।

<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 মডিউল উপলব্ধ। এই উদাহরণের উদ্দেশ্যে, আমরা node-webshot ব্যবহার করতে যাচ্ছি, যা PhantomJS এর ​​চারপাশে একটি হালকা মোড়ক।

ফ্যান্টমজেএস একটি স্ক্রিপ্টেবল হেডলেস ব্রাউজার যা এইচটিএমএলকে ইমেজে রেন্ডার করতে পারে। যেহেতু ফ্যান্টমজেএস রেন্ডারিংয়ের জন্য ওয়েবকিটের উপর নির্ভর করে, তাই এটি চিত্র, সিএসএস এবং জাভাস্ক্রিপ্ট সহ জটিল পৃষ্ঠাগুলি পরিচালনা করতে পারে।

নোড ওয়েবশট ইনস্টল করার পর ( 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 ক্লাউড স্টোরেজে আপলোড করতে যাচ্ছি৷

নীচের ফাংশনটি একটি স্থানীয় চিত্র অবস্থান নেয় এবং এটিকে Google ক্লাউড স্টোরেজে আপলোড করে, নতুন তৈরি মিডিয়া লিঙ্কটি ফিরিয়ে দেয়।

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

এর পরে, আমাদের এই uploadImage ফাংশন ব্যবহার করার জন্য একটি কল দিয়ে আগে থেকে মন্তব্য করা TODO প্রতিস্থাপন করতে হবে।

// 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 সমৃদ্ধ কার্ড তৈরি করে এবং ব্যবহারকারীকে পাঠায়।

RBM দিয়ে রিচ কার্ড পাঠাতে, আমি প্রথম এজেন্ট স্যাম্পলে উপলব্ধ একই Node.js SDK ব্যবহার করি।

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

রিচ কার্ডগুলিকে আরও বহুমুখী করার সহজ উপায় হল ডায়নামিক এইচটিএমএল ব্যবহার করা এবং এইচটিএমএলকে ইমেজে রূপান্তর করা। বেশিরভাগ আধুনিক প্রোগ্রামিং ভাষা লাইব্রেরি বা API সমর্থন করে যা আপনাকে রূপান্তর সম্পূর্ণ করতে সাহায্য করবে। আপনার ব্যবহারের ক্ষেত্রে জিনিসগুলি সঠিকভাবে দেখতে আপনাকে চিত্রের আকারের সাথে খেলতে হতে পারে, তবে এটি আপনার RBM এজেন্টদের মধ্যে আরও আকর্ষণীয় ভিজ্যুয়াল তৈরি করার জন্য একটি দুর্দান্ত পদ্ধতি।

শুভকামনা এবং সুখী কোডিং!