1. The problem with all mobile apps

CodeGym students have been asking for a mobile app for a long time. And we understand why — in today's world, a phone is more readily available than a desktop computer with IntelliJ IDEA installed. It is much easier to set aside 15 minutes several times during the day than it is to sit down to study for 1-2 hours straight.

Learning on CodeGym would be much more effective if we figured out how to fully use every opportunity that presents itself to us. But how to put an IDE on your phone?

For a long time, we didn't think this was possible. This was repeatedly confirmed by our competitors: all their apps for learning programming dispensed with writing code and replaced it with tests.

But then as 2019 began, we made a breakthrough. Instead of replicating massive IDEs, we decided to focus on the challenges users face while writing code. Our solution was based on a few simple principles:

  • Reading code is more important than writing code
  • The code you enter is more important than the way you enter it
  • Managing the cursor must be simple and intuitive
  • There is no one and only way to solve a task correctly.

2. Our solution

We managed to create a rather beautiful solution that adheres to all these principles.

Viewing code

First, we decided to make separate modes for viewing code and editing code. In code viewing mode, swiping will scroll the text instead of moving the cursor. Also, it's more convenient to view code when the keyboard isn't taking up half the screen.

Hints (suggested words)

For each task, we prepared a set of keywords that the user can use to write a solution. Now you don't need to type in words letter by letter. You just click on the suggested words in the correct order, and you're done. That said, you can always switch over to the usual way of entering code, typing letter by letter on the keyboard.

There should be enough suggestions to allow the user to write his or her own version of a solution. But not so many that unnecessary words just get in the way. If there are lots of suggested words, then they should be groups; if there are few, then they should be displayed together.

And, of course, the suggested words must be unique for each task. For each of the 1500 tasks that exist on CodeGym. We spent two months just refining the algorithm for generating hints. Even then, we still had to process the suggestions manually for each task.

The result is impressive, though I think we will continue to improve them.

Java course android 1

Cursor

Managing the cursor deserves its own separate story. It's super inconvenient to move the cursor with your finger. First, your finger obscures the code. Second, the most frequent action with the cursor is to move it 1-2 characters backward or forward.

We created a special joystick interface that lets you control the cursor without covering the code. We also added special buttons for moving the cursor one character at a time. And all this so you are able to think about the code you are entering rather the process of entering that code!


3. Overview of the mobile app

Today the mobile app has 4 sections:

  • Java course
  • Tasks
  • Help
  • Groups

And here are a few more details about each of them.

Java course

The "Java course" section displays a list of all the CodeGym levels, which are grouped into quests. Each level displays the corresponding lessons. You can easily go to the most recent lesson using the "Start/Continue" button.

Java course android

Tasks

This section displays all the tasks available to the user. They are divided into three lists: "new tasks", "tasks in progress" and "completed tasks"

Java course android tasks

After clicking on a specific task, MobileIDE opens. This is where you can view the task conditions, requirements, and code, and also compose your solution. You can also submit a task for verification in just 1 click.

Help

This section shows questions about tasks. You can view questions asked by other users, examine their code, and give them advice and recommendations. It's almost as easy to do that here as it is on the website.

You can also ask your own questions about tasks. Your code will be added to your question automatically — you don't need to copy anything anywhere.

Groups

In the "Groups" section, you can join groups devoted to specific topics, and also read and publish articles. Typing on your phone isn't really convenient, so this section currently focuses on reading materials posted through the web version.