Ethereum Dapp (Vyper & Django)

Step 1: In this exercise, we will create a simple Ethereum Dapp with a UI that can read and store a number on the blockchain using smart contract interaction. We will be using Brownie, a Python-based development framework for Ethereum smart contracts, to deploy the smart contract on a local Ganache blockchain. We will then use Django, a Python-based web framework, to build a web app that can interact with the deployed smart contract. The web app will be able to read and store a number on the blockchain using smart contract interaction.

Step 2: First step is to create a brownie project. Normally, we can use 'brownie init [project_name]' command to create a brownie project with folder scripts, contracts, tests and build. But in this case, we will be using a pre-created brownie project.

Step 3: Clone already created brownie project from github repo.

Step 4: Switch to 'VS Code' and check the cloned 'vyper-django-dapp' directory. You will be able to see 'build', 'contacts', 'scripts' and 'webapp'. In this first 3 folders are related to brownie and last one is related to django.

Step 5: Open the Smart Contract written in Vyper language in 'contracts' folder. This contract defines a public variable 'storedNumber' of type uint256, with a setter function 'setNumber' to store a given number and a getter function 'getNumber' to retrieve the stored number.

Step 6: Compile the vyper source code to generate byte code. This can be done using 'vyper [path_to_contracts_file]' command. on terminal, switch to the cloned directory and run the compilation.

Step 7: Use compiler to get the ABI for the contract. ABI stands for Application Binary Interface. It is a JSON file that describes the functions and data of a smart contract. It is used to interact with smart contracts.

Step 8: open a new terminal and run Ganache to start a local blockchain. Ganache is a personal blockchain for Ethereum development that can be used to deploy contracts, develop applications, and run tests.

Step 9: Let Ganache run in the current tab and Open a new terminal tab to proceed with the next steps.

Step 10: Add local ganche network to Brownie. You can name it as per your choice. In this case, we are naming it 'testnet'.

Step 11: We are now ready to deploy this contract. Switch to 'scripts' folder. deploy.js is the deployment script. It is a Python script to deploy NumberStorage' smart contract using 1st account (accounts[0]) provided by Ganache using Brownie.

Step 12: Switch to terminal and run deployment script to deploy the smart contract on 'testnet' network.

Step 13: A successful deployment will generate a new file called 'deployments.json' in the 'build' folder. This file contains the contract address and ABI for the deployed smart contract. You will also be able to see the contract address in the terminal, we already have ABI from previous steps.

Step 14: Let's interact with the deployed contract. Switch to 'scripts' folder. The script 'interact.py' is a Python script to interact with the deployed smart contract using 1st account (accounts[0]) provided by Ganache. Script is heavily commented to explain each step.

Step 15: Replace the Contract address and ABI present in 'interact.py' file with the ones you have acquired in the previous step.

Step 16: Switch to terminal and run the script to interact with the deployed smart contract. The script will first read the current number stored on the blockchain and then store a new number (e.g., 20) on the blockchain.

Step 17: Contarct is deployed and we can interact with it. Now let's proceed to create a Django project to build a web app that can interact with the deployed smart contract

Step 18: At this point, the next step is to create a Django project using 'django-admin startproject [project_name]' command. But, we already have a project named 'webapp' in the cloned repo. So, we will be using that.

Step 19: Change the project directory to webapp.

Step 21: Similarly, we had to create a new Django app using 'python manage.py startapp [app_name]' command. But, we already have an app named 'numberstore' in the cloned repo. So, we will be using that.

Step 22: Launch local app server and serve the web app over port 8000 on all interfaces so we can check the webapp in browser. Keep this command running in the terminal and use new terminal tab for next steps.

Step 23: Switch to 'localhost:8000' tab, press 'Go' button. If you are facing issues and seeing a warning in a browser regarding 'Embedded page not allowed', then please use the provided button to access this link in a new browser tab. Then, you should be able to see a dummy page.

Step 24: Now we will modify the Django web app to interact with the deployed 'NumberStorage' smart contract from server side and client side.

Step 26: Hence, in 'templates' folder (inside the 'numberstore' app), we have provided two HTML files i.e. 'server.html' and 'client.html'. As the name suggests, server.html is used to interact with the smart contract from the server side, whereas client.html is used to interact with the smart contract from the client side.

Step 27: Replace the Contract address and ABI obtained in previous steps in both HTML files and 'views.py' backend django file.

Step 27: The 'views.py' file contains the backend code for the Django web app. It defines two functions, 'server' and 'client', to render the 'server.html' and 'client.html' pages, respectively. It also defines two functions, 'getNumber' and 'setNumber', to read and store a number on the blockchain using smart contract interaction. We will recommned you to go through the code and understand it.

Step 33: If Django test server is not running then start it.

Step 34: Switch to 'localhost:8000' tab (OR the browse tab, depending on previous steps), copy-paste the provided path in 'path' field (OR append it to URL) and click 'Go' button.

Step 35: This page will show us the current number stored on the Blockchain. We can alsp perform a write operation on the Blockchain, simply input the desired number (e.g., 78 or any other value) into the provided text field and then click the 'Submit' button.

Step 36: In this scenario, since the interactions for reading and writing are carried out on the server side, there will be no involvement of Metamask. After clicking the 'Submit' button, the page will refresh, and you will notice that the saved number is now updated to 78, along with the transaction hash displayed on the screen.

Step 37: This way our webapp can interact with the blockchain on Server side. Now, let's move to client side (e.g. Metamask based) interaction.

Step 38: Switch to 'localhost:8000' tab (OR the browse tab, depending on previous steps), copy-paste the provided path in 'path' field and click 'Go' button. If Metamask is already installed in your browser, it will be automatically triggered. Metamask will request for permission to connect to this page. Proceed to connect.

Step 39: As we will be using Metamask to interact with the smart contract, we will need to add our local Ganache network to Metamask. To do so, click on the provided button. This will take you through the process of adding a custom RPC to Metamask.

Step 40: Now, we need to add an address to Metamask which has some test Ether. Click on Account section of Metamask and select 'Import Account'.

Step 41: Enter the private key of the second account (accounts[1]) provided by Ganache. This will import the account to Metamask. This account has 1000 test Ether.

Step 42: Reading the value doesn't need write to blockchain, so we will view the saved value without any transaction. However, to save a new value, enter a new number (e.g., 897) in the text field and press the 'Store' button. As this is a write operation, Metamask will initiate a transaction to the smart contract. You'll need to click the 'Confirm' button to authorize the transaction and proceed with the value updation.

Step 43: After the transaction is confirmed, refresh the page, and you will observe that the most recent value (897 in this case) will be displayed on the page.

Step 44: We leaned how to interact with the smart contract from the server side and client side!