第五節課：Apps Script 與 HTML 的結合

暖身問題： 想像你有一個可以顯示試算表數據的網頁應用，你希望點擊按鈕時能動態顯示內容。今天，我們將學習如何結合 Apps Script 與 HTML，實現這樣的功能！

教學目標

了解 Apps Script 與 HTML 結合的基本流程。
學會使用 Google Apps Script 提供動態數據給 HTML 網頁。
熟悉 Apps Script 中的 `doGet` 方法。

教學內容與操作步驟

1. 建立一個簡單的 Apps Script 項目


function doGet() {
    return HtmlService.createHtmlOutput(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>Apps Script 與 HTML</title>
        </head>
        <body>
            <h1>歡迎來到我的網頁！</h1>
            <button onclick="google.script.run.showAlert()">點擊我</button>
            <script>
                function showAlert() {
                    alert("你好！這是一個動態訊息。");
                }
            </script>
        </body>
        </html>
    `);
}

步驟：

打開 Google Apps Script，建立新項目。
將上方程式碼複製並貼上到 Apps Script 編輯器中。
點擊部署 > 作為 Web 應用發布。
檢查網頁是否成功顯示。

問題：如果希望按鈕顯示的訊息為 "歡迎學習 Apps Script！"，應該修改哪部分程式碼？

2. 動態顯示試算表數據


function doGet() {
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    const data = sheet.getRange(1, 1).getValue(); // 取得第一行第一列的值

    return HtmlService.createHtmlOutput(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>顯示試算表數據</title>
        </head>
        <body>
            <h1>從試算表讀取的數據是：</h1>
            <p>` + data + `</p>
        </body>
        </html>
    `);
}

步驟：

將程式碼修改為上述內容。
確保試算表中有內容（例如第一行第一列填入 "Hello, World!"）。
再次部署並檢查是否成功顯示試算表內容。

問題：如果想要讀取第二行第一列的數據，應該修改哪部分程式碼？

課程延伸與挑戰

挑戰1： 設計一個頁面，包含兩個按鈕，分別顯示試算表中的不同數據。
挑戰2： 使用 `google.script.run`，讓按鈕可以動態讀取試算表的數據並顯示。