Guia passo a passo para desenvolver uma calculadora com Solidity

Solidity Blueprint: uma jornada de 21 dias para criar aplicativos descentralizados

Com o surgimento da tecnologia blockchain, os contratos inteligentes ganharam imensa importância. Solidity é a linguagem de programação de contrato inteligente mais comumente usada para o blockchain Ethereum. Neste guia, vamos orientá-lo nas etapas para desenvolver uma calculadora simples usando a Solidity.

Guia passo a passo para desenvolver uma calculadora com Solidity

Lista de passos:
Etapa 1. Configurando o ambiente de desenvolvimento
Etapa 2. Criando o projeto e a estrutura de arquivos
Etapa 3. Instalando as bibliotecas e dependências necessárias
Etapa 4. Criando o Contrato Inteligente
Etapa 5. Testando o contrato inteligente
Etapa 6. Criando a interface da calculadora
Passo 7. Integrando a Interface da Calculadora com o Contrato Inteligente
Etapa 8. Exibindo resultados e testando o projeto

Em nossa primeira etapa, vamos configurar o ambiente de desenvolvimento necessário para desenvolver uma calculadora com Solidity. Em seguida, criaremos o projeto e a estrutura de arquivos passo a passo e instalaremos as bibliotecas e dependências necessárias. Em seguida, usaremos a linguagem de programação Solidity para criar um contrato inteligente e testar esse contrato.

A seguir, seguiremos as etapas necessárias para criar a interface da calculadora e integrá-la ao contrato inteligente. Por fim, vamos testar o projeto e exibir os resultados. Com este guia passo a passo, você aprenderá a desenvolver uma calculadora simples usando a linguagem de programação Solidity.

Etapa 1. Configurando o ambiente de desenvolvimento

Antes de começarmos a desenvolver uma calculadora em Solidity, precisamos configurar o ambiente de desenvolvimento. Aqui estão as etapas para fazer isso:

1. Instale um editor de código: Você pode usar qualquer editor de código de sua escolha para escrever o código do Solidity. Editores de código populares incluem Visual Studio Code, Atom e Sublime Text.

2. Instale um compilador Solidity: Para compilar o código do Solidity, você precisará de um compilador do Solidity. O compilador Solidity mais usado é o solc. Você pode instalá-lo usando o npm (Node Package Manager) executando o seguinte comando em seu terminal:

npm install -g solc

3. Instale um cliente Ethereum: Para testar seu código Solidity, você precisará de um cliente Ethereum. O cliente mais usado é o Ganache, que é um emulador de blockchain local. Você pode baixar e instalar o Ganache no site oficial.

4. Instale a extensão MetaMask: Se você quiser interagir com sua calculadora usando uma interface web, você precisará instalar a extensão MetaMask. MetaMask é uma extensão de navegador que permite interagir com a blockchain Ethereum usando uma interface web3. Você pode baixar e instalar a MetaMask no site oficial.

Após concluir essas etapas, seu ambiente de desenvolvimento do Solidity está configurado e pronto para uso.

Etapa 2. Criando o projeto e a estrutura de arquivos

O próximo passo no desenvolvimento de uma calculadora com Solidity é criar o projeto e a estrutura de arquivos. Aqui estão as etapas para fazer isso:

1.Crie um novo diretório para o seu projeto: Abra seu terminal e navegue até o diretório onde deseja criar seu projeto. Em seguida, crie um novo diretório para seu projeto usando o comando mkdir:

mkdir solidity-calculator

2.Navegue até o novo diretório: Use o comando cd para navegar até o novo diretório:

cd solidity-calculator

3.Crie um novo arquivo Solidity: Use seu editor de código para criar um novo arquivo chamado Calculator.sol. Este arquivo conterá o código Solidity para sua calculadora.

4.Crie um novo arquivo JavaScript: Use seu editor de código para criar um novo arquivo chamado app.js. Este arquivo conterá o código JavaScript que irá interagir com o contrato da sua calculadora.

5.Crie um novo arquivo HTML: Use seu editor de código para criar um novo arquivo chamado index.html. Este arquivo conterá o código HTML para a interface da sua calculadora.

Seu projeto e estrutura de arquivos agora estão configurados e prontos para uso. Nas próximas etapas, adicionaremos código a esses arquivos para desenvolver nossa calculadora.

Etapa 3. Instalando as bibliotecas e dependências necessárias

A próxima etapa no desenvolvimento de uma calculadora em Solidity é instalar as bibliotecas e dependências necessárias. Aqui estão as etapas para fazer isso:

1. Instale a biblioteca Web3: Web3.js é uma biblioteca que permite interagir com a blockchain Ethereum usando JavaScript. Você pode instalar o Web3.js usando o npm executando o seguinte comando em seu terminal:

npm install web3

2.Instale a biblioteca EthereumJS Util: EthereumJS Util é uma biblioteca que fornece funções utilitárias para trabalhar na Ethereum. Você pode instalar o EthereumJS Util usando npm executando o seguinte comando em seu terminal:

npm install ethereumjs-util

3.Instale o servidor HTTP: Para executar a interface da calculadora, você precisará configurar um servidor HTTP. Você pode instalar o servidor HTTP usando npm executando o seguinte comando em seu terminal:

npm install http-server 

`

Seu projeto de calculadora agora está pronto para usar as bibliotecas e dependências necessárias. Nas próximas etapas, adicionaremos código ao seu projeto para desenvolver a calculadora.

Etapa 4. Criando o Contrato Inteligente

O próximo passo no desenvolvimento de uma calculadora com Solidity é criar o contrato inteligente. Aqui estão as etapas para fazer isso:

1. Abra Calculator.sol em seu editor de código: Este é o arquivo onde você escreverá o código Solidity para o seu contrato de calculadora.

2. Declare a versão do Solidity: A primeira linha do seu arquivo Solidity deve declarar a versão do Solidity que você está usando. Por exemplo, se você estiver usando o Solidity versão 0.8.4, você deve adicionar a seguinte linha no topo do seu arquivo:


pragma solidity ^0.8.4;


1. Defina o contrato da Calculadora: Use a palavra-chave contract para definir o contrato Calculator. Aqui está um exemplo:


contract Calculator {
// código vai aqui
}


4.Adicione as variáveis ​​de estado necessárias: Para armazenar os valores inseridos pelo usuário, precisamos definir as variáveis ​​de estado necessárias. Aqui está um exemplo:


contract Calculator {
uint256 public result;
// código vai aqui
}


1. Defina as funções necessárias: Para realizar os cálculos, precisamos definir as funções necessárias. Aqui está um exemplo:


contract Calculator {
uint256 public result;
function add(uint256 a, uint256 b) public {
result = a + b;
}
// outras funções vão aqui
}


6.Adicione os modificadores de função necessários: Para restringir o acesso a determinadas funções, podemos adicionar modificadores de função. Aqui está um exemplo:

`
contract Calculator {
uint256 public result;

function add(uint256 a, uint256 b) public {
result = a + b;
}

function subtract(uint256 a, uint256 b) public {
result = a - b;
}

modifier nonZero(uint256 number) {
require(number != 0, "Number cannot be zero");
_;
}

function divide(uint256 a, uint256 b) public nonZero(b) {
result = a / b;
}

// outras funções vão aqui
}
`

Seu contrato inteligente agora está completo. Nas próximas etapas, testaremos o contrato para garantir que ele esteja funcionando corretamente.

Etapa 5. Testando o contrato inteligente

A próxima etapa no desenvolvimento de uma calculadora em Solidity é testar o contrato inteligente para garantir que esteja funcionando corretamente. Aqui estão as etapas para fazer isso:

1. Abra Calculator.sol em seu editor de código: Este é o arquivo onde você escreveu o código Solidity para seu contrato de calculadora.

2. Elabore o contrato: Use um compilador Solidity para compilar seu contrato. Você pode usar o Remix, que é um IDE baseado na Web que inclui um compilador Solidity. Ou você pode instalar um compilador Solidity em seu computador. Depois de compilar seu contrato, você verá uma marca de seleção verde indicando que a compilação foi bem-sucedida.

3. Implante o contrato: Implemente o contrato na rede Ethereum usando uma ferramenta como Remix ou uma blockchain de desenvolvimento como Ganache. Depois que o contrato for implantado, você verá o endereço do contrato e outros detalhes exibidos.

4. Interaja com o contrato: Use uma ferramenta como Remix ou uma biblioteca JavaScript como Web3.js para interagir com o contrato. Você pode chamar as funções definidas em seu contrato e verificar o resultado para garantir que o contrato esteja funcionando corretamente.

Por exemplo, se você definiu uma função add em seu contrato, você pode chamá-la com o seguinte código no Remix:


Calculator.add(2, 3);


Isso deve definir a variável result como 5. Você pode então verificar o valor de result para garantir que esteja correto.

5. Escreva casos de teste: Escreva casos de teste para garantir que seu contrato esteja funcionando corretamente. Você pode usar uma estrutura de teste como Truffle ou Hardhat para escrever e executar casos de teste. Seus casos de teste devem abranger todas as funções definidas em seu contrato e testar vários cenários para garantir que o contrato se comporte corretamente.

Seu contrato inteligente agora está testado e funcionando corretamente. Nas próximas etapas, adicionaremos código ao seu projeto para desenvolver a interface da sua calculadora.

Etapa 6. Criando a interface da calculadora

A próxima etapa no desenvolvimento de uma calculadora com o Solidity é criar a interface do usuário para a calculadora. Aqui estão as etapas para fazer isso:

1. **Abrir index.html no seu editor de código: Este é o arquivo onde você escreverá o código HTML e JavaScript para a interface da sua calculadora.
2. Adicione os elementos HTML necessários:Adicione elementos HTML à sua página para criar a interface da sua calculadora. Você pode usar uma tabela, divs ou outros elementos HTML para criar o layout de sua calculadora. Aqui está um exemplo:

`

`

3. Adicione o código JavaScript necessário: Adicione o código JavaScript à sua página para lidar com a entrada do usuário e interagir com o contrato inteligente. Você pode usar uma biblioteca JavaScript como Web3.js para interagir com o contrato inteligente. Aqui está um exemplo:

`
// Conecte-se à rede Ethereum
const web3 = new Web3(Web3.givenProvider);

// Pegue a instância do contrato
const contractInstance = new web3.eth.Contract(abi, contractAddress);

// Função para adicionar um número ao display
function addToDisplay(number) {
const display = document.getElementById("display");
display.value += number;
}

//Função para limpar o display
function clearDisplay() {
const display = document.getElementById("display");
display.value = "";
}

//Função para realizar adição
async function add() {
const display = document.getElementById("display");
const a = parseInt(display.value);
const b = contractInstance.methods.result().call();
const result = await contractInstance.methods.add(a, b).send({ from: accounts[0] });
display.value = result;
}

// Outras funções vão aqui
`

4. Teste a interface da calculadora: Abra index.html em um navegador da Web e teste a interface da calculadora. Você deve ser capaz de inserir números e realizar cálculos usando os botões da página. Os resultados devem ser exibidos no campo de entrada na parte superior da página.

A interface da sua calculadora agora está completa. Nas próximas etapas, adicionaremos estilo à sua interface para torná-la mais bonita.

Passo 7. Integrando a Interface da Calculadora com o Contrato Inteligente

Agora que criamos o contrato inteligente e a interface da calculadora, precisamos integrá-los para que a calculadora possa interagir com o contrato inteligente. Aqui estão as etapas para fazer isso:

1.Atualize o código JavaScript para interagir com o contrato inteligente: No código JavaScript da calculadora, atualize as funções que executam cálculos para interagir com o contrato inteligente. Por exemplo, para executar a adição, você precisaria chamar a função add() na instância do contrato inteligente e passar os dois números a serem adicionados. Aqui está um exemplo:


async function add() {
const display = document.getElementById("display");
const a = parseInt(display.value);
const b = await contractInstance.methods.result().call();
const result = await contractInstance.methods.add(a, b).send({ from: accounts[0] });
display.value = result;
}


Neste exemplo, chamamos a função result() na instância do contrato inteligente para obter o resultado atual e, em seguida, chamamos a função add() na instância do contrato inteligente para adicionar os dois números. Finalmente, atualizamos a exibição com o resultado.

2.Implante o contrato inteligente na rede: Antes de poder interagir com o contrato inteligente na interface da calculadora, você precisa implantar o contrato inteligente na rede Ethereum. Você pode usar uma ferramenta como Remix ou Truffle para implantar o contrato inteligente.

3.Conecte a interface da calculadora ao contrato inteligente: No código JavaScript da calculadora, você precisa se conectar ao contrato inteligente implantado especificando seu endereço e ABI. Você pode fazer isso adicionando o seguinte código:


const contractAddress = "0x123456789abcdef";
const abi = [
// O código ABI vai aqui
];
const contractInstance = new web3.eth.Contract(abi, contractAddress);


Neste código, substitua 0x123456789abcdef pelo endereço do seu contrato inteligente implantado e substitua // código ABI vai aqui pelo código ABI do seu contrato inteligente.

4.Teste a calculadora integrada e o contrato inteligente: Abra a interface da calculadora em um navegador da Web e teste-a para garantir que ela possa realizar cálculos usando o contrato inteligente. Ao clicar nos botões da interface da calculadora, as funções correspondentes devem ser chamadas no contrato inteligente e o resultado deve ser exibido no campo de entrada.

Parabéns, você integrou com sucesso a interface da calculadora com o contrato inteligente!

Passo 8. Exibindo Resultados e Testando o Projeto

Agora que integramos a interface da calculadora com o contrato inteligente, precisamos atualizar a interface do usuário para exibir os resultados dos cálculos realizados pelo contrato inteligente. Aqui estão as etapas para fazer isso:

1.Atualize o código JavaScript para exibir os resultados: No código JavaScript da calculadora, atualize as funções que executam cálculos para exibir os resultados na interface do usuário. Por exemplo, para realizar a adição, você precisaria atualizar a função add() para exibir o resultado no visor da calculadora. Aqui está um exemplo:


async function add() {
const display = document.getElementById("display");
const a = parseInt(display.value);
const b = await contractInstance.methods.result().call();
const result = await contractInstance.methods.add(a, b).send({ from: accounts[0] });
display.value = result;
}


Neste exemplo, atualizamos a exibição com o resultado do cálculo realizado pelo contrato inteligente.

2.Teste o projeto: Abra a interface da calculadora em um navegador da Web e teste-a para garantir que ela possa realizar cálculos usando o contrato inteligente e exibir os resultados na interface do usuário.

Parabéns, você criou com sucesso uma calculadora usando Solidity e a integrou a um contrato inteligente na rede Ethereum!

Conclusão

Concluindo, vimos como criar uma calculadora simples usando o Solidity e integrá-la a um contrato inteligente na rede Ethereum. Começamos configurando o ambiente de desenvolvimento e criando o projeto e a estrutura de arquivos. Em seguida, instalamos as bibliotecas e dependências necessárias, criamos o contrato inteligente e o testamos.

Em seguida, criamos a interface da calculadora e a integramos ao contrato inteligente. Por fim, atualizamos a interface do usuário para exibir os resultados dos cálculos realizados pelo contrato inteligente e testamos o projeto.

Este projeto é apenas um exemplo simples do que pode ser alcançado usando Solidity e contratos inteligentes na rede Ethereum. Com esse conhecimento, você pode criar aplicativos mais complexos que utilizam o poder da tecnologia blockchain.

Este artigo foi escrito por Solidity Academy e traduzido por Diogo Jorge. O artigo original pode ser encontrado aqui.