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ıraya girerek zaman kaybetmek yerine, akıllı telefonlarını kullanarak tarama yapıp ödeme yapmalarına olanak tanıyor. MishiPay'in Scan & Go teknolojisi sayesinde alışveriş yapanlar, kendi telefonlarıyla ürünlerin barkodunu tarayıp ödeme yapabilir ve ardından mağazadan ayrılabilirler. Araştırmalar, mağazada kuyruğa eklemenin küresel 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 seçtikleri 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 özgü iOS ve Android uygulamalarıydı ve ilk kullanıcılar bu teknolojiye bayıldılar. PWA'ya geçişin, işlemleri nasıl 10 kat artırdığını ve 2,5 yıllık sıralamadan nasıl tasarruf ettiğini öğrenmek için okumaya devam edin.
10×
İşlem sayısında artış
2,5 yıl
Sıra kaydedildi
Zorluk
Kullanıcılar sırada beklerken veya ödeme kuyruğunda beklerken teknolojimizi son derece faydalı bulur. Zira bu sayede sırayı atlayıp mağaza içinde sorunsuz bir deneyim yaşayabilirler. Ancak bir Android veya iOS uygulamasını indirmenin zahmetinden dolayı kullanıcılar, sunduğu değere rağmen bizim teknolojimizi tercih etmemeye başladılar. MishiPay için gitgide artan bir zorluktu ve daha az giriş engeliyle kullanıcı benimseme oranını artırmamız gerekiyordu.
Çözüm
PWA'yı derleme ve kullanıma sunma çabalarımız, yükleme zorluğunu ortadan kaldırmamıza yardımcı oldu ve yeni kullanıcıları teknolojimizi fiziksel bir mağazada denemeye, sırayı 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 sayesinde kullanıcı benimseme oranında 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'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 işe yaramıştı, ancak daha sonra aşağıdaki nedenlerle MishiPay kullanıcıları için büyük bir sorun olduğu kanıtlandı:
- IP tabanlı yedek çözümlerdeki konum hataları.
- Bölge başına ve bölgede MishiPay'in etkin olduğu mağazaların sayısı giderek artıyor. Kullanıcıların listeyi kaydırarak doğru mağazayı belirlemesi gerekiyor.
- Kullanıcılar bazen yanlışlıkla yanlış mağazayı seçerler ve bu da satın alma işlemlerinin hatalı kaydedilmesine neden olur.
Bu sorunları gidermek için her bir mağazanın ekranlarına coğrafi konumlu benzersiz QR kodları yerleştirdik. Daha hızlı bir ilk katılım deneyiminin önünü açtı. Scan & Go web uygulamasına erişmek için kullanıcıların, mağazalarda bulunan pazarlama materyallerinde basılı olan coğrafi konumlu QR kodlarını taramaları yeterlidir.
Bu şekilde, hizmete erişmek için web adresini (mishipay.shop) yazmak zorunda kalmazlar.
Ürünler taranıyor
MishiPay uygulamasının temel özelliklerinden biri de barkod taramadır. Bu özellik, kullanıcılarımıza aksi halde nakit kasaya ulaşmadan önce bile kendi satın alma işlemlerini tarama ve değişen toplam tutarı görme olanağı 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ğıdaki kısıtlamalarla erişebiliyoruz. Yöntemin çağrılması, kullanıcıların kameralarına erişimi kabul etmesi veya reddetmesi yönünde otomatik olarak bir istemi tetikler. Video akışına eriştikten sonra, akışı aşağıda gösterildiği gibi bir video öğesine geçirebiliriz:
/**
* 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 barkodu tespit etmek için belirli aralıklarla kareleri yakalamamız ve kod çözücü katmanına aktarmamız gerekir. Bir kareyi yakalamak için Canvas API'nin drawImage() yöntemini kullanarak VideoElement bölgesinden gelen akışları bir HTMLCanvasElement üzerine çiziyoruz.
/**
* 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ında 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'yu yoğun olarak kullanabilir ve barkod taramanın uzun süren bir işlem olması nedeniyle uygulamanın yanıt vermemesine neden olabilir. OffscreenCanvas API'nin yardımıyla CPU yoğun görevi bir web çalışanına boşaltabiliriz. Donanım grafik hızlandırmasını destekleyen cihazlarda WebGL API ve WebGL2RenderingContext yoğun CPU kullanan ön işleme görevlerinde kazanımları optimize edebilir.
Kod çözücü katmanı
Son katman, işleme katmanı tarafından yakalanan çerçevelerdeki barkodların kodunu çözmekten sorumlu olan kod çözücü katmanıdır. Shape Detection API (henüz tüm tarayıcılarda kullanıma sunulmamıştır) sayesinde tarayıcı, barkodun kodunu bir ImageBitmapSource öğesinden çözer. Bu kod bir img öğesi, SVG image öğesi, video öğesi, canvas öğesi, 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'sını desteklemeyen cihazlarda barkodların kodunu çözmek için yedek bir çözüme ihtiyacımız vardır. 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 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 kitaplıklardan bazılarını burada bulabilirsiniz.
Yukarıdaki kitaplıkların tümü, yukarıda ele alınan tüm katmanları oluşturan tam kapsamlı SDK'lardır. Ayrıca, çeşitli tarama işlemlerini destekleyen arayüzler de sunarlar. İş gerekçesi için gereken barkod biçimlerine ve algılama hızına bağlı olarak, Wasm ve Wasm dışı çözümler arasında karar alınabilir. Barkodu çözmek için ek bir kaynak (Wasm) gerekmesine rağmen Wasm çözümleri, doğruluk açısından Wasm dışı çözümden daha iyi performans gösterir.
Scandit birincil tercihimizdi. İş amaçlı kullanım alanlarımız için gereken tüm barkod biçimlerini destekler; tarama hızı açısından mevcut tüm açık kaynak kitaplıklardan daha iyidir.
Taramanın geleceği
Şekil Algılama API'sı başlıca tüm tarayıcılar tarafından tam olarak desteklendikten sonra, barkod tarayıcı için gereken özelliklere sahip yeni bir HTML öğesine <scanner> sahip olabiliriz. MishiPay mühendislik ekibi, Scan & Go ve daha birçok deneyime olanak tanıyan açık kaynak ve lisanslı kitaplıkların sayısının artması nedeniyle barkod tarama işlevinin yeni bir HTML öğesi olduğu için sağlam bir kullanım alanı olduğuna inanıyor.
Sonuç
Uygulama yorgunluğu, ürünleri pazara girdiğinde geliştiricilerin karşılaştığı bir sorundur. Kullanıcılar genellikle bir uygulamayı indirmeden önce, onlara sunduğu değeri anlamak isterler. MiishiPay'in alışveriş yapan kullanıcılara zaman kazandırıp deneyimlerini iyileştirdiği bir mağazada, uygulamayı kullanmadan önce indirme yapılmasını beklemek mantıksızdır. PWA'mız bu konuda size yardımcı olur. Girişin önündeki engeli kaldırarak işlemlerimizi 10 kat artırdık ve kullanıcılarımızın bekleme sırasında 2, 5 yıllık bekleme süresinden tasarruf etmelerini sağladık.
Teşekkür
Bu makale Joe Medley tarafından incelendi.