Ethereum Smart Contracts with Next.js [Part 3] (Deploy smart contracts to Rinkeby network)
จากบทความที่แล้ว (Part2) เราสามารถเชื่อมต่อ Smart Contracts ของเรากับ Next.js ได้แล้ว
บทความนี้เราจะมาพูดถึงการ deploy Smart Contracts ของเราขึ้นไปบน rinkeby network กัน
ก่อนอื่นเราต้องไปสมัครสมาชิกเพื่อขอ api key จาก Infura ก่อน โดยเข้าไปที่ https://infura.io/signup ถ้าสมัครเรียบร้อยแล้วเราจะได้ api key มาแบบนี้
dMhh1kphvmfyEd8NTvfG
ซึ่งเราจะใช้ test network ของ Rinkeby กัน
หลังจากนั้นให้ทำการติดตั้ง metamask ลงบน chrome ของเรา (หรือ firefox ก้ได้นะ) โดยไปที่ https://metamask.io/
เมื่อติดตั้งเสร็จลองกดไปที่รูปสุนัขจิ้งจอก จะเจอหน้าจอแบบนี้
กด Try Beta Vertion เพื่อ UI ที่สวยงาม ฮ่าๆ แล้ว มันจะให้เรากรอก password กด next ต่อไปเรื่อยๆ จะเจอหน้าให้เราจำ Mnemonic Phrases แล้วทำการ confirm Mnemonic Phrases ของเราอีกครั้ง
(Mnemonic Phrases สำคัญมาก คือ ถ้ามี ETH จริงๆ อยู่บนนั้น ห้ามหาย ห้ามให้ใครรู้เด็ดขาด)
เมื่อเสร็จขั้นตอนแล้วก็จะได้หน้าตาแบบนี้ ซึ่งหมายถึง เรามี wallet account ของ Ethereum เรียบร้อยแล้ว เย้ !!
แต่เดี๋ยวก่อน เรายังไม่มีสัก ETH เลยทำไงยังไงดี ?
ให้เราไปที่ metamask แล้วกดปุ่มเมนูแฮมเบอเกอร์ แล้วกด copy account address ของเราเอาไว้
หลังจากนั้นให้เอา address account ไปโพสที่ facebook, twitter, google plus ของเรา ช่องทางไหนก็ได้สักหนึ่งช่องทาง ในที่นี้ขอยกตัวอย่าง twitter แล้วกัน
แล้วกด copy link to tweet
จากนั้นให้ไปที่ https://faucet.rinkeby.io/เพื่อทำการขอ ETH บน rinkeby test network
กดเลือก 18.75 Ethers ไปเลย จะเห็นว่ามันกำลังทำการ process transaction ของเรา
จากนั้นให้เข้าไปที่ metamask อีกครั้ง แล้วลองย้ายไปที่ Rinkeby Network จะเห็นว่า ETH เข้ามาแล้ว (รวยเละ !!!)
หลังจากขอ api key จาก infura และ ติดตั้ง metamask เรียบร้อยแล้ว เราก็สามารถที่จะ deploy Smart Contracts ของเราได้แล้ว
ติดตั้ง truffle-hdwallet-provider ผ่าน command ซึ่งจะเป็นตัวช่วยให้เรา deploy ได้ง่ายขึ้น
npm install truffle-hdwallet-provider --saveไปที่ไฟล์ truffle.js ใน folder ethereum-todolist แก้ไขไฟล์ดังนี้
ซึ่งตัว HDWalletProvider จะรับค่า 2 ค่า คือ mnemonic (จาก metamask) และ provider_uri (จาก infura)
หลังจากแก้ไขไฟล์ truffle.js แล้ว ให้ทำการ ctrl+c ตรงช่อง truffle(develop)> เพื่อออกจาก truffle console ก่อน แล้วรัน truffle develop ใหม่อีกครั้ง
จากนั้นใช้คำสั่ง migrate --reset --network rinkeby ในช่อง truffle(develop)> จะเห็นว่า Smart Contracts ของเราได้ถูก deploy ขึ้นไปแล้ว
สามารถเช็คได้จาก https://rinkeby.etherscan.io/address/0x579109a34e39466c46d288b4d8e5189969b04f02 (ข้างหลัง /address/xxx จะเป็น address ของแต่ละคน จะมีค่าไม่เหมือนกัน) จะเห็นว่ามี Smart Contracts นี้อยู่ในระบบของ rinkeby network แล้ว
ไปที่ไฟล์ web3.js แก้ไข provider ให้ชี้ไปที่ infura แทน localhost ของเรา และ เพิ่ม logic สำหรับ check ว่ากำลังรันอยู่ฝั่ง client หรือ server
แก้ไขไฟล์ todolist.js ใน folder ethereum-todolist เพื่ออัพเดท Smart Contracts address ของเราที่เพิ่ง deploy ใหม่
สร้างไฟล์ web3Socket.js ใน folder ethereum-todolist เพื่อใช้ในการ subscribe event โดยจะชี้ไปที่ websocket ของ infura rinkeby
สร้างไฟล์ todolistSocket.js ใน folder ethereum-todolist เพื่อใช้เป็นตัว instance ของ todolist ในการใช้ websocket
อัพเดท index.js ให้รองรับการ subsctibe event โดย import web3Socket และ เพิ่มตัว subscription
และอย่าลืม unsubscribe เมื่อไม่ได้ใช้งานแล้ว
ลองทดสอบพิมพ์ test1 แล้วกดปุ่ม add
จะเห็นว่าเรามีการเชื่อมต่อกับ metamask ได้แล้ว หลังจากนั้นกด confirm แล้วเข้าไปที่ https://rinkeby.etherscan.io/address/0x579109a34e39466c46d288b4d8e5189969b04f02 จะเห็นว่า มี transaction ที่ pending อยู่
ให้รอจน pending หายไป ซึ่งจะหมายถึงว่า transaction นี้ถูกตรวจสอบแล้ว Ethereum ก็จะส่ง event มาบอกให้อัพเดท task บนหน้า UI
ในส่วนของการจัดการกับ event ของ การ toggle ก็จะเหมือนๆกัน แต่ logic ในการจัดการ state จะแตกต่างออกไปนิดนึง ใครว่างๆ ลองไปนั่งทำกันดูนะครับ :)
ผมลัพธ์สุดท้ายก็จะเป็นแบบรูปข้างบน เปรียบเสมือน Next.js เป็น front-end และมี Ethereum Smart Contracts เป็น back-end ในการจัดเก็บข้อมูลต่างๆ
สำหรับใครอยากจะสร้างเหรียญของตัวเองขึ้นมา สามารถดูตัวอย่างได้จาก http://truffleframework.com/boxes/metacoin
หรือใครที่อยากจะลองทำ App Voting สามารถดูตัวอย่าง code Solidity ได้ที่นี่ https://solidity.readthedocs.io/en/v0.4.23/solidity-by-example.html#voting แล้วนำมาเชื่อมต่อกับ front-end แนวๆ เดียวกับ todolist ก็ได้เหมือนกัน
อีกหนึ่งตัวอย่าง real world app ที่ใช้งานกันอยู่จริง ก็คือ CryptoKitties https://www.cryptokitties.co/ ซึ่งทำเป็นเกมโดยใช้ DApp ซึ่งอยู่บนระบบของ Ethereum และทำเงินได้อย่างมหาศาล
สำหรับใครที่อยากจะศึกษา Solidity อย่างจริงจัง ซื้อคอร์สได้ที่ udemy เลย Ethereum and Solidity: The Complete Developer’s Guide สอนตั้งแต่เริ่มต้น จนจบอ่านได้ เขียนเป็น เข้าใจความหมายของต่างๆ ในโลกของ blockchain อย่างแท้จริง
source code ทั้งหมดของบทความ อยู่ใน github ตาม link ข้างล่างนี้
สำหรับใครที่อยากลองเล่น todolist เข้าไปที่ link ข้างล่างได้
http://todolist-ethereum.surge.sh/
(ต้องมี metamask และ มี ETH ใน rinkeby network ก่อนนะ ถึงจะเขียน transaction ลงไปได้)
จบแล้วววว สำหรับบทความยาว 4 Part ( 0, 1, 2, 3) ขอบคุณผู้อ่านทุกท่านที่อดทนอ่านกันมาจนถึง Part นี้ ผมหวังว่า บทความนี้จะเป็นประโยชน์ หรือ เป็นจุดเริ่มต้นให้ หลายๆคนหันมาทำอะไรสักอย่างเกี่ยวกับ blockchain ซึ่งผมมองว่า มันเป็นเทคโนโลยี ที่น่าสนใจจริงๆนะ อยากให้ Dev ทุกคนมีความรู้ ความเข้าใจเกี่ยวกับ Tech ด้านนี้ เพื่อที่จะได้มี product เจ๋งๆ หลุดออกมาให้ใช้กัน
