Guía de inicio rápido para Jitterbit App Builder
Introducción
El tiempo estimado para completar esta aplicación es de 10 minutos
Esta guía rápida de App Builder te guía paso a paso para crear una app de supermercado sencilla que permite a los usuarios ver la app en un smartphone mientras hacen la compra y marcar los artículos de la lista a medida que avanzan. El desarrollo de esta app ofrece una visión general del funcionamiento de App Builder y presenta las funciones y características clave. Para profundizar en App Builder, inscríbete en nuestro curso de Introducción a App Builder, disponible en Jitterbit University.
Prerrequisitos
-
Navegador web de cliente moderno
-
Chrome: 84+
-
Firefox: 73+
-
Safari: 13.0.1+
-
Ventaja: 84
-
Descripción general de App Builder
App Builder es una aplicación de bajo código diseñada para que grandes empresas resuelvan problemas empresariales complejos a gran escala. App Builder permite a desarrolladores full stack y ciudadanos crear aplicaciones empresariales potentes, integrales, con lógica, flujos de trabajo, seguridad e integraciones sofisticadas. No requiere código.
La plataforma App Builder está diseñada con elementos de diseño y navegación sencillos e intuitivos. Tanto las aplicaciones de App Builder como la propia plataforma se componen de los siguientes elementos principales:
Panel: el elemento 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. Por ejemplo, texto, un botón, una imagen, etc.
La navegación por App Builder es similar tanto para desarrollador como para usuarios finales de aplicaciones, con la excepción de que el desarrollador verá más opciones disponibles. El siguiente diagrama ilustra las claves para navegar por App Builder.
App Builder es independiente de la plataforma. Esto significa que puede ejecutarse en cualquier navegador moderno y es totalmente compatible con dispositivos móviles. Se puede acceder a él desde cualquier sistema operativo y conectarse a fuentes de datos de prácticamente todos los principales proveedores de servicios de bases de datos. Además, la plataforma App Builder cuenta con un diseño responsivo. Esto significa que la plataforma se ejecutará y visualizará 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 la Guía del usuario de App Builder.
Crear una nueva aplicación
Para comenzar, usaremos el asistente "Crear nueva aplicación", un asistente inteligente y avanzado que le guiará a través del proceso.
-
Inicie sesión en su ambiente de App Builder con las credenciales proporcionadas.
-
Haga clic en el botón + Aplicación del Menú del sitio
-
Asigna un Nombre a la aplicación. Por ejemplo: Aplicación de comestibles
Nota
El nombre debe ser único dentro de un ambiente de App Builder
-
Haga clic en el botón Crear aplicación
App Builder se ejecutará en segundo plano y creará el andamiaje necesario para la aplicación. Al finalizar, accederá a la página principal 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 de productos y páginas
Primero, crearemos una tabla de productos para almacenar la información de nuestros productos. En esta sección, usaremos el Asistente para tablas y Asistente de página asistentes inteligentes avanzados diseñados para simplificar los procesos.
-
Desde la página de inicio de la aplicación, vaya al Panel de Acciones > Centro de Diseño
-
Haga clic en + Tabla en la Capa de Almacenamiento de Datos
-
Seleccione el Generador de Tablas y haga clic en Siguiente
-
Ingrese un Nombre de Tabla y haga clic en Siguiente. Por ejemplo, Producto
-
Haga clic en el botón Agregar Título y haga clic en Continuar
-
Haga clic en el botón Agregar Columna
-
Proporcione un Nombre para la columna. Por ejemplo, Comprado
-
Establezca el tipo de dato Lógico para la columna. Por ejemplo, Booleano
-
Haga clic en el icono de marca de verificación para guardar
-
Haga clic en el botón Agregar Columna
-
Proporcione un Nombre para la columna. Por ejemplo, Cantidad
-
Establezca el tipo de dato Lógico para la columna. Por ejemplo, Número
-
Haga clic en el icono de marca de verificación para guardar.
-
Haga clic en Siguiente.
-
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
-
Seleccione Inicio como el menú desde el que se vinculará la nueva página y haga clic en Siguiente
-
Seleccione Cuadrícula y Formulario como tipos de página y haga clic en Siguiente
-
Revise las actualizaciones propuestas y haga clic en Crear páginas
Crear registros de productos
Después de crear la tabla de Producto y las páginas correspondientes, App Builder lo lleva a la página del formulario de Producto, donde puede ingresar registros para almacenar en la tabla de Producto y usar en la aplicación.
-
En la página de Producto, introduzca el nombre de un Producto. Por ejemplo, Queso Americano.
-
Deje la casilla Comprado sin marcar.
-
Introduzca un valor numérico de Cantidad. Por ejemplo, 1.
-
Deje marcada la casilla Está Activo para indicar que el producto está disponible.
-
Haga clic en el botón Guardar.
-
Haga clic en el panel x para salir de la pantalla de Producto.
-
Haga clic en el botón Crear para añadir registros adicionales.
-
Siga los pasos para crear registros de producto para los siguientes productos, utilizando los valores de Cantidad que prefiera: Tarta de Manzana, Hamburguesa, Rollos, 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 simplificamos la compilación de esta aplicación para ilustrar rápidamente las capacidades de App Builder. Retomando el requisito definido, queremos ver la aplicación en un smartphone mientras hacemos la compra y marcar los artículos de la lista a medida que avanzamos. Actualizaremos la información predeterminada para que nuestra aplicación sea aún más intuitiva.
-
Desde la página Productos, vaya al Cajón de acciones > Diseñador en vivo
-
Seleccione el control Comprado desde la vista de página
-
Haga clic en la pestaña Posición y ancho en Live Designer
-
Haga clic en el ícono de flecha izquierda junto a Cambiar posición para mover el control a la izquierda de Producto
-
Haga clic en la pestaña Etiqueta y seleccione Oculto para Visibilidad de la etiqueta para ocultar la etiqueta de control.
-
Haga clic en Guardar
-
Seleccione el control Está activo desde la vista de página
-
Haga clic en la pestaña Propiedades del control en Live Designer
-
Desmarque el campo Activo y haga clic en Guardar para ocultar este control de la vista del panel
-
Haga clic para seleccionar el panel Productos desde la vista de página.
-
Cambie el Nombre del panel a Lista de compras (u otro nombre significativo)
-
Haga clic en la pestaña Actualizar métodos en Live Designer
-
Seleccione Excel para Método de edición para admitir la edición directa de registros
-
Seleccione En línea para Método de inserción para agregar nuevos registros a la página Productos
-
Seleccione Última fila como Posición de inserción para definir dónde aparecerá el nuevo registro
-
Seleccione No para Eliminar compatible para evitar que se eliminen registros
-
Haga clic en Guardar para aplicar los cambios.
-
Seleccione el panel Inicio desde la vista de página
-
Haga clic en la pestaña Caso extremo en Live Designer
-
Expande la sección General, desmarca el campo Activo y haz clic en Guardar para ocultar este panel.
-
Haga clic en la 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 la aplicación como la primera página que añade un desarrollador. Para modificar esta configuración, utilizaremos App Workbench, una plataforma centralizada que ofrece accesos directos a las tareas diarias necesarias para crear y mantener aplicaciones.
-
Vaya al Cajón de acciones > App Workbench
-
Haga clic en el botón Más en Configuración de la aplicación
-
Seleccione Caso extremo
-
Haga clic en la pestaña Regiones - Controles
-
Establezca la Página de inicio en la página que contiene su aplicación de comestibles.
-
Haga clic en la x para salir de la ventana emergente.
-
Confirme la actualización navegando a Action Drawer > Site Menu, haga doble clic para iniciar su aplicación desde el Menú del sitio
¡Has terminado de crear tu primera app sencilla! En esta etapa, puedes ejecutar la app de comestibles en un smartphone o cualquier otro dispositivo. Hay muchas maneras de mejorar esta app sencilla. Por ejemplo, añadir una tabla de departamentos y asignar productos a ellos, añadir una columna de precios a la tabla de productos y hacer un seguimiento de los precios a lo largo del tiempo, y añadir una tabla de listas para almacenar y reutilizar listas.
Para obtener más información sobre App Builder, visite Jitterbit Success Central y tome nuestro curso Introducción a App Builder disponible en Jitterbit University.