Debugging Mobile Apps

Transcription

1 Debugging Mobile Apps Native and Mobile Web Apps Shelley Chase Senior Architect, Progress OpenEdge November 2013

2 OpenEdge Mobile Value Proposition: Write Once, Run Anywhere Portability with the Benefits of Native Applications. The Easiest Way to Build an OpenEdge Application Supporting Mobile Devices, End-to-end Benefits: A comprehensive and integrated tool set with support for a wide variety of devices Mobile UI development is cloud-based, so collaboration among the development team, business analysts and with end users is fully supported Leverage existing ABL business logic, the OpenEdge AppServer and OE database 2

3 Building Mobile Apps is Easy Express Mobile App Winner of 2013 Mobile App Dev Challenge 3

4 Building Mobile Apps is Easy But Sometimes, Something Goes Wrong Did I get an error? Where do I look? Where s the data? Was my JavaScript programming right? How can I tell? How can I debug? Can you debug the cloud? 4

5 Session Agenda OpenEdge Mobile Apps Review OE Mobile Architecture of an OE Mobile App Debugging strategy Debugging tips for each component in a Mobile App Debugging in Action Demo Q & A 5

6 OpenEdge Mobile Apps 6

7 Developing a Mobile App Step 1 Step 2 Step 3 Step 4 Define OE services Build UI Bind data and UI Build and deploy 1. Define OE services (Business Entities) in Progress Developer Studio for OpenEdge 2. Build UI in cloud-based Mobile App Builder 3. Import OE services to Mobile App Builder and map data to UI 4. Finally build and deploy as native or mobile web app 7

8 Express Setup: One-click Mobile App (11.3) Automatically checks system configuration Displays list of database tables Select a table Wait while app is built and voilà Fully functional CRUD Mobile App Tip: Copy appconfig.js to cloud to run directly from Mobile App Builder 8

9 Mobile App Runtime Architecture: Mobile Web App Mobile App (Web) OE Web Server OE AppServer http/s REST web service AppServer UI + JSDO Adapter JSDO catalog JSDO catalog Mobile Web UI + JSDO Adapter Business Entity ABL Mobile Web Apps are hosted on web server and accessed using a URL OE Web Server hosts HTML/CSS/JS files - UI and JSDO adapter need to be downloaded at runtime OE Web Server provides access to OE AppServer 9

10 Native App Runtime Architecture: Native App Mobile App (Native) OE Web Server OE AppServer http/s REST web service AppServer UI + JSDO Adapter JSDO catalog JSDO catalog *No need for UI or adapter Business Entity ABL Native Apps are downloaded on mobile device before the app is run UI and JSDO adapter included in executable OE Web Server provides access to OE AppServer 10

11 Debugging Mobile Apps 11

12 Anatomy of an OpenEdge Mobile / REST Web Application Standard Java web application architecture & functionality Spring Security (replaces Java container authentication & authorization security) Combinations of REST services & OpenEdge Mobile components 12

13 Debugging Components and Failure Points Native Device Session and JSDO Network /Web Mobile Service AppServer 13

14 Debugging the AppServer AppServer Typical errors: Database server not running Adminserver Service not running Broker / Nameserver not running Source not published to AppServer ABL programming errors Examine AppServer and Broker logs $WRKDIR\restbroker1.broker.log $WRKDIR\restbroker1.server.log Tip: Use ABL MESSAGE statement to write to log files 14

15 Debugging the Mobile Service Mobile Service 15

16 Debugging the Mobile Service Mobile Service = REST web service + JSDO catalog 16

17 Debugging the Mobile Service: Accessing the REST Service and Catalog Mobile Service Scenario In a web browser type Fix Is Tomcat is running? Start Web Server PDSOE servers view ->Start >protc start What Web Apps are deployed? Is the REST Service published? Note: username/password = tomcat Publish Mobile Service - PDSOE servers view -> Publish - Explicit export Is the JSDO Catalog published? mobile/mymobileservice.json Tip: Information displayed for a REST Web App has been enhanced in

18 Debugging the REST Service: Can I Get Data? Mobile Service Scenario: Does default read operation return data? If not check Does the resource name in catalog match the URI? What is web server authentication model? $DLC\servers\tomcat\webapps\MyMobileWebApp\WEB-INF\web.xml <!--USER EDIT: Select which application security model to employ --> /WEB-INF/appSecurity-anonymous.xml Is Web Application enabled? $DLC\servers\tomcat\webapps\MyMobileWebApp\WEB-INF\adapters\runtime.props <bpm:serviceavailable>1</bpm:serviceavailable> Tip: Start testing with anonymous authentication model to work out non-security bugs first 18

19 Debugging the REST Service: A Look Inside Tomcat Mobile Service $DLC\servers\tomcat\webapps (Export) 19

20 Debugging the REST Service: A Look Inside Tomcat (11.3 Express Publish) Mobile Service $DLC\servers\tomcat\pdsoe (Express-publish) $DLC\servers\tomcat\webapps (Export) $DLC\servers\tomcat\conf\Catalina\localhost Tip: Express war files cannot be used on a production server 20

21 Debugging the REST Service: Get Debugging Information Mobile Service Edit $DLC\servers\tomcat\webapps\MyMobileWebApp\WEB-INF\classes\log4j.properties Change ERROR to DEBUG for relevant packages Debug OpenEdge Client-Principal and CORS handling 21

22 Debugging Network and Web Communication: Enable Browser Debugging Network /Web From within the browser, right-click and choose Inspect Element or F12. Network tab shows HTTP requests Sources tab Full JavaScript source debugging Console tab shows errors Tip: Debugging might need to be enabled for a browser 22

23 Debugging Network and Web Communication: Check for Errors Network /Web Check Network traffic Was an error returned from the server? 200 success 4xx client side error 5xx server side error Was the request even sent?! Check the Console for errors Cross-Origin Resource Sharing error By default, "same origin" security sandbox rules = HTTP scheme + domain name + port Many browsers have their own CORS handling CURL takes browser behavior out of the picture HTTP to HTTPS access often denied depends on browser 23

24 Debugging Network and Web Communication: Log Files Network /Web Web Application logs $DLC\servers\tomcat\webapps\MyMobileApp\WEB-INF\adapters\logs\MyMobileService.log OE Web Server logs: $WRKDIR\ (development) or $CATALINA_BASE/logs (production) catalina.<date>.log or catalina.out localhost.<date>.log localhost_access_log.<date>.txt 24

25 Debugging the Client-side Session and JSDO Session and JSDO Scenario Are Session settings correct? Session in Mobile App Builder Does the authenticationmodel match the deployed Web App? Is the cataloguri correct? Is the serviceuri correct? Is JSDO constructed correctly? 1. Create Session and Login 2. Load Catalog 3. Create JSDO 4. Call JSDO Read Tip: Authentication model matches $DLC\servers\tomcat\webapps\MyMobileWebApp\WEB-INF\web.xml 25

26 Debugging the Client-side Session and JSDO: JSDO Services Session and JSDO JSDO Services generated from catalog One JSDO Settings Service settings must be correct One JSDO Service must be called before other services Service must be added to each page where it is used Session Service (Session-enabled projects) Session Settings can be used in place of specific JSDO Settings properties: ServiceURI CatalogURIs Tip: Use Success, Error and Complete events of a Service 26

27 Debugging the Client-side Session and JSDO: Browser Debugging Session and JSDO Debug the JavaScript file for the Mobile App /files/myphoneapp.js Useful breakpoints in /progress.session.js this.login = function this.addcatalog = function this._openrequest = function (JSDO uses this to prepare HTTP requests) Tip: Always select Render all pages in one HTML file (jquery Mobile multi-page template) for Mobile App 27

28 Debugging on a Native Device Native Device First always try running it in from a browser (~90% of errors found) Run an HTTP monitor on your computer and set it as a proxy on the device OpenEdge WSA viewer Fiddler 2 Remote debuggers ios: Web inspector from Safari on OS-X Android: Android Debug Bridge (ADB) through USB connection to computer Weinre (web inspector remote) 28

29 Demo: Debugging in Action 29

30 Demo: Let s Get Debugging HTTP Status 0: Failed to log in. A network error occurred. status (from jqxht) :0 statustext (from jqxht) : 30

31 Debugging From Your Browser From within the browser, right-click and choose Inspect Element or F12. Errors are displayed in the Console tab Full JavaScript source debugging Browser Chrome Helpful Links Firefox Safari Internet Explorer Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html Tip: Versions prior to IE 10 do not support HTML5 31

32 HTTP Monitors : Fiddler 2 and Other Standalones 32

33 Summary Debugging involves many components and communication between them You can start at any component Test you app first without any security in a development environment Add in security and SSO capabilities after you know the app is solid Client and server have to agree on authentication model Integrate AppServer SSO after the other things are done Beware of complex configurations during initial testing Cross-origin resource sharing (CORS) HTTP to HTTPS Web Server authentication start with Anonymous Debugging guide and discussion: 33

34

35 Spring Security Anatomy of an OpenEdge Mobile / REST Web Application OE Web Server Java Container (Web App) HTTP session manager OE AppServer Native app (device) Mobile / REST Web Application REST web web service AppServer Mobile Web app (browser) JSDO JSDO catalog catalog Mobile Web UI + JSDO Adapter Business Entity ABL 35