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
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.
- Homeless Dog, a demo web-application, is not connected to the blockchain at the moment.
- Go to http://localhost:9080 in a browser.
- 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
- Deploying 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.
Creating a PDAccount
Name: PDAccount
– Description: PDAccount
Creating a User Account
Name: UserAccount
– Description: UserAccount
Defining transactions for the Side Tokens (SPT, ADT) for Homeless Dog
- 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
Transferring Side Tokens to PDAccount and UserAccount
– 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
Registering an IP Whitelist to Luniverse Transaction API
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.
- Go to http://localhost:9080 in a browser.
Updated about 3 years ago