Simple Smart Contract Tutorial: Build a Blockchain Project Using Remix IDE | by Magda Jankowska | The Capital | Dec, 2024

Open Remix IDE in your browser: https://remix.ethereum.org.

Create a brand new file named SimpleStorage.sol and paste the next code:

// SPDX-License-Identifier: MIT// This specifies the license sort for the contract. The MIT license is permissive and generally utilized in open-source initiatives.

pragma solidity ^0.8.24;// Specifies the model of Solidity the contract is written in.// This ensures compatibility with the Solidity compiler model 0.8.24 or above.

// Outline the contract named “SimpleStorage”contract SimpleStorage {// Declare a state variable to retailer a quantity.// `public` makes it readable by anybody exterior the contract.uint256 public storedNumber;

// Perform to retailer a quantity within the `storedNumber` state variable.// `_number` is the enter parameter supplied by the person.perform storeNumber(uint256 _number) public {// Assign the supplied quantity to the state variable `storedNumber`.storedNumber = _number;}

// Perform to retrieve the worth of the `storedNumber` variable.// The `view` key phrase signifies this perform doesn’t modify the contract’s state.// It returns a `uint256` worth, which is the kind of the saved quantity.perform getStoredNumber() public view returns (uint256) {// Return the worth of `storedNumber`.return storedNumber;}}

Compile the contract utilizing the Solidity compiler in Remix. Guarantee you choose Solidity model 0.8.24.

Go to the Deploy & Run Transactions tab in Remix.

Choose an setting comparable to Injected Web3 to deploy on a testnet.

Guarantee your MetaMask pockets is related to the identical take a look at community.

Deploy the contract by clicking the Deploy button.

Copy the deployed contract’s tackle and ABI for later use.

Create three recordsdata in your mission folder:

index.htmlstyles.cssapp.js

HTML (index.html)

MetaMask + Animation

The very first time you had a crypto. This yr

……. code proceed …. see extra in repo hyperlink under

CSS (types.css)

/* Common styling for the web page */physique {background-image: url(https://www.pixelstalk.web/wp-content/uploads/2015/01/Winter-Evening-In-Moonlight-HD-Wallpaper.jpg);background-size: cowl;background-position: middle middle;margin: 0;padding: 0;width: 100%;peak: 100vh;place: relative;}

/* Falling components */#container {place: absolute;high: 0;left: 0;width: 100%;peak: 100%;z-index: 1;pointer-events: none;}

……. code proceed …. see extra in repo hyperlink under

JavaScript (app.js)

Substitute YOUR_CONTRACT_ADDRESS and YOUR_CONTRACT_ABI along with your contract particulars.

// Examine if MetaMask is installedif (typeof window.ethereum !== ‘undefined’) {console.log(‘MetaMask is put in!’);const web3 = new Web3(window.ethereum);

// Sensible Contract Detailsconst contractAddress = “YOUR_CONTRACT_ADDRESS”;const contractABI = YOUR_CONTRACT_ABI;

……. code proceed …. see extra in repo hyperlink under

Open index.html in your browser.

Join your MetaMask pockets by clicking the Join Pockets button.

Use the Retailer Quantity button to save lots of a quantity on the blockchain.

Retrieve the quantity utilizing the Retrieve Quantity button.

Join Pockets: Securely connects a person’s MetaMask pockets to the DApp.Retailer Quantity: Permits customers to enter and save a quantity on the blockchain.Retrieve Quantity: Fetches and shows the saved quantity from the blockchain.Remix IDE: For writing and deploying sensible contracts.MetaMask: For pockets integration.Web3.js: To attach the frontend to the blockchain.

The entire supply code for this mission is obtainable on my GitHub:GitHub Repository — Blockchain Integration Mission