個人日常事務(wù)處理軟件的設(shè)計與實現(xiàn)

文/陳澤

個人日常事務(wù)處理軟件是一款簡單、高效、私密的日常記錄軟件?？梢杂盟涗浬钪械哪硞€有意義的瞬間，也可以用它記錄某一刻涌現(xiàn)的思緒或想法。無論是短短的一兩句話，還是一篇忙碌了一天的日記，都可以記錄在其中?？梢酝ㄟ^關(guān)鍵字、日期、標(biāo)簽甚至是記錄的地點來搜索過濾出需要的內(nèi)容。它會把記錄的東西保存到服務(wù)器，所以當(dāng)更換一臺手機登錄后，依舊可以查看到自己的日記。

1 系統(tǒng)開發(fā)框架結(jié)構(gòu)設(shè)計

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

1.1 環(huán)境的配置安裝

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

npm install -g cordova ionic

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

1.2 創(chuàng)建項目

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

ionic start myApp tutorial --v2

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

1.3 打包成安裝包

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

ionic platform add android

ionic platform add ios

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

ionic build android

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

1.4 與Firebase的交互

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

2 系統(tǒng)開發(fā)數(shù)據(jù)庫結(jié)構(gòu)設(shè)計

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

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

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

3 業(yè)務(wù)邏輯層詳細(xì)設(shè)計

3.1 登錄/注冊/重置密碼模塊詳細(xì)設(shè)計

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

3.2 增加標(biāo)簽/地址模塊詳細(xì)設(shè)計

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

3.3 增加、修改日記模塊詳細(xì)設(shè)計

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

3.4 日記顯示模塊的詳細(xì)設(shè)計

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

3.5 其他模塊的詳細(xì)設(shè)計

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

4 系統(tǒng)實現(xiàn)

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

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

4.2 增加、修改日記模塊

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

4.3 其他模塊

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

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