开始目录
让我们建造一些酷的东西。
道是什么？
为DAO设置客户端应用程序
获取客户端代码获取设置。
将“连接到钱包”添加到您的DAO仪表板。
创建成员NFT
部署您的NFT包。
部署NFT元数据。
让用户投你的NFT。
创建令牌治理
部署ERC-20合同。
在DAO仪表板上显示令牌持有者。
数据库管理。
让用户对提案进行投票。
修整厂
删除您的管理员权限并处理基本错误。
完成并庆祝。
获取客户端代码获取设置。
我们要做什么？我们将为人们构建一个web应用程序：连接他们的钱包演职人员NFT 接收象征性空投并对提案进行实际投票。Web应用就是我所说的“DAO dashboard”。这是我们的新成员可以加入的地方，它允许现有成员看到DAO正在做什么。
Replit！我们将使用这个叫做Replit[1]的东西！它是一个基于浏览器的IDE，允许我们轻松地构建Web应用程序并从浏览器部署它们。这很合法。不需要设置完整的本地环境，也不需要编写部署命令，这些都交给我们了。
继续之前，请在Replit上注册一个帐户。
我已经创建了一个基本的反应项目，你可以在Replit上创建它。只要到这里[2]，在右边你会看到“分叉”按钮。确保您已登录，然后单击此按钮。
您将在浏览器中克隆我的repo和完整的IDE来使用代码。一旦它停止加载并显示一些代码。点击顶部的“运行”，一切顺利。
这是我在过去的项目中制作的一个关于Replit的视频：
想在本地工作？获取代码如果你不想使用Replit，你不必这样做。
先去这里[3]，在这里可以找到起始代码基础代码。在这里，您需要确保按下页面右上角的“叉”按钮：
非常好！当您派生这个repo时，您实际上是在创建它的一个完全相同的副本，它存在于您的Github归档文件中。所以现在你有了自己的代码版本，你可以随心所欲地编辑它。
这里的最后一步是在本地机器上获取新的分叉回购。点击“代码”按钮并复制链接！
转到您的终端，然后cd到您的项目所在的任何目录。例如，我喜欢将我的项目克隆到我的开发者文件夹中。看你喜欢什么了！找到位置后，只需运行它来克隆repo。
git clone your _ forked _ linkcd build space-Dao-starter就这样！从那里开始，继续跑：
NP安装，然后：
Npstart获取元掩码。接下来，我们需要一个以太坊钱包。它们有很多，但是，对于这个项目，我们将使用Metamask。在此下载浏览器扩展并设置您的钱包[4]。即使您已经有了另一个钱包提供商，现在只需使用元掩码。
但是我们为什么需要元掩模呢？
非常好。我们需要能够调用位于区块链的智能合约上的函数。而且，要做到这一点，我们需要有一个包含我们以太坊地址和私钥的钱包。
这几乎就像认证。我们需要一些东西来“登录”到区块链，然后使用这些登录凭证从我们的网站发出API请求。
因此，为了让我们的网站与区块链对话，我们需要以某种方式将我们的钱包与它连接起来。一旦我们将钱包连接到我们的网站，我们的网站将有权代表我们调用智能合同。记住，这就像认证一个网站。
所以，开始设置吧！他们的设置过程非常简单。
设置好钱包后，一定要把网络切换到“歌尔丽”，这是我们要用的测试网络。
弄点假的$那里有一些测试网络。我们将使用一个名为“Goerli”的测试网络，该网络由以太坊基金会运营。
为了部署到格利，我们需要假的ETH。为什么？因为如果要部署到实际的以太坊主网，就要用真金白银了！所以，测试网复制了主网的工作模式，唯一的区别就是不涉及真金白银。
为了得到假的ETH，我们不得不从网上找一些。这个假ETH只能在这个特定的测试网络上工作。你可以通过水龙头给格利弄点假的以太坊。你只需要找到一个有效的大声笑。
对于MyCrypto，您需要连接您的钱包，创建一个帐户，然后再次单击相同的链接来请求资金。对于歌尔丽官方水龙头，登录你的炼金账号，应该可以获得2倍的金额。
您有几种拍子可供选择：
名称数量时间mycryptohttps://app.mycrypto.com/faucets[5]0.01否goerli 3359 goerli faucet . com/[6]0.2524小时链节3359faucets.chain.link/Goerli[7]0.1否
你可以在这里找到你的公开地址。
一旦你的交易被挖掘，你的钱包里就会有一些假的ETH。
将“连接到钱包”添加到您的DAO仪表板。指定您的链和钱包类型因此，为了我们的网站与区块链互动，我们需要以某种方式连接我们的钱包。一旦我们将钱包连接到我们的网站，我们的网站将有权代表我们调用智能合同。记住，这就像认证一个网站。
您过去可能已经建立了一个“连接到钱包”按钮！这次我们就用thirdweb的前端SDK，这样就很简单了。
转到React应用程序的src/index.js并添加以下代码：
从“React”导入React；从“react-dom/client”导入{ create root }；“导入”。/index . CSS \’；从\’导入应用程序。/App \’；//从“@thirdweb-dev/react”导入thirdweb提供程序和Goerli chaini Import { third web provider }；从“@thirdweb-dev/sdk”导入{ ChainId }；//这是dApp将要处理的chainId，const activeChainId=ChainId。戈利；//用third web provider const container=document . getelementbyid(\’ root \’)包装您的应用程序；const root=createRoot(容器)；root.render( React。strict mode third web provider desired chainid={ activeChainId } App//third web provider/React。StrictMode，)；很简单。我们正在导入thirdweb，然后指定我们正在处理的链的chainId，也就是Goerli！
然后我们用ThirdwebProvider包装所有内容，third web provider保存用户的认证钱包数据(如果他们之前连接过我们的网站)并将其传递给App。
注意：如果你以前在dapps上工作过，或者你以前连接过，请确保你的钱包与Metamask上的https://localhost:3000[9]断开连接。
添加到钱包如果你进入你的网络应用程序，你会看到一个空白的紫色页面。让我们添加一些允许用户连接钱包的按钮的基本副本。
转到App.jsx添加以下代码。
从“@thirdweb-dev/react”导入{ useAddress，connect wallet }；const App=()={ //使用thirdweb给我们的钩子。常量地址=use address()；console.log(\’ Address:\’，Address)；//这是用户没有把钱包//连接到你的web app的情况。让他们给connectWallet打电话。如果(！address){ return(p class name=\’ landing \’ h1欢迎来到NarutoDAO/h1 p class name=\’ BTN-hero \’ connect wallet//p/p)；} //在这种情况下，我们有用户的地址//这意味着他们已经将他们的钱包连接到我们的网站！return(p class=\’ landing \’ h1钱包连接，现在怎么办！/h1/p)；}导出默认App相当简单！顺便说一下——如果您在本地运行，请确保您的Web应用程序正在使用npm start运行。
现在，当你进入你的网络应用程序，点击连接到钱包，你会看到它弹出元掩码！授权您的钱包后，您将看到以下屏幕：
很好。如果你去你的控制台，你会看到它打印出了你的公共地址。如果您在此处刷新页面，您会看到我们的钱包连接仍然还存在。
如果您过去已经建立了与钱包的连接，您会注意到使用thirdweb的客户端软件开发工具包(软件开发工具包)变得更加容易，因为它可以为您处理常见的边缘情况（例如，在变量中维护用户钱包的状态)。
顺便说一句-我在这里氕欢迎来到NarutoDAO/h1，请把它变成你自己的。不要模仿我！这是你自己的道！
注意：如果您想测试用户没有连接钱包的情况，也可以随时断开您的网站与元掩码的连接。[10]
开源代码库源码：https://github。com/构建空间/构建空间-projects/tree/main/JS _ DAO/
原文链接：https://构建空间。so/p/build-Dao-with-JavaScript
引用链接[1]回复：https://replit.com/~？UTM _源=建筑空间。soutm _ medium=build space _ project[2]这里：https://replit.com/@thirdweb/buildspace-dao-starter-v3？UTM _源=建筑空间。soutm _ medium=build space _ project[3]此处：https://github.com/buildspace/buildspace-dao-starter？UTM _源=建筑空间。soutm _ medium=build space _ project[4]下载浏览器扩展并在此处：https://metamask.io/download.html？https://app.mycrypto.com/faucet: https://app.mycrypto.com/faucet?https://goerlifaucet.com/: https://goerlifaucet.com/?https://faucets.chain.link/goerli: https://faucets.chain.link/goerli?UTM。soutm _ medium=构建空间_项目[8]您可以在此处：https://元掩码。zendesk。com/HC/en-us/articles/360015289512-如何复制您的元掩码-帐户-公共地址-？UTM _源=建筑空间。soutm _ medium=build space _ project[9]https://localhost:3000:https://localhost:3000/？UTM _源=建筑空间。soutm _ medium=构建空间_项目[10]断开您的网站与元掩码的连接https://元掩码。zendesk。com/HC/en-us/articles/360059535551-断开钱包与Dapp的连接？UTM _源=建筑空间。soutm _ medium=构建空间_项目
