共计 10239 个字符，预计需要花费 26 分钟才能阅读完成。
以下文章来源于黑曜石实验室，作者 Obsidian Labs
一、简介
Conflux Studio 是一个帮忙开发者疾速开发 Conflux 智能合约的集成化开发环境。Conflux DApp 开发教程将应用 Conflux Studio 在 Oceanus 网络下开发一个简略的代币利用 Coin。
通过这个开发教程，你将会学习到如何进行 Conflux 智能合约的编写、调用，配置智能合约的代付以及如何应用 Web 前端我的项目与智能合约进行交互，从而实现一个蕴含前端和智能合约的残缺的 DApp。
二、筹备工作
2.1 装置 IDE
请在 GitHub 的下载页面
(github.com/ObsidianLabs/ConfluxStudio/releases) 下载 Conflux Studio。目前 Conflux Studio 反对 macOS 和 Linux 零碎，请依据零碎下载对应的版本。
正确装置 Conflux Studio 并首次启动后，Conflux Studio 将显示欢送页面，依据提醒实现 Docker, Conflux Node 以及 Conflux Truffle 的下载、装置及启动。
2.2 创立钱包
实现所有的装置步骤后，首先须要创立钥匙对来实现后续的合约部署以及调用。
在 Conflux Studio 的任意界面，点击利用左下⻆的钥匙图标，关上密钥管理器。点击 Create 按钮关上新钥匙对弹窗，输出钥匙对的名字并点击 Save 按钮。实现后将在密钥管理器中看到刚刚生成的钥匙对的地址。钥匙对由私钥和公钥组成，公钥在智能合约中也常被称作地址。
导出私钥能够通过点击每个地址前面的眼睛按钮关上查看私钥弹窗，弹窗显示地址以及私钥。后续教程中会须要通过管理器导出私钥。
为了顺利完成教程，首先须要创立三个钥匙对：
· minter_key 用于 Coin 合约部署时的签名，是这个教程中最常应用的钥匙对
· receiver_key 用于 Coin 合约接管转账，将在后文中介绍转账时用到
· sponsor_key 用于 Coin 合约代付性能，将在后文中介绍代付性能时用到
2.3 连贯 Conflux 网络
教程将在 Oceanus 网络进行合约的部署以及合约的调用。点击顶部 Network 标签的倒三角关上下拉菜单，点击抉择 Oceanus 网络进行切换。
切换实现后，能够在主页面中看到以后网络为 oceanus。页面右边包含了以后网络的节点 URL，Chain ID，TPS 信息，页面左边蕴含了以后网络区块的信息。
2.4 申请测试 CFX
点击顶部 Explorer 标签关上区块浏览器，并在地址栏粘贴钥匙对地址，能够在右边看到以后地址的 CFX 余额信息。
在区块链的世界中，大家通常将申请测试 Token 的形式称为 faucet，目前在 Oceanus 网络下每次 faucet 申请到的 Token 为 100 CFX。
获取 CFX 的形式有两种形式：
· 输出地址后点击地址栏左边的水龙头按钮，Conflux Studio 将为地址主动申请 CFX；
· 你也能够间接在浏览器中输出 wallet.confluxscan.io/faucet/dev/ask?address={address} 来申请 CFX；
应用上述办法在 Conflux Studio 中为 minter_key 和 sponsor_key 申请 CFX Token。实现申请后，这两个账户上的余额将会从 0 CFX 更新为 100 CFX。
目前余额信息为：
· minter_key 余额 100 CFX
· receiver_key 余额 0 CFX
· sponsor_key 余额 100 CFX
三、智能合约创立我的项目
3.1 创立我的项目
点击顶部右边的 Project 标签切换至我的项目列表页面，点击页面中的 New 按钮关上我的项目创立窗口，输出我的项目的名称并抉择 coin 模版，点击 Create Project 实现我的项目的创立。
3.2 合约代码
Coin 合约是一个简略的代币合约，其中：
· 通过 mint 办法能够增发代币数量
· 通过 send 办法能够将肯定数量的代币转账给别的用户，同时会在事件中记录下这笔转账的信息
· 通过 balanceOf 办法能够查问到指定账户地址的代币余额
· 通过 add_privilege 办法能够为合约增加代付白名单
· 通过 remove_privilege 办法能够为合约移除代付白名单
Conflux 智能合约应用 Solidity 语言进行开发，关上目录下的 contracts/Coin.sol 文件，这个是本我的项目的外围代码：
// 指定了 Solidity 的版本，通过 Pragmas(https://solidity.readthedocs.io/en/latest/layout-of-source-files.html#pragmas) 通知编译器本代码能够兼容的版本为 0.5.0 到 0.7.0
pragma solidity >=0.5.0 <0.7.0;
// 导入 SponsorWhitelistControl 合约
import "./SponsorWhitelistControl.sol";
// 定义 Coin 的合约
contract Coin {// 定义了两个 State Variables(https://solidity.readthedocs.io/en/latest/structure-of-a-contract.html#state-variables)
address public minter;
mapping (address => uint) private balances;
// 应用 SponsorWhitelistControl 合约连贯零碎合约
SponsorWhitelistControl constant private SPONSOR = SponsorWhitelistControl(address(0x0888000000000000000000000000000000000001));
// 定义了 `Sent` 的事件，定义了 from / to / amount 列
event Sent(address from, address to, uint amount);
// Coin 合约的 constructor，在 constructor 中指定了 minter 的地址
constructor() public {
// msg.sender 为部署合约时签名的账户地址，将这个地址赋值给 minter
minter = msg.sender;
}
// 定义 mint 办法，通过此办法来增发代币
function mint(address receiver, uint amount) public {require(msg.sender == minter);
require(amount < 1e60);
balances[receiver] += amount;
}
// 定义 send 办法，通过此办法能够给别的账户转账代币
function send(address receiver, uint amount) public {require(amount <= balances[msg.sender], "Insufficient balance.");
balances[msg.sender] -= amount;
balances[receiver] += amount;
// 通过 emit 触发 Sent 事件，记录这笔转账的信息
emit Sent(msg.sender, receiver, amount);
}
// 定义 balanceOf 办法，这是个 view 类型的办法，用于查问账户余额
function balanceOf(address tokenOwner) public view returns(uint balance){return balances[tokenOwner];
}
// 定义了 add_privilege 办法，调用零碎合约 add_privilege 办法增加地址到代付白名单
function add_privilege(address account) public payable {address[] memory a = new address[](1);
a[0] = account;
SPONSOR.add_privilege(a);
}
// 定义了 remove_privilege 办法，调用零碎合约 remove_privilege 从合约代付白名单中移除地址
function remove_privilege(address account) public payable {address[] memory a = new address[](1);
a[0] = account;
SPONSOR.remove_privilege(a);
}
}
3.3 编译及部署合约
点击工具栏的 Build 按钮进行合约的编译，编译的后果将会保留在 build/Coin.json 文件中。
在部署合约前，首先须要确认在 Explorer 中抉择合约部署所应用的地址，Conflux Studio 会应用这个地址将部署合约这笔交易进行签名（抉择的办法为在 Explorer 的地址栏中输出地址）。在合约代码的 constructor 中，minter 被赋值为 msg.sender，这个 msg.sender 就是 Explorer 所抉择的地址。
在此咱们抉择 minter_key 作为部署合约的签名者。
点击工具栏的部署按钮进行部署，部署实现后，部署后果会在 deploys 的 JSON 文件中，在这个文件中能够在 contractCreated 中找到以后合约部署的地址，后文中应用 contract_addr 来代表这个合约地址。
四、调用合约
点击顶部的 Contract 标签切换至合约页面，在地址栏输出 contract_addr 地址并加载合约。
合约页面由三个局部组成：
· 右边为合约调用区域
· 两头为合约数据查问区域
· 左边为事件查问区域
4.1 合约调用及查问
4.1.1 增发代币
点击合约调用的下拉菜单中抉择 mint 办法，在下方的参数区域别离填入以下信息：
· receiver 接管代币的地址。填入 minter_key 地址
· amount 发行的代币总数。填入整数 1000
· Value 选填项，具体可查看 Value 详解。填 0 或者不填
· Signer 这笔交易的签名地址，如果没有开明代付性能，交易手续费将在这个账户地址中扣除，在合约代码中通过 msg.sender 获取到这个地址。填入 minter_key 地址
填写实现后点击执行按钮，Conflux Studio 将主动结构交易并推送到网络中。胜利执行后能够在下方 Result 中看到这笔胜利的交易。
4.1.2 查问代币余额
点击查问区域的下拉菜单并且抉择 balanceOf 办法，这是在代码中定义的查询方法。在下方的 tokenOwner 填入 minter_key 地址并点击执行，就能够在下方的 Result 中看到 minter_key 账户的 Coin 代币的余额信息为 1000。应用同样办法能够查问到 receiver_key 账户的代币余额为 0。
4.1.3 转账代币
在合约调用区域抉择 send 办法，在 Parameters 中别离填入：
· receiver 收款人地址。填入 receiver_key 地址
· amount 转账的代币数量。填入整数 200
· Signer 这笔交易的签名地址，代币转出的数量将会在这个账户中扣除。填入 minter_key 地址，
点击执行实现转账，再次查问代币余额能够看到 minter_key 账户只剩下 800 代币，而 receiver_key 账户则从 0 变成了 200 代币。
4.1.4 Value 参数
Conflux 智能合约的每个调用的办法都能够带上 Value 参数，这是一个可选的参数。如果带上了这个值，智能合约除了在执行这个办法的逻辑外，还会额定转 Value 中指定数量的 CFX token 到 receiver 账户，转账金额为 Value 中所填的值。有些智能合约的办法须要这个参数才能够实现调用，然而在 Coin 合约不须要这个参数。
后文中的代付性能将会应用到 Value 参数。
4.2 查问事件
在事件区域抉择 Sent 并点击执行，下方的 Event Logs 能够看到转账的记录。Sent 事件的列都是由代码中的 Sent 事件的参数来定义的（其中 epoch 为事件产生的工夫，这个为零碎默认列）。在代码中定义了 Sent 办法的参数为 from，to 和 amount，别离对应了这笔转账的发起者地址，接受者地址以及转账的数量。
五、代付性能
Conflux Studio 反对 Conflux 零碎合约提供的代付性能。
通过零碎合约能够为别的合约设置代付性能，零碎合约提供给了四个办法：
· add_privilege 增加合约代付白名单，在代付白名单中的地址调用该合约的办法时不须要付手续费，费用由代付账户领取。其中增加非凡地址 0x0000000000000000000000000000000000000000 代表为所有调用该合约的地址代付费用
· remove_privilege 移除合约代付白名单
· set_sponsor_for_collateral 设置合约贮存费 (collateral for storage) 的代付账户及代付金额
· set_sponsor_for_gas 设置合约手续费 (gas fee) 的代付账户、代付金额及每笔交易代付金额下限
启用一个合约的代付须要设置代付的账户、代付金额及代付白名单。教程将会应用 Conflux Studio 通过零碎合约设置代付账户及代付金额，通过 Coin 合约增加代付白名单。设置实现后，minter_key 账户调用 Coin 合约的办法时将不会被扣除手续费，手续费由 sponsor_key 账户代付。
5.1 设置代付账户及代付金额
在 Conflux Studio 中拜访零碎合约地址
0x0888000000000000000000000000000000000001，在合约调用区域能看到前文中提及的四个设置代付的办法。
抉择 set_sponsor_for_collateral 办法，该办法有三个参数：
· contract_addr 设置代付的合约地址。填入 contract_addr
· Value 设置代付金额。填入整数 40
· Signer 代付账户地址。填入 sponsor_key 地址
填好以上参数并执行运行，零碎合约将为 Coin 合约设置好贮存费代付账户，此时 sponsor_key 账户将会被扣除 40 CFX。
抉择 set_sponsor_for_gas 办法，该办法有四个参数：
· contract_addr 设置代付的合约地址。填入 contract_addr
· upper_bound 设置每笔交易代付的下限。填入 1000000000000
· Value 设置代付金额。填入整数 40
· Signer 代付账户地址。填入 sponsor_key 地址
填好以上参数并再次执行运行，零碎合约将为 Coin 合约设置好手续费代付账户，此时 sponsor_key 账户将会再次被扣除 40 CFX。
实现这两个办法的调用后 Coin 合约代付账户便设置好了，sponsor_key 账户将为 Coin 合约的手续费和贮存费各提供为 40 CFX Token 的代付服务。因为目前代付白名单中并没有账户地址，因而还须要增加白名单地址能力实现代付设置。
5.2 增加代付白名单
在 Coin 合约中集成了设置代付白名单的办法，通过调用此办法能够增加或删除代付白名单。
在 Conflux Studio 中拜访 contract_addr 合约，抉择 add_privilege 办法：
· account 增加白名单的地址。填入 minter_key 地址
· Value 不填
· Signer 这笔交易的签名地址。填入 minter_key 地址
运行后就胜利设置了代付白名单了，至此 Coin 合约的代付性能设置好了。
5.3 代付测试
在进行代付测试前，先查问并记录下 minter_key 账户的 CFX 余额。例如本教程中，minter_key 的初始余额为 97.6210937497093952 CFX。
回到 Coin 合约调用页面，再次调用 mint 办法并应用 minter_key 地址增发代币 1000，实现代币增发后再次查问 minter_key 的余额，依然为 97.6210937497093952 CFX。
能够看到增发代币的这笔交易，本来应该由 minter_key 账户领取的手续费，变成了由 sponsor_key 账户领取。
六、前端我的项目
前端我的项目源码能够返回 Conflux 前端。
6.1 准备
6.1.1 下载我的项目并装置依赖
· 下载前端我的项目：git clone github.com/ObsidianLabs/conflux-frontend-react
· 应用 npm install 或者 yarn 进行我的项目依赖装置
6.1.2 Conflux Portal 的装置及配置
Conflux Portal 是由 Conflux 提供的浏览器插件，目前提供了 Chrome 及 Firefox 的反对，用户能够应用 Conflux Portal 进行私钥的治理以及交易签名。
返回 Conflux Portal GitHub 下载安装。我的项目的源代码在 GitHub 中能够找到。
在这里须要将 Conflux Studio 中生成的地址导入到 Conflux Portal 中。实现插件装置后，在 Conflux Portal 的页面中抉择 Import，将 Conflux Studio 中的 minter_key 的私钥（在创立钱包章节中介绍了如何将私钥导出）粘贴到输入框中，点击 Import 按钮实现私钥导入。
6.2 运行前端我的项目
在运行我的项目之前，须要批改一些默认的环境变量。
在后面的教程中部署合约后会生成一个 contractCreated，这个值便是部署在网络中智能合约的地址。关上我的项目根目录并找到 .env 文件，这个文件提供了我的项目的环境变量，将 REACT_APP_CONFLUX_COIN_ADDRESS 的值批改为 contract_addr。
应用 yarn start 启动前端我的项目，开发服务器运行起来后会在浏览器中关上前端页面（如果没有关上，请在浏览器中拜访 localhost:3000）。
我的项目运行起来后，页面将显示四个卡片信息，别离为：
· 左上角 Conflux 网络信息模块
· 右上角 Conflux Portal 模块
· 左下角 Coin 合约模块
· 右下角 SponsorWhitelistControl 合约模块
6.2.1 连贯 Conflux Portal
点击右上角组件中的 Connect to Conflux Portal 按钮，Conflux Portal 页面将被关上，输出明码和抉择账户后实现连贯。连贯胜利后，将会在按钮下看到以后连贯的账户地址以及账户中的 CFX 余额。
6.2.2 运行 Coin 合约代币增发和代币转账操作
左下角的组件为 Coin 合约组件，能够通过这个组件调用代币增发和代币转账性能。
· 代币增发：抉择 mint 办法并在 receiver 中填入增发地址 minter_key 地址和在 amount 中填入增发代币的数量 100，点击 Push Transaction，在弹出的 ConfluxPortal Notification 窗口中点击 Confirm 按钮来确认交易。
· 代币转账：抉择 send 办法并在 receiver 中填入收款人地址 receiver_key 地址和在 amount 中转账代币的数量 20，点击 Push Transaction，在弹出的 ConfluxPortal Notification 窗口中点击 Confirm 按钮来确认交易。
6.2.3 查看 Coin 合约中的余额
抉择 balanceOf 办法并在 tokenOwner 输入框中填入查问的地址，点击 Query Data 按钮能够查问到账户的余额。
6.2.4 查看 Sent 事件
抉择 Sent 事件并点击 Query Data 能够查问到转账操作所触发的转账事件的记录。
6.3 前端我的项目解析
我的项目应用 React 进行开发。次要由三大部分组成：视图组件、js-conflux-sdk 以及 Conflux Portal。
我的项目根目录下的 .env 环境变量，在这里定义了两个环境变量，别离为:
· REACT_APP_CONFLUX_NODE_RPC：Conflux 的网络节点地址，目前默认为 Oceanus 网络的地址
· REACT_APP_CONFLUX_COIN_ADDRESS：已部署的 Coin 智能合约地址
6.3.1 视图组件
视图组件在我的项目的 src/components 中，其中 App.js 为页面的主入口，负责页面的排列及合约信息的读取。
ConfluxNetwork.js
负责渲染 Conflux 网络信息，Node URL 的值为 .env 环境变量文件下的 REACT_APP_CONFLUX_NODE_RPC 设置的值（默认为 Oceanus 网络）。
ConfluxPortal.js
负责渲染 Conflux Portal 的连贯信息，并提供了连贯 Conflux Portal 的交互按钮。
· connectConfluxPortal 调用 Conflux Portal 的 enable 办法启用 conflux（conflux portal 实例由浏览器插件注入到 windows.portal 中），实现 enable 后调用 getAccount 办法获取到 Portal 中的账户。
· refreshBalance 调用 Conflux SDK 的 getBalance 办法来更新账户余额信息
· renderPortalButton 依据以后不同的状态，渲染连贯 Portal 的按钮
ConfluxContract.js
负责渲染 Conflux 合约信息，本我的项目中提供了 Coin 和 SponsorWhitelistControl 两个合约。
ConfluxContract.js 由三个组件组成，别离为：
· ConfluxContract 负责依据传入的合约 abi 来渲染合约的信息，包含合约地址、合约办法和事件，合约提交的交互逻辑及显示执行后的后果
· ContractMethods 负责渲染合约 abi 中的办法和事件的表单及绝对应的按钮
· ConfluxForm 负责依据办法或事件的 abi 来渲染输出表单
lib
lib 在我的项目的 src/lib 中，这里的文件次要是为视图提供包含连贯网络、结构交易、获取账户、读取合约等服务。
七、总结
在本开发教程中，咱们学习了如何应用 Conflux Studio 来实现一个残缺的 Coin DApp 开发，其中包含了：
· 应用钥匙对管理器创立账户及导出账户私钥
· 切换 Oceanus 网络，查看网络信息
· 账户申请 CFX Token
· 创立、编译并部署我的项目
· 解析 Coin 合约代码，学习如何编写合约的读写办法及事件
· 应用合约浏览器调用 Coin 合约的代币增发、转账、查问余额及查问事件
· 设置并应用智能合约的代付性能
· 将私钥导入 Conflux Portal 并连贯前端我的项目
· 在前端我的项目中调用 Coin 合约的代币增发、转账、查问余额及查问事件
· 解析前端我的项目代码，学习如何通过 Conflux Portal 和 Conflux JavaScript SDK 连贯网络并实现交易
八、对于 Conflux Bounty
Conflux 基金会为了激励用户参加生态建设，提供了 Conflux Bounty 赏金平台。通过实现 Bounty 赏金平台公布的各项任务，参与者能够取得 FC (Fans Token) 作为处分。
8.1 FC 的价值
FC，全称 Fans Coin，是由 Conflux 基金会与社区成员独特研发的生态代币，用于记录和感激对 Conflux 生态建设做出奉献的社区成员。FC 目前在 Oceanus 上运行，Conflux 基金会承诺，在主网上线后，锁定和未锁定的 FC 都能够与主网 CFX 进行 1:1 承兑，以此保障所有社区成员的劳动成果都能够取得处分。
FC 赏金调配计划会展现在赏金工作详情页中，包含最高奖金数量、奖金调配人数、奖金数量散布、排行名次确定形式等信息。账号余额中的赏金处分能够随时申请提现至 Conflux 钱包。Conflux 团队会对所有的提现申请进行审核。
对于曾经通过的提现申请，Conflux 团队会在每周二中午 12 点（如遇节假日，往后顺延至下一个工作日）进行提币操作。实现提币操作后，您的 Conflux 钱包将会收到您提现的赏金处分。
8.2 Bounty 的价值
Conflux Bounty (https://bounty.conflux-chain.org) 的主旨是为每一个通证找到价值。Bounty 分为几个板块：技术、品牌、社群、资源、其余等。
· 技术板块：分为产品、SDK、教程、开发、测试等；次要是处分社区的一些技术资源贡献者。
· 品牌板块：分为文案、设计、视频、媒体、推广等；次要是处分在各大网络平台分享 Conflux 的各种最新动静，扩充 Conflux 的生态影响力的沉闷贡献者；
· 社群板块：分为流动、推广等；次要是处分举办各种 Conflux 相干线上线下流动，帮忙解答社群问题，沉闷日常氛围等。
· 资源板块：分为政务、商务、人力等；次要是处分为生态中引进企业资源，扩建 Conflux 生态等。
· 其余板块：分为周边、洽购等；次要是处分一些其余的零散工作。
Conflux Studio 下载地址和更新日志：
https://github.com/ObsidianLa…
Conflux dApp 开发教程：
https://github.com/ObsidianLa…
Conflux dApp 教程相干倡议：
https://github.com/ObsidianLa…
相干资料库：
- Conflux 开发材料包
- conflux-chain github
- conflux-fans github
