Avatar
0
monkey Enlightened
monkey Enlightened
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:

  1. file pom:

<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>

  1. File NftGameStartup:

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);
    }
}

  • Answer
blockchain metamask
Remain: 5
5 Answers
Avatar
monkey Enlightened
monkey Enlightened
  1. File HomeController:

package org.example.nft_game.controller;

import java.io.IOException;
import java.io.InputStream;
import java.util.Map;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.tvd12.ezyfox.stream.EzyAnywayInputStreamLoader;
import com.tvd12.ezyfox.stream.EzyInputStreamLoader;
import com.tvd12.ezyfox.stream.EzyInputStreams;
import com.tvd12.ezyfox.util.EzyMapBuilder;
import com.tvd12.ezyhttp.server.core.annotation.Controller;
import com.tvd12.ezyhttp.server.core.annotation.DoGet;
import com.tvd12.ezyhttp.server.core.view.Redirect;

@Controller
public class HomeController {

    private final ObjectMapper objectMapper;
    private final EzyInputStreamLoader inputStreamLoader;
    private static final String CONTRACT_ADDRESS = "0xA9F6009507ef930C67B98F7A12CB0CA4321aAaDB";

    public HomeController(ObjectMapper objectMapper) {
        this.objectMapper = objectMapper;
        this.inputStreamLoader = new EzyAnywayInputStreamLoader();
    }

    @DoGet("/")
    public Redirect home() {
        return Redirect.to("/index.html");
    }

    @SuppressWarnings("unchecked")
    @DoGet("/contract")
    public Map contractGet() throws IOException {
        try (InputStream inputStream = inputStreamLoader.load("abi.json")) {
            String api = EzyInputStreams.toStringUtf8(inputStream);
            return EzyMapBuilder
                .mapBuilder()
                .put("address", CONTRACT_ADDRESS)
                .put("abi", objectMapper.readValue(api, Map[].class))
                .build();
        }
    }
}
  • 1
  • Reply
Avatar
monkey Enlightened
monkey Enlightened
  1. File style.css:

body {
    background-color: #fff;
}

  1. File main.js:

var stringToHex = function(str) {
    var hex, i;
    var result = "0x";
    for (i = 0; i < str.length; i++) {
        hex = str.charCodeAt(i).toString(16);
        result += hex;
    }
    return result
}

var hexToString = function(hex) {
    var i;
    var hexes = hex.match(/.{1,2}/g) || [];
    var result = "";
    for(i = 0; i < hexes.length; i++) {
        result += String.fromCharCode(parseInt(hexes[i], 16));
    }

    return result;
}
</code>
  • 1
  • Reply
Avatar
monkey Enlightened
monkey Enlightened
  1. File abi.json, ở post trước chúng ta đã deploy contract rồi, hãy tìm đến file: truffle/build/contracts/GameItem.json và copy phần "abi" array ( lưu ý chỉ copy phần array thôi nhé, không copy cả "abi": )

  1. File application.yaml:

resources:
  enable: true

  1. File log4j.properties

log4j.properties

# Root logger option
log4j.rootLogger=INFO, stdout

# Redirect log messages to console
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.out
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} %-5p %c{1}:%L - %m%n

  • 1
  • Reply
Avatar
@SuppressWarnings("unchecked") 
@DoGet("/contract") 
public Map contractGet() throws IOException { 
	try (InputStream inputStream = inputStreamLoader.load("abi.json")) { 
		String api = EzyInputStreams.toStringUtf8(inputStream); 
		return EzyMapBuilder.mapBuilder()
			.put("address", CONTRACT_ADDRESS)
			.put("abi", objectMapper.readValue(api, Map[].class))
			.build();
		}
	}

Tại sao lại phải để annotation superwarning ở đây ạ

  • 0
  • Reply
Vì cái lớp EzyMapBuilderbuild ra một Map không rõ generics type nên thêm cái @SuppressWarnings("unchecked") vào để IDE nó đỡ cảnh báo em ạ.  –  tvd12 1639789326000
Avatar
monkey Enlightened
monkey Enlightened
File index.html

<span><!DOCTYPE html></span>
<span><<span>html</span> <span>lang</span>=<span>"en"</span>></span>
<span><<span>head</span>></span>
  <span><<span>meta</span> <span>charset</span>=<span>"UTF-8"</span>></span>
  <span><<span>title</span>></span>NFT Game<span></<span>title</span>></span>
  <span><<span>link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"</span> <span>integrity</span>=<span>"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"</span> <span>crossorigin</span>=<span>"anonymous"</span>></span>
  <span><<span>link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"/css/style.css"</span>></span>
<span></<span>head</span>></span>
<span><<span>body</span>></span>
<span><<span>div</span> <span>class</span>=<span>"container"</span>></span>
  <span><<span>div</span> <span>class</span>=<span>"row"</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 text-center"</span>></span>
      <span><<span>h3</span>></span>Welcome to NFT Game<span></<span>h3</span>></span>
    <span></<span>div</span>></span>
  <span></<span>div</span>></span>
  <span><<span>div</span> <span>class</span>=<span>"row"</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 text-center"</span>></span>
      <span><<span>button</span> <span>id</span>=<span>"enableEthereumButton"</span> <span>class</span>=<span>"btn btn-primary"</span>></span>Enable Ethereum<span></<span>button</span>></span>
    <span></<span>div</span>></span>
  <span></<span>div</span>></span>
<span></<span>div</span>></span>
<span><<span>script</span> <span>src</span>=<span>"https://code.jquery.com/jquery-3.6.0.js"</span> <span>integrity</span>=<span>"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="</span> <span>crossorigin</span>=<span>"anonymous"</span>></span><span></span><span></<span>script</span>></span>
<span><<span>script</span> <span>src</span>=<span>"https://cdnjs.cloudflare.com/ajax/libs/web3/1.6.1/web3.min.js"</span> <span>integrity</span>=<span>"sha512-5erpERW8MxcHDF7Xea9eBQPiRtxbse70pFcaHJuOhdEBQeAxGQjUwgJbuBDWve+xP/u5IoJbKjyJk50qCnMD7A=="</span> <span>crossorigin</span>=<span>"anonymous"</span> <span>referrerpolicy</span>=<span>"no-referrer"</span>></span><span></span><span></<span>script</span>></span>
<span><<span>script</span> <span>src</span>=<span>"/js/main.js"</span>></span><span></span><span></<span>script</span>></span>
<span><<span>script</span>></span><span>
<span>const</span> ethereumButton = $(<span>'#enableEthereumButton'</span>);

<span>async</span> <span><span>function</span> <span>getAccount</span>(<span></span>) </span>{
  <span>const</span> accounts = <span>await</span> ethereum.request({ <span>method</span>: <span>'eth_requestAccounts'</span> });
  <span>console</span>.log(<span>JSON</span>.stringify(accounts));
}

(<span><span>function</span>(<span></span>) </span>{
<span>if</span> (<span>typeof</span> <span>window</span>.ethereum === <span>'undefined'</span>) {
  <span>return</span>;
}
<span>console</span>.log(<span>'MetaMask is installed!'</span>);

ethereumButton.on(<span>'click'</span>, () => {
  getAccount();
});
})();
</span><span></<span>script</span>></span>
<span></<span>body</span>></span>
<span></<span>html</span>></span>
  • 1
  • Reply