Debug your MDK app with Visual Studio Code & Android Studio.

[FranciscoSAP]

Debugging code is one of the most useful tools in the developer's belt. If you are just getting into Mobile Development Kit (MDK) you might notice that there's not much coding at first and you just find yourself focusing into the business logic part of your project. But once you get into more complex scenarios, you'll most definitely need to write your own JavaScript rules. MDK's extension for Visual Studio Code allows us to set breakpoints in our code and debug it during runtime, as well as make us of a variety of very useful console log features. In this guide, I will show you how to achieve this.

Prerequisites

• Have an MDK app ready to be deployed and debugged. If you still don't know how to do this, let me point you in direction of this great tutorial: Get Started with the Mobile Development Kit.

• Have Visual Studio Code installed and Visual Studio Code's MDK extension as well (you can easily find it by searching for it in VSC's extension marketplace).

• Export your app's project from your IDE and then import it into a Visual Studio Code workplace. The recommended way to do this is by using a GitHub repository. If you don't know how to do this with the Business Application Studio IDE, this guide might come in handy: How to setup GIT in SAP Business Application Studio

• Have Android Studio installed (If you followed the tutorial from the previous step you should already have it)

1) Build your own MDK client using MDK SDK.

Have the latest version of Mobile Development Kit SDK installed and build your app's client with it. This topic is already explained in this tutorial: Build Your Mobile Development Kit Using MDK SDK. The author of the tutorial did a great job explaining how to do that so, to avoid redundancy, I won't get into much details about it.

2) Configure your Visual Studio Code workplace and MDK extension.

Now in Visual Studio Code we have a few configuration steps left before we are able to start running and debugging our app.

First click on VSC's 'Extensions' tab, look for the Mobile Development Kit extension and click on its gear icon, then select the 'Extension Settings' option:



In the extension settings you need to populate the 'Mdk: Debug App Root' field with the folder path that contains your app's client:


And then the 'Mdk: Mobileservice' field with the following key-value items:



You can find the value for your adminAPI by logging into your Mobile Services cockpit, clicking on 'Important Links' in the bottom left of your welcome screen, and then clicking on 'Copy Admin API':



Now go to your Visual Studio Code workspace and bundle your app by clicking on 'Terminal' -> 'Run Build Task' -> 'MDK: bundle build'.



 

 

 

 

 

 

 

 

For our next step go into VSC's 'Run and Debug' tab, click on the "create a launch.json file" option, and select MDK from the available options

This will generate a brand new 'launch.json' file where you'll once again populate the 'appRoot' property with the folder path to your app's client build:



Now perform a fresh deploy from Visual Studio Code to update your project's source map, you can achieve this by right-clicking your Application.app file and selecting 'MDK: Deploy':

3) Run a virtual device in Android Studio

We will use Android Studio's Virtual Device Manager to emulate an Android Device which will be attached to Visual Studio Code to run and debug our MDK apps.

To do that you need to open Android Studio's Virtual Device Manager from the top right corner of the screen, and then click on the 'Launch this AVD in the emulator' button.

(If this is your first time using Android Studio you might need to quickly create a new virtual device first).

4) Install your app in your Android emulator, run it, and start debugging!

For our final step we need to install your app's build into our emulated Android device. To do this first make sure your Android Studio emulator is still running, then open a terminal in Visual Studio Code and navigate to your project's folder using the 'cd <folder path>' command:

You will now install your app into your virtual device using the 'tns run android --device <Device ID>' command:

(You can find your emulator's device ID by using the 'tns device' command)

Your terminal will now start installing your app into your virtual device, once it's done you'll be able to run it and start debugging your code.

While you wait, go ahead and set your first breakpoint in one of your rules:

Make sure your MDK app is up and running in your virtual device, then select the 'MDK: Attach on Android' option in VSC's 'Run and Debug' tab, and click on 'Start Debugging':

If attached successfully, your status bar should turn orange while you are still in a debugging session:

From your running app, trigger the event that's assigned to the rule where you set your breakpoint earlier and start debugging your code:

 

Additional debugging features you can make use of:

Before creating your app's client using the MDK SDK, you edited your 'BrandedSettings.json' file according to your needs. This configuration file contains a 'DebugSettings' property that you can further customize:

For more information about what these settings do and how you can get the best out of them you can check its documentation.

 

 

[fjcarrasco]

Many thanks Francisco for your blog. It's very useful.

The only thing I can't do from is deploy from vscode. I get this error:

Before throw this error, it asks me admin user and password, and I enter my cloudfoundry user and password.

Any idea how i can skip this error and deploy?

Thanks

 

 

[Jitendra_Kansal]

fjcarrasco

For deploying on CF, you must set mdk.mobileservice property in settings.json file.

where adminAPI is the Admin API from Mobile Services CF (in Mobile Services cockpit> click Important links at bottom left > Copy Admin API).

https://help.sap.com/doc/f53c64b93e5140918d676b927a3cd65b/Cloud/en-US/docs-en/guides/getting-started...

[fjcarrasco]

Many thanks jitendrakumar.kansal , I'll try

[former_member776017]

Hello,

I am trying to run the application on the emulator but I have this error (when you say appRouter, you are talking about the path to our mdk project ?):

 

Thanks

[former_member619899]

Hi mkoleit

By looking at your screenshot it looks like the path you provided in your debugging configuration is not pointing towards the directory where your client build is. Have you created your own MDK client first?

I didn't include that in this blog because it's already explained in detail in this tutorial made by Jitendra: Build Your Mobile Development Kit Client Using MDK SDK. I would suggest you to look at the "Prerequisites" section of this blog in case that you might have missed any other crucial parts of this process.

The "appRoot" path configured in your launch.json file should be directed towards the directory containing your app client built with SAP's MDK SDK. It is a common mistake to point it towards your Visual Studio Code workspace instead.

For installing the app in your emulated device you also need to navigate from your command terminal to that same directory you specified in your launch.json file. Then run the `tns run android --device emulator-5554` command from that folder.

[former_member776017]

Thank You a lot !

[former_member183924]

Hi all,

at the end of step 3, I receive an error when I execute "MDK deploy" within VScode: "Deploy failed. Detail: get X-CSRF-Token failed"

I edited the mobile services settings with admin API and appId.

Any idea how to solve it?

Thanks

[former_member183924]

Hi all

when I debugged the VSCode extension I found out that it does a call to

https://mobile-service-cockpit-api.cfapps.sap.hana.ondemand.com/cockpit/v1/org/<org-guid>/space/<spa...

to fetch the Token. This works fine, but it checks the response body on data.version. Unfortunately, the payload only delivers platform property.

cc  jitendrakumar.kansal where is the right place to open an incident (MDK, VSE, CF, MOB) 🙂

-

[Jitendra_Kansal]

steffen I would start with MOB-MDK

[TuBV]

Dear everyone,

I have issue with run debug launch android in Visual studio code.

Please support me.

Thanks you so much.

[fabiocerioni]

Impressive Blog!

Not easy to apply but at the end everything worked and now I can debug

Great Job Francisco

[rileycharkopwc]

Hey Franciso,

 

Your blog helped me as well.  Question for you though.

Do you know if when you make a code change, can you hot swap the changed code and quickly debug or do you have to go through the create-client.cmd steps and bundle in VS Code again?

[alexey_k]

Hi franciscoo_a9475

Do you have an update on automatic app reload feature, once you've done any changes in the code?

[tobias_s1]

Hey steffen 

Did you find a solution at the end ?

I am facing the same issue - error appears if i try to connect to mobile-services --> get x-csrf-token failed.

Version of my MDK-Plugin: 1.24.1

Thanks in advance.

Tobias

[prashanthi_vangala2]

Any update on the issue "get x-csrf-token failed." please? We are facing the same issue.

Thank you for the help