@ -105,6 +105,12 @@ Here, you can select the database management systems (DBMS){{ if DB == "EF" }} a
If you uncheck the *Kubernetes Configuration* option, the solution will not include the Kubernetes configuration files, such as Helm charts and other Kubernetes-related files. You can also specify *Social Logins*; if you uncheck this option, the solution will not be configured for social login. Lastly, you can specify the *Include Tests* option to include or exclude the test projects from the solution.
On the next screen, you can configure the modularity options for your solution:
> If you select the *Setup as a modular solution* option, the solution is created more ready for [modular monolith development](../tutorials/modular-crm/index.md) and allows you to add sub-modules during the solution creation phase.
Now, we are ready to allow ABP Studio to create our solution. Just click the *Create* button and let the ABP Studio do the rest for you. After clicking the Create button, the dialog is closed and your solution is loaded into ABP Studio:
Configure any additional options as needed and click the *Next* button to continue. On the next screen, you can configure the modularity options for your solution:
> If you select the *Setup as a modular solution* option, the solution is created more ready for [modular monolith development](../tutorials/modular-crm/index.md) and allows you to add sub-modules during the solution creation phase.
This document contains **brief release notes** for each ABP Studio release. Release notes only include **major features** and **visible enhancements**. Therefore, they don't include all the development done in the related version.
## 1.0.2 (2025-06-24)
* Enhanced the ABP NuGet package installation experience.
* Upgraded template dependencies for ABP Framework and LeptonX. (targeting ABP `9.2.1`)
* Replaced the `System.Data` package with `Microsoft.Data`.
* Fixed a dynamic-env file path configuration issue in Angular templates.
* Disabled Pushed Authorization for MAUI applications.
* Improved the IDE experience by displaying the main project in a dedicated 'main' folder and hiding `.abppkg` files.
## 1.0.1 (2025-06-13)
* Fixed an issue with language selection during solution creation.
* Resolved a logo visibility problem in the Angular semi-dark theme.
* Added and corrected the handling of CEF (Chromium Embedded Framework) resources for the Windows version.
## 1.0.0 (2025-06-11)
* **Solution Runner with Health Checks:** ABP Studio's Solution Runner now provides visual health monitoring that makes tracking your applications' status easily.
* **Improved Multi-DbContext Migration Handling:** ABP Studio now prompts you to select the correct DbContext for migration operations when working with multiple DbContexts.
* **Theme Style Selection on Project Creation:** When creating a new solution, you can now choose your theme, theme style, and layout right from the project creation wizard instead of having to configure these settings later.
* **Solution & Module Creation:** Introduced major enhancements, including language selection, database provider choice for microservices, improved folder handling, theme visualization, and better module installation recommendations.
* **MAUI & Blazor:** Configured the new MAUI/Blazor bundling system, added dashboard pages to MAUI projects, and applied various fixes for themes and dependencies.
* **Solution Runner & Docker:** Added Docker container support to the solution runner, enabling users to add and manage containers within run profiles.
* **Authentication & Authorization:** Fixed Swagger authentication, and added dynamic claims support for microservices.
* **ABP Studio Login:** Improved login flows with selecting account and organization support.
* **Language Selection:** Added language selection during solution creation. You can now include only the languages you need in your project.
* **Performance:** Sped up the development cycle by skipping package restores during project runs when no dependencies have changed.
* **Dependency Updates:** Upgraded ABP Framework, LeptonX, and other Microsoft dependencies to the latest versions. (targeting ABP `9.2.0`)
* **User Experience:** Implemented several UI/UX improvements, such as remembering user choices in wizards and sorting items alphabetically.
* **Testing & Internals:** Switched to `MongoSandbox` for integration tests, improved local development against abp.io websites, and made various fixes to CI/CD workflows.
## 0.9.26 (2025-04-30)
* Fixed the issue where C# applications would not stop when requested.
@ -34,11 +34,14 @@ You can use the following configurations:
* **Database Provider:** {{DB_Value}}
* **Public Website:** No
* **Tiered:** No
* **Sample Crud Page:** No
You can select the other options based on your preference.
> **Please complete the [Get Started](../../get-started/layered-web-application.md) guide and run the web application before going further.**
> **Please do not check the `Sample Crud Page` option while creating the solution, since it conflicts with this tutorial.**
## Summary
We've created the initial layered monolith solution. In the next part, we will learn how to create entities, and generate CRUD pages based on the specified options (including tests, UI, customizable code support etc.) with [ABP Suite](../../suite/index.md).
@ -128,7 +128,7 @@ It will take some time to complete the process. After the process is completed,
{{ end }}
After the application is started, you can right-click and *Browse* on the application to open it in the ABP Studio's pre-integrated browser. You can see the Books page in the following figure with a single record:
After the application is started, you can right-click and *Browse* on the application to open it in the ABP Studio's pre-integrated browser. After logging in using the default credentials (`admin` / `1q2w3E*`), you can see the Books page in the following figure with a single record:
* Selected the display property as *Name*, this will be used in the dropdown component to set an author with a book & also it will be shown in the datatable of the *Books* page.
* Also, made the relation **required** and set it **filterable** so books can be filterable by authors.
> **Note**: You should delete all existing books in the database (if any), before the code generation. Because, a new foreign-key will be added to the _books_ table and if there is any record in the table, then a new migration can't apply to the database and you may need to update the database manually.
> **Note**: You should delete all existing books in the database (if any), before the code generation. Because, a new foreign-key will be added to the _books_ table and if there is any record in the table, then a new migration can't apply to the database and you may need to update the database manually. Deleting existing records from UI will not be enough because of soft-delete, therefore you will have to delete the records manually.
After, specifying the metadata, you can click the *Ok* button to close the modal. Then, click the **Save and generate** button to start code generation process. ABP Suite will establish one-to-many relationship between the entities, and will generate all necessary code automatically:
@ -101,6 +101,8 @@ The final folder/file structure should be as shown below:
EF Core requires that you relate the entities with your `DbContext`. The easiest way to do so is adding a `DbSet` property to the `BookStoreDbContext` class in the `Acme.BookStore.EntityFrameworkCore` project, as shown below:
````csharp
using Acme.BookStore.Books;
public class BookStoreDbContext : AbpDbContext<BookStoreDbContext>
@ -30,7 +38,7 @@ This tutorial is organized as the following parts:
## Download the Source Code
After logging in to the ABP website, you can download the source code from [here](https://abp.io/api/download/samples/cloud-crm-mvc-ef).
After logging in to the ABP website, you can download the source code from {{if UI == "MVC"}} [here](https://abp.io/api/download/samples/cloud-crm-mvc-ef) {{else if UI == "NG"}} [here](https://abp.io/api/download/samples/cloud-crm-ng-ef) {{else if UI == "Blazor"}} [here](https://abp.io/api/download/samples/cloud-crm-blazor-wasm-ef) {{else if UI == "BlazorServer"}} [here](https://abp.io/api/download/samples/cloud-crm-blazor-server-ef) {{else if UI == "BlazorWebApp"}} [here](https://abp.io/api/download/samples/cloud-crm-blazor-webapp-ef) {{end}}.
Follow the *[Get Started](../../get-started/microservice.md)* guide to create a new layered web application with the following configurations:
* **Solution name**: `CloudCrm`
{{if DB == "EF"}}
* **Database Provider**: Entity Framework Core
* **Database Management System**: SQL Server
{{end}}
{{if DB == "Mongo"}}
* **Database Provider**: MongoDB
{{end}}
{{if UI == "MVC"}}
* **UI Framework**: MVC / Razor Pages
{{end}}
{{if UI == "Blazor"}}
* **UI Framework**: Blazor WebAssembly
{{end}}
{{if UI == "BlazorServer"}}
* **UI Framework**: Blazor Server
{{end}}
{{if UI == "BlazorWebApp"}}
* **UI Framework**: Blazor Web App
{{end}}
{{if UI == "NG"}}
* **UI Framework**: Angular
{{end}}
* **Mobile framework**: None
* **Public website**: Selected
You can select the other options based on your preference.
> **Please complete the *[Get Started](../../get-started/microservice.md)* guide and run the applications before going further.** You can skip the sections after the *Running the Solution* section, if you don't prefer to complete all.
> **Please complete the *[Get Started](../../get-started/layered-web-application.md)* guide and run the web application before going further.** You can skip the sections after the *Running the Solution* section, if you don't prefer to complete all.
The initial solution structure should be like the following in ABP Studio's *[Solution Explorer](../../studio/solution-explorer.md)*:
> ABP Studio will perform a few additional steps after creating your solution. **Please wait until all the background tasks are completed** before going further.
@ -37,4 +75,4 @@ You can see the *[Microservice Solution Template](../../solution-templates/micro
## Summary
In this part, you've created the initial microservice solution, which already contains a few infrastructure services. We will create our first business service in the [next part](part-02.md).
In this part, you've created the initial microservice solution, which already contains a few infrastructure services. We will create our first business service in the [next part](part-02.md).
This command opens a new dialog to define the properties of the new microservice. You can use the following values to create a new microservice named `CatalogService`:
ABP Studio intelligently selects the right values for you, but you should still check them carefully since they directly affect what we will do in the next parts of this tutorial.
Select *Entity Framework Core* option and proceed the *Next* step.
**Ensure the options are configured the same as in the preceding figure**, and click the *Next* button.
ABP Studio intelligently selects the right values for you, but you should still check them carefully since they directly affect what we will do in the next parts of this tutorial.
**Ensure the options are configured the same as in the preceding figure**, and click the *Next* button.
## Exploring the New Catalog Microservice
In this section, we will investigate the new microservice in overall.
@ -62,7 +91,7 @@ In this section, we will investigate the new microservice in overall.
The new microservice is added under the `services` folder in the `CloudCrm` ABP Studio solution:
The new microservice has its own separate .NET solution that includes three packages (.NET projects):
@ -74,11 +103,11 @@ The new microservice has its own separate .NET solution that includes three pack
You can open the new microservice in your favorite IDE for development. As a shortcut, you can right-click it in ABP Studio, select the *Open with* -> *Visual Studio* command for example:
The `CloudCrm` microservice solution contains more than one .NET solution. Typically, each ABP Studio module represents a separate .NET solution (see the [concepts](../../studio/concepts.md) document). ABP Suite works on a single .NET solution to generate code, so we should select a module here.
Select the `CloudCrm.CatalogService` module and click the *OK* button. It will open ABP Suite as shown below:
In the next section, we will use ABP Suite to create a fully functional CRUD page with ABP Suite. The UI part will be in the main web application (`CloudCrm.Web`) and the application service and other parts will be generated in the Catalog microservice.
In the next section, we will use ABP Suite to create a fully functional CRUD page with ABP Suite. The UI part will be in the main web application (`{{if UI == "MVC"}} `CloudCrm.Web` {{else if UI == "BlazorServer" || UI == "Blazor" || UI == "BlazorWebApp"}} `CloudCrm.Blazor` {{else}} `Angular` {{end}}`) and the application service and other parts will be generated in the Catalog microservice.
### Configuring the Product Entity Information
@ -71,7 +79,7 @@ That's all. You can click the *Save and generate* button to start the code gener
ABP Suite will generate the necessary code for you. It will take some time to complete the process. After the process is completed, you will see a success message, click the *OK* button.
We can now start the `CloudCrm.CatalogService` application by clicking the *Start* button (or alternatively, directly clicking the *run* icon) in the *Solution Runner* panel.
@ -79,39 +87,65 @@ We can now start the `CloudCrm.CatalogService` application by clicking the *Star
After the application is started, you can right-click and [Browse](../../studio/running-applications.md#monitoring) on the `CloudCrm.CatalogService` application to open it in the ABP Studio's pre-integrated browser. You can see the *Products* controller in the Swagger UI.
{{if UI == "NG"}}
### Generating the UI Proxy
Now, we need to generate the [Static API Proxy](../../framework/api-development/static-csharp-clients.md) for the *Web* project. Right-click the *CloudCrm.Web* [package](../../studio/concepts.md#package) and select the *ABP CLI* -> *Generate Proxy* -> *C#* command:
ABP Suite automatically generates the UI proxy for the `Angular` project. If you want to create manually, run this command under the `Angular` project folder:
```bash
abp generate-proxy -t ng -m catalog -u http://localhost:44384 --target catalog-service
For more information, please refer to the [Service Proxies](https://abp.io/docs/latest/framework/ui/angular/service-proxies) documentation.
{{end}}
It will open the *Generate C# Proxies* window. Select the `CloudCrm.CatalogService` application, and it will automatically populate the *URL* field. Select the *catalog* module, set the service type to *application*, and check the *Without contracts* checkbox, as the `CloudCrm.Web` project already depends on the `CloudCrm.CatalogService.Contracts` package:
> To be able to select the *Application*, you must *Start* the related application beforehand. You can start the application using [Solution Runner](../../studio/running-applications.md) as explained in the previous parts.
Now, we need to generate the [Static API Proxy](../../framework/api-development/static-csharp-clients.md) for the UI project. Since we are using `BlazorWebApp`, we will generate client proxies in both the `CloudCrm.Blazor` and `CloudCrm.Blazor.Client` projects, as pages are sometimes rendered on the server side and sometimes on the client side.
Lastly, we need to configure the use of a static HTTP client for the `CatalogService` in the `CloudCrm.Web` project. Open the `CloudCrmWebModule.cs` file in the `Web` project and add the following line to the `ConfigureServices` method:
This will open the Generate C# Proxies window. Select the `CloudCrm.CatalogService` application this will automatically fill in the *URL* field. Next, choose the catalog module, set the service type to *Application*, and check the *Without contracts* option, since the `CloudCrm.Blazor` project already references the `CloudCrm.CatalogService.Contracts` package.
This will open the Generate C# Proxies window. Select the `CloudCrm.CatalogService` application this will automatically fill in the *URL* field. Next, choose the catalog module, set the service type to *Application*, and check the *Without contracts* option, since the `CloudCrm.Blazor.Client` project already references the `CloudCrm.CatalogService.Contracts` package.
{{else}}
Now, we need to generate the [Static API Proxy](../../framework/api-development/static-csharp-clients.md) for the UI project. Right-click the {{if UI == "MVC"}} `CloudCrm.Web` {{else if UI == "BlazorServer"}} `CloudCrm.Blazor` {{else if UI == "Blazor"}} `CloudCrm.Blazor.Client` {{end}} [package](../../studio/concepts.md#package) and select the *ABP CLI* -> *Generate Proxy* -> *C#* command:
It will open the *Generate C# Proxies* window. Select the `CloudCrm.CatalogService` application, and it will automatically populate the *URL* field. Select the *catalog* module, set the service type to *application*, and check the *Without contracts* checkbox, as the {{if UI == "MVC"}} `CloudCrm.Web` {{else}} `CloudCrm.Blazor` {{end}} project already depends on the `CloudCrm.CatalogService.Contracts` package:
> To be able to select the *Application*, you must *Start* the related application beforehand. You can start the application using [Solution Runner](../../studio/running-applications.md) as explained in the previous parts.
{{end}}
public override void ConfigureServices(ServiceConfigurationContext context)
Now, stop any application running in the *Solution Runner* panel, and then run the applications by clicking the *Start All* button on the root item in the *Solution Runner* panel:
After the application is started, you can right-click and [Browse](../../studio/running-applications.md#monitoring) on the `CloudCrm.Web` application to open it in the ABP Studio's pre-integrated browser:
After the application is started, you can right-click and [Browse](../../studio/running-applications.md#monitoring) on the {{if UI == "MVC"}} `CloudCrm.Web` {{else if UI == "NG"}} `CloudCrm.Angular` {{else}} `CloudCrm.Blazor` {{end}} application to open it in the ABP Studio's pre-integrated browser:
@ -125,4 +159,4 @@ You can open the Sql Server Management Studio to see the created tables and data
## Summary
In this part, we've created a new entity named *Product* and generated the necessary code for it. We've also generated the UI proxy for the `CatalogService` application and configured the static HTTP client for it in the `Web` project. We've run the application and tested the *Products* page.
In this part, we've created a new entity named *Product* and generated the necessary code for it. We've also generated the UI proxy for the `CatalogService` application and configured the static HTTP client for it in the {{if UI == "MVC"}} `CloudCrm.Web` {{else if UI == "BlazorServer"}} `CloudCrm.Blazor` {{else}} `CloudCrm.Blazor.Client` {{end}} project. We've run the application and tested the *Products* page.
This command opens a new dialog to define the properties of the new microservice. You can use the following values to create a new microservice named `OrderingService`:
ABP Studio intelligently selects the right values for you, but you should still check them carefully since they directly affect what we will do in the next parts of this tutorial.
Select *Entity Framework Core* option and proceed the *Next* step.
**Ensure the options are configured the same as in the preceding figure**, and click the *Next* button.
ABP Studio intelligently selects the right values for you, but you should still check them carefully since they directly affect what we will do in the next parts of this tutorial.
**Ensure the options are configured the same as in the preceding figure**, and click the *Next* button.
## Exploring the New Ordering Microservice
In this section, we will investigate the new microservice in overall.
@ -62,7 +91,7 @@ In this section, we will investigate the new microservice in overall.
Just like the Catalog microservice, the Ordering microservice is a .NET solution that contains multiple projects. You can see the solution structure in the *Solution Explorer* panel:
* `CloudCrm.OrderingService` is the main project that you will implement your service. It typically contains your [entities](../../framework/architecture/domain-driven-design/entities.md), [repositories](../../framework/architecture/domain-driven-design/repositories.md), [application services](../../framework/architecture/domain-driven-design/application-services.md), API controllers, etc.
* `CloudCrm.OrderingService.Contracts` project can be shared with the other services and applications. It typically contains interfaces of your [application services](../../framework/architecture/domain-driven-design/application-services.md), [data transfer objects](../../framework/architecture/domain-driven-design/data-transfer-objects.md), and some other types you may want to share with the clients of this microservice.
@ -76,13 +105,13 @@ You can run the solution using ABP Studio's *Solution Runner*. It will also run
Click the *Play* button near to the solution root:
After the application is started, you can right-click and [Browse](../../studio/running-applications.md#monitoring) on the `CloudCrm.OrderingService` application to open it in the ABP Studio's pre-integrated browser. You can see the *Orders* controller in the Swagger UI:
@ -18,7 +26,7 @@ In the previous part, we created the Ordering microservice. In this part, we wil
## Creating the Order Entity
We will start by creating the `Order` entity, which will represent an order in our system. We'll add this entity to the `CloudCrm.OrderingService` project. Create a new folder named `Entities` and add a class named `Order` inside it:
We will start by creating the `Order` entity, which will represent an order in our system. We'll add this entity to the `CloudCrm.OrderingService` project. Create a new folder named `Entities` and create a file `Order.cs` inside it:
```csharp
using CloudCrm.OrderingService.Enums;
@ -38,7 +46,7 @@ To keep this example simple, we allow users to include only a single product wit
### Adding the OrderState Enum
We also need to define the `OrderState` enum. In the `CloudCrm.OrderingService.Contracts` project, create a folder named `Enums` and add an `OrderState` enum inside it:
We also need to define the `OrderState` enum. In the `CloudCrm.OrderingService.Contracts` project, create a folder named `Enums` and create a file `OrderState.cs` inside it:
```csharp
namespace CloudCrm.OrderingService.Enums;
@ -53,7 +61,7 @@ public enum OrderState : byte
The final solution structure should look like this:
The changes will be applied to the database during the next application startup. For more details, refer to the [database migrations on service startup](../../solution-templates/microservice/database-configurations.md#database-migrations-on-service-startup) section.
@ -198,7 +206,7 @@ public class OrderDto
The final solution structure should look like this:
@ -269,7 +277,7 @@ public class OrderingServiceApplicationAutoMapperProfile : Profile
Now, we can test the `OrderAppService` class using the Swagger UI. Open the Solution Runner and right-click to `CloudCrm.OrderingService` project and select the *Start* command. After the application starts, you can open the Swagger UI by clicking to the [Browse](../../studio/running-applications.md#monitoring) command:
Expand the `api/ordering/order` API and click the *Try it out* button. Then, create a few orders by filling in the request body and clicking the *Execute* button:
@ -283,6 +291,7 @@ If you check the database, you should see the entities created in the `Orders` t
## Creating the User Interface
{{if UI == "MVC"}}
Now, we will create the user interface for the Ordering module. We will use the `CloudCrm.Web` project to create the user interface. Open the `CloudCrm.Web` .NET solution in your favorite IDE.
### Creating the Orders Page
@ -339,38 +348,120 @@ Here, we inject the `IOrderAppService` into the `Index` Razor Page. We use this
```
This page shows a list of orders on the UI. We haven't created a UI to create new orders, and we will not do it to keep this tutorial simple. If you want to learn how to create advanced UIs with ABP, please follow the [Book Store tutorial](../../tutorials/book-store/index.md).
To select the *Application* during proxy generation, ensure that the `CloudCrm.OrderingService` is *Started* beforehand. You can start the application using [Solution Runner](../../studio/running-applications.md).
Now, we will create the user interface for the Ordering module. We will use the {{if UI == "BlazorServer"}} `CloudCrm.Blazor.Server` {{else}} `CloudCrm.Blazor.Client` {{end}} project to create the user interface. Open the {{if UI == "BlazorServer"}} `CloudCrm.Blazor.Server` {{else}} `CloudCrm.Blazor.Client` {{end}} .NET solution in your favorite IDE.
Now, we need to generate the [Static API Proxy](../../framework/api-development/static-csharp-clients.md) for the *Web* project. Right-click the *CloudCrm.Web* [package](../../studio/concepts.md#package) and select the *ABP CLI* -> *Generate Proxy* -> *C#* command:
It will open the *Generate C# Proxies* window. Select the `CloudCrm.OrderingService` application, and it will automatically populate the *URL* field. Choose the *ordering* module and service type is *application* lastly check the *Without contracts* checkbox, since we already have a dependency on the `CloudCrm.OrderingService.Contracts` package in the `CloudCrm.Web` project:
Create `Orders.razor` file under the `Components/Pages` folder in the `CloudCrm.Blazor.Server` project.
Lastly, we need to configure the use of a static HTTP client for the `OrderingService` in the `CloudCrm.Web` project. Open the `CloudCrmWebModule.cs` file in the `Web` project and add the following line to the `ConfigureServices` method:
Create `Orders.razor` file under the `Pages` folder in the `CloudCrm.Blazor.Client` project.
```csharp
//...
using CloudCrm.OrderingService;
{{end}}
public override void ConfigureServices(ServiceConfigurationContext context)
To select the *Application* during proxy generation, ensure that the `CloudCrm.OrderingService` is *Started* beforehand. You can start the application using [Solution Runner](../../studio/running-applications.md).
{{if UI == "BlazorWebApp"}}
Now, we need to generate the [Static API Proxy](../../framework/api-development/static-csharp-clients.md) for the UI project. Since we are using `BlazorWebApp`, we will generate client proxies in both the `CloudCrm.Blazor` and `CloudCrm.Blazor.Client` projects, as pages are sometimes rendered on the server side and sometimes on the client side.
This will open the Generate C# Proxies window. Select the `CloudCrm.CatalogService` application this will automatically fill in the *URL* field. Next, choose the catalog module, set the service type to *Application*, and check the *Without contracts* option, since the `CloudCrm.Blazor` project already references the `CloudCrm.CatalogService.Contracts` package.
This will open the Generate C# Proxies window. Select the `CloudCrm.CatalogService` application this will automatically fill in the *URL* field. Next, choose the catalog module, set the service type to *Application*, and check the *Without contracts* option, since the `CloudCrm.Blazor.Client` project already references the `CloudCrm.CatalogService.Contracts` package.
{{else}}
Now, we need to generate the [Static API Proxy](../../framework/api-development/static-csharp-clients.md) for the UI project. Right-click the {{if UI == "MVC"}} `CloudCrm.Web` {{else if UI == "BlazorServer"}} `CloudCrm.Blazor.Server` {{else if UI == "Blazor"}} `CloudCrm.Blazor.Client` {{end}} [package](../../studio/concepts.md#package) and select the *ABP CLI* -> *Generate Proxy* -> *C#* command:
It will open the *Generate C# Proxies* window. Select the `CloudCrm.OrderingService` application, and it will automatically populate the *URL* field. Choose the *ordering* module and service type is *application* lastly check the *Without contracts* checkbox, since we already have a dependency on the `CloudCrm.OrderingService.Contracts` package in the {{if UI == "MVC"}} `CloudCrm.Web` {{else if UI == "BlazorServer"}} `CloudCrm.Blazor.Server` {{else if UI == "Blazor"}} `CloudCrm.Blazor.Client` {{end}} project:
> ABP provides a modular navigation [menu system](../../framework/ui/mvc-razor-pages/navigation-menu.md) that allows you to define the menu items in a modular way.
Finally, we need to add a menu item to the sidebar to navigate to the `Orders` page. Open the `CloudCrmMenus` file in the `Navigation` folder of the `CloudCrm.Web` project and edit with the following code:
Finally, we need to add a menu item to the sidebar to navigate to the `Orders` page. Open the `CloudCrmMenus` file in the `Navigation` folder of the {{if UI == "MVC"}} `CloudCrm.Web` {{else}} `CloudCrm.Blazor.Client` {{end}} project and edit with the following code:
```csharp
namespace CloudCrm.Web.Navigation;
@ -391,7 +482,7 @@ public class CloudCrmMenus
}
```
Then, open the `CloudCrmMenuContributor` class in the `CloudCrm.Web` project, located in the `Navigation` folder, and add the following code to `ConfigureMainMenuAsync` method:
Then, open the `CloudCrmMenuContributor` class in the {{if UI == "MVC"}} `CloudCrm.Web` {{else}} `CloudCrm.Blazor` {{end}} project, located in the `Navigation` folder, and add the following code to `ConfigureMainMenuAsync` method:
* Open the `projects/ordering-service/config/src/ordering-service-config.module.ts` file and add `ORDERS_ORDER_ROUTE_PROVIDER` to the `providers` array as following code:
*ordering-service-config.module.ts*
```typescript
import { ModuleWithProviders, NgModule } from '@angular/core';
import { ORDERING_SERVICE_ROUTE_PROVIDERS } from './providers/route.provider';
import { ORDERS_ORDER_ROUTE_PROVIDER } from './providers/order-route.provider';
* Create `order.component.html` file under the `projects/ordering-service/src/lib/order` folder as following code:
```html
<divclass="card">
<divclass="card-body">
<tableclass="table table-bordered">
<thead>
<tr>
<th>Order ID</th>
<th>Product Id</th>
<th>Customer Name</th>
</tr>
<tr*ngFor="let item of items">
<td>{%{{{item.id}}}%}</td>
<td>{%{{{item.productId}}}%}</td>
<td>{%{{{item.customerName}}}%}</td>
</tr>
</thead>
</table>
</div>
</div>
```
{{end}}
## Building and Running the Application
Now, we can run the application to see the changes. Please stop the applications if they are running. Then open the *Solution Runner* panel, right-click the `CloudCrm` root item, and select the *Start* command:
@ -22,7 +30,7 @@ In this section, we will integrate the Ordering service with the Catalog service
In a microservices architecture, each service is responsible for its own data and business logic. However, services often need to communicate with each other to fulfill their responsibilities. This communication can be synchronous or asynchronous, depending on the requirements.
In our case, the Ordering service needs to display the product name instead of the product ID. To achieve this, we need to call the Catalog service to retrieve the product details based on the product ID. This is a typical example of a synchronous communication pattern between microservices. As a solution to that problem, we will use an [integration service](../../framework/api-development/integration-services.md) that will handle the communication with the Catalog service. Integration service concept in ABP is designed for request/response style inter-module (in modular applications) and inter-microservice (in distributed systems) communication.
@ -111,11 +119,11 @@ Now that we have created the `IProductIntegrationService` interface and the `Pro
First, we need to add a reference to the `CloudCrm.OrderingService` package in the Ordering service. Open the ABP Studio, and stop the application(s) if it is running. Then, open the *Solution Explorer* and right-click on the `CloudCrm.OrderingService` package. Select *Add* -> *Package Reference* command:
In the *Add Package Reference* window, select the `CloudCrm.CatalogService.Contracts` package from the *This solution* tab. Click the *OK* button to add the reference:
ABP Studio adds the package reference and arranges the [module](../../framework/architecture/modularity/basics.md) dependency.
@ -236,25 +244,13 @@ Let's explain the changes we made:
We have created the `IProductIntegrationService` interface and the `ProductIntegrationService` class in the `CloudCrm.CatalogService` solution. Now, we need to generate the proxy classes for the integration service in the `CloudCrm.OrderingService` package. First, *Start* the `CloudCrm.CatalogService` application in ABP Studio *Solution Runner*. Then, open the *Solution Explorer* and right-click on the `CloudCrm.OrderingService` package. Select the *ABP CLI* -> *Generate Proxy* -> *C#* command:
It opens the *Generate C# proxies* window. Select the `CloudCrm.CatalogService` application from the *Application* dropdown list. Then, choose the *catalog* module from the *Module* dropdown list and choose the *integration* service from the *Service type* dropdown list. Check the *Without contracts* checkbox and click the *Generate* button:
We have generated the proxy classes for the `IProductIntegrationService` interface. Now, we must add the *Remote Service* url to the `appsettings.json` file of the `CloudCrm.OrderingService` project. Open the `appsettings.json` file (the `appsettings.json` file of the `CloudCrm.OrderingService` project of the `CloudCrm.OrderingService` .NET solution) and add the *CatalogService* section following configuration:
```json
{
"RemoteServices": {
"CatalogService": {
"BaseUrl": "http://localhost:44334"
}
}
}
```
> **BaseUrl** refers to the base URL of the Catalog service. You can use the *Copy Url* option from the Catalog service's context menu in the ABP Studio **Solution Runner** to paste it here.
Proxy classes for the `IProductIntegrationService` interface have been generated.
Lastly, open the `CloudCrmOrderingServiceModule` class (the `CloudCrmOrderingServiceModule.cs` file under the `CloudCrm.OrderingService` project of the `CloudCrm.OrderingService` .NET solution) and add the following code to the `ConfigureServices` method:
@ -271,6 +267,8 @@ public override void ConfigureServices(ServiceConfigurationContext context)
### Updating the UI to Display the Product Name
{{if UI == "MVC"}}
Open the `Index.cshtml` file (the `Index.cshtml` file under the `Pages/Orders` folder of the `CloudCrm.Web` project of the `CloudCrm.Web` .NET solution) and update the table content to display the product name instead of the product ID:
```html
@ -295,9 +293,53 @@ Open the `Index.cshtml` file (the `Index.cshtml` file under the `Pages/Orders` f
</abp-card>
```
{{else if UI == "NG"}}
Open the `order.component.html` file (the `order.component.html` file under the `angular\projects\ordering-service\src\lib\order`) and update the table content to display the product name instead of the product ID:
Open the `Orders.razor` file (the `Orders.razor` file under the {{if UI == "BlazorServer"}} `CloudCrm.Blazor\Pages` {{else}} `CloudCrm.Blazor.Client\Pages` {{end}} and update the table content to display the product name instead of the product ID:
Now, the Ordering service displays the product name instead of the product ID. We have successfully integrated the Ordering service with the Catalog service using HTTP API calls.
@ -318,4 +360,4 @@ Open the `etc\helm\cloudcrm\charts\ordering\templates\ordering.yaml` file in a t
value: "http://{%{{{ .Release.Name }}}%}-catalog"
````
With this simple configuration, now the Ordering module can discover the catalog microservice's URL inside your Kubernetes cluster.
With this simple configuration, now the Ordering module can discover the catalog microservice's URL inside your Kubernetes cluster.
@ -135,21 +143,21 @@ Since the `OrderPlacedEto` class is in the `CloudCrm.OrderingService.Contracts`
Open the ABP Studio UI and stop the applications if they are running. Then, open the *Solution Explorer* panel and right-click on the `CloudCrm.CatalogService`. Select *Import Module* from the context menu:
In the opening dialog, find and select the `CloudCrm.OrderingService` module, check the *Install this module* option, click the *OK* button:
Here, select the `CloudCrm.OrderingService.Contracts` package on the left side (because we want to add that package reference) and `CloudCrm.CatalogService` package on the middle area (because we want to add the package reference to that project).
You can check the ABP Studio's *Solution Explorer* panel to see the module and the project reference (dependency):
@ -205,7 +213,7 @@ To keep this tutorial simple, we will not implement a user interface for creatin
Once the application is running and ready, [Browse](../../studio/running-applications.md#c-application) the `CloudCrm.OrderingService` application. Use the `POST /api/ordering/order` endpoint to create a new order:
Find the *Order* API, click the *Try it out* button, enter a sample value the *Request body* section, and click the *Execute* button:
@ -218,9 +226,9 @@ Find the *Order* API, click the *Try it out* button, enter a sample value the *R
> **IMPORTANT:** Here, you should type a valid Product Id from the Products table of your database!
Once you press the *Execute* button, a new order is created. At that point, you can check the `/Orders` page to see if the new order is listed. You can also check the `/Products` page to see if the stock count of the related product is decreased by one in the `CloudCrm.Web` application.
Once you press the *Execute* button, a new order is created. At that point, you can check the `/Orders` page to see if the new order is listed. You can also check the `/Products` page to see if the stock count of the related product is decreased by one in the {{if UI == "MVC"}} `CloudCrm.Web` {{else if UI == "NG"}} `Angular` {{else}} `CloudCrm.Blazor` {{end}} application.
Here are sample screenshots from the Orders and Products pages of the `CloudCrm.Web` application:
Here are sample screenshots from the Orders and Products pages of the {{if UI == "MVC"}} `CloudCrm.Web` {{else if UI == "NG"}} `Angular` {{else}} `CloudCrm.Blazor` {{end}} application:
public class OrderAppService : OrderingAppService, IOrderAppService
{
@ -163,22 +163,21 @@ You can check the ABP Studio's *Solution Explorer* panel to see the module impor
Now, it is possible to use the `OrderPlacedEto` class inside the Catalog module since it has the `ModularCrm.Ordering.Contracts` package reference.
Open the Catalog module's .NET solution in your IDE, locate the `ModularCrm.Catalog` project, and create a new `Orders` folder and an `OrderEventHandler` class inside that folder. The final folder structure should be like this:
Open the Catalog module's .NET solution in your IDE, locate the `ModularCrm.Catalog` project, and create a new `EventHandlers` folder and an `OrderEventHandler` class inside that folder. The final folder structure should be like this:
@ -40,7 +40,7 @@ In this section, we will create an application service in the main application's
Open the main `ModularCrm` .NET solution in your IDE, create an `Orders` folder under the `Services` folder and add an `IOrderReportingAppService` interface. Here is the definition of that interface:
````csharp
using ModularCrm.Orders;
using ModularCrm.Services.Dtos.Orders;
using Volo.Abp.Application.Services;
namespace ModularCrm.Services.Orders;
@ -51,13 +51,12 @@ public interface IOrderReportingAppService : IApplicationService
}
````
We have a single method, `GetLatestOrders`, that will return a list of the latest orders. We should also define the `OrderReportDto` class that that method returns. Create the `Orders` folder under the `Services/Dtos` folder and create a class named `OrderReportDto`.
We have a single method, `GetLatestOrders`, that will return a list of the latest orders. We should also define the `OrderReportDto` class that method returns. Create the `Orders` folder under the `Services/Dtos` folder and create a class named `OrderReportDto`.
````csharp
using System;
using ModularCrm.Ordering;
namespace ModularCrm.Orders;
namespace ModularCrm.Services.Dtos.Orders;
public class OrderReportDto
{
@ -87,11 +86,10 @@ Open the `OrderReportingAppService.cs` file and change its content by the follow
````csharp
using ModularCrm.Catalog;
using ModularCrm.Ordering;
using ModularCrm.Services;
using ModularCrm.Services.Orders;
using ModularCrm.Services.Dtos.Orders;
using Volo.Abp.Domain.Repositories;
namespace ModularCrm.Orders;
namespace ModularCrm.Services.Orders;
public class OrderReportingAppService :
ModularCrmAppService,
@ -114,16 +112,16 @@ public class OrderReportingAppService :
var products = await _productRepository.GetQueryableAsync();
var latestOrders = (from order in orders
join product in products on order.ProductId equals product.Id
orderby order.CreationTime descending
select new OrderReportDto
{
OrderId = order.Id,
CustomerName = order.CustomerName,
State = order.State,
ProductId = product.Id,
ProductName = product.Name
})
join product in products on order.ProductId equals product.Id
orderby order.CreationTime descending
select new OrderReportDto
{
OrderId = order.Id,
CustomerName = order.CustomerName,
State = order.State,
ProductId = product.Id,
ProductName = product.Name
})
.Take(10)
.ToList();
@ -150,7 +148,7 @@ Open the ABP Studio UI, stop the application if it is running, build and run it
You should get the order objects with product names.
Alternatively, you can visit the `/api/app/order-reporting/latest-orders` URL to directly execute the HTTP API on the browser (you should write the full URL, like `https://localhost:44303/api/app/order-reporting/latest-orders` - port can be different for your case)
Alternatively, you can visit the `/api/app/order-reporting/latest-orders` URL to directly execute the HTTP API on the browser (you should write the full URL, like `https://localhost:44303/api/app/order-reporting/latest-orders` - the **port number** can be different for your case)
@ -160,7 +160,7 @@ Please note that the **search component** filters only the routes and cannot hid
### Download Lepton Theme Source-Code
Download the Lepton Theme source-code to retrieve the existing CSS files. To do this create a new folder named as `LeptonTheme` and run the following ABP CLI command inside the `LeptonTheme` folder:
Download the Lepton Theme source-code to retrieve the existing CSS files. To do this create a new folder named as `LeptonTheme`in your project root folder and run the following ABP CLI command inside the `LeptonTheme` folder:
```bash
abp get-source Volo.LeptonTheme
@ -238,4 +238,4 @@ The main menu's background color changed. With this approach, you can change you
maliming
7 months ago
