使用EOSJS和scatter在EOS區塊鏈上開發dApp

區塊鏈開發 · 發表 2018-09-26 23:41:01

摘要：由於我一直在深入研究EOS dApp的開發，我看了不少好文章。在這裡，我彙總了下做一些研究後得到的所有知識。在本文中，我將解釋如何使用EOSJS和scatter。我假設你對智慧合約以及如何在EOS區塊鏈上部署它們有基本的瞭解，因為我將在本文中跳過該部分。我們在構建什麼？我們正在構...

由於我一直在深入研究EOS dApp的開發，我看了不少好文章。在這裡，我彙總了下做一些研究後得到的所有知識。在本文中，我將解釋如何使用EOSJS和scatter。我假設你對智慧合約以及如何在EOS區塊鏈上部署它們有基本的瞭解，因為我將在本文中跳過該部分。

我們在構建什麼？

我們正在構建一個簡單的todo dApp。我們將為CRUD（建立，讀取，更新和刪除）操作編寫智慧合約，並將使用EOSJS和scatter與已部署的合同進行互動。CRUD操作包括建立，完成，刪除和獲取待辦事項。我們將使用Jungle Testnet來部署我們的智慧合約。

必備知識

EOS
EOSJS
Scatter

Scatter設定

Scatter用於為區塊鏈簽署交易，並在不洩露金鑰的情況下向應用程式提供個人資訊。要設定Scatter錢包，請關注 ofollow,noindex">這個視訊。在Scatter設定中，必須在網路中新增Jungle testnet，其中包含以下詳細資訊：

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

新增網路配置後，現在通過輸入金鑰對部分然後單擊新建將你的私鑰匯入錢包。根據下圖所示的表格填寫關鍵資訊。

現在，您應該使用金鑰對新增標識。如果沒有用，請轉到“身份”部分並新增或編輯現有身份。在身份部分，選擇網路，然後選擇金鑰對，它會要求您在鏈網上新增與該金鑰相關聯的帳戶。您應該新增具有活動許可權的帳戶。

你的scatter已全部設定好並可以在我們的dApp中使用。

智慧合約

要部署todo智慧合約，請按照本文將其部署到Jungle Testnet上。確保能夠從文章中提到的命令列與Testnet進行互動。

與Testnet互動

我正在使用ReactJS作為前端部分。完整的邏輯和流程位於src資料夾中名為index.jsx的單個檔案中。以下是配置物件：

// 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();
};

現在，在這個物件中，我們有兩個引用EOSClient和scatter，我們將分別用它們與EOS區塊鏈和錢包進行互動。

我正在新增一個功能的程式碼，以使用EOSClient獲取儲存的資料（所有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);
});
}

要獲取帳戶，請使用scatter物件的 getIdentity() ：

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

這樣就ok。

總結

其中一個最大的優點是你無需在機器上維護錢包，scatter為我們管理一切。還有其他方法來託管錢包，但scatter對終端使用者負責，開發人員不需要處理任何私人資訊。 github庫

分享一個互動式的線上程式設計實戰， EOS智慧合約與DApp開發入門 ：

EOS教程

本課程幫助你快速入門EOS區塊鏈去中心化應用的開發，內容涵蓋EOS工具鏈、賬戶與錢包、發行代幣、智慧合約開發與部署、使用程式碼與智慧合約互動等核心知識點，最後綜合運用各知識點完成一個便籤DApp的開發。

這裡是原文