封面图

第158期:写前端项目的体验_API

最近闲着没事儿,一直在帮朋友写一个关于区块链的项目,当然,我主要负责前端界面的搭建以及和合约的交互。

界面的部分很简单,采用vue3+ts以及antv封装一些常用的组件即可,而合约交互的部分,因为原先没有接触过,所以花了点时间去适应,总的来说写这个项目还是比较顺畅的。

区块链和前端相关的技术大体上有这么三个东西:

  • MetaMask,俗称小狐狸。主要用来做账号的管理等工作。
  • web3.js 。主要用来对合约进行实例化,发起转账、查询、格式化等跟合约交互的动作。
  • solidity.js 。主要用来写合约,写好后可以进行编辑并发布,详情可以查看其网站网站地址。

MetaMask使用起来很简单,我们只需要安装一个插件即可,然后按照文档上的教程就可以进行获取账号、切换账号等操作。

比如:

ethereum.on('accountsChanged', function (accounts) {
  // Time to reload your interface with accounts[0]!
});

web3.js使用起来也很简洁,我们只需要安装最新的版本,就可以使用它的各种API了。

安装:

npm install web3

然后做一个初始化:

if (typeof web3 !== 'undefined') {
  web3 = new Web3(web3.currentProvider);
} else {
  // set the provider you want from Web3.providers
  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}

接下来我们就可以无忧无虑的使用它的各种API。

遇到的问题

问题大都是和合约交互时产生的,前端调试起来很不方便,所以为了调试我们开了一个合约的浏览器,这样在出现问题时,可以根据transactionHash找到对应的操作,看到对应的报错。

另外一个值得注意的问题是合约的精度问题,有的精度是18位小数,有的是6位小数,所以单位不统一,后面的各种计算都是错误的。

//**

erc20 token的数量需要先弄明白了,
比如你这个usdc的decimal是18,
那么1个usdc对应的数值就是1后面跟18个0,
即1000000000000000000表示1个usdc
*//

最重要的一点:1 token = 1 x 1e[decimals] 记住这个就可以了。

其他要注意的事情

关于这个项目,其实大家都是用空闲的时间来写的,那么管理就成了一件非常困难的事情,因为大家的空闲的时间不一样,有的白天有时间,有的晚上才有时间,沟通就成了一件成本非常高的事情。

所以在沟通的时候我尽量选择电话或者会议进行沟通,相比于打字,这种效率要高很多。

其次,在沟通的时候一定不要用命令的语气,因为大家都是一样的,发现问题以后,在时间方便的情况下及时做出修改即可。

最后

随着时间的推移,我越来越发现其实项目能否做成功,关键点不在于用的什么先进的技术,而在于项目开发过程中的沟通是否有效。

什么是有效的沟通?过程顺畅,参与的人员没有发生矛盾,即便有矛盾,后面也可以将矛盾化解,使问题得以解决。

这才是有效的沟通。

如果沟通及时、有效,问题能够及时解决,项目自然而然的就可以做成。