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

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

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

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

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

1 緒論

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

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

2 設計思路

2.1 設計總構想

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

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

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

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

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

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

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

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

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

2.2 各種技術的比較與選擇

2.2.1 日常生活中的實例

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

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

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

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

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

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

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

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

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

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

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

2.2.3 前端制作的技術選擇

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

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

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

3 設計方案與實現(xiàn)

3.1 設計UI圖

圖1 設計UI圖

3.2 軟件實現(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（服務器）

測試環(huán)境：Chrome

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

3.2.2 用戶界面的搭建

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

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

（1）主界面

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

圖2 主界面圖示

（2）四個導航頁

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

（3）列表顯示界面

在界面的所有tab的最后一頁是庫存物品的列表顯示界面，屬于Form Panel樣式。由于不同數(shù)據(jù)的輸入具有特殊性，比如日期，可以在Ext.field.DatePicker中限定dateFormat。比如購買日期、品牌、數(shù)量、價格單位、保質期、可用期等是必填項，可以在Ext.field.Field中的required項改為True。比如狀態(tài)欄是可供選擇的三個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），卡片布局實現(xiàn)了將多個頁面添加項目中，每次只顯示其中一個而將其他暫時隱藏，需要的時候再切換即可。在下圖中，左側為活動頁面，展示給用戶的，右側是其他隱藏的頁面，可對其進行切換，點擊到某個頁面，左側則展示該頁面，創(chuàng)建這一面板后，有四個頁面，且設置為當前活動的頁面為數(shù)組下標為1 的頁面，就可以只看到活動頁面了。

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

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

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

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

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

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

圖6 WebSQL Database圖示

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

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

3.2.3 相關重要事件及流程圖

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

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

（2）主要流程圖

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

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

3.2.4 軟件的調試

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

圖8 CSS文件的查看與調試

圖9 關鍵語句的查看與調試

3.2.5 軟件的編譯與打包

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

4 用戶使用說明

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

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

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

4.2 用戶使用流程

圖10 App的主界面

圖10是App的主界面，可以看到下面的四個tab顯示的是總庫存、快使用、將到期和已過期。上面標注“1”表示此庫中有1個物品。點擊則進入此庫。

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

圖11 App的小類頁面

圖12 App的庫存物品列表

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

圖13 二維碼和購物鏈接圖示

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

5 總結與展望

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

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

[2]李寶韓.基于Android的PhoneGap研究及其跨移動平臺媒體框架的擴展[D].華南理工大學,2012.

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

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

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

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

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