# 第3~4堂小組任務｜第一小組 使用 Discord、ZOOM 來討論，組員沒麥克風也可以一個人分享畫面，其他組員用文字討論，解答此問題集 **回報流程：** 1. 請組長到下方回報解答連結，**一個小組請派一人提交(依據當周條件提交)**。回報內容需含： 1. 該問題集的答案 2. 提供 1~3 張 Discord 或 ZOOM 對話截圖，確保有進行小組討論 3. 組員參與名單 2. 助教檢視過後，就會回覆 ✅ 來回報審核成功與否。 **常見問題：** Q：約時間討論的組員至少要幾位？ A：至少兩位就可成團！ Q：如果沒有分組，可以一起玩嗎？ A：可以 --- ## 問題 ### 挑戰一：**資料表設計** 這次要考驗前端與後端組的協作流程，當後端來不及出 API 時，前端必須得先嘗試用 MOCK API 來先作業，等後端將 API 提供時，前端就能接軌跟上。 所以這次分工上，需要分派先想做 CSS+前端JS、誰想扮演後端角色 **功能一：取得貼文列表** - 只能有一個 posts model，每次新增資料時，需增加發文者名稱(userName)、發文者照片(userPhoto)欄位 - 最新貼文、關鍵字，可以嘗試前端解決，或後端解決都可 ![image](https://i.imgur.com/v8O2Mno.png) **功能二：新增貼文 API** - 下圖欄位請多新增發文者名稱(userName)、發文者照片(userPhoto)欄位 ![image](https://hackmd.io/_uploads/HyYZVHio6.png) 回報時提供 1. 協作流程 2. 後端 GitHub Repo 3. 前台網址(GitHub pages、Codepen) > [範例參考](https://hackmd.io/KYAM44hbQA-wizykK322Fw?view)，來自 Node 2022 春季班 3 組 > [2022 年影片小組任務解說時間：40:40](https://courses.hexschool.com/courses/node-js-2022321/lectures/51724191) ### 挑戰一：資料表設計 - 協作流程: [notion任務卡階段文件](https://www.notion.so/8c9379f1f7254ee293bb1f0694232bfe?v=e07846320e604ce59d250b391345c319) - 後端 GitHub Repo: https://github.com/MisTPEBUS/Meta-Wall - 後端 API 文件: https://metawall-yjmx.onrender.com/api-doc/#/ - 前端 GitHub Repo: https://github.com/RayChen1996/MetaWall-Web - 前台網址(GitHub pages、Codepen):https://raychen1996.github.io/todolist-web/ ### 挑戰二：Git 挑戰 - 3名組員: 參與人員:RayChen, Tiya, Lobinda, GitHub連結:https://github.com/MisTPEBUS/node2024Team_Git04 ## 任務流程 - [x] 1-1：Lobinda 成員新增一個新的 Repo，增加 `index.html`，並在 `index.html` 加入以下內容，在 `main` commit 一個版本，**進行 git push 動作，B 成員也將進度 clone 下來** ::: spoiler 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> ``` ::: - [x] 1-2：RayChen 成員在 `main` 分支進度上，開一個 `feature/newAmember` 的分支 ，在成員一名稱寫上自己名字，commit 一個版本後， **將`feature/newAmember`分支進行 git push，並發 PR 合併到 `main`，並指派 Tiya review** - [x] 1-3：Lobinda在 `main` 分支進度上，開一個 `feature/newBmember` 的分支 ，在成員二名稱寫上自己名字，commit 一個版本後， **將`feature/newBmember`分支進行 git push，並發 PR 合併到 `main`，並指派 RayChen review** - [x] 1-4：Tiya 到 RayChen 發的 PR 進行檢視，並留言「你確認名字要改嗎？」、RayChen回覆：「想了下還是調整下好了」，於是退回 PR - [x] 1-5：RayChen git fetch `feature/newBmember` 分支，檢視無誤後，審核通過 Lobinda的 PR - [x] 1-6：Lobinda 成員進行 `git fetch origin main` 指令抓最新版本下來 - [x] 1-7：RayChen 成員 git checkout 到`feature/newAmember`，在成員一名稱重新寫上自己調整的名字，再 commit 一個版本後，並合併 `origin/main` 進度，合併發生衝突需解衝突， **將`feature/newAmember`分支進行 git push，並發 PR 合併到 `main`，並指派 Lobinda的 成員 review** - [x] 1-8：Lobinda的 成員 PR 直接審核成功 - [x] 1-9：Tiya 進行 `git fetch origin main` 指令抓最新版本下來後，git checkout 到`origin/main`，開一個新分支為`feature/editTitle `，並 checkout 過去修改 `index.html`的 title 為 `修改 title B`， **將`feature/editTitle`分支進行 git push，並發 PR 合併到 `main`，指派Lobinda審核** - [x] 1-10：Lobinda 審核 PR 成功後，透過 GitHub Pages 觀看最後結果是否如預期 ### 小組討論對話截圖: #### 對話 ![1](https://hackmd.io/_uploads/ryUkDGTf0.png) ![2](https://hackmd.io/_uploads/HyLyvGpzC.png) #### GitHub Pages ![4](https://hackmd.io/_uploads/ryggRzpfA.png)