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 from the Oasis Foundation! win 50 ROSE tokens 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 . 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 nodes. Oasis blockchain Oasis Ethereum ParaTime 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 blockchain is currently free to use and confirms transactions in 6 seconds. For this tutorial, the Oasis foundation is also providing , which is Oasis's native cryptocurrency, to everyone who completes and publishes his or her Dapp. Oasis Ethereum 50 ROSE tokens 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 by going to the link below. There is no software to download! web-based IDE http://oasiseth.org/dev/hack 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 tokens in those accounts so that you can pay “gas” to deploy and use your smart contracts. Click on the tab on the IDE and copy the selected default address. OETH Accounts 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. http://faucet.oasiseth.org/ 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 . It allows any user to leave a comment on your Dapp web page. However, it is important to notice the price field and the function. The user must pay the price amount of OETH to YOU in order to leave a comment on your page! comments addComment() contract OasisTweet {
  address ;
  string public message;
  string public ;
  uint256 public price;
  struct {
    string ;
    string ;
    bool isValue;
  }
  mapping (address => ) comments;
  
  ... ...
  
  function OasisTweet (string , string , uint256 ) public { = msg.sender;
    message = ; = ;
    price = ;
  }
  
  function addComment (string , string ) public payable {
    require(msg.value >= price); (!comments[msg.sender].isValue) {
      addrs.push(msg.sender);
    }
    comments[msg.sender] = ( , , );
  }
} owner image Comment name comment Comment _message _image _price owner _message image _image _price _name _comment if Comment _name _comment true Deploy the smart contract Click on the button and the IDE compiles the smart contract into Ethereum bytecode. Compile 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 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! Deploy on the chain 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 function in the JavaScript loads data from the blockchain contract, and populates them on the HTML page. Pay attention to the function. It takes a user comment from the web form, and sends it to the contract in a transaction. In the transaction, the user pays price OETH to the contract in addition to gas fees to the network. reload() instance.addComment() contract = web3.ss.contract(abi);
instance = contract.at(cAddr);

instance.message( {
    $( ).html(r);
});
instance.image( {
    $( ).prop( , r);
});
instance.price( {
    price = r;
    $( ).html( + price + );
});

instance.addComment ($( ).val(), $( ).val(), { : price, : , : } var ( ) function e, r "#message" ( ) function e, r "#image" "src" ( ) function e, r "#pricealert" "Requires " " wei to comment" "#name" "#comment" value gas 499000 gasPrice 1 Try the web app Click on the 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. Run 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 button on the IDE. Publish Figure 9. Publish the Dapp web page. The published web page is . For users who want to leave a comment, they will need a connected to , or fund in their default address on the web page. a link you can share anywhere MetaMask wallet Oasis Ethereum OETH 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. . You can further deploy ERC-20 tokens from the and trade them on Oasis Ethereum ParaTime's to earn more ROSE tokens! Go ahead and collect your 50 ROSE tokens BUIDL IDE tool Uniswap DEX

Binance

Dapp

fees

Second State Releases Scalable Privacy Service at Mozilla Open Labs

Learn Rust, WebAssembly & serverless functions

Too Long; Didn't Read

Download free Tech Leaders Productivity Report!

Earn 50 ROSE tokens in the Oasis Second State Hackathon - A Step by Step Guide

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Easier and faster dapps on the Ethereum Classic blockchain

10 Decentralized Applications Integrate Sui’s Groundbreaking zkLogin Google Authentication

3 Reasons Why Free TON is the 1st Truly Decentralized Blockchain Platform

5 Open-Source Tools You Can Donate to via Kivach, Episode VI: Decentralized Services

5 Web3 UX Innovations That Can Encourage Mass Adoption of Web3 Technology

Easier and faster dapps on the Ethereum Classic blockchain

10 Decentralized Applications Integrate Sui’s Groundbreaking zkLogin Google Authentication

3 Reasons Why Free TON is the 1st Truly Decentralized Blockchain Platform

5 Open-Source Tools You Can Donate to via Kivach, Episode VI: Decentralized Services

5 Web3 UX Innovations That Can Encourage Mass Adoption of Web3 Technology

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps