Technical Articles
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:-
-
- Access to SAP Cloud Platform trial account.
- Access to SAP cloud platform mobile service.
- 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.
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.
Thank you so much Jitendra Kansal for your feedback and sharing the tutorials!!
I will check the tutorials and explore more.
Thanks,
Sudhir.
Thanks Sudhir... It's good leaning and very helpful for bigners to start exploring.
Thank you so much Mohit Tyagi for your feedback!!
Thanks,
Sudhir.
Thanks for sharing your experience with SCP Mobile Service . Really informative !
Thank you so much Kanwarmeet for your feedback.
Thanx Sudhir and Jitendra…It’s very helpful.
Thank you so much.
Hi Sudhir,
Thanks for sharing this information, This is really helpful.
Neha
Thank you so much Neha for your feedback.
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
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.
Great job!
Thank you so much Midhun for the feedback.
Thanks,
Sudhir.
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
Hi Shweta,
Can you please share the screenshot of your error?
Thanks,
Sudhir.
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” ?
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>