基于HTML5的大學生二手物品交易APP設計

蘇雨鴻++姚興華

摘要：一些知名交易平臺如趕集網(wǎng)、58同城、閑魚閑置等，主要聚焦于廣大百姓群體的需求，沒有為大學生群體的二手物品交易提供個性化設置。針對追求個性的大學生群體，采用HTML5技術設計一款二手物品交易APP。基于Cordova平臺開發(fā)了5個主要功能模塊：商品信息發(fā)布模塊、書籍交易模塊、非書籍類物品交易模塊、社交活動發(fā)布模塊、個人信息管理模塊，為大學生用戶填寫個性化信息提供了框架，比如個性化優(yōu)惠條件、星座、投票等。研究表明，該APP使用AngularJS的MYMhttp服務技術實現(xiàn)了數(shù)據(jù)交互。

關鍵詞：HTML5；二手物品交易；APP；Ionic

DOIDOI：10.11907/rjdk.171427

中圖分類號：TP319文獻標識碼：A文章編號：16727800（2017）010008005

0引言

2016年4月，國家教育部在《中國高等教育質(zhì)量報告》中稱，2015年中國在校大學生規(guī)模達到3 700萬人，各類高校2 852所。可見，我國大學生群體數(shù)量龐大。大學生在求學過程中，會購買教科書、雜志、課外書、筆、臺燈、書架、籃球、自行車、電瓶車、熱水瓶、衣服等學習、生活用品。在畢業(yè)時，大多數(shù)學生希望將這些舊物品出售，往往在校園網(wǎng)站、人人網(wǎng)、朋友圈、QQ空間等平臺發(fā)布二手物品信息。近些年，社會上確實涌現(xiàn)了不少知名二手交易市場網(wǎng)站平臺，如淘寶旗下的閑魚閑置平臺、58同城、趕集網(wǎng)等。這些網(wǎng)站平臺主要是針對廣大百姓群體，提供了完整的交易環(huán)節(jié)設置，包括發(fā)布信息、上架展示、用戶搜索、評價反饋、即時通訊等。相比廣大普通百姓群體，大學生群體有其鮮明的特點：接受新鮮事物的能力強、追求個性、更替物品的周期短。此外，有關數(shù)據(jù)表明，大學生群體中使用智能機的百分比超過了80%，手機App的使用將會超過傳統(tǒng)網(wǎng)站。面對龐大的大學生群體，閑魚、58同城等二手物品交易網(wǎng)站平臺顯得個性化支持度不夠，不能滿足大學生的個性追求需求。因此，本文針對廣大大學生群體，采用HTML5語言設計、開發(fā)一個融有社交元素的個性化二手物品交易APP。

1HTML5介紹

HTML5是W3C組織推出的最新一代HTML標準[1]。推出HTML5的主要意圖是，將互聯(lián)網(wǎng)語義化，便于更好地被人類與機器閱讀，同時更多地支持各種媒體嵌入。

HTML5技術給網(wǎng)頁瀏覽用戶帶來便利。經(jīng)常上網(wǎng)瀏覽資訊的用戶會發(fā)現(xiàn)，在打開網(wǎng)頁播放視頻或者動畫時，瀏覽器窗口有時會彈出控件安裝請求，只有安裝了相關控件，才能正常運行網(wǎng)頁內(nèi)容。這給用戶帶來了麻煩，同時也存在安全隱患。現(xiàn)在，HTML5讓這些問題都變得簡單了[1]。用戶可以通過插入

HTML5技術在本地存儲方面，采用了一種不同于Cookie的全新方式[1]。用戶在退出APP應用或者退出瀏覽器之后，本地數(shù)據(jù)仍然存在。相比Cookie存儲方式，HTML5的本地存儲容量更大，并且不會隨每次HTTP請求重復地發(fā)送數(shù)據(jù)至Server。

HTML5支持離線Web應用[1]。HTML5能夠讓Web在設置好的情況下提前把應用數(shù)據(jù)緩存到本地瀏覽器。這樣即使在出現(xiàn)突然無網(wǎng)的情況下仍可以瀏覽部分內(nèi)容。

使用HTML5開發(fā)手機應用的一個優(yōu)勢是，開發(fā)人員可以在網(wǎng)頁上直接調(diào)試[2]。在原生態(tài)手機APP開發(fā)過程中，開發(fā)人員可能需要花費不少精力配置開發(fā)環(huán)境，虛擬機不斷重復編碼、調(diào)試、運行。所以，現(xiàn)在越來越多開發(fā)人員將傳統(tǒng)原生態(tài)手機客戶端的開發(fā)轉(zhuǎn)移至HTML5標準下進行。表1列出了常用瀏覽器對HTML5部分標簽與特性的兼容信息。

使用HTML5開發(fā)手機應用的另一個優(yōu)勢是，按照HTML5標準開發(fā)的APP應用既可以在Android操作系統(tǒng)下運行，也可以在IOS系統(tǒng)下運行[2]。這為開發(fā)者省去了麻煩，為企業(yè)降低了開發(fā)、運營及維護成本。在HTML5標準推出之前，開發(fā)者設計一個手機應用，需要分別對安卓用戶端與蘋果用戶端編寫不同代碼來實現(xiàn)相同功能；這給后期維護帶來了不小工作量。如今，開發(fā)者使用HTML5進行開發(fā)，便沒有了上述麻煩，企業(yè)也不需要為安卓端的開發(fā)專門招聘Java工程師，不需要為IOS端的開發(fā)招聘IOS工程師。

2二手物品交易APP設計

2.1功能結構設計

根據(jù)大學生群體的特點，筆者對二手物品交易APP設計了5個主要功能模塊：“我要當Boss”、“Book”、“Market”、“情報站”、“個人中心”。系統(tǒng)框架結構見圖1。

圖1系統(tǒng)功能架構

5個主要功能模塊如下：

（1）“我要當Boss”模塊——發(fā)布二手物品信息。 其主要功能是發(fā)布二手物品出售信息。在該模塊中，將設計、實現(xiàn)4個用戶操作功能：①選擇物品類型：書籍/其它；②填寫物品信息：書名/物品名、數(shù)量、版本號、書本條形碼、物品照片、簡要說明；③定價，并制定個性優(yōu)惠條件“××優(yōu)惠××元”；④填寫個性標簽，比如美劇迷、k歌達人等。

（2）“Book”模塊——查詢&交易書籍。其主要用于查詢二手書籍及交易書籍。“Book”模塊中設計的子功能有：①查詢書本名稱；②顯示查詢結果，并支持按照書籍價格或者賣家的年級、星座、性別篩選結果；③填入購買詳情，如購買數(shù)量、交易方式（支付寶/線下交易）；④跳轉(zhuǎn)至支付界面；⑤返回商品詳情界面。

（3）“Market”模塊——查詢&交易非書籍物品。用于查詢以及交易非書籍類物品。“Market”模塊的設計類似于“Book”模塊，支持非書籍類物品查詢、查詢結果顯示、支付交易等子功能。

（4）“情報站”模塊——發(fā)布社交狀態(tài)。“情報站”模塊將用于發(fā)布社交狀態(tài)。考慮到學生活動因校而異，根據(jù)學生用戶所屬學校設計相應的狀態(tài)發(fā)布界面，并設計“投票”與“召集”兩個子模塊，以支持學生發(fā)起投票活動與發(fā)起號召、主題討論活動。

（5）“個人中心”模塊——記錄用戶的交易歷史信息。著重設計“購買記錄”、“出售記錄”、“我上架的物品”、“歷史評價”、“好友列表”5個子模塊功能。

2.2數(shù)據(jù)庫設計

在構建數(shù)據(jù)庫的過程中，通過創(chuàng)建唯一性索引保證數(shù)據(jù)庫表中每一行數(shù)據(jù)的唯一性。使用SQL Sever設計的數(shù)據(jù)庫容易維護[3，4]。所以，在開發(fā)二手物品交易APP時，選擇使用SQL Server。在數(shù)據(jù)交換方面，選擇使用Angular Js的MYMhttp服務技術[59]。

數(shù)據(jù)庫中包含3張主表：“Student”表、“Book”表、“Goods”表（見圖2、圖3、圖4）。圖2為“Student”表，記錄、存儲學生的個人信息。圖3為“Book”表，記錄書籍物品的信息。圖4為“Goods”表，記錄非書籍類物品的信息。“Student”表中的主鍵telephone同時作為“Book”表、“Goods”表的外鍵，與“Book”表、“Goods”表中owner字段的值相對應。

3系統(tǒng)實現(xiàn)

3.1開發(fā)平臺與前端框架選擇

目前，移動應用的開發(fā)方式有3種：Native APP、Hybrid APP、Web APP，如表2所示[10]。本文擬開發(fā)二手物品交易APP屬于Hybrid APP。Hybrid APP是一種同時使用網(wǎng)頁語言與程序語言開發(fā)得到的APP。它以JS、Native兩者相互調(diào)用為主：JS用于實現(xiàn)可視化界面，即前端UI；Native層面通過使用開發(fā)平臺操控手機硬件。Hybrid APP將HTML5技術運用于傳統(tǒng)APP上，從而加快了開發(fā)進程。Hybrid APP實現(xiàn)了“一次開發(fā)、多處運行”的跨平臺開發(fā)。相比局限于瀏覽器瀏覽、應用的即時Web APP，Hybrid APP的可跨平臺移植性更強。

在Hybrid APP開發(fā)最初階段，先要對已有開發(fā)平臺有所了解。現(xiàn)階段主流的開發(fā)平臺有PhoneGap、AppCan等。這些平臺使用HTML5 標準開發(fā)，以適配各類機型，兼容各類開發(fā)者自定義的插件，能較好地滿足各類用戶需求。

PhoneGap是一款基于HTML、CSS與JavaScript的開源移動開發(fā)平臺[11]。它支持使用一些開源的框架提高用戶體驗，比如jQuery Mobile、Dojo Mobile、Sencha Touch等，提供了豐富的原生插件調(diào)用。不足的是，現(xiàn)階段PhoneGap啟動速度略慢，頁面切換響應慢，有大量請求時會產(chǎn)生頁面卡頓現(xiàn)象。

AppCan是眼下流行的一個搭建本土移動開發(fā)Hybrid APP平臺。它封裝了類似PhoneGap本地調(diào)用的手機底層功能與uexWindow多窗口機制，實現(xiàn)了移動端的iframe效果。AppCan的免費版本不支持自定義插件，且功能有限。

考慮到PhoneGap與AppCan的優(yōu)缺點，選擇Cordova開發(fā)平臺。因為Cordova支持的前端UI組件庫Ionic已經(jīng)成熟，并且可以在其提供的樣式庫基礎上進行個性化修改，得到想要的效果。

3.2功能模塊設計與展示

5個主要的功能模塊即“我要當Boss”模塊、“Book”模塊、“Market”模塊、“情報站”模塊、“個人中心”模塊。返回功能是APP應用支持的常見功能，在實現(xiàn)返回功能時，使用了MYMScope對象，5個功能模塊都需支持返回功能。比如：在“我要當Boss”模塊界面中按左上角的“返回”，則返回到系統(tǒng)APP首頁；在該模塊子界面中按左上角的“返回”，則返回到“我要當Boss”模塊首界面。由于這5個模塊是在不同的頁面支持返回功能，所以，App使用了MYMrootScope以實現(xiàn)不同頁面Angular JS中Controller之間的數(shù)據(jù)共享。

3.2.1“我要當Boss”模塊

“我要當Boss”實現(xiàn)的主要功能是用戶能夠發(fā)布商品信息。商品發(fā)布流程分3步：①選擇商品類別，可以選擇“Book”書籍類商品或者“Other”非書籍類商品；②填寫商品信息，可以上傳商品的圖片等；③個性定價，界面如圖5所示。為了實現(xiàn)60s內(nèi)物品快速上架目標，吸引顧客眼球，在個性定價流程中向用戶提供了“個性優(yōu)惠”欄目，賣家可以在該欄目中選填一些購買優(yōu)惠信息。

實現(xiàn)“我要當Boss”功能模塊的代碼量較大，下面僅給出商品發(fā)布流程第一步“選擇商品類別”的核心代碼。