如何开发一个简单的 dApp

后端合约

执行 sui move new resource_manage 创建一个包

接着就可以开始编写合约了

首先创建两个 Struct 用来创建 Profile 并记录在 State 中

public struct State has key {id: UID,users: Table<address, address>,
}public struct Profile has key {id: UID,name: String,description: String,
}

接着创建一个事件来检测 Profile 的创建过程

public struct ProfileCreated has copy, drop {profile: address,owner: address,
}

下一步初始化合约将 State 共享

fun init(ctx: &mut TxContext) {transfer::share_object(State{id: object::new(ctx), users: table::new(ctx),});
}

下面开始写一个创建 Profile 的函数

public entry fun create_profile(name: String, description: String, state: &mut State, ctx: &mut TxContext) {let owner = tx_context::sender(ctx);assert!(!table::contains(&state.users, owner), ProfileExit);let uid = object::new(ctx);let id = object::uid_to_inner(&uid);let new_profile = Profile {id: uid,name: name,description: description,};transfer::transfer(new_profile, owner);table::add(&mut state.users, owner, object::id_to_address(&id));event::emit(ProfileCreated { profile: object::id_to_address(&id), owner,});
}

​ 函数的大致逻辑就是先从 State.users 中判断交易者是否已经记录过，如果没有则创建一个 Profile 并将所有权转移给交易者，并将交易者的 address 和 Profile 的 id 转换成 address 类型后一并记录到 State 中去，最后触发事件表示资源的创建

接着创建一个检查是否创建的函数

public fun check_has_profile(state: &State, user: address): Option<address> {if(table::contains(&state.users, user)) {option::some(*table::borrow(&state.users, user))}else {option::none()}
}

这里 * 号的作用是“解引用”，table::borrow() 返回的是一个引用，但是 option::some() 函数需要接收一个值

到此我们的合约就编写完成了

执行 sui move build 编译执行 sui client publish 部署

前端调用

执行命令 npm create @mysten/dapp 开始初始化项目

这里选择第一个生成一个简单的 dapp 模板，第二个是携带 Move 代码的计算器示例

接着进入项目内执行 npm install 下载依赖包，这时可能会提示 eslint 版本不兼容

我们需要在 package.json 中将 eslint 设置为 ^8.56.0

重新执行 npm install 即可成功

注意：如果安装不成功通过执行 npm install -g npm 来升级版本，以获得更好的兼容

可以在项目根目录执行 npm run dev 来检验项目是否部署成功

如果浏览器出现此界面就代表成功了

往下我们先学习 Sui SDK 一些基本用法

1. ConnectButton：就是用于连接钱包的按钮

   import { ConnectButton } from '@mysten/dapp-kit';export function App() {return <ConnectButton />;
   }
   

2. useCurrentAccount ：检索当前选择的钱包账户

   import { ConnectButton, useCurrentAccount } from '@mysten/dapp-kit';function MyComponent() {const account = useCurrentAccount();return (<div><ConnectButton />{!account && <div>No account connected</div>}{account && (<div><h2>Current account:</h2><div>Address: {account.address}</div></div>)}</div>);
   }
   

3. SuiClient：用来连接到网络并进行交互

   import { getFullnodeUrl, SuiClient } from '@mysten/sui/client';const suiClient = new SuiClient({url: getFullnodeUrl('testnet'),
   });
   

4. Transaction：用来打包交易块，可以使用 PTB

   import { Transaction } from "@mysten/sui/transactions";export const Test = async(name: string, description: string) => {const tx = new Transaction();tx.moveCall({package: packageID,module: "module_name",function: "fun_name",arguments: [tx.pure.string(name),tx.pure.string(description),tx.object(state),],});return tx;
   }
   

5. useSignAndExecuteTransaction：进行签名并交易

   import { useSignAndExecuteTransaction } from "@mysten/dapp-kit";const {mutate: signAndExecute} = useSignAndExecuteTransaction();const tx = await Test(name, description);
   signAndExecute({transaction: tx
   }, {onSuccess: () => {console.log("success!");},onError: (error) => {console.log(error);}
   });
   

完整代码：https://github.com/Ch1hiro4002/Sui_Frontend_Study/tree/main/week_1

展示效果：

 更多相关信息，请，，https://t.me/gtokentool