# PecuLab WEB3 LiveCoding (2022-03-31)

課程錄影：https://youtu.be/0rlY6WUtrAY

## DAPP 開發環境介紹與安裝
### VS Code（Integrated Development Environment, IDE）
https://code.visualstudio.com/

### Node.js
https://nodejs.org/en/
* 先安裝好後 才能執行npm等指令

## 補充文件
### openzeppelin（Smart Contract）
https://docs.openzeppelin.com/contracts/4.x/
* 智能合約的公版版本，安裝此套件就可以在寫智能合約時直接import套用


https://docs.openzeppelin.com/contracts/4.x/wizard
* 可以運用智能合約精靈產出合約程式碼

### hardhat（Ethereum Development Environment）
https://medium.com/my-blockchain-development-daily-journey/%E5%AE%8C%E6%95%B4%E7%9A%84hardhat%E5%AF%A6%E8%B8%90%E6%95%99%E7%A8%8B-a9b005aa4c12

#### Get started (建立環境)：npx hardhat
* Create a basic sample project (只做智能合約部屬 不做成網頁)
Create an advanced sample project (產出.js 可以直接跟react合併)
Create an advanced sample project that uses TypeScript (產出.ts 合併react較繁瑣)
Create an empty hardhat.config.js

* Folder
contracts -> 透過hardhat部屬的智能合約(撰寫合約內容，有異動記得要npx hardhat compile)
scripts -> 透過hardhat發布到區塊鏈的智能合約(發布合約)
test -> 發布上區塊鏈即不能修改只能再發布，所以hardhat設置讓使用者在本機端(近端)測試，都沒問題再做最後的部署：要在hardhat.config.js進行環境設定，設定ETHERSCAN_API_KEY、URL_NAME及PRIVATE_KEY，真正的數值存在env檔案中，而與以太測試鏈串接是透過Alchemy取得API URL
* 在本機端(近端)測試：
* 把近端區塊鏈開啟 npx hardhat node
* Matamask新增測試網路(localhost 8545)及測試錢包
* 把智能合約發佈到localhost:
* npx hardhat run --network localhost scripts/deploy.js
* 若沒問題(產生合約地址)就可以把合約發佈到Rinkby測試環境：
* npx hardhat run --network rinkeby scripts/deploy.js


#### Stack Overflow
* 出現錯誤訊息可參考

### react（JavaScript Framework）
https://create-react-app.dev/docs/getting-started
*webpack 5.71.0 compiled successfully in 7039 ms 完成訊息。

### npm（Node Package Manager）
https://www.npmjs.com/package/hardhat
*npx hardhat compile後，欠缺的套件在這裡尋找。例:Error: Cannot find module '@nomiclabs/hardhat-waffle'
* 開源指令會不斷變動，不要死記硬背，要學會看錯誤訊息和查找正確資訊

## DAPP
https://dev.to/yakult/a-tutorial-build-dapp-with-hardhat-react-and-ethersjs-1gmi
* 分散式計算中，遠端程式呼叫（Remote Procedure Call, RPC）
* 連接以太坊網路（Provider）

### MetaMask

### faucets
https://faucets.chain.link/rinkeby

### Etherscan API
https://etherscan.io/

### Alchemy
#### (設定API KEY 並拿到串接乙太鏈的API Url)

https://www.alchemy.com/

---

### env設定
* 此為重要KEY要保管好，申請好後複製填入

* PRIVATE_KEY:
* 在錢包-帳戶詳情-導出私鑰

---

### Deploy to localhost & rinkeby
* npx hardhat run --network localhost scripts/deploy.js
* npx hardhat run --network rinkeby scripts/deploy.js

* 先發佈到localhost，沒問題再發佈到rinkeby
* 發佈到rinkeby也是一種交易，所以帳戶也要有錢才行，沒錢會出現錯誤訊息（insufficient funds for intrinsic transaction cost），可透過於metamask上換至Goerli鏈並領取測試幣得到解決。
* 沒"錢"(GAS)的話就慢慢等，就會有GAS可以匯款。
* 獲得rinkeby測試幣：https://faucets.chain.link/rinkeby
* rinkeby已經被deprecated，可改採用Goerli進行測試，獲取測試幣的參考：https://hackmd.io/@m061i6/HJQQ4G5-j#%E6%96%B9%E6%B3%952-Alchemy-faucets
* .env檔與hardhat.config 在同一個路徑下。
* 把rinkeby測試鏈上帳戶導出私鑰，貼到.env檔中，以確認匯款給發布者。
* env檔像這樣:

---
### 智能合約(sol)有異動要記得compile，會產生artifacts資料夾
* 將生成合約.json，複製到前端專案資料夾(front or myweb3)-src-contracts
* contract-address.json中，要補上測試鏈上的合約地址

---

### 歡迎來 PecuLab 觀光 https://discord.gg/GvKPay6m6t*