Nastartujte vývoj frontendu své dapp pomocí create-eth-app

Minule jsme se podívali na celkový obraz Solidity (opens in a new tab) a už jsme zmínili create-eth-app (opens in a new tab). Nyní zjistíte, jak jej používat, jaké funkce jsou v něm integrované a další nápady, jak jej rozšířit. Tato aplikace, kterou vytvořil Paul Razvan Berg, zakladatel projektu Sablier (opens in a new tab), nastartuje vývoj vašeho frontendu a přichází s několika volitelnými integracemi, 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

Interně využívá create-react-app (opens in a new tab). Chcete-li vidět svou aplikaci, otevřete http://localhost:3000/. Až budete připraveni na nasazení do produkce, vytvořte minifikovaný balíček pomocí yarn build. Jedním ze snadných způsobů hostování by mohl být Netlify (opens in a new tab). Můžete vytvořit repozitář na GitHubu, přidat jej 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 zcela zdarma.

Funkce

React a create-react-app

V první řadě srdce aplikace: React a všechny další funkce, které přináší create-react-app. Použití pouze tohoto nástroje je skvělou volbou, pokud nechcete integrovat Ethereum. Samotný React (opens in a new tab) velmi usnadňuje tvorbu 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. Nástroj create-react-app také velmi usnadňuje začátky a obsahuje:

• Podporu syntaxe React, JSX, ES6, TypeScript a Flow.
• Jazyková rozšíření nad rámec ES6, jako je operátor rozbalení objektu (object spread operator).
• Automatické předpony CSS, takže nepotřebujete -webkit- ani jiné předpony.
• Rychlý interaktivní nástroj pro spouštění jednotkových testů s vestavěnou podporou pro vykazování pokrytí.
• Živý vývojový server, který upozorňuje na běžné chyby.
• Skript pro sestavení, který spojí JS, CSS a obrázky pro produkci, včetně hashů a zdrojových map (sourcemaps).

Zejména create-eth-app využívá nové efekty hooků (hooks effects) (opens in a new tab). Je to metoda pro psaní výkonných, a přitom velmi malých takzvaných funkcionálních komponent. Podívejte se na níže uvedenou sekci o Apollu, kde se dozvíte, jak se používají v create-eth-app.

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é složky a instalovat závislosti pro všechny najednou pomocí yarn install. To dává smysl zejména u menších doplňkových balíčků, jako je správa adres chytrých kontraktů a ABI (informace o tom, kam jste nasadili které chytré kontrakty a jak s nimi komunikovat) nebo integrace The Graph, obojí je součástí create-eth-app.

ethers.js

Zatímco Web3 (opens in a new tab) se stále většinově používá, Ethers.js (opens in a new tab) si v posledním roce získává mnohem větší pozornost jako alternativa a je integrován do create-eth-app. Můžete pracovat s ním, změnit jej na Web3 nebo zvážit přechod na Ethers.js v5 (opens in a new tab), který už brzy opustí beta verzi.

The Graph

GraphQL (opens in a new tab) je alternativní způsob zpracování dat ve srovnání s RESTful API (opens in a new tab). Oproti RESTful API má několik výhod, zejména pro decentralizovaná blockchainová data. Pokud vás zajímají důvody, podívejte se na článek GraphQL bude pohánět decentralizovaný web (opens in a new tab).

Obvykle byste data získávali přímo ze svého chytrého kontraktu. Chcete si přečíst čas posledního obchodu? Stačí zavolat MyContract.methods.latestTradeTime().call(), což načte data z uzlu Etherea do vaší decentralizované aplikace (dapp). Ale co když potřebujete stovky různých datových bodů? To by vedlo ke stovkám požadavků na data do uzlu, z nichž každý by vyžadoval RTT (opens in a new tab), což by vaši dapp zpomalilo a učinilo neefektivní. Jedním z řešení by mohla být funkce pro načítání uvnitř vašeho kontraktu, která vrátí více dat najednou. To však není vždy 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 provedli. Použijte balíček podgrafu 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 populární chytré kontrakty, možná pro ně už podgraf existuje. Podívejte se do průzkumníka podgrafů (opens in a new tab).

Jakmile máte podgraf, umožňuje vám napsat jeden jednoduchý dotaz ve vaší dapp, který načte všechna důležitá blockchainová data, včetně těch historických, která potřebujete, a to pouze jedním požadavkem.

Apollo

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

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

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

Šablony

Navíc si můžete vybrat z několika různých šablon. Zatím můžete využít integraci Aave, Compound, Uniswap nebo Sablier. Všechny přidávají důležité adresy chytrých kontraktů služeb spolu s předpřipravenými integracemi podgrafů. 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 pro půjčování peněz. Vkladatelé poskytují trhu likviditu, aby získali pasivní příjem, zatímco dlužníci si mohou půjčovat pomocí zajištění. Jednou z unikátních funkcí Aave jsou bleskové půjčky (opens in a new tab), které vám umožňují půjčit si peníze bez jakéhokoli zajištění, pokud půjčku vrátíte v rámci jedné transakce. To může být užitečné například k získání dodatečné hotovosti při arbitrážním obchodování.

Obchodované tokeny, které vám přinášejí úroky, se nazývají aTokens.

Když se rozhodnete integrovat Aave pomocí create-eth-app, získáte integraci podgrafu (opens in a new tab). Aave používá The Graph a již vám poskytuje několik podgrafů připravených k použití v sítích Ropsten (opens in a new tab) a Mainnet (opens in a new tab) v surové (raw) (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ý podgraf Compound v2 (opens in a new tab). Tokeny přinášející úroky se zde překvapivě nazývají cTokens.

Uniswap

Uniswap (opens in a new tab) je decentralizovaná burza (DEX). Poskytovatelé likvidity mohou vydělávat na poplatcích tím, že poskytnou požadované tokeny nebo ether pro obě strany obchodu. Je široce používán, a proto má jednu z nejvyšších likvidit pro velmi širokou škálu tokenů. Můžete jej snadno integrovat do své dapp, abyste například uživatelům umožnili swapovat jejich ETH za DAI.

Bohužel v době psaní tohoto článku je integrace dostupná pouze pro Uniswap v1 a nikoli pro právě vydanou verzi v2 (opens in a new tab).

Sablier

Sablier (opens in a new tab) umožňuje uživatelům streamovat peněžní platby. Místo jednorázové výplaty dostáváte své peníze neustále bez další administrativy po počátečním nastavení. Integrace zahrnuje jeho vlastní podgraf (opens in a new tab).

Co dál?

Pokud máte dotazy ohledně create-eth-app, navštivte komunitní server Sablier (opens in a new tab), kde se můžete spojit s autory create-eth-app. Jako první další kroky byste mohli chtít integrovat framework pro uživatelské rozhraní, jako je Material UI (opens in a new tab), napsat GraphQL dotazy pro data, která skutečně potřebujete, a nastavit nasazení.