拼图也能写代码?快来试试这个谷歌开源的工具!

新闻 开发工具
Blockly 是 Google 开源的基于 web 的可视化程序编辑器,用户可以将一些定义好的图形块拼接在一起,用来构建应用程序。

  【导语】:Blockly 是 Google 开源的基于 web 的可视化程序编辑器,用户可以将一些定义好的图形块拼接在一起,用来构建应用程序。

简介

Blockly 是一个向 Web 和移动应用程序添加可视化代码编辑器的库,块之间使用互锁的图形块来表示代码,如变量,逻辑表达式,循环等。该编辑器将代码表示为一个个的图形块,通过图形块之间的连接保证语法的正确性,同时支持自定义块以连接到应用程序中。

从用户的角度看,Blockly 是一种直观。可视化的代码构建方式,对于开发人员来说,Blockly 是一种现成的 UI,用于创建一种可视化语言,该语言可以生成语法正确的用户代码。目前支持JS、Python、PHP、Lua、Dart。

它是一个纯JavaScript 库,不依赖于服务端,与主流浏览器兼容,包括Chrome、Firefox、Safari、Opera和IE(IE11),并且支持定制和扩展。

Blockly 具有以下特点和优势:

  • 可导出代码。用户可以将基于块的程序提取导出,并用于自己的文本编程中。
  • 开源。Blockly的所有内容都是开放的。
  • 可扩展。支持自定义块或删除不需要的块和功能来进行功能调整定制。
  • 功能强大。可以用来执行计算复杂的编程任务,如计算标准差。
  • 国际化。目前已经被翻译成40多种语言。
  • 其他类似的工具:Scratch Blocks、PXT、Droplet、Snap。

解决 Blockly Games 的迷宫问题的例子:

项目地址:

https://github.com/google/blockly

简单使用

下载安装方法很简单,使用npm直接安装即可:

  1. npm install blockly 

Blockly工具箱

工具箱是用户可以从中创建新块的侧边菜单,使用XML或JSON指定工具箱的结构,并在注入页面后被传递给Blockly。

XML格式:

  1. <xml id="toolbox" style="display: none"
  2.  
  3. <category name="Logic" colour="210">...</category> 
  4.  
  5. <category name="Loops" colour="120">...</category> 
  6.  
  7. <category name="Math" colour="230">...</category> 
  8.  
  9. <category name="Colour" colour="20">...</category> 
  10.  
  11. <category name="Variables" colour="330" custom="VARIABLE"></category> 
  12.  
  13. <category name="Functions" colour="290" custom="PROCEDURE"></category> 
  14.  
  15. </xml> 

JSON格式:

  1.  
  2. "contents": [ 
  3.  
  4.  
  5. "kind""category"
  6.  
  7. "name""Logic"
  8.  
  9. "colour""210" 
  10.  
  11. }, 
  12.  
  13.  
  14. "kind""category"
  15.  
  16. "name""Loops"
  17.  
  18. "colour""120" 
  19.  
  20.  
  21.  

效果如下:

创建固定大小的Blockly工作区

引入Blockly库和用户语言集:

  1. <script src="blockly_compressed.js"></script> 
  2.  
  3. <script src="blocks_compressed.js"></script> 
  4.  
  5. <script src="msg/js/en.js"></script> 

添加空白div元素:

  1. <div id="blocklyDiv" style="height: 480px; width: 600px;"></div> 

添加工具箱

  1. <xml id="toolbox" style="display: none"
  2.  
  3. <block type="controls_if"></block> 
  4.  
  5. <block type="controls_repeat_ext"></block> 
  6.  
  7. <block type="logic_compare"></block> 
  8.  
  9. <block type="math_number"></block> 
  10.  
  11. <block type="math_arithmetic"></block> 
  12.  
  13. <block type="text"></block> 
  14.  
  15. <block type="text_print"></block> 
  16.  
  17. </xml> 

执行以下代码将Blockly注入到div中

  1. <script> 
  2.  
  3. var workspace = Blockly.inject('blocklyDiv'
  4.  
  5. {toolbox: document.getElementById('toolbox')}); 
  6.  
  7. </script> 

效果如下:

代码生成器:

确认所需的语言生成器,引入不同的库文件:

  1. <script src="javascript_compressed.js"></script> 
  2.  
  3. <script src="python_compressed.js"></script> 
  4.  
  5. <script src="php_compressed.js"></script> 
  6.  
  7. <script src="lua_compressed.js"></script> 
  8.  
  9. <script src="dart_compressed.js"></script> 

语言生成器库要紧接着blockly_compressed.js引入:

  1. <script src="blockly_compressed.js"></script> 
  2.  
  3. <script src="javascript_compressed.js"></script> 

导出代码:

  1. var code = Blockly.JavaScript.workspaceToCode(workspace); 

实时生成。生成代码的效率非常高,频繁调用不会有什么大问题,可以通过向Blockly的change事件添加监听器来实时生成和显示代码:

  1. function myUpdateFunction(event) { 
  2.  
  3. var code = Blockly.JavaScript.workspaceToCode(workspace); 
  4.  
  5. document.getElementById('textarea').value = code; 
  6.  
  7.  
  8. workspace.addChangeListener(myUpdateFunction); 

效果如下:

 

创建自定义块

Blockly拥有大量预定义的块,从数学函数导循环结构等应有尽有。但是有时候我们仍然需要自定义块以符合我们个性化的需求。在通常情况下,自定义块最快的方法就是找到一个最符合需求并且已经存在的块,在已有基础上对其进行修改。

小结

以上只是对 Blockly 基础和核心的功能做简要介绍,更详细的文档请参考官方网站。

https://developers.google.com/blockly/

 

 

责任编辑:张燕妮 来源: 开源前哨
相关推荐

2024-08-09 10:20:06

PG工具PostgreSQL

2023-10-11 16:33:37

2024-11-08 09:29:18

ExcelPostgreSQL类报表

2019-01-07 14:43:40

Python抢票刷票

2023-02-01 10:40:01

2021-06-24 16:18:03

Cube.js数据分析开源

2022-06-12 23:11:40

Windows 11微软升级

2016-09-23 18:32:42

iTunesIOS 10苹果

2020-12-07 10:59:01

Python数据工具

2020-07-10 12:06:28

WebpackBundleless浏览器

2022-02-09 07:44:30

Go源码工具

2022-01-26 07:18:57

工具GoGo 项目

2020-08-25 08:03:59

测试Sharness结构

2019-01-16 16:00:33

2023-08-15 08:42:41

2018-02-05 08:58:36

Python神经网络识别图像

2021-05-18 11:40:11

开源脚本工具

2021-04-12 13:36:59

开源技术 工具

2020-12-02 08:31:47

Elasticsear

2020-11-04 16:34:45

单元测试技术
点赞
收藏

51CTO技术栈公众号