O artigo aborda o desenvolvimento de uma aplicação financeira, destacando a integração entre back-end e front-end, a exibição visual das informações e a implementação de funcionalidades essenciais.

Salvando informações de total, receitas e despesas

No início do vídeo, o desenvolvedor comenta que precisa trazer os cálculos de total, receitas e despesas do back-end para o front-end. Essas informações já haviam sido obtidas e calculadas anteriormente, provavelmente através de uma API. As variáveis no front-end são somatórioTotal, somatórioReceitas e somatórioDespesas. O desenvolvedor salva os valores obtidos em um estado (useState) chamado somatório. Ele checa se os valores foram obtidos corretamente exibindo o estado somatório no console. Inicialmente obtém um erro relacionado à biblioteca Axios não estar definida, que é corrigido importando-a no componente. Com Axios disponível, os valores são exibidos no console: Saldo total: R$ 407.368,426, Receita total: R$ 426.000, Despesa: R$ 18.000. Os valores estão corretos e podem ser exibidos na interface.

  • O desenvolvedor traz os cálculos de total, receitas e despesas do back-end para o front-end.
  • As variáveis somatórioTotal, somatórioReceitas e somatórioDespesas são utilizadas para armazenar os valores obtidos.
  • O estado (useState) somatório é utilizado para salvar os valores obtidos.
  • O desenvolvedor verifica a correta obtenção dos valores exibindo o estado somatório no console.
  • O erro relacionado à biblioteca Axios é corrigido importando-a no componente.
  • Os valores corretos são exibidos no console, prontos para serem exibidos na interface.

Exibindo informações na tela

Com os dados de total, receitas e despesas devidamente obtidos do back-end e salvos no front-end, o próximo passo é exibi-los na interface. O desenvolvedor já possui um layout previamente preparado, com cards para mostrar cada informação. Inicialmente, ele tenta renderizar os valores diretamente nos cards, através das variáveis no estado somatório.

  • Os dados de total, receitas e despesas são obtidos do back-end e salvos no front-end.
  • O desenvolvedor possui um layout previamente preparado, com cards para mostrar as informações.
  • A tentativa inicial é renderizar os valores diretamente nos cards, utilizando as variáveis no estado somatório.

Problema na renderização dos valores

Ao analisar o código, identificou-se que os valores não estavam sendo exibidos devido a um problema relacionado ao fato dos cards estarem dentro de uma div com display grid, que precisa de um tratamento especial para renderizar elementos fora do grid corretamente.

  • O uso de display grid para renderizar elementos fora do grid
  • A necessidade de tratamento especial para corrigir a renderização dos valores
  • Investigação do problema relacionado à exibição dos valores

Adição de ícones representativos

Para melhorar a identificação visual de cada informação, foram adicionados ícones representativos a cada card, tais como: ícone de carteira (wallet) para o saldo total, ícone de moeda (money) para a receita, ícone de extrato (statement) para a despesa e ícone de alvo (target) para a meta. Os ícones foram obtidos de uma biblioteca de ícones e renderizados junto de cada card, com ajustes nas cores para destacá-los.

  • Utilização de ícones representativos para cada tipo de informação
  • Obtenção de ícones de uma biblioteca de ícones
  • Ajustes nas cores dos ícones para destaque visual

Estilização dos elementos

Para aprimorar o aspecto visual dos cards, foram aplicados alguns estilos, como adição de padding no container dos cards, definição de padding e background color arredondado para os ícones, definição de width: 100% para o conteúdo dos cards e aumento do peso da fonte dos valores para 600, deixando-os em negrito e destacados. Além disso, a propriedade text-align: center foi aplicada para centralizar todos os textos.

  • Aplicação de estilos para aprimorar o aspecto visual dos cards
  • Definição de padding e background color arredondado para os ícones
  • Centralização dos textos utilizando a propriedade text-align: center

Centralização do conteúdo

Foi percebido que os ícones também precisavam de alinhamento central, para ficarem em um posicionamento correto em relação ao texto. Para atingir esse objetivo, foram feitas algumas alterações, como adicionar display flex no container do card e envolver o ícone e o texto em elementos flexíveis para facilitar a centralização.

  • Adição de display flex para centralizar os ícones em relação ao texto
  • Uso de elementos flexíveis para facilitar a centralização do conteúdo

A importância do alinhamento do conteúdo

Para garantir que o conteúdo de cada informação seja adequadamente alinhado no centro, é essencial seguir algumas práticas de desenvolvimento. A adição da classe ‘content’ nas divs e a regra ‘align-items: center’ na classe ‘content’ são passos fundamentais para melhorar o aspecto visual e a distribuição dos elementos.

  • O alinhamento adequado do conteúdo melhora a experiência do usuário ao visualizar as informações.
  • A classe ‘content’ e a regra ‘align-items: center’ proporcionam uma estilização consistente e agradável para o conteúdo exibido.
  • O aspecto visual e a distribuição dos elementos são aprimorados, resultando em uma interface mais atrativa e de fácil compreensão.

Configurando a exibição dos dados de meta

Após configurar as informações de saldo total, receitas e despesas, é crucial completar o painel exibindo os dados relacionados à meta. Isso envolve a adição da propriedade ‘isMeta’ no componente do card e a implementação de lógica para calcular a meta com base no total obtido e na porcentagem escolhida pelo usuário.

  • A exibição dos dados de meta é essencial para oferecer uma visão abrangente das finanças e metas estabelecidas.
  • A propriedade ‘isMeta’ proporciona a identificação clara de quando um card deve exibir informações de meta, aumentando a versatilidade do painel.
  • O cálculo da meta com base no total e na porcentagem escolhida pelo usuário permite uma personalização precisa das informações apresentadas.

Implementação de funcionalidades essenciais

Durante a implementação do painel financeiro, foram adicionadas diversas funcionalidades, como obtenção dos valores de total, receitas e despesas, exibição dos valores em cards na interface, adição de ícones representativos e estilização dos elementos. Além disso, foi introduzida a lógica inicial para cálculo e exibição das metas.

  • A obtenção e exibição dos valores de total, receitas e despesas fornecem uma visão geral das finanças de forma clara e acessível.
  • A adição de ícones representativos e a estilização dos elementos contribuem para uma experiência visual atraente e informativa.
  • A introdução da lógica para cálculo e exibição das metas oferece um diferencial ao painel, possibilitando a comparação entre as metas e as receitas totais.

Conclusão

O desenvolvimento da aplicação financeira demonstra boas práticas, desde a obtenção e exibição dos dados até a entrega visual das informações, seguindo uma estrutura lógica e incremental de construção do projeto.