Application mobile CodeGym

1. Le problème avec toutes les applications mobiles

Les étudiants de CodeGym réclamaient depuis longtemps une application mobile. Et nous comprenons pourquoi - dans le monde d'aujourd'hui, un téléphone est plus facilement disponible qu'un ordinateur de bureau avec IntelliJ IDEA installé. Il est beaucoup plus facile de réserver 15 minutes plusieurs fois dans la journée que de s'asseoir pour étudier pendant 1 à 2 heures d'affilée.

Apprendre sur CodeGym serait beaucoup plus efficace si nous savions comment utiliser pleinement chaque opportunité qui se présente à nous. Mais comment mettre un IDE sur votre téléphone ?

Pendant longtemps, nous n'avons pas pensé que cela était possible. Cela a été confirmé à plusieurs reprises par nos concurrents : toutes leurs applications d'apprentissage de la programmation se sont débarrassées de l'écriture de code et l'ont remplacée par des tests.

Mais au début de 2019, nous avons fait une percée. Au lieu de répliquer des IDE massifs, nous avons décidé de nous concentrer sur les défis auxquels les utilisateurs sont confrontés lors de l'écriture de code. Notre solution reposait sur quelques principes simples :

• La lecture de code est plus importante que l'écriture de code
• Le code que vous entrez est plus important que la façon dont vous l'entrez
• La gestion du curseur doit être simple et intuitive
• Il n'y a pas une seule et unique façon de résoudre correctement une tâche.

2. Notre solution

Nous avons réussi à créer une solution plutôt belle qui adhère à tous ces principes.

Affichage du code

Tout d'abord, nous avons décidé de créer des modes distincts pour l'affichage du code et l'édition du code. En mode d'affichage du code, balayer fera défiler le texte au lieu de déplacer le curseur. De plus, il est plus pratique d'afficher le code lorsque le clavier n'occupe pas la moitié de l'écran.

Conseils (mots suggérés)

Pour chaque tâche, nous avons préparé un ensemble de mots clés que l'utilisateur peut utiliser pour écrire une solution. Maintenant, vous n'avez plus besoin de taper des mots lettre par lettre. Il vous suffit de cliquer sur les mots suggérés dans le bon ordre et le tour est joué. Cela dit, vous pouvez toujours passer à la manière habituelle de saisir du code, en tapant lettre par lettre sur le clavier.

Il devrait y avoir suffisamment de suggestions pour permettre à l'utilisateur d'écrire sa propre version d'une solution. Mais pas tellement que des mots inutiles ne font que gêner. S'il y a beaucoup de mots suggérés, alors ils devraient être des groupes ; s'il y en a peu, ils doivent être affichés ensemble.

Et, bien sûr, les mots suggérés doivent être uniques pour chaque tâche . Pour chacune des 1500 tâches qui existent sur CodeGym. Nous avons passé deux mois à peaufiner l'algorithme de génération d'indices. Même alors, nous devions encore traiter les suggestions manuellement pour chaque tâche.

Le résultat est impressionnant, même si je pense que nous allons continuer à les améliorer.

Le curseur

La gestion du curseur mérite sa propre histoire. C'est super gênant de déplacer le curseur avec le doigt. Tout d'abord, votre doigt obscurcit le code. Deuxièmement, l'action la plus fréquente avec le curseur consiste à le déplacer de 1 à 2 caractères vers l'arrière ou vers l'avant.

Nous avons créé une interface joystick spéciale qui vous permet de contrôler le curseur sans couvrir le code. Nous avons également ajouté des boutons spéciaux pour déplacer le curseur d'un caractère à la fois . Et tout cela pour que vous puissiez penser au code que vous entrez plutôt qu'au processus d'entrée de ce code !

3. Présentation de l'application mobile

Aujourd'hui l'application mobile comporte 4 sections :

• Cours Java
• Tâches
• Aider
• Groupes

Et voici quelques détails supplémentaires sur chacun d'eux.

Cours Java

La section "Cours Java" affiche une liste de tous les niveaux CodeGym, qui sont regroupés en quêtes. Chaque niveau affiche les leçons correspondantes. Vous pouvez facilement accéder à la leçon la plus récente à l'aide du bouton "Démarrer/Continuer".

Tâches

Cette section affiche toutes les tâches disponibles pour l'utilisateur. Elles sont réparties en trois listes : "nouvelles tâches", "tâches en cours" et "tâches terminées"

Après avoir cliqué sur une tâche spécifique, MobileIDE s'ouvre. C'est ici que vous pouvez afficher les conditions, les exigences et le code de la tâche, et également composer votre solution. Vous pouvez également soumettre une tâche pour vérification en un seul clic.

Aider

Cette section affiche des questions sur les tâches. Vous pouvez afficher les questions posées par d'autres utilisateurs, examiner leur code et leur donner des conseils et des recommandations. C'est presque aussi facile à faire ici que sur le site Web.

Vous pouvez également poser vos propres questions sur les tâches. Votre code sera automatiquement ajouté à votre question - vous n'avez pas besoin de copier quoi que ce soit.

Groupes

Dans la section "Groupes", vous pouvez rejoindre des groupes consacrés à des sujets spécifiques, et également lire et publier des articles. Taper sur votre téléphone n'est pas vraiment pratique, donc cette section se concentre actuellement sur la lecture des documents publiés via la version Web.