Workshop Node JS - Nível Básico

Nível Básico
18/02/2017
Workshop NodeJS

© 2016 Inopus ou Inopus Soluções são referencias a empresa Michel Zarzour Filho 41217787828.
Agenda
Público – 2
09:15 - 09:20 Sobre vocês
09:20 - 09:22 Sobre nós
09:22 - 09:40 O protocolo HTTP
09:40 - 10:00 MongoDB
10:00 - 10:30 NodeJS
10:30 - 12:00 Hands on: Criando um blog com NodeJS
12:00 - 13:00 Dúvidas

Sobre vocês
40 segundos para cada um falar

Sobre vocês
Público – 4
1. Nome
2. O que faz da vida
3. Experiência com NodeJS e MongoDB
4. O que espera desse Workshop
Contem um pouco sobre vocês!

Sobre nós / Sócios
Público – 6
Otávio R. Rossi
Graduado em
Sistemas de
Informação pelo
Mackenzie, possui
grande experiência
na área de
desenvolvimento de
aplicações Web e
consultoria de
negócios na área de
tecnologia em
grandes empresas
do mercado
Michel Zarzour F.
Graduado em
Sistemas de
Informação pelo
Mackenzie, possui
grande
experiência na área
de desenvolvimento
de aplicações
WebApp e
participação em
grupos de startup.
Gustavo Soré
Graduado em
Sistemas de
Informação no
Mackenzie.
Desenvolvedor de
aplicativos,
especialista em iOS.
Responsável por
aplicativos de CRM e
mídia digital para o
setor farmacêutico
na América Latina.
Guilherme Uezima
Graduado em
Sistemas de
Informação pelo
Mackenzie, atua há
mais de cinco anos
com o
desenvolvimento de
soluções
tecnológicas para
diversas
plataformas.

Sobre nós
Público – 7
Tecnologias e ferramentas
modernas para desenvolvimento
de soluções em cloud
Foco na experiência do usuário na
utilização das soluções
customizadas em multiplataformas
Gerenciamento dos feedbacks,
recomendações de mercado e
implementação de melhorias
http://inopus.com.br

HTTP / Introdução
Público – 9
Hypertext Transfer Protocol
“Is an application-level protocol for distributed,
collaborative, hypermedia information systems. HTTP has
been in use by the World-Wide Web global information
initiative since 1990. The first version of HTTP, referred to
as HTTP/0.9, was a simple protocol for raw data transfer
across the Internet”. IETF
 Camada de aplicação
 Hypermedia
 Usado pela WWW (World-Wide Web)
 Atualmente da versão 2.0 (HTTP/2)
Utilização:

HTTP
Como funciona em relação as aplicações web

HTTP / Como funciona em relação as
aplicações web
Público – 11
Cliente Servidor
Solicita páginas web
para o servidor da
aplicação
Recebe a requisição,
processa e retorna as
páginas solicitadas
Renderiza as páginas
recebidas através do
navegador
Evento
Retorno
.html
.js
.css
.php
.aspx
.js*

Métodos HTTP
GET, POST, HEAD...

Métodos HTTP / GET, POST, HEAD...
Público – 13
O HTTP possuí alguns métodos que indicam a ação requerida com aquela
requisição. Dentre esses diferentes tipos de métodos existentes, existem 5
que são os mais utilizados e difundidos.
Method Request Body Response Body
GET No Yes
HEAD No No
POST Yes Yes
PUT Yes Yes
DELETE No Yes

Métodos HTTP / GET, POST, HEAD...
Público – 14
GET http://tecnodrom.com/Postagens/380/inopus-vence-hackathon-da-ibm
POST https://rapordo.com/usuario/entrar
usuario: otavio
senha: af12354abcd134fed
https://www.google.com.br/search?q=tecnodrom&ie=utf-8&oe=utf-
8&client=firefox-b-ab
GET

Tipos de requisições HTTP
Formulários e AJAX

Tipos de requisições HTTP /
Formulários e Ajax
Público – 16
Formulários Ajax
1. <form> no HTML representa uma
seção do documento que contém
elementos interativos para serem
enviados ao servidor;
2. Principais atributos do <form>:
2.1. action – URL que receberá o
formulário;
2.2. enctype – utilizado no POST,
MIME Type do conteúdo;
2.3. method – Método HTTP que será
utilizado (GET ou POST).
1. Asynchronous JavaScript + XML;
2. Termo utilizado para descrever uma
“nova” (2005) abordagem na
utilização de diversas tecnologias;
3. XMLHttpRequest();
3.1. API para transferência de dados;
3.2. Modos assíncronos e síncronos;
3.3. Utilizado principalmente para
JSON.

MongoDB / Introdução
Público – 18
MongoDB
Mongo é um banco de dados não relacional (NoSQL), de
plataforma aberta, orientado a documentos, cuja
escalabilidade é mais barata e menos trabalhosa, visto
que não exige uma máquina extremamente poderosa
para o processamento de um grande volume de dados.
Servidor de
aplicação
(NodeJS)
Servidor de BD
(Mongo)
Exemplo de coleção do MongoDB
Collection Pessoa

MongoDB / Conectando o Mongo
Express
Público – 20
“Web-based MongoDB admin interface written with
Node.js, Express and Bootstrap3”
Features:
• Connect to multiple databases
• View/add/delete databases
• View/add/rename/delete collections
• View/add/update/delete documents
• Preview audio/video/image assets inline in collection view
• Nested and/or large objects are collapsible for easy overview
• Async on-demand loading of big document properties (>100KB default) to keep collection
view fast
• GridFS support - add/get/delete incredibly large files
• Use BSON data types in documents
• Mobile / Responsive - Bootstrap 3 works passably on small screens when you're in a bind
• Connect and authenticate to individual databases
• Authenticate as admin to view all databases
• Database blacklist/whitelist
• Custom CA and CA validation disabling
• Supports replica sets Github mongo-express

Express
Público – 21
Start mongoDB
PDF

Express
Público – 22
 Faça download do projeto em https://github.com/mongo-express/mongo-express
 Coloque todos os arquivos em uma pasta.
 Acesse a pasta via CMD e execute o comando node app.js.
 O usuário e senha do painel do Mongo Express são admin e pass, respectivamente.
 Caso o seu banco de dados necessite de um usuário e senha para conexão, o mesmo deve
ser definido no arquivo config.default.js.

NodeJS / Hello World
Público – 24
Para criar o seu projeto NodeJS, basta acessar a pasta que deseja colocar
o projeto e, através do CMD, utilizar o comando npm init.
Esse comando criará um arquivo package.json no diretório.
package.json

Público – 25
app.js

Público – 26
views/paginas/hello_world.ejs

Para iniciar o servidor NodeJS na sua máquina, basta abrir o CMD e digitar
o comando node app.js.

Público – 28
CMD

Público – 29
CMD
Utilize o comando npm install express --save para instalar o módulo
express.
Para liberar a instalação dos módulos do NodeJS, utilize os comandos:
npm config set proxy http://172.16.0.10:3128
npm config set http-proxy http://172.16.0.10:3128

Blog / Nova postagem
Público – 31
views/partes/cabecalho.ejs

Público – 32
Links para download dos arquivos JS e CSS necessários para esse
projeto.
https://github.com/inopus/workshop-nodejs-20170218/raw/master/views/css.zip
https://github.com/inopus/workshop-nodejs-20170218/raw/master/views/fonts.zip
https://github.com/inopus/workshop-nodejs-20170218/raw/master/views/js.zip

Público – 33
views/partes/rodape.ejs

Público – 34
views/paginas/postar.ejs

Público – 35
app.js
...
...
...

Público – 36
db/conexao.js

Público – 37
app.js
...
...

Blog / Lista de postagens
Público – 39
app.js
...

Blog / Lista de postagens
Público – 40
views/paginas/index.ejs

Blog / Detalhe da postagem
Público – 42
app.js
...

Blog / Detalhe da postagem
Público – 43
views/paginas/detalhe.ejs

Blog
Arquivos estáticos (JS, CSS...)

Blog / Arquivos estáticos (JS, CSS...)
Público – 45
app.js
...
...
Como todas as requisições feitas ao nosso servidor NodeJS devem
possuem uma function especifica em uma rota, será necessário
especificar que possuímos uma pasta com arquivos que podem ser
acessados diretamente, pois possuem conteúdos estáticos (como por
exemplo, imagens, JSs e CSSs), não sendo necessário que o Node
processe através de uma rota com uma function esses conteúdos.

Blog / package.json
Público – 47
package.json
Agora, todos os módulos que foram adicionados estão especificados nas
dependências do seu projeto.

Blog / package.json
Público – 48
package.json
Você poderia, no começo do projeto, ter adicionado manualmente as
dependências nesse arquivo e utilizado o comando npm install para
instalar todas elas de uma única vez.

Blog / package.json
Público – 49
package.json
Você poderia, no começo do projeto, ter adicionado manualmente as
dependências nesse arquivo e utilizado o comando npm install para
instalar todas elas de uma única vez.
O * indica que será utilizada sempre a última
versão disponível, quanto o x.x significa que
utilizaremos especificamente uma versão

Guilherme Uezima
Otávio R. Rossi
Obrigado!

Contatos
Público – 51
Otávio R. Rossi
Consultor de Negócios
+ 55 11 9 8544-4724
otavio@inopus.com.br
Michel Zarzour Filho
Desenvolvimento Front-end
+ 55 11 9 8174-7375
michel@inopus.com.br
Gustavo Soré
Desenvolvimento Back-end
+ 55 11 9 8585-4328
gustavo@inopus.com.br
Guilherme Uezima
Design e Integração
+ 55 11 9 7692-7785
guilherme@inopus.com.br

Referências
Público – 52
• https://github.com/mongo-express/mongo-express
• https://scotch.io/tutorials/use-ejs-to-template-your-node-application
• https://docs.mongodb.com/manual/installation/
• http://expressjs.com/
• https://msdn.microsoft.com/en-us/library/ms526971(v=exchg.10).aspx
• https://msdn.microsoft.com/en-us/library/ms527355(v=exchg.10).aspx
• https://developer.mozilla.org/en/docs/AJAX
• https://tools.ietf.org/html/rfc7540
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
• https://www.shimmercat.com/en/blog/articles/whats-push/
• http://stackoverflow.com/questions/2404742/how-to-install-mongodb-on-windows
• https://www.shimmercat.com/en/blog/articles/whats-push/
• https://en.wikipedia.org/wiki/HTTP/2
• http://materializecss.com/getting-started.html

Workshop Node JS - Nível Básico

Mais conteúdo relacionado

Destaque (11)

Semelhante a Workshop Node JS - Nível Básico (20)

Último (7)

Workshop Node JS - Nível Básico

Notas do Editor