Skip to Content
Technical Articles
Author's profile photo Sudhir Lenka

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. 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.

Assigned Tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      Hello Sudhir,

      Regarding on-boarding QR code, you can skip steps 29-35,

      In SAP web IDE, we have this QR code functionality.

      https://developers.sap.com/tutorials/cp-mobile-dev-kit-offline-app.html#b5f50b05-7528-4424-ab39-c9e835b5110a

      Right click on MDK project > Deploy and activate> click Next > click QR code icon

      Thanks for sharing your experience with MDK.

      Regards

      Jitendra

      P.S. I have published couple of tutorials on MDK, you may look at it to explore more on this topic.

      Author's profile photo Sudhir Lenka
      Sudhir Lenka
      Blog Post Author

      Thank you so much Jitendra Kansal for your feedback and sharing the tutorials!!

      I will check the tutorials and explore more.

      Thanks,

      Sudhir.

       

      Author's profile photo Mohit Tyagi
      Mohit Tyagi

      Thanks Sudhir... It's good leaning and very helpful for bigners to start exploring.

      Author's profile photo Sudhir Lenka
      Sudhir Lenka
      Blog Post Author

      Thank you so much Mohit Tyagi for your feedback!!

      Thanks,

      Sudhir.

      Author's profile photo Kanwarmeet Kaur
      Kanwarmeet Kaur

      Thanks for sharing your experience with SCP Mobile Service . Really informative !

      Author's profile photo Sudhir Lenka
      Sudhir Lenka
      Blog Post Author

      Thank you so much Kanwarmeet for your feedback.

      Author's profile photo Shubham Pund
      Shubham Pund

      Thanx Sudhir and Jitendra…It’s very helpful.

      Author's profile photo Sudhir Lenka
      Sudhir Lenka
      Blog Post Author

      Thank you so much.

      Author's profile photo Neha Mahanty
      Neha Mahanty

      Hi Sudhir,

      Thanks for sharing this information, This is really helpful.

      Neha

      Author's profile photo Sudhir Lenka
      Sudhir Lenka
      Blog Post Author

      Thank you so much Neha for your feedback.

      Author's profile photo sani kali
      sani kali

      Hi Sudhir,

       

      Can we link our WEB IDE with visual studio code because all the time I am exporting metadata from WEB Ide and import to visual studio code can you please help on this?

       

      Thanks in advance

      sani kale

      Author's profile photo Sudhir Lenka
      Sudhir Lenka
      Blog Post Author

      Hi Sani,

      I am not sure if this is possible, never tried yet.

      I will try to find out the information on it and share with you if I find anything

      Thanks,

      Sudhir.

      Author's profile photo Midhun VP
      Midhun VP

      Great job!

      Author's profile photo Sudhir Lenka
      Sudhir Lenka
      Blog Post Author

      Thank you so much Midhun for the feedback.

       

      Thanks,

      Sudhir.

      Author's profile photo Shweta Jain
      Shweta Jain

      Hi Sudhir Lenka Jitendra Kansal

       

      I have developed and deployed one app but when i am trying to open the URL. i am not able to open getting error as

       

      Com&Token URl.

      Please suggest

       

       

      Author's profile photo Sudhir Lenka
      Sudhir Lenka
      Blog Post Author

      Hi Shweta,

      Can you please share the screenshot of your error?

      Thanks,

      Sudhir.

       

      Author's profile photo Shree Kishan
      Shree Kishan

      Thanks a lot Sudhir,

      In starting we followed this blog, that’s really helpful.

       

      Can you please share the steps or blog for “How to debug setup SAM project on vs code” ?

      Author's profile photo PRAVIN KUMAR
      PRAVIN KUMAR

      Hi Sudhir,

      I am able to develop MDK Application using sample service .

      Now, I have set-up Cloud connector, SAP Cloud Platform(Neo Trill)  and created HTTP destination . This destination is getting reachable at SAP Cloud Platform .

       

      I have also created destination at SAP Cloud Platform Mobile Service and i am able to ping it.

      I have created MDK app and in connectivity section  i have assign same destination . But, whenever i am trying to test “OData Application Destination Test” i am getting  below message :-

      “Check the path provided and destination configuration.”

       

      Please heave a look attached screenshot.

       

       

      I am trying to create MDK application .But , I am getting some error related to service XML.

       

      Please help me to resolve this issue.

       

      Thanks,

      Pravin Kumar

      <phone number removed by moderator>