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.
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.
Ü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.
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.
/**
* 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));
});
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.
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.