Debugging apps made easy with the Mobile Developme...

benu · ‎08-07-2018

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.

https://blogs.sap.com/2017/09/26/rapidly-build-rich-native-mobile-apps-without-writing-any-code/

Mobile Development Kit Learning Journey

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.

Tool Comparison

	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.

Coding MDK Rule JavaScript:Based on a predefined IClientAPI typing definition; this feature lets you use JSDoc snippets to describe rule arguments. It also supports operations like auto-completion, validation, and navigation for the IClientAPI.

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.

Debugging MDK rule JavaScript:By leveraging a third-party NativeScript debugger, this feature lets you set breakpoints in rule files directly. This helps the debug process for MDK applications and allows you to easily move back and forth between building and debugging.

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?

Installation:

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.

Usage:

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

4. Bundling:

1. After you have modified your MDK app, you must bundle the app metadata and JavaScript files for the metadata to be interpreted correctly by the MDK client app at runtime. At this stage, an auto-bundling process is triggered when you click File > Save, if there are no validation errors.
2. You can also manually trigger the bundling process at any time on any MDK file, by selecting Tasks > Run Build Task... or Run Task...

5. Debugging:

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.

To debug your rule JavaScript files, click Debug > Start Debugging. See the progress report in the Debug Console. You can perform a couple of functions with the extension during debugging:
1. 1. 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.
  2. Check the variables or the call stack when stopping at some breakpoint.
  3. Trigger debug actions like Continue/Pause, Step Over, Step Into, Step Out, Restart etc. in the floating debugging bar.
  4. 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.

Next Steps

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)

pfefferf · ‎08-17-2018

Hi Benu,

thx for sharing the information about that great new tool. Unfortunately I cannot get the debugging step to work, as it seems that my app is always updated with the bundle from mobile services. Is there any configuration I can change, that the app is not updated or that I am asked if the update should be done or not. At the moment the app is always updated automatically w/o asking me. With that I assume the bundle file created by VSCode is always overwritten.

Best Regards,
Florian

bill_froelich · ‎08-17-2018

Florian,

You can add an OnWillUpdate action to prompt the user if they want to apply the definitions from App Update and give them a choice to not take the new definitions.

Alternatively you can setup a second application in mobileservices that does not have any definitions in App Update and points to the same backend destination connection.

--Bill

pfefferf · ‎08-20-2018

Thank you Bill.

I implemented a "customized rule" (aka just a JS function) which asks the user for update using a ui/dialogs.confirm NativeScript module at the application event OnWillUpdate. After I found out that the return value of the event function needs to be Promise it worked and I am now able to debug the coding.

Maybe in future there are (necessary) updates/improvements for the Client API (Customizing Advanced Rules) and general possibilities what can be done in addition by implementing advanced rules. I know asking for the description of code options in a metadata-driven app is like a contrast, but for some specific parts it cannot be avoided (at least the moment). I also think that the Assest Manager application provided by SAP uses a lot of coding, which are just "orchestrated" by the metadata layer above.

Again, thank you.

Florian

benu · ‎08-20-2018

Thanks for the suggestion Florian; we will try to include some more info in the 'Customizing Advanced Rules' topic.

kevin_hu · ‎09-06-2018

Great post. Thanks for sharing.

Any chance to provide a link to download the VS extension as a trial for the public.

I think the marketplace link is not working for most sap external developers.

xinye · ‎09-06-2018

Hi Kevin,

Would you please give it a try for this link? https://sap-my.sharepoint.com/:f:/p/xin_ye/Ely3tLsQzQFCr3fJ7K1abHcByD6CCbLnvYAGi0Viyb9BLg?e=LtiuV9

Btw, we will publish this extension to Microsoft VSCode Extension Marketplace soon, then the extension will be easy to enable.

Regards,
Xin

benu · ‎09-11-2018

Hi Kevin,

Thanks for your feedback; do let us know if you were able to work with the link provided by Xin Ye.

kevin_hu · ‎09-12-2018

The link works fine and I have successfully set up the debugging.

btw, Is there any plans to support publishing the application to mobile services from VS Code by cloud platform cli?

xinye · ‎09-12-2018

Good to know you setup the debugging.

As of now, we recommend MDK developers to use SAP Web IDE to do the application deployment, the application source files could be synchronized between Web IDE and VSCode via a Git repository.

xinye · ‎09-21-2018

The MDK extension in v1.1.1 has been published to MS VisualStudio Code Marketplace now.

Jitendra_Kansal · ‎05-22-2020

For any up-to-date info on MDK debugging topic, please visit new documentation.

tschnur_nagarro · ‎01-15-2021

Is MDK debugging somehow possible in SAP Business Application Studio? If not is it planned?