Rozpocznij tworzenie frontendu swojej zdecentralizowanej aplikacji (dapp) z create-eth-app

Ostatnio przyjrzeliśmy się ogólnemu zarysowi języka Solidity (opens in a new tab) i wspomnieliśmy już o create-eth-app (opens in a new tab). Teraz dowiesz się, jak z niego korzystać, jakie funkcje są z nim zintegrowane oraz poznasz dodatkowe pomysły na jego rozbudowę. Zainicjowana przez Paula Razvana Berga, założyciela Sablier (opens in a new tab), ta aplikacja przyspieszy tworzenie frontendu i oferuje kilka opcjonalnych integracji do wyboru.

Instalacja

Instalacja wymaga Yarn w wersji 0.25 lub nowszej (npm install yarn --global). Jest to tak proste, jak uruchomienie:

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

Wewnętrznie wykorzystuje create-react-app (opens in a new tab). Aby zobaczyć swoją aplikację, otwórz http://localhost:3000/. Kiedy będziesz gotowy na wdrożenie na produkcję, utwórz zminifikowaną paczkę za pomocą polecenia yarn build. Jednym z prostych sposobów na jej hostowanie jest Netlify (opens in a new tab). Możesz utworzyć repozytorium na GitHubie, dodać je do Netlify, skonfigurować polecenie budowania i gotowe! Twoja aplikacja będzie hostowana i dostępna dla każdego. A wszystko to całkowicie za darmo.

Funkcje

React i create-react-app

Przede wszystkim serce aplikacji: React i wszystkie dodatkowe funkcje dostarczane wraz z create-react-app. Korzystanie tylko z tego jest świetną opcją, jeśli nie chcesz integrować Ethereum. Sam React (opens in a new tab) sprawia, że budowanie interaktywnych interfejsów użytkownika (UI) jest naprawdę proste. Może nie jest tak przyjazny dla początkujących jak Vue (opens in a new tab), ale wciąż jest najczęściej używany, ma więcej funkcji i, co najważniejsze, tysiące dodatkowych bibliotek do wyboru. Narzędzie create-react-app sprawia, że rozpoczęcie pracy z nim jest również bardzo proste i obejmuje:

• Wsparcie dla składni React, JSX, ES6, TypeScript i Flow.
• Dodatki językowe wykraczające poza ES6, takie jak operator spread dla obiektów.
• Autoprefiksowanie CSS, dzięki czemu nie potrzebujesz prefiksów -webkit- ani innych.
• Szybkie, interaktywne narzędzie do uruchamiania testów jednostkowych z wbudowaną obsługą raportowania pokrycia kodu.
• Serwer deweloperski działający na żywo, który ostrzega o typowych błędach.
• Skrypt budujący do pakowania plików JS, CSS i obrazów na produkcję, z hashami i mapami kodu (sourcemaps).

W szczególności create-eth-app wykorzystuje nowe efekty hooków (hooks effects) (opens in a new tab). Metodę pisania potężnych, a jednocześnie bardzo małych, tak zwanych komponentów funkcyjnych. Zobacz poniższą sekcję o Apollo, aby dowiedzieć się, jak są one używane w create-eth-app.

Przestrzenie robocze Yarn (Yarn Workspaces)

Przestrzenie robocze Yarn (opens in a new tab) pozwalają na posiadanie wielu pakietów, ale z możliwością zarządzania nimi wszystkimi z folderu głównego i instalowania zależności dla wszystkich naraz za pomocą yarn install. Ma to szczególny sens w przypadku mniejszych, dodatkowych pakietów, takich jak zarządzanie adresami/ABI inteligentnych kontraktów (informacje o tym, gdzie wdrożono poszczególne inteligentne kontrakty i jak się z nimi komunikować) lub integracja The Graph, które są częścią create-eth-app.

ethers.js

Chociaż Web3 (opens in a new tab) jest nadal najczęściej używane, Ethers.js (opens in a new tab) zyskało w ostatnim roku znacznie większą popularność jako alternatywa i to właśnie ono jest zintegrowane z create-eth-app. Możesz pracować z tą biblioteką, zmienić ją na Web3 lub rozważyć aktualizację do Ethers.js v5 (opens in a new tab), które prawie wyszło z fazy beta.

The Graph

GraphQL (opens in a new tab) to alternatywny sposób obsługi danych w porównaniu do RESTful API (opens in a new tab). Ma on kilka zalet w stosunku do RESTful API, zwłaszcza w przypadku zdecentralizowanych danych blockchain. Jeśli interesuje Cię uzasadnienie tego podejścia, zapoznaj się z artykułem GraphQL Will Power the Decentralized Web (opens in a new tab).

Zazwyczaj pobierałbyś dane bezpośrednio ze swojego inteligentnego kontraktu. Chcesz odczytać czas ostatniej transakcji handlowej? Wystarczy wywołać MyContract.methods.latestTradeTime().call(), co pobierze dane z węzła Ethereum do Twojej zdecentralizowanej aplikacji (dapp). Ale co, jeśli potrzebujesz setek różnych punktów danych? Skutkowałoby to setkami zapytań o dane do węzła, z których każde wymagałoby czasu RTT (opens in a new tab), co uczyniłoby Twojego dappa powolnym i nieefektywnym. Jednym z obejść może być funkcja pobierająca wewnątrz Twojego kontraktu, która zwraca wiele danych naraz. Nie zawsze jest to jednak idealne rozwiązanie.

Możesz być również zainteresowany danymi historycznymi. Chcesz znać nie tylko czas ostatniej transakcji, ale także czasy wszystkich transakcji, które kiedykolwiek sam wykonałeś. Użyj pakietu podgrafu z create-eth-app, przeczytaj dokumentację (opens in a new tab) i dostosuj go do własnych kontraktów. Jeśli szukasz popularnych inteligentnych kontraktów, być może istnieje już dla nich podgraf. Sprawdź eksplorator podgrafów (opens in a new tab).

Gdy masz już podgraf, pozwala on na napisanie jednego prostego zapytania w Twoim dappie, które pobiera wszystkie ważne dane z blockchaina, w tym potrzebne dane historyczne, wymagając tylko jednego żądania.

Apollo

Dzięki integracji Apollo Boost (opens in a new tab) możesz łatwo zintegrować The Graph w swoim dappie opartym na React. Zwłaszcza podczas korzystania z hooków React i Apollo (opens in a new tab), pobieranie danych jest tak proste, jak napisanie pojedynczego zapytania GraphQL w Twoim komponencie:

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

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

Szablony

Ponadto możesz wybierać spośród kilku różnych szablonów. Jak dotąd możesz użyć integracji z Aave, Compound, Uniswap lub Sablier. Wszystkie one dodają ważne adresy inteligentnych kontraktów usług wraz z gotowymi integracjami podgrafów. Wystarczy dodać szablon do polecenia tworzenia, np. yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) to zdecentralizowany rynek pożyczania pieniędzy. Deponenci dostarczają płynność na rynek, aby zarabiać pasywny dochód, podczas gdy pożyczkobiorcy mogą pożyczać środki, korzystając z zabezpieczeń. Jedną z unikalnych funkcji Aave są błyskawiczne pożyczki (flash loans) (opens in a new tab), które pozwalają na pożyczanie pieniędzy bez żadnego zabezpieczenia, pod warunkiem, że zwrócisz pożyczkę w ramach jednej transakcji. Może to być przydatne na przykład do uzyskania dodatkowej gotówki na handel arbitrażowy.

Handlowane tokeny, które przynoszą Ci odsetki, nazywane są aTokens.

Gdy zdecydujesz się zintegrować Aave z create-eth-app, otrzymasz integrację podgrafu (opens in a new tab). Aave korzysta z The Graph i zapewnia już kilka gotowych do użycia podgrafów w sieciach Ropsten (opens in a new tab) i Sieć główna (opens in a new tab) w formie surowej (raw) (opens in a new tab) lub sformatowanej (opens in a new tab).

Compound

Compound (opens in a new tab) jest podobny do Aave. Integracja obejmuje już nowy podgraf Compound v2 (opens in a new tab). Tokeny przynoszące odsetki są tutaj o dziwo nazywane cTokens.

Uniswap

Uniswap (opens in a new tab) to zdecentralizowana giełda (DEX). Dostawcy płynności mogą zarabiać na opłatach, dostarczając wymagane tokeny lub ether dla obu stron transakcji. Jest szeroko stosowany i dlatego ma jedną z najwyższych płynności dla bardzo szerokiej gamy tokenów. Możesz łatwo zintegrować go ze swoim dappem, aby na przykład umożliwić użytkownikom wymianę ich ETH na DAI.

Niestety, w momencie pisania tego tekstu integracja dotyczy tylko Uniswap v1, a nie właśnie wydanego v2 (opens in a new tab).

Sablier

Sablier (opens in a new tab) umożliwia użytkownikom strumieniowanie płatności pieniężnych. Zamiast pojedynczego dnia wypłaty, faktycznie otrzymujesz swoje pieniądze w sposób ciągły, bez dalszej administracji po początkowej konfiguracji. Integracja obejmuje jego własny podgraf (opens in a new tab).

Co dalej?

Jeśli masz pytania dotyczące create-eth-app, wejdź na serwer społeczności Sablier (opens in a new tab), gdzie możesz skontaktować się z autorami create-eth-app. Jako pierwsze kolejne kroki możesz chcieć zintegrować framework UI, taki jak Material UI (opens in a new tab), napisać zapytania GraphQL dla danych, których faktycznie potrzebujesz, i skonfigurować wdrożenie.