En este tutorial, aprender谩s sobre las APIs, c贸mo crear una con Flask y consumirla con JavaScript en pocas lineas de c贸digo.
Las APIs (Interfaz de Programaci贸n de Aplicaciones) son como puentes que permiten que diferentes aplicaciones se comuniquen entre s铆 y compartan informaci贸n.
Las APIs son herramientas poderosas que permiten a las aplicaciones:
-
Integrar funcionalidades de servicios externos en su propia aplicaci贸n. Automatizar procesos y tareas mediante la comunicaci贸n entre diferentes sistemas. Acceder y manipular datos de servicios web, como redes sociales, bases de datos, y m谩s.
-
Construir aplicaciones modulares y escalables al separar la l贸gica de negocio de la interfaz de usuario. Fomentar la colaboraci贸n y la interoperabilidad entre aplicaciones y plataformas.
Algunos ejemplos comunes de uso de APIs incluyen:
- Integrar el inicio de sesi贸n de una aplicaci贸n con Google o Facebook. Mostrar datos meteorol贸gicos en una aplicaci贸n utilizando la API de un servicio meteorol贸gico.
- Obtener informaci贸n sobre pel铆culas o libros utilizando APIs como OMDB o Google Books. Acceder a datos de redes sociales, como tweets o publicaciones de Facebook, a trav茅s de las APIs de Twitter o Facebook.
Instalaci贸n de Flask Antes de comenzar, aseg煤rate de tener Flask instalado en tu sistema. Puedes instalarlo utilizando pip:
bash pip install flask flask_cors
Utilizaremos Flask para crear el servidor para nuestra API.
from flask import Flask, jsonify
from flask_cors import CORS, cross_origin
app = Flask(__name__)
CORS(app)
@app.route('/api')
def hello_world():
return jsonify({"message":"Hola desde la API de Python"})
if __name__ == '__main__':
app.run(debug=True)
bash python3 server.py
const $api = document.getElementById("api"); //Recuperamos el elemento html
const url = "http://localhost:5000/api"; //URL de API
const options = {
//Necesario para una correcta conexi贸n
method: "GET", // Tipo de petici贸n
headers: {
// Encabezados
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
};
fetch(url, options) // Realizando Petici贸n
.then((response) => response.json())
.then((json) => ($api.textContent = JSON.stringify(json)))
.catch((err) => console.error("Error:", err));
Si la API responde la solicitud, nos devolver谩 un json que vamos a mostrarlo como texto en el elemento con ID api, solo con fines pr谩cticos, pero podr铆amos hacer un sin fin de cosas con ellos.
Es importante tener en cuenta el problema de CORS (Cross-Origin Resource Sharing) al consumir APIs desde un origen diferente al de la API. Pero...
CORS (Cross-Origin Resource Sharing) es una regla de seguridad en los navegadores web que decide si permitir o bloquear solicitudes entre diferentes sitios web. Ayuda a prevenir que p谩ginas web maliciosas accedan a tus datos personales cuando navegas por internet.
- Subir imagenes
- Crear API
- Uso real de API
- Screenshots de uso real de API