Debug SAP Asset Manager with Crew component using VS Code

The purpose of this article is to explain the steps required to setup and debug SAP Asset Manager using Visual Studio Code. Topics covered in this blog are

• Download the required packages from SAP Software Downloads
• Setup base SAP Asset Manager with Crew component
• Build branded client using the MDK Client SDK
• Finally, debug one of the rules in SAP Asset Manager application using VS Code by launching the app in iOS simulator

Download the following files from SAP Support Portal

 

 

Once the above-mentioned zip files are downloaded, extract them to the respective folders

Setup the project by creating a folder name of your choice. From here on, it is referred to <project_folder>

From the Asset Manager Branding SDK folder, copy the SAPAssetManagerCrew MDK project to the project folder created above

 

In the project folder, open the MDKProject.json and edit the “BundleID”. Adjust “UrlScheme” value, if required.

 

In the project folder, open the BrandedSettings.json and edit the “ConnectionSettings”. Refer step 7 from below link on how to obtain the values from SCPms.

https://help.sap.com/viewer/b9ddcd5bbc5c462b8ef3b0d18a6193bf/4.0/en-US/714b7c7da1c8421ca9af5fbb1b10bbd0.html

In the <project_folder>/SAM.mdkproject/metadata, create a new folder “Crew”

Copy the Asset Manager metadata from the extracted zip to the <project_folder/SAM.mdkproject/metadata/sam.definitions

After copying, “sam.definitions” folder structure should like below

Copy the Asset Manager Crew metadata from the extracted zip to the <project_folder/SAM.mdkproject/metadata/Crew

After copying, “Crew” folder structure should like below

Create “extensions” folder in <project_folder>/SAM.mdkproject/

From the SAM Extension SDK extracted folder, copy the files to <project_folder>/SAM.mdkproject/extensions/

Note: In this blog, iOS simulator is used to debug and hence the extension files from “Release-iphonesimulator” is used

After copying “extensions” folder should look like below

Copy the extracted MDK client folder to the <project_folder>/

After copying, <project_folder> should like below

Run the MDK client dependencies installer and make sure all the dependencies are met for the platform. Dependency installer is available in MDK client folder

Select the platform you are building the application for and click “Check Components Compatibility”

For any missing components, use the “Install Selected Components” to install it.

Once all the dependencies are installed, open a terminal at <project_folder>MDKClient_SDK

Use ./install.command to install the dependencies in the project location

Once complete, run the ./create-client.command

Wait few minutes for the build to get completed. When complete, the project should be available in the <project_folder>/MDKClient_SDK/CrewAssetManager.The iOS project available in <project_folder>/MDKClient_SDK/CrewAssetManager/platforms/ios/CrewAssetManager.xcworkspace can be directly opened in XCode. Adjust any settings in XCode as necessary to build the project successfully (for example, enable automatic signing).

In my case, XCode was raising an exception for a missing file which I manually created by copying the “plugins-release.xcconfig” and renaming it to “plugins-debug.xcconfig”

Build the project in XCode and make sure it compiles successfully

Download VS Code and install it

Open Visual Studio Code and switch to “Extensions” view to install the extensions. After installing, restart the VS Code

Switch to “Explorer” view and “Add Folder” to import source code

Switch to “Debugger” view and select “Add Config”. Select the Environment as “MDK”

Add the “appRoot” value to the configuration

From the VS Code menu, select Terminal-> Run Build Task. When VS Code prompts, select the base project from the list. MDK Bundler will build the project

Now, click on the DEBUG “MDK Launch on iOS” and select “SAPAssetManager” project

While launching, system will prompt for accepting network connection. Click “Allow”

Shortly, the simulator should be launched with the project. Click “Start” and follow the on-screen instructions to start the sync.

When sync completes, the app should be displayed as below

Set a breakpoint in a rule. For example, navigate to “Explorer” view, browse through the project, select a rule and set breakpoint

Use the application to trigger the breakpoint. When the breakpoint is hit, the use the options in the “Debugger” view to step-in, step-over, reconnect etc.

When done with the inspection of objects, click the red square button to disconnect the debugging section.

This is an example to debug SAP Asset Manager setup with Crew component, but the concept can be applied to debug other components, including custom components created during projects.