Web3 & DApp Development Fundamentals · Aula

Armazenamento de Ativos de DApps

Aprenda a enviar e recuperar ativos de front-end de DApps, metadados de NFTs e outros arquivos usando IPFS para obter descentralização.

Aula 2 de 311 etapas

Armazenamento de Ativos de DApps é uma aula grátis de Web3 & DApp Development Fundamentals no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web3 & DApp Development Fundamentals, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web3 & DApp Development Fundamentals inclui 3 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Why Decentralize DApp Assets?

Traditional web applications host their front-ends (like HTML, CSS, and JavaScript files) on centralized servers. This means if that server goes down or is censored, the application becomes inaccessible.

Decentralized Applications (DApps) aim for full decentralization, but if your smart contract is on a blockchain while your user interface (UI) is on a single cloud server, is it truly decentralized? This lesson explores how IPFS helps.

Hosting Your DApp's UI on IPFS

IPFS provides a robust solution for hosting your entire DApp front-end. This includes all your static files: HTML pages, CSS stylesheets, JavaScript code, and images.

  • Once uploaded, the entire DApp content (or individual files) receives a unique Content Identifier (CID).
  • Users can then access your DApp directly via an IPFS gateway URL, making it highly censorship-resistant and always available, as long as it's pinned on the network.

CIDs: Content's Digital Fingerprint

As you learned in the previous lesson, IPFS uses Content Identifiers (CIDs) instead of location-based addresses.

  • A CID is a cryptographic hash of the content itself. This means if even a single byte of the content changes, its CID will also change.
  • This content addressing ensures data integrity and immutability. You can always verify that you are accessing the exact file you expect, free from tampering.

Uploading Assets to IPFS

To place your files onto the IPFS network, you typically use the IPFS command-line interface (CLI) or a client library in your code.

The ipfs add command is commonly used. It takes a file or a directory and returns its unique CID.

For example, to upload a folder containing your DApp's front-end:

ipfs add my_dapp_folder/

This command would process your folder and output a CID that represents its entire content.

Ensuring Data Stays Available (Pinning)

When you use ipfs add, your content is initially stored only on your local IPFS node. For others to reliably access it, that content needs to be "pinned."

  • Pinning is the process of telling an IPFS node to keep a copy of specific content indefinitely, preventing it from being garbage collected.
  • You can pin content to your own IPFS node, or more commonly for DApps, use a third-party "pinning service."
  • Pinning services provide dedicated infrastructure to host your content, ensuring high availability and uptime for your DApp's assets.

Decentralizing NFT Metadata

Non-Fungible Tokens (NFTs) often represent unique digital assets like images, videos, or audio. The NFT smart contract itself doesn't store the asset directly.

Instead, the smart contract typically stores a URI (Uniform Resource Identifier) that points to the asset's metadata. Storing this metadata (and often the asset itself) on IPFS is crucial:

  • It prevents the metadata from being altered or disappearing if a centralized server hosting it goes offline.
  • It ensures the NFT's value is tied to a persistent, verifiable piece of data.

Anatomy of NFT Metadata (JSON)

NFT metadata is typically a JSON (JavaScript Object Notation) file that provides descriptive information about the digital asset.

It usually includes details such as the asset's name, description, and a link to the actual media file (which is often also stored on IPFS).

Here's a common example structure:

{
  "name": "My Awesome NFT",
  "description": "A unique digital collectible.",
  "image": "ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26h7y3g7o...",
  "attributes": [
    { "trait_type": "Background", "value": "Blue" }
  ]
}

The image field, for instance, uses an ipfs:// URI scheme to point directly to the asset's CID on IPFS.

How Users Access IPFS Content

Most end-users don't run their own IPFS nodes. So, how do they access content stored on IPFS?

  • They access it through "IPFS Gateways."
  • An IPFS gateway is a regular web server that acts as a bridge. It fetches content from the IPFS network on demand and serves it over standard HTTP to web browsers.
  • Popular public gateways include https://cloudflare-ipfs.com/ipfs/<your-CID> or https://ipfs.io/ipfs/<your-CID>.

DApps Retrieving IPFS Data

Your DApp's front-end code (typically written in JavaScript) can easily retrieve content from IPFS using CIDs and gateways.

  • The DApp constructs a standard web URL using the IPFS gateway address and the content's CID.
  • It then uses standard web requests (like the JavaScript fetch API) to retrieve the content, just like any other web resource.

Here's a conceptual JavaScript example:

const cid = "bafybeigdyrzt5sfp7udm7hu...";
const gatewayUrl = `https://ipfs.io/ipfs/${cid}`;

fetch(gatewayUrl)
  .then(response => response.json())
  .then(data => console.log("NFT Metadata:", data))
  .catch(error => console.error("Error fetching data:", error));

IPFS Storage Check

When building a DApp, why is it beneficial to store your front-end assets (like HTML, CSS, JavaScript) and NFT metadata on IPFS instead of a traditional centralized web server?

Recap: Storing DApp Assets

You've successfully learned how IPFS provides a decentralized and robust way to store critical DApp components, including front-end assets and NFT metadata.

  • We covered the practical aspects of uploading files using ipfs add and the crucial role of pinning services for content persistence.
  • You now understand how CIDs ensure immutability and how IPFS gateways enable users to access this decentralized content via standard web browsers.
  • This knowledge is fundamental to building DApps that are resilient, censorship-resistant, and truly decentralized.

Next, we'll explore Filecoin, which builds upon IPFS to offer an incentivized and verifiable layer for long-term, persistent storage solutions.

Grátis para começar

Aprenda Web3 & DApp Development Fundamentals com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
29
Aulas
105

Perguntas Frequentes

A aula “Armazenamento de Ativos de DApps” é grátis?

Sim — o texto completo de “Armazenamento de Ativos de DApps” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web3 & DApp Development Fundamentals, atualize para CoddyKit PRO. O curso de Web3 & DApp Development Fundamentals inclui 3 aulas no total.

O que vou aprender em “Armazenamento de Ativos de DApps”?

Aprenda a enviar e recuperar ativos de front-end de DApps, metadados de NFTs e outros arquivos usando IPFS para obter descentralização. Você pratica Web3 & DApp Development Fundamentals com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Web3 & DApp Development Fundamentals?

Nenhuma experiência prévia é necessária. Web3 & DApp Development Fundamentals no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.

Quanto tempo leva a aula “Armazenamento de Ativos de DApps”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Web3 & DApp Development Fundamentals?

Sim. Cada aula de Web3 & DApp Development Fundamentals inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Introdução ao IPFS
  2. Armazenamento de Ativos de DApps
  3. Filecoin e Armazenamento Descentralizado
← Voltar para Web3 & DApp Development Fundamentals