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

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

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

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

एचटीएमएल से इमेज तक

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

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

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

उदाहरण:

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 टेंप्लेट, 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 मॉड्यूल उपलब्ध हैं और यूआरएल को इमेज में बदल दिया जाता है. इस उदाहरण के लिए, हम डाइग्नोस्टिक टूल का इस्तेमाल नोड-वेबशॉट, जो PhantomJS के चारों ओर एक लाइट रैपर है.

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

इमेज के साथ रिच कार्ड भेजना

आपका काम करीब-करीब पूरा हो गया है. 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);
}

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

रैप-अप और खास जानकारी

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

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