MishiPay's PWA, işlemleri 10 kat artırdı ve sıraya koyma işleminden 2,5 yıl tasarruf etti

PWA'ya geçmenin MishiPay'in işine nasıl yardımcı olduğunu öğrenin.

MishiPay, müşterilerin akıllı telefonlarıyla değil, akıllı telefonlarıyla tarayıp ödeme yapmasını sağlıyor. ödeme sırasında zaman kaybına uğrayabilir. MishiPay'in Scan & Go teknolojisi, Tüketiciler ürünlerin üzerindeki barkodu tarayıp ödeme yapmak için kendi telefonlarını kullanabilir, ardından yardımcı olabilir. Araştırmalar, mağazada sıraya ekleme işlemi global perakende sektörüne yıllık yaklaşık 200 milyar ABD dolarına mal oluyor.

Teknolojimiz, GPS sensörleri ve kameralar gibi cihaz donanımlarının sağladığı olanaklara dayanır ve kullanıcıların MishiPay özellikli mağazaları bulmasını, fiziksel mağazadaki ürün barkodlarını tarayıp ödeme yapmasını tercih edebilir. Tarama ve Go teknolojisi platforma özgü iOS ve Android uygulamalarıydı. İlk kullanıcılar teknolojiyi çok seviyordu. Okunanlar devam ederek PWA'ya geçmenin işlemleri 10 kat artırdığını ve 2,5 yıl tasarruf ettiğini öğrenebilirsiniz. sıraya alınıyor!

    10×

    İşlem sayısında artış

    2,5 yıl

    Sıra kaydedildi

Zorluk

Kullanıcılar sırada veya ödeme kuyruğunda beklerken teknolojimizi son derece faydalı buluyor. onlara sıra atlamalarını ve sorunsuz bir mağaza deneyimi yaşamalarını sağlayacak. Ancak bir dosyayı indirmenin Android veya iOS uygulaması, değerli olsa da kullanıcıların teknolojimizi tercih etmemelerine neden oldu. Yıllanmış bir Bu, MishiPay'i en çok etkileyen zorluğa yol açtı ve daha az giriş engeliyle kullanıcıların benimsenmesini artırmamız gerekiyordu.

Çözüm

PWA oluşturma ve kullanıma sunma çalışmalarımız, yükleme zorluğunu ve teşvik etmek, yeni kullanıcıları teknolojimizi fiziksel bir mağazada denemeye, sırayı atlamaya ve sorunsuz alışveriş deneyimi sunmak. Lansmandan bu yana PWA'mızı geliştiriyoruz.

Doğrudan PWA'nın (solda, daha hızlı) başlatılması ile Android uygulamasının (sağ, daha yavaş) yüklenmesi ve başlatılmasının yan yana karşılaştırması.
ziyaret edin.
'nı inceleyin.
Platforma göre işlemler. ¡OS: 16397 (%3,98). Android: 13769 (%3,34). Web: 382184 (%92,68).
İşlemlerin çoğu web'de gerçekleşir.

Ayrıntılı teknik inceleme

MishiPay'in etkin olduğu mağazaları bulma

Bu özelliği etkinleştirmek için getCurrentPosition() API ve IP tabanlı bir yedek çözüm.

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,
);

Bu yaklaşım, uygulamanın önceki sürümlerinde işe yaradı ancak daha sonra büyük bir zorluk olduğu kanıtlandı. aşağıdaki nedenlerden dolayı MishiPay kullanıcıları için bir puan puanı uygulamanız gerekir:

  • IP tabanlı yedek çözümlerdeki konum hataları.
  • Bölgeye göre giderek artan MishiPay özellikli mağaza girişi için kullanıcıların bir listeyi kaydırmaları ve ve doğru mağazayı tanımlamalısınız.
  • Kullanıcıların ara sıra yanlışlıkla yanlış mağazayı seçmesi, satın alma işlemlerinin kaydedilmesine neden oluyor sağlayabilir.

Bu sorunları çözmek için coğrafi konumdaki benzersiz QR kodlarını mağaza içi ekranlara yerleştirdik: mağaza. İlk katılım deneyiminin yolunu açtı. Kullanıcıların coğrafi konumu bulunan QR'yı taraması yeterlidir Mağazalarda bulunan pazarlama materyallerinin üzerine yazılan kodların taranıp Go web uygulaması. Böylece, hizmete erişmek için mishipay.shop web adresini yazmak zorunda kalmazlar.

PWA ile mağaza içi tarama deneyimi.

Ürünler taranıyor

MishiPay uygulamasının temel özelliklerinden biri de barkod taramadır. Bu özellik sayesinde kullanıcılarımız, satın almaları olup aksi takdirde nakit paraya ulaşmadan önce bile devam eden toplam tutarı görebilirsiniz. kaydolun.

Web'de bir tarama deneyimi oluşturmak için üç temel katman belirledik.

Üç ana iş parçacığı katmanını gösteren şema: video akışı, işleme katmanı ve kod çözücü katmanı.

Video akışı

Yardım Merkezi'nin getUserMedia() yöntemini kullanıyorsanız kullanıcının arka görüş kamerasına aşağıda belirtilen kısıtlamalarla erişebilir. Yöntemi çağırma kullanıcıların kameralarına erişimi kabul etmeleri veya reddetmeleri için otomatik olarak bir istem tetikler. Bu erişim sağlandığında bunu aşağıda gösterildiği gibi bir video öğesine aktarabiliriz:

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

İşleme katmanı

Belirli bir video akışında barkod algılamak için düzenli olarak kareleri yakalamamız ve kod çözücü katmanına taşınır. Bir kare çekmek için, VideoElement kaynaklı akışları Bir 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');
  }
}

Gelişmiş kullanım alanları için bu katman aynı zamanda kırpma, veya gri tonlamaya dönüştürülür. Bu görevler CPU'yu yoğun şekilde kullanabilir ve uzun süreli bir işlem olduğu için barkod taramanın yanıt vermemesidir. Yardım Merkezi'nin OffscreenCanvas API'yi kullanarak bu en iyi uygulamaları paylaştım. Donanım grafik hızlandırmasını destekleyen cihazlarda WebGL API ve WebGL2RenderingContext şunları yapabilir: ve CPU'yu yoğun şekilde kullanan ön işleme görevlerinden elde edilen kazançları optimize eder.

Kod çözücü katmanı

Son katman, karelerdeki barkodların kodunu çözmekten sorumlu kod çözücü katmanıdır. yakalamasına yardımcı olur. Teşekkürler Şekil Algılama API'si henüz tüm tarayıcılarda kullanılamaması), tarayıcı barkodun kodunu ImageBitmapSource (bir img öğesi, bir SVG image öğesi, bir video öğesi, bir canvas öğesi, Blob nesnesi, ImageData nesnesi veya ImageBitmap nesnesi.

Üç ana iş parçacığı katmanını gösteren şema: video akışı, işleme katmanı ve Shape Detection API.

/**
 * 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'yi henüz desteklemeyen cihazlarda kodu çözmek için bir yedek çözüme ihtiyacımız var emin olabiliyoruz. Şekil Algılama API'si, getSupportedFormats() yöntemini kullanabilirsiniz.

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

Barkod Dedektörü desteğine ve desteklenen barkod biçimlerine (Şekil Algılama API'si veya yedek çözümün) bağlı olarak nasıl kullanıldığını gösteren akış diyagramı.

Yedek çözüm

Kolayca entegre edilebilen birçok açık kaynak ve kurumsal tarama kitaplığı mevcuttur herhangi bir web uygulamasıyla iletişim kurmak gerekmez. MishiPay'in şu anda kullandığı kitaplıklardan öneririz.

ziyaret edin. 'nı inceleyin.
Kütüphanenin Adı Tür Wasm Çözeltisi Barkod Biçimleri
QuaggaJs Açık Kaynak Hayır 1G
ZxingJs Açık Kaynak Hayır 1D ve 2D (Sınırlı)
CodeCorp Kurumsal Evet 1D ve 2B
Scandit Kurumsal Evet 1D ve 2B
Açık kaynak ve ticari barkod tarama kitaplıklarının karşılaştırması

Yukarıdaki kitaplıkların tümü, yukarıda açıklanan tüm katmanları içeren tam donanımlı SDK'lardır. Ayrıca Çeşitli tarama işlemlerini desteklemek için arayüzleri açığa çıkarır. Barkod biçimlerine ve Wasm ve Wasm olmayan çözümler arasında karar verilebilir. Barkodun kodunu çözmek için ek bir kaynağa (Wasm) ihtiyaç duymanın getirdiği ek yüke rağmen Wasm daha iyi performans gösteren resmî çözümlerdir.

Scandit, birincil tercihimizdi. Tüm barkodları destekler iş kullanım alanlarımız için gerekli biçimler; Şuradaki mevcut tüm açık kaynak kitaplıklardan daha iyidir: tarama hızı.

Taramanın geleceği

Şekil Algılama API'si yaygın olarak kullanılan tüm tarayıcılarda tam olarak desteklendiğinde, barkod okuyucu için gereken özelliklere sahip yeni HTML öğesi <scanner>. Mühendislik olarak çalışan MishiPay, barkod tarama işlevinin yeni bir işletme yapısı olarak Açık kaynak ve lisanslı kitaplıkların sayısının artmasıyla birlikte, Tarama ve Sprint gibi Git ve daha pek çok kişi.

Sonuç

Uygulama yorgunluğu, geliştiricilerin ürünleri pazara girdiğinde karşılaştıkları bir sorundur. Kullanıcıların genellikle istediği bir uygulamanın onlara sağladığı değeri anlamak için bu verileri kullanabilirsiniz. Bir mağazada, MishiPay, alışveriş yapanlara tasarruf sağlıyor ve deneyimlerini iyileştirdiğini düşünüyorsanız bir sonraki aşamaya geçmeden önce Bir uygulamayı kullanabilmeleri için indirmeden önce indirmeleri gerekir. PWA'mız tam da bu noktada yardımcı oluyor. Bariyeri ortadan kaldırarak işlemlerimizi 10 kat artırdık ve kullanıcılarımıza 2, 5 yıllık deneyim tasarrufu sağladık. sırada bekliyor.

Teşekkür

Bu makale Joe Medley tarafından incelenmiştir.