Giter VIP home page Giter VIP logo

taobaodemo's Introduction

TaoBaoDemo (微淘购物)

项目名称:微淘购物
开发环境:Xcode7.2、Apache、MySQL
开发语言:Objective-C
适配情况:基本适应4英寸以以上尺寸的手机(纯代码界面frame约束,利用的是第三方类Masonry,xib界面利用AutoLayout 和sizeClass 约束)
是否使用ARC:是




项目简介 -- 该项目是模仿手机上的淘宝客户端开发的,主要分5大功能模块
模块1--首页:主要作用是用来向用户展示商品品,附加一些便民服务。功能包括扫一扫,商品搜索,商品展示,淘宝头条新闻。
模块2--微淘:淘宝商家发布自家动态的平台,根据用户的浏览习惯以及店铺收藏等相关数据推送商家动态。(正在敲代码中...)
模块3—社区:提供给注册用户之间交流的平台
模块4—购物车:当用户添加至购物车的商品都会在这里显示,用户可以选择一个或多个进行集中付款
模块5—我的淘宝:用户管理个人信息以及查看订单状态等其他一些操作的模块




项目功能模块图 -- ![github](http://42.96.178.214/img_for_github/project_image.png "只是大体的展示一下")


#模块一:首页 先贴几张效果图
github github


![github](http://42.96.178.214/img_for_github/weitao_main_3.png) ![](http://42.96.178.214/img_for_github/weitao_main_4.png "搜索页面")

首页的布局基本上也是照搬淘宝客户端首页的布局了,从第一张图片就可以看得出来。我首先得声明一下,淘宝的后台数据量是十分庞大的,作为个人作品的话由于所有的东西都需要自己一个人做,包括移动端UI的设计(虽然有着现成的成品在这,但是我也只能看看)、系统框架的整体搭建、APP业务逻辑的具体实现、后台数据库的设计、服务器数据的模拟等等。所以APP可能并没有图片看起来的那么好,但是我想说的是APP整体的设计都是按照正常APP的模式来的,只是有些部分简化了以及功能还没有那么全,这些我下面的都会提到。


##### 作为一个电商类的购物APP,实时的网络交互是一个应用所必不可少的使用条件。用户在购物应用上的操作都是网络相关的,用户需要知道商品和他们所收藏的店铺的最新动态,需要直接定位到他们搜索的商品,需要看到社区里其他用户正在讨论的热门话题,需要及时更新自己购物车里面的商品,需要随时看到自己账户及账户相关的商品状态以及进行其他一些操作,这些功能都需要一个强大的后台来实时支持的。
从首页来看,我们要做的就是整个页面的大部分信息都是可以及时更新的,这大部分信息包括搜索栏的搜索词、滚动广告的图片、滚动新闻的标题、新闻以下所有商品分类的图片以及每个分类的副标题。这其中最大的问题就是多张图片的获取,我首先想到的有两种解决方案,第一种,将这些图片在服务器端打包成zip格式的压缩包,然后移动端通过一次异步网络请求就可以下载所有的图片,接着移动端利用第三方类[SSZipArchive](https://github.com/samsoffes/ssziparchive)将获取到的文件进行解压缩至沙盒内,最后将解压缩后的图片在首页显示出来,很显然这种解决方式对服务器端的操作极不友好:第二种,将这些图片按照一定的顺序存放至服务器,然后移动端就可以通过简单的循环来进行多个异步网路请求来获取图片,之后再将这些图片再首页展示。这样服务器端只要简单的更换图片就可以改变移动端的数据了,所以我选择了第二种解决方案。
`Tips`:
1.当程序同时进行多个异步网络请求的时候系统正常情况下会开3、4个子线程来同时处理,这时候你得用字典来接收这些数据以便用的时候来区分它们,用数组接收的话无法保证它们的顺序。
2.子线程中是不能更改User Interface 的,要在主线程中做,推荐一种写法
dispatch_async(dispatch_get_main_queue(),^{
//回调或者说是通知主线程更新
});
当然现在你也可以用NSURLSession来实现请求结束回主线程处理信息
3.自定义cell或者view里面的用户事件最好用block块回调给它的控制器,用delegate模式回调的话会有一些莫名的bug



感觉废话说的有点多了,下面我就简单的介绍一下实现的功能了
这个是商品详情页,实现的功能有添加购物车和立即购买,需要登陆后才能进行操作
![](http://42.96.178.214/img_for_github/weiao_main_xiangqing.png) ![](http://42.96.178.214/img_for_github/weiao_test_1.png)


这是订单详情页,支付功能暂时未做
![](http://42.96.178.214/img_for_github/weitao_main_dindan.png)



#模块二:微淘
暂时只能放一张效果图,功能还没有写
![](http://42.96.178.214/img_for_github/weitao_weitao.png)


#模块三:社区
暂时也只能放一张效果图
![](http://42.96.178.214/img_for_github/weitao_shequ.png)



#模块四:购物车
能够与首页无缝连接,当用户对商品进行添加至购物车操作后这些商品都会在购物车这一模块显示,然后用户就可以在这里对商品进行集中付款,但是现在并没有将数据存放至服务器搭建的数据库环境中
![](http://42.96.178.214/img_for_github/weitao_gouwuche.png) ![](http://42.96.178.214/img_for_github/weitao_cart2.png)



#模块五:我的淘宝
主要实现了用户的注册、登录、修改、找回密码、退出当前用户的一些相关操作,利用手机号码来作为唯一的标示来区分用户。
作为一个购物类APP的话在用户没有注册的情况下也是可以进行商品的浏览的,但是当用户想进行立即购买或者添加至购物车的操作的时候就需要判断用户是否登录,如果在没有登录的情况下就可以跳转到这个界面进行登录,登录及注册的流程如下:
>1.注册用户先填写手机号,发送验证码
2.验证用户填写的验证码
3.验证成功后,动画弹出用户名及密码栏(密码不得少于6位)
4.信息填写完成后点击注册按钮
5.服务器返回用户注册是否成功的信息
6.用户注册成功,点击返回登录界面
7.用户填写登录信息,点击登录按钮
8.服务器返回用户信息,客户端判断用户信息是否匹配
9.用户登录成功

![](http://42.96.178.214/img_for_github/weitao_user.png) ![](http://42.96.178.214/img_for_github/weitao_test_3.png)

![](http://42.96.178.214/img_for_github/weitao_register.png) ![](http://42.96.178.214/img_for_github/weitao_test_5.png)


###下面放一些数据库中的表图片




功能比较多,得慢慢做

taobaodemo's People

Contributors

tzxz avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.