WebApps in spezieller Umgebung

Transkript

1 WebApps in spezieller Umgebung Neuentwicklung des dm Service-Punkts #devfestka2016 Matthias Reuter inovex Philipp Christoph FILIADATA GmbH

2

3 Grafk: Polygon GmbH

4 Alles neu?!

5 SPAF Service-Punkt Application Framework 1 GET /login 4 <div class="trigger" id="a95bff82182d" /> WebApp Filiale Ich möchte Text eingeben! a95bff82182d 3 2 SetClientAction( 915, [ show_keyboard,... ] ); 5 getactionsfor( a95bff82182d ); SPAF 6 [ show_keyboard,... ]

6 SPAF Service-Punkt Application Framework 1 GET /login 4 <div class="trigger" id="a95bff82182d" /> WebApp Filiale Ich möchte Text eingeben! a95bff82182d 3 Die Tastatur kommt nicht hoch! 2 SetClientAction( 915, [ show_keyboard,... ] ); 6 5 getactionsfor( a95bff82182d ); [ show_keyboard,... ] SPAF Grafk: FontAwesome

7 Welcome to maintenance hell Grafk: Mail.RU Games

8 Alles neu!

9 Service- Punkt 2.0 Hardware Cross-Platform Offline capability

10 Hardware-Limits Strom Scanner Netzwerk

11 Scanner USB auf Lightining? Scanner per Klinke? Spezialkabel

12

13 ios- vs. WebApp ios WebApp Hardware-Anbindung - Offlinefähig? Portierbar -

14 Hybrid-App ios-container App WebApp läuft in einem WebView Kommunikations-Bridge

15 Kommunikation ios App kann beliebiges JavaScript aufrufen Website kann URLs öffnen Können von nativer App abgefangen werden dmbridge://scanner/beep dmbridge://system/getavailableapps?id=42 Asynchron Promises

16 Kommunikation Android/ App kann beliebiges JavaScript aufrufen App kann JS-Objekt injecten Methoden werden zu Java-Objekt gemappt Datenformat begrenzt Für komplexere Daten JSON-Serialisierung Windows

17 dmbridge Kapselung der Kommunikation API für WebApps Konkrete Implementierung anhand der Umgebung dmbridge.scanner.beep(); dmbridge.system.getavailableapps().then();

18 Offline-Fähigkeit Gepackte WebApps Yahoo! Widgets / Konfabulator W3C WebApps Firefox OS Apps Zip-Datei mit Manifest Grafk:

19 Single-Page-Application ein Muss Offlinefähig Kein Server benötigt Kommunikation mit Backend per REST

20 Durch alle Schichten Nutzer scannt eine Geschenkkarte

21 Starter WebApp 3 dmbridge.scanner.beep(); dmbridge.app.open( voucher-webapp, data ); Container 2 dmbridge.events.trigger( scanner.scan, data ); 4 Lädt App dmbridge.events.trigger( init, data ); Voucher WebApp 5 GET /checkcard REST 1 Scan (Code & Typ) SOAP 6 { type, state }

22 Unit-Tests In computer programming, unit testing is a software testing method by which individual units of source code, sets of one or more computer program modules together with associated control data, usage procedures, and nobody reads this operating procedures, are tested to determine whether they are ft for use. Intuitively, one can view a unit as the smallest testable part of an application. Grafk: clipartlord.com

23 Herausforderungen Komplexe Architektur Container-App dmbridge WebApp REST Fail early, also exzessive Unit-Tests

24 Lösungen Sehr kleine Tests Existenz einer Methode Anzahl erwarteter Parameter Ein Test pro Anwendungsfall Jeder Service, Controller, Direktive...

25 Unit-Test Stack

26 End-To-End Tests End-to-end testing is a technique used to test whether the fow of an application right from start to fnish is behaving as expected. The entire application is tested for critical functionalities such as communicating with the other systems, interfaces, [...] and other applications. Grafk: clipartlord.com

27 End-To-End Tests Kurz: End-to-end testing is a technique used to test Simuliere einen User whether the fow of an application right from start to fnish is behaving as expected. The entire application is tested for critical functionalities such as communicating with the other systems, interfaces, [...] and other applications. Grafk: fechenbach.de

28 E2E dm-style Unser Wunsch... Video: Mattessons Fridge Raiders, Youtube

29 E2E dm-style Unser Wunsch... Einige Kompromisse später

30 E2E dm-style Die Realität Keine Touch Simulation Keine Backends Grafken: FontAwesome

31 E2E dm-style

32 E2E dm-style Manuelle lokale Tests Automatische tests bei jedem git push Backend mocks

33 Screenshots var ScreenShotReporter = require( "protractor-screenshot-reporter"); exports.config = { onprepare: function () { jasmine.getenv().addreporter(new ScreenShotReporter({ basedirectory: "test/reports/e2e/screenshots", pathbuilder: function (spec, descriptions) { return getpathfordescripions(descriptions); }, takescreenshotsonlyforfailedspecs: true })); } };

34 Viewport-Größe browser.driver.manage().window().setsize(1024, 768); browser.executescript( "return document.documentelement.clientheight;" ).then(function (clientheight) { if (clientheight!== 768) { browser.driver.manage().window().setsize(1024, (768 - clientheight)); } });

35 Page Objekte Globale Defnition von Elementen Verbessern Lesbarkeit

36 Page Objekte Globale Defnition von Elementen Verbessern Lesbarkeit

37 Lessons learned Automatisierte Tests machen Spaß Grafk: FontAwesome

38 Lessons learned Testarchitekturen zu bauen braucht Zeit Grafk: FontAwesome

39 Lessons learned TDD Test-Driven-Development?

40 Lessons learned Test-driven bug fxing! Grafk: FontAwesome