bug說明
修複方法
修複結果
使用者修改頭像後導航不同步更新
修改使用者頭像後重新整理this.$store中的圖像路徑
成功
左側側邊欄第一次無自适應,後續自适應排版
去除後續自适應,統一改為遮擋型導航
上傳頭像過程中退出,僅重回設定界面才會更新頭像
添加全局storage存儲頭像路徑
設定預設詞圖單詞數量在進入頁面時就顯示警告
将規則檢查變為懶檢查,僅在送出時觸發
編輯詞圖推出後最新修改時間未改變
重新回到我的詞圖界面後重新整理更新時間
從社群fork詞圖後我的詞圖界面無顯示
重新回到我的詞圖界面後清空緩存重新請求
我的詞圖中svg預覽大小不一、存在白邊
canvas截圖時設定固定尺寸
教程進行到中途退出後回從頭開始
新增使用者教程學習狀态機,記憶使用者浏覽進度
顯示單詞清單時缺失“熟識”狀态單詞的顯示
補充缺失分支
測試時浮窗顯示前于視覺中心移動導緻浮窗位置不正确
浮窗顯示設定睡眠時間,待以動結束後蘇醒顯示
截取svg縮略圖時背景圖檔僅部分被包含
記憶背景圖檔坐标,在截圖時設定
對不同分辨率的背景圖檔的普适性較差
修改為提供動态圖床由使用者選擇的方式實作背景圖轉換,控制圖檔分辨率一緻
測試時鍵盤監聽不夠敏感,出現光标切換異常等不順滑清空
将監聽方式由keyup改為keydown,并特判開頭等特殊情況的光标位置
已完成加詞的詞圖可以添加自定義單詞
根據目前詞圖狀态判斷是否開啟自定義選項
預覽詞圖時單詞清單無法擷取api正常傳回值
新增預覽專用api,取消相關使用者權限檢查
詞圖排序修改後不及時改變,重新整理後才能修改
在切換子頁面時重新整理緩存
自定義搜尋加詞時查詢過慢,智能聯想延遲較大
取消對單詞含義的擷取,僅擷取單詞本身
bug 概述
修複過程
計算形近詞表時用時過長
添加哈希索引
在較短時間内計算出所需詞表
計算形近詞表時傳回了一些并不形近的詞
相同哈希值不足以判斷,使用 difflib 進一步判斷單詞間的相似性
大部分單詞較為相似
随機生成在過大壓力下速度過慢
删除了備援計算内容
所有生成模式都有了較高的生成速度
http 互動存在一定安全隐患
實作 https 協定的重定向,并申請相應 CA 證書
使用者可更加安全地設定密碼、通路資料
後端原靜态資源需通過 Django 進行請求得到,效率較低,且在生産模式下無法正常運作
通過 nginx 實作動靜資源分離
生産模式下高效正常運作
IP 位址采用點分十進制表示,不利于使用者記憶
完成備案申請
可以通過域名 jqkey.xyz 進行通路。
使用者資訊
使用者情況
姓名
田旭堯
身份
可憐高中生,聯考近在眼前
使用動機
聯考英語單詞必須得全部背過呀
典型場景
每周末在家抽出 3~4h 專門背單詞
使用者偏好
使用整塊的時間系統化背單詞,且對每個單詞的掌握程度要求高
使用者痛點
碎片化的背單詞法不适用于一直坐着學習的聯考黨;紙質書籍笨重,沒有互動;天天看書看得好累,要是有更 fashion 的學習方式換換腦子就好了
預期使用場景
每天有固定的時間使用該軟體來背單詞,通過設定詞圖中單詞的個數激勵自己每天的背詞數量,并且根據統計資訊界面的艾賓浩斯曲線來進行複習。
實作該使用者需求的功能
1. 可以設定每個詞圖的單詞數量上限,幫助使用者達到每天的學習目标(痛點 1) 2. 統計資訊界面對遺忘程度進行展示,時刻關注還未掌握的單詞,掌握學習進度(痛點 2) 3. 複習模式幫助使用者針對詞圖機關進行複習,還可以進行拼寫測試
田昶舜
某校非英語專業大二學生
英語不太好,想多背一些單詞沖刺四六級,但是沒有什麼動力
典型場景1
在宿舍突然想背單詞,打開 APP 使用一些背詞功能
典型場景2
在食堂,飯太燙閑着無聊沒事幹,背幾個單詞
幾乎不背單詞,或偶爾零碎地背單詞(非主要閱聽人)
不知道怎麼複習/背單詞,想要短時高收入
偶爾在四六級之前較為系統地背一些單詞
1. 可以自定義詞圖背景,挑一些喜歡的圖檔記憶單詞,趣味性 2. 通過使用者社群功能,檢視他人優秀的詞圖和背景,激勵自己;還可以點贊、fork(bai piao) 别人的優秀詞圖
田昶禹
某校考研黨,英語單詞量不高,需要大量提升
想要在半年裡把考研單詞記熟,每天抽出一定時間專門背單詞
複習數一數二膩了,背背單詞學學英語換換腦子
突然被某篇雞湯激勵到,立誓背完考研單詞,然後背了五分鐘
偶爾會專門背記單詞,主要時間不會用太多,但會用系統化的時間專門記憶單詞
單詞量較大,碎片化背單詞過于低效;且容易注意力不集中、記憶不長久
由于大學時間比較自由,是以需要依靠激勵機制來鼓勵自己每天進行背單詞。獲得激勵之後,每天确定背詞小目标并完成。
1. 月曆圖展示打卡情況,餅狀圖展示背詞進度,狀态統計展示背詞曲線,激勵使用者每天進行單詞學習(典型場景 2) 2. 我的詞圖界面可以預覽每個詞圖的背誦進度條,激勵使用者消除紅色、橙色的部分,讓整個詞圖進度條都呈現美麗的綠色
田永曉
某校英語專業或出鍋留學生
有大量背單詞的需求,常啃紅寶書等詞書,普通的碎片化記憶模式 APP 不适合了
某一天要背好多單詞,不想背着一大摞書去圖書館,硬啃,普通的背單詞軟體過于碎片化,滿足不了需求
看了個英文電影,想把電影裡整理出來的單詞加入候選背單詞清單中
系統化背單詞,即專門抽出時間閱讀書籍、影視并記憶有關單詞
紙質書籍重且較不友善、沒有互動;大量學習中産生的零散單詞除了手寫記錄難以集中背誦,且無法自定義位置;希望能提供基于詞根詞綴、近反義詞的推薦背誦詞
對單詞的專業性和難度有獨特的要求,且由于背單詞的重要性,需要使用特殊技巧來增強單詞記憶。每天需要背單詞的時間很長,覺得枯燥乏味難以集中精力。但是詞圖的多樣化編輯功能可以讓使用者設計屬于自己的詞圖,在背單詞的過程中加入設計環節,幫助使用者記憶的同時增加趣味性,讓使用者可以長時間背單詞并減少疲勞感。
1. 提供随機生成、順序生成、詞根詞綴、近反義詞、形近詞彙、同類詞彙等多種生成推薦詞表方式,供使用者建立詞根詞綴的概念及聯想記憶(痛點 3) 2. 畫布的 zoom 功能、可拖拽功能提供極大的操作空間(痛點 1、2) 3. 支援 9 種詞書的選擇(痛點 1) 4. 工具欄可以設定每個單詞的樣式 5. 提供自定義加詞功能,對于突然聯想到的單詞可以随時加入詞圖中
由于 Beta 階段添加的 API 大部分為較小量級的 API,于是傳回長度最長的 API 仍舊為檢視統計資訊 API。
Beta 階段添加了對于形近詞、同類詞的支援,獲得新詞表的 API 使用複雜度略高于其他 API 的算法。故使用獲得新詞表的 API 進行測試,詞圖大小設定為 50。
另外,使用了靜态資源分離和圖床政策,對于相對而言大小較大的背景圖檔不再從伺服器直接通過 API 擷取,故在此不進行壓力測試。
老使用者的統計資訊的資料量仍然很大,受伺服器條件限制,成功率同 Alpha 階段類似:
API
使用者數
時間
業務數
成功率
傳輸效率
總資料傳輸
響應時間
實際最高并發連接配接數
最長傳輸時間
最短傳輸時間
檢視統計資訊
255
60s
89
26%
1.50trans/s
1.73M
16.33s
24.53
30.01s
0.82s
30s
92
100%
3.09trans/s
1.79M
15.85s
48.96
29.73s
0.00s
獲得形近詞表
892
14.91trans/s
0.05M
14.64s
218.21
28.42s
0.46s
獲得同類詞表
1155
19.36trans/s
0.07M
11.61s
224.79
25.11s
0.30s
獲得形近詞表的 API 對于哈希值計算開銷較大,在添加哈希索引前最短傳輸時間達到了 3s 以上,添加哈希索引後仍舊有 0.46s 較高的延時。相較而言,獲得同類詞表查詢次數就更少一些,效率也更高。
同時,對于其他情況進行壓力測試,首先對随機生成進行測試,這裡詞圖大小也是 50:
獲得随機詞表
86
1.44trans/s
0.09M
57.80
0.44s
仔細檢視代碼發現,是多種生成方式疊加的時候産生了計算備援。去除計算備援之後,進行壓力測試:
獲得順序詞表
1196
19.93trans/s
0.72M
11.18s
222.87
23.12s
1198
19.99trans/s
0.71M
223.37
25.28s
0.19s
獲得近義詞表
608
94%
10.17trans/s
0.35M
17.76s
180.60
30.00s
0.24s
獲得詞根詞表
1177
19.67trans/s
0.74M
11.55s
227.12
24.52s
産生近義詞表的生成方式對于資料量要求較大,故資源消耗較高;總體來看,對壓力适應性較好。
後端進行了 API 的單元測試,覆寫率 70%。
沒有達到較高覆寫率的原因有三:
使用雙重校驗,每一個 API 都使用解析 token 和解析使用者兩步進行,保證了使用者隐私的安全性,但同時難以構造測試用例對于能夠通過 token 解析但是通不過使用者解析的場景,故每一個 API 都無法測試這一點;
部分 API 使用與其他 API 類似的結構,僅更改了部分影響内容(如修改字型、修改大小等),對于此類問題由于時間限制等原因沒有進行完備的測試;
對于登陸和登出有關權限 API,進行了較為完備的場景測試,沒有進行單元測試。
為了着重展示 Beta 階段功能測試結構,将 Alpha 階段各功能的回歸測試結果彙總為 Alpha 階段功能 一條展示。
浏覽器
版本
Alpha階段功能
我的詞圖
個人設定
分享社群
修改詞圖背景
自定義加詞
測試子產品
統計資訊
Google Chrome
90.0.4430.93
正常
Microsoft Edge
90.0.818.56
360浏覽器
13.0.2220.0
Firefox
88.0.1
Safari(平闆)
604.1
QQ浏覽器(平闆)
11.4.8.4762
螢幕分辨率
基本功能
頁面布局
操作流暢度
Chrome 90.0.4430.93
1920*1080
比較流暢
Edge 90.0.818.56
流暢
2560*1440
正常,側邊欄略窄
Firefox 88.0.1
Firefox 83.0
360安全浏覽器 13.1.1302.0
要求
完成情況
完成度打分(滿分10分)
整體 UI 美觀
對包括字型在内的ui元素進行了進一步優化,對我的詞圖界面、詞圖添加了過渡動畫
9
教程清晰
保留gif教程界面。另外添加基于狀态機的引導性教程指引。
使用者操作順滑
對鍵盤的監聽順滑,使用者對詞圖的編輯順滑,過渡動畫順滑,添加緩存減少平均請求時間。但由于系統承載力原因,單張圖檔上傳較慢,api擷取詞圖背景較慢
8
詞圖功能完善
已完成對詞圖背景自定義、自定義加詞等功能的完善,使用者對詞圖的可編輯程度已基本達到最高等級
使用者記憶狀态展現詳盡、可讀性高
統計資訊界面新增各詞書背誦比例和整體單詞狀态的示意圖,豐富使用者可檢視的資訊
充分利用PC端的優勢,和手機端相比有強大的不可替代性
詞圖可以通過zoom、拖拽等方式無限放大,充分利用大屏優勢。複習測試部分充分利用pc端鍵盤優勢,讓使用者可以用打字的方式鞏固記憶。
進行部分要求審查
完善對使用者名、密碼、詞圖單詞數量、詞圖名稱等基本限制的前端審查,進行使用者權限管理。
各螢幕分遍率、放大縮小、分屏的相容
詞圖尺寸跟随螢幕和側邊欄尺寸進行自适應,導航欄根據螢幕自适應為底部導航欄。側邊欄不随裝置分辨率而出現、消失。
7
資料庫設計完備
能夠支援前端詢問,同時支援推薦算法、測試算法、使用者使用資訊記錄的資料庫設計
進行權限處理
使用者登入獲得密鑰,進而才可使用各種功能,保證資料安全性
進行郵箱驗證
使用者需要通過郵箱驗證才可使用軟體,減少惡意使用者
單詞資料
770570 個單詞,覆寫面較廣;其中 20651 個單詞具有中英文例句
詞書資料
導入了四級、六級、專業四八級、考研、雅思、托福、GRE、MBA、紅寶書等詞書
近反義詞等推薦算法
共有 5060 個單詞可進行近反義詞推薦;共有 9326 個單詞可進行同詞根詞綴推薦;可以進行形近單詞推薦;可以進行同類單詞推薦;推薦算法自由選擇
綜上,基本完成 Beta 階段的出口要求。