基于JQuery Mobile的国际漫游自助服务平台设计与实现
2016-11-11黄磊
黄 磊
(中国移动通信集团湖南有限公司,湖南 长沙 410001)
基于JQuery Mobile的国际漫游自助服务平台设计与实现
黄 磊
(中国移动通信集团湖南有限公司,湖南 长沙 410001)
随着移动互联网技术的快速发展,JQuery Mobile框架以其成本低廉、兼容性强、跨平台、使用简单等特性越来越受到移动开发人员的欢迎。文章结合移动用户投诉国际漫游中遇到的实际问题,基于JQuery Mobile技术设计开发了国际漫游自助服务平台。通过使用该平台,有效降低了用户国际漫游相关问题处理时长,提升了用户满意度。
JQuery Mobile;PHP;国际漫游
随着用户国际出访漫游行为的增多,用户在国外不能正常登陆通信网络、主被叫、来电显示、短信、上网类的投诉也在增多,通过拨打10086客服热线向移动公司反映问题,虽然移动公司会尽量解决问题,但投诉处理耗时较长,客户感知不好。因此迫切需要建设一个国际漫游自助服务平台,支持用户自助处理国际漫游中遇到的各种问题。
基于以上原因,笔者使用JQuery Mobile技术开发了一个国际漫游自助服务平台,实现了一键复位、呼叫转移、网络克隆及网络注册状态查询等自助处理功能,同时提供漫游国签约信息及拔号信息、自助处理指导手册、常用终端设置方法查询等知识查询能力,方便客户自助处理国际出访漫游时遇到的通信问题。
1 JQuery Mobile简介
JQuery Mobile是一款开源的用于创建移动 Web 应用的前端开发框架,是JQuery运行在移动设备上的扩展,目前最新的版本是1.4.5。JQuery Mobile提供了大量基础UI组件和事件以及对AJAX(异步JavaScript和XML)的支持,以界面元素为事件驱动对象,以单击或滑动来触发,最后在移动终端浏览器实现应用程序效果。为了能够避免各种不同的终端之间的差异给开发者带来的繁琐的兼容性问题,JQuery Mobile提供了一个统一的移动UI框架,使用户在任何移动设备上都能够获得基本一致的用户体验。使用JQuery Mobile具有如下一些优点:
(1)简单易行
JQuery Mobile开发主要采用html5语言,仅需使用很少的Javascript语句,语法非常简单。
(2)多平台支持
JQuery Mobile支持采用iOS和Android操作系统的所有终端,支持采用较新Blackberry和Windows Phone、Palm webOS、Bada、Symbian、Meego操作系统的部分终端。jQuery Mobile 同时还对低端设备提供了较好的支撑,比如对不支持JavaScript的设备,提供了较佳的用户体验。
(3)体积较小
JQuery Mobile框架的整体体积较小,最新版本的js类库小于200KB,css小于70KB,在当前的网络条件下加载速度非常快。
(4)支持主题设置
JQuery Mobile提供了主题设置功能,除了使用内置的3个主题之外,还可以方便的设置自定义的应用程序样式。
使用JQuery Mobile进行移动应用开发可以有效降低前台页面开发的工作量,实现“write once,run everywhere”。目前JQuery Mobile已经在各类移动网站开发中得到越来越多的应用,国外知名的信息技术网站mashable.com将其评为2011年最受关注的5种web技术之一。
2 项目体系架构
国际漫游自助服务平台采用多层体系架构,可划分为用户界面层、业务逻辑层、数据访问层和后台数据库层。其中用户界面层采用JQuery Mobile进行开发,业务逻辑层使用Javascript进行开发,数据访问层采用PHP进行开发,后台数据库采用开源的MySQL数据库,整体架构简便易行。
3 平台的设计与实现
3.1 平台功能模块设计
国际漫游自助服务平台主要包括国漫资料、我的网络、自助处理、常见问题、手机设置共5大模块。
(1)国漫资料:用户可以选择所漫游的国家,查询当地运营商的网络信息与资费信息;
(2)我的网络:用户可以查询本机的呼叫限制、漫游、注册等各类业务开通情况;
(3)自助处理:用户可以自行处理屏幕显示异常、通信异常、呼叫转移、网络克隆等操作,这是本平台的核心功能;
(4)常见问题:用户可以查询语音业务、短信业务等各类业务的常见问题以及处理方法;
(5)手机设置:用户可以查询三星、苹果、华为等主流中端设置漫游网络与主叫号码的方法。
其具体模块示意图如图2所示:
图2 国际漫游自助服务平台功能模块
3.2 平台开发环境与工具
整个国际漫游自助服务平台开发以开源、免费、稳定和跨平台为出发点,采用当前业界主流的LAMP(Linux+ Apache+Mysql+PHP)技术实现后台网站搭建;采用基于HTML5、CSS3、JavaScript的JQuery Mobile开发前台界面;使用Notepad++进行JQuery Mobile和PHP代码开发,tortoiseSVN进行代码管理,具有较强的可扩展性及并发处理能力。整个技术方案简单易行且成本低廉。
3.3 平台数据库设计
平台使用MySQL做为后台数据库,使用NaviCat for MySQL做为数据库维护工具。系统共设计了6张表,每张表及作用见下表。
表1 数据库表名称与作用说明
这里以用于存储运营商信息的Vendor_info表为例,其具体字段定义与含义见下表:
表2 运营商信息表Vendor_info字段说明
3.4 系统功能界面
JQuery Mobile提供了一套标准的工具和导航栏设置,可以在绝大多数情况下直接使用。头部(header)常常用于呈现应用的标题,功能导航等,一般都是些文字或者按钮;尾部(footer)位于页面的最下端,内容一般用于布放导航按钮、各种链接等。在国际漫游自助服务平台中使用自定义的主题风格,其各功能模块的主要用户页面实现如图3所示:
图3 国际漫游自助服务平台用户界面图
3.5 系统部分关键代码
3.5.1 页面布局
JQuery Mobile使用
<!--漫游信息查询页面-->
<!--定义header容器-->
<!--定义main容器-->
<!--定义footer容器-->
3.5.2 更新访问记录
JQuery Mobile无法直接访问数据库,因此笔者通过getJSON()函数调用后台的PHP代码,进而实现对数据库的访问,其部分示例代码如下:
function updateAccessRecord(telNo)//更新访问记录
{
var updateAccessRecordURL= http://xxx.xxx/update.PHP?telNo= +telNo;
$.getJSON(updateAccessRecordURL,function(result){
});
}
3.5.3 PHP数据库访问
笔者使用PHP语言实现数据访问操作。使用PHP连接MySQL数据库一般有两种方式,一种是通过odbc函数实现对数据库的访问,一种是直接利用PHP数据库函数连接。为实现平台无关性,此处使用PHP数据库连接函数访问MySQL数据库,具体示范代码如下所示:
function updateSearchRecord($telNo){
$record=0;
$roamDB = mysql_pconnect("localhost","admin","xxxx");//连接数据库
mysql_query("SET character_set_connection=$charset,character_set_results= "utf8", character_set_client=binary",$roamDB); //设置字符集
mysql_select_db("roamsearch",$roamDB);//选择数据库
$accessTime=date("Y-m-d H:i:s",time());//获取当前时间
$updateAccessRecordSQL="INSERT INTO accessrecord(accessIP, accessTelNo,accessTime,accessSource) VALUES('".$telNo."', '".$accessTime."')";//更新访问号码和访问时间
$updateAccessRecordResult=mysql_query($updateAccess RecordSQL,$roamDB);//读取sql语句执行结果mysql_close($roamDB);//关闭字符串连接
if($updateAccessRecordResult){
$arr = array ('result'=>1); //返回为TRUE则返回1
echo json_encode($arr);//将数据存储结果编码为json字符串并返回给调用方
}
}
3.6 应用的跨平台性
由于国际漫游自助服务平台的前台界面采用纯HTML5、Javascript与CSS3技术进行开发,因此能够通过网页访问,微信集成、打包成Android、iOS应用等多种方式供用户访问,实现“write once,run everywhere”,具有极其良好的跨平台性。
4 结束语
平台开发完成后,将访问链接挂载到某移动公司的公众微信号上,在没有做任何宣传推广的情况下,日均访问量超过2000多人次,有效降低了用户遇到国际漫游相关问题时处理时长,提升了用户满意度,取得了较佳的应用效果。今后随着移动设备硬件功能的日益强大以及JQuery Mobile开发框架的持续演进,平台将在现有功能基础上引入用户所处位置自动定位、漫游信息主动推送、遇到问题自动提醒等功能,从而创建出更强大、更方便的交互式用户体验。
[1] 徐尤华,熊传玉.JQuery Mobile 1.2移动Web开发方法研究[J].信息技术,2013(8):85-88.
[2] 郭涛.基于JQuery Mobile的公安系统微信公众平台的设计与实现[D].长春:吉林大学,2015.
[3] 肖智,杨文军.基于jQuery Mobile的移动高校信息公开系统的设计与开发[J].图书馆学研究,2012(23):47-51.
[4] 尹婷,赵思佳.基于jQuery框架的AJAX网站设计模式的研究[J].湖南生态科学学报,2010,16(3):1-4.
[5] 刘福祥,蒋蓓蓓.使用jQuery Mobile框架的移动阅读解决方案——以金陵图书馆掌上阅读为例[J].图书馆学研究,2014(20):49-53.
[6] 陈婉凌.HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站[M].北京:清华大学出版社,2015.
The design and implementation of a mobile international roaming self-service platform based on JQuery Mobile
With the rapid development of mobile internet technology, JQuery Mobile framework is more and more popular to mobile developers for its low-cost, high compatibility, cross platform and easy of use. In this paper,combined with the practical problems user encountered when traveling abroad, the author design and develop a mobile international roaming self-service platform based on JQuery Mobile. With the use of this platform, the processing time of international roaming related problem is effectively reduced and the user satisfaction is enhanced.
JQuery Mobile; PHP; international roaming
TN919
A
1008-1151(2016)08-0013-03
2016-07-10
黄磊(1979-),男,中国移动通信集团湖南有限公司工程师,硕士研究生,研究方向为计算机软件开发与通信技术。