Generate an MDK metadata bundle locally and upload in SCP Mobile Services

For latest information, please visit Mobile development kit documentation. 

If you have already started learning and working on Mobile development kit to build cross platform native mobile applications, you may have seen how easy it is to deploy an application metadata definition from SAP Web IDE Full-Stack to SAP Cloud Platform Mobile Services.

Right click on an MDK project > MDK Deploy and Activate >Upload bundle to mobile services

(you can also download this bundle file to local machine and share it with Mobile Services Admin and then Admin can upload it in Mobile Services)

You may have also heard about MDK extension for VS Code –

SAP Web IDE continues to be our main editor for mobile development kit applications. However, if you are an MDK app developer, this extension is designed to assist you throughout the app development lifecycle, to code, build and debug MDK apps quickly and efficiently in a local environment. It can connect to the device/emulator directly, so you can see the real apps at runtime. It is supported both on Mac & Windows systems. This extension is based on the VS Code extension framework and consumes many core services supported by VS Code, such as workspace, language protocol, task, and so on. It also introduces a new MDK language, and a new debugging process.

Now the question is, if you are working in VSCode or may modify app definition or fix some issues in some validation Rules for a MDK project that you created initially in Web IDE, how can this new metadata/app definition be deployed to Mobile Services?

Either you can push changes to GitHub and pull these changes in WebIDE and then follow above approach OR

create a upload bundle file in local machine and deploy it to Mobile Services from Mobile Services cockpit.

Note: At this moment, there is no way to deploy MDK bundle directly from VS Code to SCP Mobile Services.

I will share steps to follow on second approach –

create a custom MDK client

once you have MDK client ready, go to project path in a terminal and execute tns run ios

you should see starting in simulator , once on-boarding is done, do not accept app update from Mobile Services.

Note: Don’t Accept Updates from Mobile Services

While building and debugging from MDK apps from VS Code, avoid updating the MDK Client on your local machine with app updates from SAP Cloud Platform Mobile Services.

Once your MDK client receives an update from Mobile Services, the local bundle file from VS Code is disabled and doesn’t display app updates you have made from within VS Code.

If you have already updated this file, reset or reinstall your app on the iOS simulator, follow the onboarding process again and do NOT accept the update from Mobile Services.

(this note is copied from this blog post)

next step – setup MDK extension for Visual Studio Code

I have setup a GitHub for a MDK project that i created in SAP Web IDE.

and now cloning the same project in VSCode

open Command Palette from View menu and select Git:Clone and enter GitHub repo url. You could also use terminal to do the same.

go to VSCode Settings > set Debug App Root to MDK Client project home directory

e.g.  /Applications/MDK303/MDKClient_SDK/JKNewDemoApp

then in VSCode > Terminal > Run Build Task

Trigger bundle task to attach the source map info for the target bundle.js,

then the source map and new bundle.js will be copied to the tns project app folder.

No rule mapping and no breakpoints in rule files would be enabled if no source map available.

Please check your app folder to see whether both bundel.js.map and bundle.js show up there.

If there is some issues in a Rule, then a debugger can be set to troubleshoot that issue (here is detailed blog on this). For sake of this blog post, i just made a change in title of this page. Once i made changes, i just save it and can see immediate result on simulator as MDK Bundler is already running and triggers a relaunch of the app.

Now, we have modified metadata/app definition, let’s create a bundle zip file and upload it in Mobile Services

Navigate to application-bundler folder part of MDKClient_SDK

duplicate/make a copy of settings.json.template file and rename it to settings.json

make below changes in this file

once done, open a terminal/command line and navigate to MDKClient_SDK/tools/application-bundler and run node bundler-cli.js

you will find uploadBundle.zip file in same application-bundler folder. This zip file then can be uploaded in Mobile Services.

Hope this guide helps you.

New to MDK development?

• Follow these tutorials to get started with MDK.
• Enhance your MDK app with some advanced functionalities
• Create an MDK Online App

Regards

Jitendra Kansal

Product Management, SAP Cloud Platform Mobile Services
SAP SE