Building on web3 の紹介 — 成長する web3 空間で開発するためのプロトコル、ツール、ベストプラクティスを開発者に理解してもらうことを目的とした、Edge & Node ブログの新シリーズです。 Building on web3は、web3エコシステムにおける新しいテクノロジーやプロジェクトにスポットライトを当て、dapp開発者の成功の秘訣を作るのに役立ちます。
この記事では、 Arweave とは何か、なぜそれが重要だと思うのか、そしてどのように構築を始めることができるのかを学びます。 この記事では、ファイルの保存と取得に焦点を当て、独自の本番Arweaveゲートウェイの実行については説明しません。
私にとって、Arweaveの革命的な点は、一度保管すれば、二度とお金を払わなくても、また消える心配もなく、永遠に利用できることを期待できることです。
従来の集中型ストレージソリューションでは、1か月分の請求書の支払いを忘れると、データが削除されたり、さらに悪いことに、あなたや他の誰かが誤ってデータを完全に削除したりします。
このデータの永続性は、不変のアプリケーションインフラストラクチャを構築しているWeb3では特に重要です。 ブロックチェーンデータは本質的にすでに不変ですが、開発者が分散化や不変性のベストプラクティスに従わない方法でオフチェーンデータを保存しているのをよく見かけます。
例えば、非代替性トークン(NFT)の分野では、中央集権的なホスティングサービスを使用してトークンのメタデータを保存する開発者もいます。 これは、不変性に必要な重要なセキュリティ特性と、そもそもNFTが何を表しているのかという考えを壊すものです。
メタデータが永続的でない場合、トークンが表すプロパティが将来も存在する保証はありません。 これは、メタデータがArweaveのような永続的なファイルストレージプロトコルに保存されていない場合、トークンの整合性が危機に瀕していることを意味し、このようなテクノロジーが存在することが非常に重要である理由です。
The Graphのエコシステム内では、真に分散型のWeb3アプリケーションを構築するためのプロトコルの価値を認識しているため、Arweaveのサポートと統合も構築しています。
Arweaveは、ブロックチェーンの派生物であるブロックウィーブと「プルーフ・オブ・アクセス」の2つの技術に基づいて構築されています。
ブロックウィーブは、Arweaveを動かすテクノロジーです。 ブロックチェーンと同様に、ブロックウィーブはデータブロックのリンクされたコレクションであり、ネットワークに書き込まれた以前のブロックにリンクしています。
Arweaveで安全で分散型のデータストレージを促進するために使用されるコンセンサスメカニズムは、「プルーフオブアクセス」と呼ばれます。 このメカニズムは、マイナーがすべてのブロックを保管する必要がないため、プルーフ・オブ・ワークよりも効率的で環境に優しいものです。 このため、莫大な量の電力が節約され、マイナーはコンセンサスを得ることができます。 また、ネットワークが拡大するにつれて、電力消費量は減少します。
Arweaveトークンの使用を開始するには、2つの方法があります
新しいウォレットから始めて、 Arweaveテスト蛇口を使用してArweaveトークンの一部を取得できます。
検証が完了すると、アプリでArweaveのテストを開始するために使用する0.1 ARが与えられます。
MetamaskやPhantomなどのブラウザウォレットやモバイルウォレットを使用して、アプリから直接Web3アプリケーションと対話したことがあるかもしれません。 Arweaveには、 Arconnectと呼ばれる同様のウォレットがあります。
これをChrome拡張機能として直接インストールし、Arweaveを使用するWebアプリケーションとの対話を開始できます。
そこから、 サポートされている取引所 のトークンでウォレットに資金を供給するか、前のステップで作成したウォレットをインポートすることができます。
このチュートリアルに従うには、トークンは必要ありませんが、Arconnectブラウザウォレットがインストールされている必要があります。
このチュートリアルで取り上げる手法に加えて、さまざまなスマートコントラクトブロックチェーン上のArweaveストレージのネイティブサポートや、アプリ統合用のクライアントサイドおよびサーバーサイドSDKを可能にする Bundlr を使用することを選択できます。
これは、ユーザーがARトークンを保有する必要がなく、代わりにETH、MATIC、Solana、Arbitrumなどの他のネットワークやトークンに依存してトランザクションの支払いを行うことができるため、優れたオプションです。
Bundlr の詳細については、 こちらのドキュメントをご覧ください。
Arweaveの概要とトークンの保護が完了したので、基本的なアプリケーションを構築しましょう。
構築するアプリでは、テキストの文字列をArweaveにアップロードおよびダウンロードできます。
これは基本的な例ですが、ツールと API を順を追って説明し、短時間で構築を開始できるため、優れた "Hello world" です。
最初に行うことは、create-react-appを使用して新しいReactアプリケーションを作成することです。
npx create-react-app (英語)
arweave-appcd arweave-app
アプリケーションからArweaveネットワークを呼び出すには、主に2つの方法があります。
Arweave JS SDKは非常に優れており、このチュートリアルで使用するものです。
次に、npmまたはyarnを使用してarweave-jsをインストールしましょう。
npmはarweaveをインストールする
Arweaveネットワークと対話する方法はいくつかあります。
このガイドでは、テストトランザクションを無料で送信できるArlocalから始めます。 また、メインネットを使用して実際のトランザクションを送信する方法についても学びます。
ローカルでテストするには、Arlocalを使用して、対話してテストトランザクションを送信できるローカルネットワークを実行できます。
Arlocalを使用するために何かをダウンロードまたはインストールする必要はなく、マシンにNode.jsがインストールされている限り、次のコマンドを実行してローカルゲートウェイを起動するだけです。
NPX arlocal (NPX アーローカル)
それです! これで、http://localhost:1984 でローカルのArweaveゲートウェイが実行されているはずです
ローカルゲートウェイを実行したので、コードを記述しましょう。
src/App.js を開き、次のコードでファイルを更新します。
スタイルを '../styles/Home.module.css'
'react'から { useState } をインポートする
'arweave'からArweaveをインポートします
/ Arweaveノードに接続するか、ゲートウェイを指定 /
const arweave = Arweave.init({})
関数 App() {
const [state, setState] = useState('')
const [transactionId, setTransactionId] = useState('')
非同期関数 createTransaction() {
if (!state) return
{
const formData = 状態
setState('')
/ トランザクションを作成してArweaveに送信する /
let transaction = await arweave.createTransaction({ data: formData })
arweave.transactions.sign(トランザクション)を待つ
let uploader = await arweave.transactions.getUploader(transaction)
/ アップロードインジケーター /
while (!uploader.isComplete) (アップローダー (!uploader.isComplete)) {
uploader.uploadChunk() を待つ
コンソール.log()${uploader.pctComplete}% complete,
${uploader.uploadedChunks}/${uploader.totalChunks}
}
setTransactionId(transaction.id)
} キャッチ (エラー) {
コンソール.log('エラー: ', エラー)
}
}
非同期関数 readFromArweave() {
/ Arweaveデータを読み取る 任意のtrsnsaction ID /
arweave.transactions (英語)
.getData(transactionId, {
デコード:true、
文字列:true、
})
.then((data) => {
コンソール.log('データ: ', データ)
})
}
戻り値 (
<div className={styles.container}>
<button style={button} onClick={createTransaction}>
トランザクションの作成
</button>
<button style={button} onClick={readFromArweave}>
トランザクションの読み取り
</button>
<input style={input} onChange={(e) => setState(e.target.value)} placeholder="text" value={state} />
</div>
)
}
const ボタン = {
outline: 'なし',
border: '1px solid black',
backgroundColor: '白'、
パディング: '10px'、
幅: '200px'、
marginBottom: 10、
カーソル: 'ポインタ',
}
const 入力 = {
backgroundColor: '#ddd'、
outline: 'なし',
border: 'なし'、
幅: '200px'、
fontSize: '16px'、
パディング: '10px'、
}
デフォルトアプリのエクスポート
次に、アプリを起動します。
npmのスタート
アプリが起動すると、2 つのボタンを含む基本的なフォーム入力が表示されます。
保存したいデータをフォームに入力し、[Create Transaction] を押して Arweave にテキストを保存します。
トランザクションが完了すると、データが保存されたことを示す進行状況インジケーターがコンソールにログアウトされます。
データを保存したら、[Read Transaction] をクリックして Arweave からデータを読み取ります。
本番ネットワークと対話するには、Arweaveのネットワーク設定を更新するだけで済みます。
const arweave = Arweave.init({
ホスト: 'arweave.net'、
})
本日構築したプロジェクトのコードベースの例は 、こちらから入手できます。
Arweaveの詳細については、Arweaveの ドキュメント、Arweave Wiki、および Twitterでフォローしてください。
Edge & Node は、活気に満ちた分散型の未来を築くために活動しているクリエイティブなソフトウェア開発会社です。 The Graphの初期チームによって設立されたEdge & Nodeは、分散型インターネット(web3)の進歩と、信頼を最小化したアプリケーションの普及に専念しています。このチームは、オープンソースソフトウェア、ツール、アプリケーションの開発と保守において豊富な経験を持っています。
Edge & Nodeの最初の製品は、イーサリアムやIPFSなどのネットワークを照会するためのインデックス作成プロトコルである The Graphで、オープンデータが常に利用可能でアクセスしやすいことを保証します。 The Graphは、Uniswap、Livepeer、Aave、Decentralandなど、何千ものプロトコルやdappsで使用されています。 また、Edge & Nodeは、仮想通貨コミュニティに継続的な有用性を提供するために、オンチェーンデータの初の分散型レジストリである Everestを立ち上げ、web3への移行を促進しました。
Building on web3 の紹介 — 成長する web3 空間で開発するためのプロトコル、ツール、ベストプラクティスを開発者に理解してもらうことを目的とした、Edge & Node ブログの新シリーズです。 Building on web3は、web3エコシステムにおける新しいテクノロジーやプロジェクトにスポットライトを当て、dapp開発者の成功の秘訣を作るのに役立ちます。
この記事では、 Arweave とは何か、なぜそれが重要だと思うのか、そしてどのように構築を始めることができるのかを学びます。 この記事では、ファイルの保存と取得に焦点を当て、独自の本番Arweaveゲートウェイの実行については説明しません。
私にとって、Arweaveの革命的な点は、一度保管すれば、二度とお金を払わなくても、また消える心配もなく、永遠に利用できることを期待できることです。
従来の集中型ストレージソリューションでは、1か月分の請求書の支払いを忘れると、データが削除されたり、さらに悪いことに、あなたや他の誰かが誤ってデータを完全に削除したりします。
このデータの永続性は、不変のアプリケーションインフラストラクチャを構築しているWeb3では特に重要です。 ブロックチェーンデータは本質的にすでに不変ですが、開発者が分散化や不変性のベストプラクティスに従わない方法でオフチェーンデータを保存しているのをよく見かけます。
例えば、非代替性トークン(NFT)の分野では、中央集権的なホスティングサービスを使用してトークンのメタデータを保存する開発者もいます。 これは、不変性に必要な重要なセキュリティ特性と、そもそもNFTが何を表しているのかという考えを壊すものです。
メタデータが永続的でない場合、トークンが表すプロパティが将来も存在する保証はありません。 これは、メタデータがArweaveのような永続的なファイルストレージプロトコルに保存されていない場合、トークンの整合性が危機に瀕していることを意味し、このようなテクノロジーが存在することが非常に重要である理由です。
The Graphのエコシステム内では、真に分散型のWeb3アプリケーションを構築するためのプロトコルの価値を認識しているため、Arweaveのサポートと統合も構築しています。
Arweaveは、ブロックチェーンの派生物であるブロックウィーブと「プルーフ・オブ・アクセス」の2つの技術に基づいて構築されています。
ブロックウィーブは、Arweaveを動かすテクノロジーです。 ブロックチェーンと同様に、ブロックウィーブはデータブロックのリンクされたコレクションであり、ネットワークに書き込まれた以前のブロックにリンクしています。
Arweaveで安全で分散型のデータストレージを促進するために使用されるコンセンサスメカニズムは、「プルーフオブアクセス」と呼ばれます。 このメカニズムは、マイナーがすべてのブロックを保管する必要がないため、プルーフ・オブ・ワークよりも効率的で環境に優しいものです。 このため、莫大な量の電力が節約され、マイナーはコンセンサスを得ることができます。 また、ネットワークが拡大するにつれて、電力消費量は減少します。
Arweaveトークンの使用を開始するには、2つの方法があります
新しいウォレットから始めて、 Arweaveテスト蛇口を使用してArweaveトークンの一部を取得できます。
検証が完了すると、アプリでArweaveのテストを開始するために使用する0.1 ARが与えられます。
MetamaskやPhantomなどのブラウザウォレットやモバイルウォレットを使用して、アプリから直接Web3アプリケーションと対話したことがあるかもしれません。 Arweaveには、 Arconnectと呼ばれる同様のウォレットがあります。
これをChrome拡張機能として直接インストールし、Arweaveを使用するWebアプリケーションとの対話を開始できます。
そこから、 サポートされている取引所 のトークンでウォレットに資金を供給するか、前のステップで作成したウォレットをインポートすることができます。
このチュートリアルに従うには、トークンは必要ありませんが、Arconnectブラウザウォレットがインストールされている必要があります。
このチュートリアルで取り上げる手法に加えて、さまざまなスマートコントラクトブロックチェーン上のArweaveストレージのネイティブサポートや、アプリ統合用のクライアントサイドおよびサーバーサイドSDKを可能にする Bundlr を使用することを選択できます。
これは、ユーザーがARトークンを保有する必要がなく、代わりにETH、MATIC、Solana、Arbitrumなどの他のネットワークやトークンに依存してトランザクションの支払いを行うことができるため、優れたオプションです。
Bundlr の詳細については、 こちらのドキュメントをご覧ください。
Arweaveの概要とトークンの保護が完了したので、基本的なアプリケーションを構築しましょう。
構築するアプリでは、テキストの文字列をArweaveにアップロードおよびダウンロードできます。
これは基本的な例ですが、ツールと API を順を追って説明し、短時間で構築を開始できるため、優れた "Hello world" です。
最初に行うことは、create-react-appを使用して新しいReactアプリケーションを作成することです。
npx create-react-app (英語)
arweave-appcd arweave-app
アプリケーションからArweaveネットワークを呼び出すには、主に2つの方法があります。
Arweave JS SDKは非常に優れており、このチュートリアルで使用するものです。
次に、npmまたはyarnを使用してarweave-jsをインストールしましょう。
npmはarweaveをインストールする
Arweaveネットワークと対話する方法はいくつかあります。
このガイドでは、テストトランザクションを無料で送信できるArlocalから始めます。 また、メインネットを使用して実際のトランザクションを送信する方法についても学びます。
ローカルでテストするには、Arlocalを使用して、対話してテストトランザクションを送信できるローカルネットワークを実行できます。
Arlocalを使用するために何かをダウンロードまたはインストールする必要はなく、マシンにNode.jsがインストールされている限り、次のコマンドを実行してローカルゲートウェイを起動するだけです。
NPX arlocal (NPX アーローカル)
それです! これで、http://localhost:1984 でローカルのArweaveゲートウェイが実行されているはずです
ローカルゲートウェイを実行したので、コードを記述しましょう。
src/App.js を開き、次のコードでファイルを更新します。
スタイルを '../styles/Home.module.css'
'react'から { useState } をインポートする
'arweave'からArweaveをインポートします
/ Arweaveノードに接続するか、ゲートウェイを指定 /
const arweave = Arweave.init({})
関数 App() {
const [state, setState] = useState('')
const [transactionId, setTransactionId] = useState('')
非同期関数 createTransaction() {
if (!state) return
{
const formData = 状態
setState('')
/ トランザクションを作成してArweaveに送信する /
let transaction = await arweave.createTransaction({ data: formData })
arweave.transactions.sign(トランザクション)を待つ
let uploader = await arweave.transactions.getUploader(transaction)
/ アップロードインジケーター /
while (!uploader.isComplete) (アップローダー (!uploader.isComplete)) {
uploader.uploadChunk() を待つ
コンソール.log()${uploader.pctComplete}% complete,
${uploader.uploadedChunks}/${uploader.totalChunks}
}
setTransactionId(transaction.id)
} キャッチ (エラー) {
コンソール.log('エラー: ', エラー)
}
}
非同期関数 readFromArweave() {
/ Arweaveデータを読み取る 任意のtrsnsaction ID /
arweave.transactions (英語)
.getData(transactionId, {
デコード:true、
文字列:true、
})
.then((data) => {
コンソール.log('データ: ', データ)
})
}
戻り値 (
<div className={styles.container}>
<button style={button} onClick={createTransaction}>
トランザクションの作成
</button>
<button style={button} onClick={readFromArweave}>
トランザクションの読み取り
</button>
<input style={input} onChange={(e) => setState(e.target.value)} placeholder="text" value={state} />
</div>
)
}
const ボタン = {
outline: 'なし',
border: '1px solid black',
backgroundColor: '白'、
パディング: '10px'、
幅: '200px'、
marginBottom: 10、
カーソル: 'ポインタ',
}
const 入力 = {
backgroundColor: '#ddd'、
outline: 'なし',
border: 'なし'、
幅: '200px'、
fontSize: '16px'、
パディング: '10px'、
}
デフォルトアプリのエクスポート
次に、アプリを起動します。
npmのスタート
アプリが起動すると、2 つのボタンを含む基本的なフォーム入力が表示されます。
保存したいデータをフォームに入力し、[Create Transaction] を押して Arweave にテキストを保存します。
トランザクションが完了すると、データが保存されたことを示す進行状況インジケーターがコンソールにログアウトされます。
データを保存したら、[Read Transaction] をクリックして Arweave からデータを読み取ります。
本番ネットワークと対話するには、Arweaveのネットワーク設定を更新するだけで済みます。
const arweave = Arweave.init({
ホスト: 'arweave.net'、
})
本日構築したプロジェクトのコードベースの例は 、こちらから入手できます。
Arweaveの詳細については、Arweaveの ドキュメント、Arweave Wiki、および Twitterでフォローしてください。
Edge & Node は、活気に満ちた分散型の未来を築くために活動しているクリエイティブなソフトウェア開発会社です。 The Graphの初期チームによって設立されたEdge & Nodeは、分散型インターネット(web3)の進歩と、信頼を最小化したアプリケーションの普及に専念しています。このチームは、オープンソースソフトウェア、ツール、アプリケーションの開発と保守において豊富な経験を持っています。
Edge & Nodeの最初の製品は、イーサリアムやIPFSなどのネットワークを照会するためのインデックス作成プロトコルである The Graphで、オープンデータが常に利用可能でアクセスしやすいことを保証します。 The Graphは、Uniswap、Livepeer、Aave、Decentralandなど、何千ものプロトコルやdappsで使用されています。 また、Edge & Nodeは、仮想通貨コミュニティに継続的な有用性を提供するために、オンチェーンデータの初の分散型レジストリである Everestを立ち上げ、web3への移行を促進しました。