做業要求
團隊陣容
組員職責分工
- 孫文慈:初始化前端Vue項目。博客內容編寫。
- 陳序展:安裝Vue CLI,element-ui以及環境的調試。博客內容編寫。
- 馮凱:讀取QQ聊天記錄而且序列化成json格式;博客內容收集整理。
- 傅德泉:將處理完的json數據進行關鍵字提取。博客內容編寫。
- 黃海山:GUI原型設計。博客內容編寫。
- 黃樂興:抽獎算法的編碼實現。博客內容編寫。
- <script>:先後端框架的搭建,程序功能的集成,代碼調試與部署。博客內容編寫。
github 的提交日誌截圖




程序運行截圖
源碼編譯
- 從github將項目源碼clone到本地

- 切換到項目所在目錄並安裝

- 本地運行項目

Release啓動
https://github.com/codingkai001/live-project/releases/tag/0.1html
解壓後雙擊index.html前端
運行展現
- 抽獎界面首頁

- 設置關鍵字、選擇聊天日期、設置獎品以及設置過濾條件

- 根據設置篩選用戶,展現抽獎結果

程序開發 / 運行環境
- 純前端項目,開發語言爲JavaScript,使用Vue + element-ui進行開發。
- 運行環境:Chrome 60+及以上版本。
GUI界面
- 首頁

- 選擇關鍵字&選擇聊天日期

- 設置獎品列表、獎品個數、選擇聊天記錄、以及條件篩選

- 展現獲獎名單

基礎功能實現
- 實現完整GUI界面:項目GUI採用Vue+element-ui實現,界面簡約大方。
- 設置抽獎事件、文案、規則
- 在輸入框中輸入抽獎關鍵詞,將自動添加到關鍵字Label中,可自由添加或刪除。
- 在文本框中輸入抽獎活動文案。
- 使用簡潔的日曆界面能夠方便的修改抽獎發言時段。
- 抽獎過濾規則
- 彈出框展現抽獎結果名單,顯示獲獎的成員暱稱、帳號和獎品,自動將已獲獎的同窗屏蔽,以避免一個同窗屢次在同一個抽獎中獲多個獎項。
抽獎算法設計思路
- 抽獎算法
使用多個維度設置抽獎算法,確保抽獎過程公平公正:
- 隨機算法
咱們使用的僞隨機數算法是XORSHIFT128+,這個算法的基本原理以下:
uint64_t state0 = 1;
uint64_t state1 = 2;
uint64_t xorshift128plus() {
uint64_t s1 = state0;
uint64_t s0 = state1;
state0 = s0;
s1 ^= s1 << 23;
s1 ^= s1 >> 17;
s1 ^= s0;
s1 ^= s0 >> 26;
state1 = s1;
return state0 + state1;
}
關於這個算法,其實現的特色是內存小、計算速度快,但不具備密碼學安全性。事實上,對於抽獎,咱們也不須要這個。能夠閱讀相關論文,咱們在此再也不贅述:
Further scramblings of Marsaglia’s xorshift generators, Sebastiano Vigna, Universit`a degli Studi di Milano, Italy, http://vigna.di.unimi.it/ftp/papers/xorshiftplus.pdfgit
遇到的困難及解決方法
- 孫文慈
- 陳序展
- 第一次接觸Vue,不懂得如何安裝Vue CLI,以及進行項目的建立和插件的添加。經過查看官方文檔,掌握相關方法解決。
- 對於git命令及相關操做不熟悉。上網查看教程,學習相關命令和操做解決。
- 馮凱
- 在聊天記錄的處理過程當中,存在許多雜亂的數據,這給數據的序列化帶來許多麻煩。經過數據過濾,格式調整,而後再讀取數據進行序列化操做。
- 傅德泉
- 黃海山
- 對墨刀原型工具運用不熟悉,經過查找墨刀設計教程,學習不熟悉的操做解決。
- 對github命令不熟悉。經過查找網上的github教程,學習各類基本命令解決。
- 黃樂興
- 抽獎的流程較爲複雜,沒法立刻編寫出一個完整的抽獎算法。解決的方法是採用迭代的開發模式,一步一步增長抽獎的功能,而且在增長功能的同時考慮代碼的耦合性,儘量地讓功能模塊化,方便往後的維護。
- <script>
團隊實戰總結
因爲團隊成員在做業發佈以後就開始組內分工,提早進行各個模塊功能的開發準備,使得整個程序的開發進度比較順利,在上機課上提早完成了做業的各項要求與程序的運行測試。所以,本次團隊Github實戰訓練算是比較圓滿地完成了任務,機會永遠是留給有準備的人。
團隊成員貢獻比例
221500201 |
初始化前端Vue項目 |
7% |
131601207 |
安裝Vue CLI,element-ui以及環境的調試 |
15% |
221600414 |
讀取QQ聊天記錄而且序列化成json格式 |
17% |
221600415 |
將處理完的json數據進行關鍵字提取 |
12% |
221600416 |
GUI原型設計 |
15% |
221600417 |
抽獎算法的編碼實現 |
16% |
221600439 |
先後端框架的搭建,程序功能的集成,代碼調試與部署 |
18% |
團隊成員PSP表格
PSP表格-孫文慈
Planning |
計劃 |
|
|
• Estimate |
• 估計這個任務須要多少時間 |
60 |
70 |
Development |
開發 |
60 |
70 |
• Analysis |
• 需求分析 (包括學習新技術) |
0 |
0 |
• Design Spec |
• 生成設計文檔 |
0 |
0 |
• Design Review |
• 設計複審 |
0 |
0 |
• Coding Standard |
• 代碼規範 (爲目前的開發制定合適的規範) |
0 |
0 |
• Design |
• 具體設計 |
0 |
0 |
• Coding |
• 具體編碼 |
40 |
60 |
• Code Review |
• 代碼複審 |
0 |
0 |
• Test |
• 測試(自我測試,修改代碼,提交修改) |
20 |
10 |
Reporting |
報告 |
0 |
0 |
• Test Report |
• 測試報告 |
0 |
0 |
• Size Measurement |
• 計算工做量 |
0 |
0 |
• Postmortem & Process Improvement Plan |
• 過後總結, 並提出過程改進計劃 |
0 |
0 |
|
合計 |
60 |
70 |
PSP表格-陳序展
Planning |
計劃 |
|
|
• Estimate |
• 估計這個任務須要多少時間 |
120 |
120 |
Development |
開發 |
120 |
120 |
• Analysis |
• 需求分析 (包括學習新技術) |
0 |
0 |
• Design Spec |
• 生成設計文檔 |
0 |
0 |
• Design Review |
• 設計複審 |
0 |
0 |
• Coding Standard |
• 代碼規範 (爲目前的開發制定合適的規範) |
0 |
0 |
• Design |
• 具體設計 |
0 |
0 |
• Coding |
• 具體編碼 |
100 |
100 |
• Code Review |
• 代碼複審 |
0 |
0 |
• Test |
• 測試(自我測試,修改代碼,提交修改) |
20 |
20 |
Reporting |
報告 |
0 |
0 |
• Test Report |
• 測試報告 |
0 |
0 |
• Size Measurement |
• 計算工做量 |
0 |
0 |
• Postmortem & Process Improvement Plan |
• 過後總結, 並提出過程改進計劃 |
0 |
0 |
|
合計 |
120 |
120 |
PSP表格-馮凱
Planning |
計劃 |
|
|
• Estimate |
• 估計這個任務須要多少時間 |
180 |
250 |
Development |
開發 |
180 |
250 |
• Analysis |
• 需求分析 (包括學習新技術) |
0 |
0 |
• Design Spec |
• 生成設計文檔 |
0 |
0 |
• Design Review |
• 設計複審 |
0 |
0 |
• Coding Standard |
• 代碼規範 (爲目前的開發制定合適的規範) |
0 |
0 |
• Design |
• 具體設計 |
0 |
0 |
• Coding |
• 具體編碼 |
120 |
200 |
• Code Review |
• 代碼複審 |
0 |
0 |
• Test |
• 測試(自我測試,修改代碼,提交修改) |
60 |
50 |
Reporting |
報告 |
0 |
0 |
• Test Report |
• 測試報告 |
0 |
0 |
• Size Measurement |
• 計算工做量 |
0 |
0 |
• Postmortem & Process Improvement Plan |
• 過後總結, 並提出過程改進計劃 |
0 |
0 |
|
合計 |
180 |
250 |
PSP表格-傅德泉
Planning |
計劃 |
|
|
• Estimate |
• 估計這個任務須要多少時間 |
50 |
80 |
Development |
開發 |
50 |
80 |
• Analysis |
• 需求分析 (包括學習新技術) |
0 |
0 |
• Design Spec |
• 生成設計文檔 |
0 |
0 |
• Design Review |
• 設計複審 |
0 |
0 |
• Coding Standard |
• 代碼規範 (爲目前的開發制定合適的規範) |
0 |
0 |
• Design |
• 具體設計 |
0 |
0 |
• Coding |
• 具體編碼 |
30 |
50 |
• Code Review |
• 代碼複審 |
0 |
0 |
• Test |
• 測試(自我測試,修改代碼,提交修改) |
20 |
30 |
Reporting |
報告 |
0 |
0 |
• Test Report |
• 測試報告 |
0 |
0 |
• Size Measurement |
• 計算工做量 |
0 |
0 |
• Postmortem & Process Improvement Plan |
• 過後總結, 並提出過程改進計劃 |
0 |
0 |
|
合計 |
50 |
80 |
PSP表格-黃海山
Planning |
計劃 |
|
· Estimate |
· 估計這個任務須要多少時間 |
100 |
130 |
Development |
開發 |
|
· Analysis |
· 需求分析 (包括學習新技術) |
20 |
30 |
· Design Spec |
· 生成設計文檔 |
20 |
20 |
· Design Review |
· 設計複審 |
20 |
20 |
· Coding Standard |
· 代碼規範 (爲目前的開發制定合適的規範) |
0 |
0 |
· Design |
· 具體設計 |
10 |
10 |
· Coding |
· 具體編碼 |
30 |
30 |
· Code Review |
· 代碼複審 |
0 |
0 |
· Test |
· 測試(自我測試,修改代碼,提交修改) |
10 |
10 |
Reporting |
報告 |
|
· Test Repor |
· Test Repor |
10 |
10 |
· Size Measurement |
· 計算工做量 |
0 |
0 |
· Postmortem & Process Improvement Plan |
· 過後總結, 並提出過程改進計劃 |
10 |
10 |
合計 |
|
120 |
130 |
PSP表格-黃樂興
Planning |
計劃 |
|
|
? Estimate |
? 估計這個任務須要多少時間 |
290 |
230 |
Development |
開發 |
270 |
220 |
? Analysis |
? 需求分析 (包括學習新技術) |
60 |
30 |
? Design Spec |
? 生成設計文檔 |
40 |
30 |
? Design Review |
? 設計複審2 |
20 |
20 |
? Coding Standard |
? 代碼規範 (爲目前的開發制定合適的規範)6 |
30 |
30 |
? Design |
? 具體設計 |
30 |
30 |
? Coding |
? 具體編碼 |
80 |
70 |
? Code Review |
? 代碼複審 |
0 |
0 |
? Test |
? 測試(自我測試,修改代碼,提交修改) |
10 |
10 |
Reporting |
報告 |
20 |
10 |
? Test Report |
? 測試報告 |
0 |
0 |
? Size Measurement |
? 計算工做量 |
0 |
0 |
? Postmortem & Process Improvement Plan |
? 過後總結, 並提出過程改進計劃 |
20 |
10 |
|
合計 |
290 |
230 |
PSP表格-<script>
Planning |
計劃 |
|
|
• Estimate |
• 估計這個任務須要多少時間 |
170 |
150 |
Development |
開發 |
120 |
100 |
• Analysis |
• 需求分析 (包括學習新技術) |
0 |
0 |
• Design Spec |
• 生成設計文檔 |
0 |
0 |
• Design Review |
• 設計複審 |
0 |
0 |
• Coding Standard |
• 代碼規範 (爲目前的開發制定合適的規範) |
0 |
0 |
• Design |
• 具體設計 |
0 |
0 |
• Coding |
• 具體編碼 |
120 |
100 |
• Code Review |
• 代碼複審 |
0 |
0 |
• Test |
• 測試(自我測試,修改代碼,提交修改) |
20 |
10 |
Reporting |
報告 |
0 |
0 |
• Test Report |
• 測試報告 |
0 |
0 |
• Size Measurement |
• 計算工做量 |
0 |
0 |
• Postmortem & Process Improvement Plan |
• 過後總結, 並提出過程改進計劃 |
0 |
0 |
|
合計 |
140 |
110 |