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
create-bundle |
true |
nativescript-project |
path upto app folder of MDK client project |
seam-project |
path to the WebIDE metadata |
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?
Regards
Jitendra Kansal
Product Management, SAP Cloud Platform Mobile Services
SAP SE