How to use Hybrid Application Toolkit (HAT) and test the apps – Preview
This is the continuation of the blog started here.
This blog has been split in 3 parts:
|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
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!
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.
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.
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?
when you run the app in SAP Web IDE on the web preview this is the button you should see for Facade.
Can you see it?
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.
Hi @Dhara Patel, if you are using Android Emulator, please make sure you use a trustable one like BlueStacks download and get all the APK files from appsforpc secure web server. I used Hotstar for PC via BlueStacks and it's running great. To generate APK file for any application, you can use Android Studio. Just load your application in Android studio and select the file type as .apk while saving.
SIMMACO FERRIERO Thank you very much… very helpful blog…
I am trying to build SAP Hybrid App for Android..
In Android Emulator - In my case it is not asking for SCN credentials popup/ screen but giving error : Sorry a technical error occurred
But when run as web application it shows data perfectly
Any idea what must be going wrong?
Thanks & regards
This blog post is outdated. We have reached end-of-maintenance for HAT local add-on. You can no longer download this tool from the SAP Store. We no longer support this tool. You are strongly advised to make use of our Cloud Build Service provided through Mobile Services to build hybrid apps. More information can be found here: https://blogs.sap.com/2018/08/16/announcing-end-of-maintenance-for-hybrid-app-toolkit-local-add-on-local-builds-only
Product Owner – Hybrid Application Toolkit