构建一个Blockly应用一般包括以下步骤：集成Blockly编辑器 - 最简单的Blockly编辑器包含了一个“工具箱”来存储的块(block)类型，和一个用于安装块的“工作区”。详细集成方法请参考使用 Blockly，或官方文档Web和Android

创建应用块 - 集成Blockly后，就需要创建一些用户代码块，并将其添加到Blockly“工具箱”。创建自定义块参考官方文档Create Custom Blocks Overview

构建应用的其余部分 - Blockly只是解决一代码生成的部分，而应用的核心是如何使用代码，这部分还需要开发者自行实现

开始：

1.下载源码

2. 注入 Blockly

安装 Blockly 并验证其可用后，就可以引入 Blockly。如，将 Blockly 在Web页面的一个固定尺寸的div：

3. 配置

上面的示例的Blockly.inject行中，第二个参数是一个键/值对字典。其用于配置Blockly，可用的配置项有：collapse - boolean。允许“块”折叠或展开。如果工具箱有类别，默认为true；其它情况为false

comments - boolean。允许“块”有注释。如果工具箱有类别，默认为true；其它情况为false

css - boolean。如果设置false，则不注入 CSS；默认为true

disable - boolean。使“块”不可用。如果工具箱有类别，默认为true；其它情况为false

grid - object。配置一个网格，使块可以捕获到。见Grid

horizontalLayout - boolean。设置true则工具箱使用水平布局；false则使用垂直布局。默认为false

maxBlocks - number。最大可创建的“块”数量。默认为Infinity

media - string。Blockly 媒体文件目录路径。默认为"https://blockly-demo.appspot.com/static/media/"

oneBasedIndex - boolean。设置为true则字符串操作索引会从1开始；false则从0开始。默认为true

readOnly - boolean。设置为true，则禁止用户编辑。影响“工具箱”和“垃圾桶”。默认为false

rtl - boolean。设置为true，则镜像化编辑器。默认为false。见RTL Demo

scrollbars - boolean。设置工作区是否可滚动。如果工具箱有类别，默认为true；其它情况为false

sounds - boolean。设置为false，则点击或删除时不会播放声音。默认为true

toolbox - XML节点或string。用户可用“分类”和“块”的结构树。

toolboxPosition - string。设置为start，则工具箱在上部(水平显示时)或左则(垂直显示时)或右则(垂直LTR显示时)。设置为end，则在相对僧。默认为start

trashcan - boolean。显示或隐藏“垃圾桶”。如果工具箱有类别，默认为true；其它情况为false

zoom - object。工作区缩放配置。见Zoom

在以上配置中，最重要的选项是toolbox。它是一个XML节点树，用于指定工具箱中有哪些可用的“块”、块如何分布、及是否有类别。

另外，除 Blockly 的默认“块”外，定义块需要通过调用你Web应用的API来构建。

4. 代码生成

Blockly 是编程语言，也就不能“运行” Blockly 程序。但是你可以将 Blockly 转为用户所需要的JavaScript、Python、PHP、Dart或其它语言

5. “块”的导入、导出

如果你需要将“块”导出，以在其它应用中使用或在以后还原。可以调用以下XML：

var xml = Blockly.Xml.workspaceToDom(workspace);

var xml_text = Blockly.Xml.domToText(xml);

调用后，会生成一个最小化的包含用户“块”的XML。如果想使导出的XML更可读，那么可以使用Blockly.Xml.domToPrettyText来代替上面方法。

恢复己导出的XML，像下面这样即可：

var xml = Blockly.Xml.textToDom(xml_text);

Blockly.Xml.domToWorkspace(xml, workspace);

6. 云存储

Blockly 带有一个可选的云存储功能。它允许用户保存、加载、共享和发布程序。如果你的项目是在云端托管，那么你可以利用此服务的优势。