Mulai pengembangan frontend dapp Anda dengan create-eth-app

Terakhir kali kita melihat gambaran besar Solidity (opens in a new tab) dan telah menyebutkan create-eth-app (opens in a new tab). Sekarang Anda akan mengetahui cara menggunakannya, fitur apa saja yang terintegrasi, dan ide tambahan tentang cara mengembangkannya. Dimulai oleh Paul Razvan Berg, pendiri Sablier (opens in a new tab), aplikasi ini akan memulai pengembangan frontend Anda dan dilengkapi dengan beberapa integrasi opsional untuk dipilih.

Instalasi

Instalasi ini membutuhkan Yarn 0.25 atau yang lebih baru (npm install yarn --global). Caranya semudah menjalankan:

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

Aplikasi ini menggunakan create-react-app (opens in a new tab) di balik layar. Untuk melihat aplikasi Anda, buka http://localhost:3000/. Saat Anda siap untuk menerapkan ke produksi, buat bundel yang diperkecil dengan yarn build. Salah satu cara mudah untuk meng-host ini adalah Netlify (opens in a new tab). Anda dapat membuat repo GitHub, menambahkannya ke Netlify, mengatur perintah build dan Anda selesai! Aplikasi Anda akan di-host dan dapat digunakan oleh semua orang. Dan semuanya gratis.

Fitur

React & create-react-app

Pertama-tama, jantung dari aplikasi ini: React dan semua fitur tambahan yang menyertai create-react-app. Hanya menggunakan ini saja sudah merupakan pilihan yang bagus jika Anda tidak ingin mengintegrasikan Ethereum. React (opens in a new tab) sendiri membuat pembuatan UI interaktif menjadi sangat mudah. Mungkin tidak seramah Vue (opens in a new tab) bagi pemula, tetapi masih paling banyak digunakan, memiliki lebih banyak fitur, dan yang terpenting ribuan pustaka tambahan untuk dipilih. create-react-app membuatnya sangat mudah untuk memulainya juga dan mencakup:

• Dukungan sintaks React, JSX, ES6, TypeScript, Flow.
• Tambahan bahasa di luar ES6 seperti operator object spread.
• CSS yang diawali secara otomatis (autoprefixed), sehingga Anda tidak memerlukan -webkit- atau awalan lainnya.
• Test runner unit interaktif yang cepat dengan dukungan bawaan untuk pelaporan cakupan.
• Server pengembangan langsung yang memperingatkan tentang kesalahan umum.
• Skrip build untuk membundel JS, CSS, dan gambar untuk produksi, dengan hash dan sourcemap.

create-eth-app secara khusus memanfaatkan hooks effects (opens in a new tab) yang baru. Sebuah metode untuk menulis komponen fungsional yang kuat, namun sangat kecil. Lihat bagian di bawah tentang Apollo untuk mengetahui bagaimana mereka digunakan dalam create-eth-app.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) memungkinkan Anda memiliki beberapa paket, tetapi dapat mengelola semuanya dari folder root dan menginstal dependensi untuk semuanya sekaligus menggunakan yarn install. Ini sangat berguna untuk paket tambahan yang lebih kecil seperti manajemen alamat/ABI kontrak pintar (informasi tentang di mana Anda menerapkan kontrak pintar mana dan bagaimana berkomunikasi dengannya) atau integrasi the graph, keduanya merupakan bagian dari create-eth-app.

ethers.js

Meskipun Web3 (opens in a new tab) masih paling banyak digunakan, ethers.js (opens in a new tab) telah mendapatkan lebih banyak daya tarik sebagai alternatif pada tahun lalu dan merupakan yang terintegrasi ke dalam create-eth-app. Anda dapat bekerja dengan yang satu ini, mengubahnya ke Web3 atau mempertimbangkan untuk meningkatkan ke ethers.js v5 (opens in a new tab) yang hampir keluar dari versi beta.

The Graph

GraphQL (opens in a new tab) adalah cara alternatif untuk menangani data dibandingkan dengan Restful API (opens in a new tab). GraphQL memiliki beberapa keuntungan dibandingkan Restful API, terutama untuk data blockchain yang terdesentralisasi. Jika Anda tertarik dengan alasan di baliknya, lihat GraphQL Will Power the Decentralized Web (opens in a new tab).

Biasanya Anda akan mengambil data dari kontrak pintar Anda secara langsung. Ingin membaca waktu perdagangan terbaru? Cukup panggil MyContract.methods.latestTradeTime().call() yang mengambil data dari node Ethereum ke dalam dapp Anda. Tetapi bagaimana jika Anda membutuhkan ratusan titik data yang berbeda? Itu akan menghasilkan ratusan pengambilan data ke node, setiap kali membutuhkan RTT (opens in a new tab) yang membuat dapp Anda lambat dan tidak efisien. Salah satu solusinya mungkin adalah fungsi panggilan fetcher di dalam kontrak Anda yang mengembalikan beberapa data sekaligus. Namun, ini tidak selalu ideal.

Dan kemudian Anda mungkin tertarik dengan data historis juga. Anda ingin tahu tidak hanya waktu perdagangan terakhir, tetapi waktu untuk semua perdagangan yang pernah Anda lakukan sendiri. Gunakan paket subgraf create-eth-app, baca dokumentasi (opens in a new tab) dan sesuaikan dengan kontrak Anda sendiri. Jika Anda mencari kontrak pintar yang populer, mungkin sudah ada subgrafnya. Lihat penjelajah subgraf (opens in a new tab).

Setelah Anda memiliki subgraf, ini memungkinkan Anda untuk menulis satu kueri sederhana di dapp Anda yang mengambil semua data blockchain penting termasuk data historis yang Anda butuhkan, hanya diperlukan satu pengambilan.

Apollo

Berkat integrasi Apollo Boost (opens in a new tab), Anda dapat dengan mudah mengintegrasikan the graph di dapp React Anda. Terutama saat menggunakan React hooks dan Apollo (opens in a new tab), mengambil data semudah menulis satu kueri GraphQl di komponen Anda:

1const { loading, error, data } = useQuery(myGraphQlQuery)
2
3React.useEffect(() => {
4  if (!loading && !error && data) {
5    console.log({ data })
6  }
7}, [loading, error, data])
Salin

Templat

Selain itu, Anda dapat memilih dari beberapa templat yang berbeda. Sejauh ini Anda dapat menggunakan integrasi Aave, Compound, UniSwap, atau sablier. Semuanya menambahkan alamat kontrak pintar layanan penting bersama dengan integrasi subgraf yang sudah jadi. Cukup tambahkan templat ke perintah pembuatan seperti yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) adalah pasar peminjaman uang terdesentralisasi. Deposan memberikan likuiditas ke pasar untuk mendapatkan penghasilan pasif, sementara peminjam dapat meminjam menggunakan agunan. Salah satu fitur unik Aave adalah pinjaman kilat (flash loans) (opens in a new tab) yang memungkinkan Anda meminjam uang tanpa agunan apa pun, selama Anda mengembalikan pinjaman dalam satu transaksi. Ini dapat berguna misalnya untuk memberi Anda uang tunai ekstra pada perdagangan arbitrase.

Token yang diperdagangkan yang memberi Anda bunga disebut aTokens.

Saat Anda memilih untuk mengintegrasikan Aave dengan create-eth-app, Anda akan mendapatkan integrasi subgraf (opens in a new tab). Aave menggunakan The Graph dan telah menyediakan beberapa subgraf siap pakai di Ropsten (opens in a new tab) dan Mainnet (opens in a new tab) dalam bentuk mentah (opens in a new tab) atau terformat (opens in a new tab).

Compound

Compound (opens in a new tab) mirip dengan Aave. Integrasi ini sudah mencakup Subgraf Compound v2 (opens in a new tab) yang baru. Token yang menghasilkan bunga di sini secara mengejutkan disebut cTokens.

Uniswap

Uniswap (opens in a new tab) adalah pertukaran terdesentralisasi (DEX). Penyedia likuiditas dapat memperoleh biaya dengan menyediakan token atau ether yang diperlukan untuk kedua sisi perdagangan. DEX ini banyak digunakan dan oleh karena itu memiliki salah satu likuiditas tertinggi untuk rentang token yang sangat luas. Anda dapat dengan mudah mengintegrasikannya di dapp Anda untuk, misalnya, memungkinkan pengguna menukar ETH mereka dengan DAI.

Sayangnya, pada saat penulisan ini, integrasi hanya untuk Uniswap v1 dan bukan v2 yang baru saja dirilis (opens in a new tab).

Sablier

Sablier (opens in a new tab) memungkinkan pengguna melakukan streaming pembayaran uang. Alih-alih satu hari gajian, Anda benar-benar mendapatkan uang Anda secara konstan tanpa administrasi lebih lanjut setelah pengaturan awal. Integrasi ini mencakup subgrafnya sendiri (opens in a new tab).

Apa selanjutnya?

Jika Anda memiliki pertanyaan tentang create-eth-app, kunjungi server komunitas Sablier (opens in a new tab), di mana Anda dapat menghubungi pembuat create-eth-app. Sebagai beberapa langkah pertama selanjutnya, Anda mungkin ingin mengintegrasikan kerangka kerja UI seperti Material UI (opens in a new tab), menulis kueri GraphQL untuk data yang benar-benar Anda butuhkan, dan mengatur penerapannya.

Pembaruan terakhir halaman: 29 September 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

Lihat kontributor