1. IPFS点滴资讯首页
  2. 实战操作

在以太坊上构建完整堆栈DApp的温和介绍 – 第1部分

在以太坊上构建完整堆栈DApp的温和介绍 - 第1部分

在本教程中,我们将构建一个简单的dapp(分散式应用程序)。目标是介绍技术堆栈的所有部分并展示它们如何协同工作。我们不会深入研究任何单一技术,而是覆盖足以开始作为您自己项目的基础。这个dapp将简单地存储和检索以太坊和IPFS上的用户输入文本,并使用uPort进行登录。

本教程分为两部分:
第1部分:在Solidity中编写智能合约,使用Truffle编写和迁移以及用于前端的服务。
第2部分 – 使用React,uPort和IPFS与智能合约集成。

我们将使用以下技术堆栈:
• React – 前端库
• Solidity – 用于构建在以太坊上运行的智能合约的语言
• Truffle – 用于编译,迁移和测试智能合约的框架。
• IPFS – 分散存储
• uPort – 身份管理,数字签名交易和轻松登录dapps。

对React的了解不是必需的,但很高兴。我们将构建一个可以轻松用于任何前端框架的服务。

在以太坊上构建完整堆栈DApp的温和介绍 - 第1部分
dapp架构

要继续,请在此处下载dapp repo:https//github.com/zerostatic/dapp-starter-kit

下载后,安装依赖项:

纱线安装

并运行该应用程序:

纱线开始

第1部分:

在第一部分中,我们将使用Remix在Solidity中编写智能合约。我们将使用Truffle进行编译和迁移,并创建一个前端服务,我们可以使用它来与合同进行交互。

在以太坊上构建完整堆栈DApp的温和介绍 - 第1部分

Solidity是用于编写在以太坊网络上运行的智能合约的语言。我们的Solidity智能合约将非常基础,仅包含两个功能。一个函数将保存存储在用户地址下的IPFS哈希和时间戳。另一个函数将返回特定用户地址的IPFS哈希值和时间戳。有关IPFS的更多信息。

混音:

我们将使用在线工具Remix编写Solidity代码。Remix是一个在线IDE,可以很容易地编写和调试Solidity。您可以在此处找到Remix IDE:https//remix.ethereum.org

在Remix中,通过选择左上角的“加号”图标来创建新文件。然后命名文件:MyDetails.sol。

在以太坊上构建完整堆栈DApp的温和介绍 - 第1部分
选择新文件

接下来,在屏幕的右侧,选择“运行”。然后在“环境”旁边选择“JavaScript VM”。这将允许您在浏览器中测试和运行智能合约。

在以太坊上构建完整堆栈DApp的温和介绍 - 第1部分

首先在代码中,我们需要告诉编译器使用哪个版本的Solidity。将其添加到文件的顶部:

pragma solidity ^ 0.4.18;

要创建合同类,请添加以下内容:

我的细节 {
}

在课堂上我们将添加两个映射。一个用于存储IPF哈希值,另一个用于存储时间戳。在类定义中,添加以下两行:

mapping(address => string)ipfsHashes; 
mapping(address => uint)timestamp;

什么是映射?映射可以被认为是哈希表。要定义映射,首先要将类型设置为mapping。接下来我们设置键和值类型。在我们的第一个映射中,键是地址,类型是字符串:(address => string)换句话说:映射中的每个条目都将字符串存储在唯一地址下。最后我们为映射设置了一个变量名:ipfsHashes

在第二个映射中,我们将时间戳存储为用户地址下的uint(无符号整数)。

接下来是设置数据的功能:

function setHash(string ipfsHash)public { 
     ipfsHashes [msg.sender] = ipfsHash; 
     timestamp [msg.sender] = now; 
}

此函数接收ipfs哈希字符串作为参数。然后我们使用映射将ipfs哈希存储在用户地址下。如图所示:

ipfsHashes [msg.sender] = ipfsHash;

在Solidity中,msg.sender自动设置为发送方的地址,因此我们可以将其用作映射的关键并将ipfs散列作为值存储。

该函数的第二行是:

timestamp [msg.sender] = now;

在这里,我们还使用用户地址作为键并设置值now,这将保存时间戳。

接下来是检索数据的函数:

function getHash(address account)public view returns(string,uint){ 
     return(ipfsHashes [account],timestamp [account]); 
}

此函数接受地址作为参数,并返回存储在该用户地址下的ipfs散列和时间戳。

在可靠性方面,我们需要设置一些可见性关键词:public这意味着它可以从契约外部调用,view这意味着该函数是只读的。

Solidity还要求您定义返回类型这里我们指定:returns(string, uint)这意味着我们返回一个字符串和一个uint(一个ipfs哈希和时间戳)

以下是我们智能合约的完整代码:

pragma solidity ^ 0.4.18;
合同MyDetails {
mapping(address => string)ipfsHashes;
mapping(address => uint)timestamp;
function setHash(string ipfsHash)public {
ipfsHashes [msg.sender] = ipfsHash;
timestamp [msg.sender] = now;
}
function getHash(address account)public view returns(string,uint){
return(ipfsHashes [account],timestamp [account]);
}
}

我们现在可以通过选择“创建”来测试Remix中的代码

在以太坊上构建完整堆栈DApp的温和介绍 - 第1部分

然后在下面您将看到合同中的getter和setter列表:

在以太坊上构建完整堆栈DApp的温和介绍 - 第1部分

继续并输入“setHash”旁边的任何字符串确保在引号中输入值以表示刺痛。然后选择“setHash”。

接下来,输入“gethash”旁边的地址帐户。地址列在“帐户”旁边的右上角 – 选择复制图标以获取地址。单击“getHash”,您将看到设置哈希时输入的字符串。

现在合同已经完成。让我们看看我们如何将它整合到我们的项目中。

在以太坊上构建完整堆栈DApp的温和介绍 - 第1部分

Truffle是一个用于编译,迁移和测试合同的框架。它还可以处理网络管理,以便部署到不同的私有和公共网络。

在项目文件中,打开目录src/ethereum 。这是我们将用于编译和迁移Solidity智能合约的目录。以太坊目录已包含编译和迁移所需的所有目录。让我们来看看这是如何完成的。首先,您需要在全球范围内安装松露:

npm install -g truffle

目录:build, contracts, migrations and test通过运行自动创建:

truffle init

truffle init运行时也会自动生成以下两个文件:contracts/Migrations.solmigrations/1_initial_migration.jsTruffle要求您具有此初始迁移合同以使用迁移功能。对于大多数项目,此合同最初将作为第一次迁移进行部署,不会再次更新。

现在看看文件:contracts/MyDetails.sol这是我们上面使用Remix创建的Solidity文件。要将此标记为迁移,我已添加了一个文件migrations/2_myDetails_migrations.js。此文件的命名很重要。它从数字2开始,因为我们希望在第一个合同之后编译它。

以下是此文件的内容:

var Mydetails = artifacts.require(“./ MyDetails.sol”);
module.exports = function(deployer){ 
   deployer.deploy(Mydetails); 
};

这是一个标准的Truffle迁移样板,它指向我们要迁移的Solidity文件。

现在让我们编译合同。在终端中确保您当前的目录是:src/ethereum然后运行:

松露编译

完成编译后,您将在目录中看到已编译的json文件:build/contracts我们稍后将使用这些文件与合同进行交互。

接下来,我们将设置用于部署合同的配置文件。我们将部署到Rinkeby测试网络,因为这是uPort当前使用的网络。uPort很快将在其他测试网上提供,之后将在主要的以太坊网络上提供。

我们将使用Infura连接到Rinkeby网络。首先,转到Infura并注册:https://infura.io/signup注册后,您将收到一封电子邮件,其中包含与您的帐户相关联的Infura网址列表。复制为Rinkeby提供的网址。

打开文件truffle.js然后配置已经设置,如下所示:

var HDWalletProvider = require('truffle-hdwallet-provider');
var mnemonic ='糖果枫糖蛋糕布丁奶油蜂蜜丰富光滑的碎甜点';
module.exports = { 
  rinkeby:{ 
    provider:new HDWalletProvider(mnemonic,
    'https     ://rinkeby.infura.io/XAmfM8SVSh5OkuiYMIBx',1 
    ),
    network_id:5,
gas:6712388,
    gasPrice:10000000 
  },
},
};

请注意,truffle-hdwallet-provider使用Truffle配置部署需要导入。这是使用命令安装的:

npm install --save truffle-hdwallet-provider

rinkeby.infura注册Infura后收到的网址替换网址。

配置文件中设置的gas和gasPrice在编写时工作,但您可能需要调整期货案例。

现在我们准备将智能合约迁移到Rinkeby。在终端输入:

松露迁移 - 网络rinkeby

迁移需要15秒或更长时间。如果成功,我们准备开始与合同互动!

合同服务:

接下来,查看目录中的项目/service目录。内部是我已经创建的服务命名:DetailService.js我们可以使用它来与合同进行交互。打开此文件,我们将完成它。

首先,请注意顶部的Web导入

从“../util/Uport”导入{web3};

web3.js是一个库集合,允许您与本地或远程以太坊节点进行交互。因为我们正在使用uPort,所以我们将使用web3的uPorts实现进行合同交互。如果您想使用MetaMask等其他提供程序而不是uPort,则可以在此处使用标准版本的web3

下一个导入显示我们将使用truffle-contract已安装使用的

npm install tr​​uffle-contract --save

松露合约通过提供更好的控制流程和使用承诺(即,在您确保已经开采之前交易无法完成),可以轻松地与合同进行交互。以及此处列出的其他功能。

接下来,我们将导入我们之前使用Truffle创建的已编译合同:

从'../ethereum/build/contracts/MyDetails.json'导入MyDetails;

然后我们配置truffle-contract并设置web3提供者:

const DetailsContract = contract(MyDetails); 
DetailsContract.setProvider(web3.currentProvider);

第一个函数只返回一个合约实例:

const getInstance = async()=> { 
   const instance = await DetailsContract.deployed(); 
   返回实例; 
}

下一个函数将调用合约上的交易。这里我们传递一个地址和一个IPFS哈希。散列作为参数传递,地址设置为from我们的合同收到的字段msg.sender注意函数名称setHash与我们在Solidity合同中使用的名称相同。

export const setContractHash = async(account,hash)=> { 
   const instance = await getInstance(); 
   const items = await instance.setHash(hash,{from:account}); 
   退换货品; 
}

第二个函数用于获取IPFS哈希值。这里我们传递将用于查找存储的哈希的地址:

export const getContractHash = async(account)=> { 
   const instance = await getInstance(); 
   const items = await instance.getHash(account); 
   退换货品; 
}

这就是我们所需要的服务。您可以在任何前端应用程序中使用此服务,但在本教程中,我将向您展示如何将其与React一起使用。

到第2部分!

这里表达的所有代码和意见都是我自己的,而不是我雇主的意见。

点对点科技简介

点对点科技深耘IPFS与Filecoin技术,坚持区块链技术改变未来的信念。点对点 IPFS 数据中心是目前国内技术领先,性价比高、保障优的投资标的。自建杭州数据中心,合作数据中心分布于上海、宁波、河北、香港、斯德哥尔摩(瑞典)等地。点对点数据中心具有优秀的硬件配置与目前国内优质的网络节点资源。点对点科技力求将IPFS爱好者升级为IPFS领军者与受益者,让IPFS颠覆传统互联网,共同开启 WEB 3.0时代。

想了解更多区块链知识吗?关注我吧!

Filecoin测试网二阶段昨日重启,点对点出块第一! | 点滴资讯

原创文章,作者:mestery,如若转载,请注明出处:https://ipfsdrop.com/tech/zaiyitaifangshanggoujianwanzhengduizhandappdewenhejieshao-di1bufen/

发表评论

电子邮件地址不会被公开。 必填项已用*标注