Introduction

This is the continuation of the blog started here.

This blog has been split in 3 parts:

In this part we are going to see how to preview the mobile app we created in the first part of the blog on a mobile emulator/device.

The preview operation will be executed in SAP Web IDE by installing on the emulator/device a special app called Companion App. This is a special app, as I said, because it just takes the preview link passed from the SAP Web IDE and displays it in its container. This special app, of course, in order to be as much generic as possible to be able to display all the possible Kapsel applications created with SAP Web IDE, contains all the available Cordova and Kapsel plugins. For this reason its creation might take some time. However only the first time it needs to be installed on the device. You can understand how quickly you can preview your app when you are developing it.

We will see also how to preview the app directly in the SAP Web IDE preview using the Façade technology.

So, 3 will be the preview modes we are going to illustrate here:

• Preview using Cordova Façade in Browser
• Preview using Companion App on the emulator
• Preview using Companion App on the device

Preview using Cordova Façade in Browser

The first preview you can get of the new app is by executing it directly in the Web Browser using a sort of web emulation for the Cordova / Kapsel plugins named Façade. This technology allows you to use all the native devices of your local machine as they were part of the mobile device. You can use for example the webcam of your PC as it was the camera of your mobile device.

By right clicking on the project name in SAP Web IDE and accessing to Project Settings, you can open the Façade configuration where you can change some of the parameters related to this kind of emulation. You can assign some values to the Accelerometer for example or to the Compass, you can also configure the emulation for the geo-location feature.

In this exercise we are just going to use the camera so non need to change any of these parameters.

1) Open SAP Web IDE

2) Go to Tools –> Preferences

3) Select Hybrid Application Toolkit and ensure that the checkbox Cordova Façade Preview is enabled

4) Click on Save if you made any change

5) Select the index.html file in your project and click on the Run button on the toolbar

6) Click on the Barcode Scan button (you may be requested to allow the use of the webcam on your laptop if you have one, please allow it)

7) Put the barcode you generated in the first part of this blog in front of the camera

8) As soon the Barcode Scanner plugin identifies the code, this is searched in the search box and the found product is displayed

9) Congratulations! You have previewed your app with Cordova Façade

Preview using Companion App on the emulator

We’ll see here how to preview the app directly on the Android emulator/iOS Simulator.

1) Open SAP Web IDE

2) Right click on the index.html in your project and choose Run –> Preview on –> (Android Emulator | iOS Simulator)

3) After some time the Companion App included in the HAT folder, built at the time of the HAT setup, is automatically pushed to the emulator. You can check the status of the process in SAP Web IDE by enabling the console from the menu View –> Console. Once the application has been pushed onto your emulator, it starts showing this screen. Choose to disable the passcode and click on Submit

4) Enter your SCN credentials and Log On

5) Enter your credentials for the ES1 system

6) Your application starts successfully

7) At this point we can’t go any further with the emulator because it’s not able to use the camera of our underlying hardware (well, Android emulator can, but it needs to be properly configured!), so we prefer to use real devices for preview: let’s go to the next chapter, then!

Preview using Companion App on the device

In order to preview the app on a real device the steps are pretty the same as for the emulator so I won’t report here the screenshots, but just the description of the steps.

1) Open SAP Web IDE

2) Right click on the index.html in your project and choose Run –> Preview on –> (Android Device | iOS Device)

3) After some time the Companion App included in the HAT folder, built at the time of the HAT setup, is automatically pushed to the device. You can check the status of the process in SAP Web IDE by enabling the console from the menu View –> Console. Once the application has been pushed onto your device, enter your SCN credentials and hit <ENTER>

4) Click on Disable Passcode

5) Click on Submit

6) Enter your credentials for the ES1 system

7) Your application starts successfully. Since you are now on a real device you can click on the Barcode Scan button

8) The camera is invoked: you might be requested to allow the use of the camera on your device for this app. Please allow it and put the code you printed/downloaded in the first part of this blog in front of the camera: the code is automatically recognised

9) The product related to the code is found in the product list

10) Congratulations! You have successfully previewed the app on your device!

Let’s continue with the final part of this blog!