https://script.google.com/macros/s/AKfycbyN9hmxwzbCLPA9auqi8ahtGjMJc3Xfm5m_FNol9oPpuuC1gPxvq2CZd3p5KK6ekvkY/exec
如何建立一個簡單的 Web App，利用 Google Apps Script 呼叫 Gemini API 產生機器人回應。主要步驟包含：
在伺服器端（Apps Script）撰寫程式碼來呼叫 Gemini API。
建立一個 HTML 前端頁面，讓使用者可以輸入問題並顯示回應。
利用 google.script.run 讓前端與伺服器端溝通。
程式碼解析
1. API 金鑰設定
javascript
複製
var API_KEY = 'AIzaSyDXt03VBtPimebZHZ2Lb_aoyJtTrkCg2jg******';
說明： 將你的 API 金鑰填入此變數，用於 API 的認證。注意：實際部署時應避免將金鑰暴露在公開的原始碼中。
2. doGet 函數
javascript
複製
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index');
}
說明： 當使用者存取 Web App 的 URL 時，此函數會被呼叫，並回傳名為 index 的 HTML 檔案作為網頁內容。
3. generateBotResponse 函數
javascript
複製
function generateBotResponse(userMessage) {
var url = 'https://generativelanguage.googleapis.com/v1/models/gemini-1.5-pro:generateContent?key=' + API_KEY;
var payload = {
contents: [
{role: "user", parts: [{text: userMessage}]}
]
};
var options = {
'method': 'POST',
'contentType': 'application/json',
'payload': JSON.stringify(payload),
'muteHttpExceptions': true
};
try {
var response = UrlFetchApp.fetch(url, options);
var data = JSON.parse(response.getContentText());
if (response.getResponseCode() !== 200) throw new Error(data.error.message);
// 假設回應格式中，回覆存在 data.candidates[0].content.parts[0].text
return data.candidates[0].content.parts[0].text;
} catch (error) {
return '抱歉，出現錯誤：' + error.message;
}
}
說明：
URL 組成： 透過 API_KEY 將請求 URL 組合完成，指向 Gemini API 的 generateContent 端點。
payload： 建立一個 JSON 物件，包含一個 contents 陣列，其中每一個項目代表一段對話（此處只有一個 user 訊息）。
options： 設定 HTTP 請求的相關參數，包含使用 POST 方法、設定內容類型、以及將 payload 序列化為 JSON 字串。
錯誤處理： 若 API 回傳狀態碼非 200，則捕捉例外並回傳錯誤訊息。
回傳內容： 根據 API 回傳格式（假設回應存在於 data.candidates[0].content.parts[0].text），提取並回傳生成的文字回應。
4. HTML 前端頁面
html
複製
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gemini 簡易範例</title>
</head>
<body>
<input type="text" id="userInput" placeholder="輸入您的問題...">
<button onclick="sendToBot()">送出</button>
<div id="response"></div>
<script>
function sendToBot() {
var userMessage = document.getElementById('userInput').value;
document.getElementById('response').innerText = '思考中...';
google.script.run.withSuccessHandler(function(botResponse) {
document.getElementById('response').innerText = botResponse;
}).withFailureHandler(function(err) {
document.getElementById('response').innerText = '發生錯誤：' + err.message;
}).generateBotResponse(userMessage);
}
</script>
</body>
</html>
說明：
使用者輸入： 提供一個文字輸入框，讓使用者可以輸入問題。
按鈕事件： 當按下「送出」按鈕時，觸發 sendToBot() 函數。
google.script.run： 透過這個方法呼叫後端的 generateBotResponse 函數，並分別設定成功與失敗時的回呼函數。
回應顯示： 將後端回傳的文字顯示在頁面中的 <div id="response"> 內。
開發與部署步驟
建立專案：
進入 Google Apps Script 建立一個新專案。
新增程式碼檔案：
建立 Code.gs 檔案，貼上上述伺服器端程式碼。
建立 index.html 檔案，貼上 HTML 前端程式碼。
設定 API 金鑰：
將你從 Google Cloud Platform 取得的 Gemini API 金鑰填入程式碼中的 API_KEY 變數。
部署 Web App：
點選「發佈」 > 「部署為網路應用程式」，設定存取權限（例如：任何知道連結的人皆可存取），然後取得 Web App URL。
測試應用：
開啟 Web App URL，嘗試在輸入框中輸入問題並送出，查看是否能正確呼叫 Gemini API 並取得回應。
注意事項
安全性：
請注意 API 金鑰不應公開暴露，部署時建議使用後端儲存或環境變數方式保護金鑰。
錯誤處理：
程式中已有基本的錯誤處理，若 API 回傳錯誤，將顯示錯誤訊息，可進一步優化以提供更友善的使用者體驗。
API 配額與限制：
確認你的 API 金鑰對應的專案已啟用 Gemini API，並瞭解相關配額、費用與限制。
這樣的範例能夠讓你快速上手如何在 Google Apps Script 中整合外部 API，同時也提供了基本的前端與後端通訊流程。希望這份教學對你有所幫助！