Criando aplicações web com NodeJS

Criando aplicações web com NodeJS

Conceito

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.

Programação

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.

Terminal

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.

Executando JS no Terminal

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 http://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 a npm install, portanto sempre pode-se usar npm 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.