前幾天已經完成店家搜尋、取得店家資料，以及取得 Google Maps 評論。
到了 Day 18，開始進入這個專案最重要的部分：
讓網站取得的評論交給 Gemini 分析。
原本規劃的流程是：
Google Maps 店家
↓
取得店家評論
↓
整理評論資料
↓
建立 Prompt
↓
Gemini API
↓
AI 分析評論
↓
產生避雷報告

今天實際操作後，才發現 AI API 串接並沒有想像中單純。
除了要處理 API 的呼叫方式，也遇到了 Gemini 回傳串接失敗的問題，以及 JavaScript Prompt 格式造成的錯誤。
所以今天除了完成 Gemini API 串接，也把實際遇到的錯誤一起記錄下來。

開始串接 Gemini API

前面 Day 17 已經可以取得店家的評論。
這次我先使用之前建立好的 Gemini API Key，讓網站可以向 Gemini 發送分析請求。
在 report.js 中先設定 Gemini：
const GEMINI_API_KEY = "你的 Gemini API Key";
const MODEL_NAME = "gemini-3.8-flash";

接著初始化 Gemini：
const ai = new GoogleGenAI({
apiKey: GEMINI_API_KEY
});

我這裡的 API Key 不會放在公開文章中，實際專案中也要注意 API Key 的安全性。

把取得的評論整理成 Prompt

有了評論資料之後，下一步就是把評論整理成 Gemini 可以理解的格式。
例如目前測試的店家是：
鼎泰豐 A4店
網站目前可以取得 5 則評論，因此我先將每一則評論編號：
評論 1：......
評論 2：......
評論 3：......
評論 4：......
評論 5：......
再將這些評論放進之前寫的 Prompt。
這樣 Gemini 收到的就不只是「請分析評論」，而是可以知道：
哪一家店
店家地址
有哪些評論
希望分析哪些項目
最後要用什麼格式回傳

呼叫 Gemini

完成 Prompt 後，就開始測試 API。
原本以為只要成功呼叫 Gemini，就可以直接看到 AI 分析結果。
但剛開始測試就遇到了問題，出現了呼叫失敗。
Console 出現：
503 Service Unavailable

所以接下來我先確認前面的資料取得流程。
Google Maps 的店家資料可以正常取得，評論也確實有成功抓到。
從上面圖中Console 中可以看到：
店家名稱：鼎泰豐 A4店
評論數量：5

代表 Google Maps → 評論資料這一段沒有問題。
接下來再確認 Gemini API 的請求。
最後發現請求確實有送出去，但 Gemini 回傳：
503 Service Unavailable

所以問題並不是前面的評論取得失敗。

繼續測試 Gemini

為了確認問題是不是特定 Model 造成的，我也嘗試更換不同的 Gemini Model。
結果怎麼換都還是失敗。

這時候我才比較確定，這次遇到的問題不單純是自己的評論資料或 Prompt 寫錯。
也因此了解到，串接外部 API 時，除了自己的程式碼之外，也可能遇到 API 服務本身暫時無法使用的情況。

過程中除了呼叫不到Gemini，還遇到 JavaScript 錯誤
在修改 Prompt 的過程中，我又遇到了另一個錯誤：
Uncaught SyntaxError:
Unexpected identifier 'json'
當時我的 Prompt 裡面有 JSON 格式的說明，如果字串沒有正確處理，JavaScript 會把部分內容當成程式碼解析。
最後改成使用 Template Literal：
const prompt = `
請分析以下店家評論：

${reviewText}

請回傳 JSON 格式。
`;

利用反引號 ` 包住整個 Prompt，就可以比較方便地放入多行文字以及變數。
修改後，JavaScript 的 SyntaxError 就消失了。

加入錯誤處理

經過這次測試，我也發現 API 串接不能只考慮「成功」。
如果 Gemini API 暫時無法使用，網站還是應該要有處理方式。
因此我加入 try...catch：
try {

// 呼叫 Gemini API

} catch (error) {

console.error("Gemini 分析失敗：", error);

}

這樣如果 API 發生錯誤，就可以在 Console 中看到錯誤資訊，而不是讓整個網頁直接停止。
目前也加入了備援的評論分析方式。
當 Gemini 暫時無法使用時，網站會改用目前已經取得的評論進行基本分析，至少讓避雷報告頁面還可以正常顯示。

最後今日進度

經過多次修改
後來用本地分析的方式
最後終於生成出報告
但是內容正確度還有疑慮，而且也還沒成功串接
因為只取得5則評論，卻寫有17則評論提到相關內容
之後將會繼續排錯

今天的學習

雖然今天沒有完全按照原本預想的「呼叫 API → 馬上得到漂亮報告」這麼順利，但這些錯誤反而讓我更了解 API 串接實際會遇到的問題。
原本以為串接 Gemini API 最難的地方會是寫程式，但實際操作後發現，真正花時間的是排錯。
像這次的 503，一開始我一直在懷疑是不是自己的程式寫錯。
後來一步一步確認：
評論有沒有成功取得？
↓
Prompt 有沒有建立？
↓
API Request 有沒有送出？
↓
Model 是否正確？
↓
Gemini 有沒有正常回應？

才慢慢確認問題所在。
另外，這次遇到 Unexpected identifier 'json'，也讓我注意到 Prompt 本身雖然看起來只是文字，但放進 JavaScript 後，其實也必須符合 JavaScript 的字串語法。