Blockly简介

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


卡合

1. Blockly界面介绍

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

Demo例子

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

playground例子

Blockly引入了playground例子,后期Scratch每一个模块都是使用playground为例子,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源码地址

    Scratch Gui

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

    MakeCode

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

    Pencil Code

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

    Snap

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

    4. Blockly优势

    下面列举几个Blockly的优势:

  • 用户可以将基于块编写的程序转换成通用编程语言,并平滑过渡到基于文本的编程。

  • 关于Blockly的一切都是开放的:您可以用您自己的方式修改它,并在您自己的网站中使用它。

  • Blockly不仅仅是玩具,您可以用它实现复杂的编程任务,例如在单个块中计算标准偏差。

  • Blockly已被翻译成40多种语言,包括阿拉伯语和希伯来语的从右到左的版本。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,233评论 6 495
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,357评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,831评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,313评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,417评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,470评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,482评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,265评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,708评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,997评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,176评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,503评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,150评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,391评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,034评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,063评论 2 352

推荐阅读更多精彩内容

  • 简介 developers.google.cn/blockly/guides/overview Blockly是向...
    zhangwg0514阅读 2,059评论 0 2
  • 原文:https://developers.google.com/blockly/guides/overview ...
    孤星伴明月阅读 5,449评论 1 0
  • scratch软件的逻辑不复杂,就是用blockly生成语句块,然后用虚拟机抽象成底层语法,最后再调用render...
    hanxianshe_9530阅读 1,254评论 0 1
  • 只是无意的走走 然后就忘了初衷 一个自然的举动 无心就成了有心 越是抱的更紧 越是给你伤心
    飞长视觉阅读 210评论 0 3
  • 我们藏着的心事,被时光酿成了酒,在无数失眠的夜晚,醉了几许星光。 那些不能说的秘密,被你写成了故事,等待别人感同身...
    麒麟文化阅读 135评论 0 1