请选择 进入手机版 | 继续访问电脑版
开启辅助访问
链路首页链路财经目前收录 币种 : 4908 交易所 : 310钱包 : 17 24H 交易量 : $27,276,101,256 总市值 : $244,704,337,537
2019
09/26
13:59
分享
评论
  • 本文由IPFS原力区收集译制,版权所属原作者

    【前言】

    版本控制有很多很好的应用途径,处理代码部署,文档编辑和数据库快照等一些直接用途。

    通常,版本控制系统是数据库中的另一个部分,但是当你通过不可变数据状语从句: DHT(分布式哈希表)技术的角度来思考时,那么它的作用就会变的更大。所以,今天我们将构建一个具有版本历史记录的笔记应用程序。

    这将与其他笔记应用程序不同,因为它只有一个音符,用户可以随时编辑,删除信息或添加信息。但我们将包含各个版本信息,以便他们可以获取他们的历史版本信息。我们将使用 Blockstack和IPFS完成这项工作。

    【正文】

    IPFS 是一种点对点网络,允许根据数据的内容而不是其位置进行分配。Blockstack 是一个分散管理的应用程序平台,允许用户选择存储数据的位置,我们将使用 Blockstack提供的存储中心(免费,不需要配置)。来提供数据。这意味着当数据发生变化时,它由不同的标识符(哈希值)表示,旧版本的哈希仍然存在,不会改变。这对于版本控制系统来说是完美的。我们将通过创建一个新的阵营项目并只安装一个依赖项SimpleID 来构建所有这些。

    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语句下面添加以下内容: 

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

    让我们来研究一下用户界面

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

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

     

     

    你会注意到,我在这里设置了应用程序的标题,因为我们已经在编辑文件了。可随意使用相同名称或创建自己的名称。

    现在我们已经添加了样式表和所需要的脚本,让我们转到位于 SRC文件夹中的App.js文件。我们将清除此文件中的所有内容,并从头开始。因此,更新app.js文件如下:

     

     

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

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

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

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

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

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

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

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

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

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

     

     

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

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

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

     

     

    你应该将它添加到 actions.js文件的顶部以及现有的进口语句之下.Blockstack随SimpleID一起安装,因此你不需要再添加依赖项。好的,现在我们将必要的登录和注册表单添加到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变量更新为如下所示:

     

     

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

     

     

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

     

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

     

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

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

     

     

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

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

     

     

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

     

    来,测试一下

    你应至少保存一个版本,因此请单击“Version History”按钮以切换窗格的打开和关闭状态。它很丑,但很管用。 

    我们需要做的最后一件事是弹出一个模式来显示历史版本的内容。让我们通过添加一个名为handleVersionModal的函数来解决这个问题。

     

     

    我们使用JavaScript本机Fetch API来处理调用IPFS网关,以获取特定于我们在版本窗格中选择的版本的内容。该内容已加密,需要正确解析和解密才能访问。

    但是,如果你控制台记录decryptedContent变量,你将看到正在获取相关版本的内容。我们将该内容设置为selectedVersionContent状态变量并将versionModal设置为true。 

    让我们将这一切用于在屏幕上呈现过去的版本。在你之前编写的版本页面JSX下面,添加以下内容:

     

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

     

    现在试试吧

    打开“版本历史”窗格,单击过去的版本,应该弹出一个模式,其中包含该版本的内容供你查看。 

    你现在可以拥有note-taking记录系统,同时通过版本历史保留对所有过去迭代控制。最重要的是,每个版本的笔记都由你控制的私钥加密。

    —end—

    本文由IPFS原力区编译,

    原文链接:https://hackernoon.com/tutorial-build-a-versioning-system-on-ipfs-77lvx2geh

    【IPFS原力区】

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

    总部位于上海,聚集基于分布式网络&存储的众多技术大咖和爱好者,深耕基于 IPFS的商业生态建设和社区发展。

    每周二举办“分布式存储网络”主题沙龙,聚集了众多技术大咖和 IPFS 爱好者,通过持续输出全面、精细、优质的IPFS咨询和技术支持,将生态中的爱好者转化为IPFS支持者和参与者,共建IPFS生态的健康发展。

主题帖 540 关注 0 粉丝 0
情感指数

链路大数据分析置信度 93.62 %

TA的主题帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表