CatHelper開發手記_太乙之初,專案設計與發想

閱讀時間約 3 分鐘

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.送養專案變成成功的狀態,並且變成收養者的寵物


我們可以整個流程畫成個圖表

raw-image


用資料庫的方式來思考

在思考完流程,並且將其圖表化之後。我們用資料庫的方式來思考這個流程的故事與角色。

我們會有 用戶 與 專案(貓咪) 兩個資料表,為了滿足上面的流程活動,這兩個表會具備以下的欄位

用戶:

  • 角色:救援者、收養者、訪客(無)
  • 募款中的專案(救援者)
  • 募款專案歷史(救援者)
  • 送養中的專案(救援者)
  • 送養的歷史(救援者)
  • 申請中的專案(收養者)
  • 已收養的寵物(收養中)

貓咪專案

  • id
  • 狀態: 我分成1~4
    • 1:募款中
    • 2.募款完成
    • 3:送養中
    • 4.送養完成

從頁面的角度來構思專案

在完成了以服務流程與資料的規畫後,身為前端工程師。我們最終成果是要做出能夠互動的介面。所以最後來讓我們用界面來思考吧

這個專案會需要

  • 首頁
  • 募資總覽頁
  • 募資專案的細節頁
  • 送養的總攬頁
  • 送養專案的細節頁
  • 救援者後台
  1. 募款中的專案總攬
  2. 募款完成的專案總覽(成就)
  3. 送養中的專案總攬
  4. 送養完成的專案總覽(成就)
  5. 被申請中的送養專案
  • 收養者後台
  1. 申請中的收養專案
  2. 已經收養的專案(收養紀錄)

後台頁面以連結的方式導向其不同的頁面。

最後整合

在上面的規劃後,我們的得到了

  • 流程(該有的動作)
  • 資料
  • 頁面。

頁面中的核心是細節頁,在這裡會因當前用戶與該頁面的專案不同,而在頁面呈現上有所不同。

例如是否出現 編輯、新增捐款紀錄、申請送養、批准送養等按鈕。

以上的按鈕呈現也決定用戶可以怎麼推進專案的流程。

    歡迎來到我的部落格!這裡是一個分享前端開發、貓咪寫真以及與菲律賓女友生活的文化衝擊與英文學習的個人空間。我熱愛前端技術,喜歡追求最新的網頁開發趨勢,並將這些知識分享給大家。
    留言0
    查看全部
    發表第一個留言支持創作者!
    不同的運算子一起出現時,會根據其優先性(Precedence)來決定誰先誰後。MDN也很貼心的整理成表格了。 雖然有表格可以供我們查找,但是總不可能每一次用到運算子的時候,我們都去查找吧?我們最好對這張表有直觀上的理解與記憶。 那麼就讓我來分享我如何理解與記憶這張表吧! 運算子在做甚麼
    當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
    我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
    我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
    Media query可以很複雜,但是這裡KP只談最簡單、最實用的基礎。
    對於前端工程師而言,如何處理圖片是一個看是基本但是又重要的技能。就像是日本料理的師傅要懂得處理生魚片一樣。 因為flexbox的flex-item有自動伸縮的功能,所以要注意裡面的圖片如何被伸縮。
    不同的運算子一起出現時,會根據其優先性(Precedence)來決定誰先誰後。MDN也很貼心的整理成表格了。 雖然有表格可以供我們查找,但是總不可能每一次用到運算子的時候,我們都去查找吧?我們最好對這張表有直觀上的理解與記憶。 那麼就讓我來分享我如何理解與記憶這張表吧! 運算子在做甚麼
    當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
    我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
    我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
    Media query可以很複雜,但是這裡KP只談最簡單、最實用的基礎。
    對於前端工程師而言,如何處理圖片是一個看是基本但是又重要的技能。就像是日本料理的師傅要懂得處理生魚片一樣。 因為flexbox的flex-item有自動伸縮的功能,所以要注意裡面的圖片如何被伸縮。
    你可能也想看
    Google News 追蹤
    Thumbnail
    🎉週年慶限定優惠,10/24 前加入年訂閱再送 1 個月權限! 本專欄將提供給您最新的市場資訊、產業研究、交易心法、潛力股介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.
    Thumbnail
    成都世大運盛大展開,伴隨大型活動的順利籌備舉辦,除了緩解許多因為政治傾向而受波及的產業窘境,更帶來無限的商機,台灣處境夾在美中競爭的矛盾漩渦中進退兩難,基此,台灣若能扮演橋樑,發揮自身優勢,便能連袂一氣強強聯手。宏觀的看待未來才是王道,要能永續經營,必須發揚猶如賽場上的永不放棄精神,堅持就是勝利!
    Thumbnail
    【前情提要】 之前我們在經營筆記第8集,我們聊到很有關如何找到自己「與眾不同」的定位,讓你有機會在人人自媒體的年代「出圈」! 第9集,我們進一步聊到了❤️別人做什麼,你做什麼,最後大家創作出來的內容【都一樣】!所以要注意自己的解鎖範本,多半參照誰?!也以【王菲做自己】為例,提醒大家不要在經營路上,弄
    Thumbnail
    慶祝首發方格子文章 手寫一張開門紅,貼起來 這是做業務的朋友最愛春聯 不過不管做不做業務 願見者有份 祝福今年人旺財旺福氣旺💵🎉🎉🎉
    Thumbnail
    【李婉如/ 報導】《今周刊》與中華開發金控攜手合作,針對台灣中小企業的專業經理人、高階主管以及決策者進行減碳調查,並於今天(16日)舉辦「中小企業減碳調查」記者會,公布調查結果。本次調查發現,有七成企業知道台灣減碳目標為2050年前達到淨零排放、八成五企業則聽過「碳邊境調整機制」(Carbon Bo
    Thumbnail
    《GPG神遊礦寵》是一款NFT資產蒐藏交易 + GameFi + 雲端挖礦 + 虛擬寵物養成遊戲,由台灣的遊戲公司製作。 使用瀏覽器就可以玩,所以是全平台的小品遊戲喔😳😳 加入遊戲之後可以透過道具和點數升級並養成自己的礦寵,自己的NFT礦寵會在固定時間幫你挖礦,一天可以採收四次礦。
    Thumbnail
    現在為了對付通膨與高房價,央行宣布了升息,雖然不知道能不能影響房價,但知道的是讓真正想要有個家的首購族壓力更大,因此有更多人選擇租屋,不過人生都有第一次,第一次租屋時有什麼租屋注意事項嗎?或者有什麼租屋禁忌需要特別注意呢?今天小編來跟你說說在外租屋應避免的租屋陷阱吧!
    Thumbnail
    摩托車賽中的關鍵因素有很多,隨著MotoGP比賽中的差距越來越小,任何細節都不能錯過。當我們追求的是千分之一秒的差距時,每一個小細節都很重要。 我們很多不同的配備與設定都很多幫助。對我來說,首先是把手。有些人喜歡軟的,有些人喜歡硬的。接著就是跟手套的皮革有關係。所有元素都融入在一起。
    Thumbnail
    商業開發(BD),其實對大部分人來說都是一個陌生的職位。 簡單來說,如果業務是小火龍,那BD就是噴火龍。 老師之前提到:『BD偏重從0到1,與合作夥伴的資源交換、長期效益,與合作夥伴共同放大產品效益』 這正好是我最近要學習做的事,在食品業這類型的傳統產業來說,其實很少聽
    Thumbnail
    🎉週年慶限定優惠,10/24 前加入年訂閱再送 1 個月權限! 本專欄將提供給您最新的市場資訊、產業研究、交易心法、潛力股介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.
    Thumbnail
    成都世大運盛大展開,伴隨大型活動的順利籌備舉辦,除了緩解許多因為政治傾向而受波及的產業窘境,更帶來無限的商機,台灣處境夾在美中競爭的矛盾漩渦中進退兩難,基此,台灣若能扮演橋樑,發揮自身優勢,便能連袂一氣強強聯手。宏觀的看待未來才是王道,要能永續經營,必須發揚猶如賽場上的永不放棄精神,堅持就是勝利!
    Thumbnail
    【前情提要】 之前我們在經營筆記第8集,我們聊到很有關如何找到自己「與眾不同」的定位,讓你有機會在人人自媒體的年代「出圈」! 第9集,我們進一步聊到了❤️別人做什麼,你做什麼,最後大家創作出來的內容【都一樣】!所以要注意自己的解鎖範本,多半參照誰?!也以【王菲做自己】為例,提醒大家不要在經營路上,弄
    Thumbnail
    慶祝首發方格子文章 手寫一張開門紅,貼起來 這是做業務的朋友最愛春聯 不過不管做不做業務 願見者有份 祝福今年人旺財旺福氣旺💵🎉🎉🎉
    Thumbnail
    【李婉如/ 報導】《今周刊》與中華開發金控攜手合作,針對台灣中小企業的專業經理人、高階主管以及決策者進行減碳調查,並於今天(16日)舉辦「中小企業減碳調查」記者會,公布調查結果。本次調查發現,有七成企業知道台灣減碳目標為2050年前達到淨零排放、八成五企業則聽過「碳邊境調整機制」(Carbon Bo
    Thumbnail
    《GPG神遊礦寵》是一款NFT資產蒐藏交易 + GameFi + 雲端挖礦 + 虛擬寵物養成遊戲,由台灣的遊戲公司製作。 使用瀏覽器就可以玩,所以是全平台的小品遊戲喔😳😳 加入遊戲之後可以透過道具和點數升級並養成自己的礦寵,自己的NFT礦寵會在固定時間幫你挖礦,一天可以採收四次礦。
    Thumbnail
    現在為了對付通膨與高房價,央行宣布了升息,雖然不知道能不能影響房價,但知道的是讓真正想要有個家的首購族壓力更大,因此有更多人選擇租屋,不過人生都有第一次,第一次租屋時有什麼租屋注意事項嗎?或者有什麼租屋禁忌需要特別注意呢?今天小編來跟你說說在外租屋應避免的租屋陷阱吧!
    Thumbnail
    摩托車賽中的關鍵因素有很多,隨著MotoGP比賽中的差距越來越小,任何細節都不能錯過。當我們追求的是千分之一秒的差距時,每一個小細節都很重要。 我們很多不同的配備與設定都很多幫助。對我來說,首先是把手。有些人喜歡軟的,有些人喜歡硬的。接著就是跟手套的皮革有關係。所有元素都融入在一起。
    Thumbnail
    商業開發(BD),其實對大部分人來說都是一個陌生的職位。 簡單來說,如果業務是小火龍,那BD就是噴火龍。 老師之前提到:『BD偏重從0到1,與合作夥伴的資源交換、長期效益,與合作夥伴共同放大產品效益』 這正好是我最近要學習做的事,在食品業這類型的傳統產業來說,其實很少聽