How To Convert Web App Into A Dapp

You have already built a successful web app. Now, you want to take advantage of the exciting new technology called blockchain.

But how can you convert it into a ‘distributed app’ (DApp)?

In this article, I will show you how to convert a web app into a DApp. I will use the Ethereum platform to show you how you can convert your existing web app into a DApp.

I will start by explaining the concepts of DApps, and their key component- the smart contract. After I have done so, I will explain how you can convert your app into a DApp.

Contents

What is a DApp?
What is a smart contract?
Build DApp development capabilities:
Install MetaMask:
Use Remix IDE:
An example project to turn web app to DApp:
Smart contract variables for decentralizing your web app:
Smart contract functions to port web app to DApp:
Deploy smart contracts in the Ethereum testnet:
Connect smart contracts to the web app using Web3.js:
Initialize your smart contracts:
Cost estimate for decentralizing your web app:

What is a DApp?

 

A DApp must meet the following criteria:

  1. While the front-end code can be in any language, the back-end code must comprise smart contracts;
  2. The back-end code must run on a decentralized blockchain;
  3. A DApp must have open-source code;
  4. Execution of the DApp must be autonomous;
  5. The app must use a crypto token created using a standard cryptographic algorithm, for e.g. ‘proof of work’ (POW);
  6. No one entity should control the majority of crypto tokens;
  7. A DApp must store data in a decentralized blockchain and while doing so, it must adhere to cryptographic standards.

Read more about DApps in “What is a Decentralized Application?”.

What is a smart contract?

A DApp must have smart contracts as its’ back-end code. What are these? A smart contract is just a piece of code. It uses “IF-THEN-ELSE” conditions and allows execution of legal-like functions.

For e.g., a smart contract can transfer crypto tokens from one blockchain address to another based on certain conditions. The conditions are coded in the smart contract.

A smart contract must fulfill below criteria:

  1. It must be open-source code;
  2. Smart contracts are stored in blockchain;
  3. It executes automatically, without any intervention;
  4. The code and execution results are visible in a blockchain;
  5. You can’t modify the code after you have deployed it;
  6. You can’t change the outcome after it executes.

You can read more about smart contracts in “What Is A Smart Contract?”.

Download Our Project Specification Template

Build DApp development capabilities:

Since you already have your web app, I assume you have UI/UX and testing skills in your team already. You need to build Ethereum development capabilities, including DApp development and coding smart contracts.

I recommend the following learning resources for your team:

  1. Ethereum Development Tutorial in GitHub;
  2. Online Solidity course offered by Blockgeeks, because you will code smart contracts using Solidity, i.e. Ethereum’s proprietary language;
  3. DAPPS FOR BEGINNERS website, which provides valuable guidelines for developing DApps.

Install MetaMask:

A DApp is a web app that stores the server-database logic on a blockchain. Smart contracts communicate with blockchain to store the data that the DApp creates and uses.

You need to use MetaMask, i.e. a tool that enables you to communicate with the blockchain through smart contracts. It allows you to run your DApp in your browser even if you aren’t running a full Ethereum node.

It’s a browser extension, download it from MetaMask website, where you can get Chrome or Firefox extensions. After you have installed the extension, a little icon will appear at the top of your browser.

Click the icon, accept their terms & conditions, and create your password. You will need to save your 12-word private seed because you will use it later. At this point, you are connected to the Ethereum mainnet, i.e. main network.

For your development purposes, you need to change this and instead connect to a test blockchain. There are two kinds of public Ethereum testnets, i.e. test networks available, as follows:

  1. Lightweight Ethereum nodes that you can use for small-scale local testnets. An example is ethereumjs-testrpc. It’s good to develop and test smart contracts at their early stage.
  2. Heavyweight Ethereum nodes that you use for testing smart contacts at a later stage. An example is Ropsten.

To deploy and run smart contracts on the Ethereum mainnet, you need to spend real Ether. However, that’s impractical when you are just learning how to develop smart contracts, hence these testnet options are very useful.

In Ropsten, there is no real value of Ether, so you don’t spend any real money. As you might expect, the security is also not up to the mark, but that’s not a real concern when you are just learning to develop smart contracts. Read more about Ropsten in “An Introduction to Ethereum Testnets”.

In your MetaMask, change your connection to Ropsten by clicking on the mainnet icon. This completes your MetaMask set-up.

Use Remix IDE:

I recommend that you use the Remix integrated development environment (IDE) for your smart contract development. It’s the easiest option for a beginner Solidity programmer. You can access it in the Remix IDE website. Remix itself is a DApp, hence web-based, so you don’t need to install anything.

It provides a code editor for you to write your smart contract. The console shows you the response from blockchain when you execute your smart contracts. The run section allows you to deploy your smart contracts and interact with them

It provides a nice debugging option where you can step through the code. This is a great help, especially for beginners. Use it to compile your code to the point that you resolved all compilation errors.

Read more about Remix IDE in “The Best Way to Start Coding in Solidity”.

An example project to turn web app to DApp:

In this guide, I will use an example web app to DApp conversion project undertaken by Merunas Grincalaitis. He converted his LinkedIn-like app, where you can create an account, follow and unfollow others, and write small messages, into a DApp. Find the app here and the code here.

The app has no server since it’s for demonstration purpose only. In a real application of this kind, the following functionalities would require a server:

  1. To store accounts and messages including any actions taken;
  2. To save information of whom you are following.

The app uses JavaScript for the other functionality and executes them in the browser. When you convert it into a DApp, you will need to store the following on a blockchain:

  1. Accounts with profile and bio information;
  2. Count of followers that a user has;
  3. Messages with content, creator information, and timestamp.

Note: we will use this information later while creating smart contracts.

Throughout this guide, I will refer to his article for code snippets and commands, so let’s call it the ‘reference article’. You can read it in “Ultimate Guide to Convert a Web App To a Decentralized App Dapp”.

Smart contract variables for decentralizing your web app:

You will now start coding your smart contracts, and for that, you need to define your variable first. To do this, you use a special type of variable called ‘Struct’. It allows you to create new types of variables with their own properties. Read more about variables in this Solidity variable-types document.

Read How We Helped a Marketing Company to Build a Back-Office Custom Ads Dashboard

Using ‘Struct’, you create the following two variables with their respective internal properties:

  1. ‘User’: It will have a name, occupation, and bio.
  2. ‘Message’: This has message content, creator, and timestamp.

Create the variable in Remix IDE. Read the reference article to see the code how Merunas has created the variables.

Smart contract functions to port web app to DApp:

You should have details of the 3 sets of information that your DApp will store on the blockchain, and now you will create functions for each. Create them as follows:

Function to store account with profile and bio:

Set the profile of a user, by using a setProfile function. It sets the name, occupation, and bio values. For this, it processes the following information from memory:

  • Users’ name:
  • Users’ occupation;
  • Users’ bio.

Mapping of the user will normally link the users’ address by default with the user information. This function is to overriding it.

Note the difference with your web app, where you may have used an API call to a node.js server, for example, and stored the information in a database. In the case of DApp, the logic is contained in the smart contract.

Check out the reference article for the corresponding code.

Function to write a message and storing relevant information:

Use the writeMessage function to store a message in the database. It will take the content of the message from the message memory.

Then it creates a temporary message Struct instance. This will have the message content, senders’ address, and the current timestamp. The keyword ‘now’, which is the format of timestamp with 10 numbers, is used here.

The function then adds the message to the array of messages of the corresponding user. It also adds it to the array of all messages. Follow the reference article to read the code.

Function to store follow and unfollow information:

Use a followUser function to take a follow-address, which it will add it to the users’ mapping of follows.

The unfollowUser function executes a loop. It looks into a list of all followers of a user and matches the address of the user requesting the unfollow action. It then removes the second user from the list of the first user’s followers.

Solidity is quite like C++ or Java, and the loop works in a manner like those languages. You can get further guidance by reading the code in the reference article.

Deploy smart contracts in the Ethereum testnet:

Now that you have coded your smart contracts, you need to deploy them in the Ropsten Ethereum testnet. However, in the same way that you need real Ether to deploy smart contracts on the Ethereum mainnet, you need test Ropsten Ether in this case. Visit MetaMask Ether Faucet, and request 1 Ether.

MetaMask had injected Web3 into your browser, and you need to use it. You have already connected your MetaMask account to Ropsten. Ensure that you are still connected.

Now, go back to the Remix IDE, and click ‘Create’. It’s the small ‘+’ sign at the top left of your browser. You need to confirm this transaction in MetaMask.

Connect smart contracts to the web app using Web3.js:

Now that you have deployed your smart contracts, the next step is to connect them to your web app. You need to use the JavaScript library called ‘Web3.js’.

Open your web app in your favorite IDE, navigate to the folder, and create an empty file. Name it ‘web3.min.js’. You will copy and paste the web3 min code into this file.

Visit Web3.js GitHub repository, and copy the web3 min code from the web3.min.js folder. Select the complete code, copy, paste in your empty web3.min.js file, and save your file. Import your populated web3.min.js file into your main HTML file.

You also have the option of installing web3 with nodejs, the instructions are in the reference article.

Initialize your smart contracts:

The next step in this tutorial is to initialize your smart contracts, and you need to the contract application library interface (ABI) and contract address. ABIs are data encoding schemes in Ethereum to communicate with smart contracts. Read more about ABIs in this web3j documentation.

Do the following to get the contract ABI:

  • Go the Remix IDE, and click the compile tab. Scroll down and you will find the ABI section. Click the small button next to the heading “ABI”, and copy it in your clipboard.
  • However, you can’t use the copied information as is. ABIs are JSON, or ‘JavaScript Object Notation’ documents. There are spaces inside, which you can’t have. Hence, you need to clean it up, and you can use this ‘JSON minify’ tool for this. Paste the ABI in the screen of that tool and click “JSON Minify” button.
  • Copy the output text. Paste it in a variable called ‘const contractABI’ in your code.

Take the following steps to get the contract address:

  • Go back to the Remix IDE, and click the run tab. You will find the contract address below.
  • Copy it and paste it in a variable called ‘const contractAddress’.

You need to create a contract instance, where you will use the contractABI and contractAddress variable you just set up. The next step is to open the JavaScript file of your web app for a function. You need to update it with the contract instance code for that function.

Repeat the process for all functions. See the reference article for detailed coding instructions. Your project of converting web application to a decentralized application is now complete.

Cost estimate for decentralizing your web app:

Your real-life web applications might have far more functionalities than the one in this example. Hence, you will likely need to code many more smart contracts, possibly with higher complexity. While your cost will vary depending on the manpower rates in your part of the world, total project cost will ultimately depend on the complexity of your existing web app.

Ethereum DApp development and coding smart contract are niche skills, and skilled developers are typically overbooked. You will also need project managers with blockchain development as well as relevant industry experience, and that’s a hard combination to find.

If you are unable to find the right developers then consider getting professional help to turn your app into a decentralize web app.

Download Our Project Specification Template

Aran Davies

Aran Davies

Blockchain Expert | Developer | Writer | Photographer
Aran Davies

Latest posts by Aran Davies (see all)