# VN Bot Developer's Guide

### 1. Register and log in (using MetaMask)

#### Step 1: Install MetaMask

* Download and install MetaMask wallet on either your PC or mobile.
* Create a new wallet account or import an existing wallet.

<div align="left"><figure><img src="https://1919843146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8LHYUOROlTYIqPBtK22o%2Fuploads%2FU3Q6t2aKkGkMytntzBqc%2Fcreated.png?alt=media&#x26;token=13a3f869-16c1-44ab-bebc-2b9bdcf437a6" alt="" width="358"><figcaption></figcaption></figure></div>

Step 2: Log in to the VN Bot Developer Platform

* Visit the [VN Bot Developer Platform](https://vn.com/).
* Click the "Login" button and select "MetaMask Wallet" to log in.
* Complete wallet signature confirmation and login.

<div align="left"><figure><img src="https://1919843146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8LHYUOROlTYIqPBtK22o%2Fuploads%2FdaF2D9IktibH1o0cSvbL%2Flogin.png?alt=media&#x26;token=2fb59022-c002-4151-989d-60b5fdaf1a73" alt="" width="375"><figcaption></figcaption></figure></div>

2\. Register as a VN Bot developer user

#### Step 1: Enter the registration page

* After logging in, it will automatically redirect to the registration page.
* Fill in the relevant developer information and submit.

<div align="left"><figure><img src="https://1919843146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8LHYUOROlTYIqPBtK22o%2Fuploads%2FnzDg7Jrt3A9u8ju9rQe7%2Fdevbot.png?alt=media&#x26;token=0ced5852-5605-4f58-9d41-41fc51b7e0a8" alt="" width="334"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://1919843146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8LHYUOROlTYIqPBtK22o%2Fuploads%2FVmqN9mGkTUAt6DAolna1%2Fdevcenter.png?alt=media&#x26;token=589ecc33-29aa-4897-b249-a3288a7d59a9" alt="" width="375"><figcaption></figcaption></figure></div>

#### Step 2: Fill in developer information

* Fill in necessary information such as wallet address, developer name, contact information, etc.

<div align="left"><figure><img src="https://1919843146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8LHYUOROlTYIqPBtK22o%2Fuploads%2FI3zYSLVqbWiFmIZ7paBE%2Fdevregister.png?alt=media&#x26;token=c458e44d-36dc-44e8-998b-6ff62df820a8" alt="" width="375"><figcaption></figcaption></figure></div>

#### Step 3: Complete registration

* Click the "Register" button to complete the developer account registration.

### 3. Upload your Bot program

#### Step 1: Create a new Bot project

* Click the "Create New Bot" button and fill in the Bot name and description.
* Select the Bot type (e.g. NFT, GAME\_FI, etc.).

<div align="left"><figure><img src="https://1919843146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8LHYUOROlTYIqPBtK22o%2Fuploads%2FEXKM9oSoFAY1rorTm9bj%2Fdevcreated.png?alt=media&#x26;token=982e2fb5-84c0-410f-888f-9275a47cf34a" alt="" width="375"><figcaption></figcaption></figure></div>

#### Step 2: Upload the Bot program file

* Upload local program files directly.

#### Step 3: Submit for review

* Click 'Submit for Review' and wait for the platform to approve.

### 4. Manage your Bot program

* View and manage all the bot programs you upload in the developer backend.
* Support operations such as updating, deleting, and version management.

### 5. VN JSBridge API Specification

* #### 5.1 - Init JSBridge <a href="#id-1-init-jsbridge" id="id-1-init-jsbridge"></a>

  ```
  // Implement callback handlers
  const registerCallbackHandlers = [
    {
      id: VNEventName.Token,
      func: function(token: string) {
        showMessage("token: " + token);
      }
    },
    {
      id: VNEventName.UserInfo,
      func: function(info: { token: string }) {
        showMessage("info: " + info.token);
      }
    }
  ];
  // init VNJSBridge
  const bridge = new VNJSBridge(registerCallbackHandlers);
  // send get token event action
  bridge.callGetToken();
  // send get user info event action
  bridge.callGeUserInfo();
  ```

  #### 5.2 - Enum <a href="#id-2-enum" id="id-2-enum"></a>

  **VNEventName**

  * Token: Get `token` event id
  * UserInfo：get vn `user info` event id

  #### 5.3 - Constant <a href="#id-3-constant" id="id-3-constant"></a>

  **VN\_FLUTTER\_CHANNEL**

  The key of Javascript Channel, Flutter will auto register before page loaded.

  **VN\_JS\_BRIDGE**

  The key of callback handlers collection, provided by web application to receive `event` data.

  **VN\_JS\_BRIDGE\_TOKEN\_FUNC**

  The handler of get `token` evnet, should register by user when initialize VNJSBridge.

  **VN\_JS\_BRIDGE\_USERINFO\_FUNC**

  The handler of get `user info` evnet, should register by user when initialize VNJSBridge.

  #### 5.4 - NPM Packag <a href="#id-4-npm" id="id-4-npm"></a>

  <https://www.npmjs.com/package/vn-jsbridge-sdk>

### 6. Frequently Asked Questions (FAQ)

* How can I verify if my developer account has been successfully registered?\
  **Ans-**  After logging in, you can view the "My Account" page.
* What languages or frameworks can I upload bot programs for?\
  **Ans-**  Supports multiple programming languages and frameworks, such as Node.js, Python, etc.
* How can I check the running status of my bot?\
  **Ans-**  View statistics, log information, and user feedback in the developer backend.

### 7. Platform support and community

* Developer Community: Join the developer community and discuss technical issues.
* Technical support email: <support@vn.com> .