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

牛德雄

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

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

牛德雄

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

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

電子報(bào)紙; HTML5 文檔; Android 移動(dòng)客戶端; JavaEE 技術(shù); JSON 技術(shù)

1 引言

1.1 問題的提出

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.2 電子報(bào)紙的獲取、制作與存儲(chǔ)

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

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

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

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

3.3 后臺(tái)電子報(bào)紙?jiān)L問接口

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

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

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

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

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

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)建一個(gè)json對(duì)象,然后將報(bào)紙集合信息存放到該json對(duì)象中,然后進(jìn)行JSON數(shù)據(jù)傳輸,這樣客戶端系統(tǒng)才能進(jìn)行訪問.

3.4 移動(dòng)客戶端電子報(bào)紙獲取

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

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

Volley是在的Google公司在2013推出的在Android平臺(tái)上使用的網(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ù)傳送時(shí),需要?jiǎng)?chuàng)建一個(gè)StringRequest對(duì)象(請(qǐng)求數(shù)據(jù)對(duì)象).結(jié)合JSON技術(shù)實(shí)現(xiàn)數(shù)據(jù)訪問接口的核心代碼如下[6]:

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

3.5 運(yùn)行效果

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

圖3 閱讀電子報(bào)紙

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

4 結(jié)束語

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

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

牛德雄.基于移動(dòng)Web技術(shù)的電子報(bào)紙閱讀系統(tǒng).計(jì)算機(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é)成果獎(jiǎng)(高等教育)培育項(xiàng)目(校企“雙主體”模式下的軟件項(xiàng)目化教學(xué)探索與實(shí)踐)

2017-01-24; 采用時(shí)間:2017-03-09