This blog contains steps on creating an IoT Application using IoT Controls and templates on SAP Business Application Studio.

If you are not familiar with SAP Business Application Studio, I would suggest you to refer the documentation on the same. We have already seen how Web-IDE can be used to create IoT Applications and deploy the same to Cloud Foundry in this blog post.

1.  Initial Setup

If you are aware of the setup of Business Application Studio and already able to create and run simple UI5 Applications, you can skip this step. For the others, let us look at the step by step process:

1.1. Setting up Business Application Studio

If you have access to your Trial account on CF, you can access the Business Application Studio from this link, if it was already setup before. If not, go to Trial Account and click on “Enter Your Trial Account”

This will take you to the list of subaccounts inside your Global trial account. By default, trial subaccount should be visible here.

Click on the trial subaccount, which takes you to the overview section of this subaccount. Next, click on the Subscriptions tab on the left pane. This will list all the available applications and services which you can use from your trial account. Search for “SAP Business Application Studio” in the list and click on it. Click on the “Subscribe” button to subscribe to this application.

Click on “Go to Application” link to access the Business Application Studio Application. Your Business Application Studio is ready for use.

If you do not have access to your trial account anymore, you need admin access to any Global account on SAP CF. After this you can either create a new subaccount or click on an existing subaccount where you have admin access. After this click on “Subscriptions” tab in the left pane and follow the same steps as above.

1.2. Creating Your Workspace

Next step is to create Dev Space before your can start building applications. Click on “Create Dev Space”. By default, SAP Fiori would be selected. You can keep the same selection, give a name to your dev space and click on “Create Dev Space”.

You can create a maximum of 2 dev spaces and only one of them can run at any point of time.

After the dev space is created, click on the start button to run the virtual machine.

Once the machine is in started state, click on the name of the dev space to enter your development environment and your workspace.

2.  Clone an existing IoT Application

If you already have an IoT Application which was created using Web-IDE, then we can clone the same application in SAP Business Application Studio.

Business Application Studio offers the same shortcuts which are available in Microsoft Visual Studio, which offers a very easy development environment.

Use the shortcut,

# mac
cmd + shift + p

# windows
ctrl + shift + p

to open the command palette and type “Open New Terminal” to open a terminal window in the active workspace.

Using the terminal you can clone a Git repo where you have the SAP IoT Application created using the web IDE template. If you do not have any such repo, you can use this for test purposes. However, the service bindings, thing types. psts used in this application would need to be updated.

The cloning can also be done using the “Clone from Git” link available in the Welcome Page. Once the git repo is cloned, click on Open Workspace, and select the project folder which was created after the cloning operation. This will open up a new workspace where we will create our application that can be run using Business Application Studio.

3.  Create SAP BAS compatible IoT Application

Before creating the IoT Application, we need to setup our org and space in Business Application Studio. This can done by clicking on the bottom-left message in the tool, “The organisation and space in CF have not been set”. This would log you into the cf org and space. Select the trial account and dev space if you are using trial account for running and deploying the application.

Click on File -> New Project from Template and select “SAP Fiori Freestyle Project” to proceed. In the next screen, Select the target running environment as “Cloud Foundry” from the dropdown. Choose SAPUI5 Application and continue. Give a project name to your application, say, “iotapplication” and click Next. Choose HTML 5 Application Runtime as “Standalone Approuter” from the dropdown and click Next. You can change the default name of the HTML5 Module if you need and then proceed without changing other values in the next screen.

We do not require to do any changes for the View Name, since this HTML5 module is just a placeholder which we will replace with the IoT Application’s webapp content (sample app’s webapp folder) which we cloned from git. Proceed to next which will generate the project. After generation, click on “Add project to workspace”, which will add it to the existing workspace.

Open the HTML5Module folder and delete the “webapp” folder. Move the webapp folder from the cloned sample application to the newly created Application’s HTML5Module folder as shown below:

3.1.  Bind a service to locally run MTA module

To run the application locally, we need a destination service binding that can take care of loading the IoT Controls. Following steps need to be performed for this:

To load IoT controls, we need to create a new destination in the destination configuration of the trial subaccount (or targetted subaccount). Create the destination for IOTAS_CONTROLS as shown in the below image:

URL: https://sapuiiot.cfapps.eu10.hana.ondemand.com/sap/ui/iot

Additional Properties:

HTML5.DynamicDestination: true
WebIDEEnabled: true

After this destination is created, next step is to bind the local mta module with this destination. For that, we need to create a destination service. To create a new instance of destination service, open the command palette of Business Application Studio, and type “Create a new service instance”, give a name of the service instance, choose the service type as “destination”, and service plan as “lite”. This will create the service in the trial subaccount’s dev space. To verify, type the command

cf services | grep <service_name>

This should return the service.

Once the service is created, we need to bind the service with the locally running MTA. To do this, open the command palette again (cmd+shift+p) and type “Bind a service to locally run application”. Next, choose the location of the new iot application that was created, and click “Select folder for .env file”. You will be prompted to choose the service next. Select the service you had created a while back and that will complete the binding. This creates a “.env” file in the project.

3.2.  Add route for IOTAS_CONTROLS

Open the xs-app.json inside HTML5Module, and add the route for IoT Controls by adding this object as the first element in the array “routes”.

{
		"source": "^/resources/sap/ui/iot/(.*)$",
		"destination": "IOTAS_CONTROLS",
        "target": "$1",
        "authenticationType": "none",
		"csrfProtection": false
}

The xs-app.json would look like this:

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "none",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [{
		"source": "^/resources/sap/ui/iot/(.*)$",
		"destination": "IOTAS_CONTROLS",
        "target": "$1",
        "authenticationType": "none",
		"csrfProtection": false
	},
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

3.3.  Create a Run Configuration

Click on Run configuration option on the left pane and add a new configuration.

This will allow you to choose any runnable application from Business Application Studio, where you can select HTML5Module and proceed. Choose the UI5 version you want to run your application with. This creates a new run configuration.

Copy the content of .env file to the .env1 file inside HTML5Module.

Open HTML5Module -> webapp -> Component.js and enter this as the first line:

// @ts-ignore
jQuery.sap.registerModulePath("sap.ui.iot", "/resources/sap/ui/iot/");

This makes sure that the route that has been created in the xs-app.json is used by the locally running application.

3.4.  Run the Application

Go to Run Configurations and click on the green icon to run the application.

This will run the HTML5 application and you can see that it successfully loads the IoT Controls from the destination service as well. Similarly, we can create other destinations which will take care of loading the IoT data from services like “IOTAS-ADVANCEDLIST-THING”.

I will update this blog to also cover deploying the application to CF.