Introducción a App Builder

    App Builder es una plataforma de bajo código que le permite convertir rápidamente diseños en aplicaciones web funcionales sin escribir todo el código. Comience desde cero, use plantillas o importe diseños de Figma, luego construya visualmente su aplicación con componentes de arrastrar y soltar, conexiones de datos reales y personalización de diseño. Genera código listo para producción para Angular, React, Blazor y Web Components, con exportación de un clic o implementación en GitHub o Azure.

    Cómo todo funciona en conjunto

    El diagrama siguiente le ofrece una descripción general de alto nivel de cómo App Builder se integra en el ecosistema más amplio de herramientas de diseño y desarrollo:

    Ecosistema de plataforma

    En términos simples

    • Sistema de diseño → Kits de interfaz de usuario y adaptadores: Comienza con un sistema de diseño, implementado como kits de interfaz de usuario (como Indigo.Design para Figma). Los adaptadores traducen su diseño a un formato que App Builder puede usar.
    • App Builder + Integraciones: Usa App Builder para crear visualmente su aplicación. Admite datos REST, widgets del SDK de Reveal (para paneles) y tareas de Slingshot (para gestión de proyectos).
    • Modelo de aplicación común: Todo fluye hacia un Modelo de aplicación común central: un formato unificado que describe su aplicación, independientemente de cómo haya comenzado (importación de diseño o construcción manual).
    • Generación de código (Codegen): El modelo es utilizado entonces por el generador de código, que produce código real y utilizable para:
      • Angular
      • React
      • Web Components
      • Blazor
    • Destinos de implementación: Finalmente, el código generado se puede implementar directamente en plataformas como GitHub o Microsoft Azure.

    Inicie App Builder

    Para acceder a App Builder, navegue a https://appbuilder.dev e inicie sesión. Alternativamente, puede iniciar App Builder directamente visitando https://my.appbuilder.dev. Necesitará una suscripción de prueba activa o de pago para crear y editar aplicaciones.

    Crear nueva aplicación

    Hay tres formas en que puede crear una nueva aplicación desde el diálogo "Crear nueva aplicación":

    1. Aplicaciones de ejemplo - las aplicaciones de introducción le ayudarán a explorar aplicaciones que han sido creadas con App Builder y también le permitirán modificarlas en su propio espacio de usuario. También son una buena fuente para que pueda obtener una vista previa del código generado para una aplicación más grande sin tener que crear su propia aplicación desde cero. Si utiliza App Builder por primera vez, le recomendamos que use la opción de aplicación de ejemplo como punto de partida. Esta es la forma más rápida de iniciarse con las increíbles características de la herramienta y comenzar a crear su aplicación.
    2. Diseños de aplicación - inicie una nueva aplicación desde cero, beneficiándose de diseños predefinidos. También encontrará aquí la opción de crear una aplicación basada en una plantilla en blanco.
    3. Importar diseño - si tiene un archivo de diseño existente, creado con el kit de interfaz de usuario de Indigo.Design para Figma o Sketch, puede usarlo como punto de partida para sus aplicaciones. Para hacer esto, obtenga nuestro sistema Indigo.Design, que incluye complementos para publicar su diseño, kits de interfaz de usuario y archivos de diseño de ejemplo.

    Note

    Debido a las diferencias entre el diseño absoluto en Sketch y el diseño Flex en App Builder, pueden ser necesarios algunos ajustes adicionales después de analizar su archivo de Sketch.

    Diálogo de nuevo proyecto

    Tenga en cuenta que una vez en App Builder, los usuarios pueden cambiar fácilmente entre sus aplicaciones activas o volver a su espacio de trabajo en App Builder desde el menú lateral en la aplicación en tiempo de diseño sin salir de App Builder.

    Menú lateral

    Obtener el código

    App Builder siempre muestra una aplicación web en ejecución en vivo tanto en la superficie de diseño como en la ventana de vista previa. El código subyacente y el modelo de aplicación se actualizan en tiempo real a medida que realiza cambios en la aplicación en la superficie de diseño. Puede ver el código de la aplicación generada en cualquier momento en la ventana de vista previa y también puede descargar la aplicación generada en cualquier momento como un repositorio completo de código de aplicación, que luego puede abrir en un editor de código de su elección. Luego puede crear y ejecutar la aplicación que ha diseñado usando App Builder localmente en su máquina y puede realizar modificaciones adicionales en el código generado.

    Ventana de vista previa de aplicación

    Código de una aplicación generada ejecutada en VS Code

    Note

    Una vez que se descarga el código de su aplicación, los cambios realizados localmente no se reflejarán en su espacio de usuario de App Builder.

    Versión local de App Builder

    App Builder es un SaaS que proporciona a desarrolladores, diseñadores y gerentes de producto una plataforma consolidada para descubrimiento de productos de software, diseño de productos de software, construcción de PoC interactivos de productos y emisión de proyectos de código perfecto en píxeles listos para modificaciones posteriores.

    Algunos negocios forman parte de industrias altamente reguladas. Principalmente por razones de seguridad, muchos de ellos tienen acceso limitado o nulo a soluciones basadas en la nube como App Builder, o conectividad de Internet limitada en ciertas ubicaciones. Para cubrir este segmento, tuvimos que proporcionar una forma fácil para que tales organizaciones lleven App Builder detrás del cortafuegos, permitiéndoles usar su propia instancia de la plataforma para ejecutarse en su propia infraestructura y ser accesible solo por personal interno.

    Las aplicaciones locales son confiables, seguras y permiten que las empresas mantengan un nivel de control que la nube a menudo no puede.

    Consulte este tema para más detalles técnicos sobre cómo instalar la solución local.

    on-premises-ab-demo

    Versión local

    Ejecutar la aplicación generada localmente

    Para ejecutar la aplicación descargada, se necesitan instalar los siguientes requisitos previos en su máquina. Consulte este tema para obtener más información sobre cómo ejecutar la aplicación generada localmente.

    1. NodeJS.
    2. Visual Studio Code (recomendamos VS Code, pero puede usar un editor de código diferente).

    Tutorial en video

    Reportar un problema o enviar comentarios

    Este repositorio está destinado a la presentación de problemas y solicitudes de características, así como para discusiones generales de productos, preguntas y cualquier comentario que desee compartir. También puede enviarnos un correo electrónico.

    Recursos adicionales