使用Dappy构建出色的去中心化Web应用程序

此仓库是一个教程，可帮助您使用Dappy构建出色的去中心化Web应用程序????。

在本教程中，我们将构建一个简单的Web应用程序。它将包含一个可以打开或关闭的交互程序。

开/关动态值以及所有文件将存储在区块链上。????????????

Dappy可以处理两种内容，即IP应用程序和dapps，我们将构建一个dapp，在此处了解有关dapp的更多信息。

请下载并安装Dappy 0.2.8+。dappy.tech/下载

注意：dappy-cli 0.3.7和Dappy beta版本0.2.8的最新信息

开始吧

git clone https://github.com/fabcotech/dappy-dapp-tutorial.git cd dappy-dapp-tutorial npm i

????必须首先检查dappy.config.json中的选项，添加privateKey（secp256k1密钥），现在您可以忽略registryUri和manifest.fileId。默认情况下保留主机和端口，observer.testnet.rchain.coop和node2.testnet.rchain-dev.tk是RChain测试node2.testnet.rchain-dev.tk的节点。您可以更改这些值以连接到本地节点或另一个节点，您必须知道验证者节点和只读（read-only node）节点。查看dappy-cli文档以获取更深入的解释。

本教程将分为n个步骤，每一步都将邀请您增加jsPath中的jsPath值（步骤1的script_2，步骤2的script_2等）。

dappy.config.json中的默认值是RChain测试网的。

请配置Dappy浏览器以连接到正确的网络。请参阅一般文档。

第1步

在第一步中，我们将简单地将静态Web应用程序推入区块链。我们的Web应用程序由script_1.jsstyle.css和index.html。index.html显示“已加载Dapp！”因为我们还不知道interrupter是开还是关。

npm run dappy:push

您应该只看到“已加载Dapp！”文本????。

每次运行此脚本时，它会将您的应用程序捆绑到一个html文件中，将其编码为base64，还添加一个签名，以便客户端可以验证该文件。链上将发送的文件是.dpy文件，您可以在日志中看到已创建.dpy，权重约为0.8ko。

如果在推送时遇到一些错误，请确保dappy.config.json中readOnlyHost和dappy.config.json实例正在运行（:40403/statuspath告诉您:40403/status的状态）。另外，请检查您的私钥是否有足够的资金，并且phlo限制不能超过此上限。

查找行address :log，此值是Web应用程序的区块链地址。现在，您可以将其粘贴到Dappy浏览器的搜索栏中，然后按Enter。您应该在浏览器中加载该Web应用程序，并带有DA标签，告诉您它是一个去中心化应用程序（dapp）。您可以单击DA以获得网络信息。

如果在dappy浏览器中加载时遇到一些错误，还请检查Dappy中的网络/解析器设置，并确保已连接到足够的节点。如果只有一个端点，请将解析器设置设置为1/100％。

任何问题：请通过https://discord.gg/8Cu5UFV与我们分享。

恭喜，您刚刚使用Dappy部署了第一个完整的dapp。????????

您可以在设置中激活“开发”模式，以便在加载应用程序时弹出chrome devtool。

第2步

Dappy CLIdappy:push使用文件模块来处理dappy:push链上的文件。

上传分为两个步骤：

REGISTRY_URI是文件模块的地址，然后该文件模块中存储的每个文件都有唯一的文件ID。如果您未触摸dappy.config.json中的dappy.config.json，则值为“ index”。

npm run dappy:push

如果您已激活“开发”模式，则应在dappy应用程序的控制台中记录以下内容：

registryUri is xxx" currentNonceValue is xxx"

第一个js文件全部为空。看一下文件script_2.js，其中包含REGISTRY_URI表达式，该表达式将由dappy CLI替换。dappyRChain.fetch("dappy://rchain/betanetwork/aaa")执行时将获得文件模块的描述，该模块包含多个键：

我们将在后续步骤中使用这些值。

注意：dappyRChain.fetch("dappy://rchain/betanetwork/REGISTRY_URI")与dappyRChain.fetch("dappy://rchain/betanetwork/REGSTRY_URI.FILE_ID")，第一个获取对文件模块，第二个获取该文件模块的index文件。

index文件ID是dapp的存储位置，我们将创建一个light文件来存储开/关值。

多重请求：执行dappyRChain.fetch，用户定义的网络设置很重要，您无法对其进行控制。在您的级别（Web应用程序开发人员），它只是成功还是失败。例如，如果beta网络上的dappy设置为2/100％。每次执行dappyRChain.fetch调用时，都会查询两个节点（b1.dappy.tech和b2.dappy.tech），并且Dappy在将结果传送到Web应用程序之前会检查两个响应是否相同。

第三步

检查script_3.js文件，我们基本上将部署相同的东西，但是还要执行checkLight函数，该函数执行dappyRChain.fetch来获取开/关值，然后更改主体的颜色。

每5秒调用一次checkLight函数。它将通过dappy多请求机制。当用户的网络约束得到满足时（例如，如果他将设置设置为8（连接到8个节点））/ 100％，该值将在UI中更新。当所有8个节点都同意“文件”值时，该值将在您的Web应用程序中更新，在本例中，文件是可以打开或关闭的简单字符串。

npm run dappy:push

因此，现在您应该让体内的文字熄灭。这意味着文件.light不存在或已关闭。

步骤4

dappyRChain.fetch函数允许您从dappyRChain.fetch链读取数据，现在我们应该如何在链上写入/设置一些值？Dappy还公开了dappyRChain.transaction函数，允许您部署任何任意的rholang代码，并要求用户对其进行签名（他可以拒绝或接受）。

因此，script_4.js只需侦听主体document.body.addEventListener('click'上的document.body.addEventListener('click'，然后部署RChain事务以更新通过registryUri注册表公开的私有通道上的值（如果需要，请参见rholang文档了解注册表和渠道参考的工作方式）。

"signature": "SIGN"很重要，值SIGN将替换为我们发送给Dappy浏览器的字符串currentNonceValue的签名。我们无法在JS中执行此操作，因为我们无权操作私钥，dappy会为我们做到这一点。

该签名是文件模块验证我们所必需的（rholang），您最终可以部署不检查签名的文件模块的另一个版本，任何人都可以切换指示灯????????。

npm run dappy:push

现在，只需单击主体，用正确的值填充输入，然后稍等片刻（在当前的测试网上可能要几分钟），主体的颜色应该会改变。

您可以停止该标签，或重新加载它。

本教程已结束。

您可以与连接到同一Dappy网络的任何人共享区块链地址。

该架构不需要任何服务器或第三方服务，它严格依赖于区块链平台和Dappy浏览器中引用的Dappy网络（Dappy网络是RChain区块链平台的子集）。

更进一步

其他功能可用：

阅读https://fabco.gitbook.io/dappy/

本文来源：RChain
原文标题：使用Dappy构建出色的去中心化Web应用程序

—-

编译者/作者：RChain

玩币族申明：玩币族作为开放的资讯翻译/分享平台，所提供的所有资讯仅代表作者个人观点，与玩币族平台立场无关，且不构成任何投资理财建议。文章版权归原作者所有。