Mulai pengembangan frontend dapp Anda dengan create-eth-app

Sebelumnya, kita membahas tentang gambaran besar Solidity(opens in a new tab) dan telah menyebutkan create-eth-app(opens in a new tab). Sekarang Anda akan melihat cara menggunakannya, fitur apa saja yang terintegrasi di dalamnya, dan ide tambahan untuk memperluas penggunaanya. Dimulai oleh Paul Razvan Berg, pendiri Sablier(opens in a new tab), aplikasi ini akan memulai pengembangan frontend Anda dan memiliki beberapa integrasi opsional yang dapat dipilih.

Instalasi

Instalasi membutuhkan versi Yarn 0.25 atau yang lebih tinggi (npm install yarn --global). Ini hanya tinggal dijalankan:

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

Ini menggunakan create-react-app(opens in a new tab) yang di bawah hood. Untuk melihat aplikasi Anda, buka http://localhost:3000/. Bila sudah siap untuk digunakan ke produksi, buat paket yang diperkecil dengan yarn build. Salah cara mudah untuk menghostingnya adalah dengan menggunakan Netlify(opens in a new tab). You can create a GitHub repo, add it to Netlify, setup the build command and you are finished! Aplikasi Anda akan di-host dan dapat digunakan oleh semua orang. Dan semua ini tidak berbayar.

Fitur

React dan create-react-app

Pertama-tama, inti aplikasinya: React dan semua fitur tambahannya dilengkapi dengan create-react-app. Hanya menggunakan ini adalah opsi yang sangat baik jika Anda tidak ingin mengintegrasikan Ethereum. React(opens in a new tab) sendiri membuat penyusunan UI interaktif menjadi sangat mudah. Ini mungkin tidak seramah Vue(opens in a new tab) bagi pemula, tapi masih yang paling sering digunakan, memiliki lebih banyak fitur, dan yang paling penting ribuan pustaka tambahan yang dapat dipilih. create-react-app membuat sangat mudah untuk memulai dan mencakup:

• Dukungan sintaksis React, JSX, ES6, TypeScript, Flow.
• Tambahan bahasa di luar ES6 seperti operator penyebaran objek.
• CSS dengan prefiks otomatis, sehingga Anda tidak memerlukan -webkit- atau prefiks lainnya.
• Pengeksekusi tes unit interaktif cepat dengan dukungan bawaan untuk pelaporan cakupan.
• Server pengembangan langsung yang memperingatkan tentang kesalahan-kesalahan umum.
• Sebuah skrip build untuk membuat bundle JS, CSS, dan gambar untuk produksi, dengan hash dan peta sumber.

create-eth-app secara khusus memanfaatkan efek kaitan(opens in a new tab) yang baru. Sebuah metode untuk menulis apa yang dinamakan komponen fungsional yang efektif, tapi berukuran kecil. Lihat bagian tentang Apollo di bawah untuk mengetahui cara pemakaiannya di create-eth-app.

Ruang Kerja Yarn

Ruang Kerja Yarn(opens in a new tab) memungkinkan Anda memiliki beberapa paket, tetapi mampu mengelola semuanya dari folder akar dan menginstal dependensinya sekaligus dengan menggunakan yarn install. Ini masuk akal terutama untuk paket tambahan yang lebih kecil seperti alamat kontrak pintar/manajemen ABI (informasi tentang di mana Anda menggunakan kontrak pintar tertentu dan bagaimanan cara berkomunikasi dengannya) atau integrasi grafik, keduanya merupakan bagian dari create-eth-app.

ethers.js

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

The Graph

GraphQL(opens in a new tab) adalah sebuah cara alternatif untuk menangani data yang dibandingkan dengan sebuah API Restful(opens in a new tab). The Graph memiliki beberapa keunggulan dibandingkan Api Restful, khususnya untuk data blockchain terdesentralisasi. Jika Anda tertarik dengan pemikiran di balik ini, silakan lihat GraphQL Akan Mendukung 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 mengambilkan data dari node Ethereum seperti Infura ke dalam Dapp Anda. Tetapi bagaimana jika Anda membutuhkan ratusan titik data yang berbeda? Itu akan menghasilkan ratusan pengambilan data ke node, yang setiap kali pengambilan memerlukan RTT(opens in a new tab) yang membuat Dapp Anda menjadi lambat dan tidak efisien. Satu solusi untuk ini mungkin adalah dengan menggunakan fungsi pemanggilan pengambil di dalam kontrak Anda yang mengembalikan beberapa data sekaligus. Namun, ini tidak selalu merupakan cara yang ideal.

Lalu, Anda juga mungkin tertarik dengan data riwayat. Anda ingin mengetahui tidak hanya waktu perdagangan terakhir, tapi juga waktu dari semua perdagangan yang pernah Anda lakukan sendiri. Gunakan paket subgraph create-eth-app, baca dokumentasi(opens in a new tab) dan sesuaikan dengan kontrak Anda. Jika Anda berencana menggunakan kontrak pintar populer, mungkin telah ada subgraph di dalamnya. Lihat penjelajah subgraph(opens in a new tab).

Setelah memiliki subgraph, ini memungkinkan Anda menulis kueri sederhana di Dapp Anda yang mengambil semua data blockchain penting termasuk data riwayat yang Anda perlukan, cukup dengan satu kali pengambilan.

Apollo

Berkat integrasi Apollo Boost(opens in a new tab), Anda dapat dengan mudah mengintegrasikan graph ke dalam Dapp React Anda. Khususnya ketika menggunakan kaitan React dan Apollo(opens in a new tab), mengambil data menjadi semudah menulis sebuah kueri GraphQl dalam kompenen 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

Di atas, Anda dapat memilih dari beberapa templat beragam. Sejauh ini, Anda dapat menggunakan integrasi Aave, Compound, UniSwap, atau sablier. Mereka semua menambahkan layanan penting: alamat kontrak pintar beserta integrasi subgraph yang dibuat sebelumnya. Cukup tambahkan templat ke dalam perintah pembuatan seperti yarn create eth-app my-eth-app --with-template aave.

Aave

Aave(opens in a new tab) adalah sebuah pasar pemberian pinjaman uang terdesentralisasi. Deposan memberikan likuidasi ke pasar untuk menghasilkan pendapatan pasif, sedangkan para peminjam dapat meminjam dengan menyediakan jaminan. Salah satu fitur unik dari Aave adalah pinjaman cepat(opens in a new tab) yang memungkinkan Anda meminjam uang tanpa jaminan apa pun, selama Anda mengembalikan pinjaman dalam satu transaksi. Ini dapat berguna, misalnya, untuk memberikan Anda uang tambahan pada perdagangan arbitrase.

Token yang diperdagangkan yang menghasilkan bunga disebut aTokens.

Ketika Anda memilih untuk mengintegrasikan Aave dengan create-eth-app, Anda akan mendapatkan integrasi subgraph(opens in a new tab). Aave uses The Graph and already provides you with several ready-to-use subgraphs on Ropsten(opens in a new tab) and Mainnet(opens in a new tab) in raw(opens in a new tab) or formatted(opens in a new tab) form.

Compound

Compound(opens in a new tab) mirip dengan Aave. Integrasinya telah mencakup Compound v2 Subgraph(opens in a new tab) baru. Token penghasil bunga di sini secara mengejutkan disebut cTokens.

Uniswap

Uniswap(opens in a new tab) adalah decentralized exchange (DEX). Penyedia likuiditas bisa memperoleh bayaran dengan menyediakan token atau ether yang dibutuhkan bagi kedua pihak dalam sebuah perdagangan. Uniswap dipakai secara luas dan oleh karena itu memiliki salah satu dari likuiditas tertinggi untuk kisaran token yang sangat luas. Anda dapat dengan mudah mengintegrasikannya ke dalam Dapp Anda untuk, misalnya, memungkinkan para pengguna menukar ETH mereka dengan DAI.

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

Sablier

Sablier(opens in a new tab) memungkinkan para pengguna menyiarkan pembayaran uang. Alih alih sekali pembayaran, Anda mendapatkan uang secara konstan tanpa administrasi tambahan setelah pengaturan awalnya selesai. Integrasinya mencakup subgraphnya(opens in a new tab) sendiri.

Selajutnya?

Jika Anda memiliki pertanyaan tentang create-eth-app, kunjungi server komunitas Sablier(opens in a new tab), di mana Anda dapat berinteraksi dengan para penulis create-eth-app. Sebagai beberapa langkah pertama berikutnya, Anda mungkin ingin mengintegrasikan kerangka kerja UI seperti Material UI(opens in a new tab), menulis kueri GraphQL untuk data yang benar-benar Anda perlukan dan menyiapkan penggunaannya.