怎么使用Meteor開發以太坊Dapp

本篇內容介紹了“怎么使用Meteor開發以太坊Dapp”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

常問問題

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

“怎么使用Meteor開發以太坊Dapp”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！