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

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

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

Read the generated README.adoc.

4. Writing the smart contract

$ 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.
$ pet-shop apply ../patches/01.patch 'Variable setup'
$ pet-shop apply ../patches/02.patch 'Your first function: Adopting a pet'
$ pet-shop apply ../patches/03.patch 'Your second function: Retrieving the adopters'

5. Compiling and migrating the smart contract

$ 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

$ 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
$ pet-shop apply ../patches/04.patch 'Testing the adopt() function'
$ pet-shop apply ../patches/05.patch "Testing retrieval of a single pet's owner"
$ pet-shop apply ../patches/06.patch "Testing retrieval of all pet owners"
$ truffle test

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

$ pet-shop apply ../patches/07.patch 'Instantiating web3'
$ pet-shop apply ../patches/08.patch 'Instantiating the contract'
$ pet-shop apply ../patches/09.patch 'Getting The Adopted Pets and Updating The UI'
$ pet-shop apply ../patches/10.patch 'Handling the adopt() Function'

8. Interacting with the dapp in a browser

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

$ gc seedphrase
$ cat bs-config.json
$ sed -n '9,12p' package.json
$ 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.