我们不仅销售产品,我们还传播知识
商品分类

Blockly简介

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

v2-0eb41878032ca32c121a865c1549b0fa_720w

1. Blockly界面介绍

v2-34f4b86587c2af8bd02d07e4981aa4ff_720w

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例子

v2-a88220e92336ec36b1c2283dc1c5e3ab_720w


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

playground例子

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

v2-7726816e3808f012594ca687e37da1b7_720w


左侧即为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源码地址
v2-0e70b187e2008b05926591eafd8e5a2b_720w
  • PXT:为Microsoft MakeCode编辑器提供支持的可视化和基于文本的编程环境。 PXT将Blocks,TypeScript,模拟器和编译器捆绑在一个库中。MakeCode主页源码地址
v2-77cdb87b862d97b2682eaa6fa82b595c_720w
v2-11fa8b042b9c5b0bcd1967496663817e_720w
  • Snap:一种Scratch风格的图形编程语言,它不是一个库,而是一个带有集成执行环境的完整应用程序。Snap主页源码地址
v2-e70d049c17fe6e686b84387a1e997e58_720w


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

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

发表回复

登录后才能评论
微信群
微信群
联系我们

联系我们

微信:13823392571

在线咨询:点击这里给我发消息

工作时间:周一至周五,9:30-18:30,节假日休息

微信客服
微信客服
分享本页
返回顶部