Lompat ke konten utama

IPFS untuk antarmuka pengguna terdesentralisasi

ipfs
dapps
frontend
Pemula
Ori Pomerantz
29 Juni 2024
4 menit baca

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.

  1. Instal antarmuka pengguna IPFS (opens in a new tab).

  2. Buat direktori dengan situs web Anda. Jika Anda menggunakan Vite (opens in a new tab), gunakan perintah ini:

    1pnpm vite build
1
23. Di IPFS Desktop, klik **Import > Folder** dan pilih direktori yang Anda buat pada langkah sebelumnya.
3
44. Pilih folder yang baru saja Anda unggah dan klik **Rename**. Berikan nama yang lebih bermakna.
5
65. Pilih lagi dan klik **Share link**. Salin URL ke papan klip. Tautannya akan mirip dengan `https://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ`.
7
86. Klik **Status**. Perluas tab **Advanced** untuk melihat alamat gateway. Misalnya, pada sistem saya alamatnya adalah `http://127.0.0.1:8080`.
9
107. 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.
11
12## Mengunggah \{#uploading\}
13
14Jadi 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.
15
16Ada 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.
17
18Secara pribadi, saya merasa [4EVERLAND](https://docs.4everland.org/storage/4ever-pin/guides) adalah yang paling mudah digunakan. Berikut adalah petunjuk untuk menggunakannya:
19
201. Buka [dasbor](https://dashboard.4everland.org/overview) dan masuk dengan dompet Anda.
21
222. Di bilah sisi kiri klik **Storage > 4EVER Pin**.
23
243. 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).
25
264. Status awalnya adalah **Queued**. Muat ulang hingga berubah menjadi **Pinned**.
27
285. Klik CID Anda untuk mendapatkan tautan. Anda dapat melihat aplikasi saya [di sini](https://bafybeifqka2odrne5b6l5guthqvbxu4pujko2i6rx2zslvr3qxs6u5o7im.ipfs.dweb.link/).
29
306. 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.
31
32## Menggunakan dari IPFS \{#using-from-ipfs\}
33
34Pada 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).
35
36Setelah 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.
37
38## Kekurangan \{#drawbacks\}
39
40Anda 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.
41
42Selain 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.
43
44## Kesimpulan \{#conclusion\}
45
46Sama 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.
47
48[Lihat di sini untuk karya saya yang lain](https://cryptodocguy.pro/).
Tampilkan semua

Pembaruan terakhir halaman: 3 Maret 2026

Apakah tutorial ini membantu?