Saltar al contenido

App Builder Inicio Rápido

Introducción

El tiempo estimado para completar esta aplicación es de 10 minutos

Esta App Builder guía de inicio rápido para crear una aplicación de compras sencilla que permite a los usuarios ver su aplicación en un teléfono inteligente mientras compran alimentos y marcar los artículos de la lista a medida que avanzan. La creación de esta aplicación de compras proporciona una descripción general básica del trabajo en App Builder y presenta funciones y capacidades clave. Para profundizar en App Builder, regístrate para nuestra Introducción a App Builder curso disponible en Jitterbit University.

attachment

Prerrequisitos

  • Navegador web de cliente moderno

    • Chrome: 84+

    • Firefox: 73+

    • Safari: 13.0.1+

    • Ventaja: 84

App Builder descripción General

App Builder es una aplicación de bajo código diseñada para que grandes empresas resuelvan problemas comerciales complejos a escala. App Builder permite a los desarrolladores full stack y ciudadanos crear aplicaciones empresariales potentes, de extremo a extremo, con lógica sofisticada, flujos de trabajo, seguridad e integraciones. No se requiere código.

App Builder la plataforma está diseñada con elementos de navegación y diseño simples e intuitivos. App Builder las aplicaciones y la plataforma en sí se componen de los siguientes elementos básicos:

  • Panel: el bloque de construcción básico de una página. Un panel actúa como un contenedor que presenta información al usuario.

  • Página: una página se compone de al menos un panel y puede contener una colección de paneles.

  • Control: representa lo que muestra el panel. Algunos ejemplos incluyen texto, un botón, una imagen, etc.

Navegación App Builder es similar tanto para los desarrollador como para los usuarios finales de la aplicación, con la excepción de que un usuario desarrollador verá más opciones disponibles. El siguiente diagrama ilustra las formas clave de navegar App Builder.

adjunto

App Builder es independiente de la plataforma, lo que significa que se puede ejecutar en cualquier navegador moderno y es totalmente compatible con dispositivos móviles. Se puede acceder a él desde cualquier sistema operativo y se puede conectar a fuentes de datos de prácticamente todos los principales proveedores de servicios de bases de datos. Además, App Builder la plataforma está desarrollada con un diseño responsivo. Esto significa que la plataforma se ejecutará y podrá visualizarse en cualquier tamaño de pantalla o resolución y está optimizada automáticamente para dispositivos móviles.

Para obtener más información, consulte [App BuilderGuía del usuario.

Crear una Nueva Aplicación

Para comenzar, utilizaremos el asistente Crear nueva aplicación, un asistente inteligente avanzado que lo guía a través del proceso.

attachment

  1. Inicie sesión en su App Builder ambiente con las credenciales proporcionadas

  2. Haga clic en el botón + Aplicación del Menú del sitio

  3. Proporciona un Nombre para la aplicación. Por ejemplo: Aplicación de supermercado

    Nota

    El nombre debe ser único an App Builder ambiente

  4. Haga clic en el botón Crear aplicación

App Builder ahora se ejecutará en segundo plano y creará el andamiaje necesario para una aplicación. Una vez que haya terminado, se lo dirigirá a la página de inicio de la aplicación. El andamiaje creado incluye:

  • Fuente de datos de Microsoft SQL Server

  • Tabla de parámetros para almacenar datos variables

  • Página de inicio

  • Página de parámetros

  • Parámetro (Objeto de Negocio)

  • Menú de navegación

Crear una Tabla y Páginas de Productos

Primero, crearemos una tabla de productos para almacenar la información de nuestros productos. En esta sección, utilizaremos el Asistente de tablas y Asistente de página, asistentes inteligentes avanzados diseñados para simplificar los procesos.

attachment

  1. Desde la página de inicio de la aplicación, vaya al Cajón de acciones > Centro de diseño

  2. Haga clic en + Tabla en Capa de almacenamiento de datos

  3. Seleccione el Generador de tablas y haga clic en Siguiente

  4. Ingrese un nombre de tabla y haga clic en Siguiente. Por ejemplo, Producto

  5. Haga clic en el botón Agregar título y haga clic en Continuar

  6. Haga clic en el botón Agregar columna

  7. Proporcione un Nombre para la columna. Por ejemplo, Comprado

  8. Establezca el tipo de datos Lógico para la columna. Por ejemplo, Booleano

  9. Haga clic en el ícono de marca de verificación para guardar

  10. Haga clic en el botón Agregar columna

  11. Proporcione un Nombre para la columna. Por ejemplo, Cantidad

  12. Establezca el tipo de datos Lógico para la columna. Por ejemplo, Número

  13. Haga clic en el ícono de marca de verificación para guardar

  14. Haga clic en Siguiente

  15. Revise las actualizaciones propuestas y haga clic en Generar páginas

    Nota

    App Builder agrega automáticamente columnas del sistema y crea vistas para ayudar a administrar sus datos

  16. Seleccione Inicio como el menú desde el que se vinculará la nueva página y haga clic en Siguiente

  17. Seleccione Cuadrícula y formulario como tipos de página y haga clic en Siguiente

  18. Revise las actualizaciones propuestas y haga clic en Crear páginas

Crear Registros de Productos

Después de crear la tabla de productos y las páginas correspondientes, App Builder te lleva a la página del formulario de Producto donde puedes ingresar registros para almacenar en la tabla de Producto y utilizarlos en la aplicación.

attachment

  1. En la página de productos, ingrese un nombre de producto. Por ejemplo, queso americano

  2. Deje el campo comprado sin marcar

  3. Ingrese un valor numérico de cantidad. Por ejemplo, 1

  4. Deje está activo marcado para indicar que el producto está disponible

  5. Haga clic en el botón guardar

  6. Haga clic en el panel x para salir de la pantalla de productos

  7. Haga clic en el botón crear para agregar registros adicionales

  8. Siga los pasos para crear registros de productos para lo siguiente, utilizando los valores de cantidad que elija: pastel de manzana, hamburguesa, panecillos, servilletas, helado de vainilla

Modificar la Interfaz de Usuario de la Aplicación

Las aplicaciones típicas contienen varias tablas, reglas comerciales, tablas y muchos más datos, pero estamos simplificando la creación de esta aplicación para brindar una ilustración rápida de App Builder capacidades de 's. Volviendo a examinar el requisito de la aplicación definida, queremos ver la aplicación en un teléfono inteligente mientras hacemos las compras y marcar los artículos de la lista a medida que avanzamos. Aquí realizaremos algunas actualizaciones a la información predeterminada para que nuestra aplicación sea aún más fácil de usar.

  1. Desde la página Productos, vaya al Cajón de acciones > Diseñador en vivo

  2. Seleccione el control Comprado desde la vista de página.

  3. Haga clic en la pestaña Posición y ancho en Live Designer

  4. Haga clic en el ícono de flecha izquierda junto a Cambiar posición para mover el control a la izquierda del Producto

  5. Haga clic en la pestaña Etiqueta y seleccione Oculto para Visibilidad de etiqueta para ocultar la etiqueta de control.

  6. Haga clic en Guardar

  7. Seleccione el control Está activo desde la vista de página

  8. Haga clic en la pestaña Propiedades del control en Live Designer

  9. Desmarque el campo Activo y haga clic en Guardar para ocultar este control de la vista del panel.

  10. Haga clic para seleccionar el panel Productos desde la vista de página.

  11. Cambie el Nombre del panel a Lista de compras (u otro nombre significativo)

  12. Haga clic en la pestaña Métodos de actualización en Live Designer

  13. Seleccione Excel para Método de edición para admitir la edición directa de registros

  14. Seleccione En línea para Método de inserción para agregar nuevos registros a la página Productos

  15. Seleccione Última fila como Posición de inserción para definir dónde aparecerá el nuevo registro

  16. Seleccione No para Eliminar compatible para evitar que se eliminen registros.

  17. Haga clic en Guardar para aplicar los cambios.

  18. Seleccione el panel Inicio desde la vista de página

  19. Haga clic en la pestaña Caso extremo en Live Designer

  20. Expande la sección General, desmarca el campo Activo y haz clic en Guardar para ocultar este panel.

  21. Haga clic en x para cerrar el Diseñador en vivo

Establecer la Página de Inicio de la Aplicación

App Builder establece automáticamente la página de inicio de una aplicación como la primera página que agrega un desarrollador. Para modificar esta configuración, utilizaremos App Workbench, una ubicación centralizada que ofrece atajos rápidos a las tareas diarias necesarias para crear y mantener aplicaciones.

  1. Vaya al Cajón de acciones > App Workbench

  2. Haga clic en el botón Más en Configuración de la aplicación

  3. Seleccione Caso extremo

  4. Haga clic en la pestaña Regiones - Controles

  5. Establezca la Página de inicio en la página que contiene su aplicación de comestibles.

  6. Haga clic en x para salir de la ventana emergente.

  7. Confirme la actualización navegando a Action Drawer > Site Menu, haga doble clic para iniciar su aplicación desde el Menú del sitio

¡Terminaste de crear tu primera aplicación sencilla! En esta etapa, puedes ejecutar la aplicación Grocery en un teléfono inteligente o cualquier otro dispositivo. Hay muchas formas de mejorar esta sencilla aplicación. Algunos ejemplos incluyen agregar una tabla de Departamentos y asignar Productos a Departamentos, agregar una columna de Precios a la tabla de Productos y hacer un seguimiento de los precios a lo largo del tiempo, y agregar una tabla de Listas para almacenar y reutilizar listas.

Para obtener más información sobre App Builder visita Jitterbit Success Central y toma nuestra Introducción a App Builder curso disponible en Jitterbit University.

Recursos