Web front end architecture of Xinpai system


This is a python learning system, mainly for adults. The interaction mode is conversational, but the dialogues inside are all built-in through scripts. User throughEnterShow the next dialogue, support voice automatic reading.

Look at the architecture first!

Basic support layer

It provides the general function module for course learning and reuse

  • Image display system. Standardized picture display (limited to 640px * 480px), click to enlarge, switch multiple pictures, and customizable functions (for example, a click button is customized in the knowledge card to locate the learning context of the picture after clicking)

  • Exercise system. Provide standard exercise module for interactive learning and consolidation practice.

  • Online python programming system. The core of the system. It is divided into two modules, editor and online terminal. The process is as follows:
    1. Initialize programming module, link websoket. Websoket is a socket opened by the server, and the service is transferred to the docker image of python (docker provides direct connection function of websoket, but it needs intermediate processing, so there is no direct connection).
    2. Users write code and click Run. Pass the code to the background, save the background as a py file, return the file path and execute the command string.
    3. The front end will execute the command string throughwebsoketPass on toThe image of Pythonfunction. The printing generated in the running process is continuously transmitted to the front end through websoket. After receiving, the front end shows it to the online terminal. The receiving front-end of websocket can be controlled when theBase64 formatThe front end will cache the received image data, and the received image data will not be displayed to the terminal, but will be displayed additionally. Also supporturlFormat (this format is mainly HTML links, which can support the effect of dynamic interaction).
    4. Identify the termination symbol passed by the server through websocket, judge whether there is an error in printing, if there is no error, it will be considered as success, and automatically disconnect websocket. At this point, the user can no longer edit the code line.
    5. If there is an error in printing, the program execution is considered abnormal. It remains abnormal. At this time, the user can edit and run the program again. Or skip, skip as a failure, disconnect websocket.
    In the middle of the next 2-3 steps, there is a process to detect the websocket link. If the websocket is disconnected, the link will be re linked successfully before continuing.

The complete state machine of the programming system is as follows

This state machine has one featureWebsocketIt is transparent to the user, with one prompt at most, but it does not affect the operation. Many products on the market are disconnected websocket, the entire programming module can not be used, users need to manually click and then re link.
Another feature is that if an error is reported during the execution of the program, if the user directly closes the browser instead of clicking to skip (regarded as giving up), the next time the user comes in is the latest final state, and the data is also the data of this state. Different people have different characteristics.

Classroom learning level

This layer is the main part of user learning, including three functional parts

  • Interactive learning. As the main content of classroom learning. The data types supported are rich: text, picture, video, code segment, embedded programming exerciser, topic selection, etc.
    In addition, it also supports bullet screen system, knowledge card (the pictures of the course after learning are arranged for users to review) and voice reading control.

  • Consolidate practice. It can be understood as doing exercises. At present, it supports single choice questions, and the topics and options support the display of text, pictures and code segments.

  • Project practice. Programming challenge exercises, given the task requirements, the user according to the requirements of programming.
    This main module is the online Python Programming System of the basic support layer.
    Here’s oneSubmit assignmentsThe display of this button mainly has three states: Disabled / enable / hide: the button is displayed but can not be clicked / displayed and can be clicked / hidden. These three states are related to the running state of Python code in the programming system.

The final state machine is as follows
This state machine can be combined with the state machine of online python programming system. There is one difference: in the practice of the project, users can’t“Skip the question”。

General information layer

This layer mainly includes course center, user center, routing and independent data / State Manager (UI and data separation).

data acquisition

There is also a basic module, data acquisition module. It can be used in all three layers. Support declarative buried point and command buried point.

Recommended Today

Looking for frustration 1.0

I believe you have a basic understanding of trust in yesterday’s article. Today we will give a complete introduction to trust. Why choose rust It’s a language that gives everyone the ability to build reliable and efficient software. You can’t write unsafe code here (unsafe block is not in the scope of discussion). Most of […]