2021-9-26 前端達人
對本教程有任何疑問或建議可以在 GitHub 給我們留言。
Conflux DApp 開發教程將使用 Conflux Studio 在 Oceanus 網絡下開發一個簡單的代幣應用 Coin。
通過這個開發教程，你將會學習到如何進行 Conflux 智能合約的編寫、調用，配置智能合約的代付以及如何使用 Web 前端項目與智能合約進行交互，從而實現一個包含前端和智能合約的完整的 DApp。
在閱讀教程中遇到任何問題，歡迎在 Issues 中向我們反饋。
請在 GitHub 下載頁面下載 Conflux Studio。目前 Conflux Studio 支持 macOS 和 Linux 系統，請根據系統下載對應的版本。
正確安裝 Conflux Studio 并初次啟動后，Conflux Studio 將顯示歡迎頁面，根據提示完成 Docker, Conflux Node 以及 Conflux Truffle 的下載、安裝及啟動。
完成所有的安裝步驟后，首先需要創建鑰匙對來完成后續的合約部署以及調用。
在 Conflux Studio 的任意界面，點擊應用左下?的鑰匙圖標，打開密鑰管理器。點擊 Create 按鈕打開新鑰匙對彈窗，輸入鑰匙對的名字并點擊 Save 按鈕。完成后將在密鑰管理器中看到剛剛生成的鑰匙對的地址。鑰匙對由私鑰和公鑰組成，公鑰在智能合約中也常被稱作地址。
導出私鑰可以通過點擊每個地址后面的眼睛按鈕打開查看私鑰彈窗，彈窗顯示地址以及私鑰。后續教程中會需要通過管理器導出私鑰。
為了順利完成教程，首先需要創建三個鑰匙對：
minter_key 用于 Coin 合約部署時的簽名，是這個教程中最常使用的鑰匙對
receiver_key 用于 Coin 合約接收轉賬，將在后文中介紹轉賬時用到
sponsor_key 用于 Coin 合約代付功能，將在后文中介紹代付功能時用到
教程將在 Oceanus 網絡進行合約的部署以及合約的調用。點擊頂部 Network 標簽的倒三角打開下拉菜單，點擊選擇 Oceanus 網絡進行切換。
切換完成后，可以在主頁面中看到當前網絡為 oceanus。頁面左邊包括了當前網絡的節點 URL，Chain ID，TPS 信息，頁面右邊包含了當前網絡區塊的信息。
點擊頂部 Explorer 標簽打開區塊瀏覽器，并在地址欄粘貼鑰匙對地址，可以在左邊看到當前地址的 CFX 余額信息。
在區塊鏈的世界中，大家通常將申請測試 Token 的方式稱為 faucet，目前在 Oceanus 網絡下每次 faucet 申請到的 Token 為 100 CFX。
獲取 CFX 的方式有兩種方式：
https://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
點擊頂部左邊的 Project 標簽切換至項目列表頁面，點擊頁面中的 New 按鈕打開項目創建窗口，輸入項目的名稱并選擇 coin 模版，點擊 Create Project 完成項目的創建。
Coin 合約是一個簡單的代幣合約，其中：
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);
}
}
點擊工具欄的 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 地址并加載合約。
合約頁面由三個部分組成：
點擊合約調用的下拉菜單中選擇 mint 方法，在下方的參數區域分別填入以下信息：
minter_key 地址
msg.sender 獲取到這個地址。填入 minter_key 地址
填寫完成后點擊執行按鈕，Conflux Studio 將自動構造交易并推送到網絡中。成功執行后可以在下方 Result 中看到這筆成功的交易。
點擊查詢區域的下拉菜單并且選擇 balanceOf 方法，這是在代碼中定義的查詢方法。在下方的 tokenOwner 填入 minter_key 地址并點擊執行，就可以在下方的 Result 中看到 minter_key 賬戶的 Coin 代幣的余額信息為 1000。使用同樣方法可以查詢到 receiver_key 賬戶的代幣余額為 0。
在合約調用區域選擇 send 方法，在 Parameters 中分別填入：
receiver_key 地址
minter_key 地址，
點擊執行完成轉賬，再次查詢代幣余額可以看到 minter_key 賬戶只剩下 800 代幣，而 receiver_key 賬戶則從 0 變成了 200 代幣。
Conflux 智能合約的每個調用的方法都可以帶上 Value 參數，這是一個可選的參數。如果帶上了這個值，智能合約出了在執行這個方法的邏輯外，還會額外轉 Value 中指定數量的 CFX token 到 receiver 賬戶，轉賬金額為 Value 中所填的值。有些智能合約的方法需要這個參數才可以完成調用，但是在 Coin 合約不需要這個參數。
后文中的代付功能將會使用到 Value 參數。
在事件區域選擇 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 賬戶代付。
在 Conflux Studio 中訪問系統合約地址 0x0888000000000000000000000000000000000001，在合約調用區域能看到前文中提及的四個設置代付的方法。
選擇 set_sponsor_for_collateral 方法，該方法有三個參數：
contract_addr
sponsor_key 地址
sponsor_key 賬戶將會被扣除 40 CFX。
選擇 set_sponsor_for_gas 方法，該方法有四個參數：
contract_addr
sponsor_key 地址
sponsor_key 賬戶將會再次被扣除 40 CFX。
完成這兩個方法的調用后 Coin 合約代付賬戶便設置好了，sponsor_key 賬戶將為 Coin 合約的手續費和儲存費各提供為 40 CFX Token 的代付服務。由于目前代付白名單中并沒有賬戶地址，因此還需要添加白名單地址才能完成代付設置。
在 Coin 合約中集成了設置代付白名單的方法，通過調用此方法可以添加或刪除代付白名單。
在 Conflux Studio 中訪問 contract_addr 合約，選擇 add_privilege 方法：
minter_key 地址
minter_key 地址
運行后就成功設置了代付白名單了，至此 Coin 合約的代付功能設置好了。
在進行代付測試前，先查詢并記錄下 minter_key 賬戶的 CFX 余額。例如本教程中，minter_key 的初始余額為 97.6210937497093952 CFX。
回到 Coin 合約調用頁面，再次調用 mint 方法并使用 minter_key 地址增發代幣 1000，完成代幣增發后再次查詢 minter_key 的余額，仍然為 97.6210937497093952 CFX。
可以看到增發代幣的這筆交易，原本應該由 minter_key 賬戶支付的手續費，變成了由 sponsor_key 賬戶支付。
前端項目源碼可以前往 Conflux 前端。
git clone https://github.com/ObsidianLabs/conflux-frontend-react
npm install 或者 yarn 進行項目依賴安裝
Conflux Portal 是由 Conflux 提供的瀏覽器插件，目前提供了 Chrome 及 Firefox 的支持，用戶可以使用 Conflux Portal 進行私鑰的管理以及交易簽名。
前往 Conflux Portal GitHub 下載安裝。項目的源代碼在 GitHub 中可以找到。
在這里需要將 Conflux Studio 中生成的地址導入到 Conflux Portal 中。完成插件安裝后，在 Conflux Portal 的頁面中選擇 Import，將 Conflux Studio 中的 minter_key 的私鑰（在創建錢包章節中介紹了如何將私鑰導出）粘貼到輸入框中，點擊 Import 按鈕完成私鑰導入。
在運行項目之前，需要修改一些默認的環境變量。
在前面的教程中部署合約后會生成一個 contractCreated，這個值便是部署在網絡中智能合約的地址。打開項目根目錄并找到 .env 文件，這個文件提供了項目的環境變量，將 REACT_APP_CONFLUX_COIN_ADDRESS 的值修改為 contract_addr。
使用 yarn start 啟動前端項目，開發服務器運行起來后會在瀏覽器中打開前端頁面（如果沒有打開，請在瀏覽器中訪問 http://localhost:3000）。
項目運行起來后，頁面將顯示四個卡片信息，分別為
點擊右上角組件中的 Connect to Conflux Portal 按鈕，Conflux Portal 頁面將被打開，輸入密碼和選擇賬戶后完成連接。連接成功后，將會在按鈕下看到當前連接的賬戶地址以及賬戶中的 CFX 余額。
左下角的組件為 Coin 合約組件，可以通過這個組件調用代幣增發和代幣轉賬功能。
代幣增發：選擇 mint 方法并在 receiver 中填入增發地址 minter_key 地址和在 amount 中填入增發代幣的數量 100，點擊 Push Transaction，在彈出的 ConfluxPortal Notification 窗口中點擊 Confirm 按鈕來確認交易。
代幣轉賬：選擇 send 方法并在 receiver 中填入收款人地址 receiver_key 地址和在 amount 中轉賬代幣的數量 20，點擊 Push Transaction，在彈出的 ConfluxPortal Notification 窗口中點擊 Confirm 按鈕來確認交易。
選擇 balanceOf 方法并在 tokenOwner 輸入框中填入查詢的地址，點擊 Query Data 按鈕可以查詢到賬戶的余額。
選擇 Sent 事件并點擊 Query Data 可以查詢到轉賬操作所觸發的轉賬事件的記錄。
項目使用 React 進行開發。主要由三大部分組成：視圖組件、js-conflux-sdk 以及 Conflux Portal。
項目根目錄下的 .env 環境變量，在這里定義了兩個環境變量，分別為
REACT_APP_CONFLUX_NODE_RPC：Conflux 的網絡節點地址，目前默認為 Oceanus 網絡的地址
REACT_APP_CONFLUX_COIN_ADDRESS：已部署的 Coin 智能合約地址
視圖組件在項目的 src/components 中，其中 App.js 為頁面的主入口，負責頁面的排列及合約信息的讀取。
負責渲染 Conflux 網絡信息，Node URL 的值為 .env 環境變量文件下的 REACT_APP_CONFLUX_NODE_RPC 設置的值（默認為 Oceanus 網絡）。
負責渲染 Conflux Portal 的連接信息，并提供了連接 Conflux Portal 的交互按鈕。
connectConfluxPortal 調用 Conflux Portal 的 enable 方法啟用 conflux （conflux portal 實例由瀏覽器插件注入到 windows.portal 中），完成 enable 后調用 getAccount 方法獲取到 Portal 中的賬戶。
refreshBalance 調用 Conflux SDK 的 getBalance 方法來更新賬戶余額信息
renderPortalButton 根據當前不同的狀態，渲染連接 Portal 的按鈕
負責渲染 Conflux 合約信息，本項目中提供了 Coin 和 SponsorWhitelistControl 兩個合約。
ConfluxContract.js 由三個組件組成，分別為：
ConfluxContract 負責根據傳入的合約 abi 來渲染合約的信息，包括合約地址、合約方法和事件，合約提交的交互邏輯及顯示執行后的結果
ContractMethods 負責渲染合約 abi 中的方法和事件的表單及相對應的按鈕
ConfluxForm 負責根據方法或事件的 abi 來渲染輸入表單
lib 在項目的 src/lib 中，這里的文件主要是為視圖提供包括連接網絡、構造交易、獲取賬戶、讀取合約等服務。
conflux.js 是 js-conflux-sdk 的封裝。js-conflux-sdk 是由 Conflux 提供的 JavaScript SDK，本前端項目使用 SDK 來連接 Conflux 網絡，和合約進行交互以及構造合約中的實例。
conflux-portal.js 是 Conflux Portal 的封裝，本前端項目通過調用瀏覽器插件來完成交易的簽名。調用 Conflux Portal 提供的 enable 方法可以啟動項目和 Conflux Portal 的連接（需要提前檢查瀏覽器是否正確安裝插件，在 constructor 中通過檢查 window.conflux 是否為空來判斷）。conflux-portal.js 提供了獲取賬戶 getAccount 和發送交易 sendTransaction 兩個主要的方法。
lib/abi 文件夾下提供了兩個 json 文件，分別為 Coin.json 和 SponsorWhitelistControl.json，這兩個文件是構造合約所需要使用的 abi 文件。
在本開發教程中，我們學習了如何使用 Conflux Studio 來完成一個完整的 Coin DApp 開發，其中包括了：
Conflux 基金會為了鼓勵用戶參與生態建設，提供了 Conflux Bounty 賞金平臺。通過完成 Bounty 賞金平臺發布的各項任務，參與者可以獲得 FC (Fans Token) 作為獎勵。
FC，全稱 Fans Coin，是由 Conflux 基金會與社區成員共同研發的生態代幣，用于記錄和感謝對 Conflux 生態建設做出貢獻的社區成員。FC 目前在 Oceanus 上運行，Conflux 基金會承諾，在主網上線后，鎖定和未鎖定的 FC 都可以與主網 CFX 進行 1:1 承兌，以此保障所有社區成員的勞動成果都可以獲得獎勵。
FC 賞金分配方案會展示在賞金任務詳情頁中，包括最高獎金數量、獎金分配人數、獎金數量分布、排行名次確定方式等信息。賬號余額中的賞金獎勵可以隨時申請提現至 Conflux 錢包。Conflux 團隊會對所有的提現申請進行審核。
對于已經通過的提現申請，Conflux 團隊會在每周二中午 12 點（如遇節假日，往后順延至下一個工作日）進行提幣操作。完成提幣操作后，您的 Conflux 錢包將會收到您提現的賞金獎勵。
Conflux Bounty (https://bounty.conflux-chain.org) 的宗旨是為每一個通證找到價值。Bounty 分為幾個板塊：技術、品牌、社群、資源、其他等。
黑曜石實驗室（Obsidian Labs) 是全球最大的區塊鏈開發工具（IDE）提供商，也是 Conflux Studio 的開發團隊，致力于為區塊鏈開發者提供必備的工具及服務，幫助鏈上應用生態快速發展。目前，除了 Conflux Studio 外，Obsidian Labs 還為 EOS、Nervos、Substrate、Alogorand 等明星項目提供了專屬的 IDE 和框架工具。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
原文鏈接：https://blog.csdn.net/weixin_45029854/article/details/107638406
作者：Sam @黑曜石實驗室
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://m.91whvog3.cn