--- title: "IPFS для децентралізованих інтерфейсів користувача" description: "Цей посібник навчає читача, як використовувати IPFS для зберігання інтерфейсу користувача для децентралізованого застосунку (dapp). Хоча дані та бізнес-логіка застосунку є децентралізованими, без цензуростійкого інтерфейсу користувачі все одно можуть втратити до нього доступ." author: "Орі Померанц" tags: - ipfs - dapps - фронтенд skill: beginner breadcrumb: "IPFS для інтерфейсів dapp" lang: uk published: 2024-06-29 --- Ви написали неймовірний новий децентралізований застосунок (dapp). Ви навіть написали для нього [інтерфейс користувача](/developers/tutorials/creating-a-wagmi-ui-for-your-contract/). Але тепер ви боїтеся, що хтось спробує піддати його цензурі, вимкнувши ваш інтерфейс користувача, який знаходиться лише на одному сервері у хмарі. У цьому посібнику ви дізнаєтеся, як уникнути цензури, розмістивши свій інтерфейс користувача в **[міжпланетній файловій системі (IPFS)](https://ipfs.tech/developers/)**, щоб будь-хто зацікавлений міг закріпити його на сервері для майбутнього доступу. Ви можете скористатися стороннім сервісом, таким як [Fleek](https://resources.fleek.xyz/docs/), щоб він виконав усю роботу. Цей посібник призначений для тих, хто хоче зробити достатньо, щоб зрозуміти, що саме вони роблять, навіть якщо це вимагає більше зусиль. ## Початок роботи локально {#getting-started-locally} Існує багато [сторонніх провайдерів IPFS](https://docs.ipfs.tech/how-to/work-with-pinning-services/#use-a-third-party-pinning-service), але для тестування найкраще почати з локального запуску IPFS. 1. Встановіть [інтерфейс користувача IPFS](https://docs.ipfs.tech/install/ipfs-desktop/#install-instructions). 2. Створіть каталог із вашим вебсайтом. Якщо ви використовуєте [Vite](https://vite.dev/), скористайтеся цією командою: ```sh pnpm vite build ``` 3. У IPFS Desktop натисніть **Import > Folder** і виберіть каталог, створений на попередньому кроці. 4. Виберіть щойно завантажену папку та натисніть **Rename**. Дайте їй більш зрозумілу назву. 5. Виберіть її знову та натисніть **Share link**. Скопіюйте URL-адресу в буфер обміну. Посилання буде схожим на `https://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ`. 6. Натисніть **Status**. Розгорніть вкладку **Advanced**, щоб побачити адресу шлюзу. Наприклад, у моїй системі ця адреса — `http://127.0.0.1:8080`. 7. Об'єднайте шлях із кроку з посиланням та адресу шлюзу, щоб отримати вашу адресу. Наприклад, для наведеного вище прикладу URL-адреса буде `http://127.0.0.1:8080/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ`. Відкрийте цю URL-адресу в браузері, щоб побачити свій сайт. ## Завантаження {#uploading} Отже, тепер ви можете використовувати IPFS для локальної роздачі файлів, що не дуже захоплює. Наступний крок — зробити їх доступними для всього світу, коли ви перебуваєте офлайн. Існує низка відомих [сервісів закріплення (pinning services)](https://docs.ipfs.tech/concepts/persistence/#pinning-services). Виберіть один із них. Який би сервіс ви не використовували, вам потрібно створити акаунт і надати йому **ідентифікатор контенту (CID)** з вашого IPFS Desktop. Особисто мені [4EVERLAND](https://docs.4everland.org/storage/4ever-pin/guides) здався найпростішим у використанні. Ось інструкції для нього: 1. Перейдіть до [панелі керування](https://dashboard.4everland.org/overview) та увійдіть за допомогою свого гаманця. 2. На лівій бічній панелі натисніть **Storage > 4EVER Pin**. 3. Натисніть **Upload > Selected CID**. Дайте своєму контенту назву та вкажіть CID з IPFS Desktop. Наразі CID — це рядок, який починається з `Qm`, за яким ідуть 44 літери та цифри, що представляють хеш, [закодований у base-58](https://medium.com/bootdotdev/base64-vs-base58-encoding-c25553ff4524), наприклад `QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ`, але [це, ймовірно, зміниться](https://docs.ipfs.tech/concepts/content-addressing/#version-1-v1). 4. Початковий статус — **Queued** (У черзі). Оновлюйте сторінку, доки він не зміниться на **Pinned** (Закріплено). 5. Натисніть на свій CID, щоб отримати посилання. Ви можете переглянути мій застосунок [тут](https://bafybeifqka2odrne5b6l5guthqvbxu4pujko2i6rx2zslvr3qxs6u5o7im.ipfs.dweb.link/). 6. Можливо, вам знадобиться активація акаунта, щоб закріпити його більш ніж на місяць. Активація акаунта коштує близько 1 долара. Якщо ви закрили вікно, вийдіть із системи та увійдіть знову, щоб отримати запит на активацію ще раз. ## Використання з IPFS {#using-from-ipfs} На цьому етапі ви маєте посилання на централізований шлюз, який обслуговує ваш контент в IPFS. Коротше кажучи, ваш інтерфейс користувача може бути трохи безпечнішим, але він усе ще не є цензуростійким. Для справжньої цензуростійкості користувачам потрібно використовувати IPFS [безпосередньо з браузера](https://docs.ipfs.tech/install/ipfs-companion/#prerequisites). Після того, як ви його встановите (і запрацює десктопний IPFS), ви зможете перейти за адресою [/ipfs/``](https://any.site/ipfs/bafybeifqka2odrne5b6l5guthqvbxu4pujko2i6rx2zslvr3qxs6u5o7im) на будь-якому сайті та отримаєте цей контент, який надається децентралізовано. ## Недоліки {#drawbacks} Ви не можете надійно видаляти файли з IPFS, тому поки ви змінюєте свій інтерфейс користувача, ймовірно, краще або залишити його централізованим, або використовувати [міжпланетну систему імен (IPNS)](https://docs.ipfs.tech/concepts/ipns/#mutability-in-ipfs) — систему, яка забезпечує змінюваність поверх IPFS. Звісно, усе, що можна змінити, може бути піддано цензурі; у випадку з IPNS — шляхом тиску на особу, яка володіє відповідним приватним ключем. Крім того, деякі пакети мають проблеми з IPFS, тому якщо ваш вебсайт дуже складний, це може бути не найкращим рішенням. І, звичайно, будь-що, що покладається на серверну інтеграцію, не може бути децентралізованим лише завдяки розміщенню клієнтської частини в IPFS. ## Виявлення через ENS {#discoverability} Якщо ви спрямуєте ім'я ENS (наприклад, vitalik.eth) на свій вебсайт, він вважатиметься повністю децентралізованою вебсторінкою і буде автоматично закріплений сервісом [dweb3.wtf](https://dweb3.wtf), а також стане доступним для пошуку через пошукову систему [web3compass.net](https://web3compass.net), подібно до того, як це роблять DuckDuckGo, Brave Search або Google для традиційного інтернету. ## Висновок {#conclusion} Так само, як Етеріум дозволяє вам децентралізувати базу даних та бізнес-логіку вашого dapp, IPFS дозволяє децентралізувати інтерфейс користувача. Це дає змогу перекрити ще один вектор атаки на ваш dapp. [Більше моїх робіт можна знайти тут](https://cryptodocguy.pro/).