Skip to content

Commit 40fc52f

Browse files
mouredevmouredev
committed
Clase 5 Intermedio | 26/02/2025
Manejo de APIs
1 parent 43b6978 commit 40fc52f

3 files changed

Lines changed: 204 additions & 2 deletions

File tree

‎Intermediate/09-apis.js‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
/*
2+
Clase 5 - Manejo de APIs (26/02/2025)
3+
Vídeo: https://www.twitch.tv/videos/2391820998?t=00h17m25s
4+
*/
5+
6+
// Manejo de APIs
7+
8+
// - APIs REST (HTTP + URLs + JSON)
9+
10+
// Métodos HTTP:
11+
// - GET
12+
// - POST
13+
// - PUT
14+
// - DELETE
15+
16+
// Códigos de respuesta HTTP:
17+
// - 200 OK
18+
// - 201
19+
// - 400
20+
// - 404
21+
// - 500
22+
23+
// Consumir una API
24+
25+
// https://jsonplaceholder.typicode.com
26+
27+
// GET
28+
fetch("https://jsonplaceholder.typicode.com/posts")
29+
.then(response => {
30+
// Transforma la respuesta a JSON
31+
return response.json()
32+
})
33+
.then(data => {
34+
// Procesa los datos
35+
console.log(data)
36+
})
37+
.catch(error => {
38+
// Captura errores
39+
console.log("Error", error)
40+
})
41+
42+
// Uso de Async/Await
43+
44+
async function getPosts() {
45+
try {
46+
const response = await fetch("https://jsonplaceholder.typicode.com/posts")
47+
const data = await response.json()
48+
console.log(data)
49+
} catch (error) {
50+
console.log("Error", error)
51+
}
52+
}
53+
54+
getPosts()
55+
56+
// Solicitud POST
57+
58+
async function createPost() {
59+
try {
60+
61+
const newPost = {
62+
userId: 1,
63+
title: "Este es el título de mi post",
64+
body: "Este es el cuerpo de mi post"
65+
}
66+
67+
const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
68+
method: "POST",
69+
headers: {
70+
"Content-Type": "application/json"
71+
},
72+
body: JSON.stringify(newPost)
73+
})
74+
75+
const data = await response.json()
76+
console.log(data)
77+
} catch (error) {
78+
console.log("Error", error)
79+
}
80+
}
81+
82+
createPost()
83+
84+
// Herramientas para realizar peticiones HTTP
85+
// - https://postman.com
86+
// - https://apidog.com
87+
// - https://thunderclient.com
88+
89+
// Manejo de errores
90+
91+
fetch("https://jsonplaceholder.typicode.com/mouredev")
92+
.then(response => {
93+
if (!response.ok) {
94+
throw Error(`Status HTTP: ${response.status}`)
95+
}
96+
return response.json()
97+
})
98+
.catch(error => {
99+
console.log("Error", error)
100+
})
101+
102+
// Métodos HTTP adicionales
103+
// - PATCH
104+
// - OPTIONS
105+
106+
async function partialPostUpdate() {
107+
try {
108+
const response = await fetch("https://jsonplaceholder.typicode.com/posts/10", {
109+
method: "PATCH",
110+
headers: {
111+
"Content-Type": "application/json"
112+
},
113+
body: JSON.stringify({ title: "Este es el nuevo título de mi post" })
114+
})
115+
116+
const data = await response.json()
117+
console.log(data)
118+
} catch (error) {
119+
console.log("Error", error)
120+
}
121+
}
122+
123+
partialPostUpdate()
124+
125+
// Autenticación mediante API Key
126+
127+
async function getWeather(city) {
128+
129+
// https://openweathermap.org
130+
const apiKey = "TU_API_KEY"
131+
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
132+
133+
try {
134+
const response = await fetch(url)
135+
const data = await response.json()
136+
console.log(data)
137+
} catch (error) {
138+
console.log("Error", error)
139+
}
140+
}
141+
142+
getWeather("Madrid")
143+
144+
// Otros métodos de Autenticación y Autorización
145+
// - Bearer Tokens
146+
// - JWT
147+
148+
// Versionado de APIs
149+
// - https://api.example.com/v1/resources
150+
// - https://api.example.com/v2/resources
151+
152+
// Otras APIs
153+
154+
async function getPokemon(pokemon) {
155+
156+
// https://pokeapi.co
157+
const url = `https://pokeapi.co/api/v2/pokemon/${pokemon}`
158+
159+
try {
160+
const response = await fetch(url)
161+
const data = await response.json()
162+
console.log(`Habilidades de ${data.name}`)
163+
data.abilities.forEach(ability => {
164+
console.log(ability.ability.name)
165+
})
166+
} catch (error) {
167+
console.log("Error", error)
168+
}
169+
}
170+
171+
getPokemon("pikachu")

‎Intermediate/10-apis-exercises.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/*
2+
Clase 5 - Manejo de APIs (26/02/2025)
3+
Vídeo: https://www.twitch.tv/videos/2391820998?t=00h17m25s
4+
*/
5+
6+
// 1. Realiza una petición GET con fetch() a JSONPlaceholder y muestra en la consola la lista de publicaciones
7+
8+
// 2. Modifica el ejercicio anterior para que verifique si la respuesta es correcta usando response.ok. Si no lo es, lanza y muestra un error
9+
10+
// 3. Reescribe el ejercicio 1 usando la sintaxis async/await en lugar de promesas
11+
12+
// 4. Realiza una petición POST a JSONPlaceholder para crear una nueva publicación. Envía un objeto con propiedades como title o body
13+
14+
// 5. Utiliza el método PUT para actualizar completamente un recurso (por ejemplo, modificar una publicación) en JSONPlaceholder
15+
16+
// 6. Realiza una petición PATCH para modificar únicamente uno o dos campos de un recurso existente
17+
18+
// 7. Envía una solicitud DELETE a la API para borrar un recurso (por ejemplo, una publicación) y verifica la respuesta
19+
20+
// 8. Crea una función que realice una solicitud GET (la que quieras) a OpenWeatherMap
21+
22+
// 9. Utiliza la PokéAPI para obtener los datos de un Pokémon concreto, a continuación los detalles de la especie y, finalmente, la cadena evolutiva a partir de la especie
23+
24+
// 10. Utiliza una herramienta como Postman o Thunder Client para probar diferentes endpoint de una API

‎README.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515

1616
### Curso de fundamentos intermedio (continuación del desde cero). Nueva clase cada semana.
1717

18-
#### 🔴 PRÓXIMA CLASE EN DIRECTO: Miércoles 26 de febrero a las 20:00h (España) en [Twitch](https://twitch.tv/mouredev) y [YouTube](https://youtube.com/@mouredev)
19-
#### 🗓️ CONSULTA EL HORARIO POR PAÍS Y CREA UN RECORDATORIO desde [Discord](https://discord.gg/DuE3fHyV?event=1341887890858442772)
18+
#### 🔴 PRÓXIMA CLASE EN DIRECTO: Jueves 6 de marzo a las 20:00h (España) en [Twitch](https://twitch.tv/mouredev) y [YouTube](https://youtube.com/@mouredev)
19+
#### 🗓️ CONSULTA EL HORARIO POR PAÍS Y CREA UN RECORDATORIO desde [Discord](https://discord.gg/63Q2Ts6p?event=1344414401603833886)
2020

2121
* Clase 1 [29/01/2025] - Funciones avanzadas
2222
* [Vídeo](https://www.twitch.tv/videos/2367024319?t=00h08m45s)
@@ -39,6 +39,11 @@
3939
* [Código](./Intermediate/07-async.js)
4040
* [Ejericios](./Intermediate/08-async-exercises.js)
4141

42+
* Clase 5 [26/02/2025] - Manejo de APIs
43+
* [Vídeo](https://www.twitch.tv/videos/2391820998?t=00h17m25s)
44+
* [Código](./Intermediate/09-apis.js)
45+
* [Ejericios](./Intermediate/10-apis-exercises.js)
46+
4247
## Clases en vídeo
4348

4449
### Curso de fundamentos desde cero
@@ -107,6 +112,8 @@
107112
* Exploradores: [Chrome](https://www.google.com/intl/es_es/chrome/) | [Brave](https://brave.com/download/)
108113
* [Visual Studio Code](https://code.visualstudio.com/)
109114
* [Guía de estilo](https://google.github.io/styleguide/jsguide.html)
115+
* Clientes HTTP: [Postman](https://postman.com) | [Apidog](https://apidog.com) | [Thunder Client](https://thunderclient.com)
116+
* APIs: [JSONPlaceholder](https://jsonplaceholder.typicode.com) | [OpenWeather](https://openweathermap.org) | [PokéAPI](https://pokeapi.co)
110117

111118
## Únete al campus de programación de la comunidad
112119

0 commit comments

Comments
 (0)