บทความนี้จะมาแบ่งปันการทำ 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

1. download Ganache และทำการติดตั้งให้เรียบร้อย (ขั้นตอนนี้ขอข้าม)
2. เปิดหน้าโปรแกรม 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

1. สามารถแสดง accounts ทั้งหมดภายใน Ethereum Node ได้
2. สามารถทำ transaction send ETH ไปให้อีก account ได้
3. สามารถสร้าง account ใหม่ภายใน Node ได้

สร้าง index.html ใส่โค๊ดตามนี้

สร้างไฟล์ index.js เพื่อเก็บ logic เขียนด้วย VueJS

Github sourcecode

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

เนื้อหาทั้งหมดนี้อาจจะตกหล่นหรือขาดในส่วนใด หรืออยากที่จะแนะนำผมยินดีปรับปรุงเนื้อหาให้ถูกต้อง สามารถทิ้งคอมเม้นไว้ได ้ถ้าผมเข้ามาอ่านจะมาช่วยเม้นตอบให้ บทความนี้ฝากไว้เท่านี้ครับ