# Web3学习笔记#00-Web3应用架构

By [0xBitFly](https://paragraph.com/@0xbitfly) · 2022-11-19

---

最近开始开始学习web3开发，看网上很多人建议从Solidity开始学起，我的思路是不要一头就扎进合约的学习中，只见树木不见森林，而是先从宏观整体上了解一下整体知识结构，在后面的学习中再去深入各个方面，也就是自顶向下的学习过。这里非常推荐这篇文章，本文也大部分基于此文，再加上自己的理解：[the architecture of a web3.0 application](https://www.preethikasireddy.com/post/the-architecture-of-a-web-3-0-application)，一边学习一边记录。

Web3现在一切的繁荣都起步自于中本聪2008年的一篇论文：\*\*[A Peer-to-Peer Electronic Cash System](https://bitcoin.org/bitcoin.pdf)。\*\*整片文章的核心是如何构建一套去中心化的点对点的电子现金交易系统，而Web3整个的概念体系都是构建在`区中心化` 这一前提下，也就是所有自己东西的主权都掌握自己手里，无须第三方平台或者媒介。

在这样一个前提下，先从用户的层面看看，相比web2有哪些改变：

*   **登录方式**：这是最直接的改变，用户不需要在各个应用之间去注册各种各样的账号，用户用一个账号就可以访问所有应用；
    
*   **资产权限**：用户的资产都存储在一个透明的链上，在未经用户授权的情况下，别人无权修改，这里的资产可以是金融货币、社交信息、头像等等；
    

从开发者的角度来看，Web2的应用与Web3应用的区别，通常一个Web系统主要由以下几个部分组成交互层、计算层和数据层，不同领域的系统在这三方面可能各有侧重，比如各大在线文档软件侧重在交互层和存储层，AI平台侧重在计算层。购物平台在交互层、计算层和数据层都重要。

![](https://storage.googleapis.com/papyrus_images/83530e7f3ffc060fb5aed5ad2ca38b8db991ce38d923d2cd08dcea18f5bfe4b7.png)

目前web3的应用主要以Web3 Hybrid+为主，一些逻辑不复杂的应用是纯去中心化的。

Web3开发架构
--------

![](https://storage.googleapis.com/papyrus_images/968074d3eda7e1c2d0a07422ac9d0b4ea839e2bb72cfde133fc56f62038a5062.png)

我们以在Uniswap上用USDT购买ETH为例，并结合上图说明整个web3应用程序的架构。

![](https://storage.googleapis.com/papyrus_images/3beccc28de50a41c3f9f391fd5e694698f1096e23fa071dd630be1e9cc7783f9.png)

1.  最上面的个人用户通过浏览器访问Uniswap.org的页面，并通过钱包链接到该网站，然后在swap界面里设置好要交互的Token，点击交换后，钱包会弹出让你签名授权。这里涉及到两个重要的模块：前端界面(Front-end)和钱包插件，当然我们也可以用代码直接通过私钥与合约进行交互，这里前端界面和本地代码库一般使用web3.js/ethers.js库，而钱包通常是metamask。对于开发人员来说这里最重要是可以与节点提供商通信的前端库
    
2.  用户签名成功后，就需要将该授权后的签名交易信息通过一个节点(Providor)将信息广播到全网，矿工拿到这些签名的信息后进行验证。对开发者而言，这个节点通常会使用infura/alchemy，这也需要在前端界面中提供相应的接入点，如果用程序也是一样。
    
3.  在验证成功后，区块链上的合约程序就会执行该token的交换服务。对开发者而言，不同的任务需要编写不同功能的合约程序，主流的Solidity。但在服务层/业务层上，简单的业务可以都用智能合约来写，并部署在区块链上，但对于一些复杂的程序，通常还需要web2的中心化服务来提供支撑。
    
4.  最后执行成功后，你的交易记录就会记录在链上，这就涉及到数据的存储，因为链上存储数据要花费更多的费用，简单的数据可以存储在链上，对复杂的数据，比如NFT的metadata和图片就需要通过IPFS这一类去中心化的存储链来存储。
    
5.  那么在我们swap过程中，如果将程序现在的数据状态展现给用户呢？比如交易池中还有多少余额，最近有哪些人交易过呢？ 这就可以通过The Graph/Dune这一类链上数据索引引擎获取这些数据。当然你也可以通过区块链的客户端/节点实时监听这些数据。
    

Web3细分领域
--------

在了解了web3整体的开发知识结构后，接下来要做的是深入了解各个细分领域的专业知识，同样也需要学习这个领域现有的整体知识结构，但在部分我们将与业务结合，学习技术如何服务具体的业务场景，各个领域的文章链接说明已经附在文后。

### NFT

![NFT Landscape](https://storage.googleapis.com/papyrus_images/3db149bb6e0376c9dd8ae69a6e9b878a38091f8a874a5da7334c40d2666cf656.png)

NFT Landscape

### DeFi

![DeFi Landscape](https://storage.googleapis.com/papyrus_images/5d18817a27b08cc8bdd1c8ffadbf5d0cbb6dbd85df79ea4207a414464ada11c7.jpg)

DeFi Landscape

### Social

Social Landscape

### Games

![Game Landscape](https://storage.googleapis.com/papyrus_images/e55f0831d667db8c683801d2dfee0c53f5cefe037ab1de5c603724aae2ddfa61.png)

Game Landscape

### 数据相关

![Data-Related Landscape](https://storage.googleapis.com/papyrus_images/dd7dbd3b74e2f92dde9cd7348bc71701f2deae70a4ce994595d148442a6030b3.jpg)

Data-Related Landscape

Web3开发常用工具
----------

![](https://storage.googleapis.com/papyrus_images/5f2871306447627829d31849240d6291f4d56f84394edb1e04d585cbe811de15.png)

实践
--

纸上得来终觉浅，接下来就是实践学习，巩固理解，这里主要跟随是alchemy的Road to Web3，一边学习一边做笔记，初步计划是以下几个部分：

*   Buy Me a Coffee：从0到1的链上转账应用
    
*   Create a PFP NFT Collection：NFT中的PFP类合集
    
*   Build a DEX Platform：DeFi中的区中心化交易所
    
*   Make a Social Platform：建一个去中心化化的Twitter
    
*   Launch a Play2Earn Game：GameFi中的Play2Earn小游戏
    
*   Build a CEX TVL Monitor Website ：链上数据中的中心化交易所地址监控
    

参考
--

**整体结构**

[https://www.preethikasireddy.com/post/the-architecture-of-a-web-3-0-application](https://www.preethikasireddy.com/post/the-architecture-of-a-web-3-0-application)

[https://etekisalp.com/part-3-how/](https://etekisalp.com/part-3-how/)

[https://itnext.io/top-3-web-3-0-architecture-layers-explained-frontend-backend-and-data-e10200f7fc76](https://itnext.io/top-3-web-3-0-architecture-layers-explained-frontend-backend-and-data-e10200f7fc76)

[https://zhuanlan.zhihu.com/p/523641946](https://zhuanlan.zhihu.com/p/523641946)

[https://github.com/ahmet/awesome-web3](https://github.com/ahmet/awesome-web3)

[https://julianivaldy.medium.com/100-tools-to-create-and-grow-your-web3-startup-nft-defi-dapp-dao-5dc466af375e](https://julianivaldy.medium.com/100-tools-to-create-and-grow-your-web3-startup-nft-defi-dapp-dao-5dc466af375e)

**实践教程**

[https://docs.alchemy.com/docs/welcome-to-the-road-to-web3](https://docs.alchemy.com/docs/welcome-to-the-road-to-web3)

[https://buildspace.so/](https://buildspace.so/)

[https://learnweb3.io/courses](https://learnweb3.io/courses)

**其它**

[https://multicoin.capital/2020/11/24/the-defi-stack/](https://multicoin.capital/2020/11/24/the-defi-stack/)

[https://messari.io/report/blockchains-changing-the-game](https://messari.io/report/blockchains-changing-the-game)

[https://messari.io/report/the-nft-stack-exploring-the-nft-ecosystem](https://messari.io/report/the-nft-stack-exploring-the-nft-ecosystem)

[https://twitter.com/zk7hao/status/1576492616715116547?s=20&t=RjcUaQfwXuAtXahn5QhgsA](https://twitter.com/zk7hao/status/1576492616715116547?s=20&t=RjcUaQfwXuAtXahn5QhgsA)

---

*Originally published on [0xBitFly](https://paragraph.com/@0xbitfly/web3-00-web3)*