Introductie: Het Web3-ecosysteem heeft voorrang gegeven aan de back-end ontwikkeling van op blockchain gebaseerde projecten, terwijl er weinig tot geen aandacht is besteed aan de front-end stack. De frontend verwijst naar de ontwikkeling van de grafische gebruikersinterface (UI) van een applicatie. Het beschrijft hoe gegevens worden gepresenteerd en gebruikt door de gebruiker in de browser; eigenlijk hoe de applicatie in het algemeen presteert. In dit artikel zullen we de Web3UI-kit bespreken, de eerste Web3-front-end bibliotheek, en we zullen een dApp-dashboard bouwen met behulp van Moralis React SDK.
Vereisten: Voor deze tutorial heeft u het volgende nodig:
Wat bouwen we met Web3UI-kit? In deze tutorial bouwen we een dApp-dashboard dat alle NFT’s en het saldo van een aangesloten gebruiker op het Mainnet, Kovan, Rinkeby, Goerli en het Ropsten Testnet weergeeft. Na het voltooien van deze tutorial weet u hoe u een Web3-frontend opzet en bouwt met Web3UI-kit-componenten.
Hoe het werkt: Hieronder vindt u de basisstroom van hoe ons dApp-dashboard zal werken:
1. Gebruikers loggen in door hun portemonnee te verbinden:
2. Verbonden gebruikers worden doorgestuurd naar hun dashboard: demo.
Hieronder vindt u een demovideo van het dApp-dashboard dat we in deze tutorial bouwen. U kunt ook de live versie bekijken van wat we aan het bouwen zijn.
Wat is de Web3UI-kit? Web3UI-kit is een open source, lichtgewicht, herbruikbare Web3-UI-component. Het is ontwikkeld en wordt momenteel onderhouden door het Moreel-team. Het is vergelijkbaar met de UI-componentenbibliotheek van Web2 zoals Chakra Interface en Material Interface, maar met meer functionaliteiten.
Onderdelen van de Web3UI-kit: De Moralis Web3UI-kit biedt een gebruiksvriendelijke gebruikersinterfacecomponent die uw dApp-ontwikkeling sneller kan maken. Hieronder staan enkele van de Web3UI-kits die we zullen gebruiken om ons web3-dashboard te bouwen:
1. BannerStrip: De Web3UI <BannerStrip /> is een bovenste navigatiecomponent die kan worden gebruikt om een belangrijke mededeling aan de gebruiker weer te geven.
2. NFTBalance: De Web3UI <NFTBalance /> is een UI-component die alle NFT’s ophaalt en weergeeft die eigendom zijn van een bepaald adres op een gespecificeerde blockchain.
3. ConnectButton: De Web3UI <ConnectButton /> is een authenticatieknop waarmee de gebruiker zijn portemonnee kan verbinden met of loskoppelen van onze dApp. Moralis zal alle authenticatielogica onder de motorkap afhandelen.
4. useNotification: Wanneer er een evenement of actie plaatsvindt in onze dApp, kan de Web3UI useNotification() hook worden gebruikt om een nieuwe melding aan de gebruiker uit te zenden en weer te geven via het <Notification /> bestanddeel.
5. Widget: De Web3UI <Widget /> component is een vak dat kan worden gebruikt om een datasetlabel en de waarde ervan weer te geven.
6. Todo: De Web3UI-kit biedt een <Todo /> lijst UI-component met CRUD-functionaliteit uit de doos. Met slechts een paar regels code implementeert u een functionele takenlijst in uw dApp.
7. Hero: De Web3UI-kit <Hero> component kan worden gebruikt om snel een hero-sectie te maken voor een dApp-bestemmingspagina.
8. Credentials: De Web3UI <Credentials /> component kan worden gebruikt om de zichtbaarheid van gevoelige gegevens aan de voorkant, zoals wachtwoorden of tokens, te wijzigen.
9. Typography: U kunt het lettertype van uw dApp verbeteren met het Web3UI-kit <Typography /> bestanddeel.
U kunt de volledige lijst met componenten van de Web3UI-kit hier bekijken.
Het dApp-dashboard bouwen: In deze sectie combineren we alle Web3UI-kit-componenten die we hierboven
