Pencil Code: альтернатива ЛогоМирам?

Мы говорили о том, что для развития алгоритмического мышления (и не только) можно с успехом использовать блочное программирование, которое имеет ряд существенных преимуществ перед использованием любых текстовых языков программирования, включая и алгоритмические, которые включены в курс изучения информатики. Помимо Blockly, Scratch, App Inventor, code.org существует немало визуальных сред для блочного программирования, но отдельно хочется остановиться на малоизвестном сервисе, который объёдиняет в себе как визуальное, так и текстовое программирование - Pencil Code.

Pencil Code - это онлайн сервис, который позволяет использовать блочное и текстовое программирование с использованием синтаксиса Logo, языков программирования CoffeeScript и JavaScript, а также HTML, CSS, jQuery для обучения основам программирования. Данный проект является открытым и общедоступным для образовательных целей. Имеет англоязычный интерфейс, но есть материалы и на русском языке. Расположен сервис по адресу pencilcode.net. На главной странице вы можете перейти к просмотру обучающих примеров для работы с графикой (Draw), звуками (Jam) или игровыми сценариями (Imagine).

Для сохранения проектов необходимо создать аккаунт, нажав на ссылку New Account. После ввода в появившемся диалоге имени и пароля нажмите ссылку the terms of service для ознакомления с условиями предоставления сервиса. Большинство таких условий не читает, но я рекомендую один раз прочитать данные условия, поскольку в них есть любопытные моменты.

Если вы хотите только познакомится с платформой без сохранения проектов, то можно без создания аккаунта сразу перейти в среду разработки по кнопке Let's play!

Интерфейс IDE показан ниже. Каждый проект в Pencil Code - это общедоступная web-страница. Открыть проекты других пользователей для просмотра или редактирования можно по ссылке на них.

Интерфейс.

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

Панель управления.

Чтобы не запутаться с файлами сохраняйте проекты в отдельных папках. Рабочей папкой называется папка открытого в среде разработки проекта. Для создания папки перед названием проекта через слеш укажите желаемое название папки, например, bk. Если папки bk не существует, то она будет автоматически создана. Проекты, имена которых не содержат названия папки и слэша, сохраняются в корневой директории аккаунта, переход в которую происходит при целчке по ссылке названия аккаунта - actech в нашем случае.

Не забывайте регулярно сохранять проект по кнопке Save. Автосохранения здесь нет.

При нажатии кнопки Share откроется диалог, в котором можно получить ссылку на страницу результата работы проекта или страницу проекта в среде разработки, а также код для встраивания проекта в плавающий фрейм на web-странице. Этими ссылками и кодом можно делиться с другими пользователями.

В корневой директории аккаунта находятся папки и файлы существующих проектов.

Корневая директория.

Для переключения вида директории (пиктограммы или текст) используйте кнопку в заголовке панели. Для перехода в папку щелкните по её пикограмме. В режиме разделения экрана в его правой части отобразится содержимое папки. Для создания нового файла нажмите пиктограмму New file. Собственные файлы ресурсов добавить в аккаунт невозможно, но можно использовать случайные файлы ресурсов с wikimedia, предоставляемые по их названию в пути, например, при указании ссылки /img/red-dragon к программе будет подключен файл с изображением красного дракона. Для предварительного просмотра файла вставьте его название вместо red-dragon в ссылку https://pencilcode.net/img/red-dragon.

В левой части окна среды разработки расположена панель блоков, в верхней части которой находятся названия категории блоков, а в нижней отображаются блоки выбранной категории.

Панель блоков.

Для перемещения блока в редактор перетащите его из панели блоков, а для удаления блока из редактора перетащите его за пределы области редактора.

В заголовке панели расположена кнопка для перехода в режим редактирования кода. В этом режиме панель блоков скрывается для увеличения области редактора.

Редактор может работать в режиме редактирования блоков или кода. Ниже показан интерфейс редактора в режиме редактирования блоков.

Редактор.

Переключение режима редактирования осуществляется при щелчке по вкладке или заголовку редактора. В режиме редактирования кода в заголовке отображается ссылка "{}code" для перехода в режим редактирования блоков.

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

Для отмены последней операции используйте сочетание Ctrl + Z, а для возврата последней операции - Ctrl + Y. Удаление блока происходит после перетаскивания и отпускания его за пределами обрасти редактора. Для удаления нескольких блоков сначала выделите их при помощи рамки выделения (щелкните левой кнопкой мыши на пустом поле и не отпуская её переместите курсор на требуемые блоки), а затем перетащите их за пределы области редактора. Неиспользуемые блоки удаляются по одному.

Особенностью Pencil Code является то, что режимы редактирования блоков и кода используются совместно. Например, для удаления большого количества блоков перейдите в режим редактирования кода и удалите ненужные строки. Режим редактирования кода используется и для копирования блоков между проектами, а также их резервного копирования. В этом случае при невозможности работы с Pencil Code вы сможете редактировть этот код в других редакторах и не потеряете его.

Функциональность среды разработки в режиме редактирования кода выше. В этом режиме вы можете использовать операторы и конструкции языка, для которых блоки не определены.

В настройках редактора можно выбрать язык программирования - Coffeescript или Javascript, включить в проект поддержку CSS и/или HTML (при этом на экран добавятся новые области для редактирования), а также управлять включением в проект библиотек - общей Common Library, основной для поддержки черепашьей графики Main Turtle и мощной библиотеки p5.js, позволяющей работать с текстом, графикой, объектами HTML, видео, звуком, элементами управления, частицами, картамии др. По умолчанию используется Coffeescript, синтаксис которого похож на тот, что использует в Python, Ruby и др. Для начинающих я бы порекомендовал сразу переключиться на на JavaScript, синтаксис которого выглядит понятнее и на практике используется шире.

Настройки редактора.

Непрокручиваемый холст используется для просмотра результатов работы программы. В заголовке области находится ссылка "output" для отображения результатов на новой пустой вкладке браузера.

Холст.

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

Тестовая панель (консоль) предназначена для тестирования команд Logo, Coffeescript или Javascript, просмотра подсказки по команде (если её ввести без аргументов), а также для отладки - вывода сообщений при помощи команды debug или просмотра значения переменной.

Тестовая панель (консоль).

При помощи вертикального разделителя можно управлять размером панели.

Если у вас есть опыт работы с аналогичными средами, то некоторые моменты здесь могут привести в ступор, например, холст не прокручивается и не масштабируется, в редакторе блоков нет команды для копирования блоков в проекте и между проектами. Масштабирование холста можно осуществить средствами браузера с помощью комбинации Ctrl + и Ctrl -, а копирование блоков при помощи копирования кода. Блочный код проекта может состоять только из единственной последовательности блоков, в связи с чем рекомендуется сразу выбрать стиль их создания. Иначе в мешанине переменных, функций, обработчиков событий и других блоков будет непросто разобраться.

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

Даже после беглого просмотра возможностей Pencil Code становится очевидно, насколько данная платформа интереснее, функциональнее и перспективнее тех же Лого Миров. Скажу больше, подобные инструменты и визуальное программирование в целом могут дать ещё один шанс тем, кто не смог подружиться с программированием и имеет негативный предыдущий опыт.

Дополнительную информацию вы можете посмотреть на сайте педагога и автора русскоязычного курса Людмилы Рождественской.