基于Web App服務模式的移動圖書館設計與實現

謝利東，段連鑫

（楚雄師范學院，云南楚雄675000）

基于Web App服務模式的移動圖書館設計與實現

謝利東，段連鑫

（楚雄師范學院，云南楚雄675000）

移動圖書館進一步擴展了圖書館服務的方式和手段，是數字圖書館發展的新方向、新領域，也是未來幾年圖書館信息化建設的重點內容之一。從系統結構、技術路線、建設成本、讀者使用方式等角度，分析了Web App（Web應用）服務模式的特點；在此基礎上，設計、開發了基于Web App服務模式的移動圖書館。經上線測試，系統各項功能運行正常，在多個移動平臺上使用不同移動瀏覽器訪問，呈現效果一致。

移動圖書館；Web App；服務模式；設計與實現

一、前言

移動圖書館（Mobile Library）是指使用Smartphone、PDA、Tablet PC等移動終端，通過接入移動互聯網來使用書目檢索、借閱查詢、預約操作、續借操作等圖書館服務的一種網絡應用系統，具有移動性、便攜性、及時性等特征［1］［2］。移動圖書館將移動互聯網技術和圖書館服務完美、有機地結合在一起，實現了圖書館的泛在服務［3］，任何人在任何時間、任何地點都可以借助移動終端獲取圖書信息和服務。

移動圖書館的服務模式是指為讀者提供服務的具體形式［4］，不僅決定了讀者使用的具體方式，也是移動圖書館系統結構、技術路線及建設成本的決定因素之一。短消息（SMS）、Web應用（Web App）、本地應用（Native App）、混合應用（Hybrid App）是目前主流的四種服務模式［5］。本文采用Web App服務模式，設計、開發了移動圖書館系統，在多個移動平臺上使用不同移動瀏覽器訪問，呈現效果一致。

二、Web App服務模式

Web App是一種采用HTTP作為傳輸協議，使用HTML5腳本語言編寫，通過瀏覽器呈現內容的移動應用程序［6］。WAP網站［7］、Web網站是與Web App相近的另外兩個術語，但三者在技術路線、應用定位、適用范圍等方面存在較大差異。

WAP網站以WML語言編寫并使用WAP協議進行傳送，以適應早期無線網絡數據傳輸速率低、移動設備性能低的情況。

Web網站和Web App雖然都使用HTML語言編寫、使用HTTP協議傳送，但在以下幾點有著明顯區別：Web網站主要通過計算機終端訪問，以提供海量信息為主要目標，交互界面以超鏈接為主要元素，精美且復雜；而Web App主要通過移動設備訪問，以實現某項業務為主要目標，交互界面以便于觸控操作的按鈕（Button）、滑桿（RangeSlider）、面板（Panel）等為主，簡潔清爽。

基于Web App服務模式的移動圖書館由運行在Web服務器上的服務端程序和運行在移動終端上的瀏覽器組成。服務端程序可以采用PHP、JSP、ASP.NET等成熟的動態網頁技術開發，但UI前端需要采用響應式設計以適合在屏幕尺寸較小且分辨率多樣的移動設備上訪問，通常可以借助Dojo Mobile、Responsive、Clouda、Groundwork、jQuery Mobile、Senda Touch等移動UI框架快速實現響應式設計。其中，常用的框架主要有以下四個：

（1）jqMbi

jqMbi由查詢庫、jqUi和jqPlugin等三個組件構成［8］，使用簡單，支持iOS、Android等移動設備上的WebKit瀏覽器，但對使用其他內核的移動瀏覽器支持不夠好。

（2）Senda Touch

Senda Touch是專門為移動設備開發應用的一個重量級JavaScript框架，用戶界面組件和數據管理全部基于HTML 5和CSS3，兼容Android、iOS等多種移動設備及各種內核的瀏覽器，但入門門檻較高［8］。

（3）PhoneGap

PhoneGap是一個基于HTML，CSS和JavaScript的移動App快速開發平臺［8］。嚴格來講，PhoneGap并不單純是UI框架，因為需要借助iOS、Android、Palm、Windows Phone等移動操作系統廠商提供的SDK開發對應的客戶端App。盡管可以調用系統底層函數和本地資源實現各種功能，如掃描二維碼、GPS定位、撥打電話等，但也喪失了跨平臺的特性。因此，PhoneGap更適合開發Hybrid App（混合式應用）。

（4）jQuery Mobile

jQuery Mobile是一個基于jQuery框架的輕量級JavaScript庫，具有以下幾個優點：

1）兼容性強：通過采用“漸進增強”策略，支持不同性能檔次的移動設備，支持iOS、Android、Windows Phone等多個移動平臺搭載的移動瀏覽器，以及Opera Mobile、UC等基于不同內核的第三方移動瀏覽器；

2）易使用：使用HTML 5標記即可創建移動頁面，幾乎不需要編寫任何JavaScript代碼；

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

由此可見，jQuery Mobile具有輕量級、易用、響應式設計、兼容性強等優點，是開發Web App的首選框架。

基于Web App服務模式的移動圖書館簡單易用，對移動設備性能及讀者操作技能的要求較低。支持普通手機、智能手機、平板、PDA等多種移動設備，只要安裝了移動瀏覽器并能接入移動互聯網即可。讀者只需要啟動瀏覽器并輸入網址即可使用移動圖書館提供的各項服務，不需要安裝額外的App，操作方式與計算機上網類似，沒有太多障礙。

Web App服務模式不涉及客戶端App的開發，不需要考慮復雜的底層適配問題，具有優良的跨平臺特性，可以實現“一次開發，多終端運行”。因此，相比Native App、Hybrid App等服務模式，Web App的建設成本、后期維護成本都非常低。

三、系統設計

整個系統按用戶角色分為兩個子系統：讀者子系統和管理員子系統。根據需求分析，功能結構設計如圖1所示

（1）讀者子系統功能詳細分析

讀者子系統包括身份驗證、信息動態、個人信息管理、館藏書目檢索、圖書事務等五個子模塊：

1）身份驗證。讀者使用借閱證號碼或手機號碼進行登錄，身份驗證通過后才能使用移動圖書館提供的全部功能，未登錄用戶只能查看信息動態模塊下的本館概況、書目推薦、動態資訊、使用幫助等內容。

圖1　移動圖書館功能結構

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

3）個人信息管理。維護個人信息，讀者可以方便地修改電話號碼、郵箱、個人簡介等基本資料，也可以重置登錄密碼。

4）圖書事務。包括借閱歷史查詢、圖書續借、圖書預借、圖書預借查詢及管理、借閱證掛失等功能。圖書事務是移動圖書館的核心功能模塊，也是讀者最期望使用的功能之一，

5）館藏書目檢索。讀者可以書目標題、作者、出版社、ISBN等為條件，輸入關鍵詞查詢圖書基本信息，如果已借出則可以執行預借操作。

（2）管理員子系統詳細功能分析

管理員子系統包括以下五個子模塊：

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

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

3）新聞管理：增加、刪除、修改新聞內容。

4）回復留言：查看讀者留言并回復。

5）查詢統計：對圖書借閱、預借、系統登錄等數據進行查詢、統計，分析讀者的借閱行為及規律以便改善服務。

數據庫是系統的靈魂，既是實現系統功能的基本保障，也是決定系統響應速度、運行穩定性的關鍵因素。根據功能結構，部分核心數據庫表的設計及功能如下：

1）讀者信息表。存放讀者詳細信息，包括借閱證條形碼、姓名、性別、讀者類型、身份證號碼、電話號碼、電子郵件地址、自我簡介、登錄密碼、是否凍結等字段。

2）動態資訊表。存放發布的新聞，包括標題、內容、發布者、發布時間、閱讀次數等字段。

3）建議留言表。存放讀者建議留言，包括留言標題、內容、留言者、發表時間、管理員回復內容、回復者、回復時間等字段。

4）書目信息表。存放書刊詳細信息，包括書刊條形碼、書名、圖書分類號、圖書架位編號、出版社、作者、單價、借閱次數、上架日期等字段。

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

6）預借信息表。存放預借信息，包括預借者、預借圖書、是否已借等字段。

四、系統實現

系統采用三層結構，依次為：數據訪問層（Data Access Layer）、業務邏輯層（Business Logic Layer）和表示層（Presentation），如圖2所示。

圖2　系統三層結構

數據訪問層主要實現數據庫讀寫并封裝為數據訪問組件；業務邏輯層調用數據訪問組件實現數據處理、數據驗證等業務邏輯；表示層根據用戶指令調用業務邏輯層中的類完成業務處理，最后將運算結果顯示在頁面上。通過分層設計可以分散關注并能有效降低模塊之間的耦合性，從而提高開發效率。

本系統開發環境為：Microsoft Visual Studio 2010，ASP.NET 4.0+jQueryMobile 1.4.2，開發語言為C#，數據庫系統選用SQL Server 2005。

（1）響應式設計

為了使文本和圖像在不同屏幕尺寸和分辨率下的顯示效果達到最優，全部頁面均采用響應式設計。基礎功能由jQueryMobile框架提供，針對本系統的功能需求及應用特點，增加了部分媒體查詢，例如，通過以下查詢優化文本及圖像在寬屏下的顯示效果：

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

（2）人機交互界面優化

移動設備上常用的輸入設備包括triple-tap數字鍵盤、QWERTY全功能鍵盤、Fastap鍵盤、觸摸屏、虛擬激光鍵盤等。但不管是鍵盤還是觸摸屏，操作上都是以單手為主，尤其是右手大拇指，這為信息輸入帶來了不便。例如，輸入內容時需要在中英文、數字、符號之間多次切換，導航操作需要手指移動較長距離等。因此，人機交互界面優化是本系統開發中的另一項關鍵技術。

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

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

（3）訪問設備偵測

jQueryMobile框架致力于在不同的平臺上獲得一致的使用體驗，但如果讀者通過PC端訪問系統，界面難免顯得單調、呆板。因此，有必要偵測用戶訪問時所使用的設備類型，如果是PC終端則應適當增加頁面元素，使用戶獲得更好的使用體驗。

由于不同操作系統、不同瀏覽器所報告的UA（UserAgent）并不相同，所以本系統在后臺代碼中通過分析HTTPRequest.UserAgnet屬性值來判斷用戶所使用的設備類型。

圖3　側滑菜單

五、系統測試

移動圖書館開發完成后進行了上線測試，服務器環境為Windows Server 2003+IIS 6.0+.NET Framework 4.0，經過測試各項功能運行正常。圖4是在聯想S898t手機（Android 4.2.2，QQ瀏覽器4.5）上運行的效果截圖。

圖4　運行效果圖

六、結束語

移動圖書館因其具有移動性、便攜性、靈活性等優點，深受年青讀者的喜愛。隨著“拇指一族”的增多，以及移動互聯網向著高速率、高穩定性的方向發展，可以預見移動圖書館必將成為未來幾年圖書館信息化建設的重點。本文設計、開發的基于Web App服務模式的移動圖書館，支持智能手機、iPad、PDA、Pocket PC等多種移動設備，所采用的技術路線具有一定的靈活性和可擴展性。在后續研發中，將根據用戶的反饋意見和建議，進一步完善功能，優化UI界面，以便為讀者提供更好的服務。

［1］胡振華，蔡新.移動圖書館信息服務系統［J］.圖書館自動化，2004（4）：18-20.

［2］海金梅，魏志玲.基于3G通信技術的移動圖書館建設［J］.圖書館學刊，2011（8）：114-116.

［3］劉松柏，姜海峰，李書寧.移動圖書館建設的難點與趨勢［J］.圖書情報工作，2013（4）：79-83.

［4］梁欣，過仕明.移動圖書館服務模式探索［J］.圖書情報工作，2013（9）：58-64.

［5］劉芷茵.移動圖書館的設計與功能實現——以廣州越秀區圖書館為例［J］.圖書館學刊，2013（10）：118-121.

［6］WebApp.百度百科［EB/OL］.http：//baike.baidu.com/ view/8346651.htm

［7］孟勇.基于WAP的移動圖書館系統的設計與實現［J］.現代情報，2010（9）：92-95.

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

（編輯：楊馥紅）

G250.76

A

1673-8454（2016）05-0047-04