تطبيق PWA الخاص بشركة MishiPay يزيد من المعاملات 10 مرات ويتيح إضافة الفيديوهات إلى "قائمة المحتوى التالي" لمدة سنتين ونصف

تعرَّف على كيفية مساعدة تطبيق MishiPay في تحسين نشاطه التجاري من خلال التبديل إلى تطبيق متوافق مع الأجهزة الجوّالة.

Nikil Mathew

Thomas Steiner

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

تعتمد التكنولوجيا التي نستخدمها على إمكانات أجهزة الأجهزة، مثل أدوات استشعار نظام تحديد المواقع العالمي (GPS) والكاميرات التي تتيح للمستخدمين تحديد موقع المتاجر المزوّدة بخدمة MishiPay، ومسح الرموز الشريطية للمنتجات داخل المتجر، ثم الدفع باستخدام طريقة الدفع الرقمية التي يختارونها. كانت الإصدارات الأولية من تكنولوجيا "البحث والشراء" تتوفّر على تطبيقات iOS وAndroid المخصّصة للمنصة، وقد أعجب المستخدمون الأوائل بهذه التكنولوجيا. اطّلِع على قراءة مفصّلة لمعرفة كيف أدّى التبديل إلى تطبيق متوافق مع الأجهزة الجوّالة إلى زيادة عدد المعاملات بمقدار 10 مرّات وتوفير 2.5 عام من الانتظار في قائمة الانتظار.

10_×

زيادة المعاملات

‫2.5 سنة

تم حفظ المحتوى في "قائمة المحتوى التالي"

التحدي

يجد المستخدمون أنّ التكنولوجيا التي نقدّمها مفيدة للغاية عند الانتظار في طابور أو في صف الدفع، لأنّها تسمح لهم بالتخطّي والحصول على تجربة سلسة في المتجر. لكن المتاعب لتنزيل تطبيق Android أو iOS جعلت المستخدمين لا يختارون التقنية الخاصة بنا على الرغم من القيمة. لقد كان هذا تحديًا متزايدًا بالنسبة إلى MishiPay، وكنا بحاجة إلى زيادة اعتماد المستخدمين من خلال تقليل حاجز الدخول.

الحل

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

التفاصيل الفنية

تحديد المتاجر التي تتيح استخدام MishiPay

لتفعيل هذه الميزة، نعتمد على واجهة برمجة تطبيقات getCurrentPosition() إلى جانب حل احتياطي مستنِد إلى عنوان IP.

const geoOptions = {
  timeout: 10 * 1000,
  enableHighAccuracy: true,
  maximumAge: 0,
};

window.navigator.geolocation.getCurrentPosition(
  (position) => {
    const cords = position.coords;
    console.log(`Latitude :  ${cords.latitude}`);
    console.log(`Longitude :  ${cords.longitude}`);
  },
  (error) => {
    console.debug(`Error: ${error.code}:${error.message}`);
    /**
     * Invoke the IP based location services
     * to fetch the latitude and longitude of the user.
     */
  },
  geoOptions,
);

وقد نجح هذا الأسلوب في الإصدارات السابقة من التطبيق، ولكن ثبُت أنّه كان مشكلة كبيرة لمستخدمي MishiPay، وذلك للأسباب التالية:

• عدم دقة الموقع الجغرافي في الحلول الاحتياطية المستندة إلى عنوان IP
• إنّ القائمة المتزايدة للمتاجر المزوّدة بخدمة MishiPay في كل منطقة تتطلّب من المستخدمين الانتقال إلى أسفل القائمة وتحديد المتجر الصحيح.
• يختار المستخدمون أحيانًا المتجر الخطأ عن طريق الخطأ، ما يؤدي إلى تسجيل عمليات الشراء بشكل غير صحيح.

لمعالجة هذه المشاكل، ضمّنا رموز الاستجابة السريعة الفريدة التي تم تحديد موقعها الجغرافي على الشاشات المتوفرة في المتجر لكل متجر. وقد مهدّ الطريق لتجربة إعداد أسرع. ما على المستخدمين سوى مسح رموز الاستجابة السريعة المحدَّدة جغرافيًا والمُطبَّوعة على المواد التسويقية المتوفّرة في المتاجر للوصول إلى تطبيق الويب "المسح والشراء". بهذه الطريقة، يمكنهم تجنُّب كتابة عنوان الويب mishipay.shop للوصول إلى الخدمة.

جارٍ فحص المنتجات

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

لإنشاء تجربة مسح على الويب، حددنا ثلاث طبقات أساسية.

بث الفيديو

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

/**
 * Video Stream Layer
 * https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia
 */
const canvasEle = document.getElementById('canvas');
const videoEle = document.getElementById('videoElement');
const canvasCtx = canvasEle.getContext('2d');
fetchVideoStream();
function fetchVideoStream() {
  let constraints = { video: { facingMode: 'environment' } };
  if (navigator.mediaDevices !== undefined) {
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then((stream) => {
        videoEle.srcObject = stream;
        videoStream = stream;
        videoEle.play();
        // Initiate frame capture - Processing Layer.
      })
      .catch((error) => {
        console.debug(error);
        console.warn(`Failed to access the stream:${error.name}`);
      });
  } else {
    console.warn(`getUserMedia API not supported!!`);
  }
}

طبقة المعالجة

لرصد رمز شريطي في بث فيديو معيّن، نحتاج إلى التقاط اللقطات بشكل دوري ونقلها إلى طبقة وحدة فك الترميز. لالتقاط إطار، نرسم ببساطة البث من VideoElement على HTMLCanvasElement باستخدام الطريقة drawImage() في Canvas API.

/**
 * Processing Layer - Frame Capture
 * https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
 */
async function captureFrames() {
  if (videoEle.readyState === videoEle.HAVE_ENOUGH_DATA) {
    const canvasHeight = (canvasEle.height = videoEle.videoHeight);
    const canvasWidth = (canvasEle.width = videoEle.videoWidth);
    canvasCtx.drawImage(videoEle, 0, 0, canvasWidth, canvasHeight);
    // Transfer the `canvasEle` to the decoder for barcode detection.
    const result = await decodeBarcode(canvasEle);
  } else {
    console.log('Video feed not available yet');
  }
}

بالنسبة إلى حالات الاستخدام المتقدمة، تؤدي هذه الطبقة أيضًا بعض مهام المعالجة المسبقة، مثل الاقتصاص أو التدوير أو التحويل إلى التدرج الرمادي. يمكن أن تستهلك هذه المهام وحدة المعالجة المركزية بشكل كبير وتؤدي إلى عدم استجابة التطبيق نظرًا لأنّ مسح الرمز الشريطي هو عملية تستغرق وقتًا طويلاً. باستخدام واجهة برمجة التطبيقات OffscreenCanvas، يمكننا تخفيف عبء المهمة التي تستهلك موارد وحدة المعالجة المركزية على أحد عمال الويب. على الأجهزة التي تتيح تسريع الرسومات بالأجهزة، يمكن لواجهة برمجة التطبيقات WebGL API وWebGL2RenderingContext تحسين المكاسب في مهام المعالجة المُسبَقة التي تتطلّب معالجة مكثفة لوحدة المعالجة المركزية.

طبقة فك الترميز

الطبقة الأخيرة هي طبقة فك الترميز المسؤولة عن فك ترميز الرموز الشريطية من اللقطات التي تم التقاطها من خلال طبقة المعالجة. بفضل Shape Detection API (غير المتوفرة حتى الآن في كل المتصفحات)، يفكك المتصفّح نفسه ترميز الرمز الشريطي من ImageBitmapSource، والذي يمكن أن يكون عنصر img أو عنصر image بتنسيق SVG أو عنصر video أو عنصر canvas أو كائن Blob أو كائن ImageData أو عنصر ImageBitmap.

/**
 * Barcode Decoder with Shape Detection API
 * https://web.dev/shape-detection/
 */
async function decodeBarcode(canvas) {
  const formats = [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e',
  ];
  const barcodeDetector = new window.BarcodeDetector({
    formats,
  });
  try {
    const barcodes = await barcodeDetector.detect(canvas);
    console.log(barcodes);
    return barcodes.length > 0 ? barcodes[0]['rawValue'] : undefined;
  } catch (e) {
    throw e;
  }
}

بالنسبة إلى الأجهزة التي لا تتيح استخدام واجهة برمجة التطبيقات Shape Detection API بعد، نحتاج إلى حل احتياطي لفك ترميز الرموز الشريطية. تعرض Shape Detection API طريقة getSupportedFormats() تساعد في التبديل بين Shape Detection API والحلّ الاحتياطي.

// Feature detection.
if (!('BarceodeDetector' in window)) {
  return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});

الحل الاحتياطي

تتوفّر العديد من مكتبات المسح الضوئي المفتوحة المصدر والمخصّصة للمؤسسات والتي يمكن دمجها بسهولة مع أي تطبيق ويب لتنفيذ عملية المسح الضوئي. في ما يلي بعض المكتبات التي ننصح بها في MishiPay .

جميع المكتبات المذكورة أعلاه هي حِزم تطوير برامج (SDK) كاملة تتألف من جميع الطبقات المذكورة أعلاه. كما أنها توفّر واجهات لدعم عمليات المسح المختلفة. استنادًا إلى تنسيقات الرموز الشريطية و سرعة الكشف المطلوبة لحالة النشاط التجاري، يمكن أن يكون القرار بين حلول Wasm والحلول غير المستندة إلى Wasm. على الرغم من الحاجة إلى مورد إضافي (Wasm) لفك ترميز الرمز الشريطي، تحقّق الحلول المستندة إلى Wasm أداءً أفضل من الحلول غير المستندة إلى Wasm من حيث الدقة.

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

مستقبل الفحص

عندما تصبح واجهة برمجة تطبيقات Shape Detection متوافقة بالكامل مع جميع المتصفحات الرئيسية، من المحتمَل أن يكون لدينا عنصر HTML جديد <scanner> يتضمّن الإمكانات المطلوبة لفحص الرموز الشريطية. ويعتقد قسم الهندسة في MishiPay أنّ هناك حالة استخدام قوية لوظيفة مسح الرموز الشريطية لكي تكون عنصر HTML جديدًا بسبب العدد المتزايد من المكتبات المفتوحة المصدر والمكتبات المرخَّصة التي تتيح تجارب مثل "Scan &Go" وغيرها الكثير.

الخاتمة

إن إرهاق التطبيقات هي مشكلة يواجهها المطوّرون عند دخول منتجاتهم إلى السوق. غالبًا ما يريد المستخدمون معرفة القيمة التي يقدّمها لهم التطبيق قبل تنزيله. وفي المتاجر التي توفّر فيها MishiPay وقت المتسوّقين وتحسّن تجربتهم، من غير البديهي الانتظار إلى حين اكتمال التنزيل قبل أن يتمكّنوا من استخدام أحد التطبيقات. وهنا يأتي دور التطبيقات المتوافقة مع الأجهزة الجوّالة. ومن خلال إزالة حاجز الدخول، تمكنا من زيادة معاملاتنا بمقدار 10 مرات وتمكننا المستخدمين من توفير 2.5 عام من الانتظار في قائمة الانتظار.

الشكر والتقدير

تمت مراجعة هذه المقالة من قِبل جو ميدلي.