Cómo Crear Tu Propia App con ChatGPT Integrado en Menos de 1 Hora

Tiempo de lectura: 2 minutos

En este tutorial, aprenderás a crear una aplicación desde cero que aprovecha el poder de la IA generativa de ChatGPT (OpenAI) para interactuar con los usuarios en tiempo real. Perfecto para principiantes y profesionales que quieran llevar su desarrollo al siguiente nivel y generar un producto atractivo. Usaremos React Native para la app móvil y Node.js para el backend.

Paso 1: Configurar el Backend con OpenAI API

1.1 Crear una cuenta en OpenAI

• Ve a OpenAI y regístrate.
• Genera tu clave de API en la sección de «API Keys».

1.2 Configura tu servidor backend

Usaremos Node.js con Express. Crea un proyecto:

mkdir chatgpt-app && cd chatgpt-app
npm init -y
npm install express dotenv body-parser openai

Crea un archivo .env para tu clave:

OPENAI_API_KEY=tu_clave_aqui

Código del servidor (server.js):

const express = require('express');
const bodyParser = require('body-parser');
const { Configuration, OpenAIApi } = require('openai');
require('dotenv').config();

const app = express();
app.use(bodyParser.json());

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

app.post('/chat', async (req, res) => {
  const { message } = req.body;
  try {
    const response = await openai.createCompletion({
      model: 'text-davinci-003',
      prompt: message,
      max_tokens: 150,
    });
    res.json({ reply: response.data.choices[0].text.trim() });
  } catch (error) {
    res.status(500).send(error.toString());
  }
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

Inicia el servidor:

node server.js

Paso 2: Crear la App Móvil con React Native

2.1 Instalar el entorno

Asegúrate de tener Node.js, npm, y Expo CLI:

npm install -g expo-cli

Crea un nuevo proyecto:

expo init chatgpt-app
cd chatgpt-app
npm install axios

2.2 Diseñar la interfaz

Edita el archivo App.js:

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, ScrollView } from 'react-native';
import axios from 'axios';

export default function App() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  const sendMessage = async () => {
    if (!input.trim()) return;
    const userMessage = { sender: 'user', text: input };
    setMessages([...messages, userMessage]);
    setInput('');

    try {
      const response = await axios.post('http://<TU_IP>:3000/chat', { message: input });
      const botMessage = { sender: 'bot', text: response.data.reply };
      setMessages((prev) => [...prev, botMessage]);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View style={styles.container}>
      <ScrollView style={styles.chat}>
        {messages.map((msg, index) => (
          <Text
            key={index}
            style={[styles.message, msg.sender === 'user' ? styles.user : styles.bot]}
          >
            {msg.text}
          </Text>
        ))}
      </ScrollView>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={input}
          onChangeText={setInput}
          placeholder="Escribe tu mensaje..."
        />
        <Button title="Enviar" onPress={sendMessage} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#f4f4f4' },
  chat: { flex: 1, marginBottom: 10 },
  message: { marginVertical: 5, padding: 10, borderRadius: 5 },
  user: { backgroundColor: '#007aff', color: '#fff', alignSelf: 'flex-end' },
  bot: { backgroundColor: '#e5e5ea', alignSelf: 'flex-start' },
  inputContainer: { flexDirection: 'row', alignItems: 'center' },
  input: { flex: 1, borderWidth: 1, borderColor: '#ccc', borderRadius: 5, padding: 10, marginRight: 10 },
});

Paso 3: Probar la App

1. Asegúrate de que el servidor esté corriendo en tu máquina local.
2. Inicia la app móvil: expo start
3. Escanea el código QR con la app de Expo Go y prueba la interacción.