Aplicativo móvel CodeGym

1. O problema com todos os aplicativos móveis

Os alunos do CodeGym pedem um aplicativo móvel há muito tempo. E nós entendemos o porquê — no mundo de hoje, um telefone está mais prontamente disponível do que um computador desktop com o IntelliJ IDEA instalado. É muito mais fácil reservar 15 minutos várias vezes durante o dia do que sentar para estudar por 1-2 horas seguidas.

Aprender no CodeGym seria muito mais eficaz se descobríssemos como aproveitar todas as oportunidades que se apresentam a nós. Mas como colocar um IDE no seu celular?

Por muito tempo, não pensamos que isso fosse possível. Isso foi repetidamente confirmado por nossos concorrentes: todos os seus aplicativos para aprender programação dispensaram a escrita de código e o substituíram por testes.

Mas então, quando 2019 começou, fizemos um avanço. Em vez de replicar IDEs massivos, decidimos nos concentrar nos desafios que os usuários enfrentam ao escrever código. Nossa solução foi baseada em alguns princípios simples:

• Ler código é mais importante do que escrever código
• O código que você insere é mais importante do que a forma como você o insere
• A gestão do cursor deve ser simples e intuitiva
• Não existe uma única maneira de resolver uma tarefa corretamente.

2. Nossa solução

Conseguimos criar uma solução bastante bonita que segue todos esses princípios.

Visualizando código

Primeiro, decidimos fazer modos separados para visualizar o código e editar o código. No modo de visualização de código, deslizar rolará o texto em vez de mover o cursor. Além disso, é mais conveniente visualizar o código quando o teclado não ocupa metade da tela.

Dicas (palavras sugeridas)

Para cada tarefa, preparamos um conjunto de palavras-chave que o usuário pode usar para escrever uma solução. Agora você não precisa digitar palavras letra por letra. Basta clicar nas palavras sugeridas na ordem correta e pronto. Dito isso, você sempre pode alternar para a maneira usual de inserir o código, digitando letra por letra no teclado.

Deve haver sugestões suficientes para permitir que o usuário escreva sua própria versão de uma solução. Mas não tantos que palavras desnecessárias apenas atrapalhem. Se houver muitas palavras sugeridas, elas devem ser grupos; se houver poucos, eles devem ser exibidos juntos.

E, claro, as palavras sugeridas devem ser exclusivas para cada tarefa . Para cada uma das 1500 tarefas que existem no CodeGym. Passamos dois meses apenas refinando o algoritmo para gerar dicas. Mesmo assim, ainda tínhamos que processar as sugestões manualmente para cada tarefa.

O resultado é impressionante, embora eu ache que vamos continuar a melhorá-los.

Cursor

Gerenciar o cursor merece sua própria história separada. É super inconveniente mover o cursor com o dedo. Primeiro, seu dedo obscurece o código. Em segundo lugar, a ação mais frequente com o cursor é movê-lo 1-2 caracteres para trás ou para frente.

Criamos uma interface de joystick especial que permite controlar o cursor sem cobrir o código. Também adicionamos botões especiais para mover o cursor um caractere por vez . E tudo isso para que você possa pensar no código que está digitando e não no processo de digitação desse código!

3. Visão geral do aplicativo móvel

Hoje, o aplicativo móvel tem 4 seções:

• curso de java
• Tarefas
• Ajuda
• Grupos

E aqui estão mais alguns detalhes sobre cada um deles.

curso de java

A seção "Curso de Java" exibe uma lista de todos os níveis do CodeGym, agrupados em missões. Cada nível exibe as lições correspondentes. Você pode ir facilmente para a lição mais recente usando o botão "Iniciar/Continuar".

Tarefas

Esta seção exibe todas as tarefas disponíveis para o usuário. Eles são divididos em três listas: "novas tarefas", "tarefas em andamento" e "tarefas concluídas"

Depois de clicar em uma tarefa específica, o MobileIDE é aberto. É aqui que você pode visualizar as condições, requisitos e código da tarefa e também compor sua solução. Você também pode enviar uma tarefa para verificação com apenas 1 clique.

Ajuda

Esta seção mostra perguntas sobre tarefas. Você pode ver as perguntas feitas por outros usuários, examinar seu código e dar-lhes conselhos e recomendações. É quase tão fácil fazer isso aqui quanto no site.

Você também pode fazer suas próprias perguntas sobre as tarefas. Seu código será adicionado à sua pergunta automaticamente - você não precisa copiar nada em nenhum lugar.

Grupos

Na seção "Grupos", você pode participar de grupos dedicados a temas específicos, além de ler e publicar artigos. Digitar em seu telefone não é muito conveniente, portanto, esta seção atualmente se concentra na leitura de materiais publicados na versão da web.