Angular: componentização e design com Angular Material

Iniciando a Jornada da Componentização - Apresentação

Nayanne: Olá! Boas-vindas ao curso de Angular: Componentização. Eu sou a Nay e serei sua instrutora.

Nayanne Batista é uma pessoa de pele morena. Tem olhos castanhos escuros e cabelos lisos também castanhos escuros. Usa óculos de grau com armação quadrada e está com uma camiseta laranja. Ao fundo, uma estante com livros e iluminação na cor azul.

Vinícios: Olá! Sou o Vini Neves. Nesse curso, vamos explorar e trabalhar todo o universo do Angular.

Vinicios Neves é um homem de pele clara com rosto oval. Tem olhos castanhos escuros, sobrancelhas grossas, nariz comprido e boca larga. Usa barba cheia, bigode preto e óculos de grau com armação quadrada preta. Está com uma boina preta, camiseta preta e sentado em uma cadeira cinza. Atrás dele, uma parede lisa é iluminada em tons gradientes de azul e roxo.

Nayanne: Você já teve dúvidas sobre como componentizar uma aplicação Angular?

Vinícios: Isso acontece sempre, não é mesmo? Uma das atividades da pessoa desenvolvedora de front-end é pegar um projeto do figma e transformar em um código que funcione.

Sendo assim, entender o componente, seu tamanho e responsabilidades é muito importante.

Nayanne: É exatamente por isso que esse curso é tão relevante!

Aqui você aprenderá:

• As etapas para a criação de componentes eficientes no Angular;

• Identificar as partes da aplicação que podem ser componentizadas e como isso pode trazer benefícios ao desenvolvimento;

• Como desenvolver uma aplicação de forma organizada, fácil de ler e escalável. Trabalharemos a proporção entre componentização e reaproveitamento de código;

• Para criar um visual atraente e consistente, conheceremos a biblioteca de componentes Angular Material.

Vinícios: Essa biblioteca vai nos proporcionar vários componentes visuais prontos para montar nossa página.

Assim, vamos nos preocupar na disposição dos componentes. Porém, não precisaremos nos atentar a detalhes menores, como a criação de um botão ou uma lista select.

Nayanne: O Angular Material é uma ótima opção para agilizar o desenvolvimento e auxiliar na criação de interfaces profissionais e elegantes.

Para esse curso, é importante que você tenha familiaridade com Angular, HTML, SASS e o Type Script.

No início do curso focaremos na parte visual da aplicação, sem a adição de funcionalidades.

Assim, você poderá se concentrar na componentização e utilização do Angular Material.

Vinícios: Construiremos os alicerces da nossa aplicação para podermos escalá-la para os demais cursos dessa formação.

Nayanne: Isso ai! Prepare-se para essa nova jornada com Angular!

Iniciando a Jornada da Componentização - Abordagem de componentes no Angular

Nayanne: Que bom ter a sua companhia nessa nova jornada de aprendizado!

Estamos muito animados para te apresentar tudo o que desenvolveremos ao longo desse primeiro curso da formação.

Vinícios: Também estou muito animado, Nay! Teremos muitos componentes para serem criados e muito código para desenvolver. Mas, por onde vamos começar?

Nayanne: Considere que você estava em busca de uma nova oportunidade profissional e conseguiu o emprego desejado. Você irá trabalhar em uma startup como pessoa desenvolvedora front-end.

Essa empresa está criando uma nova aplicação web chamada Jornada Milhas, uma plataforma de venda de passagens aéreas.

Nesse projeto, sua responsabilidade será desenvolver essa aplicação utilizando o Angular.

Porém, para isso existem alguns pré-requisitos. Essa aplicação precisa ser pensada desde o início com escalabilidade em Menti, assim será possível adicionar novos recursos, além do cadastro de pessoas ao longo do tempo.

Vinícios: Nesse cenário, precisamos analisar melhor quais são os próximos passos. A partir disso podemos planejar o que deve ser feito e só depois criar o código.

Nayanne: Exatamente isso, Vini! A equipe de design forneceu todos os protótipos no Figma, começamos abrindo essa aplicação para fazermos uma análise.

Repare que existem diversas telas a serem criadas, como a inicial, de pesquisa, login e cadastro. Porém, nesse primeiro momento foi solicitado o desenvolvimento da home page.

Nessa etapa, não implementaremos funcionalidades. Começaremos criando a estrutura da página inicial, pois o back-end está sendo desenvolvido paralelamente por outra equipe.

Vinícios: Primeiro montaremos toda a estrutura visual e os componentes. Depois podemos plugar esses dados no back-end, transformando-os de estáticos em dinâmicos.

Nayanne: Sim, Vini! Para esse desafio, começaremos criando uma aplicação Angular.

Criando uma aplicação Angular

Nayanne: Abrimos o terminal e digitamos o comando cd Desktop seguido de "Enter" para abrir essa pasta.

cd Desktop

Para criar a nova aplicação usaremos o comando ng new seguido do nome do projeto jornada-milhas.

ng new jornada-milhas

Ao apertar "Enter" temos como retorno uma pergunta se queremos ou não adicionar rotas. Isso é interessante, já que vamos lidar com várias páginas diferentes nessa aplicação. Então, digitamos "y" seguido de "Enter" para confirmar.

A segunda pergunta se refere ao formato de estilo que usaremos. Qual será, Vini?

Vinícios: Podemos usar o scss que é uma extensão do css. Que tal?

Nayanne: Ótimo! Selecionamos essa opção e apertamos "Enter". Feito isso a aplicação é criada.

Quando essa etapa for concluída, escrevemos o comando cd jornada-milhas seguido de "Enter".

cd jornada-milhas

Depois passamos code . para abrir no VS Code.

code .

Feito isso, o VS Code abre. Na lateral esquerda, no Explorer, encontramos a estrutura de pasta de uma aplicação Angular.

Apertamos "Ctrl + J" para abrir o terminal. Escrevemos ng serve --open e apertamos "Enter".

ng serve --open

Feito isso, abre uma tela do navegador com a aplicação Angular ainda sem modificações.

A aplicação foi criada, mas como criaremos o projeto do Figma utilizando código, Vini?

Vinícios: Podemos começar analisando quais são os componentes que serão reutilizados. Assim, podemos criá-los em uma camada compartilhável. Já os específicos podemos tratar dentro da página. O que você acha?

Nayanne: Acho um ótimo critério para identificar quando devemos ou não transformar uma parte do Figma em componente.

Analisando o Figma, percebemos que o header, o footer e alguns outros elementos se repetem nas telas.

Sendo assim, na lateral esquerda clicamos em "src > app". Clicamos com o botão direito em "app" e depois em "New folder". Nomeamos a pasta de "shared".

Dentro dela podemos criar nossos componentes. Então, abrimos o terminal novamente e para parar a aplicação passamos o comando Ctrl + C.

Vinícios: Podemos começar criando o header. Que tal?

Nayanne: Para isso, no terminal, passamos o comando ng g c seguido de shared, para ficar salvo nessa pasta. Adicionamos barra e o nome do componente header.

ng g c shared/header

Após apertar "Enter" os quatro arquivos são criados e notamos uma modificação no app.module.ts.

Vinícios: Agora podemos analisar o Figma novamente para verificarmos quais são os outros componentes que criaremos.

Nayanne: Como tem imagens que se repetem em várias telas, podemos criar um componente de banner. Também temos um formulário, cards de promoções e depoimentos, além de um rodapé.

Vinícios: Podemos criar o componente banner e do footer que temos certeza que poderemos compartilhá-los e depois testá-los.

Nayanne: Abrimos novamente o VS Code. No terminal, ao apertamos a tecla "Seta para cima", a ferramenta autopreenche o último comando. Apagamos o header e passamos footer, seguido de "Enter".

ng g c shared/footer

Assim o componente de rodapé é criado. Para criar o componente de banner fazemos o mesmo, substituindo o footer por banner.

ng g c shared/banner

Por fim, criamos o componente card passando a mesma estrutura de comando, seguido de "Enter".

ng g c shared/card

Essa etapa de pensarmos como encaixar esses componentes para formar a tela inicial me lembra a construção de um quebra-cabeça.

Vinícios: Nay, explique melhor essa comparação.

Nayanne: Cada componente pode ser comparado como uma peça de um quebra-cabeça que vamos encaixando até formar a tela inicial. Além disso, existem quebra-cabeças com peças maiores e menores.

Essa reflexão é valida para começarmos a pensar no nível de granularidade da componentização. Devemos decidir se criaremos componentes com escopo mais limitado e funções específicas ou mais abrangentes e funções amplas.

Vinícios: Esse é um dos nossos maiores desafios como pessoas desenvolvedoras de front-end.

Precisamos ter um equilíbrio, afinal, se quisermos reaproveitar tudo teremos uma base de código extensa. Já se não aproveitarmos nada o mesmo acontece.

Nayanne: Um dos critérios mais importantes é identificar se um componente será reutilizado em outras partes da aplicação, isso já nos orienta a extrairmos o código e transformá-lo em componente.

Mas, isso significa que se não formos reutilizar não podemos transformar um trecho de código em componente?

Na verdade, não. É possível que componentes menores estejam dentro de outros componentes. Nosso formulário de busca, por exemplo, é formado por diferentes estruturas.

Quando pensamos em manutenção de código, dependendo da lógica utilizada, pode ser interessante transformar trechos de código em componentes.

Isso significa que cada caso deve ser analisado e fazer um balanço para haver equilíbrio.

Vinícios: Isso significa separar as responsabilidades, né, Nay?

Nayanne: Exatamente!

Vinícios: Qual nosso próximo passo agora?

Criamos a aplicação e alguns componentes iniciais. Em seguida começaremos a montar esse quebra-cabeça.

Te esperamos no próximo vídeo!

Iniciando a Jornada da Componentização - Conhecendo o Angular Material

Nayanne: No vídeo anterior conversamos sobre o processo de componentização e criamos uma estrutura inicial de componentes.

Agora, vamos codar esses componentes. Para isso, abrimos o Figma nas especificações.

Vinícios: Nay, nós construiremos esses componentes do zero ou utilizaremos alguma biblioteca para auxiliar nesse processo mais visual?

Nayanne: Vamos conferir isso, Vini. Analisando o Figma, encontramos um link para documentação. Ao clicar nele, somos encaminhados para o site do Material Design.

Isso significa que foi especificado nessa aplicação que devemos utilizar uma biblioteca de componentes. Então, não criaremos tudo do zero.

Conhecendo o Material Design

Vinícios: Nay, você pode explicar um pouco mais sobre o Material Design?

Nayanne: Claro, mas farei isso usando uma analogia. Suponha que você dará uma festa com o tema futurismo. Você pode fazer manualmente cada item de decoração ou então comprar um kit de festa completo e pronto.

Trazendo esse exemplo para o projeto, o Material Design é como se fosse o kit completo. A biblioteca fornece vários componentes e diretivas que podem ser utilizados no projeto para criar um visual consistente.

O Material Design é tão recomendado que o Angular criou uma implementação própria do Material Design chamada Angular Material.

Se acessarmos a aplicação no navegador e clicarmos no link "Angular Material", no centro direito da tela, somos encaminhados para a documentação.

Na barra de menu superior, clicamos no botão "Components". Feito isso, abre uma aba com todos os componentes que podem ser personalizados e utilizados na aplicação. Para isso, bastar importar o módulo.

Como essa ferramenta já está integrada no Angular, conseguimos utilizar os componentes e otimizar tempo.

Vinícios: Isso vai nos ajudar muito na utilização de componentes menores! Vamos começar, Nay?

Nayanne: Primeiro, precisamos instalar o Angular Material. Na tela inicial da aplicação, na seção "Next Steps", clicamos em "Angular Material".

Feito isso, é disponibilizado o comando de instalação da biblioteca. Copiamos e abrimos o terminal do VS Code.

A instalação pode ser feita via npm install, porém, como essa é uma biblioteca integrada podemos utilizar a própria CLI do angular.

Sendo assim, colamos o comando ng add @angular/material e rodamos.

Enquanto a instalação é feita aparece uma pergunta se desejamos prosseguir. Digitamos "y" seguido de "Enter" para confirmar.

Depois, aparece outra pergunta na qual devemos escolher um tema. Para entendermos melhor, abrimos a documentação do Angular Material.

No lado superior direito, clicamos no ícone identificado por uma lada de tinta. Abre opções de temas pré-definidos oferecidos pela biblioteca, sendo:

• Deep purple & Amber / Roxo escuro e âmbar;
• Indigo & Pink / Indigo e rosa;
• Pink & Blue-grey / Rosa e azul acizentado;
• Purple & Gren / Roxo e verde.

Se abrirmos nosso projeto no Figma, percebemos que ele está na cor roxo e vermelho. Sendo assim, selecionamos a primeira opção.

Agora, voltamos ao VS Code. No terminal a opção "Deep purple & Amber" é a segunda, então, a selecionamos e apertamos "Enter".

Vinícios: Nay, esse tema é como se fosse um preset das cores que o Material fornecerá nos componentes?

Nayanne: Exatamente! A biblioteca sugere essas cores para serem aplicadas em botões e outros elementos.

Se voltarmos ao terminal, nos deparamos com outra pergunta referente a tipografia. Como queremos adicioná-la, digitamos "y" seguido de "Enter".

Por fim, uma pergunta se queremos incluir as animações do Angular. Novamente digitamos "y" seguido de "Enter". Feito isso instalamos tudo o que a biblioteca pode oferecer.

Na lateral superior direita, clicamos no Explorer e acessamos o arquivo package.json. Na linha 19 encontramos o Angular Material adicionado.

Vinícios: Agora sim. Pronto para ser utilizado! Estou muito animado e curioso para descobrir se o Angular não quebrou com essa adição.

Nayanne: No próximo vídeo faremos o teste codando o header. Até lá!

Sobre o curso Angular: componentização e design com Angular Material

O curso Angular: componentização e design com Angular Material possui 118 minutos de vídeos, em um total de 47 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:

• Iniciando a Jornada da Componentização
• Criando componentes reutilizáveis
• Criando o formulário de busca
• Criando o modal