Iniciando com NodeJS
De dtdsouza
Node.js é uma cross-platform JavaScript run-time environment, ou seja, um interpretador Javascript focado em migrar o mesmo para o server-side esse que era usado apenas client-side, em que client-side seria teu navegador na sua máquina seja ela qual for, e server-side seria o que está rodando diretamente no servidor.
Através dessa ferramenta podemos usar o Javascript para desenvolver server-side scripts e executando esses scripts produzir aplicações web dinâmicas e responsivas.
Esse post é destinado à aqueles que não possuem conhecimento prévio, mas são curiosos e querem entender como funciona esse universo ou quem sabe se gostar pesquisar mais. O único pré-requisito é ter o Node.js instalado na sua máquina, se não o tem não se preocupe nesse link tem um tutorial de como instalar essa ferramenta e os pacotes extras na sua máquina: "Como instalar Node.js (Win/Linux)".
Executando JS com Node
Pra começar irei fazer uma simples e breve demonstração da execução de arquivos JS no node. Para isso crie uma pasta com um nome qualquer e crie um arquivo com extensão ".js" (ex: teste.txt). OBS: recomendo utilização de um editor de texto mais completo eu particularmente uso o sublime.
Após Criado vamos editar o arquivo js colocando o seguinte comando:
console.log("Texto de sua escolha");
Após isso abra seu prompt/shell entre no diretório e execute com o comando:
node teste.js
Este é o resultado esperado. "console.log();" nada mais é do que um comando para escrever uma mensagem no seu console, simples né, vamos avançando.
Respondendo requisições http
"HTTP" Hypertext Transfer Protocol, é apenas um nome bonito para protocolo de transferência de aplicações, ou seja é a base da comunicação na internet funcionando através de requisições e respostas.
para isso nesse arquivo criado (test.js) iremos escrever:
var http = require('http');
var server = http.createServer( function(req, res){
res.end("<html><body>Melhor Blog Tech: CodingEggs mentira!!!hahaha</body></html>");
}
);
server.listen(3000);
Primeiro criamos uma varável "http" (poderia ser outro nome) e esta recebe uma requisição do tipo http, após isso crio uma variavel "server" que recebe a criação do server (.createServer) e este atua através de uma função de requisições e respostas a implementação da resposta vem com a próxima linha em que res.end(CÓDIGO HTML); vai retornar a página web na qual o código html for inserido e por último temos "http.liste(3000)" que é a porta em que o server estará esperando que venha as requisições.
Para ver o resultado basta executar seu .js mais uma vez com node no terminal abrir um navegador e inserir localhost:3000.
Este seria o resultado obtido.
OBS: Para fechar o teu servidor basta utilizar o atalho "ctrl + c", que na imagem a cima está representado por ^C que é o resultado do atalho.
Agora simulando um servidor com mais ramificações (outras páginas) podemos utilizar a seguinte estrutura:
var http = require('http');
var server = http.createServer( function(req, res){
var categoria = req.url;
if(categoria == "/tecnologia")
res.end("<html><body>Melhor Blog Tech: CodingEggsmentira!!!hahaha</body></html>");
else if (categoria == "/noticias")
res.end("<html><body>Melhor Blog de Noticias: CodingEggsmentira!!!hahaha</body></html>");
else
res.end("<html><body>Melhor Blog Tech: CodingEggsmentira!!!hahaha</body></html>");
}
);
server.listen(3000);
A única diferença desse código para o anterior é que agora estou verificando qual a url da requisição ou seja a ramificação que ele quer acessar por exemplo: em "https://www.facebook.com/zuck" a ramificação seria "/zuck". Sabendo a ramificação podemos escolher qual página enviar como resposta. No caso do código a página de tecnologia e noticias.
Para ver o resultado execute o .js no terminal (se o outro estiver executando cancele com ctrl + c) e abra o navegador nos endereços que deseja.
Agora acessamos diferentes páginas diante de diferentes requisições.
Iniciando npm ao projeto
Afim de maior produtividade e facilidade vamos integrar o npm ao projeto para isso você deve ter ele instalado (link). Com o npm já instalado vá até a pasta do seu projeto através do prompt/terminal e digite:
npm init
Assim que precionar o enter o comando será executado e pedirá que edite alguns parâmetros, a princípio não iremos mexer, manteremos o padrão alterando apenas a sua descrição e autor. Ao final do comando ele pedira uma confirmação "yes" e criará um arquivo no seu projeto como podem ver ao fundo da imagem abaixo:
Usando Express:
Express.js ou simplesmente Express é um web aplication framework também open-source com o objetivo de facilitar sua vida na hora de programar, antes de tudo vamos instala-lo em sua máquina, logo após inicializar o npm digite:
npm install express --save
OBS: o "--save" é responsável por trazer de fato todo o módulo para nosso projeto, isso é bom principalmente caso tu queira compartilhar código.
Após o comando executar teremos a pasta com todo o módulo e mais um arquivo adicionado ("package-lock.json").
Refatorando o projeto com Express
Agora chegou a hora de usar essa nova ferramenta, para isso criaremos um novo arquivo que darei o nome de app.js, iremos substituir o que era uma requisição 'http' agora por uma 'express' "require('express')" retorna uma função, mas não a executa para isso na seguinte linha em uma outra variavel faço a execução da função retornada essas duas linhas poderiam ser substituida por "var express = require('express')();", onde já executo a função quando instancia.
var express = require('express');
var app = express();
app.get('/',function(req,res){
res.send('<html><body><h1>Melhor Blog Tech: CodingEggs</h1>mentira!!!hahaha</body></html>');
}
);
app.get('/tecnologia',function(req,res){
res.send('<html><body><h1>Melhor Blog Tech: CodingEggs</h1>mentira!!!hahaha</body></html>');
}
);
app.get('/noticias',function(req,res){
res.send('<html><body><h1>Melhor Blog de Noticias: CodingEggs</h1>mentira!!!hahaha</body></html>');
}
);
app.listen(3000, function(){
console.log("Server online...\n");
}
);
Nesse código eu pego a url através dos "app.get()", em que o primeiro parâmetro é a url passada pela requisição, repare como o código fica mais organizado quando usamos o express, caso insira uma nova url basta inserir um novo "app.get()".
O resultado esperado seria:
OBS:lembre-se caso queira acessar outra url basta mudar sua requisição no navegador.
Integrando EJS
EJS ( Embedded JavaScript templates ) é simplesmente uma engine de visualização, ele existe com o intuito de facilitar o transporte de dados do back-end para o front, e com ele poderemos tirar todo aquele html que vinha interno aos nossos códigos (teste.js , app.js). Antes de tudo iremos instala-lo, para isso escreva o seguinte comando no terminal:
npm install ejs --save
OBS: lembrando que você deve estar dentro do diretório do seu projeto e o "--save" é usado para manter os arquivos internos ao projeto para facilitar no compartilhamento do código.
Após instalados chegou a hora de justificar o porquê de seu uso, para isso voltaremos ao projetos e antes de tudo criaremos uma nova pasta dentro do projeto responsavel por armazenar sua páginas html (eu escolhi o nome 'pages'),depois disso com o seguinte código (explicado abaixo):
var express = require('express');
var app = express();
app.set('view engine','ejs');
app.get('/',function(req,res){
res.render('pages/home.ejs');
}
);
app.get('/tecnologia',function(req,res){
res.render('pages/tech.ejs');
}
);
app.get('/noticias',function(req,res){
res.render('pages/noticias.ejs');
}
);
app.listen(3000, function(){
console.log("Server online...\n");
}
);
OBS: Seus arquivos "html" devem estar salvos com a extensão ".ejs".
Primeiro precisaremos dizer para o código que estamos usando o "EJS" e para isso o app.set(), em que passo como parâmetro o que estou atribuindo (setando, no caso uma engine de views) e depois qual estou usando. Após isso posso agora mudar meu código html no interior do código pelo caminho, em que esse html está salvo, para isso mudar res.send() para res.render().
Nodemon e produtividade
Por último mas não menos importante instalaremos o nodemon uma ferramenta focada em produtividade na hora da codificação, ela consiste em toda hora em que tu modificar de código fonte e salva-lo o server será resetado suas alterações aplicadas instantaneamente
Para a instalação:
sudo npm install -g nodemon --save
Para rodar o server:
nodemon app.js
Foi algo bem simples mas o inicio de algo que pode crescer de forma exponencial, se você gostou teremos aqui mais material sobre o assunto no blog basta procurar nos marcadores do blog (barra lateral esquerda) por curso, Nodejs, programação ou algo relacionado ao que deseja. Não esqueça de deixar um comentário mesmo que seja uma crítica, não somos profissionais mas queremos trazer um conteúdo relevante.
Obrigado por ler e até mais, segue código usado neste post.
Autor: dtdsouza
Comentários
Postar um comentário