PWA ของ MishiPay เพิ่มการทำธุรกรรมขึ้น 10 เท่าและช่วยประหยัดเวลาในการจัดคิว 2.5 ปี

ดูว่าการเปลี่ยนไปใช้ PWA ช่วยธุรกิจของ MishiPay ได้อย่างไร

Nikil Mathew

Thomas Steiner

MishiPay ช่วยให้ผู้เลือกซื้อสแกนและชำระเงินสำหรับการช็อปปิ้งด้วยสมาร์ทโฟนได้ แทนที่จะต้องเสียเวลาต่อคิวที่จุดชำระเงิน เทคโนโลยี Scan & Go ของ MishiPay ช่วยให้ผู้เลือกซื้อใช้โทรศัพท์ของตนเองสแกนบาร์โค้ดบนสินค้าและชำระเงิน จากนั้นก็ออกจากร้านค้าได้ การศึกษาพบว่าการต่อคิวในร้านค้าทำให้ภาคค้าปลีกทั่วโลกสูญเสียเงิน $200, 000 ล้านต่อปี

เทคโนโลยีของเราอาศัยความสามารถของฮาร์ดแวร์ของอุปกรณ์ เช่น เซ็นเซอร์ GPS และกล้อง ซึ่งช่วยให้ ผู้ใช้ค้นหาร้านค้าที่เปิดใช้ MishiPay สแกนบาร์โค้ดของสินค้าภายในร้านค้าจริง แล้วชำระเงิน โดยใช้วิธีการชำระเงินดิจิทัลที่ต้องการ เทคโนโลยี Scan & Go เวอร์ชันแรกของเรา เป็นแอปพลิเคชัน iOS และ Android ที่เฉพาะเจาะจงแพลตฟอร์ม และผู้ใช้กลุ่มแรกๆ ที่เปิดรับนวัตกรรมต่างชื่นชอบเทคโนโลยีนี้ อ่านต่อเพื่อดูว่าการเปลี่ยนไปใช้ PWA ช่วยเพิ่มธุรกรรมได้ 10 เท่าและประหยัดเวลาในการต่อคิวได้ถึง 2.5 ปีได้อย่างไร

10_×

การทำธุรกรรมเพิ่มขึ้น

2.5 ปี

บันทึกการจัดคิวแล้ว

ความท้าทาย

ผู้ใช้เห็นว่าเทคโนโลยีของเรามีประโยชน์อย่างยิ่งเมื่อต้องรอคิวหรือต่อแถวชำระเงิน เนื่องจากช่วยให้ผู้ใช้ข้ามคิวและได้รับประสบการณ์การใช้งานในร้านค้าที่ราบรื่น แต่ความยุ่งยากในการดาวน์โหลดแอปพลิเคชัน Android หรือ iOS ทำให้ผู้ใช้ไม่เลือกใช้เทคโนโลยีของเราแม้ว่าจะมีคุณค่าก็ตาม ซึ่งเป็นความท้าทายที่เพิ่มขึ้นสำหรับ MishiPay และเราจำเป็นต้องเพิ่มการยอมรับของผู้ใช้โดยลดอุปสรรคในการเริ่มต้นใช้งาน

โซลูชัน

ความพยายามในการสร้างและเปิดตัว PWA ช่วยให้เราขจัดความยุ่งยากในการติดตั้งและ กระตุ้นให้ผู้ใช้ใหม่ลองใช้เทคโนโลยีของเราภายในร้านค้าจริง ข้ามคิว และได้รับ ประสบการณ์การช็อปปิ้งที่ราบรื่น นับตั้งแต่เปิดตัว เราเห็นการใช้งานของผู้ใช้เพิ่มขึ้นอย่างมากใน PWA ของเราเมื่อเทียบกับแอปพลิเคชันเฉพาะแพลตฟอร์ม

การเปรียบเทียบแบบเคียงข้างกันระหว่างการเปิด PWA โดยตรง (ซ้าย เร็วกว่า) กับการติดตั้งและเปิดแอป Android (ขวา ช้ากว่า)

ธุรกรรมส่วนใหญ่ทั้งหมดเกิดขึ้นบนเว็บ

การเจาะลึกทางเทคนิค

การค้นหาร้านค้าที่เปิดใช้ MishiPay

หากต้องการเปิดใช้ฟีเจอร์นี้ เราจะใช้ 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 ด้วยเหตุผลต่อไปนี้

• ความไม่ถูกต้องของตำแหน่งในโซลูชันสำรองที่อิงตาม IP
• รายชื่อร้านค้าที่เปิดใช้ MishiPay ในแต่ละภูมิภาคเพิ่มขึ้นเรื่อยๆ ทำให้ผู้ใช้ต้องเลื่อนรายการและ ระบุร้านค้าที่ถูกต้อง
• ผู้ใช้บางครั้งเลือกสโตร์ผิดโดยไม่ตั้งใจ ซึ่งทำให้ระบบบันทึกการซื้ออย่างไม่ถูกต้อง

เราจึงฝังคิวอาร์โค้ดที่ไม่ซ้ำกันซึ่งระบุตำแหน่งทางภูมิศาสตร์ไว้ในจอแสดงผลในร้านค้าสำหรับแต่ละ ร้านค้าเพื่อแก้ไขปัญหาเหล่านี้ ซึ่งช่วยให้เรามอบประสบการณ์การเริ่มต้นใช้งานที่รวดเร็วขึ้นได้ ผู้ใช้จะสแกนคิวอาร์โค้ดที่ระบุตำแหน่งทางภูมิศาสตร์ ซึ่งพิมพ์บนสื่อการตลาดที่แสดงในร้านค้าเพื่อเข้าถึงเว็บแอปพลิเคชัน Scan & Go วิธีนี้จะช่วยให้ผู้ใช้ไม่ต้องพิมพ์ที่อยู่เว็บ mishipay.shop เพื่อเข้าถึงบริการ

ประสบการณ์การสแกนในร้านค้าโดยใช้ PWA

การสแกนผลิตภัณฑ์

ฟีเจอร์หลักในแอป MishiPay คือการสแกนบาร์โค้ด เนื่องจากช่วยให้ผู้ใช้สแกนสินค้าที่ซื้อเองและดูยอดรวมได้แม้ว่าจะยังไม่ได้ไปที่เครื่องคิดเงิน

เราได้ระบุเลเยอร์หลัก 3 เลเยอร์เพื่อสร้างประสบการณ์การสแกนบนเว็บ

สตรีมวิดีโอ

เราสามารถเข้าถึงกล้องมองหลังของผู้ใช้ได้ด้วยความช่วยเหลือจากวิธี 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 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');
  }
}

สำหรับกรณีการใช้งานขั้นสูง เลเยอร์นี้ยังทำหน้าที่ประมวลผลล่วงหน้าบางอย่าง เช่น การครอบตัด การหมุน หรือการแปลงเป็นระดับสีเทา งานเหล่านี้อาจใช้ CPU มากและส่งผลให้แอปพลิเคชันไม่ตอบสนองเนื่องจากการสแกนบาร์โค้ดเป็นการดำเนินการที่ใช้เวลานาน API OffscreenCanvas ช่วยให้เราสามารถส่งต่อ งานที่ใช้ CPU มากไปยัง Web Worker ได้ ในอุปกรณ์ที่รองรับการเร่งความเร็วกราฟิกด้วยฮาร์ดแวร์ API ของ WebGL และ WebGL2RenderingContext สามารถ เพิ่มประสิทธิภาพของงานประมวลผลเบื้องต้นที่ใช้ CPU เป็นจำนวนมาก

เลเยอร์ตัวถอดรหัส

เลเยอร์สุดท้ายคือเลเยอร์ตัวถอดรหัสซึ่งมีหน้าที่ถอดรหัสบาร์โค้ดจากเฟรมที่เลเยอร์การประมวลผลจับภาพได้ 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 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	รูปแบบบาร์โค้ด
QuaggaJs	โอเพนซอร์ส	ไม่	1 วัน
ZxingJs	โอเพนซอร์ส	ไม่	1D และ 2D (จำกัด)
CodeCorp	Enterprise	ใช่	1D และ 2D
Scandit	Enterprise	ใช่	1D และ 2D

ไลบรารีทั้งหมดนี้เป็น SDK ที่สมบูรณ์แบบซึ่งประกอบด้วยเลเยอร์ทั้งหมดที่กล่าวถึง นอกจากนี้ ยัง แสดงอินเทอร์เฟซเพื่อรองรับการดำเนินการสแกนต่างๆ ด้วย คุณสามารถเลือกระหว่างโซลูชัน Wasm และโซลูชันที่ไม่ใช่ Wasm ได้โดยขึ้นอยู่กับรูปแบบบาร์โค้ดและความเร็วในการตรวจหาที่จำเป็นสำหรับกรณีการใช้งานทางธุรกิจ แม้ว่าการกำหนดให้ใช้ทรัพยากรเพิ่มเติม (Wasm) ในการถอดรหัสบาร์โค้ดจะทำให้เกิดค่าใช้จ่ายเพิ่มเติม แต่โซลูชัน Wasm ก็มีประสิทธิภาพเหนือกว่าโซลูชันที่ไม่ใช่ Wasm ในแง่ของความแม่นยำ

Scandit เป็นตัวเลือกหลักของเรา โดยรองรับรูปแบบบาร์โค้ดทั้งหมด ที่จำเป็นสำหรับกรณีการใช้งานทางธุรกิจของเรา และมีความเร็วในการสแกนที่เหนือกว่าไลบรารีโอเพนซอร์สที่มีอยู่ทั้งหมด

อนาคตของการสแกน

เมื่อเบราว์เซอร์หลักทั้งหมดรองรับ Shape Detection API อย่างเต็มรูปแบบแล้ว เราอาจมี องค์ประกอบ HTML ใหม่ <scanner> ที่มีความสามารถที่จำเป็นสำหรับเครื่องสแกนบาร์โค้ด ทีมวิศวกรของ MishiPay เชื่อว่าฟังก์ชันการสแกนบาร์โค้ดควรเป็นองค์ประกอบ HTML ใหม่เนื่องจากมีไลบรารีโอเพนซอร์สและไลบรารีที่ได้รับอนุญาตจำนวนมากขึ้นเรื่อยๆ ซึ่งช่วยให้ประสบการณ์การใช้งานต่างๆ เช่น สแกนและชำระเงิน และอื่นๆ อีกมากมาย

บทสรุป

ความเบื่อหน่ายแอปเป็นปัญหาที่นักพัฒนาแอปต้องเผชิญเมื่อผลิตภัณฑ์ของตนเข้าสู่ตลาด ผู้ใช้มักต้องการ ทำความเข้าใจคุณค่าที่แอปพลิเคชันมอบให้ก่อนที่จะดาวน์โหลด ในร้านค้าที่ MishiPay ช่วยประหยัดเวลาและปรับปรุงประสบการณ์ของผู้เลือกซื้อ การรอให้ดาวน์โหลดก่อนจึงจะใช้แอปพลิเคชันได้นั้นเป็นสิ่งที่ขัดกับสัญชาตญาณ ซึ่งเป็นจุดที่ PWA ของเราเข้ามาช่วย

การขจัดอุปสรรคในการเริ่มต้นใช้งานทำให้เรามีธุรกรรมเพิ่มขึ้น 10 เท่า และช่วยให้ผู้ใช้ประหยัดเวลาในการรอคิวได้ถึง 2.5 ปี

คำขอบคุณ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley