以太坊DApp开发指南

DApp架构设计

DApp架构.png

如上图,DApp的架构我们可以简单分为以上三种类型:轻钱包模式、重钱包模式和兼容模式。

轻钱包模式

轻钱包模式下我们需要有一个开放Http RPC协议的节点与钱包通信,这个节点可以是任意链上的节点。轻钱包通常会作为一个浏览器插件存在,插件在运行时会自动注入Web3框架,DApp可以通过Web3与区块链节点通信。当DApp只是单纯的获取数据时是不需要钱包介入的,但是当DApp需要发送交易到链上时需要通过钱包完成对交易签名的过程。
优点:不需要用户同步区块链节点就可以使用
缺点:需要一个公开的节点提供服务,可能会存在安全性问题

重钱包模式

重钱包会自己同步并持有一个区块链节点,提供一个浏览器环境,其他与钱包相似。
优点:自己持有并同步节点,安全性高
缺点:需要持有一个全量的区块链节点

兼容模式

兼容模式可以在轻钱包和重钱包下同时使用,与钱包通信的节点可以选择在钱包外本地持有,也可以自己搭建服务持有并公布节点。

DApp开发

理解了DApp的架构设计就可以开始一步步的搭建我们的DApp了,这里我们不选择用各种成熟的框架。从最基础的开始,会更容易理解核心的思想。选择一个轻量级的钱包插件MetaMask,安装并创建自己的账号。
MetaMask默认会提供以下节点可以使用:

  • Main Ethereum Network
  • Ropsten Test Network
  • Kovan Test Network
  • Rinkeby Test Network
  • Localhost 8545

当然你也可以手动添加自己的节点

编写并编译智能合约

以太坊提供一个图灵完备的开发环境,理论上可以构建任意复杂的智能合约,但是也要考虑到越复杂的逻辑越容易出错,并且会消耗更多的Gas,因此在设计上需要谨慎考虑。关于智能合约的编写这里不再赘述。这里有一个简单的合约:

pragma solidity ^0.4.21;
/**
Footmark
 */
contract Footmark {
    struct Log {
        uint time;
        string text;
    }
    mapping (address=>mapping(address=>Log)) private logs;
   
    function Footmark() public {
        
    }
    
    // Leave a message to somebody
    function leaveMessage(string text,address to) public returns(uint time) {
        bytes memory textBytes = bytes(text);
        require(textBytes.length > 0 && textBytes.length < 100);
        time = now;
        logs[msg.sender][to] = Log(time, text);
        return time;
    }
    
    // Leave a message to myself
    function enter(string text) public returns(uint time) {
        return leaveMessage(text, msg.sender);
    }
    
    // Lookup message from somebody
    function lookupFrom(address from) public view returns(uint time, string text) {
        return (logs[from][msg.sender].time,logs[from][msg.sender].text);
    }
    
    // Lookup message from myself to somebody
    function lookupTo(address to) public view returns(uint time, string text) {
        return (logs[msg.sender][to].time,logs[msg.sender][to].text);
    }
}

逻辑非常简单,任何人都可以在该合约中给其他人留言,所有人都可以查看留给自己的信息或者自己留给其他人的信息。
接下来我们编译一下我们刚刚写的智能合约。各种框架都有提供合约编译的功能,比如Truffle。为了方便了解合约的编译过程,我们使用比较基础的Solidity的编译器solc来完成。
如果通过

npm install -g solc

方式安装,会另外得到一个命令行工具solcjs,当然直接引用solc模块是可以用js脚本完成编译的

var solc = require('solc')
var input = 'pragma solidity ^0.4.21;contract Footmark {struct Log {uint time;string text;}mapping (address=>mapping(address=>Log)) private logs;function Footmark() public {}function leaveMessage(string text,address to) public returns(uint time) {bytes memory textBytes = bytes(text);require(textBytes.length > 0 && textBytes.length < 100);time = now;logs[msg.sender][to] = Log(time, text);return time;}function enter(string text) public returns(uint time) {return leaveMessage(text, msg.sender);}function lookupFrom(address from) public view returns(uint time, string text) {return (logs[from][msg.sender].time,logs[from][msg.sender].text);}function lookupTo(address to) public view returns(uint time, string text) {return (logs[msg.sender][to].time,logs[msg.sender][to].text);}}'
// Setting 1 as second paramateractivates the optimiser
var output = solc.compile(input, 1)
for (var contractName in output.contracts) {
    // code and ABI that are needed by web3
    console.log(contractName + ': ' + output.contracts[contractName].bytecode)
    console.log(contractName + '; ' + JSON.parse(output.contracts[contractName].interface))
}

方便期间我们使用命令行编译

solcjs Footmark.sol --abi --bin

会得到两个文件,后续我们会用到这两个文件的内容

  • Footmark_sol_Creation.bin :编译后的binary code
  • Footmark_sol_Creation.abi :编译后的abi

还有一种更方便和直观的合约编译方式http://remix.ethereum.org/

Footmark.jpg

Footmark_detail.jpg

编译的过程和结果都非常直观,更方便的一点是可以帮助开发者及时发现问题

合约部署

合约的部署需要借助Web3框架来完成,对于以太坊节点来说合约的部署会被视作一次交易,合约的内容会被存储在链上,因此部署过程需要借助钱包来完成交易签名,部署代码如下:

let abi = [{"constant":true,"inputs":[{"name":"to","type":"address"}],"name":"lookupTo","outputs":[{"name":"time","type":"uint256"},{"name":"text","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"text","type":"string"}],"name":"enter","outputs":[{"name":"time","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"text","type":"string"},{"name":"to","type":"address"}],"name":"leaveMessage","outputs":[{"name":"time","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"from","type":"address"}],"name":"lookupFrom","outputs":[{"name":"time","type":"uint256"},{"name":"text","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"}];
let binaryData = '0x6060604052341561000f57600080fd5b61082f8061001e6000396000f300606060405260043610610062576000357c0100000000000000000000000000000000000000000000000000000000900463ffffffff168063762db2b4146100675780639d4ff8ad14610120578063b2c21c9114610191578063bcea56e014610221575b600080fd5b341561007257600080fd5b61009e600480803573ffffffffffffffffffffffffffffffffffffffff169060200190919050506102da565b6040518083815260200180602001828103825283818151815260200191508051906020019080838360005b838110156100e45780820151818401526020810190506100c9565b50505050905090810190601f1680156101115780820380516001836020036101000a031916815260200191505b50935050505060405180910390f35b341561012b57600080fd5b61017b600480803590602001908201803590602001908080601f01602080910402602001604051908101604052809392919081815260200183838082843782019150505050505091905050610486565b6040518082815260200191505060405180910390f35b341561019c57600080fd5b61020b600480803590602001908201803590602001908080601f0160208091040260200160405190810160405280939291908181526020018383808284378201915050505050509190803573ffffffffffffffffffffffffffffffffffffffff16906020019091905050610499565b6040518082815260200191505060405180910390f35b341561022c57600080fd5b610258600480803573ffffffffffffffffffffffffffffffffffffffff1690602001909190505061058a565b6040518083815260200180602001828103825283818151815260200191508051906020019080838360005b8381101561029e578082015181840152602081019050610283565b50505050905090810190601f1680156102cb5780820380516001836020036101000a031916815260200191505b50935050505060405180910390f35b60006102e4610736565b6000803373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060008473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff168152602001908152602001600020600001546000803373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060008573ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff168152602001908152602001600020600101808054600181600116156101000203166002900480601f0160208091040260200160405190810160405280929190818152602001828054600181600116156101000203166002900480156104765780601f1061044b57610100808354040283529160200191610476565b820191906000526020600020905b81548152906001019060200180831161045957829003601f168201915b5050505050905091509150915091565b60006104928233610499565b9050919050565b60006104a361074a565b839050600081511180156104b8575060648151105b15156104c357600080fd5b4291506040805190810160405280838152602001858152506000803373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060008573ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060008201518160000155602082015181600101908051906020019061057c92919061075e565b509050508191505092915050565b6000610594610736565b6000808473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff168152602001908152602001600020600001546000808573ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff168152602001908152602001600020600101808054600181600116156101000203166002900480601f0160208091040260200160405190810160405280929190818152602001828054600181600116156101000203166002900480156107265780601f106106fb57610100808354040283529160200191610726565b820191906000526020600020905b81548152906001019060200180831161070957829003601f168201915b5050505050905091509150915091565b602060405190810160405280600081525090565b602060405190810160405280600081525090565b828054600181600116156101000203166002900490600052602060002090601f016020900481019282601f1061079f57805160ff19168380011785556107cd565b828001600101855582156107cd579182015b828111156107cc5782518255916020019190600101906107b1565b5b5090506107da91906107de565b5090565b61080091905b808211156107fc5760008160009055506001016107e4565b5090565b905600a165627a7a72305820578c1cdd7be62a4f2138d05a15b241857bc9f554fe0f176a194620b04cd8344e0029';
var creationContract = web3.eth.contract(abi);
var creation = creationContract.new(
   {
     from: web3.eth.accounts[0], 
     data: binaryData, 
     gas: '4700000'
   }, function (e, contract){
    console.log(e, contract);
    if (typeof contract.address !== 'undefined') {
         console.log('Contract mined! address: ' + contract.address + ' transactionHash: ' + contract.transactionHash);
    }
 });

这里的abi和binaryData来自上一步的编译结果
这里有以太坊测试网络Ropsten的部署结果:

0xc59565465f95Cd80E7317dd5a03929E6900090Ff

DApp开发

完成合约的编译和部署之后就可以进行接下来的DApp的开发了。
用之前提到过的MetaMask插件可以实现Chrome浏览器的轻量级钱包功能。MetaMask会在DApp运行环境中注入Web3框架,如果对MetaMask有强依赖的化我们只需要判断web3对象是否存在即可。

if (typeof web3 === "undefined") {
    alert('未检测到Web3环境,请使用集成以太坊钱包的浏览器查看');
    return;
}

环境检测成功后就可以准备合约调用相关的依赖了,编译合约的时候生成的ABI描述文件可以直接构造为Javascript对象

let footmarkABI = [
    {
        "constant": false,
        "inputs": [
            {
                "name": "text",
                "type": "string"
            }
        ],
        "name": "enter",
        "outputs": [
            {
                "name": "time",
                "type": "uint256"
            }
        ],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "constant": false,
        "inputs": [
            {
                "name": "text",
                "type": "string"
            },
            {
                "name": "to",
                "type": "address"
            }
        ],
        "name": "leaveMessage",
        "outputs": [
            {
                "name": "time",
                "type": "uint256"
            }
        ],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": true,
                "name": "from",
                "type": "address"
            },
            {
                "indexed": true,
                "name": "to",
                "type": "address"
            },
            {
                "indexed": false,
                "name": "text",
                "type": "string"
            }
        ],
        "name": "LeaveMessage",
        "type": "event"
    },
    {
        "inputs": [],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "constructor"
    },
    {
        "constant": true,
        "inputs": [
            {
                "name": "from",
                "type": "address"
            }
        ],
        "name": "lookupFrom",
        "outputs": [
            {
                "name": "time",
                "type": "uint256"
            },
            {
                "name": "text",
                "type": "string"
            }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
    },
    {
        "constant": true,
        "inputs": [
            {
                "name": "to",
                "type": "address"
            }
        ],
        "name": "lookupTo",
        "outputs": [
            {
                "name": "time",
                "type": "uint256"
            },
            {
                "name": "text",
                "type": "string"
            }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
    }
];
export default footmarkABI;

ABI是对合约接口的描述,调用线上合约的时候需要用到,当然生成的合约地址也是必要数据

data: function() {
    return {
        account: '',
        messageTo: '',
        messageContent: '',
        lookupMessageTo: '',
        lookupMessageFrom: '',
        contractInstance: null,
        contractAddress: '0xc59565465f95Cd80E7317dd5a03929E6900090Ff'
    };
}
// 实例化合约
if(!this.contractInstance) {
    var contract = web3.eth.contract(footmarkABI);
    this.contractInstance = contract.at(this.contractAddress);
}

到这里合约就得到了一个实例化的合约对象,可以调用合约的方法,完成相应的功能。

获取钱包当前账户

getAccount() {
    web3.eth.getAccounts((error, accounts) => {
        if (!error) {
            this.account = accounts[0];
        }
    });
}

给其他人留言

leaveMessageTo() {
    this.contractInstance.leaveMessage(this.messageContent, this.messageTo, { from: self.account }, (error, result) => {
        if (!error) {
            var event = this.contractInstance.LeaveMessage((eerror, eresult) => {
                event.stopWatching();
                alert("留言成功!");
            });
        } else {
            alert("留言失败!");
        }
    });
    alert("交易签发,静等回复。。。");
}

获取其他人给自己的留言

getMessageFrom() {
    this.contractInstance.lookupFrom(this.lookupMessageFrom, { from: self.account }, (error, result) => {
        let time = result[0].toNumber() * 1000;
        let msg = result[1];
        let date = new Date(time);
        if (time > 0) {
            alert(date.toLocaleDateString() + ' ' + date.toLocaleTimeString() + '\n' + result[1]);
        } else {
            alert("未查询到留言!");
        }
    });
}

获取自己给其他人的留言

getMessageTo() {
    this.contractInstance.lookupTo(this.lookupMessageTo, { from: self.account }, (error, result) => {
        let time = result[0].toNumber() * 1000;
        let msg = result[1];
        let date = new Date(time);
        if (time > 0) {
            alert(date.toLocaleDateString() + ' ' + date.toLocaleTimeString() + '\n' + result[1]);
        } else {
            alert("未查询到留言!");
        }
    });
}

功能完成DApp就可以发布了,当然这只是一个功能非常简单的DApp,这里只是把DApp的开发流程描述了一下,隐藏了一些比较繁琐的细节,比如交易签名(钱包帮我们完成,其实我们也可以自己来做,后续有时间再把这块内容详细介绍一下)、交易状态监听等等。

Done

这里有DApp的合约信息(Ropsten网络):0xc59565465f95Cd80E7317dd5a03929E6900090Ff

和DApp的发布版本:
http://dawntech.top/contract

你可能感兴趣的:(以太坊DApp开发指南)