Building and Deploying a dApp on the Tezos Blockchain

Introduction:

Welcome to this in-depth tutorial on building and deploying a decentralized application (dApp) on the Tezos blockchain. This tutorial is designed to provide beginners with a detailed understanding of the process, covering each step with examples. By the end, you'll be equipped to create and deploy your dApp on Tezos. Let's get started!

Note: Prior knowledge of blockchain concepts and familiarity with programming languages such as Python and JavaScript will be helpful.

Step 1: Creating a New Tezos Project

Let's start by creating a new Tezos project. Follow these steps:

Install Node.js: If Node.js isn't installed, go to https://nodejs.org and download the latest version suitable for your operating system. Follow the installation instructions.
Initialize a new project: Open your command line interface and navigate to your desired project directory. Run the following command to create a new Tezos project:

npx create-tezos-dapp my-dapp

Install dependencies: Change into the project directory using:

cd my-dapp

Next, install the project dependencies by executing:

npm install

Step 2: Writing a Simple Smart Contract

In this step, we'll write a simple smart contract using the SmartPy language. Let's create a contract called "HelloWorld" that stores and retrieves a greeting message.

Create a new file: Inside the contracts folder of your project, create a new file named HelloWorld.py.
Define the contract: Open HelloWorld.py and write the following code:

import smartpy as sp

class HelloWorld(sp.Contract):
    def __init__(self, message):
        self.init(
            greeting=message
        )

    @sp.entry_point
    def updateGreeting(self, new_message):
        self.data.greeting = new_message

    @sp.entry_point
    def getGreeting(self):
        sp.result(self.data.greeting)

This contract initializes with a greeting message and provides entry points to update and retrieve the greeting.

Step 3: Compiling the Smart Contract

Now, let's compile the smart contract into Michelson, the low-level language of the Tezos blockchain.

SmartPy: If you're using SmartPy, there's no separate compilation step required. The SmartPy compiler automatically generates the Michelson code during deployment.

Step 4: Deploying the Smart Contract to the Tezos Blockchain

In this step, we'll deploy the smart contract to the Tezos blockchain using a deployment script.

Open the scripts folder in your project directory and locate the deploy.js file.
Update deployment parameters: Inside deploy.js, modify the network and secretKey variables according to your deployment environment.
Deploy the contract: In your command line interface, run the following command to deploy the contract:

node scripts/deploy.js

This command initiates the deployment process and outputs the contract address upon successful deployment.

Step 5: Creating a Simple Frontend Page for the dApp

To interact with our deployed contract, we'll create a simple frontend page using HTML, CSS, and JavaScript.

Create a new file: Inside the public folder of your project, create a new file named index.html.
Write HTML structure: Open index.html and write the following HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>Tezos dApp</title>
    <script src="tezos.js"></script>
</head>
<body>
    <h1>

Tezos dApp</h1>
    <div>
        <h2>Greeting: <span id="greeting"></span></h2>
        <input type="text" id="newGreeting" placeholder="Enter new greeting">
        <button onclick="updateGreeting()">Update Greeting</button>
        <button onclick="getGreeting()">Get Greeting</button>
    </div>
    <script src="main.js"></script>
</body>
</html>

Add necessary scripts: Inside the public folder, create a new file named tezos.js and add the necessary Tezos JavaScript library. Create another file named main.js to write the JavaScript code for contract interactions.
Implement contract interactions: Inside main.js, write the following JavaScript code:

const contractAddress = "CONTRACT_ADDRESS"; // Replace with your deployed contract address

async function updateGreeting() {
    const newMessage = document.getElementById("newGreeting").value;
    await Tezos.wallet.at(contractAddress).then((contract) => {
        return contract.methods.updateGreeting(newMessage).send();
    });
}

async function getGreeting() {
    await Tezos.wallet.at(contractAddress).then((contract) => {
        return contract.methods.getGreeting().call();
    }).then((greeting) => {
        document.getElementById("greeting").innerText = greeting;
    });
}

Replace "CONTRACT_ADDRESS" with the actual deployed contract address.

Step 6: Adding a Tezos Wallet Connect Button

To enable users to connect their Tezos wallets to the dApp, we'll add a wallet connect button using Beacon SDK.

Include Beacon SDK: Inside the <head> tag of index.html, include the Beacon SDK JavaScript file. Add the following line:

<script src="https://getbeacon.io/2.0.0-alpha.1/beacon.min.js"></script>

Implement wallet connection: In main.js, add the following code to handle wallet connections:

async function connectWallet() {
    const network = "network"; // Replace with your desired Tezos network (e.g., "mainnet" or "delphinet")
    const wallet = await BeaconWallet.requestPermissions({ network });

    if (wallet) {
        Tezos.setWalletProvider(wallet);
        // Update UI to reflect wallet connection
    }
}

Add a button in index.html that calls the connectWallet() function on click:

<button onclick="connectWallet()">Connect Wallet</button>

Step 7: Deploying the Website In this final step, we'll deploy the dApp website to make it accessible to users.

Build the project: Run the following command in your project's root directory to build your project:

npm run build

Deploy the website: Choose a hosting platform or service (e.g., Netlify, GitHub Pages, or IPFS). Follow their deployment instructions to upload your built project files and make the website accessible to users.

Step 8: Testing the Smart Contract

Before deploying the smart contract to the blockchain, it's essential to test its functionality. Here are a few suggestions:

Unit testing: Write unit tests using testing frameworks like PyTest (for SmartPy) or Ligo's built-in testing capabilities.
Integration testing: Simulate various scenarios and interactions with the contract to ensure its behavior aligns with your expectations.

Conclusion:

Congratulations! You've completed an in-depth tutorial on building and deploying a dApp on the Tezos blockchain. You've learned how to create a new project, write a smart contract, compile and deploy it to the