Solidity + Web3.js = Ethereum DApp tutorial (using Vue?)
A step by step tutorial to develop your first Ethereum Smart contract and interact with it through a simple web DApp + Vue.js bonus— Part 1
Here the PART 1 (here the PART 2) of a step by step tutorial to develop your first Ethereum Smart contract with full demo code available at this GitHub repo 🎉
Nowadays we often hear about cryptocurrencies, blockchains, wallets and even more in the future we will hear about tokens, Smart contracts and decentralized applications (DApps).
The purpose of this tutorial is not to analyse these concepts (the web is full of useful resources to explore them) but rather to take your first steps in this world by following these simple points:
- Define your first Smart contract
- Use it by instantiating a blockchain locally
- Interact with it through a simple web DApp
It all seems very simple doesn’t it? Let’s get started!
Define a Smart contract
The most simple and immediate definition I found on the web, which in my opinion summarizes the true essence of this concept, is the following:
Smart contracts are simply programs stored on a blockchain that run when predetermined conditions are met. They typically are used to automate the execution of an agreement so that all participants can be immediately certain of the outcome, without any intermediary’s involvement or time loss.
As a first example I thought to use Solidity, a statically typed programming language designed for developing smart contracts that run on the Ethereum Virtual Machine (EVM). It uses a Javascript (actually ECMAScript)-like syntax with some “influence” coming from C/C++. Don’t forget to check out the legendary Cryptozombie tutorial on Solidity 🚀🚀🚀!
Our first smart contract is very simple and to implement it, without installing any tool on your machine, we will use Remix IDE a specific editor for Solidity usable directly from our browser by clicking here!
In the File Explorer bar (on the left side of your screen), create a dedicated Workspace and the add a file at the root level (myContract.sol in my case):
Paste the following code in the editor:
The first line declares the SPX license identifier under which the contract is published (details here), while the pragma keyword is used to avoid incompatibility with future compiler versions (more details here).
As you can see it’s a simple “class” MyContract (i.e. the contract itself) with two instance variables and two simple methods to obtain and set their values from the outside (notice the publicvisibility modifier).
We can then move on to the first run, switch to the “Solidity compiler” tab and click the “Compile myContract.sol” button
Then switch again to “Deploy & run” tab: the environment should be already selected, just click “Deploy” button and forget about the other details.
Under the “Deployed Contracts” section (yes, in the same Deploy & run tab) you should see your first contract ready to interact with you.
As you can see Remix provides some buttons to be able to interact already in this first phase with our newly published contract, cool right?
Wait, we just said “published”, but where? Actually Remix has not published our first creation on a real public blockchain, this would have entailed a computational cost, which in the blockchain is a fundamental concept, and on the blockchain, as in life, any action has a cost that must be paid by someone (and we are not the ones 😅).
Since we just want to learn, Remix instantiates a lightweight blockchain directly within our browser (fantastic isn’t it?) thus we can do all the tests we want. However, to make our contract usable locally we have to instantiate a blockchain reachable by and external application (i.e. our web app, ehm… DApp pardon, which we still have to do). Here we are at the next step.
Instantiate a “local” blockchain
Ganache is a very useful tool that allows us to instantiate a local blockchain for rapid Ethereum DApp development with a few simple commands. In this case we will use the CLI version, but don’t miss the rich UI of the desktop application and the other tools provided by the Truffle Suite!
Assuming that you already have Node.js and npx installed on your system, create a folder for our project (I chose web3) and just give the following commands from your preferred terminal/console app:
npx ganache-cli
This command immediately starts a virtual Ethereum blockchain with 10 available accounts: in this case we will only one to allow us to publish our contract locally. To do this let’s go back to “Deploy & run” tab on our excellent Remix editor and select on which destination to publish our smart contract.
Once published we just have to invoke it from our new DApp: jump to the PART 2 of the tutorial! 🎉🎉🎉
Have fun and do not forget to clap the article if you liked it 💚…
… and then check out my REGEX CHEATSHEET or REGEX COOKBOOK articles about the most commonly used (and most wanted) regular expressions 🎉
