PWA로 전환한 것이 MishiPay의 비즈니스에 어떤 도움이 되었는지 알아보세요.
MishiPay는 쇼핑객이 스마트폰을 사용하는 대신 스마트폰으로 쇼핑을 스캔하고 결제할 수 있도록 지원합니다. 시간을 낭비할 필요가 없습니다 MishiPay의 스캔 및 Go 기술을 쇼핑객이 본인의 휴대전화를 사용하여 상품의 바코드를 스캔하고 결제할 수 있습니다. 있습니다. 연구에 따르면 매장 내 큐의 비용은 전 세계 소매 부문에서 연간 약 2,000억 달러에 달합니다.
우리의 기술은 GPS 센서 및 카메라와 같은 장치 하드웨어 기능에 사용자가 MishiPay 지원 매장을 찾고 오프라인 상점에서 상품 바코드를 스캔한 다음 결제할 수 있습니다. 결제 수단으로 이용할 수 있습니다. 초기 버전의 스캔과 Go 기술 플랫폼별 iOS 및 Android 애플리케이션이었으며 얼리 어답터들은 이 기술을 좋아했습니다. 읽기 을 통해 PWA로 전환하여 거래를 10배 늘리고 2.5년을 절약한 방법을 알아보세요. 대기 중!
10×
거래 증가
2.5년
현재 재생목록 저장됨
도전과제
사용자가 줄을 서거나 결제 줄을 서서 기다릴 때 Google의 기술을 매우 유용하게 사용할 수 있습니다. 원활한 매장 방문 경험을 제공할 수 있습니다. 하지만 앱을 다운로드하는 번거로운 작업은 Android 또는 iOS 애플리케이션이 제공하는 가치에도 불구하고 사용자가 Google의 기술을 선택하지 않았습니다. 성장세를 보이기 시작했고 보다 낮은 진입 장벽으로 사용자 채택률을 높여야 했습니다.
솔루션
PWA를 빌드하고 출시하려고 노력한 덕분에 설치의 번거로움이 사라졌고 새로운 사용자에게 오프라인 상점에서 Google의 기술을 사용해 보고, 줄을 서지 않고, 원활한 쇼핑 경험을 제공합니다. 출시 이후, PWA를 플랫폼별 애플리케이션과 비교했을 수 있습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">기술 심층 분석
MishiPay 지원 매장 찾기
이 기능을 사용 설정하려면
getCurrentPosition() 드림
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,
);
이 접근 방식은 초기 버전의 앱에서는 효과적이었지만 나중에는 큰 어려움으로 여겨졌습니다. 특별한 이유가 없습니다.
- IP 기반 대체 솔루션의 위치가 부정확합니다.
- 지역별 MishiPay 지원 매장의 목록이 증가함에 따라 사용자는 목록을 스크롤하여 올바른 매장을 식별할 수 있습니다.
- 사용자가 실수로 잘못된 매장을 선택하여 구매가 기록되는 경우가 있습니다. 오답입니다.
이 문제를 해결하기 위해 매장 내 디스플레이에 각 매장의 위치 정보가 식별된 고유한 QR 코드를 삽입했습니다.
있습니다. 그 결과, 더 빠른 온보딩 경험을 제공할 수 있게 되었습니다. 사용자는 위치정보가 식별된 QR을 스캔하기만 하면 됩니다.
매장에 있는 마케팅 자료에 인쇄된 코드를 스캔하여 Go 웹 애플리케이션
이렇게 하면 웹 주소 mishipay.shop을 입력하지 않아도 서비스에 액세스할 수 있습니다.
제품 스캔 중
MishiPay 앱의 핵심 기능은 바코드 스캔입니다. 사용자가 휴대전화를 스캔할 수 있기 때문입니다. 현금에 도달하기도 전에 누계를 확인할 수 있습니다. 레지스터.
웹에서 스캔 환경을 구축하기 위해 Google은 세 가지 핵심 레이어를 식별했습니다.
동영상 스트림
Google은
getUserMedia() 메서드
아래 나열된 제약 조건을 사용하여 사용자의 후방 카메라에 액세스할 수 있습니다. 메서드 호출
사용자가 카메라 액세스를 수락하거나 거부하라는 메시지를 자동으로 트리거합니다. 일단
액세스할 수 있는 경우 아래와 같이 동영상 요소에 이를 전달할 수 있습니다.
/**
* 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!!`);
}
}
처리 레이어
특정 동영상 스트림에서 바코드를 감지하려면 주기적으로 프레임을 캡처하고
디코더 레이어로 전달합니다. 프레임을 캡처하려면 VideoElement에서
다음을 사용하여 HTMLCanvasElement
drawImage()
(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');
}
}
고급 사용 사례의 경우 이 레이어는 자르기,
그레이 스케일로 변환할 수 있습니다. 이러한 작업은 CPU 집약적일 수 있으며 애플리케이션이
바코드 스캔이 장기 실행 작업이므로 응답하지 않는 경우 Google은
OffscreenCanvas API를 사용하여 이미지를 오프로드할 수 있습니다.
CPU 집약적인 작업을 웹 작업자에게 전달할 수 있습니다. 하드웨어 그래픽 가속을 지원하는 기기에서
WebGL API 및
WebGL2RenderingContext님이 수행할 수 있는 작업
CPU 집약적인 전처리 작업의 이득을 최적화할 수 있습니다.
디코더 레이어
마지막 레이어는 프레임에서 바코드를 디코딩하는 역할을 하는 디코더 레이어입니다
처리 레이어에 의해 캡처됩니다. 감사합니다.
Shape Detection API(
모든 브라우저에서 지원되지 않음) 브라우저 자체에서 바코드를
ImageBitmapSource: img 요소, SVG image 요소, video 요소,
canvas 요소, Blob 객체, ImageData 객체 또는 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;
}
}
아직 Shape Detection API를 지원하지 않는 기기의 경우 디코딩하기 위한 대체 솔루션이 필요합니다.
스캔합니다. Shape Detection API는
getSupportedFormats() 드림
메서드를 사용하여 Shape Detection API와 대체 솔루션 간에 전환할 수 있습니다.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
대체 솔루션
여러 오픈소스 및 엔터프라이즈 스캔 라이브러리를 사용할 수 있으며 쉽게 통합할 수 있습니다. 웹 애플리케이션에서 스캔을 구현할 수 있습니다. MishiPay에서 있습니다.
위의 모든 라이브러리는 위에서 설명한 모든 계층을 구성하는 완전한 SDK입니다. 또한 다양한 스캔 작업을 지원하는 인터페이스를 노출합니다. 바코드 형식과 탐지 속도에 영향을 줄 수 있으므로, Wasm 솔루션과 비Wasm 솔루션 중에서 결정을 내릴 수 있습니다. Wasm은 바코드를 디코딩하기 위해 추가 리소스 (Wasm)가 필요한 오버헤드에도 불구하고 정확성 측면에서 Wasm이 아닌 솔루션을 능가합니다.
가장 많이 선택한 제품은 Scandit이었습니다. 모든 바코드를 지원합니다. 비즈니스 사용 사례에 필요한 형식 30억 개 이상의 오픈소스 라이브러리를 스캔 속도입니다.
스캔의 미래
Shape Detection API가 모든 주요 브라우저에서 완전히 지원되면
바코드 스캐너에 필요한 기능이 있는 새 HTML 요소 <scanner>입니다. 엔지니어링
바코드 스캔 기능이 새롭게 도입될
더 많은 HTML 요소를 사용할 수 있게 되었습니다.
검색, Go 및 기타 여러 언어
결론
앱 피로는 개발자가 제품이 시장에 출시될 때 직면하는 문제입니다. 사용자는 종종 애플리케이션을 다운로드하기 전에 애플리케이션이 제공하는 가치를 이해할 수 있습니다. 매장에서 MishiPay는 쇼핑객의 사용자 경험을 향상시키는 데 도움이 될 수 있지만 다운로드할 수 있어야 합니다. 이러한 부분에서 PWA가 도움이 됩니다. 이러한 장벽을 제거하여 거래량을 10배 늘렸고 사용자들이 있습니다.
감사의 말씀
이 도움말은 Joe Medley가 검토했습니다.