ลองใช้ Smart Contract ด้วย Web3-react และ Ethers.js ฉบับดำน้ำลึก
Introduce
มาเริ่มที่เรื่องธรรมดาสามัญกันก่อน web3-react เป็น Framework ตัวนึงที่สามารถเชื่อมต่อ Decentralized Application (dApp)กับ Ethereum Node ได้ โดยตัว Library ได้ให้คำจำกัดความของตัวเองไว้ว่า
A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps
ตัวมันเองเป็น Framework ที่มีความสามารถครบครันสำหรับการสร้าง dApp สำหรับ Ethereum Node นั่นเอง โดยชื่อก็บอกอยู่แล้วว่าสร้างมาเพื่อ React ( ไม่แน่ใจว่าจะปรับใช้กับพวก Angular หรือ Vue ได้ไหมตัวผู้เขียนเองก็ยังไม่ได้ลองเหมือนกัน ) โดยตัว web3-react จะใช้ Context ในการเก็บ State ต่าง ๆ และเรียกใช้ในรูปแบบของ Hooks นั่นเอง ซึ่ง
ต่อมาคือ Ethers.js ซึ่งเป็น Library ที่ใช้สำหรับติดต่อกับ Ethereum Network โดยมีคำโปรยไว้ในเว็บดังนี้
The ethers.js library aims to be a complete and compact library for interacting with the Ethereum Blockchain and its ecosystem. It was originally designed for use with ethers.io and has since expanded into a more general-purpose library.
เล่าที่มาที่ไปของมันคร่าว ๆ แล้ว แต่ยังไม่รู้มันใช้ยังไงใช่ไหม เดี๋ยวผมจะสาธิตย์ขั้นตอนง่าย ๆ สำหรับการเชื่อมต่อกับ Smart Contract เองเลื่อนตามลงมาเลย👇
Wallet
ก่อนที่เราจะทำการเชื่อมต่อกับ Blockchain นั้นอย่างแรกเลยคือเราต้องมีบัญชีก่อนเพื่อที่จะเอาไว้เก็บค่าเงินต่าง ๆ ที่ใช้สำหรับการทำธุรกรรมบนโลกของ Blockchain ซึ่งสำหรับ Ethereum Network แล้วค่าเงินที่ใช้สำหรับทำธุรกรรมคือ ETH นั่นเองซึ่งผมจะพามาแนะนำคำสั่งที่เกี่ยวกับ Wallet ของ ethers.js กัน
new Wallet()
เป็นการสร้างอินสแตนซ์ของ Wallet โดยใช้ Private Key ของผู้ใช้งานเพื่อทำการเข้าถึงและสามารถจัดการกับ Wallet ได้
new Wallet( “0x6467409d92e39d14e36f64e0f37xxxxxxxxxxxxxxxxxxxxxx” );createRandom
เป็นการสร้างบัญชีขึ้นมาแบบสุ่มโดยเราจะได้ Private Key มาเพื่อใช้ในการเชื่อมต่อกับกระเป๋าเงินตามคำสั่งในข้อที่ 1
Wallet.createRandom().privateKeyfromEncryptedJson
เป็นการสร้างอินสแตนซ์ของ wallet ขึ้นมาจาก JSON ที่ผ่านการเข้ารหัสไว้แล้ว
Wallet.fromEncryptedJson(json,password).then(res).catch(err)fromEncryptedJsonSync
วิธีการทำงานเหมือนกันกับ fromEncryptedJson เพียงแต่สามารถเรียกใช้ได้เลยไม่ต้องผ่าน async await หรือ Promise
Wallet.fromEncryptedJsonSync(json,password)fromMnemonic
เป็นการสร้างอินสแตนซ์ของ Wallet ขึ้นมาจากกลุ่มคำซึ่งประกอบไปด้วยคำภาษาอังกฤษ ซึ่งจำนวนที่ใช้กันโดยทั่วไปคือ 15 คำ ซึ่งยิ่งจำนวนคำมีเยอะขึ้นก็จะทำให้บัญชีของเราปลอดภัยได้มากขึ้นนั่นเอง
Wallet.fromMnemonic("longing rusted furnace daybreak seventeen benign nine homecoming one freight car soldier winter tony cap").addressซึ่งแต่ละตัวเองก็จะมีเมธอดยิบย่อยแยกไปอีกซึ่งสามารถเข้าไปอ่านได้ที่ลิ้งนี้เลย https://docs.ethers.io/v5/api/signer/#Wallet
สำหรับ Network Rinkeby สามารถเข้าไปเอาเหรียญ ETH สำหรับการทดสอบได้ที่ลิ้งนี้.👉 https://faucet.rinkeby.io/
Big Number
เนื่องจากการดำเนินการส่วนมากของ Ethereum นั้นจะมีจำนวนเลขที่เยอะมากเพราะค่าเงินที่เล็กที่สุดใน Ethereum Network คือ WEI นั้นเมื่อเทียบเป็น 1 ETH แล้วมีค่าถึง 1,000,000,000,000,000,000 WEI ซึ่งเป็นตัวเลขที่เยอะมากสำหรับการคำนวณต่าง ๆ ซึ่งตัว Big Number นั้นจะเป็นฟังก์ชันที่มาช่วยแปลงค่าตัวเลขเยอะให้อยู่ในรูปแบบ String ทำให้ไม่เกิด Overflow เพื่อทำให้การนำมาใช้เป็นไปได้อย่างราบรื่น
Web3
เรามาเริ่มกันที่ตัวอย่างง่าย ๆ อย่างการเข้าถึงข้อมูลต่าง ๆ wallet ของเราแล้วกัน โดยในที่นี้จะใช้ เจ้าจิ้งจอก หรือ Metamask Wallet นั่นเองอย่าลืมลง Extension ละ
ก่อนอื่นสร้างโปรเจ็ค React
npx create-react-app basic-web3และติดตั้ง web3-react ด้วยคำสั่งตามนี้
npm i @web3-react/core @web3-react/injected-connector @ethersproject/providers --saveโดย @web3-react. จะรวม method ที่จำเป็นสำหรับการใช้งาน web3-react @web3-react/injected-connector. จะใช้สำหรับการเซ็ทค่าที่จำเป็นต่าง ๆ สำหรับการเชื่อมต่อกับ Ethereum Node ส่วน @ethersproject/providers. เป็น Web3 Provider ซึ่งสามารถใช้ web3.js แทนได้เหมือนกัน
หลังจากสร้างโปรเจ็คและติดตั้งแพคเก็จทั้งหมดแล้วก็มาเริ่มโค้ดกันเลย โดยเริ่มจากเลือก web3 provider ที่เราจะใช้กันก่อน ซึ่งเราเลือกใช้จาก @ethersproject/providers. นั่นเอง
แล้วก็เอาไปใช้กับ Web3ReactProvider แบบนี้
พอทำตามด้านบนเสร็จแล้วเราก็มันเลือก Network ที่จะใช้ลองของกัน โดยในทีนี้จะใช้ Rinkeby ซึ่งเป็น Network สำหรับทดสอบนั่นเอง
เสร็จแล้วก็มาลองสร้างปุ่มสำหรับคอนเน็คกับ Metamask กัน
จากนั้นลองกดปุ่มดูเราก็จะเห็น Metamask extension เด้งขึ้นมาแบบนี้!!!
แล้วพอเรากดถัดไปเรื่อย ๆ ก็ถือเป็นอันคอนเน็คกับกระเป๋าเสร็จสิ้นโดยเราสามารถดูได้ว่าเราเชื่อมต่อกระเป๋าเงินเรากับเว็บนั้นหรือยังได้ตรงด้านหน้าของชื่อบัญชีเราตามรูป
สุดท้ายเราก็มาลองแสดงค่าที่ได้จากกระเป๋าเงินดู ตอนนี้ก็เอาง่าย ๆ ไปก่อนอย่าง Address และ ChainId
เสร็จแล้วลองเอาไปใช้ดูเราก็จะได้ข้อมูล Address และ ChainId ของเรามาแบบนี้
Contract Integration
เริ่มที่ความหมายของมันก่อน Contract Integration คือการเชื่อมต่อเว็บไซต์หรือแอพพลิเคชันของเราเข้ากับ Smart Contract ที่อยู่บนเน็ตเวิร์คต่าง ๆ ซึ่งในที่นี้คือ Ethereum Network เพื่อให้สามารถใช้งาน Smart Contract นั้น ๆ ได้ โดยสิ่งที่ต้องเตรียมคือ Application Binary Interface (ABI) และ Address ของ Contract ที่เราจะใช้นั่นเอง ( ส่วนใครที่ไม่รู้ว่า ABI คืออะไรให้จิ้มตรงนี้ 👉 ABI ) โดยจะมีวิธีการคร่าว ๆ ดังนี้
ขั้นแรกเลยคือการสร้างฟังก์ชันที่ใช้สำหรับเชื่อมต่อกับ Contract ก่อน โดยผมได้สร้างฟังก์ชันขึ้นมาในรูปแบบ Hooks ตามโค้ดด้านล่าง
?จากนั้นมาสร้างฟังก์ชันสำหรับเข้าถึง Methods ต่าง ๆ ของ Contract นั้น ๆ ซึ่งชื่อ Methods จะแตกต่างกันไปในแต่ละ Contract นะครับ ระวังเรียกอย่าเรียกใช้เหมือนผมแล้วไม่มาก็อย่าว่ากันเด้อ เพราะมันขึ้นอยู่กับว่าตรงเจ้า Smart Contract ของเราจะมี Method อะไรให้เรียกใช้งานมั้ง เช่น ในตัวอย่างนี้ผมนำเอา Smart Contract ที่ทำเกี่ยวกับ TODO Application มาเป็น Example ก็จะมีตาม Methods ตามที่เจ้าของ Contract สร้างไว้อย่างที่เห็นนั่นเอง
จากนั้นเราก็สามารถเรียกใช้ฟังก์ชันต่าง ๆ ของ Contract ได้จาก Context ที่เราสร้างไว้นั่นเองซึ่งจากตัวอย่างก็จะมีฟังก์ชันสำหรับสร้างและลบ TODO List นั่นเอง
Conclusion
เป็นยังไงกันบ้างครับหลังจากได้รู้จักมักจี่จับมือนั่งคุยกับเจ้า web3-react แล้วคิดว่าคงไม่ยากเกินรความเข้าใจของชาวเรามากนักนะครับ สำหรับพาร์ทนี้เองก็ขอจบลงไปแบบงง ๆ เพียงเท่านี้ และสำหรับพาร์ทต่อไปเดี๋ยวจะแอบไปเอา TODO ที่ทีมงานของบริษัท 20scoops CNXในบริษัทเขียนเอาไว้มาเปิดเผยให้ดูกันจะ ๆ ว่าเขาเขียนกันยังไง สำหรับวันนี้ขอตัวลาไปก่อนเจอกันเมื่อเราเจอกัน สวัสดีครับ 👋
