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.

# Tutorial: Comience a crear desde una aplicación vacía
<a name="getting-started-tutorial-empty"></a>

En este tutorial, crearás una aplicación interna de convocatoria de reunión para clientes con AWS App Studio. Aprenderás a crear aplicaciones en App Studio y, al mismo tiempo, te centrarás en casos de uso reales y en ejemplos prácticos. Además, aprenderás a definir las estructuras de datos, el diseño de la interfaz de usuario y la implementación de aplicaciones.

**nota**  
En este tutorial se detalla cómo crear una aplicación desde cero, empezando por una aplicación vacía. Por lo general, es mucho más rápido y fácil usar la IA para ayudar a generar una aplicación y sus recursos al proporcionar una descripción de la aplicación que deseas crear. Para obtener más información, consulte [Tutorial: Generar una aplicación mediante IA](getting-started-tutorial-ai.md).

La clave para entender cómo crear aplicaciones con App Studio es entender los siguientes cuatro conceptos básicos y cómo funcionan juntos: **componentes**, **automatizaciones**, **datos** y **conectores**.
+ **Componentes**: los componentes son los componentes básicos de la interfaz de usuario de la aplicación. Representan elementos visuales como tablas, formularios y botones. Cada componente tiene su propio conjunto de propiedades, que puede personalizar para adaptarlo a sus necesidades específicas.
+ **Automatizaciones**: con las automatizaciones, puede definir la lógica y los flujos de trabajo que rigen el comportamiento de su aplicación. Puede utilizar las automatizaciones para crear, actualizar, leer o eliminar filas de una tabla de datos o para interactuar con los objetos de un bucket de Amazon S3. También puede utilizarlas para gestionar tareas como la validación de datos, las notificaciones o las integraciones con otros sistemas.
+ **Datos**: los datos son la información que impulsa su aplicación. En App Studio, puedes definir modelos de datos, denominados *entidades*. Las entidades representan los distintos tipos de datos que necesitas almacenar y con los que trabajar, como las convocatorias de reuniones de los clientes, las agendas o los asistentes. Puede conectar estos modelos de datos a una variedad de fuentes de datos, incluidas las de AWS servicios y las externas APIs, mediante los conectores de App Studio.
+ **Conectores**: App Studio proporciona conexiones con una amplia gama de fuentes de datos, que incluyen AWS servicios como Aurora, DynamoDB y Amazon Redshift. Las fuentes de datos también incluyen servicios de terceros, como Salesforce, o muchos otros que utilizan OpenAPI o conectores API genéricos. Puede usar los conectores de App Studio para incorporar fácilmente a sus aplicaciones los datos y las funciones de estos servicios de nivel empresarial y aplicaciones externas.

A medida que avance en el tutorial, explorará cómo se combinan los conceptos clave de los componentes, los datos y la automatización para crear su aplicación interna de convocatoria de reuniones con los clientes. 

Los siguientes son pasos generales que describen lo que harás en este tutorial:

1. **Comience con los datos**: muchas aplicaciones comienzan con un modelo de datos, por lo que este tutorial también comienza con los datos. Para crear la aplicación Customer Meeting Request, empezará por crear una `MeetingRequests` entidad. Esta entidad representa la estructura de datos para almacenar toda la información relevante de la convocatoria de reunión, como el nombre del cliente, la fecha de la reunión, la agenda y los asistentes. Este modelo de datos es la base de su aplicación y potencia los diversos componentes y automatizaciones que creará.

1. **Cree su interfaz de usuario (UI)**: Una vez establecido el modelo de datos, el tutorial le guiará a través de la creación de la interfaz de usuario (UI). En App Studio, la interfaz de usuario se crea añadiendo *páginas* y *componentes* a las mismas. Añadirá componentes como *tablas*, *vistas detalladas* y *calendarios* a una página del panel de convocatorias de reunión. Estos componentes se diseñarán para mostrar los datos almacenados en la `MeetingRequests` entidad e interactuar con ellos. Esto permite a los usuarios ver, gestionar y programar las reuniones con los clientes. También creará una página de creación de convocatorias de reunión. Esta página incluye un componente de *formulario* para recopilar datos y un componente de *botón* para enviarlos.

1. **Añada lógica empresarial con automatizaciones**: para mejorar la funcionalidad de su aplicación, configurará algunos de los componentes para permitir las interacciones de los usuarios. Algunos ejemplos son navegar a una página o crear un nuevo registro de convocatoria de reunión en la `MeetingRequests` entidad.

1. **Mejore con la validación y las expresiones**: para garantizar la integridad y precisión de sus datos, agregará reglas de validación al componente del *formulario*. Esto ayudará a garantizar que los usuarios proporcionen información completa y válida al crear nuevos registros de convocatorias de reunión. Además, utilizará expresiones para hacer referencia a los datos de la aplicación y manipularlos, de modo que pueda mostrar información dinámica y contextual en toda la interfaz de usuario.

1. **Vista previa y pruebas**: antes de implementar la aplicación, tendrá la oportunidad de obtener una vista previa y probarla exhaustivamente. Esto le permitirá comprobar que los componentes, los datos y las automatizaciones funcionan todos juntos sin problemas. Esto proporciona a sus usuarios una experiencia fluida e intuitiva.

1. **Publique la aplicación**: por último, implementará su solicitud interna de solicitud de reunión con el cliente completa y la pondrá a disposición de sus usuarios. Con la potencia del enfoque de bajo código de App Studio, habrás creado una aplicación personalizada que satisfaga las necesidades específicas de tu organización, sin necesidad de contar con amplios conocimientos de programación.

**Contents**
+ [Requisitos previos](#getting-started-tutorial-prerequisites)
+ [Paso 1: Crear una aplicación de](#getting-started-tutorial-steps-create-application)
+ [Paso 2: Crea una entidad para definir los datos de tu aplicación](#getting-started-tutorial-steps-create-entity)
  + [Crea una entidad gestionada](#getting-started-tutorial-steps-create-managed-entity)
  + [Agregue campos a su entidad](#getting-started-tutorial-steps-add-fields)
+ [Paso 3: Diseñe la interfaz de usuario (UI) y la lógica](#getting-started-tutorial-steps-user-interface)
  + [Agregue una página de panel de solicitud de reunión](#getting-started-tutorial-steps-user-interface-create-page)
  + [Agregue una página de creación de convocatorias de reunión](#getting-started-tutorial-steps-user-interface-add-create-customer-page)
+ [Paso 4: Obtenga una vista previa de la aplicación](#getting-started-tutorial-steps-preview)
+ [Paso 5: Publicar la aplicación en el entorno **de pruebas**](#getting-started-tutorial-steps-publish)
+ [Siguientes pasos](#getting-started-tutorial-next-steps)

## Requisitos previos
<a name="getting-started-tutorial-prerequisites"></a>

Antes de empezar, revisa y completa los siguientes requisitos previos:
+ Acceso a AWS App Studio. Para obtener más información, consulte [Configuración e inicio de sesión en AWS App Studio](setting-up.md).
+ Opcional: [AWS Conceptos de App Studio](concepts.md) revísalo para familiarizarte con los conceptos importantes de App Studio.
+ Opcional: comprender los conceptos básicos de desarrollo web, como la JavaScript sintaxis.
+ Opcional: familiaridad con AWS los servicios.

## Paso 1: Crear una aplicación de
<a name="getting-started-tutorial-steps-create-application"></a>

1. Inicia sesión en App Studio.

1. En la barra de navegación de la izquierda, selecciona **Builder Hub** y selecciona **\$1 Crear aplicación**.

1. Elija **Empezar desde cero**.

1. En el campo **Nombre de la aplicación**, proporciona un nombre para la aplicación, por ejemplo. **Customer Meeting Requests**

1. Si se te pide que selecciones fuentes de datos o un conector, selecciona **Omitir** para los fines de este tutorial.

1. Elija **Paso siguiente** para continuar.

1. (Opcional): mira el tutorial en vídeo para obtener una descripción general rápida de la creación de aplicaciones en App Studio.

1. Selecciona **Editar aplicación para** acceder al creador de aplicaciones de App Studio.

## Paso 2: Crea una entidad para definir los datos de tu aplicación
<a name="getting-started-tutorial-steps-create-entity"></a>

Las entidades representan tablas que contienen los datos de tu aplicación, de forma similar a las tablas de una base de datos. En lugar de que la interfaz de usuario (UI) y las automatizaciones de la aplicación se conecten directamente a las fuentes de datos, primero se conectan a las entidades. Las entidades actúan como intermediarias entre tu fuente de datos real y tu aplicación de App Studio, y proporcionan un único lugar para administrar tus datos y acceder a ellos.

Hay cuatro formas de crear una entidad. Para este tutorial, utilizarás la entidad gestionada por App Studio.

### Crea una entidad gestionada
<a name="getting-started-tutorial-steps-create-managed-entity"></a>

Al crear una entidad gestionada, también se crea la tabla de DynamoDB correspondiente que administra App Studio. Cuando se realizan cambios en la entidad en la aplicación App Studio, la tabla de DynamoDB se actualiza automáticamente. Con esta opción, no es necesario crear, administrar o conectarse manualmente a una fuente de datos de terceros, ni designar el mapeo de los campos de la entidad a las columnas de la tabla.

Al crear una entidad, debe definir un campo de **clave principal**. Una clave principal sirve como identificador único para cada registro o fila de la entidad. Esto garantiza que cada registro se pueda identificar y recuperar fácilmente sin ambigüedad. La clave principal consta de las siguientes propiedades:
+ Nombre de clave principal: nombre para el campo de clave principal de la entidad.
+ Tipo de datos de clave principal: el tipo del campo de clave principal. En App Studio, los tipos de clave principal compatibles son **String** para texto y **Float** para números. Una clave principal de texto (como*meetingName*) tendría un tipo de **cadena** y una clave principal numérica (como*meetingId*) tendría un tipo de **flotación**.

La clave principal es un componente crucial de una entidad porque refuerza la integridad de los datos, evita la duplicación de datos y permite una recuperación y consulta de datos eficientes.

**Para crear una entidad gestionada**

1. Seleccione **Datos** en el menú de la barra superior.

1. Selecciona **\$1 Crear entidad**.

1. Elija **Crear entidad gestionada por App Studio**.

1. En el campo **Nombre de la entidad**, proporciona un nombre para la entidad. En este tutorial, escriba **MeetingRequests**.

1. En el campo **Clave principal**, introduce la etiqueta del nombre de la clave principal para asignarla a la columna de clave principal de tu entidad. En este tutorial, escriba **requestID**.

1. En **Tipo de datos de clave principal**, selecciona **Float**.

1. Seleccione **Create entity (Crear entidad)**.

### Agregue campos a su entidad
<a name="getting-started-tutorial-steps-add-fields"></a>

Para cada campo, especificará el **nombre para mostrar**, que es la etiqueta que pueden ver los usuarios de la aplicación. El nombre para mostrar puede contener espacios y caracteres especiales, pero debe ser único dentro de la entidad. El nombre para mostrar sirve como una etiqueta fácil de usar para el campo y ayuda a los usuarios a identificar y comprender fácilmente su propósito.

A continuación, proporcionará el **nombre del sistema**, un identificador único que la aplicación utiliza internamente para hacer referencia al campo. El nombre del sistema debe ser conciso, sin espacios ni caracteres especiales. El nombre del sistema permite a la aplicación realizar cambios en los datos del campo. Actúa como un punto de referencia único para el campo dentro de la aplicación.

Por último, seleccionará el **tipo de datos** que mejor represente el tipo de datos que desea almacenar en el campo, como cadena (texto), booleano (verdadero/falso), fecha, decimal, flotante, entero o. DateTime La definición del tipo de datos adecuado garantiza la integridad de los datos y permite gestionar y procesar correctamente los valores del campo. Por ejemplo, si almacena los nombres de los clientes en su convocatoria de reunión, debe seleccionar el tipo de `String` datos para incluir los valores de texto.

**Para agregar campos a su `MeetingRequests` entidad**
+ Seleccione **\$1 Añadir campo** para añadir los cuatro campos siguientes:

  1. Agregue un campo que represente el nombre de un cliente con la siguiente información:
     + **Nombre para mostrar**: **Customer name**
     + **Nombre del sistema**: **customerName**
     + **Tipo de datos**: **String**

  1. Agregue un campo que represente la fecha de la reunión con la siguiente información:
     + **Nombre para mostrar**: **Meeting date**
     + **Nombre del sistema**: **meetingDate**
     + **Tipo de datos**: **DateTime**

  1. Agregue un campo que represente la agenda de la reunión con la siguiente información:
     + **Nombre para mostrar**: **Agenda**
     + **Nombre del sistema**: **agenda**
     + **Tipo de datos**: **String**

  1. Agregue un campo para representar a los asistentes a la reunión con la siguiente información:
     + **Nombre para mostrar**: **Attendees**
     + **Nombre del sistema**: **attendees**
     + **Tipo de datos**: **String**

Puede agregar datos de muestra a su entidad que puede usar para probar y obtener una vista previa de la aplicación antes de publicarla. Al agregar hasta 500 filas de datos simulados, puede simular escenarios del mundo real y examinar cómo su aplicación maneja y muestra varios tipos de datos, sin depender de los datos reales ni conectarse a servicios externos. Esto le ayuda a identificar y resolver cualquier problema o incoherencia al principio del proceso de desarrollo. Esto garantiza que la aplicación funcione según lo previsto cuando se trata de datos reales.

**Para añadir datos de muestra a su entidad**

1. Elija la pestaña **Datos de muestra** en el banner.

1. Selecciona **Generar más datos de muestra**.

1. Seleccione **Save**.

Si lo desea, seleccione **Conexión** en el encabezado para revisar los detalles sobre el conector y la tabla de DynamoDB creada para usted.

## Paso 3: Diseñe la interfaz de usuario (UI) y la lógica
<a name="getting-started-tutorial-steps-user-interface"></a>

### Agregue una página de panel de solicitud de reunión
<a name="getting-started-tutorial-steps-user-interface-create-page"></a>

En App Studio, cada página representa una pantalla de la interfaz de usuario (UI) de la aplicación con la que los usuarios interactuarán. Dentro de estas páginas, puedes añadir varios componentes, como tablas, formularios y botones, para crear el diseño y la funcionalidad deseados. 

Las aplicaciones recién creadas vienen con una página predeterminada, por lo que tendrá que cambiarle el nombre en lugar de añadir una nueva para utilizarla como una simple página de panel de convocatorias de reunión.

**Para cambiar el nombre de la página predeterminada**

1. En el menú de navegación de la barra superior, selecciona **Páginas**.

1. **En el panel de la izquierda, haga doble clic en **Página1, cámbiele** el nombre a y pulse **MeetingRequestsDashboard** Entrar.**

Ahora, añada un componente de tabla a la página que se utilizará para mostrar las convocatorias de reunión.

**Para añadir un componente de tabla a la página del panel de convocatorias de reunión**

1. En el panel de **componentes** de la derecha, localice el componente de **tabla** y arrástrelo al lienzo.

1. Elija la tabla en el lienzo para seleccionarla.

1. En el panel de **propiedades** del lado derecho, actualice los siguientes ajustes:

   1. Selecciona el icono del lápiz para cambiarle el nombre a la tabla. **meetingRequestsTable**

   1. **En el menú desplegable **Fuente**, selecciona Entidad.**

   1. En el menú desplegable **Acciones de datos**, elige la entidad que has creado (**MeetingRequests**) y selecciona **\$1 Añadir acciones de datos**. 

1. Si se te solicita, selecciona **GetAll**.
**nota**  
La acción **Obtener todos los** datos es un tipo específico de acción de datos que recupera todos los registros (filas) de una entidad específica. Al asociar la acción Obtener todos los datos a un componente de una tabla, por ejemplo, la tabla se rellena automáticamente con todos los datos de la entidad conectada y muestra cada registro como una fila de la tabla.

### Agregue una página de creación de convocatorias de reunión
<a name="getting-started-tutorial-steps-user-interface-add-create-customer-page"></a>

A continuación, cree una página que contenga un formulario que los usuarios finales utilizarán para crear las convocatorias de reunión. También agregará un botón de envío que crea el registro en la `MeetingRequests` entidad y, a continuación, hace que el usuario final regrese a la `MeetingRequestsDashboard` página.

**Para añadir una página de creación de convocatorias de reunión**

1. En el banner superior, selecciona **Páginas**.

1. En el panel de la izquierda, selecciona **\$1 Añadir**.

1. En el panel de propiedades del lado derecho, selecciona el icono del lápiz y cambia el nombre de la página a. **CreateMeetingRequest**

Una vez agregada la página, añadirá un formulario a la página que los usuarios finales utilizarán para introducir la información necesaria para crear una convocatoria de reunión en la `MeetingRequests` entidad. App Studio ofrece un método para generar un formulario a partir de una entidad existente, que rellena automáticamente los campos del formulario en función de los campos de la entidad y también genera un botón de envío para crear un registro en la entidad con las entradas del formulario.

**Para generar automáticamente un formulario a partir de una entidad en la página de creación de la convocatoria de reunión**

1. En el menú de **componentes** del lado derecho, busque el componente **Formulario** y arrástrelo al lienzo.

1. Selecciona **Generar formulario.**

1. En el menú desplegable, selecciona la `MeetingRequests` entidad.

1. Seleccione **Generar**.

1. Pulse el botón **Enviar** en el lienzo para seleccionarla.

1. En el panel de propiedades del lado derecho, en la sección **Activadores**, selecciona **\$1 Añadir**.

1. Selecciona **Navegar**.

1. En el panel de propiedades del lado derecho, cambia el **nombre de la acción** por un nombre descriptivo, como**Navigate to MeetingRequestsDashboard**.

1. Cambia el **tipo de navegación** a página. En el menú desplegable **Navegar a**, selecciona**MeetingRequestsDashboard**.

Ahora que tenemos una página y un formulario de creación de convocatorias de reunión, queremos facilitar la navegación a esta página desde la `MeetingRequestsDashboard` página, de modo que los usuarios finales que revisen el panel puedan crear fácilmente las convocatorias de reunión. Utilice el siguiente procedimiento para crear un botón en la `MeetingRequestsDashboard` página que conduzca a la `CreateMeetingRequest` página.

**Para agregar un botón para navegar de a `MeetingRequestsDashboard` `CreateMeetingRequest`**

1. En el banner superior, selecciona **Páginas**.

1. Elige la `MeetingRequestsDashboard` página. 

1. En el panel de **componentes** del lado derecho, busque el componente **Botón**, arrástrelo al lienzo y colóquelo encima de la tabla.

1. Elija el botón recién agregado para seleccionarlo.

1. En el panel de **propiedades** del lado derecho, actualiza los siguientes ajustes:

   1. Selecciona el icono del lápiz para cambiarle el nombre al botón. **createMeetingRequestButton**

   1. **Etiqueta del botón**:**Create Meeting Request**. Este es el nombre que verán los usuarios finales.

   1. En el menú desplegable de **iconos**, selecciona **\$1 Plus**.

   1. Crea un disparador que lleve al usuario final a la `MeetingRequestsDashboard` página:

      1. En la sección **Activadores**, selecciona **\$1 Añadir**.

      1. En **Tipo de acción**, selecciona **Navegar**.

      1. Elija el disparador que acaba de crear para configurarlo.

      1. En **Nombre de la acción**, proporcione un nombre descriptivo como**NavigateToCreateMeetingRequest**.

      1. En el menú desplegable **Tipo de navegación**, selecciona **Página.**

      1. En el menú desplegable **Navegar a**, selecciona la `CreateMeetingRequest` página. 

## Paso 4: Obtenga una vista previa de la aplicación
<a name="getting-started-tutorial-steps-preview"></a>

Puedes previsualizar una aplicación en App Studio para ver cómo la verán los usuarios. Además, puedes probar su funcionalidad utilizándola y comprobando los registros en un panel de depuración.

El entorno de vista previa de la aplicación no admite la visualización de datos en tiempo real. Tampoco admite la conexión con recursos externos mediante conectores, como fuentes de datos. En su lugar, puede usar datos de muestra y resultados simulados para probar la funcionalidad.

**Para obtener una vista previa de la aplicación para probarla**

1. En la esquina superior derecha del creador de aplicaciones, selecciona **Vista previa**.

1. Interactúa con la `MeetingRequestsDashboard` página y prueba la tabla, el formulario y los botones. 

## Paso 5: Publicar la aplicación en el entorno **de pruebas**
<a name="getting-started-tutorial-steps-publish"></a>

Ahora que ha terminado de crear, configurar y probar su aplicación, es el momento de publicarla en el entorno de **pruebas** para realizar las pruebas finales y luego compartirla con los usuarios.

**Para publicar tu aplicación en el entorno de pruebas**

1. En la esquina superior derecha del creador de aplicaciones, selecciona **Publicar**.

1. Agrega una descripción de la versión para el entorno de pruebas.

1. Revise y seleccione la casilla de verificación relativa al SLA. 

1. Elija **Iniciar**. La publicación puede tardar hasta 15 minutos.

1. (Opcional) Cuando estés listo, puedes dar acceso a otras personas seleccionando **Compartir** y siguiendo las instrucciones.
**nota**  
Para compartir aplicaciones, el administrador debe haber creado grupos de usuarios finales. 

Tras realizar las pruebas, vuelva a seleccionar **Publicar** para promocionar la aplicación en el entorno de producción. Para obtener más información sobre los distintos entornos de aplicaciones, consulte[Entornos de aplicaciones](applications-publish.md#application-environments).

## Siguientes pasos
<a name="getting-started-tutorial-next-steps"></a>

Ahora que ha creado su primera aplicación, estos son algunos de los siguientes pasos:

1. Sigue creando la aplicación tutorial. Ahora que ha configurado los datos, algunas páginas y una automatización, puede añadir páginas adicionales y componentes para obtener más información sobre la creación de aplicaciones.

1. Para obtener más información sobre la creación de aplicaciones, consulta la[Documentación del constructor](builder-documentation.md). En concreto, puede resultar útil explorar los siguientes temas:
   + [Referencia de acciones de Automation](automations-actions-reference.md)
   + [Referencia de componentes](components-reference.md)
   + [Interacción con Amazon Simple Storage Service con componentes y automatizaciones](automations-s3.md)
   + [Consideraciones y mitigaciones de seguridad](security-considerations-and-mitigations.md)

   Además, los siguientes temas contienen más información sobre los conceptos que se analizan en el tutorial:
   + [Vista previa, publicación y uso compartido de aplicaciones](applications-preview-publish-share.md)
   + [Crear una entidad en una aplicación de App Studio](data-entities-create.md)