網頁實作 — 管理你的生活花費

今天要向大家呈現的作品是一個網頁記帳軟體。這個記帳軟體是一個Chrome的擴充套件,同時也是一個網頁。

這篇文章會著重在分享我自己的實作歷程,希望可以跟大家一起交流進步。


0. 實作網頁記帳軟體的前因後果:

「前因」:想要做好個人的財務規劃,而做好這件事情的前提是瞭解財務結構。所以需要一個可以方便記錄花費的方法或是軟體。而現在市面上的記帳軟體功能非常豐富,但都沒有完全免費的,而且不一定需要這麼多專業的功能。

所以我想要做一個適合自己的記帳軟體,一個簡單快速的網頁記帳軟體。

「後果」:基本上我現在都在使用自己親手打造的雲端記帳軟體,但其實市面上還有非常多優秀的記帳軟體值得大家一試。


1. 使用者輸入資料

首先,為了能夠知道使用者花了多少錢,需要一個表單來讓使用者填入資料。


2. 儲存資料

可以輸入資料後,再來需要存取資料的資料庫。

這裡有很多種選擇,主要考慮的有 DocumentDB 與 Firebase 。

最後我選擇 Firebase 作為後端資料庫,是因為 DocumentDB 有時候會因為贊助經費花完而被關掉,不然 DocumentDB 也是解決問題的一條路徑。


3. 呈現資料

可以輸入以及儲存資料後,再來需要在網頁端呈現資料,每筆資料以表格形式呈現並加入更新與刪除功能。

然後使用 Canvas 做出一個網頁的視覺化資料。


4. 使用者帳號

為了保護資料安全與個人化的設定,所以增加了使用者登入登出的功能。

為了簡化登入註冊流程,所以增加了 Google 與 Facebook 的登入方式,讓使用者可以更方便選擇自己想要的登入方式。


5. 專屬網域

使用 Azure 主機部屬網頁,利用 Azure 可以使用自己網域的機會,申請 skyran.me 的專屬網域,並添加 SSL 憑證。


6. 擴充套件功能

由於網頁有其限制,所以想要做成擴充套件。目前的功能是當使用者打開新分頁就是記帳網站首頁。接下來考慮實作為跳出提醒通知。


7. 使用者體驗

這樣基本功能就都完成了,再來是關於使用者體驗的細節優化。

(1) 當沒有資料的時候會顯示 Add New Expense 的 Button。

(2) 由於資料都在雲端上,傳輸資料需要等待時間,所以增加一個 Loading 圖示。

(3) 以時間倒序排列,讓使用者更方便查閱詳細資料。

(4) 為了達到快速直覺的核心價值,所以優化表單的輸入方式。包括下拉選單轉為 Button,日期自動設為今天。加快輸入資料的流程。

(5) 由於使用行動裝置記帳的機率非常高,所以專門針對手機、平版等版面進行優化。


8. 未來專案規劃

至此,網站基本完成。

接下來的規劃是實作個人化設定不同分類的功能,擴充套件提醒通知的功能,與多個專案投資花費管理。


9. 使用技術

最後是實作網站使用到的一些技術,包含 Azure + Firebase + Chart.js + Bootstrap + Express + Bower + Eslint + Git 等等。


總結來說,我認為 Expense Manager 有幾個主要的特色。

  1. 雲端記帳:免安裝,跨平台,即時同步記帳資料。
  2. 行動優先:專門針對手機版面開發,打造流暢的使用經驗。
  3. Chrome 擴充套件:新分頁自動打開記帳首頁的功能。

如果您有快速記帳的需求的話,值得您嘗試看看。

「 Expense Manager 」網站

「 Expense Manager 」 Chrome 擴充套件

感謝您閱讀,歡迎大家與我交流您的想法與思考。