Vista previa, código y conexiones de aplicaciones

Hasta que aparezca la primera confirmación en el Historial, la Vista previa muestra una descripción general ilustrada de las etapas de creación. Después de eso, abre la aplicación cuando la vista previa del navegador está lista. Si ninguna de las aplicaciones del proyecto tiene habilitada la vista previa del navegador, Vista previa explica que no está disponible en lugar de mostrar la pantalla de creación nuevamente, incluso mientras Amazi continúa funcionando.

Vista previa de la aplicación en ejecución

La vista previa abre una aplicación de navegador registrada en el tiempo de ejecución de desarrollo aislado. Úselo para:

• elija una aplicación;
• navegar por sus rutas disponibles;
• cambie la ventana gráfica y verifique el comportamiento de respuesta.

Para aplicaciones móviles que utilizan React Native/Expo, Vista previa muestra la versión web en el editor. Android o iOS no se ejecuta allí, por lo que las funciones que necesitan un teléfono requieren una verificación del dispositivo por separado. Una aplicación WebView abre un sitio web dentro de un contenedor móvil: puede ver el sitio web por separado, pero el contenedor en sí no tiene vista previa en Amazi. Consulte Aplicaciones compatibles para compilaciones de Android y limitaciones de iOS.

La configuración inicial, la instalación de dependencias o el reinicio del tiempo de ejecución pueden mantener la Vista previa en estado de preparación. Aparece un encabezado centrado y una barra de carga, con el estado actual debajo del encabezado. Si sigue sin estar disponible, solicite al agente que inspeccione la compilación de la aplicación y el estado del tiempo de ejecución.

Cuando regresa a la pestaña o ventana del navegador con la Vista previa abierta, Amazi la verifica en segundo plano y la inicia nuevamente si se detuvo mientras estaba inactiva. Una vista previa ya cargada permanece visible durante esta verificación; volver atrás no recarga la página ni muestra un cargador por sí solo.

Una dirección de desarrollo activa es un enlace público no listado. La membresía del proyecto controla quién puede solicitar el descriptor de Amazi, pero el código de la aplicación aún debe proteger las páginas y API confidenciales. Nunca exponga secretos a través de variables de entorno del navegador.

Apunte al agente a la interfaz

Para mencionar una página completa, escriba @ en el chat del proyecto y abra Páginas, arriba de Integraciones. La lista coincide con las rutas de la aplicación seleccionada en Vista previa. Elija una ruta para agregar su chip; Al hacer clic en el chip se abre la página y se solicitan parámetros de ruta cuando es necesario.

Los chips de elementos seleccionados muestran su etiqueta HTML (h1, p, div, span y otras) en lugar de un número, incluso en los mensajes enviados y en cola. Los mensajes más antiguos sin una etiqueta guardada muestran el nombre del archivo fuente. Al pasar el cursor sobre un chip enviado se muestra la referencia de origen y un recordatorio de que el elemento puede haber cambiado, incluso cuando la aplicación o el nombre del archivo utiliza caracteres no latinos.

Cuando una aplicación tiene el adaptador de selección de fuente Next.js o Vite JSX correspondiente, active la herramienta de selección y elija uno o más elementos renderizados. Amazi adjunta sus referencias de origen exactas al compositor del chat para que el agente pueda localizarlas. La vista previa no requiere un adaptador. Los informes de ruta están disponibles solo cuando el adaptador de navegación del enrutador correspondiente está habilitado.

Mientras Vista previa se carga o se vuelve a conectar, un adaptador de selección habilitado mantiene el botón de cursor normal desactivado hasta que la selección esté lista. Si la aplicación no tiene un adaptador de selección o la navegación rápida no está disponible, haga clic en su control tachado para abrir una breve explicación. Entendido lo cierra; Pídele al agente que verifique prepara un mensaje en el chat para que lo revises y lo envíes. Aún puedes ingresar rutas de navegación manualmente. La navegación y la selección de elementos tienen adaptadores separados: la navegación por rutas de trabajo por sí sola no permite la selección.

Inspeccionar código

El código lee el espacio de trabajo del proyecto retenido a través del producto API. Explore directorios, abra archivos de texto o imágenes compatibles y descargue el código fuente del proyecto cuando necesite una copia externa. Los cambios de archivos del trabajo del agente activo invalidan los datos del archivo visible para que el editor pueda actualizar sin reemplazar el espacio de trabajo.

Inspeccionar las conexiones de la aplicación

La leyenda de información a la derecha explica cómo utilizar el diagrama. Si su plan no incluye conexiones reales, encima aparecerá una advertencia titulada Diseño de ejemplo que explica la restricción del plan.

Conexiones de aplicaciones muestra aplicaciones registradas, integraciones conectadas y conexiones HTTP observadas. Elija Desarrollo o Producción para inspeccionar ese entorno. Los adaptadores de solicitud admiten llamadas al servidor Node.js y Python, además de llamadas de búsqueda del navegador/XHR desde aplicaciones Vite y Next.js. Haga clic en una conexión para ver sus destinos, métodos HTTP, recuentos de observaciones y actividad más reciente.

Los detalles de conexión llenan la altura disponible a la derecha. Desplácese por la lista de solicitudes mientras el encabezado, el botón de cerrar y la hora de la última actividad permanecen visibles.

Una aplicación sin adaptador de solicitud tiene una tarjeta de advertencia, incluso si quedan conexiones más antiguas en el diagrama. Haga clic en la tarjeta y luego solicite al agente que prepare un mensaje para conectar el adaptador correspondiente. Revisa y envía ese mensaje en el chat. El desarrollo aplica la configuración guardada; La producción necesita una nueva publicación. Los nuevos iniciadores Node.js, Python, Vite y Next.js incluyen sus adaptadores correspondientes. Las aplicaciones importadas y existentes se pueden configurar a través del agente.

Cada publicación mantiene los adaptadores de solicitud guardados con esa versión. Para aplicar cambios posteriores del adaptador a Producción, publique la versión actualizada; Las implementaciones existentes mantienen su configuración anterior.

La recaudación es el mejor esfuerzo. Otros tiempos de ejecución, clientes HTTP no compatibles, WebSockets, solicitudes de trabajadores y cargas de activos del navegador están fuera de la cobertura; La política de seguridad de un sitio también puede bloquear el seguimiento del navegador. Una línea faltante no prueba que las aplicaciones sean independientes y el tráfico antiguo no se puede recuperar. Sin acceso al diagrama en el plan del propietario del proyecto, las aplicaciones y las integraciones conectadas permanecen visibles sin conexiones. Esta restricción de visualización no detiene la comunicación entre aplicaciones ni el trabajo de desarrollo del agente. Utilice Applications para cambiar las capacidades y configuraciones de la aplicación.

Edición de código y acciones de árbol.

La fila Raíz del proyecto permanece en la parte superior del árbol de archivos. El encabezado del menú también muestra Raíz del proyecto. Haga clic en él para crear un archivo o carpeta, cargar archivos directamente a la raíz o descargar el proyecto. La raíz no se puede cambiar de nombre ni eliminar. Las cargas muestran el progreso y una acción de Cancelar mientras se transfieren los archivos, seguido de un estado de finalización.

El código mantiene un archivo abierto. Su encabezado muestra la ruta, trunca las rutas largas y un botón Guardar explícito cuando la edición está disponible. La búsqueda de archivos filtra el árbol. Expandir todo/Contraer todo está al lado de buscar; La expansión automática y la búsqueda omiten directorios ignorados, mientras que usted puede abrirlos manualmente.

Puede crear o cargar el primer archivo directamente en un proyecto vacío. No es necesario que le pida al agente que cree un archivo primero. Los cambios de archivos exitosos aparecen en Historial; Crear una carpeta vacía por sí sola no crea una revisión de Git.

Haga clic derecho en un archivo o carpeta para abrir acciones agrupadas. Abrir y Referencia en el chat van seguidos de Nuevo archivo, Nueva carpeta, Cargar archivos, Cambiar nombre y Eliminar, cuando corresponda. El cuadro de diálogo de entrada de nombre maneja la creación y el cambio de nombre; la eliminación requiere confirmación. Una corona indica cambios controlados por el plan. La descarga, creación, edición, carga, cambio de nombre y eliminación manual requieren disponibilidad de administración de código y la función de proyecto adecuada. Esta restricción no impide que el agente cambie los archivos de la aplicación cuando solicita trabajo de desarrollo en el chat.

Guardar aplica el texto actual y registra una revisión del archivo. Ctrl/Cmd+S no guarda el código del proyecto. El contenido sin cambios no crea ninguna revisión vacía. El mensaje de revisión proporciona la cantidad de archivos de proyecto actualizados. Cambiar archivos, salir del código, navegar o cerrar la página advierte sobre ediciones no guardadas. Al enviar un mensaje de chat se descarta el texto del editor no guardado para que el agente comience desde los archivos guardados. El trabajo de agente activo bloquea temporalmente los cambios manuales. Si un archivo cambió antes de guardarlo, vuelva a cargar su contenido actual antes de volver a intentarlo.

Ctrl/Cmd-click admitió importaciones de JavaScript o TypeScript para abrir el archivo de proyecto al que se hace referencia. Las importaciones irresolubles muestran un error de navegación. Esta es una navegación de origen, no una garantía de compatibilidad total con el servidor de idiomas IDE.

Acciones de elementos

Ir al elemento enfoca el elemento de vista previa al que se hace referencia; Ir al archivo abre su ubicación de origen en Código. Al pasar el cursor, se abre la ventana emergente de acción y al hacer clic se mantiene abierta para usarla con el tacto y el mouse. El elemento seleccionado utiliza un icono de cursor con marcas de clic. Al seleccionar o mostrar un elemento enfocado, se convierte en una cruz: haga clic en él para borrar el resaltado y salir del modo de selección. Los chips de elementos permanecen en el mensaje hasta que se eliminan individualmente. Las referencias a fuentes pueden quedar obsoletas cuando cambia la fuente correspondiente.