Wprowadzenie do aplikacji Blockly

Aplikacja Blockly to aplikacja internetowa zawierająca edytor Blockly (obszar roboczy). W tym dokumencie znajdziesz przykłady zastosowań aplikacji Blockly i opis typowych funkcji interfejsu.

Zanim przejdziesz dalej, zapoznaj się z wizualnym glosariuszempodstawowymi krokami.

Do czego służą aplikacje Blockly?

Aplikacje Blockly pomagają użytkownikom pisać programy w różnych dziedzinach, od gier wideo po robotykę i analizę danych. Użytkownicy piszą programy za pomocą bloków, które aplikacja wykorzystuje do generowania kodu tekstowego, np. w języku JavaScript lub Python. Aplikacja bezpośrednio uruchamia wygenerowany kod lub użytkownik pobiera go i uruchamia na innej platformie, np. robocie lub kontrolerze do gier wideo.

Oto kilka przykładów programów, które użytkownicy piszą za pomocą aplikacji Blockly:

  • Rozwiązania łamigłówek, animacje lub muzyka: wygenerowany kod rozwiązuje łamigłówkę (np. labirynt), wyświetla animację lub odtwarza muzykę. Przykład znajdziesz w Music Lab od Code.org.

  • Gry wideo: wygenerowany kod uruchamia grę wideo. Na przykład utwórz pierwsze 2 poziomy gry „Whack the Mole” w MakeCode Arcade i pobierz grę na kontroler lub zagraj w symulatorze.

  • Robotyka: wygenerowany kod steruje robotem. Na przykład zaprogramuj robota za pomocą Ozoblockly i pobierz program na prawdziwego robota lub uruchom go w symulatorze.

  • Rysunek: wygenerowany kod rysuje rysunek 2D lub 3D. Przykład znajdziesz w BlocksCAD.

  • Analiza danych: wygenerowany kod analizuje dane i tworzy wykres. Przykład znajdziesz w tej prezentacji platformy Dialogic.

  • Kod specyficzny dla aplikacji: wygenerowany kod wykonuje zadanie specyficzne dla danej aplikacji. Na przykład Narzędzia dla programistów Blockly to narzędzie do projektowania nowych bloków Blockly. Generuje kod definicji bloku, który użytkownicy kopiują i wklejają do własnej aplikacji Blockly.

Interfejsy

Dobrym sposobem na poznanie typowych komponentów aplikacji Blockly jest przyjrzenie się ich interfejsom.

Podstawowe komponenty interfejsu

Prawie wszystkie aplikacje Blockly mają kilka podstawowych komponentów: edytor Blockly (obszar roboczy), panel wyjściowy i przycisk „Uruchom”. Na przykład tak wygląda interfejs Labiryntu w Blockly Games.

Interfejs aplikacji do tworzenia labiryntów z edytorem, panelem wyjściowym i przyciskiem Uruchom.

Niektóre aplikacje Blockly nie mają przycisku „Uruchom”, a zamiast tego aktualizują panel wyjściowy za każdym razem, gdy użytkownik wprowadzi zmianę. Na przykład aplikacja Graph w przykładowych projektach Blockly ma 2 panele wyjściowe (jeden na wykres, a drugi na równanie), które są aktualizowane przy każdej zmianie.

Interfejs aplikacji do tworzenia wykresów z edytorem, panelem wyjściowym dla równania utworzonego przez użytkownika i panelem wyjściowym dla wykresu tego równania.

Niektóre aplikacje nie mają panelu wyjściowego. Jest to najczęstsze w przypadku aplikacji sprzętowych, takich jak aplikacje do programowania robotów. Niektóre z tych aplikacji zawierają symulator sprzętu, ale wiele z nich umożliwia użytkownikom pobieranie i uruchamianie wygenerowanego kodu bezpośrednio na urządzeniu docelowym.

Dodatkowe komponenty interfejsu

Większość aplikacji ma dodatkowe komponenty interfejsu. Niektóre z nich zaspokajają ogólne potrzeby, np. zapisywanie pracy użytkownika, a inne – potrzeby związane z konkretną aplikacją, np. projektowanie interfejsu graficznego. Oto przykłady:

  • Scratch to aplikacja do tworzenia animacji i gier wideo. Zawiera edytory grafiki i dźwięku, panele do tworzenia nowych duszków i teł oraz menu plików, edycji i ustawień:

    Interfejs użytkownika Scratcha.

  • MakeCode Arcade to aplikacja do tworzenia gier wideo, która ma elementy sterujące, edytory kodu i grafiki, menu ustawień oraz przyciski pobierania i zapisywania. Panel wyjściowy symuluje przenośny kontroler do gier.

    Interfejs użytkownika MakeCode Arcade.

  • MIT App Inventor, aplikacja do tworzenia aplikacji na telefony, ma oddzielne ekrany dla projektanta GUI i edytora Blockly, a także menu plików, połączeń, kompilacji i ustawień. Zamiast panelu wyjściowego użytkownicy testują wygenerowany kod na telefonie.

    Projektant GUI w interfejsie użytkownika App Inventor Edytor Blockly w interfejsie App Inventora

To, które dodatkowe komponenty należy uwzględnić, zależy od celów aplikacji i możliwości użytkowników. Oto niektóre typowe komponenty:

  • Administracja:

    • Zarządzanie plikami (nowy, otwórz, zapisz, zapisz jako, usuń)
    • Zarządzanie kontem (tworzenie, logowanie, wylogowywanie)
    • Ustawienia (język, konfiguracja interfejsu)
  • Programowanie:

    • Polecenia edycji (cofanie, ponawianie, kopiowanie, wycinanie, wklejanie, duplikowanie)
    • Projektant GUI
    • Edytory grafiki i dźwięku
    • Edytor kodu lub wyświetlanie kodu tylko do odczytu
  • Testowanie

    • Konfiguracja wyjścia (rozpoczęcie/zatrzymanie, szybkość odtwarzania, głośność, zrzut ekranu itp.)
    • Debuger (punkty przerwania, uruchamianie, krok, wyróżnianie bloków)
    • Ustawianie parametrów testu
  • Sprzęt

    • Połączenie (USB, Bluetooth, kod QR)
    • Konfiguracja (wybór modelu, wybór akcesoriów, przypisywanie nazw komponentów)
    • Sterowanie (ręczne sterowanie robotem, rejestrowanie pozycji robota)
    • Pobierz kod
  • Pomoc

    • Dokumentacja
    • Interaktywne samouczki
    • Pomoc kontekstowa

Co dalej?

Jeśli nadal zastanawiasz się nad złożeniem wniosku, przeczytaj więcej o aspektach projektowania.

Jeśli chcesz zobaczyć, jak wygląda tworzenie prostej aplikacji, wypróbuj samouczek dotyczący pierwszych kroków w Blockly.

Jeśli chcesz napisać wniosek: