डाइनैमिक रिच कार्ड बनाने के लिए, एचटीएमएल से इमेज बनाने का तरीका

आरसीएस बिज़नेस मैसेजिंग के लिए, रिच कार्ड सबसे असरदार और अलग-अलग तरह का कॉन्टेंट है. रिच कार्ड के साथ, आप किसी एक मैसेज में संबंधित जानकारी, जैसे कि कोई इमेज, वीडियो, शीर्षक, ब्यौरा, और चार सुझाए गए जवाब या कार्रवाइयां भेज सकते हैं.

स्टैंडअलोन रिच कार्ड और रिच कार्ड कैरसेल, ऐसी बेहतरीन सुविधाएं हैं जिनकी मदद से, उपयोगकर्ताओं को दिलचस्प अनुभव दिया जा सकता है. यह अच्छी तरह काम करता है, अगर शेयर की जाने वाली इमेज, कूपन या प्रॉडक्ट जैसी स्टैटिक इमेज हों. ऐसे में, अगर आपको उपयोगकर्ता की जानकारी के हिसाब से डाइनैमिक कॉन्टेंट भेजना है, जैसे कि बोर्डिंग पास?

इस लेख में, मैं आपको एचटीएमएल के साथ फ़्लाई पर इमेज बनाने और उन इमेज को अपने एजेंट के भेजे गए रिच कार्ड में जोड़ने का तरीका दिखाऊँगा. चलिए, एचटीएमएल में किसी इमेज को बदलने का तरीका देखकर शुरुआत करते हैं.

एचटीएमएल से इमेज पर

एचटीएमएल, टेक्स्ट और मीडिया को एक साथ मिलाकर इस्तेमाल करने के लिए बेहतरीन है. डेवलपर के तौर पर, अगर हमें किसी उपयोगकर्ता को बोर्डिंग पास, डेटा खर्च के चार्ट या किसी दूसरी तरह की उपयोगकर्ता-खास जानकारी भेजने के लिए कोई प्रॉडक्ट बनाना होता है, तो हम डाइनैमिक रूप से जनरेट किए गए एचटीएमएल का इस्तेमाल कर सकते हैं. आरसीएस बिज़नेस मैसेजिंग में, रिच कार्ड सिर्फ़ इमेज और वीडियो मीडिया टाइप के साथ काम करते हैं. इसलिए, डाइनैमिक कॉन्टेंट जनरेट करने के लिए एचटीएमएल का इस्तेमाल करने के लिए, सबसे पहले एचटीएमएल को इमेज में बदलना होगा.

सबसे अच्छी बात यह है कि ज़्यादातर आधुनिक प्रोग्रामिंग भाषाएं उन वेबपेजों या कॉम्पोनेंट के स्क्रीनशॉट लेने के लिए लाइब्रेरी के साथ काम करती हैं जो कम से कम बेसिक एचटीएमएल (उदाहरण के लिए, JEditorPane) को रेंडर कर सकते हैं. इसका इस्तेमाल इमेज जनरेट करने के लिए किया जा सकता है.

वेबपेजों की तस्वीरें लेने के लिए, एपीआई भी उपलब्ध हैं. उदाहरण के लिए, Google का page Insights API, किसी यूआरएल से अपने-आप स्क्रीनशॉट जनरेट कर सकता है.

Example:

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

इसके बाद, हम एचटीएमएल के साथ उपयोगकर्ता के हिसाब से बोर्डिंग पास जनरेट करने के लिए Node.js एक्सप्रेस ऐप्लिकेशन का इस्तेमाल करते हैं. इसके बाद, इसे इमेज में बदलते हैं, सार्वजनिक रूप से ऐक्सेस किए जा सकने वाले यूआरएल में अपलोड करते हैं, और उपयोगकर्ता को भेजने के लिए इमेज को रिच कार्ड में अटैच करते हैं.

डाइनैमिक बोर्डिंग पास बनाना

शुरुआत करने के लिए, हमें एचटीएमएल की ज़रूरत है, ताकि बोर्डिंग पास नीचे दी गई इमेज की तरह जनरेट किया जा सके.

ऐसा करने के कई तरीके हैं. हालांकि, हम Node.js ऐप्लिकेशन में एक यूआरएल एंडपॉइंट तय करने जा रहे हैं जिसे /getTicket?msisdn=[phone] कहा जाता है. यह EJS व्यू इंजन का इस्तेमाल करके, बोर्डिंग पास के लिए ज़रूरी एचटीएमएल को रेंडर करता है.

मान लें कि 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 टेंप्लेट नीचे दिए गए 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>

एचटीएमएल से इमेज बनाना

हमने बोर्डिंग पास बनाने के लिए एचटीएमएल तय किया है, लेकिन हमें इसे इमेज में बदलने का तरीका चाहिए.

रॉ एचटीएमएल और यूआरएल, दोनों को इमेज में बदलने के लिए कई ओपन सोर्स Node.js मॉड्यूल उपलब्ध हैं. इस उदाहरण के हिसाब से, हम node-webshot का इस्तेमाल करने जा रहे हैं. यह PanttomJS के बारे में जानकारी देने वाला एक लाइट रैपर है.

PhantomJS बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला ब्राउज़र है, जो इमेज में एचटीएमएल को रेंडर कर सकता है. फ़ैंटमजेएस रेंडरिंग के लिए WebKit का इस्तेमाल करता है. इसलिए, यह इमेज, सीएसएस, और JavaScript की मदद से मुश्किल पेजों को हैंडल कर सकता है.

नोड वेबशॉट (npm install --save node-webshot) इंस्टॉल करने के बाद, एचटीएमएल को इमेज में बदलना आसान है.

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

फ़ाइलों को सार्वजनिक तौर पर ऐक्सेस किए जा सकने वाले यूआरएल में स्टोर करना

वेबशॉट से जनरेट की गई इमेज का इस्तेमाल करने के लिए, हमें ऐसा यूआरएल चाहिए जिसे सार्वजनिक तौर पर ऐक्सेस किया जा सके. अगर इमेज किसी खास वेब सर्वर पर जनरेट की जा रही है, तो आपके पास फ़ाइल को किसी सार्वजनिक फ़ोल्डर में सेव करने का विकल्प है. हालांकि, हम इस फ़ाइल को 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);
            });
    });
}

इसके बाद, हमें 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) फ़ंक्शन तय करके, आखिरी चरण पूरा करें. यह पिछले चरण में बनाई गई इमेज का इस्तेमाल करके आरबीएम रिच कार्ड बनाता है और इसे उपयोगकर्ता को भेजता है.

आरबीएम के साथ रिच कार्ड भेजने के लिए, मैं पहले एजेंट सैंपल में मौजूद उसी 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);
}

आखिरी नतीजे का स्क्रीनशॉट नीचे दिया गया है.

रैप-अप और टीएल;डीआर

रिच कार्ड को ज़्यादा सुविधाजनक बनाने का सबसे आसान तरीका है, डाइनैमिक एचटीएमएल का इस्तेमाल करना और एचटीएमएल को इमेज में बदलना. ज़्यादातर आधुनिक प्रोग्रामिंग भाषाएं ऐसी लाइब्रेरी या एपीआई के साथ काम करती हैं जो कन्वर्ज़न पूरा करने में आपकी मदद करते हैं. आपको इमेज का साइज़ बदलने की ज़रूरत पड़ सकती है, ताकि आपके इस्तेमाल के उदाहरण के हिसाब से इमेज सही पाई जा सकें. हालांकि, यह आपके आरबीएम एजेंट में दिलचस्प विज़ुअल बनाने का एक शानदार तरीका है.

शुभकामनाएं और कोडिंग करें!