開發Dapp

開發Dapp流程

1.vue前端生成項目, 寫好前端頁面

2.安裝truffle
npm install -g truffle
npm install -g ethereumjs-testrpc

3.下載ganache軟件
https://www.trufflesuite.com/ganache#

4.在谷歌瀏覽器下載MetaMast小狐狸插件, 加入應項目中生成的私匙

4.在根目錄初始化truffle
truffle init

5.配置truffle-config.js
module.exports = {
  contracts_build_directory: "./src/contract",	// 輸入目錄
  網絡
  networks: {
    development: {
     host: "127.0.0.1",     // Localhost (default: none)
     port: 7545,            // Standard Ethereum port (default: none)
     network_id: "*",       // Any network (default: none)
    },
  }
};

6.migrations目錄文件是錢包那邊給的, contracts目錄文件也是錢包那邊給的sol文件

7.靜態文件引入web3.js與, truffle-contract.js (用package.josn 也可以引入)

8.web3.js初始化, 在app.vue中
window.addEventListener('load', async () => {
	var web3Provider;
	if (window.ethereum) {
		web3Provider = window.ethereum;
		try {
			// 請求用戶授權
			await window.ethereum.enable();
		} catch (error) {
			// 用戶不授權時
			console.error('User denied account access');
		}
	} else if (window.web3) {
		// 老版 MetaMask Legacy dapp browsers...
		web3Provider = window.web3.currentProvider;
	} else {
		web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
	}
	window.web3 = new Web3(web3Provider);
	new Vue({
		i18n,
		router,
		store,
		render: h => h(App),
	}).$mount('#app');
});

9.啟動truffle
truffle develop
compile
migrate

10. 如何使用, 如MetaCoin.js
import MetaCoin from '@/contract/MetaCoin.json';
let adoptionInstance = null;
const Contracts = {
	contract: null,

	// 初始化
	init() {
		return new Promise((resolve, reject) => {
			if (adoptionInstance) {
				resolve();
				return;
			}
			this.contract = TruffleContract(MetaCoin);
			this.contract.at('0x80fa9638580fD0c325e27FD84845Eb0957Da32C0');	// 項目生成合約地址
			this.contract.setProvider(window.web3.currentProvider);
			this.contract
				.deployed()
				.then(instance => {
					adoptionInstance = instance;
					resolve();
				})
				.catch(err => {
					reject(err);
				});
		});
	},
	// 投資買入, MetaCoin.json中的方法
	buy(address, params) {
		return new Promise((resolve, reject) => {
			adoptionInstance
				.buy(address, params)
				.then(res => {
					resolve(res);
				})
				.catch(err => {
					reject(err);
				});
		});
	},
};

export default Contracts;

11.獲取帳戶地址
/**
 * 獲取帳號
 */
export function getAccounts() {
	return new Promise((resolve, reject) => {
		window.web3.eth.getAccounts((error, accounts) => {
			if (error) {
				console.log(error);
				reject(error);
			}
			var account = accounts[0];
			resolve(account);
		});
	});
}