Building a Web3 Application (D'App)
By Alejandro Ballesteros, Decasonic
During the summer after my junior year of college, I interned at a very exciting biotech startup. LanzaTech was working on creating processes to recycle atmospheric carbon emissions by converting them into ethanol. The entire conversion process depends on the success of several important metabolic pathways in strains of bacteria. Furthermore, these processes can be optimized and improved through successful experimentation and iteration, a major focus of the synthetic biology team at this startup.
I was tasked with developing an application that would allow scientists to input experimental metabolite data and output a time series visualization of the process for presenting and comparing trials in real time. I developed this application using Django with Bootstrap and CSS for the front end. It was pretty straight forward using a traditional Model-View-Controller (MVC) framework.
Web applications consist of two portions that are commonly referred to as front and back ends. The front end is the code that will run on the user’s web browser, while the back end handles the code that we want to run on our server. In Web2 applications, the server side or back end code is typically the code that manages and stores the “model” that we are keeping track of with this framework. This code typically consists of data storage and handling from one or more centralized databases. There are many tools available for building Web2 apps that can be used depending on the exact use case of an application and prior knowledge of the developers working on it.
In order to create a Web3 application, we need to understand how smart contracts work as they are the fundamental building blocks of Web3 apps that allow us to interact with decentralized blockchains. A smart contract is just a functional executable program residing at an address on a blockchain. You can think of it like a digital vending machine on a blockchain. It has built in logic that allows users and other smart contracts to interact with it in pre-specified ways.
The basic building blocks of a smart contract include state variables, functions, and events.
Source: Scientific Research Publishing (https://www.scirp.org/journal/paperinformation.aspx?paperid=85741)
State variables allow the contract to keep track of all the data that is necessary to accomplish the smart contract’s intended purpose. You can think of them as stored values. For example, if I need to keep track of the total balance of Ether transferred into my smart contract, I would create a state variable to do this.
Functions allow us to specify the actual behavior of the smart contract; whether specific functionality is internal and only accessible to the smart contract itself or accessible to other addresses on the blockchain. For example, we could create a function that flashes a smart light bulb when someone deposits Ether into our smart contract.
Events allow smart contracts to communicate that certain behavior is occurring in the smart contract to the front end of the application and build in asynchronous functionality. For example, if I create an event in my smart contract to alert my front end when someone has transferred ether into the smart contract, I can immediately update the front end to display the updated value of ether in my smart contract to a user.
Here is a very basic example of a smart contract that accepts funds for a community of users and disburses them when a target amount of funds are raised:
In this example, the state variables are the desired funds we’d like to raise in the account, the wallet addresses of all of the members of the community, and the total funds in the account at any given time. Notice that I’ve used the access modifier “private” so that other addresses on the blockchain cannot access these variables.
In our case, there are only two functions: one for receiving ether, and one for disbursing funds to every member of the community. Additionally, if we were designing a front end we would want to know when funds were deposited and disbursed, so we’ll keep track of that using events.
Building Web3 Applications isn’t that hard!