Professional Documents
Culture Documents
Blockly 简介
CS Education Should Start With Kids
“计算机普及要从娃娃抓起 ” 邓小平,1984
How to Teach Kids Coding
For many parents ...
寓教于乐 * 图形化编程
Blockly App Demo: code.org
Blockly App Demo: OzoBlockly
Blockly App Demo: App Inventor
More Apps Built with Blockly
Blockly An Open Source Library
for Building Visual Programming Editor
Cross-platform
➢ Web, Android, iOS
➢ Chrome, Firefox, Safari, Opera, and IE.
Exportable code
➢ JavaScript, Python, PHP, Lua, Dart
Highly customizable and Extensible
➢ Custom blocks and code generation
International
➢ 40+ languages, including RTL support
Scratch Blocks
➢ Launched in 2016 at Google I/O
➢ Collaboration between Google and MIT
➢ A Fork of Blockly at LLK Repo
➢ Tailored for Creative Young Learners
Build Blockly App
OutlineEditor
Blockly Blocks
Toolbox
Blockly
Programs
Workspace
Configure
Outline
Blockly App Block Definitions JavaScript Generator
Python Generator
Blockly Editor
window.onload = function() {
overlayBlocklyWorkspace();
window.addEventListener('resize', overlayBlocklyWorkspace);
var workspace = Blockly.inject('blocklyDiv', …);
}
Save
Workspace
// Export blocks in workspace in XML
var dom = Blockly.Xml.workspaceToDom(workspace);
Blockly.Xml.domToWorkspace(dom, workspace);
Configure
Toolbox <xml id="toolbox" style="display: none">
<category name="Control">
<block type="controls_if"></block>
<block type="controls_whileUntil"></block>
<block type="controls_for">
</category>
<category name="Logic">
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_boolean"></block>
</category>
</xml>
Create
Variables <category name="Variables" custom="VARIABLE"></category>
Define <category name="Functions" custom="PROCEDURE"></category>
Functions
Block <block type="controls_for">
<value name="FROM">
Groups <shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="TO">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
<value name="BY">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
Code <script src="blockly_compressed.js"></script>
Generation <script src="blocks_compressed.js"></script>
function myUpdateFunction(event) {
// Call Blockly.Language.workspaceToCode(...) to generate code
var code = Blockly.JavaScript.workspaceToCode(workspace);
document.getElementById(myCodeViewer).value = code;
}
var math_number_block = {
"output": "Number",
... ...
};
External vs var loop = {
Inline Inputs "inputInlines": false,
... ...
};
var math_change_block = {
"colour": 230
... ...
};
Blockly.Blocks['my_math_change'] = {
init: function() {
this.jsonInit(my_math_change_block);
// Assign 'this' to a variable to be used in the closure below.
var thisBlock = this;
// Set tooltip dynamically.
this.setTooltip(function() {
return 'Add a number to variable "%1".'.replace('%1',
thisBlock.getFieldValue('VAR'));
});
}
}
Code var my_math_change_block = {
Generator "message0": "change %1 by %2",
"args0": [
{"type": "field_variable", "name": "VAR", "variable": "item"},
{"type": "input_value", "name": "DELTA", "check": "Number"}
],
... ...
}
Blockly.JavaScript['my_math_change'] = function(block) {
// Add to a variable in place.
var delta = Blockly.JavaScript.valueToCode(
block, 'DELTA', Blockly.JavaScript.ORDER_ADDITION) || '0';
var name = Blockly.JavaScript.variableDB_.getName(
block.getFieldValue('VAR'), Blockly.Variables.NAME_TYPE);
return name + ' = ' + '(typeof ' + name + ' == \'number\' ? '
+ name + ' : 0) + ' + delta + ';\n';
};
Outline
Blockly
Developer Tool
Blockly for Android and iOS
Developer Preview
Rendering library
➢ Full native versions for Android and iOS
➢ Feature complete, though bugs exist
Configuration
➢ XML toolbox same format as web
➢ Layout specific to each platform
Custom blocks
➢ Uses JSON block definitions
Work in Progress
➢ Functions, Mutators, i18n, undo/redo, UI
customization
public class MyActivity extends AbstractBlocklyActivity {
Blockly
for Android @Override protected String getToolboxContentsXmlPath() {
return "default/toolbox.xml";
}
}
Blockly for iOS
// Add WorkbenchViewController to an existing UIViewController
override func viewDidLoad() {
super.viewDidLoad()
// Create editor
let workbenchViewController = WorkbenchViewController(style: .defaultStyle)
// Add editor to this view controller
addChildViewController(workbenchViewController)
view.addSubview(workbenchViewController.view)
workbenchViewController.view.frame = view.bounds
workbenchViewController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
workbenchViewController.didMove(toParentViewController: self)
}
// Create a workbench editor
Blockly for iOS let workbenchViewController = WorkbenchViewController(style: .defaultStyle)
let blockFactory = BlockFactory()
// Load a block factory with the default blocks
blockFactory.load(fromDefaultFiles: .allDefault)
// Load custom blocks from JSON files
// blockFactory.load(fromJSONPaths: ["my_blocks.json"])
do {
// Load toolbox configuration from `toolbox.xml`
if let toolboxFile = Bundle.main.path(forResource: "toolbox", ofType: "xml") {
let toolboxXML = try String(contentsOfFile: toolboxFile,
encoding: String.Encoding.utf8)
let toolbox = try Toolbox.makeToolbox(xmlString: toolboxXML, factory: blockFactory)
// Load the toolbox into the workbench
try workbenchViewController.loadToolbox(toolbox)
} else {
print("Could not load 'toolbox.xml'")
}
} catch let error {
// Handle error
}
Outline
Android and
iOS Examples
Blockly for Android
● https://github.com/google/blockly-android
● https://developers.google.cn/blockly/guides/get-started/android
● https://www.cs4hs.com/
RISE Awards
Outline
● https://www.cs-first.com
Outline
Q&A
Resources and Links