Criando aplicações web com NodeJS
· Leia em 12 minutosConceito
O Node JS é um interpretador Javascript do lado do servidor que altera a noção de como um servidor deveria funcionar. Seu objetivo é possibilitar que um programador crie aplicativos altamente escaláveis e escreva código que manipule dezenas de milhares de conexões simultâneas.
Muito útil para criar aplicações Real-time.
Portanto, possibilita que o Client-side e o Server-side sejam escritos inteiramente útilizando apenas Javascript.
Programação orientada a eventos
As linguagens tradicionais normalmente vão executar comandos um atrás do outro, um de cada vez, executando de forma mais lenta pois o comando “2” só executará após o “1” terminar.
Diferente dessas linguagens que seguem um fluxo de controle padronizado, com o Node desenvolvemos orientado a eventos.
Então em vez de aguardar um comando terminar sua execução para ir ao próximo, o Node possui um laço de repetição que recebe as informações e dispara uma função de acordo com o evento.
Esses eventos podem ser dos mais diversos. Você vai utilizar os eventos que o Node já possui e criar os seus de acordo com sua aplicação.
E isso é muito bom, pois nos permite um sistema assíncrono.
Instalando
Para instalar o Node em Windows ou OS X é preciso fazer o download do seu instalador no próprio site do Node.
Feito o download, basta executar e seguir as instruções de instalação.
Para usuários de Ubuntu é preciso instalar com apt-get:
$ sudo apt-get update
$ sudo apt-get install node
Após instalado, para verificar se tudo ocorreu bem você deve abrir seu terminal e executar o comando:
$ node -v
Que retornará a versão do Node instalado, algo semelhante a “v0.10.21”.
Após isso, execute o comando para verificar a versão do gerenciador de pacotes do Node (NPM) que já é instalado juntamente com ele.
$ npm -v
Se tudo ocorrer dessa forma significa que a instalação foi feita com sucesso.
Hello World
Com tudo instalado você já poderá executar Javascript no seu terminal, para isso basta digitar:
$ node
Executando o seguinte código js no terminal:
var name = 'Matheus';
console.log('Hello World! My name is ' + name);
Como na imagem abaixo.
Agora queremos que o Node execute um arquivo, para isso criamos um arquivo chamado “hello.js”.
E dentro dele colocamos apenas o seguinte código:
console.log('Hello World!');
Para executar o script é preciso abrir o terminal, navegar até a pasta onde está o arquivo hello.js e executar:
$ node hello.js
Você deverá ver “Hello World!” exibido no terminal.
Tudo feito, você pode ver que é facíl trabalhar com Node.
Criando um server
Vamos lá, para criarmos um servidor Node é bem simples, crie um arquivo chamado “app.js” com o seguinte código:
// Requisitamos o módulo http do Node
var http = require('http');
// Executamos o método para criar o servidor
var server = http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
// Verificamos a URL
if (request.url === '/') {
response.write('<h1>Página inicial</h1>');
} else if (request.url === '/sobre'){
response.write('<h1>Sobre</h1>');
} else {
response.write('<h1>Página não encontrada :(</h1>');
}
response.end();
});
// Iniciamos o servidor criado
server.listen(3000, function() {
console.log('Servidor rodando!');
});
Para executar, navegue até o arquivo no seu terminal e execute:
$ node app.js
Deve aparecer uma mensagem informando que o servidor está rodando, então abra seu navegador e digite https://localhost:3000 para visualizar, você pode digitar o endereço /sobre para ver a outra mensagem e um /qualquer-coisa para ver a mensagem de erro.
O código acima é bem simples, criamos o servidor e verificamos a URL digitada para imprimir no browser do usuário o conteúdo desejado.
Apesar de simples já da para perceber que seria trabalhoso a criação de rotas em um projeto mais complexo, mas isso não é problema, o node possui alguns módulos que nos ajudam nessa tarefa.
Um dos mais conhecidos atualmente é o Express, que é um framework inspirado no Sinatra do Ruby, utilizaremos ele a seguir para nos ajudar a trabalhar com as rotas e criar um pequeno projeto.
- O Express é muito utilizado. Mesmo outros frameworks mais complexos o utilizam como base.
Módulos
Como citado anteriormente, o Node assim como outras linguagens também possui um gerenciador de pacotes, chama-se NPM (Node Packaged Modules).
Assim como o Ruby possui suas gems, o PHP possui o composer e o front-end possui o Bower.
Para instalar um módulo basta executar:
$ npm install -g nome_do_módulo
Alguns comandos do NPM:
npm install nome_do_módulo
: instala um módulo no projeto.npm install -g nome_do_módulo
: instala um módulo global.npm install nome_do_módulo --save
: instala o módulo no projeto, atualizando o package.json na lista de dependências.npm list
: lista todos os módulos do projeto.npm list -g
: lista todos os módulos globais.npm remove nome_do_módulo
: desinstala um módulo do projeto.npm remove -g nome_do_módulo
: desinstala um módulo global.npm update nome_do_módulo
: atualiza a versão do módulo.npm update -g nome_do_módulo
: atualiza a versão do módulo global.npm -v
: exibe a versão atual do npm.npm adduser nome_do_usuário
: cria uma conta no npm.npm whoami
: exibe detalhes do seu perfil píblico npm.npm publish
: publica um módulo no site do npm.
Portanto, seu projeto pode ter várias dependências, tudo isso ficará referenciado no arquivo package.json na raiz do seu projeto.
Vamos útilizar agora o Express, para isso execute o comando:
$ npm install -g express express-generator@4
- Isso pode demorar um pouco dependendo da sua conexão.
Esse comando instalará o módulo globalmente para podermos utilizar em qualquer projeto e também um generator que servirá para criar os arquivos e estruturas padrões do Express.
Então iremos criar um novo projeto. Execute no seu terminal:
$ express exemplo-express -e ejs
- Adicionamos -e ejs para utilizar ejs como template engine, para início recomendo ela pois é mais simples, outra template engine muito utilizada e com bastante utilidades é Jade.
Que nos dará a seguinte estrutura:
exemplo-express/
├── bin/
├── public/
│ ├── images/
│ ├── javascripts/
│ ├── stylesheets/
├── routes/
│ ├── index.js
│ ├── users.js
├── views/
│ ├── error.ejs
│ ├── index.ejs
├── app.js
├── package.json
Perceba que o próprio Express já criou o arquivo package.json para seu projeto. Vamos dar uma olhada nele.
{
"name": "exemplo-express",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~4.2.0",
"static-favicon": "~1.0.0",
"morgan": "~1.0.0",
"cookie-parser": "~1.0.1",
"body-parser": "~1.0.0",
"debug": "~0.7.4",
"ejs": "~0.8.5"
}
}
Veja que ele já adicionou como dependência no seu arquivo o ejs.
Você vai precisar instalar as dependências desse projeto, para isso digite npm install
e depois para rodar o servidor npm start
.
- Dica:
npm i
é equivalente anpm install
, portanto sempre pode-se usarnpm i
no lugar, é um shortcut.
Com isso já temos um ecossistema para um projeto, podendo criar várias views e rotas de forma mais organizada.
Para entender melhor vamos analisar o arquivo app.js, perceba que temos nesse arquivo as instruções:
var routes = require('./routes/index');
app.get('/', routes);
Primeiro armazenamos na variável routes
o código que contém em /routes/index.js
.
A segunda instrução nos diz que, quando for feito um GET na url ‘/’ executaremos o que está presente em routes
. Nesse arquivo, /routes/index.js
temos o código:
res.render('index', { title: 'Express' });
Que vai renderizar o arquivo index.ejs da pasta views, passando title com a string Express.
No arquivo views/index.ejs temos o código:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
Que vai resultar em:
<!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Express</h1>
<p>Welcome to Express</p>
</body>
</html>
O ejs é uma engine com sintaxe semelhante a .irb do Ruby, ao PHP, etc. Nos permite escrever codígos como:
<body>
<% for(var i=0; i<10; i++) { %>
<p>Welcome to <%= title %> <%= i %></p>
<% } %>
</body>
Resultando em:
<body>
<p>Welcome to Express 0</p>
<p>Welcome to Express 1</p>
<p>Welcome to Express 2</p>
<p>Welcome to Express 3</p>
<p>Welcome to Express 4</p>
<p>Welcome to Express 5</p>
<p>Welcome to Express 6</p>
<p>Welcome to Express 7</p>
<p>Welcome to Express 8</p>
<p>Welcome to Express 9</p>
</body>
É basicamente assim que o Express funciona. Agora você já pode criar suas próprias rotas, por exemplo, uma REST API para eventos.
var express = require('express');
var app = express();
var router = express.Router();
router.route('/api/events')
.get(function(req, res, next) {
// Código para listar eventos
})
.post(function(req, res, next) {
// Código para criar eventos
});
router.route('/api/events/:event_id')
.get(function(req, res, next) {
// Código para mostrar detalhe do evento
// baseado no parâmetro id
})
.put(function(req, res, next) {
// Código para atualizar evento
// baseado no parâmetro id
})
.delete(function(req, res, next) {
// Código para mostrar deletar evento
// baseado no parâmetro id
});
Rota | HTTP Verb | Descrição |
---|---|---|
/api/events | GET | Retorna todos os eventos. |
/api/events | POST | Cria um evento. |
/api/events/:event_id | GET | Retorna um evento. |
/api/events/:event_id | PUT | Atualiza um evento com novas informações. |
/api/events/:event_id | DELETE | Deleta um evento. |
Isso tudo é apenas o início do Express…
Para aprender mais sobre o Express, veja essa playlist.
O próximo passo é fazer interações com banco de dados, criando uma REST API completa, mas isso ficará para um próximo post.
Por favor, críticas e sugestões.