基于HTML5的智慧養(yǎng)老服務(wù)平臺研究

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

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

關(guān)鍵詞：HTML5；Cordova；Bootstrap；智慧養(yǎng)老

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：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 背景

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

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

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

2 開發(fā)平臺及技術(shù)

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

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

3 數(shù)據(jù)庫設(shè)計(jì)

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

4 系統(tǒng)功能設(shè)計(jì)

根據(jù)軟件的功能和性能需求，系統(tǒng)功能設(shè)計(jì)主要包括中華養(yǎng)生，休閑娛樂，親情互動，緊急求助，生活服務(wù)，老年咨詢六大模塊，滿足用戶需求，方便用戶使用。系統(tǒng)結(jié)構(gòu)層次脈絡(luò)清晰，界面簡潔，適合廣大老年朋友。系統(tǒng)功能模塊結(jié)構(gòu)圖如圖1：

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

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

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

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

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

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

5 系統(tǒng)實(shí)現(xiàn)與測試

在注冊完賬號以后，輸入賬號和密碼，點(diǎn)擊“登錄”字樣的按鈕就可以進(jìn)入智慧養(yǎng)老App的主界面了。實(shí)現(xiàn)主界面如圖2。

實(shí)現(xiàn)“緊急報(bào)警”功能時，調(diào)用了Cordova-plugin-media插件，使用步驟如下：[1][3]

1）導(dǎo)入插件：

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

2）加載音頻文件

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

3）啟動報(bào)警和停止報(bào)警實(shí)現(xiàn)

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

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

6 結(jié)束語

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

參考文獻(xiàn)：

[1] 馬科. HTML5 App商業(yè)開發(fā)實(shí)戰(zhàn)教程——基于WeX5可視化開發(fā)平臺[M]. 北京： 高等教育出版社， 2016（9）.

[2] 胡晶. 基于HTML5的Web移動應(yīng)用開發(fā)研究[J]. 工業(yè)控制計(jì)算機(jī)， 2014， 27（10）： 80-81.

[3] 顧學(xué)海， 胡牧， 蔣厚明， 等. 基于HTML5的混合移動應(yīng)用開發(fā)[J]. 計(jì)算機(jī)系統(tǒng)應(yīng)用， 2016， 25（5）： 236-239.

[4] 劉忠杰. 基于HTML5的電子報(bào)紙制作與展示系統(tǒng)研究[J]. 微型機(jī)與應(yīng)用， 2017， 36（13）： 97-101.

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

[6] 劉英杰. 基于Android的自助導(dǎo)游服務(wù)系統(tǒng)[J]. 微型機(jī)與應(yīng)用， 2016， 35（10）： 98-100.

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

[8] 光明日報(bào).我國中老年人互聯(lián)網(wǎng)生活研究報(bào)告[DB/OL]. http：//media.people.com.cn/n1/2018/0322/c40606-29881635.html.

【通聯(lián)編輯：謝媛媛】