Crea una App de Adivinanzas con React y ChatGPT API

Tiempo de lectura: 2 minutos

En este tutorial, vamos a construir una aplicación divertida de adivinanzas donde los usuarios pueden intentar adivinar objetos, animales o cualquier cosa que quieran.

La gracia es que la app usará la API de ChatGPT para dar pistas creativas y a veces desafiantes.

Paso 1: Configura tu Proyecto de React

1. Crea un nuevo proyecto de React:

   npx create-react-app adivinanzas-react
   cd adivinanzas-react

2. Instala Axios para realizar peticiones HTTP:

   npm install axios

3. Prepara el entorno de la API de OpenAI:
   Crea un archivo .env para guardar tus claves API:

   REACT_APP_OPENAI_API_KEY=tu_clave_de_api_aqui

Paso 2: Diseña el Componente Principal

Crea el componente principal App.js para manejar la lógica básica de la aplicación:

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

function App() {
  const [adivinanza, setAdivinanza] = useState('');
  const [respuesta, setRespuesta] = useState('');
  const [pistas, setPistas] = useState([]);

  const obtenerPistas = async () => {
    const prompt = `Dame tres pistas para que alguien adivine la siguiente palabra: ${adivinanza}`;

    try {
      const response = await axios.post(
        'https://api.openai.com/v1/completions',
        {
          model: "text-davinci-003",
          prompt,
          max_tokens: 60
        },
        {
          headers: {
            Authorization: `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
          },
        }
      );
      const pistasGeneradas = response.data.choices[0].text.trim().split('\n');
      setPistas(pistasGeneradas);
    } catch (error) {
      console.error("Error al obtener pistas:", error);
    }
  };

  return (
    <div className="App">
      <h1>Adivina la Palabra</h1>
      <input
        type="text"
        value={adivinanza}
        onChange={(e) => setAdivinanza(e.target.value)}
        placeholder="Escribe una palabra..."
      />
      <button onClick={obtenerPistas}>Obtener Pistas</button>
      <div>
        <h2>Pistas</h2>
        {pistas.map((pista, index) => (
          <p key={index}>{pista}</p>
        ))}
      </div>
      <input
        type="text"
        value={respuesta}
        onChange={(e) => setRespuesta(e.target.value)}
        placeholder="¿Cuál es tu respuesta?"
      />
      <button onClick={() => alert(respuesta === adivinanza ? '¡Correcto!' : 'Sigue intentando')}>
        Adivinar
      </button>
    </div>
  );
}

export default App;

Paso 3: Conecta con la API de OpenAI

• Asegúrate de tener tu clave API de OpenAI lista. Si no la tienes, crea una cuenta en OpenAI.
• Agrega la clave API en tu archivo .env como se mencionó anteriormente.

Paso 4: Estiliza la Aplicación

Agrega algo de estilo para que la aplicación sea visualmente atractiva. En el archivo App.css:

.App {
  text-align: center;
  background-color: #f5f5f5;
  padding: 50px;
  border-radius: 10px;
  width: 400px;
  margin: 50px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

input {
  padding: 10px;
  margin: 10px 0;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #ddd;
}

button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

h2 {
  margin-top: 20px;
}

Paso 5: Hazlo Viral

Para darle ese toque viral, puedes agregar algunas características extra:

1. Pistas interactivas: Cada pista puede tener un botón de «Revelar» que el usuario puede usar para obtener una nueva pista.
2. Comparte los resultados: Permite a los usuarios compartir el juego en redes sociales con un botón de «Desafía a tus amigos».
3. Leaderboards: Implementa un sistema de puntos para ver quién adivina más rápido las palabras.
4. Modo de duelo: Permite que dos personas jueguen al mismo tiempo con una palabra oculta y compitan por quién adivina primero.

Paso 6: Despliega la App

Despliega la app en plataformas como Netlify o Vercel. Puedes hacerlo en minutos con un simple comando:

npm run build

Sigue las instrucciones en la plataforma elegida para subir tu proyecto y ¡compártelo con el mundo!