Recetario

Traducción automática

Esta página se tradujo automáticamente del inglés y todavía no la revisó un hablante nativo; las correcciones son bienvenidas en GitHub. Si algo no coincide, vale el original en inglés.

Recetas cortas, una tarea cada una. Cada receta es una pequeña aplicación en examples/cookbook/ con su propio conjunto quantum test: el código de la página se importa de los archivos probados, y lo que muestra como resultado salió de ejecutarla.

Lo básico

• Una primera página, y una segunda — Cada archivo en components/ es una página en su propia URL; una URL sin archivo es 404.
• Variables y expresiones — q:set guarda un valor, las llaves calculan con él y default completa lo que falta.
• Bucles — q:loop sobre una lista (con su posición), un rango de números y un texto separado por comas.
• Condicionales — q:if, q:elseif y q:else, con condiciones que son expresiones.
• Funciones — Un q:function con parámetros tipados y verificados, llamado desde q:set y desde el HTML.
• Una página por URL — components/product/[id].q responde a /product/1, /product/2...; el segmento es una variable.
• Leer la query string — query.name lee ?name= de la dirección; default cubre el que falta; urlencode arma un enlace.
• Componentes reutilizables — Un componente con props y un slot, importado de una carpeta _ que nunca se sirve.

Pantallas

• Un diseño que se adapta a la pantalla — ui:hbox lado a lado en una pantalla ancha y apilado en una angosta, con grow, width y hide-below.
• Una tabla que se edita en su lugar — ui:table edit= convierte cada celda en un pequeño formulario verificado contra el esquema de la tabla; sin acción que escribir.
• Pestañas — ui:tabpanel con un ui:tab por cada sección de una página.
• Tarjetas — ui:card con encabezado, cuerpo y pie, en un ui:grid; o una tarjeta con solo un título.
• Todos los tipos de campo — "ui:form con etiquetas ui:formitem: texto, número, un select con opciones, un switch, radios y un campo de varias líneas.\
• La misma página en una terminal — Una página ui:*, servida al navegador por quantum start y dibujada en una terminal por quantum console.

Probar la aplicación

• Una primera prueba con quantum test — Probar una página y su acción en Quantum mismo — visitar, enviar, verificar el mensaje flash, la tabla y el error del campo.
• Datos de prueba con test:given — Poner las filas que una prueba necesita en su base de datos nueva con test:given, e iniciar la sesión de un usuario con test:as.
• Probar lo que una acción rechaza — Probar los errores de campo, la regla de negocio y el éxito de una acción — error=, message=, flash= y la tabla.

Archivos y correo

• Correo en desarrollo — "Enviar correo desde una acción sin servidor de correo mientras desarrollas — host: log escribe cada mensaje en el log.\
• Cuando el servidor de correo dice que no — Conservar un pedido aunque no se pueda enviar su correo de confirmación — onerror=continue, y avisarle al visitante.

Inicio de sesión y permisos

• Iniciar sesión con una contraseña hasheada — Verificar una contraseña contra su hash bcrypt con verifyPassword, abrir la sesión y reservar una página para usuarios con sesión iniciada.
• Registrarse y guardar un hash de la contraseña — Crear una cuenta con hashPassword, para que la base de datos nunca tenga la contraseña, con reglas en cada campo.
• Una página solo para un rol — require_role reserva una página para los administradores; un miembro recibe 403, y un visitante sin sesión es enviado a iniciarla.
• Una guarda que redirige — Un q:if de nivel superior con q:redirect protege una página y todas sus acciones; un envío sin sesión no escribe nada.
• Cerrar sesión — Una página de salida que limpia la sesión y redirige; las páginas protegidas quedan cerradas de nuevo.

Formularios y acciones

• Mostrar cada error en su campo — Escribe las reglas una vez en el q:param de la acción; el formulario las lee y muestra cada rechazo junto a su campo.
• Un formulario rechazado conserva lo escrito — Después de un rechazo, el formulario vuelve lleno con los valores enviados, una vez, para que nadie escriba dos veces un mensaje largo.
• Redirigir y decir qué pasó — Terminar una acción con q:redirect y un mensaje flash; q:flash para una advertencia; el mensaje se muestra una vez en la página siguiente.
• Varios formularios en una página — Cada formulario y cada botón envía el nombre de su acción; un nombre que la página no tiene responde 400.
• Un formulario a partir de la tabla — q:action table= toma sus parámetros del esquema; un ui:form sin campos dibuja un campo por columna.
• Editar una fila — Una página por fila con [id].q, un formulario abierto con los valores de la fila, y las reglas de la tabla al guardar.
• Confirmar antes de borrar — Una página que pregunta primero, a la que se llega con un enlace, y el borrado como un POST desde su botón; sin JavaScript.
• Números y fechas — type=integer, decimal y date en q:param — la acción recibe números verificados y fechas reales, con min y max.
• Una opción de una lista — enum en q:param le da sus opciones a ui:select y ui:radio y rechaza cualquier otra cosa; una casilla es un booleano.

Datos y SQL

• Una consulta con parámetros — Filtrar por un valor de la URL, vinculado como un q:param — el valor nunca se vuelve SQL.
• Una lista paginada — Una página de una lista larga a la vez, con ui:pager dibujando los enlaces a las demás.
• Buscar mientras escribes — Un campo que actualiza los resultados después de cada pausa al escribir — la búsqueda la hace la propia consulta de la página.
• Filtrar y ordenar una tabla — Enlaces que filtran las filas y encabezados que las ordenan — ambos en SQL, ambos en la URL.
• Escrituras que ocurren juntas — Un q:transaction — el débito, el crédito y la línea del registro se confirman juntos, o ninguno.
• Historial de cambios — "history: true registra quién cambió qué fila, y cómo; ui:history lo muestra en la página.\
• Agregar una columna con una migración — Cambiar el esquema con un archivo de migración nuevo; el anterior queda como estaba.
• Leer un archivo CSV — q:data convierte un archivo CSV en registros tipados, filtrados y ordenados — sin base de datos.
• Cargar un archivo CSV en una tabla — Insertar todas las filas de un archivo en una transacción — una fila que falla no deja nada atrás.
• Leer un archivo JSON — Un array JSON como una lista de registros, con un campo calculado en cada uno.
• Totales a partir de una consulta — SQL sobre el resultado de una consulta, en memoria — a la base de datos se le pregunta una sola vez.

IA

• Respuestas con sus fuentes — Responder preguntas a partir de tus propios documentos con q:knowledge y q:llm knowledge=, y listar las fuentes.
• Cuando los documentos no lo saben — minRelevance deja afuera los fragmentos sin relación; si no queda ninguno, no se le pregunta al modelo y la página lo dice.
• Transmitir una respuesta — Un q:llm en streaming y ui:stream — la página se muestra de inmediato y la respuesta aparece a medida que se escribe.
• Un agente sobre tu base de datos — q:agent con una herramienta de consulta de solo lectura — el modelo elige la herramienta y sus argumentos, nunca el SQL.
• Cuando el modelo falla — onerror en q:llm — un modelo caído o demasiado lento no se lleva la página con él.
• Clasificar mensajes con respuestas JSON — responseFormat json — la respuesta del modelo es un objeto cuyos campos verificas y guardas.
• Respuestas a partir de una tabla — Una fuente de q:knowledge que es una consulta — las filas de tu tabla de preguntas frecuentes, recuperadas como documentos.