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

Minule jsme se podívali na celkový obraz Solidity (opens in a new tab) a již zmínili create-eth-app (opens 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 Sablier (opens 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-app (opens 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 Netlify (opens 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ý React (opens 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 Vue (opens 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 effects (opens 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 Workspaces (opens 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 Web3 (opens in a new tab) se stále používá nejvíce, ethers.js (opens 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 v5 (opens in a new tab), který je téměř venku z beta verze.

The Graph

GraphQL (opens in a new tab) je alternativní způsob práce s daty ve srovnání s Restful API (opens 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 Web (opens 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 RTT (opens 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 dokumentaci (opens 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 Boost (opens in a new tab) můžete snadno integrovat The Graph do své React dapp. Zejména při použití React hooks and Apollo (opens 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

Aave (opens 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 subgraphu (opens in a new tab). Aave používá The Graph a již vám poskytuje několik subgraphů připravených k použití na Ropstenu (opens in a new tab) a mainnetu (opens in a new tab) v surové (opens in a new tab) nebo formátované (opens in a new tab) podobě.

Compound

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

Uniswap

Uniswap (opens 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 v2 (opens in a new tab).

Sablier

Sablier (opens 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í subgraph (opens in a new tab).

Co dál?

Pokud máte dotazy ohledně create-eth-app, přejděte na komunitní server Sablier (opens 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 UI (opens in a new tab), napsat GraphQL dotazy pro data, která skutečně potřebujete, a nastavit nasazení.

Stránka naposledy aktualizována: 29. září 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

Zobrazit přispěvatele