前幾天已經完成了「AI 避雷探針」的功能規劃，也確定了 Gemini 的分析項目和 JSON 格式。
前面的幾天比較偏向認識工具和規劃功能，今天終於要開始實際製作網站。
今天先不急著串接 Google Maps / Places API 或 Gemini，而是先把最基本的網站畫面做出來。

今天要做什麼？

今天先建立「AI 避雷探針」的首頁。
目前預計會先完成：
網站標題
專案簡單介紹
店家輸入欄位
開始分析按鈕
基本的網頁版面
JavaScript 按鈕互動
之後再慢慢加入 Google Maps / Places API、Gemini 和 JSON。

使用工具

今天主要會使用前幾天介紹過的三個前端技術：

HTML

負責建立網站的內容和結構。

CSS

負責網站的外觀。

JavaScript

負責網站的互動功能。
另外使用 Visual Studio Code 編寫程式，並在瀏覽器中查看網站的實際效果。

今天開始實作

今天先使用 Visual Studio Code 建立網站，將 HTML、CSS 和 JavaScript 分成不同檔案。
目前先完成最基本的首頁，包含：

• AI 避雷探針標題
• 專案簡介
• 店家輸入欄位
• 開始分析按鈕

實際執行畫面

完成基本首頁後，在瀏覽器中開啟網站，可以看到目前製作的首頁。

接著測試輸入店家名稱。
例如輸入：
某某拉麵店
按下「開始分析」後，JavaScript 會先取得使用者輸入的店家名稱。

目前會先顯示：
目前準備分析：「某某拉麵店」
這代表 HTML、CSS 和 JavaScript 已經成功連接。

目前完成的功能

今天先完成：
首頁畫面
↓
輸入店家名稱
↓
按下開始分析
↓
JavaScript 取得輸入內容
目前還沒有真正串接 Google Maps / Places API，也還沒有讓 Gemini 開始分析評論。
這些會留到後面的實作階段。

為什麼今天先不串 API？

雖然前面 Day 5 已經認識 Google Maps / Places API，Day 11、Day 12 也已經完成 Gemini Prompt 和 JSON 的規劃。
但今天如果直接全部串起來，遇到問題時會比較難知道到底是哪個部分出錯。
所以我決定按照：
前端畫面
↓
按鈕互動
↓
Google Maps / Places API
↓
取得店家資料
↓
Gemini
↓
JSON
↓
避雷報告
這樣一步一步完成。
今天先完成最前面的：
前端畫面 → 按鈕互動

今天的學習

今天正式開始製作「AI 避雷探針」。
前幾天比較像是在做準備，先認識 Gemini、API、Firebase、HTML、CSS、JavaScript，並規劃網站流程。
今天則開始把這些規劃慢慢變成實際的網站。
目前先完成：
HTML → 建立網站結構
CSS → 設計網站外觀
JavaScript → 加入基本互動
雖然目前還不能真正分析 Google Maps 評論，但至少已經把網站的第一個畫面做出來了。
接下來就可以繼續把 API 和 AI 功能慢慢加進來。