天氣 Bike 小幫手

01 / Context

背景與需求

02 / Challenge

需要解決的問題

1. C1

   整合多個第三方 API

   YouBike 與中央氣象署 API 提供的資料格式與欄位定義不同，若直接使用將增加後續維護成本，同時也需要考量 API 請求失敗或資料異常情況。

2. C2

   聊天流程設計

   使用者無法像網站一樣透過導覽列操作，若功能過多容易增加學習成本。

3. C3

   多城市資料整合

   不同城市的 YouBike API 結構與資料格式存在差異，增加資料處理與維護難度。

03 / Decision

技術方案與取捨

1. C1 → Data Integration

   建立資料轉換層，統一資料結構與回傳格式，並加入錯誤處理機制，提升系統穩定性與維護性。

   • Node.js
   • Express

2. C2 → User Experience

   設計功能選單與關鍵字觸發流程，搭配 Flex Message 呈現資訊，提供更清晰的操作體驗。

   • LINE Bot SDK
   • Flex Message

3. C3 → Data Normalization

   建立統一資料格式與轉換邏輯，將不同來源資料整理成一致結構，讓後續功能擴充更加容易。

   • Node.js
   • API Integration

技術組成

backend

Node.js · Express · LINE Bot SDK

api

YouBike API · 中央氣象署 API

messaging

Flex Message · Rich Menu

04 / Implementation

實作過程

1. F1

   YouBike 站點查詢

   快速取得附近 YouBike 站點資訊，包含可借車輛數量與剩餘停車格資訊。

   • 站點查詢
   • 車輛數量顯示
   • 空位資訊顯示
   • 多城市支援
2. F2

   天氣預報查詢

   查詢即時天氣與未來天氣預報，協助使用者規劃通勤與外出行程。

   • 即時天氣
   • 3 小時預報
   • 3 天預報
   • 1 週預報
3. F3

   LINE 互動體驗

   利用 Flex Message 與功能選單，提供更直覺的聊天式操作體驗。

   • 關鍵字觸發
   • 功能選單
   • Flex Message
   • 圖文訊息互動

實際畫面

點擊放大檢視，可用左右鍵或滑動切換。

05 / Validation

測試與驗證

• 撰寫小型腳本實際呼叫 YouBike 與天氣 API，確認回傳的資料格式
• 在 LINE 上操作關鍵字與功能選單，確認回覆內容
• 目前沒有自動化測試，以手動測試為主

06 / Reflection

限制與後續