六角學院

2. Kenneth Hu
• I am a software developer , not trader.
• I am enthusiast, not expert.
• Ethereum, Bitcoin
• Email: Kenneth.hu@Hotmail.com
• Blockchain&Dapps meetup
• DeFi - Decentralized Finance, SG

3. Agenda
• 1. 相關名詞&架構介紹
• 2. 開發軟體工具與環境
• 3. 建立虛擬貨幣
• 4. 建立使用者介面
• 5. 發送虛擬貨幣
• 6. 確認收到虛擬貨幣
• 7. 介紹主流貨幣 – ERC20 & ERC721

4. 名詞解釋
• Blockhchain :是一個「去中心化的分散式資料庫」，透過集體維護讓區塊
鏈裡面的資料更可靠，或是可以把它理解成是一個全民皆可參與的電子記
帳本，一筆一筆的交易資料都可以被記錄。
• Ethereum : 以太坊是一個基於區塊鏈的分佈式公共開源軟體平台，允許
開發人員構建和實現去中心化的應用程式。
• Web 3.0 : 將比過去任何的互聯網平台都更加以用戶為中心，最終將用戶置
於用戶體驗的中心
• Web3.js : 是以太坊提供的一個JavaScript庫，它封裝了以太坊的RPC通信API，
提供了一系列與區塊鏈交互方法，使JavaScript與以太坊交互變簡單

5. 名詞解釋
• Decentralized Application (Dapps) : 分散式網頁應用程式
• Address (地址) : 一個乙太坊代表一個帳戶 ,其地址是控制這個賬戶的公
鑰的後20位(bytes)，(如 :cd2a3d9f938e13cd947ec05abc7fe734df8dd826)
• Wallet (錢包) : 在最普通的意義上來講，指一切可以存儲以太幣或其他
任何加密通證的東西。
• Contract(合約): 在以太坊區塊鏈上包含數據和可執行函數的持久性代
碼。

6. Node
Time
David  Sandra 5 BTC
Brian  List 3.02 BTC
Mary  Sandra 10 BTC
Lisa  Sandra 10 BTC
Sandra  David 10 BTC
BLOCK #186
Block ID
0x0235de9a6
Previous Block
0x6e257071cec
Transactions
BLOCK #186
Block ID
0x6e257071cec
Previous Block
0x1dcc4de8dec
Transactions
BLOCK #186
Block ID
0x6e257071cec
Previous Block
0x1dcc4de8dec
Transactions
BLOCK #186
Block ID
0x6e257071cec
Previous Block
0x1dcc4de8dec
Transactions
BLOCK #186
Block ID
0x6e257071cec
Previous Block
0x1dcc4de8dec
Transactions
Blockchain network
Blockchain
Lisa  Sandra 10 BTC
Brian  List 5 BTC
Mary  Sandra 10 BTC
…… ……… .. BTC

7. 架構
Browser
Internet via HTTP(s)
Json RPC InterfaceWeb3.js

8. MetaCoin Dapp
• 1. 建立虛擬貨幣
• 2. 測試虛擬貨幣功能
• 3. 建立前端使用者介面
• 4. 發送虛擬貨幣
• 5. 確認收款
• 6. 虛擬貨幣單位轉換
• 7. 取得帳戶額度
• 8. 切換網路與切換帳號

9. MetaCoin Dapp

10. MetaCoin
• IDE – Visual Studio Code
• Dapp browsers– MetaMask
• Smart Contract Language - Solidity
• Simulator - ganache
• Library – Web3.js
• Ethereum development framework – Truffle
• Module bundler – Webpack

11. MetaCoin
• 建立專案
• 下載專案相關package– truffle unbox webpack
• 測試智能合約
• 編譯智能合約
• 佈署智能合約
• 與智能合約互動

12. installation
1. Install Truffle globally.
2. Download the box. This also takes care of installing the necessary
dependencies.
3. Run the development console or Ganache.

13. Truffle- 資料夾結構
•contracts/: 放置智能合約
•migrations/: 佈署合約腳本
•test/: 放置測試智能合約檔案
•Truffle-config.js: Truffle configuration file

14. MetaCoin

15. installation
4. Compile and migrate the smart contracts. Note inside the
development console we don't preface commands with truffle.
5. Run the webpack server for front-end hot reloading (outside the
development console). Smart contract changes must be manually
recompiled and migrated.

16. 佈署智能合約
Ethereum Blockchain
Ethereu
Node
Interact by transaction
Deploy smart contract
Solidity compiler: solc
Contracts bytecode
and ABI
Development
Source code: *.sol

17. installation
6. Run the webpack server for front-end hot reloading (outside the
development console). Smart contract changes must be manually
recompiled and migrated.

18. Initial application
Load Document
Start()
refreshBalance()
End

19. Initial application
refreshBalance() Ethereum
Blockchain
Call getBalance
Return value

20. sendCoin
sendCoin() Ethereum
Blockchain
Send sendCoin
Return TXID

21. Web3.js
• 佈署合約
• 交易物件 (Transaction Object)
• Reflection (反映)方法
• Application Binary Interface (ABI)
• 呼叫合約方法(Contract Functions)
• Call
• Transaction
• 聽取事件
• 過濾事件
• 全域事件

22. 通訊協定
• RPC : 較彈性，目前只有HTTP，較不安全
• Web3.js
• IPC : 較快且安全
• Geth attach
• WS : WebSocket，可以高併發處理客戶端需求
• 適合實作網頁即時服務使用

23. New Function

24. Check MetaCoin

25. Check MetaCoin

26. Check MetaCoin in Ether

27. Check MetaCoin in Ether

28. Account

29. Account

30. Account-index.js
• 取得帳戶以太幣額度
• 取得帳戶METACOIN額度

31. Detecting account Change and
network change

32. detecting account & network

33. Ethereum network
Network Network ID Type
mainnet 1 Production
Ropsten 3 Test
Rinkeby 4 Test
Goerli 5 Test
Kovan 42 Test

34. Rinkeby network

35. Deployed smart contract
• Remix
• Address : 0x69eB6dC541417302e74Ef860fF36409722b5e28c
• Etherscan :
https://rinkeby.etherscan.io/address/0xaec78a8ac33da71d453ab639
6e1acbf538213955

36. load smart contract

37. 主流貨幣 – ERC20 & ERC721

38. ERC20 (同質性代幣標準)
• ERC – Ethereum Request for Comment
• ERC20是以太坊大多數人使用的標準規範。該規範可以提高基
於ERC20的令牌的互換性，並在Dapp上執行相同的操作。
• ERC20包含6個功能，2個事件和3個代幣信息。
• https://theethereum.wiki/w/index.php/ERC20_Token_Standard

39. ERC20 - 功能
• totalSupply(): 總供應量.
• balanceOf(address _owner): 查詢 _owner 代幣量.
• Transfer(address _to, uint256 _value):將代幣傳給_to地址,同時會觸發 Transfer 事
件.
• transferFrom(address _from, address _to, uint256 _value): 將_from 轉代幣( _value)
給_to,同時會觸發 Transfer 事件.
• Approve (address _spender, uint256 _value): 允許 _spender(第三方)提取一定數量
的代幣 .
• Allowance(address _owner, address _spender): 查詢_spender目前可提取_owner的
代幣量。.

40. ERC20 - 事件
• Transfer(address indexed _from, address indexed _to, uint256 _value):
當代幣被轉移時觸發
• Approval(address indexed _owner, addressindexed _spender, uint256
_value)
當approve成功被執行時觸發 。.

41. ERC20 - 資訊
• Name: 發行代幣的名稱.
• Symbol:代幣的簡稱. 例如Bitcoin 就是BTC. 可以在
https://etherscan.io/ 查詢
• Decimals: 設定此代幣在小數位數之後可以到達多少位數。通常，設
定值為18，這意味著它可以達到小數點後的18位數字。

42. ERC721 (非同質性代幣標準)
• ERC721同樣是一個代幣標準，ERC721官方簡要解釋是Non-
Fungible Tokens，簡寫為NFTs，多翻譯為非同質代幣。
https://github.com/ethereum/EIPs/blob/master/EIPS/eip-721.md
• https://dex.lootex.io/marketplace

43. ERC721 - 功能
• totalSupply(): 總供應量.
• balanceOf(address _owner): 查詢 _owner 代幣量.
• ownerOf(uint256 _tokenId) : 查詢代幣擁有者
• Transfer(address _to, uint256 _value):將代幣傳給_to地址,同時會觸發 Transfer 事件.
• safetransferFrom(address _from, address _to, uint256 _tokenId, bytes data): 將_from 轉代
幣( _tokenId) 給_to,同時會觸發 Transfer 事件.
• safetransferFrom(address _from, address _to, uint256 _tokenId): 將_from 轉代幣( _tokenId)
給_to,同時會觸發 Transfer 事件.
• transferFrom(address _from, address _to, uint256 _tokenId): 將_from 轉代幣( _tokenId) 給
_to,同時會觸發 Transfer 事件.

44. ERC721 - 功能
• Approve (address _approved, uint256 _tokenId): 允許
_approved(第三方)提取指定代幣 .
• setApprovalForAll(address _operator, bool _approved)
• getApproved(uint256 _tokenId)
• isApprovedForAll(address _owner, address _operator)

45. ERC721 - 事件
• Transfer(address indexed _from, address indexed _to, uint256 indexed
_tokenId):
當代幣被轉移時觸發
• Approval(address indexed _owner, address indexed _approved, uint256
indexed _tokenId)
當approve成功被執行時觸發 。.
• ApprovalForAll(address indexed _owner, address indexed _operator, bool
_approved)
當approveForAll成功被執行時觸發 。.

46. Links
• Remix
• https://remix.ethereum.org
• Ethereum Wallet
• https://wallet.ethereum.org
• Metamask
• https://metamask.io/
• Ganache
• http://truffleframework.com/ganache/
• Ganache-cli
• https://github.com/trufflesuite/ganache-cli

47. Links
• Node
• https://nodejs.org/en/
• Ganache
• http://truffleframework.com/ganache/
• Ganache-cli
• https://github.com/trufflesuite/ganache-cli
• Visual studio
• https://code.visualstudio.com/

48. 相關文章
• 以太坊區塊鏈架構 <7> 文組也該知道的區塊鏈技術知識
• https://medium.com/pelith/structure-of-ethereum-blockchain-
35fd4849f609
• Web3 .js Ethereum Javascript API
• shorturl.at/ijA25
• 成為核心區塊鏈開發人員(Blockchain developer)還是分散式軟體應
用程式開發人員 (Dapps developer) 呢？
• shorturl.at/bxDY5

49. 關於我的
• Medium –
• https://medium.com/my-blockchain-development-daily-journey
• shorturl.at/KLOPT
• Youtube –
• https://www.youtube.com/channel/UCTGUDyK64SljI8oq17oEnVg/
videos?view_as=subscriber
• shorturl.at/joy56

50. Q & A