童思編程前端架構設計

童思少兒編程教學系統是K12在線編程教育系統，學習，隨堂問答，編程實操爲一體的系統。其中圖形化編程系統基於Scratch3【相關架構參考】。

先看架構

• 從結構層次拆分，系統主要分紅兩個大塊，普通的GUI部分和學習部分。

• 從功能模塊拆分，GUI中包含用戶中心、用戶做業做品、自由創做做品。經過路由進行切換。
  學習部分主要分爲視頻教學部分和圖形化編程系統。視頻教學部分從底層到上從分爲學習地圖、視頻播放系統和習題系統

• UI與數據分離，單獨將數據狀態這一層獨立出來。

GUI和數據管理層

普通GUI內部獨立的模塊包括用戶中心、用戶做業做品、用戶自由創做做品等模塊。每一個模塊的功能也相對獨立
這些功能提供了用戶學前以及學後相關的功能，非核心功能。
數據管理層包括用戶相關的數據，用戶學習狀態等數據。在用戶操做頁面的過程當中，數據管理層的數據實時變動，其餘部件可以隨時獲取到最新數據。
頁面以單頁面方式構建，路由爲內部路由。其餘如官網首頁（不須要登陸），經過預渲染的方式獨立出去。

學習模塊

學習模塊部分有四個部分，習題系統，視頻播放系統，學習地圖以及圖形化編程系統。

• 圖形化編程系統。須要獨立出來，由於這塊功能能夠獨立提供給用戶。
• 學習地圖。做爲用戶學習入口，也是學習模塊的底層。
• 視頻播放系統。獨立出來一個模塊，由於少兒編程的視頻播放包含了普通的視頻控制，課程小節切換，縮放控制，進入編程等功能。業務比較獨立也比較複雜。
• 習題系統。在視頻播放系統之上展現，配合視頻播放節奏，展現隨堂習題。目前支持單選題，拖拽拼圖，拖拽排序。

數據採集

數據採集提供統一的數據採集支持，採集用戶行爲數據，便於後期的數據加工和分析。支持聲明式埋點和命令式埋點。