文件列表:

.angular-cli.json (1239, 2018-03-25)
.angulardoc.json (71, 2018-03-25)
.editorconfig (245, 2018-03-25)
build (0, 2018-03-25)
build\contracts (0, 2018-03-25)
build\contracts\Migrations.json (52220, 2018-03-25)
build\contracts\NameChange.json (30651, 2018-03-25)
contracts (0, 2018-03-25)
contracts\Migrations.sol (515, 2018-03-25)
contracts\NameChange.sol (281, 2018-03-25)
e2e (0, 2018-03-25)
e2e\app.e2e-spec.ts (286, 2018-03-25)
e2e\app.po.ts (208, 2018-03-25)
e2e\tsconfig.e2e.json (235, 2018-03-25)
karma.conf.js (923, 2018-03-25)
migrations (0, 2018-03-25)
migrations\1_initial_migration.js (129, 2018-03-25)
migrations\2_deploy_namechange.js (155, 2018-03-25)
package-lock.json (527919, 2018-03-25)
package.json (1701, 2018-03-25)
protractor.conf.js (722, 2018-03-25)
src (0, 2018-03-25)
src\app (0, 2018-03-25)
src\app\app.component.css (0, 2018-03-25)
src\app\app.component.html (1302, 2018-03-25)
src\app\app.component.spec.ts (986, 2018-03-25)
src\app\app.component.ts (3641, 2018-03-25)
src\app\app.module.ts (437, 2018-03-25)
src\assets (0, 2018-03-25)
src\environments (0, 2018-03-25)
src\environments\environment.prod.ts (51, 2018-03-25)
src\environments\environment.ts (387, 2018-03-25)
src\favicon.ico (5430, 2018-03-25)
src\index.html (291, 2018-03-25)
src\main.ts (370, 2018-03-25)
src\polyfills.ts (2405, 2018-03-25)
... ...

# Ethereum Decentralized application This document provides you the guidance on how to create a decentralized application and test on ethereum blockchain ##### Tools and Frameworks We are using followinng tools and frameworks for this application * [truffle] - as development tool. * [Ganache] - as ethereum development test network. * [Metamask] - as Web3 Api injector * [angular-cli] - as framework for web client application. The steps are - Download and Install Ganache - Install truffle - Create truffle project structure - Create smart contract - Compile and deploy the smart contract - Create angular 5 application - Interact with blockchain with smart contract method call ##### 1. Install Ganache Download and install ganache based on your OS. ganache comes guid and cli mode. lets use gui one now http://truffleframework.com/ganache/ If you open ganache after install, you can see 10 fake ethereum accounts with balance of 100 ether for each account. ##### 2. truffle Project install truffle and Create truffle project Create a directory 'ethereumdapp' and create truffle project. use 'truffle init' command ```sh D:\blockchain\ethereum>npm install -g truffle D:\blockchain\ethereum>mkdir ethereumdapp D:\blockchain\ethereum>cd ethereumdapp D:\blockchain\ethereum\ethereumdapp>truffle init Downloading... Unpacking... Setting up... Unbox successful. Sweet! Commands: Compile: truffle compile Migrate: truffle migrate Test contracts: truffle test D:\blockchain\ethereum\ethereumdapp>dir 03/24/2018 05:15 PM . 03/24/2018 05:15 PM .. 03/24/2018 05:15 PM contracts 03/24/2018 05:15 PM migrations 03/24/2018 05:15 PM test 03/24/2018 05:15 PM 135 truffle-config.js 03/24/2018 05:15 PM 135 truffle.js 2 File(s) 270 bytes 5 Dir(s) 222,028,505,088 bytes free ``` ##### 3. Create simple smart contract Now we will create smart contract file. we use solidity as smart contract programminng language version 0.4.19. The purpose of this contract is to initiate a state variable called 'name' in the blockchain and manipulating that value of that variable by invoking our smart contract method from a dapp. user changes the name variable value and show the change on the page. contract name is 'NameChange' View name method is 'showName() Change name method is changename(string) Let's create 'NameChange.sol' file under 'contracts' folder in our project folder(ethereumdapp). add this content to the NameChange.sol ```sh pragma solidity ^0.4.19; contract NameChange{ string name; function NameChange(string initialname) public { name = initialname; } function showName() public constant returns(string) { return name; } function changename(string newname)public { name = newname; } } ``` ##### 4. Compile the contract Use 'truffle compile' the contract ```sh D:\blockchain\ethereum\ethereumdapp>truffle compile Compiling .\contracts\Migrations.sol... Compiling .\contracts\NameChange.sol... Writing artifacts to .\build\contracts ``` It creates a NameChange.json into the /build folder this files contains the ABI details for the contract, meaning that Application Binary Interface. The Application Binary Interface (ABI) is a data encoding scheme used in Ethereum for working with smart contract. this can be used in later stage of this process. ##### 5. Deploy the contract Till now, we have created smart contract and compiled. Now the time for deploy the contract to blockchain which is the ganache, the test blockchain. For that, we need to configure this project with the blockchain address and port number which is available in ganache settings. We can provide this information truffle.js or truffle-config.js in the project folder. ```sh module.exports = { networks: { development: { host: '127.0.0.1', port: 7545, network_id: '*' // Match any network id } }}; ``` The above config tells this deploy command to deploy contract ganache. to deploy use truffle migrate command For migrate / deploy the contract, we need tell how to create instance for contract and send initial paramters if any required to the contract constructor. for that, we need to create 2_deploy_namechange.js in migrations folder in the project ```sh var NameChange = artifacts.require("./NameChange.sol"); module.exports = function(deployer) { deployer.deploy(NameChange,"initial name from chain"); }; ``` Every thing is ready to deploy the contract. ```sh D:\blockchain\ethereum\ethereumdapp> truffle migrate Using network 'development'. Running migration: 1_initial_migration.js Replacing Migrations... ... 0xd0b495e94047c454c62eaa31533491d559de11c84914b5d4a9ce0f7b5703ef57 Migrations: 0x8cdaf0cd25***87258bc13a92c0a6da926******4c0 Saving successful migration to network... ... 0xd7bc86d31bee32fa3***8f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956 Saving artifacts... Running migration: 2_deploy_namechange.js Replacing NameChange... ... 0x4dcf9df45f91b76d204eb86f3e839d9257c7b15008fc5efb6b14abbe0bbdfdf2 NameChange: 0x345ca3e014aaf5dca488057592ee47305d9b3e10 Saving successful migration to network... ... 0xf36163615f41ef7ed8f4a8f192149a0bf633fe1a23***ce001bf44c43dc7bdda0 Saving artifacts... ``` At this stage contract is deployed to the ganache and generated a contract address. This can confirmed in ganache trasaction list ##### 6.Dapp This is angular 5 app that we provide user interface to the user to interact with blockchain through this app. we use angular-cli commands to create and run the app Change directory back a level and execute 'ng new ethereumdapp' ```sh D:\blockchain\ethereum\ethereumdapp>cd.. D:\blockchain\ethereum>ng new ethereumdapp ``` Let's add UI for viewing the blockchain state variable value on the page. a provision for change the value. add following code src\app\app.component.html ```sh

Name change dapp

Your Name is: {{name}}

Change Name

{{status}}

New Name

This field is required

Send

``` UI component / controller code in src\app\app.component.ts ```sh import { Component, HostListener, NgZone } from '@angular/core'; const Web3 = require('web3'); const contract = require('truffle-contract'); const nameChangeArtifacts = require('../../build/contracts/NameChange.json'); declare var window: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { name = 'Initial name from component'; NewName : string; nameChange = contract(nameChangeArtifacts); account: any; accounts: any; web3: any; status: string; constructor(private _ngZone: NgZone) { } @HostListener('window:load') windowLoaded() { this.checkAndInstantiateWeb3(); this.onReady(); } checkAndInstantiateWeb3 = () => { // Checking if Web3 has been injected by the browser (Mist/MetaMask) if (typeof window.web3 !== 'undefined') { console.warn( 'Using web3 detected from external source. If you find that your accounts don\'t appear or you have 0 MetaCoin, ensure you\'ve configured that source properly. If using MetaMask, see the following link. Feel free to delete this warning. :) http://truffleframework.com/tutorials/truffle-and-metamask' ); // Use Mist/MetaMask's provider this.web3 = new Web3(window.web3.currentProvider); } else { console.warn( 'No web3 detected. Falling back to http://127.0.0.1:8545. You should remove this fallback when you deploy live, as it\'s inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask' ); // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail) this.web3 = new Web3( new Web3.providers.HttpProvider('http://127.0.0.1:7545') ); } }; onReady = () => { // Bootstrap the MetaCoin abstraction for Use. this.nameChange.setProvider(this.web3.currentProvider); // Get the initial account balance so it can be displayed. this.web3.eth.getAccounts((err, accs) => { if (err != null) { alert('There was an error fetching your accounts.'); return; } if (accs.length === 0) { alert( 'Couldn\'t get any accounts! Make sure your Ethereum client is configured correctly.' ); return; } console.log(accs); this.accounts = accs; this.account = this.accounts[0]; // This is run from window:load and ZoneJS is not aware of it we // need to use _ngZone.run() so that the UI updates on promise resolution this._ngZone.run(() => this.refreshName() ); }); }; refreshName = () => { let nc; this.nameChange .deployed() .then(instance => { nc = instance; return nc.showName.call({ from: this.account }); }) .then(value => { this.name = value; }) .catch(e => { console.log(e); this.setStatus('Error getting name; see log.'); }); }; changeName = () => { const nawname = this.NewName; let nc; this.setStatus('Initiating transaction... (please wait)'); this.nameChange .deployed() .then(instance => { nc = instance; return nc.changename(nawname,{from: this.account}) }) .then(() => { this.setStatus('Transaction complete!'); this.refreshName(); }) .catch(e => { console.log(e); this.setStatus('Error changing name; see log.'); }); }; setStatus = message => { this.status = message; }; } ``` ##### 7. Metamask Metamask acts as web3 injector to our page. - Add extension to your chrome browser - Add custom RPC with your ganache rpc url which would http://localhost:7545 - You can see your ganache generated first account in metamask accounts list - You user submits a change from page which invokes the contract method, metamask asks for confirmation Now ready to the serve the app Change directory to the ethereumdapp ```sh D:\blockchain\ethereum>cd ethereumdapp D:\blockchain\ethereum\ethereumdapp>ng serve -o ``` It opens the browser with http://localhost:4200 and shows our page. enter the name in new name textbox and hit submit ##### 8. Conclusion If you do not want to generate all the files, you simply download this repository and install prereqs. It will be ready For help: contact - Sreenivas Chinni - schinni.vija@gmail.com [truffle]: [angular-cli]: [ganache]: [MetaMask]:

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：