Aplicația mobilă CodeGym

1. Problema cu toate aplicațiile mobile

Elevii CodeGym cer de multă vreme o aplicație mobilă. Și înțelegem de ce – în lumea de astăzi, un telefon este mai ușor disponibil decât un computer desktop cu IntelliJ IDEA instalat. Este mult mai ușor să rezervi 15 minute de mai multe ori în timpul zilei decât să stai să studiezi timp de 1-2 ore consecutiv.

Învățarea pe CodeGym ar fi mult mai eficientă dacă ne-am da seama cum să folosim pe deplin fiecare oportunitate care ni se prezintă. Dar cum să pui un IDE pe telefon?

Multă vreme, nu am crezut că acest lucru este posibil. Acest lucru a fost confirmat în mod repetat de concurenții noștri: toate aplicațiile lor pentru învățarea programarii au renunțat la scrierea codului și l-au înlocuit cu teste.

Dar apoi, când a început 2019, am făcut o descoperire. În loc să reproducem IDE-uri masive, am decis să ne concentrăm pe provocările cu care se confruntă utilizatorii în timp ce scriu cod. Soluția noastră s-a bazat pe câteva principii simple:

• Citirea codului este mai importantă decât scrierea codului
• Codul pe care îl introduceți este mai important decât modul în care îl introduceți
• Gestionarea cursorului trebuie să fie simplă și intuitivă
• Nu există o singură modalitate de a rezolva o sarcină corect.

2. Soluția noastră

Am reușit să creăm o soluție destul de frumoasă , care să adere la toate aceste principii.

Cod de vizualizare

În primul rând, am decis să facem moduri separate pentru vizualizarea codului și editarea codului. În modul de vizualizare a codului, glisarea va derula textul în loc să miște cursorul. De asemenea, este mai convenabil să vizualizați codul atunci când tastatura nu ocupă jumătate din ecran.

Sugestii (cuvinte sugerate)

Pentru fiecare sarcină, am pregătit un set de cuvinte cheie pe care utilizatorul le poate folosi pentru a scrie o soluție. Acum nu mai trebuie să tastați cuvinte literă cu literă. Doar faceți clic pe cuvintele sugerate în ordinea corectă și ați terminat. Acestea fiind spuse, puteți oricând să treceți la modul obișnuit de introducere a codului, tastând literă cu literă pe tastatură.

Ar trebui să existe suficiente sugestii pentru a permite utilizatorului să scrie propria versiune a unei soluții. Dar nu atât de multe încât cuvintele inutile să stea în cale. Dacă există o mulțime de cuvinte sugerate, atunci ar trebui să fie grupuri; dacă sunt puține, atunci ar trebui să fie afișate împreună.

Și, desigur, cuvintele sugerate trebuie să fie unice pentru fiecare sarcină . Pentru fiecare dintre cele 1500 de sarcini care există pe CodeGym. Am petrecut două luni doar perfecționând algoritmul pentru generarea de indicii. Chiar și atunci, a trebuit să procesăm manual sugestiile pentru fiecare sarcină.

Rezultatul este impresionant, deși cred că le vom îmbunătăți în continuare.

Cursor

Gestionarea cursorului merită propria poveste separată. Este super incomod să muți cursorul cu degetul. În primul rând, degetul ascunde codul. În al doilea rând, cea mai frecventă acțiune cu cursorul este de a-l muta cu 1-2 caractere înainte sau înapoi.

Am creat o interfață specială cu joystick care vă permite să controlați cursorul fără a acoperi codul. De asemenea, am adăugat butoane speciale pentru deplasarea cursorului câte un caracter . Și toate acestea, astfel încât să vă puteți gândi la codul pe care îl introduceți, mai degrabă la procesul de introducere a acelui cod!

3. Prezentare generală a aplicației mobile

Astăzi, aplicația mobilă are 4 secțiuni:

• curs Java
• Sarcini
• Ajutor
• Grupuri

Și iată mai multe detalii despre fiecare dintre ele.

curs Java

Secțiunea „Curs Java” afișează o listă cu toate nivelurile CodeGym, care sunt grupate în misiuni. Fiecare nivel afișează lecțiile corespunzătoare. Puteți merge cu ușurință la cea mai recentă lecție folosind butonul „Start/Continue”.

Sarcini

Această secțiune afișează toate sarcinile disponibile utilizatorului. Acestea sunt împărțite în trei liste: „sarcini noi”, „sarcini în curs” și „sarcini finalizate”

După ce faceți clic pe o anumită sarcină, se deschide MobileIDE . Aici puteți vizualiza condițiile sarcinii, cerințele și codul și, de asemenea, puteți compune soluția. De asemenea, puteți trimite o sarcină pentru verificare cu doar 1 clic.

Ajutor

Această secțiune prezintă întrebări despre sarcini. Puteți vedea întrebările adresate de alți utilizatori, le puteți examina codul și le puteți oferi sfaturi și recomandări. Este aproape la fel de ușor să faci asta aici ca și pe site.

De asemenea, vă puteți adresa propriile întrebări despre sarcini. Codul dvs. va fi adăugat automat la întrebarea dvs. - nu trebuie să copiați nimic nicăieri.

Grupuri

În secțiunea „Grupuri”, vă puteți alătura unor grupuri dedicate unor subiecte specifice și, de asemenea, puteți citi și publica articole. Tastarea de pe telefon nu este chiar convenabilă, așa că această secțiune se concentrează în prezent pe materiale de lectură postate prin versiunea web.