Skip to content
This repository has been archived by the owner on Nov 21, 2024. It is now read-only.

Commit

Permalink
Merge branch 'dev' into EngincanV/master-detail-docs
Browse files Browse the repository at this point in the history
  • Loading branch information
hikalkan committed Nov 9, 2023
2 parents 24358b5 + 36edb69 commit 98bb46d
Show file tree
Hide file tree
Showing 27 changed files with 234 additions and 0 deletions.
4 changes: 4 additions & 0 deletions en/docs-nav.json
Original file line number Diff line number Diff line change
Expand Up @@ -554,6 +554,10 @@
"text": "Road Map",
"path": "road-map.md"
},
{
"text": "API Documentation",
"path": "{ApiDocumentationUrl}"
},
{
"text": "Migration Guides",
"path": "migration-guides/index.md"
Expand Down
21 changes: 21 additions & 0 deletions en/studio/_notes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
* Document Notes
* Quick Start: Creating a Layered Web Application
* **Disable the DEMO PLUGIN and re-take all screenshots**. Also, wait for the followings done:
* Re-take welcome page screenshot when the large logo is removed
* Re-take *Create new solution* wizard screenshot when we change it to Application (Layered)
* Re-take *Solution Properties* wizard page screenshot to hide *Use local ABP Framework* option
* Re-take *UI Theme* wizard page screenshot to remove the old *Lepton theme* selection
* Re-take *Database Configurations* wizard page screenshot to change connection string to LocalDb.
* Re-take the abp-studio-created-new-solution.png (after ABP Studio logo is removed from the welcome page).
* **Make that tutorial with options or extra sections**
* Options
* UI options (Angular, Blazor... etc)
* database providers (MongoDB, EF Core)
* Tiered / Non-Tiered selection
* Extra sections
* Mobile selection (none, MAUI, React Native)
* Public website selection
* Other Notes
* We should support MAUI Blazor Hybrid UI option as well.
* App-pro template: Root `aspnet-core` folder should not be exists. Event if the Angular UI is selected, we can create `angular` folder inside the root folder of the .NET solution.
* Docker-compose file is wrong for the app-pro template. There are bookstore-web and sql server for example. - Also, even when I delete these, it didn't properly started by ABP Studio. Network name is wrong. Run-docker.ps1 is also wrong...
34 changes: 34 additions & 0 deletions en/studio/_planning.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# ABP Studio Documentation Content Planning

* Installation
* Pre-requirements
* Login
* Changing the UI Theme
* Upgrading
* Quick Starts
* Creating a single-layer web application
* Creating a layered web application
* Creating a microservice solution
* Overview: Top menu, Left Area, Welcome page, Solution Explorer, Solution Runner, Kubernetes Integration, Application Monitor Area, Background Tasks, Notifications, Logs,
* Concepts (ABP Solution, Module, Package, Solution Folder, etc.)
* Tutorials
* Building Modular Monolith Applications
* Building Microservice Solutions
* Solution Templates
* Empty
* Application (Single Layer)
* Application (Layered)
* Microservice
* Building Solutions
* Creating modules, packages, folders
* Referencing packages
* Working With Existing Modules
* Import, Install, Uninstall, Download Source Code
* Running Applications
* Monitoring Applications
* Working with Kubernetes
* Exploring modules
* Analyzing Packages
* Using the ABP Studio CLI
* Extensibility / Plugin System
* Working with ABP Suite
39 changes: 39 additions & 0 deletions en/studio/concepts.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# ABP Studio Concepts

We use some concepts and terms in ABP Studio and the documentation that may not be clear when you first see. Some of them may seem new to you, or might be used in other meaning in different domains.

In this document, we are trying to clearly define these terms and concepts clearly, so you don't confuse.

## All Concepts and Terms

### Solution

*Typically referred as "ABP Studio Solution", or just "Solution".*

An ABP Studio solution is the most-top container that contains all the applications, modules and packages of your product or solution.

An ABP Studio solution may contain zero, one or many .NET solutions. For example, in a microservice solution, it may contain a separate .NET solution for each microservice, so you have multiple .NET solutions in your microservice solution. In such a scenario, each microservice (typically each separate .NET solution) will be a separate ABP Studio module.

### Module

*Typically referred as "ABP Studio Module", or just "Module".*

An ABP Studio module is a sub-solution that contains zero, one or multiple packages. A module typically have a corresponding .NET solution with one or multiple .NET projects (e.g. `csproj`). A .NET project is called as *Package* in ABP Studio.

### Package

*Typically referred as "ABP Studio Package", or just "Package".*

An ABP Studio Package typically matches to a .NET project (`csproj`).

## ABP Studio vs .NET Terms

Some ABP Studio terms may seem conflict with .NET and Visual Studio. To make them even more clear, you can use the following table.

| ABP Studio | .NET / Visual Studio |
| ---------- | ---------------------- |
| Solution | *- no matching term -* |
| Module | Solution |
| Package | Project |

In essence, ABP Studio uses the solution term to cover all the .NET solutions and other components of your product. ABP Studio is used to build and manage the relations of these multiple .NET solutions and provides a high-level view of the whole system.
3 changes: 3 additions & 0 deletions en/studio/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# ABP Studio

ABP Studio is a **cross-platform** desktop application for ABP developers. It is well integrated to [ABP Framework](https://abp.io/) and [ABP Commercial](https://commercial.abp.io/). It aims to provide a comfortable development environment for you by automating things, providing insights about your solution, making develop, run and deploy your solutions much easier.
3 changes: 3 additions & 0 deletions en/studio/installation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Installing ABP Studio

TODO
3 changes: 3 additions & 0 deletions en/studio/overview/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# ABP Studio: Overview

TODO: ...
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified en/studio/quick-starts/images/abp-studio-new-solution-dialog.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified en/studio/quick-starts/images/abp-studio-quick-start-browse.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified en/studio/quick-starts/images/abp-studio-welcome-screen.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified en/studio/quick-starts/images/bookstore-browser-users-page.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
127 changes: 127 additions & 0 deletions en/studio/quick-starts/layered-web-application.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
# Quick Start: Creating a Layered Web Application with ABP Studio

Welcome to ABP Studio. In this quick start guide, you will learn how to create and run a layered (and potentially modular) web application using ABP Studio.

## Creating a New Solution

> ABP Commercial startup solution templates have many options for your specific needs. If you don't understand an option that probably means you don't need it. We selected common defaults for you, so you can leave these options as they are.
Assuming that you have [installed and logged in](../installation.md) to the application, you should see the following screen when you open ABP Studio:

![abp-studio-welcome-screen](images/abp-studio-welcome-screen.png)

Select the *File* -> *New Solution* in the main menu, or click the *New solution* button on the Welcome screen to open the *Create new solution* wizard:

![abp-studio-new-solution-dialog](images/abp-studio-new-solution-dialog.png)

We will use the *Application (Layered)* solution template for this tutorial, so pick it and click the *Next* button:

![abp-studio-new-solution-dialog-solution-properties](images/abp-studio-new-solution-dialog-solution-properties.png)

In that screen, you choose a name for your solution. You can use different level of namespaces; e.g. `BookStore`, `Acme.BookStore` or `Acme.Retail.BookStore`.

Then select an *output folder* to create your solution. The *Create solution folder* option will create a folder in the given output folder with the same name of your solution.

Once your configuration is done, click the *Next* button to navigate to the *UI Framework* selection:

![abp-studio-new-solution-dialog-ui-framework](images/abp-studio-new-solution-dialog-ui-framework.png)

Here, you see all the possible UI options supported by that startup solution template. You can pick your favorite one.

Notice that; Once you select a UI type, some additional options will be available under the UI Framework list. You can further configure the options or leave them as default and click the *Next* button for the *UI Theme* selection screen:

![abp-studio-new-solution-dialog-ui-theme](images/abp-studio-new-solution-dialog-ui-theme.png)

LeptonX is the suggested UI theme that is proper for production usage. Select one of the theme and configure additional options and click the *Next* button for the *Mobile Framework* selection:

![abp-studio-new-solution-dialog-mobile-framework](images/abp-studio-new-solution-dialog-mobile-framework.png)

Here, you see all the mobile applications available in that startup solution template. These mobile applications are well-integrated to your solution and can use the same backend with your web application. They are simple (not have pre-built features as much as the web application) but a very good starting point to build your mobile application.

Pick the one best for you, or select the *None* if you don't want a mobile application in your solution, then click Next to navigate to the *Additional UI options* screen:

![abp-studio-new-solution-dialog-additional-ui-options](images/abp-studio-new-solution-dialog-additional-ui-options.png)

That startup solution template also provides an option to create a second web application inside the solution. The second application is called the Public website, an ASP.NET Core MVC / Razor Page application. It can be used to create a public landing/promotion for your product. It is well integrated to the solution (can share same services, entities, database and the same authentication logic, for example). If you want, you can also include the [CMS Kit module](../../modules/cms-kit/index.md) to your solution add dynamic content features to your web application.

So, either select the *Public website* or skip it and click the Next button for the *Solution Structure* selection:

![abp-studio-new-solution-dialog-solution-structure](images/abp-studio-new-solution-dialog-solution-structure.png)

The *Tiered* option is used to physically separate the web application (the UI part) from the backend HTTP APIs. It creates a separate host application that only serves the HTTP (REST) APIs. The web application then performs remote HTTP calls to that application for every operation. If the *Tiered* option is not selected, then the web and HTTP APIs are hosted in a single application, and the calls from the UI layer to the API layer are performed in-process.

The tiered architecture allows you to host the web (UI) application in a server that can not access to your database server. However, it brings a slight loss of performance (because of the HTTP calls between UI and HTTP API applications) and makes your architecture, development and deployment more complex. If you don't understand the tiered structure, just skip it.

After making your *Tiered* selection, you can click the *Next* button for the *Database Provider* selection:

![abp-studio-new-solution-dialog-database-provider](images/abp-studio-new-solution-dialog-database-provider.png)

On that screen, you can decide on your database provider by selecting one of the provided options. There are some additional options for each database provider. Leave them as default or change them based on your preferences, then click the *Next* button for additional *Database Configurations*:

![abp-studio-new-solution-dialog-database-configurations](images/abp-studio-new-solution-dialog-database-configurations.png)

Here, you can select the DBMS (only for Entity Framework Core) and the connection string. Now, we are ready to allow ABP Studio to create our solution. Just click the *Create* button and let it go.

After clicking the Create button, the dialog is closed and your solution is loaded into ABP Studio:

![abp-studio-created-new-solution](images/abp-studio-created-new-solution.png)

You can explore the solution, but you need to wait for background tasks to be completed before running any application in the solution.

> The solution structure can be different in your case based on the options you've selected.
## Running the Application

After creating your solution, you can open it in your favorite IDE (e.g. Visual Studio, Visual Studio Code or Rider) and start your development. However, ABP Studio provides a *Solution Runner* system. You can use it to easily run and browse your applications in your solution without needing an external tool.

Open the Solution Runner section on the left side of ABP Studio as shown in the following figure:

![abp-studio-quick-start-application-solution-runner](images/abp-studio-quick-start-application-solution-runner.png)

Once you click the *Play* icon on the left side, the ı section is open in the same place of the Solution Explorer section. ABP Studio also opens the *Application Monitor* view on the main content area. *Application Monitor* shows useful insights for your applications (e.g. *HTTP Request*, *Events* and *Exceptions*) as real-time. You can use it to see the happenings in your applications, so you can easily track errors and many helpful details.

In the Solution Runner section (on the left side) you can see all the runnable applications in the current solution. For the current example, we have three applications:

![abp-studio-quick-start-example-applications-in-solution-runner](images/abp-studio-quick-start-example-applications-in-solution-runner.png)

You can run all the applications or start them one by one. To start an application, either click the *Play* icon near to the application or right-click and select the *Run* -> *Start* context menu item.

I started the `Docker-Dependencies` and the `Acme.BookStore.Web` applications. The `Docker-Dependencies` is used to run the infrastructure service (e.g. Redis) in Docker. Start it first, so the web application can properly start.

> Notice that the services running in docker-compose are exposed to your localhost. If any service in your localhost is already using the same port(s), you will get an error. In that case, stop your local services first.
Once the `Acme.BookStore.Web` application started, you can right-click it and select the *Browse* command:

![abp-studio-quick-start-browse-command](images/abp-studio-quick-start-browse-command.png)

The *Browse* command opens the UI of the web application in the built-in browser:

![abp-studio-quick-start-browse](images/abp-studio-quick-start-browse.png)

You can browse your application in a full-featured web browser in ABP Studio. Click the *Login* button in the application UI, enter `admin` as username and `1q2w3E*` as password to login to the application.

The following screenshot was taken from the *User Management* page of the [Identity module](../../modules/identity.md) that is pre-installed to the application:

![abp-studio-quick-start-browse-user-list](images/abp-studio-quick-start-browse-user-list.png)

## Open the Solution in Visual Studio

You can use any IDE (e.g. Visual Studio, Visual Studio Code or Rider) to develop your solution. Here, we will show Visual Studio as an example.

First of all, we can stop the `Acme.BookStore.Web` application in ABP Studio, so it won't conflict when we run it in Visual Studio. Do not stop the `Docker-Dependencies`, because the application will need the services it runs at runtime.

You can use ABP Studio to open the solution with Visual Studio. Right-click to the `Acme.BookStore` [module](../concepts.md), and select the *Open with* -> *Visual Studio* command:

![abp-studio-open-in-visual-studio](images/abp-studio-open-in-visual-studio.png)

If the *Visual Studio* command is not available, that means ABP Studio could not detect it in your computer. You can open the solution folder in your local file system (you can use the *Open with* -> *Explorer* as a shortcut) and manually open the solution in Visual Studio.

Once the solution is opened in Visual Studio, you should see a screen like shown below:

![visual-studio-bookstore-application](images/visual-studio-bookstore-application.png)

Right-click the `Acme.BookStore.Web` project and select the *Set as Startup Project* command. You can then hit *F5* or *Ctrl + F5* to run the web application. It will run and open the application UI in your default browser:

![bookstore-browser-users-page](images/bookstore-browser-users-page.png)

You can use `admin` as username and `1q2w3E*` as default password to login to the application.

0 comments on commit 98bb46d

Please sign in to comment.