[side project] 今天吃什麼？

Peter Lu

發佈於💻 Software Design

更新於 2025/03/30發佈於 2025/03/30閱讀時間約 3 分鐘

Photo by Jon Tyson on Unsplash

需求

在現代快節奏的生活中，「今天吃什麼」常常成為一個讓我頭疼的問題。每天面對眾多餐廳選擇，很容易陷入決策疲勞。為了解決這個日常煩惱，我設計了一個簡單的餐廳推薦系統，參考交友軟體的左右滑動機制，讓使用者能夠輕鬆選擇餐廳。

系統的核心需求如下：

模仿交友軟體的交互方式，讓使用者能左滑（不喜歡）或右滑（喜歡）餐廳
記錄所有選擇，形成個人化的用餐歷史記錄
使用 Google Sheet 作為後端資料庫儲存餐廳資訊和歷史記錄
使用 JavaScript 實現前端，並整合 Google Apps Script 作為後端
能夠直接從介面新增餐廳

發想過程

在設計初期，我考慮了幾個關鍵功能：

隨機推薦功能：當使用者完全沒想法時，系統能隨機推薦餐廳。
個人化推薦：根據使用者過去的選擇和喜好來優化推薦。
記錄功能：追蹤使用者的用餐歷史，分析喜好模式。

經過重重思考，我決定將交友軟體的左右滑動機制應用到餐廳選擇中，這種直覺的交互方式不僅易於使用，而且能夠快速收集使用者的喜好資料。

我選擇純靜態的 HTML + CSS + JavaScript 開發前端，因為這樣能輕鬆部署在任何網頁伺服器上，而使用 Google Apps Script 和 Google Sheet 作為後端，則能免去建立和維護資料庫伺服器的麻煩。

系統設計結構

前端架構

HTML 負責基本頁面結構，包含三個主要畫面：推薦卡片、歷史記錄和新增餐廳表單
CSS 負責所有樣式和動畫，包括卡片滑動效果
JavaScript 實現所有邏輯功能和與後端的交互

後端架構

Google Sheet 作為資料庫，包含兩個表格：
- Restaurants 表格：儲存餐廳基本資訊
- History 表格：記錄使用者的選擇
Google Apps Script 作為後端 API，提供幾個主要功能：
- 獲取所有餐廳資料
- 獲取歷史記錄
- 新增餐廳
- 儲存使用者選擇

資料流程

前端頁面載入時，通過 API 請求獲取餐廳資料
使用者左右滑動做出選擇，選擇結果發送到後端存儲
歷史記錄頁面展示所有過去的選擇
使用者可以從介面新增餐廳，資料傳送到後端存儲在 Sheet 中

實作過程

前端實作

主畫面設計：創建一個可左右滑動的卡片，顯示餐廳名稱、類型和地址等資訊
滑動機制：實現觸控和滑鼠的滑動事件處理，添加視覺反饋
歷史記錄頁面：設計一個直觀的列表，展示過去的選擇
餐廳新增表單：使用下拉選單選擇餐廳類型，確保資料一致性

後端實作

Google Sheet 設計：設計兩個表格的結構，包括所有必要欄位
Google Apps Script 開發：
- 實現各個 API 端點
- 處理各種請求類型（GET、POST）
- 確保資料安全性和完整性

整合連接

使用 JavaScript 的 fetch API 與後端連接，處理資料的傳送和接收。由於 CORS 限制，我最終採用 JSONP 和表單提交方式繞過這些限制。

實作中遇到的問題及解決方案

1. CORS 跨域問題

問題描述：當前端嘗試向 Google Apps Script 發送請求時，遇到了跨來源資源共享 (CORS) 的限制，導致無法正常獲取資料。

錯誤信息：

"API 錯誤詳情:" "無法讀取響應內容，請檢查 CORS 設置"

解決方案：

對於 GET 請求，採用 JSONP (JSON with Padding) 技術：
- 創建一個動態的 <script> 標籤
- 通過 URL 參數傳遞回調函數名稱
- Google Apps Script 返回執行這個回調函數的 JavaScript
對於 POST 請求，採用表單提交方式：
- 動態創建並提交表單到隱藏的 iframe
- 通過表單欄位傳遞數據
- 這種方式不受跨域限制

2. Google Apps Script 資料存取問題

問題描述：嘗試使用 SpreadsheetApp.openById() 時遇到權限問題。

錯誤信息：

"歷史記錄加載成功:" 
{
  "success": false,
  "message": "獲取歷史記錄失敗: Exception: Unexpected error while getting the method or property openById on object SpreadsheetApp."
}

解決方案：