Developing Ethereum Dapps with Truffle、Ganache and MetaMask

  • Plugin : Metamask
  • Framework : Truffle
  • Server environment : NodeJS
  • Smart Contract Language : Solidty
  • Library : Web3.js
  • Ethereum Blockchain Simulator : Ganach-cli

Source code

Dapps Architecture

If you’re interested in building web apps with the Ethereum blockchain, you may have found the Truffle web framework to be a nice fit for your needs.

For many types of Dapps (Distributed Apps), Truffle does everything you could want: It compiles your blockchain contracts, injects them into your web app, and can even run a test suite against them!

With Metamask, all your users need to do is install our Chrome plugin, and they will have their own secure blockchain accounts right there in the convenience of their browsers.

Installing Truffle Dependencies

You’re going to need to have installed node.js.

From there, you need to install truffle (npm install -g truffle).

Also, you’re going to need to run a local blockchain RPC server to test and develop against. I recommend using Ganache, which you install by running npm install -g ganache-cli.

Next let’s make sure we have our ganache running in the background. Open your terminal and run the command ganache-cli. That's all! It runs on port 8545by default, just like most Ethereum RPCs, and so does Truffle.

Also note that when ganachefirst starts, it prints out a list of accounts that will be pre-funded with ether, along with a twelve-word seed phrase for re-generating those accounts. You can use this seed phrase to initialize your MetaMask client with the same accounts, and you’ll have lots of Ether when you start! (Ether is used to pay for network usage, or gas, on the Ethereum network)

If you wanted to start up ganachewith the accounts you already have in MetaMask, you can tell ganachewhat seed phrase to use with the -m flag. For example:

$ ganache-cli -m "concert load couple harbor equip island argue ramp clarify fence smart topic"

Setting up a simple Truffle Dapp

Next, let’s generate a basic Truffle dapp. The default result of truffle initis a simple example currency.

To get it up and running, run these commands:

mkdir metacoin# Create a folder for your new dappcd metacoin# Move into that foldertruffle init # Initialize a default truffle project in that foldertruffle compilertruffle migrate # Build, compile, & deploy the dapptruffle test test/metacoin.js

Setting up Metamask

If you visit it, you’ll see that by default this new Dapp template signs you in with the first account on your ganache-cli account list, which happens to be the same account that got pre-populated with 10k shiny new Metacoins! That's because when you ran truffle migrate, Truffle used your first account as the contract publisher, and the contract says to fund the creator's account with 10k coins.

You can now send those coins to any account you want, for example, the second account in your ganache-cli list! If you enter an address and a value, and hit send, you'll see your balance go down!

If that seems a little too easy, I’d agree with you! That’s why Metamask gives the user an opportunity to approve every transaction that a Dapp attempts, and that’s more secure!

Let’s try connecting to the same account through Metamask, and see how easy it is!

Setting up Metamask

Now you’ll want to install Metamask from the Chrome store.

Please see how to install Metamask

  1. Open Metamask
  2. Click the current network name in the top right.
  3. Select Custom RPC
  4. Set the current RPCLocalhost:8545address.

5. fill in the second account (0x035b9094158fc6af051242b6c04444c017b7e17c) and amount of 3

6. You will see the the result of transaction.

This has been a simple example, but hopefully shows how Truffle and Metamask work together. They are able to pretty much work out of the box! That’s because Truffle helps you write web3-compliant dapps. Web3 is a Javascript API declared by the core Ethereum team, and Metamask injects it directly into the Dapp’s context!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
胡家維 Hu Kenneth

胡家維 Hu Kenneth

撰寫任何事情,O型水瓶混魔羯,咖啡愛好者,Full stack/blockchain Web3 developer,Founder of Blockchain&Dapps meetup ,Udemy teacher。 LinkedIn: hukenneth , TG:kennethhutw