Hybrid Application Development with Visual Studio

Introduction

As you might heard Visual Studio is now also able to create and handle Cordova based applications. I watched some live demos and presentations on SAP TechEd 2015 in Barcelona. After that I tested the feature a bit in combination with SAP’s preferred solution for hybrid applications (cordova + Kapsel). I have to say that I was positively surprised about the way Microsoft integrated Cordova handling into the IDE.

Currently there is a cooperation between SAP’s mobile development teams and Microsoft going on, you can also read more about that, e.g. here: SAP Fiori Mobile Apps and Tools for Apache Cordova - The Visual Studio Blog - Site Home - MSDN Blogs

In the following I want to describe shortly how you can develop a Cordova based app which includes Kapsel plugins inside Visual Studio. Besides Windows as target platform (e.g. Win Phone, Win 8.1 or Win10), Android and iOS are also supported. Android and iOS apps can be executed on a web-based emulator (Ripple). Additionally, Android apps can be also executed on an x86 based emulator. Anyway, in the following I will primarily focus on hybrid apps for Windows 8.1 or Windows 10.

Preparation

I was using following versions

• Visual Studio 2015 (Version 14.0)
  • There is a Community Edition available which is sufficient for hybrid app development, but please consider the license agreement
  • When installing Visual Studio make sure that you also checked the “HTML/JavaScript (Apache Cordova)” Option under option “Cross Platform Mobile Development”. Make also sure that you have installed all required components that are needed by Codova, e.g. nodejs, Java, GIT… If not you can also do this by using the Visual Studio installer…
    
• Kapsel SDK (SMP SDK SP10PL06)
• SMP Server SP09
  • Create an application on SMP (or HCPms) server which you can use later for connecting to. In my case the application is called “com.sap.mit.sample” and the endpoint is a simple OData sample service (http://services.odata.org/V2/Northwind/Northwind.svc/ ) SSO Mechanism is not really needed, because the OData service is not authentication protected.
    For Authentication I created a new security profile with a “System Login” authentication provider. Where I hardcoded a user named “Marvin” with password “test”. Do not use System Login modules in productive scenarios. This is only for testing purpose, because this tutorial does not cover security related topics.
    

Creating Cordova App in Visual Studio

1. Open Visual Studio 2015
2. Choose File > New > Project… and choose template “Apache Cordova Apps” which is under option “JavaScript”. Highlight “Blank App (Apache Cordova)”, provide name and solution, then click on “OK”.
3. After the project got created, you can choose on which device type you want to execute this hybrid app (e.g. Android, iOS or Windows).
4. Choose “Debug” with “Windows-x64” as Solution Platform, then run on the “Simulator”.
   
   On first time execution the platform “windows” will be added to the project (You can see this inside the Console Output. After that the simulator will start and will execute a “Hello-World” application.
5. We have a Cordova based application running. In the next step we should add Kapsel plugins, like the Logon and Logger plugin.

Adding Kapsel plugins

We now want to add some of SAP’s plugins, e.g. Logon and Logger plugin.

1. As a prerequisite we have to tell Visual Studio where to find the Kapsel plugins, so that they can be integrated (during compile time). For that you can add a file named “config.json” in folder “.cordova” in the root of your project and add the following as content:

{      "plugin_search_path": "C:\\Development\\KapselSDKSP10PL06\\plugins"
}

Of course the path here needs to be adapted to fit your environment, e.g. C:\SAP\MobileSDK3\KapselSDK\plugins

Be careful here, that there are no additional characters are added or a wrong encoding has been used, for best results create the config.json file with notepad and then copy the whole file into the “.cordova” folder. If there is a problem the compiler will directly throw an exception (e.g. Illegal character, or Parsing error, …)

If you skip this step you will run later (on compile time) into the error

Registry returned 404 for GET on https://registry.npmjs.org/kapsel-plugin-corelibs

2. We can add the kapsel plugins directly in Visual Studio. For that double click on config.xml which will load the cordova specific settings window and open menu entry “Plugins”

3. Now choose tab “Custom”, select option “local” and then navigate to the plugin you want to add, e.g. C:\SAP\MobileSDK3\KapselSDK\plugins\logon . After that click on “Add”.

4. You can do the same for other plugins, e.g. the Logger plugin. On tab “Installed” you can see the currently installed custom plugins

5. Now we need to add some coding to use these Kapsel plugins. For that you can download the attached zip archive and copy the content into your www folder in Visual Studio. You can overwrite the existing index.html.

6. The copied content is showing now how to start the Logon plugin. After successful onboarding a sample sapui5 based app is shown where we can perform some test operations, like sending a request. We will use the SAPUI5 resources and also the jquery version which got bundled together with the logon plugin. In this way we do not need to add these resources separately.

7. In file SMPHelper.js the app is getting initialized and also configured. So make sure that you are adapting the values here according to your environment:

8. Cordova will throw an event called “deviceready”. We set an event listener here and specify that the method “init” should be called if Cordova throws this event. In the init method we will call

sap.Logon.startLogonInit(context, appDelegate);

This will then start the LogonPlugin initialization process. When executing this first time ever (initial app run) a Logon UI is shown to the user. On subsequent app starts the successcallback is called directly without showing a UI to the user.

9. When running the app now specify your user and password into the logon screen. In my case I entered user “Marvin” and password “test”

10. After clicking on “Registration” in the right top corner the logon plugin tries to perform a registration against the given SMP (or HCPms). If successful the following screen will be shown where the user can choose an app specific passcode. These passcode settings can be controlled by the app settings on SMP server. If no passcode policy is defined user can click here on “Disable app-passcode” and then again on the button in the right top corner “Continue”.

11. The app will start. The logon (or registration) process is successfully finished. In this sample app I show the logon plugin’s return values in a text area.

12. You can also see on your SMP (or HCPms) server that the logon plugin created a new connection for our user:

13. We are finished and have our first windows Kapsel application running…