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编辑器使⽤卡合的图形块（后⽂称图形块为积⽊，像乐⾼积⽊⼀样，使⽤者可以⾃由搭配积⽊）来表⽰代码概念，如变量，逻辑表达式，循环等。它使得⽤户可以不必关注语法细节就能直接按照编程原则进⾏编程。图形块形式的编程易于初级⽤户或年龄较⼩的学⽣熟悉编程，利⽤图形块的编程⽅式，理解编程，实现创意！scratch编程app
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进⾏代码打包⽣成。 。
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等），具体使⽤⽅式可参考。
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提供了⼀种适合青少年的简化编程模型。
PXT：为Microsoft MakeCode编辑器提供⽀持的可视化和基于⽂本的编程环境。 PXT将Blocks，TypeScript，模拟器和编译器捆绑在⼀个库中。
Droplet：为Pencil Code提供⽀持的图形编程编辑器，其独特之处在于能够将代码转换为块。
Snap：⼀种Scratch风格的图形编程语⾔，它不是⼀个库，⽽是⼀个带有集成执⾏环境的完整应⽤程序。
好在Blockly是Google出品，社区⾮常强⼤，在前⼏年Google开发者⼤会上都有体积Blockly，⽽使⽤⼴泛的少⼉编程软件Scratch3.0，基于Blockly重写，Scratch是⼀款⾯向低龄的图形化编程软件，作品百万，社区⼤佬众多，⽽且在中国，占有绝⼤部分的市场空间。
4. Blockly优势
下⾯列举⼏个Blockly的优势：
⽤户可以将基于块编写的程序转换成通⽤编程语⾔，并平滑过渡到基于⽂本的编程。
关于Blockly的⼀切都是开放的：您可以⽤您⾃⼰的⽅式修改它，并在您⾃⼰的⽹站中使⽤它。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。