Introduction to Web 3.0

1. What is Web 3.0?

Web 3.0 is the third generation of Internet services connecting each other decentralized to bring the best user experiences and personally. Web 3.0 was built from AI, machine learning, Semantic Web, it uses the confidential blockchain system to keep data safe and confidential.

Web 3.0 can change the Internet.

Highlights of Web 3.0:

• Semantic Web: The content of the web will be displayed based on effectively analyzing the meaning of words.
• Artificial Intelligent (AI): Web 3.0 uses artificial intelligence to provide more accurate results faster through natural language processing where computers and machines will understand information more like humans.
• Graphic 3D – Metaverse: Three-dimensional design will be used in websites and services to provide a clear visual image to users. Examples: museum tour guides, computer 3D games, Metaverse - human virtual worlds …
• Without middlemen: Data and transactions are shared directly through a decentralized network, eliminating the need for a middleman like Google or tightly controlled payment systems like a bank.
• Stop data breaches: You'll be in charge of the data. A hacker cannot manage your data unless he also has complete control over the blockchain network. Big businesses cannot modify or benefit from the sale of your data to third parties.
• Data will exist forever: If you ever learn about blockchain, you will realize that no one has the right to view or remove any of your loving games, text messages, or other Web 3.0 data as long as the internet is operational. Similar to this, network services won't be dependent on servers or management firms; instead, they'll keep running as long as there are still users.
• Information is transparent and trusted: Thanks to Web 3.0 blockchain technology, which also guarantees the security and privacy of user data and protects identity.

2. Web 2.0 application architecture

Figure 1: Web 2.0 Application Architecture

Web 2.0 includes the main components 

• Frontend
• Backend
• Database
• Cache (optional)
• Queue (optional)
• Search engine (optional)

Overview of application architecture on web 2.0:

• Database is used to store data, back-end retrieves data from database, processes data and sends it to front-end.
• Then, the front-end will use that data to display to the user, the front-end will also allow the user to interact to update the data in the database.
• In addition, there are some additional components that may be needed, for example a cache used to temporarily store data for faster access. Queue is a queuing mechanism, for example when the server has a lot of requests coming in, these requests will be put into the Queue to be processed in turn to all requests. In addition, Search engines can also be used in web 2.0, for example Elasticsearch,...

3. Web 3.0 application architecture

      Figure 2: Web 3.0 Application Architecture

Web 3.0 includes the main components:

• Front-end
• Smart contracts run on Ethereum Virtual Machine
• Ethereum Virtual Machine
• Ethereum Block

With web 3.0, the most important components remain roughly the same as with web 2.0.

For example, the Ethereum blockchain will be similar to the back-end and database in web 2.0, which will perform the logical processing and data storage. The back-end in web 2.0 will be similar to smart contracts on the Ethereum Virtual Machine, important data will be saved in the blockchain through blocks. The rest of web 3.0 is the front-end, the front-end will connect to smart contracts, allowing users to interact with the blockchain, send transactions, exchange tokens back and forth.

What is a smart contract?

• Smart contracts are computer programs that function on the blockchain. A smart contract works like a digital contract that adheres to a specific set of rules. These rules are predefined by a piece of computer code that each node in the network must replicate and uphold.
• The establishment of Permissionless protocols is made possible by Smart Contracts, which are essentially just a piece of code that runs on a distributed system (blockchain) (i.e. without authorization). It denotes:
• Through the blockchain, two parties to a contract can enter into agreements without having to know or trust one another's identities.
• If the terms of the contract are not met, they can guarantee that the agreement won't be upheld.

How does the frontend code communicate with smart contracts on Ethereum?

Step 1: The front-end sends a transaction to a node

Step 2: This node will send this transaction to all the remaining nodes in the blockchain.

Step 3: A certain miner will choose to execute this transaction of yours, and after execution will send the result to all nodes in the blockchain system to certify, verify this transaction has been executed, and save the data on blockchain.

How to send/broadcast transactions?

To send transactions to the blockchain's system, we will have two ways:

Approach 1: Set up your own system of nodes, then install Ethereum blockchain software, such as Go-Ethereum (https://github.com/ethereum/go-ethereum)

Approach 2: Using a system of pre-built nodes by third-party units such as Infura, Alchemy ... 

Just like when we deploy a web application to the server, it is not necessary that we buy the server and set up the server ourselves, we can use third-party services like Digital Ocean, AWS, Google Cloud, etc...

4. Web 3.0 Architecture with providers

Figure 3: Web 3.0 Application Architecture with providers

In this section we will present the duties of service providers. 

The flow of activity in the blockchain would go like this:

• The front-end, when it wants to interact with smart contracts, will have to send transactions or get information from node providers through the JSON RPC protocol, these node providers will broadcast that transaction, or get information. from the blockchain and send it back to the front-end.

How do we prove that the transaction is your?

• The next piece in the web 3.0 architecture, first we have to answer the question, when we send a transaction to the blockchain, how do we verify that the transaction was submitted by us?
• The answer is that in web 3.0 architecture, we use a tool called a wallet (wallet signer). For example, wallets such as Metamask, Ledger, Trezor, Krystal, ...
• The purpose of using a wallet is to sign your transactions, to certify that the transaction originated from you and not from anyone else.

5. Web 3.0 Architecture with signer

Figure 4: Web 3.0 Application Architecture with signers

• When the front-end wants to read data from the blockchain, it reads it directly through the node providers.
• When the front-end wants to perform a transaction (write to the blockchain), the frontend must first sign the authentication via the wallet (Metamask), then the transaction will be sent to the node provider and broadcast to the whole system.

6. Storage on the Blockchain

• We can store all the data on the blockchain, but to store all your information on the blockchain (e.g. photo albums) is extremely expensive, because that data is stored in every node. in the blockchain, and each save costs a transaction fee.
• Generating a storage mechanism for the blockchain: P2P storage network
• For example: IPFS, Swarm, …

7. Web 3.0 Architecture with storage

• When you want to store data, you can use IPFS/Swarm for storage, the data will be stored on many nodes, and the data will not be easily lost like if you save it in a traditional server. In particular, these data should be of non-important, non-money-related types, such as photo albums, or other non-essential data that does not affect your wallet.

8. Fully decentralized web 3.0 application

Figure 5: Web 3.0 Application Architecture fully decentralized

• Why is this web 3.0 architecture called decentralized if the frontend code is still deployed on a traditional server?
• We can deploy frontend code to IPFS/Swarm. When users visit your website, they can access data directly from IPFS/Swarm.

9. Querying on the Blockchain

Figure 6: Web 3.0 Application Architecture with querying

• We can completely use functions/scripts to call data from smart contracts, and use code to read data directly from nodes.
• The problem is that when faced with complex data, we need to handle computation, if we want to access quickly, we have to get the data out from the node and process it, then save it in our own database. Now data is no longer decentralized. This data is managed by ourselves, if the server fails, it cannot be accessed or queried.
• Solution to query on blockchain: The graph.
• The graph: 
• Create index data on blockchain.
• Query indexed data through GraphQL protocol.
• Now The Graph has implemented a decentralized model, it will not be necessary to query through a single server.
• Another solution similar to The Graph is SubQuery.

10. Advantage of Web 3.0

•  Privacy and data control:

Data encryption will most importantly benefit end users by keeping their information private. There will be no conditions under which the encryption can be cracked. It will stop big businesses like Google and Apple from having access to or using people's private information for their own gain. Users will therefore have complete ownership and privacy over their data.

• Seamless service:

Users will always have access to the data thanks to decentralized data storage. Multiple backups will be provided to users, benefiting them even in the case of a server failure.

Furthermore, no agency or body of the government has the authority to halt any service or website. As a result, there is a lower chance of account suspension and denial of services provided.

• Transparency:

End users monitor their data and test the platform's code regardless of whatever blockchain platform they utilize. The majority of blockchain platforms are created by nonprofits, which implies that they offer an open source blockchain platform that allows for open design and development procedures. By doing this, the user will become less dependent on the company creating the platform.

• Open data accessibility:

Data will be available on any device, anyplace. By enabling smartphones and other linked devices to access data on computers if they are synchronized, data collecting can be improved and made more accessible to people worldwide. 

From smooth payments to deeper information flows to dependable data transmission, Web 3.0 will further scale interactions. This will occur as a result of web3, which will enable direct communication with any machine without the need for a middleman.

•  Unlimited platform:

Users can build their own addresses and engage with the network because anyone can access the blockchain network. On this network, users cannot be excluded because of their social makeup, gender, income, or geography. Users will find it simple to rapidly transfer their things to any location in the world thanks to this capability.

• Create a unique profile:

Users no longer need to make separate profiles for various platforms thanks to web 3.0. Users will have complete ownership over any provided information and a single profile will function on every platform.

No business is permitted to access a user's data or check its accuracy without that user's consent. Users can choose whether to sell their data to advertising or brands and whether to disclose their profile.

• Advanced data processing:

For complex knowledge creation and problem-solving tasks, Web 3.0 is helpful. It filters through a lot of data to find the important information using artificial intelligence. Forecasting client demand and providing individualized customer care, both of which are crucial for expanding enterprises, will also be useful to users.

11. Disadvantage of Web 3.0

•  Advanced device requirements:

The advantages of web 3.0 will not be available on less sophisticated computers. To increase the technology's accessibility for more people worldwide, device features and characteristics will need to be increased. Only a few groups of people will currently have access to web 3.0.

•  Web 1.0 sites will become obsolete:

Any website built using web 1.0 technology will be rendered useless if web 3.0 is adopted as the standard on the Internet. In order to accommodate new technology, outdated technology cannot upgrade its functionality. As a result, those websites will be substantially more out of date and will no longer have an advantage over more recent ones..

• Not ready for mass adoption yet:

Web 3.0 technology is becoming increasingly intelligent, effective, and available. But the technology is still not quite prepared for general use. To suit consumer needs, further study is required on technical developments, privacy regulations, and data usage.

• Demand for reputation management will increase:

Reputation management will be a bigger problem than ever as web 3.0 makes user information more accessible and less anonymous. In other words, brands and businesses will need to keep up their online presence, repute, and image. 

To keep ahead of their rivals, businesses will need to assist clients in gaining crucial market intelligence, priceless business insights, interesting content, and cutting-edge internet marketing. Reputation management will therefore be more crucial than ever.

•  Complex function

New users are reluctant to utilize Web 3.0 since it is a difficult technology. It combines antiquated web tools with cutting-edge technologies, such as blockchain and artificial intelligence, as well as the interaction between users and the expansion of Internet usage. 

Because only sophisticated equipment can handle web 3.0, it will be challenging for any person or company that cannot buy such gadgets. Because technically competent users will benefit the most from this technology, web 3.0's complexity is likely to hinder its universal adoption.

12. Web 3.0 application

• NFT: Non-fungible Tokens (NFTs) are distinct tokens that are hashed using a cryptographic algorithm and stored in a blockchain.
• DeFi: Decentralized Finance is an innovative Web 3.0 application that uses decentralized blockchain as the foundation to free financial services from the limitations of banking infrastructure. standard concentrates.
• Cryptocurrencies: Through Web 3.0 apps, a new financial system that strives to be distinct from the conventional financial system is formed, including cryptocurrencies like Bitcoin.
• Decentralized applications, or dApps: are software programs that run on top of the blockchain and make use of smart contracts to record programmed service delivery in an unchangeable ledger.
• Cross-chain bridges: In the Web 3.0 era, there are numerous blockchains, and these bridges offer some sort of communication between them.
• Decentralized autonomous organizations, or DAOs: are designed with the possibility of developing into organizational entities for Web 3.0 services, offering some structure and governance in a decentralized manner.

13. Build web 3.0 with smart contract and GOERLI FAUCET network

• Step 1: Building web application
• Using Vite to init React application.
• Create the UI like in the image below.

• Step 2: Create an smart contract:
• Run command to init smart contracts folder structure:

npx hardhat

• Install packages:

npm install --save-dev hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

• Write script in scripts/deploy.js:

• Step 3: Install Metamask extension and create an account:
• Please choosing Goerli test network

• Create an GOERLI FAUCET account to send ETH to your Metamask wallet (create through Alchemy)
• Copy address of account that has been just created above.

• Step 4: Go to Alchemy and create a new application, select Goerli network:

• Step 5: Go to the project just created above, click view key and copy HTTPS link:

• Step 6: Go to Metamask extension and export an private key:

• Step 7: Create file hardhat.config.js

With  is in step 5

With is in step 6

• Step 8: Run command to deploy smart contracts:

npx hardhat run scripts/deploy.js --network goerli

•  Step 9: Connect Metamask account to the website

• Step 10: Try to send 0.005 ETH from Account 1 to Account 2:

• The result transactions:

14. Conclusion

• The newest internet technology is known as Web 3.0. To make internet communication as realistic as possible, it makes use of blockchain, artificial intelligence, and machine learning.
• Future trends will inevitably gravitate toward Web 3.0. And for individuals who appreciate this cutting-edge technology, Web3 development is still a vibrant industry with plenty of prospects.
• To become a Web 3.0 developer, you need:
• TypeScript.
• JavaScript. If you are familiar with React, it has a benefit. For the frontend of most Web 3.0 projects, React JS is used.
• The ability to use NextJS is helpful.
• Databases and operating systems are fundamental ideas in computer science.
• The cornerstone of blockchain is knowledge of elliptical curve cryptography, private keys, basic hash functions, and asymmetric key cryptography.
• Programming language for Blockchain development: Solana, Rust, Solidity,...
• Research about Cryptocurrency wallets: Metamask,...
• Gain knowledge about financial transaction interpretation.

Resources

• Demo source code: https://bitbucket.org/nhatminhsts/web-3-application/src/master/
• Link video demo: https://drive.google.com/file/d/1yab76nCWKL0rOWbys44CLH2IMLL69OjX/view

References

• Web 3.0
• Blockchain
• Ethereum
• Goerli Faucet
• Alchemy
• Metamask
• Etherscan
• Go Ethereum
• Web 3.0 blog