個人日常事務處理軟件的設計與實現

文/陳澤

個人日常事務處理軟件是一款簡單、高效、私密的日常記錄軟件。可以用它記錄生活中的某個有意義的瞬間，也可以用它記錄某一刻涌現的思緒或想法。無論是短短的一兩句話，還是一篇忙碌了一天的日記，都可以記錄在其中。可以通過關鍵字、日期、標簽甚至是記錄的地點來搜索過濾出需要的內容。它會把記錄的東西保存到服務器，所以當更換一臺手機登錄后，依舊可以查看到自己的日記。

1 系統開發框架結構設計

在本項目框架中，選擇了前后端分離，然后通過REST協議進行前端與后端之間的通信。前端使用了Ionic2框架，后端選擇了Firebase服務，使用遵循了REST協議的Firebase API進行前后端的數據交互工作。

1.1 環境的配置安裝

開始Ionic2項目之前，首先需要下載安裝Node.js，在這過程中默認會安裝NPM，但是如果沒有，則需要單獨安裝NPM包管理工具。因為在開發Ionic2項目的過程中需要安裝依賴，而且會用到Ionic2的一些命令行工具，這就需要node.js和NPM的幫助了。在安裝完最新的Node.js之后，需要安裝Cordova和Ionic，因為安裝了Node.js和NPM，所以接下來只要在終端輸入以下命令就可以了：

npm install -g cordova ionic

這樣，cordova和ionic就安裝完成了。為了編譯到Android平臺，還需要安裝JDK。最后，需要根據不同平臺安裝相應的sdk，如Android端的Android SDK和iOS端的iOS SDK。接下去就可以搭建架構了。

1.2 創建項目

因為裝了Ionic，可以直接使用Ionic的命令行來開始項目，在終端輸入以下命令:

ionic start myApp tutorial --v2

這個指令會創建一個叫myApp的Ionic項目，tutorial是可選參數，表示根據tutorial這個模板去生成項目，如果不指定，默認根據tab模板生成。--v2是指生成Ionic2項目。這樣Ionic2項目就創建好了，這是一個基本為空的項目，內容都是模板自帶的。

1.3 打包成安裝包

為了打包成不同平臺的安裝包，需要將平臺相關的SDK信息添加到項目中。由于已經安裝了Android和iOS相應的SDK，分別需要運行以下指令來添加平臺信息：

ionic platform add android

ionic platform add ios

這樣就添加了平臺到項目了，也能夠打包成相應的安裝包了。運行：

ionic build android

這樣就能生成Android安裝包了。

1.4 與Firebase的交互

第一步，需要去Firebase官網注冊開發賬號 ，通過這個賬號可以進入Firebase控制臺配置項目信息。第二步，在控制臺中點擊添加項目，輸入項目的名字，點擊創建就行了。第三步，在Overview一欄，選擇“將Firebase添加到您的網頁應用”，會出現一段配置代碼。第四步，將這段配置代碼加到您的項目中就行了。這里用的是Ionic2開發，所以將這段配置代碼加在app.module.ts中，并且加上AngularFireModule.initializeApp(conf ig)；這樣，前后端的架構就搭建好了，配置也做好了，接下去只要調用Firebase API就能進行前后端數據交互了。

2 系統開發數據庫結構設計

用戶的注冊和登錄部分托管于Firebase， Firebase采用的是NoSQL，數據存儲不需要固定的表格模式。比如說在項目中需要用到的標簽，地址，頭像，日記等。

NoSQL就是“Not Only SQL”，它的數據庫結構設計去掉了關系型數據庫的關系型特征，數據之間沒有關系，這樣有利于數據的拓展；NoSQL具有靈活的數據模型，無需事先為要存儲的數據建立字段，隨時都可以存儲自定義的數據格式；NoSQL數據庫有非常高的讀寫性能，尤其是在大量數據的情況下，表現得非常優秀。

拋開數據庫結構設計，在存儲用戶數據時，會在存儲路徑中加上用戶的uid，所以，只有用戶本身才能夠讀取到uid下面的內容，這樣就確保了數據的安全性與隱私性。

3 業務邏輯層詳細設計

3.1 登錄/注冊/重置密碼模塊詳細設計

當用戶進入軟件時，應該判斷用戶是否登錄，如果登錄了，則進入主界面；如果用戶沒有登錄，則進入登錄/注冊界面。在該頁面中，可以通過HTML5 radio的組件來替代類似a標簽在當前頁面中選中某塊片段的功能。點擊sign in，則出現登錄頁面；若點擊sign up，則出現注冊頁面。這樣就可以在一個頁面內完成登錄注冊功能了。另外，在登錄那塊片段下面還應該有一個重置密碼的按鈕，點擊后進入一個重置密碼的頁面，輸入用戶的郵箱，然后Firebase服務就會發送一封請求重置密碼的郵件給該用戶的郵箱，用戶只需要根據郵件的指示操作就能重新設置密碼了。

3.2 增加標簽/地址模塊詳細設計

增加標簽和增加地址模塊是同一個類型的部分，應該一起考慮設計。增加標簽和地址，然后供用戶在增加或修改日記時選用。增加標簽和地址是單獨的兩個東西，在數據庫中存儲時，只需要存在該用戶的uid下就行了，然后在增加或修改日記時，讀取用戶路徑下的標簽和地址字段，就能得到所有該用戶的標簽和地址以供用戶選擇了。但是地址相對與標簽，有另外一個情況，當用戶增加新的日記時，軟件會通過手機GPS來自動生成一個當前地址，然后作為該日記的地址。而且，這時候會進行判斷，如果用戶地址集合中沒有該地址，則會將該地址增加到地址集合中；如果已經有了，則不做處理。這樣的話也比較好設計，只要在新增的日記頁面獲取當前地址時，遍歷地址集合，判斷是否存在，若不存在則將它加進去，若存在則不處理。

3.3 增加、修改日記模塊詳細設計

這個部分在設計時，不管是增加日記還是修改日記，它們都可以使用同一個頁面模板。即增加日記時，這個模板的內容是空的，而在修改日記時，可以把選中的那條日記作為參數傳到該模板頁面，然后根據參數的內容，也就是被修改日記的內容，將空模板對應部分填充好就行了。這樣設計可以將增加頁面和修改頁面做統一管理，可以很大減少工作量。確定這一點后，就可以設計該空模板的格局了。首先會有一個增加圖片的功能，同拍照功能，然后將圖片上傳保存到服務器。這個要借助到Ionic2照相機和文件管理的插件，來調用手機設備進行拍照，或者通過文件管理設備進行照片的選擇。然后是選擇時間的功能，這個Ionic2提供了自己的組件，可以使用這個組件來完成選擇時間的功能，然后顯示在模板頁中。日記標題和日記內容可以借助Angular2的雙向數據綁定和JavaScript獲取DOM節點內容的方法來獲取標題和內容。最后需要有一個選擇標簽和地址的功能，就像前面所說的，可以將該用戶的所有標簽和地址獲取到，然后以彈窗選擇的形式提供用戶選擇標簽和地址。地址還要有一個通過手機GPS自動獲取當前地址的功能。這個也得借助Ionic2的插件，來調用手機的GPS功能，然后獲取當前的地址。

3.4 日記顯示模塊的詳細設計

因為日記在數據庫上的存儲是雜亂無章的，到時候我們把日記從數據庫上拿來之后，不能直接在主界面上顯示，因為那樣的話日記會很亂，不方便用戶查看。先要將獲取到的日記按照年和月份來劃分開來，然后以年月為單位在主頁面上顯示，這樣的話就能方便用戶查看了。但是這不是一個簡單的工作，由于日記上存儲的日期是將年、月、日、日期、時間、分鐘分開存儲的，要在獲取數據時根據年月來獲取也并不是很簡單，可能需要在前端獲取到數據之后，將數據進行加工然后再顯示了。

3.5 其他模塊的詳細設計

其它還得有上傳頭像模塊，這部分跟日記中的選擇照片部分很類似，就是在存儲頭像信息的時候不一樣，頭像是只有一張照片的，所以在每次更換了頭像之后，之前那個頭像記錄就會被現在的頭像替換掉。還有需要退出登錄的功能。這個部分雖然簡單，但是有一點很明顯要注意，就是退出登錄之后，原來那個用戶的信息要從記錄中全部清除掉，所有變量也要全部清除，不能被下一個用戶獲取到信息，也不能影響到下一個用戶的正常操作，下一個用戶登錄時數據也都要重新獲取。Ionic2中有一個rootPage的概念，page在Ionic2是以頁面棧的形式存在的，rootPage在最下面，然后push一個頁面到上面，再push，需要返回時就將上面那個頁面pop掉。如果要清除所有信息，或許在退出登錄的時候將登錄頁面設為rootPage，然后在登錄成功后將主頁面作為rootPage，這種結構能達到想要效果。最后還要做一個篩選模塊。這個模塊比較清晰，就是根據標簽，地址，日期來篩選，或者通過輸入關鍵字查詢日記內容。因為標簽，地址，日期和日記內容在每一條日記都有單獨的存儲，所以篩選比較清楚。

4 系統實現

4.1 登錄/注冊/重置密碼模塊

在該模塊實現中，主要利用HTML5中radio來作為控制選擇，label標簽來顯示對應的登錄或者注冊界面。在該頁面中，在點擊登錄或注冊按鈕時，讀取郵箱和密碼的值，然后調用Firebase中對應的API就可以了，我把登錄注冊對Firebase API的調用部分寫成了一個service，調用時只要將郵箱密碼作為參數傳過去就行了，而且Firebase對重置密碼也有相應的API。

4.2 增加、修改日記模塊

增加日記和修改日記的按鈕不同，當增加日記時，直接進入DetailPage；而當修改或查看日記時，在進入DetailPage的時候，傳遞包含了這條日記的參數給DetailPage頁面。DetailPage首先獲取該參數的內容，如果該內容為空，則說明是新增日記，模板中除了日期等值外，均設為空；如果內容不為空，則通過這個傳遞過來的內容，在模板相應的位置顯示數據。

4.3 其他模塊

篩選模塊只要在點擊標簽、地址、日期，或者搜索框內容變化時，對搜索日記進行篩選就行了。在subscribe里面對返回的數據庫的值進行處理，如果沒有篩選，則直接使用該返回值；若有篩選選項，則根據它進行篩選，留下符合要求的日記。

本項目使用了ionic2框架，在開發一般的移動應用時，混合移動應用和原生應用十分相似，平時使用的QQ、微信、微博、攜程等部分頁面，都大量使用了混合應用開發技術。所以，類似ionic2混合移動應用開發這種成本低，開發效率又高的技術，將會是小型企業開發應用的比較好的選擇。