Desarrollar con ChatGPT (formerly Codex)

Si quieres desarrollar con ChatGPT (antes conocido como Codex) y sacarle partido para acelerar prototipos, generar endpoints o crear tests, este artículo te muestra cómo hacerlo de forma práctica y segura. Te explico qué significa usar ChatGPT en el flujo de desarrollo, te doy ejemplos listos para copiar/pegar aplicables a páginas web, e‑commerce y apps, y te propongo un flujo de trabajo con prompts, validación, control de versiones y automatización. También encontrarás las principales limitaciones y cómo mitigarlas para mantener la calidad y la seguridad del código.

¿Qué es y para qué sirve desarrollar con ChatGPT?

Desarrollar con ChatGPT consiste en usar un modelo de lenguaje para generar, corregir, completar o documentar código. En la práctica, te ayuda a ahorrar tiempo en tareas repetitivas: escribir snippets, esbozar tests, proponer rutas y estructuras de endpoints o generar plantillas de README. No sustituye a un desarrollador: piensa en ChatGPT como un asistente que acelera el trabajo, pero cuyas salidas siempre debes revisar.

Cuando hablo de «prompt» me refiero a las instrucciones que le das al modelo; cuanto más contexto (framework, versiones, restricciones) y ejemplos incluyas, mejor será la salida. Recuerda que el modelo puede ofrecer soluciones incompletas o inseguras: valida y prueba todo antes de integrarlo en producción.

Ejemplos prácticos

Abajo tienes tres mini‑casos que muestran prompts concretos y snippets generados. Cada ejemplo incluye una nota sobre qué comprobar manualmente antes de usarlo en tu proyecto.

1. Componente frontend (React)

Objetivo: generar un componente reutilizable ProductCard para la lista de productos en una tienda.

Prompt sugerido (copiar/pegar):

"Eres un asistente que genera componentes React funcionales. Crea un componente ProductCard que reciba props {id, title, price, image} y muestre una tarjeta accesible con imagen, título y precio. Añade propTypes y un test unitario con React Testing Library." 

Snippet generado (ejemplo):

// Generado por ChatGPT. Revisa accesibilidad, estilos y manejo de imágenes.
import React from 'react';
import PropTypes from 'prop-types';

export default function ProductCard({ id, title, price, image }) {
  return (
    <article role="group" aria-labelledby={`title-${id}`} className="product-card">
      <img src={image} alt={title} loading="lazy" />
      <h3 id={`title-${id}`}>{title}</h3>
      <p>{price} €</p>
    </article>
  );
}

ProductCard.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  title: PropTypes.string.isRequired,
  price: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  image: PropTypes.string
};

Qué revisar manualmente: accesibilidad (atributos ARIA y texto alternativo), estilos (clases CSS) y manejo de imágenes (dominios permitidos, carga diferida). Asegúrate de que las imports y rutas coincidan con tu estructura y que no falten dependencias.

2. Endpoint para e‑commerce (Node/Express)

Objetivo: crear un endpoint GET /api/products con paginación básica y validación de query params.

Prompt sugerido:

"Escribe un endpoint GET /api/products en Express que devuelva productos paginados. Utiliza async/await, valida page y limit, y devuelve estructura {data: [], meta: {page, limit, total}}." 

Snippet generado (ejemplo):

// Generado por ChatGPT. Verifica la fuente de datos y la gestión de errores en producción.
const express = require('express');
const router = express.Router();

// función simulada que devuelve total y elementos; sustituye por tu BD
async function getProductsFromDb(page, limit) {
  const total = 100; // revisar: no hardcodear en producción
  const items = Array.from({ length: limit }, (_, i) => ({
    id: (page - 1) * limit + i + 1,
    title: `Producto ${(page - 1) * limit + i + 1}`,
    price: (Math.random() * 100).toFixed(2)
  }));
  return { total, items };
}

router.get('/api/products', async (req, res) => {
  const page = Math.max(1, parseInt(req.query.page, 10) || 1);
  const limit = Math.min(100, Math.max(1, parseInt(req.query.limit, 10) || 10));
  try {
    const { total, items } = await getProductsFromDb(page, limit);
    res.json({ data: items, meta: { page, limit, total } });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'error interno' });
  }
});

module.exports = router;

Qué revisar manualmente: sustituye la función simulada por consultas reales a tu base de datos, maneja correctamente errores y excepciones (no exponer trazas en producción) y valida límites y paginación para evitar sobrecarga. Usa variables de entorno para conexiones y no hardcodees constantes sensibles.

3. Prueba automática (Jest / React Testing Library)

Objetivo: añadir una prueba simple que compruebe que ProductCard renderiza título y precio.

// Generado por ChatGPT. Ejecuta localmente y ajusta imports según tu configuración.
import React from 'react';
import { render, screen } from '@testing-library/react';
import ProductCard from './ProductCard';

test('muestra título y precio', () => {
  render(<ProductCard id="1" title="Camiseta" price="19.99" image="/img.png" />);
  expect(screen.getByText(/Camiseta/i)).toBeInTheDocument();
  expect(screen.getByText(/19.99/)).toBeInTheDocument();
});

Qué revisar manualmente: adapta rutas de import, ejecuta la suite en local y confirma que los selectores son robustos (evita depender de textos exactos si el contenido puede cambiar). Asegúrate de que el entorno de tests tenga las transformaciones necesarias (Babel, Jest config) para JSX y ES modules si corresponde.

Flujo de trabajo recomendado

Integra ChatGPT en tu desarrollo siguiendo pasos claros para no perder control sobre la calidad del código. Un flujo práctico podría ser:

• Diseña prompts con contexto: indica el lenguaje, la versión del framework, restricciones (p. ej. «sin dependencias externas») y el objetivo concreto. Piensa en el prompt como una especificación breve.
• Genera el código y crea una rama específica en tu control de versiones para integrarlo. No pegues el código directamente en main: trabaja en una rama y abre una pull request (PR).
• Prueba localmente: ejecuta linter, tests unitarios e integración. No aceptes código sin ejecutarlo. Un linter es una herramienta que revisa estilo y errores básicos en tu código.
• Valida manualmente: revisa seguridad (inyecciones, exposición de datos), rendimiento y accesibilidad. Complementa con análisis estático y herramientas automáticas.
• Automatiza: configura CI (por ejemplo GitHub Actions) que ejecute tests y, si todo pasa, despliegue a staging o producción según tus reglas.
• Pide revisión humana: en la PR incluye una checklist con items obligatorios (tests verdes, sin secretos, licencias comprobadas) y solicita que alguien del equipo revise cambios críticos.

Este flujo te permite aprovechar la velocidad de ChatGPT sin renunciar a controles que previenen errores en producción.

Ejemplo de workflow (GitHub Actions)

Ajusta node-version y comandos según tu proyecto; protege secretos con GitHub Secrets.

# Generado por ChatGPT. Ajusta node-version y comandos según tu proyecto.
name: CI
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '18'
      - run: npm ci
      - run: npm test
  deploy:
    if: github.ref == 'refs/heads/main' && success()
    runs-on: ubuntu-latest
    needs: test
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run build && npm run deploy

Limitaciones y riesgos y cómo mitigarlos

ChatGPT es una herramienta potente pero no infalible. Estas son las limitaciones más relevantes y cómo gestionarlas:

• Seguridad: nunca envíes secretos (tokens, contraseñas) en los prompts. Mitigación: usa variables de entorno, secretos de CI y revisa el código generado en busca de hardcodes sensibles.
• Privacidad: no compartas datos personales o usuarios reales en prompts. Si necesitas ejemplos reales, anonimízalos o usa datos sintéticos.
• Licencias: el modelo puede sugerir dependencias o fragmentos con licencias. Mitigación: comprueba la licencia de paquetes nuevos antes de incluirlos y evita copiar grandes bloques de código de fuentes sin verificar.
• Calidad y exactitud: el modelo puede generar soluciones incompletas o equivocadas. Mitigación: añade tests, linters y una revisión humana antes de mergear.
• Dependencias inseguras: revisa vulnerabilidades con herramientas de análisis de composición (SCA) como npm audit o equivalentes antes de pasar a producción.

Checklist rápida antes de mergear un PR

• ¿Los tests pasan en CI local y remoto?
• ¿No hay claves, contraseñas ni datos sensibles en el código o en los prompts usados?
• ¿El linter no reporta errores críticos?
• ¿Se ha comprobado la licencia de dependencias nuevas?
• ¿Alguien ha revisado manualmente aspectos de seguridad y rendimiento del snippet?

Plantilla de README reutilizable (parcial)

// Generado por ChatGPT. Completa con datos reales del proyecto.
# Nombre del proyecto
Breve descripción del proyecto.

## Instalación
1. clona el repo
2. instala dependencias: `npm ci`
3. configura variables de entorno en `.env`

## Desarrollo
Inicia el servidor de desarrollo:
`npm run dev`

## Tests
Ejecuta la suite de pruebas:
`npm test`

## Despliegue
Explica el proceso de despliegue (CI/CD) y dónde encontrar logs.

Completa esta plantilla con información real del proyecto (endpoints, variables de entorno, comandos de despliegue) antes de publicarla.

Cómo formular prompts efectivos (con ejemplos)

Un buen prompt contiene: contexto (lenguaje y versión, p. ej. React 18), objetivo claro (qué debe hacer el código), restricciones (sin dependencias externas, accesible, sin secretos) y, cuando sea útil, un ejemplo de entrada/salida. Algunos ejemplos rápidos:

• Frontend (React): «Eres un asistente que genera componentes React funcionales. Crea un componente ProductCard que reciba props {id, title, price, image} y muestre una tarjeta accesible con imagen, título y precio. Añade propTypes y pruebas unitarias con React Testing Library.»
• API (Node/Express): «Escribe un endpoint GET /api/products que devuelva una lista paginada de productos desde una función async getProducts(page, limit). Incluye validación de consultas y ejemplos de respuesta JSON.»
• CI/CD (GitHub Actions): «Genera un workflow de GitHub Actions que ejecute tests con npm test y despliegue a producción si la rama es main. Usa Node 18.»

La clave es ser explícito: el modelo sigue las instrucciones que le das, así que cuanto más claro seas, mejor resultado obtendrás.

¿Quieres ayuda para integrar ChatGPT en tu proyecto?

Si prefieres que alguien con experiencia te acompañe en la integración, auditoría y optimización de soluciones basadas en ChatGPT, en FerBcn te puedo ayudar: desde elegir prompts y configurar pipelines hasta auditar seguridad y licencias. Contacta en https://ferbcn.com y vemos cómo adaptar estas prácticas a tu proyecto.