Lompat ke konten utama

IPFS untuk antarmuka pengguna terdesentralisasi

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

Anda telah menulis aplikasi terdesentralisasi (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 mempelajari cara menghindari penyensoran dengan menempatkan antarmuka pengguna Anda di interplanetary file system (IPFS) (opens in a new tab) sehingga siapa pun yang tertarik akan dapat menyematkannya (pin) 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:

    pnpm vite build

  3. Di IPFS Desktop, klik Import > Folder dan pilih direktori yang Anda buat pada langkah sebelumnya.

  4. Pilih folder yang baru saja Anda unggah dan klik Rename. Berikan nama yang lebih bermakna.

  5. Pilih lagi dan klik Share link. Salin URL ke papan klip. Tautannya akan mirip dengan https://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ.

  6. Klik Status. Perluas tab Advanced untuk melihat alamat gateway. Misalnya, pada sistem saya alamatnya adalah http://127.0.0.1:8080.

  7. 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 peramban untuk melihat situs Anda.

Mengunggah

Jadi 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 luring (offline).

Ada sejumlah layanan penyematan (pinning) (opens in a new tab) yang terkenal. Pilih salah satunya. Layanan mana pun yang Anda gunakan, Anda perlu membuat akun dan memberikannya pengidentifikasi konten (CID) di IPFS desktop Anda.

Secara pribadi, saya merasa 4EVERLAND (opens in a new tab) adalah yang paling mudah digunakan. Berikut adalah petunjuk untuk menggunakannya:

  1. Telusuri ke dasbor (opens in a new tab) dan masuk dengan dompet Anda.

  2. Di bilah sisi kiri, klik Storage > 4EVER Pin.

  3. 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 (opens in a new tab), seperti QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ, tetapi hal itu kemungkinan akan berubah (opens in a new tab).

  4. Status awalnya adalah Queued. Muat ulang hingga berubah menjadi Pinned.

  5. Klik CID Anda untuk mendapatkan tautan. Anda dapat melihat aplikasi saya di sini (opens in a new tab).

  6. Anda mungkin perlu melakukan aktivasi akun Anda agar tetap disematkan selama lebih dari sebulan. Aktivasi akun berbiaya sekitar $1. Jika Anda menutupnya, keluar dan masuk kembali untuk diminta melakukan aktivasi lagi.

Menggunakan dari IPFS

Pada 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 benar-benar tahan sensor, pengguna perlu menggunakan IPFS secara langsung dari peramban (opens in a new tab).

Setelah Anda menginstalnya (dan IPFS desktop berfungsi), Anda dapat membuka /ipfs/<CID> (opens in a new tab) di situs mana pun dan Anda akan mendapatkan konten tersebut, yang disajikan secara terdesentralisasi.

Kekurangan

Anda 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) (opens in a new tab), sebuah sistem yang menyediakan mutabilitas di atas IPFS. Tentu saja, apa pun yang dapat diubah (mutable) dapat disensor, dalam kasus IPNS dengan menekan orang yang memiliki kunci privat yang sesuai dengannya.

Selain 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.

Keterlihatan melalui ENS

Jika Anda mengarahkan nama ENS (seperti vitalik.eth) ke situs web Anda, itu akan dianggap sebagai halaman web yang sepenuhnya terdesentralisasi dan akan secara otomatis disematkan oleh layanan dweb3.wtf (opens in a new tab), serta dapat dicari melalui mesin pencari web3compass.net (opens in a new tab), seperti halnya DuckDuckGo, Brave Search, atau Google untuk web tradisional.

Kesimpulan

Sama seperti Ethereum yang memungkinkan Anda mendesentralisasi aspek basis data dan logika bisnis dari aplikasi terdesentralisasi (dapp) Anda, IPFS memungkinkan Anda mendesentralisasi antarmuka pengguna. Hal ini memungkinkan Anda menutup satu lagi vektor serangan terhadap dapp Anda.

Lihat di sini untuk karya saya yang lain (opens in a new tab).