Help Center/ CodeArts/ Best Practices/ Developing an E-mall Project with CodeArts/ Implementation Procedure/ Developing Code
Updated on 2025-07-30 GMT+08:00
View PDF
Share

Developing Code

CodeArts Repo offers Git-based online code management, including code cloning/commit and branch management.

This practice uses branches for code development. Branches let you develop features separately. They keep your work isolated from the main branch, ensuring it stays unaffected.

When a code repository is created, a default branch named master, that is, the main line, is generated. To ensure stable running of the Phoenix Mall, a stable and continuously available master branch is required. Instead of developing code on the master branch, developers are advised to use "function branches + merge requests". Each function branch must be reviewed by other members in the team before merge.

This section describes how to develop code for the store query function using branches.

Creating a Requirement Branch

Developer Chris creates a requirement branch in the repository to develop code for the new requirement.

  1. Go to the Phoenix Mall project, and choose Code > Repo from the navigation pane.
  2. Click the phoenix-sample repository.
  3. Choose Code > Branches and click Create Branch. In the displayed dialog box, set the following parameters and click OK.

    Table 1 Creating a branch

    Parameter

    Example

    Description

    Based On

    master

    Select an existing branch.

    Branch Name

    Feature-Store

    Name of the branch you are creating. The name cannot exceed 200 bytes.

    • Do not start with a hyphen (-), period (.), refs/heads/, or refs/remotes/.
    • Do not use spaces or these special characters: [\<~^:?*!()'"|
    • Do not end with a period (.), slash (/), or .lock.

    CodeArts Req Work Items to Associate

    Frontend display - Add store network menu

    Associate an existing work item with the branch.

    The Files page is displayed, showing the Feature-Store branch.

    Figure 1 Feature-Store branch

Modifying and Committing Code

Developer Chris develops code in the requirement branch.

  1. In the Feature-Store branch of the phoenix-sample repository, find vote/templates/store-network.html and open it.
  2. Click , add the following code to the file, enter the commit message "Store list added" in the text box at the bottom of the page, and click OK. 

    <ul>
	<li>Branch A: 123 meters to the departure floor, Terminal 1, Airport E</li>
	<li>Branch B: No. 456, Street G, Area F</li>
	<li>Branch C: No. 789, Street J, Area H</li>
	<li>Branch D: West side of Building K, Avenue L, Area K</li>
</ul>
    Figure 2 Committing code

    The modified code is displayed.

  3. Open and edit the /vote/templates/index.html file in the same way.

    Add the following code to line 179, enter the commit message "fix #xxxxxx Frontend display - Add store network menu", and click OK. xxxxxx indicates the ID of the task Frontend display - Add store network menu. 
    <li class="nav-item"> <a href="store-network" class="nav-link">STORE NETWORK</a> </li>

    The modified code is displayed.

  4. Viewing commit records

    1. Choose Work to enter the CodeArts Req service.
    2. On the Work Items tab, find the task Frontend display - Add store network menu. The task status has automatically updated to Resolved.
    3. Click the task title to open the details page.
    4. Click the Associations tab. Under Code Commits, a record is displayed, showing the commit message configured in 3.
      Figure 3 Code commit records

Merging Code Through a Merge Request

After completing code development and self-testing, developer Chris submits a branch merge request. Project manager Maggie reviews the request and merges the branch.

  1. Chris submits a merge request.

    1. In the phoenix-sample code repository, click the Merge Requests tab, and click Create MR.
    2. Set the source branch to Feature-Store and the target branch to master, and click Next.
    3. Edit the merge request details by referring to the table below.
      Table 2 Configuring a merge request

      Parameter

      Example

      Description

      Source Branch

      Feature-Store

      The source branch of the merge request.

      Target Branch

      master

      The target branch of the merge request.

      Title

      Add store list

      The title of the merge request. Enter a maximum of 255 characters.

      Mergers

      Maggie

      Members who will merge the code.

      Approvers

      Maggie

      Members who will review the merge request.
    4. Click Create Merge Request to complete the creation.

      The merge request details are displayed.

  2. Maggie reviews the merge request.

    1. Go to the phoenix-sample code repository, click the Merge Requests tab, and find the merge request created by developer Chris.
    2. Click the request to view details.
    3. Leave comments on the page. Click Approve in the Approval Gate area.
      Figure 4 Approval gate
    4. Click Merge to merge the branch into master.

      The code is merged.

Parent topic: Implementation Procedure