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.

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