كيفية إنشاء صور من HTML لإنشاء بطاقة تفاعلية ديناميكية

أحد أنواع المحتوى الأكثر فعالية وتنوّعًا في خدمات الاتصالات التفاعلية (RCS) المراسلة هي بطاقة تفاعلية. باستخدام البطاقة التفاعلية، يمكنك إرسال مجموعات من المعلومات ذات الصلة في ملف رسالة، بما في ذلك صورة أو فيديو والعنوان والوصف وما يصل إلى أربع ردود أو إجراءات مقترحة.

إنّ البطاقات التفاعلية المستقلة ومنصّات العرض بعناصر متغيّرة للبطاقات التفاعلية هي ميزات فعّالة يمكن أن في إنشاء تجارب جذابة للمستخدمين. هذه تعمل بشكل رائع طالما أن الصور التي تحتاج إلى مشاركتها هي صور ثابتة مثل قسيمة أو منتج. ولكن ماذا: إذا كنت بحاجة إلى إرسال محتوى ديناميكي يستند إلى معلومات حول المستخدم، مثل بطاقة صعود الطائرة؟

في هذا المستند، سأوضح لك كيفية إنشاء صور بكل سهولة باستخدام ملفات HTML يمكنك تضمين هذه الصور في البطاقات التفاعلية التي يرسلها الوكيل. الاطّلاع على كيفية التحويل HTML إلى صورة تالية.

من HTML إلى الصورة

يعتبر HTML رائعًا لتنسيق تركيبات النص والوسائط. كمطورين، إذا نحتاج إلى إنشاء منتج لنرسل إلى المستخدم شيئًا مثل بطاقة صعود الطائرة، أو مخطط البيانات أو أي نوع آخر من المعلومات الخاصة بالمستخدم، التي تم إنشاؤها على الأرجح هي الأداة التي سنستخدمها. في ميزة "مراسلة الأنشطة التجارية من خلال RCS"، تعتمد البطاقات على أنواع وسائط الصور والفيديو فقط، لذا لاستخدام قوة HTML لإنشاء المحتوى الديناميكي، يجب تحديد HTML أولاً يتم تحويلها إلى صورة.

لحسن الحظ، تدعم معظم لغات البرمجة الحديثة مكتبات لقطات شاشة لصفحات الويب أو المكونات التي يمكنها عرض HTML أساسي على الأقل (من أجل JEditorPane) التي يمكنك استخدامها لإنشاء صورة.

هناك أيضًا واجهات برمجة تطبيقات متوفرة لالتقاط صور لصفحات الويب. على سبيل المثال: واجهة برمجة تطبيقات إحصاءات الصفحة من Google إنشاء لقطات شاشة تلقائيًا من عنوان 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 تذكرة قطار.

<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 وJavaScript.

بعد تثبيت لقطة ويب للعقدة (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
      });
});

إرسال بطاقة تفاعلية تحتوي على الصورة

نحن على وشك الانتهاء. أكمل الخطوة الأخيرة بتحديد الدالة sendBoardingPass(imageUrl, msisdn) التي تنشئ بطاقة RBM التفاعلية باستخدام الصورة التي تم إنشاؤها في الخطوة السابقة وإرسالها إلى المستخدم.

لإرسال البطاقة التفاعلية من خلال RBM، أستخدم حزمة تطوير البرامج (SDK) نفسها المتوفرة في Node.js في نموذج الوكيل الأول

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 إلى صور. تدعم أحدث لغات البرمجة المكتبات أو واجهات برمجة التطبيقات التي ستساعدك في إكمال التحويل. قد تحتاج إلى تغيير حجم الصورة للحصول على الأشياء التي تبدو مناسبة لحالة الاستخدام، ولكنه نهج رائع لإنشاء عناصر مرئية أكثر إقناعًا داخل وكلاء RBM.

حظًا سعيدًا وترميزًا سعيدًا!