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

[nicolas_busson]

Troubleshooting... and finally make it work!

Here is the fifth 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:

http://developer.android.com/sdk/installing/installing-adt.html

http://ant.apache.org/bindownload.cgi

http://phonegap.com/download

http://simonmacdonald.blogspot.ca/2012/11/getting-create-command-to-work-on.html

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

Step1: fix your application

In my last blog post I showed how to adapt the HTML code of the index.html file of your application so it will load correctly in preview mode within Eclipse... but unfortunately that was not enough for being able to have the same result on my phone. I had to copy the "resources" folder from the SAPUI5 toolkit into the "WebContent" repository of my application. So here is what I've done:

1. Go to the folder where I initially downloaded the UI Development toolkit for HTML5 (see Part III - Step 2)
2. Extract the file sapui5-static.zip into C:\sapui5
3. Drag and drop folder C:\sapui5\sapui5-static\resources into Eclipse inside the "WebContent" folder

The problem is: this "resources" folder is quite heavy (80Mo). So my virtual machine didn't support it and Eclipse kept crashing all the time. So I managed (via debugging) to extract only the files that I really needed -- and those files only -- before droping this folder into Eclipse. If you're having the same problem, you can give it a try (I'll explain how to debug later on) but be cautious: if you're deleting one of the files that are actually used, then you'll probably get a blank page when starting your application from your phone without any details on why it happened, nor how to fix it... so if you're following this blog series, I can send you my light "resources" folder (1,83Mo) instead.

Also, there seems to be a bug in the SAP Netweaver Gateway Plug-in for Eclipse that we installed in Part III - Step 2. On my computer the wizard that I used to build this application created a controller for the list view with an incorrect value line 76:

There is a missing slash character. So do remember that this line has to be converted into something like this (you'll find the relevant file in "WebContent >> <appname> >> resources >> <listview>.controller.js") before you can actually see any value in the table:

One last thing: when running on your phone, this application won't display any popup to enter a user/password to connect to your SAP backend system. So you'll need to provide the credentials in the very same file to avoid connection issues (see <listview>.controller.js, line 12):

Step 2: test your application within Eclipse

Before trying to install our brand new application on our phone, let's test it with "real" data coming from the backend first. As you may have noticed, until now the table displayed within the HTML5 application is always empty although valid data exists in the backend. This is due to some security restrictions within the web browsers... but there is a small trick that we can use to by-pass this limitation:

1. Open the file "WebContent >> <appname> >> resources >> utils >> connectivity.js":
   
2. Change the URL "http://<something>" into "proxy/http/<something>" like I did below (I commented the original line and created a new one to be able to switch between the two very easily):
   

Now start the preview mode... And enjoy!

Step 3: install this application on your phone

If you're lucky, you can now run through step 2 & 3 of Part IV, and off you go with a nice mobile application working on your phone and connected to your home-made SAP Netweaver Gateway system (don't forget to set the URL back to its initial value -- i.e. without the "proxy" prefix -- in the file named "connectivity.js", and mind your firewall settings on your machine).

But that's not me... I couldn't make it work. Every ".apk" (it's the type of file we use for Android) created with PhoneGap Build wouldn't work on my phone: either I got a blank page or the application couldn't be installed at all. And even if this service is free and very convenient, I was experiencing a big drawback: you have no possibility to understand what's wrong when something goes wrong. So I had to go for the "hardcore" method described below.

Step 4 (optional): learn how to debug your app!

This section is intended to put some light on how to install/debug your application the old fashion way. Basically, we need to install "native-application" tools in our Eclipse environment to be able to debug. As far as I'm concerned I've got both a laptop running Windows 7 64bits, and an Android phone: so the following steps will reflect what needs to be installed for my own situation. I believe this shouldn't differ too much if you're running Mac OS and an Iphone: adapt it according to your needs. And it'salso worth mentioning that I didn't follow the installation instructions from Android website on purpose because their method was less straightforward than this one:

1. Open Eclipse and select Help >> Install new software
2. Insert https://dl-ssl.google.com/android/eclipse/ into field "work with..."  and press ENTER
3. Select "Developer Tools"
4. Click Next, accept Terms of use, then Finish
5. Click OK for all security warning, and restart Eclipse
6. Close the abort popup that says "Location of the Android SDK has not been setup in the preference".
7. Install the Android SDK from the second popup just behind the previous one (I flagged Android 2.2 to avoid any compatibility issues with my phone):
8. Finish the SDK installation process (accept license, etc.).
9. Download and install jdk-7u17-windows-x64.exe (I chose not to install the JRE).
10. Download and extract apache-ant-1.9.0-bin.zip to C:\ant
11. Download and extract phonegap-2.5.0.zip to C:\phonegap
12. Add the following entry to your PATH system variable: ";C:\Users\sapadm\android-sdks\tools;C:\Users\sapadm\android-sdks\platform-tools;C:\Program Files\Java\jdk1.7.0_17\bin;C:\ant\bin"
13. Make sure your JAVA_HOME system variable points to JDK7: "C:\Program Files\Java\jdk1.7.0_17"
14. Start a command line inside the PhoneGap >> lib >> Android >> bin folder and enter this command to create an empty application:
    create C:\MyApp dev.home MyApp
15. Open Eclipse. Choose File >> New >> Other >> Android >> Android project from existing code >> Select folder C:\MyApp and finish.
16. Copy the files from previous application (directory "WebContent") into folder assets >> www
17. Fix any error regarding the file AndroidManifest.xml (might need to delete a couple of tag' attributes).
18. Add line "<script src="cordova-2.5.0.js"></script>" into index.html.

That's it. You might face some issues with Eclipse (mine freezed a few times). But if you successfully reached this point you are now ready to test/install/debug the android application either on a simulator, or on a real phone (need to activate debugging). Important remark: if you're working inside a virtual machine (like I did), the latter might not work because of a known issue in VirtualBox... so either use a non-virtualized installation, or see what happens on the simulator only:

Conclusion

I spent definitely more than 5 minutes to finally create a mobile application that I can use on my phone :wink:

But within five days I could both make it work and take some time to note down my progress throughout this blog series... so I don't think that's much considering I had never seen Eclipse before. And it was worth the effort! All in all my biggest mistake was to try  "the lazy way" with PhoneGap Build Service... I wasted a lot of time trying to make it work, while the problem doesn't seem to come from my application, but from the service itself (the application runs fine when I install it from Eclipse the "hardcore" way).

Enough writing: now I'm ready to play.