Categorias
Artigos Desenvolvimento web Home

Introdução ao Node.js

Node.js® é um ambiente de execução de JavaScript em nível de back-end e front-end. Neste tutorial, veremos uma breve introdução ao desenvolvimento de aplicações web usando Node.js.

Requisitos básicos: node e npm. Para verificar se estão instalados, digite no terminal:

node -v

npm -v

Você pode fazer o download do Node.js neste endereço: https://nodejs.org/pt-br/

Resumo

  • Node.js: tecnologia para execução de JavaScript em server-side
  • npm: ferramenta usada para instalação de pacotes e bibliotecas de terceiros (dados ficam salvos na pasta node_modules e descritos no arquivo package.json)
  • express: framework usado para configuração de rotas na execução do servidor web
  • nodemon: automatiza a execução do servidor web (sua função é reiniciar o servidor web cada vez que um arquivo é alterado)
  • ejs: acrônimo para Embedded JavaScript templates. Permite a configuração de templates no Node.js.

Iniciando uma aplicação com node

No terminal, digite:

npm init -y

Isso irá criar um arquivo chamado package.json.

O próximo passo é instalar o pacote express. Esse pacote irá permitir a criação de rotas e views que, por sua vez, permitirão que você acesse o site pelo navegador. No terminal execute:

npm install express

Agora crie um arquivo chamado index.js e adicione o seguinte conteúdo:

 const express = require('express');

 const app = express();

 app.get('/', (req, res)=>{
             res.send('Hello world!');
 });

 app.listen(3001); 

Para iniciar o servidor, vá até o terminal e digite:

node index.js

Agora, para acessar a aplicação criada, vá no navegador e acesse:

http://localhost:3001

Mudanças no código fonte não serão automaticamente aplicadas à página. Para realizar alterações na página, você deve reiniciar o servidor (use control + c, e execute o comando “node index.js” novamente). Entretanto, é possível permitir atualizações automáticas usando o pacote nodemon.

Instale o nodemon usando o código:

npm install -D nodemon

Altere o arquivo package.json:

"main": "index.js",

"start": "nodemon index.js",

E inicie com o comando npm start.

OPÇÃO ALTERNATIVA
Você pode ainda configurar de outra forma. Alter o arquivo package.json na seguinte linha:

 "scripts": {"dev": "nodemon index.js"},

Agora, para iniciar o servidor utilize:

npm run dev

Criando rotas básicas com Express

Observe como podemos criar uma rota básica que recebe um id e o imprime na tela:

 app.get('/:id', (req, res)=>{
    res.send(req.params.id);
 });

Agora podemos acessar essa rota digitando na url: http://localhost:3001/123456789

Observe que apenas essa rota está disponível. Se tentarmos acessar outras rotas, como a rota raiz ou uma outra rota aleatória, obteremos mensagens de erro:

Criando um template básico

Agora, vamos criar um template básico para o seu site.

Instale a biblioteca ejs:

npm install ejs

Altere o arquivo index.js:

/* 
    Arquivo: ./index.js
    Função: Iniciar o servidor web
*/

const porta = 8080;
const express = require('express');

const servidor = express();

servidor.use(express.static(__dirname + "/"));

servidor.engine('html', require('ejs').renderFile);
servidor.set('view engine', 'html');

servidor.get('/', function(req, res) {
    res.render('index'); // carrega ./views/index.html
});

servidor.listen(porta); 

// Principal arquivo: ./controllers/controller.js 

Você pode iniciar o servidor com npm start, mas primeiro vamos configurar a estrutura da nossa página. Para isso, vamos utilizar como inspiração o padrão MVC.

Padrão MVC

MVC (acrônimo para model-view-controller) é um padrão de arquitetura de software em que o código é dividido em três componentes: modelo (responsável pelo acesso aos dados), visão (responsável pela exibição da interface com o usuário) e controlador (responsável pela gestão de acesso entre visões e dados).

Para iniciar nosso código, vamos tomar como base os princípios do MVC (note que usamos isso como uma mera inspiração, não nos restringimos a seguir o padrão à risca).

No diretório raiz, crie as seguintes pastas:

  • models
  • views
  • controllers

Views

Na pasta views, crie o arquivo index.html:

<!doctype html>
<html lang="pt-BR">
<head>

    <title>Node template</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">

    <link rel="stylesheet" href="./views/css/main.css">

</head>
<body>

    <!-- Início do conteúdo -->
    <div class="container-fluid">
        <div id="grafo"></div>
    </div>
    <!-- Fim do conteúdo -->

    <script src="../controllers/controller.js" type="module"></script>

</body>
</html>

Crie também as pastas e arquivos:

  • views
    • css
      • main.css
    • img
    • js

Note que usamos o Bootstrap na declaração do HTML. Você pode:

  1. instalá-lo via CDN;
  2. baixar os arquivos brutos e alocá-los nas pastas ./views/css e ./views/js;
  3. ou ainda, fazer a instalação via npm:

npm install bootstrap
npm install bootstrap-icons

Teste se está tudo ok iniciando o servidor via terminal (npm start) e acessando o site no navegador pelo endereço http://localhost:8080

Por Diego Mariano

Doutor em Bioinformática pela Universidade Federal de Minas Gerais com atuação na área de ciência de dados e aprendizado de máquina aplicados ao aperfeiçoamento de enzimas usadas na produção de biocombustíveis. Mestre em Bioinformática, também pela UFMG, atuando na área de desenvolvimento de sistemas Web para montagem de genomas. Atualmente realiza estágio pós-doutoral no Departamento de Ciência da Computação da UFMG com foco em desenvolvimento de sistemas Web para Bioinformática, análise exploratória e visualização de dados. Tem conhecimentos nas linguagens: PHP, JavaScript, Python, R, Perl, HTML, CSS e SQL.

Uma resposta em “Introdução ao Node.js”

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

error

Compartilhe este post!

Facebook
YouTube
LinkedIn
Instagram