-伊美AI學院課程 -

【課程筆記】伊美AI學院第4講：用 Claude 打造美業專屬預約系統｜免費AI工具大公開

【課程筆記】伊美AI學院第4講：用 Claude 打造美業專屬預約系統｜免費AI工具大公開

伊美AI學院第4講：用 Claude 打造美業專屬預約系統

伊美AI學院・第四講

用 Claude 打造美業專屬預約系統｜免費AI工具大公開

課程主視覺

大家好，歡迎來到伊美AI學院。本講次我們將探討如何運用免費的 AI 工具 Claude，結合 Google Apps Script，打造一套專屬於美業的自動化預約系統。

前言：解決美業預約的痛點

美業預約痛點

身為美業經營者，您是否也常被「請問有空嗎？」這類訊息綁架了寶貴的時間？ 回不完的私訊、改不完的預約，身為專業技術者，您的時間應該花在更重要的事情上。

傳統的手動登記方式不僅耗時，更容易出錯、漏單。尤其對於許多個人工作室或小型店家來說，管理人力有限，如何有效率地處理預約是一大挑戰。

這就是為什麼我們要導入 AI 來解決這個問題。AI 的發展讓我們有機會利用免費工具，打造出以往需要花費數萬元甚至數十萬元才能建置的客製化預約系統。

今日目標：60分鐘打造專屬預約系統

課程目標

在接下來的 60 分鐘內，我們將透過「對話」的方式，一步步引導您打造一個真實可運作、專屬於您的線上預約系統。 這個過程不需要您撰寫任何程式碼，也不需要高深的技術背景，只要會打字就能完成！

核心魔法工具介紹

核心工具

要實現這個目標，我們主要使用兩樣強大的免費工具：

Google Apps Script (GAS)

這是 Google 提供的一套基於 JavaScript 的腳本語言，可以用來擴充 Google Workspace (如：Gmail, Sheet, Calendar 等) 的功能，實現自動化流程。你可以把它想像成 Google 各項服務之間的強力膠水。

Claude AI

這是我們今天的魔法棒！Claude 是一款特別擅長理解複雜指令、生成高品質程式碼的頂尖 AI 助理。 我們將透過與 Claude 對話，請它為我們撰寫所需的 Google Apps Script 程式碼。

核心概念：什麼是 Google Apps Script？

在深入實作之前，我們先快速理解一下 Google Apps Script (GAS) 的核心概念。

簡單來說，GAS 就像是 Google 雲端服務的自動化引擎。它可以：

  • 連接 Google 服務：讓不同的 Google 應用程式 (如 Gmail, Sheet, Calendar, Drive) 互相溝通與協作。
  • 自動化工作流程：例如，當 Google Sheet 有新資料時，自動發送 Email；或是像我們今天要做的，根據表單提交的內容，自動在 Google 日曆建立行程。
  • 建立客製化應用：可以建立簡單的網頁應用程式 (Web App)，就像我們要打造的預約表單。

雖然聽起來可能有點技術性，但別擔心，今天我們將由 Claude AI 代勞大部分的程式碼撰寫工作。

第一階段：詠唱咒語 - 定義需求提示詞 (Prompt)

定義需求

要讓 Claude AI 幫我們寫程式，第一步就是要給它一份清晰、詳細的「專案規格書」。 這就像是我們要蓋房子前，需要先有設計藍圖一樣。你描述得越像一位專業的產品經理，AI 就越能扮演好一位頂尖的工程師。

這份提示詞，我們稱之為「黃金提示詞」， 內容需要包含以下關鍵要素：

黃金提示詞範本（您可以直接複製使用）

#指令與角色扮演
AI指令:請為我建立一個 Google Apps Script 智慧預約系統
你是一位頂尖的 Google Apps Script 開發專家。請根據下方列出的所有詳細規格,為我從零到有建立一個完整、且能自動化管理的預約系統。

#專案概述
此系統需包含一個客製化品牌風格的預約網頁表單,並能將客戶提交的資料,自動新增至我的Google 日曆與一個能自我生成的Google 試算表中。

#詳細功能與規格要求
核心技術:必須全部使用 Google Apps Script (.gs與.html 檔案)實現。
客製化參數:
工作室名稱:【薇薇美甲工作坊】
視覺風格:【柔和粉色】(例如採用類似【#F8B4D9】或其他專業、有質感的粉色調來設計CSS樣式)
預約時長:【2.5小時】
目標日曆:【我的主要 Google 日曆(primary)】

前端網頁(index.html)規格:
網頁的標題與主要視覺區需顯示「【薇薇美甲工作坊】」。
網頁的整體設計,包含按鈕、標題等元素,皆須採用「【柔和粉色】」色系。
表單需包含「姓名」、「Email」、「電話」、「預約日期時間」四個必填欄位。
網頁需為響應式設計,並在客戶提交表單後能顯示成功或失敗的狀態訊息。

後端邏輯 (Code.gs) 規格:
日曆整合:成功接收表單後,需在我的主要日曆上建立事件。事件標題為「【美甲預約】:[客戶姓名]」,事件描述需包含客戶所有聯絡資料,並將客戶Email加入邀請名單。事件長度需符合指定的「預約時長」。
智慧化試算表整合:此為關鍵核心要求,請務必實現:系統必須能自動管理紀錄用的試算表,不可要求我手動建立或提供任何試算表ID。實現機制:請使用 PropertiesService 來永久儲存試算表的ID。
首次運行邏輯:當第一筆預約進來時,程式需偵測到 Properties Service 中沒有ID,此時需自動建立一個新的Google試算表,命名為「【薇薇美甲工作坊-預約紀錄】」。接著,自動填入表頭(預約時間,姓名,電子郵件,聯絡電話,填單時間),然後才將第一筆資料寫入。最後,將這個新試算表的ID存入 PropertiesService。
後續運行邏輯:之後所有的預約,程式都應從 PropertiesService 讀取ID,直接開啟並寫入資料,不可再建立新檔案。

#產出格式要求
程式碼:請將Code.gs 和 index.html的完整程式碼,分別放置在兩個獨立、有明確標示的Markdown程式碼區塊中,並附上適當註解。
部署教學:在程式碼之後,請提供一份給初學者的詳細步驟教學,指導我如何將這套系統部署為公開的網頁應用程式,並清楚說明在授權過程中,如何處理「Google尚未驗證這個應用程式」的警告畫面(包含點擊「進階」與「前往不安全的應用程式」的完整流程)。

將這樣一份詳細的提示詞提供給 Claude AI，它就能理解我們的需求，並生成初步的程式碼框架。

第二階段：賦予生命 - 部署與上線

部署與上線

有了 Claude AI 生成的程式碼，接下來我們就要把它變成一個真實可用的網站。這個過程只需要簡單四個步驟：

1建立 Google Apps Script 專案

  1. 開啟 Google Apps Script：你可以直接在瀏覽器輸入 script.google.com，或是在 Google 雲端硬碟中點擊「新增」>「更多」>「Google Apps Script」。
  2. 建立新專案：點擊左上角的「新增專案」。
  3. 命名專案：為你的專案取個容易識別的名稱，例如「美甲預約系統」。

2加入程式碼 (Code.gs & index.html)

  1. 貼上後端程式碼 (Code.gs)：將 AI 生成的 Code.gs 程式碼完整複製，貼到 Apps Script 編輯器中預設的 Code.gs 檔案裡，取代掉原本的 myFunction() 內容。
  2. 新增並貼上前台頁面 (index.html)：
    • 點擊編輯器左側檔案列表旁的「+」號，選擇「HTML」。
    • 將檔案命名為 index (注意：必須是 index，不含 .html 副檔名)。
    • 將 AI 生成的 index.html 程式碼完整複製，貼到這個新建的 index.html 檔案裡，取代掉原本的內容。
  3. 儲存專案：點擊上方的磁碟片圖示「儲存專案」。

3設定權限與授權

  1. 執行函式：在編輯器上方的函式選擇下拉選單中，選擇 doGet，然後點擊旁邊的「執行」按鈕。
  2. 審核權限：第一次執行時，Google 會跳出「需要授權」的提示，點擊「審核權限」。
  3. 選擇帳戶：選擇你要用來執行這個指令碼的 Google 帳戶。
  4. 處理安全警告：Google 可能會顯示「Google 尚未驗證這個應用程式」的警告畫面。這是正常的，因為是你自己寫的程式。你需要：
    • 點擊「進階」。
    • 點擊最下方的「前往『(你的專案名稱)』(不安全)」。
  5. 授予權限：接著會列出這個指令碼需要存取的權限（例如：存取你的 Google 日曆、試算表等），點擊「允許」。

4部署為網路應用程式 (Web App)

  1. 點擊部署：點擊編輯器右上角的「部署」按鈕，選擇「新增部署作業」。
  2. 選取類型：點擊齒輪圖示旁的「選取類型」，選擇「網頁應用程式」。
  3. 設定組態：
    • 說明：可以輸入一個描述，例如「美甲工作室預約系統 v1.0」。
    • 執行身分：選擇「我」。
    • 誰可以存取：選擇「所有人」。這才能讓你的客戶公開存取預約頁面。
  4. 點擊部署。
  5. 複製網址：部署成功後，系統會提供一個「網頁應用程式」的網址。這個網址就是你的線上預約系統的公開連結，把它複製下來！

???? 恭喜！

現在，你就可以把這個網址分享給你的客戶，讓他們開始線上預約了！

實際測試與驗證

測試與驗證

部署完成後，務必進行實際測試：

  1. 開啟網頁應用程式網址：在瀏覽器中打開剛剛複製的網址。
  2. 填寫表單：模擬客戶填寫姓名、Email、電話、選擇預約日期時間，然後點擊「確認預約」。
  3. 檢查回饋訊息：確認頁面上是否顯示「成功預約」的訊息。
  4. 檢查 Google 日曆：打開你的 Google 日曆，確認是否有成功建立對應的預約事件，標題、描述、時間、邀請名單是否都正確。
  5. 檢查 Google Sheet：前往你的 Google 雲端硬碟，應該會看到一個自動建立的「薇薇美甲工作坊-預約紀錄」試算表。打開它，確認第一筆預約資料是否已正確寫入，包含所有欄位。
  6. 檢查 Email：檢查你（身為客戶填寫的 Email）是否收到 Google 日曆的邀請通知。

✅ 成功確認

如果以上步驟都成功，恭喜你！你的自動化預約系統已經正式上線運作了！

解決常見問題：時區錯誤

在測試過程中，你可能會發現 Google 日曆上建立的事件時間跟你預約的時間有時差（通常是 8 小時）。 這是因為 Google Apps Script 伺服器的預設時區可能不是亞洲/台北。

解決方法：

我們需要明確告訴程式碼我們的時區。 這需要修改 Code.gs 檔案中的一小段程式碼。

請將以下修正後的提示詞再次提供給 Claude AI，請它更新 Code.gs 程式碼：

時區修正提示詞

針對剛才的 Google Apps Script 程式碼 (Code.gs)，請協助我做以下的調整，因為我的時區是亞洲/台北 (+8)，我要確保在「時間戳記」欄位以及寫入 Google 日曆的「預約日期時間」欄位都能正確顯示亞洲/台北時區的時間。請提供更新後的完整 Code.gs 程式碼。

將 AI 提供的更新後 Code.gs 程式碼，重新貼回你的 Apps Script 專案中，儲存後， 務必重新部署一次 （點擊「部署」>「管理部署作業」> 找到你的部署項目點擊旁邊的鉛筆圖示「編輯」> 版本選擇「新版本」> 點擊「部署」）。 這樣就能修正時區問題。

第三階段：永續經營 - 打包開發者手冊

開發者手冊

為了方便未來自己或他人維護、修改這個系統，我們需要一份清晰的文件。這時候，我們可以請 AI 扮演技術文件撰寫員的角色， 將我們的「原始開發指令」（第一階段的黃金提示詞）和「最終程式碼」（包含修正時區後的 Code.gs 和 index.html） 都提供給它，請它為我們撰寫一份「客製化預約系統開發者手冊」。

開發者手冊生成提示詞（記得替換【...】中的實際內容）

#指令與角色扮演
你是一位資深的技術文件撰寫員,非常擅長將複雜的程式碼與需求,轉化為非技術背景使用者(例如美業老闆)也能看懂的說明手冊。請你根據我下方提供的「原始開發指令」和「最終程式碼」,為我撰寫一份完整的「客製化預約系統開發者手冊」。手冊的目標讀者是不懂程式的美業人士,所以請務必使用淺顯易懂、親切友善的語氣,並嚴格遵循下方指定的手冊章節結構來生成內容。

#手冊生成所需資料
### 1. 原始開發指令(第一階段使用的黃金提示詞)
【請在此貼上第一階段的「黃金提示詞」的完整內容】

### 2. 最終程式碼(包含Code.gs 與 Index.html)
【請在此貼上第二階段的完整Google Apps Script 程式碼，包含Code.gs 和 Index.html】

#手冊章節結構
- 第一章:我的預約系統總覽
- 第二章:系統部署教學
- 第三章:如何修改基本資料
- 附錄A:我的黃金提示詞
- 附錄B:系統完整程式碼

手冊的目標讀者是不懂程式的美業人士，所以內容要淺顯易懂、語氣親切， 並且要包含我們指定的章節結構（例如：系統總覽、部署教學、如何修改基本資料、原始提示詞、完整程式碼等）。

擁有這份手冊，未來要修改工作室名稱、預約時長、甚至調整頁面顏色等，都能更有依據，不再害怕程式碼。

核心流程回顧

核心流程

今天，我們一起經歷了從想法到實踐的完整過程：

  1. 產生想法：想要一個自動化預約系統。
  2. 定義需求：將想法轉化為清晰的「黃金提示詞」。
  3. AI 生成：將提示詞交給 Claude AI，生成程式碼。
  4. 部署上線：將程式碼部署到 Google Apps Script，變成真實可用的網頁應用程式。
  5. 打包文件：請 AI 將開發過程整理成開發者手冊，方便後續維護。

未來工作模式：

這就是未來最高效的工作模式：你負責提出策略、定義需求；AI 負責執行、做苦工。

結語與 Q&A

課程結語

透過今天的實作，相信大家已經體驗到 AI 在程式開發上的強大助力。即使沒有程式背景，只要掌握了與 AI 有效溝通的方法（也就是好的提示詞），我們也能打造出實用的自動化工具，解決經營上的痛點。

希望今天的課程能幫助各位美業老闆省下更多時間，專注於提供更優質的服務！

下期預告：

下一講，我們將挑戰更高難度的： 伊美AI學院第5講：AI 組合拳出擊 | 60分鐘打造你的美業網站！ 敬請期待！

課程學習資源

課程簡報下載

完整的課程簡報已上線，歡迎下載複習！

課程目錄

↑