iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
1
Modern Web

從零開始的個人化記帳程式開發系列 第 27

記帳程式 (27):來做個待購清單吧!

前幾天已經將基本的記帳功能整理的差不多了,今天就來做一些新東西吧!

下一個題目

看著前面盤點出來的功能:

  • 每月記帳本
  • 年收支記帳表
  • 多帳戶理財規劃
  • 大筆消費
  • 待購清單
  • 各種圖表分析

雖然還有很多項目可以選擇,但後來想一想有一些功能可以用更好的 Excel 技巧就能解決,於是最後的幾篇就決定選擇了「待購清單」這個看似還可以發揮的功能來做。

功能及畫面發想

在待購清單這個功能中,當初參考電腦玩物的「我的 Evernote 欲望清單,用筆記節制衝動購物念頭」這篇文章實踐,將待購的東西分成「想要」、「需要」、「昇華」、「滿足」四個階段。

所以畫面上應該會是四個類似 to-do list 的東西,然後要能拖拉。這個需求馬上就讓我想到很像一個東西 —— trello,或者可以稱它為看板(Kanban),這是一個常被用在團隊協作時,做專案開發任務管理的工具。

那待購清單的這個功能就用 trello 解決拉,今天就先到這,我們明天見!

欸不是,這樣我又沒題目可以做了。

搜集相關資訊

開玩笑的,當然還是要來練習一下自己動手做,在腦力激盪時很適合到 CodePen 上面尋找靈感,看看是不是有人做過類似的東西。

果不其然,在搜尋了「Kanban」後出現了好幾個:

Kanban Drag and Drop

jKanban - Javascript plugin for Kanban boards

Simple Drag and Drop Lean Kanban Board Tool

這幾個都是點閱率挺高的前幾個結果,操作上也都蠻順暢的。瀏覽了一下實作方法,他們在實作拖拉的這個效果時,都使用了另外的套件來實作,像是第二個用的是一個作者另外自己切出來的套件叫 jKanban;而第一與第三個範例用的都是 dragula 這個套件,在它的 Github 上竟然還有快兩萬顆星星,看起來是個不錯的選擇。

小結

今天決定了要做「待購清單」這個功能,並且也針對需求做了畫面的發想,並實際找了幾個不錯了範例及套件,接下來幾天會來動手實作出一個我自己的待購清單,也算是勉強有切題到「個人化」這個系列題目。

今天先到這,我們明天見~


上一篇
記帳程式 (26):專案開發 Part.6 - 支出分類
下一篇
記帳程式 (28):待購清單 Part.1 - 初始畫面及排版
系列文
從零開始的個人化記帳程式開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言