My journey creating a SAPUI5 mobile app at home [Part IV]

[nicolas_busson]

Test your new mobile app on your phone

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!

Useful links:

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

Step 1: fix broken html code

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.

Step 2: build a mobile application

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:

1. First create an account on https://github.com/.
2. Then download and install GitHubSetup.exe (less than 1 Mo, but the installation procedure might download additional components and ask you to reboot your system).
3. Start GitHub and log in with the credentials provided in point 1. Complete your registration by giving a name and email address.
4. Once logged in, click the "Add" button in the upper right corner to select a local folder that will be synchronized into the cloud. For example I created the following:
   
5. Save and close GitHub.
6. Open Eclipse and add the following line to your index.html and save it:
   
7. Now copy everything from the "WebContent" directory of your project, into the repository you created for GitHub (point 5). On my PC, I copied everything inside C:\Users\sapadm\workspace\PartnerSearch\WebContent to C:\Users\sapadm\Documents\GitHub\SCNDemo
8. Then open GitHub, select your repository, enter some text in the yellow box on the right (input field marked as required) and click commit.
   
9. Login to https://build.phonegap.com/plans/free with your GitHub account.
10. Click the "open-source" tab and select your GitHub repository in the available dropdown listbox:
    
11. Click the "ready to build" button and wait for your package to be available for download** : that's it!

**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.

Step 3: test your application

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).

Conclusion

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