You need to use [web3](https://www.npmjs.com/package/web3) to interact between the frontend and blockchain (smart contracts)

\
```javascript
npm i web3
```

\
\
At this point make sure `ganache-cli` is running. You could also use ganache desktop app.

\
```javascript
// index.js

const Web3 = require('web3');

// setup provider
const provider = new Web3.providers.HttpProvider("http://localhost:8545");

// connect
const web3 = new Web3(provider);
console.log(web3.version);
```

\


How to write your first contract in Ethereum Solidity?

There are 4 visibility types in Solidity

\
* `public` - Publicly accessible function (Dapp users can call)
* `private` - Can be called only inside the contract
* `internal` - Only this contract and it’s childrens can call it
* `external` - Only consumers can call. No other contract functions can call it.

\
```javascript
function getMyName() public returns(string) {
    return myName;
}
```

\
We have got an error

\

:::warning
TypeError: Data location must be “memory“ for return parameter in function

:::

\
Because we are not mutating the contract’s stored `myName`, we’ll return the copy of it from `memory`, which is where it’s stored by default.

\
Another warning

\

:::warning
Warning: Function state mutability can be restricted to view

:::

\
We get this warning because our function is not mutating the state, it’s only reading from it. So we can use `view` modifier.

\
```javascript
// version of solidity greater than 5
pragma solidity ^0.5.10;

// write a contract using contract keyword
contract HelloWorld {
    // data type string
    string myName = 'Ryan';

    // write a function that returns name
    function getMyName() public view returns(string memory) {
        return myName;
    }
}
```

\


How many visibility types are there in Solidity?

3 Built-in modifiers in Solidity

\
* view - No need to pay gas fee to call functions with view modifier because it does not change state of the blockchain
* pure - No need to pay gas fee so it’s free to call. It neither reads or writes to the blockchain. It’s used as functions where input has identical output.
* payable - Need to pay gas fee (variable). It’s often used in token sale contracts where money is sent by users to each other.

\
```javascript
function getMyName() public view returns(string memory) {
    return myName;
}
```

\


What are 3 built-in modifiers in Solidity that impacts amount of ether spent as gas fee?

* On the left sidebar click on S icon to compile your solidity code
* Then click the Ethereum icon below and click on the button called Deploy
* Once deployed, you will see the dropdown contract underneath
* Click on the button called getMyName (your contract)
* Once clicked, you will see your name printed right below

\


How to compile and deploy contract in Remix IDE?

```javascript
// version of solidity greater than 5
pragma solidity ^0.5.10;

// write a contract using contract keyword
contract HelloWorld {
    // data type string
    string myName = 'Ryan';

    // write a function that returns name
    function getMyName() public view returns(string memory) {
        return myName;
    }

    // writable function, arguments are prefixed with _
    function changeMyName(string memory _newName) public {
        myName = _newName;
    }
}
```

\
\
* Now compile then deploy.
* On the deployed contract, you see `changeMyName` button with input field.
* Enter new name and click on `changeMyName` button
* Then if you click `getMyName` button, you will see the new name returned

\


How to create a writable function in Solidity?

* Install latest version of [NodeJs](https://nodejs.org/en/)

\
Setup local Ethereum node locally for test purpose using [ganache](https://trufflesuite.com/ganache/)

You could also use ganache desktop app.

\
```javascript
npm install -g ganache-cli
ganache-cli
```

\
```javascript
mkdir hello-solidity
touch HelloWorld.js
```

\
```javascript
// HelloWorld.js
// version of solidity greater than 5
pragma solidity ^0.5.10;

// write a contract using contract keyword
contract HelloWorld {
    // data type string
    string myName = "Ryan";

    // write a function that returns name
    function getMyName() public view returns (string memory) {
        return myName;
    }

    // writable function, arguments are prefixed with _
    function changeMyName(string memory _newName) public {
        myName = _newName;
    }
}
```

\


How to setup local development environment for Ethereum Solidity?

Use [solidity compiler](https://www.npmjs.com/package/solc) from npm

\
```javascript
npm i -g solc
```

\
```javascript
// check version
solcjs --version
```

\
```javascript
// index.js
const fs = require("fs");
const solc = require("solc");

// read file
const content = fs.readFileSync("HelloWorld.sol", "utf-8");

// format input
const input = {
  language: "Solidity",
  sources: {
    "HelloWorld.sol": {
      content, // The imported content
    },
  },
  settings: {
    outputSelection: {
      "*": {
        "*": ["*"],
      },
    },
  },
};

const output = JSON.parse(solc.compile(JSON.stringify(input)));
console.log(output);
```

\
Now run node `index.js`

\


How to compile solidity code locally?

Add licence identifier on top of your solidity file.

\
```javascript
// HelloWorld.sol

// SPDX-License-Identifier: MIT
// version of solidity greater than 5
pragma solidity ^0.8.17;
```

\


How to resolve SPDX-License-Identifier error?

Our code/project can connect to Ethereum local network (ganache) via web3.

\
First use web3 to create a Contract object from compiled code. This is to make it easier to interact with our contract using JavaScript.

\
```javascript
// index.js

// get the compiled contract's abi (application binary interface)
// it's a specification that describes how smart contract interacts with external code
const { HelloWorld } = output.contracts["HelloWorld.sol"];
const { abi, evm } = HelloWorld;

// init a new contract object
const contract = new web3.eth.Contract(abi);
console.log(contract);
```

\


How to get Contract object from compiled code?

We need to pay gas fee by spending some ether to deploy contract. 

* Get an address from test wallet (ganache)
* Get current gas price
* Spend fake ether from our address to deploy HelloWorld contract to a new address
* Get deployed contract and call it’s getMyName function

\
```javascript
// index.js

const deployAndRunContract = async () => {
  // get address from ganache wallet
  const address = await web3.eth.getAccounts();
  // get current gas fee
  const gasPrice = await web3.eth.getGasPrice();

  // deploy HelloWorld contract (it's bytecode)
  contract
    .deploy({
      data: evm.bytecode.object,
    })
    .send({
      from: "0x3D3565f1c15c45173f9D97E78130c66cfbFACE10",
      gas: 1000000,
      gasPrice,
    })
    .on("confirmation", async (confNumber, receipt) => {
      const { contractAddress } = receipt;
      console.log("Deployed at", contractAddress);

      // get the deployed contract instance
      const contractInstance = new web3.eth.Contract(abi, contractAddress);

      // call getMyName function
      const myName = await contractInstance.methods.getMyName().call();
      console.log("Result from blockchain", myName);
    });
};

deployAndRunContract();
```

\


How to deploy contract in local Ethereum node?

Instead of manually compile and run solidity code, you can use a framework called [truffle](https://trufflesuite.com/docs/) for building dApps.

\
```javascript
npm i -g truffle
```

\
Let’s re-create `HelloWorld` contract using truffle.

\
```javascript
mkdir hello-solidity-truffle
cd hello-solidity-truffle
truffle init
```

\
Project structure

\
* `contracts` - Write your contracts in this folder
* `migrations` - Write your deployment process
* `test` - Write automated test
* `config` - Truffle config file

\
\
\


How to setup Ethereum local development environment using Truffle framework?

```javascript
// contracts/HelloWorld.sol

// SPDX-License-Identifier: MIT
// version of solidity greater than 5
pragma solidity ^0.8.17;

// write a contract using contract keyword
contract HelloWorld {
    // data type string
    string myName = "Ryan";

    // write a function that returns name
    function getMyName() public view returns (string memory) {
        return myName;
    }

    // writable function, arguments are prefixed with _
    function changeMyName(string memory _newName) public {
        myName = _newName;
    }
}
```

\
```javascript
// migrations/deploy_hello.js

const HelloWorld = artifacts.require("HelloWorld");

module.exports = (deployer) => {
  deployer.deploy(HelloWorld);
};
```

\
Make sure Ganache is running.

\
```javascript
// truffle-config.js

// config network
module.exports = {
  networks: {
    development: {
      host: "127.0.0.1", // localhost
      port: 7545, // whatever you see in ganache
      network_id: "*",
    },
  },
};
```

\
Now run `truffle migrate`

\
Check truffle version

\
```javascript
truffle version
```

\
If you get compile error due to version difference. Use the same compiler version used by Truffle (you see it in error message) in your contract `HelloWorld.sol`

\
```javascript
// error
Error: Truffle is currently using solc 0.5.16,
```

\
```javascript
// HelloWorld.sol
pragma solidity ^0.5.16;
```

\
Now your contract should compile successfully.

How to write your first contract in Truffle?

In Truffle, the term "artifacts" refers to the compiled contracts that are generated when you run the `truffle compile` command. These compiled contracts are stored in a file called `build/contracts/ContractName.json`, where `ContractName` is the name of the contract.

\
The `build/contracts` directory is created when you run the `truffle compile` command, and it contains the compiled contracts in JSON format. These compiled contracts are called "artifacts" because they are the result of the contract compilation process.

When you run the `truffle migrate` command, Truffle deploys the compiled contracts to the blockchain. The deployed contracts are also stored in the `build/contracts` directory as artifacts, along with additional metadata such as the contract address and the transaction hash.

\
You can use the artifacts stored in the `build/contracts` directory to interact with the deployed contracts from your Truffle project, or from other applications that need to access the contracts. The artifacts contain the contract's ABI (Application Binary Interface), which defines the contract's functions and their signatures, as well as the contract's bytecode, which is used to deploy the contract to the blockchain.

Learn Blockchain Development with Ethereum Solidity Smart Contract Dapps and Tokens

How to connect to local Ethereum network using web3?

Fullstack JavaScript React Node Courses on Udemy