摘要：在学习了最基础的一些以太坊知识以及开发框架搭建完成之后，可以尝试开发自己的第一个DApp，此处使用Truffle开发框架，Remix编译环境，Genache测试客户端，具体操作如下

在学习了最基础的一些以太坊知识以及开发框架搭建完成之后，可以尝试开发自己的第一个DAPP，此处使用松露开发框架，混音编译环境，Genache测试客户端，具体操作如下。

此处参照MetaCoin创建自己的模拟转账Dapp名称为RuoliCoin

1，创建工作目录

创建RuoliCoin目录，在此目录下打开命令行执行Truffle初始化命令，如下：

松露unbox webpack

即可创建基础松露框架。

2，创建密实智能合约文件

在RuoliCoin / contracts目录下删除原有的ConvertLib.sol，MetaCoin.sol两个文件，新建RuoliCoin.sol文件，使用Web版本的Remix打开此文件，进行智能合约的编写操作，最后编写好的智能合约内容如下：

pragma solidity ^ 0.4.23;

合同RuoliCoin {
	mapping（address => uint）balances; 事件转移（地址索引_from，地址索引_to，uint256 _value）; constructor（）public {
		余额[msg.sender] = 10000;
	函数sendCoin（地址接收者，uint金额）公共返回（bool足够）{if（balances [msg.sender] <amount）返回false;
		余额[msg.sender]  -  =金额;
		余额[收货人] + =金额; 发出转移（msg.sender，接收者，金额）; 返回true;

	function getBalance（address addr）public view returns（uint）{return balances [addr];
	}
}

3，部署至测试环境

修改truffle.js文件，指定本地RCP Server地址（启动Ganache后主界面有显示），内容如下：

扫描二维码关注公众号，回复： 3291490 查看本文章

module.exports = {
    网络：{  
        发展：{  
            主持人：'localhost'，  
            港口：'7545'，  
            network_id：'*'//匹配任何网络ID  
        }  
    } 
};

迁移目录下1_initial_migration.js，2_deploy_contracts.js两个文件非常重要切勿删除，在此目录下将2_deploy_contracts.js进行修改内容如下：

var RuoliCoin = artifacts.require（“./ RuoliCoin.sol”）; module.exports = function（deployer）{
  deployer.deploy（RuoliCoin）;
  
};

在RuoliCoin目录下使用命令行编译并部署智能合约文件，如下：

PS C：\ Workspace \ Ruoli-Code \ Truffle \ RuoliCoin> truffle compile
PS C：\ Workspace \ Ruoli-Code \ Truffle \ RuoliCoin>松露部署
使用网络'发展'。

正在运行迁移：1_initial_migration.js
  部署迁移...
  ... 0x73e55a0f780c6780039abc3feb8b5e1243744135096e441668e8ab55579e51db
  迁移：0xb81237dd01159a36a5ac3c760d227bbafe3341e成功迁移到网络...
  ... 0xc5be542ec02f5513ec21e441c54bd31f0c86221da26ed518a2da25c190faa24b保存文物......
正在运行迁移：2_deploy_contracts.js
  部署RuoliCoin ......
  ... 0xd4c85531d5d83c61f79485c43e6e4146d51b909c8b73bf5d88b60aa990cf1d08
  RuoliCoin：0x6ba286f3115994baf1fed1159e81f77c9e1cd4fa成功迁移到网络...
  ... 0xc8d5533c11181c87e6b60d4863cdebb450a2404134aea03a573ce6886905a00b保存文物......
PS C：\ Workspace \ Ruoli-Code \ Truffle \ RuoliCoin>

此时查看Ganache界面中第一个账户的ETH余额已减少，说明部署成功。

4，编写页面文件

在app目录下删除所有文件，新建index.html，javascripts / app.js两个文件，文件内容如下：

index.html如下：

<！DOCTYPE html> <html> <head>
  <title> RuoliCoin  -  Truffle Demo </ title>
  <link rel =“stylesheet”href =“https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css”>
  <script src =“https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js”> </ script>
  <script src =“https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js”> </ script>
  <script src =“./ app.js”> </ script> </ head> <body>
  <div class =“container”style =“margin-top：80px;”>
    
    <div class =“form-group”>
      <input type =“text”class =“form-control”id =“transfer-addr”placeholder =“转入账户”>
    </ DIV>
    <div class =“form-group”>
      <input type =“text”class =“form-control”id =“transfer-money”placeholder =“注入金额”>
    </ DIV>
    <div class =“alert”role =“alert”style =“display：none;” ID = “消息框”> </ DIV>
    <button type =“submit”id =“transfer-confirm-btn”class =“btn btn-success”>转账</ button>
    <button type =“button”id =“transfer-clear-btn”class =“btn btn-default”>重置</ button>
    <HR />
    <div class =“form-group”>
      <input type =“text”class =“form-control”id =“balance-addr”placeholder =“查询余额账户”>
    </ DIV>
    <button type =“submit”id =“balance-select”class =“btn btn-success”>余额查询</ button>
  </ DIV> </ BODY> <SCRIPT>
  $（文件）。就绪（函数（）{
      $（'＃transfer-confirm-btn'）。on（'click'，function（）{var transferAddr = $（'＃transfer-addr'）。val（）; var transferMoney = $（'＃transfer-money' ）.val（）; if（transferAddr ==''）{
              showTips（ '警报-危险'， '转入账户不能为空'）;
          } else {//调用App的说（）方法
              window.App.transfer（transferAddr，transferMoney，function（err，result）{if（err）{
                     showTips（ '警报的危险'，ERR）;
                  } else {
                      showTips（ '警报的危险'，结果）;
                  }
              }）;
          }
      }）;
      $（'＃balance-select'）。on（'click'，function（）{var balanceAddr = $（'＃balance-addr'）。val（）; if（balanceAddr ==''）{
              showTips（ '警报-危险'， '查询余额账不能为空'）;
          } else {//调用App的说（）方法
              window.App.getBalance（balanceAddr，function（err，result）{if（err）{
                     showTips（ '警报的危险'，ERR）;
                  } else {
                      showTips（ '警报-危险'， '账户余额：' +导致）;
                  }
              }）;
          }
      }）;
      $（'＃cancel'）。on（'click'，function（）{
          $（ '＃用户名'）VAL（ ''）。
          $（ '＃消息盒子'）隐藏（）;
          $（ '＃消息盒子'）HTML（ ''）。
      }）;
  }）; function showTips（classType，tipsText）{
      $（ '＃消息框'）addClass（classType所）的.html（tipsText + ''）;
      $（ '＃消息盒子'）淡入（800）。
  } </ SCRIPT> </ HTML>

Java脚本/ app.js内容如下：

//导入CSS //导入“../stylesheets/app.css";//导入web3和truffle-contract库导入{默认为Web3}来自'web3';从'truffle-contract'导入{默认为合同} //导入Hello合约的ABI文件导入RuoliCoin_artifacts来自'../../build/contracts/RuoliCoin.json'//获取Hello合约对象var RuoliCoinContract = contract（RuoliCoin_artifacts）; var ruoliCoinInstance = null; var accounts; var account ; window.App = {
  init：function（）{//设置web3连接
    RuoliCoinContract.setProvider（web3.currentProvider）; //获取初始帐户余额，以便显示。
    web3.eth.getAccounts（function（err，accs）{if（err！= null）{
        alert（“获取帐户时出错。”）; 返回;
      } if（accs.length == 0）{
        alert（“无法获取任何帐户！确保您的以太坊客户端配置正确。”）; 返回;
      }

      accounts = accs;
      account = accounts [0];
    }）;  


    //实例为你好合约部署实例
    RuoliCoinContract.deployed（）。然后（函数（实例）{
      ruoliCoinInstance =实例; var event = ruoliCoinInstance.Transfer（）;
        event.watch（功能（错误，结果）{
          警报（误差）; 的console.log（结果）;
        }）;
    }）。catch（function（e）{console.log（e，null）;
    }）;
  }，//封装合约中的say（）方法调用过程，供javascript调用
  transfer：function（transferAddr，amount，callback）{//调用Hello合约中的say（）方法，并传入参数name
      ruoliCoinInstance.sendCoin（transferAddr，amount，{from：account}）。then（function（result）{//将返回结果传入回调函数
        callback（null，result）;
      }）;
  }，
  getBalance：function（balanceAddr，callback）{//调用Hello合约中的say（）方法，并传入参数name
      ruoliCoinInstance.getBalance.call（balanceAddr，{from：account}）。then（function（result）{//将返回结果传入回调函数
        callback（null，result）;
      }）;
  }
window.addEventListener（'load'，function（）{//设置web3连接http://127.0.0.1:7545为Ganache提供的节点链接
  window.web3 = new Web3（new Web3.providers.HttpProvider（“http://127.0.0.1:7545”））;
  App.init（）;
  
}）;

运行界面如下：

5，运行与测试

在RuoliCoin根目录执行启动命令npm run dev，如下：

PS C：\ Workspace \ Ruoli-Code \ Truffle \ Metacoin> npm run dev

> [email protected] dev C：\ Workspace \ Ruoli-Code \ Truffle \ Metacoin
> webpack-dev-server

项目运行在http：// localhost：8081 / webpack输出从/ Hash提供：8b5b7df27e0385bf011dVersion：webpack 2.7.0Time：3239ms
     资产大小块大块名称
    app.js 1.68 MB 0 [emit] [big] main
index.html 925字节[发出]
chunk {0} app.js（main）1.66 MB [条目] [渲染]
   [71] ./app/javascripts/app.js 3.64 kB {0} [built]
   [72]（webpack）-dev-server / client？http：// localhost：8081 7.93 kB {0} [built]
   [73] ./build/contracts/MetaCoin.json 47.8 kB {0} [built]
  [111] ./~/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [117] ./~/querystring-es3/index.js 127字节{0} [已建]
  [119] ./~/strip-ansi/index.js 161字节{0} [已建]
  [122] ./app/stylesheets/app.css 905字节{0} [已建]
  [163] ./~/truffle-contract/index.js 2.64 kB {0} [built]
  [197] ./~/url/url.js 23.3 kB {0} [built]
  [199] ./~/web3/index.js 193字节{0} [已建]
  [233]（webpack）-dev-server / client / overlay.js 3.67 kB {0} [built]
  [234]（webpack）-dev-server / client / socket.js 1.08 kB {0} [built]
  [235]（webpack）/ hot nonrecursive ^ \。\ / log $ 160 bytes {0} [built]
  [236]（webpack）/hot/emitter.js 77字节{0} [已建]
  [237] multi（webpack）-dev-server / client？http：// localhost：8081 ./app/javascripts/app.js 40 bytes {0} [built]
     + 223隐藏的moduleswebpack：编译成功。

访问上面提示的链接地址：http：// localhost：8081 /

即可访问到页面，输入转入地址和金额即可进行代币转账操作，输入查询余额地址即可进行查询余额操作。

作者：
链接：https://www.imooc.com/article/31140
来源：慕课网

以太坊区块链使用WEB3开发自己第一个DAPP

1，创建工作目录

2，创建密实智能合约文件

3，部署至测试环境

4，编写页面文件

5，运行与测试

猜你喜欢