Podczas hakowania w podstawowej architekturze Blockly lub tworzenia wtyczki niezwykle przydatnym narzędziem jest plac zabaw. Zawiera on wstępnie skonfigurowaną instancję Blockly, której możesz używać do testowania, debugowania i tworzenia prototypów. W Google praktycznie cały rozwój Blockly odbywa się w Playground. Oto prosty Playground na serwerze demonstracyjnym.
W przypadku podstawowej wersji Blockly dostępne są 3 typy miejsc zabaw: proste, zaawansowane i wielofunkcyjne. W próbkach blokowych zwykle używany jest tylko zaawansowany plac zabaw.
Wymagania wstępne
Blockly używa teraz systemu modułu zamknięcia. Ze względu na sposób ich wczytywania nieskompilowane moduły Closure muszą być pobierane z adresu URL http: lub https:, a nie bezpośrednio z adresów URL file:. W związku z tym, aby załadować Playground w nieskompilowanym trybie, musisz go wczytać z lokalnego serwera WWW.
Utworzyliśmy skrypt, który uruchamia serwer lokalny i wczytuje cały kod wymagany do wczytania modułów Blockly. Musisz mieć zainstalowany na komputerze pakiet npm i uruchomić npm install w katalogu głównym Blockly, aby zainstalować wszystkie zależności.
Korzystanie z Internet Explorera
W swojej bazie kodu Blockly używa teraz funkcji zaawansowanych, które mogą być niezgodne z Internet Explorerem. W skompresowanym (skompilowanym) kodzie te funkcje są przetłumaczone na kod źródłowy, który działa w IE, ale wczytywanie nieskompresowanego kodu może się nie udać. Jeśli wczytasz plac zabaw w IE, nawet z lokalnego serwera http, plac zabaw automatycznie wczyta skompresowany kod Blockly, aby zapewnić zgodność. Więcej informacji o testowaniu zmian w playgroundu w trybie skompresowanym znajdziesz w sekcji „Dostęp do playgroundów bezpośrednio”.
Simple Playground
Pozostałe 2 place zabaw są oparte na prostym placu zabaw. Wyświetla ona panel narzędzi i obszar roboczy oraz umożliwia dostosowanie ograniczonej liczby ustawień.
Aby otworzyć Playground, uruchom
npm run start
z katalogu 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 stronę Playground w przeglądarce. Gdy chcesz zamknąć Playground, zakończ proces (Ctrl+C w środowiskach Mac i Linux).
Plac zabaw:
- Cały kod nie jest skompresowany, co pozwala na szybkie programowanie.
- Wszystkie domyślne blokady (z wyjątkiem niektórych nieużywanych).
- Wszystkie generatory języków (JavaScript, Python, PHP, Lua i Dart).
- Serializuj i deserializuj stan obszaru roboczego (JSON lub XML).
- Przełączaj między układem od lewej do prawej.
- przełączać się między układami panelu narzędzi;
- testy obciążeniowe dla renderowania;
- rejestruje wszystkie zdarzenia w konsoli.
Zaawansowany plac zabaw
Zaawansowane środowisko Playground zawiera dodatkowe funkcje, które jeszcze bardziej ułatwiają debugowanie Blockly. Jest to też domyślna platforma do testowania, która jest używana w przykładach w Blockly w przypadku wszystkich wtyczek.
Ten plac zabaw zawiera wszystkie funkcje prostego placu zabaw oraz:
- Można skonfigurować dodatkowe ustawienia, takie jak rozmiar siatki, elementy sterujące powiększeniem i przesunięciem, mechanizm renderowania czy motyw.
- Użyte ustawienia i bloki są zapisywane w pamięci podręcznej i używane automatycznie przy następnym wczytaniu placu zabaw.
- Wyświetlać wyniki działania poszczególnych generatorów w tym samym oknie.
Aby uruchomić zaawansowane środowisko testowe dla dowolnej wtyczki w blockly-samples, uruchom npm run
start z katalogu głównego wtyczki. Obecnie może działać tylko 1 wtyczka naraz, która używa portu 3000. Jeśli masz problem z uruchomieniem wtyczki,
najpierw upewnij się, że nic więcej nie nasłuchuje przez ten port.
Aby uruchomić zaawansowane środowisko Playground w core, uruchom npm run start w korzeniach Blockly, a potem kliknij link „Zaawansowane” pod tytułem.
Możesz też utworzyć własną stronę testową, która zawiera zaawansowane narzędzia Playground, korzystając z pakietu narzędzi dla deweloperów Blockly.
Wiele miejsc do zabawy
Wieloplatformowe środowisko testowe zawiera kilka środowisk testowych o różnych konfiguracjach dotyczących trybu LTR i lokalizacji panelu narzędzi. Używa się go głównie do szybkiego sprawdzenia,
czy w okresie przedpremierowym nie doszło do problemów związanych z LTR. Aby otworzyć to playground, wykonaj czynności opisane w przypadku prostego playgroundu, a potem zmień adres URL na /tests/multi_playground.html.
Testowanie zmian
Gdy uruchamiasz Playground na serwerze lokalnym, wystarczy, że odświeżysz stronę, aby zobaczyć wprowadzone w Blockly zmiany. Jeśli dodasz nowy plik lub nową zależność od pliku, być może musisz najpierw uruchomić npm run
build, aby zaktualizować plik test/deps.js i upewnić się, że zależności są prawidłowo wczytane. Następnie odśwież stronę.
Jeśli korzystasz z zaawansowanego środowiska testowego wtyczki, nie musisz nawet odświeżać strony. Zmiany są automatycznie wczytywane na gorąco.
Bezpośredni dostęp do placów zabaw
Wcześniej dostęp do prostej wersji playgroundu można było uzyskać lokalnie, otwierając plik test/playground.html w przeglądarce. Jest to nadal możliwe w przypadku prostych i wielu miejsc do zabawy, ale nie jest już zalecane. Gdy to zrobisz, plac zabaw wykryje, że nie korzystasz z serwera lokalnego, i automatycznie użyje skompresowanych plików Blockly (więcej informacji znajdziesz na stronie Building Blockly). Gdy zmienisz coś w podstawowej usłudze Blockly, trzeba będzie ją odbudować i przeprowadzić zmiany. Nadal możesz uzyskać dostęp do tych stron, jeśli są hostowane na serwerze zdalnym, np. na naszej stronie demonstracyjnej. Gdy używasz trybu kompresji, tło będzie jasnoniebieskie.
Zaawansowany plac zabaw nie jest dostępny za pośrednictwem konta file:.