React Native 記帳APP 開發紀錄 (1) – APP 的開發目的、開發工具及基本架構

最後更新於 2022 年 2 月 27 日

我開始有想做這個APP的念頭到現在大概已經兩週左右,但一直停留在「想」的階段,如果沒有人拿刀抵在我身後我大概就是不知道何時才會開始了。在這之前,當我有什麼想法並開始實踐之後,一旦碰到難關都會選擇逃避,能精簡則精簡、能輕鬆就輕鬆著來,最後只能達到自己所想的六、七成效果,所以我才想著要開這個坑,因為我這個人有點強迫症,一旦開始卻沒有完成我會覺得心裡不舒服。希望開這個坑真的能督促我完成這個APP吧。

完成週期:暫定 3 ~ 6 個月 (平時下班時間 + 週末)

開發目的

  1. 使用 React Native 開發出一個具 CRUD 的 APP,如果能上架是最好的。
  2. 自己寫後端,達到自己 90% 以上的需求。
  3. 練習 React Native 組件的封裝、樣式的集中管理及鑒權。
  4. 練習 Express、表單驗證以及使用 knex 代替直接寫 sql 語句。
  5. 自己設計 UI,不要太死板。

題材選擇

其實沒有什麼特別的原因,只是因為很想培養自己有記帳的習慣,但使用別人開發的 APP 我可能兩三天就偷懶不想記了,看自己開發出一個記帳 APP 能不能讓自己養成記帳的習慣。

開發工具

  1. 前端框架 React Native
  2. 後端框架 Express.js
  3. SQL 查詢構建器 knex
  4. 表單驗證 express-validator (或 v8n)
  5. 前端 UI 框架 RNUILib (或 Antd、Native base)
  6. UI 設計工具 Figma

期望功能

鑒於個人水平問題,暫定為以下功能(粗體字為主要功能):

  1. 收支紀錄(CRUD)
  2. 按收支分類統計圖表 (總收支),包括收支與上月對比漲幅。
  3. 可按日期範圍查看收支紀錄。
  4. 可按收支分類(多選)查看收支紀錄。
  5. 固定收支(分期付款)的紀錄和通訊欄提示。
  6. 發票二維碼掃描快速紀錄收支。
  7. 輸出時間範圍內的收支紀錄成 pdf、excel 或每月帳單紀錄。
  8. 按照收支方式分類紀錄(銀行卡、郵局卡、line pay、街口支付、虛擬貨幣、現金)。
  9. 按帳戶查看收支紀錄
  10. 離線模式(僅能查看當月收支紀錄及圖表,無其他功能)。
  11. 暗色模式
  12. 電子發票條碼管理
  13. 收支紀錄導出及導入, 支持記錄轉移裝置 (目前暫定是將數據保留在帳號中, 因此這個功能待定)。
  14. 設定支出上限及提醒。
  15. 單筆紀錄可新增多筆子紀錄,在收支紀錄列表中顯示該紀錄名稱及含所有子紀錄的收支金額。
    • 列表顯示:三天兩夜旅遊 -7,000NTD,點擊展開後顯示:晚餐 -2,300NTD, 午餐 -700NTD, 車錢 -1,500 NTD…等。

APP頁面功能

現在只是暫時構思成以下幾個頁面,之後還會再做調整(粗體字為主要功能):

  • 登入登出註冊
  • 首頁
    • 顯示總收支總額
    • 預設呈現當月全部分類的收支紀錄列表(記憶選擇的分類)
    • 日期範圍、分類(多選)、收入或支出的篩選
    • 搜尋收支紀錄
  • 單筆收支紀錄詳細頁面
    • 內容待定
  • 收支統計
    • 按日期、分類、收入或支出統計圖表
    • 點選圓餅圖上區塊可呈現該分類中的所有收(支)清單
  • 電子發票條碼管理
    • 點擊條碼紀錄可以連至該收支紀錄的詳細頁面
  • 設定
    • 新增帳戶 (預設為現金)
    • 設定匯率

UI 介面

APP 的主要設計方向:

  • 功能實用、好上手
  • UI 直覺、簡約
  • 只留最基本的功能在畫面上其他全部收起來。
  • 透明、漸層為主,100%純手刻,沒有套任何模板(所以很粗糙),視實際開發情況未來有機會再做修改。

漸層色搭配參考:https://webgradients.com/

Icon 素材皆在 FlaticonIconfinder下載

首頁

目前暫定 APP 的首頁 UI 如下圖所示:

記帳APP Home 1 React Native 記帳APP 開發紀錄 (1) - APP 的開發目的、開發工具及基本架構

頂部藍色漸層CSS:

background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);

Bottom bar 的新增按鈕底色CSS:

background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);

UI 部分目前只完成首頁預覽部分,其他待完成後再分享出來。

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論