---
# System prepended metadata

title: Twitter 驗收＆結業式
tags: [學期 3, 工作坊頁面]

---

###### tags: `學期 3` `工作坊頁面`

# Twitter 驗收＆結業式

#### 09/08 Twitter 結業式 活動資訊

<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content; font-weight: bold;">
日期與時間：09/08 (五) 19:30 - 21:00 <br>
參加連結：<a href="https://zoom.us/j/86784111140" target="_blank">https://zoom.us/j/86784111140</a><br>
會議密碼：495659<br>

<a class="btn btn-normal" target="_blank" href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=Mjk2amRldjVsdW9maGdvaHR2dmVoajVvaDAgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a>
</div>


#### 活動流程 Agenda

- Opening
- 評審講評
- 未來學習建議分享
- 神秘環節，敬請期待

---

### 09/08 Twitter 結業式 - 行前提醒


提醒同學 09/08 (五) 19:30-21:00 為 Twitter 結業式，評審將點評有通過 Twitter 指定功能交付的小組。
除此之外，我們也鼓勵同學們多多觀摩不同組別的 Twitter 成品及程式碼，並與組員一起討論，相互成就及成長唷！

現在就去看看這次結業式的活動流程吧 ➡️  [Twitter 結業式 活動資訊](https://lighthouse.alphacamp.co/courses/80/units/28720)

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>

---

## Webinar Update
### 【今晚 7:30 工作坊提醒】Twitter 結業式！

今晚就是期待已久的 Twitter 結業式了！

評審導師們將會針對各組進行點評，教練團隊也會和同學一起完成最後一場活動，大家記得一定要上線參與哦，我們等等見！

#### 活動資訊
<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
  • 活動時間：09/08  (五) 19:30 - 21:00<br>
  • 活動頁面：<a href="https://lighthouse.alphacamp.co/courses/80/units/28953" target="_blank">Twitter 結業式 - 活動頁面</a>
</div>

同學可以事先在這邊提問，助教會視情況在活動中回答 ➡️ [提問連結](https://app.sli.do/event/tD1bmmtsznFuaiH812XrgG) 
提問時請留下你的專修及問題，例如：前端 - XXXXXXX 


<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>

---

## Twitter 結業式 -- 2023 / 07 月班會後精華


昨天的 Twitter 結業式落幕，同學們也即將走完在學期三的最後一哩路！

除了邀請到陣容強大的評審團隊，來幫 Twitter 專案做全方位的檢視和評論，教練團隊也和同學們一起回顧了這幾個月的成長，以及叮嚀同學接下來須完成的事項，來看看 Twitter 結業式的會後精華吧！

<br>

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;">  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/840712187?h=3b5e1a3af0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allowfullscreen></iframe></div>
<div style="height: 16px;"></div>

---
#### Agenda


- Opening
- Twitter 指定功能成果
- 評審講評
- 未來學習建議分享
- 神秘嘉賓分享


---

#### 工作坊投影片

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;">
    <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://docs.google.com/presentation/d/e/2PACX-1vQuMeEtPky-HHd2TUnseJO-FSnbTMF3kHMXFWsVDAcd9-gIWyAIEJFlDLRQqUVuhARxxLbUOv-LrHJE/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
    </iframe>
</div>

## Twitter 專案點評

### 評審切入點

在結業式中，評審們以**業界角度對 Junior 的期待**訂出審核標準，並詳細描述了切入點和角度，透過此標準對各小組進行點評 & 建議：

## 前端

- 環境設定
    - `eslint`
        - 程式碼縮排規則不一問題、coding styles 問題
        - 請移除不需要的 console.log，以及沒有用到的變數，建議可以使用一些 lint 工具來讓 coding style 保持一致性。
        - https://eslint.org/docs/latest/rules/no-console
        - https://eslint.org/docs/latest/rules/no-unused-vars
    - `jsconfig.json` 其實可以設定 `paths` 來將 import 中的相對路徑做 alias mapping，減少引入的繁瑣或錯誤（關鍵字：`path alias`）。
- 程式面
    - `API 檔案結構` ：可以直接參考後端開出的 API 路徑來做規劃，不要全部寫在少部分的 api.js 中。
    - `多思考介面狀態同步`：前端在看設計稿時，除了考量切版策略、UI/UX 流程以外，**也要嘗試盤點跨組件狀態溝通上的需求（ex: 跟隨按鈕），再進入程式架構的規劃與撰寫**。
    - `效能與 API 考量`：後台在維護上會有**大量數據**，建議前後端可以共同討論建立 pagination 來**分段拉資料**，前端也可以多往 **virtual/infinite scrolling** 嘗試實作。
        - https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1
        - https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/
    - `axiosInstance` 可以獨立一個檔案定義，然後再提供給其他 `/api/*.js` 使用，架構會更乾淨。
    - UI 長度限制（Validation 對**資料**的限制 / CSS 對**顯示**上的限制）
    - 當 jsx 有出現很多重複性的邏輯時，很多時候都是要嘗試規劃子組件的時候。
    - React hooks
        - **custom hook 內部其實可以引用 useContext** 做狀態的拆分控制的。
        - useContext 不用拆得太細，**顆粒度掌握可以是情形而定，避免過度設計**。
        - 當 useContext 要控制的狀態越來越長的時候，這時會出現維護性的議題，這時可以需要思考到：
            - 是否有各種不同抽象概念的狀態都在同一個 context 中控制？有的話應該要拆成不同 context
            - 是否有一些共用 functions 可以包成 custom hook 中做拆分管理？
        - useEffect 的dependency 需要注意，可能會造成多次rerender以及畫面閃爍。
- UX
    - 連結點擊範圍的考量，ex: 一個頭像＋人名，如果只有頭像可以導頁，似乎有點詭異？
    - 個人資料頁在頁面資料載入前，許多組會有空白頁的情形，因為圖片尚未載入，建議在此階段可以擺上圖片的 placeholder，並且讓圖片區塊在圖片還沒載入前一樣可以保持高度不變，不然頁面在載入的過程會有很大的版面位移的問題，在使用體驗上是不好的！
    - 使用者操作的成功與否(e.g. 上傳圖片 & 點擊提交推文)，建議在 UI 上**都要有**適當的反應變化來給使用者提示（loading / notification），**讓使用者知道當前處理狀態**。
        - 這次有許多組沒有考量到尚未要到資料以前的 Loading UI，造成在等待後端回傳資料以前畫面定格，會以為壞了…

## 後端

- 在一次取得多筆資料的相關 API 路由中，可以思考加入分頁邏輯，避免一次大量從資料庫取得所有資料。
- 在使用 raw sql 查詢資料時，要注意 sql injection 的發生，使用 attributes 來取得所需欄位，使用 include 取代 exclude，避免後續增加欄位時，在未預期的情況下造成敏感資料暴露。
- 使用 error-handler 來統一處理 exception 錯誤做得很好，但要注意暴露伺服器邏輯的情況，建議在可預期的錯誤，例如：輸入資料驗證未通過、資料不存在…等，可以直接依據錯誤情況回傳錯誤訊息及狀態碼，而非直接 throw Error，或是在 error-handler 如果有加入依據 status 屬性回傳，也要注意 throw Error 時，error object 要加入對應 status value
- 錯誤回傳直接使用 error 的 message 及 name properties 時，可能會導致伺服器邏輯暴露
- 建議可以切出 controller/service 層，並將資料驗證放在 controller，service 專注資料處理邏輯，在日後維護時，在對應的程式/檔案中實作邏輯，debug 也可以更快找到錯誤位置（如資料驗證相關錯誤可以直接到 controller 排除）

## 全端

- 當同學在處理從資料庫拉回來的資料時，像是 **計數 (count)**、**排序 (sort) 與過濾 (filter)** 這些操作，都可以透過 Sequelize 的 Aggregate 或 Raw SQL (但要注意 [SQL injection](https://sequelize.org/docs/v6/core-concepts/raw-queries/#bind-parameter)) 來完成，效能較好，也不容易出錯。
- 開發 api 時，要注意 api 回傳的 [http status code](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status)，不建議將所有錯誤都放到最後的 error handler 來處理，容易讓 api 的使用者混亂，或至少要將 render page 與 api 的錯誤處理分開。
- 記得用 sequelize 的 transaction，當你今天要同時刪除「推特」、「推特的回覆」以及「推特的 like」的時候，要把這三個操作都包到同一個 transaction，如此一來，若其中一個操作失敗了，資料會退回到 transaction 執行之前的狀態，以防止資料出錯。
- 太過冗長的資料驗證會讓 Controller 變得難以閱讀，可以額外用 validation middleware 來處理，POST Body 和 使用者權限都可以用此方式來驗證。
- 實作時，若能維持一樣的 coding style，程式碼品質會有顯著的提升，這部分除了事前與組員溝通外，也可以利用 lint, prettier 等工具來檢查，並確實做到 peer review，不只是互相檢查 style 與程式碼，也是同步彼此進度的好方式。
- 因為每個動作都會重新載入網頁，前端可以用一些小技巧來提升使用者體驗，像是記錄使用者的捲軸位置，或是在按下按鈕後，加入一些小動畫讓使用者知道他的請求正在執行中。
- 前端在開發時，需要注意設計稿沒有出現的邊緣狀況，像是使用者的名稱太長或 tweet 內容太長是否會造成畫面破版、換行等 ⋯⋯


## 回顧與成長，最後一哩路

恭喜同學們即將畢業，給這段日子辛苦的自己一點掌聲和擁抱吧🎉

雖然各自加入 AC 的時間不同，但相信有許多同學一路互相觀摩，到現在一起完成 twitter 專案，離轉職工程師越來越近了！

期待之後還能在社群看到同學分享生活上、或是當工程師的酸甜苦辣，也希望我們這幾個月帶給同學的，不只是技術力的提升，還有 AC 一直以來想要傳達的學習能力及心態，希望這些習慣、行為的建立，可以幫助大家在未來生活中或職場上，能夠更順利！

<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/18420/_____2021-12-17___15.06.15___.png">

#### 接下來你可以...

* **Twitter 參賽小組**
    * 完成 [A6: 解決問題 & 工具應用](https://lighthouse.alphacamp.co/courses/80/assignments/2868)
    * 完成 [A7: Twitter 開發過程反思部落格](https://lighthouse.alphacamp.co/courses/80/assignments/2873)
    * 360 review 會於 9/14（四）陸續寄送到同學信箱
    * 還沒與導師約 Office hour 的小組也別忘記囉！
* **所有同學**：完成畢業技術考/ 畢業部落格

<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/18419/_____2021-12-17___14.46.24___.png">

<!-- #### 評分標準

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;">  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/618794545?h=54c6dfe47a&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allowfullscreen></iframe></div>
<div style="height: 16px;"></div> -->

---

# 09/08 Twitter 結業式 - Highlights

昨日的 Twitter 結業式落幕，同學們也即將走完在學期三的最後一哩路！

除了邀請到陣容強大的評審團隊，來幫 Twitter 專案做全方位的檢視和評論，教練團隊也和同學們一起回顧了這幾個月的成長，以及叮嚀同學接下來須完成的事項！

現在就去看看精彩的會後錄影吧 ➡️ [Twitter 結業式 -- 2023 / 07 月班會後精華](https://lighthouse.alphacamp.co/courses/80/units/29052)

<br>

<!-- <div style="width: 100%; background-color: #f2dede; padding: 8px">
 
📣 挑戰功能進度勘誤：Vince 組（Chaco、小鹿Kerwin、Ya Chu）挑戰功能進度為 **挑戰二 Lv3**，教練團隊在簡報誤植進度，在此更正 🙏

</div> -->

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>