如何使用Meteor开发以太坊Dapp

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

FAQ Meteor 不是一个完整的堆栈框架，它如何适应 Dapp 开发

是的，Meteor 是一个全栈框架以太坊需要会前端吗，它的主要改进是实时 Web 应用程序，但 Meteor 也是第一个完全支持单页应用程序（SPA）开发并提供所有必要工具的框架（据我所知）。

Meteor 非常适合的 5 个原因：

我需要在服务器上托管我的 Ðapp 吗？

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

创建你的应用程序

如果还没有安装 Meteor：

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

然后创建一个应用程序：

$ meteor create myDapp
$ cd myDapp

接下来添加 web3 包：

$ meteor add ethereum:web3 

我还建议添加以下包：

启动 Ðapp 并浏览 Meteors 文件夹结构

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

具有特定处理的文件夹

因此，为了构建 Ðapp，我们最好在 myDapp 文件夹中创建以下文件夹结构：

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

请注意，社区还提供像 Nick Dodson 这样的 Meteor Ðapp Boilerplates：

连接您的 Ðapp

要连接我们的 dapp，我们需要在另一个终端中使用正确的 CORS 标头启动 geth：

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

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

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

运行你的应用程序

现在我们可以通过简单地运行运行我们的 Ðapp：

$ meteor 

如果我们转到：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 样式类，还可以覆盖框架的所有变量。 您可以在回调中找到它们。 通过将它们复制到 myDapp.less 文件并设置不同的值来覆盖它们。

使用以太坊包

为了让您的 Ðapp 开发人员的生活更轻松，我们提供了一些包来帮助您更快地构建 Ðapps。

如果您添加上面推荐的包，您应该使用以太坊：ethereum:tools、ethereum:accounts 和 ethereum:blocks。

这 3 个包为您提供 EthTools、EthAccounts 和 Ethblocks 对象，这些对象为您提供格式化程序功能、包含来自 web3.eth.accounts 的帐户的集合（具有自动更新余额）以及最后 50 个区块的集合。

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

使用示例

如果你查看 myDapp.html，你会发现 hello 模板。 只需在 .. 标签之间添加一个名为 {{currentBlock}} 的助手。

现在打开 myDapp.js 并在 counter() {..} 之后添加 currentBlock 助手：

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

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

如果您现在在浏览器中查看 Ðapp，您应该会看到最新的区块编号，一旦您挖矿，该编号就会增加。

有关更多示例，请查看包的自述文件和演示（源代码）以获取更多信息。

Ðapp 代码结构

本教程不会使用 Meteor 构建应用程序。 有关这方面的信息，请参阅 Meteor 的教程、优秀资源列表或诸如使用 Meteor 构建单页 Web 应用程序或发现 Meteor 之类的书籍。

去做：

有关示例，请参见以太坊钱包。

绑定你的应用程序

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

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

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

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

请注意，在 file:// 协议上运行您的应用程序时，由于网络安全，您将无法使用客户端路由。 稍后您将能够使用客户端路由，因为 dapps 通过 eth:// 协议提供服务。

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

提交你的应用程序

要尽早获得 Ðapp 的流量，您可以将 Ðapp 提交到 Dapp Insight。 这是最流行的 Dapp 分析工具之一，它列出了世界上所有正在运行的 Dapp。

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

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