文档章节

如何使用Meteor开发以太坊Dapp

笔阁
 笔阁
发布于 12/03 08:57
字数 2761
阅读 766
收藏 17

本教程将向你展示如何设置Meteor应用程序以用作Ðapp,并可能回答几个关于为什么应该使用Meteor的问题。

常问问题

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

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

Meteor非常适合的5个理由:

  • 它纯粹用JS编写,具有SPA所需的所有工具(模板引擎,模型,动态编译,绑定等)。
  • 你将获得一个开发环境,它具有实时重新加载,CSS注入和支持许多预编译器(LESS,Coffeescript等)即插即用。
  • 你可以使用meteor-build-client将所有前端代码作为单个index.html,使用一个jscss文件加载你的资源。然后,你可以在任何地方托管它或简单地运行index.html本身或稍后在swarm上分发它。
  • 它包含完整的响应性,这使得构建一致的界面更容易(类似于angular.js $scope或binding)
  • 它有一个名为Minimongo的优秀模型,它为你提供了一个类似mongoDB的接口,用于一个被动的内存数据库,它也可以自动持久化到localstorageindexedDB

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

不,使用meteor-build-client,你可以在没有服务器的情况下运行Ðapp的所有静态资源,但是如果你使用像ironflow-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)。
  • 还有一些更具体的文件夹,如servertestspackages等。如果你想了解它们,请查看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:toolsethereum:accountsethereum:blocks

这3个包为你提供了EthToolsEthAccountsEthblocks对象,它们为你提供格式化程序功能,包含来自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启动应用程序。

请注意,在file://协议上运行应用程序时,由于Web安全性,你将无法使用客户端路由。稍后你将能够使用客户端路由,因为dapps是通过eth://协议提供的。

将来你可以简单地在swarm上传你的Ðapp。

提交你的Ðapp

要获得Ðapp的早期流量,你可以将Ðapp提交给Dapp Insight。 这是一个最受欢迎的Dapp分析工具,它列出了世界上所有正在运行的Dapps。

======================================================================

分享一些以太坊、EOS、比特币等区块链相关的交互式在线编程实战教程:

  • java以太坊开发教程,主要是针对java和android程序员进行区块链以太坊开发的web3j详解。
  • python以太坊,主要是针对python工程师使用web3.py进行区块链以太坊开发的详解。
  • php以太坊,主要是介绍使用php进行智能合约开发交互,进行账号创建、交易、转账、代币开发以及过滤器和交易等内容。
  • 以太坊入门教程,主要介绍智能合约与dapp应用开发,适合入门。
  • 以太坊开发进阶教程,主要是介绍使用node.js、mongodb、区块链、ipfs实现去中心化电商DApp实战,适合进阶。
  • C#以太坊,主要讲解如何使用C#开发基于.Net的以太坊应用,包括账户管理、状态与交易、智能合约开发与交互、过滤器和交易等。
  • EOS教程,本课程帮助你快速入门EOS区块链去中心化应用的开发,内容涵盖EOS工具链、账户与钱包、发行代币、智能合约开发与部署、使用代码与智能合约交互等核心知识点,最后综合运用各知识点完成一个便签DApp的开发。
  • java比特币开发教程,本课程面向初学者,内容即涵盖比特币的核心概念,例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等,同时也详细讲解如何在Java代码中集成比特币支持功能,例如创建地址、管理钱包、构造裸交易等,是Java工程师不可多得的比特币开发学习课程。
  • php比特币开发教程,本课程面向初学者,内容即涵盖比特币的核心概念,例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等,同时也详细讲解如何在Php代码中集成比特币支持功能,例如创建地址、管理钱包、构造裸交易等,是Php工程师不可多得的比特币开发学习课程。
  • tendermint区块链开发详解,本课程适合希望使用tendermint进行区块链开发的工程师,课程内容即包括tendermint应用开发模型中的核心概念,例如ABCI接口、默克尔树、多版本状态库等,也包括代币发行等丰富的实操代码,是go语言工程师快速入门区块链开发的最佳选择。

汇智网原创翻译,转载请标明出处。这里是原文如何使用Meteor开发以太坊Dapp

© 著作权归作者所有

笔阁
粉丝 196
博文 165
码字总数 326672
作品 0
海淀
程序员
私信 提问
加载中

评论(2)

笔阁
笔阁
嗯。有需要meteor可以试试。
carl651
carl651
我推荐remix或者truffle
区块链开发如何选择底层平台和开发语言?

大多数人并不需要自己重新创建一套区块链,而是基于现有的区块链底层平台去开发自己的应用,对于类似加密算法、 P2P技术、共识算法等只需要有个基本了解就可以了,暂时不需要深入研究。在文本...

汇智网教程
05/02
0
0
用Visual Studio和C#开发以太坊应用程序

最近区块链技术引起了我的注意。我刚开始了解它,就看到了区块链去中心化架构的巨大潜力,并且它能够简化各种现有繁琐的流程,通过各种形式的。 作为一名.NET开发人员,我主要使用的是一些提...

geek12345
09/14
0
0
开发者的以太坊入门指南 | Jeth 以太坊系列线下活动

免费报名链接 🚀 介绍 Jeth 以太坊系列线下活动:《开发者的以太坊入门指南》来了! Jeth 是由掘金技术社区主办,以太坊社区基金会、以太坊爱好者与 ConsenSys 协办,围绕以太坊技术开发主...

掘金官方
06/03
0
0
Php如何调用以太坊JSON RPC接口

以太坊规定了每个节点需要实现的JSON RPC应用开发接口,如果希望使用PHP开发一个以太坊区块链 上的去中心化应用(DApp),首先要解决的问题就是如何使用PHP调用以太坊JSON RPC接口: 如果你希...

智能合约
07/19
0
0
高手问答第 194 期 — 以太坊智能合约开发:你应该了解的区块链技术

OSCHINA 本期高手问答(4 月 18 日 - 4 月 24 日)我们请来了旷文杰@Marser_cn 和大家一起探讨关于以太坊智能合约开发的问题。 旷文杰(网名:Marser_cn),资深 PHP 工程师,PhalconCMS 开源项...

局长
04/17
4.1K
23

没有更多内容

加载失败,请刷新页面

加载更多

python机器学习及实践学习笔记1-如何打开ipynb后缀文件

python机器学习及实践学习笔记1-如何打开ipynb后缀文件 2017年02月22日 14:58:08 hustzhoutian 阅读数:45365更多 个人分类: 深度学习 需要安装ipython notebook,如果你已经安装Anaconda软...

linjin200
11分钟前
2
0
关于在vim中的查找和替换

1,查找 在normal模式下按下/即可进入查找模式,输入要查找的字符串并按下回车。 Vim会跳转到第一个匹配。按下n查找下一个,按下N查找上一个。 Vim查找支持正则表达式,例如/vim$匹配行尾的"...

休辞醉倒
16分钟前
1
0
in_array的坑

PHP in_array的坑 ps: 应该是弱类型语言的坑 php文档 顾名思义,in_array就是查找一个值是否在数组里面。 问题 事故现场 一个sql注入的测试代码如下: $type = $_GET['type'];$types = [2,3,...

o0无忧亦无怖
16分钟前
18
1
Yarn(包管理器) 的基本用法

Yarn是一个快速、可靠、安全的依赖管理工具,是npm的代替品。 Yarn对你的代码来说是一个包管理工具,你可以通过它使用全世界开发者的代码,或者分享自己的代码。 安装Yarn: 操作系统不同,安...

帝子兮
17分钟前
1
0
阿里云HBase全新发布X-Pack NoSQL数据库再上新台阶

一、八年双十一,造就国内最大最专业HBase技术团队 阿里巴巴集团早在2010开始研究并把HBase投入生产环境使用,从最初的淘宝历史交易记录,到蚂蚁安全风控数据存储。持续8年的投入,历经8年双...

阿里云官方博客
17分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部