Введение в приложения Blockly

Приложение Blockly — это веб-приложение, содержащее редактор (рабочее пространство) Blockly. В этом документе приведены примеры использования приложений Blockly и рассматриваются типичные функции пользовательского интерфейса.

Если вы еще этого не сделали, обязательно прочтите визуальный глоссарий и основные шаги подачи заявки, прежде чем продолжить работу с этим документом.

Что делают приложения Blockly?

Приложения Blockly помогают пользователям писать программы в различных областях, от видеоигр до робототехники и анализа данных. Пользователи пишут свои программы с помощью блоков , которые приложение использует для генерации текстового кода , например, JavaScript или Python. Затем приложение запускает сгенерированный код напрямую , или пользователь загружает его и запускает на другой платформе , например, на роботе или портативном игровом контроллере.

Вот несколько примеров программ, которые пользователи пишут с помощью приложений Blockly:

  • Решения головоломок, анимация или музыка: сгенерированный код решает головоломку (например, лабиринт), отображает анимацию или воспроизводит музыку. Пример см. в музыкальной лаборатории Code.org .

  • Видеоигры: Сгенерированный код запускает видеоигру. Например, создайте первые два уровня игры «Ударь крота» в MakeCode Arcade и загрузите игру на контроллер или играйте в неё в симуляторе.

  • Робототехника: сгенерированный код управляет роботом. Например, запрограммируйте робота с помощью Ozoblockly и загрузите его в реальный робот или запустите в симуляторе.

  • Рисование: Сгенерированный код рисует 2D- или 3D-чертеж. Пример см. в BlocksCAD .

  • Анализ данных: сгенерированный код анализирует данные и строит график. Пример см. в этой демонстрации платформы Dialogic .

  • Код, специфичный для приложения: сгенерированный код выполняет задачу, специфичную для конкретного приложения. Например, Blockly Developer Tools — это инструмент для разработки новых блоков Blockly. Он генерирует код определения блока, который пользователи копируют и вставляют в свои приложения Blockly.

Пользовательские интерфейсы

Хороший способ понять типичные компоненты приложений Blockly — взглянуть на их пользовательские интерфейсы.

Базовые компоненты пользовательского интерфейса

Почти все приложения Blockly имеют несколько общих базовых компонентов: редактор Blockly (рабочее пространство), панель вывода и кнопку «Выполнить». Например, вот интерфейс лабиринта в играх Blockly.

Пользовательский интерфейс приложения-лабиринта с редактором, панелью вывода и кнопкой «Выполнить».

В некоторых приложениях Blockly отсутствует кнопка «Выполнить», и вместо этого панель вывода обновляется каждый раз, когда пользователь вносит изменения. Например, приложение Graph в примерах Blockly имеет две панели вывода (одну для графика и одну для уравнения), которые обновляются при каждом изменении.

Пользовательский интерфейс графического приложения с редактором, панелью вывода для уравнения, составленного пользователем, и панелью вывода для графика этого уравнения.

В некоторых приложениях отсутствует панель вывода. Чаще всего это встречается в аппаратных приложениях, например, в приложениях для программирования роботов. Хотя некоторые из этих приложений включают аппаратный симулятор, многие из них просто позволяют пользователям загружать и запускать сгенерированный код непосредственно на целевом устройстве.

Дополнительные компоненты пользовательского интерфейса

Большинство приложений содержат дополнительные компоненты пользовательского интерфейса. Некоторые из них отвечают общим потребностям, например, сохранению работы пользователя, а другие — специфическим потребностям приложения, например, разработке графического интерфейса. Вот несколько примеров:

  • Scratch — приложение для создания анимации и видеоигр, в котором есть графические и звуковые редакторы, панели для создания новых спрайтов и фонов, а также меню файлов, редактирования и настроек:

    Пользовательский интерфейс Scratch.

  • MakeCode Arcade — приложение для создания видеоигр. Оно включает в себя элементы управления выводом, редакторы кода и графики, меню настроек, а также кнопки загрузки и сохранения. Панель вывода имитирует портативный игровой контроллер.

    Пользовательский интерфейс MakeCode Arcade.

  • MIT App Inventor , приложение для создания мобильных приложений, имеет отдельные экраны для графического дизайнера и редактора Blockly, а также меню файлов, подключений, сборки и настроек. Вместо панели вывода пользователи тестируют сгенерированный код на своих телефонах.

    Дизайнер графического интерфейса в пользовательском интерфейсе App InventorРедактор Blockly в пользовательском интерфейсе App Inventor

Выбор дополнительных компонентов зависит от целей вашего приложения и возможностей пользователей. Вот некоторые распространённые компоненты:

  • Администрация:

    • Управление файлами (создать, открыть, сохранить, сохранить как, удалить)
    • Управление учетной записью (создание, вход, выход)
    • Настройки (язык, конфигурация пользовательского интерфейса)
  • Программирование:

    • Команды редактирования (отменить, повторить, копировать, вырезать, вставить, дублировать)
    • дизайнер графического интерфейса
    • Графические и звуковые редакторы
    • Редактор кода или отображение кода только для чтения
  • Тестирование

    • Конфигурация вывода (старт/стоп, скорость воспроизведения, громкость, снимок экрана и т. д.)
    • Отладчик (точки останова, запуск, пошаговое выполнение, подсветка блоков)
    • Установить параметры теста
  • Аппаратное обеспечение

    • Подключение (USB, Bluetooth, QR-код)
    • Конфигурация (выбор модели, выбор аксессуаров, назначение названий компонентов)
    • Управление (ручное управление роботом, запись положения робота)
    • Скачать код
  • Помощь

    • Документация
    • Интерактивные уроки
    • Контекстно-зависимая помощь

Куда мне идти дальше?

Если вы все еще раздумываете над своим приложением, продолжайте читать о факторах, которые следует учитывать при проектировании .

Если вы хотите увидеть, как создается простое приложение, попробуйте выполнить практическую работу «Начало работы с Blockly» .

И если вы готовы написать заявление: