{"id":45640,"date":"2025-12-02T17:50:42","date_gmt":"2025-12-02T16:50:42","guid":{"rendered":"\/co\/tutoriales\/como-integrar-supabase-a-una-aplicacion-web-en-hostinger-horizons"},"modified":"2026-03-10T16:42:42","modified_gmt":"2026-03-10T15:42:42","slug":"como-integrar-supabase-a-una-aplicacion-web-en-hostinger-horizons","status":"publish","type":"post","link":"\/co\/tutoriales\/como-integrar-supabase-a-una-aplicacion-web-en-hostinger-horizons","title":{"rendered":"C\u00f3mo integrar Supabase a tu aplicaci\u00f3n web en Hostinger Horizons"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>Hostinger Horizons te permite desarrollar una aplicaci&oacute;n web totalmente funcional sin escribir ninguna l&iacute;nea de c&oacute;digo. Solo tienes que describir tu proyecto y esta plataforma de IA se encargar&aacute; del resto.<\/p><p>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&aacute;cilmente una infraestructura backend para tu aplicaci&oacute;n web que permita el procesamiento y almacenamiento din&aacute;mico de datos.<\/p><p>En este tutorial, aprender&aacute;s a integrar tu aplicaci&oacute;n web con una base de datos Supabase en Hostinger Horizons. Tambi&eacute;n nos aseguraremos de cubrir algunos errores comunes y sus soluciones.<\/p><h2 class=\"wp-block-heading\" id=\"h-por-que-necesitas-supabase\">&iquest;Por qu&eacute; necesitas Supabase?<\/h2><p>Supabase es un proveedor de servicios de bases de datos que te permite configurar f&aacute;cilmente un servicio back-end para tu aplicaci&oacute;n. Es esencial si deseas a&ntilde;adir funciones avanzadas a tu aplicaci&oacute;n web, como personalizaci&oacute;n de contenidos, colaboraci&oacute;n, uso compartido del espacio de trabajo y alertas.<\/p><p>Cuando se integra con Hostinger Horizons, Supabase ampl&iacute;a las capacidades de tu aplicaci&oacute;n m&aacute;s all&aacute; de lo que cualquiera de las dos plataformas puede ofrecer por s&iacute; sola.<\/p><p>Si est&aacute;s desarrollando una aplicaci&oacute;n web sencilla y est&aacute;tica que no necesita la intervenci&oacute;n del usuario, basta con utilizar Hostinger Horizons. Este <a href=\"\/co\/horizons\">creador de aplicaciones con IA<\/a> ofrece una soluci&oacute;n de desarrollo sin c&oacute;digo, un entorno de alojamiento y almacenamiento de datos est&aacute;ticos listo para usar. <\/p><p>Sin embargo, al conectarlo con Supabase, puedes transformar tu aplicaci&oacute;n est&aacute;tica en una experiencia din&aacute;mica e interactiva.<\/p><p>Estos son algunos casos de uso habituales de Supabase para aplicaciones web:<\/p><ul class=\"wp-block-list\">\n<li><strong>Almacenamiento din&aacute;mico de datos<\/strong>: una base de datos permite a tu aplicaci&oacute;n web tomar y almacenar la informaci&oacute;n introducida por los usuarios. Esto es fundamental para funciones b&aacute;sicas como crear una cuenta de usuario y mostrar contenido personalizado.<\/li>\n\n\n\n<li><strong>Autenticaci&oacute;n<\/strong>: Supabase proporciona una funcionalidad de autenticaci&oacute;n preconfigurada para garantizar que solo los usuarios leg&iacute;timos utilicen tu aplicaci&oacute;n. Tambi&eacute;n puedes habilitar el inicio de sesi&oacute;n a trav&eacute;s de redes sociales integrando proveedores compatibles como Google y GitHub.<\/li>\n\n\n\n<li><strong>Procesamiento de datos en tiempo real<\/strong>: Supabase Realtime proporciona capacidades de sincronizaci&oacute;n y procesamiento de datos instant&aacute;neos. Esto te permite a&ntilde;adir funciones como la colaboraci&oacute;n o el chat a tu aplicaci&oacute;n.<\/li>\n\n\n\n<li><strong>Integraci&oacute;n de API<\/strong>: una API te permite conectar varios servicios de terceros con tu aplicaci&oacute;n para habilitar funciones adicionales. Por ejemplo, puedes conectar LLM de OpenAI para incluir una funci&oacute;n basada en IA.&nbsp;<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-integra-supabase-con-hostinger-horizons\">Integra Supabase con Hostinger Horizons<\/h2><p>Integrar Supabase con Hostinger Horizons es muy sencillo, ya que puedes hacerlo directamente desde el panel de control de la plataforma.<\/p><p>Antes de continuar, aseg&uacute;rate de haber <a href=\"\/co\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons\">creado completamente tu aplicaci&oacute;n Hostinger Horizons<\/a> y haber incluido todas las funciones necesarias. De esta manera, la plataforma de IA comprender&aacute; qu&eacute; tablas de la base de datos debe a&ntilde;adir.<\/p><p>Por ejemplo, utiliza el siguiente comando para pedir a Hostinger Horizons que cree una p&aacute;gina de inicio de sesi&oacute;n y registro de usuarios.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Crea una p&aacute;gina de inicio de sesi&oacute;n que solicite a los usuarios su direcci&oacute;n de correo electr&oacute;nico y contrase&ntilde;a. En esa p&aacute;gina, a&ntilde;ade un enlace que redirija a los usuarios a la p&aacute;gina de registro si no tienen una cuenta. Configura el m&eacute;todo de autenticaci&oacute;n, que habilitar&eacute; m&aacute;s adelante con Supabase.<\/pre><p>Una vez que tu aplicaci&oacute;n est&eacute; lista, es el momento de crear una cuenta y una base de datos Supabase. A continuaci&oacute;n te explicamos c&oacute;mo hacerlo:<\/p><ol class=\"wp-block-list\">\n<li>Abre la <a href=\"https:\/\/supabase.com\/dashboard\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">p&aacute;gina de registro de Supabase<\/a>.<\/li>\n\n\n\n<li>Introduce tu direcci&oacute;n de correo electr&oacute;nico y crea una nueva contrase&ntilde;a. Haz clic en <strong>Registrarse<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/supabase-account-creation-page-2-1024x490-1.png\" alt=\"P&aacute;gina de creaci&oacute;n de cuenta Supabase\" class=\"wp-image-47512\"><\/figure><ol start=\"3\" class=\"wp-block-list\">\n<li>Ve a tu bandeja de entrada y abre el correo electr&oacute;nico de confirmaci&oacute;n. Haz clic en <strong>Confirmar direcci&oacute;n de correo electr&oacute;nico<\/strong>.<\/li>\n\n\n\n<li>Llegar&aacute;s a la p&aacute;gina de configuraci&oacute;n de la organizaci&oacute;n de Supabase. Introduce un <strong>nombre<\/strong>, selecciona el <strong>tipo de organizaci&oacute;n <\/strong>y elige un <strong>plan<\/strong>. Elijamos el gratuito para empezar.&nbsp;<\/li>\n\n\n\n<li>Haz clic en <strong>Crear organizaci&oacute;n <\/strong>para confirmar.&nbsp;<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/supabase-organization-creation-page-1024x497-1.png\" alt=\"P&aacute;gina de creaci&oacute;n de cuenta Supabase\" class=\"wp-image-47513\"><\/figure><ol start=\"6\" class=\"wp-block-list\">\n<li>Ser&aacute;s redirigido a la p&aacute;gina de creaci&oacute;n del proyecto. Introduce la informaci&oacute;n necesaria y haz clic en <strong>Crear nuevo proyecto<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/supabase-project-creation-page-1-1024x488-1.png\" alt=\"P&aacute;gina de creaci&oacute;n de cuenta Supabase\" class=\"wp-image-47514\"><\/figure><p>Despu&eacute;s de configurar una base de datos Supabase, podemos continuar con la integraci&oacute;n. Estos son los pasos:<\/p><ol class=\"wp-block-list\">\n<li>Abre tu panel de control de Hostinger Horizons. A continuaci&oacute;n, haz clic en <strong>Supabase<\/strong> &rarr;<strong> A&ntilde;adir organizaci&oacute;n<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/hostinger-horizons-supabase-add-organization-button.png\" alt=\"El bot&oacute;n &laquo;A&ntilde;adir organizaci&oacute;n&raquo; en el men&uacute; de configuraci&oacute;n de Supabase de Hostinger Horizons.\" class=\"wp-image-47515\"><\/figure><ol start=\"2\" class=\"wp-block-list\">\n<li>Aparecer&aacute; una ventana emergente. Inicia sesi&oacute;n en tu cuenta de Supabase.&nbsp;<\/li>\n\n\n\n<li>Supabase deber&iacute;a pedirte que autorices la solicitud de acceso a la API. Haz clic en <strong>Autorizar Hostinger Horizons<\/strong>.&nbsp;<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/hostinger-horizons-connection-authentication-page-in-supabase-1024x604-1.png\" alt=\"P&aacute;gina de autenticaci&oacute;n de conexi&oacute;n de Hostinger Horizons en Supabase\" class=\"wp-image-47516\"><\/figure><ol start=\"4\" class=\"wp-block-list\">\n<li>Vuelve al panel de control de Hostinger Horizons y haz clic en <strong>Supabase<\/strong> &rarr; <strong>&nbsp;Tu organizaci&oacute;n<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Elige el proyecto que deseas integrar con tu aplicaci&oacute;n y haz clic en <strong>Conectar<\/strong>.<\/li>\n\n\n\n<li>Aparecer&aacute; una ventana emergente. Haz clic en <strong>Conectar <\/strong>de nuevo para confirmar.&nbsp;<\/li>\n<\/ol><p>&iexcl;Eso es todo! Ahora, si abres el men&uacute; Supabase en Hostinger Horizons, el estado de tu proyecto deber&iacute;a aparecer como <strong>Conectado<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/supabase-project-connection-status-in-hostinger-horizons.png\" alt=\"Estado de la conexi&oacute;n del proyecto Supabase en Hostinger Horizons\" class=\"wp-image-47517\"><\/figure><p>Dependiendo de tu aplicaci&oacute;n, Hostinger Horizons puede pedirte que ejecutes una consulta SQL en Supabase para crear las tablas de base de datos necesarias.<\/p><p>Si es as&iacute;, inicia sesi&oacute;n en tu cuenta de Supabase y abre el proyecto conectado a Hostinger Horizons. Ve a la <strong>barra lateral <\/strong>&rarr;<strong> Editor SQL de<\/strong>. Pega la consulta SQL y haz clic en <strong>Ejecutar<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/the-sql-editor-menu-in-supabase-1024x403-1.png\" alt=\"El men&uacute; del editor SQL en Supabase\" class=\"wp-image-47518\"><\/figure><h2 class=\"wp-block-heading\" id=\"h-probar-la-integracion-de-supabase\">Probar la integraci&oacute;n de Supabase<\/h2><p>Despu&eacute;s de conectar tu base de datos Supabase, probemos la funcionalidad de tu aplicaci&oacute;n web para asegurarnos de que la integraci&oacute;n funciona correctamente. La forma m&aacute;s f&aacute;cil de hacerlo es utilizar la aplicaci&oacute;n como lo har&iacute;a un usuario.<\/p><p>Este proceso variar&aacute; significativamente en funci&oacute;n de la funcionalidad y la finalidad de tu aplicaci&oacute;n web. En cualquier caso, puedes comprobar todas las funciones directamente desde el men&uacute; de vista previa de Hostinger Horizons, en la barra lateral derecha.<\/p><p>En este tutorial, comprobaremos c&oacute;mo nuestra aplicaci&oacute;n para tomar notas, que hemos creado anteriormente, gestiona las funciones de registro, inicio de sesi&oacute;n y alertas en tiempo real. Para ello, crearemos una cuenta, iniciaremos sesi&oacute;n en ella y crearemos una nota urgente.<\/p><p>Todas las funciones de nuestra aplicaci&oacute;n funcionan correctamente. Todas las notas creadas anteriormente siguen existiendo cuando volvemos a iniciar sesi&oacute;n en una cuenta. Tambi&eacute;n puede enviar una notificaci&oacute;n en funci&oacute;n de la hora especificada.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/web-application-successfully-sends-a-notification.png\" alt=\"Notificaci&oacute;n de ejemplo de la aplicaci&oacute;n web\" class=\"wp-image-47519\"><\/figure><\/div><p>Ten en cuenta que, dado que Hostinger Horizons a&uacute;n se encuentra en una fase inicial, es posible que la integraci&oacute;n no funcione a la perfecci&oacute;n en tu primer intento. Es posible que tengas que solicitar que se corrijan algunas funciones y se ajusten varias &aacute;reas.<\/p><p>A continuaci&oacute;n, repasaremos algunos problemas comunes que pueden surgir al integrar Supabase con Hostinger Horizons y sugeriremos soluciones para ellos.<\/p><h2 class=\"wp-block-heading\" id=\"h-solucion-de-problemas-de-conexion-con-la-base-de-datos\">Soluci&oacute;n de problemas de conexi&oacute;n con la base de datos<\/h2><p>A menudo se producen errores al integrar una base de datos Supabase con tu aplicaci&oacute;n. Aunque Hostinger Horizons puede identificar y resolver autom&aacute;ticamente los problemas, los problemas relacionados con la base de datos requieren una soluci&oacute;n manual.<\/p><p>A continuaci&oacute;n, te mostramos algunos de los problemas m&aacute;s comunes al conectar Supabase, sus implicaciones y soluciones.<\/p><p><strong>Comportamiento inesperado de la autenticaci&oacute;n<\/strong><\/p><p>De forma predeterminada, Supabase implementar&aacute; un m&eacute;todo de autenticaci&oacute;n por correo electr&oacute;nico para la creaci&oacute;n de cuentas y el inicio de sesi&oacute;n. El usuario debe hacer clic en el enlace de confirmaci&oacute;n enviado a su direcci&oacute;n de correo electr&oacute;nico para completar el proceso de registro.<\/p><p>Si no puedes iniciar sesi&oacute;n despu&eacute;s de crear una cuenta en tu aplicaci&oacute;n, aseg&uacute;rate de haber autorizado tu cuenta. De lo contrario, ver&aacute;s el estado<strong> Esperando verificaci&oacute;n <\/strong>en Supabase.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/user-verification-status-in-supabase-1024x359-1.png\" alt=\"Estado de verificaci&oacute;n del usuario en Supabase\" class=\"wp-image-47520\"><\/figure><p>Si la URL de autenticaci&oacute;n no es v&aacute;lida, comprueba si el enlace comienza por <strong>localhost:3000<\/strong>. Si es as&iacute;, sustit&uacute;yelo por la direcci&oacute;n de tu aplicaci&oacute;n web para que Supabase pueda verificar correctamente tu correo electr&oacute;nico.<\/p><p>Para ello, ve al <strong>panel de control de Supabase<\/strong> &rarr; <strong>barra lateral<\/strong><strong> <\/strong>&rarr;<strong> Autenticaci&oacute;n<\/strong> &rarr; <strong>Configuraci&oacute;n de URL<\/strong>. Reemplaza la<strong> URL del sitio <\/strong>por la direcci&oacute;n de tu aplicaci&oacute;n y haz clic en <strong>Guardar cambios<\/strong>. Repite el proceso de verificaci&oacute;n y deber&iacute;as poder crear una cuenta.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/site-url-configuration-in-supabase-1024x396-1.png\" alt=\"Configuraci&oacute;n de la URL del sitio en Supabase\" class=\"wp-image-47521\"><\/figure><p><strong>Realtime no se sincroniza<\/strong><\/p><p>Si la funci&oacute;n de colaboraci&oacute;n de tu aplicaci&oacute;n no funciona correctamente, es probable que el problema se encuentre en la configuraci&oacute;n de tiempo real de Supabase.<\/p><p>Esto se debe a que, cuando haces un <a href=\"\/co\/tutoriales\/prompts-para-hostinger-horizons\" rel=\"nofollow\">prompt Hostinger Horizons <\/a>que a&ntilde;ada funciones como la colaboraci&oacute;n, solo configura el c&oacute;digo de tu aplicaci&oacute;n. A&uacute;n debes configurar Supabase manualmente para habilitar Realtime.<\/p><p>Normalmente, puedes resolver este problema habilitando la replicaci&oacute;n de las tablas de tu base de datos. Para ello, ve al <strong>panel de control de Supabase<\/strong> &rarr; <strong>&nbsp;barra lateral<\/strong> &rarr; <strong>&nbsp;Base de datos<\/strong> &rarr; <strong>&nbsp;Publicaciones<\/strong>. Ve a la columna<strong> Fuente<\/strong>, haz clic en <strong>Tablas <\/strong>y activa la configuraci&oacute;n <strong>Replicaci&oacute;n<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/07\/database-table-replication-toggles-in-supabase-1024x403-1.png\" alt=\"Alternar la replicaci&oacute;n de tablas de bases de datos en Supabase\" class=\"wp-image-47522\"><\/figure><p>Si Realtime sigue teniendo problemas despu&eacute;s de configurar la replicaci&oacute;n de la tabla, pide a Hostinger Horizons que lo solucione. Podr&aacute; identificar el problema y darte instrucciones detalladas.<\/p><p><strong>Claves API no v&aacute;lidas<\/strong><\/p><p>Las claves API son credenciales que permiten a tu aplicaci&oacute;n comunicarse con tu base de datos Supabase. Cuando no son v&aacute;lidas, se producen problemas de conectividad.<\/p><p>Esto suele ocurrir cuando conectas la base de datos manualmente insertando las credenciales en el c&oacute;digo de tu aplicaci&oacute;n. Es poco probable que ocurra si utilizas la funci&oacute;n de integraci&oacute;n de Supabase integrada en Hostinger Horizons.<\/p><p>Si te encuentras con este problema, simplemente pega el c&oacute;digo de error en Hostinger Horizons y solicita que lo resuelvan.<\/p><h2 class=\"wp-block-heading\" id=\"h-practicas-recomendadas-de-seguridad\">Pr&aacute;cticas recomendadas de seguridad<\/h2><p>Es fundamental proteger la aplicaci&oacute;n web y la conexi&oacute;n a la base de datos Supabase, ya que los ciberdelincuentes pueden interceptarla para acceder a informaci&oacute;n confidencial.&nbsp;<\/p><p>A continuaci&oacute;n, te indicamos varias consejos de seguridad para aplicaciones web al integrar Supabase con Hostinger Horizons:<\/p><p><strong>Proteger tus claves en producci&oacute;n<\/strong><\/p><p>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.<\/p><p>Para proteger tus claves API, gu&aacute;rdalas en una variable de entorno en lugar de en el c&oacute;digo de tu aplicaci&oacute;n. Aunque Hostinger Horizons no permite el acceso al c&oacute;digo fuente del proyecto de forma predeterminada, te recomendamos que solicites que incluya esas credenciales en otra ubicaci&oacute;n.<\/p><p>Adem&aacute;s, solicita a Hostinger Horizons que utilice claves de base de datos que no est&eacute;n expuestas a los clientes para operaciones con requisitos de permiso m&aacute;s estrictos. Adem&aacute;s, aseg&uacute;rate de que tus claves no sean visibles en la interfaz.<\/p><p><strong>Uso correcto de HTTPS, dominios y CORS<\/strong><\/p><p>Indica a Hostinger Horizons que integre Supabase con tu aplicaci&oacute;n solo a trav&eacute;s de HTTPS. Este protocolo seguro y cifrado garantiza que la transmisi&oacute;n de datos entre esos dos servicios est&eacute; protegida contra manipulaciones.<\/p><p>Reemplazar el dominio temporal por uno adecuado tambi&eacute;n puede ayudar a mejorar la seguridad de tu aplicaci&oacute;n web. Puedes hacerlo directamente a trav&eacute;s del panel de control de Hostinger Horizons despu&eacute;s de publicar tu proyecto.<\/p><p>El uso de un dominio propio te proporciona un control total, lo que garantiza su integridad y seguridad. Adem&aacute;s, puedes configurar pol&iacute;ticas de intercambio de recursos entre or&iacute;genes (CORS) para permitir que solo tu dominio interact&uacute;e con el backend de Supabase.<\/p><p><strong>Gesti&oacute;n de roles de usuario y pol&iacute;ticas RLS de bases de datos<\/strong><\/p><p>Supabase proporciona el sistema Row Level Security (RLS), que te ayuda a crear reglas y pol&iacute;ticas de acceso para tu base de datos.<\/p><p>Para proteger tu base de datos, crea una pol&iacute;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.<\/p><p>Adem&aacute;s, comprueba peri&oacute;dicamente las funciones de los usuarios y sus permisos en tu base de datos. Aseg&uacute;rate de que no tengan privilegios excesivos que les concedan un acceso innecesario a datos o tablas confidenciales.<\/p><h2 class=\"wp-block-heading\" id=\"h-conecta-supabase-a-tu-proyecto-de-horizons\">Conecta Supabase a tu proyecto de Horizons<\/h2><p>Si quieres complementar la informaci&oacute;n anterior, mira el videotutorial de la Academia de Hostinger.<\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Conecta Supabase a Tu Proyecto de Hostinger Horizons\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/ip_eNBjllqA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-spain.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">Suscribirse \u00a1Para m\u00e1s videos educativos!<\/span>\n          <span class=\"channel-name\">Academia de Hostinger<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n        <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCYmKCu1yo_L0fqKe3U_oMnw?sub_confirmation=1\">\n          <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n          <span>Suscribirse<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>Hostinger Horizons es suficiente por s&iacute; solo para crear una aplicaci&oacute;n web sencilla y est&aacute;tica. Sin embargo, debes integrar un servicio de base de datos como Supabase si deseas a&ntilde;adir funciones avanzadas que impliquen el almacenamiento y el procesamiento din&aacute;mico de datos.<\/p><p>Para integrar Supabase con tu aplicaci&oacute;n web, simplemente haz clic en el bot&oacute;n Supabase en el panel de control de Hostinger Horizons. Inicia sesi&oacute;n en tu cuenta y autoriza el acceso a la API. Selecciona una organizaci&oacute;n y un proyecto, y luego haz clic en <strong>Conectar<\/strong>.<\/p><p>A continuaci&oacute;n, sigue las instrucciones de Hostinger Horizons para crear las tablas necesarias en el panel de control de Supabase. Si encuentras alg&uacute;n problema de integraci&oacute;n, pide a Hostinger Horizons que lo solucione o que te proporcione una gu&iacute;a de resoluci&oacute;n de problemas.<\/p><p>&iexcl;Eso es todo! Ahora que Supabase est&aacute; integrado en tu aplicaci&oacute;n web, puedes a&ntilde;adir funciones m&aacute;s avanzadas. Si tienes alguna dificultad durante la configuraci&oacute;n, deja un comentario a continuaci&oacute;n y aseg&uacute;rate de unirte a nuestra comunidad de Discord. &iexcl;Buena suerte!<\/p><p>&Uacute;nete a nuestro <a href=\"https:\/\/discord.com\/invite\/8p8nBUHrZk\" target=\"_blank\" rel=\"noreferrer noopener\">canal de Discord<\/a> para obtener m&aacute;s consejos e inspiraci&oacute;n sobre c&oacute;mo sacar el m&aacute;ximo provecho a Hostinger Horizons. Con&eacute;ctate con la comunidad, obt&eacute;n asesoramiento de expertos y mantente al d&iacute;a de las &uacute;ltimas funciones.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hostinger Horizons te permite desarrollar una aplicaci&oacute;n web totalmente funcional sin escribir ninguna l&iacute;nea de c&oacute;digo. Solo tienes que describir tu proyecto y esta plataforma de IA se encargar&aacute; 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 [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/co\/tutoriales\/como-integrar-supabase-a-una-aplicacion-web-en-hostinger-horizons\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":353,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-45640","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/hostinger-horizons-supabase-integration","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-integrar-supabase-a-web-app","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-integrar-supabase-a-una-aplicacion-web-en-hostinger-horizons","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/hostinger-horizons-supabase-integration","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/hostinger-horizons-supabase-integration","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-integrar-supabase-a-una-aplicacion-web-en-hostinger-horizons","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-integrar-supabase-a-una-aplicacion-web-en-hostinger-horizons","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-integrar-supabase-a-una-aplicacion-web-en-hostinger-horizons","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-integrar-supabase-a-web-app","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/45640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=45640"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/45640\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=45640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=45640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=45640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}