首页 欧洲联赛正文

金灿荣,技能解码 | 运用IPFS和Blockstack构建版别控制系统,母仪天下

金灿荣,技能解码 | 运用IPFS和Blockstack构建版别操控体系,母仪天下

本文由IPFS原力区搜集译制,版权所属原作者

【前语】

版别操控有许多很好的运用处径,处理代码布置,文档修改和数据库快照等一些直接用处。

一般,版别操控体系是数据库中的另一个部分,可是当你经过不行变数据状语从句: DHT(分布式哈希表)技能的视点来考虑时,那么它的效果就会变的更大。所以,今日咱们将构建一个具有版别前史记载的笔记运用程序。

这将与其他笔记运用程序不同,由于它只要一个音符,用户能够随时修改,删去信息或增加信息。但咱们将包括各个版别信息,以便他们能够获取他们的前史版别信息。咱们将运用 Blockstack和IPFS完结这项作业。

【正文】

IPFS 是一种点对点网络,答应依据数据的内容而不是其方位进行分配。Blockstack 是一个涣散办理的运用程序渠道,答运用户挑选存储数据的方位,咱们将运用 Blockstack供给的存储中心(免费,不需求装备)。来供给数据。这意味着当数据发生变化时,它由不同的标识符(哈希值)表明,旧版别的哈希依然存在,不会改动。这关于版别操控体系来说是完美的。咱们将经过创立一个新的阵营项目并只装置一个依靠项SimpleI寻尸秘录D 来构建一切这些。

15zj512
金灿荣,技能解码 | 运用IPFS和Blockstack构建版别操控体系,母仪天下

SimpleID 为分布式网络供给开发工具。简而言之,SimpleID答应开发人员为他们的运用程序增加涣散的身份验证和存储,而让无需用户阅历生成种子【调配形式】办理状语从句:这些 12个的相关材料:备份的繁琐进程。

用户能够运用传统的用户名 /暗码身份验证流程,一同依然具有自己的身份并拜访Web 3.0技能。

首要,拜访 SimpleID并注册一个免费的开发人员帐户验证帐户后,。你将能够创立项目并挑选要一切游戏在项目中的 Web 3.0的模块让咱们快速阅读一下:

  1. 注册开发者帐户
  2. SpyNote
  3. 邮箱验证
  4. 验证帐户后,进入“帐户”页面,你能够在其间创立新项目
  5. 为新项目供给一个称号和URL,你终究能够在其间托管它(假如是基陈诺仪金灿荣,技能解码 | 运用IPFS和Blockstack构建版别操控体系,母仪天下于 HTTPS,这或许是一个假网址)
  6. 保存,然后单击“检查项目”
  7. 仿制你的 API密钥和开发人员ID
  8. 转到“模块”页,为你的验证模块挑选 Blockstack,为你的存储模块挑选 Blockstack和皮纳塔
  9. 单击“保存”

现在,预备开端了

关于皮纳塔的扼要阐明:它们供给 IPFS固定服务,因而Simp金灿荣,技能解码 | 运用IPFS和Blockstack构建版别操控体系,母仪天下leID在后台运用它们将内容增加到IPFS网络并固定所述内容,并保证它一向可用。

让咱们树立一个项目; 我的阐明将从 MacOS的的视点动身,但在不同体系上的用户应该能够运用相似的指令开端。

首要,翻开终端并创立新的阵营项目

npx create-react-app ipfs-blockstack-versioning

完结后,切换到目录,然后装置 SimpleID依靠项:

cd ipfs-blockstack-versioning

npm我simpleid-js-sdk

在你挑选的文本修改器中翻开项目

咱们不计划花时刻处理杂乱的文件夹结构。这是一个十分根本的运用干没程序,旨在展现 Blockstack和IPFS的强壮功用。

考虑到这一点,找到 SRC文件夹并翻开App.js. 在该文件的顶部,在导入css晓入寒铜觉上半句句子下面增加以下内容:

现在导入的 SimpleID包和这个装备目标(来自SimpleID文档),然后就能够开端了。

让咱们来研究一下漫h用户界面

正如我所说到的,这将是一个十分简略的运用程序,所以让咱们放入修改器来处理咱们的文档。

咱们将运用的index.html文件中的脚本符号来完结此操作,而不是经过NPM装置依靠项。你能够运用任何WYSIWYG库,但我将运用的是中等修改器。你能够在这儿找到它。

为什么要尽量不去助念

index.html的文件坐落共用文件夹中找到它并在标题符号上方增加:

你会注意到,我在这儿设置了运用程序的标题,由于咱们现已在修改文件了。可随意运用相同称号或创立自己的称号。

现在咱们现已增加了款式表和所需求的脚本,让咱们转到坐落 SRC文件夹中的App.js文件。咱们将铲除此文件中的一切内容,并从头开端。因而,更新app.js文件如下:

我现已将函数组件转换为类组件,可是你能够将其作为函数组件履行,只需对处理状况的办法进行一些小的更改。

你能够看到我有四个状况变量,我期望运用:

userSession(将从咱们的Blockstack身份验证中填充)

内容(实践的流媒体注释)

版别(这将是咱们的前史信息)

selectedVersionContent(用于确认是否显现版别窗格)

pageRoute(用于处理屏幕上显现的内容)

versionPane(确认是否显现版别窗格)

versionModal(用于确认是否翻开版别形式)

咱们应该做的榜首件事是取得注册并登录屏幕渲染在类名为。 “运用程序”李宏桦的

中,增加一些具有如下表单输入的条件金灿荣,技能解码 | 运用IPFS和Blockstack构建版别操控体系,母仪天下逻辑:

假如页面route状况为“ signup”,而且用户未登录,则应显现signupsheet。假如pageroute状况为“ sign in”,而且用户未登录,则应显现登录表单。不然,咱们应该显现运用程序。

现在,让咱们把它树立起来

让咱们从处理 Blockstack userSession状况开端。这十分简略。在咱们的App.js文件的顶部,只需在导入句子下面增加:

你应该将它增加到 actions.js文件的顶部以及现有的进口句子之下.Blockstack随SimpleID一同装置,因而你不需求再增加依靠项。好的金灿荣,技能解码 | 运用IPFS和Blockstack构建版别操控体系,母仪天下,现在咱们将必要的登录和注册表单增加到app.js文件中:

咱们在这儿增加了许多内容,但了解起来十分简略。

咱们增加了处理注册和登录流程的功用。咱们还增加了一个表单来处理每个输入。咱们增加了一个状况切换程序,以便登录表单中的用户能够切换到注册表单,反之亦然。咱们还在注册表单和登录表单中预备了一个阶段部分,用于处理注册或登录进程中或许发生的任何过错。

有了所这些,咱们能够发动咱们的运用程序,看看它的运转状况。从终端运转npm开端。

假如的确如此,你会看到一个粗陋的注册表。你能够切换到登录表单,也能够切换回来。在本教程中,咱们不会触及太多CSS,但咱们现已开端正常运转运用程序。

你或许现已注意到,我增加了一个名为loading的状况变量。咱们将在一秒钟内运用它,由于咱们实践注册了一个用户并登录。咱们将从注册进程开端。相同,咱们将运用SimpleID文档。

找到handleSignUp函数并填写如下:

咱们将函数设置为异步的,由于咱们需求等候createUserAccount promise才干处理,然后才干履行其他操作。除此之外,咱们仅仅依照文档增加了try / catch。

假如出现过错,将更新过错状况,并将加载状况设置为false。用户应该在屏幕上看到过错音讯。假如没有过错,则更新localStorage项目Blockstack,并改写窗口。

在测验注册流程之前,咱们应该做的最终一件事是增加加载指示器。这不会有什么特别的,但注册时,目标将替代屏幕上的其他一切内容。让咱们更新咱们的运用程序代码JSX,如下所示:

现在让咱们来测验一下

请输入用户名、暗码和电子邮件,然后单击“注册”。假定成功了,你应该看到在加载屏幕,几秒钟后,用户登录并出现“app content”字样。

但现在,咱们没有处理登录,用户无法刊出。让咱们首要处理刊出,由于它十分简略。在运用程序的“App Content”部分,增加一个调用handleSignOut函数的按钮:

然后保证将该函数与其他函数相加:

测验一下,用户应该能够刊出了。现在咱们能够登录了。我期望你能记住用户名和暗码。让咱们衔接handleSignIn函数:

咱们再次运用SimpleID文档登录,大部分代码都是从注册函数中重复运用的。咱们不需求登录电子邮件,咱们有必要创立一个params目标,除此之外,它根本上是相同的。有了这个,让咱们试一试。

你应该现已看到了加载指示符,然后你的用户处于登录状况。当然,当用户登录时,咱们现在只要一个刊出按钮。让咱们经过在咱们的媒体款式修改器中删去来更改它。

在App.js中的结构函数下方以及其他函数之上,让咱们增加一个componentDidMount办法:

这是运用window来获取咱们增加到index.html文件中的mediumeditor脚本。为了让咱们看到任何东西,咱们需求修改JSX的App Contents部分。因而,在你放置“刊出”按钮的区域中,让咱们在下面增加一些内容来处理修改器:

假如没有任何CSS款式,这太难看了。所以,让咱们来修一下。在相同的文件夹App.css文件中,增加以下内容:

咱们能够稍后更改,但至少能够使运用程序美丽。你应该看到这样的东西:

不是最美丽的,但现在能够了。咱们需求能够处理修改器的更改,所以在开端保存数据之前,咱们先从这儿开端。在咱们的componentDidMount生命周期工作中,让咱们略微改动一下:

假如你还记得,咱们创立了一个名为content的状况变量来保存咱们的笔记内容。咱们在修改器中的每个更改上设置该状况。

这意味着当咱们预备保存笔记时,咱们能够从内容状况中获取数据。让咱们经过做两件事来看看它的外观。咱们将增加一个save按钮和一个saveContent函数。

在“刊出”按钮地点的方位下面增加一个“保存”按钮:

然后,运用一切其他函数创立savecontent函数:

咱们将在一分钟内运用userSession状况,所以我把它扔在那里。但有了这个,你应该能够翻开开发者操控台,输入修改器,然后点击“save”。你会看到html内容。

这意味着你已预备好保存内容并加载该内容。不过,让咱们先把这件事做完。咱们需求将内容保存到Blockstack的存储体系和IPFS。Blockstack的存储体系每次都是掩盖函数,但关于IPFS,咱们将把新版别存储到网络中。咱们还需求能够获取IPFS哈希值,因而咱们也应该将其存储到Blockstack中。

听起来我觉得咱们在Blockstack上有两个文件存储:内容和版别(哈希)。但咱们有必要首要保存到IPFS,以便咱们得到哈希成果。让咱们开端在saveContent函数同享老婆中编写它。

咱们在函数中增加了async关键字,并运用了simpleid文档供给的将内民国美厨娘容发布到ipfs所需的参数。在某些状况下,开发人员需求向Pinata查询他们之前发布到IPFS的内容。这便是id字段的全部内容。在本例中,咱们将运用blockstack来办理一切的散列,因而咱们并不真实关怀这个标识符是什么,除了它是仅有的(因而,date.now)。

让咱们在操控台翻开的状况下测验一下,然后再持续。向修改器中增加一些内容,然后单击“保存”。假如一切顺利,你应该在操控台中看到相似的内容:

目标中的正文密钥是IPFS哈希。咱们想要运用它并将其存储为Blockstack的版别。接下来咱们来处理这个问题。

在测验将哈希保存到BuffStash之前,我增加了一个检查,以保证对IPFS的内容固定成功。咱们需求知道版别的时刻,所以咱们正在构建一个带有时刻戳和哈希自身的newVersion目标,漏内裤然后咱们将它推入版别数组中。然后咱们将其保存到Blockstack,在那里发生了一些很帅的工作。

你能够在putFile调用中看到一个表明加密的目标,咱们能够轻松加密数据;这是我用来测验本教程这一部分的文件:

https://gaia.blockstack.org/hub/13ygSWdUeU4gPHbqUzEBvmq1LP7TKNnbtx/version_history.json

这仅仅加密咱们的版别前史记载,这很重要。在咱们处理保存内容的最终部分之前,在saveContent函数中,关于contentToPin变量,增加以下内容:

咱们还刘明豹需求从public函数导入getprivatekeyfrom。因而,在App.js文件的顶部与其他import句子一同增加:

并将contentToPin变量更新为如下所示:

咱们在设置并保存版别前史记载之后再开端。因而,在save11831200dVersions行之后,增加以下内容:

下面是我在操控台日志中得到的信息:https://gaia.blockstack.org/hub/13ygSWdUeU4gPHbqUzEBvmq1LP7TKNnbtx/note.json 回忆一下,咱们对内容进行加密,将其存储在ipfs上,运用回来的IPFS哈希在versions数组中创立新条目,将其保存到Blockstack,然后将当时版别的note内容保存到Blockstack。 周芳芳霸座咱们也需求能够获取内容;开端,咱们需求在运用程序加载时获取两个文件:当时内容(来自note.json)和版别文件(来自version_h金灿荣,技能解码 | 运用IPFS和Blockstack构建版别操控体系,母仪天下istory.json)。咱们应该在运用加载后当即履行此操作,因而需求将其增加到componentDidMount生命周期工作中。像这样更新整个工作:

保存并回来到你的运用程序。当它从头加载时,你保存的内容现在将显现在修改器中。到了这步。咱们还有几件事要做。咱们需求加载版别前史记载,接下来让咱们这样做。 在decryptContent变量的正下方,增加以下内容:

现在,咱们能够开端享用前史版别功用了

让咱们先确认咱们的版别前史。在JSX的App Contents部分中,在修改器下方增加以下内容:

咱们正在创立一个部分来保存版别前史记载。

你会注意到className是以状况变量versionPane为条件的。这是由于咱们期望能够更改该变量并翻开版别前史记载,而不是一向翻开它。让咱们在退出时增加一个按钮up并保存一个名为Version History的按钮。

让咱们再次更新CSS来处理窗格的显现:

来,测验一下

你应至少保存一个版别,因而请单击“Version History”按钮以切换窗格的翻开和封闭状况。它很丑,但很管用。

咱们需求做的最终一件事是弹出一个形式来显现前史版别的内容。让咱们经过增加一个名为handleVersionModal的函数来处理这个问题。

咱们运用Java本机Fetch API来处理调用IPFS网关,以获取特定于咱们在版别窗格中挑选的版别的内容。该内容已加密,需求正确解析和解密才干拜访。

可是,假如你操控台记载decryptedContent变量,你将看到正在获取相关版别的内容。咱们将该内容设置为selectedVersionContent状况变量并将versionModal设置为true。

让咱们将这一切用于在屏幕上出现曩昔性竞赛的版别。在你之前编写的版别页面JSX下面,增加以下内容:

现在,咱们需求规划一些可办理的款式。在App.css中,增加以下内容:

现在试试吧

翻开“版别前史”窗格,单击曩昔的版别,应该弹出一个形式,其间包括该版别的内容供你检查。

你现在能够具有note-taking记载体系,一同经过版别前史保存对一切曩昔迭代操控。最重要的是,每个版别的笔记都由你操控的私钥加密。

—end—

本文由IPFS原力区编译,

【IPFS原力区】

价值观:价值 共建 同享 荣耀

总部坐落上海,集合根据分布式网络&存储的很多技能大咖和爱好者,深耕根据 IPFS的商业生态建设和社区发展。

(作者:IPFS原力区,内容来自链得得内容敞开渠道“得得号”;本文仅代表作者观念,不代表链得得官方态度)

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。