mirror of https://github.com/abpframework/abp
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
5.5 KiB
127 lines
5.5 KiB
## Začínáme s Angular aplikační šablonou
|
|
|
|
Tento tutoriál vysvětluje, jak vytvořit novou Angular aplikaci pomocí spouštěcí šablony, jak ji nakonfigurovat a spustit.
|
|
|
|
### Tvorba nového projektu
|
|
|
|
Tento tutorial používá k vytvoření nového projektu **ABP CLI**. Podívejte se na stránku [začínáme](https://abp.io/get-started) pro více možností.
|
|
|
|
Pokud jste tak dosud neučinili, nainstalujte ABP CLI pomocí okna příkazového řádku:
|
|
|
|
````bash
|
|
dotnet tool install -g Volo.Abp.Cli
|
|
````
|
|
|
|
Použíjte příkaz `abp new` v prázdné složce k vytvoření Vašeho projektu:
|
|
|
|
````bash
|
|
abp new Acme.BookStore -u angular
|
|
````
|
|
|
|
> Můžete použít různé úrovně jmenných prostorů; např. BookStore, Acme.BookStore nebo Acme.Retail.BookStore.
|
|
|
|
`-u angular` volba specifikuje Angular jako UI framework. Výchozí poskytovatel databáze je EF Core. Podívejte se na [CLI dokumentaci](CLI.md) pro všechny dostupné možnosti.
|
|
|
|
#### Předběžné požadavky
|
|
|
|
Vytvořené řešení vyžaduje;
|
|
|
|
* [Visual Studio 2019 (v16.4.0+)](https://visualstudio.microsoft.com/vs/)
|
|
* [.NET Core 3.0+](https://www.microsoft.com/net/download/dotnet-core/)
|
|
* [Node v12+](https://nodejs.org)
|
|
* [Yarn v1.19+](https://classic.yarnpkg.com/)
|
|
|
|
### Struktura řešení
|
|
|
|
Otevřete řešení ve **Visual Studio**:
|
|
|
|
![bookstore-visual-studio-solution](images/bookstore-visual-studio-solution-for-spa.png)
|
|
|
|
Řešení má vrstvenou strukturu (založenou na [domain driven designu](Domain-Driven-Design.md)) a obsahuje projekty testů jednotek a integrace správně nakonfigurované pro práci s **EF Core** & **SQLite in-memory** databází.
|
|
|
|
> Podívejte se na [dokument šablony aplikace](Startup-Templates/Application.md) k detailnímu pochopení struktury řešení.
|
|
|
|
### Databázový connection string
|
|
|
|
Zkontrolujte **connection string** v souboru `appsettings.json` u projektu `.HttpApi.Host`:
|
|
|
|
````json
|
|
{
|
|
"ConnectionStrings": {
|
|
"Default": "Server=localhost;Database=BookStore;Trusted_Connection=True"
|
|
}
|
|
}
|
|
````
|
|
|
|
Řešení je nakonfigurováno pro použití **Entity Framework Core** s **MS SQL Server**. EF Core podporuje [různé](https://docs.microsoft.com/en-us/ef/core/providers/) poskytovatele databáze, takže pokud chcete můžete použít jiný DBMS. V případě potřeby změňte connection string.
|
|
|
|
### Tvorba databáze & aplikace migrací databáze
|
|
|
|
K vytvoření databáze máte dvě možnosti.
|
|
|
|
#### Použití aplikace DbMigrator
|
|
|
|
Řešení obsahuje konzolovou aplikaci (v tomto příkladu nazvanou `Acme.BookStore.DbMigrator`), která dokáže vytvořit databázi, aplikovat migrace a vložit počáteční data. Ta je užitečná jak pro vývojové tak pro produkční prostředí.
|
|
|
|
> `.DbMigrator` má vlastní `appsettings.json`. Pokud jste změnili connection string výše, měli byste změnit i tento.
|
|
|
|
Klikněte pravým na projekt `.DbMigrator` zvolte **Set as StartUp Project**:
|
|
|
|
![set-as-startup-project](images/set-as-startup-project.png)
|
|
|
|
Zmáčkněte F5 (nebo Ctrl+F5) ke spuštění aplikace. Výstup by měl být podobný vyobrazení níže:
|
|
|
|
![set-as-startup-project](images/db-migrator-app.png)
|
|
|
|
#### Použití příkazu EF Core Update-Database
|
|
|
|
Ef Core máš příkaz `Update-Database`, který v případě potřeby vytvoří databázi a aplikuje čekající migrace. Klikněte pravým na projekt `.HttpApi.Host` a zvolte **Set as StartUp Project**:
|
|
|
|
![set-as-startup-project](images/set-as-startup-project.png)
|
|
|
|
Otevřete **Package Manager Console**, zvolte `.EntityFrameworkCore.DbMigrations` jako **Default Project** a proveďte příkaz `Update-Database`:
|
|
|
|
![pcm-update-database](images/pcm-update-database-v2.png)
|
|
|
|
Tímto vytvoříte novou databáze podle nakonfigurovaného connection string.
|
|
|
|
> Je doporučeno užití nástroje `.DbMigrator`, protože zároveň vloží i počáteční data ke správnému běhu webové aplikace.
|
|
|
|
### Spuštění aplikace
|
|
|
|
#### Spuštění API Host (na straně serveru)
|
|
|
|
Ujistěte se že je projekt `.HttpApi.Host` nastaven jako startovací a spusťte aplikaci což otevře Swagger UI:
|
|
|
|
![bookstore-homepage](images/bookstore-swagger-ui-host.png)
|
|
|
|
Tady můžete vidět API aplikace a zároveň je i otestovat. Získejte [více informací](https://swagger.io/tools/swagger-ui/) o Swagger UI.
|
|
|
|
##### Autorizace pro Swagger UI
|
|
|
|
Vetšina API aplikace vyžaduje autentizaci & autorizaci. Pokud chcete otestovat autorizované API, manuálně přejděte na stránku `/Account/Login`, vložte `admin` jako uživatelské jméno a `1q2w3E*` jako heslo k příhlášení do aplikace. Poté budete moci provádět autorizované požadavky API.
|
|
|
|
#### Spuštění Angular aplikace (na straně klienta)
|
|
|
|
Přejděte do složky `angular`, otevřete terminál příkazového řádku, proveďte příkaz `yarn` (doporučujeme používat správce balíků [yarn](https://yarnpkg.com), npm install bude v mnoha případech také fungovat):
|
|
|
|
````bash
|
|
yarn
|
|
````
|
|
|
|
Jakmile jsou načteny všechny node moduly, proveďte příkaz `yarn start` nebo `npm start`:
|
|
|
|
````bash
|
|
yarn start
|
|
````
|
|
|
|
Otevřete Váš oblíbený prohlížeč a přejděte na adresu `localhost:4200`. Počáteční uživatelské jméno je `admin` a heslo `1q2w3E*`.
|
|
|
|
Startovací šablona obsahuje moduly **správa identit** a **správa tenantů**. Jakmile se přihlásíte, zprístupní se administrační menu kde můžete spravovat **tenanty**, **role**, **uživatele** a jejich **oprávnění**.
|
|
|
|
> Doporučujeme [Visual Studio Code](https://code.visualstudio.com/) jako editor pro Angular projekt, ale klidně použijte Váš oblíbený editor.
|
|
|
|
### Co dále?
|
|
|
|
* [Tutoriál vývoje aplikace](Tutorials/Angular/Part-I.md)
|