基于JQuery Mobile的國(guó)際漫游自助服務(wù)平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)
2016-11-11 01:07:06黃磊
大眾科技 2016年8期
黃 磊
（中國(guó)移動(dòng)通信集團(tuán)湖南有限公司，湖南 長(zhǎng)沙 410001）
基于JQuery Mobile的國(guó)際漫游自助服務(wù)平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)
黃 磊
（中國(guó)移動(dòng)通信集團(tuán)湖南有限公司，湖南 長(zhǎng)沙 410001）
隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，JQuery Mobile框架以其成本低廉、兼容性強(qiáng)、跨平臺(tái)、使用簡(jiǎn)單等特性越來越受到移動(dòng)開發(fā)人員的歡迎。文章結(jié)合移動(dòng)用戶投訴國(guó)際漫游中遇到的實(shí)際問題，基于JQuery Mobile技術(shù)設(shè)計(jì)開發(fā)了國(guó)際漫游自助服務(wù)平臺(tái)。通過使用該平臺(tái)，有效降低了用戶國(guó)際漫游相關(guān)問題處理時(shí)長(zhǎng)，提升了用戶滿意度。
JQuery Mobile；PHP；國(guó)際漫游
隨著用戶國(guó)際出訪漫游行為的增多，用戶在國(guó)外不能正常登陸通信網(wǎng)絡(luò)、主被叫、來電顯示、短信、上網(wǎng)類的投訴也在增多，通過撥打10086客服熱線向移動(dòng)公司反映問題，雖然移動(dòng)公司會(huì)盡量解決問題，但投訴處理耗時(shí)較長(zhǎng)，客戶感知不好。因此迫切需要建設(shè)一個(gè)國(guó)際漫游自助服務(wù)平臺(tái)，支持用戶自助處理國(guó)際漫游中遇到的各種問題。
基于以上原因，筆者使用JQuery Mobile技術(shù)開發(fā)了一個(gè)國(guó)際漫游自助服務(wù)平臺(tái)，實(shí)現(xiàn)了一鍵復(fù)位、呼叫轉(zhuǎn)移、網(wǎng)絡(luò)克隆及網(wǎng)絡(luò)注冊(cè)狀態(tài)查詢等自助處理功能，同時(shí)提供漫游國(guó)簽約信息及拔號(hào)信息、自助處理指導(dǎo)手冊(cè)、常用終端設(shè)置方法查詢等知識(shí)查詢能力，方便客戶自助處理國(guó)際出訪漫游時(shí)遇到的通信問題。
1 JQuery Mobile簡(jiǎn)介
JQuery Mobile是一款開源的用于創(chuàng)建移動(dòng) Web 應(yīng)用的前端開發(fā)框架，是JQuery運(yùn)行在移動(dòng)設(shè)備上的擴(kuò)展，目前最新的版本是1.4.5。JQuery Mobile提供了大量基礎(chǔ)UI組件和事件以及對(duì)AJAX（異步JavaScript和XML）的支持，以界面元素為事件驅(qū)動(dòng)對(duì)象，以單擊或滑動(dòng)來觸發(fā)，最后在移動(dòng)終端瀏覽器實(shí)現(xiàn)應(yīng)用程序效果。為了能夠避免各種不同的終端之間的差異給開發(fā)者帶來的繁瑣的兼容性問題，JQuery Mobile提供了一個(gè)統(tǒng)一的移動(dòng)UI框架，使用戶在任何移動(dòng)設(shè)備上都能夠獲得基本一致的用戶體驗(yàn)。使用JQuery Mobile具有如下一些優(yōu)點(diǎn)：
（1）簡(jiǎn)單易行
JQuery Mobile開發(fā)主要采用html5語(yǔ)言，僅需使用很少的Javascript語(yǔ)句，語(yǔ)法非常簡(jiǎn)單。
（2）多平臺(tái)支持
JQuery Mobile支持采用iOS和Android操作系統(tǒng)的所有終端，支持采用較新Blackberry和Windows Phone、Palm webOS、Bada、Symbian、Meego操作系統(tǒng)的部分終端。jQuery Mobile 同時(shí)還對(duì)低端設(shè)備提供了較好的支撐，比如對(duì)不支持JavaScript的設(shè)備，提供了較佳的用戶體驗(yàn)。
（3）體積較小
JQuery Mobile框架的整體體積較小，最新版本的js類庫(kù)小于200KB，css小于70KB，在當(dāng)前的網(wǎng)絡(luò)條件下加載速度非常快。
（4）支持主題設(shè)置
JQuery Mobile提供了主題設(shè)置功能，除了使用內(nèi)置的3個(gè)主題之外，還可以方便的設(shè)置自定義的應(yīng)用程序樣式。
使用JQuery Mobile進(jìn)行移動(dòng)應(yīng)用開發(fā)可以有效降低前臺(tái)頁(yè)面開發(fā)的工作量，實(shí)現(xiàn)“write once，run everywhere”。目前JQuery Mobile已經(jīng)在各類移動(dòng)網(wǎng)站開發(fā)中得到越來越多的應(yīng)用，國(guó)外知名的信息技術(shù)網(wǎng)站mashable.com將其評(píng)為2011年最受關(guān)注的5種web技術(shù)之一。
2 項(xiàng)目體系架構(gòu)
國(guó)際漫游自助服務(wù)平臺(tái)采用多層體系架構(gòu)，可劃分為用戶界面層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層和后臺(tái)數(shù)據(jù)庫(kù)層。其中用戶界面層采用JQuery Mobile進(jìn)行開發(fā)，業(yè)務(wù)邏輯層使用Javascript進(jìn)行開發(fā)，數(shù)據(jù)訪問層采用PHP進(jìn)行開發(fā)，后臺(tái)數(shù)據(jù)庫(kù)采用開源的MySQL數(shù)據(jù)庫(kù)，整體架構(gòu)簡(jiǎn)便易行。
3 平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)
3.1 平臺(tái)功能模塊設(shè)計(jì)
國(guó)際漫游自助服務(wù)平臺(tái)主要包括國(guó)漫資料、我的網(wǎng)絡(luò)、自助處理、常見問題、手機(jī)設(shè)置共5大模塊。
（1）國(guó)漫資料：用戶可以選擇所漫游的國(guó)家，查詢當(dāng)?shù)剡\(yùn)營(yíng)商的網(wǎng)絡(luò)信息與資費(fèi)信息；
（2）我的網(wǎng)絡(luò)：用戶可以查詢本機(jī)的呼叫限制、漫游、注冊(cè)等各類業(yè)務(wù)開通情況；
（3）自助處理：用戶可以自行處理屏幕顯示異常、通信異常、呼叫轉(zhuǎn)移、網(wǎng)絡(luò)克隆等操作，這是本平臺(tái)的核心功能；
（4）常見問題：用戶可以查詢語(yǔ)音業(yè)務(wù)、短信業(yè)務(wù)等各類業(yè)務(wù)的常見問題以及處理方法；
（5）手機(jī)設(shè)置:用戶可以查詢?nèi)?、蘋果、華為等主流中端設(shè)置漫游網(wǎng)絡(luò)與主叫號(hào)碼的方法。
其具體模塊示意圖如圖2所示：
圖2 國(guó)際漫游自助服務(wù)平臺(tái)功能模塊
3.2 平臺(tái)開發(fā)環(huán)境與工具
整個(gè)國(guó)際漫游自助服務(wù)平臺(tái)開發(fā)以開源、免費(fèi)、穩(wěn)定和跨平臺(tái)為出發(fā)點(diǎn)，采用當(dāng)前業(yè)界主流的LAMP（Linux+ Apache+Mysql+PHP）技術(shù)實(shí)現(xiàn)后臺(tái)網(wǎng)站搭建；采用基于HTML5、CSS3、JavaScript的JQuery Mobile開發(fā)前臺(tái)界面；使用Notepad++進(jìn)行JQuery Mobile和PHP代碼開發(fā)，tortoiseSVN進(jìn)行代碼管理，具有較強(qiáng)的可擴(kuò)展性及并發(fā)處理能力。整個(gè)技術(shù)方案簡(jiǎn)單易行且成本低廉。
3.3 平臺(tái)數(shù)據(jù)庫(kù)設(shè)計(jì)
平臺(tái)使用MySQL做為后臺(tái)數(shù)據(jù)庫(kù)，使用NaviCat for MySQL做為數(shù)據(jù)庫(kù)維護(hù)工具。系統(tǒng)共設(shè)計(jì)了6張表，每張表及作用見下表。
表1 數(shù)據(jù)庫(kù)表名稱與作用說明
這里以用于存儲(chǔ)運(yùn)營(yíng)商信息的Vendor_info表為例，其具體字段定義與含義見下表：
表2 運(yùn)營(yíng)商信息表Vendor_info字段說明
3.4 系統(tǒng)功能界面
JQuery Mobile提供了一套標(biāo)準(zhǔn)的工具和導(dǎo)航欄設(shè)置，可以在絕大多數(shù)情況下直接使用。頭部（header）常常用于呈現(xiàn)應(yīng)用的標(biāo)題，功能導(dǎo)航等，一般都是些文字或者按鈕；尾部（footer）位于頁(yè)面的最下端，內(nèi)容一般用于布放導(dǎo)航按鈕、各種鏈接等。在國(guó)際漫游自助服務(wù)平臺(tái)中使用自定義的主題風(fēng)格，其各功能模塊的主要用戶頁(yè)面實(shí)現(xiàn)如圖3所示：
圖3 國(guó)際漫游自助服務(wù)平臺(tái)用戶界面圖
3.5 系統(tǒng)部分關(guān)鍵代碼
3.5.1 頁(yè)面布局
JQuery Mobile使用
元素定義文檔中的分區(qū)或節(jié)。JQuery Mobile定義了“data-role”屬性，通過設(shè)置該屬性，JQuery Mobile就可以對(duì)定義了該屬性的元素進(jìn)行界面標(biāo)準(zhǔn)化并對(duì)內(nèi)容進(jìn)行相應(yīng)處理。以下為漫游信息查詢頁(yè)面代碼:
大狗熊在睡覺 刷新生活的頁(yè)面 中隊(duì)崗位該如何設(shè)置 數(shù)據(jù)庫(kù) 數(shù)據(jù)庫(kù) 數(shù)據(jù)庫(kù) 數(shù)據(jù)庫(kù) 本刊欄目設(shè)置說明 中俄臨床醫(yī)學(xué)專業(yè)課程設(shè)置的比較與思考 地鐵出入段線轉(zhuǎn)換軌設(shè)置
<！--漫游信息查詢頁(yè)面-->
<！--定義header容器-->
<！--定義main容器-->
<！--定義footer容器-->
3.5.2 更新訪問記錄
JQuery Mobile無(wú)法直接訪問數(shù)據(jù)庫(kù)，因此筆者通過getJSON（）函數(shù)調(diào)用后臺(tái)的PHP代碼，進(jìn)而實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的訪問，其部分示例代碼如下：
function updateAccessRecord（telNo）//更新訪問記錄
｛
var updateAccessRecordURL= http://xxx.xxx/update.PHP？telNo= +telNo；
$.getJSON（updateAccessRecordURL，function（result）｛
｝）；
｝
3.5.3 PHP數(shù)據(jù)庫(kù)訪問
筆者使用PHP語(yǔ)言實(shí)現(xiàn)數(shù)據(jù)訪問操作。使用PHP連接MySQL數(shù)據(jù)庫(kù)一般有兩種方式，一種是通過odbc函數(shù)實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的訪問，一種是直接利用PHP數(shù)據(jù)庫(kù)函數(shù)連接。為實(shí)現(xiàn)平臺(tái)無(wú)關(guān)性，此處使用PHP數(shù)據(jù)庫(kù)連接函數(shù)訪問MySQL數(shù)據(jù)庫(kù)，具體示范代碼如下所示：
function updateSearchRecord（$telNo）｛
$record=0；
$roamDB = mysql_pconnect（"localhost"，"admin"，"xxxx"）；//連接數(shù)據(jù)庫(kù)
mysql_query（"SET character_set_connection=$charset，character_set_results= "utf8"， character_set_client=binary"，$roamDB）； //設(shè)置字符集
mysql_select_db（"roamsearch"，$roamDB）；//選擇數(shù)據(jù)庫(kù)
$accessTime=date（"Y-m-d H:i:s"，time（））；//獲取當(dāng)前時(shí)間
$updateAccessRecordSQL="INSERT INTO accessrecord（accessIP， accessTelNo，accessTime，accessSource） VALUES（'".$telNo."'， '".$accessTime."'）"；//更新訪問號(hào)碼和訪問時(shí)間
$updateAccessRecordResult=mysql_query（$updateAccess RecordSQL，$roamDB）；//讀取sql語(yǔ)句執(zhí)行結(jié)果mysql_close（$roamDB）；//關(guān)閉字符串連接
if（$updateAccessRecordResult）｛
$arr = array （'result'=>1）； //返回為TRUE則返回1
echo json_encode（$arr）；//將數(shù)據(jù)存儲(chǔ)結(jié)果編碼為json字符串并返回給調(diào)用方
｝
｝
3.6 應(yīng)用的跨平臺(tái)性
由于國(guó)際漫游自助服務(wù)平臺(tái)的前臺(tái)界面采用純HTML5、Javascript與CSS3技術(shù)進(jìn)行開發(fā)，因此能夠通過網(wǎng)頁(yè)訪問，微信集成、打包成Android、iOS應(yīng)用等多種方式供用戶訪問，實(shí)現(xiàn)“write once，run everywhere”，具有極其良好的跨平臺(tái)性。
4 結(jié)束語(yǔ)
平臺(tái)開發(fā)完成后，將訪問鏈接掛載到某移動(dòng)公司的公眾微信號(hào)上，在沒有做任何宣傳推廣的情況下，日均訪問量超過2000多人次，有效降低了用戶遇到國(guó)際漫游相關(guān)問題時(shí)處理時(shí)長(zhǎng)，提升了用戶滿意度，取得了較佳的應(yīng)用效果。今后隨著移動(dòng)設(shè)備硬件功能的日益強(qiáng)大以及JQuery Mobile開發(fā)框架的持續(xù)演進(jìn)，平臺(tái)將在現(xiàn)有功能基礎(chǔ)上引入用戶所處位置自動(dòng)定位、漫游信息主動(dòng)推送、遇到問題自動(dòng)提醒等功能，從而創(chuàng)建出更強(qiáng)大、更方便的交互式用戶體驗(yàn)。
［1］ 徐尤華，熊傳玉.JQuery Mobile 1.2移動(dòng)Web開發(fā)方法研究［J］.信息技術(shù)，2013（8）:85-88.
［2］ 郭濤.基于JQuery Mobile的公安系統(tǒng)微信公眾平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)［D］.長(zhǎng)春:吉林大學(xué)，2015.
［3］ 肖智，楊文軍.基于jQuery Mobile的移動(dòng)高校信息公開系統(tǒng)的設(shè)計(jì)與開發(fā)［J］.圖書館學(xué)研究，2012（23）:47-51.
［4］ 尹婷，趙思佳.基于jQuery框架的AJAX網(wǎng)站設(shè)計(jì)模式的研究［J］.湖南生態(tài)科學(xué)學(xué)報(bào)，2010，16（3）:1-4.
［5］ 劉福祥，蔣蓓蓓.使用jQuery Mobile框架的移動(dòng)閱讀解決方案——以金陵圖書館掌上閱讀為例［J］.圖書館學(xué)研究，2014（20）:49-53.
［6］ 陳婉凌.HTML5+CSS3+jQuery Mobile輕松構(gòu)造APP與移動(dòng)網(wǎng)站［M］.北京:清華大學(xué)出版社，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-），男，中國(guó)移動(dòng)通信集團(tuán)湖南有限公司工程師，碩士研究生，研究方向?yàn)橛?jì)算機(jī)軟件開發(fā)與通信技術(shù)。
猜你喜歡
大灰狼畫報(bào)·益智版(2024年3期)2024-12-09 00:00:00
保健醫(yī)苑(2022年1期)2022-08-30 08:39:14
少先隊(duì)活動(dòng)(2021年4期)2021-07-23 01:46:22
財(cái)經(jīng)(2017年2期)2017-03-10 14:35:35
財(cái)經(jīng)(2016年15期)2016-06-03 07:38:02
財(cái)經(jīng)(2016年3期)2016-03-07 07:44:46
財(cái)經(jīng)(2016年6期)2016-02-24 07:41:51
沈陽(yáng)醫(yī)學(xué)院學(xué)報(bào)(2015年1期)2015-12-27 13:44:40
醫(yī)學(xué)教育管理(2015年3期)2015-12-01 06:43:16
都市快軌交通(2014年4期)2014-02-27 08:35:05
