Debugging apps made easy with the Mobile Development Kit extension for VS Code
I am all excited to tell you about the new Mobile Development Kit (MDK) extension built for Microsoft Visual Studio Code. This extension is now available to customers with the latest release of the MDK editor on SAP Web IDE.
Mobile development kit (MDK) is a feature of SAP Cloud Platform Mobile Services. If you are new to MDK, and want to know more about developing apps in a low code environment, I suggest you begin by going through the following blogs and tutorials.
About Microsoft Visual Studio Code
Microsoft Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs. For more details about the goals of VS Code, see Why VS Code.
What does the MDK extension for VS Code do?
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. Currently, it is supported only on Mac systems.
It 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.
|Target User||Focus||Host Environment||Delivery|
|Web IDE Editor||Developer, Business Expert||Low Code, High Productivity Process Flow||SAP Web IDE||Cloud version (zero configuration)|
|MDK Extension||Developer||Development Lifecycle (coding, build and debug)||Microsoft Visual Studio Code||Local installation|
A common use case is to start your application using the MDK plugin as part of SAP Web IDE Editor and take advantage of the low code and highly productive environment.
Build pages, drag and drop controls onto the page and map to actions, backend data, etc. Then use the MDK extension within VS Code to debug certain parts of your application such as your business logic rules.
Using a Git repository synchronizes the latest MDK application changes between Web IDE and VS Code and allows developers to enjoy the best part of each tool.
What are the features available?
All the features listed here are available with this extension:
- Editing MDK Metadata JSON:Based on a comprehensive MDK schema definition, this feature detects an application node within the workspace, and supports operations like auto-completion, validation, and navigation.
- Bundling MDK Application:This feature integrates MDK metadata bundling process into the VS Code build task, from which you can generate VS Code specific bundle.js with information about the source maps, without interrupting the development process. Each time you save your work, the bundler process is started and runs in the background to speed deployment to the client. See Source maps for detailed information.
- Speed Deployment to a local MDK SDK Client App:The MDK extension for VS Code connects to a configured and running MDK client application. This application is on the local machine and is specified in the VS Code launch configuration. The NativeScript debugger will then automatically use this application for debugging purposes. Having a connected and local MDK application also speeds the repetitive nature of development and testing.
- Creating MDK metadata object:
Create an MDK metadata object by using the command palette, or by using the context menu.
What are the Prerequisites?
- For developing or modifying your app, you must have a Mac environment and must have installed VS Code version higher than 1.24.0.
For debugging your app, you must have the following:
- Install XCode, which is required to find the corresponding iOS simulator
- Install NativeScript CLI (by running the npm install -g nativescript command), which is required to trigger the tns command to launch an MDK app.
- The tns project for the MDK-branded client, which hosts the MDK app and supports the tns launch.
How do you work with the extension?
- From the SAP Marketplace, download the latest version of vsix package folder, vsc-extension-mdk. This folder contains all the files necessary for your extension.
- Launch VS Code and from the Extensions viewer, select Extensions > Install from VSIX. The installation might take up to two minutes.
- Reload VS Code to enable the extension. A new language mode called MDK is attached to any open MDK metadata file.
- The new MDK language introduced for VS Code shows property suggestions and auto-completes the text when you are typing.
- The MDK extension provides a convenient method for file navigation. The new language supports the following file types- .action, .app, .global, .page, .js, .service, .properties, .css, .nss.
- Place the cursor within the value of a file reference and select Go to Definition from the context menu, to open the file specified by the file reference.
- Select Peek Definition from the context menu to see the content of the file specified by the file reference in the editor.
3. Validation: If the metadata file which you have opened in the editor contains errors, such as a missing required property, incorrect value of the property _Type, non-existent file reference etc., error messages are displayed in the PROBLEM view. These error messages also appear in the editor when you hover over the tilde adjacent to the incorrect value.
- You can also manually trigger the bundling process at any time on any MDK file, by selecting Tasks > Run Build Task… or Run Task…
- For debugging your MDK app, you must have bundled your app and added your own debug configuration or altered the existing one by modifying the launch.json file. Generate the default launch configuration file (launch.json) by clicking the gear icon in the Debug view, and choose the MDK debug configuration. In the generated launch.json file, specify the attribute appRoot as the NativeScript project path that corresponds to your branded MDK client app, and save the file.
- For quickly launching your app without debugging, click Debug > Start Without Debugging. See the progress report in the Debug Console. Once the launch is complete, the configured MDK client app will be launched in the default simulator.
- Set breakpoints in rule files directly, by clicking on the left margin of the editor. Trigger actions like enabling, disabling, or reapplying breakpoints from the Breakpoints section of the Debug view.
- Check the variables or the call stack when stopping at some breakpoint.
- Trigger debug actions like Continue/Pause, Step Over, Step Into, Step Out, Restart etc. in the floating debugging bar.
- Stop the debugger execution by clicking the Disconnect or Stop button in the floating bar.
Note: Don’t Accept Updates from Mobile Services
This caused me to stumble and ask for help, so I am making sure to share this information with you. 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.
Now, take a look at the following documentation to learn how to get started and build your first application with the MDK extension for VS Code.
- Installation and Usage instructions from the SAP Help Portal
- Example: Edit and Debug Your MDK Application with VS Code (Coming Soon)