用 Arweave 构建 Web3 应用

本文介绍一下如何构建web3应用，目的是让开发者熟悉在不断增长的web3空间开发的协议、工具和最佳实践。Building on web3将关注web3生态系统中的新兴技术和项目，以帮助dapp开发者创造一个成功的秘诀。

在这篇文章中，你将了解什么是Arweave，为什么我认为它很重要，以及你如何能开始用它来构建。这篇文章的重点是文件存储和检索，而不是运行你自己的生产型Arweave网关。

Arweave是一个全球性的、永久性的、去中心化的数据和文件存储层。

对我来说，Arweave的革命性之处在于，我可以存储一次东西，并期望它将永远可用，而不必再支付任何费用，也不必担心它消失。

与传统的中心化存储解决方案相比，如果你某个月忘记支付账单，你就会被删除，或者更糟糕的是，你或其他人不小心把你的数据完全删除了。

这种数据的永久性在web3中特别重要，因为我们正在建立不可改变的应用基础设施。区块链数据在本质上已经是不可变的，但你经常看到开发者仍在以不遵守去中心化或不可变性最佳实践的方式存储链外数据。

例如，在非同质化代币或NFT领域，一些开发者使用中心化托管服务来存储代币元数据。这破坏了不可变性所需的重要安全属性，以及NFT首先代表什么的想法。

如果元数据不是永久性的，就不能保证代币所代表的属性在未来仍然存在。这意味着，如果元数据没有存储在像Arweave这样的永久文件存储协议上，代币的完整性就会受到威胁，这也是为什么这项技术存在的如此重要。

在The Graph生态系统中，我们也在建立对Arweave的支持和整合，因为我们认识到该协议对于建立真正的去中心化的web3应用程序的价值。

关于Arweave

Arweave建立在两种技术上：区块链的衍生品-- blockweave 以及 访问证明。

Blockweave技术支撑着Arweave。像区块链一样，Blockweave是数据块的链接集合，链接到之前写入网络的区块。

在Arweave中用于促进安全、去中心化的数据存储的共识机制被称为访问证明Proof of Access。这种机制比工作证明更有效、更环保，因为矿工不需要存储所有区块。正因为如此，在矿工们仍然能够达成共识的同时，也节省了大量的电力。此外，随着网络的扩大，电力消耗也减少。

开始使用Arweave

有两种方法可以开始使用Arweave代币：

1. 下载一个Arweave钱包

你可以从一个新的钱包开始，通过使用Arweave测试水龙头可以获得一小部分Arweave代币。

一旦验证通过，你应该得到0.02 AR来使用，让你开始在你的应用程序中测试Arweave。

2. 一个浏览器钱包

你可能使用过Metamask或Phantom等浏览器和移动钱包，它们允许你直接从应用程序中与web3应用程序交互。Arweave有一个类似的钱包，叫做Arconnect。

你可以直接将其安装为chrome扩展，并开始与使用Arweave的网络应用进行交互。

安装后，你可以用任何支持的交易所为钱包提供资金，或者你可以导入你在之前创建的钱包。

完成本教程，你将不需要任何代币，但你应该安装Arconnect浏览器钱包。

使用Arweave构建应用

现在，我们对Arweave有了一个概念，并安全的存放了代币，让我们建立一个基本的应用程序。

我们将建立的应用程序将允许我们向Arweave上传和下载一串文本。

这是一个基本的例子，但却是一个很好的"Hello world"应用，因为它通过工具和API让你在很短的时间内开始构建。

我们要做的第一件事是使用create-react-app创建一个新的React应用程序。

npx create-react-app arweave-app

cd arweave-app

有两种主要方式可以从应用程序调用Arweave网络：

1. HTTP API - Arweave协议是基于HTTP的，所以任何现有的http客户端都可以用来与Arweave网络交互，比如Axios或Fetch。
2. Arweave JS - Arweave JS是JavaScript/TypeScript SDK，用于与Arweave网络交互并将数据上传至permaweb。它可以在最新的浏览器和Node JS中工作。

Arweave JS SDK 非常好，我们在本教程中要使用的。

现在让我们使用npm或yarn安装arweave-js。

npm install arweave

Arweave网络

你可以通过几种方式与Arweave网络交互：

在本指南中，我们将从Arlocal开始，它将允许我们免费发送测试交易。我们还将学习如何使用mainnet来发送真正的交易。

Arlocal

要在本地进行测试，我们可以使用Arlocal，它将运行一个本地网络，我们可以与之交互并发送测试交易。

你甚至不需要下载或安装任何东西来使用Arlocal，只要你的机器上安装了Node.js，你就可以通过运行来启动一个本地网关。

npx arlocal

这就是了！你现在应该在http://localhost:1984 上运行一个本地Arweave网关。

让我们来写段代码，打开src/App.js，用以下代码更新该文件：

import styles from '../styles/Home.module.css'
import { useState } from 'react'

import Arweave from 'arweave'

/* connect to an Arweave node or specify a gateway  */
const arweave = Arweave.init({})

function App() {
  const [state, setState] = useState('')
  const [transactionId, setTransactionId] = useState('')

  async function createTransaction() {
    if (!state) return
    try {
      const formData = state
      setState('')
      /* creates and sends transaction to Arweave */
      let transaction = await arweave.createTransaction({ data: formData })
      await arweave.transactions.sign(transaction)
      let uploader = await arweave.transactions.getUploader(transaction)

      /* upload indicator */
      while (!uploader.isComplete) {
        await uploader.uploadChunk()
        console.log(
          `${uploader.pctComplete}% complete, ${uploader.uploadedChunks}/${uploader.totalChunks}`,
        )
      }
      setTransactionId(transaction.id)
    } catch (err) {
      console.log('error: ', err)
    }
  }

  async function readFromArweave() {
    /* read Arweave data using any trsnsaction ID */
    arweave.transactions
      .getData(transactionId, {
        decode: true,
        string: true,
      })
      .then((data) => {
        console.log('data: ', data)
      })
  }

  return (
    <div className={styles.container}>
      <button style={button} onClick={createTransaction}>
        Create Transaction
      </button>

      <button style={button} onClick={readFromArweave}>
        Read Transaction
      </button>

      <input
        style={input}
        onChange={(e) => setState(e.target.value)}
        placeholder="text"
        value={state}
      />
    </div>
  )
}

const button = {
  outline: 'none',
  border: '1px solid black',
  backgroundColor: 'white',
  padding: '10px',
  width: '200px',
  marginBottom: 10,
  cursor: 'pointer',
}

const input = {
  backgroundColor: '#ddd',
  outline: 'none',
  border: 'none',
  width: '200px',
  fontSize: '16px',
  padding: '10px',
}

export default App

接下来，启动该应用程序：

npm start

当应用程序启动时，你应该看到一个带有两个按钮的基本输入表单。

你可以在表格中输入你想保存的数据，然后按创建交易，将文本保存在Arweave中。

一旦交易完成，你应该看到一个进度指示器登录到控制台，表明数据已经被保存。

一旦数据被保存，点击读取交易，从Arweave读取数据。

Arweave生产网络

要与生产网络交互，只需要更新Arweave的网络配置。

const arweave = Arweave.init({
  host: 'arweave.net',
})

本项目的代码

我们今天建立的项目的示例代码库可在这里。

接下来的步骤

要了解更多关于Arweave的信息，请查看Arweave docs、Arweave Wiki，并在[Twitter]上关注他们(https://twitter.com/ArweaveTeam)。

本文作者： Edge & Node

Edge & Node是一家创造性的软件开发公司，致力于建立一个充满活力的、去中心化的未来。Edge & Node 由The Graph背后的初始团队创立，致力于推进去中心化的互联网（web3）和信任最小化的应用程序的普及。该团队在开发和维护开源软件、工具和应用程序方面拥有丰富的经验。

Edge & Node的最初产品是The Graph，这是一个用于查询以太坊和IPFS等网络的索引协议，它确保开放数据始终可用且易于访问。The Graph被成千上万的协议和dapp使用，包括Uniswap、Livepeer、Aave、Decentraland等。Edge & Node还推出了Everest，这是第一个去中心化的链上数据登记处，为加密货币社区提供持续的效用，促进了向web3的转变。

要了解Edge & Node的所有情况，请在Twitter、Linkedin和Instagram关注我们。Edge & Node也在招聘。