如何使用Meteor開發以太坊Dapp

本教程將向你展現如何設置Meteor應用程序以用做Ðapp，並可能回答幾個關於爲何應該使用Meteor的問題。

常問問題

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啓動應用程序。

請注意，在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