基于HTML5的智慧養老服務平臺研究

王磊 聶滔滔 孫芳 劉哲 王秀娟

摘要：針對當前老年人網站商業化太濃，不注重休閑娛樂，導航不明確的特點，結合HTML5（H5）技術，搭建一款專門面向老年人的智慧養老公眾服務平臺。系統設計重點結合中國老年人的生理和心理特點，具有非常重要的應用和推廣價值。測試結果表明系統平臺運行良好。

關鍵詞：HTML5；Cordova；Bootstrap；智慧養老

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2018）28-0075-03

Research on Intelligent Pension Service Platform Based on HTML5

WANG Lei， NIE Tao-tao， SUN Fang， LIU Zhe，WANG Xiu-juan

（Taishan Medical College College of Medical Informatics Engineering， Taian 271016， China）

Abstract： In view of the current old website commercialization is too strong， does not pay attention to the leisure entertainment， the characteristics of navigation is not clear， in combination with HTML 5 （H5） technology， set up a dedicated to the wisdom of the elderly pension public service platform. The system design focuses on the physical and psychological characteristics of the elderly in China and has very important application and promotion value. The test results show that the system platform runs well.

Key words： HTML5； Cordova； Bootstrap； Intelligent Pension Service

1 背景

根據中國互聯網絡信息中心發布的數據，從2000年到2017年6月，我國50歲以上的網民群體呈擴大趨勢。2017年，50歲以上網民群體在網民中所占比例達到10.6%，越來越多的中老年人融入了互聯網之中，他們通過自己的生活經驗構建了獨特的互聯網使用方式，形成了區別于年輕人的互聯網文化。中國社會科學院社會學研究所與騰訊社會研究中心聯合課題組以50歲及以上人群為研究對象，通過數據分析和典型現象刻畫中老年人的互聯網生活，研究報告表明：智能手機是最主要的接入端口；中老年人互聯網體驗日漸立體全面；與慰藉心靈、調節情緒有關的互聯網內容中老年人點擊最多；中等收入及以上、有經濟自主性的中老年人互聯網受騙比例更高。[8]

我國是世界上唯一老年人口超過1億的國家，也是發展中國家中人口老齡化最嚴峻的國家。在現有的養老模式下利用先進的計算機技術，打造一個安全、高效的智慧養老App平臺，全面推進養老服務水平，是破解我國日趨尖銳的養老服務難題的有效途徑之一，同時也是切實提高廣大老年人健康、生活質量的重要出路。

該文開發了一套基于HTML5的 智慧養老App，使中老年人能夠非常方便地通過手機、平板等移動終端設備隨時隨地、方便快捷地瀏覽查看日常娛樂，養生等信息，同時還可以滿足中老年人的情感交流需求和緊急求助需求。

2 開發平臺及技術

HTML5是唯一一個統配PC，MacC，iPhone、iPad、Android、Windows Phone等主流平臺的跨平臺語言，是開發一次，多端部署的跨平臺語言，可以實現音頻、視頻自由嵌入，使多媒體形式更為靈活；可以使用地理定位功能使人們隨時隨地分享位置等等功能。

系統開發采用了App快速開發框架Wex5。該框架遵循Apache開源協議，完全開源免費，上百個組件框架，全部開放。結合HTML5、CSS3、JAVASCRIPT標準技術，實現了系統App一次開發，多端任意部署。拖曳式的頁面設計和Bootstrap提供的豐富Web組件使得前端界面設計美觀實用、導航交互更加人性化；同時采用Cordova插件技術提供的設備相關API，實現了拍照、錄像、錄音、快速撥號、智能地理定位功能。后臺數據庫采用SQLITE輕型嵌入式數據庫平臺，調用WEX5的Bass實現。[1-4]

3 數據庫設計

數據庫設計采用基于3NF的規范設計方法。從最初自頂而下的需求分析，后經自底而上的概念結構設計，得到了智慧養老平臺的全局E-R圖，然后將E-R圖轉換為數據庫邏輯結構。概念結構設計階段著重根據老年人的生活習慣，針對經常查詢的數據，刻意保留了必要的冗余。轉化后的邏輯結構關系模式根據3NF的要求進行了必要的分解，實現了盡可能少的數據更新異常。為提高數據的查詢效率，物理結構設計階段針對常用字段創建了必要的索引，物理文件采用了分區存放策略，以提高IO存取效率。[5-7]

4 系統功能設計

根據軟件的功能和性能需求，系統功能設計主要包括中華養生，休閑娛樂，親情互動，緊急求助，生活服務，老年咨詢六大模塊，滿足用戶需求，方便用戶使用。系統結構層次脈絡清晰，界面簡潔，適合廣大老年朋友。系統功能模塊結構圖如圖1：

中華養生模塊給用戶提供了大量的養生知識和養生文章。當用戶點擊打開中華養生界面以后，自上而下會出現許多的圖文，可以進行上滑操作查看更多。根據用戶的需要，點擊對應圖文，App就會自動加載當前文檔，具體而詳細的供用戶閱讀。如果用戶喜歡此文章，想要分享給大家，點擊當前界面的分享按鈕即可將該文章發表出去，供其他用戶查看。指定時間文章內容都會更新。

休閑娛樂模塊為中老年人提供了許多休閑娛樂的選擇，掃除了生活的苦悶與寂寥。該休閑娛樂區域一共分為三大模塊，包括：藝術類，歌劇類，棋牌類。藝術類子模塊再分為書法，養鳥，賞花和廣場舞四大區域功能模塊。用戶可以根據自己的愛好和需求來進行選擇，當用戶點擊“養鳥”按鈕時，就會為用戶提供養鳥知識以及鳥的品種，為用戶提供大量的養鳥文章；當用戶點擊“書法”按鈕時，就會為用戶提供展示大量的書畫作品，供用戶欣賞；當用戶點擊“賞花”或者“廣場舞”按鈕時，前者App會為用戶提供養花知識和各種花卉圖片，后者為用戶提供廣場舞的視頻教學以及廣場舞的視頻欣賞。歌劇類子模塊再分為京劇，古典，紅歌和樂器四大功能模塊。用戶根據自己的愛好和需求進行選擇，當點擊對應的操作按鈕后，就會為用戶提供相應的圖文知識，或音頻播放，或視頻教學。當用戶每使用一個功能結束以后，點擊當前界面左上角的“<”圖標即可退出當前操作界面，根據自己的需求重新進行選擇。棋牌類子模塊再分為棋類，撲克，麻將以及智力游戲四大模塊。用戶根據自己的愛好和需求點擊相應的按鈕后，就會出現棋類游戲，或撲克類游戲，或麻將類游戲，或智力類游戲。棋類主要包括：象棋，跳棋，軍棋，五子棋；撲克主要包括斗地主；麻將主要有貴州麻將，重慶麻將，四川麻將，山東麻將；智力游戲主要包括智力型的小游戲。用戶點擊相應游戲種類，進入界面點擊開始即可進行游玩。

親情互動模塊主要包括三個子功能：事物分享，親情交流，黃昏戀情。事物分享子功能中，用戶可以發表自己的一些意見以及用戶想發表的任何圖文。該發表過程中不會有匿名發送，對于用戶發表的圖文會進行嚴格的監視，如果有用戶發表違背道德或者擾亂公共秩序等不利的圖文，對于長期進行此類操作的這些用戶將被拉入黑名單，此賬戶將被凍結，不再享有智慧養老App的使用權利，并且交由公安機關進行嚴格的審查和處理；對于短期進行此類操作的用戶將給予提醒或者進行嚴格的警告。發表內容可以是文章+圖片，也可以是其中一種。對于發表過的圖文，可以進行刪除操作，不再顯示；發表過的圖文會保存在發表記錄中。除此之外，事物分享是一個公共的界面，所有用戶的發表圖文都會被可視化（也就是說只要是登錄成功的用戶都會看見），其他用戶可以進行點贊，評論以及舉報操作。親情交流子功能給用戶創建一個交流平臺。 在進行此操作之前，用戶需要進行好友的添加，在當前界面的右上角有一個“+”的圖標，點擊此圖標即可進入好友添加界面，添加方式是以對方的App賬號為準。在添加完好友以后，點擊好友所在的一欄，即可進入交流界面，可以向指定好友發送圖片，文章，表情，語音，文字，連接等內容。當然，用戶也可以接收來自其他好友發來的信息。黃昏戀情子功能針對老年人后期的愛情培撫。在用戶點擊打開該功能后，進入功能區的主界面，這里用戶會看見所有想要得到愛情的人的信息，具體包括：姓名，年齡，個人照，聯系方式。該界面中的用戶信息只用于界面展示，允許發表用戶進行修改，其他用戶不能進行任何的操作。發表的方式在當前界面的右上角有一個“+”的圖標，點擊進入后，即可進行信息的編輯和發表。

緊急求助模塊為用戶提供了緊急號碼查詢和緊急快捷鍵設置功能。

生活服務模塊包括養生保健用品和人工服務區兩個子模塊。在登錄成功以后，點擊“生活服務區”按鈕即可進入生活服務區界面進行其他的操作。其中人工服務區再分為兼職和服務。

老年資訊模塊為用戶提供海量的養老政策以及身體健康方面的文章知識。指定時間會自動更新圖文內容，主要包括中國當前的養老政策信息以及老年生活健康方面的圖文。比如：最新的養老政策，政府的養老扶持和最新的老年活動等等信息。根據用戶的需要，點擊對應圖文，App就會自動加載當前文檔，具體而詳細的供用戶閱讀。如果用戶喜歡此文章，想要分享給大家，點擊當前界面的分享按鈕即可將該文章發表出去，供其他用戶查看。

5 系統實現與測試

在注冊完賬號以后，輸入賬號和密碼，點擊“登錄”字樣的按鈕就可以進入智慧養老App的主界面了。實現主界面如圖2。

實現“緊急報警”功能時，調用了Cordova-plugin-media插件，使用步驟如下：[1][3]

1）導入插件：

在程序開頭，需要寫入代碼： require（"cordova！cordova-plugin-media"）；來導入media插件。

2）加載音頻文件

var src = window.location.origin + require.toUrl（url）；其中參數url便是音頻文件的路徑。

3）啟動報警和停止報警實現

在程序中添加一個“啟動報警”按鈕，并且為這個按鈕設置一個點擊事件，事件中的方法體為該按鈕對象調用play方法：this.mediaRec.play（）；同理添加“停止報警”按鈕，按鈕的點擊事件中方法體為該按鈕對象調用stop方法：this.mediaRec.stop（）；。

系統測試階段分了兩種情況。頁面開發一般使用瀏覽器調試，如果瀏覽器訪問頁面正常，而App訪問報錯時就要進行App調試。App調試是使用PC瀏覽器監控手機的運行過程，借助瀏覽器相應的工具能力完成對真機前端UI頁面的調試。如果Cordova插件出現問題則必須要使用原生環境進行調試。App調試通過后，則繼續將APK文件和IPA文件安裝到安卓手機和蘋果手機上，進行真機測試，該階段測試側重于軟件的功能和性能，以用戶的視角來測試軟件的實用性和友好性。[1]

6 結束語

在當前老齡人口急劇增速的形勢下，該課題借助先進的信息技術手段，根據中國老年人的生理和心理特點，基于HTML5（H5）低成本跨平臺的開發優勢以及其混合模式移動應用特點，搭建一個專門面向老年人的智慧養老公眾服務平臺。通過該平臺可以豐富老年人的晚年生活，創建良好的互聯網養老文化氛圍。

參考文獻：

[1] 馬科. HTML5 App商業開發實戰教程——基于WeX5可視化開發平臺[M]. 北京： 高等教育出版社， 2016（9）.

[2] 胡晶. 基于HTML5的Web移動應用開發研究[J]. 工業控制計算機， 2014， 27（10）： 80-81.

[3] 顧學海， 胡牧， 蔣厚明， 等. 基于HTML5的混合移動應用開發[J]. 計算機系統應用， 2016， 25（5）： 236-239.

[4] 劉忠杰. 基于HTML5的電子報紙制作與展示系統研究[J]. 微型機與應用， 2017， 36（13）： 97-101.

[5] 王珊. 數據庫系統概論[M]. 北京： 高等教育出版社， 2014（9）： 158-164.

[6] 劉英杰. 基于Android的自助導游服務系統[J]. 微型機與應用， 2016， 35（10）： 98-100.

[7] 宋凱. 基于Android的校園商用服務集成平臺[J]. 微型機與應用， 2015， 34（18）： 92-94.

[8] 光明日報.我國中老年人互聯網生活研究報告[DB/OL]. http：//media.people.com.cn/n1/2018/0322/c40606-29881635.html.

【通聯編輯：謝媛媛】