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

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

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

في هذه المقالة، سأوضّح لك كيفية إنشاء الصور أثناء التنقل باستخدام HTML وتضمين تلك الصور داخل البطاقات التفاعلية التي يُرسلها وكيلك. لنبدأ بالاطّلاع على كيفية تحويل ترميز 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 من خلال جهاز التوجيه لتطبيق Express، ونطلب وظيفة 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 و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 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);
            });
    });
}

بعد ذلك، عليك استبدال الدالة 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) التي تُنشئ بطاقة تفاعلية لميزة "مراسلة الأنشطة التجارية من خلال خدمات الاتصالات التفاعلية (RCS)" باستخدام الصورة التي تم إنشاؤها في الخطوة السابقة وترسلها إلى المستخدم.

لإرسال البطاقة المنسّقة باستخدام ميزة "مراسلة الأنشطة التجارية من خلال خدمات الاتصالات التفاعلية (RCS)"، أستخدم حزمة تطوير البرامج (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);
}

في ما يلي لقطة شاشة للنتيجة النهائية.

الخاتمة والنص طويل جدًّا ولم تتم قراءته (TL;DR)

إنّ أبسط طريقة لجعل البطاقات التفاعلية أكثر تنوّعًا هي الاستفادة من تنسيق HTML الديناميكي وتحويل محتوى HTML إلى صور. وتدعم معظم لغات البرمجة الحديثة المكتبات أو واجهات برمجة التطبيقات التي ستساعدك في إتمام الإحالة الناجحة. قد تحتاج إلى تغيير حجم الصورة للعثور على العناصر المناسبة لحالتك، ولكن يُعد ذلك أسلوبًا رائعًا لإنشاء عناصر مرئية أكثر جاذبية في وكيل RBM.

نتمنى لك حظًا موفقًا ونتمنى لك التوفيق في الترميز.