An Nguyen
CEO of SparkMinds

The previous article touched upon some definitions of Web 3.0 and how it operates. In this next blog post in the series, let’s delve into the implementation of a website based on the standards of Web 3.0 and Blockchain. 

To refresh your memory, you can revisit the previous article here!

Let's run a Web 3.0 - tamsudev.club

A. Scenario

Create a web page simulating tamsudev.club.

All data is stored on IPFS (a distributed file system that connects devices peer-to-peer, distributing storage data using the P2P protocol, considered as an alternative to HTTP and a decentralized database of the blockchain). 

ipfs:// & http://

Flow of this web page:

  • When clicking on any company on the homepage, the web page will redirect to the company review page.
  • The comment data from the company review page, upon submission, will be stored on IPFS.
  • Once successfully stored, IPFS will return a unique CID (Content Identifier) corresponding to each stored data, and then save the CID to the Smart Contract.
  • To retrieve data, we only need to perform the reverse process, retrieve the CID from the Smart Contract, and use it to call IPFS to retrieve the data. 

B. Steps to Follow

1. Proceed to Create The Basic Website Interface

We need to determine the functions of each page and the data to be stored for each page:

Figure 1. Home page of Tamsudev
Figure 2. Review page of Tamsudev
Figure 3. Forum page of Tamsudev
Figure 4. Use Infura to store data on IPFS
Figure 5. The private key of the Goerli testnet wallet
Figure 6. Connect to Alchemy
Figure 7. Upload IPFS data function
Figure 8. Get data from an array of CIDs function

2. Create our own Smart Contract

Figure 9. Variables in the Smart Contract
Figure 10. The methods we will have in the Smart Contract
Figure 11. Create an additional deploy file and configure the hardhat.config.js file
Figure 12. Deploy the Smart Contract

3. Search for Smart Contract Information

Figure 13. Search for Smart Contract info
Figure 14. goerli.etherscan.io_ Transaction History
Figure 15. goerli.etherscan.io_ Transaction Details
Figure 16. goerli.etherscan.io_ Transaction Details - Input Data
Figure 17. goerli.etherscan.io_ The CID we passed
Figure 18. goerli.etherscan.io_ New Events Tab
Figure 19. goerli.etherscan.io_ Contract Section
Figure 20. goerli.etherscan.io_ Events Tab

4. Save the new address of the Smart Contract

Figure 21. Save the new address of the Smart Contract in the .env file
Figure 22. Separate the methods for calling the Smart Contract
Figure 23. Create the _add new company_ function

Let’s take an example of creating a new company named “DylanCompany” with the following parameters:  

Figure 24. Let's take an example of creating a new company
Figure 25. Save the hash to the Smart Contract
Figure 26. How data is successfully saved to the Smart Contract

5. Get company data and display the list of companies on the screen

Below is the function to get company data and display the list of companies on the screen:  

Figure 27. Get company data and display the list of companies on the screen
Figure 28. Retrieve the array of CIDs from the Smart Contract
Figure 29. How we receive the data of the company

Thus, we have completed the basic exercise on interacting with Smart Contracts – blockchain and storing data on IPFS. 

C. Pros & Cons

Pros

  • No intermediaries: The network operates based on peer-to-peer interactions, with transactions and data being directly executed without relying on any intermediaries. 
  • Immutable and permanent data: All data stored on Web 3.0 cannot be deleted or altered, ensuring its permanence and preventing unauthorized modifications. 
  • Services operate 24/7: As internet activities are operated by nodes rather than specific servers, services can run continuously throughout the day. 

& Cons

  • Slower speed: Although decentralized internet offers high security and robust error handling, its speed can be slower due to the need for node verification. 
  • Less user-friendly for newcomers: Current decentralized technologies can be challenging for new users to access, requiring a certain level of understanding of blockchain technology to utilize them. 
  • Enormous junk data: The persistent nature of blockchain data and the requirement for each node to store all data can lead to an increasing volume of data on the blockchain. 

D. Conclusion

Web 3.0 network is currently reliable and secure, but it still has some unresolved disadvantages. However, in the future, Web 3.0 may become the standard for new technologies, and we can expect a more perfect decentralized network that addresses its current limitations. 

Through the practice of the tamsudev website, we have gained a better understanding of the operating methods of a Web3 website and encountered a new decentralized storage solution on the IPFS decentralized platform.

We invite you to reach out to our outsourcing technology firm for consultation and assistance in implementing blockchain solutions. Together, let’s unleash the power of blockchain and shape a future of secure and transparent industries. 

Claim Your Best Service Ever:

SparkMinds - We Are More Than Your Demand And Satisfaction!

WE ARE:

SparkMinds Joint Stock Company - An Outsourcing Technology Firm

EMAIL:

info@demo.sparkminds.net

LOCATION:

Floor 3, Moc Gia Building (M.G), 24A Bau Cat 2 Street, Ward 14, Tan Binh District, Ho Chi Minh City, Vietnam

References

  1. (2023), from https://docs.soliditylang.org/_/downloads/en/latest/pdf/;
  2. Introduction to smart contracts | ethereum.org. (2023), from https://ethereum.org/en/developers/docs/smart-contracts/;
  3.  Welcome to Infura Docs (no date) Welcome to Infura docs – Infura Docs. Available at: https://docs.infura.io/infura/;
  4.  SPARKMINDS J.S.C (no date) GitHub. Available at: https://github.com/orgs/SparkMindsJSC/repositories.