NFT-DAPP开发入门(web3入门)web3和前端结合的可能性未来在哪里讷？前端如何有机会来参与到可能会蓬勃发展的w

一：DAPP的介绍

1.1 DAPP的介绍

去中心化应用（DECENTRALIZED APPLICATIONS）是运用以太坊网络来打破传统商业模式或发明新商业模式的蓬勃发展的应用新运动。

分散式应用程序或dApps是软件程序，其后端代码在分布式计算机网络上运行。这与通常在集中式服务器上运行的标准应用程序形成鲜明对比。这与其他区块链驱动的创新相结合，使dApp比集中式对应物具有一些独特的特征和优势。

1.2 DAPP的应用工作原理

去中心化应用的后端代码（智能合约）运行在一个去中心化的网络上，而非中心化的服务器。他们使用以太坊区块链网络作为数据存储端，并且用智能合约实现app的业务逻辑。

一个智能合约像是一套设立在区块链上的规则，所有人都可以准确地观察和运行这套规则。设想一下，有一台自动贩卖机：如果向它提供足够的资金和正确的选择，您将得到您想要的货品。正如自动贩卖机一样，智能合约可以像您的以太坊账户一样存储持有资金。这允许代码居间协议和交易。

一旦去中心化应用部署到以太坊网络，您将无法更改他们。去中心化应用之所以可以被去中心化就是因为他们被合约中的逻辑所控制，而不是公司或者个人。

二：DAPP的开发流程

这里主要是演示以太链相关的操作

2.1 智能合约部分

演示代码仓库：jomeswang/hardhat-contrast: 这是一个hardhat地预演仓库 (github.com)

使用hardhat套件进行开发，使用harhat可以让我们更加方便快捷地开发，测试，部署以太智能合约，同时hardhat自带了harhat网络，这是一个为开发而设计的本地以太坊网络节点，类似于 Ganache，它允许您部署合约、运行测试和调试代码。

在下面这一块主要会以Mint with NFT.storage and Polygon | NFT School 这一篇文章为核心路线，进行个人想法的总结归纳。会以polygon mumbai测试链作为部署网络进行演示。

2.1.0 前提环境安装

安装metamask钱包
连接mumbai polygon测试网络
领取测试币上述三个步骤抢宝贝DAPP游戏玩法可参考里面的教程流程
保存钱包私钥通过单击右上角的三个点并选择“帐户详细信息”，从 Metamask 复制您的私钥。在底部，您可以找到一个按钮来导出您的私钥。单击它并在出现提示时输入您的密码。您现在可以将私钥复制并粘贴到文本文件中。我们将在本教程后面与区块链交互时使用它。

2.1.1 安装使用hardhat

首先在常用的工作空间使用npm进行hardhat包的下载。

npm install --save-dev hardhat @nomiclabs/hardhat-ethers dotenv

接着使用

npx hardat // 来触发创建hardhat项目ci

接着看他创造出来的文件夹路径为下，主要核心点在于图中标出来的（合约，脚本，测试，配置）层。

在这里我将其部署到mumbai polygontestnet中去，需要保证钱包中有一部分的matic测试币，如果没有，请到Polygon Faucet中领取。（详细见环境安装环节）

修改hard.config.js为一下内容

/**
* @type import('hardhat/config').HardhatUserConfig
*/
require("@nomiclabs/hardhat-ethers");
require('dotenv').config();
const { PRIVATE_KEY } = process.env;
module.exports = {
  defaultNetwork: "matic",
  networks: {
    hardhat: {
    },
    matic: {
      url: "https://rpc-mumbai.maticvigil.com",
      accounts: [PRIVATE_KEY]
    }
  },
  solidity: {
    version: "0.8.3",
    settings: {
      optimizer: {
        enabled: true,
        runs: 200
      }
    }
  },
}

2.1.2 部署一个简单的ERC721合约

在contracts中我们增加一个文件 QNFT.sol，放置以下内容，这一段继承使用了由openzeppelin 实现的erc721，这一个版本因为已经有被审查过了所以可以理解为是真实可信地。

// Contract based on https://docs.openzeppelin.com/contracts/4.x/erc721
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract QNFT is ERC721URIStorage {
   using Counters for Counters.Counter;
   Counters.Counter private _tokenIds;

   constructor() ERC721("QBB NFT", "QNFT") {}

  function mintNFT(address recipient, string memory tokenURI)
       public
       returns (uint256)
   {
       _tokenIds.increment();

       uint256 newItemId = _tokenIds.current();
       _mint(recipient, newItemId);
       _setTokenURI(newItemId, tokenURI);

       return newItemId;
   }
}

接着创建一个.env文件，将钱包私钥存储在环境变量如下方中的PRIVATE_KEY选项，

在scripts中创建 deploy-contract.js 文件，写入一下内容

const { ethers } = require("hardhat");
async function deployContract() {
  const ExampleNFT = await ethers.getContractFactory("QNFT")
  const exampleNFT = await ExampleNFT.deploy()
  await exampleNFT.deployed()
  // This solves the bug in Mumbai network where the contract address is not the real one
  const txHash = exampleNFT.deployTransaction.hash
  const txReceipt = await ethers.provider.waitForTransaction(txHash)
  const contractAddress = txReceipt.contractAddress
  console.log("Contract deployed to address:", contractAddress)
 }
 
 deployContract()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });