从零到扎实

热衷于扎实地开展一项边际项目，却不知道如何开始？ 几周前我在同一地点。 在本文中，我将指导您从开发前端到上传智能合约的所有方法。 可以在这里找到该项目的演示https://steve-ng.github.io/ （尝试该应用程序需要使用MetaMask）

本教程需要编程经验，您应该有一个私人的ETH钱包（也许来自myEtherWallet）

我们将要构建的示例应用程序

入门（预计：20分钟）

您必须安装以下组件，它们将需要一些时间

1. 具有npm的 节点 ，请遵循以下快速指南： https : //docs.npmjs.com/getting-started/installing-node
2. 伽纳彻。 它允许您运行本地以太坊网络，可从http://truffleframework.com/ganache/下载
3. 带有Google chrome的MetaMask：这是一个chrome插件，您可以在其中创建您的eth帐户。 这是有关元掩码的快速指南： https ://www.cryptocompare.com/wallets/guides/how-to-use-metamask/
4. 文本编辑器，例如Sublime文本

运行本地连接到生产以太坊网络的前端（10分钟）

首先，我们将尝试在本地运行以连接到以太坊主网络的演示应用程序。 在终端中运行以下命令

 > git clone  https://github.com/steve-ng/verify-file 

 Next, we have to ensure you have the right node version, try the following command and you should get 6.0 and above.
> node -v 
> cd verify-file/verify-frontend
> npm install 

 We are going to copy the production config into dev config 
> cp properties/prod.json properties/dev.json 

> npm start -s

在最后一个命令npm start -s ，您应该看到localhost:3000启动。 如果您正在运行元掩码，则应该在https://steve-ng.github.io/上看到之前看到的内容。 否则，如果您看到“ 未连接metamask，此网站需要设置metamask”，请尝试单击chrome中的ur metamask图标，然后单击“解锁”，然后在localhost:3000刷新浏览器，它应该可以工作。

如果您喜欢尝试该应用程序，请尝试上传文件哈希并查看上传的内容。 使用1或2 gwei可以最小化交易费用。 我们将在短期内解释代码的工作方式。

在本地以太坊网络上部署智能合约（15分钟）

接下来，我们将尝试运行以太坊本地网络并上传智能合约。 打开您先前下载的Ganache 。 您应该看到如下内容。

启动时会显示Ganche屏幕。 10个以太坊钱包将为您预装100 ETH。 您可以单击每行上的钥匙图标以查看其私钥。

转到设置（Windows->设置），并记下您的端口号和主机名 。

在此屏幕快照中，我的主机名是localhost，端口号是8545。我将使用此配置设置。

接下来，我们将上传智能合约。

1. 访问Remix — Solidity IDE，并在其中复制智能合约， 网址为https://github.com/steve-ng/verify-file/blob/master/contract/Hashfile.sol 。
2. 接下来，单击选择运行选项卡，然后在环境下选择Web3 Provider 。 将会弹出一个窗口，询问您的web3提供程序端点。 输入您的主机名和端口号。 如果您的端口号和主机名与我的相同，它将为http：// localhost：8545

3.最后，在同一运行选项卡下，单击粉红色的创建按钮。 单击它后，请按照下面的屏幕快照并单击图标以复制合同地址。

如果打开Ganache，则在“交易”选项卡下，您还将看到1个合同创建交易。

4.最后再回到前端应用程序，并更换hashContractAddress在properties/dev.json与您有复制，并与再次启动应用程序的地址npm start -s

5.在继续http：// localhost：3000之前 ，您还必须将元掩码也连接到本地以太坊网络。 （供参考，请参见下面的屏幕截图）。 另外，这是您回到Ganche并复制以太坊钱包私钥并导入MetaMask（预载100 ETH）的时候

而已！ 在这一阶段，您将使运行的本地前端应用程序连接到本地以太坊网络，同时将MetaMask也连接到本地网络！

从前端调用智能合约（10分钟）

本部分介绍了前端应用程序如何与以太坊网络上载的智能合约进行对话。 我们使用了一个名为web3JS的库。 我们将在src/utils/hashContract.js引用该文件

与智能合约进行交互的所有应用程序共有3个步骤

1）初始化web3提供程序环境

您会在文件的前几行中注意到这一点：

if (typeof web3 !== 'undefined') {
  myWeb3 = new Web3(web3.currentProvider);
} else {
  // set the provider you want from Web3.providers
  console.log('No Web3 Detected... using HTTP Provider');
  return null;
}

它的作用是获取您的metaMask实例并将其分配给变量myWeb3

2）初始化智能合约

hashContract = new myWeb3.eth.Contract([
      {
        "constant": true,
        "inputs": [],
        "name": "getUserHashFile",
        "outputs": [
          {
            "name": "",
            "type": "uint256[]"
          },
          {
            "name": "",
            "type": "bytes32[]"
          },
          {
            "name": "",
            "type": "bytes32[]"
          }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
      },
      {
        "constant": false,
        "inputs": [
          {
            "name": "name",
            "type": "bytes32"
          },
          {
            "name": "md5Hash",
            "type": "bytes32"
          }
        ],
        "name": "addHashFile",
        "outputs": [],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
      }
    ],
    hashContractAddress,
    );

3）最后，调用智能合约

请注意，以上已将您的合同声明为hashContract并且这样做使web3JS知道了智能合同中可用的方法。

您可以使用hashContract.methods.xxx下面的方法调用智能合约

hashContract.methods.getUserHashFile().call({from: address});

hashContract.methods.addHashFile(nameHash, hexHash).send({from: address})

而已！ 希望您对如何开发与以太坊网络交互的前端应用程序有所了解。

如果您喜欢这篇文章或认为它对您有所帮助，则可以使用我的推荐链接加入交易所（如果您加入并交易，我会得到一些佣金）：

• https://hitbtc.com/?ref_id=59f3f03a31222
• https://www.binance.com/register.html?ref=10050322

或者，尝试使用coinbase，一旦您交易了价值$ 100的https://www.coinbase.com/join/58e399c5641b9462a2ee6410，我们将获得价值$ 10的比特币

From: https://hackernoon.com/zero-to-something-with-solidity-f9ad0c137447