團購系統 - 新竹市教育人

0. 作品介紹

作者管理員

作者可以自己決定要訂購哪些項目

25 1 0

非教學

預設圖片

1. AI 提示詞

把這段指令貼給 AI，讓它幫你生成程式碼。

我想要建立一個【團購網站】

幫我用Google 試算表建立【團購資料老師想要的清單】

我希望有些資料我可以直接在試算表更改首頁可以直接呈現

需求說明【

1.我希望每個老師都可以上來點選團購的物品

2.我可以改資料庫呈現現在團購物品是什麼

3.他會幫我統計現在老師團購物品的數量是多少

】

要把它變成程式碼我要發佈

請完整敘述操作步驟越詳細越好

作業環境

Google試算表

Google Apps Script

我看不懂程式碼，請給我後端gs完整程式碼、前端index完整程式碼

2. 資料表規則

請照下面規則建立分頁與欄位。

第1分頁：分頁1 A 欄：欄位A B 欄：欄位B

📄 解析結果（自動表格）

分頁：分頁1

A 欄	B 欄
欄位A	欄位B

3. 開啟 Apps Script

從試算表開 Apps Script，才能直接用 SpreadsheetApp 讀寫資料。

試算表上方選單：擴充功能 → Apps Script
刪掉預設的程式碼（或全部選取覆蓋）
保留/建立檔案：
- Code.gs
- index.html

4. 貼上後端（Code.gs）

把後端程式貼到 Apps Script 的 Code.gs。

Code.gs（後端）

// 這裡的程式碼負責跟試算表溝通

// 1. 產生網頁的函數
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('老師團購登記系統') // 網頁標題
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

// 2. 從「商品設定」分頁讀取目前有哪些商品
function getProductList() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('商品設定');
  // 從第二列開始讀取，讀取到最後一列
  var lastRow = sheet.getLastRow();
  if (lastRow < 2) return []; // 如果沒商品就回傳空陣列
  
  // 讀取 A欄(名稱) 和 B欄(價格)
  var data = sheet.getRange(2, 1, lastRow - 1, 2).getValues();
  return data; // 回傳給前端網頁
}

// 3. 接收網頁傳來的訂單，寫入「訂單紀錄」
function submitOrder(orderData) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('訂單紀錄');
  
  // orderData 包含：name(老師姓名), product(商品名稱_價格), quantity(數量)
  var timestamp = new Date();
  var name = orderData.name;
  var productInfo = orderData.product.split('_'); // 把 "肉桂捲_100" 切割開
  var productName = productInfo[0];
  var price = parseInt(productInfo[1]);
  var qty = parseInt(orderData.quantity);
  var total = price * qty;
  
  // 寫入資料庫 (時間, 姓名, 商品, 數量, 總價)
  sheet.appendRow([timestamp, name, productName, qty, total]);
  
  return "訂購成功！感謝 " + name + " 老師的參與。";
}

貼到 Apps Script 的 Code.gs 檔案

5. 貼上前端（index.html）

把前端程式貼到 Apps Script 的 index.html。

index.html（前端）

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { background-color: #f8f9fa; padding-top: 20px; font-family: "Microsoft JhengHei", sans-serif; }
    .container { max-width: 600px; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
    .header { text-align: center; margin-bottom: 30px; color: #d63384; } /* 粉紅色標題 */
    .loading { text-align: center; display: none; }
    .btn-submit { background-color: #d63384; color: white; border: none; width: 100%; padding: 10px; font-size: 1.2rem; }
    .btn-submit:hover { background-color: #b02a6b; color: white; }
  </style>
</head>
<body>

<div class="container">
  <h2 class="header">🎉 老師團購登記站</h2>
  
  <form id="orderForm" onsubmit="handleFormSubmit(this)">
    
    <div class="mb-3">
      <label for="name" class="form-label">老師姓名</label>
      <input type="text" class="form-control" id="name" name="name" placeholder="請輸入您的大名" required>
    </div>

    <div class="mb-3">
      <label class="form-label">請選擇團購商品</label>
      <select class="form-select" id="productSelect" name="product" required>
        <option value="" disabled selected>讀取商品中...</option>
      </select>
    </div>

    <div class="mb-3">
      <label for="quantity" class="form-label">訂購數量</label>
      <input type="number" class="form-control" id="quantity" name="quantity" min="1" value="1" required>
    </div>

    <button type="submit" class="btn btn-submit">送出訂單</button>
  </form>

  <div id="message" class="mt-3 text-center fw-bold text-success"></div>
  <div id="loading" class="loading mt-3">
     <div class="spinner-border text-danger" role="status"></div>
     <span>處理中，請稍候...</span>
  </div>
</div>

<script>
  // 網頁一打開，立刻去後台抓商品清單
  window.onload = function() {
    google.script.run
      .withSuccessHandler(renderProducts)
      .getProductList();
  };

  // 把抓到的商品顯示在下拉選單裡
  function renderProducts(products) {
    var select = document.getElementById("productSelect");
    select.innerHTML = '<option value="" disabled selected>請選擇商品</option>';
    
    if (products.length === 0) {
      select.innerHTML = '<option disabled>目前沒有團購活動</option>';
      return;
    }

    products.forEach(function(row) {
      // row[0]是名稱, row[1]是價格
      // 這裡把值設定為 "名稱_價格"，方便後端處理
      var optionValue = row[0] + "_" + row[1];
      var optionText = row[0] + " ($" + row[1] + ")";
      
      var option = document.createElement("option");
      option.value = optionValue;
      option.text = optionText;
      select.appendChild(option);
    });
  }

  // 按下送出按鈕時執行的動作
  function handleFormSubmit(formObject) {
    event.preventDefault(); // 防止網頁重整
    
    document.getElementById('loading').style.display = 'block'; // 顯示轉圈圈
    document.getElementById('message').innerText = '';
    
    // 呼叫後端 submitOrder 函數
    google.script.run
      .withSuccessHandler(function(response) {
        document.getElementById('loading').style.display = 'none';
        document.getElementById('message').innerText = response; // 顯示成功訊息
        formObject.reset(); // 清空表單
        // 重新讀取一次商品以防狀態重置
        google.script.run.withSuccessHandler(renderProducts).getProductList();
      })
      .submitOrder(formObject);
  }
</script>

</body>
</html>

貼到 Apps Script 的 index.html 檔案

6. 部署

部署成 Web App 後，就會拿到可分享網址。

Apps Script 右上：部署 → 新部署
類型選：Web app
執行身分：你
存取權限：任何人
完成後複製網址

💬 評論區

老師們的交流與提問

載入評論中...

📄 解析結果（自動表格）

分享作品