Nastartujte vývoj frontendu vaší dapp pomocí create-eth-app

Minule jsme se podívali na celkový obraz Solidityopens in a new tab a již zmínili create-eth-appopens in a new tab. Nyní se dozvíte, jak jej používat, jaké funkce jsou integrovány a jaké jsou další nápady na jeho rozšíření. Tato aplikace, kterou založil Paul Razvan Berg, zakladatel Sablieropens in a new tab, nastartuje váš vývoj frontendu a přináší několik volitelných integrací, ze kterých si můžete vybrat.

Instalace

Instalace vyžaduje Yarn 0.25 nebo vyšší (npm install yarn --global). Je to tak jednoduché jako spuštění:

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

Pod kapotou používá create-react-appopens in a new tab. Chcete-li zobrazit svou aplikaci, otevřete http://localhost:3000/. Až budete připraveni k nasazení do produkčního prostředí, vytvořte minifikovaný balíček pomocí yarn build. Jedním ze snadných způsobů, jak to hostovat, je Netlifyopens in a new tab. Můžete si vytvořit repozitář na GitHubu, přidat ho do Netlify, nastavit příkaz pro sestavení a máte hotovo! Vaše aplikace bude hostovaná a použitelná pro všechny. A to vše zdarma.

Vlastnosti

React a create-react-app

Především srdce aplikace: React a všechny další funkce, které přináší create-react-app. Použití pouze tohoto je skvělá volba, pokud nechcete integrovat Ethereum. Samotný Reactopens in a new tab velmi usnadňuje vytváření interaktivních uživatelských rozhraní. Možná není tak přívětivý pro začátečníky jako Vueopens in a new tab, ale stále je nejpoužívanější, má více funkcí a hlavně tisíce dalších knihoven, ze kterých si můžete vybrat. create-react-app také velmi usnadňuje začátek a zahrnuje:

• Podporu syntaxe React, JSX, ES6, TypeScript a Flow.
• Jazyková rozšíření nad rámec ES6, jako je operátor rozšiřování objektů (object spread operator).
• Automaticky prefixované CSS, takže nepotřebujete -webkit- ani jiné prefixy.
• Rychlý interaktivní spouštěč jednotkových testů s vestavěnou podporou pro reportování pokrytí.
• Živý vývojový server, který varuje před běžnými chybami.
• Sestavovací skript pro sbalení JS, CSS a obrázků pro produkci, s haši a sourcemapy.

Konkrétně create-eth-app využívá nové hooks effectsopens in a new tab. Metoda pro psaní výkonných, ale velmi malých takzvaných funkcionálních komponent. Jak se používají v create-eth-app se dozvíte níže v sekci o Apollo.

Yarn Workspaces

Yarn Workspacesopens in a new tab vám umožňují mít více balíčků, ale spravovat je všechny z kořenového adresáře a instalovat závislosti pro všechny najednou pomocí yarn install. To dává smysl zejména pro menší doplňkové balíčky, jako je správa adres/ABI chytrých kontraktů (informace o tom, kde jste nasadili které chytré kontrakty a jak s nimi komunikovat) nebo integrace The Graph, které jsou obě součástí create-eth-app.

ethers.js

Zatímco Web3opens in a new tab se stále používá nejvíce, ethers.jsopens in a new tab se v posledním roce stává stále populárnější alternativou a je integrován do create-eth-app. Můžete s ním pracovat, změnit ho na Web3 nebo zvážit upgrade na ethers.js v5opens in a new tab, který je téměř venku z beta verze.

The Graph

GraphQLopens in a new tab je alternativní způsob práce s daty ve srovnání s Restful APIopens in a new tab. Mají několik výhod oproti Restful API, zejména pro decentralizovaná blockchainová data. Pokud vás zajímají důvody, podívejte se na GraphQL Will Power the Decentralized Webopens in a new tab.

Obvykle byste získávali data přímo z vašeho chytrého kontraktu. Chcete si přečíst čas posledního obchodu? Stačí zavolat MyContract.methods.latestTradeTime().call(), které získá data z uzlu Ethereum do vaší dapp. Ale co když potřebujete stovky různých datových bodů? To by vedlo ke stovkám načítání dat z uzlu, přičemž každé by vyžadovalo RTTopens in a new tab, což by vaši dapp zpomalilo a zneefektivnilo. Jedním z řešení může být funkce pro hromadné načítání (fetcher call) uvnitř vašeho kontraktu, která vrací více dat najednou. Ne vždy je to ale ideální.

A pak by vás mohla zajímat i historická data. Chcete znát nejen čas posledního obchodu, ale časy všech obchodů, které jste kdy sami uskutečnili. Použijte balíček subgraphu create-eth-app, přečtěte si dokumentaciopens in a new tab a přizpůsobte jej svým vlastním kontraktům. Pokud hledáte oblíbené chytré kontrakty, může pro ně již existovat subgraph. Podívejte se na průzkumníka subgraphůopens in a new tab.

Jakmile máte subgraph, můžete ve své dapp napsat jeden jednoduchý dotaz, který načte všechna důležitá blockchainová data, která potřebujete, včetně těch historických, a to pouze jedním načtením.

Apollo

Díky integraci Apollo Boostopens in a new tab můžete snadno integrovat The Graph do své React dapp. Zejména při použití React hooks and Apolloopens in a new tab je načítání dat tak jednoduché jako napsání jediného dotazu GraphQL ve vaší komponentě:

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

Šablony

Navíc si můžete vybrat z několika různých šablon. Zatím můžete použít integraci Aave, Compound, UniSwap nebo Sablier. Všechny přidávají důležité adresy servisních chytrých kontraktů spolu s předpřipravenými integracemi subgraphů. Stačí přidat šablonu do příkazu pro vytvoření, například yarn create eth-app my-eth-app --with-template aave.

Aave

Aaveopens in a new tab je decentralizovaný trh s půjčováním peněz. Vkladatelé poskytují trhu likviditu, aby získali pasivní příjem, zatímco dlužníci si mohou půjčovat pomocí kolaterálu. Jednou z jedinečných funkcí Aave jsou rychlé půjčky (flash loans)opens in a new tab, které vám umožní půjčit si peníze bez jakéhokoli kolaterálu, pokud půjčku vrátíte v rámci jedné transakce. To může být užitečné například pro získání dodatečné hotovosti při arbitrážním obchodování.

Obchodované tokeny, které vám vydělávají úroky, se nazývají aTokens.

Když se rozhodnete integrovat Aave s create-eth-app, získáte integraci subgraphuopens in a new tab. Aave používá The Graph a již vám poskytuje několik subgraphů připravených k použití na Ropstenuopens in a new tab a mainnetuopens in a new tab v surovéopens in a new tab nebo formátovanéopens in a new tab podobě.

Compound

Compoundopens in a new tab je podobný Aave. Integrace již zahrnuje nový Compound v2 Subgraphopens in a new tab. Tokeny, které zde vydělávají úroky, se překvapivě nazývají cTokens.

Uniswap

Uniswapopens in a new tab je decentralizovaná burza (DEX). Poskytovatelé likvidity mohou vydělávat poplatky poskytováním požadovaných tokenů nebo etheru pro obě strany obchodu. Je široce používána a proto má jednu z nejvyšších likvidit pro velmi širokou škálu tokenů. Můžete ji snadno integrovat do své dapp, abyste například umožnili uživatelům směnit jejich ETH za DAI.

Bohužel v době psaní tohoto článku je integrace pouze pro Uniswap v1, a nikoli pro právě vydanou v2opens in a new tab.

Sablier

Sablieropens in a new tab umožňuje uživatelům streamování plateb. Místo jediné výplaty dostáváte peníze neustále bez další administrace po úvodním nastavení. Integrace zahrnuje vlastní subgraphopens in a new tab.

Co dál?

Pokud máte dotazy ohledně create-eth-app, přejděte na komunitní server Sablieropens in a new tab, kde se můžete spojit s autory create-eth-app. Jako jedny z prvních dalších kroků můžete chtít integrovat UI framework jako Material UIopens in a new tab, napsat GraphQL dotazy pro data, která skutečně potřebujete, a nastavit nasazení.