---
# System prepended metadata

title: 從以太坊白皮書理解 web 3 概念 - Day23
tags: [' Web 3', it 鐵人賽 30 天, ' ethereum']

---

---
tags: it 鐵人賽 30 天, Web 3, ethereum
---
# 從以太坊白皮書理解 web 3 概念 - Day23

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

前面講述完基本的 Token 概念

在接下來的 8 天將會透過 [NFT school](https://nftschool.dev/) 的內容

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

## 什麼是 NFT

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

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

這種 Token 具有非同質化特性

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

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

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

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

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

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

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

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

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

## NFT 生命周期

![](https://xrpl.org/img/nft-lifecycle.png)

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

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

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

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

## 基礎設定

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

### 設定 MetaMask

1. 透過 [https://metamask.io/download.html]( https://metamask.io/download.html) 下載安裝 MetaMask for Chrome extension
2. 設定 MetaMask 錢包的帳戶 與記憶詞
![](https://i.imgur.com/Bdaj4dt.png)
3. 選擇 Sepolia 測試鏈
  * 先選擇顯示測試網路(預設不顯示)
![](https://i.imgur.com/lv1VP63.png)
  * 切換為 Sepolia 測試鏈
![](https://i.imgur.com/8IhCtFw.png)


4. 從測試鏈 faucet 拿取測試 ether
  * 先按下畫面下的 Buy
![](https://i.imgur.com/OLzDVcX.png)
  * 選擇從 test fault 取得 ETHER
![](https://i.imgur.com/WWtB3pt.png)
  * 填入 address 接收 ETHER
![](https://i.imgur.com/sZ0p3Am.png)

### 初始化資料夾

```shell=
mkdir hello_eth
cd hello_eth
```
下載 https://cdn.ethers.io/lib/ethers-5.1.esm.min.js 到 hello_eth 資料夾
### 安裝 HTTP server

```shell=
yarn global add http-server
```
### 撰寫與 Contract 互動的 Javascript 內容
```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 內容如下

```solidity=
//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

### 驗證結果

在 hello_eth 執行 
```shell=
http-server .
```
![](https://i.imgur.com/FigqrCy.png)

然後打開瀏覽器
![](https://i.imgur.com/L0uA6sL.png)

到這裡環境設定基本上就可以確認 可以透過 ethers library 與測試鏈做互動

## 參考文獻

[https://docs.ethers.io/v5/getting-started/#getting-started--importing--web-browser](https://docs.ethers.io/v5/getting-started/#getting-started--importing--web-browser)
[https://nftschool.dev/tutorial/first-steps/#building-our-app](https://nftschool.dev/tutorial/first-steps/#building-our-app)
[https://ropsten.etherscan.io/address/0xE0282e76237B8eB19A5D08e1741b8b3e2691Dadd#code](https://ropsten.etherscan.io/address/0xE0282e76237B8eB19A5D08e1741b8b3e2691Dadd#code)
[https://xrpl.org/non-fungible-tokens.html](https://xrpl.org/non-fungible-tokens.html)