Angular 19: construindo um projeto com Angular Material

Conhecendo o Angular Material - Apresentação

Apresentando o instrutor e o curso

Olá! Boas-vindas a mais este curso de Angular. Meu nome é Antônio Evaldo e serei o instrutor nesta jornada de aprendizado.

Audiodescrição: Antônio é um homem branco, utiliza óculos arredondados, bigode e cavanhaque. Seus cabelos são cacheados e volumosos, na altura dos ombros. Ele veste uma camisa preta e, ao fundo, há uma parede iluminada pelas cores azul e rosa.

Introduzindo o projeto Jornada Milhas

Neste curso, vamos construir um projeto incrível chamado Jornada Milhas. Vamos desenvolvê-lo a partir de uma aplicação em Angular 19, mas com muitos componentes que não precisaremos criar do zero. Este é exatamente o tema do nosso curso: utilizaremos a biblioteca Angular Material.

Vou apresentar a página inicial da biblioteca, que também utilizaremos na versão 19. Ela nos fornece diversos componentes que nos permitem não focar tanto nos detalhes da interface do usuário. Por exemplo, na seção de botões, há várias opções que podemos utilizar. No button toggle (alternância de botão), utilizaremos esses botões para implementar algumas partes diferentes do Figma.

Explorando a praticidade do curso

Com o projeto pronto, teremos também inputs bem elaborados. A página será mais simples e nossa produtividade aumentará com o uso dessa biblioteca. Até mesmo os ícones vêm com o apoio dela.

Gostaria de alinhar algo com vocês: este curso é um pouco diferente do convencional. Ele é muito mais prático do que o normal. Começaremos com uma abordagem prática, mostrando como instalar o Angular Material e como consumir o primeiro componente.

Enfrentando desafios práticos

A partir deste ponto, nós queremos que vocês tentem realizar os desafios do curso, que comporão a maior parte dele. É importante que tentemos consumir um componente consultando a biblioteca, pois isso se aproxima muito de um ambiente de desenvolvimento real. No dia a dia, precisamos ler documentação, entender como os componentes funcionam e as diferentes combinações entre eles. Portanto, é um ambiente mais desafiador, pois reflete o mundo real.

Se houver qualquer dificuldade na realização de algum desses desafios, não há problema. Disponibilizaremos vídeos de gabarito para todos os desafios deste curso. O importante é que vocês façam esses desafios, ou pelo menos tentem realizá-los, pois é com essa prática que aprendemos a consultar recursos da web e a chegar às nossas soluções. Assim, vocês poderão comparar suas soluções com as nossas, o que já será um ponto muito positivo.

Aprendendo boas práticas e requisitos do curso

Com este curso, vocês aprenderão boas práticas de mercado junto com um Trello que elaboramos exclusivamente para este curso. Vocês também aprenderão a instalar e consumir o primeiro componente do Angular Material e vários outros. Além disso, aprenderão a criar uma paleta de cores personalizada para o projeto do Jornada Milhas. Por fim, terão uma experiência de mercado bem próxima do mundo real, onde consumirão componentes e consultarão a documentação do Angular Material.

Para que consigam nos acompanhar neste curso, é importante que já tenham familiaridade com HTML, CSS, TypeScript e também o básico de Angular, pelo menos a criação de componentes.

Convidando para a jornada de aprendizado

Estamos muito animados para acompanhar vocês nessa jornada de aprendizado. Esperamos vocês no próximo vídeo.

Conhecendo o Angular Material - Explorando o Trello do projeto

Introdução à Estrutura da Transcrição

Parece que não há snippets de código fornecidos para complementar a transcrição. No entanto, posso ajudar a estruturar a transcrição de forma didática, destacando os pontos principais e sugerindo como o código poderia ser integrado, caso estivesse disponível.

Contexto da Empresa e Ferramentas Utilizadas

Estamos em uma empresa fictícia chamada Jornada Milhas, no time de front-end, e recebemos tarefas para implementar uma aplicação que posteriormente analisaremos com mais detalhes no Figma. Estamos utilizando uma ferramenta muito comum no dia a dia de trabalho em equipes de desenvolvimento: o Kanban. Neste caso, o Kanban está sendo implementado no Trello, uma ferramenta amplamente utilizada em empresas.

Organização das Tarefas no Trello

A primeira coluna do Trello que estamos visualizando é chamada de Backlog. Já disponibilizamos o link desse Trello em uma atividade anterior para acesso. Na primeira coluna, temos os cartões que representam as tarefas a serem realizadas para completar a aplicação destinada à pessoa usuária final. A criação desses cartões pode variar; muitas vezes, o líder técnico ou Tech Lead os cria, mas também podemos, como pessoas desenvolvedoras, criar esses cartões.

Detalhamento das Tarefas no Trello

O primeiro cartão na coluna de Pronto para Iniciar ou Backlog é "Criar Aplicação Angular com a Angular CLI". Esta é a primeira tarefa de todas. Existem outras tarefas que abordaremos ao longo do curso, como criar o cabeçalho da aplicação, criar o banner e, por fim, criar o formulário de passagens. Tudo está bem organizado.

Análise do Cartão "Criar Aplicação Angular"

Vamos examinar o primeiro cartão de "Criar Aplicação Angular". Ao clicar nele, observamos que possui uma descrição e uma história de usuário. A descrição indica que é a criação de uma aplicação com a Angular CLI, e no título temos: "Como pessoa desenvolvedora, quero criar uma aplicação Angular 19 com a Angular CLI para iniciar meu projeto com uma estrutura padronizada e boas práticas". Esse modelo de descrição de um cartão é chamado de User Story (História de Usuário). É uma técnica amplamente utilizada em empresas para manter o foco direcionado à pessoa usuária final durante qualquer etapa do desenvolvimento do projeto. Se não conhecíamos essa prática, agora estamos familiarizados e podemos analisá-la com mais calma.

Utilização de Ferramentas de Apoio

Utilizamos o chat GPT para auxiliar na geração de textos. As empresas também podem adotar essa prática para ajudar na criação de histórias de usuário. Vamos deixar uma atividade explicando melhor sobre isso. Existem alguns critérios de aceitação e notas técnicas que podem ser lidos com mais calma posteriormente.

Simulação de Tarefas e Uso do Trello

Queremos simular a situação em que nós mesmos pegamos essa tarefa para realizar. Para isso, podemos usar uma conta no Trello. Ao clicar no botão de ingressar, entramos como membros. Se copiarmos esse cartão para nossa conta pessoal, seremos capazes de ingressar no cartão também. Praticar o uso do Trello e outras ferramentas é uma habilidade valiosa.

Progresso e Visibilidade das Tarefas

Ao entrar no cartão, podemos começar a trabalhar nele, arrastando-o para a coluna de Desenvolvendo. Isso indica para o restante do time em qual etapa estamos. Em um time maior, cada pessoa estará em um cartão específico, proporcionando visibilidade e transparência sobre o progresso de cada um. Se finalizarmos a atividade, podemos movê-la para a coluna de Concluído. Caso precisemos pausar por qualquer motivo, como férias ou atestado, movemos para a coluna de Pausado, garantindo que todos tenham essa visibilidade.

Simulação de Programação Pareada

Queremos também simular a situação em que realizamos a tarefa juntos, utilizando a técnica de Pair Programming (Programação Pareada). Essa técnica, aplicada em ambientes físicos de empresas, envolve uma pessoa codificando e outra ao lado, ajudando na construção do código e fornecendo feedback contínuo. Isso melhora o código e é uma prática utilizada por empresas no mundo real. Vamos simular essa situação, onde, embora não possamos conversar sincronamente, será possível assistir à codificação e praticar um pouco essa técnica.

Conclusão e Próximos Passos

Com isso, temos a base necessária para começar a desenvolver a atividade. Contudo, isso é apenas uma sequência inicial.

Integração de Snippets de Código

Se houvesse snippets de código, poderíamos integrá-los ao longo da explicação, mostrando como iniciar um projeto Angular com a Angular CLI, por exemplo, e como cada parte do código se relaciona com as tarefas descritas no Trello.

Conhecendo o Angular Material - Criando a aplicação Angular

Instalação e Configuração Inicial da Angular CLI

Vamos começar a criar nossa aplicação Angular utilizando a Angular CLI. Primeiro, precisamos garantir que estamos utilizando a versão mais recente da Angular CLI. Para isso, abrimos o terminal e digitamos o seguinte comando:

npm i -g @angular/cli

Esse comando irá instalar ou atualizar a Angular CLI globalmente em nosso sistema. Após a atualização, podemos criar um novo projeto Angular. Utilizamos o comando ng new para isso:

ng new jornada-milhas --routing=false

Aqui, estamos criando um novo projeto chamado jornada-milhas e especificando que não queremos incluir o roteamento inicialmente. Durante a configuração, escolhemos utilizar SCSS como o pré-processador de CSS, pois ele nos oferece algumas vantagens adicionais.

Abrindo e Explorando o Projeto no Visual Studio Code

Após a criação do projeto, abrimos o projeto no Visual Studio Code com o seguinte comando:

code jornada-milhas

Com o projeto aberto no VSCode, podemos verificar a estrutura do projeto, que inclui as pastas node_modules, public e src.

Executando a Aplicação Angular

Para executar a aplicação e verificar se tudo está funcionando corretamente, utilizamos o comando:

npm start

Esse comando executa o script start definido no package.json, iniciando o servidor de desenvolvimento do Angular.

Ajustes no Projeto

Agora, vamos fazer alguns ajustes no projeto. Primeiro, adicionamos uma pasta chamada "images" dentro da pasta "public" e colocamos os arquivos banner.png e logo.png nela. Também substituímos o arquivo favicon padrão do Angular por um novo favicon.icon.

Em seguida, abrimos o arquivo index.html dentro da pasta "src" e adicionamos links para as fontes CSS que utilizaremos no projeto. Esses links são obtidos do Google Fonts e são inseridos dentro da tag <head>.

Configuração de Estilos CSS

Criamos um arquivo reset.scss na pasta "src" e colamos o código CSS padrão de reset nele. Para importar esse arquivo no nosso styles.scss, adicionamos a seguinte linha:

@import "./reset.scss";

Após salvarmos as alterações, construímos o projeto e verificamos no navegador que o texto "Olá Mundo" aparece corretamente, indicando que o projeto está funcionando como esperado.

Conclusão da Primeira Tarefa

Com isso, concluímos a primeira tarefa do time do Jornada Milhas e podemos prosseguir com as próximas etapas de desenvolvimento.

Sobre o curso Angular 19: construindo um projeto com Angular Material

O curso Angular 19: construindo um projeto com Angular Material possui 94 minutos de vídeos, em um total de 22 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo o Angular Material
• Criando o header
• Criando formulário
• Trabalhando com inputs