

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

# Cómo funciona AWS App Studio
<a name="how-it-works"></a>

Hay algunos conceptos clave que debes entender a la hora de usar AWS App Studio para crear aplicaciones. En este tema se tratan los aspectos básicos de los siguientes conceptos o recursos:
+ Uso de *conectores* para conectarse a otros servicios y utilizar sus recursos o llamadas a la API en la aplicación. Por ejemplo, puedes usar conectores para almacenar datos y acceder a ellos, o enviar notificaciones desde tu aplicación.
+ Utilizar *entidades* para configurar el modelo de datos de la aplicación, que conecta la aplicación con la fuente de datos externa.
+ Uso de *páginas* y *componentes* para crear la interfaz de usuario (UI) de la aplicación.
+ Utilizar *automatizaciones* y *acciones* para implementar la lógica o el comportamiento de la aplicación.
+ El ciclo de vida del desarrollo de aplicaciones en App Studio: creación, prueba y publicación.

Para obtener más información sobre los conceptos de App Studio, consulte[AWS Conceptos de App Studio](concepts.md).

La siguiente imagen es un diagrama sencillo de cómo se organizan App Studio y sus recursos. 

![Un diagrama sencillo que muestra la organización de los recursos en una aplicación de App Studio.](http://docs.aws.amazon.com/es_es/appstudio/latest/userguide/images/app-studio-diagram.png)


Dentro de una aplicación de App Studio, las páginas, las automatizaciones y las entidades interactúan entre sí. Los conectores se utilizan para conectar estos recursos a servicios externos, como proveedores de datos, almacenamiento o notificaciones. Para crear una aplicación con éxito, es fundamental entender cómo interactúan todos estos conceptos y recursos entre sí. 

## Conectar tu aplicación a otros servicios
<a name="how-it-works-connectors"></a>

Una de las mayores ventajas de usar App Studio para crear aplicaciones es que puedes integrarla fácilmente con otros servicios. En App Studio, te conectas a otros servicios mediante conectores específicos del servicio y de los recursos o las llamadas a la API que quieras usar con tu aplicación.

Los conectores se crean en el nivel de instancia de App Studio y no en aplicaciones individuales. Después de crear los conectores, puede usarlos en varias partes de las aplicaciones, según el servicio conectado y la aplicación.

A continuación se muestran ejemplos de la funcionalidad de las aplicaciones que utilizan conectores para conectarse a otros servicios:
+ El caso de uso más común, que se utiliza en casi todas las aplicaciones, consiste en almacenar y acceder a los datos utilizados en la aplicación mediante la conexión a servicios de AWS datos como Amazon Redshift, Amazon DynamoDB o Amazon Aurora.
+ Una aplicación que permita cargar y ver imágenes, como recibos, puede utilizar Amazon S3 para almacenar los archivos de imagen y acceder a ellos.
+ Una aplicación de resumen de texto puede enviar una entrada de texto a Amazon Bedrock y mostrar el resumen devuelto.

**nota**  
Debe tener el rol de administrador en App Studio para crear conectores. Al crear los conectores, debe incluir las credenciales y la información adecuadas sobre los recursos o las llamadas a la API que desee utilizar. 

## Configurar el modelo de datos de su aplicación
<a name="how-it-works-data-entities"></a>

Los datos de su aplicación son la información que impulsa la aplicación. En App Studio, se crean y utilizan *entidades* que representan los distintos tipos de datos que se almacenan y con los que se trabaja. Por ejemplo, en una aplicación de seguimiento de las reuniones con los clientes, es posible que tengas tres entidades que representen las reuniones con los clientes, las agendas y los asistentes.

Las entidades contienen campos que tienen tipos, como enteros o cadenas, que describen los datos que se almacenan. Si bien utiliza entidades para definir su modelo de datos, debe conectar la entidad a un servicio de almacenamiento de datos externo, como Amazon Redshift o Amazon DynamoDB, para almacenar los datos. Puede pensar en una entidad como un intermediario entre su aplicación de App Studio y los datos del servicio externo.

Puedes usar acciones de datos para interactuar con los datos de tu aplicación desde los componentes y las automatizaciones. Las dos acciones de datos más comunes que se utilizan son una `getAll` acción y una `getByID` acción. Por ejemplo, la aplicación podría usar la acción de `getAll` datos para rellenar una tabla con los datos y una `getByID` acción para rellenar un componente de detalle con más información sobre una entrada de datos específica.

También puede añadir datos de muestra a su entidad para probar la aplicación con mayor facilidad sin necesidad de llamar a servicios externos.

## Construye la interfaz de usuario de tu aplicación
<a name="how-it-works-pages-components"></a>

En App Studio, la interfaz de usuario de la aplicación se crea con *páginas* y *componentes*. Las páginas son pantallas individuales de la aplicación y contenedores de componentes. Los componentes son los componentes básicos de la interfaz de usuario de la aplicación. Hay muchos tipos de componentes, como tablas, formularios, visores de imágenes y botones.

La siguiente imagen muestra la pestaña **Páginas** del estudio de aplicaciones, donde puede agregar o configurar páginas y componentes de la aplicación. Las siguientes áreas clave están resaltadas y numeradas:

1. El panel de **páginas** del lado izquierdo. Aquí es donde administras las páginas, el encabezado de la aplicación y la configuración de navegación. Puede ver todas las páginas y los componentes de la aplicación.

1. El **lienzo**, que muestra los componentes de la página actual. Puede elegir los componentes del lienzo para configurar sus propiedades.

1. El panel de **componentes** o **propiedades** del lado derecho. Si no hay nada seleccionado, se muestra el panel Componentes, que muestra la lista de componentes que se pueden añadir a la página. Si selecciona una página o un componente, se muestra el panel Propiedades, donde puede configurar la página o el componente.

1. Los paneles inferiores de **errores** y **advertencias**. Estos paneles muestran los errores o advertencias de la aplicación, que suelen deberse a problemas de configuración. Puede elegir el panel para ampliarlo y ver los mensajes.

![Vista de la pestaña Páginas del estudio de aplicaciones que se muestra al editar una aplicación.](http://docs.aws.amazon.com/es_es/appstudio/latest/userguide/images/pages-components.png)


Por ejemplo, las aplicaciones en las que los usuarios tienen que introducir información pueden tener las siguientes páginas y componentes:
+ Una página de entrada que incluye un componente de formulario que los usuarios utilizan para rellenar y enviar información.
+ Una página de vista de lista que contiene un componente de tabla con información sobre cada entrada.
+ Una página de vista detallada que contiene un componente de detalles con más información sobre cada entrada.

Los componentes pueden incluir información o datos estáticos, como un formulario con campos definidos. También pueden incluir información dinámica mediante automatizaciones, como un visor de imágenes que recupera una imagen de un bucket de Amazon S3 y se la muestra al usuario.

Es importante entender el concepto de parámetros de *página.* Los parámetros de página se utilizan para enviar información de una página a otra. Un ejemplo habitual de uso de los parámetros de página es la búsqueda y el filtrado, en los que el término de búsqueda de una página se envía a la tabla o lista de elementos para filtrarlos en otra página. Otro ejemplo de caso práctico es la visualización de los detalles del elemento, donde el identificador del elemento se envía a una página de visualización detallada.

## Implementar la lógica o el comportamiento de su aplicación
<a name="how-it-works-automations-actions"></a>

Puede pensar en la lógica o el comportamiento de la aplicación como la funcionalidad de la aplicación. Puedes definir qué ocurre cuando un usuario elige un botón, envía información, navega a una página nueva o interactúa de otras formas. *En App Studio, puedes definir la lógica de tu aplicación con *automatizaciones* y acciones.* Las automatizaciones son contenedores de acciones, que son los componentes básicos de la funcionalidad de las automatizaciones.

La siguiente imagen muestra la pestaña **Automatizaciones** del estudio de aplicaciones, donde puede agregar o configurar las automatizaciones y sus acciones en la aplicación. Las siguientes áreas clave están resaltadas y numeradas:
+ El panel de **automatizaciones** del lado izquierdo. Aquí es donde administras las automatizaciones. Puede ver todas las automatizaciones y acciones de su aplicación.
+ El **lienzo**, que muestra la automatización actual. Muestra los parámetros de automatización configurados (que se explican más adelante en esta sección) y las acciones. Puede elegir los componentes del lienzo para configurar sus propiedades.
+ Los paneles de **acciones** y **propiedades** del lado derecho. Si no hay nada seleccionado, se muestra el panel Acciones. Muestra la lista de acciones que se pueden añadir a la automatización. Si selecciona una automatización, puede ver y configurar sus propiedades, como la entrada y la salida de la automatización. Si selecciona una acción, puede ver y configurar las propiedades de la acción.
+ Los paneles inferiores de **errores** y **advertencias**. Este panel muestra los errores o advertencias de la aplicación (generalmente relacionados con problemas de configuración). Puede elegir el panel para ampliarlo y ver los mensajes.

![La pestaña Automatizaciones del estudio de aplicaciones, donde puedes crear, configurar y gestionar automatizaciones y acciones mientras editas una aplicación.](http://docs.aws.amazon.com/es_es/appstudio/latest/userguide/images/automations-actions.png)


Las automatizaciones pueden ser sencillas (como sumar números y devolver el resultado) o más potentes (como enviar una entrada a otro servicio y devolver el resultado). Los componentes principales de una automatización son los siguientes:
+ Un *disparador*, que define cuándo se ejecuta la automatización. Un ejemplo es cuando el usuario presiona un botón en la interfaz de usuario.
+ Una *entrada de automatización*, que envía información a la automatización. Las entradas de automatización se definen con *parámetros de automatización*. Por ejemplo, si desea utilizar Amazon Bedrock para devolver un resumen de texto al usuario, debe configurar el texto para que se resuma como un parámetro de automatización.
+ *Acciones*, que son los componentes básicos de la funcionalidad de una automatización. Puede pensar en cada acción como un paso de la automatización. Las acciones pueden realizar llamadas APIs, invocar acciones personalizadas JavaScript, crear registros de datos y realizar otras funciones. También puede agrupar las acciones en bucles o condiciones para personalizar aún más la funcionalidad. También puedes invocar otras automatizaciones con una acción.
+ Una *salida de automatización*, que puede utilizar en componentes o incluso en otras automatizaciones. Por ejemplo, el resultado de la automatización podría ser el texto que se muestra en un componente de texto, una imagen que se mostrará en un componente del visor de imágenes o la entrada de otra automatización.

## El ciclo de vida de desarrollo de su aplicación
<a name="how-it-works-development-lifecycle"></a>

El ciclo de vida de desarrollo de su aplicación incluye las siguientes etapas: creación, prueba y publicación. Se denomina ciclo porque es probable que vaya iterando estas etapas y entre ellas a medida que vaya creando e iterando la aplicación.

La siguiente imagen muestra un cronograma simplificado del ciclo de vida del desarrollo de aplicaciones en App Studio:

![Un diagrama cronológico del ciclo de vida del desarrollo de aplicaciones, que incluye la creación, la vista previa, las pruebas, la producción y el uso compartido.](http://docs.aws.amazon.com/es_es/appstudio/latest/userguide/images/app-studio-development-lifecycle.png)


App Studio ofrece varias herramientas para respaldar el ciclo de vida de la aplicación. Estas herramientas incluyen los siguientes tres entornos distintos, que se muestran en el diagrama anterior:
+ El entorno de vista previa, donde puede obtener una vista previa de la aplicación para ver su aspecto para los usuarios finales y probar funciones específicas. Utilice el entorno de vista previa para probar e iterar rápidamente la aplicación sin necesidad de publicarla. Las aplicaciones del entorno de vista previa no se comunican ni transfieren datos con servicios externos. Esto significa que no se pueden probar las interacciones y la funcionalidad que dependen de servicios externos en el entorno de vista previa.
+ El entorno de pruebas, donde puede probar la conexión y las interacciones de su aplicación con los servicios externos. Aquí también puede realizar pruebas con los usuarios finales al compartir la versión publicada en el entorno de pruebas con grupos de evaluadores.
+ El entorno de producción, donde puede realizar las pruebas finales de las nuevas aplicaciones antes de compartirlas con los usuarios finales. Una vez compartidas las aplicaciones, la versión de la aplicación que se publica en el entorno de producción es la que los usuarios finales verán y utilizarán.

## Más información
<a name="how-it-works-learn-more"></a>

Ahora que conoces los conceptos básicos del funcionamiento del desarrollo de aplicaciones en App Studio, puedes empezar a crear tu propia aplicación o profundizar en el aprendizaje de conceptos y recursos.

Para empezar a crear, te recomendamos que pruebes uno de los tutoriales de introducción:
+ Sigue [Tutorial: Generar una aplicación mediante IA](getting-started-tutorial-ai.md) para aprender a usar el asistente de creación de IA para empezar a crear una aplicación con ventaja.
+ Sigue [Tutorial: Comience a crear desde una aplicación vacía](getting-started-tutorial-empty.md) para aprender a crear una aplicación desde cero mientras aprendes los conceptos básicos.

Para obtener más información sobre los recursos o conceptos mencionados en este tema, consulte los siguientes temas:
+ [Conecta App Studio a otros servicios con conectores](connectors.md)
+ [Entidades y acciones de datos: configura el modelo de datos de tu aplicación](data.md)
+ [Páginas y componentes: crea la interfaz de usuario de tu aplicación](pages-components-ux.md)
+ [Automatizaciones y acciones: defina la lógica empresarial de su aplicación](automations.md)
+ [Vista previa, publicación y uso compartido de aplicaciones](applications-preview-publish-share.md)