共计 3842 个字符，预计需要花费 10 分钟才能阅读完成。
写在后面
1. 对以太坊、智能合约有所理解。
2. 有一些编程根底，看得懂简略的代码逻辑和 HTML。
环境装置
首先，咱们要装置我的项目代码的运行环境
1. Node 装置
进入 Node 官网：https://nodejs.org/en/download/，下载适宜你电脑的版本。
2. Truffle 装置
装置完 Node 之后，应用命令行输出上面的命令
npm install -g truffle
装置实现后，输出命令 truffle version 显示下方信息就阐明环境装置实现了。
3. 装置 Ganache
进入 Ganache 官网：https://trufflesuite.com/gana…，下载适宜你电脑的版本。
下载我的项目模板 pet-shop
接下来就是下载 truffle 提供的我的项目模板。
我的项目介绍：Pete 有一个宠物店，有 16 只宠物，他想开发一个去中心化利用，让大家来领养宠物。
在 truffle box 中，曾经提供了 pet-shop 的网站局部的代码，咱们只须要编写合约及交互局部。新建一个空文件夹，应用命令行进入其中，输出下载命令：
truffle unbox pet-shop
下载实现
增加合约和部署代码
应用代码编辑软件关上我的项目（我用的是 vscode），上面是文件截图
1. 增加 Adoption 合约
- 在 contracts 文件夹下，新建 Adoption.sol 文件，输出以下代码：
pragma solidity ^0.5.0;
contract Adoption {
address[16] public adopters; function adopt(uint256 petId) public returns (uint256) {
require(petId >= 0 && petId <= 15); adopters[petId] = msg.sender; return petId;
}
function getAdopters() public view returns (address[16] memory)
{
return adopters;
}
}
2. 增加部署合约文件
在 migrations 文件夹下，新建 adoption.js 文件，输出以下代码：
var Adoption = artifacts.require(“./Adoption.sol”);module.exports = function (deployer) {deployer.deploy(Adoption);
};
编译、部署合约
关上 Ganche，点击第一个“QUICKSTART”，Ganche 会主动开启一条本地私链，并提供 10 个钱包地址。
关上控制台（终端），开始编译部署合约：
编译命令：truffle compile
编译实现会生成 build 文件夹。
部署命令：truffle migrate
创立用户接口和智能合约交互
咱们曾经编写和部署及测试好了咱们的合约，接下咱们要编写我的项目中的交互逻辑代码。关上 src/js/app.js 文件，批改上面函数：
initWeb3: async function () {
// Modern dapp browsers… if (window.ethereum) {
App.web3Provider = window.ethereum;
try {
// Request account access await window.ethereum.enable();
} catch (error) {
// User denied account access… console.error(“User denied account access”); }
}
// Legacy dapp browsers… else if (window.web3) {
App.web3Provider = window.web3.currentProvider; }
// If no injected web3 instance is detected, fall back to Ganache
else {
App.web3Provider = new Web3.providers.HttpProvider(“http://localhost:7545”
);
}
web3 = new Web3(App.web3Provider); return App.initContract();
},
initContract: function () { $.getJSON(“Adoption.json”, function (data) {var AdoptionArtifact = data; App.contracts.Adoption = TruffleContract(AdoptionArtifact);
App.contracts.Adoption.setProvider(App.web3Provider);
return App.markAdopted();
});
return App.bindEvents();
},
markAdopted: function (adopters, account) {var adoptionInstance; App.contracts.Adoption.deployed() .then(function (instance) {adoptionInstance = instance; return adoptionInstance.getAdopters.call(); }) .then(function (adopters) {for (i = 0; i < adopters.length; i++) {if (adopters[i] !== “0x0000000000000000000000000000000000000000”) {$(“.panel-pet”)
.eq(i)
.find(“button”)
.text(“Success”)
.attr(“disabled”, true);
}
}
})
.catch(function (err) {console.log(err.message);
});
},
handleAdopt: function (event) {event.preventDefault();
var petId = parseInt($(event.target).data(“id”)); var adoptionInstance; web3.eth.getAccounts(function (error, accounts) {if (error) {console.log(error); } var account = accounts[0]; App.contracts.Adoption.deployed() .then(function (instance) {adoptionInstance = instance; return adoptionInstance.adopt(petId, { from: account}); }) .then(function (result) {return App.markAdopted();
})
.catch(function (err) {console.log(err.message);
});
});
},};
配置私链信息和导入钱包账户
编写完交互逻辑，当初咱们要让我的项目跑起来。
首先，咱们要装置钱包插件，举荐应用 chorme 浏览器的 metamask 钱包插件，这是 metamask 钱包装置教程：https://www.chainpip.com/arti…
装置实现后，咱们要配置私链信息和导入钱包账户。
1. 配置私链信息
Network Name：私链名称，轻易设置
New RPC URL：这是私链的交互接口，填 Ganache 顶部的 RPC SERVER 的值
Chain ID：这是 Ganache 私链的 ID，默认是 1337
Currency Symbol：主币的符号，就填 ETH，不便学习
点击 Save 保留网络
2. 导入钱包账户
在 Ganache 中，左侧有个钥匙符号，点击它，弹出账户私钥（PRIVATE KEY）信息，复制私钥。
关上钱包，点击头像，抉择下方的“Import Account”
将之前复制的私钥粘贴到输入框中，点击 Import，这样就实现账户导入了。
测试 DAPP 接下来就能够测试 DAPP 了，在 vscode 终端输出命令：npm run dev 我的项目就运行起来了。
接下来，连贯刚刚导入的钱包账户
测试领养性能，点击 Adopt，确认上链申请，领养实现，显示 Success。
最初这样一个 DAPP 就部署实现了，想要理解更多的区块链常识或是有什么相干的问题和想法，能够来我的交换社区 CHAINPIP 提出来，欢送你的到来哦。
