View a markdown version of this page

Tutorial: Empieza a crear desde una aplicación vacía - AWS Estudio de aplicaciones
Requisitos previosPaso 1: Crear una aplicación dePaso 2: Crea una entidad para definir los datos de tu aplicaciónPaso 3: Diseñar la interfaz de usuario (UI) y la lógicaPaso 4: Obtenga una vista previa de la aplicaciónPaso 5: Publicar la aplicación en Testeo entornoSiguientes pasos

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: Empieza a crear desde una aplicación vacía

En este tutorial, crearás una aplicación interna de solicitud de reunión con el cliente con AWS App Studio. Aprenderás cómo crear aplicaciones en App Studio y, al mismo tiempo, te centrarás en casos de uso del mundo real 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

Este tutorial detalla cómo crear una aplicación desde cero, comenzando con una aplicación vacía. Por lo general, es mucho más rápido y sencillo usar la IA para ayudar a generar una aplicación y sus recursos proporcionando una descripción de la aplicación que quieres crear. Para obtener más información, consulte Tutorial: Generar una aplicación mediante IA.

La clave para entender cómo crear aplicaciones con App Studio es entender los siguientes cuatro conceptos básicos y cómo funcionan en conjunto: componentes, automatizaciones , datos y conectores.

  • Componentes: los componentes son los componentes básicos de la interfaz de usuario de tu aplicación. Representan elementos visuales como tablas, formularios y botones. Cada componente tiene su propio conjunto de propiedades, que puede personalizar para que se ajusten a sus requisitos específicos.

  • Automatizaciones: con las automatizaciones, puede definir la lógica y los flujos de trabajo que rigen el comportamiento de su aplicación. Puede usar 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 utilizarlos 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 diferentes tipos de datos que necesitas almacenar y con los que debes trabajar, como las convocatorias de reuniones de los clientes, las agendas o los asistentes. Puedes conectar estos modelos de datos a una variedad de fuentes de datos, incluidos AWS los servicios y las API externas, 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 de API genéricos. Puede usar los conectores de App Studio para incorporar fácilmente en sus aplicaciones los datos y las funciones de estos servicios de nivel empresarial y aplicaciones externas.

A medida que avances en el tutorial, descubrirás cómo se combinan los conceptos clave de componentes, datos y automatización para crear tu aplicación interna de solicitud de reuniones con 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 sobre 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 sirve como base para su aplicación y potencia los diversos componentes y automatizaciones que creará.

  2. Cree su interfaz de usuario (UI): Una vez establecido el modelo de datos, el tutorial lo guiará a través de la creación de la interfaz de usuario (UI). En App Studio, creas la interfaz de usuario añadiendo páginas y componentes a las mismas. Añadirás componentes como tablas , vistas detalladas y calendarios a la página del panel de control de una convocatoria 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, administrar 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.

  3. Agregue 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 convocatorias de reunión en la MeetingRequests entidad.

  4. 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 de 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.

  5. Vista previa y prueba: antes de implementar la aplicación, tendrá la oportunidad de previsualizarla y probarla minuciosamente. Esto le permitirá verificar que los componentes, los datos y las automatizaciones funcionan todos juntos sin problemas. Esto proporciona a sus usuarios una experiencia fluida e intuitiva.

  6. Publique la aplicación: por último, implementará su aplicación interna de solicitud de reunión con el cliente completa y la pondrá a disposición de sus usuarios. Gracias a 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.

Requisitos previos

Antes de empezar, revisa y completa los siguientes requisitos previos:

Paso 1: Crear una aplicación de

  1. Inicia sesión en App Studio.

  2. En el panel de navegación de la izquierda, selecciona Builder Hub y elige + Crear aplicación.

  3. Elija Empezar desde cero.

  4. En el campo Nombre de la aplicación, introduce un nombre para tu aplicación, por ejemplo. Customer Meeting Requests

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

  6. Elija Paso siguiente para continuar.

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

  8. Selecciona Editar aplicación, que te llevará al generador de aplicaciones de App Studio.

Paso 2: Crea una entidad para definir los datos de tu aplicación

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 lugar único para administrar tus datos y acceder a ellos.

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

Crea una entidad gestionada

Al crear una entidad gestionada, también se crea una 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 ni conectarse manualmente a una fuente de datos de terceros, ni designar la asignación de los campos de la entidad a las columnas de la tabla.

Al crear una entidad, debes 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 la clave principal: un 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 un número. Una clave principal de texto (comomeetingName) tendría un tipo de cadena y una clave principal numérica (comomeetingId) tendría un tipo de flotante.

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. Selecciona Datos en el menú de la barra superior.

  2. Selecciona + Crear entidad.

  3. Selecciona Crear entidad gestionada por App Studio.

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

  5. En el campo Clave principal, introduce la etiqueta con el nombre de la clave principal que se asignará a la columna de clave principal de tu entidad. En este tutorial, escriba requestID.

  6. Para el tipo de datos de clave principal, elige Float.

  7. Seleccione Create entity (Crear entidad).

Agrega campos a tu entidad

Para cada campo, especificarás el nombre para mostrar, que es la etiqueta visible para 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 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 (true/false), fecha, decimal, flotante, entero o. DateTime Definir el 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 la convocatoria de reunión, debe seleccionar el tipo de String datos para incluir los valores de texto.

Para agregar campos a tu MeetingRequests entidad

  • Selecciona + Agregar campo para agregar los cuatro campos siguientes:

    1. Agrega 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

    2. 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

    3. 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

    4. 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

Puedes añadir datos de muestra a tu entidad para probarla 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 la forma en que su aplicación gestiona y muestra los distintos tipos de datos, sin depender de datos reales ni conectarse a servicios externos. Esto le ayuda a identificar y resolver cualquier problema o incoherencia en las primeras etapas del proceso de desarrollo. Esto garantiza que la aplicación funcione según lo previsto cuando se trata de datos reales.

Para agregar datos de muestra a su entidad

  1. Selecciona la pestaña de datos de muestra en el banner.

  2. Seleccione Generar más datos de muestra.

  3. Seleccione Save.

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

Paso 3: Diseñar la interfaz de usuario (UI) y la lógica

Agregue una página de panel de convocatorias de reunión

En App Studio, cada página representa una pantalla de la interfaz de usuario (UI) de la aplicación con la que interactuarán los usuarios. En estas páginas, puedes agregar 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 le cambiarás 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.

  2. En el panel de la izquierda, haz doble clic en Página1, cámbiale el nombre a y pulsa MeetingRequestsDashboard Entrar.

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

Para agregar 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 Tabla y arrástrelo al lienzo.

  2. Elija la tabla en el lienzo para seleccionarla.

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

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

    2. En el menú desplegable Fuente, selecciona Entidad.

    3. En el menú desplegable Acciones de datos, elige la entidad que creaste (MeetingRequests) y elige + Agregar acciones de datos.

  4. Si se te solicita, elige 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 especificada. Al asociar la acción GetAll de datos a un componente de 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 continuación, cree una página que contenga un formulario que los usuarios finales utilizarán para crear convocatorias de reunión. También añadirá un botón de envío para crear el registro en la MeetingRequests entidad y, a continuación, hacer que el usuario final regrese a la MeetingRequestsDashboard página.

Para agregar una página de creación de convocatorias de reunión

  1. En el encabezado superior, selecciona Páginas.

  2. En el panel de la izquierda, selecciona + Añadir.

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

Ahora que ha agregado la página, agregará 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 convocatorias de reunión

  1. En el menú de componentes del lado derecho, busca el componente del formulario y arrástralo al lienzo.

  2. Selecciona Generar formulario.

  3. En el menú desplegable, selecciona la MeetingRequests entidad.

  4. Seleccione Generar.

  5. Elige el botón Enviar en el lienzo para seleccionarla.

  6. En el panel de propiedades del lado derecho, en la sección Activadores, selecciona + Agregar.

  7. Selecciona Navegar.

  8. En el panel de propiedades del lado derecho, cambia el nombre de la acción por algo descriptivo, comoNavigate to MeetingRequestsDashboard.

  9. Cambia el tipo de navegación a página. En el menú desplegable Navegar hasta, eligeMeetingRequestsDashboard.

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 de control puedan crear convocatorias de reunión fácilmente. Utilice el procedimiento siguiente para crear un botón en la MeetingRequestsDashboard página que permita acceder a ellaCreateMeetingRequest.

Para añadir un botón desde MeetingRequestsDashboard el que navegar CreateMeetingRequest

  1. En el encabezado superior, selecciona Páginas.

  2. Elige la MeetingRequestsDashboard página.

  3. En el panel Componentes del lado derecho, busque el componente Button, arrástrelo al lienzo y colóquelo encima de la mesa.

  4. Elige el botón recién añadido para seleccionarlo.

  5. 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

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

    3. En el menú desplegable de iconos, selecciona + Plus.

    4. Crea un activador que lleve al usuario final a la MeetingRequestsDashboard página:

      1. En la sección Activadores, selecciona + Añadir.

      2. En Tipo de acción, selecciona Navegar.

      3. Elige el disparador que acabas de crear para configurarlo.

      4. En Nombre de la acción, proporcione un nombre descriptivo comoNavigateToCreateMeetingRequest.

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

      6. En el menú desplegable Navegar hasta, selecciona la CreateMeetingRequest página.

Paso 4: Obtenga una vista previa de la aplicación

Puedes obtener una vista previa de 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 las 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 generador de aplicaciones, selecciona Vista previa.

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

Paso 5: Publicar la aplicación en Testeo entorno

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

Para publicar tu aplicación en el entorno de pruebas

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

  2. Añade una descripción de la versión para el entorno de pruebas.

  3. Revise y seleccione la casilla de verificación relacionada con el SLA.

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

  5. (Opcional) Cuando estés listo, puedes dar acceso a otras personas seleccionando Compartir y siguiendo las instrucciones.

    nota

    Para compartir aplicaciones, un administrador debe haber creado grupos de usuarios finales.

Tras la prueba, vuelva a elegir Publicar para promover la aplicación al entorno de producción. Para obtener más información sobre los diferentes entornos de aplicaciones, consulteEntornos de aplicaciones.

Siguientes pasos

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

  1. Sigue creando la aplicación de tutoriales. Ahora que tienes configurados los datos, algunas páginas y una automatización, puedes agregar páginas adicionales y componentes para obtener más información sobre la creación de aplicaciones.

  2. Para obtener más información sobre la creación de aplicaciones, consulta laDocumentación del constructor. En concreto, puede resultar útil explorar los siguientes temas:

    Además, los siguientes temas contienen más información sobre los conceptos tratados en el tutorial: