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

जानें कि PWA पर स्विच करने से, MishiPay के कारोबार को किस तरह मदद मिली.

Nikil Mathew

Thomas Steiner

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

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

10_×

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

2.5 साल

कतार में शामिल किया गया वीडियो सेव किया गया

चुनौती

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

समाधान

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

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

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

तकनीकी चीज़ों के बारे में बेहतर तरीके से जानने के लिए

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 टाइप करने से बच सकते हैं.

PWA का इस्तेमाल करके, स्टोर में मौजूद आइटम स्कैन करने का अनुभव.

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

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() तरीका है कैनवस 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 यह कर सकते हैं प्रोसेस को पूरा करने के लिए, सीपीयू की क्षमता से जुड़े प्री-प्रोसेसिंग टास्क पर होने वाले मुनाफ़े को ऑप्टिमाइज़ करता है.

डिकोडर लेयर

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

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

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

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

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

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

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

आने वाले समय में स्कैन करने की सुविधा

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

नतीजा

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

स्वीकार की गई

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