{"id":45730,"date":"2025-12-02T17:41:15","date_gmt":"2025-12-02T16:41:15","guid":{"rendered":"\/ar\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons"},"modified":"2026-03-10T16:32:38","modified_gmt":"2026-03-10T15:32:38","slug":"como-crear-una-aplicacion-web-con-hostinger-horizons","status":"publish","type":"post","link":"\/ar\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons\/","title":{"rendered":"C\u00f3mo crear una aplicaci\u00f3n web con Hostinger Horizons"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p><strong>Hostinger Horizons <\/strong>es una herramienta potenciada por IA que te permite <strong>crear aplicaciones web sin escribir una sola l&iacute;nea de c&oacute;digo<\/strong>.&nbsp;<\/p><p>Tanto si necesitas una aplicaci&oacute;n de fitness para planes de entrenamiento personalizados como una herramienta de gesti&oacute;n de voluntarios para una organizaci&oacute;n sin &aacute;nimo de lucro, <strong>solo tienes que introducir tus indicaciones <\/strong>y Hostinger Horizons se encargar&aacute; del resto.<\/p><p>Es una opci&oacute;n excelente para los creadores debutantes de aplicaciones web sin experiencia en codificaci&oacute;n. Los empresarios independientes con un presupuesto limitado tambi&eacute;n pueden beneficiarse, ya que pueden crear aplicaciones totalmente funcionales sin necesidad de contratar desarrolladores.<\/p><p>En esta gu&iacute;a, aprender&aacute;s a crear una aplicaci&oacute;n web utilizando Hostinger Horizons, desde la configuraci&oacute;n de tu primer proyecto hasta su lanzamiento para acceso p&uacute;blico.&nbsp;<\/p><p>Descubrir&aacute;s c&oacute;mo perfeccionar tus prompts para obtener mejores resultados, utilizar eficazmente las funciones clave y optimizar la funcionalidad de tu aplicaci&oacute;n para adaptarla a tus necesidades.<\/p><h2 class=\"wp-block-heading\" id=\"h-crea-una-app-web-en-siete-pasos-con-hostinger-horizons\">Crea una app web en siete pasos con Hostinger Horizons<\/h2><p>Para ilustrar mejor el proceso de creaci&oacute;n de una aplicaci&oacute;n web con Hostinger Horizons, en este tutorial crearemos una <strong>aplicaci&oacute;n web de fitness <\/strong>que genere planes personalizados de entrenamiento y dieta basados en los datos del usuario como la edad, la altura, el peso, el nivel de actividad y las condiciones de salud existentes.<\/p><p>Si est&aacute;s trabajando en un tipo diferente de aplicaci&oacute;n web, no dudes en ajustar las indicaciones y caracter&iacute;sticas respectivamente.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-1-registrate-e-inicia-un-nuevo-proyecto\">1. Reg&iacute;strate e inicia un nuevo proyecto<\/h3><p>Comienza visitando la <a href=\"\/ar\/horizons\">p&aacute;gina oficial de Hostinger Horizons<\/a> y elige un plan que se ajuste a tus necesidades.&nbsp;<\/p><p>A partir de<strong> AR$ 41499.00 al mes<\/strong>, todos nuestros planes ofrecen las mismas funciones de creaci&oacute;n de aplicaciones web y un<strong> mes de alojamiento gratuito<\/strong>. La diferencia radica en los l&iacute;mites de interacciones mensuales, que llegan hasta <strong>1.000 mensajes<\/strong>.<\/p><p>Ten en cuenta que Hostinger Horizons se encuentra actualmente en su fase de<strong> acceso inicial<\/strong>, por lo que ocasionalmente puedes encontrar errores al utilizarlo. No te preocupes: hay una <strong>garant&iacute;a de devoluci&oacute;n del dinero de 30 d&iacute;as<\/strong>, que te permite cancelar en cualquier momento si cambias de opini&oacute;n.<\/p><p>Tras completar el pago, dir&iacute;gete al<strong> panel de control de hPanel <\/strong>y pulsa <strong>Administrar <\/strong>junto al plan que acabas de adquirir. A continuaci&oacute;n, haz clic en <strong>A&ntilde;adir sitio web <\/strong>y selecciona <strong>Hostinger Horizons<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2025\/02\/opcion-hostinger-horizons-hpanel.png\/public\" alt=\"Panel de control del hosting en hPanel\" class=\"wp-image-45590\"><\/figure><h3 class=\"wp-block-heading\" id=\"h-2-navega-por-la-interfaz-de-la-herramienta\">2. Navega por la interfaz de la herramienta<\/h3><p>Es hora de empezar a utilizar Hostinger Horizons.<\/p><p>Ver&aacute;s un campo de texto donde puedes escribir tu mensaje en <strong>m&aacute;s de 80 idiomas<\/strong>. Tras describir tu aplicaci&oacute;n web, pulsa <strong>Intro<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2048\" height=\"1192\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/public\" alt=\"Campo de texto de Hostinger Horizons\" class=\"wp-image-45591\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/figure><p>Hostinger Horizons tardar&aacute; unos instantes en procesar tu solicitud. Una vez listo, el panel de control se dividir&aacute; en dos paneles:<\/p><ul class=\"wp-block-list\">\n<li><strong>Panel izquierdo<\/strong>: introduce aqu&iacute; indicaciones adicionales para a&ntilde;adir m&aacute;s funciones o perfeccionar tu aplicaci&oacute;n web.<\/li>\n\n\n\n<li><strong>Panel derecho<\/strong>: muestra una vista previa en tiempo real de tu aplicaci&oacute;n a medida que realizas ajustes. Puedes interactuar con los elementos para probar su funcionalidad.<\/li>\n<\/ul><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2048\" height=\"1192\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/public\" alt=\"Panel de control de Hostinger Horizons\" class=\"wp-image-45592\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2025\/12\/ai-company.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/figure><p>En la esquina inferior izquierda del panel de control, encontrar&aacute;s:<\/p><ul class=\"wp-block-list\">\n<li><strong>Mensajes restantes<\/strong>: muestra el n&uacute;mero de mensajes de aviso que quedan en tu plan.<\/li>\n<\/ul><p>En la esquina superior derecha del panel de control, encontrar&aacute;s:<\/p><ul class=\"wp-block-list\">\n<li><strong>Desplegar:<\/strong> el bot&oacute;n para lanzar tu aplicaci&oacute;n web, haci&eacute;ndola accesible p&uacute;blicamente.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-3-define-el-objetivo-de-tu-aplicacion-web\">3. Define el objetivo de tu aplicaci&oacute;n web<\/h3><p>Hostinger Horizons se basa en indicaciones bien estructuradas para generar la aplicaci&oacute;n web que imaginas. Por tanto, cuanto m&aacute;s precisas sean tus instrucciones, mejores ser&aacute;n los resultados.<\/p><p>Cuando definas el prop&oacute;sito de tu aplicaci&oacute;n web, incluye estos detalles clave para que Hostinger Horizons comprenda tu idea:<\/p><ul class=\"wp-block-list\">\n<li><strong>Finalidad de la aplicaci&oacute;n<\/strong>: indica claramente el problema que resuelve tu aplicaci&oacute;n web, por ejemplo, &ldquo;ayudar a los usuarios a seguir el progreso de su forma f&iacute;sica&rdquo;.<\/li>\n\n\n\n<li><strong>Funciones principales<\/strong>: enumera las funciones esenciales que quieres incluir, como el inicio de sesi&oacute;n de usuario, los formularios, los cuadros de mando o los informes.<\/li>\n\n\n\n<li><strong>Preferencias de interfaz de usuario<\/strong>: s&eacute; espec&iacute;fico sobre elementos de dise&ntilde;o como la disposici&oacute;n, la combinaci&oacute;n de colores y la est&eacute;tica general.<\/li>\n<\/ul><p>He aqu&iacute; un ejemplo r&aacute;pido para una plataforma de fitness que genera planes de entrenamiento y dieta personalizados:<\/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 plataforma de fitness que proporcione planes personalizados de entrenamiento y dieta basados en datos del usuario. La aplicaci&oacute;n debe permitir que los usuarios ingresen su edad, altura, peso, nivel de actividad y condiciones de salud. Bas&aacute;ndose en estos datos, la aplicaci&oacute;n debe generar rutinas de ejercicio y recomendaciones de alimentaci&oacute;n personalizadas.\n\nIncluye un panel de control f&aacute;cil de usar con formularios de entrada, un rastreador de progreso y una interfaz visualmente atractiva con un dise&ntilde;o limpio y moderno, utilizando una combinaci&oacute;n de colores en tonos azul verdoso y violeta.<\/pre><p>Como cualquier otra herramienta de IA, el primer resultado de Hostinger Horizons puede no ser perfecto, por muy detallada que haya sido tu prompt inicial.&nbsp;<\/p><p>Podemos desarrollar esta primera iteraci&oacute;n de la aplicaci&oacute;n introduciendo m&aacute;s instrucciones.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-4-personaliza-el-diseno-de-tu-proyecto\">4. Personaliza el dise&ntilde;o de tu proyecto<\/h3><p>El siguiente paso es personalizar el dise&ntilde;o de la aplicaci&oacute;n. Adem&aacute;s de hacer tu aplicaci&oacute;n m&aacute;s atractiva visualmente, este proceso implica a&ntilde;adir elementos importantes para la navegaci&oacute;n y la funcionalidad.<\/p><p>Estos son algunos de los componentes front-end importantes que debes incluir en tu aplicaci&oacute;n:<\/p><ul class=\"wp-block-list\">\n<li><strong>Men&uacute;s:<\/strong> &aacute;reas como una barra lateral, una pesta&ntilde;a o un men&uacute; desplegable que contienen accesos directos a diferentes p&aacute;ginas.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Formularios:<\/strong> campos que permiten a los usuarios introducir datos, como una direcci&oacute;n de correo electr&oacute;nico o una imagen.&nbsp;<\/li>\n\n\n\n<li><strong>P&aacute;ginas:<\/strong> ventanas a pantalla completa que contienen diferentes ajustes e informaci&oacute;n.&nbsp;<\/li>\n\n\n\n<li><strong>Botones:<\/strong> elementos que realizar&aacute;n determinadas acciones, como enviar datos o navegar a otra p&aacute;gina.<\/li>\n<\/ul><p>Si tienes un <strong>wireframe <\/strong>detallando el dise&ntilde;o de la aplicaci&oacute;n y la colocaci&oacute;n de los elementos, puedes subirlo a Hostinger Horizons como una indicaci&oacute;n. El resultado ser&aacute; m&aacute;s preciso.<\/p><p>Si no, utiliza un prompt basado en texto, como en este ejemplo:&nbsp;<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" 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 donde los usuarios puedan acceder a su cuenta. Aqu&iacute;, incluye un bot&oacute;n que redirija a los usuarios a la p&aacute;gina de registro donde puedan crear una nueva cuenta si no tienen una.<\/pre><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2025\/02\/ejemlo-uso-hostinger-horizons.png\/public\" alt=\"Ejemplo de Inicio de sesi&oacute;n de la aplicaci&oacute;n web en Hostinger Horizons\" class=\"wp-image-45597\"><\/figure><p>Recuerda a&ntilde;adir m&aacute;s detalles sobre el dise&ntilde;o de tu aplicaci&oacute;n, como los colores, el tama&ntilde;o del texto y el estilo de la fuente.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-5-mejora-la-estructura-y-ajusta-la-logica\">5. Mejora la estructura y ajusta la l&oacute;gica<\/h3><p>Ahora que tienes el dise&ntilde;o trazado, vamos a perfeccionar la funcionalidad de la aplicaci&oacute;n. El proceso sigue siendo el mismo: proporciona m&aacute;s indicaciones sobre los aspectos que quieres mejorar.&nbsp;<\/p><p>Durante esta fase, las &aacute;reas de mejora suelen estar relacionadas con la l&oacute;gica y las funciones de tu aplicaci&oacute;n. Algunas de las m&aacute;s comunes son<\/p><ul class=\"wp-block-list\">\n<li><strong>L&oacute;gica empresarial<\/strong>: las reglas subyacentes de tu aplicaci&oacute;n. Por ejemplo, tu aplicaci&oacute;n de fitness debe ofrecer recomendaciones diferentes seg&uacute;n los datos de salud que introduzcas.&nbsp;<\/li>\n\n\n\n<li><strong>&Aacute;rbol de decisiones<\/strong>: el flujo de tu aplicaci&oacute;n basado en las decisiones de los usuarios. Por ejemplo, si un usuario selecciona un men&uacute; determinado, debe aparecer una p&aacute;gina predeterminada.&nbsp;<\/li>\n\n\n\n<li><strong>Gesti&oacute;n de eventos<\/strong>: la reacci&oacute;n a las acciones del usuario, como clics, deslizamientos y pulsaciones de teclas. Por ejemplo, un conmutador debe activarse al hacer clic.<\/li>\n\n\n\n<li><strong>Flujo de datos<\/strong>: el tratamiento de los datos del usuario cuando se pasan a trav&eacute;s de formularios, se validan o se cargan. Por ejemplo, la contrase&ntilde;a de un usuario debe ser una cadena de texto que coincida con la entrada de la base de datos.&nbsp;<\/li>\n<\/ul><p>Cuando escribas indicaciones para Hostinger Horizons , aseg&uacute;rate de describir claramente la l&oacute;gica o caracter&iacute;stica que quieres mejorar. Dar m&aacute;s contexto a la IA le ayuda a producir un resultado m&aacute;s preciso.<\/p><p>Aqu&iacute; tienes un ejemplo r&aacute;pido para refinar el flujo de datos:<\/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=\"\">Comprueba los campos de direcci&oacute;n de correo electr&oacute;nico y contrase&ntilde;a de la p&aacute;gina de inicio de sesi&oacute;n. Aseg&uacute;rate de que s&oacute;lo aceptan cadenas de texto que se correspondan con entradas existentes en la base de datos.&nbsp;\n\nSi los datos introducidos no coinciden con ninguna entrada de la base de datos, devuelve un mensaje de error diciendo: \"Correo electr&oacute;nico o contrase&ntilde;a no v&aacute;lidos\". Si los datos introducidos son v&aacute;lidos, redirige al usuario al panel de control principal.<\/pre><p>A continuaci&oacute;n, verifica si Hostinger Horizons ha configurado correctamente la l&oacute;gica y la funcionalidad de tu aplicaci&oacute;n prob&aacute;ndolas en la vista previa. Esto tambi&eacute;n te ayudar&aacute; a identificar si falta alguna caracter&iacute;stica.&nbsp;<\/p><p>        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Consejo profesional                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Para obtener resultados mejores y m&aacute;s precisos, perfecciona un aspecto de tu aplicaci&oacute;n una vez al tiempo.<\/p>\n                    <\/div>\n        <\/p><h3 class=\"wp-block-heading\" id=\"h-6-conecta-tu-aplicacion-a-una-base-de-datos-opcional-nbsp\"><strong>6. Conecta tu aplicaci&oacute;n a una base de datos (opcional)&nbsp;<\/strong><\/h3><p>Una base de datos permite a tu aplicaci&oacute;n web recoger y almacenar datos de los usuarios. Esto es esencial si tu aplicaci&oacute;n tiene funciones como el registro de usuarios.&nbsp;<\/p><p>Hostinger Horizons te permite configurar f&aacute;cilmente una base de datos para tu aplicaci&oacute;n utilizando <strong>Supabase<\/strong>.&nbsp;<\/p><p>Para ello, dir&iacute;gete a la <a href=\"https:\/\/supabase.com\/dashboard\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">p&aacute;gina de registro<\/a> de Supabase y crea una nueva cuenta con una nueva organizaci&oacute;n y selecciona un plan: el gratuito es suficiente para una aplicaci&oacute;n b&aacute;sica a peque&ntilde;a escala.&nbsp;<\/p><p>A continuaci&oacute;n, crea un nuevo proyecto introduciendo su nombre, la contrase&ntilde;a de la base de datos y la regi&oacute;n.<\/p><p>Deber&iacute;as ser redirigido a la p&aacute;gina del nuevo proyecto. Desde este men&uacute;, copia la <strong>URL de <\/strong>tu <strong>proyecto <\/strong>y la <strong>clave API<\/strong>, que utilizaremos para conectar la base de datos a tu aplicaci&oacute;n.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2025\/02\/supabase-database-credenciales.png\/public\" alt=\"Credenciales de la base de datos en Supabase\" class=\"wp-image-45599\"><\/figure><p>A continuaci&oacute;n, pide a Hostinger Horizons que configure el back-end de tu aplicaci&oacute;n utilizando las credenciales que copiaste de Supabase. Aqu&iacute; tienes un ejemplo de la solicitud:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"Conecta la aplicaci&oacute;n con mi base de datos Supabase. &Eacute;stas son las credenciales:\n\nURL del proyecto: URL-de-tu-proyecto\n\nClave API: tu-clave-API<\/pre><p>Despu&eacute;s, crea las tablas necesarias y con&eacute;ctalas a los campos correspondientes de la aplicaci&oacute;n&rdquo;.<\/p><p><div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>&iexcl;Importante!<\/strong> Como conectar una base de datos y desarrollar la l&oacute;gica de tu aplicaci&oacute;n son tareas complejas, lo m&aacute;s probable es que necesites dar indicaciones de seguimiento.&nbsp;<\/p><p>Perfecciona siempre tu instrucci&oacute;n y vuelve a probar los cambios para asegurarte de que tu aplicaci&oacute;n funciona correctamente.\n            <\/p><\/div><\/p><h3 class=\"wp-block-heading\" id=\"h-7-prueba-y-lanza-tu-aplicacion-web\">7. Prueba y lanza tu aplicaci&oacute;n web<\/h3><p>En este punto, tu aplicaci&oacute;n deber&iacute;a estar totalmente desarrollada y ser funcional. Antes de finalizar, comprueba todas las funciones y la navegaci&oacute;n para asegurarte de que se ejecutan correctamente.&nbsp;<\/p><p>En Hostinger Horizons, puedes comprobar e interactuar con tu aplicaci&oacute;n directamente desde el men&uacute; de vista previa del panel derecho.<\/p><p>Aqu&iacute; tienes una lista de comprobaci&oacute;n de lo que debes verificar durante las pruebas de la aplicaci&oacute;n web&nbsp; :<\/p><ul class=\"wp-block-list\">\n<li><strong>Funcionalidad<\/strong>: todas las funciones deben actuar correctamente en el entorno real. Esto incluye la capacidad de realizar operaciones de base de datos CRUD y l&oacute;gica empresarial.&nbsp;<\/li>\n\n\n\n<li><strong>Navegaci&oacute;n<\/strong>: el flujo de tu aplicaci&oacute;n y la funcionalidad de los elementos de navegaci&oacute;n. Por ejemplo, si haces clic en <strong>Iniciar sesi&oacute;n<\/strong>, se te redirigir&aacute; al panel de control principal.&nbsp;<\/li>\n\n\n\n<li><strong>Visibilidad<\/strong>: el aspecto de tu aplicaci&oacute;n web en m&oacute;viles y ordenadores de sobremesa. Aseg&uacute;rate de que todos los elementos se escalan correctamente y son utilizables.&nbsp;<\/li>\n<\/ul><p>Ahora, vamos a desplegar la aplicaci&oacute;n. Como Hostinger Horizons viene con nuestro plan de <a href=\"\/ar\/hosting-web\">alojamiento web<\/a> Business, puedes publicar inmediatamente tu aplicaci&oacute;n web al p&uacute;blico simplemente haciendo clic en el bot&oacute;n <strong>Desplegar <\/strong>de la parte superior derecha.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2025\/02\/ejemplo-aplicacion-web-horizons.png\/public\" alt=\"Ejemplo de interfaz de app web creada usando Hostinger Horizons\" class=\"wp-image-45600\"><\/figure><p>Hostinger Horizons publicar&aacute; tu proyecto utilizando un dominio temporal. Antes de conectar tu propio dominio, vamos a completar algunas pruebas adicionales.<\/p><p>Empieza por verificar la<strong> compatibilidad entre navegadores<\/strong>. Para ello, accede a tu aplicaci&oacute;n en distintos navegadores y dispositivos para ver si surge alg&uacute;n problema.&nbsp;<\/p><p>A continuaci&oacute;n, comprueba su <strong>rendimiento <\/strong>y velocidad de carga utilizando una herramienta de evaluaci&oacute;n comparativa como <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GTMetrix<\/a>. Si el resultado no es &oacute;ptimo, pide a Hostinger Horizons que optimice el c&oacute;digo.&nbsp;<\/p><p>Si todo parece correcto, vuelve al men&uacute; <strong>Sitios web <\/strong>de hPanel para conectar tu dominio a la aplicaci&oacute;n web.<\/p><p>&iexcl;Ya est&aacute;! Enhorabuena, has creado y publicado una aplicaci&oacute;n web utilizando Hostinger Horizons.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-crear-tu-primera-app-web-con-horizons-video\">C&oacute;mo crear tu primera app web con Horizons &ndash; Video<\/h2><p>Para complementar esta gu&iacute;a, observa 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=\"C&oacute;mo Crear Tu Primera App Web Con Hostinger Horizons (Gu&iacute;a Paso a Paso)\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/r_xJipxuj4Y?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\/ar\/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\">Suscribite \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\/ar\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n          <span>Suscribite<\/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 una plataforma impulsada por IA que te permite desarrollar una aplicaci&oacute;n web full-stack sin codificar. S&oacute;lo tienes que introducir las instrucciones y esta herramienta crear&aacute; cualquier aplicaci&oacute;n que tengas en mente.<\/p><p>En este art&iacute;culo, hemos explicado los pasos generales para crear una aplicaci&oacute;n web utilizando Hostinger Horizons. He aqu&iacute; el resumen:<\/p><ol class=\"wp-block-list\">\n<li>Reg&iacute;strate en <strong>Hostinger Horizons <\/strong>e inicia un nuevo proyecto a trav&eacute;s del panel de control de hPanel.&nbsp;<\/li>\n\n\n\n<li>Familiar&iacute;zate con la interfaz de usuario de la herramienta.&nbsp;<\/li>\n\n\n\n<li>Entra en la consulta inicial para definir el objetivo principal de tu aplicaci&oacute;n web.<\/li>\n\n\n\n<li>Personaliza la disposici&oacute;n, el dise&ntilde;o y los componentes del front-end de tu proyecto.<\/li>\n\n\n\n<li>Perfecciona la l&oacute;gica empresarial y la estructura de tu aplicaci&oacute;n para garantizar una funcionalidad sin problemas.&nbsp;<\/li>\n\n\n\n<li>Crea una base de datos <strong>Supabase <\/strong>y pide a Hostinger Horizons que la conecte con tu aplicaci&oacute;n (opcional). <\/li>\n\n\n\n<li>Prueba tu aplicaci&oacute;n y despli&eacute;gala al p&uacute;blico utilizando el plan de alojamiento web <strong>Business <\/strong>de Hostinger. Luego, conecta tu aplicaci&oacute;n web a una direcci&oacute;n de dominio adecuada.<\/li>\n<\/ol><p>Sencillo, &iquest;verdad? Adelante, intenta desarrollar tu propia aplicaci&oacute;n web con Hostinger Horizons.&nbsp;<\/p><p>Si tienes alguna pregunta sobre esta herramienta, hazla en la secci&oacute;n de comentarios de abajo o consulta nuestro art&iacute;culo de preguntas frecuentes sobre Hostinger Horizons.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hostinger Horizons es una herramienta potenciada por IA que te permite crear aplicaciones web sin escribir una sola l&iacute;nea de c&oacute;digo.&nbsp; Tanto si necesitas una aplicaci&oacute;n de fitness para planes de entrenamiento personalizados como una herramienta de gesti&oacute;n de voluntarios para una organizaci&oacute;n sin &aacute;nimo de lucro, solo tienes que introducir tus indicaciones y Hostinger [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ar\/tutoriales\/como-crear-una-aplicacion-web-con-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-45730","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-make-a-web-app-with-hostinger-horizons","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/criar-web-app-com-hostinger-horizons","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-une-application-web-avec-hostinger-horizons","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/web-app-erstellen-hostinger-horizons","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/come-creare-un-app-web-con-hostinger-horizons","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-make-a-web-app-with-hostinger-horizons","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-make-a-web-app-with-hostinger-horizons","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-make-a-web-app-with-hostinger-horizons","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-make-a-web-app-with-hostinger-horizons","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/criar-web-app-com-hostinger-horizons","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/45730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/comments?post=45730"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/45730\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/media?parent=45730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/categories?post=45730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/tags?post=45730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}