基于Android混合開發模式的網上購物系統的設計與實現

李雪蓮

（寶雞文理學院計算機學院，陜西寶雞721016）

隨著通信技術、計算機技術和無線接入技術的發展，移動互聯網終端產品越來越多的走進用戶生活[1]。Android作為移動終端占用率最高的操作系統，在2014年Google I/O大會公布的用戶數據，每月活躍人數超過10億用戶大關，并且持續增長[2]。隨著經濟的發展和滲入，基于Android的移動電子商務平臺已經成為傳統商品必不可少的經營策略之一[3]，淘寶、京東等大型成功案例已經證明了這點。本系統基于此背景，搭建網上購物系統，采用Android混合開發模式，實現豐富的系統功能及視覺效果。

1 Android混合開發模式

根據Android開發模式，可以分為以下3類。

原生開發。此開發模式是指Android移動平臺所特有的，使用相應平臺支持的開發工具和語言（例如Eclipse和Java等）進行開發，同樣，原生應用程序的外觀和性能也是最佳的。

HTML5開發。此開發模式使用標準的Web技術，包含HTML5、JavaScript和CSS等。其優點是其跨平臺性，移動應用程序可以在多個設備上運行。雖然開發人員單使用HTML5和JavaScript就能構建功能復雜的應用程序，但是仍舊具有其局限性。

混合開發。混合應用程序可以把HTML5應用程序嵌入到一個的原生容器里面，集原生開發和HTML5開發的優點于一體。

本系統采用混合開發模式，原生開發包括基本框架搭建、邏輯功能實現等方面，在大量頁面布局及簡單邏輯處理方面，采用HTML5、JavaScript進行開發，提高開發速度。

2 系統總體框架

系統的總體框架主要包括兩部分：Android客戶端和服務器端。客戶端，建立在Android操作系統之上，最終的支撐點是手機硬件；服務器端是建立在應用服務器端和數據庫服務器之上。本系統采用Tomcat作為服務器，MYSQL作為數據庫服務器。其中，系統框架如圖1所示。

圖1 系統總體框架示意圖

為了增強系統的擴展性，采用分層設計的理念，系統抽象出表現層、通信層、邏輯層，降級了各個模塊之間的耦合性[4]，明確了各個模塊相應的職責，從而實現了增強系統的擴展性的需求。所謂的表現層，在該系統中特指Android客戶端界面的設計，主要是給用戶呈現直觀的界面，與用戶間實現交互。所謂的通信層，它主要是表現層和邏輯層之間的紐帶，可以完美的將這兩層連接起來，具體的操作是負責Http連接、傳遞數據、接收收據、解析數據、呈現給用戶。所謂的邏輯層，在該系統中主要指的是J2EE應用的服務器，來處理用戶的請求，并且給用戶返回相應的JSON數據。

在系統設計中，客戶端和服務器端的通信都是基于HTTP協議下完成的，HTTP協議是互聯網上應用最廣泛的一種網絡協議標準[5]。HTTP協議是無狀態的，也就是連接的有效期限只限于當前請求[6]。HTTPClient是支持HTTP協議的客戶端軟件工具包，因此HttpClient組件為實現遠程數據庫的連接提供了更為快捷有效的方式[7]。借助于HttpClient這一通信框架，將通信連接封裝HttpManager工具類，在向服務器發出請求時，只需要調用該工具類就可以實現通信HttpManager類提供了高效的、功能豐富的支持Http協議的API，通過調用就可以簡單方便的實現網絡之間的通信。

3 系統功能分析

系統主要分成兩部分：服務器端和客戶端，其功能如圖2所示。

圖2 系統功能圖

注冊登錄模塊。注冊分為普通用戶注冊和手機號碼快速注冊兩種。普通注冊用戶，用戶可以自定義用戶名和密碼，但是手機號碼必須為真實存在的號碼，點擊注冊按鈕時必須對其進行校驗，其他信息也不能為空，在注冊過程中要對數據庫進行查找，如果已存在相同的名戶名將不能注冊成功。對于手機號碼快速注冊用戶，在注冊時必選先進行選擇是否同意快速注冊，如果不同意不給予注冊，同意后也要進行手機號碼校驗，校驗成功后，可以獲取驗證碼，輸入成功后進行驗證，如果該手機號碼已經注冊過不給予注冊。兩種注冊方式，用戶密碼傳遞時，進行MD5加密，保證用戶信息的安全性。若點擊返回按鈕，取消注冊，進入登錄界面。登錄時輸入用戶名和密碼后，如果有輸入為空項，必須提醒用戶輸入不能為空，輸入完成后點擊登錄按鈕需要向服務器發出請求，查找該用戶是否存在，密碼是否正確，如果錯誤，提示用戶錯誤信息。如果成功則可以登錄該軟件，在登錄界面要設置用戶注冊接口，方便新用戶注冊。

用戶管理功能。在該功能中，用戶可以修改用戶的相關信息，比如用戶的生日，性別，個性簽名以及用戶密碼等。在用戶進行修改時要向服務器發送請求，修改成功與否要給用戶信息提示。普通用戶注冊時的用戶名不能允許用戶進行修改，手機快速注冊用戶注冊時的手機號碼不能進行修改。

商品管理功能。在該功能中，主要對商品進行增加、刪除、修改、查找等操作。商品顯示分為很多大類，比如有常用分類、潮流女裝、品牌男裝、酒水飲料、家用電器、電腦辦公、手機數碼等多個大類。每個大類下邊要對應相應的小類別，比如手機數碼中有，品牌手機、攝影攝像等。品牌手機下要有手機品牌的具體分類，比如三星、iPhone、小米等多個手機品牌。每個手機品牌點擊去，要有該品牌下的具體手機列表，比如，iPhone下有，iPhone 6s、iPhone 5s、iPhone 6 plus等。點擊每一個商品，要有相應的商品詳情、規格參數、售后服務和包裝清單等具體信息。

購物車功能。在該功能中，要判斷當前是否有用戶登錄，如果沒有登錄用戶，將不顯示購物車詳情界面，顯示一個登錄按鈕和促銷按鈕，用戶點擊登錄按鈕可以轉到登錄界面，點擊促銷按鈕，可以進入促銷大賣場界面。如果有用戶登錄，顯示當前用戶的購物車中所有的商品列表，統計所有商品的一個總價。也可以讓用戶進行選擇想要結賬的商品，但是必須實時的統計用戶選擇的商品總價。用戶點擊結算按鈕可以進入結算界面進行結算商品。

訂單管理功能。在該功能中，要分為具體的待付款訂單、待發貨訂單、待收貨訂單、待評價訂單、全部訂單。該模塊需要分為5個Tab標簽，點擊每一個標簽，都會請求相應的訂單列表，如果某一個訂單列表為空，將顯示您還沒有相關訂單界面。如果列表中有訂單，則顯示具體訂單列表界面。在有數據時點擊某一條信息，可以查看具體狀態。

地圖顯示功能。在該功能中，使用百度地圖API進行集成，地圖進入后必須顯示當前位置，可以讓用戶選擇普通地圖模式、衛星地圖模式、開啟實時交通、關閉實時交通、我的位置。

二維碼功能。在該功能中，要實現掃描二維碼功能。將二維碼放入掃描框后即可獲取二維碼的相關信息，后期可以進一步擴展功能，例如通過二維碼掃描附近好友等。

搖一搖功能。可以通過搖一搖進行抽獎等，后期可以進一步擴展功能。

4 關鍵技術的設計及實現

4.1 HTML5與Android應用

HTML的指超文本標記語言，全稱Hyper Text Mark-up Language，是萬維網的基礎描述語言。HTML5是對于HTML語言的第五次修訂，也是現階段的最新版本，包括CSS、Java Script腳本語言等。HTML5的出現，主要是為了滿足移動設備對于多媒體技術的一個應用需求[8]。HTML5技術的多種新特性和跨平臺特點正迎合了移動平臺多樣性的需要，使用HTML5技術將使快速開發各種移動互聯網應用成為可能，從而更好地促進了移動互聯網的發展和移動應用的推陳出新[9-10]。

當然，現階段，HTML5技術還沒有完全成熟[9-10]，在用戶體驗等方面仍需要繼續提高。本系統采用混合編程，即網頁采取HTML5和XML編寫兩種方式。在本系統中，嵌入方法如下步驟：

1）將HTML5頁面布局設計好，并且放到文件目錄assets下。

2）利用WebView加載HTML5文件。WebView是Android中的View擴展，能夠將Web頁面作為活動布局[11-13]。

當頁面設計比較復雜時，WebView對JavaScript具有較好的支持[11-13]，可以通過在HTML5文件里，通過嵌入JavaScript實現復雜邏輯處理。本系統采用分層設計理念，所以在設計時候，盡量減少JavaScript嵌入，避免表現層與邏輯層混合一起。

4.2 服務器端設計與實現

使用Java Servlet編寫的服務器端程序。服務器端的主要功能是和客戶端交互式的瀏覽和修改數據，動態的生成Web內容。tomcat作為本地服務器的調試服務工具。在該系統中，服務器端主要給客戶端提供一個接口，客戶端通過Http協議向服務器發送請求，傳遞自己要處理的業務參數，服務器端進行數據的分析處理給客戶端返回相應的Json字段。Json數據是輕量級的數據交換格式，在數據傳輸中應用廣泛[11-13]。客戶端通過Json解析，得到需要的數據，更具數據內容作出相應的處理。連接數據庫核心代Json碼如下。

4.3 數據庫的設計

數據庫主要是用來保存一些表的信息和相應的表的數據，同時提供增刪改查等操作，方便對大數據的處理。MYSQL數據庫管理系統是一個小型關系數據庫管理系統，且是開源數據庫的杰出代表[14]。該系統中通過MySQL-Server 5.5來進行存儲，所有的相關信息數據都可以在數據庫中看到。本系統有用戶信息表user、用戶收貨地址表useraddressmanager、商品詳細信息表phone_info和購物車信息表shoppingcar等，部分表如圖3所示。

圖3 數據庫部分表展示

5 關鍵模塊的設計與實現

5.1 訂單功能的設計與實現

在訂單功能中，需要先進行用戶是否登錄的判斷，如果用戶沒有登錄需要提示用戶進行登錄再進行查看訂單操作，如果已經登錄則會進入我的訂單界面，可以查詢訂單信息，訂單狀態分為待付款訂單、待發貨訂單、待收貨訂單、待評價訂單、全部訂單。如果訂單狀態中有數據，則將數據以列表的形式顯示給用戶，如果沒有數據則顯示沒有相關訂單界面。根據登錄用戶請求該用戶下的所有訂單數據信息，返回訂單數據列表給用戶，接口設計如表1所示。

表1 訂單接口設計表

部分核心代碼如下：

5.2 地圖顯示模塊

地圖給人們帶來極大方便，Google公司提供了電子地圖服務，包括局部衛星照片等，應用比較廣泛[15]。本系統中，在地圖界面點擊右上角按鈕可以實現4個小功能：普通地圖、衛星地圖、實時交通、我的位置，點擊相應的按鈕，地圖會相應的做出變化，并且需要實時獲取當前位置，在定位發生變化時可以動態的做出刷新。

地圖功能核心代碼如下。

5.3 購物車功能模塊的設計與實現

在購物車功能中，首先判斷用戶是否登陸，如果用戶沒有登錄就顯示沒有登錄界面，界面中提示用戶登錄或進入促銷大賣場瀏覽商品信息。登錄后會向服務器請求，加載購物車中的列表信息，將得到的相關購物車中的信息以列表的形式顯示，對所有商品進行價格統計，可以進行結算。接口如表2所示。

表2 購物車接口設計表

其中，添加購物車商品列表適配器代碼如下：

6 結 論

系統基于Android操作系統，實現了客戶端和服務器端以及通信的軟件設計，客戶端采用混合HTML5技術開發模式，提高了開發效率。服務器端采用Tomcat搭建服務器，應用HTTP協議進行通信。經過測試，系統運行流暢，實現系統功能，可以為移動終端軟件開發提供一定參考價值。HTML5為移動應用開發提供了另外一條解決方案[16]，現企業開發中，HTML5的應用越來越廣泛，混合開發具有較大的優越性。本系統采用Android混合開發模式，應用HTML5、J-avaScript等嵌入到原生開發流程中，集二者優點。

參考文獻：

[1]孫弋，李貴民，王樹奇.Android微博應用開發時間[M].西安：西安電子科技大學出版社，2013.

[2]柯博文.Android實戰指南[M].北京：清華大學出版社，2015.

[3]李海燕.基于Android移動電子商務平臺的設計與實現[J].計算機安全，2014（7）：36-39.

[4]錢麗丹，蔡斌松.基于Android平臺的移動圖書館設計與開發[J].計算機時代，2015（2）：21.

[5]陳文，郭依正.深入理解Android網絡編程[M].北京：機械工業出版社，2015.

[6]王超.基于HttpClient的Android客戶端的設計與實現[J].計算機時代，2014（3）：31-32.

[7]王宇航.基于HttpClient的Android遠程數據庫的訪問[J].探索與觀察，2013：3.

[8]劉于沛.基于HTML5進行響應式Web應用的技巧[J].中國新通信，2017（2）：95.

[9]黃永慧，陳程凱.HTML5在移動應用開發上的應用前景[J].計算機技術與發展，2013，23（7）：207-210.

[10]黃宏程，胡敏，陳如松.Android移動應用設計與開發[M].北京：人民郵電出版社，2012.

[11]楊秋翔，董曉麗，李雯，等.動態網站開發教程[M].北京：清華大學出版社，2015.

[12]高凱，王俊社，仇晶.Android智能手機軟件開發教程[M].北京：國防工業出版社，2014.

[13]黃悅深.基于HTML5的移動Web APP開發[J].圖書館雜志，2014（7）：72-77.