一、研究背景

     DApp（Decentralized Application）去中心化应用，自P2P网络出现以来就已经存在，是一种运行在计算机P2P网络而不是单个计算机上的应用程序。DApp以一种不受任何单个实体控制的方式存在于互联网中。目前DApp所表现出的主要优势在：去中心化，透明，抗干扰，免信任，不变性，快速处理等方面，在界面设计和用户体验设计中也应该让用户通过体验感受到这些特点与优势。   

     DApp是区块链的应用表现形式，它的迅速发展推动了区块链技术与设计的快速融合。在区块链技术产生之前，BitTorrent，Popcorn Time，BitMessage等都是运行在P2P网络上的DApp，随着区块链技术的产生和发展，DApp有了全新的载体和更广阔的发展前景。区块链技术使社会的生产发展与设计的发展之间呈现一种互相补充、互为促进的状态，达成统一有序的意向，形成统一的价值观，从而在整个现代艺术体系中形成互相驱策的状态。DApp应具备代码开源、激励机制、非中心化共识和无单点故障四个要素，而最为基本的DApp结构即为前端+智能合约形式。虽然区块链技术给了我们很大的想象力，但是基于区块链技术的 DApp还处于起步阶段，DApp的价值还有很大的提升空间。

     随着比特币数字货币的发展,区块链吸引了众多业界人士及社会各领域关注,区块链为智能合约提供安全可信的环境,智能合约为其提供灵活的编程特性。智能合约就是在双方或参与者在互不了解、互不信任且没有可信第三方的权威机构下,对合约条款达成共识,实现智能合约的可编程特性。

    2008年,中本聪公开发表了“Bitcoin: A Peer-to-Peer Electronic Cash System”,提出P2P网络、非对称加密技术、时间戳、共识算法的电子现金系统的架构理念,以下是区块链的发展历程:

1. 区块链1.0—比特币代表区块链 1.0,实现了跨境支付、可编程货币,对传统金融市场造成了巨大冲击。因此,区块链 1.0称为可编程货币阶段。
2. 区块链2.0—第一次尝试将区块链技术和现实产业相结合,将其应用于金融、经济领域。以太坊是区块链 2.0。因此,区块链 2.0 称为可编程金融阶段。
3. 区块链3.0 —将区块链从数字货币应用到金融、医疗、物联网等社会的诸多领域,其目的是实现可编程社会。因此,区块链 3.0 称为可编程社会阶段。区块链是用时间顺序将数据区块进行连接并将数据存储在主链上的一种分布式数据库,在区块链系统中用密码学技术实现了数据不被篡改、利用共识机制达成共识,同时使用智能合约实现自动化的编程,并由各节点共享且共同维护的分布式数据账本。

    智能合约的概念在区块链出现之前就被提出,但直到区块链的出现为智能合约的发展提供了条件。智能合约(Smart Contracts) 是将合约内容通过算法和程序的方式编写为代码并在区块链上进行部署,一旦满足了提前制定的规则中的条件,代码将会自动执行而且不需要人为的对代码进行任何的操作。因受到计算场景等因素限制,智能合约得不到应用,但区块链的发展给智能合约提供了新的涵义。此外智能合约包括自动执行、安全灵活等优点。

    以太坊是一个开源平台项目,以太坊智能合约就是以太坊上的一种程序。智能合约的调用过程是将其它合约发来的交易借助外部账户发送到合约账户的这一过程,当接收到外部发来的事件和其他账户发来的交易时,满足预定条件可激活智能合约,并对其进行回应,可以通过发送交易来发出价值或通过发送事件来传递信息。

    本实验以以太坊为基础，首先用Solidity语言编写实现会议报名登记功能的智能合约，加深编写智能合约的能力；之后学习以太坊私有链的搭建、以及合约在私有链上的部署，从而脱离Remix，学习更为强大的Truffle开发组件；进而学习web3.js库，实现前端对智能合约的调用，构建完整的DApp；最后可对该DApp加入个性化机制，例如加入Token机制等，作为实验选做项。该实验实现了一个简单的DApp，但包含了DApp开发的必备流程，为将来在以太坊上进行应用开发打下了基础。

二、实验过程

1.实验环境安装

     在实验环境这里，我们最开始使用了remix这个在线IDE来进行智能合约的编译测试。在确定合约无误后，使用Truffle进行后续的测试与部署。因此，安装Truffle和Ganache不可避免。为了对以太坊区块链进行测试，我们安装了以太网客户端来进行使用Web3.js的测试。为了搭建前端界面，我们使用了create-react-app。为了对账户变化有更深刻理解，我们在浏览器上启用了MetaMask插件。

1.1安装Truffle组件

    Truffle组件在这里使用到的是Truffle和Ganache这两大工具。Truffle组件是一个与以太坊节点交互的开发框架，它使开发人员能够在本地开发、测试和部署智能合约。Truffle提供了一个基于命令行的、易于使用的开发环境，允许开发者通过它编写智能合约，进行本地测试和调试，进行远程部署，以及与以太坊网络进行交互。

     我们通过npm命令安装truffle，并在官网上下载了与truffle版本匹配的Ganache可视化客户端。图1-1、1-2是关于本次项目用到的所有环境的版本。

图1-1 truffle、ganache等版本

图1-2 npm版本

1.2安装creat-react-app

      Create React App是一个用于快速构建React应用程序的工具，它提供了一些默认配置和依赖项，使得开发者可以更轻松地开始开发自己的React应用程序。我们利用它搭建了我们的前端界面。如图1-3，这是本项目用到的版本。

图1-3 create-react-app版本 

1.3启用MetaMask插件

     MetaMask是一种数字加密货币钱包，同时也是一个网络浏览器扩展程序，可在Chrome、Firefox和Brave等浏览器中使用。它使用户能够存储、发送和接收以太坊（ETH）和其他ERC-20代币，是通向Web3、去中心化金融（DeFi）和NFT世界的主要门户之一。ERC20代币是用于在以太坊区块链上创建和发行智能合约的标准。

      MetaMask 还用于存储以太坊数字货币的密钥。MetaMask 不需要任何登录，也不在任何工作人员中存储任何私钥，并且所有密码都非常安全。

     我们使用MetaMask（v11.13.3）来完成项目。如图1-4，这是启动MetaMask后的账户界面。

图1-4  MetaMask上Account 1的账户情况

2.会议报名登记系统的基本功能与实现

      完成合约文件Enrollment.sol的编写，实现一个报名系统，系统应具有以下功能：

      合约参与方包含一个管理员以及其余参与者，管理员可以发起不止一个会议，并指定会议信息以及总人数。参与者首先需要进行注册，将个人基本信息与以太坊地址相关联，并存储在合约上，之后可进行报名，或委托他人为自己报名。当会议报名人满时，该会议将不再可报名。当合约内某些数据发生变化时，应能够触发事件（event）使前端重新获取并渲染数据，例如当某个会议报名人满时，应触发相应事件使前端及时更新可报名会议列表。

2.1实现委托函数及为受托者报名函数

    以下是关于程序实现的部分函数截图：

图2-1 委托函数

图2-2 为委托者报名函数

问题解决

（1）应在合约的哪个函数指定管理员身份？如何指定？

答：在合约的构造函数中制定管理员的身份。通常将创建会议，也就是部署合约的人设置为管理员，所以在此处指定msg.sender设置为管理员。

（2）在发起新会议时，如何确定发起者是否为管理员？简述require()、assert()、revert()的区别。

答：在上述合约中，通过语句require(msg.sender==admin,"permission denied")来检查发起者是否为管理员。在该语句中，使用require()来检查当前交易的发起者是否为合约的管理员，如果不是，则出发一个异常，终止函数执行，并返回错误消息"permission denied"。require()、assert()、revert()的区别：当语句执行失败时，require()和revert()会返还相应的gas，而assert()则不会返还相应的gas。

（3）简述合约中用 memory 和 storage 声明变量的区别。

答：memory 用于在函数内部临时存储数据；变量在 memory 中声明时，它们的值只在函数的执行期间存储，函数执行完毕后，memory中的数据将被清除；通常用于存储函数调用中的参数或局部变量，临时操作数据。storage用于永久性存储数据，通常用于状态变量；变量在storage中声明时，其值将永久保存在以太坊的区块链上，并且可以在不同的交易和函数调用之间保持一致；通常用于存储合约的状态，如合约的状态变量或持久化数据。

3.学习用 Truffle 组件部署和测试合约

      利用 truffle 组件对上述合约进行测试并部署到本地私链上。

      实施步骤：利用truffle初始化一个以太坊项目，将合约Enrollment.sol放入 contracts 文件夹，并编写部署名为 2_deploy_contracts.js 的脚本。然后为合约编写测试文件。利用 Ganache 搭建私链后，在终端进入 truffle 项目目录，输入 truffle test 进行测试。测试完成后在终端输入 truffle migrate 进行合约编译和部署。

3.1新建 truffle 项目并导入合约

      初始化一个以太坊项目，并导入相关合约文件。

      使用truffle新建项目，如图3-1，我们用truffle新建了一个名为sweet的项目：

图3-1 新建Truffle项目

    我们导入1_initial_migration和2_deploy_contracts.js文件到sweet项目中，并修改了truffle-config.js中关于配置的内容。如图3-2和图3-3，这是合约相关文件（2_deploy_contracts.js和truffle-config.js）的代码截图：

图3-2 部署智能合约到以太坊区块链的JavaScript脚本

图3-3 Truffle的配置文件

3.2为合约编写测试文件

TestEnrollment.sol

图3-4 合约测试文件TestEnrollment.sol代码

3.3用Ganache 搭建私链

     打开 Ganache 客户端，选择 NEW WORKSPACE，在 ADD PROJECT 处导入上一步配置的truffle-config.js 文件。此时将会在本地运行一个以太坊私链，并创建 10 个账户供使用。

图3-5 以太坊私链部分账户情况

3.4对合约进行测试和部署

      在终端进入 truffle 项目sweet的目录，输入“truffle test”，输出结果如下：

图3-6 测试项目结果

      使用 Ganache重新搭建一条私链，然后在终端输入“truffle migrate”完成合约的编译和部署。控制台会输出各合约的部署情况以及总共的 gas 花费，Ganache 中的第一个账户即为该合约的部署者。

图3-7 各合约的编译部署情况

3.5观察合约的部署过程

     观察部署完成后 Ganache 的 Blocks、Transactions 以及 Logs 记录，记录如下：

图3-8 合约部署成功后Ganache上块的生成情况

 图3-9 Ganache日志消息显示服务启动成功

详细查看每条交易的信息，如图3-10，这是块86的详细信息：

图3-10 块86的详细信息

     合约的部署流程：首先对链进行的初始化，然后进行合约的编写，进行详细的合约规定。接下来对合约进行编译，将其转换为字节码。然后选择区块链平台，创建钱包和账户。最后进行合约的部署，将编译后的合约部署到网络。当区块链网络确认合同已被添加到区块链中时，交易成功。

    合约的调用流程：首先创建交易，该交易包括调用智能合约的数据。接下来对交易进行签名并将交易广播到区块链网络。接下来等待交易被确认，一但确认，合约中的操作将被执行。

4.​​​​​​​利用 Web3.js 实现合约与前端结合

     通过Web3.js实现智能合约和前端之间的调用和订阅：通过前端对以太坊节点进行 RPC 调用，执行合约中的函数，并将合约返回的数据，以及订阅的合约事件提醒及时展示在前端界面。按照实例更改相应组件下的js 文件以实现对组件的交互，将前端项目中的 src/contracts/contract.js 文件中的 ABI 位置代码更改为合约编译后自动生成的 ABI 信息。

​​​​​​​4.1前端界面接口

     对表单中7个文件的index.js代码进行修改和补充，完成对合约的调用，实现合约与前端的结合七个组件的功能分别对应注册，会议列表，我的会议，新的会议，报名，委托，为委托人报名。

        

图4-1 conflist组件代码

其他组件的代码同理。

​​​​​​​​​​​​​​4.2在前端项目文件中配置合约信息

    将/build 文件夹下会生成的json文件中的ABI信息拷贝到contract.js文件中；在 Ganache 的 contracts 中找到部署的Enrollment合约，将合约地址复制到contract.js中。

contract.js代码如下：

                         

图4-2 contract.js部分代码

      将以太坊网络从连接到以太坊主网改为自定义RPC接口。在自定义界面，将URL设为Ganache部署的地址和端口，单击“保存”按钮并切换至该网络，如下图4-3所示。

图4-3 新建并连接网络Ganache

    部署完成后，在lab8-frontend文件夹中打开文件夹，先执行npm install命令，然后再执行npm start命令。

图4-4 使用npm命令编译成功界面

    执行之后，成功打开部署的智能合约前端界面，并且能够成功打开MetaMask。

图4-5 部署成功后跳转前端页面

     在界面提交任意表单，执行相应合约方法时，如出现下图所示的窗口，则表明前端通Web3.js调用合约成功。该窗口表明，当前账户将执行合约交互操作，且该操作需要花费一定的Gas,需要手动确认支付。

图4-6 确定扣除燃料费，交易成功

5.功能展示

（1）注册管理员账户信息：

图4-7 显示管理员的区块账户信息

（2）新建会议：

图4-8 管理员新建会议1并扣除燃料费

图4-9 Ganache区块上显示会议详细信息

（3）创建两个用户

  图4-10 使用Ganache第二条链新建用户u11

图4-11 Ganache上块的详细信息

图4-12 使用Ganache第三条链新建用户u12

图4-13 Ganache上块的详细信息

（4）委托：

图4-14 账户u12委托账户u11报名

图4-15 Ganache块上关于委托的详细信息

（5）被委托者帮委托者加入会议：

图4-16 u11为u12加入会议conf1

图4-17 Ganache块上显示u12加入conf1成功

图4-18 切换为u12前端显示成功加入会议conf1

（6）加入会议：

图4-19 账户u11加入conf1

图4-20 Ganache块上显示u11加入的会议详细信息

图4-21 u11前端显示成功加入会议conf1

6.项目结构

三、总结

​​​​​​​1.结论

     本文对基于以太坊区块链技术的会议报名登记Dapp的设计、实现进行了研究，总结了Dapp系统的开发方法和技术路线，并在以太坊平台上实现了一个较为复杂的会议报名登记Dapp系统，在实际使用中具有良好的效果。具体工作包括以下几个方面：

     1、确定了基于以太坊区块链技术的会议报名登记Dapp系统的开发方法和技术路线：

     本文比较分析了目前Dapp系统实现方法的特点，根据应用需求与实际情况，确定了基于以太坊区块链的会议报名登记Dapp系统实现的技术途径，构建了该系统的技术框架。

     2、会议报名登记关键算法的构建和优化：

     在基于以太坊区块链技术的会议报名登记Dapp系统中，智能合约是一个关键核心算法，本文具体分析了当前各类智能合约的优缺点，结合会议报名登记具体情况，对智能合约进行了关键优化。

     3、基于以太坊区块链技术的会议报名登记Dapp系统原型的实现：

     根据需求和关键算法，本文设计并实现了一个基于以太坊区块链技术的会议报名登记Dapp系统的原型，并在此基础上展开了应用实验，实验效果良好，达到了设计目标。

​​​​​​​2.进一步工作的方向

    本文的研究虽然取得了初步的成功，但还有许多有待进一步深入进行的研究工作，这里择其要者简要讨论如下：

      1.扩展性和可扩展性：尽管基于以太坊区块链技术的会议报名登记Dapp系统在当前实验中表现良好，但需要进一步研究和测试系统在更大规模和更多用户情况下的性能和稳定性。可以探索优化智能合约和前端应用的方法，以提高系统的扩展性和可扩展性。

      2.用户界面和体验改进：目前实现的Dapp系统原型可能还存在着用户界面不友好、操作复杂等问题。进一步的工作可以包括改进用户界面设计，提供更加直观和易用的用户体验，以吸引更多用户使用和参与。

      3.安全性和隐私保护：虽然区块链技术本身具有很高的安全性，但在实际应用中仍然存在一些安全风险和隐私问题。未来的研究可以关注如何增强系统的安全性，包括加强智能合约的安全审计、防止恶意攻击等措施，以及保护用户的隐私信息。

     4.跨链集成和互操作性：当前的Dapp系统是基于以太坊区块链实现的，但在未来可能需要与其他区块链平台进行集成和交互。因此，进一步的工作可以探索如何实现跨链集成和互操作性，以便将该系统与其他区块链平台进行无缝连接。

     5.数据分析和业务拓展：通过对系统中产生的数据进行分析和挖掘，可以获取有关用户行为、报名趋势等方面的洞察。进一步的工作可以包括开发数据分析工具和算法，以帮助组织者更好地了解用户需求和市场动态，并根据分析结果进行业务拓展和发展。

      总结而言，进一步的工作方向旨在提高系统的扩展性、改善用户体验、增强安全性、实现跨链集成和数据分析，以推动基于以太坊区块链技术的会议报名登记Dapp系统的持续发展和应用。