MishiPay, alışveriş yapanların kasada sıraya girerek zaman kaybetmek yerine akıllı telefonlarıyla alışverişlerini taramalarını ve ödemelerini yapmalarını sağlar. MishiPay ile Tara ve Git Teknoloji sayesinde alışveriş yapanlar, ürünlerin üzerindeki barkodu okutmak ve ödeme yapmak için kendi telefonlarını kullanabilir ve ardından mağazadan ayrılabilirler. Çalışmalar mağaza içi kuyruğun küresel perakende sektörüne yılda yaklaşık 200 milyar dolara mal olduğunu ortaya koyuyor.
Teknolojimiz, kullanıcıların MishiPay özellikli mağazaları bulmasına, fiziksel mağaza içindeki ürün barkodlarını taramasına ve ardından istedikleri dijital ödeme yöntemini kullanarak ödeme yapmasına olanak tanıyan GPS sensörleri ve kameralar gibi cihaz donanımı özelliklerine dayanır. Scan & Go teknolojimizin ilk sürümleri, platforma özel iOS ve Android uygulamalarıydı ve ilk benimseyenler teknolojiyi çok sevdi. Bir PWA’ya geçişin işlemleri nasıl 10 kat artırdığını ve 2,5 yıllık kuyruk tasarrufu sağladığını öğrenmek için okumaya devam edin!
10×
Artan işlemler
Meydan okumak #
Kullanıcılar, sırayı atlamalarına ve sorunsuz bir mağaza içi deneyim yaşamalarına olanak tanıdığından, teknolojimizi bir kuyrukta veya ödeme sırasında beklerken son derece yararlı buluyor. Ancak bir Android veya iOS uygulamasını indirmenin zorluğu, kullanıcıların değere rağmen teknolojimizi seçmemelerine neden oldu. Bu, MishiPay için büyüyen bir zorluktu ve daha düşük bir giriş engeli ile kullanıcı benimsemesini artırmamız gerekiyordu.
Çözüm #
PWA’yı oluşturma ve başlatma konusundaki çabalarımız, kurulum güçlüklerini ortadan kaldırmamıza yardımcı oldu ve yeni kullanıcıları teknolojimizi fiziksel bir mağazada denemeye, kuyruğu atlamaya ve sorunsuz bir alışveriş deneyimi yaşamaya teşvik etti. Lansmandan bu yana, platforma özel uygulamalarımıza kıyasla PWA’mızın kullanıcı tarafından benimsenmesinde büyük bir artış gördük.
Teknik derin dalış #
MishiPay özellikli mağazaların yerini bulma #
Bu özelliği etkinleştirmek için, getCurrentPosition() IP tabanlı bir geri dönüş çözümü ile birlikte API.
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 iyi çalıştı, ancak daha sonra aşağıdaki nedenlerden dolayı MishiPay kullanıcıları için büyük bir sorun olduğu kanıtlandı:
- IP tabanlı fallback çözümlerinde konum yanlışlıkları.
- Bölge başına büyüyen MishiPay etkin mağaza listesi, kullanıcıların bir listeyi kaydırmasını ve doğru mağazayı belirlemesini gerektiriyor.
- Kullanıcılar yanlışlıkla bazen yanlış mağazayı seçerek satın almaların yanlış kaydedilmesine neden oluyor.
Bu sorunları çözmek için, her mağaza için mağaza içi ekranlara benzersiz coğrafi konumlu QR kodları yerleştirdik. Daha hızlı bir katılım deneyiminin yolunu açtı. Kullanıcılar, Scan & Go web uygulamasına erişmek için mağazalarda bulunan pazarlama materyallerinin üzerinde basılı coğrafi konumlu QR kodlarını taramaları yeterlidir. Bu şekilde, web adresini yazmaktan kurtulabilirler. mishipay.shop hizmete erişmek için.
ürünleri tarama #
MishiPay uygulamasındaki temel özelliklerden biri barkod taramadır, çünkü bu, kullanıcılarımıza kendi satın alımlarını tarama ve başka türlü kasaya ulaşmadan önce bile devam eden toplamı görme yetkisi verir.
Web’de bir tarama deneyimi oluşturmak için üç temel katman belirledik.
Video akışı #
yardımı ile getUserMedia() yöntemiyle, kullanıcının geri görüş kamerasına aşağıda listelenen kısıtlamalar ile erişebiliriz. Yöntemin çağrılması, kullanıcıların kameralarına erişimi kabul etmeleri veya reddetmeleri için otomatik olarak bir istemi tetikler. Video akışına erişimimiz olduğunda, onu 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ışındaki bir barkodu algılamak için, kareleri periyodik olarak yakalamamız ve bunları kod çözücü katmanına aktarmamız gerekir. Bir kare yakalamak için akışları basitçe çizeriz. VideoElement üzerine HTMLCanvasElement kullanmak drawImage() yöntemi Tuval API’sı.
/**
* 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 durumları için, bu katman ayrıca kırpma, döndürme veya gri tonlamaya dönüştürme gibi bazı ön işleme görevlerini de gerçekleştirir. Bu görevler CPU yoğun olabilir ve barkod tarama uzun süren bir işlem olduğu için uygulamanın yanıt vermemesine neden olabilir. yardımı ile Ekran DışıTuval API ile, CPU-yoğun görevi bir web çalışanına devredebiliriz. Donanım grafik hızlandırmasını destekleyen cihazlarda, WebGL API ve WebGL2RenderingContext CPU yoğun ön işleme görevlerindeki kazanımları optimize edebilir.
kod çözücü katmanı #
Son katman, işleme katmanı tarafından yakalanan çerçevelerden barkodların kodunun çözülmesinden sorumlu olan kod çözücü katmanıdır. sayesinde Şekil Algılama API’sı (henüz tüm tarayıcılarda mevcut değildir) tarayıcının kendisi bir tarayıcıdan barkodun kodunu çözer. ImageBitmapSourcehangi olabilir img öğe, bir SVG image eleman, bir video eleman, bir canvas eleman, bir Blob nesne, bir ImageData nesne veya bir ImageBitmap nesne.
/**
* 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;
}
}
Henüz Shape Detection API’yi desteklemeyen cihazlarda, barkodların kodunu çözmek için bir geri dönüş çözümüne ihtiyacımız var. Shape Detection API, bir getSupportedFormats() Shape Detection API ile yedek çözüm arasında geçiş yapmaya yardımcı olan yöntem.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Yedek çözüm #
Taramayı gerçekleştirmek için herhangi bir web uygulamasıyla kolayca entegre edilebilen çeşitli açık kaynaklı ve kurumsal tarama kitaplıkları mevcuttur. İşte MishiPay’in önerdiği kitaplıklardan bazıları.
Yukarıdaki kitaplıkların tümü, yukarıda tartışılan tüm katmanları oluşturan tam teşekküllü SDK’lardır. Ayrıca çeşitli tarama işlemlerini desteklemek için arayüzler sunarlar. İş gerekçesi için gereken barkod biçimlerine ve algılama hızına bağlı olarak, Wasm ve Wasm olmayan çözümler arasında bir karar verilebilir. Barkodu çözmek için ek bir kaynak (Wasm) gerektirme yüküne rağmen, Wasm çözümleri doğruluk açısından Wasm olmayan çözümlerden daha iyi performans gösterir.
Tırmanır birincil tercihimizdi. Ticari kullanım durumlarımız için gereken tüm barkod biçimlerini destekler; tarama hızında mevcut tüm açık kaynak kitaplıklarını geride bırakır.
Taramanın geleceği #
Şekil Algılama API’si tüm büyük tarayıcılar tarafından tam olarak desteklendiğinde, potansiyel olarak yeni bir HTML öğemiz olabilir. <scanner> bir barkod tarayıcı için gerekli yeteneklere sahiptir. MishiPay’deki Mühendislik, Scan & Go ve diğerleri gibi deneyimlere olanak tanıyan artan sayıdaki açık kaynak ve lisanslı kitaplıklar nedeniyle, barkod tarama işlevinin yeni bir HTML öğesi olması için sağlam bir kullanım durumu olduğuna inanıyor.
Çözüm #
Uygulama yorgunluğu, geliştiricilerin ürünleri pazara girdiğinde karşılaştıkları bir sorundur. Kullanıcılar genellikle bir uygulamanın onlara verdiği değeri onu indirmeden önce anlamak isterler. MishiPay’in alışveriş yapanların zamanından tasarruf ettiği ve deneyimlerini iyileştirdiği bir mağazada, bir uygulamayı kullanmadan önce indirmeyi beklemek mantıksız. PWA’mızın yardımcı olduğu yer burasıdır. Giriş engelini ortadan kaldırarak işlemlerimizi 10 kat artırdık ve kullanıcılarımızın 2,5 yıl kuyrukta bekleme derdinden kurtulmalarını sağladık.
teşekkürler #
Bu makale tarafından incelendi Joe Karışık.