Developing a decentralised application for Ethereum

The slides from my presentation at Devoxx Morocco 2019 in Agadir.
#devoxxma #chainskills

1. Developing a Decentralised application for Ethereum Said Eloudrhiri 1 November 12th, 2019
2. 2 • In IT since 1992 • Agile coach • Developer, Trainer, Speaker, Writer • Founder of Noratek • Co-founder of ChainSkills with Sébastien Arbogast (@sarbogast) @eloudsa
3. 3 Disclaimer • We are not related to any bank or any trading company or marketplace. • Material used in this presentation remains the property of their owners.
4. #chainskills Disclaimers (bis) 4 • This is completely original code • Bear with us: there are PoCs, it might not be the most efficiently coded • This is by no means usable in production • We will focus on smart contracts and show you a bit of web user interface at the end • Room for improvement? Please contribute on Github ;-) • Demo session could fail. Shit happens ;-)
5. Developers, not traders #chainskills 5
6. Enthusiasts, not experts #chainskills 6
7. Blockchain Ethereum 7
8. 8 0x1AB… 0X2CD… + TX gas fee OK OK Signed Tx 0x1AB sends 1 ETH to 0x2CD OK
9. Bloc #0 Bloc #1 Bloc #2 Bloc #3 Genesis TX 1 TX 2 TX 3 TX n TX 1 TX 2 TX 3 TX n TX 1 TX 2 TX 3 TX n 9 TX 3 Tx 3 0x1AB sent 1 ETH to 0x2CD
10. Trust? 10 0x1AB… 0X2CD…
11. Bloc #0 Bloc #1 Bloc #n Bloc #n+x Genesis TX 1 TX 2 TX 3 TX n TX 1 TX 2 TX 3 TX n TX 1 TX 2 TX 3 TX n 11 … TX 1 TX 2 TX n TX 3 … Bloc #n-1 TX 3 fake …
12. Blockchain 12
13. Bitcoin = Payment transactions 13
14. Ethereum = Payment transactions 14
15. Ethereum = Generic transactions 15
16. In a blockchain, business processes are coded into (immutable) smart contracts 16
17. Smart contract 17 • Micro-service • Distributed across the Ethereum network • Uniquely identified through its unique address • The code is immutable, so not updatable • State variables are mutable • The exposed functions modify the state • Has a wallet and a balance in ether • Can receive/transfer ethers from/to a user or to another contract • Can be composed with other contracts • Can emit events or throw exceptions
18. 18 Bloc 0 Bloc 1 Bloc 2 Bloc 3 Bloc n smart contract Ethereum Virtual Machine 0x123 ?
19. 19 smart contract HTML, CSS, JS web3js Dapp 0x123
20. 20 HTML, CSS, JS web3js Dapp/Frontend Bloc 0 Bloc 1 Bloc 2 Bloc 3 Bloc n smart contract Dapp/Backend Ethereum Virtual Machine 0x123 wrapper Wallet
21. Deploy a smart contract pragma solidity ^0.4.25; contract Greetings { string message; constructor() public { message = "I am ready!"; } function setGreetings(string _message) public { message = _message; } function getGreetings() public view returns (string) { return message; } } Solidity code Greetings.sol Bytecode ABI Address Code Balance Greetings.json Ethereum node compile deploy
22. 22 0x608060405234801561001057600080fd5b5060408051908101604052806 00b81526020017f4920616d20726561647921000000000000000000000000 0000000000000000008152506000908051906020019061005c92919061006 2565b50610107565b82805460018160011615610100020316600290049060 0052602060002090601f016020900481019282601f106100a357805160ff19 168380011785556100d1565b828001600101855582156100d1579182015b8 28111156100d05782518255916020019190600101906100b5565b5b509050 6100de91906100e2565b5090565b61010491905b808211156101005760008 160009055506001016100e8565b5090565b90565b6102d780610116600039 6000f30060806040526004361061004c576000357c0100000000000000000 000000000000000000000000000000000000000900463ffffffff16806349da5 de414610051578063ca4c3a41146100ba575b600080fd5b34801561005d576 00080fd5b506100b860048036038101908080359060200190820180359060 2001908080601f01602080910402602001604051908101604052809392919 0818152602001838380828437820191505050505050919291929050505061 014a565b005b3480156100c657600080fd5b506100cf610164565b60405180 8060200182810382528381815181526020019150805190602001908083836 0005b8381101561010f5780820151818401526020810190506100f4565b505 05050905090810190601f16801561013c5780820380516001836020036101 000a031916815260200191505b509250505060405180910390f35b8060009 080519060200190610160929190610206565b5050565b6060600080546001 81600116156101000203166002900480601f0160208091040260200160405 1908101604052809291908181526020018280546001816001161561010002 03166002900480156101fc5780601f106101d1576101008083540402835291 602001916101fc565b820191906000526020600020905b815481529060010 1906020018083116101df57829003601f168201915b5050505050905090565 b828054600181600116156101000203166002900490600052602060002090 601f016020900481019282601f1061024757805160ff191683800117855561 0275565b82800160010185558215610275579182015b82811115610274578 251825591602001919060010190610259565b5b5090506102829190610286 565b5090565b6102a891905b808211156102a457600081600090555060010 161028c565b5090565b905600a165627a7a723058201a235e9931eb6f7b0e5 f7612b43b88fa6773d29d40dce4582687be83c66fc9b00029 Disamssembly Bytecode Opcode
23. 23 0X123… 0x456… Transaction fee (Gas) 21000 Gas
24. 24 https://ethereum.github.io/yellowpaper/paper.pdf
25. Gas, Gas Price 25 Transaction Fee = Gas * Gas Price 0X123… 0x456… Gas: sum used to execute each opcode Gas Price: Price in Wei that the account is willing to pay per unit of gas
26. 26 http://eth-converter.com/extended-converter.html Ether metric system
27. Gas, Gas Price 27 Transaction Fee = Gas * Gas Price 0X123… 0x456… ? Gas Price: 20 Gwei Defined by you Gas: 21000 Opcode cost 1 ETH ? 1 ETH
28. Gas, Gas Price 28 Transaction Fee = Gas * Gas Price 0X123… 0x456… Transaction Fee = 420000 Gwei Transaction Fee = 0.00042 ether Paid by Alice to the Miner 1 ETH 1 ETH + 0.00042 ETH
29. Low Gas Price = Long Delay 29 Transaction Fee = Gas * Gas Price 0X123… 0x456… ? Gas: 21000 Gas Price: 1 Gwei Too low? You will have to wait for a miner
30. #chainskills Track transactions 30 etherscan.io
31. Read the node = Free 31 0x456… getBalance() getGreetings() getArticlesToSale()
32. Interactions 32
33. 33 EOA EOA EOA: External Owned Account
34. 34 0x5E9 CA CA: Contract Account CA CA
35. 35 35
36. 36 36
37. 37 37
38. Immutability 38
39. 39 39 Main network
40. 40 40 Main network
41. 41 41 Main network
42. 42 42 Main network
43. 43 43 Main network
44. 44 0x86C 0x5E9
45. Ethereum networkS 45
46. 46 Test networks Ropsten (public) Rinkeby (public) Any local test node Fake ETH
47. Labs 47
48. #chainskills 48 Truffle console web3js Greetings Unit Tests
49. #chainskills 49
50. #chainskills 50
51. #chainskills Links 51 https://github.com/chainskills/devoxxma-2019-hands-on
52. Lab 0: Setup your environment 52
53. 53 https://www.google.com/chrome/ LAB 0
54. 54 https://nodejs.org/en LAB 0
55. 55 https://nodejs.org/en/download/releases/ Issues ??? Get version 10 LAB 0
56. Additional setup - Windows 56 On Windows, you will need to install these packages: > npm install --global --production windows-build-tools > npm install --global node-gyp LAB 0
57. Addtional setup - Mac 57 On Mac, you will need to install Xcode command line tools: $ xcode-select —install LAB 0
58. 58 https://www.trufflesuite.com/truffle LAB 0
59. 59 https://www.trufflesuite.com/ganache Personal Ethereum Blockchain LAB 0
60. 60 https://code.visualstudio.com/ LAB 0
61. 61 LAB 0
62. Lab 1: Greetings with Truffle 62 Create the project
63. Solidity 63 https://solidity.readthedocs.io/en/latest/ “Solidity is an object-oriented, high-level language for implementing smart contracts. Smart contracts are programs which govern the behaviour of accounts within the Ethereum state.” LAB 1
64. web3.js 64 “web3.js is a collection of libraries which allow you to interact with a local or remote ethereum node, using a HTTP or IPC connection.” https://web3js.readthedocs.io/en/v1.2.2/ LAB 1
65. #chainskills Objectives 65 1.Create the project 2.Write the smart contract 3.Prepare the deploy 4.Build and Deploy the contract to Ganache 5.Interact with the contract with web3.js 6.Inspect through Truffle console and Ganache Truffle console web3js Greetings LAB 1
66. Solution 66 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step1 LAB 1
67. Lab 2: Greetings with Truffle 67 Unit Testing
68. Start from 68 LAB 2 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step1
69. #chainskills Objectives 69 1.Write Unit test cases in JS (Mocha and Chai) 2.Run the tests through Truffle console Truffle console web3js Greetings Unit Tests 69 LAB 2
70. Solution 70 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step2 LAB 2
71. Lab 3: Greetings with Truffle 71 Listen to Events
72. Start from 72 LAB 3 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step2
73. #chainskills Objectives 73 1.Write event 2.Catch event on the console 3.Listen event on Ganache 4.Improve unit tests Truffle console web3js Greetings Unit Tests LAB 3
74. Solution 74 LAB 3 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step3
75. Lab 4: Greetings with Truffle 75 Catch exceptions
76. Start from 76 LAB 4 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step3
77. #chainskills Objectives 77 1.Write exception handlers 2.Catch exceptions on the console 3.Inspect impacts on Ganache 4.Improve unit tests Truffle console web3js Greetings Unit Tests LAB 4
78. Solution 78 LAB 4 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step4
79. Lab 5: Greetings with Truffle 79 Make Money
80. Start from 80 LAB 5 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step4
81. #chainskills Objectives 81 1.Write payable functions 2.Transfer earnings 3.Check impacts on Ganache 4.Improve unit tests LAB 5 Truffle console web3js Greetings Unit Tests
82. Solution 82 LAB 5 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step5
83. Lab 6: Greetings with Truffle 83 Kill the contract
84. Start from 84 LAB 6 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step5
85. #chainskills Objectives 85 1.Write kill function 2.Kill the contract from the console 3.Interact with the contract 4.Check impacts wallet Truffle console web3js Greetings Unit Tests LAB 6
86. Solution 86 LAB 6 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step6
87. Lab 7: Greetings with Truffle 87 Improve smart contract
88. Start from 88 LAB 7 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step6
89. #chainskills Objectives 89 1.Write function modifiers and base contract 2.Check impacts on Ganache Truffle console web3js Greetings Unit Tests LAB 7
90. Solution 90 LAB 7 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step7
91. Lab 8: dApp with Drizzle 91
92. Start from 92 LAB 8 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step7
93. #chainskills Objectives 93 1.Create react project 2.Install Drizzle and other dependencies 3.Configure Drizzle 4.Configure Metamask 5.Interact with the contract HTML, CSS, JS, web3js Greetings Dapp/Frontend Dapp/Backend LAB 8
94. Metamask 94 https://metamask.io/ LAB 8
95. Drizzle 95 https://www.trufflesuite.com/drizzle LAB 8
96. Authorize the Dapp 96 LAB 8
97. Solution 97 LAB 8 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step8
98. Lab 9: Complete the dApp 98
99. Start from 99 LAB 9 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step8
100. #chainskills Objectives 100 1.Get initial data 2.Change greetings message 3.Change service fee 4.Listen events 5.Transfer earnings 6.Enable/Disable contract HTML, CSS, JS, web3js Greetings Dapp/Frontend Dapp/Backend LAB 9
101. Solution 101 LAB 9 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step9
102. Lab 10: Deploy our dApp 102
103. Start from 103 LAB 10 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step9
104. #chainskills Objectives 104 1.Create an account in infura.io 2.Configure Truffle to deploy on Ropsten 3.Create accounts on Ropsten and get some fake ETH 4.Deploy backend to Infura 5.Configure frontend for Github Pages 6.Configure Github repository 7.Deploy frontend to Github Pages LAB 10
105. Dapp on Ropsten 105 The Dapp is available here: https://chainskills.github.io/devoxxma-2019-hands-on/
106. Solution 106 LAB 10 https://github.com/chainskills/devoxxma-2019-hands-on/tree/master/step10
107. More advanced Dapp 107 ChainBizz
108. ChainBizz 108 • An issuer creates and submits a project • A fulfiller offers his services • The issuer accepts the service and deposit the amount • The fulfiller delivers the project • The issuer accepts the delivery. The fulfiller receives the amount
110. Project 110 • Available here: https://github.com/chainskills/chainbizz • Still in progress
111. Summary 111
112. Labs on Github 112 https://github.com/chainskills/devoxxma-2019-hands-on
113. ChainBizz on Github 113 https://github.com/chainskills/devoxxma-2019-hands-on
114. ChainSkills - Udemy 114 • Online training on Udemy • 14000+ students • 145 countries • rating: 4,2 on 5 • training.chainskills.com • Target • Managers • Developers PROMO CODE: DEVOXXMA2019
115. ChainSkills - eBook 115 • Lean-published eBook • Create a dApp from A to Z • https://leanpub.com/blockchain-developer • Target • Managers • Developers PROMO CODE: DEVOXXMA2019
116. Podcast: ProofOfCast (FR) 116
117. Thank you 117 @chainskills, @sarbogast, @eloudsa https://www.chainskills.com