十分鐘，手把手教你用 Gemini + Zeabur 做一個屬於自己的 APP

3.㩒右上角 "創建API金鑰"。

4.要確保「配額層級」係「第一層級」，如果唔係，就要㩒設定同綁卡。

5.㩒個金鑰連結，複製嗰串以 AIza 開頭嘅字符。

注意API Key要保存好，唔好暴露喺公網上。

第二步：用Gemini整APP

首先我哋開 aistudio.google.com，輸入提示詞，如果想整自己嘅應用，就將呢段提示詞發畀Gemini學習，然後再簡單描述你自己想整嘅應用：

角色與目標：
你是一名資深的前端架構師和AI應用開發者。請幫我構建一個單文件（Single-File）的 React 應用，這是一個具有“拍照識別卡路里”功能的 Progressive Web App (PWA)。

技術棧：
1.Framework: React (使用 Functional Components + Hooks)
2.Styling: Tailwind CSS (追求現代、乾淨、移動端優先的 UI)
3.Icons: Lucide-React
4.AI Model: Gemini

核心功能：
1.相機界面：
主界面是一個全屏的取景框。底部有一個明顯的圓形“快門/上傳”按鈕，支持 <input type="file" capture="environment" /> 調用後攝。
2.實時 Gemini 分析：
（1）核心邏輯：編寫異步函數 analyzeFoodImage(base64Image, apiKey)。
（2）SDK調用：初始化 GoogleGenerativeAI，獲取 gemini-1.5-flash 模型。
（3）Prompt設計：向 Gemini 發送圖片和以下 Prompt："Analyze this image. Identify the food items. Return a JSON object with fields: foodName (string), calories (integer), protein (string, e.g., '20g'), carbs (string), fat (string), explanation (short sentence). Do not use Markdown formatting in the response, just raw JSON."
（4）錯誤處理：處理 API 額度超限或網絡錯誤，給予用戶友好的 Toast 提示。
3.結果展示卡片：
（1）解析 Gemini 返回的 JSON 數據。
（2）以精美的半透明磨砂玻璃（Glassmorphism）效果從底部彈出結果。
（3）使用進度條可視化展示三大營養素佔比。
4.PWA 特性：
（1）包含標準的 manifest.json 配置（作為註釋塊提供）。
（2）界面必須適配移動端觸摸操作（Touch-friendly）。
5.設計美學：
（1）配色方案：使用清新的牛油果綠（Avocado Green）和暖白色，傳達健康、輕盈的感覺。
（2）字體：無襯線字體，清晰易讀。
（3）應用的名字為“Silk Kcal”。
6.功能需求：
（1）加入歷史記錄功能，以天為記錄單位記錄每天的卡路里。
（2）飲食目標為增肌、減肥或者保持體重，同時允許用戶輸入每日卡路里攝入的目標值。
（3）每次記錄的時候用戶可以選擇記錄為早餐、午餐、晚餐還是加餐，記錄可以修改。
（4）用戶點擊歷史記錄卡片的時候，可以看到識別時候的詳細信息。
（5）每天的記錄好早餐、午餐、晚餐之後（加餐非選項），出現“分析今日飲食”的按鍵，點擊之後可以分析今日攝入卡路里的情況、改進的意見以及完成目標的情況（增肌、減肥、保持體重）。
（6）用戶可以點擊右上角設置圖標中的選擇記錄卡片按鍵進行全選刪除。
（7）飲食記錄每一天的卡片格式幫我按照早餐、午餐和晚餐的格式排序。
（8）如果識別之後不記錄的話，照片記得幫我同時刷新去掉。
（9）首次使用應用時，添加一個簡短的用戶引導流程，介紹核心功能：拍照識別、歷史記錄和飲食目標設置。
7.輸出要求：
請生成一個完整的 .html 文件（包含 React 和 Babel 的 CDN 連結，以便單文件運行），代碼需要有詳細的註釋，特別是 Gemini API 調用部分。

為咗令佢更加似一個原生App，我加咗 PWA (Progressive Web App) 支援。呢個意味住我哋唔使上架App Store，都可以將佢安裝到手機桌面度。

第三步：用Zeabur部署APP

3.點擊右上角 "創建API密鑰"。

4.要確保“配額層級”是“第一層級”，如果不是，需要點擊設置並綁卡。

5.點擊密鑰連結，複製那串以 AIza 開頭的字符。

注意API Key要保存，不要暴露在公網上。

第二步：用Gemini搭建APP

首先我們打開 aistudio.google.com，輸入提示詞，如果想要製作自己的應用，把這段提示詞發給Gemini學習，接着再簡單描述你自己想要製作的應用：

角色與目標：
你是一名資深的前端架構師和AI應用開發者。請幫我構建一個單文件（Single-File）的 React 應用，這是一個具有“拍照識別卡路里”功能的 Progressive Web App (PWA)。

技術棧：
1.Framework: React (使用 Functional Components + Hooks)
2.Styling: Tailwind CSS (追求現代、乾淨、移動端優先的 UI)
3.Icons: Lucide-React
4.AI Model: Gemini

核心功能：
1.相機界面：
主界面是一個全屏的取景框。底部有一個明顯的圓形“快門/上傳”按鈕，支持 <input type="file" capture="environment" /> 調用後攝。
2.實時 Gemini 分析：
（1）核心邏輯：編寫異步函數 analyzeFoodImage(base64Image, apiKey)。
（2）SDK調用：初始化 GoogleGenerativeAI，獲取 gemini-1.5-flash 模型。
（3）Prompt設計：向 Gemini 發送圖片和以下 Prompt："Analyze this image. Identify the food items. Return a JSON object with fields: foodName (string), calories (integer), protein (string, e.g., '20g'), carbs (string), fat (string), explanation (short sentence). Do not use Markdown formatting in the response, just raw JSON."
（4）錯誤處理：處理 API 額度超限或網絡錯誤，給予用戶友好的 Toast 提示。
3.結果展示卡片：
（1）解析 Gemini 返回的 JSON 數據。
（2）以精美的半透明磨砂玻璃（Glassmorphism）效果從底部彈出結果。
（3）使用進度條可視化展示三大營養素佔比。
4.PWA 特性：
（1）包含標準的 manifest.json 配置（作為註釋塊提供）。
（2）界面必須適配移動端觸摸操作（Touch-friendly）。
5.設計美學：
（1）配色方案：使用清新的牛油果綠（Avocado Green）和暖白色，傳達健康、輕盈的感覺。
（2）字體：無襯線字體，清晰易讀。
（3）應用的名字為“Silk Kcal”。
6.功能需求：
（1）加入歷史記錄功能，以天為記錄單位記錄每天的卡路里。
（2）飲食目標為增肌、減肥或者保持體重，同時允許用戶輸入每日卡路里攝入的目標值。
（3）每次記錄的時候用戶可以選擇記錄為早餐、午餐、晚餐還是加餐，記錄可以修改。
（4）用戶點擊歷史記錄卡片的時候，可以看到識別時候的詳細信息。
（5）每天的記錄好早餐、午餐、晚餐之後（加餐非選項），出現“分析今日飲食”的按鍵，點擊之後可以分析今日攝入卡路里的情況、改進的意見以及完成目標的情況（增肌、減肥、保持體重）。
（6）用戶可以點擊右上角設置圖標中的選擇記錄卡片按鍵進行全選刪除。
（7）飲食記錄每一天的卡片格式幫我按照早餐、午餐和晚餐的格式排序。
（8）如果識別之後不記錄的話，照片記得幫我同時刷新去掉。
（9）首次使用應用時，添加一個簡短的用戶引導流程，介紹核心功能：拍照識別、歷史記錄和飲食目標設置。
7.輸出要求：
請生成一個完整的 .html 文件（包含 React 和 Babel 的 CDN 連結，以便單文件運行），代碼需要有詳細的註釋，特別是 Gemini API 調用部分。

為了讓它更像一個原生 App，我加上了 PWA (Progressive Web App) 支持。這意味着我們不需要上架 App Store，也能把它安裝到手機桌面上。

第三步：使用 Zeabur 部署APP