基于HTML5智能垃圾分類回收系統(tǒng)的研究與設計

王麗娜 汝晨 李青穗

摘 ? 要：“移動互聯(lián)網(wǎng)”+智慧生活，本研究以HTML5技術及移動智能客戶端（APP）為基礎進行智能垃圾分類回收系統(tǒng)的設計，包括基礎信息管理、分類指南以及數(shù)據(jù)分析等，對系統(tǒng)的技術架構進行設計。通過智能垃圾回收裝置實現(xiàn)垃圾的智能分類回收，本系統(tǒng)的研究與設計提高人們對垃圾分類回收的觀念，同時可有助于智慧城市建設。

關鍵詞：HTML5 ?智能回收 ?物聯(lián)網(wǎng)

中圖分類號：X799.3 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?文獻標識碼：A ? ? ? ? ? ? ? ? ? ? ? 文章編號：1674-098X（2020）02（b）-0122-02

“移動互聯(lián)網(wǎng)”+技術迅速發(fā)展，智慧城市、智慧生活是當前城市發(fā)展倡導的主題。垃圾的分類回收是每個城市角落中不可或缺的元素，目前，在國內生活廢品主要是個體從業(yè)人員或垃圾回收站點進行回收，之后進行再次利用。此流程中過程繁多，管理不規(guī)范從而影響市容市貌，并與當前的智慧城市發(fā)展互不協(xié)調。因此，本文對垃圾智能分類回收問題進行研究，結合基于物聯(lián)網(wǎng)技術的智能回收裝置，研究設計一個基于移動終端的垃圾智能分類回收系統(tǒng)，促進全民垃圾分類意識的增強，來改變城市垃圾的分類、收集方式，完善城市生活垃圾處理手段，建立綠色循環(huán)經(jīng)濟。系統(tǒng)結合HTML5、CSS等前端開發(fā)技術，實現(xiàn)友好的用戶交互界面。

1 ?HTML5技術基礎

HTML5技術是當前移動前端實現(xiàn)的主流技術，利用HTML5技術能夠實現(xiàn)移動智能終端設備上的分辨率自適應，其具有以下特征：（1）語義結構化標簽，HTML5的hgroud， header， footer，section標簽，更有助于編程人員對于頁面布局架構的設計實現(xiàn)，同時頁面的層次清晰性大大提高;（2）HTML5的離線緩存功能，HTML5本身攜帶一個小型數(shù)據(jù)庫locaStorage，沒有時間限制的數(shù)據(jù)存儲，同時HTML5還具有sessionStorage針對一個session的數(shù)據(jù)存儲。HTML5使網(wǎng)頁在不影響網(wǎng)站性能情況下存儲大量數(shù)據(jù)成為可能。并且通過IndexedDB模塊對復雜數(shù)據(jù)進行儲存，能夠實現(xiàn)數(shù)據(jù)的離線緩存，在無網(wǎng)絡環(huán)境下用戶也可以對系統(tǒng)進行簡單操作。（3）HTML5技術在實頁面中加載音頻或視頻時可通過audio和video直接實現(xiàn)，同時能夠優(yōu)化界面的圖形功能。

2 ?系統(tǒng)功能架構分析

系統(tǒng)在設計理念上以環(huán)保行業(yè)的需求為基礎，運用基于智能物聯(lián)網(wǎng)的智能回收裝置，基于移動互聯(lián)網(wǎng)技術將垃圾回收這一傳統(tǒng)的行業(yè)與最新的信息化技術相結合，建設一個綜合性的集用戶管理、信息管理、交互、數(shù)據(jù)分析等綜合信息管理平臺。該技術平臺基于Android智能終端、物聯(lián)網(wǎng)大屏智能終端實現(xiàn)。在本系統(tǒng)業(yè)務邏輯中可實現(xiàn)垃圾信息采集，垃圾回收至再次利用的過程跟蹤，還可以通過連接第三方接口實現(xiàn)支付功能，可跟支付寶支付平臺、微信支付平臺進行連接實現(xiàn)垃圾所換價值的支付。能夠方便快捷的為市民提供便利的垃圾處理方式，同時也服務了低碳環(huán)保事業(yè)。本系統(tǒng)的系統(tǒng)架構采用傳統(tǒng)三層模式：客戶交互層、業(yè)務處理層以及數(shù)據(jù)層，其中客戶交互層基于移動智能終端實現(xiàn)，以App或微信小程序的形式作為與用戶的的交互接口。業(yè)務層是系統(tǒng)的核心，根據(jù)系統(tǒng)的功能需求分析，包括以下幾個模塊：分類回收指南、投遞指南、上門回收、掃碼投遞、個人中心、后臺服務管理等功能模塊。

后臺服務管理模塊包括：用戶信息管理模塊，管理用戶的賬號密碼等基本信息、用戶角色分類信息、用戶權限等;信息統(tǒng)計模塊：可實現(xiàn)跟蹤記錄用戶的投遞信息，包括垃圾投遞時間、投遞垃圾的分類信息以及用戶的投遞次數(shù)。用戶資金積分管理模塊：在用戶投遞完成以后，系統(tǒng)會根據(jù)用戶投遞垃圾的分類情況以及當前市場價格向用戶返回一定的現(xiàn)金或者積分（積分可實現(xiàn)兌換現(xiàn)金，或參與其他兌換活動），此模塊記錄用戶的所有已獲資金情況，編程實現(xiàn)過程中連接第三方支付平臺接口?；厥照颈O(jiān)控模塊：監(jiān)控回收站的投遞情況;二維碼管理模塊：實現(xiàn)手機端與服務大屏的交互，在后臺管理中采用動態(tài)生成二維碼技術，實現(xiàn)用戶信息的安全性。還有數(shù)據(jù)同步模塊。系統(tǒng)的總體框架如圖1所示。

3 ?關鍵技術實現(xiàn)

移動互聯(lián)網(wǎng)技術發(fā)展迅速，移動智能終端設備層出不窮且多樣化，本系統(tǒng)基于移動智能終端設備展現(xiàn)，因此系統(tǒng)終端頁面的自適應性是在系統(tǒng)開發(fā)過程中需解決的一個問題。系統(tǒng)基于HTML5技術設計實現(xiàn)，根據(jù)HTML5技術特點，系統(tǒng)可實現(xiàn)跨平臺部署，后臺業(yè)務層管理模塊只需要提供相應的一些數(shù)據(jù)接口，由智能前端進行調用。在技術架構中，終端設計可結合開源框架PhonGap的混合模式進行設計，PhonGap是集成HTML+CSS+JavaScript的終端設計框架。

為使數(shù)據(jù)能更好的展現(xiàn)在移動智能終端，在終端與后臺數(shù)據(jù)交互中采用JSON數(shù)據(jù)封裝進行數(shù)據(jù)傳輸。JSON （JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式。這種格式易于開發(fā)人員編寫和閱讀，同時也易于計算機解析和生成。基于HTML5的離線緩存技術，將輕量級的JSON數(shù)據(jù)封裝包緩存至頁面，同時移動終端也可將JSON數(shù)據(jù)離線下載到本地，實現(xiàn)在不交互的情況下，用戶可進入系統(tǒng)進行瀏覽信息。

確保智能分類回收系統(tǒng)中實現(xiàn)離線功能，在前端技術框架中添加緩存清單文件。此清單文件涵蓋了離線狀態(tài)下移動應用中所需要的所有離線數(shù)據(jù)，數(shù)據(jù)通過移動智能終端調用后臺服務接口，將數(shù)據(jù)下載到本地文件，以JSON數(shù)據(jù)格式進行存儲。斷網(wǎng)狀態(tài)下，用戶登錄時會根據(jù)對應清單文件下載，系統(tǒng)首先解析離線存儲到本地的JSON數(shù)據(jù)，進行終端頁面展示。通過應用離線功能，即使用戶斷開網(wǎng)絡，也可以根據(jù)緩存清單文件有效使用系統(tǒng)應用提供的各項服務。

4 ?結語

本系統(tǒng)基于城市生活垃圾的處理提出了智能回收解決方法，基于HTML5等終端技術給出了系統(tǒng)功能設計與系統(tǒng)技術框架，以及在開發(fā)中智能終端的技術解決路線。能夠基本實現(xiàn)智能垃圾分類回收系統(tǒng)的功能設計。本研究有利于城市生活垃圾的進一步利用和管理發(fā)展。但智慧生活主題使我們今后生活的方向，如需垃圾智能分類回收解決方案有突破性進展，還需更深入的研究。

參考文獻

[1] 馮娟.實現(xiàn)生活垃圾分類回收再利用[N].中國環(huán)境報，2018-02-05.

[2] 徐卉.基于HTMLS的垃圾分類宣傳方式研究與實踐[J].電腦知識與技術，2018，7（14）：180-182.

[3]吳新華.“互聯(lián)網(wǎng)+”模式下生活垃圾分類的研究與分析[J].無線互聯(lián)科技，2019，7（13）：126-128.

[4]吳碧程，鄧詳恩，張子憧.基于卷積神經(jīng)網(wǎng)絡的智能垃圾分類系統(tǒng)[J].物理實驗，2019，11（39）：44-49.