Rozpocznij rozwój frontendu swojej dapki za pomocą create-eth-app

Ostatnim razem przyjrzeliśmy się ogólnemu obrazowi Solidity (opens in a new tab) i wspomnieliśmy już o create-eth-app (opens in a new tab). Teraz dowiesz się, jak go używać, jakie funkcje są zintegrowane oraz poznasz dodatkowe pomysły na jego rozbudowę. Stworzona przez Paula Razvana Berga, założyciela Sablier (opens in a new tab), ta aplikacja przyspieszy rozwój Twojego frontendu i oferuje kilka opcjonalnych integracji do wyboru.

Instalacja

Instalacja wymaga Yarn w wersji 0.25 lub wyższej (npm install yarn --global). To tak proste, jak uruchomienie:

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

W tle wykorzystuje create-react-app (opens in a new tab). Aby zobaczyć swoją aplikację, otwórz http://localhost:3000/. Gdy będziesz gotowy do wdrożenia na produkcję, utwórz zminimalizowany pakiet za pomocą yarn build. Jednym z łatwych sposobów na hostowanie tego jest Netlify (opens in a new tab). Możesz utworzyć repozytorium na GitHubie, dodać je do Netlify, skonfigurować polecenie kompilacji i gotowe! Twoja aplikacja będzie hostowana i dostępna dla wszystkich. A wszystko to bezpłatnie.

Funkcje

React i create-react-app

Przede wszystkim serce aplikacji: React i wszystkie dodatkowe funkcje, które oferuje create-react-app. Używanie tylko tego jest świetną opcją, jeśli nie chcesz integrować Ethereum. React (opens in a new tab) sam w sobie bardzo ułatwia tworzenie interaktywnych interfejsów użytkownika. Może nie jest tak przyjazny dla początkujących jak Vue (opens in a new tab), ale nadal jest najczęściej używany, ma więcej funkcji, a co najważniejsze, oferuje tysiące dodatkowych bibliotek do wyboru. create-react-app sprawia, że rozpoczęcie pracy z nim jest również bardzo łatwe 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.
• Automatyczne dodawanie prefiksów w CSS, dzięki czemu nie potrzebujesz -webkit- ani innych prefiksów.
• Szybkie, interaktywne narzędzie do uruchamiania testów jednostkowych z wbudowanym wsparciem dla raportowania pokrycia kodu testami.
• Serwer deweloperski działający na żywo, który ostrzega o typowych błędach.
• Skrypt kompilacji do tworzenia pakietów JS, CSS i obrazów na produkcję, z haszami i sourcemapami.

create-eth-app w szczególności wykorzystuje nowe efekty hooków (opens in a new tab). Metoda 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.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) pozwalają na posiadanie wielu pakietów, ale umożliwiają zarządzanie nimi wszystkimi z folderu głównego oraz instalowanie 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 które inteligentne kontrakty i jak się z nimi komunikować) lub integracja z The Graph, obie będące 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) zyskuje w ostatnim roku na popularności jako alternatywa i to właśnie ono jest zintegrowane z create-eth-app. Możesz z nim pracować, zmienić go na Web3 lub rozważyć aktualizację do ethers.js v5 (opens in a new tab), który jest już prawie po fazie beta.

The Graph

GraphQL (opens in a new tab) to alternatywny sposób obsługi danych w porównaniu z Restful API (opens in a new tab). Mają one kilka zalet w porównaniu z Restful API, szczególnie w przypadku zdecentralizowanych danych blockchain. Jeśli interesują Cię powody, które za tym stoją, zapoznaj się z GraphQL Will Power the Decentralized Web (opens in a new tab).

Zazwyczaj pobiera się dane bezpośrednio ze swojego inteligentnego kontraktu. Chcesz odczytać czas ostatniej transakcji? Wystarczy wywołać MyContract.methods.latestTradeTime().call(), co pobiera dane z węzła Ethereum do Twojej dapki. 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 RTT (opens in a new tab), co sprawiłoby, że Twoja dapka byłaby wolna i nieefektywna. Jednym z obejść może być funkcja pobierająca w Twoim kontrakcie, 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 wykonałeś. Użyj pakietu podgrafu 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 Twojej dapce, które pobiera wszystkie potrzebne, ważne dane z blockchainu, w tym historyczne, wymagając tylko jednego pobrania.

Apollo

Dzięki integracji z Apollo Boost (opens in a new tab) możesz łatwo zintegrować The Graph w swojej dapce React. Szczególnie przy użyciu hooków React i Apollo (opens in a new tab), pobieranie danych jest tak proste, jak napisanie pojedynczego zapytania GraphQl w Twoim komponencie:

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

Szablony

Dodatkowo możesz wybrać jeden z kilku różnych szablonów. Do tej pory można używać 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życzek pieniężnych. Deponenci zapewniają płynność rynkowi, aby zarabiać pasywny dochód, podczas gdy pożyczkobiorcy mogą pożyczać, używając zabezpieczeń. Jedną z unikalnych cech Aave są pożyczki błyskawiczne (opens in a new tab), które pozwalają pożyczać pieniądze bez żadnego zabezpieczenia, o ile pożyczka zostanie zwrócona w ramach jednej transakcji. Może to być przydatne na przykład do uzyskania dodatkowej gotówki w handlu arbitrażowym.

Tokeny, którymi się handluje i które przynoszą odsetki, nazywane są aTokenami.

Gdy zdecydujesz się zintegrować Aave z create-eth-app, otrzymasz integrację z podgrafem (opens in a new tab). Aave używa The Graph i już udostępnia kilka gotowych do użycia podgrafów na Ropsten (opens in a new tab) i w sieci głównej (opens in a new tab) w formie surowej (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 tutaj odsetki nazywają się, co zaskakujące, cTokenami.

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 powszechnie używany i dlatego ma jedną z najwyższych płynności dla bardzo szerokiej gamy tokenów. Możesz łatwo zintegrować go w swojej dapce, aby na przykład umożliwić użytkownikom wymianę ETH na DAI.

Niestety, w momencie pisania tego tekstu integracja dotyczy tylko Uniswap v1, a nie niedawno wydanej wersji v2 (opens in a new tab).

Sablier

Sablier (opens in a new tab) umożliwia użytkownikom strumieniowanie płatności pieniężnych. Zamiast jednej wypłaty, otrzymujesz pieniądze na bieżąco bez dodatkowej administracji po wstępnej konfiguracji. Integracja obejmuje własny podgraf (opens in a new tab).

Co dalej?

Jeśli masz pytania dotyczące create-eth-app, przejdź 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 zechcieć 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.

Strona ostatnio zaktualizowana: 29 września 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

Zobacz współtwórców