32. ¿Qué es una api REST?

 

¿Qué es una API y una API REST?

Introducción

¡Bienvenidos al curso! Vamos a comenzar aprendiendo qué es una API de forma gráfica y sencilla para que todos puedan comprenderlo fácilmente.

1. ¿Qué es una API?

API significa Application Programming Interface (Interfaz de Programación de Aplicaciones).

Ejemplo Práctico: Una App tipo Uber

Imaginemos que tenemos una aplicación tipo Uber (como Driver, que puedes encontrar en 469). Un ejemplo común es calcular la distancia entre un punto A y un punto B.

https://32.%2520%C2%BFQu%C3%A9%2520es%2520una%2520api%2520REST_.png

¿Por qué es importante en una app tipo Uber?

  • Para calcular el precio del viaje

  • Para determinar la ruta más eficiente

Solución: Consumir servicios de Google Maps para obtener la distancia entre dos puntos.

El Rol de la API

La API actúa como intermediario entre nuestra aplicación (Uber) y Google Maps:

text

Aplicación Uber → API → Google Maps

¿Qué sucede exactamente?

  1. Uber envía las coordenadas (punto A y B) a través de una URL (la API)

  2. Google Maps consulta su base de datos

  3. Google Maps responde con la distancia (ej: 10 km)

  4. Uber calcula el precio (ej: 10 km × 1 sol/km = 10 soles)

Ventaja: Sin la API de Google Maps, tendríamos que crear nuestro propio servicio de mapas, lo que sería costoso y complejo.

2. Conceptos Clave de una API

Cliente y Servidor

  • Cliente: Nuestra aplicación (Uber)

  • Servidor: Google Maps (provee el servicio)

La API como Interfaz

El usuario final solo ve botones y campos en la app, no sabe qué ocurre detrás:

  • No ve las coordenadas enviadas

  • No conoce los cálculos realizados

  • Solo recibe el resultado final

Comunicación Básica

text

Cliente → Petición → Servidor

Cliente ← Respuesta ← Servidor

Definición: Las APIs son interfaces que permiten que dos programas de software se comuniquen entre sí, compartiendo datos bajo ciertas reglas y estándares.

3. ¿Qué es una API REST?

https://32.%2520%C2%BFQu%C3%A9%2520es%2520una%2520api%2520REST_%2520(1).png

REST significa Representational State Transfer (Transferencia de Estado Representacional).

Historia

  • Creador: Dr. Roy Fielding (2000)

  • Documento: "Estilos de Arquitectura y el diseño de arquitecturas de Software basadas en Redes"

  • Propósito: Crear normas más flexibles que SOAP para desarrollar APIs web

Importante: REST no es una arquitectura de software, sino un conjunto de limitaciones que debes seguir al implementar tu API.

4. Principios Fundamentales de REST

https://32.%2520%C2%BFQu%C3%A9%2520es%2520una%2520api%2520REST_%2520(2).png

1. Proteger la Base de Datos

  • Nunca exponer directamente la base de datos

  • Nunca mostrar nombres de tablas o estructuras internas

  • Usar URIs como: https://maps.googleapis.com/maps/api/distancematrix/json?params

2. Buena Documentación

  • Debe ser fácil de implementar

  • Documentación clara y con ejemplos

  • Esencial si vendemos nuestra API a clientes


5. Funcionamiento de una API REST

Flujo de Comunicación

text

Cliente (App, Web) → API REST → Servidor (Base de datos)

Seguridad con API Keys

  • API Key: Llave única para identificar al cliente

  • Propósitos:

    • Identificar qué cliente está usando la API

    • Limitar peticiones (ej: 100 peticiones/mes)

    • Implementar autorizaciones

  • Importante: Toda la seguridad se maneja en el servidor

Formatos de Respuesta

  • JSON (el más común en sistemas modernos)

  • XML (usado aún en sistemas de facturación)

6. Métodos HTTP en REST

El cliente debe indicar qué acción quiere realizar:

Método

Propósito

Ejemplo

GET

Consultar datos

Buscar información

POST

Enviar/crear datos

Crear nuevo usuario

PUT

Actualizar datos

Modificar información

DELETE

Eliminar datos

Borrar registro

Ejemplo: Si el servidor recibe un GET, sabe que el cliente quiere consultar datos.

7. Códigos de Respuesta HTTP

El servidor responde con códigos que indican el resultado:

Código

Significado

Ejemplo

200

Todo salió bien

Registro exitoso

300

Redirecciones

URI cambiada a otra ubicación

400

Error del cliente

404: Recurso no encontrado

500

Error del servidor

Servidor caído

8. API RESTful

Cuando una empresa dice que usa API RESTful, significa que cumple todas las normativas REST, incluyendo:

  • Arquitectura cliente-servidor sin estado

  • Cacheable

  • Interfaz uniforme

  • Sistema en capas

  • Código bajo demanda (opcional)

Resumen

API

  • Interfaz entre dos aplicaciones

  • Permite comunicación cliente-servidor

  • Oculta la complejidad del backend

API REST

  • Conjunto de reglas para diseñar APIs web

  • Protege la base de datos

  • Requiere buena documentación

  • Usa métodos HTTP (GET, POST, PUT, DELETE)

  • Retorna códigos de estado

¡Ahora estás listo para comenzar a practicar con APIs REST! En la siguiente sección aplicaremos estos conceptos con ejercicios prácticos.

Comentarios

Publicar un comentario

Entradas más populares de este blog

11. Creando un proyecto react con create-react-app

    ¡Vamos a crearnos ahora nuestros proyectos de realidad! Vamos a ver dos formas. La primera va a ser con el clásico  Create React App , que, por cierto, tiene una gran ventaja: encontrarás muchísimos proyectos inicializados con esta herramienta. Es decir, podrás acceder a bastantes códigos fuente que usan este tipo de creación. Esta es la forma que también  React nos recomienda  para arrancar. Podemos verlo en su documentación oficial, donde se explica paso a paso cómo crear un proyecto con esta herramienta. Paso a paso: Creamos una carpeta raíz  para almacenar todos nuestros proyectos. Yo la llamé "React intensivo". Abrimos  Visual Studio Code  (nueva ventana) y arrastramos la carpeta dentro. Así usamos la interfaz gráfica, aunque también se puede hacer directamente por consola. Una vez dentro de la carpeta, abrimos una  nueva terminal  en VS Code. Según la documentación de React, el comando es: bash npx create-react-app < nombre-...
Leer más

29. useEffect

  Tutorial: 29. useEffect en React Introducción a useEffect useEffect es uno de los Hooks más importantes en React que nos permite ejecutar efectos secundarios en nuestros componentes funcionales. Los efectos secundarios son operaciones que pueden incluir peticiones a APIs, suscripciones, manipulación del DOM, etc. 1. Sintaxis Básica La sintaxis básica de useEffect es: javascript useEffect (() => {    // Código a ejecutar }, []) // Array de dependencias Ejemplo visual de la sintaxis: text useEffect(()=>{},[]) 2. Ejemplo Práctico: Sistema de Likes Vamos a construir un componente de likes para entender cómo funciona useEffect : javascript import { useState , useEffect } from "react" ; export function Prueba () {    const [ likes , setLikes ] = useState ( 0 );       const darLike = () => {      setLikes ( likes + 1 );    };       // useEffect ejecutando darLike un...
Leer más

38. 4 Routers

  Tutorial 38.4: Implementando Router en nuestra App de Películas Introducción a React Router Ahora que tenemos nuestra aplicación mostrando películas, necesitamos implementar navegación entre diferentes vistas. Vamos a crear rutas para: Ver la lista de películas (página principal) Ver el detalle de cada película Otras vistas futuras (búsqueda, favoritos, etc.) Paso 1: Estructura de carpetas Primero, vamos a organizar nuestro proyecto con una estructura más profesional: text src/ ├── assets/ ├── components/ │   ├── ContextMovieCard.jsx │   └── MovieCard.jsx ├── data/ ├── pages/ │   └── LandingPage.jsx ├── routers/ │   └── routes.jsx ├── App.css ├── App.jsx ├── index.css └── main.jsx Paso 2: Instalar React Router DOM Abrimos una terminal en nuestro proyecto 1-peliculas y ejecutamos: bash cd 1 -peliculas yarn add react-router-dom O con npm: bash npm install react-router-dom Paso 3: Crear componentes básicos MovieCard.jsx (Componente individual de película) j...
Leer más