WebDev
Back-end
Aula 8
Introdução ao back-end e ao NodeJS
USPCodeLab
Facebook:
Este trabalho do USPCodeLab está licenciado com uma Licença Creative Commons - Atribuição 4.0 Internacional
O USPCodeLab é um grupo de extensão que tem como objetivo estimular a inovação tecnológica na USP
Relembrando WEB
FRONTEND
BACKEND
requisição
resposta
O que é back-end?
HyperText Transfer Protocol
- Protocolo baseado em pedido-resposta (modelo cliente-servidor)
- Permite obter recursos, como documentos HTML, imagens, vídeos, etc.
- Recursos identificados por URLs
Protocolo HTTP
FRONT-END
BACK-END
requisição
Protocolo HTTP
GET
POST
PUT / PATCH
DELETE
ler dados
inserir dados
atualizar dados
excluir dados
Verbos HTTP
FRONT-END
BACK-END
requisição
Protocolo HTTP
Exemplo de pedido
Método/Verbo
URL
Versão do protocolo
Cabeçalhos
Corpo
POST /users HTTP/1.1
Host: example.com
Content-Type: application/json
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:90.0) Gecko/20100101 Firefox/90.0
{"name": "John", "email": "john@example.com"}let promise = fetch(url, {options})Lembra do fetch?
FRONT-END
BACK-END
resposta
100's
200's
300's
400's
informativo [recebido e trabalhando]
sucesso [recebido, entendido e aceito]
redirecionamento [ação necessária]
erro de cliente
Códigos HTTP
(famílias)
500's
erro de servidor
Protocolo HTTP
FRONT-END
BACK-END
resposta
FRONT-END
BACK-END
Exemplo de resposta
Método/Verbo
URL
Versão do protocolo
Cabeçalhos
Corpo
POST /users HTTP/1.1
HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 155
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
{"status": "ok"}Protocolo HTTP
Como usar o NodeJS?
1. Instalar o NodeJS e o npm
Como usar o NodeJS?
2. npm init
{
"name": "node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
package.json
Como usar o NodeJS?
3. instalar o express com `npm install express` importa-lo e ligar a uma porta
const express = require('express')
const app = express();
// código...
app.listen(<PORTA>, () => {
// função de callback para rodar o servidor
})PRONTO!!! Seu servidor já está funcionando🥳🥳🥳
E você pode acessa-lo pelo localhost:<PORTA>
4. rodar `node index.js`
Tarefa
Crie um servidor para uma aplicação de aplicativo de To Do, nele você deve conseguir fazer requisições para receber todos os itens, para adicionar, editar ou deletar um item (lembrem de usar todos os verbos).
Nosso projeto final será uma aplicação front que faz uso desse servidor
(só na semana que vem)
WebDev