Descubre cómo el cambio a la AWP ayudó al negocio de MishiPay.
MishiPay permite a los compradores escanear y pagar sus compras con sus smartphones, en lugar de perdían el tiempo haciendo cola para pagar. Con la función Scan & tecnología Go, los compradores pueden usar su propio teléfono para escanear el código de barras de los artículos y pagarlos, luego, simplemente se van la tienda. Los estudios revelan que las colas en las tiendas le cuestan al sector minorista global unos 200,000 millones de dólares anuales.
Nuestra tecnología se basa en las capacidades del hardware del dispositivo, como los sensores GPS y las cámaras que permiten a los usuarios localizar tiendas habilitadas para MishiPay, escanear códigos de barras de los artículos en las tiendas físicas y, luego, pagar que usen la forma de pago electrónico que prefieran. Las versiones iniciales de nuestro análisis Tecnología Go fueron aplicaciones para iOS y Android específicas de una plataforma y los usuarios pioneros amaron la tecnología. Leído para obtener información sobre cómo cambiar a una AWP aumentó las transacciones en 10 veces y ahorró 2.5 años de poniendo en fila
10×
Aumento de las transacciones
2.5 años
Se guardó la fila
Desafío
Los usuarios consideran que nuestra tecnología es muy útil cuando esperan en una fila o fila de salida, ya que les permite omitir la fila y tener una experiencia fluida en la tienda. Pero la molestia de descargar una Una aplicación para Android o iOS hicieron que los usuarios no eligieran nuestra tecnología a pesar del valor. Era un evento de crecimiento un desafío para MishiPay y necesitábamos aumentar la adopción por parte de los usuarios con una barrera de entrada más baja.
Solución
Nuestros esfuerzos por compilar y lanzar la AWP nos ayudaron a eliminar la molestia de la instalación y alentamos a usuarios nuevos a probar nuestra tecnología en una tienda física, a omitir la fila y a tener una experiencia de compra fluida. Desde el lanzamiento, vimos un aumento masivo de la adopción por parte de los usuarios nuestra AWP en comparación con nuestras aplicaciones específicas de la plataforma.
Información técnica detallada
Ubica tiendas habilitadas para MishiPay
Para habilitar esta función, nos basamos en el
getCurrentPosition()
junto con una solución de resguardo basada en 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,
);
Este enfoque funcionaba bien en las versiones anteriores de la app, pero luego se demostró que representaba un gran obstáculo. para los usuarios de MishiPay por los siguientes motivos:
- Errores de ubicación en las soluciones de resguardo basadas en IP.
- Una lista cada vez más grande de tiendas habilitadas para MishiPay por región requiere que los usuarios se desplacen por la lista y identificar la tienda correcta.
- En ocasiones, los usuarios eligen accidentalmente la tienda equivocada, lo que hace que las compras se registren. incorrectamente.
Para solucionar estos problemas, incorporamos códigos QR únicos con ubicación geográfica en las pantallas de las tiendas para cada
en una tienda física. allanó el camino para una experiencia de incorporación más rápida. Los usuarios solo deben escanear el QR con ubicación geográfica
códigos impresos en el material de marketing presente en las tiendas para acceder a los aplicación web de Go.
De esta manera, puede evitar escribir la dirección web mishipay.shop para acceder al servicio.
Escaneando productos
Una función central de la app de MishiPay es el escaneo de códigos de barras, ya que permite a nuestros usuarios escanear sus sus propias compras y ven el total acumulado, incluso antes de que, de otro modo, hubieran alcanzado de registro.
Para crear una experiencia de análisis en la Web, identificamos tres capas principales.
Transmisión de video por Internet
Con la ayuda del
getUserMedia(),
puede acceder a la cámara de vista posterior del usuario con las restricciones que se indican a continuación. Cómo invocar el método
activa automáticamente un mensaje para que los usuarios acepten o rechacen el acceso a su cámara. Una vez que tengamos
acceso a la transmisión de video por Internet, podemos retransmitirlo a un elemento de video, como se muestra a continuación:
/**
* 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!!`);
}
}
Capa de procesamiento
Para detectar un código de barras en una transmisión de video por Internet determinada, debemos capturar fotogramas de forma periódica y transferirlos
a la capa de decodificador. Para capturar un fotograma, simplemente dibujamos las transmisiones de VideoElement en
un objeto HTMLCanvasElement con el
drawImage()
de la API de 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');
}
}
Para casos de uso avanzados, esta capa también realiza algunas tareas de procesamiento previo, como recortar,
rotando o convirtiendo a escala de grises. Estas tareas pueden consumir mucha CPU y dar como resultado la aplicación
no responde, dado que el escaneo de códigos de barras es una operación de larga duración. Con la ayuda del
OffscreenCanvas, podemos descargar
la tarea de uso intensivo de CPU a un trabajador web. En dispositivos que admiten la aceleración de gráficos por hardware,
la API de WebGL y su
WebGL2RenderingContext puede
para optimizar las ganancias en las tareas de procesamiento previo con uso intensivo de CPU.
Capa de decodificador
La capa final es la de codificador, que se encarga de decodificar los códigos de barras de las tramas.
capturada por la capa de procesamiento. Gracias a los
API de Shape Detection (que es
no disponible en todos los navegadores), el navegador decodifica el código de barras desde un
ImageBitmapSource, que puede ser un elemento img, un elemento SVG image, un elemento video, un
elemento canvas, un objeto Blob, un objeto ImageData o un objeto 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;
}
}
En el caso de los dispositivos que todavía no admiten la API de Shape Detection, necesitamos una solución de resguardo para decodificar.
los códigos de barras. La API de Shape Detection expone una
getSupportedFormats()
que ayuda a cambiar entre la API de Shape Detection y la solución de resguardo.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Solución de resguardo
Hay varias bibliotecas de código abierto y de escaneo empresariales disponibles que pueden integrarse fácilmente. con cualquier aplicación web para implementar el análisis. Estas son algunas de las bibliotecas que usa MishiPay recomendar.
Todas las bibliotecas anteriores son SDK completos que componen todas las capas mencionadas anteriormente. También Expón interfaces para admitir varias operaciones de análisis. Según los formatos de códigos de barras y de detección necesaria para el caso empresarial, una decisión puede ser entre las soluciones Wasm y las que no lo son. A pesar de la sobrecarga que implica requerir un recurso adicional (Wasm) para decodificar el código de barras, Wasm las soluciones superan a las que no son de Wasm en términos de exactitud.
Scandit fue nuestra elección principal. Admite todos los códigos formatos requeridos para nuestros casos de uso empresariales supera a todas las bibliotecas de código abierto disponibles de escaneo.
El futuro del análisis
Una vez que la API de Shape Detection sea completamente compatible con todos los navegadores principales, es posible que tengamos una
Nuevo elemento HTML <scanner> que tiene las capacidades necesarias para un escáner de código de barras Ingeniería
de MishiPay cree que hay un caso de uso sólido para que la funcionalidad de escaneo de códigos de barras sea un nuevo
elemento HTML debido a la creciente cantidad de bibliotecas con licencia y de código abierto que permiten
experiencias como Scan & Go y muchas más.
Conclusión
La fatiga de las apps es un problema al que se enfrentan los desarrolladores cuando sus productos ingresan al mercado. Los usuarios suelen querer para comprender el valor que brinda una aplicación antes de descargarla. En una tienda, donde MishiPay salva a los compradores y mejora su experiencia, es contradictorio esperar a que descargar antes de que puedan usar una aplicación. Aquí es donde nuestra AWP ayuda. Eliminar la barrera aumentamos 10 veces nuestras transacciones y permitimos que los usuarios ahorraran 2.5 años esperando en la fila.
Agradecimientos
Joe Medley revisó este artículo.