Polka宠物项目5 UI界面--by Skyh0805

现在编写前端部分, 首先第一篇https://www.jianshu.com/p/cef8e73f103d 创建了substratekitties-ui, 现在就用这个ui 实现前端展示,并熟悉polkadot的js接口,

1 前端运行

安装依赖和运行

yarn install
yarn run dev

image.png

浏览器运行http://localhost:8000

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创建宠物项目就告一段落了