牛德雄

(廣東科學(xué)技術(shù)職業(yè)學(xué)院 計算機(jī)工程技術(shù)學(xué)院,珠海 519090)

基于移動Web技術(shù)的電子報紙閱讀系統(tǒng)①

牛德雄

(廣東科學(xué)技術(shù)職業(yè)學(xué)院 計算機(jī)工程技術(shù)學(xué)院,珠海 519090)

現(xiàn)在是“互聯(lián)網(wǎng)+”時代,為了滿足人們從傳統(tǒng)閱讀轉(zhuǎn)向網(wǎng)絡(luò)閱讀,特別是移動方式的閱讀,開發(fā)了基于HTML5的移動電子報紙閱讀系統(tǒng).解決了用戶由傳統(tǒng)PDF文件閱讀到具有豐富體驗(yàn)的HTML5文檔的閱讀.重點(diǎn)介紹了系統(tǒng)的后臺、Android客戶端的技術(shù)實(shí)現(xiàn),以及通過JSon技術(shù)實(shí)現(xiàn)前后臺之間的信息交互.

電子報紙; HTML5 文檔; Android 移動客戶端; JavaEE 技術(shù); JSON 技術(shù)

1 引言

1.1 問題的提出

目前一般報社都提供了電子報紙供讀者下載與閱讀,但這些電子版報刊一般是PDF文件,每個文件較大,在線閱讀不方便,閱讀效果差.如果能開發(fā)一套能實(shí)時地獲取這些公開發(fā)行的報紙,并將其并轉(zhuǎn)換為HTML5版,讀者就可以方便地在移動設(shè)備及普通的桌面系統(tǒng)上進(jìn)行閱讀.

本項(xiàng)目就是為了解決上述問題,采用目前流行的移動互聯(lián)網(wǎng)技術(shù)進(jìn)行開發(fā)而成.

1.2 實(shí)現(xiàn)思路

本項(xiàng)目采用HTML5作為電子報紙的內(nèi)容表現(xiàn),通過HTML5文檔格式實(shí)現(xiàn)了從普通桌面Web應(yīng)用到移動Web應(yīng)用的升級.HTML5不但增加了普通Web網(wǎng)頁的表現(xiàn)力,特別是能在移動設(shè)備上進(jìn)行良好展現(xiàn).它具有高可用性且改進(jìn)用戶的友好體驗(yàn)[1].以HTML5文檔作為電子報紙的存儲格式,從而將普通Web網(wǎng)站升級能為移動設(shè)備訪問的Web網(wǎng)站.

本項(xiàng)目開發(fā)一個后臺系統(tǒng)獲取網(wǎng)上電子報紙并轉(zhuǎn)換為HTML5格式文檔進(jìn)行存放,從而實(shí)現(xiàn)了移動應(yīng)用Web網(wǎng)站.然后開發(fā)一個Android移動客戶端系統(tǒng)(APP),讀者通過它閱讀該移動Web存放的HTML5電子報紙.

2 技術(shù)架構(gòu)

2.1 搭建移動Web系統(tǒng)結(jié)構(gòu)

將將一個普通桌面Web網(wǎng)站提供移動設(shè)備支持,就升級為移動Web網(wǎng)站.搭建移動Web應(yīng)用系統(tǒng)結(jié)構(gòu)圖見圖1所示.

圖1中系統(tǒng)主要分為Web服務(wù)器后臺、客戶端兩大部分.后臺為在云端(Cloud)搭建的Web服務(wù)器及數(shù)據(jù)庫服務(wù)器,它負(fù)責(zé)將各報刊報紙的電子版進(jìn)行下載并轉(zhuǎn)換為HTML5格式存放以提供移動端閱讀.

圖1 搭建移動 Web 應(yīng)用系統(tǒng)結(jié)構(gòu)圖

另一部分為移動客戶端(如Android客戶端).在移動客戶端開發(fā)一個具有報刊亭、報刊架客戶端應(yīng)用系統(tǒng)(APP)供讀者使用.讀者通過這個APP(移動客戶端)在手機(jī)(Android)上閱讀電子報紙.

2.2 結(jié)構(gòu)設(shè)計

根據(jù)對系統(tǒng)的分析,系統(tǒng)結(jié)構(gòu)設(shè)計如圖2所示.整個系統(tǒng)包括后臺子系統(tǒng)與Android客戶端子系統(tǒng)兩部分.后臺子系統(tǒng)將網(wǎng)絡(luò)上的電子報紙資源進(jìn)行抓取收集,并轉(zhuǎn)換為HTML5文檔格式存放在Web服務(wù)器等功能[2].客戶端系統(tǒng)包括報刊亭、報刊架及報紙展示等功能.

圖2 系統(tǒng)結(jié)構(gòu)圖

后臺系統(tǒng)通過抓取獲取網(wǎng)絡(luò)上公開發(fā)布的PDF電子報刊下載并轉(zhuǎn)換為HTML5格式文檔存放在后臺Web服務(wù)器,并通過JSON技術(shù)開發(fā)接口供移動端訪問[3].

3 項(xiàng)目實(shí)現(xiàn)

3.1 實(shí)現(xiàn)技術(shù)

項(xiàng)目主要需要實(shí)現(xiàn)電子報紙的獲取與制作,報紙推送接口,移動端報紙獲取與展示等.項(xiàng)目使用如下技術(shù)開發(fā):

● Android 客戶端:AndroidStudio 開發(fā)環(huán)境,采用了Volley網(wǎng)絡(luò)框架、JSON技術(shù)等;

● 后臺系統(tǒng):采用基于JavaEE的SSH(Struts2+Hibernate+Spring)框架、MySQL5.0數(shù)據(jù)庫開發(fā),并采用JSON技術(shù)開發(fā)移動端訪問接口.

JSON 全稱是 JavaScript Object Notation.它是基于 JavaScript編程語言 ECMA-262 3rd Edition-December 1999標(biāo)準(zhǔn)的一種輕量級的數(shù)據(jù)交換格式,主要用于跟服務(wù)器進(jìn)行交換數(shù)據(jù)[4].它獨(dú)立于語言,在跨平臺數(shù)據(jù)傳輸上有很大的優(yōu)勢.

3.2 電子報紙的獲取、制作與存儲

后臺系統(tǒng)通過搜索報社的PDF電子報紙并進(jìn)行下載,然后轉(zhuǎn)換為HTML5格式的電子報紙存放,從而實(shí)現(xiàn)了移動Web電子報紙服務(wù)器.

在轉(zhuǎn)換時,一個PDF報紙版面轉(zhuǎn)換成一個HTML5文件.其主要處理任務(wù)有:報紙字體識別與提取、排版樣式確定、圖片提取與顯示等[1],要保證轉(zhuǎn)換后與原報紙顯示效果一致、且不能失真.為了提高開發(fā)效率,這里用到了第三方轉(zhuǎn)換工具Pdf2HTMLex進(jìn)行制作.

制作成功的報紙根據(jù)報刊類型、報紙日期、版面等進(jìn)行組織與存儲.比如2016五月16日的報紙存儲位置為bjcb/2016-05/16(其中bjcb為“北京晨報”縮寫名).

移動客戶端端在“報刊亭”中通過這些報紙信息訪問電子報紙并進(jìn)行閱讀.這些訪問需要通過相應(yīng)的訪問“接口”進(jìn)行數(shù)據(jù)交互實(shí)現(xiàn)移動閱讀.

3.3 后臺電子報紙?jiān)L問接口

后臺服務(wù)器中電子報紙都是根據(jù)報刊名、日期、版面進(jìn)行存儲,移動客戶端訪問時需要根據(jù)這些導(dǎo)航出需要閱讀的報紙,從而確定了需要報紙的地址,然后再通過訪問接口將其顯示出來.

后臺系統(tǒng)提供了這些報紙?jiān)L問接口、訪問地址,移動客戶端需要根據(jù)這些結(jié)構(gòu)信息閱讀報紙,則后臺系統(tǒng)需要提供一個訪問的接口[2].該接口數(shù)據(jù)從數(shù)據(jù)庫中獲取,它對應(yīng)的是報紙的存儲地址.其實(shí)現(xiàn)為:

定義Struts2的一個Action,配置其URL地址為:/JSONpaperlist.action,該地址將提供移動客戶端訪問.

接口的參數(shù)是報紙的存儲信息,將從數(shù)據(jù)庫中得到.這些參數(shù)存放在一個實(shí)體類paperentity中,并定義該報紙集合:melist(list.

通過JSON技術(shù)實(shí)現(xiàn)供移動端訪問的接口核心代碼如下:

json=new JSONObject();

json.put("data",metlist);

response.setContentType("application/json"); //設(shè)置數(shù)據(jù)傳輸為json格式

this.response.getWriter().write(json.toString());//進(jìn)行接口數(shù)據(jù)傳輸

上述代碼中首先創(chuàng)建一個json對象,然后將報紙集合信息存放到該json對象中,然后進(jìn)行JSON數(shù)據(jù)傳輸,這樣客戶端系統(tǒng)才能進(jìn)行訪問.

3.4 移動客戶端電子報紙獲取

移動客戶端(Android手機(jī))通過訪問后臺接口,獲取報紙地址并通過其顯示H5電子報紙[3].各報紙以一個版面為顯示單位,并可以進(jìn)行版面切換.

在Android系統(tǒng)上實(shí)現(xiàn)時,首先定義后臺對應(yīng)的報紙?jiān)L問地址,如常量All_NEWS_PAPER_URL為上述獲取所有報紙數(shù)據(jù)的地址.類NewsPaper存放獲取后的報紙信息.然后用Volley框架實(shí)現(xiàn)訪問數(shù)據(jù)接口.

Volley是在的Google公司在2013推出的在Android平臺上使用的網(wǎng)絡(luò)通信框架.它封裝了利用HTTP協(xié)議進(jìn)行發(fā)送、接收網(wǎng)絡(luò)數(shù)據(jù)的細(xì)節(jié),適合數(shù)據(jù)量不大且通信頻繁的網(wǎng)絡(luò)操作[5].本項(xiàng)目正適合該框架的使用.

使用Volley框架進(jìn)行數(shù)據(jù)傳送時,需要創(chuàng)建一個StringRequest對象(請求數(shù)據(jù)對象).結(jié)合JSON技術(shù)實(shí)現(xiàn)數(shù)據(jù)訪問接口的核心代碼如下[6]:

上述代碼是通過JSON技術(shù)進(jìn)行實(shí)現(xiàn)的電子報紙?jiān)L問接口.移動端獲取報紙數(shù)據(jù)后,再通過視圖技術(shù)實(shí)現(xiàn)的報刊亭、報刊架提供用戶報紙選擇,然后再通過瀏覽界面展示這些HTML5報紙?zhí)峁╅喿x.

3.5 運(yùn)行效果

項(xiàng)目實(shí)現(xiàn)效果見圖3所示.當(dāng)后臺系統(tǒng)部署到云服務(wù)器上以后,從Android手機(jī)客戶端進(jìn)入報刊亭,選擇報刊,然后進(jìn)入報紙閱讀電子報紙.圖3(a)中顯示報刊類型,進(jìn)入某個報刊中,再選擇不同的日期則可以閱讀當(dāng)日該報紙的各版面,見圖3(b)所示.

圖3 閱讀電子報紙

由于轉(zhuǎn)換時HTML5格式的報紙和報紙?jiān)信虐嬉恢隆⒆煮w清晰、可放大不失真,并支持多終端、多分辨率的完美顯示,所以瀏覽報紙會有更好的用戶體驗(yàn).該閱讀客戶端還實(shí)現(xiàn)了翻屏切換,以瀏覽其他版面.

4 結(jié)束語

項(xiàng)目通過網(wǎng)絡(luò)技術(shù)實(shí)現(xiàn)了 “互聯(lián)網(wǎng)+報紙”,通過它能使讀者能更加容易地接觸到媒體資訊信息.該項(xiàng)目的實(shí)現(xiàn)技術(shù),融合了目前流行的HTML5、Android、JavaEE、JSON等網(wǎng)絡(luò)與移動開發(fā)技術(shù).該項(xiàng)目實(shí)現(xiàn)技術(shù)不但能為用戶提供便利的電子報紙移動閱讀服務(wù),通過拓展很容易實(shí)現(xiàn)對其他類型電子讀物的移動在線閱讀.

1Schrock AR.HTML5 and openness in mobile platforms.Continuum,2014,28(6):820–834.[doi:10.1080/10304312.2014.941333]

2張克建.基于JavaEE與Android的消息推送系統(tǒng)的研究與實(shí)現(xiàn)[碩士學(xué)位論文].北京:華北電力大學(xué),2015.

3Xie XL,Liu CY,Liu RK.Research and design of cloud-based campus-plus system on android platform.Applied Mechanics and Materials,2014,556–562:5518–5522.

4Nolan D,Lang DT.Getting started with XML and JSON.In:Nolan D,Lang DT,eds.XML and Web Technologies for Data Sciences with R.New York,USA.2014.

5孟遠(yuǎn).Android網(wǎng)絡(luò)通信框架Volley的解析和比較.軟件,2014,35(12):66–68.[doi:10.3969/j.issn.1003-6970.2014.12.013]

6王魁生,王曉波.利用JSON進(jìn)行網(wǎng)站客戶端與服務(wù)器數(shù)據(jù)交互.軟件導(dǎo)刊,2010,9(3):147–149.

Reading System of Electronic Newspaper Based on Mobile Web Technology

NIU De-Xiong
(College of Computer Engineering and Technology,Guangdong Institute of Science and Technology,Zhuhai 519090,China)

It is the time of “Internet+”.This paper develops a mobile electronic newspaper reading system based on HTML5 for readers to read online newspapers,especially with mobiles.This system solves the problem of reader’s reading from the traditional PDF file to HTML5 document which has rich reading experience.This article focuses on implementation techniques of this system,such as backstage subsystem,Android client,and how to use JSON technology to realize the information exchange between front and back stages.

electronic newspaper; HTML5 document; Android mobile client; JavaEE; JSON

牛德雄.基于移動Web技術(shù)的電子報紙閱讀系統(tǒng).計算機(jī)系統(tǒng)應(yīng)用,2017,26(10):261–263.http://www.c-s-a.org.cn/1003-3254/6040.html

廣東省高等職業(yè)教育品牌專業(yè)建設(shè)項(xiàng)目(2016gzpp007); 廣東教育教學(xué)成果獎(高等教育)培育項(xiàng)目(校企“雙主體”模式下的軟件項(xiàng)目化教學(xué)探索與實(shí)踐)

2017-01-24; 采用時間:2017-03-09