第一組-第五週小組任務

--- tags: 'Vue直播班北1 - 2024' --- # 第一組-第五週小組任務 ## ==討論日期 : 1/31 ( 三 )== :::info 報到 - [x] Uli - [x] WeiWei崴崴 - [x] Eden - [x] Ann - [x] 依依 - [x] Moreene - [x] Winnie - [ ] 仙貝 - [x] 非常愛柯基 - [x] 樂樂 - [ ] cestjessie ::: ## 問題 ### 挑戰一：安裝 Vite 參考 [Vite 的安裝影片](https://courses.hexschool.com/courses/vue-2021211/lectures/49875609)，讓夥伴們完成 Node.js 與 Vite 的安裝。 ### 挑戰二：Git 挑戰完成 [Git 任務四](https://hackmd.io/8uEPk1GeTBCl8lUQfD5b5Q?view) ### 你可以掌握的技術 - 非同步更新進度 - 審核 PR 通過、退 PR 的應對 ### 任務流程 - [ ] 1-1：A 成員新增一個新的 Repo，增加 `index.html`，並在 `index.html` 加入以下內容，在 `main` commit 一個版本，**進行 git push 動作，B 成員也將進度 clone 下來**。 ::: spoiler {state="open"} HTML 內容 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>成員列表</h1> <ul> <li>成員一名稱：</li> <li>成員二名稱：</li> <li>成員三名稱：</li> </ul> </body> </html> ``` ::: - [ ] 1-2：A 成員在 `main` 分支進度上，開一個 `feature/newAmember` 的分支，在成員一名稱寫上自己名字，commit 一個版本後， **將`feature/newAmember`分支進行 git push，發 PR 合併到 `main`，並指派 B 成員 review**。 ::: spoiler {state="close"} 提示 - Step 1：開 feature/newAmember 分支，並切換到此分支。 ``` git checkout -b feature/newAmember ``` - Step 2：在「成員一名稱」寫上自己名字，並進行到提交。 ``` git add . git commit -m '加入成員一名稱' ``` - Step 3：將分支推送到 GitHub。 ``` git push origin feature/newAmember ``` - Step 4：發 PR 合併到 main，並指派 B 成員 review。 ::: - [ ] 1-3：B 成員在 `main` 分支進度上，開一個 `feature/newBmember` 的分支，在成員二名稱寫上自己名字，commit 一個版本後， **將`feature/newBmember`分支進行 git push，並發 PR 合併到 `main`，並指派 A 成員 review**。 ::: spoiler {state="close"} 提示 - Step 1：在 main 分支最新進度上，開 feature/newBmember 分支（並且要切換過去）。 ``` git checkout -b feature/newBmember ``` - Step 2：在「成員二名稱」寫上自己名字，並進行到提交。 ``` git add . git commit -m '加入成員二名稱' ``` - Step 3：將分支推送到 GitHub。 ``` git push origin feature/newBmember ``` - Step 4：發 PR 合併到 main，並指派 A 成員 review。 ::: - [ ] 1-4：B 成員到 A 成員發的 PR 進行檢視，並留言「你確認名字要改嗎？」、A 成員回覆：「想了下還是調整下好了」，於是退回 PR。 **提示：退回 PR 按 `Close pull request` 按鈕。** - [ ] 1-5：A 成員 git fetch `feature/newBmember` 分支，檢視無誤後，審核通過 B 成員的 PR。 ::: spoiler {state="close"} 提示 - Step 1：切換到 feature/newBmember 查看畫面呈現。 ``` git fetch origin feature/newBmember git checkout origin/feature/newBmember ``` 注意！是 checkout ***origin/***，這代表它只是切換到***本地數據庫的遠端分支引用***。 - Step 2：若無誤，審核通過 B 成員的 PR。 ::: - [ ] 1-6：A 成員進行 `git fetch origin main` 指令抓最新版本下來。 - [ ] 1-7：A 成員 git checkout 到`feature/newAmember`，在成員一名稱重新寫上自己調整的名字，再 commit 一個版本後，並合併 `origin/main` 進度，合併發生衝突需解衝突， **將`feature/newAmember`分支進行 git push，並發 PR 合併到 `main`，並指派 B 成員 review**。 ::: spoiler {state="close"} 提示 - Step 1：切換到 feature/newAmember。 ``` git checkout feature/newAmember ``` - Step 2：修改名字後進行到提交。 ``` git add . git commit -m '修改成員一名稱' ``` - Step 3：合併 `origin/main` 進度。 ``` git merge origin/main ``` - Step 4：解衝突，重新提交。 ``` git add . git commit ``` - 註 1：使用 `git commit` 會跳到預設的編輯器（vim）進行瀏覽，會有預設的 commit 說明，關閉（:wq）後即提交完成。 - 註 2：也可以使用 `git commit -m '新的說明'` 直接取代原說明，就不會跳到編輯器。 - Step 5：推送到 GitHub。 ``` git push origin feature/newAmember ``` - Step 6：發 PR，並指派 B 成員 review。 ::: - [ ] 1-8：B 成員 PR 直接審核成功。 - [ ] 1-9：B 成員進行 `git fetch origin main` 指令抓最新版本下來後，git checkout 到 `origin/main`，開一個新分支為`feature/editTitle `，並 checkout 過去修改 `index.html`的 title 為 `修改 title B`， **將`feature/editTitle`分支進行 git push，並發 PR 合併到 `main`，指派 A 成員審核**。 ::: spoiler {state="close"} 提示 - Step 1：fetch 最新的 main 下來。 ``` git fetch origin main ``` - Step 2：在 origin/main 的進度上，開新分支 feature/editTitle，並切換過去。 ``` git checkout origin/main git checkout -b feature/editTitle ``` - Step 3：head title 改為：`修改 title B`，並進行到提交。 ``` git add . git commit -m '修改 title' ``` - Step 4：推送到 GitHub。 ``` git push origin feature/editTitle ``` - Step 5：發 PR 合併到 main，指派 A 成員審核。 ::: - [ ] 1-10：A 成員審核 PR 成功後，透過 GitHub Pages 觀看最後結果是否如預期。 #### 通關檢核點 - [ ] A、B 成員與 GitHub Repo 都有相同的 commit 數量 - [ ] 預期線圖有符合 #### 預期線圖 ![](https://hackmd.io/_uploads/ByEzyFJGT.png) 最後執行 git fetch 抓下所有分支最新狀態，完整線圖： ![image](https://hackmd.io/_uploads/By7uiYD5p.png) #### 補充知識 - ***`git checkout -b <分支名稱>`*** 結合了以下兩個指令： ``` git branch <分支名稱> git checkout <分支名稱> ``` - [10.3 Git 内部原理 - Git 引用](https://git-scm.com/book/zh/v2/Git-%E5%86%85%E9%83%A8%E5%8E%9F%E7%90%86-Git-%E5%BC%95%E7%94%A8) #### 提交 Git Repo 連結 [隨機分組](https://www.suijidaquan.com/zh-tw/team-generator) | 成員 | GitHub | | -------- | -------- | | Ann、Uli | [GitHub](https://github.com/ann328/git-0131)| | Eero、Winnie | [GitHub](https://github.com/sksak75312/01-31)| | 和樂融融 👍 | [GitHub](https://github.com/PinyiW0/git0131-2)| ### 挑戰三：課後測驗完成 [第五週題目](https://casper-wang.notion.site/9ad0e973288743368c1b441b198976a2) | 暱稱 | 第一題 | 第二題 | 第三題 | 第四題 | 第五題 | 第六題 | 第七題 | 第八題 | 第九題 | 第十題 | 第十一題 | 第十二題 | 第十三題 | 第十四題 | 第十五題 | | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- | | Uli |2|3|[put]/v2/api/{api_path}/admin/product/{id}|:new-text="someText"|this.$emit('push-data',this.text)|this.$refs.myCard|1|2|3|3|2|4|1|3|2| | WeiWei崴崴 | | Eden | | Ann |2|3|v2/api/{api_path}/admin/product/{id}|:new-text="someText"|this.$emit('pushData',this.text)|this.$refs.myCard|1|2|3|3|2|4|1|3|2(這題目？？？) | 依依 | | Moreene | | Winnie |2|3|[put]/v2/api/{api_path}/admin/product/{id}|:new-text="someText"|this.$emit('push-data',this.text)|this.$refs.myCard|1|2|3|3|2|4|1|2|2| | 仙貝 | | 非常愛柯基 | | 樂樂 | | cestjessie| | **討論結果**|2|3|[put]/v2/api/{api_path}/admin/product/{id}|:new-text="someText"|this.$emit('push-data',this.text)|this.$refs.myCard|1|2|3|3|2|4|1|2、3|2| ## 截圖 ![image](https://hackmd.io/_uploads/ry56F2w9T.png)