Blockchain Coding Dojo - BlockchainHub Graz

Blockchain Coding Dojo
Ethereum Smart Contract with Solidity & web3.JS

First Up:
● The Who / The Why / The How / The What
● Short Presentation
○ Example we’re going to build
○ Setup & Tools
○ Solidity crash course
○ Web3.js crash course
● Q & A
Welcome To The Dojo!

● Get Programmers more involved in Blockchain technology
○ Get a feeling for what creating DApps is all about
○ Get to know the tools & ecosystem
○ Share experiences & learn
The Why

● Coding Dojo!
○ Split up in N % (3|4) groups
■ (groups of 3 or 4)
○ Driver/Navigator Pair Programming (switch every ~8 Minutes - don’t
hug the keyboard!)
■ Rest of the group contributes via discussion
○ Didi & Mario are available for help (as far as we can (not far! :D))
○ Start Coding!
■ An example including a smart contract and a UI for using it
○ Victory!
■ Deploy the contract to the testchain
■ (If you’re done and still motivated, feel free to experiment with
/ expand the example!)
The How

The What
Winner-Takes-All Crowdfunding on the Ethereum
Blockchain!

Example: Winner-Takes-All Crowdfunding
Basically:
A Crowdfunding System, where people can submit their Projects until a
Deadline, with an entry fee to avoid spam.
After this Deadline, people can “vote” for projects using Ether until a second
Deadline.
After the second Deadline, the Contract can be finished and the project with
the most “votes” (i.e. Ether) wins the WHOLE pot (all entry fees + all pledged
Ether).

Winner-Takes-All Crowdfunding - Tasks
● Create contract with proposal date, campaign date in the future and
minimum entry fee
● People can enter projects (with an initial money transfer of X ether, so
there's no spam)
○ until proposal date
● Now, after proposal date, other people can "vote" with ether for the
projects
● When the target date is here and the contract gets finished, ALL the money
goes to the project with the highest votes (most money contributed)
○ and contract is closed thereafter

Winner-Takes-All Crowdfunding - “Layout”

Setup & Tools
● Repository:
○ https://github.com/zupzup/blockchainhub-solidity-dojo
● Includes:
○ app.js - the UI JavaScript source
○ contract.sol - the smart contract source
○ contract.js - contract in one-line-form for web3.js
○ index.html - the HTML for the UI
○ js/ - static js
○ css/ - static css
○ LICENSE - the license (duh!)
○ README.md - setup & task list

Setup & Tools
● Docker
○ https://www.docker.com/
● Solidity (Solc)
○ https://solidity.readthedocs.io/en/develop/#
○ https://ethereum.github.io/browser-solidity
● testRPC
○ https://github.com/ethereumjs/testrpc
● Web3.JS
○ https://github.com/ethereum/web3.js
○ There are some high-level frameworks as well
■ https://truffle.readthedocs.io/en/latest/
■ https://github.com/iurimatias/embark-framework
■ http://populus.readthedocs.io/en/latest/
■ ...

Setup & Tools
● Bothersome to set up locally, so we’ll use Docker
● TestRPC (our local blockchain, which auto-mines)
○ docker pull harshjv/testrpc
○ docker run -d -p 8545:8545 harshjv/testrpc
● Building (compile and make ready to use with web3.js)
○ docker pull mzupzup/soliditybuilder
○ docker run -v /path/to/this/folder:/sol mzupzup/soliditybuilder
○ OR (on Linux + macOS) with file-watcher
■ docker pull mzupzup/soliditywatcher
■ docker run -v /path/to/this/folder:/sol mzupzup/soliditywatcher

Setup & Tools
● Once testRPC and the build-container are running
○ Open index.html and see what’s what
○ Explore contract.sol and app.js
○ Get to work! :)
● Documentation:
○ Solidity
■ http://solidity.readthedocs.io/en/develop/
○ Web3.JS
■ https://github.com/ethereum/wiki/wiki/JavaScript-API
○ Async.js
■ http://caolan.github.io/async/docs.html
○ jQuery / HTML / CSS / JavaScript
■ https://duckduckgo.com/?q=jquery ;)

Solidity
● High-level language for smart contracts
○ Syntax similar to JavaScript
○ Statically typed, Inheritance, Libraries can be imported
● https://ethereum.github.io/browser-solidity
● Docs:http://solidity.readthedocs.io/en/develop/index.html
● We will use 0.4.6 (0.4.10 now, moves VERY fast)
● Still very much in development, so some random things
just don’t work (yet)
○ http://solidity.readthedocs.io/en/develop/frequently-asked-questions.
html

Solidity - Smart Contracts Basics
● Contract is basically your “backend application”
○ Running on the Blockchain
● Smart Contracts need Gas (i.e.: Money) to run
○ No real money on our testRPC setup of course
○ You can estimate the gas cost via web3 / browser solidity
○ Only state-changing operations consume Gas
■ Just asking for a variable doesn’t
○ Unused Gas is refunded
■ E.g.: you send a transaction and add 10000 Gas.
● The transaction only needs 5000, so you get 5000 back
immediately.
○ Incentive to leave a minimal footprint

Solidity - Types
● Integers
○ uint8 - uint256
○ int8 - int256
● Strings
● Address
○ .balance
○ .send()
● Booleans
● ...

Solidity - Data Structures
● Array (fixed & dynamic)
○ Mostly as one would expect (.length, array[0...N])
● Mapping (similar to hashmap)
○ Can’t iterate over!
● Struct

Solidity - Events
Used for debugging only (logs to the blockchain)

Solidity - Special Variables
● Msg.value - value of the transaction
● Msg.sender - address of the transaction’s sender
● http://solidity.readthedocs.io/en/develop/units-and-globa
l-variables.html#block-and-transaction-properties

Solidity - Throw
Reverts transfer, returns “error”

Solidity - Example Contracts
http://solidity.readthedocs.io/en/develop/solidity-by-exampl
e.html
Remember, maybe we can’t use ALL new features of 0.4.10,
because we use the 0.4.6 compiler.

Web3 - the Ethereum JavaScript API
● https://github.com/ethereum/web3.js
● Used for:
○ Connecting to the Blockchain
○ Compiling contracts
○ Instantiating Contracts
○ Calling methods on contracts
○ Retrieve public values from contracts
○ Send Transactions
○ Convert to/from Wei
● Basically a full interface for the Ethereum Blockchain
○ Docs: https://github.com/ethereum/wiki/wiki/JavaScript-API

● Addresses of available accounts:
○ web3.eth.accounts
● Get Balance for an account in Ether:
○ web3.fromWei(web3.toDecimal(web3.eth.getBalance(web3.eth.accounts[0])
), ‘ether’)
● Get a “public” attribute of the contract:
○ contractInstance.{publicAttribute}(function(err, data) { ..callback
function.. })
● Sending a simple transaction:
○ contractInstance.{payableFunction}(function params.., {
from: fromAddress,
value: valueToSendInWei,
gas: gasCostOfTransaction
}, function(err, data) { ..callback function.. })
Web3 - Examples (just to get a feeling for the API)

● Debugging (very important!)
○ Browser Dev Tools
○ Solidity Events
■ Can listen to them in web3.js
■ https://github.com/ethereum/wiki/wiki/JavaScript-API#contract-all
events
■ Logs all events within the contract
Web3

These Slides: https://goo.gl/Msofql
https://github.com/zupzup/blockchainhub-solidit
y-dojo
Let’s Roll!

Blockchain Coding Dojo - BlockchainHub Graz

More Related Content

What's hot (20)

Similar to Blockchain Coding Dojo - BlockchainHub Graz (20)

More from BlockchainHub Graz (20)

Recently uploaded (20)

Blockchain Coding Dojo - BlockchainHub Graz