为智能合约快速构建前端界面——oneclickdapp

作为开发人员，当我们编写好了一个智能合约（solidity）应用，怎么将它的功能在页面呈现供客户使用呢？这还不容易，写个前端呗，麻烦的是我不喜欢写前端各种花里胡哨的标签和样式（说白了，一个字‘懒’）。但就是因为这个‘懒’，才推动着科技的发展与对物质需求层次的不断升阶。

介绍

一个快速构建dapps应用的网站——One Click Dapp

正如官网所说，这是一个可以将任何智能合约变成 dapp，缩短想法和原型之间差距的工具。

使用流程

注：这里我使用Ganache客户端在本地模拟以太坊区块链环境。

在网站首页，点击 Get started，随即跳转到登录页面（进行身份验证以保存和更新您的 dapp）。 

 这里我选择连接Metamask钱包（对另外两个熟悉的伙伴，也行）。

弹出提示框，输入登录密码进行解锁。

 点击签名（对钱包控制权的证明）。

成功连接界面：

 以上图中框框表示的含义说明如下：

该标题是Dapps，不是一次性使用的，点击右侧【+ NEW DAPP】按钮可以创建新项目。

每个New dapp中包括5个字段，需要用户填写操作：

• Name： 你所创建dapp的名字（不一定要和合约名相同）。
• Description: 简单描述一下你的dapp能做什么。
• Abi： 将智能合约编译成功后的abi内容拷贝至此。
• Contract address： 将智能合约部署成功后的地址拷贝至此。
• Network name： 部署合约所在的网络名称（如将“homestead”用于以太坊主网代称）。

如果使用自定义网络（本地链localhost:8545），则Network name选项留白。

这里我提前准备好了一个简单的HelloWord合约，已经编译、部署在本地测试链上了。

 HelloWord.sol内容：

// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.5.0 <0.8.0;

contract HelloWorld {
  string name = 'hello kitty!';

  function getName() public view returns (string memory) {
    return name;
  }

  function setName(string calldata newName) external {
    name = newName;
  }
}

Tips： calldata存储类型的介绍，参见Types — Solidity 0.8.11 documentation

 同时为了读者可以立即体验效果，我将合约的Abi和部署地址贴在下方：

ABI（这里压缩了json）：

[{"inputs":[],"name":"getName","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"string","name":"newName","type":"string"}],"name":"setName","outputs":[],"stateMutability":"nonpayable","type":"function"}]

Contract address：

0xbfE31c88d6B38d924CF2e02F913313443542382C

如下图所填即可，点击 SAVE：

 创建成功界面：

上图中间两个按钮，分别写着Read和 Write，顾名思义，它们对应着所创建dapp的智能合约中只读状态方法和写入/更新状态方法。也就是说，当我们点击Read按钮时，右方矩形界面上显示为getName；点击Write按钮时，则显示setName。

演示图：

 点击蓝色按钮SUBMIT，底部Result后展现了合约定义的全局属性name的值——hello kitty!。

切换到Write界面，点击左边setName(string)字样，如下图：

 左边矩形界面响应变化，并给出了一个输入框（函数参数：newName），里面输入的内容将根据您的合约代码逻辑执行，这里是简单的赋值操作（name = newName）。和上面不同的是，调用该方法需要花费一定的gas，交易执行速度依网络而异。

点击确认，等待交易打包。

 成功结果如图：

验证name值是否被成功更改，调用getName方法：

可以看到正确返回 “我喜欢加菲猫！”了。 

好了，以上就是这个网站的基本使用了，相信能给开发人员省去不少在前端页面的心思和精力吧。