基于IOS的网上商城APP设计与实现

2016-12-21吴大非张欢

电脑知识与技术 2016年28期

吴大非+张欢

摘要：伴随着4G网络的发展和普及，使用手机购物越来越受人们的青睐，已经成为潮流。该文采用MVC模式，设计开发了一个基于IOS的女性服装网上商城APP，其主要功能包括商品浏览、商品收藏、商品购买、提交订单、订单支付、商品评价等功能。经实践验证，该APP使用方便、操作简单，功能齐全。

关键词：网上商城；IOS；APP；MVC

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2016）28-0286-03

智能手机的普及使得大量用户习惯通过手机购物，据相关统计，2015年中国网络购物市场交易规模为3.8万亿元，其中通过手机进行网络购物用户规模达3.4亿，同比增长率为43.9%。因此众多互联网公司纷纷投入大量人力、物力来开发网上商城APP软件，做得好的有天猫和京东等网上商城APP。

网上商城APP能为公司和企业搭建商品销售平台，发布展示商品信息、进行商品在线销售、物流管理和售后服务，极大地节约了人力成本，实现了物资的优化配置。

1 基于IOS的APP开发简介

1.1 Mac OS与IOS

Mac OS 是由苹果公司开发的桌面操作系统，而且只能安装在苹果公司自己生产的电脑上，目前版本已经发展到10.0版。IOS是由苹果公司开发的移动操作系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上。IOS与Mac OS一样，属于类Unix的商业操作系统。Mac OS只能运行在X86或X86-64构架的硬件上，而IOS只能运行在ARM构架的设备上。

1.2 XCode开发工具

XCode 是运行在Mac OS上的集成开发工具（IDE），是开发IOS 应用程序的最快捷的方式。XCode 具有统一的用户界面设计，编码、测试、调试都在一个简单的窗口内完成。目前支持C，C++、Object-C语言编程、编写出来的应用软件可直接运行于装有IOS的手机上，运行效率非常高。

1.3 Object-C编程语言

Object-C语言是根据C语言所衍生出来的语言，继承了C语言的特性，是一种面向对象的编程语言。它需要运行在Mac OS系统下，可以通过XCode等集成开发工具来进行IOS APP的设计与开发。

1.4 SQLite

SQLite是一款轻型的数据库管理系统，它占用资源非常的少、但却比其他数据库效率更高，只是存储数据量有限，因此适合在手机等终端软件中使用。

2 系统分析

在任何软件进行开发之前，都需要先进行系统分析，主要包括可行性分析和需求分析等方面。

2.1 用户需求分析

（1）开发一个基于IOS的女性服装电子商城APP，让客户通过iPhone手机浏览商品、购买商品、进行订单支付；让商城的商户通过APP管理客户订单并进行发货和售后服务。

（2）客户业务逻辑操作流程：搜索和查看商品，点击加入购物车，提交订单，支付，查看物流情况，评价交易。

2.2 APP功能需求分析

（1）启动界面：启动界面需要做到不仅仅是展示一个漂亮的广告，最重要的是需要融入相关的视觉元素，让用户知道该APP大致具备什么功能。

（2）首页：作为整个APP的导航页面，其重要性可想而知。首页不仅要推

荐展示一些用户普遍喜爱的商品列表，还可包括广告轮播器Banner，达到推广的效果。在首页中，要能让大部分用户方便快捷地找到自己满意的商品。

（3）推荐页：这个页面需要进行大数据分析，针对用户以前的消费风格和购物习惯，做出有针对性的分类推荐。

（4）热搜商品分类：将所有商品按相关区分度进行分类，在这些分类列表中，可以点击相关类别进入商品详情界面中去查看，支持动态加载数据、支持根据条件进行商品筛选和排序。

（5）商品最新动态：展示那些销量大而且好评率高的商品，要能动态进行跟踪更新，以节约用户浏览时间，推荐用户重点关注的商品。

（6）搜索：这个页面通过点击关键词或者用户手动输入关键词来精确搜索商品，还要能够保存用户最近的关键词搜索记录。

（7）详情页面：这个页面主要是用来展示商品的具体信息，包括商品名称、型号、价格、产品规格参数、产地、销量和商品评价等。

（8）登录注册：这个页面的功能主要是实现收集用户相关信息，保障用户的账户安全。

（9）加入购物车：这个模块是保存用户准备购买的商品及数量，便于记录和一次性购买，并且能支持增加、删除、查询功能。

（10）查看评论：用于显示购买该商品的客户对该商品的相关评价信息。

（11）购买：用于提交生成订单，页面包含商品信息、配送快递物流信息、发票信息、商品购买列表清单及需支付的金额等。

（12）支付：准备采用第三方支付实现，具体是通过支付宝进行，在链接到支付宝支付界面后，便自动生成一张订单发送给支付宝交易服务器进行支付，支付完成后跳转回网上商城APP。

（13）账户信息：在这个页面中，主要是用于查看用户账户的基本信息，包括累积的积分、购物记录、最近购物订单信息等。

3 系统设计

3.1 MVC设计模式

MVC全名是Model View Controller，是模型（model）-视图（view）-控制器（controller）的缩写，是一种软件设计模式的典范，采用将业务逻辑、数据、界面显示分离的方法来组织代码，将业务逻辑聚集到控制器Controller里面。在后期改进、添加和重构个性化定制界面或用户交互时，无需重新编写业务逻辑。

3.2 数据库设计

系统中用到的数据库命名为WLSC，通过SQLite来创建，设计的数据表主要有商品，用户、购物车、商家和订单等数据表。

3.2.1 商品数据表

商品（商品ID，商品名称，型号，分类，商品图片，原价，现价，销量，规格参数）

3.2.2 用户数据表

用户（用户ID，用户名，用户密码，用户积分，用户头像，用户邮箱，用户邮递地址，手机号码）

3.2.3 订单数据表

订单（订单ID，用户ID，商品金额，快递费用，订单金额，订单状态）

3.3 界面设计

3.3.1 注册登录界面

第一次使用该APP时，需要先注册。用户需输入用户名和密码等信息进行注册。注册成功后，以后用户通过输入用户名和密码进行登录，验证通过后才能进入到APP首页，进行购物、享受用户权利，界面如图1所示。

3.3.2 主界面设计

该界面主要包括图片广告轮播，热搜商品分类、最新心愿、明天穿什么、商品展示、每日一See等，界面如图2所示。

3.3.3 商品详情界面设计

主要用于显示用户选择好的商品详细信息，包括商品的名称、价格、商品图片集合、尺寸、颜色等信息，界面如图3所示。

3.3.4 我的界面设计

在该界面中，可以查看我的购物车、我的订单、我的优惠券、我的收藏、我的关注、浏览记录等信息，界面如图4和图5所示。

4 系统实现

由于篇幅所限，只对主界面、商品详情界面模块进行阐述。

4.1 主界面实现

该界面主要包括图片广告，热搜商品、明天穿什么、商品展示等。这些细致的分类采用CollectionView控件展示，点击进入后有相应的页面显示详细信息，这个采用TableView控件来展示，相关数据动态加载显示，通过编程实现，部分核心代码如下：

- （void）requestData{ //解析数据

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：@"网络出错" addToViewController：self ActionSheet：NO]；

}]； }

4.2 商品详情界面实现

这个界面不再用TableView控件显示数据，而是使用UICollectionView控件来显示数据，因为该控件是系统控件，其原生代码已经做了完美的封装，它给我们提供了很多API调用接口函数和回调方法，能实现一行显示多个数据块的效果，适合商品详情的展示，部分核心代码如下：

// 返回组数：

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

}

// 返回每一组item的个数：

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

return self.dataArr.count；}

// 返回每一个item（cell）对象；

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

}

// 每一个item的大小：

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

}

// 选择某一个cell：

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

}

5 系统测试

在本网络商城APP软件开发整个过程中，开发组成员精心设计了测试方法和测试用例，对该软件进行了多次功能测试和性能测试，找出了一些Bug，然后进行了修改完善，最后上传到AppStore上线。通过在IPhone手机上使用效果体验，证实该APP运行效率不错，功能和性能都达到了设计要求。

6 结束语

笔者通过这个APP的设计与开发，对基于IOS系统的APP开发过程有了深入理解，同时也感悟到一个软件项目的完成与敢于迎难而上和持之以恒的态度是密不可分的。

参考文献：

[1] （日）荻原刚志.Objetive-C编程全解（第3版）[M].人民邮电出版社，2012.

[2] （美）艾伦，（美）欧文斯. SQLite权威指南（第2版）[M].电子工业出版社，2012.

[3] 朱元波. IOS 8案例开发大全[M].人民邮电出版社，2015.