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/submitoGET /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
- Constructor de workflows - abre los workflows que hay detrás de tu app
- My Data - consulta y edita las tablas de tu app
- Dominios propios - pon tu app en tu propio dominio