Dự án NFT đơn giản với Metamask và Web3: Lấy thông tin tài khoản
Dự án NFT đơn giản với Metamask và Web3: Lấy thông tin tài khoản
Dự án NFT đơn giản với Metamask và Web3: Khởi tạo dự án
Dự án của chúng ta sẽ sử dụng java web, cấu trúc thư mục sẽ kiểu thế này:
<p>
</p>
<img src="https://stackask.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-16-at-12.26.01-PM.png" alt="" class="alignnone size-full wp-image-3757" />
<p>
</p>
<ol start="1">
<li>file pom:
</li>
</ol>
<p>
</p>
<pre><span><span><span><?</span>xml version=<span>"1.0"</span> encoding=<span>"UTF-8"</span><span>?></span></span>
<span><<span>project</span> <span>xmlns</span>=<span>"http://maven.apache.org/POM/4.0.0"</span>
<span>xmlns:xsi</span>=<span>"http://www.w3.org/2001/XMLSchema-instance"</span>
<span>xsi:schemaLocation</span>=<span>"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"</span>></span>
<span><<span>modelVersion</span>></span>4.0.0<span></<span>modelVersion</span>></span>
<span><<span>parent</span>></span>
<span><<span>groupId</span>></span>com.tvd12<span></<span>groupId</span>></span>
<span><<span>artifactId</span>></span>ezyfox<span></<span>artifactId</span>></span>
<span><<span>version</span>></span>1.0.2<span></<span>version</span>></span>
<span></<span>parent</span>></span>
<span><<span>groupId</span>></span>org.example<span></<span>groupId</span>></span>
<span><<span>artifactId</span>></span>nft-game-web<span></<span>artifactId</span>></span>
<span><<span>version</span>></span>1.0.0<span></<span>version</span>></span>
<span><<span>properties</span>></span>
<span><<span>ezy.http.version</span>></span>0.2.0<span></<span>ezy.http.version</span>></span>
<span><<span>ezy.platform.version</span>></span>0.0.1a<span></<span>ezy.platform.version</span>></span>
<span></<span>properties</span>></span>
<span><<span>dependencies</span>></span>
<span><<span>dependency</span>></span>
<span><<span>groupId</span>></span>com.tvd12<span></<span>groupId</span>></span>
<span><<span>artifactId</span>></span>ezyhttp-server-boot<span></<span>artifactId</span>></span>
<span><<span>version</span>></span>$</span><span>{ezy.http.version}</span><span><span></<span>version</span>></span>
<span></<span>dependency</span>></span>
<span><<span>dependency</span>></span>
<span><<span>groupId</span>></span>org.youngmonkeys<span></<span>groupId</span>></span>
<span><<span>artifactId</span>></span>ezyplatform-devtools<span></<span>artifactId</span>></span>
<span><<span>version</span>></span>$</span><span>{ezy.platform.version}</span><span><span></<span>version</span>></span>
<span></<span>dependency</span>></span>
<span></<span>dependencies</span>></span>
<span></<span>project</span>></span></span>
</pre>
<p>
</p>
<ol start="2">
<li>File NftGameStartup:
</li>
</ol>
<p>
</p>
<pre>
package org.example.nft_game;
import com.tvd12.ezyhttp.core.boot.EzyHttpApplicationBootstrap;
public class NftGameStartup {
public static void main(String[] args) throws Exception {
EzyHttpApplicationBootstrap.start(NftGameStartup.class);
}
}
</pre>
<p>
</p>
Dự án NFT đơn giản với Metamask và Web3: Code html và javascript đầy đủ
Sau tất cả các bước, cuối cùng chúng ta sẽ có 1 index.html với phần javascript đầy đủ thế này:
<p>
</p>
<pre>
const ethereumButton = $('#enableEthereumButton');
const signButton = $('#signButton');
const awardItemButton = $('#awardItemButton');
const showAccount = $('#showAccount');
const showBalance = $('#showBalance');
const showSignatureText = $('#showSignatureText');
const recoverText = $('#recoverText');
const messageInput = $('#messageInput');
const contractInfoText = $('#contractInfoText');
const tokenOwnerInput = $('#tokenOwnerInput');
const tokenURIInput = $('#tokenURIInput');
const tokenIdText = $('#tokenIdText');
var account = '';
async function getAccount() {
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
account = accounts[0];
web3.eth.defaultAccount = account;
showAccount.text(account);
getBalance();
getContract();
}
async function getBalance() {
const balance = await ethereum.request({
method: 'eth_getBalance',
params: [
account,
"latest"
]
});
showBalance.text(parseInt(balance, 16));
}
async function sign() {
const message = stringToHex(messageInput.val());
const signature = await ethereum.request({
method: 'personal_sign',
params: [
message,
account
]
});
showSignatureText.text(message, signature);
recover(message, signature);
}
async function recover(message, signature) {
const recoverValue = await ethereum.request({
method: 'personal_ecRecover',
params: [
message,
signature
]
});
recoverText.text(recoverValue);
}
var contract;
const web3 = new Web3(ethereum);
function getContract() {
$.get(
"/contract",
function(data, status) {
console.log('contract: ', data.address);
web3.eth.Contract.defaultAccount = account;
contract = new web3.eth.Contract(data.abi, data.address);
contract.address = data.address;
contract.abi = data.abi;
getContractInfo();
}
);
}
async function getContractInfo() {
const name = await contract.methods.name().call();
const symbol = await contract.methods.symbol().call();
contractInfoText.text(name + ' - ' + symbol);
}
async function awardItem() {
const tokenOwner = tokenOwnerInput.val();
const tokenURI = tokenURIInput.val();
console.log('award item, owner: ' + tokenOwner + ', uri: ' + tokenURI);
const result = await contract.methods.awardItem(tokenOwner, tokenURI).send({from: account});
const tokenId = result.events.Transfer.returnValues.tokenId;
tokenIdText.text(tokenId);
}
(function() {
if (typeof window.ethereum === 'undefined') {
return;
}
console.log('MetaMask is installed!');
ethereumButton.on('click', () => {
getAccount();
});
signButton.on('click', () => {
sign();
});
awardItemButton.on('click', () => {
awardItem();
});
})();
</pre>
Dự án NFT đơn giản với Metamask và Web3: Khởi tạo môi trường
Dự án NFT đơn giản với Metamask và Web3: Khởi tạo môi trường
Tham gia vào mạng Ropsten Test Networking
Nếu bạn đã quen với mạng ethereum private rồi và muốn bước ra thế giới nhưng lại không có đủ tài chính thì mua eth thì việc tham gia vào một mạng test cũng là một ý tưởng không tồi, và Ropsten là một mạng như thế.
<p>
</p>
<p>
Để tham gia vào Ropsten network bạn cần làm một số bước sau đây:
</p>
<p>
</p>
<ol start="1">
<li>Cài metamask trên chrome extension, bạn cũng có thể cài trên mobile, nhưng để học tập thì hãy cài trên chrome.
</li>
<li>Tạo một tài khoản với metamask
</li>
<li>Sử dụng geth tạo một tài khoản trên máy tính của bạn
</li>
<li>Click vào avatar trên metamask để nó hiện lên menu và chọn <code>Import Account</code>
</li>
<li>Chọn type là JSON File và tìm đến file keystore của bạn, ví dụ: <code>UTC--2021-11-03T01-28-27.943630000Z--3c31b4b9d6c24bad29498f99aaa6914231362c7f</code>
</li>
<li>Request eth từ những nhà hảo tâm: chọn tài khoản vừa import chọn <code>Buy</code>, ở phần Test Faucet chọn Get Ether, khi trang <a href="https://faucet.metamask.io/" target="_blank">https://faucet.metamask.io/</a> chọn <code>faucet</code> <code>request 1 ether from faucet</code>
</li>
<li>Nếu bạn không nhận được ether, bạn có thể request tại: <a href="https://faucet.ropsten.be/" target="_blank">https://faucet.ropsten.be/</a>
</li>
<li>Sau các bước trên bạn sẽ có tài khoản trên mạng Ropsten với một số eth nhất định, ví dụ của mình
</li>
</ol>
<p>
</p>
<img src="https://stackask.com/wp-content/uploads/2021/11/Screen-Shot-2021-11-04-at-9.44.13-AM.png" alt="" class="alignnone size-full wp-image-2946" />
