Blockly开发1

1.什么是Blockly？

Blockly是一个JavaScript可视化编程编辑器开发框架。目前，它是一个开源项目，由Google公司发起并维护。

2.Blockly能做什么？

官方解释是，Blockly是一个用于给web或者手机app添加可视化程序编辑器的框架。它采用图形化的咬合拼接的积木块表示变量、逻辑表达式、循环以及其他编程概念。它能让用户在不关心语法的情况下进行编程练习，同时摆脱那可怕的命令行。

Blockly is library that adds a visual code editor to web and mobile apps. The Blockly editor uses interlocking, graphical blocks to represent code concepts like variables, logical expressions, loops, and more. It allows users to apply programming principles without having to worry about syntax or the intimidation of a blinking cursor on the command line.

目前，Blockly主要应用在儿童编程领域。比较著名的有CODE、Microsoft MakeCode、micro:bit、Scratch Blocks等等。
个人认为Blockly可以应用到更多的领域中，因为Blockly提供了强大的自定义模块功能，所以，理论上它能将任何基于文本的逻辑（程序或配置文件）可视化。在需要编辑复杂的逻辑或大量灵活配置的地方，都可以用Blockly改善用户体验，减少错误概率，降低学习成本。例如，游戏逻辑编辑器、艺术装置的控制、数字图像和动画程序化生成等等。

下图展示了Blockly的核心功能：将图形化的积木块逻辑（左侧）转化为代码（右侧）。

 

Blockly核心功能

3. 如何获得Blockly？

Blockly目前已经在Github上开源。可以从github（https://github.com/google/blockly）上获取Blockly的最新版本，查看已知的bug和最新的开发进度。

4.如何学习Blockly？

Google在Blockly开发者网站（https://developers.google.com/blockly/）上提供了详细的开发教程，帮助文档以及官方示例。其中官方示例在github的源码中均有提供。
还可以在Youtube等视频网站上搜索Blockly视频教程，或在Google上搜索相关的文字教程和博客。
目前Blockly中文开发教程还比较少，大部分是关于如何使用Blockly的，所以百度搜索的结果价值很有限。

5.关于本攻略

本攻略面向有一定程序开发经验的开发者。主要介绍如何使用Blockly框架开发web应用。
不涉及Blocky的使用方法以及核心源码分析。（源码可能偶尔会拿出来解释一些接口，帮助理解和加深记忆）

在开始后面的内容之前，你需要先完成一下四件事情：

• 会用HTML，JS进行简单的web应用开发
• 准备Chrome浏览器
• 有一个熟悉的文本编辑器（vscode，sublime等）
• 科学上网工具（许多问题的解决方案都在那些不存在的网站上）
• 最重要的，在github上下载blockly工程并解压到你的工作目录（建议新建一个文件夹）