Tìm hiểu việc chuyển sang PWA đã giúp ích như thế nào cho hoạt động kinh doanh của MishiPay.
MishiPay giúp người mua sắm quét mã và thanh toán cho việc mua sắm bằng điện thoại thông minh, thay vì lãng phí thời gian xếp hàng ở bước thanh toán. Với tính năng Quét và quét của MishiPay Tiếp cận công nghệ, 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 đó họ chỉ cần rời khỏi cho cửa hàng. Nghiên cứu tiết lộ rằng xếp hàng tại cửa hàng 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 tính năng phần cứng của thiết bị như cảm biến và máy ảnh GPS cho phép người dùng xác định vị trí các cửa hàng hỗ trợ MishiPay, quét mã vạch của mặt hàng trong cửa hàng thực tế rồi thanh toán thông qua 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 ứng dụng Quét và Công nghệ Go là các ứng dụng iOS và Android dành riêng cho nền tảng và những người sử dụng sớm đã yêu thích công nghệ này. Đã đọc để tìm hiểu cách chuyển sang PWA giúp tăng số lượt giao dịch lên 10 lần và tiết kiệm được 2,5 năm đang xếp hàng!
10×
Tăng số lượt giao dịch
2,5 năm
Đã lưu danh sách chờ
Thách thức
Người dùng thấy công nghệ của chúng tôi cực kỳ hữu ích khi chờ đợi hoặc xếp hàng thanh toán vì công nghệ này cho phép để họ bỏ qua hàng đợi và có trải nghiệm mượt mà tại cửa hàng. Tuy nhiên, việc tải Ứng dụng dành cho 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 kể giá trị mà ứng dụng mang lại. Đó là ngày càng tăng thách thức cho MishiPay, và chúng tôi cần tăng mức độ chấp nhận của người dùng mà giảm rào cản gia nhập.
Giải pháp
Những nỗ lực xây dựng và khởi chạy PWA đã giúp chúng tôi loại bỏ những rắc rối khi cài đặt cũng như khuyến khích người dùng mới thử công nghệ của chúng tôi bên trong cửa hàng thực tế, bỏ qua hàng đợi và có trải nghiệm mua sắm liền mạch. Kể từ khi triển khai, chúng tôi đã thấy sự tăng đột biến về số lượng người dùng sử dụng với PWA so với các ứng dụng dành riêng cho nền tảng của chúng tôi.
Tìm hiểu chuyên sâu về kỹ thuật
Tìm các cửa hàng có hỗ trợ MishiPay
Để bật tính năng này, chúng tôi dựa vào
getCurrentPosition()
API 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 có hiệu quả trong các phiên bản trước của ứng dụng, nhưng sau đó lại được chứng minh là một vấn đề rất nghiêm trọng cho 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.
- Việc các cửa hàng có hỗ trợ MishiPay ở mỗi khu vực xuất hiện ngày càng nhiều, buộ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 sai 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 mã QR có vị trí địa lý duy nhất trên các màn hình tại cửa hàng cho mỗi
của bạn. Bản phát hành này mở đường cho trải nghiệm làm quen nhanh hơn. Người dùng chỉ cần quét mã QR được định vị địa lý
mã được in trên tài liệu tiếp thị có tại cửa hàng để truy cập vào thẻ Quét và Ứng dụng web Go.
Bằng cách này, họ không phải nhập địa chỉ web mishipay.shop để truy cập dịch vụ.
Đang quét sản phẩm
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 mã vạch các giao dịch mua hàng của mình và xem tổng số tiền tương ứng, thậm chí trước cả khi họ nhận được tiền mặt thanh ghi.
Để xây dựng trải nghiệm quét trên web, chúng tôi đã xác định 3 lớp cốt lõi.
Luồng video
Với sự trợ giúp của
getUserMedia(), chúng ta
có thể truy cập vào camera quan sát phía sau của người dùng kèm theo các điều kiện ràng buộc được liệt kê dưới đây. Gọi phương thức
sẽ tự động kích hoạt lời nhắc để người dùng chấp nhận hoặc từ chối cấp quyền truy cập vào camera của họ. Sau khi chúng tôi
quyền truy cập vào luồng video, chúng ta có thể chuyển tiếp luồng video đó đến một phần tử video như sau:
/**
* 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 xử lý
Để phát hiện mã vạch trong một luồng video nhất định, chúng tôi cần thu thập khung hình và chuyển dữ liệu theo định kỳ
chúng vào lớp giải mã. Để chụp một khung hình, chúng ta chỉ cần vẽ các luồng từ VideoElement lên
HTMLCanvasElement sử dụng
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ố nhiệm vụ xử lý trước như cắt,
hoặc chuyển đổi sang thang màu xám. Các tác vụ này có thể tốn nhiều CPU và khiến ứng dụng
không phản hồi do 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
OffscreenCanvas API, chúng tôi có thể giảm tải
tác vụ cần nhiều CPU cho một nhân viên web. Trên các thiết bị hỗ trợ tăng tốc đồ hoạ phần cứng,
API WebGL và API
WebGL2RenderingContext có thể
tối ưu hoá mức tăng của các tác vụ tiền xử lý cần nhiều CPU.
Lớp 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ừ khung
được lớp xử lý chụp lại. Nhờ có
API Phát hiện hình dạng (tức là
chưa có sẵn trên tất cả trình duyệt), chính trình duyệt tự giải mã mã vạch từ
ImageBitmapSource, có thể là phần tử img, phần tử image của SVG, phần tử video,
Phần tử canvas, một đối tượng Blob, một đối tượng ImageData hoặc một đố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 những thiết bị chưa hỗ trợ Shape Phát hiện API, chúng tôi 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 sẽ cho thấy
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
Hiện có sẵn nhiều thư viện nguồn mở và thư viện quét dành cho doanh nghiệp có thể dễ dàng tích hợp với bất kỳ ứng dụng web nào để triển khai tính năng 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 chính thức cấu thành tất cả các lớp được thảo luận ở trên. Ngoài ra, hiển thị các giao diện hỗ trợ nhiều thao tác 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 kinh doanh, có thể quyết định giữa Wasm và các giải pháp không phải của Wasm. Mặc dù tốn kém khi cần thêm tài nguyên (Wasm) để giải mã mã vạch, Wasm các giải pháp không phải của Wasm hoạt động tốt hơn so với giải pháp không phải của Wasm về độ chính xác.
Scandit là lựa chọn chính của chúng tôi. Hỗ trợ mọi mã vạch các định dạng cần thiết cho các trường hợp sử dụng của doanh nghiệp; nó vượt qua tất cả các thư viện nguồn mở có sẵn tại tốc độ quét.
Tương lai của việc quét
Khi API Phát hiện hình dạng được tất cả các trình duyệt chính hỗ trợ đầy đủ, chúng tôi có thể gặp phải
phần tử HTML mới <scanner> có các tính năng cần thiết cho một máy quét mã vạch. Kỹ sư
tại MishiPay tin rằng có một trường hợp sử dụng vững chắc để chức năng quét mã vạch trở thành một công cụ mới
Phần tử HTML do số lượng thư viện nguồn mở và thư viện được cấp phép ngày càng tăng, cho phép
các trải nghiệm như Quét & Go và nhiều người khác.
Kết luận
Mệt mỏi với ứng dụng là một vấn đề mà các nhà phát triển gặp phải khi sản phẩm của họ gia nhập 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 họ tải ứng dụng xuống. Tại một cửa hàng, nơi MishiPay giúp người mua sắm thời gian và cải thiện trải nghiệm của họ, thì sẽ khác thường khi đợi tải xuống trước khi có thể sử dụng ứng dụng. Đây là nơi PWA hỗ trợ. Loại bỏ rào cản cho đến khi gia nhậ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 được 2,5 năm đang chờ trong hàng đợi.
Xác nhận
Bài viết này do Joe Medley xem xét.