Artigo original: How to Get Started with Node.js – Beginner's Guide to Node

O Node.js é um ambiente de execução de JavaScript que estende sua capacidade para o lado do servidor. Ele foi construído a partir da máquina virtual do V8, a mesma que é utilizada para executar o Javascript no Chrome.

O Node é orientado a eventos, seguindo um modelo de I/O (entrada e saída) sem bloqueio. Isso significa que ele é assíncrono e não se bloqueia para uma requisição (passando imediatamente para a próxima). É isso o que torna o Node extraordinariamente rápido e eficiente, utilizando apenas uma thread para isso tudo.

Por ser orientado a eventos, quando o Node é inicializado, ele inicia todas as variáveis ​​e funções e fica aguardando a ocorrência de um evento.

Para facilitar a evolução de projetos de software, existem bibliotecas e módulos prontos, disponibilizados pela internet, que executam funções rotineiras, fazendo com que não precisemos gastar tempo criando-as do zero. Eles geralmente são encapsulados em pacotes e distribuídos por repositórios na internet. Para gerenciar esses pacotes dentro de uma aplicação, existem os gerenciadores de pacotes.

Os gerenciadores de pacotes são responsáveis por instalar, atualizar ou remover essas dependências do seu projeto. O maior gerenciador de pacotes que existe para Node do mundo é o NPM, que é a abreviação de Node Package Manager (gerenciador de pacotes do Node). Já o NPX, que é a abreviação de Node Package Execute (executor de pacotes Node), permite que você execute qualquer pacote do npm sem precisar instalá-lo.

Você consegue baixar o npm em https://nodejs.org/en/download/.

Como escrever seu primeiro programa no Node.js (o famoso "Hello World")

Crie um arquivo chamado hello_world.js na pasta do seu projeto

Em seguida, abra esse arquivo em um editor de código, como , por exemplo, o VS Code. Insira o código console.log(“Hello World”); nele e salve o arquivo.

Abra o seu terminal de comando e navegue até a pasta onde o arquivo está.

Agora, digite node hello_world.js.

Como importar os módulos essenciais do Node

Então, vamos começar com um pacote bem básico, que é o fs (sistema de arquivos). Você o usa para criar, ler e modificar arquivos.

Para importar o módulo fs, insira este comando no arquivo: const fs = require(“fs”);.

Agora, você pode usar qualquer função desse módulo. Para saber quais são, basta consultar a documentação (em inglês).

Por exemplo, para criar um arquivo, podemos usar a função fs.writeFileSync(filename, content);.

const fs = require(“fs”);
fs.writeFileSync(“file.txt”, “Hi there..”);

Para anexar qualquer coisa no mesmo arquivo, podemos fazer assim:

fs.appendFileSync(filename, content);.

Como instalar pacotes NPM

Como exemplo, vamos usar um pacote do npm muito simples, chamado superheroes (que é uma lista de super-heróis aleatórios) para ajudar você a entender como o npm funciona.

Para instalar qualquer pacote do npm, podemos usar este comando no terminal:

npm install superheroes

Para importar o pacote que acabamos de instalar, digitamos isto no arquivo: const sh = require(“superheroes”);.

Usamos o comando abaixo para exibir o nome de um super-herói aleatório:

console.log(sh.random());.

Vamos tentar outro pacote. Instalaremos um dos pacotes do npm mais usados, ​​chamado "chalk" — ele estiliza strings de texto no terminal.

Para instalar o pacote chalk (utilizaremos a versão 2.4.2, pois ela permite importar o pacote usando o método require), digite este comando:

npm install chalk@2.4.2

Agora, para estilizar uma string de texto, use este comando para escolher a cor da string (o nome da cor precisa estar em inglês):

chalk.cor(texto)

// Exemplo: chalk.blue("Este é o texto que ficará em azul.");

Você pode ler mais sobre o pacote chalk aqui (texto em inglês).

Como iniciar o NPM em nosso programa

Iniciamos o NPM em nosso programa com:

npm init

Em seguida, você pode responder às perguntas sobre informações do projeto, ou pressionar Enter em todas elas.

Se preferir usar diretamente o comando npm init -y (que é o mesmo que pressionar Enter para todas as perguntas).

Isso resultará na criação do arquivo package.json:

O que faz, afinal, o package.json?

O package.json é o coração de qualquer projeto do Node.js. É nele que temos o registro de todas as dependências (os pacotes do NPM) e os metadados de cada projeto.

Se outra pessoa baixar o projeto, este arquivo vai ajudá-lo a instalar todas as dependências necessárias para executar o programa.

Como usar o Moment.js — um pacote do NPM

A biblioteca Moment.js é um dos pacotes do npm mais usados do Node. Com ele, você pode analisar e validar datas.

Para instalar o pacote, execute este comando no terminal:

npm i moment

Percebeu o comando i? Ele é a abreviação do install que usamos no início. Você pode usar qualquer um dos dois.

Importamos o pacote no nosso código:

const moment = require(“moment”);

Criamos um objeto Date, buscando a data e hora atual (método nativo do JavaScript):

const time = new Date();

Agora, para analisar ou formatar essa data, usaremos o pacote moment:

const parsedTime = moment(time).format("h:mm:ss");

Exibimos no console, então, o tempo analisado:

console.log(parsedTime);

Abaixo vemos o package.json do projeto, com todos os pacotes de dependências – neste caso, apenas o moment .

Também temos a pasta node_modules na pasta do projeto. Essa pasta contém todas as dependências das quais nosso projeto depende, incluindo o moment e outros pacotes dos quais ele depende.

O package-lock.json é outro arquivo em nossa pasta do projeto que contém todas as informações sobre o nome, dependências, versão das dependências e se existe alguma versão que esteja bloqueada no projeto.

Ele descreve a árvore de dependências exata que foi gerada, permitindo que qualquer nova instalação tenha uma árvore idêntica.

Como usar o Express JS — um framework do NodeJS

O Express é um framework de aplicações para a web em Node.js, que oferece uma ampla variedade de funcionalidades para aplicações da web e dispositivos móveis.

Como instalar o Express

Para instalar o Express, execute este comando:

npm install express

Você precisará importar o Express no código do projeto, assim:

const express = require("express");

Como criar uma aplicação do Express

Para criar uma aplicação do Express, basta adicionar este código:

const app = express()

Como iniciar um servidor na porta 3000

app.listen(3000, () => { 
    console.log("Server running on port 3000");
}

Agora, você consegue acessar seu servidor em http://localhost:3000.

"Cannot GET /", no entanto, significa que ainda não temos uma rota definida para "/".

Para definir a rota "/", usamos a função app.get().

A função app.get(rota, callback) é usada para lidar com todas as solicitações GET.

O parâmetro rota, é autoexplicativo. É a rota que, quando chamada, executará uma função de callback, que é definida no segundo parâmetro.

Essa função de callback terá dois argumentos, req e res, que se referem à requisição HTTP e à resposta desejada, respectivamente. Os nomes dos argumentos (req, res) não são fixos. Você pode nomeá-los como quiser.

app.get("/", (req,res) => { 
    // app.get para lidar com solicitações GET
    // req - solicitação http, res - resposta desejada
    res.send("Hello World"); // envia um Hello World para essa rota
}

Como criar um programa "Hello World" no Express

Nesta seção, criaremos o programa básico "Hello World", agora com o Express. Fica mais ou menos assim:

const express = require("express");
const app = express();
app.get("/", (req, res) => {  
    res.send("hello world");
});
app.listen(3000, () => {  
    console.log("Server running on 3000");
});

E aqui está a exibição dele no navegador:

Como renderizar arquivos estáticos no Express

Aprenderemos agora o conceito de renderização de arquivo estático usando o Express.

Primeiro, crie uma nova pasta para o projeto. Inicialize o npm usando o comando npm init -y.

Instale o pacote Express com npm i express e crie um arquivo chamado app.js.

Em seguida, crie uma aplicação que escute (inicie) o servidor na porta 3000, deste modo:

const express = require("express);
const app = express();
app.listen(3000, () => {  
    console.log("Server running on 3000");
}

Para renderizar páginas estáticas, com HTML, CSS e JS, no diretório raiz do projeto, crie uma pasta chamada public.

Como estamos focando apenas no back-end, não gastaremos muito tempo no front-end e criaremos apenas um arquivo HTML simples na pasta public.

Agora, importaremos o módulo path e juntaremos todos os caminhos que especificamos em um só:

const path = require("path");

Para renderizar esses arquivos, precisamos usar o seguinte comando:

app.use(express.static(path.join(__dirname, "/public")));

__dirname → retorna o diretório atual

const express = require("express");
const path = require("path");
const app = new express();
app.use(express.static(path.join(__dirname, "/public")));
app.listen(3000, () => {  
    console.log("Server running on 3000");
});

E aqui está a saída no navegador:

Como renderizar arquivos dinâmicos no Express

Nesta seção, aprenderemos a renderizar arquivos dinâmicos nos quais podemos usar valores de um objeto como entrada.

Para renderizar páginas dinâmicas, existem muitos modelos (em inglês, templates), como o pug, handlebars, ejs, dentre outros. Esses modelos nos permitem injetar dados dinâmicos, com condições e laços, em tempo de execução.

Aqui, vamos nos concentrar no handlebars.

Para dar uma breve introdução ao handlebars (cuja tradução em português seria algo como "guidão" ou "guia"), ele utiliza um modelo (template) e um objeto de entrada para gerar o nosso HTML.

Uma expressão do handlebar começa com duas chaves iniciais, {{, algum conteúdo, e termina com duas chaves finais, }}. Quando esse modelo é executado, essas expressões são substituídas pelos valores do objeto de entrada. Sua sintaxe fica assim:

<p>{{nome}} {{sobrenome}}</p>

Mas antes de escrevê-lo, instale os pacotes hbs e express:

npm i hbs express

Percebeu que os dois pacotes foram instalados no mesmo comando? Essa é outra possibilidade do NPM, em que você pode, em um mesmo comando, instalar vários pacotes encadeando seus nomes com um espaço entre eles.

Agora, crie um arquivo chamado app.js e importe os pacotes:

const express = require(“express”);
const hbs = require(“hbs”);
const path = require(“path”);

Crie uma aplicação do Express e escute-a na porta 3000:

const app = express();
app.listen(3000, (req,res) => {  
    console.log("Server running on 3000");
}

Para que o handlebars funcione, precisamos definir o mecanismo de visualização como sendo o hbs.

app.set("view engine", "hbs");

É ele quem nos permite renderizar páginas dinamicamente usando o modelo especificado.

O mecanismo de visualização (em inglês, view engine) geralmente procurará a pasta "views" na pasta raiz. Para evitar erros, vamos deixar explícito o caminho de "views" usando este código:

app.set("views", path.join(__dirname,"/views");

Agora, crie uma pasta views no diretório raiz. Nela, crie um arquivo chamado index.hbs (.hbs é a extensão do handlebars) e insira o código HTML a seguir:

index.hbs

<html>  
    <head> 
        <title>Dynamic Rendering</title> 
    </head>
    <body>  
      <h1>Dynamic Rendering</h1>   
      <p>{{autor}}</p> <!--dados dinâmicos recebidos do servidor-->
    </body>
</html>

{{autor}} — será a sintaxe para inserir nossos dados dinâmicos

Agora, para renderizar o arquivo index.hbs, criaremos uma função app.get para manipular a solicitação GET na rota "/" e enviar os dados dinâmicos para autor.

app.get("/", (req, res) => { 
    res.render("index", {    
        autor: "Arash Arora", 
    });
});

res.render é o método para renderizar a nossa visualização. Temos que passar dois argumentos. O primeiro é o nome do arquivo sem a extensão e o segundo é o objeto de variáveis ​​locais, que, no nosso caso, é a variável autor.

Nosso arquivo app.js terá esta aparência:

const express = require("express");
const hbs = require("hbs");
const path = require("path");
const app = express();
app.set("view engine", "hbs");
app.set("views", path.join(__dirname, "/views"));
app.get("/", (req, res) => {  
    res.render("index", {    
        author: "Arash Arora", 
    });
});
app.listen(3000, (req, res) => { 
    console.log("Server listening on 3000");
});

A estrutura das nossas pastas é esta:

E aqui está o resultado:

Como criar modelos avançados com o handlebars

Então, é aqui que aprenderemos sobre componentes reutilizáveis. Anteriormente, tínhamos que construir componentes idênticos em cada página (como os componentes de cabeçalho e rodapé).

Como são tarefas muito repetitivas, o modelo (template) avançado nos salvará dessa tarefa. Conceitualmente, faremos apenas um componente que será usado em todos os lugares que precisarmos.

Introduzindo o conceito de partials no handlebars

As parciais (ou partials) são os arquivos do handlebars normais que outros modelos podem chamar neles. As partials são um conceito de modelagem amplamente utilizado, não específico do handlebars.

Para construir modelos que, provavelmente, serão reutilizados, você pode isolá-los em seus próprios arquivos (as parciais) e usá-los em vários modelos. Você pode considerá-lo como sendo uma técnica simples para modularizar seus modelos.

Estas são as etapas para criá-los:

• Iniciar o npm →npm init -y
• Instalar os pacotes necessários, express e hbs →npm i express hbs
• Criar a pasta de modelos: templates
• Criar duas pastas adicionais dentro da pasta de modelos: partiais e views
• E criar um arquivo app.js

Agora, vamos criar dois arquivos de parciais: header.hbs e footer.hbs. Adicionaremos outras duas visualizações, index.hbs e about.hbs.

index.hbs

<html lang="en">  
    <head>   
        <title>Advanced Templating</title>  
    </head>  
    <body>    
        {{>header}} <!--inclui o componente "header"-->
        <p>I'm a savior</p>    
        {{>footer}} <!-- inclui o componente "footer"-->
    </body>
</html>

about.hbs

<html lang="en">  
    <head>    
        <title>Advanced Templating -- About</title> 
    </head>
    <body>   
        {{>header}}   
        <p>Handlebars</p>    
        {{>footer}} 
    </body>
</html>

header.hbs

<header>  
    <h1>Advanced Templating</h1> 
    <h3>{{title}}</h3><!--dados dinâmicos recebidos do servidor-->
    <a href="/">Home</a> 
    <a href="/about">About</a>
</header>

footer.hbs

<footer>  
    <p>Created by {{name}}</p> <!--name -> dynamic data -->
</footer>

app.js

const express = require("express");
const hbs = require("hbs");
const path = require("path");
const app = express();
app.set("view engine", "hbs");
app.set("views", path.join(__dirname, "/templates/views"));
hbs.registerPartials(path.join(__dirname, "/templates/partials"));
app.get("/", (req, res) => {  
    res.render("index", {    
        title: "Home",    
        name: "Arash Arora",  
    });
});
app.get("/about", (req, res) => {  
    res.render("about", {    
        title: "About",    
        name: "Arash Arora",  
    });
});
app.listen(3000, () => {  
    console.log("Listening on port 3000");
});

É a mesma coisa que expliquei na seção de renderização de arquivos dinâmicos no Express – exceto que, aqui, temos que registrar as parciais para usá-las.

Como cadastrar parciais

hbs.registerPartials(path_to_partials)

Como criamos o diretório das nossas parciais na pasta templates, o caminho deles fica assim:

hbs.registerPartials(path.join(__dirname, "/templates/partials"));

Concluindo

Neste artigo, aprendemos sobre o Node.js, da teoria à prática. Embora o Node.js seja um tópico muito amplo, que não conseguimos aprender em um único artigo curto como este, busquei cobrir alguns dos recursos essenciais para ajudar você a começar sua jornada nele.

Em poucas palavras, falamos o que é o Node.js, o que é o JavaScript em tempo de execução, não bloqueante e orientado a eventos, assíncrono e usando uma única thread para realizar operações. Também abordamos o framework mais utilizado em Node.js para aplicações da web, que é o Express, juntamente com uma demonstração pequena e flexível do que ele faz.

Falamos também sobre NPM, NPX e renderização de dados estáticos e dinâmicos do Node.js.

Em resumo, o Node.js é uma tecnologia incrível e que vale a pena conhecer. As possibilidades dele são infinitas devido à sua grande comunidade.