Cover photo

Alchemy Road to web3 week2 คู่มือภาษาไทย

เมื่อไม่นานมานี้โปรเจค Alchemy ได้เข้าสู่ web3 ด้วยมูลค่า 10.2 พันล้านดอลลาร์ และได้รับการระดมทุน 545 ล้านดอลลาร์.

Alchemy คือโปรเจคอะไร?

Alchemy คือแพลตฟอร์มสำหรับนักพัฒนา dApp บน web3. เป็นรากฐานที่อยู่เบื้องหลังตลาด NFT ยอดนิยมอย่าง OpenSea, Nifty และคอลเล็กชั่นระดับโลกที่สำคัญมากมาย.

12/2019, Alchemy เสร็จสิ้นการจัดหาเงินทุน Series A มูลค่า 15 ล้านดอลลาร์จาก Pantera Capital, Stanford University, Coinbase, Samsung,…

4/2021, Alchemy ได้เสร็จสิ้นการจัดหาเงินทุน Series B มูลค่า 80 ล้านดอลลาร์ โดยมีมูลค่า 505 ล้านดอลลาร์ นำโดย Coatue and Addition โดยมีส่วนร่วมจาก DFJ Growth, K5 Global, Chainsmokers, นักแสดง Jared Leto และครอบครัว Glazer.

10/2021, Alchemy ได้เสร็จสิ้นการจัดหาเงินทุน Series C มูลค่า 250 ล้านดอลลาร์ โดยมีมูลค่า 3.5 พันล้านดอลลาร์ นำโดย a16z.

2/2022, Alchemy ได้เสร็จสิ้นการจัดหาเงินทุน 200 ล้านดอลลาร์โดยมีมูลค่า 10.2 พันล้านดอลลาร์ซึ่งนำโดย Lightspeed และ Silver Lake.

Alchemy เป็นทีมที่มีพื้นฐานที่แข็งแกร่ง, เงินทุนที่เพียงพอ, ทำงานจริง, และยังไม่ได้ออก token.

และ Alchemy วางแผนที่จะใช้เงินทุนใหม่นี้เพื่อกระตุ้นการใช้งาน Web3, บางส่วนรวมถึงการเปิดตัว Web3 University, ซึ่งปัจจุบันเป็นงาน Road to Web3 เป็นเวลา 10 สัปดาห์ด้วยหนึ่ง NFT ต่อสัปดาห์. ผมเห็นว่าจำนวน nfts ที่มิ้นออกมานั้นน้อยมาก คาดว่าเนื่องจากความยากของงาน คนจำนวนมากจึงยอมแพ้ที่จะเข้าร่วม, หากโปรเจคนี้มี Airdrop ส่วนตัวผมมองว่าน่าจะได้เยอะอย่างแน่นอน.

เริ่มบทช่วยสอนในสัปดาห์ที่สองแบบลงมือปฏิบัติ: วิธีสร้าง "BuyMeACoffee" DeFi dapp

อันนี้เป็นลิงก์บทช่วยสอนดั้งเดิมของ official, ประกอบด้วยวิดีโอสอนความยาว 1 ชั่วโมง 30 นาทีและบทช่วยสอนที่เป็นข้อความ. ผมได้เขียนตามวิธีของผมเพื่อที่จะทำให้คุณสามารถดูภาพประกอบ และเข้าใจได้ง่ายขื้น.

Step1 ติดตั้งเครื่องมือเขียน code

1.ขั้นตอนการดาวน์โหลด และติดตั้ง Nodejs แบบละเอียด ขั้นแรก ให้ติดตั้ง Nodejs ตามบทช่วยสอนด้านบน, ซึ่งแบ่งออกเป็น 7 ขั้นตอน. ตอนที่ผมทำผมติดปัญหา npm และ npx ขื้น “warn config global” จากนั้นก็ได้ทำตามคำแนะนำของลิงค์นี้, ถ้าใครกรอก code ตามรูปด้านล่างแล้วไม่ติดปัญหาอะไรก็ไม่ต้องทำครับ:

post image

2.ขั้นตอนการดาวน์โหลด และติดตั้ง VScode แบบละเอียด

ทำตามบทช่วยสอนด้านบนเพื่อติดตั้ง VScode.

Step2 Code the BuyMeACoffee.sol smart contract

1.กด win+R เพื่อเปิดกล่อง run จากนั้นใส่คำสั่ง cmd และกด ok.

post image

2.พิมพ์ mkdir BuyMeACoffee-contracts แล้วกด Enter เพื่อสร้างโฟลเดอร์, จากนั้นพิมพ์ cd BuyMeACoffee-contracts แล้วกด Enter เพื่อเข้าสู่โฟลเดอร์.

post image

3.พิมพ์ npm init -y เพื่อเริ่มโปรเจคใหม่.

post image

4.ป้อน npx hardhat เพื่อสร้างโปรเจคตัวอย่าง.

post image

5.หลังจากนั้นกด Enter สามครั้ง และรูปภาพต่อไปนี้จะปรากฏขึ้น.

post image

6.คัดลอก และวาง code ด้านล่าง

npm install --save-dev "hardhat@^2.10.1" "@nomicfoundation/hardhat-toolbox@^1.0.1"
post image

7.เข้าไปในโปรแกรม VScode เลือก file จากนั้นคลิก open folder.

post image

8.ค้นหาโฟลเดอร์ BuyMeACoffee-contracts ที่คุณเพิ่งสร้างขึ้น และคลิกเพื่อเลือกโฟลเดอร์.

post image

9.จะเห็นตามรูป.

post image

10.ตรง contracts > lock.sol คลิกขวา และกด Rename เปลี่ยนชื่อ เป็น BuyMeACoffee.sol .

post image

11.คัดลอก และแทนที่ code BuyMeACoffee.sol ด้วย code ข้างล่างจากนั้นกดบันทืก.

//SPDX-License-Identifier: Unlicense

// contracts/BuyMeACoffee.sol
pragma solidity ^0.8.0;

// Switch this to your own contract address once deployed, for bookkeeping!
// Example Contract Address on Goerli: 0xDBa03676a2fBb6711CB652beF5B7416A53c1421D

contract BuyMeACoffee {
    // Event to emit when a Memo is created.
    event NewMemo(
        address indexed from,
        uint256 timestamp,
        string name,
        string message
    );
    
    // Memo struct.
    struct Memo {
        address from;
        uint256 timestamp;
        string name;
        string message;
    }
    
    // Address of contract deployer. Marked payable so that
    // we can withdraw to this address later.
    address payable owner;

    // List of all memos received from coffee purchases.
    Memo[] memos;

    constructor() {
        // Store the address of the deployer as a payable address.
        // When we withdraw funds, we'll withdraw here.
        owner = payable(msg.sender);
    }

    /**
     * @dev fetches all stored memos
     */
    function getMemos() public view returns (Memo[] memory) {
        return memos;
    }

    /**
     * @dev buy a coffee for owner (sends an ETH tip and leaves a memo)
     * @param _name name of the coffee purchaser
     * @param _message a nice message from the purchaser
     */
    function buyCoffee(string memory _name, string memory _message) public payable {
        // Must accept more than 0 ETH for a coffee.
        require(msg.value > 0, "can't buy coffee for free!");

        // Add the memo to storage!
        memos.push(Memo(
            msg.sender,
            block.timestamp,
            _name,
            _message
        ));

        // Emit a NewMemo event with details about the memo.
        emit NewMemo(
            msg.sender,
            block.timestamp,
            _name,
            _message
        );
    }

    /**
     * @dev send the entire balance stored in this contract to the owner
     */
    function withdrawTips() public {
        require(owner.send(address(this).balance));
    }
}

Step3 สร้างสคริปต์ buy-coffee.js เพื่อทดสอบสัญญาของคุณ

1.เปลี่ยนชื่อ deploy.js เป็น buy-coffee.js และแทนที่ด้วย code ข้างล่าง: (อย่าลืมกดบันทึกหลังจากวางเสร็จ).

const hre = require("hardhat");

// Returns the Ether balance of a given address.
async function getBalance(address) {
  const balanceBigInt = await hre.ethers.provider.getBalance(address);
  return hre.ethers.utils.formatEther(balanceBigInt);
}

// Logs the Ether balances for a list of addresses.
async function printBalances(addresses) {
  let idx = 0;
  for (const address of addresses) {
    console.log(`Address ${idx} balance: `, await getBalance(address));
    idx ++;
  }
}

// Logs the memos stored on-chain from coffee purchases.
async function printMemos(memos) {
  for (const memo of memos) {
    const timestamp = memo.timestamp;
    const tipper = memo.name;
    const tipperAddress = memo.from;
    const message = memo.message;
    console.log(`At ${timestamp}, ${tipper} (${tipperAddress}) said: "${message}"`);
  }
}

async function main() {
  // Get the example accounts we'll be working with.
  const [owner, tipper, tipper2, tipper3] = await hre.ethers.getSigners();

  // We get the contract to deploy.
  const BuyMeACoffee = await hre.ethers.getContractFactory("BuyMeACoffee");
  const buyMeACoffee = await BuyMeACoffee.deploy();

  // Deploy the contract.
  await buyMeACoffee.deployed();
  console.log("BuyMeACoffee deployed to:", buyMeACoffee.address);

  // Check balances before the coffee purchase.
  const addresses = [owner.address, tipper.address, buyMeACoffee.address];
  console.log("== start ==");
  await printBalances(addresses);

  // Buy the owner a few coffees.
  const tip = {value: hre.ethers.utils.parseEther("1")};
  await buyMeACoffee.connect(tipper).buyCoffee("Carolina", "You're the best!", tip);
  await buyMeACoffee.connect(tipper2).buyCoffee("Vitto", "Amazing teacher", tip);
  await buyMeACoffee.connect(tipper3).buyCoffee("Kay", "I love my Proof of Knowledge", tip);

  // Check balances after the coffee purchase.
  console.log("== bought coffee ==");
  await printBalances(addresses);

  // Withdraw.
  await buyMeACoffee.connect(owner).withdrawTips();

  // Check balances after withdrawal.
  console.log("== withdrawTips ==");
  await printBalances(addresses);

  // Check out the memos.
  console.log("== memos ==");
  const memos = await buyMeACoffee.getMemos();
  printMemos(memos);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

2.ป้อน npx hardhat run scripts/buy-coffee.js ใน console และรูปภาพต่อไปนี้จะปรากฏขึ้น.

post image

Step4 ปรับใช้สัญญาอัจฉริยะ BuyMeACoffe.sol กับ Ethereum Goerli testnet โดยใช้ Alchemy และ MetaMask

1.คลิกขวาที่ scipts เลือก New file ใส่ชื่อ deploy.js

post image
post image

2.คัดลอก และวางโค้ดด้านล่างใน deploy.js (อย่าลืมกดบันทึกหลังจากวางเสร็จ).

// scripts/deploy.js

const hre = require("hardhat");

async function main() {
  // We get the contract to deploy.
  const BuyMeACoffee = await hre.ethers.getContractFactory("BuyMeACoffee");
  const buyMeACoffee = await BuyMeACoffee.deploy();

  await buyMeACoffee.deployed();

  console.log("BuyMeACoffee deployed to:", buyMeACoffee.address);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

3.กลับมาที่ console พิมพ์ npx hardhat run scripts/deploy.js ,ถ้าขื้น BuyMeACoffee deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3 แปลว่าทำถูกต้องแล้ว.

post image

4.เปิดไฟล์ hardhat.config.js ลบ code เก่าออกให้หมด แล้วคัดลอกวางเวอร์ชันข้างล่างนี้ลงไป (อย่าลืมกดบันทึกหลังจากวางเสร็จ).

// hardhat.config.js

require("@nomiclabs/hardhat-ethers");
require("@nomiclabs/hardhat-waffle");
require("dotenv").config()

// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more

const GOERLI_URL = process.env.GOERLI_URL;
const PRIVATE_KEY = process.env.PRIVATE_KEY;

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.8.4",
  networks: {
    goerli: {
      url: GOERLI_URL,
      accounts: [PRIVATE_KEY]
    }
  }
};

5.ป้อน npm install dotenv ใน console เพื่อติดตั้ง dotenv ตามภาพที่แสดง.

post image

6.ป้อน echo test>.env ใน console เพื่อสร้าง .env file

post image

มันสามารถเห็นได้ที่นี่.

post image

7.คัดลอก และวางโค้ดด้านลงในไฟส์ .env .

GOERLI_URL=https://eth-goerli.alchemyapi.io/v2/<your api key>
GOERLI_API_KEY=<your api key>
PRIVATE_KEY=<your metamask api key>

หมายเหตุ: โค้ดสามบรรทัดในขั้นตอนที่ 7 ยังไม่สิ้นสุด, ต้องแทนที่ทั้งสามบรรทัดด้วยลิงค์ที่เกี่ยวข้อง. จะหาได้ที่ไหน ให้มองลงมาข้างล่าง.

8.แทนที่ GOERLI_URL.

เข้าไปที่ alchemy ตรงหน้า dashboard กด +CREATE APP.

post image

ตั้งค่าตามภาพด้านล่างแล้วกด Create App.

post image

คลิกปุ่ม view key.

post image

คัดลอกลิงค์ตรงช่อง HTTPS สลับไปที่ vscode แล้ววางลงในตำแหน่งต่อไปนี้.

post image
post image

9.แทนที่ GOERLI_API_KEY. คัดลอกตรงช่อง API KEY สลับไปที่ vscode แล้ววางลงในตำแหน่งต่อไปนี้.

post image
post image

10.แทนที่ PRIVATE_KEY.

คลิกจุดสามจุดที่มุมขวาบนของ metamask จากนั้นคลิก Account details.

post image

คลิก Export Private Key.

post image

คัดลอกตัวเลขของภาพด้านล่าง.

post image

วางที่นี่ และบันทึก.

post image

11.ไปที่ https://www.goerlifaucet.com และเข้าสู่ระบบด้วยบัญชี Alchemy ของคุณเพื่อรับ ETH Goerli ฟรี.

post image

12.เรียกใช้สคริปต์ npx hardhat run scripts/deploy.js --network goerli ใน console เราจะเห็นขื้นว่า error จากนั้นเราจะมาค้นหา error กันต่อที่ข้อ 13.

post image

13.พิมพ์ npm install --save-dev @nomiclabs/hardhat-waffle เพื่อติดตั้งแพ็คเกจที่ขาดหายไปจากขั้นตอนที่ 12. ใน console จะมีคำเตือนมากมายที่ไม่จำเป็นต้องจัดการระหว่างการติดตั้ง.

post image

14.เรียกใช้ npx hardhat run scripts/deploy.js --network goerli อีกครั้ง. ตรงบรรทัด BuyMeACoffee deployed to: จะมี address ตรงนี้อย่าลืมคัดลอกไว้.

post image

Step5 เรียกใช้สคริปต์ withdraw

1.คลิกขวาที่ scripts เพื่อสร้างไฟล์ withdraw.js และวางโค้ดด้านล่างลงไป (อย่าลืมกดบันทึกหลังจากวางเสร็จ).

// scripts/withdraw.js

const hre = require("hardhat");
const abi = require("../artifacts/contracts/BuyMeACoffee.sol/BuyMeACoffee.json");

async function getBalance(provider, address) {
  const balanceBigInt = await provider.getBalance(address);
  return hre.ethers.utils.formatEther(balanceBigInt);
}

async function main() {
  // Get the contract that has been deployed to Goerli.
  const contractAddress="0xDBa03676a2fBb6711CB652beF5B7416A53c1421D";
  const contractABI = abi.abi;

  // Get the node connection and wallet connection.
  const provider = new hre.ethers.providers.AlchemyProvider("goerli", process.env.GOERLI_API_KEY);

  // Ensure that signer is the SAME address as the original contract deployer,
  // or else this script will fail with an error.
  const signer = new hre.ethers.Wallet(process.env.PRIVATE_KEY, provider);

  // Instantiate connected contract.
  const buyMeACoffee = new hre.ethers.Contract(contractAddress, contractABI, signer);

  // Check starting balances.
  console.log("current balance of owner: ", await getBalance(provider, signer.address), "ETH");
  const contractBalance = await getBalance(provider, buyMeACoffee.address);
  console.log("current balance of contract: ", await getBalance(provider, buyMeACoffee.address), "ETH");

  // Withdraw funds if there are funds to withdraw.
  if (contractBalance !== "0.0") {
    console.log("withdrawing funds..")
    const withdrawTxn = await buyMeACoffee.withdrawTips();
    await withdrawTxn.wait();
  } else {
    console.log("no funds to withdraw!");
  }

  // Check ending balance.
  console.log("current balance of owner: ", await getBalance(provider, signer.address), "ETH");
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });
post image

2.ป้อน npx hardhat run scripts/withdraw.js ใน console หลังจากรันแล้วจะเป็นดังรูปด้านล่าง.

post image

Step6 สร้าง front-end เว็บไซต์ Buy Me A Coffee dapp โดยใช้ Replit และ Ethers.js

1.เยี่ยมชมโปรเจคตัวอย่างอย่างเป็นทางการ และสร้างสำเนาของคุณเองเพื่อแก้ไขที่นี่: BuyMeACoffee

post image

2.คลิกที่ fork repl.

post image

3.ก่อนจะเข้าสู่หน้านี้ หากคุณไม่เคยไม่เคยสมัครบัญชีให้สมัครก่อนนะครับ.

post image

4.เอา contract address ที่เราได้มาจาก step4 ข้อที่ 14 มาแทนที่ตรงที่ขีดไว้.

post image

5.กด ctrl+f ใน pages/index.js และอัปเดต String ชื่อเป็นของคุณเอง.

post image

6.คลิก run และจะปรากฏดังรูป.

post image

7.คลิก publish.

post image

8.ตั้งชื่อ และ description ตามใจชอบจากนั้นกด Next ไปเรื่อยๆจนเสร็จ.

post image
post image
post image
post image
post image
post image

9.ลองเข้าสู่เว็บไซต์ที่เราพื่งสร้างขึ้นมาเอง, ต่อกระเป๋า goerli และกดส่งค่ากาแฟ.

post image
post image

Step7 ส่งงาน

https://docs.google.com/forms/d/e/1FAIpQLSdNNLXMYZmIhjcWoT-UedS3AoGpRiPDRaNARUPGXLbX1TVvSg/viewform

Step8 รับ nft

เราสามารถเช็ด nft ที่เรายังไม่ได้เคลมได้นะครับโดยเข้าไปที่ mintkudos จากนั้นต่อกระเป๋ามุมขวามือลองกดเช็ดดูถ้ามีปลุ่ม claim แปลว่าเรามี nft ที่เราสามารถเคลมได้แต่เรายังไม่ได้เคลม.

post image

เท่านี้ก็จบกันไปแล้วนะครับกับ Alchemy Road to web3 week2 ใครมีคำถาม หรือสงสัยยังไงสามารถถามได้. ส่วนใครที่อยากจะสนับสนุนค่ากาแฟให้ผู้เขียนสามารถกดปุ่ม Collect Entry ได้ที่ด้านล่างนี้จากนั้นเราจะได้ nft บทความของ mirror.xyz chain optimism และสามารถเช็ด nft ที่เรา collect มาได้ที่ QxProfile.

Twitter Telegram Mirror

collect://