INSTITUTO FEDERAL DE ALAGOAS – IFAL / CAMPUS MACEIÓ

Curso Técnico em Desenvolvimento de Sistemas

Disciplina de Programação Web 2
Prof. MSc. Ricardo Nunes
Ricardo (arroba) ifal.edu.br

Express.js
Problema
Programar utilizando apenas a API (Application Programming Interface) HTTP nativa é muito trabalhoso!

Solução
Expressjs - http://expressjs.com.

Características
MVR (Model-View-Routes)
MVC (Model-View-Controller)
Roteamento de URLs via callbacks
Middleware
Interface RESTFul
Suporte a File Uploads
Configuração baseado em variáveis de ambiente
Suporte a helpers dinâmicos
Integração com Template Engines
Integração com SQL e NoSQL

Instalação
npm install -g express
npm install -g express-generator

Ajuda
express -h

Descrição do Projeto (1)

Agenda de Contatos
Requisitos
O usuário deve criar, editar ou excluir um contato
O usuário deve se logar informando seu nome e e-mail
O usuário deve conectar ou desconectar no chat
O usuário deve enviar e receber mensagens no chat somente entre os contatos online

Descrição do Projeto (2)

O nome do projeto será Ntalk (Node talk) e serão utilizadas as seguintes tecnologias:
Node.js: back-end do projeto;
 MongoDB: banco de dados NoSQL orientado a documentos;
MongooseJS: ODM (Object Data Mapper) MongoDB para Node.js;
Redis: banco de dados NoSQL para estruturas de chave-valor;
Express: framework para aplicações web;
Socket.IO: módulo para comunicação real-time;
Node Redis: cliente Redis para Node.js;
EJS: template engine para implementação de HTML dinâmico;
Mocha: framework para testes automatizados;
SuperTest: módulo para emular requisições que será utilizado no teste de integração;
Nginx: servidor web de alta performance para arquivos estáticos.

Configuradando
express NOME_PROJETO --ejs
cd NOME_PROJETO
npm install

estrutura de diretórios
package.json: contém as principais informações sobre a aplicação, como nome, autor, versão, colaboradores, URL,
dependências e muito mais
public: pasta pública que armazena conteúdo estático, por exemplo, imagens, CSS, JavaScript etc.
app.js: arquivo que inicializa o servidor do projeto, através do comando node app.js
routes: diretório que mantém todas as rotas da aplicação
views: diretório que contém todas as views que são renderizadas pelas rotas
bin: diretório com um arquivo que permite iniciar a aplicação via linha de comando

atualize package.json
remover módulos que não serão utilizados: morgan, debug e static-favicon,
npm remove debug static-favicon morgan --save
dependências:

"dependencies": {
"express": "> 4.2.0",
"cookie-parser": "> 1.0.1",
"body-parser": "> 1.0.0",
"ejs": "> 0.8.5"
}

npm update --latest --save

atualize app.js (1)

 //arquivo: app-01.js

var express = require("express"); //#1

var routes = require("./routes/index");
var users = require("./routes/users");
var path = require("path");

var app = express(); //#2

// view engine setup

app.set("views", path.join(__dirname, "views")); //#3
app.set("view engine", "ejs");

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

app.use("/", routes); //#4

app.use("/usuarios", users);

app.listen(3000, function () { //#5

console.log("servidor rodando");
});

atualize app.js (2)

#1 'habilita' as funcionalidades do framework express
#2 executa o servidor, tal qual http.listen()

Middlewares
#3 app.set(chave, valor) - map com configurações do servidor, por exemplo, middlewares.
middleware 1: template engine EJS #3
middleware 2: servidor de arquivos estáticos

Rotas
Duas rotas foram configuradas "/" e "/usuarios" #4 a partir das variáveis routes e users

Diretorios do projeto
Utilizando o modelo MVC - Model-View-Controller

└── projeto
├── controllers
├── models
├── node_modules
├── public
│ ├── css
│ ├── images
│ ├── js
├── routes
├── views
├── app.js
├── package.json
├── package-lock.json
└── .gitignore

Injeção de Módulos
Um problema comum:
Cada controller , quando for utilizar os models , realizará uma chamada a função require('/models/nome-do-
model');
 Em controllers , ou qualquer outro código, diversas chamadas à função require serão realizadas, e isso pode gerar
uma poluição carregamento de módulos em um código.
Solução
plugin express-load responsável por mapear diretórios para carregar e injetar módulos dentro de uma variável que
definirmos na função load('módulos').into(app)
npm install express-load --save

Refatorando app.js (1)

//arquivo: app-02.js
var express = require("express");
var load = require('express-load')
var path = require("path");
var app = express();

/* Codigo Removido:
var routes = require("./routes/index");
var users = require("./routes/users");
var path = require("path"); */

// view engine setup

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

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

//codigo adicionado
load('models')
.then('controllers')
.then('routes')
.into(app);

app.listen(3000, function () {
console.log("servidor rodando");
});

Refatorando app.js (2)

Importante: os models são carregados primeiro, para que os controllers possam usá-las e, por último, os routes usarem
toda lógica de seus controllers.

Atualizando as rotas
exclua os arquivos routes/user.js e routes/index.js
adicionar o arquivo routes/home.js

//arquivo: routes/home.js
module.exports = function (app) {
var home = app.controllers.home; // #1
app.get("/", home.index);
};

Adicionando os controladores
app possui a propriedade controllers devido ao express-load
app.controllers.home aponta para controllers/home.js
 //arquivo: controllers/home.js

module.exports = function (app) {

var HomeController = {
index: function (req, res) {
res.render("home/index");
},
};
return HomeController;
};

Adicionando os viewers
Exclua o arquivo views/index.ejs que foi criado pelo express-generator
Crie o arquivo views/home/index.ejs
Formulário HTML com os campos nome e email

<!--arquivo: /views/home/index.ejs-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PWeb2 - Agenda de contatos</title>
</head>
<body>
<header>
<h1>PWeb2 - Agenda online</h1>
<h4>Bem-vindo!</h4>
</header>
<section>
<form action="/entrar" method="post">
<input type="text" name="usuario[nome]" placeholder="Nome" />
<br />
<input type="text" name="usuario[email]" placeholder="E-mail" />
<br />
<button type="submit">Entrar</button>
</form>
</section>
<footer>
<small>PWeb2 - Agenda de contatos</small>
</footer>
</body>
</html>

Rode o projeto

Referências
Capítulo 4. Pereira, C. R. Node.js: Aplicações web real-time com Node.js. Casa do Código.

That's all Folks