Blockly

Blockly简介

A library for building visual programming editors. 

Blockly 是个库，可用来构建可视化编程编辑器

Blockly is being used by hundreds of projects, most of them educational:

Blockly被数以百计的项目使用 , 其中大部分与教育有关，例如：

在线编辑器

https://blockly-demo.appspot.com/static/tests/playground.html

本地部署

去GitHub上下载源码：

https://github.com/google/blockly

解压 压缩包

下载本地Closure库，详细步骤在 “问题” 里

用Chrome浏览器打开 tests文件夹下的 playground.html 文件，URL 例如：

file:///H:/Software/blockly-master/blockly-master/tests/playground.html

验证 是否 成功，看浏览器中各个部分是否都正常显示，尤其是右侧的：

 

至此，本地部署结束 。

URL是本地的，JS代码也自动生成了

但似乎无法运行

YouTube上的教学视频

https://github.com/google/blockly    源码在GitHub（持续更新），谷歌自己的仓库里也有

文档

https://developers.google.com/blockly/guides/get-started/web

Blockly官网  |  Google Developers

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

重点是Custom Blocks，可视化地自定义 块（可以看做是Java的类）

https://blockly-demo.appspot.com/static/demos/blockfactory/index.html

可以用Block Factory可视化生成的代码   https://developers.google.com/blockly/guides/create-custom-blocks/block-factory

或者

自己写JSON和JS

YouTube上的教学视频：

https://www.youtube.com/results?search_query=blockly

Blockly Games

https://blockly-games.appspot.com/

Google开源的Blocky编程语言 , 几乎和MIT的Scratch编程语言一模一样

APP inventor2是一种应用 , MIT

悲催的是，Google已放弃Android应用开发工具App Inventor1 , 现在把它当做一款教育工具，很好

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

最初是google发起，但是现在转给了MIT在开发维护，开源的，网址：

http://contest.appinventor.mit.edu/

要像google的blockly要能模块化，方便自己(第三方 , 非官方人员)做完后给别人用。经检查后，添加到官方的统一的库里 . blockly的积木只要用json声明一下就自动生成积木 , 不需要写太多代码

问题

Closure库无法加载

现象：

1，浏览器弹窗提示：

2，右侧拖拽控件的部分不见了，看控制台发现报错

分析：它打算在线加载这个库，但无法***（fan1 qiang2），所以加载不到。

解决方法猜想：把库弄到本地，我猜它在无法加载在线的库的情况下，会自动加载本地的库

解决方法：

    查阅 官方文档： https://developers.google.com/blockly/guides/modify/web/closure 发现：

解压压缩包到 blockly文件夹同级的目录下，比如：

 

把文件夹命名成  closure-library ， 我的原来叫  google-closure-library-a53790d

无法跨域

在桌面上的Chrome浏览器的图标上右键

 

加上  --allow-file-access-from-files，如图中被选中的蓝色部分：

 

null