Web3 & DApp Development Fundamentals · Lección

Almacenamiento de recursos de DApps

Aprenda a cargar y recuperar recursos del front-end de DApps, metadatos de NFT y otros archivos mediante IPFS para lograr la descentralización.

Lección 2 de 311 pasos

Almacenamiento de recursos de DApps es una lección gratuita de Web3 & DApp Development Fundamentals en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web3 & DApp Development Fundamentals, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web3 & DApp Development Fundamentals incluye 3 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en 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.

Gratis para empezar

Aprende Web3 & DApp Development Fundamentals con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
29
Lecciones
105

Preguntas frecuentes

¿La lección «Almacenamiento de recursos de DApps» es gratis?

Sí — el texto completo de «Almacenamiento de recursos de DApps» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web3 & DApp Development Fundamentals, actualiza a CoddyKit PRO. El curso de Web3 & DApp Development Fundamentals incluye 3 lecciones en total.

¿Qué aprenderé en «Almacenamiento de recursos de DApps»?

Aprenda a cargar y recuperar recursos del front-end de DApps, metadatos de NFT y otros archivos mediante IPFS para lograr la descentralización. Practicas Web3 & DApp Development Fundamentals con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Web3 & DApp Development Fundamentals?

No se requiere experiencia previa. Web3 & DApp Development Fundamentals en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.

¿Cuánto tiempo toma la lección «Almacenamiento de recursos de DApps»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Web3 & DApp Development Fundamentals?

Sí. Cada lección de Web3 & DApp Development Fundamentals incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Introducción a IPFS
  2. Almacenamiento de recursos de DApps
  3. Filecoin y almacenamiento descentralizado
← Volver a Web3 & DApp Development Fundamentals