Cree una aplicación de formulario de soporte para guardar los tickets en la base de datos.
| Cree una página de formulario web para la apertura de tickets de soporte técnico. El formulario debe contener los campos: Nombre de usuario (texto), Correo electrónico (con validación), Departamento (desplegable con TI, RR. HH. y Finanzas) y Descripción del problema (campo de texto largo). Al hacer clic en "Enviar", el sistema debe validar si todos los campos están completados. En caso afirmativo, guarde los datos en una tabla de la base de datos llamada *tickets*, generando automáticamente un ID numérico incremental, la fecha/hora actual y definiendo el estado inicial como 'Pendiente'. Después de guardar exitosamente, limpie el formulario y muestre un mensaje de éxito en la pantalla con el número de protocolo generado. | ### **2. Agregue archivos y contextos al Prompt** 1. Acceda a la parte inferior del panel de chat. 2. Haga clic en el botón + para abrir la lista de opciones de archivos adjuntos y alcance. 3. Seleccione la opción ideal para su tarea: * **Codebase Context:** Agrega el contexto completo del repositorio de código actual a la conversación. * **Attach Files:** Adjunta archivos locales genéricos a su mensaje. 1. **Attach File As Chat Context:** Inserta un archivo para que actúe específicamente como historial o instrucción de soporte en el chat. 2. **Upload File to Codebase:** Envía el archivo directamente al árbol de directorios del proyecto. * **Themes:** Cambia la identidad visual del panel (opciones disponibles: No Theme, Default Theme o New Theme). * **Show Token Usage:** Muestra la cantidad de tokens consumidos en la interacción con la IA. ### **3. Elija el modelo de IA** Por defecto, el modelo aparece estandarizado como Auto, pero es posible elegir otro modelo de su preferencia. Para ello: 1. Acceda al menú de selección de modelos de inteligencia artificial. 2. Seleccione una opción de su preferencia (OpenAI, Google, etc.). ### **4. Use la entrada de voz:** 1. Haga clic en el icono de **Micrófono** ubicado en el área derecha del campo de texto del chat. 2. Hable su comando o instrucción de forma clara. 3. Monitoree la transcripción automática del audio en la pantalla. 4. Haga clic en la flecha de envío para procesar el prompt. ### **5. Utilice la barra de herramientas** #### **Preview** Gestione el comportamiento y el diseño de su aplicación en tiempo real utilizando los botones de control: * **Hide Chat:** Haga clic para ocultar o mostrar la pestaña de chat, expandiendo el área de la vista previa técnica. * **Selecionar Componente / Desativar Seleção de Componente:** Haga clic en el icono del cursor para activar la inspección directa de bloques en la página o desactivar la selección interactiva. * **Ativar Annotator:** Haga clic en el icono de lápiz/varita mágica para habilitar la creación de notas y demarcaciones visuales sobre la interfaz en desarrollo. * **Voltar / Avançar:** Utilice las flechas direccionales (← y →) para navegar por el historial de páginas renderizadas en el simulador. * **Atualizar:** Haga clic en la flecha circular para recargar el estado antes mencionado de la página en la vista previa. * **Ir para Página:** Utilice el selector de rutas (campo de texto con el indicador `/`) para alternar o escribir directamente la ruta de la página que desea visualizar. * **Restart App:** Haga clic en Restart para reiniciar completamente la ejecución del microservicio de la aplicación de prueba. * **Visualizar em Outra Aba:** Haga clic en el icono de enlace externo para proyectar la aplicación en una nueva pestaña completa de su navegador. * **Publicar:** Haga clic en el botón azul Publish para poner la aplicación a disposición en producción. * **Modos Web, Tablet e Mobile:** Alterne entre los tres iconos de dispositivos ubicados en la parte superior derecha para probar el comportamiento responsivo del diseño en los formatos Desktop, Tablet y Mobile, respectivamente. #### **Mensajes del Sistema** Siga los registros (*logs*) de ejecución del entorno. Haga clic en la flecha ubicada a la derecha del panel para abrir los registros. Puede filtrar los mensajes por niveles de criticidad (Info, Aviso y Error) y por origen (Servidor, Cliente, etc.), además de limpiar el historial haciendo clic en el icono de Papelera. #### **Errores** Realice verificaciones periódicas en este panel para escanear su aplicación en busca de fallas de compilación en TypeScript u otros problemas estructurales. #### **Código** Acceda a este menú para verificar y navegar por las carpetas, archivos y líneas de código generadas automáticamente para su proyecto. #### **Config** * **Environment Variables:** Agregue claves de configuración al proyecto. Haga clic en Add Environment Variable para completar los campos Key y Value, y haga clic en Salvar para finalizar. {% hint style="info" %} Importante: Para modificar variables de entorno destinadas a Supabase o al entorno de producción definitivo, acceda a la consola de su proveedor de hospedaje y actualícelas directamente allí. {% endhint %} * **App Commands:** Configure comandos personalizados de instalación e inicio de su aplicación. Haga clic en Configure Custom Commands para definir el comando de instalación (*install command*, como `pnpm install`) y el comando de inicio (*start command*, como `pnpm dev`). Deje los campos vacíos para que el sistema adopte los comandos por defecto de `pnpm`. Haga clic en Salvar para concluir. #### **Revisión de Seguridad** * **Ejecutar la revisión:** Active este módulo para escanear el nivel de seguridad y cumplimiento (*compliance*) del código de su proyecto. * **Editar las regras:** Haga clic en esta opción para abrir el cuadro de diálogo de reglas de cumplimiento. Esta acción permite incluir contextos específicos de su proyecto dedicados exclusivamente a las revisiones de seguridad. El contenido completado se guarda en el archivo `SECURITY_RULES.md`, lo que ayuda a la plataforma a detectar vulnerabilidades adicionales y a evitar falsos positivos que no tengan sentido para su escenario. Haga clic en Salvar para registrar los cambios. * **Fix:** Haga clic en el botón Fix al lado de cualquier vulnerabilidad encontrada para que la IA corrija y optimice el elemento automáticamente. #### **Publicar** * **Exportar código-fonte:** Descargue un archivo comprimido (ZIP) que contenga el código fuente completo de esta aplicación para realizar el despliegue (*deploy*) manual. El sistema elimina automáticamente las carpetas `node_modules`, `.git`, `builds` y los archivos locales `env` para garantizar la ligereza y la seguridad del paquete. * **GitHub:** Conecte y sincronice su código directamente con un repositorio de GitHub para habilitar flujos de trabajo colaborativos y control de versiones integrado. #### **Reconstruir** Haga clic en este botón para forzar la reestructuración del entorno de desarrollo. {% hint style="danger" %} Este comando eliminará de forma permanente la carpeta `node_modules`, reinstalará todas las dependencias del proyecto, limpiará los datos de sesión de la vista previa y reiniciará el servidor de desarrollo. El procedimiento suele tardar entre 30 y 90 segundos en completarse. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.skyone.cloud/espanol/skyone-studio/inteligencia-artificial/vibe-coding/como-crear-un-app-en-creator.md?ask=