将pallets/template/Cargo.toml拷贝至pallets/poe目录，并增加以下内容：

# 增加段 [dependencies.sp-std] git = 'https://github.com/paritytech/substrate.git' default-features = false tag = 'v2.0.0-rc5' version = '2.0.0-rc5'  [features] default = ['std'] std = [     'codec/std',     'frame-support/std',     'frame-system/std',     'sp-std/std',                      # <-- 增加行 ]

3.2.4 配置pallet

每一个pallet都有一个配置trait

// 2. Pallet Configuration pub trait Trait: system::Trait {     /// The overarching event type.     type Event: From<Event<Self>> + Into<<Self as system::Trait>::Event>; } 

3.2.5 定义事件

事件：可以展示pallet成功被调用的时间和信息。

// 4. Pallet Events  decl_event! {            pub enum Event<T> where AccountId = <T as system::Trait>::AccountId {         /// Event emitted when a proof has been claimed.         ClaimCreated(AccountId, Vec<u8>),         /// Event emitted when a claim is revoked by the owner.         ClaimRevoked(AccountId, Vec<u8>),     } }

我们的存证palet，包含了以下事件：

• ClaimCreated：存证创建
• ClaimRevoked：存证撤销

事件可以包含一些附加数据，例如：

• AccountId：谁触发了事件
• Vec<u8>：存储或撤销的存证数据

3.2.6 定义错误

错误：可以展示pallet调用失败的时间，及失败原因。

// 5. Pallet Errors decl_error! {     pub enum Error for Module<T: Trait> {         /// This proof has already been claimed         ProofAlreadyClaimed,         /// The proof does not exist, so it cannot be revoked         NoSuchProof,                                                                                                             /// The proof is claimed by another account, so caller can't revoke it         NotProofOwner,     } }

3.2.7 定义存储

存证dApp前端界面是基于front-end-template开发，它是Substrate前端应用开发模板，可以通过其连接Substrate后端节点。

4.1 front-end-template安装

• 版本

  v2.0.0-rc5

• 下载

[Jason@RUAN:~/Blockchain]$ git clone git@github.com:substrate-developer-hub/substrate-front-end-template.git  [Jason@RUAN:~/Blockchain/substrate-front-end-template] (master)$ git checkout -b v2.0.0-rc5 v2.0.0-rc5 切换到一个新分支 'v2.0.0-rc5' [Jason@RUAN:~/Blockchain/substrate-front-end-template] (v2.0.0-rc5)$

• 安装

安装依赖，避免后续编译错误：

$ yum instally -y libusbx-devel libusb-devel libudev-devel

[Jason@RUAN:~/Blockchain/substrate-front-end-template] (v2.0.0-rc5)$ yarn install yarn install v1.22.4

• 安装错误及处理

• 安装错误1

  • 错误描述

  Package libusb-1.0 was not found in the pkg-config search path. Perhaps you should add the directory containing `libusb-1.0.pc' to the PKG_CONFIG_PATH environment variable No package 'libusb-1.0' found

  • 解决办法

  $ yum install libusbx-devel libusb-devel -y

• 安装错误2

  • 错误描述

  libudev.h：没有那个文件或目录

  • 解决办法

  $ yum install libudev-devel

• 启动命令

[Jason@RUAN:~/Blockchain/substrate-front-end-template] (v2.0.0-rc5)$ yarn start Compiled successfully!  You can now view substrate-front-end-template in the browser.    Local:            http://localhost:8000/   On Your Network:  http://172.29.0.4:8000/  Note that the development build is not optimized. To create a production build, use yarn build.

4.2 存证React组件开发

4.2.1 实现存证组件

在substrate-front-end-template/src目录下创建PoeModule.js，代码如下：

 React and Semantic UI elements. import React, { useState, useEffect } from 'react'; import { Form, Input, Grid, Message } from 'semantic-ui-react'; // Pre-built Substrate front-end utilities for connecting to a node // and making a transaction. import { useSubstrate } from './substrate-lib'; import { TxButton } from './substrate-lib/components'; // Polkadot-JS utilities for hashing data. import { blake2AsHex } from '@polkadot/util-crypto';  // Our main Proof Of Existence Component which is exported. export function Main (props) {     // Establish an API to talk to our Substrate node.     const { api } = useSubstrate();     // Get the 'selected user' from the `AccountSelector` component.     const { accountPair } = props;     // React hooks for all the state variables we track.     // Learn more at: https://reactjs.org/docs/hooks-intro.html     const [status, setStatus] = useState('');     const [digest, setDigest] = useState('');     const [owner, setOwner] = useState('');     const [block, setBlock] = useState(0);      // Our `FileReader()` which is accessible from our functions below.     let fileReader;      // Takes our file, and creates a digest using the Blake2 256 hash function.     const bufferToDigest = () => {         // Turns the file content to a hexadecimal representation.         const content = Array.from(new Uint8Array(fileReader.result))             .map((b) => b.toString(16).padStart(2, '0'))             .join('');          const hash = blake2AsHex(content, 256);         setDigest(hash);     };      // Callback function for when a new file is selected.     const handleFileChosen = (file) => {         fileReader = new FileReader();         fileReader.onloadend = bufferToDigest;         fileReader.readAsArrayBuffer(file);     };      // React hook to update the 'Owner' and 'Block Number' information for a file.     useEffect(() => {         let unsubscribe;          // Polkadot-JS API query to the `proofs` storage item in our pallet.         // This is a subscription, so it will always get the latest value,         // even if it changes.         api.query.poeModule             .proofs(digest, (result) => {                 // Our storage item returns a tuple, which is represented as an array.                 setOwner(result[0].toString());                 setBlock(result[1].toNumber());             })             .then((unsub) => {                 unsubscribe = unsub;             });          return () => unsubscribe && unsubscribe();         // This tells the React hook to update whenever the file digest changes         // (when a new file is chosen), or when the storage subscription says the         // value of the storage item has updated.     }, [digest, api.query.poeModule]);      // We can say a file digest is claimed if the stored block number is not 0.     function isClaimed () {         return block !== 0;     }      // The actual UI elements which are returned from our component.     return (         <Grid.Column>         <h1>Proof Of Existence</h1>         {/* Show warning or success message if the file is or is not claimed. */}         <Form success={!!digest && !isClaimed()} warning={isClaimed()}>         <Form.Field>         {/* File selector with a callback to `handleFileChosen`. */}         <Input         type='file'         id='file'         label='Your File'         onChange={(e) => handleFileChosen(e.target.files[0])}         />         {/* Show this message if the file is available to be claimed */}         <Message success header='File Digest Unclaimed' content={digest} />         {/* Show this message if the file is already claimed. */}         <Message         warning         header='File Digest Claimed'         list={[digest, `Owner: ${owner}`, `Block: ${block}`]}         />         </Form.Field>         {/* Buttons for interacting with the component. */}         <Form.Field>         {/* Button to create a claim. Only active if a file is selected,           and not already claimed. Updates the `status`. */}         <TxButton         accountPair={accountPair}         label={'Create Claim'}         setStatus={setStatus}         type='SIGNED-TX'         disabled={isClaimed() || !digest}         attrs={{             palletRpc: 'poeModule',                 callable: 'createClaim',                 inputParams: [digest],                 paramFields: [true]         }}         />         {/* Button to revoke a claim. Only active if a file is selected,           and is already claimed. Updates the `status`. */}         <TxButton         accountPair={accountPair}         label='Revoke Claim'         setStatus={setStatus}         type='SIGNED-TX'         disabled={!isClaimed() || owner !== accountPair.address}         attrs={{             palletRpc: 'poeModule',                 callable: 'revokeClaim',                 inputParams: [digest],                 paramFields: [true]         }}         />         </Form.Field>         {/* Status message about the transaction. */}         <div style={{ overflowWrap: 'break-word' }}>{status}</div>         </Form>         </Grid.Column>     ); }  export default function PoeModule (props) {     const { api } = useSubstrate();     return (api.query.poeModule && api.query.poeModule.proofs         ? <Main {...props} /> : null); }

4.2.2 添加存证组件

在substrate-front-end-template/src/App.js中添加存证组件，代码如下：

import PoeModule from './PoeModule';    return (        <div ref={contextRef}>       <Sticky context={contextRef}>         <AccountSelector setAccountAddress={setAccountAddress} />       </Sticky>       <Container>         <Grid stackable columns='equal'>           ......           <Grid.Row>             <PoeModule accountPair={accountPair} />                                                                                                                                          </Grid.Row>         </Grid>         <DeveloperConsole />       </Container>     </div>      );         

4.2.3 修改连接配置

配置文件：substrate-front-end-template/src/config/development.json

    "PROVIDER_SOCKET": "ws://119.28.233.229:9944"

4.3 front-end-template启动

$ yarn start Compiled successfully!  You can now view substrate-front-end-template in the browser.    Local:            http://localhost:8000/   On Your Network:  http://172.29.0.6:8000/  Note that the development build is not optimized. To create a production build, use yarn build.

4.4 存证界面展示

5 存证dApp使用展示

5.1 提交存证

• 选择文件

• 提交存证

  • 存证入块

• 存证入块确认

5.2 撤销存证

撤销存证的按钮，只对创建对应存证的用户可见，例如Alice创建的存证，在切换到Bob账号后，撤销存证的按钮会灰掉：

5.3 事件查看

可以查看到提交存证和撤销存证接口调用后触发的事件。

6 参考资料

https://substrate.dev/docs/en/tutorials/build-a-dapp/