If you’ve been paying attention to the Blockchain universe lately, you know that the center of action today is in Ethereum.

Ethereum isn’t a store of value like Bitcoin; it’s a decentralized, distributed computational network, running on a set of public nodes. Frontend developers can think of it like a public, distributed database they can access using an API.

You can build fully functional frontend web applications with integrated signon, lambda functions, and storage, just by using the Ethereum blockchain as your backend! It’s like a public, distributed version of AWS or Google Cloud. The most popular API for working with Ethereum today is provided by Metamask, a browser extension.

At Crowdbotics, we help people build blockchain software, Dapps, and Smart Contracts — among other things — and we get to see firsthand all the interesting ways people are applying blockchain technology to real-world problems.

Our goal at Crowdbotics is to help all sorts of people build complex software applications better and faster. That’s why we’re providing this complete guide on building Ethereum DApps with MetaMask.

We will be covering the following topics:

What is MetaMask?

How to get MetaMask

Funding MetaMask with Ether

What is Blockchain?

What is the Ethereum blockchain?

Decentralized Applications (DApps)

Ethereum Ecosystem

Web3 — Ethereum Javascript API

Detecting MetaMask and handling possible error states

Avoiding Race Conditions with onLoad()

Event listeners vs polling the interface

What is MetaMask?

MetaMask is a browser extension that allows web applications to interact with the Ethereum blockchain. For users, it works as an Ethereum wallet, allowing them to store and send any standard Ethereum-compatible tokens (so-called ERC-20 tokens).

For developers, it allows you to design and run Ethereum DApps right in your browser without running a full Ethereum node (which is what developers had to do before Metamask was available). MetaMask talks to the Ethereum blockchain for your web application.

Metamask includes a secure sign-on process, providing a user interface to manage your identities on different sites and sign blockchain transactions. It is easy to use on almost every browser.

Figure 1. MetaMask on Chrome.

Getting MetaMask

To use MetaMask, you will need to install it in your browser. You can choose between Google Chrome, Mozilla Firefox, Opera or Brave. In our case, we will be using Google Chrome browser. As a first step we need to go to the Chrome extension web store, and download the MetaMask extension. Once you are at the Chrome web store, just click on “Add to Chrome ” to add the MetaMask extension into your browser. Then click on “Add Extension” and immediately you will see the icon of MetaMask on the right part of the navbar navigation of your Chrome browser.

Figure 2. MetaMask is added to Chrome.

When MetaMask is installed in your browser, you will see an icon at the same level of the address bar on your browser. You should select the icon and proceed with login:

Figure 3. MetaMask icon will appear on the right side of the address bar.

Before Logging in you should accept Terms of use, Privacy notice and Phishing Warning. Scroll inside the panel in order to have the accept button available. When you accept each one, MetaMask login will appear.

Figure 4. Accept Terms of use, Privacy notice and Phishing Warning.

Figure 5. Insert a password and save the 12 words in a safe place.

Funding MetaMask with Ether

Now, we will learn how we can get some test Ether for our MetaMask. Real Ether cost money and have to be purchased on a site like Coinbase, but test Ether are available for free. First, you need to log in to your MetaMask account and then you should change your Network by clicking on “Main Network” that is located on the left side of the panel, and finally select “Ropsten Test Network”.

Figure 6. On the top-left side of panel you will see a dropdown to change Network.

Be sure to Verify that you are on the correct Network. Next click on the “BUY” button. A panel will appear called “BUY ETH”, finally click on the “Ropsten Test Faucet” button.

Figure 7. Buying 1ETH. Click on “Buy” button, then you click on “Ropsten test Faucet” button.

When you click on “Ropsten Test Faucet”, you will be redirected to https://faucet.metamask.io/. There, you can click on the green button to “request 1 ether from faucet”, wait for a few seconds and you will receive an address transaction, which is actually a confirmation. Now click on the MetaMask icon and verify your 1ETH for testing purposes.