What Are Smart Contracts? A Hands-On Approach
Let’s clear up all the confusion
Information asymmetry was the most significant hidden problem before the internet. We couldn’t contrast and compare prices. People had to go to brokers who would quote them on a price which the consumer had to assume was correct.
Travel brokers, real estate agents, and car salespeople were perfect examples of how people took advantage of information asymmetry. Consumers had to bring prior knowledge to the table to be able to negotiate on price.
Only recently did we get resources such as Kayak and Autotrader that let the consumer take control of information.
They can now reap the benefits of knowing competitive prices for goods or services. Ultimately, giving room for consumers to win by saving money on the things they buy.
Understanding information asymmetry helps us begin to understand how distributed technologies like blockchain could start to paint a clearer picture for consumers by creating trust.
Blockchain provides a collection of independent machines working towards recording, sharing, and synchronizing transactions. These machines are part of the system of information sharing, letting more and more consumers converge towards information symmetry.
In this application of blockchain, smart contracts play a vital role in executing the agreement between the two parties.
Transactions aren’t the only thing smart contracts can be used for. We’ll be looking at smart contracts and how we can use them to interact with the blockchain.
What are Smart Contracts?
Smart contracts are a layer of logic on a distributed and decentralized blockchain network which outlines the agreement between at least two parties.
A smart contract is always written in code and automatically executes when the buying party accepts the deal.
The smart contract flow above is specific to the information asymmetry use case we explored earlier.
It’s important to note that smart contracts don’t always have to be agreements and are primarily code for writing and reading from the blockchain.
Similar to the case of information asymmetry, a smart contract makes it transparent for a buyer to know the terms of the transaction. In the case of a travel broker, the price of the flight package would manifest through the contract.
The technical operation that a smart contract executes is allowing your application to write to the blockchain. In the case of a car dealership, a smart contract could be used to update the value you’ve agreed on for the car, or even pay for the vehicle itself.
Now, let’s look at what smart contracts look like and have a live application running.
How to Code a Smart Contract
There are a couple of key players in the blockchain space that make it easier to create smart contracts and decentralized applications. We’ll be exploring how to create a smart contract using NEAR Studio.
Before we write any actual code, we need to choose where we’re going to write the code. The best option for developers looking to get their feet wet with developing smart contracts is the Near Studio IDE because it creates a ready to go environment from the start.
Keep in mind that you need to know a bit of JavaScript and possibly some TypeScript to go with it. If not, don’t worry as we’ll be breaking everything down into simple and easy-to-understand terms.
Now, if you head over to Near Studio, you’ll find that you can create a new project from a list of templates.
Select the “Counter Smart Contract” project. The counter template creates a basic TypeScript application that increments, decrements, and fetches a counter variable.
This example is perfect as it shows us how smart contracts are not always just agreements. They hold our back-end logic for use with the blockchain as a database.
Selecting the template creates the application, and now, if we head over to assembly/main.ts using the file explorer on the left, we can see the counter code for our smart contract.
You can take a couple of minutes to explore the functionality of this template by clicking the run command in the top toolbar and navigating to the new window.
Then, in the new window, you can test out the commands by opening up the console and entering the commands shown on the screen.
Now, let’s have a look at the assembly/main.ts file, line-by-line.
import { context, storage, near } from “./near”;The importing statement adds all the library classes we’ll need for the functionality of our app to work. If we want to see what the imported classes do, we can navigate to the “near” folder and find the correct class.
The first function we should see when we open main.ts is the increment function.
export function incrementCounter(): void { let newCounter = storage.get < i32 > “counter” + 1; storage.set < i32 > (“counter”, newCounter); near.log(“Counter is now: “ + newCounter.toString());}
The function executes three steps. First, we get an integer value with the key “counter” and add 1 to it. The counter variable looks like this in storage before the increment function:
{ counter: 0}
Once we increment, the value looks like this:
{ counter: 1}
The logical question now is: “How do we decrement by 1?”
export function decrementCounter(): void { let newCounter = storage.get < i32 > “counter” — 1; storage.set < i32 > (“counter”, newCounter); near.log(“Counter is now: “ + newCounter.toString());}
The first step is to get the current value for “counter” and reduce it by 1. Then we send the new value to the same counter variable in the blockchain.
This is how counter changes before we decrement:
{ counter: 1}
This is how counter changes after we decrement:
{ counter: 0}
The last function takes the crux of the previous functions, getting the counter variable, and returns that value.
export function getCounter(): i32 { return storage.get < i32 > “counter”;}
The main.ts creates and exports the functionality we need, but for our users to use and see our feature, we’ll need to import those functions and frame our front end with our new functionality.
Using JavaScript and HTML to Show Data From the Blockchain
Now that we have our back end set up, it’s helpful to write some front end to interact with the “smart contract” we wrote.
There isn’t a requirement to use any specific framework or library, so we’ll work with Vanilla JavaScript and HTML, but you could use any framework/library you’re comfortable with.
For us to access the functions we were looking at, we’ll need to modify our src/main.js by finding the window.contract initialization.
window.contract = await near.loadContract(nearConfig.contractName, { viewMethods: [“getCounter”], changeMethods: [“incrementCounter”, “decrementCounter”], sender: window.walletAccount.getAccountId()});
The viewMethods key is assigned the functions that return a value. In contrast, the changeMethods key is related to all the functions that write to storage.
Now, inside the same src/main.js, we can create a function that inserts the current counter value to our index.html page.
async function displayCounter(){ let counter = await contract.getCounter(); document.getElementById(‘counter’).innerText = counter; console.log(counter);}
Then, in the src.index.html file, we can add a button inside the after-sign-in div, which shows the value of the counter variable.
<div> <label>Counter:</label> <p id=”counter” /> <button onClick={displayCounter()}>Get Counter</button></div>
Now you can hit the run button in the menu to the top of the IDE to see what the app looks like and, hopefully, it should look something similar to what I’ve made in NEAR Studio:
If you’re wondering where you can find the code, look no further:
Coding Challenge
Now that you know the basics of smart contracts and how to read and write to the blockchain, try to add addition and subtraction to your application and share with the community what it looks like.
Paste your share link below so people can see what you’ve made!
