阐明：本篇所波及的 DAPP 众筹需要及合约实现来自登链社区

通过后面的内容，咱们大抵理解了如何应用 Ganache + Truffle 开发智能合约，一个残缺的利用还包含用户界面。咱们把构建在智能合约之上的利用成为 DAPP，即去中心化利用。

DAPP 开发

惯例互联网利用是前端申请中心化服务器，服务器同步响应数据。DAPP 则是前端申请去中心化网络中的任意节点，节点收到交易申请后，播送到整个网络，在网络中达成共识从而实现交易。

在 DAPP 利用中，发送给节点的申请称为“交易”，须要关联钱包进行签名之后能力发送给节点；另外，交易因为须要期待网络共识，所以大多数是异步的，个别通过事件回调获取后果。

前端与智能合约的通信
开发 DAPP 利用，最重要的两局部就是前端利用及智能合约。智能合约运行在以太坊虚拟机（EVM）上，前端调用智能合约是通过向节点发动申请实现的。前端局部同互联网前端利用一样，能够应用任何本人善于的前端框架如 Vue 或 React 来开发，而后通过 web3.js 函数库去调用智能合约。以太坊提供了与节点交互的 JSON-RPC 接口，Web3 函数库是 JSON-RPC 的封装，支流语言都有 Web3 的实现，JavaScript 是 web3.js，java 是 web3j。

众筹我的项目需要剖析

假如我筹备合作一本书，然而不确定多少人违心购买。于是，我发动一个众筹，如果在一个月内，能筹集到 10 个 ETH，就进行写作，并且众筹参加用户每人赠送一本，如果未能筹到足够的资金，用户能够取回投入的资金。同时为了让用户积极参与，设置了一个阶梯价格，初始时，参加众筹的价格非常低（0.02ETH），每筹集满 1 个 ETH 时，价格上涨 0.002ETH。
从需要能够演绎出合约三个对外的动作（函数）：

1. 用户汇款进合约，通过实现合约的退回函数来实现；
2. 用户赎回汇款，这个函数须要在众筹未达标之后，由用户自己调用失效；
3. 发起者提取资金，这个函数须要在众筹达标之后，由发起者调用。

除此之外，进一步梳理逻辑，发现还须要保留一些状态变量以及增加相应的逻辑：

1. 记录用户众筹的金额，能够应用一个 mapping 类型来保留；
2. 记录以后众筹的价格，价格能够应用一个 mapping 类型来保留；
3. 记录合约众筹的截止工夫，用 uint 类型来保留截止工夫，能够在构造函数中应用以后工夫加上 30 天作为截止工夫；
4. 记录众筹的受益者，用 address 类型记录，在构造函数中记录合约创作者；
5. 记录以后众筹状态（是否曾经敞开），如果众筹达标（创作者提取资金时应及时敞开状态）之后，就须要阻止用户参加。

创立前端利用

前端咱们应用 vue 开发，如果对 Vue.js 不理解，倡议先浏览 Vue.js 官网教程。

Vue CLI 没装置的先装置：

npm install -g @vue/cli

创立 crowdfunding 前端工程：

vue create crowdfunding

实现众筹合约

编写智能合约

truffle 初始化

cd crowdfunding
truffle init

在 contracts 下创立 Crowdfunding.sol：

pragma solidity >=0.6.0 <0.7.0;
contract Crowdfunding {
    // 创作者
    address public author;
    // 参加金额
    mapping(address => uint) public joined;
    // 众筹指标
    uint constant Target = 10 ether;
    // 众筹截止工夫
    uint public endTime;
    // 记录以后众筹价格
    uint public price = 0.02 ether;
    // 作者提取资金之后，敞开众筹
    bool public closed = false;
    // 部署合约时调用，初始化作者及众筹完结工夫
    constructor() public {
        author = msg.sender;
        endTime = now + 30 days;
    }
    // 更新价格，这是一个外部函数
    function updatePrice() internal {uint rise = address(this).balance / 1 ether * 0.002 ether;
        price = 0.02 ether + rise;
    }
    // 用户向合约转账时，触发的回调函数
    receive() external payable {require(now < endTime && !closed , "众筹已完结");
        require(joined[msg.sender] == 0, "你曾经参加过众筹");
        require(msg.value >= price, "出价太低了");
        joined[msg.sender] = msg.value;
        updatePrice();}
    // 作者提取资金
    function withdrawFund() external {require(msg.sender == author, "你不是作者");
        require(address(this).balance >= Target, "未达到众筹指标");
        closed = true;
        msg.sender.transfer(address(this).balance);
    }
    // 读者赎回资金
    function withdraw() external {require(now > endTime, "还未到众筹完结工夫");
        require(!closed, "众筹达标，众筹资金已提取");
        require(Target > address(this).balance, "众筹达标，你没法提取资金");
        msg.sender.transfer(joined[msg.sender]);
    }
}

编译智能合约

truffle compile

部署智能合约

在 migrations 下创立部署脚本，2_crowfunding.js：

const crowd = artifacts.require("Crowdfunding");

module.exports = function (deployer) {deployer.deploy(crowd);
};

在 truffle-config.js 配置要部署的网络，同时确保 Ganache 已运行，执行智能合约部署：

truffle migrate

众筹前端实现

Vue 创立的脚手架工程，默认会有个 HelloWorld.vue 组件，咱们写一个本人的 CrowdFund.vue 组件，把 App.vue 中的 HelloWorld.vue 替换掉。

App.vue 批改为：

<template>
  <div id="app">
    <CrowdFund/>
  </div>
</template>

<script>
import CrowdFund from './components/CrowdFund.vue'

export default {
  name: 'App',
  components: {CrowdFund}
}
</script>

而后在 CrowdFund.vue 中实现众筹界面及相应逻辑，界面须要显示以下几个局部：

1. 以后众筹到的金额；
2. 众筹的截止工夫；
3. 以后众筹的价格，参加众筹按钮；
4. 如果是曾经参加，显示其参加的价格以及赎回按钮；
5. 如果是创作者，显示一个提取资金的按钮。

CrowdFund.vue 批改如下：

<template>
<div class="content">
  <h3> 新书众筹 </h3>
  <span> 以最低的价格获取我的新书 </span>

  <!-- 众筹的总体状态  -->
  <div class="status">
    <div v-if="!closed"> 已众筹资金：<b>{{total}} ETH </b></div>
    <div v-if="closed"> 众筹已实现 </div>
    <div> 众筹截止工夫：{{endDate}}</div>
  </div>

  <!-- 当读者参加过，显示如下 div  -->
  <div v-if="joined" class="card-bkg">
    <div class="award-des">
      <span> 参加价格 </span>
      <b> {{joinPrice}} ETH </b>
    </div>

    <button :disabled="closed" @click="withdraw"> 赎回 </button>
  </div>

  <!--  当读者还未参加时，显示如下 div  -->
  <div v-if="!joined" class="card-bkg">
    <div class="award-des">
      <span> 以后众筹价格 </span>
      <b> {{price}} ETH </b>
    </div>

    <button :disabled="closed" @click="join"> 参加众筹 </button>
  </div>

  <!--  如果是创作者，显示 -->
  <div class="box" v-if="isAuthor">

    <button :disabled="closed" @click="withdrawFund"> 提取资金 </button>
  </div>

</div>
</template>

持续编写 JavaScript 逻辑局部，与合约交互须要用到 truffle-contract 及 web3，先装置：

npm install --save truffle-contract web3

CrowdFund.vue 批改如下：

<script>
import Web3 from "web3";
import contract from "truffle-contract";
import crowd from '../../build/contracts/Crowdfunding.json';

export default {
  name: 'CrowdFund',
  data() {
    return {
      price: null,
      total: 0,
      closed: true,
      joinPrice: null,
      joined: false,
      endDate: "null",
      isAuthor: true,
    };
  },

  // 以后 Vue 组件被创立时回调的 hook 函数
  async created() {
    // 初始化 web3 及账号
    await this.initWeb3Account()
    // 初始化合约实例
    await this.initContract()
    // 获取合约的状态信息
    await this.getCrowdInfo()},

  methods: {

    // 初始化 web3 及账号
    async initWeb3Account() {if (window.ethereum) {
        this.provider = window.ethereum;
        try {await window.ethereum.enable();
        } catch (error) {//   console.log("User denied account access");
        }
      } else if (window.web3) {this.provider = window.web3.currentProvider;} else {this.provider = new Web3.providers.HttpProvider("http://127.0.0.1:7545");
      }
      this.web3 = new Web3(this.provider);
      this.web3.eth.getAccounts().then(accs  => {this.account = accs[0]
      });
    },

    // 初始化合约实例
    async initContract() {const crowdContract = contract(crowd);
      crowdContract.setProvider(this.provider);
      this.crowdFund = await crowdContract.deployed();},

    // 获取合约的状态信息
    async getCrowdInfo() {
      // 获取合约的余额
      this.web3.eth.getBalance(this.crowdFund.address).then(
        r => {this.total = this.web3.utils.fromWei(r)
        }
      );
      // 获取读者的参加金额，joined 在合约中是 public 的状态变量，主动生成相应的拜访器函数
      this.crowdFund.joined(this.account).then(
        r => {if (r > 0) {
            this.joined = true
            this.joinPrice = this.web3.utils.fromWei(r)
          }
        }
      );
     // 获取合约的敞开状态
      this.crowdFund.closed().then(r => this.closed = r);
      // 获取以后的众筹价格
      this.crowdFund.price().then(r => this.price = this.web3.utils.fromWei(r)
      );
      // 获取众筹截止工夫
      this.crowdFund.endTime().then(r => {var endTime = new Date(r * 1000)
        // 把工夫戳转化为本地工夫
        this.endDate = endTime.toLocaleDateString().replace(/\//g, "-") + " " + endTime.toTimeString().substr(0, 8);
      });
      // 获取众筹创作者地址
      this.crowdFund.author().then(r => {if (this.account == r) {this.isAuthor = true} else {this.isAuthor = false}
      });
    },

    // 读者点击参加众筹时调用
    join() {
      this.web3.eth.sendTransaction({
        from: this.account,
        to: this.crowdFund.address,
        value: this.web3.utils.toWei(this.price)
      }).then(() =>
        this.getCrowdInfo());
    },

    // 赎回
    withdraw() {
      this.crowdFund.withdraw(
        this.crowdFund.withdraw({from: this.account}).then(() => {this.getCrowdInfo()
        })
      );
    },

    // 提取资金
    withdrawFund() {
      this.crowdFund.withdrawFund({from: this.account}).then(() => {this.getCrowdInfo()
      })
    },

  }
}
</script>

到之类，众筹案例就全副实现了。

DAPP 运行

在我的项目目录运行利用：

npm run serve

浏览器地址拜访 http://localhost:8080 即可体验该 DAPP：

留神要确保 MetaMask 连贯的网络和合约部署的网络统一，这样子 DAPP 能力通过 web3 获取到合约数据

DAPP 公布

npm run build

dist 目录下，构建出用户公布的残缺前端代码。拷贝到公网服务器对外服务即可。