Web3 es un territorio fascinante e inexplorado. Hace poco decidí aprender algunas cosas sobre ello. Aunque tenía algunas ideas básicas sobre blockchain y NFT, nunca intenté escribir un programa para Web3.
Así que decidí aprender sobre esta tecnología y escribir un programa simple que pudiera cargar archivos a la red IPFS.
¿Qué es IPFS?
Antes de comenzar, si no sabes qué es IPFS, IPFS significa InterPlanetary File System. Es un protocolo para guardar archivos en una red descentralizada de computadoras. Si cargas un archivo en Google Drive, cargas el mismo en un servidor propiedad de Google, y ya que el servidor pertenece a Google, es un almacenamiento centralizado.
Sin embargo, a diferencia de Google Drive, el protocolo IPFS almacena archivos en computadoras de todo el mundo. No hay un propietario único para la red o las computadoras que almacenan los datos, por lo tanto, es descentralizado. Es algo similar al protocolo BitTorrent utilizado para compartir archivos.
Sin embargo, a diferencia de Google Drive, los datos que cargas en IPFS no son privados. Por lo tanto, no debes cargar ni almacenar datos confidenciales en la red IPFS. Además, una vez que cargas datos en la red, permanecen allí para siempre y no puedes editar ni borrar tus datos. Si deseas editarlos, debes volver a cargar una copia modificada y usarla en su lugar.
Debido a esta naturaleza, la red IPFS también se utiliza para guardar imágenes NFT.
Ahora que tienes una idea básica sobre el protocolo IPFS, intentemos escribir un programa usando NodeJs para cargar un archivo a través de la red IPFS. Deberás tener algunos conocimientos básicos de JavaScript para comprender el código. Y necesitarás un editor de texto como VSCode.
Crear un nuevo proyecto de NodeJs
Cree un nuevo proyecto de NodeJs ejecutando:
npm init -y
Tendrás un nuevo proyecto en tu computadora local.
Instala las dependencias:
npm install nft.storage node-fetch notenv
Obten una clave API de NFT.storage
NFT.storage es un servicio (gateway IPFS) que facilita la carga y el envío de archivos a través de la red IPFS, por medio de su API, ya que la misma hará el trabajo pesado.
También puedes usar la biblioteca ipfs-js para cargar y enviar archivos a través del protocolo.
Puedes registrarte fácilmente en nft.storage usando tu cuenta de GitHub y obtener una clave de API.
Guarda la clave API que obtuviste de nft.storage en un archivo .env.
Cargando tu archivo en el IPFS
He almacenado un archivo png simple como test.png en la carpeta del proyecto que subiremos a la red IPFS.
Estamos utilizando el siguiente código para cargar el archivo en la red IPFS. Es simple y se explica por sí mismo:
import { NFTStorage, File } from "nft.storage";
import fs from "fs";
import dotenv from "dotenv";
import fetch from "node-fetch";
dotenv.config();
const { NFT_STORE_API_KEY } = process.env;
const storeAsset = async () => {
const client = new NFTStorage({ token: NFT_STORE_API_KEY });
const metaData = await client.store({
name: "Example NFT",
description: "Testing IPFS network",
image: new File([await fs.promises.readFile("test.png")], "test.png", {
type: "image/png",
}),
});
return metaData.url;
};
Además de la imagen, también podemos subir algunos metadatos en formato JSON asociados al archivo que subimos a la red IPFS. En el ejemplo, estamos agregando un nombre y una descripción como metadatos. El enlace al archivo de imagen estará en la propiedad de metadatos de la imagen.
La función devolverá la URL ipfs de su archivo metadata.json cargado. El archivo metadata.json contiene toda la información sobre el archivo que acaba de cargar en la red IPFS (nombre, descripción, imagen, etc.).
La propiedad de imagen del json tendrá el enlace al archivo de imagen que acaba de cargar.
ipfs://bafyreice4ib5is4zjv3kugad5rzlvgsojuq767qbys6ppwy5itys3gi2ze/metadata.json
Genial, has subido con éxito un archivo a la red IPFS. Pronto, estará en el almacenamiento de otra persona para siempre.
Abrir un archivo IPFS desde el navegador
A diferencia de una URL normal, no puedes abrir directamente una URL ipfs desde tu navegador. Deberás utilizar una puerta de enlace, como la puerta de enlace IPFS de CloudFlare o ipfs.io.
Debes reemplazar el protocolo de tu enlace IPFS (ipfs://) con https://ips.io o https://clourflare-ipfs.com y podrás leer el contenido del archivo de metadatos.
El siguiente código reemplazará el protocolo ipfs:// de tu URL IPFS con uno al que se puede acceder a través de la puerta de enlace IPFS de CloudFlare.
const ipfsToHttp = (url) => {
return url.replace("ipfs://", "https://cloudflare-ipfs.com/ipfs/");
};
Si lees el archivo metadata.json, la propiedad de imagen del mismo, contendrá el enlace al archivo de imagen que acabas de cargar.
Podemos usar fetch para recuperar el archivo metadata.json:
const getMetaData = async (url) => {
const metaData = fetch(url)
.then((response) => response.json())
.then((data) => {
return data;
});
return metaData;
};
La salida sería así:
{
"name":"Example NFT",
"description":"Testing storing",
"image":"ipfs://bafybeid5klxzkhkc2qe36s2tqu5anysou3y5fpet2ovfihtr2l76hrnybu/test.jpeg"
}
Ahora todo lo que necesitas hacer es convertir el enlace IPFS de propiedad de la imagen, en un enlace de protocolo http a través de la puerta de enlace IPFS de CloudFlare y podrás acceder a tu archivo de imagen que acaba de cargar en la red IPFS.
https://cloudflare-ipfs.com/ipfs/bafybeid5klxzkhkc2qe36s2tqu5anysou3y5fpet2ovfihtr2l76hrnybu/test.jpeg
Puedes encontrar el código completo en el repositorio de GitHub.
Este artículo fue escrito por RUKSHAN y traducido por Juan José Gouvêa. El original se puede leer aquí.
Discussion (0)