2020年9月17日星期四

新派系统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是断开的状态,则重新链接成功后再继续往下走。

编程系统的完整的状态机如下
在线Python编程系统状态机

这个状态机有一个特点Websocket对用户来说是透明的,最多就一个提示,但不影响操作。市面上很多产品都是Websocket断开后,整个编程模块就用不了,需要用户手动点击后重新链接。
还有一个特点是,如果程序执行报错,如果用户没有点击跳过而是直接关闭浏览器(视为放弃),用户下次进来是最近的一个最终状态,数据也是这个状态的数据。这个特点仁者见仁吧。

课堂学习层

这一层是用户学习的主要板块,包括三个功能部分

  • 互动学习。作为课堂学习的主要内容。支持的数据类型丰富:文本、图片、视频、代码段、内嵌编程练习器、选题题等。
    额外还支持的功能有弹幕系统、知识卡片(用户学习过后的课程图片整理,便于用户复习)、语音朗读控制。

  • 巩固练习。可以理解为做题练习。目前支持单选题,题目以及选项支持文本、图片、代码段展示。

  • 项目实战。编程挑战练习,给定任务要求,用户根据要求编程。
    这块主要模块式基础支持层的在线Python编程系统。
    这里有一个提交作业的按钮,这个按钮的展示主要有三种状态:disabled/enable/hide:分别表示按钮展示但不可点击/展示且可点击/隐藏。这三种状态又和编程系统中的Python代码运行状态有关系。

最终形成的状态机如下
按钮状态机
这个状态机可以结合着在线Python编程系统的状态机来看。有一点不同就是:项目实践中用户不可以"跳过该题"。

通用信息层

这一层主要包括课程中心、用户中心、路由和独立出来的数据/状态管理器(UI和数据分离)。

数据采集

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

新派系统Web前端架构

沃尔码:https://www.ikjzd.com/w/220
2017 • Cdiscount 中国区招商峰会:https://www.kjyunke.com/courses/484
2017亚马逊贺岁沙龙:https://www.kjyunke.com/courses/352
抖音海外版"Tiktok"爆红,它能成为跨境卖家的新营销工具吗?:https://www.ikjzd.com/home/823
CCC认证的范围,你做了吗?:https://www.ikjzd.com/home/127586
XShoppy:https://www.ikjzd.com/w/2429

史泰博:https://www.ikjzd.com/w/2112
西农:https://www.ikjzd.com/w/1368
常见问题大集结:https://www.kjyunke.com/courses/221
优化亚马逊搜索内容?这些关键词工具你应该用得上:https://www.ikjzd.com/tl/107641
海外版抖音TikTok出海第三年,各项大数据表现怎么样?:https://www.ikjzd.com/home/121391
Amazon Electronics类四大榜单整合 ------ 每小时自动更新 --- 附件为入口:https://www.ikjzd.com/tl/3022

没有评论:

发表评论