CatHelper是我開發的前端 SideProject，是貓咪募資收養的一站式平台。
為何我想開發這個專案?
本身我有再餵養流浪貓，平常也常看到 FB 上常有愛心媽媽發起醫治流浪貓的募資和送養文。然而FB 的貼文有個壞處，就是很容易被洗掉，不易後續追蹤。
所以我有了設計這個平台的想法，而去搜尋了網路上相關的平台。
我發現到大部分的平台都只聚焦在募資或收養的一個面向。我覺得募資與收養整合成個流程，讓愛心媽媽(救援者)可以在個平台上直接地完成募資與送養的動作。
從服務流程與參與者為起點構思
在上述的發想後，我先將這個平台的服務流程訂為:
1.救援者創建募資專案
2.其他的用戶捐款
3.救援者更新募資專案的金額
4.當募資成功後，專案的狀態會變成成功
5.專案成功後，救援者可以將募資專案轉成送養專案
6.救援者也可以直接創造送養專案
7.想收養的人可以收養送養專案
有了基本的流程後(WHAT)，再來就是思考參與其中的角色(Who)
1.救援者
2.訪客(可以瀏覽當前的專案，但是無法收養)
3.收養者
用How來釐清與定義流程
再有基本的流程( What)與角色(Who)後，我們就用How來思考角色在流程中該如何行動，我發現到了流程中的兩個問題
1.其他用戶要怎麼捐款?
2.收養者要收養就能收養了嗎?
其他用戶要怎麼捐款?
這部分我在考慮這份 sideProject 的目的是展示性的，如果真的要涉及金流，會增加展示的難度(總不可能要你們真的用藍新金流匯款給我吧)。
所以我對這個流程做了重定義，把過程定義成:
1.救援者創建募款專案(設定目標金額，當前金額為0)，並且留下個人的信箱、帳戶
2.其他用戶透過信箱、帳戶聯絡並捐款給救援者(匯款的部分不會再平台上進行)
3.救援者自己手動更新專案的捐款紀錄
4.金額隨者捐款紀錄的金額而累積，當當前金額達到目標金額，專案的狀態就會變成募款成功
收養者要收養就能收養了嗎?
通常愛媽都會審核一下收養者的身分資格，所以這裡我改成收養者發出收養申請，愛媽在進行審核
所以送養流程會變成:
1.救援者創建送養專案(或從成功的募款專案轉換)
2.收養者看到喜歡的專案，按鈕申請按鈕申請
3.申請的收養者會出現在專案底下
4.救援者看到申請中的收養者，選擇適合的人選，按下核准的按鈕
5.送養專案變成成功的狀態，並且變成收養者的寵物
我們可以整個流程畫成個圖表
用資料庫的方式來思考
在思考完流程，並且將其圖表化之後。我們用資料庫的方式來思考這個流程的故事與角色。
我們會有 用戶 與 專案(貓咪) 兩個資料表，為了滿足上面的流程活動，這兩個表會具備以下的欄位
用戶:
- 角色:救援者、收養者、訪客(無)
- 募款中的專案(救援者)
- 募款專案歷史(救援者)
- 送養中的專案(救援者)
- 送養的歷史(救援者)
- 申請中的專案(收養者)
- 已收養的寵物(收養中)
貓咪專案
- id
- 狀態: 我分成1~4
- 1:募款中
- 2.募款完成
- 3:送養中
- 4.送養完成
從頁面的角度來構思專案
在完成了以服務流程與資料的規畫後，身為前端工程師。我們最終成果是要做出能夠互動的介面。所以最後來讓我們用界面來思考吧
這個專案會需要
- 首頁
- 募資總覽頁
- 募資專案的細節頁
- 送養的總攬頁
- 送養專案的細節頁
- 救援者後台
- 募款中的專案總攬
- 募款完成的專案總覽(成就)
- 送養中的專案總攬
- 送養完成的專案總覽(成就)
- 被申請中的送養專案
- 收養者後台
- 申請中的收養專案
- 已經收養的專案(收養紀錄)
後台頁面以連結的方式導向其不同的頁面。
最後整合
在上面的規劃後，我們的得到了
- 流程(該有的動作)
- 資料
- 頁面。
頁面中的核心是細節頁，在這裡會因當前用戶與該頁面的專案不同，而在頁面呈現上有所不同。
例如是否出現 編輯、新增捐款紀錄、申請送養、批准送養等按鈕。
以上的按鈕呈現也決定用戶可以怎麼推進專案的流程。
