¿Qué es una API?

Una API (Application Programming Interface) permite que dos sistemas puedan comunicarse entre sí.

Las APIs son utilizadas constantemente en aplicaciones modernas para:

• Obtener información
• Enviar datos
• Consultar servicios externos
• Integrar plataformas

---

Ejemplos de APIs

API	Función
Google Maps API	Mostrar mapas
Spotify API	Obtener canciones
OpenWeather API	Clima
PokeAPI	Información Pokémon

---

APIs REST

Las APIs REST funcionan mediante solicitudes HTTP.

Los métodos más comunes son:

Método	Función
GET	Obtener información
POST	Enviar información
PUT	Actualizar datos
DELETE	Eliminar datos

---

¿Qué es JSON?

JSON significa:

JavaScript Object Notation

Es el formato más utilizado para transferir información entre aplicaciones web.

---

Ejemplo de JSON

{
  "nombre": "pikachu",
  "tipo": "electric",
  "peso": 60
}

---

Características de JSON

• Ligero
• Fácil de leer
• Fácil de procesar
• Compatible con múltiples lenguajes

---

Partes de un JSON

Elemento	Ejemplo
Clave	”nombre”
Valor	”pikachu”
Objeto
Arreglo	[ ]

---

Arquitectura Cliente-Servidor

En esta práctica utilizaremos una arquitectura web moderna.

---

Arquitectura utilizada

Frontend (HTML/CSS/JS)
        ↓
fetch() + JSON
        ↓
Node.js + Express
        ↓
MySQL

---

Función de cada componente

Componente	Función
Frontend	Interfaz visual
fetch()	Comunicación HTTP
JSON	Transferencia de datos
Express	Procesar solicitudes
MySQL	Almacenar información

---

Flujo de Datos

Flujo completo del proyecto

1. Usuario escribe un Pokémon
2. Frontend consume la PokeAPI
3. La API devuelve JSON
4. JavaScript procesa datos
5. Información se muestra en pantalla
6. Usuario guarda Pokémon
7. Frontend envía JSON al backend
8. Express recibe datos
9. MySQL almacena información

---

Flujo visual

Usuario
   ↓
Frontend
   ↓
PokeAPI
   ↓
JSON
   ↓
Frontend
   ↓
Express
   ↓
MySQL

---

Tecnologías Frontend

HTML5

Se utilizará para:

• Estructura
• Formularios
• Botones
• Tarjetas

---

CSS3

Se utilizará para:

• Diseño visual
• Responsive básico
• Tarjetas Pokémon
• Distribución

---

JavaScript Vanilla

Permitirá:

• Consumir APIs
• Manipular DOM
• Procesar JSON
• Enviar datos

---

fetch()

Será utilizado para:

• Consumir la PokeAPI
• Enviar información al backend

---

Tecnologías Backend

Node.js

Node.js permite ejecutar JavaScript en el servidor.

---

Express.js

Express facilita:

• Crear APIs
• Manejar rutas
• Recibir JSON
• Responder solicitudes

---

Librerías obligatorias

Instalar:

npm install express cors mysql2

---

Función de cada librería

Librería	Función
express	Crear servidor
cors	Permitir comunicación
mysql2	Conectar MySQL

---

Base de Datos MySQL

MySQL almacenará los Pokémon guardados.

---

Crear base de datos

CREATE DATABASE pokedex_web;

---

Crear tabla

USE pokedex_web;

CREATE TABLE pokemon (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100),
    tipo VARCHAR(100),
    altura INT,
    peso INT,
    experiencia INT,
    imagen TEXT
);

---

Explicación

Campo	Función
id	Identificador
nombre	Nombre Pokémon
tipo	Tipo
altura	Altura
peso	Peso
experiencia	Experiencia base
imagen	URL imagen

---

Configuración del Proyecto

Estructura del proyecto

pokedex-app/
│
├── frontend/
│   ├── index.html
│   ├── style.css
│   └── app.js
│
├── backend/
│   ├── server.js
│   ├── db.js
│   └── package.json
│
└── database/
    └── pokedex.sql

---

Inicializar backend

Dentro de /backend

npm init -y

---

Instalar dependencias

npm install express cors mysql2

---

Consumiendo la PokeAPI

Endpoint utilizado

:contentReference[oaicite:0]{index=0}

https://pokeapi.co/api/v2/pokemon/pikachu

---

Ejemplo usando fetch()

async function buscarPokemon(nombre) {

    const response = await fetch(
        `https://pokeapi.co/api/v2/pokemon/${nombre}`
    );

    const data = await response.json();

    console.log(data);
}

---

¿Qué ocurre aquí?

Línea	Función
fetch()	Solicita información
await	Espera respuesta
response.json()	Convierte a JSON
console.log()	Mostrar datos

---

Datos obtenidos

{
  "name": "pikachu",
  "height": 4,
  "weight": 60
}

---

Guardando Datos en MySQL

Enviar JSON al backend

fetch("http://localhost:3000/pokemon", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        nombre: "pikachu",
        tipo: "electric"
    })
});

---

Endpoint Express

app.post("/pokemon", (req, res) => {

    console.log(req.body);

    res.send("Pokemon recibido");
});

---

Insertar en MySQL

const sql = `
INSERT INTO pokemon
(nombre, tipo, altura, peso, experiencia, imagen)
VALUES (?, ?, ?, ?, ?, ?)
`;

---

Verificar registros

SELECT * FROM pokemon;

---

---

Cierre

Las aplicaciones web modernas dependen de la comunicación entre múltiples tecnologías.

En esta práctica aprendiste:

• Cómo consumir APIs
• Cómo usar fetch()
• Cómo trabajar con JSON
• Cómo transferir información
• Cómo usar Express
• Cómo almacenar datos en MySQL

Estos conceptos son fundamentales para el desarrollo Full Stack moderno.