Crear una app interactiva con IA usando FastAPI y React ejemplo de integración Backend – Frontend

Tiempo de lectura: 2 minutos

Desarrollaremos una aplicación web que utiliza FastAPI para el backend y React para el frontend. La app permitirá a los usuarios interactuar con un sistema de recomendaciones básicas, pero sin la complejidad de la IA. Las recomendaciones se basarán simplemente en las acciones que el usuario ingrese.

Tecnologías a usar

• Backend: FastAPI
• Frontend: React (con TypeScript)
• Base de datos: No usaremos base de datos por simplicidad (todo estará en memoria).

Requisitos previos

1. Conocimientos básicos de Python y JavaScript.
2. Tener FastAPI y React instalados en tu máquina.

Parte 1: Backend con FastAPI

Lo primero es instalar las dependencias para el backend con FastAPI.

pip install fastapi uvicorn

Crea un archivo llamado main.py y coloca el siguiente código:

from fastapi import FastAPI
from pydantic import BaseModel
import random

app = FastAPI()

class UserInput(BaseModel):
    user_id: int
    action: str

@app.post("/get_recommendation/")
async def get_recommendation(input_data: UserInput):
    # Recomendaciones básicas en función de la acción
    recommendations = {
        "ver película": ["Inception", "The Matrix", "Interstellar"],
        "leer libro": ["1984", "El Señor de los Anillos", "Cien años de soledad"],
        "hacer ejercicio": ["Correr", "Ir al gimnasio", "Yoga"]
    }

    action = input_data.action.lower()
    recommended_items = recommendations.get(action, ["No tengo una recomendación para esa acción"])

    return {"recommendation": random.choice(recommended_items)}

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

Lanza el servidor con el siguiente comando:

uvicorn main:app --reload

Accede a la documentación automática de la API en http://localhost:8000/docs, donde puedes probar el endpoint de recomendación.

Parte 2: Frontend con React y TypeScript

Creación de la aplicación React

Vamos a crear la estructura básica de la app en React con TypeScript. Usa create-react-app para crear el proyecto:

npx create-react-app recommendation-app --template typescript
cd recommendation-app

Instalación de Axios para la comunicación con el backend

Instalamos Axios para poder hacer peticiones HTTP desde el frontend al backend.

npm install axios

Creación del componente de interfaz en React

Dentro de la carpeta src, crea un archivo llamado RecommendationComponent.tsx y agrega este código:

import React, { useState } from "react";
import axios from "axios";

const RecommendationComponent: React.FC = () => {
  const [recommendation, setRecommendation] = useState<string | null>(null);
  const [userAction, setUserAction] = useState<string>("");

  const getRecommendation = async () => {
    try {
      const response = await axios.post("http://localhost:8000/get_recommendation/", {
        user_id: 1,
        action: userAction
      });
      setRecommendation(response.data.recommendation);
    } catch (error) {
      console.error("Error fetching recommendation:", error);
    }
  };

  return (
    <div>
      <h2>Recomendaciones basadas en tu acción</h2>
      <input
        type="text"
        value={userAction}
        onChange={(e) => setUserAction(e.target.value)}
        placeholder="Introduce una acción..."
      />
      <button onClick={getRecommendation}>Obtener recomendación</button>
      {recommendation && <p>{recommendation}</p>}
    </div>
  );
};

export default RecommendationComponent;

Integración del componente en App.tsx

Abre el archivo src/App.tsx y reemplázalo con lo siguiente para incluir el componente de recomendaciones:

import React from 'react';
import './App.css';
import RecommendationComponent from './RecommendationComponent';

const App: React.FC = () => {
  return (
    <div className="App">
      <h1>Aplicación de Recomendaciones</h1>
      <RecommendationComponent />
    </div>
  );
};

export default App;

Lanzamiento del Frontend

Ahora puedes iniciar el servidor de desarrollo de React:

npm start

Esto debería abrir la aplicación en tu navegador en http://localhost:3000. Podrás ingresar diferentes acciones como «ver película» o «leer libro» y obtener una recomendación.