为Web3开发可能听起来很疯狂，但是Frontend Devs非常适合采取行动。有很多6个数字前端开发工作，过渡到Web3的工作很少。
分散应用程序（DAPP）开发简介
DAPP的大部分开发确实在前端。您甚至不需要了解智能合同的开发才能开始。您只需要熟悉库和基础架构即可准备区块链访问的应用程序。
想象一下使用Fefi协议构建分散的财务应用程序。作为前端开发人员，您的任务是确定您需要访问哪些合同。此过程不需要为智能合约本身编写任何代码。
您可以将智能合约视为托管在区块链上的应用程序，您想通过API访问其功能。而不是URL，您会收到一个智能合约地址。而不是使用Axios之类的工具来调用API，而是使用称为Ethers.js的东西。
利用ethers.js进行智能合同互动
ethers.js可以与智能合约进行互动。实例化表示智能合约的对象后，您可以无缝访问其功能。一个例子如下：
console.log(await walletContract.getBalance())
在此示例中，智能合约钱包包含一个称为getBalance的函数。
要到达您可以使用一行JavaScript代码访问智能合约的功能，您可以利用ethers.Contract实例化智能合约。
import {ethers} from 'ethers';
const walletContract = new ethers.Contract(
deployedWalletAddress,
WalletArtifact.abi,
signer
);
在这里，您正在导入“以太词”，并将三个元素传递到ethers.Contract：
- 在区块链上已部署的合同的地址
- 应用程序二进制接口（ABI），这是一个JSON文件，概述了与智能合约（例如功能名称，参数类型）互动的互动
- 签名者 - 一个包含RPC端点的URL的Ethers对象，该对象将您的请求发送到区块链节点
获取地址和ABI
如果您与团队合作，则可能会提供地址和ABI。
独立工作时，可以在写智能合约的人的文档网站上找到合同地址，以及对可用功能的详细说明。
您还可以使用智能合约地址从Block Explorer网站获取ABI。例如，如果您查找地址 0xE0D7427A900828D5553A6579C842D76926A73433E on polygonscan.com ，您将在"Contract" page上找到合同代码。向下滚动，您会找到“合同ABI”，可以复制并保存为JSON或JS文件。
设置签名者
要设置签名者，请使用以下代码：
const signer = provider.getSigner();
签名者对于访问智能合约中的写入功能是必需的。
如果您只需要从智能合约中读取功能，则可以使用提供商而不是签名者。设置提供商涉及使用metAmask：
import {ethers} from 'ethers';
import { Web3Provider } from '@ethersproject/providers';
if (typeof window.ethereum !== 'undefined') {
const provider = new ethers.providers.Web3Provider(window.ethereum);
} else {
// MetaMask is not available, handle accordingly
alert('Install metamask from the Chrome webstore');
}
上面的代码允许用户通过其MetAmask钱包与智能合约进行交互。这些步骤完成后，您可以将任何智能合约功能视为模块或API。如果需要写操作，请在前端代码中创建智能合约的实例时使用签名者。对于仅阅读功能，请使用提供商。
最后一句话
虽然以太坊是最突出的区块链，但诸如Binance链，多边形，仲裁等许多其他区块链旨在独立缩放以太坊或功能。但是，从前端开发人员的角度来看，这无关紧要，因为这些都是以太坊虚拟机（EVM）兼容。因此，如果您的代码适用于以太坊，它也适用于这些链。
使用ethers.js是最原始，最传统的方式。有些库使前端Web3开发的某些方面更容易。 Wagmi是一个很好的例子。它包含各种反应挂钩，以执行诸如ERC20令牌的检查平衡，查看帐户详细信息，甚至用于在称为usecontractwrite的智能合约中执行写作操作。但是建立该设置仍然需要您提供地址和ABI。
即使您可以快速入门，但以自己的节奏研究智能合约仍然是有益的。更深入的理解将有助于设计更好的应用程序，因为Web3开发的某些方面并不那么直观。例如，许多ERC20令牌操作也需要2次交易，即使它们看起来像是简单的操作。作为前端开发人员，要快速起步需要花费很少的时间。