# Alchemy的the Road to Web3第九周文本教程- 使用 0x API 构建代币交换 Dapp

By [Coinman.eth](https://paragraph.com/@coinman-eth) · 2022-08-17

---

大家好，我是帝哥（推特：@CoinmanLabs），今天帝哥带大家一起来看看第九周的任务。看到这里可能很多人就在问，帝哥为啥不讲第八周啊？同学们，不是帝哥不想讲啊，主要是官方自己第八周都没有出来。

是否曾经使用你最喜欢的代币交易 dapp 将 ETH 换成 DAI，并想知道它是如何为您找到最优惠的价格的？

它很可能使用[流动性聚合器](https://docs.0x.org/introduction/introduction-to-0x#makers-and-takers)**它从链下**（例如做市商、订单簿）和**链上**（例如 DEX、AMM）获取所有可能的价格，并为用户提供最优惠的价格。

在本教程中，我们将学习如何使用\*\*[0x API 交换端点](https://docs.0x.org/0x-api-swap/introduction)**它允许用户在流动性供应和使用中**获取可用报价\*\*[智能订单路由](https://blog.0xproject.com/0x-apis-smart-order-routing-7af0195515e5)在分散的交易网络中拆分交易，以尽可能降低**滑点**，同时最大限度地降低交易成本。请注意，我们不需要编写任何智能合约来查找和结算交易！相反，0x API 允许 web3 开发人员轻松利用 0x 协议智能合约，该合约负责处理用于结算交易的所有逻辑，让 web 开发人员专注于构建最佳交易体验。

在本教程结束时，将学习如何执行以下操作：

*   了解为什么**流动性聚合**很重要
    
*   查询并显示**ERC20 代币列表**
    
*   使用**0x API /swap 端点**
    
*   设置**代币限额**
    
*   构建一个使用web3.js连接到**MetaMask的简单代币交换DApp**
    

结果展示
----

其实帝哥把第九周的课程看了好久，一直在研究给自己找bug，修复bug，因为有的东西是无法使用的，帝哥经历九九八十一难，终于将代码调试可以了切通过运行了。我们先看成果吧，第九周帝哥会以最简单的方式带大家实现。

![](https://storage.googleapis.com/papyrus_images/4028b9c3713b034f9b3a0bff7e2c4175f72c9308bfe74383365e284cdf25c3b6.png)

![](https://storage.googleapis.com/papyrus_images/819e61b756df78d3e60356e4ce58a1729c0746bf2c11014fdb8efb556e11c2f7.png)

正课开始
----

### 1.clone 代码

帝哥已经将修复的代码上传到帝哥的Github仓库了，首先我们去clone到本地,下面是帝哥的Github的仓库地址。

[https://github.com/CoinmanLabs/ROAD3\_WEEK09](https://github.com/CoinmanLabs/ROAD3_WEEK09)

首先你需要将帝哥的代码clone到本地：

     git clone https://github.com/CoinmanLabs/ROAD3_WEEK09
    

因为我们需要在浏览器中使用节点模块，所以需要安装下面的依赖

    # 可能权限不足 则使用sudo
    npm install -g browserify
    npm i qs
    # 每一步修改了代码为了最新的代码都必须执行下面的
    browserify index.js --standalone bundle -o bundle.js
    npm install bignumber.js
    

2.使用vscode打开我们的代码
-----------------

我们将clone的代码使用VScode打开后，为了方便使用则需要安装一些扩展工具，按照下面安装即可：

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

![](https://storage.googleapis.com/papyrus_images/29e45cd6c5fe43f2c0d03bb557b8413b4a7edb2e158642081b2038435654683b.png)

当上面都安装好后，我们使用安装的工具运行代码，会出现下面的页面，系统会自动去加载token信息。

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

因为本地课程我们需要做swap，帝哥刚好自己的钱包里面还有个DAI，就使用DAI和WETH来进行SWAP.首先我们在上面选中DAI,下面选中WETH，如下面所示：

![](https://storage.googleapis.com/papyrus_images/819e61b756df78d3e60356e4ce58a1729c0746bf2c11014fdb8efb556e11c2f7.png)

系统会自动给我们计算Gas，我们连接上钱包，点击Swap，小狐狸钱包会提示我们授权

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

当我们批准授权后，小狐狸钱包会再次提醒我们去和合约交互做Swap，我们再次同意后就可以等待事物的完成。

![](https://storage.googleapis.com/papyrus_images/8bf2a49a6ac0002659f637bb7d5848982e0ffdd1c1744c0092bc60b1842c373a.png)

当你完成后，可以多种方式查询结构，如去区块浏览器查询，或者在自己钱包查看，下面是帝哥的查询结果：

![](https://storage.googleapis.com/papyrus_images/4028b9c3713b034f9b3a0bff7e2c4175f72c9308bfe74383365e284cdf25c3b6.png)

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

**注意事项：因为合理0x是使用主网的哦，切记。**

最后我们别忘了去填写表格哦。

[https://alchemyapi.typeform.com/roadtoweek9](https://alchemyapi.typeform.com/roadtoweek9)

我是懂币帝，用技术带你领略区块链魅力，第一时间获取行业最新资讯：

推特：@CoinmanLabs

微信：CoinmanLabs（社群客服微信进群）

---

*Originally published on [Coinman.eth](https://paragraph.com/@coinman-eth/alchemy-the-road-to-web3-0x-api-dapp)*