Build Studio: Difference between revisions

From Xamun MediaWiki
 
(23 intermediate revisions by 6 users not shown)
Line 3: Line 3:
! colspan="6" | Table of Contents
! colspan="6" | Table of Contents
|-
|-
| [https://wiki.xamun.com/wiki/Main_Page Main Page] || [https://wiki.xamun.com/wiki/Ideation_Studio Ideation Studio] || [https://wiki.xamun.com/wiki/Design_Studio Design Studio] || [https://wiki.xamun.com/wiki/Project_Hub Project Hub] || [https://wiki.xamun.com/wiki/Build_Studio Build Studio] || Go Live
| [https://wiki.xamun.com/wiki/Main_Page Getting Started] || [https://wiki.xamun.com/wiki/Ideation_Studio Ideation Studio] || [https://wiki.xamun.com/wiki/Design_Studio Design Studio] || [https://wiki.xamun.com/wiki/Build_Studio Build Studio] || [https://wiki.xamun.com/wiki/Frequently_Asked_Questions FAQs]
|}
|}


<div style="border: 2px solid black; padding: 20px; text-align: justify;">
<div style="border: 2px solid black; padding: 20px; text-align: justify;">
'''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.  
'''Build Studio'''  
----
The 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.  


<center>{{#ev:youtube|miRvnCP94jE}}</center>
<center>{{#ev:youtube|miRvnCP94jE}}</center>
Line 67: Line 69:
==Backend==
==Backend==


<div style="border: 2px solid black; padding: 20px; text-align: justify;">
===Data Modelling===
===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.  
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.  
Line 116: Line 117:
===Entity Designer===
===Entity Designer===


This is the page where the developer can confirm and edit the entity of each page.  
The Data Entity Designer feature of Build Studio lets developers create and edit the entity of each page of the project.
 
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.
 
1. Click on the ''Backend Dropdown'' button: Select the dropdown menu in the backend section to access additional features.
 
2. Open the ''Data Entity Designer'' by choosing it from the dropdown on the right side of the page.
 
3. Press the '''‘Add’''' button to create a new entity in the designer.
 
[[File:Data Entity Designer.png|center|650px|link=https://wiki.xamun.com/wiki/File:Data_Entity_Designer.png]]
 
 
::a. '''Save button''' – This button preserves any newly created or edited data entities in the designer.
 
::b. '''Reset button''' – The reset option reverts the entity design to its original data. If no data has been processed from the Data Model Touchup, the current design on the canvas will be erased.
 
::c. '''Trash button''' – Deletes any selected data entity.
 
::d. '''Zoom in button''' – Allows users to magnify the view of the entity designer for better clarity.
 
::e. '''Zoom out button''' – Provides an option to reduce the magnification level of the entity designer.
 
 
4. The ''Entity name'' is where the users input the title or identifier of the entity in this field.
 
5. The '''‘Add property’''' button adds a new property to the list.
 
6. The '''Property name''' lets user assign a unique name to the property; this field is required.
 
7. The '''‘Data Type’''' field has a dropdown list of data types to choose from. This field is required.
 
8. The '''‘Is required’''' checkbox determines whether the property is required or can stay null.
 
9. The '''‘Trash’''' button deletes a property from the list.
 
10. The '''‘Save’''' button store the newly created entity and its properties.
 
[[File:Create Entity.png|center|650px|link=https://wiki.xamun.com/wiki/File:Create_Entity.png]]
 
11. Input the number of characters allowed for a specific property when the data type is '''‘StringField’'''.
 
12. For the '''‘ForeignKeyField’''' data type, this dropdown allows users to select a related existing entity.
 
13. This field is used to choose an entity when working with the '''‘OneToOneField’''' data type.
 
14. Similar to the ''OneToOneField'', this field allows selection of an entity for the '''‘ManyToManyField’''' data type.
 
15. Users can set a '''‘Default Value’''' for the property by typing "true" or "false".
 
[[File:Data Types.png|center|650px|link=https://wiki.xamun.com/wiki/File:Data_Types.png]]
 
16. After saving the entity, it will be displayed in the entity designer.


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.  
[[File:Entities Sample.png|center|650px|link=https://wiki.xamun.com/wiki/File:Entities_Sample.png]]


[[File:Xamun-build-backendentitydesigner.png|center|650px|link=https://wiki.xamun.com/images/b/b8/Xamun-build-backendentitydesigner.png]]
<span style="padding-left: 100px;">[[:File:Xamun-build-backendentitydesigner.png|View Image Source]]</span>


{| class="wikitable mw-collapsible" style="width:100%";
'''Reference Material'''
 
{| class="wikitable mw-collapsible" style="width:100%;"
! style="border: 2px solid black;" | Feature
! style="border: 2px solid black;" | Feature
! style="border: 2px solid black;" | Description
! style="border: 2px solid black;" | Description
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Add Icon (Create Entity) || style="border: 1px solid black; background-color: white;" | • Will open a dialog for Create Entity fields <br> • Users will Create, Edit and Delete Property in each Entity. <br> • User can Save/Cancel when creating an Entity
| style="border: 2px solid black; background-color: #f2f2f2;" | Add button   || style="border: 2px solid black; background-color: #white;" | • Adds a new entity to the data entity designer.
|-
| style="border: 2px solid black; background-color: #f2f2f2;" |Save button || style="border: 2px solid black; background-color: #white;" | • Saves the existing entities in the designer.  
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Reset button || style="border: 2px solid black; background-color: white;" | • Allows users to roll back to original data.
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Trash button || style="border: 2px solid black; background-color: white;" | • Removes any selected data entity.
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Zoom in button || style="border: 2px solid black; background-color: white;" | • Allows user to magnify the view of the designer.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Trash Icon (Delete Entity) || style="border: 1px solid black; background-color: white;" | • Allow user to Delete create Entity 
| style="border: 2px solid black; background-color: #f2f2f2;" | Zoom out button || style="border: 2px solid black; background-color: white;" | • Reduces the magnification level of the designer.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Entity ||style="border: 1px solid black; background-color: white;" | • User has the option to Add, Edit and Delete Entity in each page after predicting.  
| style="border: 2px solid black; background-color: #f2f2f2;" | Add property button || style="border: 2px solid black; background-color: white;" | • Adds a new property to the list.  
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Update Entity ||style="border: 1px solid black; background-color: white;" | • Double click on created entity to update.  
| style="border: 2px solid black; background-color: #f2f2f2;" | Property Name || style="border: 2px solid black; background-color: white;" | • Assign a unique name for a property. <br> • This is a required field.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Load XML ||style="border: 1px solid black; background-color: white;" | • 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.  
| style="border: 2px solid black; background-color: #f2f2f2;" | Data Type || style="border: 2px solid black; background-color: white;" | • Lets user choose different data types. <br> • This is a required field.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Save ||style="border: 1px solid black; background-color: white;" | • 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.
| style="border: 2px solid black; background-color: #f2f2f2;" | ‘Is Required’ checkbox || style="border: 2px solid black; background-color: white;" | • Lets user decide if the property is required or can stay null.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Zoom in/Zoom out ||style="border: 1px solid black; background-color: white;" | • Can Zoom in/Zoom out Entity Designer page.  
| style="border: 2px solid black; background-color: #f2f2f2;" | Trash button || style="border: 2px solid black; background-color: white;" | • Deletes a property from the list.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Reset||style="border: 1px solid black; background-color: white;" | • 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.
| style="border: 2px solid black; background-color: #f2f2f2;" | Save button || style="border: 2px solid black; background-color: white;" | • Saves the entity and displays it in the entity designer.
|}
|-
 
| style="border: 2px solid black; background-color: #f2f2f2;" | StringField || style="border: 2px solid black; background-color: white;" | • Lets user decide the number characters for the string. <br> • This field is required.
:'''Create Entity and Property'''
::This is the page where the developer can create the entity and property of the pages.
 
[[File:Xamun-build-createEntityProperty.png|center|750px|link=https://wiki.xamun.com/images/b/b5/Xamun-build-createEntityProperty.png]]
<span style="padding-left: 100px;">[[:File:Xamun-build-createEntityProperty.png|View Image Source]]</span>
 
::{| class="wikitable mw-collapsible" style="width:100%";
! style="border: 2px solid black;" | Feature
! style="border: 2px solid black;" | Description
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Create Entity ||style="border: 1px solid black; background-color: white;" | • Entity name input field for user to input Entity name to be created.
| style="border: 2px solid black; background-color: #f2f2f2;" | ForeignKeyField || style="border: 2px solid black; background-color: white;" | • Allows the user to get a primary key from another entity. <br> • This field is required.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Property ||style="border: 1px solid black; background-color: white;" | • Users have the option to Add, Edit and Delete Properties in each Entity based on desired changes. <br> • Data type is a dropdown selection that will be set in each property. <br> • Is Required, is a checkbox to which sets the property as required. <br> • Default value is an input field to where user can input a default value if applicable in a specific property. 
| style="border: 2px solid black; background-color: #f2f2f2;" | OneToOneField || style="border: 2px solid black; background-color: white;" | • Allows user to choose a One-to-One relationship with another entity. <br> • This field is required.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Save ||style="border: 1px solid black; background-color: white;" | • licked, it will save all the input information and entity will be added on the file.  
| style="border: 2px solid black; background-color: #f2f2f2;" | ManyToManyField || style="border: 2px solid black; background-color: white;" | • Lets user decide to have a Many-to-Many relationship with another entity. <br> • This field is required.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Cancel ||style="border: 1px solid black; background-color: white;" | If clicked, it will terminate the Create action.
| style="border: 2px solid black; background-color: #f2f2f2;" | Default Value || style="border: 2px solid black; background-color: #white;" | • Sets a value of ‘true’ or ‘false’.
|}
|}
''Updated on: 10/01/2024''
</div>
</div>
<br>
<br>
Line 381: Line 435:


<div style="border: 2px solid black; padding: 20px; text-align: justify;">
<div style="border: 2px solid black; padding: 20px; text-align: justify;">
==Frontend==
==Frontend==


Line 420: Line 475:


===Angular Config(For Web Only)===
===Angular Config(For Web Only)===
To help the developers manage the angular package dependencies and environment variables.
The Angular Config feature is to help developers manage the angular package dependencies and environment variables.
 
 
1. In the '''Xamun Project Hub''', navigate to the ''‘Build’'' tab and select your project. <br>
2. Within the chosen project, click on the '''Devs tool''' button.<br>
3. A menu will appear—select '''‘Build Studio’''' to open the build studio for your specific project.
 
[[File:Select Build Project.png|center|750px|link=https://wiki.xamun.com/wiki/File:Select_Build_Project.png]]
 
4. In the project library, click on the '''‘Open’''' button beside your web application.
 
[[File:Open Web App.png|center|750px|link=https://wiki.xamun.com/wiki/File:Open_Web_App.png]]
 
5. In the opened project interface, click on the '''‘Frontend’''' dropdown button.
 
6. Select ''‘Angular Config’'' to display the package manager on the right-hand side of the screen.
 
7. Click the '''‘Add Package’''' button to add a package in the Angular Package Manager.
 
::a. To view the package details, click the '''‘View Code’''' button, which opens a form allowing users to copy the package.json code.
 
::b. The '''‘Edit’''' button enables users to modify the package name and version.
 
::c. The '''‘Delete’''' button allows users to remove a package from the list.
 
[[File:Add Package.png|center|750px|link=https://wiki.xamun.com/wiki/File:Add_Package.png]]
 
8. The ''Add Package'' form will appear.
 
9. In the form, enter the ''package name'' for the Angular package.
 
10. Enter the ''package version'' of the Angular package.
 
11. Click the '''‘Save Package’''' button to save the package in the manager.
 
[[File:Add Package Form.png|center|750px|link=https://wiki.xamun.com/wiki/File:Add_Package_Form.png]]


:'''Package Manager'''
12. To create an Environment Variable, click ''‘Environment Variable Configuration’'' tab.
:Packages are the dependencies of the application to make it work.


[[File:Xamun-build-angularPackageManager.png|center|750px|link=https://wiki.xamun.com/images/1/18/Xamun-build-angularPackageManager.png]]
[[File:Open EnvVar Config.png|center|750px|link=https://wiki.xamun.com/wiki/File:Open_EnvVar_Config.png]]
<span style="padding-left: 100px;">[[:File:Xamun-build-angularPackageManager.png|View Image Source]]</span>


:{| class="wikitable mw-collapsible" style="width:100%";
13. The Angular Environment Variable Configuration panel will be displayed on the screen.
! style="border: 2px solid black;" | Feature
! style="border: 2px solid black;" | Description
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Add Package ||style="border: 1px solid black; background-color: white;" | • Will open a dialog to which allows user to create/add package that is not part of the default packages.
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Edit ||style="border: 1px solid black; background-color: white;" | • Allow user to update created package.
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Delete ||style="border: 1px solid black; background-color: white;" | • Allow user to delete package.
|}


::'''Add Package'''
14. Click '''‘Add Variable’''' button.
::This is the page where the developer can add new packages.


[[File:Xamun-build-angularAddPackage.png|center|500px|link=https://wiki.xamun.com/images/7/75/Xamun-build-angularAddPackage.png]]
[[File:Add Variable.png|center|750px|link=https://wiki.xamun.com/wiki/File:Add_Variable.png]]
<span style="padding-left: 225px;">[[:File:Xamun-build-angularAddPackage.png|View Image Source]]</span>


::{| class="wikitable mw-collapsible" style="width:100%";
15. The Add Variable form will appear.
! style="border: 2px solid black;" | Feature
! style="border: 2px solid black;" | Description
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Add Package ||style="border: 1px solid black; background-color: white;" | • Package name and Package version is required when creating a package.
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Save Package ||style="border: 1px solid black; background-color: white;" | • If clicked, it will save the package and will add on the package list. <br> • Will only enable when Package name and Version is filled out.
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Cancel ||style="border: 1px solid black; background-color: white;" | • If clicked, will terminate create action.
|}


::Created packages will be reflected in UI touch up as dependencies.
16. Input ''Variable Name'' on the designated textbox.


[[File:Xamun-build-angularCreatedPackage.png|center|750px|link=https://wiki.xamun.com/images/c/cd/Xamun-build-angularCreatedPackage.png]]
17. Input ''Variable Value'' on its designated textbox.
<span style="padding-left: 100px;">[[:File:Xamun-build-angularCreatedPackage.png|View Image Source]]</span>


:'''Environment Variable'''
18. Click '''‘Save Variable’''' to finalize and store the environment variable.
:Environment variables are needed to store the application secrets and configuration data.


[[File:Xamun-build-angularEnviroVar.png|center|750px|link=https://wiki.xamun.com/images/5/53/Xamun-build-angularEnviroVar.png]]
[[File:Save Variable.png|center|750px|link=https://wiki.xamun.com/wiki/File:Save_Variable.png]]
<span style="padding-left: 100px;">[[:File:Xamun-build-angularEnviroVar.png|View Image Source]]</span>


:{| class="wikitable mw-collapsible" style="width:100%";
{| class="wikitable mw-collapsible" style="width:100%;"
! style="border: 2px solid black;" | Feature
! style="border: 2px solid black;" | Feature
! style="border: 2px solid black;" | Description
! style="border: 2px solid black;" | Description
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Add Variable ||style="border: 1px solid black; background-color: white;" | • Will open a dialog to which allows user to create/add variable that is not part of the default environment variables created.  
| style="border: 2px solid black; background-color: #f2f2f2;" | Add Package   || style="border: 2px solid black; background-color: #white;" | • Adds a new package to the angular package manager.
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | View Code || style="border: 2px solid black; background-color: #white;" | • Opens a form allowing users to copy the package.json code.
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Edit Button || style="border: 2px solid black; background-color: white;" | • Allows users to modify the name and version of an existing package.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Edit ||style="border: 1px solid black; background-color: white;" | • Allow user to update created environment variable.
| style="border: 2px solid black; background-color: #f2f2f2;" | Delete Button || style="border: 2px solid black; background-color: white;" | • Removes a package from the Angular Package Manager list.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Delete ||style="border: 1px solid black; background-color: white;" | • Allow user to delete environment variable.
| style="border: 2px solid black; background-color: #f2f2f2;" | Save Package Button || style="border: 2px solid black; background-color: white;" | • Saves the newly added package in the Angular Package Manager.
|}
 
::'''Add Variable'''
::This is the page where the developer can add new variables.
 
[[File:Xamun-build-angularAddVariable.png|center|500px|link=https://wiki.xamun.com/images/6/61/Xamun-build-angularAddVariable.png]]
<span style="padding-left: 225px;">[[:File:Xamun-build-angularAddVariable.png|View Image Source]]</span>
 
::{| class="wikitable mw-collapsible" style="width:100%";
! style="border: 2px solid black;" | Feature
! style="border: 2px solid black;" | Description
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Add Variable ||style="border: 1px solid black; background-color: white;" | • Variable name and Variable value are required when creating an environment variable.  
| style="border: 2px solid black; background-color: #f2f2f2;" | Add Variable Button || style="border: 2px solid black; background-color: white;" | • Opens a form to add a new variable in the Angular Environment Configuration.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Save Variable ||style="border: 1px solid black; background-color: white;" | • If clicked, it will save the variable and will add on the environment variable list. <br> • Will only enable when Variable name and Value is filled out.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Cancel ||style="border: 1px solid black; background-color: white;" | • If clicked, will terminate create action.
| style="border: 2px solid black; background-color: #f2f2f2;" | Save Variable Button || style="border: 2px solid black; background-color: #white;" | • Saves the name and value of a newly added environment variable.
|}
|}


::Create variables will be reflected in UI touchup under Environment folder> “environment.ts “file
''Updated on: 09/27/2024''
 
[[File:Xamun-build-angularCreatedVar.png|center|750px|link=https://wiki.xamun.com/images/5/5d/Xamun-build-angularCreatedVar.png]]
<span style="padding-left: 100px;">[[:File:Xamun-build-angularCreatedVar.png|View Image Source]]</span>
</div>
</div>
<br>
<br>
Line 659: Line 713:
::: B.2 SEND HTTP REQUEST – Properties Tab
::: B.2 SEND HTTP REQUEST – Properties Tab


[[File:Xamun-build-workflowPropertiesTab.png|center|500px|link=https://wiki.xamun.com/images/1/15/Xamun-build-workflowPropertiesTab.png]]
[[File:Xamun-build-workflowPropertiesTab.png|center|505px|link=https://wiki.xamun.com/images/1/15/Xamun-build-workflowPropertiesTab.png]]
<span style="padding-left: 225px;">[[:File:Xamun-build-workflowPropertiesTab.png|View Image Source]]</span>
<span style="padding-left: 225px;">[[:File:Xamun-build-workflowPropertiesTab.png|View Image Source]]</span>


Line 709: Line 763:
::: B.4 SEND HTTP REQUEST – Headers Tab
::: B.4 SEND HTTP REQUEST – Headers Tab


[[File:Xamun-build-workflowHeadTab.png|center|500px|link=https://wiki.xamun.com/images/f/fe/Xamun-build-workflowHeadTab.png]]
[[File:Xamun-build-workflowHeadTab.png|center|505px|link=https://wiki.xamun.com/images/f/fe/Xamun-build-workflowHeadTab.png]]
<span style="padding-left: 225px;">[[:File:Xamun-build-workflowHeadTab.png|View Image Source]]</span>
<span style="padding-left: 225px;">[[:File:Xamun-build-workflowHeadTab.png|View Image Source]]</span>


Line 747: Line 801:
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Test Tab ||style="border: 1px solid black; background-color: white;" | • Click the Send Http Request button to send the input data from previous tabs.
| style="border: 2px solid black; background-color: #f2f2f2;" | Test Tab ||style="border: 1px solid black; background-color: white;" | • Click the Send Http Request button to send the input data from previous tabs.
|}
|}</div>
<br>


<!--::: B.7 SEND HTTP REQUEST – UI Touch up HTML Mapper Tab
<!--::: B.7 SEND HTTP REQUEST – UI Touch up HTML Mapper Tab
Line 838: Line 893:
|}
|}
</div><br>
</div><br>
<div style="border: 2px solid black; padding: 20px; text-align: justify;">
<div style="border: 2px solid black; padding: 20px; text-align: justify;">


Line 843: Line 899:
This page is the Blueprint section, here, you can create multiple versions of your selected solutions.
This page is the Blueprint section, here, you can create multiple versions of your selected solutions.


[[File:Blueprint.png|center|750px|link=https://wiki.xamun.com/images/9/98/Blueprint.png]]
[[File:Blueprint.png|center|750px|link=https://wiki.xamun.com/images/9/98/Blueprint.png]]<span style="padding-left: 100px;">[[:File:Blueprint.png|View Image Source]]</span>
<span style="padding-left: 100px;">[[:Blueprint.png|View Image Source]]</span>
 
</div><br>


<div style="border: 2px solid black; padding: 20px; text-align: justify;">
<div style="border: 2px solid black; padding: 20px; text-align: justify;">


==Sandbox==
==Sandbox==
This page  
This page is for publishing frontend in the sandbox, below is the activity log when it was deployed


[[File:Sandbox.png|center|750px|link=https://wiki.xamun.com/images/3/3a/Sandbox.png]]
[[File:Sandbox.png|center|750px|link=https://wiki.xamun.com/images/3/3a/Sandbox.png]] <span style="padding-left: 100px;">[[:File:Sandbox.png|View Image Source]]</span>
<span style="padding-left: 100px;">[[:Sandbox.png|View Image Source]]</span>


{| class="wikitable mw-collapsible" style="width:100%";
{| class="wikitable mw-collapsible" style="width:100%";
Line 860: Line 916:
| style="border: 2px solid black; background-color: #f2f2f2;" | Deploy API and Identity Server ||style="border: 1px solid black; background-color: white;" | • This sets up the backend services, which handle data processing, storage, and user authentication.
| style="border: 2px solid black; background-color: #f2f2f2;" | Deploy API and Identity Server ||style="border: 1px solid black; background-color: white;" | • This sets up the backend services, which handle data processing, storage, and user authentication.
|-
|-
| style="border: 2px solid black; background-color: #f2f2f2;" | Deploy Angular SPA ||style="border: 1px solid black; background-color: white;" | • This sets up the frontend, which is the user interface of your application that users interact with. </div><br>
| style="border: 2px solid black; background-color: #f2f2f2;" | Deploy Angular SPA ||style="border: 1px solid black; background-color: white;" | • This sets up the frontend, which is the user interface of your application that users interact with. <br>
|}
</div>
<br>
{| class="wikitable" style="width:100%; text-align:center;"
{| class="wikitable" style="width:100%; text-align:center;"
|-
|-

Latest revision as of 10:35, 1 October 2024

Table of Contents
Getting Started Ideation Studio Design Studio Build Studio FAQs

Build Studio

The 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.

Load video
YouTube


Check and Confirm Pages

This is the page where the user can check and confirm the pages in the Design components. You can view this page after creating a project or application.
In this section, the user can group pages by module, which is applicable only for Web Applications.


View Image Source

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)

View Video Tutorial

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.

View Image Source

Feature Description
Build • It 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.
• It 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.

View Image Source

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.
• It 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

The Data Entity Designer feature of Build Studio lets developers create and edit the entity of each page of the project.

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.

1. Click on the Backend Dropdown button: Select the dropdown menu in the backend section to access additional features.

2. Open the Data Entity Designer by choosing it from the dropdown on the right side of the page.

3. Press the ‘Add’ button to create a new entity in the designer.


a. Save button – This button preserves any newly created or edited data entities in the designer.
b. Reset button – The reset option reverts the entity design to its original data. If no data has been processed from the Data Model Touchup, the current design on the canvas will be erased.
c. Trash button – Deletes any selected data entity.
d. Zoom in button – Allows users to magnify the view of the entity designer for better clarity.
e. Zoom out button – Provides an option to reduce the magnification level of the entity designer.


4. The Entity name is where the users input the title or identifier of the entity in this field.

5. The ‘Add property’ button adds a new property to the list.

6. The Property name lets user assign a unique name to the property; this field is required.

7. The ‘Data Type’ field has a dropdown list of data types to choose from. This field is required.

8. The ‘Is required’ checkbox determines whether the property is required or can stay null.

9. The ‘Trash’ button deletes a property from the list.

10. The ‘Save’ button store the newly created entity and its properties.

11. Input the number of characters allowed for a specific property when the data type is ‘StringField’.

12. For the ‘ForeignKeyField’ data type, this dropdown allows users to select a related existing entity.

13. This field is used to choose an entity when working with the ‘OneToOneField’ data type.

14. Similar to the OneToOneField, this field allows selection of an entity for the ‘ManyToManyField’ data type.

15. Users can set a ‘Default Value’ for the property by typing "true" or "false".

16. After saving the entity, it will be displayed in the entity designer.


Reference Material

Feature Description
Add button  • Adds a new entity to the data entity designer.
Save button • Saves the existing entities in the designer.
Reset button • Allows users to roll back to original data.
Trash button • Removes any selected data entity.
Zoom in button • Allows user to magnify the view of the designer.
Zoom out button • Reduces the magnification level of the designer.
Add property button • Adds a new property to the list.
Property Name • Assign a unique name for a property.
• This is a required field.
Data Type • Lets user choose different data types.
• This is a required field.
‘Is Required’ checkbox • Lets user decide if the property is required or can stay null.
Trash button • Deletes a property from the list.
Save button • Saves the entity and displays it in the entity designer.
StringField • Lets user decide the number characters for the string.
• This field is required.
ForeignKeyField • Allows the user to get a primary key from another entity.
• This field is required.
OneToOneField • Allows user to choose a One-to-One relationship with another entity.
• This field is required.
ManyToManyField • Lets user decide to have a Many-to-Many relationship with another entity.
• This field is required.
Default Value • Sets a value of ‘true’ or ‘false’.

Updated on: 10/01/2024


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.

View Image Source

Feature Description
Editor • Initial code is displayed where Developer will be able to Edit/Update the code for Routing.
Save • Will save the code in the database.


Flutter Config(For Mobile only)

The Flutter Configuration is for Mobile applications only. It contains the list of the configuration.

View Image Source

Feature Description
Dio Configurations • Dart Input Output for HTTP Network & API Usage
Local Storage Configuration • Configuration for Local Storage
Services • List of added services.
Local Database Configuration • Configuration for SQFlite Local Database.
Pub Spec Editor • Add packages in pubspec.yaml
Screen State • List of Screen States
DIO Configuration
This is the page where the developer can view and edit the Dio Configuration.

View Image Source

Feature Description
Edit Config • Allows user to modify the configurations of Base URL, Connect Timeout, Send Timeout, Receive Timeout.
• All fields are required, and input should be valid when updating config.
View Config • A dialog will appear for the user to view the updated code after updating the config. And data inputted should be reflected.
• File name should be “http_client.dart”.
Submit • If clicked and if validation passed, entered Dio configuration details will be saved.
• Will only be enabled once validations are passed.
Cancel • Terminate update action
Local Storage Configuration
This is the page where the developer can view and edit the configuration for Storage Keys.

View Image Source

Feature Description
Edit Config • Allows user to modify the configurations of Storage Keys.
• All fields are required, and input should be valid when updating config.
View Config • A dialog will appear for the user to view the updated code after updating the config. And data inputted should be reflected.
• File name should be “storage_helper.dart”.
Add Storage Keys • If clicked, a new line of Variable Name and Storage Key Name fields will be added where user can input details.
Delete • If clicked added storage key will be deleted.
• Delete button is per storage keys.
• Will only visible when two or more keys are added
Submit • If clicked and if validation passed, entered Storage keys configuration details will be saved.
• Will only be enabled once validations are passed.
Cancel • Terminate update action
Services
This is the page where the developer can add and maintain the services.

View Image Source

Feature Description
Add Service • Users are not allowed to add Service if no Model class is created-JSON to Dart.
• All fields are required, and input should be valid when updating config.
Add Function • If clicked, another Function fields such Function name, Endpoint, Method, Model and Content will be added where user can input details.
• All fields are required except for Content.
• HTTP Method is a dropdown field which has Post, Put, Delete and Get selection.
• Content Field where user will input valid JSON
• Model is dropdown selection where list is based on created JSON to Model
Delete • If clicked added Function will be deleted.
• Delete button is per Function.
• It will only visible when two or more functions are added
Submit • If clicked and validation passed, Service will be created.
• It will only be enabled once validations are passed.
Cancel • Terminate update action.
Ellipsis • Will have ellipses in each created services where these actions are available: Edit, Delete, and View Service file.
Edit • Edit allow user to update created Service.
• Updating this file will result in the deletion of the associated files (ViewModel).
Delete • Delete allows the user to Delete created Service.
View Service Files • A dialog will appear for the user to view the updated code after updating the config. And data entered should be reflected.
• File name should be “<Servicename>_service.dart”.
Repositories
This is the page where the developer can view the different repository files.

View Image Source

Feature Description
Repositories • Will only appear when there is a created Service.
• Each created service will have a generated Repositories.
Ellipsis • Will have ellipses in each created services where these actions are available: View Repository file, View Repository Providing file, View Repository Unit test file, and View Repository Mock Unit Test File.
View Repository File • Users will be able to view the generated Repository file in each created service.
• File name should be “<Servicename>_repository.dart”.
View Repository Providing File • Users will be able to view the generated Repository Providing File in each created service. • File name should be “<Servicename_repository_providing.dart”
View Repository Unit Test File • Users will be able to view the generated Repository Unit Test File in each created service.
• File name should be “<Servicename>_repository_test.dart”.
View Repository Mock Unit Test File • Users will be able to view the generated Repository Mock Unit Test File in each created service.
• File name should be “<Servicename>_repository_test.mocks.dart”
Local Database Configuration
This is the page where the developer can add and maintain the database configuration.

View Image Source

Feature Description
Add Config • Allow users to add DB name and password.
• Can only add one configuration detail of Local database.
• DB Name is only required, and Password is optional when creating config.
Edit Config • Allows user to modify the DB name and Password of Local Database configurations.
• DB Name is only required, and Password is optional when updating config.
View Config • A dialog will appear for the user to view the updated code after adding the config. And database config. entered details should be reflected.
• File name should be “database_helper.dart”.
Submit • If clicked and validation passed, Local Database Configuration saved.
• Will only be enabled once validations are passed.
Cancel • Terminate Update Action
Pubspec Editor
This is the page where the developer can add the packages. The JSON can also be viewed from this page.

View Image Source

Feature Description
Add Package • When clicked, a dialog will appear which contains checkboxes of Packages to Add packages in pubspec.yaml.
View JSON • A dialog will appear for a generated file after adding packages for user to view the generated xamun-packages.json.
• If no selected package, no file is generated.
Select Package • A dialog where the user will be able to tick/select checkboxes for each package.
• Users can select 1 or more packages as desired.
Submit • Saved selected packages.
• If clicked “xamun-packages.json” file will be generated.
Cancel • Terminate add/update action.
Screen State
This is the page where the developer can add and maintain the different Screen State.

View Image Source

View Model
This is the page where the developer can create and maintain the View Model.

View Image Source


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.

View Image Source


Build API Swagger

Once swagger is viewable, developers will be able to test and view the back end set up and entity flow.

View Image Source



Frontend

UI Touch Up

This is the page where the front-end design and page routing set-up can be generated.

View Image Source

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)

The Angular Config feature is to help developers manage the angular package dependencies and environment variables.


1. In the Xamun Project Hub, navigate to the ‘Build’ tab and select your project.
2. Within the chosen project, click on the Devs tool button.
3. A menu will appear—select ‘Build Studio’ to open the build studio for your specific project.

4. In the project library, click on the ‘Open’ button beside your web application.

5. In the opened project interface, click on the ‘Frontend’ dropdown button.

6. Select ‘Angular Config’ to display the package manager on the right-hand side of the screen.

7. Click the ‘Add Package’ button to add a package in the Angular Package Manager.

a. To view the package details, click the ‘View Code’ button, which opens a form allowing users to copy the package.json code.
b. The ‘Edit’ button enables users to modify the package name and version.
c. The ‘Delete’ button allows users to remove a package from the list.

8. The Add Package form will appear.

9. In the form, enter the package name for the Angular package.

10. Enter the package version of the Angular package.

11. Click the ‘Save Package’ button to save the package in the manager.

12. To create an Environment Variable, click ‘Environment Variable Configuration’ tab.

13. The Angular Environment Variable Configuration panel will be displayed on the screen.

14. Click ‘Add Variable’ button.

15. The Add Variable form will appear.

16. Input Variable Name on the designated textbox.

17. Input Variable Value on its designated textbox.

18. Click ‘Save Variable’ to finalize and store the environment variable.

Feature Description
Add Package  • Adds a new package to the angular package manager.
View Code • Opens a form allowing users to copy the package.json code.
Edit Button • Allows users to modify the name and version of an existing package.
Delete Button • Removes a package from the Angular Package Manager list.
Save Package Button • Saves the newly added package in the Angular Package Manager.
Add Variable Button • Opens a form to add a new variable in the Angular Environment Configuration.
Save Variable Button • Saves the name and value of a newly added environment variable.

Updated on: 09/27/2024


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.

View Image Source

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.

View Image Source

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.

View Image Source

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.

View Image Source

Feature Description
Module Name • Users are required to enter module name.
Submit • Save created workflow module and will be added in Modules List on the left side panel.
Cancel • If clicked, will terminate create action.
Create Workflow
Creation of workflow that will be integrated in Groups in UI Touch up.
Trigger
A.1 SELECT GROUP

View Image Source

Feature Description
Group • Select Group of modules that you want to create a workflow with.
• Can only select 1 group in each workflow creation.
Next • Will only be enabled when a Group is selected.
• If clicked, it will proceed on “Page” selection.
A.2 SELECT PAGE

View Image Source

Feature Description
Page • List down all pages under the selected group.
• Select a Page that you want to create a workflow with.
• User can only select 1 page in each workflow creation.
Next • Will only be enabled when a Page is selected.
• If clicked, it will proceed on “Trigger” selection.
A.3 SELECT TRIGGER

View Image Source

Feature Description
Select Tigger • User has the option of “On button click” or “On page load’ trigger to be created.
• Can only select 1 trigger in each workflow creation.
Button Config • Will only appear once “On button click” is selected.
• Selection of button config.
Apply Trigger • Apply the created Trigger in the workflow.
Back • Will navigate back to “Page” selection process.
Action
B.1 SELECT WORKFLOW

View Image Source

Feature Description
All Tab • All workflows are displayed by default.
• Send HTTP request, SendGrid Send Email, Switch are only available workflows as of current.
SQL Tab • Will only display workflows related to SQL
HTTP Tab • Will only display workflows related to HTTP
Email Tab • Will only display workflows related to email.
Control Workflow • Will only display workflows related to Control workflow
B.2 SEND HTTP REQUEST – Properties Tab

View Image Source

Feature Description
Properties Tab • All fields are required, and input should be valid.
URL • The URL to send the HTTP request to.
Method • Select Method: Get, Post, Delete, Put. The HTTP content to send along with the request.
Content • The HTTP Content to send along with the request.
Content Type • The Content type to send with the request.
Save • Will only be enabled once all tabs are filled out except Header tab.
• If clicked and validations passed, it will save all input data and action will be added in the workflow.
Cancel • Will terminate action.
B.3 SEND HTTP REQUEST – Authorization Tab

View Image Source

Feature Description
Authorization Tab • All fields are required, and input should be valid.
Authority • The base URL of the authorization server.
Redirect URI • The address where the authorization server sends the user once the app has been successfully authorized.
Post Logout Redirect URI • The address where the authorization server sends the user after logging out.
Client ID • The public identifier of your app.
Scope • Access needed to call on APIs.
Authorization • The Authorization header value to send.
Token • Key to be used alongside the Authorization header.
• Click the Authorize button, a new tab will open then Copy and paste the token on the Token input.
B.4 SEND HTTP REQUEST – Headers Tab

View Image Source

Feature Description
Request Headers • Additional headers to send along with the request.
• This tab/field is not required.
B.5 SEND HTTP REQUEST – Common Tab

View Image Source

Feature Description
Common Tab • All fields are required, and input should be valid.
Name • The technical name of the activity.
Display Name • The friendly name of the activity.
Description • A custom description for this activity.
B.6 SEND HTTP REQUEST – Test Tab

View Image Source

Feature Description
Test Tab • Click the Send Http Request button to send the input data from previous tabs.




Version Release

way to differentiate current and past application configurations is through the Version Release.

View Image Source

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.

View Image Source

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, it will Save created version and will be added in Versions List.
Cancel • If clicked, it will terminate create action.

Version Modules

This page list down the modules added in each version. The modules are created from Design Component page.

View Image Source

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.


Blueprint Versions

This page is the Blueprint section, here, you can create multiple versions of your selected solutions.

View Image Source


Sandbox

This page is for publishing frontend in the sandbox, below is the activity log when it was deployed

View Image Source
Feature Description
Deploy API and Identity Server • This sets up the backend services, which handle data processing, storage, and user authentication.
Deploy Angular SPA • This sets up the frontend, which is the user interface of your application that users interact with.


Table of Contents
Main Page Ideation Studio Design Studio Project Hub Build Studio Go Live
Retrieved from "http://wiki.xamun.com/index.php?title=Build_Studio&oldid=1328"