DQtech Column | Learn from DEX about PlatON Application Development - Javascript (I)

“Learning from DEX on Application Development Series” is divided into3 parts: wallet part, smart contract part and DAPP part.
The wallet chapter will teach you to build wallets with JavaScript, Android and fluent.
This series is JavaScript, which will teach you to build a browser plug-in wallet similar to Samurai.

JavaScript is developed based on Vue + element UI, so you need to prepare the corresponding knowledge in advance.Javascript.

1，Environmental Preparation

Although the official website provides the method of installing CLIENT SDK JS. However, for the purpose of learning, the author directly shows the source code compilation of CLIENT SDK JS (Note: all the author’s operating systems are completed on Windows 10).

Here are the specific steps：

a) Download Node.js URL：https://nodejs.org/dist/v16.13.0/node-v16.13.0-x64.msi 。This step is to be able to download the corresponding program using NPM.
b) Download source code：git clone https://github.com/PlatONnetwork/client-sdk-js.git 1 If you don’t want to use git clone, you could click here: https://github.com/PlatONnetwork/client-sdk-js then download the source code, as shown in the picture below：

DQtech Column | Learn from DEX about PlatON Application Development - Javascript (I)

c) Open the console in the source directory:

Enter CMD in the address bar and press enter：

Enter “nmp install” on the console

Because there are many things installed here, you need to wait patiently for a while. If there is no response after entering the command, you can interrupt with Ctrl + C and enter “nmp install” again
The prompt like this will appear after installation：

d) After the program is installed, continue to enter the command “NPM run build” to compile SDK:

After compilation, there will be a dist directory in the current directory：

Open it you would find the following files：

File web3.JS is not compressed. We will use this file when developing; web3. js. Map symbol mapping file is used for debugging; web3. Min.js is a compressed file, which we will use in the production environment.

2， Code Writing
Create a new directory, and then create an empty index HTML file, copy the SDK compiled just now to this directory. After copying, it is as follows:

Then we use the code editor to open index HTML file. I use vscode here. Modify the index.html code as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
</head>
<body>
    <!-- 因为当前是开发状态，因此使用web3.js -->
    <script src="./web3.js"></script>
    <script>
    </script>
</body>
</html>

Next, we call the interface for obtaining wallet balance, and the code is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
</head>

<body>
    <!-- 因为当前是开发状态，因此使用web3.js -->
    <script src="./web3.js"></script>
    <script>
        // 构建web3对象，这里的网址是PlatON的测试链地址
        let web3 = new Web3(new Web3.providers.HttpProvider('http://35.247.155.162:6789'));

        //笔者在测试链的钱包地址
        let walletAddress = "lat1zrq89dhle45g78mm4j8aq3dq5m2shpu56ggc6e";
        // 获取钱包地址
        web3.platon.getBalance(walletAddress).then(res=>{
            console.log(res);
        });

    </script>
</body>
</html>

Double click to open index.html, the interface is shown as follows：

It indicates that the balance of the wallet has been obtained. In order to better read the numbers, the numbers can be converted to lat. The code is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
</head>

<body>

    <span id="balance"></span>

    <!-- 因为当前是开发状态，因此使用web3.js -->
    <script src="./web3.js"></script>
    <script>
        // 构建web3对象，这里的网址是PlatON的测试链地址
        let web3 = new Web3(new Web3.providers.HttpProvider('http://35.247.155.162:6789'));

        //笔者在测试链的钱包地址
        let walletAddress = "lat1zrq89dhle45g78mm4j8aq3dq5m2shpu56ggc6e";
        // 获取钱包地址
        web3.platon.getBalance(walletAddress).then(res=>{

            let balanceDom = document.getElementById("balance");
            // 把余额转换为LAT
            balanceDom.innerHTML = web3.utils.fromVon(res, "lat");
        });

    </script>
</body>
</html>

After modification, we refresh the browser again, as shown below:

In order to verify whether the balance we obtained is correct, we can open the browser of the Platon test chain to view the balance of the current wallet. https://devnetscan.platon.network/
Enter the wallet address to query, as shown in the figure below, and click query.