Those who have been following my recent whereabouts know that I’ve been looking into turning a SAP UI5 mockup project created with the upcoming AppDesigner into a working application by connecting it to the SAP Mobile Platform – Cloud Edition (for more details please refer to Jens Koerner ‘s recent blog.)
In a nutshell, the process looks like this:
- You take the HTML5 + JS + CSS code generated by the AppDesigner and plug it into a PhoneGap project.
- Then you simply replace the endpoint to the Odata service and then compile the app.
- There’s no step 3. You’re done!
So, while I was going through this endeavor from end-to-end I faced some connectivity issues when running this scenario within the iOS simulator. The code was running perfectly fine in my local browser, but I simple didn’t get any result back from within my PhoneGap project. My first thought was that it may be a CORS issue as I was calling external services via Odata (and not via JSON-P.) From what I’ve been told CORS should not be a problem for mobile web apps, but I still wanted to pin-down the problem, hence I did a quick search and found the PhoneGap Domain Whitelist Guide, which explained the necessary information on how-to fix this. Still no luck though….
So, I continued my investigation and tried out a simple AJAX call against an external service, which worked fine. So, in general making external calls was working. At this point in time I was thinking: “if only I would have my beloved web inscpector tools known from webkit, so I could check the network traffic!?!”
Now, for those of you who don’t know about weinre yet:
“weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.”
In a nutshell, it’s a tool that gives you the same interface as the web inspector, but for external apps. So, just what I needed!
I found a great document explaining the installation process on the web: Installing Weinre on Mac OS X
Now, you can use the monitor page on the local server to debug the application as if it would be running locally! Have a look:
Pretty cool, isn’t it? Surely helped us to identify the cause of the problem with our Odata model!
PS: Oh… and another benefit of installing weinre is that you also install node.js during the process in case you’re interested in trying it out! ;)