3 - Customize your kingdom

From : https://docs.blockstack.org/develop/zero_to_dapp_3.html

在这个页面中，您将检查和修改在第2部分中构建的动物王国DApp。您将检查底层代码，并找到满足应用程序挖掘资格要求的部分。通过扩展应用程序，您将扩展对应用程序的知识。最后，您将学习如何部署DApp。

此页面包含以下主题

了解动物王国应用程序代码

验证用户身份
获取并将用户数据放到Gaia Hub中
应用程序配置

添加一个领土
将Blockstack王国添加到其他王国
在web上部署您的DApp
把你的王国加入我们的家族

在你开始之前

在继续之前，请确保能够找到项目中的关键文件和目录(文件夹)。您需要确保已打开终端并将目录更改为动物王国项目的顶部。

image

如果您发现它更容易导航，您也可以使用Finder。只需记住，您将需要命令行来运行您的项目。

了解动物王国应用程序代码

动物王国应用程序有两个主要组件，React和Blockstack。React用于构建所有web组件和交互。你可以用任何你喜欢的框架来替换React;blockstack与web框架无关。本节不详细解释反应;讨论的重点是Blockstack Javascript库代码。

blockstack Javascript库是开发人员创建DApp所需要的全部。它赋予应用程序验证blockstack标识和读写存储在Gaia hub中的用户数据的能力。

验证用户身份

src/App.js文件创建一个Blockstack UserSession，并使用该会话的isUserSignedIn()方法来确定用户是签入还是签出应用程序。取决于这个方法的结果。应用程序重定向到src/SignedIn页面或src/Landing.js页面。

import React, { Component } from ‘react’
import './App.css’
import { UserSession } from ‘blockstack’

import Landing from './Landing’
import SignedIn from './SignedIn’

class App extends Component {

constructor() {
super()
this.userSession = new UserSession()
}

componentWillMount() {
const session = this.userSession
if(!session.isUserSignedIn() && session.isSignInPending()) {
session.handlePendingSignIn()
.then((userData) => {
if(!userData.username) {
throw new Error('This app requires a username.’)
}
window.location = /kingdom/${userData.username}
})
}
}

render() {
return (

{this.userSession.isUserSignedIn() ?

:

}

);
}
}

export default App

第一次启动应用程序时，这段代码将确定用户是否以前已登录到DApp。如果没有，则打开land .js页面。这个页面为用户提供了一个登录到Blockstack的机会。

单击该按钮将调用redirectToSignIn()方法，该方法生成身份验证请求，并将用户重定向到blockstack浏览器以批准登录请求。实际的blockstack登录对话框取决于用户是否已经在blockstack浏览器中拥有一个现有会话。

image

使用标识登录是用户授予DApp访问权限的方法。访问意味着DApp可以读取用户资料，并为DApp读取/写入用户数据。数据在Gaia存储中心上的唯一URL处加密。

源代码从blockstack库导入UserSession。与给定用户会话相关的数据封装在会话中。在web浏览器中，UserSession默认行为是将会话数据存储在浏览器的本地存储中。这意味着应用程序开发人员可以将会话状态的管理留给用户。在非web浏览器环境中，需要传入一个AppConfig实例，该实例定义了当前应用程序的参数。

应用挖掘要求:blockstack认证
要参与应用程序挖掘，您的应用程序必须集成blockstack身份验证。否则测试飞行应用程序不合格。

获取并将用户数据放到Gaia Hub中

Gaia是blockstack数据存储中心(https://hub.blockstack.org)。一旦用户进行了身份验证，应用程序就可以获取并将应用程序数据放入用户的存储中。在用户登录之后，SignedIn.js代码通过运行loadMe()方法检查用户的Gaia配置文件。

loadMe() {
const options = { decrypt: false }
this.userSession.getFile(ME_FILENAME, options)
.then((content) => {
if(content) {
const me = JSON.parse(content)
this.setState({me, redirectToMe: false})
} else {
const me = null
this.setState({me, redirectToMe: true})
}
})
}

该文件中的大多数导入都是本地编码的React组件。例如,Kingdom.js, EditMe.js和Card.js。关键的blockstack导入是UserSession和在constants.js文件中定义的appConfig。

loadMe()代码使用blocksatck的UserSession.getFile()方法从应用程序数据存储中获取指定的文件。如果用户在Gaia上的数据存储没有数据(新用户的情况就是如此)，Gaia hub将使用HTTP 404代码进行响应，getFile promise解析为null。如果您正在使用带DApp的Chrome开发工具，您将在浏览器的开发人员控制台中看到这些错误。

image

在用户选择动物角色和区域之后，用户按Done，应用程序将用户数据存储在Gaia上。

saveMe(me) {
this.setState({me, savingMe: true})
const options = { encrypt: false }
this.userSession.putFile(ME_FILENAME, JSON.stringify(me), options)
.finally(() => {
this.setState({savingMe: false})
})
}

Blockstack putFile()存储用户的DApp数据存储中提供的数据。您可以从用户的配置文件中查看数据存储的URL。

如果你测试过你的动物王国，你可以在你的个人资料上看到。要查看您的个人资料，请到Blockstack资源管理器中搜索您的ID:

[图片上传失败...(image-869807-1563763865829)]

App挖掘可选:Gaia存储

应用程序挖掘不需要使用Gaia存储。请记住，使用Gaia可能使数据存储更容易，因为它是为在blockstack生态系统中工作而设计的。

应用配置

您的DApp包含三个页面动物、领地和其他王国，它们来自于三个代码元素:

src/constants.js文件定义了应用程序的数据概要文件(AppConfig)。
包含图像的public/animals目录。
包含图像的public/territories目录。

在下一节中，您将通过修改这些文件来扩展王国的配置。

添加一个领土

1.如果您的应用程序仍然在localhost中运行，请用键盘上的CTRL-C停止它。

决定添加的领土类型;沙漠、海洋或城市!
这个例子添加了虚构的领域维斯特洛。

2.搜索代表您的新领域的图像。
谷歌图像是查找维斯特洛JPEG图像的好地方。

3.将图像保存到“动物王国”项目代码中的“公共/领土”文件夹中。

警告:区域文件名必须全部小写，扩展名为.jpg。对于本例，领土图像保存在westeros.jpg文件中。

4.使用ls命令确认您的文件出现在territory目录中，并且名称正确。
ls public/territories/
forest.jpg tundra.jpg westeros.jpg

5.在您喜欢的编辑器中打开src/constant.js文件。

6.向下滚动到定义区域的部分。

export const TERRITORIES = [
{
id: ‘forest’,
name: ‘Forest’,
superpower: ‘Trees!’
},
{
id: ‘tundra’,
name: ‘Tundra’,
superpower: 'Let it snow!’
}
]

7.添加您的新领域。

export const TERRITORIES = [
{
id: ‘forest’,
name: ‘Forest’,
superpower: ‘Trees!’
},
{
id: ‘tundra’,
name: ‘Tundra’,
superpower: 'Let it snow!’
},
{
id: ‘westeros’,
name: ‘Westeros’,
superpower: 'The Iron Throne!’
}
]

8.保存并关闭constant.js文件。

9.回到终端窗口，重新启动应用程序。
$ npm start

10.应用程序启动后，导航到territory页面并查找您的Westeros territory。

[图片上传失败...(image-2433f9-1563763865829)]

将blockstack王国添加到其他王国

你的动物王国只承认另外两个王国。在本节中，您将添加第三个blockstack王国(https://animalkingdoms.netlify.com)。

1.在您喜欢的编辑器中打开src/constant.js文件。
在Mac电脑上，你可以使用TextEdit或Vim。

2.向下滚动到定义其他王国的部分
export const OTHER_KINGDOMS = [
{
app: 'https://animal-kingdom-1.firebaseapp.com’,
ruler: ‘larry.id’
},
{
app: 'http://localhost:3001’,
ruler: ‘larz.id’
}
]

要添加王国，您需要它的URL和所有者的ID。

3.编辑文件并添加由moxiegirl.id.blockstack拥有的https://animalkingdoms.netlify.com。

当您完成时，文件将像这样。

export const OTHER_KINGDOMS = [
{
app: 'https://animal-kingdom-1.firebaseapp.com’,
ruler: ‘larry.id’
},
{
app: 'http://localhost:3001’,
ruler: ‘larz.id’
},
{
app: 'https://animalkingdoms.netlify.com’,
ruler: ‘moxiegirl.id.blockstack’
}
]

4.保存并关闭constants.js文件。
5.回到浏览器中，导航到其他王国页面。

image

6.点击moxiegirl王国进入她的王国。
7.尝试添加一个主题从Moxiegirl的王国到您的。

在web上部署您的DApp

到目前为止，您一直在本地运行应用程序。这意味着你是唯一可以用它来创造一个王国的人。您可以通过将应用程序托管在internet上，使其对其他人可用。你可以用Netlify帐户免费做这件事。

应用挖掘要求:审查可访问性

要参与应用程序挖掘，您的应用程序必须可用于审查。开源项目必须提供其代码的URL。带有私有存储库的项目可以以包形式提供其应用程序。

在开始之前，您需要构建一个可以部署的站点。

1.在终端中，按键盘上的CTRL-C停止npm的开始构建。
2.输入npm run Build命令，用你的代码构建一个网站:
npm run build

image

当命令完成时，您的项目中应该有一个新的build子目录。

3.在Finder中打开项目。
4.找到新创建的build子文件夹。

image

5.注册一个免费的Netlify帐户

image

6.在您的电子邮件收件箱中，找到Netlify的欢迎邮件并验证您的帐户。

image

7.登录到Netlify并转到浏览器的Overview页面。

8.将build子目录从Finder中拖到Netlify中的drop区域。
[图片上传失败...(image-cb3f19-1563763865829)]

过一会儿，Netlify构建代码并显示新网站的位置。

image

点击你的网站名称来显示网站。
提示您使用blockstack ID登录到这个新站点。

10.单击“使用blockstack登录”。
在您登录后，您的网站会向您显示以下信息:

image

您得到此消息是因为，当您进行身份验证时，您在一个URL处的DApp向另一个DApp (Blockstack浏览器)请求资源(标识)。对源(您的新网站)之外的资源的请求称为跨源请求(CORs)。以这种方式获取数据可能有风险，因此必须配置网站安全性，以允许跨源交互。

您可以将CORS交互视为具有安全性的公寓楼。例如，如果你需要借梯子，你可以问你楼里的邻居谁有梯子。安全性可能不会对这个请求有问题(即，同根同源，你的建筑)。但是，如果您需要某个特定的工具，并且您从在线五金店(即保安人员在允许送货员进入公寓大楼前，可能会要求出示证件来源:“

配置CORs的方式取决于为您的网站提供服务的公司。本例使用Netlify。

11.定位项目中的cors/_headers和cors/ _re重定向文件。
您可以使用Finder或ls命令。

image

12.将它们复制到构建目录中。
要使用ls命令复制它们，请在animal-kingdom-master项目的根目录中输入以下内容。
cp cors/_headers build
cp cors/_redirects build

每个文件的名称和下划线都是必不可少的。

13.将构建文件拖回Netlify drop区域。
过一会儿，Netlify将发布您的站点。检查发布的位置，它可能已经更改。

14.点击链接，进入你的动物王国。
15.重建你的动物人和领地。
动物王国是由它在互联网上的位置来确定的，还记得吗?因此，您在本地工作站上创建的动物王国与您在Netlify上创建的动物王国是不同的。

把你的王国加入我们的家族

在这一点上，你的王国是孤立的。如果您知道另一个王国，您可以添加来自该王国的主题，但其他王国无法访问您的主题。在本节中，您将使用一个免费的GitHub帐户将您的王国添加到blockstack王国。

1.如果您有一个GitHub帐户，请转到步骤2，否则转到GitHub站点并创建一个新帐户。
2.转到Github上的https://github.com/blockstack/animal-kingdom/issues储存库。
3.单击新问题。
出现new issue对话框。
4.使用来自Netlify的URL和您的块堆栈id填写问题。
完成后，您的问题将如下所示:

image

5.按Submit new issue。
Blockstack团队将把您的Netlify王国添加到我们的王国。当我们这样做的时候，我们会通知你这个问题，你也会收到一封电子邮件。

6.当您收到电子邮件时，登录到Blockstack动物王国查看您在其他王国下的王国。

下一步(和一件很酷的t恤!)

在下一部分中，您将了解应用程序挖掘如何为DApp开发工作提供资金。您将花几分钟时间将您的动物王国DApp添加到App.co - the Universal App store。完成这一步，你将获得一件限量版t恤。

如果你有一个twitter账号，为什么不告诉一些人你的进展呢?
Tweet your work!

Continue to 4 of 4, Zero-to-DApp.