Last updated: November 2018.
This tutorial series will teach you how to build a ToDo List Dapp on Ethereum. It is regularly UPDATED with the latest development of Solidity, Truffle & Web3. Already published:
- Intro
- Step 1: Writing The ToDo Smart contract – beginning
- Step 2: Writing The ToDo Smart contracts – end
- Step 3: Writing The Nodejs Backend
- Step 4: Setup the frontend and read account data
- Step 5: Build a smart contract client with Truffle Contract
- Step 6: Refactor With Webpack, ES6 and truffle-solidity-loader
- Step 7: Read Contract data from Frontend
- Step 8: Create smart contract data from frontend
- Step 9: Toggle task done & keep frontend updated
Each tutorial has:
You will learn how to:
- Develop Solidity smart contracts: data structures, functions, modifier, mapping, arrays, and more.
- Use the Truffle framework to build Ethereum Dapps: compilation, migration, configuration of Truffle project
- Use Web3 and TruffleContract to communicate between the frontend and the smart contract
- Configure Webpack for Ethereum Dapp development (with truffle-solidity-loader)
This will cover every part of the Dapp:
- Smart contract (Solidity)
- Backend (Nodejs server to serve the frontend)
- Frontend (Javascript and jQuery)
The dapp will be able to:
- create new tasks
- list existing tasks
- toggle a done/not done status for each task.
Once finished it will look like this (click to enlarge):
Requirements
Before starting, make sure to have installed:
- Nodejs (v8.9.0 / npm v4, or a later version of the nodejs v8 branch). Nodejs v6 will probably also work.
- Truffle framework (v4). This is the most popular framework used for developing Solidity smart contracts. It can be installed with npm:
npm install -g truffle
- The Ethereumjs-testrpc v4 (v6). This is a developer version of the Ethereum daemon that can run a local Ethereum blockchain. Very useful for developers. It is also sometime called “testrpc” and “local testnet”. It can be installed with npm:
npm install -g ethereumjs-testrpc
- UPDATE January 2018: ethereumjs-testrpc has been renamed to ganache-cli. Using the package mentioned before will also work, but it is better to use “ganache-cli” for your future projects.
Leave a Reply