אפליקציית MishiPay' מגדילה את מספר העסקאות פי 10 וחוסכת 2.5 שנים של המתנה בתור

איך המעבר ל-PWA עזר לעסק של MishiPay.

Nikil Mathew

Thomas Steiner

חברת MishiPay עוזרת לקונים לסרוק את הקניות ולשלם עליהן באמצעות הסמארטפון, במקום לבזבז זמן בתור בקופה. באמצעות Scan & של MishiPay הטכנולוגיה של Go, הקונים יכולים להשתמש בטלפון שלהם כדי לסרוק את הברקוד של פריטים ולשלם עבורם, ואז פשוט החנות. מחקרים מראים הוספה של תורים לחנויות עולה למגזר הקמעונאי בעולם כ-200 מיליארד דולר בשנה.

הטכנולוגיה שלנו מסתמכת על יכולות החומרה של המכשיר, כמו חיישני GPS ומצלמות שמאפשרים משתמשים כדי לאתר חנויות שתומכות ב-mishiPay, לסרוק ברקודים של פריטים בחנות הפיזית ולאחר מכן לשלם באמצעי התשלום הדיגיטלי שהם בחרו. הגרסאות הראשוניות של הכלי 'סריקה' טכנולוגיות של Go היו אפליקציות ספציפיות לפלטפורמות ל-iOS ול-Android, והמשתמשים הראשונים אהבו את הטכנולוגיה. נקראו כדי ללמוד איך המעבר ל-PWA הגדיל את מספר העסקאות פי 10 וחסך שנתיים.5 נכנס לתור!

10_×

יותר עסקאות

שנתיים וחצי

רשימת הבאים בתור נשמרה

האתגר

הטכנולוגיה שלנו מאוד מועילה למשתמשים בזמן שהם ממתינים בתור או בתור לביצוע צ'ק-אאוט, כי היא מאפשרת כדי לדלג על התור וליהנות מחוויה חלקה בחנות. אבל הטרחה של הורדת אפליקציה ל-Android או ל-iOS גרמה למשתמשים לא לבחור בטכנולוגיה שלנו, למרות הערך שלהם. היא הייתה הולכת וגדלה של MishiPay, והיינו צריכים להגדיל את אימוץ המשתמשים באמצעות מחסום כניסה נמוך יותר.

פתרון

המאמצים שלנו לפתח ולהשיק את ה-PWA עזרו לנו לבטל את הטרחה בהתקנה עודד משתמשים חדשים לנסות את הטכנולוגיה שלנו בחנות פיזית, לדלג על 'הבאים בתור' ולקבל חוויית קנייה חלקה. מאז ההשקה, ראינו עלייה אדירה באימוץ המשתמשים עם אפליקציית ה-PWA שלנו בהשוואה לאפליקציות הספציפיות לפלטפורמה שלנו.

סקירה מפורטת בנושא טכני

איתור חנויות שמופעלות על ידי 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 לפי אזור מצריך מהמשתמשים לגלול רשימה מזהים את החנות הנכונה.
• מדי פעם, משתמשים בוחרים בחנות הלא נכונה, וכתוצאה מכך הרכישות מתועדות בטעות.

כדי לטפל בבעיות האלה, הטמעתנו קודי QR ייחודיים עם מיקום גיאוגרפי ייחודי במסכים השונים בחנות החנות. התהליך הזה סלל את הדרך לחוויית הצטרפות מהירה יותר. משתמשים פשוט סורקים את מיקום ה-QR של המיקום הגיאוגרפי קודים המודפסים על חומרים שיווקיים שקיימים בחנויות כדי לגשת ל אפליקציית אינטרנט. כך הם יוכלו להימנע מהקלדה של כתובת האינטרנט 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 באמצעות 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) לעובדי אינטרנט. במכשירים שתומכים בהאצת גרפיקה באמצעות חומרה, WebGL API WebGL2RenderingContext יכולה לבצע אופטימיזציה של משימות טרום-עיבוד שצורכות הרבה מעבד (CPU).

שכבת המפענח

השכבה האחרונה היא שכבת המפענח שאחראית לפענוח ברקודים מהפריימים מתועדים בשכבת העיבוד. הודות ל- צורה מזהה API (שהוא עדיין לא זמין בכל הדפדפנים) הדפדפן עצמו מפענח את הברקוד ImageBitmapSource, שיכול להיות רכיב img, רכיב image בפורמט SVG, רכיב 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;
  }
}

במכשירים שעדיין לא תומכים ב-Form Detection 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) כדי לפענח את הברקוד, Wasm פתרונות הביצועים שלהם טובים יותר מהפתרון שאינו Wasm מבחינת הדיוק.

Scandit הייתה הבחירה העיקרית שלנו. הוא תומך בכל הברקודים הפורמטים הנדרשים לתרחישים העסקיים שלנו; הוא טוב יותר מכל ספריות הקוד הפתוח הזמינות מהירות הסריקה.

עתיד הסריקה

ברגע שתהיה תמיכה מלאה בממשק ה-API לזיהוי צורה בכל הדפדפנים המובילים, ייתכן שתהיה לנו רכיב HTML חדש <scanner> עם היכולות הנדרשות לסורק ברקוד. הנדסה ב-mishiPay מאמינים שיש תרחיש לדוגמה טוב לפונקציונליות של סריקת ברקוד ל-HTML בזכות המספר ההולך וגדל של ספריות בקוד פתוח וספריות מורשות שמאפשרות ממשקים כמו 'סריקה' קדימה ועוד הרבה אנשים.

סיכום

'עייפות באפליקציות' היא בעיה שמפתחים מתמודדים איתו כאשר המוצרים שלהם יוצאים לשוק. משתמשים בדרך כלל רוצים להבין את הערך שאפליקציה נותנת להם לפני שהם מורידים אותה. בחנות, חברת MishiPay שומרת את הקונים ומשפר את החוויה שלהם, לא הגיוני להמתין להוריד לפני שיוכלו להשתמש באפליקציה. כאן אפליקציית PWA שלנו עוזרת לכם. על ידי הסרת המחסום עד כה, הגדלנו את מספר העסקאות שלנו פי 10 ואפשרנו למשתמשים שלנו לחסוך 2.5 שנים בהמתנה בתור.

אישורים

המאמר הזה נבדק על ידי ג'ו מדלי.