为智能合约快速构建前端界面——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方法:
可以看到正确返回 “我喜欢加菲猫!”了。
好了,以上就是这个网站的基本使用了,相信能给开发人员省去不少在前端页面的心思和精力吧。