基于HTML5智能垃圾分類回收系統的研究與設計

王麗娜 汝晨 李青穗

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

關鍵詞：HTML5 ?智能回收 ?物聯網

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

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

1 ?HTML5技術基礎

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

2 ?系統功能架構分析

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

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

3 ?關鍵技術實現

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

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

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

4 ?結語

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

參考文獻

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

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

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

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