Mastering dApps

In mastering dApps, you're going to learn how to create advanced decentralized applications that use the smart contract that we saw in previous chapters. We'll go through all the steps from scratch including planning, developing the code, and testing the applications. First, you'll start by taking a look at how dApps are structured so that you can efficiently create new dApps from scratch. You'll go through the installation of Ethereum and Truffle to use it for your products. Then, you'll learn how to create great user interfaces that show people the right content without clutter. Finally, you'll create the smart contracts required to interact with the dApp and you'll integrate those to allow users to interact easily with the contracts from the interface.

In this chapter, we're going to cover the following topics:

• Introducing...

Introducing dApp architecture

Architecting a decentralized application means making high-level software decisions to direct the design of our ideas. We are laying out the steps so that we can fluently create a dApp without getting stuck in design decisions. It also implies planning how the smart contract will communicate with the dApp, how users will interact with the dApp, and what kind of features we want for the end product.

When designing an application, we want to focus heavily on the user experience so that they feel comfortable using the resulting dApp. That's why it's important to have a clear vision of how it will look before we start coding because if we want to have a modern dApp that feels responsive for tech users, we'll have to focus more on providing extensive information about each element of our application.

For instance, let's suppose that...

Installing Ethereum and Truffle

To create truly powerful decentralized applications, we need to have a local version of Ethereum and Truffle. You can't get Ethereum by itself; you need to use a client, which in this case will be Geth. Truffle is a framework for creating, deploying, and testing dApps on your machine without having to wait for external services, all in one place.

There are different Ethereum implementations, with the most well-known being Parity and Geth. When it comes to installing Ethereum, what you're actually doing is getting a client that implements its protocol, so you have a choice regarding your favorite development system.

Let's go ahead and install Ethereum and Truffle. First, to get Ethereum on Mac, you need to run the following commands:

brew update && brew upgrade
brew tap ethereum/ethereum
brew install ethereum

That will compile...

Setting up and configuring Ethereum and Truffle

Now that we have the required tools, we'll set up the basic file structure so that we have a clean environment to work with for all of our desired dApps. You'll be able to use it over and over as long as you need to, because it has all the dependencies set up.

First, let's create a folder called dapp, which will contain all of our files. Then, with your Terminal or command line, execute truffle init to set up Truffle, making sure that you're inside the dapp folder.

After installing Truffle in that folder, run npm init to set up your package.json file of Node.js that will allow you to install npm plugins. It will ask you for some general information about your project; simply fill it in as you please or press Enter to leave them empty, which is what I usually do unless I'm planning on distributing that project...

Creating dApps

You are now ready to create dApps with Truffle, React, Webpack, and Solidity. To gain the required knowledge as fast as possible, we'll go through all the steps that it takes to create a fully working decentralized application. In this chapter, we are creating a music recommendation social media platform where people will be able to publish songs, they love at that moment to help their friends find interesting music to enjoy, all stored inside smart contracts without a centralized server.

We'll first create the smart contracts, then the user interface, and finally, we'll combine them all together with web3.js. We will test our decentralized application when the main interface is done to make sure it works properly.

Creating the smart contract

...

Creating user interfaces

Because we have a clean react.js project properly set up, we can start right away with creating our application's user interface. We'll use sample data to check the design before moving on and integrating the real smart contract code.

Open up the src/index.js file to start coding your design:

import React from 'react'
import ReactDOM from 'react-dom'

class Main extends React.Component {
    constructor() {
        super()
    }

    render() {
        return (
            <div>
                <h1>Welcome to Decentralized Social Music!</h1>
                <p>Setup your account, start adding musical recommendations for your friends and follow people that may interest you</p>
                <div className="buttons-container">
                    <button>Setup Account</button>
  ...

Connecting smart contracts to web applications

Decentralized applications are made of smart contracts and user interfaces. Now that we have both elements, we can combine them by connecting the frontend with the backend using web3, the most powerful tool for interacting with the Ethereum blockchain from the browser.

Let's start by getting web3.js. You can install it with the following command:

npm i -S web3

Then, import it into your index.js file, as follows:

import React from 'react'
import ReactDOM from 'react-dom'
import web3 from 'web3'
import './index.css'

You don't really need to install web3 since most, if not all of your users will have MetaMask installed, which automatically injects web3.js to your application. Nevertheless, it is good practice to have web3 in your application's code because you can control which version...

Summary

In this chapter, you saw first-hand how to create a decentralized application with all the little nuances and changes required. You've gone through the entire process, starting from setting up your development environment with React, webpack, and Truffle. You've learned how to create React components that organize your code neatly so that you can manage all the complexity of your dApp with ease.

Remember to add this application to your GitHub as proof that you finished it to improve your resume with valuable projects so that future clients can see with their own eyes what you can do for them and that you've mastered all the steps that it takes to build a fully decentralized application. In the next chapter, you'll learn more about improving your dApps with further advanced tips so that they feel responsive and behave like high-quality systems.

...