Blockly 应用简介

Blockly 应用是一种包含 Blockly 编辑器(工作区)的 Web 应用。本文档举例说明了 Blockly 应用的用途,并介绍了典型的界面功能。

如果您尚未阅读,请务必先阅读视觉词汇表基本申请步骤,然后再继续阅读本文档。

Blockly 应用有何用途?

Blockly 应用可帮助用户在各种领域(从视频游戏到机器人技术再到数据分析)编写程序。用户使用代码块编写程序,应用会使用这些代码块生成基于文本的代码,例如 JavaScript 或 Python。然后,应用会直接运行生成的代码,或者用户下载该代码并在其他平台(例如机器人或手持视频游戏控制器)上运行

以下是一些示例,展示了用户使用 Blockly 应用编写的程序类型:

  • 谜题解答、动画或音乐:生成的代码可解答谜题(如迷宫)、显示动画或播放音乐。如需查看示例,请参阅 Code.org 的音乐实验室

  • 视频游戏:生成的代码运行视频游戏。例如,在 MakeCode Arcade 中创建“打地鼠”游戏的前两个关卡,然后将游戏下载到控制器或在模拟器中玩游戏。

  • 机器人技术:生成的代码可控制机器人。例如,使用 Ozoblockly 为机器人编程,然后将程序下载到真实机器人或在模拟器中运行。

  • 绘制:生成的代码会绘制 2D 或 3D 图形。如需查看示例,请参阅 BlocksCAD

  • 数据分析:生成的代码会分析数据并创建图表。如需查看示例,请参阅 Dialogic 平台演示

  • 特定于应用的代码:生成的代码执行特定于特定应用的任务。例如,Blockly 开发者工具是一种用于设计新的 Blockly 块的工具。它会生成块定义代码,供用户复制并粘贴到自己的 Blockly 应用中。

界面

了解 Blockly 应用的典型组件的好方法是查看其界面。

基本界面组件

几乎所有 Blockly 应用都共享一些基本组件:Blockly 编辑器(工作区)、输出面板和“运行”按钮。例如,以下是 Blockly Games 中迷宫的界面。

迷宫应用的界面,其中包含编辑器、输出面板和“运行”按钮。

部分 Blockly 应用省略了“运行”按钮,而是在用户每次做出更改时更新输出面板。例如,Blockly 示例中的 Graph 应用有两个输出面板(一个用于显示图表,一个用于显示方程式),每次更改时都会更新这两个面板。

图表应用的界面,其中包含编辑器、用户构建的等式的输出面板,以及该等式的图表的输出面板。

某些应用没有输出面板。这种情况在硬件应用中最为常见,例如机器人编程应用。虽然其中一些应用包含硬件模拟器,但许多应用只是让用户直接在目标设备上下载并运行生成的代码。

其他界面组件

大多数应用都有额外的界面组件。其中一些满足一般需求,例如保存用户的工作,而另一些则满足特定于应用的需求,例如设计 GUI。下面是一些示例:

  • Scratch 是一款用于创建动画和视频游戏的应用程序,它具有图形和声音编辑器;用于创建新精灵和背景的面板;以及文件、编辑和设置菜单:

    Scratch 界面。

  • MakeCode Arcade 是一款用于创建视频游戏的应用,具有输出控件、代码和图形编辑器、设置菜单以及下载和保存按钮。其输出面板可模拟手持游戏控制器。

    MakeCode Arcade 用户界面。

  • MIT App Inventor 是一款用于创建手机应用的应用,它为 GUI 设计器和 Blockly 编辑器提供了单独的界面,并提供了文件、连接、构建和设置菜单。用户无需使用输出面板,而是直接在手机上测试生成的代码。

    App Inventor 界面中的 GUI 设计器 App Inventor 界面中的 Blockly 编辑器

您应添加哪些其他组件取决于应用的目标和用户的能力。一些常见组件包括:

  • 管理:

    • 文件管理(新建、打开、保存、另存为、删除)
    • 账号管理(创建、登录、退出)
    • 设置(语言、界面配置)
  • 节目安排:

    • 修改命令(撤消、重做、复制、剪切、粘贴、复制)
    • GUI 设计师
    • 图形和声音编辑器
    • 代码编辑器或只读代码显示
  • 测试

    • 输出配置(开始/停止、播放速度、音量、屏幕截图等)
    • 调试器(断点、运行、步进、代码块突出显示)
    • 设置测试参数
  • 硬件

    • 连接方式(USB、蓝牙、二维码)
    • 配置(选择型号、选择配件、分配组件名称)
    • 控制(手动控制机器人,记录机器人位置)
    • 下载代码
  • 帮助

    • 文档
    • 互动式教程
    • 情境相关帮助

接下来该怎么做?

如果您仍在考虑申请,请继续阅读有关设计注意事项的内容。

如果您想了解构建简单应用的体验,不妨试试 Blockly 使用入门 Codelab

如果您已准备好撰写申请,请执行以下操作: