Aula-02 - MEAN Stack - parte I (1)

Prévia do material em texto

MEAN Stack
Parte I
O que vamos fazer ao longo do curso
• Vamos falar sobre Node.js/Express, mongoDB e Angular;
• Vamos aprender a conectar Angular como um frontend com 
Node.js, Express e mongoDB como um backend;
– Prover apropriados “endpoints” no backend para que o frontend 
possa consumir
– Conectar o NodeJS backend com a Angular App através Angular’s
Http Service
– Usar MongoDB com Mongoose para interagir com os Dados no 
backend
– Use ExpressJS como um NodeJS Framework
• Construir Componentes Reutilizáveis com Angular
• Vamos construir uma aplicação para aplicar os conceitos;
MEAN Stack
• O acrônimo MEAN foi cunhado para denotar o uso 
de uma stack completa para desenvolvimento de 
aplicações incluindo MongoDB, Express, Angular e 
Node.js
(N)ode.js
• Node.js e uma plataforma para aplicações JavaScript
– “toscamente falando” é JavaScript no lado do servidor com 
recursos para lidar com tarefas específicas do lado do servidor
• É possível utilizar bibliotecas desenvolvidas pela comunidade 
através de seu gerenciador de pacotes chamado npm.
• Na MEAN Stack, Node.js e a condição “base” para seu 
funcionamento, o core.
(E)xpress
• Express é um framework web light-weight, que trabalha junto 
com o Node.js, e que ajuda na organização de sua aplicação 
web na arquitetura MVC no lado do servidor. 
• Facilita “a vida”, em vez de ter que fazer várias tarefas 
recorrentes “na mão”, se usasse somente o Node.js
• Na MEAN Stack, o Express geralmente disponibiliza endpoints
que são consumidos pelo Angular, que por sua vez são 
atualizados com base nos dados recebidos.
Express é um framework 
que “encapsula” o 
Node.js 
Estende a capacidade padrão 
do Node.js adicionando
middlewares, views e rotas, 
etc
(A)ngular
• Angular é um framework MVC no lado do cliente voltado para Single 
PageWeb Applications (SPA). 
– Aplicações de apenas uma página com grande parte de seu código no cliente, 
em JavaScript . (No caso do Angular, TypeScript)
• O foco é a interatividade com o usuário (reactive user experience)
• Diferente da maneira tradicional, na qual dado e lógica são processados no 
servidor, Angular facilita o recebimento de dados e execução de lógica 
diretamente no cliente.
• Na MEAN Stack, Angular é o responsável por interfaces dinâmicas e 
permite acessar facilmente endpoints diretamente do cliente.
- Atualiza apenas partes que são 
necessárias do DOM
- Lidar com rotas (a lógica de navegação 
é praticamente “responsa” do lado 
cliente)
- Não precisa enviar request e esperar 
response. Tudo acontece “na hora”
(M)ongoDB
• MongoDB e um banco de dados NoSQL flexível e escalável. 
– Combina a habilidade de escalar com os muitos recursos 
presentes nos bancos de dados relacionais como índices, 
ordenação etc. 
• E um banco fracamente tipado, o que ajuda muito pouco com 
validação de dados, de modo que boa parte da 
responsabilidade das regras de validação fica nas mãos dos 
desenvolvedores.
• Na MEAN Stack, MongoDB permite armazenar e reaver um 
dado em um formato muito similar ao JSON (JavaScript
Object Notation) 
Vantagens da stack
• Produtividade e Integração da equipe
– frontend e backend trabalhando com a mesma linguagem
• Prototipação e Debugging
– A estrutura do dado enviado e semelhante no cliente, no servidor 
e no banco, o que reduz drasticamente o tempo com conversões.
• Performance
– Há a possibilidade de processar totalmente ou parcialmente 
dados e lógica no cliente, onerando menos o servidor.
• Build, teste e gerenciamento de dependências
– Não é necessário utilizar ferramentas de build ou de 
gerenciamento de pacotes frontend em outras linguagens. 
Como Node.js e Angular trabalham juntos
• Modelo clássico:
• Cliente (browser) e Servidor trocando requisições
para “todas as coisas” solicitadas
• Não há nada de errado com isso… 
– A não ser que normalmente temos que enviar uma
request para cada simples alteração da página.
Como Node.js e Angular trabalham juntos
• Single Page Application
• Há uma mudança do modelo tradicional.
• O cliente pode fazer várias coisas sem ter que necessariamente 
“visitar” o servidor
– Não precisamos conectar nele frequentemente
• Claro, se for para enviar ou buscar alguma coisa do BD, por 
exemplo, a requisição vai ocorrer 
– Mas o Angular faz isso em background...
Como Node.js e Angular trabalham juntos
• Angular + Node.js
• O ponto chave a ser entendido aqui é que:
– Uma vez que a página já está carregada no browser, é usado as 
“rotas do Angular” para lidar com o usuário e com o DOM ou 
direcionar para o server-side;
– O Node.js expõe alguns end-point (“rotas do Node.js”) que o 
Angular pode conectar (behind the scenes) para trocar dados e 
“conversar” com o servidor. Os route controllers possuem o código 
a ser executado e acesso ao BD
– A comunicação entre front e back end é assíncrona
Preparando o Projeto
• O que precisamos fazer inicialmente:
– Instalar o Node.js para executar o código do lado do 
servidor (http://nodejs.org)
– Para verificar:
• Win: no CMD digite “node –v”
• Visual Studio Code: no terminal digite “./node –v”
http://nodejs.org/
Preparando o Projeto
• O que precisamos fazer 
inicialmente:
– Descompactar como base o “seed-
project - BASE.zip”, que está 
preparado para usar as 
dependências e possui uma 
estruturação básica de projeto.
– Mais para frente entraremos em 
detalhe dos elementos 
apresentados 
Preparando o Projeto
• O que precisamos fazer inicialmente:
– Executar “npm install”, dentro do diretório do projeto, 
para poder instalar as dependências.
• Do lado do servidor vai pegar o Express.js
• Do lado do cliente vai pegar o Angular.js
Preparando o Projeto
• O que precisamos fazer inicialmente:
– Para verificar se está tudo OK DO LADO DO CLIENTE, 
executar “npm run build” e “deixar rodando”.
• É importante deixar rodando pois “ups” no código são
automaticamente implantados
– Para verificar se está tudo OK DO LADO DO SERVIDOR, 
executar, em outro terminal e no mesmo diretório, “npm
start” e “deixar rodando”.
• Esse comando vai “startar” o servidor
Preparando o Projeto
• O que precisamos fazer inicialmente:
– No browser, acesse “localhost:3000” e deve aparecer 
“Hello World”
– Importante observar que isso que está aparecendo já é 
Angular com Node.js/Express
Preparando o Projeto
• Escolher um ambiente/IDE de desenvolvimento
– Supondo que o Node.js, o projeto padrão e as suas 
dependências (Express e Angular) já foram instalados via 
CMD do SO 
– Vamos usar o Visual Studio Code para rodar o cliente e o 
servidor e verificar se tudo está OK...
https://code.visualstudio.com/
https://code.visualstudio.com/docs/getst
arted/userinterface
https://code.visualstudio.com/docs/getst
arted/settings
https://aws.amazon.com/pt/cloud9/
Preparando o Projeto
• Escolher um ambiente/IDE de desenvolvimento:
Preparando o Projeto
• Escolher um ambiente/IDE de desenvolvimento:
Preparando o Projeto
• Escolher um ambiente/IDE de desenvolvimento:
– Vamos mexer a incrementar nesse app mais pra frente..
Entendendo a Estrutura do Projeto
node_modules
• Armazena os arquivos de todas dependências 
(é a biblioteca incorporada)
• É gerenciada por nós a medida que vamos 
instalando novos recursos no projeto
• Não precisamos mexer aqui...
!install
• Apenas criado para deixar a instalação do 
Node.js e Visual Studio Code
• Não precisa ter.
.vscode
• Configuração pessoal do Visual Studio Code
• É criado quando se personaliza algo
DICA: 
- assets armazena diretórios do cliente (“front-end”)
- Todos os outros são diretórios do lado do servidor 
(“back-end”)
Entendendo a Estrutura do Projeto
assets / app
• Armazena a aplicação app feita em Angular
• Os arquivos apresentados fazem parte da 
estrutura de uma aplicação em angular
• Aqui temos o nosso “lado do cliente” ou seja, 
a nossa aplicação front-end
Rapidamente....
• Aplicações Angular são construídas com 
componentes
• Aqui temos o componentes da aplicação app
Rapidamente....• Setamos qual o código HTML que será 
renderizado quando “invocamos” esse 
componente
Entendendo a Estrutura do Projeto
bin 
• Armazena o servidor Node.js
• Aqui realizamos a configuração do servidor
• A configuração é feita no arquivo www
Rapidamente....
• Setamos o porto, iniciamos o servidor, etc
• Mais para frente vamos ver como a requisição 
chega até a aplicação app
Entendendo a Estrutura do Projeto
Rapidamente....
• No diretório assets nós criamos a aplicação
• No diretório public nós disponibilizamos para 
o servidor 
public
• Armazena o diretório que contém a aplicação 
app desenvolvida
• Seria como o local onde fazemos o “deploy” da 
aplicação para poder ser invocada pelo 
browser
• O bundle.js é “criado automaticamente” não 
precisa mexer em nada neste diretório
• Também armazena os CSS utilizados
Entendendo a Estrutura do Projeto
routes
• Armazena as rotas do servidor para a 
aplicação app
Rapidamente....
• Aqui temos apenas uma rota registrada no 
servidor
• Se chegar em “/” (que significa localhost/) 
renderiza o “index” 
• O “index” se encontra no diretório “views” 
do servidor
Entendendo a Estrutura do Projeto
views
• Armazena um “template engine” usado pelo 
servidor para carregar a app
• O arquivo “index.hbs” contém a aplicação app
que vai ser “inicializada”
Rapidamente....
• Está usando Handlebars como “template
engine”, por isso o arquivo tem a extensão 
“.hbs”
• O legal de templates é que ajuda a separar os 
“views” da sua lógica
• A extensão diz basicamente que estamos 
usando templates no servidor. 
• Tem o head com os imports de CSS 
necessários
• Tem a tag “<my-app>” que é um componente 
construído com Angular
• Tem o import do “bundle.js” que empacota a 
aplicação app (código criado, frameworks e 
dependências)
Entendendo a Estrutura do Projeto
app.js
• De todos os arquivos listado aqui, o “app.js” é o mais 
importante
• Ele é o arquivo principal que starta o nosso Express no 
servidor
• Cada requisição que chega no servidor passa por esse arquivo
• Desse modo, vários métodos podem ser aplicado na 
requisição
Rapidamente....
• Um dos pontos mais importantes é o despacho para a rota 
correta
• Aqui encaminhamos a requisição para as rotas da aplicação 
app (./routes/app) 
Entendendo a Estrutura do Projeto
Os outros arquivos...
• São apenas arquivos de configuração para o 
projeto, para o processo de build.
• Normalmente não tem muito o que mexer 
aqui... 
Rapidamente....
• De forma geral, o arquivo mais 
importante para ser mencionado é 
o “package.json”
• Ele gerencia toda a produção e 
dependências do projeto
• Aqui vemos os scripts que usamos 
para inicializar e construir a 
aplicação 
Atividades
• Para fechar
– Vamos rodar o projeto base e ver o resultado no browser
– Altere o conteúdo da página do componente HTML do 
Angular e veja se o resultado aparece automaticamente 
ao dar um refresh no browser
– Modifique o arquivo de estilo (no local correto) para que 
o H1 fique com a cor verde.
Atividades
• Para fechar
– Incorpore o código abaixo no projeto existente
• Crie um novo arquivo CSS na estrutura
– stylelogin.css
• Crie uma nova linha de chamada
• Atualiza o HTML apropriado com o código oferecido
– login-parteI.txt
Atividades
• Para fechar
– Incorpore o código abaixo no projeto existente
• Crie um novo arquivo CSS na estrutura
– styleregister.css
• Crie uma nova linha de chamada
• Atualiza o HTML apropriado com o código oferecido
– register-parteI.txt