雛形做出來了：
收費、登入與通知怎麼往下做？

1. PHASE 01認識 Vibe Coding 和工具
2. PHASE 02第一次做出東西
3. PHASE 03規劃你的產品
4. PHASE 04做出小店預約
5. PHASE 05上線前要懂的事
6. PHASE 06換成你的點子
7. PHASE 07往商用產品前進

這一課動到：網頁、App（觀念：登入、收費、通知和上架怎麼往下做）

你現在在這裡：第 7 階段的第一課。前面做出了小森髮廊和你自己的產品雛形；這一課只有觀念，不用動手，看往商用前進還能加哪些功能。

雛形做出來了，下一步先做什麼？

雛形能跑之後，不必把收費、登入、通知一次全部補齊。先找幾個真的客人試用，看他們卡在哪、願不願意付錢，再依答案挑一項往下做。每一項都要先到服務商申請帳號、準備資料，這一課告訴你各要準備什麼。

下面六項，每一項都照同一個順序說：它是什麼、什麼情況才需要、什麼情況可以先不做、開始前要準備什麼、往哪裡繼續研究。這一課只講方向，不動手做；真的要做其中一項時，一樣請 Codex 一次只加一件事。

從及格到好用：視覺與互動

是什麼

視覺像店面裝潢，互動像店員帶位：客人一打開就知道要按哪裡，不用問人。這門課的雛形做到「勉強看得過去」就及格；好用，是客人第一次用也不會按錯、看了覺得放心。這一塊的正式名稱是 UI／UX 設計，UI 管畫面長相，UX 管用起來順不順。

什麼時候需要

真人試用時，有人找不到按鈕、看不懂畫面，或覺得網站看起來不太可靠、不敢留電話。

可以先不做

試用的人都能順利完成預約，只是覺得「不夠漂亮」。先把流程做對，外觀之後再整理。

開始前準備

找幾位目標客人真人試用，做法和第 17 課一樣，記下每個人卡住的地方；再挑兩三個你喜歡的網站或 App 當參考。找設計師時，把雛形、試用紀錄和參考一起交給他。

繼續研究

找 UI／UX 設計師看你的雛形；小地方也可以把試用紀錄貼給 Codex，請它一次只改一個卡住的地方。

會員與第三方登入：Google、LINE、Apple

是什麼

會員登入像店裡的會員卡：客人報上身分，店家就找得到他的預約紀錄和點數。第三方登入是讓客人直接用 Google、LINE 或 Apple 帳號登入，不必再記一組新密碼。

什麼時候需要

客人要回來查自己的預約、累積點數，或要付費訂閱時，系統得知道「這是誰」。

可以先不做

像小森髮廊這樣，客人留姓名和電話、用確認信裡的取消碼就能取消（第 14 課做的），就先不需要會員。

開始前準備

每一家都要先到它的開發者網站申請，登記你的網站網址或 App，拿到一組識別碼，再交給 Codex 串接。App 要上架 App Store 時，如果用 Google、LINE 這類第三方登入當主要帳號，Apple 規定要再提供一個只收姓名和 email、可以隱藏 email 的登入選項，Sign in with Apple 就符合，少數情況例外。App Store 審核指南 4.8 ↗

繼續研究

Google 登入 ↗LINE Login ↗Sign in with Apple ↗

金流：讓客人線上付款

是什麼

金流服務像店裡的刷卡機：客人刷卡或轉帳，錢先進服務商，再照約定撥到你的銀行帳戶，你不必自己保管客人的信用卡號碼。台灣常見的有綠界、藍新。綠界 ↗藍新 ↗

什麼時候需要

要收訂金、預付，或賣訂閱月費時；或是常有客人預約了卻沒來，想先收一筆訂金。

可以先不做

到店付款就好的生意，例如小森髮廊，雛形階段不必接金流。先確認真的有人願意付錢，再接。

開始前準備

決定用個人、行號還是公司名義收款。以綠界為例，個人和公司行號都能註冊：個人準備身分證、同名的台幣帳戶和販售網址；公司行號準備統一編號、登記文件和稅籍資料。一般賣家的信用卡只收國內卡一次付清，要分期或收國外卡，得另外申請特約賣家。費用與條件見下方對照表。

繼續研究

比較各家的手續費、多久撥款、支援哪些付款方式。收費不只是接金流，定價、退款規則、客服都要一起想，可以接著讀〈用 AI 做出 SaaS，開始收費前要準備什麼？〉。

簡訊與 LINE 通知

是什麼

第 14 課的確認信寄到本機的測試收信匣；正式上線後，要改成真的送到客人手上。除了 email，台灣客人更常看簡訊和 LINE：簡訊直接傳到客人的手機號碼；LINE 通知是從你店的 LINE 官方帳號，傳訊息給加了好友的客人。

什麼時候需要

客人常忘記預約、需要前一天提醒，或 email 常被當成垃圾信。

可以先不做

客人不多，店家自己打電話或傳訊息提醒就忙得過來。

開始前準備

簡訊要找簡訊服務商開帳號，通常按則計費。LINE 通知要先開 LINE 官方帳號，再用 Messaging API 從你的系統送訊息；API 像點餐窗口，你的系統把要傳的內容遞過去，LINE 幫你送出。客人要先加你的官方帳號好友才收得到。官方帳號依每月可免費發送的則數分方案，費用見下方對照表。

繼續研究

Messaging API ↗官方帳號方案 ↗

網路上很多舊文章教 LINE Notify，它已在 2025 年 3 月 31 日結束服務。現在要從系統發 LINE 訊息，改用 LINE 官方帳號的 Messaging API。LINE 公告 ↗

推播

是什麼

推播是 App 在手機上跳出來的通知，像在客人口袋裡放了一個小鈴鐺：App 沒打開，也叫得到人。

什麼時候需要

已經有 App、客人會裝在手機上，而且有值得提醒的事，例如「明天 10:00 的剪髮預約」。

可以先不做

只有網頁、還沒上架 App，或簡訊、LINE 通知已經夠用。

開始前準備

iPhone 的推播要透過 Apple 的推播服務，要先加入 Apple Developer Program；Android 常用 Google 的 Firebase Cloud Messaging，它像幫你把通知送到每支手機的郵局。客人第一次打開 App 時，要按「允許」才收得到通知。

繼續研究

Firebase 推播 ↗Apple 通知 ↗

上架 App Store 與 Google Play

是什麼

第 15、16 課的 App 只在你電腦的模擬器上跑。上架像把商品放進百貨公司的櫃位：先申請櫃位、通過審核，客人才搜得到、下載得到。

什麼時候需要

客人會常常回來用，App 比網頁方便，或需要推播提醒。

可以先不做

網頁版用手機瀏覽器就能預約，客人一年只來幾次。

開始前準備

兩邊都要先申請開發者帳號並付費，條件見下方對照表。另外要準備 App 圖示、幾張畫面截圖、一段介紹文字，以及隱私權政策的網址（第 24 課會講）。Apple 以公司名義申請時，要有 D-U-N-S 編號，它像公司的國際身分證字號，由鄧白氏公司核發。

繼續研究

Apple 開發者計畫 ↗Google Play 帳戶 ↗

Windows：Android App 上架 Google Play 不需要 Mac；上架 App Store 一般要用 Mac 送出。

費用與申請條件對照

怎麼決定先做哪一個

回頭看真人試用的紀錄，照客人的反應挑：

• 客人不知道怎麼用、看了不放心：先改視覺與互動。
• 客人會用，但常常忘了來：先做簡訊或 LINE 通知。
• 客人說願意付錢：先接金流，同時準備第 24 課的發票與報稅。
• 客人想回來查自己的紀錄：先做會員登入。
• 客人每週都會用：再考慮上架 App 和推播。

一次只挑一項。做完、再找人試用，看有沒有解決問題，再挑下一項。

成果檢查

• 我能用自己的話說出視覺與互動、登入、金流、通知、推播、上架這六項各是什麼。
• 我知道小森髮廊這樣的生意，哪幾項可以先不做，理由是什麼。
• 我知道接金流、第三方登入、上架 App 前，各要先到哪裡申請、準備哪些資料。
• 我能依試用紀錄，說出自己的產品下一步先做哪一個。

四項都打勾，就可以進下一課。細節記不住沒關係，真的要做時回來查這一課和官方連結。

卡住時怎麼辦

官方文件都是英文，看不懂

把這段貼給 Codex，換成你要看的網址：

請用沒有程式背景的人聽得懂的話，幫我整理這份官方文件：（貼上官方網址）
告訴我：這個服務在做什麼、申請要準備哪些資料、需不需要公司或行號、要付哪些費用。
官方文件查不到的就說查不到，不要猜。先不要改我的專案。

不確定自己的產品需不需要某一項

把第 06 課寫的產品說明一起貼給 Codex：

這是我的產品說明：（貼上第 06 課寫的產品說明）
請看看視覺與互動、會員登入、金流、簡訊與 LINE 通知、推播、上架 App 這六項，
哪些現在就需要、哪些可以先不做，各說一個理由。只要建議，先不要改任何檔案。

我看到的價格和表格不一樣

各家常調整方案與價格，也可能依地區顯示不同幣別。表格上方有資料時間，實際費用以官方頁面為準。

練習：替你的產品排出下一步

常見問題