Tìm hiểu việc chuyển sang PWA đã giúp ích cho công việc kinh doanh của MishiPay như thế nào.
MishiPay tạo điều kiện để người mua sắm quét mã và thanh toán cho nội dung mua sắm bằng điện thoại thông minh, thay vì lãng phí thời gian xếp hàng khi thanh toán. Với công nghệ Scan & Go của MishiPay, người mua sắm có thể sử dụng điện thoại của mình để quét mã vạch trên các mặt hàng và thanh toán, sau đó chỉ cần rời khỏi cửa hàng. Nghiên cứu cho thấy việc xếp hàng tại cửa hàng thực tế khiến ngành bán lẻ toàn cầu tốn khoảng 200 tỷ USD mỗi năm.
Công nghệ của chúng tôi dựa vào các chức năng của phần cứng thiết bị, chẳng hạn như cảm biến GPS và máy ảnh, cho phép người dùng xác định vị trí của cửa hàng có hỗ trợ MishiPay, quét mã vạch của mặt hàng trong cửa hàng thực tế, sau đó thanh toán bằng phương thức thanh toán kỹ thuật số mà họ chọn. Các phiên bản ban đầu của công nghệ Quét và Go của chúng tôi là các ứng dụng Android và iOS dành riêng cho nền tảng, và những người sử dụng sớm rất thích công nghệ này. Hãy đọc tiếp để tìm hiểu cách chuyển sang PWA đã tăng số lượt giao dịch lên 10 lần và tiết kiệm 2,5 năm xếp hàng!
10×
Số giao dịch tăng
2,5 năm
Đã lưu danh sách chờ
Khó khăn
Người dùng nhận thấy công nghệ của chúng tôi cực kỳ hữu ích khi phải xếp hàng hoặc thanh toán, vì công nghệ này cho phép họ bỏ qua hàng đợi này và có được trải nghiệm suôn sẻ tại cửa hàng. Tuy nhiên, sự rắc rối của việc tải xuống ứng dụng Android hoặc iOS khiến người dùng không chọn công nghệ của chúng tôi bất chấp giá trị đó. Đây là một thách thức ngày càng lớn đối với MishiPay và chúng tôi cần tăng mức độ chấp nhận của người dùng mà không phải giảm rào cản gia nhập.
Giải pháp
Những nỗ lực của chúng tôi trong việc xây dựng và ra mắt PWA đã giúp chúng tôi loại bỏ những rắc rối khi cài đặt, đồng thời khuyến khích người dùng mới thử công nghệ của chúng tôi ngay tại cửa hàng thực tế, bỏ qua hàng đợi và có được trải nghiệm mua sắm liền mạch. Kể từ khi ra mắt, chúng tôi nhận thấy mức độ sử dụng PWA của người dùng tăng đột biến so với các ứng dụng dành riêng cho nền tảng.
Tìm hiểu chuyên sâu về kỹ thuật
Xác định vị trí các cửa hàng hỗ trợ MishiPay
Để bật tính năng này, chúng tôi dựa vào API getCurrentPosition() cùng với giải pháp dự phòng dựa trên 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,
);
Phương pháp này hoạt động hiệu quả trong các phiên bản trước của ứng dụng, nhưng sau đó được chứng minh là một điểm bất cập lớn đối với người dùng của MishiPay vì những lý do sau:
- Vị trí không chính xác trong các giải pháp dự phòng dựa trên IP.
- Để có được danh sách ngày càng nhiều cửa hàng hỗ trợ MishiPay ở mỗi khu vực, người dùng phải cuộn danh sách và xác định đúng cửa hàng.
- Đôi khi, người dùng vô tình chọn nhầm cửa hàng, khiến giao dịch mua bị ghi lại không chính xác.
Để giải quyết những vấn đề này, chúng tôi đã nhúng các mã QR có vị trí địa lý riêng biệt trên các màn hình tại cửa hàng cho từng cửa hàng. Việc này mở đường cho trải nghiệm làm quen nhanh chóng hơn. Người dùng chỉ cần quét mã QR được định vị địa lý in trên tài liệu tiếp thị có trong cửa hàng để truy cập vào ứng dụng web Quét & Go.
Bằng cách này, họ có thể không phải nhập địa chỉ web mishipay.shop để truy cập dịch vụ.
Đang quét sản phẩm
Một tính năng cốt lõi trong ứng dụng MishiPay là quét mã vạch, vì tính năng này cho phép người dùng quét các giao dịch mua của mình và xem tổng số tiền đã giao, ngay cả trước khi họ sử dụng máy tính tiền.
Để xây dựng trải nghiệm quét trên web, chúng tôi đã xác định ba lớp cốt lõi.
Luồng video
Với sự trợ giúp của phương thức getUserMedia(), chúng ta có thể truy cập vào camera quan sát sau của người dùng theo các hạn chế được liệt kê bên dưới. Việc gọi phương thức này sẽ tự động kích hoạt lời nhắc người dùng chấp nhận hoặc từ chối quyền truy cập vào máy ảnh của họ. Sau khi có quyền truy cập vào luồng video, chúng ta có thể chuyển tiếp luồng đó đến một phần tử video như minh hoạ dưới đây:
/**
* 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!!`);
}
}
Lớp đang xử lý
Để phát hiện mã vạch trong một luồng video nhất định, chúng ta cần chụp khung hình và chuyển các khung hình đó đến lớp bộ giải mã theo định kỳ. Để chụp một khung, chúng ta chỉ cần vẽ các luồng từ VideoElement vào HTMLCanvasElement bằng cách sử dụng phương thức drawImage() của API Canvas.
/**
* 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');
}
}
Đối với các trường hợp sử dụng nâng cao, lớp này cũng thực hiện một số công việc xử lý trước như cắt, xoay hoặc chuyển đổi sang thang màu xám. Những tác vụ này có thể tốn nhiều CPU và dẫn đến việc ứng dụng không phản hồi vì việc quét mã vạch là một hoạt động diễn ra trong thời gian dài. Với sự trợ giúp của API OffscreenCanvas, chúng ta có thể giảm tải tác vụ cần nhiều CPU cho một trình thực thi web. Trên các thiết bị hỗ trợ tính năng tăng tốc đồ hoạ phần cứng, API WebGL và WebGL2RenderingContext của API này có thể tối ưu hoá mức tăng cho các tác vụ tiền xử lý cần nhiều CPU.
Lớp bộ giải mã
Lớp cuối cùng là lớp bộ giải mã chịu trách nhiệm giải mã mã vạch từ các khung được lớp xử lý thu thập. Nhờ API Phát hiện hình dạng (hiện chưa có trên một số trình duyệt), trình duyệt sẽ tự giải mã mã vạch từ ImageBitmapSource. Có thể là phần tử img, phần tử SVG image, phần tử video, phần tử canvas, đối tượng Blob, đối tượng ImageData hoặc đối tượng 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;
}
}
Đối với các thiết bị chưa hỗ trợ API Phát hiện hình dạng, chúng ta cần một giải pháp dự phòng để giải mã mã vạch. API Phát hiện hình dạng hiển thị một phương thức getSupportedFormats() giúp chuyển đổi giữa API Phát hiện hình dạng và giải pháp dự phòng.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Giải pháp dự phòng
Một số thư viện nguồn mở và thư viện quét dành cho doanh nghiệp có sẵn có thể dễ dàng tích hợp với bất kỳ ứng dụng web nào để triển khai quá trình quét. Sau đây là một số thư viện mà MishiPay đề xuất.
Tất cả thư viện ở trên đều là SDK hoàn chỉnh bao gồm tất cả các lớp được thảo luận ở trên. Các lớp này cũng cho thấy các giao diện hỗ trợ nhiều hoạt động quét. Tuỳ thuộc vào định dạng mã vạch và tốc độ phát hiện cần thiết cho trường hợp của doanh nghiệp, bạn có thể quyết định giữa giải pháp Wasm và giải pháp không phải là Wasm. Mặc dù tốn kém hơn khi cần thêm tài nguyên (Wasm) để giải mã mã vạch, các giải pháp Wasm hoạt động tốt hơn giải pháp không phải là giải pháp Wasm về độ chính xác.
Scandit là lựa chọn chính của chúng tôi. Mã này hỗ trợ tất cả định dạng mã vạch cần thiết cho các trường hợp sử dụng trong kinh doanh của chúng tôi; mã này cao hơn tất cả các thư viện nguồn mở hiện có về tốc độ quét.
Tương lai của tính năng quét
Khi tất cả các trình duyệt chính hỗ trợ đầy đủ API Phát hiện hình dạng, chúng tôi có thể có phần tử HTML mới <scanner> có các tính năng cần thiết cho máy quét mã vạch. Nhóm kỹ thuật của MishiPay tin rằng chức năng quét mã vạch sẽ trở thành một phần tử HTML mới, do số lượng thư viện nguồn mở và được cấp phép ngày càng tăng, giúp mang lại các trải nghiệm như Quét và Go và nhiều trải nghiệm khác.
Kết luận
Sự nhàm chán trong ứng dụng là một vấn đề mà nhà phát triển gặp phải khi tung sản phẩm ra thị trường. Người dùng thường muốn hiểu giá trị mà ứng dụng mang lại cho họ trước khi tải xuống. Tại một cửa hàng, nơi MishiPay giúp người mua sắm tiết kiệm thời gian và cải thiện trải nghiệm của họ, thì việc chờ tệp tải xuống rồi mới có thể sử dụng ứng dụng là một điều khác thường. Đây chính là lúc PWA của chúng tôi trợ giúp. Bằng cách loại bỏ rào cản khi truy cập, chúng tôi đã tăng số lượng giao dịch lên gấp 10 lần và cho phép người dùng tiết kiệm 2,5 năm chờ đợi trong hàng đợi.
Xác nhận
Bài viết này đã được Joe Medley đánh giá.