分散化应用软件(dApps)

无需加好友免费技术支持

分散化应用软件（dApps）这是区块链技术性最有前景的运用之一。他们为具备史无前例功能性的顾客以及以商业服务为核心的商品开创了新的概率。

有意思的是，怎样搭建强劲的分散应用软件来补经营环境。

本文教他们怎么使用它 Reactjs、TailwindCSS、Etherjs、IPFS 和 Solidity 搭建密集的动态新闻网址。

将会是一个平台，所有人都可以在网络上阅读文章、分享和发新闻。文件存储在智能合同中 Polygon 互联网区块链。

智能合同是存放在区块链里的代码，能够读写能力；人们稍候会介绍。

我们将要建立与布署智能合同和一个网站，容许大家联接钱夹并和我们的智能合同互动交流。

GitHub 存储库

? 前面[1]? 智能合同[2]让我们确保大家 PC 上装上 Node/NPM。假如不组装，请到这儿[3]获得手册。

我们应该导航栏到终端设备。cd进到我们在选择的所有文件目录，随后实际操作下列指令：

让我们根据运作下列指令得到实例新项目：

我们将要应用下列选择项：

? 实例新项目。 接受所有别的要求。hardhat-waffle和hardhat-ethers实例新项目是非常必要的。

假如不自动下载，我们将要应用下列指令来组装其他条件：

下面，我们将要组装本实例教程后边所使用的电子计数器@openzeppelin/contracts。

我们会在控制面板里看到检测结果。

如今我们要从检测文件夹中删掉它sample-test.js并且从scripts清单中删掉sample-script.js。以后，进到contracts并删掉Greeter.sol.

文件夹自身不可删掉！

我们会在contracts 在清单中创建一个NewsFeed.sol文件。应用 Hardhat 文件合理布局至关重要，需要注意！我们将要从每一份协议的结构特点逐渐。

搭建和布署我们自己的智能合同，我们将要导航栏到scripts创建一个文件夹run.js应用下列代码精彩片段升级文件：

让我们用下边的指令去操作它。

您需要见到以下几点：

如今我们拥有高效的智能合同 让我们把它布署到本地连接中。

在这个scripts我们将于文件夹下创建一个deploy.js文件。加上下列代码精彩片段。

在构建以前，让我们保证我们自己的当地连接点早已运行，并用下列指令在单独终端设备中运作。

下面，我们将要布署我们自己的智能合同。

它应当看起来像是那样：

保证包含测试脚本和deploy.js一切，包含文件，都做好准备。我们将要应用下列代码精彩片段升级智能合同，run.js,和deploy.js。

更新contracts/NewsFeed.sol文件。

更新scripts/run.js

scripts/deploy.js

现在是时候开始做生意并布署区块链了。

在布署区块链以前，我们应该创建一个Alchemy[4]账号。

Alchemy 那样我们就能广播节目我们自己的合同书来创建买卖，那样挖矿就能尽早得到它。一旦被发掘，买卖将成为合理买卖分享到区块链。以后，每一个人区块链团本都是会升级。

注册认证，我们将要创建下列应用软件。还记得将网络切换到我们将要布署的孟买。

我们将要必须得到我们自己的密匙，具体如下，并把它们存放在使用时：

我们自己的测网帐户需要一些 MATIC 不过我们需要从在网络上规定一些货币。Polygon Mumbai 应用自来水龙头可以获得一些不真实的物品 MATIC。这一假 MATIC 必须要在这一检测在网上应用。

大家会在这里获得一些东西 MATIC 货币[5]

让我们升级根项目目录hardhat.config.js文件。

假如我们查询上边的代码精彩片段，大家可以看到从.env在文件中载入了一些键和顶端导入require("dotenv").config()代表着我们应该组装dotenv应用下列指令创建包.env文件：

在.env我们将于文件中加入下列键：

非常容易得到我们自己的私账密匙。看本文[6]。

下面，让我们撰写一个最基本的检测来检测我们将要所使用的最重要的作用。

因此，我们会在这儿 test 在清单中创建一个feed-test.js应用下列代码升级文件：

下面，我们将要应用下列指令来操作检测：

如今我们能够运行指令把我们合同布署到真正意义上的区块链网络里。

我们自己的导出应具体如下。

大家刚启动了合同书。

为了尽快逐渐新项目设定及安装，我们会在 GitHub 上复制新项目[7]，保证大家在project-setup支系上。

下面，在当地启动项目以前，我们会在终端设备中使用以下复制新项目。

或是

在复制及安装新项目以后，我们要有相同内容：

我希望从他们刚开始的智能合同中获取每一个动态性满意率，而无需客户联接她们钱包。这就意味着所有人都可以应用我们自己的应用软件来访问信息内容，而不需要连接她们钱包，只有在他们想创建动态新闻时。

让我们升级下列代码精彩片段utilities文件夹中的getContract.js文件。

在后面的代码精彩片段中，大家获得了我们合同书getSigner函数其中包含一个随机事件钱包地址。主要是因为大家希望每个浏览咱们网址的人都可以阅读新闻，而不需要联接钱夹。

在区块链上创建/储存纪录时，保证以太坊钱包地址的合理传送

当我们将要合同书布署到区块链时，我们还在终端设备上加了标注的合同书详细地址。

让我们返回我们之前相关工作的智能合同新项目，随后导航栏到artifacts/contracts/NewsFeed.json并拷贝全部内容。我们将要应用大家拷贝的utilities文件夹里面的内容升级 newsfeed.json 文件。

我们会在这节component创建一个文件夹FeedList.js应用下列代码精彩片段升级文件。

下面，我们将要导进FeedList组件、toast response，ToastContainer更新下列代码精彩片段HomePage.js文件。

因为区块链上没有显示，我们也没有创建查找全部动态新闻的函数公式，我们要有类似上边标注的具体内容，这是空。

本部份将搭建容许客户在大家的软件上联络她们钱包以创建动态新闻的功效。

让我们升级下列代码精彩片段HomePage.js

下面，我们将要升级它Header.js文件。

点击该Connect your Wallet按键，我们将要得到一个按键MetaMask登陆弹出对话框。

联接结束后，我们将要被跳转返回我们自己的应用软件，以前标注的Connect your wallet按键如今表明Create a Feed如下所示。

我们将要建立一个网页页面，用户可键入一个新的动态新闻关键点并上传至区块链。src清单中创建UploadPage.js并用下列代码精彩片段开展升级。

下面，我们将要升级大家刚应用下列代码精彩片段创建的新窗口App.js文件。

点一下首页中的内容Create a New Feed按键把我们再次定提交网页页面，如图所示。

在键入提交所需要的全部详细资料后，我们能再次递交动态新闻。

我们被跳转首页，但什么也没产生 :(。

我们会在首页上创建一个getFeeds查找全部动态新闻的函数公式。

HomePage.js

让我们等候买卖确定。即时发生必须几秒。

在 components 创建文件夹Feed.js应用下列代码精彩片段升级文件。

下面，我们会在这儿src清单中创建FeedPage.js应用下列代码精彩片段升级文件。

在相关代码段中，大家检索单独动态新闻，并且在动态新闻类型中获得相关信息。

下面，我们将要应用下列代码精彩片段开展升级App.js。

检测我们自己的应用软件

我创建了好几个贴子来检测应用软件，具体如下。

宝贝详情：

社交媒体共享

提交后，当新闻报道出现在了首页处时，大家可能遇到一些延迟时间或常见故障。我们应该等数分钟，随后一切都会趋于稳定；)

本文化艺术大家 Polygon Network 中使用 Reactjs、TailwindCSS、Etherjs、IPFS 和 Solidity 搭建分散 News Feed。

[1] 前面:

[2] 区块链智能合约:

[3] 这里:

[4] Alchemy:

[5] 在这儿得到一些 MATIC 货币:

[6] 文章内容:

[7] 在 GitHub 上复制新项目：