[side project] 今天吃什麼？

Photo by Jon Tyson on Unsplash

需求

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

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

發想過程

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

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

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

系統設計結構

前端架構

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

後端架構

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

資料流程

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

實作過程

前端實作

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

後端實作

1. Google Sheet 設計：設計兩個表格的結構，包括所有必要欄位
2. Google Apps Script 開發：
3. • 實現各個 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."
}

解決方案：

• 確保 Google Apps Script 使用正確的部署設置：
• • 部署時選擇「以您的身分執行」而非「以存取網頁的使用者身分執行」
  • 確保試算表 ID 正確無誤
  • 重新授權應用訪問 Google Sheet

最終成果

1. 直覺的使用者介面：左右滑動選擇餐廳，模仿交友軟體的體驗
2. 完整的歷史記錄：記錄所有選擇，方便回顧
3. 簡單的餐廳管理：直接從介面添加新餐廳
4. 無伺服器架構：使用 Google Apps Script 和 Google Sheet 作為後端，無需管理伺服器
5. 響應式設計：適配不同設備，從手機到桌面都有良好體驗

小小心得

在實作過程中，遇到了各種技術挑戰，尤其是跨域的問題，這促使我探索和學習了更多前端技術解決方案。最終我採用了 JSONP 和表單提交的方式，成功繞過了 CORS 限制。

這個專案的一個關鍵優勢是使用了 Google 的雲端服務作為後端，大大簡化了部署和管理。對於個人專案或小型應用來說，這種方式非常適合，既節省成本又容易維護。（這次幾乎都是用AI快速產生程式來實作的POC結果，懶得弄部署雲端資料庫所以才用GAS XD）

未來，可以考慮添加更多功能，如基於歷史記錄的智能推薦算法、社群共享功能等，進一步提升用戶體驗。甚至可能會轉會成前後端系統（如果真的很好用的話XD）