cordova 更改app版本_使用IPFS和Blockstack构建版本控制系统

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

本文由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(用于确定是否打开版本模式)

我们应该做的第一件事是获得注册并登录屏幕渲染在类名为。 “应用程序”的

中，添加一些具有如下表单输入的条件逻辑：

如果页面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调用中看到一个表示加密的对象，我们能够轻松加密数据；这是我用来测试本教程这一部分的文件：

这只是加密我们的版本历史记录，这很重要。在我们解决保存内容的最后部分之前，在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原力区编译，

【IPFS原力区】

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

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

(作者：IPFS原力区，内容来自链得得内容开放平台“得得号”；本文仅代表作者观点，不代表链得得官方立场)