在目录中创建第一个合同，使您的本地以太网运行。用Solidity写下你的第一份智能合约。在本地编译合同并运行它。将数据存储在我们的智能合同中并在本地部署，这样我们就可以开始构建网站、连接到钱包并设置一个基本的React应用程序。设置Metamask以将智能合约部署到真实的测试网络，将我们的钱包连接到我们的web应用程序，从我们的web应用程序调用部署的智能合约，与合约进行交互，存储来自区块链上的用户的消息，为合约提供资金，设置奖品，向用户发送以太坊以优化UI，部署随机选择的获胜者，并防止垃圾邮件发送者完成和庆祝！连接到wallet以设置一个基本的React应用程序，设置Metamask并设置客户端。是时候开始我们的网站工作了！我们的契约很简单，但是让我们尽快了解我们的前端是如何与我们的契约交互的！
因此，有大约100种不同的方法来设置和部署基本的React项目。我将在10分钟内向您展示如何做到这一点，最后，您将实际拥有一个React应用程序，拥有自己的域，并且一切都已完全部署。
复制注意：您不必使用replit来构建和部署您的网站。如果你想用create-react-app vercel/heroku/AWS ——，那太好了。这是一个基本存储库的链接，您可以在本地克隆和处理它[1]。
我们将使用Replit[2]！它是一个基于浏览器的集成开发环境，允许我们轻松地构建web应用程序并在浏览器中部署它们。超级合法。我们不需要搭建一个完整的本地环境，也不需要编写部署的命令，而是直接提供给我们。
继续之前，请在Replit上注册一个帐户。
我已经创建了一个基本的React项目，您可以在Replit上派生它。只要点击这里[3]，你会看到右边的“叉”按钮。确保您已登录，然后单击此按钮。您将在浏览器中神奇地克隆我的存储库和完整的IDE来使用代码。一旦它停止加载并显示一些代码，点击顶部的“运行”按钮。第一次可能需要2-3分钟。一般来说，Replit启动您的项目并将其部署到实际的域中。
请注意：当您完成这个项目时，您可能会注意到我们引用了。js文件。在Replit中，如果您想要创建任何新的JavaScript文件，您需要使用。改为jsx扩展名！Replit有一些特殊的性能，需要您使用。jsx文件扩展名：)。
我做了一个快速视频，教你如何在Replit，deployment和进入黑暗模式时编辑代码。检查以下内容：
Metamask很棒，我们有一个部署的React项目，我们可以轻松地工作。很简单：)。
接下来，我们需要一个以太坊钱包。有一堆这样的钱包，但是，对于这个项目，我们将使用Metamask。在此下载浏览器扩展并设置您的钱包[4]。即使你已经有了其他的钱包提供商，现在就用Metamask吧。
为什么我们需要元掩码？非常好。我们需要能够调用位于区块链的智能合约的功能。而且，要做到这一点，我们需要有一个钱包，里面有我们的以太坊地址和私钥。
但是，我们需要一些东西来连接我们的网站和我们的钱包，这样我们就可以安全地将我们的钱包凭据传递给我们的网站，这样我们的网站就可以使用这些凭据来调用我们的智能合约。您需要有效的凭据来访问智能合约上的功能。
这几乎就像认证。我们需要一些东西来“登录”到区块链，然后使用这些登录凭证从我们的网站发出API请求。
所以，开始设置吧！他们的设置过程是不言自明的：)。
将智能合约部署到真实的测试网络设置，将其部署到区块链，并关闭运行本地区块链网络的终端，这是您运行npx hardhat node的位置。我们将不再需要它；)。我只想向您展示如何在本地部署。
我们现在要做的是真正的交易，并将其部署到实际的区块链。
然后在这里用QuickNode创建一个帐户[5]。
很抱歉让您创建了这么多帐户，但这个生态系统很复杂，我们希望利用那里的优秀工具。QuickNode所做的是，它为我们提供了一个简单的方法来部署到一个真正的以太坊区块链。
所以，当我们想在以太坊区块链上执行一个动作时，我们称之为事务。例如，向某人发送ETH是一个事务。在我们的契约中做一些更新变量的事情也被认为是一个事务。
所以，当我们调用wave，它调用totalWaves=1，就成交了！部署智能合约也是一个事务。
记住，区块链没有主人。它只是世界各地的一堆电脑，由矿工用区块链的拷贝运行。
当我们部署我们的合同时，我们需要告诉所有这些矿工，“嘿，这是一个新的智能合同，请将我的智能合同添加到区块链，然后也告诉其他人”。
这就是QuickNode[6]的用武之地。
QuickNode本质上帮助我们广播我们的合同创建事务，以便矿工可以尽快得到它。一旦交易被发现，它将作为合法交易向区块链广播。从那里，每个人都更新他们的区块链副本。
这很复杂。并且，如果你没有完全理解，请不要担心。当你写更多的代码，实际构建这个应用的时候，自然会更有意义。
因此，请在此注册一个QuickNode帐户[7]。
查看下面的视频，了解如何获取测试网络的API密钥！
我们直到最后才计划将网络部署到“以太坊主网”。为什么？因为花的是真金白银，不能乱来！我们将从“测试网”开始，它是“主网”的克隆，但它使用的是fake $，因此我们可以测试尽可能多的东西。但是，要知道测试网络是由真正的矿工运行的，是模仿真实世界的场景。
这很好，因为我们可以在实际场景中测试我们的应用程序，我们将实际：
1.广播我们的交易。2.等着被真正的矿工发现吧。3.等待它被开采。4.等待它被广播回区块链，并告诉所有其他矿工更新他们的副本。因此，您将在接下来的几节课中完成所有这些任务：)。
弄点假的$外面有一些测试网，我们要用的那个叫“Goerli”，是以太坊基金会办的。
为了部署到格利，我们需要假以太坊。为什么？因为如果要部署到实际的以太坊主网，就要用真金白银了！所以，测试网复制了主网的工作模式，唯一的区别就是不涉及真金白银。
为了得到假的ETH，我们不得不向网络要一些。这个假ETH只能在这个特定的测试网络上工作。你可以通过水龙头给格利弄些假的ETH。在使用水龙头之前，请确保您的MetaMask钱包设置为“Goerli测试网络”。
对于MyCrypto，您需要连接您的钱包，创建一个帐户，然后再次单击相同的链接来请求资金。对于官方的歌尔利水龙头，你应该登录你的炼金术帐户获得2倍的金额。
名称数量时间链链接https://faucets.chain.link/goerli[8]0.1无任何官方goerli 3359 goerlifaucet.com[9]0.2524小时my crypto 3359 app.mycrypto.com/faucets[10]0.01无任何
为了部署到Goerli测试网络，我们需要更改我们的hardhat.config.js文件。您可以在智能合约项目的根目录中找到它。
require(\’ @ nomic foundation/hard hat-toolbox \’)；//这是一个示例安全帽任务。若要了解如何创建自己的帐户，请转到//https://hard hat . org/guides/create-task . html task(\’ accounts \’，\’ Prints the list of accounts \’，async (taskArgs，hre)={ const accounts=await hre . ethers . get signers()；for(帐户的const account){ console . log(account . address)；}});//您需要导出一个对象来设置您的配置//转到https://hardhat.org/config/了解更多信息/* * * * @键入import(\’hardhat/config \’)。HardhatUserConfig */module . exports={ solidity:\’ 0 . 8 . 17 \’，网络：{ GOERLI:{ URL:\’ YOUR _ QUICKNODE _ API _ URL \’，帐户：[\’ YOUR _ PRIVATE _ GOERLI _ ACCOUNT _ KEY \’]}，}，}；注意：不要把这个文件提交给GITHUB。它有你的私人钥匙。你会被黑客攻击和抢劫。该私钥与您的主网络私钥相同。
如果你上传到github或者平时使用Git版本控制，最好保护好自己，不要把密钥上传到你不想要的地方。首先，最好的方法不是上传你的hardhat配置文件，而是添加到。gitignore。
另一种保护自己和保证hardhat.config.js安全的方法是使用dotenv。安装它：
现在我们可以更新hardhat.config.js来使用dotenv:
require(\’ @ nomic foundation/hard hat-toolbox \’)；//导入并配置dotenvrequire(\’dotenv \’)。config()；module . exports={ solidity:\’ 0 . 8 . 17 \’，networks: { goerli: { //此值将在运行时url上被替换：process . env . staging _ quick node _ KEY，accounts:[process . env . private _ KEY]，}，mainnet:{ URL:process . env . prod _ quick node _ KEY，accounts:[process . env . private _ KEY]，}，}；在根项目文件夹中，创建一个。env文件并添加您的密钥。它应该是这样的：
staging _ quicknode _ key=replace _ with _ actual _ quicknode _ URL//goerliquicknodepro _ quicknode _ key=blah blah//mainnet quicknode benefit _ key=blah blah最后补充一下。env到你的。Gitignore文件，这样git就会忽略它，这样如果你对此感到困惑，只需观看关于它的YouTube视频。很简单！
接下来，从QuickNode dashboard获取API URL并粘贴它。然后，您将需要您的私人Goerli密钥(而不是您的公共地址！)，您可以从metamask获取它并将其粘贴到那里。
注意：打开MetaMask，将网络更改为“Goerli测试网络”,然后点击三个点，选择“帐户详情”和“导出私钥”,即可访问您的私钥
为什么需要使用私钥？因为为了执行部署合同之类的事务，您需要“登录”到区块链。此外，您的用户名是您的公共地址，您的密码是您的私钥。这有点像登录AWS或GCP进行部署。
一旦您完成了配置设置，我们就可以使用我们之前编写的部署脚本来进行部署。
从my-wave-portal的根目录运行此命令。请注意，我们所做的只是将它从localhost改为goerli。
xhard hat run scripts/deploy . js-network goerli部署完成！这是我的输出：
使用帐户部署合同：0 xf 79 a 3 bb 8d 5b 93686 c 4068 e 2 a 97 ea EC 5 Fe 4843 e 7 DAC count balance:3198297774605223721 wave portal地址：0 xd 5 f 08 a 0 AE 1974 82fa 808 ce 84 e 00 e 97d 940 DBD 26 e复制最后一行已部署合同的地址并保存到某个地方。别弄丢了！以后会需要它做前端：)。你的会和我的不一样。
你刚签了合同。
实际上，您可以在这里获取地址并将其粘贴到Etherscan中[11]。以太扫描是一个向我们展示区块链的状态并帮助我们检查交易头寸的地方。您应该在这里看到您的交易：)。可能需要一分钟才能出现！
比如这是[12]我的！
待续.原地址：https://buildspace.so/p/build-solidity-web3-app
引用链接[1] 这是一个指向您可以在本地克隆和处理的基本存储库的链接：https://github.com/buildspace/waveportal-starter-project？UTM _源=建筑空间。soutm _ medium=build space _ project[2]Replit:https://Replit . com/~？UTM _源=建筑空间。soutm _ medium=build space _ project[3]此处：https://replit.com/@adilanchian/waveportal-starter-project？v=1utm _ source=构建空间。soutm _ medium=build space _ project[4]下载浏览器扩展程序并在此处：https://metamask.io/download.html？UTM _源=建筑空间。soutm _ medium=build space _ project[5]此处：https://www.quicknode.com/？UTM _ source=buildspaceutm _ campaign=generic UTM _ content=sign-upu TM _ medium=build space[6]QuickNode:https://www . QuickNode . com/？UTM _ source=build space UTM _ campaign=generic UTM _ content=sign-upu TM _ medium=build space[7]因此，请在此处注册一个快速节点帐户：https://www.quicknode.com/？https://faucets.chain.link/goerli?UTM _ source=build space UTM _ campaign=generic UTM _ content=sign-upu TM _ medium=build space[8]https://faucets . chain . link/goer Li:build space。soutm _ medium=build space _ project[9]https://goerlifaucet。com:https://goerlifaucet.com/？https://app.mycrypto.com/faucet: https://app.mycrypto.com/faucet?UTM来源=建筑空间。soutm _ medium=构建空间_项目[11]在此处：https://goerli.etherscan.io/？UTM _源=建筑空间。soutm _ medium=构建空间_项目[12]这是：https://歌尔李。醚类可以。io/address/0x 957 Fe 7381 be 45 a 31967 f1 ecfac 6 ff 001d 8 af 8d 6 c？UTM _源=建筑空间。soutm _ medium=构建空间_项目
