經過前 19 天的努力，我們的「個人用藥追蹤系統」已經擁有漂亮的外觀、流暢的響應式設計，以及乾淨的 Context API 全域狀態管理。但既然專案名稱叫做「AI 智慧用藥監測系統」，如果沒有 AI 的加持，它充其量只是一個比較好看的電子聯絡簿而已。

從今天開始，我們將進入本系列最具挑戰性、也最有趣的部分：串接 Google Gemini API，讓系統能自動分析我們的用藥排程，給予專業且溫暖的建議。

Step 1：申請 Google Gemini API Key
要讓我們的程式與 Google 的 AI 溝通，我們需要一把專屬的鑰匙，也就是 API Key。

1. 請前往 Google AI Studio (Google 官方的 API 申請平台)。
2. 使用你的 Google 帳號登入。
3. 點擊畫面左側的「Get API key」。
4. 點擊「Create API key in new project」按鈕。
5. 稍等片刻，系統會產生一串由英文字母和數字組成的長字串（通常以 AIza 開頭）。
6. 將這串字串複製下來，並妥善保管！（注意：API Key 就像信用卡密碼，絕對不可以公開貼在網路上或放到 GitHub 的公開倉庫裡。）

Step 2：在專案中設定環境變數 (Environment Variables)
剛剛說過，API Key 不能直接寫在程式碼裡，因為一旦推送到 GitHub，全世界都會看到你的鑰匙，萬一被別人拿去狂發請求，甚至會產生高額費用！
在前端開發中，我們通常使用「環境變數 (Environment Variables)」來隱藏這些敏感資訊。
在你的 Vite 專案（Codespaces）中，請按照以下步驟設定：

1. 在專案的「最根目錄」（也就是和 package.json、vite.config.js 同一層的地方），新增一個檔案，命名為：.env。（注意前面有一個小數點）
2. 打開 .env 檔案，輸入以下內容，並將 API_KEY貼在這裡 替換成剛剛複製的字串：
   輸入: VITE_GEMINI_API_KEY=API_KEY貼在這裡

【極度重要】防止意外上傳！
請打開根目錄下的 .gitignore 檔案，這是告訴 Git 「哪些檔案絕對不要上傳到 GitHub」的清單。
請檢查裡面有沒有 .env 這幾個字（通常 Vite 預設的 .gitignore 會自動幫你加上 .local 和 .env）。
如果沒有，請務必手動加上一行：.env。
像這樣

Step 3：建立 AI 服務模組 (Service)
為了保持程式碼乾淨，我們不會把呼叫 AI 的複雜邏輯直接寫在 UI 元件裡。我們會在專案中建立一個專門負責與 AI 溝通的「服務 (Service)」模組。

首先，我們需要安裝 Google 官方提供的 Gemini SDK。在終端機中，輸入以下指令安裝套件：
npm install @google/genai
接著，在 src 資料夾下新增一個名為 services 的資料夾。
在 services 資料夾內，新增一個檔案 aiService.js，並輸入以下程式碼，這是我們用來呼叫 Gemini API 的基礎骨架：


這樣我們後台的資料就輸入完成了。