MishiPay' PWA लेन-देन को 10 गुना बढ़ा देता है और 2.5 साल की कतारों में लगने वाले समय की बचत करता है

जानें कि PWA पर स्विच करने से MishiPay के कारोबार को कैसे फ़ायदा मिला.

Nikil Mathew

Thomas Steiner

MishiPay की मदद से खरीदार, चेकआउट के लिए लाइन में लगने के बजाय अपने स्मार्टफ़ोन से स्कैन करके पेमेंट कर सकते हैं. MishiPay की स्कैन करके खरीदारी करें और निकल जाएं टेक्नोलॉजी की मदद से, खरीदार अपने फ़ोन से सामान पर मौजूद बारकोड को स्कैन करके, उसका पेमेंट कर सकते हैं. इसके बाद, वे स्टोर से निकल सकते हैं. अध्ययनों से पता चला है कि हर साल, स्टोर में लाइन लगने की वजह से दुनिया भर के खुदरा कारोबार को 200 अरब डॉलर का नुकसान होता है.

हमारी टेक्नोलॉजी, डिवाइस के हार्डवेयर की क्षमताओं पर निर्भर करती है. जैसे, जीपीएस सेंसर और कैमरे. इनकी मदद से, लोग MishiPay की सुविधा वाले स्टोर ढूंढ सकते हैं, स्टोर में मौजूद सामान के बारकोड स्कैन कर सकते हैं, और फिर अपनी पसंद के डिजिटल पेमेंट के तरीके से पेमेंट कर सकते हैं. हमारी स्कैन ऐंड गो टेक्नोलॉजी के शुरुआती वर्शन, iOS और Android प्लैटफ़ॉर्म के लिए खास तौर पर बनाए गए ऐप्लिकेशन थे. इस टेक्नोलॉजी को अपनाने वाले शुरुआती लोगों ने इसे काफ़ी पसंद किया. पढ़ें और जानें कि PWA पर स्विच करने से, लेन-देन में 10 गुना की बढ़ोतरी कैसे हुई और 2.5 साल की कतार कैसे कम हुई!

10_×

लेन-देन में बढ़ोतरी

ढाई साल

कतार में लगाने की सुविधा सेव की गई

चुनौती

जब लोग किसी लाइन में इंतज़ार कर रहे होते हैं या चेक-आउट लाइन में खड़े होते हैं, तो उन्हें हमारी टेक्नोलॉजी बहुत मददगार लगती है. इसकी वजह यह है कि इससे उन्हें लाइन में इंतज़ार नहीं करना पड़ता और वे स्टोर में आसानी से खरीदारी कर पाते हैं. हालांकि, Android या iOS ऐप्लिकेशन डाउनलोड करने की वजह से, लोगों ने हमारी टेक्नोलॉजी को नहीं चुना. MishiPay के लिए यह एक बड़ी चुनौती थी. हमें उपयोगकर्ताओं को इस सुविधा के बारे में बताना था, ताकि वे इसे अपनाएं. साथ ही, हमें यह भी पक्का करना था कि वे आसानी से इसका इस्तेमाल कर पाएं.

समाधान

PWA को बनाने और लॉन्च करने से, हमें ऐप्लिकेशन इंस्टॉल करने की झंझट को खत्म करने में मदद मिली. साथ ही, इससे नए उपयोगकर्ताओं को किसी फ़िज़िकल स्टोर में हमारी टेक्नोलॉजी को आज़माने का मौका मिला. इससे वे लाइन में लगने से बच पाए और उन्हें खरीदारी का शानदार अनुभव मिला. लॉन्च के बाद से, हमने देखा है कि हमारे प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन की तुलना में, हमारे PWA को इस्तेमाल करने वाले लोगों की संख्या में काफ़ी बढ़ोतरी हुई है.

तकनीकी जाँच-पड़ताल

MishiPay की सुविधा वाले स्टोर ढूंढना

इस सुविधा को चालू करने के लिए, हम getCurrentPosition() एपीआई का इस्तेमाल करते हैं. साथ ही, आईपी पते के आधार पर फ़ॉलबैक समाधान का इस्तेमाल करते हैं.

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 के उपयोगकर्ताओं के लिए यह एक बड़ी समस्या बन गया. इसकी वजहें यहां दी गई हैं:

• आईपी पते के आधार पर जगह की जानकारी का पता लगाने वाले फ़ॉलबैक समाधानों में जगह की जानकारी गलत होना.
• हर इलाके में MishiPay की सुविधा वाले स्टोर की संख्या बढ़ रही है. इसलिए, उपयोगकर्ताओं को स्टोर की सूची को स्क्रोल करना पड़ता है और सही स्टोर की पहचान करनी पड़ती है.
• कभी-कभी उपयोगकर्ता गलती से गलत स्टोर चुन लेते हैं. इस वजह से, खरीदारी को गलत तरीके से रिकॉर्ड किया जाता है.

इन समस्याओं को हल करने के लिए, हमने हर स्टोर के लिए, स्टोर में मौजूद डिसप्ले पर खास जियोलोकेटेड क्यूआर कोड एम्बेड किए. इससे, लोगों को शामिल होने का बेहतर अनुभव मिला. उपयोगकर्ता, स्टोर में मौजूद मार्केटिंग मटीरियल पर प्रिंट किए गए जियोलोकेटेड क्यूआर कोड स्कैन करते हैं. इससे वे स्कैन करके खरीदारी करने वाले वेब ऐप्लिकेशन को ऐक्सेस कर पाते हैं. इससे, उन्हें सेवा को ऐक्सेस करने के लिए वेब पता 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 पर ड्रा करते हैं. इसके लिए, हम Canvas API के drawImage() तरीके का इस्तेमाल करते हैं.

/**
 * 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 API की मदद से, हम सीपीयू पर ज़्यादा लोड डालने वाले टास्क को वेब वर्कर पर ट्रांसफ़र कर सकते हैं. जिन डिवाइसों पर हार्डवेयर ग्राफ़िक्स ऐक्सलरेशन की सुविधा काम करती है उन पर WebGL API और इसका WebGL2RenderingContext, सीपीयू पर ज़्यादा लोड डालने वाले प्री-प्रोसेसिंग टास्क को ऑप्टिमाइज़ कर सकते हैं.

डिकोडर लेयर

आखिरी लेयर, डिकोडर लेयर होती है. यह प्रोसेसिंग लेयर से कैप्चर किए गए फ़्रेम से बारकोड को डिकोड करने के लिए ज़िम्मेदार होती है. Shape Detection API की मदद से, ब्राउज़र खुद ही ImageBitmapSource से बारकोड को डिकोड करता है. यह 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 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 इस्तेमाल करने का सुझाव देता है.

ये सभी लाइब्रेरी, पूरी तरह से काम करने वाले एसडीके हैं. इनमें बताई गई सभी लेयर शामिल हैं. ये अलग-अलग स्कैनिंग ऑपरेशन के लिए इंटरफ़ेस भी उपलब्ध कराते हैं. कारोबार के लिए ज़रूरी बारकोड फ़ॉर्मैट और बारकोड का पता लगाने की स्पीड के आधार पर, Wasm और नॉन-Wasm सलूशन में से किसी एक को चुना जा सकता है. बारकोड को डिकोड करने के लिए, Wasm को एक अतिरिक्त संसाधन की ज़रूरत होती है. इसके बावजूद, Wasm के समाधान, सटीक होने के मामले में नॉन-Wasm समाधान से बेहतर होते हैं.

Scandit हमारी पहली पसंद थी. यह हमारे कारोबार के इस्तेमाल के मामलों के लिए ज़रूरी सभी बारकोड फ़ॉर्मैट के साथ काम करता है. साथ ही, स्कैन करने की स्पीड के मामले में, यह उपलब्ध सभी ओपन-सोर्स लाइब्रेरी से बेहतर है.

स्कैनिंग की सुविधा का भविष्य

जब Shape Detection API सभी मुख्य ब्राउज़र के साथ पूरी तरह से काम करने लगेगा, तब हमारे पास एक नया एचटीएमएल एलिमेंट <scanner> हो सकता है. इसमें बारकोड स्कैनर के लिए ज़रूरी सुविधाएं होंगी. MishiPay की इंजीनियरिंग टीम का मानना है कि बारकोड स्कैन करने की सुविधा को एक नए एचटीएमएल एलिमेंट के तौर पर इस्तेमाल किया जा सकता है. ऐसा इसलिए, क्योंकि ओपन सोर्स और लाइसेंस वाली लाइब्रेरी की संख्या लगातार बढ़ रही है. ये लाइब्रेरी, स्कैन ऐंड गो जैसी सुविधाएं उपलब्ध करा रही हैं.

नतीजा

ऐप्लिकेशन के इस्तेमाल में दिलचस्पी न होना, एक ऐसी समस्या है जो डेवलपर को तब होती है, जब उनके प्रॉडक्ट बाज़ार में लॉन्च होते हैं. उपयोगकर्ता अक्सर किसी ऐप्लिकेशन को डाउनलोड करने से पहले, यह जानना चाहते हैं कि वह उनके लिए कितना फ़ायदेमंद है. स्टोर में, MishiPay से खरीदारों का समय बचता है और उन्हें बेहतर अनुभव मिलता है. ऐसे में, ऐप्लिकेशन का इस्तेमाल करने से पहले उसे डाउनलोड करने के लिए इंतज़ार करना, खरीदारों के लिए सही नहीं है. ऐसे में, हमारा PWA आपकी मदद करता है.

हमने एंट्री की बाधा को खत्म करके, अपने लेन-देन में 10 गुना बढ़ोतरी की है. साथ ही, अपने उपयोगकर्ताओं को लाइन में लगने से बचाया है. इससे उन्हें ढाई साल तक इंतज़ार नहीं करना पड़ा.

Acknowledgements

इस लेख की समीक्षा जो मेडली ने की है.