Chapters (16)
Lecture 1

【从零到一】React + Web3 入门指南:快速创建区块链应用的第一步

本节作者:@愚指导、@小符这一讲,我们会引导你快速创建一个 React 项目,并在其中展示一个 NFT 的图片。该课程主要面向有一定前端开发基础的同学,帮助你从 Web2 迈向 Web3,获得 DApp(去中心化应用)的研发能力。课程会基于 Ant Design Web3 来进行讲解,让你可以...

Lecture 2

【DApp 必备技能】Web3 钱包连接完全教程:实现 MetaMask 无缝对接

本节作者:@愚指导、@小符、@simple连接钱包是 DApp 中最重要的交互,这一讲我们会引导你通过 wagmi 和 Ant Design Web3 来实现连接钱包的功能。DApp 如何连接钱包在 DApp 中,我们需要连接钱包来获取用户的钱包地址,以及进行一些需要用户签名的操作,比如发送交...

Lecture 3

【区块链开发基础】如何配置以太坊节点服务与测试网 ETH 获取指南

本节作者:@愚指导、@小符节点服务是 DApp 开发必不可少的服务。这一讲,我们介绍节点服务的概念,并引导你在项目中配置好节点服务,以及通过水龙头准备好一些 Sepolia 测试网的 ETH。什么是节点服务节点服务是 DApp 开发必不可少的服务。它是一个运行在区块链网络上的服务,它可以帮助你...

Lecture 4

【智能合约交互】掌握 DApp 与以太坊合约交互的完整流程与实战技巧

DApp 的前端网站部分区别于传统 App 的地方在于,它需要和区块链进行交互。而区块链的交互主要是通过调用智能合约来实现的。在这一讲中,我们将会学习如何调用智能合约。DApp 如何调用智能合约我们以 Ethereum 举例,当智能合约被部署到区块链上后,我们可以通过...

Lecture 5

【区块链实时更新】智能合约事件监听与前端实时响应的实现方案

这一讲将会介绍如何在 DApp 中监听合约事件,实时更新 DApp 界面。简介区块链智能合约的事件和我们传统的应用开发理解的事件概念是有些不同的,区块链本身并没有一个消息机制来向应用发送事件。它本质上是 EVM 上日志的抽象。这一类日志相比智能合约的状态变化,更加便宜,是一种...

Lecture 6

【Web3 项目部署】Next.js 区块链应用的线上部署与域名配置教程

这一讲将会介绍如何把我们的应用部署到服务器上,完成前端部分功能从开发到最终上线。简介这里会简单介绍一下 Next.js 以及前端部署的一些基本概念。如果你对前端已经很熟悉,可以跳过这部分。Next.js 是一个前端框架,它可以帮助我们快速搭建 React 应用。我们基于 Re...

Lecture 7

【智能合约开发】使用 Remix 开发和测试 ERC721 NFT 合约的全流程指南

这一讲会简单介绍如何开发和测试一个智能合约。本教程中,我们将使用 Remix 运行 Solidity 合约。Remix 是以太坊官方推荐的智能合约集成开发环境(IDE),适合新手,提供了一个易于使用的界面,可以在浏览器中快速编写、编译和部署智能合约,无需在本地安装任何程...

Lecture 8

【合约部署与集成】从 Solidity 到 DApp:智能合约部署与前端集成实战

这一讲会引导你部署开发完成的智能合约,并将 DApp 中的合约替换为新部署的合约。编译点击图标面板中的 Solidity Compiler 图标即可进入编译器界面。界面中默认展示编译器的基础配置项。点击 Advanced Configurations 按钮即可打开高级配...

Lecture 9

【EIP1193 与 EIP6963】深入理解区块链钱包连接协议标准及实现原理

我们在第三讲连接钱包中介绍了如何连接钱包,但是没有深入讲解连接钱包的原理。EIP1193 和 EIP6963 是两个重要的协议,它们定义了 DApp 连接钱包的标准。EIP1193 是最早期的标准,但是有一些缺陷,EIP6963 则是对 EIP1193 的改进,解决了那些缺陷...

Lecture 10

【移动端钱包对接】WalletConnect 实现教程:连接移动端钱包与 DApp

这一讲将会介绍如何使用 WalletConnect 来连接移动端 APP 钱包,这对提升 DApp 的用户体验至关重要。什么是 WalletConnect我们在之前的课程中实现了在 DApp 连接浏览器插件形式的钱包,但是很多时候用户希望使用手机上的钱包应用来连接电脑上打开的...

Lecture 11

【多链 DApp 开发】跨链应用开发指南:支持以太坊、Polygon 等多条区块链

以太坊除了有主网和测试网以外还有丰富的 L2 生态,对于有的 DApp 来说可能需要连接不同的链。这一讲将会指引开发者如何在 DApp 中连接多条链。多链DApp 支持多链是指能够在多个区块链平台上运行或与之交互。这意味着 DApp 不仅限于单一的区块链生态系统,而是可...

Lecture 12

【Web3 身份验证】区块链签名验证完全指南:前端签名与后端验证实现

签名和验签是重要的功能,这一讲会介绍如何在客户端实现签名,并在服务端验证它。签名是用来干什么的?在 DApp 中,通常是基于区块链地址来构建用户体系的,一个区块链地址代表一个用户。传统的应用我们通常用密码、手机验证码等方式来验证用户。那么在 DApp 中,我们如何来验证...

Lecture 13

【区块链支付系统】DApp 中实现 ETH 转账与收款功能的完整解决方案

这一讲将会介绍如何实现通过区块链转账和收款。转账在区块链环境中,转账是指在参与者之间转移资产的行为,这些资产可以是加密货币(如比特币、以太坊等)或者其他基于区块链的数字资产(如代币、NFTs 等)。这些转账活动被记录在区块链上,并受到网络共识机制的安全保护。转账是最基础...

Lecture 14

【本地合约开发】使用 Hardhat 搭建智能合约本地开发与测试环境

在前面的课程中,我们基于 Remix 尝试了通过 CloudIDE 进行合约开发。在本地开发环境中,我们可以使用更多的工具来提高开发效率,比如使用 Git 来进行版本管理。这一讲将会引导大家在本地开发和调试合约,以及编写单元测试来验证智能合约的逻辑。初始化项目以太坊的生态有着...

Lecture 15

【Wagmi 开发工具】使用 Wagmi CLI 自动生成合约交互代码提升开发效率

在上一讲我们基于 Hardhat 在本地创建了一个合约项目,在未来的 DEX 实战课程中我们会继续基于该项目创建更复杂的合约。伴随着合约越来越复杂,ABI 也会越来越庞大,这时候我们就需要一个工具来帮助我们更好的调试合约。在这一讲中我们将会引导大家给予 Wagmi CLI 自...

Lecture 16

LICENSE

MIT LicenseCopyright (c) 2024 WTF AcademyCopyright (c) 2025 ZAN (Modified Portions)Permission is hereby granted, free of charge, to any person obta...