基于HTML5的大學(xué)生二手物品交易APP設(shè)計(jì)

蘇雨鴻++姚興華

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

關(guān)鍵詞：HTML5；二手物品交易；APP；Ionic

DOIDOI：10.11907/rjdk.171427

中圖分類號(hào)：TP319文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：16727800（2017）010008005

0引言

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

1HTML5介紹

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

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

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

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

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

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

2二手物品交易APP設(shè)計(jì)

2.1功能結(jié)構(gòu)設(shè)計(jì)

根據(jù)大學(xué)生群體的特點(diǎn)，筆者對(duì)二手物品交易APP設(shè)計(jì)了5個(gè)主要功能模塊：“我要當(dāng)Boss”、“Book”、“Market”、“情報(bào)站”、“個(gè)人中心”。系統(tǒng)框架結(jié)構(gòu)見圖1。

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

5個(gè)主要功能模塊如下：

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

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

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

（4）“情報(bào)站”模塊——發(fā)布社交狀態(tài)?！扒閳?bào)站”模塊將用于發(fā)布社交狀態(tài)?？紤]到學(xué)生活動(dòng)因校而異，根據(jù)學(xué)生用戶所屬學(xué)校設(shè)計(jì)相應(yīng)的狀態(tài)發(fā)布界面，并設(shè)計(jì)“投票”與“召集”兩個(gè)子模塊，以支持學(xué)生發(fā)起投票活動(dòng)與發(fā)起號(hào)召、主題討論活動(dòng)。

（5）“個(gè)人中心”模塊——記錄用戶的交易歷史信息。著重設(shè)計(jì)“購(gòu)買記錄”、“出售記錄”、“我上架的物品”、“歷史評(píng)價(jià)”、“好友列表”5個(gè)子模塊功能。

2.2數(shù)據(jù)庫(kù)設(shè)計(jì)

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

數(shù)據(jù)庫(kù)中包含3張主表：“Student”表、“Book”表、“Goods”表（見圖2、圖3、圖4）。圖2為“Student”表，記錄、存儲(chǔ)學(xué)生的個(gè)人信息。圖3為“Book”表，記錄書籍物品的信息。圖4為“Goods”表，記錄非書籍類物品的信息?！癝tudent”表中的主鍵telephone同時(shí)作為“Book”表、“Goods”表的外鍵，與“Book”表、“Goods”表中owner字段的值相對(duì)應(yīng)。

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

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

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

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

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

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

考慮到PhoneGap與AppCan的優(yōu)缺點(diǎn)，選擇Cordova開發(fā)平臺(tái)。因?yàn)镃ordova支持的前端UI組件庫(kù)Ionic已經(jīng)成熟，并且可以在其提供的樣式庫(kù)基礎(chǔ)上進(jìn)行個(gè)性化修改，得到想要的效果。

3.2功能模塊設(shè)計(jì)與展示

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

3.2.1“我要當(dāng)Boss”模塊

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

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