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 (terbuka di tab baru) dan telah menyebutkan create-eth-app (terbuka di tab baru). Sekarang Anda akan mengetahui cara menggunakannya, fitur apa saja yang terintegrasi, dan ide tambahan tentang cara mengembangkannya. Dimulai oleh Paul Razvan Berg, pendiri Sablier (terbuka di tab baru), 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 (terbuka di tab baru) 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 (terbuka di tab baru). 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 (terbuka di tab baru) sendiri membuat pembuatan UI interaktif menjadi sangat mudah. Mungkin tidak seramah pemula seperti Vue (terbuka di tab baru), 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 (terbuka di tab baru) 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 (terbuka di tab baru) 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 (terbuka di tab baru) masih paling banyak digunakan, Ethers.js (terbuka di tab baru) 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 (terbuka di tab baru) yang hampir keluar dari versi beta.

The Graph

GraphQL (terbuka di tab baru) adalah cara alternatif untuk menangani data dibandingkan dengan Restful API (terbuka di tab baru). 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 (terbuka di tab baru).

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 (terbuka di tab baru) 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 (terbuka di tab baru) dan sesuaikan dengan kontrak Anda sendiri. Jika Anda mencari kontrak pintar yang populer, bahkan mungkin sudah ada subgraf. Lihat penjelajah subgraf (terbuka di tab baru).

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 (terbuka di tab baru), Anda dapat dengan mudah mengintegrasikan The Graph di dapp React Anda. Terutama saat menggunakan React hooks dan Apollo (terbuka di tab baru), 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 (terbuka di tab baru) 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 (terbuka di tab baru) 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 (terbuka di tab baru). Aave menggunakan The Graph dan telah menyediakan beberapa subgraf siap pakai di Ropsten (terbuka di tab baru) dan Mainnet (terbuka di tab baru) dalam bentuk mentah (terbuka di tab baru) atau terformat (terbuka di tab baru).

Compound

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

Uniswap

Uniswap (terbuka di tab baru) 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 (terbuka di tab baru).

Sablier

Sablier (terbuka di tab baru) 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 (terbuka di tab baru).

Apa selanjutnya?

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