Conceitos – O que é o Node.JS
O Node.JS é uma plataforma leve para você construir aplicações servidoras em linguagem Javascript e pode ser comparado, em um primeiro momento de análise, a tecnologias como o Java EE Web ou ASP.NET. Ao mesmo tempo, Node.JS é uma tecnologia minimalista. Ele é muito leve e não traz consigo servidores Web ou servidores de aplicação pesados, como o Java EE Web ou o ASP.NET. No Node.JS, você começa leve e coloca novos módulos apenas quando necessário.
O JavaScript no lado do servidor pode ser um conceito novo para todos que trabalharam exclusivamente com o JavaScript no lado do cliente, mas a idéia em sí não é tão absurda – porque não usar a mesma linguagem de programação no cliente que você usa no servidor?
Em nível detalhado, o Node.js é uma plataforma construída sobre o motor JavaScript do Google Chrome para construir aplicações de Internet rápidas e com excelente escalabilidade. O motor JavaScript V8 é o motor que a Google usa com seu navegador Chrome. A engine JavaScript do Chrome realmente interpreta o código JavaScript e o executa. Com o V8 a Google criou um interpretador ultra-rápido escrito em C++.
O Node.js usa um modelo de I/O direcionada a eventos assíncronos que o torna leve e eficiente, ideal para aplicações em tempo quase real com troca intensa de dados através de dispositivos distribuídos. Em termos arquiteturais, o Node é um servidor de programas e roda sobre um pequeno motor JavaScript.
A figura abaixo representa a arquitetura minimalista do Node.JS
Pré-Requisitos para este tutorial:
- Node/NPM (Instalado via pacote de instalação em https://nodejs.org/en/download/)
- yo, gulp e bower (instalado via linha de comando via o comando: npm install -g yo gulp bower)
- Notas: Este laboratório foi testado com o Node.JS 5.7 e 3.6 em ambiente OS/X e Windows
Um AloMundo Node.js
Iremos usar o editor VisualStudio.Code, produto recente da Microsoft que a manipulação de projetos em Node.js, ASP.NET, C#, entre outras linguagens. Mas você pode usar qualquer outro editor, como Atom, WebStorm, entre outros.
1. Abra o seu editor e digite o código abaixo.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Carga de modulos em Javascript. Aqui estou carregando o modulo HTTP, que dar | |
| //suporte a requisicoes em protocolo HTTP | |
| var http = require('http'); | |
| // Nesta linha eu crio um servidor Web, que irá ouvir requisições no porto 8080. | |
| // Toda conexao a esse servidor será tratado por uma função criada pelo desenvolvedor. | |
| // Esta funcao gera um cabeçalho HTTP 200 (OK) e então ecoa uma mensagem para | |
| //o navegador que originou a requisição. | |
| http.createServer(function (req, res) { | |
| res.writeHead(200, {'Content-Type': 'text/plain'}); | |
| res.end('Meu primeiro programa Node.JS!'); | |
| }).listen(8080); | |
| // Nesta linha eu faço um log no console do servidor onde o Node.JS foi iniciado | |
| console.log('Servidor rodando em http://localhost:8080/'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Carga de modulos em Javascript. Aqui estou carregando o modulo HTTP, que dar | |
| //suporte a requisicoes em protocolo HTTP | |
| var http = require('http'); | |
| // Nesta linha eu crio um servidor Web, que irá ouvir requisições no porto 8080. | |
| // Toda conexao a esse servidor será tratado por uma função criada pelo desenvolvedor. | |
| // Esta funcao gera um cabeçalho HTTP 200 (OK) e então ecoa uma mensagem para | |
| //o navegador que originou a requisição. | |
| http.createServer(function (req, res) { | |
| res.writeHead(200, {'Content-Type': 'text/plain'}); | |
| res.end('Meu primeiro programa Node.JS!'); | |
| }).listen(8080); | |
| // Nesta linha eu faço um log no console do servidor onde o Node.JS foi iniciado | |
| console.log('Servidor rodando em http://localhost:8080/'); |
Salve o seu arquivo com o nome AloMundo.js
2. Abra um terminal na linha de comando e vá para o diretório onde o arquivo .JS foi salvo. Depois digite o comando: node AloMundo.js
Examine o console, que deve exibir a seguinte mensagem:
3. O seu servidor Node.JS já está rodando.Abra um navegador e digite http://localhost:8080. Você deve observar a mensagem abaixo.
4. Desligue o servidor, interrompendo o programa da linha de comando. [CTRL+C no Windows]
Geração de uma Aplicação Mínima Funcional em Node.JS
5. Uma aplicação Node.JS tem uma estruturação mínima recomendada.
6. Primeiro vamos instalar o gerador de aplicações Node.js/Express. Para isso iremos digitar na linha de comando:
npm install -g express-generator
Esta linha roda um utilitário chamado npm (node package manager), que instala um módulos Node.JS. Nesse caso estamos instalando um módulo HTTP mais potente chamado Express, que facilita muito o desenvolvimento de aplicações Web. A opção -g instala esse módulo globalmente.
Nota: Em ambientes Linux/MAC, talvez você precise rodar esta linha de comando em modo administrador.
(sudo npm install -g express-generator)
Depois de um tempo de download do módulo pela Internet, você deve as seguintes mensagens, que indicam uma execução bem sucedida.
7. Para criar uma nova aplicação basta digitar então o comando: express <NomeAplicacao>.
No nosso caso iremos digitar express AloMundoRobusto
Este comando irá criar uma estrutura mínima de pacotes e arquivos, similar à da figura abaixo:
8. Nesse ponto, precisamos instalar as dependências desta aplicação gerada. Para isso entre dentro do diretório e digite npm install.
Este comando irá baixar e instalar as dependências desta aplicação.
9. Agora abra a pasta raiz pelo Visual Studio Code. (use a opção File->Open e escolha a pasta gerada pelo comando express)
Você deve ver a seguinte estrutura:
10. Agora iremos executar essa aplicação com o comando: npm start.
Este comando acima simplesmente tenta chamar um script chamado start no arquivo package.json. Nesse arquivo existe um Script que dispara o comando node com o arquivo javascript chamado www. Em outras palavras, ele simplesmente chama: node www.
Esse arquivo irá colocar um servidor na porta 3000, que pode ser examinado no seu navegador.
11. Finalmente, examine as mensagens exibidas pelo console da aplicação, para cada requisição.
12. Finalize o servidor na linha de comando [CTRL+C]
Depuração da Aplicação no Visual Studio Code
13. O VS Code permite a depuração de código Node.JS. Para isso, escolha uma linha de código específica e clique do lado esquerdo da linha. Por exemplo, marque a linha 6 do código index.js, que responde a entrada do site (recurso raiz / )
Um botão vermelho irá ser marcado, que indica que o depurador está habilitado.
14. Em seguida, clique na botão do depurador (símbolo do inseto) e então no botão de PLAY (verde).
Veja que assim que você chamada a URL pelo seu navegador ele irá parar a execução e exibir uma janela similar à mostrada abaixo.
Interaja livremente com o ambiente de depuração, similar a de ambientes tradicionais de desenvolvimento (Eclipse, Delphi ou Visual Studio).
Uma Aplicação Completa Node, com Serviços REST e Banco de Dados MySQL
15. Crie um diretório e abra esse diretório com o utilitário VS Code.
16. Crie um novo arquivo chamado app.js e insira nele o seguinte código.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Aplicacao minima Node.JS com MySQL | |
| // Carrega modulos express em mysql | |
| var express = require('express'), | |
| mysql = require('mysql'); | |
| // Inicializa conexao com o banco de dados e servidor Web express | |
| var connection = mysql.createConnection({ | |
| host : 'localhost', | |
| user : 'root', | |
| password : 'root' | |
| }); | |
| var app = module.exports = express.createServer(); | |
| // Configura o banco de dados | |
| connection.query('CREATE DATABASE IF NOT EXISTS test', function (err) { | |
| if (err) throw err; | |
| connection.query('USE test', function (err) { | |
| if (err) throw err; | |
| connection.query('CREATE TABLE IF NOT EXISTS users(' | |
| + 'id INT NOT NULL AUTO_INCREMENT,' | |
| + 'PRIMARY KEY(id),' | |
| + 'name VARCHAR(30)' | |
| + ')', function (err) { | |
| if (err) throw err; | |
| }); | |
| }); | |
| }); | |
| // Configuracao da aplicacao | |
| app.use(express.bodyParser()); | |
| // Requisicao / redireciona para o arquivo index.html | |
| app.get('/', function(req, res) { | |
| res.sendfile('index.html', { root: __dirname }); | |
| }); | |
| // Atualiza o banco de dados MySQL quando a rota /users for chamada. | |
| // Ela é chamada como evento de submissao do formulario index.html | |
| app.post('/users', function (req, res) { | |
| connection.query('INSERT INTO users SET ?', req.body, | |
| function (err, result) { | |
| if (err) throw err; | |
| res.send('Usuario adicionado ao banco de dados com ID: ' + result.insertId); | |
| } | |
| ); | |
| }); | |
| // Express Ouve na porta 3000 | |
| app.listen(3000); | |
| console.log("Servidor express ouvindo no porto 3000", app.address().port, app.settings.env); |
Este arquivo é o ponto de entrada da aplicação e será chamado para inicializar a aplicação.
17. Crie um arquivo chamado index.html e insira o seguinte código nele
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function () { | |
| $('#user-submit').click(function () { | |
| var payload = { | |
| name: $('#user-name').val() | |
| }; | |
| $.ajax({ | |
| url: "/users", | |
| type: "POST", | |
| contentType: "application/json", | |
| processData: false, | |
| data: JSON.stringify(payload), | |
| complete: function (data) { | |
| $('#output').html(data.responseText); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h3>Entre o nome de um usuario que vai ser gravado no banco de dados MySQL:</h3> | |
| <input id="user-name" type="text" /> | |
| <input id="user-submit" type="submit" /> | |
| <p id="output"></p> | |
| </body> | |
| </html> |
Este arquivo irá exibir um formulário para que você possa entrar o nome do usuário. Esta informação será depois gravada em banco de dados.
18. Crie um arquivo chamado package.json e insira nela o seguinte código
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "AloMundoNodeMysql" | |
| , "description": "Demonstração de como usar o Express e MySQL juntos" | |
| , "author": "Modificado por *Seu nome*" | |
| , "version": "0.0.1" | |
| , "private": true | |
| , "dependencies": { | |
| "express": "~2.5", | |
| "mysql": "~2.0" | |
| } | |
| } |
19. Atualize as dependências dessa aplicação.
Para isso rode o comando npm install dentro do diretório onde os arquivos foram criados.
20. Rode essa aplicação pela linha de comando (node app.js). Opcionalmente você pode rodá-la pelo ambiente do VS Code, conforme mostrado anteriormente nesse tutorial.
Para saber mais
Acompanhe o sítio principal do Node.js (https://nodejs.org/en/).
Alguns livros sobre o tema incluem:
- What is Node, Brett McLaughlin
- Node.js, The Right Way, Jim Wilson
- Aplicações Web Real Time com Node.JS, Caio Ribeiro (em português)
E você? Já começou a trabalhar com o Node.js? Compartilhe aqui as suas experiências aqui.
Marco Mendes 