Skip to content

Commit 74130fb

Browse files
Fyre-FlyeFyre-Flye
authored
API JS
1 parent 7745675 commit 74130fb

File tree

23 files changed

+1728
-0
lines changed

23 files changed

+1728
-0
lines changed

‎JS_API/package-lock.json‎

Lines changed: 1126 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎JS_API/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "js_api",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"dependencies": {
13+
"axios": "^0.27.2",
14+
"express": "^4.18.1"
15+
}
16+
}

‎JS_API/src/api/api_axios/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>API Consumpstion with Axios</title>
8+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
9+
<script src="./main.js"></script>
10+
</head>
11+
<body>
12+
<div id="apiResult"></div>
13+
<hr>
14+
<p id="userName"></p>
15+
<p id="userCity"></p>
16+
<p id="userID"></p>
17+
<img src="" id="userAvatar">
18+
</body>
19+
</html>

‎JS_API/src/api/api_axios/main.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const { response } = require("express")
2+
3+
const url = "http://localhost:5500/api"
4+
5+
function getUsers() {
6+
axios.get(url)
7+
.then(response => {
8+
apiResult.textContent = JSON.stringify(response.data)
9+
})
10+
.catch(error => console.error(error))
11+
}
12+
13+
function addNewUser(newUser) {
14+
axios.post(url, newUser)
15+
.then(response => {
16+
console.log(response)
17+
})
18+
.catch(error => console.error(error))
19+
}
20+
21+
function getUser(id) {
22+
axios.get(`${url}/${id}`)
23+
.then(response => {
24+
const data = response.data
25+
userName.textContent = data.name
26+
userCity.textContent = data.city
27+
userID.textContent = data.id
28+
userAvatar.textContent = data.avatar
29+
})
30+
.catch(error => console.error(error))
31+
}
32+
33+
function updateUser(id, userUpdated) {
34+
axios.put(`${url}/${id}`, userUpdated)
35+
.then(response => console.log(response))
36+
.catch(error => console.error(error))
37+
}
38+
39+
function deleteUser(id) {
40+
axios.delete(`${url}/${id}`)
41+
.then(response => console.log(response))
42+
.catch(error => console.error(error))
43+
}
44+
45+
const userUpdated = {
46+
name: "Marcelo",
47+
avatar : "https://picsum.photos/200/300",
48+
city : "Recife"
49+
}
50+
51+
const newUser = {
52+
name:"Olivia",
53+
avatar:"https://picsum.photos/200/300",
54+
city:"Rio de Janeiro"
55+
}
56+
57+
deleteUser(1)
58+
updateUser(1, userUpdated)
59+
getUser(1)
60+
getUsers()
61+
addNewUser()

‎JS_API/src/api/api_axios/node-api-discover/README.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# NodeJS Simple API
2+
3+
<p align="center">
4+
<a href="#-tecnologias">Technologies</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
5+
<a href="#-projeto">Projects</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
6+
<a href="#memo-licença">Lincense</a>
7+
</p>
8+
9+
10+
11+
12+
## 🚀 Tecnologias
13+
14+
Esse projeto foi desenvolvido com as seguintes tecnologias:
15+
16+
- JavaScript
17+
- NodeJS
18+
- Express
19+
20+
21+
22+
## 💻 Projeto
23+
24+
Esse projeto foi construído para servir de apoio no estudo de consumo de APIs REST
25+
26+
27+
28+
## Como utilizar?
29+
30+
1. Baixe esse repositório e com o seu o terminal, entre no diretório
31+
32+
2. Rode o comando `npm install` para instalar as dependências
33+
34+
3. E pra iniciar a aplicação, rode o comando `npm start` 
35+
36+
37+
38+
## :memo: Licença
39+
40+
Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](.github/LICENSE.md) para mais detalhes.
41+
42+
---
43+
44+
Feito com ♥ by Jakeliny Gracielly

‎JS_API/src/api/api_axios/node-api-discover/index.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
const express = require('express')
2+
const cors = require('cors')
3+
4+
const app = express()
5+
6+
app.listen(5500, () => console.log('Rodando na porta 5500'))
7+
8+
app.use(cors())
9+
10+
app.use(express.json())
11+
12+
let users = [{
13+
id: 1,
14+
name: "Jakeliny Gracielly",
15+
avatar: "https://avatars.githubusercontent.com/u/17316392?v=4",
16+
city: "São Paulo"
17+
}]
18+
19+
20+
app.route('/api').get((req, res) => res.json({
21+
users
22+
}))
23+
24+
app.route('/api/:id').get((req, res) => {
25+
const userId = req.params.id
26+
27+
const user = users.find(user => Number(user.id) === Number(userId))
28+
29+
if (!user) {
30+
return res.json('User nor found!')
31+
}
32+
33+
res.json(user)
34+
})
35+
36+
app.route('/api').post((req, res) => {
37+
const lastId = users[users.length - 1].id
38+
users.push({
39+
id: lastId + 1,
40+
name: req.body.name,
41+
avatar: req.body.avatar,
42+
city: req.body.city
43+
})
44+
res.json('Saved user')
45+
})
46+
47+
app.route('/api/:id').put((req, res) => {
48+
const userId = req.params.id
49+
50+
const user = users.find(user => Number(user.id) === Number(userId))
51+
52+
if (!user) {
53+
return res.json('User nor found!')
54+
}
55+
56+
const updatedUser = {
57+
...user,
58+
name: req.body.name,
59+
avatar: req.body.avatar,
60+
city: req.body.city
61+
}
62+
63+
users = users.map(user => {
64+
if (Number(user.id) === Number(userId)) {
65+
user = updatedUser
66+
}
67+
return user
68+
})
69+
70+
res.json("Updated user")
71+
})
72+
73+
app.route('/api/:id').delete((req, res) => {
74+
const userId = req.params.id
75+
76+
users = users.filter(user => Number(user.id) !== Number(userId))
77+
78+
res.json('Deleted User')
79+
})

‎JS_API/src/api/api_axios/node-api-discover/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "node-api",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "nodemon ."
8+
},
9+
"keywords": [],
10+
"author": "Jakeliny Gracielly",
11+
"license": "ISC",
12+
"dependencies": {
13+
"cors": "^2.8.5",
14+
"express": "^4.17.1"
15+
},
16+
"devDependencies": {
17+
"nodemon": "^2.0.13"
18+
}
19+
}

‎JS_API/src/api/api_fetch/consume/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Fetch API Consuptiom</title>
8+
<script src="./main.js"></script>
9+
</head>
10+
<body>
11+
<div id="alertAPI">OK</div>
12+
<hr>
13+
<div id="renderApiResult"></div>
14+
<hr>
15+
<p id="userName"></p>
16+
<p id="UserCity"></p>
17+
<img src="" id="userAvatar">
18+
</body>
19+
</html>

‎JS_API/src/api/api_fetch/consume/main.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
const { response } = require("express")
2+
3+
const url = "http://localhost:5500/api"
4+
5+
function gerUsers() {
6+
fetch(url)
7+
.then(response => response.json())
8+
.then(data => renderApiResult.textContent = JSON.stringify(data))
9+
.catch(error => console.error(error))
10+
}
11+
12+
function getUser(user_id) {
13+
fetch(`${url}/${user_id}`)
14+
.then(response => response.json())
15+
.then(data => {
16+
userName.textContent = data.name
17+
userCity.textContent = data.city
18+
userAvatar.src = data.avatar
19+
})
20+
.catch(error => console.log(error))
21+
}
22+
23+
function addUser(newUser) {
24+
fetch(url, {
25+
method: "POST",
26+
body: JSON.stringify(newUser),
27+
headers: {
28+
"Content-type": "application/json; charset=UTF-8"
29+
}
30+
})
31+
.then(response => response.json())
32+
.then(data => alertAPI.textContent = data)
33+
.catch(error => console.error(error))
34+
}
35+
36+
function updateUser(updatedUser, id) {
37+
fetch(`${url}/${id}`, {
38+
method: "PUT",
39+
body: JSON.stringify(updateUser),
40+
headers: {
41+
"Content-type": "application/json;charset=UTF-8"
42+
}
43+
})
44+
.then(response => response.json())
45+
.then(data => alertAPI.textContent = data)
46+
.catch(error => console.error(error))
47+
}
48+
49+
function deleteUser(id) {
50+
fetch(`${url}/${id}`, {
51+
method:"DELETE",
52+
headers: {
53+
"Content-type:":"application/json;charset=UTF-8"
54+
}
55+
})
56+
.then(response => response.json())
57+
.then(data => alertAPI.textContent = data)
58+
.catch(error => console.error(error))
59+
}
60+
61+
const updatedUser = {
62+
name:"Marcelo",
63+
avatar:"https://picsum.photos/200/300",
64+
city: "Recife"
65+
}
66+
67+
const newUser = {
68+
name: "Olivia",
69+
avatar: "http://lorempixel.com/400/200",
70+
city: "Rio do Sul"
71+
}
72+
73+
//addUser(newUser)
74+
75+
deleteUser()
76+
updateUser(updateUser, 1)
77+
getUsers()
78+
getUser(1)

‎JS_API/src/api/api_fetch/fetch-api/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# fetch-api
2+
project created to exemplify the consumption of an API with FETCH

0 commit comments

Comments
 (0)