不知不覺，30 天的鐵人賽終於來到最後一天！

從最初選擇題目、規劃網站功能，到實際建立網頁、串接 AI API，再到最後的測試與部署，這段時間讓我對 AI 和網頁開發有了更多認識。

今天就來回顧這 30 天的成果。

一、為什麼選擇 AI Recipe？

一開始選擇這個題目，是因為「今天要吃什麼」其實是很常見的生活問題。

有時候冰箱裡明明有很多食材，卻不知道可以組合成什麼料理。

因此，我希望透過 AI 技術，建立一個可以根據現有食材提供料理建議的網站。

二、30 天學到了什麼？

這次實作讓我接觸到許多不同的技術：

第一階段：網頁基礎

學習 HTML、CSS 和 JavaScript，建立網站架構、調整畫面和加入互動功能。

第二階段：AI 與 API

認識 API 的運作方式，透過 Dify 建立 AI 應用，並使用 Prompt Engineering 改善 AI 回答。

第三階段：功能整合

將 AI 回傳的資料顯示在網站上，加入載入提示、錯誤處理、料理篩選和收藏功能。

第四階段：網站完善

學習 API 金鑰保護、RWD 響應式設計、網站部署和功能測試。

三、實作過程中遇到的困難

開發過程並不是每一步都很順利。

例如：

• 一開始不熟悉 HTML、CSS 和 JavaScript 的分工。
• API 串接時需要理解請求和回傳資料。
• AI 回答格式不固定，需要透過 Prompt 調整。
• 前端和後端需要正確傳遞資料。
• 部署時還要處理環境變數和伺服器設定。

這些問題讓我了解到，完成一個網站並不是把程式碼寫出來就好，還需要不斷測試和修正。

四、未來還能加入哪些功能？

目前的 AI Recipe 還有很多可以改進的地方，例如：

1. 加入料理圖片。
2. 增加更多料理類型。
3. 提供更完整的食材替代建議。
4. 加入個人化飲食偏好設定。
5. 建立使用者帳號，讓收藏可以跨裝置保存。
6. 增加食譜分享功能。

未來如果有更多時間，希望能繼續改善網站，讓它不只是課程中的實作作品，而是真正方便使用的小工具。

五、30 天心得

這次鐵人賽最大的收穫，就是從一開始只有一個想法，到最後能夠逐步完成一個結合 AI 與網頁技術的專案。

過程中學到的不只是程式語法，也包含如何拆解問題、規劃功能、查找資料和修正錯誤。

我也更了解 AI 並不是只能透過聊天視窗使用，而是可以透過 API 整合到自己開發的應用程式中，成為解決日常問題的一種工具。

30 天的挑戰到這裡告一段落！

從「今天不知道吃什麼」，到完成自己的 AI Recipe 網站，這就是我這次鐵人賽最大的成果。🍳🤖