Descubre cómo el cambio a la PWA ayudó al negocio de MishiPay.
MishiPay permite que los compradores escaneen y paguen sus compras con sus smartphones, en lugar de perder tiempo haciendo fila en la caja. Con la tecnología Scan & Go de MishiPay, los compradores pueden usar su propio teléfono para escanear el código de barras de los artículos y pagarlos, y luego salir de la tienda. Los estudios revelan que, anualmente, las filas en las tiendas cuestan USD 200,000 millones al sector minorista mundial.
Nuestra tecnología se basa en las capacidades de hardware del dispositivo, como los sensores GPS y las cámaras, que permiten a los usuarios ubicar las tiendas habilitadas para MishiPay, escanear los códigos de barras de los artículos dentro de la tienda física y, luego, pagar con la forma de pago digital que elijan. Las versiones iniciales de nuestra tecnología Scan & Go eran aplicaciones específicas para iOS y Android, y a los usuarios pioneros les encantó la tecnología. Sigue leyendo para descubrir cómo el cambio a una PWA aumentó las transacciones 10 veces y ahorró 2 años y medio de filas.
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 en la caja, ya que les permite evitar la fila y tener una experiencia fluida en la tienda. Sin embargo, la molestia de descargar una aplicación para Android o iOS hizo que los usuarios no eligieran nuestra tecnología a pesar de su valor. Esto representaba un desafío cada vez mayor 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 crear y lanzar la PWA nos ayudaron a eliminar las molestias de la instalación y alentaron a los usuarios nuevos a probar nuestra tecnología en una tienda física, evitar la fila y tener una experiencia de compra fluida. Desde el lanzamiento, observamos un aumento masivo en la adopción por parte de los usuarios de nuestra PWA en comparación con nuestras aplicaciones específicas para cada plataforma.
Análisis técnico detallado
Cómo encontrar tiendas habilitadas para MishiPay
Para habilitar esta función, usamos la API de 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 funcionó bien en las versiones anteriores de la app, pero luego se demostró que era un gran problema para los usuarios de MishiPay por los siguientes motivos:
- Imprecisiones de ubicación en las soluciones de respaldo 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 una lista e identifiquen la tienda correcta.
- En ocasiones, los usuarios eligen por accidente la tienda incorrecta, lo que provoca que las compras se registren de forma incorrecta.
Para abordar estos problemas, incorporamos códigos QR geolocalizados únicos en las pantallas de cada tienda. Esto allanó el camino para una experiencia de incorporación más rápida. Los usuarios escanean los códigos QR geolocalizados impresos en el material de marketing presente en las tiendas para acceder a la aplicación web de Scan & Go.
De esta manera, pueden evitar escribir la dirección web mishipay.shop para acceder al servicio.
Cómo escanear productos
Una función principal de la app de MishiPay es el escaneo de códigos de barras, ya que permite a los usuarios escanear sus propias compras y ver el total acumulado incluso antes de llegar a una caja registradora.
Para crear una experiencia de escaneo en la Web, identificamos tres capas principales.
Transmisión de video por Internet
Con la ayuda del método getUserMedia(), podemos acceder a la cámara posterior del usuario con las restricciones que se indican a continuación. Cuando se invoca el método, se activa automáticamente un mensaje para que los usuarios acepten o rechacen el acceso a la cámara. Una vez que tenemos acceso al flujo de video, 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 determinada, debemos capturar fotogramas periódicamente y transferirlos a la capa del decodificador. Para capturar un fotograma, dibujamos las transmisiones de VideoElement en un HTMLCanvasElement con el método 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, rotar o convertir a escala de grises. Estas tareas pueden consumir mucha CPU y hacer que la aplicación no responda, ya que el escaneo de códigos de barras es una operación de larga duración. Con la ayuda de la API de OffscreenCanvas, podemos descargar la tarea que requiere mucha CPU en un trabajador web. En los dispositivos que admiten la aceleración de gráficos por hardware, la API de WebGL y su WebGL2RenderingContext pueden optimizar las ganancias en las tareas de preprocesamiento que requieren mucha CPU.
Capa del decodificador
La capa final es la capa del decodificador, que es responsable de decodificar los códigos de barras de los fotogramas capturados por la capa de procesamiento. Gracias a la API de Shape Detection (que aún no está disponible en todos los navegadores), el navegador decodifica el código de barras de un ImageBitmapSource, que puede ser un elemento img, un elemento image SVG, 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 aún no admiten la API de Shape Detection, necesitamos una solución alternativa para decodificar los códigos de barras. La API de Shape Detection expone un método getSupportedFormats() que ayuda a cambiar entre la API de Shape Detection y la solución alternativa.
// 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
Existen varias bibliotecas de análisis de código abierto y empresariales disponibles que se pueden integrar fácilmente con cualquier aplicación web para implementar el análisis. Estas son algunas de las bibliotecas que recomienda MishiPay.
Todas estas bibliotecas son SDKs completos que componen todas las capas analizadas. También exponen interfaces para admitir varias operaciones de análisis. Según los formatos de códigos de barras y la velocidad de detección necesarios para el caso de uso empresarial, se puede tomar una decisión entre las soluciones de Wasm y las que no son de Wasm. A pesar de la sobrecarga de requerir un recurso adicional (Wasm) para decodificar el código de barras, las soluciones de Wasm superan a la solución que no es de Wasm en términos de precisión.
Scandit fue nuestra primera opción. Es compatible con todos los formatos de códigos de barras necesarios para nuestros casos de uso empresarial y supera a todas las bibliotecas de código abierto disponibles en velocidad de escaneo.
El futuro del escaneo
Una vez que todos los navegadores principales admitan por completo la API de Shape Detection, podríamos tener un nuevo elemento HTML <scanner> con las capacidades necesarias para un escáner de códigos de barras. El equipo de ingeniería de MishiPay cree que existe un caso de uso sólido para que la función de escaneo de códigos de barras sea un nuevo elemento HTML debido a la creciente cantidad de bibliotecas de código abierto y con licencia que permiten experiencias como Scan & Go y muchas otras.
Conclusión
La fatiga de la app es un problema que enfrentan los desarrolladores cuando sus productos ingresan al mercado. A menudo, los usuarios quieren comprender el valor que les brinda una aplicación antes de descargarla. En una tienda, donde MishiPay ahorra tiempo a los compradores y mejora su experiencia, es contradictorio esperar una descarga antes de que puedan usar una aplicación. Aquí es donde nuestra PWA ayuda.
Al eliminar la barrera de entrada, aumentamos nuestras transacciones 10 veces y permitimos que nuestros usuarios ahorren 2.5 años de espera en la fila.
Agradecimientos
Joe Medley revisó este artículo.