吳大非+張歡

摘要：伴隨著4G網(wǎng)絡(luò)的發(fā)展和普及，使用手機(jī)購(gòu)物越來(lái)越受人們的青睞，已經(jīng)成為潮流。該文采用MVC模式，設(shè)計(jì)開(kāi)發(fā)了一個(gè)基于IOS的女性服裝網(wǎng)上商城APP，其主要功能包括商品瀏覽、商品收藏、商品購(gòu)買(mǎi)、提交訂單、訂單支付、商品評(píng)價(jià)等功能。經(jīng)實(shí)踐驗(yàn)證，該APP使用方便、操作簡(jiǎn)單，功能齊全。

關(guān)鍵詞： 網(wǎng)上商城；IOS；APP；MVC

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）28-0286-03

智能手機(jī)的普及使得大量用戶習(xí)慣通過(guò)手機(jī)購(gòu)物，據(jù)相關(guān)統(tǒng)計(jì)，2015年中國(guó)網(wǎng)絡(luò)購(gòu)物市場(chǎng)交易規(guī)模為3.8萬(wàn)億元，其中通過(guò)手機(jī)進(jìn)行網(wǎng)絡(luò)購(gòu)物用戶規(guī)模達(dá)3.4億，同比增長(zhǎng)率為43.9%。因此眾多互聯(lián)網(wǎng)公司紛紛投入大量人力、物力來(lái)開(kāi)發(fā)網(wǎng)上商城APP軟件，做得好的有天貓和京東等網(wǎng)上商城APP。

網(wǎng)上商城APP能為公司和企業(yè)搭建商品銷售平臺(tái)，發(fā)布展示商品信息、進(jìn)行商品在線銷售、物流管理和售后服務(wù)，極大地節(jié)約了人力成本，實(shí)現(xiàn)了物資的優(yōu)化配置。

1 基于IOS的APP開(kāi)發(fā)簡(jiǎn)介

1.1 Mac OS與IOS

Mac OS 是由蘋(píng)果公司開(kāi)發(fā)的桌面操作系統(tǒng) ，而且只能安裝在蘋(píng)果公司自己生產(chǎn)的電腦上，目前版本已經(jīng)發(fā)展到10.0版。IOS是由蘋(píng)果公司開(kāi)發(fā)的移動(dòng)操作系統(tǒng)，最初是設(shè)計(jì)給iPhone使用的，后來(lái)陸續(xù)套用到iPod touch、iPad以及Apple TV等產(chǎn)品上。IOS與Mac OS一樣，屬于類Unix的商業(yè)操作系統(tǒng)。Mac OS只能運(yùn)行在X86或X86-64構(gòu)架的硬件上，而IOS只能運(yùn)行在ARM構(gòu)架的設(shè)備上。

1.2 XCode開(kāi)發(fā)工具

XCode 是運(yùn)行在Mac OS上的集成開(kāi)發(fā)工具（IDE），是開(kāi)發(fā)IOS 應(yīng)用程序的最快捷的方式。XCode 具有統(tǒng)一的用戶界面設(shè)計(jì)，編碼、測(cè)試、調(diào)試都在一個(gè)簡(jiǎn)單的窗口內(nèi)完成。目前支持C，C++、Object-C語(yǔ)言編程、編寫(xiě)出來(lái)的應(yīng)用軟件可直接運(yùn)行于裝有IOS的手機(jī)上，運(yùn)行效率非常高。

1.3 Object-C編程語(yǔ)言

Object-C語(yǔ)言是根據(jù)C語(yǔ)言所衍生出來(lái)的語(yǔ)言，繼承了C語(yǔ)言的特性，是一種面向?qū)ο蟮木幊陶Z(yǔ)言。它需要運(yùn)行在Mac OS系統(tǒng)下，可以通過(guò)XCode等集成開(kāi)發(fā)工具來(lái)進(jìn)行IOS APP的設(shè)計(jì)與開(kāi)發(fā)。

1.4 SQLite

SQLite是一款輕型的數(shù)據(jù)庫(kù)管理系統(tǒng)，它占用資源非常的少、但卻比其他數(shù)據(jù)庫(kù)效率更高，只是存儲(chǔ)數(shù)據(jù)量有限，因此適合在手機(jī)等終端軟件中使用。

2 系統(tǒng)分析

在任何軟件進(jìn)行開(kāi)發(fā)之前，都需要先進(jìn)行系統(tǒng)分析，主要包括可行性分析和需求分析等方面。

2.1 用戶需求分析

（1）開(kāi)發(fā)一個(gè)基于IOS的女性服裝電子商城APP，讓客戶通過(guò)iPhone手機(jī)瀏覽商品、購(gòu)買(mǎi)商品、進(jìn)行訂單支付；讓商城的商戶通過(guò)APP管理客戶訂單并進(jìn)行發(fā)貨和售后服務(wù)。

（2）客戶業(yè)務(wù)邏輯操作流程： 搜索和查看商品，點(diǎn)擊加入購(gòu)物車(chē)，提交訂單，支付，查看物流情況，評(píng)價(jià)交易。

2.2 APP功能需求分析

（1）啟動(dòng)界面：?jiǎn)?dòng)界面需要做到不僅僅是展示一個(gè)漂亮的廣告，最重要的是需要融入相關(guān)的視覺(jué)元素，讓用戶知道該APP大致具備什么功能。

（2）首頁(yè)：作為整個(gè)APP的導(dǎo)航頁(yè)面，其重要性可想而知。首頁(yè)不僅要推

薦展示一些用戶普遍喜愛(ài)的商品列表，還可包括廣告輪播器Banner，達(dá)到推廣的效果。在首頁(yè)中，要能讓大部分用戶方便快捷地找到自己滿意的商品。

（3）推薦頁(yè)：這個(gè)頁(yè)面需要進(jìn)行大數(shù)據(jù)分析，針對(duì)用戶以前的消費(fèi)風(fēng)格和購(gòu)物習(xí)慣，做出有針對(duì)性的分類推薦。

（4）熱搜商品分類：將所有商品按相關(guān)區(qū)分度進(jìn)行分類，在這些分類列表中，可以點(diǎn)擊相關(guān)類別進(jìn)入商品詳情界面中去查看，支持動(dòng)態(tài)加載數(shù)據(jù)、支持根據(jù)條件進(jìn)行商品篩選和排序。

（5）商品最新動(dòng)態(tài)：展示那些銷量大而且好評(píng)率高的商品，要能動(dòng)態(tài)進(jìn)行跟蹤更新，以節(jié)約用戶瀏覽時(shí)間，推薦用戶重點(diǎn)關(guān)注的商品。

（6）搜索：這個(gè)頁(yè)面通過(guò)點(diǎn)擊關(guān)鍵詞或者用戶手動(dòng)輸入關(guān)鍵詞來(lái)精確搜索商品，還要能夠保存用戶最近的關(guān)鍵詞搜索記錄。

（7）詳情頁(yè)面：這個(gè)頁(yè)面主要是用來(lái)展示商品的具體信息，包括商品名稱、型號(hào)、價(jià)格、產(chǎn)品規(guī)格參數(shù)、產(chǎn)地、銷量和商品評(píng)價(jià)等。

（8）登錄注冊(cè)：這個(gè)頁(yè)面的功能主要是實(shí)現(xiàn)收集用戶相關(guān)信息，保障用戶的賬戶安全。

（9）加入購(gòu)物車(chē)：這個(gè)模塊是保存用戶準(zhǔn)備購(gòu)買(mǎi)的商品及數(shù)量，便于記錄和一次性購(gòu)買(mǎi)，并且能支持增加、刪除、查詢功能。

（10）查看評(píng)論：用于顯示購(gòu)買(mǎi)該商品的客戶對(duì)該商品的相關(guān)評(píng)價(jià)信息。

（11）購(gòu)買(mǎi)：用于提交生成訂單，頁(yè)面包含商品信息、配送快遞物流信息、發(fā)票信息、商品購(gòu)買(mǎi)列表清單及需支付的金額等。

（12）支付：準(zhǔn)備采用第三方支付實(shí)現(xiàn)，具體是通過(guò)支付寶進(jìn)行，在鏈接到支付寶支付界面后，便自動(dòng)生成一張訂單發(fā)送給支付寶交易服務(wù)器進(jìn)行支付，支付完成后跳轉(zhuǎn)回網(wǎng)上商城APP。

（13）賬戶信息：在這個(gè)頁(yè)面中，主要是用于查看用戶賬戶的基本信息，包括累積的積分、購(gòu)物記錄、最近購(gòu)物訂單信息等。

3 系統(tǒng)設(shè)計(jì)

3.1 MVC設(shè)計(jì)模式

MVC全名是Model View Controller，是模型（model）-視圖（view）-控制器（controller）的縮寫(xiě)，是一種軟件設(shè)計(jì)模式的典范，采用將業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分離的方法來(lái)組織代碼，將業(yè)務(wù)邏輯聚集到控制器Controller里面。在后期改進(jìn)、添加和重構(gòu)個(gè)性化定制界面或用戶交互時(shí)，無(wú)需重新編寫(xiě)業(yè)務(wù)邏輯。

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

系統(tǒng)中用到的數(shù)據(jù)庫(kù)命名為WLSC，通過(guò)SQLite來(lái)創(chuàng)建，設(shè)計(jì)的數(shù)據(jù)表主要有商品，用戶、購(gòu)物車(chē)、商家和訂單等數(shù)據(jù)表。

3.2.1 商品數(shù)據(jù)表

商品（商品ID，商品名稱，型號(hào)，分類，商品圖片，原價(jià)，現(xiàn)價(jià)，銷量，規(guī)格參數(shù)）

3.2.2 用戶數(shù)據(jù)表

用戶（用戶ID，用戶名，用戶密碼，用戶積分，用戶頭像，用戶郵箱，用戶郵遞地址，手機(jī)號(hào)碼）

3.2.3 訂單數(shù)據(jù)表

訂單（訂單ID，用戶ID，商品金額，快遞費(fèi)用，訂單金額，訂單狀態(tài)）

3.3 界面設(shè)計(jì)

3.3.1 注冊(cè)登錄界面

第一次使用該APP時(shí)，需要先注冊(cè)。用戶需輸入用戶名和密碼等信息進(jìn)行注冊(cè)。注冊(cè)成功后，以后用戶通過(guò)輸入用戶名和密碼進(jìn)行登錄，驗(yàn)證通過(guò)后才能進(jìn)入到APP首頁(yè)，進(jìn)行購(gòu)物、享受用戶權(quán)利，界面如圖1所示。

3.3.2 主界面設(shè)計(jì)

該界面主要包括圖片廣告輪播，熱搜商品分類、最新心愿、明天穿什么、商品展示、每日一See等，界面如圖2所示。

3.3.3 商品詳情界面設(shè)計(jì)

主要用于顯示用戶選擇好的商品詳細(xì)信息，包括商品的名稱、價(jià)格、商品圖片集合、尺寸、顏色等信息，界面如圖3所示。

3.3.4 我的界面設(shè)計(jì)

在該界面中，可以查看我的購(gòu)物車(chē)、我的訂單、我的優(yōu)惠券、我的收藏、我的關(guān)注、瀏覽記錄等信息，界面如圖4和圖5所示。

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

由于篇幅所限，只對(duì)主界面、商品詳情界面模塊進(jìn)行闡述。

4.1 主界面實(shí)現(xiàn)

該界面主要包括圖片廣告，熱搜商品、明天穿什么、商品展示等。這些細(xì)致的分類采用CollectionView控件展示，點(diǎn)擊進(jìn)入后有相應(yīng)的頁(yè)面顯示詳細(xì)信息，這個(gè)采用TableView控件來(lái)展示，相關(guān)數(shù)據(jù)動(dòng)態(tài)加載顯示，通過(guò)編程實(shí)現(xiàn)，部分核心代碼如下：

- （void）requestData{ //解析數(shù)據(jù)

AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]；

[manager GET：indexUrl parameters：@{@"p"：[NSString stringWithFormat：@"%ld"，self.page]} success：^（AFHTTPRequestOperation *operation， id responseObject） {

} failure：^（AFHTTPRequestOperation *operation， NSError *error） {

[MBProgressHUD hideHUDForView：self.view animated：YES]；

[ZHAlertAction alertWithMsg：@"網(wǎng)絡(luò)出錯(cuò)" addToViewController：self ActionSheet：NO]；

}]； }

4.2 商品詳情界面實(shí)現(xiàn)

這個(gè)界面不再用TableView控件顯示數(shù)據(jù)，而是使用UICollectionView控件來(lái)顯示數(shù)據(jù)，因?yàn)樵摽丶窍到y(tǒng)控件，其原生代碼已經(jīng)做了完美的封裝，它給我們提供了很多API調(diào)用接口函數(shù)和回調(diào)方法，能實(shí)現(xiàn)一行顯示多個(gè)數(shù)據(jù)塊的效果，適合商品詳情的展示，部分核心代碼如下：

// 返回組數(shù)：

- （NSInteger）numberOfSectionsInCollectionView：（UICollectionView *）collectionView{

}

// 返回每一組item的個(gè)數(shù)：

- （NSInteger）collectionView：（UICollectionView *）collectionView numberOfItemsInSection：（NSInteger）section{

return self.dataArr.count；}

// 返回每一個(gè)item（cell）對(duì)象；

- （UICollectionViewCell *）collectionView：（UICollectionView *）collectionView cellForItemAtIndexPath：（NSIndexPath *）indexPath{

}

// 每一個(gè)item的大小：

- （CGSize）collectionView：（UICollectionView *）collectionView layout：（UICollectionViewLayout *）collectionViewLayout sizeForItemAtIndexPath：（NSIndexPath *）indexPath{

}

// 選擇某一個(gè)cell：

- （void）collectionView：（UICollectionView *）collectionView didSelectItemAtIndexPath：（NSIndexPath *）indexPath{

}

5 系統(tǒng)測(cè)試

在本網(wǎng)絡(luò)商城APP軟件開(kāi)發(fā)整個(gè)過(guò)程中，開(kāi)發(fā)組成員精心設(shè)計(jì)了測(cè)試方法和測(cè)試用例，對(duì)該軟件進(jìn)行了多次功能測(cè)試和性能測(cè)試，找出了一些Bug，然后進(jìn)行了修改完善，最后上傳到AppStore上線。通過(guò)在IPhone手機(jī)上使用效果體驗(yàn)，證實(shí)該APP運(yùn)行效率不錯(cuò)，功能和性能都達(dá)到了設(shè)計(jì)要求。

6 結(jié)束語(yǔ)

筆者通過(guò)這個(gè)APP的設(shè)計(jì)與開(kāi)發(fā)，對(duì)基于IOS系統(tǒng)的APP開(kāi)發(fā)過(guò)程有了深入理解，同時(shí)也感悟到一個(gè)軟件項(xiàng)目的完成與敢于迎難而上和持之以恒的態(tài)度是密不可分的。

參考文獻(xiàn)：

[1] （日）荻原剛志.Objetive-C編程全解（第3版）[M].人民郵電出版社，2012.

[2] （美）艾倫，（美）歐文斯. SQLite權(quán)威指南（第2版）[M].電子工業(yè)出版社，2012.

[3] 朱元波. IOS 8案例開(kāi)發(fā)大全[M].人民郵電出版社，2015.

[4] （美）巴納德. IPhone用戶界面設(shè)計(jì)典型實(shí)例[M].人民郵電出版社，2011.

[5] 鄭建德. 軟件系統(tǒng)架構(gòu)與開(kāi)發(fā)環(huán)境[M].機(jī)械工業(yè)出版社，2013.

[6] （美）考克斯.IOS網(wǎng)絡(luò)高級(jí)編程（第2版）[M].清華大學(xué)出版社，2014.