Blocks是一个在线可视化节点编辑器，它简化了在Internet计算机上构建去中心化应用程序(dapp)的学习曲线。

下面是如何构建Blocks的故事，用户可以用它做什么，以及Blocks计划从这里走向何方。

什么是智能合约?

智能合约是一种直接运行在区块链或类似P2P网络上的软件。这通常与以太坊区块链及其“Web 3.0”dapp有关，其中一些app在2018年初获得了病毒式新闻报道，如CryptoKitties。

OpenSea是一款极受欢迎的 dapp，月 NFT 交易量超过 15.4 亿美元

对于现实世界的应用程序来说，dapp正变得越来越实用。虽然以太坊网络确认每笔交易至少需要5分钟，但最近的一个名为Internet Computer (IC) 的竞争对手可以在大约 1-2 秒内处理请求。对于去中心化软件的未来，这是一个很有希望的迹象，在所有区块链生态系统中，已经有数百个dapp使用了IC技术栈。

为什么要使用可视化编辑器?

软件工程的基本目标是定义清晰的、易于理解的业务逻辑来解决给定的问题。我们通过创建抽象层来做到这一点，相当于说“做一个花生酱三明治”，而不是“拿两片面包，把它们放在桌子上，打开一罐花生酱”，等等。这些高级的描述使得重用、组合、记录和测试软件变得更加容易。

在Blocks编辑器中已经实现的一些简单的加密功能

可视化编辑器通常用于连接以传统编程语言编写的高级模块。这些环境使非技术用户能够理解程序的逻辑，同时还可以作为强大的学习工具和底层代码库的参考点。

特别是在区块链dapp开发领域，每一行代码都必须仔细检查可能存在的漏洞。任何一个错误或疏忽都可能给项目带来灾难，这使图形编辑器在发现安全问题和鼓励更好的代码封装方面非常实用。

竞争

去年，在用户体验(UX)设计课上对视觉编辑器进行了实验，我学到了一些意想不到的东西：dapp或智能合约开发几乎没有相同的编码风格。快速搜索一下浏览器，你会发现有一个简单的拖放编辑器，叫做EtherScripter，还有废弃的登陆页面，比如SmartChain和HyperLedger Composer，很明显，这些项目目前都不能用于构建和部署真实世界的智能合约。

然而，这显然引起了市场的兴趣。2018年，Erik Marks写了一篇Medium文章，名为《图形智能合约编辑器的案例》(The Case for graphics Smart Contract Editors)，他在文中呼吁开发者尝试解决基于视觉流编辑器的用户体验问题。例如，Erik强调了一个几乎普遍存在的问题，即“对于技术用户来说，它们不如文本方便，而对于非技术用户来说，它们很难被理解。”我个人经历过这两种问题，并很快意识到极短的用户反馈循环将是一个新的可视智能合同编辑器成功的关键。

生成研究

为了最大限度地创造一些对用户友好的东西，我进行了一个生成式研究，由来自学术、专业和非技术背景的六个人组成。在每次采访中，我都要求参与者探索Motoko Playground (Motoko智能合约的在线代码沙箱)和Unreal Engine Blueprint，一种流行的可视化节点编辑器，在必要时只给出最少的指示。

    通过Motoko Playground部署的示例智能合约

     UE4 蓝图中Blocks编辑器的概念验证模拟

虽然每个人对这些应用程序的理解都略有不同，但我被许多参与者意想不到、和非常具体的反馈所吸引。例如，虽然我没有注意到或介意Motoko Playground上的工具栏是不可调整大小的，但一些用户提到这对他们来说是一个主要问题。最终，我找到了共同点：他们使用的是屏幕空间相对有限的笔记本电脑。

这些见解让我真正体会到作为软件工程过程一部分的用户体验研究的力量。特别是在开发一个非常非传统的用户界面时，我很惊讶地发现，从简单地询问几个人20分钟的时间中，我学到了多少东西。

以下是我们所学到的总结:

说到视觉编辑器，形式就是功能。键盘快捷键和符合人体工程学的设计决定了工作流程的成败，类似于基于文本的 IDE。自然语言比代码语法和标识符更容易被理解。人们总是想要更多的例子！应该提供最常见的用例，作为模板。实时反馈/评估循环对于探索性学习至关重要。

时间表和优先级

在这个过程中，Blocks获得了25,000美元的DFINITY开发赠款。

 以下是我们早期的应用路线图:

以下是我们与UE4 Blueprint、Motoko Playground和Remix IDE的beta版特性的比较:

我们还使用了以下的HMW问题来进一步细化计划中的功能列表:

我们如何帮助软件工程社区关于中心化和非中心化应用程序之间的权衡?我们如何让dapp开发对非区块链开发者来说更平易近人?我们该如何减少Solidity或Motoko等智能合同语言的学习曲线?

技术堆栈

由于目前的开源可视化流程编辑器库文档和维护都非常少，所以我花了几天时间研究各种替代方法，以找到最适合这个项目的方法。

Node-RED — 被一个类似的废弃项目使用；非常固执己见的React Flow — 美丽的流程图库React；类似于Node-RED的用例LiteGraph — 奇妙的内置小工具；作为一个数据流编辑器而不是AST生成器Rete—受欢迎和相对不受束缚；功能强大，但需要自定义钩子和配置Flume— 一个更新、更闪亮、更加流行的Rete.js替代品；缺少一些重要的特性，比如自定义样式

我们最终决定使用Rete.js生态系统，从而形成了当前的技术堆栈:

GitHub— 问题跟踪，项目管理，托管，CIHusky — Git提交/推送钩子Webpack — 构建系统Jest — 测试库ESLint , lint-staged — 代码风格执行React— 渲染框架Bootstrap — 风格约定Sass，样式化组件—对Bootstrap的补充Feather — 干净，简约的图标Rete — 节点和连接渲染逻辑Monaco — 语法突出显示的代码编辑器WebAssembly — 静态智能合约验证

设计过程

I互联网计算机的可视化低代码环境将减少最初的学习曲线，并使生态系统对新开发人员更容易接近。

为了在实现上取得进展，我们开始同时地设计和开发。为了让用户了解这个项目在过去几个月里的发展情况，下面是一些以前版本的编辑器的截图:

      Blocks编辑器的一个非常非常早期的原型

                  Nate创建的早期中保真模型 

当我专注于编辑器工作流、编译器功能和区块实现时，Nate贡献了主题、图形和项目的登录页面。由于功能和用户体验对于可视化编辑器都是至关重要的，因此我们的技术专长最终为这个项目带来了高效率。

一个使用带有可选鲜艳边框的深色主题的简单示例

使用受 UE4 启发的灰色主题的稍微复杂一点的示例 

       从To-Do List示例生成的Motoko源代码

评价研究

我们的第一轮用户测试比我想象的要有用得多。在这一点上，应用是基于Unreal Engine Blueprint，所以我们希望用户有类似的期望和反应。相反，我们最终发现了一些问题和解决方案，这些问题和解决方案允许我们推动我们的用户体验超越大多数可视化节点编辑器的现状。

首先，尽管编辑器包含基于类型的智能区块建议，但大多数用户并没有意识到这是如何工作的，而是痛苦地在全局放置菜单中搜索每个区块。与我们的直觉相反，通过移除这个全局菜单并强迫用户使用我们的上下文建议，我们成功地提高了用户的学习速度和整体生产力。

                  类型套接字的上下文块建议

我们的许多alpha测试人员都没有使用可视化节点编辑器的经验。虽然来自 Blender 或 Unreal Engine 的颜色编码输入/输出套接字连接是有意义的，但一些用户无法理解哪些套接字相互兼容。底层类型系统加剧了这种混乱，其中一些颜色在特定方向上相互兼容。我们发现，通过在拖拽连接时添加清晰的视觉指示，用户可以很容易地理解哪些套接字是兼容的，而不需要理解颜色或连接规则。这是用户体验的一个范式转变，需要被其他视觉编辑器采用。

         添加新连接时，兼容的套接字会变大。

Blocks编辑器还包括提供关于按钮、节点和类型套接字的信息的工具提示。与类似的可视化编程环境相比，这是一个巨大的改进，一些用户建议我们应该添加一个“学习模式”，它在应用程序的工具提示中包含更多的细节。随着时间的推移，我们打算扩展这个概念，以便任何人都可以在不引用外部文档的情况下使用Blocks。

                  解释功能的工具提示

反射

该编辑器的代数类型系统、透明的代码生成和方便的工作流使用户能够设计出规模远远超过任何其他流行的可视化编程环境的智能合约。

我们用于创建简单“Hello World”智能合约的交互式教程

这个项目的主要技术障碍是当前基于浏览器的可视化编辑器库生态系统的状态。虽然使用Rete.js进行快速原型制作很有帮助，但我们经常会遇到一些缺点，比如缺少控件定制和缺少undo/redo历史记录等功能。从这个经验来看，我建议未来的基于浏览器的可视化编辑器从Rete.js的自定义分支开始，以保持对应用程序功能的完全控制。

我的总体个人目标是提高在线可视化编程环境的标准。虽然Blocks界面将使学习Motoko更容易，并利用Internet Computer进行智能合约开发，但我希望我们的一些UX发现最终也会在未来几年内进入主流节点编辑器。

前进的道路

接下来的几个月，Blocks的目标。

一键部署。我们不是将生成的代码复制/粘贴到Motoko Playground这样的运行时环境中，而是打算创建一个端到端工作流，用户可以直接从编辑器中资助和部署智能合约。实时评估。在学习一门新的编程语言时，立即对表达式求值的能力是一种改变游戏规则的能力。我们打算让它尽可能容易地运行和测试用户的项目在区块编辑器。更多的互动教程。我们的目标是让那些没有软件开发背景的人也能访问智能合约开发。在扩展我们当前的教程系统的基础上，我们希望编辑器将成为区块链和去中心化软件开发的通用学习资源。

Source：https://levelup.gitconnected.com/how-we-created-blocks-an-online-drag-and-drop-smart-contract-editor-fe23eff4d933