Automatización del desarrollo web: creando un CRM con IA Studio
Tema: Aprende cómo crear y desplegar un CRM moderno utilizando IA Studio, Supabase, GitHub y Render paso a paso.| Tiempo de lectura estimado: 20 minutos
INTRODUCCION
La inteligencia artificial ha transformado significativamente el desarrollo de software moderno, permitiendo automatizar procesos que anteriormente requerían largos tiempos de programación y configuración manual. En la actualidad, herramientas como IA Studio facilitan la creación de aplicaciones funcionales mediante el uso de prompts inteligentes, lo que agiliza el desarrollo de plataformas empresariales de forma rápida y eficiente.
En este proyecto se desarrolló un CRM médico utilizando IA Studio, Supabase, GitHub y Render. El principal objetivo fue demostrar cómo las tecnologías de inteligencia artificial pueden optimizar el desarrollo web, automatizar procesos y mejorar la administración de aplicaciones modernas.
Durante el desarrollo se llevaron a cabo configuraciones de bases de datos, integración de variables de entorno, publicación del código en GitHub y despliegue en Render. Asimismo, se solucionaron errores relacionados con la autenticación y la creación de usuarios, lo que permitió fortalecer la seguridad y la funcionalidad del sistema.
¿Qué es IA Studio y por qué es importante?
IA Studio es una herramienta basada en inteligencia artificial que permite generar aplicaciones web utilizando instrucciones o prompts personalizados. Su importancia radica en la automatización del desarrollo, reduciendo tiempos de programación y facilitando la integración con tecnologías modernas.veamos la informacion aqui.
Beneficios principales de IA Studio
Automatización del desarrollo
- Permite generar código automáticamente utilizando inteligencia artificial.
Integración rápida
- Facilita la conexión con servicios externos como bases de datos y plataformas cloud.
Optimización del tiempo
- Reduce significativamente el tiempo de construcción de aplicaciones.
Escalabilidad
- Permite crear proyectos modernos y preparados para futuras mejoras.
Creación de la base de datos en Supabase
- Empezamos creando una base de datos en SupaBase para el proyecto. Creamos la cuenta de SupaBase y la base de datos que va a usar IA Studio para crear el proyecto.
Generación del prompt utilizando ChatGPT
- Se le pidió a ChatGPT que creara un prompt para IA Studio, se le dieron unos parámetros (incluyendo la base de datos creada anteriormente con su nombre y contraseña) y nos dió el siguiente prompt: PROMPT IA Studio
Construcción automática del CRM con IA Studio
- Una vez teniendo el prompt se lo dimos a IA Studio para que empezara el proceso.
Login de usuarios
Luego de unos minutos cargando, IA Studio nos pidió una variables de entorno para conectar el CRM con SupaBase.
Gestión de cuentas
Estas variables se obtuvieron desde la misma página de SupaBase de la siguiente forma: para DATABASE_URL, dentro del proyecto se debe ir a la sección “Direct” y copiar el “Connection string”. Luego, se reemplaza “[YOUR-PASSWORD]” por la contraseña real de la base de datos.
Para SUPABASE_URL, en la página principal del proyecto se puede visualizar la URL, la cual debe ser copiada directamente.
Para SUPABASE_ANON_KEY, se obtiene desde la página principal accediendo a configuración o “Settings”, luego a “API Keys”. Dentro de esta sección, se debe ir a “Legacy anon, service_role API Keys” y copiar la clave denominada “anon public”.
SUPABASE_SERVICE_ROLE_KEY: Se consigue haciendo los mismos pasos que antes y en vez de copiar “anon public” se copia el “service_role”.
Para JWT_SECRET, se debe crear manualmente, asegurándose de que sea lo más segura posible.
Integración con base de datos
El proceso de creación de la aplicación puede tardar unos momentos en completarse; en caso de que no se reflejen cambios, se puede hacer clic en “Reload Now”.
Una vez finalizado el proceso, se mostrará una vista previa de cómo queda la página creada, junto con las opciones disponibles.
Panel administrativo
Publicación del proyecto en GitHub
A continuación, se debe ir a la esquina superior derecha de IA Studio y hacer clic en “Publish” o “Publicar”. Luego, se selecciona GitHub y se elige la opción de publicación pública, de modo que la página pueda ser visible para todos.
Se debe verificar que toda la documentación que se va a subir a GitHub sea correcta y, posteriormente, hacer clic en “Stage and commit all changes”.
Una vez finalizado el proceso, se puede acceder al GitHub creado, donde se visualizará el repositorio con la información correspondiente. En este caso, se encuentra disponible en el siguiente enlace: https://github.com/CRMedica/CRMedica_Colombia.
Repositorio del proyecto
A continuación, se debe crear una cuenta nueva en la página de Render, ya que esta plataforma permitirá alojar y publicar la aplicación de forma rápida y sencilla.
Una vez creada la cuenta, se debe proceder a crear un nuevo servicio, seleccionando en este caso la opción de “Web Service” o servicio web.
Despliegue de la aplicación en Render
A continuación, se debe configurar la plataforma vinculándola con la cuenta de GitHub previamente utilizada e instalar Render en dicha cuenta.
Configuración del servicio
Una vez instalado y configurado, se podrán visualizar los repositorios disponibles en GitHub y seleccionar el que se va a utilizar.
En el siguiente paso, se deben configurar las variables de entorno necesarias para poder continuar, añadiendo las correspondientes según los requerimientos del proyecto.
En Render se podrá visualizar la información del repositorio de GitHub y, una vez verificada, se puede seleccionar la opción “Connect” para confirmar que todo esté funcionando correctamente.
- Una vez hecho ya podemos entrar el link de la página web: https://crmedica-colombia.onrender.com/
Solución de errores encontrados
Se realizaron cambios en el frontend debido a fallos detectados en el login, como la ausencia de la opción de recuperación de contraseña y la funcionalidad para crear una cuenta. Las correcciones se implementaron en IntelliJ IDEA, específicamente modificando el script login.tsx, y posteriormente se subieron los cambios mediante un push al repositorio en GitHub.
Recuperación de contraseña
Como se puede observar en la imagen, ahora se encuentra disponible el apartado para crear una cuenta, así como la opción de recuperación o creación de contraseña.
Se presentó un error al momento de crear el usuario, indicando: “No se pudo encontrar la tabla ‘public.users’ en la caché del esquema”. Para solucionarlo, se copió el contenido del archivo schema.sql y se pegó en el SQL Editor de la base de datos en Supabase. Posteriormente, se ejecutó el script, lo que permitió crear correctamente la estructura necesaria y proceder con la creación del usuario sin inconvenientes.
Se agregó el endpoint /api/auth/forgot-password, el cual recibe el correo del usuario y utiliza el método supabase.auth.resetPasswordForEmail() de Supabase para enviar automáticamente un correo con un enlace seguro de restablecimiento. Dicho enlace redirige al usuario a la página /reset-password de la aplicación.
Adicionalmente, en Render se configuró la variable de entorno APP_URL con el valor https://crmedica-colombia.onrender.com, permitiendo que Supabase identifique el dominio al que debe redirigir al usuario después de que este haga clic en el enlace recibido por correo.
Conclusiones -Desarrollo de un CRM médico utilizando inteligencia artificial y tecnologías cloud modernas
El desarrollo del CRM utilizando IA Studio permitió demostrar cómo la inteligencia artificial puede acelerar significativamente el desarrollo de aplicaciones web modernas. La integración con Supabase facilitó la administración de bases de datos y autenticación, mientras que GitHub y Render permitieron desplegar la aplicación de forma rápida y eficiente.
Además, la solución de errores relacionados con login, sesiones y recuperación de contraseñas fortaleció el sistema y permitió comprender la importancia de las configuraciones cloud y la seguridad en aplicaciones modernas.
Este proyecto evidencia que la inteligencia artificial se está convirtiendo en una herramienta fundamental dentro del desarrollo de software, permitiendo construir aplicaciones más rápidas, escalables y eficientes.
Autores: Ana Catalina Parra Arias – Gina Marcela Acosta Ruiz – Nelson Stiven Otavo Paredes–Juan Sebastian Polanco Santofimio
Editor: Magister Ingeniero Carlos Iván Pinzón Romero
Código: UCHEG1-9
Universidad: Universidad Central
FUENTES:
Research & deployment. (s/f). OpenAI. Recuperado el 19 de mayo de 2026, de https://openai.com
GitHub · Change is constant. GitHub keeps you ahead. (s/f).
The cloud for builders. (s/f). Render. Recuperado el 19 de mayo de 2026, de http://WWW.RENDER.COM
Supabase. (2026). Supabase Documentation. https://supabase.com/docs
