forked from wwj718/wwj718.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblockly-overview.html
483 lines (444 loc) · 18.3 KB
/
blockly-overview.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
<!--
-----------------
< 终于等到你 >
-----------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
----------------------------------
我正在构建一个基于网络协作的虚拟团队，
喜欢你这种没事喜欢翻源码的人
如果你恰好也热爱技术、喜欢折腾，来啊，互相伤害，一起捣鼓好玩的东西吧
联系我咯: [email protected]
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>blockly入门与介绍</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="writing for time">
<meta name="author" content="wwj">
<!-- Le styles -->
<link href="//cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" href="//7kttuq.com1.z0.glb.clouddn.com/just4fun.png?imageView2/2/w/50" type="image/x-icon">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.tag-1 {
font-size: 13pt;
}
.tag-2 {
font-size: 10pt;
}
.tag-2 {
font-size: 8pt;
}
.tag-4 {
font-size: 6pt;
}
#footer img{
visibility: hidden;
}
</style>
<link href="//cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
<link href="/theme/css/pygments.css" rel="stylesheet">
<link href="/theme/css/mystyle.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/index.html">writing for time </a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li class="active">
<a href="/category/编程.html">
<i class="icon-folder-open icon-large"></i>编程
</a>
</li>
<li >
<a href="/category/读书.html">
<i class="icon-folder-open icon-large"></i>读书
</a>
</li>
<li >
<a href="/category/edx.html">
<i class="icon-folder-open icon-large"></i>edx
</a>
</li>
<li >
<a href="/category/工具.html">
<i class="icon-folder-open icon-large"></i>工具
</a>
</li>
<li >
<a href="/category/观念.html">
<i class="icon-folder-open icon-large"></i>观念
</a>
</li>
<li >
<a href="/category/技术.html">
<i class="icon-folder-open icon-large"></i>技术
</a>
</li>
<li >
<a href="/category/架构.html">
<i class="icon-folder-open icon-large"></i>架构
</a>
</li>
<li >
<a href="/category/空想.html">
<i class="icon-folder-open icon-large"></i>空想
</a>
</li>
<li >
<a href="/category/诗词.html">
<i class="icon-folder-open icon-large"></i>诗词
</a>
</li>
<li >
<a href="/category/数据.html">
<i class="icon-folder-open icon-large"></i>数据
</a>
</li>
<li >
<a href="/category/算法.html">
<i class="icon-folder-open icon-large"></i>算法
</a>
</li>
<li >
<a href="/category/随笔.html">
<i class="icon-folder-open icon-large"></i>随笔
</a>
</li>
<li >
<a href="/category/瓦碎集.html">
<i class="icon-folder-open icon-large"></i>瓦碎集
</a>
</li>
<li >
<a href="/category/硬件.html">
<i class="icon-folder-open icon-large"></i>硬件
</a>
</li>
<ul class="nav pull-right">
<li><a href="/archives.html"><i class="icon-th-list"></i>Archives</a></li>
</ul>
</ul>
<!--<p class="navbar-text pull-right">Logged in as <a href="#">username</a></p>-->
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="span8 offset1" id="content">
<!--<div class="alert alert-success" style="font-size:18px;">> 你那里天气好吗，有什么新闻可以当做笑话</div>-->
<section id="content">
<article>
<header>
<h1>
<a href=""
rel="bookmark"
title="Permalink to blockly入门与介绍">
blockly入门与介绍
</a>
</h1>
</header>
<div class="entry-content">
<div class="well">
<footer class="post-info">
<span class="label">Date</span>
<abbr class="published" title="2016-09-02T00:00:00+00:00">
<i class="icon-calendar"></i>五 02 九月 2016
</abbr>
<span class="label">By</span>
<a href="/author/wuwenjie.html"><i class="icon-user"></i>wuwenjie</a>
<span class="label">Category</span>
<a href="/category/bian-cheng.html"><i class="icon-folder-open"></i>编程</a>.
<span class="label">Tags</span>
<a href="/tag/code.html"><i class="icon-tag"></i>code</a>
</footer><!-- /.post-info --> </div>
<p><img alt="" src="http://oav6fgfj1.bkt.clouddn.com/blockly9c7fc7e6.png" /></p>
<h1>介绍</h1>
<p><a href="https://github.com/google/blockly">blockly</a>是google发布的可视化编程工具，基于web技术构建。</p>
<p>在功能/设计上和MIT的儿童编程语言<a href="https://scratch.mit.edu/">Scratch</a>类似</p>
<p>使用blockly的时候，用户可以通过拖曳模块，来构建代码逻辑，过程很像搭积木</p>
<p>在用户视角下，blockly是一个简单易用的可视化工具，用来生成代码。在开发者视角下，blockly是一个文本框，里边包含了用户输入好的代码。</p>
<p>代码生成到文本框的过程，就是用户在blockly里拖曳的过程</p>
<p>更多细节可以参考官方的<a href="https://developers.google.com/blockly/guides/overview">介绍</a></p>
<h3>特性</h3>
<ul>
<li>完全是JavaScript，可离线使用</li>
<li>可生成6门语言： <ul>
<li>JavaScript</li>
<li>Python</li>
<li>PHP</li>
<li>Dart</li>
<li>Lua</li>
<li>XML(XML有时也被视为语言，实际上它更像语法树)</li>
</ul>
</li>
<li>支持主流的浏览器，如：Chrome, Firefox, Safari, Opera, IE</li>
<li>支持移动设备</li>
<li>支持许多编程的基本元素，如：变量、函数、数组</li>
<li>易于扩展自定义的块</li>
<li>支持多国语言（40+）</li>
</ul>
<h3>在线体验</h3>
<p><a href="https://blockly-demo.appspot.com/static/demos/index.html">demo</a></p>
<h3>文档</h3>
<p><a href="https://developers.google.com/blockly/">文档</a>：需要梯子</p>
<h1>技术视角</h1>
<p>在此我们以技术视角来审视blockly，而不怎么谈论它的教育意义</p>
<h3>作为编辑器的blockly</h3>
<p>blockly将自己定位为一个编辑器</p>
<blockquote>
<p>The web-based visual programming editor</p>
</blockquote>
<p>上边这句话是<a href="https://github.com/google/blockly">blockly</a>源码库的自描述</p>
<p>这个定位十分符合unix哲学：<code>Do one thing</code>。</p>
<p>而且它确实是实诚的编辑器，而不是那种伪装成编辑器的操作系统（此处有火药味）</p>
<p>blockly作为编辑器，它的输入为用户的拖曳（拖曳作为一种输入，可以类比为普通编辑器的键盘输入），输出为<code>生成的代码</code>。使用blockly可以快速打造一个特定领域的可视化 块编程 编辑器</p>
<p>至于每个积木（block）如何生成代码，代码用于什么用途，blockly则通通不关心，用户自己掌控。</p>
<p>由于设计上遵循unix哲学，他也将获得unix哲学带来的好处，小而美带来的强大的组合能力。于是围绕blockly的生态十分广阔。涵盖硬件、软件，领域涵盖科研、教育、游戏、玩具等等</p>
<p><img alt="" src="http://oav6fgfj1.bkt.clouddn.com/blocklyf7a63b9c.png" /></p>
<h3>使用场景</h3>
<p>随便列举几个典型的</p>
<ul>
<li>以拖曳的方式生成代码，控制硬件</li>
<li>作为软件的输入（demo中的拖曳出函数并生成图像）</li>
<li>作为软件的的实时控制界面</li>
<li>...</li>
</ul>
<h3>构建一个Blockly app的步骤</h3>
<p>按照官方文档<a href="https://developers.google.com/blockly/guides/overview">overview</a>的说法，有以下三步：</p>
<ul>
<li>集成blockly编辑器</li>
<li>定义你的app里的功能块（block）</li>
<li>构建app的其余部分，blockly仅充当代码生成器，你需要决定这些用户生成的代码用于做什么，这也是你的app的核心功能所在</li>
</ul>
<h3>Blockly的强大之处</h3>
<p>这部分翻译自<a href="https://developers.google.com/blockly/guides/overview">官方文档</a></p>
<p>Blockly作为一个可视化编程环境，正逐渐流行，那么你如何利用它呢，下边的优势举例可能对你有启发：</p>
<ul>
<li>可导出的代码: 可以将基于block程序转化为基于普通文本的常规代码（多语言）</li>
<li>开源： 可以以任何方式定制/使用它，甚至入侵修改它的内核</li>
<li>可拓展： 通过添加定制化的<code>block关联到你的api上</code> （将提供服务的部分视为下位机，对外提供api/指令集）</li>
<li>生产可用：blockly不是一个玩具，你可以用它完成复杂的编程任务，例如写一个可以计算标准差的block</li>
<li>国际化：blockly支持40多门语言</li>
</ul>
<h1>衍生项目</h1>
<ul>
<li><a href="https://blockly-games.appspot.com/">Blockly Game</a>：拖曳式小游戏</li>
<li><a href="https://scratch.mit.edu/developers">Scratch Blocks</a>：该项目由Scratch团队使用blockly构建</li>
<li><a href="http://appinventor.mit.edu/explore/">App Inventor</a>：基于blockly的可视化安卓IDE</li>
<li><a href="code.org">Code.org</a></li>
<li><a href="http://ozoblockly.com/">OzoBlockly</a>：一个可编程微型机器人，编码烧录很有意思（屏幕闪烁）</li>
<li><a href="https://www.makewonder.com/">Wonder Workshop</a>：可编程机器人玩具</li>
<li><a href="http://lab.open-roberta.org/">Open Roberta</a></li>
<li><a href="https://www.scriptr.io/">scriptr.io</a>：物联网云端IDE</li>
</ul>
<h1>脑洞</h1>
<p>用做配置工具</p>
<p>我们常遇到这种纠结：究竟要给用户怎样的配置界面，常规的UI界面，虽然友好，能做的事太少了。而基于文本的配置，表达能力是加强了，对用户不仅不友好，还容易因为拼写错误，出现奇怪问题（缺乏验证机制），让用户摸不着头脑</p>
<p>基于blockly的配置工具，似乎是个很不错的选择，拥有编程语言级别的表达能力，操作起来又不晦涩。细节有空细说，下次有配置项丰富的项目，我决定试试blockly</p>
<hr />
<p>---2018.4.17 更新---</p>
<h1>教程</h1>
<p>我前些时间为blockly写了一些入门开发教程，供大家参考:</p>
<ul>
<li><a href="http://blog.just4fun.site/blockly-dev-hello-world.html">blockly开发之hello world(0)</a></li>
<li><a href="http://blog.just4fun.site/blockly-dev-run-code.html">blockly开发之生成并运行js代码(1)</a></li>
<li><a href="http://blog.just4fun.site/blockly-dev-python-browser-turtle.html">blockly开发之使用python驱动浏览器中的turtle(2)</a></li>
</ul>
<p>如果你喜欢看代码，可以直接翻代码:<a href="https://github.com/wwj718/blockly_dev">blockly_dev</a></p>
<h1>参考</h1>
<ul>
<li><a href="https://developers.google.com/blockly/guides/overview">Introduction to Blockly</a></li>
<li><a href="https://cooc-china.gitbooks.io/blockly/content/chapter1.html">Blockly是什么</a></li>
</ul>
</div><!-- /.entry-content -->
<!--
<p style="font-size:16px" class="alert alert-info">此文对我有价值，打赏杯茶喝^_^ <a target="_blank" class="btn btn-primary btn-large" href="https://me.alipay.com/wuwj">支付宝打赏</a> </p>
-->
<hr>
<div class="alert alert-success">版权声明：<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh">自由转载-非商用-非衍生-保持署名</a></div>
<hr>
<!-- Duoshuo Comment BEGIN -->
<!--
<div class="ds-thread"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"wwj718blog"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = 'http://static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
-->
<!-- Duoshuo Comment END -->
</article>
</section>
</div><!--/span-->
<div style="margin-left:70px;" class="span3 well sidebar-nav" id="sidebar">
<ul class="nav nav-list">
<!--<a href="/others/startedx.html"><h3>Open edX相关咨询</h3></a>-->
<hr/>
<!--
<h3>我的服务<h3>
<a href="http://olk8jbdzi.bkt.clouddn.com/index.html"><h4>开源在线表单设计工具</h4></a>
<a href="#kinto.jsut4fun.site"><h4>kinto server(施工中)</h4></a>
<a href="#"><h4></h4></a>
-->
<!--<a href="/join-us"><h3>招兵买马(招实习!)<h3></a>-->
</hr>
</hr>
<li style="text-align: center;"><a href="https://www.e-ducation.cn/?utm_source=zgblog&utm_medium=ads&utm_campaign=marketing_01"><img src="http://os54tv4fc.bkt.clouddn.com/education.png" width="100%" max-width="250px" /> </a></li>
<hr/>
<h4>站内搜索(基于google，你可能看不到)</h4>
<div>
<script>
(function() {
var cx = '004056624884628766270:aaifcpik-ua';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
<hr>
<h4>手机访问：</h4>
<li style="text-align: center;">
<img src="http://os54tv4fc.bkt.clouddn.com/1514204585.png" width="150px" />
</li>
<li><i class="icon-external-link"></i><a href="/aboutme.html">关于我</a></li>
<li><i class="icon-external-link"></i><a href="https://github.com/wwj718">my github</a></li>
<li><i class="icon-external-link"></i><a href="#">my gmail：[email protected]</a></li>
<hr>
<li class="nav-header"><h4><i class="icon-folder-close icon-large"></i>分类</h4></li>
<li>
<a href="/category/编程.html">
<i class="icon-folder-open icon-large"></i>编程
</a>
</li>
<li>
<a href="/category/读书.html">
<i class="icon-folder-open icon-large"></i>读书
</a>
</li>
<li>
<a href="/category/edx.html">
<i class="icon-folder-open icon-large"></i>edx
</a>
</li>
<li>
<a href="/category/工具.html">
<i class="icon-folder-open icon-large"></i>工具
</a>
</li>
<li>
<a href="/category/观念.html">
<i class="icon-folder-open icon-large"></i>观念
</a>
</li>
<li>
<a href="/category/技术.html">
<i class="icon-folder-open icon-large"></i>技术
</a>
</li>
<li>
<a href="/category/架构.html">
<i class="icon-folder-open icon-large"></i>架构
</a>
</li>
<li>
<a href="/category/空想.html">
<i class="icon-folder-open icon-large"></i>空想
</a>
</li>
<li>
<a href="/category/诗词.html">
<i class="icon-folder-open icon-large"></i>诗词
</a>
</li>
<li>
<a href="/category/数据.html">
<i class="icon-folder-open icon-large"></i>数据
</a>
</li>
<li>
<a href="/category/算法.html">
<i class="icon-folder-open icon-large"></i>算法
</a>
</li>
<li>
<a href="/category/随笔.html">
<i class="icon-folder-open icon-large"></i>随笔
</a>
</li>
<li>
<a href="/category/瓦碎集.html">
<i class="icon-folder-open icon-large"></i>瓦碎集
</a>
</li>
<li>
<a href="/category/硬件.html">
<i class="icon-folder-open icon-large"></i>硬件
</a>
</li>
<li class="nav-header"><h4><i class="icon-tags icon-large"></i>Tags</h4></li>
<hr>
<a target="_blank" href="http://wwj718.github.io/feeds/all.rss.xml">订阅feed</a>
</ul> </div><!--/.well -->
</div><!--/row-->
<hr>
<footer id="footer">
<address id="about">
被误解是表达者的宿命<hr>
powered by Pelican
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F18db4b662c04fbd6cc2851d246c51b3f' type='text/javascript'%3E%3C/script%3E"));
</script> </address><!-- /#about -->
</footer>
</div><!--/.fluid-container-->
<a href="https://github.com/wwj718"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<script src="/theme/js/bootstrap-transition.js"></script>
<script src="/theme/js/bootstrap-dropdown.js"></script>
<script src="/theme/js/bootstrap-collapse.js"></script>
<!--<script src="/theme/js/autosidebar.js"></script>-->
</body>
</html>