本教程將向你展示如何設置Meteor應用程序以用作Dapp，并可能回答幾個關于為什么應該使用Meteor的問題。

常問問題

Meteor不是一個完整的堆棧框架，它是如何適應Dapp開發的

是的，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

我是否需要在服務器上托管我的Dapp？

不，使用meteor-build-client，你可以在沒有服務器的情況下運行Dapp的所有靜態資源，但是如果你使用像iron或flow-router這樣的路由器 ，則需要使用hash（index.html#!/mypath）路由而不是干凈的HTML5 pushstate路由。

創建你的Dapp

如果還沒有安裝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集合。

啟動你的Dapp

游覽Meteors文件夾結構

Meteor不會強制你擁有特定的文件夾結構，盡管某些文件夾具有特定含義，并且在綁定/運行你的應用程序時將被區別對待。

具有特定處理的文件夾

• client：名為client的文件夾中的文件只會由應用程序的客戶端部分加載，因為我們正在構建一個Dapp，這就是我們大多數文件所在的位置。
• lib：名為lib文件夾中的文件將在同一文件夾中的其他文件之前加載。這是你的init文件，庫或以太坊特定文件的理想位置。
• public：一個名為public的文件夾包含meteor資源將在你的網絡服務器的根目錄上提供（或以后綁定的Dapp）。
• 還有一些更具體的文件夾，如server，tests，packages等。如果你想了解它們，請查看Meteor

因此，為了構建Dapp，我們理想狀況下是在myDapp文件夾中創建以下文件夾結構：

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

注意社區還提供了像Nick Dodson這樣的Meteor Dapp Boilerplates：https://github.com/SilentCicero/meteor-dapp-boilerplate

連接你的Dapp

要連接我們的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'));

運行你的Dapp

現在我們可以通過簡單運行來運行我們的Dapp：

$ meteor 

如果我們轉到http://localhost:3000，我們應該看到一個網站出現，如果我們打開瀏覽器控制臺，我們可以使用web3對象來查詢geth節點：

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

添加Dapp樣式

如果你希望你的Dapp很好地適應Mist并且遵循官方的外觀，請使用dapp-styles css css/less框架。

請注意，它們正在大量開發中，類名稱和元素可能會發生變化。

要添加它，請將以下包添加到Dapp：

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

現在將myDapp.css重命名為myDapp.less并在其中添加以下行：

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

現在，你可以使用所有dapp-styles類，也可以覆蓋框架的所有變量。你可以在回調中找到它們。通過將它們復制到myDapp.less文件并設置不同的值來覆蓋它們。

使用以太坊包

為了讓你的Dapp開發人員更輕松，我們提供了一些幫助你更快地構建Dapp的軟件包。

如果你添加上面推薦的軟件包，你應該使用以太坊：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)；

如果你現在在瀏覽器中檢查Dapp，你應該會看到最新的塊號，一旦你開采，它將會增加。

有關更多示例，請查看軟件包的readme文件和演示 （源代碼）以獲取更多信息。

Dapp代碼結構

本教程不會用Meteor構建應用程序。有關這方面的信息，請參閱Meteor的教程，優秀資源列表 或使用Meteor或Discover Meteor構建單頁Web應用程序等書籍。

TODO：

• 把以太坊相關的東西放到client/lib/ethereum/somefile.js。
• 使用myCollection.observe({added: func, changed: func, removed: func})與ethereum進行通信，盡可能地保持ethereum邏輯不在你的應用中。這樣你只需要編寫和讀取你的響應集合，觀察函數將處理其余的（例如sendTransactions）
• 過濾器等會將日志等添加到你的集合。因此，你可以將所有回調信息從應用邏輯中刪除。

有關示例，請參閱以太坊錢包。

綁定你的Dapp

要將Dapp綁定到本地獨立文件，請使用meteor-build-client：

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

這會將你的Dapps靜態文件放入myDapp文件夾上方的build文件夾中。

最后一個選項--path將使所有文件相對鏈接，允許你通過單擊build/index.html啟動應用程序。

請注意，在file://協議上運行應用程序時，由于Web安全性，你將無法使用客戶端路由。稍后你將能夠使用客戶端路由，因為dapps是通過eth://協議提供的。

將來你可以簡單地在swarm上傳你的Dapp。

提交你的Dapp

要獲得Dapp的早期流量，你可以將Dapp提交給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