本文同步刊載於 我的個人部落格

從 user story 開始思考網站功能

延伸第一天的主題發想，我將自己視為使用者，站在使用者角度出發後，初步規劃網站功能簡列如下：

• 顧客註冊/登入時，只需提供信箱與密碼，沒有其他必填資料。
• 店家註冊時，除了信箱、密碼，另外需要提供店名等基本資訊。
• 店家登入時，使用信箱(即帳號)與密碼。
• 店家必須完成填寫詳細資訊(如：真實店家地址、連絡電話、匯款帳號等)，才可新增預約項目，以便後續提供顧客參考。
• 顧客預約時，點選日期、時段、填寫電話號碼，經簡訊驗證完成，確認是真實可連絡之電話號碼後，即可看到店家提供之訂金匯款帳戶。
• 顧客之訂金匯款成功後，提供匯款後5碼供店家查核。
• 店家查核確認後，才是預約成功。並在此時顧客可看到真實店家地址與連絡電話。

上述內容會在後續 flow chart 的環節詳細介紹。

起手準備

針對專案開發，事前準備是不可少的：

1. 專案名稱發想

因為主功能是預約訂位，也希望可以藉由訂金預付方式、站在業者與消費者立場都能兼顧權益的狀況下，取了個中立的名稱，就叫「好好訂位」。

2. Logo 發想

圖案部分，我習慣第一眼很清楚可以表達網站主功能的那種，以這次專案主功能來說，我想以一張椅子來呈現。而為求效率，我找到一個開源網站（Icons 8），它提供免費的圖檔、並可簡易在線上編輯樣式後下載，最後選擇這張小椅子做為 logo。

3. domain 購買

延續上一點的 Logo 發想理念，我想每次訂位對店家或顧客來說都是一位難求的，透過有信任和制度的訂位後，也可以說是一種佔位？總之我是用了那個 <input> 的 placeholder (佔位符)這個詞買了 domain 啦～

4. Flow Chart 編輯工具

在列出專案需求後，我習慣先規劃整個網站的流程圖，確認功能和畫面是否順暢。對於 Flow Chart 的實作，我認為這篇文章—「先別急著畫UI，你聽過Flow Chart嗎」說明的非常清楚，在工作上接收到新需求時，我也常會回頭觀看，確認規劃的完善度。在此專案中，我想使用 Drawio 線上版做為我的編輯工具。

5. Wireframe 繪製工具

在 Flow Chart 初步確認後，我才會開始繪製網站的 Wireframe，但因為我想把主要時間留在後續功能的開發上，所以 Wireframe 部分，會以較簡潔方式呈現，使用的是 Whimsical 這個線上多合一圖表平台。

開發技術有哪些

當然，空有想法，而不去付諸實行，專案是永遠無法完成的。

我平常是一名前端工程師，前端框架上選擇使用自己相對熟悉的 React.js 搭配 Tailwind CSS。另外因為此次專案開發項目並不複雜，希望可以在資料庫架設與部屬上降低開發成本，所以選擇 Firebase 這個 Baas (Backend as a Service) 後端服務平台來應用專案中所需要的各種後端功能。程式碼預計會放在我的 GitHub 上面，版本控制的 commit 訊息則是會使用 Conventional Commits 的規範。