diff --git a/docs/en/tutorials/microservice/images/abp-studio-abp-suite-inside-dark.png b/docs/en/tutorials/microservice/images/abp-studio-abp-suite-inside-dark.png new file mode 100644 index 0000000000..f17e8976a0 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-abp-suite-inside-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-entity-framework-core-migration-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-entity-framework-core-migration-dark.png new file mode 100644 index 0000000000..c213562f4c Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-entity-framework-core-migration-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-command-2-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-command-2-dark.png new file mode 100644 index 0000000000..b15fe2480f Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-command-2-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-command-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-command-dark.png new file mode 100644 index 0000000000..bf81eb6f21 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-command-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-2-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-2-dark.png new file mode 100644 index 0000000000..ca7f344a59 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-2-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-additional-options-step-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-additional-options-step-dark.png new file mode 100644 index 0000000000..598b12678a Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-additional-options-step-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-dark.png new file mode 100644 index 0000000000..411709c342 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-database-management-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-database-management-dark.png new file mode 100644 index 0000000000..d2ce4aeecd Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-database-management-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-database-step-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-database-step-dark.png new file mode 100644 index 0000000000..9ad072470c Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-database-step-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-database-step-mongo-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-database-step-mongo-dark.png new file mode 100644 index 0000000000..d65aa12745 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-database-step-mongo-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-integration-step-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-integration-step-dark.png new file mode 100644 index 0000000000..06ab297fdf Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-integration-step-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-integration-step-ng-dark.png b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-integration-step-ng-dark.png new file mode 100644 index 0000000000..d4f445acef Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-integration-step-ng-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-browse-catalog-service-dark.png b/docs/en/tutorials/microservice/images/abp-studio-browse-catalog-service-dark.png new file mode 100644 index 0000000000..4c96c58094 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-browse-catalog-service-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-browse-ordering-service-dark.png b/docs/en/tutorials/microservice/images/abp-studio-browse-ordering-service-dark.png new file mode 100644 index 0000000000..04c8d03e23 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-browse-ordering-service-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-browser-catalog-service-swagger-ui-dark.png b/docs/en/tutorials/microservice/images/abp-studio-browser-catalog-service-swagger-ui-dark.png new file mode 100644 index 0000000000..e533578c26 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-browser-catalog-service-swagger-ui-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-catalog-service-start-dark.png b/docs/en/tutorials/microservice/images/abp-studio-catalog-service-start-dark.png new file mode 100644 index 0000000000..3028270674 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-catalog-service-start-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-entity-framework-core-add-migration-order-dark.png b/docs/en/tutorials/microservice/images/abp-studio-entity-framework-core-add-migration-order-dark.png new file mode 100644 index 0000000000..91b7c7c0e5 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-entity-framework-core-add-migration-order-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-2-blazor-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-2-blazor-dark.png new file mode 100644 index 0000000000..39868295c8 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-2-blazor-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-2-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-2-dark.png new file mode 100644 index 0000000000..ba4aa5266b Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-2-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-dark.png new file mode 100644 index 0000000000..1c414ac7cd Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-server-2-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-server-2-dark.png new file mode 100644 index 0000000000..f67b902d0c Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-server-2-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-server-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-server-dark.png new file mode 100644 index 0000000000..60f6ee68a2 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-server-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-webapp-server-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-webapp-server-dark.png new file mode 100644 index 0000000000..297cb7008f Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-webapp-server-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-dark.png new file mode 100644 index 0000000000..900653f09c Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-window-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-window-dark.png new file mode 100644 index 0000000000..0b1c57f617 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-window-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-window-ordering-module-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-window-ordering-module-dark.png new file mode 100644 index 0000000000..2e7630bcc3 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-window-ordering-module-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-new-catalog-service-in-solution-explorer-dark.png b/docs/en/tutorials/microservice/images/abp-studio-new-catalog-service-in-solution-explorer-dark.png new file mode 100644 index 0000000000..b64c8d6b28 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-new-catalog-service-in-solution-explorer-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-open-abp-suite-dark.png b/docs/en/tutorials/microservice/images/abp-studio-open-abp-suite-dark.png new file mode 100644 index 0000000000..d40e535c80 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-open-abp-suite-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-open-abp-suite-select-module-dark.png b/docs/en/tutorials/microservice/images/abp-studio-open-abp-suite-select-module-dark.png new file mode 100644 index 0000000000..7866c0c81c Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-open-abp-suite-select-module-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-open-with-visual-studio-dark.png b/docs/en/tutorials/microservice/images/abp-studio-open-with-visual-studio-dark.png new file mode 100644 index 0000000000..bd2ccd2645 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-open-with-visual-studio-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-run-solution-dark.png b/docs/en/tutorials/microservice/images/abp-studio-run-solution-dark.png new file mode 100644 index 0000000000..725ffa3fb6 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-run-solution-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-run-start-all-dark.png b/docs/en/tutorials/microservice/images/abp-studio-run-start-all-dark.png new file mode 100644 index 0000000000..47fa0d89d6 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-run-start-all-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-blazor-dark.png b/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-blazor-dark.png new file mode 100644 index 0000000000..fe6bcd30d8 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-blazor-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-dark.png b/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-dark.png new file mode 100644 index 0000000000..db2dcdbd4a Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng-dark.png b/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng-dark.png new file mode 100644 index 0000000000..ff8ad07e70 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-ordering-microservice-dark.png b/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-ordering-microservice-dark.png new file mode 100644 index 0000000000..58bd30a9e1 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-solution-explorer-ordering-microservice-dark.png differ diff --git a/docs/en/tutorials/microservice/images/abp-studio-solution-runner-play-all-dark.png b/docs/en/tutorials/microservice/images/abp-studio-solution-runner-play-all-dark.png new file mode 100644 index 0000000000..8753647970 Binary files /dev/null and b/docs/en/tutorials/microservice/images/abp-studio-solution-runner-play-all-dark.png differ diff --git a/docs/en/tutorials/microservice/images/add-catalog-service-contracts-reference-dark.png b/docs/en/tutorials/microservice/images/add-catalog-service-contracts-reference-dark.png new file mode 100644 index 0000000000..134adffaa2 Binary files /dev/null and b/docs/en/tutorials/microservice/images/add-catalog-service-contracts-reference-dark.png differ diff --git a/docs/en/tutorials/microservice/images/add-package-reference-ordering-service-dark.png b/docs/en/tutorials/microservice/images/add-package-reference-ordering-service-dark.png new file mode 100644 index 0000000000..f0d717840e Binary files /dev/null and b/docs/en/tutorials/microservice/images/add-package-reference-ordering-service-dark.png differ diff --git a/docs/en/tutorials/microservice/images/catalog-service-dependency-dark.png b/docs/en/tutorials/microservice/images/catalog-service-dependency-dark.png new file mode 100644 index 0000000000..f954531f6d Binary files /dev/null and b/docs/en/tutorials/microservice/images/catalog-service-dependency-dark.png differ diff --git a/docs/en/tutorials/microservice/images/create-order-dark.png b/docs/en/tutorials/microservice/images/create-order-dark.png new file mode 100644 index 0000000000..e1e56c711b Binary files /dev/null and b/docs/en/tutorials/microservice/images/create-order-dark.png differ diff --git a/docs/en/tutorials/microservice/images/generate-catalog-service-proxy-dark.png b/docs/en/tutorials/microservice/images/generate-catalog-service-proxy-dark.png new file mode 100644 index 0000000000..9444078734 Binary files /dev/null and b/docs/en/tutorials/microservice/images/generate-catalog-service-proxy-dark.png differ diff --git a/docs/en/tutorials/microservice/images/generate-proxy-catalog-service-dark.png b/docs/en/tutorials/microservice/images/generate-proxy-catalog-service-dark.png new file mode 100644 index 0000000000..48aee2908e Binary files /dev/null and b/docs/en/tutorials/microservice/images/generate-proxy-catalog-service-dark.png differ diff --git a/docs/en/tutorials/microservice/images/import-module-dark.png b/docs/en/tutorials/microservice/images/import-module-dark.png new file mode 100644 index 0000000000..da8b4023df Binary files /dev/null and b/docs/en/tutorials/microservice/images/import-module-dark.png differ diff --git a/docs/en/tutorials/microservice/images/import-module-dialog-dark.png b/docs/en/tutorials/microservice/images/import-module-dialog-dark.png new file mode 100644 index 0000000000..0d556f09e6 Binary files /dev/null and b/docs/en/tutorials/microservice/images/import-module-dialog-dark.png differ diff --git a/docs/en/tutorials/microservice/images/install-module-dialog-dark.png b/docs/en/tutorials/microservice/images/install-module-dialog-dark.png new file mode 100644 index 0000000000..7e151ba10b Binary files /dev/null and b/docs/en/tutorials/microservice/images/install-module-dialog-dark.png differ diff --git a/docs/en/tutorials/microservice/images/ordering-service-swagger-ui-dark.png b/docs/en/tutorials/microservice/images/ordering-service-swagger-ui-dark.png new file mode 100644 index 0000000000..40d34ec71a Binary files /dev/null and b/docs/en/tutorials/microservice/images/ordering-service-swagger-ui-dark.png differ diff --git a/docs/en/tutorials/microservice/images/visual-studio-new-migration-class-dark.png b/docs/en/tutorials/microservice/images/visual-studio-new-migration-class-dark.png new file mode 100644 index 0000000000..a4a0ed54c4 Binary files /dev/null and b/docs/en/tutorials/microservice/images/visual-studio-new-migration-class-dark.png differ diff --git a/docs/en/tutorials/microservice/images/visual-studio-solution-explorer-catalog-service-dark.png b/docs/en/tutorials/microservice/images/visual-studio-solution-explorer-catalog-service-dark.png new file mode 100644 index 0000000000..d2073980f3 Binary files /dev/null and b/docs/en/tutorials/microservice/images/visual-studio-solution-explorer-catalog-service-dark.png differ diff --git a/docs/en/tutorials/microservice/images/vs-ordering-contracts-dark.png b/docs/en/tutorials/microservice/images/vs-ordering-contracts-dark.png new file mode 100644 index 0000000000..d5aa294506 Binary files /dev/null and b/docs/en/tutorials/microservice/images/vs-ordering-contracts-dark.png differ diff --git a/docs/en/tutorials/microservice/images/vs-ordering-entity-dark.png b/docs/en/tutorials/microservice/images/vs-ordering-entity-dark.png new file mode 100644 index 0000000000..9fa7b63c98 Binary files /dev/null and b/docs/en/tutorials/microservice/images/vs-ordering-entity-dark.png differ diff --git a/docs/en/tutorials/microservice/images/web-orders-page-dark.png b/docs/en/tutorials/microservice/images/web-orders-page-dark.png new file mode 100644 index 0000000000..5996675b05 Binary files /dev/null and b/docs/en/tutorials/microservice/images/web-orders-page-dark.png differ diff --git a/docs/en/tutorials/microservice/images/web-orders-page-with-product-name-dark.png b/docs/en/tutorials/microservice/images/web-orders-page-with-product-name-dark.png new file mode 100644 index 0000000000..f13a47da9f Binary files /dev/null and b/docs/en/tutorials/microservice/images/web-orders-page-with-product-name-dark.png differ diff --git a/docs/en/tutorials/microservice/index.md b/docs/en/tutorials/microservice/index.md index a4605f7508..3759e3582a 100644 --- a/docs/en/tutorials/microservice/index.md +++ b/docs/en/tutorials/microservice/index.md @@ -1,5 +1,13 @@ # Microservice Development Tutorial +````json +//[doc-params] +{ + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"], + "DB": ["EF","Mongo"] +} +```` + ````json //[doc-nav] { @@ -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}} [here](https://abp.io/api/download/samples/cloud-crm-blazor-ef) {{end}}. ## See Also diff --git a/docs/en/tutorials/microservice/part-01.md b/docs/en/tutorials/microservice/part-01.md index b2d0dade7f..8e741b9a47 100644 --- a/docs/en/tutorials/microservice/part-01.md +++ b/docs/en/tutorials/microservice/part-01.md @@ -1,5 +1,13 @@ # Microservice Tutorial Part 01: Creating the Initial Solution +````json +//[doc-params] +{ + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"], + "DB": ["EF","Mongo"] +} +```` + ````json //[doc-nav] { @@ -13,19 +21,49 @@ 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-solution-explorer-initial-cloud-crm-microservice-solution](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution.png) +{{if UI == "MVC"}} + +![abp-studio-solution-explorer-initial-cloud-crm-microservice-solution](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-dark.png) + +{{else if UI == "NG"}} + +![abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng-dark.png) + +{{else}} + +![abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-blazor](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-blazor-dark.png) + +{{end}} > 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). \ No newline at end of file diff --git a/docs/en/tutorials/microservice/part-02.md b/docs/en/tutorials/microservice/part-02.md index 014daf9b11..f54ee4fe56 100644 --- a/docs/en/tutorials/microservice/part-02.md +++ b/docs/en/tutorials/microservice/part-02.md @@ -1,5 +1,13 @@ # Microservice Tutorial Part 02: Creating the initial Catalog service +````json +//[doc-params] +{ + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"], + "DB": ["EF","Mongo"] +} +```` + ````json //[doc-nav] { @@ -20,11 +28,11 @@ In this tutorial, you will create a new Catalog service and integrate it to the Right-click the `services` folder in the *Solution Explorer* panel, select the *Add* -> *New Module* -> *Microservice* command: -![abp-studio-add-new-microservice-command](images/abp-studio-add-new-microservice-command.png) +![abp-studio-add-new-microservice-command](images/abp-studio-add-new-microservice-command-dark.png) 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-add-new-microservice-dialog](images/abp-studio-add-new-microservice-dialog.png) +![abp-studio-add-new-microservice-dialog](images/abp-studio-add-new-microservice-dialog-dark.png) When you click the *Next* button, you are redirected to the database provider selection step. @@ -32,28 +40,49 @@ When you click the *Next* button, you are redirected to the database provider se Here, you can select the database provider to be used by the new microservice: -![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-step.png) +{{if DB == "Mongo"}} -Select *Entity Framework Core* option and proceed the *Next* step. +![abp-studio-add-new-microservice-dialog-database-step-mongo](images/abp-studio-add-new-microservice-dialog-database-step-mongo-dark.png) -### Integrating to the Solution +Select *MongoDB* option and proceed the *Next* step. +{{end}} -In this step, we can select the options for integrating the new microservice to the rest of the solution components: +{{if DB == "EF"}} -![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step.png) +![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-step-dark.png) -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. +### Selecting Database Management System + +![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-management-dark.png) + +Select the desired option and proceed to the next step. + +{{end}} ### Additional Options -![abp-studio-add-new-microservice-dialog-additional-options-step](images/abp-studio-add-new-microservice-dialog-additional-options-step.png) +![abp-studio-add-new-microservice-dialog-additional-options-step](images/abp-studio-add-new-microservice-dialog-additional-options-step-dark.png) In this step, you can select additional options for the new microservice. You can leave them as default and click the *Create* button. That's all, ABP Studio creates the new microservice and arranges all the integration and configuration for you. +### Integrating to the Solution + +In this step, we can select the options for integrating the new microservice to the rest of the solution components: + +{{if UI == "NG"}} +![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step-ng-dark.png) +{{else}} +![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step-dark.png) +{{end}} + +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: -![abp-studio-new-catalog-service-in-solution-explorer](images/abp-studio-new-catalog-service-in-solution-explorer.png) +![abp-studio-new-catalog-service-in-solution-explorer](images/abp-studio-new-catalog-service-in-solution-explorer-dark.png) 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: -![abp-studio-open-with-visual-studio](images/abp-studio-open-with-visual-studio.png) +![abp-studio-open-with-visual-studio](images/abp-studio-open-with-visual-studio-dark.png) Here is the `CloudCrm.CatalogService` .NET solution in Visual Studio: -![visual-studio-solution-explorer-catalog-service](images/visual-studio-solution-explorer-catalog-service.png) +![visual-studio-solution-explorer-catalog-service](images/visual-studio-solution-explorer-catalog-service-dark.png) ### Running the New Service @@ -88,17 +117,17 @@ You can run the solution using ABP Studio's *Solution Runner*. It will also run Click the *Play* button near to the solution root: -![abp-studio-solution-runner-play-all](images/abp-studio-solution-runner-play-all.png) +![abp-studio-solution-runner-play-all](images/abp-studio-solution-runner-play-all-dark.png) ### Browsing the Catalog Service Once all of the applications have started, right-click the Catalog service and select the *Browse* command: -![abp-studio-browse-catalog-service](images/abp-studio-browse-catalog-service.png) +![abp-studio-browse-catalog-service](images/abp-studio-browse-catalog-service-dark.png) It will open the built-in browser and you will see the Swagger UI for the Catalog service: -![abp-studio-browser-catalog-service-swagger-ui](images/abp-studio-browser-catalog-service-swagger-ui.png) +![abp-studio-browser-catalog-service-swagger-ui](images/abp-studio-browser-catalog-service-swagger-ui-dark.png) You can test the APIs on the Swagger UI to see if the new microservice is properly working. diff --git a/docs/en/tutorials/microservice/part-03.md b/docs/en/tutorials/microservice/part-03.md index adae9877dd..70f5c04a35 100644 --- a/docs/en/tutorials/microservice/part-03.md +++ b/docs/en/tutorials/microservice/part-03.md @@ -1,5 +1,13 @@ # Microservice Tutorial Part 03: Building the Catalog service +````json +//[doc-params] +{ + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"], + "DB": ["EF","Mongo"] +} +```` + ````json //[doc-nav] { @@ -24,17 +32,17 @@ First of all, **stop all the applications** in ABP Studio's *Solution Runner* pa Now, select the *ABP Suite* -> *Open* command on the main menu to open ABP Suite: -![abp-studio-open-abp-suite](images/abp-studio-open-abp-suite.png) +![abp-studio-open-abp-suite](images/abp-studio-open-abp-suite-dark.png) It will ask to you which module you want to use: -![abp-studio-open-abp-suite-select-module](images/abp-studio-open-abp-suite-select-module.png) +![abp-studio-open-abp-suite-select-module](images/abp-studio-open-abp-suite-select-module-dark.png) 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: -![abp-studio-abp-suite-inside](images/abp-studio-abp-suite-inside.png) +![abp-studio-abp-suite-inside](images/abp-studio-abp-suite-inside-dark.png) ## Generating a Products Page @@ -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. -![abp-studio-catalog-service-build-and-start](images/abp-studio-catalog-service-start.png) +![abp-studio-catalog-service-build-and-start](images/abp-studio-catalog-service-start-dark.png) 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 +``` -![abp-studio-generate-proxy](images/abp-studio-generate-proxy.png) +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: +{{if UI == "MVC" || UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}} +### Generating the UI Proxy -![abp-studio-generate-proxy-window](images/abp-studio-generate-proxy-window.png) +{{if UI == "BlazorWebApp"}} -> 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: +#### For the Server Project +![abp-studio-generate-proxy-blazor-server](images/abp-studio-generate-proxy-blazor-webapp-server-dark.png) -```csharp -//... -using CloudCrm.CatalogService; +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. + +#### For client project +![abp-studio-generate-proxy-blazor](images/abp-studio-generate-proxy-blazor-dark.png) + +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: + +{{if UI == "MVC"}} +![abp-studio-generate-proxy](images/abp-studio-generate-proxy-dark.png) +{{else if UI == "BlazorServer"}} +![abp-studio-generate-proxy-blazor-server](images/abp-studio-generate-proxy-blazor-server-dark.png) +{{else if UI == "Blazor"}} +![abp-studio-generate-proxy-blazor](images/abp-studio-generate-proxy-blazor-dark.png) +{{end}} + +{{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 {{if UI == "MVC"}} `CloudCrm.Web` {{else}} `CloudCrm.Blazor` {{end}} project already depends on the `CloudCrm.CatalogService.Contracts` package: + +![abp-studio-generate-proxy-window](images/abp-studio-generate-proxy-window-dark.png) + +> 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) -{ - // Code omitted for brevity - context.Services.AddStaticHttpClientProxies( - typeof(CloudCrmCatalogServiceContractsModule).Assembly); -} -``` ### Running the Application 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: -![abp-studio-run-build-and-start-all](images/abp-studio-run-start-all.png) +![abp-studio-run-build-and-start-all](images/abp-studio-run-start-all-dark.png) -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: ![abp-studio-browse-cloud-crm-products](images/abp-studio-browse-cloud-crm-products.png) diff --git a/docs/en/tutorials/microservice/part-04.md b/docs/en/tutorials/microservice/part-04.md index 50386ab8e1..0cae944d07 100644 --- a/docs/en/tutorials/microservice/part-04.md +++ b/docs/en/tutorials/microservice/part-04.md @@ -1,5 +1,13 @@ # Microservice Tutorial Part 04: Creating the initial Ordering service +````json +//[doc-params] +{ + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"], + "DB": ["EF","Mongo"] +} +```` + ````json //[doc-nav] { @@ -20,11 +28,11 @@ In the previous part, we implemented the Catalog microservice functionality usin Right-click the `services` folder in the *Solution Explorer* panel, select the *Add* -> *New Module* -> *Microservice* command: -![abp-studio-add-new-microservice-command](images/abp-studio-add-new-microservice-command-2.png) +![abp-studio-add-new-microservice-command](images/abp-studio-add-new-microservice-command-2-dark.png) 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-add-new-microservice-dialog](images/abp-studio-add-new-microservice-dialog-2.png) +![abp-studio-add-new-microservice-dialog](images/abp-studio-add-new-microservice-dialog-2-dark.png) When you click the *Next* button, you are redirected to the database provider selection step. @@ -32,28 +40,49 @@ When you click the *Next* button, you are redirected to the database provider se Here, you can select the database provider to be used by the new microservice: -![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-step.png) +{{if DB == "Mongo"}} -Select *Entity Framework Core* option and proceed the *Next* step. +![abp-studio-add-new-microservice-dialog-database-step-mongo](images/abp-studio-add-new-microservice-dialog-database-step-mongo-dark.png) -### Integrating to the Solution +Select *MongoDB* option and proceed the *Next* step. +{{end}} -In this step, we can select the options for integrating the new microservice to the rest of the solution components: +{{if DB == "EF"}} -![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step.png) +![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-step-dark.png) -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. +### Selecting Database Management System + +![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-management-dark.png) + +Select the desired option and proceed to the next step. + +{{end}} ### Additional Options -![abp-studio-add-new-microservice-dialog-additional-options-step](images/abp-studio-add-new-microservice-dialog-additional-options-step.png) +![abp-studio-add-new-microservice-dialog-additional-options-step](images/abp-studio-add-new-microservice-dialog-additional-options-step-dark.png) In this step, you can select additional options for the new microservice. You can leave them as default and click the *Create* button. That's all, ABP Studio creates the new microservice and arranges all the integration and configuration for you. +### Integrating to the Solution + +In this step, we can select the options for integrating the new microservice to the rest of the solution components: + +{{if UI == "NG"}} +![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step-ng-dark.png) +{{else}} +![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step-dark.png) +{{end}} + +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: -![abp-studio-solution-explorer-ordering-microservice](images/abp-studio-solution-explorer-ordering-microservice.png) +![abp-studio-solution-explorer-ordering-microservice](images/abp-studio-solution-explorer-ordering-microservice-dark.png) * `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: -![abp-studio-run-solution](images/abp-studio-run-solution.png) +![abp-studio-run-solution](images/abp-studio-run-solution-dark.png) ### Browsing the Ordering Service 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: -![abp-studio-browse-ordering-service](images/abp-studio-browse-ordering-service.png) +![abp-studio-browse-ordering-service](images/abp-studio-browse-ordering-service-dark.png) ### Opening the Ordering Database diff --git a/docs/en/tutorials/microservice/part-05.md b/docs/en/tutorials/microservice/part-05.md index f2cefce256..3fcfc9cac8 100644 --- a/docs/en/tutorials/microservice/part-05.md +++ b/docs/en/tutorials/microservice/part-05.md @@ -1,5 +1,13 @@ # Microservice Tutorial Part 05: Building the Ordering service +````json +//[doc-params] +{ + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"], + "DB": ["EF","Mongo"] +} +```` + ````json //[doc-nav] { @@ -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: -![vs-ordering-entity](images/vs-ordering-entity.png) +![vs-ordering-entity](images/vs-ordering-entity-dark.png) ## Configuring the Database Mapping @@ -122,15 +130,15 @@ Please stop the applications if they are running and ensure that the solution ha Right-click the `CloudCrm.OrderingService` package and select the *EF Core CLI* -> *Add Migration* command: -![abp-studio-add-entity-framework-core-migration](images/abp-studio-add-entity-framework-core-migration.png) +![abp-studio-add-entity-framework-core-migration](images/abp-studio-add-entity-framework-core-migration-dark.png) -The *Add Migration* command opens a new dialog to get a migration name: +The *Add Migration* command opens a new dialog to get a migration name `Added_Order_Entity`: -![abp-studio-entity-framework-core-add-migration-order](images/abp-studio-entity-framework-core-add-migration-order.png) +![abp-studio-entity-framework-core-add-migration-order](images/abp-studio-entity-framework-core-add-migration-order-dark.png) Once you click the *OK* button, a new database migration class is added to the `Migrations` folder of the `CloudCrm.OrderingService` project: -![visual-studio-new-migration-class](images/visual-studio-new-migration-class.png) +![visual-studio-new-migration-class](images/visual-studio-new-migration-class-dark.png) 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: -![vs-ordering-contracts](images/vs-ordering-contracts.png) +![vs-ordering-contracts](images/vs-ordering-contracts-dark.png) ## Implementing the Application Service @@ -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: -![ordering-service-swagger-ui](images/ordering-service-swagger-ui.png) +![ordering-service-swagger-ui](images/ordering-service-swagger-ui-dark.png) 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). +{{end}} -### Generating the UI Proxy +{{if UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}} -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: +### Creating the Orders Page -![abp-studio-generate-proxy-2](images/abp-studio-generate-proxy-2.png) +{{if UI == "BlazorServer"}} -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. -![abp-studio-generate-proxy-window-ordering-module](images/abp-studio-generate-proxy-window-ordering-module.png) +{{else}} -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) -{ - // Code omitted for brevity - context.Services.AddStaticHttpClientProxies( - typeof(CloudCrmOrderingServiceContractsModule).Assembly); +```html +@page "/orders" +@using CloudCrm.OrderingService.Services +@inject IOrderAppService OrderAppService + +

Orders

+ +
+
+ @if (OrderList == null) + { +

Loading orders...

+ } + else if (!OrderList.Any()) + { +

No orders found.

+ } + else + { + + } +
+
+ +@code { + private List OrderList { get; set; } + + protected override async Task OnInitializedAsync() + { + try + { + var result = await OrderAppService.GetListAsync(); + OrderList = result; + } + catch (Exception ex) + { + Console.WriteLine($"Error loading orders: {ex.Message}"); + OrderList = new List(); + } + } } ``` +{{end}} + +{{if UI == "MVC" || UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}} +### Generating the UI Proxy + +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. + +#### For the Server Project +![abp-studio-generate-proxy-blazor-server](images/abp-studio-generate-proxy-blazor-webapp-server-dark.png) + +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. + +#### For client project +![abp-studio-generate-proxy-blazor](images/abp-studio-generate-proxy-blazor-dark.png) + +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: + +{{if UI == "MVC"}} +![abp-studio-generate-proxy-2](images/abp-studio-generate-proxy-2-dark.png) +{{else if UI == "BlazorServer"}} +![abp-studio-generate-proxy-blazor-server-2](images/abp-studio-generate-proxy-blazor-server-2-dark.png) +{{else if UI == "Blazor"}} +![abp-studio-generate-proxy-blazor-2](images/abp-studio-generate-proxy-2-blazor-dark.png) +{{end}} + +{{end}} + +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-studio-generate-proxy-window-ordering-module](images/abp-studio-generate-proxy-window-ordering-module-dark.png) + ### Adding the Menu Item > 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: ```csharp private static async Task ConfigureMainMenuAsync(MenuConfigurationContext context) @@ -409,15 +500,152 @@ private static async Task ConfigureMainMenuAsync(MenuConfigurationContext contex } ``` +{{end}} + +{{if UI == "NG"}} + +### Generating the Proxies + +Run the following command line under the `Angular` project folder to generate the UI proxy for the `OrderingService`: + +```bash +abp generate-proxy -t ng -m ordering -u http://localhost:44311 --target ordering-service +``` + +> Make sure the url port (example 44311) must be same with your OrderService's port. + +For more information, please refer to the [Service Proxies](https://abp.io/docs/latest/framework/ui/angular/service-proxies) documentation. + +### Create Order Module + +Run the following command line to create a new module, named `OrderModule` in the root folder of the angular application: + +```bash +yarn ng generate module order --module ordering-service --project ordering-service --routing --route orders +``` + +### Add Order Route + +* Create `order-base.routes.ts` file under the `projects/ordering-service/config/src/providers` folder and add the following code: + +*order-base.routes.ts* +```typescript +import { ABP, eLayoutType } from '@abp/ng.core'; + +import { eOrderingServiceRouteNames } from '../enums/route-names'; + +export const ORDER_BASE_ROUTES: ABP.Route[] = [ + { + path: '/ordering-service/orders', + parentName: eOrderingServiceRouteNames.OrderingService, + name: 'OrderingService::Menu:Orders', + layout: eLayoutType.application, + breadcrumbText: 'OrderingService::Orders', + }, +]; +``` + +* Create `order-route.provider.ts` file under the `projects/ordering-service/config/src/providers` folder and add the following code: + +*order-route.provider.ts* +```typescript +import { inject, provideAppInitializer } from '@angular/core'; +import { ABP, RoutesService } from '@abp/ng.core'; +import { ORDER_BASE_ROUTES } from './order-base.routes'; + +export const ORDERS_ORDER_ROUTE_PROVIDER = [ + provideAppInitializer(() => { + configureRoutes(); + }), +]; + +function configureRoutes() { + const routesService = inject(RoutesService); + const routes: ABP.Route[] = [...ORDER_BASE_ROUTES]; + routesService.add(routes); +} +``` + +* 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'; + +@NgModule() +export class OrderingServiceConfigModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: OrderingServiceConfigModule, + providers: [ORDERING_SERVICE_ROUTE_PROVIDERS, ORDERS_ORDER_ROUTE_PROVIDER], + }; + } +} +``` + +### Create Order Page + +* Create `order.component.ts` file under the `projects/ordering-service/src/lib/order` folder as following code: + +```typescript +import { Component } from '@angular/core'; +import { OrderDto, OrderService } from './proxy/ordering-service/services'; + +@Component({ + selector: 'lib-order', + standalone: false, + templateUrl: './order.component.html', + styleUrl: './order.component.css' +}) +export class OrderComponent { + + items: OrderDto[] = []; + + constructor(private readonly proxy: OrderService) { + this.proxy.getList().subscribe((res) => { + this.items = res; + }); + } + +} +``` + +* Create `order.component.html` file under the `projects/ordering-service/src/lib/order` folder as following code: + +```html +
+
+ + + + + + + + + + + + + +
Order IDProduct IdCustomer Name
{%{{{item.id}}}%}{%{{{item.productId}}}%}{%{{{item.customerName}}}%}
+
+
+``` + +{{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: -![abp-studio-run-build-start](images/abp-studio-run-start-all.png) +![abp-studio-run-build-start](images/abp-studio-run-start-all-dark.png) After the applications are started, you can *Browse* and navigate to the `Orders` page to see the list of orders: -![web-orders-page](images/web-orders-page.png) +![web-orders-page](images/web-orders-page-dark.png) Great! We have successfully implemented the Ordering module. However, there is a problem: diff --git a/docs/en/tutorials/microservice/part-06.md b/docs/en/tutorials/microservice/part-06.md index 1cc19bf6d8..4cf3da14ea 100644 --- a/docs/en/tutorials/microservice/part-06.md +++ b/docs/en/tutorials/microservice/part-06.md @@ -1,5 +1,13 @@ # Microservice Tutorial Part 06: Integrating the services: HTTP API Calls +````json +//[doc-params] +{ + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"], + "DB": ["EF","Mongo"] +} +```` + ````json //[doc-nav] { @@ -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. -![web-orders-page](images/web-orders-page.png) +![web-orders-page](images/web-orders-page-dark.png) 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: -![add-package-reference-ordering-service](images/add-package-reference-ordering-service.png) +![add-package-reference-ordering-service](images/add-package-reference-ordering-service-dark.png) 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: -![add-catalog-service-contracts-reference](images/add-catalog-service-contracts-reference.png) +![add-catalog-service-contracts-reference](images/add-catalog-service-contracts-reference-dark.png) 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: -![generate-proxy-catalog-service](images/generate-proxy-catalog-service.png) +![generate-proxy-catalog-service](images/generate-proxy-catalog-service-dark.png) 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: -![generate-catalog-service-proxy](images/generate-catalog-service-proxy.png) - -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" - } - } -} -``` +![generate-catalog-service-proxy](images/generate-catalog-service-proxy-dark.png) -> **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,49 @@ Open the `Index.cshtml` file (the `Index.cshtml` file under the `Pages/Orders` f ``` +{{else if UI == "NG"}} + +```html +
+
+ + + + + + + + + + + + + +
Order IDProduct NameCustomer Name
{%{{{item.id}}}%}{%{{{item.productName}}}%}{%{{{item.customerName}}}%}
+
+
+``` + +{{else if UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}} + +```html +
    + @foreach (var order in OrderList) + { +
  • + Customer: @order.CustomerName
    + Product Name: @order.ProductName
    + State: @order.State +
    • + } +
+``` + +{{end}} + That's it! Now, you can *Start* the all applications and browse it in ABP Studio to see the result: -![web-orders-page-with-product-name](images/web-orders-page-with-product-name.png) +![web-orders-page-with-product-name](images/web-orders-page-with-product-name-dark.png) 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 +356,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. \ No newline at end of file diff --git a/docs/en/tutorials/microservice/part-07.md b/docs/en/tutorials/microservice/part-07.md index 633789fc6c..620d49f6c5 100644 --- a/docs/en/tutorials/microservice/part-07.md +++ b/docs/en/tutorials/microservice/part-07.md @@ -1,5 +1,13 @@ # Microservice Tutorial Part 07: Integrating the services: Using Distributed Events +````json +//[doc-params] +{ + "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"], + "DB": ["EF","Mongo"] +} +```` + ````json //[doc-nav] { @@ -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: -![Import Module](images/import-module.png) +![Import Module](images/import-module-dark.png) In the opening dialog, find and select the `CloudCrm.OrderingService` module, check the *Install this module* option, click the *OK* button: -![Import Module Dialog](images/import-module-dialog.png) +![Import Module Dialog](images/import-module-dialog-dark.png) Once you click the OK button, the Ordering service is imported to the Catalog service. It opens the *Install Module* dialog: -![Install Module Dialog](images/install-module-dialog.png) +![Install Module Dialog](images/install-module-dialog-dark.png) 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): -![catalog-service-dependency](images/catalog-service-dependency.png) +![catalog-service-dependency](images/catalog-service-dependency-dark.png) ### Handling the `OrderPlacedEto` Event @@ -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: -![Create Order](images/create-order.png) +![Create Order](images/create-order-dark.png) 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: ![Orders](images/orders.png)