IPFS untuk antarmuka pengguna terdesentralisasi
Anda telah menulis dapp baru yang luar biasa. Anda bahkan telah menulis antarmuka pengguna untuknya. Namun sekarang Anda khawatir seseorang akan mencoba menyensornya dengan mematikan antarmuka pengguna Anda, yang hanya berupa satu server di cloud. Dalam tutorial ini, Anda akan belajar cara menghindari sensor dengan menempatkan antarmuka pengguna Anda di interplanetary file system (IPFS) (opens in a new tab) sehingga siapa pun yang tertarik akan dapat menyematkannya di server untuk akses di masa mendatang.
Anda dapat menggunakan layanan pihak ketiga seperti Fleek (opens in a new tab) untuk melakukan semua pekerjaan tersebut. Tutorial ini ditujukan bagi orang-orang yang ingin melakukan cukup banyak hal untuk memahami apa yang mereka lakukan meskipun itu membutuhkan lebih banyak pekerjaan.
Memulai secara lokal
Ada beberapa penyedia IPFS pihak ketiga (opens in a new tab), tetapi yang terbaik adalah memulai dengan menjalankan IPFS secara lokal untuk pengujian.
-
Buat direktori dengan situs web Anda. Jika Anda menggunakan Vite (opens in a new tab), gunakan perintah ini:
1pnpm vite build
123. Di IPFS Desktop, klik **Import > Folder** dan pilih direktori yang Anda buat pada langkah sebelumnya.344. Pilih folder yang baru saja Anda unggah dan klik **Rename**. Berikan nama yang lebih bermakna.565. Pilih lagi dan klik **Share link**. Salin URL ke papan klip. Tautannya akan mirip dengan `https://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ`.786. Klik **Status**. Perluas tab **Advanced** untuk melihat alamat gateway. Misalnya, pada sistem saya alamatnya adalah `http://127.0.0.1:8080`.9107. Gabungkan jalur dari langkah tautan dengan alamat gateway untuk menemukan alamat Anda. Misalnya, untuk contoh di atas, URL-nya adalah `http://127.0.0.1:8080/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ`. Buka URL tersebut di browser untuk melihat situs Anda.1112## Mengunggah \{#uploading\}1314Jadi sekarang Anda dapat menggunakan IPFS untuk menyajikan file secara lokal, yang mana tidak terlalu menarik. Langkah selanjutnya adalah membuatnya tersedia untuk dunia saat Anda sedang offline.1516Ada sejumlah [layanan penyematan (pinning)](https://docs.ipfs.tech/concepts/persistence/#pinning-services) yang terkenal. Pilih salah satunya. Layanan mana pun yang Anda gunakan, Anda perlu membuat akun dan memberikannya **pengidentifikasi konten (CID)** di IPFS desktop Anda.1718Secara pribadi, saya merasa [4EVERLAND](https://docs.4everland.org/storage/4ever-pin/guides) adalah yang paling mudah digunakan. Berikut adalah petunjuk untuk menggunakannya:19201. Buka [dasbor](https://dashboard.4everland.org/overview) dan masuk dengan dompet Anda.21222. Di bilah sisi kiri klik **Storage > 4EVER Pin**.23243. Klik **Upload > Selected CID**. Beri nama konten Anda dan berikan CID dari IPFS desktop. Saat ini CID adalah string yang dimulai dengan `Qm` diikuti oleh 44 huruf dan angka yang mewakili hash [yang dienkode base-58](https://medium.com/bootdotdev/base64-vs-base58-encoding-c25553ff4524), seperti `QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ`, tetapi [hal itu kemungkinan akan berubah](https://docs.ipfs.tech/concepts/content-addressing/#version-1-v1).25264. Status awalnya adalah **Queued**. Muat ulang hingga berubah menjadi **Pinned**.27285. Klik CID Anda untuk mendapatkan tautan. Anda dapat melihat aplikasi saya [di sini](https://bafybeifqka2odrne5b6l5guthqvbxu4pujko2i6rx2zslvr3qxs6u5o7im.ipfs.dweb.link/).29306. Anda mungkin perlu mengaktifkan akun Anda agar tetap disematkan selama lebih dari sebulan. Aktivasi akun berbiaya sekitar $1. Jika Anda menutupnya, keluar dan masuk kembali untuk diminta mengaktifkan lagi.3132## Menggunakan dari IPFS \{#using-from-ipfs\}3334Pada titik ini Anda memiliki tautan ke gateway terpusat yang menyajikan konten IPFS Anda. Singkatnya, antarmuka pengguna Anda mungkin sedikit lebih aman tetapi masih belum tahan sensor. Untuk ketahanan sensor yang sesungguhnya, pengguna perlu menggunakan IPFS [secara langsung dari browser](https://docs.ipfs.tech/install/ipfs-companion/#prerequisites).3536Setelah Anda menginstalnya (dan IPFS desktop berfungsi), Anda dapat membuka [/ipfs/`<CID>`](https://any.site/ipfs/bafybeifqka2odrne5b6l5guthqvbxu4pujko2i6rx2zslvr3qxs6u5o7im) di situs mana pun dan Anda akan mendapatkan konten tersebut, yang disajikan secara desentralisasi.3738## Kekurangan \{#drawbacks\}3940Anda tidak dapat menghapus file IPFS secara andal, jadi selama Anda memodifikasi antarmuka pengguna Anda, mungkin yang terbaik adalah membiarkannya terpusat, atau menggunakan [interplanetary name system (IPNS)](https://docs.ipfs.tech/concepts/ipns/#mutability-in-ipfs), sebuah sistem yang menyediakan mutabilitas di atas IPFS. Tentu saja, apa pun yang dapat diubah dapat disensor, dalam kasus IPNS dengan menekan orang yang memiliki kunci pribadi yang sesuai dengannya.4142Selain itu, beberapa paket memiliki masalah dengan IPFS, jadi jika situs web Anda sangat rumit, itu mungkin bukan solusi yang baik. Dan tentu saja, apa pun yang bergantung pada integrasi server tidak dapat didesentralisasi hanya dengan menempatkan sisi klien di IPFS.4344## Kesimpulan \{#conclusion\}4546Sama seperti Ethereum yang memungkinkan Anda mendesentralisasi aspek basis data dan logika bisnis dari dapp Anda, IPFS memungkinkan Anda mendesentralisasi antarmuka pengguna. Hal ini memungkinkan Anda menutup satu lagi vektor serangan terhadap dapp Anda.4748[Lihat di sini untuk karya saya yang lain](https://cryptodocguy.pro/).Tampilkan semuaPembaruan terakhir halaman: 3 Maret 2026