PWA'ya geçişin MishiPay'in işine nasıl yardımcı olduğunu öğrenin.
MishiPay, alışveriş yapanların ödeme sırasında sırada beklemek yerine akıllı telefonlarıyla alışverişlerini taramasına ve ödeme yapmasına olanak tanır. MishiPay'in Tara ve Git teknolojisiyle müşteriler, kendi telefonlarını kullanarak ürünlerin barkodunu tarayabilir, ödeme yapabilir ve mağazadan ayrılabilir. Araştırmalar, mağazada sıraya ekleme işleminin global perakende sektörüne yılda yaklaşık 200 milyar ABD dolarına mal olduğunu gösteriyor.
Teknolojimiz, kullanıcıların MishiPay özellikli mağazaları bulmasına, fiziksel mağazadaki ü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 özelliklerinden yararlanır. Scan &Go teknolojimizin ilk sürümleri platforma özgü iOS ve Android uygulamalarıydı ve ilk kullanıcılar bu teknolojiyi sevdi. Bir PWA'ya geçişin işlemleri 10 kat artırdığını ve 2,5 yıl boyunca kuyrukta bekleme süresini azalttığını öğrenmek için okumaya devam edin.
10×
İşlem sayısında artış
2,5 yıl
Sıraya ekleme işlemi kaydedildi
Zorluk
Kullanıcılar, kuyruğu atlamalarına ve sorunsuz bir mağaza içi deneyim yaşamalarına olanak tanıdığı için teknolojimizi kuyrukta veya ödeme sırasında beklerken son derece faydalı bulurlar. Ancak Android veya iOS uygulaması indirme zahmeti, kullanıcıların değere rağmen teknolojimizi seçmemesine neden oldu. Bu, MishiPay için giderek büyüyen bir sorundu ve daha düşük bir giriş barajıyla kullanıcıların uygulamayı benimsemesini artırmamız gerekiyordu.
Çözüm
PWA'yı oluşturma ve kullanıma sunma çalışmalarımız, yüklemeyle ilgili sorunları ortadan kaldırmamıza yardımcı oldu ve yeni kullanıcıların teknolojimizi fiziksel bir mağazada denemesini, kuyruğu atlamasını ve sorunsuz bir alışveriş deneyimi yaşamasını sağladı. 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.
Ayrıntılı teknik inceleme
MishiPay'in etkin olduğu mağazaları bulma
Bu özelliği etkinleştirmek için IP tabanlı bir yedek çözümle birlikte getCurrentPosition() API'den yararlanıyoruz.
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 aşağıdaki nedenlerden dolayı MishiPay kullanıcıları için büyük bir sorun teşkil ettiği kanıtlandı:
- IP tabanlı yedek çözümlerdeki konum hataları.
- Bölgeye göre giderek büyüyen bir MishiPay özellikli mağaza girişi olması, kullanıcıların listeyi kaydırarak doğru mağazayı belirlemesini gerektiriyor.
- Kullanıcılar bazen yanlışlıkla yanlış mağazayı seçerek satın alma işlemlerinin yanlış kaydedilmesine neden olur.
Bu sorunları gidermek için her mağazanın mağaza içi ekranlarına coğrafi konuma dayalı benzersiz QR kodları yerleştirdik. İlk katılım deneyiminin yolunu açtı. Kullanıcılar, Tara ve Al web uygulamasına erişmek için mağazalarda bulunan pazarlama materyallerine basılı coğrafi konumlu QR kodlarını taramalıdır.
Bu sayede, hizmete erişmek için mishipay.shop web adresini yazmak zorunda kalmaz.
Ürünler taranıyor
MishiPay uygulamasının temel özelliklerinden biri barkod taramasıdır. Bu özellik, kullanıcılarımızın kendi satın alma işlemlerini taramasına ve kasaya ulaşmadan önce bile değişen toplam tutarı görmesine olanak tanır.
Web'de bir tarama deneyimi oluşturmak için üç temel katman belirledik.
Video akışı
getUserMedia() yöntemi sayesinde, kullanıcının arka görüş kamerasına aşağıda belirtilen kısıtlamalarla erişebiliyoruz. Yöntemin çağrılması, kullanıcıların kameralarına erişimi kabul etmeleri veya reddetmeleri için otomatik olarak bir istem tetikler. Video akışına eriştikten sonra, aşağıdaki 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 kareleri düzenli aralıklarla yakalayıp kod çözücü katmanına aktarmamız gerekir. Bir kare yakalamak için Canvas API'nin drawImage() yöntemini kullanarak VideoElement'deki akışları bir HTMLCanvasElement üzerine çizeriz.
/**
* 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');
}
}
Bu katman, gelişmiş kullanım alanları için 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'ya yoğun olabilir ve barkod taramanın uzun süren bir işlem olması nedeniyle uygulamanın yanıt vermemesine neden olabilir. OffscreenCanvas API'sinin yardımıyla, CPU yoğun görevin yükünü bir web işleyicisine aktarabiliriz. Donanım grafik hızlandırmayı destekleyen cihazlarda WebGL API ve WebGL2RenderingContext, CPU'ya yoğun ön işleme görevlerindeki kazançları optimize edebilir.
Kod çözücü katmanı
Son katman, işleme katmanı tarafından yakalanan karelerden barkodların kodunu çözmekten sorumlu kod çözücü katmanıdır. Shape Detection API (henüz tüm tarayıcılarda kullanılamamaktadır) sayesinde tarayıcının kendisi barkodun kodunu bir ImageBitmapSource öğesi üzerinden çözer. Bu ImageBitmapSource öğesi bir img öğesi, bir SVG image öğesi, bir video öğesi, bir canvas öğesi, bir Blob nesnesi, ImageData nesnesi veya ImageBitmap nesnesi olabilir.
/**
* 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 Şekil Algılama API'sini desteklemeyen cihazlarda, barkodların kodunu çözmek için yedek bir çözüme ihtiyacımız var. Shape Detection API, Shape Detection API ile yedek çözüm arasında geçiş yapmanıza yardımcı olan bir getSupportedFormats()
yöntemi sağlar.
// 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ı uygulamak için herhangi bir web uygulamasıyla kolayca entegre edilebilen çeşitli açık kaynak ve kurumsal tarama kitaplıkları mevcuttur. MishiPay'in önerdiği bazı kitaplıklar aşağıda verilmiştir.
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 destekleyecek arayüzler de sunar. İş örneği için gereken barkod biçimlerine ve algılama hızına bağlı olarak Wasm ve Wasm olmayan çözümler arasında karar verilebilir. Barkodun kodunu çözmek için ek bir kaynak (Wasm) gerektiren ek maliyete rağmen Wasm çözümleri, doğruluk açısından Wasm olmayan çözümlerden daha iyi performans gösterir.
Birincil tercihimiz Scandit oldu. İş kullanım alanları için gereken tüm barkod biçimlerini destekler; tarama hızında mevcut tüm açık kaynak kitaplıklardan daha iyidir.
Taramanın geleceği
Şekil Algılama API'si tüm büyük tarayıcılar tarafından tam olarak desteklendikten sonra, barkod tarayıcı için gerekli özelliklere sahip yeni bir HTML öğesi <scanner>'e sahip olabiliriz. MishiPay'deki mühendislik mühendisliği, Scan &Go ve diğer birçok deneyimi mümkün kılan açık kaynak ve lisanslı kitaplıkların sayısının artması nedeniyle barkod tarama işlevinin yeni bir HTML öğesi olması için sağlam bir kullanım alanı olduğuna inanıyor.
Sonuç
Uygulama yorgunluğu, geliştiricilerin ürünleri pazara girdiğinde karşılaştıkları bir sorundur. Kullanıcılar genellikle bir uygulamayı indirmeden önce uygulamanın kendilerine sağlayacağı değeri anlamak ister. MishiPay'in müşterilerin zamanını kurtardığı ve deneyimlerini iyileştirdiği bir mağazada, uygulamayı kullanabilmek için indirme işleminin tamamlanmasını beklemek kullanıcıların mantığına aykırıdır. İşte bu noktada PWA'mız devreye giriyor. Giriş engelini ortadan kaldırarak işlemlerimizi 10 kat artırdık ve kullanıcılarımıza kuyrukta bekleyen 2, 5 yıllık süreden tasarruf etme olanağı sağladık.
Teşekkür
Bu makale Joe Medley tarafından incelendi.