เขียนโค๊ด Javascript (web3.js) ทำ ETH transaction ด้วย Metamark (chrome extension) บน RPC local network
บทความนี้จะมาแบ่งปันการทำ transaction บน browser ด้วย web3 library สำหรับผู้เริ่มต้นที่อยากจะเขียน smart contract แบบเข้าใจง่าย ๆ (ผมก็มือใหม่) เลยอยากจะแชร์ในวิธีที่ผมลองผิดลองถูก จะมาสรุปให้ในบทความนี้
แนะนำเครื่องมือ เตรียมตัวก่อนเริ่มเขียน smart contract ทำ transaction บน browser (web3js)
- web3.js Ethereum JavaScript API library ของ javascript ที่ใช้สำหรับเขียน smart contract มี API document ที่ละเอียดใช้งานไม่ได้ยากมาก
- Metamark wallet browser extension(chrome , firefox) wallet extension ส่วนเสริมของ browser ที่ทำหน้าที่เป็น wallet เก็บ coin/token ของเรา
- Ganache ใช้สำหรับสร้าง Ethereum Node บน local environment เหมาะสำหรับใช้ env DEV เพราะสะดวกแล้วค่อนข้างใช้งานง่ายไม่ได้อยาก
- Bulma css framework เพื่อความสวยงามของหน้าจอ
- Vue2 javascript framework
- Live Server vscode extension สำหรับ run server (static file .html)
เริ่มขั้นตอนเขียน smart contract ด้วย web3.js
- download Ganache และทำการติดตั้งให้เรียบร้อย (ขั้นตอนนี้ขอข้าม)
- เปิดหน้าโปรแกรม Ganache ที่ได้หลังจากติดตั้งแล้ว กด “NEW WORKSPACE”
Workspace Name : Poolsawat.com
Server Port Number : 6545
2.1 Genache จะจำลอง Ethereum Node พร้อมกับ Generate 10 Accounts (มี 100 ETH , public address , private address)
3. เปิด Metamark wallet extension (install ,register ,login ให้เรียบร้อย ข้ามขั้นตอนนี้)
3.1 เพิ่ม Local network ให้ Metamark เลือก Setting -> Networks -> Add Network -> Create RPC network -> active Network
3.2 เพิ่ม ETH Account ไปที่ Metamark Setting ->Create Account -> Import Private Address-> Copy Private Key from Genache-> Paste Private key at Metamark -> Finished
จบการเตรียมพร้อมที่จะทำ ETH transaction แล้ว
เขียนโค๊ด Javascript (web3.js)
เมื่อเตรียม RPC local network ,Metamark wallet แล้ว มาทำส่วนของหน้าแอพพลิเคชั่นฝั่ง frontend ให้ทำ transaction ได้ง่ายขึ้นกัน
ความสามรถของโปรแกรมที่เขียนด้วย Javascript
- สามารถแสดง accounts ทั้งหมดภายใน Ethereum Node ได้
- สามารถทำ transaction send ETH ไปให้อีก account ได้
- สามารถสร้าง account ใหม่ภายใน Node ได้
สร้าง index.html ใส่โค๊ดตามนี้
สร้างไฟล์ index.js เพื่อเก็บ logic เขียนด้วย VueJS
run static file ด้วย live server เปิด VSCode -> import workspace ของ source code -> เลือกไฟล์ index.html ->คลิกขวา เลือก “Open with Live Server”
Metamark API เรียกใช้ API ของ Metamark เพื่อเรียก dialog confirm transaction Metamark
ทดลองทำ transaction ด้วย metamark wallet
- เลือก Sending Transaction -> เลือก account ที่จะทำ transaction (receiver) -> 2 ETH -> กด “Sending Transaction” -> กด “Confirm”
สรุปท้ายบทความ
บทความนี้สำหรับนักพัฒนามือใหม่ที่ต้องการเรียนกรู้เรื่องการทำ transaction บน Ethereum RPC Node ที่อยู่บน local network ยังไม่ใช่ใจความส่วนสำคัญของการทำ Blockchain
เนื้อหาทั้งหมดนี้อาจจะตกหล่นหรือขาดในส่วนใด หรืออยากที่จะแนะนำผมยินดีปรับปรุงเนื้อหาให้ถูกต้อง สามารถทิ้งคอมเม้นไว้ได ้ถ้าผมเข้ามาอ่านจะมาช่วยเม้นตอบให้ บทความนี้ฝากไว้เท่านี้ครับ
