diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index c160bacfde..2ede960b12 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -174,11 +174,11 @@ "path": "tutorials/modular-crm/part-01.md" }, { - "text": "2: Creating the Initial Products Module", + "text": "2: Setting Up the Catalog Module", "path": "tutorials/modular-crm/part-02.md" }, { - "text": "3: Building the Products Module", + "text": "3: Building the Catalog Module", "path": "tutorials/modular-crm/part-03.md" }, { diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-add-new-folder-command-2.png b/docs/en/tutorials/modular-crm/images/abp-studio-add-new-folder-command-2.png new file mode 100644 index 0000000000..b7dfb4d91b Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-add-new-folder-command-2.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-graph-build.png b/docs/en/tutorials/modular-crm/images/abp-studio-graph-build.png index 8930bdd062..357feb7b68 100644 Binary files a/docs/en/tutorials/modular-crm/images/abp-studio-graph-build.png and b/docs/en/tutorials/modular-crm/images/abp-studio-graph-build.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-import-module-dialog-for-catalog.png b/docs/en/tutorials/modular-crm/images/abp-studio-import-module-dialog-for-catalog.png new file mode 100644 index 0000000000..17a4ef181c Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-import-module-dialog-for-catalog.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-module-installation-dialog-for-catalog.png b/docs/en/tutorials/modular-crm/images/abp-studio-module-installation-dialog-for-catalog.png new file mode 100644 index 0000000000..9fac6e7f59 Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-module-installation-dialog-for-catalog.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-solution-runner-initial-catalog-page.png b/docs/en/tutorials/modular-crm/images/abp-studio-solution-runner-initial-catalog-page.png new file mode 100644 index 0000000000..ef362bc58a Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-solution-runner-initial-catalog-page.png differ diff --git a/docs/en/tutorials/modular-crm/images/modular-crm-wizard-modularity-step.png b/docs/en/tutorials/modular-crm/images/modular-crm-wizard-modularity-step.png new file mode 100644 index 0000000000..d33eea276b Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/modular-crm-wizard-modularity-step.png differ diff --git a/docs/en/tutorials/modular-crm/images/solution-explorer-modular-crm-initial-with-modules.png b/docs/en/tutorials/modular-crm/images/solution-explorer-modular-crm-initial-with-modules.png new file mode 100644 index 0000000000..1097735438 Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/solution-explorer-modular-crm-initial-with-modules.png differ diff --git a/docs/en/tutorials/modular-crm/index.md b/docs/en/tutorials/modular-crm/index.md index 723425a230..bfbc9bf4a1 100644 --- a/docs/en/tutorials/modular-crm/index.md +++ b/docs/en/tutorials/modular-crm/index.md @@ -19,8 +19,8 @@ ABP provides a great infrastructure and tooling to build modular software soluti This tutorial is organized as the following parts: * [Part 01: Creating the initial solution](part-01.md) -* [Part 02: Creating the initial Products module](part-02.md) -* [Part 03: Building the Products module](part-03.md) +* [Part 02: Setting Up the Catalog Module](part-02.md) +* [Part 03: Building the Catalog Module](part-03.md) * [Part 04: Creating the initial Ordering module](part-04.md) * [Part 05: Building the Ordering module](part-05.md) * [Part 06: Integrating the modules: Implementing Integration Services](part-06.md) diff --git a/docs/en/tutorials/modular-crm/part-01.md b/docs/en/tutorials/modular-crm/part-01.md index ddc6e8debe..8a938cd75f 100644 --- a/docs/en/tutorials/modular-crm/part-01.md +++ b/docs/en/tutorials/modular-crm/part-01.md @@ -8,7 +8,7 @@ "Path": "tutorials/modular-crm/index" }, "Next": { - "Name": "Creating the initial Products module", + "Name": "Setting Up the Catalog Module", "Path": "tutorials/modular-crm/part-02" } } @@ -20,21 +20,31 @@ Follow the *[Get Started](../../get-started/single-layer-web-application.md)* gu * **UI Framework**: ASP.NET Core MVC / Razor Pages * **Database Provider**: Entity Framework Core -You can select the other options based on your preference. +You can select the other options based on your preference but at the **Modularity** step, check the _Setup as a modular solution_ option and add a new **Standard Module** named `ModularCrm.Catalog`: + +![](./images/modular-crm-wizard-modularity-step.png) + +Since modularity is a key aspect of the ABP Framework, it provides an option to create a modular system from the beginning. Here, you're creating a `ModularCrm.Catalog` module and setting it as a "Standard Module" (a module template similar to the DDD module but without the domain layer). This will create four projects (-depends on the options you selected-): +- `ModularCrm.Catalog`: The main module project +- `ModularCrm.Catalog.Contracts`: Contains service interfaces and DTOs +- `ModularCrm.Catalog.Tests`: Unit and integration tests (since we selected the _Include Test_ option) +- `ModularCrm.Catalog.UI`: Contains UI components for the module + +> **Note:** This tutorial will guide you through creating two modules: `Catalog` and `Ordering`. While you just created the `Catalog` module in the _Modularity_ step, you could also create the `Ordering` module at this stage. However, you'll create the `Ordering` module in subsequent parts to better demonstrate ABP Studio's module management capabilities and to simulate a more realistic development workflow where modules are typically added incrementally as the application evolves. + +This approach allows you to start with a modular architecture right from the beginning, making it easier to maintain and extend the application as it grows. ABP Studio automatically creates the module projects and places them under the `modules` folder for you, and later on you can add more modules to the solution. > **Please complete the [Get Started](../../get-started/single-layer-web-application.md) guide and run the web application before going further.** The initial solution structure should be like the following in ABP Studio's *[Solution Explorer](../../studio/solution-explorer.md)*: -![solution-explorer-modular-crm-initial](images/solution-explorer-modular-crm-initial.png) +![solution-explorer-modular-crm-initial-with-modules](images/solution-explorer-modular-crm-initial-with-modules.png) -Initially, you see a `ModularCrm` solution and a `ModularCrm` module under that solution. +Initially, you see a `ModularCrm` solution, a `ModularCrm` module under that solution (our main single layer application), and a `modules` folder that contains the `ModularCrm.Catalog` module. > An ABP Studio module is typically a .NET solution and an ABP Studio solution is an umbrella concept for multiple .NET Solutions (see the [concepts](../../studio/concepts.md) document for more). -The `ModularCrm` module is the core of your application, built as a single-layer ASP.NET Core Web application. You can expand the `ModularCrm` module to see: - -![solution-explorer-modular-crm-expanded](images/solution-explorer-modular-crm-expanded.png) +The `ModularCrm` module is the core of your application, built as a single-layer ASP.NET Core Web application. On the other hand, the `ModularCrm.Catalog` module is a standard module template, consist of 4 layers and used to implement the catalog features. ## Summary diff --git a/docs/en/tutorials/modular-crm/part-02.md b/docs/en/tutorials/modular-crm/part-02.md index 034b4b7bfe..e6af724456 100644 --- a/docs/en/tutorials/modular-crm/part-02.md +++ b/docs/en/tutorials/modular-crm/part-02.md @@ -1,4 +1,4 @@ -# Creating the Initial Products Module +# Setting Up the Catalog Module ````json //[doc-nav] @@ -8,97 +8,29 @@ "Path": "tutorials/modular-crm/part-01" }, "Next": { - "Name": "Building the Products module", + "Name": "Building the Catalog module", "Path": "tutorials/modular-crm/part-03" } } ```` -In this part, you will create a new product management module and install it in the main CRM application. +In this part, you will install the `ModularCrm.Catalog` module to the main application, which is created in the previous part. -## Creating Solution Folders +Before installing the `ModularCrm.Catalog` module to the main application, let's create a "main" folder and move the `ModularCrm` module to it to tidy up the solution structure. Right-click to the solution root on the *Solution Explorer* panel, and select *Add* -> *New Folder* command: -You can create solution folders and sub-folders in *Solution Explorer* to organize your solution components better. Right-click to the solution root on the *Solution Explorer* panel, and select *Add* -> *New Folder* command: - -![abp-studio-add-new-folder-command](images/abp-studio-add-new-folder-command.png) +![abp-studio-add-new-folder-command-2](images/abp-studio-add-new-folder-command-2.png) That command opens a dialog where you can set the folder name: ![abp-studio-new-folder-dialog](images/abp-studio-new-folder-dialog.png) -Create a `main` and a `modules` folder using the *New Folder* command, then move the `ModularCrm` module into the `main` folder (simply by drag & drop). The *Solution Explorer* panel should look like the following figure now: +After the folder is created, now you can move the `ModularCrm` module to the `main` folder (simply by drag & drop). The _Solution Explorer_ panel should look like the following figure now: ![abp-studio-solution-explorer-with-folders](images/abp-studio-solution-explorer-with-folders.png) -## Creating The Module - -There are three module templates provided by ABP Studio: - -* **Empty Module**: You can use that module template to build your module structure from scratch. -* **DDD Module**: A Domain Driven Design based layered module structure. -* **Standard Module**: A module template that is similar to the DDD module but without the domain layer. - -We will use the *DDD Module* template for the Product module and the *Standard Module* template later in this tutorial. - -Right-click the `modules` folder on the *Solution Explorer* panel, and select the *Add* -> *New Module* -> *DDD Module* command: - -![abp-studio-add-new-ddd-module](images/abp-studio-add-new-ddd-module.png) - -This command opens a new dialog to define the properties of the new module. You can use the following values to create a new module named `ModularCrm.Products`: - -![abp-studio-create-new-module-dialog](images/abp-studio-create-new-module-dialog.png) - -When you click the *Next* button, you are redirected to the UI selection step. - -### Selecting the UI Type - -Here, you can select the UI type you want to support in your module: - -![abp-studio-create-new-module-dialog-step-ui](images/abp-studio-create-new-module-dialog-step-ui.png) - -A module; - -* May not contain a UI and leaves the UI development to the final application. -* May contain a single UI implementation that is typically in the same technology as the main application. -* May contain more than one UI implementation if you want to create a reusable application module and you want to make that module usable by different applications with different UI technologies. For example, all of [pre-built ABP modules](https://abp.io/modules) support multiple UI options. - -In this tutorial, we are selecting the MVC UI since we are building that module only for our `ModularCrm` solution and we are using the MVC UI in our application. So, select the MVC UI and click the *Next* button. - -### Selecting the Database Provider - -The next step is to select the database provider (or providers) you want to support with your module: +## Installing the Catalog Module to the Main Application -![abp-studio-create-new-module-dialog-step-db](images/abp-studio-create-new-module-dialog-step-db.png) - -Since our main application is using Entity Framework Core and we will use the `ModularCrm.Products` module only for that main application, we can select the *Entity Framework Core* option and click the *Next* button. - -![abp-studio-create-new-module-dialog-step-additional-options](images/abp-studio-create-new-module-dialog-step-additional-options.png) - -Lastly, you can uncheck the *Include Tests* option if you don't want to include test projects in your module. Click the *Create* button to create the new module. - -### Exploring the New Module - -After adding the new module, the *Solution Explorer* panel should look like the following figure: - -![abp-studio-solution-explorer-two-modules](images/abp-studio-solution-explorer-two-modules.png) - -The new `ModularCrm.Products` module has been created and added to the solution. The `ModularCrm.Products` module has a separate and independent .NET solution. Right-click the `ModularCrm.Products` module and select the *Open with* -> *Explorer* command: - -![abp-studio-open-in-explorer](images/abp-studio-open-in-explorer.png) - -This command opens the solution folder in your file system: - -![product-module-folder](images/product-module-folder.png) - -You can open `ModularCrm.Products.sln` in your favorite IDE (e.g. Visual Studio): - -![product-module-visual-studio](images/product-module-visual-studio.png) - -As seen in the preceding figure, the `ModularCrm.Products` solution consists of several layers, each has own responsibility. - -### Installing the Product Module to the Main Application - -A module does not contain an executable application inside. The `Modular.Products.Web` project is just a class library project, not an executable web application. A module should be installed in an executable application to run it. +A module does not contain an executable application inside. The `ModularCrm.Catalog.UI` project is just a class library project, not an executable web application. A module should be installed in an executable application to run it. > **Ensure that the web application is not running in [Solution Runner](../../studio/running-applications.md) or in your IDE. Installing a module to a running application will produce errors.** @@ -108,19 +40,17 @@ The product module has yet to be related to the main application. Right-click on The *Import Module* command opens a dialog as shown below: -![abp-studio-import-module-dialog](images/abp-studio-import-module-dialog.png) +![abp-studio-import-module-dialog-for-catalog](images/abp-studio-import-module-dialog-for-catalog.png) -Select the `ModularCrm.Products` module and check the *Install this module* option. If you don't check that option, it only imports the module but doesn't set project dependencies. Importing a module without installation can be used to set up your project dependencies manually. We want to make it automatically, so check the *Install this module* option. +Select the `ModularCrm.Catalog` module and check the *Install this module* option. If you don't check that option, it only imports the module but doesn't set project dependencies. Importing a module without installation can be used to set up your project dependencies manually. We want to make it automatically, so check the *Install this module* option. When you click the *OK* button, ABP Studio opens the *Install Module* dialog: -![abp-studio-module-installation-dialog](images/abp-studio-module-installation-dialog.png) - -This dialog simplifies installing a multi-layer module to a single-layer application. It automatically determines which package of the `ModularCrm.Products` module should be installed to which package of the main application. +![abp-studio-module-installation-dialog-for-catalog](images/abp-studio-module-installation-dialog-for-catalog.png) -The default package match is good for this tutorial, so you can click the *OK* button to proceed. +Select the `ModularCrm.Catalog` and `ModularCrm.Catalog.UI` packages from the left area and the `ModularCrm` package from the middle area as shown in the preceding figure. Finally, click _OK_. -### Building the Main Application +## Building the Main Application After the installation, build the entire solution by right-clicking on the `ModularCrm` module (under the `main` folder) and selecting the *Dotnet CLI* -> *Graph Build* command: @@ -132,12 +62,12 @@ Graph Build is a dotnet CLI command that recursively builds all the referenced d ### Run the Main Application -Open the *Solution Runner* panel, click the *Play* button (near to the solution root), right-click the `ModularCrm` application and select the *Browse* command. It will open the web application in the built-in browser. Then you can navigate to the *Products* page on the main menu of the application to see the Products page that is coming from the `ModularCrm.Products` module: +Open the *Solution Runner* panel, click the *Play* button (near to the solution root), right-click the `ModularCrm` application and select the *Browse* command. It will open the web application in the built-in browser. Then you can navigate to the *Catalog* page on the main menu of the application to see the Catalog page that is coming from the `ModularCrm.Catalog` module: -![abp-studio-solution-runner-initial-product-page](images/abp-studio-solution-runner-initial-product-page.png) +![abp-studio-solution-runner-initial-catalog-page](images/abp-studio-solution-runner-initial-catalog-page.png) ## Summary -In this part, we've created a new module to manage products in our modular application. Then we installed the new module to the main application and run the solution to test if it has successfully installed. +In this part, you installed the `ModularCrm.Catalog` module to the main application and run the solution to test if it has successfully installed. -In the next part, you will learn how to create entities, services and a basic user interface for the products module. +In the next part, you will learn how to create entities, services and a basic user interface for the catalog module. diff --git a/docs/en/tutorials/modular-crm/part-03.md b/docs/en/tutorials/modular-crm/part-03.md index 38c6553fa3..2d72b0bf87 100644 --- a/docs/en/tutorials/modular-crm/part-03.md +++ b/docs/en/tutorials/modular-crm/part-03.md @@ -4,7 +4,7 @@ //[doc-nav] { "Previous": { - "Name": "Creating the initial Products module", + "Name": "Setting Up the Catalog Module", "Path": "tutorials/modular-crm/part-02" }, "Next": {