基于移動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