项目开发SOP&前端执行SOP

项目开发SOP

1.产品经理输出原型图以及进行评审

• 产品根据需求出原型图
• 原型交互麻烦的地方尽量做得清晰，流程明确
• 原型图出完之后需要进行评审，前后端以及涉及到的相关人员进行原型评审，针对疑问的地方提出疑问，不好实现的地方提出不好实现的原因或者可以调整的地方、商量解决方案，针对可以优化的地方或者可以换种方案实现相同效果并能提升工作效率的地方给与建议
• 针对不明确的需求要提出，商量最终解决方案
• 熟悉整个需求的流程，后续开发可以更加明确、快速，避免不必要的沟通。

2.UI设计师跟进原型输出UI图

• 设计师根据产品原型以及规范进行设计UI图（设计师需要与产品沟通到里面的细节来实现交互、也要分析功能实现的难度多与相关人员进行沟通，给与产品建议），设计完成需要产品进行确认，确认后提供出来放在蓝湖里（蓝湖有标注界面元素的大小以及颜色方便开发），大家都可以查看，针对用户侧项目图片比较多的需要输出图片

3.前端根据UI图进行前端界面开发

• 前端查看设计图进行规划，提取界面中可以复用的模块方便重复利用，分析界面是否有实现难度比较困难的地方，结合之前的原型评审看两者是否有出入，进行沟通
• 前端进行功能排期，按功能大小以及难度进行功能时间的评估，和后端沟通好排期时间，保证大家能够更有效地开发合作
• 针对功能复杂的地方要先理清思路，不要盲目开发
• 前端搭建框架（目前使用的是之前有的项目模板）
• 根据设计图进行前端界面开发，以及遇到的问题及时与产品、UI、后台人员沟通，保持大家信息一致，针对不清楚的地方也要及时沟通，以免做错功能

4.根据后端swagger进行字段填充，以及部分功能开发

• 前后端都要按照规范进行开发，针对不规范的地方要给与提出、指正，营造出规范的工作模式，以后维护成本和沟通成本更低以及开发效率更高
• 前端根据后端输出的swagger进行界面字段的填充以及针对缺少的字段或者数据结构进行提出，及时与后端反应，尽量让大家都能以最小的改动完成后续开发工作

5.前后端功能联调、完成自测

• 前后端功能联调，联调通过并完成自测
• 检查功能完成情况，看是否有遗漏
• 出现问题及时沟通解决

6.UI设计师以及产品查看初步联调完成的项目

• UI设计师指出项目中与UI不一致的地方以及可以优化的地方
• 产品经理指出项目中与产品原型或者功能实现不一致的地方

7.发布测试、修改bug、发布上线

• 自测完成后提交测试，测试根据提交的项目以及需求进行测试，提出bug给相关人员修改，开发人员周期性的配合修改bug，保证今天能够修复昨天的bug
• 发布dev环境，配合测试，修复bug以及需求优化
• 发布test环境，修复bug以及需求优化
• 发布it环境，修复bug以及需求优化
• 发布pre环境，修复bug以及需求优化
• pre验收之后，发布线上环境，产品进行验收

8.项目总结

• 总结项目中遇到的问题以及不顺利的地方，大家沟通，避免下次还会再出这样的问题，也可以针对项目中做的比较好的地方大家一起学习，相互更快、更高效、更轻松的做好项目

前端执行SOP

一、需求阶段

1.原型评估

1）理解产品需求，评估实现难度和实现成本，是否会有潜在的技术问题与风险
2）理解PM提出此次需求的目的，明白那些内容是重点，那些是次要，可以适当取舍
3）简单项目可以预估时间，复制心目需要仔细评估，包含开发，自测，测试人员、修复bug，上线准备的时间。

2.需求分析

1，依赖外部资源：

• 后端提供的接口
• UI出图的大概布局
• 后期可能会频繁修改的地方

2，需要实现的效果

• 下拉刷新
• 吸顶效果
• 动画效果
• 赖加载、预加载、防抖、节流

3.需求二次确认（杜绝做无用功）

1，确认最终排期
2，邮件确认

二、开发阶段

1、技术选型

2、搭建开发环境

3、搭建项目架构

4、业务模块划分、

• 优先级排序
• 新项目介入，需要当前项目和介入项目的相关负责人PK优先级，随后调整项目排期
• 开发过程中发现工作量与预期有严重出入，需要尽早向项目人员反馈，方便其修改时间安排

5、制定开发规范

开发规范

1） commit提交格式

• [改动文件类型]：[改动说明]

2）单分支开发或者多分支开发

• 小项目、并行开发少，则只在master主分支开发
• 中大项目，需求复杂，并行功能多，则需要分为master、developer、开发者分支；需要开发者自创一个分支开发，合并到developer，确认无问题后，发布到master，最后上线

代码规范

1）jsconfig.json
2) postcssrc.js
3) babelrc
4) prettierrc（vscode插件prettier-code fomatter）— 注意与eslint要保持一致
5) editorconfig
6) eslintrc.js（强制开启验证模式）
7) JavaScript开发中常用的代码规范配置文件

源码管理

版本管理

安全管理

三、测试阶段

自测

1.手动测试
2.单元测试
3.集成测试

提测-测试人员测试

1.开发人员修复bug
2.测试修复bug时间可能比开发时间长，因为开发者预估开发时间不能乐观

四、上线

1.上线准备

• 域名申请
• 备案申请
• 服务器申请
• 部署

2.测试线上环境

• 有bug回到修复bug环节

3.日志监控

• 调用栈
• sourcemap
• 本地日志
• 用户环境、IP
• 低成本接入
• 统计功能
• 报警功能

五、维护