Attend the FREE training webinar on how to develop & design user-facing dapps (a.k.a. dApps, DApps) for Ethereum!

I don’t know about you, but I’m really excited about blockchain development and decentralized applications (DApps). Do you want to know why? Because I think we’re about to see a new breed of application. One that is “owned by everyone”, or the entire network of participants, instead of a single entity. I affectionately call them Apps For All, and if we can get them to work they’ll be a major new innovation.

But there’s a problem right now. Nobody knows how to design DApps, and nobody knows how to develop user-facing ones. We need to change that now.

When I started to write my first DApp, I had no idea how the UI should work. What should the UI flow look like for allowing a user to write something to a blockchain? How do you let a user execute a transaction from the UI? Why is MetaMask necessary for a DApp, how do you integrate it, and at what point does it get displayed to the user?

My goal in this article is to demonstrate how I designed and developed a “UI Checkout Flow” for a decentralized application that lets users register a photographic asset on the Ethereum blockchain. Along the way, I hope to explain to new Ethereum developers why MetaMask is a critical component of any user-facing DApp, and at what point in a UX interaction it should get displayed.

MetaMask

MetaMask is a wallet and a Chrome extension. As a wallet, it holds Ether and allows you to pay for things on Ethereum. A lot of people use it as a convenient middleman wallet to buy ICO tokens with from a browser.

But more importantly, MetaMask allows any regular user from a Web application to connect to the Ethereum network and interact with DApps. This is MetaMask’s true strength. Without the MetaMask Chrome extension installed, users cannot interact with a DApp from a browser. They’d have to set up their own independent Ethereum node.