End to End basic Mobile development kit(MDK) App with sample OData service

Dear All,

I was so curious to explore mobile development kit(MDK), finally I managed to create the MDK App. and run it on mobile after a lot of struggle. So I thought to share my experience to help the people who are trying to explore MDK.

In this blog I will explain the end to end process of app creation, deployment and execution.

Prerequisites:-

1. 1. Access to SAP Cloud Platform trial account.
   2. Access to SAP cloud platform mobile service.
   3. Access to SAP Web IDE Full-Stack.

Steps :- 

1.Launch SAP Web IDE Full-Stack from SAP Cloud Platform.

2.Click on Tools ->Preferences->Extensions in Web IDE to enable Mobile Services App Development Tools plugin.

3.Once Web IDE restarted after enabling and saving the plugin, you will see MDK Development workspace.

4. Launch SCP Mobile Service from cloud platform.

5. Go to Native/Hybrid section from Mobile Applications menu in Cloud Platform Mobile Services.

6. Click on New to create MDK App.

 

7. Once it’s saved, it will create a MDK APP with the following details.

 

8. Click on + icon in Assigned Features section to add Sample Back-end feature.

9. Select Sample Back End and click on OK.

10. Once Sample Back End selected then the OData service details and Entity set will be populated.

11, Save the Back-end service details and Go back to MDK APP now.

12. Now open the Web IDE and create a MDK App from the project template.

 

13. You may get the error to validate the service, so scroll down and click the Check Service button to retrieve the meta data information.

 

 

14.  Now the MDK App is created with the sample back-end OData service.

15. Right click on the pages folder and create a New MDK Page to display customers.

 

 

 

16. Once you click Finish in the next screen then a blank page will be created with the name as customers.

 

17. Drag and Drop Object table onto the page.

18. Now bind the service and properties to the object table.

 

 

19. Now save the changes.

 

20. Now create an Action to navigate from Main page to Customers page,

21. Once you click on Finish in the next page then an Action will be created in the App.

22. Now open Main page and create a Toolbar button at the bottom of the page to trigger the above action and navigate to the Customers page.

23. Now link the Action to the button by moving to Events section.

24. Now the App is ready to be deployed. please deploy as shown below.

 

 

25. You can see the deployment progress in the console.

26. Now the MDK App is deployed successfully, it’s time to connect with MDK client.

27. MDK client can be downloaded from App store/Play store. Search for SAP Mobile Services client and install it. As of Today it’s available only for IOS and Android.

28. If you open the App for the first time you can see only one option “Try the Demo“, so to connect with the Cloud Platform Mobile Service, we need to generate the QR code from the URL of  MDK App.

29. Replace the details of your App in the following URL with {}.

sapmobilesvcs://?AppId={}&ClientId={}&SapCloudPlatformEndpoint={}&AuthorizationEndpointUrl={}&RedirectUrl={}&TokenUrl={}&ServiceTimeZoneAbbreviation=PST

30. In my case the AppId=com.sl.mdk.

 

31. ClientId can be found from the security page.

 

32. SapCloudPlatformEndpoint can be found from the API tab.

Please make sure you remove the last slash from the URL.

33. Other details can be found from the OAuth client details page from the Security tab.

34. In my case the URL looks as below.

sapmobilesvcs://?AppId=com.sl.mdk&ClientId=bdcd1e64-6e0b-485e-879c-2054979fd3a0&SapCloudPlatformEndpoint=https://hcpms-p2......37trial.hanatrial.ondemand.com&AuthorizationEndpointUrl=https://oauthasservices-p2......37trial.hanatrial.ondemand.com/oauth2/api/v1/authorize&RedirectUrl=https://oauthasservices-p2......37trial.hanatrial.ondemand.com&TokenUrl=https://oauthasservices-p2......37trial.hanatrial.ondemand.com/oauth2/api/v1/token&ServiceTimeZoneAbbreviation=PST

35. Now we need to generate the QR Code from the above URL. You can any online QR Code generator tool for this. I have used the below one.

https://www.qr-code-generator.com/

36. Now open the camera on your IPhone and point it to the QR code, you will see a notification to open the Mobile Svcs App.

For Android, you also need to install QR Code scan App, which will help you to open the Mobile Svcs App from the above generated QR code.

37. Once the App is opened, you will be able to see Start button on the App.

38. Click on the Start button and then enter the credentials of your Cloud Platform trial account.

39. Agree the terms & conditions and set the passcode.

40. Once you finish the above steps successfully and if everything goes fine then our MDK App will be launched.

Here is the screenshots of our App.

 

 

 

I hope this helps!!

 

Best Regards,

Sudhir.