生活必備品的儲存、使用和購買的一條龍管家式服務

2017-12-19 07:56:53上海交通大學附屬中學楊易為

電子世界 2017年23期

上海交通大學附屬中學楊易為

上海交通大學附屬中學楊易為

對生活必備品的管理不當，會影響我們的健康和生活質量。設計一個智能小管家，在手機上點點圖標，進行簡單的輸入，就可以對生活必備品的儲存、使用和購買了如指掌，讓忙碌的人們能輕輕松松地管理自己的生活。本設計選擇了一種開源、支持標準HTML、CSS和Javascript 的Sencha Touch框架，能很好地完成設計要求并能兼容各種移動設備。本設計包括庫存管理、到期提醒、購買提醒等人性化的功能，通過智能管理，可以引導人們理性消費，改善購物習慣。除了應用在生活必備品上，還可以方便地拓展到其他領域中各類用品的管理。

生活必備品；智能小管家；Web App；HTML5；Sencha Touch

1 緒論

現今的人們生活節奏快，工作和學習壓力大，在家庭的必備品管理上處理不到位，多買、少買、忘記存放位置等問題嚴重，影響生活效率，一個“生活必備品的儲存、使用和購買智能小管家”，具有一定的市場需求和現實意義。同時不僅可以管理生活必備品，還可以應用于生活中的各個方面。比如衣櫥管理、家用電器保修保養期管理等等。

該課題的創新性主要體現在運用最新HTML5技術來制作跨平臺的易用的Web App，能在各類手機系統上使用，能很好地滿足日常家庭中的應用，這是將新的技術運用到新的領域中的一次嘗試，還能在其他領域進行拓展和推廣。

2 設計思路

2.1 設計總構想

在購買時在手機上輸入：購買時間、購買處、保質期（指在什么日期前使用有效）、可用期（按照使用頻率設定將在什么日期用完）、庫存數量、存放地（幾號櫥柜、洗衣房、主衛、次衛、儲物柜），采用商品特定二維碼、商品圖標、下拉式菜單等形式，方便輸入。為了方便管理和使用，設計了四個輸出窗口，分別用不同的顏色注明，非常直觀。

（1）綠色庫中存放庫存中的所有產品

你可以通過分類和圖標，方便地查看購買過的所有生活必備品，并對它們進行管理。

（2）黃色庫中存放將要用完產品

設定1個月內將要用完的提醒，如果庫存數量為1且可用期在1個月之內的就自動進入黃色庫，提醒你要盡快購買，生成“購物車”。提供以往購買途徑的網站鏈接，比如1號店或京東，直接點擊“再次購買”，為了安全起見，不要直接生成訂單并付款。

（3）紅色庫中存放將要過期產品

設定2個月的過期提醒，如果保質期在2個月之內的就自動進入紅色庫，提醒你要盡快使用，生成“快用車”。

（4）黑色庫中存放過期后丟棄的產品

已過期的產品自動進入黑色庫，提醒你丟棄，并自動減少庫存數量，并記錄過期次數，如果在3次或3次以上說明這種產品不常用，提醒你以后盡量少買，生成“少買車”。這樣便于你了解自己的使用習慣，也有利于理性消費。

2.2 各種技術的比較與選擇

2.2.1 日常生活中的實例

（1）超市、大型倉儲平臺的數字化

超市和大型倉儲平臺，由于貨物多、擺放位置集中，對于貨物的數字化管理顯得尤為重要。現代倉儲平臺基于RFID技術的超市倉儲物流管理系統，通過跟蹤貨物入庫、存放和出庫全過程，實現了超市倉儲的自動化、數字化、信息化管理，降低了人工成本以及人工失誤率，提高了服務水平和超市倉儲物流的管理水平。

（2）智慧家庭健康系統服務器

一種基于移動健康醫療的家庭健康系統,此系統由智能可穿戴式設備、智能終端、云端服務器及數據庫四部分組成。通過藍牙無線通信技術將采集的數據發送給智能終端設備,智能終端設備將數據轉發給云服務器。

（3）智能超市應用系統

一種二維碼的智能超市系統的設計思路，用戶端通過手機，訪問服務器上的數據庫，將實現手機購物，并實現對商品的相關網絡操作。對于不需要挑選的商品，購買者可以通過手機終端下單結賬，由超市配貨員配貨打包，在約定時間到超市取走商品。對于需要用戶挑選的商品，到超市選定商品后通過掃描二維碼鏈接商品網址，手機終端下單結賬，由超市配貨員配貨打包，超市出口處取走商品。

從這些實例中我得到了啟發，可以各取所長，采用合適的方法應用在我的設計中。

2.2.2 物品標記方式的技術選擇

首先是關于生活必備品的標記方式所使用的技術，很多食物在拆包裝重新裝盒的時候經常會忘記物品的信息，手寫又有點麻煩，如何合理地利用輸入APP的數據，把它標記在新裝的盒子上，方便讀取，通過以上的實例，可以使用的技術大致分為兩種：RFID技術和二維碼技術。

RFID是一種非接觸式的識別和通信技術，含有電子標簽、讀寫器和數據管理系統，可通過無線電信號識別特定目標并讀寫相關數據。超市倉儲物流管理系統就是應用這種技術，RFID技術的應用領域正在不斷拓展，今后的市場潛力將會很大。RFID技術設備成本高，對通信頻段有一定的要求，編譯時相對比較復雜。

二維碼（QR code），是用某種特定的幾何圖形按一定規律在平面（二維方向上）分布的黑白相間的圖形記錄數據符號信息。在現實生活中已有了廣泛的應用，大部分智能手機都有相應的掃描器。

2.2.3 前端制作的技術選擇

關于軟件前端制作技術的比較和選擇，移動應用有三種模式，其優缺點分析如表1所示。

表1 移動應用三種模式的比較

最終選定如今最主流的移動Web應用開發框架Sencha Touch。Sencha Touch 框架是第一個基于HTML5的移動應用框架，適用于開發業務邏輯比較復雜、界面組件漂亮、數據管理豐富的移動Web 應用，有著豐富的類庫及組件以滿足用戶豐富的UI 界面設計交互。

3 設計方案與實現

3.1 設計UI圖

圖1 設計UI圖

3.2 軟件實現

3.2.1 集成環境的搭建

搭建系統：Mac OS 10.12.1

搭建環境：Sencha Architect 3.2

Sencha cmd

Sencha touch-2.4.2

JDK d8111（java環境）

apache tomcat（服務器）

測試環境：Chrome

集成開發環境是用于提供開發環境的應用程序，包括代碼編輯、編譯器、調試器和圖形用戶界面。Senchca Architect提供了一個可視化的畫布與代碼編輯平臺，并且使用了拖放的方式，旨在快速實現移動與桌面應用的裝配。Tomcat 服務器是一個免費的開放源代碼的Web應用服務器，屬于輕量級應用服務器，在中小型系統和并發訪問用戶不是很多的場合下被普遍使用，是開發和調試JSP程序的首選。

3.2.2 用戶界面的搭建

下面是對所制作的H5 App界面層的介紹。

所有經過Sencha Architect編寫的程序都會儲存在根目錄下app的文件夾里。以下是view文件夾下的一些js文件。

（1）主界面

圖2為主界面，被設定成初始界面。它由底部的四個TabBar組成，每一個Tab對應一個navigation Bar，點擊則顯示stock。Tab bar有很多可供選擇的樣式。這里選擇的是底部docked、輕量UI、垂直滑動。

圖2 主界面圖示

（2）四個導航頁

由于四個導航頁初始界面類似，只是對于總的庫進行條件篩選后顯示數據不同，界面是一樣的，所以四個導航頁內容基本相同，只是atlas和名稱不同。每個stock都有三個按鈕：addbtn、qrbtn、cartbtn，同樣是按條件不同顯示，這個是由TopList.js、SecList.js決定的。

（3）列表顯示界面

在界面的所有tab的最后一頁是庫存物品的列表顯示界面，屬于Form Panel樣式。由于不同數據的輸入具有特殊性，比如日期，可以在Ext.field.DatePicker中限定dateFormat。比如購買日期、品牌、數量、價格單位、保質期、可用期等是必填項，可以在Ext.field.Field中的required項改為True。比如狀態欄是可供選擇的三個String項，可以在后面添加option。

圖4 列表顯示界面圖示

（4）頁面間的切換

所有導航頁（allstock.js、advstock.js、jgqstock.js、ygqstock.js）嵌入到mainTabPanel中，再通過Account.js邏輯控制，在每個導航頁（allstock.js、advstock.js、jgqstock.js、ygqstock.js）中共用大類→小類→庫存物品列表→庫存物品詳細資料的界面。

Sencha Touch還有比較重要的卡片布局（card），卡片布局實現了將多個頁面添加項目中，每次只顯示其中一個而將其他暫時隱藏，需要的時候再切換即可。在下圖中，左側為活動頁面，展示給用戶的，右側是其他隱藏的頁面，可對其進行切換，點擊到某個頁面，左側則展示該頁面，創建這一面板后，有四個頁面，且設置為當前活動的頁面為數組下標為1 的頁面，就可以只看到活動頁面了。

（5）數據層

在Sencha Touch的數據層中包含了Ext.Ajax、store、model、代理、Reader和Writer等。Store相當于本地的一個數據表格，包含了由數據實例組成的數據，而數據的讀寫需要通過需要通過代理實現，代理則需要通過Ext。Ajax與后臺交互數據。代理讀取到服務器傳送過來的數據，會通過Reader將這些數據轉化成模型實例保存到Store中。當store的數據需要保存到服務器時，需要通過Writer將模型數據轉換為便于服務器讀取的數據。

本App的數據運用store和model兩個MVC模式來儲存和操作。在store中創建三個儲存，分別是detailstocks、sectypes和toptypes，同時在Models創建detailstockm、sectypem和toptypem。與界面層邏輯一致，同樣是根據需要插入表格的列。

圖5 數據層圖示

在儲存方面，本App使用的是WebSQL Database，在HTML5中，大大豐富了客戶端本地可以存儲的內容，添加了很多功能來將原本必須保存在服務器上的數據轉為保存在客戶端本地，從而大大提高了Web應用程序的性能，減輕了服務器端的負擔。

在Chrome瀏覽器的開發者工具中，我們能看到WebSQL所儲存的數據。包含了編號、大類名稱、小類名稱、購買時間、購買地點、單位、到期時間、使用時間、狀態、儲存地等。id選用負數是為了不與后端服務器交互時產生二義性。

圖6 WebSQL Database圖示

由于增加了圖片的拍攝以及儲存功能，那這是怎么實現的呢？首先對導入的照片按比例壓縮四倍，并轉換成統一的格式，把它當作數據保存到數據庫中，用的時候直接將數據綁定到IMG元素的src屬性就可以了。

同時還增加了二維碼輸出的功能。使用了基于jquery的二維碼生成插件qrcode，由于有中文字符，在生成二維碼前就要把字符串轉換成UTF-8，然后再生成二維碼。

3.2.3 相關重要事件及流程圖

所有的動作例如tap、swipe、activate、itemsigletap等都會放在一個Account.js的解釋文件當中。

（1）Account.js文件中的主要函數作用

（2）主要流程圖

在每次回到主界面的時候都會重新刷新一遍數據，以保證使用的流暢，圖7（左）是刷新數據的流程框圖。在大類和小類的界面點擊添加按鈕的時候，會跳出對話框提示添加大類或小類名稱。圖7（中）是判斷流程框圖。在已經填好庫存物品詳細資料的所有資料時，由于圖片的需要進行壓縮渲染轉換處理，所以將通過圖7（右）的流程框圖。