After practising the first Dapp of Metacoin, this article will take through the process of building my second dapp---an adoption tracking system for a pet shop!
Olivia's Pet Shop aims to use ethereum as an efficient way to handle pet adoptions.? This dapp associates an Ethereum address with a pet to be adopted.
Steps covering:
1. Setting up the development environment
2. Creating a Truffle project using a Truffle Box
3. Writing the smart contract
4. Compiling and migrating the smart contract
5. Testing the smart contract
6. Creating a user interface to interact with the smart contract
7. Interacting with the dapp in a browser
Setting up the development environment
Envionment set up is same with metacoin, i am going to skip this step.
Create a Truffle Box called?pet-shop which includes the basic project structure as well as code for the user interface.?
Writing the smart contract
Writing the smart contract that acts as the back-end logic and storage.Create a new file named?Adoption.sol?in the?contracts/?directory. Inside of smart contract, functions of 'Adopting a pet','Retrieving the adopters' should be included.
Compiling and migrating the smart contract
The next steps are to compile and migrate it. Truffle has a built-in developer console called truffle develop, which generates a development blockchain that we can use to test deploy contracts.? Compile is to translate our human-readable solidity into somthing the EVM understand.
Migrate
Create a new file named?2_deploy_contracts.js?in the?migrations/?directory.
Before migrating our contract to the blockchain, we need to have a blockchain running. For my pratice, i am using Ganachecli?a personal blockchain for Ethereum development you can use to deploy contracts, develop applications, and run tests.This will generate a blockchain running locally on port 8545.
Then we migrate the contract to blockchain. You will find the blockchain address of the deployed contract.
Testing the smart contract
Create a new file named?TestAdoption.sol?in the?test/?directory.
You will see output similar like below
Creating a user interface to interact with the smart contract
The app structure is already there under /src directory. Then we need firstly to instantiating web3.
Open?/src/js/app.js?in a text editor and call the function?initWeb3(). The?web3 JavaScript library?interacts with the Ethereum blockchain. It can retrieve user accounts, send transactions, interact with smart contracts, and more. Then instantiating the contract, getting the adopted pets and updating the UI and handling the adopt() function.
Interacting with the dapp in a browser
To use the dapp, we need to install Metamask to interact with the dapp. Go to custom network and input your localhost ip address http://x.x.x.x:8545, import one of the private keys which generate from the ganachecli to create a local account. Later we will use the ether in this account to adopt pet.
Installing and configuring lite-server
npm run dev to start the local web server.The dev server will launch and automatically open a new browser tab containing your dapp.?
To use the dapp, click the?Adopt?button on the pet of your choice. You will be automatically promted to approve the transaction by Metamask. Click Confirm to approve the transaction.
You'll see the button next to the adopted pet change to say "Success" and become disabled, just as we specified, because the pet has now been adopted.
Back to your account, you will see 100th has been deducted and also your transaction history each of which owns a hash which is uniquely to identify the transaction, as well as your total amount you have consumed.
You'll also see the same transaction listed in Ganachecli log.
For now, the dapp has been succesfully deployed into your local blockchain network, If you'd like to make your dapp live for others to use, it should be able to deploy to the Ropsten testnet.
