Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to use Meteor to develop ethernet Dapp". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Frequently asked questions Meteor is not a complete stack framework, how does it adapt to Q app development

Yes, Meteor is a complete stack framework, and its main improvement is real-time Web applications, but Meteor is also the first framework (I know) that fully supports single-page app (SPA) development and provides all the necessary tools.

5 reasons why Meteor is a good fit:

It is written purely in JS and has all the tools needed for SPA (template engine, model, dynamic compilation, binding, etc.).

You will get a development environment with real-time reloading, CSS injection and support for many precompilers (LESS,Coffeescript, etc.) plug and play.

You can use meteor-build-client to load all the front-end code as a single index.html, and use a js and css file to load your resources. You can then host it anywhere or simply run index.html itself or distribute it later on swarm.

It contains complete responsiveness, which makes it easier to build a consistent interface (similar to angular.js $scope or binding)

It has an excellent model called Minimongo, which provides you with a mongoDB-like interface for a passive in-memory database, and it can also be automatically persisted to localstorage or indexedDB

Do I need to host my Q app on the server?

No, with meteor-build-client, you can run all the static resources of app without a server, but if you use a router like iron or flow-router, you need to use hash routes instead of clean HTML5 pushstate routes.

Create your QQ app

If you have not already installed Meteor:

$curl https://install.meteor.com/ | SH and then create an app:$ meteor create myDapp$ cd myDapp

Next, add the web3 package:

$meteor add ethereum:web3

I also recommend adding the following packages:

Ethereum:dapp-styles: LESS/CSS framework, which provides a good Mist-consistent look and feel for your dapp.

Ethereum:tools: this package provides a set of format conversion functions and template helpers for ether for EthTools objects.

Ethereum:elements: a set of interface elements specially made for Yi Tai Fang.

Ethereum:accounts: provides you with a responsive EthAccounts collection of all currently available Ethernet Fong accounts, in which the balance will be updated automatically.

Ethereum:blocks: provides you with the latest 50 blocks of responsive EthBlocks collection. To get the latest blocks, use EthBlocks.latest (it will also have the latest default gasPrice)

Frozeman:template-var: provides you with a TemplateVar object that allows you to set response variables specific to the template instance.

Frozeman:persistent-minimongo2: allows you to automatically retain minimongo collections in local storage.

Start your Q app tour Meteors folder structure

Meteor does not force you to have a specific folder structure, although some folders have a specific meaning and will be treated differently when binding / running your application.

Folders with specific processing

Client: the files in the folder named client will only be loaded by the client side of the application, because we are building a Q app, which is where most of our files are located.

Lib: files in the folder named lib will be loaded before other files in the same folder. This is the ideal location for your init files, libraries, or ethernet specific files.

Public: a folder called public contains meteor resources that will be provided on the root of your web server (or later bound to Q app).

There are also more specific folders, such as server,tests,packages, etc. If you want to know more about them, please check out Meteor

Therefore, in order to build the Q app, we ideally create the following folder structure in the myDapp folder:

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

Note that the community also provides Meteor Qs such as Nick Dodson app Boilerplates: https://github.com/SilentCicero/meteor-dapp-boilerplate

Connect to your Q app

To connect to our dapp, we need to start geth with the correct CORS header in another terminal:

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

We also need to set up provider. Ideally, we create a file called init.js in the lib folder and add the following line:

If (typeof web3 = = 'undefined') web3 = new Web3 (new Web3.providers.HttpProvider (' http://localhost:8545')); runs your app)

Now we can run our Q app by simply running:

$meteor

If we go to http://localhost:3000, we should see a website appear, and if we open the browser console, we can use the web3 object to query the geth node:

> web3.eth.accounts ['0xfff2b43a7433ddf50bb82227ed519cd6b142d382'] add the app style

If you want your Q app to be well adapted to Mist and follow the official look and feel, use the dapp-styles css css/less framework.

Note that they are under extensive development, and class names and elements may change.

To add it, add the following package to the Q app:

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

Now rename myDapp.css to myDapp.less and add the following line to it:

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

Now you can use all the dapp-styles classes, or you can override all the variables of the framework. You can find them in the callback. Overwrite them by copying them to the myDapp.less file and setting different values.

Use ethernet square package

To make it easier for your app developers, we have provided some packages to help you build Q app faster.

If you add the packages recommended above, you should use Ethernet Square: ethereum:tools,ethereum:accounts and ethereum:blocks.

These three packages provide you with EthTools,EthAccounts and Ethblocks objects, which provide you with formatter functionality, including a collection of accounts from web3.eth.accounts (with automatic balance updates) and a collection of the last 50 blocks.

Most of these features are responsive, so they should make it easy to build the interface.

Usage example

If you look at myDapp.html, you will find the hello template. Just need to be in.. Add a helper named {{currentBlock}} between the tags.

Now open myDapp.js and add currentBlock helper after counter () {..}:

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

Then initialize EthBlocks EthBlocks.init () by adding EthBlocks.init (); in this.counter = new ReactiveVar (0)

If you check Q app in your browser now, you should see the latest block number, which will increase once you mine it.

For more examples, check the package's readme file and demo (source code) for more information.

Q app code structure

This tutorial will not build an application using Meteor. For information on this, see Meteor tutorials, a list of excellent resources, or books such as building single-page Web applications using Meteor or Discover Meteor.

TODO:

Put the things related to Ethernet Square on client/lib/ethereum/somefile.js.

Use myCollection.observe ({added: func, changed: func, removed: func}) to communicate with ethereum to keep ethereum logic out of your application as much as possible. So you just need to write and read your response set, and the observer function will handle the rest (such as sendTransactions)

Filters and so on will add logs and so on to your collection. Therefore, you can remove all callback information from the application logic.

For an example, see Ethernet Square Wallet.

Bind your Q app

To bind the app to a local stand-alone file, use meteor-build-client:

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

This will place your apps static files in the build folder above the myDapp folder.

The last option, path, will make all files relatively linked, allowing you to start the application by clicking build/index.html.

This is the end of the content of "how to use Meteor to develop ethernet Dapp". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.