RANDY QUINDAI

CÓDIGOS DE ALTA
PERFORMANCE
WEB
Desenvolvimento Web
CONTEÚDO PROGRAMÁTICO

INTRODUÇÃO AMBIENTE DE
Visão Geral da WEB PRODUÇÃO
Protocolo HTTP
Servidores de página WEB
WEB [1, 2, 3]
Configurando o NGINX
Programando a WEB

FRAMEWORKS PROJETO
ReactJS Design UX/UI
ExpressJS (NodeJS) Responsividade
Flutter Banco de Dados
Django (Python) API
Play (Java) 3 de 4
CALENDÁRIO ACADÊMICO
Carnaval Semana Santa
20 a 21 Fev 07 a 08 Mar

Feriado
Avaliação 1
Tiradentes
12 a 18 Abr
21 Abr

Oficinas
Avaliação 2
Profissionalizantes
12 a 18 Jun
24 a 28 Abr
AVALIAÇÃO
Prova 1 Prova 2
Projeto Projeto

1. Conectar o seu banco de dados

2. Implementar os endpoints iniciais
3. Adicionar Logging num arquivo LOGGING.log, deve constar no .ignore também.
4. Endpoint Root (/) apontar para o Swagger como ponto de entrada.
5. README.md
a. Endpoints
4. (+)artefatos (issues, kanban board, milestones)

Entrega 13/03/2023
RECURSOS

LEITURA RECOMENDADA FOLHA DE COMANDOS

Mozilla Beginners' Guide Command Line Cheat Sheet

CodeAcademy Tutorials Git Commands Cheat Sheet
Google Web Fundamentals Git Commands Cheat Sheet pt. 2
Mozilla Guides, Tutorials and Documentation Intro to Frontend JS Cheat Sheet
W3Schools Documentation Intro to MongoDB Cheat Sheet
HTTP History

CURSOS ONLINE

Deep Dive into Modern Web Development

Design and Implementation of Software for the
web
Web Security/Stanford
Curriculum Microsoft para desenvolvimento Web
CONTEÚDO PROGRAMÁTICO

Node.js em modules
Routing com Express
Banco de Dados
 LEITURA
RECOMENDADA
Express documentação
Conectando diferentes bancos de dados com Express
Capítulos 10, 14 e 20 do livro texto
Repositório de modules disponível no npm
Como 17 linhas de código quase quebraram a internet

Artigos científicos:
Fard, Amin Milani, and Ali Mesbah. JSNose: Detecting javascript code smells. 13th International
Working Conference on Source Code Analysis and Manipulation (SCAM). IEEE, 2013.
Nasehi, Seyed Mehdi, et al. What makes a good code example?: A study of programming Q&A in
StackOverflow. 28th IEEE International Conference on Software Maintenance (ICSM). IEEE, 2012.
MÓDULOS EM NODE.JS

Cada arquivo .js é considerado um módulo, ou uma pasta com arquivos

dependentes.
Para obtermos o mesmo efeito no FrontEnd precisamos de muito mais trabalho.
Para ver como o módulo é definido internamente inicialize o REPL (insira somente
node no terminal, de seguida console.log(module).
Uma aplicação usa a função require() para importar um module.
require() é bloqueante
MÓDULOS EM NODE.JS

Todo arquivo Node.js tem acesso ao module.exports.

Um module pode conter outros modules, é para isso que serve o require().
Módulos permitem a expansão da aplicação sem aumentar a complexidade.
Express é um module middleware que permite criar servidores de API de forma
simplificada.
Middleware Express possui 3 parâmetros
Objeto de requisição HTTP (req)
Objeto de resposta HTTP (res)
Uma função de callback opcional (next)
 ROTEAMENTO EM NODE.JS

Strings
Rotas definidas como conjunto de caracteres.
String patterns
Conjunto de caracteres e subconjunto de meta-caracteres regex: + ? * [] ()
Regular expressions
Expressões regulares padrão e delimitadas com / / ou ' '
Saiba mais sobre expressões regulares no Express aqui

CHAR DESCRIÇÃO REGEX EXPRESSÕES DE MATC H

+ Uma ou mais ocorrências ab+cd abcd, abbcd, abbbcd, ...
? Zero ou uma ocorrência ab?cd acd, abcd
* Zero ou mais ocorrências ab*cd abcd, ab1232dsscd, ...
[...] Qualquer um dos caracteres dentro ab[cd]?e abe, abce, abde
(...) Limitador ab(cd)?e abe, abcde
AMBIENTE DE PROGRAMAÇÃO

Certifique-se que você o Git instalado

git --version
Verifique se o nodejs está instalado e configurado
node --version
npm --version
Preparar o VSCode
Instalar a extensão alexcvzz.vscode-sqlite para visualização dos
dados em SQLite
LETS CODE!
CODING SESSION

Navegue até a pasta home do seu usuário

Crie uma nova pasta curso_web_nassau. Todos os códigos
subsequentes deverão ser armazenados nessa pasta.
No VScode navegue até o menu Terminal->Novo Terminal
Crie uma nova pasta intro_express
Navegue até essa pasta no terminal aberto e inicie um novo projeto
node:
npm init
Preencha as informações solicitadas no prompt
Instale o Express
npm i --save express
No item main inserir server.js
 CODING SESSION

server.js
Criação do servidor express:
app = express()
Definição de uma porta local:
PORT = 8000
Inicializa o servidor web na porta PORT:
app.listen(...)
Criação do endpoint raiz
app.get('/', ...)
Resposta padrão para qualquer outra rota
não definida:
app.use((req, res)=> ...)
 CODING SESSION

Execute rodando
npm start

Observe que o node executa um

comando para inicializar o servidor de
forma automática.

Esse arquivo de inicialização é definido no

arquivo package.json.

O script start pode apontar para qualquer

script definido no package.json.
 CODING SESSION

ADICIONANDO UM
BANCO DE DADOS

Instale o sqlite
npm i --save sqlite3
Crie um novo arquivo
database.js
 CODING SESSION
DEFINIÇÃO DOS ENDPOINTS

OPERAÇÃO MÉTODO HTTP ENDPOINT

Retorna list de usuários GET /api/users/
Retorna um usuário pelo id GET /api/users/{id}
Cria um usuário POST /api/users/
Atualiza um usuário PATCH /api/users/{id}
Deleta um usuário pelo id DELETE /api/users/{id}
 CODING SESSION
LISTA DE USUÁRIOS

Criação do endpoint
app.get("/api/users/, ....")
Requisição no banco de dados
db.all(sql, params, ...)
Retorno em formato json
res.json({ chave: valor })

Para testar, use o Postman ou curl:

curl http://localhost:8000/api/users/
 CODING SESSION
RESGATA USUÁRIO PELO ID
Criação do endpoint
app.get("/api/users/:id, ....")
Parâmetro da query sql ?
sql = SQL STMT = ?
Requisição no banco de dados
db.get(sql, params, ...)
Retorno em formato json
res.json({ chave: valor })
 CODING SESSION
CRIA NOVO USUÁRIO

Criação do endpoint
app.post("/api/users/, ....")

Para testar, use o Postman ou curl:

curl -X POST
http://localhost:8000/api/users -H
'Content-Type: application/json' -d
'{"name":"randy","password":"my_password",
"email":"011010902@prof.uninassau"}'
 CODING SESSION
CRIA NOVO USUÁRIO

Criação do endpoint
app.post("/api/users/, ....")

Para testar, use o Postman ou curl:

curl -X POST
http://localhost:8000/api/users -H
'Content-Type: application/json' -d
'{"name":"randy","password":"my_password",
"email":"011010902@prof.uninassau"}'
 CODING SESSION
ATUALIZAR UM USUÁRI O

Criação do endpoint
app.patch("/api/users/, ....")

Para testar, use o Postman ou curl:

curl -X PATCH
http://localhost:8000/api/users/2 -H
'Content-Type: application/json' -d
'{"name":"randy","password":"my_password"}'
 CODING SESSION
DELETAR UM USUÁRIO

Criação do endpoint
app.delete("/api/users/, ....")

Para testar, use o Postman ou curl:

curl -X DELETE
http://localhost:8000/api/users/3
 CODING SESSION
LOGGING

Criação do endpoint
app.delete("/api/users/, ....")