1. Introduction

This is a way to execute the "Pet Shop Tutorial" (source page last updated in this commit). You can follow the steps below only by copying and paste the commands (from here to your Bash shell). When you finish running the steps presented here, you will get a local git repository called ethereum-pet-shop-ftecm221 (like this).

  1. To continue you will need a Bash shell environment (of course) with Git installed.

  2. I only tested this steps on Ubuntu (running it through WSL2).

Clone the GitHub repository of this tutorial and use the following command to follow it in a terminal:

$ asciidoctor README.adoc -o - | w3m -T text/html -dump | less

2. Setting up the development environment

Introduction

Before start, install node and npm.

Installation on Ubuntu

  1. Install nvm.

  2. Install node through nvm:

$ nvm install --lts
Last environment tested
$ nvm -v
0.39.1
$ node -v
v16.14.2
$ npm -v
8.5.0

Clone this project and change your current directory to it:

$ repo=https://github.com/paulojeronimo/ethereum-pet-shop-tutorial
$ git clone $repo && cd $(basename "$repo")
$ git checkout ftecm221

Load the functions.sh in your current shell:

$ source ./functions.sh install

  1. This command will also modify your startup shell file.

  2. This script install some useful functions (like pet-shop and gc) that I have created to minimize the number of commands that we need to type in this tutorial.

Install truffle:

$ npm i -g truffle
Last environment tested
$ truffle version
Truffle v5.5.10 (core: 5.5.10)
Ganache v^7.0.3
Solidity v0.5.16 (solc-js)
Node v16.14.2
Web3.js v1.5.3

3. Creating a Truffle project using a Truffle Box

Introduction

$ mkdir ethereum-pet-shop-ftecm221 && cd $_
$ truffle unbox pet-shop
$ pet-shop init

Read the generated README.adoc.

4. Writing the smart contract

Introduction

$ pet-shop add contracts/Adoption.sol <<'EOF'
pragma solidity ^0.5.0;

contract Adoption {

}
EOF
If you have are following tutorial without an IDE and have the command git difftool configured, type pet-shop difftool.

Variable setup

$ pet-shop apply ../patches/01.patch 'Variable setup'

Your first function: Adopting a pet

$ pet-shop apply ../patches/02.patch 'Your first function: Adopting a pet'

Your second function: Retrieving the adopters

$ pet-shop apply ../patches/03.patch 'Your second function: Retrieving the adopters'

5. Compiling and migrating the smart contract

Introduction

$ truffle compile
# some warnings will appear ... normal!
$ pet-shop add migrations/2_deploy_contracts.js <<'EOF'
var Adoption = artifacts.require("Adoption");

module.exports = function(deployer) {
  deployer.deploy(Adoption);
};
EOF

Install ganache:

$ npm install -g ganache

Start ganache:

$ gc start

The gc command is also a function loaded by the function script. Its source code is in the file ganache.sh. You can see the code for this function executing:

$ type gc

If you want to follow the log produced by ganache type the following command:

$ gc log tail
$ # Press <kbd:Ctrl+C> to stop seeing the log. This will not kill
ganache
 
$ truffle migrate
$ tree build/
$ echo build >> .gitignore
$ git commit -am 'File .gitignore modified'

6. Testing the smart contract using Solidity

Introduction

$ pet-shop add test/TestAdoption.sol <<'EOF'
pragma solidity ^0.5.0;

import "truffle/Assert.sol";
import "truffle/DeployedAddresses.sol";
import "../contracts/Adoption.sol";

contract TestAdoption {
 // The address of the adoption contract to be tested
 Adoption adoption = Adoption(DeployedAddresses.Adoption());

 // The id of the pet that will be used for testing
 uint expectedPetId = 8;

 //The expected owner of adopted pet is this contract
 address expectedAdopter = address(this);

}
EOF

Testing the adopt() function

$ pet-shop apply ../patches/04.patch 'Testing the adopt() function'

Testing retrieval of a single pet’s owner

$ pet-shop apply ../patches/05.patch "Testing retrieval of a single pet's owner"

Testing retrieval of all pet owners

$ pet-shop apply ../patches/06.patch "Testing retrieval of all pet owners"

Running the tests

$ truffle test

7. Creating a user interface to interact with the smart contract

Introduction

Instantiating web3

$ pet-shop apply ../patches/07.patch 'Instantiating web3'

Instantiating the contract

$ pet-shop apply ../patches/08.patch 'Instantiating the contract'

Getting The Adopted Pets and Updating The UI

$ pet-shop apply ../patches/09.patch 'Getting The Adopted Pets and Updating The UI'

Handling the adopt() Function

$ pet-shop apply ../patches/10.patch 'Handling the adopt() Function'

8. Interacting with the dapp in a browser

Introduction

Installing and configuring MetaMask

When configuring Metamask, use the seed phrase returned by the following command:

$ gc seedphrase

Installing and configuring lite-server

$ cat bs-config.json
$ sed -n '9,12p' package.json

Using the dapp

$ npm run dev

Open your browser in http://localhost:3000 and test the app.

Congratulations! You have taken a huge step to becoming a full-fledged dapp developer.