Las aplicaciones web y el hardware también pueden llevarse bien

Un punto débil que tienen las aplicaciones web es la gestión de hardware especializado. Actualmente tenemos WebUSB y WebBluetooth que ofrecen un mecanismo multiplataforma para acceder a todo tipo de hardware. Pero esto no siempre ha sido así.

En esta presentación veremos la evolución de una aplicación de punto de venta que funciona en producción en miles de tiendas en todo el mundo. Veremos como gestionar una impresora de recibos, visor de cliente, terminal de pagos, balanza... Toda esta evolución de tecnologías vendrá acompañada de demostraciones y de código incluyendo WebUSB y WebBluetooth.

Transcript

1. LAS APLICACIONES WEB Y EL HARDWARE TAMBIÉN PUEDEN LLEVARSE BIEN Graphene (credit: University of Bath)
2. Adrián romero @romeroadr https://www.linkedin.com/in/romeroadr senior principal engineer @
3. Las aplicaciones web son todo ventajas • Mutiplataforma • Costes reducidos • Despliegue y mantenimiento • Información más segura • ¡¡¡Y además tenemos Javascript!!!
4. Punto de venta • Impresoras de recibos • Cajones portamonedas • Visores de clientes • Dispositivos de pago • Lectores RFID • Impresoras fiscales
5. Hardware proxy
6. Openbravo Hardware Manager HTTP WebSockets Impresoras de recibos Cajones portamonedas Visores de clientes Dispositivos de pago Lectores RFID Impresoras fiscales Puente HTTPS Puente CORS Puente Sockets Openbravo Hardware Manager
7. API Web String origin = request.getHeader ("Origin" ); if (origin != null && !origin.equals("")) { response .setHeader ("Access-Control-Allow-Origin" , origin); response .setHeader ("Access-Control-Allow-Methods" , "POST, GET, OPTIONS" ); response .setHeader ("Access-Control-Allow-Headers" , "Content-Type, origin, accept, X-Requested-With" ); response .setHeader ("Access-Control-Max-Age" , "1000"); } HttpConfiguration https = new HttpConfiguration (); https.addCustomizer (new SecureRequestCustomizer ()); SslContextFactory sslContextFactory = new SslContextFactory (); sslContextFactory .addExcludeProtocols ("SSLv3"); sslContextFactory .setKeyStorePath (keystore .getPath()); sslContextFactory .setKeyStorePassword (config.getProperty ("server.keystorepassword" )); sslContextFactory .setKeyManagerPassword (config.getProperty ("server.keymanagerpassword" )); ServerConnector sslConnector = new ServerConnector (srv, new SslConnectionFactory (sslContextFactory, "http/1.1" ), new HttpConnectionFactory (https)); SSL/TSL CORS
8. Abstracción de dispositivos public interface DevicePrinter { void beginReceipt (); void printImage (BufferedImage image); void printBarCode (String type, String position , String code); void beginLine (int iTextSize ); void printText (int iStyle, String sText); void endLine(); void endReceipt (); void openDrawer (); } <?xml version=" 1.0" encoding=" UTF-8"?> <output> <ticket> <line size="1"> <text>Lorem ipsum </text> </line> <line> <text>dolor sit amet, </text> </line> <line> <text>consectetur adipiscing elit, </text> </line> <line> <text>do eiusmod </text> <text bold="true">tempor incididunt </text> </line> <line> <text>ut </text> <text underline=" true">labore et dolore </text> <text> magna aliqua. </text> </line> </ticket> </output> INTERFAZ COMÚN DOCUMENTOS
9. DEMO
10. ZXing • Lector de códigos de barras const firstDeviceId = videoInputDevices[0].deviceId; codeReader .decodeFromInputVideoDevice(firstDeviceId, 'video') .then(result => console.log(result.text)) .catch(err => console.error(err));
11. HTTP / REST • Impresoras de recibos inteligentes Epson • Impresoras fiscales Epson
12. WebSockets • Dispositivo de pago Ingenico Lane/7000
13. Intent Android • SumUp, pagos con tarjeta • Summi V2, dispositivo integrado <a href={`sumupmerchant://pay/1.0 ?affiliate-key=YOUR_AFFILIATE_KEY &app-id=com.example.myapp &total=1.23 &currency=EUR &title=Taxi Ride &receipt-mobilephone=+3531234567890 &receipt-email=customer@mail.com &callback=http://example.com/myapp/mycallback`} > Start SumUp Payment </a>
14. WebBluetooth y WebUSB • Especificaciones en borrador • Soportado por Chrome y Opera • Sólo disponible para contextos seguros • Conexión debe ser lanzada por una interacción del usuario • API asíncrono basado en promesas
15. WebBluetooth y WebUSB chrome://device-log
16. WebBluetooth y WebUSB chrome://bluetooth-internals
17. DEMO
18. Web Hardware https://adrianromeroopenbravo.github.io/webhardware/
19. Web Hardware https://github.com/adrianromeroopenbravo/webhardware
20. Web Hardware https://github.com/adrianromeroopenbravo/webhardware
21. Web Hardware https://github.com/adrianromeroopenbravo/webhardware
22. Web Hardware https://github.com/adrianromeroopenbravo/webhardware
23. DEMO
24. MUCHAS GRACIAS Graphene (credit: University of Bath)