1
┌─────────────────────────────────────────────────────┐
2
│                   Google Sheets                      │
3
│  ┌─────────────────────────────────────────────────┐│
4
│  │  資料儲存（多分頁支援）                          ││
5
│  │  A: 編號 | B: 名稱 | C: 圖片 | ... | I: 操作 ││
6
│  └─────────────────────────────────────────────────┘│
7
└───────────────────────┬─────────────────────────────┘
8
                        │
9
                        ▼
10
┌─────────────────────────────────────────────────────┐
11
│                  Apps Script                         │
12
│  ┌──────────────┐  ┌──────────────┐  ┌────────────┐ │
13
│  │  程式碼.gs   │  │ UpdateModal  │  │ BrowseModal│ │
14
│  │  (後端邏輯)  │  │   (側邊欄)    │  │  (彈窗)    │ │
15
│  └──────────────┘  └──────────────┘  └────────────┘ │
16
└───────────────────────┬─────────────────────────────┘
17
                        │
18
                        ▼
19
┌─────────────────────────────────────────────────────┐
20
│                    Web App                           │
21
│         （獨立網址，不需開啟 Sheet）                 │
22
└─────────────────────────────────────────────────────┘

1
// 在綁定的 Script 中，可以直接取得試算表
2
const ss = SpreadsheetApp.getActiveSpreadsheet();
3
const sheet = ss.getActiveSheet();
4

5
// 讀取資料
6
const value = sheet.getRange('A1').getValue();
7

8
// 寫入資料
9
sheet.getRange('A2').setValue('Hello World');

1
使用者在 H 欄選擇「📝 編輯」
2
              ↓
3
    觸發 Installable Trigger
4
              ↓
5
      用「安裝者」的權限執行
6
              ↓
7
    即使分頁有保護也能修改資料！

1
const EDIT_COL = 8; // H 欄
2

3
function onOpen() {
4
  SpreadsheetApp.getUi()
5
    .createMenu('更新管理')
6
    .addItem('🔑 啟用功能（首次使用）', 'firstTimeAuth')
7
    .addSeparator()
8
    .addItem('➕ 新增資料', 'openBlankSidebar')
9
    .addItem('📋 查看當前分頁資料', 'openBrowseModal')
10
    .addSeparator()
11
    .addSubMenu(SpreadsheetApp.getUi().createMenu('🔧 管理員功能')
12
      .addItem('⚙️ 安裝觸發器', 'installTrigger'))
13
    .addToUi();
14
}
15

16
function installTrigger() {
17
  // 先移除舊的，避免重複
18
  const triggers = ScriptApp.getProjectTriggers();
19
  triggers.forEach(function(trigger) {
20
    if (trigger.getHandlerFunction() === 'onEditTrigger') {
21
      ScriptApp.deleteTrigger(trigger);
22
    }
23
  });
24

25
  // 安裝新的
26
  ScriptApp.newTrigger('onEditTrigger')
27
    .forSpreadsheet(SpreadsheetApp.getActive())
28
    .onEdit()
29
    .create();
30

31
  SpreadsheetApp.getActiveSpreadsheet().toast("觸發器安裝完成！", "✅", 3);
32
}

1
function onEditTrigger(e) {
2
  const range = e.range;
3
  const sheet = range.getSheet();
4
  const sheetName = sheet.getName();
5

6
  // 檢查是否為 H 欄且非標題列
7
  if (range.getColumn() === EDIT_COL && range.getRow() > 1) {
8
    const currentRow = range.getRow();
9
    const value = e.value;
10

11
    // 檢查 A 欄有沒有資料
12
    const id = sheet.getRange(currentRow, 1).getValue();
13
    if (!id) {
14
      range.setValue('－');
15
      return;
16
    }
17

18
    // 📝 編輯
19
    if (value === '📝 編輯') {
20
      const rowValues = sheet.getRange(currentRow, 1, 1, 7).getValues()[0];
21

22
      const productData = {
23
        sheetName: sheetName,
24
        id: rowValues[0],
25
        name: rowValues[1],
26
        image: rowValues[2],
27
        description: rowValues[3],
28
        price: rowValues[4],
29
        note: rowValues[5],
30
        date: rowValues[6],
31
        rowNumber: currentRow
32
      };
33

34
      showSidebar(productData);
35
      range.setValue('－');
36
    }
37

38
    // 🗑️ 刪除
39
    if (value === '🗑️ 刪除') {
40
      const ui = SpreadsheetApp.getUi();
41
      const response = ui.alert(
42
        '⚠️ 確認刪除',
43
        '確定要刪除這筆資料嗎？',
44
        ui.ButtonSet.YES_NO
45
      );
46

47
      if (response === ui.Button.YES) {
48
        sheet.deleteRow(currentRow);
49
      } else {
50
        range.setValue('－');
51
      }
52
    }
53
  }
54
}

1
// 開啟側邊欄
2
function showSidebar(data) {
3
  const template = HtmlService.createTemplateFromFile('UpdateModal');
4
  template.initialData = data ? JSON.stringify(data) : 'null';
5

6
  const html = template.evaluate()
7
    .setTitle('商品資料編輯')
8
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
9

10
  SpreadsheetApp.getUi().showSidebar(html);
11
}
12

13
// 開啟 Modal
14
function openBrowseModal() {
15
  const template = HtmlService.createTemplateFromFile('BrowseModal');
16
  const sheetName = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getName();
17

18
  template.data = getAllProducts(sheetName);
19
  template.sheetName = sheetName;
20

21
  const html = template.evaluate()
22
    .setWidth(750)
23
    .setHeight(550);
24

25
  SpreadsheetApp.getUi().showModalDialog(html, '📋 資料總覽');
26
}

1
<script>
2
  // 從後端接收資料
3
  const initialData = <?!= initialData ?>;
4
  const sheetName = '<?!= sheetName ?>';
5

6
  // Vue 3 使用範例
7
  const { createApp, ref, onMounted } = Vue;
8

9
  createApp({
10
    setup() {
11
      const form = ref({});
12

13
      onMounted(function() {
14
        if (initialData) {
15
          form.value = initialData;
16
        }
17
      });
18

19
      return { form };
20
    }
21
  }).mount('#app');
22
</script>

1
新用戶首次使用
2
      ↓
3
點選任何選單功能
4
      ↓
5
Google 彈出授權視窗
6
      ↓
7
用戶勾選同意權限
8
      ↓
9
完成授權，可使用所有功能

1
function showResetAuthInstructions() {
2
  const html = HtmlService.createHtmlOutput(`
3
    <h3>🔄 重置授權步驟</h3>
4
    <ol>
5
      <li>前往 <a href="https://myaccount.google.com/permissions" target="_blank">Google 權限設定</a></li>
6
      <li>找到此試算表名稱</li>
7
      <li>點擊「移除存取權」</li>
8
      <li>回到試算表按 F5 重新整理</li>
9
      <li>重新執行「首次授權」</li>
10
    </ol>
11
  `)
12
  .setWidth(400)
13
  .setHeight(300);
14

15
  SpreadsheetApp.getUi().showModalDialog(html, '授權說明');
16
}

1
function doGet(e) {
2
  const template = HtmlService.createTemplateFromFile('WebApp');
3

4
  // 取得所有分頁名稱
5
  const ss = getSpreadsheet();
6
  const sheets = ss.getSheets();
7
  const sheetNames = sheets.map(function(s) { return s.getName(); });
8

9
  template.sheetNames = JSON.stringify(sheetNames);
10

11
  return template.evaluate()
12
    .setTitle('商品資料管理系統')
13
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
14
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
15
}

1
// ❌ 錯誤寫法
2
const SPREADSHEET_ID = SpreadsheetApp.getActiveSpreadsheet().getId();
3

4
// ✅ 正確寫法：硬編碼試算表 ID
5
const SPREADSHEET_ID = 'YOUR_SPREADSHEET_ID_HERE';
6

7
// 取得試算表的通用函數
8
function getSpreadsheet() {
9
  try {
10
    // 先嘗試取得綁定的試算表（在 Sheet 內執行時）
11
    const ss = SpreadsheetApp.getActiveSpreadsheet();
12
    if (ss) return ss;
13
  } catch (e) {}
14

15
  // Web App 環境用 ID 開啟
16
  return SpreadsheetApp.openById(SPREADSHEET_ID);
17
}

1
https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/edit#gid=0
2
                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3
                                      這一段就是 ID（約 44 個字元）

1
⚠️ 如果選擇舊版本號，修改不會生效！

1
// API: 取得資料
2
function getSheetData(sheetName) {
3
  const emptyResult = { data: [], headers: [], total: 0 };
4

5
  try {
6
    const ss = getSpreadsheet();
7
    const sheet = ss.getSheetByName(sheetName);
8

9
    if (!sheet) return emptyResult;
10

11
    const lastRow = sheet.getLastRow();
12
    if (lastRow <= 1) return emptyResult;
13

14
    const data = sheet.getRange(2, 1, lastRow - 1, 7).getValues();
15

16
    const result = data.map(function(row, index) {
17
      return {
18
        rowNum: index + 2,
19
        id: row[0],
20
        name: row[1],
21
        // ...
22
      };
23
    });
24

25
    return { data: result, total: result.length };
26

27
  } catch (e) {
28
    console.log('錯誤：' + e.message);
29
    return emptyResult;
30
  }
31
}
32

33
// API: 儲存資料
34
function saveDataFromWeb(formData) {
35
  const ss = getSpreadsheet();
36
  const sheet = ss.getSheetByName(formData.sheetName);
37

38
  // ... 儲存邏輯
39

40
  return { success: true, message: "儲存成功" };
41
}
42

43
// API: 刪除資料
44
function deleteDataFromWeb(sheetName, rowNum) {
45
  const ss = getSpreadsheet();
46
  const sheet = ss.getSheetByName(sheetName);
47

48
  sheet.deleteRow(rowNum);
49

50
  return { success: true, message: "刪除成功" };
51
}

1
// 呼叫後端函數
2
google.script.run
3
  .withSuccessHandler(function(result) {
4
    console.log('成功：', result);
5
  })
6
  .withFailureHandler(function(error) {
7
    console.log('失敗：', error);
8
  })
9
  .yourFunctionName(arg1, arg2);

1
function loadData() {
2
  isLoading.value = true;
3

4
  google.script.run
5
    .withSuccessHandler(function(result) {
6
      if (result && result.data) {
7
        items.value = result.data;
8
      } else {
9
        items.value = [];
10
      }
11
      isLoading.value = false;
12
    })
13
    .withFailureHandler(function(err) {
14
      showToast('載入失敗：' + err, 'error');
15
      items.value = [];
16
      isLoading.value = false;
17
    })
18
    .getSheetData(currentSheet.value);
19
}
20

21
function saveForm() {
22
  if (!form.value.id) return;
23

24
  isSaving.value = true;
25
  const payload = { ...form.value, sheetName: currentSheet.value };
26

27
  google.script.run
28
    .withSuccessHandler(function(result) {
29
      isSaving.value = false;
30
      if (result.success) {
31
        showToast(result.message, 'success');
32
        loadData();  // 重新載入
33
      }
34
    })
35
    .withFailureHandler(function(err) {
36
      isSaving.value = false;
37
      showToast('儲存失敗', 'error');
38
    })
39
    .saveDataFromWeb(payload);
40
}

1
function doGet(e) {
2
  const userEmail = Session.getActiveUser().getEmail();
3
  console.log(userEmail);  // 輸出：""（空字串）
4
}

1
部署 → 管理部署作業 → 編輯
2
  ↓
3
誰可以存取：
4
  ❌ 任何人 (Anyone) → 抓不到 Email
5
  ✅ 任何擁有 Google 帳戶的人 → 可以抓到 Email
6
  ↓
7
版本：選擇「新版本」
8
  ↓
9
部署

1
使用者開啟 Web App 網址
2
         ↓
3
Google 先攔截，要求登入
4
         ↓
5
登入成功後才執行 doGet
6
         ↓
7
Session.getActiveUser().getEmail() 可正常取得 Email

1
// 在後端加入 log
2
function getSheetData(sheetName) {
3
  console.log('開始取得資料，分頁：' + sheetName);
4

5
  const ss = getSpreadsheet();
6
  console.log('試算表：' + (ss ? ss.getName() : 'null'));
7

8
  // ...
9
}
10

11
// 在 Apps Script 編輯器執行測試
12
function testGetSheetData() {
13
  const result = getSheetData('Sheet1');
14
  console.log('結果：' + JSON.stringify(result));
15
}

1
// ❌ 效能差：逐格讀取
2
for (let i = 2; i <= lastRow; i++) {
3
  const value = sheet.getRange(i, 1).getValue();
4
}
5

6
// ✅ 效能好：批次讀取
7
const values = sheet.getRange(2, 1, lastRow - 1, 7).getValues();
8
values.forEach(function(row) {
9
  // 處理資料
10
});

1
function saveDataFromWeb(formData) {
2
  // 1. 取得鎖定
3
  const lock = LockService.getScriptLock();
4

5
  try {
6
    // 等待取得鎖定（最多等 10 秒）
7
    lock.waitLock(10000);
8
  } catch (e) {
9
    // 等不到鎖定，代表有其他人正在寫入
10
    return { success: false, message: "系統忙碌中，請稍後再試" };
11
  }
12

13
  try {
14
    // 2. 執行寫入操作
15
    const ss = getSpreadsheet();
16
    const sheet = ss.getSheetByName(formData.sheetName);
17

18
    // ... 寫入邏輯 ...
19

20
    return { success: true, message: "儲存成功" };
21

22
  } catch (e) {
23
    return { success: false, message: "錯誤：" + e.message };
24

25
  } finally {
26
    // 3. 一定要釋放鎖定！
27
    lock.releaseLock();
28
  }
29
}

1
📁 Apps Script 專案
2
├── 程式碼.gs          # 後端邏輯
3
│   ├── 設定區
4
│   │   ├── EDIT_COL = 9
5
│   │   ├── SPREADSHEET_ID
6
│   │   ├── ALLOWED_USERS[]
7
│   │   └── ADMIN_USERS[]
8
│   ├── 工具函數
9
│   │   ├── getUserInfo()
10
│   │   └── getSpreadsheet()
11
│   ├── Web App
12
│   │   └── doGet()
13
│   ├── API
14
│   │   ├── getSheetNames()
15
│   │   ├── getSheetData()
16
│   │   ├── saveDataFromWeb()  # 含 LockService
17
│   │   └── deleteDataFromWeb()
18
│   ├── Sheet 觸發器
19
│   │   ├── onEditTrigger()
20
│   │   ├── showSidebar()
21
│   │   └── installTrigger()
22
│   └── 選單與初始化
23
│       ├── onOpen()
24
│       ├── initEditColumn()
25
│       └── initAllSheetsEditColumn()
26
│
27
├── UpdateModal.html    # 側邊欄編輯介面
28
├── BrowseModal.html    # 資料總覽彈窗
29
└── WebApp.html         # 獨立 Web App

1
// ========================================
2
// 設定區（根據需求修改）
3
// ========================================
4

5
// 操作欄位置（第 8 欄存 Email，所以操作欄在第 9 欄）
6
const EDIT_COL = 9;
7

8
// 試算表 ID（從網址取得）
9
const SPREADSHEET_ID = '你的試算表ID';
10

11
// 一般使用者白名單（空陣列 = 公開模式）
12
const ALLOWED_USERS = [
13
  // '[email protected]',
14
];
15

16
// 管理員白名單
17
const ADMIN_USERS = [
18
  '[email protected]',
19
];