Getting started with App Builder

    In this article:

    Get Started with App Builder

    Launch App Builder

    You can login directly in your App Builder profile or by signing it with Indigo.Design. You will land in the home screen and from here you can access each of the three core Indigo.Design products - Prototypes and Usability Tests, as well as the newest one - App Builder which can be found under the Apps tab.

    From the App Builder home screen, users can start a new app, preview or edit an existing one. Through the context menu, every existing app can also be renamed, duplicated or archived.

    AB Sign-in

    Indigo.Cloud Sign-in Indigo-Design-home-screen

    Indigo.Design home screen

    What you'll see when you launch the App Builder for first time is a pop up window suggesting a quick onboarding tour. What you will see next is the create new project dialog. There are four ways to start a new app:

    1. Create from existing design - if you have an existing Sketch file, created using the Indigo.Design UI kit for Sketch, you can upload it at this point and continue your design in the App Builder, without the need to recreate everything from scratch. Note, that due to the differences between the absolute layout in Sketch and the Flex layout in the App Builder, some additional adjustments may be needed after parsing your Sketch file.
    2. Sample apps - the getting started apps will help you explore applications that have been created using the App Builder and also allow you to modify them in your own user space. They are also a good source for you to preview generated code for a larger application without having to create your own app from scratch. If you use the App Builder for first time, we recommend to use the sample app option as a starting point. This is the quickest way to onboard yourself with the awesome features of the tool and to start building your application.
    3. Default layouts - start a new app from scratch, benefiting from a basic predefined layout.
    4. Blank - start a new app from scratch.

    New project dialog

    Note, that once in the App Builder, users are enabled to easily switch between their active applications or go back to their workspace in App Builder from the in-app side menu at design time without leaving the App Builder.

    Side menu

    Getting the code

    The App Builder always displays a live-running web application both on the design surface and in the preview window. The underlying code and application model are updated in real time as you make changes to the application in the design surface. You can view the generated application code at any time in the preview window and you can also download the generated application at any time as a complete application code repository, which you can then open in a code editor of your choice. Then you can build and run the application you've designed using the App Builder locally on your machine and you can make additional modifications on the generated code.

    Application preview window

    Code of a generated application and then run in VScode

    Note

    Once the code for your application is downloaded, changes made locally will not be reflected in your App Builder user space.

    On-Premises version of App Builder

    App Builder is a SaaS which provides Developers, Designers and Product Managers with a consolidated platform for software product discovery, software product design, building interactive product PoCs and emitting pixel-perfect code projects ready for subsequent modifications.

    Some businesses are part of highly regulated industries. Mostly for security reasons, a lot of them have limited to no access to cloud-based solutions like the App Builder, or limited internet connectivity in certain locations. In order to cover this segment, we had to provide an easy way for such organizations to bring the App Builder behind the firewall, by allowing them to use their own instance of the platform to run on their own infrastructure and to be accessible only by internal personnel.

    On-premises applications are reliable, secure, and allow enterprises to maintain a level of control that the cloud often cannot.

    Check out this topic for more technical details on how to install the On-premises solution.

    on-premises-ab-demo

    On-Premises version

    Running the generated app locally

    In order to run the downloaded application, the following prerequisites need to be installed on your machine. Check out this topic for more information on how to run the generated application locally.

    1. NodeJS.
    2. Visual Studio Code (we recommend VS Code, but you can use a different code editor).

    Tutorial video

    Learn more about our low-code App Builder in our short overview video:

    Report an issue or send feedback

    This repository is intended for issues and feature requests submission, as well as for general product discussions, questions and any feedback that you want to share. You can also send us an email.

    Additional Resources