Lecture 14 – Ethereum - Development Environment

Lecture 14

Ethereum
Development Environment
Lecture 14 – Ethereum - Development Environment

A Simple Contract: A Test Ether Faucet

Lecture 14 – Ethereum - Development Environment

An even simpler contract

pragma solidity >=0.4.0 <0.7.0;

contract SimpleStorage {
uint storedData;

function set(uint x) public {

storedData = x;
}

function get() public view returns (uint) {

return storedData;
}
}
Lecture 14 – Ethereum - Development Environment

Compile/Deploy/Interact?
• We know how to do this? Once deployed, we will
have a contract address and we can make
transactions.

• Lets consider an updated version of contract.

function set(uint x) public {
storedData = x+1;
}

• How to change contract code once deployed?

Lecture 14 – Ethereum - Development Environment

Modifying Contracts?
• Contracts are immutable so is our blockchain.
• Contracts cannot be changed, we need to
deploy a new one*.

• A development environment can help us

manage different processes!

*some workarounds are possible in practice

Lecture 14 – Ethereum - Development Environment

Ethereum Wallet
• Meta Mask - https://metamask.io/
– "MetaMask is a bridge that allows you to run Ethereum dApps
right in your browser without running a full Ethereum node."
Lecture 14 – Ethereum - Development Environment

Ethereum Wallet
• Once installed as a browser extension, it allows to
connect to multipile etherum networks
Lecture 14 – Ethereum - Development Environment

Ethereum Wallet
• Once installed as a browser extension, it allows to
connect to multipile etherum networks

• Main Ethereum Network - The main public Ethereum

blockchain. Real ETH, real value, and real conse quences.

• Goerli Test Network - Ethereum public test blockchain and

network. ETH on this network has no value.
Lecture 14 – Ethereum - Development Environment

Getting Ethers on Ropsten

• Use the Faucet at https://goerlifaucet.com/

• Transaction and block history available at,

https://goerli.etherscan.io/
Lecture 14 – Ethereum - Development Environment

Local blockchain
• How about a local pre-loaded Ethereum chain
with addresses, ethers and ability to view blocks,
transactions ...

• Fortunately, Ganache provides exactly that.

Lecture 14 – Ethereum - Development Environment

Ganache
• Ganache is a personal blockchain for Ethereum development you
can use to deploy contracts, develop your applications, and run
tests.

• It is available as both a desktop application as well as a command-

line tool for Windows, Mac, and Linux.
Lecture 14 – Ethereum - Development Environment

1. Install Ganache
• Download the appropriate version for your OS from
https://www.trufflesuite.com/ganache

• Scrolll below to find the appropriate binary, double-click

to install easily.
Lecture 14 – Ethereum - Development Environment

2. Create a Workspace
Lecture 14 – Ethereum - Development Environment

Main Interface
Lecture 14 – Ethereum - Development Environment

Fun Stuff – Linking MetaMask to Ganache

• We know that we can switch between multiple ethereum
network on MetaMask
• Ganache was manually added in the list
Lecture 14 – Ethereum - Development Environment

Fun Stuff – Linking MetaMask to Ganache

• The GUI version of Ganache listens at port 7545 (CLI version probably
at 8545).
• We can however use CustomRPC option of MetaMask to add networks
Lecture 14 – Ethereum - Development Environment

Fun Stuff – Linking MetaMask to Ganache

• We can now add Ganache accounts and

transfer ethers amongst them

• It will also help us understanding how

import/export of accounts work.
Lecture 14 – Ethereum - Development Environment

Fun Stuff – Linking MetaMask to Ganache

• On the Ganache main page, click on the

key icon towards the right
Lecture 14 – Ethereum - Development Environment

Fun Stuff – Linking MetaMask to Ganache

Lecture 14 – Ethereum - Development Environment

Fun Stuff – Linking MetaMask to Ganache

• We can now use this account to make a transaction.
• Lets send some ethers to another account ,the second
one at Ganche main page .

• To send we need address, we can copy from Ganche.

Lecture 14 – Ethereum - Development Environment

Fun Stuff – Linking MetaMask to Ganache

• We know how to send a transaction using MetaMask?
Lecture 14 – Ethereum - Development Environment

Fun Stuff – Linking MetaMask to Ganache

Lecture 14 – Ethereum - Development Environment

Fun Stuff – Linking MetaMask to Ganache

Lecture 14 – Ethereum - Development Environment

Ethereum IDEs
• Remix – Web based IDE http://remix.ethereum.org/
Lecture 14 – Ethereum - Development Environment

Ethereum IDE
• Remix allows to compile, deploy and invoke
smart contracts.
• Smart contracts are immutable, it is less efficient
to do things manually
Lecture 14 – Ethereum - Development Environment

Let’s have more FUN

• As we change MetaMask network, Remix
IDE page refreshes

• What does it mean?

Lecture 14 – Ethereum - Development Environment

Remix IDE and Ganache

• Through MetaMask Remix IDE connects
with our local Ganache chain.

• This means that we can deploy our faucet

contract on the Ganache?
• Let’s try that.
Lecture 14 – Ethereum - Development Environment

Remix IDE and Ganache

Lecture 14 – Ethereum - Development Environment

Remix IDE and Ganache

Lecture 14 – Ethereum - Development Environment

Contract at Ganache
• First look, there is a new block
Lecture 14 – Ethereum - Development Environment

Contract at Ganache
• What does the new block contain?
Lecture 14 – Ethereum - Development Environment

Interacting with the Contract

• Lets give our faucet some ethers.
• How it can be done?

• Our contract has an address? If yes we

can just send some ethers to that address.
Lecture 14 – Ethereum - Development Environment

Contract Address
Lecture 14 – Ethereum - Development Environment

Ethers to Faucet
Lecture 14 – Ethereum - Development Environment

...back at Ganache
Lecture 14 – Ethereum - Development Environment

So far so good ...

• How can we withdraw ethers from the faucet?
• For the time being use remix to create a withdraw
transaction.
// Limit withdrawal amount
require(withdraw_amount <= 100000000000000000);

• How much we can withdraw?

Lecture 14 – Ethereum - Development Environment

Contract deployment
• It quickly becomes tedious and limiting to do things all
over again.
• A tool, development environment to automate stuff would
make life much easier.
Lecture 14 – Ethereum - Development Environment

Truffle
• "Sweet Tool for the Smart Contracts"
• A development environment for blockchains using the
Ethereum Virtual Machine (EVM), aiming to make life as
a developer easier.

npm install truffle -g

Lecture 14 – Ethereum - Development Environment

npm
• npm is a package manager for the JavaScript
programming language.
• It is the default package manager for the JavaScript
runtime environment Node.js.
• It consists of a command line client, also called npm, and
an online database of packages, called the npm registry.
Lecture 14 – Ethereum - Development Environment

Javascript
Lecture 14 – Ethereum - Development Environment

Javascript
• We can place the script in the HTML Head or Body.
Placement at the end of body improves performance.

• We can put in all our code in an external .js file

<script src="myScript.js"></script>
Lecture 14 – Ethereum - Development Environment

Javascript
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

alert(person.fullName())

</script>
Lecture 14 – Ethereum - Development Environment

Common HTML Events

Lecture 14 – Ethereum - Development Environment

Javascript
<!DOCTYPE html>
<html>
<body>

<p>This example demonstrates how to assign an "onchange" event.</p>

Enter name: <input type="text" id="fname" onchange="myFunction()">

<p>When you leave input field, a function transforms text to upper case.</p>

<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>

</body>
</html>>
Lecture 14 – Ethereum - Development Environment

JSON
(JavaScript Object Notation)
Lecture 14 – Ethereum - Development Environment

JSON (JavaScript Object Notation)

• JSON is a light-weight alternative to XML

for data-interchange

• See http://json.org/ for the detailed syntax

of JSON.
Lecture 14 – Ethereum - Development Environment

JSON is built on two structures

• A collection of name/value pairs.
– In various languages, this is realized as an object, record,
struct, dictionary, hash table, keyed list, or associative
array.
– e.g.: An object with three properties named "a", "b", and
"c"
{ "a":1,"b":2,"c":3 }
• An ordered list of values.
– In most languages, this is realized as an array, vector, list,
or sequence.
– e.g.: An array of three integers and one string value
[ 1, 2, 3, "value #4 with" ]
Lecture 14 – Ethereum - Development Environment

Example
{"firstName": "John",  This is a JSON object
"lastName" : "Smith",
with five key-value pairs
"age" : 25,
"address" :  Objects are wrapped by
{"streetAdr” : "21 2nd Street", curly braces
"city" : "New York",
 There are no object IDs
"state" : "NY",
”zip" : "10021"},  Keys are strings
"phoneNumber":  Values are numbers,
[{"type" : "home",
strings, objects or
"number": "212 555-1234"},
{"type" : "fax",
arrays
"number” : "646 555-4567"}]  Ararys are wrapped by
} square brackets
Lecture 14 – Ethereum - Development Environment

Server-side JavaScript - Node.js

• JavaScript is a “complete” language: you can use it in
many contexts and achieve everything with it you can
achieve with any other “complete” language.

• Node.js really is just another context: it allows you to run

JavaScript code in the backend, outside a browser.
Lecture 14 – Ethereum - Development Environment

Server-side JavaScript - Node.js

• Plus, Node.js ships with a lot of useful modules, so you
don’t have to write everything from scratch,

• Thus, Node.js is really two things: a runtime environment

and a library.
Lecture 14 – Ethereum - Development Environment

A Webserver
var http = require("http");

function sendResponse(request, response)

{
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World");
response.end();
}
http.createServer(sendResponse).listen(8888);
Lecture 14 – Ethereum - Development Environment

npm – Node Package Manager

npm install upper-case

//hello-world.js

upper = require("upper-case")
console.log(upper("Hello World"));
Lecture 14 – Ethereum - Development Environment

back to Truffle ...

• Sweet Tool for the Smart Contracts
• A development environment for blockchains using the
Ethereum Virtual Machine (EVM), aiming to make life as
a developer easier.

npm install truffle -g

Lecture 14 – Ethereum - Development Environment

The Truffle workflow

• You can create a bare project template or you can use
Truffle Boxes, which are example applications and
project templates.

• We wont use the boxes, however the MetaCoin box is a

good start
Lecture 14 – Ethereum - Development Environment

The Truffle workflow – New Project

• Create a directory somewhere to store our truffle project.
• To create a bare truffle project with no smart contracts
included
– Use truffle init
Lecture 14 – Ethereum - Development Environment

The Truffle workflow – New Project

• Truffle has created a directory structure for us

– The contracts folder will host all our contracts

– The migrations folder will contain migration scripts used by truffle
to manage deployments.
– The test folder will contain files to test your application and
contracts.
– The build folder will contain the artifacts of compilation.
• Should not edit these files
– The configuration file “truffle-config.js”, it contains information
about networks and compilers
Lecture 14 – Ethereum - Development Environment

Sample Configuration File

module.exports = {
networks: {
development: {
host: "127.0.0.1",
port: 8545,
network_id: "*" // Match any network id
}
},
compilers: {
solc: {
version: "^0.8.0"
}
}
};
Lecture 14 – Ethereum - Development Environment

Truffle workflow – Compile SimpleStorage

• For our SimpleStorage contract, lets place the source
under the contracts folder, our file is named
SimpleStorage.sol
• To compile our contract, we can use truffle compile.
You will notice the build folder in the directory structure.
Lecture 14 – Ethereum - Development Environment

Truffle workflow – Deploy SimpleStorage

• To migrate our contract, we can use truffle migrate.
• Simple migration scripts is needed.

var MyContract = artifacts.require("SimpleStorage");

module.exports = function(deployer) {
// deployment steps
deployer.deploy(MyContract);
};
Lecture 14 – Ethereum - Development Environment

Deployment Script – Filename

• Filename is prefixed with a number and is suffixed by a
description
– 4_example_migration.js

• The numbered prefix is required in order to record

whether the migration ran successfully.

• The suffix is purely for human readability and

comprehension.
Lecture 14 – Ethereum - Development Environment

Deployment Script
• To deploy two contracts
var ContractOne = artifacts.require("ContractOne");
var ContractTwo = artifacts.require("ContractTwo");

• To deploy synchronously in a certain order

// Stage deploying ContractOne before ContractTwo

deployer.deploy(ContractOne);
deployer.deploy(ContractTwo);
Lecture 14 – Ethereum - Development Environment

Deployment Script

• Each function on the deployer can be used as a

Promise, to queue up deployment tasks that depend on
the execution of the previous task:

// Deploy ContractOne, then deploy ContractTwo

// passing in ContractOne`s newly deployed address

deployer.deploy(ContractOne).then(function() {
return deployer.deploy(ContractTwo, ContractOne.address);
});
Lecture 14 – Ethereum - Development Environment

Deployment Script – Deploy API

• Deploy a single contract without constructor arguments

– deployer.deploy(A);
• Deploy a single contract with constructor arguments
– deployer.deploy(A, arg1, arg2, ...);
• Don't deploy this contract if it has already been deployed
– deployer.deploy(A, {overwrite: false});
• Set a maximum amount of gas and `from` address for
the deployment
– deployer.deploy(A, {gas: 4612388, from: "0x...."});
Lecture 14 – Ethereum - Development Environment

The Truffle workflow – SimpleStorage

• To migrate our contract, we can use truffle migrate.
Lecture 14 – Ethereum - Development Environment

Interacting with the Contracts

• The Ethereum network makes a distinction
between writing data to the network and reading
data from it. Why?

• In general, writing data is called a transaction

whereas reading data is called a call.
Lecture 14 – Ethereum - Development Environment

Contract Interaction - Transactions

• Transactions fundamentally change the state of the
network.
• The defining characteristic of a transaction is that it
writes (or changes) data.
• Transactions cost Ether to run, known as "gas", and
transactions take time to process.
Lecture 14 – Ethereum - Development Environment

Contract Interaction - Calls

• Calls can be used to execute code on the network,
though no data will be permanently changed.
• Calls are free to run, and their defining characteristic is
that they read data.
Lecture 14 – Ethereum - Development Environment

... back to SimpleStorage

• Our contract has two methods.
– Set and Get.

• Which one requires call and which one

requires a transaction?
Lecture 14 – Ethereum - Development Environment

Setting value at SimpleStorage

• Launch Ganache and in use the command
truffle console to launch console.
>cd simplestorage/
>truffle console
truffle(ganache)>

• We can then create an instance representing the

deployed contract as follows:
let instance = await SimpleStorage.deployed()
Lecture 14 – Ethereum - Development Environment

Setting value at SimpleStorage

Lecture 14 – Ethereum - Development Environment

Setting value at SimpleStorage

Lecture 14 – Ethereum - Development Environment

Getting value at SimpleStorage