Try a demo DApp

Let’s create a demo DApp by combining the key features of Luniverse that we have explored so far.
Links to CBT training materials and survey
[Luniverse CBT training satisfaction survey]
 Thank you for participating in our CBT training.
 Please take a moment to fill out our survey. Your comments will help us continue to improve our services.
 https://goo.gl/forms/EShAjbbiLj4EW2zU2​
[Training materials]
 https://s3.ap-northeast-2.amazonaws.com/luniverse/cbt-demo/201903-Luniverse+%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%87%E1%85%A5%E1%86%B8+%E1%84%80%E1%85%AD%E1%84%8B%E1%85%B2%E1%86%A8%E1%84%8C%E1%85%A1%E1%84%85%E1%85%AD.pdf​
​https://s3.ap-northeast-2.amazonaws.com/luniverse/cbt-demo/luniverse-cbt.zip​
Try a demo DApp
Let’s review the steps for developing a DApp using Luniverse by creating a demo app “Homeless Dog.”
The client (front-end) is developed in HTML and AJAX, and the server (back-end) uses Luniverse to define the DApp and transactions.
The communication between the client and server is carried out by REST API provided by Luniverse.
Configuring a client
Downloading the DApp source
Download the source file of the Homeless Dog demo app from the Git server.
 https://s3.ap-northeast-2.amazonaws.com/luniverse/cbt-demo/luniverse-cbt.zip​
Go to the demo-homeless-dogs/src/js directory.
$ cd demo-homeless-dogs/src/js
Open the config.js file and check the settings.
Follow the steps described in this file for settings of Luniverse Console and apply each setting to the config.js file.
var Config = {
  chainId: '1549700365125574752',
  mt: { 
    symbol: 'FTT',  // 1. Sidechain 의 Main Token 의 Symbol 을 설정한다.
  },
  st: {
    support: {
      symbol: 'SPT', // 2. FTT Main Token 과 연결된 Side Token symbol 을 설정한다.
    },
    adopt: {
      symbol: 'ADT', // 3. FTT Main Token 과 연결된 Side Token Symbol 을 설정한다.
    },
  },
  walletAddress: {
    // 4. PKMS 에서 PDAccount 를 만들어서 설정한다.
    pd: '0xee496921e4702d70714a2d77792471456cb1c9ed', 
    // 5. PKMS 에서 사용자  Account 를 만들어서 설정한다.
    user: '0x7fde41d1afdfd20674bc20294500850cb9efedc1'
  },
  dapp: {
    apiKey: // 5. HomelessDog 의 API Key 를 설정한다. 'CFnQFfTKgaUakhrmdWsSSn5w1aE1pZxK8HUx3mUb3DnVfhHZZGihzrNo24naQC1o
    
      },
  txActionName: {
    // 6. HomelessDogs.sol 컨트랙트의 함수를 트랜잭션으로 설정한다.
    setOwner: 'setOwner',
    getOwner: 'getOwner',
​
    // 7. SPT Token 의 Free Payed Transfer 를 트랜잭션으로 설정한다.
    support: 'Support',
​
    // 7. ADT Token 의 Free Payed Transfer 를 트랜잭션으로 설정한다.
    adopt: 'Adopt',
    reward: 'Reward',
  },
  userName: 'dino',
};
Running the DApp
Running the web server: To access the Homeless Dog application from browsers, you need to run the web server first. In this example, the web service is provided via the static-server of node.js. Follow the steps below to apply the static-server to Homeless Dog:
Go to the Homeless Dog source directory.
$ cd demo-homeless-dogs/src
Install the static-server npm module.
$ npm install static-server
Run the web server to operate the Homeless Dog application.
./node_modules/.bin/static-server
options.index is now deprecated please use options.templates.index instead.
* Static server successfully started.
* Serving files at: http://localhost:9080
* Press Ctrl+C to shutdown.
4. Homeless Dog, a demo web-application, is not connected to the blockchain at the moment.
5. Go to http://localhost:9080 in a browser.
6. When client settings are complete, the Homeless Dog page is displayed as shown above.
Configuring a server
Configure the server as shown below in Luniverse Console.
Create Side Tokens (ST) and configure the demo DApp server to use them in the free trial version. Note that you can only proceed with establishing a Side Chain environment and creating Main Tokens after purchasing the chain plan.
Creating Side Tokens
Guide: Minting Side Tokens (ST)​
In the [Console], create two tokens to use in Homeless Dog: SupportToken (SPT) and AdoptToken (ADT). Details of each token are as follows:
(1) SupportToken (SPT)
–TokenName: SupportToken
–TokenSymbol: SPT
–1MT: 100.00 PT
–Initial Supply: 10000
– Decimal: 18
(2) AdoptToken (ADT)
–TokenName: AdoptToken
–TokenSymbol: ADT
–1MT: 100.00 PT
–Initial Supply: 10000
– Decimal: 18
 Creating a Luniverse DApp and API key for “Homeless Dog”
– Guide: Creating a Luniverse DApp​
–DApp Name: HomelessDog
–DApp description: Homeless Dog
Deploying a smart contract for “Homeless Dog”
Deploying a smart contract from the console to a user contract list
Guide: Deploying a smart contract from the console​
Deploying via Atom IDE
Guide: Deploying a smart contract via Atom IDE​
–Contract Name: Homeless Dog
–Description: Homeless Dog
–Contract File: HomelessDog.sol
–Contract Select: HomelessDogs (attach a contract file and select)
/*HomelessDog.sol*/
​
pragma solidity ^0.4.18;
​
contract HomelessDogs {
 string [8] owner;
 function setOwner(uint _index, string _name) public {
   owner[_index] = _name;
 }
​
 function getOwner(uint _index) public view returns (string) {
   return owner[_index];
 }
}
Defining transactions for “Homeless Dog” in a Luniverse DApp
Homeless Dog requires two transactions to write and read the owner of a homeless dog on blockchain: getOwner and setOwner. The two transactions are defined as follows:
Guide: Creating a transaction list​
(1) Definition of the getOwner function
–Token/Contract: [User Contract] HomelessDapp
–Function: getOwner(uint256)
–Action Name: getOwner
– Description: getOwner
(2) Definition of the setOwner function
–Token/Contract: [User Contract] HomelessDapp
–Function: setOwner(uint256, string)
–Action Name: setOwner
– Description: setOwner
Defining an EOA List of the DApp for Homeless Dog Homeless Dog requires two EOAs: PDAccount and UserAccount.
These two EOAs are created in the format of REOA (Remote EOA) to manage the private key in the server.
Guide: Creating Whitelist IP and EOA​
Creating a PDAccount
–Name: PDAccount
– Description: PDAccount
Creating a User Account
–Name: UserAccount
– Description: UserAccount
Guide: Creating a transaction list​
(1) Creating a support transaction
–Token/Contract: [Side Token] SPT (SupportToken)
–Function: Free Simple Transfer
–Action Name: Support
– Description: Support
(2) Creating a reward transaction
–Token/Contract: [Side Token] ADT (AdoptToken)
–Function: Free Simple Transfer
–Action Name: Reward
– Description: Reward
(3) Creating an adopt transaction
–Token/Contract: [Side Token] ADT (AdoptToken)
Function: Free Simple Transfer
 – Action Name: Adopt
 – Description: Adopt
– Guide: Transferring Side Tokens​
(1) Transferring the created ADT tokens to PDAccount
–Recipient: Enter the PDAccount EOA address
– Amount Sent: 10,000
(2) Transferring the created SDT tokens to UserAccount
–Recipient: Enter the UserAccount EOA address from 2–5
– Amount Sent: 10,000
Guide: Creating Whitelist IP and EOA​
–Click [Add Whitelist IP], and register the outbound IP address of the machine to which demo-homeless-dogs has been applied.
Connecting a client to a server
Connecting the DApp
Go to the demo-homeless-dogs directory.
 $> cd demo-homeless-dogs
Make changes in the src/js/config.js file.
Changes in the file are shown below. Those parts marked with
 “**” should be filled with the information about the Side Chain ID, MT symbol, ST symbol, PD, and DApp API key and user’s EOA address from Luniverse Console.
var Config = {
  chainId: '**1549700365125574752**',
  mt: {
    symbol: '**F1879**',
  },
  st: {
    support: {
      symbol: '**SPT**',
    },
    adopt: {
      symbol: '**ADT**',
    },
  },
  walletAddress: {
    pd: '**0x2757619b095881be255f9880ae7e81e2118ba84c**',
    user: '**0x4dd643ff0eb9798792e3d28a36a668be15cd8c62**'
  },
  dapp: {
    apiKey: '**KcUSCE7iCZoJfud8iLdmBLdZBrRyVai4e5o6x8d9c4ZpYu2h5mwtmhEPm6285f23**'
  },
  txActionName: {
    setOwner: 'setOwner',
    getOwner: 'getOwner',
    support: 'Support',
    adopt: 'Adopt',
    reward: 'Reward',
  },
  userName: 'tester',
};
Running a DApp
Go to the demo-homeless-dogs/src directory.
 $> cd demo-homeless-dogs/src
If the web server is not installed, use the following command to install the static-server npm module.
 $> npm install static-server
Run the web server to operate the Homeless-dog application.
 $> ./node_modules/.bin/static-server
./node_modules/.bin/static-server
options.index is now deprecated please use options.templates.index instead.
* Static server successfully started.
* Serving files at: http://localhost:9080
* Press Ctrl+C to shutdown.
4. Go to http://localhost:9080 in a browser.
Preparation
Last updated 3 months ago