How to configure and create Mobile service Application with Mobile Development kit(MDK) in BAS

Hello Everyone,

Hope you are all doing good!

In this blog post, I am going to explain how to configure and create Mobile service Application with Mobile Development kit(MDK).

Introduction:

The Mobile Development Kit enhances and enables the developers and technical business users to build cross-platform mobile applications with a native look-and-feel. It allows you to build your application once, in an integrated development environment(IDE), and the MDK lets you customize, deploy, and manage your customized iOS and Android apps.

The MDK for SAP Cloud Platform Mobile Services is a metadata-based  and application development platform.

In current scenario Mobile Application development is a challenging task. The tasks are as follows:

• Projects have high demand on user experience.
• Fast delivery cycles and device platform diversity.

While Considering the time-to-market and requirements such as offline data support and push notifications are common complexity drivers in the case of mobile apps. In businesses the major demand in not only the traditional desktop environment but also the mobile environment, the maintenance of code and applications becomes a real factor in the cost of operations.

Benefits of Mobile Development Kit Apps:

• Native look and Feel
• Use of Ui5 libraries
• Consistent user experience
• Simple wallet-style user experience(Mobile-cards)
• Simplified app development lifecycle
• Built cross-platform Native  App
• Deploy updates easily

Let’s get Started creating the MDK App in SAP Cloud platform Mobile Services Cockpit.

Step 1:  Logon to SAP Cloud Platform Cockpit.

Follow the link to access the Mobile Services:

https://developers.sap.com/tutorials/fiori-ios-hcpms-setup.html

Step 2:

Now we are setting up an initial Configuration for an MDK App. On the home screen, select Create new app.

• Provide the required information and click Next. Here Id name has to given with com separated by a period.
• In Assigned features > select(Mobile Development Kit Application) from the dropdown and Click Finish.
•  After clicking on “Finish” App will be created and default Assigned features are enabled.

     Step 3:  To connect Destination to the MDK App. Click on “Mobile Connectivity Icon”.

    Step 4: 

Click on “Edit” Icon a dialog will be opened enable Access to the cloud destination and save it.

•  Click on “Create Icon” in Mobile Destinations to create the destination.

    Step 5: 

Here Destination Name will be appeared by default with App id Name if we want we can edit the Destination name with Appropriate destination. Provide the OData Service URL and Enable the Cloud Connector and make sure your system is Reachable in on-premise to cloud in SCC.

• Click on Next and Next Provide SSO Mechanism> Basic Authentication(Service URL Credentials). Authentication is optional you can provide based on your purpose.

    Step 6:

After clicking on Finish, destination will be created. Now we have to ping the destination.

• In Left Pane, Go to Native/Hybrid Apps there you will have created Apps.
• In Actions column, there are options for OData Destination Test(Here you can see Service data in JSON or XML format), ping, Launch in Browser(To see the metadata in Browser),Edit, Delete.

    Step 7: 

Now we have to create an MDK App in Business Application Studio (BAS) to access the service data and to develop the Application. Have to Create a new Dev Space for Mobile Services.

        Click on “Mobile” Dev space to open the Workspace.

Step 8:

Configure Cloud Foundry environment, In the bottom left corner of your status bar, click the message “The Organization and space in cloud Foundry have not been set” to  and login with your Cloud Platform credentials. On Successful setup on organization and Dev Space.

•   Select File menu → click New Project from Template
•   Select MDK Project and click Next.
•  In Basic Information Select Base Template type or we may select List Detail, Crud etc..,
•  Select the desired template type based on your requirements and the actions supported by     each template, as described in the following table:

• In Service Configuration Select OData Source > Mobile Services and Application Id, Destination will be Automatically consumed from Mobile Service Cockpit. Just select them from Drop Down List.

• In OData Collections step, Select the Appropriate(Entity Set). Click Finish to complete the project.

      Step 9:  Application structure will be Appeared like as below

For detailed information for App Structure go through this link :

https://developers.sap.com/tutorials/cp-mobile-dev-kit-offline-app.html

• Main.page  is the First page of your Mobile Development Kit application you will use  this   as a launching page to get to application functionality. You can create other pages in Pages> new MDK page.
• Now Open the Main.page then Code Editor will be opened there List of UI5 Controls in compound, container will be Appeared Drag and Drop the controls according to your Requirement.

• In Right Side of the Page you will see Entity Set Target
• Select service  and Entity set in drop down which was Appeared. If you scroll down you can bind the Page header Details in Properties from Entity Set Details and in Events tab we can perform functionalities.

Step 10: 

Now Right click on Application.app this is the main configuration file for your application from within SAP Business Application Studio.

        App will be Activated and deployed.

       Step 11:

Double-click the Application to open it in MDK Application Editor and click Application QR Code icon to See the QR Code.

   Step 12:

Run the app in MDK client by Installing Mobile SVCS App  by scanning the QR Code and by providing cloud credentials.

Make sure you are choosing the right device platform tab above. Once you have scanned and onboarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

After scanning the QR code, Application will be displayed.

Conclusion:

By following the above process  we have successfully created the MDK App.

Hope you have understood the process of Configuring and creating the MDK App in BAS.

Happy Learning and Have a great day!

Regards,

Mamatha