目录
1、区块链技术回顾
1.1、以太坊结点结构
1.2、多种应用场景
2.1、传统的Web2 应用程序架构
web3.js%20ether.js-toc" style="margin-left:80px;">2.3、Web3 应用程序架构——前端web3.js ether.js
2.4、Web3 应用程序架构——去中心化的链下存储
2.5、Web3 应用程序架构——加速获取链上数据
2.6、Web3 应用程序架构——L2 scaling 解决方案
3、Scaffold-ETH2 Dapp应用框架演示
3.1、Scaffold-ETH2介绍
3.2、Scaffold-ETH2使用及安装
1、使用Scaffold-ETH2必须预先安装的开发工具
2、克隆源码，安装依赖，修改hardhat配置
3、在第一个终端中运行本地网络
4、运行本地网络结果
5、在第二个终端上，部署测试合约
6、部署测试合约运行结果
7、在第三个终端上，启动 NextJS 应用
8、启动 NextJS 应用运行结果
9、浏览器页面访问测试页
10、浏览器页面访问测试页面结果
区块链应用架构概览：
1.区块链网络：由多个节点组成的去中心化网络，每个节点都保存着完整的区块链数据副本，并通过共识算法来保持网络的一致性和安全性。
2.智能合约：在区块链上执行的自动化合约，通常使用智能合约平台（如以太坊）来编写和部署。智能合约可以定义和执行一系列预定的规则和操作，从而实现各种功能，如数字资产交易、去中心化金融服务等。
3.用户界面：提供给用户与区块链应用交互的界面，可以是网页、移动应用程序或其他形式的用户界面。用户界面通常与区块链网络和智能合约进行交互，允许用户查看信息、发起交易、管理资产等。
4.身份验证和访问控制：用于验证用户身份并管理其在区块链应用中的访问权限的机制。这可以包括基于密码学的身份验证、多重签名等技术，以确保只有授权用户可以执行特定操作。
5.数据存储：用于存储与区块链应用相关的数据的机制。这些数据可以包括用户资产信息、交易记录、智能合约状态等。在一些情况下，数据可能会存储在区块链上，而在其他情况下，可能会使用传统的数据库或分布式存储系统。
6.安全性和隐私保护：包括各种技术和机制，用于确保区块链应用的安全性和用户数据的隐私保护。这可能包括加密技术、权限控制、安全审计等。
这些组件通常相互交互，共同构成一个完整的区块链应用架构，用于实现各种去中心化应用的功能和特性。
1、区块链技术回顾
1.1、以太坊结点结构
逻辑可分为6层 1.数据层 2.网络层 3.共识层 4.激励层 5.合约层 6.应用层
1.2、多种应用场景
如图所示：
举例说明：
区块链票据：区块链票据是指利用区块链技术来管理和传输票据信息的一种方式。举例来说，假设有一家公司需要向另一家公司支付货款，它可以创建一个电子票据，并将其存储在区块链上。这个电子票据包含了支付的金额、双方的身份信息以及支付的时间等信息。当支付完成时，这个交易将被记录在区块链上，双方都可以查看并验证交易的合法性，从而增加了交易的透明度和可信度。
供应链金融：供应链金融是利用金融工具来支持供应链中的各个环节，以促进供应链的流畅运作和资金的有效利用。通过区块链技术，供应链金融可以实现更高效的资金流动和信息共享。举例来说，一家供应商可以将其应收账款转化为数字资产，并将其存储在区块链上。金融机构可以基于这些数字资产为供应商提供资金支持，从而缩短资金周转周期，降低融资成本，并提高供应链的稳定性。
最高法司法链：最高法司法链是指利用区块链技术来改善司法系统的运作和透明度。通过将法律文书、裁决结果和司法记录等信息存储在区块链上，可以确保这些信息的不可篡改性和可追溯性，从而提高司法系统的公正性和可信度。举例来说，法院可以将裁决结果记录在区块链上，当事人和相关利益方都可以通过区块链查看和验证这些信息，从而减少争议和纠纷的发生，提高司法效率。
2、区块链应用架构概览
2.1、传统的Web2 应用程序架构
图示是对大多数 Web 2.0 （B/S)应用程序如何工作的一个很好的抽象总结。 首先，必须有一个地方来存储基本数据，也就是数据库； 其次，要有后端代码（用 Node.js、Java 或 Python 等语言编写），用于定义业务逻辑； 第三，还要有前端代码（通常用 JavaScript、HTML 和 CSS 编写），用于实现 UI 和交互； 这些代码都托管在集中式服务器（中心化服务器）上。
2.2、Web3 应用程序架构——最简架构
视角来到 Web3.0 ，消除了中心化，没有集中式的数据库，没有存放后端代码的集中式 Web 服务器。采用了区块链技术，在互联网上的区块链节点维护的分布式 状态机 上构建应用程序。 “状态机”维护一些给定的程序状态，它具有非常严格的智能合约语言和共识机制来控制状态如何转换。
web3.js%20ether.js">2.3、Web3 应用程序架构——前端web3.js ether.js
Web3 App与区块链上的数据和代码进行交互时，任何节点都可以广播在 EVM 上执行交易的请求，然后结点执行交易并将结果状态更改传播到网络的其余部分。 广播新交易有两种方式： 1.自己运行以太坊区块链软件的节点并直接连接； 2.使用Infura、 Alchemy、moralis和Quicknode 等第三方服务提供的节点，设置提供者url； Web3身份验证 1.通过钱包连接来验证身份和鉴权,例如 Metamask、Wagmi 等
2.4、Web3 应用程序架构——去中心化的链下存储
IPFS、Swarm、filecoin以及NFT.storage等是用于存储和访问数据的分布式文件系统，任何人都可以轻松去访问和检验。 ipfs的基础是p2p网络
2.5、Web3 应用程序架构——加速获取链上数据
如何加速获取链上数据？ The Graph是用于整理、归纳区块链数据的去中心化索引协议 (Decentralized Indexing Protocol) 。使用GraphQL来查询开放式API的应用被称作子图 (Subgraph) ，其用来检索网络上已经被索引的数据。 借助 The Graph，可以更轻松地查询以太坊区块链上的数据，这比传统的 REST API 更具性能优势。https://thegraph.com/
2.6、Web3 应用程序架构——L2 scaling 解决方案
Web3 应用程序架构指的是构建在区块链技术之上的下一代互联网应用程序架构，其核心特点包括去中心化、安全性、透明度和用户控制权。L2 scaling 解决方案则是针对区块链网络的可扩展性问题提出的一种解决方案，旨在通过将部分交易或数据处理放到链下进行，以减轻链上压力，提高整体吞吐量和性能。
举例来说，以以太坊为例，它是一个智能合约平台，但由于其链上交易处理速度较慢，处理费用较高，导致了交易拥堵和高昂的 Gas 费用。为了解决这些问题，许多 L2 scaling 解决方案被提出，其中包括：
-
侧链（Sidechains）：侧链是与主区块链相连接的并行区块链，可以处理主链上的一部分交易。通过将部分交易移至侧链上进行处理，可以减轻主链的压力，提高整体的交易吞吐量。Plasma 和 OmiseGO 就是基于侧链的 L2 解决方案。
-
状态通道（State Channels）：状态通道是在参与者之间直接开启的加密通道，可以在通道内进行快速和廉价的交易。只有在需要时才将最终状态提交到区块链上，从而减少了链上的交易数量和成本。闪电网络是基于状态通道的 L2 解决方案的一个例子。
-
侧向扩展（Layer-2 Rollups）：侧向扩展是一种将大量交易汇总并批量提交到主链的方法，以减少链上交易的数量和成本。Rollup 解决方案通过在主链上提交一个包含所有交易数据的 Merkle 树根哈希来证明侧链的状态，从而实现了链上验证和安全性。Optimistic Rollup 和 ZK-Rollup 是两种常见的 Rollup 解决方案。
1.二层网络是一条独立的区块链，它扩展了以太坊并继承了以太坊的安全保证。通过桥连接到L1网络 2.交易在L2链操作，然后把多个交易一起打包提交到主链。 3.L2网络：Arbitrum、Optimism、Starknet、Polygon
3、Scaffold-ETH2 Dapp应用框架演示
3.1、Scaffold-ETH2介绍
一个开源的用于在以太坊区块链上构建去中心化应用程序的工具包。 可以使开发人员更容易创建和部署智能合约，并构建与这些合约交互的用户界面。 遵循我们上述的通用Dapp应用架构 工具： NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.
3.2、Scaffold-ETH2使用及安装
1、使用Scaffold-ETH2必须预先安装的开发工具
Node (>= v18.17)
Yarn (v1 or v2+)
Git
2、克隆源码，安装依赖，修改hardhat配置
git clone https://github.com/scaffold-eth/scaffold-eth-2.git
cd scaffold-eth-2
yarn install
hardhat.config.ts文件
defaultNetwork: "localhost"
3、在第一个终端中运行本地网络
yarn chain
(1) 该命令使用 Hardhat 启动本地以太坊网络，自动生成20个钱包账号，可用于测试和开发。
(2) 可以在 中 hardhat.config.ts 自定义网络配置。
4、运行本地网络结果
5、在第二个终端上，部署测试合约
yarn deploy
(1) yarn deploy 命令使用位于 packages/hardhat/deploy 中的部署脚本将合约部署到网络。
(2) 可以自定义部署脚本。
(3) 合约位于 packages/hardhat/contracts 中，可以根据需要进行修改。
6、部署测试合约运行结果
7、在第三个终端上，启动 NextJS 应用
yarn start
8、启动 NextJS 应用运行结果
9、浏览器页面访问测试页
在以下位置访问您的应用程序： http://localhost:3000 。
可以使用该 Debug Contracts 页面与您的智能合约进行交互。
可以在 中 packages/nextjs/scaffold.config.ts 调整应用程序配置。
10、浏览器页面访问测试页面结果
结语：本篇全文搬运老师PPT
