Learn How to Build your First Mobile Development Kit App on Cloud Foundry

It’s time to forget hybrid mobile apps, particularly Cordova based applications. Because there are far better frameworks out there that can provide you native apps with a single code base. One such framework is Mobile Development Kit or MDK.

In this tutorial, you’ll how to create a basic native mobile app that runs on both iOS and Android without writing code using MDK. So, let’s get our hands dirty!

Configure MDK Mobile App

1. Launch your Cloud Foundry trial account by clicking Enter Your Trial Account. If you don’t have SAP account, create one at www.sap.com.

2. Click on the tile trial and navigate to the subaccount.

3. Next, click on Services>Service Marketplace. And, search for mobile services. Then, click on the Mobile Services tile.

4. Click on Support. It will navigate you to the SAP Cloud Platform Mobile Service Cockpit.

5. Click on Create new app + button. Then, provide ID and Name. Click Save.

6. Click on the + button and add the below-highlighted features.

You have completed configuring the MDK app on SCPMS.

Defining Destination

We need to define destination in SCP Neo environment in order to make the configurations available to SAP Web IDE. Because Web IDE is running on Neo and above-mentioned configurations we did was on CF.

1. Find the link to Access Neo Trial.

2. Click on Connectivity>Destinations>New Destination.

3. Fill the destination details and click on Save. Before that follow note 1, 2 below.

Note 1: Find URL from SCPMS cockpit by navigating to Important Links>Copy Admin API.

Note 2: Find your User by clicking your name on top right>User Information.

Now, we have successfully completed defining the destination

Develop Mobile App using Web IDE

1. Click on Launch SAP Web IDE from the SCP trial link.

2. Click on Preferences>Extensions. Search mobile and turn on Mobile Services App Development Tools. Then, Save.

3. Click on MDK Development icon>Right click on Workspace>New>MDK Base Project.

4. Enter a Project Name and click Next.

5. Click Next.

6. Provide a Name for the service. Then, click Check Service and click Next. Note: if you have multiple destinations and App IDs defined you need to choose the right Service URL and Applications ID.

7. Choose Customers from Queries and click on Finish.

8. Open Main.page. And change the caption to My Customers.

9. Drag and drop the Contact Cell Table control onto the Page. Then, under Properties select Service and Customers as EntitySet.

10. Under Appearance section link Description with {City}, Headline with {FirstName} and Subheadline with {LastName}. Note: you need to search for the property each time as shown in the second image below.

Image showing how to search for fields.

10. In the Search section, enable Search and Barcode Scanner property to true.

11. Under Data section, change VideoCall to Phone and link it with {PhoneNumber}. Email with {EmailAddress} and change Detail with Message.

12. Save the changes.

13. Right-click on the project and choose MDK Deploy and Activate.

14. Click Next>Next. Then, it will start deploying the package and you will find a success message. It has taken 3 minutes for me to deploy.

You have successfully deployed the app on SCPMS.

Testing the App

To test the application on your mobile you have to download the SAP Mobile Services Client to your device(Android/Apple).

1. Download SAP Mobile Services Client app from Apple Store or Google Play.

2. Next, right-click on the project and choose MDK Deploy and Activate. This step is to find the barcode.

3. Click Next.

4. Click on the Barcode Icon to show the Barcode.

5. Scan the barcode using your camera. It will open the SAP Mobile Services Client app installed on your phone. Then, click on Start>Login with your SCP credentials(email&password)>Agree to License Agreement>Setup a passcode(12345678)>Click Ok to confirm the udpate.

You can click on the Phone, Email, Message or Barcode to experience the native features.

You have now successfully developed an offline native mobile app using MDK from scratch!

2 thoughts on “Learn How to Build your First Mobile Development Kit App on Cloud Foundry”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.