Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:01 [2023/02/20 22:56] ciprian.dobre [Cateva concepte de baza in dezvoltarea de aplicatii web] |
pw:laboratoare:01 [2023/02/26 11:30] (current) ciprian.dobre [Introducere in .NET si unelte de dezvoltare] |
||
|---|---|---|---|
| Line 3: | Line 3: | ||
| ===== Scopul laboratorului ===== | ===== Scopul laboratorului ===== | ||
| - | Laboratorul de programare web isi propune sa invete studentii concepte fundamentale in acest domeniu si a fost gandit in asa fel incat sa se dobandeasca concepte usuale pentru dezvoltarea de aplicatii web. Sustinem pluralismul in folosirea de tehnologii dar sugeram ca in practica sa fie folosita acea tehnologie care este cea mai adecvata pentru proiectul in cauza. | + | Laboratorul de programare web isi propune sa invete studentii concepte fundamentale in acest domeniu si a fost gandit in asa fel incat sa se dobandeasca concepte uzuale pentru dezvoltarea de aplicatii web. Sustinem pluralismul in folosirea de tehnologii dar sugeram ca in practica sa fie folosita acea tehnologie care este cea mai adecvata pentru proiectul in cauza. |
| Laboratorul se va axa pe doua tehnologii care se gasesc pe piata de dezvoltare a aplicatiilor web, **ASP.NET** si **React** pentru dezvolatea a backend-ului respectiv a frontend-ului. Prima jumatate a laboratorului se va axa pe dezvoltarea backend-ului in .NET. | Laboratorul se va axa pe doua tehnologii care se gasesc pe piata de dezvoltare a aplicatiilor web, **ASP.NET** si **React** pentru dezvolatea a backend-ului respectiv a frontend-ului. Prima jumatate a laboratorului se va axa pe dezvoltarea backend-ului in .NET. | ||
| Line 9: | Line 9: | ||
| ===== Introducere in .NET si unelte de dezvoltare ===== | ===== Introducere in .NET si unelte de dezvoltare ===== | ||
| - | .NET este o platforma de dezvoltare create de Microsoft initial pentru Windows dar care acum este cross-platform. Este una dintre platformele cele mai folosite pentru dezvoltare web pentru aplicatii enterprise, alta tehnologie foarte folosita este Java Spring. Avantajele de a folosi .NET sunt ca e cross-platform, usor de folosit, are o comunitate larga si are documentie buna. Principalul limbaj folosit pentru scrierea de aplicatii in .NET este C#, un limbaj orientat pe obiecte si functional similar cu Java. | + | .NET este o platforma de dezvoltare creata de Microsoft initial pentru Windows dar care acum este cross-platform. Este una dintre platformele cele mai folosite pentru dezvoltare web pentru aplicatii enterprise, alta tehnologie foarte folosita este Java Spring. Avantajele de a folosi .NET sunt ca e cross-platform, usor de folosit, are o comunitate larga si are documentie buna. Principalul limbaj folosit pentru scrierea de aplicatii in .NET este C#, un limbaj orientat pe obiecte si functional similar cu Java. |
| Veti avea nevoie de urmatoarele inainte de a incepe dezvoltarea efectiva: | Veti avea nevoie de urmatoarele inainte de a incepe dezvoltarea efectiva: | ||
| Line 15: | Line 15: | ||
| * Pentru Windows recomandam Visual Studio 2022 Community gasit [[https://visualstudio.microsoft.com/vs/|aici]] sau puteti accesa prin [[https://my.upb.ro/|MyUPB]] varianta Professional sau Enterprise de [[https://azureforeducation.microsoft.com/devtools|aici]] | * Pentru Windows recomandam Visual Studio 2022 Community gasit [[https://visualstudio.microsoft.com/vs/|aici]] sau puteti accesa prin [[https://my.upb.ro/|MyUPB]] varianta Professional sau Enterprise de [[https://azureforeducation.microsoft.com/devtools|aici]] | ||
| * Pentru Linux/MacOSX sau daca vreti o alternativa puteti folosi platforma [[https://www.jetbrains.com/dotnet/|DotUltimate]] cu [[https://www.jetbrains.com/rider/|Rider]] ca IDE, puteti cere licenta academica pentru toata suita de la Jetbrains cu emailul institutional. Este posibil sa fie nevoie sa instalati SDK-ul pentru .NET 6 de [[https://dotnet.microsoft.com/en-us/download/visual-studio-sdks|aici]]. | * Pentru Linux/MacOSX sau daca vreti o alternativa puteti folosi platforma [[https://www.jetbrains.com/dotnet/|DotUltimate]] cu [[https://www.jetbrains.com/rider/|Rider]] ca IDE, puteti cere licenta academica pentru toata suita de la Jetbrains cu emailul institutional. Este posibil sa fie nevoie sa instalati SDK-ul pentru .NET 6 de [[https://dotnet.microsoft.com/en-us/download/visual-studio-sdks|aici]]. | ||
| - | * Bonus: puteti folosi Visual Studio cu ReSharper de la Jetbrains pentru o experienta mai buna cu IDE-ul. | + | * Bonus: puteti folosi Visual Studio cu ReSharper de la Jetbrains pentru o experienta mai buna cu IDE-ul dar trebuie sa aveti cel putin 16GB RAM. |
| - Baza de date PostgreSQL | - Baza de date PostgreSQL | ||
| * O varianta este sa instalati [[https://www.postgresql.org/|PostreSQL]] pe masina locala, varianta pe care nu o recomandam. | * O varianta este sa instalati [[https://www.postgresql.org/|PostreSQL]] pe masina locala, varianta pe care nu o recomandam. | ||
| Line 23: | Line 23: | ||
| * Daca doriti un client universal puteti opta pentru [[https://dbeaver.io/download/|DBeaver]]. | * Daca doriti un client universal puteti opta pentru [[https://dbeaver.io/download/|DBeaver]]. | ||
| - | Pentru programarea efectiva in C# sunt necesare doar cunostinte de baza de programare orientate pe obiecte si programare functionala. Pentru cine stie deja Java adaptarea la C# nu ar trebui sa fie o problema, unde vor fi diferente majore o sa explicate in laborator. | + | Pentru programarea efectiva in C# sunt necesare doar cunostinte de baza de programare orientate pe obiecte si programare functionala. Pentru cine stie deja Java adaptarea la C# nu ar trebui sa fie o problema, unde vor fi diferente majore vor fi explicate la laborator. |
| Exista particularitati in scrierea de cod C#, daca aveti probleme in a intelege scheletul de laborator puteti consulata documentatia de la [[https://learn.microsoft.com/en-us/dotnet/csharp/|Microsoft]] si cartea electronica a lor pentru dezvoltarea de aplicatii web de [[https://dotnet.microsoft.com/en-us/download/e-book/microservices-architecture/pdf|aici]], chiar daca sunt expuse idei in implementarea arhitecturilor pe microservicii principiile de design patterns si best practice sunt folositoare si pentru dezvoltarea de aplicatii backend monolit. | Exista particularitati in scrierea de cod C#, daca aveti probleme in a intelege scheletul de laborator puteti consulata documentatia de la [[https://learn.microsoft.com/en-us/dotnet/csharp/|Microsoft]] si cartea electronica a lor pentru dezvoltarea de aplicatii web de [[https://dotnet.microsoft.com/en-us/download/e-book/microservices-architecture/pdf|aici]], chiar daca sunt expuse idei in implementarea arhitecturilor pe microservicii principiile de design patterns si best practice sunt folositoare si pentru dezvoltarea de aplicatii backend monolit. | ||
| Line 32: | Line 32: | ||
| Intr-o aplicatie MPA fiecare pagina servita pentru browser este creata printr-un template HTML si populata cu date direct de catre server iar modelul de programare folosit aici este **MVC (Model-View-Controller)**, insa in acest laborator vom folosi un SPA pentru frontend astfel incat serverul va expune doar date si servicii printr-un API. Pentru simplitate API-ul va fi de tip **REST (REpresentational State Transfer)** unde datele schimbate intre server si client sunt date in format **JSON**. | Intr-o aplicatie MPA fiecare pagina servita pentru browser este creata printr-un template HTML si populata cu date direct de catre server iar modelul de programare folosit aici este **MVC (Model-View-Controller)**, insa in acest laborator vom folosi un SPA pentru frontend astfel incat serverul va expune doar date si servicii printr-un API. Pentru simplitate API-ul va fi de tip **REST (REpresentational State Transfer)** unde datele schimbate intre server si client sunt date in format **JSON**. | ||
| - | Aplicatiile backend si ele pot fi impartite in doua categorii, **monotit** si **bazate pe microservicii**. Backend-ul monolit este un singur proces care are un server HTTP si contine intreaga logica a aplicatiei pe cand microserviicle sunt mai multe procese care lucreaza impreuna pentru a implementa logica aplicatiei, fiecare microserviciu avand propria responsabilitate in intregul sistem distinct de celelalte. Exista avantaje si dezavantaje pentru fiecare, noi o sa folosim o arhitectura de tip monolit pentru simplitatea implementarii. | + | Aplicatiile backend si ele pot fi impartite in doua categorii, **monolit** si **bazate pe microservicii**. Backend-ul monolit este un singur proces care are un server HTTP si contine intreaga logica a aplicatiei pe cand microserviciile sunt mai multe procese care lucreaza impreuna pentru a implementa logica aplicatiei, fiecare microserviciu avand propria responsabilitate in intregul sistem distinct de celelalte. Exista avantaje si dezavantaje pentru fiecare, noi o sa folosim o arhitectura de tip monolit pentru simplitatea implementarii. |
| <note warning>Laboratorul va arata cum sa va faceti un backend cu arhitectura de tip **monolit** unde toata logica backend-ului este stransa intr-un singur proces. Aceleasi principii si concepte de dezvoltare se folosesc si intr-o arhitectura bazata pe **microservicii** insa aceasta arhitectura este avansata, necesita mult timp pentru a o stapanii si nu se recomanda a se folosi daca proiectul este la inceput mai ales daca echipa de dezvoltare e mica.</note> | <note warning>Laboratorul va arata cum sa va faceti un backend cu arhitectura de tip **monolit** unde toata logica backend-ului este stransa intr-un singur proces. Aceleasi principii si concepte de dezvoltare se folosesc si intr-o arhitectura bazata pe **microservicii** insa aceasta arhitectura este avansata, necesita mult timp pentru a o stapanii si nu se recomanda a se folosi daca proiectul este la inceput mai ales daca echipa de dezvoltare e mica.</note> | ||
| Line 44: | Line 44: | ||
| {{:pw:laboratoare:rider.png?700|}} | {{:pw:laboratoare:rider.png?700|}} | ||
| - | Veti observa ca punctul de intrare a programului este fisierul Program.cs, practic este o functie main care nu este declarata in mod explicit. Aici se creaza un obiect care reprezinta aplicatia web si poate fi configurata cum este si in exemplu configurarea pentru autorizare, pentru maparea controller-elor sau configurarea swagger-ului. Urmeaza sa fie delaliate mai multe in laboratoarele ce urmeaza. | + | Veti observa ca punctul de intrare a programului este fisierul Program.cs, practic este o functie main care nu este declarata in mod explicit. Aici se creaza un obiect care reprezinta aplicatia web si poate fi configurata cum este si in exemplu configurarea pentru autorizare, pentru maparea controller-elor sau configurarea swagger-ului. Urmeaza sa fie delaliate mai multe in laboratoarele viitoare. |
| + | <note tip>Vedeti ca in C# vi se creaza un proiect intr-o solutie, solutia gestioneaza mai multe proiecte si o puteti folosi ca sa tineti referinte intre proiecte ca de exemplu sa refolositi clase comune intre diferite proiecte de backend printr-o biblioteca partajata.</note> | ||
| {{:pw:laboratoare:firstproject.png?700|}} | {{:pw:laboratoare:firstproject.png?700|}} | ||
| - | Veti gasi si un fisier appsettings.json care contine un JSON pentru configurarea aplicatiei, o sa fie folosit pentru a seta variabile ce sa fie folosite de backend. De asemenea, veti gasi si un controller foarte simplu, acesta va raspunde la cererile HTTP de la clienti. | + | Veti gasi si un fisier appsettings.json care contine un JSON pentru configurarea aplicatiei, o sa fie folosit pentru a seta variabile ce sa fie folosite de backend. De asemenea, veti gasi si un controller foarte simplu, acesta va raspunde la cererile HTTP de la clienti. Trebuie sa retineti ca in dezvoltarea de aplicatii web se foloseste extrem de mult **Dependency Injection**, desi conceptul o sa fie detaliat mai mult la laboratoarele urmatoare puteti observa in cod ca componentele/clasele din proiect cum este acel WeatherForecastController nu este instantiat in mod explicit, instantierea se face in mod implicit de catre framework calculand **dependentele** acelei componente si **injectandu-le** in componenta la instatiere prin constructor cu este si logger-ul din exemplu la cerere componentei. Asa o sa puteti in laboratoarele urmatoare sa va folositi de componente in tot codul vostru cerandu-le prin constructor de la framework. |
| {{:pw:laboratoare:firstproject2.png?700|}} | {{:pw:laboratoare:firstproject2.png?700|}} | ||
| - | Rulati aplicatia de backend, o sa va deschisa o pagina in browser cu un **Swagger**, sau cum se mai nume si **OpenAPI Specification**. Swagger-ul este o interfata simpla pentru testarea cererilor HTTP fara sa fie nevoie de de un client HTTP si, de asemenea, acesta va descrie intregul API HTTP al serverului cu toate rutele si tipurile de date schimbate cu clientul. Incercati sa executati o cerere catre backend din pagina Swagger-ului. Swagger-ul este important pentru ca va usureaza testarea backend-ului si pentru ca descriind cum API-ul poate fi folosit ca sa generati in mod automat clientii HTTP pentru aplicatiile care consuma API-ul expus. | + | Rulati aplicatia de backend, o sa va deschida o pagina in browser cu un **Swagger**, sau cum se mai numeste altfel, **OpenAPI Specification**. Swagger-ul este o interfata simpla pentru testarea cererilor HTTP fara sa fie nevoie de un client HTTP si, de asemenea, acesta va descrie intregul API HTTP al serverului cu toate rutele si tipurile de date schimbate cu clientul. Incercati sa executati o cerere catre backend din pagina Swagger-ului. Swagger-ul este important pentru ca va usureaza testarea backend-ului si pentru ca descriind cum API-ul poate fi folosit ca sa generati in mod automat clientii HTTP pentru aplicatiile care consuma API-ul expus. |
| {{:pw:laboratoare:swagger.png?700|}} | {{:pw:laboratoare:swagger.png?700|}} | ||
| Line 59: | Line 61: | ||
| ===== Sarcini de laborator ===== | ===== Sarcini de laborator ===== | ||
| - | Urmariti codul din WeatherForecastController si incercati sa-l modificati mergand pe intuitie si testand cu swagger-ul. Daca aveti intrebari intrebati asistentul, mai multe informatii o sa fie furnizate la urmatoarele laboaratoare. | + | Instalati-va uneltele necesare pentru laborator si intrebati de ajutor daca intampinati dificultati. |
| + | |||
| + | Urmariti codul din WeatherForecastController si incercati sa-l modificati mergand pe intuitie si testand cu swagger-ul. Daca aveti intrebari intrebati asistentul/a, mai multe informatii o sa fie furnizate la urmatoarele laboaratoare. | ||
| + | |||
| + | Descarcati template-ul de proiect de pe gitlab-ul grupului [[https://gitlab.com/mobylabwebprogramming/dotnetbackend|nostru]] si incercati sa urmariti codul cu explicatiile din comentarii, daca nu pentru acest laborator atunci pentru data viitoare un o sa fie folosit ca demonstrator. | ||
| + | |||
| + | <note tip>Daca sunteti interesati ce poate fi capabil .NET intrati pe [[https://www.nuget.org/|NuGet]] si explorati pachetele de C#, NuGet este un manager de pachete care ofera o gama larga de biblioteci care pot fi instale in proiecte ''Tools > NuGet Package Manager > Manage NuGet Package for Solution...'' pentru VS si ''Tools > NuGet > Manage NuGet Package for Solution'' pentru Rider.</note> | ||
| + | |||
| + | ===== Resurse utile ===== | ||
| + | * [[https://gitlab.com/mobylabwebprogramming| Gitlab-ul nostru]] | ||
| + | * [[https://visualstudio.microsoft.com/vs/|Visual studio 2022 Community]] | ||
| + | * [[https://azureforeducation.microsoft.com/devtools|Visual studio 2022 Enterprise pentru studenti]] | ||
| + | * [[https://my.upb.ro/|MyUPB]] | ||
| + | * [[https://www.jetbrains.com/dotnet/|DotUltimate]] | ||
| + | * [[https://www.jetbrains.com/rider/|Rider]] | ||
| + | * [[https://dotnet.microsoft.com/en-us/download/visual-studio-sdks|.NET 6 SDK]] | ||
| + | * [[https://www.postgresql.org/|PostreSQL]] | ||
| + | * [[https://docs.docker.com/engine/install/|Docker]] | ||
| + | * [[https://www.pgadmin.org/|PGAdmin]] | ||
| + | * [[https://dbeaver.io/download/|DBeaver]] | ||
| + | * [[https://learn.microsoft.com/en-us/dotnet/csharp/|Documentatie C#]] | ||
| + | * [[https://dotnet.microsoft.com/en-us/download/e-book/microservices-architecture/pdf|Carte Microservices architecture]] | ||
| + | |||
