Step 3: Writing Code

Managing Code with a Branch

A branch is a tool for parallel feature development. Branches enable you to diverge from the main line of development and continue to do work without messing with that main line.

When a code repository is created, there is a default branch named master, that is, the main line. To ensure stable running of the Phoenix Mall, a stable and continuously available master is required. The project manager suggests "function branches + merge requests". Each function branch must be reviewed by other members in the team before merge.

1. Set master as a protected branch (this operation is performed by project manager Maggie in this document).
   1. Go to the Phoenix Mall project, choose Code > Repo from the navigation pane, and locate the code repository phoenix-sample.
   2. Go to the code repository by clicking its name and click the Settings tab. Choose Policy Settings > Protected Branches from the navigation pane.
   3. Click Create Protected Branch. Complete the settings by referring to the following table and click OK.
      

      If the protected branch master already exists on the page, click and modify the branch configuration as required.

      Table 1 Creating a protected branch

      Configuration Item	Suggestion
      Branch	Select master.
      Push	Retain the default value.
      Merge	Retain the default value.
      Members	Retain the default value.

2. Create a function branch (this operation is performed by developer Chris in this document).
   1. Go to the Phoenix Mall project. Choose Code > Repo. Find the phoenix-sample in the repository.
   2. Click the repository name to access the code repository. On the Code tab, click Branches.
   3. Click Create Branch, set the branch information by referring to Table 2, and click OK.

      Table 2 Creating a branch

      Configuration Item	Suggestion
      Based On	Select master.
      Branch	Enter Feature-Store.
      Work Items to Associate	Select User can query network of all stores.

Modifying and Committing Code

The store network query function is divided into frontend display and backend management tasks during sprint planning. This section uses task Frontend display - Add store network menu as an example to describe how to modify and commit code.

1. Choose Work from the navigation pane, and click the Sprints tab.

   In sprint 4, find the task Frontend display - Add store network menu, and change the task status to Developing.

2. Choose Code > Repo, and find the phoenix-sample repository.
3. Go to the code repository by clicking its name and click the Code tab.
4. Click master above the file list and select the branch Feature-Store from the drop-down list.
5. Find vote/templates/store-network.html in the file list and open it.
6. Click , add the store address specified in the story, 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>

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

   Add the menu Store Network in line 179, enter the commit message fix #xxxxxx Frontend display - Add store network menu, and click OK.

   In the preceding message, #xxxxxx indicates the ID of task Frontend display - Add store network menu, which is obtained from the work item list.

   <li class="nav-item"> <a href="store-network" class="nav-link">Store network</a> </li>

8. Choose Work from the navigation pane, and click the Sprints tab.
   In sprint 4, find the task Frontend display - Add store network menu.

   • Click the task name. The task status automatically changes to Resolved on the details page.
   • Click the Associated tab. Under Code Commit Records, a record is displayed with the commit message configured in the previous step.
     Figure 1 Code commit records
     

Reviewing Code and Merging Branches

1. The developer initiates a merge request.

   After coding, developer Chris initiates a merge request to merge their function branch into the master.

   1. Go to the code repository, click the Merge Requests tab, and click Create Merge Request.
   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 Table 3.

      Table 3 Merge request configurations

      Configuration Item	Suggestion
      Title	Enter Add store list.
      Mergers	Click . In the dialog box that is displayed, select Maggie and click OK.
      Approvers	Click . In the dialog box that is displayed, select Maggie and click OK.

   4. Click Create Merge Request to complete the creation.

2. The project manager reviews the code and merges the commit request.

   In this document, project manager Maggie is both the approver and merger. Maggie approves the request content and merges the request.

   1. Go to the 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 Approval Gate to complete the approval.
   4. Click Merge to merge the branch into master.
      

      If you have selected Delete source branch after merged when creating a merge request, the branch Feature-Store will be deleted after the branch merge is complete.