# The F2E 台灣旅遊景點導覽
* [slido](https://app.sli.do/event/n1x7abih) 進行發問

## TDX API 用途
平臺**提供涵蓋全國尺度之公車、臺鐵、高鐵、捷運、航空、自行車**等**公共運輸旅運資料服務 API**，歡迎各產政學單位介接使用。

## 學習重點
* UI 轉成前端應用邏輯思考

## 大綱

1. API 簡介、JS 取值設計
2. 各 UI 範例 Code 介紹
3. 內容補充

## 上半場
## API 介紹
* [API 網址](https://tdx.transportdata.tw/api-service/swagger)，分別有觀光、自行車、公車動態
* [PTX API 官方操作教學](https://docs.google.com/viewer?url=https://github.com/ptxmotc/PTX_Web/blob/master/Swagger%E6%9C%8D%E5%8B%99%E8%AA%AA%E6%98%8E%E4%B8%8A%E5%82%B3%E5%8F%83%E8%80%83%E6%AA%94%E6%A1%88/%E5%85%AC%E5%85%B1%E9%81%8B%E8%BC%B8%E6%95%B4%E5%90%88%E8%B3%87%E8%A8%8A%E5%B9%B3%E5%8F%B0%E8%B3%87%E6%96%99%E6%9C%8D%E5%8B%99%E9%96%8B%E7%99%BC%E5%AF%A6%E4%BD%9C.pdf?raw=true)

## TDX API 申請 [網址](https://motc-ptx-api-documentation.gitbook.io/motc-ptx-api-documentation/hui-yuan-shen-qing)
### 流程
1. [YouTube 申請 API 教學](https://www.youtube.com/watch?v=QR15lr82tt4&list=PLYrA-SsMvTPPyE4p7IE2bjjHog1gVBzZb&index=4)
2. [註冊會員](https://ptx.transportdata.tw/PTX/Management/AccountApply)，並選擇一般會員
3. 依照下方欄位填寫，三天後審核成功就會發 Email 信提供 APP ID / KEY

身分類型：加值業者
服務類型：資訊服務業
資料使用用途：程式教學/練習
應用類型：觀光旅遊、網站應用
網址：可先暫填自己的 GitHub 網址或 repo 或 codepen
加值應用、加值應用名稱：加註 「The F2E 活動用、個人練習用」(若能詳述如何應用會更好)
申請服務概述：公車、觀光景點、腳踏車 API等動靜態資料(看要不要說更詳細也可以)

### API 帶 header 驗證範例程式碼
* [範例程式碼](https://codepen.io/hexschool/pen/RwgvZEZ?editors=0010)

> 不帶 APP ID、KEY 還是可以練習，但會有請求次數限制

### JS 取值設計
* [範例程式碼](https://codepen.io/hexschool/pen/LYzGRMj?editors=1010)

## 景點篩選功能
#### 設計師 UI 設計稿
1. [早餐](https://2021.thef2e.com/users/6296427084285739247?week=1&type=1) - 多重篩選、類別點擊設計、內頁設計、日期篩選
2. [jhen](https://2021.thef2e.com/users/6296427084285739194?week=1&type=1) - 分享功能、多重篩選
3. [Tracy](https://2021.thef2e.com/users/6296427084285739806?week=1&type=1) - 多重篩選
4. [Frank Peng](https://2021.thef2e.com/users/6296432819610583736?week=1&type=1) - 多重篩選

## 兩種 API 篩選功能
1. 全撈回來，自己處理
2. 觀看後端是否有 API 能從伺服器進行篩選

### 功能

1. 旅遊列表顯示[HTML](https://codepen.io/hexschool/pen/PoJZrwq?editors=1010)、[完整內容](https://codepen.io/hexschool/pen/KKXVjwm?editors=1010)
2. 縣市篩選對應 API [HTML](https://codepen.io/hexschool/pen/QWqypyZ)、[完整內容](https://codepen.io/hexschool/pen/YzrwZGV)
3. 資料內容過多時，搭配 TDX API 既有功能進行篩選
a. 已知類別([HTML](https://codepen.io/hexschool/pen/rNGxyoe)、[完整內容](https://codepen.io/hexschool/pen/gOGPWPq))
b. 未知類別([HTML](https://codepen.io/hexschool/pen/eYGJvKN)、[完整內容](https://codepen.io/hexschool/pen/JjrGWBW?editors=1010))
4. 內頁換頁設計，搭配網址參數([完整內容](https://codepen.io/hexschool/pen/zYErwmR))
6. 活動日期區間設計 ([HTML](https://codepen.io/hexschool/pen/MWEKoeQ)、[完整內容](https://codepen.io/hexschool/pen/xxXZrOM))
7. 關鍵字搜尋([HTML](https://codepen.io/hexschool/pen/bGoERza)、[完整內容](https://codepen.io/hexschool/pen/WNZrOPz))
8. 離自己最近的景點([HTML](https://codepen.io/hexschool/pen/bGoErBj)、[完整內容](https://codepen.io/hexschool/pen/xxXZLgZ?editors=1010))
9. 離自己最近的景點、餐廳、住宿等。
10. [滿版式 Banner 設計](https://codepen.io/hexschool/pen/ZEXGzex?editors=1100)
11. [Swiper 搭配 API 設計](https://codepen.io/hexschool/pen/jOGPpvX)

### 觀光 API

1. 取得所有觀光景點資料：`/v2/Tourism/ScenicSpot`
2. 取得指定[縣市]觀光景點資料：`/v2/Tourism/ScenicSpot/{City}`

> 兩者資料集撈取的景點資料一樣，但後者可以針對縣市來撈取

### 細節補充

### 提供 QA