Build Studio
Build Studio has the backend and frontend setup for the project. The developers can easily build the application using the low-code interface. It also has the feature of deploying the application in an ultra-fast way and testing it.
Check and Confirm Pages
This is the page where the user can check and confirm the pages in Design components. You can view this page after creating a project and application. In this section, the user can group pages by module which is applicable only for Web Applications.
| Feature | Description |
|---|---|
| Design Components | • Paginated list of designs |
| Create Module button | • Create Module button should be disabled when all designs/pages are added in a group. • The user will be able to create module |
| Add New Design | • A dialog will appear containing the Tenant ID, API Key, Session Keya and App ID with Instructions. • Will import new Figma Design |
| Modules | • User can Edit/update created modules. • User can Delete created modules • Paginated list of created modules |
| Ellipsis | • By clicking the ellipsis button in each design user has the option to view the Design/Page |
Create Module (For WEB only)
| Feature | Description |
|---|---|
| Create Module | • Group name is required field. • Main component dropdown list should vary based on the selected. Design/Page. This field is a required field. • User has the option to select the Version (Blueprint versions). • At least 2 Designs/Page should be selected when creating a group. |
| Choose Version | • Select a version where this module will be added as part of a version releases |
| Main Component | • Selection of a page where you will assign as main component |
| Include in Deployment | • A checkbox where an option to include this module whenever user Deploy in Sandbox |
| Save button | • Save the created module and it will be added on the List of modules. |
| Cancel button | • Cancel button will terminate create module action. |
Backend
Data Modelling
At Data Model Touchup, the predicted entity for each page can be set up by extracting the components of the page and setup the parameters.
| Feature | Description |
|---|---|
| Build | • Will build backend data • Enabled where all pages under backend are filled with data and saved. |
| View Swagger | • View Swagger Documentation when I'm in the pages under backend section • When clicked, a new tab will appear redirecting to App swagger documentation. • Will only be enabled after a successful backend build. |
| Data Model Touchup | • Button toggle option to view for Design Preview and Properties • List down all pages |
| Predict | • Predict button will predict entity and parameters in each page. • List of Entity and Properties should be displayed after predicting the page. |
| Process | • The process button should only be enabled when at least one page is setup. • If the Process button is clicked, you will be redirected to the Entity Diagram Designer. • Cancel button will terminate the action |
Entity and Property Maintenance
It contains the list of pages and its properties where the user has the option to add, edit and delete.
| Feature | Description |
|---|---|
| Entity | • User has the option to Add, Edit and Delete Entity in each page after predicting. |
| Property | • User has the option to Add, Edit and Delete Properties in each Entity based on desired changes. |
| Transfer | • Allows user to transfer Property into other created Entities on the Page. |
| Save Page | • Should appear once the page is predicted. • Will save the created properties in all entities in the same page |
| Save Page and Next | • Should appear once the page is predicted and there’s 2 or more pages |
Entity Designer
This is the page where the developer can confirm and edit the entity of each page.
Once published, developers will be able to view the swagger. Typically, publishing takes about 30 minutes, but a pre-built version of the backup is available.
| Feature | Description |
|---|---|
| Add Icon (Create Entity) | • Will open a dialog for Create Entity fields • Users will Create, Edit and Delete Property in each Entity. • User can Save/Cancel when creating an Entity |
| Trash Icon (Delete Entity) | • Allow user to Delete create Entity |
| Entity | • User has the option to Add, Edit and Delete Entity in each page after predicting. |
| Update Entity | • Double click on created entity to update. |
| Load XML | • If the Load XML button is clicked, it will open a file dialog for user to select saved Model XML file. Then it will load the selected XML file in the Entity Designer. |
| Save | • The save button will allow the user to save/download the created contents for Entity Designer. File extension should be .xml. And Click Save to save changes on the current file. Click Save As to save changes to a new file. |
| Zoom in/Zoom out | • Can Zoom in/Zoom out Entity Designer page. |
| Reset | • If the Reset button is clicked, it will roll back to the initial processed data. If data wasn't processed from the Data Model Touchup, your current canvas will be cleared. |
Create Entity and Property
This is the page where the developer can create the entity and property of the pages.
| Feature | Description |
|---|---|
| Create Entity | • Entity name input field for user to input Entity name to be created. |
| Property | • Users have the option to Add, Edit and Delete Properties in each Entity based on desired changes. • Data type is a dropdown selection that will be set in each property. • Is Required, is a checkbox to which sets the property as required. • Default value is an input field to where user can input a default value if applicable in a specific property. |
| Save | • licked, it will save all the input information and entity will be added on the file. |
| Cancel | If clicked, it will terminate the Create action. |
Route Editor (For Mobile only)
The Route Editor is for Mobile application only. This is where the initial code is displayed, and the developer can maintain the code.
Flutter Config(For Mobile only)
The Flutter Configuration is for Mobile applications only. It contains the list of the configuration.
DIO Configuration
This is the page where the developer can view and edit the Dio Configuration.
Local Storage Configuration
This is the page where the developer can view and edit the configuration for Storage Keys.
Services
This is the page where the developer can add and maintain the services.
Repositories
This is the page where the developer can view the different repository files.
Local Database Configuration
This is the page where the developer can add and maintain the database configuration.
Pubspec Editor
This is the page where the developer can add the packages. The JSON can also be viewed from this page.
Screen State
This is the page where the developer can add and maintain the different Screen State.
View Model
This is the page where the developer can create and maintain the View Model.
JSON to Dart
The JSON to Dart Model is for Mobile applications only. This is where the developer can create and maintain the different models.
Build API Swagger
Once swagger is viewable, developers will be able to test and view the back end set up and entity flow.
Frontend
UI Touch Up
This is the page where the front-end design and page routing set-up can be generated.
| Feature | Description |
|---|---|
| Build | • Will build Frontend data. • Enabled where all pages except for App Logic under Frontend are filled with data and saved. |
| View App | • When clicked, a new tab will appear redirecting to Deployed App. • Will only be enabled after a successful Frontend build. |
| Dropdown | • List down all the created modules from Design components. • Can switch into different pages by selecting the pages from the dropdown to modify/update code |
| Save | • The save button will allow the user to save modified changes on the codes |
| Process Workflow | • If clicked, it will integrate workflow created from Application Logic. |
| Project | • Contains Info, Files and Dependencies data. |
| Editor | • Will only show Editor Form. |
| Preview | • Will only show Design Preview. |
| Both | • Both Editor and Preview will be visible on the screen. |
| Lock/Unlock | • Lock module so that other users can’t make any changes on the Module. • Unlock module to remove users' restriction on the module. |
Angular Config(For Web Only)
To help the developers manage the angular package dependencies and environment variables.
- Package Manager
- Packages are the dependencies of the application to make it work.
Feature Description Add Package • Will open a dialog to which allows user to create/add package that is not part of the default packages. Edit • Allow user to update created package. Delete • Allow user to delete package.
- Add Package
- This is the page where the developer can add new packages.
Feature Description Add Package • Package name and Package version is required when creating a package. Save Package • If clicked, it will save the package and will add on the package list.
• Will only enable when Package name and Version is filled out.Cancel • If clicked, will terminate create action.
- Created packages will be reflected in UI touch up as dependencies.
- Environment Variable
- Environment variables are needed to store the application secrets and configuration data.
Feature Description Add Variable • Will open a dialog to which allows user to create/add variable that is not part of the default environment variables created. Edit • Allow user to update created environment variable. Delete • Allow user to delete environment variable.
- Add Variable
- This is the page where the developer can add new variables.
Feature Description Add Variable • Variable name and Variable value are required when creating an environment variable. Save Variable • If clicked, it will save the variable and will add on the environment variable list.
• Will only enable when Variable name and Value is filled out.Cancel • If clicked, will terminate create action.
Page Routes
Page routing contains the flow from one view to another. This is also where the logic for the business rules can be applied.
| Feature | Description |
|---|---|
| Add Route | • Will open a dialog to which allows user to create/add page route in each group. |
| Public | • Set route as public route. |
| Main Page | • Enabled when created route was set as main page. |
| Edit | • Allow user to update created route. |
| Delete | • Allow user to delete created route |
- Add Route
- This is the page where the developer can add the route.
Feature Description Add Route • Group, Page and Route is required when creating a route.
• The list of pages will vary depending on the selected group when creating Route.
• Can only create 1 route in each Page per group.Default Route • A checkbox that will only be available when the selected page is assigned as main component.
• Set as the default route when accessing the page.Submit • If clicked, it will create the route and will add on the page routes list. Cancel • If clicked, will terminate create action.
Application Logic
Once Application logic for the business rules were set and integration is created, “Build” button will be available. Once done building the Frontend, App Test Site will be available for testing.
| Feature | Description |
|---|---|
| Modules | • List of all created workflow modules which user can Add more modules by clicking Add Module button. Home module is default added. |
| Start | • This workflow action will initiate on creating module workflow. |
| Zoom In/Zoom Out | • Allows user to Zoom in/Zoom out canvas. |
| Reset Zoom | • If clicked, it will roll back to the initial default view. |
| Save Canvas | • If clicked, it will Save created workflow. |
- Add Module
- This is the page where the developer can add the Workflow Modules.
Version Release
way to differentiate current and past application configurations is through the Version Release.
| Feature | Description |
|---|---|
| Versions List | • Paginated Versions List. |
| Create Version | • Allow users to create versions. |
| Progress | • Progress of modules added in the version. New, Active and Completed |
| Ellipsis | • List of available actions: View, Edit, create snapshot, Use this version. • Available in each created version. |
| View action | • Dialog will appear, allowing the user to view details of the created version. |
| Edit action | • Dialog will appear, allowing the user to modify details of the existing version. |
| Create Snapshot | • Will change status from New to “Current” and will be use as Current version. • When creating snapshot on a” New” version the “Current” version will be updated “Active” status. |
| Use this Version | • Will change status from Active to “Current” and will be use as Current version. • Will only be applicable if Version status is “Active”. |
Create Version
This is the page where the developer can create the different release versions.
| Feature | Description |
|---|---|
| Name | • The User is required to input the version name. |
| Start date | • Date selection for Version’s Start date. |
| Release date | • Date selection for Version’ Release date. |
| Description | • Input field for Version’s Description. |
| Submit | • If clicked, will Save created version and will be added in Versions List. |
| Cancel | • If clicked, will terminate create action |
Version Modules
This page list down the modules added in each version. The modules are created from Design Component page.
| Feature | Description |
|---|---|
| Name | • Name of module which added in this version from Design components. |
| Status | • Display module status. New status is selected as default. |
| Ellipsis | • Edit action which allows user to update each module status which is New, Active and Completed. |