# 使用Moralis開發Web3.0程式-入門篇(使用Next.js)
###### tags: `開發者路徑`
###### 兌心科技 Insight Software : 使用Moralis開發Web3.0程式-入門篇(使用Next.js)
#
在前文(Web3.0技術簡介)中提到，可以使用Relay平台來做為RPC節點的提供者來與區塊鏈溝通，可以節省很多開發的時間，它們之中除了提供許多進階的API之外，也提供很多對於 DApp開發者很方便的後台功能，像是Moralis號稱Web3.0中的Firebase，有身份驗證、數據庫、Web3 傳輸等功能，如你所想，Moralis 可以更輕鬆地完成大多數這些複雜的事情。
本文將會用一個簡單的Next.js範例，首先連結MetaMask錢包，並介紹如何利用Moralis取得錢包的資訊，並將虛擬貨幣由一個錢包轉移到另一個錢包。
Next.js 是一個基於 React 的框架，它同時支援 SSR (Server Side Rendering) 與 SSG (Static Side Generation) 兩種方法，不需要很多的設定就可以讓網站同時有這兩種功能。使用 Next.js是因為我們不需要設置重複的東西，比如從頭開始路由，而Next.js 為我們提供了一個內置的路由器。
想要完成本文的範例，最好具有下列知識基礎:
(1)React.js網頁程式開發
(2) MetaMask錢包的使用
(3)區塊鏈相關的知識
接下來我們一步步來完成這個範例吧
建一個Moralis Server
進入 Moralis.io 並創建一個新帳戶，如果您已經有一個，請登錄。 登錄後，您將看到如下儀表板：
點下Create a new Server 以建立新的Server:
在本文中使用Eth Testnet (Rosten) 所以選擇後，點選 Add Instance
在建立的Server項目點選 View Details 可以看到下列資訊
記下Server URL, Application ID的資訊，它們將會在我們的專案中被使用到
建立Next.js APP
使用以下指令創建一個新的 Next.js 應用程序：
npx create-next-app my-project --example with-tailwindcss
上面指令將設置 Next.js 並設置 Tailwind CSS 以便我們進行一些最小的樣式設置，但在本文不會介紹太多樣式的問題
創建應用程序後，進入到項目目錄並使用以下命令安裝此項目所需的依賴包：
npm install moralis react-moralis @walletconnect/web3-provider
這將安裝moralis 核心庫以及react-moralis，會提供我們方便使用Morails功能。 @walletconnect/web3-provider 是用以連接MetaMask以外的錢包，但本文僅使用到MetaMask，僅是用來消除Moralis包的警告。
設定Moralis環境變數
在專案的目錄下建立.env，並將之前的資訊填入
MORALIS_SERVER_URL=(server url)
MORALIS_PUBLIC_APP_ID=(application id)
接著我們打開專案中pages目錄下的_app.tsx
改成下面的內容
import { MoralisProvider } from "react-moralis";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return (
<MoralisProvider
appId={process.env.MORALIS_APP_ID}
serverUrl={process.env.MORALIS_SERVER_URL}
>
<Component {...pageProps} />
</MoralisProvider>
);
}
export default MyApp;
透過將MoralisProvider包覆在專案的入口點, 我們可以將包含在其中的子組件都得到Moralis的功能支持。修改完之後 ，可以執行下列指令來執行專案:
npm run dev
執行成功之後，可以透過http://localhost:3000來訪問網頁，下一步我們將建立一個連接的按鍵，可以透過Moralis本身提供的函式來連接MetaMask錢包。
連接MetaMask錢包
我們將Pages目錄的index.tsx修改內容如下:
import type { NextPage } from 'next'
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import {useMoralis} from 'react-moralis'
import Head from 'next/head'
import Image from 'next/image'
const Home: NextPage = () => {
const { isAuthenticated, authenticate } = useMoralis();
const router = useRouter();
useEffect(() => {
if (isAuthenticated) router.replace("/dashboard");
}, [isAuthenticated]);
return (
<div className="h-screen w-screen flex
items-center justify-center">
<Head>
<title>Moralis IO tutorial</title>
<meta name="description"
content="A basic tutorial of Moralis IO" />
<link rel="icon" href="/favicon.ico" />
</Head>
<button
className="px-7 py-4 text-xl rounded-xl bg-yellow-300
animate-pulse"
onClick={() =>
authenticate({ signingMessage: "Authorize
linking of your wallet" })
}
>
Connect to MetaMask
</button>
</div>
);
}
export default Home
其中可以看到
透過這行 import { useRouter } from “next/router”，我們使用Next.js的router功能，當MetamMsk設權成功時，變數isAuthenticated為true，則會導向/dashboard頁面(稍後會建立)
而透過這行 import {useMoralis} from ‘react-moralis’，我們可以使用react-moralis的功能，我們會用到authenticate連接錢包及isAuthenticated來確認驗證狀態，在按下按鍵時透過authenticate()我們可以透過web3去驗證使用者是否有運行中的web3Provider (像是MetaMask).
我們在呼叫時傳入了signingMessage，這樣我們就可以在使用MetamMsk 進行身份驗證時顯示一條消息。 現在，如果您點擊使用 MetaMask 登錄，應該會看到 MetaMask 彈出並請求授權，如下所示：
點下“簽署”後，您將使用錢包登錄，你將看到 404 錯誤頁面，因為我們尚未創建儀表板(/dashboard)。
(更多的react-moralis用法參考這邊)
列出錢包中的代幣資訊及交易
在Pages資料夾下建立dashboard資料夾，並建立index.jsx，內容如下:
import Head from "next/head";
import { useRouter } from "next/router";
import { useEffect,useState} from "react";
import Moralis from "moralis";
import { useMoralis,useWeb3Transfer,useMoralisWeb3Api }
from "react-moralis";
function Index() {
const { isAuthenticated, logout ,enableWeb3} = useMoralis();
const router = useRouter();
const [balance,setBalance] = useState(0);
useEffect(() => {
if (!isAuthenticated) router.replace("/");
}, [isAuthenticated]);
return (
<div className="h-screen w-screen flex
flex-col items-center justify-center">
<Head>
<title>Moralis Tutorial - Dashboard</title>
</Head>
<CompoentBalance/>
<CompoentTransfer/>
<div class="h-100 w-1/4">
<button onClick={logout}
className="px-7 py-4 text-xl rounded-xl bg-blue-300">
Logout
</button>
</div>
</div>
);
}
export default Index;
其中 <CompoentBalance/>中，按下按鈕會取得連接帳戶的balance並顯示，程式如下:
const CompoentBalance =()=>{
const Web3Api = useMoralisWeb3Api()
const getBalance = async () => {
try {
let result = await Web3Api.account.getNativeBalance({
chain:"ropsten"
})
setBalance(Moralis.Units.FromWei(result.balance))
console.log(result)
} catch (err) {
console.error(err);
}
};
return <div class="h-1/5 w-1/4">
<button className="px-7 py-4 mb-5
text-xl rounded-xl bg-blue-300"
onClick={() =>getBalance()}>
Refetch Balance
</button>
<pre>{"BALANCE:"+balance+"ETH"}</pre>
< /div>
};
這裡我們透過Moralis提供的hook(useMoralisWeb3Api)來使用Web3 API，透過Web3Api.account.getNativeBalance ，參數使用 chain:”ropsten” 可以取得使用者帳戶在ropten testnet的balance，結果如下:
其中 <CompoentTransfer/>中， 按下按鍵後會轉出0.1ETH給帳戶擁有者
const CompoentTransfer =()=>{
const {fetch, error, isFetching} = useWeb3Transfer({
amount: Moralis.Units.ETH(0.1),
receiver: "0x0000000000000000000000000000000000000000",
type: "native",
});
const sendEth = async () => {
try {
await enableWeb3();
await fetch()
alert("Transfer of funds succeeded!");
} catch (err) {
alert("Something went wrong");
}
};
return <div class="h-100 w-1/4">
<button onClick={sendEth}
className="px-7 py-4 mb-5 text-xl
rounded-xl bg-blue-300">
Send 0.1 ETH to owner
</button>
< /div>
};
這裡使用useWeb3Transfer這個webhook，可以交易各種不同的代幣(ETH,BTC…)，Moralis.Units.ETH(0.1)代ETH數量為0.1, 將receiver取代為你要收到ETH的另一個錢包,另外別忘了要先呼叫enableWeb3()來啟用Web3的功能，按下按鍵後，MetaMask會收到一個0.1 ETH的request，如下圖:
點下”確認”之後，過一陣子，可以重新取得Balace就可以發現ETH已經被轉出去了
最後按下”Logout”,這邊會將isAuthenticated設為false, 根據useEffect裡的設定，將會回到登入頁面(也就是Pages資料夾下的index.jsx)
97
#
###### About Insight Software
###### 兌心科技的專業橫跨多個領域，雲端架構、遊戲製作、區塊鏈技術、去中心化金融、醫療資訊和物聯網服務等，致力於成為企業Web2.0到Web3.0的領航員，提供**雲服務、線路、區塊鏈技術、金庫**等解決方案。
#
### 聯絡方式
兌心聯絡信箱 :
service@insight-software.com
### 社群
[Website](https://www.insight-software.com/)
[Medium](https://medium.com/insight-software)
[Youtube](https://www.youtube.com/@insight-software)
[Telegram](https://t.me/Insight_software)
[Twitter](https://twitter.com/insightcapital_)
[Instagram](https://www.instagram.com/insight.capital/)
Sign in with Wallet
Connect another wallet