Creating projects using Low-Code approach

Creating a weather forecast sample

Now we will walk you through the general process of creating and running a Low-Code project using the WeatherForecast sample template.

Step 1: Create a low-code design project.

  1. From File > New > New Project. Select Low-Code Project and click Next.

  2. Click Create.

    The project displays in the solution explorer.

    The Sample.Design project is where you design and manage the entities and models. The Sample.Design project contains an entity design file which has the basic configurations. In this guide, we will directly make use of that file.

    The other projects (such as Sample.Client, Sample.Common, Sample.EFCore, Sample.Services, Sample.WebApi) are generated based on the Sample.Design project.

    Sample.Client: the frontend application which the end user will run.

    Sample.Common: the development toolkits and extension functions.

    Sample.EFCore: database-related settings and data initialization.

    Sample.Services: data models and services for the Web APIs.

    Sample.WebApi: interfaces and controllers for the Web APIs.

Step 2: Modify and configure the Sample.Design project.

  1. Expand the Sample.Design project node, and then double click the WeatherForecast.dmedm file.

    The WeatherForecast.dmedm file is an entity design file. When you double click the file, the Entity Designer opens and loads configurations of the file.

    The Entity Designer contains 5 tabs: Field Design, Condition Design, API Design, View Settings, and Code Preview.

  2. Select the Field Design tab.

    Make sure the fields that you want to view, add, modify and delete are selected respectively as Queryable, Creatable, Updatable, and Deletable, so that the corresponding data models will be generated.

    To select all fields at once, click the arrow icon after Queryable/Creatable/Updatable and then select the check box of Select all.

  3. Select the Condition Design tab. Click Add Condition and specify the options (as shown in the following screenshot) to create a new condition.

  4. Select the API Design tab. Make sure all Basic APIs have their Generate options selected.

    Make sure the Generate option for the GetPage API for the new condition you created just now is selected.

  5. Select the View Settings tab. Expand the WeatherForecast section, and then select the condition you created just now from the Condition listbox.

    Make sure the fields that you want to view, add, modify, and delete have their List page, New page, Edit page, and Details page selected, so that these fields will be available for operation in these app pages.

    To select all fields at once, click the arrow icon after List page/New page/Edit page/Details page and then select the check box of Select all.

Step 3: Generate projects from the Sample.Design project.

  1. Right click the Sample.Design project node, and then select Generate Projects.

  2. In the Generate Projects window, click Generate.

    The following projects: Sample.Client, Sample.Common, Sample.EFCore, Sample.Services, Sample.WebApi will be updated based on the Sample.Design project.

  3. Make sure the project generation is successful.

Step 4: Run the projects.

  1. Make sure you have configured the network environment properly.

  2. Run the Sample.WebApi project to start the Web APIs first.

    When Web APIs starts, the database file (data.db) will be generated automatically.

  3. Run the Sample.Client project to start the application.

    You can explore the application to view, add, edit, or delete the data.

    You can also search for data by inputting a temperature.

Creating an order demo

Introduction

This tutorial uses a sample order application to explain how you develop applications with the low-code approach in DevMagic Studio. Please get the sample application from this link: https://github.com/DevMagicStudio/LowCode-Order-Example.

Operations

The application has a basic setup of two manufacturers, two consumers, and four products. When the application is run, it allows you to perform the following operations:

(You can jump to the Generate projects and Run projects sections and have a preview of the application pages and functions first.)

  • Add consumers (with fields: Consumer Name, Telephone)
  • Add manufacturers (with fields: Manufacturer Name, Contact Number)
  • Add products (with fields: Product Name, Manufacturer, Product Specification, Product Batch, Product Price, Product Date, Shelf Life, Shelf Life Unit)
  • Place an order. Each order contains the following information:
    • Consumer
    • Payment Type
    • Order items (including product and quantity)
  • Create statistics report (calculating the amount of orders based on the specified year and month).

The application logics cover expressions, computed columns, data correlation, query condition, and business models.

At minimum, the following data models are required: consumers, manufacturers, products, orders, and order details.

Relationships

Product <–> Manufacturer: Multiple products belong to one manufacturer. Manufacturer must be added first, and then can be selected when adding a product.

Order details <–> Products: One order details include one product. After products are added, select a consumer and add an order (select a product and add order details). The order details must be updated and saved together with the order. You cannot add, modify or query the order details separately.

Order <–> Order details: One order contains multiple order details.

Order <–> Consumer: Multiple orders belong to one consumer.

Data models and fields

Consumer: ID, name, phone number, order list

Manufacturer: name, contact number, product list

Product: ID, name, specification, unit price, batch, manufacturer, production date, shelf life

Shelf life: It can be calculated according to days, months and years.

shelf life unit: The shelf life unit is fixed values, therefore can be designed as an enumeration or data dictionary, and it will be designed as an enumeration under the model driving approach.

Order details: product, quantity, amount (unit price of product * quantity).

Order: ID (can be a meaningful number composed of date or auto-increment number), order details list, order amount (calculated using sum (the amount of order details)), consumer, payment type (this is also fixed values, and will be designed as an enumeration).

Data update constraints: A primary key is required when updating data in the database, so all data models must have a primary key; we can create a base model (including ID, insert time, update time), and other data models inherit from this model.

Monthly revenue report: Count the amount of orders, according to the specified conditions (by year and month).

The following is our recommended process for the low-code development of the application.

Create a low-code design project

In DevMagic Studio, select File > New > New project > Low-Code Project. If you have downloaded our sample application, you may open it directly in the DevMagic Studio Preview version.

Design low-code items

Design the enumeration types

Right-click the Sample.Design project and create two new “Enum design” items. In the sample application, you may open PaymentType.dme and ShelfLifeUnit.dme and see how they are designed.

The PaymentType.dme file defines four payment types as shown below.

The ShelfLifeUnit.dme file defines the unit of the shelf life as shown below.

Design the EntityBase entity

Right-click the Sample.Design project and create a new “Entity design” item. In the sample application, you may open EntityBase.dmedm and see how it is designed.

The EntityBase entity is the base class for all other entities in this application. It contains the fields that are commonly used by the other entities.

The following outlines the key steps to design the EntityBase entity:

Step 1: Set the ID field as the primary key.

Step 2: Set the default values for both InsertTime and UpdateTime to the current time using the Now() expression:

Step 3: Set all these three fields to be queryable, so that they can be displayed for view in the application.

Step 4: Set the UpdateTime field to be updatable.

Design the Product and Manufacturer entities

Right-click the Sample.Design project and create two new “Entity design” items. These two entities will be designed at the same time, because they make references to/from each other.

In the sample application, you may open the Product.dmedm and Manufacturer.dmedm files and see how they are designed.

Product entity

The Product entity contains the fields as shown below.

The following outlines the key steps to design the Product entity:

Step 1: Set the Product entity to inherit from EntityBase.

And the fields of the EntityBase entity will be shown as readonly underneath if the Show base class option is checked.

Step 2: Set the ProductNo field to be a computed column. For example,

'P'||Substr('0000'||ID,-4,4)

The product number will be generated based on the specified pattern, for example, P00001, P00002…

Step 3: Set the Manufacturer field to reference to the Manufacturer entity.

Step 4: Set the “Inverse navigation property” option of the Manufacturer field to “Products” of the Manufacturer entity, because the Product entity the Manufacturer entity has more than one relationship.

Step 5: Set the ShelfLifeUnit field to reference to the ShelfLifeUnit enumerator, and set the default value to ShelfLifeUnit.Day.

Step 6: Set all the fields to be queryable, creatable, and updatable.

Step 7: Select the Condition Design tab, and create a condition to filter data by the product expiration state and the production name or production specification.

Step 8: Specify the settings in the API Design tab and the View Settings tab.

Manufacturer entity

The Manufacturer entity contains the fields as shown below.

The following outlines the key steps to design the Manufacturer entity:

Step 1: Set the Manufacturer entity to inherit from the EntityBase.

Step 2: Set the CompanyName and ContactNumber fields to be queryable, creatable and updatable; which means you can view, create, and modify data values for these fields.

Step 3: Set the ContactNumber field to the PhoneNumber type and validate the input values with the specified expression:

^(\+|00)[0-9]{1,4}[ ,-]?[0-9]{4,14}(?:x.+)?$

Step 4: Set the Products field to reference to the Product entity; and set the field to not be queryable, creatable, nor updatable, because it is not allowed to add products when creating a manufacturer.

Step 5: Specify the settings in the API Design tab and the View Settings tab.

Design the OrderItem entity

Right-click the Sample.Design project and create a new “Entity design” item. In the sample application, you may open OrderItem.dmedm and see how it is designed.

The OrderItem entity contains the following fields:

The following outlines the key steps to design the OrderItem entity:

Step 1: Set the OrderItem entity to inherit from the EntityBase.

Step 2: Set the Product field to reference to the Product entity.

The OrderItem entity has a one-to-one relationship with the Product entity.

Step 3: Set the Amount field to be a computed column.

Step 4: Specify the settings in the API Design tab and the View Settings tab.

Design the Consumer and Order entities

Right-click the Sample.Design project and create two new “Entity design” items. These two entities will be designed at the same time, because they make references to/from each other.

In the sample application, you may open Consumer.dmedm and Order.dmedm and see how they are designed.

Order entity

The Order entity has the following fields:

The following outlines the key steps to design the Order entity:

Step 1: Set the Order entity to inherit from the EntityBase.

Step 2: Set the Orderid field to be a compute field, so that the order ID is automatically generated based on the specified pattern.

Step 3: Set the OrderItems field to reference to the OrderItem entity; select Collection for the field as one order can have and show multiple order items; select Cascading updates for the field, so that in the front-end UI, there will be a master-detail view for the order items.

Step 4: Set the OrderAmount field to be a computed column.

Step 5: Set the Purchaser field to reference to the Consumer entity; and set the Inverse navigation property option of the Purchaser field to Orders of the Consumer entity, because the Order entity and the Consumer entity has more than one relationship.

Step 6: Set the PaymentType field to reference to the PaymentType enumerator and set its default value to an expression.

Step 7: Select the Condition Design tab, and create a condition to filter data by the order payment type and the order insertion year.

Step 8: Specify the settings in the API Design tab and the View Settings tab.

Consumer entity

The Consumer entity has the following fields:

The following outlines the key steps to design the Consumer entity:

Step 1: Set the Consumer entity to inherit from the EntityBase.

Step 2: Set the Orders field to reference to the Order entity; set the field to be not queryable, creatable, nor updatable, as it is not allowed to create orders when creating a consumer; select Collection for the field as one consumer can have multiple orders, and set the Deletion strategy option for this field to Cascade Delete so that if the consumer is deleted, the corresponding orders owned by the consumer will be deleted too.

Step 3: Select the Condition Design tab, and create a condition to filter data by the consumer name or the consumer phone number.

Step 4: Specify the settings in the API Design tab and the View Settings tab.

Design the model

The report reads data from existing entities, so in DevMagic Studio, the report is a model, not entity.

Right-click the Sample.Design project and create a new “Model design” item. In the sample application, you may open OrderReport.dmmdl and see how it is designed.

The OrderReport model has only one field:

The following outlines the key steps to design the OrderReport model:

Step 1: Set the OrderAmount field to the following expression, which means the report simply gets the order amount on a monthly basis.

Step 2: Select the Condition Design tab, and create a condition to filter the data by the year and month of the order insertion time.

Step 3: Specify the settings in the API Design tab and the View Settings tab.

Set initialization data

You can create a .cs file to set the initialization data. In the sample application, you may open the Sample.EFCore project > DataSendInitilizer.cs file and see how it is scripted.

Generate projects

Right click on the Sample.Design project node and then select Generate Projects.

Run projects

After the projects are generated successfully, you can run the Sample.WebApi project to start the Web APIs first, and then run the Sample.Client project to start the application.

When the application is run, it allows you to perform the following operations:

  • Add consumers by specifying the name and phone number

  • Search consumers by inputting the name or phone number

  • Add manufacturers by specifying the name and phone number

  • Add products (by specifying Product Name, Manufacturer, Product Specification, Product Batch, Product Price, Product Date, Shelf Life, Shelf Life Unit)

  • Create orders. Each order contains the following information:

    • Purchaser

    • Payment Type

    • Order items (including product and quantity)

  • Search for orders by selecting the payment type or the year of placing the order.

  • Create a report that calculates the amount of orders based on the specified year and month.