Od czego zacząć?
Myślisz o robieniu front-endu dla zdecentralizowanych aplikacji, czyli tzw. dapps?
Najpierw dowiedz się z jakim blockchainem, czyli z jaką siecią ma łączyć się Twoja strona. To istotne ponieważ od tego zależeć będzie dobór narzędzi. Nie każdy blockchain jest sobie równy. Być może Twój projekt nie ma jeszcze wybranego blockchaina.
Najpopularniejsze są wszystkie blockchainy, które są kompatybilne z Ethereum Virtual Machine, czyli są EVM compatible. To na nich skupia się większość developerów. Są to na przykład Ethereum, Polygon czy Avalanche. Jest ich oczywiście znacznie więcej.
Jakie biblioteki JavaScript wybrać pod web3?
Na potrzeby tego materiału, zakładam, że wybrałeś blockchain kompatybilny z maszyną wirtualną Ethereum – EVM compatible.
Jeśli w Twoim projekcie wybraliście coś innego, rozejrzyj się za jakimś SDK, bibliotekami, środowiskiem, czy frameworkiem dedykowanym dla Twojego blockchaina.
Dwie najpopularniejsze biblioteki do obsługi smart kontraktów i portfela to ethers.js oraz web3. To tyle jeśli chodzi o niezbędne rzeczy. To właśnie te biblioteki wykonują całą robotę.
Osobiście wolę ethers.js. Ma lepsze wsparcie dla TypeScripta oraz jest dla mnie bardziej intuicyjny.
Jaki framework JS do front-endu web3?
Nie ma znaczenia jaki framework wybierzesz. W zasadzie nie musisz żadnego wybierać i pisać w Vanilla JS/TS. Biblioteki ethers.js i web3 nie zależą od frameworka. Możesz dobrać do nich Reacta, Angulara, Vue, czy Svelte.
To, jakiego frameworka użyjesz zależy tylko od Ciebie. Bądź jednak świadom, że znaczna część rynku web3 korzysta z Reakta. Rzadko spotykam projekty, które wybierają coś innego. Dlaczego tak się dzieje?
Rynek web3 jest jeszcze młody. Programistów brakuje nawet w web2. Startupy nie chcą ryzykować i idą w najpopularniejsze rozwiązania. Dzięki temu łatwiej jest im znaleźć specjalistów, którzy chcą w danym środowisku pracować. W tym wypadku chodzi o Reakta.
Ja wybieram framework React.js.
Potrzebujesz smart kontraktu
Kiedy już wiesz z jakim smart kontraktem chcesz się łączyć, musisz zdobyć jego adres na danym blockchainie. Musisz zdobyć jeszcze jego ABI, aby biblioteka ethers.js lub web3 mogła dekodować i kodować dane. ABI to odpowiednik API. ABI jest skrótem od Application Binary Interface, _a API to _Application Programming Interface. Widać podobieństwo, prawda?
Zgadza się, oba z nich dotyczą interfejsu, czyli sposobu w jakim można się komunikować z programem lub maszyną. ABI to schema tego jak wygląda dany smart kontrakt. Jest w formacie JSON, ale bywa też w formie uproszczonej, bardziej przyswajalnej dla programisty.
ABI musisz trzymać po stronie front-endu. To znaczy, musisz to trzymać w kodzie źródłowym Twojego front-endu.
Niemożliwa jest edycja smart kontraktu. Raz zdeployowany na blockchain, już taki tam zostaje na zawsze. Dlatego jeśli posiadasz address smart kontraktu oraz jego ABI, to nie musisz się obawiać o aktualizacje.
Wyjątkiem mogą być smart kontrakty, które są tak zwanymi Proxy. Dlatego zawsze trzeba sprawdzać ja jakiego typu kontraktem mamy do czynienia.
Przygotuj swoje środowisko na front-endzie!
Ja osobiście wybieram create-react-app (cra) czyli paczkę do inicjowania projektu w frameworku React. Jest też gotowy szablon pod TypeScripta. Polecam pisać w TypeScripcie. Większość narzędzi do pisania aplikacji web3, całkiem dobrze go wspiera.
Następnie instaluję ethers.js i w zasadzie jestem gotowy do pisania front-endu dla web3.
Wiadomo, na pewno zajdzie potrzeba instalacji czegoś jeszcze, chociażby do stylowania Twojej aplikacji. Jest mnogość sposobów jak sobie z tym poradzić, dlatego nie poruszam tematu stylowania ani używania bibliotek do JavaScriptu lub Reakta.
Biblioteka ethers.js:
https://github.com/ethers-io/ethers.js
Biblioteka web3:
https://github.com/ChainSafe/web3.js
Przykładowe ABI dla smart kontraktu (tu ERC20):
https://gist.github.com/veox/8800debbf56e24718f9f483e1e40c35c
Infura docs we3 libraries:
https://docs.infura.io/infura/learn/web3-libraries
Artykuł z listą EVM compatible blockchains:
List of all EVM blockchains and how to add any EVM network to Metamask
Przykładowy blockchain, który nie jest kompatybilna z EVM – Solana:
https://solana.com/
Narzędzie Create React App + TypeScript:
https://create-react-app.dev/docs/adding-typescript/