Skip to content

Commit

Permalink
Update quick-start-create.mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
wjhendry authored May 17, 2024
1 parent 96a4634 commit e396680
Showing 1 changed file with 43 additions and 44 deletions.
87 changes: 43 additions & 44 deletions docs/01_getting-started/02_quick-start/quick-start-create.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,37 @@ tags:
- new project
---

To get started, you need to access the [Genesis Create](https://create.genesis.global). This is a low-code tooling provided by genesis, so you can have a running full stack application with a few clicks.
To get started, you need to access the [Genesis Create](https://create.genesis.global). This is a low-code tool provided by Genesis, which enables you to run a full-stack application with a few clicks.

When you access the Genesis Create, you will be asked a username and a password. Please, reach out to your account manager to get access to your account.
Contact your account manager to get access to your account; you need a username and a password.

## Project Attributes
## Project attributes

Once you log in, you will be prompt the following screen:
Once you log in, you will see the following screen:

![](/img/genesis-create/project_attributes.png)

Give the project a name and a description, and after that click on **Add Genesis Components**. When you do that, a list will appear so you can select all the components you want to add to your project. For this quick start, we are adding two components:
Enter a name for the project and a description. Then click on **Add Genesis Components**. This displays a list where you can select the components that you want to add to your project. For this quick start, we are adding two components:

- Real Time Queries ([Data Server](/server/data-server/introduction/)): This component adds the Data Server component which is capable of serving live, real time views of entities as they are ingested into the system. This component also supports row and column based authorization as well as derived values calculated in real time.
- [Reporting](/components/reporting/foundation-reporting/): This component allows the user to create reusable report templates and generate reports from any application endpoint.
- Real Time Queries ([Data Server](/server/data-server/introduction/)). This component adds the Data Server component which serves live, real-time views of entities as they are ingested into the system. This component also supports row- and column-based authorization as well as derived values calculated in real time.
- [Reporting](/components/reporting/foundation-reporting/). This component enables users to create reusable report templates and generate reports from any application endpoint.

## Entity Models
## Entity models

In this section, you have to create the data model of your application.
In this section, you have to create the data model for your application.

![](/img/genesis-create/entity_models.png)

Click on _New Entity_ to start creating the tables and fields of your application:
Click on **New Entity** to start creating the tables and fields for your application:

![](/img/genesis-create/new_entity.png)

After that, give your table a name, in our case, we are calling is `TRADES`, and start creating the fields for that table.
After that, give your table a name, in our case: `TRADES`. Then start creating the fields for that table.

for each field, you have two types that can be selected:
For each field, there are two types that you can select:

- Primitive: for this type, you create a new field based on primitives types such as `STRING`,`INT`, `BOOLEAN`, ...
- Entity Reference: for this type, you are creating a new field that already exists in other table. By doing this, you can save some time reusing your fields.
- Primitive. For this type, you create a new field based on primitive types such as `STRING`, `INT`, `BOOLEAN`, etc.
- Entity Reference. For this type, you are creating a new field that already exists in another table. This saves some time when you reuse your fields.

For this quick start, we are creating the table `TRADES` with the following fields:

Expand All @@ -58,46 +58,46 @@ Your screen should be like this:

![](/img/genesis-create/new_entity_complete.png)

After you finish, the Genesis Create will create events for **insertion**, **deletion** and **modification** automatically. These events will be created in the file **alpha-eventhandler.kts**. To learn more about it, please check the [eventhandler documentation](/server/event-handler/introduction/).
After you finish, Genesis Create automatically creates events for **insertion**, **deletion** and **modification**. These events are wriiten to the file **alpha-eventhandler.kts**. To learn more about it, see the [Event Handler documentation](/server/event-handler/introduction/).

## Views

After you created your data model, we are going to create a [view](/database/fields-tables-views/views/) on top of that table.
After creating your data model, we shall create a [view](/database/fields-tables-views/views/) on top of that table.

![](/img/genesis-create/views.png)

Click on _New View_ to create a new view.
Click on **New View** to create a new view.

![](/img/genesis-create/new_view.png)

On that page, you can select the root table and give your view a name. After you save it, two new sections will be unblocked:
On this page, you can select the root table and give your view a name. After you save it, two new sections are unblocked:

- The _Join Condition_: where you can [create joins](/database/fields-tables-views/views/views-basics/#joins). But remember that in order to be able to create joins, you need to have at least two entities.
- The _View Configuration_: where you can select which fields will be included in that view.
- **Join Condition** enables you to [create joins](/database/fields-tables-views/views/views-basics/#joins). Of course, before you can create a join, you need to have at least two entities. You have to have something to join to!
- **View Configuration** enables you to select which fields will be included in that view.

For this quick start, we are not creating joins. In case you are interested in creating joins, please [follow this link](/database/fields-tables-views/views/views-basics/#joins).
For this quick start, we are not creating joins. IBut if you want to find out more, check our [reference pages on views](/database/fields-tables-views/views/views-basics/#joins).

## Queries

After you create your views, we are going to configure our [queries](/server/data-server/introduction/).
Next, we can configure our [queries](/server/data-server/introduction/).

![](/img/genesis-create/queries.png)

Click on _New Query_. After that, it will open this page:
Click on **New Query**. After that, it will open this page:

![](/img/genesis-create/new_query.png)

In this section, you need to give this query a name, and select the source of that query. After you save it, the attribute section will be unblocked so you can choose the fields that will be streamed.
In this section, give the query a name, and select the source of the query. After you save it, the **attribute** section is unblocked, and you can choose the fields that will be streamed.

In this quick start, we are choosing all fields to be streamed.

## Business Components

In this section will be listed all business components that you have selected.
This section lists all the Business Components that you have selected.

![](/img/genesis-create/business_components.png)

If you select any component that needs additional configuration, it will appear an icon so you can configure it.
If you select any component that needs additional configuration, an alert icon is displayed, so you can configure it.

## User Interface

Expand All @@ -106,48 +106,47 @@ In this section, you can create pages and add web components to your application
![](/img/genesis-create/user_interface.png)

Here you can:
- Add new routes/pages: The default route that is created is called **HOME**. You can whether use it or create new ones.
- Add new components: You can add and configure web components that will be inserted into your application. Today we can insert:
- [Entity Management](/web/micro-front-ends/foundation-entity-management/): a component made of a a real time grid and a form to perform modifications to database values.
- [Real time grids](/web/web-components/grids/grid-pro/grid-pro-intro/): This component provides the end-user with a real time data grid connected to the Genesis query configured in a read-only mode appropriate for display only.
- [Dynamic forms](/web/forms/foundation-forms/): This component provides the end-user with a static form dynamically created against an underlying entity that can be fine tuned on the configuration screen.
- Add new routes/pages. The default route that is created is called **HOME**. You can either use this or create new ones.
- Add new components. You can add and configure web components to insert into your application. Today we can insert:
- [Entity Management](/web/micro-front-ends/foundation-entity-management/): a component that provides a real-time grid and a form for perform modifications to database values.
- [Real time grids](/web/web-components/grids/grid-pro/grid-pro-intro/): a component that provides the end-user with a real-time data grid connected to the Genesis query configured in a read-only mode appropriate for display only.
- [Dynamic forms](/web/forms/foundation-forms/). This component provides the end-user with a static form created dynamicallyagainst an underlying entity that can be fine-tuned on the configuration screen.
- [Charts](/web/web-components/presentation/chart/): Create a chart to display your data.

### Adding a new web component

For this tutorial, we are going to create a new entity management component to our home page. Click on **Add Tile** and select **Real-Time Data Grid + Data Modifications**
For this tutorial, we are going to create a new entity management component for our home page. Click on **Add Tile** and select **Real-Time Data Grid + Data Modifications**.

![](/img/genesis-create/add_new_web_component.png)

Once you submit, a new row with a warning on the config column will appear. It indicates that you still need to configure your component. To do that, click on the edit button in the actions column.
Once you submit, a new row with an alert on the config column is displayed. This indicates that you need to configure your component. Click on the **edit** button in the **action**s column.

After you click on it, you should see a this page:
This displays the folllowing page:

![](/img/genesis-create/add_new_entity_management.png)

At this point you need to configure:
- **The data source of the entity management**: This is where your grid will get the data from. Select the source **ALL_TRADES**. Remember that this source is a query that you have created.
- **The position of the modal**: the entity management component is composed of a grid and a form. In that part, you need to choose where you want the form to appear. We are choosing **right**.
- **Allowed actions**: You can allow the user to insert, delete and modify the data that is being displayed. In that part, you need to choose which actions you want the user to be allowed. We are choosing all actions: delete, insert and modify.

- **The data source of the entity management**. This is where your grid will get the data from. Select the source **ALL_TRADES**. Remember that this source is a query that you have created.
- **The position of the modal**. The entity management component is composed of a grid and a form. Choose where you want the form to appear. We are choosing **right**.
- **Allowed actions**. You can allow the user to insert, delete and modify the data that is being displayed. Choose which actions you want the user to be allowed. We are choosing all actions: delete, insert and modify.

After you choose the data source, the **Configure Grid and Forms** section will be unblocked:

![](/img/genesis-create/configure_grid_and_forms.png)

At this part, you can configure the order of the fields in the grid and in the forms, change how the name of the field will be displayed, and also change the visibility of each field.
here, you can configure the order of the fields in the grid and in the forms. You can also change how the field name is displayed, and you can change the visibility of each field.

For this tutorial, we are not changing any configuration at this point.

## Summary

When you are done with the UI configuration, you can proceed to the last step with is the summary:
When have completed the UI configuration, you can proceed to the last step, which is the summary:

![](/img/genesis-create/summary.png)

Here there is a video explaining what are the next steps and there is also a button so you can generate your project.

Whe you click on it, it will start downloading your project in a .zip file. Now all you have to do it unzip ir locally and open it in intelliJ.
Here there is a video explaining the next steps. There is also a button so you can generate your project. Click on this, to download your project in a .zip file. Then you can unzip it locally and open it in intelliJ.

:::tip
After you first open your project in IntelliJ, a pop-up will appear requesting you to load the gradle project. Make sure you click on "Load Grade Project".
:::
When you first open your project in IntelliJ, a pop-up appears requesting you to load the gradle project. Make sure you click on "Load Gradle Project".
:::

0 comments on commit e396680

Please sign in to comment.