现在编写前端部分, 首先第一篇https://www.jianshu.com/p/cef8e73f103d 创建了substratekitties-ui, 现在就用这个ui 实现前端展示,并熟悉polkadot的js接口,
1 前端运行
安装依赖和运行
yarn install
yarn run dev
image.png
image.png
熟悉开发者工具的可以在命令行运行如下
image.png
其实跟浏览器一样
image.png
2. 第一步尝试
找到app.jsx 在末尾加入
class SubstratekittiesSegment extends React.Component {
constructor() {
super()
this.skAccount = new Bond
this.skKitty1 = new Bond
this.skKitty2 = new Bond
}
render() {
return <Segment style={{ margin: '1em' }} padded>
<Header as='h2'>
<Icon name='paw' />
<Header.Content>
Substrate Kitties
<Header.Subheader>There are <Pretty value={runtime.substratekitties.allKittiesCount} /> kitties purring.</Header.Subheader>
</Header.Content>
</Header>
<div style={{ paddingBottom: '1em' }}></div>
</Segment>
}
}
然后在前面加入组件
image.png
重新打开网页就看到链上内容了
image.png
我们可以创建一个 Call 来创建一个新的 kitty。为此，我们可以向 runtime 发出 post() 请求，如下所示：
post({
sender: '5GoKvZWG5ZPYL1WUovuHW3zJBWBP5eT8CbqjdRY4Q6iMaDtZ',
call: calls.substratekitties.createKitty()
}).tie(console.log)
查看有什么方法
image.png
decl_module! 宏中创建的所有函数的列表。请注意，我们的私有函数如 mint() 和 _transfer() 不在此处，因为它们不应该是我们公共 API 的一部分。
3 UI组件
SignerBond 创建一个输入区域，在里面每个人可以写入他们想要签名的帐户名称。该账户被置于 bond 内
TransactButton 提供支持，我们将提供存储在 bond 中的值给交易的 sender 字段
可修改app.jsx组件为
class SubstratekittiesSegment extends React.Component {
constructor() {
super()
this.skAccount = new Bond
}
render() {
return <Segment style={{ margin: '1em' }} padded>
<Header as='h2'>
<Icon name='paw' />
<Header.Content>
Substrate Kitties
<Header.Subheader>There are <Pretty value={runtime.substratekitties.allKittiesCount} /> kitties purring.</Header.Subheader>
</Header.Content>
</Header>
<div style={{ paddingBottom: '1em' }}></div>
<SignerBond bond={this.skAccount} />
<TransactButton
content="Create Kitty"
icon='paw'
tx={{
sender: runtime.indices.tryIndex(this.skAccount),
call: calls.substratekitties.createKitty()
}}
/>
</Segment>
}
可看到ui修改为
image.png
另外下载一个组件 https://github.com/substrate-developer-hub/substrate-collectables-workshop/raw/master/4/assets/KittyCards.zip
放在src处, 然后引入组件, 放在源码内
//在 constructor() { 加入
...
addCodecTransform('Kitty<Hash,Balance>', {
id: 'Hash',
dna: 'Hash',
price: 'Balance',
gen: 'u64'
});
...
就可以看到
注意, 里面名字必须出现在wallet内, alice没有就不可以, 比如创建一个new, 然后转入unit, 就可以在这个账户创建kitty了
image.png
这集讲了如何在ui加入, 使用react, 其他项目类似, 具体源码可以参考
polka runtime创建宠物项目就告一段落了
