• eos TODO EOS区块链上EOSJS和scatter开发dApp


    由于我一直在深入研究EOS dApp的开发,我看了不少好文章。在这里,我汇总了下做一些研究后得到的所有知识。在本文中,我将解释如何使用EOSJS和scatter。我假设你对智能合约以及如何在EOS区块链上部署它们有基本的了解,因为我将在本文中跳过该部分。

    我们在构建什么?
    我们正在构建一个简单的todo dApp。我们将为CRUD(创建,读取,更新和删除)操作编写智能合约,并将使用EOSJS和scatter与已部署的合同进行交互。CRUD操作包括创建,完成,删除和获取待办事项。我们将使用Jungle Testnet来部署我们的智能合约。

    必备知识
    EOS
    EOSJS
    Scatter
    Scatter设置
    Scatter用于为区块链签署交易,并在不泄露密钥的情况下向应用程序提供个人信息。要设置Scatter钱包,请关注这个视频。在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

    添加网络配置后,现在通过输入密钥对部分然后单击新建将你的私钥导入钱包。根据下图所示的表格填写关键信息。

    11831773-f1551f531eefa064.png

    image

    现在,您应该使用密钥对添加标识。如果没有用,请转到“身份”部分并添加或编辑现有身份。在身份部分,选择网络,然后选择密钥对,它会要求您在链网上添加与该密钥相关联的帐户。 您应该添加具有活动权限的帐户。

    你的scatter已全部设置好并可以在我们的dApp中使用。

    11831773-2d7f6a65f38dc2f4.png

    image

    智能合约
    要部署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的开发。

    这里是原文

  • 相关阅读:
    电商平台开发笔记5.nuxt项目中深度选择器解决el-input高度设置无效
    电商平台开发笔记4.css选择器之~波浪号使用
    电商平台开发笔记3.nuxt全局css的引入
    电商平台开发笔记2.Nuxt增加对less支持,解决This relative module was not found报错
    电商平台开发笔记1.Nuxt项目创建+Eslint代码保存自动格式化
    vue-cli 4.x 发布前的一些优化
    VueCli 4.x npm run build后主页空白的原因及解决方案
    VSCode 保存时自动ESlint格式化
    git 常用操作笔记
    VSCode下手动构建webpack项目
  • 原文地址:https://www.cnblogs.com/xiaocongcong888/p/9879632.html
Copyright © 2020-2023  润新知