Découvrez comment MishiPay a aidé son entreprise à passer à PWA.
MishiPay permet aux acheteurs de scanner leurs achats et de les payer avec leur smartphone, plutôt que de temps à faire la file d’attente à la caisse. Avec le service Scanner et Go, les acheteurs peuvent scanner le code-barres d'un article avec leur téléphone et les payer, puis se contenter le magasin. Des études révèlent que la mise en file d'attente en magasin coûte environ 200 milliards de dollars par an au secteur du commerce mondial.
Notre technologie repose sur les capacités matérielles des appareils, comme les capteurs et les appareils photo GPS qui permettent les utilisateurs peuvent localiser les magasins équipés de MishiPay, scanner le code-barres des articles dans le magasin physique, puis payer en utilisant le mode de paiement numérique de son choix. Les versions initiales de notre Technologie Go étaient des applications iOS et Android propres à chaque plate-forme, et les premiers utilisateurs ont adoré cette technologie. Lue pour découvrir comment le passage à une PWA a permis de multiplier par 10 les transactions et d'économiser 2,5 années en file d'attente !
10×
Augmentation du nombre de transactions
2 ans et demi
Mise en file d'attente enregistrée
Défi
Les utilisateurs trouvent notre technologie extrêmement utile lors de la file d'attente ou de la file d'attente, car elle leur permet d'éviter la file d'attente et de bénéficier d'une expérience fluide en magasin. Mais le téléchargement d'un logiciel Pour Android ou iOS, les utilisateurs n'ont pas choisi notre technologie, malgré son intérêt. C'était un nombre croissant pour MishiPay, il nous fallait augmenter l'adoption par les utilisateurs avec un seuil d'entrée plus bas.
Solution
Nos efforts pour créer et lancer la PWA nous ont permis de simplifier l'installation et encouragé les nouveaux utilisateurs à essayer notre technologie dans un magasin physique, à éviter la file d'attente et à bénéficier une expérience d'achat fluide. Depuis le lancement, nous avons constaté un pic massif d’adoption par les utilisateurs avec par rapport à nos applications spécifiques à la plate-forme.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Analyse technique approfondie
Localiser les magasins dans lesquels MishiPay est activé
Pour activer cette fonctionnalité, nous nous appuyons sur
getCurrentPosition()
et une solution de remplacement basée sur les adresses 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,
);
Cette approche fonctionnait bien dans les versions précédentes de l'application, mais s'est révélée très fastidieuse par la suite. pour les utilisateurs de MishiPay pour les raisons suivantes:
- Imprécisions de localisation dans les solutions de remplacement basées sur l'adresse IP.
- De plus en plus de magasins acceptant MishiPay sont proposés dans chaque région, identifier le magasin approprié.
- Les utilisateurs choisissent parfois par erreur le mauvais magasin, ce qui entraîne l'enregistrement des achats. de manière incorrecte.
Pour résoudre ces problèmes, nous avons intégré un code QR géolocalisé unique sur les présentoirs en magasin pour chaque
Google Store. Cela a permis une intégration plus rapide. Les utilisateurs scannent simplement le code QR géolocalisé
codes imprimés sur les supports marketing présents dans les magasins pour accéder au Application Web Go.
Ainsi, ils n'auront pas à saisir l'adresse Web mishipay.shop pour accéder au service.
Analyser des produits
L'une des fonctionnalités essentielles de l'application MishiPay est la lecture de codes-barres, car elle permet à nos utilisateurs de scanner leurs ses propres achats et de voir le total cumulé avant même qu'il n'atteigne un solde registre.
Pour créer une expérience d'analyse sur le Web, nous avons identifié trois couches principales.
Flux vidéo
Grâce au
getUserMedia(), nous
peut accéder à la caméra arrière de l'utilisateur selon les contraintes indiquées ci-dessous. Appeler la méthode
déclenche automatiquement un message invitant l'utilisateur à accepter ou refuser l'accès à sa caméra. Une fois que nous avons
au flux vidéo, nous pouvons le transmettre à un élément vidéo comme indiqué ci-dessous:
/**
* 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!!`);
}
}
Traitement de la couche
Pour détecter un code-barres dans un flux vidéo donné, nous devons régulièrement capturer des images et transférer
à la couche du décodeur. Pour capturer une image, il suffit de dessiner les flux de VideoElement sur
un HTMLCanvasElement à l'aide de
drawImage()
de l'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');
}
}
Pour les cas d'utilisation avancés, ce calque effectue aussi
des tâches de prétraitement, comme le recadrage,
la rotation ou la conversion
en nuances de gris. Ces tâches peuvent utiliser le processeur de manière intensive et entraîner
ne répond pas étant donné que la lecture
des codes-barres est une opération de longue durée. Grâce au
OffscreenCanvas, nous pouvons décharger
pour un nœud de calcul Web. Sur les appareils compatibles avec l'accélération graphique matérielle,
L'API WebGL et ses
WebGL2RenderingContext peut
et optimiser les gains sur les tâches
de prétraitement qui utilisent de manière intensive le processeur.
Couche du décodeur
La dernière couche est la couche du décodeur, qui est chargée de décoder les codes-barres à partir des trames.
capturées par la couche de traitement. Grâce au
API Shape Detection (qui est
n'est pas encore disponible sur tous les navigateurs), le navigateur décode lui-même le code-barres à partir d'un
ImageBitmapSource, qui peut être un élément img, un élément SVG image, un élément video, une
canvas, un objet Blob, un objet ImageData ou un objet 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;
}
}
Pour les appareils qui ne sont pas encore compatibles avec l'API Shape Detection, nous avons besoin d'une solution de remplacement pour décoder
les codes-barres. L'API Shape Detection expose un
getSupportedFormats()
qui permet de basculer entre l'API Shape Detection et la solution de remplacement.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Solution de remplacement
Plusieurs bibliothèques d'analyse Open Source et d'entreprise faciles à intégrer sont disponibles. à n'importe quelle application Web pour implémenter l'analyse. Voici quelques exemples de bibliothèques recommandent.
Toutes les bibliothèques ci-dessus sont des SDK à part entière qui composent l'ensemble des couches décrites ci-dessus. Ils ont aussi exposent des interfaces pour permettre diverses opérations d'analyse. En fonction des formats de code-barres et la vitesse de détection nécessaire pour l'analyse de rentabilisation, la décision peut se situer entre les solutions Wasm et non-Wasm. Malgré la charge liée à la nécessité d'une ressource supplémentaire (Wasm) pour décoder le code-barres, Wasm les solutions non-Wasm en termes de justesse.
Nous avons tout d'abord choisi Scandit. Il est compatible avec tous les codes-barres formats requis pour nos cas d'utilisation métier ; il dépasse toutes les bibliothèques open source disponibles dans la vitesse d'analyse.
L'avenir de l'analyse
Une fois que l'API Shape Detection est entièrement compatible avec tous les principaux navigateurs, il est possible qu'une
Nouvel élément HTML <scanner> doté des fonctionnalités requises pour un lecteur de codes-barres Ingénierie
chez MishiPay pense qu'il existe un cas d'utilisation solide pour que la fonctionnalité de lecture de codes-barres soit une nouvelle
élément HTML en raison du nombre croissant de bibliothèques sous licence et Open Source qui activent
des fonctionnalités comme Scan & Go et bien d'autres.
Conclusion
La lassitude vis-à-vis des applications est un problème auquel les développeurs sont confrontés lorsque leurs produits arrivent sur le marché. Les utilisateurs veulent souvent pour comprendre la valeur qu'une application leur apporte avant de la télécharger. Dans un magasin, où MishiPay sauve et améliore l'expérience utilisateur, il est paradoxal d'attendre un télécharger avant de pouvoir utiliser une application. C'est là que notre PWA est utile. En éliminant les obstacles nos transactions ont été multipliées par 10 et nos utilisateurs ont économisé 2, 5 ans dans la file d'attente.
Remerciements
Joe Medley a rédigé cet article.