这篇文章我们将使用blockly来做一个完整的项目。

这篇教程涵盖以下内容：

• 从拼搭好的积木块中，生成(generate)python代码
• 自定义自己的积木块, 并生成对应python代码
• 在浏览器中运行python代码
• 整合以上部分，使用积木块驱动turtle

效果展示

生成的代码为:

turtle是编程教学中的一个经典概念(另一个经典概念是猫(来自Scratch))，turtle最初由Papert在他的Logo语言引入，Logo内置一套海龟绘图（Turtle Graphics）系统，通过向海龟发送命令，用户可以直观地学习程序的运行过程，关于这块的历史沿革，可以参考我之前的文章Scratch的前世今生

利用blockly generate python代码

如何使用blockly generate代码，我们已经在blockly开发之生成并运行js代码(1)做了手把手教学。

在blockly开发之生成并运行js代码(1)中，我们将积木块generate成js代码。blockly默认支持将积木块generate成以下6种代码:

• JavaScript
• Python
• PHP
• Lua
• Dart
• XML

你可以在Code Editor中体验

本章的目标是generate出python代码，过程十分简洁，你只需要做2件事：

1. 引入python_compressed.js
2. generate出python代码:var code = Blockly.Python.workspaceToCode(demoWorkspace);

完整的代码参考:blockly_3_1_generate_python

你要做的只有这些

自定义自己的积木块

blockly只提供了基础的积木块（基本的语言结构），你常常需要定义自己的积木块。

自定义积木块时你实际在做两件事:

1. 定义积木的外观
2. 定义出当前积木对应的代码

判断一袋狗粮好不好吃的一种方法是看制造者自己吃不吃，我们知道Python社区用Python实现了Python(pypi)。blockly社区中自定义积木外观的工具也是用blockly实现的: Blockly Developer Tools，文档参考:Blockly Developer Tools docs

通过拖拽积木，你就能轻松定义出积木的外观。

截图中有两处值得注意：

红色框中是你自定义积木外观的代码描述，有两种风格你可以选择（js/json），使用json风格你会得到一个好处:可以随时将json贴回Blockly Developer Tools，从而得到对应的积木。在你生成自定义积木的时候，建议取得分享链接，以便于日后对积木做调整。

而绿色框中则是该积木generate出的代码，你可以选择目标语言,在此我选择Python

在blockly_3_2_custom_block_generate_python中展示了一个完整的自定义积木，如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

//外观 使用js风格的描述
Blockly.Blocks.draw_stamp = {
    init: function() {
        this.setColour(160),
        this.appendDummyInput().appendField("stamp"),
        this.setPreviousStatement(!0),
        this.setNextStatement(!0)
    }
},

//generate Python
Blockly.Python.draw_stamp = function(a) {
    Blockly.Python.definitions_.import_turtle = "import turtle\nturtle=turtle.Turtle()";
    return "turtle.stamp()\n"
}

关于自定义积木的话题很大，我们找机会专门讨论，在此就不展开

浏览器中运行python

目前有好几个项目允许你在浏览器中运行python，其中最流行的解决方案是:skulpt，也许也是目前最成熟的解决方案,好些大型项目都在用它,诸如:

• tynker
• coursera
• trinket

浏览器无处不在，如果能在浏览器中直接运行python，不仅免去了新用户安装环境的麻烦，教学者还可以利用js的动态性，灵活地设计课程并与用户交互，很方便对用户做引导。skulpt的主要使用场景是教学，以上便是原因。

skulpt使用js实现了python解释器(python2.x)，让python能运行在所有主流浏览器中，如此一来，你就可以轻松在pc/手机/ipad的浏览器中学习python

skulpt是一个强大而灵活的项目，自带很多电池，且有很好的可扩展性(自定义模块)，如果你有兴趣，可以参考:skulpt官网

turtle是skulpt自带的模块，你可以在Our First Turtle Program体验它

在浏览器中使用python驱动turtle，官方给出了示例源码:simpleskulpt

整合

经过上边的一圈探索，来看看我们现在能够做到哪些事:

• 从拼搭好的积木块中，生成(generate)python代码
• 自定义自己的积木块, 并生成对应python代码
• 在浏览器中运行python代码
• 使用python控制浏览器中turtle

接下来，整合以上部分，使用blockly积木块来驱动turtle，最小原型参考:blockly_4_run_python_in_browser_simple

上边的最小原型修改自simpleskulpt。修改之处仅有: 把var prog = document.getElementById("yourcode").value; 改为blockly生成的代码:var prog = Blockly.Python.workspaceToCode(demoWorkspace); , 如此干净整洁!

这个例子中，我们可以看出blockly的灵活性，如我们在blockly入门与介绍中所言，blockly是个编辑器，只负责生成代码，至于代码之后用与干吗，它通通不关心。如此一来，就不产生耦合了。

要了让blockly能做出丰富的东西，我们需要把turtle的所有操作原语全都暴露为积木块，这个工作我偷了个懒，直接抠了trinket的源码。完整的代码参考:blockly_5_run_python_in_browser_turtle_finish。积木部分参考:my_blocks.js（js代码中变量被压缩过，可读性不大好）

如此一来我们就完成了整个项目.

这个项目很有代表性，使用blockly制作一个application的步骤，我们在以上过程中都经历了

这些步骤官方描述为:

• 集成blockly编辑器
• 定义你的app里的功能块（block）
• 构建app的其余部分，blockly仅充当代码生成器，你需要决定这些用户生成的代码用于做什么，这也是你的app的核心功能所在

关于最后一点，blockly官方说的很笼统，针对少儿编程这一领域，第三点往往可以拆解为几类典型问题。这方面我们之后有空再谈

相关源码

以下源码展示了渐进的学习过程:

• blockly_3_1_generate_python
• blockly_3_2_custom_block_generate_python
• blockly_4_run_python_in_browser_simple
• blockly_5_run_python_in_browser_turtle_finish