Cómo integrar Supabase a tu aplicación web en Hostinger Horizons

Hostinger Horizons 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 Horizons 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 Horizons. 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 Horizons, 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 Horizons. 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 Horizons

Integrar Supabase con Hostinger Horizons 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 Horizons 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 Horizons 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:

1. Abre la página de registro de Supabase.
2. Introduce tu dirección de correo electrónico y crea una nueva contraseña. Haz clic en Registrarse.

3. 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.
4. 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. 
5. Haz clic en Crear organización para confirmar. 

6. 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:

1. Abre tu panel de control de Hostinger Horizons. A continuación, haz clic en Supabase → Añadir organización.

2. Aparecerá una ventana emergente. Inicia sesión en tu cuenta de Supabase. 
3. Supabase debería pedirte que autorices la solicitud de acceso a la API. Haz clic en Autorizar Hostinger Horizons. 

4. Vuelve al panel de control de Hostinger Horizons y haz clic en Supabase →  Tu organización. 
5. Elige el proyecto que deseas integrar con tu aplicación y haz clic en Conectar.
6. Aparecerá una ventana emergente. Haz clic en Conectar de nuevo para confirmar. 

¡Eso es todo! Ahora, si abres el menú Supabase en Hostinger Horizons, el estado de tu proyecto debería aparecer como Conectado.

Dependiendo de tu aplicación, Hostinger Horizons 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 Horizons. 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 Horizons, 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 Horizons 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 Horizons 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 Horizons 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 Horizons 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 Horizons 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 Horizons.

Si te encuentras con este problema, simplemente pega el código de error en Hostinger Horizons 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 Horizons:

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 Horizons 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 Horizons 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 Horizons 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 Horizons 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.

Conclusión

Hostinger Horizons 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 Horizons. 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 Horizons para crear las tablas necesarias en el panel de control de Supabase. Si encuentras algún problema de integración, pide a Hostinger Horizons 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 Horizons. Conéctate con la comunidad, obtén asesoramiento de expertos y mantente al día de las últimas funciones.