前幾天已經完成網站的基本 UI 和操作流程，輸入店家名稱之後也可以進入報告頁面。不過前面的功能其實還是用「模擬資料」來呈現，網站並沒有真的去取得 Google 地圖上的店家資訊。
所以今天開始進入比較重要的一個階段：串接 Google Places API

為什麼需要 Google Places API？

我的「AI 避雷探針」主要是希望使用者輸入店家名稱後，可以找到正確的店家，再進一步分析這間店的評論。
如果只靠使用者輸入文字，可能會遇到一個問題。
例如輸入「鼎泰豐」，Google 地圖上可能會有很多不同分店。如果網站直接把輸入的文字當成店家，就不知道使用者到底想找哪一家。
所以我需要先透過 Google Places API 搜尋店家，讓網站取得可能符合的結果，再讓使用者自己選擇正確的店家。

今天認識的 API：Places API

Google Places API 可以讓網站取得 Google 地圖中的地點相關資訊。
這次主要使用的是 Text Search，讓網站可以透過文字搜尋店家。
例如使用者輸入：「鼎泰豐」
網站就會把這個搜尋文字傳給 Google Places API。
API 回傳資料後，再從結果中取得需要的資訊，
例如：店家名稱、店家地址、Place ID
其中我覺得 Place ID 滿重要的，因為店家名稱可能會重複，但是每一個地點都有自己的識別 ID。之後如果要繼續取得這間店的詳細資料或評論，就可以利用這個 ID 來辨識店家。

今天實際怎麼做？

首先先在 Google Cloud 建立專案，啟用需要使用的 Places API，並建立 API Key。
接著在原本的網站 JavaScript 裡加入 API 請求。
這次使用的是：
https://places.googleapis.com/v1/places:searchText
網站會把使用者輸入的店家名稱放進請求裡，再把 API 回傳的資料接回來。
原本按下「開始分析」之後，只會顯示：「目前準備分析：鼎泰豐」
現在則改成真的搜尋店家。
搜尋之後，如果找到多個結果，就把結果顯示在網站上，讓使用者自己選擇。
例如可能會看到：
鼎泰豐 ○○店
地址：台北市……
鼎泰豐 ○○分店
地址：台北市……
使用者確認後，網站才會記錄這間店。

過程中遇到的問題

今天實作時其實沒有一次就成功。
第一次測試 API 的時候，JavaScript 的 fetch 出現錯誤，原本以為是 API 本身沒有開啟，後來才發現是 API 請求設定裡的內容有問題。

修改之後重新測試，才成功拿到 Google Places API 回傳的資料。
另外也發現一個原本沒有想到的問題，就是「同名店家」或「不同分店」的情況。
如果使用者輸入的名稱很常見，API 可能會回傳好幾個結果。
所以不能搜尋到第一個結果就直接進入分析頁面，而是需要增加「店家確認」這個步驟。
這也讓我重新調整了原本的網站流程：
輸入店家
↓
搜尋店家
↓
顯示搜尋結果
↓
使用者確認店家
↓
取得 Place ID
↓
進入後續分析

今天實作的流程

使用者輸入：「鼎泰豐」
↓
網站將店家名稱送給 Google Places API
↓
API 回傳搜尋結果
↓
網站顯示可能符合的店家 從圖中可以看到找到了10家


↓
使用者選擇需要的店家，我選擇了鼎泰豐 A4店
↓
取得店家名稱、地址與報告
這樣就可以避免輸入「鼎泰豐」時，因為有很多分店而直接選錯店家。
但報告內容目前仍是模擬資料，因為尚未串接Gemini。

今天算是讓「AI 避雷探針」從單純的網頁介面，開始真正和外部資料連接起來。

今天完成的功能

經過今天的修改，目前已經完成：
✅ 串接 Google Places API
✅ 可以輸入店家名稱搜尋
✅ 可以取得 Google 回傳的店家資料
✅ 顯示店家名稱與地址
✅ 可以同時顯示多個搜尋結果
✅ 使用者可以選擇正確的分店
✅ 儲存選擇的店家資訊與 Place ID
✅ 選擇完成後進入下一個頁面

今天最大的感覺是，網站開始從「做出一個看起來可以操作的介面」，慢慢變成「真的可以取得資料的網站」。
前幾天很多功能都是先用假資料測試，所以比較容易完成。但開始串 API 之後，就會遇到 API Key、請求格式、回傳資料以及錯誤處理等問題，也讓我比較了解實際開發網站時，不是把畫面做出來就結束了。
目前店家搜尋已經可以正常運作，下一步就要想辦法取得這間店的評論資料，再把評論整理後交給 Gemini 分析。
這樣才會真正進入「AI 避雷探針」最核心的功能。