學會在 Conflux 上開發一個包含前端和智能合約的完整 DApp,從這篇開始。

撰文:黑曜石實驗室

Conflux DApp 開發教程將使用 Conflux Studio 在 Oceanus 網絡下開發一個簡單的代幣應用 Coin。

通過這個開發教程,你將會學習到如何進行 Conflux 智能合約的編寫、調用,配置智能合約的代付以及如何使用 Web 前端項目與智能合約進行交互,從而實現一個包含前端和智能合約的完整的 DApp。

在閱讀教程中遇到任何問題,歡迎在 Issues 中向我們反饋。

準備工作

安裝 IDE

請在 GitHub 下載頁面 下載 Conflux Studio。目前 Conflux Studio 支持 macOS 和 Linux 系統,請根據系統下載對應的版本。

正確安裝 Conflux Studio 並初次啓動後,Conflux Studio 將顯示歡迎頁面,根據提示完成 Docker, Conflux Node 以及 Conflux Truffle 的下載、安裝及啓動。

硬核 | 手把手教你從零開始在 Conflux 上開發 DApp

創建錢包

完成所有的安裝步驟後,首先需要創建鑰匙對來完成後續的合約部署以及調用。

在 Conflux Studio 的任意界面,點擊應用左下⻆的鑰匙圖標,打開密鑰管理器。點擊 Create 按鈕打開新鑰匙對彈窗,輸入鑰匙對的名字並點擊 Save 按鈕。完成後將在密鑰管理器中看到剛剛生成的鑰匙對的地址。鑰匙對由私鑰和公鑰組成,公鑰在智能合約中也常被稱作地址。

導出私鑰可以通過點擊每個地址後面的眼睛按鈕打開查看私鑰彈窗,彈窗顯示地址以及私鑰。後續教程中會需要通過管理器導出私鑰。

硬核 | 手把手教你從零開始在 Conflux 上開發 DApp

爲了順利完成教程,首先需要創建三個鑰匙對:

  • minter_key 用於 Coin 合約部署時的簽名,是這個教程中最常使用的鑰匙對
  • receiver_key 用於 Coin 合約接收轉賬,將在後文中介紹轉賬時用到
  • sponsor_key 用於 Coin 合約代付功能,將在後文中介紹代付功能時用到

連接 Conflux 網絡

教程將在 Oceanus 網絡進行合約的部署以及合約的調用。點擊頂部 Network 標籤的倒三角打開下拉菜單,點擊選擇 Oceanus 網絡進行切換。

切換完成後,可以在主頁面中看到當前網絡爲 oceanus。頁面左邊包括了當前網絡的節點 URL,Chain ID,TPS 信息,頁面右邊包含了當前網絡區塊的信息。

硬核 | 手把手教你從零開始在 Conflux 上開發 DApp

申請測試 CFX

點擊頂部 Explorer 標籤打開區塊瀏覽器,並在地址欄粘貼鑰匙對地址,可以在左邊看到當前地址的 CFX 餘額信息。

硬核 | 手把手教你從零開始在 Conflux 上開發 DApp

在區塊鏈的世界中,大家通常將申請測試 Token 的方式稱爲 faucet,目前在 Oceanus 網絡下每次 faucet 申請到的 Token 爲 100 CFX。

獲取 CFX 的方式有兩種方式:

硬核 | 手把手教你從零開始在 Conflux 上開發 DApp

使用上述方法在 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 完成項目的創建。

硬核 | 手把手教你從零開始在 Conflux 上開發 DApp

合約代碼

Coin 合約是一個簡單的代幣合約,其中:

  • 通過 mint 方法可以增發代幣數量
  • 通過 send 方法可以將一定數量的代幣轉賬給別的用戶,同時會在事件中記錄下這筆轉賬的信息
  • 通過 balanceOf 方法可以查詢到指定賬戶地址的代幣餘額
  • 通過 add_privilege 方法可以爲合約添加代付白名單
  • 通過 remove_privilege 方法可以爲合約移除代付白名單

硬核 | 手把手教你從零開始在 Conflux 上開發 DApp

Conflux 智能合約使用 Solidity 語言進行開發,打開目錄下的 contracts/Coin.sol 文件,查看項目的核心代碼。

編譯及部署合約

點擊工具欄的 Build 按鈕進行合約的編譯,編譯的結果將會保存在 build/Coin.json 文件中。

硬核 | 手把手教你從零開始在 Conflux 上開發 DApp

在部署合約前,首先需要確認在 Explorer 中選擇合約部署所使用的地址,Conflux Studio 會使用這個地址將部署合約這筆交易進行簽名(選擇的方法爲在 Explorer 的地址欄中輸入地址)。在合約代碼的 constructor 中,minter 被賦值爲 msg.sender,這個 msg.sender 就是 Explorer 所選擇的地址。

在此我們選擇 minter_key 作爲部署合約的簽名者。

硬核 | 手把手教你從零開始在 Conflux 上開發 DApp

點擊工具欄的部署按鈕進行部署,部署完成後,部署結果會在 deploys 的 JSON 文件中,在這個文件中可以在 contractCreated 中找到當前合約部署的地址,後文中使用 contract_addr 來代表這個合約地址。

硬核 | 手把手教你從零開始在 Conflux 上開發 DApp

總結

在本開發教程中,我們學習瞭如何使用 Conflux Studio 來完成一個完整的 Coin DApp 開發,其中包括了:

  • 使用鑰匙對管理器創建賬戶及導出賬戶私鑰
  • 切換 Oceanus 網絡,查看網絡信息
  • 賬戶申請 CFX Token
  • 創建、編譯並部署項目
  • 解析 Coin 合約代碼,學習如何編寫合約的讀寫方法及事件
  • 使用合約瀏覽器調用 Coin 合約的代幣增發、轉賬、查詢餘額及查詢事件
  • 設置並使用智能合約的代付功能
  • 將私鑰導入 Conflux Portal 並連接前端項目
  • 在前端項目中調用 Coin 合約的代幣增發、轉賬、查詢餘額及查詢事件
  • 解析前端項目代碼,學習如何通過 Conflux Portal 和 Conflux JavaScript SDK 連接網絡並實現交易

本文爲節選內容,完整教程請 參見此處

來源鏈接:github.com