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