Screenshot from the live app. This post will walk you, a React developer, through building your first distributed app on the . Blockchain It seems like everyone in the tech industry (well almost everyone) talks about , Blockchain and distributed apps. This got me intrigued, so I wanted to build something useful using this technology to better understand what are the challenges and opportunities in this space. This post is the first of two describing my experience of building my first distributed Ethereum Blockchain app. Bitcoin I’ll go over the steps needed to build a Smart Contract, how to compile and deploy it to a local Blockchain network and how to build a server side rendering React app in order to interact with our contract. Before getting into the code I would suggest one to go over on truffle website to get some concepts and terms down before proceeding. Ethereum Overview In this post I’ll go over: Setting up The Development Environment Writing and Testing a Smart Contract Compiling and deploying our Smart Contract ( Our DApp decentralized application) As the fall tv season just started in the US, we would like to use the Blockchain (Ethereum) as an efficient way to handle the mapping of a user’s and their favorite tv shows. The app displays a list of shows coming from unofficial API. Split into three categories: Fresh, New and Popular. rotten tomatoes A special section in the app “Bookmarks” displays a list of user’s favorite shows which are currently stored on the Blockchain. Users are able to add or remove shows from their Bookmarks section. Every time a user adds or removes a show a Smart Contract function is invoked and the change is stored on the Blockchain. The front-end app is a server side rendering React app powered by , for state management we’ll use M X, styling and layout will come from the awesome project and in order to interact with the Blockchain we’ll write a Smart Contact in solidity, write tests for it in JavaScript and deploy it locally using . Next.js ob tachyons truffle Setting up The Development Environment Make sure you have node, git and nvm install before starting this. First we need to install TestRpc and Truffle: npm install -g ethereumjs-testrpc npm install -g truffle Now clone the app and install the dependencies: //clone the repogit clone :liors/tvdapp.git git@github.com // Navigate to within the directorycd tvdapp //install dependenciesyarn install Implementing the Smart Contract Our app uses the Blockchain in order to store user’s favorite shows. In order to do that we need to implement a Smart Contract that acts as its backend logic and storage. Under the /contracts directory you can find a Bookmark.sol file: If you’re new to solidity (like me) their docs has a “solidity by example” section which I found very useful. site A bit about the contract. We start by declaring a contract which we name Bookmark. The contract has two public APIs. bookmark — which except a string that represent a show. I choose to store a JSON that will be reuse in our app UI. As another approach one could store a reference ID to some external storage. getBookmarks — which will return an array of shows per account. Testing the Smart Contract You can write tests to Smart Contracts in either solidity or JavaScript. For JavaScript tests Truffle uses the testing framework and for assertions. Mocha Chai Under the /tests directory you can find a bookmark.js file: In order to run the tests you first have to have a local instance of testrpc. Once your EthereumJS TestRPC session start you can execute the tests: yarn test Let’s go over the cases we would like to cover: A case when a client requests to bookmark a show — In this case we first get the instance of our contract, then call the public API ‘bookmark’ which except a string as it’s first argument and a configuration object that includes the ‘from’ attribute. We then call the second getBookmarks public API as a result we get back a promise which when resolved should contain the show (string) we pass to the bookmark function. A case when a client requests to bookmark a list of shows — Same as our first use-case, but now we want to make sure we can store a list of shows, as such we will first bookmark few shows by passing an array of JSON objects and call our getBookmarks function to verify our Smart Contract is valid. Deploying our Smart Contract to a local Blockchain We have just implemented and tested our Bookmark Smart Contract, it’s time to compile it and migrate (deploy) it to our test network. Compilation Solidity is a compiled language, meaning we need to compile our Solidity to bytecode for the Ethereum Virtual Machine (EVM) to execute. Start a new terminal window and invoke the testrpc module we installed globally: testrpc This starts a local Ethereum blockchain instance. 2. Now let’s compile the Smart Contract we implemented: truffle compile This will compile our .sol file(s). You should see the output of this compilation as JSON(s) files in build/contracts folder. Deploying/Migration I’ve used the default migration file provided when you run truffle init. You can find it under /migrations/1_initial_migration.js. Under the /migration folder you can also find 2_deploy_contracts.js. This file requires our Smart Contract i.e., Bookmark.sol and deploy it: const Bookmark = artifacts.require('./Bookmark.sol') module.exports = deployer => deployer.deploy(Bookmark) In order to execute this script run: truffle migrate We have just deployed our contract to a local Blockchain network! In the next post we’ll go over our React app and see how we can use Next.js, MobX and web3.js to build a UI that interacts with our Smart Contract we just implemented. The complete code for this app is available on . github A live version of the app is deployed — Please make sure your browser can run DApps, I’ve been using chrome extension. here MetaMask Thanks for reading. Hope this is helpful.

Dapp

Too Long; Didn't Read

Discover Saakuru: Web3 Mass-Adoption with 0-FEES

Building a Blockchain DApp using truffle, React, Next.js and MobX (part I)

Too Long; Didn't Read

Company Mentioned

Lior Shefer

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Building a Blockchain DApp using truffle, React, Next.js and MobX (part I)

Too Long; Didn't Read

Company Mentioned

Lior Shefer

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES