(31)994408961- RESOLVIODO- AULA PRATICA Desenvolvimento com Framework Angular

Prévia do material em texto

Roteiro Aula Prática
Desenvolvimento
com Framework Angular
ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: Desenvolvimento com Framework Angular
	OBJETIVOS
	Definição dos objetivos da aula prática:
	- Criar uma aplicação web em Angular para exibir um menu de links, utilizando os conceitos básicos e a forma de estrutura de um projeto dentro do Angular.
	INFRAESTRUTURA
	Instalações:
	Necessário instalar o Node.js, npm e o Angular CLI.
Para esta atividade foram utilizadas as versões que seguem como recomendação:
· Node.js versão 20.11.1;
· npm versão 10.2.4;
	Materiais de consumo:
	
Descrição
	Quantidade de materiais por procedimento/atividade
	Computador
	1 por aluno
	
	
	Software:
	Sim ( X ) Não ( )
	Em caso afirmativo, qual? Angular
	Pago ( ) Não Pago ( X )
	Tipo de Licença: Freeware.
	 Descrição do software:	
	O Angular é um framework de código aberto usado para a construção de aplicativos para web baseados em uma única página dinâmica.
	 Equipamento de Proteção Individual (EPI):	
	- NSA
	
	
PROCEDIMENTOS PRÁTICOS
	Realizar a instalação ou verificação das ferramentas necessárias descritas no tópico instalações.
· Instale o Node.js e o npm, se ainda não os tiver instalado.
· Instale o Angular CLI globalmente pelo comando:
Para verificar a versão e instalação do Node.js e do npm:
2
	O próximo passo é a criação do projeto, entretanto, se a criação do projeto, ou a instalação do Angular não funcionar de primeira, pode ser necessário a atualização para as versões indicadas do Node.js e do npm. Para isso de uma olhada no tutorial disponível em:
https://horadecodar.com.br/como-atualizar-node-e-npm-para-ultima-versao/
Ele vai ajudar você a resolver possíveis inconsistências. Lembre-se que o “Setup”, ou seja, o ambiente de trabalho é individual e deve ser configurado por você. Isso faz parte do seu estudo e está presente no dia a dia de um(a) dev.
A ferramenta utilizada como editor dos códigos em Angular será o “VS Code”. Fica a critério do estudante a utilização de outras ferramentas como Sublime, NotePad++ entre outros editores de código disponíveis no mercado.
	
	
Atividade proposta:
	· Entender como funciona na prática a configuração do ambiente e a criação e teste de uma aplicação web em Angular para exibir uma página web.
· Criar um relatório em PDF contendo o código utilizado para a resolução da atividade. Insira também no relatório:
· Prints da estrutura de arquivos/diretórios app, css, html;
· Prints das imagens da página web criada rodando no navegador pelo Angular.
	
Procedimentos para a realização da atividade:
	Angular é um framework JavaScript poderoso e popular para construir aplicações web robustas e interativas. Ele se baseia em TypeScript, uma superestrutura que adiciona tipagem ao JavaScript, tornando o código mais seguro e fácil de manter.
Vantagens do Angular
· A facilidade de desenvolvimento no Angular é uma das vantagens, pois fornece uma estrutura organizada e componentes prontos para usar, facilitando o desenvolvimento de páginas web complexas.
· O uso de TypeScript garante um código mais limpo e organizado, facilitando a manutenção e o desenvolvimento futuro.
· Comunidade ativa: O Angular possui uma grande comunidade de desenvolvedores que contribuem com documentações, tutoriais e ferramentas para auxiliar no aprendizado e desenvolvimento.
Agora vamos aos procedimentos que você deve executar para realizar a atividade.
3
	Você deverá:
Após a instalação do Node.js e do npm, criar um novo projeto. Recomenda-se a criação de um diretório antes desse passo. Acesse o diretório criado e rode o seguinte comando dentro dele:
ng new rap
Esse comando vai criar um diretório com o nome de “rap” e após isso vai criar toda a estrutura do seu projeto dentro dele. Para subir a aplicação, acesse no terminal o diretório criado: “rap” e execute o comando:
ng serve
Pronto! Sua estrutura já poderá ser acessada por meio da URL: http://localhost:4200. Veja o exemplo no print abaixo:
Perceba que já alteramos a propriedade “Title” da página para o nome da disciplina. Isso pode ser feito no arquivo “index.html” dentro do projeto.
Após o projeto criado, acesse o VSCode e abra-o. Você terá uma estrutura mais ou menos igual a essa:
4
	
Agora vamos criar um componente. Por meio do Angular CLI no terminal, digite o seguinte comando:
ng g c hello
Esse comando vai criar toda a estrutura do nosso componente com o nome de “hello”. Observe a execução do comando no terminal:
Este processo também cria a estrutura dentro do projeto com os mesmos arquivos dentro do diretório src/app, porém a partir de agora você vai trabalhar com esse componente que foi criado. O “hello”.
Para realizar com sucesso esta atividade você deverá:
1. Passo 1: Construir uma página simples com uma lista de nomes. Esses nomes deverão funcionar como botões clicáveis;
2. Passo 2: No projeto do Angular utilize os arquivos (.html) e (.CSS) para realizar as mudanças pertinentes.
3. Passo 3: Depois da construção e configuração dos dois arquivos (.html e .CSS) rode a aplicação por meio do terminal no Angular.
5
	
4. Passo	4:	Para	rodar	o	projeto	e	conseguir	visualizá-lo	no	navegador	digite:
ng serve
EXEMPLO DA ATIVIDADE FINALIZADA
O projeto rodando em deve ficar como a imagem a seguir. Observe:
Figura 1 – Projeto executado no Angular
Fonte: elaborada pelo autor, 2024.
Entregue um arquivo no formato PDF contendo os códigos dos arquivos utilizados na atividade juntamente com uma descrição dos procedimentos implementados nesta atividade.
	
Checklist:
	
· Instalação do Node.js, npm e do Angular conforme explicação no tópico: PROCEDIMENTOS PRÁTICOS;
· Criação do projeto no Angular;
· Alteração dos arquivos de código-fonte (html e CSS);
· Teste da aplicação no browser (navegador).
Para testar, rode sempre o projeto com o comando:
- ng serve (na linha de comando);
Observação: O projeto sempre tem que estar em “run” para que a URL: ‘localhost:4200’, apresente a página web normalmente, como pode ser observado na Figura 1. Para parar a execução pressione:
q + enter
6
	
RESULTADOS
	Resultados da aula prática:
	Criar um relatório em PDF contendo o código utilizado para a resolução da atividade e sua explicação dos passos utilizados para concluí-la. Neste mesmo relatório em PDF insira:
· Prints da estrutura de arquivos/diretórios app, css, html;
· Prints das imagens da página web criada rodando no navegador pelo Angular.
7
image6.jpeg
image7.jpeg
image8.jpeg
image9.png
image10.png
image11.png
image12.png
image13.png
image1.png
image2.png
image3.png
image4.png
image5.png