Programming Exercises: Implement Online IDE Theia

[iyannsch]

This issue is used to discuss and document the idea and progress of adding Theia as a full online IDE in Artemis. There are other issues tackling individual tasks.

• Programming Exercises: Add "online IDE" button to Exercise Details  #8639
• Add Course-Wide Online IDE Settings
• Add Exercise-Wide Online IDE Settings

---

Feature Proposal

Spec Version 0.2.0

Context

Problem

The currently existing online code editor in Artemis is a great tool for beginners to jump into programming exercises.
Although it is beneficial for beginners and lowers their starting barriers, the functionality becomes increasingly limited for more advanced problem statements and use cases. Users cannot access any debugger, install useful plugins, or leverage the help of automatic formatters and linters. Consequently, they transition from the online editor to a locally installed, full-fledged integrated development environment (IDE).
Due to multiple courses per semester, students often need to switch between different IDEs, forcing them to learn their way around multiple environments for the various types of exercises. Moreover, the local coding setup must manage numerous dependencies and projects at the same time, which can lead to incompatibilities between required plugins and extensions. With a local installation, there is no guarantee that the IDE is set up correctly or that the student has not installed any forbidden plugins or extensions.
Especially for K-12 (high school) or young university students, setting up those systems is a daunting onboarding task required before even starting with the challenging course content. They see themselves con- fronted with new and foreign topics like a build system, software plugins, different programming languages, and even the concept of an IDE.

Motivation

Early success and content mastery are pivotal aspects of students’ motivation. The Artemis online code editor supports this by allowing students to jump into the exercise without further setup. However, this approach does not represent the complex environments encountered in more advanced courses or the industry, which typically require an IDE. It is essential to constructively align educational experiences with real-world practices to effectively develop, train, and assess student skills. Setting up a configured IDE can be daunting for young university attendees or K-12 students, raising the barrier to start programming.

Requirements Engineering

Existing (Problematic) Solution / System

Currently, an integrated online code editor ensures a low-barrier entry into technical exercises, particularly for those less familiar with technology or computer science. Unfortunately, it does lack important features like a debugger, linting, and formatting and is not constructively aligned with the future working environment of students.

Proposed System

Implement the online IDE Theia as an optional alternative to the currently existing online code editor in Artemis. Theia mimics the capabilities and looks of the general-purpose IDE Visual Studio Code (VSC) but does not require any download. Consequently, students profit from simplified onboarding as well as advanced functionalities like formatting, linting, and a dedicated debugger.

We propose to implement the following changes:

• Add a new button in the exercise workflow to allow students to open Theia
• Allow instructors to choose from predefined Theia-Blueprints to select, e.g., the fitting programming language for their course
• Implement OpenID Connect (SSO) into the Artemis user management subsystem
• Integrate connection to Theia for passing on existing or new SSO authentication information - this will provide secure and authenticated Theia access
• Evaluate, test, and optimize the performance and limits of the system in order to prepare for productive use in tutorials and examinations. This could include pre-warming Theia's execution environments.

Requirements

Describe the Functional and Non-Functional Requirements of the feature. Stick to the INVEST methodology!

1. FR: <Title>:

1. FR: Open Theia: Students can start a new session of the online IDE.
2. FR: Switch Sessions: Students can work in multiple sessions of the online IDE at the same time.
3. FR: Configure a course's IDE blueprint: Instructors pick a fitting Theia blueprint during exercise creation and can change their choice later on.
4. FR: Automatic Theia Startup: After starting the online IDE from Artemis' views, the student loads into the pre-configured blueprint without further selection of the required prerequisites/blueprints.

1. NFR: <FURPS+ Category>: <Title>:

1. NFR: Usability: Automatic Theia Authentication: User with an active and authenticated session in Artemis, do not need to log into Theia again.
2. NFR: Reliability: Optional OpenID Authentication: Artemis and Theia support OpenID Connect for authenticating their users, but can be configured to work completely without it as well.
3. NFR: Usability: Students can work in Theia within 5 clicks after starting an exercise.
4. NFR: Performance: Session Lifetime: Students use a restored session instead of a new one if the required blueprint matches.

Analysis

Analysis Object Model

What are the involved Analysis Objects?

Dynamic Behavior

Include dynamic models (Activity Diagram, State Chart Diagram, Communication Diagram) here to outline the dynamic nature of the PROBLEM

Activity Diagram showing the new exercise workflow from Login to Artemis to Submit Exercise

System Architecture

Subsystem Decomposition

Show the involved subsystems and their interfaces. Make sure to describe the APIs that you add/change in detail. Model the DTOs you intend to (re)use or change!

Deployment Diagram highlighting the authentication flow and sharing of session data between Artemis and Theia:

Persistent Data Management

Describe the Database changes you intend to make.
Outline new configuration options you plan to introduce
Describe all other data persistence mechanisms you may use.

The online IDE Theia can load various images acting as blueprints for various configurations. In Artemis, there will be multiple base-images for different needs, e.g., various programming languages for different modules (Java in PGDP, OCaml in FPV). We plan on creating all required base-images and want to allow instructors to customize them to their liking. This could include adding preferred plugins to the online IDE used by their students for this course.
We store base-images and customized images in an image registry and information about them in the database.
Regardless on configuration options, instructors must choose which configuration of Theia is used for their exercises. The available options will be shown in the client and the instructor's choice will be saved in the database.

Access Control / Security Aspects

Describe the access control considerations for your feature

The Theia session itself must be secure. This includes that users should not be able to work in another user's environment. Moreover, students must only start Theia sessions with the blueprint opted for in the respective course - this is especially in exam situations important. We want to authenticate users using SSO with KeyCloak's OpenID Connect but also provide an alternative without third-party dependencies. Artemis can pass information to Theia regarding allowed blueprints when the student starts a new session.

Other Design Decisions

Potential topics to discuss here include: WebSockets, testing strategies.

Artemis information inside of Theia needs to be securely transmitted. Submission status, real-time feedback, or exercise information will be shown to the student using a new extension in Theia. Artemis will pass and expose web sockets that the extension can subscribe to.

UI/UX Design

Screenshots of the final UI mockups (mandatory): Please include screenshots to provide a clear and persistent visual reference of the design.

Link to the design mockup (optional): Additionally, you may include a link to the live design mockup (e.g., Figma, Sketch) for a more interactive view. Note that this link is supplementary and should not replace the required screenshots.

[github-actions]

Hello @iyannsch,

Thank you for taking on this issue.

To ensure the Feature Proposal is accurately filled out, we kindly ask you to follow the structure provided.

For detailed instructions and best practices, please refer to our Development Process Guidelines.