---
# System prepended metadata

title: '[Log]_Live-3nd_THE.F2E.2021'
tags: [real-time]

---

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

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


![](https://img.shields.io/badge/Created_Date-08_Jan_2021-orange) 
- ![](http://img.shields.io/static/v1?logo=Pinboard&label=Edit&message=➦&style=style=flat) [![hackmd-github-sync-badge](https://hackmd.io/NnRXflOUS4WtC0iejCwb2g/badge)](/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 設計為何要拆開好幾個

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

![](https://i.imgur.com/bktt7RD.png)

---

#### API 設計溝通

- 前端、後端要共同討論

---

### [10:25]_CodePen-API

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


#### API 差異

![](https://i.imgur.com/13wHqv4.png)


- 逐筆：`Stream...`

- 批次：`P...`

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


---

- ==`#QA`==:
![](https://i.imgur.com/FeI6Odo.png)
    - 今日先不講那麼複雜

---

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

- 重點資訊

![](https://i.imgur.com/KONbkCl.png)


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

---

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

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

![](https://i.imgur.com/lSVJwVu.png)


- ==`#QA`==:
![](https://i.imgur.com/NB4Zuf4.png)
    - 是的，所以要去撈公路總局的 API
    - ![](https://i.imgur.com/keVjoCs.png)



---

### [10:55]_QK-time

---

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

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

---

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

- 一起期待ㄅ

![](https://i.imgur.com/v7CBrIr.png)

---

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

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


---

### [11:07]_Code

- `datalist`
    - 可以去搜尋

![](https://i.imgur.com/ZY1Au0V.png)

---

#### LIVE-魔咒

- 可能 `port` 開太多惹


---

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

![](https://i.imgur.com/5Oj7nCT.png)


- 早場流程
![](https://i.imgur.com/Jx7fBkV.png)

- 預告下午場流程
![](https://i.imgur.com/6N9F706.png)


---

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

![](https://i.imgur.com/GMD96ox.png)


---

### Step1-初始化

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

![](https://i.imgur.com/kEYElPy.png)

![](https://i.imgur.com/69zTtbg.png)


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

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

![](https://i.imgur.com/CpSJFqu.png)

![](https://i.imgur.com/ypVeO20.png)


---

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

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

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

![](https://i.imgur.com/GAonDWR.png)

![](https://i.imgur.com/DfmghDb.png)


---

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

![](https://i.imgur.com/20ziU7l.png)

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

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

---

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

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

![](https://i.imgur.com/NGGhaKd.png)

- 特色：會有縣市

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

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


---

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

![](https://i.imgur.com/YwOxxwv.png)



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

![](https://i.imgur.com/GYkogFH.png)


---

- ==`#QA`==:
![](https://i.imgur.com/j3yV3cq.png)
    - 可以但比較迂迴

---

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

![](https://i.imgur.com/AONk3YC.png)


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

![](https://i.imgur.com/TvkoA3H.png)


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


---

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

![](https://i.imgur.com/v8lzX61.png)

![](https://i.imgur.com/IoUzt8R.png)



---

- ==`#QA`==：
![](https://i.imgur.com/nv2W3qR.png)
    - 在【THE-F2E-2021】攻略 2nd-Day 

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

---

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

- Step1_剛開始可以先寫死

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

![](https://i.imgur.com/ll6fKOJ.png)


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

![](https://i.imgur.com/82AVKnM.png)

---

### [12:15]_聊天

- ==`#QA`==：
![](https://i.imgur.com/noU4IGF.png)
    - 等認為自己真的有需求時，再去買就可以了


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


#### [12:20]_END


---

## Round-PM

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


### 下午開場

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

![](https://i.imgur.com/jO6kamO.png)

---

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

![](https://i.imgur.com/1tYcwkN.png)


- 要規劃自己的函式流程

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


---

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

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

![](https://i.imgur.com/FusKSfZ.png)


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

---

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

![](https://i.imgur.com/yDwbbgz.png)
 

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

![](https://i.imgur.com/beEbanG.png)


---

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

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


- 分拆往返資料：`filter`

![](https://i.imgur.com/2RVW4FD.png)

---

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

- 預期的需求資料格式：

![](https://i.imgur.com/2mVPGrb.png)


- `findIndex()`

![](https://i.imgur.com/D76tICV.png)


- 處理去程資料

![](https://i.imgur.com/OjX3e3p.png)

![](https://i.imgur.com/C6ROsGc.png)


---

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

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


---


### QK-time

- ==`#QA`==： ![](https://i.imgur.com/sV5EGL1.png)
    - https://codepen.io/hexschool/pen/PoJBpqa


- ==`#QA`==：![](https://i.imgur.com/9S6YHWu.png)
    - 原生 JS 或新手建議還是先放全域

![](https://i.imgur.com/jVxxaaJ.png)

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



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

---

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

![](https://i.imgur.com/msmsXwY.png)

![](https://i.imgur.com/N93GIAg.png)


![](https://i.imgur.com/SfA9bOZ.png)

- 去程：`goStopData()`

- 回程：`backStopData()`

![](https://i.imgur.com/FYhq1u5.png)



- 去的資料 VS 回的資料

![](https://i.imgur.com/G1P7kH7.png)


---

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


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

![](https://i.imgur.com/I0Tw50Y.png)


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

![](https://i.imgur.com/ZN14XLK.png)

---

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

---

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


---

### QK-time

- `DEBUG`


- ==`#QA`==： ![](https://i.imgur.com/TslOS7K.png)
    - 有

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


---

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

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

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

- 注意版本
    - C3 支援的 D3 版本
![](https://i.imgur.com/52apacw.png)


- 載入位置

![](https://i.imgur.com/c9XS0ED.png)

---

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

- 工作也很常用

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

![](https://i.imgur.com/X7vjnCH.png)

- 可以用來做互動

---

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

![](https://i.imgur.com/T1NdVpy.png)

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

---

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

- 也可以有動態效果


---

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

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

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


- 示範性別分類寫死

![](https://i.imgur.com/9lAtijY.png)

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

![](https://i.imgur.com/G7VzOLl.png)



---

## Round-Night

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

---

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

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



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

![](https://i.imgur.com/R9sSfxY.png)


---

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

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

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

![](https://i.imgur.com/Gecdr1y.png)


---

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

![](https://i.imgur.com/dIfqfdk.png)


- 折線圖：`Line Chart`

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

- 年資、薪資都是區間
![](https://i.imgur.com/vzyvawJ.png)


- 預期整理出來的格式
![](https://i.imgur.com/8BCG33D.png)


---

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

- 意外資料，裡面是空的
    - 下判斷 `return` 踢出去
![](https://i.imgur.com/303yL60.png)

```

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

```

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

---

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

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

![](https://i.imgur.com/FJaS515.png)

    
---

- ==`#QA`==： ![](https://i.imgur.com/WCfigW7.png)
    - 增加二次判斷再去處理
    - 出現奇怪的資料是很常見的

#### [21:15]_END

---



