Crie um app web de Receitas e Despesas pessoais

Olá, como você está? Espero que muito bem e com muita vontade de aprender. Estou de volta com novo material para você, uma aplicação web para o controle de entradas e saídas pessoais.

Neste guia, vou te ensinar passo a passo como desenvolver um aplicativo simples, mas funcional, que te permita manter um registro das suas finanças pessoais. Veremos como usar diversos componentes para criar a interface de usuário, como armazenar os dados e como implementar algumas funcionalidades básicas, como adicionar e eliminar registros.

Ao final do curso, você terá um aplicativo web pronto para usar e poderá personalizá-lo a seu gosto. Você se anima? Então, vamos começar.

Acompanhe-me na criação desta aplicação de entradas e saídas, útil e eficaz para melhorar nossa gestão financeira, que pode oferecer as seguintes características:

• Registrar entradas e saídas mensais.
• Mostrar um resumo gráfico da nossa situação financeira, indicando a porcentagem de entradas e saídas.
• Visualizar uma lista com o histórico das transações.
• Eliminar qualquer transação do histórico.
  

Para criar esta aplicação de entradas e saídas com React, teremos a seguinte estrutura, onde explicarei detalhadamente o funcionamento de cada um dos componentes:

1. GlobalState.jsx
2. AppReducer.jsx
3. App.jsx
4. GlobalProvider
5. Balance
6. IncomeExpenses
7. ExpenseChart
8. TransactionForm
9. TransactionList
10. TransactionItem

1.GlobalState.jsx

Com este componente, definimos um estado inicial que contém um array de transações, que são armazenadas no armazenamento local do navegador. Em seguida, criamos um contexto usando o hook createContext, que permite acessar o estado e as funções que o modificam a partir de qualquer componente filho.

Também está presente o componente GlobalProvider, que envolve os componentes filhos, assim obtemos o contexto usando o hook useContext. Dentro deste componente, é usado o hook useReducer para criar um estado, que será responsável por executar as ações definidas no arquivo AppReducer.js.

Em seguida, usamos o hook useEffect para atualizar o armazenamento local sempre que o estado muda. Além disso, essa função expõe duas funções para adicionar e eliminar transações, que enviam ações ao useReducer com o tipo e a carga útil correspondentes.

Este é um exemplo de como usar a Context API para compartilhar dados entre componentes sem ter que passá-los como props. Com o componente Context.Provider obtemos o valor do contexto para todos os componentes filhos que o consomem.

Neste momento, o valor do contexto é um objeto que contém as transações, a função para adicionar e eliminar uma transação. Essas funções são definidas no reducer, que gerencia o estado do contexto.

O {children} é uma propriedade especial que representa os elementos filhos que são passados ao componente Provider. Assim, qualquer componente filho que use o hook useContext poderá acessar o valor do contexto e modificá-lo com os dados das nossas transações.

2. AppReducer.jsx

Neste arquivo, criamos uma função que recebe o estado e a ação como argumentos e devolve o novo estado de acordo com o tipo de ação. Nessa função, utilizamos switch para avaliar o tipo de ação, que pode ser ADD_TRANSACTION o DELETE_TRANSACTION.

No caso de ADD_TRANSACTION, a função devolve um novo objeto com o mesmo estado, mas adicionando o action.payload do array de transações. No caso de DELETE_TRANSACTION, a função devolve um novo objeto com o mesmo estado, mas filtrando o array de transações para eliminar a transação com o id igual ao action.payload.

No caso padrão, a função nos devolve o mesmo estado sem modificá-lo.

3. App.jsx

É composto de vários componentes que são importados de outros arquivos. Esses componentes são:

a. GlobalProvider: fornece o contexto global que contém as informações sobre as transações do usuário e as funções para adicionar e eliminar as transações.

b. Balance: mostra o saldo total, ou seja, a diferença entre as entradas e saídas.

Dentro desta função, usamos o hook useGlobalState para acessar o estado global das transações, que é um array de objetos com propriedades amount e text.

Depois, a variável chamada amounts mapeia o array de transações e extrai apenas os valores de amount. Em seguida, cria outra variável chamada total que soma todos os valores de amounts usando o método reduce e os formata com duas casas decimais.

Finalmente, a função Balance é exportada como um módulo para ser usada no componente App.jsx.

c. IncomeExpenses: expõe o total de entradas e saídas, bem como o percentual que cada um representa sobre o saldo total.

A seguir, importamos o hook useGlobalState que permite acessar o estado global da aplicação. Em seguida, fazemos uma função IncomeExpenses, onde calculamos as entradas, com o método map para obter um array com os montantes de cada transação.

Imediatamente, aplicamos o método filter para obter apenas os montantes positivos, que representam as entradas. Por outro lado, usamos o método reduce para somar todos os montantes e obter o total de entradas. Finalmente, o resultado é arredondado para duas casas decimais com o método toFixed.

Continuamos com o cálculo das saídas, usando o mesmo código anterior, mas com os montantes negativos, que representam as saídas. Além disso, multiplicamos o resultado por -1 para obter um valor positivo. Assim, podemos comparar facilmente as entradas e saídas, por serem transações com um montante positivo.

d. ExpenseChart: mostra um gráfico circular com a distribuição das entradas e saídas.

Começamos com a instalação do VictoryPie, usando o comando npm install victory, e importamos VictoryPie e VictoryLabel da biblioteca victory, para criar o gráfico. Esta plataforma foi criada para oferecer uma solução de visualização de dados baseada em React Native.

VictoryPie é uma biblioteca de gráficos circulares que permite personalizar o tamanho, a cor, o ângulo e o estilo das porções. Também é possível adicionar animação, eventos e rótulos aos gráficos. Esta plataforma é de código aberto e pode ser usada tanto em aplicações web quanto móveis.

Também importamos o hook useGlobalState, que fornece o estado global da aplicação.

Depois, construímos a função chamada ExpenseChart, que é o componente principal. Dentro desta função, obtemos as transações do estado global usando a desestruturação.

A partir das transações, calculamos o total de entradas e o total de saídas, usando o método filter para selecionar apenas as transações positivas ou negativas, e o método reduce para somar seus valores.

Também calculamos o percentual de saídas sobre as entradas, usando a fórmula (totalExpenses / totalIncome) * 100, e arredondamos com a função Math.round. O percentual de entradas é obtido subtraindo o percentual de saídas de 100.

Depois de tudo, retorna um elemento VictoryPie, que recebe as seguintes propriedades:

• colorScale com um array de cores que serão usadas para o gráfico.
• data outro array com os objetos que representam os dados do gráfico, cada um com um rótulo (x) e um valor (y).
• animate um objeto com a duração da animação do gráfico.
• labels uma função que retorna o texto que será mostrado para cada dado, neste caso o percentual.
• labelComponent é um elemento VictoryLabel que recebe o ângulo e a cor do texto.
  

e. TransactionForm: permite adicionar uma nova transação, especificando o montante e o tipo (entrada ou saída). Além disso, usamos o hook useGlobalState para acessar a função addTransaction que é responsável por atualizar o estado global com a nova transação.

Neste componente, definimos uma função onSubmit que é executada quando enviamos os dados do formulário. Adicionalmente, previne o comportamento padrão do evento, gera um identificador único para a transação usando window.crypto.randomUUID e chama addTransaction com um objeto que contém o identificador, a descrição e o valor (convertido para número com o operador +).

Também retorna um elemento <div> que contém um formulário com dois campos de entrada (um de tipo texto para a descrição e outro de tipo número para o valor) e um botão para enviar o formulário.

Os campos de entrada têm um atributo onChange que atribui o valor introduzido às variáveis de estado description e amount, respectivamente.

f. TransactionList: contém a lista de todas as transações, e cada transação tem um botão para eliminá-la. Este componente usa o hook personalizado chamado useGlobalState para acessar o estado global da aplicação, que contém um array de transações.

Em seguida, é necessário envolver o componente TransactionList dentro do provedor do contexto GlobalState, que recebe como prop o estado inicial das transações.

Para cada transação no array, o componente renderiza outro componente chamado TransactionItem, que recebe a transação e seu id como props. Este componente é responsável por mostrar os detalhes de cada transação, como o valor e o tipo.

g. TransactionItem: recebe uma transação como propriedade. Mostra a descrição e o valor da transação em uma lista, com um botão para eliminá-la.

Usamos o hook useGlobalState para acessar a função deleteTransaction do contexto global, que é responsável por apagar a transação do estado. Da mesma forma, este componente também usa o ícone FaTrashCan da biblioteca react-icons para mostrar o botão de eliminar.

Espero que este artículo te haya sido útil para aprender cómo crear una aplicación web de ingresos y egresos con React. Esta es una herramienta muy poderosa y versátil para desarrollar interfaces de usuario dinámicas y modernas. Te invito a que sigas practicando y explorando las posibilidades que te ofrece React.

Gracias por leer y hasta la próxima.