Texto Aula 5

10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
FERRAMENTAS DE
DESENVOLVIMENTO WEB
AULA 5
Prof. Yanko Costa
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a5 1/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.
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.
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.
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.
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.
O Angular inclui novas 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)
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
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
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
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
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 framework possa 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
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
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
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
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
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.

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
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”
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
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
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
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)
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
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
conceitos utilizados 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
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.
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.

Texto Aula 5

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Texto Aula 5

Enviado por

Direitos autorais:

Formatos disponíveis

10/09/2021 16:13 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

Prof. Yanko Costa

Nesta aula, tratamos das características de uma aplicação SPA

Vamos expor adiante algumas ferramentas utilizadas para criar

conceitos utilizados no Angular e a variação do

Por último, detalharemos a estrutura do Angular, de modo a

e como construir uma aplicação utilizando

O Angular iniciou como um projeto pessoal de Miško Hevery para

designers que não conheciam programação a fazer

basicamente HTML. O nome foi baseado

Sua primeira versão se chamava AngularJS e foi desenvolvida e

desenvolvimento da nova versão. Atualmente ainda é

questões relacionadas à segurança (Long

Desde seu início, o AngularJS foi desenvolvido em JavaScript

somente de Angular; passou também a ser desenvolvido utilizando

Uma aplicação Angular necessita ser compilada, e por meio

código JavaScript que pode ser executado

1.1 MEAN (MONGODB, EXPRESS.JS, ANGULAR, E NODE.JS)

Com o maior uso do JavaScript no desenvolvimento de aplicações

criar também código JavaScript no lado do

aplicação seria toda

Esse cenário tem sido chamado de MEAN, indicado pela primeira

normalmente utilizadas para a construção dessas

onde essas tecnologias são utilizadas.

Figura 1 – Diagrama cliente-servidor com Angular

As tecnologias têm o seguinte objetivo (>IBM, 2019).

navegador (será detalhado mais adiante).

1.2 PERSONALIZAÇÃO DE TAGS

Quando um navegador encontra uma tag que não está na

apresentar o conteúdo de alguma

(HTML Standard, 2021).

ou a informação pode ser ignorada. De qualquer forma, o navegador não

conteúdo com um erro.

No entanto, com a utilização do JavaScript, tags

Quadro 1 – Criando uma tag

No exemplo do Quadro 1 anterior, em (b) a classe “novaTag”

objeto “HTMLElement” e, com isso, torna-se

Para construir uma tag personalizada válida, seu nome

Esse tipo de tag personalizada é utilizada pelo Angular

que terão informações dinâmicas.

TEMA 2 – CONTROLE DE INTERFACE

Ao desenvolver uma aplicação SPA, o navegador é que executa a

solicitando dados quando necessário. Isso quer dizer

verificações sobre a navegação entre as

Ao desenvolver a interface de aplicação com o usuário, o

modelos de organização dos fluxos que estarão

2.1 MODEL VIEW CONTROLLER (MVC)

O Model View Controller – MVC (ou “Modelo, Visão e

código de maneira a separar a parte

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

programa. É a parte do aplicativo que vai executar as funcionalidades a que o

usuário. Os componentes visuais (botões, menus, formulários, figuras) serão

parte do padrão MVC.

selecionou, digitou ou clicou na interface e encaminha para a parte do

processar a informação. O controlador vai decidir se apresenta

uma função (model).

No caso de desenvolvimento web, considerando que a

Figura 2 – Diagrama do padrão MVC em uma aplicação web

Em um fluxo normal de trabalho em grandes sistemas, se a parte

código que vai executar as funções da aplicação,

interferir nas funcionalidades da aplicação.