I deployed a smart contract on third web but I did not ABI into it. On the explorer page the functionality of the smart contract is not visible on third web's dashboard. Can I still use the same deployed smart contract for building my dapp? Or should I start again from scratch?

我在Third Web上部署了一份智能合同，但我没有加入其中。在资源管理器页面上，智能合同的功能在第三个网站的仪表板上看不到。我是否仍然可以使用相同的部署智能合同来构建我的DApp？或者我应该从头开始？

I was expecting functionality of smart contract in third web but it did not show any thing in the explore page after I deployed my smart contract.

我期待第三个Web中的智能合同功能，但在我部署智能合同后，它没有在浏览页面中显示任何内容。

Let me explain the ABI's role. In the context of decentralized applications (dApps), the ABI is essential for interacting with a smart contract. The ABI acts as the bridge between two binary program modules, in this case, your front-end application and the deployed smart contract on the blockchain.

让我解释一下ABI的作用。在去中心化应用程序(Dapp)的环境中，ABI对于与智能合同交互是必不可少的。ABI充当两个二进制程序模块之间的桥梁，在这种情况下，您的前端应用程序和区块链上部署的智能合同。

Without the ABI, your front-end wouldn't know how to structure calls to the contract's functions, what data types to use, or how to interpret the data returned from function calls.

如果没有ABI，您的前端将不知道如何构造对约定函数的调用、使用什么数据类型或如何解释从函数调用返回的数据。

So, if you've deployed a contract without saving its ABI, you'll generally have trouble integrating it into a dApp. That said, the ABI is generated when you compile the smart contract, not when you deploy it. If you still have access to the original source code of the smart contract, you can re-compile it to obtain the ABI, without having to redeploy the contract. Many development tools and environments, like Truffle or Remix, make it easy to extract the ABI upon compilation.

因此，如果您部署了一个合同而没有保存它的ABI，您通常会在将其集成到DAPP中时遇到困难。也就是说，ABI是在编译智能合同时生成的，而不是在部署时生成的。如果您仍然可以访问智能合同的原始源代码，您可以重新编译它以获得ABI，而不必重新部署合同。许多开发工具和环境，如Truffle或Remix，使得在编译时提取ABI变得很容易。

Let's simulate an ABI save.

让我们来模拟一次ABI保存。

I am assuming that you have smart contract like this:

我假设您有这样的智能合同：

pragma solidity ^0.8.0;

contract MyContract {
    uint256 public myVariable;

    function setVariable(uint256 _myVariable) public {
        myVariable = _myVariable;
    }

    function getVariable() public view returns (uint256) {
        return myVariable;
    }
}

Compiling the smart contract:

编制智能合同：

truffle compile

When you run this command, Truffle will create a JSON file in the build/contracts directory that includes the ABI, among other things.

当您运行此命令时，Truffle将在构建/合同目录中创建一个JSON文件，其中包括ABI等。

Deploying the smart contract:

部署智能合同：

truffle migrate --network name_of_your_network

You can deploy your smart contract to the network of your choice or local blockchain for testing.

您可以将您的智能合同部署到您选择的网络或本地区块链进行测试。

Saving the ABI:

保存ABI：

const myContractJSON = require("./build/contracts/MyContract.json");
const myContractABI = myContractJSON.abi;
const myContractAddress = "0x..."; // Replace with your deployed address
const myContract = new web3.eth.Contract(myContractABI, myContractAddress);

Now you can use this ABI (myContractABI) to interact with your deployed smart contract using libraries like Web3.js or Ethers.js.

现在，您可以使用此ABI(MyContractABI)通过Web3.js或Ethers.js等库与部署的智能合同进行交互。

Initializing Web3 on Frontend

正在前端初始化Web3

const Web3 = require("web3");
const web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545")); 

This is the place you will provide the URL pointing to an Ethereum node that can read from the live blockchain or whichever network you're targeting. I have put http://localhost:8545. This can be used for local development while running a local Ethereum node. You can use alternatives:

在此位置，您将提供指向可从实时区块链或任何目标网络读取的以太节点的URL。我已经把http://localhost:8545.这可以在运行本地以太节点的同时用于本地开发。您可以使用其他选项：

// const web3 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/v3/YOUR_INFURA_API_KEY"));
// const web3 = new Web3(new Web3.providers.HttpProvider("http://your-ethereum-node.org:8545"));

Reading Data From the Contract

从合同中读取数据

myContract.methods.getVariable().call().then(console.log);

Writing Data to the Contract

将数据写入合同

const accounts = await web3.eth.getAccounts();

myContract.methods.setVariable(5).send({ from: accounts[0] })
  .then(receipt => console.log(receipt));

Note 1: If you're deploying manually, say using Remix IDE, you will find the ABI under the 'Compile' tab after you've compiled your smart contract. You can then copy this ABI and use it in your frontend code.

注1：如果您手动部署，例如使用Remix IDE，则在编译智能合约后，您将在“编译”选项卡下找到ABI。然后，您可以复制此ABI并在前端代码中使用它。

Note 2: Remember, you need to keep track of both the ABI and the contract's deployed address to interact with it from your dApp. I have put the example on the "Saving the ABI" step.

注2：请记住，您需要同时跟踪ABI和合同的部署地址，以便从您的DAPP与其交互。我已经把这个例子放在了“拯救ABI”的步骤上。