(Em alguns momentos, posso parecer repetitivo ou mencionar coisas que você já sabe, mas isso é porque o tutorial foi feito para ser acessível a todos, mesmo para os novatos mais leigos.) AVISO: O Codespace pode ser um pouco lento às vezes, então não se preocupe se algo não funcionar de imediato. Tenha paciência, pois geralmente melhora em alguns minutos.
nós vamos usar o codespace do github. a essa altura do campeonato, você já deve saber criar um repositório no github, certo?. enfim, crie um repositório publico e com readme. depois vamos criar o codespace.
pronto, agora vá para o seu perfil e abra o repositório, logo em seguida selecione o botão code e logo em seguida abra sua main (ali onde eu deixei destacado na imagem)
se você veio parar aqui através do tutorial de autenticação com CRUD, não use esses comandos no terminal. apenas ignore e vá para o tópico 2.
abra o terminal (ctrl + ' ) e execute os comandos abaixo. não se preocupe, pode executar tudo de uma vez!
npm init -y
npm install express cors sqlite3 sqlite
npm install --save-dev typescript nodemon ts-node @types/express @types/cors
npx tsc --init
mkdir src
touch src/app.ts
todos os comandos vão rodar automaticamente quando você pressionar enter, menos o touch src/app.ts então só aperte enter de novo quando os comandos anteriores terminarem.
Mude a linha "outDir": "./" para "outDir": "./dist" e adicione embaixo a linha "rootDir": "./src": seu código deve ficar assim:
"dev": "npx nodemon src/app.ts"
import express from 'express';
import cors from 'cors';
const port = 3333;
const app = express();
app.use(cors());
app.use(express.json());
app.get('/', (req, res) => {
res.send('Hello World');
});
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
Primeiro, instale a biblioteca REST Client; pesquise REST client na aba de extensões e aguarde a instalação.
npm run dev
logo ao executar o comando, aparecerá uma aba no canto inferior direito. você deve selecionar a opção Abrir no navegador. E se você não tiver feito nenhuma cagada verá a mensagem Hello World. para evitarmos dor de cabeça, não feche a aba do navegador.
caso tenha sido teimoso e fechou a aba, para abrir basta abrir o terminal Ctrl + ', ir até a aba de portas arrastar o cursor do mouse e apertar no botão de um globo (o ícone só aparece quando o mouse estiver em cima!). como na imagem abaixo:
Vá até a pasta src e crie um arquivo nomeado de database.ts e adicione o seguinte código no arquivo que você criou:
import { Database, open } from 'sqlite';
import sqlite3 from 'sqlite3';
let instance: Database | null = null;
export async function connect() {
if (instance) return instance;
const db = await open({
filename: './src/database.sqlite',
driver: sqlite3.Database
});
await db.exec(`
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT,
email TEXT
)
`);
instance = db;
return db;
}
No arquivo da pasta src vá até o arquivo app.ts e simplesmente apague todo o código do arquivo para o substituir por esse:
import express from 'express';
import cors from 'cors';
import { connect } from './database';
const port = 3333;
const app = express();
app.use(cors());
app.use(express.json());
app.get('/', (req, res) => {
res.send('Hello World');
});
app.post('/users', async (req, res) => {
const db = await connect();
const { name, email } = req.body;
const result = await db.run('INSERT INTO users (name, email) VALUES (?, ?)', [name, email]);
const user = await db.get('SELECT * FROM users WHERE id = ?', [result.lastID]);
res.json(user);
});
app.get('/users', async (req, res) => {
const db = await connect();
const users = await db.all('SELECT * FROM users');
res.json(users);
});
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
POST http://localhost:3333/users HTTP/1.1
Content-Type: application/json
{
"name": "fulaninho beltrano",
"email": "literalmentequaluqerbosta@gmail.com"
}
9.listando o usuário: ❗⚠️ ATENÇÃO⚠️ ❗ se você veio do tutorial de CRUD, ignore esse tópico e vá para o 10,
vá até a pasta src no arquivo app.ts e insira a rota /users ao servidor. deve ficar igual a imagem abaixo:
app.get('/users', async (req, res) => {
const db = await connect();
const users = await db.all('SELECT * FROM users');
res.json(users);
});```
deve ficar assim:
app.put('/users/:id', async (req, res) => {
try {
const db = await connect();
const { name, email } = req.body;
const { id } = req.params;
if (!name || !email) {
return res.status(400).json({ error: 'Name and email are required' });
}
const result = await db.run('UPDATE users SET name = ?, email = ? WHERE id = ?', [name, email, id]);
if (result.changes === 0) {
return res.status(404).json({ error: 'User not found' });
}
const user = await db.get('SELECT * FROM users WHERE id = ?', [id]);
res.json(user);
} catch (error) {
res.status(500).json({ error: 'Internal server error' });
}
});
app.delete('/users/:id', async (req, res) => {
try {
const db = await connect();
const { id } = req.params;
const result = await db.run('DELETE FROM users WHERE id = ?', [id]);
if (result.changes === 0) {
return res.status(404).json({ error: 'User not found' });
}
} catch (error) {
}
});
se tudo ocorrer certo, você será capaz de postar,editar e deletar os usuários. siga os passos abaixo, mas antes de tudo, vamos iniciar o servidor:
no terminal (ctrl + ') digite npm run dev e aperte enter (sim, já fizemos isso mas o servidor pode fechar coom o tempo.)
1.1 para entender se você fez tudo certo, precisamos testar se o seu usuario está sendo inserido como deveria. primeiro, aperte o botão Send Request logo em cima de POST veja a imagem acima e poste seu primeiro usuário. ✔
1.2 Agora, voltamos para o navegador e ao final da requisição https iremos adicionar /users e apertar enter:
1.3 e pronto! seu usuário deve ter sido postado (provavelmente com um nome e email diferentes do meu) assim:
1.4 para adicionar o método PUT ao código, basta colar esse código logo abaixo do método POST no restclient.http
####
put http://localhost:3333/users/1 HTTP/1.1
Content-Type: application/json
{
"name": "edite como quiser",
"email": "editecomoquiserr@gmail.com"
}
####
1.5 para adicionar o método DELETE ao código, basta fazer o mesmo e colar esse código abaixo do anterior.
delete http://localhost:3333/users/1 HTTP/1.1
Content-Type: application/json
1.5 finalmente, seu restclient.http deve estar assim: ✔ (exceto os comentários. só coloquei na imagem para você entender)
1.6 por fim, precisamos entender como funciona e como usar o PUT e o delete é bem simples, basicamente os dois funcionam da mesma forma em sua base. na primeira linha das funções temos a requisição http, para modificar um usuario devemos fazer isso:
destaquei o /1 pq é a peça chave para modificar e deletar usuários. basicamente você altera o ID do usuário (/1 , /2 , /3...) simplesmente fazendo isso. se quiser alterar o usuario de ID 3 vai mudar http://localhost:3333/users para http://localhost:3333/users/3 e nos campos de nome e email alterar o que for necessário. no meu caso, vou modificar o usuario de ID 6.
agora, para fazer a alteração, modifique o ID e o nome e email para testar. quando tudo estiver modificado como deveria, aperte o botão de Send Request:
1.7 para deletar usuarios é a mesma coisa, a diferença é que você precisa informar apenas o ID do usuario. vou apagar o usuario 6 que acabamos de criar.
então, isso tudo foi só para testar a inserção e manipulação de dados. agora que toda a base está pronta, só falta fazermos a parte visual do site.
11 agora vamos fazer a parte visual do nosso site! ATENÇÃo, se você veio do tutorial de CRUD, a pasta e os arquivos já estão criados. se não, crie uma pasta chamada public (deve ser uma pasta isolada, não vai estar dentro de outra.) dentro dessa nova pasta, crie o arquivo index.html e adicione o seguinte código a ele:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: 'Courier New', monospace;
background-color: #0d0d0d;
color: #ff4d4d;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-image: url('https://i.gifer.com/76cI.gif');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
form {
background-color: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(255, 77, 77, 0.6);
margin-bottom: 30px;
width: 300px;
display: flex;
flex-direction: column;
gap: 10px;
}
input[type="text"], input[type="email"] {
padding: 10px;
border: 1px solid #ff4d4d;
border-radius: 4px;
font-size: 14px;
background-color: #1a1a1a;
color: #ff4d4d;
}
button[type="submit"] {
background-color: #ff4d4d;
color: white;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #cc0000;
}
table {
width: 100%;
max-width: 800px;
border-collapse: collapse;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 8px;
box-shadow: 0 0 15px rgba(255, 77, 77, 0.6);
color: #ff4d4d;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ff4d4d;
}
th {
background-color: #1a1a1a;
}
tbody tr:hover {
background-color: #262626;
}
.excluir, .editar {
background-color: #ff3333;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.editar {
background-color: #ff6600;
}
.excluir:hover {
background-color: #b30000;
}
.editar:hover {
background-color: #cc5200;
}
</style>
</head>
<body>
<form>
<input type="text" name="name" placeholder="Nome">
<input type="email" name="email" placeholder="Email">
<button type="submit">Cadastrar</button>
</form>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<!-- -->
</tbody>
</table>
<script>
//
const form = document.querySelector('form')
form.addEventListener('submit', async (event) => {
event.preventDefault()
const name = form.name.value
const email = form.email.value
await fetch('/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, email })
})
form.reset()
fetchData()
})
//
const tbody = document.querySelector('tbody')
async function fetchData() {
const resp = await fetch('/users')
const data = await resp.json()
tbody.innerHTML = ''
data.forEach(user => {
const tr = document.createElement('tr')
tr.innerHTML = `
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.email}</td>
<td>
<button class="excluir">Excluir</button>
<button class="editar">Editar</button>
</td>
`
const btExcluir = tr.querySelector('button.excluir')
const btEditar = tr.querySelector('button.editar')
btExcluir.addEventListener('click', async () => {
await fetch(`/users/${user.id}`, { method: 'DELETE' })
tr.remove()
})
btEditar.addEventListener('click', async () => {
const name = prompt('Novo nome:', user.name)
const email = prompt('Novo email:', user.email)
await fetch(`/users/${user.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, email })
})
fetchData()
})
tbody.appendChild(tr)
})
}
fetchData()
</script>
</body>
</html>
12. agora, a única coisa que precisamos fazer é adicionar a seguinte linha ao arquivo app.ts da pasta src logo onde mostro na imagem abaixo.
app.use(express.static(__dirname + '/../public'))
13. agora é só testar. vá ao terminal como se fosse digitar algo e de o comando Ctrl + c para parar o servidor. depois, basta colar o comando npm run dev no terminal e executar. bom, não vou colocar imagens do site pronto... veja você mesmo.
node_modules/
dist/
database.sqlite/
e pronto. só precisamos adicionar, comitar e subir as mudanças feitas para o GitHub. primeiro de tudo, abra o terminal e use Ctrl + c para fechar o nosso servidor web e copie, cole e dê enter nesse script abaixo no terminal. tudo de uma vez mesmo, quem se importa? vai dar certo:
git add . ; git commit -m ... ; git push origin mainse veio parar aqui através do tutorial de autenticação e CRUD, isso aqui é só o começo. caso contrario, terminamos. obrigado e espero que tenha dado tudo certo. me segue no insta pra eu saber quem fez meu tutorial. couto_71
