Pelajari bagaimana peralihan ke PWA membantu bisnis MishiPay.
MishiPay mendorong pembeli untuk memindai dan membayar belanja mereka dengan smartphone mereka, bukan membuang-buang waktu mengantre di {i>checkout<i}. Dengan Pemindaian & MishiPay Go kami, pembeli dapat menggunakan ponsel mereka untuk memindai kode batang pada item dan membayarnya, lalu meninggalkannya dari toko. Studi menunjukkan bahwa antrean di dalam toko membebani sektor retail global sekitar $200 miliar setiap tahunnya.
Teknologi kami bergantung pada kemampuan perangkat keras perangkat seperti sensor GPS dan kamera yang memungkinkan pengguna untuk menemukan toko yang mendukung MishiPay, memindai kode batang item di dalam toko fisik, lalu membayar menggunakan metode pembayaran digital pilihan mereka. Versi awal fitur Pemindaian & Teknologi Go ada aplikasi iOS dan Android khusus platform, dan pengguna awal menyukai teknologi ini. {i>Read<i} untuk mempelajari bagaimana beralih ke PWA meningkatkan transaksi 10 kali lipat dan menghemat 2,5 tahun mengantre!
10×
Peningkatan transaksi
2,5 tahun
Antrean disimpan
Tantangan
Pengguna merasa teknologi kami sangat membantu ketika mengantre atau check out, karena hal ini memungkinkan mereka untuk tidak mengantre dan medapatkan pengalaman yang lancar di toko. Namun, kerepotan mengunduh Aplikasi Android atau iOS membuat pengguna tidak memilih teknologi kami, apa pun nilainya. Itu adalah pertumbuhan untuk MishiPay, dan kami perlu meningkatkan adopsi pengguna dengan batasan masuk yang lebih rendah.
Solusi
Upaya kami dalam membangun dan meluncurkan PWA membantu kami menghilangkan kerepotan penginstalan dan mendorong pengguna baru untuk mencoba teknologi kami di dalam toko fisik, melewati antrean, dan memiliki pengalaman belanja yang lancar. Sejak peluncuran, kita telah melihat lonjakan besar dalam adopsi pengguna dengan PWA kami dibandingkan dengan aplikasi khusus platform.
Pembahasan mendalam teknis
Menemukan toko yang mendukung MishiPay
Untuk mengaktifkan fitur ini, kami mengandalkan
getCurrentPosition()
bersama dengan 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 bekerja dengan baik pada versi aplikasi sebelumnya, tetapi kemudian terbukti menimbulkan masalah besar untuk pengguna MishiPay karena alasan berikut:
- Ketidakakuratan lokasi dalam solusi penggantian berbasis IP.
- Listingan toko yang mendukung MishiPay per wilayah terus bertambah mengharuskan pengguna men-scroll daftar dan mengidentifikasi toko yang benar.
- Pengguna terkadang tidak sengaja memilih toko yang salah, sehingga pembelian dicatat secara tidak benar.
Untuk mengatasi masalah ini, kami menyematkan kode QR geolokasi unik di layar di toko untuk setiap kode
Anda. Solusi ini memungkinkan pengalaman orientasi yang lebih cepat. Pengguna cukup memindai QR geolokasi
kode yang dicetak pada materi pemasaran yang ada di toko untuk mengakses fitur Pemindaian & Aplikasi web Go.
Dengan cara ini, mereka dapat menghindari mengetik alamat web mishipay.shop untuk mengakses layanan.
Memindai produk
Fitur inti di aplikasi MishiPay adalah pemindaian kode batang karena fitur ini membantu pengguna kami untuk memindai pembelian sendiri dan melihat total biaya bahkan sebelum mereka seharusnya mendapatkan uang tunai mendaftar.
Untuk menciptakan 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
secara otomatis memicu permintaan bagi pengguna untuk menyetujui atau menolak akses ke kamera mereka. Setelah kita memiliki
akses ke streaming video, kita dapat meneruskannya ke elemen video seperti yang ditunjukkan di bawah ini:
/**
* 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 streaming video tertentu, kami perlu merekam frame dan mentransfernya secara berkala
ke lapisan decoder. Untuk merekam frame, kita cukup menggambar aliran data dari VideoElement ke
HTMLCanvasElement menggunakan
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 pemangkasan,
memutar, atau berubah
menjadi hitam putih. Tugas-tugas ini bisa menguras CPU dan menghasilkan aplikasi
tidak responsif mengingat bahwa pemindaian kode batang
adalah operasi yang berjalan lama. Dengan bantuan
OffscreenCanvas, kita dapat memindahkan beban
tugas intensif CPU ke pekerja web. Pada perangkat yang mendukung
akselerasi grafis hardware,
WebGL API dan
WebGL2RenderingContext dapat
mengoptimalkan perolehan pada tugas pra-pemrosesan yang
menggunakan CPU secara intensif.
Lapisan decoder
Lapisan terakhir adalah lapisan decoder yang bertanggung jawab untuk mendekode kode batang dari frame
ditangkap oleh lapisan pemrosesan. Berkat
Shape Detection API (yaitu
belum tersedia di semua browser) browser akan mendekode kode batang dari
ImageBitmapSource, yang dapat berupa elemen img, elemen image SVG, 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
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
Tersedia beberapa library pemindaian {i>open source<i} dan perusahaan yang dapat dengan mudah diintegrasikan dengan aplikasi web apa pun untuk menerapkan pemindaian. Berikut adalah beberapa library yang MishiPay bisa menjadi rekomendasi.
Semua library di atas adalah SDK lengkap yang menyusun semua lapisan yang dibahas di atas. Mereka juga mengekspos antarmuka untuk mendukung berbagai operasi pemindaian. Tergantung dari format kode batang dan kecepatan deteksi yang diperlukan untuk kasus bisnis, keputusan dapat berupa solusi Wasm dan non-Wasm. Meskipun terjadi overhead yang membutuhkan sumber daya tambahan (Wasm) untuk mendekode kode batang, Wasm solusi mengungguli solusi non-Wasm dalam hal akurasi.
Scandit adalah pilihan utama kami. Mendukung semua kode batang format yang diperlukan untuk kasus penggunaan bisnis; itu mengalahkan semua perpustakaan {i>open-source<i} yang tersedia di kecepatan pemindaian.
Masa depan pemindaian
Setelah Shape Detection API sepenuhnya didukung oleh semua browser utama, kita berpotensi memiliki
elemen HTML baru <scanner> yang memiliki kemampuan yang diperlukan untuk pemindai kode batang. Teknik
di MishiPay percaya ada kasus penggunaan yang solid agar fungsi pemindaian kode batang menjadi hal baru
elemen HTML karena meningkatnya jumlah pustaka
open source dan berlisensi yang mengaktifkan
seperti Pindai & Go dan banyak lagi.
Kesimpulan
Kelelahan aplikasi adalah masalah yang dihadapi developer saat produk mereka memasuki pasar. Seringkali pengguna menginginkan untuk memahami nilai yang diberikan aplikasi sebelum mereka mengunduhnya. Di sebuah toko, di mana MishiPay menyelamatkan pembeli waktu dan meningkatkan pengalaman mereka, maka tidak masuk akal untuk menunggu mengunduh sebelum mereka dapat menggunakan aplikasi. Di sinilah PWA kami membantu. Dengan menghilangkan penghalang masuk, kami telah meningkatkan transaksi kami 10 kali lipat dan memungkinkan pengguna kami menghemat 2,5 tahun dalam antrean.
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley.