Public blockchains enable us to build decentralized web applications (Dapps) that are censorship-resistant and have built-in economic incentives.
The most popular blockchain app protocol is Ethereum, and it is remarkably similar to the frontend UI / backend services we are already familiar with in web application development.
In this article, I will use an example to teach you how to create and publish your first Dapp. Complete this tutorial, and you will win 50 ROSE tokens from the Oasis Foundation!
Today’s big tech social media are plagued by the twin evil of censorship and hate speech. Is there a way to make it easy for everyone to express themselves, but also make it hard to spam and bully? Blockchain technology provides the tools for decentralized computing that could potentially remove our dependency on centralized platforms. A great example of blockchain applications is Bitcoin. It is decentralized money without a bank or country. Could the blockchain technology help to decentralize social media applications? Public blockchains are censorship-resistant and have built-in economic incentives to punish bad behaviors.
Ethereum and Oasis
Most of today's blockchain applications are built on the Ethereum protocol. If Bitcoin is a decentralized database for monetary transactions, Ethereum is a decentralized operating system that runs server-side applications. Applications deployed on Ethereum blockchains are called smart contracts.
The Ethereum blockchain, with a "market cap" of close to $40 billion as of Oct 2020, is one of the most famous public blockchains. Many other popular public blockchains, including ETC, CMT, RSK, Athereum, Binance smart chain, support applications written for the Ethereum protocol. It is analogous to public clouds all supporting JVM and Node.js applications on their networks. Each of these Ethereum compatible blockchains competes on the value-added service they provide, such as performance, cost, privacy, governance, energy efficiency, etc.
The Ethereum mainnet itself is a victim of its own popularity and success. It is often congested resulting in high transaction fees and slow confirmation time. It sometimes costs over $50 per smart contract function call, and requires minutes or hours before the function call result is finalized.
In this tutorial, we will create an Ethereum-compatible social media Dapp on the Oasis blockchain. The Oasis blockchain was started by well-known computer security researchers at the University of California at Berkeley. It aims to build a privacy-first blockchain, where the on-chain data could be private and confidential, while all the nodes can remain decentralized and untrusted. After 2 years of development, the team has built a public blockchain that is very fast and scalable while preserving privacy. For developers, we can deploy Ethereum applications on Oasis network through the Oasis Ethereum ParaTime nodes.
The term ParaTime refers to a Parallel Runtime. The design of the Oasis blockchain allows each node to run its own runtime software and to provide services to the public. The Oasis Ethereum ParaTime is run by a set of Oasis nodes that opted to support the Ethereum protocol.
The Oasis Ethereum blockchain is currently free to use and confirms transactions in 6 seconds. For this tutorial, the Oasis foundation is also providing 50 ROSE tokens, which is Oasis's native cryptocurrency, to everyone who completes and publishes his or her Dapp.
The Dapp for free expressions
The decentralized nature of the public blockchain promotes free speech. Anyone can record data on the blockchain by paying a transaction fee to the network. Of course, node operators and users are still subject to local regulations. But as Bitcoin and Ethereum have shown, blockchain networks are censorship-resistant at the protocol level.
While anyone can comment on your publishes messages, they will have to pay you a price in cryptocurrency in order to have their message recorded. You can set the price for all your published messages. That makes it costly to spam or hate.
We named this Dapp OasisTweet.
Intrigued? Let’s get started.
Load the web IDE
You can load the web-based IDE by going to the link below. There is no software to download!
Now you can see two sample projects. The first one is a simple “hello world” to show you the very basics of an Ethereum smart contract and Dapp. For the purpose of this tutorial, select the second sample app called OasisTweet.
Figure 1. Select the OasisTweet project.
Get some test OETH from a faucet
Since this is the first time you start this IDE, it creates several new Ethereum account addresses for you to use. You will need to have some OETH tokens in those accounts so that you can pay “gas” to deploy and use your smart contracts. Click on the Accounts tab on the IDE and copy the selected default address.
Figure 2. The auto-generated addresses.
Next, go to the OETH developer faucet below, and paste your address. It takes about 10 seconds for the OETH to be deposited into your account.
Figure 3. Get a test OETH for your account address.
Solidity smart contract
Now, let's go back to the IDE, and review the smart contract. It is written in a JavaScript-like programming language called Solidity. The vast majority Ethereum smart contracts are written in Solidity at this time. But support for additional languages is coming.
As you can see, it has data fields for an URL to an image and text message. The image and the message will be recorded on the blockchain and displayed on the Dapp web page you create later.
It also has an array called
commentsaddComment()contract OasisTweet {
address owner;
string public message;
string public image;
uint256 public price;
struct Comment {
string name;
string comment;
bool isValue;
}
mapping (address => Comment) comments;
... ...
function OasisTweet (string _message, string _image, uint256 _price) public {
owner = msg.sender;
message = _message;
image = _image;
price = _price;
}
function addComment (string _name, string _comment) public payable {
require(msg.value >= price);
if (!comments[msg.sender].isValue) {
addrs.push(msg.sender);
}
comments[msg.sender] = Comment(_name, _comment, true);
}
}Deploy the smart contract
Click on the Compile button and the IDE compiles the smart contract into Ethereum bytecode.
Figure 4. Compile the smart contract.
Before you deploy the contract to the blockchain, fill out your message, image URL, and price you demand of each comment. Those will be stored on the blockchain with the contract.
Figure 5. Populate your message, image URL, and price before deploying the contract.
Then click on the Deploy on the chain button to deploy the smart contract to the Oasis Ethereum ParaTime blockchain. It will take about 10 seconds to confirm the contract by Oasis blockchain validators. You will see a success message in the log panel. If you encounter an error at this point, make sure that your default account has an OETH balance!
Figure 6. Successful deployment of the contract. You must have OETH in your default address.
Web app
Next, let’s build a web UI that interacts with the on-chain smart contract we just deployed. Switch over to the Dapp tab. The HTML section is the web page. All the data fields such as image URL, message, and comments are HTML placeholders and will be filled in by JavaScript in the JS tab.
Figure 7. The web app has HTML and JS sections.
The
reload()instance.addComment()var contract = web3.ss.contract(abi);
instance = contract.at(cAddr);
instance.message(function (e, r) {
$("#message").html(r);
});
instance.image(function (e, r) {
$("#image").prop("src", r);
});
instance.price(function (e, r) {
price = r;
$("#pricealert").html("Requires " + price + " wei to comment");
});
instance.addComment ($("#name").val(), $("#comment").val(), {
value: price,
gas: 499000,
gasPrice: 1
}Try the web app
Click on the Run button on the IDE to run the web app. You will see the web page in the right panel of the IDE. You can now interact with it by paying and leaving a comment.
Figure 8. Run the Dapp web UI in the IDE.
Publish it
Finally, you are ready to publish your Dapp! You can take the HTML and JS content and put them on any static web page host. Or, you can click on the Publish button on the IDE.
Figure 9. Publish the Dapp web page.
The published web page is a link you can share anywhere. For users who want to leave a comment, they will need a MetaMask wallet connected to Oasis Ethereum, or fund OETH in their default address on the web page.
Figure 10. The Dapp web page is accessible to all. But commenters need to pay OETHs.
Conclusion
The smart contract is the "serverless" backend and the JavaScript application is the frontend. If you are interested in learning more about Ethereum Dapp development, you can check out my book Building Blockchain Apps.
In this article, we have created and published a Dapp on a popular Ethereum compatible public blockchain. Go ahead and collect your 50 ROSE tokens. You can further deploy ERC-20 tokens from the BUIDL IDE tool and trade them on Oasis Ethereum ParaTime's Uniswap DEX to earn more ROSE tokens!