Projeto 01: App Gerenciador Financeiro Internacional Na profissão de TI, que opera em um cenário global, a conversão de moedas se torna crucial para o desenvolvimento de soluções eficazes. Com transações e colaborações ocorrendo em diferentes países, é vital entender e aplicar corretamente as taxas de câmbio, garantindo precisão e segurança em projetos internacionais.
Utilizando a ferramenta Expo Snack, implemente uma aplicação React Native voltada para o Gerenciamento Financeiro Internacional.
A aplicação permitirá aos usuários registrar entradas e saídas de transações financeiras para acompanhar seus recursos. Além disso, os usuários poderão inserir valores em diferentes moedas internacionais, possibilitando o controle de suas movimentações em diversas moedas.
Tarefa 01: Criando o projeto
Desenvolva uma aplicação utilizando a plataforma Expo. Estruture os diretórios da seguinte forma:
screens (ou outro nome que represente componentes do tipo tela); components (para componentes menores e reutilizáveis); api (para recursos relacionados ao consumo de dados da Rest API); Outros diretórios que considerar necessários para a organização do projeto. Não concentre múltiplos componentes em um único arquivo, mantendo cada componente em arquivos separados para melhor modularidade e manutenção.
Tarefa 02: Utilizando os Componentes Core
No diretório screens, crie um componente chamado TransacaoListScreen. Esse componente receberá como parâmetro uma lista de transações e exibirá os itens utilizando um componente FlatList.
No diretório components, desenvolva um componente chamado TransacaoItemList. Ele será responsável por exibir os detalhes de uma única transação e também será utilizado dentro do FlatList.
Cada transação terá as seguintes propriedades:
Descrição: Detalhes ou título da transação. Valor: Montante da transação. Data: Data em que ocorreu. Hora: Horário da transação. Categoria: Classificação da transação (ex.: alimentação, saúde). Tipo: Define se é uma receita ou despesa. Moeda: Especifica a moeda utilizada (ex.: USD, EUR, BRL). Não utilize outras bibliotecas de componentes que não as que foram estudadas em aula.
Tarefa 03: Responsividade e Adaptabilidade
Refatore e implemente o componente TransacaoItemList para torná-lo responsivo e adaptativo, ajustando sua camada de visualização de acordo com a orientação do dispositivo.
Modo retrato (portrait): Exiba apenas os campos Descrição, Valor e Data na lista. Modo paisagem (landscape): Exiba informações adicionais, como Hora, Categoria, Tipo e Moeda, além dos dados já visíveis no modo retrato. Certifique-se de detectar dinamicamente a orientação do dispositivo e ajustar o layout do componente conforme necessário.
Tarefa 04: Navegação entre Telas
Implemente na aplicação pelo menos três interfaces navegáveis:
Tela de autenticação: Para o usuário realizar login ou registro. Tela de lista de transações financeiras: Para exibir as transações registradas. Tela de formulário de inserção de transações: Para permitir o cadastro de novas transações. A estrutura e os níveis de navegação podem ser definidos conforme sua preferência e necessidade do projeto.
Neste momento, ainda não é necessário implementar o formulário, mas sim, a navegação.
Tarefa 05: Manipulação da Lista com Ordenação e Filtro
Implemente na lista de transações um mecanismo que permita:
Ordenação: Organizar as transações com base em qualquer uma de suas propriedades. Filtragem: Aplicar critérios específicos para exibir apenas as transações que atendam a determinadas condições. Tarefa 06: Carregando Dados
No diretório api, implemente um objeto responsável por consumir uma Rest API que fornece dados sobre a cotação de moedas estrangeiras.
A Rest API utilizada será a do Banco Central, e você pode utilizar as seguintes URLs:
Para obter a lista de moedas estrangeiras monitoradas pela API: https://olinda.bcb.gov.br/olinda/servico/PTAX/versao/v1/odata/Moedas?$top=100&$format=json.
Para obter a cotação de uma moeda em uma data específica: https://olinda.bcb.gov.br/olinda/servico/PTAX/versao/v1/odata/CotacaoMoedaDia(moeda=@moeda,dataCotacao=@dataCotacao)?@moeda='EUR'&@dataCotacao='11-01-2024'&$top=1&$format=json.
Exemplo: "EUR" é a moeda e "11-01-2024" é a data da cotação.
Implemente os métodos necessários para consumir essas URLs e retornar os dados desejados na aplicação.
Tarefa 07: Implementação de Formulários
Implemente o formulário de autenticação no componente correspondente, solicitando ao usuário o nome de usuário (username) e senha (password).
No formulário de inserção de novas transações, inclua os seguintes campos: Descrição, Valor, Data, Hora, Categoria, Tipo e Moeda.
Utilize os métodos de entrada mais adequados para facilitar a inserção dos dados pelo usuário.
Para a seleção da Moeda, apresente as opções disponíveis, consumindo a lista de moedas da Rest API utilizada.
Tarefa 08: Reconhecimento de Interação por Gestos
Refatore a lista de transações para permitir a exclusão de uma transação por meio de um gesto de deslizar o item da lista. Além disso, implemente, ao deslizar o item para o outro lado, a navegação para uma tela de edição do item selecionado.
Deve ficar claro para o usuário que, ao deslizar para um lado ou outro, qual ação deverá ocorrer.
Envie o link para o projeto Expo Snack.
Veja um protótipo de exemplo: