Home | License | FAQ | Contact | Smart-API

Smart-API App Studio Create HR Demo

Last Updated: October 3, 2022

Pre-Requisite:

First, we need to analyze our requirements to export our data models, as shown in Figure 1.

Smart-API
Figure 1. HR Demo design.

1.Go to Smart-API → App Studio → Sign In to AppStudio. (if you don’t have an account you can register here)

see this tutorial. on how to create a new account.

2.After analyzing our requirements, Three data models were exported (Employee, Department, and Degree), each with its required fields and desired data type.

3.Finally, we created three menus (Configuration, HR, and Report) to categorize our groups and their pages based on exported data models. For example, Configuration is a menu with two pages (Departments and Degree).

Steps:

1.To create a new app, you can choose App from the file menu, as shown in Figure 2, or you can click on the New (Plus)+ sign shown in Figure 3.

Smart-API
Figure 2. create a new app
Smart-API
Figure 3. create a new app
AppStudio has an auto-save function, but you save changes from now and then with the save icon shown in Figure 3.

2.A New App Wizard will appear, now you will start fill project properties, fill project’s name and Organization’s name as shown in figure 4, and press next:

Smart-API
Figure 4. Main dialog
  1. The project name is required.

  2. The organization name.

  3. Check if the project is multi-module.

A multi-module project simply manages a group of other sub-projects or modules. (e.g., ERP systems have the module for HR, inventory, and general manager)

3.Code Generation:

Smart-API
Figure 5. Main dialog
  1. Choose the technology stack which meets your requirements.

  2. Manual persistence name entry: it allo to enter database field names manually. (default field name)

  3. Manual primary key input: allows you to primary key manually. (default auto increment)

  4. Packagename: Enter your package name.

Manual persistence name entry represents the data name in the database.

4.Version Control:

Smart-API
Figure 6. Version Control

see this tutorial. on how to connect your project to GitHub Repository.

  1. Git URL: Add your git repository, see this tutorial. on how to Create GitHub Repository.

  2. Git Brnach: branch name.

  3. Git Username: git user name.

  4. Git Token: git access token, see this tutorial on how to Create GitHub Access Token .

Version Control is optional.

5.Database Connections:

Smart-API
Figure 7. Database Connections
  1. Database URL: database connection URL.

  2. Username: connection username.

  3. Password: connection password.

Database Connections are optional. (default connects to H2 Database)

6.Team:

Smart-API
Figure 8. Team
  1. Add Team Member: Involve your team to work simultaneously on the project.

  2. Can edit : if you want to grant your team member access to edit the project.

  3. Remove: by clicking remove you delete your team member from the project.

Team is optional.

7.Theme:

Smart-API
Figure 9. Theme

Full theme customization for the project.

In theme you can add your custom CSS properties to the project. as shown in figure 10, your CSS implementation will effect the project.

Smart-API
Figure 10. Theme

the project will look like figure 11.

Smart-API
Figure 11. Theme added

Or you can add your custom font, shown in figure 12.

Smart-API
Figure 12. Theme font

You can add font properties "font-family: "Times New Roman", Times, serif".

Theme is optional.

Start Creating project :

1.First, we start by creating groups:

Smart-API
Figure 13. Home Page

Click on the New Group button to add a group, Then click on the header to change the Name, as shown in Figure 14 and Figure 15.

Smart-API
Figure 14. group
Smart-API
Figure 15. group

We have three menus as shown in figure 16.

The groups represent our menus from the HR Demo design as shown in figure 16.
Smart-API
Figure 16. Menus

So we need to create three groups as shown in figure 17.

Smart-API
Figure 17. All Menus

2.Add pages that contain data "fields":

Smart-API
Figure 18. group

Click on the New Page button to add a new page, And change the page from "Group" to "Department".

Smart-API
Figure 19. group and page
Change the page name by clicking on the header.

Do that for every group we created as shown in Figure 20.

Smart-API
Figure 20. groups and pages created

3.Add Fields:

Click on the department page, and figure 21 shows up, here we can add fields to the project by clicking on +Add Field.

Smart-API
Figure 21. department add field

After you click on +Add Field, a field will be created, as shown in figure 22.

Smart-API
Figure 22. department add field

Here we will add the fields which we created in the diagram in figure 23, (name and desc).

ID is auto-generated, That’s why we didn’t create a field for it.
Smart-API
Figure 23. department fields
Smart-API
Figure 24. department add field

Here you can change DataType for every field, make it required, reorder to change order, and you can delete the field.

  1. Change Name DataType to Text.

  2. Change Desc DataType to Long Text.

You can delete the field from the side menu, right-click on the field that you want to delete then choose delete.

NEXT create a Degree page with the fields which we created in the diagram in figure 25, (name and desc).

Smart-API
Figure 25. degreed fields

Here we do as the last step add fields. And here we change DataType for every field, or make it required, reorder to change order, and you can delete the fields.

Smart-API
Figure 26. degreed add fields
You can click on Design and use the drag and drop built-in function to Add fields.
Smart-API
Figure 27. degreed design

Then go to the Employee page. (Click on the name of the page on the left menu)

Here we add the last fields in the diagram at top of the page.

Smart-API
Figure 28. employee fields
Here we add a name, Salary, Email, Department, Degree, notice here Department and Degree is in relationship with the other pages, don’t worry we will show you how to create a relationship between them in the next step.
Smart-API
Figure 29. employee add field

Now we need to add a relationship to the department with the page.
Click on department on the left menu.

Smart-API
Figure 30. employee fields

Then click Relationships.

Smart-API
Figure 31. employee relationship

Check Foreign Key, then pick Reference Entity "Department".

Smart-API
Figure 32. employee relationship

Then pick Reference Field "Name".

Smart-API
Figure 33. employee relationship

Here you Created a relationship between the field Department with the page Department, Easy right?

DataType for department disappears.

repeat the last steps for the degree field.
Check Foreign Key, then pick Reference Entity "degree".
Then pick Reference Field "Name".

Smart-API
Figure 34. employee relationship
DataType for degree disappears.

you can click on the Design button to view your table.

Smart-API
Figure 35. employee design
You can remove undesired columns from the table.

Click on the Degree field, then go to the advanced window and uncheck 'Show in Table'.

Smart-API
Figure 36. employee hide column

Go back to design you will see the Degree disappeared from the table.

Smart-API
Figure 37. employee hide column
In Figure 35 there is a column name Degree, in Figure 37 it disappeared.

We finished creating our project, we can Deploy it on AppStudio see this tutorial on how to deploy the project or we can Download and import the project, see this tutorial on how to download and import projects.

Deploy project using the platform:

There are two ways to deploy a project on the AppStudio website, you can choose to Deploy on the top left, as shown in Figure 38, or you can click on the Deploy +(PLAY) sign shown in Figure 39.

deploy
Figure 38. first way to deploy
new-deploy
Figure 39. second way to deploy

To view the project simply click on open in the browser as shown in figure 40.

deploy-in-browser
Figure 40. open project in browser

Figure 41 shows the home page.

demo-running
Figure 41. project home screen
The username is 'admin' and the Password is 'admin'.

Explore project:

First, you need to log in by accessing your username and password.

Smart-API
Figure 42. login page
The default username is 'admin' and the default Password is 'admin'.

After logging in successfully, you will be redirected to the home page shown in Figure 43.

Smart-API
Figure 43. home screen

Let’s try to add data to your project.

First, click on the configuration in the menu and choose Department. as shown in figure 44.

Smart-API
Figure 44. home screen

Click on add record on the top right of the screen, as shown in figure 45.

Smart-API
Figure 45. department page

Insert data in the fields, then click add as shown in figure 46.

Smart-API
Figure 46. department page

After inserting the record, it will show in the table as shown in figure 47.

Smart-API
Figure 47. department page

Click on the configuration in the menu and choose Degree. as shown in figure 48.

Smart-API
Figure 48. department page

Click on add record on the top right of the screen, as shown in figure 49.

Smart-API
Figure 49. degree page

Insert data in the fields, then click add as shown in figure 50.

Smart-API
Figure 50. degree page

After inserting the record, it will show in the table as shown in figure 51.

Click on HR in the menu and choose Employee.

Smart-API
Figure 51. degree page

Click on add record on the top right of the screen, as shown in figure 52.

Smart-API
Figure 52. employee page

Insert data in the fields, then click add as shown in figure 53.

Fields Department and Degree are from Department and Degree tables.
Smart-API
Figure 53. employee page

Now you Have inserted your data into the project, as shown in figure 54.

Smart-API
Figure 54. employee page

Home | License | FAQ | Contact | Smart-API