DApp(Decentralized application)，外觀上和普通的應用程式(application)非常相像，不同的是dapp整合了web3的概念，能夠通過智能合約與區塊鏈、使用者進行互動，還能夠在無人工干預下自動運行，真是迷人又神秘的小傢伙。然而由於整合了近年新興的區塊鏈技術，使得Dapp的開發給人艱澀難懂的第一印象，其實如果對於傳統網頁前後端開發有過實作經驗的朋友，是有可能經由自學完成自己的第一款DApp的，在這裡我將會介紹如何完成一個最簡易的dapp。就讓我們開始吧！
閱讀本文前，需先具備以下相關概念：
• HTML、CSS，與 Javascript 的編寫經驗
• 有自行買賣過虛擬貨幣、與使用過metamask的經驗
• 使用過node.js (非必要)
環境需求
作業系統
linux或MacOS、使用windows也可以進行開發。文中我使用的是一般筆電內附的windows10。
Node.js
首先，我們需要安裝Node.js。在linux與macOS環境中，可以用nvm安裝lts版：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm install --lts
而在windows下要使用nvm，需要另外下載 nvm for windows
或是直接到 https://nodejs.org/ 下載最新的LTS版並安裝，安裝過程中使用預設的選項一直下一步也可以。
安裝好後，查詢一下node、npm、npx的版本，確認都有安裝到：
node --version
npm --version
npx --version
MetaMask
這是一款常用的錢包插件，許多交易下時常會出現使用metamask的場景。在這裡我們將用來創建測試用帳號與使用測試幣。
到 https://metamask.io/ 下載瀏覽器插件，推薦Chrome。
Hardhat
我們將使用hardhat在本地端模擬乙太坊網路環境，之後我們還會在這裡使用測試網路，並上面試跑智能合約。
Step 1 創建一個空的react app與資料夾
創建一個空的react app，並創建一個空的資料夾(在這裡我們先取名叫做my-first-dapp)
npx create-react-app my-first-dapp
安裝完後，確認畫面有顯示 Happy hacking! 表示安裝成功。將路徑指到我們剛建好的資料夾，準備進行下一步
cd my-first-dapp
Step 2 安裝hardhat
接下來安裝基本的hardhat套件:
npx hardhat
執行後，畫面會跳出我們缺少了一些安裝要素，並跳出建議的安裝指令(大概長這樣: npm install ethers ...)
把建議的安裝指令複製後，貼上安裝。
安裝完後會跳出run npm audit fix to fix them, or npm audit for details字樣，表示安裝完成
(不用擔心畫面上跳出很多bug通知，身為hardhat的初學使用者，我們暫時不須理會，繼續我們的下一步即可)
再次輸入以下指令:
npx hardhat
執行後，會出現一個Hardhat歡迎畫面，以及"Welcome to Hardhat v2.x.x"字樣，表示安裝成功
創建 sample project
Hardhat安裝完成後，畫面上出現一個選擇題，問我們打算接下來要做甚麼?
這次創建的目的是為了大致熟悉運作原理，所以我們先選最簡單的當作示例
使用鍵盤的上下方向鍵選擇 "Create a basic sample project"後，選擇預設的目錄進行安裝。
同時系統也會詢問是否要加個.gitignore? 選擇Y即可。(有使用git的朋友也可依需求另做選擇)
執行後，畫面會出現"Project created"，表示創建完成
修改config設定
到my-first-dapp目錄下，把hardhat.config.js檔案打開，找到 module.exports = {...}; 這一段後：
module.exports = {
solidity: "0.8.4",
paths: {artifacts: './src/artifacts',}, //path for compiled contracts
networks: { hardhat: {chainId: 1337} } //a node called hardhat on local, and a hard code id for matamask
};
搭建測試環境
為了測試我們剛創好的sample project，我們需要在local創造一個模擬的環境，以及準備一些測試用的(假的)eth幣。
輸入以下指令：npx hardhat node
執行後，畫面會出現 "Started HTTP WebSocket JSON-RPC server at http://127.0.0.1:8545/" 的字樣，還會列出100個測試用的Account，每個帳戶裡面都有10000個測試用的ETH。
(注意這100個帳戶都是測試用，不是安全的錢包地址，請勿在主網上往這幾個地址匯入任何真正的資產)
