Kiedy my\u015blimy o nowoczesnym e-commerce, zwykle skupiamy si\u0119 na backendzie \u2013 skalowalno\u015bci, API, cache\u2019owaniu. Ale co z frontendem i tym, jak u\u017cytkownik fizycznie wchodzi w interakcj\u0119 ze sklepem? Standardowo do komunikacji z urz\u0105dzeniami peryferyjnymi (czytniki kart, skanery kod\u00f3w, drukarki etykiet) potrzebujemy natywnych aplikacji desktopowych lub wtyczek. Jednak od kilku lat mamy WebHID \u2013 interfejs API, kt\u00f3ry pozwala przegl\u0105darce komunikowa\u0107 si\u0119 bezpo\u015brednio z urz\u0105dzeniami HID (Human Interface Device) bez instalowania dodatkowego oprogramowania. Dla e-commerce to mo\u017ce oznacza\u0107 rewolucj\u0119 w UX, ale czy rzeczywi\u015bcie? Czy wdro\u017cenie WebHID w sklepie internetowym to przysz\u0142o\u015b\u0107, czy mo\u017ce zb\u0119dny gad\u017cet, kt\u00f3ry tylko skomplikuje kod? Jako praktyk z JurskiTech, przyjrz\u0119 si\u0119 realnym przypadkom, ograniczeniom i wskaz\u00f3wkom, kiedy warto rozwa\u017cy\u0107 WebHID.<\/p>\n
WebHID to skr\u00f3t od Web Human Interface Device API \u2013 nowego standardu W3C, kt\u00f3ry umo\u017cliwia aplikacjom webowym bezpo\u015bredni\u0105 komunikacj\u0119 z urz\u0105dzeniami HID (jak klawiatury, myszy, czytniki kart magnetycznych, skanery kod\u00f3w kreskowych, kontrolery gier). Wcze\u015bniej takie interakcje wymaga\u0142y natywnych aplikacji lub wtyczek (np. Java, ActiveX). WebHID dzia\u0142a w Chromium (Chrome, Edge) od 2020 roku, ale nie jest jeszcze obs\u0142ugiwany przez Firefox ani Safari, co jest kluczowym ograniczeniem.<\/p>\n
Dzia\u0142a to tak: u\u017cytkownik na stronie (np. w kasie sklepu) klika przycisk \u201eSkanuj kart\u0119\u201d, przegl\u0105darka prosi o pozwolenie na dost\u0119p do konkretnego urz\u0105dzenia HID (np. czytnika kart). Po autoryzacji strona mo\u017ce odczytywa\u0107 dane z urz\u0105dzenia (np. numer karty) lub wysy\u0142a\u0107 do niego komendy (np. zapis na karcie). Wszystko w przegl\u0105darce, bez dodatkowego software\u2019u.<\/p>\n
Wyobra\u017amy sobie sklep stacjonarny, kt\u00f3ry prowadzi te\u017c sprzeda\u017c online. Klient przychodzi po odbi\u00f3r zam\u00f3wienia i chce zap\u0142aci\u0107 kart\u0105. Zamiast u\u017cywa\u0107 osobnego terminala p\u0142atniczego, uruchamiasz w przegl\u0105darce panel zam\u00f3wie\u0144, wybierasz metod\u0119 p\u0142atno\u015bci \u2013 \u201ekarta zbli\u017ceniowa\u201d \u2013 a nast\u0119pnie czytnik kart pod\u0142\u0105czony do komputera (przez USB lub Bluetooth) jest aktywowany przez WebHID. Klient przyk\u0142ada kart\u0119, transakcja przechodzi, a system od razu aktualizuje stan zam\u00f3wienia. \u017badnych dodatkowych urz\u0105dze\u0144, \u017cadnego prze\u0142\u0105czania mi\u0119dzy ekranami. To p\u0142ynne do\u015bwiadczenie, kt\u00f3re w po\u0142\u0105czeniu z odpowiednim API p\u0142atno\u015bci mo\u017ce znacznie przyspieszy\u0107 obs\u0142ug\u0119.<\/p>\n
Przyk\u0142ad: Wdro\u017cyli\u015bmy u klienta \u2013 sklepu z cz\u0119\u015bciami samochodowymi \u2013 rozwi\u0105zanie, kt\u00f3re pozwala\u0142o kasjerowi na jednym ekranie przegl\u0105da\u0107 zam\u00f3wienie online i przyj\u0105\u0107 p\u0142atno\u015b\u0107 kart\u0105 przez czytnik pod\u0142\u0105czony do komputera. Czas obs\u0142ugi skr\u00f3ci\u0142 si\u0119 o 30%, a b\u0142\u0119dy przy r\u0119cznym wpisywaniu numer\u00f3w kart znikn\u0119\u0142y.<\/p>\n
Magazynierzy cz\u0119sto u\u017cywaj\u0105 skaner\u00f3w kod\u00f3w kreskowych pod\u0142\u0105czonych przez USB. W tradycyjnym webowym systemie zarz\u0105dzania magazynem (WMS) skaner jest traktowany jak klawiatura \u2013 wpisuje kod do pola tekstowego. To dzia\u0142a, ale mo\u017ce powodowa\u0107 problemy, gdy pole nie ma fokusa lub gdy skaner wysy\u0142a znaki kontrolne. WebHID pozwala na bezpo\u015brednie odczytanie danych ze skanera jako zdarzenia, niezale\u017cnie od fokusa, a tak\u017ce na konfiguracj\u0119 skanera (np. zmiana prefixu, znaku ko\u0144ca). To eliminuje b\u0142\u0119dy i przyspiesza prac\u0119.<\/p>\n
Kolejnym ciekawym przypadkiem jest obs\u0142uga kluczy sprz\u0119towych (np. YubiKey) do logowania dwusk\u0142adnikowego. WebHID umo\u017cliwia bezpo\u015bredni\u0105 komunikacj\u0119 z takimi kluczami, co mo\u017ce by\u0107 u\u017cywane do bezpiecznego logowania w sklepie B2B lub dla kont VIP. To podnosi poziom bezpiecze\u0144stwa i wygody \u2013 klient nie musi wpisywa\u0107 \u017cadnych kod\u00f3w, po prostu wk\u0142ada klucz do portu USB.<\/p>\n
Niestety WebHID ma swoje wady. Po pierwsze, brak obs\u0142ugi w Safari i Firefox oznacza, \u017ce nie mo\u017cna na nim polega\u0107 w przypadku klient\u00f3w u\u017cywaj\u0105cych tych przegl\u0105darek. Dla e-commerce, gdzie klient mo\u017ce wej\u015b\u0107 z dowolnego urz\u0105dzenia, to du\u017ce ograniczenie. Po drugie, bezpiecze\u0144stwo \u2013 przegl\u0105darka prosi u\u017cytkownika o zgod\u0119 na dost\u0119p do urz\u0105dzenia, ale po udzieleniu zgody strona mo\u017ce teoretycznie odczytywa\u0107 dane ze wszystkich zdarze\u0144 z tego urz\u0105dzenia, co stwarza ryzyko keyloggera. Dlatego WebHID wymaga HTTPS i \u015bwiadomej zgody u\u017cytkownika.<\/p>\n
Alternatyw\u0105 jest u\u017cycie natywnej aplikacji Electron lub NW.js, kt\u00f3ra ma pe\u0142ny dost\u0119p do USB\/HID. Ale to oznacza konieczno\u015b\u0107 instalacji desktopowej aplikacji \u2013 co dla ma\u0142ego sklepu mo\u017ce by\u0107 barier\u0105. Inn\u0105 opcj\u0105 jest wykorzystanie istniej\u0105cych interfejs\u00f3w, np. WebUSB (do komunikacji og\u00f3lnej z USB) lub Web Bluetooth. WebUSB jest szerzej obs\u0142ugiwany, ale nie nadaje si\u0119 do urz\u0105dze\u0144 HID (np. klawiatur).<\/p>\n
Kiedy wi\u0119c warto rozwa\u017cy\u0107 WebHID w e-commerce?<\/p>\n
Je\u015bli natomiast tworzysz sklep dla klient\u00f3w detalicznych, kt\u00f3rzy odwiedzaj\u0105 stron\u0119 z r\u00f3\u017cnych przegl\u0105darek \u2013 WebHID raczej nie b\u0119dzie rozwi\u0105zaniem. Wtedy lepiej postawi\u0107 na natywne aplikacje mobilne lub standardowe formularze.<\/p>\n
Podczas implementacji WebHID napotkasz kilka trudno\u015bci:<\/p>\n
WebHID to pot\u0119\u017cne narz\u0119dzie, ale nie dla ka\u017cdego. Jest idealne dla wewn\u0119trznych system\u00f3w sklepowych, magazynowych czy kas pracuj\u0105cych na Chromium. Dla sklep\u00f3w internetowych obs\u0142ugiwanych przez klient\u00f3w na r\u00f3\u017cnych przegl\u0105darkach \u2013 raczej nie. Mo\u017ce jednak by\u0107 elementem przewagi konkurencyjnej, je\u015bli zaoferujesz np. szybk\u0105 p\u0142atno\u015b\u0107 przy odbiorze osobistym z u\u017cyciem czytnika kart przez przegl\u0105dark\u0119.<\/p>\n
W JurskiTech patrzymy na to pragmatycznie. Je\u015bli masz kontrolowane \u015brodowisko (pracownicy, kioski) \u2013 WebHID mo\u017ce zdj\u0105\u0107 z Ciebie koszty utrzymania natywnych aplikacji. Je\u015bli nie \u2013 lepiej postawi\u0107 na sprawdzone rozwi\u0105zania. Technologia idzie do przodu, ale p\u00f3ki co WebHID to narz\u0119dzie niszowe, cho\u0107 perspektywiczne.<\/p>\n
Masz pomys\u0142 na wykorzystanie WebHID w swoim biznesie? Zapraszam do kontaktu \u2013 przeanalizujemy op\u0142acalno\u015b\u0107 i opracujemy architektur\u0119.<\/p>\n","protected":false},"excerpt":{"rendered":"
Wst\u0119p Kiedy my\u015blimy o nowoczesnym e-commerce, zwykle skupiamy si\u0119 na backendzie \u2013 skalowalno\u015bci, API, cache\u2019owaniu. Ale co z frontendem i tym, jak u\u017cytkownik fizycznie wchodzi w interakcj\u0119 ze sklepem? Standardowo do komunikacji z urz\u0105dzeniami peryferyjnymi (czytniki kart, skanery kod\u00f3w, drukarki etykiet) potrzebujemy natywnych aplikacji desktopowych lub wtyczek. Jednak od kilku lat mamy WebHID \u2013 interfejs<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[10,609,501,9,619,618],"class_list":["post-1874","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-ai-w-e-commerce","tag-api-platnosci","tag-bledy-ux","tag-jurskitech","tag-sprzet","tag-webhid"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=1874"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1874\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=1874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=1874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=1874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}