diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-import-module-dialog.png b/docs/en/tutorials/modular-crm/images/abp-studio-import-module-dialog.png new file mode 100644 index 0000000000..fbc29aacc1 Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-import-module-dialog.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-import-module.png b/docs/en/tutorials/modular-crm/images/abp-studio-import-module.png new file mode 100644 index 0000000000..f79faf7418 Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-import-module.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-module-installation-dialog.png b/docs/en/tutorials/modular-crm/images/abp-studio-module-installation-dialog.png new file mode 100644 index 0000000000..63438a94b2 Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-module-installation-dialog.png differ diff --git a/docs/en/tutorials/modular-crm/index.md b/docs/en/tutorials/modular-crm/index.md index fe092c8045..e6a0bb42ec 100644 --- a/docs/en/tutorials/modular-crm/index.md +++ b/docs/en/tutorials/modular-crm/index.md @@ -1,4 +1,4 @@ -## Modular Monolith Application Development Tutorial +# Modular Monolith Application Development Tutorial ABP provides a great infrastructure and tooling to build modular software solutions. In this tutorial, you will learn how to create application modules, compose and communicate them to build a monolith modular web application. diff --git a/docs/en/tutorials/modular-crm/part-01.md b/docs/en/tutorials/modular-crm/part-01.md index a25eb747e5..8304abbaa1 100644 --- a/docs/en/tutorials/modular-crm/part-01.md +++ b/docs/en/tutorials/modular-crm/part-01.md @@ -1,6 +1,6 @@ -## Creating the Initial Solution +# Creating the Initial Solution -Follow the [Get Stared](../../get-started/layered-web-application.md) guide to create a new layered web application with [ABP Studio](../../studio/index.md) the following configuration: +Follow the [Get Stared](../../get-started/layered-web-application.md) guide to create a new layered web application with the following configuration: * **Solution name**: `ModularCrm` * **UI Framework**: ASP.NET Core MVC / Razor Pages @@ -8,7 +8,7 @@ Follow the [Get Stared](../../get-started/layered-web-application.md) guide to c You can select the other options based on your preference. -> **Please complete the [Get Stared](../../get-started/layered-web-application.md) guide and run the web application.** +> **Please complete the [Get Stared](../../get-started/layered-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*: @@ -20,4 +20,6 @@ Initially, you see a `ModularCrm` solution and a `ModularCrm` module under that `ModularCrm` module is your main application, which is a layered .NET solution that consists of several packages (.NET projects). You can expand the `ModularCrm` module to see its packages: -![solution-explorer-modular-crm-expanded](images/solution-explorer-modular-crm-expanded.png) \ No newline at end of file +![solution-explorer-modular-crm-expanded](images/solution-explorer-modular-crm-expanded.png) + +We've created the initial layered monolith solution. In the next part, we will learn how to create an application module, build functionality inside it and install it to the main application. \ No newline at end of file diff --git a/docs/en/tutorials/modular-crm/part-02.md b/docs/en/tutorials/modular-crm/part-02.md index 09cc33ec33..6ed1979714 100644 --- a/docs/en/tutorials/modular-crm/part-02.md +++ b/docs/en/tutorials/modular-crm/part-02.md @@ -1,8 +1,10 @@ -## Building the Products Module +# Building the Products Module -In this part, you will create a new module for product management and add it to the main application. +In this part, you will build a new module for product management and install it to the main CRM application. -You can create folders and sub-folders in *Solution Explorer* to better organize your solution. Right-click to the solution root on the *Solution Explorer* panel, and select Add -> New Folder command: +## Creating Solution Folders + +You can create solution folders and sub-folders in *Solution Explorer* to better organize your solution components. Right-click to the solution root on the *Solution Explorer* panel, and select *Add* -> *New Folder* command: ![abp-studio-add-new-folder-command](D:\Github\abp\docs\en\tutorials\modular-crm\images\abp-studio-add-new-folder-command.png) @@ -10,11 +12,13 @@ That command opens a dialog where you can set the folder name: ![abp-studio-new-folder-dialog](D:\Github\abp\docs\en\tutorials\modular-crm\images\abp-studio-new-folder-dialog.png) -Create `main` and `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 below now: +Create `main` and `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: ![abp-studio-solution-explorer-with-folders](D:\Github\abp\docs\en\tutorials\modular-crm\images\abp-studio-solution-explorer-with-folders.png) -Now, we can create a new module in our solution. There are two module templates provided by ABP Studio: +## Creating the Products Module + +There are two 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. @@ -29,17 +33,23 @@ This command opens a new dialog to define properties of the new module. You can ![abp-studio-create-new-module-dialog](D:\Github\abp\docs\en\tutorials\modular-crm\images\abp-studio-create-new-module-dialog.png) -When you click the *Next* button, you are redirected to the UI selection step. Here, you can select the UI type you want to support in your module: +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](D:\Github\abp\docs\en\tutorials\modular-crm\images\abp-studio-create-new-module-dialog-step-ui.png) A module; -* May not contain a UI part to leave the UI development to the final application. +* 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 with 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 the main application. So, select the MVC UI and click the *Next* button. +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: @@ -47,6 +57,8 @@ The next step is to select the database provider (or providers) you want to supp 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 *Create* button. +### 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](D:\Github\abp\docs\en\tutorials\modular-crm\images\abp-studio-solution-explorer-two-modules.png) @@ -63,4 +75,24 @@ You can open `ModularCrm.Product.sln` in your favorite IDE (e.g. Visual Studio): ![product-module-visual-studio](D:\Github\abp\docs\en\tutorials\modular-crm\images\product-module-visual-studio.png) -As seen in the preceding figure, the `ModularCrm.Product` solution consists of several layers, each has own responsibility. \ No newline at end of file +As seen in the preceding figure, the `ModularCrm.Product` 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 to an executable application in order to run it. + +The product module has no relation to the main application yet. Right-click to the `ModularCrm` module (inside the `main` folder) and select the *Import Module* command: + +![abp-studio-import-module](images/abp-studio-import-module.png) + +The *Import Module* command opens a dialog as shown below: + +![abp-studio-import-module-dialog](images/abp-studio-import-module-dialog.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 setup project dependencies. Importing a module without installation can be used to manually setup your project dependencies. Here, we want to make it automatically, so checking 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 multi-layer application. \ No newline at end of file