Rozpocznij tworzenie frontendu swojej zdecentralizowanej aplikacji (dapp) z create-eth-app
Ostatnio przyjrzeliśmy się ogólnemu zarysowi języka Solidity (otwiera się w nowej karcie) i wspomnieliśmy już o create-eth-app (otwiera się w nowej karcie). 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 (otwiera się w nowej karcie), 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 (otwiera się w nowej karcie). 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 (otwiera się w nowej karcie). 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 (otwiera się w nowej karcie) sprawia, że budowanie interaktywnych interfejsów użytkownika (UI) jest naprawdę proste. Może nie jest tak przyjazny dla początkujących jak Vue (otwiera się w nowej karcie), 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) (otwiera się w nowej karcie). 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 (otwiera się w nowej karcie) 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 (otwiera się w nowej karcie) jest nadal najczęściej używane, Ethers.js (otwiera się w nowej karcie) 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 (otwiera się w nowej karcie), które prawie wyszło z fazy beta.
The Graph
GraphQL (otwiera się w nowej karcie) to alternatywny sposób obsługi danych w porównaniu do RESTful API (otwiera się w nowej karcie). 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 (otwiera się w nowej karcie).
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 (otwiera się w nowej karcie), 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ę (otwiera się w nowej karcie) 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 (otwiera się w nowej karcie).
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 (otwiera się w nowej karcie) możesz łatwo zintegrować The Graph w swoim dappie opartym na React. Zwłaszcza podczas korzystania z hooków React i Apollo (otwiera się w nowej karcie), 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 (otwiera się w nowej karcie) 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) (otwiera się w nowej karcie), 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 (otwiera się w nowej karcie). Aave korzysta z The Graph i zapewnia już kilka gotowych do użycia podgrafów w sieciach Ropsten (otwiera się w nowej karcie) i Sieć główna (otwiera się w nowej karcie) w formie surowej (raw) (otwiera się w nowej karcie) lub sformatowanej (otwiera się w nowej karcie).
Compound
Compound (otwiera się w nowej karcie) jest podobny do Aave. Integracja obejmuje już nowy podgraf Compound v2 (otwiera się w nowej karcie). Tokeny przynoszące odsetki są tutaj o dziwo nazywane cTokens.
Uniswap
Uniswap (otwiera się w nowej karcie) 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 (otwiera się w nowej karcie).
Sablier
Sablier (otwiera się w nowej karcie) 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 (otwiera się w nowej karcie).
Co dalej?
Jeśli masz pytania dotyczące create-eth-app, wejdź na serwer społeczności Sablier (otwiera się w nowej karcie), gdzie możesz skontaktować się z autorami create-eth-app. Jako pierwsze kolejne kroki możesz chcieć zintegrować framework UI, taki jak Material UI (otwiera się w nowej karcie), napisać zapytania GraphQL dla danych, których faktycznie potrzebujesz, i skonfigurować wdrożenie.