Что такое blockly

Визуальный язык программирования Google Blockly

Blockly — визуальный язык программирования с веб-интерфейсом. Создание программы осуществляется путём соединения блоков.

Некоторые демки:
Maze — используйте Blockly, чтобы пройти лабиринт.
Code — экспорт программы Blockly в JavaScript, Dart, Python или XML.

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

После экспорта в JavaScript:

var n; var A; var i; var x; var j; n = 100; A = []; for (i = 0; i var i_end = Math.sqrt(n); for (i = 2; i > > for (x = 2; x

• Blockly
• графический язык программирования
• визуальное программирование

• Программирование
• Визуальное программирование

Знакомство с Blockly

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

Для новичков в программировании отлично подойдёт визуальный язык программирования, позволяющий создавать программы без изучения правил синтаксиса. Отличный пример – язык Google Blockly, его можно запускать онлайн и он генерирует исходный код на языках JavaScript, Python, PHP и Dart. Для создания программы в Blockly нужно перемещать визуальные блоки.

Это руководство поможет научиться программированию с помощью Blockly.

Для изучения основ программирования с помощью Blockly необходима система, включающая в себя три компонента:

1. Визуальный редактор, который собственно и есть язык Blockly, представляющий собой набор графических блоков определенной формы. Благодаря этому редактору, Вы соединяете одни блоки с другими и создаёте программу для Исполнителя.
2. Пользовательский интерфейс. Это среда работы и элементы управления какого-либо Исполнителя, для которого Вы и создаёте программу. С помощью этого интерфейса можно увидеть результат работы Вашей программы.
3. Интерпретатор, генерирующий и запускающий код программы, собранной из графических блоков. В данном случае – это интерпретатор языка программирования JavaScript, который переводит Вашу программу, составленную из блоков в компьютерный (машинный) язык. Этот компонент не имеет визуального представления, он скрыт от Вас.

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

Чтобы разобраться с интерфейсом среды разработки, попробуйте самостоятельно поработать с учебным игровым тренажёром «Банни на морковном поле».

Создайте игровую обстановку, а затем программу из блоков, и посмотрите как она работает. Для начала можете познакомиться с демоверсиями тренажёра, чтобы понять принципы создания игровой обстановки и программы с помощью Blockly.

О сайте

Программирование – одно из основный звеньев «Цифровой экономики», о необходимости построения которой в России заявлено в последние годы. Российская IT-отрасль вообще, и программирование, в частности – одна из немногих сфер, не только выживших в 90-е годы, но и успешно развивающихся. Многие российские IT-компании имеют всемирную известность и признание. Существует большой спрос на выпускников высших учебных заведений программистских специальностей.

Изучение азов программирования в школе является основой для получения востребованной профессии программиста. Совершенствование преподавания основ программирования – одна из важнейших задач учителей информатики. В связи с этим возникает ряд проблем: не хватает часов для полноценного изучения данной темы, не хватает качественных материалов (видеоуроков, презентаций, тестов и т.д.). Но основной проблемой является использование устаревших инструментов для обучения программированию.

В школе, как и тридцать лет назад, для преподавания основ программирования, в основном, используются система программирования КуМир (разработка НИИСИ РАН начала 90-х годов XX века) в 6 классе и язык Паскаль (Никлаус Вирт, 1970 г.р.) в 8-9 классах. Эти языки, созданные великими программистами, тридцать лет назад несли в себе передовые идеи программирования и в условиях тогда ещё советской школы выглядели весьма достойно.

Но мир меняется, и не только мир программирования, куда приходят новые идеи и концепции (например, объектно-ориентированного программирования), но изменяется и подход к изучению программирования в школе. Тридцать лет назад программирование изучали в старших классах средней школы, сейчас – с шестого класса (в рамках дополнительных занятий ещё раньше). КуМир и Паскаль и сейчас хороши всем, кроме одного: они способны навсегда отбить у большинства начинающих программистов всякое желание программировать. Сегодняшние шестиклассники никогда не работали с неграфическими операционными системами (даже с командной строкой в Windows). Им трудно даются обычные текстовые языки программирования, интерфейс языков 70-90-х годов прошлого века им крайне неприятен.

В большинстве стран мира в последнее десятилетие для знакомства с азами программирования используются специально созданные для обучения языки: с 2007 года Scratch (Скретч), разработка Массачусетского технологического института, с 2012 года – Blockly (Блокли), созданный компанией Google. В обоих языках используется визуальный (графический) способ создания программ. Строго говоря, ни Scratch, ни Blockly, ни КуМир не являются в полном смысле этого слова языками программирования. Это графические оболочки, графические надстройки над языками программирования. Blockly, о котором пойдет речь в дальнейшем, – это графическая надстройка над языком JavaScript, одним из самых мощных и популярных языков программирования.

Blockly – визуальный (графический) язык программирования, созданный в 2012 году компанией Google. Разработчики: Нил Фрейзер, при участии Эллен Спертус и Марка Фридмана. Нил Фрейзер называет Blockly редактором визуального программирования.

Этот язык, по виду похожий на Scratch, буквально сразу после своего появления стал популярен в образовании. Он начал использоваться для обучения основам программирования школьников, и даже студентов. Популярность обусловлена рядом его преимуществ над Scratch и другими подобными языками: бесплатная и свободная лицензия, простой и понятный web-интерфейс, адаптирован для работы на планшетных компьютерах, имеется возможность кросс-компиляции в другие языки (Javascript, Python, Dart, PHP). Blockly представляет собой визуальный редактор, который позволяет пользователям писать программы, соединяя блоки кода друг с другом. Начинающим программистам обычно приходится одновременно решать две задачи: 1) как превратить свои мысли в логически верные высказывания; 2) как не допустить ошибку в синтаксисе программы. При обучении с Blockly допустить синтаксическую ошибку невозможно. Тут вы не встретите забытых скобок или пропущенных точек с запятой. С Blockly начинающие программисты концентрируются только на логической части.

За рубежом в настоящее время реализуется несколько онлайн-проектов обучения с помощью Blockly азам программирования школьников и дошкольников (самый известный из них code.org, основным партнёром которого является корпорация Microsoft, вложившая в проект 5 млн. долларов). В последнее время и в России обратили внимание на этот бесспорно уникальный и перспективный язык. Например, в декабре 2014 года в школах с большим успехом прошла всероссийская акция «Час Кода». Эта акция в результате стала ежегодной, получив поддержку Министерства образования и науки РФ, Министерства связи и массовых коммуникаций РФ, ряда ведущих российских ИТ-компаний. В декабре 2017 года акция с большим успехом прошла в четвёртый раз. Кроме всего прочего, этот язык, в отличие от Scratch, отлично встраивается в российскую классно-урочную систему, поэтому есть надежда, что он будет востребован и в российском образовании.

Blockly.Ru является образовательным проектом для будущих программистов. На сайте представлена серия заданий различных уровней (от простого к сложному), обучающих основам программирования. Данные задания могут быть использованы как в образовательных учреждениях, так и для самостоятельного обучения. Они предназначены для тех, кто не имеет опыта программирования. После выполнения всех заданий, обучающиеся будут лучше подготовлены к изучению обычных текстовых языков программирования. Blockly.Ru – не просто проект онлайн-обучения, но и, главным образом, онлайн-программирования. То есть, выполнение всех заданий производится непосредственно на сайте, причём в любом современном браузере, в любой операционной системе, без установки каких-либо дополнительный программ. Первоначально обучение было организовано исключительно на языке Blockly. В настоящее время существует возможность двухуровневого обучения: на Blockly и JavaScript. Для обучения начинающих используется Blockly, более опытных – JavaScript.

Взяв за основу программы и идеи корпорации Google (свободная лицензия Apache License 2.0), автору удалось создать уникальные приложения, отличные от гугловских, например: серия приложений «Панда» и «JS Panda», серия приключений кролика Банни («Банни идёт домой» и «Банни снова в пути»), «Робот», «Суперлабиринт» и многие другие. Созданы уникальные Задачник и Задачник JS – системы онлайн-программирования, а также решебники к ним: Решебник и Решебник JS.

По сути Blockly.Ru — это взгляд учителя информатики с 30-летним стажем на то, каким должно быть обучение программированию в школе; это некая мечта об идеальной модели обучения программированию и попытка воплотить эту мечту.

Информация
В этом разделе представлена наиболее полная подборка материалов о Blockly на русском языке: статьи, интервью, информация от разработчиков, и т. д.

Среда программирования
Это приложение является основным в системе Google Blockly. Оно позволяет создавать программы любой сложности, как на Blockly, так и компилируя их в JavaScript, PHP, Dart или Python. Это приложение может с успехом применяться для обучения школьников основам программирования.

Blockly — HTML
Это приложение позволяет максимально визуализировать процесс создания сайта с помощью языка гипертекстовой разметки HTML.

Игры
Игры для будущих программистов. Подробнее.

Приложения
Примеры приложений, использующих Blockly. Подробнее.

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

Учимся программировать
В разделе собраны приложения, предназначенные, в основном, для самостоятельного постижения школьниками азов программирования. Подробнее.

Больше о Blockly вы можете узнать, посетив раздел сайта «Информация». А также советую прочитать интересную статью «Графическая среда программирования Blockly (Блокли)» к.ф.-м.н. Семионенкова М.Н., переводчика ядра Blockly на русский язык, главного популяризатора Blockly в России.

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

Знакомство с интерфейсом Blockly

Для того чтобы ознакомиться со всеми доступными сочетаниями клавиш, в режиме редактора логики в левом нижнем углу экрана нажмите ЛКМ по иконке со знаком вопроса:

Редактор Blockly поддерживает использование сочетаний горячих клавиш:

Включить\выключить полноэкранный режим

Элементы управления рабочей областью

1. Развернуть редактор на весь экран
2. Фокусировка на центре рабочей области. Центр определяется по существующим блокам
3. Увеличить масштаб рабочей области
4. Уменьшить масштаб рабочей области
5. Корзина, из которой можно восстановить недавно удаленные блоки и группы блоков

Поиск по объектам

В редакторе логики присутствует поиск блоков по объектам в рабочей области, находящихся на сцене. Для его вызова, необходимо нажать комбинацию клавиш Ctrl + F

• Переход к предыдущему результату поиска
• Переход к следующему результату поиска
• Регистрозависимый поиск — результаты поиска становятся зависим от ввода символов верхнего или нижнего регистра

например если вы хотите найти «блок 1» и в поиске напишите «Блок 1» используя регистрозависимость, то «блок 1» у вас не найдется

• Поиск по словам — поиск происходит только по введенным словам

например если вы хотите найти «Игрок» и начнете писать слово по буквам, то результат не будет показан до тех пор, пока слово не будет введено полностью

• Закрыть окно поиска

Контекстное меню блоков

При нажатии на блок правой кнопкой мыши открывается контекстное меню блока, позволяющее:

• Дублировать блок
• Добавить комментарий к блоку
• Вставка внутри/снаружи

Данная функция меняет только визуальное отображение блока

• Свернуть/развернуть блок
• Отключить блок
• Удалить блок или группу блоков

Библиотека блоков

Из блоков, находящихся в библиотеке блоков, собирается сценарий. Все блоки сгруппированы по разделам согласно их назначению: «Логика», «Действия» и т.д.

Для объектов, расположенных на сцене, в разделе «Объекты» создаются подразделы по типу объектов

Подробнее о типах блоков вы можете прочитать в соответствующей статье

Поиск по блокам

Поиск по блокам осуществляется в верхней части библиотеки блоков. Поиск работает для названий блоков и объектов со сцены

Панель инструментов Blockly

Панель инструментов позволяет:

1. Применить изменения
2. Отменить изменения
3. Перейти в режим предпросмотра сцены VR
4. Перейти в режим предпросмотра сцены на ПК
5. Перейти в режим редактирования сцены на ПК
6. Открыть код (рекомендуется для опытных пользователей программистов)

Выделение использующихся блоков

Для удобства пользователя, была разработана функция выделения активных блоков, которые исполняются в проекте в данный момент. Это удобно для отладки и выявления ошибок в сценарии

В данном примере выделяются сразу два блока:

• Блок события, реагирующий на столкновение объектов на сцене. Это происходит, потому что при старте сцены мы анимируем куб, перемещая его в сторону, где находится сфера. Поэтому получается, что в момент столкновения куба с другим объектом триггерится этот блок
• Блок события, включающий в себя конструкцию из блоков действия над тремя объектами: конусом, кубом и сферой

Работа с логикой удаленных объектов

При удалении объекта с 3D сцены , пользователь увидит сообщение о том, что данный «Объект используется в логике. Хотите его удалить?»

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

Однако, если вы поместите новый, соответствующий по типу старому, объект и так же его назовете, вся связанная логика реанимируется и будет работать корректно