A-Hello, Blockstack Tutorial

在本教程中，您将在Blockstack上生成一个简单的应用程序。该应用程序是一个单页应用程序(SPA)，完全运行在客户端。除了用户提供的标识和存储API之外，应用程序没有可与之通信的后端API。从这个意义上说，应用程序是一个完全分散的、没有服务器的应用程序。你要完成以下几个部分:

关于本教程和您需要的先决条件
使用npm安装Yeoman和blockstack应用程序生成器
生成一个初始blockstack应用程序
回顾基本的应用程序结构
启动服务器并查看应用程序
理解生成的应用程序代码
应用程序清单文件
保存应用程序代码

关于本教程和您需要的先决条件

在本教程中，我们将使用以下工具:

• npm管理依赖项和脚本
• browserify将节点代码编译为浏览器可用代码
• blockstack.js对用户进行身份验证，并处理用户的身份/概要信息

您构建的应用程序是一个完全分散的、没有服务器的 React.js应用程序。虽然不是严格要求遵循，但对React.js有基本的了解是有帮助的。

完成后，app可以实现以下功能:

• 使用blockstack对用户进行身份验证
• 发布新状态
• 在用户配置文件中显示状态
• 查找其他用户的配置文件和状态

基本标识和存储服务由blockstack.js提供。要测试应用程序，您需要已经注册了一个Blockstack ID。

本教程依赖于npm依赖关系管理器。在开始之前，请使用要验证的命令验证是否安装了npm。

$ which npm
/usr/local/bin/npm

如果在系统中没有找到npm，请安装它。
最后，确保您至少创建了一个Blockstack ID。您将使用这个ID与应用程序进行交互。

使用npm安装Yeoman和blockstack应用程序生成器

使用npm安装Yeoman。Yeoman是一个通用的脚手架系统，帮助用户快速启动新项目，并简化现有项目的维护。

1.安装Yeoman

npm install -g yo

2.安装blockstack应用程序生成器。

npm install -g generator-blockstack

生成一个初始blockstack应用程序

在本节中，您将构建一个名为hello-world-tutorial的初始React.js 应用程序。

1.创建hello-world教程目录。

mkdir hello-world-tutorial

2.切换到新目录。

cd hello-world-tutorial

3.使用Yeoman和Blockstack应用程序生成器创建您最初的hello-world-tutorial应用程序。

yo blockstack

您应该会看到几个交互提示。

$ yo blockstack
----- ╭──────────────────────────╮
| | │ Welcome to the │
|--(o)--| │ Blockstack app │
---------´ │ generator! │ ( _´U_ ) ╰──────────────────────────╯
/A\ /
| ~ |
'..’_
´ |° ´ Y
? Are you ready to build a Blockstack app? (Y/n)

4.响应提示填充初始应用程序。
流程成功完成后，您会看到类似如下提示:

…
create public/icon-192x192.png
create public/index.html
create public/robots.txt
create public/manifest.json
I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.

根据您的环境，可能对npm包有一些问题。在继续下一节之前，先修复这些错误。

回顾基本的应用程序结构

您创建的初始应用程序是一个使用本地express节点运行的通用Javascript应用程序。在继续之前，请花一点时间检查这个通用应用程序结构的结构。在生成的样本/ (root)中，您有以下文件:

文件	描述
.editorconfig	设置编辑器的通用值。
.gitignore	Git配置文件。
firebase.json	移动应用程序的配置。
package.json	指定所需的包。
requires.js	Javascript模块加载器。
server.js	简单的静态服务器配置。

在public文件夹中，您可以找到以下文件:

文件	描述
app.css	包含应用程序的样式。
app.js	主应用程序文件。
bootstrap.min.css	用于生产的小型css。
favicon.ico	网站图标。
icon-192x192.png	应用图标
index.html	单页。
manifest.json	告诉浏览器应用程序及其行为。
robots.txt	配置爬行和索引。

server.js文件中的简单静态文件服务器服务于/public目录中的所有文件，包括索引。html, app.js, bootstrap.min.css和app.css。应用程序的主文件在app.js中。它包含应用程序逻辑的大部分。

启动服务器并查看应用程序

当您启动服务器时，它将创建一个Node.js服务器，在本地启动它，并打开浏览器“http://localhost:5000”。从您的新应用程序目录的根目录:

1.启动应用程序服务器。

npm start

第一次运行它时，系统会提示您接受传入的连接。

image

2.选择允许
3.打开浏览器到http://localhost:5000。
你应该看到一个简单的应用程序:

image

4.选择使用Blockstack登录。
应用程序检测用户是否安装了blockstack客户端版本。这是由Blockstack API自动完成的，稍后会详细介绍。浏览器显示的内容取决于用户的当前状态。

使用web应用程序

image

已安装客户端版本

image

如果用户登录到blockstack浏览器但没有重置它，用户可以简单地使用退出标识。

image

如果用户选择Deny，blockstack浏览器将显示其主页，但是用户没有登录到示例应用程序。

5.让您的新应用程序继续运行，然后进入下一节。

理解生成的应用程序代码

在本节中，您将了解使用yo blockstack命令生成的基本应用程序。生成的代码包含简单的身份验证方法，允许用户登录到浏览器。主应用程序代码位于public/app.js文件中。现在打开这个文件。

文件中的所有代码都包装在一个事件侦听器中。

document.addEventListener("DOMContentLoaded", event => {
const appConfig = new blockstack.AppConfig()
const userSession = new blockstack.UserSession({ appConfig: appConfig })
…

appConfig包含应用程序的配置数据，而userSession对象表示该应用程序上的用户实例。在浏览器平台上，创建一个没有任何参数的appConfig实例将使用window.location。origin作为应用程序域。在非浏览器平台上，需要将应用程序域指定为第一个参数。有关可用函数的信息，可以参考blockstack.js库参考。

这个侦听器将一直等到加载DOM内容。然后，它创建一个auth请求，并重定向用户登录:

document.getElementById('signin-button').addEventListener('click', event => {
event.preventDefault()
userSession.redirectToSignIn()
})

还有一个sign out按钮处理程序。该处理程序删除本地用户数据，并将用户签出:

document.getElementById('signout-button').addEventListener('click', event => {
event.preventDefault()
userSession.signUserOut()
window.location = window.location.origin
})

处理程序后面是showProfile()函数，用于显示用户的配置文件:

function showProfile (profile) {
let person = new blockstack.Person(profile)
document.getElementById('heading-name').innerHTML = person.name() ? person.name() : "Nameless Person”
if(person.avatarUrl()) {
document.getElementById('avatar-image').setAttribute('src', person.avatarUrl())
}
document.getElementById('section-1').style.display = ‘none’
document.getElementById('section-2').style.display = ‘block’
}

每个getElementById()函数都引用index.html文件中的元素。

一旦用户成功登录，就有了加载用户概要文件和显示应用程序的逻辑。如前所述，用户可以处于以下几种状态:

• 用户已经登录
• 用户在请求中有一个挂起的签名
• 用户已签出

应用程序处理这些情况如下:

if (userSession.isUserSignedIn()) {
const { profile } = userSession.loadUserData()
showProfile(profile)
} else if (userSession.isSignInPending()) {
userSession.handlePendingSignIn().then(userData => {
window.location = window.location.origin
})
}

当用户登录时，Blockstack从本地存储加载用户数据，并使用showProfile()函数显示概要文件。当用户有一个挂起的登录请求时，应用程序将登录用户并将用户重定向回主页。

应用程序清单文件

应用程序的/public/manifest.json文件配置应用程序。配置规定了应用程序如何在auth视图和用户主屏幕上显示。内容很简单:

{
"name": "Hello, Blockstack”,
"start_url": "localhost:5000”,
"description": "A simple demo of Blockstack Auth”,
"icons": [{
"src": "https://helloblockstack.com/icon-192x192.png”,
"sizes": “192x192”,
"type": "image/png”
}]
}

保持原样，或者用描述应用程序的新信息填充。

保存应用程序代码

通过在GitHub上存储应用程序代码来完成本教程。在开始之前，请确保您有一个GitHub帐户，并已配置您的环境来使用它。

1.将应用程序代码初始化为Git repo。

git init

2.添加并提交所有文件:

git add . && git commit -m "first commit”

3.在GitHub中，创建一个hello-blockstack存储库。
4.回到终端窗口，为GitHub添加一个远程。
请务必填写您的用户名:

git remote add origin git@github.com:YOUR_USERNAME_HERE/hello-blockstack.git

5.将您的新代码推送到远程回购的主分支:

git push origin master

你已经完成了!您刚刚构建了自己的第一个Blockstack应用程序并发布了代码。你正在成为blockstack应用的传奇。

加入我们一起学习Blockstack开发Dapp

image.png image.png

Rebase是一个全球性的去中心化组织，致力于帮助极客更好地利用科技创新，推动社会变革。Rebase社区聚集着一群拥有不同技能的人，他们通过贡献自己的时间和智慧来为社区的发展添砖加瓦，用实际的行动来尝试社区和社会自治的可能。

招募志愿者

Rebase作为一个开放的社区，我们欢迎不同的人加入我们，你将有机会:

•探索新的有趣的项目
•认识一群志同道合的人
•接触到行业内最前沿的知识
•与技术领袖交流的机会
•结识未来的创业伙伴

参与的形式可以是多种多样的，哪怕不在同一个城市，在这里你可以：

•策划一场知识密度极高的分享会
•组织一次酷炫的线下区块链workshop
•设计一款脑洞大开的海报
•开发一个方便易用的工具

更多好玩的东西，我们一起探索。