Создание вашего первого Dapp с Solidity на блокчейне Polygon

Привет, сегодня я покажу, как легко создать децентрализованное приложение.

Это просто в образовательных целях, но благодаря этой статье вы увидите, как работает dapp и почему это удивительно и инновационно.

Что мы будем создавать?

Мы будем создавать простую игру-гадание с помощью Solidity, но на блокчейне. Звучит круто, правда? Давайте приступим к делу.

Что нам нужно?

  1. Аккаунт в Alchemy, зарегистрируйтесь бесплатно здесь.

  2. Кошелек metamask, (скачивайте только с официальной ссылки).

  3. Solidity и Hardhat (о них мы поговорим позже).

Инициализация нашего проекта

Предполагается, что вы немного знакомы с node.js и уже установили его, поэтому в терминале запустите:

npm init
Войти в полноэкранный режим Выйти из полноэкранного режима

Установка и инициализация Hardhat

Это должно привести к созданию файла package.json, чтобы он мог отслеживать наши зависимости. Далее мы установим hardhat.

npm install --save-dev hardhat
Вход в полноэкранный режим Выход из полноэкранного режима

Hardhat – это среда разработки для компиляции, развертывания, тестирования и отладки программного обеспечения Ethereum, а Polygon, как оказалось, является решением второго уровня для Ethereum. Она помогает разработчикам при создании смарт-контрактов и dApps локально перед развертыванием на живой цепи.

После завершения установки выполните следующие действия для создания нового проекта хардварной платформы

npx hardhat
Войдите в полноэкранный режим Выйти из полноэкранного режима

Вы должны увидеть это в терминале, просто нажмите enter, так как настройки по умолчанию подходят для этого руководства.

Хранение наших ключей

Мы почти закончили с настройкой, нам нужен способ безопасного хранения наших ключей, поэтому выполните следующие действия.

npm install dotenv
Войдите в полноэкранный режим Выйти из полноэкранного режима

Когда установка будет завершена, создайте файл .env, в нем мы будем хранить наши ключи.

ПРЕДУПРЕЖДЕНИЕ: Если вы используете систему контроля версий, например git, для управления проектом, пожалуйста, НЕ отслеживайте файл .env. Добавьте .env в свой файл .gitignore, чтобы случайно не опубликовать свои секреты всему миру.

Настройка Alchemy

Alchemy – это платформа для разработчиков блокчейна, которая позволяет нам взаимодействовать с цепочкой Polygon без необходимости устанавливать собственные узлы, поэтому не забудьте зарегистрироваться по ссылке.

После регистрации аккаунта вы можете сгенерировать API-ключи, создав приложение.

Теперь вы можете легко скопировать ваши API KEYS и сохранить их в файле .env, добавив в него следующее

API_URL = "https://polygon-mumbai.g.alchemy.com/v2/your-api-key"
Войти в полноэкранный режим Выйти из полноэкранного режима

Конфигурация метамаски

После создания учетной записи выполните следующие шаги, чтобы настроить сеть Polygon на вашем кошельке.

Выберите “Настройки” из выпадающего меню в правом верхнем углу вашего кошелька Metamask.

Выберите “Сети” в меню слева.

Подключите свой кошелек к сети Mumbai Testnet, используя следующие параметры.

Имя сети: Polygon Mumbai Testnet
Новый URL RPC: https://polygon-mumbai.g.alchemy.com/v2/your-api-key
ChainID: 80001
Символ: MATIC
URL проводника блоков: https://mumbai.polygonscan.com/

Получение тестовых токенов

Далее вам понадобится несколько поддельных MATIC для тестирования, вы можете получить их в Polygon Mumbai Testnet. Выберите “Mumbai”, выберите “MATIC Token” и введите адрес своего кошелька Polygon, затем нажмите “Submit”. Получение вашего фальшивого Eth может занять некоторое время из-за сетевого трафика.

Экспортируйте и скопируйте приватный ключ кошелька metamask и включите его в файл .env.

PRIVATE_KEY = "your-metamask-private-key"
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Ваш файл .env должен выглядеть следующим образом. Подробнее о файлах переменных окружения читайте здесь.

Игра “Угадай-ка

Перейдите в каталог contracts и создайте новый файл solidity, запустите его:

cd contracts && touch Guess_Game.sol
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь откройте файл Guess_Game.sol и вставьте это, не забудьте прочитать комментарии, чтобы понять, как это работает.

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "../node_modules/hardhat/console.sol";

// Check out the official documentation to learn more about every concept here: https://docs.soliditylang.org/en/v0.8.13/index.html
contract Guess_Game {

    //  Declared state variables whose values are permanently stored in contract storage.
    uint random_number;
    bool game_completion;
    address winner;

    // This is a Struct that defines value for the user interacting with the smart contract
    struct player {
        uint guess;
        uint trials;
        bool registered;
    }

    // Created a mapping of an address to the player Struct
    mapping (address => player) player_structs;

    // Created a dynamic array of player addresses 
    address[] internal players_addresses;


    // Defining the Contructor which is a block of code that runs the instant the contract is deployed
    constructor() {

        // Depending on the timestamp of the current block, the keccak function will generate a random number and we're keeping it between 1 and 100
        random_number = uint(keccak256(abi.encodePacked(block.timestamp))) % 100;

        // When the contract is deployed, we initialize this variable as false since no one has won yet
        game_completion = false;
    }

    // Generates a new struct with msg.sender which just the user's wallet address and appends it to the array 
    function set_Player() internal {
        player_structs[msg.sender].guess = 0;
        player_structs[msg.sender].trials = 5;
        player_structs[msg.sender].registered = true;

        players_addresses.push(msg.sender);
    }

    // A function for verifying if a user has been tried to guess before and is registered
    function get_Player(address _player) internal view returns(bool) {
        return player_structs[_player].registered;
    }

    // This function is visible to the user, it reads the user's input and calls the game function
    function Guess(uint _Guess) public {
        if (game_completion) {
            console.log("Game has been completed and the winning address is ", winner);
        }

        // Checks to see if player has been assigned a struct
        if (get_Player(msg.sender) != false) {
            set_Player();
        }

        // Passes in the input and stores it for that particular player
        player_structs[msg.sender].guess = _Guess;

        Game();
    }

    // The Game Logic, this internal function is called whenever a guess is made
    function Game() internal {
        uint guess = player_structs[msg.sender].guess;
        uint attempts = player_structs[msg.sender].trials;

        if (attempts > 0) {
            if (guess > random_number) {
                console.log("Your guess was too big, Guess again");
            }

            else if (guess < random_number) {
                console.log("Your guess was too small, Guess again");
            }

            else if (guess == random_number && game_completion) {
                console.log("You got the number but the game has already been won");
            }

            else if (guess == random_number && !game_completion) {
                console.log("Congrats! You won the guess game first");
                winner = msg.sender;
                game_completion = true;
            }
        }

        else {
            console.log("You're out of attempts");
        }
    }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Подключение Metamask & Alchemy к вашему проекту

Мы создали кошелек Metamask и аккаунт Alchemy, написали наш смарт-контракт, теперь пришло время соединить их.

Наши ключи для кошелька и учетной записи Alchemy уже сохранены, поэтому пришло время обновить файл hardhat.config.js, чтобы иметь возможность инициировать соединение.

Перейдите в корневой каталог и обновите файл hardhat.config.js, чтобы он выглядел следующим образом:

/**
* @type import('hardhat/config').HardhatUserConfig
*/

require('dotenv').config();
require("@nomiclabs/hardhat-ethers");

const { API_URL, PRIVATE_KEY } = process.env;

module.exports = {
  solidity: "0.8.9",
  defaultNetwork: "polygon_mumbai",
  networks: {
    hardhat: {},
    polygon_mumbai: {
      url: API_URL,
      accounts: [`0x${PRIVATE_KEY}`]
    }
  },
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Скомпилируйте наш контракт

Чтобы убедиться, что все работает, давайте скомпилируем наш контракт. Задача компиляции является одной из встроенных задач hardhat.

Запустите ее из командной строки:

npx hardhat compile
Войти в полноэкранный режим Выйти из полноэкранного режима

Развертывание нашего контракта

Наш контракт написан, и наш конфигурационный файл тоже готов к работе, теперь пришло время написать сценарий развертывания контракта, чтобы мы могли его развернуть.

Перейдите в папку scripts/ и создайте новый файл deploy.js и добавьте в него следующее:

async function main() {
    const Guess_Game = await ethers.getContractFactory("Guess_Game");

    // Start deployment, returning a promise that resolves to a contract object
    const guess_game = await Guess_Game.deploy(); 
    console.log("Contract deployed to address:", guess_game.address);
   }

   main()
    .then(() => process.exit(0))
    .catch(error => {
    console.error(error);
    process.exit(1);
    });
Войти в полноэкранный режим Выйти из полноэкранного режима

Обязательно ознакомьтесь с документацией hardhat, чтобы понять, что делает каждая строка.

Время развертывания

Теперь, наконец, пришло время развертывания, перейдите в командную строку и запустите:

npx hardhat run scripts/deploy.js --network polygon_mumbai
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы должны увидеть что-то вроде:

Contract deployed to address: 0x56D94982E71867c007c57659d5a2b199E581b502
Войти в полноэкранный режим Выйти из полноэкранного режима

Скопируйте этот адрес; давайте проверим его, перейдите в проводник Polygon Mumbai и найдите адрес нашего контракта, мы должны увидеть, что он был успешно развернут.

Поздравляем! Вы только что развернули смарт-контракт в цепочке Polygon. 🎉

Чтобы понять, что происходит под капотом, перейдите на вкладку Explorer в нашей приборной панели Alchemy “The Guessing Game”.

В последующих статьях мы создадим пользовательский интерфейс для этого dapp, Вот Github repo для вышеуказанного кода.

Спасибо, что дочитали до конца, отзывы всегда ценятся.

Оцените статью
Procodings.ru
Добавить комментарий