# [Log]_Live-3nd_THE.F2E.2021

###### tags: `real-time`

-  [](/NnRXflOUS4WtC0iejCwb2g?both)

---

::: warning

- **【晚間預告-QA】**
- 大家可以去看設計稿來提問

- **【給大家許願】** 想看哪些實作示範資料
- https://www.hexschool.com/2021/12/09/2021-12-09-2021-frontend-salary/

---

- **【下午預告】**
1. 整理動態
2. 站序

---

- **【流程預告】**
- https://hackmd.io/@hexschool/S1NRKXB3Y#今日行程

---

- 不會一口氣直接演示很厲害的程式碼
- 會給大家比較好懂的方式去理解步驟

:::

---

[TOC]

---

:::info

- <span style="color: #000;
font-weight: bold;
background: #76b0f3;
border-radius: 8px;
padding: 3px 2px;">【Week14.SP3_END】</span>

- 【**主要連結**】
- **【課堂講義】**
https://hackmd.io/@hexschool/S1NRKXB3Y [target=_blank]

- 【**THE.F2E.2021**】
- **【活動網站】** https://2021.thef2e.com
- **【資源手冊】** https://hackmd.io/@hexschool/HkV1Nq1vK/
- **【賽前免費教學清單】** https://www.youtube.com/playlist?list=PLYrA-SsMvTPPyE4p7IE2bjjHog1gVBzZb
- **【攻略課程介紹】** https://www.hexschool.com/2021/12/02/2021-12-02-the-f2e-js-course/
- **【目前章節列表】** https://courses.hexschool.com/courses/enrolled/1599204

:::

:::warning
- **預計 tag**
- ==`#TODO`==：待補完
- ==`#QA`==：問答

:::

---

## Summary

---
---

## 【1-1_Round-AM_Part-A】

>
> 【1_Round-AM】
> [time=Sat, 08, Jan, 2021 10:00 12:20] [color=#EB9486]
>

### [10:15]_流程圖講解

>
> - https://whimsical.com/Kx2DBwjV6EW6WaxXgyaS2r@2Ux7TurymNCokg2LqRpz
>

<iframe style="border:none" width="700" height="400" src="https://whimsical.com/embed/Kx2DBwjV6EW6WaxXgyaS2r@2Ux7TurymMwsmam8WGm5"></iframe>

---

#### API 設計為何要拆開好幾個

- 因為像右側的資料是比較固定的
- 後端去把他拆開可以減少伺服器負擔


---

#### API 設計溝通

- 前端、後端要共同討論

---

### [10:25]_CodePen-API

>
> - https://hackmd.io/@hexschool/S1NRKXB3Y#公車-API
> - https://codepen.io/hexschool/pen/eYGVMLv
>

#### API 差異


- 逐筆：`Stream...`

- 批次：`P...`

- 先研究 API 資訊再去實作程式

---

- ==`#QA`==:
- 今日先不講那麼複雜

---

### [10:40]_撈取即時動態

- 重點資訊


1. 整理來回
2. ==`#TODO`==

---

### [10:51]_關鍵-`ID`

- 資料庫都是用獨一無二的 `ID` 去撈資料
- `StopUID`


- ==`#QA`==:
- 是的，所以要去撈公路總局的 API
- 

---

### [10:55]_QK-time

---

## 【1-2_Round-AM_Part-B】

- 逐筆更新的支援縣市比較少
- 建議可用【批次更新】的 API

---

### [11:02]_介紹【程式解題】課程

- 一起期待ㄅ


---

### [11:05]_3.2 搭配站位 + 即時動態之 API 整合

>
> - https://hackmd.io/@hexschool/S1NRKXB3Y#公車-API
> - https://codepen.io/hexschool/pen/LYzmPZw
>

---

### [11:07]_Code

- `datalist`
- 可以去搜尋


---

#### LIVE-魔咒

- 可能 `port` 開太多惹

---

### [11:10]_簡單演示預期畫面


- 早場流程

- 預告下午場流程

---

### [10:14]_實作搜尋


---

### Step1-初始化

- 之後再依據功能去寫函式



- 先用 `init()` 把畫面需求的功能封裝起來
- 接著再去延伸內部的撰寫

- 過程裡利用【小步測試】慢慢前進



---

### [11:23]_組裝字串

- 也可以先到 `HTML` 去測試結構
- 再回 `JS` 補完

- 過程中不斷利用【小步測試】去觀察自己有沒有要到資料
- 結束後要上線時記得要把 `console.log()` 清乾淨



---

### [11:30]_DOM-位置


- 要放哪裡的判斷方式：
- 可讀性
- 使用頻率

- 很多地方要用到
- 抽出來放 1

---

### [11:31]_實作【公車路線】

### [11:32]_API-講解


- 特色：會有縣市

- 函式撰寫建議：
- 先由 API 提供的工作去下手

- 如何研究 API
- 老師喜歡用自己的面版去觀察
- 但大家要找適合自己習慣的方式

---

### [11:37]_說明-`datalist`


- 如果是 `SSR`
- `name` 需要給後端
- `id` 自己用


---

- ==`#QA`==:
- 可以但比較迂迴

---

### [11:43]_實作-`getCityRoute()`


- 下個步驟：讓函式關聯起來
- 選擇縣市之後
- 只顯示該縣市的公車路線


- 設計程式碼的時候
- 先從初始化下手
- 接著去思考使用者會執行什麼行為

---

### [11:55]_監聽選單



---

- ==`#QA`==：
- 在【THE-F2E-2021】攻略 2nd-Day

- ==`#QA`==：
- 事件監聽放在程式碼的位置？
- 通常置頂或置底
- 因為事件也是函式，JS 會先註冊起來，等使用者動作才會去執行

---

### [11:55]_實作-`getArrivalData()`

- Step1_剛開始可以先寫死

- Step2_流程可以成功運作之後再繼續


- Step3_接著思考需要什麼參數


---

### [12:15]_聊天

- ==`#QA`==：
- 等認為自己真的有需求時，再去買就可以了

>
> - 如果覺得目前價格好像不優惠
> - 可能是因為現階段其實並不需要這款資源
>

#### [12:20]_END

---

## Round-PM

>
> 【2_Round-PM】
> [time=Sat, 08, Jan, 2021 14:00 16:55] [color=#EB9486]
>

### 下午開場

- `common.js`
- ==`#TODO`==：


---

### [14:15]_站序-`getRouteOrderData()`


- 要規劃自己的函式流程

>
> - chat：API 文件不會寫很詳細也是很常見的
>

---

### [14:20]_篩選需要的資料

- 如何開發：
- 先寫死，讓函式可以動起來
- 之後再重構，把需要的參數傳進去


- 為何要拆分來回
- 因為公車路線的來回站點不一定相同

---

### [14:30]_預估到站資料-`getArrivalData()`


- 整理資料
- 過濾出只需要的資料：有在跑的車


---

### [14:40]_資料篩選再分類

- 從現在有在跑的公車裡面
- 再去區分【去程】、【回程】

- 分拆往返資料：`filter`


---

### [14:45]_`findIndex()`

- 預期的需求資料格式：


- `findIndex()`


- 處理去程資料



---

### [14:57]_簡易重構

- 發現有重複的動作
- 整理起來

---

### QK-time

- ==`#QA`==： 
- https://codepen.io/hexschool/pen/PoJBpqa

- ==`#QA`==：
- 原生 JS 或新手建議還是先放全域


- 若要減少全域變數，需要把流程規劃好

### [15:15]_再講解-`findIndex()`

---

### [15:20]_開始合併資料




- 去程：`goStopData()`

- 回程：`backStopData()`


- 去的資料 VS 回的資料


---

### [15:38]_顯示畫面-`renderBusWithRoute()`

- 開發的時候可以先放測試資料
- 減少要一直手動去選


- 同樣的函式去分別顯示往返


---

### [15:58]_讓畫面顯示車牌號碼

---

### [16:05]_顯示預估到站時間

---

### QK-time

- `DEBUG`

- ==`#QA`==： 
- 有

- 可以再開新的陣列去存資料
- 看 StopUID 有沒有撞到的
- 也需要跟 UI 設計師去討論畫面

---

## 【2-3_Round-PM_Part-C3】

### [16:18]_`CS.js`-建立環境

- CDN
- C3.js
- C3.css
- D3.js

- 注意版本
- C3 支援的 D3 版本

- 載入位置


---

### [16:31]_圓餅圖

- 工作也很常用

- 套件也會有自己的事件監聽


- 可以用來做互動

---

### [16:35]_互動示範


- 在選用套件的時候也可以去看他有什麼互動效果

---

### [16:40]_長條圖

- 也可以有動態效果

---

### [16:44]_介紹如何實作薪資圖表

- 可以先作樣式
- 再去思考怎麼組裝需求格式

- 把撈回來的存進自己習慣的格式裡面

- 示範性別分類寫死


- 利用 API 的特性與【物件取值】


---

## Round-Night

>
> 【3_Round-Night】
> [time=Sat, 08, Jan, 2021 20:00 21:20] [color=#EB9486]
>

---

### [20:07]_實作客製化年齡層

- 工作流程
- 先把寫死的假資料把畫面呈現出來
- 跟 UI 溝通是否為預期效果
- 最後再去串接資料

- 小技巧：`unshift` 把標題推進去


---

### [20:20]_如何換成圓餅圖

- ~~客戶的需求沒有止境~~

- 把資料重新整理成圓餅圖需求的格式


---

### [20:28]_挑戰年薪成長折線圖


- 折線圖：`Line Chart`

- `salary` 裡面是區間
- 另外定義把字串改設定為平均數字

- 年資、薪資都是區間

- 預期整理出來的格式

---

### [20:45]_開始處理資料

- 意外資料，裡面是空的
- 下判斷 `return` 踢出去

if (!total[item.company.job_tenure]) {
  return
}

- 下一步：分類亂了
- `Object.keys()` 沒有排序功能
- 加上 `.sort()`

---

### [21:00]_`DEBUG`

- 暫時取消排序的運算
- `console.log()` 回推檢查變數


---

- ==`#QA`==： 
- 增加二次判斷再去處理
- 出現奇怪的資料是很常見的

#### [21:15]_END

---