0Pricing
Web3 & DApp Development Fundamentals · Lekcja

Przechowywanie zasobów DApp

Naucz się przesyłać i pobierać zasoby frontendu DApp, metadane NFT oraz inne pliki przy użyciu IPFS w celu decentralizacji.

Przechowywanie zasobów DApp to bezpłatna lekcja Web3 & DApp Development Fundamentals na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web3 & DApp Development Fundamentals, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web3 & DApp Development Fundamentals zawiera 3 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

Często zadawane pytania

Czy lekcja „Przechowywanie zasobów DApp” jest bezpłatna?

Tak — pełny tekst „Przechowywanie zasobów DApp” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web3 & DApp Development Fundamentals, przejdź na CoddyKit PRO. Kurs Web3 & DApp Development Fundamentals zawiera 3 lekcji w sumie.

Co nauczysz się w „Przechowywanie zasobów DApp”?

Naucz się przesyłać i pobierać zasoby frontendu DApp, metadane NFT oraz inne pliki przy użyciu IPFS w celu decentralizacji. Ćwiczysz Web3 & DApp Development Fundamentals z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Web3 & DApp Development Fundamentals?

Nie wymagamy żadnego doświadczenia. Web3 & DApp Development Fundamentals w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Przechowywanie zasobów DApp”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Web3 & DApp Development Fundamentals?

Tak. Każda lekcja Web3 & DApp Development Fundamentals zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Wprowadzenie do IPFS
  2. Przechowywanie zasobów DApp
  3. Filecoin i zdecentralizowane przechowywanie
← Powrót do Web3 & DApp Development Fundamentals