1
// Code.gs - WebApp 入口
2
function doGet() {
3
  return HtmlService.createTemplateFromFile('WebApp')
4
    .evaluate()
5
    .setTitle('商品管理系統')
6
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
7
}
8

9
// 用於載入其他 HTML 檔案的輔助函數
10
function include(filename) {
11
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
12
}

1
// 在 setup() 中新增
2
const urlInput = ref('');
3

4
// 監聽 URL 輸入
5
watch(urlInput, async (newUrl) => {
6
  if (!newUrl) return;
7

8
  // 簡單的 URL 驗證
9
  const urlPattern = /^https?:\/\/.+/;
10
  if (!urlPattern.test(newUrl)) {
11
    return;
12
  }
13

14
  isLoading.value = true;
15

16
  // 呼叫後端 API 解析 URL
17
  google.script.run
18
    .withSuccessHandler((result) => {
19
      if (result.success) {
20
        formData.value.name = result.title || '';
21
        formData.value.imageUrl = result.image || '';
22
        formData.value.description = result.description || '';
23
      }
24
      isLoading.value = false;
25
    })
26
    .withFailureHandler((error) => {
27
      console.error('URL 解析失敗：', error);
28
      isLoading.value = false;
29
    })
30
    .parseURL(newUrl);
31
});

1
// ❌ 錯誤：onEdit (Simple Trigger) 無法使用 showSidebar()
2
function onEdit(e) {
3
  // 這會失敗！Simple Trigger 無法呼叫需要授權的服務
4
  SpreadsheetApp.getUi().showSidebar(...);  // 權限錯誤
5
}
6

7
// ✅ 正確：使用 Installable Trigger（必須手動重新命名）
8
function onEditInstallable(e) {
9
  // 檢查是否點擊了編輯按鈕（H 欄）
10
  if (e.range.getColumn() === 8 && e.value === '📝 編輯') {
11
    const row = e.range.getRow();
12
    showUpdateModal(row);
13
  }
14
}
15

16
function showUpdateModal(row) {
17
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
18
  const rowData = sheet.getRange(row, 1, 1, 7).getValues()[0];
19

20
  const data = {
21
    row: row,
22
    name: rowData[0],
23
    description: rowData[1],
24
    imageUrl: rowData[2],
25
    price: rowData[3]
26
  };
27

28
  const template = HtmlService.createTemplateFromFile('UpdateModal');
29
  template.data = JSON.stringify(data);
30

31
  SpreadsheetApp.getUi().showSidebar(
32
    template.evaluate().setTitle('編輯商品').setWidth(400)
33
  );
34
}

1
// Validation.html - 共用驗證函數
2
const ValidationUtils = {
3
  isValidURL(url) {
4
    return /^https?:\/\/.+/.test(url);
5
  },
6

7
  isValidPrice(price) {
8
    return !isNaN(price) && parseFloat(price) >= 0;
9
  },
10

11
  validateForm(formData) {
12
    const errors = {};
13
    if (!formData.name?.trim()) errors.name = '商品名稱為必填';
14
    if (!this.isValidURL(formData.imageUrl)) errors.imageUrl = '請輸入有效的圖片 URL';
15
    if (!this.isValidPrice(formData.price)) errors.price = '請輸入有效的價格';
16
    return errors;
17
  }
18
};

1
// Code.gs - 使用鎖定機制避免衝突
2
function saveToSheet(data, userEmail) {
3
  const lock = LockService.getScriptLock();
4
  try {
5
    lock.waitLock(10000);
6
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
7

8
    // 記錄資料與操作者
9
    sheet.appendRow([
10
      data.name,
11
      data.description,
12
      data.imageUrl,
13
      data.price,
14
      new Date(),
15
      userEmail  // 從前端傳入或從 Session.getActiveUser() 取得（視執行模式而定）
16
    ]);
17

18
    return { success: true };
19
  } catch (e) {
20
    return { success: false, error: '系統忙碌中，請稍後再試' };
21
  } finally {
22
    lock.releaseLock();
23
  }
24
}

1
gas-webapp-smart-form/
2
├── .clasp.json              # clasp 設定檔
3
├── .claspignore            # 忽略清單
4
├── .gitignore              # Git 忽略清單
5
├── appsscript.json         # Apps Script 設定檔
6
├── package.json            # Node.js 依賴
7
├── README.md               # 專案說明
8
├── src/
9
│   ├── Code.js             # 主要後端邏輯
10
│   ├── WebApp.html         # WebApp 主頁面
11
│   ├── UpdateModal.html    # 側邊欄編輯介面
12
│   ├── Stylesheet.html     # 共用樣式
13
│   ├── JavaScript.html     # 共用 JS
14
│   └── Validation.html     # 驗證函數庫
15
└── tests/                  # 測試檔案（可選）

1
**/**
2
!src/**
3
!appsscript.json
4
.git/**
5
node_modules/**

1
{
2
  "compilerOptions": {
3
    "target": "ES2019",
4
    "module": "None",
5
    "lib": ["ES2019"],
6
    "strict": true,
7
    "esModuleInterop": true
8
  },
9
  "include": ["src/**/*"]
10
}

1
本地編輯 (VS Code)
2
    ↓
3
Git commit
4
    ↓
5
clasp push
6
    ↓
7
瀏覽器測試
8
    ↓
9
部署上線

1
Developer A: 本地開發 → Git push
2
    ↓
3
GitHub Pull Request
4
    ↓
5
Code Review
6
    ↓
7
Merge to main
8
    ↓
9
Developer B: Git pull → clasp push → 部署