Construindo aplicações com web3: Um guia para desenvolvedores Full Stack.

Introdução

Nos últimos anos, a Web3 tem revolucionado a forma como interagimos com a internet. Como desenvolvedores Full Stack, integrar blockchain em nossas aplicações é um diferencial que pode nos destacar no mercado. Neste artigo, vamos explorar como construir uma aplicação descentralizada (dApp) conectando um frontend a um contrato inteligente.

O que é Web3?

Web3 representa uma nova fase da internet baseada em blockchain, onde as aplicações são descentralizadas e os usuários têm controle sobre seus dados. Diferente da Web2, onde plataformas centralizadas controlam serviços, a Web3 utiliza contratos inteligentes para automatizar transações de forma segura e transparente.

Tecnologias Essenciais

Antes de iniciar o desenvolvimento, é importante conhecer algumas ferramentas fundamentais:

Ethereum: Uma das principais blockchains para contratos inteligentes.
Solidity: Linguagem de programação para contratos inteligentes.
Hardhat: Ambiente de desenvolvimento para testes e implantação de contratos.
Ethers.js/Web3.js: Bibliotecas para conectar aplicações ao blockchain.
Metamask: Carteira digital para interação com contratos.

Criando um Contrato Inteligente

Vamos criar um contrato simples em Solidity para armazenar e recuperar mensagens.

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

contract MessageStore {
    string private message;
    
    function setMessage(string memory _message) public {
        message = _message;
    }
    
    function getMessage() public view returns (string memory) {
        return message;
    }
}

Esse contrato permite que os usuários armazenem e recuperem mensagens na blockchain.

Implantando o Contrato com Hardhat

Instale o Hardhat e configure um projeto:

npm install --save-dev hardhat
npx hardhat

Crie um script para implantar o contrato:

const hre = require("hardhat");

async function main() {
  const MessageStore = await hre.ethers.getContractFactory("MessageStore");
  const messageStore = await MessageStore.deploy();
  await messageStore.deployed();
  console.log("Contrato implantado em:", messageStore.address);
}

main().catch((error) => {
  console.error(error);
  process.exit(1);
});

Rode o script:

npx hardhat run scripts/deploy.js --network localhost

Criando o Frontend

No frontend, usamos React + Ethers.js para interagir com o contrato. Instale as dependências:

npm install ethers

Conectando ao contrato:

import { ethers } from "ethers";

const contractAddress = "ENDERECO_DO_CONTRATO";
const abi = [
  "function setMessage(string _message) public",
  "function getMessage() public view returns (string)"
];

async function getMessage() {
  if (typeof window.ethereum !== "undefined") {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const contract = new ethers.Contract(contractAddress, abi, provider);
    return await contract.getMessage();
  }
}

O usuário poderá interagir com o contrato via Metamask.

Criando o Backend

Podemos criar um backend em Node.js + Express para armazenar logs das interações.

const express = require("express");
const app = express();
app.use(express.json());

app.post("/log", (req, res) => {
    console.log("Nova interação:", req.body);
    res.status(200).send("Log registrado");
});

app.listen(3001, () => console.log("Servidor rodando na porta 3001"));

Conclusão

Integrar blockchain em aplicações Full Stack é uma habilidade valiosa para desenvolvedores. Neste guia, abordamos desde a criação de um contrato inteligente até sua interação com frontend e backend. Com o crescimento da Web3, dominar essas tecnologias pode abrir novas oportunidades no mercado.

Universo Plural

Pesquisar este blog