Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 

Introduction

This is the continuation of the blog started here.

This blog has been split in 3 parts:

LinkContent
Part1Introduction and some preliminary steps
Part2Preview apps on the emulator and on the device (iOS and Android)
Part3 (this page)Run apps on the emulator and on the device (iOS and Android)

In this part we are going to see how to run the mobile app we created in the first part of the blog on a mobile emulator/device. The first thing to do is to use HAT to deploy the app on the local machine and then push the app as stand-alone on the mobile emulator/device. We will see as well how to update the app and push it again to all the devices which have installed it. This will be done through HCPms.

Deploy the app on local HAT

At this moment the application is still inside SAP Web IDE. What we have seen in the previous part is that a link to the preview page is sent to the Companion App and this app takes care to show this preview as it was a stand-alone application. So far, only the Companion app is installed on the mobile device.

Now we'll see how to deploy the app from SAP Web IDE to your local machine (PC or Mac) so that you can push the generated .apk (Android) or .ipa (iOS) files to your device.

1) Open SAP Web IDE

2) Right click on the name of your project and choose Deploy --> Deploy to local Hybrid App Toolkit

3) The deployment starts: you can follow its status by the console window

4) At the end of the process click on OK

5) If you look in your user folder you will find a subfolder called SAPHybrid. Inside of it there will be another subfolder with the name of your project containing all the needed files for deployment of the app on the mobile device

6) Congratulations! You have deployed your app on your local HAT!

Run the app on the emulator

We'll firstly run the app on the Android emulator/iOS Simulator

1) Open SAP Web IDE

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

3) If you are running your app on the Android emulator you may get this further screen. Since we are just doing a test you can select Test Key and click on OK

4) The application which has been built by the deployment operation in the previous chapter is being pushed now 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, enter your SCN credentials and hit <ENTER>

5) We don't need a passcode for this exercise, so click on Disable Passcode

6) Click on Submit

7) Your application starts successfully

😎 You can also click on one of the products to see its details

9) 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!

Run the app on the device

In order to run the app on a real device the steps are pretty the same as for the emulator so I won't report here all the screenshots again, 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 --> Run on --> (Android device | iOS device)

3) If you are running your app on the Android emulator you might get a further screen where you have to choose between using a Test Key or a Custom Key. Since we are just doing a test you can select Test Key and click on OK

4) The application which has been built by the deployment operation in the previous chapter is being 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, enter your SCN credentials and hit <ENTER>

5) Click on Disable Passcode

6) Click on Submit

7) Your application starts successfully

😎 You can also click on one of the products to see its details

9) Click on the Barcode Scanner button

10) 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 barcode you printed/downloaded in the first part of this blog in front of the camera: the barcode is automatically recognised

11) The product related to this code is found in the product list

12) Congratulations! You have successfully installed and executed the app on your device!

Update the app and re-deploy it on HCPms

Let's assume now that you want to change your app and push the changes to all the devices which have installed your application. How can you easily do it? The best thing to do is to change the app, re-deploy it on HCPms so that, after the deployment, all the devices/emulators running this app, will be informed that there is a new version of the app ready to be installed.

1) Open SAP Web IDE

2) In the Products project, open the file Master.view.xml by double clicking on it

3) Add the following line just after the one related to the Barcode Scanner button

<Button id="testbutton" icon="sap-icon://overflow"></Button>

4) Save the file

5) Test this new change in the layout by running the application in preview mode

6) Right click on the name of the project and choose Deploy --> Deploy to HCP Mobile Services

7) If required, enter again your SCN credentials

😎 The Application ID field comes already populated, you just need to press Next

9) The package creation process might take time. When finished click on Browse to locate the zip file you need to upload to the server. The path to this file is also reported on this window

10) Locate the file and click on Open

11) Click on Deploy

12) The deployment phase takes some time too, depending on your upload speed. When finished click on Close

13) Now open the HCMms cockpit and click on the Applications tile

14) Click on the com.test.products application and then on Configure

15) Open the App Specific Settings tab and select the platforms which you want to deploy the new version for (in my case I'm doing it for both). Then click on Deploy

16) The new version is deployed. Now you need to open again the application on your device and after a certain time you should be prompted that a new version is available for this application. You can choose if you want to use this new version now or later. Choose Relaunch Now

17) The new application is launched

18) Congratulations! You have successfully updated your mobile app though HCPms!

30 Comments