Javascript Web3.js
Giới thiệu về thư viện Javascript Web3.js của Ethereum.
Hợp đồng về Zombie viết bằng ngôn ngữ lập trình Solidity trong ví dụ của chúng ta đã hoàn tất! Bây giờ chúng ta cần viết một giao diện người dùng javascript tương tác với hợp đồng.
Ethereum có một thư viện Javascript được gọi là Web3.js.
Trong bài học sau, chúng ta sẽ đi sâu hơn về cách triển khai hợp đồng và thiết lập Web3.js. Nhưng bây giờ chúng ta hãy xem một số mã mẫu để biết cách Web3.js sẽ tương tác với hợp đồng Zombie.
Đừng lo lắng nếu bạn chưa hiểu hết được đoạn code này, sẽ có giải thích ở phần dưới.
// Here's how we would access our contract:
var abi = /* abi generated by the compiler */
var ZombieFactoryContract = web3.eth.contract(abi)
var contractAddress = /* our contract address on Ethereum after deploying */
var ZombieFactory = ZombieFactoryContract.at(contractAddress)
// `ZombieFactory` has access to our contract's public functions and events
// some sort of event listener to take the text input:
$("#ourButton").click(function(e) {
var name = $("#nameInput").val()
// Call our contract's `createRandomZombie` function:
ZombieFactory.createRandomZombie(name)
})
// Listen for the `NewZombie` event, and update the UI
var event = ZombieFactory.NewZombie(function(error, result) {
if (error) return
generateZombie(result.zombieId, result.name, result.dna)
})
// take the Zombie dna, and update our image
function generateZombie(id, name, dna) {
let dnaStr = String(dna)
// pad DNA with leading zeroes if it's less than 16 characters
while (dnaStr.length < 16)
dnaStr = "0" + dnaStr
let zombieDetails = {
// first 2 digits make up the head. We have 7 possible heads, so % 7
// to get a number 0 - 6, then add 1 to make it 1 - 7. Then we have 7
// image files named "head1.png" through "head7.png" we load based on
// this number:
headChoice: dnaStr.substring(0, 2) % 7 + 1,
// 2nd 2 digits make up the eyes, 11 variations:
eyeChoice: dnaStr.substring(2, 4) % 11 + 1,
// 6 variations of shirts:
shirtChoice: dnaStr.substring(4, 6) % 6 + 1,
// last 6 digits control color. Updated using CSS filter: hue-rotate
// which has 360 degrees:
skinColorChoice: parseInt(dnaStr.substring(6, 8) / 100 * 360),
eyeColorChoice: parseInt(dnaStr.substring(8, 10) / 100 * 360),
clothesColorChoice: parseInt(dnaStr.substring(10, 12) / 100 * 360),
zombieName: name,
zombieDescription: "A Level 1 CryptoZombie",
}
return zombieDetails
}
Giải thích:
Những gì javascript nhận một đầu vào là tên tên của Zombile mà người dùng nhập trong textbox nameInput.
Hợp đồng zombie (mà ta đã ghi nhớ từ các bài học trước) có tên là ZombieFactory sẽ tạo mới một zombie từ tên nameInput đó.
Tiếp đó ZombieFactory trả ngược lại kết quả cho Javascript của zombie mới tạo được bao gồm: zomebieId, name và dna.
Từ 3 dữ liệu này javascript sử dụng một số thay đổi dựa trên trình duyệt (chúng ta đang sử dụng Vue.js) để hoán đổi hình ảnh và áp dụng các bộ lọc CSS. Bạn sẽ nhận được học điều này trong một bài học sau.
Nếu bạn chưa biết cách TẠO FILE, COMPILER và DEPLOY thì hãy xem lại trong bài giới thiệu nhé. Có hướng dẫn chi tiết ở đó.
BÀI TIẾP THEO: BÀI SỐ 14
HỌC TỪ ĐẦU: BÀI SỐ 1