WebDev

Back-end

Aula 8

Introdução ao back-end e ao NodeJS

USPCodeLab

Facebook:

https://facebook.com/uspcodelab/

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

Site:

https://codelab.ime.usp.br/

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

lista completa

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

Vamos testar

Como usar o NodeJS?

1. Instalar o NodeJS e o npm

Download

via gerenciador de pacotes

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`

Documentação

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

Obrigado pelo semestre,

se cuidem.

Copy of WebDev 2022 - Aula 8: Back-end

By codelab@ime.usp.br

Made with Slides.com

Copy of WebDev 2022 - Aula 8: Back-end

  • 185

More from codelab@ime.usp.br