Primeiros passos no Node.JS

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.
// 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/');
view raw AloMundo.js hosted with ❤ by GitHub


// 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/');

view raw

AloMundo.js

hosted with ❤ by GitHub

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:
D98E13A0-0514-4FFE-8FF9-760340AE2619.png

 

3. O seu servidor Node.JS já está rodando.Abra um navegador e digite http://localhost:8080. Você deve observar a mensagem abaixo.
F1624E19-DDF2-46D7-B37D-88450F1C0A96.png

 

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.
53CBFACD-9BB5-45EC-B492-993FE3E1643E.png
 

 

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:
9851343D-AC35-4837-B515-8D66DE21FE80.png

 

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:
8B92C231-0885-4BCA-8FDE-073DAF7C954E.png

 

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.
A000E120-1AF0-4C5A-A51E-A41CA73818FB.png
Esse arquivo irá colocar um servidor na porta 3000, que pode ser examinado no seu navegador.
563A7C28-E90E-4A46-A2C7-BDBE2F56DB4A.png

 

11. Finalmente, examine as mensagens exibidas pelo console da aplicação, para cada requisição.
 
21162216-10CC-4B13-91DA-4D649C500674.png

 

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 / )
 
F6419E8A-52CC-4214-81A1-1831F67A0251.png
 
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.
364F997B-6A00-4394-A1D6-3A3C26B33CEF.png
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. 
// 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
<!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>
view raw index.html hosted with ❤ by GitHub
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
{
"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"
}
}
view raw package.json hosted with ❤ by GitHub
 
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:
E você? Já começou a trabalhar com o Node.js? Compartilhe aqui as suas experiências aqui.

2 comentários sobre “Primeiros passos no Node.JS

  1. Bom artigo! Simples e resumido sobre os princípios básicos do Node.js. Pra ser “primeiros passos” e já deixar um app com rest e mySQL está EXCELENTE! (RS)… Primeira vez que vejo uma abordagem sobre depuração de código node, o que pra mim foi a melhor parte. Se for falar mais sobre o assunto, sugiro abordar sobre middlewares, que é onde tive/tenho as maiores dificuldades.

    Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s