吳大非+張歡

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

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

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

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

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

1 基于IOS的APP開發(fā)簡介

1.1 Mac OS與IOS

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

1.2 XCode開發(fā)工具

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

1.3 Object-C編程語言

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

1.4 SQLite

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

2 系統(tǒng)分析

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

2.1 用戶需求分析

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

（2）客戶業(yè)務(wù)邏輯操作流程： 搜索和查看商品，點擊加入購物車，提交訂單，支付，查看物流情況，評價交易。

2.2 APP功能需求分析

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

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

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

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

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

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

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

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

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

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

（10）查看評論：用于顯示購買該商品的客戶對該商品的相關(guān)評價信息。

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

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

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

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

3.1 MVC設(shè)計模式

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

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

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

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

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

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

用戶（用戶ID，用戶名，用戶密碼，用戶積分，用戶頭像，用戶郵箱，用戶郵遞地址，手機號碼）

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

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

3.3 界面設(shè)計

3.3.1 注冊登錄界面

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

3.3.2 主界面設(shè)計

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

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

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

3.3.4 我的界面設(shè)計

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

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

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

4.1 主界面實現(xiàn)

該界面主要包括圖片廣告，熱搜商品、明天穿什么、商品展示等。這些細致的分類采用CollectionView控件展示，點擊進入后有相應(yīng)的頁面顯示詳細信息，這個采用TableView控件來展示，相關(guān)數(shù)據(jù)動態(tài)加載顯示，通過編程實現(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ò)出錯" addToViewController：self ActionSheet：NO]；

}]； }

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

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

// 返回組數(shù)：

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

}

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

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

return self.dataArr.count；}

// 返回每一個item（cell）對象；

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

}

// 每一個item的大?。?/p>

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

}

// 選擇某一個cell：

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

}

5 系統(tǒng)測試

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

6 結(jié)束語

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

參考文獻：

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

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

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

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

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

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