Skip to Content
Technical Articles
Author's profile photo Francisco Acuña

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

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 ‘Debug’ tab, click on the gear icon and choose ‘MDK Debug Configuration’:

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) Import your project into Android Studio and get your emulator running.

First of all, you need to import your app’s project into the Android Studio workplace. To do that you need to click on the ‘File’ menu -> ‘New” -> ‘Import Project…’.

Then you look for the folder where you created your app’s client earlier, you select ‘Create project form existing sources’, and you click on ‘Next’.

You chose a name for your project, in my case I left it by default, and you click ‘Next’ once more:

Android Studio will now begin to generate the index files for your project, wait a few seconds until it’s done and then get your emulator running, to do that you need to open Android Studio’s Virtual Device Manager from the top right corner of the screen, and then hit 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 your Android emulator. 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:

Look for your freshly installed app’s icon in your virtual device’s menu and once it’s up and running select the ‘MDK: Attach on Android’ option in VSC’s debugger 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 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 it’s documentation.

 

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Francisco José Carrasco Valverde
      Francisco José Carrasco Valverde

      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

       

       

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      Francisco José Carrasco Valverde

      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/mdk/vscode/deploying-to-mobile-services.html

      Author's profile photo Francisco José Carrasco Valverde
      Francisco José Carrasco Valverde

      Many thanks Jitendra Kansal , I'll try

      Author's profile photo Moustapha Koleit
      Moustapha Koleit

      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

      Author's profile photo Pampa BI
      Pampa BI

      Hi Moustapha Koleit

      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.

      Author's profile photo Moustapha Koleit
      Moustapha Koleit

      Thank You a lot !

      Author's profile photo Steffen Froehlich
      Steffen Froehlich

      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

      Author's profile photo Steffen Froehlich
      Steffen Froehlich

      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/<space-guid>/settings/serverversion

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

      cc  Jitendra Kansal where is the right place to open an incident (MDK, VSE, CF, MOB) 🙂

      -

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      Steffen Froehlich I would start with MOB-MDK