Hostinger Horizons te permite construir un panel de administración privado y protegido por inicio de sesión para aplicaciones web. Esta área te permite gestionar contenido dinámico, como agregar productos, redactar artículos de blog o actualizar galerías, sin necesidad de escribir código. Horizons Utiliza un backend integrado que maneja automáticamente el almacenamiento de datos, la autenticación y las colecciones según las indicaciones que proporciones.

Los cambios realizados enmodo de prueba (Test mode)no afectarán tu sitio web en línea; asegúrate de verificar que todo funcione correctamente antes de publicar.

Paso 1 – Enviar la indicación inicial de la aplicación

Para establecer la base de la aplicación, proporciona un resumen completo en tu primer mensaje.

  1. Abre el editor Hostinger Horizons.
  2. Ingresa una indicación que describa el sitio público y el área de administración privada.

Ejemplo de indicación:

Crea una aplicación web con un sitio web público y un panel de administración privado accesible mediante inicio de sesión con correo electrónico y contraseña. El panel de administración debe permitirme agregar, editar y eliminar productos (nombre, precio, imagen, descripción), publicaciones de blog (título, contenido, imagen de portada) e imágenes de la galería. El sitio público debe mostrar este contenido de manera dinámica.

Paso 2 – Configurar la autenticación

Si el mensaje inicial no genera un sistema de inicio de sesión funcional, refine la lógica de autenticación.

  1. Se requiere generar una página de inicio de sesión específica y proteger las rutas.

Ejemplo de mensaje:

Agregar una página de inicio de sesión para el panel de administración con autenticación por correo electrónico y contraseña. Asegúrese de que solo los administradores que hayan iniciado sesión puedan acceder al área de administración y redirija a los usuarios no autenticados a la página de inicio de sesión.

Paso 3 – Construir el módulo de gestión de contenidos

Agregue un módulo de administración específico a la vez para garantizar la estabilidad.

  1. Gestión de productos: Sugerencia Horizons Cree un módulo para administrar el inventario.

Ejemplo de sugerencia:

Agregar una sección de Productos al panel de administración para agregar nuevos productos con nombre, precio, descripción e imagen. Incluya una lista de productos existentes con opciones de editar y eliminar.
  1. Blog y Galería de imágenes:Usa indicaciones similares para agregar módulos de publicaciones de blog y galería de imágenes, y especifica los campos requeridos para cada módulo (por ejemplo, título, fecha o imagen de portada).

Ejemplo de indicación:

Agrega una sección de Publicaciones de Blog al panel de administración donde pueda escribir, editar y publicar artículos con un título, contenido e imagen de portada. Agrega una sección de Galería al panel de administración donde pueda subir, reemplazar y eliminar imágenes que se muestran en el sitio público.

Paso 4 – Sincronizar el contenido con el sitio público

Asegúrate de que los datos ingresados en el panel de administración se muestren correctamente a los visitantes.

  1. Haz que Horizons conecte las colecciones del backend con tu página de inicio o subpáginas.

Ejemplo de indicación:

Conecta la página de inicio pública a la base de datos del panel de administración. El sitio público debe actualizarse automáticamente cada vez que se agreguen o editen productos, publicaciones del blog o imágenes de la galería en el área de administración.

Una vez completado, obtendrás una interfaz de administración funcional, que te permitirá gestionar en tiempo real el contenido del sitio Hostinger Horizons. Puedes utilizar en cualquier momento el interruptor de datos (Datos) en la parte superior de la pantalla de vista previa para ver y editar los datos originales.

Resolución de problemas comunes

Si el rendimiento de tu panel de administración o del contenido dinámico no cumple con tus expectativas, utiliza los siguientes consejos y comprobaciones para resolver el problema:

  1. El contenido dinámico no se muestra en el sitio público: asegúrate de que el sitio público esté configurado para obtener datos de la misma colección de base de datos escrita por el panel de administración.
Puedes dar pistas:

Asegúrate de que las páginas públicas obtengan y muestren los datos más recientes de la colección [collection name] utilizada por el panel de administración.
  1. Ser redirigido a la página de inicio de sesión después de iniciar sesión: Esto normalmente indica que hay un problema con el almacenamiento de sesiones.

Usa este consejo:

Corrige el flujo de autenticación para que después de un inicio de sesión exitoso, el usuario sea redirigido al panel de administración y permanezca autenticado.
  1. El panel de administración se puede acceder sin autenticación: Debes asegurarte de que todas las rutas de administración estén protegidas.

Usa este consejo:

Agrega protección de rutas a todas las páginas del panel de administración. Redirige automáticamente a cualquier usuario no autenticado a la página de inicio de sesión.
  1. Los cambios sugeridos no son visibles en el sitio en línea: en el editor Hostinger Horizons, debes hacer clic enPublicar (Publish), y luego seleccionarPublicar cambios (Publish changes). Los cambios pueden tardar unos minutos en surtir efecto; abre el sitio en una ventana de incógnito para omitir la caché local del navegador.

  2. Mensaje de error después de agregar la función: proporciona detalles específicos del error a AI para análisis.

Usa este aviso:

Cuando yo [describir los pasos exactos], obtengo el error de consola '[pegar error]'. La pestaña de red muestra una solicitud a [URL] con la carga útil [pegar carga útil], error [pegar código de error]. ¿Puedes solucionar el problema?

Usa el navegador de datos incorporado de Hostinger Horizons para verificar si la colección se creó correctamente cuando ingresas el prompt. Si encuentras un error, pega el mensaje de error específico y las líneas de código relacionadas en el área de prompts, para que Horizons lo analice y lo solucione.

Fuente: documentación oficial de Hostinger