指南

如何建立預約應用程式:時段、可預約時間、提醒及訂金

要建立預約應用程式,需要四樣東西互相配合運作:可供預約的項目清單(服務、房間、員工)、每項目何時可用的規則、一個只提供真正空閒時段的預約流程,以及讓商戶管理所收到預約的私人頁面。AI 應用程式生成器可以根據簡短描述,在數分鐘內生成可運作的首個版本;真正的工作在於決定規則,例如每個時段的長度、緩衝時間、取消政策、時區,並測試重複預約是否確實不可能發生。

先決定「預約」對你來說是什麼

預約應用程式表面看起來很相似,但底層的分別很大。請先回答以下問題:

  • 預約的是什麼? 一項服務(例如剪髮)、一個人(例如補習老師)、一項資源(例如會議室、球場、貨車),或是某節課堂中的一個座位(例如一節有 12 個名額的瑜伽班)。
  • 需時多久? 每項服務固定時長,還是由客戶自行選擇?
  • 由誰提供? 一個人、多名各自有工作時間的員工,還是沒有人(例如一個房間)?
  • 預約後會發生什麼事? 即時確認,還是由商戶審批的申請?
  • 是否涉及金錢? 免費、到場付款、預先繳付訂金,還是全額預付?

「要求一個時間,商戶以電郵確認」遠比「即時預約,並對照三個員工行事曆,同時收取訂金」簡單得多。兩者都可行,請選擇你在第一版真正需要的那一種。

應用程式需要什麼

資料

資料表主要欄位
服務名稱、時長、價格、之後的緩衝時間、是否啟用
員工或資源名稱、提供哪些服務
可用時間每位員工每週的工作時間,加上例外情況(假期、臨時休業)
預約服務、員工、開始時間、結束時間、客戶資料、狀態(待確認、已確認、已取消)、付款狀態
客戶姓名、電郵、電話、備註。一開始可以不設;也可以直接存放在預約紀錄中

在每筆預約中同時儲存結束時間,而不只是開始時間,會令重疊檢查簡單得多。

頁面

  • 公開頁面:服務列表、時段選擇器、預約表格、確認頁面,以及取消或改期的連結。
  • 私人頁面(商戶或員工):今日行程、即將到來的預約、封鎖休假時間的方式,以及服務和時間的設定。

權限

客戶只應看到空閒或已佔用的時段,絕不應看到其他客戶的姓名。員工可能只能看到自己的行程,商戶則可看到全部。請把這些寫下來,因為它決定了你是否需要登入功能和角色。我們的為應用程式加入登入功能指南會介紹各種選項。

較難處理的部分,以及處理方法

重複預約

這是經典錯誤:兩個人同時載入頁面,都看到 10:00 有空,然後都預約了這個時段。解決方法是在預約儲存時,於伺服器上再次檢查,如果此時有任何時段重疊,就拒絕該預約。請明確要求這樣做:

儲存預約時,請在伺服器上重新檢查同一員工是否已有已確認或待確認的預約與要求時間重疊(包括緩衝時間)。如有重疊,請拒絕並顯示「該時段剛剛被預約,請選擇其他時間」。

然後用兩個瀏覽器視窗進行測試。

時區

請將每個時間以 UTC 儲存,顯示時再換算。決定預約頁面應顯示誰的時區:親身服務通常顯示商戶的時區,線上通話則通常顯示客戶的時區,並在頁面上標明。請測試跨越夏令時變更日期的預約。

緩衝時間、提前通知與上限

值得事先決定的常見規則包括:預約之間的緩衝時間、最短提前通知時間(「不接受少於兩小時前的預約」)、可以提前多久預約,以及每日上限。每項規則在提示中只需一句話;如果沒有寫明,AI 就會替你選擇預設值。

取消和缺席

每份確認都應附有一個帶獨特代碼的取消連結,讓客戶無需帳戶也能取消。請決定取消的時限,以及訂金是否可退還,並在付款前顯示這些政策。

提醒

提醒電郵或短訊需要能按排程執行的功能(例如「每 15 分鐘檢查一次,向 24 小時後開始的預約發送提醒」)。請先查看你的生成器和託管服務如何處理排程工作。如果不支援,可以使用外部排程器,定時呼叫應用程式內的端點;或在確認電郵中附上行事曆邀請,讓客戶自己的行事曆為他們提醒。電郵服務供應商方面的設定,請參閱如何從應用程式發送電郵。

訂金及付款

使用 Stripe 的常見模式如下:

  1. 客戶選擇時段;應用程式建立一筆待確認的預約,把該時段保留一段短時間(例如 15 分鐘)。
  2. 應用程式把客戶導向 Stripe Checkout 頁面繳付訂金。
  3. 付款成功後,Stripe 透過 webhook 通知你的應用程式,預約狀態變為已確認。
  4. 如果未能在限時內付款,待確認的預約會過期,時段重新開放。

截至 2026 年 9 月,Stripe 的標準收費是每筆成功的信用卡付款收取一個百分比加一個固定費用,沒有月費;費率因國家而異,請查閱 Stripe 的收費頁面了解你所在地區的費率。在一切運作正常之前,請使用測試模式和測試卡。我們的加入付款功能指南會逐步說明。

行之有效的首個提示

為 Northside Barbers 建立一個預約應用程式。服務:剪髮(30 分鐘,$25)、修鬚(15 分鐘,$12)、剪髮加修鬚(45 分鐘,$32)。兩位髮型師 Sam 和 Ali,各自在星期二至星期六 9:00 至 18:00 工作。客戶先選擇服務,再選擇髮型師或「任何髮型師」,然後只會看到未來 14 天內空閒的 15 分鐘開始時間,並輸入姓名、電話和電郵。預約儲存在資料庫中,每個預約後保留 10 分鐘緩衝時間,儲存時重新檢查可用性以防止重複預約。顯示附有取消連結的確認頁面。商戶有一個私人頁面,列出今日及即將到來的預約,可以取消預約,也可以封鎖時間。所有時間均為店舖當地時區。設計需乾淨,並以手機為先。

這個提示列明了服務、員工、時間、規則和商戶的視角,這些都是 AI 否則需要自行猜測的內容。

建置步驟

  1. 先建立核心預約流程。 服務 → 時段 → 表格 → 儲存預約 → 確認。在這個流程能在手機上順利運作之前,不要加入其他功能。
  2. 商戶檢視頁面。 今日列表、即將到來的列表、取消預約、封鎖時間。
  3. 保護商戶頁面。 在輸入真實資料之前,先加入登入功能。
  4. 規則。 緩衝時間、提前通知期、可預約的最遠日期、假期。
  5. 電郵。 附有行事曆邀請和取消連結的確認電郵。
  6. 如需要訂金,先在 Stripe 測試模式中完成。
  7. 測試邊緣情況。 兩個視窗同時預約同一時段、跨午夜的預約、夏令時日期,以及取消預約後時段重新開放。
  8. 發布,然後在分享連結之前,先自己做一次真實預約。

常見錯誤

  • 只在瀏覽器中檢查可用性。 看起來正確,但仍會重複預約。
  • 儲存本地時間卻沒有時區。 在時鐘改變之前都運作正常,之後就出錯。
  • 在公開行事曆中顯示客戶姓名。 只應顯示空閒或已佔用。
  • 第一天就加入員工排班、積分獎勵和短訊功能。 先推出核心流程,再加入客戶真正要求的功能。
  • 商戶沒有封鎖時間的方法。 第一個病假日就會造成缺席。

何時 Calendly(或類似工具)是更好的選擇

如果你只是一個人,需要分享時間作為通話之用,排程工具很難被超越。截至 2026 年 9 月,Calendly 的免費方案包括一種活動類型、一個行事曆連結,以及可自訂預約頁面的一對一排程;付費方案則增加更多活動類型和團隊功能。這類工具可以即時連接你現有的行事曆,而自行建立的應用程式則需要專門開發這項功能。

當你需要這些工具不支援的規則、多項可預約資源、全程使用自家品牌、預約需要連接其他資料(例如客戶、訂單、會員資格),或你正在建立一個預約產品來出售予他人時,就應該自行建立。

使用 Mythex 建立

在 Mythex 中,你可以在聊天中描述預約應用程式,它會在即時預覽中建置,並在需要儲存預約時加入 Postgres 資料庫。文件中的預約頁面用例建議先從預約申請表格和管理員列表開始,再逐步加入其他功能。請清楚了解哪些功能已內建,哪些需要你自行連接:Mythex 沒有內建的行事曆同步、短訊提醒或訂金產品。電郵透過你自己的服務供應商發送,訂金透過儲存為專案機密的 Stripe 金鑰處理(Stripe 指引),而重複預約和時區規則則需要你如上所述自行訂明並測試。

/test 指令可以讓代理在預覽中逐步測試預約流程,並回報哪裡出現問題。如需起步提示,可以嘗試理髮店預約網站或會議預約器範本,或瀏覽所有應用程式範本。

常見問題

預約應用程式需要哪些功能?

最基本的包括:附有時長的服務列表、只顯示空閒時段的方式、預約表格、確認頁面,以及一個讓商戶查看和管理預約的私人頁面。提醒、訂金和員工行事曆可以之後再加。

怎樣防止重複預約?

在預約儲存的那一刻,於伺服器上重新檢查可用性,而不是只在頁面載入時檢查。如果該時段在此期間已被佔用,就拒絕這次預約。測試方法是用兩個瀏覽器視窗同時預約同一時段。

自行建立的預約應用程式可以收取訂金嗎?

可以。常見做法是把客戶導向 Stripe Checkout 頁面繳付訂金,並在付款成功後才確認預約。你需要自己的 Stripe 帳戶和金鑰。

我應該自行建立預約應用程式,還是使用 Calendly?

如果只是一個人需要分享自己的空閒時間,而整個流程又沒有特別之處,Calendly 這類排程工具會更快,營運成本也更低。當你需要自己的規則、多項資源、全程使用自家品牌,或是預約需要與你保存的其他資料連結時,就應該自行建立。

Mythex · Pricing · 用 AI 建造任何嘢 · 網站及應用程式範本 · Mythex 比較 · AI 應用程式開發詞彙表 · 免費 AI 應用程式開發工具 · English

English አማርኛ العربية Български বাংলা Bosanski Català Čeština Dansk Deutsch Ελληνικά Español Español (España) Eesti فارسی Suomi Français Français (Canada) ગુજરાતી हिन्दी Hrvatski Magyar Հայերեն Bahasa Indonesia Íslenska Italiano 日本語 ქართული Қазақ тілі ಕನ್ನಡ 한국어 Lietuvių Latviešu Македонски മലയാളം Монгол मराठी Bahasa Melayu မြန်မာ Norsk bokmål Nederlands ਪੰਜਾਬੀ Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Slovenščina Soomaali Shqip Srpski Svenska Kiswahili தமிழ் తెలుగు ไทย Tagalog Türkçe Українська اردو Tiếng Việt 简体中文 繁體中文(台灣)