可視化個人任務管理系統的設計與實現

王 麗

(廈門大學嘉庚學院信息管理與信息技術教研室 福建 廈門 363123)

0 引言

相對于任務管理,項目管理是一個更大的概念,通常一個項目被拆分為多個任務進行跟進。目前市面上的任務管理軟件大多數是從項目管理的角度進行設計的[1],如事務與項目跟蹤軟件Jira、團隊項目任務管理軟件Worktile、小團隊任務管理軟件Teambition,特點是通用性強、功能強大,但如果單純用于任務管理,學習成本相對較高,且無源代碼不便二次開發[2]。也有少數單純的任務管理軟件如滴答清單,功能強大,但日歷視圖需要會員,且以移動端為主,Web端的體驗稍差。

從角色上看,任務又分為團隊任務、個人任務?；陧椖康娜蝿胀ǔＪ菆F隊任務,通過任務看板清楚地展示待辦任務、進行中任務及已完成任務,用于跟進團隊任務狀態,實現團隊的無障礙溝通和透明化管理[3-4]。個人任務則更加簡單,無需關注團隊協作,只需跟進任務狀態和任務起止時間。

本文所提可視化個人任務管理系統旨在提升個人任務管理的效率,培養個人任務管理的習慣。功能包括創建任務、修改任務、排序任務、更新任務狀態、將任務分配到日歷日程等,可視化以任務看板和任務日歷日程的方式體現,操作方式主要是拖拽和點擊,簡單直觀,有助于增強個人任務管理的興趣。

1 系統分析

1.1 需求分析

個人任務管理相對于團隊任務管理、項目任務管理更加簡單,無需考慮團隊協作,無需區分生活任務還是工作任務,只需單一的記錄任務、排定順序、跟進任務即可,有助于全局安排任務、提醒備忘任務、高效完成任務。本文設計的個人任務管理系統主要滿足以下要求:①簡潔、美觀的操作界面,有助于增強個人任務管理的興趣;②整個系統的操作流程直觀、順暢,所見即所得;③功能涵蓋任務看板、任務排序、任務日歷日程分配、按條件查詢任務等;④操作簡便,易于上手。

1.2 可行性研究

通過學習和使用市面上優秀的任務管理系統,汲取優點,彌補不足,設計并實現一款簡潔、易操作的個人任務管理系統。

在設計上,以可視化為主,主打任務看板和任務日歷日程,相對于市面上的任務管理系統的相應功能做了一些調整。通常任務看板有三列組成,待辦任務、進行中任務和已完成任務。對于個人任務管理,一方面,有些任務只需關注待辦狀態和已完成狀態,無需關注過程即中間的進行中狀態,操作時直接從待辦狀態變更到已完成狀態;另一方面,從數量和重要性上看,通常待辦任務偏多且重要,進行中任務較少且重要,已完成任務最多但歷史的已完成任務并不重要。因此,考慮將看板的三列改為兩列,待辦任務獨占一列,進行中任務和已完成任務共用一列,上下分布,這樣無論從待辦狀態拖拽到進行中狀態或者已完成狀態,還是從進行中狀態拖拽到已完成狀態都是極為便利的。日歷日程操作通常是點擊日歷日期創建日程,但在個人任務管理里并不是所有任務都需要設置日程,比如簡單任務就無需關注時間跨度,且規劃任務時習慣在待辦狀態統一創建好任務,因此考慮將任務日歷日程操作簡化為復制已有任務并給任務分配日程時段,操作上直接將任務拖拽到日歷的對應日期即可,這樣既增加了操作的趣味性也保留了與任務看板操作的連貫性。

在技術實現上,采用前后端分離架構,前端即瀏覽器端主要負責界面交互和數據展示,后端即服務器端主要負責存儲數據和提供接口,前后端通過HTTP(hypertext transfer protocol,超文本傳輸協議)請求和響應進行數據的交互[5]。前端技術棧使用Vue+Bootstrap+VueDraggable+FullCalendar,Vue是目前流行的Web前端框架,優點是響應式數據綁定和組件化讓開發更加快捷,虛擬DOM(document object model,文檔對象模型)技術讓頁面渲染更加流暢[6];Bootstrap是基于HTML(hyper text markup language,超文本標記語言)、CSS(cascading style sheets,層疊樣式表)和JavaScript(簡稱JS)前端框架,提供豐富強大的內置組件,讓前端開發更加迅速、簡單;VueDraggable是一款基于Sortable.js實現的Vue拖拽插件,可用于實現任務拖拽,變更任務狀態;FullCalendar是一款極其優秀的日歷控件,支持日程和拖拽,可用于實現把任務拖拽到日歷日程及日程事件。后端技術棧使用Spring Boot+MySQL,Spring Boot框架是基于Spring框架的優化,開箱即用和約定優于配置的策略極大地簡化了配置工作,提高了開發人員的開發效率;MySQL是一個開源、跨平臺的關系型數據庫,功能強大,運行速度快,安全性高,目前在全球數據庫人氣排名第二,可用于存儲個人任務的數據。

2 系統設計

2.1 系統目標

每個人都需要做好任務管理,但出于習慣、沒時間、懶惰、不重要等原因,往往會疏忽個人任務的管理,導致辦事效率低、忘記某件事、或者拖延某件事。通過可視化個人任務管理系統讓每個人實踐個人任務管理、習慣個人任務管理,在不知不覺中提高個人辦事效率。具體目標細分為以下4個方面:①對任務流進行可視化,激發人們的興趣;②統一操作,簡化流程,一個頁面只做一件事;③界面設計友好、美觀,讓人印象深刻;④數據存儲安全可靠,系統運行穩定流暢。

2.2 系統功能結構

個人任務管理系統的功能結構如圖1所示。主要包括用戶管理、可視任務管理和列表任務管理3大模塊。用戶管理模塊是基礎模塊,管理用戶注冊、登錄等信息;可視任務管理模塊是核心模塊,對任務進行增、刪、改、查、排序及可視化展示,還支持將任務拖拽到日歷的日程,即與日歷模塊聯動;列表任務管理模塊以列表形式展示所有任務,支持按條件查詢任務。

圖1 功能結構

2.3 數據庫設計

數據庫設計是個人任務管理系統建設的核心和基石。良好的數據庫設計能夠充分體現系統的需求,保證數據的完整性,提高系統的查詢效率[5]。

本系統的數據庫設計共3張表,它們之間的關系如圖2所示。任務表(task)是最重要的表,用于存儲任務的基本信息,如任務名稱、任務狀態、任務排序編號等,其中任務狀態包括待辦、進行中、已完成3種狀態。任務日程表(tocalendar)用于存儲任務的日程信息,id與任務表的id一致,主要針對已分配日程的任務,實際使用也存在不分配日程的任務,因此任務表與任務日程表是一對一或一對零的關系。用戶表(user)是最基礎的表,存儲用戶注冊、登錄等信息,主要字段為用戶名、密碼,簡化起見,要求使用手機號碼作為用戶名。在表間關系上,任務日程表依賴于任務表,任務表隸屬于某一個用戶,因此用戶表與任務表是一對一或一對零的關系。

圖2 數據庫設計

2.4 接口設計

接口主要用于界面和后臺數據的交互。依據系統功能結構和界面設計,用戶管理模塊涉及的接口主要有注冊、登錄、退出等;可視任務管理模塊涉及的接口主要有任務的增、刪、改、查操作,任務日歷日程的增、刪、改操作等;列表任務管理模塊涉及的接口主要有查詢所有任務、按條件查詢、刪除等。

3 系統實現

3.1 數據庫實現

基于MySQL8.0創建數據庫和數據表,做好數據的準備工作。后端應用程序通過加載MySQL JDBC驅動與數據庫建立連接,最終執行SQL命令與數據庫進行交互。

3.2 接口實現

基于Spring Boot 2框架通過注解方式開發接口,接口規范遵循Restful風格。業務邏輯基于底層MySQL數據庫的增、刪、改、查實現。

3.3 界面實現

系統名稱為個人任務管理系統,對應的英文名稱為My Tasks。界面實現包含注冊登錄、任務視圖、日歷視圖和任務管理4個模塊。

(1)注冊登錄模塊,主要是注冊頁、登錄頁實現,通過手機號碼、密碼注冊賬號,登錄時輸入正確的手機號碼、密碼后方可進入系統。

(2)任務視圖模塊,對應任務視圖頁如圖3所示,3個列表項ToDo、Doing、Done分別表示待辦、進行中、已完成,主要操作包括添加任務到待辦、修改任務狀態、排序任務、修改任務、刪除任務、按關鍵字搜索等。

圖3 任務視圖頁

①添加任務到待辦:在左側文本框按照提示輸入任務名稱,按回車鍵或者點擊“添加到ToDo”按鈕,即可將任務添加到ToDo列表的第一個位置,默認添加的任務優先級比較高,排在任務的最前面。

②修改任務狀態或排序任務:是核心的可視化操作,都是通過拖拽操作完成。拖拽任務到對應的列表下(如Doing或Done),即可修改任務狀態。在同一個任務列表下拖拽任務到其他位置即可調整任務的優先級順序。

③修改任務或刪除任務:點擊任務,彈出修改或刪除任務對話框,在對應文本框中修改任務名稱,點擊“修改”按鈕即可確認修改。點擊“刪除”按鈕即可刪除當前任務。

④按關鍵字搜索:在右側文本框按照提示輸入任務關鍵字,按回車鍵或者點擊“搜索”按鈕,即可在ToDo、Doing、Done列表下顯示關鍵字匹配的任務。

(3)日歷視圖模塊,對應日歷視圖頁如圖4所示,主要操作包括將任務分配到日歷日程、修改任務狀態、修改任務時間跨度、在日歷中刪除等。

圖4 日歷視圖頁

①將任務分配到日歷日程:直接拖拽ToDo、Doing、Done中的任務到日歷的某個日期中即可,拖拽結束后ToDo、Doing、Done任務列表及日歷中對應的任務呈現相應的背景色。如果是ToDo任務,任務背景是藍色,提示是待辦任務;如果是Doing任務,任務背景是警告色黃色,提示是當前正在進行的任務;如果是Done任務,任務背景是綠色,提示是已完成任務。

②修改任務狀態:方式一,拖拽任務到對應的列表下(如Doing或Done),即可修改任務狀態;方式二,在日歷中點擊任務,彈出對應的任務對話框如圖7所示,修改任務狀態字段。以上采用任何一種方式修改后兩邊同步更新。

③修改任務時間跨度:時間粒度以天為單位。方式一,鼠標懸浮在日歷中的任務右邊緣,待出現拖拽圖標后,直接拖拽即可調整時間跨度的長短;方式二,鼠標懸浮在日歷中的任務上,待出現拖拽圖標后,直接拖拽即可平移任務調整起止時間;方式三,在日歷中點擊任務,彈出對應的任務對話框如圖7所示,修改時間跨度字段,既可調整時間跨度的長短也可調整起止時間。以上采用任何一種方式修改后保持同步更新。

④在日歷中刪除:在日歷中點擊任務,彈出對應的任務對話框如圖5所示,點擊左側按鈕“在日歷中刪除”即可取消分配日歷日程,左邊任務列表中該任務的背景色變回白色。

圖5 在日歷中修改或刪除任務

(4)任務管理模塊,對應任務管理頁如圖6所示,主要是將所有任務按表格形式展示,支持按照任務關鍵字、任務狀態(ToDo、Doing、Done)、日程開始日期、日程結束日期進行查詢。

圖6 任務管理頁

4 結語

本文首先分析任務管理與項目管理、個人任務與團隊任務的區別,梳理個人任務管理的需求,從設計和開發的角度分別論證實現個人任務管理系統的可行性,然后圍繞系統功能結構、數據庫設計、接口設計三方面展開詳細的系統設計,接著實現采用前后端分離架構,前端基于Vue框架構建Web交互界面,后端基于Spring Boot框架和MySQL數據庫提供數據處理接口,最后打包部署,將前后端分別部署到阿里云平臺,通過瀏覽器訪問界面進行任務管理。

本文的創新之處在于突顯可視化,激發人們使用個人任務管理系統的興趣。相對于市面上的任務管理系統做了兩方面的優化,一方面基于個人任務的特殊性,將三列任務流調整為兩列,使得任務從待辦狀態拖拽到進行中狀態和已完成狀態更加便捷;另一方面,一改常規的在日歷上創建任務日程,而是延續任務流的操作,根據需要將任務以拖拽形式分配到日程,并在任務列表和日歷中保持任務同步更新。