基于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,开发者需要申请自己IDKey
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项目源码下载地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值