# Develop your first Dapp!


By [Nazeeh21](https://paragraph.com/@nazeeh) · 2022-05-30

---

Interested in Blockchain technology, but don't find a reliable source to get started? You have come to the right place. In this article, we'll learn how to develop a complete decentralized website (Dapp) from scratch.

We will be writing a **Lottery** contract that will allow people to participate in the lottery. The lottery manager will pick a lottery winner and all the lottery amount will eventually get transferred to the winner. Sounds interesting, right? So, let's get started!

To develop a dapp, we first need to write an Ethereum Smart Contract using [Solidity](https://docs.soliditylang.org/en/v0.8.6/) which we'll deploy on the blockchain network.

We'll be using [Remix IDE](http://remix.ethereum.org/) for writing, debugging, and interacting locally with the Smart Contract.

**Note:** To follow along, refer to [this contract](https://github.com/Nazeeh21/Lottery-Contract/blob/main/contracts/Lottery.sol).

Let's write our **first smart contract**. Head on to the [Remix IDE](http://remix.ethereum.org/) and navigate to the _Storage.sol_ file in the _Contracts_ folder as shown.

Storage.sol

Delete the existing code from the _Storage.sol_ file and follow along.

Specify the Solidity version for our code by adding the code below.

    pragma solidity ^0.4.17;
    

Now, let's get started with the **Contract**.

    contract Lottery { 	
        
     }
    

Firstly, we have used the `contract` keyword to declare a Contract named **Lottery**, followed by the _curly_ braces, where we'll write our Contract.

Now, declare two variables namely `manager` of datatype `address` and `players` of datatype `address[]`. In Solidity, the `address` datatype is used to store the **wallet address**.

    address public manager;
    address[] public players;
    

Following, declare a `Lottery()` function. As this function has the same name as the Contract name, it will eventually work as a **constructor**.

    function Lottery() public {
            manager = msg.sender;
    }
    

This function will execute automatically when anyone deploys the Contract. We have used the `public` keyword after the function name which will make the function's visibility _public_ and let anyone call the function.

In this function, we are setting the caller of the function as the manager. As a result, the user who will deploy this Contract will be recognized as the manager of the contract.

In our case, you will the renowned manager of the Contract as you are going to deploy it.

After that, declare an `enter()` function.

    function enter() public payable {
            require(msg.value > .01 ether);
            players.push(msg.sender);
    }
    

This function will let anyone enter our lottery. Apart from the `public` keyword, we have used the `payable` keyword. It specifies that this function will require some amount of **ethers** to execute. So, whoever wants to enter our lottery, needs to pay a specified amount of _ether_, which also seems necessary, right? This _ether_ will get stored as the _Contract's_ ether in our _Contract_.

In the `enter()` function, we have written `require(msg.value > .01 ether);`. Here, `msg.value` denotes the amount of ether the user sends along with the function. It specifies that to enter our _Lottery_, the caller of the function must send ethers more than _0.01 ether_ and if the caller fulfills the specified condition, then only he is welcomed in the contract by pushing the caller's address to the `players` array.

Following the `enter()` function, comes the `random()` function.

    function random() private view returns (uint) {
            return uint(keccak256(block.difficulty, now, players));
     }
    

Yes, you are getting it right. This function will return a _random_ number which will help the manager in picking a random winner among the entered players. Solidity does not have a native `random` method, thus we have to define our own.

But let's discuss what are these `private`, `view`, and `returns` keywords following the function name.

> `private` -> This keyword is the opposite of the `public` keyword. By using the `private` keyword, we are blocking public access to this function. As a result of which, this function can't be called from outside of the contract, even by the manager, and can only be called from inside of the Contract.

> `view` -> It will restrict the modification of the data of our Contract and will only allow reading our Contract data.

> `returns` -> It specifies that our function will return some data. Following it, we have written `(uint)` which specifies that our function will return data of type `uint`. (_uint_ stands for _unsigned integer_).

If you want to know more about the Solidity datatypes, then go to [this](https://docs.soliditylang.org/en/v0.4.24/types.html#value-types) page.

After `random()` comes the `pickWinner()` function, which will let the manager pick the winner of our _Lottery_.

    function pickWinner() public restricted {
            uint index = random() % players.length;
            players[index].transfer(this.balance);
            players = new addressUnsupported embed;
    }
    

Here, we have used a new keyword namely `restricted` after the `public` keyword.

What does this `restricted` keyword specify? Well, we'll talk about this keyword after the upcoming function.

In the `pickWinner()` function, we are initializing the `index` variable of type _uint_ to store the array index of the winning player, which is obtained by the shown operation. This operation will return a random number from 0 to `players.length() -1`.

After getting the `index`, we are transferring all the contract's ether to the address at the `players[index]`. Followed by resetting the `players` variable to an empty array, so that we can now accept entries for a new lottery.

After `pickWinner()`, comes the `restricted()` modifier.

    modifier restricted() {
            require(msg.sender == manager);
            _;
    }
    

**Modifier** is a special keyword that allows you to control the behavior of your smart contract functions. We have seen the use case of modifier in `pickWinner()` function. By using _modifier_, all the conditions specified in the modifier will also be applicable for the function in which it is used.

In `restricted()` modifier, we have specified the condition `require(msg.sender == manager);` which specifies that sender must be the manager of the Contract. After that, we have written `_;`, which will execute all the function code after this.

Lastly comes the `player()` function, which returns the `players` array.

    function getPlayers() public view returns (address[]) {
            return players;
    }
    

Getting bored of the theoretical thing, right? So, let's deploy our contract and start interacting with it.

Navigate to the **deploy and run transactions** panel on the Remix IDE. In this panel, make sure, your _ENVIRONMENT_ is set to _JavaScript VM_ as shown.

remix\_ss\_5

Similarly, select _Lottery-Contracts_ under the _CONTRACT_ tab. Now, click **Deploy**.

After **Successfully** deploying your Contract, you can see all the variables and methods of our _Lottery_ contract in a Graphical form as shown below.

remix\_ss\_3

Clicking each of these buttons, allow us to interact with our Contract.

On clicking the _manager_ button, you should get your current address. You can verify that address with your current address in the _ACCOUNT_ tab below the _ENVIRONMENT_ tab as shown below.

remix\_ss\_4

You can also change your current account, by selecting another account from the _ACCOUNT_ tab. Now, enter the lottery from this new account.

#### Note: You can check the status of your transaction by expanding the panel from the bottom as shown below.

remix\_ss\_6

Now, click the **getPlayers** button, you should get an empty array. Surprised to see an empty array despite entering the lottery?

In reality, our **enter** function was failed. This was because we have required a minimum value of _0.01 ether_ to enter our lottery.

Now, under the _VALUE_ tab, change the unit to **ether** from **Wei** and enter value _1_. Now, again click the **enter** button and then click **getPlayers** button again. Now you should see your current address.

Finally, click the **pickWinner** button. Before clicking, ensure that your address is the same as the manager's address, by selecting from the _ACCOUNT_ tab. After picking the winner, you can verify that the ether in any of the player's addresses is again 100 and now the `players` array is also empty.

**That's all! Woohoo! You just wrote and deployed your first Smart Contract on the test network.**

To integrate **React web app** with your **Smart Contract**, you can follow [next tutorial](https://dev.to/nazeeh21/integrate-your-react-app-with-smart-contracts-4o3m).

---

*Originally published on [Nazeeh21](https://paragraph.com/@nazeeh/develop-your-first-dapp)*