Connect to SAP API Business Hub from an MDK app

[Jitendra_Kansal]

Last Updated: 15-May-2023

Last week, i was asked from one of our internal teams on how to connect to SAP Business Accelerator Hub end point from a Mobile development kit application. It might be helpful for others if looking for similar requirement.

The SAP Mobile Development Kit enables developers and technical business users to build multi-channel applications. It allows you to build your application once, in an integrated development environment, and run it natively on mobile devices (Android & iOS) and as a web application (online) in the browser.

 

SAP Business Accelerator Hub is one stop shop or central catalog of SAP and selected partner APIs where you can discover, search, test, consume APIs in building solution like extending Line of Business (LoB) apps, developing a mobile apps etc. Please check https://api.sap.com/ for more details.

Steps:

• 
  
  
  
  • Find an API from SAP Business Accelerator Hub
  
  
  • Configure application in SAP Mobile Services Cockpit
  
  
  • Create a new destination to your MDK Web application
  
  
  • Start Your MDK Application in the Editor
  
  
  • Deploy the Application
  
  
  • Run the Application
  
  
  
  

Find an API from SAP Business Accelerator Hub

1. Log on to https://api.sap.com/ and search Customer Material (SAP S4/HANA Cloud).


2. Click API as highlighted below:

3. Click "Show API Key" and copy/paste it's value in a text pad. (make sure that you have logged on to the same page)

 

4. Now, let's test one of it's operation and also to find it's endpoint URL.

Click  "Try Out"

5. Click Run.

6. Note down Request URL.

https://sandbox.api.sap.com/s4hanacloud/sap/opu/odata/sap/API_CUSTOMER_MATERIAL_SRV

Configure application in SAP Mobile Services Cockpit

MDK Mobile application accesses the data source via Mobile Services destination.

1. In SAP Mobile Services cockpit, configure a new app.

ID	com.sap.mdk.apihub
Name	SAP MDK APIHub App

2. In the XSUAA settings, leave the default values as it is and click Next.

3. Select Mobile Development Kit Application from dropdown > Finish

4. Click "Mobile Connectivity" to add the API Hub endpoint

5. Click on "create" icon

6.Provide below information

Destination Name	CustomerMaterial
URL	https://sandbox.api.sap.com/s4hanacloud/sap/opu/odata/sap/API_CUSTOMER_MATERIAL_SRV
Customer Header	APIKey: <value>
SSO Mechanism	No Authentication

 

7. you can also cross check if back-end data is accessible from Mobile Services by clicking on below circled icon

This opens in a new browser tab
e.g.

 

Create a new destination to your MDK Web application

MDK Web applications access the data source via BTP destination.

1. Navigate to Destinations to create an BTP destination.


2. Provide below info

Name	CustomerMaterial
URL	https://sandbox.api.sap.com/s4hanacloud/sap/opu/odata/sap/API_CUSTOMER_MATERIAL_SRV
Proxy Type	Internet
Authentication	NoAuthentication
Additional properties	HTML5.DynamicDestination: true WebIDEEnabled: true WebIDEUsage: odata_gen

Start Your MDK Application in the Editor

 

Make sure to set up SAP Business Application Studio for Multi-Channel Development.

1. Create a new MDK project by clicking Start from template option in Welcome page (if you don't see Welcome page, launch it from Help menu)

2. Provide basic information

3.In Service Configuration step, select Mobile Services OData Source and app configuration details

4. In Data Collections step, select data collections and Finish the project creation.

5. In order for MDK Web applications to access the data, you need to provide APIKey value in a custom header.

Open CustomerMaterial.service file > Headers

Deploy the Application

1. Right-click Application.app and select MDK: Deploy.

2. Select deploy target as Mobile & Cloud.

MDK editor will deploy the metadata to Mobile Services (for Mobile application) followed by to Cloud Foundry (for Web application).

 

Run the Application

To run the app in Mobile client

• Download and install SAP Mobile Services Client on your iOS or Android device


• Double-click the Application.app to open it in MDK Application Editor and click Application QR Code icon to populate the QR code


• Follow the steps (iOS/Android) to on-board the MDK client

To run the app in Web browser:

• Click the highlighted button to open the MDK Web application in a browser. Enter your SAP BTP credentials if asked. (You can also open the MDK web application by accessing its URL from .project.json file.)

 

New to MDK development?

Follow these tutorials to learn more about Mobile development kit

• Create your Mobile Development Kit (MDK) app in SAP Business Application Studio


• MDK documentation:
  
  
  
  • Guides
  
  
  • API references
  
  
  
  

 

Regards

Jitendra Kansal

Product Management, SAP Mobile Services
SAP SE