---
# System prepended metadata

title: 'Hands-on: Source Control and Azure Repo Workshop'
tags: [Azure DevOps, Git, Workshop, Azure Repo, ASE]

---

###### tags: `ASE` `Workshop` `Azure DevOps` `Azure Repo`  `Git`

# Hands-on: Source Control and Azure Repo Workshop
[TOC]
## 1/ Git 基本練習
- 開啟 [Azure Portal](https://portal.azure.com/) 並登入
- 選擇右上角的 Cloud Shell，選擇 Bash，點選 Create Storage
    ![](https://i.imgur.com/EA2jjYE.png)
- 第一次使用Git時我們會先設定使用者名稱與信箱，於每次提交的時候顯示，讓其他成員了解提交作者是誰，git config 有分為global, project 或 folder，如果 folder 沒有就會使用 global
    ```.sh
    git config --global  user.name "workshop-user-tw2023-<#>"
    git config --global  user.email "workshop-user-tw2023-<#>@huier23outlook.onmicrosoft.com"
    
- 設定完成後查看
    ```.sh
    git config --list
    ```
- 操作結果
    ![](https://i.imgur.com/F7YlY7y.png)

- Git 命令查詢
    ```.sh
    git help
    ```
- 版本管理
    - 建立資料夾
        ```.sh
        mkdir GitProject
        cd GitProject
        ```
    - 新增檔案並打開編輯器，`Ctrl+S` 可進行儲存
        ```.sh
        code myFirstGitFile.txt
        ```
        ![](https://i.imgur.com/qYUmgeH.png)

    - 視窗右上角選擇 Close Editor
        ![](https://i.imgur.com/vR1UxgF.png)

    - 初始化專案
        ```.sh
        git init
        ```
    - 加入
        ```.sh
        git add myFirstGitFile.txt
        git add . 
        ```
    - 提交 (Commit)
        ```.sh
        git commit -m "First commit"
        ```
    - 建立新分支
        ```.sh
        git branch dev
        ```
    - 切換至分支(如果沒有先做 commit，則切換時會有問題)
        ```.sh
        git checkout dev
        ```
    - 打開 `myFirstGitFile.txt` 修改
        ```.sh
        code myFirstGitFile.txt
        ```
        ![](https://i.imgur.com/qdTWnZh.png)
    - 加入
        ```.sh
        git add myFirstGitFile.txt
        ```
    - 提交 (Commit)
        ```.sh
        git commit -m "Commit @dev"
        ```
    - 合併至 master
        ```.sh
        git checkout master
        git merge dev
        ```


## 2/ 上傳至版控庫
### 設定遠端版控庫位置
- 回到 [Azure DevOps](https://dev.azure.com/where-workshop)
- 選擇 `Azure Repos > Files`，將網址列複製
    ![](https://i.imgur.com/CUZVPjl.png)
- 在 git 中設置 remote 位置
    ```
    git remote add origin <git_repo_url>
    ```
- 推送
    ```
    git push origin master
    ```
- 推送時會出現 Password for ...，回到 [Azure DevOps](https://dev.azure.com/where-workshop) Repo 中點選 **[Generate Git Credentials]**
    ![](https://i.imgur.com/Euksuxy.png)
- 將 PAT 複製下來並貼回 Password 欄位
    ![](https://i.imgur.com/EQ2y7aT.png)
- 推送完成
    ![](https://i.imgur.com/pzIDabm.png)
- 重新整理 Repo 網頁後可以看到檔案
    ![](https://i.imgur.com/IIMr9xh.png)
- 選擇 **[Commits]** 可看到紀錄
    ![](https://i.imgur.com/7ti5F7C.png)

<!-- ### 匯入範例程式碼
- 點選左方欄位 Repo 底下的 **[Files]**，點選頁面中的 **[Import]**
    ![](https://i.imgur.com/YKFDeYX.png)
- 複製以下連結貼到 **[Clone URL]** 中
    ```
    https://github.com/huier23/AspNetCoreSample.git
    ```
- 完成後點選 **[Import]**
    ![](https://i.imgur.com/sTGcm4H.png =350x)
- 顯示正在進行匯入
    ![](https://i.imgur.com/N1bJUgO.png)
- 完成後會看到成功畫面並且跳轉到匯入的程式碼
    ![](https://i.imgur.com/RAwPZ0c.png) -->

### Pull Request 練習
- 點選頁面上方的 **[master]**，點選 **[+ New Branch]**
    ![](https://i.imgur.com/elZK7AB.png)
- 建立一個 `dev` 分支，點選 **[create]**
    ![](https://i.imgur.com/FhQrorK.png =350x)
- 建立完成後會看到上方分支已經切換到 `dev`
    ![](https://i.imgur.com/mUuGRDb.png)
- 修改 **[myFirstGitFile.txt]** 檔案
    ![](https://i.imgur.com/8cXqd8O.png)
- 點選 **[Edit]** 可以開始修改
    ![](https://i.imgur.com/Dis1CsW.png)
- 在文件中最下方填入任意文字，然後點選右上角 **[commit]**
    ![](https://i.imgur.com/kjxuEp0.png)
- 會跳出 Commit 視窗，點選 **[Search work items by ID or title]**，尋找到先前建立的 task `修改 myFirstGitFile`，完成後點選下方的 **[Commit]**
    ![](https://i.imgur.com/Zwk5yN6.png)
- 點選左方選單 Repos 下的的 **[Pull Request]**，點選上方通知訊息條的 **[Create a pull request]**
    ![](https://i.imgur.com/urUGwfO.png)
- 確認是從 `dev` 合併到 `master`，並在 **[Reviewers]** 的欄位搜尋選擇自己，完成後點選 **[Create]**
    ![](https://i.imgur.com/xDMPJmI.png)
- 接著會跳轉到 pull request 的 review 畫面，點選右上角的 **[Approve]**
    ![](https://i.imgur.com/MAEeMQX.png)
- 點選旁邊的 **[Complete]**
    ![](https://i.imgur.com/VksU22p.png)
- 確認 **[Delete dev after merging]** 是勾選狀態，並點選下方的 **[Complete merge]**
    ![](https://i.imgur.com/AqbSHI9.png =350x)
- 完成畫面
    ![](https://i.imgur.com/qtVhbUi.png)
- 回到 **[Files]**，查看 **[myFirstGitFile.txt]**
    ![](https://i.imgur.com/oCJSZLV.png)
- 在 `master` 上，已經更新為剛剛的修改的版本
    ![](https://i.imgur.com/elZZsGf.png)
- 找到 `修改 myFirstGitFile` 的工單查看內容，狀態也被自動異動成 Done
    ![](https://i.imgur.com/VrjpaW6.png)
