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

जानें कि PWA पर स्विच करने से MinhiPay के कारोबार को कैसे मदद मिली.

Nikil Mathew

Thomas Steiner

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

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

10_×

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

2.5 साल

सूची बनाने की सेटिंग सेव की गई

चैलेंज

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

समस्या का हल

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

PWA को सीधे लॉन्च करने (बाएं, तेज़) और Android ऐप्लिकेशन को इंस्टॉल और लॉन्च करने के बीच की तुलना (दाएं, बाएं).

ज़्यादातर लेन-देन वेब पर होते हैं.

तकनीकी के बारे में ज़्यादा जानकारी

मिशीपे की सुविधा वाले स्टोर का पता लगाया जा रहा है

इस सुविधा को चालू करने के लिए, हम आईपी पर आधारित फ़ॉलबैक सलूशन के साथ-साथ 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.shop में टाइप करने से बच सकते हैं.

PWA का इस्तेमाल करके, स्टोर में जाकर स्कैन करने का अनुभव पाएं.

प्रॉडक्ट स्कैन किए जा रहे हैं

MinhiPay ऐप्लिकेशन की सबसे खास सुविधा, बारकोड स्कैन करने की सुविधा है. इससे हमारे उपयोगकर्ता, अपनी खरीदारी को स्कैन करके, कैश रजिस्टर में पहुंचने से पहले ही, कुल कीमत देख पाते हैं.

वेब पर स्कैनिंग का अनुभव देने के लिए, हमने तीन मुख्य लेयर की पहचान की है.

वीडियो स्ट्रीम

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!!`);
  }
}

लेयर प्रोसेस की जा रही है

किसी वीडियो स्ट्रीम में बारकोड का पता लगाने के लिए, हमें समय-समय पर फ़्रेम को कैप्चर करके, उन्हें डिकोडर लेयर में ट्रांसफ़र करना होगा. फ़्रेम कैप्चर करने के लिए, हम Canvas API के तरीके drawImage() का इस्तेमाल करके, VideoElement से HTMLCanvasElement पर स्ट्रीम बनाते हैं.

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

डिकोडर लेयर

आखिरी लेयर, डिकोडर लेयर होती है. यह लेयर, प्रोसेस होने वाली लेयर से कैप्चर किए गए फ़्रेम से, बारकोड को डिकोड करने के लिए ज़िम्मेदार होती है. शेप डिटेक्शन एपीआई (यह फ़िलहाल सभी ब्राउज़र पर उपलब्ध नहीं है) की मदद से, ब्राउज़र खुद ही 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;
  }
}

जो डिवाइस अभी आकार पहचान एपीआई के साथ काम नहीं करते उन्हें बारकोड डिकोड करने के लिए फ़ॉलबैक सलूशन की ज़रूरत होती है. शेप डिटेक्शन एपीआई, एक getSupportedFormats() तरीका दिखाता है. इससे, शेप डिटेक्शन एपीआई और फ़ॉलबैक सलूशन के बीच स्विच करने में मदद मिलती है.

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

फ़ॉलबैक सलूशन

कई ओपन-सोर्स और एंटरप्राइज़ स्कैनिंग लाइब्रेरी उपलब्ध हैं, जिन्हें किसी भी वेब ऐप्लिकेशन के साथ आसानी से इंटिग्रेट किया जा सकता है, ताकि स्कैनिंग लागू की जा सके. यहां कुछ लाइब्रेरी दी गई हैं जिनका सुझाव MihiPay से मिलता है.

ओपन-सोर्स और कमर्शियल बारकोड स्कैनिंग लाइब्रेरी की तुलना

लाइब्रेरी का नाम	टाइप	Wasm सलूशन	बारकोड फ़ॉर्मैट
QuaggaJs	ओपन सोर्स	नहीं	1दिन
ZxingJs	ओपन सोर्स	नहीं	1D और 2D (सीमित)
CodeCorp	Enterprise	हां	1D और 2D
स्कैनडिट	Enterprise	हां	1D और 2D

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

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

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

जब शेप डिटेक्शन एपीआई सभी बड़े ब्राउज़र पर पूरी तरह से काम करने लगे, तो हमारे पास एक नया एचटीएमएल एलिमेंट <scanner> हो सकता है, जिसमें बारकोड स्कैनर के लिए ज़रूरी क्षमताएं होंगी. MinhiPay की इंजीनियरिंग का मानना है कि ओपन सोर्स और लाइसेंस वाली लाइब्रेरी की बढ़ती संख्या की वजह से, बारकोड स्कैनिंग की सुविधा को नया एचटीएमएल एलिमेंट बनाने के लिए इस्तेमाल किया जा सकता है. ये लाइब्रेरी, स्कैन और गो जैसे कई तरह के अनुभव उपलब्ध कराती हैं.

नतीजा

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

स्वीकार हैं

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