如何开发一个简单的 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

展示效果：