基于微應(yīng)用的電子優(yōu)惠券系統(tǒng)設(shè)計與實現(xiàn)

忻麗巧　楊曉東　羅涓　錢潮　吳勇強

摘 要： 為了讓在校大學(xué)生更好的獲得校園周圍小商家的各類優(yōu)惠資訊，探討了一種基于微應(yīng)用的電子優(yōu)惠券系統(tǒng)的設(shè)計。系統(tǒng)包括兩個客戶端：PC端和APP端。網(wǎng)站平臺搭建使用Dreamweaver，主要功能是方便商家進行自助式上架優(yōu)惠內(nèi)容，而APP端通過Eclipse 軟件來完成開發(fā)，以二維碼的形式傳遞優(yōu)惠信息。通過手機Location Based Service（LBS）功能定位用戶所在位置，方便用戶搜索附近的優(yōu)惠券信息。系統(tǒng)界面友好，操作方便，資訊豐富，能夠使用戶快捷地獲取商鋪優(yōu)惠信息。

關(guān)鍵詞： 電子優(yōu)惠券； 網(wǎng)站； APP； 二維碼； 微應(yīng)用

中圖分類號：G305 文獻標志碼：A 文章編號：1006-8228（2015）06-35-04

Abstract： In order to make it more convenient for undergraduates to have access to special information from small shops in university， this paper describes an electronic coupons system based on mobile application. This system presents in the form of two-dimension code（QR code）. There are two different kinds of client systems： PC and APP. Web system is built by Dreamweaver and its function is allowing the merchants to offer special information on the website. The APP is developed by Eclipse， and using two-dimension code to pass information. What's more， users can locate themselves at any time by the phone's Location Based Service （LBS） function， and then they can search the special information nearby. It is easy to operate and its interface is elegant and informative thus it is more convenient and efficient for users to get special information.

Key words： electronic coupons； website； APP； two-dimension code； mobile application

0 引言

優(yōu)惠券起源于19世紀20年代的法國，直到19世紀90年代這種紙質(zhì)的物品才漸漸被商家認識并成為一種促銷方式。而電子優(yōu)惠券則是21世紀新興的產(chǎn)業(yè)[1]。

隨著科技水平的不斷發(fā)展，移動互聯(lián)網(wǎng)的不斷發(fā)展和智能手機的普及，手機優(yōu)惠券隨之出現(xiàn)，并在一定程度上避免了一些繁瑣的優(yōu)惠券獲取步驟。由于信息技術(shù)及信息產(chǎn)業(yè)的飛速發(fā)展，人們對信息傳播的范圍、速度和效率都有了更高的要求。這促使了商家促銷策略的變革，作為網(wǎng)絡(luò)促銷方式之一的電子優(yōu)惠券開始被商家注意[2]。分析其原因有以下方面。

其一，手機作為人人都有的隨身移動設(shè)備，是覆蓋面最廣的傳播媒介；而智能手機的普及使得有更多用戶能夠使用手機優(yōu)惠券。

其二，通過手機LBS功能可以隨時隨地定位用戶所在位置，并搜索附近的優(yōu)惠券信息，增加商戶被搜索到的概率。

其三，獲取優(yōu)惠券途徑便捷，用戶只需在手機上展示即可使用，省去了打印下載等繁瑣步驟。

1 項目設(shè)計方案

開發(fā)基于安卓移動終端上的手機優(yōu)惠券客戶端軟件和針對商家發(fā)布優(yōu)惠券的網(wǎng)站后臺。

1.1 開發(fā)基于PC終端的客戶端軟件

在構(gòu)建網(wǎng)站的過程中，應(yīng)用HyperText Markup Language（HTML）、Cascading Style Sheet（CSS）、JAVASCRIPT、JavaServer Pages（JSP）、Extensible Markup Language（XML）等網(wǎng)絡(luò)編程語言。

HTML即超文本標記語言，是目前互聯(lián)網(wǎng)構(gòu)成的首要部分，可以囊括圖片、程序、影像、音樂等各種元素，是其被廣泛應(yīng)用的原因之一，同時其規(guī)則簡單易學(xué)[3]。

CSS即級聯(lián)樣式表，應(yīng)用靈活。例如DIV+CSS的布局方式，已經(jīng)成為一種流行的編程方式[4]。本項目就是以DIV+CSS來構(gòu)造網(wǎng)頁框架，主網(wǎng)頁包含的內(nèi)容主要有“我煩了”、“我累了”等網(wǎng)站介紹，子網(wǎng)頁包含商家賬號管理、添加優(yōu)惠券、注冊等內(nèi)容。

JavaScript是一種腳本語言。可以嵌套到HTML和JSP網(wǎng)頁中，對于網(wǎng)頁編程和功能的實現(xiàn)非常方便。本項目中，我們也運用這種技術(shù)。

網(wǎng)站功能實現(xiàn)順序（圖1）：利用HTML語言、以Tomcat作引擎的JSP語言分別構(gòu)建網(wǎng)站的靜態(tài)頁面和動態(tài)頁面。當瀏覽器請求訪問JSP頁面時，Tomcat響應(yīng)JSP頁面中的動作，往相互連接的數(shù)據(jù)庫中存入數(shù)據(jù)或從相應(yīng)的數(shù)據(jù)庫中提取數(shù)據(jù)并將包含數(shù)據(jù)的HTML頁面返回給瀏覽器。

優(yōu)惠券顯示在首頁的主要部分，為了方便用戶的使用，同時使頁面更加美觀，項目采用了浮動框架頁，即在頁面的主要部分中顯示的是另一張網(wǎng)頁，所用的是標簽。內(nèi)中屬性“src=”填寫目標網(wǎng)頁后顯示。為了使得頁面美觀、整潔，項目選用的大小是“width=620，height=680”。同時滾動方式為默認的“auto”。目標頁面的顯示方式是連接數(shù)據(jù)庫，從數(shù)據(jù)庫中讀取優(yōu)惠券的信息（ID、優(yōu)惠券圖片、優(yōu)惠券名字、優(yōu)惠券的介紹），然后顯示。

GoogleMapsAPI允許開發(fā)者在不必建立自己的地圖服務(wù)器的情況下，將GoogleMaps地圖數(shù)據(jù)嵌入到網(wǎng)站之中，從而實現(xiàn)嵌入GoogleMaps的地圖服務(wù)應(yīng)用，并借助GoogleMaps的地圖數(shù)據(jù)為用戶提供位置服務(wù)。本項目就是通過GoogleMapsAPI在網(wǎng)站和軟件平臺給出學(xué)校附近消費場所的具體地點和距離用戶的實時距離。

1.2 開發(fā)基于移動終端的客戶端軟件

應(yīng)用Android SDK中的Eclipse平臺上的安卓虛擬機及JAVA、XML語言開發(fā)。所開發(fā)的APP可供用戶直接下載到安卓手機或其他裝有安卓操作系統(tǒng)的移動終端上運行。

添加優(yōu)惠券的界面和注冊類似，增加了一個文件域，來添加圖片。將優(yōu)惠券圖片進行流轉(zhuǎn)換，轉(zhuǎn)成二進制流（BlOB）類型存入數(shù)據(jù)庫。

為了保證網(wǎng)站的穩(wěn)定運行，以及優(yōu)惠券的有效性、可靠性，本項目增加了管理員的賬戶，以此可以管理商家的賬戶和優(yōu)惠券。各個商家賬號信息的顯示同樣由浮動框完成，建表、輸出都和上述的優(yōu)惠券顯示一樣，只不過是來自兩張不同的表格，賬號信息來自user表，優(yōu)惠券來自coupons表。頁面上有兩個刪除的框，分別針對賬號和優(yōu)惠券的刪除，執(zhí)行刪除功能的后臺JSP，所用到的語句是：

String myID=request.getParameter（"id"）；

String sql="delete from user where id="+myID；

stat.executeUpdate（sql）；

兩個刪除框?qū)?yīng)著兩個表格，操作完成后就會自動轉(zhuǎn)到各自的優(yōu)惠券、賬號界面，以此來檢查是否成功刪除信息。

本項目還加入了站內(nèi)搜索功能，可以分為通過優(yōu)惠券名字的搜索和通過優(yōu)惠券介紹的搜索。搜索的代碼非常簡單，與之前的登陸代碼類似。不過搜索類別有優(yōu)惠券名字和介紹之分，所以在從數(shù)據(jù)庫中讀取數(shù)據(jù)的時候，會加入一個限定，即限定從coupons表的某一欄進行搜索，而這一欄由搜索框中選擇列表選擇的內(nèi)容。本項目使用的是

生成二維碼的代碼直接放置在優(yōu)惠券圖片指向的網(wǎng)頁中。雖然是顯示在首頁，但由于使用了IFRAME浮動框，所以此網(wǎng)頁仍然是獨立的網(wǎng)頁，具有自己的URL。二維碼的網(wǎng)頁事先已經(jīng)加入優(yōu)惠券圖片，通過代碼會再生成一張二維碼圖片，這就是這張網(wǎng)頁的全部信息[8]。

我們可以用二維碼掃描軟件來獲取二維碼中的信息（圖6）。

圖6是二維碼讀取界面，可以從軟件中讀取到優(yōu)惠券的URL：http：//localhost：8080/bishe/1.html，該網(wǎng)頁中含有相應(yīng)的優(yōu)惠券和二維碼。這是在PC機上操作的方法，應(yīng)用在手機上需要搭建服務(wù)器，手機的攝像頭可以自動打開相應(yīng)網(wǎng)頁。

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

3.1 網(wǎng)頁PC端

PC端網(wǎng)頁分成兩部分，一部分是針對買家，方便他們通過網(wǎng)頁來進行優(yōu)惠券的選擇和使用；另一部分是針對賣家，他們可以通過網(wǎng)頁來進行優(yōu)惠自助的上架、刪除以及修改。電子優(yōu)惠券的主要目的是給消費者提供優(yōu)惠服務(wù)，刺激消費者使其產(chǎn)生購買行為[9]。

我們的買家網(wǎng)頁和APP端的功能一樣，也是分成了“首頁”/“我餓了”/“我渴了”/“我悶了”/“我的積分”/“注冊”幾部分。買家可以根據(jù)自己的需要進入相應(yīng)的子頁面，當然買家也可以根據(jù)首頁顯示的推薦店鋪進入自己所想要的店面來獲取優(yōu)惠券。同時也可以通過網(wǎng)頁上方的搜索框直接輸入想要的優(yōu)惠券，方便用戶直接得到想要的優(yōu)惠券。

賣家頁面主要分為三個版塊：“增加優(yōu)惠券”、“刪除優(yōu)惠券”、“修改優(yōu)惠券”，商家可以根據(jù)自己的需要進入到一個子頁面。圖片以及文字描述都可以通過商家自行操作。

3.2 APP端的制作

APP端主要服務(wù)于消費者。首先點擊軟件圖標即可進入主頁面。

主頁面主要包括最新的一些優(yōu)惠券領(lǐng)取活動。除此之外，主頁還包含活動、積分、導(dǎo)航、類目四個分頁面（圖7），進入分頁面可搜索用戶所想要獲得的信息。其對應(yīng)的四個按鈕下方是一些最新的活動，其中二維碼儲存著相應(yīng)的活動信息。

在主界面右拖時出現(xiàn)的界面，依次為軟件更新、關(guān)于我們、意見反饋、投訴商家、退出應(yīng)用功能界面。

圖8為“我的預(yù)定”界面，其左側(cè)為在主界面左拖時出現(xiàn)的界面，右側(cè)依次為個人信息設(shè)置、我的關(guān)注。在個人信息界面可以上傳自己的頭像及完整個人信息。而我的關(guān)注界面則是有我們預(yù)定過的優(yōu)惠券。

活動界面是在主界面點擊“活動”后出現(xiàn)的界面，點擊界面左上方按鈕可以跳到1F-5F，活動中心1F和2F的界面，1F主要是一些食品店推出的優(yōu)惠券活動，2F主要是一些飲品店推出的活動。

圖9為積分界面，其最左側(cè)是在主界面點擊“積分”后出現(xiàn)的界面。中間的界面是積分兌換的活動。右側(cè)為積分兌換界面，可用積分兌換相應(yīng)物品。

4 結(jié)束語

本軟件系統(tǒng)從根本上解決商家向大學(xué)生直接傳遞促銷信息的瓶頸。商家可以自行控制優(yōu)惠券的數(shù)量、時間、優(yōu)惠幅度等，做到信息自主發(fā)布、實時傳遞、精準傳遞。同時也改變大學(xué)生獲取促銷信息的方式，讓人們無論在何時、何地，都可以通過手機獲得商家優(yōu)惠信息[10]。從經(jīng)濟和環(huán)保意義上，使用電子優(yōu)惠券可免去紙質(zhì)優(yōu)惠券，對于大學(xué)生來說，使用電子優(yōu)惠券可更便捷的享受優(yōu)惠及會員服務(wù)。因此，基于微應(yīng)用的電子優(yōu)惠券系統(tǒng)有著巨大的應(yīng)用前景和現(xiàn)實意義。

增加合作商鋪數(shù)量和用戶數(shù)量是現(xiàn)實中最為重要的，也是最為有難度的。接下來我們將對系統(tǒng)做更深入探索，快速了解用戶需求并積極做出相應(yīng)的優(yōu)化。

參考文獻：

[1] 鄭細書.從電子優(yōu)惠券談網(wǎng)絡(luò)促銷手段的發(fā)展與創(chuàng)新[J].現(xiàn)代經(jīng)濟信

息，2010.6：269

[2] 江波，譚艷梅.基于微信的移動圖書館APP服務(wù)系統(tǒng)設(shè)計與實現(xiàn)[J].

現(xiàn)代情報，2013.33（6）：41

[3] 左正.基于第5代HTML標準的拱壩工程三維可視化網(wǎng)絡(luò)平臺[J].計

算機輔助設(shè)計與圖形學(xué)學(xué)報，2014.26（4）：590

[4] 欒紅志.一種高效的協(xié)作頻譜感知架構(gòu)[J].信息與電子學(xué)報，2014.5：

1158

[5] PAVLIDIS T，SWARTZ J，WANG Y P.Information encoding with

two dimensional bar codes[J].IEEE Computer，1992.25（6）：18

[6] 周曉偉.二維條碼技術(shù)應(yīng)用及標準化狀況介紹[J].中國標準化，

2006.5：25

[7] RUSS A.TWO dimensional bar codes[J].Adams Communications，

2002.27（4）：15

[8] 許統(tǒng).手機二維碼在國內(nèi)的發(fā)展及應(yīng)用[J].電腦與信息技術(shù)，2011.19

（3）：62

[9] 黃露易.電子優(yōu)惠券營銷應(yīng)用研究[J].消費導(dǎo)刊，2009.14（14）：16

[10] 邵丹.淺談電子優(yōu)惠券營銷應(yīng)用及發(fā)展趨勢[J].中小企業(yè)管理與科

技，2012.16：105