使用EOSJS和scatter在EOS區(qū)塊鏈上開(kāi)發(fā)dApp

mumumu 發(fā)布于2019-08-19 11:15 / 1593人閱讀

摘要：必備知識(shí)設(shè)置用于為區(qū)塊鏈簽署交易，并在不泄露密鑰的情況下向應(yīng)用程序提供個(gè)人信息。

由于我一直在深入研究EOS dApp的開(kāi)發(fā)，我看了不少好文章。在這里，我匯總了下做一些研究后得到的所有知識(shí)。在本文中，我將解釋如何使用EOSJS和scatter。我假設(shè)你對(duì)智能合約以及如何在EOS區(qū)塊鏈上部署它們有基本的了解，因?yàn)槲覍⒃诒疚闹刑^(guò)該部分。

我們?cè)跇?gòu)建什么？

?
我們正在構(gòu)建一個(gè)簡(jiǎn)單的todo dApp。我們將為CRUD（創(chuàng)建，讀取，更新和刪除）操作編寫(xiě)智能合約，并將使用EOSJS和scatter與已部署的合同進(jìn)行交互。CRUD操作包括創(chuàng)建，完成，刪除和獲取待辦事項(xiàng)。我們將使用Jungle Testnet來(lái)部署我們的智能合約。

必備知識(shí)

EOS

EOSJS

Scatter

Scatter設(shè)置

Scatter用于為區(qū)塊鏈簽署交易，并在不泄露密鑰的情況下向應(yīng)用程序提供個(gè)人信息。要設(shè)置Scatter錢包，請(qǐng)關(guān)注這個(gè)視頻。在Scatter設(shè)置中，必須在網(wǎng)絡(luò)中添加Jungle testnet，其中包含以下詳細(xì)信息：

Name: Jungle Testnet
Domain or IP: dev.cryptolions.io // It might be changed, so check for the latest one
Port: 38888
chainId:038f4b0fc8ff18a4f0842a8f0564611f6e96e8535901dd45e43ac8691a1c4dca

添加網(wǎng)絡(luò)配置后，現(xiàn)在通過(guò)輸入密鑰對(duì)部分然后單擊新建將你的私鑰導(dǎo)入錢包。根據(jù)下圖所示的表格填寫(xiě)關(guān)鍵信息。

現(xiàn)在，您應(yīng)該使用密鑰對(duì)添加標(biāo)識(shí)。如果沒(méi)有用，請(qǐng)轉(zhuǎn)到“身份”部分并添加或編輯現(xiàn)有身份。在身份部分，選擇網(wǎng)絡(luò)，然后選擇密鑰對(duì)，它會(huì)要求您在鏈網(wǎng)上添加與該密鑰相關(guān)聯(lián)的帳戶。您應(yīng)該添加具有活動(dòng)權(quán)限的帳戶。

你的scatter已全部設(shè)置好并可以在我們的dApp中使用。

智能合約

要部署todo智能合約，請(qǐng)按照本文將其部署到Jungle Testnet上。確保能夠從文章中提到的命令行與Testnet進(jìn)行交互。

與Testnet交互

我正在使用ReactJS作為前端部分。完整的邏輯和流程位于src文件夾中名為index.jsx的單個(gè)文件中。以下是配置對(duì)象：

// Config for scatter and eosjs
const EOS_CONFIG = {
contractName: “xyz”, // Contract name
contractSender: “xyz”, // User executing the contract (should be paired with private key)
network: {
protocol: “http”,
blockchain: “eos”,
host: “dev.cryptolions.io”,
port: 38888,
chainId: “038f4b0fc8ff18a4f0842a8f0564611f6e96e8535901dd45e43ac8691a1c4dca” // get this using http://dev.cryptolions.io:38888/v1/chain/get_info
},
eosOptions: {}
};

與scatter交互：

import EOS from ‘eosjs’;
document.addEventListener(`scatterLoaded`, this.onScatterLoad);
onScatterLoad = () => {
const scatter = window.scatter;
window.scatter = null;
// Here, we are connecting scatter with eosjs so that the transactions can be signed using keys present in scatter
this.eosClient = scatter.eos(
EOS_CONFIG.network,
EOS,
EOS_CONFIG.eosOptions,
EOS_CONFIG.network.protocol
);
// scatter object to collect the information present in wallet like accounts or public key
this.scatter = scatter;
// to load the data present in our table
this.loadTodos();
};

現(xiàn)在，在這個(gè)對(duì)象中，我們有兩個(gè)引用EOSClient和scatter，我們將分別用它們與EOS區(qū)塊鏈和錢包進(jìn)行交互。

我正在添加一個(gè)功能的代碼，以使用EOSClient獲取存儲(chǔ)的數(shù)據(jù)（所有todos），你可以在src/index.jsx中檢查其余功能：

loadTodos() {
this.eosClient.getTableRows({
code: EOS_CONFIG.contractName,
scope: EOS_CONFIG.contractName,
table: “todos”,
json: true
}).then(data => {
this.setState({ todos: data.rows });
}).catch(e => {
console.error(e);
});
}

要獲取帳戶，請(qǐng)使用scatter對(duì)象的getIdentity()：

const { accounts } = await scatter.getIdentity({
accounts: [config.EOS_CONFIG.network]
});

這樣就ok。

總結(jié)

其中一個(gè)最大的優(yōu)點(diǎn)是你無(wú)需在機(jī)器上維護(hù)錢包，scatter為我們管理一切。還有其他方法來(lái)托管錢包，但scatter對(duì)最終用戶負(fù)責(zé)，開(kāi)發(fā)人員不需要處理任何私人信息。github庫(kù)

分享一個(gè)交互式的在線編程實(shí)戰(zhàn)，EOS智能合約與DApp開(kāi)發(fā)入門(mén)：

EOS教程

本課程幫助你快速入門(mén)EOS區(qū)塊鏈去中心化應(yīng)用的開(kāi)發(fā)，內(nèi)容涵蓋EOS工具鏈、賬戶與錢包、發(fā)行代幣、智能合約開(kāi)發(fā)與部署、使用代碼與智能合約交互等核心知識(shí)點(diǎn)，最后綜合運(yùn)用各知識(shí)點(diǎn)完成一個(gè)便簽DApp的開(kāi)發(fā)。

這里是原文