上海交通大學(xué)附屬中學(xué) 楊易為

生活必備品的儲(chǔ)存、使用和購(gòu)買的一條龍管家式服務(wù)

上海交通大學(xué)附屬中學(xué) 楊易為

對(duì)生活必備品的管理不當(dāng)，會(huì)影響我們的健康和生活質(zhì)量。設(shè)計(jì)一個(gè)智能小管家，在手機(jī)上點(diǎn)點(diǎn)圖標(biāo)，進(jìn)行簡(jiǎn)單的輸入，就可以對(duì)生活必備品的儲(chǔ)存、使用和購(gòu)買了如指掌，讓忙碌的人們能輕輕松松地管理自己的生活。本設(shè)計(jì)選擇了一種開源、支持標(biāo)準(zhǔn)HTML、CSS和Javascript 的Sencha Touch框架，能很好地完成設(shè)計(jì)要求并能兼容各種移動(dòng)設(shè)備。本設(shè)計(jì)包括庫(kù)存管理、到期提醒、購(gòu)買提醒等人性化的功能，通過智能管理，可以引導(dǎo)人們理性消費(fèi)，改善購(gòu)物習(xí)慣。除了應(yīng)用在生活必備品上，還可以方便地拓展到其他領(lǐng)域中各類用品的管理。

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

1 緒論

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

該課題的創(chuàng)新性主要體現(xiàn)在運(yùn)用最新HTML5技術(shù)來制作跨平臺(tái)的易用的Web App，能在各類手機(jī)系統(tǒng)上使用，能很好地滿足日常家庭中的應(yīng)用，這是將新的技術(shù)運(yùn)用到新的領(lǐng)域中的一次嘗試，還能在其他領(lǐng)域進(jìn)行拓展和推廣。

2 設(shè)計(jì)思路

2.1 設(shè)計(jì)總構(gòu)想

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

（1）綠色庫(kù)中存放庫(kù)存中的所有產(chǎn)品

你可以通過分類和圖標(biāo)，方便地查看購(gòu)買過的所有生活必備品，并對(duì)它們進(jìn)行管理。

（2）黃色庫(kù)中存放將要用完產(chǎn)品

設(shè)定1個(gè)月內(nèi)將要用完的提醒，如果庫(kù)存數(shù)量為1且可用期在1個(gè)月之內(nèi)的就自動(dòng)進(jìn)入黃色庫(kù)，提醒你要盡快購(gòu)買，生成“購(gòu)物車”。提供以往購(gòu)買途徑的網(wǎng)站鏈接，比如1號(hào)店或京東，直接點(diǎn)擊“再次購(gòu)買”，為了安全起見，不要直接生成訂單并付款。

（3）紅色庫(kù)中存放將要過期產(chǎn)品

設(shè)定2個(gè)月的過期提醒，如果保質(zhì)期在2個(gè)月之內(nèi)的就自動(dòng)進(jìn)入紅色庫(kù)，提醒你要盡快使用，生成“快用車”。

（4）黑色庫(kù)中存放過期后丟棄的產(chǎn)品

已過期的產(chǎn)品自動(dòng)進(jìn)入黑色庫(kù)，提醒你丟棄，并自動(dòng)減少庫(kù)存數(shù)量，并記錄過期次數(shù)，如果在3次或3次以上說明這種產(chǎn)品不常用，提醒你以后盡量少買，生成“少買車”。這樣便于你了解自己的使用習(xí)慣，也有利于理性消費(fèi)。

2.2 各種技術(shù)的比較與選擇

2.2.1 日常生活中的實(shí)例

（1）超市、大型倉(cāng)儲(chǔ)平臺(tái)的數(shù)字化

超市和大型倉(cāng)儲(chǔ)平臺(tái)，由于貨物多、擺放位置集中，對(duì)于貨物的數(shù)字化管理顯得尤為重要?，F(xiàn)代倉(cāng)儲(chǔ)平臺(tái)基于RFID技術(shù)的超市倉(cāng)儲(chǔ)物流管理系統(tǒng)，通過跟蹤貨物入庫(kù)、存放和出庫(kù)全過程，實(shí)現(xiàn)了超市倉(cāng)儲(chǔ)的自動(dòng)化、數(shù)字化、信息化管理，降低了人工成本以及人工失誤率，提高了服務(wù)水平和超市倉(cāng)儲(chǔ)物流的管理水平。

（2）智慧家庭健康系統(tǒng)服務(wù)器

一種基于移動(dòng)健康醫(yī)療的家庭健康系統(tǒng),此系統(tǒng)由智能可穿戴式設(shè)備、智能終端、云端服務(wù)器及數(shù)據(jù)庫(kù)四部分組成。通過藍(lán)牙無線通信技術(shù)將采集的數(shù)據(jù)發(fā)送給智能終端設(shè)備,智能終端設(shè)備將數(shù)據(jù)轉(zhuǎn)發(fā)給云服務(wù)器。

（3）智能超市應(yīng)用系統(tǒng)

一種二維碼的智能超市系統(tǒng)的設(shè)計(jì)思路，用戶端通過手機(jī)，訪問服務(wù)器上的數(shù)據(jù)庫(kù)，將實(shí)現(xiàn)手機(jī)購(gòu)物，并實(shí)現(xiàn)對(duì)商品的相關(guān)網(wǎng)絡(luò)操作。對(duì)于不需要挑選的商品，購(gòu)買者可以通過手機(jī)終端下單結(jié)賬，由超市配貨員配貨打包，在約定時(shí)間到超市取走商品。對(duì)于需要用戶挑選的商品，到超市選定商品后通過掃描二維碼鏈接商品網(wǎng)址，手機(jī)終端下單結(jié)賬，由超市配貨員配貨打包，超市出口處取走商品。

從這些實(shí)例中我得到了啟發(fā)，可以各取所長(zhǎng)，采用合適的方法應(yīng)用在我的設(shè)計(jì)中。

2.2.2 物品標(biāo)記方式的技術(shù)選擇

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

RFID是一種非接觸式的識(shí)別和通信技術(shù)，含有電子標(biāo)簽、讀寫器和數(shù)據(jù)管理系統(tǒng)，可通過無線電信號(hào)識(shí)別特定目標(biāo)并讀寫相關(guān)數(shù)據(jù)。超市倉(cāng)儲(chǔ)物流管理系統(tǒng)就是應(yīng)用這種技術(shù)，RFID技術(shù)的應(yīng)用領(lǐng)域正在不斷拓展，今后的市場(chǎng)潛力將會(huì)很大。RFID技術(shù)設(shè)備成本高，對(duì)通信頻段有一定的要求，編譯時(shí)相對(duì)比較復(fù)雜。

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

2.2.3 前端制作的技術(shù)選擇

關(guān)于軟件前端制作技術(shù)的比較和選擇，移動(dòng)應(yīng)用有三種模式，其優(yōu)缺點(diǎn)分析如表1所示。

表1 移動(dòng)應(yīng)用三種模式的比較

最終選定如今最主流的移動(dòng)Web應(yīng)用開發(fā)框架Sencha Touch。Sencha Touch 框架是第一個(gè)基于HTML5的移動(dòng)應(yīng)用框架，適用于開發(fā)業(yè)務(wù)邏輯比較復(fù)雜、界面組件漂亮、數(shù)據(jù)管理豐富的移動(dòng)Web 應(yīng)用，有著豐富的類庫(kù)及組件以滿足用戶豐富的UI 界面設(shè)計(jì)交互。

3 設(shè)計(jì)方案與實(shí)現(xiàn)

3.1 設(shè)計(jì)UI圖

圖1 設(shè)計(jì)UI圖

3.2 軟件實(shí)現(xiàn)

3.2.1 集成環(huán)境的搭建

搭建系統(tǒng)：Mac OS 10.12.1

搭建環(huán)境：Sencha Architect 3.2

Sencha cmd

Sencha touch-2.4.2

JDK d8111（java環(huán)境）

apache tomcat（服務(wù)器）

測(cè)試環(huán)境：Chrome

集成開發(fā)環(huán)境是用于提供開發(fā)環(huán)境的應(yīng)用程序，包括代碼編輯、編譯器、調(diào)試器和圖形用戶界面。Senchca Architect提供了一個(gè)可視化的畫布與代碼編輯平臺(tái)，并且使用了拖放的方式，旨在快速實(shí)現(xiàn)移動(dòng)與桌面應(yīng)用的裝配。Tomcat 服務(wù)器是一個(gè)免費(fèi)的開放源代碼的Web應(yīng)用服務(wù)器，屬于輕量級(jí)應(yīng)用服務(wù)器，在中小型系統(tǒng)和并發(fā)訪問用戶不是很多的場(chǎng)合下被普遍使用，是開發(fā)和調(diào)試JSP程序的首選。

3.2.2 用戶界面的搭建

下面是對(duì)所制作的H5 App界面層的介紹。

所有經(jīng)過Sencha Architect編寫的程序都會(huì)儲(chǔ)存在根目錄下app的文件夾里。以下是view文件夾下的一些js文件。

（1）主界面

圖2為主界面，被設(shè)定成初始界面。它由底部的四個(gè)TabBar組成，每一個(gè)Tab對(duì)應(yīng)一個(gè)navigation Bar，點(diǎn)擊則顯示stock。Tab bar有很多可供選擇的樣式。這里選擇的是底部docked、輕量UI、垂直滑動(dòng)。

圖2 主界面圖示

（2）四個(gè)導(dǎo)航頁(yè)

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

（3）列表顯示界面

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

圖4 列表顯示界面圖示

（4）頁(yè)面間的切換

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

Sencha Touch還有比較重要的卡片布局（card），卡片布局實(shí)現(xiàn)了將多個(gè)頁(yè)面添加項(xiàng)目中，每次只顯示其中一個(gè)而將其他暫時(shí)隱藏，需要的時(shí)候再切換即可。在下圖中，左側(cè)為活動(dòng)頁(yè)面，展示給用戶的，右側(cè)是其他隱藏的頁(yè)面，可對(duì)其進(jìn)行切換，點(diǎn)擊到某個(gè)頁(yè)面，左側(cè)則展示該頁(yè)面，創(chuàng)建這一面板后，有四個(gè)頁(yè)面，且設(shè)置為當(dāng)前活動(dòng)的頁(yè)面為數(shù)組下標(biāo)為1 的頁(yè)面，就可以只看到活動(dòng)頁(yè)面了。

（5）數(shù)據(jù)層

在Sencha Touch的數(shù)據(jù)層中包含了Ext.Ajax、store、model、代理、Reader和Writer等。Store相當(dāng)于本地的一個(gè)數(shù)據(jù)表格，包含了由數(shù)據(jù)實(shí)例組成的數(shù)據(jù)，而數(shù)據(jù)的讀寫需要通過需要通過代理實(shí)現(xiàn)，代理則需要通過Ext。Ajax與后臺(tái)交互數(shù)據(jù)。代理讀取到服務(wù)器傳送過來的數(shù)據(jù)，會(huì)通過Reader將這些數(shù)據(jù)轉(zhuǎn)化成模型實(shí)例保存到Store中。當(dāng)store的數(shù)據(jù)需要保存到服務(wù)器時(shí)，需要通過Writer將模型數(shù)據(jù)轉(zhuǎn)換為便于服務(wù)器讀取的數(shù)據(jù)。

本App的數(shù)據(jù)運(yùn)用store和model兩個(gè)MVC模式來儲(chǔ)存和操作。在store中創(chuàng)建三個(gè)儲(chǔ)存，分別是detailstocks、sectypes和toptypes，同時(shí)在Models創(chuàng)建detailstockm、sectypem和toptypem。與界面層邏輯一致，同樣是根據(jù)需要插入表格的列。

圖5 數(shù)據(jù)層圖示

在儲(chǔ)存方面，本App使用的是WebSQL Database，在HTML5中，大大豐富了客戶端本地可以存儲(chǔ)的內(nèi)容，添加了很多功能來將原本必須保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶端本地，從而大大提高了Web應(yīng)用程序的性能，減輕了服務(wù)器端的負(fù)擔(dān)。

在Chrome瀏覽器的開發(fā)者工具中，我們能看到WebSQL所儲(chǔ)存的數(shù)據(jù)。包含了編號(hào)、大類名稱、小類名稱、購(gòu)買時(shí)間、購(gòu)買地點(diǎn)、單位、到期時(shí)間、使用時(shí)間、狀態(tài)、儲(chǔ)存地等。id選用負(fù)數(shù)是為了不與后端服務(wù)器交互時(shí)產(chǎn)生二義性。

圖6 WebSQL Database圖示

由于增加了圖片的拍攝以及儲(chǔ)存功能，那這是怎么實(shí)現(xiàn)的呢？首先對(duì)導(dǎo)入的照片按比例壓縮四倍，并轉(zhuǎn)換成統(tǒng)一的格式，把它當(dāng)作數(shù)據(jù)保存到數(shù)據(jù)庫(kù)中，用的時(shí)候直接將數(shù)據(jù)綁定到IMG元素的src屬性就可以了。

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

3.2.3 相關(guān)重要事件及流程圖

所有的動(dòng)作例如tap、swipe、activate、itemsigletap等都會(huì)放在一個(gè)Account.js的解釋文件當(dāng)中。

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

（2）主要流程圖

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

圖7 刷新數(shù)據(jù)（左），添加按鈕（中）和保存按鈕（右）的流程圖

3.2.4 軟件的調(diào)試

通過強(qiáng)大的Chrome瀏覽器的開發(fā)者工具可以很輕松的調(diào)試。圖8為css文件的查看與調(diào)試。圖9可以在關(guān)鍵語(yǔ)句設(shè)置端點(diǎn)，來debug或優(yōu)化。

圖8 CSS文件的查看與調(diào)試

圖9 關(guān)鍵語(yǔ)句的查看與調(diào)試

3.2.5 軟件的編譯與打包

在完成App的編寫后，由于程序過大，多余的、未調(diào)用的、冗余的文件比較多，需要對(duì)App進(jìn)行編譯與打包。Sencha Architect 內(nèi)置了Ant編譯工具，app在編譯后大小縮小到一半，并且不影響使用。

4 用戶使用說明

4.1 網(wǎng)絡(luò)及配置要求

（1）網(wǎng)絡(luò)環(huán)境：第一次登入需要網(wǎng)絡(luò)，之后所有操作支持本地使用。采購(gòu)轉(zhuǎn)入到京東商城購(gòu)買時(shí)可能需要網(wǎng)絡(luò)。

（2）機(jī)器硬件配置：支持手機(jī)和平板電腦。手機(jī)需要是480*320 以上分辨率?；?WebKit 內(nèi)核的瀏覽器皆可。

4.2 用戶使用流程

圖10 App的主界面

圖10是App的主界面，可以看到下面的四個(gè)tab顯示的是總庫(kù)存、快使用、將到期和已過期。上面標(biāo)注“1”表示此庫(kù)中有1個(gè)物品。點(diǎn)擊則進(jìn)入此庫(kù)。

右上角加號(hào)按鈕點(diǎn)擊則提示請(qǐng)輸入大類名稱，添加成功后則在主界面顯示。點(diǎn)擊大類名稱后進(jìn)入小類，右上角的加號(hào)按鈕同樣可以提示請(qǐng)輸入小類名稱。按back鍵可以返回。若要對(duì)列表內(nèi)容進(jìn)行刪改可以在相應(yīng)的物品項(xiàng)向右滑，出現(xiàn)刪除鍵。

圖11 App的小類頁(yè)面

圖12 App的庫(kù)存物品列表

點(diǎn)擊小類進(jìn)入庫(kù)存物品列表里面顯示了所有的庫(kù)存物品。點(diǎn)擊右上角購(gòu)物車鍵可以新加物品，所有必填項(xiàng)輸入后可以選擇上傳照片（可能會(huì)變得不清晰）。在確定無誤之后點(diǎn)擊右上角右數(shù)第三個(gè)鍵保存。保存完就可以在上級(jí)菜單中看到了。

圖13 二維碼和購(gòu)物鏈接圖示

右數(shù)第二個(gè)鍵可以生成二維碼，在界面的最后顯示，可以保存并打印。最右面的購(gòu)物車鍵是采購(gòu)鍵，在京東商城進(jìn)行關(guān)鍵詞搜索方便購(gòu)買。

5 總結(jié)與展望

本軟件使用簡(jiǎn)單方便，界面清晰友好，基本上看到就知道如何使用；各界面時(shí)間轉(zhuǎn)換快，基本沒有延遲；而且用戶的使用沒有任何成本。除了能應(yīng)用在生活必備品上，還可以應(yīng)用于生活中的各個(gè)方面。比如衣櫥管理、家用電器保修保養(yǎng)期管理等。

[1]趙義輝.基于 Sencha Touch 的移動(dòng)Web應(yīng)用技術(shù)研究與應(yīng)用[C].北京機(jī)械工業(yè)自動(dòng)化研究所,2011.

[2]李寶韓.基于Android的PhoneGap研究及其跨移動(dòng)平臺(tái)媒體框架的擴(kuò)展[D].華南理工大學(xué),2012.

[3]李曉瑋.基于二維碼的智能超市應(yīng)用系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].吉林大學(xué),2015.

[4]陸凌牛.Sencha Touch權(quán)威指南[M].機(jī)械工業(yè)出版社,2012.

[5]黃燈橋.Sencha Touch實(shí)戰(zhàn)[M].清華大學(xué)出版社,2014.

[6]明日科技.HTML5從入門到精通[M].清華大學(xué)出版社,2012.

[7](美)貝里.深入淺出SQL(中文版)[M].東南大學(xué)出版社,2009.