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

تعرَّف على كيفية استفادة نشاط MishiPay من تطبيقات الويب التقدّمية (PWA).

Nikil Mathew

Thomas Steiner

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

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

10_×

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

2.5 سنة

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

التحدي

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

الحل

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

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

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

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

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

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

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

بث الفيديو

بمساعدة 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.

/**
 * 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');
  }
}

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

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

الطبقة النهائية هي طبقة فك الترميز المسؤولة عن فك ترميز الرموز الشريطية عن الإطارات. تلتقطه طبقة المعالجة. بفضل Shape Detection API (وهي غير متوفر بعد على جميع المتصفحات) يفكّ المتصفح نفسه ترميز الرمز الشريطي ImageBitmapSource، الذي يمكن أن يكون عنصر img أو عنصر SVG image أو عنصر 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 عن getSupportedFormats() الذي يساعد في التبديل بين واجهة برمجة تطبيقات Shape Detection والحل الاحتياطي.

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

مستقبل الفحص

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

الخاتمة

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

شكر وتقدير

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