新派系统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和数据分离）。

数据采集

还有一个基础模块，数据采集模块。在三个层均可以使用。支持声明式埋点和命令式埋点。