Web3: Jak a proč psát frontendové aplikace

Jedním z nejčastěji skloňovaných termínů ve světě internetu je poslední dobou bezpochyby výraz Web3. Co tento decentralizovaný internet budoucnosti přinese vám, vývojářům a uživatelům, a jak ho využít ve svůj prospěch? V tomto článku se podíváme, jaké možnosti web 3.0 nabízí z pohledu frontendu, a na konkrétním příkladu si ukážeme, jak je využít při vývoji aplikací.

Web x.0

Pojem web3 (nebo také web 3.0) můžeme chápat jednak jako technologický koncept přímé komunikace webu s blockchainem a jednak také jako další směr, kterým se celý webový svět a tedy i internet ubírá.

Web3 je tak dalším krokem po webu 1.0, který byl typický statickým obsahem tvořeným výhradně vývojáři/tvůrci webu, a následném webu 2.0, což je web, jak ho známe nyní. Pro web 2.0 jsou typické interaktivní aplikace, které dokáží spravovat a plnit obsahem sami uživatelé. Vzniká tak nespočet blogů, redakčních systémů, kolaborativních platforem, sociálních sítí a dalších webových aplikací.

Web 2.0 je tak sice tvořen hlavně uživateli, ale na pozadí stále stojí na centralizovaných službách provozovaných autoritami, které nejenže vlastní všechna uživatelská data, ale mají nad nimi i aplikacemi samotnými neustálou kontrolu.

Web3

Hlavním tématem webu 3 je tak právě decentralizace a nezávislost na centrálních autoritách. Frontendové web3 aplikace neboli DApps (decentralized apps) proto nejsou napojeny na běžný backend server nebo databázi, ale komunikují přímo s blockchainem.

Typická web3 aplikace pak má tyto části:

• frontend – na základě vstupů od uživatele vytváří a posílá požadavky do smart contracts,
• peněženka – podepisuje transakce a posílá je do blockchainu,
• smart contracts – obsahuje hlavní byznys logiku aplikace.

Jak vytvořit jednoduchou frontendovou DApp

Následující část se zaměřuje na praktickou ukázku propojení frontendu s krypto peněženkou MetaMask a základní komunikaci se smart contractem.

Krypto peněženka

Krypto peněženky hrají ve web3 zásadní roli, protože kromě funkce peněženky slouží i jako online identita, která umožní uživateli se ověřit a zaplatit bez potřeby kontaktovat běžné platební nebo identifikační služby.

Pro potřeby tohoto příkladu využijeme peněženku MetaMask. Pokud nemáte existující MetaMask peněženku, stáhněte si rozšíření do svého Chrome prohlížeče a peněženku si vytvořte. Po úspěšném vytvoření byste měli vidět peněženku i se svým zůstatkem.

Spojení web3 aplikace s peněženkou

Pro napojení krypto peněženky do React aplikace využijeme DAppProvider z knihovny @usedapp/core, který nám vytvoří potřebný context a tím umožní volání dalších metod z této knihovny uvnitř vnořených elementů, což je v následující ukázce komponenta App (zdrojový kód komponenty).

Poskytnutý context nám uvnitř komponenty umožní volat jednotlivé funkce z knihovny @usedapp/core, pomocí kterých dokážeme komunikovat s peněženkou či vlastním smart contractem. Pomocná předpona use napovídá, že se jedná o React Hooky, které zajistí, že data v komponentě budeme mít stále aktuální. Pomocí hooků dostaneme potřebnou informaci z peněženky, kterou pak ještě pomocí knihovny @ethersproject/units zformátujeme na čitelnou hodnotu. V peněžence si bez problému můžete přepínat mezi účty, jejichž hodnota se vám automaticky bude zrcadlit ve vaší web3 aplikaci.

Komunikace dApp se smart contractem

Pro testování metod, které nám smart contract nabízí, využijeme webové IDE Remix. Ta funguje velmi podobně jako třeba Postman pro testování REST API. Umožňuje nám se připojit na smart contract zveřejněný na konkrétní adrese a volat konkrétní metody se zadanými vstupy.

Na obrázku jsou vidět dva typy metod, kterými jsou RPC call (modré), které data pouze čtou, a transakce (oranžové), které modifikují stav sítě.

Spojení web3 aplikace se smart contractem

Výše zmiňovaná knihovna @usedapp/core poskytuje opět prostřednictvím custom hooků interface jak pro RPC calls, tak pro transakce.

Pro volání RPC call metody využijeme useContractCall, který jako argumenty bere:

• interface smart contractu vytvořený pomocí ABI souboru (JSON definice a popis poskytovaných metod),
• adresu na které smart contract běží,
• jméno metody (balanceOf),
• konkrétní argumenty vybrané metody.

V následující ukázce tento hook vrací přímo pole, kde na prvním místě je stav vašeho účtu v této konkrétní aplikaci.

Pro volání transakce musíme naopak využít deklarativního přístupu pomocí hooku useContractFunction, pro který musíme vytvořit contract objekt a předat název metody. Tento hook vrací stav transakce i s případným errorem a konkrétní funkci.

Zavoláním metody transakce se automaticky kontaktuje vaše krypto peněženka, která dostane informaci o vyvolané transakci a nabídne vám volbu potvrzení či odmítnutí. Tímto způsobem je transakce zabezpečena a řízena vaší peněženkou a ne danou aplikací.

Pro sledování veškerých interakcí web3 aplikace se smart contractem je možné využít službu EtherScan, kde stačí jen zadat adresu smart contractu přímo do URL https://etherscan.io/address/ a máte perfektní přehled o tom, co se v aplikaci děje.

Web3: nová éra webových aplikací

Web 3.0 představuje nový koncept architektury i business modelu webových aplikací. Díky přímé komunikaci frontendové aplikace s blockchainem odpadá nutnost svěřovat privátní klíče či tokeny provozovatelům služby, vše má pod svou kontrolou uživatel. 

Představili jsme si ukázku frontendové aplikace napojené na Ethereum blockchain. Tímto způsobem vyvíjíme web3 aplikace v Ackee, takže pokud hledáte pro svůj projekt vývojáře, neváhejte se nám ozvat!

Samostatné téma nad rámec tohoto článku je, jak psát “backend” neboli zmíněný smart contract, s kterým web3 frontend aplikace komunikuje. S tím vám případně pomůže naše sesterská firma ackeeblockchain.com.

Zdroje

https://github.com/ethereumbook/ethereumbook/blob/develop/images/architecture_diagram_webapp.png