Instructivo 2: Trabaja con datos

Habilidades intermedias de App Maker

access_time Entre 15 y 20 minutos

Qué compilarás

Compilarás una aplicación de base de datos de empleados simple. Un usuario de la aplicación puede realizar las siguientes acciones:

  • Crear registros nuevos de empleados e ingresar datos en ellos
  • Editar registros de empleados
  • Navegar entre los registros
  • Ordenar registros
  • Borrar registros

Qué aprenderás

En este instructivo, aprenderás a realizar las siguientes acciones:

  • Crear un modelo de datos y agregarle campos. Aprenderás conceptos relacionados con los datos: modelos, campos, registros, fuentes de datos y vinculación de datos.
  • Agregar widgets de formulario y tabla a una página. Aprenderás cómo modificar estos widgets y cómo funcionan. También aprenderás la diferencia entre insertar y editar formularios.

Crea tu aplicación

  1. Accede a la cuenta de G Suite que te proporcionó tu empleador o escuela.
  2. Abre App Maker.
  3. Crea una aplicación en blanco:
    • Si App Maker muestra el cuadro de diálogo de bienvenida, haz clic en Crear aplicación nueva (Create New App).
    • De lo contrario, haz clic en Menú menu chevron_right Nueva (New) chevron_right Aplicación en blanco (Blank Application).
  4. Cambia el nombre de la aplicación a Base de datos de empleados.

Crea un modelo

Crea un modelo y define sus campos. Un modelo contiene los datos que están disponibles en tu aplicación. Los campos de modelo son como columnas en una tabla, por ejemplo, Nombre, Correo electrónico y Fecha de contratación. Los modelos almacenan datos en registros, como las filas en una tabla. Para este instructivo, usarás un modelo de Google Cloud SQL.

  1. En la barra de navegación izquierda, dirígete a Datos (Data) y haz clic en Agregar add. Se abrirá el cuadro de diálogo Crear modelo (Create Model) con Google Cloud SQL seleccionado.
  2. Haz clic en Siguiente (Next).
  3. Nombra el modelo EmployeeData.
  4. Haz clic en Crear (Create). App Maker crea el modelo y abre el editor de modelos.
  5. Haz clic en la pestaña Fuentes de datos (Datasources). Ten en cuenta que el modelo tiene una fuente de datos llamada EmployeeData que App Maker crea automáticamente. En un conjunto de fuente de datos, se establece qué datos de la base de datos están disponibles en la IU de la aplicación.
  6. Haz clic en EmployeeData para abrir el editor de fuente de datos y, luego, inspeccionar su configuración.

    De forma predeterminada, todos los datos están disponibles (no se establece ninguna consulta), la fuente de datos se carga de forma automática (se selecciona de forma automática la carga de datos) y los cambios se guardan de forma automática (el modo de guardado manual no está seleccionado). En esta aplicación, el comportamiento predeterminado es OK. Para otras aplicaciones, es posible que desees desactivar la carga automática de datos si deseas pasar primero una consulta del usuario. Es posible que desees activar el modo de guardado manual si deseas que los usuarios guarden de forma explícita los cambios en los registros en la fuente de datos. Por ejemplo, es posible que tengan que hacer clic en el botón Guardar cambios (Save changes).

Agrega campos al modelo

En la pestaña Campos (Fields), sigue estos pasos en cada campo:

  1. Haz clic en Agregar campo nuevo (Add New Field) y selecciona el tipo de campo.
  2. En el campo Nombre (Nombre), ingresa el nombre del campo. No es necesario que hagas cambios en la descripción y en otra configuración.

    Agrega los siguientes campos:

    Nombre del campoTipo de campo
    NameString
    EmailString
    HireDateFecha
    ActiveBooleano

Configura una página para la IU

Tu aplicación tiene una página para empezar. Asígnale un nombre a la página y la fuente de datos de tu modelo. Cuando creas una página, no tiene una fuente de datos predefinida. Cuando seleccionas una fuente de datos para una página, los widgets de la página heredan automáticamente la fuente de datos.

  1. En la barra lateral izquierda, dirígete a Página nueva (NewPage) y haz clic en Más more_vert chevron_right Renombrar (Rename).
  2. Ingresa EmployeePage y, luego, haz clic en Aceptar (OK).
  3. En el Editor de propiedades (visible cuando se selecciona el editor edit), haz clic en la propiedad fuente de datos (datasource).
  4. Haz clic en EmployeeData para seleccionarlo como la fuente de datos.

Agrega un formulario de edición

Un formulario de edición permite a un usuario realizar estas asignaciones:

  • Crear registros nuevos en la base de datos
  • Ingresar datos para los registros
  • Seleccionar valores para los campos que tienen opciones, como campos booleanos, campos de fecha y campos que tienen valores posibles
  • Editar datos en registros
  • Borrar registros de la base de datos

Para agregar un formulario de edición, sigue estos pasos:

  1. Abre la paleta de widgets (haz clic en Widgets ) y agrega un formulario Widget de formulario a la página.
  2. Debido a que configuraste la fuente de datos de la página como Heredada: EmployeeData (Inherited: EmployeeData), esa fuente de datos se sugiere automáticamente. Mantenla seleccionada y haz clic en Siguiente (Next).
  3. En el cuadro de diálogo Elegir tipo de formulario (Choose form type), selecciona Editar (Edit) y haz clic en Siguiente (Next).
  4. Especifica las opciones para el formulario:

    • Campo: selecciona los campos de fuente de datos para incluir en el formulario.
    • Editable: establece los campos como editables.

    Para este instructivo, mantén los valores predeterminados. En las opciones predeterminadas, se crea un formulario que incluye todos los campos de fuente de datos. Todos los campos excepto ID son editables.

  5. Haz clic en Finalizar (Finish).

Agrega una tabla

Una tabla muestra los datos como filas y columnas. Las filas corresponden a los registros en el modelo y las columnas corresponden a los campos. Un usuario puede usar una tabla para realizar las siguientes acciones:

  • Ver varios registros al mismo tiempo y moverse entre páginas de datos
  • Editar datos de registro en campos editables
  • Ordenar registros por columna
  • Borrar registros

Para agregar una tabla, realiza lo siguiente:

  1. Desde Widgets , agrega una tabla Widget de formulario a la página debajo del formulario de edición. Alinea los bordes izquierdos del formulario de edición y la tabla.
  2. Debido a que configuraste la fuente de datos de la página como Heredada: EmployeeData (Inherited: EmployeeData), esa fuente de datos se sugiere automáticamente. Mantenla seleccionada y haz clic en Siguiente (Next).
  3. Especifica las opciones para la tabla:

    • Campo: selecciona los campos de fuente de datos para usar como columnas en la tabla.
    • Editable: selecciona los campos que se pueden editar.

    Para este instructivo, mantén los valores predeterminados. En las opciones predeterminadas, se crea una tabla con columnas que corresponden a todos los campos de fuente de datos y ninguno es editable. En general, las aplicaciones funcionan mejor cuando no tienen demasiados campos editables. En lugar de una tabla completamente editable, proporciona cuadros de diálogo emergentes para crear y editar registros, y una tabla de solo lectura a fin de revisar registros, como en este instructivo.

  4. Haz clic en Siguiente (Next).

  5. Mantén las opciones adicionales: filas paginadas, que se pueden ordenar y borrar.

  6. Haz clic en Finalizar (Finish).

Obtén una vista previa y prueba la aplicación

  1. En la esquina superior derecha, haz clic en Vista previa (Preview) para ejecutar la aplicación en una pestaña nueva del navegador.
  2. Haz clic en Permitir(Allow) para permitir que la aplicación use la información específica.
  3. Amplía la ventana del navegador para que se ajuste a todo el formulario de edición y la parte superior de la tabla.
  4. En el formulario Editar EmployeeData (Edit EmployeeData), intenta ingresar un nombre en el campo Nombre (Name). No podrás hacerlo porque todavía no hay un registro.
  5. Haz clic en Crear (Create) para crear un registro. La aplicación agrega el registro a la tabla. Este es un registro real en la base de datos. Ahora puedes ingresar datos, y se guardan automáticamente en la base de datos. Este comportamiento es útil cuando los usuarios quieren actualizar registros, pero no es intuitivo para crearlos. Los formularios de inserción, que se describen más adelante en este instructivo, son una forma más intuitiva para que los usuarios agreguen datos.
  6. Completa el formulario. A medida que ingresas datos y seleccionas valores, App Maker agrega los valores a la tabla. Los datos están activos para cada campo en cuanto presionas Intro, haces clic fuera de un campo o realizas una selección.
  7. Haz clic en Crear (Create) para crear un registro adicional y, luego, ingresa los datos de ese registro.
  8. Selecciona uno de los registros en la tabla. Haz clic en Borrar delete en el formulario de edición para borrar el registro. No se puede deshacer de forma automática, aunque podrías hacerlo con una secuencia de comandos.
  9. Ten en cuenta los controles que App Maker agrega al final del formulario. Utilízalos para navegar entre páginas de datos.

Felicitaciones. Acabas de compilar una aplicación de App Maker que funciona con datos.

Conoce las características que potencian la IU

Antes de terminar este instructivo, explora las características que potencian la IU: vinculaciones, eventos y acciones.

Más información acerca de las vinculaciones

Una vinculación es un vínculo bidireccional entre una propiedad del widget y otra propiedad. Una vinculación de datos se produce cuando una propiedad de widget está vinculada a una propiedad de una fuente de datos.

Debido a que las vinculaciones son bidireccionales, un cambio en una propiedad enlazada también se ve reflejado en la otra.

Explora cómo la IU de la aplicación utiliza vinculaciones:

  1. Si la pestaña Vista previa (Preview) de la aplicación aún está abierta, ciérrala y regresa a App Maker.
  2. En el formulario Editar empleado (Edit employee), selecciona el cuadro de texto Nombre (Name).
  3. En el Editor de propiedades (Property Editor), observa que la propiedad de valor (value) se establezca en @datasource.item.Name.

    Esta vinculación une el valor de Nombre (Name) en el formulario de edición con el valor de Nombre (Name) para el registro en la fuente de datos. La ruta en la propiedad valor (valor) define el vínculo de la siguiente manera:

    • datasource: se refiere a la fuente de datos del widget.
    • item: se refiere al elemento seleccionado actualmente (registro).
    • Name: se refiere al valor del registro para Name.
  4. En el Editor de propiedades (Property Editor), selecciona la propiedad etiqueta (label). Ten en cuenta que está configurado en @models.EmployeeData.fields.Name.displayName.

    Esta vinculación une la etiqueta (label) del cuadro de texto Nombre (Name) en el formulario de edición con la propiedad displayName del campo Nombre (Name) en el modelo EmployeeData. La ruta en la propiedad etiqueta (label) define este enlace de la siguiente manera:

    • models.EmployeeData se refiere al modelo EmployeeData.
    • fields.Name.displayName: se refiere a la propiedad displayName del campo Nombre (Name).

Más información sobre eventos y acciones

Puedes conectar sucesos que ocurren (eventos) con respuestas (acciones).

Los eventos activan acciones. Los eventos de la aplicación incluyen las siguientes opciones:

  • Inicia una aplicación.
  • Carga una fuente de datos.
  • Una aplicación verifica permisos.
  • Un usuario hace clic en un botón.
  • Una aplicación accede o cambia datos.
  • Una aplicación valida datos.

Las acciones son respuestas a los eventos. Se incluyen las siguientes acciones:

  • Crear un elemento nuevo
  • Borrar el elemento actual
  • Volver a cargar una fuente de datos
  • Ejecutar una secuencia de comandos de cliente

Explora cómo la aplicación utiliza eventos y acciones:

  1. En el formulario Editar EmployeeData (Edit EmployeeData), selecciona el botón Crear (Create).
  2. En el Editor de propiedades (Property Editor), busca onClick. El evento onClick ocurre cuando el usuario hace clic en el botón Crear (Create). El evento onClick se enumera en las secciones Botón (Button) y Eventos (Events) (el mismo elemento se muestra en dos lugares, para mayor comodidad).
  3. Haz clic en onClick. El menú incluye posibles acciones a realizar cuando el usuario hace clic en el botón. En este caso, la acción es una secuencia de comandos personalizada. Haz clic en Acción personalizada (Custom action) para abrir el código. Este código crea un elemento en la fuente de datos que se asigna al widget. App Maker tiene una acción predeterminada Crear elemento nuevo (Create new item), pero esa acción es para formularios de inserción.
  4. En el recuadro (el editor de páginas), en la tabla, haz clic en el encabezado Nombre (Name).
  5. En el Editor de propiedades, haz clic en onClick > Acción personalizada (Custom action). Cuando el usuario hace clic en el encabezado Nombre (Name), la acción es una secuencia de comandos personalizada que ordena la tabla por el campo Nombre (Name).

Compara un formulario de inserción con un formulario de edición

Antes de terminar el tema de los formularios, compara un formulario de edición con uno de inserción.

Anteriormente en este instructivo, aprendiste que un formulario de edición permite que el usuario edite un registro en la base de datos. Cuando no existen registros, el usuario debe crear un registro antes de poder ingresar datos. En cambio, un formulario de inserción inicialmente guarda los datos en un único registro borrador que está en la fuente de datos, y no en la base de datos. Cuando el usuario está listo, guarda de forma explícita el contenido del registro borrador en la base de datos.

Un formulario de inserción le permite a un usuario realizar las siguientes acciones:

  • Ingresar datos y seleccionar valores en campos en un registro borrador
  • Guardar el contenido del registro borrador en un registro nuevo en la base de datos. Después de que se copian los datos, se vacía el registro borrador

Agrega un formulario de inserción

  1. Desde Widgets , agrega un formulario Widget de formulario a la página al lado del formulario de edición.
  2. La fuente de datos Heredada: EmployeeData (Inherited: EmployeeData) se selecciona de forma predeterminada. Deja esta selección y haz clic en Siguiente (Next).
  3. Selecciona Insertar (Imsert) y haz clic en Siguiente (Next). Deja todos los campos seleccionados para que estén presentes en el formulario y se puedan editar.
  4. Haz clic en Finalizar (Finish).

Explora el funcionamiento del formulario de inserción

  1. En la esquina superior derecha, haz clic en Vista previa (Preview) para ejecutar la aplicación en una pestaña nueva del navegador.
  2. Si la tabla contiene registros, señala la fila y haz clic en Borrar delete hasta que no haya registros presentes.
  3. Completa el formulario Crear EmployeeData (Create EmployeeData). Puedes ingresar datos inmediatamente, a diferencia del formulario Editar empleados, pero los datos no se agregan a la tabla. A medida que ingresas datos, App Maker los guarda en el registro borrador en la fuente de datos, y no en la base de datos. La tabla no se actualiza hasta que guardes el registro en la base de datos.
  4. Haz clic en Enviar (Submit) para crear un registro real en la base de datos. App Maker copia los datos del registro borrador al registro real y, luego, vacía el registro borrador. Ahora, los datos aparecen en la tabla porque están en la base de datos. Los datos también aparecen en el formulario de edición, que contiene datos del registro seleccionado actualmente.

    Cuando ingresas datos en el formulario de edición, no aparecen en el formulario de inserción, porque los valores de este último están vinculados al registro borrador.

Explora la compilación de un formulario de inserción

  1. Si la pestaña Vista previa (Preview) de la aplicación aún está abierta, ciérrala y regresa a App Maker.
  2. En el formulario Crear EmployeeData (Create EmployeeData), selecciona el cuadro de texto Nombre (Name).
  3. En el Editor de propiedades (Property Editor), observa que la propiedad de valor (value) se establezca en @datasource.item.Name, al igual que el formulario de edición. Sin embargo, dado que este es un formulario de inserción, esta vinculación une el valor de Nombre (Name) en el formulario de inserción con el valor de Nombre (Name) para el registro borrador en la fuente de datos. Obtén más información sobre los registros borradores y las fuentes de datos en modo creación.
  4. Ahora selecciona el botón Enviar (Submit). Ten en cuenta que la acción para el evento onClick es Crear elemento nuevo (Create New Item). Para un formulario de inserción, Crear artículo nuevo (Create New Item) realiza las siguientes acciones:
    1. Crea un registro nuevo en la base de datos.
    2. Copia el contenido del registro borrador en el registro nuevo.
    3. Borra el registro borrador.

Próximos pasos

  • Haz el instructivo 3: Obtén más información sobre el estilo de una aplicación.
  • Obtén más información sobre los datos: Lee la documentación de los modelos.
  • Estudia la aplicación de muestra: La aplicación Hello Data replica tu trabajo aquí, con algunos cambios en el formulario de edición.