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