文/陳澤

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

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

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

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

開始Ionic2項(xiàng)目之前，首先需要下載安裝Node.js，在這過(guò)程中默認(rèn)會(huì)安裝NPM，但是如果沒(méi)有，則需要單獨(dú)安裝NPM包管理工具。因?yàn)樵陂_發(fā)Ionic2項(xiàng)目的過(guò)程中需要安裝依賴，而且會(huì)用到Ionic2的一些命令行工具，這就需要node.js和NPM的幫助了。在安裝完最新的Node.js之后，需要安裝Cordova和Ionic，因?yàn)榘惭b了Node.js和NPM，所以接下來(lái)只要在終端輸入以下命令就可以了：

npm install -g cordova ionic

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

1.2 創(chuàng)建項(xiàng)目

因?yàn)檠b了Ionic，可以直接使用Ionic的命令行來(lái)開始項(xiàng)目，在終端輸入以下命令:

ionic start myApp tutorial --v2

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

1.3 打包成安裝包

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

ionic platform add android

ionic platform add ios

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

ionic build android

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

1.4 與Firebase的交互

第一步，需要去Firebase官網(wǎng)注冊(cè)開發(fā)賬號(hào) ，通過(guò)這個(gè)賬號(hào)可以進(jìn)入Firebase控制臺(tái)配置項(xiàng)目信息。第二步，在控制臺(tái)中點(diǎn)擊添加項(xiàng)目，輸入項(xiàng)目的名字，點(diǎn)擊創(chuàng)建就行了。第三步，在Overview一欄，選擇“將Firebase添加到您的網(wǎng)頁(yè)應(yīng)用”，會(huì)出現(xiàn)一段配置代碼。第四步，將這段配置代碼加到您的項(xiàng)目中就行了。這里用的是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ù)庫(kù)結(jié)構(gòu)設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

因?yàn)槿沼浽跀?shù)據(jù)庫(kù)上的存儲(chǔ)是雜亂無(wú)章的，到時(shí)候我們把日記從數(shù)據(jù)庫(kù)上拿來(lái)之后，不能直接在主界面上顯示，因?yàn)槟菢拥脑捜沼洉?huì)很亂，不方便用戶查看。先要將獲取到的日記按照年和月份來(lái)劃分開來(lái)，然后以年月為單位在主頁(yè)面上顯示，這樣的話就能方便用戶查看了。但是這不是一個(gè)簡(jiǎn)單的工作，由于日記上存儲(chǔ)的日期是將年、月、日、日期、時(shí)間、分鐘分開存儲(chǔ)的，要在獲取數(shù)據(jù)時(shí)根據(jù)年月來(lái)獲取也并不是很簡(jiǎn)單，可能需要在前端獲取到數(shù)據(jù)之后，將數(shù)據(jù)進(jìn)行加工然后再顯示了。

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

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

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

4.1 登錄/注冊(cè)/重置密碼模塊

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

4.2 增加、修改日記模塊

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

4.3 其他模塊

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

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