Cómo integrar Supabase a tu aplicación web en Hostinger Creador con IA
Sep 18, 2026
/
By Diego B.
/
8 min Leer
Hostinger Creador con IA te permite desarrollar una aplicación web totalmente funcional sin escribir ninguna línea de código. Solo tienes que describir tu proyecto y esta plataforma de IA se encargará del resto.
Y para ampliar el portfolio de posibilidades, Hostinger Creador con IA se integra con el servicio de base de datos Supabase. Esto significa que puedes configurar fácilmente una infraestructura backend para tu aplicación web que permita el procesamiento y almacenamiento dinámico de datos.
En este tutorial, aprenderás a integrar tu aplicación web con una base de datos Supabase en Hostinger Creador con IA. También nos aseguraremos de cubrir algunos errores comunes y sus soluciones.
¿Por qué necesitas Supabase?
Supabase es un proveedor de servicios de bases de datos que te permite configurar fácilmente un servicio back-end para tu aplicación. Es esencial si deseas añadir funciones avanzadas a tu aplicación web, como personalización de contenidos, colaboración, uso compartido del espacio de trabajo y alertas.
Cuando se integra con Hostinger Creador con IA, Supabase amplía las capacidades de tu aplicación más allá de lo que cualquiera de las dos plataformas puede ofrecer por sí sola.
Si estás desarrollando una aplicación web sencilla y estática que no necesita la intervención del usuario, basta con utilizar Hostinger Creador con IA. Este creador de aplicaciones con IA ofrece una solución de desarrollo sin código, un entorno de alojamiento y almacenamiento de datos estáticos listo para usar.
Sin embargo, al conectarlo con Supabase, puedes transformar tu aplicación estática en una experiencia dinámica e interactiva.
Estos son algunos casos de uso habituales de Supabase para aplicaciones web:
- Almacenamiento dinámico de datos: una base de datos permite a tu aplicación web tomar y almacenar la información introducida por los usuarios. Esto es fundamental para funciones básicas como crear una cuenta de usuario y mostrar contenido personalizado.
- Autenticación: Supabase proporciona una funcionalidad de autenticación preconfigurada para garantizar que solo los usuarios legítimos utilicen tu aplicación. También puedes habilitar el inicio de sesión a través de redes sociales integrando proveedores compatibles como Google y GitHub.
- Procesamiento de datos en tiempo real: Supabase Realtime proporciona capacidades de sincronización y procesamiento de datos instantáneos. Esto te permite añadir funciones como la colaboración o el chat a tu aplicación.
- Integración de API: una API te permite conectar varios servicios de terceros con tu aplicación para habilitar funciones adicionales. Por ejemplo, puedes conectar LLM de OpenAI para incluir una función basada en IA.
Integra Supabase con Hostinger Creador con IA
Integrar Supabase con Hostinger Creador con IA es muy sencillo, ya que puedes hacerlo directamente desde el panel de control de la plataforma.
Antes de continuar, asegúrate de haber creado completamente tu aplicación Hostinger Creador con IA y haber incluido todas las funciones necesarias. De esta manera, la plataforma de IA comprenderá qué tablas de la base de datos debe añadir.
Por ejemplo, utiliza el siguiente comando para pedir a Hostinger Creador con IA que cree una página de inicio de sesión y registro de usuarios.
Crea una página de inicio de sesión que solicite a los usuarios su dirección de correo electrónico y contraseña. En esa página, añade un enlace que redirija a los usuarios a la página de registro si no tienen una cuenta. Configura el método de autenticación, que habilitaré más adelante con Supabase.
Una vez que tu aplicación esté lista, es el momento de crear una cuenta y una base de datos Supabase. A continuación te explicamos cómo hacerlo:
- Abre la página de registro de Supabase.
- Introduce tu dirección de correo electrónico y crea una nueva contraseña. Haz clic en Registrarse.
- Ve a tu bandeja de entrada y abre el correo electrónico de confirmación. Haz clic en Confirmar dirección de correo electrónico.
- Llegarás a la página de configuración de la organización de Supabase. Introduce un nombre, selecciona el tipo de organización y elige un plan. Elijamos el gratuito para empezar.
- Haz clic en Crear organización para confirmar.
- Serás redirigido a la página de creación del proyecto. Introduce la información necesaria y haz clic en Crear nuevo proyecto.
Después de configurar una base de datos Supabase, podemos continuar con la integración. Estos son los pasos:
- Abre tu panel de control de Hostinger Creador con IA. A continuación, haz clic en Supabase → Añadir organización.
- Aparecerá una ventana emergente. Inicia sesión en tu cuenta de Supabase.
- Supabase debería pedirte que autorices la solicitud de acceso a la API. Haz clic en Autorizar Hostinger Creador con IA.
- Vuelve al panel de control de Hostinger Creador con IA y haz clic en Supabase → Tu organización.
- Elige el proyecto que deseas integrar con tu aplicación y haz clic en Conectar.
- Aparecerá una ventana emergente. Haz clic en Conectar de nuevo para confirmar.
¡Eso es todo! Ahora, si abres el menú Supabase en Hostinger Creador con IA, el estado de tu proyecto debería aparecer como Conectado.
Dependiendo de tu aplicación, Hostinger Creador con IA puede pedirte que ejecutes una consulta SQL en Supabase para crear las tablas de base de datos necesarias.
Si es así, inicia sesión en tu cuenta de Supabase y abre el proyecto conectado a Hostinger Creador con IA. Ve a la barra lateral → Editor SQL de. Pega la consulta SQL y haz clic en Ejecutar.
Probar la integración de Supabase
Después de conectar tu base de datos Supabase, probemos la funcionalidad de tu aplicación web para asegurarnos de que la integración funciona correctamente. La forma más fácil de hacerlo es utilizar la aplicación como lo haría un usuario.
Este proceso variará significativamente en función de la funcionalidad y la finalidad de tu aplicación web. En cualquier caso, puedes comprobar todas las funciones directamente desde el menú de vista previa de Hostinger Creador con IA, en la barra lateral derecha.
En este tutorial, comprobaremos cómo nuestra aplicación para tomar notas, que hemos creado anteriormente, gestiona las funciones de registro, inicio de sesión y alertas en tiempo real. Para ello, crearemos una cuenta, iniciaremos sesión en ella y crearemos una nota urgente.
Todas las funciones de nuestra aplicación funcionan correctamente. Todas las notas creadas anteriormente siguen existiendo cuando volvemos a iniciar sesión en una cuenta. También puede enviar una notificación en función de la hora especificada.
Ten en cuenta que, dado que Hostinger Creador con IA aún se encuentra en una fase inicial, es posible que la integración no funcione a la perfección en tu primer intento. Es posible que tengas que solicitar que se corrijan algunas funciones y se ajusten varias áreas.
A continuación, repasaremos algunos problemas comunes que pueden surgir al integrar Supabase con Hostinger Creador con IA y sugeriremos soluciones para ellos.
Solución de problemas de conexión con la base de datos
A menudo se producen errores al integrar una base de datos Supabase con tu aplicación. Aunque Hostinger Creador con IA puede identificar y resolver automáticamente los problemas, los problemas relacionados con la base de datos requieren una solución manual.
A continuación, te mostramos algunos de los problemas más comunes al conectar Supabase, sus implicaciones y soluciones.
Comportamiento inesperado de la autenticación
De forma predeterminada, Supabase implementará un método de autenticación por correo electrónico para la creación de cuentas y el inicio de sesión. El usuario debe hacer clic en el enlace de confirmación enviado a su dirección de correo electrónico para completar el proceso de registro.
Si no puedes iniciar sesión después de crear una cuenta en tu aplicación, asegúrate de haber autorizado tu cuenta. De lo contrario, verás el estado Esperando verificación en Supabase.
Si la URL de autenticación no es válida, comprueba si el enlace comienza por localhost:3000. Si es así, sustitúyelo por la dirección de tu aplicación web para que Supabase pueda verificar correctamente tu correo electrónico.
Para ello, ve al panel de control de Supabase → barra lateral → Autenticación → Configuración de URL. Reemplaza la URL del sitio por la dirección de tu aplicación y haz clic en Guardar cambios. Repite el proceso de verificación y deberías poder crear una cuenta.
Realtime no se sincroniza
Si la función de colaboración de tu aplicación no funciona correctamente, es probable que el problema se encuentre en la configuración de tiempo real de Supabase.
Esto se debe a que, cuando haces un prompt Hostinger Creador con IA que añada funciones como la colaboración, solo configura el código de tu aplicación. Aún debes configurar Supabase manualmente para habilitar Realtime.
Normalmente, puedes resolver este problema habilitando la replicación de las tablas de tu base de datos. Para ello, ve al panel de control de Supabase → barra lateral → Base de datos → Publicaciones. Ve a la columna Fuente, haz clic en Tablas y activa la configuración Replicación.
Si Realtime sigue teniendo problemas después de configurar la replicación de la tabla, pide a Hostinger Creador con IA que lo solucione. Podrá identificar el problema y darte instrucciones detalladas.
Claves API no válidas
Las claves API son credenciales que permiten a tu aplicación comunicarse con tu base de datos Supabase. Cuando no son válidas, se producen problemas de conectividad.
Esto suele ocurrir cuando conectas la base de datos manualmente insertando las credenciales en el código de tu aplicación. Es poco probable que ocurra si utilizas la función de integración de Supabase integrada en Hostinger Creador con IA.
Si te encuentras con este problema, simplemente pega el código de error en Hostinger Creador con IA y solicita que lo resuelvan.
Prácticas recomendadas de seguridad
Es fundamental proteger la aplicación web y la conexión a la base de datos Supabase, ya que los ciberdelincuentes pueden interceptarla para acceder a información confidencial.
A continuación, te indicamos varias consejos de seguridad para aplicaciones web al integrar Supabase con Hostinger Creador con IA:
Proteger tus claves en producción
Las claves API de los proyectos de Supabase son credenciales muy sensibles. Si se ven comprometidas, pueden permitir el acceso a tu base de datos a personas no autorizadas.
Para proteger tus claves API, guárdalas en una variable de entorno en lugar de en el código de tu aplicación. Aunque Hostinger Creador con IA no permite el acceso al código fuente del proyecto de forma predeterminada, te recomendamos que solicites que incluya esas credenciales en otra ubicación.
Además, solicita a Hostinger Creador con IA que utilice claves de base de datos que no estén expuestas a los clientes para operaciones con requisitos de permiso más estrictos. Además, asegúrate de que tus claves no sean visibles en la interfaz.
Uso correcto de HTTPS, dominios y CORS
Indica a Hostinger Creador con IA que integre Supabase con tu aplicación solo a través de HTTPS. Este protocolo seguro y cifrado garantiza que la transmisión de datos entre esos dos servicios esté protegida contra manipulaciones.
Reemplazar el dominio temporal por uno adecuado también puede ayudar a mejorar la seguridad de tu aplicación web. Puedes hacerlo directamente a través del panel de control de Hostinger Creador con IA después de publicar tu proyecto.
El uso de un dominio propio te proporciona un control total, lo que garantiza su integridad y seguridad. Además, puedes configurar políticas de intercambio de recursos entre orígenes (CORS) para permitir que solo tu dominio interactúe con el backend de Supabase.
Gestión de roles de usuario y políticas RLS de bases de datos
Supabase proporciona el sistema Row Level Security (RLS), que te ayuda a crear reglas y políticas de acceso para tu base de datos.
Para proteger tu base de datos, crea una política que permita a los usuarios solo ver, acceder y modificar sus datos. Esto ayuda a evitar que personas no autorizadas accedan a los registros de otros, lo que puede suponer un riesgo para la seguridad.
Además, comprueba periódicamente las funciones de los usuarios y sus permisos en tu base de datos. Asegúrate de que no tengan privilegios excesivos que les concedan un acceso innecesario a datos o tablas confidenciales.
Conecta Supabase a tu proyecto de Hostinger Creador con IA
Si quieres complementar la información anterior, mira el videotutorial de la Academia de Hostinger.
Conclusión
Hostinger Creador con IA es suficiente por sí solo para crear una aplicación web sencilla y estática. Sin embargo, debes integrar un servicio de base de datos como Supabase si deseas añadir funciones avanzadas que impliquen el almacenamiento y el procesamiento dinámico de datos.
Para integrar Supabase con tu aplicación web, simplemente haz clic en el botón Supabase en el panel de control de Hostinger Creador con IA. Inicia sesión en tu cuenta y autoriza el acceso a la API. Selecciona una organización y un proyecto, y luego haz clic en Conectar.
A continuación, sigue las instrucciones de Hostinger Creador con IA para crear las tablas necesarias en el panel de control de Supabase. Si encuentras algún problema de integración, pide a Hostinger Creador con IA que lo solucione o que te proporcione una guía de resolución de problemas.
¡Eso es todo! Ahora que Supabase está integrado en tu aplicación web, puedes añadir funciones más avanzadas. Si tienes alguna dificultad durante la configuración, deja un comentario a continuación y asegúrate de unirte a nuestra comunidad de Discord. ¡Buena suerte!
Únete a nuestro canal de Discord para obtener más consejos e inspiración sobre cómo sacar el máximo provecho a Hostinger Creador con IA. Conéctate con la comunidad, obtén asesoramiento de expertos y mantente al día de las últimas funciones.
All of the tutorial content on this website is subject to Hostinger's rigorous editorial standards and values.
Diego es comunicador social, especialista en publicidad digital que trabaja constantemente en mejorar sus conocimientos de marketing digital, enfocándose en contenido y SEO. Idiomas, series, libros y cursos en internet son sus hobbies principales, además de los deportes. Este es su perfil de LinkedIn.
Comentarios
0 responses