• @Author: leon_wu
• @Date: 2022-03-08
• @Description: DM-IDE

Background

This project DM-IDE aims to provide a local IDE for coding outside Digital Maker (DM) but compile inside DM, this IDE should have powerful debug functions and be compatible with GitLab CI/CD,nevertheless this IDE should be able to import/export popular components from modern developing framework such as VUE. The GUI and Folder structure of this IDE is based on DM Component repository.  

Setup Local Development Environment (Component Development)

Step 1. Clone this source code repository

git clone https://gitlab.dpg.asia.pwcinternal.com/dm-tools/dm-components.git

Step 2. Install node.js packages

npm install

Step 3. Run this application

npm run serve

By default, it will provide you the local web access via http://localhost:8080/
 

Source Folder Structure

Following is the highlighted folder structure for components development.

src/
├─ projects/
│  ├─ {ProjectName}/
│  │  ├─ assets/
│  │  ├─ constants/
│  │  ├─ scripts/
│  │  ├─ targets/
│  │  │  ├─ dm5/
│  │  │  │  ├─ combinations/
│  │  │  │  ├─ components/
│  │  │  │  ├─ scripts/
│  │  ├─ compRepo.project.settings.json
├─ compRepo.settings.json

As can be seen, all source code are stored inside 'src' folder as general practice. Under it, one folder 'projects' and one file 'compRepo.settings.json' can be found. The 'projects' folder hold all the components which grouped by projects, while the 'compRepo.settings.json' is the root entry point of component registration (it will be covered in next section).

The projects have their own folder inside 'projects' and the project name should be the folder name '{ProjectName}/'. For each project folder, it contains

• assets (store media assets and stylesheets)
• constants (common constants definition)
• scripts (javascript that will be loaded by customized component)
• targets (store the implementation of the customized components and grouped by Digital Maker version)

Component vs Combination

This component repository present the components in two different ways, namly component and combination. As the name implied, the component means to present the component soly to users, so that the user understand what the component includes and not included. In contrast, combination presents a group of closely related components together, and usually formed a cooperation relationship.

Take an example, one component is to provide search criteria selection while another provides the search result display list. To present them individually to users may not give the idea of what they really mean for. In this case, we can create a combination to put them into a group, thus the user can try by pressing the search button in one component, then read the search result immediately on the same rendering screen.
 

Component Registration

Components put inside the project folder will not be picked to display automatically. There is a registration step and only those registered components will be shown to users.

As briefly said in previous section, compRepo.settings.json is the entry point. Inside this file, the content is simple, it mainly describe what project folders are registered.

{
    "repositoryName": "Component Repository",
    "repositoryVersion": "0.0.1",
    "projectEntries": [
        "projects/InternalAudit/compRepo.project.settings.json"
    ]
}

The details settings are not directly put inside this file, but it should point to the projects that registered here. For example, we have a project called 'Internal Audit', its project specific 'compRepo.project.settings.json' file needed to be added to the 'projectEntries'. To add new project, we do the similar to put another line to 'projectEntries' as it supports multiple items.

'compRepo.project.settings.json' is the project specific setting to have the project related components and combinations registration. Please refer to the existing project setting as sample.