New plugin from Stepik.org for IntelliJ IDEA
In September, we released a plugin for IntelliJ IDEA with support for Python and Java. On the development process, and why the plugin will simplify the lives of students programming on Stepik.org, we will discuss in this article.
The plugin, as in the case of Stepik Telegram bot , and mobile applications for iOS and Android, was designed by our new intern Peter Bogdanov , a student at the Computer Science Center in St. Petersburg.
Why did we do it? Of course, in order to simplify the life of students, not to force them to perform their routine operations, to allow them to concentrate fully on the learning process.
')
The first difficulty a student encounters while completing a programming course on the platform is the need to copy-paste to the browser from the IDE. Programming in a browser is not easy: you cannot run the code and check it locally, there is no autocompletion and refactoring, and much more. Also, programming in the IDE, you must constantly pry into the browser to view the conditions of the problem or copy the Sample Input.
The second difficulty is the problem of organizing code in a project. Students typing the code in the sandbox, as a rule, solve only the current task and do not think about where they will solve the next task. And most likely, the student either does not save the previous solutions, or his files are named like “new_file” “new_file7” “new_file777”. All this complicates navigation and makes it difficult to reuse the code.
In June of this year, we released a plugin that supported only Java, logged into the project manager, and interacted with Stepik.org using context menus. But he also had significant flaws in architecture.
As a convenient platform for learning programming, it is important for us to support as many programming languages ​​as possible. A plug-in can be divided into two parts: independent of the supported language (authorization, interaction with the API, settings), and directly language support (mainly, project construction).
Since the old plugin was monolithic, it was not rational to add support for new languages ​​and it was not possible to write new plugins for other IDEs. Therefore, it was decided to switch to the core of learning plugins from the PyCharm command .
To prevent user data from being lost upon restarting, it must be saved. To do this, IDEA has an interface PersistentStateComponent , with which you can serialize into .xml the class that interests you. This is not specified in the documentation, but it is assumed that the class implementing PersistentStateComponent is a singleton that needs to be instantiated in one of three ways, by level of components: Application level, Project level and Module level.
In the first case, the singleton will be the only one for the whole plugin, and it is reasonable to store global settings in it.
In other cases, singletons can be much and they will be serialized in ./.idea. It is at the project level that we store user data (name, token, etc.), and almost all the meta information about the course.
A reasonable question is where to store the data if no project is open? For such a case in IDEA there is a defaultProject, which can be obtained as follows:
From there we take credentials when we create a project, and that is why we ask the user to close all projects before logging in to the settings explicitly.
You can implement this interface in two ways (for more details, see the documentation ), besides you need to declare this component in plugin.xml (the most important .xml) according to the level, for example:
In general, having implemented any interface from the IntelliJ API, it must be declared in plugin.xml.
And for storing passwords, you can use the built-in password manager PasswordSafe . It is because of the appeal to him from time to time there are such windows:
Stepik.org supports full OAuth 2 authentication. But in the plugin, so far, only authorization via login and password is implemented. With other types of authorization there is a problem, in that you have to raise the server to localhost to listen for redirected_url .
To communicate with the Stepic in the kernel, the EduStepicConnector class already existed, which contained a large set of static methods, and an instance of HttpClient for executing requests. This class was decided to be divided into 4 classes:
In Client Init, HttpClient is initialized and the problem with certificate validation is solved. Stepic has a certificate from Let's Encrypt, and IdenTrus CA was added only to Java 8u101. StepikConnectorLogin is responsible for authorization. And the rest of the classes can already make requests that require authorization and no.
In such a scheme there can be only one active client, but it is not difficult to expand it into several, creating instances of authorized clients. However, we don’t want to indulge students leading a double life on Stepik :)
The construction of the project tree has changed a lot relative to the first version of the plugin, but weakly relative to the kernel.
Now the course is downloaded, cached and only then built from the cache. It was implemented because of the slow construction of the project: to download the entire course, you need to make about 100 requests. Here, significant acceleration was achieved by combining many id into one API request.
The June version of the plugin supported Yandex.Translate to translate course titles, lessons, and sections into English. This was necessary so that the package names for Java were in English, and the specific file corresponded to the step. And it was a bit uncomfortable. I had to edit the file before sending and impose additional restrictions.
Now there is no such need, because the step level now corresponds to the directory in which the source is located. But, nevertheless, directories now have working names (lesson1 / task1), and with the help of TreeStructreProvider , dummy directory names are changed and they are displayed in the course language.
TreeStructureProvider is enabled / disabled.
With the help of TreeStructureProvider, the ./src/hide directory is also hidden, in which step templates are stored in different languages. And when you change the language files are moved.
The picture shows all the educational plug-ins from JetBrains known to us, as well as the Stepic plugin and its dependencies. Lilac shows plugins for PyCharm. It can be seen that our plugin needs 3 more plugins to work. Python dependency is not yet properly configured (so you have to install it manually). Interestingly, for the Community and Ultimate IDEA rely different plugins. Edu-IntelliJ is just an extension point for a project manager. Perhaps we will remove this dependence.
And the most important dependence on the kernel remains: the current changes in the kernel are not yet uploaded to the official repository, so you have to manually install the unstable version. In this case, the plug-ins Edu-Java and Edu-Kotlin will not work for you yet.
The first thing we added is authorization in the settings, a la GitHub.
But, if you still miss this action, you will encounter more intrusive authorization.
When building a project, you can select a course from the list of courses to which you have subscribed. But this does not mean that they are all compatible with the plugin. To create a course without errors, there must be at least one step in it with a programming task.
In this window, you can select the desired programming language, but if it is not available, the most popular one will be selected.
You can also download the course by reference, while if you have not previously subscribed to the course, a subscription occurs. In the field for the link, you can enter either the course id or any link from the course.
The status of the step is displayed in the project tree:
And the main actions are on the Task Description panel on the right.
Among them: sending the solution, the previous / next step, start over (not yet available), download the last solution and change the language.
Stepik.org does not yet have an API to understand whether a particular course is compatible with a third-party application, so it’s helpful to understand how everything works.
After logging in, the plugin downloads the project tree; for this, it collects information about all the steps in the open part of the course. It then saves data only for supported steps. At the moment, these are only “code” tasks. However, this type of task has a feature - it uses hidden templates. Hidden patterns are pieces of code that are added to the beginning and end of the file. And by definition they are not available to the student.
Consider the example of Java. With the help of templates, the teacher can create tasks for the implementation of a separate method, and the method wrapper in the class is already on the server. Thus, the student will not compile the correct solution, because all Java code must be in class.
But the good news is that there are not so many such tasks. They are most often found in language courses.
Therefore, the plugin is ideal for the course on algorithms and Hadoop .
In the short term, we want to develop support for various programming languages. At the moment, it is quite easy to add R, Scala to Stepik Union, but, for example, Haskell support is still too raw. And with C ++ it’s harder, you’ll have to write a separate plugin for CLion.
In addition, we are considering the implementation of plugin support for other types of tasks.
We thank the PyCharm team for their assistance and high-quality core.
We will be happy to answer questions, get feedback, suggestions and constructive criticism of the plugin in the comments and in the discussion with the author of the VK plugin .
Links: Stepik.org plugins , StepikOrg / intellij-community , Stepik API doc , IntelliJ Platform SDK Documentation , Repository for IntelliJ Platform SDK Documentation .
The plugin, as in the case of Stepik Telegram bot , and mobile applications for iOS and Android, was designed by our new intern Peter Bogdanov , a student at the Computer Science Center in St. Petersburg.
Purpose of the plugin
Why did we do it? Of course, in order to simplify the life of students, not to force them to perform their routine operations, to allow them to concentrate fully on the learning process.
')
The first difficulty a student encounters while completing a programming course on the platform is the need to copy-paste to the browser from the IDE. Programming in a browser is not easy: you cannot run the code and check it locally, there is no autocompletion and refactoring, and much more. Also, programming in the IDE, you must constantly pry into the browser to view the conditions of the problem or copy the Sample Input.
The second difficulty is the problem of organizing code in a project. Students typing the code in the sandbox, as a rule, solve only the current task and do not think about where they will solve the next task. And most likely, the student either does not save the previous solutions, or his files are named like “new_file” “new_file7” “new_file777”. All this complicates navigation and makes it difficult to reuse the code.
Development process
In June of this year, we released a plugin that supported only Java, logged into the project manager, and interacted with Stepik.org using context menus. But he also had significant flaws in architecture.
As a convenient platform for learning programming, it is important for us to support as many programming languages ​​as possible. A plug-in can be divided into two parts: independent of the supported language (authorization, interaction with the API, settings), and directly language support (mainly, project construction).
Since the old plugin was monolithic, it was not rational to add support for new languages ​​and it was not possible to write new plugins for other IDEs. Therefore, it was decided to switch to the core of learning plugins from the PyCharm command .
Consider in detail:
- Saving user data
- Authorization and network communication
- Building a project tree
Saving user data
To prevent user data from being lost upon restarting, it must be saved. To do this, IDEA has an interface PersistentStateComponent , with which you can serialize into .xml the class that interests you. This is not specified in the documentation, but it is assumed that the class implementing PersistentStateComponent is a singleton that needs to be instantiated in one of three ways, by level of components: Application level, Project level and Module level.
In the first case, the singleton will be the only one for the whole plugin, and it is reasonable to store global settings in it.
In other cases, singletons can be much and they will be serialized in ./.idea. It is at the project level that we store user data (name, token, etc.), and almost all the meta information about the course.
A reasonable question is where to store the data if no project is open? For such a case in IDEA there is a defaultProject, which can be obtained as follows:
ProjectManager.getInstance().getDefaultProject() From there we take credentials when we create a project, and that is why we ask the user to close all projects before logging in to the settings explicitly.
You can implement this interface in two ways (for more details, see the documentation ), besides you need to declare this component in plugin.xml (the most important .xml) according to the level, for example:
<projectService serviceInterface="com.jetbrains.edu.learning.StudyTaskManager" serviceImplementation="com.jetbrains.edu.learning.StudyTaskManager"/> In general, having implemented any interface from the IntelliJ API, it must be declared in plugin.xml.
And for storing passwords, you can use the built-in password manager PasswordSafe . It is because of the appeal to him from time to time there are such windows:
Authorization and network communication
Stepik.org supports full OAuth 2 authentication. But in the plugin, so far, only authorization via login and password is implemented. With other types of authorization there is a problem, in that you have to raise the server to localhost to listen for redirected_url .
To communicate with the Stepic in the kernel, the EduStepicConnector class already existed, which contained a large set of static methods, and an instance of HttpClient for executing requests. This class was decided to be divided into 4 classes:
In Client Init, HttpClient is initialized and the problem with certificate validation is solved. Stepic has a certificate from Let's Encrypt, and IdenTrus CA was added only to Java 8u101. StepikConnectorLogin is responsible for authorization. And the rest of the classes can already make requests that require authorization and no.
In such a scheme there can be only one active client, but it is not difficult to expand it into several, creating instances of authorized clients. However, we don’t want to indulge students leading a double life on Stepik :)
Building a project tree
The construction of the project tree has changed a lot relative to the first version of the plugin, but weakly relative to the kernel.
Now the course is downloaded, cached and only then built from the cache. It was implemented because of the slow construction of the project: to download the entire course, you need to make about 100 requests. Here, significant acceleration was achieved by combining many id into one API request.
The June version of the plugin supported Yandex.Translate to translate course titles, lessons, and sections into English. This was necessary so that the package names for Java were in English, and the specific file corresponded to the step. And it was a bit uncomfortable. I had to edit the file before sending and impose additional restrictions.
Now there is no such need, because the step level now corresponds to the directory in which the source is located. But, nevertheless, directories now have working names (lesson1 / task1), and with the help of TreeStructreProvider , dummy directory names are changed and they are displayed in the course language.
TreeStructureProvider is enabled / disabled.
With the help of TreeStructureProvider, the ./src/hide directory is also hidden, in which step templates are stored in different languages. And when you change the language files are moved.
Plugins dependency
The picture shows all the educational plug-ins from JetBrains known to us, as well as the Stepic plugin and its dependencies. Lilac shows plugins for PyCharm. It can be seen that our plugin needs 3 more plugins to work. Python dependency is not yet properly configured (so you have to install it manually). Interestingly, for the Community and Ultimate IDEA rely different plugins. Edu-IntelliJ is just an extension point for a project manager. Perhaps we will remove this dependence.
And the most important dependence on the kernel remains: the current changes in the kernel are not yet uploaded to the official repository, so you have to manually install the unstable version. In this case, the plug-ins Edu-Java and Edu-Kotlin will not work for you yet.
New UI
The first thing we added is authorization in the settings, a la GitHub.
But, if you still miss this action, you will encounter more intrusive authorization.
When building a project, you can select a course from the list of courses to which you have subscribed. But this does not mean that they are all compatible with the plugin. To create a course without errors, there must be at least one step in it with a programming task.
In this window, you can select the desired programming language, but if it is not available, the most popular one will be selected.
You can also download the course by reference, while if you have not previously subscribed to the course, a subscription occurs. In the field for the link, you can enter either the course id or any link from the course.
The status of the step is displayed in the project tree:
And the main actions are on the Task Description panel on the right.
Among them: sending the solution, the previous / next step, start over (not yet available), download the last solution and change the language.
Compatibility
Stepik.org does not yet have an API to understand whether a particular course is compatible with a third-party application, so it’s helpful to understand how everything works.
After logging in, the plugin downloads the project tree; for this, it collects information about all the steps in the open part of the course. It then saves data only for supported steps. At the moment, these are only “code” tasks. However, this type of task has a feature - it uses hidden templates. Hidden patterns are pieces of code that are added to the beginning and end of the file. And by definition they are not available to the student.
Consider the example of Java. With the help of templates, the teacher can create tasks for the implementation of a separate method, and the method wrapper in the class is already on the server. Thus, the student will not compile the correct solution, because all Java code must be in class.
But the good news is that there are not so many such tasks. They are most often found in language courses.
Therefore, the plugin is ideal for the course on algorithms and Hadoop .
Future plans
In the short term, we want to develop support for various programming languages. At the moment, it is quite easy to add R, Scala to Stepik Union, but, for example, Haskell support is still too raw. And with C ++ it’s harder, you’ll have to write a separate plugin for CLion.
In addition, we are considering the implementation of plugin support for other types of tasks.
Thanks
We thank the PyCharm team for their assistance and high-quality core.
Conclusion
We will be happy to answer questions, get feedback, suggestions and constructive criticism of the plugin in the comments and in the discussion with the author of the VK plugin .
Links: Stepik.org plugins , StepikOrg / intellij-community , Stepik API doc , IntelliJ Platform SDK Documentation , Repository for IntelliJ Platform SDK Documentation .
Source: https://habr.com/ru/post/310204/
All Articles