Blockly – 来自Google的可视化编程工具使用帮助_编程使用帮助

Google Blockly 是一款基于Web的、开源的、可视化程序编辑器。你可以通过拖拽块的形式快速构建程序,而这些所拖拽的每个块就是组成程序的基本单元。可视化编程完成,Blockly 直接支持 JavaScript、Python、PHP、Lua、Dart 语言源码的导出。此外,还可以将 Blockly 编辑器快速集成到Web、Android或iOS环境中

Blockly – 来自Google的可视化编程工具使用帮助

Google Blockly 是一款基于Web的、开源的、可视化程序编辑器。你可以通过拖拽块的形式快速构建程序,而这些所拖拽的每个块就是组成程序的基本单元。可视化编程完成,Blockly 直接支持 JavaScript、Python、PHP、Lua、Dart 语言源码的导出。此外,还可以将 Blockly 编辑器快速集成到Web、Android或iOS环境中。

Blockly - 来自Google的可视化编程工具使用帮助_编程使用帮助

因近期参与一个机器人项目,可视化编程是项目需求之一。故以Web版本(HTML 和 JavaScrip)为例,整理一下 Blockly 的使用方法及各功能点。

    1. Blockly 介绍

    Blockly 是一个向Web或Andorid/iOS应用添加可视化代码编辑器的库,Blockly使用相互联锁的、图形化的块来表示代码中的概念,如:如变量、逻辑表达式、循环等。这样,用户就可以应用编程原理,而不必担心具体的语法、或命令行。

    1.1 构建Blockly应用

    对于用户来说,Blockly 只是用更直观的可视化的方式来生成代码。而对于开发都而言,Blockly只是一个文本框,其包含了语法正确的、用户生成的代码。

    Blockly可以将“块”导出为代码,其支持以下主流语言:

    • JavaScript
    • Python
    • PHP
    • Lua
    • Dart

    构建一个Blockly应用一般包括以下步骤:

    1. 集成Blockly编辑器 – 最简单的Blockly编辑器包含了一个“工具箱”来存储的块(block)类型,和一个用于安装块的“工作区”。详细集成方法请参考使用 Blockly,或官方文档Web和Android
    2. 创建应用块 – 集成Blockly后,就需要创建一些用户代码块,并将其添加到Blockly“工具箱”。创建自定义块参考官方文档Create Custom Blocks Overview
    3. 构建应用的其余部分 – Blockly只是解决一代码生成的部分,而应用的核心是如果使用代码,这部分还需要开发者自行实现

    1.2 Blockly与其它方案的比较

    Blockly 正在被越来越多可视化编程环境所使用。使用Blockly做为可视化编程方案具体有以下几点优势:

    • 代码可导出 – 用户可基于“块”提取出通用编程语言,并可平滑过渡到基于文本的编程。
    • 开源 – Blockly 开放所有源码,你可以复制、修改、并将其应用到你的网站或Andorid等应用中
    • 可扩展 – 你可以按需要调整 Blockly,包括根据你的API添加新自定义“块”、移不需要的块和功能等。
    • 高可用 – Blockly 不是玩具,你可以用它来实现复杂的编程任务
    • 国际化 – Blockly 已被翻译40+种语言

    尽管有以上优势,但 Blockly 不可能成为所有应用的解决方案。以下是一些其它可视化编程方案,可按自己需要选用:

    • Scratch Blocks: MIT设计和实现的一个Blockly代码库,Scratch Blocks提供了一个简化的编程模型,非常适合于初学者
    • Droplet:支持Pencil Code的图形化编程编辑器,它的显著特点是能够从代码转换成块。
    • Snap:一个从无到有的图形化编程语言,它不是一个库,而是一个集成执行环境的完整应用

    2. 使用 Blockly

    接下来,我们基于HTML和JavaScript,来介绍将Blockly做为代码编辑器集成到Web应用中的过程。除Web应用外,Blockly还可以集成到Android或iOS应用中,详细请参考官方文档:

    • Get Started-Android
    • Get Started-iOS

    2.1 概述

    Blockly 被设计的可以很容易地安装到你的Web应用中。用户可以拖动“块”,而Blockly通过“块”生成代码,而应用无需为生成代码做任何事情。对应用来说 Blockly 仅是一个用户指定类型语言(JavaScript, Python, PHP, Lua, Dart 或其它)的文本输入框。

    Blockly 是一个完全客户端应用,它无需服务端的任何支持(除非你要使用云存储等服务端功能),且没有第三方的依赖(除非你想重新编译内核),一切都是开源的。

    2.2 获取源码

    Blockly 源码托管在 GitHub,可以通过 GitHub 下载或在线查看源码:

    • 下载Zip包
    • 下载Tar包
    • GitHub在线查看

    下载源码并解压后,可以在浏览器打开demos/fixed/index.html文件,验证 Blockly 的块是否可以拖动等。

    2.3 注入 Blockly

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

    • 固定尺寸的 Blockly

    更高级的用法可以让 Blockly 调整大小,以填满页面:

    • 可调尺寸的 Blockly

    2.4 配置

    上面的示例的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来构建。

    • 更多信息参考创建自定义块

    2.5 代码生成

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

    • 更多信息参考代码生成

    2.6 “块”的导入、导出

    如果你需要将“块”导出,以在其它应用中使用或在以后还原。可以调用以下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);

    2.7 云存储

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

    海计划公众号
    (0)
    上一篇 2020/04/05 01:41
    下一篇 2020/04/05 01:41

    您可能感兴趣的内容

    • Kiwi入门基础教程_国际化全流程解决方案

      Kiwi入门基础教程 GitHub:https://github.com/alibaba/kiwi 简介描述:国际化全流程解决方案 Kiwi-国际化全流程解决方案。   …

      2020/03/10
    • 纯CSS实现Tab切换小白攻略_div小白知识

      说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。而今天所要分享的,是使用 0 行JS代码来实现Tab切换!方法一:模拟单选框原理该方法大致原理如下:当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都

      2020/04/05
    • Cycle.js基础知识函数式和响应式的 js 框架

      Cycle.js基础入门 官方网址:http://cyclejs.cn/ GitHub:https://github.com/cyclejs/cyclejs/ 简介描述:函数式和响…

      2020/03/05
    • css中颜色小白攻略_颜色使用帮助

      颜色如果我们相给页面设置颜色可以采用多种方法进行设置:一、命名颜色假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了,就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。命名颜色的关键字有限,css定义了17个标准色:浅绿色,黑色,蓝色,紫红色,灰色,橙色,绿色,石灰,栗色,海军,橄榄,紫,红,银,蓝绿色,白色和黄色。颜色名颜色颜色名颜色aqu

      2020/03/24
    • javascript中void什么意思?新手入门_void基础知识教程

      在JavaScript中,一些标识符是保留关键字,Javascript的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript以后扩展使用。Javascript中void是一个保留关键字,其可以是任何类型。该关键字指定要计算一个表达式但是不返回值。它的语法可能是下列之一:javascript:void (expression)

      2020/03/24
    • HTML中文乱码怎么解决?基础知识入门_码使用帮助

      HTML文件乱码一般是因为编码格式不匹配造成的,只要匹配好html文件的编码格式就可。下面是一个中文乱码的html:

      标题

      这是一段测试文本!

      效果图:HTML中的编码方式有三个:gb2312,gbk,utf-8;现在大部分浏览器默认编码的是utf

      2020/03/31
    • javascript中如何判断checkbox是否选中?基础知识入门_表单小白帮助

      javascript判断checkbox是否选中的方法:1、直接通过checkbox的checked属性判断。2、调用jQuery使用attr()或is()方法判断。对于在js中来判断checkbox是否被选中很简单,示例如下:1、直接通过checkbox的checked属性判断。HTML代码:<input type="checkbox" name="box

      2020/03/20
    • tiny-compiler基础知识入门_一个js写的微型编译器。可以用来学习编译器的入门知识

      tiny-compiler基础知识入门 官方网址:https://git.io/compiler GitHub:https://github.com/jamiebuilds/the…

      2020/03/07
    • js Date对象菜鸟攻略_对象入门基础教程

      1、创建Date对象 方法一:var date1=new Date(‘2018/12/25 10:30:50’);
      方法二:var date2=new Date(2018,11,25,10,30,50);2、获取当前的系统时间new Date();返回值就是当前系统时间 var date3=new Date();3、new Date(1000*

      2020/03/24
    • ES6箭头函数解析,跟普通函数的区别小白基础_箭头函数菜鸟教程网

      引言ES6中允许使用箭头=>来定义箭头函数,是ES6中较受欢迎也较常使用的新增特性。本文将从箭头函数的基本语法,与普通函数对比,箭头函数不适用场景三个方面进行梳理。基本语法// 箭头函数
      let func = (name) => {// 函数体return `Hello ${name}`;
      };// 等同于
      let func = function (name

      2020/03/22
    • CSS解决高度塌陷小白基础_高度小白教程

      1:给高度塌陷的元素设置overflow:hidden;原理:因为overflow:hidden;触发了一个BFCBFC布局规则:计算BFC高度的时候,里面的浮动元素也参与计算。弊端:定位在当前元素外面的内容会被隐藏。2:给出现高度塌陷的元素里面,放在浮动元素的后面,添加一个空div,并且给div{clear:both;}原理:clear:both;忽略上面

      2020/03/23
    • 微前端架构:如何由内而外取代单体架构使用教程_架构基础知识教程

      如何利用微前端技术实现单体应用程序的现代化改造?在本篇教程中,我们将探讨如何将前端从单体架构当中剥离出来,并快速完成微前端架构迁移。本文作者将结合个人项目实践经验为大家介绍心得。问题所在我们假设有这么一个单体代码库,它使用了某种后端模板引擎或者系统(例如 EJS 或者 ERB),但没有认真考虑前端的设计需求。或者更糟糕的是,前端的开发早于 SPA 的出现,或

      2020/03/23
    • 使用base64编码在页面嵌入图片基础教程_base64指南教程

      因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于地址不对或者没有将图片一起发过去而导致图片无法显示。为了便于显示,我今天试了一下将图片转换为base64编码的方法。注:在上面的Data URI中,data表示取得数据的协定名称

      2020/03/24
    • 盘点那些走向世界的中国项目菜鸟知识_开源基础入门

      “开源(Open Source)”,这个在程序员界耳熟能详的词,几乎充斥着我们的整个职业生涯。相信没有一个程序员不知道啥是“开源”,相信没有一个程序员从来没用过“开源”产品。回顾一下,我们所熟知的一些伟大开源项目几乎都出自国外的程序大师或组织。然而,这几年国人也贡献了不少优秀的开源项目与产品,甚至有一些也收到国外同行的认可与赞许。下面我们就在一起盘点下,那些

      2020/03/24
    • SVN菜鸟指南一个开放源代码的版本控制系统

      SVN基础入门 官方网址:https://tortoisesvn.net/ 简介描述:一个开放源代码的版本控制系统 SVN是Subversion的简称,是一个开放源代码的版本控制系…

      2020/03/05
    • jQuery属性操作攻略教程_操作小白知识

      jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr() DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp() 类样式操作:是指对DOM属性className进行添

      2020/03/26