PWA'ya geçişin MishiPay'in işine nasıl yardımcı olduğunu öğrenin.
MishiPay, alışveriş yapanların kasada sıra bekleyerek zaman kaybetmek yerine akıllı telefonlarıyla alışverişlerini tarayıp ödeme yapmalarını sağlar. MishiPay'in Scan & Go teknolojisi sayesinde, müşteriler ürünlerin barkodunu taramak ve ödeme yapmak için kendi telefonlarını kullanıp mağazadan ayrılabilir. Araştırmalar, mağaza içi kuyrukların küresel perakende sektörüne yıllık 200 milyar ABD doları kaybettirdiğini gösteriyor.
Teknolojimiz, kullanıcıların MishiPay'in etkinleştirildiği mağazaları bulmasına, fiziksel mağazadaki ürün barkodlarını taramasına ve ardından tercih ettikleri dijital ödeme yöntemini kullanarak ödeme yapmasına olanak tanıyan GPS sensörleri ve kameralar gibi cihaz donanım özelliklerine dayanır. Tarayıp Al teknolojimizin ilk sürümleri platforma özel iOS ve Android uygulamalarıydı ve ilk kullanıcılar bu teknolojiyi çok sevdi. PWA'ya geçişin işlem sayısını 10 kat artırdığını ve 2,5 yıllık kuyruk süresini nasıl ortadan kaldırdığını öğrenmek için okumaya devam edin.
10×
İşlem sayısında artış
2,5 yıl
Sıraya alma işlemi kaydedildi
Zorluk
Teknolojimiz, kullanıcıların kuyruğu atlamasına ve mağazada sorunsuz bir deneyim yaşamasına olanak tanıdığı için kuyrukta veya ödeme sırasında beklerken son derece faydalı olur. Ancak Android veya iOS uygulaması indirme zorluğu, kullanıcıların sunduğumuz değere rağmen teknolojimizi tercih etmemesine neden oluyordu. Bu durum MishiPay için giderek büyüyen bir sorundu ve daha düşük bir giriş eşiğiyle kullanıcı edinme oranını artırmamız gerekiyordu.
Çözüm
PWA'yı oluşturma ve kullanıma sunma çabalarımız, yükleme zorluğunu ortadan kaldırmamıza yardımcı oldu ve yeni kullanıcıları fiziksel bir mağazada teknolojimizi denemeye, sırayı atlamaya ve sorunsuz bir alışveriş deneyimi yaşamaya teşvik etti. Bu özellik kullanıma sunulduğundan beri, platforma özel uygulamalarımıza kıyasla PWA'mızın kullanıcılar tarafından benimsenme oranında büyük bir artış gördük.
Teknik ayrıntılı inceleme
MishiPay'in etkinleştirildiği mağazaları bulma
Bu özelliği etkinleştirmek için IP tabanlı bir yedek çözümle birlikte getCurrentPosition() API'yi kullanırız.
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 sonuç vermişti 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ı yedek çözümlerdeki konum yanlışlıkları.
- Bölge başına MishiPay'in etkinleştirildiği mağazaların listesi büyüdükçe kullanıcıların listede kaydırarak doğru mağazayı bulması gerekir.
- Kullanıcılar bazen yanlışlıkla yanlış mağazayı seçtiğinden satın alma işlemleri yanlış kaydedilir.
Bu sorunları çözmek için her mağazanın mağaza içi ekranlarına benzersiz coğrafi konumlu QR kodları yerleştirdik. Bu, daha hızlı bir ilk katılım deneyiminin önünü açtı. Kullanıcılar, mağazalardaki pazarlama materyallerine basılmış coğrafi konumlu QR kodlarını tarayarak Scan & Go web uygulamasına erişir.
Bu sayede, hizmete erişmek için web adresini mishipay.shop yazmaktan kurtulabilirler.
Ürünleri tarama
MishiPay uygulamasındaki temel özelliklerden biri barkod taramadır. Bu özellik, kullanıcıların kendi satın alma işlemlerini taramasına ve toplam tutarı, kasaya ulaşmadan önce görmesine olanak tanır.
Web'de tarama deneyimi oluşturmak için üç temel katman belirledik.
Video akışı
getUserMedia() yöntemiyle, kullanıcının arka görüş kamerasına aşağıdaki kısıtlamalarla erişebiliriz. Yöntemin çağrılması, kullanıcıların kameralarına erişimi kabul etmelerini veya reddetmelerini isteyen bir istemi otomatik olarak tetikler. Video akışına erişim sağladığımızda, 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 kareleri düzenli olarak yakalayıp kod çözücü katmanına aktarmamız gerekir. Bir kare yakalamak için VideoElement akışlarını drawImage() Canvas API yöntemiyle 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 yoğun olabilir ve barkod tarama uzun süren bir işlem olduğundan uygulamanın yanıt vermemesine neden olabilir. OffscreenCanvas API'nin yardımıyla CPU yoğun görevleri bir web çalışanıyla boşaltabiliriz. Donanım grafik hızlandırmayı destekleyen cihazlarda, WebGL API'si ve WebGL2RenderingContext, CPU yoğun ön işleme görevlerinde kazanımları optimize edebilir.
Kod çözücü katmanı
Son katman, işleme katmanı tarafından yakalanan karelerdeki barkodların kodunu çözmekten sorumlu olan kod çözücü katmanıdır. Shape Detection API (henüz tüm tarayıcılarda kullanılamamaktadır) sayesinde tarayıcı, barkodu ImageBitmapSource öğesinden (img öğesi, SVG image öğesi, video öğesi, canvas öğesi, Blob nesnesi, ImageData nesnesi veya ImageBitmap nesnesi olabilir) çözer.
/**
* 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ş yapmaya yardımcı olan bir getSupportedFormats() yöntemi sunar.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Yedek çözüm
Tarama işlemini uygulamak için herhangi bir web uygulamasına kolayca entegre edilebilecek çeşitli açık kaynaklı ve kurumsal tarama kitaplıkları mevcuttur. MishiPay'in önerdiği kütüphanelerden bazılarını aşağıda bulabilirsiniz.
Bu kitaplıkların tümü, bahsedilen tüm katmanları içeren tam teşekküllü SDK'lardır. Ayrıca, çeşitli tarama işlemlerini desteklemek için arayüzler de sunarlar. Barkod biçimlerine ve kullanım alanında gereken algılama hızına bağlı olarak Wasm ve Wasm dışı çözümler arasında bir seçim yapılabilir. Barkodun kodunu çözmek için ek bir kaynak (Wasm) gerektirmesine rağmen Wasm çözümleri, doğruluk açısından Wasm olmayan çözümlerden daha iyi performans gösterir.
Birincil tercihimiz Scandit oldu. İşletmemizin kullanım alanları için gereken tüm barkod biçimlerini destekler ve tarama hızı açısından mevcut tüm açık kaynaklı 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 desteklendiğinde, barkod tarayıcı için gereken özelliklere sahip yeni bir HTML öğesi <scanner> kullanabiliriz. MishiPay'deki mühendislik ekibi, "Tara ve Git" gibi deneyimleri ve daha birçok deneyimi mümkün kılan açık kaynaklı ve lisanslı kitaplıkların sayısının artması nedeniyle barkod tarama işlevinin yeni bir HTML öğesi olarak kullanılması için geçerli bir kullanım alanı olduğuna inanıyor.
Sonuç
Uygulama yorgunluğu, geliştiricilerin ürünleri piyasaya girdiğinde karşılaştığı bir sorundur. Kullanıcılar genellikle bir uygulamayı indirmeden önce uygulamanın kendilerine sağladığı değeri anlamak ister. MishiPay'in alışveriş yapan kullanıcıların zamanını kurtardığı ve deneyimlerini iyileştirdiği bir mağazada, uygulamayı kullanabilmeleri için indirme işleminin tamamlanmasını beklemeleri mantıksızdır. PWA'mız bu konuda yardımcı olur.
Giriş engelini ortadan kaldırarak işlem sayımızı 10 kat artırdık ve kullanıcılarımızın kuyrukta 2, 5 yıl beklemelerini önledik.
Teşekkür
Bu makale Joe Medley tarafından incelendi.