资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/如何在blockstack上写一个区块链“微博”程序？

如何在blockstack上写一个区块链“微博”程序？

I_Am / 959人阅读

摘要：工具教程在本教程中，我们将使用存储系统构建一个区块链微博应用程序，从而使用户提交的文字和图片没有发布到中心服务器中，而是在自己的本地电脑。

Blockstack.js 工具教程

在本教程中，我们将使用Gaia存储系统构建一个区块链微博应用程序，从而使用户提交的文字和图片没有发布到中心服务器中，而是在自己的本地电脑。
此应用程序将是一个完全分散且无需服务器的access . js应用程序。标识和存储服务将由blockstack提供，

应用程序将能够执行以下操作:

使用blockstack验证用户

用户发布类似传统微博（微信朋友圈）样式的新状态

在用户配置文件中显示状态

查找其他用户并查看其配置文件和状态

我们将使用以下工具:

用于管理依赖关系和脚本的NPM

yo为块堆栈反应应用程序生成样板文件

用于验证用户和访问Gaia存储的blockstack

对于经验丰富的blockstack开发人员:

添加publish _ data作用域以登录请求

使用getFile ( " filename . JSON "，{username: " username . id "，decrypt: false } )从其他用户读取文件。

使用lookupProfile ( "username. id " )查找用户配置文件

如前所述使用putFile ( " filename . JSON "，file，options )，其中选项设置为{ encrypt : false }，以便禁用加密，其他人可以读取您的文件。

安装与生成

首先，安装Yeoman以及blockstack应用程序生成器:

npm install -g yo generator-blockstack

接下来，为我们的应用程序创建一个目录，取个新的名字Publik :

mkdir publik && cd publik

然后，使用blockstack应用程序生成器生成一个简单的blockstack应用程序:

yo blockstack:react

响应提示后，应用程序生成器将创建所有应用程序文件，然后安装所有依赖项。

要在本地运行应用程序:

npm start

并将浏览器打开到http://localhost : 8080。现在您应该看到一个简单的react应用程序，您可以使用blockstack ID登录。

多用户层数据存储

在多用户层数据存储中，存储在Gaia上的用户文件通过用户配置文件中的apps属性对其他用户可见。使用多用户层数据存储的每个应用程序都必须将其自身添加到用户的配置文件. JSON文件中。在身份验证期间请求publish _ data作用域时，blockstack浏览器将自动处理此部分。

因此，我们需要做的第一件事是修改身份验证请求以包括publish _ data范围。
打开src/components/App.jsx并找到下面的方法:

handleSignIn(e) {
  e.preventDefault();
  redirectToSignIn();
}

将方法修改为:

handleSignIn(e) {
  e.preventDefault();
  const origin = window.location.origin
  redirectToSignIn(origin, origin + "/manifest.json", ["store_write", "publish_data"])
}

请注意，默认情况下，身份验证请求包括启用存储的store _ write范围。
如果您想注销并再次登录，程序将为提示用户身份验证的请求，你将会允许该程序发布你本地所存储的文字或图片。

发布状态：

在此步骤中，我们将添加允许发布和显示“状态”的功能。
让我们打开src / components / profile . jsx，然后从blockstack. js中导入我们将使用的几个方法。这些方法是putFile ( )、getFile ( )和lookupProfile ( )。将它们添加到文件顶部附近blockstack的import语句中:

import {
  isSignInPending,
  loadUserData,
  Person,
  getFile,
  putFile,
  lookupProfile
} from "blockstack";

然后，我们需要在构造函数( )的初始状态中添加一些属性。构造函数应如下所示:

constructor(props) {
  super(props);

  this.state = {
    person: {
      name() {
        return "Anonymous";
      },
      avatarUrl() {
        return avatarFallbackImage;
      },
    },
    username: "",
    newStatus: "",
    statuses: [],
    statusIndex: 0,
    isLoading: false    
  };
}

现在，让我们修改render ( )方法以添加文本输入和提交按钮，以便可以发布用户的“微博状态”。将render ( )方法替换为以下内容:

render() {
  const { handleSignOut } = this.props;
  const { person } = this.state;
  const { username } = this.state;

  return (
    !isSignInPending() && person ?
    

      

        

          

            

              
              

                

                  { person.name() ? person.name()
                    : "Nameless Person" }
                  

                {username}
                
                   | 
                  (Logout)