区块链开发入门 创建一个简单的Dapp
创建一个简单的 Dapp
小费
我们将构建这个应用程序（打开新窗口）#项目设置
在设置之前，请确保您已访问并阅读了我们的入门指南
确保你有：
MetaMask扩展 （打开新窗口）下载。下载并安装Node.js（打开新窗口）克隆/下载项目文件 （打开新窗口）来自 GitHub。您最喜欢的文本编辑器或 IDE 已安装。我个人喜欢Visual Studio Code（打开新窗口）#打开项目文件夹
打开项目文件夹。导航到start-> index.html，然后查看说明第 1 部分的评论。这是简单 Dapp 的 UI，其中包含所有布局和按钮，可帮助我们学习连接到 MetaMask 扩展的基础知识。我们将在教程的第一部分使用/构建整个部分。
#安装依赖项
打开终端并确保您的终端位于start/文件夹的基本目录中。在文件夹中，文件应如下所示：
. ├─ index.html ├─ contract.js ├─ metamask.css ├─ package.json └─ README.md
你会有更多的文件，但这没什么好担心的！
打开终端并导航到开始文件夹。在此文件夹中运行：
yarn install
这将安装我们项目所需的所有必要依赖项。这将创建一个node_modules/存储所有依赖项的文件夹。
下一次运行：
yarn run serve
导航http://localhost:9011
#基本动作（一）
现在让我们导航到 start 文件夹中的 contract.js 文件。
您的文件应该看起来像这样。不要担心第 1-31 行。
const forwarderOrigin = http://localhost:9010; const initialize = () => { //You will start here }; window.addEventListener(DOMContentLoaded, initialize);
一旦加载了 DOM 中的内容，我们就会调用我们的初始化函数。现在，在我们开始编写任何代码之前，让我们先看看这个应用程序第一部分的任务列表。
我们将在第一部分介绍：
连接到 MetaMask 钱包查看我们的 eth_accounts 结果显示我们的网络号显示我们的 ChainId显示我们的账户#连接到 MetaMask 钱包
我们在 Dapp 中需要做的第一件事是连接到我们的 MetaMask 钱包。
我们需要创建一个函数来查看是否安装了 MetaMask Chrome 扩展如果未安装 MetaMask，我们：改变我们connectButton的Click here to install MetaMask单击该按钮时，它应该将我们带到一个允许我们安装扩展程序的页面禁用按钮如果安装了 MetaMask，我们：改变我们connectButton的Connect单击该按钮时，它应该允许我们连接到我们的 MetaMask 钱包禁用按钮让我们开始吧！
#MetaMask 扩展检查
在我们的代码中，我们需要从 index.html 连接到我们的按钮
const initialize = () => { //Basic Actions Section const onboardButton = document.getElementById(connectButton); };
接下来我们创建一个检查函数isMetaMaskInstalled来查看是否安装了 MetaMask 扩展
const initialize = () => { //Basic Actions Section const onboardButton = document.getElementById(connectButton); //Created check function to see if the MetaMask extension is installed const isMetaMaskInstalled = () => { //Have to check the ethereum binding on the window object to see if its installed const { ethereum } = window; return Boolean(ethereum && ethereum.isMetaMask); }; };
接下来我们需要创建一个MetaMaskClientCheck函数来查看是否需要根据是否安装了 MetaMask 扩展来更改按钮文本。
const initialize = () => { //Basic Actions Section const onboardButton = document.getElementById(connectButton); //Created check function to see if the MetaMask extension is installed const isMetaMaskInstalled = () => { //Have to check the ethereum binding on the window object to see if its installed const { ethereum } = window; return Boolean(ethereum && ethereum.isMetaMask); }; //——Inserted Code——\\ const MetaMaskClientCheck = () => { //Now we check to see if MetaMask is installed if (!isMetaMaskInstalled()) { //If it isnt installed we ask the user to click to install it onboardButton.innerText = Click here to install MetaMask!; } else { //If it is installed we change our button text onboardButton.innerText = Connect; } }; MetaMaskClientCheck(); //——/Inserted Code——\\ };
#MetaMask “未安装” Dapp 流程
在我们没有安装 MetaMask 并且我们要求用户安装的代码块中Click here to install MetaMask!，我们需要确保如果我们的按钮被点击，我们：
将用户重定向到正确的页面以安装扩展禁用按钮const MetaMaskClientCheck = () => { //Now we check to see if Metmask is installed if (!isMetaMaskInstalled()) { //If it isnt installed we ask the user to click to install it onboardButton.innerText = Click here to install MetaMask!; //When the button is clicked we call this function onboardButton.onclick = onClickInstall; //The button is now disabled onboardButton.disabled = false; } else { //If it is installed we change our button text onboardButton.innerText = Connect; } }; MetaMaskClientCheck();
我们创建了一个函数，当我们单击按钮并禁用它时将调用该函数。让我们深入研究onClickInstall函数并在其中创建逻辑。
小费
对于这一部分，我们将使用我们在 npm 安装期间安装的“@metamask/onboarding”库。要了解更多信息，请访问这里（打开新窗口）在这个函数中，我们想要：
将按钮的文本更改为Onboarding in progress禁用按钮开始入职流程在您的函数上方MetaMaskClientCheck写入/插入此代码。
//We create a new MetaMask onboarding object to use in our app const onboarding = new MetaMaskOnboarding({ forwarderOrigin }); //This will start the onboarding proccess const onClickInstall = () => { onboardButton.innerText = Onboarding in progress; onboardButton.disabled = true; //On this object we have startOnboarding which will start the onboarding process for our end user onboarding.startOnboarding(); };
伟大的！现在，如果我们的最终用户没有 MetaMask 扩展，他们可以安装它。当他们刷新页面时，以太坊窗口对象将在那里，我们可以继续将他们的 MetaMask 钱包连接到我们的 Dapp！
#MetaMask “已安装” Dapp 流程
接下来，我们需要重新访问我们的MetaMaskClientCheck函数并创建我们在“MetaMask Is Installed”代码块中的“MetaMask Not Installed”块中所做的类似功能。
const MetaMaskClientCheck = () => { //Now we check to see if Metmask is installed if (!isMetaMaskInstalled()) { //If it isnt installed we ask the user to click to install it onboardButton.innerText = Click here to install MetaMask!; //When the button is clicked we call th is function onboardButton.onclick = onClickInstall; //The button is now disabled onboardButton.disabled = true; } else { //If MetaMask is installed we ask the user to connect to their wallet onboardButton.innerText = Connect; //When the button is clicked we call this function to connect the users MetaMask Wallet onboardButton.onclick = onClickConnect; //The button is now enabled onboardButton.disabled = false; } }; MetaMaskClientCheck();
现在我们创建了一个函数，当我们单击按钮触发与钱包的连接时，该函数将被调用，禁用该按钮。接下来，让我们深入研究onClickConnect函数并在其中构建我们需要的逻辑。
在这个函数中，我们想要：
创建一个将尝试调用“eth_requestAccounts”RPC 方法的异步函数捕获任何错误并将它们记录到控制台在您的onClickInstall函数下编写/插入此代码。
const onClickConnect = async () => { try { // Will open the MetaMask UI // You should disable this button while the request is pending! await ethereum.request({ method: eth_requestAccounts }); } catch (error) { console.error(error); } };
伟大的！现在，一旦您单击按钮，MetaMask 扩展程序将弹出并连接您的钱包。
#获取以太坊账户
在此之后，我们接下来要做的是每当我们按下eth_accounts按钮时，我们想要获取我们的以太坊帐户并显示它。用以下三个按钮替换函数const onboardButton顶部的现有按钮：initialize()
//Basic Actions Section const onboardButton = document.getElementById(connectButton); const getAccountsButton = document.getElementById(getAccounts); const getAccountsResult = document.getElementById(getAccountsResult);
现在我们已经抓住了我们的 eth_accounts 按钮和我们的段落字段来显示它，我们现在必须抓取数据。
在我们的MetaMaskClientCheck()函数下，让我们编写/插入下面的代码。
//Eth_Accounts-getAccountsButton getAccountsButton.addEventListener(click, async () => { //we use eth_accounts because it returns a list of addresses owned by us. const accounts = await ethereum.request({ method: eth_accounts }); //We take the first address in the array of addresses and display it getAccountsResult.innerHTML = accounts[0] || Not able to get accounts; });
如果您已经在本教程的上一节中连接到您的钱包，您可以进入 MetaMask 的“已连接站点”菜单并删除 localhost 连接。这将使我们能够再次测试这两个按钮。如果我们刷新页面，然后单击“ETH_ACCOUNTS”按钮，我们应该会看到eth_accounts result: Not able to get accounts.
让我们继续，再次按下“连接”按钮，并确认“使用 MetaMask 连接”提示和“连接”。现在我们可以再次点击“ETH_ACCOUNTS”按钮，我们应该可以看到我们的 MetaMask 账户公共地址。
恭喜！
我们刚刚完成了基本操作功能的构建。您知道如何连接到 MetaMask、查看您连接的应用程序并删除它们，以及检索帐户。
现在进入下一步，显示我们的状态。
在本教程的这一点之前完成的代码预览：
const forwarderOrigin = http://localhost:9010; const initialize = () => { //Basic Actions Section const onboardButton = document.getElementById(connectButton); const getAccountsButton = document.getElementById(getAccounts); const getAccountsResult = document.getElementById(getAccountsResult); //Created check function to see if the MetaMask extension is installed const isMetaMaskInstalled = () => { //Have to check the ethereum binding on the window object to see if its installed const { ethereum } = window; return Boolean(ethereum && ethereum.isMetaMask); }; //We create a new MetaMask onboarding object to use in our app const onboarding = new MetaMaskOnboarding({ forwarderOrigin }); //This will start the onboarding proccess const onClickInstall = () => { onboardButton.innerText = Onboarding in progress; onboardButton.disabled = true; //On this object we have startOnboarding which will start the onboarding process for our end user onboarding.startOnboarding(); }; const onClickConnect = async () => { try { // Will open the MetaMask UI // You should disable this button while the request is pending! await ethereum.request({ method: eth_requestAccounts }); } catch (error) { console.error(error); } }; const MetaMaskClientCheck = () => { //Now we check to see if Metmask is installed if (!isMetaMaskInstalled()) { //If it isnt installed we ask the user to click to install it onboardButton.innerText = Click here to install MetaMask!; //When the button is clicked we call th is function onboardButton.onclick = onClickInstall; //The button is now disabled onboardButton.disabled = false; } else { //If MetaMask is installed we ask the user to connect to their wallet onboardButton.innerText = Connect; //When the button is clicked we call this function to connect the users MetaMask Wallet onboardButton.onclick = onClickConnect; //The button is now disabled onboardButton.disabled = false; } }; //Eth_Accounts-getAccountsButton getAccountsButton.addEventListener(click, async () => { //we use eth_accounts because it returns a list of addresses owned by us. const accounts = await ethereum.request({ method: eth_accounts }); //We take the first address in the array of addresses and display it getAccountsResult.innerHTML = accounts[0] || Not able to get accounts; }); MetaMaskClientCheck(); }; window.addEventListener(DOMContentLoaded, initialize);
发表回复