Introdução

Neste tutorial, vamos explorar o desenvolvimento de DApps (Aplicativos Descentralizados) na rede Fantom, uma blockchain de alta performance e baixa latência. O objetivo é guiá-lo em todo o processo de criação de um DApp do zero utilizando Redux para gerenciar o estado da aplicação, Truffle para desenvolver e testar contratos inteligentes em Solidity, e a integração com a rede Fantom. Você aprenderá desde a configuração do ambiente de desenvolvimento até a implantação do DApp, abordando os principais conceitos e práticas necessárias para um desenvolvimento eficiente na blockchain. Este guia é voltado para desenvolvedores que desejam expandir suas habilidades em blockchain e DApps.

Etapas

  1. Configuração do Ambiente de Desenvolvimento

    Certifique-se de ter o Node.js e o Truffle instalados em sua máquina. Você também precisará de uma carteira de criptomoedas como MetaMask e da rede Fantom configurada. Para verificar se o Node.js e o Truffle estão corretamente instalados, execute os comandos `node -v` e `truffle version` no terminal. Caso não tenha o Truffle instalado, use `npm install -g truffle` para instalá-lo globalmente.

    commands
    # Verificar versões instaladas
    node -v
    truffle version

  2. Criando um Novo Projeto Truffle

    Crie um novo diretório para o seu projeto e inicialize um novo projeto Truffle. Execute o comando `truffle init` dentro do diretório do seu projeto para gerar a estrutura básica do projeto, incluindo diretórios para contratos, migrations e testes.

    commands
    # Criar diretório do projeto
    mkdir my-fantom-dapp
    cd my-fantom-dapp
    # Inicializar projeto Truffle
    truffle init

  3. Instalação das Dependências do Redux e Web3

    Para gerenciar o estado da sua aplicação, instalaremos o Redux e o Web3.js, que facilitará a interação com os contratos inteligentes. Execute os comandos abaixo para instalar as dependências necessárias:

    commands
    npm init -y
    npm install redux react-redux web3

  4. Desenvolvendo um Contrato Inteligente em Solidity

    Dentro da pasta ‘contracts’, crie um arquivo chamado `MyContract.sol`. Este contrato simples permitirá apenas o armazenamento de um número. Inclua o código abaixo:

    MyContract.sol
    pragma solidity ^0.8.0;

contract MyContract {
    uint256 number;
    
    function setNumber(uint256 _number) public {
        number = _number;
    }
    
    function getNumber() public view returns (uint256) {
        return number;
    }
}

  5. Implementando a Migration do Contrato

    Crie um arquivo de migração na pasta ‘migrations’ para implantar o contrato na rede. Crie um arquivo chamado `2_deploy_contracts.js` e adicione o seguinte código:

    2_deploy_contracts.js
    const MyContract = artifacts.require('MyContract');

module.exports = function (deployer) {
    deployer.deploy(MyContract);
};

  6. Configurando a Rede Fantom no Truffle

    Abra o arquivo `truffle-config.js` e configure a rede Fantom adicionando as informações da rede. Use a seguinte configuração:

    truffle-config.js
    const HDWalletProvider = require('@truffle/hdwallet-provider');
const infuraKey = "YOUR_INFURA_KEY";
const mnemonic = "YOUR_MNEMONIC";

module.exports = {
    networks: {
        fantom: {
            provider: () => new HDWalletProvider(mnemonic, `https://rpcapi.fantom.network`),
            network_id: 250,
            gas: 5000000,
            gasPrice: 100000000000,
        }
    },
    compilers: {
        solc: {
            version: "^0.8.0"
        }
    }
};

  7. Compilando e Implantando o Contrato

    Compile e implante o contrato na rede Fantom executando os comandos abaixo. Certifique-se de ter sua carteira MetaMask configurada e conectada à rede Fantom antes de executar a migração.

    commands
    # Compilar o contrato
    truffle compile
    # Migrar o contrato para a rede
    truffle migrate --network fantom

  8. Criando a Interface do DApp com React

    Instale a biblioteca React e crie sua interface usando o Create React App. Execute os seguintes comandos que criarão uma nova aplicação React dentro do diretório do projeto:

    commands
    # Criar a aplicação React
    npx create-react-app frontend
    # Navegar até o diretório do frontend
    cd frontend

  9. Configurando o Redux na Aplicação React

    Dentro do diretório do frontend, crie um arquivo chamado `store.js` para configurar o Redux. Adicione a seguinte configuração para o armazenamento global da aplicação:

    store.js
    import { createStore } from 'redux';

const initialState = {
    number: 0
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'SET_NUMBER':
            return {
                ...state,
                number: action.payload
            };
        default:
            return state;
    }
};

const store = createStore(reducer);

export default store;

  10. Integrando o Contrato com a Interface

    No componente principal `App.js` da aplicação React, importe Web3 e interaja com o contrato para implementar as funções definir e obter o número. Veja o código abaixo:

    App.js
    import React, { useEffect } from 'react';
import Web3 from 'web3';
import store from './store';
import { Provider, useDispatch } from 'react-redux';
import MyContract from '../build/contracts/MyContract.json';

const App = () => {
    const dispatch = useDispatch();
    useEffect(() => {
        const loadBlockchainData = async () => {
            const web3 = new Web3(Web3.givenProvider || 'http://localhost:7545');
            const accounts = await web3.eth.getAccounts();
            const networkId = await web3.eth.net.getId();
            const deployedNetwork = MyContract.networks[networkId];
            const contract = new web3.eth.Contract(MyContract.abi, deployedNetwork && deployedNetwork.address);
            const number = await contract.methods.getNumber().call();
            dispatch({ type: 'SET_NUMBER', payload: number });
        };
        loadBlockchainData();
    }, [dispatch]);

    return <div>{store.getState().number}</div>;
};

const WrappedApp = () => (
    <Provider store={store}>
        <App />
    </Provider>
);

export default WrappedApp;

  11. Executando a Aplicação React

    Volte ao diretório do frontend e inicie a aplicação React. Use o comando abaixo para executar sua DApp no navegador:

    commands
    # Iniciar a aplicação React
    npm start

Conclusão

Neste tutorial, você aprendeu a desenvolver um DApp na rede Fantom utilizando Redux, Truffle e Solidity. Passamos por todas as etapas desde a configuração do ambiente até a implementação animada do DApp, integrando contratos inteligentes e gerenciando o estado da aplicação. Agora, você pode expandir suas habilidades em blockchain e continuar a explorar as oportunidades oferecidas pela rede Fantom. Esperamos que este guia tenha sido útil e que lhe inspire a criar projetos ainda mais ambiciosos!

Hashtags

#DApps #Fantom #Solidity #Redux #Truffle #Blockchain