Develop Hybrid Mobile Apps With SAP Web IDE Part 1

In this and following blogs, I will show you how you can create hybrid mobile applications based on Apache Cordova using the SAP Web IDE and the hybrid app toolkit add-on.

We will build an SAP Fiori app from scratch, adding mobile features and deploying the app to a mobile device.

Info: This is one exersice from the TechEd 2015 (MOB160 – Develop Hybrid Mobile Apps With SAP Web IDE, Hybrid App Toolkit Add-On)

Requirements

You have finished the setup of your environment (HCC, HCP, WebIde).

Please use the Google Chrome Browser!

Create A New Kapsel App

Before we can create a new application in SAP Web IDE, we have to add the HAT Plugin.

Add the Hybrid Application Toolkit (HAT) Plugin

The Hybrid Application Toolkit (HAT) plugin takes your SAP Web IDE project and packages it into a Cordova container in order to run it as a hybrid mobile app.

In this exercise, we will be using the HAT plugin to provide a Cordova Façade.

So first, we must activate the HAT plugin in our SAP Web IDE.

To enable optional plugins to your SAP Web IDE, open the preferences by selecting Preferences on the left side.

Click Optional Plugins, enable the Hybrid App Toolkit plugin and click Save

Restart your SAP Web IDE by refreshing the browser page

Go back to the preferences.

You should now see a Hybrid Application Toolkit option.

Make sure that Cordova Facade Preview option is enabled.

Click Save

Note: There is no need to press the button “Test Connection“, because since we are using the Cordova Façade there is no local Hybrid Application Toolkit server installed, and the test will always fail.

To come back to the development view, click Development on the left side

Create a new Kapsel Project

Now we can start to create a new application using the Kapsel template.

Open the SAP Web IDE in the Chrome browser.

Click File – New – Project from Template

Select SAPUI5 Mobile Application in  the drop down box and then choose SAPUI5 Master Detail Kapsel Application and click Next

Enter a project name, e.g. TechEd and click Next

From the Service Catalog list, choose your system

Choose your service and click Next.

At the Template Customization enter the following fields and click Next

Confirm it by clicking Finish

This will create a new Kapsel Application.

Open the Project Folder and choose the index.html.

Click the Run Button

And preview the application

The Application is shown in the Fullscreen-Mode, but we need the functionality of the Preview-Mode

Now we need to adapt some preferencens of the project itself

Open the Project Folder and choose the index.html. Right click and select Project Settings

In the project Settings choose Run Configurations

Under run configurations select the first entry under Web Application

Scroll down and check the box for Open with Frame

Press Save to save your settings

Press Close to close the Preferences

Run the application again.

Now the application is shown in a frame and at the top we have more functionality (like preview-size, language, QR-Code, etc)

Select the search bar on the top and enter HT-1052.

Select the magnifying glass to find the product.

Close the preview tab.

In the next part I will show, how you can add new functionality to your App and how you can test it in the browser.

More Web IDE stuff published by Technology RIG 🙂

See you

Claudi