Pelajari cara beralih ke PWA membantu bisnis MishiPay.
MishiPay memungkinkan pembeli memindai dan membayar belanjaan mereka dengan smartphone, bukan membuang waktu mengantre di kasir. Dengan teknologi Scan & Go MishiPay, pembeli dapat menggunakan ponsel mereka sendiri untuk memindai kode batang pada item dan membayarnya, lalu keluar dari toko. Studi mengungkapkan bahwa setiap tahun, antrean di toko merugikan sektor retail global sebesar $200 miliar.
Teknologi kami mengandalkan kemampuan hardware perangkat seperti sensor GPS dan kamera yang memungkinkan pengguna menemukan toko yang mendukung MishiPay, memindai kode batang item di dalam toko fisik, lalu membayar menggunakan metode pembayaran digital pilihan mereka. Versi awal teknologi Scan & Go kami adalah aplikasi iOS dan Android khusus platform, dan pengguna awal menyukai teknologi ini. Baca terus untuk mempelajari cara beralih ke PWA yang meningkatkan transaksi hingga 10 kali lipat dan menghemat waktu antrean hingga 2,5 tahun.
10×
Peningkatan transaksi
2,5 tahun
Antrean disimpan
Tantangan
Pengguna menganggap teknologi kami sangat membantu saat menunggu dalam antrean atau di jalur checkout, karena memungkinkan mereka melewati antrean dan mendapatkan pengalaman di toko yang lancar. Namun, kerumitan mendownload aplikasi Android atau iOS membuat pengguna tidak memilih teknologi kami meskipun ada nilainya. Hal ini menjadi tantangan yang semakin besar bagi MishiPay, dan kami perlu meningkatkan adopsi pengguna dengan hambatan yang lebih rendah.
Solusi
Upaya kami dalam membangun dan meluncurkan PWA membantu kami menghilangkan kerumitan penginstalan dan mendorong pengguna baru untuk mencoba teknologi kami di dalam toko fisik, melewati antrean, dan mendapatkan pengalaman berbelanja yang lancar. Sejak peluncuran, kami telah melihat lonjakan besar dalam adopsi pengguna dengan PWA kami dibandingkan dengan aplikasi khusus platform kami.
Pembahasan mendalam teknis
Menemukan toko yang mengaktifkan MishiPay
Untuk mengaktifkan fitur ini, kami mengandalkan
getCurrentPosition()
API beserta solusi penggantian berbasis IP.
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,
);
Pendekatan ini berfungsi dengan baik di versi awal aplikasi, tetapi kemudian terbukti menjadi masalah besar bagi pengguna MishiPay karena alasan berikut:
- Ketidakakuratan lokasi dalam solusi penggantian berbasis IP.
- Daftar toko yang mendukung MishiPay yang terus bertambah di setiap wilayah mengharuskan pengguna men-scroll daftar dan mengidentifikasi toko yang benar.
- Pengguna terkadang secara tidak sengaja memilih toko yang salah, sehingga menyebabkan pembelian dicatat dengan tidak benar.
Untuk mengatasi masalah ini, kami menyematkan kode QR geolokasi unik pada tampilan di toko untuk setiap toko. Hal ini membuka jalan bagi pengalaman orientasi yang lebih cepat. Pengguna memindai kode QR yang bergeolokasi dan dicetak pada materi pemasaran yang ada di toko untuk mengakses aplikasi web Scan & Go.
Dengan cara ini, mereka dapat menghindari pengetikan alamat web mishipay.shop untuk mengakses layanan.
Memindai produk
Fitur inti di aplikasi MishiPay adalah pemindaian kode batang karena fitur ini memungkinkan pengguna kami memindai pembelian mereka sendiri dan melihat total yang sedang berjalan bahkan sebelum mereka mencapai kasir.
Untuk membangun pengalaman pemindaian di web, kami telah mengidentifikasi tiga lapisan inti.
Streaming video
Dengan bantuan metode
getUserMedia(), kita dapat mengakses kamera belakang pengguna dengan batasan yang tercantum di bawah. Memanggil metode
akan otomatis memicu perintah bagi pengguna untuk menyetujui atau menolak akses ke kamera mereka. Setelah memiliki
akses ke aliran video, kita dapat meneruskannya ke elemen video seperti yang ditunjukkan di bawah:
/**
* 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!!`);
}
}
Lapisan pemrosesan
Untuk mendeteksi kode batang dalam aliran video tertentu, kita perlu mengambil frame secara berkala dan mentransfernya ke lapisan dekoder. Untuk merekam frame, kita menggambar streaming dari VideoElement ke
HTMLCanvasElement menggunakan
metode drawImage()
dari 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');
}
}
Untuk kasus penggunaan lanjutan, lapisan ini juga melakukan beberapa tugas pra-pemrosesan seperti memangkas,
memutar, atau mengonversi ke skala abu-abu. Tugas ini dapat menggunakan banyak CPU dan menyebabkan aplikasi tidak responsif karena pemindaian kode batang adalah operasi yang berjalan lama. Dengan bantuan API
OffscreenCanvas, kita dapat memindahkan
tugas yang menggunakan CPU secara intensif ke web worker. Pada perangkat yang mendukung akselerasi grafis hardware,
WebGL API dan
WebGL2RenderingContext-nya dapat
mengoptimalkan peningkatan pada tugas pra-pemrosesan yang intensif CPU.
Lapisan decoder
Lapisan terakhir adalah lapisan dekoder yang bertanggung jawab untuk mendekode kode batang dari frame yang diambil oleh lapisan pemrosesan. Berkat
Shape Detection API (yang belum tersedia di semua browser), browser itu sendiri mendekode kode batang dari
ImageBitmapSource, yang dapat berupa elemen img, elemen SVG image, elemen video, elemen
canvas, objek Blob, objek ImageData, atau objek ImageBitmap.
/**
* 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;
}
}
Untuk perangkat yang belum mendukung Shape Detection API, kita memerlukan solusi penggantian untuk mendekode
kode batang. Shape Detection API mengekspos metode
getSupportedFormats()
yang membantu beralih antara Shape Detection API dan solusi penggantian.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Solusi penggantian
Beberapa library pemindaian open source dan perusahaan tersedia dan dapat diintegrasikan dengan mudah ke aplikasi web mana pun untuk menerapkan pemindaian. Berikut beberapa library yang direkomendasikan MishiPay.
Semua library ini adalah SDK lengkap yang menyusun semua lapisan yang dibahas. API ini juga mengekspos antarmuka untuk mendukung berbagai operasi pemindaian. Bergantung pada format kode batang dan kecepatan deteksi yang diperlukan untuk kasus penggunaan bisnis, keputusan dapat diambil antara solusi Wasm dan non-Wasm. Meskipun memerlukan resource tambahan (Wasm) untuk mendekode barcode, solusi Wasm mengungguli solusi non-Wasm dalam hal akurasi.
Scandit adalah pilihan utama kami. Library ini mendukung semua format barcode yang diperlukan untuk kasus penggunaan bisnis kami; library ini mengungguli semua library open source yang tersedia dalam kecepatan pemindaian.
Masa depan pemindaian
Setelah Shape Detection API didukung sepenuhnya oleh semua browser utama, kita berpotensi memiliki elemen HTML baru <scanner> yang memiliki kemampuan yang diperlukan untuk pemindai kode batang. Tim Engineering di MishiPay yakin bahwa ada kasus penggunaan yang solid untuk fungsi pemindaian kode batang sebagai elemen HTML baru karena semakin banyaknya library open source dan berlisensi yang memungkinkan pengalaman seperti Scan & Go dan banyak lainnya.
Kesimpulan
Kelelahan aplikasi adalah masalah yang dihadapi developer saat produk mereka memasuki pasar. Pengguna sering kali ingin memahami nilai yang diberikan aplikasi sebelum mendownloadnya. Di toko, tempat MishiPay menghemat waktu pembeli dan meningkatkan pengalaman mereka, menunggu download sebelum mereka dapat menggunakan aplikasi adalah hal yang tidak intuitif. Di sinilah PWA kami membantu.
Dengan menghilangkan hambatan untuk masuk, kami telah meningkatkan transaksi kami sebanyak 10 kali dan memungkinkan pengguna kami menghemat waktu antrean selama 2,5 tahun.
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley.