web開發流程圖解

一、需求分析階段

產品經理PM召集專案相關人員，開需求討論會、講解原型

相關人員需理解產品需求，提出質疑：這是什么功能，怎么做，為何這么做：

（1）評估實作難度和實作成本，是否有潛在技術問題/風險

（2）對比一下自己理解的需求圖，如有與自己想的不符的，提出質疑

（3）理解PM提出此需求的目的，明白哪些內容是重點，哪些次要，可適當取舍

（4）如有產品要求提供時間，簡單專案可以評估，復雜專案不可以馬上給出時間，需要仔細評估，評估時間包含開發、自測、測驗人員測驗、修復bug、上線準備

二、專案開發階段

相關人員分頭行動：評審----->分頭開發---->合并&聯調

2.1產品設計--->PM\UE\UI

（1）產品經理PM--->畫出“產品原型圖”（草圖），側重：產品的核心

　　梳理出所有產品功能及流程邏輯，每個功能頁面上需要哪些功能和資料需要呈現表達出來，

（2）互動式設計師UE--->畫出真正的“產品原型圖”（細圖），側重：用戶的使用感受，人性化，讓用戶爽

　　協助細化功能點，考慮互動邏輯是否成立，對整個產品互動邏輯要表現清楚，比如：哪個地方需要呈現加載狀態，哪個地方創建資料表達，哪里使用彈窗等

（3）視覺設計師UI--->PSD，側重：使用界面要漂亮

ps:UE和UI非常關鍵，尤其是在手機app和網站開發中，UE是主觀的UI是客觀的

　　*論產品美觀

　　*論產品互動體驗

2.2測驗用例--->QA

測驗OA人員撰寫測驗用例

2.3前端設計--->FD

前端人員拿到UI設計圖，先自我決議需求，畫出思維導圖，流程圖

在未拿到UI給定的PSD時，可以先理清我們的需求

　　（1）依賴外部資源

　　　　后端提供的介面

　　　　UI出土的大概布局、腳本、樣式

　　　　后期頻繁改動的地方

　　（2）需要實作的效果

　　　　下拉重繪

　　　　影片效果

　　　　吸頂效果

　　　　懶加載、預加載、防抖、節流

2.4后端設計-->RD

專案經理PM（通常由公司有經驗的RD擔任）組織部門內小型需求\專案相關討論會，完善檔案，整理有疑問的地方，與產品、設計等其他人進行反復確認

檔案是程式開發的靈魂，除了設計相關的檔案外，

在正式進入開發流程前，還需要架構師或專案經理處需求分析檔案

需求檔案（見底部附件）要對整個專案的歷史背景，系統開發軟硬體要求、版本資訊等等
另一個是有服務端工程師提供的介面檔案，包括一些請求型別，傳參的數目與健名，還有服務端回傳的引數約定等（開發的靈魂，以后測驗回溯的標注或依據）

之后專案經理獨立或協同部門內人員

　　（1）設計資料庫：把業務流程轉換成表結構，表與表之間的關系

　　（2）缺點開發專案的整體架構：前端、程式、資料庫之間以什么方式對接

　　（3）其他需要考慮的技術關鍵點

　　（4）人員安排和時間節點-->定制排期表

　　　　　　優先級排序（專案上線改bug優先）

　　　　　　業務模塊劃分（具體到團隊中誰要做什么時間節點是什么）

　　（5）定制規范

　　　　　　開發規范

　　　　　　代碼規范

　　　　　　原始碼管理

　　　　　　版本管理

　　　　　　安全管理

2.5開發

前后端各自開發，然后合并&聯調

2.6測驗

先開發手動自測

然后提測--測驗人員測驗，一旦測驗出bug，開發人員第一時間修復bug

　關于測驗

2.7上線

上線準備

　　（1）域名申請

　　（2）備案申請

　　（3）服務器申請

　　（4）部署

　　（5）測驗上線環境

　　　　　　有bug回復修護bug環節

　　（6）日志監控

          調動堆疊
　　　　　　sourcemap
　　　　　　本地日志
　　　　　　用戶環境、IP
　　　　　　低成本接入
　　　　　　統計功能
　　　　　　報警功能

2.8維護

技術創新

　　（1）提高效率

　　　　jenkins構建部署

　　　　減少成本

　　　　提升穩定性

　　　　安全性

三、專案開發周期　　

新手程式員預估專案完成時間法則：

A = 自己按照經驗，給出比較寬裕的時間，

B = A*2，報給leader

C = B*1.5，報給PM

D = C*1.5，PM最終的估算和報價基礎，

最終大概是原始估計的4.5倍以上，對于大多數程式員，其實還是完成不了的，如果不考慮預算之類的因素，請再*1.5