Dowiedz się, jak przejście na PWA pomogło MishiPay w rozwoju działalności.
MishiPay pozwala kupującym skanować produkty i płacić za nie za pomocą smartfona, a nie marnowanie czasu na czekanie w kolejce do kasy. Z pomocą MishiPay Scan & Technologia Go, Klienci mogą użyć własnego telefonu, aby zeskanować kod kreskowy produktu i zapłacić za niego, a następnie w sklepie. Badania pokazują, kolejkowanie produktów w sklepach stacjonarnych pochłania globalny sektor handlu detalicznego o ok. 200 miliardów dolarów rocznie.
Nasza technologia opiera się na możliwościach sprzętowych urządzeń, takich jak czujniki GPS i aparaty, dzięki którym znajdować sklepy z obsługą MishiPay, skanować kody kreskowe produktów w sklepach stacjonarnych i płacić z użyciem wybranej przez nich formy płatności cyfrowej. Wstępne wersje naszego programu Technologia Go były przeznaczone na konkretne platformy aplikacje na iOS i Androida, a użytkownicy wczesnej wersji uwielbiali tę technologię. Odczytano i dowiedz się, jak przejście na PWA zwiększyło 10-krotnie liczbę transakcji i zaoszczędziło 2,5 roku dodaję do kolejki!
10×
Wzrost liczby transakcji
2,5 roku
Kolejka została zapisana
Wyzwanie
Nasza technologia jest bardzo przydatna dla użytkowników, którzy oczekują w kolejce czy do kasy. aby szybko przejść do kolejki i bez problemów Jednakże problem z pobraniem Aplikacja na Androida lub iOS sprawiła, że użytkownicy nie wybierają naszej technologii pomimo korzyści. Rozwijał się dla MishiPay, dlatego musieliśmy zwiększyć rozpowszechnienie wśród użytkowników przy niższych barierach wejścia.
Rozwiązanie
Nasze wysiłki związane z stworzeniem i uruchomieniem aplikacji PWA pomogły nam rozwiązać problemy z instalacją zachęcały nowych użytkowników do wypróbowania naszych technologii w sklepach stacjonarnych, pominięcia kolejki i bezproblemowego robienia zakupów. Od momentu wprowadzenia tego programu obserwujemy ogromny wzrost wykorzystania progresywna aplikacja internetowa w porównaniu z aplikacjami na platformie.
Szczegółowa analiza techniczna
Znajdowanie sklepów obsługujących MishiPay
Aby włączyć tę funkcję,
getCurrentPosition()
API oraz rozwiązanie zastępcze oparte na adresach 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,
);
Takie podejście sprawdzało się we wcześniejszych wersjach aplikacji, ale później okazało się, że było ono sporym problemem. dla użytkowników MishiPay z następujących powodów:
- Niedokładności lokalizacji w rozwiązaniach zastępczych opartych na adresach IP.
- Coraz większa liczba sklepów obsługujących MishiPay w poszczególnych regionach wymaga od użytkowników przewijania listy i zidentyfikować właściwy sklep.
- Czasami użytkownicy przypadkowo wybierają niewłaściwy sklep, co powoduje zarejestrowanie zakupów. nieprawidłowo.
Aby rozwiązać te problemy, w przypadku każdego produktu w sklepie dodaliśmy unikalne kody QR z geolokalizacją
sklepu. Przetarła szlak dla szybszego procesu wdrażania. Użytkownicy po prostu skanują kod QR z geolokalizacją
kodów wydrukowanych w materiałach marketingowych dostępnych w sklepach, umożliwiające dostęp do Aplikacja internetowa Go.
Dzięki temu nie muszą wpisywać adresu internetowego mishipay.shop, aby uzyskać dostęp do usługi.
Skanowanie produktów
Główną funkcją aplikacji MishiPay jest skanowanie kodów kreskowych, ponieważ umożliwia ono użytkownikom na własnych zakupach i sprawdzać całkowitą sumę, nawet zanim zdążyliby zapłacić gotówką. rejestracji.
Aby ułatwić skanowanie w internecie, zidentyfikowaliśmy 3 podstawowe warstwy.
Strumień wideo
Skorzystaj z pomocy
getUserMedia(),
może korzystać z kamery tylnej użytkownika z uwzględnieniem ograniczeń wymienionych poniżej. Wywołuję metodę
automatycznie wyświetla monit o zaakceptowanie lub odmowę dostępu do kamery. Gdy już
dostępu do strumienia wideo, możemy przekazać go do elementu wideo, jak pokazano poniżej:
/**
* 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!!`);
}
}
Warstwa przetwarzania
Aby wykryć kod kreskowy w danym strumieniu wideo, musimy okresowo rejestrować klatki i przesyłać
do warstwy dekodera. Aby nagrać klatkę, po prostu pobieramy strumienie z VideoElement na
HTMLCanvasElement za pomocą
drawImage().
za pomocą interfejsu 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');
}
}
W zaawansowanych przypadkach użycia ta warstwa wykonuje też zadania wstępnego przetwarzania danych, takie jak przycinanie,
lub szarości. Te zadania mogą obciążać procesor i spowodować, że aplikacja
nie odpowiada, ponieważ skanowanie kodu kreskowego jest długotrwałą operacją. Skorzystaj z pomocy
OffscreenCanvas API, możemy zrezygnować
które zadania intensywnie wykorzystują procesor
na potrzeby instancji internetowej. Na urządzeniach obsługujących sprzętową akcelerację grafiki
Interfejs API WebGL
WebGL2RenderingContext może
pozwoli zoptymalizować zyski w zadaniach
obciążających procesor.
Warstwa dekodera
Ostatnia warstwa to warstwa dekodera, która odpowiada za dekodowanie kodów kreskowych z ramek.
przechwytywane przez warstwę przetwarzania. Dzięki
Machine Detection API (czyli
funkcja nie jest jeszcze dostępna we wszystkich przeglądarkach), sama przeglądarka dekoduje kod kreskowy z
ImageBitmapSource, który może być elementem img, elementem SVG image, elementem video,
canvas, obiekt Blob, obiekt ImageData lub 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;
}
}
W przypadku urządzeń, które nie obsługują jeszcze interfejsu Status Detection API, potrzebujemy rozwiązania zastępczego do zdekodowania
kodów kreskowych. Machine Detection API udostępnia
getSupportedFormats()
która ułatwia przełączanie się między interfejsem Status Detection API a rozwiązaniem zastępczym.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Rozwiązanie zastępcze
Dostępnych jest kilka bibliotek skanowania typu open source i przeznaczone dla firm, które można łatwo zintegrować. z dowolną aplikacją internetową, która obsługuje skanowanie. Oto niektóre biblioteki, które obsługuje MishiPay co poleca.
Wszystkie powyższe biblioteki to w pełni funkcjonalne pakiety SDK, które składają się na wszystkie omówione powyżej warstwy. Poza tym udostępnia interfejsy do obsługi różnych operacji skanowania. W zależności od formatów kodu kreskowego i szybkość wykrywania jest potrzebna w danej sytuacji. Decyzję można podjąć między rozwiązaniami Wasm i innymi. Mimo że dekodowanie kodu kreskowego wymaga dodatkowych zasobów (Wasm), Wasm pod względem dokładności przewyższają rozwiązania inne niż Wasm.
Naszym głównym wyborem był Scandit. Obsługuje wszystkie kody kreskowe formaty wymagane w naszych zastosowaniach biznesowych; przewyższa wszystkie biblioteki open source dostępne szybkości skanowania.
Przyszłość skanowania
Gdy interfejs Machine Detection API będzie w pełni obsługiwany przez wszystkie popularne przeglądarki, możemy opracować
nowy element HTML <scanner> o możliwościach wymaganych przez skaner kodów kreskowych. Inżynieria
w MishiPay jest zdecydowany przypadek użycia funkcji skanowania kodów kreskowych.
HTML ze względu na rosnącą liczbę bibliotek open source i licencjonowanych, które
funkcje takie jak Scan & Go i wiele innych.
Podsumowanie
Zmęczenie aplikacją to problem, który napotykają deweloperzy, gdy ich produkty wkraczają na rynek. Użytkownicy często chcą rozumie, jakie korzyści daje aplikacja, zanim ją pobiorą. W sklepie, gdzie MishiPay pomaga i zwiększyć wygodę użytkowników, dlatego trudno jest czekać, pobierać przed rozpoczęciem korzystania z aplikacji. W tym właśnie pomaga nasza aplikacja PWA. Pokonując bariery przed wejściem 10-krotnie zwiększyliśmy liczbę transakcji i umożliwiło użytkownikom zaoszczędzenie 2, 5 roku czekając w kolejce.
Podziękowania
Ten artykuł został zrecenzowany przez Joe Medley.