Who is this tutorial for?
If you are new to Arweave and are comfortable with HTML, CSS, and Javascript, this tutorial will guide you through some of the basic Arweave development components to deliver a Permaweb dapp. To learn more about Arweave, get started at https://www.arweave.org/.
I like to think of Arweave as a decentralized application distribution platform.
Before we dive in, let's have a quick discussion about what we are trying to achieve.
View the YouTube tutorial
The entire tutorial and video walkthrough can be accessed here.
Learn on the Permaweb
You can also experience the full tutorial directly on the Permaweb, too! See it here (including videos): https://permanotes.app/#/notes/6szj6CnMhWbVcv05p_el8-r6HjSEqHeYeDslSABIPYU
A geopin application 8pin
8pin allows users to take some text and a photo and document a moment at a specific location. In this tutorial we will step through the process of using many of the Arweave developer tools and libraries to deliver our 8pin application to the Permaweb. See it in action here and give it a go! https://dev.8pin.app
8pin is built using Svelte, Tailwind and NodeJS, so to get the most out of this tutorial you should be familiar with Javascript. The frontend code and styles are already in place, we will walk through the process of integrating the application to the Arweave platform.
Arweave is unique, because it serves as our storage service as well as our application service and is decentralized. So we will use Arweave to read and write data for our application as well as deploy our application's code to Arweave to serve the app via a web browser. This concept at first may take a little time to comprehend. Arweave is made up of nodes and gateways. The nodes manage the storage and blockweave bits, while the gateways manage the Cache, RPC API, and Query features. The gateway is where the magic happens for our decentralized applications. By storing data with metadata tags like 'Content-Type' we can provide information to the gateway servers how to present our data. This allows a web browser to interact directly with our application as if the gateway is a web server.
Why Arweave for web3?
Arweave is a blockweave, which means its like a blockchain, but Arweave supports data of any size for transactions, this is fundamentally different that the current blockchains and creates a unique differentiator between other layer 1 networks. With Arweave you get an entire cloud development and hosting platform in one, Arweave supports web standards, smart contracts and NFTs, and you can use almost any language to leverage these features, if you are a full stack developer and work with technologies like javascript, graphql, APIs, etc. You are more than prepared to develop on the Arweave ecosystem.
Prerequisites
- Git/Github - https://github.com
- NodeJS/npm/Javascript - https://nodejs.com
- JSON/GraphQL - https://graphql.org
- Mapbox account - https://www.mapbox.com/
Create a free mapbox account to take advantage of the mapping and geocoding features. You will need a free developer public API key.
Setup
Fork the following repository: https://github.com/OnlyArweave/8pin-arweave-tutorial#arweave-devtools, then clone it to your local environment, or spin it up in gitpod: https://gitpod.io#[yourforked repo]
Shoutout to Tom Wilson
Tom is the developer and creator of 8Pin in collaboration with @onlyarweave. Be sure and follow Tom @rakis_me and check out his Permaweb project, PermaNotes.app
