# Introduction

This document describes how to develop a simple web dapp on top of Asimov using high level Javascript SDK. We use Donate DApp as example. Source code is available at Github.

# Create Project

The difference between a Web App and an Asimov Web DApp is that the later will interact with smart contracts on Asimov, the rest are all the same. As a result, we create a web project for Asimov DApp the same way as we develop a common web app.

In the sample we create a Vue project, for knowledge about Vue, please visit Vue Development Guide.

You need to install AsiLink to test and run an Asimov Web DApp, please read AsiLink.

# Asimov JS SDK

You need to install Asimov JS SDK and import necessary modules.

npm install @asimovdev/asimovjs
1

In Home.vue:

import {
  Transactions,
  ChainRpcProvider,
  Contracts,
  Setting
} from "@asimovdev/asimovjs";
1
2
3
4
5
6

For detail usage about Asimov JSSDK, please visit:Asimov Javascript SDK.

# Initialization

Create a Setting object, config rpc service url

let setting = Setting.getInstance();
setting.init({
  url: config[evn].baseURL
});
1
2
3
4

# Execute Smart Contract

Create a Contracts object, call its “execute” method. Pass in smart contract address, method name and asset value. Please deploy the smart contract beforehand using Web IDE tool. The sample contract is available in source code.

let contracts = new Contracts();
contracts
  .execute({
    address: contractAddress,
    method: "donate",
    assetValue: this.selNum
  })
  .then(tx => {
    this.loadingState = 1;
    let transactions = new Transactions();
    this.checkState(transactions, tx.txid, 10);
  });
1
2
3
4
5
6
7
8
9
10
11
12

# Confirm Transaction

Call “fetch” method of Contracts object, pass in txid which is available once the transaction is broadcasted. If you find result.status == “0x1” in fetch result, that means the donate transaction is confirmed on chain.

let transactions = new Transactions();
transactions.fetch(txid)
1
2

# Transaction History

Get transactions in page, including donate transactions and spend transactions.

const rpc = new ChainRpcProvider({
  baseURL: config[evn].baseURL
});
const contractAddress = config[evn].contractAddress;
rpc.getTransactionsByAddresses({
  addresses: [contractAddress],
  start: 0,
  offset: 10
})
1
2
3
4
5
6
7
8
9