Guía de inicio rápido para Jitterbit App Builder
Introducción
El tiempo estimado para completar esta aplicación es de 10 minutos
Este inicio rápido de App Builder guía a través de la construcción de una simple Aplicación de Compras que permite a los usuarios ver su aplicación en un teléfono inteligente mientras compran víveres y marcar los artículos de la lista a medida que avanzan. Construir esta Aplicación de Compras proporciona una visión básica de cómo trabajar en App Builder e introduce capacidades y características clave. Para un análisis más profundo de App Builder, inscríbete en nuestro curso Introducción a App Builder disponible en Jitterbit University.
Requisitos previos
-
Navegador web moderno
-
Chrome: 84+
-
Firefox: 73+
-
Safari: 13.0.1+
-
Edge: 84
-
Visión general de App Builder
App Builder es una aplicación de bajo código diseñada para grandes empresas para resolver problemas comerciales complejos a gran escala. App Builder permite a desarrolladores de pila completa y ciudadanos por igual crear aplicaciones potentes, de extremo a extremo y de nivel empresarial con lógica sofisticada, flujos de trabajo, seguridad e integraciones. No se requiere código.
La plataforma App Builder está diseñada con un diseño y elementos de navegación simples e intuitivos. Las aplicaciones de App Builder, y la plataforma en sí, están compuestas por los siguientes elementos centrales:
-
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 está compuesta por al menos un panel y puede contener una colección de paneles.
-
Control - representa lo que el panel muestra. Ejemplos incluyen texto, un botón, imagen, etc.
Navegar en App Builder es similar tanto para desarrolladores como para 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 en App Builder.
El App Builder es independiente de la plataforma. Esto significa que se puede ejecutar en cualquier navegador moderno y es completamente compatible con dispositivos móviles. Se puede acceder desde cualquier sistema operativo y puede conectarse a fuentes de datos de prácticamente todos los principales proveedores de servicios de bases de datos. Además, la plataforma App Builder se desarrolla con un diseño responsivo. Esto significa que la plataforma se ejecutará y será visible en cualquier tamaño de pantalla o resolución y está automáticamente optimizada para dispositivos móviles.
Para más información, consulta la guía del usuario de App Builder.
Crear una nueva aplicación
Para comenzar, utilizaremos el asistente Crear Nueva Aplicación, un asistente inteligente avanzado que te guía a través del proceso.
-
Inicia sesión en tu entorno de App Builder con tus credenciales proporcionadas.
-
Haz clic en el botón + App en el Menú del Sitio.
-
Proporciona un Nombre para la aplicación. Por ejemplo: Aplicación de Compras.
Nota
El nombre debe ser único dentro de un entorno de App Builder.
-
Haz clic en el botón Crear App.
App Builder ahora se ejecutará en segundo plano y creará la estructura necesaria para una aplicación. Una vez finalizado, serás llevado a la página de inicio de la aplicación. La estructura creada 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 de productos y páginas
Primero, crearemos una tabla de Productos para almacenar nuestra información de productos. En esta sección utilizaremos el asistente de Tabla y el asistente de Página, asistentes inteligentes avanzados diseñados para simplificar procesos.
-
Desde la página de inicio de la aplicación, ve al Panel de Acción > Centro de Diseño.
-
Haz clic en + Tabla desde Capa de Almacenamiento de Datos
-
Selecciona el Constructor de Tablas y haz clic en Siguiente
-
Ingresa un Nombre de Tabla y haz clic en Siguiente. Por ejemplo, Producto
-
Haz clic en el botón Agregar Título y haz clic en Continuar
-
Haz clic en el botón Agregar Columna
-
Proporciona un Nombre para la columna. Por ejemplo, Comprado
-
Establece el tipo de dato Lógico para la columna. Por ejemplo, Booleano
-
Haz clic en el ícono de marca de verificación para guardar
-
Haz clic en el botón Agregar Columna
-
Proporciona un Nombre para la columna. Por ejemplo, Cantidad
-
Establece el tipo de dato Lógico para la columna. Por ejemplo, Número
-
Haz clic en el ícono de marca de verificación para guardar
-
Haz clic en Siguiente
-
Revisa las actualizaciones propuestas y haz clic en Generar Páginas
Nota
App Builder agrega automáticamente columnas del sistema y crea vistas para ayudar a gestionar tus datos
-
Selecciona Inicio como el menú desde el cual se vinculará la nueva página y haz clic en Siguiente
-
Selecciona Cuadrícula y Formulario como los tipos de página y haz clic en Siguiente
-
Revisa las actualizaciones propuestas y haz clic en Crear Páginas
Crear registros de productos
Después de crear la tabla de Producto 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 usar en la aplicación.
-
Desde la página de Producto, ingresa un nombre de Producto. Por ejemplo, Queso Americano
-
Deja el campo Comprado sin marcar
-
Ingresa un valor numérico de Cantidad. Por ejemplo, 1
-
Deja Está Activo marcado para indicar que el Producto está disponible
-
Haz clic en el botón Guardar
-
Haz clic en el panel x para salir de la pantalla de Producto
-
Haz clic en el botón Crear para agregar registros adicionales
-
Sigue los pasos para crear registros de Producto para los siguientes, usando valores de Cantidad de tu elección: 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 de negocio, tablas y muchos más datos, pero estamos simplificando la construcción de esta aplicación para proporcionar una rápida ilustración de las capacidades de App Builder. Revisando el requisito de la aplicación definido, queremos ver la aplicación en un teléfono inteligente mientras compramos víveres y marcar los artículos de la lista a medida que avanzamos. Aquí haremos algunas actualizaciones a la información predeterminada para hacer nuestra aplicación aún más fácil de usar.
-
Desde la página de Productos, ve al Action Drawer > Live Designer
-
Selecciona el control Comprado desde la vista de la página
-
Haz clic en la pestaña Position & Width en Live Designer
-
Haz clic en el ícono de flecha izquierda junto a Change Position para mover el control a la izquierda del Producto
-
Haz clic en la pestaña Label y selecciona Hidden para Label Visibility para ocultar la etiqueta del control
-
Haz clic en Save
-
Selecciona el control Is Active desde la vista de la página
-
Haz clic en la pestaña Control Properties en Live Designer
-
Desmarca el campo Active y haz clic en Save para ocultar este control de la vista del panel
-
Haz clic para seleccionar el panel de Productos desde la vista de la página
-
Cambia el Panel Name a Lista de Compras (o otro nombre significativo)
-
Haz clic en la pestaña Update Methods en Live Designer
-
Selecciona Excel para Edit Method para soportar la edición directa de registros
-
Selecciona Inline para Insert Method para agregar nuevos registros a la página de Productos
-
Selecciona Last Row como la Insert Position para definir dónde aparecerá el nuevo registro
-
Selecciona No para Delete Supported para evitar que se eliminen registros
-
Haz clic en Save para aplicar los cambios
-
Selecciona el panel Home desde la vista de la página
-
Haz clic en la pestaña Edge Case en Live Designer
-
Expande la sección General, desmarca el campo Active y haz clic en Save para ocultar este panel
-
Haz clic en la x para cerrar el Live Designer
Establecer la página de inicio de la aplicación
App Builder establece automáticamente una página de inicio de la aplicación en la primera página que un desarrollador agrega. Para modificar esta configuración, pasaremos por el App Workbench, un lugar centralizado que proporciona accesos directos rápidos a las tareas diarias requeridas para construir y mantener aplicaciones.
-
Navega a Action Drawer > App Workbench
-
Haz clic en el botón More de App Settings
-
Selecciona Edge Case
-
Haz clic en la pestaña Regions - Controls
-
Establece la Home Page en la página que contiene tu Grocery App
-
Haz clic en la x para salir del popup
-
Confirma la actualización navegando a Action Drawer > Site Menu, haz doble clic para lanzar tu app desde el Site Menu
¡Has terminado de construir tu primera app simple! En esta etapa, puedes ejecutar la Grocery App en un smartphone o cualquier otro dispositivo. Hay muchas maneras en que esta app simple puede ser ampliada. Ejemplos incluyen agregar una tabla de Department y mapear Products a Departments, agregar una columna de Price a la tabla de Product y rastrear precios a lo largo del tiempo, y agregar una tabla de List para almacenar y reutilizar listas.
Para aprender más sobre App Builder visita App Builder y toma nuestro curso Introducción a App Builder disponible en Jitterbit University.