ITPub博客

首页 > 大数据 > 数据挖掘 > 如何使用Meteor开发以太坊Dapp

如何使用Meteor开发以太坊Dapp

原创 数据挖掘 作者:Tybyq 时间:2018-12-04 16:28:41 0 删除 编辑

常问问题

Meteor不是一个完整的堆栈框架,它是如何适应Ðapp开发的

是的,Meteor是一个完整的堆栈框架,它的主要改进是实时Web应用程序,但Meteor也是第一个框架(我知道),它完全支持了单页app(SPA)开发并提供了所有必要的工具。

Meteor非常适合的5个理由:

  • 它纯粹用JS编写,具有SPA所需的所有工具(模板引擎,模型,动态编译,绑定等)。

  • 你将获得一个开发环境,它具有实时重新加载,CSS注入和支持许多预编译器(LESS,Coffeescript等)即插即用。

  • 你可以使用 meteor-build-client 将所有前端代码作为单个 index.html ,使用一个 js css 文件加载你的资源。然后,你可以在任何地方托管它或简单地运行 index.html 本身或稍后在 swarm 上分发它。

  • 它包含完整的响应性,这使得构建一致的界面更容易(类似于angular.js  $scope 或binding)

  • 它有一个名为Minimongo的优秀模型,它为你提供了一个类似mongoDB的接口,用于一个被动的内存数据库,它也可以自动持久化到 localstorage indexedDB

我是否需要在服务器上托管我的Ðapp?

不,使用 meteor-build-client ,你可以在没有服务器的情况下运行Ðapp的所有静态资源,但是如果你使用像 iron flow-router 这样的路由器 ,则需要使用hash( index.html#!/mypath )路由而不是干净的HTML5 pushstate路由。

创建你的Ðapp

如果还没有安装Meteor:

$ curl https://install.meteor.com/ |  SH

然后创建一个app:

$ meteor create myDapp$ cd myDapp

接下来添加web3包:

$ meteor add ethereum:web3

我还建议添加以下包:

  • ethereum:dapp-styles :LESS/CSS框架,它为你的dapp提供了一个很好的Mist-consistent外观。

  • ethereum:tools :这个包为 EthTools 对象提供了一组格式转换函数和ether的模板助手。

  • ethereum:elements :一组专门为以太坊制作的界面元素。

  • ethereum:accounts : 为你提供所有当前可用的以太坊帐户的响应式 EthAccounts 集合,其中余额将自动更新。

  • ethereum:blocks :为你提供最新50个块的响应式 EthBlocks 集合。要获得最新的块,请使用 EthBlocks.latest (它还将具有最新的默认 gasPrice

  • frozeman:template-var :为你提供 TemplateVar 对象,允许你设置特定于模板实例的反应变量。

  • frozeman:persistent-minimongo2 :允许你在本地存储中自动保留 minimongo 集合。

启动你的Ðapp

游览Meteors文件夹结构

Meteor不会强制你拥有特定的文件夹结构,尽管某些文件夹具有特定含义,并且在绑定/运行你的应用程序时将被区别对待。

具有特定处理的文件夹

  • client:名为 client 的文件夹中的文件只会由应用程序的客户端部分加载,因为我们正在构建一个Ðapp,这就是我们大多数文件所在的位置。

  • lib:名为 lib 文件夹中的文件将在同一文件夹中的其他文件之前加载。这是你的init文件,库或以太坊特定文件的理想位置。

  • public:一个名为 public 的文件夹包含meteor资源将在你的网络服务器的根目录上提供(或以后绑定的Ðapp)。

  • 还有一些更具体的文件夹,如 server tests packages 等。如果你想了解它们,请查看 Meteor

因此,为了构建Ðapp,我们理想状况下是在myDapp文件夹中创建以下文件夹结构:

- myDapp
   - client
      - lib
      - myDapp.html
      - myDapp.js
      - myDapp.css
   - public

注意社区还提供了像Nick Dodson这样的Meteor Ðapp Boilerplates: https://github.com/SilentCicero/meteor-dapp-boilerplate

连接你的Ðapp

要连接我们的dapp,我们需要在另一个终端中使用正确的CORS头开始 geth

$ geth --rpc --rpccorsdomain "http://localhost:3000"

我们还需要设置provider。理想情况下,我们在lib文件夹中创建一个名为 init.js 的文件,并添加以下行:

if(typeof web3 === 'undefined')
    web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));

运行你的Ðapp

现在我们可以通过简单运行来运行我们的Ðapp:

$ meteor

如果我们转到 http://localhost:3000 ,我们应该看到一个网站出现,如果我们打开浏览器控制台,我们可以使用web3对象来查询geth节点:

> web3.eth.accounts['0xfff2b43a7433ddf50bb82227ed519cd6b142d382']

添加Ðapp样式

如果你希望你的Ðapp很好地适应 Mist 并且遵循官方的外观,请使用 dapp-styles css css/less框架

请注意,它们正在大量开发中,类名称和元素可能会发生变化。

要添加它,请将以下包添加到Ðapp:

$ meteor add less$ meteor add ethereum:dapp-styles

现在将 myDapp.css 重命名为 myDapp.less 并在其中添加以下行:

// libs@import '{ethereum:dapp-styles}/dapp-styles.less';

现在,你可以使用所有 dapp-styles 类,也可以覆盖框架的所有变量。你可以在回调中找到它们。通过将它们复制到 myDapp.less 文件并设置不同的值来覆盖它们。

使用以太坊包

为了让你的Ðapp开发人员更轻松,我们提供了一些帮助你更快地构建Ðapp的软件包。

如果你添加上面推荐的软件包,你应该使用以太坊: ethereum:tools ethereum:accounts ethereum:blocks

这3个包为你提供了 EthTools EthAccounts Ethblocks 对象,它们为你提供格式化程序功能,包含来自 web3.eth.accounts (具有自动更新余额)的帐户的集合以及最近50个块的集合。

大多数这些功能都是响应式的,因此它们应该使构建界面变得轻而易举。

用法示例

如果你看看 myDapp.html 你会发现 hello 模板。只需在 <template name="hello">..</template> 标签之间添加一个名为 {{currentBlock}} helper

现在打开 myDapp.js 并在 counter() {..} 之后添加 currentBlock  helper:

Template.elements.helpers({    counter() {
      ...
    },    currentBlock() {        return EthBlocks.latest.number;
    }
  });

然后通过添加 EthBlocks.init() ;初始化 EthBlocks EthBlocks.init() ;在 this.counter = new ReactiveVar(0)

如果你现在在浏览器中检查Ðapp,你应该会看到最新的块号,一旦你开采,它将会增加。

有关更多示例,请查看软件包的readme文件和 演示   (源代码) 以获取更多信息。

Ðapp代码结构

本教程不会用Meteor构建应用程序。有关这方面的信息,请参阅 Meteor的教程 优秀资源列表  或使用Meteor或Discover Meteor构建单页Web应用程序等书籍。

TODO:

  • 把以太坊相关的东西放到 client/lib/ethereum/somefile.js

  • 使用 myCollection.observe({added: func, changed: func, removed: func}) 与ethereum进行通信,尽可能地保持ethereum逻辑不在你的应用中。这样你只需要编写和读取你的响应集合,观察函数将处理其余的(例如sendTransactions)

  • 过滤器等会将日志等添加到你的集合。因此,你可以将所有回调信息从应用逻辑中删除。

有关示例,请参阅 以太坊钱包

绑定你的Ðapp

要将Ðapp绑定到本地独立文件,请使用 meteor-build-client

$ npm install -g meteor-build-client$ cd myDapp$ meteor-build-client ../build --path ""

这会将你的Ðapps静态文件放入 myDapp 文件夹上方的build文件夹中。

最后一个选项 --path 将使所有文件相对链接,允许你通过单击 build/index.html 启动应用程序。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/31557424/viewspace-2284095/,如需转载,请注明出处,否则将追究法律责任。

下一篇: Kotlin初学者指南
请登录后发表评论 登录
全部评论

注册时间:2018-10-31

  • 博文量
    173
  • 访问量
    60530