謝利東 段連鑫

摘 要：移動(dòng)圖書(shū)館進(jìn)一步擴(kuò)展了圖書(shū)館服務(wù)的方式和手段，是數(shù)字圖書(shū)館發(fā)展的新方向、新領(lǐng)域，也是未來(lái)幾年圖書(shū)館信息化建設(shè)的重點(diǎn)內(nèi)容之一。從系統(tǒng)結(jié)構(gòu)、技術(shù)路線(xiàn)、建設(shè)成本、讀者使用方式等角度，分析了Web App（Web 應(yīng)用）服務(wù)模式的特點(diǎn)；在此基礎(chǔ)上，設(shè)計(jì)、開(kāi)發(fā)了基于Web App服務(wù)模式的移動(dòng)圖書(shū)館。經(jīng)上線(xiàn)測(cè)試，系統(tǒng)各項(xiàng)功能運(yùn)行正常，在多個(gè)移動(dòng)平臺(tái)上使用不同移動(dòng)瀏覽器訪(fǎng)問(wèn)，呈現(xiàn)效果一致。

關(guān)鍵詞：移動(dòng)圖書(shū)館；Web App；服務(wù)模式；設(shè)計(jì)與實(shí)現(xiàn)

中圖分類(lèi)號(hào)：G250.76 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1673-8454（2016）05-0047-04

一、前言

移動(dòng)圖書(shū)館（Mobile Library）是指使用Smartphone、PDA、Tablet PC等移動(dòng)終端，通過(guò)接入移動(dòng)互聯(lián)網(wǎng)來(lái)使用書(shū)目檢索、借閱查詢(xún)、預(yù)約操作、續(xù)借操作等圖書(shū)館服務(wù)的一種網(wǎng)絡(luò)應(yīng)用系統(tǒng)，具有移動(dòng)性、便攜性、及時(shí)性等特征[1][2]。移動(dòng)圖書(shū)館將移動(dòng)互聯(lián)網(wǎng)技術(shù)和圖書(shū)館服務(wù)完美、有機(jī)地結(jié)合在一起，實(shí)現(xiàn)了圖書(shū)館的泛在服務(wù)[3]，任何人在任何時(shí)間、任何地點(diǎn)都可以借助移動(dòng)終端獲取圖書(shū)信息和服務(wù)。

移動(dòng)圖書(shū)館的服務(wù)模式是指為讀者提供服務(wù)的具體形式[4]，不僅決定了讀者使用的具體方式，也是移動(dòng)圖書(shū)館系統(tǒng)結(jié)構(gòu)、技術(shù)路線(xiàn)及建設(shè)成本的決定因素之一。短消息（SMS）、Web應(yīng)用（Web App）、本地應(yīng)用（Native App）、混合應(yīng)用（Hybrid App）是目前主流的四種服務(wù)模式[5]。本文采用Web App服務(wù)模式，設(shè)計(jì)、開(kāi)發(fā)了移動(dòng)圖書(shū)館系統(tǒng)，在多個(gè)移動(dòng)平臺(tái)上使用不同移動(dòng)瀏覽器訪(fǎng)問(wèn)，呈現(xiàn)效果一致。

二、Web App服務(wù)模式

1.Web App簡(jiǎn)介

Web App是一種采用HTTP作為傳輸協(xié)議，使用HTML5腳本語(yǔ)言編寫(xiě)，通過(guò)瀏覽器呈現(xiàn)內(nèi)容的移動(dòng)應(yīng)用程序[6]。WAP網(wǎng)站[7]、Web網(wǎng)站是與Web App相近的另外兩個(gè)術(shù)語(yǔ)，但三者在技術(shù)路線(xiàn)、應(yīng)用定位、適用范圍等方面存在較大差異。

WAP網(wǎng)站以WML語(yǔ)言編寫(xiě)并使用WAP協(xié)議進(jìn)行傳送，以適應(yīng)早期無(wú)線(xiàn)網(wǎng)絡(luò)數(shù)據(jù)傳輸速率低、移動(dòng)設(shè)備性能低的情況。

Web網(wǎng)站和Web App雖然都使用HTML語(yǔ)言編寫(xiě)、使用HTTP協(xié)議傳送，但在以下幾點(diǎn)有著明顯區(qū)別：Web網(wǎng)站主要通過(guò)計(jì)算機(jī)終端訪(fǎng)問(wèn)，以提供海量信息為主要目標(biāo)，交互界面以超鏈接為主要元素，精美且復(fù)雜；而Web App主要通過(guò)移動(dòng)設(shè)備訪(fǎng)問(wèn)，以實(shí)現(xiàn)某項(xiàng)業(yè)務(wù)為主要目標(biāo)，交互界面以便于觸控操作的按鈕（Button）、滑桿（RangeSlider）、面板（Panel）等為主，簡(jiǎn)潔清爽。

2.技術(shù)路線(xiàn)

基于Web App服務(wù)模式的移動(dòng)圖書(shū)館由運(yùn)行在Web服務(wù)器上的服務(wù)端程序和運(yùn)行在移動(dòng)終端上的瀏覽器組成。服務(wù)端程序可以采用PHP、JSP、ASP.NET等成熟的動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)開(kāi)發(fā)，但UI前端需要采用響應(yīng)式設(shè)計(jì)以適合在屏幕尺寸較小且分辨率多樣的移動(dòng)設(shè)備上訪(fǎng)問(wèn)，通?？梢越柚鶧ojo Mobile、Responsive、Clouda、Groundwork、jQuery Mobile、Senda Touch等移動(dòng)UI框架快速實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。其中，常用的框架主要有以下四個(gè)：

（1）jqMbi

jqMbi由查詢(xún)庫(kù)、jqUi和jqPlugin等三個(gè)組件構(gòu)成[8]，使用簡(jiǎn)單，支持iOS、Android等移動(dòng)設(shè)備上的WebKit瀏覽器，但對(duì)使用其他內(nèi)核的移動(dòng)瀏覽器支持不夠好。

（2）Senda Touch

Senda Touch是專(zhuān)門(mén)為移動(dòng)設(shè)備開(kāi)發(fā)應(yīng)用的一個(gè)重量級(jí)JavaScript框架，用戶(hù)界面組件和數(shù)據(jù)管理全部基于HTML 5和CSS3，兼容Android、iOS等多種移動(dòng)設(shè)備及各種內(nèi)核的瀏覽器，但入門(mén)門(mén)檻較高[8]。

（3）PhoneGap

PhoneGap是一個(gè)基于HTML，CSS和JavaScript的移動(dòng)App快速開(kāi)發(fā)平臺(tái)[8]。嚴(yán)格來(lái)講，PhoneGap并不單純是UI框架，因?yàn)樾枰柚鷌OS、Android、Palm、Windows Phone等移動(dòng)操作系統(tǒng)廠(chǎng)商提供的SDK開(kāi)發(fā)對(duì)應(yīng)的客戶(hù)端App。盡管可以調(diào)用系統(tǒng)底層函數(shù)和本地資源實(shí)現(xiàn)各種功能，如掃描二維碼、GPS定位、撥打電話(huà)等，但也喪失了跨平臺(tái)的特性。因此，PhoneGap更適合開(kāi)發(fā)Hybrid App（混合式應(yīng)用）。

（4）jQuery Mobile

jQuery Mobile是一個(gè)基于jQuery框架的輕量級(jí)JavaScript庫(kù)，具有以下幾個(gè)優(yōu)點(diǎn)：

1）兼容性強(qiáng)：通過(guò)采用“漸進(jìn)增強(qiáng)”策略，支持不同性能檔次的移動(dòng)設(shè)備，支持iOS、Android、Windows Phone等多個(gè)移動(dòng)平臺(tái)搭載的移動(dòng)瀏覽器，以及Opera Mobile、UC等基于不同內(nèi)核的第三方移動(dòng)瀏覽器；

2）易使用：使用HTML 5標(biāo)記即可創(chuàng)建移動(dòng)頁(yè)面，幾乎不需要編寫(xiě)任何JavaScript代碼；

3）組件豐富：jQuery Mobile提供了豐富、友好的UI組件，可以創(chuàng)建精美的人機(jī)交互界面，提供近似Native App的使用體驗(yàn)。

由此可見(jiàn)，jQuery Mobile具有輕量級(jí)、易用、響應(yīng)式設(shè)計(jì)、兼容性強(qiáng)等優(yōu)點(diǎn)，是開(kāi)發(fā)Web App的首選框架。

3.讀者使用方式

基于Web App服務(wù)模式的移動(dòng)圖書(shū)館簡(jiǎn)單易用，對(duì)移動(dòng)設(shè)備性能及讀者操作技能的要求較低。支持普通手機(jī)、智能手機(jī)、平板、PDA等多種移動(dòng)設(shè)備，只要安裝了移動(dòng)瀏覽器并能接入移動(dòng)互聯(lián)網(wǎng)即可。讀者只需要啟動(dòng)瀏覽器并輸入網(wǎng)址即可使用移動(dòng)圖書(shū)館提供的各項(xiàng)服務(wù)，不需要安裝額外的App，操作方式與計(jì)算機(jī)上網(wǎng)類(lèi)似，沒(méi)有太多障礙。

4.建設(shè)成本

Web App服務(wù)模式不涉及客戶(hù)端App的開(kāi)發(fā)，不需要考慮復(fù)雜的底層適配問(wèn)題，具有優(yōu)良的跨平臺(tái)特性，可以實(shí)現(xiàn)“一次開(kāi)發(fā)，多終端運(yùn)行”。因此，相比Native App 、Hybrid App等服務(wù)模式，Web App的建設(shè)成本、后期維護(hù)成本都非常低。

三、系統(tǒng)設(shè)計(jì)

1.系統(tǒng)功能結(jié)構(gòu)設(shè)計(jì)

整個(gè)系統(tǒng)按用戶(hù)角色分為兩個(gè)子系統(tǒng)：讀者子系統(tǒng)和管理員子系統(tǒng)。根據(jù)需求分析，功能結(jié)構(gòu)設(shè)計(jì)如圖1所示

（1）讀者子系統(tǒng)功能詳細(xì)分析

讀者子系統(tǒng)包括身份驗(yàn)證、信息動(dòng)態(tài)、個(gè)人信息管理、館藏書(shū)目檢索、圖書(shū)事務(wù)等五個(gè)子模塊：

1）身份驗(yàn)證。讀者使用借閱證號(hào)碼或手機(jī)號(hào)碼進(jìn)行登錄，身份驗(yàn)證通過(guò)后才能使用移動(dòng)圖書(shū)館提供的全部功能，未登錄用戶(hù)只能查看信息動(dòng)態(tài)模塊下的本館概況、書(shū)目推薦、動(dòng)態(tài)資訊、使用幫助等內(nèi)容。

2）信息動(dòng)態(tài)。查閱圖書(shū)館公共信息，包括本館概況、書(shū)目推薦、動(dòng)態(tài)資訊、建議留言、使用幫助等。其中，建議留言需要登錄后才能使用。

3）個(gè)人信息管理。維護(hù)個(gè)人信息，讀者可以方便地修改電話(huà)號(hào)碼、郵箱、個(gè)人簡(jiǎn)介等基本資料，也可以重置登錄密碼。

4）圖書(shū)事務(wù)。包括借閱歷史查詢(xún)、圖書(shū)續(xù)借、圖書(shū)預(yù)借、圖書(shū)預(yù)借查詢(xún)及管理、借閱證掛失等功能。圖書(shū)事務(wù)是移動(dòng)圖書(shū)館的核心功能模塊，也是讀者最期望使用的功能之一，

5）館藏書(shū)目檢索。讀者可以書(shū)目標(biāo)題、作者、出版社、ISBN等為條件，輸入關(guān)鍵詞查詢(xún)圖書(shū)基本信息，如果已借出則可以執(zhí)行預(yù)借操作。

（2）管理員子系統(tǒng)詳細(xì)功能分析

管理員子系統(tǒng)包括以下五個(gè)子模塊：

1）讀者賬戶(hù)管理：批量或逐條增加、刪除讀者賬戶(hù)，以及修改讀者資料、解除借閱證掛失等功能。

2）書(shū)目信息管理：批量或逐條增加、刪除、修改書(shū)刊信息。

3）新聞管理：增加、刪除、修改新聞內(nèi)容。

4）回復(fù)留言：查看讀者留言并回復(fù)。

5）查詢(xún)統(tǒng)計(jì)：對(duì)圖書(shū)借閱、預(yù)借、系統(tǒng)登錄等數(shù)據(jù)進(jìn)行查詢(xún)、統(tǒng)計(jì)，分析讀者的借閱行為及規(guī)律以便改善服務(wù)。

2.數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)是系統(tǒng)的靈魂，既是實(shí)現(xiàn)系統(tǒng)功能的基本保障，也是決定系統(tǒng)響應(yīng)速度、運(yùn)行穩(wěn)定性的關(guān)鍵因素。根據(jù)功能結(jié)構(gòu)，部分核心數(shù)據(jù)庫(kù)表的設(shè)計(jì)及功能如下：

1）讀者信息表。存放讀者詳細(xì)信息，包括借閱證條形碼、姓名、性別、讀者類(lèi)型、身份證號(hào)碼、電話(huà)號(hào)碼、電子郵件地址、自我簡(jiǎn)介、登錄密碼、是否凍結(jié)等字段。

2）動(dòng)態(tài)資訊表。存放發(fā)布的新聞，包括標(biāo)題、內(nèi)容、發(fā)布者、發(fā)布時(shí)間、閱讀次數(shù)等字段。

3）建議留言表。存放讀者建議留言，包括留言標(biāo)題、內(nèi)容、留言者、發(fā)表時(shí)間、管理員回復(fù)內(nèi)容、回復(fù)者、回復(fù)時(shí)間等字段。

4）書(shū)目信息表。存放書(shū)刊詳細(xì)信息，包括書(shū)刊條形碼、書(shū)名、圖書(shū)分類(lèi)號(hào)、圖書(shū)架位編號(hào)、出版社、作者、單價(jià)、借閱次數(shù)、上架日期等字段。

5）借閱信息表。存放書(shū)刊借閱信息，包括圖書(shū)條形碼、借閱日期、歸還日期、借閱者、是否續(xù)借等字段。

6）預(yù)借信息表。存放預(yù)借信息，包括預(yù)借者、預(yù)借圖書(shū)、是否已借等字段。

四、系統(tǒng)實(shí)現(xiàn)

1.系統(tǒng)架構(gòu)

系統(tǒng)采用三層結(jié)構(gòu)，依次為：數(shù)據(jù)訪(fǎng)問(wèn)層（Data Access Layer）、業(yè)務(wù)邏輯層（Business Logic Layer）和表示層（Presentation），如圖2所示。

數(shù)據(jù)訪(fǎng)問(wèn)層主要實(shí)現(xiàn)數(shù)據(jù)庫(kù)讀寫(xiě)并封裝為數(shù)據(jù)訪(fǎng)問(wèn)組件；業(yè)務(wù)邏輯層調(diào)用數(shù)據(jù)訪(fǎng)問(wèn)組件實(shí)現(xiàn)數(shù)據(jù)處理、數(shù)據(jù)驗(yàn)證等業(yè)務(wù)邏輯；表示層根據(jù)用戶(hù)指令調(diào)用業(yè)務(wù)邏輯層中的類(lèi)完成業(yè)務(wù)處理，最后將運(yùn)算結(jié)果顯示在頁(yè)面上。通過(guò)分層設(shè)計(jì)可以分散關(guān)注并能有效降低模塊之間的耦合性，從而提高開(kāi)發(fā)效率。

2.系統(tǒng)開(kāi)發(fā)環(huán)境

本系統(tǒng)開(kāi)發(fā)環(huán)境為：Microsoft Visual Studio 2010，ASP.NET 4.0+jQueryMobile 1.4.2，開(kāi)發(fā)語(yǔ)言為C#，數(shù)據(jù)庫(kù)系統(tǒng)選用SQL Server 2005。

3.部分關(guān)鍵技術(shù)

（1）響應(yīng)式設(shè)計(jì)

為了使文本和圖像在不同屏幕尺寸和分辨率下的顯示效果達(dá)到最優(yōu)，全部頁(yè)面均采用響應(yīng)式設(shè)計(jì)。基礎(chǔ)功能由jQueryMobile框架提供，針對(duì)本系統(tǒng)的功能需求及應(yīng)用特點(diǎn)，增加了部分媒體查詢(xún)，例如，通過(guò)以下查詢(xún)優(yōu)化文本及圖像在寬屏下的顯示效果：

@media （min-width：46em）{ .div_Content{ padding： 15px 5% 4.5em； } }

（2）人機(jī)交互界面優(yōu)化

移動(dòng)設(shè)備上常用的輸入設(shè)備包括triple-tap數(shù)字鍵盤(pán)、QWERTY全功能鍵盤(pán)、Fastap鍵盤(pán)、觸摸屏、虛擬激光鍵盤(pán)等。但不管是鍵盤(pán)還是觸摸屏，操作上都是以單手為主，尤其是右手大拇指，這為信息輸入帶來(lái)了不便。例如，輸入內(nèi)容時(shí)需要在中英文、數(shù)字、符號(hào)之間多次切換，導(dǎo)航操作需要手指移動(dòng)較長(zhǎng)距離等。因此，人機(jī)交互界面優(yōu)化是本系統(tǒng)開(kāi)發(fā)中的另一項(xiàng)關(guān)鍵技術(shù)。

通過(guò)采用工具欄、側(cè)滑菜單、彈出式面板等類(lèi)似本地App的交互元素，以及增加按鈕觸控面積、優(yōu)化輸入框等措施，可有效減少用戶(hù)操作次數(shù)，提高信息輸入效率。

例如，頁(yè)面內(nèi)所有超鏈接均呈現(xiàn)為按鈕樣式（20px×20px）以方便觸控；頁(yè)面頂部和底部采用固定工具欄模式（data-position="fixed"），當(dāng)滾動(dòng)條滾動(dòng)到中部時(shí)自動(dòng)隱藏頂部欄和底部欄以增加內(nèi)容顯示區(qū)域，單擊頁(yè)面空白區(qū)域則恢復(fù)顯示，既方便閱讀，也減少了操作次數(shù)；常用導(dǎo)航菜單項(xiàng)布局在頁(yè)面底部，采用導(dǎo)航容器（data-role="navbar"）使按鈕滿(mǎn)屏橫向排列，以方便用戶(hù)點(diǎn)選；在需要輸入數(shù)字、日期、網(wǎng)址、電子郵件等內(nèi)容時(shí)，通過(guò)HTML 5表單控件中的type屬性設(shè)定輸入框類(lèi)型，獲取焦點(diǎn)后鍵盤(pán)會(huì)自動(dòng)呈現(xiàn)為數(shù)字、英文、中文輸入模式，可以減少用戶(hù)切換輸入法的次數(shù)。再如，通過(guò)收縮面板（panel）配合折疊組（collapsible-set）實(shí)現(xiàn)側(cè)滑菜單，既節(jié)約頁(yè)面空間，又方便用戶(hù)點(diǎn)選，其效果如圖3所示。

（3）訪(fǎng)問(wèn)設(shè)備偵測(cè)

jQueryMobile框架致力于在不同的平臺(tái)上獲得一致的使用體驗(yàn)，但如果讀者通過(guò)PC端訪(fǎng)問(wèn)系統(tǒng)，界面難免顯得單調(diào)、呆板。因此，有必要偵測(cè)用戶(hù)訪(fǎng)問(wèn)時(shí)所使用的設(shè)備類(lèi)型，如果是PC終端則應(yīng)適當(dāng)增加頁(yè)面元素，使用戶(hù)獲得更好的使用體驗(yàn)。

由于不同操作系統(tǒng)、不同瀏覽器所報(bào)告的UA（UserAgent）并不相同，所以本系統(tǒng)在后臺(tái)代碼中通過(guò)分析HTTPRequest.UserAgnet屬性值來(lái)判斷用戶(hù)所使用的設(shè)備類(lèi)型。

五、系統(tǒng)測(cè)試

移動(dòng)圖書(shū)館開(kāi)發(fā)完成后進(jìn)行了上線(xiàn)測(cè)試，服務(wù)器環(huán)境為Windows Server 2003+ IIS 6.0+.NET Framework 4.0，經(jīng)過(guò)測(cè)試各項(xiàng)功能運(yùn)行正常。圖4是在聯(lián)想S898t手機(jī)（Android 4.2.2，QQ瀏覽器4.5）上運(yùn)行的效果截圖。

六、結(jié)束語(yǔ)

移動(dòng)圖書(shū)館因其具有移動(dòng)性、便攜性、靈活性等優(yōu)點(diǎn)，深受年青讀者的喜愛(ài)。隨著“拇指一族”的增多，以及移動(dòng)互聯(lián)網(wǎng)向著高速率、高穩(wěn)定性的方向發(fā)展，可以預(yù)見(jiàn)移動(dòng)圖書(shū)館必將成為未來(lái)幾年圖書(shū)館信息化建設(shè)的重點(diǎn)。本文設(shè)計(jì)、開(kāi)發(fā)的基于Web App服務(wù)模式的移動(dòng)圖書(shū)館，支持智能手機(jī)、iPad、PDA、Pocket PC等多種移動(dòng)設(shè)備，所采用的技術(shù)路線(xiàn)具有一定的靈活性和可擴(kuò)展性。在后續(xù)研發(fā)中，將根據(jù)用戶(hù)的反饋意見(jiàn)和建議，進(jìn)一步完善功能，優(yōu)化UI界面，以便為讀者提供更好的服務(wù)。

參考文獻(xiàn)：

[1]胡振華，蔡新.移動(dòng)圖書(shū)館信息服務(wù)系統(tǒng)[J].圖書(shū)館自動(dòng)化，2004（4）：18-20.

[2]海金梅，魏志玲.基于3G通信技術(shù)的移動(dòng)圖書(shū)館建設(shè)[J].圖書(shū)館學(xué)刊，2011（8）：114-116.

[3]劉松柏，姜海峰，李書(shū)寧.移動(dòng)圖書(shū)館建設(shè)的難點(diǎn)與趨勢(shì)[J].圖書(shū)情報(bào)工作，2013（4）：79-83.

[4]梁欣，過(guò)仕明.移動(dòng)圖書(shū)館服務(wù)模式探索[J].圖書(shū)情報(bào)工作，2013（9）：58-64.

[5]劉芷茵.移動(dòng)圖書(shū)館的設(shè)計(jì)與功能實(shí)現(xiàn)——以廣州越秀區(qū)圖書(shū)館為例[J].圖書(shū)館學(xué)刊，2013（10）：118-121.

[6]Web App.百度百科[EB/OL].http：//baike.baidu.com/view/8346651.htm.

[7]孟勇.基于WAP的移動(dòng)圖書(shū)館系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代情報(bào)，2010（9）：92-95.

[8]單東林，張曉菲等.鋒利的jQuery（第2版）[M].北京：人民郵電出版社，2012：298-299.

（編輯：楊馥紅）