【智能合约实战】——实现简易版dapp【对于用户年龄的获取和更新】

这篇具有很好参考价值的文章主要介绍了【智能合约实战】——实现简易版dapp【对于用户年龄的获取和更新】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


最近我司准备引入区块链技术,打算将整车上链,学习新技术的机会千载难逢,于是乎加入智能合约研究小组,以下是我一周了解和学习的入门级小成果

什么是dapp?

Dapp就是去中心化应用程序的简称 ,是以某种方式连接到区块链的在线应用程序。从理论上讲,dapp是运行在节点服务器上面的,而dapp的整个后端存储是在区块链而不是服务器上完成的,重点是dapp的数据是存储在区块链上的,不是中心数据库;DApp 的使用方式与其他任何app都相同

dapp和app交互方式有什么不同?

从用户角度看没有任务区别,发起请求,完成活动;从开发交互上讲,主要是业务功能存储在智能合约上,存储数据上链,公开透明。
【智能合约实战】——实现简易版dapp【对于用户年龄的获取和更新】

DAPP

1.界面:前端与集中式应用程序基本相同。

2.智能合约:首先智能合约是DApp 的一部分,Dapp的前端使用 API 与智能合约进行通信,智能合约负责与区块链网络的交互。

3.区块链网络:通过智能合约的运行,选择数据并将数据存储在去中心化区块链网络上。

APP

1.界面:用户通过网络、移动或桌面界面的前端与应用程序交互。什么是前端,我们手机、电脑或者其他终端安装的这个我们通常说的网络应用app

2.服务器:来自前端的请求然后被传递到中央服务器。

3.数据库:前端用户操作的数据(通过服务器请求获取)被收集并存储在单个公司或个人拥有的集中式数据库中

程序编写

目的:实现一个用户年龄的更新
完整项目的github地址:
firstTruffle-updateAge-dapp

开发前准备:

  • 开发工具:vsCode
  • 开发框架:node,truffle
  • 开发语言:solidity,JavaScript
  • 钱包:metamask【开发前请确保自己已经拥有一个账户】
  • node环境: macos安装node教程
  • 安装truffle:npm install -g truffle

初始化项目结构

mkdir firstTruffle
npm init
truffle init

执行后项目的结构为:
【智能合约实战】——实现简易版dapp【对于用户年龄的获取和更新】

网络配置

1.本地虚拟网络-安装gancache客户端【https://github.com/trufflesuite/ganache/releases】安装完成打开自动生产虚拟网络

2.通常通过infura【https://infura.io/】,先注册后登陆创建项目,选择网络后,会自动生成链接,详情见【infura的使用】
配置好之后,在根目录下创建.env文件,将infura的私钥和链接配置进行【注意不提交到git上,防止私钥泄露】
【智能合约实战】——实现简易版dapp【对于用户年龄的获取和更新】
然后安装dotenv【将变量从 .env 文件加载到 process.env 】支持
:const { API_URL, PRIVATE_KEY } = process.env;

#【全局配置文件】
npm install dotenv
#【提供web链接方法,后续链接钱包地址】
npm install truffle-hdwallet-provider

最终truffle-config.js中配置:其中dev是Gancahe的虚拟网络,本地测试部署是非常快的;rinkeby是以太坊的测试网络地址,可以在infura上找到地址

const webProvider=require("truffle-hdwallet-provider")
require('dotenv').config();
const { API_URL, PRIVATE_KEY } = process.env;

module.exports = {
  defaultNetwork:"rinkeby",
  networks: {
    dev: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*" // Match any network id
    },
    rinkeby:{
      provider:function(){
        return new webProvider(PRIVATE_KEY, API_URL) 
      },
      network_id: "*" , // Match any network id
      gas: 4500000,
    }
  }
};

编写智能合约

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

contract InfoContract {
    string name;
    uint age;

     /**定义事件*/
    event Instructor(string name, uint age);

    function setInfo(string memory _name, uint _age) public {
        name = _name;
        age = _age;
        /**触发事件 */
        emit Instructor(name, age);
    }

    function getInfo() public view returns(string memory, uint) {
        return (name, age);
    }
}

编写部署脚本:

const Migrations = artifacts.require("Migrations");

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

编写完成后,可以编译下看是否有问题:truffle compile,若成功显示如下结果。内部使用solc编译器
【智能合约实战】——实现简易版dapp【对于用户年龄的获取和更新】

智能合约测试

#【先引入truffle中合约包,减少开发成本,本期主要是为了测试】
npm install truffle-contract

测试用例编写:

pragma solidity >=0.4.22 <0.9.0;
import "truffle/Assert.sol";
/**地址合约*/
import "truffle/DeployedAddresses.sol";
import "../contracts/InfoContract.sol";

contract TestInfoContract {
   InfoContract info = InfoContract(DeployedAddresses.InfoContract());
   string name;
   uint age;

   function testInfo() public {
     info.setInfo("ABC", 10);

     (name, age) = info.getInfo();

     Assert.equal(name, "ABC", "设置名字出错");
     Assert.equal(age, 10, "设置年龄出错");
   }
}

编写完测试用例可以执行:truffle test,若成功则会显示
【智能合约实战】——实现简易版dapp【对于用户年龄的获取和更新】

智能合约部署

#在dev网络上部署合约:
truffle migrate --network dev

#在rinkeby网络上部署合约: 
truffle migrate --network rinkeby

web3j和智能合约交互

在根目录下创建src文件,再下面创建js文件夹,在js文件夹下引入【web3.min.js,truffle.contract.min.js,jquery.js】这三个公共包,创建app.js,这个是自己新生成,里面也有自己写的注释,方便理解

App = {
  web3Provider: null,
  contracts: {},

  init: function () {
    return App.initWeb3();
  },

  /**初始化web3,与钱包联通 */
  initWeb3: function () {
    if (window.ethereum) {
      this.provider = window.ethereum;
      try {
        window.ethereum.enable();
      } catch (error) {
        console.error("User denied account access");
      }

      App.web3Provider = web3.currentProvider
    } else if (typeof web3 !== 'undefined') {
      App.web3Provider = web3.currentProvider
      web3 = new Web3(App.web3Provider);
    } else {
      App.web3Provider = new Web3.providers.HttpProvider('HTTP://127.0.0.1:7545')
      web3 = new Web3(App.web3Provider);
    }

    return App.initContract();
  },

  /**获取账户的合约,绑定事件,并且设置监听*/
  initContract: function () {

    $.getJSON('InfoContract.json', function (data) {
      /**获取合约*/
      App.contracts.InfoContract = TruffleContract(data);
      /**连接账户*/
      App.contracts.InfoContract.setProvider(App.web3Provider);
      /**初始化数据 */
      App.getInfo();
      /**设置监听 */
      App.watchChanged();
    });

    /**绑定事件 */
    App.bindEvents();

  },

  /**合约交互,获取用户的年龄数据,显示在html上 */
  getInfo: function () {
    App.contracts.InfoContract.deployed().then(function (instance) {
      return instance.getInfo.call();
    }).then(function (result) {
      $("#loader").hide();
      $("#info").html(result[0] + ' (' + result[1] + ' years old)');
      console.log(result);
    }).catch(function (err) {
      console.error(err);
    });
  },

  /**更新按钮上绑定事件,调用合约进行更新 */
  bindEvents: function () {
    $("#button").click(function () {
      $("#loader").show();
      web3 = new Web3(App.web3Provider);

      web3.eth.defaultAccount = web3.eth.accounts[0];

      App.contracts.InfoContract.deployed().then(function (instance) {
        return instance.setInfo($("#name").val(), $("#age").val(), { gas: 500000 });
      }).then(function (result) {
        return App.getInfo();
      }).catch(function (err) {
        console.error(err);
      });
    });
  },

  /**监听合约内容发生改变,则页面显示更新 */
  watchChanged: function () {
    App.contracts.InfoContract.deployed().then(function (instance) {
      var infoEvent = instance.Instructor();
      return infoEvent.watch(function (err, result) {
        $("#loader").hide();
        $("#info").html(result.args.name + ' (' + result.args.age + ' years old)');
      });
    });
  }

}


$(function () {
  $(window).load(function () {
    App.init();
  });
});

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>First Truffle DApp Demo</title>
    <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>
    <div class="container">
        <h1> First Truffle DApp Demo</h1>

        <h2 id="info"></h2>
        <!-- <img id="loader" src=""> -->

        <label for="name" class="col-lg-2 control-label">姓名:</label>
        <input id="name" type="text">

        <label for="name" class="col-lg-2 control-label">年龄:</label>
        <input id="age" type="text">

        <button id="button">更新</button>

    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script src="js/truffle-contract.min.js"></script>
    <script src="js/app.js"></script>

</body>
</html>```



css样式

```css
body {
    background-color:#F0F0F0;
    padding: 2em;
    font-family: 'Raleway','Source Sans Pro', 'Arial';
}
.container {
    width: 50%;
    margin: 0 auto;
}
label {
    display:block;
    margin-bottom:10px;
}
input {
    padding:10px;
    width: 50%;
    margin-bottom: 1em;
}
button {
    margin: 2em 0;
    padding: 1em 4em;
    display:block;
}

#info {
    padding:1em;
    background-color:#fff;
    margin: 1em 0;
}

#loader {
    width: 100px;
    display:none;
}

此时可以执行npm run dev,但是显示文件找不到,那是因为启动的时候找index.html是从根目录开始找的,而index.html在src目录下,所以需要配置下,让从src下找index目录,所以在根目录下创建bs-config.json文件,设置
{
“server”:
{ “baseDir”: [“./src”, “./build/contracts”] }
}
执行npm run dev,出现页面【此刻会先与自己浏览器钱包metamask链接,选择上传过合约的那个账户;然后输入姓名和年龄点击更新】
【智能合约实战】——实现简易版dapp【对于用户年龄的获取和更新】
最终项目的目录结构为:
【智能合约实战】——实现简易版dapp【对于用户年龄的获取和更新】

总结

对于程序员来说,任何了解都不如上手运行一把,从实践中学习,切身体会,就像是以一个hello-world打开程序的世界,这是我学习智能合约的起点,却不是重点,感兴趣的小伙伴们也可以在评论区留言,互相交流学习经验文章来源地址https://www.toymoban.com/news/detail-404419.html

到了这里,关于【智能合约实战】——实现简易版dapp【对于用户年龄的获取和更新】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ganache私链部署智能合约+本地网络Dapp

    参考自(3条消息) 区块链投票应用:使用solidity+truffle+metamsk开发Dapp应用_一袋芋头的博客-CSDN博客下载了项目示例webpack之后   我们需要将里面的其他合约都删除,也可以直接删除这两个文件夹里的内容  然后就可以开始正片了(当然,你得先前就安装好环境) 开启ganache私链,

    2024年02月08日
    浏览(43)
  • 区块链DAPP开发 以太坊智能合约框架有哪些

    Truffle 是一个在以太坊进行 DApp 开发的世界级开发环境、测试框架。 使用 Truffle 开发有一以下优点: 内置智能合约编译,链接,部署和二进制(文件)管理。 可快速开发自动化智能合约测试框架。 可脚本化、可扩展的部署和迁移框架。 可管理多个不同的以太坊网络,可部署

    2024年02月02日
    浏览(49)
  • DAPP开发(一)——web3.0和智能合约

    web1.0~3.0,很多年前,互联网没有那么发达,刚出来的时候,仅仅只能在网上浏览观看信息,这就是1.0,后来出现了很多的软件,人们不仅可以浏览还可以发表自己的看法,手机app百花齐放,每个应用都有自己的数据库,存储数据,这就是2.0,现如今出现了3.0,去中心化的思想

    2024年02月05日
    浏览(46)
  • Web3 React项目Dapp获取智能合约对象

    上文Web3 整理React项目 导入Web3 并获取区块链信息中,我们在react搭建的dapp中简单拿到了我们区块链中的账号授权信息 那 我们继续 先终端运行 将ganache环境起起来 然后 我们运行 dapp 拿到授权列表 回到上文结束的一个状态 然后 我们发布一下自己的智能合约 在我们的项目终端

    2024年02月06日
    浏览(52)
  • 关于区块链、Web3.0、智能合约、DApp、DAO一文解释清楚

    区块链简单理解就是, 所有数据变成区块组成的链条,一个区块里保存着一条数据。 一笔支付、一个评论、一次查看、一条短信、一袋苹果都能保存为一个数据区块。 由于区块通过链条环环相扣,这确保了链上的数据是不可被篡改的。 链条复制了多条副本放置到多台互不相

    2024年02月02日
    浏览(69)
  • 以太坊Dapp通过web3js部署调用智能合约

    参考视频:https://www.bilibili.com/video/BV14z4y1Z7Jd?p=1 https://remix.ethereum.org/ 创建一个新的文件夹 mkdir MyDapp2 启动 ganache-cli 下载web3 npm install web3 ,注:ganache的启动和deploy.js要在同一个目录。 先进行测试 node deploy.js 部署合约 web3的版本:1.7.1 复制 WEB3DEPLOY 的内容到deploy.js == ganache需要

    2023年04月23日
    浏览(47)
  • 【区块链技术开发】OpenZeppelin智能合约库:提高智能合约的安全性和可靠性,加速去中心化应用DApp的开发与部署。

    专栏:【区块链技术开发】 前期文章: 【区块链技术开发】使用Infura连接以太坊节点和OpenZeppelin库来构建安全、可靠的智能合约 【区块链技术开发】 Solidity使用Truffle Box工具实现预构建模板、自动化部署、创建智能合约示例代码 【区块链技术开发】 Solidity使用truffle工具创建

    2023年04月24日
    浏览(63)
  • 区块链与智能合约的数据安全:如何保护用户信息

    区块链技术是一种分布式、去中心化的数据存储和交易方式,它的核心概念是将数据存储在一个由多个节点组成的链表中,每个节点称为区块,每个区块包含一定数量的交易数据。智能合约则是一种自动化的协议,它可以在区块链上自动执行一些预定的操作。这两种技术结合

    2024年04月09日
    浏览(45)
  • 为互连合约设计多链感知dApp

    大多数去中心化应用只部署在单条链上,且只熟悉所部署的生态系统。一些最大的dApp在不同链上部署相同的合约,但它们的智能合约没有链之间的互操作性:每一个智能合约仍局限于它们所处的网络。 智能合约互操作性的未来正通过Connected Contracts互连合约在Moonbeam的生态系

    2023年04月08日
    浏览(30)
  • 世界杯竞猜项目Dapp-第五章(合约升级)

    目前主流有三种合约升级方法 transparent 方式;(通用,业务逻辑和代理逻辑解耦合,比较贵) uups 方式;(代理逻辑集成到了业务逻辑,通过继承来实现,便宜) beacon 方式;(更加高级,一个信号,升级多个合约) 本次采用 transparent 方式,具体实现思路即,引入一个代理合

    2024年01月16日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包