Skip to Content

Introduction

This is the continuation of the blog started here.

This blog has been split in 3 parts:

Link Content
Part1 Introduction and some preliminary steps
Part2 (this page) Preview apps on the emulator and on the device (iOS and Android)
Part3 Run apps on the emulator and on the device (iOS and Android)

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

/wp-content/uploads/2015/08/16_837715.jpg

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

/wp-content/uploads/2015/08/17_837728.jpg

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)

/wp-content/uploads/2015/08/18_837729.jpg

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

/wp-content/uploads/2015/08/2015_08_18_14_52_36_773562.jpg

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

/wp-content/uploads/2015/08/19_837730.jpg

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)

/wp-content/uploads/2015/08/20_837731.jpg

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

/wp-content/uploads/2015/08/21_837732.jpg

4) Enter your SCN credentials and Log On

/wp-content/uploads/2015/08/22_837733.jpg

5) Enter your credentials for the ES1 system

/wp-content/uploads/2015/08/23_837734.jpg

6) Your application starts successfully

/wp-content/uploads/2015/08/24_837735.jpg

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)

/wp-content/uploads/2015/08/25_837736.jpg

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

droid@screen-6.png

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

droid@screen-7.png

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

droid@screen-8.png

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

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

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Raja B

    Hi Simmaco,

                       In my system if I run this application as “preview on emulator” means after installing this app I’m getting error “The Connection Server Not Found”, So I just transferred the apk file into my mobile, and I have installed this app, if I open this app in my mobile first it displays ask Passcode, I clicked “Disable Passcode” as you said in this blog, after that there is no option for enter the SCN credentials, and its directly move to scan the QR code option, and after scanning the qr code for “HT-1002″ product I’m getting error like “The Results is Invalid”.


    Please help me to out in this issue,

    Note: If I run this application in browser means It’s works fine, and I have scanned QR code with my laptop webcam its working perfectly.

    (0) 
    1. SIMMACO FERRIERO Post author

      Hi Raja,

      I’m thinking that from your emulator your are not able to access internet. Could you please check this by using the emulator built-in browser?

      Could you please write me in private? You can get my direct email under my contact on SCN.

      Regards,

      Simmaco

      (0) 
  2. Devisha Bhavik

    Hi,

    I have installed and configured HAT on my machine. I did test the connection from Web IDE and test connection was successful.

    However, I do not see the Cordova Facade Preview checkbox option. Due to that, I am not able to test in the browser.

    I have HAT 1.18.2 installed and configured.

    Do you have any idea?

    -Bhavik

    (0) 
  3. Dhara Patel

    Dear Simmaco,

    I successfully run application on Android Emulator and Android Device using companion app.

    Can you please tell me that how to generate .apk file for the application?

    I want to put an icon of particular application on mobile screen.so i can open particular application through click an icon.

    Thanks

    Dhara

    (0) 

Leave a Reply