如何使用 React web 应用程序部署智能合约？

Question

到目前为止，为了部署智能合约，我使用了 remix ide。 但是现在我需要创建一个网站，只需点击一个按钮就可以部署智能合约？ 我可以这样做吗？

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
interface AnotherContract {
    function walletOfOwner(address owner) external view returns (uint256[] memory);
}

contract Demo{
    uint public similarity;
    uint256 public hasRedPill;
    constructor(
    string memory _name,
    string memory _symbol,
    string memory _initBaseURI
  )  {
     
    // some code
  }
    function test() public view returns(uint256  ){
       AnotherContract anotherContract = AnotherContract(address(0x116486FD64Ba04F7B789278B239E2e5A1e2f7b39));
      return anotherContract.walletOfOwner(msg.sender).length;
    }
}

假设我想使用我的 react js web 应用程序部署这个演示合约。 在这里，我必须先发送构造函数参数，然后部署合约。 作为回报，我需要合约的字节码、abi 和地址。

有没有办法做到这一点？ 我觉得这是可能的，因为 remix ide 还提供了一个用于部署合约的 ui。 我是新来的。 请帮忙。

Answer 1

1. 设置松露

npm install -g truffle

2. 创建一个空的存储库， cd进入它，然后

truffle init

3. 配置本地网络和提供程序

在truffle.config.js中，在 module.exports 中添加以下代码段：

module.exports = {
  networks: {
    development: {
     host: "127.0.0.1",
     port: 7545,
     network_id: "*",
    },
  },
  compilers: {
    solc: {
      version: "0.8.0",
      settings: {
       optimizer: {
         enabled: false,
         runs: 200
       }
      }
    }
  }
};

4. 现在编译智能合约

truffle compile

5. 迁移智能合约

truffle migrate

就是这样，它应该在.json文件中创建一个ABI array和contract address

Answer 2

你的问题的答案将是一个很长的答案。 Sagar 的建议是一个很好的线索，尽管这里需要涵盖很多内容。

我建议您观看下面链接的速成课程，以帮助您定位。 本课程将帮助您逐步了解 go 的一些细节（这对我有很大帮助）。 我看到你已经掌握了一些后端知识，所以为了涵盖前端，我建议你跳到第 10 课，其中涵盖了 NextJS/React。

指南链接：使用 JavaScript 学习区块链、Solidity 和全栈 Web3 开发