關(guān)于web3的介紹大家可以自己搜索相關(guān)的文章去了解狸捕，本文主要是記錄作為一個小白绘证，從0開始學習，到開發(fā)完成一個簡易的仿opensea網(wǎng)站的歷程菱鸥。
由于這次項目使用的是以太坊的鏈澎蛛，所以部分相關(guān)資料鏈接都是以太坊相關(guān)的網(wǎng)址抚垄，同時前端與區(qū)塊鏈交互使用的是metamask插件，所以前端js調(diào)用智能合約時使用的是Ethers.js
1:web3開發(fā)與以往的網(wǎng)站開發(fā)有什么區(qū)別
作為一名網(wǎng)站開發(fā)人員谋逻，我們熟知的開發(fā)內(nèi)容分為2個主要部分：由邏輯處理呆馁，數(shù)據(jù)讀寫構(gòu)成的后端，與數(shù)據(jù)展示毁兆，操作交互構(gòu)成的前端浙滤。如果接觸過前后端分離開發(fā)，我們能簡單的認為荧恍，后端將邏輯處理與數(shù)據(jù)讀寫封裝起來瓷叫，只提供給前端對應(yīng)的接口。
web3與以往的這種模式相比送巡，多了一個智能合約的部分摹菠，智能合約也可以進行邏輯處理與數(shù)據(jù)讀寫，但是數(shù)據(jù)讀寫的目標由我們自己的服務(wù)器換成了在區(qū)塊鏈上骗爆。
2:關(guān)于web3的一些常識
以太坊賬戶的介紹
https://ethereum.org/zh/developers/docs/accounts/
想要與區(qū)塊鏈進行交互次氨，首先我們要有自己的賬戶，使用metamask我們可以輕松申請到一個免費賬戶摘投，賬戶的錢包地址煮寡，密鑰，助記詞需要保存好犀呼。
手續(xù)費
https://ethereum.org/zh/developers/docs/gas/
上面的有提到幸撕，世界上所有人的賬號使用的都是同一條區(qū)塊鏈，所以區(qū)塊鏈為了保證穩(wěn)定性外臂，每一次用戶與區(qū)塊鏈交互時都會收取一筆手續(xù)費坐儿。這筆手續(xù)費你愿意提供的越高，就會有更多的礦工愿意幫你更快將你這次的操作更內(nèi)容提交到鏈上宋光。
正式鏈與測試鏈
https://ethereum.org/zh/developers/docs/networks/
在開發(fā)中我們可能會經(jīng)常試錯來調(diào)試或者頻繁的測試貌矿，每一次與區(qū)塊鏈的交互都會觸發(fā)手續(xù)費的消耗，錢包內(nèi)的錢目前除了轉(zhuǎn)贈之外罪佳，或者靠當?shù)V工的獎勵一點一點積攢逛漫。使用測試鏈可以使用官方提供的水龍頭領(lǐng)取測試鏈的錢來進行各類開發(fā)的支持或測試的支持。
goerli水龍頭地址
https://goerlifaucet.com/
3:智能合約開發(fā)
智能合約介紹
https://ethereum.org/zh/developers/docs/smart-contracts/
智能合約由我們編寫好的邏輯處理赘艳，數(shù)據(jù)讀寫功能組成酌毡，發(fā)布到鏈上后克握，如果調(diào)用的合約方法涉及到數(shù)據(jù)寫入或變更，則此次調(diào)用需要用戶支付手續(xù)費阔馋，如果只是讀取合約已存的數(shù)據(jù)玛荞，則不會觸發(fā)手續(xù)費支付。合約常用的功能有eth轉(zhuǎn)贈呕寝，token構(gòu)筑勋眯，轉(zhuǎn)移等。
學習開發(fā)智能合約
本次項目開發(fā)智能合約時選擇使用的語言是solidity
solidity文檔地址
https://learnblockchain.cn/docs/solidity/
簡單的單文件合約可以直接粘貼到REMIX上檢查是否有錯誤及發(fā)布與測試
https://remix.ethereum.org/#optimize=false&runs=200&evmVersion=null&version=soljson-v0.8.7+commit.e28d00a7.js
本次項目的智能合約涉及到token構(gòu)筑下梢，轉(zhuǎn)移客蹋，以及復(fù)雜的eth轉(zhuǎn)贈金額計算，所以在了解如何使用solidity開發(fā)后孽江，選擇使用openzeppelin框架進行開發(fā)讶坯，使用框架的好處就是框架幫我們封裝了很多要用到的功能，使開發(fā)更便捷岗屏。
openzeppelin文檔地址
https://docs.openzeppelin.com/contracts/4.x/
下面為搭建一個智能合約框架的操作步驟：
新建一個項目文件夾
npm init -y
npm install --save-dev hardhat
npx hardhat
-Create a JavaScript project
npm install --save-dev @nomicfoundation/hardhat-toolbox
npm install --save-dev @openzeppelin/contracts
npm install --save-dev @openzeppelin/contracts-upgradeable
npm install --save-dev @openzeppelin/hardhat-upgrades
npm install --save-dev @nomiclabs/hardhat-ethers
npm install --save-dev @nomiclabs/hardhat-etherscan
npm install --save-dev chai
npm install --save-dev @openzeppelin/test-helpers
Vi hardhat.config.js
require("@nomiclabs/hardhat-ethers");
require("@openzeppelin/hardhat-upgrades");
require("@nomiclabs/hardhat-etherscan");
之后我們就可以在contracts目錄下創(chuàng)建自己的合約文件了辆琅，例如：Demo.sol，需要使用框架封裝的類時使用import引用就可以了这刷。
編譯
完成合約文件的編寫后婉烟，執(zhí)行npx hardhat compile進行編譯，此編譯過程會檢查代碼的基礎(chǔ)錯誤暇屋，成功后在scripts目錄下創(chuàng)建該合約對應(yīng)的Demo.deploy.js似袁，該文件可參考框架搭建時自動生成的deploy.js，替換const CONTRACT = await hre.ethers.getContractFactory("Demo");
部署
在部署前咐刨，我們還需要編輯hardhat.config.js
networks里主要設(shè)置我們要發(fā)的區(qū)塊鏈的網(wǎng)絡(luò)昙衅，如圖我是要部署到goerli測試鏈上，accounts里填寫你要發(fā)布合約的錢包私鑰定鸟，因為部署合約要收取手續(xù)費而涉，請確保該錢包有足夠的余額。url是通過alchemy注冊賬號來獲取的联予，復(fù)制HTTPS內(nèi)的KEY粘貼到url里啼县。
https://www.alchemy.com/?a=goerli_faucet
接下來的etherscan?apiKey?goerli，可以在以太坊交易所注冊賬戶創(chuàng)建一個免費的專屬KEY
由于網(wǎng)絡(luò)問題可能會導致發(fā)布失敗躯泰，所以我在此文件的后面加上了代理配置谭羔，可以根據(jù)自己代理端口進行修改华糖。
npx hardhat run scripts/Demo.deploy.js --network goerli
運行該指令即可將智能合約發(fā)布到鏈上麦向，如果失敗會有具體的報錯信息，一般要么是網(wǎng)絡(luò)問題客叉，要么是錢包余額不夠支付手續(xù)費诵竭。成功后會返回該合約在鏈上的地址信息话告。
4:合約調(diào)用
ethers.js文檔
https://learnblockchain.cn/ethers_v5/
加載ethers.js組件
<script src="https://cdn.ethers.io/lib/ethers-5.4.umd.min.js"></script>
合約發(fā)布后，我們可以通過合約的地址去交易所查看詳細內(nèi)容卵慰，例如交易記錄沙郭，token交易記錄，合約源代碼（需對此合約認證開發(fā)者）等裳朋。
在前端js調(diào)用過程中病线，我們主要要使用到合約的地址與ABI，建議將此寫到前端頁面上鲤嫡，方便直接使用送挑。以下內(nèi)容為常用的一些ethers.js的方法。
獲取當前以太幣轉(zhuǎn)美元的匯率（ethApiKey為上面自己注冊的以太坊交易所KEY）
觸發(fā)當前metamask登陸的用戶授權(quán)網(wǎng)站連接暖眼，同意即可獲得登陸者相關(guān)信息惕耕，常用于第三方登陸。
獲取指定錢包地址的余額
當前用戶調(diào)取智能合約的某個方法诫肠，不涉及金額的發(fā)送司澎。（nftContractAddress為合約地址，nftContractAbi為合約的ABI栋豫，listingId為此實例合約必要接收的參數(shù)）
當前用戶調(diào)取智能合約的某個方法挤安，并包含金額的發(fā)送。（value: ethers.utils.parseEther(price.toString())此為要發(fā)送的eth的金額數(shù)笼才，catch內(nèi)的res.error.code ==='-32000'為當前用戶的金額不足支付金額及手續(xù)費時的返回狀態(tài)）
本次智能合約的個人開發(fā)總結(jié)個人認為還不夠細致漱受，因為有些問題沒法記錄在此處，畢竟項目場景不一樣骡送，遇到的問題也不可能一致昂羡。我只能將大致的流程與一些需要注意的點寫下來，實際在開發(fā)中作為小白在sol文件的編寫會遇到更多的疑問摔踱，智能依靠各類搜索引擎來完善自身的代碼虐先，但一定要清楚自己的功能邏輯，確保合約沒有明顯的漏洞派敷。
