info@neptune-software.com      +47 2407 7000

login
share

Login form


Lost password?

Deploy your Neptune applications as Hybrid online apps

 

What if you could package your enterprise apps as hybrid apps for any modern mobile OS?

What if you could give your apps dynamic content from the server side coupled with native functionality on your devices?

What if you could make the distribution and updating of such apps as easy as updating any SAP program or function module?

 

Not long ago, such an approach would not be feasible as your app would have been rejected by Apple. Not supporting iOS is not an option for most businesses.

The launch of the iOS Developer Enterprise Program with their In-house distribution of apps changed all of this.

Now you can create these apps, and I will go through the steps on how to do so.

This short tutorial will show you how to package using Phonegap and how to make iOS apps runnable online. The reason why I use iOS in this example is that most of the other OS’s don’t need any hands-on and you can simply use the Phonegap build service.

Let’s assume we have a secure connection to our Netweaver system (There are several ways to secure your enterprise mobile solution, but this not the topic of this tutorial).

 

Step 1

The first thing you will need to do is to create a logon page in the Neptune Application Designer.

I’ll use a small application we made for SAPSA (The Swedish SAP user group) for their conference in 2012.

The login page is simply a form using standard SAP parameters as input fields (Note that you can add many more (sap-language etc). In this example I have added sap-sessioncmd as a hidden field an set the default value to open.

On the action of the form, simply choose your main menu application as target:

Add some logos and use some branding CSS to make the login-screen look good:

Remember to save and activate your code (I strongly recommend preview and testing so the page functions and looks the way you want it to before you continue).

 

Step 2

Now, start the Export to Phonegap transaction.

 

Choose a local directory and select your login page as the index.html file. Remember to check the Full url checkbox:

If you want to deliver to other devices through the phongap build service, make sure you go through your other options like Icons, splash screens and API features.

Execute the program and go to the local folder. You can test the solution from your local index.html file to make sure it works before proceeding to the next step.

 

The Neptune server supports cors (Cross domain requests). If you get some errors when trying to log onto your SAP system from the local file try adding the following code to your header in the Menu application :

 

<script type="text/javascript" charset="utf-8">

$( document ).bind( "mobileinit", function() {

$.support.cors                           = true;

$.mobile.allowCrossDomainPages  = true;

$.mobile.pushStateEnabled         = false;

});

</script>

(See JQM documentation about phonegap here).

Step 3

Now you will need a Mac, if deploying for iOS, with XCODE installed and a developer license (An enterprise license if you are to distribute to more devices in your company than the 100 Ad-Hoc devices you get with your developer license).

Fire up XCODE and start a new PhoneGap project (Called Cordova projects from PhoneGap release 1.5).

You can find documentation about setting up your phongap (Cordova) iOS environment here.

 

Add your index.html file and all other relevant files (in the folder structure that was exported from Neptune Application Designer) to your project.

Go to the cordova.plist (or the phongap one if you are using a lower version). And add your SAP host and any other domains you wish to run in your application (in the example below we have added a few domains to the whitelist for google map functionality):

 

 

As we are running an online app we need to make a few more changes. Set the OpenAllWhitelistURLsInWebView to YES and add the External hosts you need. You can test your application and should get an error message if you are missing some hosts:

If you still have issues running the different pages inside the WebView container (I have come across this when running the application through a proxy) add the following code to the delegate file (Change YOURHOST to your host J ):

 

- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest: (NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType

{

NSURL *url = [request URL];

 

if ([[url absoluteString] rangeOfString:@"YOURHOST"].location != NSNotFound) {

return YES;

}

else {

return [self.viewController webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];

 

Step 4

Now the last thing we should do is something Apple does not advice. But that advice is based on users running local apps. Since we do not want our users to struggle with session timeouts and “error loading page” messages (Since you might have lost your VPN, Proxy, logon ticket or whatever security based logon you use) We need to close the application instead of letting it run in the background.

 

This is achieved by setting the parameter UIApplicationExitsOnSuspend to YES.

Now, we need to make the Phongap API available to the online code. The java scripts differs between the different Devices so add some javascript code like the one below (Fitting your MIME repository, and remember that after 1.5 it is called Cordova)

<script>
if (navigator.userAgent.toLowerCase().match(/android/)) {
document.write('<script type="text/javascript" src="/neptune/public/application/application/phonegap.js"></script>');
} else if (navigator.userAgent.toLowerCase().match(/iphone/) || navigator.userAgent.toLowerCase().match(/ipad/)) {
document.write('<script type="text/javascript" src="/neptune/public/application/application/ios/phonegap.js"></script>');
}
else{

document.write('<script type="text/javascript" src="/neptune/public/someotheros/phonegap.js"></script>');

}
</script>

 

Test your application out with your development iOS device and prepare for distribution.

Look here for information about this.

 

For other than iOS devices you can use the build service from phonegap except for WP. We will post a separate tutorial about the windows deployment.

Published: 19. March 2012 Category: Products

Recent articles

MENU