Durante as últimas semanas resolvi revisar alguns dos projetos acadêmicos desenvolvidos usando Angular e os agrupei em um site único. O site de “Arquivo das Classes de Angular” abrange alguns usos do framework como operações matemáticas, regras condicionais, rotas de navegação, formulários, e autenticação.
As atividades aconteceram durante o curso de Sistemas para Internet da Faculdade de Tecnologia do Estado de São Paulo. Alguns dos outros projetos já publicados neste blog foram um sistema de controle de hemocentro em Haskell e o uso da validação reCAPTCHA em PHP.
Or projetos estão organizados em quatro categorias: básico, entrada de usuário, serviços e uso de APIs, dentre elas as do GitHub e Google Firebase. Agrupá-los foi uma forma de treinar o uso de Angular, e também centralizar o conteúdo que estava distribuído no computador e no Stackblitz. Também proporcionou a criação do build para rodar em um servidor convencional.
Para o layout foi utilizado o toolkit Bootstrap, com fonte disponível no Google Fonts. O resultado final está disponível para visualização, e o código-fonte está disponível em um repositório no GitHub. A coletânea de projetos foi escrita em inglês para proporcionar que mais pessoas possam estudar o código.
Lista de projetos inclusos no site
Saudação condicional: uma página que mostra uma saudação de acodo com o horário.
Números aleatórios: mostra uma tabela com números aleatórios gerados automaticamente.
Tabuada: usando um número base como entrada do usuário, mostra em tempo real uma tabela com a multiplicação deste por números de 1 a 10.
Coleção de álbuns: este projeto demonstra uma navegação por uma coleção de discos. A lista tem como origem um arquivo TypeScript, e a visualização dos detalhes de cada álbum é possível ao passar o índice como parâmetro de URL.
Juros simples: Calcula o valor acumulado de acordo com a entrada de dados do usuário.
Juros compostos: Calcula o valor acumulado de acordo com a entrada de dados do usuário, e mostra sua evolução de acordo com o tempo.
Log da aplicação: Demonstra o conceito de serviços em Angular ao mostrar um log de eventos gerados durante a navegação pelo site.
Lista de tarefas: Demonstra o conceito de serviços com uma lista de tarefas gerenciadas pelas ações do usuário.
Cotação do Bitcoin: Este projeto usa uma API pública para mostrar a cotação do Bitcoin em relação ao Dólar Americano, Euro e Libra Esterlina. Os valores carregam com a página, e atualizam minuto a minuto ou manualmente pelo usuário. Cada atualização faz o serviço em Angular transferir o último valor para o histórico de cotações.
Carteira de Bitcoin: Este projeto demonstra uma interface de carteira fictícia de Bitcoin, onde o usuário pode simular a compra e venda de bitcoins, mostrando o valor equivalente em Dólares Americanos. Uma API pública usada como serviço em Angular fornece a cotação. Após a operação, o saldo é atualizado e não reseta enquanto se navega pelo site.
Repositórios do GitHub: Lista repositórios públicos e detalhes do meu perfil no GitHub usando uma API pública do GitHub.
Autenticação e banco de dados Firebase: Este projeto usa o Google Firebase para criar uma página de autenticação para uma área restrita do site. O usuário pode fazer o login por meio de email e senha previamente registrados, ou pela Conta Google. Uma vez logado, o usuário pode adicionar e remover entradas de uma lista armazenada no Realtime Database.
