11. 建立你的第一个Web3项目

11. 建立你的第一个Web3项目

在这一部分,我们将带你一步步地建立一个简单的Web3项目,从环境搭建到智能合约的创建与部署,再到开发一个去中心化应用(dApp)并与智能合约交互。这是你迈向Web3开发的第一步。

1. 环境搭建与工具准备

在开始Web3开发之前,需要搭建适合的开发环境,并安装一些常用的开发工具。

1.1 安装Node.js和npm

Node.js是一个基于JavaScript的运行时环境,npm是其默认的包管理器。在Web3开发中,Node.js和npm是必不可少的工具。

  • 安装Node.js
    • 访问Node.js官网并下载最新的LTS版本。
    • 安装后,通过命令行检查安装是否成功:
      node -v
      npm -v
      
1.2 安装Truffle和Ganache

Truffle是一个开发、测试和部署智能合约的框架,Ganache是一个本地的以太坊区块链模拟器,用于在本地测试智能合约。

  • 安装Truffle

    npm install -g truffle
    
  • 安装Ganache

    • 你可以通过Ganache官网下载桌面版,或通过命令行安装CLI版:
      npm install -g ganache-cli
      
1.3 安装MetaMask

MetaMask是一个以太坊钱包,允许你在浏览器中与dApp交互。它充当你的数字钱包,并能连接到本地或远程的以太坊网络。

  • 安装MetaMask
    • 访问MetaMask官网,下载并安装适用于你浏览器的扩展插件。
    • 安装后,创建一个新钱包并保存助记词。
2. 创建和部署一个简单的智能合约

接下来,我们将编写一个简单的智能合约,并将其部署到本地的以太坊区块链(Ganache)上。

2.1 初始化Truffle项目

首先,我们需要创建一个新的Truffle项目。

  1. 创建项目文件夹

    mkdir my-first-web3-project
    cd my-first-web3-project
    
  2. 初始化Truffle项目

    truffle init
    
2.2 编写智能合约

我们将编写一个简单的智能合约,用于存储和检索一条消息。

  1. 创建智能合约文件

    • contracts文件夹下创建一个名为SimpleStorage.sol的文件,内容如下:
      // SPDX-License-Identifier: MIT
      pragma solidity ^0.8.0;contract SimpleStorage {string private message;// 设置消息function setMessage(string memory newMessage) public {message = newMessage;}// 获取消息function getMessage() public view returns (string memory) {return message;}
      }
      
  2. 编译智能合约

    • 在项目根目录下运行以下命令来编译合约:
      truffle compile
      
2.3 部署智能合约

将智能合约部署到本地的以太坊区块链(Ganache)上。

  1. 配置网络

    • truffle-config.js文件中,配置本地的Ganache网络:
      module.exports = {networks: {development: {host: "127.0.0.1",     // 本地主机地址port: 7545,            // Ganache默认端口network_id: "*",       // 匹配任何网络ID},},// 其他配置...
      };
      
  2. 编写部署脚本

    • migrations文件夹中创建一个名为2_deploy_contracts.js的文件,内容如下:
      const SimpleStorage = artifacts.require("SimpleStorage");module.exports = function(deployer) {deployer.deploy(SimpleStorage);
      };
      
  3. 启动Ganache

    • 打开Ganache应用或通过命令行启动:
      ganache-cli
      
  4. 部署智能合约

    • 在项目根目录下运行以下命令,将合约部署到Ganache:

      truffle migrate
      
    • 成功部署后,Truffle会显示智能合约的部署地址。

3. 开发一个dApp并与智能合约交互

现在,我们将开发一个简单的dApp,用户可以通过该应用与部署的智能合约进行交互。

3.1 设置前端开发环境

在项目中创建一个client文件夹,用于存放前端代码。

  1. 初始化前端项目

    mkdir client
    cd client
    npm init -y
    
  2. 安装依赖

    • 安装Web3.js库和其他前端依赖:
      npm install web3
      npm install lite-server --save-dev
      
  3. 创建前端文件

    • client文件夹中创建一个index.html文件,内容如下:

      <!DOCTYPE html>
      <html lang="en">
      <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My First Web3 dApp</title>
      </head>
      <body><h1>Simple Storage dApp</h1><input type="text" id="messageInput" placeholder="Enter a message" /><button id="setMessageButton">Set Message</button><p>Stored Message: <span id="storedMessage"></span></p><script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script><script src="app.js"></script>
      </body>
      </html>
      
    • 创建app.js文件,用于与智能合约进行交互,内容如下:

      const web3 = new Web3(Web3.givenProvider || "http://localhost:7545");const contractAddress = "YOUR_CONTRACT_ADDRESS";  // 部署的合约地址
      const contractABI = [// ABI goes here...
      ];const contract = new web3.eth.Contract(contractABI, contractAddress);document.getElementById('setMessageButton').onclick = async () => {const message = document.getElementById('messageInput').value;const accounts = await web3.eth.getAccounts();await contract.methods.setMessage(message).send({ from: accounts[0] });alert('Message stored successfully');
      };const loadMessage = async () => {const message = await contract.methods.getMessage().call();document.getElementById('storedMessage').innerText = message;
      };loadMessage();
      
    • 将部署时生成的智能合约ABI复制到app.js中的contractABI变量中,并替换contractAddress为实际的合约地址。

3.2 运行dApp
  1. 启动开发服务器

    • client文件夹中,运行以下命令启动轻量级开发服务器:
      npx lite-server
      
  2. 在浏览器中访问dApp

    • 浏览器将自动打开并显示你的dApp。你可以在输入框中输入消息并点击“Set Message”按钮,将消息存储到智能合约中。
  3. 与智能合约交互

    • 输入消息并提交后,dApp会与智能合约进行交互,将消息存储到区块链中。页面将自动显示存储的消息。

总结

通过本章节的实践,你已经了解了如何搭建Web3开发环境,编写和部署智能合约,以及开发一个与智能合约交互的dApp。这是Web3开发的基础技能,未来你可以在此基础上开发更复杂的去中心化应用。

  • 环境搭建与工具准备:熟悉Truffle、Ganache、MetaMask等Web3开发工具,并搭建好开发环境。
  • 创建和部署智能合约:学习了如何编写简单的Solidity智能合约,并将其部署到本地以太坊区块链上。
  • 开发dApp并与智能合约交互:开发了一个简单的Web3应用,用户可以通过该应用与智能合约交互,实现数据的存储和读取。

随着对Web3技术的深入理解,你可以进一步探索更复杂的合约逻辑、前端框架的集成,以及与不同区块链平台的互操作性,从而开发出功能丰富的去中心化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/53841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1.简述语言建模LM、统计语言建模SLM、神经语言模型NLM、预训练语言模型PLM、大语言模型LLM

语言是人类表达和交流的突出能力&#xff0c;它在儿童早期发展并在一生中不断演变。然而&#xff0c;机器除非配备了强大的人工智能算法&#xff0c;否则不能自然地掌握以人类语言形式理解和交流的能力。实现让机器像人类一样阅读、写作和交流的目标&#xff0c;一直是一个长期…

改变事件

窗口的某些属性的状态发生改变时就会触发该事件 对应的事件类型包括 QEvent::ToolBarChange, QEvent::ActivationChange, QEvent::EnabledChange, QEvent::FontChange,QEvent::StyleChange, QEvent::PaletteChange, QEvent::WindowTitleChange, QEvent::IconTextChange, QEve…

GO Govaluate

govaluate 是一个用于在 Go 语言中动态求值表达式的库。它允许你解析和评估字符串形式的表达式&#xff0c;这些表达式可以包含变量、函数以及逻辑、算术和比较操作。它非常适合在运行时处理复杂的逻辑规则和条件表达式&#xff0c;而不需要重新编译代码。 安装 govaluate go…

SpringMVC中使用REST风格

了解REST REST&#xff1a;即 Representational State Transfer。&#xff08;资源&#xff09;表现层状态转化。是目前最流行的一种互联网软件架构。使用这种架构的应用即为RESTFUL。它结构清晰、符合标准、易于理解、扩展方便&#xff0c; 所以正得到越来越多网站的采用。 …

【练习9】大数加法

链接&#xff1a;大数加法__牛客网 (nowcoder.com) 分析&#xff1a; 当作竖式计算 import java.util.*;public class Solution {public String solve (String s, String t) {StringBuffer ret new StringBuffer();//i是字符串s的最后一个字符的索引int i s.length() - 1;//j…

新能源汽车安全问题如何解决?细看“保护罩”连接器的守护使命

「当前市场上绝大部分电池的安全系数远远不够」。 在一场世界动力电池大会上&#xff0c;宁德时代的董事长曾毓群这样犀利直言。 从汽车开始向电动化转型升级那天起&#xff0c;动力电池的安全隐患就一直是个老生常谈的话题了。曾毓群的这句话&#xff0c;直接点明了行业的发展…

参数传了报错没传参数识别不到参数传丢

【记一次参数传值了但报错未传值的问题解决历程】 问题描述&#xff1a;同一个接口&#xff0c;用测试类调可以成功&#xff0c;用postman调用一直报错少参数&#xff0c;后又尝试了用idea自带的http调用&#xff0c;同样报错参数未传值。 如图&#xff0c;传值了报错未传值。…

Java并发:互斥锁,读写锁,Condition,StampedLock

3&#xff0c;Lock与Condition 3.1&#xff0c;互斥锁 3.1.1&#xff0c;可重入锁 锁的可重入性&#xff08;Reentrant Locking&#xff09;是指在同一个线程中&#xff0c;已经获取锁的线程可以再次获取该锁而不会导致死锁。这种特性允许线程在持有锁的情况下&#xff0c;可…

AI网盘搜索 1.2.6 智能文件搜索助手,一键搜索所有资源

对于经常需要处理大量文件的人来说&#xff0c;AI网盘检索简直是救星。它提供了智能对话式搜索功能&#xff0c;只需用自然语言描述就能找到需要的文件。此外&#xff0c;它还广泛支持各种文件类型&#xff0c;从文档到图片&#xff0c;全面覆盖。精准定位功能让您能够快速找到…

DSC+主备+异步备库搭建

DSC主备异步备库搭建 本次在DSC的基础上进行主备集群异步备库的搭建&#xff0c;实现DSC主备异步备库的集合。 这里DMDSC集群是看做一个数据库服务&#xff08;即DSC集群内的都叫主库&#xff09;&#xff0c;备库是一个单机实例 环境配置 服务器配置 端口配置 实例名PORT…

C#获取计算机信息

目录 效果 项目 代码 下载 效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Management; n…

Vulnhub:bassamCTF

靶机下载地址 信息收集 主机发现 扫描攻击机同网段存活主机。 nmap 192.168.31.0/24 -Pn -T4 靶机ip&#xff1a;192.168.31.165 端口扫描 nmap 192.168.31.165 -A -p- -T4 开放端口22&#xff0c;80。 网站信息收集 访问80端口的http服务。首页是空白页面&#xff0c;…

关于打不开SOAMANAGER如何解决

参考文章&#xff1a;https://blog.csdn.net/yannickdann/article/details/115396035 打开SE93

15_分布式数据结构

菜鸟&#xff1a; 老鸟&#xff0c;我最近在处理大量数据的时候遇到了瓶颈&#xff0c;单台服务器的内存和计算能力都不够用了。你知道有什么方法可以解决这个问题吗&#xff1f; 老鸟&#xff1a; 嗯&#xff0c;这种情况很常见。你可以考虑使用分布式数据结构。听说过吗&a…

ARM base instruction -- blr

BLR Branch with Link to Register calls a subroutine at an address in a register, setting register X30 to PC4. 带寄存器链接的分支在寄存器中的某个地址调用一个子程序&#xff0c;将寄存器 X30 (lr) 设置为 PC4。 BLR <Xn> BLR 跳转到reg内容地址&#xff0c;…

Django创建模型

1、根据创建好应用模块 python manage.py startapp tests 2、在models文件里创建模型 from django.db import modelsfrom book.models import User# Create your models here. class Tests(models.Model):STATUS_CHOICES ((0, 启用),(1, 停用),# 更多状态...)add_time mode…

大模型训练数据库Common Crawl

Common Crawl介绍 ‌‌Common Crawl是一个非营利组织&#xff0c;致力于通过大规模分布式爬虫系统定期抓取整个Web并将其存储在一个可公开访问的数据库中。Common Crawl的数据收集和处理过程包括使用Python开源爬虫工具收集全球范围内的网站数据&#xff0c;并将其上传到‌Com…

人工智能(AI)领域各方向顶会和顶刊

在人工智能&#xff08;AI&#xff09;这个快速发展的领域&#xff0c;研究人员和从业者需要紧跟最新的研究动态和技术进展。顶级的会议和期刊是获取最新科研成果和交流思想的重要平台。以下是人工智能领域内不同方向的顶级会议和期刊概览。 顶级会议 人工智能基础与综合 A…

基于Python的自然语言处理系列(5):窗口分类器用于命名实体识别(NER)

在本系列的第五篇文章中&#xff0c;我们将探讨如何使用窗口分类器进行命名实体识别&#xff08;NER&#xff09;。NER是信息提取中的关键任务&#xff0c;旨在从文本中识别出特定类型的实体&#xff0c;如人名、地名、组织名等。我们将介绍窗口分类器的原理&#xff0c;并展示…

vm虚拟机中ubuntu连不上网络,网络图标消失解决办法

之前做实验调了下机子的网络配置&#xff0c;后面实验做完发现连不上网了&#xff0c;这个问题折磨了我一个多小时&#xff0c;最后终于解决了&#xff0c;记录下解决过程 1. 重启网络服务 有时候简单地重启网络服务就能解决问题&#xff08;我未能解决&#xff0c;可能和碰过…