webIDE turtleSpaces to pełne środowisko Logo turtleSpaces działające w przeglądarce. Możesz pisać kod za pomocą bloków albo jako tekst, od razu go uruchamiać i patrzeć, jak żółwie rysują w 3D tuż obok. Niczego nie trzeba instalować, a na początek nie potrzebujesz konta.
Układ ekranu
Ekran jest podzielony na dwie części:
- Po lewej jest nagłówek projektu i rząd kart paneli: Blocks (bloki), Text (tekst), Help (pomoc), History (historia), Printer (drukarka) i Debug (debugowanie). Po zalogowaniu pojawia się siódma karta, Claude, z asystentem AI.
- Po prawej jest widok 3D, w którym rysują żółwie, pod nim konsola, a na samym dole przyciski sterowania.
U góry biegnie pasek menu.
Panele
Blocks (bloki)
Buduj programy, przeciągając bloki z palety po lewej. Bloki są pogrupowane w kategorie (ruch i położenie, pisak i kolor, warunki i sterowanie, procedury, wyzwalacze i inne), a paletę można przeszukiwać. Listy rozwijane nad obszarem roboczym wybierają edytowanego żółwia i procedurę, a przycisk ▶ ją uruchamia. Zmiany w blokach działają od razu.
Bloki i tekst to dwa widoki tego samego programu: to, co zbudujesz z bloków, można otworzyć jako tekst, i odwrotnie.
Text (tekst)
Edytor kodu z kolorowaniem składni, automatycznymi wcięciami i podpowiadaniem kodu. Lista obok kart wybiera, co edytujesz: Full Workspace pokazuje wszystkie żółwie i procedury, możesz też wybrać jedną procedurę.
Zmiany w edytorze tekstu zaczynają działać po naciśnięciu Update. Revert odrzuca zmiany od ostatniego Update. Jeśli nie chcesz za każdym razem naciskać Update, włącz Settings › Auto Update: zmiany zostaną zastosowane, gdy edytor straci fokus.
Pod edytorem są przyciski Save, Open, Publish, Fork i Share (zobacz Zapisywanie i udostępnianie).
Help (pomoc)
Wbudowany opis poleceń. Wyszukaj prymityw albo przeglądaj je według kategorii i wstawiaj do kodu. Pozostałe karty dotyczą kolorów, kamery, interfejsu, składni Logo i komunikatów o błędach. Te same informacje są na tej stronie w Dokumentacji.
History (historia)
Lista poleceń wpisanych w konsoli. Kliknij wiersz, aby wrócił do znaku zachęty, gotowy do edycji lub ponownego uruchomienia.
Printer (drukarka)
turtleSpaces ma wirtualną drukarkę. To, co program na niej wydrukuje, pojawia się w tym panelu, gdzie możesz to zapisać, wydrukować albo wyczyścić. Drukarkę włącza się i wyłącza w Settings › Printer.
Debug (debugowanie)
Pokazuje, co robi program w trakcie działania: Errors (błędy), Containers (twoje zmienne), States (położenie, pisak itp. każdego żółwia) i Loops (działające pętle).
Konsola
Konsola pod widokiem 3D działa jak klasyczny interpreter Logo: wpisz polecenie, naciśnij Enter i od razu się wykona. Znak zachęty pokazuje, z którym żółwiem rozmawiasz, a tekst wypisywany przez program też pojawia się tutaj.
Sterowanie wykonaniem
Pasek na dole ekranu steruje programem:
- Backtrack cofa ostatni krok żółwia.
- Lista procedur i Run uruchamiają procedurę (jeśli potrzebuje danych wejściowych, Run o nie zapyta). Lista Inline obok wybiera sposób uruchomienia.
- Pause wstrzymuje program, a Continue go wznawia.
- Przycisk z okiem podświetla każdy wiersz kodu w trakcie wykonywania, żeby można było go śledzić.
- Stop zatrzymuje program.
- Reset przywraca żółwie na start; naciśnij dwa razy pod rząd, aby zresetować wszystko.
Przycisk z flagą w prawym górnym rogu uruchamia procedurę flagi projektu, jak zielona flaga w Scratchu.
Jeśli program trafi na błąd, gdy jesteś zalogowany, żółw Shelly zaproponuje, że Claude wyjaśni, co poszło nie tak: ogólnie albo na podstawie twojego kodu. Odpowiedź pojawi się w panelu Claude.
Menu
- File: nowy projekt z szablonu, otwieranie zapisanych projektów, przeglądanie opublikowanych projektów i modeli 3D oraz zapisywanie. Podmenu Upload i Download wczytują projekty, obrazy, dźwięki, modele i dane. Pozwalają też eksportować pracę jako obraz PNG, model STL do druku 3D, film MP4 lub animowany GIF albo odtwarzalne nagranie WebGL. Share As zamienia projekt w model do oglądania lub stronę do grania.
- Editor: wyszukiwanie, rozmiar czcionki, wcięcia, porządkowanie przestrzeni roboczej i przenoszenie kodu między edytorem a konsolą.
- Turtle: powrót do początku, czyszczenie ekranu, cofanie lub reset oraz zmiana modelu i rozmiaru żółwia.
- Settings: jasny lub ciemny motyw, język, czcionka konsoli, dźwięk, drukarka, Auto Update, podpowiadanie kodu i Live Coding.
- View: ruch kamery, automatyczna orbita, proporcje obrazu, pokazywanie osi i pełny ekran.
- Examples: otwiera przeglądarkę przykładów.
- Help: ponownie odtwarza powitalną wycieczkę Shelly i prowadzi do przewodnika, dokumentacji, książek, samouczków i społeczności na tej stronie.
- Feedback: wyślij nam wiadomość prosto z aplikacji.
webIDE jest dostępne w językach English, 日本語, Français, Español i Polski; język zmienisz w Settings.
Po prawej stronie paska menu jest menu użytkownika: załóż konto lub zaloguj się, a po zalogowaniu otwórz swój profil i grupy albo się wyloguj. Przycisk ◥ obok włącza pełny ekran.
Nagłówek projektu
Nad panelami możesz wpisać tytuł projektu. Obok, przy by, widać, kto go utworzył (wypełniane automatycznie). Nad widokiem 3D jest jednowierszowy opis, który możesz edytować.
Zapisywanie i udostępnianie
- Save zapisuje projekt na twoim koncie turtleSpaces (trzeba być zalogowanym); Open wczytuje jeden z zapisanych projektów.
- Fork zapisuje kopię bieżącego projektu jako twój nowy projekt.
- Publish udostępnia zapisany projekt publicznie, aby inni mogli go znaleźć w galerii opublikowanych. Możesz go oznaczyć typem, poziomem trudności i kategorią, a później zaktualizować lub wycofać publikację.
- Share tworzy link do modelu 3D do oglądania lub do grywalnej wersji projektu.
Galerie
Dwie galerie otwierają się na pełnym ekranie wewnątrz webIDE:
- Opublikowane projekty: projekty udostępnione przez społeczność. Play uruchamia projekt, a Remix otwiera w IDE twoją własną kopię do zmieniania.
- Przykłady: przykładowe programy, które można filtrować według typu, poziomu trudności i kategorii.
Sterowanie kamerą
W widoku 3D:
- Przeciąganie lewym przyciskiem obraca kamerę wokół sceny.
- Przeciąganie prawym przyciskiem w górę i w dół przybliża lub oddala kamerę, a w lewo i w prawo ją obraca.
- Kółko myszy przybliża i oddala.
- Przeciąganie środkowym przyciskiem lub oboma przyciskami przesuwa widok.
Na myszy z jednym przyciskiem lub touchpadzie Ctrl+klik działa jak prawy przycisk. Ściągawka jest w View › Camera Controls.
Jak to działa
webIDE korzysta z tego samego silnika Logo co wersja turtleSpaces na komputery. Silnik jest napisany w Go i skompilowany do WebAssembly. Interfejs zbudowano w React, Radix UI i CodeMirror 6. Rysowanie odbywa się w WebGL w osobnym wątku (workerze), więc strona reaguje płynnie, gdy żółwie pracują.
Pierwsze pobranie silnika jest spore. Potem przeglądarka przechowuje kopię, więc kolejne wizyty startują dużo szybciej. Przerwane pobieranie wznawia się od miejsca, w którym stanęło.