基于Ionic+Cordova+Bmob的开源项目实战

概述

        之前在Ionic+Cordova开发环境搭建一文中讲述了Ionic+Cordova的跨平台移动开发框架。其中Cordova可以将开发的Web App打包发布到不同手机平台下，并且提供了丰富的插件来使用手机硬件功能，如Camera、GPS等。但是Cordova只是一个壳，并没有提供前端的开发框架和UI库，Ionic很好的弥补了这一点。Ionic提供了丰富的UI控件和基于AngularJS的MVC开发框架。之后又在使用Bmob为你的移动应用提供数据服务一文中讲述了如何使用Bmob云服务平台来为开发的移动应用提供数据服务，免去服务端开发的痛苦，使你专注于移动应用的开发。

         现在打算将这三者结合起来，实现一个位置分享的App，供自己练手也方便大家互相学习。

一、需求分析

“位置分享”App正如其名称所述那样，是一款可以分享自己地理位置的应用。“位置分享”App的功能需求大致如下：

         1、可以获取自己的当前位置，并在地图中展示出来；

         2、可以将自己的位置信息发送到云端数据库保存；

         3、可以导航到目标用户的所在位置；注：目标用户必须是注册过的用户，而且对方发送过自己的位置信息到云端。这两点很重要，一是直接导航到任何一个用户是不可能的，除非你是FBI(呵呵)。二是如果想导航到注册的任何一个用户，除非app定时自动发送位置信息到云端，这点实现起来比较复杂，而且与我们的主题Ionic+Cordova+Bmob无关，因此就不搞这么复杂。

         4、可以查看某用户的历史足迹，并在地图中标出；注：前提是对方发送过自己的位置信息到云端数据库。

         5、基本的注册、登录、注销和个人信息查看功能。

          因此，系统总体功能结构图如下所示：

系统比较简单，用例图就不分层了，直接上详细的系统用例图，如下图所示：

二、系统设计

1、后端数据服务提供

            正如前面所述，系统后端采用了Bmob云服务平台来提供数据。主要有_Uer、positon、positionHistory三张表，表结构如下：

_User表：

_User表是系统自带的表，唯一键是电话号码，我们使用电话号码作为登录帐号。使用电话号码作为账号，是考虑到要导航到目标用户，只需要输入对方电话号码即可。_User表需要自己再根据业务添加一些字段如：expired(是否过期)、expiredtime(过期时间)。

position表：

用户当前位置表，存放着每个用户当前的位置信息。objectId是系统自行创建的，类似于序列号。唯一键是电话号码，也就是说这张表只保存用户的当前位置信息。历史位置信息放在positionHistory表中。

positionHistory表：

用户历史位置表，存放着用户每次发送到云端的位置信息。主键是objectId，为系统自行创建。

从表结构的设计可以看到，业务数据十分简单，主要是用户表和位置表。其中位置表分为当前位置表和历史位置表，这么划分是为了图方便，导航时就查询position表，查询历史足迹是就查询positionHistory表。

 2、位置数据获取、展示以及导航

        位置信息获取很方便，Cordova有geolocation插件可供我们使用，它使用GPS或者移动网络对用户进行定位，然后返回经纬度坐标。

        对于将经纬度坐标通过地图展示则通过百度LBS云平台的URI API来实现。请求的地址如下：

http://api.map.baidu.com/geocoder?参数设置

具体的参数设置请查看百度URI API接口说明中的逆向地址解析一项。

         历史足迹的展示需要在地图上标注多个点，由于百度URI API只能标注一个点，因此转向了高德地图 URI API。请求的地址如下：

http://api.map.baidu.com/geocoder?参数设置

具体参数设置请查看 高德地图URI API 接口说明中的多位置点接口一项。

        导航功能也是通过百度 URI API来实现的，它可以调用百度网页地图，然后展示路径规划和启用导航。请求的地址如下：

http://m.amap.com/?mk=参数设置

具体的参数设置请查看 百度URI API接口说明中的 公交、驾车、步行导航一项。

3、用户认证和管理

       这里的用户认证十分简单。用户输入账号密码后，系统在云端查询用户，如果查询不到，则提示用户不存在。否则再次匹配密码，密码匹配不成功，则提示用户名或密码错误。否则在客户端设置变量isLogin=true。表示用户已经登录。用户认证既没有设置cookie、超时登出、也没有修改密码等模块，做的十分简陋。因为安全是一个比较大的话题，要做好必须下功夫。大家可以自行完善。

4、前端移动开发

      通过Bmob在云端为我们提供数据服务，通过百度LBS为我们的位置展示、导航提供技术支持。接下来我们就可以专注于移动端的开发了。

4.1  项目结构

       首先通过Ionic或者cordova创建一个空的工程LocationShare，把geolocation插件安装好。然后通过Ionic Creator创建资源包工程，不需要做界面开发，直接导出后用它替换掉LocationShare工程根目录下的www目录。之后在Bmob官网上下载JS SDK，把它放入lib目录中。最后通过WebStorm打开www目录就可以进行项目的开发了。项目结构如下图所示：

CSS：   项目用到的CSS文件都放在这个目录中。

  img：  项目用到的图片都放在这个目录。

     js：  存放js文件，包括app.js、控制器、服务、过滤器等等。

    lib：   库文件，主要是bmob库，ionic两个库。其中bmob需要手动添加，ionic是通过creator创建资源包工程时，自动添加进来的。

template：所有的视图都放在该文件夹下。

index.html：首页，所有的js文件，库引用都在这里进行引用。

4.2 js文件引用及库的初始化

      js文件引用都放在了index.html页面中的head，除了自动添加的引用之外，我们还需要手动加入bmob库的引用，如下所示：

<!-- bmob script (javacript SDK) --> <script src="lib/bmob/bmob-min.js"></script>

然后在app.js中对其进行初始化：

//初始化Bmob SDK，开发者需要申请自己ID和Key
Bmob.initialize("你的Application ID", "你的REST API Key");

上述代码可以放在run方法里面。

4.3  页面导航

所有的页面都放在template文件夹下，页面之间的关系如下图所示：

页面之间的导航基于AngularJS的ui-router模块，具体代码就不贴了。

4.4  其它重要代码说明

1、位置信息获取

      位置信息通过geolocation插件获取，具体代码如下：

navigator.geolocation.getCurrentPosition(geolocationSuccess,//获取位置坐标
    geolocationError,
    _geolocationOptions);

方法的参数详细信息请参考 cordova-plugin-geolocation插件说明。

2、发送位置信息到云端和获取云端数据

      和云端数据库的交互都需要bmob的js SDK，具体的增删改查可以去官方文档上查看。代码比较长，这里就不贴了。更详细的信息在源代码里都有注释，应该能看懂。

三、系统截图

                                          

四、项目地址

       项目目前放在CSDN上面，地址如下：位置分享APP项目源码下载地址。