AppBuilder Tutorials: the missing step!
The new AppBuilder rocks
So, finally the brand new AppBuilder is available – and it really rocks! As we can expect from SAP, it comes with some quick start guides that make it really easy to get started. Since I do like tutorials, I right away started with the “simple AppBuilder app” tutorial. As I said, AppBuilder is a very cool tool. However, having finished my first tutorial, I was not only impressed. I was also a little bit disappointed: And that’s because there is one step missing in the tutorial and that’s (in my opinion) one of the most important ones:
How can we run the App on a REAL mobile device?
After all, that’s what mobile Apps are for, aren’t they? They are meant to run on mobile devices, not into some kind of simulator or container environment.
Well, thanks to the features of the AppBuilder and the wealth of tools of SAP in general, this shouldn’t be too hard to achieve. In this blog I’d like to show some ways to get this done (there are certainly many more ways, but the following ones seemed the most natural ones to me):
Run the app on the development workstation and call it from the mobile device.
Although this seems to be the most easy way to go, there are some obstacles to overcome. The default url of the AppBuilder service is: http://localhost:9009/…. Of course, the hostname “localhost” can’t be reached from outside the very own host (that’s why it is called “local” after all….). There are ways to make this happen anyway, I know, but neither is fun to go. The most intriguing one might be to change all occurrences of 127.0.0.1 to the external IP address or host name of your workstation. This must be done in all relevant files (starting with “server.bat/.sh”, “chrome.bat/.sh” and many more) – and I don’t think, that those files are meant to be manually adjusted. So, we better leave this path and look for some better ways to achieve our goal.
Deploy the project as a “Cordova project” and copy the resulting files to any http server.
Starting with SMP 3.0 there is a new hybrid web container called “kapsel”, which is based on the apache Cordova project. Since AppBuilder supports this environment we can use this to our advantage. Simply go to “Deployment – Create Cordova Project” from within your AppBuilder project and let AppBuilder do all the work. You don’t even have to have Cordova installed. On the “Deployment Settings” dialog just enable the “Android” option and leave all other options untouched (see print screen). Confirm and wait until you (hopefully) get some success message. Then jump to your AppBuilder installation directory and go to “..\kapsel\” where you should find a new directory with the name of your App (in my case “HelloAB”). This directory contains everything needed to run your App. Actually, it is meant to be copied into the Cordova html5 container, but who says that we can’t copy the whole content of the “www” subdirectory to any http server of your choice? Apache’s httpd does a perfect job as does Microsoft’s IIS. In my case I copied the “www” subdirectory with all subdirectories and files to my apache htdocs directory (C:\Program Files (x86)\Apache Software Foundation\Apache2.2\htdocs) and renamed it to “HelloAB”. It is then simply a matter of calling the respective url (in my case: “http://HOST/HelloAB“) from your mobile browser to enjoy your work on a real mobile device.
While this approach works just fine, it will certainly not win any efficiency or beauty contest. After all, the whole SAPUI5 library has to be copied with every App (which is the reason why even the simplest App is about 13 MB or more). There must be some better ways – and yes: there are. In a upcoming blog (part 2 now online) I will show you some more advanced ways, like
- Using SAPs own web server instead of Apache or IIS (SAP ICM).
- Using SAPs ABAP-UI5 runtime (using “/UI5/UI5_REPOSITORY_LOAD”) to run the APP.
Until then, enjoy your new AppBuilder!