新派系统Web前端架构

这是一个Python学习系统，主要提供给成年人。交互方式为对话式，不过里面的对话全部是通过脚本内置好的。用户通过Enter展示下一句对话，支持语音自动朗读。

先看架构!

基础支持层

提供了课程学习回使用到的通用功能模块

• 图片展示系统。标准化图片展示（限制展示图片在640px*480px范围内）、点击放大、多图切换，以及可定制化功能（比如知识卡片中定制了一个点击按钮，点击后定位到图片所在的学习上下文环境）

• 习题系统。提供标准的习题模块，供互动学习、巩固练习使用。

• 在线Python编程系统。该系统的核心。分为两个模块，编辑器和在线终端。流程是：
  1.初始化编程模块\链接websoket，websoket是服务器开的套接字，服务中转到python的docker镜像（docker有提供websoket直连功能，但是由于需要中间处理，所以没有直连）。
  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和数据分离）。

数据采集

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