Unidata目的：”给 Web3 开发者提供人类友好的 Web3 数据的便捷访问。 “
— from 分享境 at https://diygod.me/unidata
Unidata 是一個強大且開源的 web3 數據存取工具，主要解決了當前因鏈上數據缺乏標準格式而導致無法輕易存取自己或用戶所擁有的 web3 數據的問題。
Unidata 提出的解決方法為，設定統一格式，將這些數據分為四大類： assets, notes, profiles, links ，最常用到的 NFT 即屬於 assets 的範圍。同時，一般在取得 NFT 的過程中，不同的鏈會有不同的設計，以乙太鏈來舉例，要取得一地址之 NFT 需讀取其在所有主鏈、測鏈上的交易紀錄，這對需將資料展現在網頁的前端工程師來說是一項非常麻煩的工作，Unidata 就是在這時候 come to help，透過其 api 把資料透過友好且統一的格式回傳，提供相當便利之鏈上數據訪問方式。
今天這篇文章會大致演示四種資料的取得，都是用很簡單的 typescript 來做 api 的示範，欲取得更多資訊或是更詳細的支援列表這裡推薦大家去看他的官方文件網站！
開始使用：
Installation:
yarn add unidata
Initialization:
import Unidata from 'unidata.js';
const unidata = new Unidata({
infuraProjectID?: string;
ipfsGateway?: string;
moralisWeb3APIKey?: string;
openseaAPIKey?: string;
alchemyEthereumAPIKey?: string;
alchemyPolygonAPIKey?: string;
alchemyFlowAPIKey?: string;
poapAPIKey?: string;
});在這裡先建構你的各種 key，以利之後直接呼叫。
Get Assets:
const assets: Assets = await unidata.assets.get(options: {
source: string;
providers?: string[];
identity: string;
limit?: number;
cursor?: any;
});
// 填入有需要用到的資料就好。Example:
import "./App.css";
import Unidata from "unidata.js";
import { Assets } from "unidata.js";
import { useEffect, useState } from "react";
import { Asset } from "unidata.js";
const unidata = new Unidata({});
async function getData() {
const assets: Assets = await unidata.assets.get({
source: "Ethereum NFT",
identity: "0x0af3aF1049efc7Be735fa1499CeE6125B61CA175",
});
return assets;
}
function App() {
const [data, setData] = useState<{
cursor?: any[];
list?: Asset[];
total?: number;
}>({});
useEffect(() => {
getData().then((res) => {
setData(res);
});
}, []);
return (
<div className="App">
<header className="App-header">
<p>Unidata Demo:</p>
</header>
<div style={{ background: "grey", marginTop: "-20px", paddingTop: "5%" }}>
{data.list?.map((t) => {
return (
<>
<p style={{ color: "white" }}>{t.name}</p>
{t.items && typeof t.items[0].address && (
<>
<img
style={{ width: "250px" }}
src={t.items[0].address!}
></img>
</>
)}
</>
);
})}
</div>
</div>
);
}
export default App;這樣可以得到這個人所有的 Assets 資料，如以下結果：
這個地址是我在 opensea 上隨便找的，看來是的 NFT 大亨。
Get Notes:
這裡我直接演示 getNotes 這個 function，可以直接和上面 example 中的 getData 做替換使用：
async function getNotes() {
const notes: Notes = await unidata.notes.get({
source: "Ethereum NFT Activity",
identity: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
platform: "Ethereum",
limit: 10,
});
return notes;
}把結果 console.log 出來：
即可以取得 limit 筆的資料。
Get Links:
Links 的部分目前僅支援 crossbell，雖然目前 web3 的社群網站似乎也不多就是了…
這裡就用筆者的 crossbell 演示吧！目前還沒有任何好友…有興趣的人可以互追一下！
async function getLinks() {
const links: Links = await unidata.links.get({
source: 'Crossbell Link',
identity: '0x0b88cd9c5B6B73145332316C199a5B3a52415730',
platform: 'Ethereum',
});
return links;
}會取得：
想看多一點人追蹤回傳的資料型態可以到官方文件的這裡看看！
Get Profiles:
Profiles 的部分目前也是支援 crossbell, ENS 和 infura，那這裡我一樣用我自己的地址作演示給大家看！
async function getProfiles() {
const profiles: Profiles = await unidata.profiles.get({
source: "Crossbell Profile",
identity: "0x0b88cd9c5B6B73145332316C199a5B3a52415730",
platform: "Ethereum",
});
return profiles;
}把回傳的數據 console.log 出來：
就可以看到這個帳號的一切。
結語：
今天這篇文章主要是補足一些比較實際的使用方式，用簡單的 React 以typescript 演示如何取得資料並將其展示在前端，整個使用過程真的感覺到 Unidata 是個好東西阿！最後希望這篇文章可以幫助到各種需要用到鏈上資料的前端工程師，節省大家在和鏈互動時花的時間！
