The F2E 台灣旅遊景點導覽

# 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