操作指南| 使用IPFS和Blockstack构建版本控制系统

从0到1的指导
你将能够创建web3.0的模块及项目

操作指南| 使用IPFS和Blockstack构建版本控制系统
本文由IPFS原力区收集译制,版权所属原作者
操作指南| 使用IPFS和Blockstack构建版本控制系统
【前言】
版本控制有很多很好的应用途径,处理代码部署,文档编辑和数据库快照等一些直接用途。
通常,版本控制系统是数据库中的另一个部分,但是当你通过不可变数据状语从句: DHT(分布式哈希表)技术的角度来思考时,那么它的作用就会变的更大。所以,今天我们将构建一个具有版本历史记录的笔记应用程序。
这将与其他笔记应用程序不同,因为它只有一个音符,用户可以随时编辑,删除信息或添加信息。但我们将包含各个版本信息,以便他们可以获取他们的历史版本信息。我们将使用 Blockstack和IPFS完成这项工作。
 
【正文】
IPFS 是一种点对点网络,允许根据数据的内容而不是其位置进行分配。Blockstack 是一个分散管理的应用程序平台,允许用户选择存储数据的位置,我们将使用 Blockstack提供的存储中心(免费,不需要配置)。来提供数据。这意味着当数据发生变化时,它由不同的标识符(哈希值)表示,旧版本的哈希仍然存在,不会改变。这对于版本控制系统来说是完美的。我们将通过创建一个新的阵营项目并只安装一个依赖项SimpleID 来构建所有这些。
操作指南| 使用IPFS和Blockstack构建版本控制系统
SimpleID 为分布式网络提供开发工具。简而言之,SimpleID允许开发人员为他们的应用程序添加分散的身份验证和存储,而让无需用户经历生成种子【搭配模式】管理状语从句:这些 12个的相关资料:备份的繁琐过程。
用户可以使用传统的用户名 /密码身份验证流程,同时仍然拥有自己的身份并访问Web 3.0技术。
 
首先,访问 SimpleID并注册一个免费的开发人员帐户验证帐户后,。你将能够创建³³项目并选择要所有游戏在项目中的 Web 3.0的模块让我们快速浏览一下:
  1. 注册开发者帐户
  2. 邮箱验证
  3. 验证帐户后,进入“帐户”页面,你可以在其中创建新项目
  4. 为新项目提供一个名称和URL,你最终可以在其中托管它(如果是基于 HTTPS,这可能是一个假网址)
  5. 保存,然后单击“查看项目”
  6. 复制你的 API密钥和开发人员ID
  7. 转到“模块”页,为你的验证模块选择 Blockstack,为你的存储模块选择 Blockstack和皮纳塔
  8. 单击“保存”
 
现在,准备开始了
关于皮纳塔的简要说明:它们提供 IPFS固定服务,因此SimpleID在后台使用它们将内容添加到IPFS网络并固定所述内容,并确保它始终可用。
让我们建立一个项目; 我的说明将从 MacOS的的角度出发,但在不同系统上的用户应该能够使用类似的命令开始。
首先,打开终端并创建新的阵营项目
npx create-react-app ipfs-blockstack-versioning
 
完成后,切换到目录,然后安装 SimpleID依赖项:
cd ipfs-blockstack-versioning
npm我simpleid-js-sdk
 
在你选择的文本编辑器中打开项目
我们不打算花时间处理复杂的文件夹结构。这是一个非常基本的应用程序,旨在展示 Blockstack和IPFS的强大功能。
考虑到这一点,找到 SRC文件夹并打开App.js. 在该文件的顶部,在导入css语句下面添加以下内容:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

现在导入的 SimpleID包和这个配置对象(来自SimpleID文档),然后就可以开始了。

让我们来研究一下用户界面
正如我所提到的,这将是一个非常简单的应用程序,所以让我们放入编辑器来处理我们的文档。
我们将使用的index.html文件中的脚本标记来完成此操作,而不是通过NPM安装依赖项。你可以使用任何WYSIWYG库,但我将使用的是中等编辑器。你可以在这里找到它。

index.html的文件位于公用文件夹中找到它并在标题标记上方添加:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

你会注意到,我在这里设置了应用程序的标题,因为我们已经在编辑文件了。可随意使用相同名称或创建自己的名称。
现在我们已经添加了样式表和所需要的脚本,让我们转到位于 SRC文件夹中的App.js文件。我们将清除此文件中的所有内容,并从头开始。因此,更新app.js文件如下:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

我已经将函数组件转换为类组件,但是你可以将其作为函数组件执行,只需对处理状态的方式进行一些小的更改。

你可以看到我有四个状态变量,我希望使用:

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

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

版本(这将是我们的历史信息)

selectedVersionContent(用于确定是否显示版本窗格)

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

versionPane(确定是否显示版本窗格)

versionModal(用于确定是否打开版本模式)

我们应该做的第一件事是获得注册并登录屏幕渲染在类名为。 “应用程序”的<DIV>中,添加一些具有如下表单输入的条件逻辑:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

如果页面route状态为“ signup”,并且用户未登录,则应显示signupsheet。如果pageroute状态为“ sign in”,并且用户未登录,则应显示登录表单。否则,我们应该显示应用程序。

现在,让我们把它建立起来

让我们从处理 Blockstack userSession状态开始。这非常简单。在我们的App.js文件的顶部,只需在导入语句下面添加:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

你应该将它添加到 actions.js文件的顶部以及现有的进口语句之下.Blockstack随SimpleID一起安装,因此你不需要再添加依赖项。好的,现在我们将必要的登录和注册表单添加到app.js文件中:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

我们在这里添加了很多内容,但理解起来非常简单。
我们添加了处理注册和登录流程的功能。我们还添加了一个表单来处理每个输入。我们添加了一个状态切换程序,以便登录表单中的用户可以切换到注册表单,反之亦然。我们还在注册表单和登录表单中准备了一个段落部分,用于处理注册或登录过程中可能发生的任何错误。
 
有了所这些,我们可以启动我们的应用程序,看看它的运行情况。从终端运行npm开始。
 
如果确实如此,你会看到一个简陋的注册表。你可以切换到登录表单,也可以切换回来。在本教程中,我们不会涉及太多CSS,但我们已经开始正常运行应用程序。
你可能已经注意到,我添加了一个名为loading的状态变量。我们将在一秒钟内使用它,因为我们实际注册了一个用户并登录。我们将从注册过程开始。同样,我们将使用SimpleID文档。
找到handleSignUp函数并填写如下:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

我们将函数设置为异步的,因为我们需要等待createUserAccount promise才能解决,然后才能执行其他操作。除此之外,我们只是按照文档添加了try / catch。
如果出现错误,将更新错误状态,并将加载状态设置为false。用户应该在屏幕上看到错误消息。如果没有错误,则更新localStorage项目Blockstack,并刷新窗口。
 
在测试注册流程之前,我们应该做的最后一件事是添加加载指示器。这不会有什么特别的,但注册时,指标将取代屏幕上的其他所有内容。让我们更新我们的应用程序代码JSX,如下所示:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

现在让我们来测试一下
请输入用户名、密码和电子邮件,然后单击“注册”。假设成功了,你应该看到在加载屏幕,几秒钟后,用户登录并出现“app content”字样。
但现在,我们尚未处理登录,用户无法注销。让我们首先处理注销,因为它非常简单。在应用程序的“App Content”部分,添加一个调用handleSignOut函数的按钮:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

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

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

尝试一下,用户应该可以注销了。现在我们可以登录了。我希望你能记住用户名和密码。让我们连接handleSignIn函数:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

我们再次使用SimpleID文档登录,大部分代码都是从注册函数中重复使用的。我们不需要登录电子邮件,我们必须创建一个params对象,除此之外,它基本上是相同的。有了这个,让我们试一试。
 
你应该已经看到了加载指示符,然后你的用户处于登录状态。当然,当用户登录时,我们现在只有一个注销按钮。让我们通过在我们的媒体样式编辑器中删除来更改它。
 
在App.js中的构造函数下方以及其他函数之上,让我们添加一个componentDidMount方法:

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

这是使用window来获取我们添加到index.html文件中的mediumeditor脚本。为了让我们看到任何东西,我们需要编辑JSX的App Contents部分。因此,在你放置“注销”按钮的区域中,让我们在下面添加一些内容来处理编辑器:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

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

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

我们可以稍后更改,但至少可以使应用程序美观。你应该看到这样的东西:
 
不是最漂亮的,但现在可以了。我们需要能够处理编辑器的更改,所以在开始保存数据之前,我们先从这里开始。在我们的componentDidMount生命周期事件中,让我们稍微改变一下:

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

如果你还记得,我们创建了一个名为content的状态变量来保存我们的笔记内容。我们在编辑器中的每个更改上设置该状态。
这意味着当我们准备保存笔记时,我们可以从内容状态中获取数据。让我们通过做两件事来看看它的外观。我们将添加一个save按钮和一个saveContent函数。
在“注销”按钮所在的位置下面添加一个“保存”按钮:

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

然后,使用所有其他函数创建savecontent函数:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

我们将在一分钟内使用userSession状态,所以我把它扔在那里。但有了这个,你应该能够打开开发者控制台,输入编辑器,然后点击“save”。你会看到html内容。
 
这意味着你已准备好保存内容并加载该内容。不过,让我们先把这件事做完。我们需要将内容保存到Blockstack的存储系统和IPFS。Blockstack的存储系统每次都是覆盖函数,但对于IPFS,我们将把新版本存储到网络中。我们还需要能够获取IPFS哈希值,因此我们也应该将其存储到Blockstack中。
听起来我觉得我们在Blockstack上有两个文件存储:内容和版本(哈希)。但我们必须首先保存到IPFS,以便我们得到哈希结果。让我们开始在saveContent函数中编写它。

操作指南| 使用IPFS和Blockstack构建版本控制系统

我们在函数中添加了async关键字,并使用了simpleid文档提供的将内容发布到ipfs所需的参数。在某些情况下,开发人员需要向Pinata查询他们之前发布到IPFS的内容。这就是id字段的全部内容。在本例中,我们将使用blockstack来管理所有的散列,因此我们并不真正关心这个标识符是什么,除了它是唯一的(因此,date.now())。
 
让我们在控制台打开的情况下测试一下,然后再继续。向编辑器中添加一些内容,然后单击“保存”。如果一切顺利,你应该在控制台中看到类似的内容:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

对象中的正文密钥是IPFS哈希。我们想要使用它并将其存储为Blockstack的版本。接下来我们来解决这个问题。

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

在尝试将哈希保存到BuffStash之前,我添加了一个检查,以确保对IPFS的内容固定成功。我们需要知道版本的时间,所以我们正在构建一个带有时间戳和哈希本身的newVersion对象,然后我们将它推入版本数组中。然后我们将其保存到Blockstack,在那里发生了一些很酷的事情。
 
你可以在putFile调用中看到一个表示加密的对象,我们能够轻松加密数据;这是我用来测试本教程这一部分的文件:
 
https://gaia.blockstack.org/hub/13ygSWdUeU4gPHbqUzEBvmq1LP7TKNnbtx/version_history.json
 
这只是加密我们的版本历史记录,这很重要。在我们解决保存内容的最后部分之前,在saveContent函数中,关于contentToPin变量,添加以下内容:

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

我们还需要从public函数导入getprivatekeyfrom。因此,在App.js文件的顶部与其他import语句一起添加:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

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

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

我们在设置并保存版本历史记录之后再开始。因此,在savedVersions行之后,添加以下内容:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

下面是我在控制台日志中得到的信息:
https://gaia.blockstack.org/hub/13ygSWdUeU4gPHbqUzEBvmq1LP7TKNnbtx/note.json
 
回顾一下,我们对内容进行加密,将其存储在ipfs上,使用返回的IPFS哈希在versions数组中创建新条目,将其保存到Blockstack,然后将当前版本的note内容保存到Blockstack。
 
我们也需要能够获取内容;最初,我们需要在应用程序加载时获取两个文件:当前内容(来自note.json)和版本文件(来自version_history.json)。我们应该在应用加载后立即执行此操作,因此需要将其添加到componentDidMount生命周期事件中。
像这样更新整个事件:

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

保存并返回到你的应用程序。当它重新加载时,你保存的内容现在将显示在编辑器中。到了这步。我们还有几件事要做。我们需要加载版本历史记录,接下来让我们这样做。
 
在decryptContent变量的正下方,添加以下内容:

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

现在,我们可以开始享受历史版本功能了

让我们先确定我们的版本历史。在JSX的App Contents部分中,在编辑器下方添加以下内容:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

我们正在创建一个部分来保存版本历史记录。

你会注意到className是以状态变量versionPane为条件的。这是因为我们希望能够更改该变量并打开版本历史记录,而不是一直打开它。让我们在退出时添加一个按钮up并保存一个名为Version History的按钮。

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

让我们再次更新CSS来处理窗格的显示:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

来,测试一下
你应至少保存一个版本,因此请单击“Version History”按钮以切换窗格的打开和关闭状态。它很丑,但很管用。
 
我们需要做的最后一件事是弹出一个模式来显示历史版本的内容。让我们通过添加一个名为handleVersionModal的函数来解决这个问题。

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

我们使用JavaScript本机Fetch API来处理调用IPFS网关,以获取特定于我们在版本窗格中选择的版本的内容。该内容已加密,需要正确解析和解密才能访问。
但是,如果你控制台记录decryptedContent变量,你将看到正在获取相关版本的内容。我们将该内容设置为selectedVersionContent状态变量并将versionModal设置为true。
 
让我们将这一切用于在屏幕上呈现过去的版本。在你之前编写的版本页面JSX下面,添加以下内容:

操作指南| 使用IPFS和Blockstack构建版本控制系统

 

现在,我们需要设计一些可管理的样式。在App.css中,添加以下内容:

 

操作指南| 使用IPFS和Blockstack构建版本控制系统

现在试试吧
打开“版本历史”窗格,单击过去的版本,应该弹出一个模式,其中包含该版本的内容供你查看。
 
你现在可以拥有note-taking记录系统,同时通过版本历史保留对所有过去迭代控制。最重要的是,每个版本的笔记都由你控制的私钥加密。
—end—
本文由IPFS原力区编译,原文链接:
https://hackernoon.com/tutorial-build-a-versioning-system-on-ipfs-77lvx2geh

引谈 | 数据存储发展史

【IPFS原力区】
价值观:价值 共建 共享 荣耀
 
总部位于上海,聚集基于分布式网络&存储的众多技术大咖和爱好者,深耕基于 IPFS 的商业生态建设和社区发展。
 
每周二举办“分布式存储网络”主题沙龙,聚集了众多技术大咖和 IPFS 爱好者,通过持续输出全面、精细、优质的 IPFS 咨询和技术支持,将生态中的爱好者转化为 IPFS 支持者和参与者,共建 IPFS 生态的健康发展。

引谈 | 数据存储发展史

本文来自https://mp.weixin.qq.com/s/8MqXaoLYBY0LV7npN7HQvg,经授权后发布,本文观点不代表IPFSER立场,转载请联系原作者。

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:ipfsforce@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code