nodejs
Crie um servidor seguro com NodeJS, Express e HTTPS
20 de abril de 2017
Conheça o framework Vue.js
4 de maio de 2017

Fala pessoal, bem vindos à serie de tutoriais de criação de sites com Node.js. Se você quiser saber um pouco mais sobre o Node.js, acesse o site oficial. Abaixo está o link para o primeiro tutorial:

Criando um site com Node.js – parte  1

Nesta aula, configuraremos o arquivo app.js, que no Node.js é o arquivo de configuração da aplicação. Abra sua aplicação no Visual Studio Code. Na raiz da aplicação, crie um arquivo chamado app.js. Neste arquivo, chamaremos o framework Express e usaremos alguns de seus métodos.

[pre  language=”javascript”]

//app.js

var express = require(‘express’);
var app = express();

[/pre]

O que fizemos acima foi criar uma variável express com o comando var. Depois, importamos o express e o atribuímos à nossa variável express. Em seguida, instanciamos o express na variável app, para que possamos usar seus métodos em nossa aplicação.

Porém, ainda não definimos nada que cause um impacto visual, pois ainda não podemos acessar nossa aplicação pelo navegador. Vamos então utilizar alguns métodos do express para configurar nossa aplicação.

[pre  language=”javascript”]

app.use(express.static(‘./app/public’));

[/pre]

A linha de código acima usa o método .use do express, que por sua vez integra a função de middleware express.static à aplicação. Com isso, definimos que a pasta public, dentro da pasta app, contém todos os arquivos estáticos de nossa aplicação. Nesta pasta que colocaremos nossas imagens e arquivos .css e .js.

[pre  language=”javascript”]

app.get(‘/’, function(req, res) {
     res.send(‘hello world’);
});

[/pre]

O bloco de código acima chama o método get do express. Com este método, podemos definir rotas para nossa aplicaçao. A barra entre aspas ‘/’ quer dizer que estamos definindo uma rota para a raiz (root) da aplicação. Ou seja, se nossa aplicação estivesse no endereço www.meuappnodejs.com, o conteúdo da função de callback (logo após a vírgula) seria renderizado na raiz deste site. Se tivessemos definido ‘/sobre’, o conteúdo seria renderizado no endereço www.meuappnodejs.com/sobre.

O método res.send envia uma resposta que é renderizada no navegador.

Agora, precisamos definir qual será a porta de saída que exibira a resposta de nossas requisições. Por convenção, no Node.js usamos a porta 3000, mas pode-se usar outras portas, como por exemplo, a porta 80 ou 8080. Porém, como essas portas normalmente são utilizadas pelos servidores Apache e Tomcat (respectivamente), usaremos a porta default.

[pre  language=”javascript”]

app.listen(3000);

[/pre]

A linha acima usa o método listen do express para dizer ao Express  para escutar na porta 3000. Para ficar mais fácil de identificarmos quando nosso servidor estiver online, vamos acrescentar uma função com um console.log, e uma frase dizendo que o servidor está iniciado.

[pre  language=”javascript”]

app.listen(3000, function(){
     console.log(‘Servidor iniciado’);
});

[/pre]

Agora, acesse a pasta do projeto pelo terminal ou prompt do Windows. Se você estiver usando o Visual Studio Code, basta digitar CTRL + ‘. Então, digite node app, para subir nossa aplicação.

Se a mensagem “Servidor iniciado” aparecer no terminal, então deu certo. Basta acessar o navegador e digitar o endereço localhost:3000 e a mensagem ‘hello world’ foi impressa na página.

Agora, tenho que ser sincero… Eu odeio tutoriais de Hello World, porque simplesmente não ensinam praticamente nada! Então, em vez de parar esta aula por aqui, modificaremos nossa rota para que ela renderize no navegador nossa primeira view. Assim estamos adaptando nossa aplicação ao padrão MVC.

Bem, vamos lá! Iremos modificar o método app.get. Em vez de utilizarmos o método res.send, utilizaremos o método res.render, que tem como função renderizar uma página.

Mas calma ai, Wally West. Antes, precisamos dizer para o Express que em que pasta estarão nossas views. Vamos aproveitar e chamar o módulo ejs, nosso engine de templates que já foi instalado na primeira aula. Se por acaso você não instalou os comandos da primeira aula, digite no terminal (na pasta de nossa aplicação):

npm install ejs –save

Agora sim, podemos atualizar nosso arquivo app.js. Relembrando o que faremos:

  • Utilizaremos o método set para setar nosso engine de templates (ejs);
  • Utilizaremos o método set do express para dizer em que pasta estarão nossas views;
  • Modificaremos o método get, utilizando o método .render para renderizar nossa view.

[pre  language=”javascript”]

app.set(‘view engine’, ‘ejs’); //define que o ejs é o engine de templates da aplicação
app.set(‘views’, ‘./app/views’); //define que o caminho das views de nossa aplicação
app.get(‘/’, function(req, res) {
     res.render(‘index’); //renderiza a view index.ejs na raiz da aplicação
});

[/pre]

Só tem um probleminha… se acessarmos nossa aplicação neste exato momento, veremos que a página mostra um erro canot get. Isso acontece porque não criamos a página index.ejs na pasta views, dentro da pasta app.

Normalmente esse deve ser o primeiro passo da aplicação: definir sua estrutura. A ideia era deixar o erro acontecer para entendermos a importância disso. Agora é só criar a estrutura do projeto conforme o modelo abaixo.

[pre]

– root (raiz da aplicação)
— app
 — public
 — views
  — index.ejs
— app.js
— packpage.json

[/pre]

Agora sim, rs, vai dar certo. Mas pera!!! Antes, vamos criar algum conteúdo no nosso arquivo index.ejs.

No Visual Studio Code, acesse o último item do menu lateral esquerdo, onde instalaremos a extensão do HTML5. Agora, digite HTML5 no campo que aparecerá no início da tela. Escolha a opção HTML Snippets clicando em install. O software pedirá para você dar reload na tela. Vai sem medo!

Agora, acesse o arquivo index.ejs. Nele, digite html. A opção HTML5 aparecerá para você, basta clicar nela e pronto! Temos um template básico pronto para ser editado. Dentro das tags Body, digite o seguinte conteúdo:

[pre]

<h1>Home</h1>
<p>Hello World</p>
 
[/pre]
 
Agora, para testar se  o método express.static está mesmo funcionando, crie uma pasta dentro de app -> public com o nome de css. Dentro desta pastad, crie um arquivo com o nome de style.css. Neste arquivo, digite o código abaixo:
 

[pre]

h1{color:red;}
p{color:blue;}

 
[/pre]
 
Pare sua aplicação no terminal digitando CTRL + C. Em seguida, digite node app novamente. Se sua página estiver como a página abaixo, tudo correu perfeitamente.
 
 
Agora, só para terminar, criaremos mais uma rota. Copie o conteúdo do arquivo index.ejs para um novo arquivo chamado sobre.ejs. Substitua o conteúdo do h1 de Home para Sobre. Por último, acrescente mais um método get no arquivo app.js.
 
[pre]
 
app.get(‘/sobre’, function(req, res) {
res.render(‘sobre’);
});
[/pre]
 
 
Agora, o arquivo app.js completo.
 
[pre]
 
var express = require(‘express’);
var app = express();
app.use(express.static(‘./app/public’));
app.set(‘view engine’, ‘ejs’);
app.set(‘views’, ‘./app/views’);
app.get(‘/’, function(req, res) {
   res.render(‘index’);
});
app.get(‘/sobre’, function(req, res) {
   res.render(‘sobre’);
});
app.listen(3000, function(){
   console.log(‘Servidor iniciado’);
});
 
[/pre]
 
Espero que tenham gostado. Dúvidas e sugestões é só comentar!
 
Até a próxima!

Salvar

Salvar

Salvar

Deixe uma resposta

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