Step 3: Writing Code

Using Branches

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 the stable running of Phoenix, a stable and continuously available master is required. The project manager suggests "function branches + request merges". 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.

      Table 1 Creating a protected branch

      Configuration Item	Suggestion
      Branch	Select master.
      Push	Configure this parameter as required. In this example, the default configurations are used.
      Merge	Configure this parameter as required. In this example, the default configurations are used.
      Members	Select Push and Merge as required, and select a member from the drop-down list. In this example, the default configurations are used.

      

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

2. Create a function branch (this operation is performed by developer Chris in this document).
   1. Go to the Phoenix 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 and 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 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 Sprint4, 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 information, #xxxxxx indicates the ID of the task for 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 > Sprints from the navigation pane. 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 record
     

Reviewing Code and Merging Branches

1. A 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 New.
   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 reviewer and merger. Maggie reviews 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 the Approval Gate to complete the approval.
   4. Click Merge to merge the branch into master.
      

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