Plac zabaw

Niezwykle przydatne narzędzie jest wykorzystywane podczas hakowania rdzenia Blockly lub opracowywania wtyczki. Ma ona wstępnie skonfigurowaną instancję Blockly, której możesz używać do testowania, debugowania i prototypowania. W Google niemal cały proces tworzenia Blockly odbywa się z wykorzystaniem placu zabaw. Oto prosty obszar roboczy na serwerze demonstracyjnym.

W głównej aplikacji Blockly dostępne są 3 rodzaje placów zabaw: proste, zaawansowane i wiele. W próbkach blokowych zazwyczaj wykorzystywany jest tylko zaawansowany etap testowania.

Wymagania wstępne

Blockly korzysta teraz z systemu modułów Closure. Ze względu na sposób wczytywania nieskompilowane moduły Closure muszą być pobierane z adresu URL http: lub https: i nie mogą być pobierane bezpośrednio z adresów URL file:. Dlatego, aby wczytać platformę w trybie nieskompilowanym, należy wczytać go z lokalnego serwera WWW.

Utworzyliśmy skrypt, który uruchamia serwer lokalny i wczytuje cały kod wymagany do wczytania modułów Blockly. Aby zainstalować wszystkie zależności, musisz zainstalować npm na komputerze i uruchomić npm install z poziomu katalogu głównego Blockly.

Korzystanie z przeglądarki Internet Explorer

Blockly używa teraz w swojej bazie kodu zaawansowanych funkcji, które mogą być niezgodne z Internet Explorerem. W skompresowanym (skompilowanym) kodzie te funkcje są transpilowane pod kątem działania z IE, ale załadowanie nieskompresowanego kodu może nie działać. Jeśli wczytujesz plac zabaw w IE, nawet przy użyciu lokalnego serwera HTTP, automatycznie załaduje on skompresowany kod Blockly, aby zapewnić zgodność. Więcej informacji o testowaniu zmian na placu zabaw w trybie skompresowanym znajdziesz w sekcji „Bezpośredni dostęp do placów zabaw”.

Prosty plac zabaw

Prosty plac zabaw to elementy, na których opierają się pozostałe dwa. Wyświetla zestaw narzędzi i obszar roboczy oraz pozwala dostosować ograniczoną liczbę ustawień.

Aby otworzyć plac zabaw, biegaj

npm run start

od poziomu głównego Blockly. Upewnij się, że nic innego nie nasłuchuje na porcie 8080. To polecenie uruchamia serwer hostujący moduły Blockly i automatycznie otwiera w przeglądarce stronę testową. Gdy uznasz, że chcesz wyłączyć plac zabaw, zakończ ten proces (Ctrl+C w środowiskach Mac i Linux).

Na placu zabaw znajdują się:

  • Cały kod nie jest skompresowany, co umożliwia szybkie programowanie.
  • Wszystkie domyślne blokady (z wyjątkiem niektórych wycofanych).
  • Wszystkie generatory języków (JavaScript, Python, PHP, Lua i Dart).
  • Zserializuj i deserializuj stan obszaru roboczego (JSON lub XML).
  • Przełączaj między układem LTR i RTL.
  • przełączać się między układami zestawu narzędzi;
  • Testy obciążeniowe mechanizmu renderowania.
  • Rejestruj wszystkie zdarzenia w konsoli.

Zaawansowany plac zabaw

Zaawansowany plac zabaw zawiera dodatkowe funkcje, które jeszcze bardziej ułatwiają debugowanie Blockly. Jest to również domyślny obszar roboczy wszystkich wtyczek używany w próbkach blokowych.

Na tym placu zabaw znajdują się wszystkie proste funkcje, a także:

  • Możesz skonfigurować dodatkowe ustawienia, takie jak rozmiar siatki, elementy sterujące powiększeniem/przenoszeniem, mechanizm renderowania, motyw i wiele innych.
  • Używane ustawienia i blokady są zapisywane w pamięci podręcznej i używane automatycznie przy następnym wczytaniu placu zabaw.
  • Dane wyjściowe każdego generatora możesz sprawdzać w tym samym oknie.

Aby uruchomić zaawansowany proces testowania dowolnej wtyczki w przykładach blokowych, uruchom polecenie npm run start z katalogu głównego wtyczki. Obecnie tylko jedna wtyczka może działać jednocześnie, używając portu 3000. Jeśli masz problem z uruchomieniem wtyczki, najpierw upewnij się, że żaden inny użytkownik nie nasłuchuje na tym porcie.

Aby uruchomić w interfejsie API zaawansowane narzędzie, uruchom npm run start z katalogu głównego Blockly, a następnie kliknij link „Zaawansowane” pod tytułem.

Możesz też utworzyć własną stronę testową, która zawiera zaawansowany plac zabaw, korzystając z pakietu narzędzi dla programistów Blockly.

Wiele placów zabaw

Na kilku placach zabaw znajduje się kilka placów zabaw o różnych konfiguracjach pod kątem trybu LTR i lokalizacji zestawu narzędzi. Służy on głównie do szybkiego sprawdzenia, czy przed opublikowaniem aplikacji Blockly nie zostały uszkodzone żadne elementy związane z LTR. Aby otworzyć ten plac zabaw, postępuj zgodnie z instrukcjami dotyczącymi prostego placu zabaw, a potem zmień adres URL na /tests/multi_playground.html.

Testowanie zmian

Jeśli uruchamiasz takie placówki z serwera lokalnego, w większości przypadków wystarczy odświeżyć stronę, aby zobaczyć zmiany w Blockly. Jeśli dodasz nowy plik lub dodasz nową zależność, być może trzeba będzie najpierw uruchomić npm run build, który zaktualizuje plik test/deps.js, aby zapewnić prawidłowe wczytanie zależności, a następnie odświeżyć stronę.

Jeśli korzystasz z zaawansowanej funkcji wtyczki, nie musisz nawet odświeżać strony. Zmiany są przesyłane automatycznie.

Bezpośredni dostęp do placów zabaw

Wcześniej prosty plac zabaw był dostępny lokalnie przez bezpośrednie przejście do pliku test/playground.html w przeglądarce. Jest to możliwe w przypadku prostych i wielu placów zabaw, ale już nie zalecamy tego działania. Jeśli to zrobisz, narzędzie wykryje, że nie masz serwera lokalnego i automatycznie użyje skompresowanych plików Blockly (więcej informacji znajdziesz na stronie Building Blockly). Za każdym razem, gdy wprowadzisz jakieś zmiany w głównej aplikacji Blockly, konieczne będzie odbudowanie rdzeni i wprowadzenie zmian w odpowiednich momentach. Nadal możesz uzyskać dostęp do tych stron, jeśli są hostowane na zdalnym serwerze, takim jak nasz przykład hostowany w witrynie demonstracyjnej. W trybie skompresowania tło będzie jasnoniebieskie.

Zaawansowany plac zabaw nie jest dostępny przez file:.