个人日常事务处理软件的设计与实现

文/陈泽

个人日常事务处理软件是一款简单、高效、私密的日常记录软件。可以用它记录生活中的某个有意义的瞬间，也可以用它记录某一刻涌现的思绪或想法。无论是短短的一两句话，还是一篇忙碌了一天的日记，都可以记录在其中。可以通过关键字、日期、标签甚至是记录的地点来搜索过滤出需要的内容。它会把记录的东西保存到服务器，所以当更换一台手机登录后，依旧可以查看到自己的日记。

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混合移动应用开发这种成本低，开发效率又高的技术，将会是小型企业开发应用的比较好的选择。