新派系統Web前端架構

這是一個Python學習系統，主要提供給成年人。交互方式爲對話式，不過裏面的對話所有是經過腳本內置好的。用戶經過Enter展現下一句對話，支持語音自動朗讀。

先看架構!

基礎支持層

提供了課程學習回使用到的通用功能模塊

• 圖片展現系統。標準化圖片展現（限制展現圖片在640px*480px範圍內）、點擊放大、多圖切換，以及可定製化功能（好比知識卡片中定製了一個點擊按鈕，點擊後定位到圖片所在的學習上下文環境）

• 習題系統。提供標準的習題模塊，供互動學習、鞏固練習使用。

• 在線Python編程系統。該系統的核心。分爲兩個模塊，編輯器和在線終端。流程是：
  1.初始化編程模塊\連接websoket，websoket直接連接python的docker鏡像。
  2.用戶編寫代碼，點擊運行。將代碼傳遞給後臺，後臺保存爲一個py文件，返回文件路徑以及執行命令字符串。
  3.前端將執行命令字符串經過websoket傳遞給python的鏡像運行。運行過程當中產生的打印經過websoket源源不斷傳遞給前端。前端接收後展現到在線終端。websocket的接收前端能夠控制，當遇到base64格式的數據，前端會緩存下來，接收的圖片數據不會展現到終端，而是額外展現。還支持url格式（這種格式主要是html連接，能夠支持動態交互的效果）。
  4.識別服務端經過websocket傳遞來的終止符號，判斷打印中是否有報錯，沒有報錯則視爲成功，自動斷開websokect。此時用戶不能再對代碼經行編輯。
  5.若是打印有報錯，則認爲程序執行異常。保持爲異常狀態。此時用戶能夠二次編輯程序和運行。或者跳過，跳過視爲失敗，斷開websocket。
  再2-3步中間有一個檢測websocket連接的過程，若是websocket是斷開的狀態，則從新連接成功後再繼續往下走。

編程系統的完整的狀態機以下

這個狀態機有一個特色Websocket對用戶來講是透明的，最多就一個提示，但不影響操做。市面上不少產品都是Websocket斷開後，整個編程模塊就用不了，須要用戶手動點擊後從新連接。
還有一個特色是，若是程序執行報錯，若是用戶沒有點擊跳過而是直接關閉瀏覽器（視爲放棄），用戶下次進來是最近的一個最終狀態，數據也是這個狀態的數據。這個特色仁者見仁吧。

課堂學習層

這一層是用戶學習的主要板塊，包括三個功能部分

• 互動學習。做爲課堂學習的主要內容。支持的數據類型豐富：文本、圖片、視頻、代碼段、內嵌編程練習器、選題題等。
  額外還支持的功能有彈幕系統、知識卡片（用戶學習事後的課程圖片整理，便於用戶複習）、語音朗讀控制。

• 鞏固練習。能夠理解爲作題練習。目前支持單選題，題目以及選項支持文本、圖片、代碼段展現。

• 項目實戰。編程挑戰練習，給定任務要求，用戶根據要求編程。
  這塊主要模塊式基礎支持層的在線Python編程系統。
  這裏有一個提交做業的按鈕，這個按鈕的展現主要有三種狀態：disabled/enable/hide：分別表示按鈕展現但不可點擊/展現且可點擊/隱藏。這三種狀態又和編程系統中的Python代碼運行狀態有關係。

最終造成的狀態機以下

這個狀態機能夠結合着在線Python編程系統的狀態機來看。有一點不一樣就是：項目實踐中用戶不能夠「跳過該題」。

通用信息層

這一層主要包括課程中心、用戶中心、路由和獨立出來的數據/狀態管理器（UI和數據分離）。

數據採集

還有一個基礎模塊，數據採集模塊。在三個層均可以使用。支持聲明式埋點和命令式埋點。