ChatGPT 无法自行构建 dapp，但它可以帮助您构建您的 dapp！了解如何使用 Infura、MetaMask 和 Truffle。
在 Infura-ChatGPT 系列的第一部分和第二部分中，您了解了 ChatGPT 如何帮助进行一般智能合约开发，以及如何使用这个有用的 AI 工具来铸造 NFT。
在本系列的第三部分也是最后一部分中，我将向您展示如何使用 ChatGPT、MetaMask、Infura 和 Truffle 在以太坊上创建和启动 dapp。我们将使用 ChatGPT 来生成我们的 dapp的想法，然后执行一些即时工程，让 ChatGPT 协助开发的各个方面。
使用人工智能进行 dapp 开发是 ChatGPT 带来的一个令人兴奋的新机会，但它确实需要一些预防措施。查看第二部分中的免责声明。
第1步：创建OpenAI账户
让我们首先创建 ChatGPT 帐户。ChatGPT 是 OpenAI 提供的免费工具。创建帐户后，您可以在此处访问 UI 。
它应该看起来像这样：
使用 ChatGPT 很简单。您可以用它发送消息，就像与真人交谈一样。
尝试问它一些问题，例如：世界上最大的国家是哪个？伦敦最好的酒店有哪些？您能推荐一些关于心理学的非小说类书籍吗？
假设您是 web3 开发领域的新手，并且想要在以太坊上构建和部署您的第一个 dapp。ChatGPT 非常擅长集思广益。
尝试以下提示：
|
我是一名 web3 开发新手。我想在以太坊上创建并部署一个 dapp。我更喜欢将 dapp 作为单个智能合约来实现。你能给我一些想法吗？ |
ChatGPT 将为您提供如下所示的响应：
|
当然！以下是一些可以在以太坊上作为单个智能合约实现的 DApp 的想法： 1. 去中心化代币交易：构建一个允许用户直接相互交易 ERC-20 代币的 DApp。智能合约充当去中心化交易所，促进买家和卖家之间的代币交换。 2. 去中心化彩票：创建一个彩票 DApp，用户可以通过向智能合约发送以太币来购买彩票。该合约可以处理门票购买、随机获奖者选择和奖品分配。 3. 去中心化投注：开发一个 DApp，允许用户对特定事件或结果进行投注。智能合约处理投注金额、管理投注并根据结果自动分配奖金。 4. NFT 市场：构建一个 DApp，作为不可替代代币 (NFT) 的市场。用户可以列出自己的 NFT 进行出售，买家可以直接从智能合约中购买。 5. 去中心化众筹：创建一个可以为项目或计划进行众筹的 DApp。用户可以向智能合约贡献以太币，如果在指定时间范围内达到预定的融资目标，资金将释放给项目所有者。 6. 去中心化投票：实现一个投票 DApp，用户可以对特定提案或决定进行投票。智能合约安全地记录和统计选票，确保透明度和不变性。 7. 去中心化订阅服务：构建一个提供基于订阅的服务的 DApp，用户可以订阅以访问优质内容或功能。智能合约管理订阅详细信息并处理订阅付款。 请记住在将智能合约部署到以太坊网络之前彻底测试您的智能合约并检查代码是否存在潜在的安全漏洞。寻求开发者社区的反馈并进行审核以确保合同的完整性也是一个很好的做法。快乐建设！ |
请注意，即使出现相同的提示，ChatGPT 也不会给出相同的响应，因此您得到的结果不会与上面的完全相同。
它产生的想法列表非常令人印象深刻！在本教程中，我们将采用去中心化彩票的想法。请随意选择其他想法之一作为替代方案。我们创建智能合约和启动 dapp 所遵循的步骤基本上是相同的。
第 2 步：创建 MetaMask 钱包并获取测试 ETH
为了在以太坊上创建、部署智能合约并与之交互，我们需要一个加密钱包和天然气代币。
对于钱包，我们使用MetaMask。MetaMask 是一款去中心化、自我托管的钱包，安全、可靠且易于使用。下载并安装 MetaMask作为浏览器扩展。安装后，MetaMask 将提示您按照一系列步骤创建您的第一个钱包。在此过程中，您将获得一个秘密短语。请特别小心安全地存储您的助记词。 如果您丢失了它，您将无法访问您的钱包。
设置好钱包后，单击扩展程序右上角的“网络”选项卡，然后单击“显示测试网络”。
启用测试网络后，从网络下拉列表中选择Sepolia 。我们将使用这个测试网络来部署我们的 dapp。部署智能合约（并与之交互）需要天然气——这在主网上可能很昂贵。然而，在像Sepolia这样的测试网络上，我们可以使用SepoliaETH，它可以从Sepolia水龙头免费获得。使用水龙头后，您应该会在钱包中看到一些测试 ETH：
第 3 步：创建 Infura 帐户
最后一个准备步骤是注册 Infura 帐户。Infura 是一个免费、快速且可靠的 RPC 端点，允许我们连接到以太坊（和 Sepolia）。通过这些 RPC 端点，我们可以与 Sepolia（最终是主网）区块链进行交互。
创建您的免费 Infura 帐户，然后导航到您的仪表板并创建一个新的 API 密钥。
使用默认的Web3 API网络。您可以随意命名该密钥。
此密钥使您可以访问许多主要区块链的端点，包括以太坊、Polygon、Optimism、Starknet、Near 等。对于我们的项目，我们对 Sepolia 测试网络感兴趣。我们稍后将在代码中使用的 RPC 端点将采用https://sepolia.infura.io/v3/<your API key>的形式。
第四步：创建Truffle项目
现在我们准备开始编码了。让我们建立我们的Truffle项目。
Truffle 是一个用于创建、测试和部署以太坊和基于 EVM 的智能合约的开发环境。我们将使用它来完成在这个项目中编写、测试和部署代码所需的几乎所有事情。
在安装 Truffle 之前，请确保您的本地计算机上安装了 Node 和 npm。请仔细检查，确保在运行以下命令时可以看到版本号。
$ node -v
$ npm -v
安装节点后，设置我们的开发环境只需要几个命令。
$ mkdir lottery && cd lottery
$ npm init -y
$ npm install –save truffle
$ npx truffle init && npx truffle test
$ npm install @openzeppelin/contracts @truffle/hdwallet-provider dotenv
这就是我们在上面所做的事情：
- 创建一个空存储库并设置一个节点项目
- 安装松露
- 创建一个准系统 Truffle 项目
- 安装有用的软件包，如 OpenZeppelin（用于 ERC 实现）、HD Wallet Provider（用于钱包管理）和 Dotenv（用于秘密管理）。
第 5 步：使用 ChatGPT 创建彩票合约
现在有趣的部分是——我们准备好要求 ChatGPT 编写我们的智能合约。
请记住，ChatGPT 并不总是为您提供 100% 正确的解决方案。因此，我们仍要勤奋地处理生成的代码。获得最佳代码的最简单方法是尽可能详细地满足我们的要求。
让我们编写一个后续提示来创建彩票合约。
|
编写一个实现去中心化彩票的智能合约。 智能合约应该有一个功能，公众可以发送一定数量的钱来考虑参加彩票。 完成此操作后，合约所有者可以调用一个函数，随机选择获胜者并将合约中的所有资金发送给获胜者。 |
ChatGPT 将生成如下所示的响应：
|
当然！以下是以太坊上去中心化彩票智能合约的示例实现： “坚固性 // SPDX 许可证标识符：MIT 杂注可靠性^0.8.0； 合约去中心化彩票 { 向公共所有者致辞； uint256公共ticketPrice； 映射（uint256 => 地址）公共参与者； uint256 公共参与者计数； bool 公共彩票已关闭； uint256 私有 randomSeed； event LotteryClosed(获奖者地址, uint256 amount); 活动门票已购买（地址参与者）； 构造函数（uint256 _ticketPrice）{ 所有者 = msg.sender; 门票价格 = _ticketPrice; 参与者计数=0； 彩票已关闭=假； 随机种子 = 0; } 函数purchaseTicket()公共应付{ require(!lotteryClosed, “抽奖已结束”); require(msg.value == TicketPrice, “门票价格不正确”); 参与者[participantCount] = msg.sender; 参与者计数++； 发出 TicketPurchased(msg.sender); } 函数 closeLottery() 公共 { require(msg.sender == Owner, “只有所有者才能关闭抽奖”); require(!lotteryClosed, “抽奖已经结束”); 彩票已关闭=真； uint256 WinnerIndex = _generateRandomNumber() %参与者计数； 地址应付获胜者 = payable(participants[winnerIndex]); uint256 ContractBalance = 地址(this).balance; 发出 LotteryClosed(winner,contractBalance); 获胜者.transfer(contractBalance); } 函数 _generateRandomNumber() 私有返回 (uint256) { randomSeed = uint256(keccak256(abi.encodePacked(randomSeed, block.timestamp, block.difficulty))); 返回随机种子； } } ““ 在此智能合约中，“DecentralizedLottery”合约使用“ticketPrice”进行初始化，这是参与者购买彩票所需发送的金额。合约所有者可以调用“closeLottery”函数随机选择一位获胜者，并将合约中的所有资金转移到获胜者的地址。 参与者可以通过调用“purchaseTicket”函数并发送“ticketPrice”数量的以太币来购买门票。合约跟踪参与者和总数。closeLottery 函数只能由合约所有者调用，确保只有所有者才能启动彩票关闭过程。 随机数生成是通过“_generateRandomNumber”函数完成的，该函数结合当前时间戳和块难度等各种参数来生成伪随机数。 请注意，这是一个简化的示例，未经适当的安全审核和测试，不应在生产环境中使用。此外，在实施现实世界的去中心化彩票时，考虑天然气成本、边缘情况和潜在的安全漏洞至关重要。 |
ChatGPT 创建的合约基本上是正确的。正如 ChatGPT 本身正确指出的那样，在生产环境中部署它可能不合适。但对于这个例子来说，它的效果很好。
您还可以提示 GPT 改进合约（例如，使用 OpenZeppelin 提供的 Ownable 功能，而不是我们自己实现）。
因此，让我们在合约文件夹中创建一个名为DecentralizedLottery.sol的合约，并添加以下稍作修改的代码。
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract DecentralizedLottery {
address public owner;
uint256 public ticketPrice;
mapping(uint256 => address) public participants;
uint256 public participantCount;
bool public lotteryClosed;
uint256 private randomSeed;
event LotteryClosed(address winner, uint256 amount);
event TicketPurchased(address participant);
constructor(uint256 _ticketPrice) {
owner = msg.sender;
ticketPrice = _ticketPrice;
participantCount = 0;
lotteryClosed = false;
randomSeed = 0;
}
function purchaseTicket() public payable {
require(!lotteryClosed, "Lottery is closed");
require(msg.value == ticketPrice, "Incorrect ticket price");
participants[participantCount] = msg.sender;
participantCount++;
emit TicketPurchased(msg.sender);
}
function closeLottery() public {
require(msg.sender == owner, "Only the owner can close the lottery");
require(!lotteryClosed, "Lottery is already closed");
lotteryClosed = true;
uint256 winnerIndex = _generateRandomNumber() % participantCount;
address payable winner = payable(participants[winnerIndex]);
uint256 contractBalance = address(this).balance;
emit LotteryClosed(winner, contractBalance);
winner.transfer(contractBalance);
}
function _generateRandomNumber() private returns (uint256) {
randomSeed = uint256(keccak256(abi.encodePacked(randomSeed, block.timestamp, block.prevrandao)));
return randomSeed;
}
}
第6步：配置Dotenv和Truffle
接下来让我们配置我们的项目以使用我们的钱包和 RPC 端点。
在我们项目的根目录中，创建一个名为.env的文件并添加以下信息：
INFURA_API_KEY = "https://sepolia.infura.io/v3/<Your-API-Key>"
MNEMONIC = "<Your-MetaMask-Secret-Recovery-Phrase>"
该文件可确保我们的敏感信息不会上传到 GitHub 等公共场所。
接下来，替换truffle.config.js的内容以与 MetaMask 钱包和 Infura RPC 端点配合使用：
require('dotenv').config();
const HDWalletProvider = require('@truffle/hdwallet-provider');
const { INFURA_API_KEY, MNEMONIC } = process.env;
module.exports = {
networks: {
development: {
host: "127.0.0.1",
port: 8545,
network_id: "*"
},
sepolia: {
provider: () => new HDWalletProvider(MNEMONIC, INFURA_API_KEY),
network_id: '11155111',
},
},
compilers: {
solc: {
version: "0.8.19",
}
}
};
通过运行以下命令来编译合约：
$ npx truffle compile
第 7 步：将 dapp 部署到 Sepolia 测试网
让我们再次回到 ChatGPT，这次请它帮助我们将合约部署到以太坊测试网。
使用以下提示：
|
我正在 Truffle 上创建这份合约。您能给我一个将其启动到以太坊测试网的脚本吗？ |
ChatGPT 给出的响应如下所示：
|
当然！这是一个示例脚本，您可以使用该脚本使用 Truffle 将去中心化彩票智能合约部署到以太坊测试网。此示例假设您正在使用 Truffle 框架，并已为您的 Truffle 项目配置了适合所需测试网的网络配置。 在 Truffle 项目中创建一个新的 JavaScript 文件（例如“deploy.js”）并粘贴以下脚本： “`javascript const DecentralizedLottery = artifacts.require(“DecentralizedLottery”); module.exports = 异步函数（部署程序）{ 尝试 { // 部署 DecentralizedLottery 合约 等待部署者.deploy(DecentralizedLottery, /* TicketPrice */ 0.1); // 在这里设置门票价格 // 获取部署的实例 const lotteryInstance =等待 DecentralizedLottery.deployed(); console.log(“DecentralizedLottery 合约部署于：”,lotteryInstance.address); } 捕获（错误）{ console.error(“部署合约时出错：”, error); } }; ““ 确保将 `/* TicketPrice */ 0.1` 替换为参与者购买门票时应发送的所需以太币价格。 要部署合约，请在终端中运行以下命令： ““ truffle migrate –network <网络名称> ““ 将 `<network_name>` 替换为您要部署到的网络的名称（例如，`ropsten`、`rinkeby` 等）。确保您在“truffle-config.js”文件中正确配置了网络。 Truffle 将编译您的合约并将“DecentralizedLottery”合约部署到指定的测试网。部署成功后，合约地址将显示在控制台中。 请记住将您的钱包连接到测试网，并有足够的以太币用于部署和交易费用。 请注意，这是一个简化的示例，您可能需要根据您的特定项目设置和网络配置修改脚本。 |
与典型情况一样，ChatGPT 给出的响应几乎是正确的。唯一明显缺失的部分是正确设置票价以及 Truffle 采用的命名约定。
创建一个名为1_deploy_contract.js 的文件并添加由 ChatGPT 创建的代码。
const DecentralizedLottery = artifacts.require("DecentralizedLottery");
module.exports = async function (deployer) {
try {
// Deploy the DecentralizedLottery contract
const ticketPrice = web3.utils.toWei('0.001', 'ether');
await deployer.deploy(DecentralizedLottery, ticketPrice); // Set the ticketPrice here
// Get the deployed instance
const lotteryInstance = await DecentralizedLottery.deployed();
console.log("DecentralizedLottery contract deployed at:", lotteryInstance.address);
} catch (error) {
console.error("Error deploying the contract:", error);
}
};
按照 ChatGPT 的建议，使用以下命令部署合约：
$ npx truffle migrate –network sepolia
如果一切顺利，您应该看到如下所示的输出：
Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.
Migrations dry-run (simulation)
===============================
> Network name: 'sepolia-fork'
> Network id: 11155111
> Block gas limit: 30000000 (0x1c9c380)
1_deploy_contract.js
====================
Deploying 'DecentralizedLottery'
--------------------------------
> block number: 3498893
> block timestamp: 1684259757
> account: 0xc361Fc33b99F88612257ac8cC2d852A5CEe0E217
> balance: 0.498960474971217066
> gas used: 672264 (0xa4208)
> gas price: 2.500000008 gwei
> value sent: 0 ETH
> total cost: 0.001680660005378112 ETH
DecentralizedLottery contract deployed at: 0xA4766Ceb9E84a71D282A4CED9fB8Fe93C49b2Ff7
-------------------------------------
> Total cost: 0.001680660005378112 ETH
Summary
=======
> Total deployments: 1
> Final cost: 0.001680660005378112 ETH
Starting migrations...
======================
> Network name: 'sepolia'
> Network id: 11155111
> Block gas limit: 30000000 (0x1c9c380)
1_deploy_contract.js
====================
Deploying 'DecentralizedLottery'
--------------------------------
> transaction hash: 0x2a4b6eeaa354d2a4d156f0d562ca6ac7212b22a2131a54426178ec5a82a660d0
> Blocks: 2 Seconds: 22
> contract address: 0xA4766Ceb9E84a71D282A4CED9fB8Fe93C49b2Ff7
> block number: 3498900
> block timestamp: 1684259784
> account: 0xc361Fc33b99F88612257ac8cC2d852A5CEe0E217
> balance: 0.498960474970544802
> gas used: 672264 (0xa4208)
> gas price: 2.500000009 gwei
> value sent: 0 ETH
> total cost: 0.001680660006050376 ETH
DecentralizedLottery contract deployed at: 0xA4766Ceb9E84a71D282A4CED9fB8Fe93C49b2Ff7
> Saving artifacts
-------------------------------------
> Total cost: 0.001680660006050376 ETH
Summary
=======
> Total deployments: 1
> Final cost: 0.001680660006050376 ETH
恭喜！您的合同现已生效。您可以在 Sepolia Etherscan 上搜索它。
第 8 步：创建 React 前端
现在我们的合约已经部署完毕，让我们在 React 中创建一个 web3 前端，它将允许世界上的任何人购买我们的彩票。
使用以下命令为此创建一个新的项目存储库：
$ npx create-react-app lottery-frontend
$ npm install ethers@5.0.13
$ cd lottery-frontend
为了让我们的前端与合约交互，我们需要合约的 ABI。幸运的是，当我们编译合约时，Truffle 已经为我们生成了这个。
您可以在Truffle 项目的构建文件夹中找到 ABI JSON 文件。在React 项目的src文件夹中创建一个新的contracts文件夹，并将ABI文件粘贴到其中。
接下来，在React项目的src文件夹中创建一个data文件夹，并添加以下代码：
const contractAddress = "<- YOUR CONTRACT ADDRESS ->";
const walletAddress = "<- YOUR WALLET ADDRESS ->";
export { contractAddress, walletAddress }
第9步：编写主应用程序代码
现在我们来编写 dapp 的主要逻辑。我们的 dapp 将执行以下操作：
- 允许用户将他们的 MetaMask 钱包连接到我们的网站。
- 允许连接的用户购买门票。
尽管这是一个非常简单的应用程序，但它比我们之前生成的智能合约更复杂（无论是在逻辑还是代码行数方面）。
尽管如此，ChatGPT 仍然是一个用于获取代码“初稿”的优秀工具。请记住，如果您的说明更加精确和详细，那么产生的结果会更好 – 所以这正是我们要做的。
我们不会要求它提供一些模糊的东西，比如创建一个与我们的合约交互的 React 应用程序。相反，让我们使用以下提示：
|
我想创建一个与彩票智能合约交互的 React 应用程序。 该智能合约有一个公开的“purchaseTicket”函数，任何向其发送一定金额（ticketPrice）的人都可以调用该函数。 我希望您为 App.js 文件编写代码。代码应使用以太坊和 MetaMask API 用 JavaScript 编写。 在 App.js 文件中，应实现以下内容： 1.连接钱包功能。 2. 允许用户通过合约购买门票的功能。 |
ChatGPT 生成的响应如下所示：
|
当然！以下示例展示了如何实现“App.js”文件来创建一个使用 ethers.js 和 MetaMask API 与彩票智能合约交互的 React 应用程序： “`javascript 从“react”导入 React, { useState, useEffect }; 从“以太”导入{以太}； // 导入合约地址和ABI 从“./contractConfig”导入{contractAddress}； 从“./contractABI”导入{contractABI}； 函数应用程序（）{ const [provider, setProvider] = useState(null); const [签名者，setSigner] = useState(null); const [合约，setContract] = useState(null); const [帐户，setAccount] = useState(null); const [ticketPrice, setTicketPrice] = useState(null); 使用效果（（）=> { const 初始化 = async () => { 尝试 { // 检查MetaMask是否安装 if (window.ethereum) { 等待 window.ethereum.request({ 方法: “eth_requestAccounts” }); const ethereumProvider = new ethers.providers.Web3Provider(window.ethereum); const selectedAccount = ethereumProvider.getSigner(); setProvider(ethereumProvider); setSigner(选定的帐户); setAccount(等待 selectedAccount.getAddress()); setContract(new ethers.Contract(contractAddress,contractABI,selectedAccount)); const 价格 = 等待合约.ticketPrice(); setTicketPrice(ethers.utils.formatEther(价格)); } 别的 { console.log(“MetaMask 未安装”); } } 捕获（错误）{ 控制台.错误（错误）； } }; 初始化（）; }, []); const connectWallet = async () => { 尝试 { 等待 window.ethereum.request({ 方法: “eth_requestAccounts” }); const ethereumProvider = new ethers.providers.Web3Provider(window.ethereum); const selectedAccount = ethereumProvider.getSigner(); setProvider(ethereumProvider); setSigner(选定的帐户); setAccount(等待 selectedAccount.getAddress()); setContract(new ethers.Contract(contractAddress,contractABI,selectedAccount)); } 捕获（错误）{ 控制台.错误（错误）； } }; const buyTicket = async () => { 尝试 { const transaction =等待contract.purchaseTicket({ value: ethers.utils.parseEther(ticketPrice) }); 等待事务.wait(); alert(“购票成功！”); } 捕获（错误）{ 控制台.错误（错误）； Alert(“购票失败”); } }; 返回 （ <div className=”应用”> <h1>去中心化彩票</h1> {提供商&&( <> <p>关联帐户：{account}</p> <p>票价：{ticketPrice} ETH</p> <button onClick={purchaseTicket}>购买门票</button> </> )} {!provider && <button onClick={connectWallet}>连接钱包</button>} </div> ）； } 导出默认应用程序； ““ 在这个例子中： – 合约地址和 ABI 是从单独的文件（“contractConfig.js”和“contractABI.js”）导入的，这些文件应该由您创建。相应地调整导入路径和文件名。 – `provider`、`signer`、`contract`、`account` 和 `ticketPrice` 状态是使用 `useState` 钩子设置的。 – 在组件安装时调用“initialize”函数，该函数检查是否安装了 MetaMask 并相应地设置提供者、签名者、合约、帐户和门票价格值。 – 单击“连接钱包”按钮时将调用“connectWallet”函数。它提示用户连接他们的 MetaMask 钱包并设置提供商、签名者、合同和帐户值。 – 当“PurchaseTicket”时调用“purchaseTicket”函数 |
它提供的代码虽然并不完美，但却是一个很好的起点。
从 ChatGPT 提供的代码开始，我们将进行一些更改，以便您的App.js文件如下所示：
import React, { useState, useEffect } from "react";
import { ethers } from "ethers";
// Import the contract address and ABI
import { contractAddress } from "./data/constants";
import contract from "./contracts/DecentralizedLottery.json";
const contractABI = contract.abi;
const ticketPrice = "0.001";
function App() {
const [provider, setProvider] = useState(null);
const [contract, setContract] = useState(null);
const [account, setAccount] = useState(null);
useEffect(() => {
const initialize = async () => {
try {
// Check if MetaMask is installed
if (window.ethereum) {
await window.ethereum.request({ method: "eth_requestAccounts" });
const ethereumProvider = new ethers.providers.Web3Provider(window.ethereum);
const selectedAccount = ethereumProvider.getSigner();
setProvider(ethereumProvider);
setAccount(await selectedAccount.getAddress());
setContract(new ethers.Contract(contractAddress, contractABI, selectedAccount));
} else {
console.log("MetaMask is not installed");
}
} catch (error) {
console.error(error);
}
};
initialize();
}, []);
const connectWallet = async () => {
try {
await window.ethereum.request({ method: "eth_requestAccounts" });
const ethereumProvider = new ethers.providers.Web3Provider(window.ethereum);
const selectedAccount = ethereumProvider.getSigner();
setProvider(ethereumProvider);
setAccount(await selectedAccount.getAddress());
setContract(new ethers.Contract(contractAddress, contractABI, selectedAccount));
} catch (error) {
console.error(error);
}
};
const purchaseTicket = async () => {
try {
const transaction = await contract.purchaseTicket({ value: ethers.utils.parseEther(ticketPrice) });
await transaction.wait();
alert("Ticket purchased successfully!");
} catch (error) {
console.error(error);
alert("Failed to purchase ticket");
}
};
return (
<div className="App">
<h1>Decentralized Lottery</h1>
{provider && (
<>
<p>Connected Account: {account}</p>
<p>Ticket Price: {ticketPrice} ETH</p>
<button onClick={purchaseTicket}>Purchase Ticket</button>
</>
)}
{!provider && <button onClick={connectWallet}>Connect Wallet</button>}
</div>
);
}
export default App;
只需更改不到 10 行代码，我们现在就拥有了一个成熟的 dapp。我们不得不：
- 修复合约地址和合约 ABI 导入。
- 删除未使用的变量（签名者）。
- 将某些变量转换为常量（ticketPrice）。
让我们通过运行以下命令来看看它的实际效果：
$ npm start
这应该打开一个指向https://localhost:3000 的浏览器窗口。如果您看到“连接钱包”按钮，请单击它并连接您的 MetaMask。（或者，页面加载后系统可能会提示您连接 MetaMask。）
连接钱包后，您应该会看到如下所示的页面：
单击“购买门票”按钮将提示另一笔 MetaMask 交易，系统会要求您支付门票价格 + Gas。
完成此操作后，您应该能够在 MetaMask 上检查交易的状态。
交易完成后，会弹出一个窗口通知您。
现在你就拥有了！您已成功根据合同购买了机票。您可以通过访问合约的 Etherscan 页面来验证交易是否确实发生。
通过 ChatGPT 为您生成核心应用程序逻辑，您现在可以继续执行一些操作，例如向页面添加 CSS 样式并使其更加用户友好（例如，通过在页面本身上提供交易的实时状态）。
尝试让 ChatGPT 为您执行此操作，而不是从头开始创建 dapp。你会更快地得到结果，而且你的产出很可能会比你自己做的更好。
使用 ChatGPT、MetaMask 和 Infura 继续构建
恭喜！您已成功构建彩票 dapp 并将其部署到 Sepolia 测试网。我们希望本教程有用，并且您了解 ChatGPT 如何成为您未来智能合约开发的有用助手。要了解有关面向开发人员的 MetaMask 工具的更多信息，请访问https://metamask.io/news/developers/。