My First Mobile Development Kit Application – End to End
The Mobile Development Kit 2.x has been released for quite a while so I decided to give it a go and see how it works. The first resource I go to is the Learning Journey Landing Page where I can find all the things from overviews to hands-on tutorials. I do find some of the tutorials are a bit out of date due to the software update in the last 6 months. So I think it is the right time to write a blog for it.
Previously the end to end job needs quite a bit of work on both XCode and mobile services of sap cloud platform to build and install the final iOS application. Thanks to the recent update on the OnBoarding feature, we can forget all about it and all we need is an SAP Cloud Platform Trial Account and an iOS device.
Let’s get started.
So my plan is to create a Mobile Development Kit Application, build a demo application in WebIDE, then build and deploy it to the application we created, and finally we can do onboarding from the iOS device.
- To create a MDK Application, first make sure you have “Development & Operations, std” service enabled in your Neo trial account.
2. Then got to “Configure Development & Operations” – “Roles” and make sure yourself has the Administrator Role.
3. Next we select “Go To service” to open the Mobile service cockpit. Choose the “Mobile Applications” – “Native/Hybrid” from the left panel and hit “New” button to create a new application.
Choose Mobile Development Kit Template.
ID: com.sap.mdk.demo
Name: Demo
4. Once done, you can click into the “Demo” application. From the “Info” Tab, “Assigned Features” Section, choose Security. Change the Security Configuration to OAuth. Then hit the “+” button below to create an OAuth Clients. Keep the default settings and OK. Once done, hit the blue “Save” button on the top beside the “Reset” button.
5. Add a sample backend. We need to include a sample backend odata service here. So I go back to the “Info” Tab of the Demo applicationand hit the “+” button next to the “Assigned Feature” and Add the “Sample Back End” feature.
6. Once completed, choose the “Sample Back End” from the Assigned Features list to examine the V2 odata service URL. It is the familiar ESPM service and you can paste the URL to browser and check the metadata. Basically it is a build-in odata service within the mobile services of cloud platform. It is quite handy to do some demos with the sample data and surprisingly we also have odata V4 version available (I may go and explore it in a later time).
7. We now have the application with the sample backend service. So next step is to create the destination for the application, which is pointing to the sample odata service. Surprisingly, once we go into the “Connectivity” from the “Assigned Features” list. The destination is already there and has been configured. Well done SAP Team. I believe it was done when we add the “Sample Back End” feature in step 5. If we want to connect to external odata services, I believe we still have to create the mobile service destinations and assign it to the application here. (I will also try that in the future posts)
8. So now let’s go back to the Cloud Platform cockpit screen and create a destination pointing to the mobile service itself. I believe it has already been populated while we were enabling the mobile services in Step 1. But if it is not there, create one using the screenshot below.
OK. Initial configuration is done. We will move on to the WebIDE full stack to do some “coding”.
9. First thing is to enable the MDK Editor feature from WebIDE full stack.
10. Notice we have a new icon enabled in the left panel which you can switch to the “MDK Development” perspective and access the specific MDK menus easily. (However I do find some issue within the MDK perspective here, anyway we will address it later).
11. Now right click “Workspace” – “New” – “MDK Project”. And we give a project name “Demo”. Finish.
12. You will notice the wizard will create a “Demo” application with some skeleton folder structures in it. Let’s right click the “services” folder and “New MDK Service”. It is basically creating a service metadata which is pointing to an existing backend service through the destination.
Name: choose your own service name here
Service URL: the cloud platform destination name/url
Application ID: the id we choose in Step 3.
Destination Name: Note I put the wrong destination name here. I will show you how to troubleshoot that in the next steps.
13. It will be quite handy to have a “validate” or “Ping” button here in the wizard to test the service connection, but it is not here at the moment. Anyway, we have the service created and we do have a “Refresh Objects” button here. Let’s click it and obviously I will get an error.
14. So I will go and fix the destination name, it should be the name of the mobile service destination from Step 7. Press the “Refresh Objects” button again and Hooray!
15. Then let’s expand the “Pages” folder and open the “Main.page”.(btw, the layout editor does load very slowly in my trial environment…). On the left hand side you will have all the available controls which you can drag and drop. In this case I created a “Object Header” and set the BodyText as “Hello World”.
16. As I am not so confident on all WYSIWYG editors for some historical reasons (specially because of the Macromedia Dreamweaver tool from 20 years ago), I decided to inspect the code generated. Right click the Main.page and choose the code editor to open it. I have to say it looks pretty good at this stage. Nice and tidy json metadata and quite self-explanatory. Not sure if I can choose my own “_Name” because the prefix “_” makes it look like a private/system managed attribute. Anyway let’s move on.
17. At this moment, I really want to deploy my first MDK application. Deployment is quite easy, just right click the project and choose “MDK Webpack and Deploy” (odd name isn’t it) (updated: now the menu is called MDK Deploy and Activate – looks like it does have a nightly update). In the popup screen, untick the “Download bundle” if we do not need an archive to my local. Choose the Application Id and Next ( why it is not called “Start”?).
18. The Build starts and you can see it from the console (for the first time it run, it does fail for no reason. Second time it works all good.) It takes a few minutes to finish everything so perfect time to grab a coffee..
It turns out to be that it is too soon to deploy this hello world app and I got some troubles later on.
19. On-boarding. You need an iphone and ipad and download the “sap mobile service client” from the Apple Store. (not sure if this client is only for MDK applications, but this is the one)
20. So we need to create our onboarding URI. Here is the sample format.
sapmobilesvcs://?AppId={}&ClientId={}&SapCloudPlatformEndpoint={}&AuthorizationEndpointUrl={}&RedirectUrl={}&TokenUrl={}&ServiceTimeZoneAbbreviation=PST
Just follow this exellent onboarding post from Sue Berry and you will get the details of the URI format.
Here is the URI I got.
sapmobilesvcs://?AppId=com.sap.mdk.demo&ClientId=3f3153af-12c5-4e92-88e2-6a54c9fb7f3d&SapCloudPlatformEndpoint=https://hcpms-pXXXXXXXXXXtrial.hanatrial.ondemand.com&AuthorizationEndpointUrl=https://oauthasservices-pXXXXXXXXXXtrial.hanatrial.ondemand.com/oauth2/api/v1/authorize&RedirectUrl=https://oauthasservices-pXXXXXXXXXXtrial.hanatrial.ondemand.com&TokenUrl=https://oauthasservices-pXXXXXXXXXXtrial.hanatrial.ondemand.com/oauth2/api/v1/token&ServiceTimeZoneAbbreviation= AEST
Once you have the URI, use any online QR code generator to get the QR Code. Use your device camera to scan it.
21. The mobile services app will launch and ask for your cloud platform login.
22. Then license agreement, touch id, passcode. Pretty decent onboarding process.
22 . Unfortunately, I could not see the “Hello World”. And the worst thing is I cannt find a way to exit the application. I closed the application and reopen does not help. I ended up deleting the app and reinstall from Apple Store. Then I realise I must need a logout button.
23. Go back to our WebIDE, right click the Actions and “New MDK Action”.
24. Then I will just create an Action Bar Item and drag it to the Main page pointing to the Logout Action we just created.
25. Deploy the application again and because I reinstall the app on my ipad, I have to do the onboarding again and the latest application definition is fetched. I know the update process must be able to initiate from the server side, but I cannot find out how at this moment.
And the HelloWorld is now in – I set the description attribute and it works, and on the top left corner I now have the new “logout” button (I should choose a proper icon though). If it hit the logout it will get me out of the application and once I get back I can get the update from the server side if there is any new versions.
In the next part I will try to connect to the odata service and display the data on the page.
Some thoughts so far:
Big fan of the meta-data driven methodology to create enterprise mobile applications. It opens the possibility to create one killer app with true native experiences.
Obviously I have got some things on my backlog now. Offline capability of the odata service, version update, other native functionalities will be on top of my list to explore in my next posts. So please stay tuned and leave your comments below.
Cool share, Kevin! Thanks for coming back to the community to share how it worked for you!
Awesome,Well done.Kevin.Never thought mobile service client and Mdk can build an app for mobile service. Basically I think it is a web app not a native app, which use mobile service. Is my understanding right?
Hi Kemin,
MDK uses NativeScript, so you get a native app as the end result not a web app.
You are able to use device functionality like the camera for attachments, barcode scanning, push notifications,etc.
Thanks for the question.
I hope this clarifies for you.
Sue
Nice job, very informative.
Its Very Nice Blog and Very Useful .Really appreciate your efforts. I am new to MDK development and followed as per your blog but i am hanging while creating the New MDK Service. Please have a look the below values .and tell me where i am making wrong. Looks like URL issue.
Name : mdksampleservice
URL : https://hcpms- p458007trial.hanatrial.ondemand.com/mobileservices/origin/hcpms/ESPM.svc/v2
Application ID : com.sap.mdk.demo
Destination Name : mdksampleservice
com.sap.edm.sampleservice.v2
Error :
Object parsing failed to undefined
URL is right as per service backend Odata .
Regards
KK
Try putting the URL + "/$metadata" into browser and see if you can access the metadata of the sample odata service.
Hi Kevin,
Thank you very much for reply. I am able to getting the metadata But Service URL is not working .
https://hcpms-p458007trial.hanatrial.ondemand.com/mobileservices/origin/hcpms/ESPM.svc/v2/$metadata
Regards
KK
Are you using your own service or sample odata.. ?
Regards,
Sarbjeet Singh
Hi Kevin,
Thanks for sharing your experience.
Sue
Hi,
I am getting below error while building the application in SAP Web IDE Full-Stack.
Build failed.
Please follow the relevant troubleshooting tips below:
ERROR: "Unable to find local grunt"
- Right-click the project folder, select "Clean npm Folder", and build again.
ERROR: "npm ERR! code EINTERGITY"
- Delete the "package-lock.json" file from the project and build again.
Regards,
Piyush Gandhi
I have not got this issue before.
Try cleaning the browser cache and reset webide, and post the result.
https://wiki.scn.sap.com/wiki/display/SWI/SAP+Web+IDE+-+Technical+FAQ
If it still does not work, you have to try recreate the project.
Kevin Hu (Sydney, AU)
I cleared my browser cache. And I am still getting the same error. I have recreated the project from scratch.
Let me know what else I can do.
regards,
Piyush Gandhi
Try create a new project with a new name, start from some basic and validate metadata before build. Also switching off and on the MDK extension from the feature tab while keeping other extensions off might help.
Nice! thank you so much! Thank you for sharing. Your blog posts are more interesting and informative. I think there are many people like and visit it regularly, including me.
Hi Geeks,
after create the MDK project I add the New service but show the Error below how to solve please suggest me. thank you in advance
failed to get vaild service metadata no serice is found in xml.
regard
Jai
I think the destination name needs to be checked as well as the service url.
Start it from scratch or use the "check service" button to do some troubleshooting.
Hi ,
I am facing the same issue. Can you please post how you resolved it?
Thank you.