Saltar al contenido principal

IPFS para interfaces de usuario descentralizadas

ipfs
dapps
frontend
Principiante
Ori Pomerantz
29 de junio de 2024
5 minutos de lectura

Escribiste una nueva e increíble aplicación descentralizada (dapp). Incluso has escrito una interfaz de usuario para ella. Pero ahora temes que alguien intente censurarla derribando tu interfaz de usuario, que no es más que un servidor en la nube. En este tutorial aprenderás cómo evitar la censura subiendo tu interfaz de usuario al sistema de archivos interplanetario (IPFS) (opens in a new tab) para que cualquier persona interesada pueda fijarla en un servidor para acceder a ella en el futuro.

Podrías usar un servicio de terceros como Fleek (opens in a new tab) para que haga todo el trabajo. Este tutorial es para personas que quieren hacer lo suficiente para entender lo que están haciendo, incluso si supone más trabajo.

Empezando a nivel local

Existen múltiples proveedores de IPFS de terceros (opens in a new tab), pero es mejor empezar ejecutando IPFS localmente para hacer pruebas.

  1. Instala la interfaz de usuario de IPFS (opens in a new tab).

  2. Crea un directorio con tu sitio web. Si estás usando Vite (opens in a new tab), usa este comando:

    pnpm vite build

  3. En IPFS Desktop, haz clic en Import > Folder (Importar > Carpeta) y selecciona el directorio que creaste en el paso anterior.

  4. Selecciona la carpeta que acabas de subir y haz clic en Rename (Renombrar). Dale un nombre más descriptivo.

  5. Selecciónala de nuevo y haz clic en Share link (Compartir enlace). Copia la URL al portapapeles. El enlace será similar a https://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ.

  6. Haz clic en Status (Estado). Expande la pestaña Advanced (Avanzado) para ver la dirección de la puerta de enlace. Por ejemplo, en mi sistema la dirección es http://127.0.0.1:8080.

  7. Combina la ruta del paso del enlace con la dirección de la puerta de enlace para encontrar tu dirección. Por ejemplo, para el caso anterior, la URL es http://127.0.0.1:8080/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ. Abre esa URL en un navegador para ver tu sitio.

Subiendo los archivos

Así que ahora puedes usar IPFS para servir archivos localmente, lo cual no es muy emocionante. El siguiente paso es hacer que estén disponibles para todo el mundo cuando estés desconectado.

Hay varios servicios de fijación (pinning) (opens in a new tab) muy conocidos. Elige uno de ellos. Sea cual sea el servicio que utilices, tendrás que crear una cuenta y proporcionarle el identificador de contenido (CID) en tu IPFS Desktop.

Personalmente, me pareció que 4EVERLAND (opens in a new tab) es el más fácil de usar. Aquí tienes las instrucciones para hacerlo:

  1. Ve al panel de control (opens in a new tab) e inicia sesión con tu billetera.

  2. En la barra lateral izquierda, haz clic en Storage > 4EVER Pin.

  3. Haz clic en Upload > Selected CID. Dale un nombre a tu contenido y proporciona el CID de IPFS Desktop. En la actualidad, un CID es una cadena que comienza con Qm seguida de 44 letras y dígitos que representan un hash codificado en base-58 (opens in a new tab), como QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ, pero es probable que esto cambie (opens in a new tab).

  4. El estado inicial es Queued (En cola). Recarga la página hasta que cambie a Pinned (Fijado).

  5. Haz clic en tu CID para obtener el enlace. Puedes ver mi aplicación aquí (opens in a new tab).

  6. Es posible que necesites activar tu cuenta para mantenerlo fijado durante más de un mes. La activación de la cuenta cuesta alrededor de 1 $. Si la cerraste, cierra sesión y vuelve a entrar para que se te pida activarla de nuevo.

Uso desde IPFS

Llegados a este punto, tienes un enlace a una puerta de enlace centralizada que sirve tu contenido de IPFS. En resumen, tu interfaz de usuario puede ser un poco más segura, pero todavía no es resistente a la censura. Para lograr una verdadera resistencia a la censura, los usuarios deben usar IPFS directamente desde un navegador (opens in a new tab).

Una vez que lo tengas instalado (y el IPFS de escritorio funcionando), puedes ir a /ipfs/<CID> (opens in a new tab) en cualquier sitio y obtendrás ese contenido, servido de manera descentralizada.

Inconvenientes

No puedes eliminar archivos de IPFS de forma fiable, por lo que mientras estés modificando tu interfaz de usuario, probablemente sea mejor dejarla centralizada o usar el sistema de nombres interplanetario (IPNS) (opens in a new tab), un sistema que proporciona mutabilidad sobre IPFS. Por supuesto, cualquier cosa que sea mutable puede ser censurada, en el caso de IPNS presionando a la persona que posee la clave privada a la que corresponde.

Además, algunos paquetes tienen problemas con IPFS, por lo que si tu sitio web es muy complicado, puede que no sea una buena solución. Y, por supuesto, cualquier cosa que dependa de la integración con un servidor no puede descentralizarse simplemente teniendo el lado del cliente en IPFS.

Descubrimiento a través de ENS

Si apuntas un nombre de ENS (como vitalik.eth) a tu sitio web, se considerará una página web totalmente descentralizada y será fijada automáticamente por el servicio dweb3.wtf (opens in a new tab), además de poder buscarse a través del motor de búsqueda web3compass.net (opens in a new tab), de forma muy parecida a como lo hacen DuckDuckGo, Brave Search o Google para la web tradicional.

Conclusión

Al igual que Ethereum te permite descentralizar los aspectos de la base de datos y la lógica de negocio de tu aplicación descentralizada (dapp), IPFS te permite descentralizar la interfaz de usuario. Esto te permite cerrar un vector de ataque más contra tu dapp.

Mira aquí para ver más de mi trabajo (opens in a new tab).