Debug and reverse engineer a UI5 application - Part2

[christian_buckowitz]

See what happened up to here in part 1.

Next I fired up my WebIDE and created just a new folder to contain this application. At this point big thanks to SAP, there is a whole bunch of freebies on the cloud platform with the free trial account. This makes it really nice to transit to that platform.

Then I revisited the app in the developer tools:



So far, the browser did not load much of the application. The missing parts are nevertheless there, but need to be addressed directly.

What is there is part of the folder structure. Starting from there, the manifest is at the root application folder minisap: https://go.support.sap.com/minisap/manifest.json



The manifest gives away some files that are not visible in the browser. The i18n bundle, a css file, the App controller, a main and Error view JS view from the router.

So i started to open and down them to the folder in my WebIDE:



From there on I spotted some files from the contents, like the busy.png:



Or simply try and look at the network log in the browser to find and grab more missing files:



At the end, I got the following files and folder structure:



To make the OData access work, I did throw in a generic neo-app.json and added a route to the OData destination. This is necessary to expose the OData service as same origin and avoid CORS browser errors. Find details at the SAPUI5 docs walkthrough step 26 Remote OData services.



The destination must then be setup in the SCP Cockpit. I named it minisap and directed it to the public OData base URL:



Thus I got a functional Minisap License App running in my WebIDE (using SAPUI5 1.48.20 in the run configuration):



Silly as it may be to clone the minisap app, it was quite some fun. And I am quite pleased that it is possible to analyze and inspect UI5 applications from the browser down to the readable sources.