基于移动Web技术的电子报纸阅读系统①

牛德雄

(广东科学技术职业学院 计算机工程技术学院,珠海 519090)

基于移动Web技术的电子报纸阅读系统①

牛德雄

(广东科学技术职业学院 计算机工程技术学院,珠海 519090)

现在是“互联网+”时代,为了满足人们从传统阅读转向网络阅读,特别是移动方式的阅读,开发了基于HTML5的移动电子报纸阅读系统.解决了用户由传统PDF文件阅读到具有丰富体验的HTML5文档的阅读.重点介绍了系统的后台、Android客户端的技术实现,以及通过JSon技术实现前后台之间的信息交互.

电子报纸; HTML5 文档; Android 移动客户端; JavaEE 技术; JSON 技术

1 引言

1.1 问题的提出

目前一般报社都提供了电子报纸供读者下载与阅读,但这些电子版报刊一般是PDF文件,每个文件较大,在线阅读不方便,阅读效果差.如果能开发一套能实时地获取这些公开发行的报纸,并将其并转换为HTML5版,读者就可以方便地在移动设备及普通的桌面系统上进行阅读.

本项目就是为了解决上述问题,采用目前流行的移动互联网技术进行开发而成.

1.2 实现思路

本项目采用HTML5作为电子报纸的内容表现,通过HTML5文档格式实现了从普通桌面Web应用到移动Web应用的升级.HTML5不但增加了普通Web网页的表现力,特别是能在移动设备上进行良好展现.它具有高可用性且改进用户的友好体验[1].以HTML5文档作为电子报纸的存储格式,从而将普通Web网站升级能为移动设备访问的Web网站.

本项目开发一个后台系统获取网上电子报纸并转换为HTML5格式文档进行存放,从而实现了移动应用Web网站.然后开发一个Android移动客户端系统(APP),读者通过它阅读该移动Web存放的HTML5电子报纸.

2 技术架构

2.1 搭建移动Web系统结构

将将一个普通桌面Web网站提供移动设备支持,就升级为移动Web网站.搭建移动Web应用系统结构图见图1所示.

图1中系统主要分为Web服务器后台、客户端两大部分.后台为在云端(Cloud)搭建的Web服务器及数据库服务器,它负责将各报刊报纸的电子版进行下载并转换为HTML5格式存放以提供移动端阅读.

图1 搭建移动 Web 应用系统结构图

另一部分为移动客户端(如Android客户端).在移动客户端开发一个具有报刊亭、报刊架客户端应用系统(APP)供读者使用.读者通过这个APP(移动客户端)在手机(Android)上阅读电子报纸.

2.2 结构设计

根据对系统的分析,系统结构设计如图2所示.整个系统包括后台子系统与Android客户端子系统两部分.后台子系统将网络上的电子报纸资源进行抓取收集,并转换为HTML5文档格式存放在Web服务器等功能[2].客户端系统包括报刊亭、报刊架及报纸展示等功能.

图2 系统结构图

后台系统通过抓取获取网络上公开发布的PDF电子报刊下载并转换为HTML5格式文档存放在后台Web服务器,并通过JSON技术开发接口供移动端访问[3].

3 项目实现

3.1 实现技术

项目主要需要实现电子报纸的获取与制作,报纸推送接口,移动端报纸获取与展示等.项目使用如下技术开发:

● Android 客户端:AndroidStudio 开发环境,采用了Volley网络框架、JSON技术等;

● 后台系统:采用基于JavaEE的SSH(Struts2+Hibernate+Spring)框架、MySQL5.0数据库开发,并采用JSON技术开发移动端访问接口.

JSON 全称是 JavaScript Object Notation.它是基于 JavaScript编程语言 ECMA-262 3rd Edition-December 1999标准的一种轻量级的数据交换格式,主要用于跟服务器进行交换数据[4].它独立于语言,在跨平台数据传输上有很大的优势.

3.2 电子报纸的获取、制作与存储

后台系统通过搜索报社的PDF电子报纸并进行下载,然后转换为HTML5格式的电子报纸存放,从而实现了移动Web电子报纸服务器.

在转换时,一个PDF报纸版面转换成一个HTML5文件.其主要处理任务有:报纸字体识别与提取、排版样式确定、图片提取与显示等[1],要保证转换后与原报纸显示效果一致、且不能失真.为了提高开发效率,这里用到了第三方转换工具Pdf2HTMLex进行制作.

制作成功的报纸根据报刊类型、报纸日期、版面等进行组织与存储.比如2016五月16日的报纸存储位置为bjcb/2016-05/16(其中bjcb为“北京晨报”缩写名).

移动客户端端在“报刊亭”中通过这些报纸信息访问电子报纸并进行阅读.这些访问需要通过相应的访问“接口”进行数据交互实现移动阅读.

3.3 后台电子报纸访问接口

后台服务器中电子报纸都是根据报刊名、日期、版面进行存储,移动客户端访问时需要根据这些导航出需要阅读的报纸,从而确定了需要报纸的地址,然后再通过访问接口将其显示出来.

后台系统提供了这些报纸访问接口、访问地址,移动客户端需要根据这些结构信息阅读报纸,则后台系统需要提供一个访问的接口[2].该接口数据从数据库中获取,它对应的是报纸的存储地址.其实现为:

定义Struts2的一个Action,配置其URL地址为:/JSONpaperlist.action,该地址将提供移动客户端访问.

接口的参数是报纸的存储信息,将从数据库中得到.这些参数存放在一个实体类paperentity中,并定义该报纸集合:melist(list.

通过JSON技术实现供移动端访问的接口核心代码如下:

json=new JSONObject();

json.put("data",metlist);

response.setContentType("application/json"); //设置数据传输为json格式

this.response.getWriter().write(json.toString());//进行接口数据传输

上述代码中首先创建一个json对象,然后将报纸集合信息存放到该json对象中,然后进行JSON数据传输,这样客户端系统才能进行访问.

3.4 移动客户端电子报纸获取

移动客户端(Android手机)通过访问后台接口,获取报纸地址并通过其显示H5电子报纸[3].各报纸以一个版面为显示单位,并可以进行版面切换.

在Android系统上实现时,首先定义后台对应的报纸访问地址,如常量All_NEWS_PAPER_URL为上述获取所有报纸数据的地址.类NewsPaper存放获取后的报纸信息.然后用Volley框架实现访问数据接口.

Volley是在的Google公司在2013推出的在Android平台上使用的网络通信框架.它封装了利用HTTP协议进行发送、接收网络数据的细节,适合数据量不大且通信频繁的网络操作[5].本项目正适合该框架的使用.

使用Volley框架进行数据传送时,需要创建一个StringRequest对象(请求数据对象).结合JSON技术实现数据访问接口的核心代码如下[6]:

上述代码是通过JSON技术进行实现的电子报纸访问接口.移动端获取报纸数据后,再通过视图技术实现的报刊亭、报刊架提供用户报纸选择,然后再通过浏览界面展示这些HTML5报纸提供阅读.

3.5 运行效果

项目实现效果见图3所示.当后台系统部署到云服务器上以后,从Android手机客户端进入报刊亭,选择报刊,然后进入报纸阅读电子报纸.图3(a)中显示报刊类型,进入某个报刊中,再选择不同的日期则可以阅读当日该报纸的各版面,见图3(b)所示.

图3 阅读电子报纸

由于转换时HTML5格式的报纸和报纸原有排版一致、字体清晰、可放大不失真,并支持多终端、多分辨率的完美显示,所以浏览报纸会有更好的用户体验.该阅读客户端还实现了翻屏切换,以浏览其他版面.

4 结束语

项目通过网络技术实现了 “互联网+报纸”,通过它能使读者能更加容易地接触到媒体资讯信息.该项目的实现技术,融合了目前流行的HTML5、Android、JavaEE、JSON等网络与移动开发技术.该项目实现技术不但能为用户提供便利的电子报纸移动阅读服务,通过拓展很容易实现对其他类型电子读物的移动在线阅读.

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

2张克建.基于JavaEE与Android的消息推送系统的研究与实现[硕士学位论文].北京:华北电力大学,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孟远.Android网络通信框架Volley的解析和比较.软件,2014,35(12):66–68.[doi:10.3969/j.issn.1003-6970.2014.12.013]

6王魁生,王晓波.利用JSON进行网站客户端与服务器数据交互.软件导刊,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技术的电子报纸阅读系统.计算机系统应用,2017,26(10):261–263.http://www.c-s-a.org.cn/1003-3254/6040.html

广东省高等职业教育品牌专业建设项目(2016gzpp007); 广东教育教学成果奖(高等教育)培育项目(校企“双主体”模式下的软件项目化教学探索与实践)

2017-01-24; 采用时间:2017-03-09