MishiPay-এর PWA লেনদেন 10 গুণ বৃদ্ধি করে এবং 2.5 বছরের সারি সাশ্রয় করে

PWA তে স্যুইচ করা কীভাবে MishiPay-এর ব্যবসাকে সাহায্য করেছে তা জানুন।

Nikil Mathew

Thomas Steiner

MishiPay ক্রেতাদের চেকআউটে লাইনে দাঁড়িয়ে সময় নষ্ট করার পরিবর্তে স্মার্টফোন দিয়ে কেনাকাটার জন্য স্ক্যান করে অর্থ প্রদানের ক্ষমতা দেয়। MishiPay-এর Scan & Go প্রযুক্তির সাহায্যে, ক্রেতারা তাদের নিজস্ব ফোন ব্যবহার করে পণ্যের বারকোড স্ক্যান করে অর্থ প্রদান করতে পারেন, তারপর দোকান থেকে বেরিয়ে যেতে পারেন। গবেষণায় দেখা গেছে যে, প্রতি বছর, দোকানে লাইনে দাঁড়িয়ে থাকার ফলে বিশ্বব্যাপী খুচরা বিক্রেতাদের ২০০ বিলিয়ন ডলার ক্ষতি হয় ।

আমাদের প্রযুক্তি ডিভাইস হার্ডওয়্যার ক্ষমতার উপর নির্ভর করে যেমন GPS সেন্সর এবং ক্যামেরা যা ব্যবহারকারীদের MishiPay-সক্ষম স্টোরগুলি সনাক্ত করতে, ফিজিক্যাল স্টোরের মধ্যে আইটেম বারকোড স্ক্যান করতে এবং তারপর তাদের পছন্দের ডিজিটাল পেমেন্ট পদ্ধতি ব্যবহার করে অর্থ প্রদান করতে দেয়। আমাদের স্ক্যান অ্যান্ড গো প্রযুক্তির প্রাথমিক সংস্করণগুলি ছিল প্ল্যাটফর্ম-নির্দিষ্ট iOS এবং Android অ্যাপ্লিকেশন, এবং প্রাথমিক ব্যবহারকারীরা প্রযুক্তিটি পছন্দ করেছিলেন। PWA-তে স্যুইচ করার ফলে কীভাবে লেনদেন 10 গুণ বৃদ্ধি পেয়েছে এবং 2.5 বছরের লাইনে অপেক্ষার সাশ্রয় হয়েছে তা জানতে পড়ুন!

১০ _×

লেনদেন বৃদ্ধি পেয়েছে

২.৫ বছর

সারিবদ্ধকরণ সংরক্ষিত হয়েছে

চ্যালেঞ্জ

ব্যবহারকারীরা লাইনে অপেক্ষা করার সময় বা চেক-আউট লাইনে আমাদের প্রযুক্তি অত্যন্ত সহায়ক বলে মনে করেন, কারণ এটি তাদের লাইন এড়িয়ে যেতে এবং স্টোরে মসৃণ অভিজ্ঞতা অর্জন করতে সাহায্য করে। কিন্তু অ্যান্ড্রয়েড বা আইওএস অ্যাপ্লিকেশন ডাউনলোড করার ঝামেলার কারণে ব্যবহারকারীরা মূল্য থাকা সত্ত্বেও আমাদের প্রযুক্তিটি বেছে নেননি। এটি মিশিপে-এর জন্য একটি ক্রমবর্ধমান চ্যালেঞ্জ ছিল এবং প্রবেশের বাধা কমিয়ে ব্যবহারকারীদের গ্রহণযোগ্যতা বৃদ্ধি করার প্রয়োজন ছিল।

সমাধান

PWA তৈরি এবং চালু করার ক্ষেত্রে আমাদের প্রচেষ্টা আমাদের ইনস্টলেশনের ঝামেলা দূর করতে সাহায্য করেছে এবং নতুন ব্যবহারকারীদের একটি ফিজিক্যাল স্টোরের ভিতরে আমাদের প্রযুক্তি ব্যবহার করে দেখতে, লাইন এড়িয়ে যেতে এবং একটি নির্বিঘ্ন কেনাকাটার অভিজ্ঞতা অর্জন করতে উৎসাহিত করেছে। চালু হওয়ার পর থেকে, আমাদের প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ্লিকেশনগুলির তুলনায় আমাদের PWA ব্যবহারকারীদের গ্রহণের ক্ষেত্রে ব্যাপক বৃদ্ধি লক্ষ্য করা গেছে।

টেকনিক্যাল ডিপ-ডাইভ

মিশিপে সক্ষম স্টোরগুলি সনাক্ত করা

এই বৈশিষ্ট্যটি সক্ষম করার জন্য, আমরা getCurrentPosition() API এবং একটি 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 ব্যবহারকারীদের জন্য এটি একটি বিশাল যন্ত্রণার বিষয় হিসেবে প্রমাণিত হয়েছে:

• আইপি-ভিত্তিক ফলব্যাক সমাধানগুলিতে অবস্থানের ভুল।
• অঞ্চলভেদে মিশিপে-সক্ষম স্টোরের ক্রমবর্ধমান তালিকার জন্য ব্যবহারকারীদের একটি তালিকা স্ক্রোল করতে হবে এবং সঠিক স্টোরটি সনাক্ত করতে হবে।
• ব্যবহারকারীরা মাঝে মাঝে ভুল করে ভুল দোকানটি বেছে নেন, যার ফলে কেনাকাটাগুলি ভুলভাবে রেকর্ড করা হয়।

এই সমস্যাগুলি সমাধানের জন্য, আমরা প্রতিটি দোকানের ইন-স্টোর ডিসপ্লেতে অনন্য জিওলোকেটেড QR কোডগুলি এমবেড করেছি। এটি দ্রুত অনবোর্ডিং অভিজ্ঞতার পথ প্রশস্ত করেছে। ব্যবহারকারীরা স্ক্যান অ্যান্ড গো ওয়েব অ্যাপ্লিকেশন অ্যাক্সেস করার জন্য স্টোরগুলিতে উপস্থিত মার্কেটিং উপাদানে মুদ্রিত জিওলোকেটেড QR কোডগুলি স্ক্যান করে। এইভাবে, তারা পরিষেবাটি অ্যাক্সেস করার জন্য mishipay.shop ওয়েব ঠিকানা টাইপ করা এড়াতে পারবেন।

পণ্য স্ক্যান করা হচ্ছে

মিশিপে অ্যাপের একটি মূল বৈশিষ্ট্য হল বারকোড স্ক্যানিং, কারণ এটি আমাদের ব্যবহারকারীদের তাদের নিজস্ব কেনাকাটা স্ক্যান করতে এবং চলমান মোট পরিমাণ দেখতে সক্ষম করে, এমনকি অন্যথায় তারা ক্যাশ রেজিস্টারে পৌঁছানোর আগেই।

ওয়েবে স্ক্যানিং অভিজ্ঞতা তৈরি করতে, আমরা তিনটি মূল স্তর চিহ্নিত করেছি।

ভিডিও স্ট্রিম

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-নিবিড় হতে পারে এবং বারকোড স্ক্যানিং একটি দীর্ঘস্থায়ী অপারেশন হওয়ায় অ্যাপ্লিকেশনটি প্রতিক্রিয়াহীন হয়ে পড়ে। অফস্ক্রিনক্যানভাস API এর সাহায্যে, আমরা CPU-নিবিড় কাজটি একজন ওয়েব কর্মীর কাছে অফলোড করতে পারি। হার্ডওয়্যার গ্রাফিক্স ত্বরণ সমর্থনকারী ডিভাইসগুলিতে, WebGL API এবং এর WebGL2RenderingContext CPU-নিবিড় প্রাক-প্রক্রিয়াকরণের কাজগুলিতে লাভ অপ্টিমাইজ করতে পারে।

ডিকোডার স্তর

চূড়ান্ত স্তরটি হল ডিকোডার স্তর যা প্রসেসিং স্তর দ্বারা ধারণ করা ফ্রেম থেকে বারকোড ডিকোড করার জন্য দায়ী। শেপ ডিটেকশন 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;
  }
}

যেসব ডিভাইসে এখনও শেপ ডিটেকশন API সাপোর্ট করে না, তাদের বারকোড ডিকোড করার জন্য আমাদের একটি ফলব্যাক সলিউশন প্রয়োজন। শেপ ডিটেকশন API একটি getSupportedFormats() পদ্ধতি প্রকাশ করে যা শেপ ডিটেকশন 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 সমাধানগুলি নির্ভুলতার দিক থেকে নন-ওয়াসম সমাধানকে ছাড়িয়ে যায়।

স্ক্যান্ডিট ছিল আমাদের প্রাথমিক পছন্দ। এটি আমাদের ব্যবসায়িক ব্যবহারের ক্ষেত্রে প্রয়োজনীয় সমস্ত বারকোড ফর্ম্যাট সমর্থন করে; স্ক্যানিং গতিতে এটি সমস্ত উপলব্ধ ওপেন-সোর্স লাইব্রেরিকে ছাড়িয়ে যায়।

স্ক্যানিংয়ের ভবিষ্যৎ

একবার শেপ ডিটেকশন API সমস্ত প্রধান ব্রাউজার দ্বারা সম্পূর্ণরূপে সমর্থিত হয়ে গেলে, আমরা সম্ভাব্যভাবে একটি নতুন HTML উপাদান <scanner> পেতে পারি যার বারকোড স্ক্যানারের জন্য প্রয়োজনীয় ক্ষমতা রয়েছে। MishiPay-এর ইঞ্জিনিয়ারিং বিশ্বাস করে যে বারকোড স্ক্যানিং কার্যকারিতার জন্য একটি নতুন HTML উপাদান হওয়ার জন্য একটি শক্তিশালী ব্যবহারের সুযোগ রয়েছে কারণ ক্রমবর্ধমান ওপেন সোর্স এবং লাইসেন্সপ্রাপ্ত লাইব্রেরি যা স্ক্যান অ্যান্ড গো এবং আরও অনেকের মতো অভিজ্ঞতা সক্ষম করছে।

উপসংহার

অ্যাপের ক্লান্তি এমন একটি সমস্যা যা ডেভেলপাররা তাদের পণ্য বাজারে আনার সময় সম্মুখীন হন। ব্যবহারকারীরা প্রায়শই একটি অ্যাপ্লিকেশন ডাউনলোড করার আগে এটির মূল্য বুঝতে চান। একটি দোকানে, যেখানে MishiPay ক্রেতাদের সময় বাঁচায় এবং তাদের অভিজ্ঞতা উন্নত করে, সেখানে অ্যাপ্লিকেশন ব্যবহার করার আগে ডাউনলোডের জন্য অপেক্ষা করা বিপরীতমুখী। এখানেই আমাদের PWA সাহায্য করে।

প্রবেশের বাধা দূর করে, আমরা আমাদের লেনদেন ১০ গুণ বৃদ্ধি করেছি এবং আমাদের ব্যবহারকারীদের ২.৫ বছরের লাইনে অপেক্ষার সময় বাঁচাতে সক্ষম করেছি।

স্বীকৃতি

এই প্রবন্ধটি জো মেডলি দ্বারা পর্যালোচনা করা হয়েছে।