Builders

Constructor de web apps

El constructor de web apps es donde Qira construye tu web app contigo: un chat a la izquierda y tu app funcionando a la derecha. La describes, ves cómo aparece, la recorres y la publicas.

Abrir el constructor

Hay tres formas de entrar:

  • Home - describe la app en What should we build? y haz clic en Build. El constructor se abre con tu petición ya en marcha.
  • Studio - haz clic en Start a web app en la tarjeta Web app.
  • Una web app que ya existe - ábrela desde Studio para seguir trabajando en ella. El historial del chat se conserva.

La disposición

Zona Qué hace
Arriba a la izquierda El nombre de la app (haz clic en el lápiz para cambiarlo) y el historial de conversaciones (icono del reloj)
Chat Tu conversación con Qira. Cada respuesta muestra qué ha hecho, qué archivos ha cambiado y qué ha probado
Vista previa Tu app, funcionando. Es una app de verdad: los formularios se envían, el inicio de sesión funciona y los datos se guardan
Barra de herramientas Cambia entre vista previa y código, selecciona un elemento, ve atrás, adelante y recarga, y elige un tamaño de dispositivo
Arriba a la derecha Publish, el historial de versiones y la configuración de la app

Empezar una app nueva

Una app vacía te ofrece dos formas de empezar.

Puntos de partida

Encima del cuadro del chat hay cuatro puntos de partida. Haz clic en uno o describe tu propia idea:

Punto de partida Qué obtienes
Landing page Cabecera principal, funcionalidades, llamada a la acción
Dashboard Gráficos, tablas, filtros
Auth flow Inicio de sesión, registro, restablecimiento de contraseña
Pricing page Planes, un selector mensual o anual, preguntas frecuentes

Start from a look

A la derecha, Start from a look (empezar desde un estilo) ofrece seis diseños. Elige el tipo de cosa que estás construyendo y Qira empieza con esa tipografía, ese color y esa textura:

Estilo Pensado para
Ledger Producto / SaaS
Signal Desarrolladores / IA
Atelier Estudio / editorial
Market Tienda
Console App / panel
Civic Negocio local

Si no fijas ninguno, el estilo sigue a tu prompt: Qira elige uno que encaje con lo que describes.

Hablar con Qira

Escribe en el cuadro de la parte inferior del chat. A su lado tienes:

  • @ - menciona algo de tu espacio de trabajo, como una tabla o un workflow, para que Qira lo use.
  • Upload - adjunta un archivo: una captura de pantalla, un boceto, un logo, un documento con tu contenido.
  • Micrófono - dilo en lugar de escribirlo.
  • Papelera - borra la conversación.
  • Selector de modelo - elige el modelo de IA para el siguiente mensaje. Puedes cambiarlo cuando quieras: un modelo potente para construir la estructura y uno más ligero para pequeños cambios de texto.

Debajo del cuadro ves los créditos que te quedan.

Sé concreto con los datos y las personas

Qira construye mejores apps cuando le dices:

  • qué guarda la app: "reservas con fecha, hora, servicio y el teléfono del cliente"
  • quién inicia sesión y qué puede hacer: "los clientes solo ven sus propias reservas, el dueño las ve todas"
  • qué debe pasar: "envíame un email cuando entre una reserva"

Páginas y backend en una sola petición

Qira construye las páginas. Cuando la app necesita guardar, comprobar o enviar algo, se lo pide a Vira, que construye:

  • tablas en My Data, con columnas tipadas
  • workflows que hacen de endpoints de API de la app, por ejemplo POST /feedback/submit o GET /feedback/list
  • inicio de sesión: un endpoint de login que comprueba la contraseña y devuelve un token, y endpoints que solo responden con un token válido

Todo lo que crea Vira aparece en Studio y en My Data como cualquier cosa que hayas construido a mano, así que puedes abrirlo y cambiarlo más adelante.

Verified before finishing

Antes de entregarte una construcción, Qira la prueba. La tarjeta Verified before finishing (verificado antes de terminar) lista cada comprobación con su resultado:

  • Build check - el proyecto compila
  • cada endpoint de API que ha creado, con el código de estado HTTP que devolvió
  • las filas que ha vuelto a leer de las tablas

Debajo de la tarjeta ves los créditos que ha usado la construcción y el tiempo que ha tardado. Si una comprobación falla, Qira intenta arreglarla antes de terminar. Cuando crea una cuenta de administrador para ti, te da sus datos de acceso en el chat: cambia la contraseña antes de salir en vivo.

Vista previa y código

  • Vista previa (icono del ojo) ejecuta tu app. Usa el menú de dispositivos junto a la barra de direcciones para verla en tamaño escritorio, tableta o móvil.
  • Código (icono <>) muestra los archivos del proyecto. Abre cualquier archivo para leerlo o editarlo a mano.
  • Seleccionar (icono del puntero) te permite hacer clic en un elemento de la vista previa para trabajar sobre ese elemento.

Publicar

Haz clic en Publish para poner en vivo la versión actual. Cada publicación se guarda en el historial de versiones (icono del reloj junto a Publish), así que puedes volver a una versión anterior.

En la configuración de la app (icono del engranaje) defines:

  • su subdominio, o un dominio propio de tu espacio de trabajo. Consulta Dominios propios
  • si está publicada
  • si los buscadores pueden indexarla
  • su estilo

Ejemplos

Formulario de opiniones con zona de administración

"Un formulario de opiniones para una panadería. Los visitantes envían nombre, email y mensaje. Un administrador inicia sesión y marca los envíos como atendidos. Guárdalo en una tabla."

Resultado: una página pública con el formulario, un inicio de sesión de administrador y una tabla de administración, una tabla feedback_submissions y cinco endpoints (submit, login, register, list, handle); los endpoints list y handle solo responden a administradores que han iniciado sesión. Probado y terminado en unos dos minutos.

Sistema de reservas

"Una página de reservas para mi estudio. Los clientes eligen un servicio, un día y una franja horaria libre. Yo veo todas las reservas en una vista semanal."

Portal de clientes

"Los clientes inician sesión para ver sus proyectos y facturas. Yo subo las facturas en PDF."

Próximos pasos

Actualizamos estas páginas a menudo. ¿Has visto algo desactualizado? Avísanos

AI AssistantPowered by Ubex
Beta
Ask me anything about Ubex workflows, nodes, or the API.