How to make a smart contract on Remix and connect it to a Web App

Published in

Coinmonks

6 min readAug 6, 2021

This guide is for anyone looking to learn the basics of making a decentralized application, along with an Ethereum smart contract. This guide assumes you have a basic knowledge of javascript, html, node package manager and the blockchain ecosystem.

What you will need

A code editor like Visual Studio Code
Node JS installed
A Metamask Wallet with testnet Ether
An Infura Account

Step 1. Getting testnet ether into our Metamask account

First, make a Metamask account here, it is recommended you only use this wallet account for testing purposes, rather than actually storing real tokens.

When creating smart contracts on the Ethereum main net, or when interacting with most smart contract functions, we need to spend Ether. Doing this on a testnet better simulates how smart contracts actually function, rather then on personal blockchains like with Truffle.

In order for us to interact with a testnet , create a smart contract and send transactions, we will need test Ether. We can get this from https://rinkeby.faucet.epirus.io/ , but there are other free faucets online.

On your Metamask plugin, switch to the Rinkeby Test Network under the Networks tab on the top of the window. Copy and paste your public key address into the Rinkeby faucet website and await your free testnet Eth!

Once you have your testnet ether, you can make and deploy a contract on Remix right away!

Step 2. Create a Remix smart contract

Remix is an online IDE that enables devs to easily create and deploy smart contracts on the blockchain. In this tutorial, we will be deploying the default smart contract that is provided to us when you go to Remix.

When you open Remix.ethereum.org, you will see three default smart contracts that are already made for us. Select 1_Storage.sol. All this smart contract does is store an integer and allow you to retrieve it. It's very simple but for the purposes of this tutorial, we will not go into details of how to write smart contracts. If you are interested in learning Solidity, the language used to program smart contracts on the Ethereum blockchain, I recommend Cryptozombies.io.

First, we want to compile, then publish this smart contract to the Rinkeby test network. Go to the second tab on the left of your Remix IDE and hit the Compile button. Make sure you have the Storage contract selected. Once it is compiled, take a look at the Compliation Details at the bottom right. Here is a detailed explanation of your compiled smart contract.

What we care about are the function hashes, which we will later use to call our smart contract functions! It should look something like this…

{
 “2e64cec1”: “retrieve()”,
 “6057361d”: “store(uint256)”
}

In the next tab, Deploy and Run transactions, we want to switch our environment to Injected Web3. Hit deploy and your Metamask should automatically prompt you to ask if you want to make a smart contract. Do not worry about the Gas price or Gas Limit as Metamask should have already set those based on how much the transaction should cost. It is test ether anyway! Once you have confirmed the transaction, wait a few seconds and your smart contract should have been deployed on the Rinkeby Testnet!

The contract address will be under your Deployed Contracts tab

In Remix, we are able to call functions within the IDE, but what we want to do is actually call functions from our Web App similar to how a dApp works! Play around with the functions if you like, and you will see that storing an integer in the smart contract will cost Gas while retrieving the number will be free and will not prompt you to sign a transaction. This is because reading from a value from a smart contract does not cost any Gas, while creating, deleting or updating values does.

Try storing a number with the store function, and we will retrieve that value later in our Web App!

The three things we need from our smart contract will be the contract public address and the two function hashes.

Step 3. Create an Infura account

What is Infura and why do we need it?

Infura provides the tools and infrastructure that allow developers to easily take their blockchain application from testing to scaled deployment — with simple, reliable access to Ethereum and IPFS. (from the Infura docs)

Basically, it allows us to interact with the Ethereum blockchain without having to maintain our own Ethereum Node!

On Infura, sign up for a free account, and create a new project. On your dashboard go to the Ethereum tab and create a new project with any name you like. What we care about is that the Endpoints tab points to the Rinkeby testnet, and our Rinkeby URL. We will need those later in our Javascript file to connect our Web App to the Ethereum Blockchain. It should look something like this https://rinkeby.infura.io/v3/eefe505901844f4cba2968390a4d8d8f.

Step 4. Creating our Web App

First, make sure that Node is installed.

Create a boilerplate HTML file named index.html and ! and an empty app.js

In our HTML page, all we want for now is two buttons. One to connect the user to Metamask, and the other to do a call to our smart contract.

Our app.js page will be empty for now

Make a package.json with npm init in the command terminal. We will need this install web3 from npm. Choose all the default values when making ur package.json, then run npm install web3.

Finally, in our app.js, I will go step by step on what each line is doing.

Here is our button to prompt the user to connect their Metamask wallet

Remember our Infura url? We will need this to communicate to the blockchain. Our contract address is the public address from the testnet smart contract we deployed

Here is our function call to retrieve the number that we stored in our smart contract!

Now if you want to add the storage function to your Web App, I encourage you to look at the Metamask docs and figure it out! Hint: the method will not be ‘eth_call’ but another string!

Checkout the github here for the final code

If you are interested in learning more about Web 3 programming, check out some of these docs! Thanks for reading!

Getting Started | MetaMask Docs

To develop for MetaMask, install MetaMask on your development machine. . A quick note... This guide assumes…

docs.metamask.io

JavaScript API libraries | ethereum.org

An introduction to the JavaScript client libraries that let you interact with the blockchain from your application.

ethereum.org

Set up MetaMask for Binance Smart Chain

In this article, we will show you how to set up MetaMask for Binance Smart Chain? Before going on the steps to set up…

blog.coincodecap.com

Join Coinmonks Telegram Channel and learn about crypto trading and investing