Hybrid SAPui5 App with HCP and Test it with Android Emulator

[Former Member]

This is a step by step guide to create Hybrid SAPui5 App with HCP and Deploy it to a Mobile Device

1. 1.Create SAP UI5 app

• Configure a destination or data source for the app
• Build an app using Fiori template
• Test your mobile device by deploying the app to your SAP HANA Cloud Platform

2.Deploy a Hybrid App on SAP HANA Cloud Platform Mobile Services(HCPMS)

• In Hana Cloud Cockpit, Create the application in SAP Hana Cloud Platform Mobile Services
• Device Configuration in SAP Web IDE
• Start the Hybrid App Toolkit Connector
• Deploy the application to Hybrid App Toolkit
• Run the App on the Android Emulator, iOS simulator or Actual device

Create SAP UI5 app

1.1 Configure a destination for the app

• Log on to your HCP cockpit  account
• In the menu item of HCP cockpit, select the Destination tab and choose New Destination to open a Configuration Panel
• Enter all the following entries in Destination Configuration Panel

         

• Add three more properties with the help of New Property button

         

• Choose Save and the complete Destination Configuration form should look like this

                        

• Click the “Check” icon on the right side of the newly created destination and make sure that the connection to the destination is successful

   

1.2 Build an app using Fiori template

• Open SAP Web IDE by going to the Subscriptions in the HCP cockpit
• Open the File menu of SAP Web IDE, select New -> Project From Template

                   

• We will get a new project creation wizard, on the Template Selection step

1. Click on the SAP Fiori Master-Detail Application to mark it as the template to be used for your new project
2. Press Next button to go to the Basic Information step

                       

• On the Basic Information step

1. Enter the Project Name as Test
2. Check set this project as hybrid mobile application
3. Press Next button to go to the Data Connection step

                        

• On the Data Connection step

1. Select the Service URL as Source
2. Select Service Information as ES4 from the drop-down list
3. Enter this URL:   /sap/opu/odata/IWBEP/GWSAMPLE_BASIC/
4. Press the button present with the Play icon, on pressing this icon a CollectionSets will be displayed on the right side
5. Click Next button to go to the Template Customization step

      

• On the Template Customization step, enter this data

          Fill out the Application Settings, Data Binding- object and Data Binding Line Items as shown below 

                                                                                                        

                       

• Click Next button and press the  Finish button to end the wizard
• Check that a new folder Test is added to your workspace
• Select the folder Test and preview the app by clicking on the Run button as Mock data

                         

• Select the folder Test and preview the app by clicking on the Run button as Actual data

                         

Deploy Hybrid App on SAP HANA Cloud Platform Mobile Services (HCPMS)

Prerequisite: SAP Web IDE Hybrid App Toolkit  installation procedure

2.1 Create the application in SAP Hana Cloud Platform Mobile Services

In this section, you will create an application in HCPMS. This step is similar to the creation of a Destination in HCP, and allows your HCPMS instance know how to handle incoming application requests (registration, authentication and data).

• Log on to your HCP cockpit  account
• In the menu item of HCP cockpit, select the Services tab and in Mobile Services group click on the Development & Operations tile.
• Click on the Go to Service link to launch the Development & Operations Cockpit application
• The Mobile Services Cockpit will be displayed, click on the Applications tile

                       

• Click on the Create Application icon to add a new application definition. Edit the fields as shown below and click Save.

1. Application ID: com.odata.hybrid (Note: must be the same as in Device Configuration in later step)
2. Version: 1.0 (default)
3. Name: Test
4. Type: Hybrid (from drop-down)
5. Description: Hybrid OData app
6. Vendor: SAP
7. Security Configuration: None (from drop-down)

• Click on the Backend tab, Fill in the connection information as shown below and click Save

1. Backend URL: https://sapes4.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/
2. Proxy Type: Internet (from drop-down)
3. Authentication Type: Basic Authentication (from drop-down), give the username and password given to the Destination
4. Maximum Connections: 500
5. Alias: (leave blank)
6. Rewrite mode: Rewrite URL on HCPms (from drop-down)
7. Relative Paths: (leave blank)

• Click on save
• You have successfully created the application in HCPms. Click on the Home icon (in the upper left corner of window) to return to the Mobile Services Cockpit
• We can observe that the application and connection numbers have incremented

                   

2.2 Device configuration in SAP Web IDE

• Open SAP Web IDE. Access the Project Settings of the Test Project that was created in the previous tutorial by right-clicking, select Project Settings
• Select Device Configuration setting in the Project Settings window
• Fill the below-mentioned information in the Application section

1. App Name : Test
2. App ID : com.odata.hybrid  (NOTE: The App ID field here must match the string you entered for “Application ID” when creating the HCPms application(above))
3. Description : hybrid version of OData web app
4. Version : 1.0.0
5. In the Build Options section, click the radio button for Release Mode
6. In the Platforms section, select the options applicable for your development machine: · Windows: Android       · Mac OS: Android and/or iOS
7. In the Plugins section, you specify the plugins the application will use. For this exercise, do not check any of the standard Cordova plugins. Click the “Kapsel” tab, and select the Logon Manager. After selecting Logon Manager, click the radio button next to “HANA Cloud Platform mobile services” and ensure your HCPms Host URL is correct
8. Leave the Preferences section unchanged and click Save

2.3 Start the Hybrid App Toolkit Connector

Now we will start the Hybrid App Toolkit Connector and test the communication between it and SAP Web IDE. You must have completed the download and installation process for the Hybrid App Toolkit before starting this section

• Open a Terminal or command window and navigate to the HAT directory  ·  On Windows, double-click run.cmd  ·  On Mac, type:“./run.sh”

                                

                                                            

• To test the connection between HAT and your Web IDE instance, select the Web IDE menu option: Tools -> Preferences
• Select Hybrid Application Toolkit.
• Click on Test Connection button.

              

2.4 Deploy the Application to Hybrid App Toolkit 

• Right click on the Test project folder. Select Deploy -> Deploy to local Hybrid App Toolkit

                            

• Deployment will start. You can view the progress in the console, and when it is complete, you will see the dialog box below. Click OK to close it

                        

2.5 Run the App on the Android Emulator, iOS simulator or Actual device

             In this section, you will run the hybrid app on the Android Emulator, iOS Simulator or Android/iOS device

• To run the hybrid app, right click on the Northwind project folder, then select Run -> Run on -> Android Emulator.

                         

• At the prompt for the signing key, select Test Key and click OK. HAT will launch the emulator/simulator and load the app

                      

• The app will launch on the emulator/simulator or device, and the display the registration screen. Enter the User Name and Password

                        

• You can enter an App Passcode if you would like. To run the app without a passcode, click Disable Passcode

                        

• Click on Submit
  • App is running