Collaborative Editing
Click Invite button to create a new session.
Existing code in editor will be automatically synced to the server.
If there is no existing code, "// Collaborative Editing Mode" will be the initial value.
A unique session id will be provided.
Share this id to your friends/students to start collaborative editing!
Click Join button and key in a valid session id to join the shared session to start collaborative editing!
Invalid id will be automatically detected and blocked.
Click Leave button to disconnect from session.
Existing code in editor will be kept as status quo.
Color indicator on Leave button indicates the connection status, green for online and red for offline.
Click Auto-run button to enter the auto-tun mode.
Codes in editor will be evaluated if syntatically correct.
This allows real-time interaction among multiple users in the same shared session.
The info annotation is changed to error annotation to better suit Source instead of native JavaScript.
Operational Transformation (OT) is the underlying technique used in this project.
sharedb-ace is used to provide the linkage between our backend server and the client's frontend editor.
Frontend is developed using React.js.
Backend is developed using Koa.js, deployed on AWS.
Server is rebooted weekly on Sunday morning at 4am, so as to prevent memory overflow while minimising impacts on daily uses.
Refer to https://github.com/source-academy/sharedb-ace-backend for more details.
While this project has achieved a robust product to support collaborative editing in Source Academy, there are many more improvements that can be made to it.
This will allow the session owner to grant read/edit permission to other different users.
This feature is useful for lecturers to demonstrate live coding in lecture setting.
This will allow users to know where the other users are currently editing.
This feature is useful in Studio setting or group project setting.
This will allow the ace editor to transform into truly a Source editor.
This will allow users a better experience coding in ace editor.
An attempt has been made to implement this feature in our project.
However, due to time constraints and complexity involved, we decided to keep it as a future improvement.
Refer to https://github.com/jiayushe/cadet-frontend for more details.