
Here is the fourth part of my journey (also known as "How-to create a simple mobile app for newbies"):
Part I: Make sure your phone can access SAP Gateway
Part II: Create your first service with SAP Gateway
Part III: Develop your mobile app on Eclipse
Part IV: Test your mobile app on your phone
Part V: Troubleshooting... and finally make it work!
Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features - Part 1
Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features - Part 2
https://www.youtube.com/watch?v=xYgUF1haNsA
If you read my previous blog post (My journey creating a SAPUI5 mobile app at home [Part III]), you already know that I couldn't test my SAPUI5 application within Eclipse... In fact each time I selected "Run as >> Web App Preview", only a blank page was displayed (without showing errors, nor any message). After some quick research over the Internet, I thought this could be due to the "Cross-origin-domain" policy and I decided to keep on moving and test this application on my own Phone.
Unfortunately, whatever I tried (and believe me I tried a hundred things), it didn't work. I was stuck with exactly the same blank page on my phone too. So I realized this "blank page" issue had to be fixed before continuing this journey... and I finally discovered what was wrong with my project: the index.html page that had been generated for me by the Wizard contained a line that didn't point to any existing directory:
So I turned it to:
Et voilà: I could finally test my application and see how beautiful it was! (still no data displayed, but that is certainly caused by the "Cross-origin-domain" stuff). Don't ask why it worked because there was no folder named "resources" either in my application (must be a kind of magic😞
At this point, I turned off the firewall (for private networks) on my virtual machine, and I tried to reach from my phone the same URL as the one given in the Preview tab of Eclipse (except that I changed "localhost" to "192.168.0.9"): the exact same page was displayed. Good. The only thing I had to do now was to "package" everything into an Android application.
Remark: I thought I did something wrong when I installed SAP Netweaver Gateway Plug-in for Eclipse. So I scratched my virtual machine and re-installed everything again... Same result.
I read a few blogs talking about the tools you can use to build a mobile application out of HTML5. The easiest one seemed to be Adobe PhoneGap Build. It's a free service that will do everything for you providing you agree to upload your html sources on a public Github repository. And what is GitHub? It's a free program that you install on your pc to synchronize selected folders with your GitHub account over the internet. As far as I could see it's a kind of Dropbox. So let's try this out:
**Remark: if you get an error saying "Unable to clone/checkout repository" that probably means you haven't published your project into the GIT server, so go to the GitHub program and click on the "Publish" button and wait for the code to be put on to the server, then retry.
And now comes the moment when you download the package produced by PhoneGap, and pray.
As I'm running Android I downloaded the file ".apk" to my PC. I connected my mobile phone via USB. I transfered the ".apk" to the "download" directory of my phone. I double checked in Settings >> Programs >> Installation that the flag "allow unknown sources" was flagged and I installed my brand new application.
Guess what?
Blank page. Nothing. Empty screen... again
:mad:
Oh boy!
So I searched SCN forums and blog posts to see if I could find something helpful. And this thread helped me a lot: Packaging a sapui5 app with phonegap. Also ted.castelijns posted a comment in one of my previous blog post that confirmed what I had to do: copy the "resources" folder into the "WebContent" of my application in Eclipse. I told you I was a complete newbie, didn't I? Fine, let's copy this folder and see what's Eclipse is telling me:
Ooops.
I'm running a virtual machine with 6Go of RAM on Windows 7 64bits. Not enough apparently, even after "cleaning" the resources folder as mentioned in the above thread (after unzipping the folder it is 80Mo, and I managed to take it down to 39Mo which is still far too heavy for my phone anyway).
I'm still working on it... I need a little more time to understand how to identify which files the system really needs so I can further decrease the weight of this app. I'll update this post as soon as I can test my app on my phone (but if you have any idea please share your thoughts in the comments).
Anyway, I came to the conclusion that building a mobile app on a personal laptop using Netweaver Gateway and SAPUI5 wasn't that easy for someone (like me) that doesn't have any "Java" development background. Obviously knowing the ABAP development workbench (SE80) didn't help me so much. However I'm pretty sure that next time I'll have a colleague from the Java team beside me and while I will be busy with the Gateway services (this tool is fantastic!) he will take care of the Eclipse part much better than I did during this series... 😃
Want to see how I could finally make it work? Got to Part V
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
10 | |
7 | |
7 | |
7 | |
5 | |
5 | |
5 | |
4 | |
4 | |
4 |