Experimental Dapp

— Name: Experimental Dapp
— Script Lanuage:
JavaScript
— Blockchain: Ethereum Ropsten
— Deployed Contract:
0xc80cae7c51f27bc25b3862d072d56fa84965f5c1
— Version: 0.0.1 beta version
— Usage: Demonstrating a Simple Dapp

To use this  Application it is nessesary to install the MetaMask Tool and have an Ethereum wallet on it, in order to get access to the Blockchain. This is the prerequesit for any KaraSpace user anyway. This tool works only as a browser extension for Firefox and Chrome.


This very simple demo application allows every blockchain wallet owner to change the number in the related Smat Contract.

Insert and retrieve value on the blockchain

Insert a new value :

 

The main poupose of the Distributed BlockChian Application for KaraSpace is the absolute open source transparency of the action and the temper free storage of the records. For this, the application code as well as the smart contract must be layed open, and prove to describe the actual code that is running. For this, the source code and the development tools are provided.


Distributed Blockchain App Recources and Sourcecode

Smart Contract

Etherscan

Web3.js

Swarm

Edit Code

<script>window.onload = function () {
// check to see if user has metamask addon installed on his browser. check to make sure web3 is defined
if (typeof web3 === 'undefined') {
document.getElementById('metamask').innerHTML = 'You need <a href="https://metamask.io/">MetaMask</a> browser plugin to run this example'
}
// call the getvalue function here
	document.getElementById('metamask').innerHTML = 'Experiemntal Dapp';
	getvalue();
}
//function to retrieve the last inserted value on the blockchain
function getvalue() {
try {
// contract Abi defines all the variables,constants and functions of the smart contract. replace with your own abi
var abi = [
{
"constant": false,
"inputs": [
{
"name": "x",
"type": "uint256"
}
],
"name": "set",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": true,
"inputs": [],
"name": "get",
"outputs": [
{
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
}
]
//contract address. please change the address to your own
var contractaddress = '0xc80cae7c51f27bc25b3862d072d56fa84965f5c1';
//instantiate and connect to contract address via Abi
var myAbi = web3.eth.contract(abi);
var myfunction = myAbi.at(contractaddress);
//call the get function of our SimpleStorage contract
myfunction.get.call(function (err, xname) {
if (err) { console.log(err) }
if (xname) {
//display value on the webpage
document.getElementById("xbalance").innerHTML = "last inserted value into the blockchain is : " + xname;
}
});
}
catch (err) {
document.getElementById("xbalance").innerHTML = err;
}
}
// function to add a new integer value to the blockchain
function setvalue() {
try {
// contract Abi defines all the variables,constants and functions of the smart contract. replace with your own abi
var abi = [
{
"constant": false,
"inputs": [
{
"name": "x",
"type": "uint256"
}
],
"name": "set",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": true,
"inputs": [],
"name": "get",
"outputs": [
{
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
}
]
//contract address. please change the address to your own
var contractaddress = '0xc80cae7c51f27bc25b3862d072d56fa84965f5c1';
//instantiate and connect to contract address via Abi
var myAbi = web3.eth.contract(abi);
var myfunction = myAbi.at(contractaddress);
//call the set function of our SimpleStorage contract
myfunction.set.sendTransaction(document.getElementById("xvalue").value, { from: web3.eth.accounts[0], gas: 4000000 }, function (error, result) {
if (!error) {
console.log(result);
} else {
console.log(error);
}
})
} catch (err) {
document.getElementById("xvalue").innerHTML = err;
}
}
</script>

//Here starts the HTML part of the dapp

<div id="metamask"> </div>
<h3>Insert and retrieve value on the blockchain</h3>
<table>
<tbody>
<tr>
<td> </td>
<td>
<div id="xbalance"> </div>
</td>
</tr>
<tr>
<td>Insert a new value :</td>
<td><input id="xvalue" type="text" />
	<input id="Button1" type="button" onclick="setvalue()" value="Add to Blockchain" />
	</td>
</tr>
</table>

 

More Recources:

 

This post is also available in: Deutsch 简体中文