案例Demo

年菜預購表+系統通知 🍲🤖

古厝家常菜是位於新北市蘆洲的人氣餐廳,主打家常風味,料理保留傳統古早味、真材實料又平價實惠。古厝農曆春節期間不營業,只在除夕前一天(小年夜)提供外帶家常年菜的服務,所以老顧客都會在11月中旬就紛紛詢問外帶年菜的預約什麼時候開始?

為了快速回覆訂單、掌握接單數量,同時要考量後續彙整訂單的流程順暢,我就幫古厝搭配免費的Google雲端工具+AI撰寫自動化程式,這篇文章就分享實作細節,提供有類似需求的朋友參考。

【Demo表單填填看】
DBW實作分享01:年菜預購表+系統通知
https://forms.gle/AgZfKyZmggBA7fUg7

【免費分享檔案】>>雲端資料夾
歡迎”複製”檔案去練習(資料夾中有副本功能的截圖可參考)

#01 實作功能一覽

雙層Google表單:區分「套餐」與「單點」明細
 📌 表單搭配圖片(餐點照或套餐明細),方便客人選擇

系統自動寄出確認通知 Email
 📌 Email版面清爽又專業,重點資訊清楚列出

自動產生 Google日曆提醒連結
 📌 Email可一鍵加入客人Google日曆提醒取餐

自動整理訂單資訊
 ⛔ 不用手動整理顧客姓名、菜品、電話等資料,客人都幫你寫好了

試算表搭配函數快速整理訂單
 ⛔ 訂單清單、菜數、訂單金額不用計算到崩潰

#02. 應用工具與小技巧

以下是這個分享案例使用到的工具群,都可以免費入門。

(1) Chrome瀏覽器

我會登入不同mail帳號、多組設定檔(因為不同客戶也有不同mail),方便切換不同帳號和自動同步不同書籤,就算換電腦,只要登入設定檔案,就可以快速找到我需要的常用連結。

(2) Google Drive雲端硬碟

當Chrome的搜尋引擎是Google時(從瀏覽器設定查看或調整),打開分頁就能看到Google應用程式群,Google Drive雲端硬碟就是其中之一。

(3) Google應用程式群

這個案例要先新增【Google表單】,建立預約表。再從【Google表單】的「回覆」區塊,點擊「連結至試算表」,自動產生屬於這個表單的【Google試算表】,紀錄客人的回覆內容。

#03. 流程設計與GAS程式分享

其實工具、函數都不難,難在流程設計,要有邏輯的規劃、搭配適合的函數和工具,這就是要多實戰練習,比較沒辦法一下就學會,案例分享主要是分享思路,細節操作若有卡關,歡迎到剛好會@Threads討論囉!

新增預約表  →  產生連結試算表
→ 在試算表分頁整理ItemPrice(整理好的菜單選項,可用於預約表中)
→  完成預約表設計
→  告訴AI通知信的需求,產生GAS程式碼 
→ 設定GAS和觸發條件、內部測試
→  預約表開放填寫(強制登入已驗證的Google帳號,避免客人輸入打錯)
→ 系統自動通知信給客人
→  訂單資料同步在試算表,再加工函數自動計算,掌握訂單數據。

DBW雲端顧問

雙層Google表單、強制登入
 📌 用【區段】工具:第一個區段放「套餐」內容,第二個區段放「單點」內容。
在第一個區段的最後一題:要繼續前往訂購【單點】餐點嗎?設定「根據答案前往相關區段」詢問
不用,我沒有要單點。 → 提交表單
要,我要繼續單點 → 前往區段2(【單點】)

 📌 表單視覺優化:

  • 自訂主題功能(調色盤icon)可傳主視覺橫圖和自訂顏色
  • 單一問題或選項,也可以增加圖片
  • 需要獨立區塊呈現圖片,可使用右側功能列的新增圖片

AI幫我寫程式

我跟GPT溝通,基本上都很口語,沒有特別去找咒語什麼的。大家參考一下囉!

在【試算表】開啟GAS功能

命名專案並貼上AI寫的程式碼(分享在下面)

GAS完整程式碼
function sendConfirmationEmail(e) {
  const timestamp = e.values[0];
  const customerEmail = e.values[1];
  const customerName = e.values[2];
  const title = e.values[3];
  const phoneNumber = e.values[4];
  const pickupTime = e.values[6];

  // 設定套餐與合菜的對應表
  const items = [
    { name: “古厝3寶”, price: 1450, quantity: e.values[8], details: [
      “【雙倍份量】古厝臭豆腐”,
      “【1.5倍份量】紅燒牛腩煲”,
      “【1.5倍份量】麻油松阪”
    ]},
    { name: “經典合菜3300九菜一湯”, price: 3300, quantity: e.values[9], details: [
      “紅燒牛腩煲”, “古厝臭豆腐”, “白灼白蝦”, “客家小炒”, “蜜汁肥腸”,
      “樹子蒸魚”, “糖醋里肌”, “蒜炒五花肉”, “炒時蔬”, “福菜脆筍雞湯”
    ]},
    { name: “經典合菜4300十菜一湯”, price: 4300, quantity: e.values[10], details: [
      “紅燒牛腩煲”, “古厝臭豆腐”, “白灼白蝦”, “客家小炒”, “蔥油雞”,
      “蜜汁肥腸”, “糖醋黃魚”, “清炒透抽”, “宮保五花肉”, “炒時蔬”, “鳳梨苦瓜雞湯”
    ]},
    { name: “經典合菜5300十菜一湯”, price: 5300, quantity: e.values[11], details: [
      “紅燒牛腩煲”, “古厝臭豆腐”, “白灼白蝦”, “糖醋里肌”, “蔥油雞”,
      “蜜汁肥腸”, “清蒸石斑”, “清炒透抽”, “宮保五花肉”, “炒時蔬”, “香菇冬瓜雞湯”
    ]}
  ];

  // 更新單點菜品的完整價格清單
  const singleItems = [
    { name: “紅燒鱸魚”, price: 500, quantity: e.values[12] },
    { name: “紅燒黃魚”, price: 700, quantity: e.values[13] },
    { name: “香菇冬瓜雞”, price: 490, quantity: e.values[14] },
    { name: “福菜脆筍雞”, price: 490, quantity: e.values[15] },
    { name: “蛤蜊香菇雞”, price: 490, quantity: e.values[16] },
    { name: “鳳梨苦瓜雞”, price: 490, quantity: e.values[17] },
    { name: “紅燒蹄膀”, price: 880, quantity: e.values[18] },
    { name: “古厝臭豆腐”, price: 200, quantity: e.values[19] },
    { name: “紅燒牛腩煲”, price: 390, quantity: e.values[20] },
    { name: “麻油松阪”, price: 330, quantity: e.values[21] },
    { name: “鳳梨蝦球”, price: 320, quantity: e.values[22] },
    { name: “客家小炒”, price: 240, quantity: e.values[23] },
    { name: “白灼白蝦”, price: 330, quantity: e.values[24] },
    { name: “清炒透抽”, price: 330, quantity: e.values[25] },
    { name: “蔥油雞”, price: 330, quantity: e.values[26] },
    { name: “糖醋里肌”, price: 300, quantity: e.values[27] },
    { name: “蜜汁肥腸”, price: 330, quantity: e.values[28] }
  ];

  let orderSummary = “”;
  let totalAmount = 0;
  let setMenuDetails = “”;
  let singleItemDetails = “”;

  // 處理訂購的套餐與合菜內容
  items.forEach(item => {
    const quantity = Number(item.quantity);
    if (quantity > 0) {
      const subtotal = item.price * quantity;
      totalAmount += subtotal;

      // 顯示訂購明細
      orderSummary += `<li>${item.name} – 單價:$${item.price},數量:${quantity},小計:$${subtotal}</li>`;

      // 顯示套餐或合菜的詳細內容
      setMenuDetails += `<h4>${item.name} 詳細內容:</h4><ul>`;
      item.details.forEach(detail => {
        setMenuDetails += `<li>${detail}</li>`;
      });
      setMenuDetails += `</ul>`;
    }
  });

  // 處理訂購的單點菜品,包含年菜推薦
  singleItems.forEach(item => {
    const quantity = Number(item.quantity);
    if (quantity > 0) {
      const subtotal = item.price * quantity;
      totalAmount += subtotal;

      // 顯示單點菜品明細
      singleItemDetails += `<li>${item.name} – 單價:$${item.price},數量:${quantity},小計:$${subtotal}</li>`;
    }
  });

  // 設定 Google Calendar 事件連結
  const pickupDate = “20250127”;
  const pickupStartTime = “T030000Z”; // UTC 凌晨 3:00(台灣時間上午 11:00)
  const pickupEndTime = “T060000Z”;   // UTC 凌晨 6:00(台灣時間下午 2:00)
  const eventTitle = encodeURIComponent(“古厝年菜取餐日(14:00前務必領取喔!)”);
  const eventDetails = encodeURIComponent(`訂購人:${customerName}\n聯絡電話:${phoneNumber}\n訂購明細:\n${orderSummary}`);
  const eventLocation = encodeURIComponent(“古厝家常菜餐廳 – https://maps.app.goo.gl/DqjHnLYvqdD6zDoZA”);
  const calendarLink = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${eventTitle}&dates=${pickupDate}${pickupStartTime}/${pickupDate}${pickupEndTime}&details=${eventDetails}&location=${eventLocation}`;

  // 設定郵件標題和內容
  const emailSubject = `【訂購確認信】DBW實作分享01:年菜預購表+系統通知 – ${customerName}`;
  const emailBodyHtml = `
    <p>親愛的 ${customerName} ${title} 您好,</p>
    <p>感謝您訂購我們的古厝家常年菜!以下是您的訂單詳細資訊:  **這是案例分享,非實際年菜訂購單(活動已結束)** </p>
    <ul>
      <li><strong>訂購人:</strong>  ${customerName} ${title}</li>
      <li><strong>聯絡電話:</strong> ${phoneNumber}</li>
      <li><strong>預計取餐時段:2025/1/27(一)</strong> ${pickupTime}</li>
    </ul>
    <h3 style=”color:#ad3934″>套餐/合菜訂購明細:</h3>
    <ul>
      ${orderSummary || ‘<li>無訂購套餐或合菜</li>’}
    </ul>
    ${setMenuDetails}
    <h3 style=”color:#ad3934″>單點菜品訂購明細:</h3>
    <ul>
      ${singleItemDetails || ‘<li>無訂購單點菜品</li>’}
    </ul>
    <h3 style=”color:#ad3934″>總計金額:$${totalAmount} 元(取餐當天支付現金)</h3>

        <p>
    ——————————–    <br>
提醒事項:說明:這是案例分享,非實際年菜訂購單(活動已結束)。 <br>
詳細分享教學請參考DBW文章:https://dbw-corpsitter.com/happentoknow/ <br>
——————————– <br>
    </p>

    <p>請您於 <strong>2025 年 1 月 27 日上午 11:00 至下午 2:00</strong> 取餐。<br>
    【貼心提醒】餐廳當日14:00後公休,所以必須於14:00前完成取餐喔!
    </p>
    <p>餐廳位置:<a href=”https://maps.app.goo.gl/DqjHnLYvqdD6zDoZA”>點此查看地圖</a></p>
    <p>點擊以下按鈕將取餐時間新增至您的 Google 日曆:</p>
    <a href=”${calendarLink}” style=”display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 5px;”>新增至 Google 日曆</a>
    <br> <br> <br>

    <p>再次感謝您的年菜預約,祝您順心 🙂   **這是案例分享,非實際年菜訂購單(活動已結束)**
    <br>   <br>  **這是案例分享,非實際年菜訂購單(活動已結束)**
    DBW 敬上</p>  **這是案例分享,非實際年菜訂購單(活動已結束)**
  `;

  // 發送確認郵件
  GmailApp.sendEmail(customerEmail, emailSubject, , {htmlBody: emailBodyHtml});
}
GAS觸發條件設定

選擇您要執行的功能:sendConfirmationEmail

將會執行的部署作業:上端

選取活動來源:試算表

選取活動類型:提交表單時

錯誤通知設定:立即通知我

設定觸發條件

第一次運行GAS和設定觸發條件,會需要從”不安全”介面授權

因為在執行 Google Apps Script(GAS)程式時,需要存取 Google 帳戶的權限(例如 Gmail、試算表等),而這支程式還沒通過 Google 官方的驗證,所以系統跳出警告,提醒使用者「這個應用程式未經 Google 驗證」。

為什麼會這樣?

因為這不是發佈到公開市場或通過 Google 安全審查,只是自己或內部使用的私人應用,因此 Google 預設會提示「不安全」。

按「進階」繼續授權安全嗎?

只要這個程式是你自己寫的、或是信任的對象(例如你上面看到的 dbwangstudio@gmail.com)開發的,就可以 安心點「進階」→「前往 xxx(不安全)」繼續授權。

這個畫面是 GAS 開發時常見的步驟,尤其是在測試階段,幾乎每支程式都會看到這個警告,不是有害軟體也不是病毒。

✅ 客人會收到的Email

自動整理訂單資訊、試算表搭配函數快速整理訂單

函數應用和表格整理的功力,就是要自己多練習囉!

AI真的不是未來,而是現在就能用的好幫手。
像這次的案例,透過GAS加上GPT的輔助,不僅節省人工回覆的時間成本,更讓顧客體驗更好,餐廳生意更順。用好工具聰明做事,才有時間享受生活😎

一起用科技提升效率,讓工作事半功倍💪✨

#AI幫我寫程式  #用表格賺錢   #AI落地  #不只想還要做到 #一起自由工作