区块链财富指北

# 1.钱包内嵌DAPP的调用和交互。

声明

《区块链财富指北》系列文章由NOCY.COM策划，肖南飞主笔撰写。 技术选型基于BOScore公链，旨在以有趣易懂的方式传播普及区块链技术，不构成任何投资建议！

# 0x01 未来的APP都将是DAPP

DAPP全称decentralized application，意思就是分布式应用或去中心化应用。
DApp通常指建立在区块链网络自身节点上、不依赖于任何中心化服务器的应用程序.
它们通过对等节点网络上分发关键组件，并多半辅以配套的Token机制。

传统手机APP通常是“前端--API--数据库”的形式，
前端拥有数以百万计的用户，后端仍是中心机构绝对控制，
用户的数据安全往往只能依赖于中心机构的信誉度。
如facebook等大公司盗用数据的丑闻屡见不鲜。

DApp采用“前端——智能合约——区块链”模式，
用户的数据安全通过密码学和计算机代码进行保全。
革命性的用算法机制实现“陌生人信任”，重塑人类的协作关系。

App的崛起和爆发某种程度上意味着移动互联网时代的全面到来，
DApp也必将取代App，把区块链的梦想照进现实，开启一个崭新的时代。

# 0x02 从React脚手架开始

使用create-react-app新建一个项目，名为tokensdapp。

npm install -g create-react-app
create-react-app tokensdapp
1
2

等待安装完成后，目录结构如下：

01

测试运行下：

cd tokensdapp
yarn start
1
2

02

按照命令行提示，在浏览器中输入网址：

03

表示React基础脚手架配置成功。

# 0x03 完善前端UI界面

安装UI框架antd-mobile:

npm install antd-mobile --save
1

04

配置按需加载：

npm install react-app-rewired customize-cra babel-plugin-import --save-dev
1

05

编辑package.json文件，将第15到18行的react-scripts替换为react-app-rewired：

06

在项目根目录创建config-overrides.js，代码如下：

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
);
1
2
3
4
5
6
7

在public目录下的index.html的body中添加一段js：

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
    <script>
      if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body);
        }, false);
      }
    </script>
1
2
3
4
5
6
7
8

然后将src下的App.js修改如下：

09

回到命令行，输入"yarn start"启动项目。
浏览器打开显示界面如下：

08

# 0x04 添加scatter库

ScatterJS是目前EOSIO生态钱包中支持比较多的组件库。
github地址在：https://github.com/GetScatter/scatter-js
scatter的github介绍页上列出了支持的钱包APP:

19

首先安装相关组件库：

yarn add @scatterjs/core @scatterjs/eosjs2 eosjs@20.0.0
1

14

添加调试组件：

yarn add vconsole
1

15

再将APP.js代码修改如下：

16

17

18

回到命令行，输入"yarn start"启动项目。

# 0x05 测试交互情况

这里使用TokenPocket钱包在发现页面输入网址打开。

20

DAPP启动后会自动执行连接钱包操作，并进行相应的提示。
右下角的vConsole是调试插件，点击会弹出相应的调试面板。
点击“登录”按钮测试：

21

可以看到成功读取了TP钱包里当前BOS账号的信息。
再点击“注销”按钮进行退出测试。

22

成功退出登录。

# 0x06 下篇内容预告

在下篇文章里，我们继续探索DAPP。
***DAPP（2）：从钱包上调用合约发行通证（Token）。***

常见的DAPP交互过程通常是：
1.用户通过dapp前端界面选项按钮来构造一笔自定义的个性化交易信息；
2.交易构造好后点击提交按钮，dapp前端弹出界面交给钱包私钥签名；
3.钱包签名后，广播交易到区块链。dapp会监听用户的地址，在用户界面上显示区块链处理后的结果。
综上所述，用户使用Dapp其实就是Dapp的用户界面协助用户构造交易，交易提交给钱包签名，钱包广播交易，Dapp监听区块链，给用户反馈结果。
在区块链项目开发中，智能合约部署完成，实现的是可用性。
完善友好的前端交互界面，则是在易用性上作文章，是使项目真正普及开来的入口。
这篇教程文章，我们来构建从钱包上调用智能合约。

# 0x07 联系及投票支持

《区块链财富指北》系列文章github存档地址：https://nocycom.github.io。 NOCY.com团队致力于区块链基础知识传播，欢迎读者朋友留言共同交流。 由于发文时间仓促及区块链领域技术迭代频繁，在教程中可能有这样或那样的错漏之处，还请读者与我们一起查漏补缺、将系列教程优化的更好。

如果觉得这系列教程有点意思，请投票支持我们的节点：BOS公链NOCYCOM节点，EOS公链NOCYCOM节点。您的投票是本教程持续更新的动力源泉，谢谢。

← 2.从钱包上调用合约发行通证（Token）。 →