aula 5 de ferramentas de desenvolvimento web

Prévia do material em texto

10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 1/27
 
 
 
 
 
 
 
 
 
 
 
 
FERRAMENTAS DE
DESENVOLVIMENTO WEB
AULA 5
 
 
 
 
 
 
 
 
 
Prof. Yanko Costa
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 2/27
CONVERSA INICIAL
Nesta aula, tratamos das características de uma aplicação SPA e sobre bibliotecas e framework,
sendo este último utilizado para desenvolver aplicações SPA: o Angular.
Vamos expor adiante algumas ferramentas utilizadas para criar uma aplicação SPA, alguns
conceitos utilizados no Angular e a variação do JavaScript adotada no seu desenvolvimento,
chamada de TypeScript.
Por último, detalharemos a estrutura do Angular, de modo a entendermos  suas partes principais
e como construir uma aplicação utilizando esse framework.
TEMA 1 – ANGULAR
O Angular iniciou como um projeto pessoal de Miško Hevery para facilitar o trabalho de
designers que não conheciam programação a fazer alterações nas telas das aplicações usando
basicamente HTML. O nome foi baseado nos sinais < e > (angle) utilizados nas suas tags (NG-CONF,
2014).
Sua primeira versão se chamava AngularJS e foi desenvolvida e mantida pelo Google até o
desenvolvimento da nova versão. Atualmente ainda é mantida, mas com suporte limitado para
questões relacionadas à segurança (Long Term Support) até 31 de dezembro de 2021 (Angular,
2021d).
Desde seu início, o AngularJS foi desenvolvido em JavaScript para ser utilizado no lado cliente
(Angular, 2021b). Com a versão 2.0, o AngularJS foi totalmente reescrito e passou a ser chamado
somente de Angular; passou também a ser desenvolvido utilizando TypeScript como linguagem
padrão.
Uma aplicação Angular necessita ser compilada, e por meio dessa compilação é gerado um
código JavaScript que pode ser executado diretamente pelos navegadores.
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 3/27
1.1 MEAN (MONGODB, EXPRESS.JS, ANGULAR, E NODE.JS)
Com o maior uso do JavaScript no desenvolvimento de aplicações web e a possibilidade de se
criar também código JavaScript no lado do servidor, aumentou a utilização de cenários em que a
aplicação seria toda escrita nessa linguagem, desde a parte cliente até o código utilizado no servidor.
Esse cenário tem sido chamado de MEAN, indicado pela primeira letra das tecnologias
normalmente utilizadas para a construção dessas aplicações (MongoDB, ExpressJS, Angular, NodeJS).
A Figura Erro: Origem da referência não encontrada a seguir apresenta um diagrama que mostra
onde essas tecnologias são utilizadas.
Figura 1 – Diagrama cliente-servidor com Angular
Crédito: o autor.
As tecnologias têm o seguinte objetivo (>IBM, 2019).
a. MongoDB: base de dados NoSQL open-source que utiliza uma estrutura semelhante ao
JSON para armazenar os dados.
b. ExpressJS: framework que possibilita o desenvolvimento de aplicação no servidor usando
NodeJS.
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 4/27
c. NodeJS: ferramenta que possibilita a execução de JavaScript fora do ambiente de um
navegador (será detalhado mais adiante).
d. Angular: framework que possibilita o desenvolvimento de aplicações SPA.
1.2 PERSONALIZAÇÃO DE TAGS
Quando um navegador encontra uma tag que não está na referência padrão, ele a ignora e tenta
apresentar o conteúdo de alguma maneira, inclusive essa é a orientação da especificação do HTML
(HTML Standard, 2021). O conteúdo pode ser apresentado e não gerar confusão no layout da página
ou a informação pode ser ignorada. De qualquer forma, o navegador não interrompe a exibição do
conteúdo com um erro.
No entanto, com a utilização do JavaScript, tags personalizadas podem ser criadas, bem como
constar no DOM e terem atributos e funcionalidades específicas (Custom HTML, 2021).
Quadro 1 – Criando uma tag
Fonte: o autor.
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 5/27
No exemplo do Quadro 1 anterior, em (b) a classe “novaTag” está herdando as características do
objeto “HTMLElement” e, com isso, torna-se um elemento válido no documento. A função
“connectedCallback()” é executada assim que o elemento é anexado no documento.
Para construir uma tag personalizada válida, seu nome deve ter mais de uma palavra com um
traço.
Esse tipo de tag personalizada é utilizada pelo Angular ao definir pontos do documento HTML
que terão informações dinâmicas.
TEMA 2 – CONTROLE DE INTERFACE
Ao desenvolver uma aplicação SPA, o navegador é que executa a aplicação no lado cliente,
solicitando dados quando necessário. Isso quer dizer que é no lado cliente que são feitas as
verificações sobre a navegação entre as opções (menus), a forma de atualização dos dados, o
processamento e a análise da entrada de dados pelo usuário. O servidor centraliza os dados, mas não
é ele que gerencia o fluxo da aplicação.
Ao desenvolver a interface de aplicação com o usuário, o desenvolvedor vai utilizar alguns
modelos de organização dos fluxos que estarão mais aderentes ao cenário que se propõe, seja
usando um framework ou não.
2.1 MODEL VIEW CONTROLLER (MVC)
O Model View Controller – MVC (ou “Modelo, Visão e Controlador”) é uma forma de organizar o
código de maneira a separar a parte visual que será apresentada ao usuário do restante do código da
aplicação, de forma que, ao fazer ajustes na visualização das informações ou do layout da tela, o
impacto no restante do código da aplicação seja o mínimo.
O padrão MVC propõe que o código seja organizado com base em três grupos (Matos; Zabot,
2020, p. 196; martinFowler.com, 2006).
1. O model (“modelo”) reúne o código utilizado para processar as regras principais do
programa. É a parte do aplicativo que vai executar as funcionalidades a que o sistema se
propõe.
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 6/27
2. O view (“visão”) é a parte do aplicativo que formatará os dados para visualização do
usuário. Os componentes visuais (botões, menus, formulários, figuras) serão exibidos nessa
parte do padrão MVC.
3. O controler (“controlador”) é a parte do código que recebe os dados que o usuário
selecionou, digitou ou clicou na interface e encaminha para a parte do aplicativo que vai
processar a informação. O controlador vai decidir se apresenta algo na tela (view) ou executa
uma função (model).
No caso de desenvolvimento web, considerando que a parte visual é montada com HTML, o
MVC adiciona mais uma vantagem que é a possibilidade de um designer web (que não conhece
programação) poder trabalhar no layout HTML e no desenvolvimento de opções visuais sem interferir
na codificação.
Figura 2 – Diagrama do padrão MVC em uma aplicação web
Fonte: adaptado de Matos; Zabot, 2020, p. 196. Crédito: Victor Metelskiy/Shutterstock.
Em um fluxo normal de trabalho em grandes sistemas, se a parte visual estiver integrada com o
código que vai executar as funções da aplicação, uma mudança de layout, ajuste em componentes
gráficos ou adaptação de cores e figuras teria que ser executada por um desenvolvedor, podendo
interferir nas funcionalidades da aplicação.
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 7/27
O Angular incluinovas tags HTML que são usadas para chamar partes do framework e criam um
isolamento entre a apresentação (view) e os demais trechos do framework (Quadro 2).
Quadro 2 – HTML inicial da aplicação Angular
Fonte: o autor.
No Quadro 2 anterior, temos um exemplo de um HTML que está separado da aplicação, mas ao
mesmo tempo conecta a parte visual (HTML) ao restante do framework por meio de um mecanismo
interno que interpreta a nova tag e associa um código JavaScript para o navegador executar.
2.2 INVERSÃO DE CONTROLE
As primeiras interfaces de sistemas eram executadas em um fluxo em que o programa exibia
uma questão para o usuário, o usuário respondia e, com base no tipo de resposta do usuário, o
programa executava algum procedimento. O programa é que controlava cada etapa da execução.
Quando temos um código que está separado das funcionalidades que estão sendo
desenvolvidas para a aplicação, e que chama essas funcionalidades por meio da estrutura montada
para gerenciar a execução dos códigos, estamos invertendo o controle de execução
(martinFowler.com, 2004; 2005).
Quadro 3 – Fluxo de controle normal e invertido
a) b)
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 8/27
Fonte: o autor. Crédito: Victor Metelskiy/Shutterstock.
A inversão de controle (IoC, em inglês) é uma das características fundamentais dos frameworks
de aplicações (martinFowler.com, 2004). Os frameworks representam uma estrutura básica para o
desenvolvimento dos sistemas, em que o desenvolvedor vai acrescentando trechos de código
específicos da aplicação e o framework gerencia a execução desses códigos.
Uma forma de inversão de controle é conhecida como injeção de dependência (Dependency
Injection), em que os códigos a serem executados são chamados por um objeto controlador,
deixando a aplicação mais genérica (martinFowler.com, 2004).
O framework Angular utiliza a injeção de dependência para combinar os códigos desenvolvidos
com o esqueleto do framework.
2.3 ROUTER (“ROTEADOR”)
A navegação entre as telas dos sistemas web deve ser estruturada de forma que o usuário possa
clicar em um link e o sistema apresenta a tela ou executa o procedimento correspondente. Para isso,
os frameworks implementam mecanismos genéricos em que essa relação de link e tela possam ser
configurados pelos desenvolvedores.
Quadro 4 – Exemplo de rota no Angular
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 9/27
Fonte: o autor.
No Angular, o módulo de roteamento (router) possibilita que o desenvolvedor crie um tipo de
lista de páginas que cada link deve executar (Angular, 2021c). Dessa forma, o framework tem uma
estrutura de navegação que pode ser utilizada para diferentes sistemas, como mostra o Quadro 4
anterior, que em a mostra o HTML com o link, e em b mostra a definição do fluxo (o componente
“listaFaturasPendentes” que será executado).
TEMA 3 – AMBIENTE DE DESENVOLVIMENTO ANGULAR
Para a utilização do framework Angular, algumas ferramentas podem ser usadas para maior
produtividade do desenvolvedor. Entre essas ferramentas, temos o editor de código e um executor
de código em linha de comando.
3.1 EXTENSÕES VSC
O Visual Studio Code foi citado em momento anterior como a opção a ser utilizada para a
codificação dos programas. Além das funcionalidades gerais de um editor especializado para
programação, como colorização do código com base na sintaxe da linguagem ou indentação
automatizada, o VSC tem a possibilidade de estender suas características.
Para acrescentar funções dentro do editor, extensões podem ser instaladas e o VSC tem um
mecanismo de pesquisa e exibição de extensões, como mostra a Figura Erro: Origem da referência
não encontrada a seguir.
Figura 3 – Lista de extensões e exibição da extensão Angular Snippets
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 10/27
Crédito: Visual Studio Code, 2021.
Na Figura Erro: Origem da referência não encontrada anterior, na lateral esquerda, há uma lista
de extensões que contém o texto “snip”, e na parte direita, as informações da primeira extensão. A
extensão pode ser instalada ao clicarmos no pequeno botão “Install” em verde tanto na lista lateral
esquerda quanto na área direita com as informações.
Ao instalar a extensão, suas funções ficam disponíveis para o usuário do editor e, se for
relacionada com a digitação de código, a extensão pode influenciar a cada termo digitado do
programa. Um exemplo é a extensão, mostrada na Figura Erro: Origem da referência não encontrada
anterior, em execução, cujo resultado é visualizado na Figura Erro: Origem da referência não
encontrada a seguir. Essa extensão apresenta alternativas de trechos de códigos (snippets) por meio
da digitação de um termo pré-configurado. Assim, o desenvolvedor não precisa lembrar de toda a
sintaxe do comando da linguagem ou, nesse caso, do framework Angular. Na Figura Erro: Origem da
referência não encontrada a seguir, ao começar a digitar “a-ngfo” vai aparecendo um quadro
flutuante em são apresentadas as opções, que vão atualizando conforme mais letras vão sendo
digitadas. Ao teclar “Enter”, a extensão inclui no editor o trecho completo da opção escolhida. O
desenvolvedor pode então alterar e adaptar o trecho sem necessitar pesquisar em outros arquivos ou
na internet.
Figura 4 – Uso da extensão com snippets de código Angular
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 11/27
Crédito: Angular Snippets, 2021.
Existem vários tipos de extensões com diferentes propósitos. Não somente relacionadas a
linguagens específicas como a do Angular exemplificada anteriormente. Existem extensões para
facilitar ou adaptar o editor ao que o desenvolvedor está acostumado, por exemplo, a extensão
“Vim”, que adapta o VSC para os atalhos do editor “Vim”, muito utilizado por quem usa o sistema
Linux.
3.2 NODEJS
O NodeJS é uma aplicação que suporta a execução do JavaScript fora do navegador, podendo
ser utilizado para executar os programas escritos nessa linguagem em um servidor ou diretamente
no sistema operacional do desktop (ou dispositivo mobile), e usa o mesmo executor JavaScript do
navegador Chrome (Matos; Zabot, 2020, p. 23; NodeJS, 2021).
Após sua instalação, seja no ambiente servidor ou no desktop, o NodeJS pode executar um
arquivo JavaScript ou ser utilizado diretamente no terminal, da mesma forma que o console do
navegador que foi utilizado em momentos anteriores. Na Figura Erro: Origem da referência não
encontrada a seguir, vejamos a execução de um exemplo apresentado em um momento anterior, que
tinha sido executada no navegador, mas agora utilizando o comando “node” para habilitar um
prompt que executou as expressões e comandos do JavaScript digitadas diretamente no terminal (a
mesma situação pode ser executada usando o “cmd” do Windows).
Figura 5 – Executando JavaScript com o NodeJS no terminal Linux
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 12/27
Fonte: o autor.
No desenvolvimento de projetos utilizando o Angular, o NodeJS é utilizado como uma
ferramenta de produtividade e possibilita a execução de comandos utilitários do Angular no terminal,
facilitando a criação, o desenvolvimento e a manutenção de aplicações.
3.2.1 COMANDOS NG
Para trabalhar com o framework Angular, algumas tarefas burocráticas são necessárias e trechos
de código padrão devem ser criados para que o frameworkpossa ser inicializado. Uma estrutura de
pastas deve ser criada, componentes devem ser registrados e o mecanismo de navegação deve ser
atualizado.
São várias tarefas que não estão relacionadas ao desenvolvimento das funcionalidades da
aplicação e que, se fossem feitas manualmente, seria um tempo a mais não dedicados à
programação dessas funcionalidades.
Para auxiliar o desenvolvedor nessas tarefas foi criado o Angular CLI, que é uma ferramenta
utilizada para automatizar grande parte das atividades relacionadas ao framework. Para instalar basta
utilizar o comando “npm install -g @angular/cli”. O “npm” é o gerenciador de pacotes do NodeJS e
faz o download do programa, bem como verifica suas dependências.
Após instalado o comando “ng”, este fica disponível para o desenvolvedor, que poderá
configurar um novo projeto de uma aplicação angular (“ng new meu-proj”), compilar a aplicação para
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 13/27
distribuir ("ng build meu-proj") ou testar a aplicação em desenvolvimento iniciando um servidor de
teste ("ng serve") (Angular, 2021a).
Caso o leitor não esteja acostumado com o uso de linha de comando dentro do sistema
operacional, a configuração do Angular, assim como muitos comandos que auxiliam na estruturação
da aplicação, são facilmente utilizados na linha de comando. Inclusive é uma prática muito comum,
nas referências e documentações sobre o Angular, os exemplos serem apresentados com o uso dos
comandos no prompt (seja do Windows ou Linux) para a construção de aplicações.
O próprio VSC tem um terminal incorporado para executar comandos diretamente dentro do
editor.
Figura 6 – Editor VSC com terminal
Crédito: Visual Studio Code, 2021.
Nesse terminal, exibido na Figura Erro: Origem da referência não encontrada anterior, podem ser
digitados os comandos utilitários do Angular CLI (“ng”) ou outros comandos (os mesmos comandos
do Windows ao usar o “cmd”, ou do Linux usando o “Shell”) que possam auxiliar na interação com o
sistema operacional ou testes.
TEMA 4 – TYPESCRIPT
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 14/27
O TypeScript é uma linguagem baseada em uma adaptação do JavaScript feita pela Microsoft
para adicionar tipos estáticos, cujo código é convertido para JavaScript após passar por um
compilador (Typescriptlang, 2021).
Quando os tipos são declarados, é possível que sejam detectados erros que antes eram
absorvidos pela linguagem, por exemplo, quando há um erro de digitação no nome de uma variável
usada em outras partes do programa e que acaba se tornando uma “nova” variável naquele trecho
do JavaScript, como pode ser visto no Quadro 5 a seguir.
Quadro 5 – Erro em JavaScript
Fonte: o autor.
Como o TypeScript “acrescenta” opções na linguagem JavaScript, os códigos preexistentes em
JavaScript podem ser incorporados no código TypeScript e, apesar de erros de tipos serem exibidos
na compilação, a execução não é interrompida por esse motivo (Typescriptlang, 2021).
4.1 TIPOS
Os mesmos tipos usados em JavaScript podem ser declarados em TypeScript: boolean, number,
string e array. Alguns tipos são acrescentados no TypeScript e facilitam a identificação de erros de
interpretação no momento de associar valores.
Na Figura Erro: Origem da referência não encontrada a seguir, pode ser verificado como é a
sintaxe do TypeScript na declaração do tipo das variáveis. Nesse exemplo, foram usadas as mesmas
variáveis sobre JavaScript utilizadas em momento anterior para demonstrar a diferença entre as duas
linguagens.
Figura 7 – Declaração de tipos de variáveis em TypeScript
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 15/27
Fonte: o autor.
Na Figura Erro: Origem da referência não encontrada anterior, também é mostrado como é
interpretada a associação de um tipo diferente daquele que foi declarado no início do código. A
variável “impostos” fica grifada indicando um problema, e ao passar o mouse por cima é apresentada
uma janela com a indicação de que o “tipo string não pode ser associado a um tipo number”.
4.1 CLASSES
Com a possibilidade de declarar tipos, alguns conceitos de orientação a objetos são reforçados
como o encapsulamento, que pode receber um atributo “private” e evitar o acesso externo à variável
de uma classe sem autorização (TYPESCRIPT, 2021).
No TypeScript, a declaração de tipos auxilia na definição dos parâmetros usados nos
construtores da classe ou nas propriedades das classes. Também são acrescentados as novas sintaxes
ECMAScript relacionadas à orientação a objetos assim que elas são aprovadas, podendo coexistir
com a sintaxe já existente do TypeScript, como é o caso no exemplo da declaração de acesso privado
do campo “#nome_propriedade” (sendo implementado no JavaScript) e “private
nome_propriedade” (já disponível em TypeScript).
TEMA 5 – ESTRUTURA ANGULAR
Para trabalhar com o framework Angular, vamos integrar todos os conceitos, tecnologias e
linguagens que foram apresentados em momentos anteriores desde a instalação, usando NodeJS, a
estruturação do projeto, usando MVC, e com HTML, CSS e TypeScript no view utilizando orientação a
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 16/27
objetos, executando os testes usando servidor e enviando a aplicação SPA para o navegador por
meio do HTTP, editando nosso código no VSC.
Toda a tecnologia utilizada no desenvolvimento precisa ser empacotada e traduzida para um
arquivo HTML, que contém a formatação visual do CSS e código JavaScript, e que depois será
enviada para o navegador do usuário (Figura Erro: Origem da referência não encontrada).
Figura 8 – Diagrama da aplicação SPA com Angular e envio para o cliente
Crédito: o autor.
Para compreender melhor a organização utilizada pelo Angular, vamos iniciar pela separação de
pastas e arquivos básicos do esqueleto utilizado como referência para o desenvolvimento da
aplicação.
Com a sequência mostrada no Quadro 6 a seguir, teremos uma aplicação padrão montada pela
ferramenta “ng”, que poderá servir para demonstração. Nesse Quadro 6, são mostradas as perguntas
feitas pela ferramenta para configurar o projeto sendo criado e estão relacionadas a: a) utilização de
checagem mais rígidas nos tipos; b) inclusão de roteamento de páginas; e c) tipo de formato de CSS
a ser utilizado.
Quadro 6 – Criando uma aplicação Angular
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 17/27
Fonte: o autor.
Nesses primeiros testes com o Angular, utilizaremos o padrão (N, N e CSS, respectivamente)
como respostas para as perguntas do “ng new” para tornar a aplicação didaticamente mais simples. À
medida que o conhecimento sobre o Angular vai amadurecendo e as necessidades da aplicação
forem maiores, o desenvolvedor pode avaliar a possibilidade de alterações.
Ao finalizar a criação da estrutura, bibliotecas e configurações necessárias para o uso do
framework, a aplicação mínima conterá a estrutura mostrada no Quadro 7 a seguir, e poderá ser
evoluída acrescentando funcionalidades específicas (Angular, 2021 e).
Quadro 7 – Estrutura de referência para aplicação SPA Angular
A estrutura de pastas da aplicação “aula” construída pelo
comando “ng” e mostrada na lateral do editor VSC lista o
esqueleto básico e que pode ser testado diretamente para
apresentar uma tela de teste.
 
Na pasta “src”, temos a aplicação em si, ou seja,os códigos
usados para construir a aplicação e onde o desenvolvedor
vai trabalhar diretamente.
 
Na pasta “node_modules”, temos alguns pacotes
necessários ao framework Angular e alguns pacotes de uso
frequente em aplicações. Ainda, podem ser instalados
pacotes de terceiros utilizando a ferramenta “npm”.
Inicialmente, essa pasta contém mais de 39.000 arquivos.
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 18/27
 
Todos os pacotes devem estar registrados no arquivo
“package.json”.
Fonte: o autor. Crédito: TypeScript, 2021.
O termo componente (component) no Angular é utilizado para encapsular os arquivos que vão
apresentar um trecho visual na tela para o usuário (relacionado com o conceito “view” do MVC). Uma
aplicação angular pode apresentar na tela vários componentes como é mostrado na Figura Erro:
Origem da referência não encontrada a seguir.
Figura 9 – Aplicação Angular e seus componentes
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 19/27
Fonte: o autor.
No desenvolvimento dos componentes, estes podem aparecer na mesma tela ou serem
chamados conforme é estruturada a navegação entre as telas (lembrando que tela é o que o usuário
visualiza quando os itens são redesenhados. Como é uma aplicação SPA, a navegação ocorre na
mesma página HTML e os itens que são apresentados já estão no navegador).
Ao criar um projeto novo, apenas um componente é gerado e o desenvolvedor vai montando
sua aplicação, acrescentando novos componentes.
5.1 ALTERANDO O PADRÃO INICIAL
Para testar a aplicação básica criada e exemplificar como ela pode ser adaptada para nossas
necessidades, vamos fazer uma pequena modificação na tela de boas-vindas e exibir no navegador o
resultado. Em primeiro lugar, vamos para a pasta “src” e, em seguida, para a pasta “app” (Quadro 8).
Quadro >8 – Pasta “app” e o componente inicial
A pasta “src” tem o arquivo “index.html”, que é o início da
aplicação. Ele está praticamente vazio, tendo apenas a tag
personalizada “<app-root></app-root>”, que por sua vez
vai chamar o componente principal.
O componente principal está na pasta “app” e é composto
por um arquivo HTML (app.component.html), um CSS
(app.component.css) e um ćodigo TypeScript
(app.component.ts). Essa pasta também tem um arquivo
“app.componet.spec.ts” para testes e um “app.module.ts”
que mantêm um registro de todos os componentes
necessários para compor a aplicação.
Fonte: o autor. Crédito: TypeScript, 2021.
A aplicação Angular inicia com o “index.html”, com a tag “<app-root>” que é processada no
componente principal “app.component.ts” como mostra o Quadro 9 a seguir.
Quadro 9 – Integração do “index.html” com “app.component.ts”
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 20/27
Fonte: o autor.
O conteúdo da nossa modificação, portanto, deverá ser incluído no “app.component.html”, e se
for necessário criar algum estilo CSS específico para esse conteúdo, podemos também incluir a
formatação no “app.component.css”.
Quanto à informação que queremos apresentar para teste, vamos reaproveitá-la de um dos
trechos usados em momento anterior. No arquivo “app.component.html”, devemos apagar todo o
seu conteúdo e incluir a pequena tabela de “Faturas pagas” e “Faturas em aberto” mostrada no
Quadro 10 a seguir.
Quadro 10 – Tabela de faturas
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 21/27
Fonte: o autor.
Com o arquivo “app.component.html” modificado, temos que compilar nossa aplicação,
armazená-la em um servidor e enviá-la para um navegador quando ele solicitar via URL o site. Esse é
o processo de distribuição de uma aplicação SPA.
5.2 TESTANDO A APLICAÇÃO ANGULAR
Para facilitar os testes, o comando “ng” do Angular apresenta uma opção “serve” que automatiza
a compilação e inicia a execução de um servidor de teste, que já disponibiliza a aplicação compilada.
Para iniciar a compilação, devemos entrar na linha de comando, na pasta de nossa aplicação “aula” e
digitar o comando “ng serve”, e então aguardar a mensagem do Quadro 11 a seguir.
Quadro 11 – Compilação da aplicação Angular
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 22/27
Fonte: o autor.
Após finalizar a compilação na tela, o servidor será executado. Basta o desenvolvedor colocar na
área de endereço do navegador a URL de teste “http://localhos:4200” que aparecerá o resultado
como o mostrado na Figura Erro: Origem da referência não encontrada a seguir.
Figura 10 – Aplicação SPA Angular com tabela de faturas
Fonte: o autor.
Como o leitor poderá observar, o resultado apresentado não é o mesmo verificado em momento
anterior. Isso porque anteriormente era exemplificado a formatação do HTML utilizando o framework
Bootstrap. Vamos, então, incluir o Bootstrap em nossa aplicação de teste, acrescentando ao conteúdo
do Quadro 12 (o mesmo utilizado em momento anterior), no “<head>” do arquivo “index.html” que
está na pasta inicial de nosso projeto “aula”.
Quadro 12 – Links para inclusão do Bootstrap na aplicação Angular
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 23/27
Fonte: o autor.
Após cancelar a execução do servidor de teste, executa-se novamente o comando “ng serve” e a
compilação será refeita, com a disponibilização do mesmo endereço de teste. O novo resultado pode
ser verificado na Figura Erro: Origem da referência não encontrada a seguir.
Figura 11 – Tabela de faturas formatadas com Bootstrap
Fonte: o autor.
Ao verificar o código fonte recebido pelo navegador (Quadro 13), o desenvolvedor poderá
verificar que todos os itens apresentados durante o desenvolvimento do projeto “aula” (HTML, CSS,
TS) ficaram resumidos em uma linha de chamada para um arquivo CSS (“styles.css”) e quatro
chamadas de arquivos JavaScript (“runtime.js”, “polyfills.js”, “vendor.js”, “main.js”). O restante do
arquivo “index.html” trata de tags básicas e a chamada do Bootstrap.
Quadro 13 – Código fonte HTML do aplicativo SPA Angular (aula)
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 24/27
Fonte: o autor.
Todo esse processo utilizado até o momento com o framework Angular parece um trabalho
muito grande para mostrar algo que em momento anterior também foi feito usando HTML e
Bootstrap.
No entanto, o que foi mostrado até o momento foram conteúdos estáticos, e para isso não é
necessário programação. Ao se entender o funcionamento do Angular, poderemos desenvolver uma
aplicação mais dinâmica, típica de uma aplicação web. Vamos também conhecer algumas novas tags
e atributos do Angular que vão possibilitar a criação de listas automatizadas e formulários dinâmicos,
com pesquisa de dados no servidor remoto. Em momentos futuros, verificaremos estes tópicos finais.
FINALIZANDO
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 25/27
Após apresentar os fundamentos da programação web em momentos anteriores, nesta aula o
foco foi o entendimento e uso do framework Angular. Para atingir esse objetivo, iniciamos com a
explicação sobre os conceitosutilizados no Angular, como a personalização de tags HTML, que
possibilitam criar pontos de acesso a procedimentos diretamente do documento HTML. O conceito
MVC de estruturação de aplicação para a separação da parte visual do restante do código foi
abordado, assim como o formato invertido de controle da navegação, utilizados pelos frameworks de
aplicação.
Para o Angular, foi descrito como é o processo de navegação das páginas por meio dos links
digitados ou clicados na aplicação e que pode ser generalizado com base no conceito de
roteamento.
Nesta aula, também foi abordado o uso de extensões no editor VSC que podem auxiliar na
programação, usando o Angular, e como o NodeJS desenvolve um papel importante ao suportar a
criação e execução de utilitários como o “ng”, que é utilizado para criar e ajustar os projetos usando
o Angular.
Na nova versão do Angular, uma versão do JavaScript chamada de TypeScript foi adotada como
padrão para o desenvolvimento dos componentes usados nas aplicações. O TypeScript possibilita
definir os tipos das variáveis, o que pode ser utilizado no processo de compilação e verificação de
sintaxe, auxiliando na descoberta de possíveis erros nas aplicações.
Ao final, a criação de um projeto básico de teste por meio da utilização de ferramentas vistas
anteriormente, e da união dos conhecimentos adquiridos em momentos anteriores, possibilitou
percorrer todo o processo de criação, alteração e teste de uma pequena aplicação SPA em um
servidor temporário.
REFERÊNCIAS
Angular Snippets. In: Extensions for the Visual Studio family of products. Visual Studio
Marketplace. Disponível em: <https://marketplace.visualstudio.com/ 
search?
term=%22Angular%20Snippets%22&target=VSCode&category=All%20categories&sortBy=Relevanc
e>. Acesso em 30 abr. 2021
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 26/27
CLASSES. TypeScript, 27 abr. 2021. Disponível em: <https://www.typescriptlang. 
org/docs/handbook/classes.html>. Acesso em: 27 abr. 2021.
CLI Overview and Command Reference. Angular. Disponível em: <https:// 
angular.io/cli#cli-overview-and-command-reference>. Acesso em: 27 abr. 2021a.
CUSTOM elements. HTML Standard, 27 abr. 2021. Disponível em: <https://html. 
spec.whatwg.org/multipage/custom-elements.html#custom-elements>. Acesso em: 27 abr. 2021.
FAQ. Angular. Disponível em: <https://docs.angularjs.org/misc/faq>. Acesso em: 27 abr. 2021b.
GUI Architectures. martinFowler.com, Jul. 18, 2006. Disponível em:
<https://martinfowler.com/eaaDev/uiArchs.html>. Acesso em: 27 abr. 2021.
HTML. HTML Standard. Disponível em: <https://html.spec.whatwg.org/multipage/ 
infrastructure.html#extensibility-0>. Acesso em: 27 abr. 2021.
MEAN Stack. IBM, May 9, 2019. Disponível em: <https://www.ibm.com/cloud/ 
learn/mean-stack-explained>. Acesso em: 30 abr. 2021.
IN-APP navigation: routing to views. Angular. Disponível em:
<https://angular.io/guide/router#in-app-navigation-routing-to-views>. Acesso em: 30 abr. 2021c.
INVERSIONOFCONTROL. martinFowler.com, Jun. 26, 2005. Disponível em:
<https://martinfowler.com/bliki/InversionOfControl.html>. Acesso em: 27 abr. 2021.
INVERSION of Control Containers and the Dependency Injection pattern. martinFowler.com,
Jan. 23, 2004. Disponível em: <https://www.martin 
fowler.com/articles/injection.html>. Acesso em: 27 abr. 2021.
MATOS, E.; ZABOT, D. Aplicativos com Bootstrap e Angular: como desenvolver apps
responsivos. São Paulo: Saraiva, 2020.
MIŠKO Hevery and Brad Green – Keynote – NG-Conf 2014. ng-conf, 16 jan. 2014. Disponível em:
<https://www.youtube.com/watch?v=r1A1VR0ibIQ>. Acesso em: 27 abr. 2021.
TYPESCRIPTLANG. What is TypeScript? Disponível em: <https://www. 
typescriptlang.org/>. Acesso em: 27 abr. 2021.
10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 27/27
VERSION Support Status. Angular. Disponível em: <https://docs.angularjs. 
org/misc/version-support-status>. Acesso em: 27 abr. 2021d.
VISUAL Studio Code. Disponível em: <https://code.visualstudio.com/>. Acesso em: 30 abr. 2021
WORKSPACE and project file structure. Angular. Disponível em: <https://angular.io/guide/file-
structure>. Acesso em: 27 abr. 2021e.