Home/ Questions/Q 3758
Next
In Process
monkey
  • 0
Enlightened
Asked: 2021-12-16T05:28:34+00:00 In:

Dự án NFT đơn giản với Metamask và Web3: Khởi tạo dự án

  • 0

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:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <parent>
    <groupId>com.tvd12</groupId>
    <artifactId>ezyfox</artifactId>
    <version>1.0.2</version>
  </parent>

  <groupId>org.example</groupId>
  <artifactId>nft-game-web</artifactId>
  <version>1.0.0</version>

  <properties>
    <ezy.http.version>0.2.0</ezy.http.version>
    <ezy.platform.version>0.0.1a</ezy.platform.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>com.tvd12</groupId>
      <artifactId>ezyhttp-server-boot</artifactId>
      <version>${ezy.http.version}</version>
    </dependency>
    <dependency>
      <groupId>org.youngmonkeys</groupId>
      <artifactId>ezyplatform-devtools</artifactId>
      <version>${ezy.platform.version}</version>
    </dependency>
  </dependencies>
</project>

2. 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);
    }
}
blockchainmetamask
Share

6 Answers

  1. Enlightened

    3. 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
  2. Enlightened

    4. File style.css:

    body {
    background-color: #fff;
}

    5. 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;
}
    • 1
  3. Enlightened

    6. 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”: )

    7. File application.yaml:

    resources:
  enable: true

    8. 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
  4. Enlightened

    File index.html

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

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

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

ethereumButton.on('click', () => {
  getAccount();
});
})();
</script>
</body>
</html>
    • 1
  5. Enlightened
    This answer was edited. 
    @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

You must login to add an answer.

Need An Account,