一个小型理财APP开发全过程（原型、设计、前端、后端、测试、部署）

昨天在电脑里无意中翻到了几年前做的一个小东西，也从来没有正式上线运营过。想着放那里也是浪费，不如凑一篇文章放出来算了，所以有了这篇拙文。本文详细的展示一个小型理财APP从立项到上线运营的全过程，旨在帮助初级从业者对产品的开发周期有一个完整的理解，亦帮助想要投资或创立中小型软件或者网络公司的创始人对行业有个基本的认识，同时帮助那些想要寻找软件外包的老板理解软件开发的每个节点，避免被坑。

在开始之前先看看成品的演示，APP端：

PC后台管理端：

本文所讲解的代码及美术资源除第三方框架以外均已申请软件著作权，本文也在CSDN首发。如需转载，请注明详细出处。

一、原型设计

二、美术设计

三、前端开发

四、后端开发

五、测试

六、部署上线

一、原型设计

1、需求来源

在进行原型设计之前，需要对需求进行有效的分析。如果你是一个软件外包团队，通常情况下需求是由甲方提出的，产品负责人就需要根据甲方提供的需求进行分析，包括显性需求与隐性需求，并将其原型化。如果你的产品是自营产品，那么需求就需要根据市场人员的反馈或者项目需求人的目标和意愿来进行收集分析，并将其原型化。

2、需求分析

作为一名合格的产品负责人，要明白并接受的是所有的需求来源都不是成体系的。这些信息都是碎片化的，且有可能会出现逻辑上有互相冲突的情况，在实际的需求分析中这是非常正常现象。并且有许多需求非专业人事对其进行描述和他真正想要的内容相差十万八千里。这就十分考验产品负责人的需求捕获和分析的技巧。

需求分析包括业务需求、用户需求和功能需求。以我们的理财APP项目为例来分别进行需求分析。

业务需求：

a、准确的展示现有的理财产品，并向用户提供详细的理财产品说明书。

b、理财产品分为不同的类型，有日结、月结、年结。

c、理财产品的价格不固定，不同的理财产品购买价格不同，参与的门槛与分红的次数不同，且风险级别也不相同。

d、理财产品有参与上限，额满即止。

e、自动计算该理财产品的应分红的次数以及分红的金额，将分红的金额自动返还到购买者的平台账户内。

f、有推荐功能，用户可以推荐其他用户进行购买，推荐并成功购买的推荐官可以即时获得一定额度的奖励，该奖励为一次性发放。

g、内置简单商城系统，用户赚取的利润可以直接在商城内进行购物。

h、对接支付系统，方便用户自主充值购买。

i、提供公告功能，以便随时提醒用户有关平台的最新信息。

j、提供活动入口，以便对理财项目或者商城内的商品进行促销。

用户需求：

a、整个系统分为消费者与管理者两种不同的用户职能。且消费者有两种不同的角色，分别为消费者和推荐官。每一个消费者除了可以在APP内进行消费购买理财产品之外，还可以通过二维码邀请其他用户来购买理财产品。用户使用手机号进行注册和登录。

b、用户与被邀请用户之间只有一个层级，且下级用户购买每笔理财产品，上级用户都可以获得奖励，获得的奖励为一次性发放。

c、推荐官有不同的等级，等级名称及等级区间可以自行定义。

d、用户购买的理财金到期后根据用户的推荐级按比例提取理财金。提取的比例可自行定义。

e、如有未能提取的理财金，可以根据推荐级别在商城内进行消费。

f、用户在商城内消费需要收集发货地址以及收货人，以便平台能正确的发货。

c、管理者可以通过提供的系统来实时查看并管理普通消费者的相关内容。

系统需求：

略

3、原型设计

在进行原型设计之前，我们先要了解一下都有哪些原型的设计工具。常见的原型设计工具有Axure、墨刀等，这些原型设计工具都非常容易使用。对于产品岗来说首先重要的是要关注整个产品的流程设计，使得整个产品能够相互衔接，至于界面是否能美观，可以请美术人员来协助制作。

所以产品岗在原型设计阶段可以使用线框或者占位图来设计整个APP的界面以及页面之间的逻辑。Axure与墨刀都能够非常轻松的为每个锚点添加链接，使得页面之间能够顺利的切换跳转。下面是使用墨刀制作的理财APP的首页原型图。

根据需求将剩下的页面原型制作出来，就可以交付给美术人员进行页面设计了。这里需要强调的是产品的最终形态以及产品页面之间的路径，都是在原型阶段就完成的。也就是说原型阶段将APP设计成什么样，最终制作出来的APP成品就是什么样，在设计和开发阶段，仅做原型的实现，不做业务逻辑的修改了。所以说原型阶段是决定APP最终形态的最重要的阶段。

对于相对大型一些的产品来说，原型阶段可能需要联合多个部门例如技术部、设计部、市场部、运营部等一起来制定产品的最终形态，是需要进行充分论证和考量的，绝不是一拍脑袋就定下的。原型阶段就是APP成型阶段，最终APP的体验就是在原型阶段完成的。

除了业务逻辑的需求以外，产品岗还要注重用户的体验，许多已经被市场培育的行为习惯极少需要产品去重新创新的。例如购物环节购物车的设置和收货地址的设置等，这些用户行为已经是经过市场的锤炼过的，用户已经养成了对应的行为习惯了，在此处就没有必要花费过多的精力去进行创新。而对于自身核心业务部分来说则是需要着重提炼的。例如用户的交互，数据的展示，页面的切换等等。

二、美术设计

美术常用的设计软件有PhotoShop（简称PS）、sketch等等，你也可以使用任意你觉得顺手的设计软件来设计APP的界面。这里作者使用了PS来设计理财APP的界面。正常情况下产品将原型制作完毕后应当交由专业的美术设计师来完成界面的设计，因为这只是一个小型的APP，界面相对来说比较简单，所以同样由作者来完成界面的设计。以下是根据原型图设计的所有界面的源文件。

APP首页的分层设计图如下图所示：

设计师按照原型图一张一张的将页面设计好之后，就可以交付给前端工程师来进行APP的开发了。

三、前端开发

对于APP的开发，早期不同的平台需要有对应的APP开发人员来进行。例如我们这个理财APP的开发，按照原来人员配置的话需要IOS平台发人员一名、安卓平台开发人员一名，再加上PC端前端开发人员，完成一个带管理后台的APP开发至少需要三名前端人员才能搞定。按照一线城市初级程序员的薪水15000/月来计算，两名开发人员就需要支付30000元/月的薪水，再加上初级前端工程师10000/月的薪水，光前端部分就需要40000元/月的成本。相对于大企业来说还好一点，对于初创团队来说压力就比较大了。

随着技术的发展，有很多很不错的第三方开发平台可以帮助我们以更低的成本和更少的时间来完成APP的开发，例如uniapp就是一个非常不错的开发框架，他是一个使用 Vue.js 开发所有前端应用的框架，也就是说我们只要会VUE的开发，那么就可以使用uniapp来开发APP，并且uniapp可以同时导出小程序、H5页面、APP等，更加详细的信息大家可以去uniapp的官网去了解，这里我们就不讲了。

使用uniapp来开发我们的理财APP，只需要一个前端开发人员即可完成，不再需要每一个平台找一个人来进行开发。对于作者来说短时间内掌握VUE比短时间内掌握IOS和安卓开发要更容易，所以我们选择uniapp来进行开发。下面是我们理财APP的首页代码，看上去是不是很简单？就好像是在写网页前端一样，非常方便快捷，差不多一天可以写2、3个页面。首页代码如下：

	
		
			 <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="interval" :duration="duration" indicator-active-color="#ffffff" indicator-color="rgba(255,255,255,.5)