Mulai pengembangan frontend dapp Anda dengan create-eth-app

frontend

JavaScript

ethers.js

the graph

defi

Pemula

Markus Waas

soliditydeveloper.com

27 April 2020

6 menit baca

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 baliknya. Untuk melihat aplikasi Anda, buka http://localhost:3000/. Saat Anda siap untuk menyebarkan 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 repositori 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 adalah 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 pemula seperti Vue (opens in a new tab), 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 spread objek.
CSS dengan awalan otomatis (autoprefixed), sehingga Anda tidak memerlukan -webkit- atau awalan lainnya.
Runner pengujian 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 efek hooks (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 masuk akal untuk paket tambahan yang lebih kecil seperti manajemen alamat/ABI kontrak pintar (informasi tentang di mana Anda menyebarkan 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). Mereka memiliki beberapa keuntungan dibandingkan Restful API, terutama untuk data rantai blok yang terdesentralisasi. Jika Anda tertarik dengan alasan di baliknya, lihat GraphQL Akan Menggerakkan Web Terdesentralisasi (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 aplikasi terdesentralisasi (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 pengambil (fetcher) di dalam kontrak Anda yang mengembalikan beberapa data sekaligus. Namun, ini tidak selalu ideal.

Dan kemudian Anda mungkin juga tertarik dengan data historis. 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, bahkan mungkin sudah ada subgraf. 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 rantai blok 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:

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

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. Penyetor memberikan likuiditas ke pasar untuk mendapatkan penghasilan pasif, sementara peminjam dapat meminjam menggunakan kolateral. Salah satu fitur unik dari Aave adalah pinjaman kilat (opens in a new tab) yang memungkinkan Anda meminjam uang tanpa kolateral apa pun, selama Anda mengembalikan pinjaman tersebut 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 bursa terdesentralisasi (DEX). Penyedia likuiditas dapat memperoleh biaya dengan menyediakan token atau Ether yang diperlukan untuk kedua sisi perdagangan. 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 penyebarannya.