外部应用程序与区块链进行交互案例与流程

案例大致目标

  1. 掌握FISCO BCOS应用环境的搭建与使用（FISCO BCOS+WeBASE）

  2. 掌握基于Java + SpringBoot的应用程序后端项目搭建与开发。

  3. 掌握应用程序后端与FISCO BCOS链的交互。

  4. 掌握应用程序前端项目搭建与开发

应用开发整体架构示例

1.png

应用开发整体流程示例

【2】

步骤一：构建区块链应用环境。搭建FISCO BCOS环境，搭建WeBASE-Front平台实现，部署示例智能合约。

步骤二：构建应用程序后端。通过WeBASE- Front导出后端项目，基于WeBASE Front API开发示例智能合约使用接口。

步骤三：构建应用程序前端。下载示例前端代码模板，区块链功能应用开发。

步骤

搭建FISCO BCOS区块链

实现步骤：

  1. 下载build_chain.sh工具

  2. 使用build_chain.sh配置区块链

  3. 使用build_chain.sh启动区块链

命令如下：

1
2
3
4
5
6
mkdir -p ~/fisco
cd ~/fisco
curl -#LO https://github.com/FISCO-BCOS/FISCO- BCOS/releases/download/v2.7.2/build_chain.sh && chmod u+x
build_chain.shchmod u+x build_chain.sh
bash build_chain.sh -l 127.0.0.1:4 -p 30300,20200,8545
bash nodes/127.0.0.1/start_all.sh

成功示例：

3.png

搭建WeBASE-Front平台

实现步骤：

  1. 下载WeBASE-Front安装包
  2. 配置WeBASE-Front
  3. 启动WeBASE-Front

命令如下：

1
2
3
4
5
6
wget https://osp-1257653870.cos.ap- guangzhou.myqcloud.com/WeBASE/releases/download/v1.5.2/webas
e-front.zip
 unzip webase-front.zip
 cd webase-front
 cp -r ~/fisco/nodes/127.0.0.1/sdk/* ./conf/
 bash start.sh

示例区块链智能合约部署

一、智能合约文件创建

  1. 使用浏览器登录http://localhost:5002/WeBASE-Front网站

  2. 点击“合约管理”->“合约IDE” ，新建智能合约，如右第一张图所示。

  3. 在弹出对话框中输入合约名为“StringGetSet” ，文件目录为“/” ，点击“确认“ ，查看文件导航栏是否有StringGetSet文件，如右第二张图所示。

  4. 添加合约内容，具体代码访问链接：https://gitee.com/zhiguxingtu/demo8-back/blob/master/src/main/contracts/StringGetSet.sol

4.png

5.png

二、创建用户、部署合约

6.png

7.png

搭建应用程序后端基本框架并配置

步骤如下：

  1. WeBASE-Front项目导出

9.png

  1. IDEA等编译工具项目导入

  • 通过WeBASE-Front-> 合约IDE导出“StringGetSet”项目，如左下图所示。

  • 使用IDEA等开发软件导入StringGetSet项目，如右下图所示。

  • 在开发软件中对项目进行相关配置。

10.png

  1. 配置Swagger UI

8.png

  1. 验证区块链功能

使用Java SDK的方式调用智能合约

开发基于WeBASE-Front API的应用程序接口

应用接口开发流程

  1. 添加接口开发相关依赖包文件
  2. 编写的WeBASEFront的Controller接口
  3. 开发基于WeBASE-Front的Service
  4. 验证开发接口的正确性

添加hutools依赖包

在build.gradle引入hutools依赖包，代码如下：

1
implementation 'cn.hutool:hutool-all:5.7.9'

11.png

编写WeBASE API服务

需要以下三个步骤：

1、在service包中添加WeBASEService.java文件，以及在controller包中添加WeBASEController.java文件。

2、编写WeBASEService.java对应代码。

3、编写WeBASEController.java对应代码。

12.png

验证接口开发结果

通过浏览器访问：http://localhost:8080/swagger-ui.html

13.png

1、使用newSet调用智能合约：

在WeBASE管理平台，复制一个测试用户的地址。在newSet调用接口中复制该用户地址，并填写对应的值，点击”Try it out！“ 。

14.png

2、使用newGet方法验证：

用同样的方法打开newGet接口界面，并输入用户地址，点击”Try it out！“ 。

16.png

15.png

开发并验证智能合约查询接口

基于Get和Set开发模式，编写Controller与Service：

  1. 在service包中的WeBASEService添加listDeployedContract函数，函数调用WeBASE API的合约查看接口（）

  2. 在controller中的WeBASEController中添加list接口

  3. 访问http://localhost:8080/swagger-ui.html验证

  4. 打开接口直接点击“Try it out！” ，查看返回会有所有合约对应地址内容

17.png

18.png

应用程序前端开发流程

下载模板并安装依赖

1
2
3
4
5
6
7
8
9
mkdir -p ~/fisco/front-project
cd ~/fisco/front-project

git clone
https://gitee.com/zhiguxingtu/init-front.git

cp -r init-front demo8
cd demo8
npm install

开发应用程序前端页面

  1. 添加导航功能，创建components文件夹，在文件夹中创建Navigator.vue，编写相关代码。

  2. 修改主页功能的views/Home.vue相关代码。

  3. 添加其他应用功能在views目录下创建SDK.vue和WeBASE.vue文件，并编写页面显示代码

  4. 修改路由跳转文件router.js代码。代码地址：https://gitee.com/zhiguxingtu/demo8-front

验证应用程序前端开发

1、使用命令启动：

• cd ~/fisco/front-project/demo8

• npm run serve

2、访问：http://localhost:8020/#/home：

【19】

3、访问导航栏的“Java SDK”和“WeBASE”功能：

20.png

21.png

实践尝试

参照StringGetSet智能合约调用功能的页面布局，搭建MyGetSet智能合约的页面

布局。包括内容：

（1）Home页面开发

（2）Java SDK和WeBASE页面开发

（3）导航栏navigator开发

（4）路由router.js的开发

开发应用程序前端对应交互功能

编写智能合约交互功能

1、修改SDK.vue代码，添加Javascript调用后端代码，在<script>标签中添加methods，修改<template>标签中的内容。

2、修改WeBASE.vue代码，添加Javascript调用后端代码，在<script>标签中添加methods，修改<template>标签中的内容。

22.png

验证开发情况

  1. 验证Java SDK智能合约调用情况

（1）进入Java SDK导航，在“Set方法”的输入框输入“你好！” ，有如下返回：

23.png

  1. 验证Java SDK智能合约调用情况

（2）进入Java SDK导航，在“Get方法”调用“调用” ，有如下返回：

24.png

  1. 验证WeBASE-Front API智能合约调用情况

（1）进入WeBASE导航，在“账户地址”输入“test_user_1”的地址，模拟Java SDK的Get方法调用方法。

验证基于WeBASE Front的智能合约交互功能示例：

25.png

开发功能：获取所有智能合约并测试

  1. 修改Home.vue，添加获取列出所有智能合约的方法。

  2. 通过页面验证。

26.png