---
# System prepended metadata

title: 第3~4堂小組任務回報 | 第一小組

---

# 第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)

