Przejdź do głównej zawartości

Edytor kodu

Sercem platformy Tutor IDE jest profesjonalny edytor kodu dzialajacy bezposrednio w przegladarce. Uczen nie musi niczego instalowac — otwiera strone, loguje sie i od razu moze pisac kod.

Edytor klasy profesjonalnej​

Edytor w Tutor IDE to ten sam silnik, ktory napedza Visual Studio Code — najpopularniejsze narzedzie zawodowych programistow na swiecie. Uczniowie pracuja w prawdziwym, profesjonalnym srodowisku, ale w wersji dostosowanej do nauki.

Podswietlanie skladni​

Kod wyswietla sie w kolorach, ktore pomagaja rozroznic tagi HTML, wlasciwosci CSS i instrukcje JavaScript. Dzięki temu łatwiej zauważyć błędy i zrozumieć strukturę kodu.

Podpowiedzi i autouzupełnianie​

Edytor podpowiada nazwy tagów HTML, właściwości CSS i funkcje JavaScript w trakcie pisania. Automatycznie zamyka nawiasy, cudzysłowy i tagi — mniej literówek, więcej tworzenia.

Emmet — szybkie pisanie HTML​

Edytor obsługuje Emmet — system skrótów, który przyspiesza pisanie kodu HTML. Na przykład wpisanie div.container>h1+p i naciśnięcie Tab automatycznie rozwija się w pełną strukturę HTML z odpowiednimi tagami i klasami. To narzędzie, z którego korzystają zawodowi programiści na co dzień.

Skróty klawiszowe​

Edytor obsługuje bogaty zestaw skrótów klawiszowych, które przyspieszają pracę:

  • Ctrl+S / Cmd+S — zapisanie pliku
  • Ctrl+Enter / Cmd+Enter — uruchomienie kodu (Run)
  • Ctrl+Z / Cmd+Z — cofanie zmian
  • Ctrl+C / Ctrl+V — kopiowanie i wklejanie

Pełną listę skrótów można wyświetlić naciskając Cmd+? (Mac) lub Ctrl+? (Windows).

Typy projektów​

Tutor IDE obsługuje trzy odrębne typy projektów, z których każdy ma dostosowane środowisko pracy:

HTML — strony internetowe​

Tworzenie stron internetowych z wykorzystaniem HTML, CSS i JavaScript. Edytor wyświetla podgląd strony na żywo obok kodu — każda zmiana jest widoczna natychmiast po zapisaniu pliku.

Python — programowanie ogólne​

Projekty Pythona uruchamiane są bezpośrednio w przeglądarce dzięki Pyodide — pełnemu interpreterowi Pythona skompilowanemu do WebAssembly. Uczniowie mogą pisać skrypty, pracować z pętlami, warunkami, funkcjami i strukturami danych — bez instalowania czegokolwiek na komputerze.

Python Turtle — grafika żółwia​

Specjalny tryb dla projektów z biblioteką Turtle. Edytor automatycznie wykrywa kod wykorzystujący żółwia i wyświetla dynamiczne płótno graficzne obok kodu. Uczniowie mogą rysować kształty, wzory i animacje za pomocą prostych komend — to doskonały sposób na wizualną naukę programowania.

Terminal Pythona (REPL)​

Tutor IDE zawiera wbudowany terminal Pythona oparty na Pyodide. Uczniowie mogą wpisywać polecenia Pythona i natychmiast widzieć wyniki — idealny sposób na eksperymentowanie z kodem, testowanie wyrażeń i naukę krok po kroku. Terminal działa w całości w przeglądarce, bez potrzeby łączenia się z serwerem.

Podgląd na żywo​

Obok edytora wyświetlany jest podgląd strony. Uczeń pisze kod po lewej stronie i od razu widzi efekt po prawej — każda zmiana w HTML czy CSS natychmiast pojawia się w podglądzie po zapisie pliku.

To pozwala eksperymentować i uczyć się metodą prób — „zmienię kolor na czerwony i zobaczę, co się stanie".

Podgląd w ramkach urządzeń​

Edytor oferuje podgląd projektu w ramkach symulujących różne urządzenia — komputer, tablet i telefon. Dzięki temu uczeń może sprawdzić, jak jego strona wygląda na różnych ekranach, bez opuszczania platformy. To praktyczna nauka responsywnego projektowania stron.

Konsola​

Panel konsoli przechwytuje i wyświetla komunikaty z kodu JavaScript (np. wyniki console.log). Dzięki temu uczeń może testować swoje skrypty i śledzić, co robi jego kod — bez konieczności otwierania narzędzi deweloperskich przeglądarki.

Drzewo plików​

Każdy projekt ma przejrzystą strukturę plików i folderów widoczną w panelu bocznym:

  • Ikony plików — HTML, CSS, JavaScript, Python, obrazy i inne typy plików mają własne ikony, dzięki czemu łatwo je rozpoznać
  • Foldery — uczniowie mogą organizować pliki w folderach, tak jak w prawdziwym projekcie
  • Przeciągnij i upuść — pliki można przenosić między folderami za pomocą myszy
  • Plik główny — index.html jest oznaczony jako punkt startowy projektu

Zarządzanie plikami​

  • Tworzenie plików i folderów — uczeń dodaje nowe pliki HTML, CSS, JS lub Python jednym kliknięciem
  • Przesyłanie plików binarnych — obrazy, czcionki, pliki PDF, wideo i audio można przesłać bezpośrednio do projektu
  • Przeciąganie plików — pliki można upuścić bezpośrednio na drzewo plików, aby je przesłać do projektu (drag & drop)
  • Usuwanie — niepotrzebne pliki i foldery można łatwo usunąć

Wyszukiwanie w kodzie​

Edytor posiada wbudowaną funkcję wyszukiwania w plikach, która pozwala szybko odnaleźć fragmenty kodu, nazwy zmiennych, selektory CSS czy tagi HTML w całym projekcie. To niezwykle przydatne narzędzie przy większych projektach, gdzie ręczne przeglądanie plików zajęłoby zbyt dużo czasu.

Skalowalne panele​

Interfejs edytora składa się z paneli o zmiennych rozmiarach — uczeń może przeciągnąć separator między edytorem a podglądem, aby dostosować proporcje do swoich potrzeb. Kto potrzebuje więcej miejsca na kod, poszerza edytor; kto chce większy podgląd, poszerza panel podglądu. Rozmiary paneli oparte są na bibliotece react-resizable-panels.

Edytor mobilny​

Tutor IDE działa również na urządzeniach mobilnych. Na ekranach mniejszych niż 768 px edytor przełącza się w tryb jednopanelowy z dolnym paskiem zakładek:

  • Kod — widok edytora kodu
  • Podgląd — podgląd strony lub wynik Pythona
  • Konsola — panel konsoli JavaScript

Drzewo plików otwiera się jako wysuwany panel boczny. Dzięki temu uczniowie mogą pracować nad projektami nawet na telefonie lub tablecie.

Wyszukiwanie projektów​

Na pulpicie nawigacyjnym uczeń może szybko odnaleźć swoje projekty dzięki wyszukiwarce i filtrowaniu po tagach. To szczególnie przydatne, gdy liczba projektów rośnie.

Przestrzeń dyskowa​

Każdy uczeń ma przydzieloną przestrzeń dyskową na swoje projekty. Jej wielkość zależy od planu organizacji — od 25 MB w planie darmowym do 100 MB w planie szkolnym. Aktualny stan wykorzystania miejsca jest widoczny na pulpicie.

Eksport projektu​

Uczeń może pobrać cały projekt jako plik ZIP na swój komputer. Plik zawiera wszystkie pliki projektu z zachowaniem struktury folderów — gotowy do otwarcia w dowolnym edytorze lub do przesłania na inny hosting.