来吧，开发你的第一个智能合约

zhanyd

发布于 2022-12-05 15:21:21

6690

发布于 2022-12-05 15:21:21

文章被收录于专栏：编程我也会

前言

现在区块链的技术很火，你肯定听说过智能合约，那到底什么是智能合约呢？

其实智能合约一点都不智能，它只是开发好的一段程序部署在区块链上，我们可以调用其中的方法而已。

和现在的人工智能一点关系的都没有，那开发一个智能合约难不难呢？

真的不难，不信你随我来，包学包会。

环境准备

1.安装Node.js、npm

Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，我们这里安装Node.js是为了安装npm。

去Nodejs官网下载Node.js（https://nodejs.org/zh-cn/download/）安装包，按提示安装即可。

我们在终端输入node -v，如果可以看到版本号说明安装成功：

安装好了nodejs之后，默认就会安装npm。

npm又是什么呢？

npm其实是Node.js的包管理工具（package manager）。

简单的说npm就是帮我们快速下载各种工具的。

我们在者终端输入npm -v，如果可以看到版本号说明安装成功：

2.安装Web3 JS - 开发以太坊客户端的javascript框架

在终端输入：npm install web3

即可自动下载安装，web3.js（都是npm的功劳）。

web3.js是干嘛用的呢？

简单的说web3.js的主要功能就是，提供了很多操作智能合约的类库，让我们可以通过JavaScript来调用智能合约。

3.安装Ganache

去官网下载Ganache（https://trufflesuite.com/ganache/）安装，Ganache是一个本地的区块链测试环境，它虚拟了一个简单的区块链，我们可以把智能合约先部署到本地先测试，测试好了之后再发布到正式的链上。

安装好后打开，点击quickstart，就能快速新建一个测试区块链环境。

新建好之后，我们就可以看到本地的区块链环境，其中有网络ID，本地的服务地址和几个测试账号，每个账号里面都有100个ETH。

编码部署

1. 编写合约

remix（https://remix.ethereum.org/）是一个在线的智能合约开发环境，我们可以直接在浏览器中使用，非常方便。

打开网页之后，我们可以看到一个编辑页面，在左边的contracts文件夹下，新增一个我们自己的智能合约文件SetName.sol：

编写智能合约使用solidity语言，下面是一个简单的例子，就是两个设置名字和幸运号码的方法和两个获取值的方法，具体的语法这里就不介绍了，请查看相关资料。

// 合约版本号
pragma solidity >=0.7.0 <0.9.0;

contract SetName {
   // 名字 
   string public name;
   // 幸运号码
   uint32 public luckNum;

   // 构造方法，创建合约的时候自动调用（仅运行一次）
   constructor() public {
       name = "zhanyd";
   }

   // 设置名字
   function setName(string _name) public {
       name = _name;
   }

   // 获取名字
   function getName() external view returns (string memory) {
        return name;
    }

    // 设置幸运号码
   function setLuckNum(uint32 _luckNum) public {
       luckNum = _luckNum;
   }

    // 获取幸运号码
   function getLuckNum() external view returns (uint32) {
        return luckNum;
    }
}

2.部署合约

点击左边的deploy&run按钮，在ENVIRONMENT 下拉框中选择 Ganache Provider：

在Ganache Provider 弹出框中填上Ganache的本地服务地址。

点确定之后，就会自动加载Ganache中的地址：

选择我们的智能合约setName之后，点击Deploy按钮就可以部署合约了。

部署玩之后，我们可以看到Deployed Contracts下面已经生成了我们部署的合约，同时显示了合约中的方法，右下角会显示系统日志。

同时，我们在Ganache中的transactions标签页中可以看到创建合约的事务：

到这里智能合约就部署完了，是不是很简单？

3.调用合约

我们来调用一下合约试试看：

点击getName按钮，即调用了合约中的getName方法，返回了name的初始值zhanyd（还记得上面代码里的构造方法constructor()吗？）。

我们分别调用setLuckNum和setName方法，设置幸运数字和名称，日志记录生成了两个区块：

我们可以在Ganache中看到新增了两个区块：

点击getLuckNum和getName按钮，获取刚刚设置的幸运号码和名字：

恩，看来合约调用成功了，但是我们不能一直在开发环境中调用合约啊，这也太麻烦了。

我们开发智能合约是给大家一起用的，如果能在浏览器中用网页直接调用就好了！

DAPP

DAPP是什么呢？

DAPP是去中心化应用，简单说就是能调用智能合约的应用。

现在我们就来开发一个简单的DAPP。

还记得我们刚开始安装的web3.js吗？

现在就要派上用场了，web3.js就是为了让我们能用JavaScript代码来调用智能合约的。

让我们先来写一个简单的HTML网页吧。

1.编写DAPP

<!DOCTYPE html>
<html>
<head>
    <!-- 在线引入jquery -->
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
 <!-- 在线引入web3.min.js -->
 <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
 <title></title>
 显示名字：<div id="show_name"></div>
 显示幸运号码：<div id="show_luck_num"></div>
 <from id="form">
  <div>名字：<input type="text" name="name" id="name"></div>
  <div>幸运号码：<input type="text" name="luckNum" id="luckNum"></div>
  <input type="button" value="提交" onclick="submit()">
 </from>
</head>
<body>
 <script type="text/javascript">
  let contract
  let web3
  $(function() {
          // 初始化 Web3
    if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
    } else {
        web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545'));
    }
   
    // 测试是否连接成功
    web3.eth.net.isListening()
      .then(() => console.log('is connected'))
      .catch(e => console.log('Wow. Something went wrong: '+ e));
    // 设置合约 ABI
    var contractAbi = 
     [
    {
     "inputs": [
      {
       "internalType": "uint32",
       "name": "_luckNum",
       "type": "uint32"
      }
     ],
     "name": "setLuckNum",
     "outputs": [],
     "stateMutability": "nonpayable",
     "type": "function"
    },
    {
     "inputs": [
      {
       "internalType": "string",
       "name": "_name",
       "type": "string"
      }
     ],
     "name": "setName",
     "outputs": [],
     "stateMutability": "nonpayable",
     "type": "function"
    },
    {
     "inputs": [],
     "stateMutability": "nonpayable",
     "type": "constructor"
    },
    {
     "inputs": [],
     "name": "getLuckNum",
     "outputs": [
      {
       "internalType": "uint32",
       "name": "",
       "type": "uint32"
      }
     ],
     "stateMutability": "view",
     "type": "function"
    },
    {
     "inputs": [],
     "name": "getName",
     "outputs": [
      {
       "internalType": "string",
       "name": "",
       "type": "string"
      }
     ],
     "stateMutability": "view",
     "type": "function"
    },
    {
     "inputs": [],
     "name": "luckNum",
     "outputs": [
      {
       "internalType": "uint32",
       "name": "",
       "type": "uint32"
      }
     ],
     "stateMutability": "view",
     "type": "function"
    },
    {
     "inputs": [],
     "name": "name",
     "outputs": [
      {
       "internalType": "string",
       "name": "",
       "type": "string"
      }
     ],
     "stateMutability": "view",
     "type": "function"
    }
   ]

    // 设置合约地址
    let contractAddress = '0xeB730Ef3Bc008376c88e09E6d23e364AEedA89a4';
    // 获取智能合约对象
    contract = new web3.eth.Contract(contractAbi,contractAddress);
    // 调用合约对象的方法，返回名字
    contract.methods.getName().call()
      .then(function(result) {
       console.log(result)
       $('#show_name').text(result)
    })
    // 调用合约对象的方法，返回幸运号码  
    contract.methods.getLuckNum().call()
      .then(function(result) {
       console.log(result)
       $('#show_luck_num').text(result)
    })    
  })

  // 提交事假
  function submit() {
      // from是Ganache模拟的一个账户地址
   contract.methods.setName($('#name').val()).send({from: '0x401Ec2d1E34d5Ae1fA07e5857Da9238CDC9dDf13'})
   .then(function(result) {
       console.log(result)
    });
   contract.methods.setLuckNum($('#luckNum').val()).send({from: '0x401Ec2d1E34d5Ae1fA07e5857Da9238CDC9dDf13'})
   .then(function(result) {
       console.log(result)
    });;
  }

 </script>

</body>
</html>

注意，合约地址是在这里：