2022 iThome 鐵人賽

DAY 23

Web 3

從以太坊白皮書理解 web 3 概念系列第 24 篇

從以太坊白皮書理解 web 3 概念 - Day23

14th鐵人賽 ethereum 與 web 3

json_liang

2022-10-07 01:13:36

1013 瀏覽

分享至

從以太坊白皮書理解 web 3 概念 - Day23

NFT School Day 1 - 初始化環境 - 建立與 Greeting Contract 互動的 Dapp

前面講述完基本的 Token 概念

在接下來的 8 天將會透過 NFT school 的內容

逐步介紹 NFT 並且在測試鏈建構一個 NFT

什麼是 NFT

NFT 代表的是 Non-Fungible Token 也就是所謂非同質化 Token

從上面的解釋，可以知道 NFT 是一種 Token 也就是一樣是符合某些標準的 Smart Contract

這種 Token 具有非同質化特性

同質化指的是兩個不同的東西具有取代性，比如說 Alice 的 5 元銅板與 Bob 的 5 元銅板

彼此之間互換也不會造成任何不同

非同質性則是代表每個不同的東西都無法取代具有唯一性，比如說畢卡索的任何一個畫作

每一個畫作因為其特殊的藝術性而有所不同是無法彼此取代

所以非同質 Token 就是一種每個 Token 都具有唯一性無法取代的 token

而這種唯一性不只是因為使用唯一識別代號

並且是因為 NFT 會對應到一個在現實世界的物件內容

其內容因為據為紀念性而有不同

可以想像 NFT 就像是某個現實物件的對應到 Blockchain 上的所有權

NFT 生命周期

NFT 透過 Mint(鑄造) 產生出來把數位資產放到區塊鏈上

然後透過一些販售 NFT 的平台比如 OpenSea 等等

當有人想要該 NFT 原本持有人可以透過 Transfer 轉移 NFT 所有權

NFT 持有人也可以透過 Burn 來銷毀 NFT

基礎設定

為了開發 NFT 以下需要做一些基礎設定

設定 MetaMask

透過 https://metamask.io/download.html 下載安裝 MetaMask for Chrome extension
設定 MetaMask 錢包的帳戶與記憶詞
選擇 Sepolia 測試鏈

先選擇顯示測試網路(預設不顯示)
切換為 Sepolia 測試鏈

從測試鏈 faucet 拿取測試 ether

先按下畫面下的 Buy
選擇從 test fault 取得 ETHER
填入 address 接收 ETHER

初始化資料夾

mkdir hello_eth
cd hello_eth

下載 https://cdn.ethers.io/lib/ethers-5.1.esm.min.js 到 hello_eth 資料夾

安裝 HTTP server

yarn global add http-server

撰寫與 Contract 互動的 Javascript 內容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Ether</title>
  <script type="module">
    import { ethers } from "./ethers-5.1.esm.min.js";
    // Your code here...
    const contractReturn = document.querySelector('.output');

    const GREETER_ADDRESS = '0xeF802A416c1E5fC3F198620E685b958D6d0EA2c9'
    const GREETER_ABI = `[{"inputs":[{"internalType":"string","name":"_greeting","type":"string"}],"stateMutability":"nonpayable","type":"constructor"},{"inputs":[],"name":"greet","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"string","name":"_greeting","type":"string"}],"name":"setGreeting","outputs":[],"stateMutability":"nonpayable","type":"function"}]`

    async function getGreeting() {
      // Wrap the window.ethereum object injected by MetaMask with the ethers API
      const provider = new ethers.providers.Web3Provider(window.ethereum);

      // Connect to the greeter contract.
      const greeterContract = new ethers.Contract(GREETER_ADDRESS, GREETER_ABI, provider);

      // Call the greet() smart contract function.
      const greeting = await greeterContract.greet();
      console.log(greeting)
      // Write the greeting result to the DOM.
      contractReturn.textContent = `hello ` + greeting;
    }
    getGreeting();
  </script>
</head>
<body>
  <div class="output"></div>
</body>
</html>

這個網頁是與位址在 0xeF802A416c1E5fC3F198620E685b958D6d0EA2c9 的 Greeter Contract 做互動

透過 abi 呼叫 Greeter Contract 的 greet function

Geeter Contract 內容如下

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.7.0;

import "hardhat/console.sol";


contract Greeter {
  string greeting;

  constructor(string memory _greeting) {
    console.log("Deploying a Greeter with greeting:", _greeting);
    greeting = _greeting;
  }

  function greet() public view returns (string memory) {
    return greeting;
  }

  function setGreeting(string memory _greeting) public {
    console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
    greeting = _greeting;
  }
}

可以看出 greet 回復內的內容與存在 greeting 的值相關

這邊因為我已經把 greeting 內容設定成 "GSON"

所以會傳的結果也是 GSON