Lekce 1 - E-shop v ASP.NET Core MVC - Struktura řešení

Vítám všechny středně pokročilé a pokročilé programátory u kurzu E-shop v ASP.NET Core 3.X MVC. V tomto on-line kurzu vytvoříme plně funkční e-shop s využitím následujících technologií:

• Entity Framework Core - ORM s metodikou Code First
• Repository - návrhový vzor pro práci s daty
• ASP.NET Identity - framework pro správu uživatelů a rolí, autentizaci a autorizaci
• Extension metody - ukážeme si příklady, jak rozšířit funkcionalitu stávajících tříd
• Generické třídy - umí ušetřit spoustu psaní a věřím, že si je oblíbíte
• AutoMapper - pomáhá s mapováním tříd
• Javascript - trocha kódu bude i na straně klienta
• AJAX a mnoho dalších ...

Kurz vás dokonale připraví na zaměstnání v C# .NET, jelikož většina pracovních pozic vyžaduje kromě samotného C# také dobrou znalost webového frameworku ASP.NET. Zkušenosti s modernějším Core jsou vítanou výhodou. Samozřejmě můžete znalosti využít i do svého podnikání.

Základní požadavky na e-shop

Jelikož obchod bude opravdu reálně použitelný, zamysleme se alespoň nad základními požadavky:

• Správa uživatelů a rolí - Tak jako ve většině webových aplikací i zde je potřeba rozlišovat běžné návštěvníky e-shopu od administrátorů, kteří mají dostupných více funkcionalit. Navíc ještě musíme umožnit nákup i neregistrovaným uživatelům (uživatelům bez přihlašovacích údajů).
• Správa produktů a kategorií - Přehledně zobrazit produkty (včetně jejich obrázků) s možností vkládání a editace. Zařazovat produkty do kategorií. Vyhledávat, filtrovat a řadit produkty ve výpisu. Umožnit uživatelům napsat hodnocení zakoupeného produktu.
• Systém objednávek - Vést uživatele nákupním procesem od vložení zboží do nákupního košíku přes zadání fakturačních údajů a výběr způsobu dopravy až po dokončení objednávky včetně odeslání potvrzovacího emailu.
• Historizace záznamů - Zajistit integritu a platnost dat. Žádné provedené úpravy nesmějí ovlivnit již provedené transakce v e-shopu.
• Responzivní webdesign - Přehledně zobrazovat stránky i na menších displejích.

Požadovaný vzhled aplikace

Požadovaný vzhled si přiblížíme na následujících obrázcích:

Upozornění - Vývoj reálného firemního projektu v praxi

A je to tady! V tomto unikátním kurzu budeš pracovat na reálném firemním projektu a po jeho absolvování se staneš panem programátorem! Díky tomu je samozřejmě kurz i mnohem náročnější než vše, co jsi doposud potkal. Výukové kurzy jsou ve většině případů uměle udělané tak, abys pochopil nějakou úzkou problematiku a nemátly tě dalšími tématy a ze začátku to je tak i efektivní. V tomto kurzu už ale nevytvoříš appky alá "TODO" nebo "evidence knížek, co mám doma", ale plnohodnotný komerční software, za jehož tvorbu firmy reálně platí šestimístné částky svým zaměstnancům. Na projekt se také vztahuje licence Premium no-reselling, takže jej není možné zveřejňovat jako zdrojový kód nebo přeprodávat.

Co je jinak?

Počítej s tím, že už ne úplně vše ti napoprvé půjde. Cílem kurzu je podívat se jak se programuje ve firmách a pochytit z toho co nejvíc. Cílem tedy výjimečně není pochopit vše a už vůbec ne to napsat, spustit a čekat, že vše bude napoprvé fungovat. Lekcí je opravdu spoustu, budeš dělat překlepy, budeš mít projekt v jiném stavu než je v kurzu, něco jinak pochopíš apod. Na zdolání kurzu je naštěstí jednoduchý postup:

• Zkontroluj si minimální požadavky - Prvně se ujisti, že máš za sebou kurzy zmíněné v pasáži "Minimální znalosti". Jestli ti nějaký chybí, nemáš bez něj tento kurz šanci projít a prvně si jej absolvuj. Pokud minimální požadavky splňuješ, nemusíš se bát, že to nezvládneš!
• Drž se řešení, která používá kurz - Nesnaž se odchylovat od kurzu použitím vlastního řešení, při komplexnosti kurzu by mohlo být nekompatibilní s další budoucí implementací a připravuješ se také o možnost používat řešení vzorová. Upravit projekt si můžeš po skončení kurzu.
• Používej záchytné body - Až budeš mít s něčím problém (a to se při komplexnosti a délce kurzu stane a neznamená to, že jsi špatný ty ani kurz), každých několik lekcí je dole ke stažení funkční projekt jako záchytný bod. Ten si stáhni a najdi si chybu v tom svém nebo, pokud se ti to nepodaří, pokračuj s tímto staženým projektem.
• Využívej pomoc komunity - Dále můžeš využít možnosti komentářů (přečíst si komentáře ostatních na dané lekci, zda již někdo podobný problém neřešil, nebo napsat vlastní). Ve firmě ti s vývojem také někdo ze začátku pomůže a budeš se ptát, nedáš všechno hned sám. Zde za kolegy suplují záchytné archivy a diskuze.

Máš jedinečnou šanci zkusit si, jak to reálně vypadá, a dovršit své junior znalosti na uplatnitelnou úroveň nebo prohloubit své znalosti až na medior úroveň. Jeden život, jedna šance, pojďme na to!

Požadavky na znalosti

Tento projekt je na pomezí junior/medior co se týká levelu znalostí. V rámci levelu znalostí Junior se předpokládá spíše orientace v tomto větším reálném C# projektu, než že budete úplně všemu rozumět. Pokud byste chtěli detailně pochopit veškerý kód, pomohou vám znalosti v rozsahu Medior-level.

Junior-level znalosti

V rámci levelu znalostí Junior se předpokládají znalosti v tomto rozsahu:

• Základní konstrukce jazyka C# .NET
• Objektově orientované programování v C# .NET
• Kolekce Seznam, Slovníky a LINQ v C# .NET
• HTML a CSS
• Visual Studio
• Databáze v C# - ADO.NET
• Základy ASP.NET Core MVC

Medior-level znalosti

Pokud byste chtěli detailně pochopit veškerý kód, pomohou vám ještě následující znalosti, nicméně počítejte s vyšší časovou náročností:

• Debugging
• Základní konstrukce jazyka JavaScript
  • jQuery - Dynamické doplňky webu
• Git
  • např. pro přepínání mezi commity (verzemi e-shopu) při analýze posledních změn
• UML
• Dependency injection a softwarové architektury

Začínáme

Tutoriál je psán pro verzi Core 3.1. Pokud tuto verzi nainstalovanou nemáte, můžete si stáhnout ze stránky se všemi SDK.

Pozor, dodržuj přesné verze komponent! Pokročilé projekty jako tento jsou složené z komponent. Možná by tě napadlo použít nejnovější verzi nějaké komponenty, co zrovna včera vyšla. Projekt ti pak ale bez odborné úpravy pravděpodobně nebude fungovat! U verzí komponent neplatí jako např. u aktualizace Windows, že chceme každý den používat tu nejnovější. Neustálé aktualizace všeho by totiž vyžadovaly každodenní a komplexní změny kódu projektu a reálně se tak neprovádějí. Ze stejného důvodu i my aktualizujeme kurzy v pravidelných intervalech a nové verze k sobě pak sladíme tak, aby vše fungovalo.

Ve Visual Studiu si vytvoříme nový projekt typu ASP.NET Core Web App (Model-View-Controller) (já budu pracovat ve Visual studiu 2019 Community Edition - potřebujeme verzi alespoň 16.4+):

TargetFramework zvolíme .NET Core 3.1. a Authentication Type vybereme Individual Accounts:

Struktura řešení

Reálné komerční projekty mají spoustu tříd a určitě bychom si v nich nevystačili pouze s rozdělením struktury projektu na modely, kontrolery a pohledy. Mít v jedné složce desítky souborů je minimálně nepřehledné. Kód by se špatně spravoval a z vlastní zkušenosti mohu říci, že bychom se dostali do bodu, kdy bychom psali podobné metody znovu a znovu místo toho, abychom parametrizovali nějakou existující, protože bychom zkrátka ani nevěděli, že v projektu nějaká podobná již je. A to je začátek konce . Jak z toho ven?

Projekty

Celé řešení rozdělíme do více vrstev. Každá vrstva bude v samostatném projektu. Náš projekt bude středně složitý, proto si vystačíme s následujícími vrstvami:

• Datová vrstva - Bude obsahovat část, která se bude starat o ukládání a načítání dat. Ostatní části řešení budou využívat její metody (a v našem případě asi i třídy), aniž by se zajímaly o to, kde jsou vlastně data uložena a jakým způsobem. Metody pro práci s daty implementujeme do této vrstvy v podobě repositářů.
• Business vrstva - Bude obsahovat téměř všechnu logiku našeho řešení rozdělenou do tzv. manažerů podle entit, ke kterým dané metody patří. Dále sem přidáme nějaké pomocné třídy, ViewModely a nějaký "mapper", který nám pomůže přetypovávat třídy mezi sebou.
• Aplikační vrstva - To je ten náš (zatím jediný) vytvořený projekt. Bude obsahovat hlavně viewmodely, kontrolery a pohledy. A také další části, které patří k webové aplikaci - CSS styly, skripty, obrázky apod.

Aplikační vrstva

Aplikační vrstvu již máme. Jedná se o projekt Eshop.

Business vrstva

Založíme business vrstvu. Bude se jednat o projekt Eshop.Business.

V okně Solution Explorer klikneme pravým tlačítkem myši na Solution a Add, pak New Project.... V okně Add a new project zvolíme Class Library nebo Class Library (.NET Standard) v závislosti na nabídce Visual Studio. V případě první možnosti cílovou platformu knihovny .NET Standard 2.0 vybereme až v posledním kroku. Druhou možnost volíme, pokud nám Visual Studio nenabízí jen obecnou Class Library, ale již přímo i s volbou platformy, poslední krok zde již potom není.

Po založení projektu Eshop.Business klikneme pravým tlačítkem na projekt Eshop.Business, vybereme Properties a zkontrolujeme, že cílová platforma knihovny TargetFramework je vybrána .NET Standard 2.0:

Automaticky vytvořenou třídu Class1 odstraníme.

Datová vrstva

Obdobně založíme datovou vrstvu. Projekt se bude jmenovat Eshop.Data.

Zkontrolovali jsme cílovou platformu knihovny TargetFramework .NET Standard 2.0 a odstranili třídu Class1.

Nastavení referencí

Abychom mohli v jednom projektu využívat objektů z jiného projektu, musíme si nastavit reference.

Reference z Eshop.Business na Eshop.Data

Nastavíme si referenci z business projektu na datový projekt. V okně Solution Explorer klikneme pravým tlačítkem myši na business projekt Eshop.Business a vybereme Add, a pak Project Reference.... V levé části okna vybereme Projects a zaškrtneme datový projekt Eshop.Data:

Po kliknutí na OK klikneme na projekt Eshop.Business, kde v <ItemGroup> uvidíme <ProjectReference> na Eshop.Data.

Reference z Eshop na Eshop.Business a Eshop.Data

Protože naše aplikace bude ještě v udržitelném rozsahu, nebudeme v business vrstvě využívat žádné DTO nebo DAO modely. U ještě větších aplikací bývá aplikační vrstva od datové úplně odstíněna. My si nastavíme referenci z aplikačního projektu na business i datový projekt.

V okně Solution Explorer klikneme pravým tlačítkem myši na aplikační projekt Eshop a vybereme Add, a pak Project Reference.... V levé části okna vybereme Projects a zaškrtneme business projekt Eshop.Business a datový projekt Eshop.Data:

Po kliknutí na OK klikneme na projekt Eshop, kde v <ItemGroup> uvidíme <ProjectReference> na Eshop.Business a Eshop.Data.

Složky

V jednotlivých projektech si budeme uspořádávat soubory s kódem do složek (a třídy do odpovídajících jmenných prostorů). Výslednou strukturu hotového projektu můžeme vidět na obrázku:

Význam složek se dá většinou odvodit z jejich názvu. Složky si teď nebudeme vytvářet. Budeme si je zakládat postupně. V kurzu bude vždy zmíněno vytvoření složky.

To by bylo pro dnešek vše. Máme představu o tom, jak bude vypadat struktura našeho řešení a proč.

V příští lekci, E-shop v ASP.NET Core MVC - Identity, databáze a layout, se podíváme na connection string, správu migrací, provedeme úpravy před generováním databáze a nastavíme vzhled naší webové aplikace.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.