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

[nicolas_busson]

Develop your mobile app on Eclipse

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

Consume NetWeaver Gateway services via SAPUI5 - Part 1

End-to-End How-to Guide: Building SAPUI5 Applications Consuming Gateway OData Services

How to Write Online Mobile Apps Consuming SAP Back End Systems

Step 1: Install Eclipse

As mentioned in Part I of this blog series, I'm more a functional consultant, so not familiar with Eclipse at all. And it took me a while to understand that I wouldn't be able to create my application via SAP Netweaver workbench like I'm used to (nowadays with SAP CRM7.01 it's a matter of 4 clicks to create a complete BSP application based on a GENIL model)...

Then I realized that Eclipse is delivered through myriads of flavors and you have to pick up one of them.

But... as in the end I'm planning to use SAPUI5 to develop my application (because they say it's cool), I chose Eclipse IDE for Java EE Developers as mentioned in the corresponding installation guide (after wasting my time on a few other versions, of course). By the way it is also mentioned in the very same document that Java Runtime Environment 1.6 should also be installed.

That's why I ran through those steps:

1. Download and Install the java runtime environment (version 6 = 1.6?) jre-6u43-windows-x64.exe (16,4 Mo)
2. Download eclipse-jee-juno-SR2-win32-x86_64.zip (228 Mo)
3. Extract content of eclipse-jee-juno-SR2-win32-x86_64.zip to C:\
   (apparently Eclipse is ready to go without the need for any further installation)

Step 2: Install SAP plug-ins for Eclipse

As far as I understand you have many options to develop mobile applications, but the first choice you have to make is whether you're willing to create "native apps" or "web apps". I decided to go for web apps to make it easier to distribute among many device types. And I wanted to test SAPUI5, so I ran through the following steps:

1. Download UI Development toolkit for HTML5 (I found this link in the second comment of blog SAPUI5 version 1.8 is available but I guess for a "production use" you should always download the latest version from SMP, see Note 1747308 - Installation Guide UI development toolkit for HTML5 (SAPUI5))
2. Extract content to C:\sapui5
3. Open Eclipse (I let the system choose the default workspace location)
4. Go to Help >> Install new software
5. Click on Add >> Local >> C:\sapui5\tools-updatesite. Select everything displayed as below:
   
6. Click Next, accept Terms of use, then Finish.
7. Click OK for all security warning, and restart Eclipse.

At this stage I was able to create a very simple "Hello World" application using SAPUI5 libraries following this article:How to Build a SAP HTML5 Application Using MVC with the SAPUI5 Application Development Tool. However, in order to benefit from some wizards related to SAP Gateway when creating my "a-little-more-complex" application (to search for existing services for example, let the system generate views for me, etc.) I installed SAP Netweaver Gateway Plug-in for Eclipse too:

1. Download SAP NetWeaver Gateway plug-in for Eclipse (7,88 MB)
2. Copy the zip file to C:\sapui5
3. Open Eclipse and go to Help >> Install new software
4. Click on Add >> Archive >> C:\sapui5\SAPNetWeaverGatewayPluginForEclipse_2.6.400.zip. Select items as follows:
   
5. Click Next, accept Terms of use, then Finish.
6. Click OK for all security warning, and restart Eclipse.
7. Then go to Window >> Preferences >> SAP Netweaver Gateway >> Connection
8. Click the "Add" button and fill-in the relevant connection settings (I unflagged the "Use HTTPS" checkbox in order not to maintain any certificate stuff):
   

Step 3: Create your SAPUI5 mobile app

Select "NEW >> Other" to be presented the following popup where you can choose "SAP Netweaver Gateway >> Starter Application Project":

Then follow the wizard to give your project a name, a type (HTML5), a template (List/Detail based on SAPUI5).

Click the "Catalog..." button to search for the Gateway service created in Part II.

And if you followed exactly the same steps as mine, you'll be facing this error "There are no addressable collections in the service":

Step 4: troubleshooting

It is not possible to complete the wizard without solving the above problem. So after some research, I found out that when creating your entity set (see Part II step 2), you should flag the "Addressable" checkbox. But, when I did this and tried to re-generate my service, I faced the exact same issue as in Part II step 5: the system kept telling me that everything was correctly generated, but nothing was changed at all (I'm wondering if this is because I'm creating LOCAL objects -- I don't know really). [Update: sebastien.benoit added a comment to part II of this blog series explaining that to regenerate your service after a change, you need first to delete the assignment to a system, then delete the service itself, only then will your changes be taken into account so that's worth giving it a try instead of recreating the service from scratch like I did below]

The problem is: this time I couldn't find any workaround (deleting the generated classes to force the system to create new ones seems to have no effect), so I had to create a new service from scratch. And to avoid any more surprises (even if the "Addressable" flag is probably the only one missing) I flagged almost every checkboxes:

I saved my new service, activated it, etc. (see Part II step 3 and 4).

Once done, I was able to complete the Eclipse's wizard in order to create my SAPUI5 mobile app with two views:

However I couldn't test it: when selecting the index.html page that had been generated for me, and choosing "Run as >> Web App Preview" in the context menu, only a blank page was displayed. I spent a lot of time trying to understand the reason behind this failure. In the end I gave up. As far as I understand, this problem could be related to some "Cross-domain-origin" policy... and you need to install/configure a reverse proxy to by-pass this limitation (which is above my current skills). So let's cross our fingers and see if we can still deploy this app on our mobile, and use it.

Conclusion

When you don't know anything about the Eclipse world it is not that easy to come up and build your first app... and even after a few tries and errors I wasn't able to figure out how to test my application (I spent an entire day trying to understand what was wrong). And now I'm crossing every fingers hoping that this mobile app will work once it is installed on my own phone (an old HTC Desire running Android 2.3). Go to Part IV.