Что такое блочный код? Как блочная программа становится настоящим кодом

Блочный код — это способ собрать программу из цветных блоков, похожих на кусочки пазла, вместо того чтобы набирать её строка за строкой. Каждый блок — одна команда, например «сделать пин выходом», «включить светодиод» или «ждать 100 мс». Блоки соединяются только там, где они подходят друг к другу, поэтому ошибки вроде пропущенной точки с запятой, незакрытой скобки или опечатки в команде просто невозможны, и можно сосредоточиться на логике программы. Вот почему блочное программирование считают самым мягким входом в программирование для детей и новичков.

Но блочный код — не игрушечный язык. За каждой блочной программой, которая отправляется в Arduino или Raspberry Pi Pico, стоит настоящий код, и плата всегда выполняет именно его. В этой статье ты шаг за шагом, на бесплатных проектах BlueGrays, увидишь, что такое блоки, о чём говорят их цвета и как блочная программа превращается в настоящий код на C++ или MicroPython. В конце — сильные стороны и ограничения блочного кода и то, как он сочетается с такими инструментами, как Scratch, mBlock и Tinkercad.

Что такое блочный код и почему он называется «блочным»?

В блочном коде каждая команда — это деталь с выемками и выступами по краям. Выступ внизу одного блока входит в выемку блока под ним, поэтому команды выполняются по порядку сверху вниз. У некоторых блоков внутри есть открытая «пасть»: это блоки-контейнеры, в которые вкладываются другие блоки. У других есть белые овальные гнёзда, куда вставляется число или другой блок значения. Форма каждой детали определяет, что куда можно вставить, поэтому собрать программу с нарушением правил почти невозможно. Большинство современных блочных редакторов идут по пути, который открыли Scratch от MIT и открытая библиотека Blockly от Google. Блоки в BlueGrays тоже основаны на Blockly; набор блоков для электронных проектов мы разработали сами и показываем его на языке приложения. Запомни: блоки — не новый язык программирования. Команды, порядок, условия, циклы и переменные — ровно те же понятия, что и в текстовом коде; блоки просто делают их видимыми.

Как блочная программа превращается в настоящий код?

Блочные редакторы незаметно для тебя используют генератор кода: у каждого типа блока есть шаблон в текстовом коде, и по мере того как блоки складываются, эти шаблоны соединяются по порядку. В BlueGrays всё немного строже: блоки каждого проекта составлены так, чтобы один к одному совпадать с настоящим кодом, который загружается в плату. У каждой строки в блоках есть соответствие в коде, а у каждой строки кода — соответствие в блоках. В проектах на Arduino и ESP32 это код на C++, в проектах на Raspberry Pi Pico — на MicroPython. Чтобы читать блочную программу, достаточно знать пять частей:

• настройка (один раз): часть, которая выполняется только один раз при включении или перезагрузке платы. Она соответствует функции setup() в Arduino, и обычно именно здесь пины делают входами (INPUT) или выходами (OUTPUT).
• повторять всегда: часть, которая снова и снова выполняется сверху вниз, пока плата включена. В Arduino это функция loop(), в MicroPython — цикл while True:.
• Блоки команд: блоки вроде «записать HIGH в пин 9» или «ждать 100 мс», которые складываются внутрь контейнеров; каждый из них выполняет одно действие. Большинство таких блоков — одна строка текстового кода.
• Блоки значений: числа вроде 9 или 100 в белых овалах и скруглённые блоки, которые возвращают результат, например «прочитать пин 13». Они вставляются в гнёзда блоков команд и в коде становятся значением в скобках.
• Выпадающие списки: варианты вроде OUTPUT / INPUT или HIGH / LOW. Они соответствуют константам OUTPUT / INPUT и HIGH / LOW в коде, а поскольку в списке есть только допустимые варианты, опечатка здесь невозможна.

Блоки и код рядом: проект «Мигание светодиодом»

Хватит теории, посмотрим на настоящий пример. В проекте «Мигание светодиодом» светодиод с резистором подключены к пину 9, и светодиод мигает пять раз в секунду. В таблице ниже мы по одному переводим в код блоки с изображения выше. Каждая строка таблицы — один блок, а каждый блок — одна строка кода:

1void setup() {
2  pinMode(9,OUTPUT);     // LED pini çıkış / LED pin as output
3}
4
5void loop() {
6  digitalWrite(9,HIGH);  // LED'i yak / Turn the LED on
7  delay(100);            // 100 ms bekle (1000 ms = 1 sn) / Wait 100 ms (1000 ms = 1 s)
8  digitalWrite(9,LOW);   // LED'i söndür / Turn the LED off
9  delay(100);            // 100 ms bekle / Wait 100 ms
10}

В коде есть несколько вещей, которых не видно в блоках: слово void, фигурные скобки и точки с запятой. Это правила синтаксиса C++, а в блоках о них заботится сама форма деталей. «Пасть» блока-контейнера заменяет фигурные скобки, а блоки, стоящие один под другим, задают порядок строк. Если поменять 100 в гнезде значения на 1000, в коде будет delay(1000), и светодиод станет мигать раз в секунду. Если выбрать в списке LOW вместо HIGH, HIGH в коде превратится в LOW. Благодаря такому точному соответствию уже через несколько проектов начинаешь читать код, не глядя на блоки. Схему и пошаговую сборку этого же проекта ты найдёшь во 2-й части серии: мигаем светодиодом с помощью блочного кода.

Что означают цвета блоков?

В блочных редакторах цвет — не украшение: он показывает, из какой категории блок. При первом взгляде на программу цвета позволяют прочитать её так: «здесь объявляется переменная, здесь принимается решение, а здесь цикл». Вот категории, которые встречаются на изображениях блоков в проектах BlueGrays:

Подсказки дают и формы. Блоки условий и сравнений имеют заострённые концы, похожие на шестиугольник, и встают в гнездо условия блока «если», а у блоков чисел и переменных концы скруглённые. В таблице есть деталь, на которую стоит обратить внимание: в блоке «считать с i от 0 до 5 через 1» верхняя граница включается, то есть i по очереди принимает значения 0, 1, 2, 3, 4 и 5. В коде это записывается условием i < 6, и цикл выполняется шесть раз. Проект «Бегущий огонь» зажигает шесть светодиодов один за другим именно этим блоком; блоки циклов и массивов мы подробно разбираем в части серии про циклы и переменные.

Вложенные блоки «если» на этом изображении превращаются в коде во вложенные строки if. Блок «если button ≠ lastButton» — это строка if (button != lastButton), и она срабатывает, когда состояние кнопки меняется. Вложенный в него блок «если button = 1» ловит только момент нажатия. Блок «установить ledState в не ledState» — это строка ledState = !ledState;, которая превращает 0 в 1, а 1 в 0. Следующий за ним блок «записать ledState в пин 7» — это digitalWrite(7, ledState);. Весь проект можно посмотреть на странице «Переключение светодиода кнопкой (вкл/выкл)»; связь между блоком «если» и if/else мы разбираем в части серии про кнопки и условия.

C++ на Arduino и ESP32, MicroPython на Pico

Одна и та же блочная логика на разных платах переводится на разные языки. В проектах на Arduino и ESP32 блоки соответствуют коду на C++, а блоки «настройка (один раз)» и «повторять всегда» становятся setup() и loop(). Например, у блоков проекта «Мигание светодиодом на ESP32» та же структура, что и у «Мигания светодиодом»; отличаются только пин (5) и задержка (500 мс). В проектах на Raspberry Pi Pico блоки превращаются в MicroPython. Функции setup() здесь нет: всё, что лежит внутри блока настройки, становится строками, которые выполняются один раз в начале файла, а блок «повторять всегда» превращается в цикл while True:.

1from machine import Pin
2import time
3
4# ============ PIN ============
5LED_PIN = 14                    # Boştaki herhangi bir GPIO / Any free GPIO
6led = Pin(LED_PIN, Pin.OUT)     # led adlı pin, ÇIKIŞ / pin named led, OUTPUT
7
8print("== BlueGrays: Pico Harici LED Blink ==")
9print("LED pin: GP" + str(LED_PIN))
10print("500ms yakip 500ms sonduruyor / 500ms on 500ms off")
11
12# ============ ANA DÖNGÜ / MAIN LOOP ============
13while True:
14    led.on()                    # LED'i yak / Turn the LED on
15    print("[LED] ACIK / ON")
16    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s
17
18    led.off()                   # LED'i söndür / Turn the LED off
19    print("[LED] KAPALI / OFF")
20    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s

Соответствие можно проследить строка за строкой. Блок «объявить целое (int) LED_PIN = 14» внутри блока «глобальные переменные (в начале)» — это строка LED_PIN = 14; в Python типы не пишут, поэтому части (int) в коде нет. Блок «пин led : GP LED_PIN , OUTPUT» превращается в led = Pin(LED_PIN, Pin.OUT). «включить (on) пин led» — это led.on(), «ждать 0.5 с» — time.sleep(0.5), а «вывести в порт» — строка print(). Блок «объединить текст» ставит рядом текст «LED pin: GP» и значение LED_PIN с помощью +. Обрати внимание: на Arduino задержка задаётся в миллисекундах (100 мс), в MicroPython — в секундах (0.5), и в блоках эта разница видна по отдельным блокам «ждать … мс» и «ждать … с». Схему смотри на странице «Внешний светодиод на Raspberry Pi Pico»; если Pico для тебя в новинку, сначала прочитай статью Что такое Raspberry Pi Pico, так будет проще.

Преимущества и ограничения блочного кода

Блочный код — не ответ на всё, а мост. В первые недели это очень сильный способ понять логику программы, а настоящая цель — в какой-то момент перейти по этому мосту и спокойно смотреть на текстовый код. Блоки и код рядом ускоряют этот переход, ведь в каждом новом проекте ты снова и снова видишь, как одни и те же блоки превращаются в одни и те же строки. После встречи с блоком «повторять всегда» в десяти проектах слово loop() уже не покажется странным. Когда захочется перейти к текстовому коду, статья Основы программирования Arduino на примерах проведёт тебя от переменных до функций.

Кому подходит блочный код?

• Дети и семьи: дети от 9–10 лет, которые свободно читают, могут начать вместе со взрослым. Когда на экране блоки, а на макетной плате загорается светодиод, программирование перестаёт быть абстрактным.
• Учителя и кружки робототехники: если сначала объяснить проект на блоках, а потом перейти к его коду, на одном уроке встречаются ученики разного уровня. План урока, который мы для этого подготовили, — в последней части серии: план урока по робототехнике с блочным кодом.
• Новички в Arduino: если плата только что куплена, а первые скетчи кажутся запутанными, блоки — самый быстрый способ увидеть, что делает каждая строка. Чтобы познакомиться с самой платой, начни со статьи Что такое Arduino.
• Все, кому трудно читать код: понимать программу, написанную кем-то другим, — отдельный навык. Если посмотреть на блоки готового проекта и уловить его структуру, легче увидеть, что и где делает длинный код.

Сравнение со Scratch, mBlock, Tinkercad и MakeCode

Большинство инструментов, которые приходят на ум при словах «блочный код», — это редакторы, работающие на компьютере или в браузере, и у каждого своя сильная сторона. Общее у них то, что ты перетаскиваешь блоки и собираешь собственную программу. BlueGrays отвечает на другую потребность: показывает блоки готовых, проверенных проектов рядом со схемой подключения, списком деталей и настоящим кодом. Составлять в приложении программу из своих блоков (пока) нельзя; вместо этого ты читаешь, как устроена программа, которая точно работает. Поэтому эти инструменты не конкурируют, а дополняют друг друга. Например, последовательность светофора, собранную в mBlock, можно сравнить с блоками проекта «Светофор», а если платы пока нет, смоделировать схему в Tinkercad. Подробности — в руководствах mBlock и Arduino и Моделирование Arduino в Tinkercad.

Как пользоваться блочным кодом в приложении BlueGrays

1. Выбери в разделе «Обзор › Проекты» проект с меткой «Блоки». Можно также включить фильтр «Проекты с блоками», чтобы в списке остались только они. В приложении больше 100 проектов с блоками: большинство из них на Arduino, остальные на ESP32 и Raspberry Pi Pico.
2. В разделе кода проекта включи переключатель Показать блоками. Вместо кода появятся блоки той же программы; нажми на изображение, чтобы открыть его на весь экран и спокойно рассмотреть с увеличением.
3. Перейди на вкладку Разбор блоков. Там программа объясняется шаг за шагом: на каждом шаге видны только блоки этого шага и то, что они делают.
4. Если интересно, что делает какая-то команда, загляни в Справочник по коду. Каждый пример там показан и блоками, и командами Arduino и MicroPython.
5. Выключи переключатель, чтобы вернуться к настоящему коду. Скопируй его, вставь в Arduino IDE (для Pico — в Thonny) и загрузи в плату.
6. Закрепляй изученное в разделе Вопросы дня: каждый день 5 вопросов уровней от A1 до C2, недельный рейтинг и значки.

И блоки, и код 31 проекта полностью бесплатны; в остальных проектах блоки, как и код, открываются с Premium. Вот несколько бесплатных проектов для хорошего первого шага: «Мигание светодиодом», «Два светодиода мигают поочерёдно», «Светофор», «Бегущий огонь», «Мигание светодиодом на ESP32» и «Мигание встроенным светодиодом Raspberry Pi Pico». Все проекты с блоками по платформам собраны на странице «Блочный код»; там же можно сравнить блоки и код примерного проекта рядом друг с другом.

Серия «От блоков к коду»: дорожная карта

1. Что такое блочный код и как блочная программа становится настоящим кодом (эта статья)
2. Первая программа: мигаем светодиодом с помощью блочного кода, блоки и C++ рядом
3. Кнопки и условия: блок «если» и if/else
4. Циклы и переменные: «повторять всегда», «считать», массивы и счётчики
5. Чтение датчиков блоками, последовательный порт и MicroPython на Pico
6. Для учителей: план урока по робототехнике с блочным кодом

В следующей части серии мы с нуля соберём проект «Мигание светодиодом» из этой статьи (схема, блоки и код на C++ рядом) в статье мигаем светодиодом с помощью блочного кода. А пока в приложении BlueGrays можно открыть упомянутые здесь проекты со схемами подключения и кодом и одним касанием перейти к блочной версии той же программы через Показать блоками или к пошаговому объяснению через Разбор блоков.