Blockly-图形化编程工具

本文主要是介绍Blockly-图形化编程工具，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Blockly是一个完全可视化的模块化编程网站，属于图形化编程语言。

2012年6月，Google发布了完全可视化的编程语言Google Blockly，类似MIT的儿童编程语言Scratch， 你可以通过类似玩乐高玩具的方式用一块块图形对象构建出应用程序。每个图形对象都是代码块，你可以将它们拼接起来，创造出简单功能，然后将一个个简单功能组合起来，构建出一个程序。整个过程只需要鼠标的拖曳，不需要键盘敲击。类似Google最近放弃的App Inventor，不清楚Blockly与App Inventor或Scratch有何联系。 

Blockly一种在网页上运行的图形化编程语言。使用者以拖拽拼图的方式开发出应用程序。不需要任何的代码编写。例如：

Blockly编程示例

效果演示：走迷宫 – 使用Blockly语言破解迷宫路径。

代码转换 – 把Blockly代码转换成JavaScript, Dart, Python 或 XML 代码。

RTL – Blockly语言中right-to-left模式中的效果(阿拉伯语和希伯来语习惯).

Blockly语言2012年还处于技术探讨阶段，希望开发人员使用Blockly，给予反馈，想出新的能使用它的地方，所有的代码都是开源的。

Blockly是为应用程序添加可视代码编辑器的应用。Blockly编辑器使用卡合的图形块（后文称图形块为积木，像乐高积木一样，使用者可以自由搭配积木）来表示代码概念，如变量，逻辑表达式，循环等。它使得用户可以不必关注语法细节就能直接按照编程原则进行编程。图形块形式的编程易于初级用户或年龄较小的学生熟悉编程，利用图形块的编程方式，理解编程，实现创意！

1. Blockly界面介绍

Blockly的优势不在于定义界面有哪些功能积木，重要的是可灵活定义积木块，自由搭配积木块，使一堆卡合的积木块翻译出一种通用的XML语言，运算出相应的结果。
界面整体称为工作空间，主要分为三个区域，分类区、积木区、脚本区

• 分类区（Categories）：用于将Blocks按模块进行分类，Blockly默认定义了8种分类，每种分类使用不同的颜色，有不同功能，譬如Loops分类存放循环积木，Math分类存放数学操作积木等；
• 积木区（Blocks）：用于存放分类下的积木，不同积木代表不同的功能，在Blockly中，积木可以使用开发者工具，或者编写代码灵活定义积木；
• 脚本区（Scripts）：用于编写代码的区域，将积木区中的积木，拖动到脚本区，积木进行卡合形成积木组，积木组即可成为可执行的代码段，执行代码段获得运算结果；
• 工作空间（Workspace）：分类区、积木区、脚本区组合为工作空间，Blockly操作以Workspace为核心。

Blockly初始时，将分类XML转化为分类区和积木区，生成Workspace，运行时，将脚本区中的积木组，转成对应的代码段，然后转成可执行的高级编程语言，获得结果。

2. Blockly使用

源码

Blockly由JavaScript编写，利用Google的closure-library技术实现，使用npm进行包管理，gulp进行代码打包生成。Blockly源码地址 。

1. 安装包 npm install
2. 打包 npm build

另外npm build打包时会生成4类文件blockly_compressed.js、blockly_uncompressed.js、blocks_compressed.js、[language]-compressed.js,blockly文件为核心代码文件，blocks文件为Blocks积木代码文件，[language]文件为积木对应的高级语言代码文件。

Demo例子

Blockly Demo例子可以直观的感受Blockly使用方法，从Workspace的生成（toolbox、fixed、resizable等），到积木组的执行（interpreter、code等），再到积木的制作（graph、blockfactory等），具体使用方式可参考Blockly的开发者文档。

playground例子

Blockly引入了playground例子，后期Scratch每一个模块都是使用playground为例子，playground例子包含了项目绝大部分功能。

左侧即为Blockly比较重要的特性，每一项都可以触发Workspace事件，使用不同的方式相应。
LTR：控制分类或的对齐线在Workspace左侧还是右侧对其；
Categories：显示不同的分类；
Start：控制分类在Workspace上下左右侧显示；
Classic:Workspace的主题；
Export/Import: 脚本区的脚本导入导出xml；
To [language]:脚本区的脚本生成对应高级语言代码；
Stress test:使用不同的方式生成积木代码，显示先脚本区；
Log event:Workspace的事件日志记录器，勾选后，控制台将会打印事件日志；

3. Blockly类似软件

在越来越丰富的可视化编程环境中，Blockly仅仅是其中的一个，Blockly不是所有应用程序的解决方案。以下是一些您可能会发现有用的其他可视化编辑器：

• Scratch Blocks：基于Blockly代码库并由麻省理工学院Scratch团队的设计人员设计，Scratch Blocks提供了一种适合青少年的简化编程模型。Scratch主页Scratch源码地址

• PXT：为Microsoft MakeCode编辑器提供支持的可视化和基于文本的编程环境。 PXT将Blocks，TypeScript，模拟器和编译器捆绑在一个库中。MakeCode主页源码地址

• Droplet：为Pencil Code提供支持的图形编程编辑器，其独特之处在于能够将代码转换为块。Pencil Code主页源码地址

• Snap：一种Scratch风格的图形编程语言，它不是一个库，而是一个带有集成执行环境的完整应用程序。Snap主页源码地址

好在Blockly是Google出品，社区非常强大，在前几年Google开发者大会上都有体积Blockly，而使用广泛的少儿编程软件Scratch3.0，基于Blockly重写，Scratch是一款面向低龄的图形化编程软件，作品百万，社区大佬众多，而且在中国，占有绝大部分的市场空间。
4. Blockly优势
下面列举几个Blockly的优势：

• 用户可以将基于块编写的程序转换成通用编程语言，并平滑过渡到基于文本的编程。
• 关于Blockly的一切都是开放的：您可以用您自己的方式修改它，并在您自己的网站中使用它。
• Blockly不仅仅是玩具，您可以用它实现复杂的编程任务，例如在单个块中计算标准偏差。
• Blockly已被翻译成40多种语言，包括阿拉伯语和希伯来语的从右到左的版本。

这篇关于Blockly-图形化编程工具的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！