html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Современное визуальное программирование: Google Blockly


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

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

Google Blockly — это открытый OpenSource-проект, который выпущен под лицензией Apache License 2.0. Чтобы подчеркнуть то, что пока это только «демонстрация концепции и не более того», данный релиз не распространяется в традиционном виде отдельного файла (тарболла) с исходниками, а доступен лишь через синхронизацию с SVN-репозиторием разработчиков. На всякий случай также призываю не путать этот новый язык с одноименным фреймворком Blocky IO.

Google Blockly визуальное программирование лабиринт логотип лего конструктор

История языка и его концепция

Несмотря на множество самых разных версий происхождения этого очень необычного языка у программирующей публики, сама Google категорично утверждает, что источником вдохновения для Google Blockly послужил идеологически похожий и уже весьма известный проект для платформы Android — AppInventor. Google также добавляет, что сам AppInventor, в свою очередь, был вдохновлен языком Scratch.

Сейчас Scratch — это гораздо более навороченное решение, нежели чем Blockly. Это не только полноценный «визуальный объектно-ориентированный язык» (sic!) с элементами событийно-ориентированной логики, но и мультиплатформенное решение — его исходники доступны для Windows, Mac OS X и Linux. Несмотря на все навороты — это язык, который чаще всего используется для обучения детей основам программирования по всему миру.

scratch Google Blockly визуальное программирование лабиринт логотип лего конструктор

Чтобы проследить корни этой ветви глубже отметим, что главным разработчиком Scratch являлся Массачусетский технологический институт (MIT Media Lab), в котором и были заложены основы упомянутого AppInventor’а.

Существует альтернативная разработка для Scratch, которую принципиально сделал открытой Калифорнийский университет в Беркли (University of California at Berkeley) — это Snap (сейчас переименованный в Build Your Own Blocks, из-за существования многочисленных проектов-синоминов для Snap, например, это также специализированный язык программирования радиотелескопов). Последняя его версия, Snap 4 — это практически полностью переработанный вариант этого языка, написанный с учетом самых современных возможностей HTML5/JavaScript.

Аналогичная разработка давно существует и на платформе Mac OS X — это язык Stencyl, который специализируется на быстром создании игровых приложений для iOS и Flash.

scratch Google Blockly визуальное программирование лабиринт логотип лего конструктор

В целом, все эти языки относятся, равно как и Google Blockly, к широкой категории — Visual programming language (VPL), коих на данный момент существует уже более сотни.

Главные особенности Blockly

Но вернемся снова к нашему главному герою, разноцветному Blockly. Чтобы подчеркнуть новизну этого языка, его создатели выделяют в нём два принципиальных момента подсвечивающих его на фоне множества других VPL-языков. Во-первых, это сильный акцент на визуальной составляющей разработки; по аналогии с высокоуровневыми языками предложено называть подобный тип языков «сильно-визуальными» (все лего-подобные языки).

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

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

В последнем случае приводится пример возможностей расширения Gmail для создания фильтрации своих писем на Google Blockly. Google считает, что это типовой случай в современном программировании, например при написании некоего расширения для MS Office, когда 90% этого расширения это некая «полезная логика», а 10% — просто код сопряжения этого расширения с API хост-программы.

Google считает, что в таком случае очень удобно быстро «собрать» собственно прикладную логику приложения на Google Blockly, тогда как весь более низкоуровневый код работы с API — дописать уже на Python или Dart.

Google Blockly визуальное программирование лабиринт логотип лего конструктор пример программирование для детей

Листинг типичной программы на Blockly

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

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

Именно по причине будущего расширения этого языка принято решение не использовать подход упаковки логики в уже распространенные условно-символические программные схемы (data-flow metaphor languages), так как эксперименты показали, что такой устаревший способ представления тяжело поддается его расширению и поэтому к сожалению применим исключительно к узкоспециализированным областям программирования.

Будущее языка

Напомню, что здесь разработка осуществляется непосредственно в браузерном web-редакторе, и в процессе разработки программы её промежуточные результаты сохраняются и (вновь загружаются, если это нужно для рестарта проекта) в формате XML.

Google Blockly поддерживает не только обычные циклы и ветвления, но и рекурсию

В ближайшее время планируется реализовать: элементы отладки, поддержку мобильных устройств, работу с курсором для лучшего удобства работы, генерация кода для устройств на базе Arduino. Будут добавлены простейшие элементы событийно-ориентированного программирования — вызов обработчиков при возникновении определенных ситуаций, или при изменении статусов или переменных. В самое ближайшее время планируется существенно улучшить документацию, одновременно добавив множество новых блоков, а также реализовать возможность передачи внешних параметров в процедуры и функции. Также над логическими блоками (или сразу массивом из блоков) будет обеспечен набор стандартных операций: drag & drop, cut, copy и paste.

Один из главных разработчиков языка Нил Фрейзер (Neil Fraser) так описывает главную цель создания языка:

«Эта популярная концепция прошла очень длинный путь, от Ассемблера к Фортрану, затем к C++ и к Python, и наконец, — к Blockly. Это попытка подняться на ещё более высокий уровень абстракции с каждым шагом вперед, чтобы лишить программирование кастовости и закрытости, сделать его более естественным и доступным для как можно более широкого круга лиц».

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

Чуть отклоняясь от формата статьи, походу хочу обратить внимание читателя на внерабочие интересы главного разработчика Blockly, например на разработанную им центрифугу воспроизводящую условия гравитации Юпитера. Ответ на вопрос «зачем?» — снова возвращает нас в канву нашего основного повествования: Blockly это поиск всего нового, попытка выйти за формат всего застывшего, привычного и обыденного.

Пробуем Blockly на вкус

Сама Google предлагает всем поразмяться в языке Blockly на примере типичной задаче для событийно-ориентированного семейства языков — прохождении лабиринта, для решения которой уже развернута соответствующая рабочая web-среда. Но прежде чем браться за лабиринт, мы в качестве исходной точки, намалюем традиционное приложение «Hello World».

Google Blockly визуальное программирование лабиринт логотип лего конструктор пример программирование для детей Hello World введение

Вход в рабочую среду редактора среды разработки Blockly можно найти вот здесь. Для тех, кто предпочитает писать справо-налево (не будем называть их вслух по политическим причинам) — ваяет свой код вот в этой полит-корректной версии. Как видите, у Google Blockly с «этим» всё по-взрослому (кстати говоря, в Visual Studio также можно сделать это не намного сложнее).

О’кей, будем считать, что увидев привычное «Hello World» наша психика адаптировалась к новому языку (как минимум мы дали ей шанс), поэтому поднимаем планку выше — пишем небольшой скрипт, который распечатывает содержимое им же сгенерированного списка.

Google Blockly визуальное программирование лабиринт логотип лего конструктор пример программирование для детей Hello World введение список массив хеш

Теперь привожу уже автогенерацию этого же кода на JavaScript:

var message;
var Alist;
var x;
message = 'This is  Blockly in Action';
Alist = ['Start of Alist', 66, [message.length, Math.sin(90 / 180 * Math.PI), 'End of sublist']];
window.alert(message);
for (var x_index in  Alist) {
  x = Alist[x_index];
  window.alert(x);
}
window.alert('Thats All Folks');


А также на Python (я не привожу вариант на Dart — лично мне малоинтересный):

var message;
var Alist;
var x;
message = 'This is  Blockly in Action';
Alist = ['Start of Alist', 66, [message.length, Math.sin(90 / 180 * Math.PI), 'End of sublist']];
window.alert(message);
for (var x_index in  Alist) {
  x = Alist[x_index];
  window.alert(x);
}
window.alert('Thats All Folks');

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

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

Google Blockly визуальное программирование лабиринт логотип лего конструктор пример программирование для детей Hello World введение список массив хеш

А тем, кто хочет попробовать решить эту занимательную задачку самостоятельно, я подсказываю очень удобное алгоритмическое пособие именно для оптимизации решений для подобного рода задач. Если же вам интересно глянуть и на чужие решения «проблемы лабиринта», множество конкретных примеров решений на Google Blockly можно найти здесь или здесь.

И напоследок на всякий случай напоминаю, скорее всего понадобится отключить плагины в вашем браузере типа NoScript или AdBlock, при которых эти браузерно-визуальные среды разработки будут работать скорее всего не совсем полноценно.

Послесловие

Конечно, тяжко удержаться, чтобы не заглянуть в JavaScript-код этого Maze-приложения на Blockly. Лично мне больше всего понравился вот этот милый комментарий:

/**
* Execute the user's code. Heaven help us...
*/

Примерно этого же ожидаю и я от этой новой технологии.

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с blogerator.ru

2681
    +2663 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • pleshner
          • домен blogerator.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции