نحوه ایجاد تصاویر از HTML برای ایجاد کارت غنی پویا

یکی از قدرتمندترین و همه کاره‌ترین انواع محتوا در پیام‌رسانی تجاری RCS، کارت غنی است. با یک کارت غنی، می‌توانید تکه‌هایی از اطلاعات مرتبط را در یک پیام ارسال کنید، از جمله یک تصویر یا ویدیو، عنوان، توضیحات، و حداکثر چهار پاسخ یا اقدام پیشنهادی.

کارت های غنی مستقل و چرخ و فلک های کارت غنی ویژگی های قدرتمندی هستند که می توانند به شما در ایجاد تجربه های جذاب برای کاربران کمک کنند. اینها تا زمانی که تصاویری که باید به اشتراک بگذارید، تصاویر ثابتی مانند یک کوپن یا محصول باشند، عالی کار می کنند. اما اگر نیاز به ارسال محتوای پویا بر اساس اطلاعات کاربر، مانند کارت پرواز داشته باشید، چه اتفاقی می‌افتد؟

در این مقاله، من به شما نشان خواهم داد که چگونه می توانید تصاویر را با HTML ایجاد کنید و آن تصاویر را در کارت های غنی که نماینده شما ارسال می کند، جاسازی کنید. بیایید با بررسی نحوه تبدیل HTML به تصویر شروع کنیم.

از HTML تا تصویر

HTML برای چیدمان ترکیبی از متن و رسانه عالی است. به‌عنوان توسعه‌دهندگان، اگر به ساخت محصولی نیاز داشته باشیم تا برای کاربر چیزی مانند کارت پرواز، نمودار مصرف داده یا هر نوع اطلاعات خاص کاربر بفرستیم، احتمالاً HTML تولید شده به صورت پویا ابزاری است که از آن استفاده خواهیم کرد. در پیام‌رسانی تجاری RCS، کارت‌های غنی فقط از انواع رسانه تصویری و ویدیویی پشتیبانی می‌کنند، بنابراین برای استفاده از قدرت HTML برای تولید محتوای پویا، ابتدا باید HTML به تصویر تبدیل شود.

خوشبختانه، بیشتر زبان‌های برنامه‌نویسی مدرن از کتابخانه‌هایی برای گرفتن اسکرین‌شات از صفحات وب یا اجزایی پشتیبانی می‌کنند که می‌توانند حداقل HTML اولیه را ارائه دهند (مانند JEditorPane )، که می‌توانید از آن برای تولید یک تصویر استفاده کنید.

همچنین APIهایی برای عکس گرفتن از صفحات وب وجود دارد. به عنوان مثال، Google's Page Insights API می تواند به طور خودکار تصاویری از یک 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 وجود دارد که شماره تلفن کاربر را می گیرد و یک شی بلیط را برمی گرداند که حاوی اطلاعاتی مانند زمان حرکت، صندلی، نوع بلیط، مکان شروع و غیره است.

در مسیریاب برنامه اکسپرس، نقطه پایانی 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 Rail تعریف می کند.

<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 استفاده می‌کنیم که یک پوشش سبک در اطراف PhantomJS است.

PhantomJS یک مرورگر بدون هد قابل اسکریپت است که می تواند HTML را به تصاویر تبدیل کند. از آنجایی که PhantomJS برای رندر به WebKit متکی است، می تواند صفحات پیچیده با تصاویر، CSS و جاوا اسکریپت را مدیریت کند.

پس از نصب node 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 قابل دسترسی برای عموم

برای استفاده از تصویر ایجاد شده توسط webshot، به یک 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) تکمیل کنیم که با استفاده از تصویر ایجاد شده در مرحله قبل، یک کارت غنی از RBM ایجاد می کند و آن را برای کاربر ارسال می کند.

برای ارسال کارت غنی با RBM، از همان Node.js SDK موجود در First Agent Sample استفاده می‌کنم.

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 هایی پشتیبانی می کنند که به شما در تکمیل تبدیل کمک می کنند. ممکن است لازم باشد با اندازه تصویر بازی کنید تا همه چیز برای مورد استفاده شما درست به نظر برسد، اما این یک رویکرد فوق العاده برای ایجاد تصاویر متقاعد کننده تر در عوامل RBM شما است.

موفق باشید و کد نویسی شاد!